:root {
    --ink:#0c1028;
    --muted:#626b7b;
    --subscription-active:#006bca;
    --subscription-canceled:#fd6e26;
    --primary:#006bcb;
    --line:#dbe4ef;
    --surface:#fff;
    --bg:#f5f8fc}
* {
    box-sizing:border-box}
body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:Inter,"Segoe UI",Arial,sans-serif;
    font-size:14px}
a {
    color:#006bcb;
    text-decoration:none}
a:hover {
    text-decoration:underline}
button,.button {
    font:inherit;
    font-weight:600;
    border:1px solid #cad6e5;
    border-radius:6px;
    background:white;
    color:var(--ink);
    padding:9px 15px;
    cursor:pointer;
    display:inline-block;
    text-align:center;
    white-space:nowrap}
button:hover,.button:hover {
    background:#e1edf9;
    text-decoration:none}
button:disabled {
    opacity:.5;
    cursor:default}
.primary {
    background:var(--primary);
    border-color:var(--primary);
    color:white}
.primary:hover {
    background:#0056a3;
    color:white}
.danger {
    color:#a32d36;
    border-color:#e5b7bd;
    background:#fff7f7}
.text-button {
    border:0;
    background:transparent;
    color:var(--primary)}
input,select {
    font:inherit;
    border:1px solid #cad6e5;
    border-radius:5px;
    background:white;
    color:var(--ink);
    min-height:39px;
    padding:8px 10px;
    width:100%}
input:focus,select:focus,button:focus-visible,a:focus-visible {
    outline:3px solid #81b1ea;
    outline-offset:2px}
input[type=checkbox] {
    width:17px;
    min-height:17px;
    height:17px;
    accent-color:var(--primary)}
label {
    display:flex;
    flex-direction:column;
    gap:7px;
    font-size:12px;
    font-weight:600;
    color:#515e72}
h1 {
    font-size:29px;
    letter-spacing:-.6px;
    margin:4px 0 9px;
    font-weight:650}
h2 {
    font-size:18px;
    margin:0 0 14px}
h3 {
    font-size:16px}
p {
    line-height:1.6;
    margin:0 0 16px}
.muted,.hint {
    color:var(--muted)}
.hint {
    font-size:12px;
    margin:10px 0 20px}
.eyebrow,.nav-label {
    font-size:10px;
    letter-spacing:1.7px;
    font-weight:700;
    color:#626b7b}
.portal-shell {
    min-height:100vh;
    display:flex}
.sidebar {
    width:226px;
    flex-shrink:0;
    position:fixed;
    inset:0 auto 0 0;
    background:#0c1028;
    color:white;
    display:flex;
    flex-direction:column;
    padding:32px 18px}
.brand {
    font-size:34px;
    letter-spacing:-1.5px;
    font-weight:650;
    color:inherit;
    display:block;
    line-height:1.1}
.brand:hover {
    text-decoration:none}
.brand span {
    display:block;
    font-size:9px;
    letter-spacing:2px;
    margin-top:9px;
    font-weight:500}
.sidebar .brand {
    padding:0 14px 42px}
.nav-label {
    padding:0 14px 12px;
    color:#a8c5e8}
nav {
    display:flex;
    flex-direction:column;
    gap:5px}
nav a {
    color:#e1edf9;
    padding:12px 14px;
    border-radius:6px;
    font-size:14px}
nav a:hover {
    background:#16274b;
    text-decoration:none}
nav a.active {
    background:#006bcb;
    color:white;
    font-weight:600;
    box-shadow:inset 3px 0 #81b1ea}
.portal-content {
    margin-left:226px;
    min-width:0;
    flex:1}
.topbar {
    height:70px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 36px;
    font-size:12px;
    color:var(--muted)}
.topbar>span {
    font-weight:600;
    letter-spacing:.3px}
.topbar>div {
    display:flex;
    align-items:center;
    gap:20px}
.page-content {
    max-width:1640px;
    margin:auto;
    padding:35px 36px 60px}
.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:22px}
.page-heading p {
    color:var(--muted);
    margin:0}
.panel {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:9px;
    margin-bottom:24px;
    overflow:hidden}
.filter-bar {
    display:flex;
    gap:14px;
    align-items:flex-end;
    padding:22px;
    border-bottom:1px solid var(--line);
    flex-wrap:wrap}
.filter-note {
    color:var(--muted);
    font-size:11px;
    align-self:center;
    margin-left:auto}
.grow {
    flex:1;
    min-width:210px}
.direct-lookup {
    display:flex;
    align-items:flex-end;
    gap:12px;
    padding:15px 22px;
    background:#f8faff;
    border-bottom:1px solid var(--line)}
.direct-lookup label {
    flex-direction:row;
    align-items:center;
    font-weight:400;
    gap:14px}
.direct-lookup input {
    max-width:200px}
.table-scroll {
    overflow:auto}
table {
    width:100%;
    border-collapse:collapse;
    text-align:left}
th {
    font-size:10px;
    color:#596b83;
    text-transform:uppercase;
    letter-spacing:1px;
    background:#f8faff;
    padding:15px 20px;
    font-weight:700;
    white-space:nowrap}
td {
    padding:17px 20px;
    border-top:1px solid #e8edf4;
    font-size:13px;
    vertical-align:middle}
td small {
    display:block;
    color:#626b7b;
    font-size:11px;
    margin-top:5px}
tbody tr:hover {
    background:#f8faff}
.mono {
    font-family:ui-monospace,Consolas,monospace;
    font-size:12px;
    overflow-wrap:anywhere}
.check {
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:500}
.pagination-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding:16px 20px;
    color:var(--muted);
    font-size:11px}
.pagination-bar>div {
    display:flex;
    gap:8px}
.pagination-bar button {
    font-size:12px;
    padding:6px 12px}
.empty {
    padding:44px;
    text-align:center;
    color:var(--muted)}
.empty p {
    margin-bottom:0}
.notice {
    padding:13px 18px;
    margin:16px;
    border-radius:6px;
    line-height:1.6}
.error {
    color:#913945;
    background:#fff0f1;
    border:1px solid #eed3d8}
.success {
    color:#196246;
    background:#edf8f0;
    border:1px solid #cbe6d4}
.loading-line {
    font-size:12px;
    color:var(--primary);
    padding:15px 20px;
    background:#eef5fc}
.status {
    font-size:11px;
    border-radius:30px;
    padding:5px 10px;
    display:inline-block;
    white-space:nowrap;
    font-weight:600}
.status-success {
    background:#e5f4e9;
    color:#267040}
.subscription-status-dot {
    display:inline-block;
    width:9px;
    height:9px;
    margin-right:6px;
    border-radius:50%;
    vertical-align:middle;
    background:#7b8492}
.subscription-status-active {
    background:var(--subscription-active)}
.subscription-status-canceled {
    background:var(--subscription-canceled)}
.subscription-status-badge {
    display:inline-block;
    padding:5px 10px;
    border-radius:30px;
    font-size:11px;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap}
.subscription-status-badge-active {
    background:#e8f3ff;
    color:#00539e}
.subscription-status-badge-canceled {
    background:#fff0e7;
    color:#9a390b}
.status-active {
    background:#e7effd;
    color:#3667a3}
.status-danger {
    background:#fae8eb;
    color:#a34452}
.referral-cancellation {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:7px;
    color:var(--muted);
    font-size:11px}
.status-neutral {
    background:#edf1f7;
    color:#596b83}
.actions {
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap}
.detail-grid {
    padding:25px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:25px}
.detail-grid p {
    margin:8px 0 0;
    overflow-wrap:anywhere}
.detail-grid .detail-status {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px}
.detail-grid .commission-balance {
    display:flex;
    align-items:center;
    gap:8px}
.commission-refresh-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    color:var(--primary)}
.span-all {
    grid-column:1/-1}
.tabs {
    display:flex;
    border-bottom:1px solid var(--line);
    gap:8px;
    padding:8px 18px 0}
.tabs button {
    border:0;
    border-radius:0;
    border-bottom:3px solid transparent;
    padding:14px 8px;
    background:transparent;
    font-size:12px}
.tabs button.selected {
    color:var(--primary);
    border-bottom-color:var(--primary)}
.back-link {
    display:inline-block;
    font-size:12px;
    margin-bottom:22px}
.form-panel {
    padding:27px;
    max-width:670px}
.form-panel label {
    margin-bottom:15px}
.form-panel h2 {
    margin-top:23px}
.form-panel h2:first-child {
    margin-top:0}
.form-panel .actions {
    margin-top:25px}
.self-label {
    font-size:10px;
    margin-left:9px;
    background:#e1edf9;
    padding:4px 6px;
    border-radius:4px}
.run-panel {
    border:1px solid #cadcf0;
    border-radius:8px;
    background:#eef5fc;
    padding:18px 22px;
    margin-bottom:22px}
.run-panel summary {
    font-weight:600;
    cursor:pointer}
.run-panel p {
    font-size:12px;
    color:var(--muted);
    margin-top:15px}
.run-panel form>.primary {
    margin-top:20px}
.json-section summary {
    padding:18px 24px;
    cursor:pointer;
    font-weight:600}
.json-section pre {
    margin:0;
    padding:20px 24px;
    background:#f8faff;
    font-size:12px;
    max-height:380px;
    overflow:auto;
    white-space:pre-wrap;
    overflow-wrap:anywhere}
.metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:25px}
.metrics strong {
    font-size:27px;
    display:block;
    color:var(--primary);
    font-weight:600}
.metrics span {
    font-size:11px;
    color:var(--muted)}
.full-width {
    max-width:none}
.login-shell {
    min-height:100vh;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#e1edf9,#f8faff)}
.login-card {
    width:420px;
    max-width:calc(100vw - 40px);
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    padding:38px;
    box-shadow:0 15px 55px #0c102810}
.login-card .brand {
    color:var(--primary);
    margin-bottom:40px}
.login-card h1 {
    font-size:25px}
.login-card form label {
    margin:22px 0}
.login-card .notice {
    margin:16px 0}
.wide {
    width:100%}
.initial-loading {
    padding:80px;
    text-align:center}
.loading-progress {
    display:block;
    width:80px;
    height:80px;
    margin:20vh auto 0}
.loading-progress circle {
    fill:none;
    stroke:var(--primary);
    stroke-width:4px;
    stroke-dasharray:100,200}
.loading-progress-text {
    text-align:center;
    margin-top:20px}
.loading-progress-text:after {
    content:"Opening Visera…"}
#blazor-error-ui {
    display:none;
    background:#fff0f1;
    color:#913945;
    position:fixed;
    bottom:0;
    width:100%;
    padding:15px;
    z-index:1000}
#blazor-error-ui .dismiss {
    cursor:pointer;
    float:right}
h1:focus {
    outline:none}
@media(max-width:1000px) {
    .sidebar {
    width:180px;
    padding:26px 10px}
.portal-content {
    margin-left:180px}
.page-content {
    padding:25px 20px}
.topbar {
    padding:0 20px}
.detail-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))}
.metrics {
    grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px) {
    .portal-shell {
    display:block}
.sidebar {
    position:static;
    width:auto;
    padding:18px}
.sidebar .brand {
    padding:0 0 20px;
    font-size:27px}
.nav-label {
    display:none}
nav {
    flex-direction:row;
    flex-wrap:wrap;
    gap:4px}
nav a {
    font-size:12px;
    padding:8px}
.portal-content {
    margin:0}
.topbar {
    height:55px}
.topbar>span {
    display:none}
.topbar>div {
    width:100%;
    justify-content:space-between}
.page-content {
    padding:24px 14px}
.page-heading {
    align-items:flex-start}
.page-heading h1 {
    font-size:24px}
.filter-bar {
    padding:15px}
.filter-bar label {
    flex:1;
    min-width:125px}
.filter-note {
    margin:0}
.detail-grid {
    grid-template-columns:1fr}
.direct-lookup label {
    flex-direction:column;
    align-items:flex-start}
.actions {
    gap:8px}
.tabs {
    flex-wrap:wrap}
.login-card {
    padding:28px}
}

.sync-freshness {
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
    margin:0 0 15px;
    font-size:12px;
    color:var(--muted)}

/* Official Visera artwork is kept on white to preserve its brand colors. */
.brand img { display:block; width:100%; max-width:210px; height:auto; }
.sidebar .brand { background:white; padding:16px 14px; border-radius:6px; margin-bottom:30px; color:var(--ink); }
.login-card .brand { max-width:240px; }