/* 盒子助手 · BoxADB — 手写样式，无框架 */
:root{
  --bg:#0e1116; --bg-2:#141a22; --panel:#171e28; --panel-2:#1c2530;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#e6edf3; --muted:#8b98a9; --muted-2:#6b7688;
  --accent:#3ddc84; --accent-ink:#04120a; --teal:#2dd4bf; --danger:#ff5c5c; --warn:#ffb454;
  --radius:14px; --radius-sm:10px; --shadow:0 6px 24px rgba(0,0,0,.35);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 600px at 80% -10%,#14202b 0%,var(--bg) 55%) fixed;
  color:var(--text);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  display:flex;flex-direction:column;min-height:100%;
}
code,.mono{font-family:var(--mono);font-size:.9em;background:var(--bg-2);padding:1px 6px;border-radius:6px;color:var(--teal)}
.muted{color:var(--muted)} .hidden{display:none!important}
h2{margin:0 0 4px;font-size:20px} h3{margin:0 0 10px;font-size:15px}

/* 原型提示条 */
.proto-banner{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,rgba(255,180,84,.14),rgba(255,180,84,.04));
  border-bottom:1px solid rgba(255,180,84,.25);color:#ffd9a3;padding:8px 18px;font-size:13px;
}
.proto-banner button{background:none;border:none;color:#ffd9a3;font-size:18px;cursor:pointer;line-height:1}

/* 顶部整体吸顶，滚动时标签导航始终可见 */
.sticky-header{position:sticky;top:0;z-index:30;background:rgba(20,26,34,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:12px 20px;
}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}
.brand-logo{width:28px;height:28px;flex:none;display:block;object-fit:contain}
.brand-name{font-weight:800;font-size:18px;letter-spacing:.5px}
.brand-sub{font-weight:600;color:var(--accent);font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.8}

.conn{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.conn-fields{display:flex;gap:8px}
input,select{
  background:var(--bg-2);border:1px solid var(--line);color:var(--text);
  padding:9px 12px;border-radius:var(--radius-sm);font-size:14px;outline:none;transition:border .15s,box-shadow .15s;
}
input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(61,220,132,.16)}
#device-ip{min-width:230px}
#bridge-url{width:200px;color:var(--muted);font-size:13px}
#bridge-url.adv{}
#bridge-url:focus{color:var(--text)}

/* 分段开关 */
.seg{display:inline-flex;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px}
.seg-btn{border:none;background:none;color:var(--muted);padding:6px 16px;border-radius:8px;cursor:pointer;font-size:14px;transition:.15s}
.seg-btn.active{background:var(--accent);color:var(--accent-ink);font-weight:600}

/* 按钮 */
.btn{
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);
  padding:9px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;transition:.15s;
}
.btn:hover{border-color:var(--accent);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700}
.btn.primary:hover{filter:brightness(1.06);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.action{width:100%;text-align:left;padding:13px 16px;font-size:15px;margin-bottom:8px}
.btn.action.warn{border-color:rgba(255,92,92,.4)}
.btn.action.warn:hover{border-color:var(--danger);color:#ffd7d7}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* 状态药丸 */
.pill{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid var(--line-2);color:var(--muted)}
.pill.off{background:rgba(139,152,169,.12)}
.pill.on{background:rgba(61,220,132,.14);color:var(--accent);border-color:rgba(61,220,132,.4)}
.pill.busy{background:rgba(255,180,84,.14);color:var(--warn);border-color:rgba(255,180,84,.4)}

/* 标签 */
.tabs-wrap{position:relative;display:flex;align-items:center;max-width:1100px;margin:0 auto}
.tabs{display:flex;gap:4px;padding:0 20px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;background:rgba(20,26,34,.35);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.tabs::-webkit-scrollbar{display:none}
.tabs-arrow{position:absolute;top:0;bottom:0;width:44px;display:grid;place-items:center;border:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--accent);z-index:2;opacity:0;pointer-events:none;transition:opacity .15s}
.tabs-arrow.show{opacity:1;pointer-events:auto}
.tabs-arrow.left{left:0;background:linear-gradient(90deg,rgba(20,26,34,.99),rgba(20,26,34,0))}
.tabs-arrow.right{right:0;background:linear-gradient(270deg,rgba(20,26,34,.99),rgba(20,26,34,0))}
.tabs-arrow:hover{color:#fff}
.tab{border:none;background:none;color:var(--muted);padding:14px 16px;cursor:pointer;font-size:15px;
  border-bottom:2px solid transparent;white-space:nowrap;transition:.15s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.tab-ic{width:16px;height:16px;vertical-align:-3px;margin-right:5px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 内容 */
.content{flex:1;padding:26px 22px 40px;max-width:1100px;width:100%;margin:0 auto}
.panel-head{margin-bottom:20px}
.panel-head p{margin:6px 0 0;max-width:70ch}

/* 安装：拖放区 */
.dropzone{
  border:2px dashed var(--line-2);border-radius:var(--radius);padding:44px 20px;text-align:center;
  background:var(--panel);transition:.18s;cursor:pointer;
}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:rgba(61,220,132,.05)}
.dz-icon{width:44px;height:44px;stroke:var(--accent);stroke-width:1.6;fill:none;margin-bottom:8px}
.dz-title{font-size:17px;font-weight:600;margin:6px 0}
.queue{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.queue-bar{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.queue-bar .spacer{flex:1}
.queue-bar .btn:disabled{opacity:.45}
.q-item{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.q-ic{width:40px;height:40px;border-radius:9px;display:grid;place-items:center;background:var(--bg-2);font-size:20px;flex:none}
.q-main{flex:1;min-width:0}
.q-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-meta{font-size:12px;color:var(--muted)}
.q-bar{height:6px;background:var(--bg-2);border-radius:99px;margin-top:7px;overflow:hidden}
.q-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--teal));transition:width .3s}
.badge{font-size:11px;padding:3px 8px;border-radius:99px;font-weight:600;flex:none}
.badge.detect{background:rgba(255,180,84,.15);color:var(--warn)}
.badge.ok{background:rgba(61,220,132,.15);color:var(--accent)}
.badge.err{background:rgba(255,92,92,.15);color:var(--danger)}
.q-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px}

/* 应用管理 */
.apps-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.search{flex:1;min-width:180px}
.switch{display:inline-flex;align-items:center;gap:8px;color:var(--muted);cursor:pointer;user-select:none}
.switch input{width:16px;height:16px;accent-color:var(--accent)}
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.app-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;display:flex;gap:12px;align-items:flex-start}
.app-ic{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#243040,#1a2330);display:grid;place-items:center;font-size:20px;flex:none;color:var(--muted);overflow:hidden}
.app-ic.has-img{background:transparent;padding:0}
.app-ic-img{width:100%;height:100%;object-fit:contain;padding:2px;box-sizing:border-box;display:block;border-radius:10px}
.app-info{min-width:0;flex:1}
.app-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-pkg{font-size:12px;color:var(--muted);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-acts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.mini{font-size:12.5px;padding:7px 8px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);color:var(--text);cursor:pointer;text-align:center}
.mini:hover{border-color:var(--accent)}
.mini.danger{background:rgba(255,92,92,.16);border-color:rgba(255,92,92,.45);color:#ffb3b3;font-weight:600}
.mini.danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
.mini.warn{background:rgba(255,180,84,.14);border-color:rgba(255,180,84,.45);color:#ffd9a3;font-weight:600}
.mini.warn:hover{background:var(--warn);color:#241505;border-color:var(--warn)}
.mini.ok{background:rgba(61,220,132,.14);border-color:rgba(61,220,132,.45);color:#9ff0c4;font-weight:600}
.mini.ok:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.app-card.off{opacity:.62}
.tag-off{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:600;vertical-align:1px;background:rgba(255,180,84,.15);border:1px solid rgba(255,180,84,.4);color:#ffd9a3}
.empty{display:grid;place-items:center;padding:56px 20px;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--radius)}

/* 遥控器 */
.remote-wrap{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
.remote{background:linear-gradient(180deg,#1b2531,#141b24);border:1px solid var(--line);border-radius:26px;padding:24px;max-width:300px;margin:0 auto;box-shadow:var(--shadow)}
.remote-top{display:flex;justify-content:space-between;margin-bottom:18px}
.vol-row{display:flex;justify-content:center;gap:14px;margin-bottom:18px}
.rkey{width:52px;height:52px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);font-size:16px;cursor:pointer;transition:.12s;display:grid;place-items:center}
.rkey:hover{border-color:var(--accent);color:#fff}
.rkey:active,.rkey.flash{background:var(--accent);color:var(--accent-ink);transform:scale(.94)}
.rkey.power{background:rgba(255,92,92,.16);border-color:rgba(255,92,92,.4);color:#ffb3b3}
.rkey.wide{width:auto;padding:0 14px;border-radius:12px;height:46px;font-size:14px;flex:1}
.nav-row,.media-row{display:flex;gap:10px;margin-top:14px}
.nav-row.center,.media-row.center{justify-content:center}
.dpad{position:relative;width:170px;height:170px;margin:0 auto;display:grid;
  grid-template-areas:". up ." "left ok right" ". down .";grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}
.dp{background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);cursor:pointer;font-size:16px;transition:.12s}
.dp:hover{border-color:var(--accent);color:#fff}
.dp:active,.dp.flash{background:var(--accent);color:var(--accent-ink)}
.dp.up{grid-area:up;border-radius:14px 14px 0 0}.dp.down{grid-area:down;border-radius:0 0 14px 14px}
.dp.left{grid-area:left;border-radius:14px 0 0 14px}.dp.right{grid-area:right;border-radius:0 14px 14px 0}
.dp.ok{grid-area:ok;border-radius:50%;font-weight:800;border:2px solid var(--accent);color:var(--accent)}
.device-actions{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}

/* 终端 */
.terminal{background:#080b0f;border:1px solid var(--line-2);border-radius:var(--radius);padding:10px;font-family:var(--mono)}
#term{display:block;height:440px;min-height:440px}
#term .xterm{height:100%}
#term-out{margin:0;white-space:pre-wrap;word-break:break-word;color:#c9f7d8;flex:1;overflow:auto}
.term-input-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.term-input-row .prompt{color:var(--accent)}
#term-in{flex:1;background:transparent;border:none;font-family:var(--mono);color:#eafff1}
#term-in:focus{box-shadow:none;border:none}

/* 日志 */
.log-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.log-body{background:#080b0f;border:1px solid var(--line-2);border-radius:var(--radius);min-height:320px}
#log-out{margin:0;padding:14px;font-family:var(--mono);font-size:12.5px;color:#c7d3e0;white-space:pre-wrap;word-break:break-word;overflow:auto}

/* 设备 */
.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:22px}
.info-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px}
.info-item .k{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.info-item .v{font-weight:600;font-family:var(--mono);font-size:14px;word-break:break-all}
.info-item .v.small{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:4px}
.info-item.wide{grid-column:1/-1}
.storage-bar{height:8px;background:var(--bg-2);border-radius:99px;overflow:hidden;margin:8px 0 2px}
.storage-bar>i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}

/* 页脚 */
.foot{border-top:1px solid var(--line);padding:16px 22px;color:var(--muted-2);font-size:13px;display:flex;gap:8px;align-items:center;justify-content:center}
.foot .dot{opacity:.5}
.foot-link{color:var(--muted-2);text-decoration:none;transition:color .15s}
.foot-link:hover{color:var(--accent)}

/* 顶栏社交图标（B站） */
.social-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--muted-2);
  padding:5px;border-radius:8px;margin-left:6px;transition:color .15s,background .15s}
.social-icon:hover{color:var(--accent);background:rgba(255,255,255,.06)}

/* Toast */
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:50}
.toast{background:var(--panel-2);border:1px solid var(--line-2);border-left:3px solid var(--accent);
  padding:12px 16px;border-radius:10px;box-shadow:var(--shadow);font-size:14px;min-width:220px;
  animation:slide .25s ease}
.toast.err{border-left-color:var(--danger)} .toast.warn{border-left-color:var(--warn)}
@keyframes slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}

/* 响应式 */
@media(max-width:820px){
  .remote-wrap{grid-template-columns:1fr}
  #device-ip{min-width:0;flex:1}.conn{width:100%}
  .topbar{flex-direction:column;align-items:stretch}
}