/* ── Design tokens ─────────────────────────────────── */
:root {
    --p:    #7c5cfc; --p2: #a78bfa; --p3: #c4b5fd;
    --bg:   #0a0a14; --s1: #12121f; --s2: #1a1a2e; --s3: #242445;
    --txt:  #e2e8f0; --dim: #94a3b8; --bdr: #2d2d5e;
    --ok:   #10b981; --warn: #f59e0b; --danger: #ef4444;
    --r:    12px; --r2: 8px;
    --glow: 0 0 24px rgba(124,92,252,.25);
}
/* Light theme overrides */
html.theme-light {
    --bg:   #f5f6fa; --s1: #ffffff; --s2: #f0f2f8; --s3: #e4e7f0;
    --txt:  #1e1e2e; --dim: #5c6780; --bdr: #cfd4e8;
    --glow: 0 0 24px rgba(124,92,252,.12);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--txt); min-height:100vh; }

/* ── Layout ──────────────────────────────────────────── */
.wrap       { max-width:1280px; margin:0 auto; padding:2rem; }
.back-link  { color:var(--p2); text-decoration:none; font-size:.875rem; display:inline-flex; align-items:center; gap:.3rem; margin-bottom:1.5rem; }
.back-link:hover { text-decoration:underline; }

/* ── Hero ────────────────────────────────────────────── */
.hero { text-align:center; padding:3rem 1rem 2rem; }
.hero-badge { display:inline-block; background:rgba(124,92,252,.15); border:1px solid var(--p); color:var(--p2); font-size:.75rem; font-weight:600; padding:.3rem .75rem; border-radius:999px; margin-bottom:1rem; letter-spacing:.08em; text-transform:uppercase; }
.hero h1 { font-size:clamp(1.75rem,4vw,3rem); font-weight:700; background:linear-gradient(135deg,var(--p),var(--p2),var(--p3)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2; margin-bottom:.75rem; }
.hero p { color:var(--dim); font-size:1.05rem; max-width:540px; margin:0 auto 1.5rem; }

.mode-pills { display:inline-flex; gap:.5rem; background:var(--s1); border:1px solid var(--bdr); border-radius:999px; padding:.25rem; }
.pill { padding:.35rem 1rem; border-radius:999px; font-size:.8rem; font-weight:600; color:var(--dim); cursor:pointer; transition:.2s; }
.pill.active { background:var(--p); color:#fff; }

/* ── Drop zone ───────────────────────────────────────── */
.drop-zone { border:2px dashed var(--bdr); border-radius:var(--r); padding:3rem 2rem; text-align:center; cursor:pointer; transition:.3s; background:var(--s1); margin:2rem 0; position:relative; }
.drop-zone:hover,.drop-zone.over { border-color:var(--p); background:rgba(124,92,252,.05); box-shadow:var(--glow); }
.drop-zone .dz-icon  { font-size:3rem; margin-bottom:.75rem; }
.drop-zone .dz-text  { color:var(--dim); }
.drop-zone .dz-text strong { color:var(--p2); }
.drop-zone input[type=file] { display:none; }
.dz-limit { font-size:.75rem; margin-top:.5rem; color:var(--dim); }

/* ── Progress bar ────────────────────────────────────── */
.progress-bar { height:4px; background:var(--s3); border-radius:2px; overflow:hidden; margin-top:1rem; display:none; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--p),var(--p2)); width:0; transition:width .3s; }

/* ── Features grid ───────────────────────────────────── */
.features { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin:2rem 0; }
.feature-card { background:var(--s2); border:1px solid var(--bdr); border-radius:var(--r2); padding:1.25rem; }
.feature-card .icon { font-size:1.5rem; margin-bottom:.5rem; }
.feature-card h3 { font-size:.9rem; font-weight:600; margin-bottom:.25rem; }
.feature-card p { font-size:.78rem; color:var(--dim); }

/* ── File list (members) ─────────────────────────────── */
.section-head { display:flex; justify-content:space-between; align-items:center; margin:2rem 0 1rem; }
.section-head h2 { font-size:1.1rem; font-weight:600; }
.quota-bar { font-size:.8rem; color:var(--dim); display:flex; align-items:center; gap:.5rem; }
.quota-pip { width:8px; height:8px; border-radius:50%; background:var(--ok); display:inline-block; }
.quota-pip.full { background:var(--danger); }

.files-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.file-card { background:var(--s2); border:1px solid var(--bdr); border-radius:var(--r); padding:1.25rem; transition:.2s; }
.file-card:hover { border-color:var(--p); transform:translateY(-2px); box-shadow:0 4px 24px rgba(0,0,0,.3); }
.file-card .fc-name { font-weight:600; font-size:.95rem; margin-bottom:.5rem; word-break:break-word; display:flex; align-items:center; gap:.4rem; }
.file-card .fc-type { font-size:.7rem; background:rgba(124,92,252,.2); color:var(--p2); padding:.1rem .4rem; border-radius:4px; text-transform:uppercase; }
.file-card .fc-meta { display:flex; flex-wrap:wrap; gap:.75rem; color:var(--dim); font-size:.78rem; margin-bottom:1rem; }
.file-card .fc-actions { display:flex; gap:.5rem; }

/* ── Buttons ─────────────────────────────────────────── */
.btn { padding:.5rem 1.1rem; border:none; border-radius:var(--r2); cursor:pointer; font-weight:600; font-size:.82rem; display:inline-flex; align-items:center; gap:.4rem; transition:.2s; }
.btn-primary { background:linear-gradient(135deg,var(--p),var(--p2)); color:#fff; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 15px rgba(124,92,252,.4); }
.btn-ghost { background:var(--s3); color:var(--txt); }
.btn-ghost:hover { background:var(--s2); border-color:var(--p); }
.btn-danger { background:var(--danger); color:#fff; }
.btn-sm { padding:.35rem .8rem; font-size:.75rem; }

/* ── RegWall modal ───────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:9998; display:none; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.modal-overlay.open { display:flex; }
.modal { background:var(--s2); border:1px solid var(--p); border-radius:var(--r); padding:2rem; max-width:420px; width:90%; text-align:center; animation:modalIn .25s ease; }
@keyframes modalIn { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:none; } }
.modal h2 { font-size:1.3rem; margin-bottom:.75rem; }
.modal p { color:var(--dim); font-size:.9rem; margin-bottom:1.5rem; }
.modal-btns { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.modal-close { position:absolute; top:.75rem; right:1rem; font-size:1.5rem; cursor:pointer; color:var(--dim); }

/* ── Quota modal ─────────────────────────────────────── */
.quota-badge { display:inline-flex; align-items:center; gap:.4rem; background:rgba(245,158,11,.15); border:1px solid var(--warn); color:var(--warn); border-radius:999px; padding:.3rem .75rem; font-size:.78rem; font-weight:600; }

/* ── Toast ───────────────────────────────────────────── */
#toast { position:fixed; bottom:1.5rem; right:1.5rem; padding:.85rem 1.5rem; border-radius:var(--r2); color:#fff; font-weight:600; font-size:.85rem; z-index:9999; transform:translateX(150%); transition:.35s; max-width:320px; }
#toast.show { transform:none; }
#toast.success { background:var(--ok); }
#toast.error   { background:var(--danger); }
#toast.warn    { background:var(--warn); color:#000; }

/* ── Empty state ─────────────────────────────────────── */
.empty { text-align:center; padding:3rem; color:var(--dim); }
.empty .e-icon { font-size:3.5rem; margin-bottom:.75rem; opacity:.5; }

/* ── Theme toggle button ──────────────────────────────── */
.theme-toggle-btn {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 200;
    background: var(--s2);
    border: 1px solid var(--bdr);
    border-radius: 999px;
    padding: .4rem .9rem;
    font-size: .85rem;
    cursor: pointer;
    color: var(--txt);
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    transition: background .2s, box-shadow .2s;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.theme-toggle-btn:hover {
    background: var(--s3);
    box-shadow: 0 4px 16px rgba(0,0,0,.16);
}
@media(max-width:640px) { .wrap { padding:1rem; } .hero h1 { font-size:1.5rem; } .theme-toggle-btn { top:.5rem; right:.5rem; padding:.35rem .7rem; font-size:.78rem; } }