:root{
  --bg:#0f172a; --panel:#1e293b; --line:#334155; --txt:#e2e8f0; --muted:#94a3b8;
  --brand:#2563eb; --brand2:#3b82f6; --ok:#10b981; --warn:#f59e0b; --err:#ef4444;
  --box:#22d3ee; --boxsel:#f59e0b;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--bg);color:var(--txt);font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;font-size:14px;}
.hidden{display:none !important;}
a{color:inherit;text-decoration:none;}

/* 顶栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;background:linear-gradient(135deg,#1e3a8a,#2563eb);border-bottom:1px solid #1e40af;position:sticky;top:0;z-index:50;}
.brand{display:flex;align-items:baseline;gap:10px;}
.brand .logo{font-size:18px;font-weight:800;letter-spacing:1px;color:#fff;}
.brand .ttl{font-size:15px;color:#dbeafe;font-weight:600;}
.top-actions{display:flex;align-items:center;gap:14px;}
.live{display:flex;align-items:center;gap:6px;font-size:12px;color:#bfdbfe;}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

.btn{display:inline-flex;align-items:center;gap:5px;border:none;border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;background:#e2e8f0;color:#0f172a;transition:.15s;}
.btn:hover{filter:brightness(1.08);}
.btn.sm{padding:6px 11px;font-size:13px;}
.btn.primary{background:var(--brand2);color:#fff;}
.btn.gray{background:#334155;color:#e2e8f0;}
.btn.ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* 首页 */
main{padding:26px;max-width:1200px;margin:0 auto;}
.upload-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:26px;}
.uc-title{font-size:19px;font-weight:700;color:#fff;}
.uc-sub{color:var(--muted);margin-top:6px;margin-bottom:16px;}
.drop{display:block;border:2px dashed #475569;border-radius:12px;padding:34px;text-align:center;cursor:pointer;transition:.2s;background:#16213b;}
.drop:hover,.drop.over{border-color:var(--brand2);background:#1a2947;}
.drop-ico{font-size:34px;color:var(--brand2);line-height:1;}
.drop-main{margin-top:8px;font-size:15px;color:#cbd5e1;}
.drop-hint{margin-top:6px;font-size:12px;color:var(--muted);}
.uc-progress{margin-top:14px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);}
.uc-progress .bar{flex:1;height:8px;background:#334155;border-radius:6px;overflow:hidden;}
.uc-progress .bar i{display:block;height:100%;width:0;background:var(--brand2);transition:.2s;}

.list-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.list-head h2{font-size:16px;margin:0;color:#cbd5e1;}
.photo-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.15s;}
.pcard:hover{transform:translateY(-2px);border-color:var(--brand2);}
.pcard .thumb{width:100%;height:150px;object-fit:cover;background:#0b1220;display:block;}
.pcard .pmeta{padding:10px 12px;}
.pcard .pname{font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pcard .pinfo{font-size:12px;color:var(--muted);margin-top:4px;display:flex;justify-content:space-between;}
.badge{background:#164e63;color:#67e8f9;border-radius:20px;padding:1px 8px;font-size:11px;}
.empty{color:var(--muted);text-align:center;padding:40px;grid-column:1/-1;}

/* 编辑器 */
#viewEdit{padding:0;}
.edit-grid{display:flex;height:calc(100vh - 52px - 56px);}
.canvas-wrap{flex:1;overflow:auto;background:#0b1220;display:flex;align-items:flex-start;justify-content:center;padding:20px;}
.stage{position:relative;line-height:0;box-shadow:0 6px 30px rgba(0,0,0,.5);}
.stage img{display:block;max-width:100%;user-select:none;}
#boxLayer{position:absolute;inset:0;}
.draw-rect{position:absolute;border:2px dashed var(--brand2);background:rgba(59,130,246,.18);pointer-events:none;}

/* 框 */
.box{position:absolute;border:2px solid var(--box);background:rgba(34,211,238,.08);cursor:move;box-sizing:border-box;}
.box.sel{border-color:var(--boxsel);background:rgba(245,158,11,.14);z-index:5;}
.box .no{position:absolute;top:0;left:0;background:var(--box);color:#06202b;font-weight:800;font-size:15px;padding:1px 8px;border-radius:0 0 8px 0;line-height:1.5;}
.box.sel .no{background:var(--boxsel);color:#3b1f00;}
.box .texttag{position:absolute;bottom:-2px;left:-2px;transform:translateY(100%);background:rgba(15,23,42,.92);color:#e2e8f0;font-size:12px;padding:2px 7px;border-radius:0 0 6px 6px;white-space:nowrap;border:1px solid var(--box);border-top:none;max-width:220px;overflow:hidden;text-overflow:ellipsis;}
.box .h{position:absolute;width:10px;height:10px;background:#fff;border:2px solid var(--box);border-radius:2px;right:-6px;bottom:-6px;cursor:se-resize;}
.box.sel .h{border-color:var(--boxsel);}

/* 侧栏 */
.side{width:330px;flex:none;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;}
.side-head{padding:12px;border-bottom:1px solid var(--line);}
.name-input-inline{width:100%;background:#0f172a;border:1px solid var(--line);border-radius:8px;color:#fff;padding:8px 10px;font-size:14px;}
.side-tools{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.side-tools .btn.active{background:var(--brand2);color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3);}
.side-hint{font-size:12px;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);}
.side-list{flex:1;overflow-y:auto;padding:8px;}
.brow{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;border:1px solid transparent;}
.brow:hover{background:#0f1a33;}
.brow.sel{background:#3b2a08;border-color:var(--boxsel);}
.brow .bno{flex:none;width:26px;height:26px;border-radius:6px;background:var(--box);color:#06202b;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:13px;}
.brow.sel .bno{background:var(--boxsel);color:#3b1f00;}
.brow .btxt{flex:1;color:#cbd5e1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brow .btxt.ph{color:#64748b;font-style:italic;}
.side-foot{padding:12px;border-top:1px solid var(--line);}

/* 底部栏 */
.bottombar{height:56px;background:linear-gradient(135deg,#1e293b,#334155);border-top:2px solid var(--brand);display:flex;align-items:center;}
.bb-inner{display:flex;align-items:center;gap:12px;padding:0 20px;width:100%;}
.bb-no{min-width:38px;height:34px;padding:0 10px;border-radius:8px;background:var(--boxsel);color:#3b1f00;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:16px;}
.bb-label{color:#cbd5e1;font-size:14px;}
.bb-input{flex:1;height:38px;background:#0f172a;border:1px solid var(--line);border-radius:8px;color:#fff;padding:0 14px;font-size:15px;}
.bb-input:focus{outline:none;border-color:var(--boxsel);}

/* toast */
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:#0f172a;border:1px solid var(--line);color:#fff;padding:10px 20px;border-radius:10px;font-size:14px;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,.5);}

@media(max-width:820px){
  .edit-grid{flex-direction:column;height:auto;}
  .side{width:100%;border-left:none;border-top:1px solid var(--line);}
  .canvas-wrap{padding:8px;}
}