.app-shell{width:min(calc(100% - 32px),1440px);margin:0 auto;padding:32px 18px 60px}.app-back{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:.78rem;font-weight:800;margin:8px 0 28px}.app-back:hover{color:var(--accent)}
.app-hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px;padding:24px 0 44px;border-bottom:1px solid var(--line)}.app-hero h1{font-size:clamp(4rem,8vw,8rem);line-height:.82;letter-spacing:-.075em;margin:20px 0}.app-hero h1 span{color:var(--accent)}.app-hero p{max-width:720px;color:var(--muted);font-size:1.08rem;line-height:1.6}.app-stat{min-width:220px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--panel-soft);box-shadow:var(--shadow)}.app-stat small{display:block;color:var(--muted);font:800 .68rem ui-monospace,monospace}.app-stat strong{display:block;font-size:3.3rem;letter-spacing:-.06em;color:var(--accent);margin:5px 0}.app-stat span{font-size:.78rem;color:var(--muted)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 0}.toolbar-label{font:800 .68rem ui-monospace,monospace;color:var(--muted);letter-spacing:.08em}.toolbar-actions{display:flex;gap:8px;flex-wrap:wrap}.toolbar button,.switch-remove{border:1px solid var(--line);background:var(--ink);color:var(--paper);border-radius:12px;padding:11px 13px;font-weight:800;cursor:pointer}.toolbar button:hover{transform:translateY(-1px)}.toolbar button.secondary{background:var(--panel);color:var(--ink)}
.switch-list{display:grid;gap:14px}.empty-state{padding:70px 20px;text-align:center;border:1px dashed var(--line);border-radius:24px;background:var(--panel-soft);color:var(--muted)}.empty-state i{font-size:2.2rem;color:var(--accent)}.empty-state h2{color:var(--ink);font-size:2rem;letter-spacing:-.04em;margin:15px 0 5px}.switch-card{padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--panel-soft);box-shadow:0 8px 30px rgba(0,0,0,.04)}.switch-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.switch-head h2{margin:0;font-size:1.25rem;letter-spacing:-.03em}.switch-total{margin-left:auto;font:800 .78rem ui-monospace,monospace;color:var(--accent)}.switch-remove{background:transparent;color:var(--muted);padding:8px 10px}.switch-remove:hover{color:#d33;border-color:#d33}.ports{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}.port{min-width:0}.port-face{height:28px;border:2px solid var(--line);border-radius:5px;background:var(--paper-2);position:relative}.port-face:after{content:"";position:absolute;left:22%;right:22%;bottom:4px;height:4px;border-top:2px solid var(--line);border-bottom:2px solid var(--line)}.port select{width:100%;margin-top:5px;padding:6px 2px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);font-size:.62rem}.port[data-power="af"] .port-face{border-color:#65a7ff;background:color-mix(in srgb,#65a7ff 16%,var(--panel))}.port[data-power="at"] .port-face{border-color:#e8a428;background:color-mix(in srgb,#e8a428 16%,var(--panel))}.port[data-power="bt"] .port-face{border-color:#d35a8b;background:color-mix(in srgb,#d35a8b 16%,var(--panel))}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;padding:15px 0;color:var(--muted);font:750 .67rem ui-monospace,monospace}.power-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:var(--line)}.power-dot.af{background:#65a7ff}.power-dot.at{background:#e8a428}.power-dot.bt{background:#d35a8b}
@media(max-width:1000px){.ports{grid-template-columns:repeat(8,1fr)}}@media(max-width:700px){.app-hero{grid-template-columns:1fr}.app-stat{width:100%}.toolbar{align-items:flex-start;flex-direction:column}.ports{grid-template-columns:repeat(4,1fr)}}