/**
 * ServerForge UI System
 * 1. Reset  2. Tokens  3. Typography  4. Layout  5. Components
 * 6. Page patterns  7. Utilities  8. Responsive  9. Accessibility
 */

/* ==========================================================================
   1–2. Reset and design tokens
   ========================================================================== */

:root {
    color-scheme: dark;

    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Outfit", var(--font-sans);
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

    --bg-primary: #060914;
    --bg-secondary: #090e1b;
    --bg-elevated: #0c1222;
    --surface-primary: #101829;
    --surface-secondary: #141e32;
    --surface-hover: #19243a;
    --surface-inset: #080d18;

    --border-subtle: rgba(148, 163, 184, 0.11);
    --border-default: rgba(148, 163, 184, 0.18);
    --border-strong: rgba(148, 163, 184, 0.29);

    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-disabled: #64748b;

    --primary: #7c3aed;
    --primary-hover: #8b5cf6;
    --primary-active: #6d28d9;
    --primary-soft: rgba(124, 58, 237, 0.14);
    --primary-border: rgba(139, 92, 246, 0.34);
    --accent: #38bdf8;
    --accent-soft: rgba(56, 189, 248, 0.11);

    --success: #22c55e;
    --success-soft: rgba(34, 197, 94, 0.11);
    --warning: #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.11);
    --danger: #ef4444;
    --danger-soft: rgba(239, 68, 68, 0.11);
    --info: #3b82f6;
    --info-soft: rgba(59, 130, 246, 0.11);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-round: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.28);
    --focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.3);

    --transition-fast: 160ms ease;
    --transition-base: 220ms ease;
    --container: 80rem;
    --content-container: 90rem;
    --sidebar-width: 18rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-width: 20rem;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body {
    min-width: 20rem;
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
}

img,
svg,
canvas {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

a {
    text-underline-offset: 0.2em;
}

::selection {
    background: rgba(124, 58, 237, 0.52);
    color: #fff;
}

:focus-visible {
    outline: 2px solid #a78bfa;
    outline-offset: 3px;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

.font-mono {
    font-family: var(--font-mono);
}

.font-display {
    font-family: var(--font-display);
}

.text-gradient,
.sf-landing-gradient-text {
    background: linear-gradient(110deg, #c4b5fd 5%, #a78bfa 52%, #7dd3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sf-content :where(.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\]) {
    font-size: 0.75rem;
    line-height: 1.45;
}

.sf-content .text-xs {
    font-size: 0.8125rem;
    line-height: 1.55;
}

.sf-content .text-sm {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.sf-auth-body :where(.text-\[9px\], .text-\[10px\], .text-\[11px\]) {
    font-size: 0.75rem;
}

.sf-auth-body .text-xs {
    font-size: 0.8125rem;
}

.sf-auth-body .text-sm {
    font-size: 0.9375rem;
}

.sf-landing :where(.text-\[8px\], .text-\[9px\], .text-\[10px\], .text-\[11px\]) {
    font-size: 0.75rem;
    line-height: 1.5;
}

.sf-landing .text-xs {
    font-size: 0.8125rem;
}

/* ==========================================================================
   4. Shared layout and application shell
   ========================================================================== */

.sf-app-body {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 78% -8%, rgba(124, 58, 237, 0.08), transparent 30rem),
        var(--bg-primary);
}

.sf-app-body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    content: "";
    background-image: linear-gradient(rgba(148, 163, 184, 0.018) 1px, transparent 1px);
    background-size: 100% 4rem;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.sf-container {
    width: min(calc(100% - 2.5rem), var(--container));
    margin-inline: auto;
}

.sf-app-shell {
    min-height: 100vh;
    min-height: 100dvh;
}

.sf-sidebar-shell {
    width: var(--sidebar-width);
    border-color: var(--border-subtle);
    background: rgba(8, 13, 25, 0.97);
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.18);
}

.sf-sidebar-shell > div:first-child {
    min-height: 5rem;
    border-color: var(--border-subtle);
}

.sf-brand-mark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--primary);
    box-shadow: var(--shadow-sm);
}

.sf-brand-mark::after {
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    content: "";
    background: linear-gradient(145deg, rgba(255,255,255,0.16), transparent 62%);
}

.sf-sidebar-nav {
    scrollbar-color: rgba(148, 163, 184, 0.22) transparent;
}

.sf-sidebar-nav > div > span {
    color: var(--text-disabled);
    font-size: 0.75rem;
    letter-spacing: 0.13em;
}

.sf-sidebar-item {
    position: relative;
    min-height: 2.875rem;
    border: 1px solid transparent;
    border-left-width: 3px;
    color: var(--text-muted);
    font-size: 0.875rem;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.sf-sidebar-item:hover {
    border-color: var(--border-subtle);
    border-left-color: var(--border-subtle);
    background: rgba(148, 163, 184, 0.055);
    color: var(--text-primary);
}

.sf-sidebar-item.is-active {
    border-color: rgba(139, 92, 246, 0.13);
    border-left-color: #8b5cf6;
    background: var(--primary-soft);
    color: #ddd6fe;
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.035);
}

.sf-sidebar-item i {
    color: currentColor;
    opacity: 0.78;
    transform: none;
}

.sf-sidebar-item:hover i {
    transform: none;
}

.sf-sidebar-user {
    border-color: var(--border-subtle);
    background: rgba(6, 10, 19, 0.92);
}

.sf-sidebar-user > div {
    border-color: var(--border-subtle);
    background: rgba(16, 24, 41, 0.76);
}

.sf-sidebar-user p {
    font-size: 0.75rem;
}

.sf-sidebar-shell :where(.text-\[9px\], .text-\[10px\], .text-\[11px\]),
.sf-topbar :where(.text-\[9px\], .text-\[10px\], .text-\[11px\]),
.sf-command-panel :where(.text-\[9px\], .text-\[10px\], .text-\[11px\]) {
    font-size: 0.75rem;
}

.sf-app-body kbd {
    font-size: 0.75rem;
}

.sf-topbar {
    min-height: 4.75rem;
    border-color: var(--border-subtle);
    background: rgba(6, 9, 20, 0.84);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.018);
}

.sf-topbar-title {
    font-size: clamp(1rem, 0.92rem + 0.2vw, 1.125rem);
}

.sf-content {
    overscroll-behavior: contain;
    scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
    scrollbar-gutter: stable;
    padding: clamp(1rem, 2.2vw, 2.5rem);
}

.sf-content > * {
    width: 100%;
    max-width: var(--content-container);
    margin-inline: auto;
}

.sf-content-assistant {
    overflow: hidden;
}

.sf-content-assistant > .sf-assistant-page {
    height: 100%;
    min-height: 0;
}

/* ==========================================================================
   5. Shared components
   ========================================================================== */

.sf-surface,
.glass-card,
.sf-card {
    border: 1px solid var(--border-subtle);
    background: linear-gradient(145deg, rgba(17, 25, 43, 0.94), rgba(11, 17, 31, 0.94));
    box-shadow: var(--shadow-sm);
}

.glass-card-hover,
.sf-card {
    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.glass-card-hover:hover,
.sf-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-default);
    background: linear-gradient(145deg, rgba(20, 30, 50, 0.97), rgba(13, 20, 35, 0.97));
    box-shadow: var(--shadow-md);
}

.sf-card-glow:hover {
    box-shadow: var(--shadow-md);
}

.border-gradient {
    border: 1px solid var(--primary-border);
}

/* Forms */

.sf-label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.sf-input,
.sf-auth-body input:not([type="checkbox"]):not([type="radio"]),
.sf-auth-body select,
.sf-auth-body textarea {
    width: 100%;
    min-height: 3rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-inset);
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.45;
    padding: 0.75rem 0.9375rem;
    outline: none;
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

textarea.sf-input,
.sf-auth-body textarea {
    min-height: 7rem;
}

.sf-input::placeholder,
.sf-auth-body input::placeholder,
.sf-auth-body textarea::placeholder {
    color: #66758e;
}

.sf-input:hover:not(:disabled),
.sf-auth-body input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled),
.sf-auth-body select:hover:not(:disabled),
.sf-auth-body textarea:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: #0a1020;
}

.sf-input:focus,
.sf-auth-body input:not([type="checkbox"]):not([type="radio"]):focus,
.sf-auth-body select:focus,
.sf-auth-body textarea:focus {
    border-color: #8b5cf6;
    box-shadow: var(--focus-ring);
}

.sf-input:disabled,
.sf-auth-body input:disabled,
.sf-auth-body select:disabled,
.sf-auth-body textarea:disabled {
    cursor: not-allowed;
    border-color: var(--border-subtle);
    background: rgba(15, 23, 42, 0.52);
    color: var(--text-disabled);
    opacity: 0.72;
}

.sf-input.error,
.sf-input[aria-invalid="true"],
.sf-auth-body [aria-invalid="true"] {
    border-color: rgba(239, 68, 68, 0.66);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14);
}

.sf-field-error {
    margin-top: 0.45rem;
    color: #fca5a5;
    font-size: 0.75rem;
    font-weight: 550;
    line-height: 1.45;
}

/* Legacy form markup is normalized inside the authenticated workspace. */
.sf-content :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    select,
    textarea
):not(.sf-input) {
    min-height: 3rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-inset);
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.45;
    padding: 0.75rem 0.9375rem;
    outline: none;
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.sf-content :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    select,
    textarea
):not(.sf-input):focus {
    border-color: #8b5cf6;
    box-shadow: var(--focus-ring);
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--primary);
}

.sf-auth-body input:-webkit-autofill,
.sf-auth-body input:-webkit-autofill:hover,
.sf-auth-body input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 3rem var(--surface-inset) inset;
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--text-primary);
}

/* Buttons */

.sf-btn {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 0.65rem 1rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.sf-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.sf-btn:active:not(:disabled) {
    transform: translateY(0);
}

.sf-btn:focus-visible {
    outline: 2px solid #c4b5fd;
    outline-offset: 3px;
}

.sf-btn:disabled,
.sf-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.52;
    transform: none;
    box-shadow: none;
}

.sf-btn-primary {
    border-color: rgba(167, 139, 250, 0.34);
    background: var(--primary);
    color: #fff;
    box-shadow: 0 8px 22px rgba(76, 29, 149, 0.24);
}

.sf-btn-primary:hover:not(:disabled) {
    border-color: rgba(196, 181, 253, 0.46);
    background: var(--primary-hover);
    box-shadow: 0 10px 26px rgba(76, 29, 149, 0.3);
}

.sf-btn-primary:active:not(:disabled) {
    background: var(--primary-active);
}

.sf-btn-secondary {
    border-color: var(--border-default);
    background: rgba(15, 23, 42, 0.72);
    color: var(--text-secondary);
}

.sf-btn-secondary:hover:not(:disabled) {
    border-color: var(--border-strong);
    background: var(--surface-hover);
    color: var(--text-primary);
}

.sf-btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-muted);
}

.sf-btn-ghost:hover:not(:disabled) {
    border-color: var(--border-subtle);
    background: rgba(148, 163, 184, 0.07);
    color: var(--text-primary);
}

.sf-btn-danger {
    border-color: rgba(239, 68, 68, 0.25);
    background: var(--danger-soft);
    color: #fca5a5;
}

.sf-btn-danger:hover:not(:disabled) {
    border-color: rgba(239, 68, 68, 0.42);
    background: rgba(239, 68, 68, 0.17);
}

.sf-btn-sm {
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
}

/* Badges, alerts and feedback */

.sf-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #a5b4fc;
    font-size: 0.6875rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    line-height: 1.25;
    text-transform: uppercase;
}

.sf-eyebrow::before {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999px;
    background: var(--primary);
    content: "";
}

.sf-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 1.625rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-round);
    padding: 0.25rem 0.625rem;
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
}

.sf-badge-success { border-color: rgba(34,197,94,.25); background: var(--success-soft); color: #86efac; }
.sf-badge-danger { border-color: rgba(239,68,68,.25); background: var(--danger-soft); color: #fca5a5; }
.sf-badge-warning { border-color: rgba(245,158,11,.25); background: var(--warning-soft); color: #fcd34d; }
.sf-badge-info { border-color: rgba(59,130,246,.25); background: var(--info-soft); color: #93c5fd; }
.sf-badge-purple { border-color: var(--primary-border); background: var(--primary-soft); color: #c4b5fd; }
.sf-badge-gray { color: var(--text-muted); }

.sf-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.sf-alert-danger { border-color: rgba(239,68,68,.25); background: var(--danger-soft); color: #fecaca; }
.sf-alert-success { border-color: rgba(34,197,94,.25); background: var(--success-soft); color: #bbf7d0; }
.sf-alert-warning { border-color: rgba(245,158,11,.25); background: var(--warning-soft); color: #fde68a; }
.sf-alert-info { border-color: rgba(59,130,246,.25); background: var(--info-soft); color: #bfdbfe; }

/* Tables */

.sf-table-shell {
    border: 1px solid var(--border-subtle);
    background: rgba(11, 17, 31, 0.9);
}

.sf-table-shell table {
    min-width: 44rem;
    font-size: 0.875rem;
}

.sf-table-shell thead {
    position: sticky;
    z-index: 1;
    top: 0;
}

.sf-table-shell th {
    height: 3.25rem;
    padding: 0.875rem 1.25rem;
    background: #0c1323;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.065em;
}

.sf-table-shell td {
    min-height: 3.75rem;
    padding: 1rem 1.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.sf-table-shell tbody tr {
    border-color: var(--border-subtle);
    transition: background-color var(--transition-fast);
}

.sf-table-shell tbody tr:hover {
    background: rgba(148, 163, 184, 0.055);
}

.sf-content table:not(.sf-table-shell table) {
    font-size: 0.875rem;
}

.sf-content table:not(.sf-table-shell table) th {
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.sf-content table:not(.sf-table-shell table) td {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Modal, dropdown and command palette */

.sf-modal-backdrop {
    background: rgba(2, 6, 15, 0.76);
    backdrop-filter: blur(8px);
}

.sf-command-trigger {
    border: 1px solid var(--border-subtle);
    background: rgba(15, 23, 42, 0.7);
}

.sf-command-trigger:hover {
    border-color: var(--border-default);
    background: var(--surface-primary);
    color: var(--text-primary);
}

.sf-command-panel {
    border: 1px solid var(--border-default);
    background: rgba(11, 17, 31, 0.98);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
}

.sf-command-item[data-active="true"],
.sf-command-item:hover {
    background: var(--primary-soft);
    color: var(--text-primary);
}

/* Terminal, progress and loading */

.sf-terminal {
    overflow: auto;
    max-height: 32rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: #070b12;
    color: #d7e0ee;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.75;
    padding: var(--space-5);
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.sf-terminal .log-info { color: #7dd3fc; }
.sf-terminal .log-success { color: #86efac; }
.sf-terminal .log-warning { color: #fcd34d; }
.sf-terminal .log-error { color: #fca5a5; }
.sf-terminal .log-dim { color: #7c8aa2; }

.sf-job-terminal-shell {
    border-color: var(--border-default);
    background: #070b12;
    box-shadow: var(--shadow-md);
}

.sf-job-terminal-shell > div:first-child {
    border-color: var(--border-subtle);
    background: #0d1424;
}

.sf-job-log {
    scrollbar-color: rgba(148, 163, 184, 0.32) transparent;
    scrollbar-gutter: stable;
    font-size: 0.8125rem;
    line-height: 1.75;
}

.sf-job-log > div:not(#logPlaceholder) {
    margin-bottom: 0.1875rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding-block: 0.25rem;
}

.sf-progress {
    height: 0.5rem;
    overflow: hidden;
    border-radius: var(--radius-round);
    background: #1c273a;
}

.sf-progress-bar {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), #9b6df0 72%, var(--accent));
    transition: width 400ms ease;
}

.sf-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: sf-spin 700ms linear infinite;
}

.sf-status-dot {
    box-shadow: none;
}

/* Wizard and tooltip compatibility */

.sidebar {
    scrollbar-color: rgba(148, 163, 184, 0.24) transparent;
}

.sf-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sf-step-indicator {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-inset);
    color: var(--text-disabled);
    font-size: 0.75rem;
    font-weight: 700;
}

.sf-step-indicator.active {
    border-color: var(--primary-border);
    background: var(--primary-soft);
    color: #ddd6fe;
    box-shadow: 0 0 0 3px rgba(124,58,237,.1);
}

.sf-step-indicator.completed {
    border-color: rgba(34,197,94,.28);
    background: var(--success-soft);
    color: #86efac;
}

.sf-step-indicator.pending {
    color: var(--text-disabled);
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    position: absolute;
    z-index: 80;
    right: 0;
    bottom: calc(100% + 0.5rem);
    width: max-content;
    max-width: 16rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.625rem;
    content: attr(data-tooltip);
    pointer-events: none;
    background: #151e30;
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
    font-size: 0.75rem;
    opacity: 0;
    transform: translateY(0.25rem);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   6. Landing page
   ========================================================================== */

.sf-landing {
    background:
        radial-gradient(circle at 50% -12%, rgba(124, 58, 237, 0.12), transparent 35rem),
        var(--bg-primary);
}

.sf-landing-nav {
    min-height: 4.75rem;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(6, 9, 20, 0.88);
    backdrop-filter: blur(14px);
}

.sf-landing-nav .sf-container {
    min-height: 4.75rem;
}

.sf-landing-link {
    position: relative;
    padding: 0.5rem 0.125rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.sf-landing-link::after {
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 50%;
    height: 2px;
    border-radius: var(--radius-round);
    content: "";
    background: var(--primary-hover);
    transition: right var(--transition-fast), left var(--transition-fast);
}

.sf-landing-link:hover,
.sf-landing-link:focus-visible {
    color: var(--text-primary);
}

.sf-landing-link:hover::after,
.sf-landing-link:focus-visible::after {
    right: 0;
    left: 0;
}

.sf-hero {
    min-height: min(58rem, 100dvh);
    display: flex;
    align-items: center;
    padding-top: 8.5rem;
    padding-bottom: 6rem;
}

.sf-hero-grid {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(28rem, 0.96fr);
    gap: clamp(3rem, 6vw, 6rem);
}

.sf-hero-copy {
    max-width: 42rem;
}

.sf-hero-title {
    max-width: 42rem;
    font-size: clamp(3rem, 4.2vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.sf-hero-lead {
    color: var(--text-muted);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.75;
}

.sf-trust-list {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.sf-hero-preview {
    width: 100%;
    max-width: 39rem;
    justify-self: end;
}

.sf-landing-orb {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.4;
}

.sf-landing-orb-one {
    top: 6rem;
    left: -15rem;
    width: 30rem;
    height: 30rem;
    background: rgba(124,58,237,.13);
}

.sf-landing-orb-two {
    right: -13rem;
    bottom: 0;
    width: 26rem;
    height: 26rem;
    background: rgba(56,189,248,.075);
}

.sf-product-window {
    border: 1px solid var(--border-default);
    background: linear-gradient(150deg, rgba(20, 29, 48, 0.97), rgba(8, 13, 24, 0.97));
    box-shadow: var(--shadow-lg);
    transform: none;
}

.sf-product-window::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    content: "";
    pointer-events: none;
    background: linear-gradient(130deg, rgba(255,255,255,.045), transparent 34%);
}

.sf-product-window .text-slate-600 {
    color: #75849d;
}

.sf-supported-strip {
    border-color: var(--border-subtle);
    background: rgba(12, 18, 34, 0.54);
}

.sf-section-kicker {
    color: #a78bfa;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sf-section-title {
    max-width: 50rem;
    margin: 0.75rem auto 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.1vw, 3rem);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.sf-section-title.text-left {
    margin-left: 0;
}

.sf-section-copy {
    max-width: 42rem;
    margin: 1.25rem auto 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.sf-section-copy.text-left {
    margin-left: 0;
}

.sf-feature-grid {
    grid-auto-rows: 1fr;
}

.sf-feature-card,
.sf-workflow-step,
.sf-faq {
    border: 1px solid var(--border-subtle);
    background: rgba(15, 23, 40, 0.74);
    box-shadow: var(--shadow-sm);
}

.sf-feature-card {
    min-height: 100%;
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        background-color var(--transition-base);
}

.sf-feature-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-default);
    background: rgba(18, 28, 47, 0.88);
}

.sf-feature-card p {
    color: var(--text-muted);
}

.sf-feature-icon {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: #c4b5fd;
    font-size: 1rem;
}

.sf-feature-cyan {
    border-color: rgba(56,189,248,.24);
    background: var(--accent-soft);
    color: #7dd3fc;
}

.sf-feature-indigo,
.sf-feature-violet,
.sf-feature-emerald,
.sf-feature-amber,
.sf-feature-rose {
    border-color: var(--primary-border);
    background: var(--primary-soft);
    color: #c4b5fd;
}

.sf-workflow-list {
    position: relative;
}

.sf-workflow-step {
    min-height: 5.5rem;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.sf-workflow-step:hover {
    border-color: var(--border-default);
    background: var(--surface-primary);
}

.sf-workflow-step p {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.sf-security-stage {
    border: 1px solid var(--border-subtle);
    background:
        radial-gradient(circle at 82% 46%, rgba(124,58,237,.1), transparent 23rem),
        linear-gradient(145deg, rgba(16,24,41,.96), rgba(8,13,24,.96));
    box-shadow: var(--shadow-md);
}

.sf-security-ring {
    position: relative;
    display: grid;
    aspect-ratio: 1;
    margin: auto;
    place-items: center;
    border: 1px solid var(--border-default);
    border-radius: 50%;
}

.sf-security-ring > span {
    position: absolute;
    top: 8%;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-round);
    padding: 0.35rem 0.65rem;
    background: rgba(8,13,24,.92);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 650;
}

.sf-security-ring-outer {
    width: min(100%, 28rem);
    background: rgba(124,58,237,.025);
}

.sf-security-ring-middle {
    position: absolute;
    inset: 14%;
    width: 72%;
    background: rgba(124,58,237,.035);
}

.sf-security-ring-inner {
    position: absolute;
    inset: 29%;
    width: 42%;
    background: rgba(56,189,248,.035);
}

.sf-security-core {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    width: 7rem;
    height: 7rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary-border);
    border-radius: 50%;
    background: #11182a;
    color: #ddd6fe;
    box-shadow: 0 14px 34px rgba(0,0,0,.24);
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: center;
    transform: translate(-50%, -50%);
}

.sf-security-core i {
    margin-bottom: 0.45rem;
    font-size: 1.25rem;
}

.sf-faq {
    overflow: hidden;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.sf-faq[open] {
    border-color: var(--border-default);
    background: var(--surface-primary);
}

.sf-faq summary {
    min-height: 4rem;
}

.sf-faq p {
    color: var(--text-muted);
}

.sf-cta {
    position: relative;
    border: 1px solid var(--primary-border);
    background:
        radial-gradient(circle at 50% 0, rgba(124,58,237,.16), transparent 26rem),
        linear-gradient(145deg, #11192a, #0a101e);
    box-shadow: var(--shadow-md);
}

.sf-landing [data-reveal] {
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 320ms ease, transform 320ms ease;
}

.sf-landing [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

.sf-landing .animate-pulse,
.sf-landing .animate-ping {
    animation: none;
}

/* ==========================================================================
   Authentication
   ========================================================================== */

.sf-auth-body {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(circle at 16% 14%, rgba(124,58,237,.1), transparent 25rem),
        radial-gradient(circle at 84% 84%, rgba(56,189,248,.055), transparent 22rem),
        var(--bg-primary);
}

.sf-auth-ambient > div {
    animation: none;
    opacity: 0.45;
}

.sf-auth-shell {
    width: min(100%, 75rem);
    min-height: min(46rem, calc(100dvh - 4rem));
    grid-template-columns: minmax(0, 1fr) minmax(26rem, 0.86fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    padding: 2rem;
}

.sf-auth-story {
    min-height: 42rem;
    padding: clamp(2.25rem, 4vw, 3.5rem);
    background:
        radial-gradient(circle at 80% 12%, rgba(124,58,237,.12), transparent 22rem),
        linear-gradient(145deg, rgba(16,24,41,.97), rgba(8,14,26,.97));
}

.sf-auth-story h1 {
    max-width: 30rem;
    font-size: clamp(2.25rem, 3.4vw, 3.25rem);
    line-height: 1.08;
}

.sf-auth-story p {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.sf-auth-story > div:last-child > div {
    min-height: 6rem;
}

.sf-auth-panel {
    max-width: 30rem;
}

.sf-auth-brand {
    margin-bottom: 1.5rem;
}

.sf-auth-card {
    width: 100%;
    border-color: var(--border-default);
    border-radius: var(--radius-2xl);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    background: rgba(15, 23, 40, 0.94);
    box-shadow: var(--shadow-lg);
}

.sf-auth-card h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2rem);
    line-height: 1.2;
}

.sf-auth-form {
    display: grid;
    gap: 0;
}

.sf-auth-form > div {
    min-width: 0;
}

.sf-auth-form label {
    color: var(--text-secondary);
    font-size: 0.8125rem;
}

.sf-auth-form a {
    color: #a78bfa;
}

.sf-auth-form a:hover {
    color: #c4b5fd;
}

.sf-auth-form button[type="submit"] {
    min-height: 3rem;
}

.sf-auth-footer {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.sf-auth-footer span {
    color: var(--text-disabled);
    font-size: 0.75rem;
}

/* ==========================================================================
   Dashboard and data pages
   ========================================================================== */

.sf-dashboard-hero {
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

.sf-dashboard-hero h2 {
    font-size: clamp(2rem, 3vw, 2.75rem);
}

.sf-stat-grid {
    grid-auto-rows: 1fr;
}

.sf-stat-card {
    min-height: 10.5rem;
    padding: 1.5rem;
}

.sf-stat-card > div:first-child {
    margin-bottom: 1.25rem;
}

.sf-stat-card > p:first-of-type {
    font-size: clamp(2rem, 2.5vw, 2.5rem);
    line-height: 1;
}

.sf-stat-card > p:last-child {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.sf-dashboard-grid > .glass-card,
.sf-quick-actions {
    min-height: 22rem;
}

.sf-dashboard-grid canvas {
    min-height: 16rem;
}

.sf-quick-actions {
    min-height: auto;
}

.sf-action-card {
    min-height: 4.75rem;
    border-color: var(--border-subtle);
    background: rgba(9, 15, 28, 0.72);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.sf-action-card:hover {
    border-color: var(--border-default);
    background: var(--surface-primary);
}

.sf-action-card > div:first-child {
    transform: none;
}

.sf-action-card:hover > div:first-child {
    transform: none;
}

.sf-content .text-slate-500,
.sf-content .text-gray-500 {
    color: #8391a9;
}

.sf-content .text-slate-600,
.sf-content .text-gray-600 {
    color: #718099;
}

/* ==========================================================================
   7. Utilities and animations
   ========================================================================== */

.animate-fade-in {
    animation: sf-fade-in 220ms ease both;
}

.animate-slide-left {
    animation: sf-slide-left 220ms ease both;
}

.animate-pulse-glow {
    animation: none;
}

@keyframes sf-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sf-slide-left {
    from { opacity: 0; transform: translateX(0.5rem); }
    to { opacity: 1; transform: translateX(0); }
}

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

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 1279px) {
    :root {
        --content-container: 80rem;
        --sidebar-width: 17rem;
    }

    .sf-hero-grid {
        gap: 3.5rem;
    }
}

@media (max-width: 1023px) {
    .sf-sidebar-shell {
        width: min(20rem, calc(100vw - 3rem));
        box-shadow: var(--shadow-lg);
    }

    .sf-content {
        padding: 1.5rem;
    }

    .sf-hero {
        min-height: auto;
        padding-top: 9rem;
        padding-bottom: 5rem;
    }

    .sf-hero-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .sf-hero-copy {
        max-width: 46rem;
    }

    .sf-hero-preview {
        max-width: 42rem;
        justify-self: start;
    }

    .sf-auth-shell {
        width: min(100%, 38rem);
        min-height: 100dvh;
        grid-template-columns: 1fr;
        padding-block: 3rem;
    }

    .sf-auth-panel {
        max-width: 32rem;
    }

    .sf-dashboard-grid > .glass-card,
    .sf-quick-actions {
        min-height: auto;
    }
}

@media (max-width: 767px) {
    .sf-container {
        width: min(calc(100% - 2rem), var(--container));
    }

    .sf-topbar {
        min-height: 4.25rem;
    }

    .sf-content {
        padding: 1rem;
    }

    .sf-content > * {
        min-width: 0;
    }

    .sf-hero {
        padding-inline: 1rem;
        padding-top: 7.75rem;
        padding-bottom: 4rem;
    }

    .sf-hero-title {
        font-size: clamp(2.4rem, 10vw, 3.25rem);
    }

    .sf-hero-actions .sf-btn {
        width: 100%;
        min-height: 3rem;
    }

    .sf-product-window {
        border-radius: var(--radius-xl);
    }

    .sf-supported-strip {
        padding-inline: 1rem;
    }

    .sf-section-title {
        font-size: clamp(1.875rem, 8vw, 2.5rem);
    }

    .sf-section-copy {
        font-size: 0.9375rem;
    }

    .sf-workflow-step {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .sf-workflow-step > span:last-child {
        display: none;
    }

    .sf-security-ring-outer {
        max-width: 22rem;
    }

    .sf-security-core {
        width: 5.5rem;
        height: 5.5rem;
    }

    .sf-table-shell {
        overflow: hidden;
    }

    .sf-table-shell table {
        min-width: 42rem;
    }

    .sf-stat-card {
        min-height: 9.5rem;
    }

    .sf-auth-shell {
        padding: 1.5rem 1rem;
    }

    .sf-auth-brand {
        margin-bottom: 1rem;
    }
}

@media (max-width: 479px) {
    .sf-hero-title {
        font-size: clamp(2.25rem, 10vw, 2.75rem);
        letter-spacing: -0.035em;
    }

    .sf-trust-list {
        display: grid;
        gap: 0.625rem;
    }

    .sf-product-window {
        padding: 0.625rem;
    }

    .sf-product-window > div:last-child > div:first-child {
        gap: 0.5rem;
    }

    .sf-auth-card {
        padding: 1.25rem;
    }

    .sf-auth-form .grid-cols-2 {
        grid-template-columns: 1fr;
    }

    .sf-content {
        padding: 0.875rem;
    }

    .sf-content .rounded-3xl {
        border-radius: var(--radius-xl);
    }

    .sf-dashboard-hero {
        padding: 1.25rem;
    }

    .sf-table-shell th,
    .sf-table-shell td {
        padding-inline: 1rem;
    }
}

/* ==========================================================================
   ServerForge Operasyon Asistanı
   ========================================================================== */

.sf-assistant-shell {
    display: grid;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    background:
        linear-gradient(145deg, rgba(16, 24, 41, 0.96), rgba(7, 11, 22, 0.98));
    box-shadow: var(--shadow-lg);
}

.sf-assistant-history {
    display: flex;
    min-height: 0;
    flex-direction: column;
    border-right: 1px solid var(--border-subtle);
    background: rgba(7, 11, 22, 0.68);
}

.sf-assistant-thread-list {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 0.625rem;
}

.sf-assistant-thread-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.sf-assistant-thread-item + .sf-assistant-thread-item {
    margin-top: 0.25rem;
}

.sf-assistant-thread-item:hover {
    border-color: var(--border-subtle);
    background: rgba(148, 163, 184, 0.055);
}

.sf-assistant-thread-item[data-active="true"] {
    border-color: var(--primary-border);
    background: var(--primary-soft);
}

.sf-assistant-thread-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.7);
    color: #a78bfa;
    font-size: 0.75rem;
}

.sf-assistant-workspace {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.sf-assistant-header,
.sf-assistant-widget-header {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.875rem 1.25rem;
    background: rgba(12, 18, 34, 0.78);
    backdrop-filter: blur(18px);
}

.sf-assistant-orb {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    place-items: center;
    border: 1px solid rgba(167, 139, 250, 0.32);
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, rgba(124, 58, 237, 0.28), rgba(56, 189, 248, 0.1));
    color: #c4b5fd;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.sf-icon-button {
    display: inline-grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(15, 23, 42, 0.72);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.sf-icon-button:hover {
    border-color: var(--primary-border);
    background: var(--primary-soft);
    color: #ddd6fe;
}

.sf-assistant-messages,
.sf-assistant-widget-messages {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.sf-assistant-messages {
    padding: clamp(1rem, 3vw, 2rem);
    scroll-padding-block: 1rem;
}

.sf-assistant-welcome {
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: clamp(1.5rem, 5vw, 4rem) 1rem;
    text-align: center;
}

.sf-assistant-welcome-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
    place-items: center;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--primary-soft), var(--accent-soft));
    color: #c4b5fd;
    font-size: 1.35rem;
}

.sf-assistant-suggestion {
    display: flex;
    min-height: 5.25rem;
    align-items: flex-start;
    gap: 0.875rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 1rem;
    background: rgba(15, 23, 42, 0.52);
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.sf-assistant-suggestion:hover {
    border-color: var(--primary-border);
    background: rgba(124, 58, 237, 0.08);
    transform: translateY(-2px);
}

.sf-assistant-suggestion > i {
    margin-top: 0.2rem;
}

.sf-assistant-suggestion strong,
.sf-assistant-suggestion small {
    display: block;
}

.sf-assistant-suggestion strong {
    color: var(--text-primary);
    font-size: 0.875rem;
}

.sf-assistant-suggestion small {
    margin-top: 0.25rem;
    color: var(--text-disabled);
    font-size: 0.75rem;
    line-height: 1.5;
}

.sf-assistant-message {
    display: flex;
    width: min(100%, 54rem);
    gap: 0.75rem;
    margin: 0 auto 1.25rem;
}

.sf-assistant-message.is-user {
    flex-direction: row-reverse;
}

.sf-assistant-message-avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--border-default);
    border-radius: 0.7rem;
    background: var(--surface-secondary);
    color: #a78bfa;
    font-size: 0.7rem;
}

.sf-assistant-message.is-user .sf-assistant-message-avatar {
    color: #7dd3fc;
}

.sf-assistant-message-body {
    max-width: min(88%, 46rem);
}

.sf-assistant-message-copy {
    border: 1px solid var(--border-subtle);
    border-radius: 0.4rem var(--radius-lg) var(--radius-lg) var(--radius-lg);
    padding: 0.875rem 1rem;
    background: rgba(15, 23, 42, 0.66);
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.sf-assistant-message.is-user .sf-assistant-message-copy {
    border-color: var(--primary-border);
    border-radius: var(--radius-lg) 0.4rem var(--radius-lg) var(--radius-lg);
    background: rgba(124, 58, 237, 0.15);
    color: #ede9fe;
}

.sf-assistant-message-footer {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.45rem;
    color: var(--text-disabled);
    font-size: 0.68rem;
}

.sf-assistant-message-footer button {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-disabled);
    cursor: pointer;
}

.sf-assistant-message-footer button:hover,
.sf-assistant-message-footer button.is-active {
    background: var(--primary-soft);
    color: #c4b5fd;
}

.sf-assistant-thinking {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.4rem var(--radius-lg) var(--radius-lg) var(--radius-lg);
    padding: 0.75rem 0.9rem;
    background: rgba(15, 23, 42, 0.6);
}

.sf-assistant-thinking span {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: #a78bfa;
    animation: sf-assistant-dot 1.1s ease-in-out infinite;
}

.sf-assistant-thinking span:nth-child(2) {
    animation-delay: 120ms;
}

.sf-assistant-thinking span:nth-child(3) {
    animation-delay: 240ms;
}

.sf-assistant-thinking em {
    margin-left: 0.4rem;
    color: var(--text-disabled);
    font-size: 0.72rem;
    font-style: normal;
}

@keyframes sf-assistant-dot {
    0%,
    70%,
    100% { opacity: 0.35; transform: translateY(0); }
    35% { opacity: 1; transform: translateY(-0.2rem); }
}

.sf-assistant-composer {
    position: relative;
    z-index: 3;
    display: grid;
    flex: none;
    align-items: end;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    border-top: 1px solid var(--border-subtle);
    padding: 1rem 1.25rem 2rem;
    background: rgba(8, 13, 24, 0.92);
    box-shadow: 0 -18px 36px rgba(3, 7, 18, 0.2);
}

.sf-assistant-actions {
    max-height: min(15rem, 32dvh);
    flex: none;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.sf-assistant-error {
    display: grid;
    flex: none;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    box-shadow: 0 12px 30px rgba(127, 29, 29, 0.12);
}

.sf-assistant-error.hidden {
    display: none;
}

.sf-assistant-error-icon {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 0.55rem;
    background: rgba(244, 63, 94, 0.12);
    color: #fda4af;
}

.sf-assistant-error-copy {
    min-width: 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.sf-assistant-error-dismiss {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    color: #fda4af;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sf-assistant-error-dismiss:hover {
    background: rgba(244, 63, 94, 0.12);
    color: #fecdd3;
}

.sf-assistant-input {
    width: 100%;
    min-height: 3rem;
    max-height: 10rem;
    resize: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.9rem;
    background: rgba(4, 8, 18, 0.76);
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.55;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sf-assistant-input::placeholder {
    color: var(--text-disabled);
}

.sf-assistant-input:focus {
    border-color: #8b5cf6;
    box-shadow: var(--focus-ring);
}

.sf-assistant-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.sf-assistant-send {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid rgba(167, 139, 250, 0.38);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(76, 29, 149, 0.23);
    transition: filter var(--transition-fast), transform var(--transition-fast);
}

.sf-assistant-send:hover:not(:disabled) {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.sf-assistant-send:disabled {
    cursor: not-allowed;
    filter: grayscale(0.65);
    opacity: 0.55;
}

.sf-assistant-disclaimer {
    position: absolute;
    right: 1.25rem;
    bottom: 0.45rem;
    left: 1.25rem;
    color: var(--text-disabled);
    font-size: 0.66rem;
    text-align: center;
}

.sf-assistant-action {
    display: flex;
    gap: 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1rem;
    background: rgba(15, 23, 42, 0.92);
    box-shadow: var(--shadow-sm);
}

.sf-assistant-action.is-elevated {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(120, 53, 15, 0.12);
}

.sf-assistant-action-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    color: #c4b5fd;
}

.sf-assistant-action.is-elevated .sf-assistant-action-icon {
    background: var(--warning-soft);
    color: #fcd34d;
}

.sf-assistant-action-eyebrow {
    color: #a78bfa;
    font-size: 0.65rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sf-assistant-action-title {
    margin: 0.2rem 0 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.sf-assistant-action-reason {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.55;
}

.sf-assistant-risk-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.75rem;
    color: #fcd34d;
    font-size: 0.72rem;
    cursor: pointer;
}

.sf-assistant-risk-check input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.1rem;
    accent-color: #8b5cf6;
}

.sf-assistant-action-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.sf-assistant-action-controls .sf-btn {
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.72rem;
}

.sf-assistant-action-result {
    display: flex;
    width: min(100%, 52rem);
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 auto 1rem;
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    background: var(--success-soft);
    color: #86efac;
    font-size: 0.75rem;
    text-decoration: none;
}

.sf-assistant-widget-toggle {
    position: fixed;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 70;
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid rgba(167, 139, 250, 0.38);
    border-radius: 999px;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(91, 33, 182, 0.97), rgba(79, 70, 229, 0.97));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
    cursor: pointer;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.sf-assistant-widget-toggle:hover {
    transform: translateY(-2px);
}

.sf-assistant-widget-toggle.is-hidden {
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.5rem);
}

.sf-assistant-widget-panel {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 75;
    display: flex;
    width: min(26rem, calc(100vw - 2rem));
    height: min(42rem, calc(100dvh - 2rem));
    overflow: hidden;
    flex-direction: column;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    background: rgba(7, 11, 22, 0.98);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
    transform-origin: bottom right;
}

.sf-assistant-widget-panel.hidden {
    display: none;
}

.sf-assistant-widget-panel.is-open {
    animation: sf-assistant-open 180ms ease-out both;
}

@keyframes sf-assistant-open {
    from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.sf-assistant-widget-header {
    min-height: 4.25rem;
    padding: 0.75rem;
}

.sf-assistant-widget-messages {
    padding: 0.85rem;
}

.sf-assistant-widget-welcome {
    padding: 1.25rem 0.25rem;
    text-align: center;
}

.sf-assistant-widget-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.8rem;
    background: rgba(15, 23, 42, 0.55);
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
}

.sf-assistant-widget-prompt:hover {
    border-color: var(--primary-border);
    color: #ede9fe;
}

.sf-assistant-widget-composer {
    display: grid;
    align-items: end;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    border-top: 1px solid var(--border-subtle);
    padding: 0.75rem;
    background: rgba(8, 13, 24, 0.94);
}

.sf-assistant-widget-panel .sf-assistant-message {
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.sf-assistant-widget-panel .sf-assistant-message-avatar {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.6rem;
}

.sf-assistant-widget-panel .sf-assistant-message-copy {
    padding: 0.7rem 0.8rem;
    font-size: 0.78rem;
    line-height: 1.6;
}

.sf-assistant-widget-panel .sf-assistant-input {
    min-height: 2.75rem;
    max-height: 7rem;
    padding: 0.65rem 0.75rem;
    font-size: 0.8rem;
}

.sf-assistant-widget-panel .sf-assistant-send {
    width: 2.75rem;
    height: 2.75rem;
}

.sf-assistant-usage-bars {
    display: grid;
    height: 18rem;
    align-items: end;
    grid-template-columns: repeat(30, minmax(0, 1fr));
    gap: 0.3rem;
    border-bottom: 1px solid var(--border-default);
}

.sf-assistant-usage-day {
    position: relative;
    height: 100%;
}

.sf-assistant-usage-day > span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 0.25rem;
    border-radius: 0.25rem 0.25rem 0 0;
    background: linear-gradient(to top, #6d28d9, #818cf8);
    opacity: 0.82;
}

.sf-assistant-usage-day > i {
    position: absolute;
    left: 50%;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 999px;
    background: #fb7185;
    transform: translate(-50%, 50%);
}

@media (max-width: 900px) {
    .sf-assistant-shell {
        height: 100%;
        min-height: 0;
        grid-template-columns: 1fr;
    }

    .sf-assistant-history {
        max-height: 11rem;
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .sf-assistant-history > div:last-child {
        display: none;
    }

    .sf-assistant-thread-list {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .sf-assistant-thread-item {
        width: 15rem;
        flex: none;
    }

    .sf-assistant-thread-item + .sf-assistant-thread-item {
        margin-top: 0;
    }
}

@media (max-width: 520px) {
    .sf-content-assistant {
        padding: 0;
    }

    .sf-assistant-shell {
        height: 100%;
        min-height: 0;
        margin: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .sf-assistant-history {
        max-height: 9.75rem;
    }

    .sf-assistant-header {
        min-height: 4.25rem;
        padding: 0.75rem;
    }

    .sf-assistant-header .sf-assistant-orb {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.75rem;
    }

    .sf-assistant-messages {
        padding: 0.9rem 0.7rem;
    }

    .sf-assistant-message-body {
        max-width: calc(100% - 2.25rem);
    }

    .sf-assistant-composer {
        padding: 0.75rem 0.75rem 2.25rem;
    }

    .sf-assistant-error {
        margin: 0 0.75rem 0.65rem;
        padding: 0.65rem 0.75rem;
    }

    .sf-assistant-action {
        padding: 0.8rem;
    }

    .sf-assistant-action-controls .sf-btn {
        flex: 1;
        justify-content: center;
    }

    .sf-assistant-widget-toggle {
        right: 0.8rem;
        bottom: 0.8rem;
    }

    .sf-assistant-widget-panel {
        inset: 0;
        width: 100%;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }
}

/* Standalone error pages */

.sf-error-body {
    display: grid;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 18% 10%, rgba(124,58,237,.12), transparent 27rem),
        var(--bg-primary);
    color: var(--text-secondary);
    font-family: var(--font-sans);
}

.sf-error-card {
    width: min(100%, 36rem);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2xl);
    padding: clamp(1.75rem, 5vw, 3rem);
    background: linear-gradient(145deg, rgba(17,25,43,.97), rgba(9,14,27,.97));
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.sf-error-icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    place-items: center;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-lg);
    background: var(--primary-soft);
    color: #c4b5fd;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 800;
}

.sf-error-icon.is-danger {
    border-color: rgba(239,68,68,.28);
    background: var(--danger-soft);
    color: #fca5a5;
}

.sf-error-code {
    color: #a78bfa;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sf-error-card h1 {
    margin: 0.75rem 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    line-height: 1.2;
}

.sf-error-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.sf-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

@media (max-width: 479px) {
    .sf-error-actions .sf-btn {
        width: 100%;
    }
}

/* ==========================================================================
   9. Accessibility and platform preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .sf-landing [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

@media (forced-colors: active) {
    .sf-btn,
    .sf-input,
    .sf-card,
    .glass-card,
    .sf-surface,
    .sf-sidebar-item {
        border: 1px solid CanvasText;
    }
}

@media print {
    .sf-sidebar-shell,
    .sf-topbar,
    .sf-btn,
    [data-tooltip]::after {
        display: none;
    }

    .sf-content {
        overflow: visible;
        padding: 0;
    }

    body {
        background: #fff;
        color: #111827;
    }
}