:root {
    color-scheme: dark;
    --octap-font-family-ui: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --octap-font-family-panel: Manrope, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    --octap-font-10: 10px;
    --octap-font-11: 11px;
    --octap-font-12: 12px;
    --octap-font-13: 13px;
    --octap-font-14: 14px;
    --octap-font-15: 15px;
    --octap-font-16: 16px;
    --octap-font-18: 18px;
    --octap-font-22: 22px;
    --octap-font-28: 28px;
    --octap-weight-regular: 400;
    --octap-weight-medium: 500;
    --octap-weight-semibold: 650;
    --octap-weight-bold: 720;
    --octap-weight-brand: 760;

    --octap-bg: #0b0e13;
    --octap-page-bg: #0b0e13;
    --octap-surface: rgba(18, 22, 28, 0.94);
    --octap-surface-strong: rgba(22, 26, 33, 0.96);
    --octap-surface-deep: #090b0e;
    --octap-surface-soft: rgba(255, 255, 255, 0.035);
    --octap-surface-hover: rgba(255, 255, 255, 0.06);
    --octap-panel-bg: rgba(16, 20, 25, 0.9);
    --octap-panel-line: rgba(255, 255, 255, 0.05);
    --octap-panel-hover: rgba(255, 255, 255, 0.08);
    --octap-card: rgba(22, 26, 33, 0.92);
    --octap-card-hover: rgba(25, 30, 38, 0.96);
    --octap-modal-backdrop: #05080d;
    --octap-modal-panel: #11161c;
    --octap-modal-panel-strong: #151b23;
    --octap-control-solid-bg: #171d24;
    --octap-control-solid-hover-bg: #1c242d;
    --octap-control-solid-active-bg: #2a2117;
    --octap-control-solid-danger-bg: #2a1719;
    --octap-thumb: #20252c;
    --octap-line: rgba(255, 255, 255, 0.06);
    --octap-line-strong: rgba(255, 255, 255, 0.11);
    --octap-text: #f5f6fe;
    --octap-muted: #a9abb2;
    --octap-faint: #777d87;
    --octap-accent: #ffa84f;
    --octap-accent-strong: #ff9500;
    --octap-accent-soft: rgba(255, 168, 79, 0.14);
    --octap-accent-line: rgba(255, 168, 79, 0.22);
    --octap-accent-mid: rgba(255, 168, 79, 0.42);
    --octap-accent-text: #ffe8bd;
    --octap-ai-accent: #ff9f1c;
    --octap-gradient-primary: linear-gradient(135deg, #ffb347 0%, #ff9500 100%);
    --octap-focus-ring: 0 0 0 2px rgba(255, 168, 79, 0.18);

    --octap-danger: #ff8f8f;
    --octap-danger-text: #ffc2c2;
    --octap-danger-soft: rgba(248, 113, 113, 0.08);
    --octap-danger-line: rgba(248, 113, 113, 0.34);

    --octap-node-port-border: rgba(255, 168, 79, 0.28);
    --octap-node-port-bg: rgba(255, 168, 79, 0.12);
    --octap-node-port-fg: rgba(255, 205, 142, 0.72);
    --octap-node-port-hover-border: rgba(255, 179, 71, 0.8);
    --octap-node-port-hover-bg: rgba(255, 168, 79, 0.2);
    --octap-node-port-hover-fg: rgba(255, 255, 255, 0.95);
    --octap-node-port-halo: rgba(255, 179, 71, 0.12);
    --octap-node-port-glow: rgba(255, 168, 79, 0.36);

    --octap-action-bg: rgba(255, 255, 255, 0.04);
    --octap-action-border: rgba(255, 255, 255, 0.08);
    --octap-action-hover-bg: rgba(255, 255, 255, 0.08);
    --octap-action-active-bg: rgba(255, 168, 79, 0.16);
    --octap-action-active-border: rgba(255, 168, 79, 0.52);
    --octap-menu-bg: #151a20;
    --octap-shadow-panel: 0 18px 50px rgba(0, 0, 0, 0.42);
    --octap-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.48);
    --octap-shadow-floating: 0 18px 46px rgba(0, 0, 0, 0.42);
    --octap-shadow-sidebar: 0 0 40px rgba(255, 168, 79, 0.05), 0 8px 32px rgba(0, 0, 0, 0.4);

    --octap-radius-xs: 6px;
    --octap-radius-sm: 8px;
    --octap-radius-md: 10px;
    --octap-radius-lg: 12px;
    --octap-radius-xl: 16px;
    --octap-radius-pill: 999px;

    --octap-icon-xs: 12px;
    --octap-icon-sm: 15px;
    --octap-icon-md: 16px;
    --octap-icon-toolbar: 17px;
    --octap-icon-lg: 18px;
    --octap-icon-xl: 22px;

    --octap-control-2xs: 22px;
    --octap-control-xs-row: 24px;
    --octap-control-xs: 28px;
    --octap-control-sm: 30px;
    --octap-control-md: 34px;
    --octap-control-lg: 36px;
    --octap-toolbar-height: 60px;
    --octap-grid-spacing: 24px;
    --octap-grid-dot-size: 1px;
    --octap-grid-dot: rgba(140, 168, 210, 0.1);
    --octap-selection-bg: rgba(0, 95, 215, 0.78);
    --octap-selection-fg: #ffffff;
    --octap-ease: cubic-bezier(.22, .61, .36, 1);
}

body[data-theme="light"] {
    color-scheme: light;
    --octap-bg: #ffffff;
    --octap-page-bg: #f4f6fa;
    --octap-surface: rgba(255, 255, 255, 0.92);
    --octap-surface-strong: rgba(255, 255, 255, 0.98);
    --octap-surface-deep: #ffffff;
    --octap-surface-soft: rgba(255, 255, 255, 0.72);
    --octap-surface-hover: rgba(18, 24, 35, 0.06);
    --octap-panel-bg: rgba(255, 255, 255, 0.96);
    --octap-panel-line: rgba(18, 24, 35, 0.1);
    --octap-panel-hover: rgba(18, 24, 35, 0.06);
    --octap-card: rgba(255, 255, 255, 0.72);
    --octap-card-hover: rgba(255, 255, 255, 0.92);
    --octap-modal-backdrop: #f5f7fa;
    --octap-modal-panel: #ffffff;
    --octap-modal-panel-strong: #f6f8fb;
    --octap-control-solid-bg: #f7f9fc;
    --octap-control-solid-hover-bg: #eef2f7;
    --octap-control-solid-active-bg: #fff4e4;
    --octap-control-solid-danger-bg: #fff0f0;
    --octap-thumb: #e2e5ea;
    --octap-line: rgba(14, 20, 30, 0.08);
    --octap-line-strong: rgba(14, 20, 30, 0.14);
    --octap-text: #151922;
    --octap-muted: #555d6b;
    --octap-faint: #8a92a0;
    --octap-accent: #e68c0f;
    --octap-accent-strong: #f5a02a;
    --octap-accent-soft: rgba(230, 140, 15, 0.11);
    --octap-accent-line: rgba(230, 140, 15, 0.22);
    --octap-accent-mid: rgba(230, 140, 15, 0.42);
    --octap-accent-text: #8a4f05;
    --octap-ai-accent: #ff9f1c;
    --octap-gradient-primary: linear-gradient(135deg, #f5a02a 0%, #e68c0f 100%);
    --octap-focus-ring: 0 0 0 2px rgba(230, 140, 15, 0.16);

    --octap-danger: #cf4444;
    --octap-danger-text: #9f2323;
    --octap-danger-soft: rgba(207, 68, 68, 0.08);
    --octap-danger-line: rgba(207, 68, 68, 0.28);

    --octap-node-port-border: rgba(230, 140, 15, 0.34);
    --octap-node-port-bg: rgba(230, 140, 15, 0.12);
    --octap-node-port-fg: rgba(176, 91, 5, 0.76);
    --octap-node-port-hover-border: rgba(230, 140, 15, 0.82);
    --octap-node-port-hover-bg: rgba(230, 140, 15, 0.2);
    --octap-node-port-hover-fg: rgba(71, 39, 3, 0.95);
    --octap-node-port-halo: rgba(230, 140, 15, 0.12);
    --octap-node-port-glow: rgba(230, 140, 15, 0.28);

    --octap-action-bg: rgba(255, 255, 255, 0.98);
    --octap-action-border: rgba(18, 24, 35, 0.11);
    --octap-action-hover-bg: rgba(255, 255, 255, 1);
    --octap-action-active-bg: rgba(230, 140, 15, 0.12);
    --octap-action-active-border: rgba(230, 140, 15, 0.38);
    --octap-menu-bg: #ffffff;
    --octap-shadow-panel: 0 18px 44px rgba(29, 39, 55, 0.1);
    --octap-shadow-lg: 0 20px 54px rgba(18, 24, 35, 0.1);
    --octap-shadow-floating: 0 18px 42px rgba(18, 24, 35, 0.12);
    --octap-shadow-sidebar: 0 12px 34px rgba(18, 24, 35, 0.12);
    --octap-grid-dot: rgba(18, 24, 35, 0.07);
}

:where(.octap-ui-font, .app-shell, .octap-home-shell, .ai-assistant-v4, .octap-film-board, .octap-editor-board) {
    font-family: var(--octap-font-family-ui);
    letter-spacing: 0;
}

:where(.octap-icon, svg[data-octap-icon]) {
    width: var(--octap-icon-md);
    height: var(--octap-icon-md);
    flex: 0 0 auto;
    stroke-width: 1.75;
}

:where(.octap-icon-button, .octap-ui-icon-button) {
    width: var(--octap-control-lg);
    height: var(--octap-control-lg);
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--octap-line);
    border-radius: var(--octap-radius-pill);
    background: var(--octap-surface-soft);
    color: var(--octap-muted);
}

:where(.octap-ghost-button, .octap-ui-ghost-button) {
    min-height: var(--octap-control-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--octap-line);
    border-radius: var(--octap-radius-sm);
    background: transparent;
    color: var(--octap-muted);
    font-size: var(--octap-font-12);
    font-weight: var(--octap-weight-semibold);
}

:where(.octap-soft-button, .octap-ui-soft-button) {
    min-height: var(--octap-control-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--octap-line);
    border-radius: var(--octap-radius-sm);
    background: var(--octap-action-bg);
    color: var(--octap-text);
    font-size: var(--octap-font-12);
    font-weight: var(--octap-weight-semibold);
}

:where(.octap-icon-button, .octap-ui-icon-button, .octap-ghost-button, .octap-ui-ghost-button, .octap-soft-button, .octap-ui-soft-button):hover {
    border-color: var(--octap-line-strong);
    background: var(--octap-surface-hover);
    color: var(--octap-text);
}

:where(.octap-panel, .octap-ui-panel) {
    border: 1px solid var(--octap-line);
    border-radius: var(--octap-radius-lg);
    background: var(--octap-surface);
    color: var(--octap-text);
    box-shadow: var(--octap-shadow-panel);
}

:where(.octap-chip, .octap-ui-chip) {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--octap-line);
    border-radius: var(--octap-radius-pill);
    background: var(--octap-surface-soft);
    color: var(--octap-muted);
    font-size: var(--octap-font-12);
    font-weight: var(--octap-weight-medium);
}