:root{--ink:#17213a;--muted:#758198;--soft:#f3f6fb;--line:#e2e8f1;--paper:#f8fafc;--navy:#111b33;--navy-2:#182544;--blue:#3867d7;--blue-soft:#eaf0ff;--orange:#e88947;--green:#3b9b77;--danger:#d96761;--shadow:0 18px 42px rgba(23,42,78,.08)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Manrope,"Noto Sans SC",sans-serif}button,input{font:inherit}button{cursor:pointer}body{font-size:14px}
.shell{min-height:100vh;display:grid;grid-template-columns:246px minmax(0,1fr)}.sidebar{background:var(--navy);color:#f2f5ff;padding:31px 24px 26px;display:flex;flex-direction:column;min-height:100vh}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:37px;height:37px;display:grid;place-items:center;background:#f3b469;color:var(--navy);border-radius:10px}.brand-mark svg{width:18px}.brand strong{display:block;font-size:16px;letter-spacing:-.03em}.brand span{display:block;margin-top:2px;color:#8998ba;font:10px "DM Mono",monospace;letter-spacing:.06em;text-transform:uppercase}.side-rule{height:1px;background:#2a3655;margin:32px 0 23px}.side-context{display:flex;align-items:center;gap:8px;color:#c9d3e9;font-size:11px}.side-context b{margin-left:auto;color:#7dcaab;font:10px "DM Mono",monospace}.status-dot{width:7px;height:7px;border-radius:50%;background:#72c39f;box-shadow:0 0 0 3px rgba(114,195,159,.13)}.side-note{color:#8998ba;font-size:12px;line-height:1.75;margin-top:18px}.side-bottom{margin-top:auto;border-top:1px solid #2a3655;padding-top:20px;color:#a5b2ce;font-size:11px}.mini-label{color:#647496;font:10px "DM Mono",monospace;letter-spacing:.1em;text-transform:uppercase;margin-bottom:13px}.policy-line{display:flex;align-items:center;gap:8px;margin-top:11px}.policy-line svg{width:14px;color:#f1b467}.main{min-width:0;max-width:1500px;width:100%;padding:44px clamp(25px,5vw,77px) 32px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:28px}.kicker,.section-kicker{color:var(--orange);font:10px "DM Mono",monospace;letter-spacing:.15em;text-transform:uppercase}.topbar h1{font-size:clamp(31px,3.3vw,48px);line-height:1.14;letter-spacing:-.055em;margin:11px 0 11px;font-weight:800}.topbar h1 em{font-style:normal;color:var(--blue)}.lede{color:var(--muted);margin:0;font-size:13px}.top-actions{display:flex;align-items:center;gap:9px}.icon-btn,.plain-btn,.sort-btn{border:1px solid var(--line);background:#fff;color:#65728a;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;height:38px;padding:0 12px;font-size:12px;font-weight:700}.icon-btn{width:38px;padding:0}.icon-btn:hover,.plain-btn:hover,.sort-btn:hover{border-color:#b9c8e5;color:var(--blue);background:#fbfcff}.icon-btn svg{width:16px}.metrics{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:12px;margin:37px 0 14px}.metric{background:#fff;border:1px solid var(--line);border-radius:11px;padding:17px 18px 13px;min-height:142px;box-shadow:0 4px 14px rgba(29,52,93,.025)}.metric-space{background:var(--navy);border-color:var(--navy);color:#f1f4ff}.metric-head{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px}.metric-space .metric-head{color:#aebbd4}.metric-head svg{width:15px}.metric-space .metric-head svg{color:#7d9ff0}.metric-value{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px}.metric-value strong{font:700 25px "DM Mono",monospace;letter-spacing:-.08em}.metric-value span{font:11px "DM Mono",monospace;color:#91a1c4}.meter{height:6px;background:#2b3754;border-radius:5px;overflow:hidden;margin-top:15px}.meter i{display:block;height:100%;width:0;background:#f0ae62;border-radius:5px;transition:width .35s ease}.metric-foot{display:flex;justify-content:space-between;gap:10px;color:#8a95a7;font-size:10px;margin-top:15px}.metric-space .metric-foot{color:#8492b1}.next-expiry{display:flex;flex-direction:column;gap:5px;margin-top:18px}.next-expiry strong,.share-status strong{font-size:15px;letter-spacing:-.03em}.next-expiry span,.share-status span{font-size:11px;color:var(--muted)}.share-status{display:flex;flex-direction:column;gap:5px;margin-top:18px}.live-chip{display:flex;align-items:center;gap:5px;color:var(--green)!important}.live-chip i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green)}.upload-zone{background:var(--blue-soft);border:1px dashed #9fb4e8;border-radius:11px;min-height:127px;display:flex;align-items:center;gap:17px;padding:20px 25px;position:relative;transition:.18s ease}.upload-zone.dragging{background:#dfe8ff;border-color:var(--blue);transform:translateY(-1px)}.upload-icon{width:42px;height:42px;border-radius:10px;background:#d9e4ff;color:var(--blue);display:grid;place-items:center;flex:none}.upload-icon svg{width:21px}.upload-copy{display:flex;flex-direction:column;gap:6px}.upload-copy strong{font-size:14px}.upload-copy span{font-size:11px;color:#7181a4}.upload-btn{margin-left:auto;border:0;background:var(--blue);color:#fff;border-radius:8px;padding:11px 15px;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;box-shadow:0 6px 15px rgba(56,103,215,.2)}.upload-btn:hover{background:#2f58bb}.upload-btn svg{width:15px}.upload-tip{position:absolute;left:25px;bottom:9px;color:#7d8fb8;font-size:10px;display:flex;align-items:center;gap:5px}.upload-tip svg{width:12px}.files-section{margin-top:37px}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:13px}.section-head h2{font-size:22px;letter-spacing:-.045em;margin:6px 0 0}.section-tools{display:flex;align-items:center;gap:9px}.file-total{color:#8a95a7;font:11px "DM Mono",monospace}.sort-btn{height:31px;padding:0 9px;font-size:10px}.sort-btn svg{width:13px}.file-list{display:grid;gap:7px}.file-row{background:#fff;border:1px solid var(--line);border-radius:9px;min-height:77px;padding:12px 14px;display:grid;grid-template-columns:minmax(220px,1.5fr) 100px minmax(175px,1fr) auto;gap:17px;align-items:center;transition:border .18s,box-shadow .18s}.file-row:hover{border-color:#bfd0ef;box-shadow:0 7px 18px rgba(29,52,93,.055)}.file-main{display:flex;align-items:center;gap:11px;min-width:0}.file-type{flex:none;width:34px;height:37px;display:grid;place-items:center;border-radius:7px;background:#f4efe9;color:#c9793c}.file-type.image{background:#edf6f0;color:#3b9b77}.file-type.archive{background:#f2edfb;color:#8463b6}.file-type svg{width:17px}.file-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-time{color:#929db0;font:10px "DM Mono",monospace;margin-top:4px}.file-size{color:#67748c;font:11px "DM Mono",monospace}.expiry-wrap{min-width:0}.expiry-line{display:flex;justify-content:space-between;gap:8px;color:#6b7890;font-size:11px}.expiry-line b{color:#d8784e;font:11px "DM Mono",monospace;font-weight:500}.expiry-line b.safe{color:#6b8c7e}.expiry-track{height:4px;background:#edf0f5;border-radius:3px;margin-top:8px;overflow:hidden}.expiry-track i{height:100%;display:block;border-radius:3px;background:#edb071}.expiry-track i.safe{background:#7eb59d}.row-actions{display:flex;align-items:center;justify-content:flex-end;gap:5px}.row-actions button{height:30px;padding:0 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:#78869d;font-size:10px;font-weight:800;display:inline-flex;align-items:center;gap:5px}.row-actions button:hover{background:#f5f7fb;color:var(--blue)}.row-actions .download{border-color:#d5e0fa;color:var(--blue);background:#f6f8ff}.row-actions .download:hover{background:#eaf0ff}.row-actions .danger:hover{color:var(--danger);background:#fff4f3}.row-actions svg{width:13px}.empty-state{border:1px dashed #cbd5e6;border-radius:10px;text-align:center;padding:39px 20px;color:#8894a9}.empty-state svg{width:26px;color:#b6c5df;margin-bottom:9px}.empty-state strong{display:block;font-size:13px;color:#64728a}.empty-state span{display:block;font-size:11px;margin-top:6px}.upload-queue{border:1px solid #d4def2;border-radius:9px;background:#fbfcff;padding:12px 14px;margin-bottom:7px}.queue-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.queue-name{font-size:11px;font-weight:700}.queue-status{color:#7887a1;font:10px "DM Mono",monospace}.queue-bar{height:4px;background:#e8edf7;border-radius:4px;margin-top:8px;overflow:hidden}.queue-bar i{display:block;width:25%;height:100%;background:var(--blue);border-radius:4px;transition:width .2s}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#9ba5b5;font:9px "DM Mono",monospace;letter-spacing:.08em;margin-top:43px;padding-top:18px}.toast{position:fixed;bottom:24px;left:50%;z-index:8;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:var(--navy);color:#fff;border-radius:7px;padding:11px 16px;font-size:12px;box-shadow:0 9px 24px rgba(17,27,51,.18);transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:fixed;inset:0;background:rgba(13,24,48,.48);display:grid;place-items:center;padding:18px;z-index:7}.modal-backdrop[hidden]{display:none}.modal{width:min(520px,100%);background:#fff;border-radius:13px;padding:25px;box-shadow:0 28px 70px rgba(13,24,48,.22)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start}.modal h2{font-size:21px;letter-spacing:-.04em;margin:7px 0 0}.rules{margin:23px 0 24px;border-top:1px solid var(--line)}.rule{display:grid;grid-template-columns:34px 1fr;gap:12px;border-bottom:1px solid var(--line);padding:16px 0}.rule>span{color:#a9b5c9;font:11px "DM Mono",monospace;padding-top:3px}.rule strong{font-size:12px}.rule p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.65}.primary-btn{border:0;border-radius:7px;background:var(--blue);color:#fff;padding:11px 17px;font-size:12px;font-weight:800}.primary-btn:hover{background:#2f58bb}
@media(max-width:950px){.shell{grid-template-columns:1fr}.sidebar{min-height:0;padding:17px 20px;display:block}.side-rule,.side-note,.side-bottom{display:none}.side-context{position:absolute;right:20px;top:27px}.main{padding:35px clamp(19px,5vw,50px) 28px}.metrics{grid-template-columns:1fr 1fr}.metric-space{grid-column:1/-1}.file-row{grid-template-columns:minmax(210px,1.5fr) 90px minmax(155px,1fr) auto;gap:11px}}
@media(max-width:650px){.main{padding:28px 15px 25px}.topbar h1{font-size:34px}.top-actions .plain-btn span{display:none}.plain-btn{width:38px;padding:0}.metrics{grid-template-columns:1fr 1fr;gap:8px;margin-top:28px}.metric{padding:14px 13px;min-height:132px}.metric-value strong{font-size:20px}.metric-foot{font-size:9px}.next-expiry strong,.share-status strong{font-size:13px}.upload-zone{padding:18px;min-height:149px;align-items:flex-start}.upload-copy{padding-right:65px}.upload-btn{position:absolute;right:16px;top:44px}.upload-tip{left:18px;bottom:10px}.section-head{align-items:flex-start}.section-tools{align-items:flex-end;flex-direction:column-reverse;gap:5px}.file-row{grid-template-columns:1fr auto;gap:8px 10px;padding:12px}.file-main{grid-column:1/-1}.file-size{grid-column:1}.expiry-wrap{grid-column:1/-1}.row-actions{grid-column:2;grid-row:2}.row-actions .extend{display:none}.file-name{max-width:calc(100vw - 120px)}footer{margin-top:31px;gap:15px;line-height:1.6}footer span:last-child{text-align:right}.modal{padding:21px}}
.queue-name{display:flex;align-items:center;gap:6px}.queue-name svg{width:13px;color:var(--blue)}.queue-percent{color:var(--blue);font:11px "DM Mono",monospace}.queue-bar{height:5px}.queue-bar i{width:2%}.queue-bar i.failed{background:var(--danger)}