:root {
    --bg: #faf8f5;
    --card-bg: rgba(255, 255, 255, 0.95);
    --card-border: rgba(42, 45, 68, 0.08);
    --text: #252837;
    --text-secondary: #61677a;
    --text-muted: #969cad;
    --pink-light: #ffe4ec;
    --pink: #ff8fab;
    --pink-dark: #e85d8a;
    --cream: #fff5e6;
    --cream-dark: #ffd6a5;
    --lavender: #e8e0f0;
    --lavender-dark: #b8a9c9;
    --mint: #d4f5e0;
    --mint-dark: #7dd3a8;
    --sky: #d6eaf8;
    --sky-dark: #85c1e9;
    --peach: #fdebd0;
    --peach-dark: #f0b27a;
    --rose: #fadbd8;
    --rose-dark: #e74c3c;
    --connection-path: rgba(88, 102, 132, 0.34);
    --connection-primary: rgba(224, 91, 136, 0.62);
    --connection-secondary: rgba(92, 132, 184, 0.5);
    --connection-project: rgba(58, 155, 107, 0.5);
    --connection-outreach: rgba(190, 132, 74, 0.48);
    --connection-muted: 0.045;
    --shadow: 0 2px 16px rgba(0,0,0,0.05);
    --shadow-hover: 0 8px 32px rgba(0,0,0,0.1);
    --shadow-card: 0 4px 20px rgba(255, 143, 171, 0.08);
    --sidebar-w: 264px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
    background: var(--bg);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    user-select: none;
    transition: background-color 0.25s ease, color 0.25s ease;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.2); }

body[data-theme='dark'] {
    --bg: #0d101b;
    --card-bg: rgba(24, 28, 43, 0.95);
    --card-border: rgba(234, 240, 255, 0.1);
    --text: #f3f5ff;
    --text-secondary: #c8cee2;
    --text-muted: #8f98ad;
    --pink-light: #432836;
    --pink: #ff9cbc;
    --pink-dark: #ff96be;
    --cream: #392c20;
    --cream-dark: #f0bd7f;
    --lavender: #2f2940;
    --lavender-dark: #c8bcf1;
    --mint: #1d332b;
    --mint-dark: #91dfb8;
    --sky: #1a2937;
    --sky-dark: #99ccf3;
    --peach: #35291d;
    --peach-dark: #f5bf8e;
    --rose: #3a2426;
    --rose-dark: #ff9b8f;
    --connection-path: rgba(154, 169, 205, 0.32);
    --connection-primary: rgba(255, 157, 194, 0.68);
    --connection-secondary: rgba(142, 185, 234, 0.5);
    --connection-project: rgba(132, 223, 184, 0.52);
    --connection-outreach: rgba(240, 190, 127, 0.48);
    --connection-muted: 0.055;
    --shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
    --shadow-hover: 0 22px 48px rgba(0, 0, 0, 0.34);
    --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.26);
}

body[data-theme='dark'] #canvas-app {
    background:
        radial-gradient(circle at 22% 0%, rgba(255, 146, 188, 0.1), transparent 24%),
        radial-gradient(circle at 82% 20%, rgba(115, 178, 234, 0.07), transparent 28%),
        linear-gradient(180deg, #131827 0%, #0d101b 100%);
}

body[data-theme='dark'] #canvas-app::before {
    background-image: radial-gradient(rgba(148, 162, 198, 0.18) 1px, transparent 1px);
    opacity: 0.5;
}

body[data-theme='dark'] .top-bar,
body[data-theme='dark'] .sidebar,
body[data-theme='dark'] .view-switch,
body[data-theme='dark'] .view-expand,
body[data-theme='dark'] .zoom-btn,
body[data-theme='dark'] .bottom-hint,
body[data-theme='dark'] .theme-toggle,
body[data-theme='dark'] .minimap,
body[data-theme='dark'] .top-action-panel,
body[data-theme='dark'] .btn,
body[data-theme='dark'] .sidebar-toggle,
body[data-theme='dark'] .sidebar-close {
    background: rgba(18, 22, 40, 0.88);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
}

body[data-theme='dark'] .top-bar {
    background: rgba(15, 18, 34, 0.84);
}

body[data-theme='dark'] .sidebar {
    background: rgba(14, 18, 33, 0.82);
}

body[data-theme='dark'] .top-action-panel {
    background: linear-gradient(180deg, rgba(21, 26, 45, 0.98), rgba(15, 19, 34, 0.94));
}

body[data-theme='dark'] .top-panel-button,
body[data-theme='dark'] .share-link-row button,
body[data-theme='dark'] .settings-segment,
body[data-theme='dark'] .settings-segment button,
body[data-theme='dark'] .settings-grid button {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .btn-primary {
    background: linear-gradient(135deg, #ff8fab, #e85d8a);
    border: none;
    color: white;
    box-shadow: 0 14px 30px rgba(232, 93, 138, 0.24);
}

body[data-theme='dark'] .btn-avatar {
    background: linear-gradient(135deg, #ffb0cb, #c8b5d8);
    border: none;
    color: white;
}

body[data-theme='dark'] .minimap {
    background: linear-gradient(180deg, rgba(24, 30, 51, 0.96), rgba(18, 23, 40, 0.92));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 18px 34px rgba(0, 0, 0, 0.28);
}

body[data-theme='dark'] .layer-item:hover,
body[data-theme='dark'] .hint-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body[data-theme='dark'] .tool-status {
    background: rgba(18, 22, 40, 0.94);
    border-color: rgba(255, 143, 171, 0.2);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
    color: var(--text-secondary);
}

body[data-theme='dark'] .layer-item.active,
body[data-theme='dark'] .hint-item.is-active,
body[data-theme='dark'] .view-tab.is-active,
body[data-theme='dark'] .view-tab:hover,
body[data-theme='dark'] .theme-pill.is-active,
body[data-theme='dark'] .theme-pill:hover {
    background: linear-gradient(135deg, rgba(255, 143, 171, 0.18), rgba(184, 169, 201, 0.12));
    color: var(--text);
}

body[data-theme='dark'] .stat-block,
body[data-theme='dark'] .modal-link-list p {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.03));
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .quick-link-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .card-soft-quote {
    background: linear-gradient(135deg, rgba(58, 34, 52, 0.95), rgba(44, 35, 28, 0.92));
}

body[data-theme='dark'] .card-terminal-note,
body[data-theme='dark'] .sidebar-console-card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34);
}

body[data-theme='dark'] .section-tone-sky {
    background: linear-gradient(135deg, rgba(29, 48, 67, 0.92), rgba(22, 37, 52, 0.96));
}

body[data-theme='dark'] .section-tone-lilac {
    background: linear-gradient(135deg, rgba(44, 35, 61, 0.92), rgba(33, 28, 50, 0.96));
}

body[data-theme='dark'] .section-tone-peach {
    background: linear-gradient(135deg, rgba(58, 41, 28, 0.92), rgba(46, 34, 25, 0.96));
}

body[data-theme='dark'] .section-tone-blush {
    background: linear-gradient(135deg, rgba(64, 34, 48, 0.92), rgba(49, 29, 42, 0.96));
}

body[data-theme='dark'] .section-tone-blue {
    background: linear-gradient(135deg, rgba(28, 44, 68, 0.92), rgba(21, 35, 55, 0.96));
}

body[data-theme='dark'] .modal-overlay {
    background: rgba(3, 6, 16, 0.72);
}

body[data-theme='dark'] .modal {
    background: linear-gradient(180deg, rgba(18, 22, 40, 0.98), rgba(14, 18, 32, 0.96));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.42);
}

body[data-theme='dark'] .modal-header {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    background: linear-gradient(135deg, rgba(18, 22, 40, 0.98), rgba(44, 33, 48, 0.82) 42%, rgba(33, 30, 52, 0.82));
}

body[data-theme='dark'] .modal[data-modal-variant='logic'] .modal-header {
    background:
        linear-gradient(135deg, rgba(255, 143, 171, 0.18), rgba(40, 58, 78, 0.72) 48%, rgba(29, 58, 46, 0.56)),
        rgba(18, 22, 40, 0.98);
}

body[data-theme='dark'] .modal-header::after {
    background: linear-gradient(90deg, rgba(255, 143, 171, 0.18), rgba(133, 193, 233, 0.18), rgba(184, 169, 201, 0.14));
}

body[data-theme='dark'] .modal-body {
    background: linear-gradient(180deg, rgba(18, 22, 40, 0.96), rgba(14, 18, 32, 0.92));
}

body[data-theme='dark'] .modal-section {
    background: linear-gradient(135deg, rgba(27, 32, 52, 0.97), var(--section-bg));
    border-color: var(--section-border);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

body[data-theme='dark'] .modal-section[data-tone='sky'] {
    --section-bg: rgba(29, 48, 67, 0.56);
    --section-border: rgba(133, 193, 233, 0.2);
    --section-accent: #8bbde0;
}

body[data-theme='dark'] .modal-section[data-tone='mint'] {
    --section-bg: rgba(29, 58, 46, 0.56);
    --section-border: rgba(125, 211, 168, 0.2);
    --section-accent: #86d6ad;
}

body[data-theme='dark'] .modal-section[data-tone='amber'] {
    --section-bg: rgba(62, 45, 27, 0.56);
    --section-border: rgba(240, 178, 122, 0.2);
    --section-accent: #f0bd7f;
}

body[data-theme='dark'] .modal-section[data-tone='blush'] {
    --section-bg: rgba(63, 34, 47, 0.58);
    --section-border: rgba(255, 143, 171, 0.22);
    --section-accent: #ff9cbc;
}

body[data-theme='dark'] .modal-section[data-tone='lilac'] {
    --section-bg: rgba(43, 35, 61, 0.6);
    --section-border: rgba(184, 169, 201, 0.22);
    --section-accent: #c8bcf1;
}

body[data-theme='dark'] .modal-section-title {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.055);
    box-shadow: none;
}

body[data-theme='dark'] .logic-snapshot,
body[data-theme='dark'] .logic-rule-grid div {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .modal-section p strong,
body[data-theme='dark'] .modal-section li strong {
    box-shadow: inset 0 -0.45em 0 rgba(255, 143, 171, 0.16);
}

body[data-theme='dark'] .modal-link-list p,
body[data-theme='dark'] .modal-tags {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.02));
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-theme='dark'] .modal-stack-pill,
body[data-theme='dark'] .modal-tag,
body[data-theme='dark'] .project-tag {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)),
        var(--tone-bg);
    box-shadow: none;
}

body[data-theme='dark'] .tag-tone-sky {
    --tone-bg: rgba(93, 178, 235, 0.16);
    --tone-border: rgba(115, 195, 248, 0.3);
    --tone-text: #aad8ff;
}

body[data-theme='dark'] .tag-tone-mint {
    --tone-bg: rgba(83, 198, 141, 0.16);
    --tone-border: rgba(125, 225, 178, 0.3);
    --tone-text: #9ee5bd;
}

body[data-theme='dark'] .tag-tone-amber {
    --tone-bg: rgba(231, 169, 92, 0.15);
    --tone-border: rgba(246, 196, 128, 0.3);
    --tone-text: #f4c887;
}

body[data-theme='dark'] .tag-tone-blush {
    --tone-bg: rgba(255, 143, 171, 0.14);
    --tone-border: rgba(255, 164, 198, 0.32);
    --tone-text: #ffb3cc;
}

body[data-theme='dark'] .tag-tone-lilac {
    --tone-bg: rgba(185, 160, 235, 0.15);
    --tone-border: rgba(205, 186, 255, 0.3);
    --tone-text: #d5c8ff;
}

body[data-theme='dark'] .modal-close {
    background: rgba(235, 240, 255, 0.1);
    color: rgba(235, 240, 255, 0.72);
    box-shadow: none;
}

body[data-theme='dark'] .modal-close:hover {
    background: rgba(255, 143, 171, 0.16);
    color: #ffd3e0;
}

body[data-theme='dark'] .timeline-dot {
    border-color: #181c2d;
}