:root{font-family:Inter,"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;color:#dce8f1;background:#07131d;font-synthesis:none;--bg:#07131d;--panel:#0b1d29;--panel2:#0d2432;--line:#27414f;--cyan:#4bd8cf;--cyan2:#78eee5;--muted:#8fa8b7;--red:#ff7777;--amber:#e8bd66}
html,body,#app{margin:0;width:100%;height:100%;min-width:320px;background:var(--bg)}*{box-sizing:border-box}button,input{font:inherit}.activator-main{height:100%;padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}.tool-intro{flex:0 0 auto;min-height:46px;padding:4px 6px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.tool-intro h1{font-size:17px;margin:0 0 3px}.tool-intro p{font-size:12px;color:var(--muted);margin:0}.network-status{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.network-status span{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.network-status.offline span{background:var(--red);box-shadow:0 0 10px var(--red)}
.workflow{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.step-card{min-width:0;padding:14px;background:linear-gradient(145deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 6px 16px rgba(0,0,0,.12);overflow:auto}.step-card[data-state=success]{border-color:#347c7c}.step-card[data-state=error]{border-color:#7b4141}.step-card[data-state=working]{border-color:#78673e}.step-head{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:start;margin-bottom:12px}.step-number{font:700 11px ui-monospace,monospace;color:var(--cyan);border:1px solid #2d6869;border-radius:999px;padding:4px 6px}.step-head h2{font-size:14px;margin:2px 0 4px}.step-head p{font-size:11px;color:var(--muted);margin:0}.state-dot{width:8px;height:8px;margin-top:6px;border-radius:50%;background:#49606c}.step-card[data-state=success] .state-dot{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.step-card[data-state=error] .state-dot{background:var(--red)}.step-card[data-state=working] .state-dot{background:var(--amber);animation:pulse 1.2s infinite}
.drop-zone{min-height:150px;padding:10px;border:1px dashed #385564;border-radius:8px;background:#071720;display:flex;align-items:center;justify-content:center;cursor:pointer}.drop-zone:hover{border-color:var(--cyan);background:#0a2029}.drop-zone input{position:absolute;opacity:0;pointer-events:none}.upload-prompt{display:flex;flex-direction:column;align-items:center;gap:5px}.upload-icon{font-size:25px;color:var(--cyan)}.drop-zone strong{font-size:13px}.drop-zone small{font-size:11px;color:var(--muted)}.drop-zone.has-preview .upload-prompt{display:none}.qr-preview{display:block;max-width:100%;width:180px;max-height:180px;object-fit:contain;border-radius:6px;background:#fff}.button{border:1px solid var(--line);border-radius:6px;padding:8px 11px;font-weight:700;cursor:pointer}.button:disabled{opacity:.38;cursor:not-allowed}.primary,.action{background:var(--cyan);border-color:var(--cyan);color:#042322}.ghost{background:#102532;color:#c7d9e3;margin-left:5px}.action{width:100%;margin-top:14px}.result-line{margin-top:10px;min-height:18px;font-size:11px;color:var(--muted);overflow-wrap:anywhere}.step-card[data-state=success] .result-line{color:var(--cyan2)}.step-card[data-state=error] .result-line{color:var(--red)}.device-grid{display:grid;gap:7px;margin-top:10px}.device-grid span{font-size:11px;color:var(--muted);background:#071720;padding:9px;border-radius:6px}.device-grid strong{display:block;color:#e5eef4;margin-top:4px;font:600 11px ui-monospace,monospace;overflow-wrap:anywhere}.check-list{display:grid;gap:9px;font-size:12px;color:var(--muted)}.activation-result{margin-top:12px;padding:11px;display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;background:#071720}.result-icon{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:50%;color:var(--cyan);border:1px solid #2d6869}.activation-result strong{font-size:12px}.activation-result p{font-size:11px;color:var(--muted);margin:3px 0 0}.hidden{display:none!important}.spinner{animation:spin 1s linear infinite}@keyframes pulse{50%{opacity:.3}}@keyframes spin{to{transform:rotate(360deg)}}
html[data-theme=light]{color:#27313a;background:#f7f8fa;--bg:#f7f8fa;--panel:#fff;--panel2:#fbfcfd;--line:#d8e0e6;--cyan:#20bdb2;--cyan2:#087d76;--muted:#687783;--red:#d95353;--amber:#b78627}html[data-theme=light] .step-card{box-shadow:inset 0 1px 0 #fff,0 6px 16px rgba(35,50,65,.07)}html[data-theme=light] .drop-zone,html[data-theme=light] .device-grid span,html[data-theme=light] .activation-result{background:#f4f7f9}html[data-theme=light] .ghost{background:#f4f7f9;color:#4b5964}
@media(max-width:900px){.workflow{grid-template-columns:1fr}.activator-main{height:auto;min-height:100%;overflow:visible}.step-card{overflow:visible}.drop-zone{min-height:120px}.qr-preview{width:150px;max-height:150px}}

/* V2.5.21 - mobile activation now uses the same viewport-owned layout model as
   the serial tool. The iframe stays inside the visible tool viewport and the
   activation app is the scroller; it no longer grows the outer page to its
   document height. */
@media(max-width:620px){
  html,body,#app{width:100%;min-width:0;height:100%;min-height:0;overflow:hidden}
  .activator-main{width:100%;height:100%;min-height:0;padding:8px;gap:8px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .tool-intro{min-height:0;padding:6px 4px 10px;align-items:flex-start;gap:8px}
  .tool-intro h1{font-size:16px}.tool-intro p,.network-status{font-size:11px}
  .workflow{display:grid;grid-template-columns:1fr;gap:10px;flex:0 0 auto;min-height:0}
  .step-card{padding:12px;border-radius:12px;overflow:visible}
  .step-head{margin-bottom:10px}.step-head h2{font-size:14px}.step-head p{font-size:11px}
  .drop-zone{min-height:118px}.qr-preview{width:140px;max-height:140px}
  .button{min-height:38px;padding:8px 10px}
  .action{margin-top:11px}.device-grid span{padding:8px}.activation-result{padding:10px}
}