/* ═══════════════════════════════════════════════════════════════
   box — styles
   Dual theme (dark + vibrant light), glassmorphism, modern.
   ═══════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
    font-feature-settings:'cv11','ss01';
    overflow-x:hidden;
    transition:background-color .3s, color .3s;
}
button,input,textarea,select{font-family:inherit;color:inherit;border:none;background:none;outline:none}
input,textarea{user-select:text;-webkit-user-select:text}
button{cursor:pointer}
.mono{font-family:'JetBrains Mono',monospace;font-size:12px}

/* ───────── Theme variables ───────── */
html[data-theme="dark"]{
    --bg:#06060c;
    --bg-mesh-1:rgba(129,140,248,0.22);
    --bg-mesh-2:rgba(45,212,191,0.18);
    --bg-mesh-3:rgba(192,132,252,0.14);
    --bg-mesh-grad:linear-gradient(135deg,#0a0a14,#0a0814,#06060c);

    --surface:rgba(255,255,255,0.04);
    --surface-2:rgba(255,255,255,0.07);
    --surface-3:rgba(255,255,255,0.10);
    --border:rgba(255,255,255,0.08);
    --border-2:rgba(255,255,255,0.16);

    --text:#e8e8ec;
    --text-dim:#9ca0b0;
    --text-faint:#5b5f70;

    --teal:#2dd4bf;
    --indigo:#818cf8;
    --pink:#fb7185;
    --purple:#c084fc;
    --amber:#fbbf24;
    --red:#ef4444;
    --green:#22c55e;
    --sky:#38bdf8;

    --count-color:#38bdf8;
    --count-color-soft:rgba(56,189,248,0.14);
    --count-warn:#f97316;
    --count-warn-bg:rgba(249,115,22,0.18);
    --count-crit:#ef4444;
    --count-crit-bg:rgba(239,68,68,0.22);

    --backdrop:rgba(6,6,12,0.7);
    --card-grad:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));
}

html[data-theme="light"]{
    --bg:#f7f7f8;
    --bg-mesh-1:rgba(79,70,229,0.06);
    --bg-mesh-2:rgba(13,148,136,0.05);
    --bg-mesh-3:transparent;
    --bg-mesh-grad:linear-gradient(180deg,#f7f7f8,#ffffff);

    --surface:#ffffff;
    --surface-2:#ffffff;
    --surface-3:#f1f1f3;
    --border:rgba(15,23,42,0.07);
    --border-2:rgba(15,23,42,0.14);

    --text:#0f172a;
    --text-dim:#1e293b;
    --text-faint:#334155;

    --teal:#0d9488;
    --indigo:#4338ca;
    --pink:#be185d;
    --purple:#7c3aed;
    --amber:#b45309;
    --red:#b91c1c;
    --green:#15803d;
    --sky:#0369a1;

    --count-color:#0369a1;
    --count-color-soft:rgba(3,105,161,0.09);
    --count-warn:#c2410c;
    --count-warn-bg:rgba(194,65,12,0.11);
    --count-crit:#b91c1c;
    --count-crit-bg:rgba(185,28,28,0.13);

    --backdrop:rgba(247,247,248,0.82);
    --card-grad:linear-gradient(180deg,#ffffff,#fcfcfd);
    --card-shadow:0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.10);
}

html[data-theme="dark"]{
    --card-shadow:0 40px 80px -40px rgba(0,0,0,0.6);
}

:root{
    --radius:16px;
    --radius-sm:10px;
}

/* Animated mesh-gradient background (dark only) */
body::before{
    content:'';position:fixed;inset:-20%;z-index:-2;
    background:
        radial-gradient(ellipse 50% 35% at 15% 20%,var(--bg-mesh-1),transparent 60%),
        radial-gradient(ellipse 60% 40% at 85% 85%,var(--bg-mesh-2),transparent 60%),
        radial-gradient(ellipse 40% 30% at 80% 15%,var(--bg-mesh-3),transparent 60%),
        var(--bg-mesh-grad);
    animation:bgDrift 48s ease-in-out infinite;
    filter:blur(40px);
    transition:background .3s;
}
html[data-theme="light"] body::before{
    background:var(--bg-mesh-grad);
    animation:none;filter:none;
}
body::after{
    content:'';position:fixed;inset:0;z-index:-1;
    background:radial-gradient(ellipse at center,transparent 0%,var(--backdrop) 80%);
    pointer-events:none;
    transition:background .3s;
}
html[data-theme="light"] body::after{display:none}
@keyframes bgDrift{
    0%,100%{transform:translate(0,0) scale(1)}
    50%{transform:translate(2%,-2%) scale(1.04)}
}

.material-symbols-rounded{
    font-family:'Material Symbols Rounded';
    font-weight:400;line-height:1;letter-spacing:normal;
    display:inline-block;font-feature-settings:'liga';
    user-select:none;vertical-align:middle;
    font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}

/* Boot loader (hides UI until boot decides which screen to show) */
.boot-loader{
    position:fixed;inset:0;z-index:999;
    display:flex;align-items:center;justify-content:center;
    background:var(--bg);
    transition:opacity .25s ease-out;
}
.boot-loader.fade{opacity:0;pointer-events:none}
.boot-spinner{
    width:36px;height:36px;border-radius:50%;
    border:3px solid var(--surface-3);
    border-top-color:var(--indigo);
    animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─────────── Screens ─────────── */
.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:24px;gap:24px;box-sizing:border-box}
.screen.center{
    display:grid;
    place-items:center;
    padding:24px;
    overflow-y:auto;
}
.hidden{display:none!important}

/* ─────────── Auth / Passphrase cards ─────────── */
.card{
    width:100%;max-width:420px;
    background:var(--card-grad);
    border:1px solid var(--border);
    border-radius:22px;padding:32px;
    backdrop-filter:blur(40px);
}
.card h1{font-size:24px;font-weight:700;margin-bottom:6px;letter-spacing:-0.02em}
.card .sub{color:var(--text-dim);font-size:14px;margin-bottom:28px}
.card .field{margin-bottom:16px}
.card label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
html[data-theme="light"] .card label{color:#334155}
.card input{
    width:100%;padding:14px 16px;
    background:var(--surface);
    border:1px solid var(--border-2);
    border-radius:var(--radius-sm);
    font-size:15px;transition:border-color .15s;
}
html[data-theme="light"] .card input{border-color:#475569}
.card input:focus{border-color:var(--indigo)}

/* Password input group with view + copy buttons */
.input-group{
    position:relative;display:flex;align-items:stretch;
    background:var(--surface);border:1px solid var(--border-2);
    border-radius:var(--radius-sm);transition:border-color .15s;
}
html[data-theme="light"] .input-group{border-color:#475569}
.input-group:focus-within{border-color:var(--indigo)}
html[data-theme="light"] .input-group:focus-within{border-color:var(--indigo)}
.input-group input{
    flex:1;background:transparent!important;
    border:none!important;border-radius:0!important;
    padding:14px 16px;
}
.input-group input:focus{border-color:transparent!important}
.pw-btn{
    width:44px;display:grid;place-items:center;
    color:var(--text-dim);
    border-left:1px solid var(--border);
    transition:background .15s,color .15s;
}
.pw-btn:hover{background:var(--surface-3);color:var(--text)}
.pw-btn[data-act="toggle"]{color:var(--amber)}
.pw-btn[data-act="toggle"]:hover{background:color-mix(in srgb,var(--amber) 14%,transparent)}
.pw-btn[data-act="copy"]{color:var(--teal)}
.pw-btn[data-act="copy"]:hover{background:color-mix(in srgb,var(--teal) 14%,transparent)}
.pw-btn[data-act="paste"]{color:var(--indigo)}
.pw-btn[data-act="paste"]:hover{background:color-mix(in srgb,var(--indigo) 14%,transparent)}
.pw-btn.active{color:var(--indigo)}
.pw-btn .material-symbols-rounded{font-size:18px}
.card .btn-primary{
    width:100%;padding:14px 16px;margin-top:8px;
    background:linear-gradient(180deg,var(--indigo),color-mix(in srgb,var(--indigo) 85%,black));
    color:white;
    border-radius:var(--radius-sm);
    font-size:15px;font-weight:600;
}
.card .btn-primary:hover{transform:none;filter:brightness(1.1)}
.card .btn-primary:active{transform:translateY(0)}
.card .btn-primary:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.card .error{
    margin-top:12px;padding:10px 12px;
    background:var(--count-crit-bg);
    border:1px solid var(--count-crit);
    border-radius:var(--radius-sm);
    color:var(--count-crit);font-size:13px;
}
.card .hint{font-size:12px;color:var(--text-faint);margin-top:10px;line-height:1.5}

.logo{
    display:flex;align-items:center;gap:10px;margin-bottom:32px;
    font-size:20px;font-weight:700;letter-spacing:-0.02em;
}
.logo-box{
    width:36px;height:36px;position:relative;
    background:transparent;display:grid;place-items:center;
    color:#ec4899;
}
.logo-box svg{width:100%;height:100%;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(236,72,153,0.3))}
html[data-theme="light"] .logo-box{color:#db2777}
.logo-box .material-symbols-rounded{font-size:20px;color:var(--text);position:relative;z-index:1}
.logo-box.lock-overlay .lock-icon{
    position:absolute;z-index:2;font-size:11px;
    background:var(--bg);
    border-radius:50%;width:15px;height:15px;
    display:grid;place-items:center;
    bottom:-1px;right:-1px;color:var(--pink);
    border:1.5px solid var(--pink);
}

/* ─────────── Main app layout ─────────── */
.app-wrap{max-width:940px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:14px}
header.topbar{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 14px;
    background:transparent;border:none;
    border-bottom:1px solid var(--border);
    border-radius:0;
}
html[data-theme="light"] header.topbar{border-bottom-color:var(--border-2)}
header .brand{display:flex;align-items:center;gap:10px;letter-spacing:-0.01em}
.brand-stack{display:flex;flex-direction:column;gap:1px;line-height:1.05}
.brand-name{font-size:16px;font-weight:500}
.build-tag{
    font-family:'JetBrains Mono',monospace;font-size:9px;
    color:var(--text-faint);font-weight:400;
    letter-spacing:0.02em;
}
header .brand .logo-box{width:30px;height:30px;border-radius:9px}
header .brand .logo-box .material-symbols-rounded{font-size:17px}
header .user-info{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim)}
header .user-info .email{color:var(--text);margin-right:4px;font-weight:500}
header .icon-btn{
    width:44px;height:44px;border-radius:14px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    display:grid;place-items:center;
    transition:background .15s;
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12),
               0 1px 4px rgba(0,0,0,0.1);
}
html[data-theme="light"] header .icon-btn{
    background:rgba(255,255,255,0.55);
    border-color:rgba(15,23,42,0.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9),
               0 1px 2px rgba(15,23,42,0.08);
}
header .icon-btn:hover{background:var(--surface-3);border-color:var(--border-2);transform:none}
header .icon-btn .material-symbols-rounded{font-size:20px}
header #btn-theme{color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,transparent);border-color:color-mix(in srgb,var(--amber) 30%,transparent)}
header #btn-theme:hover{background:color-mix(in srgb,var(--amber) 20%,transparent)}
header #btn-settings{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
header #btn-settings:hover{background:color-mix(in srgb,var(--green) 22%,transparent)}
header #btn-security{color:var(--teal);background:color-mix(in srgb,var(--teal) 12%,transparent);border-color:color-mix(in srgb,var(--teal) 30%,transparent)}
header #btn-security:hover{background:color-mix(in srgb,var(--teal) 20%,transparent)}
header #btn-lock{color:var(--purple);background:color-mix(in srgb,var(--purple) 12%,transparent);border-color:color-mix(in srgb,var(--purple) 30%,transparent)}
header #btn-lock:hover{background:color-mix(in srgb,var(--purple) 20%,transparent)}
header #btn-logout{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent);border-color:color-mix(in srgb,var(--red) 30%,transparent)}
header #btn-logout:hover{background:color-mix(in srgb,var(--red) 20%,transparent)}

/* Combined action bar (upload + TTL) */
.action-bar{
    display:flex;align-items:center;gap:10px;
    flex-wrap:wrap;
}
.action-bar > .ttl-row{flex:1;min-width:0;align-self:stretch}
.action-bar > .upload-compact{align-self:stretch}

.upload-compact{
    display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
    padding:0 18px;height:42px;box-sizing:border-box;
    background:linear-gradient(135deg,
        color-mix(in srgb,var(--amber) 85%,transparent) 0%,
        color-mix(in srgb,var(--pink) 85%,transparent) 55%,
        color-mix(in srgb,var(--purple) 85%,transparent) 100%);
    color:#fff;font-size:13px;font-weight:600;letter-spacing:0.01em;
    border:1px solid color-mix(in srgb,var(--pink) 55%,transparent);
    border-radius:var(--radius);
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
    backdrop-filter:blur(12px) saturate(160%);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
}
.upload-compact:hover{filter:brightness(1.1)}
.upload-compact.active{background:linear-gradient(180deg,var(--teal),color-mix(in srgb,var(--teal) 85%,black));border-color:var(--teal)}
.upload-compact input[type=file]{display:none}
.upload-compact .material-symbols-rounded{font-size:18px}

/* Session badge in topbar */
.session-badge{
    display:inline-flex;align-items:center;justify-content:center;gap:3px;
    width:44px;height:44px;border-radius:14px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    color:var(--green);
    font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;
    cursor:pointer;
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
html[data-theme="light"] .session-badge{
    background:rgba(255,255,255,0.55);
    border-color:rgba(15,23,42,0.18);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
}
.session-badge .material-symbols-rounded{font-size:16px}
.session-badge.multi{color:var(--amber)}
.session-badge .material-symbols-rounded{font-size:14px}
.session-badge.multi{
    background:color-mix(in srgb,var(--amber) 14%,transparent);
    border-color:color-mix(in srgb,var(--amber) 35%,transparent);
    color:var(--amber);
}

/* TTL selector */
.ttl-row{
    display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
    padding:0 12px;height:42px;min-height:42px;max-height:42px;
    box-sizing:border-box;
    background:var(--surface);
    border:1px solid var(--border);border-radius:var(--radius);
    backdrop-filter:blur(8px);
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:thin;
}
.ttl-row::-webkit-scrollbar{height:3px}
.ttl-row::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}
.ttl-row .ttl-label{color:var(--pink)!important;font-weight:600}
.ttl-row .ttl-label{
    font-size:13px;color:var(--text-dim);margin-right:4px;
    display:flex;align-items:center;gap:6px;font-weight:500;
}
.ttl-row .ttl-label .material-symbols-rounded{font-size:16px}
.ttl-pill{
    padding:7px 16px;border-radius:999px;flex-shrink:0;
    background:color-mix(in srgb,var(--surface-2) 80%,transparent);
    border:1px solid color-mix(in srgb,var(--border-2) 70%,transparent);
    font-size:12px;font-weight:500;color:var(--text-dim);
    transition:all .15s;
    display:inline-flex;align-items:center;gap:4px;
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.ttl-pill .material-symbols-rounded{font-size:14px}
.ttl-pill:hover{background:var(--surface-3);color:var(--text)}
.ttl-pill.active{
    background:color-mix(in srgb,var(--pink) 22%,transparent);
    border-color:var(--pink);
    color:var(--pink);font-weight:600;
}
.ttl-pill.vault-pill{border-color:color-mix(in srgb,var(--purple) 40%,transparent)}
.ttl-pill.vault-pill.active{
    background:color-mix(in srgb,var(--purple) 20%,transparent);
    border-color:var(--purple);
    color:var(--purple);
}

/* Quick paste */
.paste-area{
    background:var(--surface);border:1px solid var(--border-2);
    border-radius:var(--radius);padding:14px;
    display:flex;flex-direction:column;gap:10px;
}
html[data-theme="light"] .paste-area{border-color:#475569}
.paste-area textarea{
    width:100%;min-height:260px;max-height:640px;resize:vertical;
    background:transparent;font-size:14px;line-height:1.6;
    padding:4px;color:var(--text);
    font-family:'JetBrains Mono',ui-monospace,monospace;
}
.paste-area textarea::placeholder{color:var(--text-faint);opacity:0.5}
.paste-row{display:flex;justify-content:flex-end;gap:8px}
.btn-send{
    padding:9px 18px;border-radius:12px;color:#fff;
    background:linear-gradient(135deg,
        color-mix(in srgb,var(--amber) 85%,transparent) 0%,
        color-mix(in srgb,var(--pink) 85%,transparent) 55%,
        color-mix(in srgb,var(--purple) 85%,transparent) 100%);
    border:1px solid color-mix(in srgb,var(--pink) 55%,transparent);
    font-size:13px;font-weight:500;
    display:inline-flex;align-items:center;gap:6px;
    backdrop-filter:blur(12px) saturate(160%);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-send:hover{filter:brightness(1.08)}
.btn-send:disabled{opacity:0.5;cursor:not-allowed;filter:none}
.btn-send .material-symbols-rounded{font-size:16px}

/* View tabs (Active / Vault) + filter button — equal widths, capped */
.view-tabs{
    display:grid;
    grid-template-columns:minmax(90px,130px) minmax(90px,130px) minmax(90px,130px) 1fr;
    grid-template-areas: "active vault filter quota";
    align-items:center;gap:6px;
    padding:5px;margin:10px 0 4px;
    background:transparent;border:1px solid var(--border);
    border-radius:999px;
}
.view-tabs > .view-tab[data-view="active"]{grid-area:active}
.view-tabs > .view-tab[data-view="vault"]{grid-area:vault}
.view-tabs > .filter-wrap{grid-area:filter;display:flex}
.view-tabs > .filter-wrap .filter-btn{width:100%;justify-content:center}
.view-tabs > .view-quota{grid-area:quota}
.view-tab{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:8px 14px;border-radius:999px;
    font-size:13px;font-weight:600;color:var(--text-dim);
    transition:background .15s, color .15s;cursor:pointer;
    border:1px solid #94a3b8;
    background:transparent;width:100%;
}
html[data-theme="light"] .view-tab{border-color:#cbd5e1}
.view-tab.active{border-color:transparent}
.view-tab:hover{color:var(--text)}
.view-tab.active{
    background:var(--pink);
    color:#fff;
}
html[data-theme="light"] .view-tab.active{color:#fff}
.view-tab[data-view="vault"].active{
    background:var(--purple);
    color:#fff;
}
.view-tab .material-symbols-rounded{font-size:16px}
.tab-badge{
    display:inline-flex;min-width:22px;padding:1px 8px;
    border-radius:999px;font-size:11px;font-weight:700;
    background:rgba(255,255,255,0.08);color:var(--text-dim);
    font-family:'JetBrains Mono',monospace;
    justify-content:center;align-items:center;
}
html[data-theme="light"] .tab-badge{background:rgba(15,23,42,0.1)}
.view-tab.active .tab-badge{
    background:rgba(255,255,255,0.25);
    color:#fff;
}
.view-quota{
    margin-left:auto;padding-right:12px;
    font-size:12px;font-weight:400;
    font-family:'JetBrains Mono',monospace;
    display:inline-flex;align-items:center;gap:8px;
}
.quota-count{color:var(--teal)}
.quota-size{color:var(--pink)}
.quota-max{color:var(--text-faint);font-weight:400}
.quota-sep{color:var(--text-faint);font-weight:400}
.items{display:flex;flex-direction:column;gap:14px}

/* File type filter — dropdown button */
.filter-wrap{position:relative}
.filter-btn{
    display:inline-flex;align-items:center;gap:6px;
    padding:6px 10px 6px 14px;border-radius:999px;
    background:transparent;border:1px solid #94a3b8;
    color:var(--text-dim);font-size:13px;font-weight:600;
    cursor:pointer;transition:all .15s;
}
html[data-theme="light"] .filter-btn{border-color:#cbd5e1}
.filter-btn:hover{color:var(--text);border-color:var(--text-dim)}
.filter-btn.filtered{background:color-mix(in srgb,var(--teal) 20%,transparent);border-color:var(--teal);color:var(--teal);font-weight:600}
.filter-btn .material-symbols-rounded{font-size:14px}
.filter-btn .filter-chev{font-size:16px;transition:transform .2s;color:var(--text-faint)}
.filter-wrap.open .filter-chev{transform:rotate(180deg)}
.filter-btn-label{font-weight:600}

.chip-count{
    display:inline-flex;align-items:center;justify-content:center;
    min-width:18px;height:18px;padding:0 5px;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    color:var(--text-faint);
    font-size:10px;font-weight:700;font-family:'JetBrains Mono',monospace;
    line-height:1;
}
html[data-theme="light"] .chip-count{background:rgba(15,23,42,0.08)}
.filter-btn.filtered .chip-count{background:color-mix(in srgb,var(--teal) 35%,transparent);color:var(--teal)}

/* Filter popup menu */
.filter-menu{
    position:absolute;top:calc(100% + 6px);left:0;z-index:30;
    min-width:320px;
    background:#141420;
    border:2px solid var(--border-2);
    border-radius:14px;
    box-shadow:0 20px 40px -10px rgba(0,0,0,0.6);
    display:flex;flex-direction:column;
}
html[data-theme="light"] .filter-menu{
    background:#ffffff;border-color:#cbd5e1;
    box-shadow:0 20px 40px -10px rgba(15,23,42,0.15);
}
.filter-menu-header{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;
    border-bottom:1px solid var(--border);
}
.filter-menu-title{
    flex:1;font-size:13px;font-weight:700;color:var(--text);
    letter-spacing:0.02em;
}
.filter-menu-back,.filter-menu-close{
    width:30px;height:30px;border-radius:8px;
    background:var(--surface);border:1px solid var(--border-2);
    color:var(--text-dim);cursor:pointer;
    display:grid;place-items:center;
    transition:background .15s;
}
.filter-menu-back:hover,.filter-menu-close:hover{background:var(--surface-3);color:var(--text)}
.filter-menu-back .material-symbols-rounded,
.filter-menu-close .material-symbols-rounded{font-size:18px}
.filter-menu-grid{
    display:grid;grid-template-columns:repeat(2,minmax(140px,1fr));
    gap:4px;padding:8px;
}
.filter-menu-item{
    display:flex;align-items:center;gap:8px;
    padding:9px 11px;border-radius:10px;
    background:transparent;border:1.5px solid var(--border);color:var(--text);
    font-size:13px;font-weight:600;text-align:left;cursor:pointer;
    transition:background .15s, border-color .15s, transform .1s;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
.filter-menu-item[data-filter="all"]{background:color-mix(in srgb,var(--teal) 10%,transparent);border-color:color-mix(in srgb,var(--teal) 70%,transparent)}
.filter-menu-item[data-filter="text"]{background:color-mix(in srgb,var(--indigo) 10%,transparent);border-color:color-mix(in srgb,var(--indigo) 70%,transparent)}
.filter-menu-item[data-filter="url"]{background:color-mix(in srgb,var(--pink) 10%,transparent);border-color:color-mix(in srgb,var(--pink) 70%,transparent)}
.filter-menu-item[data-filter="image"]{background:color-mix(in srgb,var(--purple) 10%,transparent);border-color:color-mix(in srgb,var(--purple) 70%,transparent)}
.filter-menu-item[data-filter="video"]{background:color-mix(in srgb,#f97316 10%,transparent);border-color:color-mix(in srgb,#f97316 70%,transparent)}
.filter-menu-item[data-filter="audio"]{background:color-mix(in srgb,var(--green) 10%,transparent);border-color:color-mix(in srgb,var(--green) 70%,transparent)}
.filter-menu-item[data-filter="doc"]{background:color-mix(in srgb,var(--amber) 10%,transparent);border-color:color-mix(in srgb,var(--amber) 70%,transparent)}
.filter-menu-item[data-filter="code"]{background:color-mix(in srgb,var(--sky) 10%,transparent);border-color:color-mix(in srgb,var(--sky) 70%,transparent)}
.filter-menu-item[data-filter="zip"]{background:color-mix(in srgb,#a855f7 10%,transparent);border-color:color-mix(in srgb,#a855f7 70%,transparent)}
.filter-menu-item[data-filter="exe"]{background:color-mix(in srgb,var(--red) 10%,transparent);border-color:color-mix(in srgb,var(--red) 70%,transparent)}
.filter-menu-item[data-filter="other"]{border-color:color-mix(in srgb,var(--text-dim) 35%,transparent)}
.filter-menu-item .material-symbols-rounded{font-size:18px;font-variation-settings:'FILL' 1,'wght' 500}
.filter-menu-item[data-filter="all"] .material-symbols-rounded{color:var(--teal)}
.filter-menu-item[data-filter="text"] .material-symbols-rounded{color:var(--indigo)}
.filter-menu-item[data-filter="url"] .material-symbols-rounded{color:var(--pink)}
.filter-menu-item[data-filter="image"] .material-symbols-rounded{color:var(--purple)}
.filter-menu-item[data-filter="video"] .material-symbols-rounded{color:#f97316}
.filter-menu-item[data-filter="audio"] .material-symbols-rounded{color:var(--green)}
.filter-menu-item[data-filter="doc"] .material-symbols-rounded{color:var(--amber)}
.filter-menu-item[data-filter="code"] .material-symbols-rounded{color:var(--sky)}
.filter-menu-item[data-filter="zip"] .material-symbols-rounded{color:#a855f7}
.filter-menu-item[data-filter="exe"] .material-symbols-rounded{color:var(--red)}
.filter-menu-item[data-filter="other"] .material-symbols-rounded{color:var(--text-dim)}
.filter-menu-item .fmi-label{flex:1}
.filter-menu-item:hover{background:color-mix(in srgb,var(--text) 8%,transparent)}
.filter-menu-item[data-filter="text"]:hover{background:color-mix(in srgb,var(--indigo) 14%,transparent)}
.filter-menu-item[data-filter="url"]:hover{background:color-mix(in srgb,var(--pink) 14%,transparent)}
.filter-menu-item[data-filter="image"]:hover{background:color-mix(in srgb,var(--purple) 14%,transparent)}
.filter-menu-item[data-filter="video"]:hover{background:color-mix(in srgb,#f97316 14%,transparent)}
.filter-menu-item[data-filter="audio"]:hover{background:color-mix(in srgb,var(--green) 14%,transparent)}
.filter-menu-item[data-filter="doc"]:hover{background:color-mix(in srgb,var(--amber) 14%,transparent)}
.filter-menu-item[data-filter="code"]:hover{background:color-mix(in srgb,var(--sky) 14%,transparent)}
.filter-menu-item[data-filter="zip"]:hover{background:color-mix(in srgb,#a855f7 14%,transparent)}
.filter-menu-item[data-filter="exe"]:hover{background:color-mix(in srgb,var(--red) 14%,transparent)}
.filter-menu-item.active{color:#fff;font-weight:600}
.filter-menu-item.active .material-symbols-rounded{color:#fff}
.filter-menu-item.active .chip-count{background:rgba(255,255,255,0.25);color:#fff}
.filter-menu-item[data-filter="all"].active{background:var(--teal)}
.filter-menu-item[data-filter="text"].active{background:var(--indigo)}
.filter-menu-item[data-filter="url"].active{background:var(--pink)}
.filter-menu-item[data-filter="image"].active{background:var(--purple)}
.filter-menu-item[data-filter="video"].active{background:#f97316}
.filter-menu-item[data-filter="audio"].active{background:var(--green)}
.filter-menu-item[data-filter="doc"].active{background:var(--amber)}
.filter-menu-item[data-filter="code"].active{background:var(--sky)}
.filter-menu-item[data-filter="zip"].active{background:#a855f7}
.filter-menu-item[data-filter="exe"].active{background:var(--red)}
.filter-menu-item[data-filter="other"].active{background:var(--text-dim)}
.filter-menu-item.empty{opacity:0.4}
@media (max-width:620px){
    .filter-menu{
        position:fixed;
        top:auto;bottom:12px;
        left:12px;right:12px;
        width:auto;min-width:0;max-width:none;
        transform:none;
        max-height:80dvh;overflow-y:auto;
        box-shadow:0 30px 60px -10px rgba(0,0,0,0.7);
    }
    .filter-menu-grid{grid-template-columns:repeat(2,1fr);padding:10px}
    .filter-menu-item{padding:12px 10px;font-size:13px}
    .filter-menu-item .material-symbols-rounded{font-size:20px}
    .filter-btn{padding:6px 8px 6px 10px}
    .filter-btn-label{display:none}
}
.items-empty{
    text-align:center;padding:20px 16px;
    color:var(--text-faint);font-size:12px;
    background:var(--surface);border:1px dashed var(--border);
    border-radius:var(--radius);
}

/* Item card — colored accent bar on left, grid layout so snippet
   flows under the action buttons. */
.item{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-rows:auto auto auto;
    column-gap:14px;row-gap:3px;
    align-items:start;
    background:var(--surface);
    border:none;border-left:7px solid var(--indigo);
    border-radius:0 var(--radius) var(--radius) 0;
    padding:5px 14px 6px;
    transition:all .15s;cursor:pointer;
}
.item-icon{grid-column:1;grid-row:1;align-self:center}
.item-info{display:contents}
.item-name{grid-column:2;grid-row:1;min-width:0;align-self:center}
.item-actions{grid-column:3;grid-row:1;align-self:center;margin-top:-2px;margin-bottom:-2px}
.item-snippet{grid-column:1 / -1;grid-row:2}
.item-meta{grid-column:1 / -1;grid-row:3}
.item:hover{background:var(--surface-2)}

.item[data-kind="file"]{border-left-color:var(--teal)}
.item[data-kind="text"]{border-left-color:var(--indigo)}
.item[data-kind="url"]{border-left-color:var(--pink)}
.item.vault-item{border-left-color:var(--purple)}

.item.expiring-warn{border-left-color:var(--count-warn)!important}
.item.expiring-crit{border-left-color:var(--count-crit)!important}

.item-icon{
    width:42px;height:42px;border-radius:12px;flex-shrink:0;
    display:grid;place-items:center;
}
.item-icon.type-file{background:color-mix(in srgb,var(--teal) 18%,transparent);color:var(--teal)}
.item-icon.type-text{background:color-mix(in srgb,var(--indigo) 18%,transparent);color:var(--indigo)}
.item-icon.type-url{background:color-mix(in srgb,var(--pink) 18%,transparent);color:var(--pink)}
.item-icon .material-symbols-rounded{font-size:22px}

.item-info{flex:1;min-width:0}
.item-name{
    font-size:14px;font-weight:400;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:flex;align-items:center;gap:6px;
}
.item-snippet{
    font-size:12px;color:var(--text-dim);
    margin:8px 0 4px;padding:8px 10px;
    line-height:1.5;font-family:'JetBrains Mono',ui-monospace,monospace;
    display:-webkit-box;-webkit-line-clamp:var(--preview-lines, 10);-webkit-box-orient:vertical;
    overflow:hidden;text-overflow:ellipsis;
    word-break:break-word;white-space:pre-wrap;
    background:var(--surface-3);
    border-left:2px solid var(--border-2);
    border-radius:6px;
}
html[data-theme="light"] .item-snippet{background:#f1f5f9;border-left-color:#94a3b8}
.item[data-kind="file"] .item-name{color:var(--teal)}
.item[data-kind="text"] .item-name{color:var(--indigo)}
.item[data-kind="url"] .item-name{color:var(--pink)}
.item.vault-item[data-kind="file"] .item-name{color:var(--purple)}
.item-meta{
    display:flex;align-items:center;gap:10px;
    font-size:12px;color:var(--text-dim);margin-top:2px;
    font-family:'JetBrains Mono',monospace;
}
.item-meta .sep{color:var(--text-faint)}
.countdown{
    color:var(--count-color);
    background:var(--count-color-soft);
    padding:2px 8px;border-radius:999px;
    font-weight:500;letter-spacing:0.02em;
}
.countdown.warn{color:var(--count-warn);background:var(--count-warn-bg)}
.countdown.crit{color:var(--count-crit);background:var(--count-crit-bg);font-weight:700}
.countdown.vault{color:var(--purple);background:color-mix(in srgb,var(--purple) 18%,transparent)}

.item-actions{display:flex;gap:2px;flex-shrink:0}
.act-btn{
    width:26px;height:26px;border-radius:6px;
    background:transparent;border:none;
    display:grid;place-items:center;
    transition:background .15s,transform .1s;
}
.act-btn[data-action="copy"]{color:var(--indigo)}
.act-btn[data-action="copy"]:hover{background:color-mix(in srgb,var(--indigo) 14%,transparent)}
.act-btn[data-action="download"]{color:var(--teal)}
.act-btn[data-action="download"]:hover{background:color-mix(in srgb,var(--teal) 14%,transparent)}
.act-btn[data-action="extend"]{color:var(--amber)}
.act-btn[data-action="extend"]:hover{background:color-mix(in srgb,var(--amber) 14%,transparent)}
.act-btn.burn{color:var(--red)}
.act-btn.burn:hover{background:color-mix(in srgb,var(--red) 14%,transparent)}
.act-btn:active{transform:scale(0.92)}
.act-btn.burn.confirming{
    background:var(--red);color:white;
    animation:pulseBurn 0.8s ease-in-out infinite;
}
@keyframes pulseBurn{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 50%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--red) 0%,transparent)}}
.act-btn .material-symbols-rounded{font-size:18px}

/* Upload progress bar */
.item-progress-wrap{
    position:absolute;left:0;right:0;bottom:0;
    height:3px;background:var(--surface-3);
    border-radius:0 0 var(--radius) var(--radius);overflow:hidden;
}
.item-progress{
    height:100%;background:linear-gradient(90deg,var(--indigo),var(--teal));
    width:0%;transition:width .2s linear;
}
.item.phase-zipping .item-progress{background:linear-gradient(90deg,var(--amber),var(--amber))}
.item.phase-encrypting .item-progress{background:linear-gradient(90deg,var(--amber),var(--pink))}
.item.phase-uploading .item-progress{background:linear-gradient(90deg,var(--indigo),var(--teal))}
.item.phase-done .item-progress-wrap{display:none}

.item[data-phase]:not([data-phase=""]):not([data-phase="done"]) .item-name::after{
    content:attr(data-phase-label);
    display:inline-flex;align-items:center;gap:4px;
    font-size:10px;font-weight:700;
    padding:2px 8px;border-radius:999px;
    margin-left:8px;letter-spacing:0.04em;text-transform:uppercase;
}
.item.phase-zipping .item-name::after{background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber)}
.item.phase-encrypting .item-name::after{background:color-mix(in srgb,var(--pink) 20%,transparent);color:var(--pink)}
.item.phase-uploading .item-name::after{background:color-mix(in srgb,var(--indigo) 20%,transparent);color:var(--indigo)}

/* Toast */
.toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
    padding:10px 16px;border-radius:12px;
    background:var(--surface-2);border:1px solid var(--border-2);
    backdrop-filter:blur(20px);
    font-size:13px;color:var(--text);
    display:flex;align-items:center;gap:8px;
    z-index:1000;box-shadow:0 12px 32px -12px rgba(0,0,0,0.5);
    animation:toast-in .2s ease-out;
}
.toast.error{border-color:var(--count-crit);color:var(--count-crit)}
.toast.success{border-color:var(--green);color:var(--green)}
@keyframes toast-in{from{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* Global drop overlay */
.drop-overlay{
    position:fixed;inset:0;pointer-events:none;z-index:500;
    background:var(--backdrop);backdrop-filter:blur(8px);
    display:none;align-items:center;justify-content:center;
    font-size:20px;font-weight:600;color:var(--indigo);
}
.drop-overlay.active{display:flex}
.drop-overlay .inner{
    padding:40px 60px;border-radius:24px;
    border:2px dashed var(--indigo);
    background:color-mix(in srgb,var(--indigo) 10%,transparent);
}

/* ─────────── Preview modal ─────────── */
.modal-backdrop{
    position:fixed;inset:0;z-index:600;
    background:var(--backdrop);backdrop-filter:blur(12px);
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    animation:fade-in .15s ease-out;
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.modal{
    width:100%;max-width:980px;max-height:92dvh;
    background:var(--surface-2);border:1px solid var(--border-2);
    border-radius:22px;overflow:hidden;
    display:flex;flex-direction:column;
    backdrop-filter:blur(40px);
    box-shadow:0 40px 80px -20px rgba(0,0,0,0.5);
}
.modal-header{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;padding:14px 18px;
    border-bottom:1px solid var(--border);
}
.modal-title{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.preview-back{
    width:34px;height:34px;border-radius:10px;flex-shrink:0;
    background:var(--surface);border:1px solid var(--border);
    display:grid;place-items:center;color:var(--text-dim);
    transition:all .15s;cursor:pointer;
}
.preview-back:hover{background:var(--surface-3);color:var(--text)}
.preview-back .material-symbols-rounded{font-size:18px}
.modal-actions{display:flex;gap:6px}
.modal-actions .icon-btn{
    width:34px;height:34px;border-radius:10px;
    background:var(--surface);border:1px solid var(--border);
    display:grid;place-items:center;color:var(--text-dim);
    transition:all .15s;
}
.modal-actions .icon-btn:hover{background:var(--surface-3);color:var(--text)}
.modal-actions .icon-btn .material-symbols-rounded{font-size:18px}
.modal-meta{
    padding:10px 18px;
    font-family:'JetBrains Mono',monospace;font-size:11px;
    color:var(--text-dim);
    border-bottom:1px solid var(--border);
    display:flex;gap:14px;flex-wrap:wrap;
}
.modal-meta .pill{
    padding:2px 8px;border-radius:999px;
    background:var(--surface);border:1px solid var(--border);
}
.modal-body{
    flex:1;overflow:auto;padding:0;
    font-family:'JetBrains Mono',monospace;font-size:13px;
    line-height:1.6;
}
.modal-body pre{margin:0;padding:18px 22px;overflow:auto;background:transparent}
.modal-body pre code{
    background:transparent!important;
    font-family:'JetBrains Mono',monospace;
    font-size:13px;line-height:1.6;
}
.modal-body.plain{white-space:pre-wrap;padding:18px 22px;word-break:break-word}
.modal-body.binary-note{
    padding:40px 20px;text-align:center;color:var(--text-dim);
    font-family:'Inter',sans-serif;
}
.modal-body.binary-note .material-symbols-rounded{font-size:48px;color:var(--text-faint);margin-bottom:12px}
.modal-body.media{
    padding:0;display:flex;align-items:center;justify-content:center;
    background:var(--bg);min-height:200px;
}
.modal-body.media img{max-width:100%;max-height:80dvh;object-fit:contain;display:block}
.modal-body.media video{max-width:100%;max-height:80dvh;display:block;background:#000}
.modal-body.media audio{width:90%;margin:40px 0}
.modal-body.media iframe{width:100%;height:80dvh;border:none}

/* ZIP tree preview */
.modal-body.zip-preview{padding:0;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}
.zip-header{
    display:flex;align-items:center;gap:10px;
    padding:12px 16px;
    background:var(--surface);border-bottom:1px solid var(--border);
    color:var(--text-dim);font-size:12px;font-weight:500;
}
.zip-header .material-symbols-rounded{font-size:18px;color:var(--amber)}
.zip-tree{padding:8px 4px 12px;max-height:70dvh;overflow:auto}
.zip-entry{
    display:flex;align-items:center;gap:8px;
    padding:4px 12px 4px 6px;border-radius:6px;
    white-space:nowrap;line-height:1.5;
}
.zip-entry:hover{background:var(--surface-2)}
.zip-entry.dir{color:var(--text)}
.zip-icon{font-size:14px;flex-shrink:0;color:var(--text-dim)}
.zip-entry.dir .zip-icon{color:var(--amber)}
.zip-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.zip-entry.dir .zip-path{font-weight:600}
.zip-size{color:var(--text-faint);font-size:10px;flex-shrink:0;margin-left:8px}
.zip-more{
    padding:10px 16px;color:var(--text-faint);font-size:11px;font-style:italic;
    border-top:1px solid var(--border);text-align:center;
}

/* ─────────── Toggle switch (iOS-style) ─────────── */
.toggle-row{
    display:flex;align-items:center;gap:14px;
    padding:12px 14px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:12px;cursor:pointer;
}
.toggle-info{flex:1;min-width:0}
.toggle-title{font-size:13px;font-weight:600;color:var(--text)}
.toggle-sub{font-size:12px;color:var(--text-dim);margin-top:2px}
.toggle-switch{
    position:relative;display:inline-block;flex-shrink:0;
    width:52px;height:30px;
}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{
    position:absolute;inset:0;
    background:var(--surface-3);border:1px solid var(--border-2);
    border-radius:999px;
    transition:background .2s, border-color .2s;
}
.toggle-slider::before{
    content:'';position:absolute;
    top:3px;left:3px;
    width:22px;height:22px;
    background:#fff;border-radius:50%;
    transition:transform .2s;
    box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider{
    background:var(--green);border-color:var(--green);
}
.toggle-switch input:checked + .toggle-slider::before{
    transform:translateX(22px);
}
.toggle-switch input:disabled + .toggle-slider{opacity:0.5;cursor:wait}
.toggle-row:has(input.pending) .toggle-slider{
    background:linear-gradient(90deg,var(--amber),var(--pink));
    animation:pulseBurn 1s ease-in-out infinite;
}

/* ─────────── Recovery code modal ─────────── */
.recovery-code-box{
    background:linear-gradient(135deg,#111118,#1a1a24);
    border:2px solid var(--amber);
    border-radius:12px;padding:18px;margin-bottom:12px;
    text-align:center;
}
html[data-theme="light"] .recovery-code-box{background:#fef3c7;border-color:#d97706}
.recovery-code-box code{
    font-family:'JetBrains Mono',monospace;
    font-size:16px;font-weight:700;letter-spacing:0.08em;
    color:var(--amber);word-break:break-all;line-height:1.6;
    user-select:all;cursor:text;
}
html[data-theme="light"] .recovery-code-box code{color:#92400e}
.recovery-action{
    flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 12px;border-radius:10px;
    background:var(--surface);border:1px solid var(--border-2);
    color:var(--text);font-size:12px;font-weight:600;cursor:pointer;
    transition:background .15s;
}
.recovery-action:hover{background:var(--surface-3)}
.recovery-action .material-symbols-rounded{font-size:16px}
@media print{
    body *{visibility:hidden}
    .recovery-code-box, .recovery-code-box *{visibility:visible}
    .recovery-code-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:3px solid #000;background:#fff}
    .recovery-code-box code{color:#000;font-size:24px}
}

/* ─────────── MFA enroll modal ─────────── */
.mfa-modal{max-width:440px}
.mfa-body{padding:20px;overflow-y:auto}
.mfa-steps{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.mfa-steps li{
    display:flex;align-items:flex-start;gap:12px;
    padding:10px 12px;border-radius:10px;
    background:var(--surface);border:1px solid var(--border);
    font-size:13px;color:var(--text);
}
.mfa-steps li small{color:var(--text-faint);font-size:11px;display:block;margin-top:2px}
.mfa-step-num{
    flex-shrink:0;width:24px;height:24px;border-radius:50%;
    background:linear-gradient(135deg,var(--pink),var(--purple));
    color:#fff;display:grid;place-items:center;
    font-size:12px;font-weight:700;
}
.mfa-qr-frame{
    background:#fff;padding:16px;border-radius:14px;
    display:flex;justify-content:center;margin:0 auto 14px;
    max-width:240px;
    box-shadow:0 4px 20px -6px rgba(0,0,0,0.25);
}
.mfa-qr-frame #mfa-qr{display:flex;justify-content:center}
.mfa-qr-frame img{max-width:100%;height:auto}
.mfa-secret-row{
    display:flex;align-items:center;gap:12px;
    padding:10px 14px;margin-bottom:16px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:10px;
}
.mfa-secret-label{
    font-size:10px;text-transform:uppercase;letter-spacing:0.12em;
    color:var(--text-faint);font-weight:700;flex-shrink:0;
}
.mfa-secret-value{
    flex:1;font-size:12px;color:var(--text);
    word-break:break-all;user-select:all;cursor:text;
    text-align:right;
}
.mfa-verify-form{display:flex;flex-direction:column;gap:10px}
.mfa-code-label{
    font-size:11px;text-transform:uppercase;letter-spacing:0.12em;
    color:var(--text-dim);font-weight:700;
}
.mfa-code-input{
    width:100%;padding:14px 16px;
    background:var(--surface);
    border:2px solid var(--border-2);
    border-radius:12px;
    font-family:'JetBrains Mono',ui-monospace,monospace;
    font-size:22px;letter-spacing:0.4em;text-align:center;
    color:var(--text);
    transition:border-color .15s;
}
.mfa-code-input:focus{border-color:var(--indigo);outline:none}
.mfa-code-input::placeholder{color:var(--text-faint);letter-spacing:0.4em}
.mfa-submit{
    width:100%;padding:12px;margin-top:4px;
    background:linear-gradient(135deg,var(--indigo),var(--purple));
    color:#fff;border:none;border-radius:12px;
    font-size:14px;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    transition:filter .15s;
}
.mfa-submit:hover{filter:brightness(1.1)}
.mfa-submit:disabled{opacity:0.5;cursor:not-allowed;filter:none}
.mfa-submit .material-symbols-rounded{font-size:18px}

/* ─────────── Security drawer ─────────── */
.drawer-backdrop{
    position:fixed;inset:0;z-index:700;
    background:var(--backdrop);backdrop-filter:blur(8px);
    display:flex;justify-content:flex-end;
    animation:fade-in .15s ease-out;
}
.drawer{
    width:100%;max-width:460px;height:100dvh;
    background:var(--surface-2);border-left:1px solid var(--border-2);
    display:flex;flex-direction:column;
    backdrop-filter:blur(40px);
    animation:slide-in .2s cubic-bezier(.2,.8,.2,1);
    overflow:hidden;
}
@media (max-width:620px){
    .drawer{max-width:100%;border-left:none}
    .drawer-header{padding:12px 14px}
    .drawer-body{padding:12px}
    .sec-section{padding:12px;margin-bottom:12px}
    .sec-row{flex-wrap:wrap;gap:4px}
    .sec-row > :last-child{text-align:left;word-break:break-all;max-width:100%}
    .session-row{flex-wrap:wrap}
    .btn-kill-session{margin-left:auto}
}
@keyframes slide-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:1px solid var(--border);
}
.drawer-header h2{
    font-size:16px;font-weight:700;
    display:flex;align-items:center;gap:8px;
}
.drawer-header h2 .material-symbols-rounded{font-size:20px;color:var(--indigo)}
.drawer-header .icon-btn{
    width:34px;height:34px;border-radius:10px;
    background:var(--surface);border:1px solid var(--border);
    display:grid;place-items:center;
}
.drawer-body{flex:1;overflow:auto;padding:20px}
.sec-section{
    margin-bottom:24px;padding:16px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);
}
.sec-section h3{
    font-size:11px;text-transform:uppercase;letter-spacing:0.14em;
    color:var(--text-dim);margin-bottom:12px;font-weight:700;
    display:flex;align-items:center;
}
html[data-theme="light"] .sec-section h3{color:#1e293b}
.sec-row{
    display:flex;justify-content:space-between;align-items:center;
    padding:6px 0;font-size:13px;gap:12px;
}
.sec-row > :first-child{color:var(--text-dim)}
.sec-row > :last-child{font-family:'JetBrains Mono',monospace;font-size:12px;text-align:right;word-break:break-all}
.sec-sessions{
    display:flex;flex-direction:column;gap:8px;margin-bottom:12px;
    font-size:13px;
}
.session-row{
    padding:10px 12px;border-radius:10px;
    background:var(--surface-3);
    display:flex;justify-content:space-between;align-items:center;
    gap:12px;
}
.session-row.current{border:1px solid var(--indigo)}
.btn-kill-session{
    width:36px;height:36px;border-radius:10px;flex-shrink:0;
    background:color-mix(in srgb,var(--red) 12%,transparent);
    border:1px solid color-mix(in srgb,var(--red) 34%,transparent);
    color:var(--red);display:grid;place-items:center;
    transition:all .15s;cursor:pointer;
}
.btn-kill-session:hover{background:color-mix(in srgb,var(--red) 20%,transparent)}
.btn-kill-session.armed{
    background:var(--red);color:#fff;border-color:var(--red);
    animation:pulseBurn 0.8s ease-in-out infinite;
}
.btn-kill-session .material-symbols-rounded{font-size:16px}
.btn-kill-session:disabled{opacity:0.5;cursor:wait}
.session-row .badge{
    font-size:10px;padding:2px 8px;border-radius:999px;
    background:color-mix(in srgb,var(--indigo) 20%,transparent);
    color:var(--indigo);font-weight:700;text-transform:uppercase;
}
/* Invite result box */
.invite-result{
    margin-top:14px;padding:12px;
    background:color-mix(in srgb,var(--green) 8%,transparent);
    border:1px solid color-mix(in srgb,var(--green) 35%,transparent);
    border-radius:10px;
}
.invite-result-head{
    display:flex;align-items:center;gap:6px;
    font-weight:600;color:var(--green);font-size:13px;margin-bottom:8px;
}
.invite-result-label{
    font-size:11px;text-transform:uppercase;letter-spacing:0.08em;
    color:var(--text-faint);font-weight:700;margin-bottom:6px;
}
.invite-link-box{
    display:flex;align-items:stretch;gap:4px;
    padding:8px 10px;
    background:var(--bg);border:1px solid var(--border-2);
    border-radius:8px;
}
.invite-link-text{
    flex:1;font-size:11px;color:var(--text);
    word-break:break-all;user-select:all;cursor:text;
    line-height:1.45;
}
.invite-link-box .pw-btn{
    flex-shrink:0;width:30px;height:30px;border-radius:6px;
    background:transparent;border:1px solid var(--border);
}

/* Preferences (Settings) */
.pref-row{display:flex;flex-direction:column;gap:8px}
.pref-row-head{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.pref-row-head > :first-child{color:var(--text-dim)}
.pref-row-head > :last-child{
    min-width:34px;text-align:right;font-weight:700;color:var(--indigo);
    padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--indigo) 14%,transparent);
}
.pref-range{
    -webkit-appearance:none;appearance:none;
    width:100%;height:6px;background:var(--surface-3);
    border-radius:999px;outline:none;cursor:pointer;
}
.pref-range::-webkit-slider-thumb{
    -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
    background:var(--indigo);border:2px solid #fff;
    box-shadow:0 2px 6px -1px color-mix(in srgb,var(--indigo) 50%,transparent);
    cursor:pointer;transition:transform .1s;
}
.pref-range::-webkit-slider-thumb:hover{transform:none}
.pref-range::-moz-range-thumb{
    width:16px;height:16px;border-radius:50%;
    background:var(--indigo);border:2px solid #fff;cursor:pointer;
}
.pref-hint{font-size:11px;color:var(--text-faint);line-height:1.4}

/* PWA install button */
.btn-pwa-install{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:8px;padding:8px 14px;border-radius:10px;
    background:color-mix(in srgb,var(--teal) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--teal) 40%,transparent);
    color:var(--teal);font-size:12px;font-weight:600;cursor:pointer;
    transition:background .15s;
}
.btn-pwa-install:hover{background:color-mix(in srgb,var(--teal) 22%,transparent)}
.btn-pwa-install .material-symbols-rounded{font-size:16px}

/* Password change form (Settings) */
.pw-section h3{display:flex;align-items:center;gap:6px}
.pw-section h3 .material-symbols-rounded{font-size:14px;color:var(--amber)}
.pw-form .field{margin-bottom:14px}
.pw-form label{
    display:block;font-size:11px;text-transform:uppercase;
    letter-spacing:0.1em;color:var(--text-dim);
    margin-bottom:6px;font-weight:700;
}
html[data-theme="light"] .pw-form label{color:#334155}
.pw-form .input-group{background:var(--bg)}
html[data-theme="light"] .pw-form .input-group{background:var(--surface-3)}
.pw-form input{padding:11px 14px;font-size:14px}
.pw-form .btn-primary{
    width:100%;margin-top:6px;
    padding:11px 14px;font-size:14px;
    display:flex;align-items:center;justify-content:center;gap:6px;
    background:linear-gradient(180deg,var(--indigo),color-mix(in srgb,var(--indigo) 85%,black));
    color:white;border-radius:var(--radius-sm);font-weight:600;
    transition:transform .1s, box-shadow .2s, opacity .15s;
    box-shadow:0 6px 16px -8px color-mix(in srgb,var(--indigo) 60%,transparent);
}
.pw-form .btn-primary:hover:not(:disabled){transform:none}
.pw-form .btn-primary:disabled{opacity:0.4;cursor:not-allowed}
.pw-form .btn-primary .material-symbols-rounded{font-size:16px}

.pw-strength{margin-top:8px}
.pw-strength-bar{
    height:4px;border-radius:999px;
    background:var(--surface-3);
    overflow:hidden;
}
.pw-strength-bar span{
    display:block;height:100%;width:0%;
    background:var(--red);
    transition:width .2s, background .2s;
}
.pw-strength[data-score="1"] .pw-strength-bar span{width:25%;background:var(--red)}
.pw-strength[data-score="2"] .pw-strength-bar span{width:50%;background:var(--amber)}
.pw-strength[data-score="3"] .pw-strength-bar span{width:75%;background:var(--sky)}
.pw-strength[data-score="4"] .pw-strength-bar span{width:100%;background:var(--green)}
.pw-strength-label{
    font-size:11px;color:var(--text-faint);
    margin-top:4px;letter-spacing:0.02em;
}
.pw-strength[data-score="1"] .pw-strength-label{color:var(--red)}
.pw-strength[data-score="2"] .pw-strength-label{color:var(--amber)}
.pw-strength[data-score="3"] .pw-strength-label{color:var(--sky)}
.pw-strength[data-score="4"] .pw-strength-label{color:var(--green)}

.pw-checklist{
    list-style:none;padding:0;margin:10px 0 0;
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:4px 10px;font-size:11px;
}
.pw-checklist li{
    display:flex;align-items:center;gap:6px;
    color:var(--text-faint);transition:color .2s;
}
.pw-checklist li.ok{color:var(--green)}
.pw-check-mark{
    display:inline-flex;align-items:center;justify-content:center;
    width:14px;height:14px;border-radius:50%;
    font-size:10px;font-weight:700;
    background:var(--surface-3);color:var(--text-faint);
    transition:all .2s;flex-shrink:0;
}
.pw-checklist li.ok .pw-check-mark{
    background:var(--green);color:#fff;
}
.pw-checklist li.ok .pw-check-mark::before{content:'✓';font-size:9px}
.pw-checklist li.ok .pw-check-mark{font-size:0}
@media (max-width:620px){
    .pw-checklist{grid-template-columns:1fr}
}

.pw-match{
    font-size:11px;margin-top:4px;
    display:flex;align-items:center;gap:4px;
}
.pw-match.ok{color:var(--green)}
.pw-match.bad{color:var(--red)}

.form-msg{
    margin-top:10px;padding:9px 12px;
    border-radius:var(--radius-sm);
    font-size:12px;
    display:flex;align-items:center;gap:6px;
}
.form-msg.error{background:var(--count-crit-bg);border:1px solid color-mix(in srgb,var(--red) 40%,transparent);color:var(--count-crit)}
.form-msg.success{background:color-mix(in srgb,var(--green) 14%,transparent);border:1px solid color-mix(in srgb,var(--green) 40%,transparent);color:var(--green)}

.btn-danger{
    width:100%;padding:10px 14px;border-radius:10px;
    background:color-mix(in srgb,var(--red) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--red) 40%,transparent);
    color:var(--red);font-size:13px;font-weight:600;
    display:flex;align-items:center;justify-content:center;gap:6px;
    transition:all .15s;
}
.btn-danger:hover{background:color-mix(in srgb,var(--red) 20%,transparent)}
.btn-danger .material-symbols-rounded{font-size:16px}
.btn-danger.armed{
    background:var(--red);color:white;border-color:var(--red);
    animation:pulseBurn 0.8s ease-in-out infinite;
}
#btn-mfa-toggle.armed{
    background:linear-gradient(135deg,var(--red),var(--amber))!important;
    animation:pulseBurn 0.8s ease-in-out infinite;
}

/* Vault tint for vault section title */
.vault-title h2 .material-symbols-rounded{color:var(--purple)}

/* ─────────── Responsive ─────────── */
/* ─── TTL dropdown (all screen sizes) ─── */
.ttl-select{display:block;position:relative;flex:1;min-width:0;max-width:220px}
.ttl-select-btn{
    display:flex;align-items:center;gap:10px;width:100%;
    height:42px;padding:0 12px;box-sizing:border-box;
    background:var(--surface);border:1px solid var(--border-2);
    border-radius:var(--radius);color:var(--text);cursor:pointer;
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
}
.ttl-select-icon{color:var(--pink);font-size:18px;flex-shrink:0}
.ttl-select-label{display:flex;flex-direction:column;align-items:flex-start;flex:1;min-width:0;line-height:1.1;text-align:left}
.ttl-select-caption{font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.08em;font-weight:600}
.ttl-select-current{font-size:14px;font-weight:500;color:var(--text)}
.ttl-select-chev{color:var(--text-dim);font-size:20px;transition:transform .2s}
.ttl-select.open .ttl-select-chev{transform:rotate(180deg)}
.ttl-select-menu{
    position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
    display:flex;flex-direction:column;padding:0;
    background:#141420;border:2px solid var(--border-2);
    border-radius:var(--radius);
    box-shadow:0 20px 40px -10px rgba(0,0,0,0.6);
}
html[data-theme="light"] .ttl-select-menu{
    background:#ffffff;border-color:#cbd5e1;
    box-shadow:0 20px 40px -10px rgba(15,23,42,0.15);
}
.ttl-menu-header{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;
    border-bottom:1px solid var(--border);
}
.ttl-select-menu > .ttl-menu-item{margin:2px 6px}
.ttl-select-menu > .ttl-menu-item:first-of-type{margin-top:6px}
.ttl-select-menu > .ttl-menu-item:last-of-type{margin-bottom:6px}
.ttl-menu-item{
    display:flex;align-items:center;gap:10px;
    padding:10px 12px;border-radius:8px;
    background:transparent;border:none;color:var(--text);
    font-size:13px;text-align:left;cursor:pointer;
    transition:background .15s;
}
.ttl-menu-item:hover,.ttl-menu-item.active{
    background:color-mix(in srgb,var(--pink) 18%,transparent);color:var(--pink);
}
.ttl-menu-item.vault.active,.ttl-menu-item.vault:hover{
    background:color-mix(in srgb,var(--purple) 18%,transparent);color:var(--purple);
}
.ttl-menu-item .material-symbols-rounded{font-size:16px}
.ttl-menu-divider{height:1px;background:var(--border);margin:4px 2px}

.ttl-row{display:none!important}

@media (max-width:620px){
    .ttl-select{max-width:none}
    .screen{padding:10px;gap:10px}
    .card{padding:20px;max-width:100%}
    .item{padding:6px 10px 8px}
    header.topbar{padding:8px 10px}
    header .user-info{gap:6px}
    header .user-info .email{display:none}
    header .icon-btn{width:40px;height:40px;border-radius:12px}
    header .icon-btn .material-symbols-rounded{font-size:18px}
    .item-actions .act-btn{width:26px;height:26px}
    .modal{max-height:96dvh;border-radius:14px;margin:8px}
    .modal-header{padding:10px 12px}
    .modal-meta{padding:8px 12px}
    .modal-body pre{padding:12px}
    .modal-body.plain{padding:12px}
    .view-tabs{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        grid-template-areas:
            "active vault filter"
            "quota  quota  quota";
        gap:6px 4px;
        padding:5px;border-radius:14px;
    }
    .view-tab{
        padding:7px 10px;font-size:12px;gap:6px;
        justify-content:center;white-space:nowrap;
    }
    .view-tab[data-view="active"]{grid-area:active}
    .view-tab[data-view="vault"]{grid-area:vault}
    .view-tab .material-symbols-rounded{font-size:14px}
    .tab-badge{min-width:18px;height:17px;font-size:10px;padding:0 5px}
    .filter-wrap{grid-area:filter;display:flex}
    .filter-btn{padding:7px 10px;font-size:12px;white-space:nowrap;width:100%;justify-content:center}
    .filter-btn .material-symbols-rounded{font-size:15px}
    .filter-btn .filter-chev{font-size:16px}
    .view-quota{
        grid-area:quota;margin-left:0;
        padding:2px 6px;font-size:11px;
        justify-content:center;gap:8px;
    }
    .app-wrap{gap:10px}
    .paste-area{padding:10px}
    .paste-area textarea{min-height:200px}
    .brand-name{font-size:15px}
    .build-tag{display:none}
    .session-badge{padding:4px 8px;font-size:11px}
    .session-badge .material-symbols-rounded{font-size:13px}
    .action-bar{gap:8px}
    .upload-compact{padding:0 14px;font-size:12px}
}