:root {
  --bg: #0b0e14;
  --bg-elev: #131825;
  --bg-elev-2: #1b2233;
  --border: #232b3d;
  --text: #e6e9f0;
  --text-dim: #8b94a7;
  --accent: #4f8cff;
  --accent-soft: rgba(79, 140, 255, 0.12);
  --green: #2ecc71;
  --green-soft: rgba(46, 204, 113, 0.12);
  --red: #ff5c6c;
  --red-soft: rgba(255, 92, 108, 0.12);
  --radius: 14px;
  --panel-h: 600px; /* shared height for history / stock table / chart panels */
  --panel-border: #33415c; /* clearer border so empty panels still read as a card */
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

body {
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Fintech ambient background ---------- */
/* Dual-tone glows (blue = up, green = down) over the dark base, fixed behind
   all content so cards and tables stay fully legible on top. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 620px at 86% -12%, rgba(79, 140, 255, 0.20), transparent 60%),
    radial-gradient(820px 640px at 6% 112%, rgba(46, 204, 113, 0.13), transparent 60%),
    radial-gradient(1200px 800px at 80% -10%, #16203a 0%, var(--bg) 55%),
    var(--bg);
}
/* Faint "trading grid", masked so it fades toward the edges. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 150, 210, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 150, 210, 0.06) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}

.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }

.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.dim { color: var(--text-dim); }

/* ---------- Auth ---------- */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.auth-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Extra top padding so the brand clears the language switch pinned top-right
     (the Vietnamese brand text is long and would otherwise run under it). */
  padding: 58px 36px 36px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.brand .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.auth-sub { color: var(--text-dim); font-size: 14px; margin-bottom: 26px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color .15s;
}
.field input:focus { border-color: var(--accent); }
.btn {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 13px;
  font-size: 15px;
  font-weight: 600;
  transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--bg-elev-2); color: var(--text); border: 1px solid var(--border); }
.btn.sm { width: auto; padding: 8px 14px; font-size: 13px; }
.btn.buy { background: var(--green); }
.btn.sell { background: var(--red); }
/* Dark-yellow 保存 (save) button. */
.btn.save { background: #b8860b; color: #fff; }
/* 履歴閉じる (close history): neutral slate so it reads as a dismiss action,
   clearly distinct from the blue filter button. */
.btn.close { background: #475569; color: #fff; }
.btn.close:hover { filter: brightness(1.1); }
.auth-toggle { text-align: center; margin-top: 18px; font-size: 14px; color: var(--text-dim); }
.error {
  background: var(--red-soft);
  border: 1px solid rgba(255,92,108,.3);
  color: var(--red);
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ---------- App shell ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(11,14,20,.7);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Line the page-nav buttons' left edge up with the stock table's left edge.
   The page container is centered (max-width 1100, 28px padding) and the table
   sits after the 170px history column + 10px gap, so the table's left edge is
   (centered container left) + 180px. Position the nav absolutely at that x. */
.nav {
  display: flex; gap: 6px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(max(28px, (100vw - 1100px) / 2 + 28px) + 180px);
}
.nav button {
  background: transparent;
  border: none;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.nav button:hover { color: var(--text); background: var(--bg-elev); }
/* Active page highlight — kept while you're on that screen. Filled accent so the
   current page is unmistakable across both the top nav and the admin nav. */
.nav button.active,
.admin-nav .btn.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.nav button.active:hover,
.admin-nav .btn.active:hover { color: #fff; background: var(--accent); }
/* The top-bar brand sits in a fixed ~180px lane to the left of the page-nav,
   which is pinned to the stock table's left edge. Keep it on one line so a long
   localized name (e.g. Vietnamese "Chứng Khoán Japan") can't grow under the nav
   buttons. On wide desktops the nav is far to the right, so no cap is needed. */
.topbar .brand { font-size: 18px; margin-bottom: 0; white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1200px) {
  .topbar .brand {
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
  }
}

.user-chip { display: flex; align-items: center; gap: 12px; font-size: 14px; }

/* ---------- Language switch (JA / VI) ---------- */
.lang-switch {
  display: inline-flex; gap: 4px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px;
}
.lang-switch button {
  background: transparent; border: none; color: var(--text-dim);
  padding: 5px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600; font-family: inherit; white-space: nowrap;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button.active { background: var(--accent-soft); color: var(--accent); }
/* On the auth card, pin the switch to the top-right corner. */
.auth-card { position: relative; }
#lang-switch-auth { position: absolute; top: 14px; right: 14px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.container { max-width: 1100px; margin: 0 auto; padding: 28px; }

/* ---------- Cards & stats ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.card .label { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.card .value { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; }
.card .sub { font-size: 13px; margin-top: 6px; }

.section-title { font-size: 16px; font-weight: 600; margin: 26px 0 14px; display: flex; justify-content: space-between; align-items: center; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
.table-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-dim);
  font-weight: 600;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
th.num, td.num { text-align: right; }
td { padding: 14px 18px; font-size: 14px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-elev-2); }
/* Mark column: check + cross buttons together, sitting close with a small gap. */
th.mark, td.mark { text-align: center; white-space: nowrap; width: 84px; }
td.mark { display: table-cell; }
td.mark input { cursor: pointer; vertical-align: middle; }
td.mark .cross-btn { margin-left: 8px; vertical-align: middle; }
/* Cross button: a small toggle that strikes through the row when active. */
.cross-btn {
  cursor: pointer; border: 1px solid var(--border, #444); background: transparent;
  color: var(--text-dim, #888); border-radius: 6px; padding: 2px 8px;
  font-size: 13px; line-height: 1.4; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cross-btn:hover { border-color: #e5484d; color: #e5484d; }
.cross-btn.on { background: #e5484d; border-color: #e5484d; color: #fff; }
/* Disabled state for the locked button in the mutually-exclusive pair. */
td.mark input:disabled { cursor: not-allowed; opacity: 0.35; }
.cross-btn:disabled { cursor: not-allowed; opacity: 0.35; border-color: var(--border, #444); color: var(--text-dim, #888); background: transparent; }
/* Row whose chart is currently displayed on the right: a blue tint plus a solid
   accent stripe down the left edge so it's recognizable even on a checked row. */
tbody tr.row-active, tbody tr.row-active:hover { background: rgba(79, 140, 255, 0.22); }
tbody tr.row-active td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* Checked rows highlight yellow; override the hover background and use dark text for contrast. */
tbody tr.row-checked, tbody tr.row-checked:hover { background: #ffe600; }
tbody tr.row-checked td, tbody tr.row-checked td a { color: #1a1a1a; }
/* Crossed-out rows: strike through every cell's text (but not the mark buttons). */
tbody tr.row-crossed td:not(.mark), tbody tr.row-crossed td:not(.mark) a {
  text-decoration: line-through; opacity: 0.6;
}
.sym { font-weight: 600; }
.sym-sub { font-size: 12px; color: var(--text-dim); }
.pill { font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; }
.pill.buy { background: var(--green-soft); color: var(--green); }
.pill.sell { background: var(--red-soft); color: var(--red); }
.empty { padding: 40px; text-align: center; color: var(--text-dim); }

/* ---------- Scanner ---------- */
.scanner { max-width: none; }
/* Two-column grid: smaller results table on the left, TradingView chart on the
   right. The left header sits in row 1 alone, so the table (row 2, left) and the
   chart (row 2, right) start at the same vertical position. */
.scan-layout {
  display: grid;
  grid-template-columns: 170px 400px 1fr;
  grid-template-areas:
    ".         head    ."
    "histtitle toolbar ."
    "histlist  table   chart";
  /* Tighter gap so the history column sits closer to the table. */
  column-gap: 10px;
  align-items: start;
}
/* Keep the Saved History title/list flush-left in their column; restore a wider
   gap before the chart so only the history↔table spacing tightens. */
.scan-histtitle, .scan-histlist { text-align: left; }
.scan-right { margin-left: 0; }
.scan-head-area { grid-area: head; min-width: 0; }
.scan-left { grid-area: table; min-width: 0; }
.scan-right { grid-area: chart; min-width: 0; }
.scan-histtitle { grid-area: histtitle; min-width: 0; }
.scan-histlist {
  grid-area: histlist; min-width: 0;
  /* Fixed-height bordered frame matching the chart/table (600px) so the panel
     extends down to the same height regardless of how many entries it holds. */
  background: var(--bg-elev);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  padding: 10px;
  height: var(--panel-h);
  overflow-y: auto;
}
.table-toolbar { grid-area: toolbar; }
.scan-left.scanner th, .scan-left.scanner td { padding: 9px 12px; font-size: 13px; }
/* Fixed-height results table with its own scrollbar (matches the chart height),
   so scrolling over it pages through stocks instead of the whole page. */
/* Fixed height (matching the chart/history frame) so the table doesn't resize
   when the industry filter changes how many rows are shown — it scrolls instead. */
.scan-left .table-card { height: var(--panel-h); overflow-y: auto; border-color: var(--panel-border); }
.scan-left thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-elev); }
.tv-panel {
  height: var(--panel-h); border-radius: var(--radius);
  border: 1px solid var(--panel-border); background: var(--bg-elev); overflow: hidden;
  display: flex; flex-direction: column;
}
.tv-placeholder {
  display: flex; align-items: center; justify-content: center; flex: 1;
  padding: 24px; text-align: center; color: var(--text-dim); font-size: 14px;
}
.tv-placeholder.neg { color: var(--red); }
.tv-head {
  padding: 12px 16px; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--border); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tv-head-right { display: flex; align-items: center; gap: 14px; }
.tv-tool-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; font-size: 15px; line-height: 1;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev);
  color: var(--text); cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.tv-tool-btn:hover { background: var(--bg); }
.tv-tool-btn.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.tv-legend { display: flex; gap: 14px; font-weight: 500; font-size: 12px; color: var(--text-dim); }
.tv-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.tv-legend-item i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.tv-chart-area { flex: 1 1 auto; min-height: 0; position: relative; }
/* Expanded chart popup (opened by the 拡大表示 / Xem to button). Overrides the
   inline panel's fixed height and gives it an explicit size inside the backdrop. */
.tv-modal-panel {
  width: min(1100px, 95vw); height: min(720px, 88vh);
  box-shadow: var(--shadow);
}
/* Replay (リプレイ / Xem lại) — "click to pick a start" hint + the playback bar. */
.tv-replay-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5;
  background: rgba(15,23,42,0.85); color: #fff; padding: 6px 14px;
  border-radius: 8px; font-size: 13px; font-weight: 600; pointer-events: none;
  white-space: nowrap;
}
.tv-replay-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-top: 1px solid var(--border); background: var(--bg-elev);
}
.tv-replay-bar .tv-replay-speed { width: auto; padding: 0 10px; font-size: 12px; font-weight: 700; }
.tv-replay-pos {
  margin-left: auto; color: var(--text-dim); font-size: 12px;
  font-variant-numeric: tabular-nums;
}
/* "Analyst" indicator watch table, overlaid top-right of the chart. */
.tv-table {
  position: absolute; top: 8px; right: 64px; z-index: 3;
  min-width: 92px; padding: 3px 6px; border-radius: 5px;
  background: rgba(15, 23, 42, 0.82); border: 1px solid var(--border);
  font-size: 8px; pointer-events: none; backdrop-filter: blur(2px);
}
.tv-table.buy { border-left: 2px solid #f5cd45; }
.tv-table.sell { border-left: 2px solid #a200ff; }
.tv-table-title {
  font-size: 9px; font-weight: 700; color: var(--accent);
  text-align: center; margin-bottom: 2px;
}
.tv-table-row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.tv-table-key { color: var(--text-dim); }
.tv-table-val { font-variant-numeric: tabular-nums; color: var(--text); }
.tv-table-val.accent { color: #ff5fc8; font-weight: 600; }
/* The expanded popup has room, so show a noticeably larger, more readable box. */
.tv-modal-panel .tv-table {
  min-width: 168px; padding: 9px 13px; right: 72px; top: 12px;
  font-size: 13px; border-radius: 9px;
}
.tv-modal-panel .tv-table.buy, .tv-modal-panel .tv-table.sell { border-left-width: 3px; }
.tv-modal-panel .tv-table-title { font-size: 15px; margin-bottom: 7px; }
.tv-modal-panel .tv-table-row { padding: 2px 0; gap: 16px; }
.name-link { color: var(--text); text-decoration: none; cursor: pointer; }
.name-link:hover { color: var(--green); text-decoration: underline; }
@media (max-width: 860px) {
  .scan-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "histtitle" "histlist" "toolbar" "table" "chart";
  }
  .scan-right { margin-left: 0; } /* no indent in the stacked layout */
  /* Stacked layout: table is flush with the container, so let the nav flow
     normally in the top bar again instead of pinning it to the +180px offset. */
  .nav { position: static; transform: none; }
}
.scanner-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 24px 0 10px;
}
.scanner-title { font-size: 22px; font-weight: 700; }
/* While a saved history is open, the title becomes the yellow timestamped label. */
.scanner-title.is-history { color: #f5cd45; }
/* Toolbar directly above the results table: history label (left) + 保存 (right). */
.table-toolbar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px; min-height: 30px; justify-content: flex-start;
}
/* Code + industry filters sit flush-left (level with the table's left edge);
   保存 is pinned to the right of the toolbar. */
.table-toolbar .save { margin-left: auto; }
/* Industry filter dropdown, sits left of the 保存 button. */
.industry-select {
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; font-family: inherit; cursor: pointer;
  max-width: 200px;
}
.industry-select:hover { border-color: var(--accent); }
.industry-select:focus { outline: none; border-color: var(--accent); }
/* Code filter input — same look as the industry dropdown, sitting beside it. */
.symbol-filter {
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; font-family: inherit;
  width: 120px;
}
.symbol-filter::placeholder { color: var(--text-dim); }
.symbol-filter:hover { border-color: var(--accent); }
.symbol-filter:focus { outline: none; border-color: var(--accent); }

/* Saved-history panel (left of the results table) + the opened-history label. */
.history-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-dim); margin: 0 0 10px; }
/* Manual reload button beside the saved-history title. */
.history-reload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border, rgba(15, 23, 42, 0.15));
  border-radius: 6px;
  cursor: pointer;
}
.history-reload:hover { color: var(--text, #111); background: rgba(15, 23, 42, 0.05); }
.history-reload:disabled { opacity: 0.6; cursor: default; }
.history-reload.spinning { animation: history-reload-spin 0.6s linear infinite; }
@keyframes history-reload-spin { to { transform: rotate(360deg); } }
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.4;
}
.history-item:hover { border-color: var(--accent); }
.history-item.active { background: var(--accent-soft); border-color: var(--accent); }
/* Brief yellow flash on the specific item that was just saved/updated. */
@keyframes flash-item {
  0%   { background: #ffe600; border-color: #ffe600; }
  100% { background: var(--bg-elev-2); border-color: var(--border); }
}
.history-item.flash-saved { animation: flash-item 0.7s ease-out; }
.history-empty { color: var(--text-dim); font-size: 12px; text-align: center; padding: 18px 8px; }
.history-item-label { flex: 1; min-width: 0; cursor: pointer; }
.history-del {
  flex: 0 0 auto; background: transparent; border: none; color: var(--text-dim);
  font-size: 13px; line-height: 1; padding: 2px 5px; border-radius: 5px;
}
.history-del:hover { color: var(--red); background: var(--red-soft); }
.history-label { font-size: 14px; font-weight: 600; color: #f5cd45; margin: 0; }
/* Filter button + circular loading indicator, grouped on the right of the head. */
.scanner-actions { display: flex; align-items: center; gap: 12px; }
/* Circular progress indicator with % in the center. The conic-gradient fill
   (driven by --pct) sweeps clockwise around the ring to show how far the scan
   has got, and the number in the middle counts up to 100%. */

/* Registering --pct as a <number> lets the conic fill animate SMOOTHLY between
   progress steps (a plain custom property would jump). Browsers without
   @property support simply step instead — the percentage is still correct. */
@property --pct {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}
.circ-progress {
  --pct: 0;
  position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--bg-elev-2) 0);
  display: grid; place-items: center;
  flex: 0 0 auto;
  transition: --pct 0.5s linear;
}
/* Inner hole — its inset sets the visible ring thickness. */
.circ-progress::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--bg);
}
.circ-pct {
  position: relative; z-index: 1;
  font-size: 10px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.scanner th:first-child, .scanner td:first-child { width: 40px; }
.scanner th, .scanner td { padding: 12px 16px; }
.sym-link { color: var(--text); text-decoration: none; cursor: pointer; }
.sym-link:hover { color: var(--green); text-decoration: underline; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn {
  background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-dim);
  width: 30px; height: 30px; border-radius: 8px; font-size: 16px; line-height: 1;
}
.icon-btn:hover { color: var(--text); }
.icon-btn.star.on { color: #ffcf4d; border-color: rgba(255,207,77,.4); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.modal {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 26px; width: 100%; max-width: 380px;
  box-shadow: var(--shadow);
}
.modal h3 { font-size: 18px; margin-bottom: 4px; }
.modal .price-now { font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }
.seg { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 16px; }
.seg button { flex: 1; background: transparent; border: none; color: var(--text-dim); padding: 9px; border-radius: 7px; font-weight: 600; font-size: 14px; }
.seg button.active.buy { background: var(--green); color: #fff; }
.seg button.active.sell { background: var(--red); color: #fff; }
.modal .estimate { display: flex; justify-content: space-between; font-size: 14px; margin: 14px 0; color: var(--text-dim); }
.modal .estimate b { color: var(--text); }
.modal-actions { display: flex; gap: 10px; margin-top: 8px; }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text);
  padding: 12px 20px; border-radius: 10px; font-size: 14px; box-shadow: var(--shadow);
  z-index: 100; opacity: 0; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }
.toast.err { border-color: rgba(255,92,108,.5); color: var(--red); }

/* ---------- User management (Create User / User List) ---------- */
/* Admin nav buttons stacked below the top bar at the far-right edge of the page
   (to the right of the centered content container), equal width, right-aligned.
   Create User sits above User List. */
#app-view { position: relative; }
.admin-nav {
  position: absolute; top: 76px; right: 20px; z-index: 5;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
/* Allow long labels (e.g. "Danh sách người dùng") to wrap inside the button
   instead of overflowing; both buttons keep the same width. */
.admin-nav .btn.sm {
  width: 150px; white-space: normal; text-align: center;
  line-height: 1.3; padding: 9px 10px;
}
.admin-nav:empty { display: none; }
.user-head { display: flex; align-items: center; gap: 14px; margin: 8px 0 18px; }
.user-title { font-size: 20px; font-weight: 700; }

/* Compact form card for the Create User screen. */
/* Header + form share one centered column so the title aligns with the form. */
.user-form-wrap { max-width: 380px; margin: 0 auto; }
.user-form-wrap .back-btn { margin: 4px 0 16px; }        /* back button on top */
.user-form-wrap .user-title { margin: 0 0 12px; text-align: center; } /* centered above the form */
.form-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 22px 18px;
}
.form-card .field, .modal .field { margin-bottom: 13px; }
.form-card .field label, .modal .field label { margin-bottom: 5px; }
/* Tighter inputs/selects on the user forms (and the edit modal). */
.form-card .field input, .form-card .field select,
.modal .field input, .modal .field select {
  padding: 9px 12px; font-size: 14px;
}
/* Selects everywhere match the text inputs. */
.field select {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; color: var(--text);
  font-size: 15px; outline: none; font-family: inherit; cursor: pointer;
}
.field select:focus { border-color: var(--accent); }
.field input[readonly] { color: var(--text-dim); cursor: default; }

/* Status section: "Status" label on top, the two options grouped tightly in a
   bordered row right beneath it. */
.radio-row {
  display: inline-flex; gap: 8px; padding: 5px; margin-top: 2px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
}
.radio-opt {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 14px; padding: 5px 12px; border-radius: 7px;
}
.radio-opt:hover { background: var(--bg-elev-2); }
.radio-opt input { width: auto; cursor: pointer; margin: 0; }

.form-actions { margin-top: 6px; }
.form-actions .btn { width: 100%; padding: 12px; }

@media (max-width: 720px) {
  .stat-grid { grid-template-columns: 1fr; }
  .nav button { padding: 8px 10px; font-size: 13px; }
  .hide-sm { display: none; }
  .container, .topbar { padding-left: 14px; padding-right: 14px; }
}