/* A Recomend — System (developer) panels inside the admin console.
   Everything is scoped under #secSystem; tokens/base come from auth.css.
   Calm, editorial, hairline-bordered — DESIGN.md. */

/* Header row: API status + bound account */
#secSystem .sys-status {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s4); font-size: 13px; color: var(--muted);
}
#secSystem .sys-status code {
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 8px; font-size: 12px; word-break: break-all;
}
#secSystem .status { display: inline-flex; align-items: center; gap: var(--s2); font-size: 12px; font-weight: 600; }
#secSystem .status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
#secSystem .status.ok .dot { background: var(--accent); }
#secSystem .status.down .dot { background: var(--danger); }
#secSystem .sys-refresh { margin-inline-start: auto; }

/* Panel grid */
#secSystem .dev-grid {
  display: grid; gap: var(--s4); margin-top: var(--s4);
  grid-template-columns: repeat(2, 1fr);
}
#secSystem .dev-card {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: var(--s4); background: var(--surface);
}
#secSystem .dev-card.wide { grid-column: 1 / -1; }
#secSystem .dev-card h3 { margin: 0 0 var(--s1); font-size: 15px; font-weight: 600; }
#secSystem .dev-card .hint { margin: 0 0 var(--s3); font-size: 13px; color: var(--muted); }
#secSystem .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 720px) {
  #secSystem .dev-grid { grid-template-columns: 1fr; }
  #secSystem .cols { grid-template-columns: 1fr; }
}

/* Controls */
#secSystem label { display: block; font-size: 13px; font-weight: 600; margin: var(--s3) 0 var(--s1); }
#secSystem select, #secSystem textarea, #secSystem input[type=text], #secSystem input[type=number] {
  width: 100%; font-size: 14px;
}
#secSystem .row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin: var(--s3) 0; }
#secSystem .row > * { flex: 1 1 auto; }
#secSystem .row button { flex: 0 0 auto; }
#secSystem .check { display: flex; align-items: center; gap: var(--s2); font-weight: 600; font-size: 13px; }
#secSystem .check input { width: auto; }
#secSystem button.danger {
  background: var(--surface); color: var(--danger);
  border: 1px solid var(--line); height: 40px; padding: 0 var(--s3);
}
#secSystem button.danger:hover:not(:disabled) { background: var(--danger-weak); border-color: var(--danger-weak); }

/* Results */
#secSystem .result {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  border-radius: var(--r-card); background: var(--bg); border: 1px solid var(--line);
}
#secSystem .result.small { font-size: 13px; }

#secSystem .weights { display: grid; gap: var(--s2); margin-top: var(--s2); }
#secSystem .bar-row { display: grid; grid-template-columns: 90px 1fr 46px; gap: var(--s2); align-items: center; font-size: 13px; }
#secSystem .bar { height: 8px; background: var(--accent-weak); border-radius: var(--r-pill); overflow: hidden; }
#secSystem .bar > span { display: block; height: 100%; background: var(--accent); }

/* Recommendation result */
#secSystem .rec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); flex-wrap: wrap; }
#secSystem .rec-title-ar { font-size: 15px; font-weight: 600; margin: 0; }
#secSystem .rec-title-en { font-size: 12px; color: var(--muted); margin: 2px 0 0; direction: ltr; text-align: start; }
#secSystem .badge.exploit { background: var(--accent-weak); color: var(--accent-press); }
#secSystem .badge.explore { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
#secSystem .price { font-size: 15px; font-weight: 600; color: var(--ink); margin: var(--s2) 0; }
#secSystem .reason-ar { font-size: 14px; margin: var(--s2) 0 var(--s1); }
#secSystem .reason-en { font-size: 13px; color: var(--muted); direction: ltr; text-align: left; margin: 0; }
#secSystem .meta { font-size: 12px; color: var(--muted); margin-top: var(--s2); }
#secSystem .meta code, #secSystem .similar-trait code, #secSystem .result code {
  background: var(--accent-weak); color: var(--accent-press);
  padding: 1px 6px; border-radius: 5px; font-size: 12px;
}

#secSystem .feedback { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
#secSystem .feedback button {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  height: 34px; padding: 0 var(--s3); font-size: 13px;
}
#secSystem .feedback button:hover:not(:disabled) { background: var(--accent-weak); border-color: var(--accent-weak); }

#secSystem .json {
  margin-top: var(--s3); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); padding: var(--s3);
  border-radius: var(--r-card); font-size: 12px; max-height: 320px; overflow: auto;
  direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-word;
}

/* A/B comparison */
#secSystem .ab { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: center; margin-top: var(--s2); }
#secSystem .ab-card { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s4); background: var(--surface); }
#secSystem .ab-pick { width: 100%; margin-top: var(--s3); }
#secSystem .vs { font-weight: 600; color: var(--muted); font-size: 12px; letter-spacing: .04em; }
@media (max-width: 720px) {
  #secSystem .ab { grid-template-columns: 1fr; }
  #secSystem .vs { padding: var(--s1) 0; text-align: center; }
}

/* Zero-history transfer note / context note / proactivity note */
#secSystem .transfer-note, #secSystem .ctx-note, #secSystem .pro-note {
  margin-top: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-btn);
  background: var(--accent-weak); color: var(--accent-press);
  font-size: 13px; font-weight: 600;
}

/* Users like you */
#secSystem .similar-list { display: grid; gap: var(--s2); margin-top: var(--s1); }
#secSystem .similar-row {
  display: grid; grid-template-columns: 70px 1fr 46px auto; gap: var(--s2); align-items: center;
  font-size: 13px; padding: var(--s2) 0; border-bottom: 1px solid var(--line);
}
#secSystem .similar-row:last-child { border-bottom: 0; }
#secSystem .similar-row > code {
  background: var(--bg); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 5px; font-size: 12px;
}
#secSystem .similar-pct { font-weight: 600; color: var(--accent-press); }
#secSystem .similar-trait { color: var(--muted); font-size: 12px; }
@media (max-width: 720px) {
  #secSystem .similar-row { grid-template-columns: 60px 1fr 40px; }
  #secSystem .similar-trait { grid-column: 1 / -1; }
}

/* World / context */
#secSystem .ctx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin-top: var(--s1); }
#secSystem .ctx-grid label { margin-top: 0; }
@media (max-width: 720px) {
  #secSystem .ctx-grid { grid-template-columns: 1fr 1fr; }
}

/* Proactivity */
#secSystem .pro-trust { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); font-size: 13px; font-weight: 600; }
#secSystem .pro-trust-bar { flex: 1 1 auto; }
#secSystem .pro-event { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
#secSystem .pro-event:first-child { padding-top: var(--s1); }
#secSystem .pro-event:last-child { border-bottom: 0; padding-bottom: 0; }

/* System architecture */
#secSystem .arch-box { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--s3) var(--s4); background: var(--bg); }
#secSystem .arch-box-title { font-weight: 600; color: var(--accent-press); font-size: 13px; margin-bottom: var(--s3); }
#secSystem .eng-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s2); }
#secSystem .eng-chip {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: var(--s2) var(--s3); font-size: 13px;
}
#secSystem .eng-chip b { color: var(--ink); font-weight: 600; }
#secSystem .eng-role { color: var(--muted); font-size: 11px; margin-inline-start: auto; text-align: end; }
#secSystem .arch-line { margin-top: var(--s3); font-size: 13px; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
#secSystem .arch-label { font-weight: 600; color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
#secSystem .kv {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn);
  padding: 3px 9px; display: inline-flex; align-items: center; gap: var(--s2); font-size: 12px;
}
#secSystem .sdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
#secSystem .sdot.up { background: var(--accent); }
#secSystem .sdot.down { background: var(--danger); }