/* 熱點視覺版型：深色底、紅色主色、細格線背景 */
:root{--red:#CC0000;--red-bright:#E8000A;--red-dark:#990000;--dark:#0D0D0D;--dark2:#141414;--dark3:#1A1A1A;--dark4:#202020;
  --white:#fff;--grey:#AAAAAA;--grey2:#666;--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.16);
  --ok:#2fb36d;--warn:#f5a623;--blue:#3d8bfd}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:var(--dark);color:var(--white);font-family:'Noto Sans TC','Microsoft JhengHei',sans-serif;font-size:15px;line-height:1.55}
body{min-height:100vh;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:40px 40px}
button,input,select,textarea{font:inherit;color:inherit}
a{color:#ff6b6b}
.hdr{position:sticky;top:0;z-index:20;background:rgba(13,13,13,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:10px 16px;display:flex;align-items:center;gap:10px}
.logo{width:38px;height:38px;flex:none;background:url('/img/logo-192.png') center/contain no-repeat}
.hdr h1{font-size:16px;font-weight:700;letter-spacing:1px;line-height:1.2}
.hdr h1 span{display:block;font-weight:500;font-size:10px;letter-spacing:3px;color:var(--grey)}
.hdr .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.st{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;letter-spacing:1px;padding:6px 10px;border:1px solid var(--border2)}
.st i{width:8px;height:8px;border-radius:50%;background:var(--grey2)}
.st.live{background:var(--red);border-color:var(--red)} .st.live i{background:#fff;animation:bl 1.2s infinite}
.st.ok i{background:var(--ok)} .st.warn i{background:var(--warn)}
@keyframes bl{50%{opacity:.3}}
.wrap{max-width:1180px;margin:0 auto;padding:16px}
.narrow{max-width:560px;margin:0 auto;padding:16px}
.card{background:var(--dark3);border:1px solid var(--border);padding:14px;margin-bottom:12px}
.card.accent{border-left:4px solid var(--red)}
.h2{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;margin:4px 0 10px}
.h2::before{content:'';width:18px;height:3px;background:var(--red);flex:none}
.h2 small{margin-left:auto;font-weight:400;font-size:12px;color:var(--grey)}
.muted{color:var(--grey);font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;background:var(--dark4);border:1px solid var(--border2);font-weight:700;cursor:pointer;text-decoration:none;color:#fff}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--red);border-color:var(--red)}
.btn.ok{background:#1d6b44;border-color:#2fb36d}
.btn.ghost{background:transparent}
.btn.sm{min-height:32px;padding:4px 10px;font-size:13px}
.btn.big{min-height:56px;font-size:18px;width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1}
label{display:block;font-size:13px;color:var(--grey);margin:10px 0 4px}
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=date],select,textarea{width:100%;background:var(--dark2);border:1px solid var(--border2);padding:10px;color:#fff;border-radius:0}
textarea{min-height:70px}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px;background:var(--dark2);border:1px solid var(--border);margin-top:8px;cursor:pointer}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--red);flex:none}
.check b{display:block;font-size:14px}
.check span{font-size:12px;color:var(--grey)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:5px 12px;border:1px solid var(--border2);font-size:13px;color:#ddd;cursor:pointer;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);background:transparent}
.chip.on{background:var(--red);border-color:var(--red);color:#fff}
.tag{display:inline-block;font-size:12px;padding:1px 8px;border:1px solid var(--border2);color:#ddd;margin:2px 4px 2px 0}
.tag.red{border-color:var(--red);color:#ff8080}
.tag.ok{border-color:var(--ok);color:#7be0a8}
.tag.warn{border-color:var(--warn);color:#ffd27a}
.list>div{padding:10px 0;border-bottom:1px solid var(--border)}
.list>div:last-child{border-bottom:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#222;border:1px solid var(--red);padding:10px 16px;z-index:999;box-shadow:0 8px 30px #000a;max-width:90vw}
.qrbox{background:#fff;padding:10px;display:inline-block;line-height:0}
.qrbox img,.qrbox canvas{display:block}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--grey);font-weight:500;font-size:12px}
tr.click{cursor:pointer} tr.click:hover{background:var(--dark4)}
.meter{height:6px;background:rgba(255,255,255,.08);position:relative;margin-top:6px}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--ok);transition:width .1s}
.hidden{display:none!important}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border2);margin-bottom:12px;flex-wrap:wrap}
.tabs button{background:none;border:0;padding:10px 14px;color:var(--grey);cursor:pointer;border-bottom:3px solid transparent;font-weight:700}
.tabs button.on{color:#fff;border-bottom-color:var(--red)}
/* 回首頁鍵：控制台與後台放在標題列；大螢幕顯示端平時隱藏，移動滑鼠才出現 */
.homebtn{flex:none}
.homebtn.float{position:fixed;left:12px;top:12px;z-index:40;opacity:0;pointer-events:none;transition:opacity .3s}
.homebtn.float.show{opacity:.9;pointer-events:auto}