:root {
    --ink: #1d3035;
    --ink-soft: #52676c;
    --paper: #f3f6f3;
    --panel: #fffefa;
    --line: #dce5df;
    --teal: #176b63;
    --teal-deep: #10544e;
    --teal-pale: #e6f2ed;
    --copper: #b66b42;
    --gold-pale: #f5eee2;
    --danger: #a7473f;
    --danger-pale: #fbefec;
    --muted: #78888a;
    --shadow: 0 18px 46px rgba(25, 54, 53, .07);
    --font-body: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
    --font-display: 'Trebuchet MS', 'Segoe UI', sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
}
::selection { color: #fff; background: var(--teal); }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }
button, input, select, textarea { font: inherit; }
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }
.text-soft { color: var(--ink-soft) !important; }
.text-muted-custom { color: var(--muted) !important; }

.app-shell { min-height: 100vh; }
.sidebar {
    width: 254px;
    min-height: 100vh;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    padding: 25px 17px 20px;
    display: flex;
    flex-direction: column;
    color: #e7f1ed;
    background: #193b3b;
}
.brand-lockup { display:flex; align-items:center; gap:12px; padding: 0 8px 28px; }
.brand-mark {
    width: 36px; height: 36px; display:grid; place-items:center;
    border: 1px solid rgba(230,245,237,.32); border-radius: 10px;
    color:#f4d5ae; font-family:var(--font-display); font-weight:800; font-size:18px;
}
.brand-name { font: 800 16px/1.1 var(--font-display); letter-spacing:-.04em; }
.brand-caption { margin-top:4px; color:#a8c3bb; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.nav-section { padding: 10px 10px 7px; color:#8daaa2; font:600 10px var(--font-mono); letter-spacing:.13em; text-transform:uppercase; }
.side-nav { display:flex; flex-direction:column; gap:4px; }
.side-link {
    display:flex; align-items:center; gap:12px; min-height:42px; padding: 9px 11px;
    border:1px solid transparent; border-radius:8px; color:#c5d8d2; text-decoration:none;
    transition:background .16s ease, color .16s ease, transform .16s ease;
}
.side-link:hover { color:#fff; background:rgba(255,255,255,.08); transform:translateX(2px); }
.side-link.active { color:#fff; background:#285251; border-color:rgba(234,212,178,.16); }
.nav-glyph { width:17px; height:17px; display:inline-grid; place-items:center; color:#a9c8bd; font:500 12px var(--font-mono); }
.sidebar-bottom { margin-top:auto; padding:17px 9px 0; border-top:1px solid rgba(222,240,232,.14); }
.account-mini { color:#d7e7e0; font-weight:600; font-size:13px; overflow-wrap:anywhere; }
.account-role { color:#91b0a7; font-size:11px; margin-top:3px; }
.workspace { min-height:100vh; margin-left:254px; padding:0 38px 48px; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); margin-bottom:31px; }
.crumb { color:var(--muted); font-size:12px; letter-spacing:.01em; }
.topbar-tag { color:var(--teal); font:500 11px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px; }
.page-heading h1 { margin:0; font:800 clamp(25px,3vw,34px)/1.12 var(--font-display); letter-spacing:-.055em; }
.eyebrow { margin-bottom:8px; color:var(--copper); font:600 10px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.page-intro { margin:9px 0 0; color:var(--ink-soft); max-width:670px; }
.panel { min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 10px rgba(25,54,53,.025); }
.panel-head { padding:18px 20px 14px; border-bottom:1px solid #e8eeea; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-title { margin:0; font:700 15px var(--font-display); letter-spacing:-.02em; }
.panel-body { padding:20px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:20px; }
.metric { padding:18px 19px; border-radius:10px; border:1px solid var(--line); background:var(--panel); }
.metric-label { color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.metric-value { margin-top:8px; font:800 29px/1 var(--font-display); letter-spacing:-.055em; }
.metric-note { margin-top:8px; color:var(--ink-soft); font-size:12px; }
.metric-accent { border-top:3px solid var(--teal); }
.metric-warm { border-top:3px solid #c38b59; }
.future-banner { padding:17px 19px; border:1px solid #e5d7c2; border-radius:10px; background:#f8f2e8; display:flex; gap:14px; align-items:flex-start; color:#5b4d3e; }
.future-index { color:var(--copper); font:600 11px var(--font-mono); white-space:nowrap; }
.future-banner strong { display:block; margin-bottom:3px; color:#3f3b31; font-family:var(--font-display); }
.table { --bs-table-bg:transparent; --bs-table-color:var(--ink); margin:0; }
.table thead th { padding:11px 13px; border-bottom:1px solid var(--line); color:#687b7d; font:600 10px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.table tbody td { padding:13px; border-bottom:1px solid #edf1ed; vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background:#f8faf7; }
.table-wrap { min-width:0; max-width:100%; overflow-x:auto; }
.form-control, .form-select {
    min-height:43px; border-color:#ccd8d2; border-radius:7px; color:var(--ink); background-color:#fffefa;
}
.form-control:focus, .form-select:focus { border-color:#5c9c8b; box-shadow:0 0 0 .2rem rgba(23,107,99,.12); }
textarea.form-control { min-height:96px; }
.form-label { margin-bottom:6px; color:#41595d; font-size:12px; font-weight:700; }
.form-text { color:var(--muted); font-size:11px; }
.btn { border-radius:7px; min-height:40px; padding:9px 15px; font-size:13px; font-weight:700; transition:transform .16s ease, background .16s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { --bs-btn-bg:var(--teal); --bs-btn-border-color:var(--teal); --bs-btn-hover-bg:var(--teal-deep); --bs-btn-hover-border-color:var(--teal-deep); --bs-btn-active-bg:var(--teal-deep); }
.btn-outline-secondary { --bs-btn-color:#51666a; --bs-btn-border-color:#cbd7d1; --bs-btn-hover-bg:#eaf0ec; --bs-btn-hover-color:var(--ink); --bs-btn-hover-border-color:#aebdb5; }
.btn-outline-danger { --bs-btn-color:var(--danger); --bs-btn-border-color:#d8aaa3; --bs-btn-hover-bg:var(--danger-pale); --bs-btn-hover-color:var(--danger); --bs-btn-hover-border-color:#c68880; }
.btn-sm { min-height:33px; padding:6px 10px; font-size:11px; }
.badge-status { display:inline-flex; align-items:center; gap:6px; border-radius:99px; padding:5px 9px; font-size:10px; font-weight:700; letter-spacing:.03em; }
.badge-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-active { color:#1d6c51; background:#e5f3eb; }
.status-suspended, .status-inactive { color:#9c4a40; background:#f8eae6; }
.status-invited, .status-pending { color:#90642e; background:#f6efdf; }
.alert { border-radius:9px; border-width:1px; font-size:13px; }
.alert-success { color:#205e4b; background:#e9f4ed; border-color:#cae1d2; }
.alert-danger { color:#8e4038; background:#fbefec; border-color:#edcfca; }
.alert-warning { color:#745728; background:#f7f0e1; border-color:#e8d7b8; }
.alert-info { color:#315f61; background:#eaf3f0; border-color:#ccdfd8; }
.mono-box { padding:12px 14px; border-radius:7px; border:1px solid #d9e1dc; background:#f5f7f4; font:500 12px/1.6 var(--font-mono); overflow-wrap:anywhere; }
.section-label { margin:0 0 15px; font:700 13px var(--font-display); }
.filter-row { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.filter-row .filter-grow { flex:1 1 190px; }
.filter-row .filter-date { flex:0 1 155px; }
.small-caps { color:var(--muted); font:500 10px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.empty-state { padding:38px 20px; text-align:center; color:var(--ink-soft); }
.empty-icon { width:42px; height:42px; margin:0 auto 12px; display:grid; place-items:center; border:1px solid #d9e4dc; border-radius:12px; color:var(--teal); background:#eef5f0; font:600 15px var(--font-mono); }
.auth-page { min-height:100vh; display:grid; grid-template-columns:minmax(310px, .85fr) minmax(400px, 1.15fr); background:#eaf0eb; }
.auth-aside { padding:52px clamp(28px,6vw,86px); background:#193b3b; color:#e6f0eb; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.auth-aside::after { content:""; position:absolute; width:420px; height:420px; right:-220px; bottom:-190px; border:1px solid rgba(229,211,175,.25); border-radius:50%; box-shadow:0 0 0 30px rgba(229,211,175,.035),0 0 0 70px rgba(229,211,175,.025); }
.auth-aside .brand-lockup { padding:0; }
.auth-message { position:relative; z-index:1; max-width:430px; margin:70px 0; }
.auth-message h1 { font:800 clamp(36px,5vw,59px)/1.06 var(--font-display); letter-spacing:-.065em; margin:0 0 18px; }
.auth-message p { max-width:370px; color:#b5cbc2; font-size:15px; }
.auth-foot { color:#9db6ac; font:500 10px var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.auth-main { display:grid; place-items:center; padding:34px 24px; }
.auth-card { width:min(100%,450px); padding:clamp(25px,4vw,42px); border:1px solid #dbe4dc; border-radius:14px; background:var(--panel); box-shadow:var(--shadow); }
.auth-kicker { color:var(--copper); font:600 10px var(--font-mono); letter-spacing:.14em; text-transform:uppercase; }
.auth-card h2 { margin:9px 0 7px; font:800 27px var(--font-display); letter-spacing:-.05em; }
.auth-card .subcopy { margin:0 0 24px; color:var(--ink-soft); font-size:13px; }
.auth-logo-mobile { display:none; }
.qr-placeholder { min-height:120px; display:grid; place-items:center; padding:15px; border:1px dashed #b6c9bf; border-radius:9px; background:#f5f8f4; text-align:center; color:var(--ink-soft); font-size:12px; }
.pagination { margin:0; }
.page-link { color:var(--teal); border-color:#dce5df; }
.page-item.active .page-link { background:var(--teal); border-color:var(--teal); }
.action-card { padding:18px; border:1px solid var(--line); border-radius:10px; background:#fcfdf9; }
.action-card + .action-card { margin-top:12px; }
.inline-form { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.inline-form .form-group { flex:1 1 150px; }
.checkbox-note { display:flex; align-items:flex-start; gap:9px; color:var(--ink-soft); font-size:12px; }
.checkbox-note input { margin-top:4px; accent-color:var(--teal); }
.content-stack { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; gap:18px; }
.content-stack > * { min-width:0; }
.table-link { color:var(--ink); font-weight:700; text-decoration:none; }
.table-link:hover { color:var(--teal); text-decoration:underline; }
.pagination-wrap { padding:14px 18px; border-top:1px solid #e8eeea; }

@media (max-width: 1050px) {
    .workspace { padding-left:25px; padding-right:25px; }
    .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    .sidebar { width:100%; min-height:0; height:auto; position:relative; padding:13px 14px 10px; }
    .brand-lockup { padding:0 4px 11px; }
    .side-nav { flex-direction:row; overflow-x:auto; padding-bottom:3px; }
    .nav-section { display:none; }
    .side-link { flex:0 0 auto; min-height:36px; padding:7px 9px; font-size:11px; }
    .nav-glyph { display:none; }
    .sidebar-bottom { display:none; }
    .workspace { margin-left:0; padding:0 16px 32px; }
    .topbar { min-height:55px; margin-bottom:23px; }
    .page-heading { align-items:flex-start; flex-direction:column; }
    .metric-grid { gap:9px; }
    .metric { padding:14px; }
    .metric-value { font-size:25px; }
    .panel-body { padding:15px; }
    .panel-head { padding:15px; }
    .auth-page { grid-template-columns:1fr; }
    .auth-aside { display:none; }
    .auth-main { min-height:100vh; padding:20px 15px; align-content:center; }
    .auth-card { padding:27px 22px; }
    .auth-logo-mobile { display:flex; margin-bottom:22px; }
    .table thead th, .table tbody td { padding:10px 11px; }
}
@media (max-width: 420px) {
    .metric-grid { grid-template-columns:1fr 1fr; }
    .metric-label { font-size:9px; }
    .metric-value { font-size:22px; }
    .future-banner { padding:14px; }
    .filter-row > * { flex:1 1 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}