/* =========================================================
   2026 Efficiency Recovery Tracker — design system
   ========================================================= */
:root {
  --bg:          #0b0e14;
  --bg-2:        #0f1319;
  --panel:       #141920;
  --panel-2:     #192030;
  --line:        #222d3d;
  --line-soft:   #1c2535;

  --text:        #e2e8f4;
  --text-dim:    #8494aa;
  --text-faint:  #4e5f72;

  --gold:        #e8a82e;
  --gold-s:      #f5d07a;
  --gold-d:      #b07d14;
  --blue:        #60a5fa;
  --violet:      #a78bfa;
  --green:       #4ade80;
  --orange:      #f97316;
  --red:         #f43f5e;

  --r:           16px;
  --r-sm:        10px;
  --shadow:      0 20px 60px -20px rgba(0,0,0,.7);
  --serif:       "Cormorant Garamond", Georgia, serif;
  --sans:        "Inter", system-ui, sans-serif;
  --mono:        "Space Grotesk", "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(900px 500px at 85% -5%,  rgba(232,168,46,.08),  transparent 60%),
    radial-gradient(700px 500px at -5% 100%, rgba(96,165,250,.06),  transparent 55%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(100,150,200,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100,150,200,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(140% 80% at 50% 0%, #000 30%, transparent 100%);
}

.wrap { position: relative; z-index: 1; max-width: 1220px; margin: 0 auto; padding: 28px 24px 72px; }

/* ── Topbar ── */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; gap: 12px; }
.brand  { display: flex; align-items: center; gap: 14px; }
.mark   {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(150deg, #1e2a3a, #141920);
  border: 1px solid var(--line); color: var(--gold);
}
.mark svg { width: 22px; height: 22px; }
.brand h1 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: 0; line-height: 1; }
.brand .sub { font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text-faint); margin-top: 4px; }
.nav { display: flex; gap: 10px; }

.btn {
  font-family: var(--sans); font-size: .84rem; font-weight: 500;
  color: var(--text); background: var(--panel); border: 1px solid var(--line);
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: all .18s ease;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn:hover { border-color: var(--gold); color: var(--gold-s); transform: translateY(-1px); }
.btn--primary { background: linear-gradient(150deg, var(--gold), var(--gold-d)); color: #1a1200; border-color: transparent; font-weight: 600; }
.btn--primary:hover { color: #1a1200; filter: brightness(1.07); transform: translateY(-1px); }
.btn--ghost { background: transparent; }

/* ── Cards ── */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.card-pad { padding: 24px; }
.card-head { padding: 20px 24px 10px; }
.card-head h2 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 0; }
.card-head .hint { color: var(--text-faint); font-size: .78rem; margin-top: 3px; }

/* ── Hero row ── */
.hero { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-bottom: 20px; }
@media(max-width: 860px){ .hero { grid-template-columns: 1fr; } }

/* ── Gauge ── */
.gauge-card { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px 20px 22px; text-align: center; }
.gauge-wrap { position: relative; width: 220px; height: 220px; }
.gauge-wrap svg { width: 100%; height: 100%; }
.gauge-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-score {
  font-family: var(--mono); font-size: 3rem; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(180deg, #fff 30%, var(--gold-s));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gauge-lbl { font-size: .65rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-faint); margin-top: 8px; }
.gauge-foot { margin-top: 20px; }
.gauge-foot .status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; padding: 6px 16px;
  border-radius: 999px; border: 1px solid; letter-spacing: .02em;
}
.gauge-foot .pace-line { color: var(--text-dim); font-size: .8rem; margin-top: 10px; }
.gauge-foot .pace-line b { color: var(--text); }

/* ── Milestone track ── */
.milestone-card { padding: 24px 28px 28px; display: flex; flex-direction: column; }
.milestone-card h2 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin: 0 0 18px; }
.track-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.track-bar {
  position: relative; height: 8px; background: var(--line);
  border-radius: 999px; margin: 52px 0 56px;
}
.track-fill { height: 100%; border-radius: 999px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.track-cursor {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  border: 3px solid var(--bg); background: var(--gold);
  box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(232,168,46,.55);
  transition: left 1.2s cubic-bezier(.4,0,.2,1);
}
.milestone-node {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.milestone-node .dot {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line);
  background: var(--panel); transition: all .4s ease;
}
.milestone-node.achieved .dot { background: var(--green); border-color: var(--green); box-shadow: 0 0 10px rgba(74,222,128,.45); }
.milestone-node.partial .dot  { background: var(--gold);  border-color: var(--gold);  box-shadow: 0 0 10px rgba(232,168,46,.45); }
.milestone-node .m-label  { position: absolute; bottom: 28px; white-space: nowrap; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--text-dim); }
.milestone-node .m-target { position: absolute; top: 28px; white-space: nowrap; font-size: .68rem; color: var(--text-faint); }
.milestone-node.achieved .m-label { color: var(--green); }
.milestone-node.partial  .m-label { color: var(--gold); }

/* ── KPI cards ── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
@media(max-width: 900px){ .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-icon { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; }
.kpi-icon svg { width: 18px; height: 18px; }
.kpi-weight { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.kpi-label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.kpi-value { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.kpi-target { color: var(--text-faint); font-size: .76rem; }
.kpi-bar-bg { height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 2px; }
.kpi-bar-fill { height: 100%; border-radius: 999px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.kpi-pct { font-size: .78rem; font-weight: 600; }

/* ── Charts ── */
.charts-row { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; margin-bottom: 20px; }
@media(max-width: 860px){ .charts-row { grid-template-columns: 1fr; } }
.chart-body { padding: 4px 18px 16px; }
.chart-body svg { width: 100%; display: block; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0 18px 10px; font-size: .76rem; color: var(--text-dim); }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 5px; }

/* ── Monthly table ── */
.month-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.month-table th { padding: 10px 16px; text-align: left; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--line); font-weight: 500; }
.month-table td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); }
.month-table tr:last-child td { border-bottom: none; }
.month-table tr:hover td { background: rgba(255,255,255,.02); }
.month-table .score-pill { font-weight: 600; font-family: var(--mono); display: inline-flex; align-items: center; gap: 6px; }
.month-table .score-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Form (add page) ── */
.layout-2 { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
@media(max-width: 900px){ .layout-2 { grid-template-columns: 1fr; } }
.form-stack { display: flex; flex-direction: column; gap: 20px; }
.form-grid  { display: flex; flex-direction: column; gap: 14px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { display: block; font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
.field input, .field select {
  width: 100%; font-family: var(--sans); font-size: .92rem; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 10px 13px; transition: border-color .18s, box-shadow .18s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,168,46,.14); }
.field .help { color: var(--text-faint); font-size: .73rem; margin-top: 5px; }
.field .with-pre { position: relative; }
.field .with-pre span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-family: var(--mono); font-size: .85rem; pointer-events: none; }
.field .with-pre input { padding-left: 44px; }

.score-preview {
  background: linear-gradient(150deg, rgba(232,168,46,.10), rgba(232,168,46,.03));
  border: 1px solid rgba(232,168,46,.22); border-radius: var(--r-sm);
  padding: 16px 18px;
}
.score-preview .sp-label { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.score-preview .sp-score { font-family: var(--mono); font-size: 2rem; font-weight: 700; color: var(--gold-s); }
.score-preview .sp-breakdown { font-size: .76rem; color: var(--text-dim); margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.score-preview .sp-breakdown span b { color: var(--text); }

/* month-list */
.m-list { display: flex; flex-direction: column; }
.m-row { display: grid; grid-template-columns: 76px 1fr 1fr 1fr 1fr auto; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); font-size: .83rem; }
.m-row:last-child { border-bottom: none; }
.m-row:hover { background: rgba(255,255,255,.02); }
.m-row .m-month { font-weight: 600; }
.m-row .m-val { font-family: var(--mono); font-size: .86rem; }
.m-row .del { background: transparent; border: 1px solid var(--line); color: var(--text-faint); width: 30px; height: 30px; border-radius: 7px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: all .15s; }
.m-row .del:hover { border-color: var(--red); color: #f43f5e; }
.m-row .del svg { width: 13px; height: 13px; }
@media(max-width: 700px){ .m-row { grid-template-columns: 1fr 1fr 1fr; } }

.empty-row { padding: 36px 20px; text-align: center; color: var(--text-faint); }
.tools { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 20px; border-top: 1px solid var(--line-soft); }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px);
  background: var(--panel); border: 1px solid var(--gold); color: var(--gold-s);
  padding: 11px 22px; border-radius: 999px; font-size: .86rem;
  box-shadow: var(--shadow); opacity: 0; pointer-events: none; z-index: 99;
  transition: all .28s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes spin { to { transform: rotate(360deg); } }

.foot { text-align: center; color: var(--text-faint); font-size: .74rem; margin-top: 44px; letter-spacing: .04em; }