/* ═══════════════════════════════════════════════
   FILESHARE · styles.css
   ═══════════════════════════════════════════════ */

/* ── CSS Variables – Dark (default purple) ── */
:root {
  --bg:       #07060d;
  --bg2:      #0e0b1c;
  --bg3:      #13102a;
  --surface:  #1a1630;
  --surface2: #201c3a;
  --surface3: #272244;
  --border:   #2d2850;
  --border2:  #3c3568;
  --p1: oklch(72% .20 305);
  --p2: oklch(62% .22 305);
  --p3: oklch(52% .20 305);
  --p4: oklch(40% .16 305);
  --dim:   #6b5e88;
  --text:  #e8e0ff;
  --text2: #b8a8d8;
  --text3: #7a6a98;
  --green:  oklch(72% .16 165);
  --yellow: oklch(80% .18  88);
  --blue:   oklch(72% .14 220);
  --red:    oklch(70% .18  15);
  --sidebar-w: 240px;
  --topbar-h:  58px;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 24px rgba(0,0,0,.45);
  --tr: .18s ease;
}

/* ── Light mode ── */
body.light {
  --bg:       #f5f3ff; --bg2: #ede9ff; --bg3: #e5dff8;
  --surface:  #ffffff; --surface2: #f0eeff; --surface3: #e8e2f8;
  --border:   #d8d2f0; --border2: #c6bde8;
  --p1: oklch(52% .20 305); --p2: oklch(44% .20 305);
  --p3: oklch(36% .18 305); --p4: oklch(28% .15 305);
  --dim: #8a7ab0; --text: #1a1535; --text2: #3e3468; --text3: #6b5f90;
  --green: oklch(40% .14 165); --yellow: oklch(48% .16 88);
  --blue: oklch(40% .14 220); --red: oklch(40% .16 15);
  --shadow: 0 4px 24px rgba(60,40,120,.12);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; font-size:15px; }
body {
  min-height:100%; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
  transition:background var(--tr),color var(--tr); overflow-x:hidden;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 600px at -100px -200px,oklch(50% .20 305/.12) 0%,transparent 65%),
    radial-gradient(ellipse 500px 500px at calc(100% + 100px) 70%,oklch(46% .18 260/.07) 0%,transparent 65%);
}
body.light::before {
  background:
    radial-gradient(ellipse 900px 600px at -100px -200px,oklch(50% .20 305/.04) 0%,transparent 65%),
    radial-gradient(ellipse 500px 500px at calc(100% + 100px) 70%,oklch(46% .18 260/.03) 0%,transparent 65%);
}
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
body.light::after { opacity:.15; }
a { color:var(--p1); text-decoration:none; }
button { cursor:pointer; font-family:inherit; }

/* Icons — inherit container's font-size as 1em, so sizing is
   controlled by setting font-size on the container element. */
.icon, [data-icon] {
  display:inline-flex; align-items:center; justify-content:center;
  line-height:0; flex-shrink:0;
}
.icon svg, [data-icon] svg { width:1em; height:1em; display:block; }

/* ═══════════════ LAYOUT ════════════════════════ */
#app { display:flex; flex-direction:column; height:100vh; }

.topbar {
  height:var(--topbar-h); display:flex; align-items:center; gap:8px; padding:0 20px;
  background:oklch(from var(--bg) l c h / .85); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; flex-shrink:0;
}
.main { display:flex; flex:1; overflow:hidden; }

/* ═══════════════ TOPBAR ════════════════════════ */
.breadcrumb { display:flex; align-items:center; gap:2px; flex:1; min-width:0; overflow:hidden; }
.bc-item {
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; color:var(--text2); font-size:.82rem;
  padding:3px 8px; border-radius:var(--radius-sm); white-space:nowrap;
  transition:color var(--tr),background var(--tr);
}
.bc-item:hover { color:var(--p1); background:oklch(from var(--p3) l c h/.12); }
.bc-item.bc-root { color:var(--text3); }
.bc-item.bc-root [data-icon] { font-size:.85rem; }
.bc-sep { color:var(--text3); font-size:.75rem; padding:0 1px; user-select:none; }

.controls { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.controls-divider { width:1px; height:22px; background:var(--border2); margin:0 6px; border-radius:1px; opacity:.7; }

/* Sort group */
.sort-group {
  display:flex; align-items:center; gap:2px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:2px;
}
.sort-btn {
  background:none; border:none; color:var(--text3); font-size:.72rem; font-weight:500;
  padding:4px 8px; border-radius:4px; letter-spacing:.03em; transition:all var(--tr); white-space:nowrap;
}
.sort-btn:hover { color:var(--text2); background:var(--surface2); }
.sort-btn.active { color:var(--p1); background:oklch(from var(--p3) l c h/.15); }
.sort-arrow { font-size:.65rem; margin-left:2px; }

/* Search */
.search-wrap { position:relative; display:flex; align-items:center; }
.search-icon {
  position:absolute; left:9px; font-size:.75rem; color:var(--text3);
  pointer-events:none; opacity:.65;
}
.search-input {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:.82rem; padding:5px 10px 5px 28px; width:180px; outline:none;
  transition:border-color var(--tr),width var(--tr);
}
.search-input:focus { border-color:var(--p3); width:220px; }
.search-input::placeholder { color:var(--text3); }

/* Icon buttons (theme + admin) */
.tooltip-wrap { position:relative; display:flex; }
.tooltip-wrap::after {
  content:attr(data-tooltip); position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%); background:var(--surface3); border:1px solid var(--border2);
  color:var(--text2); font-size:.7rem; font-weight:500; padding:4px 10px; border-radius:6px;
  white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .15s; z-index:200;
  box-shadow:var(--shadow);
}
/* Right-most tooltips: anchor to the right edge so they don't clip off-screen */
.controls .tooltip-wrap:last-child::after { left:auto; right:0; transform:none; }
.controls .tooltip-wrap:nth-last-child(2)::after { left:auto; right:-10px; transform:none; }
.tooltip-wrap:hover::after { opacity:1; }

.icon-btn {
  width:34px; height:34px; border:1px solid var(--border2); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text2); font-size:.95rem;
  display:flex; align-items:center; justify-content:center; transition:all var(--tr); flex-shrink:0;
}
.icon-btn:hover {
  border-color:var(--p3); color:var(--p1); background:var(--surface2);
  transform:translateY(-1px); box-shadow:0 3px 10px oklch(from var(--p3) l c h/.25);
}
.icon-btn:active { transform:translateY(0); }
.icon-btn.admin-active {
  border-color:var(--p2); color:var(--p1); background:oklch(from var(--p3) l c h/.15);
  box-shadow:0 0 0 2px oklch(from var(--p3) l c h/.20);
}

/* ═══════════════ ADMIN TOOLBAR ════════════════ */
.admin-toolbar {
  display:none; align-items:center; gap:6px; padding:7px 20px;
  background:oklch(from var(--p4) l c h/.08);
  border-bottom:1px solid oklch(from var(--p3) l c h/.18);
  flex-wrap:wrap; flex-shrink:0;
}
body.is-admin .admin-toolbar { display:flex; }
.admin-badge {
  display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--p1);
  background:oklch(from var(--p3) l c h/.15); border:1px solid oklch(from var(--p3) l c h/.3);
  border-radius:99px; width:22px; height:22px;
}
.admin-badge-text { font-size:.7rem; font-weight:700; letter-spacing:.08em; color:var(--p1); }
.admin-spacer { flex:1; }
.admin-user-info { font-size:.72rem; color:var(--text3); }

/* ═══════════════ BUTTONS ═══════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
  border-radius:var(--radius-sm); font-size:.8rem; font-weight:500; border:1px solid transparent;
  transition:all var(--tr); white-space:nowrap; cursor:pointer;
}
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn:active:not(:disabled) { transform:scale(.97); }
.btn-primary { background:var(--p3); border-color:var(--p2); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--p2); box-shadow:0 4px 14px oklch(from var(--p3) l c h/.35); }
.btn-ghost { background:var(--surface); border-color:var(--border2); color:var(--text2); }
.btn-ghost:hover:not(:disabled) { background:var(--surface2); border-color:var(--p4); color:var(--text); }
.btn-danger { background:oklch(from var(--red) l c h/.12); border-color:oklch(from var(--red) l c h/.3); color:var(--red); }
.btn-danger:hover:not(:disabled) { background:oklch(from var(--red) l c h/.22); box-shadow:0 4px 14px oklch(from var(--red) l c h/.25); }
.btn-sm { padding:4px 10px; font-size:.75rem; }

/* ═══════════════ SIDEBAR ═══════════════════════ */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0; display:flex; flex-direction:column;
  background:oklch(from var(--bg2) l c h/.95); backdrop-filter:blur(16px);
  border-right:1px solid var(--border); overflow-y:auto;
}
.sidebar-logo {
  padding:16px 16px 12px; font-size:1rem; font-weight:700; color:var(--p1); letter-spacing:.04em;
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px;
}
.sidebar-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; border-bottom:1px solid var(--border); }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px 10px; }
.stat-label { font-size:.62rem; font-weight:600; letter-spacing:.07em; color:var(--text3); text-transform:uppercase; }
.stat-value { font-size:.95rem; font-weight:700; color:var(--text); margin-top:2px; }
.stat-full { grid-column:1/-1; }
.tree-header { padding:10px 14px 6px; font-size:.65rem; font-weight:700; letter-spacing:.09em; color:var(--text3); text-transform:uppercase; }
.tree-container { flex:1; padding:0 6px 12px; }

/* Tree items */
.ti {
  display:flex; align-items:center; gap:4px; padding:4px 6px; border-radius:var(--radius-sm);
  cursor:pointer; font-size:.8rem; color:var(--text2); transition:all var(--tr);
  user-select:none; position:relative;
}
.ti:hover { background:var(--surface2); color:var(--text); }
.ti.active { background:oklch(from var(--p3) l c h/.15); color:var(--p1); }
.ti.active::before {
  content:""; position:absolute; left:0; top:20%; bottom:20%;
  width:2px; background:var(--p2); border-radius:1px;
}
.ti-toggle { font-size:.6rem; color:var(--text3); width:14px; flex-shrink:0; }
.ti-toggle svg { transition:transform var(--tr); }
.ti-toggle.open svg { transform:rotate(90deg); }
.ti-spacer { width:14px; flex-shrink:0; }
.ti-icon { font-size:.85rem; flex-shrink:0; color:var(--dim); }
.ti-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Tree admin actions */
.ti-actions { display:none; align-items:center; gap:2px; margin-left:auto; flex-shrink:0; }
body.is-admin .ti:hover .ti-actions { display:flex; }
.ti-act {
  width:18px; height:18px; border:none; background:none; color:var(--text3);
  font-size:.65rem; border-radius:3px; display:flex; align-items:center; justify-content:center; transition:all .1s;
}
.ti-act:hover { background:oklch(from var(--p3) l c h/.18); color:var(--p1); }
.ti-act.danger:hover { background:oklch(from var(--red) l c h/.15); color:var(--red); }
.ti-children { padding-left:14px; }

/* ═══════════════ CONTENT ═══════════════════════ */
.content { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.content-body { flex:1; overflow-y:auto; padding:20px; }

/* File grid */
.file-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }

/* Cards */
.card {
  position:relative; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:14px 12px 12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:all var(--tr); text-align:center; overflow:hidden;
}
.card::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg,transparent 60%,oklch(from var(--p3) l c h/.04));
}
.card:hover {
  border-color:var(--p4); background:var(--surface2); transform:translateY(-2px);
  box-shadow:var(--shadow),0 0 0 1px oklch(from var(--p3) l c h/.12);
}
.card:active { transform:translateY(0); }
.card-icon { font-size:2rem; line-height:1; }
.card-name {
  font-size:.78rem; font-weight:500; color:var(--text2); word-break:break-word;
  width:100%; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.card:hover .card-name { color:var(--text); }
.card-meta { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; font-size:.68rem; color:var(--text3); }
.loc-badge {
  display:block; width:100%; text-align:center; font-size:.62rem; color:var(--text3);
  opacity:.75; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Card action overlay — download is public, the rest are admin-only */
.card-overlay {
  position:absolute; top:5px; right:5px; display:flex; gap:3px;
  opacity:0; transition:opacity var(--tr); z-index:2;
}
.card:hover .card-overlay { opacity:1; }
.card-act {
  width:24px; height:24px; border:1px solid var(--border2); border-radius:5px;
  background:var(--surface); color:var(--text3); font-size:.7rem;
  display:flex; align-items:center; justify-content:center; transition:all .1s;
}
.card-act.admin-only { display:none; }
body.is-admin .card-act.admin-only { display:flex; }
.card-act:hover { border-color:var(--p3); color:var(--p1); background:oklch(from var(--p3) l c h/.12); }
.card-act.danger:hover { border-color:var(--red); color:var(--red); background:oklch(from var(--red) l c h/.1); }

/* Empty state */
.empty-state { text-align:center; padding:60px 20px; color:var(--text3); }
.empty-icon { font-size:3rem; margin-bottom:12px; opacity:.5; }
.empty-text { font-size:.9rem; }
.loading { text-align:center; padding:40px; color:var(--text3); font-size:.85rem; }

/* ═══════════════ MODALS ═══════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:oklch(from var(--bg) l c h/.82);
  backdrop-filter:blur(8px); z-index:300; display:flex; align-items:center;
  justify-content:center; padding:20px; animation:fadeIn .15s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.modal {
  background:var(--surface); border:1px solid var(--border2); border-radius:16px;
  width:100%; max-width:380px;
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px oklch(from var(--p3) l c h/.1);
  animation:slideUp .2s ease; overflow:hidden;
}
.modal-lg    { max-width:520px; }
.modal-share { max-width:460px; }
@keyframes slideUp {
  from{opacity:0;transform:translateY(14px) scale(.98)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
.modal-header { padding:24px 24px 16px; border-bottom:1px solid var(--border); text-align:center; }
.modal-icon { font-size:2rem; margin-bottom:8px; }
.modal-title { font-size:1.05rem; font-weight:700; color:var(--text); }
.modal-subtitle { font-size:.8rem; color:var(--text3); margin-top:4px; }
.modal-subtitle code {
  background:var(--surface2); border:1px solid var(--border); border-radius:4px;
  padding:1px 5px; font-size:.75rem; color:var(--p1);
}
.modal-body { padding:20px 24px; display:flex; flex-direction:column; gap:14px; max-height:65vh; overflow-y:auto; }
.modal-actions { padding:14px 24px 20px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--border); }

/* Forms */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:.72rem; font-weight:600; letter-spacing:.04em; color:var(--text3); text-transform:uppercase; }
.form-optional { font-weight:400; text-transform:none; letter-spacing:0; }
.form-input {
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text); font-size:.85rem; font-family:inherit; padding:8px 12px; outline:none; width:100%;
  transition:border-color var(--tr),box-shadow var(--tr);
}
.form-input:focus { border-color:var(--p3); box-shadow:0 0 0 3px oklch(from var(--p3) l c h/.18); }
.form-input::placeholder { color:var(--text3); }
.form-textarea { resize:vertical; min-height:100px; }
.form-error {
  background:oklch(from var(--red) l c h/.1); border:1px solid oklch(from var(--red) l c h/.25);
  border-radius:var(--radius-sm); color:var(--red); font-size:.8rem; padding:8px 12px;
}
.form-hint { font-size:.73rem; color:var(--text3); margin-top:4px; }

/* Duration picker */
.duration-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.duration-btn {
  background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm);
  color:var(--text2); font-size:.72rem; font-weight:500; padding:7px 4px;
  transition:all var(--tr); text-align:center; cursor:pointer;
}
.duration-btn:hover { border-color:var(--p4); color:var(--text); }
.duration-btn.active { background:oklch(from var(--p3) l c h/.18); border-color:var(--p3); color:var(--p1); }

/* Share link */
.share-link-wrap { display:flex; gap:6px; }
.share-link-wrap .form-input { flex:1; font-size:.75rem; }

/* Active shares list */
.share-item { background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; display:flex; flex-direction:column; gap:4px; }
.share-item-path { font-size:.8rem; font-weight:500; color:var(--text); }
.share-item-meta { font-size:.72rem; color:var(--text3); }
.share-item-actions { display:flex; gap:6px; margin-top:4px; }
.empty-state-sm { text-align:center; color:var(--text3); font-size:.85rem; padding:20px; }

/* ═══════════════ UPLOAD ════════════════════════ */
.upload-zone {
  border:2px dashed var(--border2); border-radius:var(--radius); padding:28px 20px;
  text-align:center; color:var(--text3); font-size:.85rem; cursor:pointer;
  transition:all var(--tr); display:flex; flex-direction:column; align-items:center; gap:6px;
}
.upload-zone:hover,.upload-zone.drag-over { border-color:var(--p3); background:oklch(from var(--p3) l c h/.06); color:var(--text2); }
.upload-icon { font-size:2rem; opacity:.6; }
.upload-hint { font-size:.72rem; color:var(--text3); }
.upload-item { padding:10px 0; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:5px; }
.upload-item:last-child { border-bottom:none; }
.upload-name { font-size:.82rem; color:var(--text2); }
.upload-status { font-size:.72rem; color:var(--text3); }
.upload-status.success { color:var(--green); }
.upload-status.error   { color:var(--red); }
.upload-bar { height:3px; background:var(--border); border-radius:2px; overflow:hidden; }
.upload-bar-fill { height:100%; background:linear-gradient(90deg,var(--p3),var(--p1)); border-radius:2px; transition:width .2s; }

/* ═══════════════ ADMIN DROPDOWN ════════════════ */
.admin-drop {
  position:fixed; background:var(--surface); border:1px solid var(--border2);
  border-radius:var(--radius); min-width:200px; box-shadow:var(--shadow); z-index:400;
  overflow:hidden; animation:slideUp .15s ease;
}
.admin-drop-header {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px 8px; font-size:.8rem; font-weight:700; color:var(--p1);
  border-bottom:1px solid var(--border); letter-spacing:.02em;
}
.role-tag {
  margin-left:auto; font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--p1); background:oklch(from var(--p3) l c h/.15); border:1px solid oklch(from var(--p3) l c h/.3);
  border-radius:99px; padding:2px 7px;
}
.admin-drop-item {
  display:flex; align-items:center; gap:9px; width:100%; padding:9px 14px; background:none; border:none;
  color:var(--text2); font-size:.82rem; font-family:inherit; text-align:left; cursor:pointer; transition:all .1s;
}
.admin-drop-item:hover { background:var(--surface2); color:var(--text); }
.admin-drop-item.danger:hover { color:var(--red); background:oklch(from var(--red) l c h/.08); }
.admin-drop-sep { height:1px; background:var(--border); margin:2px 0; }

/* ═══════════════ AUTH GATE ═════════════════════
   Full-page login screen — not a translucent modal over visible
   content. #app is hidden entirely while the gate is active, so
   there's nothing to ghost/scroll-reveal behind it. */
#authGate {
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center; padding:20px;
  transition:opacity .38s ease;
}
#authGate.fade-out { opacity:0; pointer-events:none; }
body.gate-active { overflow:hidden; }
body.gate-active #app { display:none; }
.auth-box { animation:slideUp .3s ease; }
.gate-actions { padding:14px 24px 24px; }
.gate-submit { width:100%; justify-content:center; }

/* ═══════════════ CUSTOM CHECKBOX (share subfolder toggle) ═══
   Sized like the small icon buttons, animated purple checkmark. */
.switch-row { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.83rem; color:var(--text2); user-select:none; }
.switch-input { position:absolute; opacity:0; width:0; height:0; }
.switch {
  position:relative; width:22px; height:22px; flex-shrink:0;
  background:var(--surface2); border:1.5px solid var(--border2); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--tr), border-color var(--tr);
}
.switch svg {
  width:14px; height:14px; fill:none; stroke:var(--p1); stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:20; stroke-dashoffset:20;
  transition:stroke-dashoffset .25s cubic-bezier(.4,0,.2,1);
}
.switch-input:checked + .switch { background:oklch(from var(--p3) l c h/.18); border-color:var(--p2); }
.switch-input:checked + .switch svg { stroke-dashoffset:0; }
.switch-input:focus-visible + .switch { box-shadow:0 0 0 3px oklch(from var(--p3) l c h/.25); }
.switch-input:hover + .switch { border-color:var(--p4); }

/* ═══════════════ TOASTS ════════════════════════ */
#toastContainer { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:8px; z-index:500; pointer-events:none; }
.toast { padding:10px 16px; border-radius:var(--radius-sm); font-size:.82rem; font-weight:500; max-width:320px; opacity:0; transform:translateX(20px); transition:all .25s ease; pointer-events:auto; border:1px solid transparent; }
.toast.toast-show { opacity:1; transform:translateX(0); }
.toast-success { background:oklch(from var(--green) l c h/.12); border-color:oklch(from var(--green) l c h/.3); color:var(--green); }
.toast-error   { background:oklch(from var(--red)   l c h/.12); border-color:oklch(from var(--red)   l c h/.3); color:var(--red); }
.toast-info    { background:var(--surface2); border-color:var(--border2); color:var(--text2); }

/* ═══════════════ SHARE MODE PAGE ═══════════════ */
.share-page { min-height:100vh; display:flex; flex-direction:column; }
.share-header { padding:20px 32px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--border); background:oklch(from var(--bg2) l c h/.9); backdrop-filter:blur(16px); }
.share-logo { display:flex; align-items:center; gap:8px; font-size:1.1rem; font-weight:800; color:var(--p1); letter-spacing:.04em; }
.share-badge { font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); background:var(--surface); border:1px solid var(--border2); border-radius:99px; padding:3px 10px; }
.share-content { flex:1; padding:32px; max-width:960px; margin:0 auto; width:100%; }
.share-dir-header { margin-bottom:20px; }
.share-dir-header h2 { font-size:1.2rem; font-weight:700; color:var(--text); }
.share-expiry { font-size:.78rem; color:var(--text3); margin-top:4px; }
.share-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; }
.share-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 10px; cursor:pointer; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; transition:all var(--tr); }
.share-card:hover { border-color:var(--p4); background:var(--surface2); transform:translateY(-2px); }
.share-card.locked { cursor:not-allowed; opacity:.45; }
.share-card.locked:hover { border-color:var(--border); background:var(--surface); transform:none; }
.share-error { text-align:center; padding:60px 20px; color:var(--text3); }
.share-error h2 { font-size:1.4rem; color:var(--text2); margin:12px 0 8px; }
.share-error-icon { font-size:3rem; opacity:.6; }
.share-file-dl { text-align:center; padding:60px 20px; display:flex; flex-direction:column; align-items:center; gap:16px; color:var(--text2); }

/* ═══════════════ FOOTER ════════════════════════ */
.footer { padding:8px 20px; font-size:.68rem; color:var(--text3); border-top:1px solid var(--border); background:oklch(from var(--bg2) l c h/.7); display:flex; align-items:center; gap:8px; flex-shrink:0; }
.footer-dot { opacity:.4; }

/* ═══════════════ SCROLLBAR ═════════════════════ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--p4); }

/* ═══════════════ RESPONSIVE ════════════════════ */
@media(max-width:768px) {
  :root { --sidebar-w:200px; }
  .search-input { width:140px; }
  .search-input:focus { width:160px; }
  .sort-btn { padding:4px 6px; font-size:.68rem; }
  .file-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
}
@media(max-width:540px) {
  .sidebar { display:none; }
  .topbar { padding:0 12px; gap:6px; }
  .content-body { padding:12px; }
  .search-input { width:120px; }
}