/* =====================================================================
 * PDF Vault — Design System
 * KK Techsolutions
 *
 * Organised via @layer so components/utilities can override base without
 * specificity wars. Load order matters — later layers win.
 *
 *   tokens      — CSS custom properties (colours, radii, motion, glass)
 *   base        — resets, typography, body background
 *   wave        — animated background
 *   glass       — reusable .glass surface utility + @supports fallback
 *   layout      — page shell (topbar, sidebar, main content)
 *   components  — buttons, alerts, cards, tables, forms, modals, badges
 *   auth        — login + 2FA screens
 *   pages       — page-specific rules (dashboard vault, product grid, ...)
 *   responsive  — tablet/mobile overrides
 *
 * Every selector that existing JS depends on is preserved verbatim
 * (#wa-modal, #bulk-wa-modal, #bulk-move-modal, .wa-open, .bulk-row,
 * .bulk-checkbox, .bulk-toolbar, .bulk-toolbar-count, .bulk-file-list,
 * .rename-form, .rename-btn, .rename-cancel, .wa-reset-btn, .wa-charcount,
 * .wa-message, .fname-text, #pdf-input, #pdf-label, #upload-btn,
 * #upload-form, #used-table, #used-search-input, #vault-product-grid,
 * #vault-search-input, plus every data-* attribute).
 * ================================================================== */

@layer tokens, base, wave, glass, layout, components, auth, pages, responsive;

/* ---------------------------------------------------------------------
 * TOKENS
 * ------------------------------------------------------------------- */
@layer tokens {
:root {
    /* Brand palette — deep royal blue */
    --brand-500: #2563eb;
    --brand-600: #1D4ED8;
    --brand-700: #2447B9;
    --brand-800: #123A8C;
    --brand-050: #eff6ff;
    --brand-100: #dbeafe;
    --brand-200: #bfdbfe;

    /* App surface — soft blue/white */
    --bg-app:    #F4F7FB;
    --bg-panel:  #F8FAFC;
    --bg-elev:   #ffffff;

    /* Glass surface */
    --glass-bg:      rgba(255, 255, 255, 0.65);
    --glass-bg-2:    rgba(255, 255, 255, 0.78);
    --glass-border:  rgba(255, 255, 255, 0.55);
    --glass-shadow:  0 10px 40px rgba(15, 23, 42, 0.08);
    --glass-shadow-lift: 0 20px 60px rgba(15, 23, 42, 0.14);
    --glass-blur: 18px;

    /* Text */
    --text:       #0F172A;
    --text-muted: #64748B;
    --text-soft:  #94A3B8;

    /* Borders */
    --border:      #E2E8F0;
    --border-soft: #EEF2F7;

    /* Semantic */
    --ok:      #16A34A;
    --ok-bg:   #DCFCE7;
    --ok-border: #86EFAC;
    --err:     #DC2626;
    --err-bg:  #FEE2E2;
    --err-border: #FCA5A5;
    --warn:    #F59E0B;
    --warn-bg: #FEF3C7;
    --warn-border: #FCD34D;
    --info:    #2563EB;
    --info-bg: #DBEAFE;
    --info-border: #93C5FD;
    --wa:      #25D366;
    --wa-hover:#1DAA51;
    --archive: #7C3AED;
    --archive-bg: #EDE9FE;

    /* Legacy aliases (existing selectors still reference these names) */
    --bg:            var(--bg-app);
    --surface:       var(--bg-elev);
    --muted:         var(--text-muted);
    --primary:       var(--brand-600);
    --primary-hover: var(--brand-800);
    --danger:        var(--err);
    --danger-hover:  #991b1b;
    --accent:        var(--brand-600);

    /* Radii */
    --radius-xs:  6px;
    --radius-sm:  8px;
    --radius:     12px;
    --radius-lg:  16px;
    --radius-xl:  22px;

    /* Motion */
    --dur-fast:   150ms;
    --dur-normal: 240ms;
    --dur-slow:   380ms;
    --ease:       cubic-bezier(.4, 0, .2, 1);
    --ease-out:   cubic-bezier(.16, 1, .3, 1);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.14);

    /* Focus ring */
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22);
}
}

/* ---------------------------------------------------------------------
 * BASE
 * ------------------------------------------------------------------- */
@layer base {
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg-app);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    overflow-x: hidden;
}

.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }

h1, h2, h3, h4 { font-weight: 650; letter-spacing: -0.011em; color: var(--text); margin: 0 0 6px; }
h1 { font-size: 22px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p { margin: 0 0 8px; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Hide arbitrary [hidden] elements always */
[hidden] { display: none !important; }

/* Selection */
::selection { background: var(--brand-100); color: var(--brand-800); }

/* Scrollbar polish (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .3); }
::-webkit-scrollbar-track { background: transparent; }
}

/* ---------------------------------------------------------------------
 * WAVE BACKGROUND
 * ------------------------------------------------------------------- */
@layer wave {
.wave-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(147, 197, 253, .35), transparent 60%),
        radial-gradient(900px 500px at 100% 10%, rgba(191, 219, 254, .28), transparent 55%),
        linear-gradient(180deg, #F4F7FB 0%, #EEF3FA 100%);
}
.wave-bg__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    will-change: transform;
    animation: wave-drift 22s ease-in-out infinite;
}
.wave-bg__blob--a {
    width: 520px; height: 520px;
    left: -120px; top: -80px;
    background: radial-gradient(circle at 30% 30%, #93C5FD 0%, transparent 70%);
    animation-delay: 0s;
}
.wave-bg__blob--b {
    width: 460px; height: 460px;
    right: -140px; top: 8%;
    background: radial-gradient(circle at 60% 40%, #1D4ED8 0%, transparent 70%);
    opacity: .32;
    animation-delay: -7s;
}
.wave-bg__blob--c {
    width: 620px; height: 620px;
    left: 30%; bottom: -220px;
    background: radial-gradient(circle at 50% 50%, #A5B4FC 0%, transparent 70%);
    opacity: .35;
    animation-delay: -14s;
}
.wave-bg__svg {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%; height: 42%;
    display: block;
    opacity: .85;
}
@keyframes wave-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(30px, -20px, 0) scale(1.06); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .wave-bg__blob { animation: none; }
}
}

/* ---------------------------------------------------------------------
 * GLASS UTILITY
 * ------------------------------------------------------------------- */
@layer glass {
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
            backdrop-filter: blur(var(--glass-blur)) saturate(140%);
    border-radius: var(--radius-lg);
}
.glass--sunk { box-shadow: var(--shadow-sm); }
.glass--lift { box-shadow: var(--glass-shadow-lift); }

/* Fallback for browsers without backdrop-filter — opaque panel */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass {
        background: var(--bg-elev);
        border: 1px solid var(--border);
    }
}
}

/* ---------------------------------------------------------------------
 * LAYOUT — topbar, sidebar, main content shell
 * ------------------------------------------------------------------- */
@layer layout {
.topbar {
    position: sticky;
    top: 12px;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 18px;
    margin: 12px 18px 0;
    border-radius: var(--radius-lg);
}
.topbar__left, .topbar__right { display: flex; align-items: center; gap: 10px; }
.topbar__brand {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: inherit;
}
.topbar__brand:hover { text-decoration: none; }
.brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
    color: #fff;
    font-weight: 700; letter-spacing: .02em;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(29, 78, 216, .35);
    font-size: 14px;
}
.brand-mark.small { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
.topbar__brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.topbar__brand-name { font-weight: 650; font-size: 15px; color: var(--text); }
.topbar__brand-tag { font-size: 11.5px; margin-top: 1px; }
.topbar__user {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(255,255,255,.7);
}
.topbar__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-800));
    color: #fff; font-weight: 600; font-size: 11.5px;
}
.topbar__user-name { font-size: 13px; color: var(--text); font-weight: 500; }
.topbar__nav-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.6);
    color: var(--text);
    cursor: pointer;
}
.topbar__nav-toggle:hover { background: rgba(255,255,255,.85); }
.topbar__nav-toggle:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

.layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 16px;
    padding: 12px 18px 24px;
    align-items: start;
}

.sidebar {
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sidebar__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 8px 10px 6px;
}
.sidebar__title--divider { margin-top: 8px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.folder-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: 13.5px;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    border: 1px solid transparent;
}
.folder-link:hover {
    background: rgba(255,255,255,.7);
    text-decoration: none;
    transform: translateX(1px);
}
.folder-link.is-active,
.folder-link.active {
    background: linear-gradient(135deg, rgba(29,78,216,.10), rgba(29,78,216,.02));
    border-color: rgba(29,78,216,.14);
    color: var(--brand-800);
}
.folder-link.is-active .badge,
.folder-link.active .badge {
    background: var(--brand-100);
    color: var(--brand-800);
}
.badge {
    background: var(--border-soft);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}

.content {
    padding: 22px 26px;
    min-height: 60vh;
    border-radius: var(--radius-lg);
}
.content-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.content-head h2 { margin: 0; }

/* Mobile nav overlay */
.nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(2px);
    z-index: 35;
}
body[data-nav-open="1"] .nav-scrim { display: block; }
}

/* ---------------------------------------------------------------------
 * COMPONENTS — buttons, inputs, alerts, tables, modals, badges, cards
 * ------------------------------------------------------------------- */
@layer components {

/* -------- Buttons -------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--dur-fast) var(--ease),
                background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
    line-height: 1.2;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; background: var(--bg-panel); border-color: var(--border); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-sm {
    padding: 5px 10px;
    font-size: 12.5px;
    border-radius: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(29,78,216,.32);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-800), #0f2f6e);
    color: #fff;
    box-shadow: 0 10px 28px rgba(29,78,216,.42);
}
.btn-block { display: flex; width: 100%; justify-content: center; padding: 10px 16px; font-size: 14.5px; }

.btn-ghost {
    background: rgba(255,255,255,.5);
    border-color: rgba(255,255,255,.65);
    color: var(--text);
}
.btn-ghost:hover { background: rgba(255,255,255,.85); }

.btn-danger {
    background: linear-gradient(135deg, #EF4444, #B91C1C);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(220,38,38,.28);
}
.btn-danger:hover {
    background: linear-gradient(135deg, #DC2626, #7F1D1D);
    color: #fff;
}

.btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(37,211,102,.28);
}
.btn-whatsapp:hover {
    background: linear-gradient(135deg, #1DAA51, #0F6E63);
    color: #fff;
}
.btn-whatsapp svg { flex-shrink: 0; }

.btn-restore {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(16,185,129,.28);
}
.btn-restore:hover { background: linear-gradient(135deg, #059669, #047857); color: #fff; }

.btn-used-chip {
    background: var(--archive-bg);
    color: var(--archive);
    border-color: transparent;
    cursor: default;
    padding: 5px 10px;
}
.btn-used-chip:hover { transform: none; background: var(--archive-bg); }

/* -------- Alerts -------- */
.alert {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
}
.alert-ok    { background: var(--ok-bg);   border-color: var(--ok-border);   color: #14532D; }
.alert-error { background: var(--err-bg);  border-color: var(--err-border);  color: #7F1D1D; }
.alert-warn  { background: var(--warn-bg); border-color: var(--warn-border); color: #78350F; }
.alert-info  { background: var(--info-bg); border-color: var(--info-border); color: #1E3A8A; }

.wa-hint { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.wa-hint-text { flex: 1 1 320px; min-width: 260px; }
.wa-hint-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* -------- Forms -------- */
label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--text-muted); font-weight: 500; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    font: inherit;
    line-height: 1.4;
    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input:focus, select:focus, textarea:focus {
    outline: 0;
    border-color: var(--brand-500);
    box-shadow: var(--focus-ring);
}
textarea { resize: vertical; min-height: 90px; }

/* -------- Cards & Empty state -------- */
.empty {
    text-align: center;
    padding: 42px 20px;
    color: var(--text-muted);
    background: rgba(255,255,255,.6);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}

/* -------- File table -------- */
.file-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}
.file-table thead th {
    text-align: left;
    padding: 12px 12px;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
}
.file-table tbody tr {
    transition: background var(--dur-fast) var(--ease);
}
.file-table tbody tr:hover { background: rgba(255, 255, 255, .55); }
.file-table tbody tr.is-selected td { background: linear-gradient(180deg, rgba(29,78,216,.06), rgba(29,78,216,.02)); }
.file-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
    font-size: 13.5px;
}
.file-table td.filename {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: var(--text);
}
.file-table td.filename svg { color: var(--brand-600); flex-shrink: 0; }
.file-table td.actions {
    text-align: right;
    white-space: nowrap;
}
.file-table td.actions .btn { margin-left: 4px; }
.file-table th.actions { text-align: right; }
.file-table th.bulk-cell,
.file-table td.bulk-cell {
    width: 42px;
    text-align: center;
    padding-left: 10px;
    padding-right: 4px;
}
.bulk-checkbox {
    width: 16px; height: 16px;
    cursor: pointer;
    accent-color: var(--brand-600);
    margin: 0;
    vertical-align: middle;
}

/* -------- Sticky bulk toolbar -------- */
.bulk-toolbar {
    position: sticky;
    top: 82px;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 0 14px;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-left: 3px solid var(--brand-600);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
}
.bulk-toolbar.is-visible { display: flex; }
.bulk-toolbar-count {
    font-weight: 600;
    color: var(--brand-800);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bulk-toolbar-count::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(29,78,216,.18);
}
.bulk-toolbar-actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.bulk-toolbar-clear {
    background: transparent;
    border: 0;
    padding: 4px 6px;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    margin-left: 8px;
}
.bulk-toolbar-clear:hover { color: var(--text); text-decoration: underline; }
.bulk-file-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    background: rgba(248,250,252,.7);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    margin: 6px 0 14px;
    font-size: 13px;
    color: var(--text);
}
.bulk-file-list ul { list-style: none; margin: 0; padding: 0; }
.bulk-file-list li {
    padding: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bulk-file-list li::before { content: "📄 "; opacity: .7; }
.bulk-file-list.is-empty { color: var(--text-soft); font-style: italic; }

/* -------- Upload box -------- */
.upload-box {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: rgba(255,255,255,.55);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.file-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border: 1px dashed var(--brand-200);
    border-radius: 10px;
    color: var(--brand-800);
    font-weight: 500;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.file-input:hover { background: var(--brand-050); border-color: var(--brand-500); }
.file-input input[type="file"] { position: absolute; left: -9999px; opacity: 0; }
#pdf-label { display: inline-block; }
.upload-box .btn { flex-shrink: 0; }

/* -------- Modal -------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    animation: modal-fade var(--dur-normal) var(--ease);
}
.modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 26px 26px 22px;
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: blur(var(--glass-blur));
            backdrop-filter: blur(var(--glass-blur));
    animation: modal-pop var(--dur-normal) var(--ease-out);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .modal-panel { background: #fff; }
}
.modal-close {
    position: absolute;
    top: 12px; right: 12px;
    background: transparent;
    border: 0;
    width: 30px; height: 30px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 16px;
}
.modal-close:hover { background: rgba(15,23,42,.06); color: var(--text); }
.modal-panel h3 { margin: 0 0 6px; font-size: 17px; }
.modal-row { margin: 12px 0; }
.modal-row label { display: block; margin-bottom: 6px; font-size: 12.5px; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft);
}
@keyframes modal-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes modal-pop {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop, .modal-panel { animation: none; }
}

/* WhatsApp modal — filename display */
.wa-filename {
    padding: 8px 12px;
    background: var(--brand-050);
    border: 1px solid var(--brand-100);
    border-radius: 8px;
    color: var(--brand-800);
    font-weight: 500;
    word-break: break-word;
}

/* WhatsApp default-message controls (Reset / char counter) */
.wa-msg-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 6px;
}
.wa-msg-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 6px;
}
.wa-message {
    width: 100%; box-sizing: border-box; font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    resize: vertical;
    line-height: 1.5;
    background: #fff;
    color: var(--text);
}
.wa-message:focus { outline: 0; border-color: var(--brand-500); box-shadow: var(--focus-ring); }
.wa-reset-btn {
    background: transparent; border: 0;
    padding: 2px 4px;
    color: var(--brand-600);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.wa-reset-btn:hover { text-decoration: underline; color: var(--brand-800); }
.wa-reset-btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; border-radius: 4px; }

/* -----------------------------------------------------------------------
 * WhatsApp API results panel — appears under Send button after each
 * fetch to wa_send_ajax.php. One header line + one row per PDF with
 * success (✓ green + wamid tail) or failure (✗ red + error message).
 * ----------------------------------------------------------------------- */
.wa-results {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid rgba(15,23,42,0.08);
    font-size: 13px;
    max-height: 260px;
    overflow-y: auto;
}
.wa-results-head {
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(15,23,42,0.08);
}
.wa-results-head.is-ok      { color: #14532d; }
.wa-results-head.is-partial { color: #78350f; }
.wa-results-head.is-err     { color: #7f1d1d; }
.wa-err-msg { font-weight: 400; }
.wa-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wa-results-list li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(15,23,42,0.06);
    align-items: baseline;
}
.wa-results-list li:last-child { border-bottom: 0; }
.wa-results-list li.is-ok  .wa-r-icon { color: #16a34a; font-weight: 700; }
.wa-results-list li.is-err .wa-r-icon { color: #dc2626; font-weight: 700; }
.wa-r-file { color: var(--text); word-break: break-word; }
.wa-r-meta { color: var(--muted); font-size: 12px; text-align: right; }
.wa-results-list li.is-err .wa-r-meta { color: #b91c1c; }
.wa-results-list li.is-partial .wa-r-icon { color: #d97706; font-weight: 700; }
.wa-results-list li.is-partial .wa-r-meta { color: #92400e; }

/* -----------------------------------------------------------------------
 * Bulk-rename modal — one row per selected file, current name on top,
 * editable new name below with a static .pdf suffix.
 * ----------------------------------------------------------------------- */
.bulk-rename-list {
    max-height: 380px;
    overflow-y: auto;
    padding: 4px 2px 2px;
    margin-bottom: 4px;
}
.bulk-rename-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 8px;
    border-bottom: 1px dashed rgba(15,23,42,0.08);
}
.bulk-rename-row:last-child { border-bottom: 0; }
.bulk-rename-orig {
    font-size: 12px;
    color: #64748B;
    word-break: break-all;
    line-height: 1.3;
}
.bulk-rename-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bulk-rename-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #0F172A;
    background: #fff;
    min-width: 0;
}
.bulk-rename-input:focus {
    outline: none;
    border-color: #1D4ED8;
    box-shadow: 0 0 0 3px rgba(29,78,216,0.15);
}

/* -----------------------------------------------------------------------
 * Sequential rename preview — old filename on top, "→ new-name.pdf"
 * below. Same list style as the plain multi-rename modal so the two
 * dialogs feel like siblings.
 * ----------------------------------------------------------------------- */
.seq-preview-row .seq-preview-arrow {
    font-size: 13px;
    color: #0F172A;
    padding-left: 2px;
    word-break: break-word;
}
.seq-preview-row .seq-preview-arrow strong {
    color: #1D4ED8;
    font-weight: 600;
}
.seq-parsed {
    background: #F8FAFC;
    border: 1px solid rgba(15,23,42,0.06);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #334155;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: baseline;
}
.seq-parsed code {
    background: #EEF2FF;
    color: #1D4ED8;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

/* -----------------------------------------------------------------------
 * WhatsApp History — status badges + detail modal grid
 * ----------------------------------------------------------------------- */
.wa-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}
.wa-status-badge .wa-status-icon { font-weight: 700; }
.wa-status-sent      { background: #DBEAFE; color: #1D4ED8; }
.wa-status-delivered { background: #E0E7FF; color: #4338CA; }
.wa-status-read      { background: #D1FAE5; color: #065F46; }
.wa-status-failed    { background: #FEE2E2; color: #B91C1C; }
.wa-status-legacy    { background: #F1F5F9; color: #64748B; }

/* Multi-recipient batch chip in the History table — appears next to the
   recipient number when a batch has >1 recipient. */
.wah-batch-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: #EFF6FF;
    color: #1D4ED8;
    border: 1px solid #BFDBFE;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.wa-filter {
    padding: 8px 10px;
    border: 1px solid var(--glass-border, rgba(15,23,42,0.15));
    background: var(--glass-bg-2, #fff);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text, #0F172A);
    font-family: inherit;
}

.wah-detail-status { margin: 4px 0 14px; }
.wah-detail-grid {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 13.5px;
}
.wah-detail-grid dt {
    color: #64748B;
    font-weight: 500;
    padding-top: 2px;
}
.wah-detail-grid dd {
    margin: 0;
    color: #0F172A;
    word-break: break-word;
}
.wah-detail-grid code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #F1F5F9;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.wah-params {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
@media (max-width: 640px) {
    .wah-detail-grid {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .wah-detail-grid dt { margin-top: 8px; }
}
.wa-results-share {
    margin: 8px 0 4px;
    font-size: 12px;
    color: var(--muted);
    word-break: break-all;
}
.wa-results-share a {
    color: #1D4ED8;
    text-decoration: none;
}
.wa-results-share a:hover { text-decoration: underline; }
.wa-charcount { font-variant-numeric: tabular-nums; color: var(--text-soft); }

/* -------- Inline rename (used across dashboard + used pages) -------- */
.rename-form {
    display: none;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rename-input {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    min-width: 200px;
}
.rename-input:focus { outline: 0; border-color: var(--brand-500); box-shadow: var(--focus-ring); }

/* -------- Status badges (usage history) -------- */
.status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.status-sent          { background: var(--info-bg);  color: var(--brand-800); }
.status-sent_archive_pending { background: var(--warn-bg); color: #78350F; }
.status-archived      { background: var(--archive-bg); color: var(--archive); }
.status-restored      { background: var(--ok-bg); color: #14532D; }
.status-failed        { background: var(--err-bg); color: #7F1D1D; }
.status-click_confirmed { background: var(--info-bg); color: var(--brand-800); }

/* -------- Breadcrumb -------- */
.breadcrumb-back {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--brand-600);
    font-size: 13px;
    margin-bottom: 10px;
}
.breadcrumb-back:hover { text-decoration: underline; color: var(--brand-800); }
}

/* ---------------------------------------------------------------------
 * AUTH — login + 2FA
 * ------------------------------------------------------------------- */
@layer auth {
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.login-card {
    width: 100%;
    max-width: 420px;
    padding: 36px 32px 30px;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--glass-shadow-lift);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
            backdrop-filter: blur(24px) saturate(150%);
    animation: login-in var(--dur-slow) var(--ease-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .login-card { background: #fff; }
}
.login-card .brand {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 20px;
}
.login-card .brand h1 { margin: 0; font-size: 20px; }
.login-card .brand .muted { font-size: 13px; margin-top: 2px; }
.login-card form { margin-top: 10px; }
.login-card label { font-size: 12.5px; margin-bottom: 12px; }
.login-card label input {
    display: block;
    margin-top: 6px;
    background: rgba(255,255,255,.85);
}
.login-card .btn-block { margin-top: 8px; }
.footer-note {
    margin: 22px 0 0;
    font-size: 11.5px;
    text-align: center;
    color: var(--text-muted);
    letter-spacing: .01em;
}
@keyframes login-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .login-card { animation: none; }
}
}

/* ---------------------------------------------------------------------
 * PAGES — dashboard, product grid, used, history, settings
 * ------------------------------------------------------------------- */
@layer pages {

/* -------- Dashboard vault hero -------- */
.vault-hero {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}
.vault-hero-text h2 { margin: 0 0 4px; }
.vault-hero-text p  { margin: 0; }

/* -------- Stat cards -------- */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
/* (Renewals dashboard uses its own .ren-* scoped styles — see bottom of
    this file. The earlier .stat-row--renewals / .stat-card--active
    helpers have been retired along with the admin_renewals.php redesign.) */
.stat-card {
    padding: 16px 18px;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.stat-card::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(29,78,216,.06), transparent 60%);
    pointer-events: none;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.stat-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-weight: 600;
}
.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    margin-top: 4px;
}
.stat-card-warn { border-color: var(--warn-border); background: linear-gradient(135deg, rgba(254,243,199,.7), rgba(255,255,255,.7)); }
.stat-card-warn .stat-value { color: #78350F; }

/* -----------------------------------------------------------------------
 * Used PDFs — groups view (Feature 2)
 *
 * Cards grid: one card per license product / folder / uncategorized
 * bucket. Click-through opens a filtered flat table via ?group=<key>.
 * Only rendered on used.php when no ?group / ?view=all is set.
 * ----------------------------------------------------------------------- */
.used-view-crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
    font-size: 13px;
}
.used-view-crumb {
    color: var(--brand-600);
    text-decoration: none;
    font-weight: 500;
}
.used-view-crumb:hover { text-decoration: underline; }

.used-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.used-group-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 14px;
    color: var(--text);
    text-decoration: none;
    transition: transform 120ms ease, border-color 120ms ease;
    min-height: 148px;
}
.used-group-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand-300, rgba(29,78,216,0.35));
}
.used-group-card.kind-license { border-left: 4px solid #1D4ED8; }
.used-group-card.kind-folder  { border-left: 4px solid #10B981; }
.used-group-card.kind-legacy  { border-left: 4px solid #94A3B8; }

.used-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.used-group-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 999px;
    text-transform: uppercase;
}
.used-group-badge.kind-license { background: #DBEAFE; color: #1D4ED8; }
.used-group-badge.kind-folder  { background: #D1FAE5; color: #065F46; }
.used-group-badge.kind-legacy  { background: #F1F5F9; color: #475569; }

.used-group-name {
    margin: 2px 0 4px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #0F172A;
    word-break: break-word;
}
.used-group-count {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.15;
}
.used-group-latest {
    margin: 0;
    font-size: 12px;
}
.used-group-cta {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-600, #1D4ED8);
}
.used-group-card:hover .used-group-cta { text-decoration: underline; }

@media (max-width: 640px) {
    .used-groups-grid { grid-template-columns: 1fr; }
    .used-group-card  { min-height: 132px; padding: 16px; }
    .used-group-count { font-size: 20px; }
}

/* -------- Vault toolbar (search + sort) -------- */
.vault-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.vault-search {
    position: relative;
    flex: 1 1 320px;
    display: inline-flex;
    align-items: center;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 4px 12px 4px 12px;
    max-width: 520px;
    box-shadow: var(--shadow-xs);
}
.vault-search svg { color: var(--text-muted); flex-shrink: 0; }
.vault-search input {
    border: 0;
    background: transparent;
    padding: 8px 6px;
    flex: 1;
    font-size: 13.5px;
    box-shadow: none;
}
.vault-search input:focus { box-shadow: none; }
.vault-search-clear {
    display: none;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 6px;
}
.vault-search-clear:hover { background: rgba(15,23,42,.06); color: var(--text); }
.vault-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 4px 10px;
}
.vault-sort select {
    border: 0;
    background: transparent;
    padding: 6px 4px;
    font-size: 13px;
    box-shadow: none;
}
.vault-sort select:focus { box-shadow: none; }

/* -------- Product grid (Software Licenses) -------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.product-card {
    display: flex;
    flex-direction: column;
    padding: 18px;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out), border-color var(--dur-normal) var(--ease);
    position: relative;
    overflow: hidden;
}
.product-card::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(147,197,253,.14), transparent 55%);
    pointer-events: none;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(29,78,216,.25);
    text-decoration: none;
}
.product-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-100), rgba(255,255,255,.7));
    color: var(--brand-800);
    margin-bottom: 12px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.product-icon svg { width: 22px; height: 22px; }
.product-body { flex: 1; }
.product-category {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.product-name {
    font-size: 15px;
    font-weight: 650;
    color: var(--text);
    line-height: 1.3;
}
.product-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    font-size: 12.5px;
}
.product-count {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--text-muted);
    font-weight: 500;
}
.product-cta {
    color: var(--brand-600);
    font-weight: 600;
}
.product-card:hover .product-cta { color: var(--brand-800); }

.vault-empty {
    text-align: center;
    padding: 42px 20px;
    color: var(--text-muted);
    background: rgba(255,255,255,.6);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    margin: 12px 0;
}
.vault-empty svg { color: var(--text-soft); margin-bottom: 8px; }

.unassigned-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(254,243,199,.6), rgba(255,255,255,.5));
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    color: inherit;
    text-decoration: none;
    margin-bottom: 20px;
    transition: transform var(--dur-fast) var(--ease);
}
.unassigned-card:hover { text-decoration: none; transform: translateY(-1px); }
.unassigned-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--warn-bg);
    border-radius: 10px;
    color: #78350F;
}
.unassigned-title { font-weight: 650; color: #78350F; margin-bottom: 2px; }
.unassigned-text { color: #92400E; font-size: 13px; }
.unassigned-cta { color: #78350F; font-weight: 600; font-size: 13px; white-space: nowrap; }

/* -------- Settings page -------- */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 720px;
}
.settings-card {
    padding: 22px;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
}
.settings-card h3 { margin: 0 0 4px; font-size: 15px; }
.settings-card .muted { margin-bottom: 12px; }

/* -------- TOTP enrollment box -------- */
.totp-enroll-box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
    padding: 18px;
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    margin-bottom: 14px;
}
.totp-qr {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
}
.totp-qr img, .totp-qr svg { display: block; max-width: 180px; height: auto; }
.totp-secret-code {
    display: inline-block;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    letter-spacing: .05em;
    word-break: break-all;
}

/* -------- Password strength meter -------- */
.pw-strength {
    display: flex; align-items: center; gap: 10px;
    margin: 8px 0 4px;
}
.pw-strength-bars {
    display: flex; gap: 4px;
    flex: 1;
}
.pw-strength-bars span {
    flex: 1;
    height: 6px;
    background: var(--border-soft);
    border-radius: 999px;
    transition: background var(--dur-fast) var(--ease);
}
.pw-strength-label {
    font-size: 12px;
    font-weight: 600;
    min-width: 110px;
    color: var(--text-muted);
}
.pw-strength[data-score="1"] .pw-strength-bars span:nth-child(-n+1) { background: #EF4444; }
.pw-strength[data-score="2"] .pw-strength-bars span:nth-child(-n+2) { background: #F59E0B; }
.pw-strength[data-score="3"] .pw-strength-bars span:nth-child(-n+3) { background: #EAB308; }
.pw-strength[data-score="4"] .pw-strength-bars span:nth-child(-n+4) { background: #22C55E; }
.pw-strength[data-score="5"] .pw-strength-bars span { background: #16A34A; }
.pw-strength[data-score="1"] .pw-strength-label { color: #DC2626; }
.pw-strength[data-score="2"] .pw-strength-label { color: #B45309; }
.pw-strength[data-score="3"] .pw-strength-label { color: #92400E; }
.pw-strength[data-score="4"] .pw-strength-label { color: #15803D; }
.pw-strength[data-score="5"] .pw-strength-label { color: #14532D; }
.pw-hints {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.pw-hints li { list-style: none; padding: 2px 0; }
.pw-hints li.ok { color: var(--ok); }
.pw-hints li.ok::before { content: "✓ "; }
.pw-hints li:not(.ok)::before { content: "◦ "; }

/* -------- Usage history activity list -------- */
.usage-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.usage-item {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 14px;
    padding: 14px 16px;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    align-items: center;
}
.usage-item__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--brand-050);
    color: var(--brand-600);
}
.usage-item__body { min-width: 0; }
.usage-item__title { font-weight: 600; color: var(--text); word-break: break-word; }
.usage-item__meta { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.usage-item__side { text-align: right; }
.usage-day-heading {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-weight: 600;
    padding: 12px 4px 6px;
}
}

/* ---------------------------------------------------------------------
 * PUBLIC SHARE — expired-link page
 * ------------------------------------------------------------------- */
@layer pages {
.share-expired {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.share-expired__card {
    max-width: 440px; width: 100%;
    padding: 32px 34px;
    text-align: center;
    background: var(--glass-bg-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow-lift);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
}
.share-expired__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--warn-bg);
    color: #92400E;
    margin: 0 auto 14px;
}
.share-expired__card h1 { font-size: 20px; margin-bottom: 6px; }
.share-expired__card p  { color: var(--text-muted); }
}

/* ---------------------------------------------------------------------
 * RESPONSIVE
 * ------------------------------------------------------------------- */
@layer responsive {
@media (max-width: 1024px) {
    .layout { grid-template-columns: 240px 1fr; }
    .content { padding: 20px 22px; }
}
@media (max-width: 820px) {
    .topbar {
        top: 8px;
        margin: 8px 10px 0;
        padding: 8px 12px;
    }
    .topbar__nav-toggle { display: inline-flex; }
    .topbar__brand-tag { display: none; }
    .topbar__btn-label { display: none; }
    .topbar__user-name { display: none; }
    .topbar .btn-ghost { padding: 8px; }

    .layout {
        grid-template-columns: 1fr;
        padding: 8px 10px 20px;
        gap: 10px;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 260px;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        z-index: 45;
        transition: left var(--dur-normal) var(--ease);
        padding: 20px 14px;
        margin: 0;
    }
    body[data-nav-open="1"] .sidebar { left: 0; }
    .content { padding: 16px 14px; }

    .vault-hero { flex-direction: column; align-items: flex-start; }
    .file-table thead { display: none; }
    .file-table, .file-table tbody, .file-table tr, .file-table td { display: block; width: 100%; box-sizing: border-box; }
    .file-table tr {
        background: var(--glass-bg-2);
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        padding: 10px 12px;
        margin-bottom: 10px;
        -webkit-backdrop-filter: blur(10px);
                backdrop-filter: blur(10px);
    }
    .file-table td {
        padding: 4px 0;
        border: 0;
        font-size: 13px;
    }
    .file-table td.filename { font-size: 14px; padding-top: 2px; }
    .file-table td.actions { text-align: left; padding-top: 8px; }
    .file-table td.actions .btn { margin: 4px 4px 0 0; }
    .file-table td.bulk-cell {
        display: inline-block;
        width: auto;
        padding-right: 8px;
    }
    .bulk-toolbar { flex-direction: column; align-items: stretch; top: 74px; }
    .bulk-toolbar-actions { justify-content: flex-start; }
    .modal { padding: 12px; }
    .modal-panel { padding: 20px; }
    .product-grid { grid-template-columns: 1fr 1fr; }
    .stat-value { font-size: 22px; }
}
@media (max-width: 520px) {
    .product-grid { grid-template-columns: 1fr; }
    .brand-mark { width: 32px; height: 32px; font-size: 12.5px; }
    .topbar__brand-name { font-size: 14px; }
    .stat-row { grid-template-columns: 1fr 1fr; }
    .content-head { flex-direction: column; align-items: flex-start; }
    .upload-box { flex-direction: column; align-items: stretch; }
    .file-input { justify-content: center; }
    h1 { font-size: 19px; }
    h2 { font-size: 17px; }
}
}

/* ---------- Admin Danger Zone (Settings) ---------- */
.danger-card {
    border-color: rgba(220, 38, 38, .25);
    background: linear-gradient(135deg, rgba(254, 226, 226, .55), rgba(255, 255, 255, .8));
    box-shadow: 0 4px 24px rgba(220, 38, 38, .08);
}
.danger-card__head { display: flex; align-items: center; gap: 12px; }
.danger-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FEE2E2, #FCA5A5);
    color: #7F1D1D;
}
.danger-card h3 { margin: 0; color: #7F1D1D; }
.danger-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 14px 0 4px;
    border-top: 1px dashed rgba(220, 38, 38, .2);
    margin-top: 14px;
}
.danger-item__body { flex: 1 1 260px; min-width: 240px; }
.danger-item__title { font-weight: 650; color: #7F1D1D; }
.danger-modal { border: 1px solid rgba(220, 38, 38, .3); box-shadow: 0 20px 60px rgba(220, 38, 38, .18); }
.danger-heading { color: #7F1D1D; margin: 0; }

.erase-preview {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr 1fr;
    margin-top: 14px;
    padding: 12px;
    background: rgba(248, 250, 252, .8);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
}
.erase-preview__section ul { list-style: none; margin: 0; padding: 0; }
.erase-preview__section li,
.erase-preview__row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}
.erase-preview__title {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}
.erase-preview__num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text);
    background: #fff;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    min-width: 32px;
    text-align: center;
}
.erase-preview__total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
    font-weight: 700;
    color: #7F1D1D;
}
.erase-preview__total .erase-preview__num { background: #FEE2E2; color: #7F1D1D; border-color: #FCA5A5; }
.erase-phrase-input {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px;
    border: 2px solid #FCA5A5;
    border-radius: 10px;
    font: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #FEF2F2;
    color: #7F1D1D;
    font-weight: 600;
}
.erase-phrase-input:focus {
    outline: 0;
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
    background: #fff;
}
@media (max-width: 520px) {
    .erase-preview { grid-template-columns: 1fr; }
}

/* =====================================================================
 * CUSTOMER PORTAL (P3) — Reuses every admin design token (--brand-*,
 * --bg-app, --text, --border, --radius-*, --shadow-*, --focus-ring).
 * All selectors are prefixed .cp- so they can't collide with admin
 * selectors that existing JS depends on.
 * ================================================================= */
@layer pages {
.cp-body { background: var(--bg-app); min-height: 100vh; }

/* Top navigation shared by every signed-in customer page */
.cp-nav {
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-xs);
}
.cp-nav__inner {
    max-width: 960px; margin: 0 auto;
    display: flex; align-items: center; gap: 16px;
    padding: 14px 20px;
}
.cp-nav__brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: var(--text);
}
.cp-nav__brand-mark {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: var(--brand-600); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.cp-nav__brand-name { font-weight: 650; font-size: 15px; }
.cp-nav__links {
    display: flex; align-items: center; gap: 4px;
    margin-left: auto;
}
.cp-nav__link {
    padding: 8px 12px; border-radius: var(--radius-sm);
    text-decoration: none; color: var(--text-muted);
    font-size: 13px; font-weight: 500;
    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cp-nav__link:hover { background: var(--brand-050); color: var(--brand-600); }
.cp-nav__link.is-active { color: var(--brand-600); background: var(--brand-050); }
.cp-nav__link-badge {
    display: inline-block; margin-left: 6px;
    padding: 1px 8px; border-radius: 999px;
    background: var(--brand-100); color: var(--brand-800);
    font-size: 11px; font-weight: 600;
}
.cp-nav__user {
    padding: 6px 10px; border-radius: var(--radius-sm);
    background: var(--bg-panel); color: var(--text-muted);
    font-size: 12px;
}

/* Main content wrapper */
.cp-main { max-width: 960px; margin: 0 auto; padding: 24px 20px 60px; }
.cp-hero { margin-bottom: 20px; }
.cp-hero h1 { font-size: 22px; margin: 0 0 4px; }
.cp-hero p { margin: 0; color: var(--text-muted); font-size: 14px; }

/* Catalogue — product grid */
.cp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.cp-product-card {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 18px;
    box-shadow: var(--shadow-xs);
    text-decoration: none; color: var(--text);
    display: flex; flex-direction: column; gap: 10px;
    transition: box-shadow var(--dur-normal) var(--ease),
                border-color var(--dur-normal) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.cp-product-card:hover {
    box-shadow: var(--shadow-md); border-color: var(--brand-200);
    transform: translateY(-1px);
}
.cp-product-card:focus-visible {
    outline: 0; box-shadow: var(--focus-ring);
}
.cp-product-card__cat {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--brand-600); font-weight: 600;
}
.cp-product-card__name {
    font-size: 15px; font-weight: 650; color: var(--text);
    line-height: 1.35;
}
.cp-product-card__cta {
    margin-top: auto; align-self: flex-start;
    color: var(--brand-600); font-size: 13px; font-weight: 600;
}

/* Toolbar + search */
.cp-toolbar {
    display: flex; gap: 10px; align-items: center;
    margin-bottom: 16px; flex-wrap: wrap;
}
.cp-search {
    flex: 1; min-width: 200px;
    height: 38px; padding: 0 12px;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit; color: var(--text);
}
.cp-search:focus { outline: 0; box-shadow: var(--focus-ring); }

/* Product detail + request form */
.cp-detail-card {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px;
    box-shadow: var(--shadow-xs);
}
.cp-detail-card h1 { font-size: 20px; margin-bottom: 2px; }
.cp-detail-card .cp-detail-cat {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--brand-600); font-weight: 600; margin-bottom: 8px;
}
.cp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.cp-field label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.cp-field input, .cp-field select, .cp-field textarea {
    padding: 9px 12px;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit; color: var(--text);
}
.cp-field input:focus, .cp-field select:focus, .cp-field textarea:focus {
    outline: 0; box-shadow: var(--focus-ring); border-color: var(--brand-500);
}
.cp-field-error { color: var(--err); font-size: 12px; margin-top: -8px; margin-bottom: 10px; }

/* Estimated-total summary — live-updated on the request form. */
.cp-estimate {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    padding: 12px 16px; margin: 0 0 14px;
    background: var(--brand-050, #EFF6FF);
    border: 1px solid var(--brand-200, #BFDBFE);
    border-radius: var(--radius-sm, 10px);
}
.cp-estimate__label {
    font-size: 12px; font-weight: 600; color: var(--brand-800, #1E3A8A);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.cp-estimate__value {
    font-size: 18px; font-weight: 700; color: var(--text, #0F172A);
    letter-spacing: -0.01em;
}
.cp-estimate__hint {
    font-size: 11.5px; color: var(--text-muted, #64748B); margin-left: auto;
}

/* My Requests list */
.cp-requests-list { display: flex; flex-direction: column; gap: 10px; }
.cp-request-row {
    display: grid; grid-template-columns: 1fr auto; gap: 10px;
    padding: 14px 16px;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-xs);
    text-decoration: none; color: var(--text);
    transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.cp-request-row:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-200); }
.cp-request-row__title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.cp-request-row__meta { font-size: 12px; color: var(--text-muted); }

/* Rows with inline actions: title + status + action group on one line.
   The title block stays a link to detail; the action group holds
   View / Edit / Cancel buttons as separate links/forms so no form or
   button nests inside another <a>. */
.cp-request-row--actions {
    grid-template-columns: 1fr auto auto;
    align-items: center;
}
.cp-request-row__main { min-width: 0; }
.cp-request-row__title-link { display: block; text-decoration: none; color: var(--text); }
.cp-request-row__title-link:hover .cp-request-row__title { color: var(--brand-600); }
.cp-request-row__status { justify-self: start; }
.cp-request-row__actions {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    justify-self: end;
}

/* Compact row-level button used in the requests list AND the detail
   page's action strip. Matches the blue-and-white portal theme. */
.cp-row-btn {
    display: inline-block;
    padding: 6px 12px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--text);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                color var(--dur-fast) var(--ease);
}
.cp-row-btn:hover { background: var(--bg); border-color: var(--brand-300, #93C5FD); color: var(--brand-700, #1D4ED8); }
.cp-row-btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }

.cp-row-btn--primary {
    color: #FFFFFF; background: var(--brand-600, #2563EB);
    border-color: var(--brand-600, #2563EB);
}
.cp-row-btn--primary:hover {
    color: #FFFFFF; background: var(--brand-700, #1D4ED8);
    border-color: var(--brand-700, #1D4ED8);
}

.cp-row-btn--danger {
    color: var(--err, #B91C1C); background: var(--bg-elev);
    border-color: var(--err-border, #FECACA);
}
.cp-row-btn--danger:hover {
    color: #FFFFFF; background: var(--err, #B91C1C);
    border-color: var(--err, #B91C1C);
}

/* Primary action strip on customer_request_detail.php */
.cp-detail-actions {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-top: 14px;
}

/* Status chip */
.cp-chip {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--info-bg); color: var(--brand-800);
    border: 1px solid var(--info-border);
}
.cp-chip--submitted           { background: var(--info-bg);  color: var(--brand-800);   border-color: var(--info-border); }
.cp-chip--under_review        { background: var(--warn-bg);  color: #78350F;            border-color: var(--warn-border); }
.cp-chip--approved            { background: var(--ok-bg);    color: #14532D;            border-color: var(--ok-border); }
.cp-chip--fulfilled           { background: var(--ok-bg);    color: #14532D;            border-color: var(--ok-border); }
.cp-chip--rejected            { background: var(--err-bg);   color: #7F1D1D;            border-color: var(--err-border); }
.cp-chip--cancelled           { background: var(--border-soft); color: var(--text-muted); border-color: var(--border); }
.cp-chip--needs_clarification { background: var(--warn-bg);  color: #78350F;            border-color: var(--warn-border); }

/* Empty states */
.cp-empty {
    padding: 36px 24px; text-align: center;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-lg); color: var(--text-muted);
}
.cp-empty h3 { margin: 0 0 4px; color: var(--text); }

/* Dashboard stat row */
.cp-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}
.cp-stat-card {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 14px 16px;
    box-shadow: var(--shadow-xs);
}
.cp-stat-card__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--text-muted); font-weight: 600; margin-bottom: 4px;
}
.cp-stat-card__value {
    font-size: 26px; line-height: 1.1; font-weight: 700; color: var(--text);
    letter-spacing: -0.01em;
}
.cp-stat-card__hint {
    font-size: 12px; color: var(--text-muted); margin-top: 2px;
}

/* Dashboard quick-action grid */
.cp-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.cp-action {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px 18px;
    text-decoration: none; color: var(--text);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--dur-fast) var(--ease),
                border-color var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.cp-action:hover {
    box-shadow: var(--shadow-sm); border-color: var(--brand-200);
    transform: translateY(-1px);
}
.cp-action:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.cp-action__title {
    font-size: 14px; font-weight: 650; color: var(--brand-600);
    margin-bottom: 2px;
}
.cp-action__text { font-size: 12px; color: var(--text-muted); }

/* Mobile */
@media (max-width: 640px) {
    .cp-nav__inner { padding: 10px 14px; gap: 10px; }
    .cp-nav__brand-name { display: none; }
    .cp-nav__links { gap: 2px; margin-left: 0; flex-wrap: wrap; }
    .cp-nav__link { padding: 8px 10px; }
    .cp-main { padding: 16px 14px 50px; }
    .cp-detail-card { padding: 18px; }
    .cp-stat-card__value { font-size: 22px; }
    .cp-request-row { grid-template-columns: 1fr; }
    .cp-request-row > div:last-child { justify-self: start; }
    .cp-request-row--actions { grid-template-columns: 1fr; }
    .cp-request-row--actions .cp-request-row__status,
    .cp-request-row--actions .cp-request-row__actions { justify-self: start; }
}
}

/* =====================================================================
 * LOGIN REDESIGN v2 (lv2-*) — scoped to index.php ONLY. Does not touch
 * .login-* classes (still used by verify_2fa.php) or any admin selector.
 * Design tokens come from the existing admin palette; new ones are
 * declared as local CSS variables on .lv2-body to keep the global scope
 * clean.
 * ================================================================= */
@layer pages {
.lv2-body {
    --lv2-brand:        #1D4ED8;
    --lv2-brand-dark:   #123A8C;
    --lv2-brand-bright: #2563EB;
    --lv2-bg:           #F4F7FB;
    --lv2-accent:       #DBEAFE;
    --lv2-white:        #FFFFFF;
    --lv2-text:         #0F172A;
    --lv2-muted:        #64748B;
    --lv2-border:       #E2E8F0;
    --lv2-focus:        0 0 0 3px rgba(37, 99, 235, 0.28);

    min-height: 100vh;
    margin: 0;
    padding: 24px 16px 72px;
    background: var(--lv2-bg);
    color: var(--lv2-text);
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
}

/* Decorative background shapes — purely cosmetic, aria-hidden */
.lv2-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    overflow: hidden;
}
.lv2-bg-shape {
    position: absolute; border-radius: 50%; filter: blur(70px);
    opacity: 0.55;
}
.lv2-bg-shape--a {
    top: -140px; left: -120px; width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(37,99,235,0.22), transparent 70%);
}
.lv2-bg-shape--b {
    bottom: -160px; right: -140px; width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(29,78,216,0.18), transparent 70%);
}
.lv2-bg-shape--c {
    top: 40%; left: 60%; width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(219,234,254,0.9), transparent 70%);
    opacity: 0.5;
}

/* The card */
.lv2-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 440px;
    background: var(--lv2-white);
    border-radius: 24px;
    /* Consistent 32px side padding + comfortable top/bottom; bottom
       padding leaves room for the absolutely-positioned wave to sit
       behind the content without crashing into it. */
    padding: 36px 32px 44px;
    box-sizing: border-box;
    /* Vertical rhythm via a single column with a 20px gap, so every
       section — brand, divider, heading, form, note, OR, CTA — lines
       up on the same 8-based increments. */
    display: flex; flex-direction: column; gap: 20px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 10px 30px rgba(29, 78, 216, 0.10),
        0 24px 64px rgba(29, 78, 216, 0.08);
    overflow: hidden;    /* clips the wave inside the rounded corners */
    animation: lv2-in 420ms cubic-bezier(.2, .7, .2, 1) both;
}
/* Spacing is owned by the flex-column `gap` above. Reset the ad-hoc
   margins the individual sections used to carry. The wave is exempt
   because it is positioned absolutely out of flow. */
.lv2-card > *                 { margin: 0; }
.lv2-card > :not(.lv2-wave)   { position: relative; z-index: 1; }

/* Branding */
.lv2-brand {
    display: flex; align-items: center; gap: 14px;
}
.lv2-brand-mark {
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, var(--lv2-brand-bright), var(--lv2-brand-dark));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}
.lv2-brand-text { line-height: 1.25; }
.lv2-brand-name {
    margin: 0; font-size: 20px; font-weight: 700;
    color: var(--lv2-text); letter-spacing: -0.01em;
}
.lv2-brand-sub {
    margin: 2px 0 0; font-size: 13px; color: var(--lv2-muted);
}

.lv2-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lv2-accent), transparent);
    margin: 16px 0 18px;
}

.lv2-heading {
    margin: 0 0 20px; font-size: 14px; color: var(--lv2-muted);
    text-align: left;
}

/* Alerts */
.lv2-alert {
    margin: 0 0 14px; padding: 10px 14px;
    border-radius: 10px; font-size: 13px;
    border: 1px solid transparent;
}
.lv2-alert--err  { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.lv2-alert--warn { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.lv2-alert--info { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }

/* Form fields */
.lv2-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.lv2-field { display: flex; flex-direction: column; gap: 6px; }
.lv2-field-label {
    font-size: 12.5px; font-weight: 600; color: var(--lv2-text);
    letter-spacing: 0.01em;
}
.lv2-field-wrap {
    position: relative;
    display: flex; align-items: center;
    background: #FBFCFE;
    border: 1px solid var(--lv2-border);
    border-radius: 12px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.lv2-field-wrap:focus-within {
    border-color: var(--lv2-brand-bright);
    background: #fff;
    box-shadow: var(--lv2-focus);
}
.lv2-field-icon {
    flex: 0 0 auto;
    margin: 0 10px 0 14px;
    color: var(--lv2-muted);
}
.lv2-field-wrap:focus-within .lv2-field-icon { color: var(--lv2-brand); }
.lv2-field-wrap input {
    flex: 1; min-width: 0;
    /* Strip EVERY default visual on the native <input> so the "nested
       box" / inner shadow you can see with Chrome autofill or on some
       OSes cannot appear. The visible border + focus ring belong to
       .lv2-field-wrap, never the input itself. */
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: transparent;
    border: 0; outline: 0;
    box-shadow: none;
    box-sizing: border-box;
    border-radius: 0;        /* defeat any UA-default rounded corners */
    padding: 12px 14px 12px 0;
    margin: 0;
    font: inherit; color: var(--lv2-text);
    font-size: 14.5px;
    line-height: 1.3;
}
/* Chrome / Edge autofill paints an opaque inner box-shadow and swaps
   the text colour. This re-paints the inner shadow to match the field
   wrap's own background so the input blends in instead of showing a
   second rounded rectangle. */
.lv2-field-wrap input:-webkit-autofill,
.lv2-field-wrap input:-webkit-autofill:hover,
.lv2-field-wrap input:-webkit-autofill:focus,
.lv2-field-wrap input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #FBFCFE inset !important;
            box-shadow: 0 0 0 1000px #FBFCFE inset !important;
    -webkit-text-fill-color: var(--lv2-text) !important;
    caret-color: var(--lv2-text) !important;
    transition: background-color 5000s ease-in-out 0s;
}
.lv2-field-wrap:focus-within input:-webkit-autofill,
.lv2-field-wrap:focus-within input:-webkit-autofill:hover,
.lv2-field-wrap:focus-within input:-webkit-autofill:focus {
    /* Match the focused wrap background (pure white) so there's still
       no visible nested rectangle during focus. */
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
            box-shadow: 0 0 0 1000px #FFFFFF inset !important;
}
.lv2-field-wrap input::placeholder {
    color: #94A3B8; font-weight: 400;
}
.lv2-field-wrap input:disabled { opacity: 0.6; cursor: not-allowed; }

/* Password visibility toggle */
.lv2-field-reveal {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin: 0 6px 0 0;
    background: transparent; border: 0; cursor: pointer;
    color: var(--lv2-muted); border-radius: 8px;
    transition: background 140ms ease, color 140ms ease;
}
.lv2-field-reveal:hover { background: #F1F5F9; color: var(--lv2-brand); }
.lv2-field-reveal:focus-visible { outline: 0; box-shadow: var(--lv2-focus); }
.lv2-eye--on  { display: none; }
.lv2-eye--off { display: inline-block; }
.lv2-field-reveal.is-revealed .lv2-eye--on  { display: inline-block; }
.lv2-field-reveal.is-revealed .lv2-eye--off { display: none; }

/* Primary sign-in button */
.lv2-btn {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px;
    width: 100%; margin-top: 4px;
    padding: 13px 18px;
    font: inherit; font-weight: 600; font-size: 15px;
    color: #fff; letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--lv2-brand-bright), var(--lv2-brand-dark));
    border: 0; border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.08),
        0 8px 20px rgba(29, 78, 216, 0.28);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 160ms ease, filter 140ms ease;
}
.lv2-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.lv2-btn:active { transform: translateY(0); filter: brightness(0.98); }
.lv2-btn:focus-visible { outline: 0; box-shadow: var(--lv2-focus), 0 8px 20px rgba(29, 78, 216, 0.28); }
.lv2-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.lv2-btn svg { transition: transform 160ms ease; }
.lv2-btn:hover svg { transform: translateX(2px); }

/* Security line */
.lv2-security-note {
    margin: 16px 0 0;
    font-size: 12px; color: var(--lv2-muted);
    text-align: center; letter-spacing: 0.01em;
}

/* OR divider */
.lv2-or {
    display: flex; align-items: center; gap: 10px;
    margin: 20px 0 14px;
    color: var(--lv2-muted); font-size: 11px; letter-spacing: 0.14em;
}
.lv2-or::before, .lv2-or::after {
    content: ''; flex: 1; height: 1px; background: var(--lv2-border);
}
.lv2-or span {
    text-transform: uppercase; font-weight: 600;
}

/* Customer-portal card */
.lv2-cp-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #F8FAFF, #EEF4FF);
    border: 1px solid #DBEAFE;
    border-radius: 14px;
    text-decoration: none; color: var(--lv2-text);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 140ms ease, background 180ms ease;
}
.lv2-cp-card:hover {
    border-color: #93C5FD;
    background: linear-gradient(135deg, #F0F6FF, #E6EEFF);
    box-shadow: 0 6px 18px rgba(29, 78, 216, 0.12);
    transform: translateY(-1px);
}
.lv2-cp-card:focus-visible {
    outline: 0; box-shadow: var(--lv2-focus);
}
.lv2-cp-icon {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, var(--lv2-brand-bright), var(--lv2-brand-dark));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.lv2-cp-text {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.lv2-cp-text strong {
    font-size: 14px; font-weight: 650; color: var(--lv2-text);
}
.lv2-cp-sub {
    font-size: 12.5px; color: var(--lv2-muted);
}
.lv2-cp-arrow {
    flex: 0 0 auto;
    color: var(--lv2-muted);
    transition: color 140ms ease, transform 160ms ease;
}
.lv2-cp-card:hover .lv2-cp-arrow {
    color: var(--lv2-brand);
    transform: translateX(2px);
}

/* Bottom wave — anchored to the inside bottom edge of the card,
   independent of the content height. Positioned absolutely so it
   doesn't push content around and remains fixed at the bottom when
   the card grows. The card's `overflow: hidden` clips the wave to the
   rounded bottom corners. Lowered opacity + z-index 0 keeps it subtle
   and under the content. */
.lv2-wave {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 44px;
    display: block;
    padding: 0; margin: 0;
    pointer-events: none;
    opacity: 0.7;
    z-index: 0;
}

/* Footer links below the card */
.lv2-footer {
    position: relative; z-index: 1;
    margin-top: 18px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 12px; color: var(--lv2-muted);
}
.lv2-footer a {
    color: var(--lv2-brand); text-decoration: none; font-weight: 500;
}
.lv2-footer a:hover { text-decoration: underline; }
.lv2-footer a:focus-visible { outline: 0; box-shadow: var(--lv2-focus); border-radius: 4px; }

/* Entrance animation */
@keyframes lv2-in {
    from { opacity: 0; transform: translateY(10px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .lv2-card { animation: none; }
    .lv2-btn, .lv2-cp-card, .lv2-btn svg, .lv2-cp-arrow,
    .lv2-field-wrap, .lv2-field-reveal {
        transition: none;
    }
}

/* Tablet */
@media (max-width: 640px) {
    .lv2-body { padding: 16px 12px 56px; }
    .lv2-card { padding: 28px 22px 40px; border-radius: 20px; gap: 18px; }
    .lv2-wave { height: 40px; }
    .lv2-brand-mark { width: 44px; height: 44px; }
    .lv2-brand-name { font-size: 18px; }
}

/* Narrow phones (down to 320px) */
@media (max-width: 360px) {
    .lv2-card { padding: 22px 18px 36px; gap: 16px; }
    .lv2-wave { height: 36px; }
    .lv2-cp-card { gap: 10px; padding: 12px 12px; }
    .lv2-cp-icon { width: 36px; height: 36px; }
    .lv2-field-icon { margin-left: 12px; }
}

/* Hide decorative background shape on very small viewports */
@media (max-width: 420px) {
    .lv2-bg-shape--c { display: none; }
}
}

/* =====================================================================
 * CUSTOMER PORTAL v2 (cpv2-*) — premium enterprise shell: fixed navy
 * sidebar + top header + light content area + welcome banner + stat
 * cards + action tiles + two-column panels.
 *
 * Scope: ALL new classes prefix `cpv2-`. Does not touch any existing
 * `.cp-*`, `.lv2-*`, admin, or auth selector. The existing `.cp-chip`
 * status chip and `.cp-*` content classes continue to work inside the
 * new shell.
 * ================================================================= */
@layer pages {
.cpv2-body {
    --cpv2-brand:        #1D4ED8;
    --cpv2-brand-bright: #2563EB;
    --cpv2-brand-dark:   #123A8C;
    --cpv2-navy:         #0F2F6F;
    --cpv2-navy-2:       #142D5F;
    --cpv2-navy-hover:   rgba(255, 255, 255, 0.08);
    --cpv2-navy-active:  rgba(255, 255, 255, 0.14);
    --cpv2-bg:           #F4F7FB;
    --cpv2-card:         #FFFFFF;
    --cpv2-text:         #0F172A;
    --cpv2-secondary:    #475569;    /* darker-than-muted supporting text */
    --cpv2-muted:        #64748B;
    --cpv2-border:       #E2E8F0;
    --cpv2-border-soft:  #EEF2F7;
    --cpv2-focus:        0 0 0 3px rgba(37, 99, 235, 0.28);
    --cpv2-sidebar-w:    260px;
    --cpv2-header-h:     64px;

    margin: 0;
    min-height: 100vh;
    background: var(--cpv2-bg);
    color: var(--cpv2-text);
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* -------------------- SIDEBAR -------------------- */
.cpv2-sidebar {
    position: fixed; inset: 0 auto 0 0;
    width: var(--cpv2-sidebar-w);
    background: linear-gradient(180deg, var(--cpv2-navy) 0%, var(--cpv2-navy-2) 100%);
    color: #fff;
    display: flex; flex-direction: column;
    padding: 20px 14px 14px;
    z-index: 20;
    overflow-y: auto;
    box-shadow: 1px 0 0 rgba(255,255,255,0.04), 10px 0 30px rgba(15, 47, 111, 0.08);
}

.cpv2-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 10px 18px;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
}
.cpv2-brand__mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, var(--cpv2-brand-bright), var(--cpv2-brand));
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
}
.cpv2-brand__text { display: flex; flex-direction: column; min-width: 0; }
.cpv2-brand__name { font-weight: 650; font-size: 14.5px; letter-spacing: -0.005em; }
.cpv2-brand__sub  { font-size: 11px; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; }

.cpv2-nav { display: flex; flex-direction: column; gap: 2px; }
.cpv2-nav__link {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px;
    color: rgba(255,255,255,0.88); text-decoration: none;    /* ↑ was 0.78 — more readable on navy */
    font-size: 13.5px; font-weight: 500;
    position: relative;
    transition: background 140ms ease, color 140ms ease;
}
.cpv2-nav__link:hover { background: var(--cpv2-navy-hover); color: #fff; }
.cpv2-nav__link.is-active {
    background: var(--cpv2-navy-active);
    color: #fff;
    font-weight: 600;
}
.cpv2-nav__link.is-active::before {
    content: '';
    position: absolute; left: -14px; top: 10px; bottom: 10px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: #93C5FD;
}
.cpv2-nav__link:focus-visible { outline: 0; box-shadow: var(--cpv2-focus); }
.cpv2-nav__icon { flex: 0 0 auto; opacity: 0.9; }
.cpv2-nav__label { flex: 1; min-width: 0; }
.cpv2-nav__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: #2563EB; color: #fff;
    font-size: 11px; font-weight: 700;
}

.cpv2-sidebar__spacer { flex: 1 1 auto; }

.cpv2-sidebar__user {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-top: 12px;
}
.cpv2-sidebar__user-text { min-width: 0; flex: 1; }
.cpv2-sidebar__user-name {
    font-size: 13px; font-weight: 600; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpv2-sidebar__user-sub {
    font-size: 11.5px; color: rgba(255,255,255,0.6);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cpv2-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--cpv2-brand-bright), var(--cpv2-brand-dark));
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 650; font-size: 13px; letter-spacing: 0.02em;
    flex: 0 0 auto;
}
.cpv2-avatar--sm { width: 34px; height: 34px; font-size: 12.5px; }

.cpv2-signout-form { margin: 10px 0 0; }
.cpv2-signout-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 9px 12px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    color: rgba(255,255,255,0.9); font: inherit; font-size: 12.5px; font-weight: 500;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease;
}
.cpv2-signout-btn:hover { background: var(--cpv2-navy-hover); border-color: rgba(255,255,255,0.24); }
.cpv2-signout-btn:focus-visible { outline: 0; box-shadow: var(--cpv2-focus); }

/* -------------------- MAIN COLUMN -------------------- */
.cpv2-main {
    margin-left: var(--cpv2-sidebar-w);
    min-height: 100vh;
    display: flex; flex-direction: column;
}

.cpv2-header {
    display: flex; align-items: center; gap: 16px;
    height: var(--cpv2-header-h);
    padding: 0 28px;
    background: #fff;
    border-bottom: 1px solid var(--cpv2-border);
    position: sticky; top: 0; z-index: 10;
}
.cpv2-header__title { flex: 1; min-width: 0; }
.cpv2-header__title h1 {
    margin: 0; font-size: 17px; font-weight: 650;
    color: var(--cpv2-text); letter-spacing: -0.01em;
}
.cpv2-header__user {
    display: flex; align-items: center; gap: 10px;
}
.cpv2-header__user-text { text-align: right; min-width: 0; }
.cpv2-header__user-name {
    font-size: 13px; font-weight: 600; color: var(--cpv2-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.cpv2-header__user-sub {
    font-size: 11.5px; color: var(--cpv2-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}

/* Hamburger toggle (hidden on desktop) */
.cpv2-nav-toggle {
    display: none;
    width: 36px; height: 36px; padding: 0;
    background: transparent; border: 1px solid var(--cpv2-border);
    border-radius: 8px; color: var(--cpv2-text);
    align-items: center; justify-content: center;
    cursor: pointer;
}
.cpv2-nav-toggle:focus-visible { outline: 0; box-shadow: var(--cpv2-focus); }

/* -------------------- CONTENT -------------------- */
.cpv2-content {
    padding: 24px 28px 48px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* -------------------- WELCOME BANNER -------------------- */
.cpv2-welcome {
    position: relative; overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(135deg, #1D4ED8 0%, #123A8C 50%, #0F2F6F 100%);
    color: #fff;
    padding: 28px 32px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px rgba(29, 78, 216, 0.18);
}
.cpv2-welcome__bg {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden;
}
.cpv2-welcome__orb {
    position: absolute; border-radius: 50%;
    filter: blur(60px); opacity: 0.6;
}
.cpv2-welcome__orb--a {
    width: 300px; height: 300px;
    top: -80px; right: -60px;
    background: radial-gradient(circle, rgba(147,197,253,0.6), transparent 70%);
}
.cpv2-welcome__orb--b {
    width: 240px; height: 240px;
    bottom: -100px; right: 20%;
    background: radial-gradient(circle, rgba(37,99,235,0.5), transparent 70%);
}
.cpv2-welcome__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at top right, rgba(0,0,0,0.6), transparent 60%);
    -webkit-mask-image: radial-gradient(ellipse at top right, rgba(0,0,0,0.6), transparent 60%);
}
.cpv2-welcome__inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr minmax(220px, 340px);
    gap: 24px; align-items: center;
}
/*
 * Compact variant used by the current dashboard: greeting + heading
 * only. Collapses the two-column grid to one column so the gradient
 * doesn't look empty on the right where the "Please note" panel used
 * to sit, and tightens padding since there's less content.
 */
.cpv2-welcome--compact { padding: 24px 28px; }
.cpv2-welcome--compact .cpv2-welcome__inner { grid-template-columns: 1fr; gap: 0; }
.cpv2-welcome--compact .cpv2-welcome__title { margin-bottom: 0; }
/*
 * Welcome banner typography — explicit colors on every text node so a
 * global `h1, h2, h3, h4 { color: var(--text); }` rule in the base
 * stylesheet cannot override the inherited white on this blue gradient.
 * Specificity: class selector beats bare element selector in the global.
 */
.cpv2-welcome__eyebrow {
    margin: 0 0 6px; font-size: 13.5px; font-weight: 600;
    color: #DBEAFE !important;      /* light blue greeting */
    letter-spacing: 0.01em;
}
.cpv2-welcome__title {
    margin: 0 0 10px;
    font-size: 26px; font-weight: 700; letter-spacing: -0.015em;
    line-height: 1.25;
    color: #FFFFFF !important;      /* pure white heading */
}
.cpv2-welcome__text {
    margin: 0; font-size: 14.5px; line-height: 1.55;
    color: #F1F5F9 !important;      /* near-white description */
    max-width: 60ch;
}
.cpv2-welcome__notice {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 12px;
    padding: 16px 18px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.cpv2-welcome__notice-title {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
    color: #FFFFFF !important;      /* white */
    font-weight: 700; margin-bottom: 6px;
}
.cpv2-welcome__notice p {
    margin: 0; font-size: 13px;
    color: #F8FAFC !important;      /* near-white body */
    line-height: 1.5;
}

/* -------------------- STAT CARDS -------------------- */
.cpv2-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
.cpv2-stat {
    display: flex; align-items: flex-start; gap: 14px;
    background: var(--cpv2-card);
    border: 1px solid var(--cpv2-border);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.cpv2-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.08);
    border-color: #CBD5E1;
}
.cpv2-stat__icon {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.cpv2-stat__body { min-width: 0; }
.cpv2-stat__label {
    font-size: 11.5px; font-weight: 600;
    color: var(--cpv2-muted); text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.cpv2-stat__value {
    font-size: 26px; font-weight: 700; letter-spacing: -0.015em;
    line-height: 1.05; color: var(--cpv2-text);
}
.cpv2-stat__hint {
    font-size: 11.5px; color: var(--cpv2-secondary); margin-top: 2px;
}
/* Tones */
.cpv2-stat--blue   .cpv2-stat__icon { background: #DBEAFE; color: #1D4ED8; }
.cpv2-stat--teal   .cpv2-stat__icon { background: #CCFBF1; color: #0F766E; }
.cpv2-stat--violet .cpv2-stat__icon { background: #EDE9FE; color: #6D28D9; }
.cpv2-stat--red    .cpv2-stat__icon { background: #FEE2E2; color: #B91C1C; }

/* -------------------- ACTION TILES -------------------- */
.cpv2-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.cpv2-action {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 20px;
    background: var(--cpv2-card);
    border: 1px solid var(--cpv2-border);
    border-radius: 14px;
    text-decoration: none; color: var(--cpv2-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}
.cpv2-action:hover {
    transform: translateY(-1px);
    border-color: #93C5FD;
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.10);
}
.cpv2-action:focus-visible { outline: 0; box-shadow: var(--cpv2-focus); }
.cpv2-action__icon {
    flex: 0 0 auto;
    width: 42px; height: 42px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.cpv2-action__body { flex: 1; min-width: 0; }
.cpv2-action__title {
    font-size: 14.5px; font-weight: 650; color: var(--cpv2-text);
    letter-spacing: -0.005em; margin-bottom: 2px;
}
.cpv2-action__desc {
    font-size: 12.5px; color: var(--cpv2-secondary);
}
.cpv2-action__arrow {
    flex: 0 0 auto; color: var(--cpv2-muted);
    transition: transform 160ms ease, color 160ms ease;
}
.cpv2-action:hover .cpv2-action__arrow {
    transform: translateX(2px); color: var(--cpv2-brand);
}
.cpv2-action--blue   .cpv2-action__icon { background: #DBEAFE; color: #1D4ED8; }
.cpv2-action--teal   .cpv2-action__icon { background: #CCFBF1; color: #0F766E; }
.cpv2-action--violet .cpv2-action__icon { background: #EDE9FE; color: #6D28D9; }

/* -------------------- TWO-COLUMN PANELS -------------------- */
.cpv2-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cpv2-panel {
    background: var(--cpv2-card);
    border: 1px solid var(--cpv2-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.cpv2-panel__head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--cpv2-border-soft);
}
.cpv2-panel__head h3 {
    margin: 0; font-size: 14.5px; font-weight: 650; color: var(--cpv2-text);
}
.cpv2-panel__link {
    font-size: 12.5px; color: var(--cpv2-brand);
    text-decoration: none; font-weight: 500;
}
.cpv2-panel__link:hover { text-decoration: underline; }

.cpv2-list { list-style: none; margin: 0; padding: 0; }
.cpv2-list li + li { border-top: 1px solid var(--cpv2-border-soft); }
.cpv2-list__row {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    text-decoration: none; color: var(--cpv2-text);
    transition: background 140ms ease;
}
a.cpv2-list__row:hover { background: #F8FAFF; }
.cpv2-list__row--doc { cursor: default; }
.cpv2-list__icon {
    flex: 0 0 auto;
    width: 36px; height: 36px; border-radius: 8px;
    background: #EFF4FF; color: var(--cpv2-brand);
    display: inline-flex; align-items: center; justify-content: center;
}
.cpv2-list__main { flex: 1; min-width: 0; }
.cpv2-list__title {
    font-size: 13.5px; font-weight: 600; color: var(--cpv2-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-bottom: 2px;
}
.cpv2-list__qty { font-weight: 500; color: var(--cpv2-muted); font-size: 12.5px; }
.cpv2-list__meta {
    font-size: 12px; color: var(--cpv2-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cpv2-list__right { flex: 0 0 auto; }

/* Download pill inside document rows */
.cpv2-dl {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px;
    background: linear-gradient(135deg, var(--cpv2-brand-bright), var(--cpv2-brand-dark));
    color: #fff; font-size: 12.5px; font-weight: 600;
    text-decoration: none;
    transition: filter 140ms ease, transform 120ms ease;
}
.cpv2-dl:hover { filter: brightness(1.05); transform: translateY(-1px); }
.cpv2-dl:focus-visible { outline: 0; box-shadow: var(--cpv2-focus); }
.cpv2-dl--off {
    background: #F1F5F9; color: #94A3B8; cursor: not-allowed;
    font-weight: 500;
}

/* Empty states */
.cpv2-empty {
    padding: 28px 22px;
    text-align: center;
    color: var(--cpv2-muted);
}
.cpv2-empty__icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: #EFF4FF; color: var(--cpv2-brand);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
}
.cpv2-empty h4 { margin: 0 0 4px; color: var(--cpv2-text); font-size: 14.5px; font-weight: 650; }
.cpv2-empty p  { margin: 0; font-size: 13px; color: var(--cpv2-secondary); line-height: 1.5; }
.cpv2-empty__cta {
    display: inline-block; margin-top: 12px;
    font-size: 13px; font-weight: 600; color: var(--cpv2-brand);
    text-decoration: none;
}
.cpv2-empty__cta:hover { text-decoration: underline; }

/* -------------------- MOBILE SCRIM -------------------- */
.cpv2-scrim {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 15;
}

/* -------------------- RESPONSIVE -------------------- */
/* Tablet: shrink sidebar + collapse panels to one column */
@media (max-width: 1100px) {
    .cpv2-panels { grid-template-columns: 1fr; }
    .cpv2-actions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .cpv2-stats   { grid-template-columns: repeat(2, 1fr); }
    .cpv2-actions { grid-template-columns: 1fr; }
    .cpv2-welcome__inner { grid-template-columns: 1fr; }
}

/* Mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 820px) {
    .cpv2-body { --cpv2-sidebar-w: 0px; }
    .cpv2-sidebar {
        transform: translateX(-100%);
        transition: transform 220ms ease;
        width: 280px;
        --cpv2-sidebar-w: 280px;
    }
    .cpv2-main { margin-left: 0; }
    .cpv2-nav-toggle { display: inline-flex; }
    .cpv2-body.cpv2-nav-open .cpv2-sidebar { transform: translateX(0); }
    .cpv2-body.cpv2-nav-open .cpv2-scrim   { opacity: 1; pointer-events: auto; }
    .cpv2-content { padding: 16px 16px 36px; }
    .cpv2-welcome { padding: 22px 20px; border-radius: 14px; }
    .cpv2-welcome__title { font-size: 20px; }
    .cpv2-header { padding: 0 16px; }
    .cpv2-header__user-text { display: none; }
}

/* Narrow phones */
@media (max-width: 480px) {
    .cpv2-stats { grid-template-columns: 1fr; }
    .cpv2-stat__value { font-size: 22px; }
    .cpv2-list__row { padding: 12px 14px; }
    .cpv2-panel__head { padding: 14px 14px 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cpv2-sidebar, .cpv2-scrim, .cpv2-stat, .cpv2-action,
    .cpv2-action__arrow, .cpv2-list__row, .cpv2-dl, .cpv2-nav__link {
        transition: none;
    }
}
}

/* =====================================================================
 * LICENCE RENEWALS DASHBOARD (admin_renewals.php)
 *
 * All styles here are SCOPED to the page via the .ren-page root wrapper
 * on <main>. Nothing in this block names a bare .stat-* / .btn / .alert
 * / .vault-* selector, so there is zero bleed to other admin pages.
 * Reuses existing design tokens (--brand-*, --border, --text-*) with
 * local fallbacks for self-contained safety.
 * ===================================================================== */

.ren-page {
    --ren-surface:      #FFFFFF;
    --ren-surface-tint: #F8FAFC;
    --ren-border:       var(--border, #E2E8F0);
    --ren-text:         var(--text, #0F172A);
    --ren-muted:        var(--text-muted, #64748B);
    --ren-brand:        var(--brand-600, #1D4ED8);
    --ren-brand-soft:   #EFF6FF;
    --ren-radius:       10px;
    --ren-radius-sm:    8px;
    --ren-h-control:    38px;
}

/* ---- Header ------------------------------------------------------ */
.ren-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--ren-border);
}
.ren-header__text { min-width: 0; flex: 1; }
.ren-header__title {
    margin: 0; font-size: 22px; font-weight: 650;
    color: var(--ren-text); letter-spacing: -0.01em;
}
.ren-header__subtitle {
    margin: 4px 0 0; font-size: 13.5px; color: var(--ren-muted);
    max-width: 640px; line-height: 1.5;
}
.ren-header__meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ren-status-pill {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 12px;
    font-size: 12px; font-weight: 600;
    background: var(--ren-surface-tint); color: var(--ren-text);
    border: 1px solid var(--ren-border); border-radius: 999px;
}
.ren-status-pill__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #CBD5E1;
}
.ren-status-pill--on  { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.ren-status-pill--on  .ren-status-pill__dot { background: #10B981; box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
.ren-status-pill--off { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.ren-status-pill--off .ren-status-pill__dot { background: #DC2626; }
.ren-test-toggle { height: var(--ren-h-control); }

/* ---- Flash alerts ------------------------------------------------ */
.ren-flash { margin-bottom: 12px; }

/* ---- Panel (shared surface for test-send / filters / records) ---- */
.ren-panel {
    background: var(--ren-surface);
    border: 1px solid var(--ren-border);
    border-radius: var(--ren-radius);
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
.ren-panel__head { margin-bottom: 10px; }
.ren-panel__title {
    margin: 0; font-size: 15px; font-weight: 650;
    color: var(--ren-text); letter-spacing: -0.005em;
}
.ren-panel__hint {
    margin: 6px 0 0; font-size: 12.5px; color: var(--ren-muted);
    line-height: 1.5;
}
.ren-panel__hint code {
    background: #F1F5F9; padding: 1px 6px; border-radius: 4px;
    font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Test-send form --------------------------------------------- */
.ren-panel--test { background: #FFFBEB; border-color: #FDE68A; }
.ren-test-form {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
    margin-top: 12px;
}
.ren-check {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--ren-text);
    padding-bottom: 10px;
}
.ren-check input[type="checkbox"] { margin: 0; }

/* ---- Fields + inputs (shared across filter + test-send) --------- */
.ren-field {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 140px;
}
.ren-field--grow { flex: 1 1 240px; }
.ren-field__label {
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ren-muted);
}
.ren-input {
    height: var(--ren-h-control);
    padding: 0 12px;
    font-size: 13.5px; color: var(--ren-text);
    background: var(--ren-surface);
    border: 1px solid var(--ren-border);
    border-radius: var(--ren-radius-sm);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.ren-input:focus {
    outline: 0;
    border-color: var(--ren-brand);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.ren-input--date { font-family: inherit; }
.ren-input--sm { height: 30px; padding: 0 8px; font-size: 12.5px; }
.ren-input-wrap { position: relative; display: block; }
.ren-input-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--ren-muted); pointer-events: none;
}
.ren-input--with-icon { padding-left: 34px; }

/* ---- Stats grid -------------------------------------------------- */
.ren-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.ren-stat {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 108px; padding: 14px 14px 12px;
    background: var(--ren-surface);
    border: 1px solid var(--ren-border);
    border-radius: var(--ren-radius);
    text-decoration: none; color: var(--ren-text);
    transition: box-shadow 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
    overflow: hidden;
}
.ren-stat::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: #CBD5E1;
}
.ren-stat:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,23,42,0.06);
    border-color: #CBD5E1;
}
.ren-stat:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.25);
    border-color: var(--ren-brand);
}
.ren-stat__label {
    font-size: 12px; font-weight: 650; letter-spacing: 0.02em;
    color: var(--ren-text); text-transform: uppercase;
}
.ren-stat__value {
    font-size: 28px; font-weight: 700; line-height: 1;
    color: var(--ren-text); letter-spacing: -0.02em;
    margin: 6px 0 4px;
}
.ren-stat__hint { font-size: 11.5px; color: var(--ren-muted); line-height: 1.4; }

/* Status accent colours - top border, no loud backgrounds. */
.ren-stat--green::before  { background: #10B981; }
.ren-stat--amber::before  { background: #F59E0B; }
.ren-stat--red::before    { background: #DC2626; }
.ren-stat--slate::before  { background: #64748B; }
.ren-stat--blue::before   { background: #2563EB; }

.ren-stat--active {
    border-color: var(--ren-brand);
    box-shadow: 0 0 0 2px rgba(37,99,235,0.12) inset;
}

/* ---- Filter toolbar --------------------------------------------- */
.ren-panel--filters { padding: 14px 18px; }
.ren-filters { display: flex; flex-direction: column; gap: 10px; }
.ren-filters__row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
}
.ren-filters__actions {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto; padding-bottom: 1px;
}

/* ---- Records section + count ------------------------------------- */
.ren-panel--records { padding: 0; }
.ren-records__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ren-border);
}
.ren-records__count { font-size: 12.5px; color: var(--ren-muted); }
.ren-records__count strong { color: var(--ren-text); font-weight: 600; }

/* ---- Table ------------------------------------------------------- */
.ren-table-wrap { overflow-x: auto; }
.ren-table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; color: var(--ren-text);
}
.ren-table thead th {
    text-align: left; padding: 10px 14px;
    font-size: 11px; font-weight: 650; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--ren-muted);
    background: var(--ren-surface-tint);
    border-bottom: 1px solid var(--ren-border);
    white-space: nowrap;
}
.ren-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ren-border);
    vertical-align: top;
}
.ren-table tbody tr:last-child td { border-bottom: none; }
.ren-table tbody tr:hover td { background: var(--ren-surface-tint); }
.ren-cell-strong { font-weight: 600; color: var(--ren-text); line-height: 1.3; }
.ren-cell-sub    { font-size: 11.5px; color: var(--ren-muted); margin-top: 2px; line-height: 1.4; }
.ren-cell-sub--error { color: #B91C1C; }
.ren-cell-sub--muted { color: #94A3B8; }
.ren-cell-dim    { color: #CBD5E1; }

/* ---- Badges (row-level status + reminder state) ----------------- */
.ren-badge {
    display: inline-block; padding: 2px 10px;
    font-size: 11px; font-weight: 650; letter-spacing: 0.02em;
    text-transform: uppercase; border-radius: 999px;
    border: 1px solid transparent; line-height: 1.5;
}
.ren-badge--upcoming  { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.ren-badge--due_soon  { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
.ren-badge--overdue   { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }
.ren-badge--paused    { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.ren-badge--cancelled { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.ren-badge--no_date   { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }
.ren-badge--active    { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }

/* Date-source chip — tiny label on the Renewal date cell showing
   whether the date was auto-calculated from the catalogue, manually
   confirmed by an admin, or marked perpetual. Mouseover shows the
   full source string. */
.ren-src {
    display: inline-block; margin-top: 4px;
    padding: 1px 7px;
    font-size: 10px; font-weight: 650; letter-spacing: 0.04em;
    text-transform: uppercase; border-radius: 4px;
    border: 1px solid transparent;
}
.ren-src--auto      { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }
.ren-src--manual    { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.ren-src--perpetual { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }
.ren-src--unknown   { background: #FFFFFF; color: #94A3B8; border-color: #E2E8F0; }

/* ---- Row actions (collapsible) ---------------------------------- */
.ren-actions-cell { white-space: nowrap; }
.ren-actions__menu {
    margin-top: 8px;
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px;
    background: var(--ren-surface-tint);
    border: 1px solid var(--ren-border);
    border-radius: var(--ren-radius-sm);
    min-width: 260px;
}
.ren-actions__form {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

/* ---- Empty state ------------------------------------------------- */
.ren-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px;
    padding: 36px 20px;
    text-align: center;
}
.ren-empty__icon {
    width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
    background: var(--ren-brand-soft); color: var(--ren-brand); border-radius: 999px;
    margin-bottom: 2px;
}
.ren-empty__title { margin: 0; font-size: 15px; font-weight: 650; color: var(--ren-text); }
.ren-empty__text  { margin: 0; font-size: 13px; color: var(--ren-muted); max-width: 380px; }
.ren-empty .btn { margin-top: 6px; }

/* ---- Pager ------------------------------------------------------- */
.ren-pager {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 18px;
    border-top: 1px solid var(--ren-border);
}
.ren-pager__pos { font-size: 12px; color: var(--ren-muted); margin: 0 6px; }

/* ---- Responsive breakpoints ------------------------------------- */
@media (max-width: 1100px) {
    .ren-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .ren-header { flex-direction: column; align-items: stretch; }
    .ren-header__meta { justify-content: flex-start; }
    .ren-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ren-filters__actions { margin-left: 0; width: 100%; justify-content: flex-end; }
    .ren-records__head { padding: 12px 14px; }
}
@media (max-width: 480px) {
    .ren-stats { grid-template-columns: 1fr 1fr; }
}

/* Link-styled button for inline POST forms where we previously used an
   anchor (logout, cancel). Keeps the look while making the request POST
   so a CSRF-triggered image-tag can't fire it. */
.link-button {
    background: none; border: 0; padding: 0; margin: 0;
    color: var(--brand-600, #1D4ED8); cursor: pointer;
    font: inherit; text-decoration: underline;
}
.link-button:hover { color: var(--brand-700, #1E40AF); }