:root {
  --bg: #0a0a0b;
  --surface: #141416;
  --surface-2: #1b1b1e;
  --surface-3: #232326;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text: #e9e9ea;
  --text-muted: #8f8f94;
  --text-faint: #5c5c61;
  --accent: #6f93e8;
  --success: #34d399;
  --warning: #e0a95c;
  --danger: #ea5f6b;
  --radius-lg: 16px;
  --radius-md: 11px;
  --radius-sm: 7px;
  /* "Segoe UI Variable Display/Text" only exist on recent Windows 11 builds -
     everywhere else (older Windows, Mac, Linux, mobile) they silently fall
     through, so the intended look never actually renders. This stack uses
     each platform's real native UI font instead, so the elegance is never
     a no-op fallback on any device. */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Retired the monospace look everywhere (was Cascadia Code) - digit
     alignment in tables/numbers still holds up fine via tabular-nums on
     this same sans stack, no need for a true monospace face for that. */
  --font-mono: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root[data-theme="light"] {
  --bg: #f5f5f6; --surface: #ffffff; --surface-2: #f8f8f9; --surface-3: #efeff1;
  --border: rgba(20,20,22,0.08); --border-strong: rgba(20,20,22,0.15);
  --text: #1c1c1e; --text-muted: #6b6b70; --text-faint: #9a9a9f;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f5f6; --surface: #ffffff; --surface-2: #f8f8f9; --surface-3: #efeff1;
    --border: rgba(20,20,22,0.08); --border-strong: rgba(20,20,22,0.15);
    --text: #1c1c1e; --text-muted: #6b6b70; --text-faint: #9a9a9f;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--text); font-family: var(--font-body); }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; font-size: 14px; font-weight: 400; }
::selection { background: var(--accent); color: #fff; }
button { font: inherit; }
a { color: inherit; }

/* ---- app top bar: balance top-left, logout top-right, nothing else ---- */
.app-top {
  display: flex; align-items: center; padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px);
}
.app-top .balance-chip {
  font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
  color: var(--text-muted); letter-spacing: -0.005em;
}
.app-top .spacer { flex: 1; }
.pill-btn {
  font-size: 12.5px; font-weight: 500; background: transparent; border: 1px solid var(--border);
  color: var(--text-muted); padding: 7px 13px; border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s;
  text-decoration: none; display: inline-flex; align-items: center;
}
.pill-btn:hover { border-color: var(--border-strong); color: var(--text); }
.back-btn {
  font-size: 12.5px; font-weight: 500; color: var(--text-faint); background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px; padding: 6px 0; text-decoration: none;
}
.back-btn:hover { color: var(--text-muted); }

/* ---- home: feature grid ---- */
.home-body { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; text-align: center; }
.home-head { margin-bottom: 40px; }
.home-head h1 { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 6px; }
.home-head p { color: var(--text-faint); font-size: 12.5px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-content: center; }
@media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 20px; text-align: center; cursor: pointer; text-decoration: none; display: block;
  transition: border-color .15s, background .15s;
}
.feature-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.feature-card:focus-visible { outline: 1px solid var(--border-strong); outline-offset: 2px; }
.feature-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 5px; color: var(--text); letter-spacing: .01em; }
.feature-card p { font-size: 12px; color: var(--text-faint); font-weight: 400; }
.feature-card.ghost { border-style: dashed; cursor: default; opacity: .45; }
.feature-card.ghost:hover { background: var(--surface); border-color: var(--border); }

/* ---- feature detail ---- */
.detail-body { max-width: 620px; margin: 0 auto; padding: 16px 24px 80px; text-align: center; }
.detail-head { margin: 12px 0 22px; }
.detail-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 6px; }
.detail-head .price-tag {
  font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-faint); font-weight: 500;
}

.mode-switch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin-bottom: 24px; }
.mode-switch button {
  font-size: 12px; font-weight: 500; padding: 7px 16px; border-radius: 999px; border: none; background: none;
  color: var(--text-faint); cursor: pointer; transition: background .15s, color .15s;
}
.mode-switch button.active { background: var(--surface-3); color: var(--text); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; text-align: left; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--text-faint); margin-bottom: 6px; }
.field input {
  width: 100%; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 9px 12px; font-family: var(--font-body);
}
.field input:focus { outline: none; border-color: var(--border-strong); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.panel form .btn-primary { display: block; margin: 6px auto 0; }

.btn-primary {
  font-size: 13px; font-weight: 500; background: var(--text); color: var(--bg); border: none;
  border-radius: var(--radius-sm); padding: 10px 20px; cursor: pointer; transition: opacity .15s;
}
.btn-primary:hover { opacity: .85; }
.btn-primary:disabled { opacity: .4; cursor: default; }

.msg { font-size: 12px; min-height: 16px; margin: 12px 0; text-align: center; padding: 0 8px; }
.msg.err { color: var(--danger); }
.msg.ok { color: var(--text-muted); }

/* ---- batch upload ---- */
.dropzone {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: 36px 22px;
  text-align: center; margin-bottom: 18px; transition: border-color .15s, background .15s;
}
.dropzone.dragover { border-color: var(--text-faint); background: var(--surface-2); }
.dropzone h4 { font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.dropzone p { font-size: 12px; color: var(--text-faint); margin-bottom: 14px; }
.dropzone .hint { font-size: 11px; color: var(--text-faint); margin-top: 12px; }
.dropzone input[type="file"] { display: none; }

.batch-summary { display: flex; justify-content: center; gap: 64px; flex-wrap: wrap; margin-bottom: 20px; text-align: center; }
.stat-chip { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.stat-chip b { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 23px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.stat-chip span { font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }

.batch-actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }

.progress-bar { height: 3px; border-radius: 999px; background: var(--surface-3); overflow: hidden; margin-bottom: 16px; }
.progress-bar > div { height: 100%; background: var(--text-faint); transition: width .3s; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 10.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--text-faint); padding: 9px 12px; border-bottom: 1px solid var(--border); }
td { padding: 10px 12px; font-size: 12.5px; border-bottom: 1px solid var(--border); font-weight: 400; }
tr:last-child td { border-bottom: none; }
td.mono, th.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.row-name { color: var(--text-muted); font-size: 12px; }
.status-text { font-size: 12px; color: var(--text-muted); }

/* Status shown as plain weighted text - no dot, no color, matching the rest
   of the page's monochrome rule. Final states get full text color + weight,
   pending states stay faint. */
.chip { font-size: 12px; font-weight: 400; color: var(--text-faint); }
.chip.ok, .chip.fail, .chip.notfound, .chip.warn { color: var(--text); font-weight: 500; }
.table-scroll { overflow-x: auto; }
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: 4px; text-align: left; }

.section-label {
  font-size: 11px; font-weight: 500; letter-spacing: .03em;
  color: var(--text-faint); margin: 28px 0 12px; text-align: center;
}

/* ---- tra-cuu: comprehensive search ---- */
.search-bar { display: flex; gap: 10px; margin-bottom: 20px; }
.search-bar input {
  flex: 1; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 10px 14px; font-family: var(--font-body);
}
.search-bar input:focus { outline: none; border-color: var(--border-strong); }
.search-bar .btn-primary { flex-shrink: 0; white-space: nowrap; }

.result-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.result-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 16px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s;
}
.result-item:hover { border-color: var(--border-strong); background: var(--surface-2); }
.result-item.selected { border-color: var(--accent); }
.result-item .r-name { font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.result-item .r-meta { font-size: 12px; color: var(--text-faint); }

.model-stage {
  position: relative; height: 420px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 20px; overflow: hidden;
}
.model-canvas-wrap { position: absolute; inset: 0; }
.model-canvas-wrap canvas { display: block; width: 100%; height: 100%; }
.model-lines { position: absolute; inset: 0; pointer-events: none; }
.model-lines line { stroke: var(--border-strong); stroke-width: 1; }
.info-label {
  position: absolute; max-width: 190px; font-size: 11.5px; line-height: 1.5;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 10px; backdrop-filter: blur(4px);
}
.info-label b { display: block; font-size: 10px; font-weight: 500; letter-spacing: .03em; color: var(--text-faint); text-transform: uppercase; margin-bottom: 2px; }
.info-label span { color: var(--text); word-break: break-word; }
.info-label.left { text-align: right; }
.info-label.right { text-align: left; }

.other-info-list { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; text-align: left; }
.other-info-list .row { display: flex; padding: 10px 14px; border-bottom: 1px solid var(--border); gap: 14px; }
.other-info-list .row:last-child { border-bottom: none; }
.other-info-list .row .k { flex: 0 0 140px; font-size: 12px; color: var(--text-faint); }
.other-info-list .row .v { flex: 1; font-size: 12.5px; color: var(--text); word-break: break-word; }

/* ---- auth pages: single centered card, no marketing panel ---- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 340px; text-align: center; }
.auth-card .brandline { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--text-faint); margin-bottom: 32px; }
.auth-card h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 24px; letter-spacing: -0.005em; }
.auth-card .field { text-align: left; }
.auth-foot { text-align: center; font-size: 12px; color: var(--text-faint); margin-top: 20px; }
.auth-foot a { color: var(--text-muted); text-decoration: none; }
.auth-foot a:hover { color: var(--text); }