:root {
  --bg: #0c0c0c;
  --fg: #c0c0c0;
  --prompt: #33ff66;
  --dim: #666;
  --err: #ff5555;
  --ok: #50fa7b;
  --link: #8be9fd;
  --bar: #444;
  --panel: #111;
  --input-bg: #1a1a1a;
}
.hidden { display: none !important; }
.check-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.check-row input { width: auto; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--fg);
  font: 14px/1.45 ui-monospace, 'Cascadia Code', 'Fira Code', Menlo, Consolas, monospace;
}
a { color: var(--link); }
.dim { color: var(--dim); }
.ok { color: var(--ok); }
.err { color: var(--err); }

#layout { display: flex; flex-direction: column; height: 100vh; }
#top {
  display: flex; align-items: center; gap: 0;
  padding: 8px 12px; border-bottom: 1px solid var(--bar);
  flex-shrink: 0;
}
.brand { color: var(--ok); font-weight: 600; margin-right: 20px; }
a.brand { text-decoration: none; }
a.brand:hover { opacity: 0.85; }
#mode-nav {
  display: flex; gap: 4px;
  margin-right: 20px; padding-right: 20px;
  border-right: 1px solid var(--bar);
}
#mode-nav button, #gui-tabs button, #admin-tabs button {
  background: var(--input-bg); border: 1px solid var(--bar); color: var(--fg);
  font: inherit; padding: 4px 10px; cursor: pointer;
}
#mode-nav button.active, #gui-tabs button.active, #admin-tabs button.active {
  border-color: var(--ok); color: var(--ok);
}
.top-links { margin-left: auto; font-size: 12px; display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.header-usage {
  flex: 1; min-width: 0; max-width: 320px;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--dim);
  margin-right: 16px;
}
.header-usage-label { flex-shrink: 0; }
#header-usage-text { color: var(--fg); white-space: nowrap; flex-shrink: 0; }
.header-usage .header-bar { flex: 1; min-width: 60px; height: 7px; max-width: none; }

#main-row { display: flex; flex: 1; min-height: 0; }
#workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.pane.active { display: flex; }

#gui { padding: 0; }
#gui-tabs {
  display: flex; gap: 4px; padding: 8px 12px 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--bar);
}
#gui-panels { flex: 1; overflow-y: auto; padding: 12px; }
#gui-panels > .tab-panel { display: none; }
#gui-panels > .tab-panel.active { display: block; }
#admin-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--bar);
}
#admin-panels > .tab-panel { display: none; }
#admin-panels > .tab-panel.active { display: block; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.form { max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.form h3 { margin: 16px 0 4px; font-size: 13px; color: var(--dim); font-weight: normal; }
.form h3:first-child { margin-top: 0; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--dim); }
.form input, .form select, #mkdir-name {
  background: var(--input-bg); border: 1px solid var(--bar); color: var(--fg);
  font: inherit; padding: 6px 8px;
}
.form button, .btn-file, #cloud-mkdir, #cloud-up {
  background: var(--input-bg); border: 1px solid var(--bar); color: var(--ok);
  font: inherit; padding: 8px 12px; cursor: pointer; align-self: flex-start;
}
.btn-file { display: inline-block; }
.form button:hover, .btn-file:hover { border-color: var(--ok); }
.pw-row { display: none; }
.pw-row.show { display: flex; }
.expires-custom.hidden { display: none; }
.hint { margin: 0 0 8px; font-size: 11px; color: var(--dim); line-height: 1.4; }
.share-uploads { margin-top: 20px; max-width: 520px; }
.share-uploads h3 { margin: 0 0 4px; font-size: 13px; color: var(--dim); font-weight: normal; }

#share-page { max-width: 420px; padding: 16px; }
.share-meta { white-space: pre-wrap; margin-bottom: 12px; font-size: 14px; }
.share-meta.err { color: var(--err); }
.share-code { margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg2); }
.share-code.hidden { display: none; }
.share-code-label { display: block; font-size: 12px; color: var(--dim); margin-bottom: 6px; }
.share-code-text { display: block; font: 13px/1.5 ui-monospace, monospace; word-break: break-all; margin-bottom: 8px; }
.share-code-text.copied { color: var(--ok); }
.result code { font: 12px ui-monospace, monospace; }
.result .inline-copy { margin-left: 6px; font-size: 11px; }
.share-code .hint { margin: 8px 0 0; font-size: 12px; }
#layout.share-only { height: 100vh; display: flex; flex-direction: column; }
#layout.share-only #share-page { flex: 1; }

.result { margin-top: 12px; font-size: 13px; white-space: pre-wrap; word-break: break-all; }
.result a { word-break: break-all; }

#cloud-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px;
}
.cloud-act {
  display: inline-flex; align-items: stretch;
}
.cloud-act .btn-file,
.cloud-act #cloud-zip {
  background: var(--input-bg); border: 1px solid var(--bar); font: inherit;
  font-size: 12px; padding: 6px 10px; cursor: pointer; line-height: 1.2;
}
.cloud-act .btn-file {
  color: var(--ok); border-right: none;
}
.cloud-act #cloud-zip {
  color: var(--dim); min-width: 3.5em;
}
.cloud-act .btn-file:hover,
.cloud-act #cloud-zip:hover {
  border-color: var(--ok); color: var(--ok);
}
.cloud-act #cloud-zip:hover { background: var(--panel); }
#cloud-path { color: var(--ok); min-width: 4em; }
.cloud-sort-label {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dim); margin-left: auto;
}
.cloud-sort-label select {
  background: var(--bg); border: 1px solid var(--bar); color: var(--fg);
  font: inherit; font-size: 12px; padding: 4px 6px; cursor: pointer;
}
.doc-panel {
  max-width: 560px; padding: 16px 18px; border: 1px solid var(--bar);
  background: var(--input-bg);
}
.doc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--bar);
}
.doc-head.hidden { display: none; }
.doc-badge { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.doc-date { font-size: 12px; color: var(--ok); }
.doc-body, .about-body, .about-footer { max-width: 100%; font-size: 13px; line-height: 1.65; }
.doc-body h1, .about-body h1 { margin: 0 0 10px; font-size: 18px; font-weight: normal; color: var(--ok); }
.doc-body h2, .about-body h2 { margin: 22px 0 8px; font-size: 12px; font-weight: normal; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.doc-body h3, .about-body h3 { margin: 16px 0 6px; font-size: 13px; font-weight: normal; color: var(--dim); }
.doc-body p, .about-body p { margin: 0 0 10px; color: var(--fg); }
.doc-body ul, .doc-body ol, .about-body ul { margin: 0 0 10px; padding-left: 1.4em; }
.doc-body li, .about-body li { margin-bottom: 6px; }
.doc-body ol li::marker { color: var(--dim); }
.doc-body a, .about-body a { color: var(--link); }
.doc-body code, .about-body code { font-size: 12px; padding: 1px 4px; background: var(--bg); border: 1px solid var(--bar); }
.about-footer { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--bar); }
.notice-list .notice-item { max-width: 560px; margin-bottom: 20px; padding: 14px 16px; border: 1px solid var(--bar); background: var(--input-bg); }
.notice-list .notice-item:last-child { margin-bottom: 0; }
.notice-list .notice-title { margin: 0 0 4px; font-size: 16px; font-weight: normal; color: var(--ok); }
.notice-list .notice-date { margin: 0 0 12px; font-size: 11px; color: var(--dim); letter-spacing: 0.03em; }
.notice-list .notice-body { font-size: 13px; line-height: 1.65; }
.notice-draft { color: var(--warn, #c90); font-size: 11px; }
.notice-form { max-width: 560px; }
.md-field { display: flex; flex-direction: column; gap: 6px; }
.md-field-label { font-size: 12px; color: var(--dim); }
.md-editor {
  border: 1px solid var(--bar); background: var(--bg);
}
.md-editor textarea {
  display: block; width: 100%; min-height: 16em; padding: 12px 14px; margin: 0;
  border: 0; background: transparent; color: var(--fg);
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size: 12px; line-height: 1.55; resize: vertical; box-sizing: border-box;
}
.md-editor textarea:focus { outline: none; }
.md-editor:focus-within { border-color: var(--ok); }
.about-status { margin-bottom: 8px; font-size: 12px; }
.about-hash { margin: 0; font-size: 11px; }
.list { border: 1px solid var(--bar); max-height: 320px; overflow-y: auto; }
.list .row {
  display: flex; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--bar);
  cursor: default; font-size: 13px;
}
.list .row:last-child { border-bottom: none; }
.list .row.dir .name.dir-name { cursor: pointer; color: var(--ok); }
.list .row:hover { background: var(--panel); }
.list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.list .meta { color: var(--dim); font-size: 12px; }
.list .acts button {
  background: none; border: none; color: var(--link); cursor: pointer; font: inherit; padding: 0 4px;
}

#crypto-panel {
  width: 42%; max-width: 560px; min-width: 240px;
  border-left: 1px solid var(--bar);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.crypto-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--bar); font-size: 12px; flex-shrink: 0;
}
.crypto-head code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crypto-head button {
  background: none; border: 1px solid var(--bar); color: var(--fg);
  font: inherit; padding: 2px 8px; cursor: pointer;
}
#crypto-src {
  flex: 1; overflow: auto; margin: 0; padding: 8px 10px;
  font-size: 11px; line-height: 1.35; color: var(--dim); white-space: pre;
}

#term.pane.active {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
#term {
  max-width: none; margin: 0; padding: 12px 16px 8px;
}
#out {
  flex: 1; overflow-y: auto; white-space: pre-wrap; word-break: break-all;
  padding-bottom: 8px;
}
#out .dim { color: var(--dim); }
#out .ok { color: var(--ok); }
#out .err { color: var(--err); }
#out .link { color: var(--link); }
#out a { color: var(--link); }
.line {
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--bar); padding-top: 8px; flex-shrink: 0;
}
.prompt { color: var(--prompt); user-select: none; flex-shrink: 0; }
#in {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--fg); font: inherit; caret-color: var(--prompt);
}
#in::placeholder { color: var(--dim); }

body[data-page="admin"] #term {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  max-width: none; margin: 0; padding: 12px 16px 8px; height: auto;
}
body[data-page="admin"] #layout { height: 100vh; }
body[data-page="admin"] #main-row { flex: 1; min-height: 0; }
body[data-page="admin"] #workspace { flex: 1; }
body[data-page="admin"] #form-admin-auth { margin-bottom: 8px; }
body[data-page="admin"] .quota-edit { display: flex; gap: 4px; align-items: center; }
body[data-page="admin"] .quota-edit input { width: 7em; padding: 2px 4px; font-size: 12px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.card { background: var(--panel); border: 1px solid var(--bar); padding: 10px; }
.card-k { font-size: 11px; color: var(--dim); margin-bottom: 4px; }
.card-v { color: var(--ok); font-size: 15px; word-break: break-all; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.chart-box { border: 1px solid var(--bar); padding: 8px; min-height: 140px; }
.chart-box h4 { margin: 0 0 8px; font-size: 12px; color: var(--dim); font-weight: normal; }
.chart { min-height: 100px; }
.bar-row { display: flex; align-items: flex-end; gap: 6px; margin-bottom: 4px; font-size: 11px; }
.bar-row.horiz { align-items: center; }
.bar-label { width: 72px; flex-shrink: 0; color: var(--dim); }
.bar-v { flex: 1; height: 48px; background: var(--input-bg); display: flex; align-items: flex-end; }
.bar-h { flex: 1; height: 10px; background: var(--input-bg); }
.bar-fill { background: var(--ok); width: 100%; min-height: 2px; transition: width .2s, height .2s; }
.bar-h .bar-fill { height: 100%; }
.bar-val { width: 2.5em; text-align: right; color: var(--dim); }

.quota-bar { flex: 1; max-width: 120px; height: 6px; background: var(--input-bg); }
.quota-bar.wide { max-width: none; width: 100%; height: 8px; border-radius: 2px; }
.quota-fill { height: 100%; background: var(--link); max-width: 100%; transition: width .2s; border-radius: 2px; }
.quota-fill.warn { background: var(--err); }
.quota-fill.unlimited { background: var(--ok); opacity: 0.45; }

.usage-panel { max-width: 420px; margin-top: 16px; }
.session-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; max-width: 420px; }
.session-bar.hidden { display: none; }
.session-bar .dim { flex: 1; font-size: 13px; }
.account-session { max-width: 420px; }
.account-session.hidden { display: none; }
.account-guest.hidden { display: none; }
.account-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; margin-bottom: 16px; border: 1px solid var(--bar); background: var(--bar);
}
.account-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.account-email { font-size: 14px; color: var(--ok); overflow: hidden; text-overflow: ellipsis; }
.account-role { font-size: 11px; }
.account-logout {
  flex-shrink: 0; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--dim); background: transparent; color: var(--fg);
}
.account-logout:hover { border-color: var(--fg); }
.account-danger {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bar);
}
.account-profile { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--bar); }
.account-profile.hidden { display: none; }
.account-danger h3 { margin: 0 0 6px; font-size: 13px; font-weight: normal; color: var(--err, #c44); }
.btn-danger {
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--err, #c44); background: transparent; color: var(--err, #c44);
}
.btn-danger:hover { background: var(--err, #c44); color: var(--bg, #111); }
.usage-panel h3 { margin: 0 0 8px; font-size: 13px; color: var(--dim); font-weight: normal; }
.usage-email { font-size: 12px; margin-bottom: 12px; }
.usage-meter { margin-bottom: 14px; }
.usage-meter-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; color: var(--dim); }
.usage-meter-head span:last-child { color: var(--fg); }

.cloud-usage {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 12px; color: var(--dim);
}
.cloud-usage .quota-bar { flex: 1; max-width: none; }
.cloud-usage .meta { color: var(--fg); white-space: nowrap; }

.cloud-share-panel {
  margin: 12px 0; padding: 12px; border: 1px solid var(--bar);
  max-width: 420px; background: var(--panel);
}
.cloud-share-panel h3 { margin: 0 0 10px; font-size: 13px; font-weight: normal; color: var(--dim); }
.cloud-share-pw.hidden { display: none; }
.cloud-preview {
  margin-top: 12px; border: 1px solid var(--bar); border-radius: 4px; overflow: hidden; max-width: 720px;
}
.cloud-preview.hidden { display: none; }
.cloud-preview-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-bottom: 1px solid var(--bar); background: var(--panel); font-size: 13px;
}
.cloud-preview-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-preview-head button {
  background: none; border: none; color: var(--dim); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px;
}
.cloud-preview-body {
  max-height: min(60vh, 480px); overflow: auto; background: var(--bg);
  display: flex; align-items: center; justify-content: center; min-height: 80px;
}
.cloud-preview-body img {
  max-width: 100%; max-height: min(60vh, 480px); display: block;
}
.cloud-preview-body iframe { width: 100%; height: min(60vh, 480px); border: none; display: block; }
.cloud-preview-body pre {
  margin: 0; padding: 10px; width: 100%; box-sizing: border-box;
  font-size: 12px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; align-self: flex-start;
}
.list .name.previewable { cursor: pointer; color: var(--link); }
.media-btn {
  background: var(--input-bg); border: 1px solid var(--bar); color: var(--fg);
  font: inherit; font-size: 12px; line-height: 1.2; padding: 5px 10px; cursor: pointer; min-width: 2.4em;
}
.media-btn:hover { border-color: var(--ok); color: var(--ok); }
.media-btn-main { color: var(--ok); border-color: var(--ok); min-width: 2.6em; font-size: 13px; }
.media-btn-close { color: var(--dim); min-width: auto; padding: 5px 12px; }
.media-btn-close:hover { color: var(--err); border-color: var(--err); }
.media-time { font-size: 11px; color: var(--dim); flex-shrink: 0; width: 2.8em; text-align: center; }
.media-seek {
  flex: 1; min-width: 80px; height: 4px; margin: 0; accent-color: var(--ok); cursor: pointer;
}
.video-player {
  border-top: 1px solid var(--bar); background: var(--panel); flex-shrink: 0;
}
.video-player.hidden { display: none; }
.video-player-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-bottom: 1px solid var(--bar); font-size: 13px;
}
.video-player-tag { color: var(--ok); flex-shrink: 0; }
.video-player-title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.video-player-stage {
  background: #000; display: flex; justify-content: center; align-items: center;
  max-height: min(42vh, 400px);
}
#video-player-el {
  display: block; width: 100%; max-height: min(42vh, 400px); background: #000; cursor: pointer;
}
.video-player-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; flex-wrap: wrap;
}
.video-player-bar .media-seek { flex: 1 1 120px; }
.audio-player {
  border-top: 1px solid var(--bar); background: var(--panel); flex-shrink: 0; padding: 8px 12px;
}
.audio-player.hidden { display: none; }
.audio-player-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.audio-player-meta {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 180px;
}
.audio-player-tag { color: var(--ok); flex-shrink: 0; font-size: 12px; }
.audio-player-title {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--fg);
}
.audio-player-controls { display: flex; gap: 4px; flex-shrink: 0; }
.audio-player-track {
  flex: 1 1 200px; display: flex; align-items: center; gap: 8px; min-width: 160px;
}
.audio-player .media-btn-close { margin-left: auto; }
#audio-player-el { display: none; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.list .row .badge { color: var(--ok); font-size: 11px; margin-left: 6px; }
.form-wide { max-width: 480px; }
.filter-row { display: block; margin-bottom: 8px; font-size: 12px; color: var(--dim); }
.filter-row input { width: 100%; max-width: 320px; margin-top: 4px; padding: 6px 8px; background: var(--input-bg); border: 1px solid var(--bar); color: var(--fg); font: inherit; }
.monitor-hint { font-size: 11px; margin-top: 12px; }

@media (max-width: 800px) {
  #main-row { flex-direction: column; }
  #crypto-panel { width: 100%; max-width: none; border-left: none; border-top: 1px solid var(--bar); height: 38vh; }
}