/* Theme "Pindex" – hai vùng rõ rệt:
   ☀ Ban ngày: navy + cyan sáng theo logo
   ☾ Ban đêm: xanh ô liu tối pha chút xanh lá, để mắt dễ chịu và phân biệt hẳn với ban ngày */
:root {
  --sans: "Ubuntu", system-ui, sans-serif; --mono: "Ubuntu Mono", ui-monospace, monospace;
  --bg: #0a2a56; --surface: #e8f0f8; --surface2: #d4e3f1; --fg: #06213f; --muted: #35618f; --line: #9bbbd8;
  --navy: #041E42; --navy-2: #064273; --cyan: #00AEEF; --cyan-2: #00C2F7;
  --accent: #0098da; --accent-fg: #fff;
  --c-power: #e8392f; --c-gnd: #46586b; --c-gpio: #00a37a; --c-adc: #8257e0; --c-comm: #00AEEF;
  --c-usb: #f08a1c; --c-strap: #e0ad00; --c-ban: #9db4c7; --c-ctl: #5f7b96;
  --ok: #076b50; --warn: #8a6600; --ban: #b5251d; --info: #35618f; --canvas: #0b2a58;
  --label: #06478a; --pad: #041E42;
  --r: 4px; --shadow: 0 1px 0 rgba(4,30,66,.08); color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #11170f; --surface: #1a2217; --surface2: #222c1d; --fg: #e6ecdd; --muted: #a2b093; --line: #313d28; --canvas: #0d120b;
  --accent: #a3c955; --accent-fg: #141a0e; --cyan: #a3c955;
  --c-power: #e0564c; --c-gnd: #5f6b55; --c-gpio: #7fc06a; --c-adc: #a98fe0; --c-comm: #5fb8d8;
  --c-usb: #e0954a; --c-strap: #d9bb4a; --c-ban: #697560; --c-ctl: #74836a;
  --ok: #7fc06a; --warn: #d9bb4a; --ban: #e0564c; --info: #a2b093;
  --label: #bcd38a; --pad: #2b3723;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #11170f; --surface: #1a2217; --surface2: #222c1d; --fg: #e6ecdd; --muted: #a2b093; --line: #313d28; --canvas: #0d120b;
  --accent: #a3c955; --accent-fg: #141a0e; --cyan: #a3c955;
  --c-power: #e0564c; --c-gnd: #5f6b55; --c-gpio: #7fc06a; --c-adc: #a98fe0; --c-comm: #5fb8d8;
  --c-usb: #e0954a; --c-strap: #d9bb4a; --c-ban: #697560; --c-ctl: #74836a;
  --ok: #7fc06a; --warn: #d9bb4a; --ban: #e0564c; --info: #a2b093;
  --label: #bcd38a; --pad: #2b3723;
  color-scheme: dark; }
/* Thanh tiêu đề: ban ngày navy, ban đêm ô liu đậm */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .appbar { background: #1a2217; border-bottom-color: #313d28; } }
:root[data-theme="dark"] .appbar { background: #1a2217; border-bottom-color: #313d28; }
/* nền tối: các khối đặc dùng xanh ô liu thay cho navy, chữ trên đó vẫn sáng */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #38491f; } }
:root[data-theme="dark"] { --navy: #38491f; }


/* ☀ Ban ngày chia vùng: nền trang navy; cột board, khung vẽ và panel chi tiết cũng navy (đổi token ngay trong vùng nên mọi chữ,
   nút, đường kẻ bên trong tự sáng lên); các thẻ nội dung (Mua board, Bảng chân, Thông số…) giữ màu trắng dịu cho dễ đọc */
:root[data-theme="light"] .boards, :root[data-theme="light"] .detail, :root[data-theme="light"] .canvas, :root[data-theme="light"] #bsvg {
  --surface: #14407e; --surface2: #0e3269; --fg: #eef5fc; --muted: #a9c5e7; --line: #2f60a3;
  --accent: #00b5f0; --accent-fg: #031a35; --label: #7fd4ff; --navy: #0a63c7; --canvas: #0b2a58;
  --ok: #5fd6a4; --warn: #f0c75a; --ban: #ff7a70; --info: #a9c5e7; --pad: #0b2a58;
  color: var(--fg);
}
:root[data-theme="light"] .boards { padding: 10px; border-radius: 8px; background: #071d3f; }
:root[data-theme="light"] .detail { border-color: #2f60a3; }
/* chữ nằm thẳng trên nền navy của trang */
:root[data-theme="light"] [data-panel] > .muted, :root[data-theme="light"] .bwrap > .muted { color: #b7cfee; }

body { font-family: var(--sans); }
.appbar { background: #fff; border-bottom: 3px solid var(--navy); backdrop-filter: none; }
.appbar .tabbar button[aria-selected="true"] { background: var(--navy) !important; color: #fff !important; }
.brand b { font: 500 18px var(--sans); }

.brand img { filter: none; }
.appbar .tabbar { background: var(--surface2); border: 0; }
.appbar .tabbar button { color: var(--muted); border-radius: 4px; }

.appbar .icon-btn, .appbar .skin { background: var(--surface2); border: 1px solid var(--line); color: var(--fg); }

.card { border-radius: 4px; }
.stage-head h1 { font: 500 22px var(--sans); }
.seg { border-radius: 4px; } .seg button { border-radius: 3px; }
.seg button[aria-pressed="true"], .chip[aria-pressed="true"], .stab[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.chip, .stab { border-radius: 4px; font-family: var(--mono); font-size: 14px; }
.board-card { border-radius: 4px; }
.board-card[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 4px 0 0 var(--navy); background: var(--surface2); }
.bc-icon { border-radius: 4px; }
.canvas { background-image: none; border-radius: 4px; }

/* Kiểu dải hàng xen kẽ lá / kem cho bảng */
.spec th { background: var(--navy); color: #fff; font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.spec tbody tr:nth-child(even) td { background: var(--surface2); }
.parts th, .elec dt { color: var(--label); }
.d-head h2 { font: 700 26px var(--mono); }
.d-sec { color: var(--label); font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; }
.dk, .tag.hdg { background: var(--navy); color: #fff; }
.pp { border-radius: 4px; border-left: 4px solid var(--navy); }
.status { border-radius: 4px; }
.code { background: var(--navy); color: #d6e6a8; border-radius: 4px; font-family: var(--mono); padding: 10px 12px; white-space: pre-wrap; }
.pinchip { border: 1px solid var(--line); background: var(--surface2); border-radius: 999px; padding: 2px 10px; font: 700 13px var(--mono); }
.procon { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* SVG: nhãn chân font Ubuntu Mono, pad kiểu chấm tròn xanh than */
#svg text { font-family: var(--mono); font-weight: 700; }
#svg .pad { fill: var(--pad); stroke: #c9b76a; stroke-width: .25; }
#svg .tab { rx: .3; }
#svg .pin.sel .ring { stroke: #f4f2e6; stroke-width: .45; }
.daynight { border: 0; background: rgba(0,0,0,.2); border-radius: 4px; }
.daynight button { color: #e3eadb; }
.daynight button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }