*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#060a12;
  --bg-soft:#0d1422;
  --bg-card:rgba(17,27,44,0.72);
  --line:rgba(122,164,255,0.22);
  --text:#e8eefc;
  --muted:#9cb0d0;
  --accent:#47d8ff;
  --accent-2:#8a7dff;
  --success:#3fb950;
  --danger:#f85149;
  --warn:#d29922;
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:13px;
  /* BUG FIX: Removed overflow:hidden — it was blocking all scroll on mobile.
     The dashboard layout uses position:fixed+flex, which handles its own overflow. */
  overflow:hidden; /* kept for login screen; dash overrides via its own scroll */
}

/* Subtle scanline — very low opacity so it doesn't grey things out */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.008) 3px,rgba(0,0,0,.008) 4px);
}

/* ─── KEYFRAMES ──────────────────────────────────── */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes tin{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes tout{from{opacity:1;transform:none}to{opacity:0;transform:translateX(8px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rowEnter{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes glowPulse{0%,100%{opacity:.18;transform:scale(1)}50%{opacity:.28;transform:scale(1.08)}}
@keyframes loginGlow{0%,100%{opacity:.06}50%{opacity:.12}}
@keyframes statIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ─── LOGIN ──────────────────────────────────────── */
#login{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(21,42,84,.5) 0%,rgba(42,30,84,.5) 100%),var(--bg);
  transition:opacity .35s ease,transform .35s ease;
  animation:fadeIn .4s ease;
}
#login.hidden{opacity:0;pointer-events:none;transform:translateY(-12px)}

/* BUG FIX: Added overflow-y:auto + padding so the login card can scroll
   on very short viewports (e.g. 600px landscape phones) */
.l-wrap{width:360px;max-height:100vh;overflow-y:auto;padding:20px 0}
.l-logo{
  font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.l-logo::before{
  content:'';width:20px;height:1px;
  background:var(--accent);box-shadow:0 0 14px var(--accent);display:block;
}
.l-desc{font-size:14px;color:var(--muted);margin-bottom:28px;line-height:1.5}
.l-card{
  background:var(--bg-card);border:1px solid var(--line);border-radius:14px;
  padding:28px;position:relative;overflow:hidden;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(71,216,255,.04);
  animation:slideDown .4s ease;
}
.l-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5;
}
/* Subtle glow shimmer on card */
.l-card::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(71,216,255,.07) 0%,transparent 60%);
}
.l-title{font-size:20px;font-weight:600;margin-bottom:6px}
.l-sub{color:var(--muted);font-size:13px;margin-bottom:22px}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{
  font-size:11px;color:var(--muted);letter-spacing:.06em;
  text-transform:uppercase;font-weight:500;
}
.field input{
  background:rgba(13,20,34,.6);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font-family:inherit;font-size:14px;padding:10px 13px;
  outline:none;transition:border-color .2s,box-shadow .2s,background .2s;
}
.field input:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(71,216,255,.1);
  background:rgba(13,20,34,.8);
}
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 30px #0d1422 inset !important;
  -webkit-text-fill-color:var(--text) !important;
  border-color:var(--accent);
  caret-color:var(--text);
}

.l-err{
  display:none;
  background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.3);
  border-radius:8px;color:#ff9999;font-size:12px;padding:10px 13px;margin-bottom:14px;
  animation:slideDown .2s ease;
}
.l-err.show{display:block}

.l-btn{
  width:100%;
  background:linear-gradient(135deg,var(--accent) 0%,#2dd4e8 100%);
  border:none;border-radius:8px;color:#060a12;font-weight:700;font-size:14px;
  padding:12px;cursor:pointer;transition:all .2s;
  box-shadow:0 4px 16px rgba(71,216,255,.25);
  letter-spacing:.02em;
}
.l-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(71,216,255,.4)}
.l-btn:active{transform:translateY(0);box-shadow:0 2px 8px rgba(71,216,255,.2)}
.l-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.l-rate{color:var(--warn);font-size:11px;text-align:center;margin-top:12px;min-height:14px}

/* ─── DASHBOARD ──────────────────────────────────── */
/* BUG FIX: Added overflow:hidden so .main's flex:1 + overflow:auto correctly
   fills remaining space. Without this the flex child can't scroll on mobile. */
#dash{display:none;position:fixed;inset:0;flex-direction:column;overflow:hidden}
#dash.show{display:flex;animation:fadeIn .3s ease}

.topbar{
  /* BUG FIX: Changed height:56px to min-height:56px so wrapped mobile content
     doesn't overflow and get clipped, which was stealing space from .main */
  min-height:56px;
  background:rgba(10,15,28,0.92);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 18px;gap:12px;flex-shrink:0;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  position:relative;z-index:10;
}
/* Top accent line on topbar */
.topbar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 30%,var(--accent-2) 70%,transparent 100%);
  opacity:.4;
}

.tb-home{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:7px;
  background:transparent;border:1px solid var(--line);
  color:var(--muted);cursor:pointer;transition:all .2s;text-decoration:none;
}
.tb-home:hover{border-color:var(--accent);color:var(--accent);background:rgba(71,216,255,.08);transform:scale(1.05)}
.tb-home svg{width:16px;height:16px}

.tb-brand{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
.pip{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px var(--accent),0 0 20px rgba(71,216,255,.3);
  animation:blink 2.4s ease-in-out infinite;
}

.tb-slash{color:var(--line)}
.tb-path{font-size:12px;color:var(--muted)}
.tb-right{display:flex;align-items:center;gap:8px;margin-left:auto}

.sep{width:1px;height:18px;background:var(--line);flex-shrink:0}

.btn{
  background:transparent;border:1px solid var(--line);border-radius:7px;
  color:var(--muted);font-family:inherit;font-size:12px;padding:6px 12px;
  cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:all .18s cubic-bezier(.4,0,.2,1);white-space:nowrap;
}
.btn:hover{
  border-color:rgba(71,216,255,.5);color:var(--text);
  background:rgba(71,216,255,.07);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:linear-gradient(135deg,var(--accent) 0%,#2dd4e8 100%);
  border:none;color:#060a12;font-weight:700;
  box-shadow:0 2px 10px rgba(71,216,255,.25);
}
.btn.primary:hover{
  box-shadow:0 6px 18px rgba(71,216,255,.35);
  color:#060a12;border:none;background:linear-gradient(135deg,#5de2ff 0%,#38dced 100%);
}
.btn.danger:hover{border-color:var(--danger);color:var(--danger);background:rgba(248,81,73,.08)}
.btn.active{border-color:var(--accent);color:var(--accent);background:rgba(71,216,255,.08)}
.btn svg,.act svg{width:14px;height:14px;flex-shrink:0}

/* Refresh button spin animation */
.btn.spinning svg{animation:spin .7s linear infinite}

/* ─── MAIN CONTENT ───────────────────────────────── */
/* BUG FIX: overflow:hidden so .main doesn't scroll as a whole block —
   only .file-panel scrolls internally. flex layout distributes space properly. */
.main{flex:1;overflow:hidden;padding:18px;display:flex;flex-direction:column;gap:14px;min-height:0}

/* ─── STATS ──────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stat{
  background:var(--bg-card);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;transition:border-color .2s,box-shadow .2s;
  animation:slideDown .4s ease both;
}
.stat:nth-child(1){animation-delay:.05s}
.stat:nth-child(2){animation-delay:.10s}
.stat:nth-child(3){animation-delay:.15s}
.stat:nth-child(4){animation-delay:.20s}
.stat:hover{border-color:rgba(71,216,255,.35);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.stat-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;font-weight:500}
.stat-val{font-size:22px;font-weight:700;line-height:1}
.stat-val.sm{font-size:13px;padding-top:4px;font-weight:600}
.stat-val.cyan{color:var(--accent)}
.stat-val.green{color:var(--success)}
.stat-val.blue{color:var(--accent-2)}
.stat-sub{color:var(--muted);font-size:11px;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─── DROP ZONE ──────────────────────────────────── */
.drop{
  background:var(--bg-card);
  border:1.5px dashed rgba(122,164,255,.3);
  border-radius:10px;
  padding:28px;text-align:center;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  display:none;
  position:relative;overflow:hidden;
}
.drop.show{display:block}
.drop::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(71,216,255,.04) 0%,transparent 70%);
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.drop:hover,.drop.over{
  border-color:var(--accent);background:rgba(71,216,255,.06);
  box-shadow:0 0 30px rgba(71,216,255,.08),inset 0 0 30px rgba(71,216,255,.03);
}
.drop:hover::before,.drop.over::before{opacity:1}
.drop-icon{
  width:30px;height:30px;color:var(--muted);margin:0 auto 12px;
  transition:color .25s,transform .25s;
}
.drop:hover .drop-icon,.drop.over .drop-icon{
  color:var(--accent);transform:translateY(-3px) scale(1.05);
}
.drop p{color:var(--muted);font-size:13px;line-height:1.7;margin:0}
.drop em{color:var(--accent);font-style:normal;font-weight:600}

/* ─── PROGRESS ───────────────────────────────────── */
.prog-list{display:flex;flex-direction:column;gap:8px}
.prog{
  background:var(--bg-card);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;animation:tin .2s ease;
  transition:border-color .3s,opacity .3s,transform .3s;
}
.prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.prog-name{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.prog-meta{font-size:11px;color:var(--muted);display:flex;gap:12px;align-items:center}
.prog-pct{color:var(--accent);font-size:12px;font-weight:600;flex-shrink:0}
.prog-bar{height:3px;background:rgba(71,216,255,.12);border-radius:2px;overflow:hidden;margin-bottom:5px}
.prog-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),#2dd4e8,var(--accent-2));
  background-size:200% 100%;
  border-radius:2px;
  transition:width .12s linear;
  animation:shimmer 2s linear infinite;
}
.prog-chunks{font-size:11px;color:var(--muted)}

/* ─── TOOLBAR ────────────────────────────────────── */
.toolbar{
  background:var(--bg-card);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;display:flex;align-items:center;gap:10px;
}
.srch{flex:1;display:flex;align-items:center;gap:8px}
.srch svg{color:var(--muted);width:14px;height:14px;flex-shrink:0}
.srch input{
  background:transparent;border:none;outline:none;
  color:var(--text);font-family:inherit;font-size:13px;width:100%;
  caret-color:var(--accent);
}
.srch input::placeholder{color:rgba(156,176,208,.5)}

.sort-label{color:var(--muted);font-size:12px;white-space:nowrap;flex-shrink:0}
.sort-sel{
  background:rgba(13,20,34,.6);border:1px solid var(--line);border-radius:7px;
  color:var(--text);font-family:inherit;font-size:12px;padding:5px 8px;
  outline:none;cursor:pointer;transition:border-color .15s;
  appearance:none;-webkit-appearance:none;
  padding-right:22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239cb0d0'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 7px center;
}
.sort-sel:focus{border-color:var(--accent)}
.sort-sel option{background:#0d1422;color:var(--text)}
.fcount{font-size:11px;color:var(--muted);white-space:nowrap;flex-shrink:0}

/* ─── FILE TABLE ─────────────────────────────────── */
.file-panel{
  background:var(--bg-card);border:1px solid var(--line);border-radius:10px;
  /* BUG FIX: flex:1 + min-height:0 lets it fill remaining space;
     min-height:238px guarantees room for ~5 file rows even on tiny screens.
     overflow-x:auto was already fixed in previous pass. */
  overflow-x:auto;overflow-y:auto;flex:1;min-height:238px;
  display:flex;flex-direction:column;
}
.file-panel table{width:100%;border-collapse:collapse}
.file-panel thead{
  position:sticky;top:0;z-index:1;
  background:rgba(10,16,30,0.95);
  backdrop-filter:blur(8px);
}
.file-panel th{
  padding:10px 14px;text-align:left;color:var(--muted);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.file-panel td{
  padding:10px 14px;border-bottom:1px solid rgba(122,164,255,.07);
  vertical-align:middle;
}
.file-panel tbody tr{
  transition:background .15s;
}
.file-panel tbody tr:hover{background:rgba(71,216,255,.04)}
.file-panel tbody tr:last-child td{border-bottom:none}

/* Row entrance animation */
.row-enter{
  animation:rowEnter .3s ease both;
}

.fname{display:flex;align-items:center;gap:10px}
.ficon{
  width:32px;height:32px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:.04em;flex-shrink:0;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .15s;
}
.file-panel tbody tr:hover .ficon{transform:scale(1.06)}
.fi-img{background:rgba(71,216,255,.15);color:var(--accent)}
.fi-vid{background:rgba(138,125,255,.15);color:var(--accent-2)}
.fi-aud{background:rgba(63,185,80,.12);color:var(--success)}
.fi-arc{background:rgba(210,153,34,.12);color:var(--warn)}
.fi-cod{background:rgba(138,125,255,.1);color:#b8aeff}
.fi-doc{background:rgba(71,216,255,.08);color:#8cd4ff}
.fi-bin{background:rgba(255,255,255,.06);color:var(--muted)}

.fname-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.fname-n{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.fname-e{font-size:11px;color:var(--muted);opacity:.8}

.szbar{display:flex;flex-direction:column;gap:4px;min-width:72px}
.szbar span{font-size:12px;color:var(--text)}
.sztrack{height:3px;background:rgba(71,216,255,.1);border-radius:2px;overflow:hidden}
.szfill{height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));border-radius:2px;transition:width .4s ease}

.muted{color:var(--muted);font-size:12px}

.acts{display:flex;gap:5px;justify-content:flex-end;flex-wrap:nowrap}
.act{
  background:transparent;border:1px solid var(--line);border-radius:6px;
  color:var(--muted);font-family:inherit;font-size:11px;padding:5px 9px;
  cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;
}
.act:hover{
  border-color:rgba(71,216,255,.5);color:var(--text);
  background:rgba(71,216,255,.07);transform:translateY(-1px);
}
.act:active{transform:translateY(0)}
.act.cp:hover{border-color:var(--accent);color:var(--accent)}
.act.rn:hover{border-color:var(--accent-2);color:var(--accent-2)}
.act.rm:hover{border-color:var(--danger);color:var(--danger);background:rgba(248,81,73,.08)}
.act.dl:hover{border-color:var(--success);color:var(--success);background:rgba(63,185,80,.07)}
.act.sh:hover{border-color:var(--accent);color:var(--accent)}
.act.us:hover{border-color:var(--warn);color:var(--warn);background:rgba(210,153,34,.07)}

.empty-state{
  padding:48px;text-align:center;color:var(--muted);
  /* BUG FIX: This is a flex layout but was set to display:none which is correct as
     the hidden default. JS must set display:'flex' (not 'block') to show it. */
  font-size:13px;display:none;flex-direction:column;align-items:center;gap:12px;
}
.empty-state svg{width:36px;height:36px;color:rgba(122,164,255,.25)}

/* ─── MODALS ─────────────────────────────────────── */
#confirm,
#share-modal,
#settings-modal,
#delete-account-confirm{
  display:none;
  position:fixed;inset:0;z-index:500;
  background:rgba(4,7,14,.88);
  align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:16px;
  animation:fadeIn .2s ease;
}
#confirm.show,
#share-modal.show,
#settings-modal.show,
#delete-account-confirm.show{display:flex}

.confirm-box{
  background:rgba(13,20,36,0.98);
  border:1px solid var(--line);
  border-radius:14px;padding:24px;width:min(340px,100%);
  box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(71,216,255,.05);
  animation:modalIn .25s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
}
.confirm-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(71,216,255,.4),transparent);
}
.confirm-box h3{font-size:16px;font-weight:600;margin-bottom:10px}
.confirm-box p{color:var(--muted);font-size:13px;margin-bottom:18px;line-height:1.6}
.confirm-box p code{
  color:var(--accent);font-family:inherit;
  background:rgba(71,216,255,.1);padding:2px 6px;border-radius:4px;
}
.confirm-box p strong{color:var(--text)}

.confirm-btns{display:flex;gap:10px;justify-content:flex-end}
.confirm-btns button{
  border-radius:7px;font-family:inherit;font-size:12px;
  padding:8px 16px;cursor:pointer;transition:all .18s;font-weight:500;
}
.c-cancel{background:transparent;border:1px solid var(--line);color:var(--muted)}
.c-cancel:hover{border-color:var(--accent);color:var(--text)}
.c-delete{
  background:linear-gradient(135deg,#f85149,#e53935);
  border:none;color:#fff;
  box-shadow:0 2px 8px rgba(248,81,73,.25);
}
.c-delete:hover{box-shadow:0 4px 14px rgba(248,81,73,.4);transform:translateY(-1px)}
.c-delete:active{transform:translateY(0)}
.c-delete:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ─── SHARE MODAL ────────────────────────────────── */
.share-box{width:min(420px,100%)}
.share-modal-file{color:var(--muted);font-size:12px;margin-bottom:8px}
.share-modal-file code{color:var(--accent);background:rgba(71,216,255,.1);padding:2px 6px;border-radius:4px}
.share-hint{color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:14px}
.share-field{margin-bottom:16px}
.share-days-row{display:flex;align-items:center;gap:14px}
#share-days-range{
  flex:1;accent-color:var(--accent);
  cursor:pointer;height:4px;
}
.share-days-val{min-width:3rem;font-weight:700;color:var(--accent);text-align:right}
.share-go{
  background:linear-gradient(135deg,var(--accent) 0%,#2dd4e8 100%) !important;
  border:none !important;color:#060a12 !important;font-weight:700 !important;
}
.share-go:hover{opacity:.9 !important;transform:translateY(-1px) !important}

/* ─── SETTINGS MODAL ─────────────────────────────── */
.settings-box{
  width:min(460px,100%);
  max-height:min(600px,90vh);
  overflow-y:auto;
  padding:0;
  border-radius:14px;
}
.settings-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px 16px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;
  background:rgba(13,20,36,0.98);
  backdrop-filter:blur(8px);z-index:1;
}
.settings-header h3{font-size:16px;font-weight:600;margin:0}
.settings-close{
  background:transparent;border:1px solid var(--line);border-radius:7px;
  color:var(--muted);cursor:pointer;padding:6px;display:flex;
  align-items:center;justify-content:center;transition:all .18s;
}
.settings-close:hover{border-color:var(--accent);color:var(--text);background:rgba(71,216,255,.07)}
.settings-close svg{width:14px;height:14px}

.settings-section{padding:20px 24px;border-bottom:1px solid var(--line)}
.settings-section:last-child{border-bottom:none}
.settings-section-title{
  font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:14px;
}

.settings-err{
  display:none;
  background:rgba(248,81,73,.08);border:1px solid rgba(248,81,73,.3);
  border-radius:7px;color:#ff9999;font-size:12px;padding:10px 13px;margin-bottom:14px;
  animation:slideDown .2s ease;
}
.settings-err.show{display:block}
.settings-ok{
  display:none;
  background:rgba(63,185,80,.08);border:1px solid rgba(63,185,80,.3);
  border-radius:7px;color:#7ee787;font-size:12px;padding:10px 13px;margin-bottom:14px;
  animation:slideDown .2s ease;
}
.settings-ok.show{display:block}

.settings-btn{
  width:100%;
  background:rgba(71,216,255,.08);border:1px solid rgba(71,216,255,.25);
  border-radius:7px;color:var(--accent);font-family:inherit;font-size:13px;
  font-weight:600;padding:10px;cursor:pointer;transition:all .2s;margin-top:4px;
}
.settings-btn:hover{background:rgba(71,216,255,.16);border-color:var(--accent);transform:translateY(-1px)}
.settings-btn:active{transform:translateY(0)}
.settings-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.danger-zone{background:rgba(248,81,73,.03)}
.danger-title{color:var(--danger) !important}
.settings-danger-desc{color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:14px}
.danger-btn{
  background:rgba(248,81,73,.08) !important;
  border-color:rgba(248,81,73,.25) !important;
  color:var(--danger) !important;
}
.danger-btn:hover{background:rgba(248,81,73,.16) !important;border-color:var(--danger) !important}

/* ─── ANALYTICS PANEL ────────────────────────────── */
.analytics-panel{
  display:none;flex-direction:column;gap:12px;
  background:var(--bg-card);border:1px solid var(--line);border-radius:10px;padding:16px;
}
.analytics-panel.open{display:flex;animation:slideDown .25s ease}
.analytics-head h3{font-size:14px;font-weight:600;margin:0 0 6px}
.analytics-sub{color:var(--muted);font-size:11px;line-height:1.6;margin:0 0 10px}
.analytics-summary{font-size:12px;color:var(--text);margin-bottom:6px}
.analytics-summary strong{color:var(--accent)}
.analytics-sep{color:var(--line);margin:0 8px}
.analytics-table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-height:260px;overflow-y:auto;
  border:1px solid var(--line);border-radius:7px;
}
.analytics-table{width:100%;border-collapse:collapse;font-size:12px}
.analytics-table th{
  background:rgba(10,16,30,.6);color:var(--muted);text-align:left;
  padding:8px 12px;border-bottom:1px solid var(--line);font-size:11px;font-weight:500;
}
.analytics-table td{padding:8px 12px;border-bottom:1px solid rgba(122,164,255,.08)}
.analytics-table tr:last-child td{border-bottom:none}
.analytics-table tbody tr:hover{background:rgba(71,216,255,.04)}
.an-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an-actions{white-space:nowrap}
.analytics-empty{display:none;padding:18px;text-align:center;color:var(--muted);font-size:12px}

/* ─── TOASTS ─────────────────────────────────────── */
#toasts{
  position:fixed;bottom:20px;right:20px;z-index:9000;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
  background:rgba(13,20,36,0.96);
  border:1px solid var(--line);border-radius:10px;
  padding:11px 14px;font-size:12px;display:flex;align-items:center;gap:10px;
  animation:tin .22s cubic-bezier(.4,0,.2,1);
  max-width:340px;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.toast.ok{border-color:rgba(63,185,80,.3)}
.toast.err{border-color:rgba(248,81,73,.3)}
.t-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.toast.ok .t-dot{background:var(--success);box-shadow:0 0 8px rgba(63,185,80,.5)}
.toast.err .t-dot{background:var(--danger);box-shadow:0 0 8px rgba(248,81,73,.5)}
.toast.inf .t-dot{background:var(--accent);box-shadow:0 0 8px rgba(71,216,255,.5)}

/* ─── MISC ───────────────────────────────────────── */
#file-input{display:none}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(71,216,255,.18);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(71,216,255,.35)}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width:900px){
  /* BUG FIX: Removed height:auto override — base rule is now min-height:56px
     which already handles wrapping naturally */
  .topbar{flex-wrap:wrap;padding:10px 14px;gap:10px}
  .tb-path{flex:1 1 100%;order:3;margin-top:2px}
  .tb-right{margin-left:0;flex-wrap:wrap;justify-content:flex-end;gap:6px;width:100%}
  .btn{padding:7px 10px;font-size:11px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .toolbar{flex-wrap:wrap}
  .fcount{width:100%;text-align:right}
  table{min-width:640px}
  .fname-n{max-width:140px}
  .acts{flex-wrap:wrap;justify-content:flex-end;max-width:200px}
}

/* Hide the redundant "Type" column on narrower viewports — the icon already shows it */
@media (max-width:680px){
  .file-panel th:nth-child(4),
  .file-panel td:nth-child(4){display:none}
  table{min-width:540px}
}

/* Hide "Modified" column on very small screens to keep actions reachable */
@media (max-width:440px){
  .file-panel th:nth-child(3),
  .file-panel td:nth-child(3){display:none}
  table{min-width:420px}
  .acts{max-width:160px}
}

@media (max-width:520px){
  .stats{grid-template-columns:1fr}
  .l-wrap{width:100%;padding:0 16px}
  .settings-box{border-radius:10px}
  .topbar{padding:10px 12px}
  /* BUG FIX: tighter padding on mobile so file panel gets enough room */
  .main{padding:8px;gap:8px}
  .tb-hide-sm{display:none}
  /* Toasts span the full width so text is never truncated on small screens */
  #toasts{bottom:12px;right:12px;left:12px}
  .toast{max-width:100%}
  /* Confirm/share boxes get more breathing room with reduced padding */
  .confirm-box{padding:18px}
  /* BUG FIX: Reduce drop zone padding on short screens to save vertical space */
  .drop{padding:16px 12px}
  .drop p{font-size:12px}
}

/* ─── EXTRA COMPACT: very short screens (600px or shorter) ──────────── */
/* BUG FIX: On ~600px viewports the stats grid and drop zone eat all the
   space leaving no room for files. Collapse stats to a compact 2-col row,
   hide stat sub-labels, and shrink the drop zone to a single slim bar. */
@media (max-height:680px){
  .stats{
    grid-template-columns:repeat(2,1fr);
    gap:6px;
  }
  .stat{padding:8px 12px}
  .stat-val{font-size:16px}
  .stat-sub{display:none}
  .drop{padding:10px 14px;display:flex !important;align-items:center;justify-content:center;gap:12px}
  .drop.show{display:flex !important}
  .drop-icon{width:18px;height:18px;margin:0}
  .drop p{font-size:12px;margin:0;line-height:1.3}
  .toolbar{padding:7px 10px}
  .main{gap:7px;padding:8px}
}