/* =====================================================================
   NovaChat Test Client – design system
   Palette and components follow docs/Testclient modernization/TestClient.dc.html
   ===================================================================== */

/* ---------- tokens ---------- */
:root,
[data-bs-theme="dark"] {
    --nc-bg: #0b1417;
    --nc-bg-deep: #070e11;
    --nc-surface: #11191d;
    --nc-surface-2: #162228;
    --nc-surface-3: #1c2b32;
    --nc-border: #1f2d32;
    --nc-border-2: #2a3b43;
    --nc-border-3: #3c515a;
    --nc-text: #e8eef0;
    --nc-text-2: #c8d6da;
    --nc-muted: #8fa3ac;
    --nc-dim: #5c6e76;
    --nc-teal: #2dd4bf;
    --nc-teal-2: #3cdecd;
    --nc-teal-deep: #143232;
    --nc-teal-ink: #0a1d1d;
    --nc-green-deep: #11332b;
    --nc-red: #ef4444;
    --nc-red-2: #f87171;
    --nc-red-deep: #3a1414;
    --nc-amber: #fbbf24;
    --nc-amber-deep: #3a2f12;
    --nc-blue: #60a5fa;
    --nc-blue-deep: #12293a;
    --nc-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --nc-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --nc-radius: 10px;
    --nc-radius-lg: 14px;

    /* Bootstrap 5.3 variable bridge */
    --bs-body-bg: var(--nc-bg);
    --bs-body-bg-rgb: 11, 20, 23;
    --bs-body-color: var(--nc-text);
    --bs-body-color-rgb: 232, 238, 240;
    --bs-body-font-family: var(--nc-font);
    --bs-body-font-size: 0.875rem;
    --bs-body-line-height: 1.5;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: var(--nc-muted);
    --bs-secondary-color-rgb: 143, 163, 172;
    --bs-secondary-bg: var(--nc-surface-2);
    --bs-secondary-bg-rgb: 22, 34, 40;
    --bs-tertiary-color: var(--nc-dim);
    --bs-tertiary-color-rgb: 92, 110, 118;
    --bs-tertiary-bg: var(--nc-surface);
    --bs-tertiary-bg-rgb: 17, 25, 29;
    --bs-heading-color: var(--nc-text);
    --bs-border-color: var(--nc-border);
    --bs-border-color-translucent: rgba(31, 45, 50, 0.6);
    --bs-border-radius: var(--nc-radius);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--nc-radius-lg);
    --bs-link-color: var(--nc-teal);
    --bs-link-color-rgb: 45, 212, 191;
    --bs-link-hover-color: var(--nc-teal-2);
    --bs-link-hover-color-rgb: 60, 222, 205;
    --bs-code-color: var(--nc-teal);
    --bs-font-monospace: var(--nc-mono);

    --bs-primary: var(--nc-teal);
    --bs-primary-rgb: 45, 212, 191;
    --bs-primary-text-emphasis: var(--nc-teal);
    --bs-primary-bg-subtle: var(--nc-teal-deep);
    --bs-primary-border-subtle: rgba(45, 212, 191, 0.25);
    --bs-secondary: var(--nc-muted);
    --bs-secondary-rgb: 143, 163, 172;
    --bs-secondary-text-emphasis: var(--nc-text-2);
    --bs-secondary-bg-subtle: var(--nc-surface-2);
    --bs-secondary-border-subtle: var(--nc-border-2);
    --bs-success: var(--nc-teal);
    --bs-success-rgb: 45, 212, 191;
    --bs-success-text-emphasis: var(--nc-teal);
    --bs-success-bg-subtle: var(--nc-green-deep);
    --bs-success-border-subtle: rgba(45, 212, 191, 0.25);
    --bs-danger: var(--nc-red);
    --bs-danger-rgb: 248, 113, 113;
    --bs-danger-text-emphasis: var(--nc-red-2);
    --bs-danger-bg-subtle: var(--nc-red-deep);
    --bs-danger-border-subtle: rgba(239, 68, 68, 0.35);
    --bs-warning: var(--nc-amber);
    --bs-warning-rgb: 251, 191, 36;
    --bs-warning-text-emphasis: var(--nc-amber);
    --bs-warning-bg-subtle: var(--nc-amber-deep);
    --bs-warning-border-subtle: rgba(251, 191, 36, 0.3);
    --bs-info: var(--nc-blue);
    --bs-info-rgb: 96, 165, 250;
    --bs-info-text-emphasis: var(--nc-blue);
    --bs-info-bg-subtle: var(--nc-blue-deep);
    --bs-info-border-subtle: rgba(96, 165, 250, 0.3);
    --bs-light: var(--nc-text-2);
    --bs-light-rgb: 200, 214, 218;
    --bs-light-text-emphasis: var(--nc-text);
    --bs-light-bg-subtle: var(--nc-surface-2);
    --bs-light-border-subtle: var(--nc-border-2);
    --bs-dark: var(--nc-bg-deep);
    --bs-dark-rgb: 7, 14, 17;
    --bs-dark-text-emphasis: var(--nc-text);
    --bs-dark-bg-subtle: var(--nc-bg-deep);
    --bs-dark-border-subtle: var(--nc-border);
    --bs-focus-ring-color: rgba(45, 212, 191, 0.25);
    --bs-form-valid-color: var(--nc-teal);
    --bs-form-valid-border-color: var(--nc-teal);
    --bs-form-invalid-color: var(--nc-red-2);
    --bs-form-invalid-border-color: var(--nc-red);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--nc-bg);
    color: var(--nc-text);
    font-family: var(--nc-font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--nc-teal-deep); color: var(--nc-text); }
a { color: var(--nc-teal); text-decoration: none; }
a:hover { color: var(--nc-teal-2); }
h1, .h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.3px; margin: 0; color: var(--nc-text); }
h2, .h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; margin: 0; color: var(--nc-text); }
h3, .h3 { font-size: 17px; font-weight: 700; margin: 0; color: var(--nc-text); }
h4, .h4 { font-size: 16px; font-weight: 600; margin: 0; color: var(--nc-text); }
h5, .h5 { font-size: 15px; font-weight: 600; margin: 0; color: var(--nc-text); }
h6, .h6 { font-size: 13px; font-weight: 600; margin: 0; color: var(--nc-text); }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; }
h1:focus, h1:focus-visible { outline: none; }
h3.mb-3, h3.mb-4, h3.mb-0, h3.pt-4, h2.mb-3, h2.mb-4 { margin-bottom: 14px; }
p { margin-top: 0; }
code, .mono, .text-monospace, .font-monospace {
    font-family: var(--nc-mono);
    font-size: 12.5px;
}
code {
    color: var(--nc-teal);
    background: var(--nc-bg-deep);
    border: 1px solid var(--nc-border);
    border-radius: 5px;
    padding: 1px 6px;
}
pre {
    background: var(--nc-bg-deep);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    padding: 14px 16px;
    overflow-x: auto;
    font-family: var(--nc-mono);
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--nc-text-2);
    margin: 0 0 10px;
}
pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: inherit; }
hr { border: 0; border-top: 1px solid var(--nc-border); opacity: 1; margin: 18px 0; }
.muted { color: var(--nc-muted); }
.dim { color: var(--nc-dim); }
.spacer { flex: 1; }
.hrow { display: flex; align-items: center; }
.hint, .form-text { font-size: 12px; color: var(--nc-dim); }
.lbl { font-size: 13px; font-weight: 600; color: var(--nc-text); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--nc-border-2); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--nc-border-3); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- app shell ---------- */
.tc { height: 100vh; width: 100%; display: flex; background: var(--nc-bg); color: var(--nc-text); overflow: hidden; }
.sb {
    width: 264px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--nc-border);
    background: var(--nc-bg);
    padding: 18px 10px 12px;
    transition: width 0.15s ease;
    min-height: 0;
}
.sb-head { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 6px; flex-shrink: 0; }
.logo { font-size: 18px; font-weight: 700; letter-spacing: -0.2px; display: flex; align-items: center; gap: 8px; color: var(--nc-text); white-space: nowrap; }
.logo .dot {
    width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0;
    background: linear-gradient(135deg, #2dd4bf, #14b8a6);
    display: flex; align-items: center; justify-content: center;
    color: var(--nc-teal-ink); font-size: 13px; font-weight: 800;
    box-shadow: none;
}
.logo .k { color: var(--nc-teal); }
.sb-group { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.sb-scroll { margin-top: 0; overflow-y: auto; overflow-x: hidden; flex: 1; min-height: 0; padding-right: 2px; }
.sb-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nc-dim); padding: 14px 10px 6px; white-space: nowrap; }
.sb-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 8px;
    color: var(--nc-muted); font-weight: 500; font-size: 13.5px;
    cursor: pointer; user-select: none; white-space: nowrap;
    transition: background 0.12s, color 0.12s;
    border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit;
}
.sb-item:hover { background: rgba(255, 255, 255, 0.08); color: var(--nc-text); }
.sb-item.active { background: var(--nc-surface-2); color: var(--nc-text); }
.sb-item .ic { width: 18px; height: 18px; flex-shrink: 0; display: flex; color: currentColor; }
.sb-item.primary { background: var(--nc-teal); color: var(--nc-teal-ink); font-weight: 600; }
.sb-item.primary:hover { background: var(--nc-teal-2); color: var(--nc-teal-ink); }
.sb-item .tag { margin-left: auto; font-size: 10px; font-weight: 700; background: var(--nc-teal-deep); color: var(--nc-teal); padding: 2px 7px; border-radius: 999px; }
.sb-item .tag.red { background: var(--nc-red-deep); color: var(--nc-red-2); }
.sb-item .lbl-text { overflow: hidden; text-overflow: ellipsis; }
.sb-foot { margin-top: 8px; border-top: 1px solid var(--nc-border); padding-top: 10px; flex-shrink: 0; }
.sb.collapsed { width: 66px; padding-left: 8px; padding-right: 8px; }
.sb.collapsed .logo span:not(.dot), .sb.collapsed .sb-label, .sb.collapsed .lbl-text, .sb.collapsed .tag { display: none; }
.sb.collapsed .sb-item { justify-content: center; padding: 9px 0; }
.sb.collapsed .sb-head { justify-content: center; }
.sb.collapsed .sb-group.sb-scroll { padding-right: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--nc-bg); }
.tb { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 0 22px; border-bottom: 1px solid var(--nc-border); }
.tb-title { font-size: 15px; font-weight: 600; white-space: nowrap; }
.tb-sub { font-size: 12px; color: var(--nc-dim); margin-top: 1px; white-space: nowrap; }
.tb .user-name { font-size: 13px; font-weight: 600; text-align: right; line-height: 1.2; }
.tb .user-tier { font-size: 11px; color: var(--nc-dim); text-align: right; }
.icon-btn {
    width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent;
    background: transparent; color: var(--nc-muted); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; transition: background 0.12s, color 0.12s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--nc-text); }
.icon-btn .ic { width: 18px; height: 18px; display: flex; }
.content { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 26px 28px 60px; }
.wrap { max-width: 1180px; margin: 0 auto; }
.wrap.wide { max-width: 1600px; }
.content .container, .content .container-fluid { max-width: none; padding-left: 0; padding-right: 0; }
.content .container.my-4, .content .container.py-4, .content .container.py-5, .content .container.mt-3 { margin-top: 0 !important; padding-top: 0 !important; }
.auth-shell { min-height: 100vh; width: 100%; }
.ava {
    width: 34px; height: 34px; border-radius: 50%; background: var(--nc-teal-deep); color: var(--nc-teal);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; cursor: pointer;
    border: 1px solid rgba(45, 212, 191, 0.25); overflow: hidden; flex-shrink: 0;
}
.ava img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
    .sb { position: fixed; inset: 0 auto 0 0; z-index: 1040; transform: translateX(-100%); box-shadow: 0 0 40px rgba(0, 0, 0, 0.6); }
    .sb.collapsed { width: 264px; transform: translateX(-100%); }
    .sb.collapsed .logo span:not(.dot), .sb.collapsed .sb-label, .sb.collapsed .lbl-text, .sb.collapsed .tag { display: initial; }
    .sb.collapsed .sb-item { justify-content: flex-start; padding: 9px 10px; }
    .tc.sb-open .sb { transform: translateX(0); }
    .tc.sb-open::before { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1039; }
    .tb { padding: 0 14px; gap: 10px; }
    .tb .user-name, .tb .user-tier, .tb .tb-sub { display: none; }
    .content { padding: 18px 14px 50px; }
}

/* ---------- icons ---------- */
.ic { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
.ic svg { width: 100%; height: 100%; }
.btn .ic { width: 16px; height: 16px; display: inline-flex; }
.btn-sm .ic { width: 14px; height: 14px; }

/* ---------- buttons (Bootstrap re-skinned) ---------- */
.btn {
    --bs-btn-border-radius: var(--nc-radius);
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 14px;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-line-height: 1.35;
    --bs-btn-focus-box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.25);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    white-space: nowrap; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.btn.btn-sm, .btn-group-sm > .btn { --bs-btn-border-radius: 8px; --bs-btn-font-size: 12.5px; --bs-btn-padding-y: 0.32rem; --bs-btn-padding-x: 0.7rem; gap: 6px; }
.btn.btn-lg { --bs-btn-padding-y: 0.65rem; --bs-btn-padding-x: 1.25rem; }
.btn:disabled, .btn.disabled { opacity: 0.5; }
.btn-primary, .btn-success {
    --bs-btn-bg: var(--nc-teal); --bs-btn-border-color: var(--nc-teal); --bs-btn-color: var(--nc-teal-ink);
    --bs-btn-hover-bg: var(--nc-teal-2); --bs-btn-hover-border-color: var(--nc-teal-2); --bs-btn-hover-color: var(--nc-teal-ink);
    --bs-btn-active-bg: var(--nc-teal-2); --bs-btn-active-border-color: var(--nc-teal-2); --bs-btn-active-color: var(--nc-teal-ink);
    --bs-btn-disabled-bg: var(--nc-teal); --bs-btn-disabled-border-color: var(--nc-teal); --bs-btn-disabled-color: var(--nc-teal-ink);
}
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-light {
    --bs-btn-bg: var(--nc-surface-2); --bs-btn-border-color: var(--nc-border-2); --bs-btn-color: var(--nc-text);
    --bs-btn-hover-bg: var(--nc-surface-3); --bs-btn-hover-border-color: var(--nc-border-3); --bs-btn-hover-color: var(--nc-text);
    --bs-btn-active-bg: var(--nc-surface-3); --bs-btn-active-border-color: var(--nc-border-3); --bs-btn-active-color: var(--nc-text);
    --bs-btn-disabled-bg: var(--nc-surface-2); --bs-btn-disabled-border-color: var(--nc-border-2); --bs-btn-disabled-color: var(--nc-text);
}
.btn-dark, .btn-outline-dark {
    --bs-btn-bg: var(--nc-bg); --bs-btn-border-color: var(--nc-border-2); --bs-btn-color: var(--nc-text);
    --bs-btn-hover-bg: var(--nc-surface); --bs-btn-hover-border-color: var(--nc-border-3); --bs-btn-hover-color: var(--nc-text);
    --bs-btn-active-bg: var(--nc-surface); --bs-btn-active-border-color: var(--nc-border-3); --bs-btn-active-color: var(--nc-text);
    --bs-btn-disabled-bg: var(--nc-bg); --bs-btn-disabled-border-color: var(--nc-border-2); --bs-btn-disabled-color: var(--nc-text);
}
.btn-outline-primary, .btn-outline-success, .btn-outline-info {
    --bs-btn-bg: transparent; --bs-btn-border-color: rgba(45, 212, 191, 0.45); --bs-btn-color: var(--nc-teal);
    --bs-btn-hover-bg: var(--nc-teal-deep); --bs-btn-hover-border-color: var(--nc-teal); --bs-btn-hover-color: var(--nc-teal);
    --bs-btn-active-bg: var(--nc-teal-deep); --bs-btn-active-border-color: var(--nc-teal); --bs-btn-active-color: var(--nc-teal);
    --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: rgba(45, 212, 191, 0.45); --bs-btn-disabled-color: var(--nc-teal);
}
.btn-outline-primary.active, .btn-check:checked + .btn-outline-primary, .btn-outline-primary:active {
    --bs-btn-active-bg: var(--nc-teal-deep); --bs-btn-active-color: var(--nc-teal); --bs-btn-active-border-color: var(--nc-teal);
}
.btn-outline-secondary.active, .btn-check:checked + .btn-outline-secondary { background: var(--nc-teal-deep); color: var(--nc-teal); border-color: rgba(45, 212, 191, 0.4); }
.btn-info {
    --bs-btn-bg: var(--nc-blue-deep); --bs-btn-border-color: rgba(96, 165, 250, 0.35); --bs-btn-color: var(--nc-blue);
    --bs-btn-hover-bg: #173552; --bs-btn-hover-border-color: var(--nc-blue); --bs-btn-hover-color: var(--nc-blue);
    --bs-btn-active-bg: #173552; --bs-btn-active-border-color: var(--nc-blue); --bs-btn-active-color: var(--nc-blue);
    --bs-btn-disabled-bg: var(--nc-blue-deep); --bs-btn-disabled-border-color: rgba(96, 165, 250, 0.35); --bs-btn-disabled-color: var(--nc-blue);
}
.btn-danger {
    --bs-btn-bg: var(--nc-red); --bs-btn-border-color: var(--nc-red); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #dc2626; --bs-btn-active-border-color: #dc2626; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--nc-red); --bs-btn-disabled-border-color: var(--nc-red); --bs-btn-disabled-color: #fff;
}
.btn-outline-danger {
    --bs-btn-bg: transparent; --bs-btn-border-color: rgba(239, 68, 68, 0.45); --bs-btn-color: var(--nc-red-2);
    --bs-btn-hover-bg: rgba(239, 68, 68, 0.12); --bs-btn-hover-border-color: var(--nc-red); --bs-btn-hover-color: var(--nc-red-2);
    --bs-btn-active-bg: rgba(239, 68, 68, 0.18); --bs-btn-active-border-color: var(--nc-red); --bs-btn-active-color: var(--nc-red-2);
    --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: rgba(239, 68, 68, 0.45); --bs-btn-disabled-color: var(--nc-red-2);
}
.btn-warning {
    --bs-btn-bg: var(--nc-amber); --bs-btn-border-color: var(--nc-amber); --bs-btn-color: #1a1400;
    --bs-btn-hover-bg: #f5b30f; --bs-btn-hover-border-color: #f5b30f; --bs-btn-hover-color: #1a1400;
    --bs-btn-active-bg: #f5b30f; --bs-btn-active-border-color: #f5b30f; --bs-btn-active-color: #1a1400;
    --bs-btn-disabled-bg: var(--nc-amber); --bs-btn-disabled-border-color: var(--nc-amber); --bs-btn-disabled-color: #1a1400;
}
.btn-outline-warning {
    --bs-btn-bg: transparent; --bs-btn-border-color: rgba(251, 191, 36, 0.45); --bs-btn-color: var(--nc-amber);
    --bs-btn-hover-bg: rgba(251, 191, 36, 0.12); --bs-btn-hover-border-color: var(--nc-amber); --bs-btn-hover-color: var(--nc-amber);
    --bs-btn-active-bg: rgba(251, 191, 36, 0.18); --bs-btn-active-border-color: var(--nc-amber); --bs-btn-active-color: var(--nc-amber);
    --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: rgba(251, 191, 36, 0.45); --bs-btn-disabled-color: var(--nc-amber);
}
.btn-link {
    --bs-btn-color: var(--nc-teal); --bs-btn-hover-color: var(--nc-teal-2); --bs-btn-active-color: var(--nc-teal-2);
    --bs-btn-disabled-color: var(--nc-dim); text-decoration: none; font-weight: 600;
}
.btn-ghost {
    --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-color: var(--nc-muted);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.08); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--nc-text);
    --bs-btn-active-bg: rgba(255, 255, 255, 0.1); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--nc-text);
    --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-color: var(--nc-muted);
}
.btn-ghost.text-danger { --bs-btn-color: var(--nc-red-2); --bs-btn-hover-bg: rgba(239, 68, 68, 0.1); --bs-btn-hover-color: var(--nc-red-2); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.6; }
.btn-close:hover { opacity: 1; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--bs-btn-border-radius); border-bottom-left-radius: var(--bs-btn-border-radius); }
.btn-group > .btn:last-child { border-top-right-radius: var(--bs-btn-border-radius); border-bottom-right-radius: var(--bs-btn-border-radius); }

/* ---------- forms ---------- */
.form-control, .form-select, .input, .select, .input-group-text {
    background-color: var(--nc-bg);
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    padding: 10px 13px;
    color: var(--nc-text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.form-control:focus, .form-select:focus, .input:focus, .select:focus {
    background-color: var(--nc-bg-deep);
    border-color: rgba(45, 212, 191, 0.6);
    color: var(--nc-text);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
    outline: none;
}
.form-control::placeholder, .input::placeholder, textarea::placeholder { color: var(--nc-dim); opacity: 1; }
.form-control:disabled, .form-select:disabled { background-color: var(--nc-surface); color: var(--nc-muted); opacity: 0.7; }
.form-control[readonly] { background-color: var(--nc-surface); }
.form-select, .select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238fa3ac' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
    cursor: pointer;
}
.form-select option, .select option { background: var(--nc-surface); color: var(--nc-text); }
.form-control-sm, .form-select-sm, .select.sm, .input.sm { padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.form-select-sm, .select.sm { padding-right: 30px; }
.form-control-plaintext { color: var(--nc-text); }
.form-label { font-size: 13px; font-weight: 600; color: var(--nc-text); margin-bottom: 6px; }
.form-label.small { font-size: 12px; font-weight: 500; color: var(--nc-muted); }
.input-group .form-control, .input-group .form-select, .input-group .btn { border-radius: var(--nc-radius); }
.input-group > :not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-text { color: var(--nc-muted); background: var(--nc-surface); }
textarea.form-control { min-height: 84px; resize: vertical; }
.form-check-input {
    width: 18px; height: 18px; margin-top: 0.15em;
    background-color: var(--nc-bg); border: 2px solid var(--nc-border-2); border-radius: 5px;
}
.form-check-input:checked { background-color: var(--nc-teal); border-color: var(--nc-teal); }
.form-check-input:focus { border-color: rgba(45, 212, 191, 0.6); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2); }
.form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230a1d1d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230a1d1d'/%3e%3c/svg%3e"); }
.form-check-label { font-size: 13.5px; color: var(--nc-text-2); }
.form-check { display: flex; align-items: center; gap: 9px; padding-left: 0; min-height: 0; }
.form-check .form-check-input { float: none; margin-left: 0; flex-shrink: 0; }
.form-check-inline { display: inline-flex; margin-right: 1rem; }
.form-switch { padding-left: 0; }
.form-switch .form-check-input {
    width: 40px; height: 22px; margin-left: 0; border-radius: 999px; border: 0;
    background-color: var(--nc-border-2);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
    background-position: left center; background-size: contain;
    transition: background-position 0.15s, background-color 0.15s;
}
.form-switch .form-check-input:checked { background-color: var(--nc-teal); background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); }
.validation-message, .invalid-feedback { color: var(--nc-red-2); font-size: 12px; margin-top: 4px; }
.validation-summary-errors, .validation-errors { color: var(--nc-red-2); font-size: 13px; padding-left: 18px; margin-bottom: 12px; }
.valid.modified:not([type=checkbox]) { outline: none; border-color: rgba(45, 212, 191, 0.6); }
.invalid { outline: none; border-color: var(--nc-red) !important; }
input[type="file"].form-control { padding: 8px 12px; }
input[type="file"]::file-selector-button {
    background: var(--nc-surface-2); color: var(--nc-text); border: 1px solid var(--nc-border-2); border-radius: 8px;
    padding: 5px 11px; margin-right: 10px; font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
input[type="datetime-local"], input[type="date"] { color-scheme: dark; }

/* ---------- cards & panels ---------- */
.card {
    --bs-card-bg: var(--nc-surface);
    --bs-card-border-color: var(--nc-border);
    --bs-card-border-radius: var(--nc-radius-lg);
    --bs-card-inner-border-radius: calc(var(--nc-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: 14px;
    --bs-card-cap-padding-x: 20px;
    --bs-card-spacer-y: 20px;
    --bs-card-spacer-x: 20px;
    --bs-card-color: var(--nc-text);
    box-shadow: none;
}
.card.el { --bs-card-bg: var(--nc-surface-2); }
.card.cur { --bs-card-border-color: rgba(45, 212, 191, 0.4); --bs-card-bg: #0f1c1c; }
.card-header { font-weight: 600; font-size: 14px; border-bottom: 1px solid var(--nc-border); }
.card-footer { border-top: 1px solid var(--nc-border); }
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.card.border-danger, .border-danger { border-color: rgba(239, 68, 68, 0.45) !important; }
.card.border-primary, .border-primary { border-color: rgba(45, 212, 191, 0.45) !important; }
.shadow, .shadow-sm { box-shadow: none !important; }
.border { border-color: var(--nc-border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--nc-border) !important; }
.rounded, .rounded-3 { border-radius: var(--nc-radius) !important; }
.bg-body-tertiary { background: var(--nc-surface) !important; }
.stat { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg); padding: 18px; }
.stat .n { font-size: 26px; font-weight: 700; letter-spacing: -0.4px; }
.stat .l { font-size: 12px; color: var(--nc-dim); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(31, 45, 50, 0.6); font-size: 13.5px; }
.kv:last-child { border-bottom: none; }
.plan { border: 1px solid var(--nc-border); border-radius: 16px; padding: 22px; background: var(--nc-surface); display: flex; flex-direction: column; gap: 14px; }
.plan.cur { border-color: rgba(45, 212, 191, 0.4); background: #0f1c1c; }
.price { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.2; }
.price .per { font-size: 13px; font-weight: 500; color: var(--nc-dim); }
.feat { display: flex; gap: 9px; font-size: 13.5px; color: var(--nc-text-2); align-items: flex-start; line-height: 1.4; }
.feat .ck { color: var(--nc-teal); flex-shrink: 0; margin-top: 1px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cols { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .grid3, .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .grid2, .grid3, .grid4, .cols { grid-template-columns: 1fr; } }
.prog, .progress { height: 8px; border-radius: 999px; background: var(--nc-border); overflow: hidden; }
.prog .fill, .progress-bar { height: 100%; background: var(--nc-teal); border-radius: 999px; }
.progress-bar.bg-success, .progress-bar.bg-primary { background: var(--nc-teal) !important; }
.progress-bar.bg-warning { background: var(--nc-amber) !important; }
.progress-bar.bg-danger { background: var(--nc-red) !important; }
.progress-bar.bg-info { background: var(--nc-blue) !important; }
.progress { background: var(--nc-border-2); }

/* ---------- badges / dots ---------- */
.badge, .bdg {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px;
    border: 1px solid transparent; line-height: 1; vertical-align: middle;
    background: var(--nc-surface-2); color: var(--nc-muted); border-color: var(--nc-border-2);
}
.badge.rounded-pill { border-radius: 999px; }
.badge.bg-primary, .badge.text-bg-primary, .bdg.teal { background: var(--nc-teal-deep) !important; color: var(--nc-teal) !important; border-color: rgba(45, 212, 191, 0.25); }
.badge.bg-success, .badge.text-bg-success, .bdg.grn { background: var(--nc-green-deep) !important; color: var(--nc-teal) !important; border-color: rgba(45, 212, 191, 0.25); }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light, .badge.bg-dark, .badge.text-bg-dark, .bdg.neu { background: var(--nc-surface-2) !important; color: var(--nc-muted) !important; border-color: var(--nc-border-2); }
.badge.bg-danger, .badge.text-bg-danger, .bdg.red { background: var(--nc-red-deep) !important; color: var(--nc-red-2) !important; border-color: rgba(239, 68, 68, 0.25); }
.badge.bg-warning, .badge.text-bg-warning, .bdg.amb { background: var(--nc-amber-deep) !important; color: var(--nc-amber) !important; border-color: rgba(251, 191, 36, 0.25); }
.badge.bg-info, .badge.text-bg-info, .bdg.blu { background: var(--nc-blue-deep) !important; color: var(--nc-blue) !important; border-color: rgba(96, 165, 250, 0.25); }
.badge.bg-info-subtle, .badge.bg-warning-subtle, .badge.bg-success-subtle, .badge.bg-danger-subtle { border-color: var(--nc-border-2); }
.badge.bg-info-subtle { background: var(--nc-blue-deep) !important; color: var(--nc-blue) !important; }
.badge.bg-warning-subtle { background: var(--nc-amber-deep) !important; color: var(--nc-amber) !important; }
.badge.bg-success-subtle { background: var(--nc-green-deep) !important; color: var(--nc-teal) !important; }
.badge.bg-danger-subtle { background: var(--nc-red-deep) !important; color: var(--nc-red-2) !important; }
.badge .text-dark, .badge.text-dark { color: inherit !important; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.dot.on { background: var(--nc-teal); box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.13); }
.dot.off { background: var(--nc-red); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.13); }
.dot.warn { background: var(--nc-amber); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.13); }
.dot.neu { background: var(--nc-border-3); }

/* utilities that assumed a light background */
.bg-primary { background-color: var(--nc-teal-deep) !important; }
.bg-secondary { background-color: var(--nc-surface-2) !important; }
.bg-success { background-color: var(--nc-green-deep) !important; }
.bg-danger { background-color: var(--nc-red-deep) !important; }
.bg-warning { background-color: var(--nc-amber-deep) !important; }
.bg-info { background-color: var(--nc-blue-deep) !important; }
.bg-light { background-color: var(--nc-surface-2) !important; }
.bg-white { background-color: var(--nc-surface) !important; }
.bg-dark { background-color: var(--nc-bg-deep) !important; }
.bg-danger-subtle { background-color: var(--nc-red-deep) !important; }
.bg-warning-subtle { background-color: var(--nc-amber-deep) !important; }
.bg-success-subtle { background-color: var(--nc-green-deep) !important; }
.bg-info-subtle { background-color: var(--nc-blue-deep) !important; }
.bg-primary-subtle { background-color: var(--nc-teal-deep) !important; }
.bg-light-subtle, .bg-secondary-subtle, .bg-dark-subtle { background-color: var(--nc-bg) !important; }
.bg-body { background-color: var(--nc-bg) !important; }
.bg-body-secondary { background-color: var(--nc-surface-2) !important; }
.text-bg-primary { background-color: var(--nc-teal-deep) !important; color: var(--nc-teal) !important; }
.text-bg-secondary, .text-bg-light, .text-bg-dark { background-color: var(--nc-surface-2) !important; color: var(--nc-text-2) !important; }
.text-bg-success { background-color: var(--nc-green-deep) !important; color: var(--nc-teal) !important; }
.text-bg-danger { background-color: var(--nc-red-deep) !important; color: var(--nc-red-2) !important; }
.text-bg-warning { background-color: var(--nc-amber-deep) !important; color: var(--nc-amber) !important; }
.text-bg-info { background-color: var(--nc-blue-deep) !important; color: var(--nc-blue) !important; }
.text-dark, .text-black { color: var(--nc-text) !important; }
.text-white, .text-light { color: var(--nc-text) !important; }
.text-secondary { color: var(--nc-muted) !important; }
.text-muted { color: var(--nc-muted) !important; }
.text-body-secondary { color: var(--nc-muted) !important; }
.text-dark-emphasis { color: var(--nc-text-2) !important; }
.text-primary { color: var(--nc-teal) !important; }
.text-success { color: var(--nc-teal) !important; }
.text-danger { color: var(--nc-red-2) !important; }
.text-warning { color: var(--nc-amber) !important; }
.text-info { color: var(--nc-blue) !important; }
.link-secondary { color: var(--nc-muted) !important; }

/* ---------- alerts ---------- */
.alert {
    --bs-alert-border-radius: 12px;
    --bs-alert-padding-y: 12px;
    --bs-alert-padding-x: 15px;
    font-size: 13.5px;
    line-height: 1.5;
}
.alert .alert-heading { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.alert-danger { --bs-alert-bg: #2a1214; --bs-alert-border-color: rgba(239, 68, 68, 0.35); --bs-alert-color: #f8a5a5; --bs-alert-link-color: #fca5a5; }
.alert-warning { --bs-alert-bg: var(--nc-amber-deep); --bs-alert-border-color: rgba(251, 191, 36, 0.3); --bs-alert-color: #fde68a; --bs-alert-link-color: var(--nc-amber); }
.alert-success { --bs-alert-bg: var(--nc-green-deep); --bs-alert-border-color: rgba(45, 212, 191, 0.3); --bs-alert-color: #9ff0e2; --bs-alert-link-color: var(--nc-teal); }
.alert-info { --bs-alert-bg: var(--nc-blue-deep); --bs-alert-border-color: rgba(96, 165, 250, 0.3); --bs-alert-color: #bcd8fd; --bs-alert-link-color: var(--nc-blue); }
.alert-primary { --bs-alert-bg: var(--nc-teal-deep); --bs-alert-border-color: rgba(45, 212, 191, 0.3); --bs-alert-color: #9ff0e2; --bs-alert-link-color: var(--nc-teal); }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-bg: var(--nc-surface-2); --bs-alert-border-color: var(--nc-border-2); --bs-alert-color: var(--nc-text-2); --bs-alert-link-color: var(--nc-teal); }
.alert .btn-close { padding: 14px; }
.alert code { background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.1); color: inherit; }

/* ---------- tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nc-text);
    --bs-table-border-color: rgba(31, 45, 50, 0.7);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.03);
    --bs-table-hover-color: var(--nc-text);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: var(--nc-text);
    --bs-table-active-bg: var(--nc-teal-deep);
    --bs-table-active-color: var(--nc-text);
    font-size: 13px;
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: 12px 14px; background-color: transparent; }
.table.table-sm > :not(caption) > * > * { padding: 9px 12px; }
.table thead th, .tbl th {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--nc-dim); border-bottom: 1px solid var(--nc-border); white-space: nowrap; vertical-align: bottom;
}
.table tbody tr { transition: background 0.1s; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.03); }
.table-success, .table-primary, .table-danger, .table-warning, .table-info, .table-secondary, .table-light, .table-dark {
    --bs-table-color: var(--nc-text);
    --bs-table-hover-color: var(--nc-text);
    --bs-table-striped-color: var(--nc-text);
    --bs-table-active-color: var(--nc-text);
    --bs-table-border-color: rgba(31, 45, 50, 0.7);
    --bs-table-accent-bg: transparent;
    color: var(--nc-text);
}
.table-success, .table-primary { --bs-table-bg: rgba(45, 212, 191, 0.08); --bs-table-hover-bg: rgba(45, 212, 191, 0.14); --bs-table-striped-bg: rgba(45, 212, 191, 0.1); --bs-table-active-bg: rgba(45, 212, 191, 0.18); }
.table-danger { --bs-table-bg: rgba(239, 68, 68, 0.1); --bs-table-hover-bg: rgba(239, 68, 68, 0.16); --bs-table-striped-bg: rgba(239, 68, 68, 0.12); --bs-table-active-bg: rgba(239, 68, 68, 0.2); }
.table-warning { --bs-table-bg: rgba(251, 191, 36, 0.09); --bs-table-hover-bg: rgba(251, 191, 36, 0.15); --bs-table-striped-bg: rgba(251, 191, 36, 0.11); --bs-table-active-bg: rgba(251, 191, 36, 0.18); }
.table-info { --bs-table-bg: rgba(96, 165, 250, 0.1); --bs-table-hover-bg: rgba(96, 165, 250, 0.16); --bs-table-striped-bg: rgba(96, 165, 250, 0.12); --bs-table-active-bg: rgba(96, 165, 250, 0.2); }
.table-secondary, .table-light, .table-dark { --bs-table-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-active-bg: rgba(255, 255, 255, 0.08); }
.table-danger .text-muted, .table-warning .text-muted, .table-info .text-muted, .table-success .text-muted { color: var(--nc-text-2) !important; }
.table-responsive { border-radius: var(--nc-radius-lg); }
.tblwrap { border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg); overflow-x: auto; background: var(--nc-surface); }
.tblwrap .table-responsive { border-radius: 0; }
.tblwrap .th-bar { padding: 14px 18px; border-bottom: 1px solid var(--nc-border); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tblwrap .th-bar strong { font-size: 14px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; padding: 10px 14px; }
.tbl td { padding: 12px 14px; border-bottom: 1px solid rgba(31, 45, 50, 0.6); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background 0.1s; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
.tbl.click tbody tr { cursor: pointer; }
.tbl td.actions, .table td.actions { white-space: nowrap; }
.card > .table-responsive:first-child, .card > .card-body.p-0 > .table-responsive { border-radius: var(--nc-radius-lg); }
.card.admin-models-card .table thead th:first-child, .card.admin-models-card .table td:first-child { padding-left: 18px; }
.admin-models-table > :not(caption) > * > * { padding: 10px 12px; }
.admin-models-table .badge { white-space: nowrap; }

/* ---------- list groups ---------- */
.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--nc-text);
    --bs-list-group-border-color: var(--nc-border);
    --bs-list-group-border-radius: var(--nc-radius-lg);
    --bs-list-group-action-hover-bg: rgba(255, 255, 255, 0.04);
    --bs-list-group-action-hover-color: var(--nc-text);
    --bs-list-group-action-active-bg: var(--nc-teal-deep);
    --bs-list-group-active-bg: var(--nc-teal-deep);
    --bs-list-group-active-border-color: rgba(45, 212, 191, 0.25);
    --bs-list-group-active-color: var(--nc-teal);
    --bs-list-group-item-padding-y: 12px;
    --bs-list-group-item-padding-x: 16px;
}
.list-group-item { background: var(--nc-surface); }
.list-group-flush .list-group-item { background: transparent; }
.list-group-item.active { font-weight: 600; }

/* ---------- modals / toasts ---------- */
.modal { --bs-modal-bg: var(--nc-surface-2); --bs-modal-border-color: var(--nc-border-2); --bs-modal-border-radius: 16px; --bs-modal-header-border-color: var(--nc-border); --bs-modal-footer-border-color: var(--nc-border); --bs-modal-color: var(--nc-text); }
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: 0.65; }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-header.bg-danger-subtle { background: var(--nc-red-deep) !important; }
.toast { --bs-toast-bg: var(--nc-surface-2); --bs-toast-border-color: var(--nc-border-2); --bs-toast-color: var(--nc-text); --bs-toast-header-bg: transparent; --bs-toast-header-color: var(--nc-text); --bs-toast-header-border-color: var(--nc-border); --bs-toast-border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55); }
.toast.text-bg-info, .toast.text-bg-danger { background: var(--nc-surface-2) !important; color: var(--nc-text) !important; }
.toast .toast-header.text-bg-info, .toast .toast-header.text-bg-danger { background: transparent !important; color: var(--nc-text) !important; }
.spinner-border { color: var(--nc-teal); border-width: 0.18em; }
.spinner-border-sm { border-width: 0.16em; }
.dropdown-menu { --bs-dropdown-bg: var(--nc-surface-2); --bs-dropdown-border-color: var(--nc-border-2); --bs-dropdown-link-color: var(--nc-text); --bs-dropdown-link-hover-bg: var(--nc-surface-3); --bs-dropdown-link-hover-color: var(--nc-text); --bs-dropdown-link-active-bg: var(--nc-teal-deep); --bs-dropdown-link-active-color: var(--nc-teal); }
.nav-tabs { --bs-nav-tabs-border-color: var(--nc-border); --bs-nav-tabs-link-active-bg: var(--nc-surface); --bs-nav-tabs-link-active-color: var(--nc-text); --bs-nav-tabs-link-active-border-color: var(--nc-border) var(--nc-border) var(--nc-surface); --bs-nav-tabs-link-hover-border-color: var(--nc-border-2) var(--nc-border-2) var(--nc-border); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--nc-teal-deep); --bs-nav-pills-link-active-color: var(--nc-teal); }
.nav-link { color: var(--nc-muted); }
.nav-link:hover { color: var(--nc-text); }
.pagination { --bs-pagination-bg: var(--nc-surface); --bs-pagination-border-color: var(--nc-border); --bs-pagination-color: var(--nc-text); --bs-pagination-hover-bg: var(--nc-surface-2); --bs-pagination-hover-color: var(--nc-text); --bs-pagination-active-bg: var(--nc-teal-deep); --bs-pagination-active-border-color: rgba(45, 212, 191, 0.4); --bs-pagination-active-color: var(--nc-teal); --bs-pagination-disabled-bg: var(--nc-surface); --bs-pagination-disabled-color: var(--nc-dim); }
.accordion { --bs-accordion-bg: var(--nc-surface); --bs-accordion-border-color: var(--nc-border); --bs-accordion-btn-bg: var(--nc-surface); --bs-accordion-btn-color: var(--nc-text); --bs-accordion-active-bg: var(--nc-surface-2); --bs-accordion-active-color: var(--nc-teal); }
.popover, .tooltip-inner { background: var(--nc-surface-2); color: var(--nc-text); border-color: var(--nc-border-2); }

/* ---------- segmented / chips / switch ---------- */
.seg { display: inline-flex; background: var(--nc-bg); border: 1px solid var(--nc-border); border-radius: var(--nc-radius); padding: 3px; gap: 2px; }
.seg button, .seg label {
    background: transparent; border: none; color: var(--nc-muted); font-family: inherit; font-size: 13px; font-weight: 600;
    padding: 6px 14px; border-radius: 7px; cursor: pointer; transition: 0.12s; margin: 0; line-height: 1.3; display: inline-flex; align-items: center; justify-content: center;
}
.seg button:hover, .seg label:hover { color: var(--nc-text); }
.seg button.on, .seg label.on, .seg .btn-check:checked + label { background: var(--nc-teal-deep); color: var(--nc-teal); }
.seg.block { width: 100%; }
.seg.block button, .seg.block label { flex: 1; }
.chip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--nc-border-2); background: var(--nc-bg); color: var(--nc-muted); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: 0.12s; font-family: inherit; white-space: nowrap; user-select: none;
}
.chip:hover { border-color: var(--nc-border-3); color: var(--nc-text); }
.chip.on { border-color: rgba(45, 212, 191, 0.25); background: var(--nc-teal-deep); color: var(--nc-teal); }
.chip:disabled, .chip.disabled { opacity: 0.45; cursor: not-allowed; }
.chip .ic { width: 15px; height: 15px; }
.chip input { display: none; }
.chip select { background: transparent; border: 0; color: inherit; font-family: inherit; font-size: 13px; font-weight: 600; outline: none; cursor: pointer; padding-right: 2px; }
.chip select option { background: var(--nc-surface); color: var(--nc-text); }
.cbx { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--nc-text-2); user-select: none; margin: 0; }

/* ---------- auth screens ---------- */
.loginwrap {
    min-height: 100vh; width: 100%; display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px 60px; overflow-y: auto;
    background: radial-gradient(1200px 600px at 70% -10%, rgba(18, 49, 46, 0.35), transparent), var(--nc-bg-deep);
}
.loginbox { width: 100%; max-width: 440px; }
.loginbox .logo { justify-content: center; font-size: 22px; margin-bottom: 6px; }
.loginbox .tagline { text-align: center; margin: 0 0 26px; font-size: 13px; color: var(--nc-dim); }
.loginbox .card { padding: 24px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--nc-dim); font-size: 12px; margin: 20px 0; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--nc-border); }
.prov {
    display: flex; align-items: center; justify-content: center; gap: 9px; height: 42px; border-radius: var(--nc-radius);
    border: 1px solid var(--nc-border-2); background: var(--nc-bg); color: var(--nc-text); font-weight: 500; font-size: 13.5px;
    cursor: pointer; transition: 0.12s; font-family: inherit; width: 100%;
}
.prov:hover { background: var(--nc-surface); border-color: var(--nc-border-3); }
.prov:disabled { opacity: 0.5; cursor: not-allowed; }
.prov .mark { font-weight: 800; font-size: 15px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick .q { padding: 6px 13px; border-radius: 8px; border: 1px solid var(--nc-border-2); background: var(--nc-bg); color: var(--nc-muted); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.12s; }
.quick .q:hover { border-color: rgba(45, 212, 191, 0.4); color: var(--nc-teal); }
.quick .q:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-links { text-align: center; margin-top: 12px; font-size: 13px; color: var(--nc-dim); }
.auth-links a { font-weight: 500; }

/* ---------- settings sub-navigation ---------- */
.settings-grid { display: flex; align-items: flex-start; gap: 26px; }
.settings-body { flex: 1; min-width: 0; }
.subnav { display: flex; flex-direction: column; gap: 2px; width: 220px; flex-shrink: 0; position: sticky; top: 0; }
.subnav .sb-label { padding: 12px 12px 6px; }
.subnav .sb-label:first-child { padding-top: 0; }
.subnav .i { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--nc-muted); font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background 0.12s, color 0.12s; }
.subnav .i:hover { background: rgba(255, 255, 255, 0.06); color: var(--nc-text); }
.subnav .i.active, .subnav .i.on { background: var(--nc-surface-2); color: var(--nc-teal); }
.subnav .i .ic { width: 16px; height: 16px; }
.subnav .i .tag { margin-left: auto; font-size: 10px; font-weight: 700; background: var(--nc-red-deep); color: var(--nc-red-2); padding: 2px 7px; border-radius: 999px; }
.page-foot { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--nc-border); color: var(--nc-dim); font-size: 12px; display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 900px) {
    .settings-grid { flex-direction: column; }
    .subnav { width: 100%; position: static; flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .subnav .sb-label { width: 100%; }
}

/* ---------- admin ---------- */
.page-head { margin-bottom: 20px; }
.page-head .eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nc-dim); margin-bottom: 4px; }
.page-head p { color: var(--nc-muted); margin: 6px 0 0; font-size: 13.5px; }
.admin-content { min-width: 0; }
.admin-session-notice { max-width: 520px; margin-inline: auto; text-align: center; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg); padding: 28px 24px; }
.admin-session-notice p { color: var(--nc-muted); margin: 0 0 16px; font-size: 13.5px; }

/* ---------- chat ---------- */
.chat-shell { display: flex; flex-direction: column; min-height: calc(100vh - 60px - 26px - 60px); }
.chat-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-toolbar .h1 { font-size: 20px; }
.chat-log { background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: var(--nc-radius-lg); padding: 20px; height: 48vh; min-height: 260px; overflow-y: auto; }
.msg { display: flex; gap: 12px; margin-bottom: 22px; position: relative; }
.msg:last-child { margin-bottom: 4px; }
.msg .who { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.msg.u .who { background: var(--nc-surface-2); color: var(--nc-muted); }
.msg.a .who { background: var(--nc-teal-deep); color: var(--nc-teal); }
.msg.e .who { background: var(--nc-amber-deep); color: var(--nc-amber); }
.msg .body { flex: 1; min-width: 0; }
.msg .body p { margin: 0 0 10px; line-height: 1.65; }
.msg .body p:last-child { margin-bottom: 0; }
.msg .body img { max-width: 100%; border-radius: 10px; }
.msg .body table { border-collapse: collapse; margin: 8px 0; }
.msg .body th, .msg .body td { border: 1px solid var(--nc-border); padding: 5px 10px; }
.msg .body blockquote { border-left: 3px solid var(--nc-border-2); margin: 0 0 10px; padding-left: 12px; color: var(--nc-muted); }
.msg .meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 12px; color: var(--nc-dim); }
.msg .meta .name { font-weight: 600; color: var(--nc-text-2); }
.msg .meta .status { color: var(--nc-teal); font-weight: 600; }
.msg.e .meta .status { color: var(--nc-amber); }
.msg .msg-panel { background: var(--nc-bg); border: 1px solid var(--nc-border); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 12.5px; }
.msg .msg-panel dl { margin: 0; }
.msg .msg-panel dt { color: var(--nc-dim); font-weight: 500; }
.msg .msg-panel dd { color: var(--nc-text-2); margin-bottom: 3px; }
.msg .reasoning { border-left: 2px solid var(--nc-border-2); padding-left: 10px; margin: 4px 0 10px; color: var(--nc-muted); font-size: 12.5px; }
.msg .reasoning ol { padding-left: 16px; margin: 4px 0 0; }
.msg .actrow { display: flex; gap: 4px; margin-top: 6px; align-items: center; flex-wrap: wrap; }
.msg .actrow .a {
    height: 26px; padding: 0 8px; border-radius: 7px; display: inline-flex; align-items: center; gap: 5px;
    color: var(--nc-dim); cursor: pointer; background: transparent; border: 0; font-family: inherit; font-size: 12px; font-weight: 600;
}
.msg .actrow .a:hover { background: var(--nc-surface-2); color: var(--nc-text); }
.msg .actrow .a.on { color: var(--nc-teal); }
.msg .actrow .a.warn { color: var(--nc-amber); }
.msg .actrow .a.dgr:hover { color: var(--nc-red-2); background: rgba(239, 68, 68, 0.1); }
.msg .actrow .a .ic { width: 13px; height: 13px; }
.msg .actrow .time { margin-left: auto; font-size: 11.5px; color: var(--nc-dim); }
.msg .split-action-btn { position: absolute; right: 0; top: -6px; display: none; }
.msg:hover .split-action-btn { display: inline-flex; }
/* A failed response keeps the AI message layout - reasoning, sources, details - on an amber body. */
.msg.e .body { background: var(--nc-amber-deep); border: 1px solid rgba(251, 191, 36, 0.3); border-radius: 12px; padding: 12px 14px; color: #fde68a; }
.msg.e .body .reasoning { border-left-color: rgba(251, 191, 36, 0.35); color: rgba(253, 230, 138, 0.8); }
.msg.e .body .msg-panel { background: rgba(0, 0, 0, 0.22); border-color: rgba(251, 191, 36, 0.2); }
.msg.e .body .msg-panel dd { color: #fde68a; }
.msg.e .body .msg-panel a, .msg.e .body a { color: var(--nc-amber); }
.msg.e .body code { color: var(--nc-amber); background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.1); }
.msg.e .err-ref { font-size: 12px; margin-top: 8px; color: rgba(253, 230, 138, 0.85); }
.msg.e .body .dim, .msg.e .body .muted, .msg.e .meta { color: rgba(253, 230, 138, 0.7); }
.msg.e .meta .name { color: #fde68a; }
.msg.e .actrow .a { color: rgba(253, 230, 138, 0.75); }
.msg.e .actrow .a:hover { background: rgba(0, 0, 0, 0.25); color: #fde68a; }
.msg.e .actrow .a.on, .msg.e .actrow .a.warn { color: var(--nc-amber); }
.raw-message-text { margin: 0; border: 0; background: transparent; color: inherit; font: inherit; overflow-wrap: anywhere; white-space: pre-wrap; padding: 0; }
.thinking { animation: ReasoningLoop 3s ease-in-out infinite; color: var(--nc-muted); font-style: italic; }
@keyframes ReasoningLoop { 0% { opacity: 0.35; } 50% { opacity: 1; } 100% { opacity: 0.35; } }
.composer { border: 1px solid var(--nc-border-2); border-radius: 16px; background: var(--nc-surface); padding: 12px 14px; }
.composer:focus-within { border-color: rgba(45, 212, 191, 0.5); }
.composer textarea { width: 100%; background: transparent; border: none; outline: none; color: var(--nc-text); font-family: inherit; font-size: 14.5px; line-height: 1.5; resize: none; padding: 2px 0; box-shadow: none; min-height: 0; }
.composer textarea:focus { box-shadow: none; }
.composer .bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.send { width: 38px; height: 38px; border-radius: 12px; background: var(--nc-teal); color: var(--nc-teal-ink); border: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.12s; }
.send:hover { background: var(--nc-teal-2); }
.send:disabled { background: var(--nc-border-2); color: var(--nc-dim); cursor: not-allowed; }
.send .ic { width: 17px; height: 17px; }
.attach-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.context-panel { max-height: 300px; overflow-y: auto; }
.context-item { display: flex; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; align-items: flex-start; }
.context-item:hover { background: rgba(255, 255, 255, 0.04); }
.context-item.on { background: var(--nc-teal-deep); }
.context-item .txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.model-tooltip { display: none; }
.generation-settings-panel { border-top: 1px solid var(--nc-border); padding-top: 8px; }
.token-usage-section { border-top: 1px dashed var(--nc-border); }
.chat-title-edit-form { min-width: min(32rem, 70vw); }
.chat-title-edit-input { min-width: min(20rem, 50vw); }
.deep-research-box { border: 1px solid var(--nc-border); border-radius: 12px; padding: 12px 14px; background: var(--nc-bg); }

/* ---------- notifications ---------- */
.estack { position: fixed; top: 70px; right: 20px; width: 380px; max-width: calc(100vw - 30px); z-index: 1085; display: flex; flex-direction: column; gap: 10px; }
.etoast { background: #2a1214; border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 12px; padding: 13px 15px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); color: var(--nc-text); }
.etoast .top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.etoast .x { margin-left: auto; color: var(--nc-red-2); cursor: pointer; background: none; border: none; font-size: 18px; line-height: 1; padding: 0 2px; }
.etoast .url { font-family: var(--nc-mono); font-size: 12px; color: #f8a5a5; margin-bottom: 4px; word-break: break-all; }
.etoast .body { font-size: 12.5px; color: var(--nc-muted); white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow: auto; }
.etoast.clickable { cursor: pointer; }
.etoast.stacked { position: absolute; left: 0; right: 0; }
.etoast .btn-link { padding: 0; font-size: 12px; }
.etoast .estack-actions { display: flex; gap: 6px; margin-left: auto; }
.bstack { position: fixed; bottom: 20px; right: 20px; width: 380px; max-width: calc(100vw - 30px); z-index: 1085; display: flex; flex-direction: column; gap: 10px; }
.btoast { background: var(--nc-blue-deep); border: 1px solid rgba(96, 165, 250, 0.35); border-radius: 12px; padding: 13px 15px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); color: var(--nc-text); }
.btoast .top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.btoast .x { margin-left: auto; color: var(--nc-blue); cursor: pointer; background: none; border: none; font-size: 18px; line-height: 1; }

/* ---------- misc ---------- */
.empty { color: var(--nc-dim); font-size: 13.5px; padding: 18px 0; }
.loading-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--nc-muted); font-size: 13.5px; }
.chart-container { position: relative; height: 300px; width: 100%; }
div.math { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
div.math .katex-display { margin: 0.75rem 0; }
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--nc-dim); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }
.img-fluid { max-width: 100%; height: auto; }
dl.row dt { color: var(--nc-dim); font-weight: 500; }
dl.row dd { color: var(--nc-text-2); }
.text-break { word-break: break-word; overflow-wrap: anywhere; }
.opacity-75 { opacity: 0.75; }

/* ---------- Blazor boot / errors ---------- */
#blazor-error-ui {
    color-scheme: dark;
    background: #2a1214;
    color: #f8a5a5;
    border-top: 1px solid rgba(239, 68, 68, 0.35);
    bottom: 0; left: 0; width: 100%; box-sizing: border-box;
    display: none; padding: 0.6rem 1.25rem 0.7rem; position: fixed; z-index: 1000;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
#blazor-error-ui .reload { color: var(--nc-teal); margin-left: 8px; }
.blazor-error-boundary { padding: 1rem 1rem 1rem 1.5rem; color: #f8a5a5; background: #2a1214; border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 12px; }
.blazor-error-boundary::after { content: "An error has occurred."; }
.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; }
.loading-progress circle { fill: none; stroke: var(--nc-border); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--nc-teal); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: 600; color: var(--nc-muted); inset: calc(20vh + 3.25rem) 0 auto 0.2rem; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }

/* Admin pager page picker: narrow enough to sit inline with the summary and buttons. */
.admin-pager-jump { flex: 0 0 auto; }
.admin-pager-jump-input { width: 5.5rem; }

/* Language code column in the translated-description editors. */
.product-description-language { max-width: 14rem; }