/* ============================================================
   网盘 UI
   ============================================================ */
:root{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --ink:#1b1f27;
  --ink-2:#5a6373;
  --ink-3:#8b94a3;
  --line:#e6e9ef;
  --line-2:#eef1f5;
  --accent:#2f6bff;
  --accent-2:#1f56e0;
  --accent-soft:#eaf0ff;
  --danger:#e5484d;
  --ok:#1f9d63;
  --r:12px;
  --shadow:0 1px 2px rgba(20,30,50,.05), 0 8px 24px rgba(20,30,50,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hidden{display:none !important}

/* 拖拽上传遮罩 */
body.dragging::after{
  content:"松开即可上传到当前目录";
  position:fixed;inset:12px;z-index:100;border:2px dashed #7a9bff;border-radius:18px;
  background:rgba(239,244,255,.86);backdrop-filter:blur(2px);
  display:grid;place-items:center;color:#2f6bff;font-size:15px;font-weight:600;
  pointer-events:none;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 14px;border-radius:9px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .06s;
}
.btn:hover{background:#f7f8fb;border-color:#d8dde6}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:#eef1f5;color:var(--ink)}
.btn.block{width:100%;justify-content:center;height:42px}
.btn.small{height:30px;padding:0 10px;border-radius:7px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.icon-btn{
  width:32px;height:32px;border:0;background:transparent;border-radius:8px;
  font-size:20px;line-height:1;color:var(--ink-3);cursor:pointer;
}
.icon-btn:hover{background:#eef1f5;color:var(--ink)}

/* ---------- 登录 ---------- */
.auth-body{
  min-height:100vh;display:grid;place-items:center;
  background:
    radial-gradient(900px 500px at 12% -10%, #dbe6ff 0%, rgba(219,230,255,0) 62%),
    radial-gradient(700px 400px at 90% 110%, #e6ddff 0%, rgba(230,221,255,0) 60%),
    var(--bg);
}
.auth-wrap{width:100%;max-width:420px;padding:28px}
.auth-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:30px 28px 26px;box-shadow:0 18px 50px rgba(20,30,50,.09);
}
.brand{display:flex;gap:13px;align-items:center;margin-bottom:24px}
.brand-mark{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(145deg,#3b74ff,#6a4dff);color:#fff;
  font-weight:800;font-size:20px;letter-spacing:.5px;
}
.brand h1{font-size:17px;margin:0 0 3px}
.brand p{margin:0;color:var(--ink-3);font-size:12.5px}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.field input{
  width:100%;height:42px;padding:0 12px;border:1px solid var(--line);
  border-radius:9px;background:#fbfcfe;outline:none;transition:border-color .15s,box-shadow .15s;
}
.field input:focus{border-color:#9db6ff;box-shadow:0 0 0 3px rgba(47,107,255,.12);background:#fff}
.alert{padding:10px 12px;border-radius:9px;font-size:13px;margin-bottom:14px}
.alert.error{background:#fdecec;color:#b3261e;border:1px solid #f7d4d3}
.auth-foot{margin-top:16px;text-align:center;color:var(--ink-3);font-size:13px}
.auth-foot a{color:var(--accent);font-weight:600}
.auth-note{text-align:center;color:var(--ink-3);font-size:12px;margin-top:16px}

/* ---------- 顶栏 ---------- */
.app-body{min-height:100vh}
.topbar{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:1240px;margin:0 auto;height:62px;padding:0 22px;
  display:flex;align-items:center;gap:20px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.2px}
.logo-mark{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(145deg,#3b74ff,#6a4dff);color:#fff;font-size:15px;font-weight:800;
}
.logo-text{font-size:15px}
.search{
  flex:1;max-width:420px;position:relative;display:flex;align-items:center;
}
.search svg{position:absolute;left:11px;width:16px;height:16px;color:var(--ink-3)}
.search input{
  width:100%;height:36px;border:1px solid var(--line);background:#f8f9fc;
  border-radius:9px;padding:0 12px 0 34px;outline:none;transition:.15s;
}
.search input:focus{background:#fff;border-color:#b9c9ff;box-shadow:0 0 0 3px rgba(47,107,255,.1)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.user-chip{display:flex;align-items:center;gap:7px;padding:3px 8px 3px 3px;border-radius:20px;background:#f3f5f9}
.avatar{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:#dbe4ff;color:#2b55c8;font-weight:700;font-size:12px;text-transform:uppercase;
}
.uname{font-size:13px;color:var(--ink-2);max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 布局 ---------- */
.shell{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:212px 1fr;gap:26px;padding:24px 22px 80px}
.side{position:sticky;top:86px;align-self:start;display:flex;flex-direction:column;gap:18px}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-item{
  display:flex;align-items:center;gap:10px;height:38px;padding:0 11px;border-radius:9px;
  color:var(--ink-2);font-size:13.5px;
}
.side-item:hover{background:#eef1f6;color:var(--ink)}
.side-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.side-item svg{width:17px;height:17px}
.usage{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px}
.usage-head{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2);margin-bottom:8px}
.bar{height:6px;background:#edf0f5;border-radius:4px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4a7dff,#7a5cff);border-radius:4px;transition:width .3s}
.usage-foot{margin-top:8px;font-size:11.5px;color:var(--ink-3);line-height:1.5}
.side-tip{font-size:12px;color:var(--ink-3);padding:0 4px}
.side-tip b{color:var(--ink-2);display:block;margin-bottom:4px;font-weight:600}
.side-tip p{margin:0;line-height:1.6}

/* ---------- 工具栏 ---------- */
.content{min-width:0}
.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.toolbar-left{display:flex;gap:8px}
.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.sel-info{font-size:12.5px;color:var(--ink-3)}
.crumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--ink-3);margin-bottom:10px;min-height:20px}
.crumb a{color:var(--ink-2);padding:2px 5px;border-radius:6px}
.crumb a:hover{background:#e9edf4;color:var(--ink)}
.crumb .sep{color:#c3c9d4}
.crumb .cur{color:var(--ink);font-weight:600}

/* ---------- 列表 ---------- */
.list{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.list-head,.row{
  display:grid;grid-template-columns:38px 1fr 100px 150px 132px;
  align-items:center;padding:0 14px;column-gap:8px;
}
.list-head{height:38px;background:#fafbfd;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--ink-3);letter-spacing:.3px}
.row{height:52px;border-bottom:1px solid var(--line-2);cursor:default;transition:background .12s}
.row:last-child{border-bottom:0}
.row:hover{background:#f8faff}
.row.sel{background:#f2f6ff}
.cb{display:grid;place-items:center;width:18px;height:18px;position:relative;cursor:pointer}
.cb input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cb i{width:16px;height:16px;border:1.6px solid #cbd2de;border-radius:5px;background:#fff;display:block;transition:.12s}
.cb input:checked + i{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.cb input:checked + i::after{content:"";position:absolute}

.f-name{display:flex;align-items:center;gap:11px;min-width:0}
.ficon{
  width:32px;height:32px;border-radius:9px;flex:0 0 32px;
  background:#eef2f8 center/18px no-repeat;position:relative;
}
.ficon::after{
  content:"";position:absolute;inset:0;border-radius:9px;
  background:center/18px no-repeat;
}
.ficon.folder{background:#fff3d6}
.ficon.folder::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0a315'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5h5l2 2h8A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3C/svg%3E")}
.ficon.image{background:#e8f7ee}
.ficon.image::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320a05a' stroke-width='1.9'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='M4 17l5-5 4 4 3-2 4 4'/%3E%3C/svg%3E")}
.ficon.video{background:#f1ebff}
.ficon.video::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237453e8' stroke-width='1.9'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M10 9l5 3-5 3z' fill='%237453e8'/%3E%3C/svg%3E")}
.ficon.audio{background:#eaf4ff}
.ficon.audio::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a78d0' stroke-width='1.9'%3E%3Cpath d='M9 18V6l10-2v12'/%3E%3Ccircle cx='6.5' cy='18' r='2.5'/%3E%3Ccircle cx='16.5' cy='16' r='2.5'/%3E%3C/svg%3E")}
.ficon.archive{background:#fff0e6}
.ficon.archive::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='1.9'%3E%3Cpath d='M4 7h16v13H4zM4 7l2-3h12l2 3M12 10v4'/%3E%3C/svg%3E")}
.ficon.pdf{background:#ffeceb}
.ficon.pdf::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d33b3b' stroke-width='1.9'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v5h4M9 13h6M9 17h4'/%3E%3C/svg%3E")}
.ficon.text{background:#eef1f6}
.ficon.text::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6373' stroke-width='1.9'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v5h4M9 12h6M9 16h6'/%3E%3C/svg%3E")}
.ficon.file{background:#eef1f6}
.ficon.file::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6373' stroke-width='1.9'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v5h4'/%3E%3C/svg%3E")}

.f-name .nm{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-name .nm .tag{
  display:inline-block;font-size:10.5px;padding:1px 5px;border-radius:4px;
  background:var(--accent-soft);color:var(--accent);margin-left:7px;vertical-align:1px;
}
.c-size{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.c-time{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.c-act{display:flex;justify-content:flex-end;gap:2px;opacity:0;transition:opacity .12s}
.row:hover .c-act,.row.sel .c-act{opacity:1}
.act{
  width:30px;height:30px;border:0;background:transparent;border-radius:7px;color:var(--ink-3);
  cursor:pointer;display:grid;place-items:center;
}
.act:hover{background:#e9eefb;color:var(--accent)}
.act.danger:hover{background:#fdecec;color:var(--danger)}
.act svg{width:16px;height:16px}

.empty{padding:74px 20px 86px;text-align:center;color:var(--ink-3)}
.empty p{margin:16px 0 4px;color:var(--ink-2);font-size:14px;font-weight:600}
.empty span{font-size:12.5px}
.empty-art{
  width:86px;height:66px;margin:0 auto;border-radius:12px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(145deg,#dfe6f6,#eef1f8) border-box;
  border:2px solid transparent;position:relative;
}
.empty-art::before{
  content:"";position:absolute;left:14px;top:14px;width:34px;height:8px;border-radius:3px;background:#e3e9f5;
}
.empty-art::after{
  content:"";position:absolute;left:14px;top:28px;width:52px;height:22px;border-radius:5px;background:#eef2fa;
}

/* ---------- 上传面板 ---------- */
.upload-panel{
  position:fixed;right:22px;bottom:22px;z-index:40;width:396px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(20,30,50,.16);overflow:hidden;
  animation:slideUp .22s ease both;
}
@keyframes slideUp{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.upload-head{display:flex;align-items:flex-start;justify-content:space-between;padding:15px 16px 11px;border-bottom:1px solid var(--line-2)}
.upload-head h3{margin:0;font-size:14px}
.upload-head p{margin:2px 0 0;font-size:11.5px;color:var(--ink-3)}
.switch-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--line-2)}
.switch-line span:first-child{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.switch-line small{display:block;color:var(--ink-3);font-size:11px}
.switch{position:relative;width:38px;height:22px;flex:0 0 38px}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:2}
.switch i{position:absolute;inset:0;border-radius:11px;background:#d7dce6;transition:.18s}
.switch i::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.18s}
.switch input:checked + i{background:var(--accent)}
.switch input:checked + i::after{transform:translateX(16px)}

.queue{max-height:330px;overflow:auto}
.q-item{padding:11px 16px;border-bottom:1px solid var(--line-2)}
.q-item:last-child{border-bottom:0}
.q-top{display:flex;align-items:center;gap:8px;font-size:12.5px}
.q-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-pct{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.q-bar{height:4px;background:#edf0f6;border-radius:3px;margin-top:7px;overflow:hidden}
.q-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4a7dff,#7a5cff);transition:width .2s}
.q-status{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.q-item.done .q-status{color:var(--ok)}
.q-item.err .q-status{color:var(--danger)}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px}
.modal-mask{position:absolute;inset:0;background:rgba(17,22,32,.42);backdrop-filter:blur(2px)}
.modal-box{
  position:relative;background:#fff;border-radius:16px;width:100%;max-width:440px;
  box-shadow:0 30px 80px rgba(15,20,30,.28);overflow:hidden;
  animation:pop .18s ease both;
}
.modal-box.wide{max-width:780px}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line-2)}
.modal-head h3{margin:0;font-size:15px}
.modal-body{padding:18px;max-height:min(70vh,640px);overflow:auto}
.modal-foot{padding:0 18px 18px;display:flex;justify-content:flex-end;gap:8px}
.modal-body .field:last-child{margin-bottom:0}
.modal-body p{margin:0 0 12px;color:var(--ink-2);font-size:13px;line-height:1.6}
.copy-line{display:flex;gap:8px}
.copy-line input{
  flex:1;height:38px;border:1px solid var(--line);border-radius:9px;background:#f8fafd;
  padding:0 11px;font-size:12.5px;outline:none;
}
.pick-list{max-height:300px;overflow:auto;border:1px solid var(--line);border-radius:10px}
.pick-row{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line-2);cursor:pointer;font-size:13px}
.pick-row:last-child{border-bottom:0}
.pick-row:hover{background:#f6f9ff}
.pick-row svg{width:16px;height:16px;color:#e0a315}

/* ---------- 存储设置 ---------- */
.sto-bucket{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.sto-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.sto-head b{font-size:14px}
.sto-state{font-size:12px;padding:2px 9px;border-radius:99px;background:#eef1f5;color:var(--ink-2)}
.sto-state.ok{background:#e2f5ea;color:#177a4d}
.sto-state.bad{background:#fdecec;color:#c62f34}
.sto-msg{font-size:12.5px;color:var(--ink-3);margin-bottom:10px}
.sto-msg.ok{color:#177a4d}
.sto-saved{font-size:12.5px;color:var(--ink-2);background:#f6f8fb;border-radius:8px;padding:7px 10px;margin-bottom:12px}
.sto-btns{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.sto-note{font-size:12px;color:var(--ink-3);line-height:1.6;margin-top:2px}

/* ---------- toast ---------- */
.toast-wrap{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{
  padding:9px 15px;border-radius:10px;background:#212733;color:#fff;font-size:13px;
  box-shadow:0 10px 30px rgba(10,15,25,.24);animation:fadeDown .2s ease both;
}
.toast.err{background:#c62f34}
.toast.ok{background:#177a4d}
@keyframes fadeDown{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}

/* ---------- 分享页 ---------- */
.share-body{background:var(--bg);min-height:100vh}
.share-top{max-width:900px;margin:0 auto;height:64px;padding:0 22px;display:flex;align-items:center;justify-content:space-between}
.share-brand{display:flex;align-items:center;gap:9px;font-weight:700}
.share-wrap{max-width:900px;margin:0 auto;padding:16px 22px 70px}
.share-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.share-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 22px 18px;border-bottom:1px solid var(--line-2)}
.share-head h1{margin:0 0 3px;font-size:18px}
.share-head p{margin:0;color:var(--ink-3);font-size:12.5px}
.share-list{padding:6px 0}
.share-row{display:grid;grid-template-columns:38px 1fr 90px 150px;align-items:center;gap:8px;padding:9px 22px}
.share-row:hover{background:#f8faff}
.share-row .fname{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-row .fsize{font-size:12.5px;color:var(--ink-3);text-align:right}
.share-row .fdl{display:flex;gap:6px;justify-content:flex-end}
.share-row.folder .fname{font-weight:600}
.share-empty{text-align:center;padding:100px 20px}
.share-empty h2{margin:18px 0 6px;font-size:17px}
.share-empty p{margin:0;color:var(--ink-3);font-size:13px}
.share-note{text-align:center;color:var(--ink-3);font-size:12px;margin-top:16px}

@media (max-width:900px){
  .shell{grid-template-columns:1fr;padding:16px 14px 90px}
  .side{position:static;flex-direction:row;align-items:center;gap:10px;overflow:auto}
  .side-nav{flex-direction:row}
  .usage,.side-tip{display:none}
  .search{max-width:none}
  .list-head,.row{grid-template-columns:32px 1fr 86px 0 108px}
  .c-time{display:none}
  .topbar-inner{padding:0 14px;gap:12px}
  .uname{display:none}
  .upload-panel{left:12px;right:12px;bottom:12px;width:auto}
  .share-row{grid-template-columns:32px 1fr 70px 120px;padding:9px 14px}
}

/* ---- 配额 / 套餐 / 管理 ---- */
.reg-note{font-size:12px;color:var(--muted,#8a8f98);margin:2px 0 10px}
.qcard{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;border:1px solid var(--line,#2a2f37);border-radius:10px;padding:14px;margin-bottom:14px}
.qrow{margin-bottom:0}
.qrow>span{display:block;font-size:12px;color:var(--muted,#8a8f98);margin-bottom:3px}
.qrow>b{font-size:13px}
.qbar{height:5px;border-radius:3px;background:rgba(128,128,128,.18);margin-top:5px;overflow:hidden}
.qbar i{display:block;height:100%;background:var(--accent,#e0a315);border-radius:3px}
.qnote{font-size:12px;color:var(--muted,#8a8f98);margin-top:8px}
.sect{margin:16px 0 8px;font-size:13px}
.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pack{border:1px solid var(--line,#2a2f37);border-radius:10px;padding:12px}
.pack-label{font-weight:600;font-size:13px}
.pack-amt{color:var(--accent,#e0a315);font-size:12px;margin:4px 0 8px}
.pack-foot{display:flex;align-items:center;justify-content:space-between}
.pack-price{font-weight:700}
.ord{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line,#2a2f37);font-size:13px}
.ord>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-time{color:var(--muted,#8a8f98);font-size:12px}
.ord-st{font-size:12px;white-space:nowrap}
.ord-st.ok{color:#4caf7d}
.ord-st.bad{color:#e06c5a}
.ord-st.wait{color:#e0a315}
.mtabs{display:flex;gap:6px;margin-bottom:12px}
.mtab{border:1px solid var(--line,#2a2f37);background:none;color:inherit;border-radius:8px;padding:5px 14px;cursor:pointer;font-size:13px}
.mtab.active{background:var(--accent,#e0a315);border-color:var(--accent,#e0a315);color:#111}
.inv-bar{display:flex;gap:8px;margin-bottom:10px}
.inv-bar .grow{flex:1}
.inv-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line,#2a2f37);font-size:13px}
.inv-row code{font-family:ui-monospace,Consolas,monospace;letter-spacing:1px}
.inv-row .dim{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dim{color:var(--muted,#8a8f98)}
.usr-row{padding:8px 0;border-bottom:1px solid var(--line,#2a2f37);font-size:13px}
.usr-row .dim{display:block;font-size:12px;margin-top:2px}