@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root {
    --violet-100: #F1EEFF;
    --violet-200: #D8D0FF;
    --violet-500: #5B3FD6;
    --violet-600: #4E32C3;
    --violet-700: #4329B2;
    --magenta-500: #A63D97;

    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    --success: #16794D;
    --success-bg: #ECFDF3;
    --warning: #B45309;
    --warning-bg: #FFF7ED;
    --danger: #B42318;
    --danger-bg: #FEF2F2;
    --info: #1D4ED8;
    --info-bg: #EFF6FF;

    --surface: #FFFFFF;
    --surface-subtle: var(--slate-50);
    --border: var(--slate-200);
    --text: var(--slate-900);
    --text-secondary: var(--slate-600);
    --text-muted: var(--slate-500);

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
    --shadow-md: 0 12px 30px rgba(15,23,42,.08);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
    margin: 0;
    font-family: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--surface-subtle);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--violet-500); text-decoration: none; }
a:hover { color: var(--violet-600); }

button, input { font: inherit; }

.btn {
    min-height: 42px;
    padding: .68rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: .15s ease;
}

.btn-primary {
    background: var(--violet-500);
    color: #fff;
    border-color: var(--violet-500);
}
.btn-primary:hover { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }

.btn-secondary {
    background: #fff;
    color: var(--slate-700);
    border-color: var(--slate-300);
}
.btn-secondary:hover { background: var(--slate-50); color: var(--slate-900); }

.btn-block { width: 100%; }

.alert {
    margin-bottom: 1rem;
    padding: .8rem .9rem;
    border: 1px solid;
    border-radius: var(--radius-md);
    font-size: .875rem;
    line-height: 1.45;
}
.alert-danger { color: var(--danger); background: var(--danger-bg); border-color: #FECACA; }
.alert-success { color: var(--success); background: var(--success-bg); border-color: #BBF7D0; }
.alert-warning { color: var(--warning); background: var(--warning-bg); border-color: #FED7AA; }

/* AUTH */
.auth-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(360px, 44%) 1fr;
    background: #fff;
}

.auth-brand-panel {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: clamp(2rem, 5vw, 5rem);
    display: flex;
    flex-direction: column;
    color: #fff;
    background:
        radial-gradient(circle at 20% 15%, rgba(166,61,151,.34), transparent 34%),
        radial-gradient(circle at 82% 80%, rgba(91,63,214,.34), transparent 36%),
        linear-gradient(145deg, #0F172A 0%, #111827 60%, #1E1B4B 100%);
}

.auth-brand-panel::after {
    content: "";
    position: absolute;
    width: 680px;
    height: 680px;
    right: -360px;
    bottom: -380px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
}

.auth-logo-link { position: relative; z-index: 1; width: fit-content; }

.auth-brand-logo {
    width: 170px;
    max-height: 54px;
    object-fit: contain;
    object-position: left center;
}

.auth-brand-copy {
    position: relative;
    z-index: 1;
    margin: auto 0;
    max-width: 540px;
}

.auth-kicker {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #DDD6FE;
    font-size: .875rem;
    font-weight: 600;
}
.auth-kicker span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #A78BFA;
}

.auth-brand-copy h1 {
    margin: 0 0 1rem;
    max-width: 500px;
    font-size: clamp(2.6rem, 5vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.auth-brand-copy p {
    margin: 0;
    color: #CBD5E1;
    font-size: 1.1rem;
    line-height: 1.65;
}

.auth-brand-footer {
    position: relative;
    z-index: 1;
    color: #94A3B8;
    font-size: .8125rem;
}

.auth-form-panel {
    min-height: 100vh;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-card { width: 100%; max-width: 430px; }

.auth-mobile-logo {
    display: none;
    width: 150px;
    margin-bottom: 2rem;
}

.auth-heading { margin-bottom: 1.8rem; }

.auth-heading h2 {
    margin: 0 0 .45rem;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.auth-heading p, .form-note {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.field-group { margin-bottom: 1.15rem; }
.field-group label { display: block; margin-bottom: .45rem; font-size: .875rem; font-weight: 500; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.field-label-row a { margin-bottom: .45rem; font-size: .85rem; font-weight: 500; }

.field-group input {
    width: 100%;
    min-height: 44px;
    padding: .68rem .78rem;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: 0;
    font-size: 1rem;
}
.field-group input::placeholder { color: var(--slate-400); }
.field-group input:focus {
    border-color: var(--violet-500);
    box-shadow: 0 0 0 3px var(--violet-100);
}
.field-help { margin-top: .4rem; color: var(--text-muted); font-size: .825rem; line-height: 1.4; }

.auth-back { margin: 1rem 0 0; text-align: center; font-size: .875rem; }

/* ADMIN SHELL */
.app-shell { min-height: 100vh; }

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: 258px;
    display: flex;
    flex-direction: column;
    background: var(--slate-900);
    transition: transform .2s ease;
}

.sidebar-brand {
    height: 74px;
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand img { width: 128px; max-height: 44px; object-fit: contain; object-position: left center; }
.sidebar-brand > span {
    padding: .18rem .42rem;
    color: #DDD6FE;
    background: rgba(91,63,214,.25);
    border: 1px solid rgba(167,139,250,.2);
    border-radius: 999px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.sidebar-nav { padding: 1rem .75rem; overflow-y: auto; }
.sidebar-label {
    padding: .45rem .75rem .6rem;
    color: var(--slate-500);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sidebar-link {
    position: relative;
    min-height: 42px;
    margin-bottom: .18rem;
    padding: .65rem .72rem;
    display: flex;
    align-items: center;
    gap: .72rem;
    color: #CBD5E1;
    border-radius: 9px;
    font-size: .875rem;
    font-weight: 500;
}
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-link.active { color: #fff; background: rgba(91,63,214,.38); }
.sidebar-link.coming-soon { cursor: default; }
.nav-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1.7px solid currentColor;
    border-radius: 5px;
    opacity: .9;
}
.soon-dot {
    width: 5px;
    height: 5px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--slate-600);
}

.sidebar-footer {
    margin-top: auto;
    padding: 1rem .85rem;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-user {
    margin-bottom: .8rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #fff;
}
.sidebar-user div { min-width: 0; }
.sidebar-user strong { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.sidebar-user span:not(.avatar) { display: block; margin-top: .12rem; color: var(--slate-400); font-size: .7rem; }

.avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--violet-500), var(--magenta-500));
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
}

.sidebar-signout {
    width: 100%;
    padding: .55rem .7rem;
    color: #CBD5E1;
    background: transparent;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
}
.sidebar-signout:hover { color: #fff; background: rgba(255,255,255,.05); }

.app-main { min-height: 100vh; margin-left: 258px; }

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 74px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}
.topbar-eyebrow { display: block; color: var(--text-muted); font-size: .7rem; line-height: 1.1; }
.topbar-title { display: block; margin-top: .12rem; font-size: .9rem; }
.topbar-spacer { flex: 1; }
.environment-badge {
    padding: .25rem .55rem;
    color: var(--violet-700);
    background: var(--violet-100);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}
.topbar-avatar { width: 34px; height: 34px; flex-basis: 34px; }

.mobile-menu {
    display: none;
    width: 40px;
    height: 40px;
    padding: 9px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.mobile-menu span {
    display: block;
    height: 2px;
    margin: 3px 0;
    background: var(--slate-700);
    border-radius: 4px;
}

.app-content { padding: 1.75rem; }

.page-heading {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.page-heading h1 {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.22;
    letter-spacing: -.025em;
}
.page-heading p { margin: .35rem 0 0; color: var(--text-muted); }
.page-heading-actions {
    min-height: 38px;
    padding: .5rem .7rem;
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }

.stats-grid {
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;
}
.stat-card {
    padding: 1.05rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.stat-card-warning { border-color: #FED7AA; }
.stat-label { color: var(--text-muted); font-size: .82rem; font-weight: 500; }
.stat-value { margin-top: .35rem; font-size: 1.85rem; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.stat-foot { margin-top: .35rem; color: var(--text-muted); font-size: .75rem; }

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, .8fr);
    gap: 1rem;
    align-items: start;
}

.panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.panel-header {
    padding: 1rem 1.1rem;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}
.panel-header h2 { margin: 0; font-size: 1rem; }
.panel-header p { margin: .2rem 0 0; color: var(--text-muted); font-size: .8rem; }

.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.data-table th {
    padding: .7rem .9rem;
    color: var(--text-secondary);
    background: var(--slate-50);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.data-table td {
    min-height: 50px;
    padding: .78rem .9rem;
    border-bottom: 1px solid var(--slate-100);
    vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.table-meta { margin-top: .15rem; color: var(--text-muted); font-size: .7rem; }

.status {
    padding: .24rem .55rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 600;
    white-space: nowrap;
}
.status::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-success { color: var(--success); background: var(--success-bg); }
.status-danger { color: var(--danger); background: var(--danger-bg); }

.empty-state { padding: 2rem 1rem; text-align: center; }
.empty-state-icon {
    width: 42px;
    height: 42px;
    margin: 0 auto .7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    background: var(--success-bg);
    border-radius: 12px;
    font-weight: 700;
}
.empty-state h3 { margin: 0 0 .35rem; font-size: .95rem; }
.empty-state p { margin: 0; color: var(--text-muted); font-size: .82rem; }

.next-slice {
    padding: .95rem 1.05rem;
    display: flex;
    gap: .75rem;
    border-bottom: 1px solid var(--slate-100);
}
.next-slice:last-child { border-bottom: 0; }
.next-slice.muted { opacity: .64; }
.step-number {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-700);
    background: var(--violet-100);
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 700;
}
.next-slice strong { font-size: .85rem; }
.next-slice p { margin: .24rem 0 0; color: var(--text-muted); font-size: .78rem; line-height: 1.4; }

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: none;
    background: rgba(15,23,42,.5);
}

/* ERRORS */
.error-body {
    min-height: 100vh;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.error-card {
    width: 100%;
    max-width: 560px;
    padding: 2rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}
.error-card img { width: 145px; margin-bottom: 1.5rem; }
.error-card h1 { margin: 0 0 .5rem; }
.error-card p { color: var(--text-muted); line-height: 1.5; }
.debug-box {
    margin: 1rem 0;
    padding: .9rem;
    display: grid;
    gap: .45rem;
    background: var(--danger-bg);
    border: 1px solid #FECACA;
    border-radius: 8px;
    overflow-wrap: anywhere;
}
.debug-box code { color: var(--danger); }
.debug-box small { color: var(--text-secondary); }

@media (max-width: 1000px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-brand-panel { display: none; }
    .auth-form-panel {
        padding: 2rem 1.2rem;
        background:
            radial-gradient(circle at 90% 0, var(--violet-100), transparent 34%),
            #fff;
    }
    .auth-mobile-logo { display: block; }

    .app-sidebar { transform: translateX(-100%); }
    .app-main { margin-left: 0; }
    .mobile-menu { display: block; }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .app-content { padding: 1.15rem; }
    .app-topbar { padding: 0 1rem; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .page-heading { flex-direction: column; }
    .page-heading-actions { width: 100%; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .auth-form-panel { align-items: flex-start; padding-top: 1.5rem; }
    .environment-badge { display: none; }
}


.tenant-sidebar-context {
    margin: .85rem .75rem 0;
    padding: .75rem;
    display: grid;
    gap: .15rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 9px;
}
.tenant-sidebar-context span {
    color: var(--slate-500);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.tenant-sidebar-context strong {
    color: #fff;
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* v0.2 Global Administration */
.alert-info {
    color: var(--info);
    background: var(--info-bg);
    border-color: #BFDBFE;
}

.breadcrumb {
    margin-bottom: .8rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    color: var(--text-muted);
    font-size: .78rem;
}
.breadcrumb a { font-weight: 500; }
.breadcrumb span { color: var(--slate-300); }
.breadcrumb strong { color: var(--text-secondary); font-weight: 600; }

.billing-stat .stat-value { font-size: 1.65rem; }

.table-action { text-align: right; }
.table-open {
    display: inline-flex;
    min-height: 32px;
    padding: .35rem .65rem;
    align-items: center;
    justify-content: center;
    color: var(--violet-600);
    background: var(--violet-100);
    border-radius: 7px;
    font-size: .75rem;
    font-weight: 600;
}
.table-open:hover { color: var(--violet-700); background: var(--violet-200); }

.status-neutral {
    color: var(--slate-600);
    background: var(--slate-100);
}

.tenant-heading {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tenant-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
}
.tenant-heading h1 {
    margin: 0;
    font-size: 1.75rem;
    letter-spacing: -.025em;
}
.tenant-heading p { margin: .3rem 0 0; color: var(--text-muted); }

.btn-danger-outline {
    color: var(--danger);
    background: #fff;
    border-color: #FCA5A5;
}
.btn-danger-outline:hover {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.tenant-summary-grid {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.tenant-card-value {
    margin-top: .38rem;
    font-size: 1.4rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.02em;
}

.tenant-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(300px, .7fr);
    gap: 1rem;
    align-items: start;
}
.mb-panel { margin-bottom: 1rem; }

.detail-list > div {
    min-height: 48px;
    padding: .72rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--slate-100);
}
.detail-list > div:last-child { border-bottom: 0; }
.detail-list span { color: var(--text-muted); font-size: .78rem; }
.detail-list strong { max-width: 65%; text-align: right; font-size: .8rem; overflow-wrap: anywhere; }
.detail-address { align-items: flex-start !important; }

.panel-body { padding: 1rem; }
.subdued { color: var(--text-muted); font-size: .82rem; }

.action-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}
.action-group form { margin: 0; }

.link-button {
    padding: 0;
    color: var(--violet-600);
    background: none;
    border: 0;
    cursor: pointer;
    font-size: .76rem;
    font-weight: 600;
}
.link-button:hover { color: var(--violet-700); text-decoration: underline; }
.link-danger { color: var(--danger); }
.link-danger:hover { color: #7F1D1D; }
.action-divider { color: var(--slate-300); }

.reset-link-box {
    margin-top: .75rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .6rem;
    align-items: center;
}
.reset-link-box span {
    color: var(--text-secondary);
    font-size: .78rem;
    font-weight: 600;
}
.reset-link-box input {
    min-width: 0;
    min-height: 40px;
    padding: .55rem .65rem;
    color: var(--slate-700);
    background: #fff;
    border: 1px solid #BFDBFE;
    border-radius: 7px;
    font-size: .76rem;
}

.next-slice-link { color: var(--text); }
.next-slice-link:hover { color: var(--text); background: var(--violet-100); }

@media (max-width: 1100px) {
    .tenant-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tenant-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 650px) {
    .tenant-heading { align-items: stretch; flex-direction: column; }
    .tenant-heading form .btn { width: 100%; }
    .tenant-summary-grid { grid-template-columns: 1fr; }
    .reset-link-box { grid-template-columns: 1fr; }
}


/* v0.2.1 admin polish */
.nav-svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-svg svg { width: 19px; height: 19px; }

.account-menu { position: relative; }

.account-menu-trigger {
    min-height: 42px;
    padding: .25rem .45rem .25rem .3rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}
.account-menu-trigger:hover { background: var(--slate-50); }
.account-menu-trigger > svg { width: 15px; height: 15px; color: var(--text-muted); }
.account-menu-name { font-size: .8rem; font-weight: 600; }

.account-dropdown {
    position: absolute;
    z-index: 60;
    top: calc(100% + .5rem);
    right: 0;
    width: 230px;
    display: none;
    padding: .4rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}
.account-menu.open .account-dropdown { display: block; }

.account-dropdown-user {
    padding: .65rem .7rem .75rem;
    border-bottom: 1px solid var(--slate-100);
}
.account-dropdown-user strong {
    display: block;
    font-size: .8rem;
}
.account-dropdown-user span {
    display: block;
    margin-top: .16rem;
    color: var(--text-muted);
    font-size: .72rem;
    overflow-wrap: anywhere;
}

.account-dropdown-item {
    width: 100%;
    min-height: 38px;
    margin-top: .25rem;
    padding: .55rem .65rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--slate-700);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 500;
    text-align: left;
}
.account-dropdown-item:hover {
    color: var(--violet-700);
    background: var(--violet-100);
}
.account-dropdown-item svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
}
.account-dropdown-button { font-family: inherit; }

.subscription-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.subscription-card {
    padding: 1.1rem;
    display: block;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.subscription-card:hover {
    color: var(--text);
    transform: translateY(-1px);
    border-color: var(--violet-200);
    box-shadow: var(--shadow-md);
}
.subscription-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.subscription-card h2 {
    margin: .25rem 0 0;
    font-size: 1.05rem;
}
.plan-code {
    color: var(--violet-600);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.subscription-card > p {
    min-height: 42px;
    margin: .8rem 0;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.45;
}
.subscription-price {
    margin-bottom: 1rem;
    font-size: 1.35rem;
    font-weight: 700;
}
.subscription-price span {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 500;
}
.subscription-meta-grid {
    padding-top: .85rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    border-top: 1px solid var(--slate-100);
}
.subscription-meta-grid div { display: grid; gap: .15rem; }
.subscription-meta-grid span { color: var(--text-muted); font-size: .67rem; }
.subscription-meta-grid strong { font-size: .8rem; }

.settings-form { max-width: 980px; }
.panel-form-body { padding: 1rem; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.form-grid-full { grid-column: 1 / -1; }

.field-group textarea,
.field-group select {
    width: 100%;
    padding: .68rem .78rem;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    outline: 0;
    font-size: 1rem;
}
.field-group select { min-height: 44px; }
.field-group textarea { resize: vertical; }
.field-group textarea:focus,
.field-group select:focus {
    border-color: var(--violet-500);
    box-shadow: 0 0 0 3px var(--violet-100);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
}

.account-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 90% 0, var(--violet-100), transparent 30%),
        var(--surface-subtle);
}
.account-topbar {
    min-height: 74px;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.account-logo img { width: 140px; max-height: 45px; object-fit: contain; }
.account-content {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 3rem 1.2rem;
}
.account-card {
    padding: 1.5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}

@media (max-width: 1000px) {
    .subscription-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
    .subscription-card-grid,
    .form-grid { grid-template-columns: 1fr; }
    .form-grid-full { grid-column: auto; }
    .account-menu-name { display: none; }
}


/* v0.2.3 tenant provisioning */
.topbar-add-tenant {
    min-height: 38px;
    padding: .5rem .72rem;
    gap: .38rem;
}
.topbar-add-tenant svg {
    width: 15px;
    height: 15px;
}

@media (max-width: 650px) {
    .topbar-add-tenant span { display: none; }
    .topbar-add-tenant {
        width: 38px;
        padding: .45rem;
    }
}


/* v0.2.6 permanent tenant deletion */
.btn-danger {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}
.btn-danger:hover {
    color: #fff;
    background: #8F1D15;
    border-color: #8F1D15;
}
.btn-danger:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.danger-zone {
    width: 100%;
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    color: #7F1D1D;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-left: 5px solid var(--danger);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.danger-zone:hover {
    background: #FEE2E2;
    border-color: #F87171;
    border-left-color: var(--danger);
    box-shadow: var(--shadow-md);
}
.danger-zone:focus-visible {
    outline: 3px solid rgba(180, 35, 24, .2);
    outline-offset: 2px;
}
.danger-zone-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--danger);
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 800;
}
.danger-zone-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: .15rem;
}
.danger-zone-copy > strong {
    color: #7F1D1D;
    font-size: .95rem;
}
.danger-zone-copy > span:last-child {
    color: #991B1B;
    font-size: .78rem;
    line-height: 1.45;
}
.danger-zone-eyebrow {
    display: block;
    color: var(--danger);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.danger-zone-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--danger);
    font-size: .76rem;
    font-weight: 700;
}
.danger-zone-action svg {
    width: 17px;
    height: 17px;
}

.nivoa-dialog {
    width: min(92vw, 560px);
    padding: 0;
    background: transparent;
    border: 0;
}
.nivoa-dialog::backdrop {
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.dialog-card {
    padding: 1.4rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
}
.dialog-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 800;
}
.danger-dialog-icon {
    color: var(--danger);
    background: #FEE2E2;
}
.dialog-heading {
    margin: .9rem 0 1rem;
}
.dialog-heading h2 {
    margin: 0;
    font-size: 1.2rem;
}
.dialog-heading p {
    margin: .5rem 0 0;
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.55;
}
.danger-notice {
    margin-bottom: 1rem;
    padding: .8rem .9rem;
    color: #7F1D1D;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: 9px;
    font-size: .78rem;
    line-height: 1.5;
}
.dialog-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
}

@media (max-width: 650px) {
    .danger-zone {
        align-items: flex-start;
    }
    .danger-zone-action {
        display: none;
    }
    .dialog-actions { flex-direction: column-reverse; }
    .dialog-actions .btn { width: 100%; }
}


.nivoa-dialog[open] {
    position: fixed;
    inset: 0;
    margin: auto;
    max-height: calc(100vh - 2rem);
    overflow: visible;
    z-index: 1001;
}
.nivoa-dialog.dialog-fallback-open {
    display: block;
}
body.dialog-fallback-active {
    overflow: hidden;
}
body.dialog-fallback-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, .55);
}


/* v0.2.9 platform knowledge base */
.kb-heading-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
}
.kb-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kb-section {
    margin-bottom: 1.5rem;
}
.kb-section-heading {
    margin-bottom: .75rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.kb-section-heading h2 {
    margin: 0;
    font-size: 1rem;
}
.kb-section-heading p {
    margin: .2rem 0 0;
    color: var(--text-muted);
    font-size: .8rem;
}
.kb-section-heading > a {
    color: var(--violet-700);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}
.kb-section-heading > a:hover { text-decoration: underline; }

.kb-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}
.kb-category-card {
    min-width: 0;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    color: inherit;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kb-category-card:hover {
    border-color: var(--violet-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.kb-category-icon,
.kb-form-note-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-700);
    background: var(--violet-100);
    border-radius: 10px;
}
.kb-category-icon svg,
.kb-form-note-icon svg {
    width: 21px;
    height: 21px;
}
.kb-category-main {
    min-width: 0;
    flex: 1;
}
.kb-category-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}
.kb-category-title-row > strong {
    min-width: 0;
    color: var(--text-primary);
    font-size: .9rem;
}
.kb-category-description {
    margin-top: .35rem;
    display: block;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.5;
}
.kb-category-meta {
    margin-top: .7rem;
    display: block;
    color: var(--text-secondary);
    font-size: .7rem;
    font-weight: 600;
}
.kb-form-note {
    margin: -.25rem 0 1.2rem;
    padding: .8rem .9rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    color: var(--text-secondary);
    background: var(--slate-50);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: .78rem;
}
.kb-form-note-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}
.kb-form-note-icon svg {
    width: 17px;
    height: 17px;
}
.kb-content-field {
    margin-bottom: 0;
}
.kb-content-field textarea {
    min-height: 360px;
    line-height: 1.6;
}

@media (max-width: 1000px) {
    .kb-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    .kb-heading-actions {
        width: 100%;
    }
    .kb-heading-actions .btn {
        flex: 1;
    }
    .kb-stats-grid,
    .kb-category-grid {
        grid-template-columns: 1fr;
    }
}


/* v0.2.10 rich knowledge-base editor */
.kb-editor-foot {
    margin-top: .55rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.kb-upload-status {
    min-height: 1.1rem;
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 600;
}
.kb-upload-status.is-working { color: var(--info); }
.kb-upload-status.is-success { color: var(--success); }
.kb-upload-status.is-error { color: var(--danger); }

.note-editor.note-frame {
    overflow: hidden;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.note-editor.note-frame:focus-within {
    border-color: var(--violet-500) !important;
    box-shadow: 0 0 0 3px var(--violet-100) !important;
}
.note-editor .note-toolbar {
    padding: .45rem !important;
    background: var(--slate-50) !important;
    border-bottom: 1px solid var(--border) !important;
}
.note-editor .note-btn {
    min-height: 30px;
    color: var(--text-secondary) !important;
    background: #fff !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
}
.note-editor .note-btn:hover,
.note-editor .note-btn.active {
    color: var(--violet-700) !important;
    background: var(--violet-100) !important;
    border-color: var(--violet-200) !important;
}
.note-editor .note-editable {
    padding: 1rem 1.1rem !important;
    color: var(--text-primary);
    background: #fff;
    font-family: Figtree, Arial, sans-serif;
    font-size: .88rem;
    line-height: 1.65;
}
.note-editor .note-editable h2,
.note-editor .note-editable h3,
.note-editor .note-editable h4 {
    margin: 1.35rem 0 .55rem;
    color: var(--text-primary);
    line-height: 1.25;
}
.note-editor .note-editable h2 { font-size: 1.35rem; }
.note-editor .note-editable h3 { font-size: 1.12rem; }
.note-editor .note-editable h4 { font-size: .98rem; }
.note-editor .note-editable p {
    margin: .5rem 0;
}
.note-editor .note-editable img {
    max-width: 100%;
    height: auto;
    margin: .75rem 0;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.note-editor .note-editable table {
    width: 100%;
    margin: .8rem 0;
    border-collapse: collapse;
}
.note-editor .note-editable th,
.note-editor .note-editable td {
    padding: .55rem .65rem;
    border: 1px solid var(--border);
    vertical-align: top;
}
.note-editor .note-editable th {
    background: var(--slate-50);
    font-weight: 600;
}
.note-editor .note-editable blockquote {
    margin: .8rem 0;
    padding: .7rem .9rem;
    color: var(--text-secondary);
    background: var(--violet-100);
    border-left: 3px solid var(--violet-500);
    border-radius: 0 8px 8px 0;
}
.note-editor .note-editable pre {
    overflow-x: auto;
    padding: .8rem;
    background: var(--slate-900);
    color: #fff;
    border-radius: 8px;
}
.note-editor .note-statusbar {
    background: var(--slate-50) !important;
    border-top: 1px solid var(--border) !important;
}
.note-modal .modal-content,
.note-popover .popover-content {
    font-family: Figtree, Arial, sans-serif;
}
.note-modal .modal-content {
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(15,23,42,.18);
}
.note-modal-backdrop {
    background: rgba(15,23,42,.5) !important;
}
.note-form-label {
    font-weight: 600;
}
.note-input {
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
}
.note-input:focus {
    border-color: var(--violet-500) !important;
    box-shadow: 0 0 0 3px var(--violet-100) !important;
}
.note-btn-primary {
    color: #fff !important;
    background: var(--violet-600) !important;
    border-color: var(--violet-600) !important;
}

.kb-article-content {
    color: var(--text-primary);
    font-size: .9rem;
    line-height: 1.7;
}
.kb-article-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.kb-article-content table {
    width: 100%;
    border-collapse: collapse;
}
.kb-article-content th,
.kb-article-content td {
    padding: .55rem .65rem;
    border: 1px solid var(--border);
}

@media (max-width: 700px) {
    .kb-editor-foot {
        flex-direction: column;
        gap: .35rem;
    }
}


/* v0.3.0 tenant foundation */
.topbar-help {
    min-height: 36px;
    gap: .4rem;
}
.topbar-help svg {
    width: 17px;
    height: 17px;
}

.account-card-wide {
    width: min(100%, 620px);
}
.profile-account-note {
    margin: .2rem 0 1rem;
    padding: .75rem .85rem;
    display: grid;
    gap: .2rem;
    color: var(--text-secondary);
    background: var(--slate-50);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: .76rem;
    line-height: 1.5;
}
.profile-account-note strong {
    color: var(--text-primary);
    font-size: .78rem;
}

.tenant-help-heading {
    margin-bottom: 1.2rem;
}
.tenant-help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.tenant-help-category {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.tenant-help-category-head {
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    background: var(--slate-50);
    border-bottom: 1px solid var(--border);
}
.tenant-help-category-head h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: .96rem;
}
.tenant-help-category-head p {
    margin: .25rem 0 0;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.5;
}
.tenant-help-links {
    display: grid;
}
.tenant-help-link {
    min-width: 0;
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    color: inherit;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: background .15s ease;
}
.tenant-help-link:last-child {
    border-bottom: 0;
}
.tenant-help-link:hover {
    background: var(--violet-100);
}
.tenant-help-link > span {
    min-width: 0;
    display: grid;
    gap: .17rem;
}
.tenant-help-link strong {
    color: var(--text-primary);
    font-size: .82rem;
}
.tenant-help-link small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: .72rem;
    line-height: 1.4;
    text-overflow: ellipsis;
}
.tenant-help-link svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: var(--violet-600);
}

.help-article-shell {
    width: min(100%, 900px);
    margin: 0 auto;
}
.help-article-card {
    margin-top: .8rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.help-article-header {
    padding: 1.5rem 1.6rem 1.25rem;
    background: linear-gradient(
        180deg,
        var(--violet-100) 0,
        #fff 100%
    );
    border-bottom: 1px solid var(--border);
}
.help-article-category {
    margin-bottom: .8rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--violet-700);
    font-size: .72rem;
    font-weight: 700;
}
.help-article-category .kb-category-icon {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
}
.help-article-category .kb-category-icon svg {
    width: 17px;
    height: 17px;
}
.help-article-header h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.18;
}
.help-article-header > p {
    max-width: 720px;
    margin: .6rem 0 0;
    color: var(--text-secondary);
    font-size: .88rem;
    line-height: 1.6;
}
.help-article-content {
    padding: 1.5rem 1.6rem 1.8rem;
}
.help-article-content > :first-child {
    margin-top: 0;
}
.help-article-content > :last-child {
    margin-bottom: 0;
}
.help-article-content h2,
.help-article-content h3,
.help-article-content h4,
.help-article-content h5 {
    margin: 1.45rem 0 .55rem;
    color: var(--text-primary);
    line-height: 1.25;
}
.help-article-content h2 { font-size: 1.35rem; }
.help-article-content h3 { font-size: 1.15rem; }
.help-article-content h4,
.help-article-content h5 { font-size: 1rem; }
.help-article-content p {
    margin: .65rem 0;
}
.help-article-content ul,
.help-article-content ol {
    padding-left: 1.5rem;
}
.help-article-content a {
    color: var(--violet-700);
}
.help-article-content blockquote {
    margin: 1rem 0;
    padding: .8rem 1rem;
    color: var(--text-secondary);
    background: var(--violet-100);
    border-left: 3px solid var(--violet-500);
    border-radius: 0 8px 8px 0;
}
.help-article-content pre {
    overflow-x: auto;
    padding: .9rem 1rem;
    color: #fff;
    background: var(--slate-900);
    border-radius: 8px;
}
.help-article-content img {
    display: block;
    margin: 1rem auto;
    box-shadow: var(--shadow-sm);
}
.help-article-back {
    margin-top: 1rem;
}

@media (max-width: 760px) {
    .topbar-help span {
        display: none;
    }
    .topbar-help {
        width: 36px;
        padding-left: 0;
        padding-right: 0;
        justify-content: center;
    }
    .tenant-help-grid {
        grid-template-columns: 1fr;
    }
    .help-article-header,
    .help-article-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* v0.3.1 tenant settings + subscription billing */
.settings-tabs {
    margin-bottom: 1.25rem;
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
}
.settings-tabs a {
    margin-bottom: -1px;
    padding: .7rem .8rem;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    font-size: .77rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.settings-tabs a:hover { color: var(--text-primary); }
.settings-tabs a.active {
    color: var(--violet-700);
    border-bottom-color: var(--violet-600);
}
.settings-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}
.settings-nav-card {
    min-width: 0;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    color: inherit;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.settings-nav-card:hover {
    border-color: var(--violet-200);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.settings-nav-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-700);
    background: var(--violet-100);
    border-radius: 10px;
}
.settings-nav-icon svg { width: 21px; height: 21px; }
.settings-nav-card > span:nth-child(2) {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: .2rem;
}
.settings-nav-card strong { color: var(--text-primary); font-size: .88rem; }
.settings-nav-card small { color: var(--text-muted); font-size: .73rem; line-height: 1.45; }
.settings-card-arrow { width: 18px; height: 18px; flex: 0 0 18px; color: var(--violet-500); }

.settings-callout {
    margin: 1rem 0;
    padding: .85rem 1rem;
    display: grid;
    gap: .25rem;
    color: var(--text-secondary);
    background: var(--violet-100);
    border: 1px solid var(--violet-200);
    border-radius: 10px;
    font-size: .77rem;
    line-height: 1.5;
}
.settings-callout strong { color: var(--violet-700); }
.settings-callout-warning {
    color: #92400E;
    background: #FFFBEB;
    border-color: #FDE68A;
}
.settings-callout-warning strong { color: #92400E; }

.subscription-current-card {
    margin-bottom: 1.1rem;
    padding: 1.15rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1.2rem;
    background: linear-gradient(135deg, var(--violet-100), #fff 58%);
    border: 1px solid var(--violet-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.subscription-kicker {
    color: var(--violet-700);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.subscription-current-card h2 { margin: .25rem 0 .15rem; font-size: 1.25rem; }
.subscription-current-card p { margin: 0; color: var(--text-muted); font-size: .76rem; }
.subscription-current-meta {
    margin-top: .7rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    color: var(--text-secondary);
    font-size: .7rem;
}
.subscription-usage { min-width: 145px; display: grid; gap: .25rem; }
.subscription-usage > span:first-child { color: var(--text-muted); font-size: .67rem; font-weight: 600; }
.subscription-usage > strong { font-size: 1rem; }
.subscription-usage-bar {
    height: 6px;
    overflow: hidden;
    background: var(--violet-200);
    border-radius: 99px;
}
.subscription-usage-bar > span {
    height: 100%;
    display: block;
    background: var(--violet-600);
    border-radius: inherit;
}
.subscription-plan-heading { margin: 1.25rem 0 .7rem; }
.subscription-plan-heading h2 { margin: 0; font-size: 1rem; }
.subscription-plan-heading p { margin: .2rem 0 0; color: var(--text-muted); font-size: .76rem; }
.subscription-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
}
.subscription-plan-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.subscription-plan-card.is-current {
    border-color: var(--violet-300);
    box-shadow: 0 0 0 2px var(--violet-100);
}
.subscription-plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.subscription-plan-card h3 { margin: 0; font-size: .96rem; }
.subscription-plan-card p { min-height: 2.2rem; margin: .3rem 0 0; color: var(--text-muted); font-size: .72rem; line-height: 1.45; }
.subscription-plan-limit {
    margin: .9rem 0;
    padding: .65rem 0;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: .75rem;
}
.subscription-price-options { display: grid; gap: .55rem; }
.subscription-price-row { display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
.subscription-price-row > div { display: flex; align-items: baseline; gap: .2rem; }
.subscription-price-row strong { color: var(--text-primary); font-size: 1.05rem; }
.subscription-price-row span { color: var(--text-muted); font-size: .68rem; }
.btn-small { min-height: 32px; padding: .38rem .65rem; font-size: .72rem; }
.subscription-plan-foot { margin-top: auto; padding-top: .8rem; color: var(--text-muted); font-size: .68rem; line-height: 1.4; }

@media (max-width: 980px) {
    .subscription-plan-grid { grid-template-columns: 1fr; }
    .subscription-current-card { grid-template-columns: 1fr auto; }
    .subscription-current-card form { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .settings-card-grid { grid-template-columns: 1fr; }
    .billing-provider-card, .billing-provider-copy { align-items: flex-start; }
    .billing-provider-card { flex-direction: column; }
    .subscription-current-card { grid-template-columns: 1fr; }
    .subscription-usage { width: 100%; }
}


/* v0.3.2 subscription activation / billing activity */
.billing-activity-panel {
    margin-top: 1rem;
}
.billing-activity-list {
    display: grid;
}
.billing-activity-row {
    padding: .7rem 1rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    border-top: 1px solid var(--border);
}
.billing-activity-row:first-child {
    border-top: 0;
}
.billing-activity-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: var(--violet-500);
    border-radius: 50%;
}
.billing-activity-row > div {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.billing-activity-row strong {
    color: var(--text-primary);
    font-size: .76rem;
}
.billing-activity-row span:last-child {
    color: var(--text-muted);
    font-size: .69rem;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .billing-activity-row > div {
        align-items: flex-start;
        flex-direction: column;
        gap: .15rem;
    }
}


/* v0.3.3 tenant user management */
.role-description-list {
    margin-top: .7rem;
    display: grid;
    gap: .45rem;
}
.role-description-list > div {
    padding: .65rem .75rem;
    display: grid;
    gap: .1rem;
    background: var(--slate-50);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.role-description-list strong {
    color: var(--text-primary);
    font-size: .75rem;
}
.role-description-list span {
    color: var(--text-muted);
    font-size: .7rem;
    line-height: 1.45;
}

.user-management-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr);
    gap: 1rem;
    align-items: start;
}
.user-detail-list {
    display: grid;
}
.user-detail-list > div {
    padding: .75rem 1rem;
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: .7rem;
    border-top: 1px solid var(--border);
}
.user-detail-list > div:first-child {
    border-top: 0;
}
.user-detail-list span,
.user-readonly-role span {
    color: var(--text-muted);
    font-size: .72rem;
}
.user-detail-list strong,
.user-readonly-role strong {
    color: var(--text-primary);
    font-size: .78rem;
    font-weight: 600;
}
.user-account-note {
    color: var(--text-muted);
    background: var(--slate-50);
    border-top: 1px solid var(--border);
    font-size: .72rem;
    line-height: 1.5;
}
.user-readonly-role {
    display: grid;
    gap: .15rem;
}
.user-actions-panel {
    margin-top: 1rem;
}
.user-action-list {
    display: grid;
}
.user-action-row {
    padding: .85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--border);
}
.user-action-row:first-child {
    border-top: 0;
}
.user-action-row > div {
    min-width: 0;
    display: grid;
    gap: .15rem;
}
.user-action-row strong {
    color: var(--text-primary);
    font-size: .78rem;
}
.user-action-row span {
    color: var(--text-muted);
    font-size: .71rem;
    line-height: 1.45;
}
.user-action-danger {
    background: #FFFBFB;
}
.btn-danger-outline {
    color: var(--danger);
    background: #fff;
    border: 1px solid #FCA5A5;
}
.btn-danger-outline:hover {
    color: #991B1B;
    background: #FEF2F2;
    border-color: #F87171;
}
.user-action-disabled-note {
    flex: 0 0 auto;
    color: var(--text-muted) !important;
    font-size: .69rem !important;
    font-weight: 600;
}

@media (max-width: 850px) {
    .user-management-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 620px) {
    .user-detail-list > div {
        grid-template-columns: 1fr;
        gap: .1rem;
    }
    .user-action-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* v0.4.0 integrated subscription and invoice UI */
.subscription-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}
.subscription-summary-grid > div {
    min-width: 0;
    padding: .85rem;
    display: grid;
    gap: .25rem;
    background: var(--violet-100);
    border: 1px solid var(--violet-200);
    border-radius: 10px;
}
.subscription-summary-grid span {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 600;
}
.subscription-summary-grid strong {
    color: var(--text-primary);
    font-size: .88rem;
    overflow-wrap: anywhere;
}
.subscription-plan-card.is-disabled {
    opacity: .7;
    background: var(--surface-muted, #f8f8fb);
    border-style: dashed;
}
.two-column-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
    gap: 1rem;
    align-items: start;
}
.empty-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.5;
}
@media (max-width: 980px) {
    .subscription-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .two-column-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .subscription-summary-grid { grid-template-columns: 1fr; }
}


/* v0.4.2 public self-service plans and registration */
.public-page { min-height: 100vh; background: #fff; }
.public-topbar {
    min-height: 74px;
    padding: 0 clamp(1.2rem, 5vw, 4rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,.96);
}
.public-logo img { width: 142px; max-height: 44px; object-fit: contain; }
.public-nav { display: flex; align-items: center; gap: 1rem; font-size: .875rem; font-weight: 600; }
.public-content { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 4.5rem 0 5rem; }
.public-footer { padding: 2rem; text-align: center; color: var(--text-muted); border-top: 1px solid var(--border); font-size: .8rem; }
.public-hero { max-width: 760px; margin: 0 auto 3rem; text-align: center; }
.public-eyebrow { display: inline-block; margin-bottom: .8rem; color: var(--violet-600); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.public-hero h1, .public-register-copy h1 { margin: 0 0 1rem; font-size: clamp(2.35rem, 5vw, 4rem); line-height: 1.02; letter-spacing: -.045em; }
.public-hero p, .public-register-copy > p { margin: 0; color: var(--text-secondary); font-size: 1.08rem; line-height: 1.65; }
.public-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.public-plan-card { padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.public-plan-card h2 { margin: .35rem 0 .7rem; font-size: 1.35rem; }
.public-plan-card p { margin: 0; color: var(--text-muted); line-height: 1.55; }
.public-plan-price strong { font-size: 2rem; letter-spacing: -.03em; }
.public-plan-price span { color: var(--text-muted); font-size: .8rem; }
.public-plan-limit { padding: .8rem 0; color: var(--text-secondary); border-top: 1px solid var(--slate-100); font-size: .85rem; }
.public-selfserve-note { margin: 4rem auto 0; padding: 2rem; max-width: 850px; text-align: center; background: var(--violet-100); border: 1px solid var(--violet-200); border-radius: 16px; }
.public-selfserve-note h2 { margin: 0 0 .6rem; }
.public-selfserve-note p { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.public-register-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.public-register-copy { position: sticky; top: 2rem; }
.public-back { display: inline-block; margin-bottom: 2.2rem; font-size: .85rem; font-weight: 600; }
.public-selected-plan { margin-top: 2rem; padding: 1.35rem; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 14px; }
.public-selected-plan h2 { margin: .35rem 0 .5rem; }
.public-selected-plan strong { display: block; margin-bottom: .45rem; font-size: 1.25rem; }
.public-selected-plan p { margin: 0; color: var(--text-muted); }
.public-register-card { padding: clamp(1.4rem, 4vw, 2rem); background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-md); }
.public-register-card .field-group { margin-bottom: 1rem; }
.public-name-grid { gap: .8rem; }
.public-check-row { margin: 1.2rem 0; display: flex; align-items: flex-start; gap: .7rem; color: var(--text-secondary); font-size: .85rem; line-height: 1.45; cursor: pointer; }
.public-check-row input { margin-top: .2rem; }
.public-signin-note { margin: 1rem 0 0; color: var(--text-muted); text-align: center; font-size: .82rem; }
.field-optional { color: var(--text-muted); font-size: .7rem; font-weight: 500; }
.auth-alt-action { margin-top: 1.25rem; padding-top: 1.1rem; display: flex; justify-content: center; gap: .4rem; color: var(--text-muted); border-top: 1px solid var(--border); font-size: .82rem; }
.danger-zone-panel { margin-top: 1.25rem; border-color: #FECACA; }

@media (max-width: 900px) {
    .public-plan-grid { grid-template-columns: 1fr; }
    .public-register-grid { grid-template-columns: 1fr; }
    .public-register-copy { position: static; }
}
@media (max-width: 600px) {
    .public-content { padding-top: 2.5rem; }
    .public-nav > a:first-child { display: none; }
}

/* v0.4.3 monthly / annual self-service billing */
.public-plan-actions {
    margin-top: auto;
    display: grid;
    gap: .7rem;
}
.public-plan-actions .public-plan-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}
.public-plan-actions .public-plan-price + .btn {
    margin-bottom: .35rem;
}

/* v0.5.0 catalogue lifecycle views */
.record-view-tabs {
    display: flex;
    gap: .5rem;
    margin: 0 0 1rem;
    flex-wrap: wrap;
}
.record-view-tabs a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem .8rem;
    border: 1px solid var(--border);
    border-radius: .65rem;
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--surface);
    font-weight: 600;
}
.record-view-tabs a span {
    display: inline-flex;
    min-width: 1.55rem;
    height: 1.55rem;
    padding: 0 .4rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface-subtle);
    font-size: .78rem;
}
.record-view-tabs a.active {
    border-color: var(--violet-500);
    color: var(--violet-500);
}
.inline-action-form { display: inline; margin: 0; }
.inline-action-form .table-open {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.table-delete { color: var(--danger, #b42318) !important; }
.input-with-suffix { display: flex; align-items: stretch; }
.input-with-suffix input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-with-suffix span {
    display: inline-flex;
    align-items: center;
    padding: 0 .8rem;
    border: 1px solid var(--border);
    border-left: 0;
    border-radius: 0 .55rem .55rem 0;
    color: var(--text-secondary);
    background: var(--surface-subtle);
    white-space: nowrap;
}
.choice-row {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    cursor: pointer;
}
.choice-row input { margin-top: .25rem; }
.choice-row span { display: grid; gap: .15rem; }
.choice-row small { color: var(--text-secondary); }

/* v0.5.0 Job Title competency requirement rules */
.page-button-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    flex-wrap: wrap;
}
.requirement-summary-grid {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.requirement-summary-grid .summary-card {
    padding: 1rem 1.1rem;
    display: grid;
    gap: .25rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.requirement-summary-grid .summary-card > span,
.requirement-summary-grid .summary-card > small {
    color: var(--text-muted);
    font-size: .78rem;
}
.requirement-summary-grid .summary-card > strong {
    font-size: 1.3rem;
    line-height: 1.2;
}
.requirement-wizard { display: grid; gap: 1rem; }
.requirement-step {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 1rem;
    padding: 1.15rem;
}
.requirement-step-number {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--violet-50, #f6eff4);
    color: var(--violet-600, #8d3f70);
    font-weight: 800;
}
.requirement-step-body { min-width: 0; }
.section-heading {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.section-heading h2 { margin: 0; font-size: 1.05rem; }
.section-heading p { margin: .25rem 0 0; color: var(--text-muted); }
.selected-job-title-card {
    padding: .9rem 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface-subtle, #f8fafc);
}
.selected-job-title-card > div { display: grid; gap: .2rem; }
.selected-job-title-card .eyebrow {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.selected-job-title-card p { margin: .15rem 0 0; color: var(--text-muted); }
.requirement-selection-list { display: grid; gap: .55rem; }
.requirement-group-label {
    margin-top: .6rem;
    padding-bottom: .25rem;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.requirement-option {
    padding: .85rem .9rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 1rem;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.requirement-option.selected {
    border-color: var(--violet-400, #b8709b);
    background: var(--violet-50, #fbf7fa);
}
.requirement-check {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    cursor: pointer;
}
.requirement-check input { margin-top: .25rem; }
.requirement-check span { display: grid; gap: .15rem; }
.requirement-check small { color: var(--text-muted); }
.requirement-evidence { display: grid; gap: .3rem; }
.requirement-evidence label { color: var(--text-muted); font-size: .75rem; font-weight: 700; }
.requirement-evidence select { width: 100%; }
.requirement-evidence select:disabled { opacity: .55; }
.requirement-history-panel { margin-top: 1rem; }
.compact-empty { padding: 1.25rem; }
@media (max-width: 900px) {
    .requirement-summary-grid { grid-template-columns: 1fr; }
    .requirement-option { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .page-button-actions { width: 100%; justify-content: flex-start; }
    .requirement-step { grid-template-columns: 1fr; }
    .requirement-step-number { margin-bottom: -.25rem; }
    .section-heading { flex-direction: column; }
}
.requirement-evidence select {
    min-height: 42px;
    padding: .62rem .75rem;
    border: 1px solid var(--border);
    border-radius: .55rem;
    background: #fff;
    color: var(--text-primary);
    font: inherit;
}
.requirement-evidence select:focus {
    outline: none;
    border-color: var(--violet-500);
    box-shadow: 0 0 0 3px rgba(156, 74, 120, .12);
}

/* v0.5.1 People */
.people-capacity-bar {
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface-subtle, #f8fafc);
}
.people-capacity-bar > div { display: flex; align-items: baseline; gap: .55rem; }
.people-capacity-bar span,
.people-capacity-bar p { color: var(--text-muted); }
.people-capacity-bar p { margin: 0; font-size: .78rem; }
.table-primary-link { color: inherit; text-decoration: none; }
.table-primary-link:hover { text-decoration: underline; }
.people-form-note {
    margin: -.15rem 0 1rem;
    padding: .8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: .7rem;
    background: var(--surface-subtle, #f8fafc);
}
.people-form-note span { color: var(--text-muted); font-size: .78rem; }
.people-profile-grid {
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(250px, .7fr);
    gap: 1rem;
}
.person-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.person-detail-list > div {
    min-height: 76px;
    padding: .9rem 1rem;
    display: grid;
    align-content: center;
    gap: .22rem;
    border-top: 1px solid var(--border);
}
.person-detail-list > div:nth-child(odd) { border-right: 1px solid var(--border); }
.person-detail-list span,
.person-notes span { color: var(--text-muted); font-size: .72rem; font-weight: 700; }
.person-notes { padding: 1rem; border-top: 1px solid var(--border); }
.person-notes p { margin: .35rem 0 0; line-height: 1.55; }
.people-requirement-summary { padding-bottom: 1rem; }
.person-requirement-number { padding: .25rem 1rem 0; font-size: 2.3rem; line-height: 1; font-weight: 800; }
.people-requirement-summary > p,
.people-requirement-summary > small { margin: .35rem 1rem 0; display: block; color: var(--text-muted); }
.evidence-pill {
    display: inline-flex;
    align-items: center;
    padding: .28rem .5rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    background: var(--surface-subtle, #f8fafc);
    border: 1px solid var(--border);
}
.evidence-pill.document { background: var(--violet-50, #fbf7fa); border-color: var(--violet-200, #ead4e1); }
.status-warning { background: #fff7ed; color: #9a3412; }
.danger-panel { border-color: rgba(185, 28, 28, .2); }
.muted { color: var(--text-muted); }
@media (max-width: 900px) {
    .people-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .people-capacity-bar,
    .people-form-note { align-items: flex-start; flex-direction: column; }
    .person-detail-list { grid-template-columns: 1fr; }
    .person-detail-list > div:nth-child(odd) { border-right: 0; }
}

/* Training Matrix */
.matrix-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.matrix-summary-grid .summary-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.matrix-summary-grid .summary-card span,
.matrix-summary-grid .summary-card small { color: var(--text-muted); }
.matrix-summary-grid .summary-card strong { font-size: 1.65rem; line-height: 1.1; }
.matrix-compliance-cell { min-width: 190px; }
.matrix-percent-line { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .45rem; }
.matrix-percent-line > strong { font-size: 1.05rem; }
.matrix-progress { height: 7px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.matrix-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.matrix-note { margin-top: 1rem; }
@media (max-width: 1050px) {
    .matrix-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .matrix-summary-grid { grid-template-columns: 1fr; }
}

/* v0.5.3 Person evidence */
.people-compliance-card { padding-bottom: 1rem; }
.person-compliance-value { padding: .2rem 1rem 0; font-size: 2.6rem; line-height: 1; font-weight: 800; }
.people-compliance-card > p,
.people-compliance-card > small { margin: .45rem 1rem 0; display: block; color: var(--text-muted); }
.compliance-progress { margin: .8rem 1rem .2rem; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-subtle, #f1f5f9); }
.compliance-progress span { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.btn-sm { padding: .42rem .68rem; font-size: .76rem; }
.evidence-document-link { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.evidence-context-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(240px, .7fr); gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 900px) { .evidence-context-grid { grid-template-columns: 1fr; } }

/* Cloudflare Turnstile */
.turnstile-wrap {
    margin: 1rem 0;
    min-height: 65px;
}
.turnstile-wrap .cf-turnstile {
    width: 100%;
}

/* v0.6.0 Compliance dashboard + Training Matrix v2 */
.compliance-stats { grid-template-columns: repeat(5, minmax(0,1fr)); }
.dashboard-snapshot-list { display:flex; flex-direction:column; }
.dashboard-snapshot-list a { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.1rem; border-bottom:1px solid var(--border); color:var(--text); text-decoration:none; }
.dashboard-snapshot-list a:hover { background:var(--surface-muted); }
.dashboard-snapshot-list span { color:var(--text-muted); }
.dashboard-snapshot-list strong { font-size:1.1rem; }
.panel-footer-actions { padding:1rem 1.1rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.matrix-filter-bar { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)) auto; gap:.8rem; align-items:end; padding:1rem; margin-bottom:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.matrix-filter-bar label { display:flex; flex-direction:column; gap:.35rem; }
.matrix-filter-bar label > span { font-size:.72rem; color:var(--text-muted); font-weight:700; }
.matrix-filter-bar select { min-height:40px; padding:.5rem .65rem; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); }
.matrix-filter-actions { display:flex; gap:.45rem; align-items:center; }
.matrix-grid-wrap { max-height:68vh; }
.training-grid { width:max-content; min-width:100%; }
.training-grid th, .training-grid td { text-align:center; }
.training-grid th:first-child, .training-grid td:first-child, .training-grid th:nth-child(2), .training-grid td:nth-child(2) { text-align:left; }
.matrix-sticky-person { position:sticky; left:0; z-index:2; background:#fff; min-width:190px; }
thead .matrix-sticky-person { z-index:4; background:var(--slate-50); }
.matrix-competency-heading { min-width:118px; max-width:155px; white-space:normal !important; }
.matrix-competency-heading span { display:block; }
.matrix-competency-heading small { display:block; margin-top:.2rem; color:var(--text-muted); font-weight:500; }
.matrix-status-cell { padding:.55rem !important; }
.matrix-cell { width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; text-decoration:none; border:1px solid transparent; }
.matrix-cell-compliant { background:#ecfdf5; color:#047857; border-color:#a7f3d0; }
.matrix-cell-at-risk { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.matrix-cell-expired, .matrix-cell-missing { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.matrix-cell-na { background:#f8fafc; color:#94a3b8; border-color:#e2e8f0; }
.matrix-legend { display:flex; flex-wrap:wrap; gap:1rem; align-items:center; margin-top:1rem; color:var(--text-muted); font-size:.78rem; }
.matrix-legend span { display:flex; align-items:center; gap:.4rem; }
.matrix-legend .matrix-cell { width:24px; height:24px; font-size:.72rem; }
@media(max-width:1200px){.compliance-stats{grid-template-columns:repeat(3,minmax(0,1fr));}.matrix-filter-bar{grid-template-columns:repeat(2,minmax(180px,1fr));}}
@media(max-width:700px){.compliance-stats{grid-template-columns:1fr 1fr}.matrix-filter-bar{grid-template-columns:1fr}.matrix-filter-actions{align-items:stretch}.matrix-filter-actions .btn{flex:1}}

/* v0.6.1 Beta usability polish */
.table-action { white-space: nowrap; }
.table-action-group { display:flex; align-items:center; justify-content:flex-end; gap:.45rem; }
.row-action-menu { position:relative; }
.row-action-menu > summary { list-style:none; cursor:pointer; user-select:none; display:inline-flex; align-items:center; gap:.35rem; }
.row-action-menu > summary::-webkit-details-marker { display:none; }
.row-action-menu[open] > summary { border-color:var(--primary); box-shadow:0 0 0 2px rgba(156,74,120,.08); }
.row-action-dropdown { position:absolute; right:0; top:calc(100% + .35rem); z-index:30; min-width:165px; padding:.35rem; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 14px 35px rgba(15,23,42,.14); }
.row-action-dropdown a,
.row-action-dropdown button { width:100%; display:block; padding:.55rem .7rem; border:0; border-radius:7px; background:transparent; color:var(--text); text-align:left; text-decoration:none; font:inherit; font-size:.8rem; cursor:pointer; }
.row-action-dropdown a:hover,
.row-action-dropdown button:hover { background:var(--surface-muted); }
.row-action-dropdown form { margin:0; }
.row-action-dropdown .danger { color:#b91c1c; }
.detail-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
.detail-summary-card { padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.3rem; }
.detail-summary-card > span,
.detail-summary-card > small { color:var(--text-muted); }
.detail-summary-card > strong { font-size:1.05rem; }
.filter-panel { display:flex; flex-wrap:wrap; gap:.8rem; align-items:end; padding:1rem; margin-bottom:1rem; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.filter-panel label { min-width:180px; flex:1; display:flex; flex-direction:column; gap:.35rem; }
.filter-panel label > span { font-size:.72rem; font-weight:700; color:var(--text-muted); }
.filter-panel input,.filter-panel select { min-height:40px; padding:.5rem .65rem; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); }
.filter-panel-actions { display:flex; gap:.45rem; align-items:center; }
.coverage-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.coverage-person-list { display:flex; flex-direction:column; }
.coverage-person-row { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(120px,.8fr) 90px auto; gap:1rem; align-items:center; padding:.85rem 1rem; border-top:1px solid var(--border); }
.coverage-person-row:first-child { border-top:0; }
.coverage-person-row .person-name { font-weight:700; color:var(--text); text-decoration:none; }
@media(max-width:900px){.detail-summary-grid,.coverage-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.coverage-person-row{grid-template-columns:1fr 1fr;}}
@media(max-width:650px){.detail-summary-grid,.coverage-grid{grid-template-columns:1fr}.table-action-group{justify-content:flex-start}.filter-panel{align-items:stretch}.filter-panel label{min-width:100%}.filter-panel-actions{width:100%}.filter-panel-actions .btn{flex:1}.coverage-person-row{grid-template-columns:1fr}}
.matrix-filter-bar { grid-template-columns:repeat(4,minmax(160px,1fr)) auto; }
.matrix-filter-bar input { min-height:40px; padding:.5rem .65rem; border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); }
@media(max-width:1300px){.matrix-filter-bar{grid-template-columns:repeat(2,minmax(180px,1fr));}}


/* v0.6.2 Evidence preview */
.evidence-preview-dialog {
    width: min(96vw, 1120px);
    max-width: 1120px;
}
.evidence-preview-card {
    max-height: 92vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.evidence-preview-header,
.evidence-preview-actions {
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
}
.evidence-preview-header {
    border-bottom: 1px solid var(--border);
}
.evidence-preview-header h2 {
    margin: .15rem 0 0;
    font-size: 1.08rem;
    overflow-wrap: anywhere;
}
.evidence-preview-meta {
    margin-top: .3rem;
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.45;
}
.evidence-preview-close {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    background: #fff;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}
.evidence-preview-close:hover { background: var(--slate-50); color: var(--slate-900); }
.evidence-preview-frame-wrap {
    min-height: 420px;
    flex: 1 1 auto;
    background: var(--slate-100);
}
.evidence-preview-frame {
    width: 100%;
    height: min(68vh, 720px);
    min-height: 420px;
    display: block;
    border: 0;
    background: #fff;
}
.evidence-preview-actions {
    border-top: 1px solid var(--border);
}
.evidence-preview-actions .muted { font-size: .76rem; }

@media (max-width: 700px) {
    .evidence-preview-dialog { width: 98vw; }
    .evidence-preview-header,
    .evidence-preview-actions { align-items: flex-start; }
    .evidence-preview-actions { flex-direction: column; }
    .evidence-preview-actions .page-button-actions,
    .evidence-preview-actions .btn { width: 100%; }
    .evidence-preview-frame-wrap,
    .evidence-preview-frame { min-height: 55vh; height: 55vh; }
}

/* v0.6.4 Person requirement/evidence polish */
.person-requirements-wrap {
    padding: .35rem .55rem .55rem;
    background: var(--slate-50);
}
.person-requirements-table {
    border-collapse: separate;
    border-spacing: 0 .7rem;
}
.person-requirements-table thead th {
    background: transparent;
    border-bottom: 0;
    padding-top: .35rem;
    padding-bottom: .15rem;
}
.person-requirements-table tbody td {
    background: #fff;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.person-requirements-table tbody td:first-child {
    border-left: 1px solid var(--border);
    border-radius: .7rem 0 0 .7rem;
}
.person-requirements-table tbody td:last-child {
    border-right: 1px solid var(--border);
    border-radius: 0 .7rem .7rem 0;
}
.evidence-current-file-card {
    margin-bottom: 1rem;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: .75rem;
    background: var(--surface-subtle, #f8fafc);
}
.evidence-current-file-card > div:first-child {
    min-width: 0;
    display: grid;
    gap: .2rem;
}
.evidence-current-file-card strong {
    overflow-wrap: anywhere;
}
.evidence-current-file-card small {
    color: var(--text-muted);
}
@media (max-width: 720px) {
    .person-requirements-table { border-spacing: 0 .55rem; }
    .evidence-current-file-card { align-items: flex-start; flex-direction: column; }
}

/* v0.6.5 — CSV onboarding/imports */
.csv-import-columns { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.csv-column-chips { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.55rem; }
.csv-column-chips span { display:inline-flex; align-items:center; min-height:28px; padding:.25rem .55rem; border:1px solid var(--border); border-radius:999px; background:var(--surface-muted); color:var(--text-muted); font-size:.78rem; font-weight:600; }
.csv-file-field { max-width:560px; }
.csv-preview-wrap { max-height:520px; overflow:auto; }
.csv-preview-table { min-width:980px; }
.csv-preview-table th:first-child, .csv-preview-table td:first-child { position:sticky; left:0; background:var(--surface); z-index:2; }
.csv-row-error td { background:rgba(185, 28, 28, .035); }
.csv-error-list { margin:0; padding-left:1rem; color:#b91c1c; font-size:.78rem; line-height:1.45; min-width:220px; }
.csv-import-confirm { display:flex; justify-content:space-between; gap:1rem; align-items:center; border-top:1px solid var(--border); }
.csv-import-confirm p { margin:.2rem 0 0; }

.onboarding-heading { margin-bottom:1.25rem; }
.onboarding-progress-panel { padding:1.25rem 1.4rem; }
.onboarding-progress-copy { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:.8rem; }
.onboarding-progress-copy > div { display:flex; align-items:baseline; gap:.75rem; }
.onboarding-progress-copy strong { font-size:2rem; line-height:1; }
.onboarding-progress-copy p { margin:0; color:var(--text-muted); }
.onboarding-progress-track { height:10px; border-radius:999px; background:var(--surface-muted); overflow:hidden; }
.onboarding-progress-track span { display:block; height:100%; border-radius:inherit; background:var(--primary); transition:width .2s ease; }
.onboarding-step-list { display:grid; gap:.85rem; margin-bottom:1rem; }
.onboarding-step { display:flex; align-items:flex-start; gap:1rem; padding:1.1rem 1.25rem; }
.onboarding-step-number { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--surface-muted); border:1px solid var(--border); color:var(--text-muted); font-weight:800; }
.onboarding-step.complete .onboarding-step-number { background:rgba(22, 163, 74, .1); border-color:rgba(22, 163, 74, .25); color:#15803d; }
.onboarding-step.progress .onboarding-step-number { background:rgba(217, 119, 6, .1); border-color:rgba(217, 119, 6, .25); color:#b45309; }
.onboarding-step-main { flex:1; min-width:0; }
.onboarding-step-title { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.onboarding-step-title h2 { margin:0 0 .25rem; font-size:1rem; }
.onboarding-step-title p { margin:0; color:var(--text-muted); max-width:850px; }
.onboarding-step-footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--border); }
.onboarding-help-panel { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.25rem 1.4rem; }
.onboarding-help-panel h2 { margin:.2rem 0 .3rem; font-size:1.05rem; }
.onboarding-help-panel p { margin:0; color:var(--text-muted); }

@media (max-width: 760px) {
    .csv-import-confirm, .onboarding-progress-copy, .onboarding-step-title, .onboarding-step-footer, .onboarding-help-panel { align-items:flex-start; flex-direction:column; }
    .onboarding-step { padding:1rem; }
}

/* v0.6.6.1 — first-run UI polish */
.dashboard-setup-panel { margin-bottom: 1.5rem; }
.catalogue-heading-actions { flex: 0 0 auto; flex-wrap: nowrap; }
.catalogue-heading-actions .btn { white-space: nowrap; }
.matrix-content-section { margin-top: 0; }
.matrix-content-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .8rem;
}
.matrix-content-heading h2 { margin: 0; font-size: 1rem; }
.matrix-content-heading p { margin: .2rem 0 0; color: var(--text-muted); font-size: .8rem; }
.matrix-content-section > .table-wrap {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.matrix-content-section > .empty-state {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
@media (max-width: 650px) {
    .catalogue-heading-actions { width: 100%; flex-wrap: wrap; }
}


/* v0.7.0 Workforce Enrolment */
.feature-setting-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.15rem 0;border-bottom:1px solid var(--border-color,#e5e7eb)}
.feature-setting-row:last-child{border-bottom:0}.feature-setting-row p{margin:.3rem 0;color:var(--muted,#64748b);max-width:680px}.feature-toggle{display:flex;align-items:center;gap:.65rem;font-weight:700;white-space:nowrap}.feature-toggle input{width:1.2rem;height:1.2rem}
.settings-branding-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:1.25rem;align-items:start}.branding-preview-panel{position:sticky;top:1rem}.branding-preview{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff}.branding-preview-header{min-height:82px;display:flex;align-items:center;padding:1.2rem 1.4rem}.branding-preview-header img{max-height:48px;max-width:190px}.branding-preview-body{padding:1.5rem}.branding-preview-body h3{margin:.35rem 0 .6rem}.branding-preview-body p{color:#64748b;line-height:1.55}.input-suffix{display:flex;align-items:stretch}.input-suffix input{border-radius:8px 0 0 8px}.input-suffix span{display:flex;align-items:center;padding:0 .8rem;border:1px solid #cbd5e1;border-left:0;border-radius:0 8px 8px 0;background:#f8fafc;color:#64748b}
.person-enrolment-heading{margin-top:.45rem}.workforce-enrolment-card form{display:inline-flex}.enrolment-status-summary{display:flex;gap:2rem;flex-wrap:wrap;padding:0 1.25rem 1.25rem}.enrolment-status-summary>div{min-width:145px}.enrolment-status-summary span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:#64748b}.enrolment-status-summary strong{display:block;margin-top:.2rem}.enrolment-status-summary p{margin:0;color:#64748b}
.enrolment-page{margin:0;background:#f5f7fb;color:#0f172a;font-family:Inter,Figtree,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.enrolment-topbar{min-height:82px;background:var(--enrol-brand);color:var(--enrol-brand-text);display:flex;align-items:center;padding:0 max(24px,calc((100vw - 920px)/2));box-shadow:0 1px 0 rgba(15,23,42,.08)}.enrolment-topbar img{max-width:210px;max-height:54px}.enrolment-topbar strong{font-size:1.35rem}.enrolment-shell{max-width:920px;margin:0 auto;padding:40px 24px 56px}.enrolment-footer{max-width:920px;margin:0 auto;padding:24px;display:flex;justify-content:space-between;gap:1rem;color:#64748b;font-size:.86rem;border-top:1px solid #e2e8f0}.enrolment-footer a{color:var(--enrol-brand)}.enrolment-welcome,.enrolment-form-page,.enrolment-completed{background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:30px;box-shadow:0 10px 30px rgba(15,23,42,.05)}.enrolment-welcome h1,.enrolment-form-page h1,.enrolment-completed h1{margin:.35rem 0 .75rem;font-size:2rem}.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--enrol-brand)}.enrolment-role{display:inline-flex;flex-direction:column;margin-top:1rem;padding:.8rem 1rem;background:#f8fafc;border-radius:10px}.enrolment-role span{font-size:.75rem;color:#64748b}.enrolment-progress-card{margin:20px 0;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:18px 22px}.enrolment-progress-card>div:first-child{display:flex;gap:.55rem;align-items:baseline;margin-bottom:.75rem}.enrolment-progress-card strong{font-size:1.35rem}.enrolment-progress-card span{color:#64748b}.enrolment-requirements{margin-top:28px}.enrolment-requirement{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:20px 22px;margin-bottom:12px}.enrolment-requirement.done{border-color:#bbf7d0;background:#fbfffc}.enrolment-requirement h3{margin:.55rem 0 .25rem}.enrolment-requirement p{margin:0;color:#64748b}.enrolment-check{display:flex;width:38px;height:38px;border-radius:50%;align-items:center;justify-content:center;background:#dcfce7;color:#15803d;font-weight:900;font-size:1.25rem}.enrolment-complete-form{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;margin-top:24px}.enrolment-form-page{max-width:720px;margin:0 auto}.enrolment-form-page form{margin-top:1.4rem}.confirmation-check{display:flex;gap:.7rem;align-items:flex-start;padding:1rem;background:#f8fafc;border-radius:10px;margin:1rem 0}.success-mark{display:flex;width:58px;height:58px;border-radius:50%;align-items:center;justify-content:center;background:#dcfce7;color:#15803d;font-weight:900;font-size:1.7rem;margin-bottom:1rem}.back-link{display:inline-block;margin-bottom:1rem;color:var(--enrol-brand);font-weight:700}.enrolment-page .btn-primary{background:var(--enrol-brand);border-color:var(--enrol-brand);color:var(--enrol-brand-text)}
@media(max-width:760px){.settings-branding-grid{grid-template-columns:1fr}.branding-preview-panel{position:static}.enrolment-shell{padding:24px 16px}.enrolment-topbar{padding:0 18px}.enrolment-requirement{align-items:flex-start;flex-direction:column}.enrolment-footer{flex-direction:column}.enrolment-status-summary{gap:1rem}}
.status-info{background:#e0f2fe;color:#075985;border-color:#bae6fd}