:root { --navy:#103d78; --blue:#022b58; --light:#dce8f5; --panel:#eef3f8; --line:#9aa9b8; --text:#16212b; --muted:#536273; --danger:#a41919; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#c7d3df; color:var(--text); font:14px/1.35 Tahoma, Verdana, Arial, sans-serif; }
button, input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; color:#8a949e; }
.titlebar { height:52px; padding:0 16px; color:white; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(#72a9d7,#3e7fb9); border-bottom:1px solid #245d91; box-shadow:inset 0 1px #c2dcf0; }
.brand { display:flex; align-items:center; gap:10px; font-weight:bold; font-size:18px; letter-spacing:.2px; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid #fff; background:#f0a400; color:#102b4a; font-size:12px; box-shadow:2px 2px 0 #082f61; }
.session { display:flex; align-items:center; gap:11px; font-size:12px; letter-spacing:.3px; }
.session strong { color:#fff; }
.session button { padding:3px 9px; color:#173b5d; border:1px solid #527ba0; background:linear-gradient(#fff,#d8e8f5); }
.menubar { height:30px; display:flex; align-items:stretch; padding:0 10px; background:linear-gradient(#ffffff,#e9f1f8); border-bottom:1px solid #9eafbf; box-shadow:inset 0 1px #fff; position:relative; z-index:20; }
.menu-item { position:relative; display:flex; }
.menu-trigger { border:0; border-left:1px solid transparent; border-right:1px solid transparent; background:transparent; padding:4px 12px; }
.menu-trigger:hover, .menu-item.open .menu-trigger { background:#d7e8f7; color:#102d48; border-color:#9bb6cf; }
.menu-popup { display:none; position:absolute; top:29px; left:0; min-width:190px; padding:3px; background:#f7fafc; border:1px solid #6d8295; box-shadow:3px 4px 8px #24384c55; }
.menu-item.open .menu-popup { display:block; }
.menu-popup button { display:grid; grid-template-columns:23px 1fr; width:100%; padding:6px 10px 6px 4px; border:1px solid transparent; background:transparent; text-align:left; white-space:nowrap; }
.menu-popup button:hover, .menu-popup button:focus { outline:0; border-color:#8fb2d2; background:#dcecf9; }
.menu-popup span { text-align:center; color:#285a88; font-weight:bold; }
.shell { min-height:calc(100vh - 108px); padding:10px; }
.toolbar { display:flex; gap:5px; align-items:center; padding:7px; border:1px solid #7d8c9b; border-bottom:0; background:linear-gradient(#f8fafc,#d5dde5); box-shadow:inset 0 1px white; }
.tool { min-height:31px; padding:4px 11px; border:1px solid #8897a6; background:linear-gradient(#fff,#dce4eb); box-shadow:inset 1px 1px #fff; }
.tool:hover:not(:disabled) { border-color:#2766a3; background:#edf6ff; }
.tool span { display:inline-block; min-width:16px; color:#174f89; font-weight:bold; font-size:17px; vertical-align:-1px; }
.tool.primary { color:#103b63; border-color:#5985aa; background:linear-gradient(#e4f2fd,#a9d0ee); box-shadow:inset 0 1px #fff; }
.tool.primary span { color:#fff; }
.tool.danger span { color:var(--danger); }
.toolbar-separator { height:26px; border-left:1px solid #9cabb8; border-right:1px solid white; margin:0 4px; }
.workspace { display:grid; grid-template-columns:218px minmax(0,1fr); min-height:calc(100vh - 166px); border:1px solid #7d8c9b; background:white; }
.sidebar { background:#dfe8f1; border-right:1px solid #8998a7; position:relative; padding-bottom:130px; }
.panel-title { padding:5px 8px; color:#133b5f; font-weight:bold; background:linear-gradient(90deg,#a9d0ee,#dcecf8); border-bottom:1px solid #7397b7; }
.tree { padding:8px 5px; }
.tree-row { display:block; width:100%; text-align:left; padding:6px 8px; border:1px solid transparent; background:transparent; }
.tree-row.active { border-color:#6f92b5; background:#b8d3ed; }
.folder-icon { color:#db9b00; margin-right:6px; }
.quota-box { position:absolute; left:9px; right:9px; bottom:12px; padding:10px; border:1px solid #80909f; background:#f8fafc; box-shadow:inset 0 0 0 2px #e2e8ee; color:var(--muted); }
.quota-label { font-size:11px; font-weight:bold; color:#38536d; }
.quota-value { font:bold 26px Georgia,serif; color:#174d84; line-height:1.1; }
.content { min-width:0; display:flex; flex-direction:column; background:#f7f9fb; }
.addressbar { display:grid; grid-template-columns:auto 28px minmax(120px,1fr) auto; gap:5px; align-items:center; padding:6px; background:#e7edf3; border-bottom:1px solid #9aa9b8; }
.addressbar label { font-weight:bold; }
.addressbar button { height:26px; border:1px solid #8d9baa; background:linear-gradient(#fff,#d8e0e8); }
.addressbar input { height:26px; border:1px inset #a2aeb8; background:white; padding:3px 7px; }
.addressbar span { padding:0 7px; color:#526272; font-size:12px; }
.file-panel { position:relative; flex:1; min-height:360px; overflow:auto; background:white; outline:3px solid transparent; outline-offset:-3px; }
.file-panel.dragging { outline-color:#2c69a3; background:#f0f7ff; }
table { width:100%; border-collapse:collapse; table-layout:fixed; }
th { position:sticky; top:0; z-index:1; padding:5px 8px; text-align:left; font-weight:normal; background:linear-gradient(#fdfefe,#dce3ea); border-right:1px solid #a9b4bf; border-bottom:1px solid #8a98a7; }
th:nth-child(1){width:46%} th:nth-child(2){width:18%} th:nth-child(3){width:14%} th:nth-child(4){width:22%}
td { height:31px; padding:5px 8px; border-bottom:1px solid #edf0f3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
tbody tr { user-select:none; }
tbody tr:hover { background:#eaf3fc; }
tbody tr.selected { background:#2468a6; color:white; }
.file-name { display:flex; align-items:center; gap:7px; font-weight:bold; }
.type-icon { display:inline-grid; place-items:center; width:19px; height:19px; color:#274d74; border:1px solid #8191a1; background:#fff; font-size:10px; font-weight:normal; }
.type-icon.folder { background:#edb72b; border-color:#a27200; color:#5b3d00; }
.empty-state { position:absolute; inset:80px 0 auto; text-align:center; color:#677786; }
.empty-state strong, .empty-state span { display:block; margin-top:5px; }
.empty-folder { font-size:44px; color:#d5a01c; }
.transfer-panel { border-top:1px solid #7d8c9b; background:#edf2f7; max-height:190px; overflow:auto; }
.transfer-row { display:grid; grid-template-columns:minmax(160px,1fr) 260px 85px; gap:10px; align-items:center; padding:6px 9px; border-bottom:1px solid #ccd5de; }
.progress-track { height:14px; border:1px inset #83909d; background:white; padding:1px; }
.progress-bar { height:100%; width:0; background:repeating-linear-gradient(90deg,#2265a3 0,#2265a3 10px,#4b8bc7 10px,#4b8bc7 12px); }
.transfer-status { text-align:right; font-size:12px; color:#435464; }
.statusbar { height:26px; padding:4px 12px; display:flex; justify-content:space-between; color:#384858; background:#e6ebf0; border-top:1px solid #7b8997; box-shadow:inset 0 1px white; font-size:12px; }
dialog { width:min(420px,calc(100vw - 32px)); padding:0; border:2px solid #1b4c7d; box-shadow:6px 7px 18px #23384c88; }
dialog::backdrop { background:#22364b55; }
dialog form { padding:14px; background:#edf2f7; }
.dialog-title { margin:-14px -14px 14px; padding:6px 8px; color:#123a5d; font-weight:bold; background:linear-gradient(90deg,#a6cfef,#e0eef9); border-bottom:1px solid #789bb9; }
dialog label { display:block; margin-bottom:5px; }
dialog input { width:100%; padding:6px; border:1px inset #8a98a4; background:white; }
.dialog-actions { display:flex; justify-content:flex-end; gap:7px; margin-top:16px; }
.dialog-actions button { min-width:78px; padding:5px 10px; border:1px solid #7b8a98; background:linear-gradient(#fff,#d7e0e8); }
.danger-button { color:#8c1010; font-weight:bold; }
.login-dialog { width:min(390px,calc(100vw - 30px)); }
.login-dialog form { padding:16px; }
.login-dialog label { margin-top:10px; font-weight:bold; }
.login-mark { display:grid; place-items:center; width:48px; height:48px; margin:2px auto 16px; color:#173858; font:bold 18px Tahoma,sans-serif; background:#f0b642; border:1px solid #936500; box-shadow:3px 3px 0 #7b8da0; }
.login-error { min-height:19px; margin:9px 0 0; color:#9e1717; font-weight:bold; }
.login-dialog .dialog-actions { margin-top:8px; }
.login-dialog .dialog-actions button { min-width:96px; color:#10395e; border-color:#5b84a8; background:linear-gradient(#fff,#c9e1f3); font-weight:bold; }
@media (max-width:720px) { .session{display:none}.shell{padding:5px}.workspace{grid-template-columns:1fr}.sidebar{display:none}.toolbar{overflow-x:auto}.tool{white-space:nowrap}.addressbar{grid-template-columns:auto 28px 1fr}.addressbar span{display:none}th:nth-child(2),td:nth-child(2),th:nth-child(4),td:nth-child(4){display:none}th:nth-child(1){width:70%}th:nth-child(3){width:30%}.transfer-row{grid-template-columns:1fr 130px}.transfer-status{display:none} }