:root {
    --ink: #1f241f;
    --muted: #697064;
    --paper: #f6f7f1;
    --surface: #ffffff;
    --surface-soft: #f9faf5;
    --surface-muted: #eef4ed;
    --line: #d9ded0;
    --line-strong: #c8d0bf;
    --green: #14786a;
    --green-dark: #0b5149;
    --blue: #2e6f9d;
    --coral: #bd5b49;
    --amber: #c98918;
    --danger: #a6342f;
    --shadow: 0 18px 42px rgba(32, 35, 31, 0.12);
    --shadow-soft: 0 10px 28px rgba(32, 35, 31, 0.08);
    --page-gradient: linear-gradient(135deg, #f7f8f1 0%, #f5fbff 52%, #fff8f3 100%);
    --header-bg: rgba(246, 247, 241, 0.92);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f7f9f2 100%);
    --app-main-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0) 240px);
    --task-rail-bg: rgba(255, 255, 255, 0.72);
    --brand-bg: #e9f5ef;
    --hover-bg: #eef5eb;
    --active-bg: #e4f3ed;
    --active-bg-soft: #e8f5ef;
    --quote-bg: rgba(255, 255, 255, 0.82);
    --score-item-bg: linear-gradient(180deg, rgba(249, 250, 245, 0.72), rgba(255, 255, 255, 0));
    --panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.86));
    --hero-panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 245, 0.86));
    --field-border: #cfd2c7;
    --progress-track: #e6e9df;
    --button-contrast: #ffffff;
}

[data-theme="dark"] {
    --ink: #edf3ee;
    --muted: #a9b5ad;
    --paper: #101412;
    --surface: #171d1a;
    --surface-soft: #202821;
    --surface-muted: #243129;
    --line: #2d3831;
    --line-strong: #415047;
    --green: #62d0bd;
    --green-dark: #a8eadf;
    --blue: #77b8ea;
    --coral: #ef8b76;
    --amber: #f1b95f;
    --danger: #ef7770;
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.28);
    --page-gradient: linear-gradient(135deg, #0f1412 0%, #111a1f 55%, #171316 100%);
    --header-bg: rgba(16, 20, 18, 0.92);
    --sidebar-bg: linear-gradient(180deg, #151b18 0%, #111713 100%);
    --app-main-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 240px);
    --task-rail-bg: rgba(18, 23, 21, 0.78);
    --brand-bg: #173d35;
    --hover-bg: #1f312b;
    --active-bg: #173d35;
    --active-bg-soft: #1b463d;
    --quote-bg: rgba(23, 29, 26, 0.86);
    --score-item-bg: linear-gradient(180deg, rgba(32, 40, 33, 0.72), rgba(23, 29, 26, 0));
    --panel-gradient: linear-gradient(135deg, rgba(23, 29, 26, 0.96), rgba(17, 26, 31, 0.86));
    --hero-panel-gradient: linear-gradient(135deg, rgba(23, 29, 26, 0.98), rgba(32, 40, 33, 0.86));
    --field-border: #46534b;
    --progress-track: #303a33;
    --button-contrast: #0b1512;
}

[data-theme="firewall"] {
    --ink: #2d1716;
    --muted: #75534f;
    --paper: #f8f1ef;
    --surface: #fffafa;
    --surface-soft: #fff4f1;
    --surface-muted: #fde8e3;
    --line: #e7c3bd;
    --line-strong: #d79c94;
    --green: #c81f1f;
    --green-dark: #7d1111;
    --blue: #5d5d66;
    --coral: #ef5b41;
    --amber: #d98322;
    --danger: #9f1515;
    --shadow: 0 18px 42px rgba(91, 21, 16, 0.16);
    --shadow-soft: 0 10px 28px rgba(91, 21, 16, 0.10);
    --page-gradient: linear-gradient(135deg, #f9f0ed 0%, #fff8f5 46%, #f4e4df 100%);
    --header-bg: rgba(248, 241, 239, 0.94);
    --sidebar-bg: linear-gradient(180deg, #fffafa 0%, #f9ebe7 100%);
    --app-main-bg: linear-gradient(180deg, rgba(255, 250, 250, 0.74), rgba(255, 250, 250, 0) 240px);
    --task-rail-bg: rgba(255, 250, 250, 0.76);
    --brand-bg: #ffe0da;
    --hover-bg: #ffe8e3;
    --active-bg: #ffdcd5;
    --active-bg-soft: #ffe6e1;
    --quote-bg: rgba(255, 250, 250, 0.88);
    --score-item-bg: linear-gradient(180deg, rgba(255, 244, 241, 0.82), rgba(255, 250, 250, 0));
    --panel-gradient: linear-gradient(135deg, rgba(255, 250, 250, 0.96), rgba(255, 239, 235, 0.88));
    --hero-panel-gradient: linear-gradient(135deg, rgba(255, 250, 250, 0.98), rgba(255, 244, 241, 0.88));
    --field-border: #d7aaa2;
    --progress-track: #efd4cf;
}

[data-theme="ocean"] {
    --ink: #17252d;
    --muted: #647780;
    --paper: #f1f8fb;
    --surface: #ffffff;
    --surface-soft: #f4fbfd;
    --surface-muted: #e4f4f8;
    --line: #cfe1e7;
    --line-strong: #a9c7d0;
    --green: #0f7f84;
    --green-dark: #07565b;
    --blue: #1f7fc1;
    --coral: #d16d5b;
    --amber: #c8942d;
    --shadow: 0 18px 42px rgba(20, 55, 66, 0.13);
    --shadow-soft: 0 10px 28px rgba(20, 55, 66, 0.08);
    --page-gradient: linear-gradient(135deg, #f1f8fb 0%, #effcff 48%, #f8fbf4 100%);
    --header-bg: rgba(241, 248, 251, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #edf8fb 100%);
    --app-main-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 240px);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #dff3f4;
    --hover-bg: #e8f6f8;
    --active-bg: #d9f0f2;
    --active-bg-soft: #e4f5f7;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --score-item-bg: linear-gradient(180deg, rgba(244, 251, 253, 0.82), rgba(255, 255, 255, 0));
    --panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(238, 249, 252, 0.88));
    --hero-panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 253, 0.88));
    --field-border: #bbd4dc;
    --progress-track: #d8e9ee;
}

[data-theme="forest"] {
    --ink: #202719;
    --muted: #6b735d;
    --paper: #f5f8ef;
    --surface: #ffffff;
    --surface-soft: #f7faef;
    --surface-muted: #edf3df;
    --line: #d9e0c9;
    --line-strong: #b8c69e;
    --green: #4d7c2f;
    --green-dark: #2e541b;
    --blue: #4e7d8e;
    --coral: #bd7257;
    --amber: #b78d1c;
    --shadow: 0 18px 42px rgba(48, 69, 28, 0.13);
    --shadow-soft: 0 10px 28px rgba(48, 69, 28, 0.08);
    --page-gradient: linear-gradient(135deg, #f5f8ef 0%, #fbfbf3 48%, #edf6e8 100%);
    --header-bg: rgba(245, 248, 239, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f6e6 100%);
    --app-main-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 240px);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #e8f2dc;
    --hover-bg: #edf5e5;
    --active-bg: #e2efd5;
    --active-bg-soft: #edf5e5;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --score-item-bg: linear-gradient(180deg, rgba(247, 250, 239, 0.82), rgba(255, 255, 255, 0));
    --panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 248, 232, 0.88));
    --hero-panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 239, 0.88));
    --field-border: #c3ceb3;
    --progress-track: #dde7cf;
}

[data-theme="graphite"] {
    --ink: #202326;
    --muted: #6b7075;
    --paper: #f4f5f6;
    --surface: #ffffff;
    --surface-soft: #f8f9fa;
    --surface-muted: #eceff1;
    --line: #d5dadd;
    --line-strong: #b8c0c5;
    --green: #3d6f74;
    --green-dark: #243f44;
    --blue: #586f9e;
    --coral: #b96458;
    --amber: #9f7b28;
    --shadow: 0 18px 42px rgba(28, 34, 38, 0.13);
    --shadow-soft: 0 10px 28px rgba(28, 34, 38, 0.08);
    --page-gradient: linear-gradient(135deg, #f4f5f6 0%, #ffffff 48%, #eef1f2 100%);
    --header-bg: rgba(244, 245, 246, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f2f3 100%);
    --app-main-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 240px);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #e7eef0;
    --hover-bg: #edf2f3;
    --active-bg: #e2ebed;
    --active-bg-soft: #ebf1f2;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --score-item-bg: linear-gradient(180deg, rgba(248, 249, 250, 0.82), rgba(255, 255, 255, 0));
    --panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 243, 244, 0.88));
    --hero-panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 249, 250, 0.88));
    --field-border: #c6cdd1;
    --progress-track: #dfe5e7;
}

[data-theme="sunrise"] {
    --ink: #2a211c;
    --muted: #725f55;
    --paper: #fff6ee;
    --surface: #ffffff;
    --surface-soft: #fff9f3;
    --surface-muted: #f8e8dc;
    --line: #e7cfc1;
    --line-strong: #d7ad97;
    --green: #d96f3d;
    --green-dark: #8a3a20;
    --blue: #2f7f8f;
    --coral: #c7565a;
    --amber: #d19325;
    --danger: #a33b33;
    --shadow: 0 18px 42px rgba(116, 63, 33, 0.13);
    --shadow-soft: 0 10px 28px rgba(116, 63, 33, 0.08);
    --page-gradient: linear-gradient(135deg, #fff6ee 0%, #ffffff 48%, #edf8f8 100%);
    --header-bg: rgba(255, 246, 238, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #fff1e7 100%);
    --app-main-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 240px);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #f8e4d5;
    --hover-bg: #fff0e4;
    --active-bg: #f8ddca;
    --active-bg-soft: #fff0e4;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --score-item-bg: linear-gradient(180deg, rgba(255, 249, 243, 0.82), rgba(255, 255, 255, 0));
    --panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 240, 228, 0.88));
    --hero-panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 243, 0.88));
    --field-border: #d7b9a8;
    --progress-track: #eed7c9;
}

[data-theme="terminal"] {
    --ink: #e7ffe9;
    --muted: #9ec9a4;
    --paper: #0b1510;
    --surface: #101d16;
    --surface-soft: #15261c;
    --surface-muted: #1b3124;
    --line: #294536;
    --line-strong: #3a604a;
    --green: #7ee787;
    --green-dark: #b9ffc0;
    --blue: #6ecadc;
    --coral: #ff8f70;
    --amber: #ffd166;
    --danger: #ff6b6b;
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.30);
    --page-gradient: linear-gradient(135deg, #09100c 0%, #0d1d14 52%, #102019 100%);
    --header-bg: rgba(11, 21, 16, 0.94);
    --sidebar-bg: linear-gradient(180deg, #101d16 0%, #0b1510 100%);
    --app-main-bg: linear-gradient(180deg, rgba(126, 231, 135, 0.05), rgba(126, 231, 135, 0) 240px);
    --task-rail-bg: rgba(16, 29, 22, 0.78);
    --brand-bg: #143321;
    --hover-bg: #183524;
    --active-bg: #16442a;
    --active-bg-soft: #183524;
    --quote-bg: rgba(16, 29, 22, 0.86);
    --score-item-bg: linear-gradient(180deg, rgba(21, 38, 28, 0.78), rgba(16, 29, 22, 0));
    --panel-gradient: linear-gradient(135deg, rgba(16, 29, 22, 0.96), rgba(13, 29, 20, 0.88));
    --hero-panel-gradient: linear-gradient(135deg, rgba(16, 29, 22, 0.98), rgba(21, 38, 28, 0.88));
    --field-border: #3a604a;
    --progress-track: #233a2c;
    --button-contrast: #07110c;
}

[data-theme="aurora"] {
    --ink: #172321;
    --muted: #60736e;
    --paper: #f4fbf8;
    --surface: #ffffff;
    --surface-soft: #f7fcfa;
    --surface-muted: #e6f4f0;
    --line: #cfe2dc;
    --line-strong: #a9cbc2;
    --green: #1a9a8a;
    --green-dark: #0e5e55;
    --blue: #327cb7;
    --coral: #d94f70;
    --amber: #c59025;
    --danger: #a93447;
    --shadow: 0 18px 42px rgba(22, 73, 65, 0.13);
    --shadow-soft: 0 10px 28px rgba(22, 73, 65, 0.08);
    --page-gradient: linear-gradient(135deg, #f4fbf8 0%, #fff8fa 50%, #eef9fb 100%);
    --header-bg: rgba(244, 251, 248, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #effaf6 100%);
    --app-main-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0) 240px);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #dff4ee;
    --hover-bg: #e9f7f3;
    --active-bg: #d8f1eb;
    --active-bg-soft: #e9f7f3;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --score-item-bg: linear-gradient(180deg, rgba(247, 252, 250, 0.82), rgba(255, 255, 255, 0));
    --panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 250, 246, 0.88));
    --hero-panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 250, 0.88));
    --field-border: #bbd4cc;
    --progress-track: #d9eae5;
}

[data-theme="contrast"] {
    --ink: #111111;
    --muted: #4f4f4f;
    --paper: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f6f6f6;
    --surface-muted: #ebebeb;
    --line: #1f1f1f;
    --line-strong: #111111;
    --green: #006fd6;
    --green-dark: #003f7d;
    --blue: #0050c8;
    --coral: #c9332e;
    --amber: #8a6100;
    --danger: #a00000;
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.16);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.10);
    --page-gradient: linear-gradient(135deg, #ffffff 0%, #f6f6f6 52%, #ffffff 100%);
    --header-bg: rgba(255, 255, 255, 0.96);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
    --app-main-bg: linear-gradient(180deg, rgba(0, 111, 214, 0.04), rgba(0, 111, 214, 0) 240px);
    --task-rail-bg: rgba(255, 255, 255, 0.86);
    --brand-bg: #e8f2ff;
    --hover-bg: #eef5ff;
    --active-bg: #dceeff;
    --active-bg-soft: #eef5ff;
    --quote-bg: rgba(255, 255, 255, 0.92);
    --score-item-bg: linear-gradient(180deg, rgba(246, 246, 246, 0.86), rgba(255, 255, 255, 0));
    --panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 246, 0.92));
    --hero-panel-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 246, 0.92));
    --field-border: #1f1f1f;
    --progress-track: #d8d8d8;
}

[data-theme="skyline"] {
    --ink: #18242c;
    --muted: #61727d;
    --paper: #f5f9fb;
    --surface: #ffffff;
    --surface-soft: #f7fbfd;
    --surface-muted: #e6f0f5;
    --line: #ccdce4;
    --line-strong: #a7c0ce;
    --green: #2476a6;
    --green-dark: #164a68;
    --blue: #2b87c8;
    --coral: #d36b57;
    --amber: #ef9f42;
    --shadow: 0 18px 42px rgba(28, 65, 84, 0.13);
    --shadow-soft: 0 10px 28px rgba(28, 65, 84, 0.08);
    --page-gradient: linear-gradient(135deg, #f5f9fb 0%, #ffffff 48%, #edf6fb 100%);
    --header-bg: rgba(245, 249, 251, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #eef7fb 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #e1f0f6;
    --hover-bg: #eaf5fa;
    --active-bg: #dcecf4;
    --active-bg-soft: #eaf5fa;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #b8cdd8;
    --progress-track: #d9e8ef;
}

[data-theme="ember"] {
    --ink: #2b201b;
    --muted: #76645c;
    --paper: #fff7f0;
    --surface: #ffffff;
    --surface-soft: #fff9f3;
    --surface-muted: #f5e5da;
    --line: #e5cbbb;
    --line-strong: #d2a68f;
    --green: #b84a2f;
    --green-dark: #74311f;
    --blue: #276a6a;
    --coral: #d76645;
    --amber: #c78922;
    --shadow: 0 18px 42px rgba(101, 48, 27, 0.14);
    --shadow-soft: 0 10px 28px rgba(101, 48, 27, 0.08);
    --page-gradient: linear-gradient(135deg, #fff7f0 0%, #ffffff 48%, #f2fbf8 100%);
    --header-bg: rgba(255, 247, 240, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #fff0e6 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #f5dfd2;
    --hover-bg: #fff0e6;
    --active-bg: #f4d9c8;
    --active-bg-soft: #fff0e6;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #d1b09c;
    --progress-track: #ecd7ca;
}

[data-theme="cyber"] {
    --ink: #eef7ff;
    --muted: #9fb2c6;
    --paper: #0b111d;
    --surface: #121a28;
    --surface-soft: #172234;
    --surface-muted: #1c2d41;
    --line: #2a3d53;
    --line-strong: #3d5e78;
    --green: #31e6c5;
    --green-dark: #98fff0;
    --blue: #65a9ff;
    --coral: #ff7a87;
    --amber: #f1d36b;
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.30);
    --page-gradient: linear-gradient(135deg, #090f19 0%, #0d1728 50%, #111c26 100%);
    --header-bg: rgba(11, 17, 29, 0.94);
    --sidebar-bg: linear-gradient(180deg, #121a28 0%, #0b111d 100%);
    --task-rail-bg: rgba(18, 26, 40, 0.78);
    --brand-bg: #12333a;
    --hover-bg: #182b3a;
    --active-bg: #123d43;
    --active-bg-soft: #18363b;
    --quote-bg: rgba(18, 26, 40, 0.86);
    --field-border: #3d5e78;
    --progress-track: #263649;
    --button-contrast: #071016;
}

[data-theme="bloom"] {
    --ink: #2a2025;
    --muted: #75636a;
    --paper: #fff7f9;
    --surface: #ffffff;
    --surface-soft: #fff9fb;
    --surface-muted: #f6e5eb;
    --line: #e5cbd4;
    --line-strong: #d1a4b5;
    --green: #c94e73;
    --green-dark: #7c2943;
    --blue: #4d8b63;
    --coral: #d65f70;
    --amber: #bd8d24;
    --shadow: 0 18px 42px rgba(95, 35, 56, 0.13);
    --shadow-soft: 0 10px 28px rgba(95, 35, 56, 0.08);
    --page-gradient: linear-gradient(135deg, #fff7f9 0%, #ffffff 52%, #f2fbf4 100%);
    --header-bg: rgba(255, 247, 249, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #fff0f5 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #f5dfe7;
    --hover-bg: #fff0f5;
    --active-bg: #f4d8e3;
    --active-bg-soft: #fff0f5;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #d1b0bd;
    --progress-track: #ecd7df;
}

[data-theme="arctic"] {
    --ink: #16252c;
    --muted: #5d747d;
    --paper: #f3fbff;
    --surface: #ffffff;
    --surface-soft: #f7fdff;
    --surface-muted: #e4f3f8;
    --line: #c8dfe7;
    --line-strong: #9fc7d3;
    --green: #2b8ea3;
    --green-dark: #15586a;
    --blue: #4388c7;
    --coral: #c46a63;
    --amber: #8c7a2d;
    --shadow: 0 18px 42px rgba(28, 78, 93, 0.13);
    --shadow-soft: 0 10px 28px rgba(28, 78, 93, 0.08);
    --page-gradient: linear-gradient(135deg, #f3fbff 0%, #ffffff 50%, #f4faf6 100%);
    --header-bg: rgba(243, 251, 255, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #edf9fd 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #dff1f6;
    --hover-bg: #e9f7fb;
    --active-bg: #d9edf4;
    --active-bg-soft: #e9f7fb;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #b5d0d8;
    --progress-track: #d7e9ef;
}

[data-theme="volt"] {
    --ink: #202714;
    --muted: #65705a;
    --paper: #fbfff0;
    --surface: #ffffff;
    --surface-soft: #fdfff7;
    --surface-muted: #eef7d9;
    --line: #d8e6bd;
    --line-strong: #b9cf85;
    --green: #6da900;
    --green-dark: #476d00;
    --blue: #2f6eb8;
    --coral: #c16251;
    --amber: #c8951a;
    --shadow: 0 18px 42px rgba(63, 88, 20, 0.13);
    --shadow-soft: 0 10px 28px rgba(63, 88, 20, 0.08);
    --page-gradient: linear-gradient(135deg, #fbfff0 0%, #ffffff 50%, #f0f7ff 100%);
    --header-bg: rgba(251, 255, 240, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f5fde3 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #edf7d4;
    --hover-bg: #f3fae2;
    --active-bg: #e6f4c8;
    --active-bg-soft: #f3fae2;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #c5d8a2;
    --progress-track: #deebc8;
}

[data-theme="indigo"] {
    --ink: #20223a;
    --muted: #686c8a;
    --paper: #f5f6ff;
    --surface: #ffffff;
    --surface-soft: #f8f9ff;
    --surface-muted: #e8eaff;
    --line: #d1d4ee;
    --line-strong: #aeb4dc;
    --green: #5257c7;
    --green-dark: #2f3586;
    --blue: #0f8878;
    --coral: #cc5e74;
    --amber: #b78b24;
    --shadow: 0 18px 42px rgba(42, 47, 104, 0.13);
    --shadow-soft: 0 10px 28px rgba(42, 47, 104, 0.08);
    --page-gradient: linear-gradient(135deg, #f5f6ff 0%, #ffffff 50%, #f0fbf8 100%);
    --header-bg: rgba(245, 246, 255, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f1ff 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #e4e6fb;
    --hover-bg: #f0f1ff;
    --active-bg: #e1e4fb;
    --active-bg-soft: #f0f1ff;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #bcc1e4;
    --progress-track: #dde0f3;
}

[data-theme="sage"] {
    --ink: #20251d;
    --muted: #687063;
    --paper: #f6f9f2;
    --surface: #ffffff;
    --surface-soft: #f9fbf6;
    --surface-muted: #e9f0e0;
    --line: #d4dec9;
    --line-strong: #b4c5a5;
    --green: #6f8f61;
    --green-dark: #465d3a;
    --blue: #507d8b;
    --coral: #b26b4e;
    --amber: #a98524;
    --shadow: 0 18px 42px rgba(55, 76, 43, 0.13);
    --shadow-soft: 0 10px 28px rgba(55, 76, 43, 0.08);
    --page-gradient: linear-gradient(135deg, #f6f9f2 0%, #ffffff 52%, #f5f0ea 100%);
    --header-bg: rgba(246, 249, 242, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0f5ea 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #e7efdf;
    --hover-bg: #eef5e9;
    --active-bg: #e0ecd7;
    --active-bg-soft: #eef5e9;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #c0ccb5;
    --progress-track: #dae5d1;
}

[data-theme="mono"] {
    --ink: #202326;
    --muted: #6a6f72;
    --paper: #f7f8f8;
    --surface: #ffffff;
    --surface-soft: #fafafa;
    --surface-muted: #eeeeee;
    --line: #d8dddd;
    --line-strong: #babfc1;
    --green: #363b40;
    --green-dark: #1d2023;
    --blue: #607d8b;
    --coral: #9a6157;
    --amber: #8a6f2a;
    --shadow: 0 18px 42px rgba(28, 32, 35, 0.12);
    --shadow-soft: 0 10px 28px rgba(28, 32, 35, 0.08);
    --page-gradient: linear-gradient(135deg, #f7f8f8 0%, #ffffff 50%, #f1f2f2 100%);
    --header-bg: rgba(247, 248, 248, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f2f3f3 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #eceeee;
    --hover-bg: #f1f3f3;
    --active-bg: #e5e8e8;
    --active-bg-soft: #f1f3f3;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #c4c9ca;
    --progress-track: #e1e4e4;
}

[data-theme="gold"] {
    --ink: #252118;
    --muted: #716953;
    --paper: #fbfaf3;
    --surface: #ffffff;
    --surface-soft: #fdfbf6;
    --surface-muted: #f0ead6;
    --line: #ddd3ad;
    --line-strong: #c4b16e;
    --green: #9c7621;
    --green-dark: #614813;
    --blue: #176b5f;
    --coral: #b65f4d;
    --amber: #c99820;
    --shadow: 0 18px 42px rgba(82, 64, 22, 0.13);
    --shadow-soft: 0 10px 28px rgba(82, 64, 22, 0.08);
    --page-gradient: linear-gradient(135deg, #fbfaf3 0%, #ffffff 50%, #eef8f5 100%);
    --header-bg: rgba(251, 250, 243, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f8f3df 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #efe6c4;
    --hover-bg: #f8f2dc;
    --active-bg: #eee3bd;
    --active-bg-soft: #f8f2dc;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #cbbd88;
    --progress-track: #e6ddbd;
}

[data-theme="neon"] {
    --ink: #f0ffee;
    --muted: #abc6a7;
    --paper: #0f1210;
    --surface: #161a16;
    --surface-soft: #1d231c;
    --surface-muted: #273225;
    --line: #344334;
    --line-strong: #587057;
    --green: #9eff3f;
    --green-dark: #d6ff9a;
    --blue: #4bb4ff;
    --coral: #ff7272;
    --amber: #ffd36b;
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.30);
    --page-gradient: linear-gradient(135deg, #0d100e 0%, #111a13 48%, #101923 100%);
    --header-bg: rgba(15, 18, 16, 0.94);
    --sidebar-bg: linear-gradient(180deg, #161a16 0%, #0f1210 100%);
    --task-rail-bg: rgba(22, 26, 22, 0.78);
    --brand-bg: #243516;
    --hover-bg: #22321f;
    --active-bg: #30451f;
    --active-bg-soft: #263820;
    --quote-bg: rgba(22, 26, 22, 0.86);
    --field-border: #587057;
    --progress-track: #303c2e;
    --button-contrast: #0b1008;
}

[data-theme="crimson"] {
    --ink: #2b1d21;
    --muted: #735f64;
    --paper: #fff5f6;
    --surface: #ffffff;
    --surface-soft: #fff8f8;
    --surface-muted: #f5e2e5;
    --line: #e3c4ca;
    --line-strong: #ce9aa5;
    --green: #b51f3a;
    --green-dark: #701426;
    --blue: #216d73;
    --coral: #d34f5f;
    --amber: #b88a23;
    --shadow: 0 18px 42px rgba(96, 24, 41, 0.14);
    --shadow-soft: 0 10px 28px rgba(96, 24, 41, 0.08);
    --page-gradient: linear-gradient(135deg, #fff5f6 0%, #ffffff 50%, #f1fbfa 100%);
    --header-bg: rgba(255, 245, 246, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #fff0f2 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #f3d7dd;
    --hover-bg: #fff0f2;
    --active-bg: #f0d2da;
    --active-bg-soft: #fff0f2;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #d1a9b1;
    --progress-track: #ead4da;
}

[data-theme="iceberg"] {
    --ink: #182530;
    --muted: #60737f;
    --paper: #f4fbff;
    --surface: #ffffff;
    --surface-soft: #f8fdff;
    --surface-muted: #e6f3fb;
    --line: #cbdfeb;
    --line-strong: #a5c7dc;
    --green: #3b82b8;
    --green-dark: #20527a;
    --blue: #1f90a4;
    --coral: #c7655f;
    --amber: #ba7b2d;
    --shadow: 0 18px 42px rgba(29, 69, 99, 0.13);
    --shadow-soft: 0 10px 28px rgba(29, 69, 99, 0.08);
    --page-gradient: linear-gradient(135deg, #f4fbff 0%, #ffffff 50%, #f7fbf7 100%);
    --header-bg: rgba(244, 251, 255, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #edf8ff 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #e0f0f8;
    --hover-bg: #eaf6fc;
    --active-bg: #dceefa;
    --active-bg-soft: #eaf6fc;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #b7d0df;
    --progress-track: #d9e9f2;
}

[data-theme="clay"] {
    --ink: #2a211c;
    --muted: #746359;
    --paper: #fbf5ef;
    --surface: #ffffff;
    --surface-soft: #fdf8f3;
    --surface-muted: #efe2d5;
    --line: #dbc7b6;
    --line-strong: #bf9e83;
    --green: #a65d3c;
    --green-dark: #663923;
    --blue: #4f7758;
    --coral: #bd6d4f;
    --amber: #aa7f22;
    --shadow: 0 18px 42px rgba(82, 50, 31, 0.13);
    --shadow-soft: 0 10px 28px rgba(82, 50, 31, 0.08);
    --page-gradient: linear-gradient(135deg, #fbf5ef 0%, #ffffff 52%, #f0f8f2 100%);
    --header-bg: rgba(251, 245, 239, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f8eee5 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #eadacb;
    --hover-bg: #f6eadf;
    --active-bg: #ead5c4;
    --active-bg-soft: #f6eadf;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #c8aa92;
    --progress-track: #e2d0c0;
}

[data-theme="plasma"] {
    --ink: #fff2fb;
    --muted: #c6a7bd;
    --paper: #140f1a;
    --surface: #1d1626;
    --surface-soft: #261c31;
    --surface-muted: #34233f;
    --line: #4b3556;
    --line-strong: #765184;
    --green: #df3d8f;
    --green-dark: #ff9ccf;
    --blue: #3dd6c6;
    --coral: #ff7b81;
    --amber: #ffd166;
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.44);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.30);
    --page-gradient: linear-gradient(135deg, #120d18 0%, #1a1424 50%, #102622 100%);
    --header-bg: rgba(20, 15, 26, 0.94);
    --sidebar-bg: linear-gradient(180deg, #1d1626 0%, #140f1a 100%);
    --task-rail-bg: rgba(29, 22, 38, 0.78);
    --brand-bg: #3b1d36;
    --hover-bg: #34223f;
    --active-bg: #48234a;
    --active-bg-soft: #392540;
    --quote-bg: rgba(29, 22, 38, 0.86);
    --field-border: #765184;
    --progress-track: #3b2a45;
    --button-contrast: #130914;
}

[data-theme="midnight"] {
    --ink: #eef6ff;
    --muted: #a8b5c5;
    --paper: #0c1324;
    --surface: #131c30;
    --surface-soft: #1a263c;
    --surface-muted: #22344c;
    --line: #31435d;
    --line-strong: #4d6888;
    --green: #67d5ff;
    --green-dark: #b9efff;
    --blue: #7ca5ff;
    --coral: #ff8874;
    --amber: #f4b860;
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.30);
    --page-gradient: linear-gradient(135deg, #091020 0%, #0e172b 52%, #121f2e 100%);
    --header-bg: rgba(12, 19, 36, 0.94);
    --sidebar-bg: linear-gradient(180deg, #131c30 0%, #0c1324 100%);
    --task-rail-bg: rgba(19, 28, 48, 0.78);
    --brand-bg: #163449;
    --hover-bg: #1d3147;
    --active-bg: #1b4260;
    --active-bg-soft: #1c354d;
    --quote-bg: rgba(19, 28, 48, 0.86);
    --field-border: #4d6888;
    --progress-track: #2a3a50;
    --button-contrast: #091020;
}

[data-theme="paper"] {
    --ink: #22231f;
    --muted: #6c6b61;
    --paper: #fffdf8;
    --surface: #ffffff;
    --surface-soft: #fffefa;
    --surface-muted: #f1ede2;
    --line: #ddd6c7;
    --line-strong: #c1b59c;
    --green: #2e675f;
    --green-dark: #1a413b;
    --blue: #4e7294;
    --coral: #b96755;
    --amber: #c4822b;
    --shadow: 0 18px 42px rgba(44, 42, 34, 0.11);
    --shadow-soft: 0 10px 28px rgba(44, 42, 34, 0.07);
    --page-gradient: linear-gradient(135deg, #fffdf8 0%, #ffffff 50%, #f5faf8 100%);
    --header-bg: rgba(255, 253, 248, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #faf6ea 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #e8f0eb;
    --hover-bg: #f3f1e8;
    --active-bg: #e7efe9;
    --active-bg-soft: #f3f1e8;
    --quote-bg: rgba(255, 255, 255, 0.88);
    --field-border: #c8bdac;
    --progress-track: #e7e0d2;
}

[data-theme="lagoon"] {
    --ink: #172624;
    --muted: #5f7773;
    --paper: #f1fbfa;
    --surface: #ffffff;
    --surface-soft: #f6fcfb;
    --surface-muted: #e2f4f2;
    --line: #c9e0dd;
    --line-strong: #9ec8c2;
    --green: #10847f;
    --green-dark: #085551;
    --blue: #356db2;
    --coral: #c66a62;
    --amber: #b88922;
    --shadow: 0 18px 42px rgba(21, 72, 68, 0.13);
    --shadow-soft: 0 10px 28px rgba(21, 72, 68, 0.08);
    --page-gradient: linear-gradient(135deg, #f1fbfa 0%, #ffffff 50%, #f0f6ff 100%);
    --header-bg: rgba(241, 251, 250, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #eaf8f6 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #d9f0ed;
    --hover-bg: #e7f6f4;
    --active-bg: #d4efeb;
    --active-bg-soft: #e7f6f4;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #b5d1cd;
    --progress-track: #d8e9e7;
}

[data-theme="ruby"] {
    --ink: #2b1d25;
    --muted: #765f68;
    --paper: #fff7fa;
    --surface: #ffffff;
    --surface-soft: #fffbfc;
    --surface-muted: #f6e4ec;
    --line: #e4c8d4;
    --line-strong: #ce9eb2;
    --green: #bf2452;
    --green-dark: #781633;
    --blue: #276f68;
    --coral: #d95875;
    --amber: #b88d24;
    --shadow: 0 18px 42px rgba(95, 25, 52, 0.13);
    --shadow-soft: 0 10px 28px rgba(95, 25, 52, 0.08);
    --page-gradient: linear-gradient(135deg, #fff7fa 0%, #ffffff 52%, #f1fbf8 100%);
    --header-bg: rgba(255, 247, 250, 0.94);
    --sidebar-bg: linear-gradient(180deg, #ffffff 0%, #fff0f6 100%);
    --task-rail-bg: rgba(255, 255, 255, 0.74);
    --brand-bg: #f3dce7;
    --hover-bg: #fff0f6;
    --active-bg: #efd5df;
    --active-bg-soft: #fff0f6;
    --quote-bg: rgba(255, 255, 255, 0.86);
    --field-border: #d1acbb;
    --progress-track: #ead4df;
}

[data-theme="legend"] {
    --ink: #f7f4e7;
    --muted: #c2bda5;
    --paper: #111613;
    --surface: #191f1b;
    --surface-soft: #222920;
    --surface-muted: #2c3529;
    --line: #3d4a3a;
    --line-strong: #6a704e;
    --green: #d5a642;
    --green-dark: #ffe39b;
    --blue: #69d7c0;
    --coral: #ff8b68;
    --amber: #f5c755;
    --shadow: 0 18px 42px rgba(0, 0, 0, 0.46);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.32);
    --page-gradient: linear-gradient(135deg, #0d120f 0%, #151b16 50%, #1d1a10 100%);
    --header-bg: rgba(17, 22, 19, 0.94);
    --sidebar-bg: linear-gradient(180deg, #191f1b 0%, #111613 100%);
    --task-rail-bg: rgba(25, 31, 27, 0.78);
    --brand-bg: #3a3119;
    --hover-bg: #2d3428;
    --active-bg: #3b351e;
    --active-bg-soft: #302f20;
    --quote-bg: rgba(25, 31, 27, 0.86);
    --field-border: #6a704e;
    --progress-track: #353a2e;
    --button-contrast: #111613;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--page-gradient);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.5;
}

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

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

.site-header {
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(12px);
}

.app-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 168px;
    min-height: 100vh;
}

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    background: var(--sidebar-bg);
    box-shadow: 10px 0 30px rgba(32, 35, 31, 0.05);
    padding: 18px 14px;
}

.sidebar-brand {
    margin-bottom: 14px;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-mark {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(20, 120, 106, 0.22);
    border-radius: 8px;
    background: var(--brand-bg);
    color: var(--green-dark);
    font-size: 1rem;
    font-weight: 950;
}

.brand-subtitle {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 760;
    margin-top: 1px;
}

.sidebar-nav {
    display: grid;
    gap: 12px;
    overflow-y: auto;
    padding-right: 4px;
}

.sidebar-section {
    display: grid;
    gap: 3px;
}

.sidebar-label {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 0 10px 3px;
    text-transform: uppercase;
}

.sidebar-link,
.sidebar-utility {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-weight: 840;
    padding: 6px 10px;
    text-align: left;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
    width: 100%;
}

.sidebar-link:hover,
.sidebar-utility:hover {
    background: var(--hover-bg);
    color: var(--green-dark);
    transform: translateX(2px);
}

.sidebar-link.is-active,
.sidebar-utility.is-active {
    background: var(--active-bg);
    color: var(--green-dark);
    box-shadow: inset 3px 0 0 var(--green);
}

.nav-code {
    display: inline-grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 950;
}

.sidebar-link.is-active .nav-code,
.sidebar-link:hover .nav-code {
    border-color: rgba(20, 120, 106, 0.28);
    background: var(--surface);
    color: var(--green-dark);
}

.sidebar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    border-top: 1px solid var(--line);
    margin-top: auto;
    padding-top: 12px;
}

.sidebar-actions .button {
    grid-column: 1 / -1;
    min-height: 38px;
    width: 100%;
}

.sidebar-user {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 2px 8px 6px;
}

.sidebar-user span {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.sidebar-user strong {
    overflow: hidden;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-actions .sidebar-utility {
    min-height: 32px;
    justify-content: center;
    padding: 6px 8px;
    white-space: nowrap;
}

.sidebar-actions .inline-form {
    display: block;
    min-width: 0;
}

.sidebar-legal {
    display: flex;
    justify-content: center;
    padding-top: 4px;
}

.sidebar-legal a {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.sidebar-legal a:hover,
.sidebar-legal a.is-active {
    color: var(--green-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.app-main {
    min-width: 0;
    background: var(--app-main-bg);
}

.task-rail {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--line);
    background: var(--sidebar-bg);
    box-shadow: -10px 0 30px rgba(32, 35, 31, 0.05);
    overflow-y: auto;
    padding: 18px 14px;
    backdrop-filter: blur(12px);
}

.task-rail-label {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 0 10px 3px;
    text-transform: uppercase;
}

.task-rail-nav {
    display: grid;
    gap: 3px;
}

.task-rail-link {
    display: flex;
    min-height: 32px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    overflow: hidden;
    padding: 6px 10px;
    font-size: 0.9rem;
    font-weight: 840;
    text-align: left;
    transition: background 150ms ease, color 150ms ease, transform 150ms ease;
}

.task-rail-link:hover {
    background: var(--hover-bg);
    color: var(--green-dark);
    transform: translateX(-2px);
}

.task-rail-link.is-active {
    background: var(--active-bg);
    color: var(--green-dark);
    box-shadow: inset -3px 0 0 var(--green);
}

.task-rail-link .nav-code {
    width: 22px;
    height: 22px;
}

.task-rail-link span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-rail-link.is-active .nav-code,
.task-rail-link:hover .nav-code {
    border-color: rgba(20, 120, 106, 0.28);
    background: var(--surface);
    color: var(--green-dark);
}

.task-rail-extra {
    display: grid;
    gap: 3px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.task-rail-link-compact {
    min-height: 32px;
    font-size: inherit;
}

.task-rail-link-compact .nav-code {
    width: 22px;
    height: 22px;
}

.mobile-topbar,
.mobile-actions,
.mobile-app-menu,
.mobile-task-menu {
    display: none;
}

.nav,
.tab-nav,
.page-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
}

.nav {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: block;
    font-size: 1.25rem;
    font-weight: 920;
    letter-spacing: 0;
    line-height: 1.08;
}

.nav-actions,
.hero-actions,
.form-actions,
.detail-actions,
.card-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.nav-link,
.nav-button,
.text-button {
    border: 0;
    background: transparent;
    color: var(--green-dark);
    cursor: pointer;
    font-weight: 700;
    padding: 8px 2px;
}

.inline-form {
    margin: 0;
}

.tab-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 12px;
}

.tab-link {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 850;
    padding: 8px 12px;
}

.tab-link.is-active {
    border-color: var(--green);
    background: var(--active-bg-soft);
    color: var(--green-dark);
}

.button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--green);
    border-radius: 8px;
    background: var(--green);
    color: var(--button-contrast);
    cursor: pointer;
    font-weight: 860;
    padding: 10px 18px;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
    background: var(--green-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(15, 84, 74, 0.18);
}

.button-small {
    min-height: 38px;
    padding: 8px 13px;
}

.button-secondary {
    background: var(--surface);
    color: var(--green-dark);
}

.button-secondary:hover {
    background: var(--hover-bg);
}

.button-danger {
    border-color: var(--danger);
    background: var(--danger);
}

.button-danger:hover {
    background: #7f2724;
}

.page-shell {
    padding: 32px 0 60px;
}

.app-main .page-shell {
    width: min(1080px, calc(100% - 56px));
}

.messages {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.message {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 14px;
    box-shadow: 0 8px 20px rgba(32, 35, 31, 0.08);
}

.hero {
    min-height: 360px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(20, 28, 24, 0.84), rgba(20, 28, 24, 0.40) 60%, rgba(20, 28, 24, 0.08)),
        url("images/dashboard-banner.490abb623600.png") center / cover;
    box-shadow: var(--shadow);
    overflow: hidden;
    padding: 36px;
    color: #ffffff;
}

.dashboard-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
    align-items: stretch;
    gap: 24px;
    padding: 6px 0 0;
}

.dashboard-header h1 {
    max-width: 760px;
    font-size: 2.45rem;
    line-height: 1.08;
    margin: 0;
}

.dashboard-quote {
    display: grid;
    align-content: center;
    border: 1px solid var(--line);
    border-left: 4px solid var(--amber);
    border-radius: 8px;
    background: var(--quote-bg);
    box-shadow: var(--shadow-soft);
    margin: 0;
    padding: 16px 18px;
}

.dashboard-quote p {
    color: var(--ink);
    font-size: 0.98rem;
    margin: 0 0 6px;
}

.dashboard-quote cite {
    color: var(--muted);
    font-size: 0.9rem;
}

.quote-label {
    color: var(--amber);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 7px;
    text-transform: uppercase;
}

.inspiration-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.35fr);
    gap: 26px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, var(--surface) 0%, var(--surface-soft) 52%, var(--active-bg-soft) 100%);
    box-shadow: var(--shadow-soft);
    padding: 34px;
}

.inspiration-stage::before {
    position: absolute;
    top: 22px;
    right: 28px;
    color: color-mix(in srgb, var(--amber) 20%, transparent);
    content: "\"";
    font-size: 7rem;
    font-weight: 950;
    line-height: 1;
    pointer-events: none;
}

.inspiration-stage-copy {
    position: relative;
    z-index: 1;
    align-self: center;
    max-width: 430px;
}

.inspiration-stage-copy h1 {
    font-size: 2.65rem;
    line-height: 1.02;
    margin: 0 0 14px;
}

.inspiration-stage-copy p {
    color: var(--muted);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.55;
    margin: 0;
}

.inspiration-quote-card {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    gap: 14px;
    min-height: 270px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--amber);
    border-radius: 8px;
    background: var(--quote-bg);
    box-shadow: var(--shadow);
    margin: 0;
    padding: 30px;
}

.inspiration-quote-card blockquote {
    margin: 0;
}

.inspiration-quote-card p {
    color: var(--ink);
    font-size: clamp(1.35rem, 2.3vw, 2.05rem);
    font-weight: 950;
    line-height: 1.2;
    margin: 0;
}

.inspiration-quote-card figcaption {
    color: var(--muted);
    font-size: 1rem;
    font-weight: 900;
}

.inspiration-date-card {
    position: absolute;
    right: 34px;
    bottom: 30px;
    display: grid;
    gap: 2px;
    justify-items: end;
    color: var(--muted);
    font-weight: 850;
}

.inspiration-date-card strong {
    color: var(--green-dark);
    font-size: 1.35rem;
}

.inspiration-date-card small {
    color: var(--muted);
    font-weight: 800;
}

.inspiration-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.hero-copy {
    max-width: 660px;
}

.hero-lede {
    max-width: 590px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.08rem;
    font-weight: 680;
    line-height: 1.45;
    margin: -4px 0 18px;
}

.landing-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.landing-hero-tags span {
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.84rem;
    font-weight: 850;
    padding: 7px 11px;
    backdrop-filter: blur(12px);
}

.eyebrow {
    display: inline-block;
    color: var(--amber);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.hero h1,
.form-intro h1,
.auth-copy h1,
.detail-header h1,
.confirm-box h1 {
    font-size: 2.35rem;
    line-height: 1.08;
    margin: 0 0 16px;
}

blockquote {
    margin: 0 0 22px;
}

blockquote p {
    font-size: 1.12rem;
    margin: 0 0 8px;
}

cite {
    color: rgba(255, 255, 255, 0.82);
    font-style: normal;
    font-weight: 700;
}

.hero-stats {
    width: 270px;
    display: grid;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    padding: 16px;
    backdrop-filter: blur(14px);
}

.hero-stats div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.hero-stats strong {
    font-size: 1.55rem;
}

.hero-stats span {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}

.landing-intro {
    display: grid;
    grid-template-columns: minmax(240px, 0.44fr) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-gradient);
    box-shadow: var(--shadow-soft);
    margin-top: 18px;
    padding: 28px;
}

.landing-intro h2 {
    max-width: 420px;
    font-size: 1.58rem;
    line-height: 1.16;
    margin: 0;
}

.landing-intro p {
    color: var(--muted);
    font-weight: 650;
    line-height: 1.55;
    margin: 0;
}

.landing-intro p {
    font-size: 1.02rem;
    line-height: 1.65;
}

.landing-preview,
.landing-trackables,
.landing-close {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    margin-top: 14px;
    padding: 28px;
}

.landing-preview {
    display: grid;
    grid-template-columns: minmax(240px, 0.38fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    background: linear-gradient(135deg, var(--surface), var(--surface-soft));
}

.landing-preview-copy h2,
.landing-section-heading h2,
.landing-close-copy h2 {
    margin: 0;
    font-size: 1.58rem;
    line-height: 1.16;
}

.landing-preview-copy p,
.landing-section-heading p,
.trackable-grid p,
.landing-close-copy p,
.landing-close-action p {
    color: var(--muted);
    font-weight: 650;
    line-height: 1.55;
    margin: 12px 0 0;
}

.mock-dashboard {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(32, 35, 31, 0.12);
    overflow: hidden;
}

.mock-topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 900;
    padding: 12px 14px;
    text-transform: uppercase;
}

.mock-topbar span:first-child {
    color: var(--green-dark);
}

.mock-layout {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 58px;
    min-height: 310px;
}

.mock-sidebar,
.mock-task-rail {
    display: grid;
    align-content: start;
    gap: 8px;
    border-right: 1px solid var(--line);
    background: var(--surface-soft);
    padding: 14px 10px;
}

.mock-task-rail {
    border-right: 0;
    border-left: 1px solid var(--line);
}

.mock-sidebar span,
.mock-task-rail span {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    font-weight: 900;
}

.mock-sidebar span.is-active,
.mock-task-rail span:first-child {
    border-color: rgba(20, 120, 106, 0.32);
    background: var(--active-bg-soft);
    color: var(--green-dark);
}

.mock-main {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.mock-level {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 15px;
}

.mock-level span,
.mock-score-row span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.mock-level strong {
    color: var(--green-dark);
    font-size: 1.18rem;
}

.mock-score-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mock-score-row div {
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 13px;
}

.mock-score-row strong {
    color: var(--ink);
    font-size: 1.12rem;
}

.mock-progress-lines {
    display: grid;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 15px;
}

.mock-progress-lines span {
    height: 10px;
    width: var(--mock-width);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--green), var(--blue));
}

.mock-calendar {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 14px;
}

.mock-calendar span {
    aspect-ratio: 1;
    border: 1px solid color-mix(in srgb, var(--green) 28%, var(--line));
    border-radius: 6px;
    background: var(--surface-muted);
}

.mock-calendar span:nth-child(3n),
.mock-calendar span:nth-child(7n) {
    background: color-mix(in srgb, var(--green) 48%, var(--surface-muted));
}

.mock-calendar span:nth-child(11n) {
    background: color-mix(in srgb, var(--amber) 56%, var(--surface-muted));
}

.landing-section-heading {
    max-width: 720px;
    margin-bottom: 18px;
}

.trackable-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.trackable-grid article {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 18px;
}

.trackable-grid span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--green-dark);
    font-weight: 900;
}

.trackable-grid h3 {
    margin: 14px 0 0;
    font-size: 1.05rem;
}

.landing-close {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
    gap: 28px;
    align-items: center;
    background: var(--panel-gradient);
}

.landing-close-copy h2 {
    max-width: 620px;
}

.landing-close-copy p {
    max-width: 760px;
}

.landing-close-action {
    display: grid;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(32, 35, 31, 0.08);
    padding: 22px;
}

.landing-close-action > span {
    color: var(--amber);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.landing-close-action strong {
    color: var(--ink);
    font-size: 1.35rem;
    line-height: 1.12;
}

.landing-final-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.section-heading,
.detail-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin: 34px 0 18px;
}

.dashboard-section-heading {
    margin-top: 30px;
}

.heading-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.section-heading h2,
.panel h2,
.empty-state h2 {
    margin: 0;
    font-size: 1.4rem;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.result-card {
    min-height: 118px;
    display: grid;
    align-content: space-between;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(32, 35, 31, 0.08);
    padding: 18px;
}

.result-card span {
    color: var(--muted);
    font-weight: 800;
}

.result-card strong {
    font-size: 2rem;
    line-height: 1;
}

.result-card small {
    color: var(--muted);
    font-weight: 800;
}

.dashboard-widgets {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.dashboard-widget {
    min-width: 0;
    position: relative;
    transition: opacity 150ms ease, transform 150ms ease;
}

.dashboard-widget.is-dragging {
    opacity: 0.48;
    pointer-events: none;
    transform: scale(0.995);
}

.dashboard-widget-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.dashboard-drag-handle {
    width: 34px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--muted);
    cursor: grab;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1;
    opacity: 0.68;
    touch-action: none;
    transition: border-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 150ms ease;
}

.dashboard-drag-handle:hover,
.dashboard-drag-handle:focus-visible {
    border-color: var(--green);
    color: var(--green-dark);
    opacity: 1;
    outline: 0;
}

.dashboard-drag-handle:active {
    cursor: grabbing;
    transform: translateY(1px);
}

.dashboard-widgets.is-saving .dashboard-drag-handle {
    color: var(--green-dark);
}

.dashboard-widgets.has-save-error .dashboard-drag-handle {
    border-color: var(--danger);
    color: var(--danger);
}

.dashboard-header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.dashboard-settings-link {
    display: inline-flex;
}

.dashboard-widget .dashboard-board,
.dashboard-widget.level-card,
.focus-progress-widget .dashboard-section-heading,
.dashboard-widget.area-chart-card,
.dashboard-widget.timeline-card,
.dashboard-widget.heatmap-card,
.deadline-widget .deadline-card {
    margin-top: 0;
}

.level-card-inner {
    display: grid;
    grid-template-columns: minmax(220px, 0.48fr) minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--surface), var(--surface-soft));
    box-shadow: var(--shadow-soft);
    padding: 22px;
}

.level-main h2 {
    color: var(--green-dark);
    font-size: 2.6rem;
    line-height: 1;
    margin: 4px 0 8px;
}

.level-main p {
    color: var(--muted);
    font-size: 1.08rem;
    font-weight: 850;
    margin: 0;
}

.level-progress {
    display: grid;
    gap: 10px;
}

.level-progress-header,
.level-progress-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.level-progress-header strong {
    color: var(--green-dark);
    font-size: 1.3rem;
}

.level-progress-header span,
.level-progress-footer span {
    color: var(--muted);
    font-weight: 800;
}

.dashboard-board {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
    align-items: start;
    gap: 16px;
    margin-top: 22px;
}

.score-panel,
.streak-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.score-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
}

.score-item {
    display: grid;
    gap: 8px;
    min-height: 150px;
    align-content: space-between;
    padding: 22px 20px;
    background: var(--score-item-bg);
}

.score-item + .score-item {
    border-left: 1px solid var(--line);
}

.score-item span {
    color: var(--muted);
    font-weight: 850;
}

.score-item strong {
    color: var(--ink);
    font-size: 2.55rem;
    line-height: 1;
}

.score-item small {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 820;
}

.streak-panel {
    display: grid;
    gap: 0;
    padding: 20px;
}

.streak-panel header {
    margin-bottom: 8px;
}

.streak-panel h2 {
    font-size: 1.35rem;
    margin: 0;
}

.streak-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--line);
    padding: 13px 0;
}

.streak-row span {
    color: var(--muted);
    font-weight: 850;
}

.streak-row strong {
    color: var(--green-dark);
    font-size: 1.08rem;
}

.deadline-card {
    display: grid;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    padding: 20px;
}

.deadline-card > header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.deadline-card h3 {
    font-size: 1.35rem;
    margin: 0;
}

.deadline-card p {
    color: var(--muted);
    font-weight: 800;
    margin: 6px 0 0;
}

.deadline-list {
    display: grid;
    gap: 10px;
}

.deadline-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(112px, 0.2fr) auto;
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: inherit;
    padding: 12px;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.deadline-row:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.deadline-date {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--green-dark);
    font-size: 0.86rem;
    font-weight: 950;
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
}

.deadline-state-overdue .deadline-date {
    border-color: color-mix(in srgb, var(--danger) 48%, var(--line));
    color: var(--danger);
}

.deadline-state-today .deadline-date,
.deadline-state-soon .deadline-date {
    border-color: color-mix(in srgb, var(--amber) 55%, var(--line));
    color: var(--green-dark);
}

.deadline-state-planned .deadline-date,
.deadline-state-none .deadline-date {
    color: var(--muted);
}

.deadline-main {
    display: grid;
    gap: 4px;
    color: inherit;
    min-width: 0;
    text-decoration: none;
}

.deadline-main strong {
    overflow-wrap: anywhere;
    font-size: 1rem;
    line-height: 1.25;
}

.deadline-main span,
.deadline-progress > span:first-child,
.deadline-empty span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 820;
}

.deadline-progress {
    display: grid;
    gap: 7px;
    justify-items: stretch;
}

.deadline-done-form,
.deadline-status {
    justify-self: end;
}

.deadline-done-form .button {
    white-space: nowrap;
}

.deadline-empty {
    display: grid;
    gap: 4px;
    border: 1px dashed var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 18px;
}

.deadline-empty strong {
    color: var(--green-dark);
}

.today-summary {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    margin-bottom: 18px;
    padding: 18px 20px;
}

.today-summary h3 {
    font-size: 1.28rem;
    margin: 0 0 6px;
}

.today-summary p {
    color: var(--muted);
    margin: 0;
}

.settings-card {
    display: grid;
    gap: 24px;
}

.settings-group h2 {
    font-size: 1.15rem;
    margin: 0 0 12px;
}

.widget-setting-list {
    display: grid;
    gap: 10px;
}

.widget-setting {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    cursor: pointer;
    padding: 14px;
}

.widget-setting input {
    width: 18px;
    height: 18px;
    accent-color: var(--green);
    margin-top: 3px;
}

.widget-setting span {
    display: grid;
    gap: 2px;
}

.widget-setting strong {
    line-height: 1.2;
}

.widget-setting small {
    color: var(--muted);
    font-weight: 750;
}

.leaderboard-join {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.leaderboard-list {
    display: grid;
    gap: 12px;
}

.leaderboard-section + .leaderboard-section {
    margin-top: 28px;
}

.leaderboard-heading {
    margin-top: 22px;
}

.leaderboard-row {
    display: grid;
    grid-template-columns: auto minmax(160px, 0.6fr) minmax(0, 1.5fr);
    align-items: center;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    padding: 16px;
}

.leaderboard-row.is-current-user {
    border-color: rgba(20, 120, 106, 0.42);
    background: var(--active-bg-soft);
}

.leaderboard-rank {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--green-dark);
    font-weight: 950;
}

.leaderboard-person {
    display: grid;
    gap: 2px;
}

.leaderboard-person strong {
    font-size: 1.08rem;
}

.leaderboard-person span,
.leaderboard-metrics span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 780;
}

.leaderboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.leaderboard-metrics div {
    display: grid;
    gap: 2px;
    border-left: 1px solid var(--line);
    padding-left: 12px;
}

.leaderboard-metrics strong {
    color: var(--green-dark);
    font-size: 1.15rem;
}

.shop-level-card {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(280px, 1fr);
    align-items: center;
    gap: 22px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-gradient);
    box-shadow: var(--shadow-soft);
    margin-bottom: 24px;
    padding: 22px;
}

.shop-level-card h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.05;
    margin: 4px 0 6px;
}

.shop-level-card p {
    color: var(--muted);
    font-weight: 780;
    margin: 0;
}

.shop-level-progress {
    min-width: 0;
}

.shop-level-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.shop-points-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.shop-points-grid div {
    display: grid;
    gap: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px;
}

.shop-points-grid span,
.shop-points-grid small {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
}

.shop-points-grid strong {
    color: var(--green-dark);
    font-size: 1.15rem;
    line-height: 1;
}

.theme-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.theme-card {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.theme-card.is-active {
    border-color: rgba(20, 120, 106, 0.45);
    box-shadow: 0 0 0 3px var(--active-bg-soft), var(--shadow-soft);
}

.theme-card.is-locked {
    opacity: 0.72;
}

.theme-preview {
    display: grid;
    grid-template-columns: 52px 1fr;
    min-height: 138px;
    border-bottom: 1px solid var(--line);
    background: var(--page-gradient);
}

.theme-preview-sidebar {
    border-right: 1px solid var(--line);
    background: var(--sidebar-bg);
}

.theme-preview-content {
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 20px;
}

.theme-preview-content span,
.theme-preview-content strong,
.theme-preview-content small {
    display: block;
    border-radius: 999px;
}

.theme-preview-content span {
    width: 44px;
    height: 10px;
    background: var(--green);
}

.theme-preview-content strong {
    width: 72%;
    height: 18px;
    background: var(--ink);
}

.theme-preview-content small {
    width: 56%;
    height: 12px;
    background: var(--line-strong);
}

.theme-card-body {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.theme-card-heading {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 14px;
}

.theme-card-heading h2 {
    font-size: 1.2rem;
    line-height: 1.12;
    margin: 4px 0 0;
}

.theme-card-body p {
    color: var(--muted);
    font-weight: 760;
    margin: 0;
}

.theme-cost-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 850;
    padding: 9px 10px;
}

.theme-cost-row strong {
    color: var(--green-dark);
}

.theme-swatches {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
}

.theme-swatches span {
    width: 18px;
    height: 18px;
    border: 1px solid var(--line);
    border-radius: 50%;
}

.theme-card-actions {
    min-height: 38px;
}

.theme-status {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--green-dark);
    font-size: 0.88rem;
    font-weight: 900;
    padding: 6px 10px;
}

.theme-status-locked {
    color: var(--muted);
}

.boss-raid-header p {
    max-width: 620px;
}

.boss-hub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    margin: 0 0 22px;
    padding: 6px;
}

.boss-hub-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 7px;
    color: var(--muted);
    font-weight: 900;
    padding: 0 14px;
    text-decoration: none;
}

.boss-hub-tabs a.is-active {
    background: var(--active-bg);
    color: var(--green-dark);
}

.boss-card {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: stretch;
    gap: 22px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-gradient);
    box-shadow: var(--shadow);
    margin-bottom: 28px;
    padding: 22px;
}

.boss-card.is-defeated {
    border-color: rgba(20, 120, 106, 0.45);
    background: linear-gradient(135deg, var(--active-bg-soft), var(--surface));
}

.boss-portrait {
    position: relative;
    display: grid;
    min-height: 210px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        radial-gradient(circle at 32% 30%, var(--coral) 0 9px, transparent 10px),
        radial-gradient(circle at 68% 30%, var(--coral) 0 9px, transparent 10px),
        linear-gradient(145deg, var(--green-dark), var(--green));
    box-shadow: inset 0 -24px 52px rgba(0, 0, 0, 0.16);
}

.boss-portrait::before,
.boss-portrait::after {
    position: absolute;
    content: "";
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

.boss-portrait::before {
    width: 72%;
    height: 58%;
    bottom: 22px;
}

.boss-portrait::after {
    width: 42%;
    height: 20%;
    top: 22px;
    border: 1px solid rgba(255, 255, 255, 0.32);
}

.boss-eye {
    position: absolute;
    z-index: 1;
    top: 72px;
    width: 22px;
    height: 22px;
    border: 3px solid rgba(255, 255, 255, 0.86);
    border-radius: 50%;
    background: var(--danger);
}

.boss-eye:first-child {
    left: 56px;
}

.boss-eye:nth-child(2) {
    right: 56px;
}

.boss-mouth {
    position: absolute;
    z-index: 1;
    bottom: 62px;
    width: 64px;
    height: 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.38);
}

.boss-main {
    display: grid;
    align-content: space-between;
    gap: 22px;
    min-width: 0;
}

.boss-title-row,
.boss-hp-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.boss-title-row h2 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 0.95;
    margin: 4px 0 0;
}

.boss-hp-row strong {
    display: block;
    color: var(--green-dark);
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1;
}

.boss-hp-row span {
    color: var(--muted);
    font-weight: 850;
}

.boss-hp-track {
    overflow: hidden;
    height: 22px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--progress-track);
}

.boss-hp-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--coral), var(--amber), var(--green));
    transition: width 220ms ease;
}

.boss-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.boss-stats div {
    display: grid;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px;
}

.boss-stats span,
.boss-stats small {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.boss-stats strong {
    color: var(--green-dark);
    font-size: 1.25rem;
    line-height: 1;
}

.boss-reward-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 14px;
}

.boss-reward-panel + .boss-reward-panel {
    margin-top: 10px;
}

.boss-reward-panel-secondary {
    background: var(--surface-soft);
}

.boss-reward-panel strong,
.boss-reward-panel small {
    display: block;
}

.boss-reward-panel strong {
    color: var(--green-dark);
    font-size: 1.1rem;
    line-height: 1.1;
    margin-top: 4px;
}

.boss-reward-panel small {
    color: var(--muted);
    font-weight: 800;
    margin-top: 5px;
}

.daily-boss-portrait {
    background:
        radial-gradient(circle at 32% 30%, var(--amber) 0 9px, transparent 10px),
        radial-gradient(circle at 68% 30%, var(--amber) 0 9px, transparent 10px),
        linear-gradient(145deg, var(--green-dark), var(--coral));
}

.boss-equipment-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.boss-equipment-summary span {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--green-dark);
    font-size: 0.86rem;
    font-weight: 900;
    padding: 7px 10px;
}

.arena-shell {
    display: grid;
    gap: 18px;
    margin-bottom: 28px;
}

.arena-copy {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    padding: 18px 20px;
}

.arena-copy h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 0.98;
    margin: 4px 0 8px;
}

.arena-copy p {
    color: var(--muted);
    font-weight: 760;
    max-width: 760px;
    margin: 0;
}

.arena-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

.arena-stage,
.arena-loadout {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.arena-stage {
    position: relative;
    overflow: hidden;
}

.arena-hud {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.arena-hud div {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
}

.arena-hud div {
    border-left: 1px solid var(--line);
}

.arena-hud div:first-child {
    border-left: 0;
}

.arena-hud span {
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.arena-hud strong {
    color: var(--green-dark);
    font-size: 1.35rem;
    line-height: 1;
}

.arena-canvas {
    display: block;
    width: 100%;
    aspect-ratio: 5 / 3;
    min-height: 520px;
    background:
        linear-gradient(rgba(20, 120, 106, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 120, 106, 0.08) 1px, transparent 1px),
        radial-gradient(circle at 50% 45%, var(--active-bg-soft), var(--surface));
    background-size: 34px 34px, 34px 34px, auto;
    touch-action: none;
}

.arena-canvas-wrap {
    position: relative;
    overflow: hidden;
}

.arena-bottom-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: stretch;
    border-top: 1px solid var(--line);
}

.arena-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    border-left: 1px solid var(--line);
    padding: 12px 14px;
}

.arena-loadout {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
    padding: 18px;
}

.arena-loadout h3 {
    font-size: 1.3rem;
    line-height: 1.1;
    margin: 4px 0 0;
}

.arena-loadout p {
    color: var(--muted);
    font-weight: 760;
    margin: 0;
}

.arena-stat-list,
.arena-gear-list {
    display: grid;
    align-content: start;
    gap: 8px;
}

.arena-stat-list span,
.arena-gear-list span {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--muted);
    font-weight: 850;
    padding: 9px 10px;
}

.arena-stat-list span {
    color: var(--green-dark);
}

.arena-upgrade-panel {
    position: absolute;
    inset: 50% auto auto 50%;
    z-index: 2;
    width: min(620px, calc(100% - 32px));
    transform: translate(-50%, -50%);
    border: 1px solid rgba(20, 120, 106, 0.28);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    box-shadow: var(--shadow);
    padding: 18px;
}

.arena-upgrade-panel h3 {
    font-size: 1.55rem;
    line-height: 1.1;
    margin: 4px 0 14px;
}

.arena-upgrade-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.arena-reroll-button {
    margin-top: 12px;
}

.arena-upgrade-option {
    display: grid;
    gap: 8px;
    min-height: 118px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    padding: 12px;
    text-align: left;
}

.arena-upgrade-option:hover {
    border-color: rgba(20, 120, 106, 0.34);
    background: var(--active-bg-soft);
}

.arena-upgrade-option strong {
    color: var(--green-dark);
    font-size: 1rem;
    line-height: 1.1;
}

.arena-upgrade-option span {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 760;
}

.arena-info-grid,
.arena-skill-grid {
    display: grid;
    gap: 14px;
}

.arena-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.arena-skill-section {
    display: grid;
    gap: 14px;
}

.arena-skill-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.arena-info-card,
.arena-skill-card {
    display: grid;
    align-content: space-between;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    min-width: 0;
    padding: 18px;
}

.arena-info-card h3,
.arena-skill-card h3 {
    font-size: 1.16rem;
    line-height: 1.12;
    margin: 4px 0 8px;
}

.arena-info-card p,
.arena-skill-card p,
.arena-skill-card small {
    color: var(--muted);
    font-weight: 760;
    margin: 0;
}

.arena-skill-card small {
    display: block;
    font-size: 0.82rem;
    margin-top: 8px;
}

.arena-skill-card.is-maxed {
    border-color: rgba(20, 120, 106, 0.45);
    background: var(--active-bg-soft);
}

.arena-mini-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.arena-mini-stats span {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--green-dark);
    font-size: 0.82rem;
    font-weight: 900;
    padding: 7px 10px;
}

.equipment-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.raid-shop-section {
    margin-bottom: 28px;
}

.raid-shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.raid-item-card {
    display: grid;
    align-content: space-between;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    padding: 18px;
}

.raid-item-card.is-active {
    border-color: rgba(20, 120, 106, 0.45);
    background: var(--active-bg-soft);
}

.loot-card {
    position: relative;
    overflow: hidden;
}

.loot-card::after {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    content: "";
    background: var(--green);
    box-shadow: 0 0 0 5px var(--active-bg-soft);
}

.loot-rarity-rare::after {
    background: var(--blue, #2f80ed);
}

.loot-rarity-epic::after {
    background: var(--purple, #8f5cff);
}

.loot-rarity-legendary::after {
    background: var(--amber);
}

.raid-item-card h3 {
    font-size: 1.25rem;
    line-height: 1.1;
    margin: 4px 0 8px;
}

.raid-item-card p {
    color: var(--muted);
    font-weight: 760;
    margin: 0;
}

.raid-item-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.raid-item-footer > strong {
    color: var(--green-dark);
    font-size: 1rem;
}

@media (max-width: 1100px) {
    .arena-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .level-card-inner {
        grid-template-columns: 1fr;
    }

    .level-progress-header,
    .level-progress-footer {
        display: grid;
    }

    .leaderboard-join,
    .leaderboard-row {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .leaderboard-join {
        display: grid;
    }

    .leaderboard-rank {
        width: fit-content;
        min-width: 44px;
    }

    .leaderboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .leaderboard-metrics div {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding: 10px 0 0;
    }

    .shop-level-card {
        grid-template-columns: 1fr;
    }

    .shop-points-grid {
        grid-template-columns: 1fr;
    }

    .boss-card {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .boss-portrait {
        min-height: 150px;
    }

    .boss-title-row,
    .boss-hp-row {
        display: grid;
    }

    .boss-stats {
        grid-template-columns: 1fr;
    }

    .boss-reward-panel {
        align-items: stretch;
        display: grid;
    }

    .boss-hub-tabs a {
        flex: 1 1 calc(50% - 8px);
    }

    .raid-shop-grid {
        grid-template-columns: 1fr;
    }

    .raid-item-footer {
        align-items: stretch;
        display: grid;
    }

    .arena-hud {
        grid-template-columns: 1fr;
    }

    .arena-hud div + div {
        border-left: 0;
        border-top: 1px solid var(--line);
    }

    .arena-canvas {
        min-height: 320px;
    }

    .arena-bottom-bar,
    .arena-loadout,
    .arena-upgrade-options,
    .arena-info-grid,
    .arena-skill-grid {
        grid-template-columns: 1fr;
    }

    .arena-controls {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

.task-switcher {
    display: inline-flex;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 8px 20px rgba(32, 35, 31, 0.06);
    margin: 0;
    padding: 5px;
}

.task-switcher-shell {
    width: min(1120px, calc(100% - 32px));
    margin: -4px auto 12px;
}

.task-switcher-label {
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 900;
    padding: 7px 8px 7px 10px;
    text-transform: uppercase;
}

.task-switcher a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    color: var(--muted);
    font-weight: 850;
    padding: 7px 12px;
}

.task-switcher a.is-active {
    background: var(--active-bg-soft);
    color: var(--green-dark);
}

.momentum-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.momentum-card,
.focus-progress-row,
.today-page-header {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.momentum-card {
    display: grid;
    gap: 8px;
    padding: 20px;
}

.momentum-card span,
.focus-progress-row span,
.today-score span {
    color: var(--muted);
    font-weight: 800;
}

.momentum-card strong {
    color: var(--green-dark);
    font-size: 1.7rem;
    line-height: 1.1;
}

.momentum-card p {
    color: var(--muted);
    margin: 0;
}

.focus-progress-list {
    display: grid;
    gap: 11px;
}

.focus-progress-row {
    display: grid;
    grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    border-left: 4px solid transparent;
    padding: 16px 18px 16px 16px;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.focus-progress-row:hover {
    border-left-color: var(--green);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.focus-progress-row strong {
    display: block;
    font-size: 1.05rem;
}

.focus-progress-meter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;
}

.focus-progress-meter span {
    text-align: right;
}

.area-chart-card {
    display: grid;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-gradient);
    box-shadow: var(--shadow-soft);
    margin-top: 14px;
    padding: 20px;
}

.area-chart-card header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.area-chart-card h3 {
    font-size: 1.25rem;
    margin: 0;
}

.area-chart-average {
    display: grid;
    justify-items: end;
}

.area-chart-average strong {
    color: var(--green-dark);
    font-size: 1.55rem;
    line-height: 1;
}

.area-chart-average span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.area-chart {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.area-chart-column {
    min-width: 0;
    display: grid;
    grid-template-rows: 150px auto auto;
    gap: 8px;
    justify-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.area-chart-column:hover {
    border-color: var(--line);
    background: var(--surface);
    transform: translateY(-1px);
}

.area-chart-bar-wrap {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: end;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, transparent 0 24%, rgba(105, 112, 100, 0.10) 24% 25%, transparent 25% 49%, rgba(105, 112, 100, 0.10) 49% 50%, transparent 50% 74%, rgba(105, 112, 100, 0.10) 74% 75%, transparent 75%),
        var(--surface-soft);
    overflow: hidden;
}

.area-chart-bar {
    width: 100%;
    height: var(--area-progress);
    border-radius: 7px 7px 0 0;
    background: linear-gradient(180deg, var(--green), var(--blue));
    box-shadow: inset 0 10px 18px rgba(255, 255, 255, 0.16);
}

.area-chart-label {
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-chart-column strong {
    color: var(--green-dark);
    font-size: 1rem;
}

.timeline-card {
    display: grid;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-gradient);
    box-shadow: var(--shadow-soft);
    margin-top: 14px;
    padding: 20px;
}

.timeline-card > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.timeline-card h3 {
    font-size: 1.25rem;
    margin: 0;
}

.timeline-card > header p {
    max-width: 430px;
    color: var(--muted);
    font-weight: 760;
    margin: 0;
}

.timeline-grid {
    display: grid;
    gap: 12px;
}

.timeline-panel {
    display: grid;
    grid-template-columns: minmax(170px, 0.28fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 16px;
}

.timeline-panel-header {
    display: grid;
    align-content: space-between;
    gap: 16px;
}

.timeline-panel-header h4 {
    font-size: 1rem;
    line-height: 1.2;
    margin: 0 0 4px;
}

.timeline-panel-header span,
.timeline-score span {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 820;
}

.timeline-score {
    display: grid;
    gap: 3px;
}

.timeline-score strong {
    color: var(--green-dark);
    font-size: 1.55rem;
    line-height: 1;
}

.timeline-chart {
    display: grid;
    grid-template-columns: repeat(var(--timeline-count), minmax(10px, 1fr));
    align-items: end;
    gap: 4px;
    min-height: 150px;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, transparent 0 24%, rgba(105, 112, 100, 0.10) 24% 25%, transparent 25% 49%, rgba(105, 112, 100, 0.10) 49% 50%, transparent 50% 74%, rgba(105, 112, 100, 0.10) 74% 75%, transparent 75%),
        var(--surface-soft);
    padding: 10px 8px 6px;
}

.timeline-point {
    min-width: 10px;
    height: 132px;
    display: grid;
    grid-template-rows: 108px 18px;
    align-items: end;
    gap: 6px;
}

.timeline-bar {
    display: block;
    width: 100%;
    height: var(--timeline-progress);
    border-radius: 999px 999px 3px 3px;
    background: linear-gradient(180deg, var(--green), var(--blue));
    box-shadow: inset 0 10px 18px rgba(255, 255, 255, 0.16);
}

.timeline-point.is-future .timeline-bar {
    height: 4px;
    background: var(--progress-track);
    box-shadow: none;
}

.timeline-label {
    min-height: 1em;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
}

.heatmap-card {
    display: grid;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-gradient);
    box-shadow: var(--shadow-soft);
    margin-top: 14px;
    padding: 20px;
}

.heatmap-card > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.heatmap-card h3 {
    font-size: 1.25rem;
    margin: 0;
}

.heatmap-summary {
    display: grid;
    justify-items: end;
}

.heatmap-summary strong {
    color: var(--green-dark);
    font-size: 1.55rem;
    line-height: 1;
}

.heatmap-summary span,
.heatmap-footer {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.heatmap-frame {
    overflow-x: auto;
    padding-bottom: 4px;
}

.heatmap-months {
    display: grid;
    grid-template-columns: 48px repeat(var(--heatmap-week-count), 18px);
    gap: 4px;
    min-width: max-content;
    margin-bottom: 6px;
}

.heatmap-months span,
.heatmap-month-label {
    min-height: 1em;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
}

.heatmap-month-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.heatmap-body {
    display: grid;
    grid-template-columns: 48px max-content;
    gap: 4px;
    min-width: max-content;
}

.heatmap-weekdays {
    display: grid;
    grid-template-rows: repeat(7, 18px);
    gap: 4px;
}

.heatmap-weekdays span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 18px;
}

.heatmap-grid {
    display: flex;
    gap: 4px;
}

.heatmap-week {
    display: grid;
    grid-template-rows: repeat(7, 18px);
    gap: 4px;
}

.heatmap-day {
    width: 18px;
    height: 18px;
    display: block;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 3px;
    background: var(--surface-muted);
}

.heatmap-level-1 {
    background: color-mix(in srgb, var(--green) 28%, var(--surface-muted));
}

.heatmap-level-2 {
    background: color-mix(in srgb, var(--green) 48%, var(--surface-muted));
}

.heatmap-level-3 {
    background: color-mix(in srgb, var(--green) 68%, var(--surface-muted));
}

.heatmap-level-4 {
    background: linear-gradient(135deg, var(--green), var(--blue));
    border-color: color-mix(in srgb, var(--green-dark) 45%, transparent);
}

.heatmap-day.is-today {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

.heatmap-day.is-future {
    opacity: 0.42;
}

.heatmap-day.is-outside-range {
    visibility: hidden;
}

.heatmap-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.today-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    background: var(--panel-gradient);
    padding: 28px;
}

.today-page-header h1 {
    font-size: 2.35rem;
    line-height: 1.08;
    margin: 0 0 10px;
}

.today-page-header p {
    color: var(--muted);
    margin: 0;
}

.today-score {
    min-width: 150px;
    display: grid;
    justify-items: end;
    border-left: 1px solid var(--line);
    padding-left: 28px;
}

.task-page-actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 18px;
}

.task-page-actions .button {
    white-space: nowrap;
}

.today-score strong {
    color: var(--green-dark);
    font-size: 2.25rem;
    line-height: 1;
}

.review-metric-grid,
.achievement-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.achievement-summary {
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.55fr) minmax(220px, 0.75fr);
}

.review-metric-card,
.achievement-summary-card,
.achievement-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.review-metric-card,
.achievement-summary-card {
    display: grid;
    gap: 8px;
    align-content: space-between;
    min-height: 130px;
    padding: 18px;
}

.review-metric-card span,
.review-metric-card small,
.achievement-summary-card p,
.achievement-progress span,
.review-rhythm-row span,
.review-task-row span,
.review-task-score span,
.review-log-row span,
.review-focus-card span,
.review-focus-card small,
.review-planned-note span {
    color: var(--muted);
    font-weight: 800;
}

.review-metric-card strong {
    color: var(--green-dark);
    font-size: 2rem;
    line-height: 1;
}

.achievement-summary-card h2 {
    font-size: 1.35rem;
    margin: 0;
}

.achievement-summary-card p {
    margin: 0;
}

.achievement-next-card {
    background: var(--panel-gradient);
}

.review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 16px;
    margin-bottom: 18px;
}

.review-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.review-panel {
    display: grid;
    gap: 16px;
    align-content: start;
    padding: 20px;
}

.review-panel header h2 {
    font-size: 1.28rem;
    margin: 0;
}

.review-rhythm-list,
.review-task-list,
.review-log-list {
    display: grid;
    gap: 10px;
}

.review-rhythm-row,
.review-task-row,
.review-log-row,
.review-focus-card {
    display: grid;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.review-rhythm-row,
.review-task-row,
.review-log-row {
    grid-template-columns: minmax(0, 1fr) minmax(130px, 0.55fr);
}

.review-log-row {
    grid-template-columns: minmax(0, 1fr) auto;
}

.review-rhythm-row:hover,
.review-task-row:hover,
.review-log-row:hover,
.review-focus-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-soft);
    transform: translateY(-1px);
}

.review-rhythm-row strong,
.review-task-row strong,
.review-log-row strong,
.review-focus-card strong {
    display: block;
    line-height: 1.2;
}

.review-rhythm-progress,
.review-task-score {
    display: grid;
    gap: 6px;
    justify-items: end;
}

.review-rhythm-progress {
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    justify-items: stretch;
}

.review-rhythm-progress span,
.review-task-score strong {
    color: var(--green-dark);
    font-weight: 900;
    text-align: right;
}

.review-spotlight {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 16px;
}

.review-spotlight .nav-code {
    width: 38px;
    height: 38px;
}

.review-spotlight strong {
    color: var(--green-dark);
    font-size: 1.12rem;
}

.review-spotlight p {
    color: var(--muted);
    margin: 3px 0 0;
}

.review-planned-note,
.empty-inline {
    border: 1px dashed var(--line-strong);
    border-radius: 8px;
    background: var(--surface-soft);
    padding: 14px;
}

.review-planned-note {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.empty-inline h3 {
    margin: 0 0 6px;
}

.empty-inline p {
    color: var(--muted);
    margin: 0;
}

.review-focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.review-focus-card {
    align-content: space-between;
    min-height: 140px;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.achievement-card {
    display: grid;
    gap: 18px;
    align-content: space-between;
    min-height: 256px;
    padding: 18px;
}

.achievement-card.is-locked {
    background: var(--surface-soft);
}

.achievement-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.achievement-code {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--green-dark);
    font-size: 0.92rem;
    font-weight: 950;
}

.achievement-card.is-unlocked .achievement-code {
    border-color: rgba(20, 120, 106, 0.38);
    background: var(--active-bg);
}

.achievement-card h2 {
    font-size: 1.18rem;
    margin: 0 0 8px;
}

.achievement-card p {
    color: var(--muted);
    margin: 0;
}

.achievement-progress {
    display: grid;
    gap: 8px;
}

.stats-panel-intro {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    margin-bottom: 18px;
    padding: 18px 20px;
}

.stats-panel-intro h2 {
    font-size: 1.28rem;
    margin: 0 0 6px;
}

.stats-panel-intro p {
    color: var(--muted);
    margin: 0;
}

.focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.focus-card {
    min-height: 230px;
    display: grid;
    align-content: space-between;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(32, 35, 31, 0.08);
    padding: 18px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.focus-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(32, 35, 31, 0.12);
}

.focus-code {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 999px;
    background: var(--surface-muted);
    color: var(--green-dark);
    font-weight: 900;
}

.focus-card h3 {
    font-size: 1.24rem;
    margin: 16px 0 8px;
}

.focus-card p {
    color: var(--muted);
    margin: 0;
}

.focus-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.focus-stats span {
    color: var(--muted);
    font-weight: 800;
}

.focus-stats strong {
    font-size: 1.45rem;
}

.focus-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.46fr);
    gap: 26px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--hero-panel-gradient);
    box-shadow: var(--shadow);
    padding: 28px;
}

.focus-hero h1 {
    max-width: 760px;
    font-size: 2rem;
    line-height: 1.08;
    margin: 0 0 12px;
}

.focus-hero p {
    color: var(--muted);
    max-width: 720px;
    margin: 0;
}

.area-stats {
    display: grid;
    gap: 9px;
}

.area-stats div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 12px 13px;
}

.area-stats strong {
    font-size: 1.4rem;
}

.area-stats span {
    color: var(--muted);
    font-weight: 800;
}

.suggestion-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.suggestion-row a {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--green-dark);
    font-size: 0.94rem;
    font-weight: 850;
    padding: 8px 11px;
}

.empty-suggestions {
    justify-content: center;
    margin: 16px auto 20px;
    max-width: 760px;
}

.tracker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
}

.tracker-card,
.panel,
.form-card,
.confirm-box,
.empty-state {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.tracker-card {
    min-height: 282px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.tracker-card:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.tracker-card.is-archived {
    background: var(--surface-soft);
}

.tracker-header h3 {
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 13px 0 8px;
}

.tracker-header p,
.detail-header p,
.muted,
.help-text,
.form-note {
    color: var(--muted);
}

.tracker-header p {
    margin: 0;
}

.category-pill {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 900;
    padding: 5px 9px;
}

.archive-pill {
    background: var(--surface-muted);
    color: var(--muted);
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.focus-pill {
    background: #26322d;
}

.category-health {
    background: var(--green);
}

.category-nutrition {
    background: #4f8d44;
}

.category-sleep {
    background: #5f5a96;
}

.category-mobility {
    background: #2f6f9f;
}

.category-study {
    background: var(--blue);
}

.category-finance {
    background: #2d7560;
}

.category-work {
    background: #5f5a96;
}

.category-home {
    background: var(--coral);
}

.category-personal {
    background: var(--amber);
    color: #2d2111;
}

.progress-block {
    display: grid;
    gap: 8px;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-weight: 800;
}

.progress-track {
    height: 11px;
    border-radius: 999px;
    background: var(--progress-track);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--green), var(--blue));
}

.streak-summary {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface-soft);
    margin-top: 14px;
    padding: 12px;
}

.card-stat-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 800;
}

.card-stat-line strong {
    color: var(--green-dark);
}

.streak-summary span {
    color: var(--muted);
    font-weight: 800;
}

.streak-summary strong {
    color: var(--green-dark);
}

.tracker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.card-links a,
.form-note a {
    color: var(--green-dark);
    font-weight: 800;
}

.checkbox-field {
    margin-top: 4px;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted);
    line-height: 1.4;
}

.checkbox-label a {
    color: var(--green-dark);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.card-links .danger-link {
    color: var(--danger);
}

.empty-state,
.confirm-box {
    padding: 28px;
    text-align: center;
}

.empty-state h2,
.confirm-box h1 {
    margin-bottom: 16px;
}

.form-layout,
.auth-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.72fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
}

.form-intro,
.auth-copy {
    padding-top: 20px;
}

.form-subhead {
    border-top: 1px solid var(--line);
    color: var(--green-dark);
    font-size: 0.9rem;
    font-weight: 900;
    margin: 20px 0 14px;
    padding-top: 16px;
}

.form-card,
.panel {
    padding: 22px;
}

.legal-page {
    display: grid;
    gap: 16px;
    max-width: 920px;
    margin: 0 auto;
}

.legal-hero h1 {
    margin: 0 0 8px;
}

.legal-hero p,
.legal-card p {
    color: var(--muted);
    font-weight: 740;
    margin: 0;
}

.legal-card {
    display: grid;
    gap: 12px;
}

.legal-card h2 {
    font-size: 1.35rem;
    margin: 0;
}

.legal-card a {
    color: var(--green-dark);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.legal-list {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-weight: 740;
    margin: 0;
    padding-left: 20px;
}

.legal-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-card {
    max-width: 520px;
}

.field {
    display: grid;
    gap: 7px;
    margin-bottom: 16px;
}

.field label {
    font-weight: 800;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--field-border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    padding: 11px 12px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(22, 117, 103, 0.15);
    outline: none;
}

.field .checkbox-label input[type="checkbox"] {
    width: auto;
    flex: 0 0 auto;
    margin-top: 4px;
}

.field ul,
.errorlist {
    color: var(--danger);
    margin: 0;
    padding-left: 20px;
}

.help-text,
.form-note {
    margin: 0;
    font-size: 0.92rem;
}

.detail-header {
    align-items: start;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
    gap: 16px;
}

.meta-list {
    display: grid;
    gap: 12px;
    margin: 22px 0 0;
}

.meta-list div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.meta-list dt {
    color: var(--muted);
    font-weight: 700;
}

.meta-list dd {
    margin: 0;
    font-weight: 800;
}

.stacked-form {
    display: grid;
    gap: 4px;
}

.undo-form {
    margin-top: 12px;
}

.log-panel {
    margin-top: 16px;
}

.log-list {
    display: grid;
    gap: 12px;
    margin: 16px 0 0;
    padding-left: 20px;
}

.log-list time {
    font-weight: 900;
}

.log-list p {
    color: var(--muted);
    margin: 4px 0 0;
}

@media (max-width: 1120px) and (min-width: 901px) {
    .app-layout {
        grid-template-columns: 226px minmax(0, 1fr) 142px;
    }

    .app-sidebar {
        padding: 18px 12px;
    }

    .app-main .page-shell {
        width: min(100% - 40px, 980px);
    }

    .task-rail {
        padding: 18px 10px;
    }

    .task-rail-link {
        min-height: 32px;
        font-size: 0.84rem;
        gap: 8px;
        padding: 6px 8px;
    }

    .task-rail-extra {
        gap: 3px;
        padding-top: 12px;
    }

    .task-rail-link-compact {
        min-height: 32px;
        font-size: inherit;
    }

    .dashboard-header,
    .dashboard-board,
    .focus-hero {
        grid-template-columns: 1fr;
    }

    .today-page-header {
        align-items: start;
    }
}

@media (max-width: 900px) {
    .app-layout {
        display: block;
    }

    .app-sidebar {
        display: none;
    }

    .task-rail {
        display: none;
    }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 12;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        border-bottom: 1px solid var(--line);
        background: var(--header-bg);
        padding: 12px 16px;
        backdrop-filter: blur(12px);
    }

    .mobile-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-brand .brand-mark {
        width: 34px;
        height: 34px;
    }

    .mobile-app-menu,
    .mobile-task-menu {
        display: block;
        position: relative;
    }

    .mobile-app-menu summary,
    .mobile-task-menu summary {
        display: inline-flex;
        min-height: 38px;
        align-items: center;
        gap: 8px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        color: var(--green-dark);
        cursor: pointer;
        font-weight: 850;
        list-style: none;
        padding: 8px 11px;
    }

    .mobile-app-menu summary::-webkit-details-marker,
    .mobile-task-menu summary::-webkit-details-marker {
        display: none;
    }

    .hamburger-lines,
    .hamburger-lines::before,
    .hamburger-lines::after {
        display: block;
        width: 14px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        content: "";
    }

    .hamburger-lines {
        position: relative;
    }

    .hamburger-lines::before {
        position: absolute;
        top: -5px;
    }

    .hamburger-lines::after {
        position: absolute;
        top: 5px;
    }

    .mobile-nav-panel,
    .mobile-task-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 20;
        display: grid;
        gap: 5px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--surface);
        box-shadow: var(--shadow);
        padding: 8px;
    }

    .mobile-nav-panel {
        right: auto;
        left: 0;
        width: min(220px, calc(100vw - 28px));
        max-height: calc(100vh - 82px);
        overflow-y: auto;
    }

    .mobile-task-panel {
        width: min(220px, calc(100vw - 28px));
        max-height: calc(100vh - 82px);
        overflow-y: auto;
    }

    .mobile-panel-section {
        display: grid;
        gap: 4px;
    }

    .mobile-panel-section + .mobile-panel-section {
        border-top: 1px solid var(--line);
        margin-top: 5px;
        padding-top: 8px;
    }

    .mobile-panel-label {
        color: var(--muted);
        font-size: 0.68rem;
        font-weight: 900;
        letter-spacing: 0.08em;
        padding: 0 8px 2px;
        text-transform: uppercase;
    }

    .mobile-nav-panel a,
    .mobile-panel-link,
    .mobile-task-panel a {
        display: flex;
        min-height: 34px;
        align-items: center;
        gap: 9px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        font-weight: 850;
        padding: 8px 10px;
        text-align: left;
        width: 100%;
    }

    .mobile-nav-panel a.is-active,
    .mobile-task-panel a.is-active {
        border-color: var(--green);
        background: var(--active-bg-soft);
        color: var(--green-dark);
    }

    .mobile-panel-form {
        margin: 0;
    }

    .mobile-new-button {
        gap: 4px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-main .page-shell {
        width: min(100% - 32px, 1040px);
    }

    .nav {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px 0;
    }

    .site-header .nav {
        min-height: 66px;
        align-items: center;
        flex-direction: row;
        padding: 10px 0;
    }

    .site-header .nav-actions {
        flex-wrap: nowrap;
        margin-left: auto;
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: 430px;
        padding: 24px;
    }

    .hero h1,
    .form-intro h1,
    .auth-copy h1,
    .detail-header h1,
    .confirm-box h1 {
        font-size: 2rem;
    }

    .hero-stats {
        width: 100%;
    }

    .landing-intro,
    .landing-preview,
    .landing-close {
        grid-template-columns: 1fr;
    }

    .landing-intro,
    .landing-preview,
    .landing-close {
        gap: 18px;
        align-items: start;
    }

    .landing-intro h2,
    .landing-preview-copy h2,
    .landing-section-heading h2,
    .landing-close-copy h2 {
        max-width: none;
    }

    .trackable-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-final-actions {
        justify-content: flex-start;
    }

    .section-heading,
    .detail-header,
    .tracker-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-layout,
    .auth-layout,
    .dashboard-header,
    .dashboard-board,
    .area-chart-card header,
    .heatmap-card > header,
    .focus-hero,
    .today-summary,
    .momentum-grid,
    .inspiration-stage,
    .review-metric-grid,
    .achievement-summary,
    .review-grid,
    .review-grid-wide,
    .focus-progress-row,
    .today-page-header,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .inspiration-stage {
        padding: 24px;
    }

    .inspiration-stage::before {
        top: 14px;
        right: 18px;
        font-size: 5.5rem;
    }

    .inspiration-stage-copy {
        max-width: none;
    }

    .inspiration-stage-copy h1 {
        font-size: 2rem;
    }

    .inspiration-quote-card {
        min-height: 0;
        padding: 24px;
    }

    .inspiration-date-card {
        position: relative;
        right: auto;
        bottom: auto;
        justify-items: start;
    }

    .today-score {
        justify-items: start;
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 18px;
    }

    .task-page-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .task-page-actions .button {
        justify-content: center;
    }

    .focus-progress-meter {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .review-rhythm-row,
    .review-task-row {
        grid-template-columns: 1fr;
    }

    .review-rhythm-progress,
    .review-task-score {
        justify-items: stretch;
    }

    .review-task-score {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .area-chart-card header {
        display: grid;
        align-items: start;
    }

    .timeline-card > header,
    .timeline-panel {
        grid-template-columns: 1fr;
    }

    .timeline-card > header,
    .heatmap-card > header {
        display: grid;
        align-items: start;
    }

    .deadline-card > header,
    .deadline-row {
        grid-template-columns: 1fr;
    }

    .deadline-date {
        justify-content: flex-start;
        min-height: auto;
    }

    .deadline-done-form,
    .deadline-done-form .button,
    .deadline-status {
        justify-self: stretch;
        width: 100%;
    }

    .timeline-card > header p {
        max-width: none;
    }

    .timeline-panel {
        gap: 12px;
    }

    .timeline-panel-header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .timeline-score {
        justify-items: end;
        text-align: right;
    }

    .timeline-chart {
        grid-template-columns: repeat(var(--timeline-count), minmax(8px, 1fr));
        gap: 2px;
    }

    .timeline-label {
        font-size: 0.62rem;
    }

    .heatmap-summary {
        justify-items: start;
    }

    .area-chart-average {
        justify-items: start;
    }

    .area-chart {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .area-chart-column {
        grid-template-columns: 82px minmax(0, 1fr) 44px;
        grid-template-rows: auto;
        align-items: center;
        text-align: left;
    }

    .area-chart-bar-wrap {
        grid-column: 2;
        grid-row: 1;
        height: 12px;
    }

    .area-chart-bar {
        width: var(--area-progress);
        height: 100%;
        border-radius: inherit;
    }

    .area-chart-label {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .area-chart-column strong {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }

    .detail-actions {
        width: 100%;
    }

    .task-switcher {
        display: flex;
        width: 100%;
        overflow-x: auto;
    }

    .task-switcher a {
        flex: 1 0 auto;
        justify-content: center;
    }

    .task-switcher-label {
        display: none;
    }

    .score-panel {
        grid-template-columns: 1fr;
    }

    .score-item {
        min-height: 104px;
    }

    .score-item + .score-item {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
}

@media (max-width: 480px) {
    .mobile-topbar {
        gap: 10px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .mobile-actions {
        gap: 6px;
    }

    .mobile-app-menu summary,
    .mobile-task-menu summary {
        padding-left: 9px;
        padding-right: 9px;
    }

    .mobile-new-button {
        min-width: 38px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .mobile-new-label {
        display: none;
    }

    .app-main .page-shell {
        width: min(100% - 28px, 1040px);
        padding-top: 24px;
    }

    .dashboard-header h1,
    .today-page-header h1 {
        font-size: 2rem;
    }

    .dashboard-quote,
    .today-page-header,
    .focus-hero,
    .heatmap-card,
    .review-panel,
    .review-metric-card,
    .achievement-summary-card,
    .achievement-card,
    .landing-intro,
    .landing-preview,
    .landing-trackables,
    .landing-close,
    .tracker-card,
    .panel,
    .form-card,
    .confirm-box,
    .empty-state {
        padding: 18px;
    }

    .trackable-grid,
    .mock-score-row {
        grid-template-columns: 1fr;
    }

    .mock-layout {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .mock-sidebar,
    .mock-task-rail {
        padding: 12px 8px;
    }

    .mock-sidebar span,
    .mock-task-rail span {
        width: 28px;
        height: 28px;
    }

    .mock-task-rail {
        display: none;
    }

    .mock-calendar {
        grid-template-columns: repeat(8, 1fr);
    }

    .result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .mobile-brand .brand {
        display: none;
    }
}