/* Shared by both consoles. One screen, no page scrolling: the shell is a
   fixed column and only the data areas inside a tab ever scroll. */
:root {
  --ink:#1c1c1a; --dim:#6b6b66; --faint:#9a9a94;
  --paper:#fbfbf9; --line:#e6e4de; --accent:#0a6b4f; --warn:#b3261e;
}
* { box-sizing:border-box; }
html, body { height:100%; margin:0; }
body {
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  display:flex; flex-direction:column; overflow:hidden;
  font-size:13px; line-height:1.5;
}

header { display:flex; align-items:center; gap:14px; padding:14px 24px 0; flex:none; }
header h1 { margin:0; font-size:15px; font-weight:600; letter-spacing:.14em; }
header .where { color:var(--faint); font-size:12px; letter-spacing:.08em; }
header small { color:var(--faint); font-variant-numeric:tabular-nums; }
.grow { flex:1; }

nav { display:flex; gap:22px; padding:10px 24px 0; flex:none;
      border-bottom:1px solid var(--line); }
nav a { padding:6px 1px 9px; color:var(--dim); text-decoration:none;
        border-bottom:2px solid transparent; cursor:pointer; }
nav a.on { color:var(--ink); border-bottom-color:var(--ink); }

main { flex:1; overflow:hidden; padding:18px 24px 20px; }
.tab { display:none; height:100%; flex-direction:column; gap:12px; }
.tab.on { display:flex; }
.scroll { overflow:auto; flex:1; min-height:0; }

table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:7px 12px 7px 0; vertical-align:middle; }
th { font-weight:500; color:var(--faint); font-size:11px; letter-spacing:.06em;
     text-transform:uppercase; position:sticky; top:0; background:var(--paper);
     border-bottom:1px solid var(--line); }
tbody tr { border-bottom:1px solid var(--line); }
.on-c { color:var(--accent); }
.warnc { color:var(--warn); }
.off { color:var(--faint); }
.thumb { height:34px; border:1px solid var(--line); background:#fff; vertical-align:middle; }

button { font:inherit; padding:6px 13px; border:1px solid var(--line);
         background:#fff; color:var(--ink); cursor:pointer; border-radius:2px; }
button:hover { border-color:var(--dim); }
button.primary { background:var(--ink); border-color:var(--ink); color:#fff; }
button.danger  { background:var(--warn); border-color:var(--warn); color:#fff; }
button.link, a.link { border:0; background:none; color:var(--dim);
                      text-decoration:underline; padding:2px 4px; cursor:pointer;
                      font:inherit; }
.mini { padding:1px 7px; font-size:11px; }

input, select, textarea {
  font:inherit; padding:5px 8px; border:1px solid var(--line);
  border-radius:2px; background:#fff; color:var(--ink);
}
label { color:var(--dim); display:inline-flex; align-items:center; gap:6px; }
.row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; flex:none; }
.hint { color:var(--faint); font-size:12px; }
.msg { font-size:12px; }

.lib { display:flex; flex-wrap:wrap; gap:8px; align-content:flex-start; }
.lib .card { border:1px solid var(--line); background:#fff; padding:5px; width:104px;
             cursor:pointer; text-align:center; font-size:11px; color:var(--dim); }
.lib .card img { width:100%; height:62px; object-fit:contain; }
.lib .card.sel { border-color:var(--ink); color:var(--ink); }

#emBanner { background:var(--warn); color:#fff; padding:9px 24px; flex:none;
            display:none; justify-content:space-between; align-items:center; }
#emBanner button { background:transparent; border-color:#fff; color:#fff; }

.overlay { position:fixed; inset:0; background:rgba(28,28,26,.6); display:none;
           align-items:center; justify-content:center; z-index:50; padding:20px; }
.overlay.on { display:flex; }
.panel { background:var(--paper); padding:20px; border-radius:3px;
         max-width:min(92vw,560px); width:100%; display:flex;
         flex-direction:column; gap:12px; }
.panel.wide { max-width:92vw; width:auto; text-align:center; }
.panel h3 { margin:0; font-size:14px; font-weight:600; }
#simCanvas { max-width:86vw; max-height:64vh; border:1px solid var(--line); background:#fff; }
textarea { width:100%; resize:vertical; }