:root {
    --bg: #f2f0eb;
    --surface: #ffffff;
    --surface-2: #f9f8f6;
    --border: #e3dfd8;
    --border-mid: #ccc7bf;
    --text: #1c1917;
    --text-mid: #6b6560;
    --text-faint: #a09b94;
    --blue: #1d4ed8;
    --blue-hover: #1e40af;
    --blue-tint: #eff6ff;
    --green: #16a34a;
    --green-tint: #f0fdf4;
    --green-border: #bbf7d0;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .04);
    --radius: 10px;
    --radius-sm: 6px;
    --font: 'Figtree', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
    height: 56px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.topbar-left { display: flex; align-items: center; gap: 10px; }

/* Header row navigation branding  */

.brand { font-size: 17px; font-weight: 700; }

.brand em { font-style: normal; color: var(--blue); }

.brand-breadcrumb {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    max-width: 52vw;
    white-space: nowrap;
    overflow: hidden;
}
.brand-breadcrumb .brand-root {
    flex: 0 0 auto;
    color: var(--text);
    font-weight: 700;
}
.brand-breadcrumb .brand-separator {
    color: var(--text-mid);
    line-height: 1;
    flex: 0 0 auto;
}
    .brand-breadcrumb .brand-node {
        color: var(--text-mid);
        overflow: hidden;
        text-overflow: ellipsis;
    }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-actions form { margin: 0; }

.component-menu { position: relative; }
.component-menu-toggle {
    list-style: none;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.component-menu-toggle i { font-size: 14px; }
.component-menu-toggle::-webkit-details-marker { display: none; }
.component-menu[open] .component-menu-toggle,
.component-menu-toggle:hover {
    border-color: var(--text-faint);
    color: var(--text);
    background: var(--surface-2);
}
.component-menu-panel {
    position: absolute;
    left: 0;
    top: 40px;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 6px;
}
.component-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    font-size: 13px;
}
.component-menu-link i { width: 14px; text-align: center; color: var(--text-mid); }
.component-menu-link:hover {
    background: var(--surface-2);
    text-decoration: none;
}

.user-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-mid);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
}

.page-shell { max-width: 1320px; margin: 0 auto; padding: 28px 32px 80px; }
.access-denied-card { max-width: 760px; margin: 0 auto; }
.access-denied-body p + p { margin-top: 12px; }
.access-denied-path {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--text-mid);
}
.access-denied-path span,
.access-denied-note {
    color: var(--text-mid);
}
.access-denied-note {
    margin-top: 4px;
}
.access-denied-diagnostics {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.access-denied-diagnostics summary {
    list-style: none;
    cursor: pointer;
}
.access-denied-diagnostics summary::-webkit-details-marker {
    display: none;
}
.access-denied-diagnostics-head {
    color: #e1004a;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
}
.access-denied-diagnostics-summary {
    color: #e1004a;
    font-size: 13px;
    font-weight: 700;
}
.access-denied-diagnostics[open] .access-denied-diagnostics-summary {
    margin-bottom: 10px;
}
.access-denied-diagnostics-content {
    margin-top: 10px;
}
.access-denied-diagnostics-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 8px;
    color: var(--text-mid);
}
.access-denied-diagnostics-row span {
    min-width: 150px;
    color: var(--text);
    font-weight: 600;
}
.access-denied-claims {
    width: 100%;
    margin-top: 14px;
}
.access-denied-claims th,
.access-denied-claims td {
    font-size: 12px;
}
.component-host-shell {
    position: relative;
    min-height: 360px;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: hidden;
}
.component-host-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--bg);
    z-index: 2;
    transition: opacity .18s ease, visibility .18s ease;
}
.component-host-loading.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.component-host-loading-card {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: center;
}
.component-host-spinner {
    width: 28px;
    height: 28px;
    margin: 0 auto 10px;
    border-radius: 50%;
    border: 3px solid rgba(29, 78, 216, .18);
    border-top-color: var(--blue);
    animation: component-spin .8s linear infinite;
}
.component-host-loading-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.component-host-loading-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-faint);
}
.component-host-frame {
    width: 100%;
    min-height: calc(100vh - 118px);
    border: 0;
    display: block;
    opacity: 0;
    transition: opacity .18s ease;
    background: transparent;
    overflow: hidden;
}
.component-host-frame.ready {
    opacity: 1;
}

@keyframes component-spin {
    to { transform: rotate(360deg); }
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.card-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inline-form { margin: 0; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.card-title { font-size: 13px; font-weight: 600; }
.card-title.accent-2 { color: #e1004a; font-size: 16px; font-weight: 700; }
.card-sub { font-size: 12px; color: var(--text-faint); }
.card-body { padding: 16px; }
.signin-card { max-width: 860px; margin: 0 auto; }
.signin-note {
    margin-bottom: 14px;
    color: var(--text-mid);
    font-size: 13px;
}

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 8px 16px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, border-color .12s;
    white-space: nowrap;
}

.btn-primary {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.btn-primary:hover {
    background: var(--blue-hover);
    border-color: var(--blue-hover);
    text-decoration: none;
}

.btn-secondary {
    background: var(--surface);
    border-color: var(--border-mid);
    color: var(--text-mid);
}

.btn-secondary:hover {
    background: var(--surface-2);
    border-color: var(--text-faint);
    color: var(--text);
    text-decoration: none;
}

.btn-danger {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.btn-danger:hover {
    background: #991b1b;
    border-color: #991b1b;
    color: #fff;
    text-decoration: none;
}

.icon-button {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border-mid);
    color: var(--text-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 15px;
    text-decoration: none;
}
.icon-button i { font-size: 14px; }

.icon-button:hover {
    background: var(--surface-2);
    border-color: var(--text-faint);
    color: var(--text);
    text-decoration: none;
}

body.marc-nav-loading {
    cursor: progress;
}
body.marc-nav-loading::after {
    content: "";
    position: fixed;
    top: 14px;
    right: 14px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--text-mid);
    border-top-color: transparent;
    border-radius: 50%;
    animation: component-spin 0.8s linear infinite;
    pointer-events: none;
    z-index: 9999;
    opacity: .9;
}

.sm { font-size: 12px !important; padding: 5px 11px !important; }
select {
    display: block;
    width: 220px;
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input[type="text"], input[type="password"], input:not([type]) {
    display: block;
    width: 100%;
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; color: var(--text-mid); font-weight: 600; }
.field-wide { grid-column: 1 / -1; }
.tenant-form-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    align-items: start;
}
.signin-form { margin-top: 4px; }
.signin-form {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}
.signin-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 6px;
}
.signin-divider {
    flex: 1 1 180px;
    min-width: 120px;
    height: 1px;
    background: var(--border);
}
.tenant-admin-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.2fr);
}
.tenant-section { margin-bottom: 20px; }
.tenant-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 10px;
}
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.profile-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 10px 12px;
    display: grid;
    gap: 2px;
}
.profile-item span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-faint);
}
.profile-item strong {
    font-size: 13px;
    color: var(--text);
}
.profile-item code {
    font-size: 12px;
    color: var(--text-mid);
}
.profile-item-wide { grid-column: 1 / -1; }
.settings-group { margin-bottom: 16px; }
.settings-table td { vertical-align: top; }
.settings-input {
    width: 100%;
    min-width: 260px;
}
.setting-editor {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100%;
}
.setting-editor .settings-input {
    min-width: 220px;
    flex: 1 1 auto;
}
.setting-secret-editor {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.setting-secret-input {
    min-width: 0;
}
.setting-readonly {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
}
.settings-prose {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.3;
    color: var(--text-faint);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: .85;
}
.route-create-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr 1.6fr auto auto;
    gap: 10px;
    align-items: end;
}
.route-flag {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: start;
}
.route-cta {
    display: flex;
    align-items: end;
}
.route-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.stack-tight { display: flex; flex-direction: column; gap: 2px; }
.inline-details { margin-top: 6px; }
.inline-details summary {
    cursor: pointer;
    list-style: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--blue);
}
.inline-details summary::-webkit-details-marker { display: none; }
.inline-details > div { margin-top: 8px; }
.muted { color: var(--text-faint); }
select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }

.icon-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border-mid);
    color: var(--text-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}
.icon-btn i { font-size: 14px; }
.icon-btn:hover {
    background: var(--surface-2);
    border-color: var(--text-faint);
    color: var(--text);
    text-decoration: none;
}

.marc-dialog {
    width: min(620px, calc(100vw - 32px));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
    position: fixed;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    margin: 0;
    max-height: calc(100vh - 32px);
    overflow: hidden;
}
.marc-dialog[open] { display: block; }
.marc-dialog::backdrop { background: rgba(28, 25, 23, .32); }
.subscription-dialog { width: min(930px, calc(100vw - 32px)); }
.workflow-dialog {
    width: min(1120px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
}
.workflow-head { align-items: flex-start; }
.workflow-body {
    overflow: auto;
    max-height: calc(100vh - 148px);
}
.workflow-step {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 14px 16px;
    margin-bottom: 12px;
}
.workflow-step-current {
    border-color: rgba(63, 81, 181, .32);
    box-shadow: inset 0 0 0 1px rgba(63, 81, 181, .05);
}
.workflow-step-complete {
    background: rgba(67, 160, 71, .04);
}
.workflow-step-locked {
    opacity: .78;
}
.workflow-step-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
.workflow-step-head .card-title {
    font-size: 16px;
    margin-bottom: 2px;
}
.workflow-step-body {
    display: grid;
    gap: 10px;
}
.workflow-copy {
    margin: 0;
    color: var(--text-mid);
    line-height: 1.45;
}
.workflow-note {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.workflow-preview-wrap {
    margin-top: 2px;
}
.workflow-footer {
    padding: 0 16px 16px;
}
.preview-dialog {
    width: min(980px, calc(100vw - 32px));
}
.preview-table-wrap {
    margin-top: 12px;
    max-height: min(56vh, 540px);
    overflow: auto;
}
.preview-table td {
    vertical-align: top;
}
.preview-value {
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.dialog-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.preview-dialog .dialog-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dialog-summary div {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    padding: 10px 12px;
}
.dialog-summary span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-faint);
}
.dialog-summary strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

.kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.kpi-tile {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    min-width: 180px;
}
.kpi-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 4px;
}
.kpi-count {
    font-size: 24px;
    font-weight: 700;
    color: var(--blue);
    line-height: 1;
    letter-spacing: -.02em;
}

table { width: 100%; border-collapse: collapse; }
th {
    padding: 9px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-faint);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    text-align: left;
}

td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 3px 10px;
    border-radius: 999px;
}

.badge::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.badge-active { background: var(--green-tint); color: #166534; }
.badge-active::before { background: var(--green); }
.badge-inactive { background: #fef2f2; color: #b91c1c; }
.badge-inactive::before { background: #ef4444; }
.badge-neutral { background: var(--surface-2); color: var(--text-mid); }
.badge-neutral::before { background: var(--text-faint); }
.badge-info { background: #eff6ff; color: #1d4ed8; }
.badge-info::before { background: #3b82f6; }

.banner {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    margin-bottom: 18px;
    font-size: 13px;
}
.banner-ok {
    background: var(--green-tint);
    border-color: var(--green-border);
    color: #166534;
}
.banner-warn {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* Account dropdown */
.account-menu { position: relative; }
.account-menu-toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 0 5px 10px;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-mid);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.account-menu-toggle span {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.account-menu-toggle::-webkit-details-marker { display: none; }
.account-menu-toggle > i:first-child { font-size: 13px; }
.account-caret {
    font-size: 9px !important;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 9px;
    margin-left: 4px;
    border-left: 1px solid var(--border-mid);
    transition: transform .15s;
}
.account-menu[open] .account-caret { transform: rotate(180deg); }
.account-menu[open] .account-menu-toggle,
.account-menu-toggle:hover {
    background: var(--surface-2);
    border-color: var(--text-faint);
    color: var(--text);
}
.account-menu[open] .account-caret,
.account-menu-toggle:hover .account-caret { border-left-color: var(--text-faint); }
.account-menu-panel {
    position: absolute;
    right: 0;
    top: 40px;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    padding: 6px;
    z-index: 200;
}
.account-menu-header {
    padding: 6px 10px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.account-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
}
.account-menu-link i { width: 14px; text-align: center; color: var(--text-mid); }
.account-menu-link:hover {
    background: var(--surface-2);
    text-decoration: none;
}

/* Subscription dialog layout */
.dialog-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.dialog-body {
    padding: 16px;
    overflow-y: auto;
    max-height: calc(100vh - 220px);
}
.sub-dialog-body { max-height: min(80vh, calc(100vh - 160px)); }
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}
.sub-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.sub-trial-note { font-size: 12px; color: var(--text-mid); }
.subscription-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.subscription-form-grid select,
.subscription-form-grid input[type="text"] { width: 100%; }
.sub-billing-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
.text-right { text-align: right !important; }

/* Country picker custom dropdown */
.country-picker { position: relative; }
.country-picker-toggle {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    font-size: 13px;
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.country-picker-toggle::-webkit-details-marker { display: none; }
.country-picker[open] .country-picker-toggle,
.country-picker-toggle:hover {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint);
}
.country-picker-display { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country-picker-panel {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: 400;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
    display: flex;
    flex-direction: column;
    max-height: 240px;
}
.country-picker-search {
    margin: 6px 6px 4px;
    width: calc(100% - 12px) !important;
    font-size: 12px;
}
.country-picker-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px;
}
.country-picker-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    white-space: nowrap;
}
.country-picker-option:hover { background: var(--surface-2); }
.country-picker-option img { flex-shrink: 0; border-radius: 2px; }
.country-picker-divider { height: 1px; background: var(--border); margin: 4px 2px; }

/* Component subscription table */
.sub-components-section { margin-top: 4px; }
.sub-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-faint);
    margin-bottom: 8px;
}
.sub-component-table { width: 100%; }
.sub-component-table th {
    padding: 7px 10px;
    font-size: 10px;
}
.sub-component-table td { padding: 10px 10px; vertical-align: middle; }
.sub-comp-name { font-weight: 600; font-size: 13px; }
.sub-comp-plan select { width: auto; min-width: 100px; font-size: 12px; padding: 4px 8px; }
.sub-comp-base { font-size: 13px; }
.sub-comp-price { font-weight: 600; font-size: 13px; white-space: nowrap; }
.sub-comp-billing { white-space: nowrap; }
.discount-input-row { display: flex; align-items: center; gap: 6px; }
.discount-input-row .discount-input { width: 88px !important; font-size: 12px; padding: 4px 8px; }
.discount-status { font-size: 11px; margin-top: 4px; }
.badge-active-text { color: #166534; }
.badge-expired-text { color: #92400e; }
.discount-feedback { font-size: 11px; margin-top: 4px; }
.discount-feedback.error { color: #b91c1c; }
.discount-feedback.success { color: #166534; }

/* Totals */
.sub-totals {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.sub-totals-row {
    display: flex;
    gap: 32px;
    justify-content: flex-end;
    font-size: 13px;
    color: var(--text-mid);
    min-width: 220px;
}
.sub-totals-row span:last-child { text-align: right; min-width: 70px; }
.sub-totals-total {
    font-weight: 700;
    color: var(--text);
    font-size: 14px;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .topbar, .page-shell { padding-left: 16px; padding-right: 16px; }
    .topbar-actions { gap: 6px; }
    .component-menu-panel { min-width: 180px; }
    .component-host-shell { min-height: calc(100vh - 164px); }
    .tenant-form-grid { grid-template-columns: 1fr; }
    .tenant-admin-grid { grid-template-columns: 1fr; }
    .tenant-kpi-grid { grid-template-columns: 1fr 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .settings-input { min-width: 100%; }
    .signin-divider { display: none; }
    .setting-editor { flex-wrap: wrap; }
    .setting-editor .settings-input { min-width: 100%; }
    .setting-secret-editor { width: 100%; }
    .subscription-form-grid { grid-template-columns: 1fr; }
}