* {
    box-sizing: border-box;
}

:root {
    --bg: #f4f7f6;
    --panel: #ffffff;
    --panel-soft: #eef5f2;
    --ink: #172126;
    --muted: #65727b;
    --line: #d7e1df;
    --teal: #0d766f;
    --teal-dark: #0b514d;
    --green: #247a4a;
    --amber: #a05d00;
    --rose: #a32d4d;
    --violet: #5c4d9b;
    --shadow: 0 14px 32px rgba(23, 33, 38, 0.08);
}

html {
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

body {
    background: var(--bg);
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

.portal-page {
    min-height: 100vh;
}

.auth-page,
.landing-page {
    align-items: center;
    display: grid;
    min-height: 100vh;
    padding: 32px;
}

.landing-frame {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    margin: 0 auto;
    max-width: 1180px;
    width: 100%;
}

.auth-card,
.landing-panel,
.panel,
.metric,
.queue-row {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.landing-panel {
    min-height: 500px;
    overflow: hidden;
    padding: 40px;
    position: relative;
}

.landing-panel.compact {
    align-self: stretch;
    display: grid;
    gap: 16px;
}

.brand-row {
    align-items: center;
    display: flex;
    gap: 12px;
}

.brand-mark {
    display: block;
    height: 42px;
    object-fit: contain;
    width: 42px;
}

.brand-word {
    font-size: 15px;
    font-weight: 800;
}

.eyebrow {
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 800;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.landing-title {
    font-size: 52px;
    line-height: 1.02;
    margin: 80px 0 20px;
    max-width: 680px;
}

.landing-copy {
    color: var(--muted);
    font-size: 18px;
    margin: 0;
    max-width: 660px;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.btn {
    align-items: center;
    background: var(--teal);
    border: 1px solid var(--teal);
    border-radius: 8px;
    color: #ffffff;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    min-height: 42px;
    padding: 10px 16px;
}

.btn.secondary {
    background: #ffffff;
    color: var(--ink);
}

.app-shell {
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    background: #122124;
    color: #eaf3f0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px;
}

.sidebar .brand-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 20px;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
}

.nav-link {
    border-radius: 8px;
    color: #bed0cc;
    display: block;
    font-size: 14px;
    font-weight: 750;
    padding: 10px 12px;
}

.nav-link.active,
.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.sidebar-footer {
    color: #9fb1ad;
    font-size: 12px;
    margin-top: auto;
}

.app-main {
    min-width: 0;
    padding: 24px;
}

.topbar {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 24px;
}

.topbar h1 {
    font-size: 26px;
    margin: 0;
}

.topbar p {
    color: var(--muted);
    margin: 2px 0 0;
}

.user-actions {
    align-items: center;
    display: flex;
    gap: 12px;
}

.tenant-pill {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 800;
    padding: 8px 10px;
}

.dashboard-grid {
    display: grid;
    gap: 16px;
}

.metrics-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric {
    box-shadow: none;
    min-height: 116px;
    padding: 16px;
}

.metric-label {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    margin: 0;
}

.metric-value {
    font-size: 34px;
    font-weight: 850;
    margin: 8px 0 4px;
}

.metric-note {
    color: var(--muted);
    font-size: 12px;
}

.work-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.65fr);
}

.panel {
    box-shadow: none;
    min-width: 0;
    padding: 18px;
}

.panel-header {
    align-items: start;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.panel-title {
    font-size: 17px;
    margin: 0;
}

.panel-subtitle {
    color: var(--muted);
    font-size: 13px;
    margin: 2px 0 0;
}

.status-dot {
    border-radius: 999px;
    display: inline-block;
    height: 8px;
    margin-right: 8px;
    width: 8px;
}

.status-dot.green {
    background: var(--green);
}

.status-dot.amber {
    background: var(--amber);
}

.status-dot.rose {
    background: var(--rose);
}

.status-dot.violet {
    background: var(--violet);
}

.table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.table th,
.table td {
    border-bottom: 1px solid var(--line);
    overflow-wrap: anywhere;
    padding: 11px 8px;
    text-align: left;
    vertical-align: top;
    word-break: break-word;
}

.table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.strong {
    font-weight: 800;
}

.muted {
    color: var(--muted);
}

.badge {
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding: 6px 8px;
    white-space: nowrap;
}

.badge.green {
    background: #e8f5ec;
    color: var(--green);
}

.badge.amber {
    background: #fff4df;
    color: var(--amber);
}

.badge.rose {
    background: #faeaf0;
    color: var(--rose);
}

.badge.violet {
    background: #efedfb;
    color: var(--violet);
}

.queue-list {
    display: grid;
    gap: 10px;
}

.queue-row {
    box-shadow: none;
    display: grid;
    gap: 6px;
    padding: 12px;
}

.split-row {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.observations-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.observation-tile {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 86px;
    padding: 12px;
}

.observation-value {
    font-size: 23px;
    font-weight: 850;
    margin-top: 4px;
}

.auth-card {
    margin: 0 auto;
    max-width: 430px;
    padding: 28px;
    width: 100%;
}

.form-grid {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}

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

.field input {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

.checkbox-row {
    align-items: center;
    display: flex;
    gap: 8px;
}

.error-box {
    background: #faeaf0;
    border: 1px solid #e8b8c8;
    border-radius: 8px;
    color: #7f1d3a;
    padding: 10px 12px;
}

.mobile-bar {
    display: none;
}

@media (max-width: 980px) {
    .landing-frame,
    .app-shell,
    .work-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: none;
    }

    .mobile-bar {
        align-items: center;
        background: #122124;
        color: #ffffff;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        padding: 14px 18px;
    }

    .metrics-grid,
    .observations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-title {
        font-size: 40px;
        margin-top: 52px;
    }
}

@media (max-width: 620px) {
    .auth-page,
    .landing-page,
    .app-main {
        padding: 16px;
    }

    .landing-panel {
        min-height: auto;
        padding: 24px;
    }

    .metrics-grid,
    .observations-grid {
        grid-template-columns: 1fr;
    }

    .topbar,
    .panel-header,
    .split-row,
    .user-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .table {
        font-size: 14px;
    }

    .table th,
    .table td {
        padding-left: 5px;
        padding-right: 5px;
    }
}


.hero-twin {
    align-items: center;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.42fr);
    margin-bottom: 16px;
}

.hero-twin-title {
    font-size: 34px;
    line-height: 1.08;
    margin: 0 0 10px;
}

.twin-stat-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mini-stat {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
}

.mini-stat span {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
}

.mini-stat strong {
    display: block;
    font-size: 28px;
    margin-top: 4px;
}

.twin-card-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.twin-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 12px;
    min-height: 360px;
    padding: 18px;
}

.twin-card h2 {
    font-size: 20px;
    margin: 0;
}

.twin-figure {
    align-items: center;
    background: radial-gradient(circle at 50% 20%, #ffffff, #e8f5f2 70%);
    border: 1px solid var(--line);
    border-radius: 18px;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    min-height: 150px;
    padding: 18px;
}

.twin-node {
    border-radius: 999px;
    display: block;
    height: 24px;
    width: 24px;
}

.twin-node.optimal,
.body-region.optimal { border-color: rgba(36, 122, 74, .45); }
.twin-node.optimal { background: var(--green); }
.twin-node.caution { background: var(--amber); }
.twin-node.critical { background: var(--rose); }
.twin-node.baseline { background: var(--violet); }

.twin-detail-grid {
    align-items: start;
}

.twin-stage-panel {
    overflow: hidden;
}

.body-map-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.body-region {
    background: #ffffff;
    border: 1px solid var(--line);
    border-left-width: 5px;
    border-radius: 8px;
    display: grid;
    gap: 6px;
    padding: 12px;
}

.body-region.caution { border-left-color: var(--amber); }
.body-region.critical { border-left-color: var(--rose); }
.body-region.optimal { border-left-color: var(--green); }
.body-region p { margin: 0; }

.metric-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.metric-chip {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 11px;
    padding: 4px 7px;
}

.field select {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 44px;
    padding: 10px 12px;
    width: 100%;
}

.success-box {
    background: #e8f5ec;
    border: 1px solid #aed9bd;
    border-radius: 8px;
    color: var(--green);
    font-weight: 800;
    margin-bottom: 16px;
    padding: 12px 14px;
}

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

@media (max-width: 760px) {
    .hero-twin,
    .twin-card-grid,
    .body-map-grid,
    .twin-stat-grid {
        grid-template-columns: 1fr;
    }
}

/* Visual digital twin integration */
.visual-command-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .32fr);
}

.visual-command-grid.single {
    grid-template-columns: 1fr;
}

.visual-stage-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow);
    min-width: 0;
    overflow: hidden;
}

.visual-stage-card.compact-visual {
    margin-bottom: 16px;
    padding: 0;
}

.visual-stage-toolbar {
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #edf6f3 100%);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 18px;
}

.visual-stage-toolbar h2 {
    font-size: 22px;
    margin: 0 0 4px;
}

.visual-stage-toolbar p {
    color: var(--muted);
    margin: 0;
    max-width: 820px;
}

.visual-twin-frame {
    background: #ffffff;
    border: 0;
    display: block;
    height: 780px;
    width: 100%;
}

.visual-twin-frame.compact,
.visual-twin-frame.library-compact {
    height: 560px;
}

.json-state {
    background: #0f1f22;
    border-radius: 8px;
    color: #dff4ef;
    font-size: 12px;
    max-height: 360px;
    overflow: auto;
    padding: 14px;
    white-space: pre-wrap;
}

@media (max-width: 1120px) {
    .visual-command-grid {
        grid-template-columns: 1fr;
    }

    .visual-twin-frame {
        height: 680px;
    }
}

@media (max-width: 760px) {
    .visual-stage-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .visual-twin-frame,
    .visual-twin-frame.compact,
    .visual-twin-frame.library-compact {
        height: 620px;
    }
}

.launch-form-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.launch-form-grid .field.full { grid-column: 1 / -1; }
.field textarea, .field select { background:#fff; border:1px solid var(--line); border-radius:8px; min-height:44px; padding:10px 12px; width:100%; }
.field textarea { min-height:110px; resize:vertical; }
.flash-success { background:#e8f5ec; border:1px solid #afd9bd; border-radius:8px; color:var(--green); font-weight:800; margin-bottom:16px; padding:12px 14px; }
.flash-error { background:#faeaf0; border:1px solid #e8b8c8; border-radius:8px; color:#7f1d3a; margin-bottom:16px; padding:12px 14px; }
.workflow-actions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.report-block { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px; }
.visual-data-strip { display:grid; gap:10px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 12px 0 16px; }
.visual-data-strip .observation-tile { min-height: 72px; }
@media (max-width: 760px) { .launch-form-grid, .visual-data-strip { grid-template-columns:1fr; } }
.notice{border:1px solid var(--line);border-radius:8px;margin:0 0 16px;padding:12px 14px}.notice.success{background:#eefaf4;color:#17643b}.notice.warning{background:#fff7e6;color:#8a5200}.notice.danger{background:#fff0f3;color:#9f2444}.mt-16{margin-top:16px}.padded{padding:18px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.compact-cols{align-items:start}.cards-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.mini-card{border:1px solid var(--line);border-radius:8px;display:grid;gap:6px;padding:14px}.mini-card span,.muted{color:var(--muted)}.form-grid{display:grid;gap:12px}.form-grid label{display:grid;gap:6px;font-size:13px;font-weight:750}.form-grid input,.form-grid select,.form-grid textarea{background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:10px 12px;width:100%}.span-all{grid-column:1/-1}.metric-value{font-size:36px;font-weight:900;line-height:1}.metric-value.small{font-size:18px}.badge{border-radius:999px;display:inline-flex;font-size:12px;font-weight:800;padding:5px 9px}.badge.good{background:#e8f7ee;color:#17643b}.muted-badge{background:#eef2f2;color:#65727b}.data-table,.table{border-collapse:collapse;width:100%}.data-table th,.data-table td,.table th,.table td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}.data-table th,.table th{color:var(--muted);font-size:12px;text-transform:uppercase}.queue-row.compact{align-items:center;display:flex;justify-content:space-between;margin:8px 0;padding:10px}.usage-list{display:grid;gap:12px;margin-top:16px}.usage-row{display:grid;gap:6px}.progress{background:#e8eeee;border-radius:99px;height:8px;overflow:hidden}.progress span{background:var(--teal);display:block;height:100%}.price{font-size:28px;font-weight:900;margin:10px 0}.plan-card ul{color:var(--muted);padding-left:18px}.code-block{background:#122124;border-radius:8px;color:#eaf3f0;overflow:auto;padding:16px}.link-danger{background:none;border:0;color:var(--rose);cursor:pointer;font-weight:800;padding:0}.checklist{display:grid;gap:8px}.native-twin-panel{background:linear-gradient(135deg,#102326,#1a3638);border-radius:12px;color:white;display:grid;gap:14px;grid-template-columns:1.1fr .9fr;margin:16px 0;padding:20px}.native-twin-body{align-items:center;display:flex;justify-content:center;min-height:260px}.native-twin-orb{background:radial-gradient(circle at 35% 35%,#f5fffb,#48bda7 35%,#0d766f 70%,#053d3a);border-radius:999px;box-shadow:0 0 60px rgba(72,189,167,.55);height:210px;position:relative;width:210px}.native-twin-orb:before,.native-twin-orb:after{border:1px solid rgba(255,255,255,.5);border-radius:999px;content:"";inset:24px;position:absolute}.native-twin-orb:after{inset:56px}.native-twin-stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:12px}.chart-bars{display:grid;gap:10px}.chart-bar{display:grid;gap:4px}.chart-bar span{background:#e8eeee;border-radius:99px;display:block;height:9px;overflow:hidden}.chart-bar span i{background:var(--teal);display:block;height:100%}@media(max-width:980px){.two-col,.three-col,.cards-grid,.native-twin-panel{grid-template-columns:1fr}.metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.app-shell{grid-template-columns:1fr}.sidebar{display:none}}


/* Production pilot stabilisation */
.pt-auth-card{max-width:560px;margin:8vh auto;padding:36px;border-radius:28px;background:#fff;box-shadow:0 20px 70px rgba(15,23,42,.12)}
.pt-auth-card h1{margin:0 0 12px;font-size:32px}.pt-eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:#2563eb;font-weight:800}.pt-form-grid{display:grid;gap:14px}.pt-form-grid label{display:grid;gap:6px;font-weight:700}.pt-form-grid input,.pt-form-grid textarea,.pt-form-grid select{border:1px solid #dbe3ef;border-radius:14px;padding:12px}.pt-alert{padding:12px 14px;border-radius:14px;margin:12px 0}.pt-alert-danger{background:#fef2f2;color:#991b1b}.pt-alert-success{background:#ecfdf5;color:#065f46}.pt-button{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;background:#0f172a;color:#fff;text-decoration:none;border:0;font-weight:800}.pt-button-secondary{background:#e2e8f0;color:#0f172a}.pt-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.pt-chart-card{border:1px solid #e2e8f0;border-radius:18px;padding:16px;background:#fff}.pt-chart-card h3{margin:0 0 12px}.pt-bar-row{display:grid;grid-template-columns:100px 1fr 42px;gap:10px;align-items:center;margin:9px 0;font-size:13px}.pt-bar{height:10px;background:#e2e8f0;border-radius:99px;overflow:hidden}.pt-bar i{display:block;height:100%;background:linear-gradient(90deg,#2563eb,#06b6d4);border-radius:99px}.pt-print-actions{display:flex;gap:10px;justify-content:flex-end;margin:16px 0}@media print{.sidebar,.topbar,.pt-print-actions,.user-actions{display:none!important}.main-content{margin:0!important}.panel{box-shadow:none!important;border:1px solid #ddd!important}}

/* Faithful Patient Twins native model restoration */
.native-model-launch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(16, 185, 129, .18);
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 20% 20%, rgba(16, 185, 129, .16), transparent 35%),
        linear-gradient(135deg, rgba(15, 23, 42, .92), rgba(2, 6, 23, .96));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 24px 80px rgba(0,0,0,.26);
}
.native-model-launch-copy { max-width: 760px; }
.native-model-launch-copy h2 { margin: .25rem 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.native-model-launch-copy p { color: #aab7c4; margin: 0; }
@media (max-width: 760px) {
    .native-model-launch { flex-direction: column; align-items: flex-start; }
}