/* ============================================================
   Pixelframe — Premium Theme  v3
   Fonts : Instrument Serif · Outfit · Fira Code
   Palette: Slate mono-chrome + warm off-white background
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Outfit:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Background system */
  --bg         : #F5F4F0;
  --bg-card    : rgba(255,255,255,.80);
  --bg-card-sm : rgba(255,255,255,.64);
  --bg-card-xs : rgba(255,255,255,.42);
  --bg-nav     : rgba(245,244,240,.90);

  /* Slate palette */
  --s900 : #0f172a;
  --s800 : #1e293b;
  --s700 : #334155;
  --s600 : #475569;
  --s500 : #64748b;
  --s400 : #94a3b8;
  --s300 : #cbd5e1;
  --s200 : #e2e8f0;
  --s100 : #f1f5f9;
  --s50  : #f8fafc;

  /* Semantic */
  --green-50  : #f0fdf4;
  --green-200 : #bbf7d0;
  --green-700 : #15803d;
  --amber-50  : #fefce8;
  --amber-200 : #fde68a;
  --amber-800 : #92400e;
  --red-50    : #fef2f2;
  --red-200   : #fecaca;
  --red-700   : #b91c1c;
  --blue-50   : #eff6ff;
  --blue-200  : #bfdbfe;
  --blue-700  : #1d4ed8;

  /* Glass */
  --g-border     : 1px solid rgba(255,255,255,.88);
  --g-border-sm  : 1px solid rgba(255,255,255,.72);
  --g-shadow     : 0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.94);
  --g-shadow-sm  : 0 1px 1px rgba(15,23,42,.03),0 2px 8px rgba(15,23,42,.05);
  --g-shadow-lg  : 0 4px 24px rgba(15,23,42,.10),0 1px 4px rgba(15,23,42,.04),inset 0 1px 0 rgba(255,255,255,.96);
  --g-shadow-xl  : 0 12px 40px rgba(15,23,42,.13),inset 0 1px 0 rgba(255,255,255,.97);

  /* Typography */
  --f-serif : 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-sans  : 'Outfit', system-ui, -apple-system, sans-serif;
  --f-mono  : 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* Layout */
  --nav-h    : 58px;
  --sidebar-w: 212px;

  /* Radii */
  --r    : 10px;
  --r-lg : 14px;
  --r-xl : 18px;
  --r-2xl: 24px;

  /* Motion */
  --ease  : cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
  --t     : .18s;
  /* ── LEGACY ALIASES (backward compat with copied PHP files) ── */
  --slate-900: var(--s900); --slate-800: var(--s800);
  --slate-700: var(--s700); --slate-600: var(--s600);
  --slate-500: var(--s500); --slate-400: var(--s400);
  --slate-300: var(--s300); --slate-200: var(--s200);
  --slate-100: var(--s100); --slate-50:  var(--s50);
  --font-serif: var(--f-serif); --font-mono: var(--f-mono); --font-sans: var(--f-sans);
  --text-1: var(--s900); --text-2: var(--s700); --text-3: var(--s400);
  --text-body: var(--s800); --text-muted: var(--s400);
  --bg-0: var(--bg); --bg-1: var(--bg); --bg-2: rgba(255,255,255,.55); --bg-3: var(--s100);
  --surface: rgba(255,255,255,.72);
  --accent: var(--s900); --accent-h: var(--s800); --accent-2: var(--s700); --accent-3: var(--s600);
  --success: var(--green-700); --danger: var(--red-700); --warning: var(--amber-800);
  --border: rgba(15,23,42,.08); --border-2: rgba(15,23,42,.13); --border-3: rgba(15,23,42,.20);

}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }

body {
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--s800);
  min-height: 100vh;
  /* Warm off-white with very subtle depth */
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(15,23,42,.045) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 5%  95%,  rgba(15,23,42,.025) 0%, transparent 50%),
    radial-gradient(ellipse 45% 35% at 95% 85%,  rgba(15,23,42,.02)  0%, transparent 50%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* ── GLASS UTILITIES ────────────────────────────────────── */
.glass {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: var(--g-border);
  box-shadow: var(--g-shadow);
}
.glass-sm {
  background: var(--bg-card-sm);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: var(--g-border-sm);
  box-shadow: var(--g-shadow-sm);
}
.glass-xs {
  background: var(--bg-card-xs);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.60);
}

/* ── LAYOUT ─────────────────────────────────────────────── */
.wrapper   { min-height:100vh; display:flex; flex-direction:column; }
main       { flex:1; }
.container { width:100%; max-width:1160px; margin:0 auto; padding:0 24px; }

/* ── TYPOGRAPHY ─────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--f-sans); font-weight:700;
  line-height:1.2; letter-spacing:-.025em; color:var(--s900);
}
.serif { font-family:var(--f-serif); font-weight:400; }
.mono  { font-family:var(--f-mono); }
a { color:var(--s700); text-decoration:none; transition:color var(--t) var(--ease); }
a:hover { color:var(--s900); }

/* ── NAVBAR ─────────────────────────────────────────────── */
.navbar { position:sticky; top:0; z-index:200; }
.navbar-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-h); padding:0 24px;
  background:var(--bg-nav);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid rgba(15,23,42,.08);
  box-shadow:0 1px 0 rgba(15,23,42,.04);
}
.navbar-brand {
  display:flex; align-items:center; gap:9px;
  font-family:var(--f-sans); font-size:.95rem; font-weight:800;
  color:var(--s900); letter-spacing:-.03em;
}
.logo-icon {
  width:30px; height:30px; border-radius:8px;
  background:var(--s900);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.nav-links { display:flex; align-items:center; gap:1px; }
.nav-links a {
  padding:6px 12px; border-radius:7px;
  font-size:.84rem; font-weight:500; color:var(--s500);
  transition:all var(--t) var(--ease);
}
.nav-links a:hover { color:var(--s900); background:rgba(15,23,42,.06); }
.nav-links a.active { color:var(--s900); background:rgba(15,23,42,.08); font-weight:600; }
.nav-user { display:flex; align-items:center; gap:8px; }
.nav-avatar {
  width:28px; height:28px; border-radius:50%;
  background:var(--s200); border:1px solid var(--s300);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:var(--s600); flex-shrink:0;
}
.nav-hamburger {
  display:none; background:rgba(255,255,255,.65); border:1px solid rgba(15,23,42,.12);
  border-radius:8px; padding:7px 8px; color:var(--s500); cursor:pointer;
  backdrop-filter:blur(8px); transition:all var(--t);
}
.nav-hamburger:hover { background:rgba(255,255,255,.9); }
.nav-mobile { display:none; }
@media(max-width:768px) {
  .nav-links { display:none; }
  .nav-hamburger { display:flex; align-items:center; }
  .nav-mobile.open {
    display:flex; flex-direction:column; gap:2px; padding:10px 14px 14px;
    background:rgba(245,244,240,.95); backdrop-filter:blur(24px);
    border-bottom:1px solid rgba(15,23,42,.07);
  }
  .nav-mobile a {
    padding:9px 12px; border-radius:8px; font-size:.9rem; font-weight:500; color:var(--s500);
    transition:all var(--t);
  }
  .nav-mobile a:hover { color:var(--s900); background:rgba(15,23,42,.05); }
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 20px; border-radius:9px; border:none; cursor:pointer;
  font-family:var(--f-sans); font-size:.84rem; font-weight:600;
  letter-spacing:-.01em; white-space:nowrap; text-decoration:none;
  transition:all var(--t) var(--ease);
}
.btn-primary {
  background:var(--s900); color:#fff;
  box-shadow:0 1px 3px rgba(15,23,42,.14);
}
.btn-primary:hover { background:var(--s800); color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px rgba(15,23,42,.20); }
.btn-primary:active { transform:translateY(0); }
.btn-outline {
  background:rgba(255,255,255,.72); color:var(--s700);
  border:1px solid rgba(15,23,42,.13);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-outline:hover { background:rgba(255,255,255,.95); color:var(--s900); border-color:rgba(15,23,42,.24); }
.btn-danger  { background:var(--red-700); color:#fff; }
.btn-danger:hover  { background:#991b1b; color:#fff; transform:translateY(-1px); }
.btn-success { background:var(--green-700); color:#fff; }
.btn-sm    { padding:5px 13px; font-size:.79rem; border-radius:7px; }
.btn-lg    { padding:12px 26px; font-size:.92rem; border-radius:11px; }
.btn-pill  { border-radius:100px; }
.btn-block { width:100%; border-radius:var(--r-lg); }
.btn:disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ── CARDS ───────────────────────────────────────────────── */
.card {
  background:var(--bg-card);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:var(--g-border); box-shadow:var(--g-shadow);
  border-radius:var(--r-xl); padding:22px;
  transition:box-shadow var(--t) var(--ease);
}
.card:hover { box-shadow:var(--g-shadow-lg); }
.card-sm {
  background:var(--bg-card-sm);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:var(--g-border-sm); box-shadow:var(--g-shadow-sm);
  border-radius:var(--r-lg); padding:16px 18px;
}
.card-title { font-size:.95rem; font-weight:700; color:var(--s900); margin-bottom:4px; }
.card-header { margin-bottom:18px; }

/* ── FORMS ───────────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-size:.7rem; font-weight:700;
  color:var(--s400); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.08em;
}
.form-control {
  width:100%; padding:9px 12px;
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(15,23,42,.14); border-radius:var(--r);
  color:var(--s900); font-family:var(--f-sans); font-size:.875rem;
  transition:all var(--t) var(--ease); outline:none;
  box-shadow:0 1px 2px rgba(15,23,42,.04),inset 0 1px 0 rgba(255,255,255,.7);
}
.form-control:hover { border-color:rgba(15,23,42,.25); background:rgba(255,255,255,.85); }
.form-control:focus { border-color:var(--s900); background:rgba(255,255,255,.95); box-shadow:0 0 0 3px rgba(15,23,42,.09); }
.form-control::placeholder { color:var(--s400); }
select.form-control {
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:34px;
}
.form-check { display:flex; align-items:center; gap:9px; }
.form-check input[type=checkbox] { width:15px; height:15px; accent-color:var(--s900); cursor:pointer; }

/* ── ALERTS ──────────────────────────────────────────────── */
.alert {
  padding:11px 14px; border-radius:var(--r); font-size:.875rem;
  border:1px solid; margin-bottom:14px;
  display:flex; align-items:flex-start; gap:9px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.alert-success { background:rgba(240,253,244,.88); border-color:var(--green-200); color:var(--green-700); }
.alert-danger  { background:rgba(254,242,242,.88); border-color:var(--red-200);   color:var(--red-700);   }
.alert-warning { background:rgba(254,252,232,.88); border-color:var(--amber-200); color:var(--amber-800); }
.alert-info    { background:rgba(239,246,255,.88); border-color:var(--blue-200);  color:var(--blue-700);  }
.btn-close {
  margin-left:auto; background:none; border:none; color:inherit;
  cursor:pointer; opacity:.5; font-size:.9rem; flex-shrink:0;
  transition:opacity var(--t); line-height:1;
}
.btn-close:hover { opacity:1; }

/* ── UPLOAD ZONE ─────────────────────────────────────────── */
.upload-zone {
  border:1.5px dashed rgba(15,23,42,.15);
  border-radius:var(--r-lg); padding:46px 28px;
  text-align:center; cursor:pointer;
  background:rgba(248,250,252,.50);
  transition:all var(--t) var(--ease); position:relative;
}
.upload-zone:hover { border-color:rgba(15,23,42,.32); background:rgba(248,250,252,.85); }
.upload-zone.drag-over {
  border-color:var(--s900); border-style:solid;
  background:rgba(241,245,249,.8);
  box-shadow:0 0 0 4px rgba(15,23,42,.08);
}
.upload-zone input[type=file] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload-icon {
  width:50px; height:50px; margin:0 auto 14px;
  background:rgba(15,23,42,.06); border:1px solid rgba(15,23,42,.10);
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  transition:all var(--t) var(--spring);
}
.upload-zone:hover .upload-icon { background:rgba(15,23,42,.10); transform:scale(1.06) translateY(-2px); }
.upload-zone h3  { font-size:.95rem; font-weight:600; color:var(--s900); margin-bottom:5px; letter-spacing:-.015em; }
.upload-zone p   { font-size:.8rem; color:var(--s400); }
.upload-limits   { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:13px; }
.upload-limit-badge {
  background:rgba(255,255,255,.75); border:1px solid rgba(15,23,42,.10);
  padding:2px 9px; border-radius:5px;
  font-size:.68rem; color:var(--s500);
  font-family:var(--f-mono); font-weight:500;
}

/* ── PROGRESS ────────────────────────────────────────────── */
.upload-progress-wrap { display:none; margin-top:16px; }
.upload-progress-wrap.active { display:block; }
.progress-bar-outer { height:4px; background:rgba(15,23,42,.08); border-radius:100px; overflow:hidden; margin:6px 0; }
.progress-bar-inner { height:100%; border-radius:100px; background:var(--s900); transition:width .3s ease; width:0; }
.progress-file { display:flex; justify-content:space-between; font-size:.78rem; color:var(--s500); }

/* ── RESULT BOX ──────────────────────────────────────────── */
.result-box { margin-top:16px; }
.result-item {
  background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.88);
  border-radius:var(--r-lg); margin-bottom:10px; overflow:hidden;
  box-shadow:var(--g-shadow-sm); animation:resultIn .28s var(--spring);
}
@keyframes resultIn { from { opacity:0; transform:translateY(10px) scale(.98); } }
.result-preview { display:flex; gap:12px; padding:12px; align-items:center; }
.result-thumb   { width:64px; height:48px; object-fit:cover; border-radius:6px; background:var(--s100); flex-shrink:0; border:1px solid rgba(15,23,42,.08); }
.result-links   { flex:1; min-width:0; padding:2px 0; }
.result-link-row{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.result-link-row:last-child { margin-bottom:0; }
.result-link-label { font-size:.67rem; text-transform:uppercase; letter-spacing:.09em; color:var(--s400); font-weight:700; min-width:52px; font-family:var(--f-mono); }
.result-link-input { flex:1; min-width:0; }
.copy-btn.copied { background:rgba(240,253,244,.9) !important; border-color:var(--green-200) !important; color:var(--green-700) !important; }

/* ── FILE GRID ───────────────────────────────────────────── */
.file-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.file-card {
  background:var(--bg-card-sm); border:var(--g-border-sm);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--g-shadow-sm); transition:all var(--t) var(--ease); position:relative;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.file-card:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(15,23,42,.10); }
.file-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--s100); transition:transform .35s var(--ease); }
.file-thumb-wrap { overflow:hidden; }
.file-card:hover .file-thumb { transform:scale(1.04); }
.file-thumb-placeholder { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:var(--s100); }
.file-meta-wrap { padding:9px 11px; }
.file-name { font-size:.74rem; font-weight:600; color:var(--s900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; }
.file-info { font-size:.65rem; color:var(--s400); font-family:var(--f-mono); display:flex; align-items:center; gap:5px; }
.file-dot  { width:2px; height:2px; background:var(--s300); border-radius:50%; flex-shrink:0; }
.file-actions { display:flex; gap:5px; margin-top:8px; }
.file-actions .btn { padding:4px 9px; font-size:.72rem; }
.file-badge {
  position:absolute; top:7px; right:7px;
  background:rgba(255,255,255,.90); backdrop-filter:blur(6px);
  border:1px solid rgba(15,23,42,.09); border-radius:4px;
  padding:2px 7px; font-size:.65rem; color:var(--s500);
  font-family:var(--f-mono); font-weight:500;
}

/* ── BADGES ──────────────────────────────────────────────── */
.badge {
  display:inline-block; padding:2px 7px; border-radius:4px;
  font-size:.63rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.badge-free    { background:rgba(15,23,42,.06); color:var(--s500); border:1px solid rgba(15,23,42,.10); }
.badge-premium { background:var(--s900); color:#fff; }
.badge-admin   { background:var(--red-50);   color:var(--red-700);   border:1px solid var(--red-200);   }
.badge-success { background:var(--green-50); color:var(--green-700); border:1px solid var(--green-200); }
.badge-danger  { background:var(--red-50);   color:var(--red-700);   border:1px solid var(--red-200);   }
.badge-warning { background:var(--amber-50); color:var(--amber-800); border:1px solid var(--amber-200); }
.badge-info    { background:var(--blue-50);  color:var(--blue-700);  border:1px solid var(--blue-200);  }
.badge-new     { background:var(--green-50); color:var(--green-700); border:1px solid var(--green-200); }

/* ── STAT CARDS ──────────────────────────────────────────── */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(156px,1fr)); gap:10px; margin-bottom:16px; }
.stat-card {
  background:var(--bg-card-sm); border:var(--g-border-sm);
  border-radius:var(--r-lg); padding:15px 16px;
  box-shadow:var(--g-shadow-sm); transition:all var(--t) var(--ease);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(15,23,42,.09); }
.stat-label { font-size:.68rem; font-weight:700; color:var(--s400); text-transform:uppercase; letter-spacing:.08em; margin-bottom:7px; display:flex; align-items:center; gap:6px; }
.stat-num   { font-family:var(--f-mono); font-size:1.5rem; font-weight:500; color:var(--s900); letter-spacing:-.04em; }
.stat-trend { font-size:.68rem; color:var(--s400); margin-top:3px; }
.stat-trend-up { color:var(--green-700); }

/* ── STORAGE BAR ─────────────────────────────────────────── */
.storage-bar-outer { height:4px; background:rgba(15,23,42,.08); border-radius:100px; overflow:hidden; }
.storage-bar-inner { height:100%; border-radius:100px; background:var(--s900); transition:width .8s var(--spring); }
.storage-bar-inner.warn { background:var(--red-700); }
.storage-labels { display:flex; justify-content:space-between; font-size:.68rem; color:var(--s400); margin-top:4px; font-family:var(--f-mono); }

/* ── SECTION HEADER ──────────────────────────────────────── */
.sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sec-label { font-size:.7rem; font-weight:700; color:var(--s400); text-transform:uppercase; letter-spacing:.09em; display:flex; align-items:center; gap:7px; }
.sec-action { font-size:.74rem; color:var(--s500); font-weight:500; cursor:pointer; transition:color var(--t); }
.sec-action:hover { color:var(--s900); }

/* ── PANEL LAYOUT ────────────────────────────────────────── */
.panel-layout {
  display:grid; grid-template-columns:var(--sidebar-w) 1fr;
  min-height:calc(100vh - var(--nav-h));
}
.sidebar {
  border-right:1px solid rgba(15,23,42,.07); padding:16px 10px;
  background:rgba(255,255,255,.52);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  position:sticky; top:var(--nav-h); height:calc(100vh - var(--nav-h)); overflow-y:auto;
}
.sidebar-section-label {
  padding:4px 8px 10px; font-size:.68rem; font-weight:700;
  color:var(--s400); text-transform:uppercase; letter-spacing:.09em;
  border-bottom:1px solid rgba(15,23,42,.06); margin-bottom:6px;
}
.sidebar-nav { display:flex; flex-direction:column; gap:1px; }
.sidebar-nav a {
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px;
  font-size:.82rem; font-weight:500; color:var(--s500); transition:all var(--t) var(--ease);
}
.sidebar-nav a:hover { color:var(--s900); background:rgba(15,23,42,.05); }
.sidebar-nav a.active { color:var(--s900); background:rgba(15,23,42,.08); font-weight:600; }
.sidebar-nav a svg { flex-shrink:0; }
.sidebar-divider  { height:1px; background:rgba(15,23,42,.06); margin:7px 0; }
.sidebar-storage  { margin-top:8px; border-radius:9px; padding:10px 11px; background:var(--bg-card-xs); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.60); }
.panel-content    { padding:24px 26px; min-width:0; }
.panel-header     { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.panel-title      { font-family:var(--f-serif); font-size:1.65rem; font-weight:400; color:var(--s900); letter-spacing:-.01em; }
.panel-title-sub  { font-size:.78rem; color:var(--s400); margin-top:1px; }
@media(max-width:900px) {
  .panel-layout { grid-template-columns:1fr; }
  .sidebar { display:none; height:auto; position:static; }
  .sidebar.mobile-open { display:block; }
  .panel-content { padding:18px 16px; }
}

/* ── PRICING CARDS ───────────────────────────────────────── */
.pricing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:10px; }

.plan-card { border-radius:var(--r-xl); padding:20px; transition:all var(--t) var(--ease); position:relative; }
.plan-card:hover { transform:translateY(-2px); }

/* Light plan card */
.plan-card-light {
  background:var(--bg-card-sm); border:var(--g-border-sm); box-shadow:var(--g-shadow-sm);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.plan-card-light:hover { box-shadow:var(--g-shadow-lg); }

/* Dark featured plan card */
.plan-card-dark {
  background:var(--s900); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 32px rgba(15,23,42,.30);
}
.plan-card-dark:hover { box-shadow:0 12px 40px rgba(15,23,42,.38); }

/* "Most popular" tab */
.plan-popular {
  position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  background:var(--s50); color:var(--s900);
  padding:2px 12px; border-radius:0 0 8px 8px;
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  border:1px solid rgba(15,23,42,.10); border-top:none; white-space:nowrap;
}

/* Plan name badge */
.plan-name-light {
  display:inline-block; background:rgba(15,23,42,.06); color:var(--s500);
  border:1px solid rgba(15,23,42,.10);
  padding:2px 8px; border-radius:4px; font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
}
.plan-name-dark {
  display:inline-block; background:rgba(255,255,255,.12); color:rgba(255,255,255,.65);
  padding:2px 8px; border-radius:4px; font-size:.62rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
}
.plan-badge-wrap { margin-bottom:10px; }

/* Price */
.plan-price-light { font-family:var(--f-mono); font-size:1.75rem; font-weight:500; letter-spacing:-.05em; color:var(--s900); margin-bottom:2px; }
.plan-price-dark  { font-family:var(--f-mono); font-size:1.75rem; font-weight:500; letter-spacing:-.05em; color:#f8fafc; margin-bottom:2px; }
.plan-period-light{ font-size:.72rem; color:var(--s400); margin-bottom:12px; }
.plan-period-dark { font-size:.72rem; color:rgba(255,255,255,.4); margin-bottom:12px; }

/* Divider */
.plan-divider-l { height:1px; background:rgba(15,23,42,.07); margin:10px 0; }
.plan-divider-d { height:1px; background:rgba(255,255,255,.10); margin:10px 0; }

/* Feature rows */
.plan-feature   { display:flex; align-items:center; gap:7px; padding:4px 0; font-size:.77rem; }
.plan-feature-l { color:var(--s600); }
.plan-feature-d { color:rgba(255,255,255,.62); }
.plan-check-l   { color:var(--s900); flex-shrink:0; font-weight:700; font-size:.82rem; }
.plan-check-d   { color:rgba(255,255,255,.9); flex-shrink:0; font-weight:700; font-size:.82rem; }
.plan-cross     { color:var(--s300); flex-shrink:0; font-weight:700; font-size:.82rem; }

/* Plan buttons */
.plan-btn {
  width:100%; padding:9px; border-radius:8px;
  font-family:var(--f-sans); font-size:.8rem; font-weight:600; cursor:pointer;
  margin-top:12px; border:none; transition:all var(--t);
  display:flex; align-items:center; justify-content:center; gap:7px; letter-spacing:-.01em;
}
.plan-btn-l { background:rgba(15,23,42,.08); color:var(--s900); }
.plan-btn-l:hover { background:rgba(15,23,42,.14); }
.plan-btn-d { background:#f8fafc; color:var(--s900); }
.plan-btn-d:hover { background:#fff; }
.plan-current { opacity:.45; cursor:default !important; pointer-events:none; }

/* ── TABLE ───────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--r-lg); border:1px solid rgba(15,23,42,.08); box-shadow:var(--g-shadow-sm); }
table { width:100%; border-collapse:collapse; font-size:.85rem; background:rgba(255,255,255,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
thead th { padding:10px 14px; text-align:left; background:rgba(248,250,252,.88); font-size:.67rem; text-transform:uppercase; letter-spacing:.09em; color:var(--s400); font-weight:700; border-bottom:1px solid rgba(15,23,42,.07); font-family:var(--f-mono); }
tbody td { padding:11px 14px; border-bottom:1px solid rgba(15,23,42,.05); vertical-align:middle; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover td { background:rgba(248,250,252,.7); }

/* ── PAGINATION ──────────────────────────────────────────── */
.pagination { display:flex; align-items:center; gap:4px; margin-top:16px; flex-wrap:wrap; }
.pagination a, .pagination span { padding:5px 10px; border-radius:6px; font-size:.78rem; font-family:var(--f-mono); border:1px solid rgba(15,23,42,.10); color:var(--s500); background:rgba(255,255,255,.65); transition:all var(--t); }
.pagination a:hover { border-color:var(--s900); color:var(--s900); background:rgba(255,255,255,.9); }
.pagination .current { background:var(--s900); color:#fff; border-color:var(--s900); font-weight:700; }

/* ── HERO ────────────────────────────────────────────────── */
.hero { padding:88px 0 68px; text-align:center; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.72rem; font-weight:600; color:var(--s500); letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.65); border:1px solid rgba(15,23,42,.10);
  padding:4px 14px; border-radius:100px; margin-bottom:22px;
  backdrop-filter:blur(8px);
}
.hero-eyebrow-dot { width:5px; height:5px; background:#22c55e; border-radius:50%; flex-shrink:0; }
.hero-title {
  font-family:var(--f-serif); font-size:clamp(2.2rem,5vw,3.6rem);
  font-weight:400; line-height:1.08; letter-spacing:-.02em;
  color:var(--s900); margin-bottom:16px;
}
.hero-title em { font-style:italic; color:var(--s600); }
.hero-sub { font-size:.95rem; color:var(--s500); max-width:460px; margin:0 auto 34px; line-height:1.68; }

/* ── ADMIN LAYOUT ────────────────────────────────────────── */
.admin-layout { display:grid; grid-template-columns:208px 1fr; min-height:100vh; }
.admin-sidebar { border-right:1px solid rgba(15,23,42,.07); padding:16px 10px; background:rgba(255,255,255,.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); position:sticky; top:0; height:100vh; overflow-y:auto; }
.admin-brand { display:flex; align-items:center; gap:8px; font-size:.88rem; font-weight:800; color:var(--s900); padding:4px 8px 14px; letter-spacing:-.025em; border-bottom:1px solid rgba(15,23,42,.07); margin-bottom:8px; }
.admin-nav { display:flex; flex-direction:column; gap:1px; }
.admin-nav a { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; color:var(--s500); font-size:.82rem; font-weight:500; transition:all var(--t); }
.admin-nav a:hover { color:var(--s900); background:rgba(15,23,42,.05); }
.admin-nav a.active { color:var(--s900); background:rgba(15,23,42,.08); font-weight:600; }
.admin-nav-section { font-size:.67rem; text-transform:uppercase; letter-spacing:.10em; color:var(--s400); padding:13px 10px 4px; font-family:var(--f-mono); }
.admin-main { padding:26px 30px; background:var(--bg); min-height:100vh; }
@media(max-width:900px) { .admin-layout { grid-template-columns:1fr; } .admin-sidebar { display:none; } .admin-main { padding:18px 16px; } }

/* ── UTILITIES ───────────────────────────────────────────── */
.text-center  { text-align:center; }
.text-right   { text-align:right; }
.text-muted   { color:var(--s400); }
.text-success { color:var(--green-700); }
.text-danger  { color:var(--red-700); }
.text-warning { color:var(--amber-800); }
.d-flex       { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:8px; } .gap-2 { gap:14px; }
.mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:32px;}
.mb-1{margin-bottom:8px;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;} .mb-4{margin-bottom:32px;}
.w-100 { width:100%; }
.hidden { display:none !important; }
.divider { height:1px; background:rgba(15,23,42,.07); margin:18px 0; }
.empty-state { text-align:center; padding:48px 24px; }
.empty-icon { width:54px; height:54px; margin:0 auto 14px; background:rgba(15,23,42,.05); border:1px solid rgba(15,23,42,.09); border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; }

/* ── FOOTER ──────────────────────────────────────────────── */
footer { border-top:1px solid rgba(15,23,42,.07); padding:22px 0; text-align:center; color:var(--s400); font-size:.8rem; background:rgba(255,255,255,.48); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
footer a { color:var(--s400); }
footer a:hover { color:var(--s700); }

/* ── SPINNER ─────────────────────────────────────────────── */
.spinner { display:inline-block; width:15px; height:15px; border:2px solid rgba(15,23,42,.12); border-top-color:var(--s900); border-radius:50%; animation:spin .6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── TOASTS ──────────────────────────────────────────────── */
#toast-container { position:fixed; bottom:22px; right:22px; z-index:9999; display:flex; flex-direction:column; gap:7px; }
.toast { background:rgba(255,255,255,.90); border:1px solid rgba(15,23,42,.10); border-radius:var(--r-lg); padding:11px 16px; font-size:.83rem; color:var(--s800); max-width:310px; box-shadow:var(--g-shadow-lg); animation:toastIn .25s var(--spring); display:flex; align-items:center; gap:9px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.toast::before { font-size:.9rem; flex-shrink:0; font-weight:700; }
.toast.toast-success::before { content:'✓'; color:var(--green-700); }
.toast.toast-error::before   { content:'✕'; color:var(--red-700); }
.toast.toast-info::before    { content:'i'; color:var(--blue-700); font-style:italic; }
@keyframes toastIn { from { opacity:0; transform:translateY(14px) scale(.96); } }

/* ── PAGE FADE ───────────────────────────────────────────── */
main { animation:pgIn .22s var(--ease); }
@keyframes pgIn { from { opacity:.7; transform:translateY(4px); } }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:640px) {
  .hero { padding:56px 0 44px; }
  .file-grid { grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .pricing-grid { grid-template-columns:1fr; }
  .upload-zone { padding:32px 18px; }
  #toast-container { bottom:14px; right:14px; left:14px; }
  .toast { max-width:100%; }
  .card { padding:16px; }
  .panel-header { flex-direction:column; align-items:flex-start; gap:12px; }
}