/* Shared red / blue palette. Hardware indicator and wire colors remain factual. */
:root {
  --bg:#f5f7fb; --paper:#fff; --ink:#25334b; --muted:#65748a;
  --blue:#2859bb; --green:var(--blue); --red:#b7354b; --lime:#e7edfc;
  --border:#dce3ef; --shadow:0 8px 30px #1a315e06;
  --sidebar:#fcfdff; --surface:#edf1f8; --selected:#e7edfc;
  --red-soft:#fbe9ee; --accent-ink:#234eaa; --notice:#edf2fd;
  --button:#2859bb; --button-text:#fff; --hero:#1b3260;
  --diagram-bg:#f8faff; --diagram-ink:#304363;
}
:root[data-theme="dark"] {
  --bg:#101725; --paper:#182233; --ink:#e4eaf6; --muted:#a5b3c9;
  --blue:#92b6ff; --red:#ff8da0; --lime:#233959;
  --border:#30405a; --shadow:0 8px 30px #00000014;
  --sidebar:#131c2b; --surface:#1e2c42; --selected:#223a61;
  --red-soft:#3a2637; --accent-ink:#a8c5ff; --notice:#1b2a43;
  --button:#3564c2; --button-text:#fff; --hero:#1e3358;
  --diagram-bg:#142034; --diagram-ink:#adbed7;
}
body { background:var(--bg); color:var(--ink); }
button { background:var(--button); color:var(--button-text); }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:2px solid var(--blue); }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.85; }
.secondary { background:var(--paper); color:var(--ink); border-color:var(--border); }
.danger { background:var(--red-soft); color:var(--red); }
.text-button,.archive-link { background:transparent; color:var(--blue); }
.icon-button { background:transparent; color:var(--muted); }
.sidebar { background:var(--sidebar); }
.sidebar-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sidebar-content { display:flex; flex:1; flex-direction:column; min-height:0; }
.brandmark { background:linear-gradient(140deg,#2d60c3 25%,#bc3c54); color:#fff; }
img.brandmark { display:block; width:40px; height:40px; background:none; border-radius:10px; }
.brand { color:var(--ink); }
.brand small { font-family:'DM Sans',sans-serif; }
.sidebar-bottom { padding-top:24px; }
.sidebar-bottom>a { color:var(--muted); border-radius:7px; }
.sidebar-bottom>a.active { background:var(--selected); color:var(--blue); }
nav a { color:var(--muted); border-left:3px solid transparent; }
nav a:hover,.sidebar-bottom>a:hover { background:var(--surface); }
nav a.active { background:var(--selected); color:var(--accent-ink); border-left-color:var(--red); }
#menu-toggle { display:none; }
.topbar-actions { display:flex; align-items:center; gap:20px; }
#save-status { color:var(--muted); }
#theme-toggle { font-size:11px; min-width:96px; padding:8px 12px; }
.eyebrow { color:var(--red); }
.pill { background:var(--selected); color:var(--accent-ink); }
.pill.orange { background:var(--red-soft); color:var(--red); }
.hero { background:var(--hero); border-top:3px solid var(--red); }
.hero p { color:#d3def4; }
.hero .eyebrow { color:#ffa3b3; }
.hero .secondary { border-color:#6689c0; color:#eef3ff; }
.hero-art { color:#a4bff2; }
.search:before { color:var(--muted); }
.segmented button { color:var(--muted); }
.segmented button.selected { background:var(--selected); color:var(--accent-ink); }
.device-icon { background:var(--selected); color:var(--blue); }
.device-foot { border-color:var(--border); }
.reference-note { background:var(--notice); color:var(--muted); border-left-color:var(--red); }
th { background:var(--surface); color:var(--muted); }
dialog::backdrop { background:#080f20bf; }
.bucket { background:var(--surface); }
.bucket h3 span { color:var(--muted); }
.empty { border-color:var(--border); }
.event-button { background:var(--paper); }
.event-button.selected { background:var(--selected); border-color:var(--blue); box-shadow:inset 3px 0 var(--red); }
.steps { color:var(--muted); }
.diagram { background:var(--diagram-bg); }
.diagram svg rect[fill="white"] { fill:var(--paper); stroke:var(--border); }
.diagram svg text { fill:var(--diagram-ink); }
.diagram svg text[font-weight="bold"] { fill:var(--ink); }
.diagram svg pattern circle { fill:var(--border); }
.danger-zone { border-color:var(--red); }
.saved-note { color:var(--blue); }
footer { color:var(--muted); }
#toast { background:var(--hero); border:1px solid var(--border); max-width:min(550px,90vw); text-align:center; }
.button-link { border:1px solid var(--border); border-radius:8px; padding:10px 16px; text-decoration:none; font-size:12px; white-space:nowrap; }
.archive-settings summary { cursor:pointer; font-size:14px; font-weight:600; }
.archive-link { display:inline-block; padding:8px 0; font-size:12px; font-weight:600; }
.archived-event summary { cursor:pointer; font-family:Manrope,sans-serif; font-weight:700; font-size:16px; }
.archived-event summary small { display:block; font:11px 'DM Sans',sans-serif; color:var(--muted); margin:9px 0 0 17px; }
.archived-content { margin-top:24px; }
.archive-actions { border-top:1px solid var(--border); padding-top:18px; margin-top:18px; }
.archive-actions button { font-size:12px; }
.preserve-lines { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:760px) {
  .sidebar { padding:15px 18px; }
  #menu-toggle { display:block; min-height:40px; }
  .sidebar-content { display:none; }
  .sidebar.nav-open .sidebar-content { display:flex; margin-top:12px; }
  .sidebar .navlabel { display:block; margin:12px 10px; }
  .sidebar nav { display:grid; margin:0; gap:4px; overflow:visible; }
  .sidebar nav a { font-size:13px; padding:12px; }
  .sidebar .sidebar-bottom { display:block; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
  .sidebar-bottom>a { font-size:13px; padding:12px; }
  .topbar { gap:12px; min-height:58px; height:auto; padding:10px 18px; }
  .topbar-title { max-width:100px; line-height:1.6; }
  .topbar-actions { gap:12px; }
  #save-status { max-width:128px; font-size:9px; line-height:1.5; }
  #theme-toggle { min-width:86px; font-size:10px; }
  .archive-actions { align-items:stretch; }
  .archived-event summary { line-height:1.6; }
}
@media print {
  :root[data-theme] { --bg:#fff; --paper:#fff; --ink:#1b263b; --muted:#49566d; --border:#ccd4e2; --diagram-bg:#fff; --diagram-ink:#304363; --selected:#e7edfc; --surface:#edf1f8; --blue:#2859bb; --red:#b7354b; }
  body { color-scheme:light; }
  .topbar-actions,.button-link { display:none; }
}