/* ============== DESIGN SYSTEM ============== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Colors - Light Mode (Navy) */
    --bg-primary: #ffffff;
    --bg-secondary: #f0f2f8;
    --bg-tertiary: #e4e8f2;
    --bg-hover: #d8ddef;

    --text-primary: #0c1222;
    --text-secondary: #4a5578;
    --text-muted: #8490ad;

    --border-color: #d0d6e6;
    --border-light: #e4e8f2;

    --accent: #1e3a6e;
    --accent-hover: #152d57;
    --accent-light: rgba(30, 58, 110, 0.08);
    --accent-glow: rgba(30, 58, 110, 0.15);

    --success: #16a34a;
    --success-light: rgba(22, 163, 74, 0.08);
    --danger: #dc2626;
    --danger-light: rgba(220, 38, 38, 0.08);
    --warning: #d97706;

    /* Navy gradient tokens */
    --navy-50: #eef1f8;
    --navy-100: #d0d6e6;
    --navy-200: #a8b3cf;
    --navy-300: #7b8db5;
    --navy-400: #556a9a;
    --navy-500: #3b5082;
    --navy-600: #1e3a6e;
    --navy-700: #162c55;
    --navy-800: #0f1f3d;
    --navy-900: #0a1628;

    /* Surface tokens */
    --surface-card: #ffffff;
    --surface-card-hover: #f8f9fc;
    --surface-elevated: #ffffff;
    --surface-overlay: rgba(10, 22, 40, 0.5);

    /* Sidebar */
    --sidebar-bg: #0f1a2e;
    --sidebar-text: #c0cbe0;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(255, 255, 255, 0.1);
    --sidebar-icon: #6b7fa0;
    --sidebar-icon-active: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.06);

    /* Spacing */
    --space-0: 0;
    --space-1: 4px;
    --space-1h: 6px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Typography - increased base for readability */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-xs: 0.8125rem;
    --font-sm: 0.875rem;
    --font-base: 0.9375rem;
    --font-md: 1.0625rem;
    --font-lg: 1.25rem;
    --font-xl: 1.5rem;
    --font-2xl: 2rem;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
    --shadow-card: 0 2px 8px -2px rgba(0, 0, 0, 0.05), 0 4px 16px -4px rgba(0, 0, 0, 0.02);
    --shadow-card-hover: 0 10px 24px -4px rgba(0, 0, 0, 0.08), 0 8px 16px -6px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;

    /* Branch colors */
    --branch-1: #6366F1;
    --branch-2: #EC4899;
    --branch-3: #F59E0B;
    --branch-4: #10B981;
    --branch-5: #3B82F6;
    --branch-6: #8B5CF6;
    --branch-7: #EF4444;
    --branch-8: #14B8A6;
    --branch-9: #F97316;
    --branch-10: #06B6D4;
    --branch-11: #84CC16;
    --branch-12: #E11D48;
}

[data-theme="dark"] {
    --bg-primary: #080d18;
    --bg-secondary: #0d1525;
    --bg-tertiary: #121c32;
    --bg-hover: #1a2744;

    --text-primary: #e8ecf4;
    --text-secondary: #8fa0c0;
    --text-muted: #4a5f82;

    --border-color: #1a2744;
    --border-light: #121c32;

    --accent: #4a7cdb;
    --accent-hover: #6b96e8;
    --accent-light: rgba(74, 124, 219, 0.12);
    --accent-glow: rgba(74, 124, 219, 0.2);

    --success-light: rgba(22, 163, 74, 0.12);
    --danger-light: rgba(220, 38, 38, 0.12);

    --surface-card: #0d1525;
    --surface-card-hover: #121c32;
    --surface-elevated: #121c32;
    --surface-overlay: rgba(4, 6, 12, 0.7);

    --sidebar-bg: #060a14;
    --sidebar-text: #6b82a8;
    --sidebar-text-active: #e8ecf4;
    --sidebar-hover: rgba(255, 255, 255, 0.04);
    --sidebar-active: rgba(74, 124, 219, 0.12);
    --sidebar-icon: #4a5f82;
    --sidebar-icon-active: #4a7cdb;
    --sidebar-border: rgba(255, 255, 255, 0.04);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .tree-node-box {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .tree-node-box:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .tree-node-box.root {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* ============== RESET ============== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
}

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

h1, h2, h3, h4, h5, h6, p {
    overflow-wrap: break-word;
}

/* ============== LAYOUT ============== */
#app {
    min-height: 100vh;
}

.screen {
    display: none;
}

.screen.active {
    display: flex;
}

.section {
    display: none;
}

.section.active {
    display: block;
}

/* ============== SIDEBAR & NAV ============== */
aside {
    width: 260px;
    min-width: 260px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.main {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-8);
    max-height: 100vh;
}

.nav {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: 9px var(--space-3);
    border: none;
    background: transparent;
    color: var(--sidebar-text);
    font-size: var(--font-sm);
    font-weight: 500;
    text-align: left;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 180ms ease;
    border: 1px solid transparent;
    position: relative;
}

.nav-item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

.nav-item.active {
    background: var(--sidebar-active);
    color: var(--sidebar-text-active);
    font-weight: 600;
    border-color: transparent;
    box-shadow: none;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.nav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sidebar-icon);
    transition: color 180ms ease;
}

.nav-icon svg {
    width: 18px;
    height: 18px;
}

.nav-item:hover .nav-icon {
    color: var(--sidebar-text-active);
}

.nav-item.active .nav-icon {
    color: var(--sidebar-icon-active);
}

.nav-label {
    flex: 1;
    letter-spacing: -0.01em;
}

/* Sidebar sections */
.sidebar-header {
    padding: var(--space-4) var(--space-4) var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-profile {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin: 0 var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--sidebar-border);
    cursor: pointer;
    transition: background 180ms ease;
    border-radius: var(--radius-md);
}

.sidebar-profile:hover {
    background: var(--sidebar-hover);
}

.sidebar-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--navy-500), var(--navy-700));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.sidebar-avatar span {
    color: white;
    font-size: var(--font-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.sidebar-display-name {
    font-size: var(--font-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sidebar-text-active);
}

.sidebar-username {
    font-size: var(--font-xs);
    color: var(--sidebar-icon);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-footer .nav-item {
    padding: 8px var(--space-3);
    font-size: var(--font-sm);
    background: transparent;
    color: var(--sidebar-text);
}

.sidebar-footer .nav-item:hover {
    color: var(--sidebar-text-active);
    background: var(--sidebar-hover);
}

/* Sidebar logo */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.logo-mark {
    color: var(--accent);
    flex-shrink: 0;
}

[data-theme="dark"] .logo-mark {
    color: var(--accent);
}

.logo-text {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--sidebar-text-active);
    letter-spacing: -0.02em;
}

.sidebar-header-actions {
    display: flex;
    gap: 2px;
    align-items: center;
}

.sidebar-action-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--sidebar-icon);
    cursor: pointer;
    transition: all 180ms ease;
    position: relative;
}

.sidebar-action-btn:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Mobile top bar - hidden on desktop */
.mobile-top-bar { display: none; }

/* ============== FULLSCREEN APP MODE ============== */
html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

#app {
    height: 100dvh;
    height: 100vh; /* fallback */
    overflow: hidden;
}

#main-app {
    height: 100dvh;
    height: 100vh;
    overflow: hidden;
}

.main {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* When installed as PWA - fullscreen feel */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
    }
}

/* Fullscreen API */
:fullscreen #app,
:-webkit-full-screen #app {
    background: var(--bg-primary);
}

.fullscreen-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: var(--space-1);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.fullscreen-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ============== DRAWFLOW CANVAS ============== */
/* Task quick action bar */
.task-quick-bar {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-light);
}

.qd-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.qd-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.qd-del {
    margin-left: auto;
}

.qd-del:hover {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
}

.task-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--accent-light);
    color: var(--accent);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.task-date-chip:hover {
    background: var(--danger-light);
    color: var(--danger);
}

@media (max-width: 768px) {
    .qd-btn { padding: 4px 6px; font-size: 10px; }
    .task-quick-bar { gap: 3px; }
}

/* Quick add task input */
.ws-quick-add-task {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.ws-quick-add-task input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-base);
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s;
}

.ws-quick-add-task input:focus {
    border-color: var(--accent);
}

.ws-quick-add-task input::placeholder {
    color: var(--text-muted);
}

.ws-quick-add-task .btn {
    font-size: var(--font-lg);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-lg);
}

.drawflow-toolbar {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
    flex-wrap: wrap;
}

.structure-view-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 2px;
}

.structure-view-toggle .btn {
    border-radius: var(--radius-sm) !important;
    font-size: var(--font-xs) !important;
    padding: 4px 12px !important;
}

.structure-view-toggle .btn.active {
    background: var(--accent) !important;
    color: white !important;
}

.drawflow-separator {
    color: var(--border-color);
    font-size: var(--font-sm);
    padding: 0 2px;
}

#drawflow-canvas {
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    background: var(--bg-primary);
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Drawflow overrides for dark mode */
.drawflow .drawflow-node {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-primary) !important;
    min-width: 180px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.drawflow .drawflow-node:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 2px var(--accent);
}

.drawflow .drawflow-node.selected {
    box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 2px var(--accent) !important;
}

.drawflow .drawflow-node .inputs,
.drawflow .drawflow-node .outputs {
    display: flex;
    align-items: center;
}

.drawflow .drawflow-node .input,
.drawflow .drawflow-node .output {
    background: var(--accent) !important;
    border: 2px solid var(--bg-primary) !important;
}

.drawflow .connection .main-path {
    stroke: var(--accent) !important;
    stroke-width: 2px !important;
}

.drawflow .connection .main-path:hover {
    stroke-width: 4px !important;
}

.drawflow .connection .conn-label-text {
    font-family: var(--font-family);
    pointer-events: none;
    paint-order: stroke;
    stroke: var(--bg-primary);
    stroke-width: 3px;
}

/* Custom node cards */
.df-node-root {
    padding: var(--space-4) var(--space-6);
    text-align: center;
    background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
    border-radius: var(--radius-lg);
    color: #fff;
}

.df-node-root .df-node-title {
    font-size: var(--font-xl);
    font-weight: 700;
    color: #fff;
}

.df-node-root .df-node-type {
    font-size: var(--font-xs);
    color: rgba(255,255,255,0.6);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
}

.df-node-card {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
}

.df-node-card .df-node-title {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.df-node-card .df-node-desc {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 4px;
    line-height: 1.4;
    max-height: 40px;
    overflow: hidden;
}

.df-node-card .df-node-meta {
    display: flex;
    gap: 4px;
    margin-top: var(--space-2);
}

.df-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-weight: 600;
}

.df-badge.df-done {
    background: var(--success);
    color: white;
}

.df-badge.df-weight {
    background: rgba(244, 63, 94, 0.15);
    color: #fb7185;
}

.df-add-desc {
    cursor: pointer;
    color: var(--text-muted) !important;
    font-style: italic;
    opacity: 0.6;
}

.df-add-desc:hover { opacity: 1; }

.df-node-card [contenteditable="true"] {
    background: rgba(255, 255, 255, 0.05);
    min-width: 60px;
}

/* Drawflow node root style */
.drawflow .drawflow-node.df-root {
    background: linear-gradient(135deg, rgba(99,102,241,0.15), var(--bg-secondary)) !important;
    border: 2px solid var(--accent) !important;
    min-width: 200px;
}

/* ============== SECTION LAYOUT ============== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    gap: var(--space-3);
    flex-wrap: wrap;
}

.section-title {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.025em;
}

.section-date {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-left: var(--space-4);
}

.header-buttons {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.header-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    position: relative;
}

.btn-icon-more {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 150ms ease;
}

.btn-icon-more:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.header-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--surface-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 50;
    padding: var(--space-1);
    overflow: hidden;
}

[data-theme="dark"] .header-dropdown {
    background: var(--navy-800);
    border-color: var(--navy-700);
}

.header-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: var(--font-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 100ms ease;
}

.header-dropdown button:hover {
    background: var(--bg-tertiary);
}

/* ============== CARDS ============== */
.card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.card:hover {
    border-color: var(--navy-200);
    box-shadow: 0 4px 12px -2px rgba(30, 58, 110, 0.08);
}

[data-theme="dark"] .card:hover {
    border-color: var(--navy-700);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
}

.card-title {
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-5);
}

/* ============== TASK BASE ELEMENTS ============== */
.task-list, .task-list-full {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.task-checkbox {
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
    color: transparent;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 1px;
}

.task-checkbox:hover { border-color: var(--success); }

.task-checkbox.checked {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.task-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.task-edit, .task-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    font-size: var(--font-sm);
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.task-item:hover .task-edit,
.task-item:hover .task-delete {
    opacity: 0.6;
}

.task-edit:hover { color: var(--accent); opacity: 1 !important; }
.task-delete:hover { color: var(--danger); opacity: 1 !important; }

/* Stats */
.tasks-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Compact inline stats bar */
.stats-bar {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

.stat-chip strong {
    color: var(--accent);
    font-weight: 700;
}

.stat-chip.stat-danger strong {
    color: var(--danger);
}

.task-stat-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3);
    text-align: center;
    transition: border-color 200ms ease, transform 200ms ease;
}

.task-stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.task-stat-value {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
}

.task-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
}

.hidden {
    display: none !important;
}

/* ============== LOCK SCREEN ============== */
#lock-screen {
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: var(--navy-900);
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30, 58, 110, 0.4) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 100%, rgba(30, 58, 110, 0.15) 0%, transparent 60%);
}

[data-theme="dark"] #lock-screen {
    background: #040810;
    background-image:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(74, 124, 219, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 80% 100%, rgba(74, 124, 219, 0.06) 0%, transparent 60%);
}

.lock-container {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: var(--space-10) var(--space-8);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
    max-width: 400px;
    width: 90%;
}

.lock-container .auth-form h2,
.lock-container .form-group label,
.lock-container .form-switch {
    color: rgba(255, 255, 255, 0.8);
}

.lock-container .form-switch a {
    color: rgba(180, 200, 255, 0.9);
}

.lock-container .form-group input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.lock-container .form-group input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.lock-container .form-group input:focus {
    border-color: rgba(74, 124, 219, 0.5);
    box-shadow: 0 0 0 3px rgba(74, 124, 219, 0.15);
}

.lock-container .btn-primary {
    background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

.lock-container .btn-primary:hover {
    background: linear-gradient(135deg, var(--navy-500), var(--navy-700));
}

.lock-container .error-message {
    background: rgba(220, 38, 38, 0.15);
    border-color: rgba(220, 38, 38, 0.3);
    color: #fca5a5;
}

.lock-logo {
    text-align: center;
    margin-bottom: var(--space-8);
}

.logo-icon-lock {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    background: linear-gradient(135deg, var(--navy-500), var(--navy-700));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: var(--font-lg);
    letter-spacing: -0.025em;
    box-shadow: 0 8px 24px -4px rgba(30, 58, 110, 0.4);
}

.lock-logo h1 {
    font-size: var(--font-xl);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-1);
    letter-spacing: -0.025em;
}

.lock-logo .subtitle {
    font-size: var(--font-sm);
    color: rgba(255, 255, 255, 0.4);
}

.auth-form h2 {
    font-size: var(--font-md);
    font-weight: 600;
    margin-bottom: var(--space-5);
    text-align: center;
    letter-spacing: -0.015em;
}

.form-hint {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    text-align: center;
}

.form-switch {
    text-align: center;
    margin-top: var(--space-5);
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.form-switch a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}

.form-switch a:hover {
    text-decoration: underline;
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    display: block;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-1h);
}

.form-group label.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
}

.form-group label.checkbox-label input[type="checkbox"] {
    width: auto;
    height: auto;
    accent-color: var(--accent);
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.radio-option {
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.radio-option:hover {
    border-color: var(--accent);
    background: var(--bg-secondary);
}

.radio-option input[type="radio"] {
    width: auto;
    height: auto;
    accent-color: var(--accent);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    height: 36px;
    font-size: var(--font-base);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.form-group textarea {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.error-message {
    background: var(--danger-light);
    color: var(--danger);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    margin-bottom: var(--space-4);
    border: 1px solid rgba(220, 38, 38, 0.15);
}

/* ============== BUTTONS ============== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    height: 36px;
    font-size: var(--font-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
    user-select: none;
    white-space: nowrap;
    line-height: 1;
}

.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-primary:active {
    opacity: 0.85;
}

.btn-secondary {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--text-muted);
}

.btn-full {
    width: 100%;
    height: 40px;
}

.btn-sm {
    height: 28px;
    // ... 7190 lines omitted
}
    // ... 7189 lines omitted
}
    // ... 7188 lines omitted
}
    // ... 7187 lines omitted
}
    // ... 7186 lines omitted
}
    // ... 7185 lines omitted
}
    // ... 7184 lines omitted
}
    // ... 7183 lines omitted
}
    // ... 7182 lines omitted
}
    // ... 7181 lines omitted
}
    // ... 7180 lines omitted
}
    // ... 7179 lines omitted
}
    // ... 7178 lines omitted
}
    // ... 7177 lines omitted
}
    // ... 7176 lines omitted
}
    // ... 7175 lines omitted
}
    // ... 7174 lines omitted
}
    // ... 7173 lines omitted
}
    // ... 7172 lines omitted
}
    // ... 7171 lines omitted
}
    // ... 7170 lines omitted
}
    // ... 7169 lines omitted
}
    // ... 7168 lines omitted
}
    // ... 7167 lines omitted
}
    // ... 7166 lines omitted
}
    // ... 7165 lines omitted
}
    // ... 7164 lines omitted
}
    // ... 7163 lines omitted
}
    // ... 7162 lines omitted
}
    // ... 7161 lines omitted
}
    // ... 7160 lines omitted
}
    // ... 7159 lines omitted
}
    // ... 7158 lines omitted
}
    // ... 7157 lines omitted
}
    // ... 7156 lines omitted
}
    // ... 7155 lines omitted
}
    // ... 7154 lines omitted
}
    // ... 7153 lines omitted
}
    // ... 7152 lines omitted
}
    // ... 7151 lines omitted
}
    // ... 7150 lines omitted
}
    // ... 7149 lines omitted
}
    // ... 7148 lines omitted
}
    // ... 7147 lines omitted
}
    // ... 7146 lines omitted
}
    // ... 7145 lines omitted
}
    // ... 7144 lines omitted
}
    // ... 7143 lines omitted
}
    // ... 7142 lines omitted
}
    // ... 7141 lines omitted
}
    // ... 7140 lines omitted
}
    // ... 7139 lines omitted
}
    // ... 7138 lines omitted
}
    // ... 7137 lines omitted
}
    // ... 7136 lines omitted
}
    // ... 7135 lines omitted
}
    // ... 7134 lines omitted
}
    // ... 7133 lines omitted
}
    // ... 7132 lines omitted
}
    // ... 7131 lines omitted
}
    // ... 7130 lines omitted
}
    // ... 7129 lines omitted
}
    // ... 7128 lines omitted
}
    // ... 7127 lines omitted
}
    // ... 7126 lines omitted
}
    // ... 7125 lines omitted
}
    // ... 7124 lines omitted
}
    // ... 7123 lines omitted
}
    // ... 7122 lines omitted
}
    // ... 7121 lines omitted
}
    // ... 7120 lines omitted
}
    // ... 7119 lines omitted
}
    // ... 7118 lines omitted
}
    // ... 7117 lines omitted
}
    // ... 7116 lines omitted
}
    // ... 7115 lines omitted
}
    // ... 7114 lines omitted
}
    // ... 7113 lines omitted
}
    // ... 7112 lines omitted
}
    // ... 7111 lines omitted
}
    // ... 7110 lines omitted
}
    // ... 7109 lines omitted
}
    // ... 7108 lines omitted
}
    // ... 7107 lines omitted
}
    // ... 7106 lines omitted
}
    // ... 7105 lines omitted
}
    // ... 7104 lines omitted
}
    // ... 7103 lines omitted
}
    // ... 7102 lines omitted
}
    // ... 7101 lines omitted
}
    // ... 7100 lines omitted
}
    // ... 7099 lines omitted
}
    // ... 7098 lines omitted
}
    // ... 7097 lines omitted
}
    // ... 7096 lines omitted
}
    // ... 7095 lines omitted
}
    // ... 7094 lines omitted
}
    // ... 7093 lines omitted
}
    // ... 7092 lines omitted
}
    // ... 7091 lines omitted
}
    // ... 7090 lines omitted
}
    // ... 7089 lines omitted
}
    // ... 7088 lines omitted
}
    // ... 7087 lines omitted
}
    // ... 7086 lines omitted
}
    // ... 7085 lines omitted
}
    // ... 7084 lines omitted
}
    // ... 7083 lines omitted
}
    // ... 7082 lines omitted
}
    // ... 7081 lines omitted
}
    // ... 7080 lines omitted
}
    // ... 7079 lines omitted
}
    // ... 7078 lines omitted
}
    // ... 7077 lines omitted
}
    // ... 7076 lines omitted
}
    // ... 7075 lines omitted
}
    // ... 7074 lines omitted
}
    // ... 7073 lines omitted
}
    // ... 7072 lines omitted
}
    // ... 7071 lines omitted
}
    // ... 7070 lines omitted
}
    // ... 7069 lines omitted
}
    // ... 7068 lines omitted
}
    // ... 7067 lines omitted
}
    // ... 7066 lines omitted
}
    // ... 7065 lines omitted
}
    // ... 7064 lines omitted
}
    // ... 7063 lines omitted
}
    // ... 7062 lines omitted
}
    // ... 7061 lines omitted
}
    // ... 7060 lines omitted
}
    // ... 7059 lines omitted
}
    // ... 7058 lines omitted
}
    // ... 7057 lines omitted
}
    // ... 7056 lines omitted
}
    // ... 7055 lines omitted
}
    // ... 7054 lines omitted
}
    // ... 7053 lines omitted
}
    // ... 7052 lines omitted
}
    // ... 7051 lines omitted
}
    // ... 7050 lines omitted
}
    // ... 7049 lines omitted
}
    // ... 7048 lines omitted
}
    // ... 7047 lines omitted
}
    // ... 7046 lines omitted
}
    // ... 7045 lines omitted
}
    // ... 7044 lines omitted
}
    // ... 7043 lines omitted
}
    // ... 7042 lines omitted
}
    // ... 7041 lines omitted
}
    // ... 7040 lines omitted
}
    // ... 7039 lines omitted
}
    // ... 7038 lines omitted
}
    // ... 7037 lines omitted
}
    // ... 7036 lines omitted
}
    // ... 7035 lines omitted
}
    // ... 7034 lines omitted
}
    // ... 7033 lines omitted
}
    // ... 7032 lines omitted
}
    // ... 7031 lines omitted
}
    // ... 7030 lines omitted
}
    // ... 7029 lines omitted
}
    // ... 7028 lines omitted
}
    // ... 7027 lines omitted
}
    // ... 7026 lines omitted
}
    // ... 7025 lines omitted
}
    // ... 7024 lines omitted
}
    // ... 7023 lines omitted
}
    // ... 7022 lines omitted
}
    // ... 7021 lines omitted
}
    // ... 7020 lines omitted
}
    // ... 7019 lines omitted
}
    // ... 7018 lines omitted
}
    // ... 7017 lines omitted
}
    // ... 7016 lines omitted
}
    // ... 7015 lines omitted
}
    // ... 7014 lines omitted
}
    // ... 7013 lines omitted
}
    // ... 7012 lines omitted
}
    // ... 7011 lines omitted
}
    // ... 7010 lines omitted
}
    // ... 7009 lines omitted
}
    // ... 7008 lines omitted
}
    // ... 7007 lines omitted
}
    // ... 7006 lines omitted
}
    // ... 7005 lines omitted
}
    // ... 7004 lines omitted
}
    // ... 7003 lines omitted
}
    // ... 7002 lines omitted
}
    // ... 7001 lines omitted
}
    // ... 7000 lines omitted
}
    // ... 6999 lines omitted
}
    // ... 6998 lines omitted
}
    // ... 6997 lines omitted
}
    // ... 6996 lines omitted
}
    // ... 6995 lines omitted
}
    // ... 6994 lines omitted
}
    // ... 6993 lines omitted
}
    // ... 6992 lines omitted
    }
    // ... 6991 lines omitted
    }
    // ... 6990 lines omitted
    }
}
    // ... 6988 lines omitted
}
    // ... 6987 lines omitted
}
    // ... 6986 lines omitted
}
    // ... 6985 lines omitted
}
    // ... 6984 lines omitted
}
    // ... 6983 lines omitted
}
    // ... 6982 lines omitted
}
    // ... 6981 lines omitted
}
    // ... 6980 lines omitted
}
    // ... 6979 lines omitted
}
    // ... 6978 lines omitted
}
    // ... 6977 lines omitted
}
    // ... 6976 lines omitted
}
    // ... 6975 lines omitted
}
    // ... 6974 lines omitted
}
    // ... 6973 lines omitted
}
    // ... 6972 lines omitted
}
    // ... 6971 lines omitted
}
    // ... 6970 lines omitted
}
    // ... 6969 lines omitted
}
    // ... 6968 lines omitted
}
    // ... 6967 lines omitted
}
    // ... 6966 lines omitted
}
    // ... 6965 lines omitted
}
    // ... 6964 lines omitted
}
    // ... 6963 lines omitted
}
    // ... 6962 lines omitted
}
    // ... 6961 lines omitted
}
    // ... 6960 lines omitted
}
    // ... 6959 lines omitted
}
    // ... 6958 lines omitted
}
    // ... 6957 lines omitted
}
    // ... 6956 lines omitted
}
    // ... 6955 lines omitted
}
    // ... 6954 lines omitted
}
    // ... 6953 lines omitted
}
    // ... 6952 lines omitted
}
    // ... 6951 lines omitted
}
    // ... 6950 lines omitted
}
    // ... 6949 lines omitted
}
    // ... 6948 lines omitted
}
    // ... 6947 lines omitted
}
    // ... 6946 lines omitted
}
    // ... 6945 lines omitted
}
    // ... 6944 lines omitted
}
    // ... 6943 lines omitted
}
    // ... 6942 lines omitted
}
    // ... 6941 lines omitted
}
    // ... 6940 lines omitted
}
    // ... 6939 lines omitted
}
    // ... 6938 lines omitted
}
    // ... 6937 lines omitted
}
    // ... 6936 lines omitted
}
    // ... 6935 lines omitted
}
    // ... 6934 lines omitted
}
    // ... 6933 lines omitted
}
    // ... 6932 lines omitted
}
    // ... 6931 lines omitted
}
    // ... 6930 lines omitted
}
    // ... 6929 lines omitted
}
    // ... 6928 lines omitted
}
    // ... 6927 lines omitted
}
    // ... 6926 lines omitted
}
    // ... 6925 lines omitted
}
    // ... 6924 lines omitted
}
    // ... 6923 lines omitted
}
    // ... 6922 lines omitted
}
    // ... 6921 lines omitted
}
    // ... 6920 lines omitted
}
    // ... 6919 lines omitted
}
    // ... 6918 lines omitted
}
    // ... 6917 lines omitted
}
    // ... 6916 lines omitted
}
    // ... 6915 lines omitted
}
    // ... 6914 lines omitted
}
    // ... 6913 lines omitted
}
    // ... 6912 lines omitted
}
    // ... 6911 lines omitted
}
    // ... 6910 lines omitted
}
    // ... 6909 lines omitted
}
    // ... 6908 lines omitted
}
    // ... 6907 lines omitted
}
    // ... 6906 lines omitted
}
    // ... 6905 lines omitted
}
    // ... 6904 lines omitted
}
    // ... 6903 lines omitted
}
    // ... 6902 lines omitted
}
    // ... 6901 lines omitted
}
    // ... 6900 lines omitted
}
    // ... 6899 lines omitted
}
    // ... 6898 lines omitted
}
    // ... 6897 lines omitted
}
    // ... 6896 lines omitted
}
    // ... 6895 lines omitted
}
    // ... 6894 lines omitted
}
    // ... 6893 lines omitted
}
    // ... 6892 lines omitted
}
    // ... 6891 lines omitted
}
    // ... 6890 lines omitted
}
    // ... 6889 lines omitted
}
    // ... 6888 lines omitted
}
    // ... 6887 lines omitted
}
    // ... 6886 lines omitted
}
    // ... 6885 lines omitted
}
    // ... 6884 lines omitted
}
    // ... 6883 lines omitted
}
    // ... 6882 lines omitted
}
    // ... 6881 lines omitted
}
    // ... 6880 lines omitted
}
    // ... 6879 lines omitted
}
    // ... 6878 lines omitted
}
    // ... 6877 lines omitted
}
    // ... 6876 lines omitted
}
    // ... 6875 lines omitted
}
    // ... 6874 lines omitted
}
    // ... 6873 lines omitted
}
    // ... 6872 lines omitted
}
    // ... 6871 lines omitted
}
    // ... 6870 lines omitted
}
    // ... 6869 lines omitted
}
    // ... 6868 lines omitted
}
    // ... 6867 lines omitted
}
    // ... 6866 lines omitted
}
    // ... 6865 lines omitted
}
    // ... 6864 lines omitted
}
    // ... 6863 lines omitted
}
    // ... 6862 lines omitted
}
    // ... 6861 lines omitted
}
    // ... 6860 lines omitted
}
    // ... 6859 lines omitted
}
    // ... 6858 lines omitted
}
    // ... 6857 lines omitted
}
    // ... 6856 lines omitted
}
    // ... 6855 lines omitted
}
    // ... 6854 lines omitted
}
    // ... 6853 lines omitted
}
    // ... 6852 lines omitted
}
    // ... 6851 lines omitted
}
    // ... 6850 lines omitted
}
    // ... 6849 lines omitted
}
    // ... 6848 lines omitted
}
    // ... 6847 lines omitted
}
    // ... 6846 lines omitted
}
    // ... 6845 lines omitted
}
    // ... 6844 lines omitted
}
    // ... 6843 lines omitted
}
    // ... 6842 lines omitted
}
    // ... 6841 lines omitted
}
    // ... 6840 lines omitted
}
    // ... 6839 lines omitted
}
    // ... 6838 lines omitted
}
    // ... 6837 lines omitted
}
    // ... 6836 lines omitted
}
    // ... 6835 lines omitted
}
    // ... 6834 lines omitted
}
    // ... 6833 lines omitted
}
    // ... 6832 lines omitted
}
    // ... 6831 lines omitted
}
    // ... 6830 lines omitted
}
    // ... 6829 lines omitted
}
    // ... 6828 lines omitted
}
    // ... 6827 lines omitted
}
    // ... 6826 lines omitted
}
    // ... 6825 lines omitted
}
    // ... 6824 lines omitted
}
    // ... 6823 lines omitted
}
    // ... 6822 lines omitted
}
    // ... 6821 lines omitted
}
    // ... 6820 lines omitted
}
    // ... 6819 lines omitted
}
    // ... 6818 lines omitted
}
    // ... 6817 lines omitted
}
    // ... 6816 lines omitted
    }
    // ... 6815 lines omitted
    }
    // ... 6814 lines omitted
    }
    // ... 6813 lines omitted
    }
    // ... 6812 lines omitted
    }
    // ... 6811 lines omitted
    }
}
    // ... 6809 lines omitted
    }
    // ... 6808 lines omitted
    }
}
    // ... 6806 lines omitted
}
    // ... 6805 lines omitted
}
    // ... 6804 lines omitted
}
    // ... 6803 lines omitted
}
    // ... 6802 lines omitted
}
    // ... 6801 lines omitted
}
    // ... 6800 lines omitted
}
    // ... 6799 lines omitted
}
    // ... 6798 lines omitted
}
    // ... 6797 lines omitted
}
    // ... 6796 lines omitted
}
    // ... 6795 lines omitted
}
    // ... 6794 lines omitted
}
    // ... 6793 lines omitted
}
    // ... 6792 lines omitted
}
    // ... 6791 lines omitted
}
    // ... 6790 lines omitted
}
    // ... 6789 lines omitted
}
    // ... 6788 lines omitted
}
    // ... 6787 lines omitted
}
    // ... 6786 lines omitted
}
    // ... 6785 lines omitted
}
    // ... 6784 lines omitted
}
    // ... 6783 lines omitted
}
    // ... 6782 lines omitted
}
    // ... 6781 lines omitted
}
    // ... 6780 lines omitted
}
    // ... 6779 lines omitted
}
    // ... 6778 lines omitted
}
    // ... 6777 lines omitted
}
    // ... 6776 lines omitted
}
    // ... 6775 lines omitted
}
    // ... 6774 lines omitted
}
    // ... 6773 lines omitted
}
    // ... 6772 lines omitted
}
    // ... 6771 lines omitted
}
    // ... 6770 lines omitted
}
    // ... 6769 lines omitted
}
    // ... 6768 lines omitted
}
    // ... 6767 lines omitted
}
    // ... 6766 lines omitted
}
    // ... 6765 lines omitted
}
    // ... 6764 lines omitted
}
    // ... 6763 lines omitted
}
// ... 6762 more lines (total: 7618)
/* ==========================================================================
   ULTRA-PREMIUM TASK SYSTEM (God Mode)
   Inspiracje: Apple Vision Pro, Linear, Things 3
   ========================================================================== */

/* Fizyka animacji */
.task-section, .task-item, .inline-subtasks, .project-chip, .status-badge {
    --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

.task-item, .task-section-header, .project-chip {
    --edge-light: inset 0 1px 0 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

[data-theme="dark"] .task-item,
[data-theme="dark"] .task-section-header,
[data-theme="dark"] .project-chip {
    --edge-light: inset 0 1px 0 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

/* SEKCJE CZASOWE */
.task-section { margin-bottom: 40px; position: relative; }

.task-section-header {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 20px; margin-bottom: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    position: sticky; top: 0; z-index: 10;
    cursor: pointer; transition: all 0.25s ease;
}
.task-section-header:hover { background: var(--bg-tertiary); border-color: var(--accent); }
.task-section-icon { font-size: 1.1rem; opacity: 0.9; }
.task-section-label { font-size: 1.1rem; font-weight: 600; color: var(--text-primary); letter-spacing: 0.01em; flex: 1; }
.task-section-count { font-size: 0.75rem; font-weight: 700; background: var(--accent-light); color: var(--accent); padding: 3px 12px; border-radius: var(--radius-full); }
.task-section-chevron { margin-left: auto; color: var(--text-muted); font-size: 0.7rem; transition: transform 0.4s var(--spring); }
.task-section-chevron.open { transform: rotate(90deg); color: var(--text-secondary); }
.task-section-body { display: flex; flex-direction: column; gap: 12px; }

.task-section-overdue .task-section-header { border-color: rgba(244,63,94,0.2); }
.task-section-overdue .task-section-label { color: #fb7185; }
.task-section-overdue .task-section-count { background: rgba(244,63,94,0.15); color: #fb7185; }
.task-section-today .task-section-header { border-color: rgba(99,102,241,0.2); }
.task-section-today .task-section-label { color: #818cf8; }
.task-section-today .task-section-count { background: rgba(99,102,241,0.15); color: #818cf8; }
.task-section-week .task-section-header { border-color: rgba(139,92,246,0.15); }
.task-section-nodate .task-section-label { color: var(--text-muted); }

/* KARTA ZADANIA */
.task-list-full .task-item {
    display: grid; grid-template-columns: 24px 1fr; gap: 0 14px;
    padding: 18px 22px;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: transform 0.3s var(--spring), box-shadow 0.3s ease, border-color 0.3s ease;
    align-items: start; position: relative;
}

/* Base task-item for today/other views */
.task-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 200ms ease;
}

.task-item:hover {
    background: var(--surface-card-hover);
    border-color: var(--navy-200);
}

[data-theme="dark"] .task-item:hover {
    border-color: var(--navy-600);
}

.task-list-full .task-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent);
    z-index: 2;
}
.task-list-full .task-item .task-content { grid-column: 2; }
.task-list-full .task-item .task-actions-row { grid-column: 3; display: flex; gap: 6px; }
/* Quick bar always visible */

/* STATUS BADGE */
.status-badge {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 1.5px solid var(--text-muted);
    transition: all 0.3s var(--spring);
    font-size: 11px; color: transparent;
    background: rgba(0,0,0,0.2); margin-top: 3px; flex-shrink: 0;
}
.status-badge.status-todo { border-color: var(--text-muted); }
.status-badge.status-todo:hover { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.status-badge.status-in_progress { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); font-weight: 700; }
.status-badge.status-done { border-color: var(--success); background: var(--success); color: #fff; font-weight: 700; }

/* TYPOGRAFIA */
.task-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.task-title { font-size: 1.05rem !important; font-weight: 500 !important; color: var(--text-primary) !important; letter-spacing: -0.01em; }
.task-title.completed { text-decoration: line-through !important; color: var(--text-muted) !important; opacity: 0.5; }
.task-description { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.task-meta-row { display: flex; align-items: center; gap: 12px; font-size: 0.78rem; color: var(--text-muted); margin-top: 12px; font-weight: 500; }

/* BADGES */
.task-project-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-primary); background: var(--accent-light); padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--border-light); }
.task-project-badge-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.priority-badge { font-size: 0.7rem; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-sm); letter-spacing: 0.05em; text-transform: uppercase; }
.priority-badge.priority-1 { background: rgba(99,102,241,0.15); color: #818cf8; }
.priority-badge.priority-2 { background: rgba(245,158,11,0.15); color: #fbbf24; }
.priority-badge.priority-3 { background: rgba(244,63,94,0.15); color: #fb7185; }
.overdue-badge { font-size: 0.7rem; background: rgba(244,63,94,0.15); color: #fb7185; padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; }

/* PROGRESS BAR */
.task-progress-block { margin-top: 14px; cursor: pointer; opacity: 0.7; transition: opacity 0.3s var(--smooth); }
.task-progress-block:hover { opacity: 1; }
.task-progress-block.mini { margin-top: 8px; }
.task-progress-header { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 8px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.task-progress-pct { font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.task-progress-label { font-weight: 600; }
.task-progress-block.mini .task-progress-pct { font-size: 0.7rem; }
.task-progress-track { width: 100%; height: 10px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.task-progress-block.mini .task-progress-track { height: 8px; }
.task-progress-fill { height: 100%; background: linear-gradient(135deg, var(--navy-500), var(--accent)); border-radius: var(--radius-full); transition: width 0.6s ease; }
.task-progress-fill.complete { background: linear-gradient(135deg, #10b981, #34d399); }

/* ACTION BUTTONS */
.task-actions-row button, .task-expand-btn {
    background: transparent; border: none; color: var(--text-muted);
    width: 32px; height: 32px; border-radius: var(--radius-md);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all 0.2s var(--smooth); font-size: 0.9rem; padding: 0; flex-shrink: 0;
}
.task-actions-row button:hover, .task-expand-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.task-expand-btn.expanded { transform: rotate(90deg); color: var(--accent); }

/* INLINE SUBTASKS - Glowing tree */
.inline-subtasks {
    margin: -4px 0 8px 36px; padding-left: 20px;
    border-left: 1px solid transparent;
    border-image: linear-gradient(to bottom, var(--accent) 0%, rgba(255,255,255,0.05) 100%) 1;
    display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px;
}
.inline-subtasks .inline-subtasks { border-image: linear-gradient(to bottom, rgba(139,92,246,0.5) 0%, rgba(255,255,255,0.03) 100%) 1; margin-left: 16px; }
.inline-subtasks .task-item { background: transparent; backdrop-filter: none; border: none; box-shadow: none; padding: 10px 14px; grid-template-columns: 18px 1fr auto; gap: 0 14px; border-radius: var(--radius-md); }
.inline-subtasks .task-item:hover { background: var(--bg-secondary); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); transform: translateX(4px); }
.inline-subtasks .status-badge { width: 18px; height: 18px; font-size: 9px; border-width: 1px; }
.inline-subtasks .task-title { font-size: 0.9rem !important; color: var(--text-secondary) !important; font-weight: 400 !important; }
.inline-subtasks .task-item:hover .task-title { color: var(--text-primary) !important; }
.inline-subtasks .task-description { font-size: 0.8rem; }
.inline-subtasks .inline-subtasks .task-title { font-size: 0.85rem !important; }
.inline-subtask-add { margin-top: 6px; padding: 10px 14px; border-radius: var(--radius-md); border: 1px dashed rgba(255,255,255,0.1); background: transparent; transition: all 0.3s var(--smooth); }
.inline-subtask-add:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.02); }
.inline-subtask-add:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(99,102,241,0.15); }
.inline-subtask-add input { width: 100%; background: transparent; border: none; outline: none; color: var(--text-primary); font-size: 0.9rem; }
.inline-subtask-add input::placeholder { color: var(--text-muted); transition: color 0.3s; }
.inline-subtask-add input:focus::placeholder { color: transparent; }

/* PROJECT CHIPS */
.project-filter-bar { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 20px; margin-bottom: 24px; scrollbar-width: none; }
.project-filter-bar::-webkit-scrollbar { display: none; }
.project-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-secondary); border: 1px solid var(--border-color); padding: 8px 18px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: all 0.25s ease; }
.project-chip:hover { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--accent); }
.project-chip.active { background: var(--accent); color: white; border-color: var(--accent); font-weight: 600; }
.project-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.project-chip-progress { font-size: 0.7rem; color: var(--text-muted); }
.project-chip-add { background: transparent; border: 1px dashed rgba(255,255,255,0.15); box-shadow: none; }
.project-chip-add:hover { border-style: solid; border-color: var(--text-secondary); }

/* Overdue */
.task-overdue { box-shadow: var(--edge-light), 0 4px 16px rgba(0,0,0,0.2), 0 0 0 1px rgba(244,63,94,0.2) !important; }

/* Subtasks modal (legacy) */
.subtasks-list { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; }
.subtask-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color); }
.subtask-item:last-child { border-bottom: none; }
.subtask-item .habit-check { width: 24px; height: 24px; font-size: var(--font-xs); }
/* ============== HABITS ============== */
.habit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

.habit-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all 200ms ease;
}

.habit-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.habit-check {
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-sm);
    color: transparent;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
}

.habit-check:hover {
    border-color: var(--success);
}

.habit-check.completed {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.habit-info {
    flex: 1;
}

.habit-name {
    font-size: var(--font-base);
    font-weight: 500;
}

.habit-streak {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Habits Stats Panel */
.habits-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.habit-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}

.habit-stat-value {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--accent);
}

.habit-stat-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Habit Category Header */
.habit-category-header {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    padding-left: var(--space-1);
}

.habit-category-header:first-child {
    margin-top: 0;
}

/* Habit Card Enhancements */
.habit-paused {
    opacity: 0.6;
}

.habit-paused .habit-check {
    border-style: dashed;
    cursor: default;
}

.habit-done {
    border-color: var(--success);
    border-left: 3px solid var(--success);
}

.habit-paused-badge {
    font-size: var(--font-xs);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    margin-left: var(--space-2);
    font-weight: 400;
}

.habit-actions {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-shrink: 0;
}

.habit-actions .task-edit,
.habit-actions .task-delete {
    opacity: 0;
    transition: opacity var(--transition-fast);
    padding: var(--space-1);
    font-size: var(--font-sm);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}

.habit-card:hover .habit-actions .task-edit,
.habit-card:hover .habit-actions .task-delete {
    opacity: 1;
}

.habit-actions .task-edit:hover {
    color: var(--accent);
    background: var(--bg-tertiary);
}

.habit-actions .task-delete:hover {
    color: var(--error);
    background: var(--bg-tertiary);
}

/* Habit Heatmap */
.habit-heatmap {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    gap: 3px;
    margin: var(--space-4) 0;
}

.heatmap-cell {
    aspect-ratio: 1;
    border-radius: 4px;
    background: var(--bg-tertiary);
    min-width: 0;
    transition: background-color var(--transition-fast);
}

.heatmap-cell.level-1 {
    background: color-mix(in srgb, var(--success) 35%, var(--bg-tertiary));
}

.heatmap-cell.level-2 {
    background: color-mix(in srgb, var(--success) 65%, var(--bg-tertiary));
}

.heatmap-cell.level-3 {
    background: var(--success);
}

.heatmap-info {
    text-align: center;
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

/* ============== ROUTINES ============== */

/* Stats panel (like habits-stats) */
.routine-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.routine-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
}

.routine-stat-value {
    font-size: var(--font-2xl);
    font-weight: 700;
    color: var(--accent);
}

.routine-stat-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-1);
}

/* Progress bar */
.routine-progress-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.routine-progress-fill {
    height: 100%;
    background: var(--success);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
}

.routine-progress-text {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
    text-align: right;
}

.routine-all-done {
    text-align: center;
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--success);
    padding: var(--space-5);
    background: var(--bg-secondary);
    border: 1px solid var(--success);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}

/* Routine name header on today view */
.routine-today-name {
    font-size: var(--font-lg);
    font-weight: 600;
    margin-bottom: var(--space-4);
}

/* Blocks (checklist groups) */
.routine-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.routine-block-header {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

/* Checklist items (like habit-card pattern) */
.routine-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    transition: background var(--transition-fast);
}

.routine-item:hover {
    background: var(--bg-tertiary);
}

.routine-item + .routine-item {
    border-top: 1px solid var(--border-color);
}

.routine-item-done {
    opacity: 0.6;
}

.routine-item-done .routine-item-name {
    text-decoration: line-through;
    color: var(--text-muted);
}

.routine-check {
    width: 36px;
    height: 36px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--font-sm);
    color: transparent;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    background: transparent;
}

.routine-check:hover {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.1);
}

.routine-check.completed {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.routine-item-info {
    flex: 1;
    min-width: 0;
}

.routine-item-name {
    font-size: var(--font-base);
    font-weight: 500;
}

.routine-habit-link {
    font-size: var(--font-xs);
    color: var(--accent);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ---- Manage view ---- */

.routine-manage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--space-4);
}

.routine-manage-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.routine-manage-card:hover {
    border-color: var(--text-muted);
}

.routine-manage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-4) var(--space-4) var(--space-3);
}

.routine-manage-name {
    font-size: var(--font-base);
    font-weight: 600;
    margin: 0;
}

.routine-manage-desc {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.routine-manage-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.routine-manage-actions .btn {
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.routine-manage-card:hover .routine-manage-actions .btn {
    opacity: 1;
}

.routine-schedule-badges {
    display: flex;
    gap: var(--space-1);
    padding: 0 var(--space-4) var(--space-3);
    flex-wrap: wrap;
}

.routine-day-badge {
    font-size: 10px;
    padding: 2px 8px;
    background: var(--accent);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.routine-day-badge--empty {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.routine-manage-body {
    border-top: 1px solid var(--border-color);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.routine-manage-block {
    margin-bottom: var(--space-3);
}

.routine-manage-block:last-child {
    margin-bottom: 0;
}

.routine-manage-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-color);
}

.routine-manage-block-name {
    cursor: pointer;
    transition: color var(--transition-fast);
}

.routine-manage-block-name:hover {
    color: var(--accent);
}

.btn-delete-small {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-xs);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    opacity: 0.5;
    transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.btn-delete-small:hover {
    opacity: 1;
    color: var(--danger);
    background: var(--bg-tertiary);
}

.routine-manage-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-2);
    font-size: var(--font-sm);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
}

.routine-manage-item:hover {
    background: var(--bg-tertiary);
}

.routine-manage-item-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 2px 4px;
    margin: -2px -4px;
    transition: color var(--transition-fast);
}

.routine-manage-item-name:hover {
    color: var(--accent);
}


.routine-manage-footer {
    display: flex;
    gap: var(--space-2);
    padding: 0 var(--space-4) var(--space-4);
}

.routine-habit-badge {
    font-size: 10px;
    padding: 1px 6px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

/* Schedule modal */
.routine-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.routine-day-checkbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-sm);
    font-weight: 500;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.routine-day-checkbox:hover {
    background: var(--bg-tertiary);
}

.routine-day-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--accent);
}

/* Today widget (dashboard) */
.routine-today-card .routine-mini-progress {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    font-weight: 600;
}

.routine-all-done-mini {
    text-align: center;
    color: var(--success);
    font-weight: 600;
    padding: var(--space-3);
}

.routine-mini-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.routine-mini-item + .routine-mini-item {
    border-top: 1px solid var(--border-color);
}

.routine-mini-check {
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
    background: transparent;
    color: transparent;
    font-size: 11px;
}

.routine-mini-check:hover {
    border-color: var(--success);
    background: rgba(34, 197, 94, 0.1);
}

.routine-mini-check.completed {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.routine-mini-name {
    font-size: var(--font-sm);
    font-weight: 500;
}

@media (max-width: 768px) {
    .routine-stats {
        grid-template-columns: 1fr;
    }
    .routine-manage-grid {
        grid-template-columns: 1fr;
    }
    .routine-days-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============== CALENDAR ============== */
.calendar-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

#calendar-month {
    font-size: var(--font-base);
    font-weight: 600;
    min-width: 140px;
    text-align: center;
}

.calendar-grid {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: var(--space-2);
}

.calendar-day-name {
    text-align: center;
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    padding: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: var(--font-sm);
    font-weight: 400;
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    position: relative;
    gap: 2px;
}

.calendar-day:hover {
    background: var(--bg-tertiary);
}

.calendar-day.today {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.calendar-day.selected {
    background: var(--accent);
    color: white;
    font-weight: 600;
}

.calendar-day.other-month {
    color: var(--text-muted);
}

/* Calendar dots (indicators) */
.calendar-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
    position: absolute;
    bottom: 4px;
}

.calendar-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.calendar-dot--task {
    background: var(--accent);
}

.calendar-dot--event {
    background: var(--success);
}

.calendar-day.today .calendar-dot--task,
.calendar-day.selected .calendar-dot--task {
    background: rgba(255, 255, 255, 0.7);
}

.calendar-day.today .calendar-dot--event,
.calendar-day.selected .calendar-dot--event {
    background: rgba(255, 255, 255, 0.5);
}

/* Calendar section labels */
.calendar-section-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--space-4);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-color);
}

.calendar-section-label:first-of-type {
    margin-top: 0;
}

.calendar-section-icon {
    font-size: var(--font-base);
}

/* Calendar task items */
.calendar-task-item {
    gap: var(--space-3);
}

.calendar-task-check {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    color: transparent;
    transition: all var(--transition-fast);
}

.calendar-task-check:hover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
}

.calendar-task-check.completed {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.calendar-task-completed {
    opacity: 0.6;
}

.task-done-text {
    text-decoration: line-through;
    color: var(--text-muted) !important;
}

.calendar-task-priority {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    margin-top: 2px;
}

.calendar-task-priority.priority-1 {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}

.calendar-task-priority.priority-2 {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.calendar-task-priority.priority-3 {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.day-events {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.day-events h3 {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

/* Calendar enhancements */
.event-color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--space-1);
    flex-shrink: 0;
}

.calendar-today-btn {
    font-size: var(--font-xs);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    color: var(--text-primary);
    margin: 0 var(--space-2);
}

.calendar-today-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.event-time-range {
    font-size: var(--font-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.day-event-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    margin-bottom: var(--space-1);
}

.day-event-item .event-content {
    flex: 1;
    min-width: 0;
}

.day-event-item .task-edit,
.day-event-item .task-delete {
    flex-shrink: 0;
}

/* ============== EVENTS ============== */
.event-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    border-left: 3px solid var(--accent);
}

.event-time {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--accent);
    min-width: 45px;
    font-variant-numeric: tabular-nums;
}

.event-content {
    flex: 1;
}

.event-title {
    font-size: var(--font-base);
    font-weight: 500;
}

.event-desc {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-top: 2px;
}

.event-item-small {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.event-time-small {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--accent);
    min-width: 40px;
    font-variant-numeric: tabular-nums;
}

.event-desc-small {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============== FINANCE ============== */
.finance-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-8);
}

.summary-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    transition: border-color 200ms ease, transform 200ms ease;
}

.summary-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.summary-label {
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.summary-value {
    font-size: var(--font-2xl);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

.summary-value.income {
    color: var(--success);
}

.summary-value.expense {
    color: var(--danger);
}

.summary-value.balance {
    color: var(--text-primary);
}

.transaction-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    transition: all 180ms ease;
}

.transaction-item:hover {
    border-color: var(--border-color);
    background: var(--surface-card-hover);
}

.transaction-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-sm);
    font-weight: 600;
    flex-shrink: 0;
}

.transaction-icon.income {
    background: var(--success-light);
    color: var(--success);
}

.transaction-icon.expense {
    background: var(--danger-light);
    color: var(--danger);
}

.transaction-info {
    flex: 1;
    min-width: 0;
}

.transaction-desc {
    font-size: var(--font-base);
    font-weight: 500;
}

.transaction-date {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.transaction-amount {
    font-size: var(--font-base);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.transaction-amount.income {
    color: var(--success);
}

.transaction-amount.expense {
    color: var(--danger);
}

/* Period bar */
.finance-period-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.period-toggle {
    display: flex;
    gap: 2px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 3px;
}

.period-btn {
    padding: var(--space-1h) var(--space-4);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-muted);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.period-btn.active {
    background: var(--accent);
    color: #fff;
    box-shadow: none;
}

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

.period-arrow {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.period-arrow:hover {
    background: var(--bg-hover);
    border-color: var(--text-muted);
}

#finance-period-label {
    font-weight: 600;
    font-size: var(--font-base);
    min-width: 140px;
    text-align: center;
}

/* Finance section groups */
.finance-group {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.finance-group-header {
    font-size: var(--font-base);
    font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: var(--space-5);
    padding: var(--space-3) 0;
    border-bottom: 2px solid var(--border-color);
}

/* Sections inside finance-group lose their own card styling */
.finance-group .savings-goals-section,
.finance-group .category-budgets-section,
.finance-group .debts-section,
.finance-group .net-worth-section,
.finance-group .category-breakdown,
.finance-group .finance-stats,
.finance-group .finance-summary,
.finance-group .budget-panel {
    border: none;
    background: none;
    padding: 0;
    margin-bottom: var(--space-4);
}

.finance-group > :last-child {
    margin-bottom: 0;
}

.summary-sub {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Category breakdown */
.category-breakdown {
    margin-bottom: var(--space-4);
}

.category-breakdown-title {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.category-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1h) 0;
    font-size: var(--font-sm);
}

.category-bar-emoji {
    font-size: 16px;
    width: 22px;
    text-align: center;
}

.category-bar-name {
    min-width: 90px;
    font-size: var(--font-sm);
    font-weight: 500;
}

.category-bar-track {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    min-width: 50px;
}

.category-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--danger);
    transition: width 0.4s ease;
}

.category-bar-amount {
    min-width: 70px;
    text-align: right;
    font-weight: 600;
    font-size: var(--font-sm);
    font-variant-numeric: tabular-nums;
}

.category-bar-percent {
    min-width: 36px;
    text-align: right;
    color: var(--text-muted);
    font-size: var(--font-xs);
    font-variant-numeric: tabular-nums;
}

/* Transaction day headers */
.transaction-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
    margin-top: var(--space-4);
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.transaction-day-header:first-child {
    margin-top: 0;
}

.transaction-day-sum {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.transaction-day-sum.positive {
    color: var(--success);
}

.transaction-day-sum.negative {
    color: var(--danger);
}

.recurring-indicator {
    font-size: 12px;
    color: var(--accent);
    margin-left: 4px;
}

/* Recurring section */
.recurring-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.recurring-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.recurring-title {
    font-size: var(--font-base);
    font-weight: 600;
}

.recurring-summary {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--font-sm);
    flex-wrap: wrap;
}

.recurring-summary-item {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.recurring-summary-item.income {
    border-left: 3px solid var(--success);
}

.recurring-summary-item.expense {
    border-left: 3px solid var(--danger);
}

.recurring-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    transition: border-color var(--transition-fast);
}

.recurring-item:hover {
    border-color: var(--text-muted);
}

.recurring-item-emoji {
    font-size: 20px;
    width: 32px;
    text-align: center;
}

.recurring-item-info {
    flex: 1;
}

.recurring-item-desc {
    font-weight: 500;
    font-size: var(--font-sm);
}

.recurring-item-freq {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.recurring-item-amount {
    font-weight: 600;
    font-size: var(--font-base);
    font-variant-numeric: tabular-nums;
}

.recurring-item-amount.income {
    color: var(--success);
}

.recurring-item-amount.expense {
    color: var(--danger);
}

/* Recurring enhanced styles */
.recurring-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.recurring-item.inactive {
    opacity: 0.5;
}

.recurring-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--font-xs);
    font-weight: 500;
    white-space: nowrap;
}

.recurring-badge.overdue { background: rgba(239,68,68,0.15); color: var(--danger); }
.recurring-badge.soon { background: rgba(245,158,11,0.15); color: #f59e0b; }
.recurring-badge.safe { background: rgba(34,197,94,0.15); color: var(--success); }
.recurring-badge.paused { background: var(--bg-tertiary); color: var(--text-muted); }

.recurring-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.recurring-total-bar {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
    font-size: var(--font-sm);
    flex-wrap: wrap;
}

.recurring-total-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recurring-total-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.recurring-total-value {
    font-weight: 700;
}

/* Emoji picker for categories */
.emoji-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-2);
}

.emoji-option {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    background: var(--bg-tertiary);
}

.emoji-option:hover {
    border-color: var(--border-color);
}

.emoji-option.selected {
    border-color: var(--accent);
    background: var(--accent-light);
}

/* ============== DIARY ============== */
/* ============ WRITER (Rich Text Editor) ============ */

/* Layout: sidebar + main editor */
.writer-layout {
    display: flex;
    height: calc(100vh - 80px);
    gap: 0;
    margin: calc(-1 * var(--space-8));
    margin-top: 0;
}

/* --- Sidebar --- */
.writer-sidebar {
    width: 260px;
    min-width: 200px;
    max-width: 320px;
    background: var(--surface-card);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.writer-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--border-color);
}
.writer-sidebar-title {
    font-size: var(--font-base);
    font-weight: 700;
    margin: 0;
}
.writer-search {
    margin: var(--space-2) var(--space-2) 0;
    font-size: var(--font-sm);
}
.writer-entries-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
}
.writer-entries-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-sm);
    padding: var(--space-4);
}
.writer-entry-item {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    cursor: pointer;
    margin-bottom: 2px;
    transition: background 0.1s;
}
.writer-entry-item:hover {
    background: var(--bg-tertiary);
}
.writer-entry-item.active {
    background: color-mix(in srgb, var(--accent) 15%, var(--bg-secondary));
    border-left: 3px solid var(--accent);
}
.writer-entry-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: 2px;
}
.writer-entry-mood {
    font-size: 0.9rem;
}
.writer-entry-date {
    font-size: var(--font-xs);
    color: var(--text-muted);
    flex: 1;
}
.writer-entry-delete {
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 4px;
    transition: opacity 0.15s;
}
.writer-entry-item:hover .writer-entry-delete {
    opacity: 1;
}
.writer-entry-delete:hover {
    color: var(--danger);
}
.writer-entry-preview {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.writer-entry-tags {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}
.writer-sidebar-footer {
    padding: var(--space-2) var(--space-3);
    border-top: 1px solid var(--border-color);
}

/* --- Main editor --- */
.writer-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Toolbar */
.writer-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    min-height: 44px;
}
.writer-toolbar-group {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-right: var(--space-2);
    border-right: 1px solid var(--border-color);
    margin-right: var(--space-1);
}
.writer-toolbar-group:last-child {
    border-right: none;
    margin-right: 0;
}
.writer-toolbar-spacer {
    flex: 1;
}
.writer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: var(--font-sm);
    color: var(--text-primary);
    transition: background 0.1s;
}
.writer-btn:hover {
    background: var(--bg-tertiary);
}
.writer-btn.active {
    background: color-mix(in srgb, var(--accent) 20%, var(--bg-secondary));
    color: var(--accent);
}
.writer-btn-save {
    width: auto;
    padding: 0 var(--space-3);
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius);
}
.writer-btn-save:hover {
    opacity: 0.9;
    background: var(--accent);
}
.writer-select {
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-xs);
    cursor: pointer;
    max-width: 130px;
}
.writer-color {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
}

/* Mood mini buttons in toolbar */
.writer-mood-mini {
    display: flex;
    gap: 2px;
}
.writer-mood-btn {
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.1s;
}
.writer-mood-btn:hover {
    border-color: var(--accent);
}
.writer-mood-btn.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, var(--bg-secondary));
}

/* Tags bar */
.writer-tags-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    font-size: var(--font-sm);
}
.writer-tags-label {
    color: var(--text-muted);
    font-weight: 500;
    flex-shrink: 0;
}
.writer-tags-input {
    border: none !important;
    background: transparent !important;
    padding: var(--space-1) 0 !important;
    font-size: var(--font-sm);
    flex: 1;
}
.writer-tags-input:focus {
    outline: none;
    box-shadow: none !important;
}

/* Page area - the "paper" */
.writer-page-wrapper {
    flex: 1;
    overflow-y: auto;
    background: var(--bg-tertiary);
    display: flex;
    justify-content: center;
    padding: var(--space-4);
}
.writer-page {
    position: relative;
    width: 100%;
    max-width: 900px;
    min-height: 600px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.writer-editor {
    padding: var(--space-6) var(--space-8);
    min-height: 500px;
    outline: none;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.writer-editor:focus {
    outline: none;
}
.writer-editor:empty::before {
    content: 'Zacznij pisac...';
    color: var(--text-muted);
    pointer-events: none;
}

/* Drawing canvas overlay */
.writer-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.5;
    z-index: 2;
}

/* Status bar */
.writer-statusbar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-1) var(--space-3);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* Diary Tags (reused in sidebar) */
.diary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--space-1);
}
.diary-tag {
    font-size: var(--font-xs);
    background: var(--bg-tertiary);
    color: var(--text-muted);
    padding: 1px 8px;
    border-radius: var(--radius-full);
}

/* Mobile */
@media (max-width: 768px) {
    .writer-layout {
        flex-direction: column;
        height: auto;
    }
    .writer-sidebar {
        width: 100%;
        max-width: none;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    .writer-page-wrapper {
        padding: var(--space-2);
    }
    .writer-editor {
        padding: var(--space-4);
    }
    .writer-toolbar {
        padding: var(--space-1) var(--space-2);
    }
    .writer-toolbar-group {
        padding-right: var(--space-1);
    }
}

@media (max-width: 640px) {
    .mood-picker {
        gap: var(--space-1);
    }
    .mood-btn {
        min-width: 50px;
        font-size: 1.2rem;
        padding: var(--space-1);
    }
}

/* ============== REMINDERS ============== */
.reminder-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.reminder-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.reminder-item:hover {
    border-color: var(--text-muted);
}

.reminder-icon {
    width: 36px;
    height: 36px;
    background: var(--accent-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
}

.reminder-info {
    flex: 1;
}

.reminder-title {
    font-size: var(--font-base);
    font-weight: 500;
}

.reminder-time {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* ============== STRUKTURYZATOR ============== */
.structures-layout {
    display: flex;
    gap: var(--space-5);
    height: calc(100vh - 140px);
}

.structures-sidebar {
    width: 260px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    overflow-y: auto;
    flex-shrink: 0;
}

.structures-sidebar h3 {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

.structures-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.structure-item {
    padding: var(--space-3);
    padding-left: var(--space-4);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    position: relative;
    border-left: 3px solid var(--border-color);
}

.structure-item:hover {
    background: var(--bg-hover);
}

.structure-item.active {
    background: var(--accent-light);
    border-left-color: var(--accent);
}

/* Kolorowy pasek dla glownych problemow */
.main-problem-item[data-color="1"] { border-left-color: var(--branch-1); }
.main-problem-item[data-color="2"] { border-left-color: var(--branch-2); }
.main-problem-item[data-color="3"] { border-left-color: var(--branch-3); }
.main-problem-item[data-color="4"] { border-left-color: var(--branch-4); }
.main-problem-item[data-color="5"] { border-left-color: var(--branch-5); }
.main-problem-item[data-color="6"] { border-left-color: var(--branch-6); }
.main-problem-item[data-color="7"] { border-left-color: var(--branch-7); }
.main-problem-item[data-color="8"] { border-left-color: var(--branch-8); }
.main-problem-item[data-color="9"] { border-left-color: var(--branch-9); }
.main-problem-item[data-color="10"] { border-left-color: var(--branch-10); }
.main-problem-item[data-color="11"] { border-left-color: var(--branch-11); }
.main-problem-item[data-color="12"] { border-left-color: var(--branch-12); }

.main-problem-item.active[data-color="1"] { background: rgba(99, 102, 241, 0.08); }
.main-problem-item.active[data-color="2"] { background: rgba(236, 72, 153, 0.08); }
.main-problem-item.active[data-color="3"] { background: rgba(245, 158, 11, 0.08); }
.main-problem-item.active[data-color="4"] { background: rgba(16, 185, 129, 0.08); }
.main-problem-item.active[data-color="5"] { background: rgba(59, 130, 246, 0.08); }
.main-problem-item.active[data-color="6"] { background: rgba(139, 92, 246, 0.08); }
.main-problem-item.active[data-color="7"] { background: rgba(239, 68, 68, 0.08); }
.main-problem-item.active[data-color="8"] { background: rgba(20, 184, 166, 0.08); }
.main-problem-item.active[data-color="9"] { background: rgba(249, 115, 22, 0.08); }
.main-problem-item.active[data-color="10"] { background: rgba(6, 182, 212, 0.08); }
.main-problem-item.active[data-color="11"] { background: rgba(132, 204, 22, 0.08); }
.main-problem-item.active[data-color="12"] { background: rgba(225, 29, 72, 0.08); }

.structure-item-title {
    font-size: var(--font-sm);
    font-weight: 500;
    padding-right: 24px;
}

.structure-item-meta {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.btn-delete-small {
    position: absolute;
    right: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-xs);
    padding: var(--space-1);
    opacity: 0;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.structure-item:hover .btn-delete-small {
    opacity: 1;
}

.btn-delete-small:hover {
    color: var(--danger);
}

.structures-main {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    overflow: auto;
}

/* ---- Structure Wizard ---- */
.wizard-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}
.wizard-branches {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wizard-branch-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.wizard-branch-num {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-muted);
    min-width: 24px;
    text-align: right;
}
.wizard-branch-input {
    flex: 1;
}
.wizard-branch-remove {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.wizard-branch-remove:hover {
    background: var(--danger);
    color: #fff;
}

/* Wizard Preview */
.wizard-preview-tree {
    padding: var(--space-4);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
}
.wizard-preview-root {
    font-size: var(--font-lg);
    font-weight: 700;
    text-align: center;
    padding: var(--space-3);
    background: var(--bg-primary);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
}
.wizard-preview-branches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}
.wizard-preview-branch {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: var(--font-sm);
    font-weight: 500;
}
.wizard-preview-info {
    text-align: center;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--space-3);
}
.wizard-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
}

.structure-view {
    min-height: 100%;
}

/* ==========================================================================
   STRUKTURYZATOR - PREMIUM DESIGN
   ========================================================================== */

/* Tree - Horizontal Layout */
.tree-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 32px;
    min-height: 360px;
    position: relative;
    background-color: var(--bg-primary);
    background-image: radial-gradient(var(--border-light) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    overflow: auto;
}

.tree-root {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

/* ========== NODE BOX - Premium Design ========== */
.tree-node-box {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tree-node-box:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tree-node-box:active {
    transform: scale(0.98);
    transition-duration: 0.1s;
}

/* Color pillar inside node (left accent bar) */
.tree-node-box::before {
    content: '';
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 8px;
    width: 4px;
    border-radius: var(--radius-full);
    background: var(--border-color);
    transition: background 0.2s;
}

/* ========== DEPTH-BASED SIZING ========== */
.depth-0 .tree-node-box,
.tree-node-box.root {
    width: 240px;
    padding: 20px 28px 20px 24px;
    border-radius: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.04);
}

.depth-0 .tree-node-box::before,
.tree-node-box.root::before {
    display: none;
}

.depth-1 > .tree-node-box { width: 200px; }
.depth-2 > .tree-node-box { width: 170px; padding: 12px 16px 12px 20px; }
.depth-3 > .tree-node-box,
.depth-deep > .tree-node-box { width: 150px; padding: 10px 14px 10px 18px; }

/* ========== TYPOGRAPHY BY DEPTH ========== */
.tree-node-text {
    font-weight: 500;
    word-break: break-word;
    color: var(--text-primary);
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.depth-0 .tree-node-text,
.tree-node-box.root .tree-node-text {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text-primary) !important;
    letter-spacing: -0.01em;
    -webkit-line-clamp: 2;
}

.depth-1 > .tree-node-box .tree-node-text {
    font-size: var(--font-md);
    font-weight: 600;
}

.depth-2 > .tree-node-box .tree-node-text {
    font-size: var(--font-base);
    font-weight: 500;
}

.depth-3 > .tree-node-box .tree-node-text,
.depth-deep > .tree-node-box .tree-node-text {
    font-size: var(--font-sm);
    font-weight: 500;
}

/* ========== BRANCH COLORS - Tinted BG + Pillar ========== */
.tree-node-box[data-color="1"] { background: rgba(99, 102, 241, 0.05); border-color: rgba(99, 102, 241, 0.12); }
.tree-node-box[data-color="2"] { background: rgba(236, 72, 153, 0.05); border-color: rgba(236, 72, 153, 0.12); }
.tree-node-box[data-color="3"] { background: rgba(245, 158, 11, 0.05); border-color: rgba(245, 158, 11, 0.12); }
.tree-node-box[data-color="4"] { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.12); }
.tree-node-box[data-color="5"] { background: rgba(59, 130, 246, 0.05); border-color: rgba(59, 130, 246, 0.12); }
.tree-node-box[data-color="6"] { background: rgba(139, 92, 246, 0.05); border-color: rgba(139, 92, 246, 0.12); }
.tree-node-box[data-color="7"] { background: rgba(239, 68, 68, 0.05); border-color: rgba(239, 68, 68, 0.12); }
.tree-node-box[data-color="8"] { background: rgba(20, 184, 166, 0.05); border-color: rgba(20, 184, 166, 0.12); }
.tree-node-box[data-color="9"] { background: rgba(249, 115, 22, 0.05); border-color: rgba(249, 115, 22, 0.12); }
.tree-node-box[data-color="10"] { background: rgba(6, 182, 212, 0.05); border-color: rgba(6, 182, 212, 0.12); }
.tree-node-box[data-color="11"] { background: rgba(132, 204, 22, 0.05); border-color: rgba(132, 204, 22, 0.12); }
.tree-node-box[data-color="12"] { background: rgba(225, 29, 72, 0.05); border-color: rgba(225, 29, 72, 0.12); }

/* Pillar colors */
.tree-node-box[data-color="1"]::before { background: var(--branch-1); }
.tree-node-box[data-color="2"]::before { background: var(--branch-2); }
.tree-node-box[data-color="3"]::before { background: var(--branch-3); }
.tree-node-box[data-color="4"]::before { background: var(--branch-4); }
.tree-node-box[data-color="5"]::before { background: var(--branch-5); }
.tree-node-box[data-color="6"]::before { background: var(--branch-6); }
.tree-node-box[data-color="7"]::before { background: var(--branch-7); }
.tree-node-box[data-color="8"]::before { background: var(--branch-8); }
.tree-node-box[data-color="9"]::before { background: var(--branch-9); }
.tree-node-box[data-color="10"]::before { background: var(--branch-10); }
.tree-node-box[data-color="11"]::before { background: var(--branch-11); }
.tree-node-box[data-color="12"]::before { background: var(--branch-12); }

/* Hover glow per color */
.tree-node-box[data-color="1"]:hover { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="2"]:hover { box-shadow: 0 8px 24px rgba(236, 72, 153, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="3"]:hover { box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="4"]:hover { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="5"]:hover { box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="6"]:hover { box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="7"]:hover { box-shadow: 0 8px 24px rgba(239, 68, 68, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="8"]:hover { box-shadow: 0 8px 24px rgba(20, 184, 166, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="9"]:hover { box-shadow: 0 8px 24px rgba(249, 115, 22, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="10"]:hover { box-shadow: 0 8px 24px rgba(6, 182, 212, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="11"]:hover { box-shadow: 0 8px 24px rgba(132, 204, 22, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }
.tree-node-box[data-color="12"]:hover { box-shadow: 0 8px 24px rgba(225, 29, 72, 0.15), 0 4px 12px rgba(0, 0, 0, 0.04); }

/* Completed colors */
.tree-node-box[data-color="1"].completed, .tree-node-box[data-color="2"].completed,
.tree-node-box[data-color="3"].completed, .tree-node-box[data-color="4"].completed,
.tree-node-box[data-color="5"].completed, .tree-node-box[data-color="6"].completed,
.tree-node-box[data-color="7"].completed, .tree-node-box[data-color="8"].completed,
.tree-node-box[data-color="9"].completed, .tree-node-box[data-color="10"].completed,
.tree-node-box[data-color="11"].completed, .tree-node-box[data-color="12"].completed {
    background: rgba(22, 163, 74, 0.04);
    border-color: rgba(22, 163, 74, 0.2);
}

/* ========== COMPLETED STATE ========== */
.tree-node-box.completed {
    opacity: 0.8;
}

.tree-node-box.completed::before {
    background: var(--success) !important;
}

.tree-node-box.completed .tree-node-text {
    text-decoration: line-through;
    color: var(--text-muted);
}

.tree-node-box.root.completed {
    opacity: 0.85;
}

.tree-node-box.root.completed .tree-node-text {
    color: var(--success) !important;
    text-decoration: line-through;
}

/* ========== ACTION BUTTONS ========== */
.btn-delete-node {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: white;
    border: 2px solid var(--bg-primary);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.btn-delete-node:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}

.tree-node-box:hover .btn-delete-node,
.tree-node:hover > .tree-node-box .btn-delete-node {
    opacity: 1;
    transform: scale(1);
}

.btn-add-branch {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--accent);
    border: 2px solid var(--bg-primary);
    color: white;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tree-node-box:hover .btn-add-branch,
.btn-add-branch:hover {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.btn-add-branch:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
    transform: translateX(-50%) scale(1.1);
}

/* ========== TREE LAYOUT ========== */
.tree-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.tree-children {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    position: relative;
    padding-top: 0;
    align-items: flex-start;
}

/* ========== TREE LINES ========== */

/* Vertical line down from parent */
.tree-root.has-children > .tree-node-box::after,
.tree-node.has-children > .tree-node-box::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    width: 2px;
    height: 16px;
    transform: translateX(-50%);
    background: var(--border-color);
    border-radius: 2px;
}

/* Horizontal line connecting children */
.tree-children::before {
    content: '';
    position: absolute;
    top: -16px;
    height: 2px;
    background: var(--border-color);
    left: var(--h-line-left, 50%);
    width: var(--h-line-width, 0px);
    transform: none;
    border-radius: 2px;
}

/* Vertical line up from child */
.tree-children > .tree-node::before {
    content: '';
    position: absolute;
    top: -17px;
    left: 50%;
    width: 2px;
    height: 17px;
    transform: translateX(-50%);
    background: var(--border-color);
    border-radius: 2px;
}

.tree-children > .tree-node::after { display: none; }

/* ========== COLORED LINES ========== */
.tree-children[data-parent-color="1"]::before { background: rgba(99, 102, 241, 0.4) !important; }
.tree-children[data-parent-color="2"]::before { background: rgba(236, 72, 153, 0.4) !important; }
.tree-children[data-parent-color="3"]::before { background: rgba(245, 158, 11, 0.4) !important; }
.tree-children[data-parent-color="4"]::before { background: rgba(16, 185, 129, 0.4) !important; }
.tree-children[data-parent-color="5"]::before { background: rgba(59, 130, 246, 0.4) !important; }
.tree-children[data-parent-color="6"]::before { background: rgba(139, 92, 246, 0.4) !important; }
.tree-children[data-parent-color="7"]::before { background: rgba(239, 68, 68, 0.4) !important; }
.tree-children[data-parent-color="8"]::before { background: rgba(20, 184, 166, 0.4) !important; }
.tree-children[data-parent-color="9"]::before { background: rgba(249, 115, 22, 0.4) !important; }
.tree-children[data-parent-color="10"]::before { background: rgba(6, 182, 212, 0.4) !important; }
.tree-children[data-parent-color="11"]::before { background: rgba(132, 204, 22, 0.4) !important; }
.tree-children[data-parent-color="12"]::before { background: rgba(225, 29, 72, 0.4) !important; }

.tree-node.has-children > .tree-node-box[data-color="1"]::after { background: rgba(99, 102, 241, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="2"]::after { background: rgba(236, 72, 153, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="3"]::after { background: rgba(245, 158, 11, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="4"]::after { background: rgba(16, 185, 129, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="5"]::after { background: rgba(59, 130, 246, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="6"]::after { background: rgba(139, 92, 246, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="7"]::after { background: rgba(239, 68, 68, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="8"]::after { background: rgba(20, 184, 166, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="9"]::after { background: rgba(249, 115, 22, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="10"]::after { background: rgba(6, 182, 212, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="11"]::after { background: rgba(132, 204, 22, 0.4) !important; }
.tree-node.has-children > .tree-node-box[data-color="12"]::after { background: rgba(225, 29, 72, 0.4) !important; }

.tree-children > .tree-node[data-line-color="1"]::before { background: rgba(99, 102, 241, 0.4) !important; }
.tree-children > .tree-node[data-line-color="2"]::before { background: rgba(236, 72, 153, 0.4) !important; }
.tree-children > .tree-node[data-line-color="3"]::before { background: rgba(245, 158, 11, 0.4) !important; }
.tree-children > .tree-node[data-line-color="4"]::before { background: rgba(16, 185, 129, 0.4) !important; }
.tree-children > .tree-node[data-line-color="5"]::before { background: rgba(59, 130, 246, 0.4) !important; }
.tree-children > .tree-node[data-line-color="6"]::before { background: rgba(139, 92, 246, 0.4) !important; }
.tree-children > .tree-node[data-line-color="7"]::before { background: rgba(239, 68, 68, 0.4) !important; }
.tree-children > .tree-node[data-line-color="8"]::before { background: rgba(20, 184, 166, 0.4) !important; }
.tree-children > .tree-node[data-line-color="9"]::before { background: rgba(249, 115, 22, 0.4) !important; }
.tree-children > .tree-node[data-line-color="10"]::before { background: rgba(6, 182, 212, 0.4) !important; }
.tree-children > .tree-node[data-line-color="11"]::before { background: rgba(132, 204, 22, 0.4) !important; }
.tree-children > .tree-node[data-line-color="12"]::before { background: rgba(225, 29, 72, 0.4) !important; }

/* ========== DARK MODE OVERRIDES ========== */
[data-theme="dark"] .tree-container {
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
}

[data-theme="dark"] .tree-node-box {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .tree-node-box:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .tree-node-box[data-color="1"] { background: rgba(99, 102, 241, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="2"] { background: rgba(236, 72, 153, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="3"] { background: rgba(245, 158, 11, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="4"] { background: rgba(16, 185, 129, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="5"] { background: rgba(59, 130, 246, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="6"] { background: rgba(139, 92, 246, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="7"] { background: rgba(239, 68, 68, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="8"] { background: rgba(20, 184, 166, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="9"] { background: rgba(249, 115, 22, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="10"] { background: rgba(6, 182, 212, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="11"] { background: rgba(132, 204, 22, 0.12); }
[data-theme="dark"] .tree-node-box[data-color="12"] { background: rgba(225, 29, 72, 0.12); }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .tree-container { padding: 24px 16px; }
    .depth-0 .tree-node-box, .tree-node-box.root { width: 180px; padding: 14px 18px; }
    .depth-1 > .tree-node-box { width: 150px; }
    .depth-2 > .tree-node-box { width: 130px; }
    .depth-3 > .tree-node-box, .depth-deep > .tree-node-box { width: 110px; }
    .tree-children { gap: 8px; margin-top: 24px; }
    .depth-0 .tree-node-text, .tree-node-box.root .tree-node-text { font-size: var(--font-md); }
}

/* ========== COLOR PICKER ========== */
.color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.color-option {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.color-option:hover { transform: scale(1.15); }
.color-option.selected { border-color: var(--text-primary); }

.color-option[data-color="1"] { background: var(--branch-1); }
.color-option[data-color="2"] { background: var(--branch-2); }
.color-option[data-color="3"] { background: var(--branch-3); }
.color-option[data-color="4"] { background: var(--branch-4); }
.color-option[data-color="5"] { background: var(--branch-5); }
.color-option[data-color="6"] { background: var(--branch-6); }
.color-option[data-color="7"] { background: var(--branch-7); }
.color-option[data-color="8"] { background: var(--branch-8); }
.color-option[data-color="9"] { background: var(--branch-9); }
.color-option[data-color="10"] { background: var(--branch-10); }
.color-option[data-color="11"] { background: var(--branch-11); }
.color-option[data-color="12"] { background: var(--branch-12); }

.color-picker-large { justify-content: center; gap: var(--space-3); max-width: 300px; }
.color-picker-large .color-option { width: 36px; height: 36px; }

/* Color dot indicator */
.color-dot {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid var(--bg-primary);
    opacity: 0.4;
    z-index: 5;
}

.tree-node-box:hover .color-dot { opacity: 1; }
.color-dot:hover { transform: translateX(-50%) scale(1.4); }

.color-dot[data-color="1"] { background: var(--branch-1); }
.color-dot[data-color="2"] { background: var(--branch-2); }
.color-dot[data-color="3"] { background: var(--branch-3); }
.color-dot[data-color="4"] { background: var(--branch-4); }
.color-dot[data-color="5"] { background: var(--branch-5); }
.color-dot[data-color="6"] { background: var(--branch-6); }
.color-dot[data-color="7"] { background: var(--branch-7); }
.color-dot[data-color="8"] { background: var(--branch-8); }
.color-dot[data-color="9"] { background: var(--branch-9); }
.color-dot[data-color="10"] { background: var(--branch-10); }
.color-dot[data-color="11"] { background: var(--branch-11); }
.color-dot[data-color="12"] { background: var(--branch-12); }

/* ============== SIDEBAR SECTIONS ============== */
.sidebar-section {
    margin-bottom: var(--space-3);
}

.structures-sidebar .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    padding: 0;
    border-bottom: none;
}

.structures-sidebar .sidebar-header h3 {
    margin: 0;
}

.sidebar-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-4) 0;
}

.ws-structures-label {
    color: var(--accent) !important;
    font-size: var(--font-xs) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ws-structure-item {
    border-left: 3px solid var(--accent);
}

.structures-sidebar .btn-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--accent);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.structures-sidebar .btn-icon:hover {
    background: var(--accent-hover);
}

/* ============== MAIN PROBLEMS ============== */
.main-problems-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pin-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    font-size: 11px;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pin-badge:hover {
    transform: scale(1.2);
}

.weight-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    border: 2px solid var(--bg-primary);
}

.weight-badge.weight-1 { background: var(--danger); }
.weight-badge.weight-2 { background: var(--branch-3); }
.weight-badge.weight-3 { background: var(--text-muted); }

.weight-picker {
    display: flex;
    gap: var(--space-2);
}

.weight-option {
    width: 40px;
    height: 36px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    background: var(--bg-tertiary);
}

.weight-option:hover { border-color: var(--accent); }
.weight-option.selected { border-color: var(--accent); background: var(--accent); color: white; }
.weight-option[data-weight="1"].selected { background: var(--danger); border-color: var(--danger); }
.weight-option[data-weight="2"].selected { background: var(--branch-3); border-color: var(--branch-3); }
.weight-option[data-weight="3"].selected { background: var(--text-muted); border-color: var(--text-muted); }

/* ============== PROBLEM VIEW ============== */
.problem-view { padding: var(--space-4); }

.problem-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    border-left: 4px solid;
}

.problem-header[data-color="1"] { background: rgba(99, 102, 241, 0.06); border-left-color: var(--branch-1); }
.problem-header[data-color="2"] { background: rgba(236, 72, 153, 0.06); border-left-color: var(--branch-2); }
.problem-header[data-color="3"] { background: rgba(245, 158, 11, 0.06); border-left-color: var(--branch-3); }
.problem-header[data-color="4"] { background: rgba(16, 185, 129, 0.06); border-left-color: var(--branch-4); }
.problem-header[data-color="5"] { background: rgba(59, 130, 246, 0.06); border-left-color: var(--branch-5); }
.problem-header[data-color="6"] { background: rgba(139, 92, 246, 0.06); border-left-color: var(--branch-6); }
.problem-header[data-color="7"] { background: rgba(239, 68, 68, 0.06); border-left-color: var(--branch-7); }
.problem-header[data-color="8"] { background: rgba(20, 184, 166, 0.06); border-left-color: var(--branch-8); }
.problem-header[data-color="9"] { background: rgba(249, 115, 22, 0.06); border-left-color: var(--branch-9); }
.problem-header[data-color="10"] { background: rgba(6, 182, 212, 0.06); border-left-color: var(--branch-10); }
.problem-header[data-color="11"] { background: rgba(132, 204, 22, 0.06); border-left-color: var(--branch-11); }
.problem-header[data-color="12"] { background: rgba(225, 29, 72, 0.06); border-left-color: var(--branch-12); }

.problem-header h2 {
    margin: 0;
    font-size: var(--font-lg);
    letter-spacing: -0.015em;
}

.problem-pins-list h3 {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.pin-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
    border-left: 3px solid;
    position: relative;
}

.pin-card[data-color="1"] { border-left-color: var(--branch-1); }
.pin-card[data-color="2"] { border-left-color: var(--branch-2); }
.pin-card[data-color="3"] { border-left-color: var(--branch-3); }
.pin-card[data-color="4"] { border-left-color: var(--branch-4); }
.pin-card[data-color="5"] { border-left-color: var(--branch-5); }
.pin-card[data-color="6"] { border-left-color: var(--branch-6); }
.pin-card[data-color="7"] { border-left-color: var(--branch-7); }
.pin-card[data-color="8"] { border-left-color: var(--branch-8); }
.pin-card[data-color="9"] { border-left-color: var(--branch-9); }
.pin-card[data-color="10"] { border-left-color: var(--branch-10); }
.pin-card[data-color="11"] { border-left-color: var(--branch-11); }
.pin-card[data-color="12"] { border-left-color: var(--branch-12); }

.pin-card-icon { font-size: var(--font-lg); }
.pin-card-content { flex: 1; }
.pin-card-title { font-weight: 500; }
.pin-card-meta { font-size: var(--font-xs); color: var(--text-muted); margin-top: 2px; }
.pin-card .btn-delete-small { position: static; transform: none; opacity: 0; }
.pin-card:hover .btn-delete-small { opacity: 1; }
.pin-source { display: block; font-size: var(--font-xs); color: var(--text-muted); margin-top: 2px; }

/* ============== CONNECTION MODE ============== */
.header-buttons {
    display: flex;
    gap: var(--space-2);
}

#connection-mode-btn.active {
    background: var(--accent);
    color: white;
}

.tree-node-box.connection-source {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    animation: pulse-premium 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-premium {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    50% { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
}

.tree-node-box.connection-target { cursor: crosshair; }
.tree-node-box.connection-target:hover {
    outline: 3px dashed var(--accent);
    outline-offset: 3px;
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
}

.connection-mode-hint {
    text-align: center;
    padding: var(--space-3);
    background: var(--accent-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: var(--font-sm);
    color: var(--accent);
    border: 1px solid rgba(37, 99, 235, 0.15);
}

/* ============== SVG CONNECTIONS ============== */
.connections-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.connections-svg path { pointer-events: stroke; cursor: pointer; }
.connection-line { fill: none; stroke-linecap: round; }

.connection-line[data-color="1"] { stroke: var(--branch-1); }
.connection-line[data-color="2"] { stroke: var(--branch-2); }
.connection-line[data-color="3"] { stroke: var(--branch-3); }
.connection-line[data-color="4"] { stroke: var(--branch-4); }
.connection-line[data-color="5"] { stroke: var(--branch-5); }
.connection-line[data-color="6"] { stroke: var(--branch-6); }
.connection-line[data-color="7"] { stroke: var(--branch-7); }
.connection-line[data-color="8"] { stroke: var(--branch-8); }
.connection-line[data-color="9"] { stroke: var(--branch-9); }
.connection-line[data-color="10"] { stroke: var(--branch-10); }
.connection-line[data-color="11"] { stroke: var(--branch-11); }
.connection-line[data-color="12"] { stroke: var(--branch-12); }

.connection-line[data-strength="1"] { stroke-width: 2px; }
.connection-line[data-strength="2"] { stroke-width: 3.5px; }
.connection-line[data-strength="3"] { stroke-width: 5px; }

.connection-line:hover { filter: brightness(1.2); stroke-width: 5px !important; }
.connection-line.selected { stroke-dasharray: 5, 3; animation: dashMove 0.5s linear infinite; }

@keyframes dashMove { to { stroke-dashoffset: -8; } }

.connection-label { font-size: 10px; fill: var(--text-muted); pointer-events: none; }
.connections-svg marker path { fill: inherit; }

/* Context menu */
.context-menu {
    position: fixed;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    min-width: 180px;
    padding: var(--space-1) 0;
}

.context-menu-item {
    padding: var(--space-1h) var(--space-4);
    cursor: pointer;
    font-size: var(--font-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: background-color var(--transition-fast);
}

.context-menu-item:hover { background: var(--bg-hover); }
.context-menu-divider { height: 1px; background: var(--border-light); margin: var(--space-1) 0; }
.context-menu-submenu { padding-left: var(--space-4); }
.context-menu-submenu .context-menu-item { font-size: var(--font-xs); }

.btn-small {
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-xs);
    border-radius: var(--radius-sm);
    background: var(--text-primary);
    color: var(--bg-primary);
    border: none;
    cursor: pointer;
}
.btn-small:hover { opacity: 0.85; }

/* ============== SETTINGS ============== */
.settings-tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0;
}

.settings-tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    margin-bottom: -1px;
}

.settings-tab:hover {
    color: var(--text-primary);
}

.settings-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

.settings-content { max-width: 480px; }

.setting-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--space-5) 0;
}

.setting-section-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
    letter-spacing: -0.01em;
}

.section-toggles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.section-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 150ms ease;
}

.section-toggle-item:hover {
    background: var(--bg-tertiary);
}

.section-toggle-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.toggle-sm {
    transform: scale(0.85);
    transform-origin: right center;
}

/* ============== DOM SECTION ============== */
.dom-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: 3px;
    margin-bottom: var(--space-5);
    width: fit-content;
}

.dom-tab {
    padding: var(--space-2) var(--space-5);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 150ms ease;
}

.dom-tab.active {
    background: var(--accent);
    color: #fff;
}

.dom-quick-add {
    margin-bottom: var(--space-4);
}

.dom-quick-add input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: var(--font-base);
    outline: none;
    transition: border-color 200ms ease;
}

.dom-quick-add input:focus {
    border-color: var(--accent);
}

.dom-quick-add input::placeholder {
    color: var(--text-muted);
}

.dom-category {
    margin-bottom: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface-card);
}

.dom-category.collapsed .dom-category-body {
    display: none;
}

.dom-category.collapsed .dom-category-chevron {
    transform: rotate(0deg);
}

.dom-category-header {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    gap: var(--space-3);
    transition: background 150ms ease;
    user-select: none;
}

.dom-category-header:hover {
    background: var(--bg-tertiary);
}

.dom-category-name {
    flex: 1;
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-primary);
}

.dom-category-progress {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-light);
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

.dom-category-chevron {
    color: var(--text-muted);
    font-size: 12px;
    transition: transform 200ms ease;
    transform: rotate(90deg);
}

.dom-category-body {
    padding: 0 var(--space-3) var(--space-3);
}

.dom-task-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-sm);
    transition: background 100ms ease;
}

.dom-task-item:hover {
    background: var(--bg-tertiary);
}

.dom-task-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
}

.dom-task-title {
    flex: 1;
    font-size: var(--font-sm);
    color: var(--text-primary);
}

.dom-task-done .dom-task-title {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.6;
}

.dom-task-delete {
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: all 150ms ease;
}

.dom-task-item:hover .dom-task-delete {
    opacity: 1;
}

.dom-task-delete:hover {
    color: var(--danger);
    background: var(--danger-light);
}

.dom-add-subtask input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-sm);
    outline: none;
    margin-top: var(--space-1);
}

.dom-add-subtask input:focus {
    border-color: var(--accent);
    border-style: solid;
}

.dom-add-subtask input::placeholder {
    color: var(--text-muted);
}

/* DOM Lists */
.dom-list-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 200ms ease;
    margin-bottom: var(--space-2);
}

.dom-list-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.dom-list-name {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-primary);
}

.dom-list-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dom-list-progress-bar {
    width: 80px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.dom-list-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width 300ms ease;
}

.dom-list-progress-text {
    font-size: var(--font-xs);
    color: var(--text-muted);
    font-weight: 600;
    min-width: 30px;
    text-align: right;
}

.dom-list-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.dom-list-detail-header h3 {
    font-size: var(--font-lg);
    font-weight: 600;
    color: var(--text-primary);
}

/* DOM Log */
.dom-log-date {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    padding: var(--space-3) 0 var(--space-2);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-2);
    text-transform: capitalize;
}

.dom-log-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: var(--font-sm);
    color: var(--text-primary);
}

.dom-log-check {
    color: var(--success);
    font-weight: 700;
}

.dom-log-category {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-left: auto;
}

/* DOM Members */
.dom-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

.dom-member-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.dom-member-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--navy-500), var(--navy-700));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: var(--font-xs);
    font-weight: 700;
    position: relative;
    flex-shrink: 0;
}

.dom-member-status {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--surface-card);
}

.dom-member-status.online { background: var(--success); }
.dom-member-status.offline { background: var(--text-muted); }

.dom-member-name {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.dom-member-role {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* DOM Expenses */
.dom-expense-summary {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.dom-expense-person {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    min-width: 120px;
}

.dom-expense-person strong {
    font-size: var(--font-sm);
    color: var(--text-primary);
}

.dom-expense-person span {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--accent);
    margin-top: 2px;
}

.dom-section-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-light);
}

.dom-expense-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    transition: background 100ms ease;
}

.dom-expense-item:hover {
    background: var(--bg-tertiary);
}

.dom-expense-title {
    flex: 1;
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.dom-expense-category {
    font-size: var(--font-xs);
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.dom-expense-amount {
    font-size: var(--font-sm);
    font-weight: 700;
    color: var(--danger);
    white-space: nowrap;
}

.dom-expense-by {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.dom-expense-day {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.dom-view-toggle {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

/* ============== MEAL PLANNER ============== */
.meal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-2);
}

.meal-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.meal-week-label {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
    text-align: center;
}

.meal-grid {
    display: grid;
    gap: 1px;
    background: var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.meal-grid-corner {
    background: var(--bg-secondary);
    padding: var(--space-2);
}

.meal-day-header {
    background: var(--bg-secondary);
    padding: var(--space-2) var(--space-1);
    text-align: center;
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

.meal-day-header.meal-today {
    background: var(--accent-light);
    color: var(--accent);
}

.meal-day-num {
    font-size: var(--font-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.meal-today .meal-day-num {
    color: var(--accent);
}

.meal-type-label {
    background: var(--bg-secondary);
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--text-secondary);
}

.meal-cell {
    background: var(--surface-card);
    padding: var(--space-1);
    min-height: 60px;
    cursor: pointer;
    transition: background 150ms ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: stretch;
}

.meal-cell:hover {
    background: var(--bg-tertiary);
}

.meal-cell-hover {
    background: var(--accent-light) !important;
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}

.meal-cell-empty {
    color: var(--text-muted);
    opacity: 0.3;
    font-size: var(--font-lg);
    text-align: center;
    line-height: 50px;
}

.meal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    cursor: grab;
    transition: transform 100ms ease;
    font-size: 11px;
}

.meal-item:hover {
    transform: scale(1.02);
    background: var(--bg-hover);
}

.meal-item:active {
    cursor: grabbing;
}

.meal-item-title {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.meal-item-servings {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-secondary);
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* Meal library (below grid) */
.meal-library {
    margin-top: var(--space-5);
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.meal-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1);
}

.meal-library-title {
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--text-primary);
}

.meal-library-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

.meal-library-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.meal-library-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    cursor: grab;
    transition: all 150ms ease;
    font-size: var(--font-sm);
}

.meal-library-item:hover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.meal-library-item:active {
    cursor: grabbing;
    transform: scale(0.97);
}

.meal-library-item-name {
    font-weight: 500;
    color: var(--text-primary);
}

.meal-library-item-actions {
    display: flex;
    opacity: 0;
    transition: opacity 150ms ease;
}

.meal-library-item:hover .meal-library-item-actions {
    opacity: 1;
}

/* Mobile: hide grid, show stack */
.meal-mobile-stack { display: none; }

@media (max-width: 768px) {
    .meal-grid { display: none !important; }
    .meal-mobile-stack { display: flex; flex-direction: column; gap: var(--space-3); }

    .meal-mobile-day {
        background: var(--surface-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: var(--space-3);
    }

    .meal-mobile-day.meal-today {
        border-color: var(--accent);
    }

    .meal-mobile-day-name {
        font-size: var(--font-sm);
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--space-2);
    }

    .meal-today .meal-mobile-day-name {
        color: var(--accent);
    }

    .meal-mobile-row {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-1) 0;
        cursor: pointer;
    }

    .meal-mobile-type {
        font-size: var(--font-xs);
        font-weight: 600;
        min-width: 70px;
    }

    .meal-mobile-value {
        font-size: var(--font-sm);
        color: var(--text-secondary);
    }
}

/* ============== QUEST BOARD ============== */
.qb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.qb-title {
    font-size: var(--font-xl);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.qb-stats {
    font-size: var(--font-sm);
    color: var(--text-muted);
}

.qb-category {
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-4);
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color 200ms ease;
}

.qb-category:hover {
    border-color: rgba(255,255,255,0.08);
}

/* Category color themes */
.qb-color-0 { background: rgba(59, 130, 246, 0.08); } .qb-color-0 .qb-cat-header { border-bottom-color: rgba(59, 130, 246, 0.15); } .qb-color-0 .qb-cat-dot { background: #3b82f6; } .qb-color-0 .qb-progress-fill { background: #3b82f6; }
.qb-color-1 { background: rgba(16, 185, 129, 0.08); } .qb-color-1 .qb-cat-header { border-bottom-color: rgba(16, 185, 129, 0.15); } .qb-color-1 .qb-cat-dot { background: #10b981; } .qb-color-1 .qb-progress-fill { background: #10b981; }
.qb-color-2 { background: rgba(245, 158, 11, 0.08); } .qb-color-2 .qb-cat-header { border-bottom-color: rgba(245, 158, 11, 0.15); } .qb-color-2 .qb-cat-dot { background: #f59e0b; } .qb-color-2 .qb-progress-fill { background: #f59e0b; }
.qb-color-3 { background: rgba(236, 72, 153, 0.08); } .qb-color-3 .qb-cat-header { border-bottom-color: rgba(236, 72, 153, 0.15); } .qb-color-3 .qb-cat-dot { background: #ec4899; } .qb-color-3 .qb-progress-fill { background: #ec4899; }
.qb-color-4 { background: rgba(139, 92, 246, 0.08); } .qb-color-4 .qb-cat-header { border-bottom-color: rgba(139, 92, 246, 0.15); } .qb-color-4 .qb-cat-dot { background: #8b5cf6; } .qb-color-4 .qb-progress-fill { background: #8b5cf6; }
.qb-color-5 { background: rgba(6, 182, 212, 0.08); } .qb-color-5 .qb-cat-header { border-bottom-color: rgba(6, 182, 212, 0.15); } .qb-color-5 .qb-cat-dot { background: #06b6d4; } .qb-color-5 .qb-progress-fill { background: #06b6d4; }

.qb-cat-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 150ms ease;
}

.qb-cat-header:hover {
    background: rgba(255,255,255,0.03);
}

.qb-cat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.qb-cat-name {
    font-size: var(--font-md);
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    letter-spacing: -0.01em;
}

.qb-cat-count {
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

.qb-cat-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 150ms ease;
}

.qb-cat-header:hover .qb-cat-actions {
    opacity: 1;
}

.qb-cat-chevron {
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 200ms ease;
    transform: rotate(90deg);
    cursor: pointer;
}

.qb-category.collapsed .qb-cat-chevron {
    transform: rotate(0deg);
}

.qb-category.collapsed .qb-cat-body {
    display: none;
}

.qb-progress {
    flex: 0 0 80px;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.qb-progress-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width 400ms ease;
}

.qb-cat-body {
    padding: 0 var(--space-4) var(--space-4);
}

/* Quest items */
.qb-task {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-md);
    transition: background 100ms ease;
    position: relative;
}

.qb-task:hover {
    background: rgba(255,255,255,0.04);
}

.qb-task input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--accent);
    flex-shrink: 0;
    cursor: pointer;
}

.qb-task-content {
    flex: 1;
    min-width: 0;
}

.qb-task-title {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.qb-task.done .qb-task-title {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.5;
}

.qb-task-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: 3px;
    flex-wrap: wrap;
}

.qb-task-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.qb-badge-person {
    background: var(--accent-light);
    color: var(--accent);
}

.qb-badge-date {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.qb-badge-date.overdue {
    background: var(--danger-light);
    color: var(--danger);
}

.qb-badge-priority {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.qb-badge-p1 { background: #3b82f6; }
.qb-badge-p2 { background: #f59e0b; }
.qb-badge-p3 { background: #ef4444; }

.qb-task-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 150ms ease;
}

.qb-task:hover .qb-task-actions {
    opacity: 1;
}

.qb-task-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
}

.qb-task-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.qb-task-btn.danger:hover {
    color: var(--danger);
    background: var(--danger-light);
}

/* Subtasks */
.qb-subtasks {
    margin-left: 28px;
    padding-left: var(--space-3);
    border-left: 2px solid var(--border-color);
    margin-top: var(--space-1);
}

.qb-subtask {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 3px 0;
}

.qb-subtask input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
}

.qb-subtask-title {
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.qb-subtask.done .qb-subtask-title {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.4;
}

/* Quick add */
.qb-task-desc {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.qb-subcat-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
    margin-bottom: var(--space-1);
    padding: 2px 0;
}

.qb-subcat-name {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 1;
}

.qb-subcat-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 150ms ease;
}

.qb-subcat-header:hover .qb-subcat-actions {
    opacity: 1;
}

.qb-add-subcat-btn {
    background: none;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms ease;
}

.qb-add-subcat-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.qb-quick-add {
    margin-top: var(--space-2);
}

.qb-quick-add input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-sm);
    outline: none;
}

.qb-quick-add input:focus {
    border-style: solid;
    border-color: var(--accent);
    background: rgba(255,255,255,0.06);
}

.qb-quick-add input::placeholder {
    color: var(--text-muted);
}

/* ============== MINDMAP (pure CSS tree) ============== */
.mm-tree {
    padding: var(--space-4);
    overflow-x: auto;
}

.mm-root {
    text-align: center;
    margin-bottom: var(--space-5);
}

.mm-tree-branches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    justify-content: center;
}

.mm-root-node {
    display: inline-block;
    background: linear-gradient(135deg, var(--navy-600), var(--navy-800));
    color: #fff;
    font-size: var(--font-xl);
    font-weight: 800;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(30, 58, 110, 0.3);
    letter-spacing: 0.02em;
}

/* Each branch: node + children stacked */
.mm-branch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Node */
.mm-node {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-left: 3px solid;
    border-radius: var(--radius-md);
    background: var(--surface-card);
    white-space: nowrap;
    position: relative;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.mm-node:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
    z-index: 5;
}

.mm-node-root {
    font-weight: 600;
    font-size: var(--font-base);
}


.mm-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.mm-label {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.mm-pct {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    margin-left: 4px;
}

/* Children container - vertical stack with connecting lines */
.mm-children {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-left: 20px;
    margin-left: 12px;
    margin-top: var(--space-1);
    border-left: 2px solid var(--border-color);
    position: relative;
}

/* Horizontal connector from tree line to node */
.mm-children > .mm-branch {
    padding-left: 16px;
    position: relative;
}

.mm-children > .mm-branch::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 12px;
    height: 2px;
    background: var(--border-color);
}

/* Mobile mindmap */
@media (max-width: 768px) {
    .mm-tree-branches {
        flex-direction: column;
        align-items: flex-start;
    }

    .mm-node {
        padding: 6px 10px;
    }

    .mm-label {
        font-size: var(--font-xs);
    }
}

/* Expense enhanced */
.exp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.exp-section-header span {
    font-size: var(--font-base);
    font-weight: 700;
    color: var(--text-primary);
}

.exp-mandatory-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 100ms ease;
}

.exp-mandatory-item:hover { background: var(--bg-tertiary); }
.exp-mandatory-item.exp-paid { opacity: 0.5; }
.exp-mandatory-item.exp-paid .exp-mandatory-title { text-decoration: line-through; }

.exp-mandatory-item input[type="checkbox"] {
    width: 18px; height: 18px; accent-color: var(--success); cursor: pointer;
}

.exp-mandatory-title { flex: 1; font-size: var(--font-sm); font-weight: 500; color: var(--text-primary); }
.exp-mandatory-amount { font-size: var(--font-sm); font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.exp-mandatory-day { font-size: var(--font-xs); color: var(--text-muted); min-width: 40px; }

.exp-mandatory-summary {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.exp-regular-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 100ms ease;
    flex-wrap: wrap;
}

.exp-regular-item:hover { background: var(--bg-tertiary); }
.exp-regular-title { flex: 1; font-size: var(--font-sm); font-weight: 500; color: var(--text-primary); min-width: 100px; }
.exp-regular-desc { font-size: var(--font-xs); color: var(--text-muted); width: 100%; padding-left: var(--space-1); }
.exp-regular-cat { font-size: 10px; background: var(--bg-tertiary); color: var(--text-muted); padding: 1px 6px; border-radius: var(--radius-full); }
.exp-regular-amount { font-size: var(--font-sm); font-weight: 700; color: var(--danger); white-space: nowrap; }
.exp-regular-by { font-size: var(--font-xs); color: var(--text-muted); }
.exp-paid-badge { font-size: 10px; color: var(--success); font-weight: 600; }

.exp-project-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.exp-project-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.exp-project-name { font-size: var(--font-md); font-weight: 700; color: var(--text-primary); flex: 1; }
.exp-project-budget { font-size: var(--font-sm); font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

.exp-needs-label {
    font-size: var(--font-xs);
    font-weight: 700;
    color: var(--warning);
    margin-top: var(--space-3);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.exp-need-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: rgba(245, 158, 11, 0.06);
}

.exp-need-item:hover { background: rgba(245, 158, 11, 0.12); }
.exp-need-icon { color: var(--warning); font-weight: 700; font-size: var(--font-sm); }

.exp-summary-total {
    font-size: var(--font-lg);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    text-align: center;
}

.exp-summary-person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.exp-summary-name { font-size: var(--font-sm); font-weight: 600; color: var(--text-primary); min-width: 80px; }
.exp-summary-amount { font-size: var(--font-sm); font-weight: 700; color: var(--text-secondary); white-space: nowrap; min-width: 100px; text-align: right; }

.exp-summary-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.exp-summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-sm);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
}

.exp-summary-row span:last-child {
    font-weight: 700;
    color: var(--text-primary);
}

.exp-balance {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--accent-light);
    border-radius: var(--radius-lg);
    text-align: center;
    font-size: var(--font-base);
    color: var(--text-secondary);
}

.exp-balance strong { color: var(--accent); font-size: var(--font-lg); }

.dom-expense-recurring {
    background: var(--accent-light);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    margin-bottom: 2px;
}

/* Profile avatar section in account settings */
.profile-avatar-section {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-5);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.profile-avatar-preview {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.profile-avatar-preview span {
    color: white;
    font-size: var(--font-lg);
    font-weight: 700;
}

.profile-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.profile-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.setting-value {
    font-size: var(--font-base);
    color: var(--text-secondary);
}

.setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-light);
}

.setting-item label {
    font-size: var(--font-base);
    font-weight: 500;
}

.setting-item select {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-sm);
    transition: border-color var(--transition-fast);
}

.setting-item select:focus {
    outline: none;
    border-color: var(--accent);
}

.setting-item input[type="text"] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-sm);
    width: 200px;
    transition: border-color var(--transition-fast);
}

.setting-item input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
}

#settings-account .btn-primary {
    margin-top: var(--space-5);
}

/* ============== MODAL ============== */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--surface-overlay);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-content {
    position: relative;
    background: var(--surface-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
    max-width: 440px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

[data-theme="dark"] .modal-content {
    background: var(--navy-800);
    border-color: var(--navy-700);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
}

.modal-header h2 {
    font-size: var(--font-md);
    font-weight: 600;
    letter-spacing: -0.015em;
}

#modal-body {
    padding: var(--space-5);
}

/* Export Modal */
.export-format-toggle {
    display: flex;
    gap: var(--space-2);
}

.export-fmt-btn {
    flex: 1;
    padding: var(--space-3);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    cursor: pointer;
    font-size: var(--font-sm);
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    color: var(--text-primary);
}

.export-fmt-btn:hover {
    border-color: var(--accent);
}

.export-fmt-btn.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-secondary));
}

.export-custom-dates {
    display: flex;
    gap: var(--space-3);
}

.export-custom-dates .form-group {
    flex: 1;
}

/* ============== EMPTY STATE ============== */
.empty-state {
    text-align: center;
    padding: var(--space-10);
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-md);
    color: var(--text-muted);
}

.empty-state-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-5);
    text-align: center;
    gap: var(--space-2);
}

.empty-state-svg {
    width: 48px;
    height: 48px;
    color: var(--navy-400);
    opacity: 0.5;
    margin-bottom: var(--space-2);
}

.empty-state-svg svg {
    width: 100%;
    height: 100%;
}

.empty-state-title {
    font-size: var(--font-base);
    font-weight: 600;
    color: var(--text-secondary);
}

.empty-state-desc {
    font-size: var(--font-sm);
    color: var(--text-muted);
    max-width: 280px;
}

.empty-state-box .btn {
    margin-top: var(--space-3);
}

/* ============== MOOD SELECTOR ============== */
.mood-selector {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.mood-option { cursor: pointer; }
.mood-option input[type="radio"] { display: none; }

.mood-label {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-sm);
    border: 1.5px solid var(--border-color);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
    background: var(--bg-tertiary);
}

.mood-option input[type="radio"]:checked + .mood-label {
    border-color: var(--text-primary);
    background: var(--text-primary);
    color: var(--bg-primary);
}

/* ============== RESPONSIVE ============== */
@media (max-width: 900px) {
    .structures-layout {
        flex-direction: column;
        height: auto;
    }
    .structures-sidebar {
        width: 100%;
        max-height: 180px;
    }
    .finance-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    #main-app {
        flex-direction: column;
    }

    /* Sidebar becomes bottom tab bar */
    .sidebar, aside {
        width: 100%;
        height: auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto;
        z-index: 100;
        border-right: none;
        border-top: 1px solid var(--border-color);
        background: var(--bg-primary);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        overflow: visible;
        min-width: unset;
    }

    [data-theme="dark"] .sidebar,
    [data-theme="dark"] aside {
        background: rgba(8, 13, 24, 0.92);
        border-top-color: var(--sidebar-border);
    }

    /* Hide non-essential sidebar parts */
    .sidebar-header, .sidebar-profile, .sidebar-footer { display: none !important; }

    /* Mobile top bar with notifications */
    .mobile-top-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-2) 0;
        margin-bottom: var(--space-3);
    }

    .mobile-top-title {
        font-size: var(--font-md);
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.02em;
    }

    .mobile-bell {
        position: relative;
        background: none;
        border: none;
        cursor: pointer;
        padding: var(--space-2);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-bell .bell-icon {
        display: flex;
    }

    .mobile-bell:hover {
        background: var(--bg-tertiary);
    }

    #mobile-notification-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        background: var(--danger);
        color: white;
        border-radius: 50%;
        min-width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 9px;
        font-weight: 700;
    }
    .notification-panel { display: none !important; }

    /* Nav as bottom tab bar */
    .nav {
        display: flex;
        flex-direction: row;
        padding: 2px 4px;
        padding-bottom: env(safe-area-inset-bottom, 4px);
        gap: 0;
        overflow: visible;
    }

    .nav-item {
        flex: 1;
        flex-direction: column;
        padding: 8px 2px 6px;
        font-size: 10px;
        min-width: 0;
        min-height: auto;
        gap: 3px;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0;
        text-align: center;
        justify-content: center;
        color: var(--text-muted);
        position: relative;
    }

    .nav-item::before {
        display: none !important;
    }

    /* Show only 4 main tabs + More button (5th) */
    .nav-item:nth-child(n+5):not(.nav-more-btn) {
        display: none;
    }

    .nav-item.nav-more-btn {
        display: flex !important;
    }

    .nav-item.active {
        color: var(--accent);
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .nav-item.active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 20px;
        height: 2px;
        background: var(--accent);
        border-radius: 0 0 2px 2px;
    }

    .nav-icon {
        width: 24px;
        height: 24px;
        margin: 0 auto;
        background: transparent !important;
        color: inherit;
    }

    .nav-icon svg {
        width: 20px;
        height: 20px;
    }

    .nav-item.active .nav-icon {
        background: transparent !important;
        color: var(--accent);
    }

    .nav-label {
        font-size: 10px;
        letter-spacing: 0;
        text-align: center;
        font-weight: 500;
    }

    .nav-item.active .nav-label {
        font-weight: 600;
    }

    /* Mobile more menu */
    .mobile-more-menu {
        position: fixed;
        bottom: calc(60px + env(safe-area-inset-bottom, 0px));
        left: 12px;
        right: 12px;
        background: var(--surface-elevated);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        box-shadow: 0 -8px 32px -4px rgba(0, 0, 0, 0.15);
        padding: var(--space-4);
        z-index: 200;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }

    [data-theme="dark"] .mobile-more-menu {
        background: var(--navy-800);
        border-color: var(--navy-700);
        box-shadow: 0 -8px 32px -4px rgba(0, 0, 0, 0.4);
    }

    .mobile-more-menu .nav-item {
        display: flex !important;
        flex: unset;
        padding: var(--space-3);
        border-radius: var(--radius-lg);
        gap: 6px;
        color: var(--text-secondary);
    }

    .mobile-more-menu .nav-item:hover,
    .mobile-more-menu .nav-item:active {
        background: var(--bg-hover) !important;
    }

    .mobile-more-menu .nav-label {
        font-size: 11px;
        font-weight: 500;
    }

    .mobile-more-overlay {
        position: fixed;
        inset: 0;
        z-index: 199;
        background: var(--surface-overlay);
    }

    /* Main content - safe area top + bottom for tab bar */
    .main {
        padding: var(--space-4);
        padding-top: calc(env(safe-area-inset-top, 20px) + var(--space-4));
        padding-bottom: 80px;
        max-height: 100vh;
        overflow-y: auto;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    /* Mini chat bubble above tab bar */
    .mini-chat-bubble {
        bottom: 76px !important;
    }

    .mini-chat-window {
        bottom: 132px !important;
        right: 12px !important;
        width: calc(100vw - 24px) !important;
        max-height: 60vh !important;
    }

    /* Section header compact */
    .section-header {
        flex-wrap: wrap;
        gap: var(--space-2);
        position: sticky;
        top: 0;
        background: var(--bg-primary);
        z-index: 5;
        padding: var(--space-3) 0;
        margin-bottom: var(--space-4);
    }

    .section-title {
        font-size: var(--font-lg);
        width: 100%;
    }

    .section-header .btn {
        font-size: var(--font-xs);
        padding: 6px 12px;
        height: auto;
    }

    /* Hide export button on mobile - not needed */
    .section-header .btn[onclick*="showExport"] { display: none; }

    /* Stats compact on mobile */
    .tasks-stats {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--space-2) !important;
        margin-bottom: var(--space-3) !important;
    }

    .task-stat-card {
        padding: var(--space-2) !important;
    }

    .task-stat-value {
        font-size: var(--font-lg) !important;
    }

    .task-stat-label {
        font-size: 9px !important;
    }

    /* Project chips - smaller on mobile */
    .project-filter-bar {
        padding-bottom: var(--space-2) !important;
        margin-bottom: var(--space-2) !important;
    }

    .project-chip {
        padding: 4px 10px !important;
        font-size: var(--font-xs) !important;
    }

    /* Quick add task - full width, tight */
    .ws-quick-add-task {
        margin-bottom: var(--space-2) !important;
    }

    .ws-quick-add-task input {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--font-sm) !important;
    }

    /* Task card compact on mobile */
    .task-list-full .task-item,
    .task-section-body .task-item {
        padding: 12px 14px !important;
    }

    .task-title {
        font-size: var(--font-base) !important;
    }

    .task-project-badge {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }

    /* Task section header compact */
    .task-section-header {
        padding: 10px 14px !important;
        margin-bottom: 8px !important;
    }

    .task-section-label {
        font-size: var(--font-base) !important;
    }

    /* Progress bar always visible */
    .task-progress-block {
        margin-top: 6px !important;
    }

    /* Search input smaller */
    .list-search {
        margin-bottom: var(--space-2) !important;
    }

    .search-input {
        padding: var(--space-2) var(--space-3) !important;
        font-size: var(--font-sm) !important;
    }

    /* Inline subtasks tighter on mobile */
    .inline-subtasks {
        margin-left: 20px !important;
        padding-left: 12px !important;
    }
}

/* ============== WORKSPACE ============== */
.workspace-list {
    display: grid;
    gap: var(--space-3);
}

.workspace-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.workspace-card:hover {
    border-color: var(--text-muted);
    box-shadow: var(--shadow-sm);
}

.workspace-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.workspace-card-header h3 {
    margin: 0;
    font-size: var(--font-md);
    font-weight: 600;
    letter-spacing: -0.015em;
}

.workspace-card-meta {
    display: flex;
    gap: var(--space-4);
    color: var(--text-secondary);
    font-size: var(--font-sm);
    align-items: center;
}

.workspace-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.workspace-header h3 {
    margin: 0;
    flex: 1;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.workspace-tabs {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0;
}

.workspace-tabs .btn {
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding-bottom: var(--space-2);
    background: transparent;
    color: var(--text-secondary);
    height: auto;
}

.workspace-tabs .btn:hover {
    color: var(--text-primary);
}

.workspace-tabs .btn.active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    background: transparent;
    font-weight: 500;
}

.workspace-tab-content {
    min-height: 200px;
}

/* Utility classes for inline style replacement */
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.mb-3 { margin-bottom: var(--space-3); }
.m-0 { margin: 0; }
.flex-1 { flex: 1; }

/* Online indicators */
.online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    margin-right: 4px;
    animation: pulse-online 2s ease-in-out infinite;
}

.offline-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--text-muted);
    border-radius: 50%;
    margin-right: 4px;
}

@keyframes pulse-online {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.online-indicators {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-sm);
    color: var(--success);
}

/* Member list */
.member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.member-item .badge {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 500;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Remote cursor */
.remote-cursor {
    position: absolute;
    top: -20px;
    right: 4px;
    background: #8B5CF6;
    color: white;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    animation: fadeIn 0.2s ease;
    z-index: 10;
    pointer-events: none;
}

/* Toast notifications */
.toast-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 10000;
    font-size: var(--font-sm);
    max-width: 300px;
}

.toast-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-info { border-left: 3px solid var(--accent); }

/* Small buttons */
.btn-xs {
    padding: 2px 8px;
    font-size: var(--font-xs);
    border-radius: var(--radius-sm);
}

.btn-danger {
    background: var(--danger);
    color: white;
    border: none;
    cursor: pointer;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-sm);
    transition: opacity var(--transition-fast);
}

.btn-danger:hover { opacity: 0.85; }

/* Structure items in workspace */
.workspace-tab-content .structure-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.workspace-tab-content .structure-item:hover {
    border-color: var(--text-muted);
}

.workspace-tab-content .empty-state {
    padding: var(--space-10) var(--space-5);
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============== NOTIFICATIONS ============== */
.notification-bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    font-size: 18px;
    color: var(--text-secondary);
    transition: color var(--transition-fast);
    border-radius: var(--radius-sm);
}

.notification-bell:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: 0;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.notification-panel {
    position: absolute;
    top: 60px;
    left: 12px;
    right: 12px;
    max-width: 360px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.notification-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.notification-panel-header h3 {
    font-size: var(--font-sm);
    font-weight: 600;
    margin: 0;
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: var(--font-xs);
    padding: 0;
    transition: opacity var(--transition-fast);
}

.btn-link:hover { opacity: 0.7; }

.notification-list { padding: var(--space-2); }

.notification-item {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    background: var(--bg-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.notification-item:hover { background: var(--bg-tertiary); }

.notification-item.unread {
    border-left: 3px solid var(--accent);
    background: var(--accent-light);
}

.notification-item-title { font-size: var(--font-sm); font-weight: 600; margin-bottom: 4px; }
.notification-item-message { font-size: var(--font-xs); color: var(--text-muted); margin-bottom: 6px; }
.notification-item-time { font-size: 11px; color: var(--text-muted); }

.notification-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.notification-actions .btn {
    font-size: var(--font-xs);
    padding: 4px 12px;
    height: auto;
}

.notification-empty {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-sm);
}

/* Workspace notes */
.workspace-note {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    transition: border-color var(--transition-fast);
}

.workspace-note:hover { border-color: var(--text-muted); }
.workspace-note-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.workspace-note-title { font-weight: 600; font-size: var(--font-base); }
.workspace-note-meta { font-size: var(--font-xs); color: var(--text-muted); }
.workspace-note-content { font-size: var(--font-sm); color: var(--text-secondary); white-space: pre-wrap; line-height: 1.6; }
.workspace-note-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }

/* Member status badges */
.member-status-pending { font-size: 10px; background: var(--warning); color: white; padding: 1px 6px; border-radius: var(--radius-full); }
.member-status-declined { font-size: 10px; background: var(--danger); color: white; padding: 1px 6px; border-radius: var(--radius-full); }

/* ============== LIVE COLLABORATION ============== */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(220, 38, 38, 0.08);
    color: var(--danger);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* ============== WORKSPACE CHAT ============== */
.chat-container {
    display: flex;
    height: 500px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.chat-sidebar {
    width: 180px;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    padding: var(--space-3);
    overflow-y: auto;
    flex-shrink: 0;
}

.chat-sidebar h4 {
    font-size: var(--font-xs);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    letter-spacing: 0.05em;
    font-weight: 500;
}

.chat-channel {
    padding: var(--space-1h) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-bottom: 1px;
    transition: background-color var(--transition-fast);
}

.chat-channel:hover { background: var(--bg-tertiary); }

.chat-channel.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 500;
}

.chat-channel-type { font-size: 10px; opacity: 0.6; }

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text-primary);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.chat-message { max-width: 85%; }
.chat-message.own { align-self: flex-end; }
.chat-message-header { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.chat-message-header .username { font-weight: 600; color: var(--text-primary); }

.chat-message-content {
    background: var(--bg-tertiary);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--font-sm);
    line-height: 1.5;
    word-break: break-word;
}

.chat-message.own .chat-message-content {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.chat-input {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--border-color);
}

.chat-input input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none;
}

.chat-input input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

@media (max-width: 768px) {
    .chat-container { flex-direction: column; height: 400px; }
    .chat-sidebar { width: 100%; height: auto; max-height: 100px; border-right: none; border-bottom: 1px solid var(--border-color); }
}

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

/* ============== EDIT BUTTON ============== */
.task-edit {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--font-base);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    opacity: 0;
}

.task-item:hover .task-edit,
.diary-entry:hover .task-edit,
.transaction-item:hover .task-edit,
.event-item:hover .task-edit,
.reminder-item:hover .task-edit,
.habit-card:hover .task-edit {
    opacity: 1;
}

.task-edit:hover {
    color: var(--accent);
    background: var(--accent-light);
}

/* ============== PRIORITY BADGE ============== */
.priority-badge {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-xs);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    margin-right: 6px;
    flex-shrink: 0;
}

.priority-badge.priority-1 {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.priority-badge.priority-2 {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.priority-badge.priority-3 {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ============== SEARCH INPUT ============== */
.list-search {
    margin-bottom: var(--space-3);
}

.search-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-sm);
    font-family: var(--font-family);
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* ============== TASK ACTIONS ============== */
.task-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}

/* ============== CALENDAR TASK PRIORITY ============== */
.calendar-task-priority {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 0 4px;
    border-radius: 3px;
    margin-top: 2px;
}

.calendar-task-priority.priority-1 {
    color: #3b82f6;
}

.calendar-task-priority.priority-2 {
    color: #f59e0b;
}

.calendar-task-priority.priority-3 {
    color: #ef4444;
}

/* ============== DISABLED BUTTON ============== */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============== BUDGET PANEL ============== */
.budget-panel {
    margin-bottom: 0;
}

.budget-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.budget-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base);
}

.budget-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.budget-card-label {
    font-size: var(--font-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.budget-card-value {
    font-size: var(--font-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.budget-card--saved .budget-card-value {
    color: var(--success);
}

.budget-card--total .budget-card-value {
    color: var(--accent);
}

.budget-card--frozen .budget-card-value {
    color: #60a5fa;
}

.budget-progress-bar--frozen {
    background: #60a5fa;
}

.budget-card--lawyer .budget-card-value {
    color: #a78bfa;
}

.budget-progress-bar--lawyer {
    background: #a78bfa;
}

.budget-card-btns {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.budget-card-btns .btn {
    padding: 2px 10px;
    font-size: var(--font-sm);
    min-width: unset;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.budget-card-btns .btn:hover {
    background: #a78bfa;
    color: white;
    border-color: #a78bfa;
}

.setting-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    transition: 0.2s;
}

.toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--accent);
    border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

.setting-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.budget-progress {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    margin-top: var(--space-2);
    overflow: hidden;
}

.budget-progress-bar {
    height: 100%;
    background: var(--success);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.budget-card-sub {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.budget-actions {
    display: flex;
    gap: var(--space-2);
}

.budget-empty {
    text-align: center;
    padding: var(--space-4);
    color: var(--text-muted);
    font-size: var(--font-sm);
}

.budget-empty p {
    margin-bottom: var(--space-3);
}

/* ============== SAVINGS GOALS ============== */
.savings-goals-section {
    margin-bottom: var(--space-5);
}

.goals-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.goals-title {
    font-size: var(--font-base);
    font-weight: 600;
}

.goals-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-sm);
    padding: var(--space-3);
}

/* ============== FROZEN FUNDS ============== */
.frozen-funds-section {
    margin-bottom: var(--space-4);
}

.frozen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.frozen-title {
    font-weight: 600;
    font-size: var(--font-base);
}

.frozen-empty {
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-4);
    font-size: var(--font-sm);
}

.frozen-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, var(--bg-primary) 100%);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-left: 4px solid #60a5fa;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-2);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.frozen-card:hover {
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.35);
}

.frozen-card-icon {
    font-size: var(--font-xl);
    flex-shrink: 0;
}

.frozen-card-info {
    flex: 1;
    min-width: 0;
}

.frozen-card-name {
    font-weight: 600;
    font-size: var(--font-sm);
    color: var(--text-primary);
}

.frozen-card-meta {
    display: flex;
    gap: var(--space-3);
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.frozen-deadline {
    color: #60a5fa;
}

.frozen-card-amount {
    font-weight: 700;
    font-size: var(--font-lg);
    color: #60a5fa;
    white-space: nowrap;
    flex-shrink: 0;
}

.frozen-card-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.frozen-btn-edit {
    background: var(--bg-tertiary) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    font-size: var(--font-xs) !important;
    padding: 4px 8px !important;
    min-width: unset !important;
}

.frozen-btn-edit:hover {
    background: var(--accent) !important;
    color: white !important;
    border-color: var(--accent) !important;
}

.frozen-btn-unfreeze {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    font-size: var(--font-xs) !important;
    padding: 4px 10px !important;
}

.frozen-btn-unfreeze:hover {
    background: var(--success) !important;
    color: white !important;
    border-color: var(--success) !important;
}

.frozen-btn-expense {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
    font-size: var(--font-xs) !important;
    padding: 4px 10px !important;
}

.frozen-btn-expense:hover {
    background: var(--danger) !important;
    color: white !important;
    border-color: var(--danger) !important;
}

@media (max-width: 600px) {
    .frozen-card {
        flex-wrap: wrap;
    }
    .frozen-card-amount {
        width: 100%;
        text-align: right;
        order: -1;
    }
    .frozen-card-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

.goal-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.goal-card.goal-completed {
    border-color: var(--success);
    background: var(--success-light);
}

.goal-card.goal-ready {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.06);
}

.goal-info {
    flex: 1;
    min-width: 0;
}

.goal-name {
    font-size: var(--font-sm);
    font-weight: 600;
    margin-bottom: 2px;
}

.goal-badge {
    display: inline-block;
    font-size: var(--font-xs);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: var(--space-2);
    background: rgba(34, 197, 94, 0.12);
    color: var(--success);
}

.goal-badge--ready {
    background: rgba(59, 130, 246, 0.12);
    color: var(--accent);
}

.goal-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 2px;
}

.goal-type-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 4px;
}

.goal-type-label--saving {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.goal-type-label--expense {
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent);
}

.goal-amounts {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.goal-deadline {
    font-size: 10px;
    color: var(--text-muted);
}

.goal-btn-pay {
    background: var(--accent);
    color: #fff;
    border: none;
}

.goal-btn-pay:hover {
    opacity: 0.9;
}

.goal-progress {
    width: 100px;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
}

.goal-progress-bar {
    height: 100%;
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.goal-completed .goal-progress-bar {
    background: var(--success);
}

.goal-progress-bar--expense {
    background: var(--accent);
}

.goal-ready .goal-progress-bar {
    background: var(--accent);
}

.goal-pct {
    font-size: var(--font-sm);
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 36px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.goal-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
}

/* ============== CATEGORY BUDGETS (ENVELOPES) ============== */
.category-budgets-section {
    margin-bottom: var(--space-5);
}
.cat-budgets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.cat-budgets-title {
    font-size: var(--font-base);
    font-weight: 600;
}
.cat-budgets-summary {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.cat-budget-chip {
    padding: var(--space-1) var(--space-2);
    border-radius: 20px;
    font-size: var(--font-xs);
    font-weight: 500;
}
.cat-budget-chip.ok { background: rgba(34,197,94,0.15); color: var(--success); }
.cat-budget-chip.warn { background: rgba(245,158,11,0.15); color: #f59e0b; }
.cat-budget-chip.over { background: rgba(239,68,68,0.15); color: var(--danger); }
.cat-budgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}
.cat-budget-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-3);
}
.cat-budget-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}
.cat-budget-card-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
}
.cat-budget-amounts {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-1h);
}
.cat-budget-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}
.cat-budget-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.cat-budget-bar-fill.ok { background: var(--success); }
.cat-budget-bar-fill.warn { background: #f59e0b; }
.cat-budget-bar-fill.over { background: var(--danger); }
.cat-budget-bar-fill.critical { background: var(--danger); animation: pulse-bar 1s ease-in-out infinite; }
@keyframes pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.cat-budget-remaining {
    font-size: var(--font-xs);
    margin-top: var(--space-1);
    text-align: right;
}
.cat-budget-remaining.ok { color: var(--success); }
.cat-budget-remaining.warn { color: #f59e0b; }
.cat-budget-remaining.over { color: var(--danger); }


/* ============== DEBT TRACKER ============== */
.debts-section {
    margin-bottom: var(--space-5);
}
.debts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.debts-title {
    font-size: var(--font-base);
    font-weight: 600;
}
.debts-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.debt-summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-3);
    text-align: center;
}
.debt-summary-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: 4px;
}
.debt-summary-value {
    font-size: var(--font-lg);
    font-weight: 700;
}
.debt-summary-value.danger { color: var(--danger); }
.debt-summary-value.success { color: var(--success); }
.debt-summary-value.accent { color: var(--accent); }
.debts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.debt-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.debt-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2);
}
.debt-card-name {
    font-weight: 600;
    font-size: var(--font-base);
}
.debt-card-rate {
    font-size: var(--font-xs);
    color: var(--text-muted);
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: 12px;
}
.debt-card-amounts {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-sm);
    margin-bottom: var(--space-2);
}
.debt-progress {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}
.debt-progress-bar {
    height: 100%;
    background: var(--success);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.debt-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.debt-min-payment {
    font-size: var(--font-xs);
    color: var(--text-muted);
}
.debt-card-actions {
    display: flex;
    gap: var(--space-1);
}
.strategy-section {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.strategy-title {
    font-size: var(--font-base);
    font-weight: 600;
}
.strategy-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-sm);
}
.strategy-input input {
    width: 100px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
}
.strategy-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.strategy-card {
    padding: var(--space-3);
    border-radius: var(--radius);
    border: 2px solid var(--border-color);
}
.strategy-card.recommended {
    border-color: var(--success);
}
.strategy-card-title {
    font-weight: 600;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.strategy-card-title .badge {
    font-size: var(--font-xs);
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(34,197,94,0.15);
    color: var(--success);
}
.strategy-stat {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: var(--font-sm);
    border-bottom: 1px solid var(--border-color);
}
.strategy-stat:last-child { border-bottom: none; }
.strategy-stat-value {
    font-weight: 600;
}
.strategy-order {
    margin-top: var(--space-2);
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* ============== NET WORTH TRACKER ============== */
.net-worth-section {
    margin-bottom: var(--space-5);
}
.nw-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.nw-title {
    font-size: var(--font-base);
    font-weight: 600;
}
.nw-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.nw-summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-4);
    text-align: center;
}
.nw-summary-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: 4px;
}
.nw-summary-value {
    font-size: var(--font-xl);
    font-weight: 700;
}
.nw-summary-value.assets { color: var(--success); }
.nw-summary-value.liabilities { color: var(--danger); }
.nw-summary-value.net-positive { color: var(--accent); }
.nw-summary-value.net-negative { color: var(--danger); }
.nw-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.nw-column {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-3);
}
.nw-column-title {
    font-weight: 600;
    font-size: var(--font-sm);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--border-color);
}
.nw-column-title.assets { border-bottom-color: var(--success); }
.nw-column-title.liabilities { border-bottom-color: var(--danger); }
.nw-account-group {
    margin-bottom: var(--space-3);
}
.nw-account-group-title {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}
.nw-account-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-color);
}
.nw-account-item:last-child { border-bottom: none; }
.nw-account-name {
    font-size: var(--font-sm);
}
.nw-account-balance {
    font-weight: 600;
    font-size: var(--font-sm);
    font-variant-numeric: tabular-nums;
}
.nw-account-balance.asset { color: var(--success); }
.nw-account-balance.liability { color: var(--danger); }
.nw-account-actions {
    display: flex;
    gap: 4px;
    margin-left: var(--space-2);
}
.nw-chart {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-4);
}
.nw-chart-title {
    font-size: var(--font-sm);
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}
.nw-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 120px;
}
.nw-chart-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.nw-chart-bar {
    width: 100%;
    border-radius: 3px 3px 0 0;
    min-height: 2px;
}
.nw-chart-bar.positive { background: var(--accent); }
.nw-chart-bar.negative { background: var(--danger); }
.nw-chart-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
}
.nw-empty {
    text-align: center;
    padding: var(--space-4);
    color: var(--text-muted);
}

/* Responsive for new finance modules */
@media (max-width: 768px) {
    .debts-summary-cards,
    .nw-summary-cards {
        grid-template-columns: 1fr;
    }
    .nw-columns {
        grid-template-columns: 1fr;
    }
    .strategy-comparison {
        grid-template-columns: 1fr;
    }
    .cat-budgets-grid {
        grid-template-columns: 1fr;
    }
}

/* ============== FINANCE STATISTICS ============== */
.finance-stats {
    /* no extra margin needed, inside group */
}

.stats-header {
    display: none; /* title redundant, group has header */
}

.stats-title {
    font-size: var(--font-base);
    font-weight: 600;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-4);
}

.stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.stat-card-title {
    font-size: var(--font-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
}

/* Donut Chart */
.donut-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-3);
}

.donut-chart {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: relative;
}

.donut-chart::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: var(--bg-secondary);
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.donut-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-xs);
}

.donut-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.donut-legend-label {
    flex: 1;
    color: var(--text-secondary);
}

.donut-legend-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Trend Bars */
.trend-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 120px;
    padding-bottom: var(--space-5);
}

.trend-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.trend-bars {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    flex: 1;
    width: 100%;
}

.trend-bar {
    flex: 1;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height 0.4s ease;
}

.trend-bar.income {
    background: var(--success);
    opacity: 0.8;
}

.trend-bar.expense {
    background: var(--danger);
    opacity: 0.8;
}

.trend-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 4px;
    text-align: center;
}

.trend-legend {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-3);
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.trend-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trend-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.trend-legend-dot.income {
    background: var(--success);
}

.trend-legend-dot.expense {
    background: var(--danger);
}

/* Daily Sparkline */
.sparkline-chart {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 60px;
}

.spark-bar {
    background: var(--accent);
    border-radius: 1px 1px 0 0;
    min-height: 1px;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.spark-bar:hover {
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .budget-cards {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .goal-card {
        flex-wrap: wrap;
    }

    .goal-progress {
        width: 100%;
        order: 10;
    }
}

@media (max-width: 600px) {
    .finance-summary {
        grid-template-columns: 1fr;
    }
    .finance-group {
        padding: var(--space-3);
    }
    .summary-value {
        font-size: var(--font-lg);
    }
}

/* Habits Responsive */
@media (max-width: 640px) {
    .habits-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }

    .habit-stat-card {
        padding: var(--space-2);
    }

    .habit-stat-value {
        font-size: var(--font-lg);
    }

    .habit-actions .task-edit,
    .habit-actions .task-delete {
        opacity: 1;
    }

    .habit-heatmap {
        grid-template-columns: repeat(10, 1fr);
    }
}

/* ============== MINI-CHAT BUBBLE ============== */
.mini-chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.mini-chat-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 24px var(--accent-glow);
}
.mini-chat-icon { font-size: 24px; }
.mini-chat-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}
.mini-chat-window {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 360px;
    height: 480px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mini-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.mini-chat-tabs { display: flex; gap: 4px; }
.mini-chat-tab {
    padding: 4px 12px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: var(--font-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.mini-chat-tab:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.mini-chat-tab.active { color: var(--accent); background: var(--accent-light); font-weight: 600; }
.mini-chat-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
}
.mini-chat-back {
    padding: 6px 12px;
    font-size: var(--font-sm);
    color: var(--accent);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
}
.mini-chat-back:hover { background: var(--bg-secondary); }
.mini-chat-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.mini-chat-input {
    display: flex;
    gap: 6px;
    padding: 8px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.mini-chat-input input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-sm);
}
.mini-chat-input input:focus { border-color: var(--accent); outline: none; }
.mc-channel-item, .mc-dm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.mc-channel-item:hover, .mc-dm-item:hover { background: var(--bg-tertiary); }
.mc-channel-icon { font-size: 16px; color: var(--text-muted); }
.mc-channel-name, .mc-dm-name { flex: 1; font-size: var(--font-sm); }
.mc-dm-preview { font-size: 11px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.mc-unread-badge {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.mc-message {
    margin-bottom: 8px;
    font-size: var(--font-sm);
}
.mc-message-header {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.mc-message-header strong { color: var(--text-primary); }
.mc-message-content {
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    word-break: break-word;
}
.mc-message.own .mc-message-content {
    background: var(--accent);
    color: #fff;
    margin-left: 30%;
}
.mc-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
}

/* ============== KANBAN BOARD ============== */
.kanban-board {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    min-height: 400px;
}
.kanban-column {
    min-width: 260px;
    max-width: 300px;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}
.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-weight: 600;
    font-size: var(--font-sm);
    border-bottom: 1px solid var(--border-color);
}
.kanban-column-count {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 11px;
    padding: 1px 7px;
    border-radius: 10px;
    font-weight: 600;
}
.kanban-column-cards {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 60px;
    overflow-y: auto;
}
.kanban-column-cards.drag-over {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: var(--radius-sm);
}
.kanban-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
    cursor: grab;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.kanban-card:hover {
    box-shadow: var(--shadow-md);
}
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
    box-shadow: var(--shadow-lg);
}
.kanban-card-title {
    font-size: var(--font-sm);
    font-weight: 500;
    margin-bottom: 6px;
    cursor: pointer;
}
.kanban-card-title:hover { color: var(--accent); }
.kanban-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
}
.kanban-card-labels {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.kanban-card-label {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
}
.kanban-card-label-bug { background: #fee2e2; color: #dc2626; }
.kanban-card-label-feature { background: #dbeafe; color: #2563eb; }
.kanban-card-label-urgent { background: #fef3c7; color: #d97706; }
.kanban-card-label-design { background: #ede9fe; color: #7c3aed; }
[data-theme="dark"] .kanban-card-label-bug { background: #7f1d1d; color: #fca5a5; }
[data-theme="dark"] .kanban-card-label-feature { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .kanban-card-label-urgent { background: #78350f; color: #fcd34d; }
[data-theme="dark"] .kanban-card-label-design { background: #4c1d95; color: #c4b5fd; }
.kanban-card-priority {
    width: 4px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}
.kanban-card-priority-1 { background: #22c55e; }
.kanban-card-priority-2 { background: #eab308; }
.kanban-card-priority-3 { background: #f97316; }
.kanban-card-priority-4 { background: #ef4444; }
.kanban-card-assignee {
    display: flex;
    align-items: center;
    gap: 3px;
}
.kanban-card-due {
    color: var(--text-muted);
}
.kanban-card-due.overdue { color: var(--danger); font-weight: 600; }
.kanban-add-card-btn {
    padding: 8px;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-sm);
    cursor: pointer;
    border-top: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}
.kanban-add-card-btn:hover {
    color: var(--accent);
    background: var(--accent-light);
}
.kanban-drop-indicator {
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    margin: 2px 0;
}

/* ============== WORKSPACE DASHBOARD ============== */
.ws-dashboard { display: flex; flex-direction: column; gap: 16px; }
.ws-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}
.ws-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    text-align: center;
}
.ws-stat-value {
    font-size: var(--font-xl);
    font-weight: 700;
    color: var(--accent);
}
.ws-stat-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-top: 2px;
}
.ws-dashboard-quick-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ws-dashboard-online {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.ws-online-user {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-sm);
    padding: 3px 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
}
.ws-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ws-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    font-size: var(--font-sm);
}
.ws-activity-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ws-activity-content { flex: 1; line-height: 1.4; }
.ws-activity-content strong { color: var(--text-primary); }
.ws-activity-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ============== WORKSPACE CALENDAR ============== */
.ws-calendar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.ws-calendar-header span {
    font-weight: 600;
    font-size: var(--font-lg);
    min-width: 160px;
    text-align: center;
}
#ws-calendar-grid .calendar-days {
    gap: 4px;
}
#ws-calendar-grid .calendar-day {
    aspect-ratio: auto;
    min-height: 80px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
#ws-calendar-grid .calendar-day .calendar-day-number {
    font-weight: 600;
    margin-bottom: 2px;
}
#ws-calendar-grid .calendar-day.other-month {
    border-color: transparent;
}
.ws-calendar-event {
    display: block;
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    color: #fff;
}
.ws-calendar-event:hover { opacity: 0.85; }

/* ============== CHAT IMPROVEMENTS ============== */
.chat-header-actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.chat-search-bar {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}
.chat-search-bar input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-sm);
}
.chat-search-bar input:focus { border-color: var(--accent); outline: none; }
.typing-indicator {
    padding: 4px 12px;
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}
.typing-dots {
    display: inline-block;
}
.typing-dots::after {
    content: '...';
    animation: typingDots 1.4s infinite;
}
@keyframes typingDots {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}
.chat-message-reactions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.chat-reaction {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    font-size: 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.chat-reaction:hover { border-color: var(--accent); background: var(--accent-light); }
.chat-reaction.own { border-color: var(--accent); background: var(--accent-light); }
.chat-reaction-count { font-weight: 600; }
.chat-message-actions {
    display: none;
    position: absolute;
    top: -8px;
    right: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 2px;
    gap: 2px;
}
.chat-message { position: relative; }
.chat-message:hover .chat-message-actions { display: flex; }
.chat-message-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px 5px;
    font-size: 13px;
    border-radius: 3px;
    transition: background var(--transition-fast);
}
.chat-message-action-btn:hover { background: var(--bg-tertiary); }
.chat-message-pinned {
    border-left: 3px solid var(--warning);
    padding-left: 8px;
}
.chat-message-deleted .chat-message-content {
    font-style: italic;
    color: var(--text-muted);
    background: var(--bg-tertiary);
}
.chat-load-more {
    text-align: center;
    padding: 8px;
    color: var(--accent);
    cursor: pointer;
    font-size: var(--font-sm);
}
.chat-load-more:hover { text-decoration: underline; }
.chat-unread-badge {
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-left: auto;
}

/* ============== NOTES IMPROVEMENTS ============== */
.ws-notes-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.note-search-bar { flex: 1; min-width: 150px; }
.note-search-bar input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--font-sm);
}
.note-search-bar input:focus { border-color: var(--accent); outline: none; }
.note-category-filter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.note-cat-btn {
    padding: 3px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: var(--font-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.note-cat-btn:hover, .note-cat-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}
.workspace-note-pinned {
    border-left: 3px solid var(--warning);
}
.note-pin-icon { color: var(--warning); margin-right: 4px; }
.note-markdown h1 { font-size: 1.4em; font-weight: 700; margin: 8px 0 4px; }
.note-markdown h2 { font-size: 1.2em; font-weight: 700; margin: 6px 0 3px; }
.note-markdown h3 { font-size: 1.1em; font-weight: 600; margin: 4px 0 2px; }
.note-markdown strong { font-weight: 700; }
.note-markdown em { font-style: italic; }
.note-markdown code {
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}
.note-markdown pre {
    background: var(--bg-tertiary);
    padding: 10px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: 6px 0;
}
.note-markdown pre code { background: none; padding: 0; }
.note-markdown blockquote {
    border-left: 3px solid var(--border-color);
    padding-left: 10px;
    color: var(--text-muted);
    margin: 6px 0;
}
.note-markdown ul, .note-markdown ol { padding-left: 20px; margin: 4px 0; }
.note-last-edited { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.workspace-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

/* ============== RESPONSIVE: MINI-CHAT & KANBAN ============== */
@media (max-width: 768px) {
    .mini-chat-window {
        width: calc(100% - 16px);
        right: 8px;
        bottom: 80px;
        height: 55vh;
    }
    .mini-chat-bubble {
        bottom: 16px;
        right: 16px;
        width: 48px;
        height: 48px;
    }
    .kanban-board { scroll-snap-type: x mandatory; }
    .kanban-column { scroll-snap-align: start; min-width: 240px; }
    .workspace-tabs { gap: 2px; }
    .workspace-tabs .btn { padding: 5px 8px; font-size: 12px; }
}

/* ============ FINANCE PLANNER ============ */

/* --- Header --- */
.planner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.planner-title {
    font-size: var(--font-base);
    font-weight: 600;
}

/* --- Empty state --- */
.planner-empty {
    text-align: center;
    padding: var(--space-5) var(--space-3);
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
}
.planner-empty-icon {
    font-size: 2.5em;
    margin-bottom: var(--space-2);
}
.planner-empty-title {
    font-size: var(--font-base);
    font-weight: 600;
    margin-bottom: var(--space-1);
}
.planner-empty-text {
    font-size: var(--font-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
}

/* --- Summary cards (reuse debt pattern) --- */
.planner-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.planner-summary-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-3);
    text-align: center;
}
.planner-summary-label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.planner-summary-value {
    font-size: var(--font-xl);
    font-weight: 700;
}
.planner-summary-value.accent { color: var(--accent); }
.planner-summary-value.success { color: var(--success); }
.planner-summary-sub {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* --- Plan card list --- */
.planner-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.planner-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-4);
    transition: box-shadow 0.15s ease;
}
.planner-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.planner-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2);
    gap: var(--space-2);
}
.planner-card-name {
    margin: 0;
    font-size: var(--font-base);
    font-weight: 600;
    flex: 1;
}

/* Status badges */
.plan-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.status-planned {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.status-active {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}
.status-completed {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
    animation: pulse-attention 2s ease-in-out infinite;
}
.status-reconciled {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}
@keyframes pulse-attention {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Meta row */
.planner-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}
.planner-meta-item {
    font-size: var(--font-sm);
    color: var(--text-secondary);
}

/* Category chips grid */
.planner-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.planner-cat-chip {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: var(--space-1) var(--space-2);
    text-align: center;
    min-width: 80px;
}
.planner-cat-chip-name {
    font-size: var(--font-xs);
    font-weight: 600;
    margin-bottom: 2px;
}
.planner-cat-chip-amount {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* Budget line */
.planner-card-budget {
    font-weight: 700;
    font-size: var(--font-sm);
    margin-bottom: var(--space-2);
}

/* Reconciled data section */
.planner-reconciled-data {
    margin-top: var(--space-2);
}
.planner-cat-bar-row {
    display: grid;
    grid-template-columns: 90px 60px 1fr 80px;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
    font-size: var(--font-sm);
}
.planner-cat-bar-label {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.planner-cat-bar-range {
    font-size: var(--font-xs);
    color: var(--text-muted);
    text-align: right;
}
.planner-cat-bar {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}
.planner-cat-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.planner-cat-bar-fill.bg-success { background: var(--success); }
.planner-cat-bar-fill.bg-danger { background: var(--danger); }
.planner-cat-bar-actual {
    font-weight: 600;
    text-align: right;
    font-size: var(--font-sm);
}

/* Total section in reconciled card */
.planner-total-section {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}
.planner-total-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-sm);
    margin-bottom: var(--space-1);
}
.planner-total-bar {
    height: 10px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    overflow: hidden;
    margin: var(--space-2) 0;
}
.planner-total-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.3s ease;
}
.planner-total-bar-fill.bg-success { background: var(--success); }
.planner-total-bar-fill.bg-danger { background: var(--danger); }
.planner-total-pct {
    font-size: var(--font-sm);
    color: var(--text-muted);
    text-align: right;
    margin-bottom: var(--space-1);
}
.planner-total-diff {
    font-weight: 600;
    font-size: var(--font-sm);
}

/* Alert banner (completed plans) */
.planner-alert-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
    font-size: var(--font-sm);
}

/* Card actions */
.planner-card-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}
.btn-danger-outline {
    color: var(--danger);
    border: 1px solid var(--danger);
    background: transparent;
}
.btn-danger-outline:hover {
    background: var(--danger);
    color: #fff;
}

/* ---- Plan Form Modal ---- */
.plan-form-dates {
    display: flex;
    gap: var(--space-3);
}
.plan-form-dates .form-group {
    flex: 1;
}
.plan-categories-list {
    background: var(--bg-secondary);
    border-radius: var(--radius);
    padding: var(--space-2);
}
.plan-category-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-1);
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.plan-category-row:last-child {
    border-bottom: none;
}
.plan-cat-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    min-width: 120px;
    font-weight: 500;
}
.plan-cat-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.plan-cat-amounts {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}
.plan-cat-amounts .form-input {
    width: 100px;
}
.plan-cat-separator {
    color: var(--text-muted);
}
.plan-custom-cat-row {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    align-items: center;
}
.plan-custom-cat-row .form-input {
    flex: 1;
}

/* ---- Plan Detail Modal ---- */
.plan-detail-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    font-size: var(--font-sm);
}
.plan-notes-text {
    font-style: italic;
    color: var(--text-muted);
    margin-top: var(--space-1);
}
.plan-detail-section-title {
    font-size: var(--font-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 var(--space-2);
}
.plan-detail-categories {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.plan-detail-cat {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}
.plan-detail-cat:last-child {
    border-bottom: none;
}
.plan-detail-cat .cat-name {
    font-weight: 600;
    font-size: var(--font-sm);
    margin-bottom: 2px;
}
.plan-detail-cat .cat-planned {
    font-size: var(--font-xs);
    color: var(--text-muted);
}
.plan-detail-cat-actual {
    font-size: var(--font-sm);
    font-weight: 600;
    margin-top: var(--space-1);
}
.cat-progress-bar {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    margin-top: var(--space-1);
    overflow: hidden;
}
.cat-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.cat-progress-fill.bg-success { background: var(--success); }
.cat-progress-fill.bg-danger { background: var(--danger); }
.plan-detail-cat .cat-notes {
    font-size: var(--font-xs);
    font-style: italic;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Detail summary */
.plan-detail-summary {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}
.plan-detail-summary-title {
    font-size: var(--font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.plan-summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1) 0;
    font-size: var(--font-sm);
}
.plan-summary-row + .plan-summary-row {
    border-top: 1px solid var(--border-color);
}

/* ---- Reconciliation Modal ---- */
.reconcile-intro {
    color: var(--text-secondary);
    font-size: var(--font-sm);
    margin-bottom: var(--space-3);
}
.reconcile-cat-row {
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    background: var(--bg-secondary);
}
.reconcile-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}
.reconcile-planned {
    font-size: var(--font-xs);
    color: var(--text-muted);
}
.reconcile-cat-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
.reconcile-cat-inputs .form-group {
    margin-bottom: 0;
}
.reconcile-cat-inputs label {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

/* ---- Funding Sources (Reconciliation) ---- */
.funding-sources-section {
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 2px solid var(--border-color);
}
.funding-sources-header {
    margin-bottom: var(--space-3);
}
.funding-sources-title {
    font-size: var(--font-base);
    font-weight: 600;
    display: block;
    margin-bottom: var(--space-1);
}
.funding-sources-hint {
    font-size: var(--font-xs);
    color: var(--text-muted);
}
.funding-source-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
}
.funding-source-info {
    flex: 1;
    min-width: 0;
}
.funding-source-name {
    font-weight: 600;
    font-size: var(--font-sm);
    margin-bottom: 2px;
}
.funding-source-meta {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--font-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}
.funding-source-type {
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    font-weight: 500;
}
.funding-source-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}
.funding-source-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.funding-source-input {
    flex-shrink: 0;
    width: 120px;
}
.funding-source-input label {
    font-size: var(--font-xs);
    color: var(--text-muted);
    display: block;
    margin-bottom: 2px;
}
.funding-source-input .form-input {
    width: 100%;
}

/* ---- Utilities ---- */
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

.btn-warning {
    background: var(--warning);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity var(--transition-fast);
}
.btn-warning:hover { opacity: 0.85; }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .planner-summary-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2);
    }
    .planner-summary-card {
        padding: var(--space-2);
    }
    .planner-cat-bar-row {
        grid-template-columns: 70px 50px 1fr 60px;
        font-size: var(--font-xs);
    }
    .planner-alert-banner {
        flex-direction: column;
        text-align: center;
    }
    .plan-form-dates {
        flex-direction: column;
        gap: 0;
    }
    .plan-category-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .plan-cat-amounts {
        width: 100%;
    }
    .reconcile-cat-inputs {
        grid-template-columns: 1fr;
    }
    .reconcile-cat-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .funding-source-row {
        flex-direction: column;
        align-items: stretch;
    }
    .funding-source-input {
        width: 100%;
    }
}

/* ==========================================================================
   WORKSPACE CATEGORIES */

.ws-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.ws-category-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: border-color 200ms ease, transform 200ms ease;
}

.ws-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--border-color);
}

.ws-category-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-sm);
    overflow: hidden;
}

.ws-category-name {
    font-weight: 700;
    font-size: var(--font-md);
    color: var(--text-primary);
}

.ws-category-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ws-category-card .ws-category-card {
    margin-top: var(--space-2);
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
}

.ws-category-card .ws-category-card .ws-category-icon {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.ws-category-card .ws-category-card .ws-category-name {
    font-size: var(--font-base);
}

.ws-task-row {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    align-items: center;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.ws-task-row:hover {
    background: var(--bg-tertiary);
}

.ws-task-row:hover .ws-task-quick-actions { opacity: 1; }

.ws-task-quick-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
}

.ws-task-date {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
}

.ws-task-date.overdue {
    color: var(--danger);
    background: var(--danger-light);
    font-weight: 600;
}

.ws-category-overdue {
    border-color: rgba(220, 38, 38, 0.3) !important;
}

.ws-category-overdue .ws-category-header {
    border-bottom-color: rgba(220, 38, 38, 0.2);
}

@media (max-width: 768px) {
    .ws-task-quick-actions { opacity: 1; }
    .ws-task-row { padding: 8px; gap: 6px; }
    .ws-categories-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WORKSPACE HEADER ACTIONS */
.workspace-header-actions {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

.workspace-header-actions .btn {
    font-size: var(--font-md);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.workspace-header-actions .btn:hover {
    background: var(--bg-hover);
}

/* ==========================================================================
   WORKSPACE SHARED LISTS
   ========================================================================== */

.ws-lists-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); }
.ws-lists-header-title { font-size: var(--font-lg); font-weight: 700; }

.ws-lists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }

.ws-list-card {
    background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: var(--space-5); cursor: pointer; transition: all 0.2s;
}
.ws-list-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ws-list-card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.ws-list-card-icon { font-size: 1.5rem; }
.ws-list-card-name { font-weight: 600; font-size: var(--font-md); flex: 1; }
.ws-list-card-count { font-size: var(--font-sm); color: var(--text-muted); font-weight: 600; }
.ws-list-card-progress { height: 6px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-2); }
.ws-list-card-progress-fill { height: 100%; background: var(--success); border-radius: var(--radius-full); transition: width 0.3s; }
.ws-list-card-meta { font-size: var(--font-xs); color: var(--text-muted); display: flex; justify-content: space-between; }
.ws-list-type-badge { font-size: var(--font-xs); padding: 2px 8px; border-radius: var(--radius-full); font-weight: 600; background: var(--bg-tertiary); }

/* List detail */
.ws-list-detail-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.ws-list-detail-back { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--font-lg); padding: var(--space-2); }
.ws-list-detail-back:hover { color: var(--text-primary); }
.ws-list-detail-title { font-size: var(--font-lg); font-weight: 700; flex: 1; }
.ws-list-detail-progress { font-size: var(--font-sm); color: var(--text-muted); font-weight: 600; }

.ws-list-items { display: flex; flex-direction: column; gap: 2px; }

.ws-list-item {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); transition: background 0.15s;
}
.ws-list-item:hover { background: var(--bg-tertiary); }
.ws-list-item.checked { opacity: 0.55; }
.ws-list-item.checked .ws-list-item-name { text-decoration: line-through; color: var(--text-muted); }

.ws-list-item-checkbox {
    width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border-color);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: all 0.2s; flex-shrink: 0; font-size: 12px; color: transparent;
}
.ws-list-item-checkbox:hover { border-color: var(--success); }
.ws-list-item-checkbox.checked { background: var(--success); border-color: var(--success); color: white; }

.ws-list-item-name { flex: 1; font-size: var(--font-base); font-weight: 500; }
.ws-list-item-meta { display: flex; gap: var(--space-2); align-items: center; }
.ws-list-item-assignee { font-size: var(--font-xs); padding: 2px 8px; border-radius: var(--radius-full); background: var(--accent-light); color: var(--accent); font-weight: 500; }
.ws-list-item-deadline { font-size: var(--font-xs); color: var(--text-muted); }
.ws-list-item-deadline.overdue { color: var(--danger); font-weight: 600; }
.ws-list-item-checked-info { font-size: var(--font-xs); color: var(--text-muted); }
.ws-list-item-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.ws-list-item:hover .ws-list-item-actions { opacity: 1; }
.ws-list-item-actions button { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; font-size: var(--font-sm); }
.ws-list-item-actions button:hover { color: var(--danger); }

.ws-list-quick-add {
    display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4);
    border: 2px dashed var(--border-color); border-radius: var(--radius-md);
    margin-top: var(--space-2); transition: all 0.15s;
}
.ws-list-quick-add:focus-within { border-color: var(--accent); }
.ws-list-quick-add input { flex: 1; border: none; background: transparent; outline: none; color: var(--text-primary); font-size: var(--font-base); }
.ws-list-quick-add input::placeholder { color: var(--text-muted); }

/* Reminders */
.ws-reminders-section { margin-top: var(--space-8); }
.ws-reminders-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.ws-reminders-header-title { font-size: var(--font-md); font-weight: 700; }

.ws-reminder-card {
    display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4);
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent); border-radius: var(--radius-md); margin-bottom: var(--space-2);
}
.ws-reminder-icon { font-size: 1.2rem; }
.ws-reminder-content { flex: 1; }
.ws-reminder-title { font-weight: 600; font-size: var(--font-base); }
.ws-reminder-meta { font-size: var(--font-xs); color: var(--text-muted); margin-top: 2px; }
.ws-reminder-target { font-weight: 600; color: var(--accent); }
.ws-reminder-delete { background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--font-sm); }
.ws-reminder-delete:hover { color: var(--danger); }
.ws-reminder-card.triggered { opacity: 0.5; border-left-color: var(--success); }

/* ==========================================================================
   MODALE - Ultra Premium Glassmorphism
   ========================================================================== */
.modal-backdrop {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.modal-content {
    background: var(--bg-secondary);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-lg),
                0 24px 48px rgba(0,0,0,0.8);
    transform: scale(0.95) translateY(10px);
    opacity: 0;
    animation: modalPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#modal-body input[type="text"],
#modal-body input[type="date"],
#modal-body input[type="time"],
#modal-body input[type="number"],
#modal-body select,
#modal-body textarea {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#modal-body select option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

#modal-body input:hover,
#modal-body select:hover,
#modal-body textarea:hover {
    border-color: var(--text-muted);
}

#modal-body input:focus,
#modal-body select:focus,
#modal-body textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

@keyframes modalPop {
    0% { opacity: 0; transform: scale(0.92) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============== MICRO-INTERACTIONS ============== */

/* Global focus ring */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Selection color */
::selection {
    background: var(--accent);
    color: #fff;
}

/* Skeleton loading animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* Fade in animation for sections */
.section.active {
    animation: fadeInUp 0.25s ease forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Button press effect */
.btn:active {
    transform: scale(0.97);
}

/* Card press feedback on mobile */
@media (max-width: 768px) {
    .card:active,
    .summary-card:active,
    .habit-card:active,
    .transaction-item:active {
        transform: scale(0.98);
        transition-duration: 80ms;
    }
}

/* Smooth link underline on hover */
a:hover {
    text-decoration-color: var(--accent);
}

/* Empty state styling */
.task-list p, .habit-list p, .event-list p, .reminder-list p {
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-8) 0;
    font-size: var(--font-sm);
}

/* ============================================================
   PRD-001-A6: Mind-map mobile / touch UX
   ============================================================ */
#mindmap-canvas {
    touch-action: none;          /* zablokuj natywny gest scroll/zoom — simple-mind-map sam obsluguje pinch */
    overscroll-behavior: contain; /* odetnij PWA swipe-back na iOS */
    -webkit-user-select: none;
    user-select: none;
}
#mindmap-canvas * { -webkit-tap-highlight-color: transparent; }

@media (max-width: 768px) {
    /* Powiekszone touch targets dla toolbar mindmap */
    .drawflow-toolbar .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: 8px 10px;
    }
    #mindmap-canvas { height: calc(100vh - 240px) !important; }
}

/* ============================================================
   PRD-002-A2: Sortable.js Kanban drag & drop styling
   ============================================================ */
.kanban-column-cards {
    min-height: 40px;
    touch-action: pan-y; /* pozwol scroll pionowy, ale Sortable obsluguje drag */
}
.sortable-ghost {
    opacity: 0.4;
    background: var(--bg-tertiary, #e5e7eb);
}
.sortable-chosen {
    cursor: grabbing;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.kanban-card {
    cursor: grab;
    user-select: none;
}
.kanban-card:active {
    cursor: grabbing;
}

/* ============================================================
   PRD-003-A1: Notion-like 3-column layout (workspace)
   ============================================================ */
.ws-layout {
    display: grid;
    grid-template-columns: var(--ws-sidebar-w, 220px) 1fr var(--ws-detail-w, 0px);
    grid-template-rows: 1fr;
    height: calc(100vh - var(--ws-layout-offset, 0px));
    width: 100%;
    overflow: hidden;
    gap: 0;
    transition: grid-template-columns 220ms ease;
    --ws-sidebar-w: 240px;
    --ws-detail-w: 0px;
}
.ws-layout.detail-open {
    --ws-detail-w: 340px;
}
.ws-layout.sidebar-collapsed {
    --ws-sidebar-w: 56px;
}

/* === Sidebar (lewy) === */
.ws-sidebar {
    background: var(--bg-secondary, #fafafa);
    border-right: 1px solid var(--border, #e5e7eb);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ws-sidebar-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 12px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    position: sticky;
    top: 0;
    background: var(--bg-secondary, #fafafa);
    z-index: 2;
}
.ws-sidebar-title {
    flex: 1;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ws-sidebar-collapse { margin-left: auto; }

.ws-layout.sidebar-collapsed .ws-sidebar-title,
.ws-layout.sidebar-collapsed .ws-sidebar-section-title,
.ws-layout.sidebar-collapsed .ws-sidebar-list { display: none; }
.ws-layout.sidebar-collapsed .ws-sidebar-header { padding: 12px 8px; justify-content: center; }

.ws-sidebar-section { padding: 10px 12px; border-bottom: 1px solid var(--border, #e5e7eb); }
.ws-sidebar-section:last-child { border-bottom: 0; }
.ws-sidebar-section-title {
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7280);
}
.ws-sidebar-list { display: flex; flex-direction: column; gap: 2px; }
.ws-sidebar-placeholder {
    color: var(--text-muted, #9ca3af);
    font-size: 12px;
    font-style: italic;
    padding: 6px 8px;
}

/* === Content (centralny) === */
.ws-content {
    background: var(--bg-primary, #fff);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.ws-content-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: var(--bg-primary, #fff);
}
.ws-content-header .workspace-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.ws-content-header .workspace-header-actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

/* Tab content scrolluje sie w obrebie content body */
.ws-content > .workspace-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
}

/* === Detail panel (prawy slide-in) === */
.ws-detail {
    background: var(--bg-secondary, #fafafa);
    border-left: 1px solid var(--border, #e5e7eb);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}
.ws-layout:not(.detail-open) .ws-detail { display: none; }
.ws-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-weight: 600;
}
.ws-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
}

/* Mobile bottom nav — ukryty na desktopie */
.ws-mobile-nav { display: none; }

/* === Mobile (<768px): drawers + bottom-nav === */
@media (max-width: 768px) {
    .ws-layout {
        display: block;
        height: calc(100vh - 56px); /* miejsce na bottom-nav */
        overflow: hidden;
    }
    .ws-sidebar, .ws-detail {
        position: fixed;
        top: 0;
        bottom: 56px; /* nad bottom-nav */
        width: 86vw;
        max-width: 360px;
        background: var(--bg-secondary, #fafafa);
        box-shadow: 0 0 24px rgba(0,0,0,0.18);
        z-index: 9100;
        transform: translateX(0);
        transition: transform 220ms cubic-bezier(.4,.2,.2,1);
    }
    .ws-sidebar {
        left: 0;
        transform: translateX(-100%);
    }
    .ws-detail {
        right: 0;
        transform: translateX(100%);
        display: flex !important;
        width: 100vw;
        max-width: 100vw;
    }
    .ws-layout.mobile-tab-sidebar .ws-sidebar { transform: translateX(0); }
    .ws-layout.mobile-tab-detail .ws-detail { transform: translateX(0); }

    .ws-content {
        width: 100%;
        height: 100%;
        display: flex;
    }

    /* Bottom-nav */
    .ws-mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--bg-primary, #fff);
        border-top: 1px solid var(--border, #e5e7eb);
        z-index: 9200;
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: content-box;
    }
    .ws-mobile-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 0;
        background: transparent;
        color: var(--text-muted, #6b7280);
        cursor: pointer;
        font-size: 11px;
        padding: 4px;
    }
    .ws-mobile-nav-btn.active { color: var(--accent, #6366F1); }
    .ws-mobile-nav-icon { font-size: 22px; line-height: 1; }
    .ws-mobile-nav-label { font-size: 10px; }

    /* Backdrop pod drawerem */
    .ws-layout.mobile-tab-sidebar::before,
    .ws-layout.mobile-tab-detail::before {
        content: '';
        position: fixed;
        inset: 0 0 56px 0;
        background: rgba(0,0,0,0.35);
        z-index: 9050;
    }
}

/* PRD-003-A1+: Sidebar item styling */
.ws-side-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary, #111827);
    user-select: none;
    transition: background 120ms;
}
.ws-side-item:hover { background: var(--bg-tertiary, #f3f4f6); }
.ws-side-item.active { background: var(--accent-bg, rgba(99,102,241,0.12)); color: var(--accent, #6366F1); font-weight: 600; }
.ws-side-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted, #9ca3af);
    flex-shrink: 0;
}
.ws-side-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-side-count {
    font-size: 11px;
    color: var(--text-muted, #6b7280);
    background: var(--bg-tertiary, #f3f4f6);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
.ws-side-action {
    opacity: 0;
    padding: 2px 4px;
    font-size: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--text-muted, #6b7280);
}
.ws-side-item:hover .ws-side-action { opacity: 1; }
.ws-side-add {
    width: 100%;
    margin-top: 6px;
    padding: 6px 8px;
    background: transparent;
    border: 1px dashed var(--border, #d1d5db);
    border-radius: 6px;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    font-size: 12px;
    transition: all 120ms;
}
.ws-side-add:hover {
    border-color: var(--accent, #6366F1);
    color: var(--accent, #6366F1);
    background: var(--accent-bg, rgba(99,102,241,0.06));
}

/* ============================================================
   PRD-003-A1+: Workspace Notion-vibe polish
   ============================================================ */
:root {
    --ws-radius: 8px;
    --ws-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --ws-shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --ws-bg-sidebar: #fbfbfa;
    --ws-bg-content: #ffffff;
    --ws-bg-hover: #f3f3f1;
    --ws-text-strong: #37352f;
    --ws-text-muted: #9b9a97;
    --ws-border-soft: rgba(15,15,15,0.06);
    --ws-accent-soft: rgba(99,102,241,0.10);
}
[data-theme="dark"] {
    --ws-bg-sidebar: #202020;
    --ws-bg-content: #191919;
    --ws-bg-hover: #2f2f2f;
    --ws-text-strong: #e6e6e6;
    --ws-text-muted: #8d8d8d;
    --ws-border-soft: rgba(255,255,255,0.07);
}

.ws-layout { background: var(--ws-bg-content); }
.ws-sidebar { background: var(--ws-bg-sidebar); border-right-color: var(--ws-border-soft); }
.ws-detail { background: var(--ws-bg-sidebar); border-left-color: var(--ws-border-soft); }
.ws-sidebar-header { border-bottom-color: var(--ws-border-soft); padding: 14px 14px; }
.ws-sidebar-title { font-size: 15px; font-weight: 700; color: var(--ws-text-strong); letter-spacing: -0.01em; }
.ws-sidebar-section { border-bottom-color: var(--ws-border-soft); padding: 12px 10px 14px; }
.ws-sidebar-section-title {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ws-text-muted); padding: 0 6px; margin-bottom: 6px;
}
.ws-side-item {
    padding: 5px 8px; border-radius: 6px; font-size: 13.5px; color: var(--ws-text-strong);
    transition: background 80ms ease, color 80ms ease;
}
.ws-side-item:hover { background: var(--ws-bg-hover); }
.ws-side-item.active { background: var(--ws-accent-soft); color: var(--accent, #6366F1); }
.ws-side-count {
    background: transparent; color: var(--ws-text-muted); font-size: 11px;
    padding: 0 4px; font-weight: 600;
}
.ws-side-add {
    margin: 6px 0 0 0; padding: 5px 8px; font-size: 12.5px;
    color: var(--ws-text-muted); border: 0; border-radius: 6px;
    background: transparent; text-align: left; width: 100%;
}
.ws-side-add:hover { background: var(--ws-bg-hover); color: var(--ws-text-strong); border: 0; }

.ws-content { background: var(--ws-bg-content); }
.ws-content-header {
    padding: 14px 24px; border-bottom-color: var(--ws-border-soft);
    background: var(--ws-bg-content);
}
.ws-content-header .workspace-tabs .btn { padding: 6px 12px; font-size: 13px; font-weight: 500; }
.ws-content-header .workspace-tabs .btn.active {
    background: var(--ws-bg-hover); color: var(--ws-text-strong);
    box-shadow: var(--ws-shadow-sm);
}
.ws-content > .workspace-tab-content { padding: 24px 28px; }

/* Kanban polish */
.kanban-board { gap: 16px; padding: 0; }
.kanban-column {
    background: var(--ws-bg-sidebar);
    border: 1px solid var(--ws-border-soft);
    border-radius: var(--ws-radius);
    padding: 12px;
    box-shadow: var(--ws-shadow-sm);
}
.kanban-column-header {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ws-text-muted);
    margin-bottom: 10px; padding: 0 2px;
}
.kanban-card {
    background: var(--ws-bg-content);
    border: 1px solid var(--ws-border-soft);
    border-radius: 6px;
    box-shadow: var(--ws-shadow-sm);
    padding: 10px 12px;
    margin-bottom: 6px;
    transition: box-shadow 100ms, transform 100ms;
}
.kanban-card:hover { box-shadow: var(--ws-shadow-md); transform: translateY(-1px); }
.kanban-card-title { font-weight: 500; font-size: 14px; color: var(--ws-text-strong); }
.kanban-add-card-btn {
    color: var(--ws-text-muted); padding: 6px; font-size: 13px;
    background: transparent; border: 0; border-radius: 6px; cursor: pointer; text-align: left;
}
.kanban-add-card-btn:hover { background: var(--ws-bg-hover); color: var(--ws-text-strong); }

/* Detail panel polish */
.ws-detail-header { padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--ws-text-strong); border-bottom-color: var(--ws-border-soft); }
.ws-detail-body { padding: 18px; }

/* Section header zostaje (button "+ Nowy Workspace" wymagany w list view).
   W detail view (3-column grid) layout zajmuje pelna szerokosc pod headerem. */

/* FullCalendar (PRD-003-A3) — drobny tuning pod nasz theme */
.fc { font-family: inherit; font-size: 13.5px; }
.fc .fc-toolbar-title { font-size: 18px; font-weight: 600; color: var(--ws-text-strong); }
.fc .fc-button-primary {
    background: var(--ws-bg-hover, #f3f3f1);
    border-color: var(--ws-border-soft);
    color: var(--ws-text-strong);
    font-weight: 500;
}
.fc .fc-button-primary:hover { background: var(--ws-border-soft); }
.fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--accent, #6366F1); border-color: var(--accent, #6366F1); color: #fff; }
.fc-event { border-radius: 4px; padding: 1px 4px; font-weight: 500; cursor: pointer; }
.fc-day-today { background: var(--ws-accent-soft, rgba(99,102,241,0.07)) !important; }

/* ============================================================
   PRD-003 onboarding — Welcome card + sidebar hints
   ============================================================ */
.ws-sidebar-hint {
    font-size: 11px;
    color: var(--ws-text-muted, #9b9a97);
    margin: 0 6px 8px 6px;
    font-style: italic;
    line-height: 1.3;
}

.ws-welcome {
    max-width: 900px;
    margin: 0 auto 32px;
    padding: 12px 0 0;
}
.ws-welcome-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ws-text-strong, #37352f);
    letter-spacing: -0.02em;
}
.ws-welcome-sub {
    font-size: 15px;
    color: var(--ws-text-muted, #6b7280);
    margin: 0 0 24px;
}
.ws-welcome-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.ws-welcome-card {
    background: var(--ws-bg-content, #fff);
    border: 1px solid var(--ws-border-soft, rgba(15,15,15,0.08));
    border-radius: 10px;
    padding: 18px;
    cursor: pointer;
    transition: all 140ms ease;
    box-shadow: var(--ws-shadow-sm);
}
.ws-welcome-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: var(--accent, #6366F1);
}
.ws-welcome-icon { font-size: 28px; margin-bottom: 10px; line-height: 1; }
.ws-welcome-card-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--ws-text-strong, #37352f);
}
.ws-welcome-card-desc {
    font-size: 13px;
    color: var(--ws-text-muted, #6b7280);
    line-height: 1.4;
}

.ws-welcome-help {
    margin-top: 8px;
    padding: 14px 16px;
    background: var(--ws-bg-sidebar, #fbfbfa);
    border-radius: 8px;
    border: 1px solid var(--ws-border-soft, rgba(15,15,15,0.06));
}
.ws-welcome-help summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--accent, #6366F1);
    list-style: none;
    user-select: none;
}
.ws-welcome-help summary::-webkit-details-marker { display: none; }
.ws-welcome-help summary::before { content: '▸ '; font-size: 11px; transition: transform 120ms; display: inline-block; }
.ws-welcome-help[open] summary::before { transform: rotate(90deg); }
.ws-help-content {
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--ws-text-strong, #37352f);
    line-height: 1.55;
}
.ws-help-content ul { margin: 8px 0; padding-left: 22px; }
.ws-help-content li { margin: 4px 0; }
.ws-help-content b { color: var(--accent, #6366F1); }

/* Schowaj welcome card jak workspace ma juz duzo aktywnosci (po onboardingu) */
.ws-welcome.dismissed { display: none; }

/* ============================================================
   PRD-004 / Faza A: Notion-vibe sidebar tree + topbar
   ============================================================ */
.lucide-icon { width: 16px; height: 16px; stroke-width: 1.75; display: inline-block; vertical-align: -3px; flex-shrink: 0; }

/* Sidebar reorganizacja */
.ws-sidebar { padding: 0; }
.ws-sidebar-header { padding: 14px 14px 12px; gap: 6px; }
.ws-sidebar-title { font-size: 14.5px; letter-spacing: -0.005em; }
.ws-icon-btn {
    background: transparent; border: 0; cursor: pointer;
    width: 26px; height: 26px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ws-text-muted, #6b7280); border-radius: 5px;
    transition: background 100ms, color 100ms;
}
.ws-icon-btn:hover { background: var(--ws-bg-hover); color: var(--ws-text-strong); }

/* Drzewo nawigacyjne */
.ws-nav {
    display: flex; flex-direction: column; gap: 1px;
    padding: 4px 6px 14px 6px;
    border-bottom: 1px solid var(--ws-border-soft);
}
.ws-nav-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px; border-radius: 5px;
    background: transparent; border: 0;
    color: var(--ws-text-strong, #37352f);
    font-size: 13.5px; font-weight: 500;
    cursor: pointer; text-align: left; width: 100%;
    transition: background 80ms;
}
.ws-nav-item:hover { background: var(--ws-bg-hover); }
.ws-nav-item.active { background: var(--ws-accent-soft); color: var(--accent, #6366F1); }
.ws-nav-item.active .lucide-icon { color: var(--accent, #6366F1); }
.ws-nav-item > span:first-of-type { flex: 1; }
.ws-nav-item .lucide-icon { color: var(--ws-text-muted); }
.ws-nav-count {
    font-size: 11px; color: var(--ws-text-muted);
    background: var(--ws-bg-hover); padding: 1px 6px; border-radius: 10px;
    min-width: 18px; text-align: center; font-weight: 600;
}
.ws-nav-count:empty { display: none; }
.ws-nav-trail { opacity: 0.5; margin-left: auto; }

/* Sekcje sidebar (Projekty/Dokumenty) */
.ws-sidebar-section { padding: 10px 10px 12px; border-bottom-color: var(--ws-border-soft); }
.ws-sidebar-section:last-child { border-bottom: 0; }
.ws-sidebar-section-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--ws-text-muted);
    padding: 4px 4px; margin: 0 0 4px 0;
}
.ws-sec-icon { width: 13px; height: 13px; opacity: 0.7; }
.ws-sec-add { margin-left: auto; width: 22px; height: 22px; }
.ws-sec-add .lucide-icon { width: 13px; height: 13px; }
.ws-sidebar-hint { display: none; } /* Niepotrzebne po fazach A */

/* Topbar (content header) */
.ws-content-header {
    padding: 14px 28px;
    gap: 16px;
}
.ws-view-title {
    margin: 0; flex: 1;
    font-size: 22px; font-weight: 700;
    color: var(--ws-text-strong); letter-spacing: -0.02em;
}
.ws-topbar-actions { display: flex; gap: 8px; }
.ws-topbar-quick {
    width: auto; padding: 6px 12px; gap: 6px;
    background: var(--accent, #6366F1); color: #fff !important;
    font-weight: 500; font-size: 13px;
    border-radius: 6px;
}
.ws-topbar-quick:hover { background: #4F46E5; color: #fff; }
.ws-topbar-quick .lucide-icon { color: #fff; width: 15px; height: 15px; }

/* Old welcome card — wycisz, juz mamy sidebar */
.ws-welcome { max-width: 760px; margin: 12px auto 24px; padding: 0; }
.ws-welcome-title { font-size: 24px; }
.ws-welcome-sub { font-size: 14px; }
.ws-welcome-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.ws-welcome-card { padding: 14px; }
.ws-welcome-icon { font-size: 22px; margin-bottom: 6px; }
.ws-welcome-card-title { font-size: 14px; }
.ws-welcome-card-desc { font-size: 12.5px; }

/* Old kanban tab toolbar (z showWorkspaceTab('board')) — gdy widoczny, lekki polish */
.ws-content > .workspace-tab-content { padding: 20px 28px; }

/* Mobile: ukryj sidebar online indicators w main header (sa juz w sidebar) */
@media (max-width: 768px) {
    .ws-view-title { font-size: 18px; }
    .ws-content-header { padding: 12px 16px; gap: 10px; }
}

/* ============================================================
   PRD-004 / Faza A.5: Uniwersalny modal Notion-vibe + button polish
   ============================================================ */
.ws-modal-content {
    background: var(--ws-bg-content, #fff) !important;
    border-radius: 12px !important;
    border: 1px solid var(--ws-border-soft, rgba(15,15,15,0.06)) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,0.18) !important;
    overflow: hidden;
    max-width: 560px;
    width: 92vw;
}
.ws-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ws-border-soft, rgba(15,15,15,0.06));
    background: var(--ws-bg-content, #fff);
}
.ws-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--ws-text-strong, #37352f);
    letter-spacing: -0.005em;
}
.ws-modal-body {
    padding: 18px;
    background: var(--ws-bg-content, #fff);
}
.ws-modal-body .form-group { margin-bottom: 14px; }
.ws-modal-body label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ws-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ws-modal-body input[type="text"],
.ws-modal-body input[type="email"],
.ws-modal-body input[type="date"],
.ws-modal-body input[type="number"],
.ws-modal-body select,
.ws-modal-body textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ws-border-soft, rgba(15,15,15,0.12));
    border-radius: 6px;
    background: var(--ws-bg-content, #fff);
    color: var(--ws-text-strong, #37352f);
    font-size: 14px;
    transition: border-color 100ms, box-shadow 100ms;
}
.ws-modal-body input:focus,
.ws-modal-body select:focus,
.ws-modal-body textarea:focus {
    outline: none;
    border-color: var(--accent, #6366F1);
    box-shadow: 0 0 0 3px var(--ws-accent-soft, rgba(99,102,241,0.15));
}
.ws-modal-body .btn-primary, .ws-modal-body .btn-full {
    background: var(--accent, #6366F1) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 500;
    padding: 9px 18px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 100ms;
}
.ws-modal-body .btn-primary:hover { background: #4F46E5 !important; }
.ws-modal-body .btn-secondary {
    background: var(--ws-bg-hover, #f3f3f1) !important;
    color: var(--ws-text-strong, #37352f) !important;
    border: 0 !important;
    padding: 9px 16px;
    border-radius: 6px;
}
.ws-modal-body .btn-danger {
    background: #EF4444 !important;
    color: #fff !important;
    border: 0 !important;
    padding: 9px 16px;
    border-radius: 6px;
}

/* Workspace list — kafelki Notion-vibe */
.workspace-list { padding: 8px 0 4px; }
.workspace-card {
    border: 1px solid var(--ws-border-soft, rgba(15,15,15,0.08));
    border-radius: 8px;
    background: var(--ws-bg-content, #fff);
    transition: all 140ms ease;
}
.workspace-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: var(--accent, #6366F1);
}

/* CTA primary button w sekcji workspace (np. + Nowy Workspace) */
#workspace-section > .section-header .btn-primary {
    background: var(--accent, #6366F1);
    border: 0;
    color: #fff;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 6px;
    gap: 6px;
    display: inline-flex;
    align-items: center;
}
#workspace-section > .section-header .btn-primary:hover { background: #4F46E5; }

/* Kanban + Card detail polish — Lucide-friendly */
.kanban-add-card-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ws-text-muted, #6b7280);
    background: transparent;
    border: 1px dashed transparent;
    padding: 6px 8px;
    width: 100%;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}
.kanban-add-card-btn:hover {
    background: var(--ws-bg-hover);
    border-color: var(--ws-border-soft);
    color: var(--ws-text-strong);
}

/* ============================================================
   PRD-004 / Faza B: Project View
   ============================================================ */
.ws-project-header {
    border-bottom: 1px solid var(--ws-border-soft);
    padding: 0 0 20px 0;
    margin-bottom: 20px;
}
.ws-project-skeleton {
    color: var(--ws-text-muted); padding: 24px 0;
    font-size: 14px;
}
.ws-project-title-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
.ws-project-color-dot {
    width: 14px; height: 14px; border-radius: 4px;
    flex-shrink: 0;
}
.ws-project-name {
    margin: 0; flex: 1;
    font-size: 26px; font-weight: 700;
    color: var(--ws-text-strong);
    letter-spacing: -0.02em;
}
.ws-project-actions { display: flex; gap: 4px; }

.ws-project-progress { margin-bottom: 18px; }
.ws-progress-bar {
    background: var(--ws-bg-hover);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}
.ws-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 400ms cubic-bezier(.4,.2,.2,1);
}
.ws-progress-label {
    font-size: 12.5px;
    color: var(--ws-text-muted);
}

.ws-project-stat-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.ws-stat-card {
    background: var(--ws-bg-sidebar);
    border: 1px solid var(--ws-border-soft);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
    position: relative;
}
.ws-stat-icon {
    color: var(--ws-text-muted);
    margin-bottom: 4px;
}
.ws-stat-icon .lucide-icon { width: 18px; height: 18px; }
.ws-stat-card.stat-todo .ws-stat-icon { color: #94a3b8; }
.ws-stat-card.stat-progress .ws-stat-icon { color: #3b82f6; }
.ws-stat-card.stat-done .ws-stat-icon { color: #10B981; }
.ws-stat-card.stat-blocked .ws-stat-icon { color: #EF4444; }
.ws-stat-num {
    font-size: 22px; font-weight: 700;
    color: var(--ws-text-strong);
    line-height: 1.1;
}
.ws-stat-label {
    font-size: 11.5px; font-weight: 500;
    color: var(--ws-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Sub-tabs */
.ws-project-subtabs {
    display: flex; gap: 4px;
    border-bottom: 1px solid var(--ws-border-soft);
    margin-bottom: 18px;
    padding-bottom: 0;
}
.ws-project-subtab {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0;
    padding: 8px 14px;
    font-size: 13.5px; font-weight: 500;
    color: var(--ws-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 100ms, border-color 100ms;
}
.ws-project-subtab:hover { color: var(--ws-text-strong); }
.ws-project-subtab.active {
    color: var(--accent, #6366F1);
    border-bottom-color: var(--accent, #6366F1);
}
.ws-project-subtab .lucide-icon { width: 15px; height: 15px; }

/* Section header w project content */
.ws-project-section-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px;
}
.ws-project-section-header h3 {
    margin: 0; font-size: 15px; font-weight: 600;
    color: var(--ws-text-strong);
}
.ws-project-section-header .btn-primary {
    background: var(--accent, #6366F1); color: #fff;
    border: 0; padding: 7px 12px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; cursor: pointer;
}
.ws-project-section-header .btn-primary:hover { background: #4F46E5; }
.ws-project-section-header .btn-primary .lucide-icon { width: 14px; height: 14px; color: #fff; }

/* Task list */
.ws-task-list {
    list-style: none; padding: 0; margin: 0;
    border: 1px solid var(--ws-border-soft);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ws-bg-content);
}
.ws-task-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ws-border-soft);
    cursor: default;
    transition: background 80ms;
}
.ws-task-row:last-child { border-bottom: 0; }
.ws-task-row:hover { background: var(--ws-bg-hover); }
.ws-task-row.is-done .ws-task-title { color: var(--ws-text-muted); text-decoration: line-through; }
.ws-task-status {
    background: transparent; border: 0; cursor: pointer;
    padding: 2px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #94a3b8;
}
.ws-task-status.status-todo { color: #94a3b8; }
.ws-task-status.status-in_progress { color: #3b82f6; }
.ws-task-status.status-done { color: #10B981; }
.ws-task-status.status-blocked { color: #EF4444; }
.ws-task-status .lucide-icon { width: 18px; height: 18px; }
.ws-task-status:hover { background: var(--ws-bg-hover); }
.ws-task-title {
    flex: 1; font-size: 14px; color: var(--ws-text-strong);
    cursor: pointer;
}
.ws-task-title:hover { color: var(--accent, #6366F1); }
.ws-task-assignee {
    font-size: 12px; color: var(--ws-text-muted);
    background: var(--ws-bg-hover);
    padding: 2px 8px; border-radius: 10px;
}
.ws-task-due {
    font-size: 12px; color: var(--ws-text-muted);
    background: var(--ws-bg-hover);
    padding: 2px 8px; border-radius: 10px;
}

/* Empty state */
.ws-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--ws-text-muted);
    background: var(--ws-bg-sidebar);
    border: 1px dashed var(--ws-border-soft);
    border-radius: 12px;
}
.ws-empty-icon { width: 48px; height: 48px; color: var(--ws-text-muted); opacity: 0.5; }
.ws-empty-state h3 {
    margin: 12px 0 6px;
    font-size: 16px; font-weight: 600;
    color: var(--ws-text-strong);
}
.ws-empty-state p { margin: 0 0 16px; font-size: 13.5px; }
.ws-empty-state .btn-primary {
    background: var(--accent, #6366F1); color: #fff;
    border: 0; padding: 9px 16px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500; cursor: pointer;
}
.ws-empty-state .btn-primary:hover { background: #4F46E5; }

.ws-placeholder-soft {
    text-align: center; color: var(--ws-text-muted);
    padding: 32px 24px;
    background: var(--ws-bg-sidebar);
    border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    font-size: 14px;
}
.ws-placeholder-soft .lucide-icon { width: 28px; height: 28px; opacity: 0.6; }

/* ============================================================
   FazaD: Project Kanban (4 status columns)
   ============================================================ */
.ws-proj-kanban {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    align-items: start;
}
.ws-proj-col {
    background: var(--ws-bg-sidebar);
    border: 1px solid var(--ws-border-soft);
    border-radius: 10px;
    padding: 10px;
    min-height: 200px;
}
.ws-proj-col-header {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 4px 10px;
    border-bottom: 1px solid var(--ws-border-soft);
    margin-bottom: 8px;
}
.ws-proj-col-header .lucide-icon { width: 14px; height: 14px; }
.ws-proj-col-title {
    flex: 1;
    font-size: 11.5px; font-weight: 700;
    color: var(--ws-text-strong);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.ws-proj-col-count {
    font-size: 11px; font-weight: 600;
    color: var(--ws-text-muted);
    background: var(--ws-bg-hover);
    padding: 1px 7px; border-radius: 10px;
}
.ws-proj-col-cards {
    min-height: 60px;
    display: flex; flex-direction: column; gap: 6px;
}
.ws-proj-card {
    background: var(--ws-bg-content);
    border: 1px solid var(--ws-border-soft);
    border-radius: 6px;
    padding: 9px 11px;
    cursor: grab;
    transition: box-shadow 100ms, transform 100ms;
    user-select: none;
}
.ws-proj-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
.ws-proj-card-title {
    font-size: 13.5px; font-weight: 500;
    color: var(--ws-text-strong);
    line-height: 1.35;
    margin-bottom: 4px;
}
.ws-proj-card-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ============================================================
   FazaE: Detail panel form (task / note)
   ============================================================ */
.ws-detail-task {
    display: flex; flex-direction: column;
}
.ws-detail-title-input {
    width: 100%;
    border: 0;
    background: transparent;
    font-size: 18px; font-weight: 600;
    color: var(--ws-text-strong);
    padding: 4px 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ws-border-soft);
    outline: none;
}
.ws-detail-title-input:focus { border-bottom-color: var(--accent, #6366F1); }

.ws-detail-field {
    margin-bottom: 14px;
}
.ws-detail-field label {
    display: block;
    font-size: 11px; font-weight: 600;
    color: var(--ws-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 5px;
}
.ws-detail-field input[type="text"],
.ws-detail-field input[type="date"],
.ws-detail-field input[type="number"],
.ws-detail-field select,
.ws-detail-field textarea {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--ws-border-soft);
    border-radius: 5px;
    background: var(--ws-bg-content);
    color: var(--ws-text-strong);
    font-size: 13.5px;
    font-family: inherit;
    transition: border-color 100ms;
}
.ws-detail-field input:focus,
.ws-detail-field select:focus,
.ws-detail-field textarea:focus {
    outline: none;
    border-color: var(--accent, #6366F1);
    box-shadow: 0 0 0 3px var(--ws-accent-soft);
}
.ws-detail-field textarea { resize: vertical; min-height: 80px; }

.ws-detail-subtasks {
    list-style: none; padding: 0; margin: 0;
    border: 1px solid var(--ws-border-soft);
    border-radius: 6px;
    overflow: hidden;
}
.ws-detail-subtasks .ws-task-row {
    padding: 7px 10px;
    border-bottom: 1px solid var(--ws-border-soft);
}
.ws-detail-subtasks .ws-task-row:last-child { border-bottom: 0; }

.ws-detail-meta {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--ws-border-soft);
    font-size: 11.5px;
    color: var(--ws-text-muted);
    display: flex; flex-direction: column; gap: 4px;
}

.ws-detail-task .btn-danger,
.ws-detail-task .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; padding: 8px 14px; border-radius: 6px; cursor: pointer;
    font-size: 13px; font-weight: 500;
}
.ws-detail-task .btn-danger { background: #EF4444; color: #fff; }
.ws-detail-task .btn-danger:hover { background: #DC2626; }
.ws-detail-task .btn-secondary { background: var(--ws-bg-hover); color: var(--ws-text-strong); }
.ws-detail-task .btn-secondary:hover { background: var(--ws-border-soft); }
.ws-detail-task .lucide-icon { width: 14px; height: 14px; }

/* ============================================================
   Jspreadsheet — override default czarnych borderow + dark mode polish
   ============================================================ */
:root {
    --jss-border-color: var(--ws-border-soft, rgba(15,15,15,0.12));
    --jss-header-color: var(--ws-text-strong, #37352f);
    --jss-header-background-color: var(--ws-bg-sidebar, #fbfbfa);
    --jss-color: var(--ws-text-strong, #37352f);
    --jss-background-color: var(--ws-bg-content, #fff);
    --jss-selected-color: var(--accent, #6366F1);
    --jss-selected-background-color: var(--ws-accent-soft, rgba(99,102,241,0.10));
}
#ws-sheet-container {
    color: var(--ws-text-strong, #37352f);
}
#ws-sheet-container .jss_container,
#ws-sheet-container .jss_spreadsheet {
    background: var(--ws-bg-content, #fff);
}
#ws-sheet-container .jss thead td,
#ws-sheet-container .jss tbody td {
    border: 1px solid var(--ws-border-soft, rgba(15,15,15,0.12)) !important;
    color: var(--ws-text-strong, #37352f) !important;
    background: var(--ws-bg-content, #fff);
}
#ws-sheet-container .jss thead td {
    background: var(--ws-bg-sidebar, #fbfbfa) !important;
    font-weight: 600;
}
[data-theme="dark"] #ws-sheet-container .jss tbody td { background: #1a1a1a; color: #e6e6e6 !important; }
[data-theme="dark"] #ws-sheet-container .jss thead td { background: #252525 !important; }