.announce-banner {
    background: rgba(62,224,197,.12);
    border: 1px solid rgba(62,224,197,.3);
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
}
.preview-text { white-space: pre-wrap; font-size: .86rem; max-height: 360px; overflow: auto; }
.spark { width: 100%; height: 80px; }
.qr-wrap { display: grid; place-items: center; background: #fff; border-radius: 12px; padding: 1rem; }
.folder-drop.drag { outline: 2px dashed var(--accent); }

:root {
    --bg: #07080d;
    --bg-2: #0d1018;
    --card: #121722;
    --line: #232a3a;
    --text: #e9eef8;
    --muted: #8d96ab;
    --accent: #8b7cff;
    --accent-2: #3ee0c5;
    --danger: #ff6b7a;
    --ok: #5ee0a0;
    --info: #7cb8ff;
    --shadow: 0 20px 60px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    background:
        radial-gradient(900px 420px at 10% -10%, rgba(139,124,255,.18), transparent 55%),
        radial-gradient(700px 380px at 110% 0%, rgba(62,224,197,.1), transparent 50%),
        var(--bg);
    color: var(--text);
    font-family: Manrope, "Segoe UI", sans-serif;
    line-height: 1.5;
}
h1, h2, .mark, .price { font-family: Sora, Manrope, sans-serif; letter-spacing: -0.03em; }
h1 { font-size: 2rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 1rem; }
a { color: var(--accent-2); }
.hint, .kicker, .lede, .nav-user { color: var(--muted); }
.hint { font-size: .86rem; }

.app-frame { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 1.2rem 0 4rem; }
.topbar {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding-bottom: 1rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}
.brand { text-decoration: none; color: inherit; display: flex; gap: .55rem; align-items: baseline; }
.mark { color: var(--accent); font-size: 1.5rem; font-style: italic; }
.product { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.nav { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--muted); text-decoration: none; font-size: .92rem; }
.nav a:hover, .nav-out { color: var(--text); }
.nav-out { color: var(--danger) !important; }
.page-head { margin-bottom: 1.3rem; }
.kicker { margin: 0; }

.card, .auth-card {
    background: color-mix(in srgb, var(--card) 92%, black);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.2rem 1.25rem;
    box-shadow: var(--shadow);
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.stats, .plans, .admin-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.admin-links { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.admin-links a { text-decoration: none; color: inherit; display: block; }
.stat span, .plan .lede { color: var(--muted); }
.stat strong, .price { font-size: 1.6rem; color: var(--accent-2); }
.usage-line { margin: 0 0 .6rem; }

.meter { height: 8px; background: #1b2130; border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.stack { display: grid; gap: .75rem; }
.stack.compact { margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
label { display: grid; gap: .35rem; font-size: .86rem; color: var(--muted); }
input, select, button, textarea {
    font: inherit; color: var(--text);
}
input, select, textarea {
    background: #0c1018; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem;
}
.tiny { width: 7.5rem; padding: .35rem .5rem; }
.check { display: flex; align-items: center; gap: .5rem; }

.btn, .linkish {
    border: 0; cursor: pointer; background: none; color: var(--accent-2);
}
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; padding: .7rem 1.1rem; font-weight: 700;
}
.btn.primary { background: linear-gradient(90deg, var(--accent), #6a5af8); color: #fff; }
.btn.ghost { border: 1px solid var(--line); color: var(--text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.linkish.danger, .nav-out, .danger { color: var(--danger); }

.banner { border-radius: 12px; padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; }
.banner.danger { background: rgba(255,107,122,.12); color: #ffb3bb; border-color: rgba(255,107,122,.3); }
.banner.ok { background: rgba(94,224,160,.12); color: #b7f3d3; border-color: rgba(94,224,160,.3); }
.banner.info { background: rgba(124,184,255,.12); color: #c9e2ff; border-color: rgba(124,184,255,.3); }

.dropzone {
    border: 1.5px dashed var(--line); border-radius: 16px; padding: 1.3rem; text-align: center;
    background: rgba(139,124,255,.05);
}
.queue { list-style: none; padding: 0; text-align: left; }
.toolbar, .inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; text-decoration: none; color: var(--muted); }
.chip.on { color: var(--text); background: rgba(139,124,255,.18); border-color: var(--accent); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; color: var(--muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
th, td { padding: .7rem .4rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.empty { color: var(--muted); text-align: center; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; vertical-align: middle; margin-right: .4rem; }
.thumb-btn { background: #1b2130; border: 0; color: var(--text); width: 36px; height: 36px; border-radius: 8px; cursor: pointer; margin-right: .4rem; }

.auth-shell { display: grid; place-items: center; padding: 2rem 1rem; }
.auth-card { width: min(420px, 100%); }
.auth-card.wide { width: min(560px, 100%); }
.auth-card h1 { font-size: 2.1rem; }
.foot-link { margin-top: 1rem; }
.secret { font-family: ui-monospace, monospace; letter-spacing: .12em; }

.modal {
    position: fixed; inset: 0; background: rgba(5,6,10,.86);
    display: grid; place-items: center; z-index: 20; padding: 1rem;
}
.modal[hidden] { display: none; }
.modal img, .modal video { max-width: min(92vw, 1100px); max-height: 86vh; }
.modal-close { position: absolute; top: 1rem; right: 1.2rem; font-size: 2rem; color: #fff; }

.impersonate-banner {
    background: rgba(139,124,255,.16);
    border: 1px solid rgba(139,124,255,.35);
    border-radius: 12px;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
}
.crumbs { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; margin-bottom: .8rem; color: var(--muted); }
.crumbs a { color: var(--accent-2); text-decoration: none; }
.bulk-bar {
    display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
    margin-bottom: .8rem; padding: .6rem; border: 1px dashed var(--line); border-radius: 12px;
}
.fav { color: #ffd36a; margin-right: .25rem; }
.tag { display: inline-block; margin-left: .35rem; font-size: .75rem; color: var(--muted); }
.modal-card { width: min(440px, 100%); }
.gallery-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .8rem;
}
.gallery-item {
    display: grid; gap: .4rem; text-decoration: none; color: inherit;
    background: #0c1018; border: 1px solid var(--line); border-radius: 12px; padding: .6rem;
}
.gallery-item img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }
.gallery-file { display: grid; place-items: center; height: 110px; color: var(--muted); font-weight: 700; }
.invoice-card .price { margin: .4rem 0; }

.nav-toggle {
    display: none;
    border: 1px solid var(--line);
    background: #121722;
    color: var(--text);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-weight: 700;
}
.nav-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: .7rem;
    margin-left: .2rem;
}
.empty-state {
    text-align: center;
    color: var(--muted);
    padding: 2rem 1rem;
}
.empty-state svg { width: 120px; height: 80px; margin-bottom: .6rem; color: var(--accent); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
.thumb-btn.wide { width: 100%; height: 110px; }
.thumb-btn.wide img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }
.resume-list { margin-top: .6rem; }
.diff-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.diff-pair img { max-width: 100%; border-radius: 8px; }
.palette {
    position: fixed; inset: 0; background: rgba(5,6,10,.72);
    display: grid; place-items: start center; padding: 12vh 1rem 1rem; z-index: 40;
}
.palette[hidden] { display: none; }
.palette-card { width: min(520px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; }
.palette-card ul { list-style: none; padding: 0; margin: .6rem 0 0; max-height: 50vh; overflow: auto; }
.palette-card li a { display: block; padding: .4rem .2rem; color: var(--text); text-decoration: none; }
.palette-card li a:hover, .palette-card li.on a { color: var(--accent-2); }
.slideshow-stage {
    position: fixed; inset: 0; background: #07080d; z-index: 50;
    display: grid; place-items: center;
}
.slideshow-stage img { max-width: 94vw; max-height: 90vh; }

@media (max-width: 800px) {
    .grid-2 { grid-template-columns: 1fr; }
    .nav-toggle { display: inline-flex; }
    .nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; }
    .nav.open { display: flex; }
    .toolbar, .inline-form, .bulk-bar { align-items: stretch; }
    .toolbar input, .inline-form input, .bulk-bar select { min-width: 0; }
}