/* Dragonfly Circuit: shared presentation layer. Ticket behavior remains in index.html. */
:root{color-scheme:light;--ink:#202841;--muted:#586880;--line:#dce3ee;--panel:#fff;--page:#f2f5fa;--teal:#087f87;--teal-bg:#e5f6f5;--red:#a73546;--red-bg:#fff0f2;--amber:#81541a;--amber-bg:#fff3dd;--purple:#7960a5;--surface2:#edf2f8;--button-text:#fff;--shadow:0 8px 30px #182b4812}
:root[data-circuit-theme=dark]{color-scheme:dark;--ink:#edf2ff;--muted:#abb9d0;--line:#2b3a56;--panel:#151e33;--page:#0e1425;--teal:#70d9da;--teal-bg:#173b3c;--red:#ffb4c0;--red-bg:#48283e;--amber:#f0ca8a;--amber-bg:#403326;--purple:#b9a1e4;--surface2:#1d2b44;--button-text:#10212c;--shadow:0 16px 50px #0005}
body{line-height:1.5;background:var(--page)}
button,input,select,textarea{color:var(--ink);background:var(--panel)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
button{border-color:var(--line);border-radius:7px;min-height:36px}button.primary,.auth-btn{background:var(--teal);border-color:var(--teal);color:var(--button-text)}
#auth-screen{background:var(--page)}.auth-card{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:2px solid var(--purple);border-radius:8px;box-shadow:var(--shadow)}.auth-logo{background:#fff}.auth-subtitle,.auth-note{color:var(--muted)}
header{height:auto;min-height:70px;padding:12px 28px;background:var(--panel);color:var(--ink);border-top:2px solid var(--purple);border-bottom:1px solid var(--line);box-shadow:none}.header-title,.header-divider,.user-pill,.sign-out-btn{color:var(--muted)}.user-pill{background:var(--surface2)}.user-avatar{background:var(--teal);color:var(--button-text)}.sign-out-btn{border-color:var(--line)}.plan-badge{color:var(--purple);border-color:var(--purple);background:transparent;border-radius:4px}
.appearance-control{display:grid;place-items:center;width:34px;height:34px;min-height:34px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface2);color:var(--muted);flex:none}.appearance-control span{display:flex;pointer-events:none}
.circuit-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 16px;padding:24px 26px 20px;background:linear-gradient(120deg,var(--panel),transparent);border:1px solid var(--line);border-top:2px solid var(--purple);border-radius:6px}.circuit-intro span{color:var(--purple);font-size:11px;letter-spacing:1.2px;font-weight:700}.circuit-intro h1{font-size:27px;line-height:1.2;letter-spacing:-.6px;margin:6px 0}.circuit-intro p{margin:0;color:var(--muted);font-size:13px}.circuit-intro svg{width:210px;height:70px;color:var(--teal);opacity:.18;flex:none}
main{padding:20px 28px;grid-template-columns:minmax(0,1fr) minmax(280px,330px);gap:18px}main>section{min-width:0;overflow-x:auto}.toolbar{padding:12px 14px;margin-bottom:12px;background:var(--panel);border:1px solid var(--line);border-radius:6px}.toolbar input,.toolbar select,textarea,dialog input,dialog select,dialog textarea{background:var(--surface2);color:var(--ink);border-color:var(--line)}
table,aside,dialog,.msg{background:var(--panel);border-color:var(--line);border-radius:6px;box-shadow:0 3px 14px #182b4808}table{min-width:940px}th{background:var(--surface2);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em}th:nth-child(2),td:nth-child(2){min-width:190px}th:nth-child(3),td:nth-child(3){min-width:190px}th:last-child,td:last-child{min-width:170px}td{padding-block:12px}tr.row:hover,tr.row.selected{background:var(--surface2)}aside{border-top:2px solid var(--purple)}.pill{border-radius:4px}.msg.out{background:var(--teal-bg);border-color:var(--teal)}#toast{background:var(--ink);color:var(--page)}
@media(max-width:960px){header{padding-inline:16px}.circuit-intro{padding:18px}.circuit-intro svg{display:none}main{padding:16px;grid-template-columns:1fr}.header-right{gap:8px}}
@media(max-width:600px){.header-title,.header-divider,.user-pill span{display:none}.header-mark img{max-width:58px}.auth-card{padding:24px 18px}.toolbar>*{flex:1 1 140px}.toolbar .grow{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.auth-card>.appearance-control{margin:0 0 16px auto}