:root {
  color-scheme: light;
  --bg: #f5f6f8; --panel: #fff; --panel2: #fafbfc; --line: #dfe2e7; --line2: #f1f2f4; --text: #1e2329; --muted: #6b7380;
  --accent: #1f6feb; --accent-hover: #195ccc; --accent-fg: #fff; --danger: #c62828; --ok: #2e7d32; --warn: #b26a00;
  --sel: #dbe8fd; --hover: #f0f4fa; --track: #e6e9ee;
  --pub-bg: #fff4e0; --pub-line: #f0c47a; --pub-fg: #8a5300; --priv-bg: #eef1f4; --priv-fg: #4a525c;
  --warn-bg: #fff4e0; --warn-line: #f0c47a; --warn-fg: #6d4100;
  --dng-bg: #fdecea; --dng-line: #f5b5ae; --dng-fg: #7f1d1d;
  --shadow: rgba(0,0,0,.14); --scrim: rgba(15,20,30,.35); --drop-bg: rgba(31,111,235,.08);
  --toast-bg: #1e2329; --toast-fg: #fff;
  --row: 30px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: var(--text);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1216; --panel: #171b21; --panel2: #1c2128; --line: #2d333b; --line2: #22272e; --text: #e1e4e8; --muted: #8b949e;
    --accent: #4c8dff; --accent-hover: #6aa1ff; --accent-fg: #0b1020; --danger: #f47067; --ok: #57ab5a; --warn: #d4a72c;
    --sel: #1f3a5f; --hover: #222a35; --track: #2d333b;
    --pub-bg: #3a2a10; --pub-line: #7a5a1c; --pub-fg: #f0c47a; --priv-bg: #262c34; --priv-fg: #adb5bf;
    --warn-bg: #3a2a10; --warn-line: #7a5a1c; --warn-fg: #f0c47a;
    --dng-bg: #3d1a1a; --dng-line: #7a2e2a; --dng-fg: #ffb4ac;
    --shadow: rgba(0,0,0,.5); --scrim: rgba(0,0,0,.55); --drop-bg: rgba(76,141,255,.12);
    --toast-bg: #e1e4e8; --toast-fg: #0f1216;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1216; --panel: #171b21; --panel2: #1c2128; --line: #2d333b; --line2: #22272e; --text: #e1e4e8; --muted: #8b949e;
  --accent: #4c8dff; --accent-hover: #6aa1ff; --accent-fg: #0b1020; --danger: #f47067; --ok: #57ab5a; --warn: #d4a72c;
  --sel: #1f3a5f; --hover: #222a35; --track: #2d333b;
  --pub-bg: #3a2a10; --pub-line: #7a5a1c; --pub-fg: #f0c47a; --priv-bg: #262c34; --priv-fg: #adb5bf;
  --warn-bg: #3a2a10; --warn-line: #7a5a1c; --warn-fg: #f0c47a;
  --dng-bg: #3d1a1a; --dng-line: #7a2e2a; --dng-fg: #ffb4ac;
  --shadow: rgba(0,0,0,.5); --scrim: rgba(0,0,0,.55); --drop-bg: rgba(76,141,255,.12);
  --toast-bg: #e1e4e8; --toast-fg: #0f1216;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); }
.hidden { display: none !important; }
.spacer { flex: 1; }
button { font: inherit; padding: 5px 11px; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; cursor: pointer; color: var(--text); white-space: nowrap; }
button:hover:not(:disabled) { background: var(--hover); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
button.danger { color: var(--danger); }
button.danger.solid { background: var(--danger); color: var(--accent-fg); border-color: var(--danger); }
button.icon { padding: 3px 8px; }
button.small { padding: 2px 8px; font-size: 12px; }
input[type=text], input[type=password], input:not([type]) { font: inherit; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; width: 100%; background: var(--panel2); color: var(--text); }
a { color: var(--accent); }
.err { color: var(--danger); min-height: 1.2em; }
.muted { color: var(--muted); }

/* login */
.login { display: flex; align-items: center; justify-content: center; height: 100%; }
.login-box { background: var(--panel); padding: 28px; border-radius: 10px; width: 360px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.login-box h1 { margin: 0 0 4px; font-size: 20px; }
.login-box label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); }

/* layout */
.app { display: flex; flex-direction: column; height: 100%; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 600; }
.whoami { color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; }
.quota { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--muted); }
.qbar { width: 160px; height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.qbar > div { height: 100%; background: var(--accent); }
.qbar.hi > div { background: var(--warn); } .qbar.full > div { background: var(--danger); }
.main { flex: 1; display: flex; min-height: 0; }
.tree-pane { width: 270px; min-width: 180px; background: var(--panel); border-right: 1px solid var(--line); overflow: auto; resize: horizontal; }
.pane-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--panel); }
.files-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; background: var(--panel); }

/* tree */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { padding-left: 16px; }
.tnode { display: flex; align-items: center; gap: 4px; padding: 3px 6px; cursor: pointer; white-space: nowrap; border-radius: 4px; margin: 0 4px; }
.tnode:hover { background: var(--hover); }
.tnode.active { background: var(--sel); }
.tnode .tw { width: 14px; text-align: center; color: var(--muted); font-size: 10px; flex: none; }
.tnode .tl { overflow: hidden; text-overflow: ellipsis; }
.tnode.more { color: var(--accent); font-style: italic; }
.tnode.info { color: var(--muted); font-style: italic; cursor: default; }

/* toolbar / crumbs */
.toolbar { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.toolbar .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.crumbs { padding: 7px 12px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 34px; }
.crumbs a { cursor: pointer; text-decoration: none; padding: 1px 4px; border-radius: 4px; }
.crumbs a:hover { background: var(--hover); }
.crumbs .bkt { font-weight: 600; }
.crumbs .gt { color: var(--muted); }

/* list */
.list-head, .row { display: grid; grid-template-columns: 34px minmax(160px, 1fr) 100px 170px 130px; align-items: center; }
.list-head.noperm, .row.noperm { grid-template-columns: 34px minmax(160px, 1fr) 100px 170px; }
.list-head { border-bottom: 1px solid var(--line); background: var(--panel2); font-weight: 600; color: var(--muted); font-size: 12px; height: 30px; }
.list-head > span { padding: 0 8px; }
.sortable { cursor: pointer; user-select: none; }
.sortable.asc::after { content: " ▲"; } .sortable.desc::after { content: " ▼"; }
.rows { flex: 1; overflow: auto; position: relative; outline: none; }
.rows-inner { position: relative; }
.row { position: absolute; left: 0; right: 0; height: var(--row); border-bottom: 1px solid var(--line2); cursor: default; user-select: none; }
.row:hover { background: var(--hover); }
.row.sel { background: var(--sel); }
.row > span { padding: 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row > span.c-check, .list-head > span.c-check { padding: 0; text-align: center; overflow: visible; }
.c-size, .c-date { color: var(--muted); font-size: 13px; }
.c-size { text-align: right; }
.ico { margin-right: 6px; }
.badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line); cursor: pointer; }
.badge.pub { background: var(--pub-bg); border-color: var(--pub-line); color: var(--pub-fg); }
.badge.priv { background: var(--priv-bg); color: var(--priv-fg); }
.badge.inh { cursor: default; opacity: .8; font-style: italic; }
.badge.unk { color: var(--muted); cursor: default; }
.list-area { flex: 1; position: relative; min-height: 0; display: flex; flex-direction: column; }
.notice { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 20px; background: var(--panel); }
.notice .big { font-size: 16px; }
.statusbar { border-top: 1px solid var(--line); padding: 4px 12px; font-size: 12px; color: var(--muted); min-height: 24px; }
.drop { position: absolute; inset: 0; background: var(--drop-bg); border: 3px dashed var(--accent); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--accent); pointer-events: none; }

/* properties */
.props { width: 320px; background: var(--panel); border-left: 1px solid var(--line); padding: 14px; overflow: auto; }
.props h3 { margin: 0 0 12px; word-break: break-all; font-size: 15px; }
.props dl { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; margin: 0; font-size: 13px; }
.props dt { color: var(--muted); } .props dd { margin: 0; word-break: break-all; }
.props .link { display: flex; gap: 6px; margin-top: 4px; } .props .link input { font-size: 12px; padding: 4px 6px; }

/* transfers */
.transfers { background: var(--panel); border-top: 1px solid var(--line); max-height: 32vh; display: flex; flex-direction: column; }
.transfers.collapsed .tr-list { display: none; }
.tr-head { display: flex; align-items: center; gap: 8px; padding: 5px 12px; font-weight: 600; color: var(--muted); font-size: 12px; }
.tr-list { overflow: auto; }
.tr { display: grid; grid-template-columns: minmax(150px, 1fr) 200px 150px 90px auto; gap: 10px; align-items: center; padding: 4px 12px; border-top: 1px solid var(--line2); font-size: 13px; }
.tr .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar { height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.pbar > div { height: 100%; background: var(--accent); width: 0; transition: width .2s; }
.tr.done .pbar > div { background: var(--ok); } .tr.error .pbar > div { background: var(--danger); }
.tr .st { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr.error .st { color: var(--danger); }
.tr .btns { display: flex; gap: 4px; }

/* context menu */
.ctx { position: fixed; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 24px var(--shadow); padding: 4px; z-index: 50; min-width: 190px; }
.ctx div { padding: 6px 12px; border-radius: 5px; cursor: pointer; }
.ctx div:hover { background: var(--hover); }
.ctx div.dis { color: var(--muted); cursor: default; background: none; }
.ctx hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* modal */
.modal-bg { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: var(--panel); border-radius: 10px; width: min(560px, 94vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px var(--shadow); }
.modal h2 { margin: 0; padding: 14px 18px; font-size: 16px; border-bottom: 1px solid var(--line); }
.modal .mb { padding: 14px 18px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.modal .mf { padding: 10px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.modal ul.keys { margin: 0; padding-left: 18px; font-family: ui-monospace, monospace; font-size: 12px; max-height: 200px; overflow: auto; word-break: break-all; }
.modal .warnbox { background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 8px 10px; border-radius: 6px; color: var(--warn-fg); }
.modal .dangerbox { background: var(--dng-bg); border: 1px solid var(--dng-line); padding: 8px 10px; border-radius: 6px; color: var(--dng-fg); }
.modal .uplist { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; }
.modal .uprow { display: grid; grid-template-columns: 1fr 90px 110px; gap: 8px; align-items: center; font-size: 13px; }
.modal .uprow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal .uprow.bad { color: var(--danger); }
.modal .radio { display: flex; gap: 16px; }
.modal table { border-collapse: collapse; width: 100%; font-size: 13px; }
.modal td, .modal th { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line2); }
.modal td.r, .modal th.r { text-align: right; }
.modal.wide { width: min(1100px, 96vw); height: 90vh; max-height: 90vh; }
.modal.wide .mb { flex: 1; min-height: 0; }
.preview { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; height: 100%; }
.preview img { max-width: 100%; max-height: 100%; object-fit: contain; margin: auto; background: repeating-conic-gradient(var(--track) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.preview iframe { flex: 1; width: 100%; min-height: 60vh; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.preview pre { flex: 1; margin: 0; overflow: auto; padding: 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.captcha:empty { display: none; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--toast-bg); color: var(--toast-fg); padding: 8px 16px; border-radius: 6px; z-index: 200; font-size: 13px; }
.props-close { display: flex; justify-content: flex-end; }
select.theme, select.lang { font: inherit; font-size: 12px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); }
.login-theme { position: fixed; top: 12px; right: 12px; display: flex; gap: 6px; }
.meter { display: inline-flex; align-items: center; gap: 8px; margin-right: 12px; }
.qbar.mini { width: 100%; height: 5px; margin: 3px 0 1px; }
.small { font-size: 11px; }
.modal table.qtable td.bn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal table.qtable td { vertical-align: top; }
.modal .mb h4 { margin: 14px 0 4px; }

.site-footer { text-align: center; font-size: 12px; color: var(--muted); padding: 4px 12px; background: var(--panel); border-top: 1px solid var(--line); }
.login .site-footer { position: fixed; left: 0; right: 0; bottom: 0; background: transparent; border: 0; padding: 12px; }
.whoami #whoami { color: var(--text); }
.topbar { flex-wrap: nowrap; }
.brand, .meter > span:last-child, .whoami, #btn-quota { white-space: nowrap; }
.topbar .qbar { width: 110px; }
.quota { min-width: 0; overflow: hidden; }