:root{
    --bg:#f6f7fb;
    --surface:#ffffff;
    --border:#e3e6ec;
    --text:#1a1f2e;
    --text-muted:#6b7280;
    --primary:#1d3f72;
    --primary-hover:#15305a;
    --primary-tint:#e8eef8;
    --gold:#f0b429;
    --gold-tint:#fdf3dd;
    --gold-dim:#b8860f;
    --success-bg:#e9f9f0;
    --success-text:#1e8a56;
    --error-bg:#fdecea;
    --error-text:#c23a3a;
    --radius:10px;
    --mono:'IBM Plex Mono', monospace;
    --sans:'Barlow', sans-serif;
    --mobile-topbar-height:43px
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--sans);
    min-height:100vh;
}

a{ color:inherit; }

.eyebrow{
    font-family:var(--mono);
    font-size:11px;
    color:var(--primary);
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:14px;
    position:relative;
    display:inline-block;
    padding-bottom:6px;
}
.eyebrow::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:28px; height:2px;
    background:var(--gold);
    border-radius:2px;
}

/* ─── ENTRANCE ANIMATION ─── */

.fade-up{ opacity:0; transform:translateY(16px); animation:fadeUp .5s ease forwards; }
.delay-1{ animation-delay:.08s; }
.delay-2{ animation-delay:.16s; }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

/* ─── TOP NAV (auth pages) ─── */

.portal-topnav{
    height:60px;
    display:flex;
    align-items:center;
    padding:0 48px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
}
.portal-topnav .brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-weight:700;
    font-size:15px;
    color:var(--text);
}
.portal-topnav .brand img{ height:24px; width:auto; }

/* ─── AUTH PAGES ─── */

.auth-shell{
    min-height:calc(100vh - 60px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    position:relative;
    overflow:hidden;
    visibility: hidden;
    background:
        radial-gradient(ellipse 50% 60% at 85% 15%, rgba(29,63,114,.06) 0%, transparent 70%),
        radial-gradient(ellipse 40% 50% at 10% 90%, rgba(240,180,41,.08) 0%, transparent 65%);
}
.auth-shell.ready {
  visibility: visible;
}
.auth-shell::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(29,63,114,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,63,114,.025) 1px, transparent 1px);
    background-size:44px 44px;
    pointer-events:none;
}

.auth-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:60px 36px 40px;
    width:100%;
    max-width:400px;
    box-shadow:0 8px 32px rgba(20,30,60,.08);
    position:relative;
    z-index:1;
}

.auth-card h1{ font-size:22px; font-weight:700; margin-bottom:6px; }

.auth-card p.sub{
    color:var(--text-muted);
    font-size:14px;
    margin-bottom:24px;
    line-height:1.5;
}

.field{ margin-bottom:16px; }

.field label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }

.field input{
    width:100%;
    border:1.5px solid var(--border);
    border-radius:8px;
    padding:11px 13px;
    font:inherit;
    font-size:14px;
    background:var(--bg);
    color:var(--text);
    transition:border-color .15s, box-shadow .15s;
}

.field input:focus{
    outline:none;
    border-color:var(--primary);
    background:var(--surface);
    box-shadow:0 0 0 3px var(--primary-tint);
}

.btn-primary{
    width:100%;
    background:var(--primary);
    color:#fff;
    border:none;
    font-weight:600;
    font-size:14px;
    padding:12px;
    border-radius:8px;
    cursor:pointer;
    transition:background .15s, transform .1s, box-shadow .15s;
    margin-top:4px;
}
.btn-primary:hover{ background:var(--primary-hover); transform:translateY(-1px); box-shadow:0 4px 14px rgba(29,63,114,.25); }
.btn-primary:active{ transform:translateY(0); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-secondary{
    width:100%;
    background:var(--surface);
    color:var(--text);
    border:1.5px solid var(--border);
    font-weight:600;
    font-size:14px;
    padding:11px;
    border-radius:8px;
    cursor:pointer;
    transition:.15s ease;
}
.btn-secondary:hover{ background:var(--bg); border-color:var(--primary); }

.btn-danger{
    background:var(--surface);
    color:var(--error-text);
    border:1.5px solid #f3c9c9;
    font-weight:600;
    font-size:13px;
    padding:9px 16px;
    border-radius:8px;
    cursor:pointer;
    transition:.15s ease;
}
.btn-danger:hover{ background:var(--error-bg); }

.divider{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text-muted);
    font-size:12px;
    margin:20px 0;
}
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--border); }

.oauth-row{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }

.btn-oauth{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1.5px solid var(--border);
    background:var(--surface);
    color:var(--text);
    padding:10px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:.15s ease;
}
.btn-oauth:hover{ background:var(--bg); border-color:var(--primary); transform:translateY(-1px); }
.btn-oauth svg{ flex-shrink:0; }

.link-row{ text-align:center; margin-top:20px; font-size:13px; color:var(--text-muted); }
.link-row a{ color:var(--primary); font-weight:600; text-decoration:none; }
.link-row a:hover{ text-decoration:underline; }

.msg{ font-size:13px; padding:10px 12px; border-radius:8px; margin-bottom:16px; display:none; }
.msg.error{ background:var(--error-bg); color:var(--error-text); display:block; }
.msg.success{ background:var(--success-bg); color:var(--success-text); display:block; }

.error-code { font-size:50px; font-weight:700; margin-bottom:10px; color:var(--gold); }
/* ─── DASHBOARD SHELL (sidebar layout) ─── */

.dash-shell{ display:flex; min-height:100vh; }

.sidebar{
    width:230px;
    flex-shrink:0;
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    padding:20px 14px;
    position:sticky;
    top:0;
    align-self:flex-start;
    height:100vh;
    overflow-y:auto;
}

.sidebar .brand-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 10px 22px;
    font-weight:700;
    font-size:14px;
}
.sidebar .brand-row img{ height:22px; width:auto; }

.sidebar nav{ display:flex; flex-direction:column; gap:2px; flex:1; }

.nav-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:8px;
    color:var(--text-muted);
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    border:none;
    background:transparent;
    cursor:pointer;
    width:100%;
    text-align:left;
    transition:.15s ease;
    position:relative;
}
.nav-item:hover{ background:var(--bg); color:var(--text); }

.nav-item.active{
    background:var(--primary-tint);
    color:var(--primary);
    font-weight:700;
}

.nav-item.disabled{ opacity:.5; cursor:not-allowed; }
.nav-item.disabled:hover{ background:transparent; color:var(--text-muted); }

.badge-soon{
    margin-left:auto;
    font-family:var(--mono);
    font-size:9px;
    letter-spacing:.5px;
    background:var(--gold-tint);
    color:var(--gold-dim);
    padding:2px 6px;
    border-radius:999px;
    text-transform:uppercase;
}

.sidebar-footer{
    border-top:1px solid var(--border);
    padding-top:14px;
    margin-top:14px;
}

.user-chip{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    margin-bottom:6px;
}
.user-avatar{
    width:32px; height:32px;
    border-radius:50%;
    background:var(--primary-tint);
    color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px;
    flex-shrink:0;
}
.user-chip .u-name{ font-size:13px; font-weight:600; line-height:1.3; }
.user-chip .u-email{ font-size:11px; color:var(--text-muted); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:130px; }

/* ─── SHIMMER SKELETONS ─── */

.skeleton{
    background:linear-gradient(90deg, var(--border) 25%, var(--bg) 37%, var(--border) 63%);
    background-size:400% 100%;
    animation:shimmer 1.4s ease infinite;
    border-radius:6px;
}
@keyframes shimmer{
    0%{ background-position:100% 50%; }
    100%{ background-position:0 50%; }
}
.skeleton-line{ height:14px; margin-bottom:8px; }
.skeleton-line.short{ width:60%; }
.skeleton-card{ height:78px; border-radius:var(--radius); }
.skeleton-row td{ padding:14px; }

/* ─── PASSWORD VISIBILITY TOGGLE ─── */

.password-wrap{ position:relative; }
.password-wrap input{ padding-right:42px; }
.toggle-password{
    position:absolute;
    right:10px; top:50%;
    transform:translateY(-50%);
    background:none; border:none;
    cursor:pointer;
    font-size:15px;
    color:var(--text-muted);
    padding:4px;
    line-height:1;
}
.toggle-password:hover{ color:var(--text); }

/* ─── MAIN CONTENT ─── */

.main-content{ flex:1; min-width:0; }

.content-header{
    position:sticky;
    top:0;
    z-index:20;
    padding:20px 40px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
}
.content-header h1{ font-size:22px; font-weight:700; }
.content-header p{ color:var(--text-muted); font-size:13px; margin-top:4px; }

.content-body{ padding:36px 40px 80px; max-width:1100px; }

/* ─── APP GRID ─── */

.app-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.app-tile{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    transition:box-shadow .15s, transform .15s;
}
.app-tile:not(.locked):hover{ box-shadow:0 6px 20px rgba(20,30,60,.08); transform:translateY(-2px); }
.app-tile.locked{ opacity:.55; }

.app-tile h3{ font-size:16px; margin-bottom:8px; }
.app-tile p{ color:var(--text-muted); font-size:13px; line-height:1.6; margin-bottom:16px; }

.app-tile a.open-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    font-size:13px;
    padding:9px 16px;
    border-radius:6px;
    transition:.15s ease;
}
.app-tile a.open-btn:hover{ background:var(--primary-hover); }

.app-tile .locked-badge{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.5px;
    color:var(--text-muted);
    text-transform:uppercase;
}

/* ─── STAT CARDS (admin) ─── */

.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.stat-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; }
.stat-card .label{ font-size:12px; color:var(--text-muted); margin-bottom:6px; }
.stat-card .value{ font-size:24px; font-weight:700; }

/* ─── ADMIN TABLE ─── */

.admin-table-wrap{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:32px; }
table.admin-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.admin-table thead th{ text-align:left; padding:10px 14px; background:var(--bg); color:var(--text-muted); font-weight:600; border-bottom:1px solid var(--border); }
table.admin-table tbody td{ padding:10px 14px; border-top:1px solid var(--border); vertical-align:middle; }
table.admin-table tbody tr:hover{ background:var(--bg); }

.status-pill{ font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; text-transform:capitalize; }
.status-pill.active{ background:var(--success-bg); color:var(--success-text); }
.status-pill.suspended{ background:var(--error-bg); color:var(--error-text); }
.status-pill.deactivated{ background:var(--bg); color:var(--text-muted); }

.admin-badge{ font-family:var(--mono); font-size:10px; background:var(--gold-tint); color:var(--gold-dim); padding:2px 7px; border-radius:999px; margin-left:6px; }

.row-action{
    background:transparent; border:1px solid var(--border); color:var(--text);
    font-size:12px; padding:5px 10px; border-radius:6px; cursor:pointer; margin-right:6px;
    transition:.15s ease;
}
.row-action:hover{ background:var(--bg); }

/* ─── SECTION CARD (settings) ─── */

.section-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; margin-bottom:20px; max-width:520px; }
.section-card h2{ font-size:16px; margin-bottom:4px; }
.section-card p.hint{ color:var(--text-muted); font-size:13px; margin-bottom:18px; }
.section-card.danger{ border-color:#f3c9c9; }
.section-card.danger h2{ color:var(--error-text); }

/* ─── PAGE FADE-IN + TRANSITION OVERLAY ─── */

body{ animation: pageFadeIn .2s ease; }
@keyframes pageFadeIn{ from{ opacity:0; } to{ opacity:1; } }

#page-transition-overlay{
    position:fixed; inset:0;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    z-index:9999;
    opacity:0; pointer-events:none;
    transition:opacity .15s ease;
}
#page-transition-overlay.active{ opacity:1; pointer-events:all; }
#page-transition-overlay .spinner{
    width:36px; height:36px; border-radius:50%;
    border:3px solid var(--border); border-top-color:var(--primary);
    animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ─── MOBILE TOPBAR + DRAWER ─── */

.mobile-topbar{
    display:none;
    align-items:center;
    gap:14px;
    padding:0 20px;
    background:var(--surface);
    border-bottom:1px solid var(--border);
}
.mobile-topbar button{
    background:transparent;
    border:none;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    color:var(--text);
}
.mobile-topbar .brand-row{ padding:0; margin:0; }

.sidebar-backdrop{
    display:none;
    position:fixed; inset:0;
    background:rgba(20,30,60,.4);
    z-index:40;
}
.sidebar-backdrop.open{ display:block; }

/* ─── FILTER BAR + BULK ACTION TOOLBAR ─── */

.filter-bar{
    display:flex;
    gap:10px;
    margin-bottom:16px;
    flex-wrap:wrap;
}
.filter-bar input, .filter-bar select{
    border:1.5px solid var(--border);
    border-radius:8px;
    padding:9px 12px;
    font:inherit;
    font-size:13px;
    background:var(--surface);
}
.filter-bar input{ flex:1; min-width:180px; }

.bulk-toolbar{
    display:none;
    align-items:center;
    gap:10px;
    background:var(--primary-tint);
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 14px;
    margin-bottom:14px;
    font-size:13px;
}
.bulk-toolbar.active{ display:flex; }
.bulk-toolbar .count{ font-weight:600; color:var(--primary); }
.bulk-toolbar .spacer{ flex:1; }

.expand-row td{ background:var(--bg); padding:16px !important; }
.expand-app-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 4px; font-size:13px; border-bottom:1px solid var(--border); }
.expand-app-row:last-child{ border-bottom:none; }

@media(max-width:900px){
    .portal-topnav { padding: 0 24px; }
    .app-grid, .stat-grid{ grid-template-columns:1fr; }

    .mobile-topbar{
        display:flex;
        position:fixed;
        top:0; left:0; right:0;
        height:var(--mobile-topbar-height);
        z-index:60;
    }

    .dash-shell{
        flex-direction:column;
        padding-top:var(--mobile-topbar-height);
    }

    .content-header{ top:var(--mobile-topbar-height); }

    .sidebar{
        position:fixed;
        top:var(--mobile-topbar-height);
        left:0;
        bottom:0;
        height:calc(100vh - var(--mobile-topbar-height));
        width:240px;
        z-index:50;
        transform:translateX(-100%);
        transition:transform .2s ease;
    }
    .sidebar.open{ transform:translateX(0); }

    .main-content{ width:100%; }
}