/* Devinert Pro 授權網頁：跟 app 同一套「石墨收斂」配色（docs/ui-brief.md 第三節） */
:root {
  --bar: #CDD3D8; --side: #E3E7EA; --group: #F8F9FA; --group-head: #E0E6EB; --well: #D7DDE1;
  --text: #24303A; --dim: #44525E; --fn: #2A5A80; --accent: #B15525; --on-accent: #FFFFFF; --line: #7E8B96;
  --hair: rgba(36, 48, 58, .14); --ok: #28577D; --warn: #795412; --bad: #993A2D;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mono: ui-monospace, Menlo, "SF Mono", Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bar: #141A21; --side: #212A33; --group: #2E3942; --group-head: #37434E; --well: #171C22;
    --text: #F0F2F4; --dim: #9AA6B3; --fn: #8FB8DC; --accent: #D99059; --on-accent: #141A21; --line: #4B5967;
    --hair: rgba(240, 242, 244, .10); --ok: #A7CBE8; --warn: #EBCB7D; --bad: #F5A79B;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--side); color: var(--text); font: 14px/1.55 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--fn); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.dim { color: var(--dim); }
.small { font-size: 12.5px; }
.num { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

/* 頂列 */
.top { background: var(--bar); border-bottom: 1px solid var(--hair); padding: 0 16px; }
.top-in { max-width: 1120px; margin: 0 auto; height: 52px; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: .01em; }
.brand img { width: 26px; height: 26px; border-radius: 6px; }
.brand-sub { color: var(--dim); font-weight: 400; padding-left: 10px; border-left: 1px solid var(--hair); }
.top-sp { flex: 1; }

main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 16px 48px; }
main.narrow { max-width: 640px; }
h1 { font-size: 22px; line-height: 1.3; margin: 0 0 6px; text-wrap: balance; font-weight: 650; }
h2 { font-size: 13px; letter-spacing: .04em; color: var(--dim); font-weight: 600; margin: 0 0 10px; }
p { margin: 0 0 12px; }
.lead { color: var(--dim); margin-bottom: 22px; max-width: 60ch; }

/* 面板 */
.panel { background: var(--group); border: 1px solid var(--hair); border-radius: 10px; padding: 18px; }
.panel + .panel { margin-top: 16px; }
.stack { display: grid; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row-end { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* 控件（跟 app 一樣：細框鈕高 32、圓角 6；主動作實心橘） */
button, .btn { font: inherit; font-size: 13.5px; height: 32px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; transition: background-color 100ms var(--ease), border-color 100ms var(--ease), color 100ms var(--ease); white-space: nowrap; }
button:hover { background: var(--group-head); }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--fn); outline-offset: 1px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.06); background: var(--accent); }
button.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
button.danger.armed { background: var(--bad); color: var(--side); border-color: var(--bad); }
button.ghost { border-color: transparent; color: var(--dim); }
button.ghost:hover { color: var(--text); }
button.small { height: 28px; padding: 0 10px; font-size: 12.5px; }
button:disabled { opacity: .45; cursor: default; filter: none; }
input, textarea, select { font: inherit; color: var(--text); background: var(--well); border: 1px solid var(--hair); border-radius: 6px; padding: 7px 10px; width: 100%; }
textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; word-break: break-all; }
label.field { display: grid; gap: 6px; font-size: 12.5px; color: var(--dim); }
.msg { font-size: 13px; padding: 9px 12px; border-radius: 6px; background: var(--well); }
.msg.bad { color: var(--bad); }
.msg.ok { color: var(--ok); }

/* 授權摘要 */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.kv dt { color: var(--dim); }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; line-height: 1.5; }
.badge.ok { color: var(--ok); } .badge.bad { color: var(--bad); } .badge.warn { color: var(--warn); }

/* 機器清單 */
.machines { list-style: none; margin: 0; padding: 0; }
.machine { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--hair); }
.machine:first-child { border-top: 0; }
.machine-icon { width: 34px; height: 34px; flex: none; border-radius: 8px; background: var(--well); display: grid; place-items: center; color: var(--dim); }
.machine-main { flex: 1; min-width: 0; }
.machine-name { font-weight: 600; overflow-wrap: anywhere; }
.machine-meta { color: var(--dim); font-size: 12.5px; }
.slots { display: flex; gap: 4px; }
.slot { width: 22px; height: 6px; border-radius: 3px; background: var(--well); border: 1px solid var(--hair); }
.slot.on { background: var(--fn); border-color: var(--fn); }

/* 後台 */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--group); border: 1px solid var(--hair); border-radius: 10px; padding: 12px 14px; }
.stat b { display: block; font-size: 22px; font-weight: 650; font-variant-numeric: tabular-nums; }
.stat span { color: var(--dim); font-size: 12.5px; }
.tabs { display: inline-flex; background: var(--well); border-radius: 7px; padding: 2px; gap: 2px; }
.tabs button { border: 0; height: 28px; border-radius: 5px; color: var(--dim); }
.tabs button[aria-selected="true"] { background: var(--group); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input[type="search"] { flex: 1; min-width: 180px; width: auto; }
.table-wrap { overflow-x: auto; background: var(--group); border: 1px solid var(--hair); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
th { color: var(--dim); font-weight: 600; font-size: 12px; background: var(--group-head); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: color-mix(in srgb, var(--group-head) 60%, transparent); }
tbody tr.sel td { background: color-mix(in srgb, var(--fn) 14%, transparent); }
td.wrap { white-space: normal; min-width: 160px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.detail { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.detail h3 { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.section { border-top: 1px solid var(--hair); padding-top: 14px; margin-top: 14px; }
.events { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.events li { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hair); }
.events li:first-child { border-top: 0; }
.empty { color: var(--dim); text-align: center; padding: 28px 12px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.stepper input { width: 64px; text-align: center; }

.login { max-width: 360px; margin: 10vh auto 0; }
footer { color: var(--dim); font-size: 12px; text-align: center; padding: 18px 16px 28px; }

@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .detail { position: static; max-height: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .brand-sub { display: none; }
  .machine { flex-wrap: wrap; }
  .machine .row-end { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.m0 { margin: 0; }
.h-sm { font-size: 18px; }
.mw-720 { max-width: 720px; }
.note-input { min-height: 56px; font-family: var(--font); font-size: 13px; }
details summary { cursor: pointer; padding: 6px 0; }
#result { margin-top: 16px; }
.detail > .row:first-child { margin-bottom: 10px; }