/* Theme "Pinout": tông lá ô liu + nền kem + chấm xanh than, font Ubuntu – lấy cảm hứng từ các trang tra pinout cổ điển */
:root {
  --sans: "Ubuntu", system-ui, sans-serif; --mono: "Ubuntu Mono", ui-monospace, monospace;
  --bg: #f4f2e6; --surface: #fbfaf3; --surface2: #ebe8d6; --fg: #1f2a1a; --muted: #5d6652; --line: #cfcbb0;
  --leaf: #4e6a3a; --leaf-2: #5f7d48; --navy: #13262e;
  --accent: #4e6a3a; --accent-fg: #fff;
  --c-power: #e0312f; --c-gnd: #13262e; --c-gpio: #8e9d0c; --c-adc: #7a5fb5; --c-comm: #2a8fd8;
  --c-usb: #e07b1f; --c-strap: #c9a40f; --c-ban: #9c9a88; --c-ctl: #6d7a63;
  --ok: #4e6a3a; --warn: #a77d00; --ban: #c42a28; --info: #5d6652; --canvas: #ebe8d6;
  --r: 4px; --shadow: 0 1px 0 rgba(0,0,0,.08); color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #161c13; --surface: #1e2619; --surface2: #263020; --fg: #eceadb; --muted: #a7ae98; --line: #34402c; --canvas: #12170f;
  --c-gnd: #40535c; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #161c13; --surface: #1e2619; --surface2: #263020; --fg: #eceadb; --muted: #a7ae98; --line: #34402c; --canvas: #12170f;
  --c-gnd: #40535c; color-scheme: dark; }

body { font-family: var(--sans); }
.appbar { background: var(--leaf); border-bottom: 0; backdrop-filter: none; }
.brand b { color: #fff; font: 500 18px var(--sans); }
.brand span { color: #dfe7d2; }
.brand img { filter: hue-rotate(10deg) saturate(.8); }
.appbar .tabbar { background: rgba(0,0,0,.2); border: 0; }
.appbar .tabbar button { color: #e3eadb; border-radius: 4px; }
.appbar .tabbar button[aria-selected="true"] { background: #f4f2e6; color: var(--leaf); box-shadow: none; }
.appbar .icon-btn, .appbar .skin { background: rgba(0,0,0,.2); border: 0; color: #fff; }
.appbar .skin option { color: #000; }
.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(--leaf); color: #fff; border-color: var(--leaf); }
.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(--leaf); box-shadow: inset 4px 0 0 var(--leaf); 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(--leaf); 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(--leaf); }
.d-head h2 { font: 700 26px var(--mono); }
.d-sec { color: var(--leaf); font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; }
.dk, .tag.hdg { background: var(--leaf); color: #fff; }
.pp { border-radius: 4px; border-left: 4px solid var(--leaf); }
.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(--navy); 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: #f4f2e6; color: var(--leaf); }