:root,
html[data-theme="dark"] {
--app-bg: #030611;
--app-bg-soft: #0a1023;
--app-surface: rgba(10, 15, 32, 0.84);
--app-surface-strong: rgba(10, 15, 30, 0.96);
--app-surface-border: rgba(122, 145, 210, 0.14);
--app-surface-border-strong: rgba(122, 145, 210, 0.18);
--app-line: rgba(122, 145, 210, 0.12);
--app-line-soft: rgba(122, 145, 210, 0.1);
--app-text: #eef2ff;
--app-text-strong: #ffffff;
--app-text-bright: #f8fbfc;
--app-text-soft: #f5f6ff;
--app-text-subtle: #edf0ff;
--app-text-dim: #c7d2ef;
--app-text-muted: #a6adcf;
--app-text-faint: #9ca8c9;
--app-muted: #9ca8c9;
--app-accent: #6f8fe9;
--app-accent-soft: #5d86d9;
--app-accent-strong: #90a9f5;
--app-accent-faint: rgba(111, 143, 233, 0.08);
--app-accent-soft-wash: rgba(111, 143, 233, 0.1);
--app-accent-wash: rgba(111, 143, 233, 0.12);
--app-accent-wash-strong: rgba(111, 143, 233, 0.14);
--app-accent-wash-bold: rgba(111, 143, 233, 0.18);
--app-accent-focus: rgba(111, 143, 233, 0.6);
--app-accent-ring: rgba(111, 143, 233, 0.14);
--app-accent-orb: rgba(111, 143, 233, 0.85);
--app-accent-glow: rgba(93, 134, 217, 0.12);
--app-accent-glow-strong: rgba(93, 134, 217, 0.14);
--app-accent-glow-soft: rgba(93, 134, 217, 0.08);
--app-accent-glow-faint: rgba(93, 134, 217, 0.06);
--app-white-02: rgba(255, 255, 255, 0.02);
--app-white-025: rgba(255, 255, 255, 0.025);
--app-white-03: rgba(255, 255, 255, 0.03);
--app-white-04: rgba(255, 255, 255, 0.04);
--app-white-045: rgba(255, 255, 255, 0.045);
--app-white-05: rgba(255, 255, 255, 0.05);
--app-white-08: rgba(255, 255, 255, 0.08);
--app-shadow: 0 24px 60px rgba(1, 3, 12, 0.42);
--app-shadow-soft: 0 18px 36px rgba(2, 4, 16, 0.18);
--app-shadow-panel: 0 24px 60px rgba(2, 4, 16, 0.22);
--app-shadow-panel-strong: 0 24px 60px rgba(2, 4, 16, 0.24);
--app-shadow-hero: 0 24px 60px rgba(2, 4, 16, 0.3);
--app-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.02);
--app-shadow-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.03);
--app-page-background:
radial-gradient(circle at 15% 12%, rgba(93, 134, 217, 0.12), transparent 24%),
radial-gradient(circle at 82% 18%, rgba(111, 143, 233, 0.1), transparent 22%),
linear-gradient(180deg, #030611 0%, #070c1a 36%, #0b1124 72%, #090f21 100%);
--app-chrome-background:
radial-gradient(circle at 15% 20%, rgba(93, 134, 217, 0.12), transparent 24%),
radial-gradient(circle at 85% 12%, rgba(111, 143, 233, 0.1), transparent 18%),
radial-gradient(circle at 60% 28%, rgba(255, 255, 255, 0.04), transparent 10%);
--app-topbar-background: linear-gradient(135deg, rgba(6, 10, 24, 0.96), rgba(14, 20, 42, 0.9));
--app-topbar-overlay:
radial-gradient(circle at top right, rgba(111, 143, 233, 0.08), transparent 24%),
radial-gradient(circle at left center, rgba(93, 134, 217, 0.08), transparent 22%);
--app-brand-icon-background: linear-gradient(135deg, rgba(93, 134, 217, 0.22), rgba(111, 143, 233, 0.18));
--app-panel-background: linear-gradient(180deg, rgba(16, 20, 40, 0.96), rgba(9, 13, 28, 0.99));
--app-hero-background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at 18% 16%, rgba(93, 134, 217, 0.12), transparent 22%),
linear-gradient(135deg, rgba(8, 12, 28, 0.98), rgba(14, 20, 44, 0.96) 58%, rgba(20, 28, 56, 0.92));
--app-hero-orb: radial-gradient(circle, rgba(111, 143, 233, 0.12), transparent 65%);
--app-nav-background:
radial-gradient(circle at top right, rgba(93, 134, 217, 0.06), transparent 24%),
rgba(7, 11, 24, 0.82);
--app-nav-item-hover: linear-gradient(135deg, rgba(79, 111, 190, 0.18), rgba(93, 134, 217, 0.12));
--app-nav-item-active: linear-gradient(135deg, rgba(79, 111, 190, 0.22), rgba(93, 134, 217, 0.14));
--app-nav-item-active-border: rgba(111, 143, 233, 0.34);
--app-icon-soft: #a9bee8;
--app-footer-background:
radial-gradient(circle at top right, rgba(111, 143, 233, 0.08), transparent 25%),
radial-gradient(circle at left bottom, rgba(93, 134, 217, 0.08), transparent 22%),
linear-gradient(135deg, rgba(6, 10, 24, 0.96), rgba(14, 20, 42, 0.9));
--app-button-background: linear-gradient(135deg, #4f6fbe, #6f8fe9);
--app-button-background-hover: linear-gradient(135deg, #5c7fd4, #7b9af0);
--app-progress-background: linear-gradient(90deg, #5578c7 0%, #6f8fe9 55%, #89a4ef 100%);
--app-success-background: linear-gradient(135deg, rgba(44, 107, 76, 0.22), rgba(255, 255, 255, 0.03));
--app-editor-background: rgba(7, 11, 24, 0.46);
--app-muted-pill-background: rgba(133, 143, 188, 0.18);
--app-marker-background: #7b9af0;
--app-marker-shadow: 0 0 0 6px rgba(123, 154, 240, 0.12);
--app-target-flash: rgba(111, 143, 233, 0.24);
--app-hero-decor: none;
}
html[data-theme="daybreak"] {
--app-bg: #edf4fb;
--app-bg-soft: #dde7f3;
--app-surface: rgba(255, 255, 255, 0.88);
--app-surface-strong: rgba(255, 255, 255, 0.96);
--app-surface-border: rgba(123, 152, 190, 0.22);
--app-surface-border-strong: rgba(123, 152, 190, 0.28);
--app-line: rgba(123, 152, 190, 0.18);
--app-line-soft: rgba(123, 152, 190, 0.14);
--app-text: #162338;
--app-text-strong: #0e1b2f;
--app-text-bright: #091425;
--app-text-soft: #21314a;
--app-text-subtle: #31435f;
--app-text-dim: #50647f;
--app-text-muted: #6c819c;
--app-text-faint: #7d92ab;
--app-muted: #6c819c;
--app-accent: #4f7fd2;
--app-accent-soft: #3f6fbe;
--app-accent-strong: #7fa6eb;
--app-accent-faint: rgba(79, 127, 210, 0.08);
--app-accent-soft-wash: rgba(79, 127, 210, 0.12);
--app-accent-wash: rgba(79, 127, 210, 0.14);
--app-accent-wash-strong: rgba(79, 127, 210, 0.18);
--app-accent-wash-bold: rgba(79, 127, 210, 0.24);
--app-accent-focus: rgba(79, 127, 210, 0.52);
--app-accent-ring: rgba(79, 127, 210, 0.18);
--app-accent-orb: rgba(79, 127, 210, 0.8);
--app-accent-glow: rgba(79, 127, 210, 0.12);
--app-accent-glow-strong: rgba(79, 127, 210, 0.16);
--app-accent-glow-soft: rgba(79, 127, 210, 0.08);
--app-accent-glow-faint: rgba(79, 127, 210, 0.06);
--app-white-02: rgba(255, 255, 255, 0.45);
--app-white-025: rgba(255, 255, 255, 0.55);
--app-white-03: rgba(255, 255, 255, 0.62);
--app-white-04: rgba(255, 255, 255, 0.72);
--app-white-045: rgba(255, 255, 255, 0.8);
--app-white-05: rgba(255, 255, 255, 0.9);
--app-white-08: rgba(255, 255, 255, 0.96);
--app-shadow: 0 20px 50px rgba(79, 115, 162, 0.14);
--app-shadow-soft: 0 16px 30px rgba(79, 115, 162, 0.12);
--app-shadow-panel: 0 18px 40px rgba(79, 115, 162, 0.14);
--app-shadow-panel-strong: 0 22px 48px rgba(79, 115, 162, 0.16);
--app-shadow-hero: 0 24px 54px rgba(79, 115, 162, 0.16);
--app-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.72);
--app-shadow-inset-strong: inset 0 1px 0 rgba(255, 255, 255, 0.9);
--app-page-background:
radial-gradient(circle at 14% 12%, rgba(255, 217, 150, 0.32), transparent 24%),
radial-gradient(circle at 82% 16%, rgba(132, 198, 255, 0.28), transparent 24%),
linear-gradient(180deg, #f7fbff 0%, #edf4fb 36%, #e4edf7 72%, #dbe6f2 100%);
--app-chrome-background:
radial-gradient(circle at 15% 20%, rgba(255, 221, 163, 0.26), transparent 24%),
radial-gradient(circle at 85% 12%, rgba(132, 198, 255, 0.22), transparent 18%),
radial-gradient(circle at 60% 28%, rgba(255, 255, 255, 0.42), transparent 10%);
--app-topbar-background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 246, 253, 0.92));
--app-topbar-overlay:
radial-gradient(circle at top right, rgba(132, 198, 255, 0.16), transparent 24%),
radial-gradient(circle at left center, rgba(255, 221, 163, 0.16), transparent 22%);
--app-brand-icon-background: linear-gradient(135deg, rgba(255, 198, 112, 0.34), rgba(129, 184, 255, 0.28));
--app-panel-background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 248, 253, 0.96));
--app-hero-background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.92), transparent 30%),
radial-gradient(circle at 18% 16%, rgba(255, 216, 145, 0.28), transparent 22%),
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(242, 247, 253, 0.96) 58%, rgba(228, 238, 249, 0.96));
--app-hero-orb: radial-gradient(circle, rgba(117, 176, 255, 0.18), transparent 65%);
--app-nav-background:
radial-gradient(circle at top right, rgba(132, 198, 255, 0.16), transparent 24%),
rgba(255, 255, 255, 0.86);
--app-nav-item-hover: linear-gradient(135deg, rgba(79, 127, 210, 0.12), rgba(132, 198, 255, 0.12));
--app-nav-item-active: linear-gradient(135deg, rgba(79, 127, 210, 0.18), rgba(132, 198, 255, 0.16));
--app-nav-item-active-border: rgba(79, 127, 210, 0.26);
--app-icon-soft: #5e83be;
--app-footer-background:
radial-gradient(circle at top right, rgba(132, 198, 255, 0.18), transparent 25%),
radial-gradient(circle at left bottom, rgba(255, 221, 163, 0.18), transparent 22%),
linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 246, 253, 0.92));
--app-button-background: linear-gradient(135deg, #3f6fbe, #4f7fd2);
--app-button-background-hover: linear-gradient(135deg, #4a7bcb, #6895e0);
--app-progress-background: linear-gradient(90deg, #5f8dd8 0%, #79a7ea 55%, #f4c674 100%);
--app-success-background: linear-gradient(135deg, rgba(123, 187, 143, 0.24), rgba(255, 255, 255, 0.62));
--app-editor-background: rgba(236, 243, 250, 0.86);
--app-muted-pill-background: rgba(160, 186, 223, 0.2);
--app-marker-background: #f4c674;
--app-marker-shadow: 0 0 0 6px rgba(244, 198, 116, 0.2);
--app-target-flash: rgba(121, 167, 234, 0.24);
--app-hero-decor: none;
}
html[data-theme="forest"] {
--app-bg: #08120c;
--app-bg-soft: #102016;
--app-surface: rgba(13, 27, 19, 0.84);
--app-surface-strong: rgba(10, 24, 16, 0.96);
--app-surface-border: rgba(130, 171, 138, 0.18);
--app-surface-border-strong: rgba(130, 171, 138, 0.24);
--app-line: rgba(130, 171, 138, 0.16);
--app-line-soft: rgba(130, 171, 138, 0.12);
--app-text: #eef7ef;
--app-text-strong: #fcfffc;
--app-text-bright: #f3faf4;
--app-text-soft: #edf7ee;
--app-text-subtle: #e5f1e7;
--app-text-dim: #c9ddcb;
--app-text-muted: #a7bfa9;
--app-text-faint: #92ad96;
--app-muted: #92ad96;
--app-accent: #69a878;
--app-accent-soft: #5b9870;
--app-accent-strong: #93c39b;
--app-accent-faint: rgba(105, 168, 120, 0.08);
--app-accent-soft-wash: rgba(105, 168, 120, 0.1);
--app-accent-wash: rgba(105, 168, 120, 0.12);
--app-accent-wash-strong: rgba(105, 168, 120, 0.14);
--app-accent-wash-bold: rgba(105, 168, 120, 0.18);
--app-accent-focus: rgba(105, 168, 120, 0.58);
--app-accent-ring: rgba(105, 168, 120, 0.16);
--app-accent-orb: rgba(105, 168, 120, 0.85);
--app-accent-glow: rgba(86, 143, 104, 0.12);
--app-accent-glow-strong: rgba(86, 143, 104, 0.14);
--app-accent-glow-soft: rgba(86, 143, 104, 0.08);
--app-accent-glow-faint: rgba(86, 143, 104, 0.06);
--app-page-background:
radial-gradient(circle at 15% 12%, rgba(86, 143, 104, 0.12), transparent 24%),
radial-gradient(circle at 82% 18%, rgba(105, 168, 120, 0.1), transparent 22%),
linear-gradient(180deg, #08120c 0%, #0c1911 36%, #102116 72%, #0c1810 100%);
--app-chrome-background:
radial-gradient(circle at 15% 20%, rgba(86, 143, 104, 0.12), transparent 24%),
radial-gradient(circle at 85% 12%, rgba(105, 168, 120, 0.1), transparent 18%),
radial-gradient(circle at 60% 28%, rgba(255, 255, 255, 0.04), transparent 10%);
--app-topbar-background: linear-gradient(135deg, rgba(8, 19, 12, 0.96), rgba(17, 35, 24, 0.9));
--app-topbar-overlay:
radial-gradient(circle at top right, rgba(105, 168, 120, 0.08), transparent 24%),
radial-gradient(circle at left center, rgba(86, 143, 104, 0.08), transparent 22%);
--app-brand-icon-background: linear-gradient(135deg, rgba(86, 143, 104, 0.22), rgba(105, 168, 120, 0.18));
--app-panel-background: linear-gradient(180deg, rgba(17, 35, 24, 0.96), rgba(10, 22, 15, 0.99));
--app-hero-background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at 18% 16%, rgba(86, 143, 104, 0.12), transparent 22%),
linear-gradient(135deg, rgba(10, 22, 15, 0.98), rgba(18, 38, 26, 0.96) 58%, rgba(27, 49, 35, 0.92));
--app-hero-orb: radial-gradient(circle, rgba(105, 168, 120, 0.12), transparent 65%);
--app-nav-background:
radial-gradient(circle at top right, rgba(86, 143, 104, 0.06), transparent 24%),
rgba(10, 22, 15, 0.82);
--app-nav-item-hover: linear-gradient(135deg, rgba(70, 124, 85, 0.18), rgba(86, 143, 104, 0.12));
--app-nav-item-active: linear-gradient(135deg, rgba(70, 124, 85, 0.22), rgba(86, 143, 104, 0.14));
--app-nav-item-active-border: rgba(105, 168, 120, 0.34);
--app-icon-soft: #b9d8bf;
--app-footer-background:
radial-gradient(circle at top right, rgba(105, 168, 120, 0.08), transparent 25%),
radial-gradient(circle at left bottom, rgba(86, 143, 104, 0.08), transparent 22%),
linear-gradient(135deg, rgba(8, 19, 12, 0.96), rgba(17, 35, 24, 0.9));
--app-button-background: linear-gradient(135deg, #4f8b5f, #69a878);
--app-button-background-hover: linear-gradient(135deg, #5b9870, #78b488);
--app-progress-background: linear-gradient(90deg, #4d865b 0%, #69a878 55%, #8ac395 100%);
--app-success-background: linear-gradient(135deg, rgba(57, 120, 73, 0.26), rgba(255, 255, 255, 0.03));
--app-editor-background: rgba(10, 22, 15, 0.46);
--app-muted-pill-background: rgba(117, 144, 121, 0.18);
--app-marker-background: #78b488;
--app-marker-shadow: 0 0 0 6px rgba(120, 180, 136, 0.12);
--app-target-flash: rgba(105, 168, 120, 0.24);
--app-hero-decor: none;
}
html[data-theme="terracotta"] {
--app-bg: #160b08;
--app-bg-soft: #27120d;
--app-surface: rgba(31, 15, 11, 0.84);
--app-surface-strong: rgba(29, 13, 9, 0.96);
--app-surface-border: rgba(204, 145, 114, 0.18);
--app-surface-border-strong: rgba(204, 145, 114, 0.24);
--app-line: rgba(204, 145, 114, 0.16);
--app-line-soft: rgba(204, 145, 114, 0.12);
--app-text: #fff2eb;
--app-text-strong: #fffdfb;
--app-text-bright: #fff8f3;
--app-text-soft: #fff0e7;
--app-text-subtle: #fbe7dc;
--app-text-dim: #efcfbf;
--app-text-muted: #d1ad9b;
--app-text-faint: #bf9988;
--app-muted: #bf9988;
--app-accent: #d58a63;
--app-accent-soft: #c17753;
--app-accent-strong: #ebb08f;
--app-accent-faint: rgba(213, 138, 99, 0.08);
--app-accent-soft-wash: rgba(213, 138, 99, 0.1);
--app-accent-wash: rgba(213, 138, 99, 0.12);
--app-accent-wash-strong: rgba(213, 138, 99, 0.14);
--app-accent-wash-bold: rgba(213, 138, 99, 0.18);
--app-accent-focus: rgba(213, 138, 99, 0.58);
--app-accent-ring: rgba(213, 138, 99, 0.16);
--app-accent-orb: rgba(213, 138, 99, 0.85);
--app-accent-glow: rgba(193, 119, 83, 0.12);
--app-accent-glow-strong: rgba(193, 119, 83, 0.14);
--app-accent-glow-soft: rgba(193, 119, 83, 0.08);
--app-accent-glow-faint: rgba(193, 119, 83, 0.06);
--app-page-background:
radial-gradient(circle at 15% 12%, rgba(193, 119, 83, 0.12), transparent 24%),
radial-gradient(circle at 82% 18%, rgba(213, 138, 99, 0.1), transparent 22%),
linear-gradient(180deg, #160b08 0%, #21100b 36%, #301811 72%, #25110c 100%);
--app-chrome-background:
radial-gradient(circle at 15% 20%, rgba(193, 119, 83, 0.12), transparent 24%),
radial-gradient(circle at 85% 12%, rgba(213, 138, 99, 0.1), transparent 18%),
radial-gradient(circle at 60% 28%, rgba(255, 255, 255, 0.04), transparent 10%);
--app-topbar-background: linear-gradient(135deg, rgba(29, 13, 9, 0.96), rgba(44, 21, 15, 0.9));
--app-topbar-overlay:
radial-gradient(circle at top right, rgba(213, 138, 99, 0.08), transparent 24%),
radial-gradient(circle at left center, rgba(193, 119, 83, 0.08), transparent 22%);
--app-brand-icon-background: linear-gradient(135deg, rgba(193, 119, 83, 0.22), rgba(213, 138, 99, 0.18));
--app-panel-background: linear-gradient(180deg, rgba(44, 21, 15, 0.96), rgba(24, 11, 8, 0.99));
--app-hero-background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at 18% 16%, rgba(193, 119, 83, 0.12), transparent 22%),
linear-gradient(135deg, rgba(28, 13, 9, 0.98), rgba(49, 24, 17, 0.96) 58%, rgba(70, 34, 24, 0.92));
--app-hero-orb: radial-gradient(circle, rgba(213, 138, 99, 0.12), transparent 65%);
--app-nav-background:
radial-gradient(circle at top right, rgba(193, 119, 83, 0.06), transparent 24%),
rgba(24, 11, 8, 0.82);
--app-nav-item-hover: linear-gradient(135deg, rgba(171, 100, 69, 0.18), rgba(193, 119, 83, 0.12));
--app-nav-item-active: linear-gradient(135deg, rgba(171, 100, 69, 0.22), rgba(193, 119, 83, 0.14));
--app-nav-item-active-border: rgba(213, 138, 99, 0.34);
--app-icon-soft: #f1c5ae;
--app-footer-background:
radial-gradient(circle at top right, rgba(213, 138, 99, 0.08), transparent 25%),
radial-gradient(circle at left bottom, rgba(193, 119, 83, 0.08), transparent 22%),
linear-gradient(135deg, rgba(29, 13, 9, 0.96), rgba(44, 21, 15, 0.9));
--app-button-background: linear-gradient(135deg, #b86b47, #d58a63);
--app-button-background-hover: linear-gradient(135deg, #c17753, #e19a74);
--app-progress-background: linear-gradient(90deg, #b06543 0%, #d58a63 55%, #edab84 100%);
--app-success-background: linear-gradient(135deg, rgba(102, 83, 46, 0.22), rgba(255, 255, 255, 0.03));
--app-editor-background: rgba(24, 11, 8, 0.46);
--app-muted-pill-background: rgba(171, 129, 108, 0.18);
--app-marker-background: #e19a74;
--app-marker-shadow: 0 0 0 6px rgba(225, 154, 116, 0.12);
--app-target-flash: rgba(213, 138, 99, 0.24);
--app-hero-decor: none;
}
html[data-theme="harbour"] {
--app-bg: #071119;
--app-bg-soft: #10202b;
--app-surface: rgba(11, 21, 31, 0.84);
--app-surface-strong: rgba(9, 18, 28, 0.96);
--app-surface-border: rgba(120, 171, 196, 0.18);
--app-surface-border-strong: rgba(120, 171, 196, 0.24);
--app-line: rgba(120, 171, 196, 0.16);
--app-line-soft: rgba(120, 171, 196, 0.12);
--app-text: #eef8fc;
--app-text-strong: #fcffff;
--app-text-bright: #f4fbfd;
--app-text-soft: #eef8fb;
--app-text-subtle: #e3f1f5;
--app-text-dim: #c5dde5;
--app-text-muted: #a4bcc5;
--app-text-faint: #8fa7b0;
--app-muted: #8fa7b0;
--app-accent: #5da8c5;
--app-accent-soft: #5196b2;
--app-accent-strong: #88c6dd;
--app-accent-faint: rgba(93, 168, 197, 0.08);
--app-accent-soft-wash: rgba(93, 168, 197, 0.1);
--app-accent-wash: rgba(93, 168, 197, 0.12);
--app-accent-wash-strong: rgba(93, 168, 197, 0.14);
--app-accent-wash-bold: rgba(93, 168, 197, 0.18);
--app-accent-focus: rgba(93, 168, 197, 0.58);
--app-accent-ring: rgba(93, 168, 197, 0.16);
--app-accent-orb: rgba(93, 168, 197, 0.85);
--app-accent-glow: rgba(81, 150, 178, 0.12);
--app-accent-glow-strong: rgba(81, 150, 178, 0.14);
--app-accent-glow-soft: rgba(81, 150, 178, 0.08);
--app-accent-glow-faint: rgba(81, 150, 178, 0.06);
--app-page-background:
radial-gradient(circle at 15% 12%, rgba(81, 150, 178, 0.12), transparent 24%),
radial-gradient(circle at 82% 18%, rgba(93, 168, 197, 0.1), transparent 22%),
linear-gradient(180deg, #071119 0%, #0b1820 36%, #102331 72%, #0c1923 100%);
--app-chrome-background:
radial-gradient(circle at 15% 20%, rgba(81, 150, 178, 0.12), transparent 24%),
radial-gradient(circle at 85% 12%, rgba(93, 168, 197, 0.1), transparent 18%),
radial-gradient(circle at 60% 28%, rgba(255, 255, 255, 0.04), transparent 10%);
--app-topbar-background: linear-gradient(135deg, rgba(9, 18, 28, 0.96), rgba(16, 33, 44, 0.9));
--app-topbar-overlay:
radial-gradient(circle at top right, rgba(93, 168, 197, 0.08), transparent 24%),
radial-gradient(circle at left center, rgba(81, 150, 178, 0.08), transparent 22%);
--app-brand-icon-background: linear-gradient(135deg, rgba(81, 150, 178, 0.22), rgba(93, 168, 197, 0.18));
--app-panel-background: linear-gradient(180deg, rgba(16, 33, 44, 0.96), rgba(9, 18, 28, 0.99));
--app-hero-background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at 18% 16%, rgba(81, 150, 178, 0.12), transparent 22%),
linear-gradient(135deg, rgba(9, 18, 28, 0.98), rgba(16, 33, 44, 0.96) 58%, rgba(24, 49, 64, 0.92));
--app-hero-orb: radial-gradient(circle, rgba(93, 168, 197, 0.12), transparent 65%);
--app-nav-background:
radial-gradient(circle at top right, rgba(81, 150, 178, 0.06), transparent 24%),
rgba(9, 18, 28, 0.82);
--app-nav-item-hover: linear-gradient(135deg, rgba(68, 131, 155, 0.18), rgba(81, 150, 178, 0.12));
--app-nav-item-active: linear-gradient(135deg, rgba(68, 131, 155, 0.22), rgba(81, 150, 178, 0.14));
--app-nav-item-active-border: rgba(93, 168, 197, 0.34);
--app-icon-soft: #bcdfea;
--app-footer-background:
radial-gradient(circle at top right, rgba(93, 168, 197, 0.08), transparent 25%),
radial-gradient(circle at left bottom, rgba(81, 150, 178, 0.08), transparent 22%),
linear-gradient(135deg, rgba(9, 18, 28, 0.96), rgba(16, 33, 44, 0.9));
--app-button-background: linear-gradient(135deg, #468aa6, #5da8c5);
--app-button-background-hover: linear-gradient(135deg, #5196b2, #72b7d1);
--app-progress-background: linear-gradient(90deg, #4d8ca5 0%, #5da8c5 55%, #86c7de 100%);
--app-success-background: linear-gradient(135deg, rgba(44, 92, 107, 0.22), rgba(255, 255, 255, 0.03));
--app-editor-background: rgba(9, 18, 28, 0.46);
--app-muted-pill-background: rgba(121, 145, 160, 0.18);
--app-marker-background: #72b7d1;
--app-marker-shadow: 0 0 0 6px rgba(114, 183, 209, 0.12);
--app-target-flash: rgba(93, 168, 197, 0.24);
--app-hero-decor: none;
}
html[data-theme="valentine"] {
--app-bg: #190812;
--app-bg-soft: #311121;
--app-surface: rgba(39, 13, 25, 0.84);
--app-surface-strong: rgba(34, 10, 22, 0.96);
--app-surface-border: rgba(228, 132, 165, 0.2);
--app-surface-border-strong: rgba(228, 132, 165, 0.26);
--app-line: rgba(228, 132, 165, 0.16);
--app-line-soft: rgba(228, 132, 165, 0.12);
--app-text: #fff1f6;
--app-text-strong: #fffdfd;
--app-text-bright: #fff6f9;
--app-text-soft: #ffedf4;
--app-text-subtle: #fde2eb;
--app-text-dim: #f3cad7;
--app-text-muted: #d6a0b4;
--app-text-faint: #c38ea2;
--app-muted: #c38ea2;
--app-accent: #e884a5;
--app-accent-soft: #d96e92;
--app-accent-strong: #f3afc4;
--app-accent-faint: rgba(232, 132, 165, 0.08);
--app-accent-soft-wash: rgba(232, 132, 165, 0.1);
--app-accent-wash: rgba(232, 132, 165, 0.12);
--app-accent-wash-strong: rgba(232, 132, 165, 0.14);
--app-accent-wash-bold: rgba(232, 132, 165, 0.18);
--app-accent-focus: rgba(232, 132, 165, 0.58);
--app-accent-ring: rgba(232, 132, 165, 0.16);
--app-accent-orb: rgba(232, 132, 165, 0.85);
--app-accent-glow: rgba(217, 110, 146, 0.12);
--app-accent-glow-strong: rgba(217, 110, 146, 0.14);
--app-accent-glow-soft: rgba(217, 110, 146, 0.08);
--app-accent-glow-faint: rgba(217, 110, 146, 0.06);
--app-page-background:
radial-gradient(circle at 14% 14%, rgba(232, 132, 165, 0.14), transparent 24%),
radial-gradient(circle at 82% 18%, rgba(255, 191, 211, 0.12), transparent 20%),
linear-gradient(180deg, #190812 0%, #260d1a 36%, #341224 72%, #220b18 100%);
--app-chrome-background:
radial-gradient(circle at 16% 18%, rgba(232, 132, 165, 0.12), transparent 22%),
radial-gradient(circle at 84% 16%, rgba(255, 191, 211, 0.1), transparent 18%),
radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.04), transparent 10%);
--app-topbar-background: linear-gradient(135deg, rgba(36, 11, 23, 0.96), rgba(63, 20, 40, 0.9));
--app-topbar-overlay:
radial-gradient(circle at top right, rgba(255, 191, 211, 0.08), transparent 24%),
radial-gradient(circle at left center, rgba(232, 132, 165, 0.08), transparent 22%);
--app-brand-icon-background: linear-gradient(135deg, rgba(217, 110, 146, 0.22), rgba(232, 132, 165, 0.18));
--app-panel-background: linear-gradient(180deg, rgba(58, 19, 37, 0.96), rgba(30, 10, 20, 0.99));
--app-hero-background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at 18% 16%, rgba(232, 132, 165, 0.12), transparent 22%),
linear-gradient(135deg, rgba(39, 13, 25, 0.98), rgba(79, 25, 50, 0.96) 58%, rgba(110, 36, 68, 0.92));
--app-hero-orb: radial-gradient(circle, rgba(255, 191, 211, 0.14), transparent 65%);
--app-nav-background:
radial-gradient(circle at top right, rgba(217, 110, 146, 0.06), transparent 24%),
rgba(30, 10, 20, 0.82);
--app-nav-item-hover: linear-gradient(135deg, rgba(183, 86, 120, 0.18), rgba(232, 132, 165, 0.12));
--app-nav-item-active: linear-gradient(135deg, rgba(183, 86, 120, 0.22), rgba(232, 132, 165, 0.14));
--app-nav-item-active-border: rgba(232, 132, 165, 0.34);
--app-icon-soft: #f1b6c8;
--app-footer-background:
radial-gradient(circle at top right, rgba(255, 191, 211, 0.08), transparent 25%),
radial-gradient(circle at left bottom, rgba(232, 132, 165, 0.08), transparent 22%),
linear-gradient(135deg, rgba(36, 11, 23, 0.96), rgba(63, 20, 40, 0.9));
--app-button-background: linear-gradient(135deg, #c75e82, #e884a5);
--app-button-background-hover: linear-gradient(135deg, #d96e92, #f09eb8);
--app-progress-background: linear-gradient(90deg, #bf5579 0%, #e884a5 55%, #f6b4c7 100%);
--app-success-background: linear-gradient(135deg, rgba(142, 51, 86, 0.22), rgba(255, 255, 255, 0.03));
--app-editor-background: rgba(30, 10, 20, 0.46);
--app-muted-pill-background: rgba(182, 126, 149, 0.18);
--app-marker-background: #f09eb8;
--app-marker-shadow: 0 0 0 6px rgba(240, 158, 184, 0.12);
--app-target-flash: rgba(232, 132, 165, 0.24);
--app-hero-decor:
radial-gradient(circle at 16% 26%, rgba(255, 214, 226, 0.22) 0 1.4rem, transparent 1.45rem),
radial-gradient(circle at 21% 22%, rgba(255, 214, 226, 0.22) 0 1.4rem, transparent 1.45rem),
linear-gradient(45deg, transparent 0 48%, rgba(255, 214, 226, 0.18) 48% 62%, transparent 62% 100%),
radial-gradient(circle at 78% 70%, rgba(255, 191, 211, 0.18) 0 1.2rem, transparent 1.25rem),
radial-gradient(circle at 83% 66%, rgba(255, 191, 211, 0.18) 0 1.2rem, transparent 1.25rem),
linear-gradient(45deg, transparent 0 68%, rgba(255, 191, 211, 0.16) 68% 80%, transparent 80% 100%);
}
html[data-theme="easter"] {
--app-bg: #101120;
--app-bg-soft: #1b1f35;
--app-surface: rgba(25, 28, 52, 0.84);
--app-surface-strong: rgba(22, 24, 47, 0.96);
--app-surface-border: rgba(165, 190, 122, 0.2);
--app-surface-border-strong: rgba(165, 190, 122, 0.26);
--app-line: rgba(165, 190, 122, 0.16);
--app-line-soft: rgba(165, 190, 122, 0.12);
--app-text: #f7f6ff;
--app-text-strong: #ffffff;
--app-text-bright: #fffefc;
--app-text-soft: #f4f2ff;
--app-text-subtle: #ece8fb;
--app-text-dim: #d7d4ea;
--app-text-muted: #b9b3d5;
--app-text-faint: #a8a2c5;
--app-muted: #a8a2c5;
--app-accent: #9dc76d;
--app-accent-soft: #8ab55d;
--app-accent-strong: #c6e39f;
--app-accent-faint: rgba(157, 199, 109, 0.08);
--app-accent-soft-wash: rgba(157, 199, 109, 0.1);
--app-accent-wash: rgba(157, 199, 109, 0.12);
--app-accent-wash-strong: rgba(157, 199, 109, 0.14);
--app-accent-wash-bold: rgba(157, 199, 109, 0.18);
--app-accent-focus: rgba(157, 199, 109, 0.58);
--app-accent-ring: rgba(157, 199, 109, 0.16);
--app-accent-orb: rgba(157, 199, 109, 0.85);
--app-accent-glow: rgba(138, 181, 93, 0.12);
--app-accent-glow-strong: rgba(138, 181, 93, 0.14);
--app-accent-glow-soft: rgba(138, 181, 93, 0.08);
--app-accent-glow-faint: rgba(138, 181, 93, 0.06);
--app-page-background:
radial-gradient(circle at 16% 14%, rgba(255, 196, 221, 0.14), transparent 22%),
radial-gradient(circle at 82% 18%, rgba(157, 199, 109, 0.1), transparent 22%),
linear-gradient(180deg, #101120 0%, #191b33 36%, #26284a 72%, #171930 100%);
--app-chrome-background:
radial-gradient(circle at 16% 18%, rgba(255, 196, 221, 0.12), transparent 22%),
radial-gradient(circle at 84% 16%, rgba(157, 199, 109, 0.1), transparent 18%),
radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.04), transparent 10%);
--app-topbar-background: linear-gradient(135deg, rgba(25, 28, 52, 0.96), rgba(43, 34, 77, 0.9));
--app-topbar-overlay:
radial-gradient(circle at top right, rgba(255, 210, 138, 0.08), transparent 24%),
radial-gradient(circle at left center, rgba(196, 175, 255, 0.08), transparent 22%);
--app-brand-icon-background: linear-gradient(135deg, rgba(255, 196, 221, 0.22), rgba(157, 199, 109, 0.18));
--app-panel-background: linear-gradient(180deg, rgba(43, 34, 77, 0.96), rgba(21, 24, 47, 0.99));
--app-hero-background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
radial-gradient(circle at 18% 16%, rgba(196, 175, 255, 0.12), transparent 22%),
linear-gradient(135deg, rgba(31, 34, 65, 0.98), rgba(57, 47, 102, 0.96) 58%, rgba(81, 74, 138, 0.92));
--app-hero-orb: radial-gradient(circle, rgba(255, 210, 138, 0.16), transparent 65%);
--app-nav-background:
radial-gradient(circle at top right, rgba(255, 196, 221, 0.06), transparent 24%),
rgba(21, 24, 47, 0.82);
--app-nav-item-hover: linear-gradient(135deg, rgba(128, 109, 197, 0.18), rgba(255, 196, 221, 0.12));
--app-nav-item-active: linear-gradient(135deg, rgba(128, 109, 197, 0.22), rgba(157, 199, 109, 0.14));
--app-nav-item-active-border: rgba(196, 175, 255, 0.34);
--app-icon-soft: #eed8b8;
--app-footer-background:
radial-gradient(circle at top right, rgba(255, 210, 138, 0.08), transparent 25%),
radial-gradient(circle at left bottom, rgba(196, 175, 255, 0.08), transparent 22%),
linear-gradient(135deg, rgba(25, 28, 52, 0.96), rgba(43, 34, 77, 0.9));
--app-button-background: linear-gradient(135deg, #7da74f, #9dc76d);
--app-button-background-hover: linear-gradient(135deg, #8ab55d, #b2d78a);
--app-progress-background: linear-gradient(90deg, #7ca14f 0%, #9dc76d 55%, #d8e9a8 100%);
--app-success-background: linear-gradient(135deg, rgba(115, 137, 58, 0.24), rgba(255, 255, 255, 0.03));
--app-editor-background: rgba(21, 24, 47, 0.46);
--app-muted-pill-background: rgba(170, 155, 214, 0.18);
--app-marker-background: #ffd17f;
--app-marker-shadow: 0 0 0 6px rgba(255, 209, 127, 0.14);
--app-target-flash: rgba(196, 175, 255, 0.24);
--app-hero-decor:
radial-gradient(ellipse at 18% 66%, rgba(255, 214, 110, 0.22) 0 1.7rem, transparent 1.75rem),
radial-gradient(ellipse at 18% 66%, rgba(255, 182, 193, 0.2) 0 0.85rem, transparent 0.9rem),
radial-gradient(ellipse at 28% 28%, rgba(196, 175, 255, 0.22) 0 1.8rem, transparent 1.85rem),
radial-gradient(ellipse at 28% 28%, rgba(255, 236, 157, 0.18) 0 0.8rem, transparent 0.86rem),
radial-gradient(ellipse at 80% 32%, rgba(187, 233, 166, 0.22) 0 1.7rem, transparent 1.75rem),
radial-gradient(ellipse at 80% 32%, rgba(255, 196, 221, 0.18) 0 0.72rem, transparent 0.78rem);
}
html[data-theme="halloween"] {
--app-bg: #0f0b12;
--app-bg-soft: #1b1221;
--app-surface: rgba(23, 15, 29, 0.84);
--app-surface-strong: rgba(20, 12, 26, 0.96);
--app-surface-border: rgba(241, 130, 40, 0.2);
--app-surface-border-strong: rgba(241, 130, 40, 0.26);
--app-line: rgba(241, 130, 40, 0.16);
--app-line-soft: rgba(241, 130, 40, 0.12);
--app-text: #f8f1ff;
--app-text-strong: #ffffff;
--app-text-bright: #fff8f4;
--app-text-soft: #f4eefe;
--app-text-subtle: #ede0fb;
--app-text-dim: #d8cce6;
--app-text-muted: #b79fcb;
--app-text-faint: #a58fb9;
--app-muted: #a58fb9;
--app-accent: #f18228;
--app-accent-soft: #d86b16;
--app-accent-strong: #ffb06d;
--app-accent-faint: rgba(241, 130, 40, 0.08);
--app-accent-soft-wash: rgba(241, 130, 40, 0.1);
--app-accent-wash: rgba(241, 130, 40, 0.12);
--app-accent-wash-strong: rgba(241, 130, 40, 0.14);
--app-accent-wash-bold: rgba(241, 130, 40, 0.18);
--app-accent-focus: rgba(241, 130, 40, 0.58);
--app-accent-ring: rgba(241, 130, 40, 0.16);
--app-accent-orb: rgba(241, 130, 40, 0.85);
--app-accent-glow: rgba(216, 107, 22, 0.12);
--app-accent-glow-strong: rgba(216, 107, 22, 0.14);
--app-accent-glow-soft: rgba(216, 107, 22, 0.08);
--app-accent-glow-faint: rgba(216, 107, 22, 0.06);
--app-page-background:
radial-gradient(circle at 14% 14%, rgba(241, 130, 40, 0.14), transparent 22%),
radial-gradient(circle at 84% 18%, rgba(125, 95, 186, 0.12), transparent 20%),
linear-gradient(180deg, #0f0b12 0%, #160f1c 36%, #21152b 72%, #130d17 100%);
--app-chrome-background:
radial-gradient(circle at 16% 18%, rgba(241, 130, 40, 0.12), transparent 22%),
radial-gradient(circle at 84% 16%, rgba(125, 95, 186, 0.1), transparent 18%),
radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.04), transparent 10%);
--app-topbar-background: linear-gradient(135deg, rgba(24, 15, 31, 0.96), rgba(45, 26, 54, 0.9));
--app-topbar-overlay:
radial-gradient(circle at top right, rgba(241, 130, 40, 0.08), transparent 24%),
radial-gradient(circle at left center, rgba(125, 95, 186, 0.08), transparent 22%);
--app-brand-icon-background: linear-gradient(135deg, rgba(216, 107, 22, 0.22), rgba(241, 130, 40, 0.18));
--app-panel-background: linear-gradient(180deg, rgba(40, 24, 48, 0.96), rgba(19, 12, 24, 0.99));
--app-hero-background:
radial-gradient(circle at top right, rgba(255, 244, 202, 0.08), transparent 28%),
radial-gradient(circle at 18% 16%, rgba(125, 95, 186, 0.12), transparent 22%),
linear-gradient(135deg, rgba(24, 15, 31, 0.98), rgba(54, 28, 63, 0.96) 58%, rgba(82, 42, 29, 0.92));
--app-hero-orb: radial-gradient(circle, rgba(255, 224, 139, 0.16), transparent 65%);
--app-nav-background:
radial-gradient(circle at top right, rgba(241, 130, 40, 0.06), transparent 24%),
rgba(19, 12, 24, 0.82);
--app-nav-item-hover: linear-gradient(135deg, rgba(180, 88, 14, 0.18), rgba(125, 95, 186, 0.12));
--app-nav-item-active: linear-gradient(135deg, rgba(180, 88, 14, 0.22), rgba(241, 130, 40, 0.14));
--app-nav-item-active-border: rgba(241, 130, 40, 0.34);
--app-icon-soft: #ffc68d;
--app-footer-background:
radial-gradient(circle at top right, rgba(241, 130, 40, 0.08), transparent 25%),
radial-gradient(circle at left bottom, rgba(125, 95, 186, 0.08), transparent 22%),
linear-gradient(135deg, rgba(24, 15, 31, 0.96), rgba(45, 26, 54, 0.9));
--app-button-background: linear-gradient(135deg, #ca6212, #f18228);
--app-button-background-hover: linear-gradient(135deg, #d86b16, #ff9a43);
--app-progress-background: linear-gradient(90deg, #bb5c12 0%, #f18228 55%, #ffc07a 100%);
--app-success-background: linear-gradient(135deg, rgba(135, 88, 18, 0.24), rgba(255, 255, 255, 0.03));
--app-editor-background: rgba(19, 12, 24, 0.46);
--app-muted-pill-background: rgba(127, 99, 155, 0.18);
--app-marker-background: #ffb06d;
--app-marker-shadow: 0 0 0 6px rgba(255, 176, 109, 0.12);
--app-target-flash: rgba(241, 130, 40, 0.24);
--app-hero-decor:
radial-gradient(circle at 84% 20%, rgba(255, 236, 176, 0.28) 0 3rem, transparent 3.1rem),
radial-gradient(circle at 84% 20%, rgba(255, 196, 86, 0.18) 0 1.6rem, transparent 1.7rem),
radial-gradient(circle at 22% 76%, rgba(241, 130, 40, 0.18) 0 1.8rem, transparent 1.85rem),
radial-gradient(circle at 74% 74%, rgba(125, 95, 186, 0.18) 0 1.2rem, transparent 1.25rem),
linear-gradient(135deg, transparent 0 74%, rgba(241, 130, 40, 0.12) 74% 78%, transparent 78% 100%);
}
html[data-theme="christmas"] {
--app-bg: #07120f;
--app-bg-soft: #10211a;
--app-surface: rgba(11, 26, 20, 0.84);
--app-surface-strong: rgba(9, 23, 17, 0.96);
--app-surface-border: rgba(180, 41, 67, 0.22);
--app-surface-border-strong: rgba(180, 41, 67, 0.28);
--app-line: rgba(180, 41, 67, 0.18);
--app-line-soft: rgba(180, 41, 67, 0.12);
--app-text: #eefaf3;
--app-text-strong: #ffffff;
--app-text-bright: #fffdf7;
--app-text-soft: #edf7f1;
--app-text-subtle: #e0f0e6;
--app-text-dim: #c8dfd0;
--app-text-muted: #9fbaa7;
--app-text-faint: #88a894;
--app-muted: #88a894;
--app-accent: #d64b5f;
--app-accent-soft: #b93a4d;
--app-accent-strong: #f09ba6;
--app-accent-faint: rgba(214, 75, 95, 0.08);
--app-accent-soft-wash: rgba(214, 75, 95, 0.1);
--app-accent-wash: rgba(214, 75, 95, 0.12);
--app-accent-wash-strong: rgba(214, 75, 95, 0.14);
--app-accent-wash-bold: rgba(214, 75, 95, 0.18);
--app-accent-focus: rgba(214, 75, 95, 0.58);
--app-accent-ring: rgba(214, 75, 95, 0.16);
--app-accent-orb: rgba(214, 75, 95, 0.85);
--app-accent-glow: rgba(185, 58, 77, 0.12);
--app-accent-glow-strong: rgba(185, 58, 77, 0.14);
--app-accent-glow-soft: rgba(185, 58, 77, 0.08);
--app-accent-glow-faint: rgba(185, 58, 77, 0.06);
--app-page-background:
radial-gradient(circle at 16% 14%, rgba(214, 75, 95, 0.14), transparent 22%),
radial-gradient(circle at 84% 18%, rgba(129, 181, 104, 0.12), transparent 22%),
linear-gradient(180deg, #07120f 0%, #0c1d17 36%, #123126 72%, #08140f 100%);
--app-chrome-background:
radial-gradient(circle at 16% 18%, rgba(214, 75, 95, 0.12), transparent 22%),
radial-gradient(circle at 84% 16%, rgba(129, 181, 104, 0.1), transparent 18%),
radial-gradient(circle at 62% 30%, rgba(255, 255, 255, 0.05), transparent 10%);
--app-topbar-background: linear-gradient(135deg, rgba(9, 23, 17, 0.96), rgba(21, 47, 36, 0.9));
--app-topbar-overlay:
radial-gradient(circle at top right, rgba(214, 75, 95, 0.08), transparent 24%),
radial-gradient(circle at left center, rgba(129, 181, 104, 0.08), transparent 22%);
--app-brand-icon-background: linear-gradient(135deg, rgba(185, 58, 77, 0.22), rgba(214, 75, 95, 0.18));
--app-panel-background: linear-gradient(180deg, rgba(19, 40, 31, 0.96), rgba(10, 22, 17, 0.99));
--app-hero-background:
radial-gradient(circle at top right, rgba(255, 255, 255, 0.1), transparent 28%),
radial-gradient(circle at 18% 16%, rgba(129, 181, 104, 0.12), transparent 22%),
linear-gradient(135deg, rgba(11, 26, 20, 0.98), rgba(27, 58, 45, 0.96) 58%, rgba(90, 20, 31, 0.9));
--app-hero-orb: radial-gradient(circle, rgba(255, 241, 193, 0.16), transparent 65%);
--app-nav-background:
radial-gradient(circle at top right, rgba(214, 75, 95, 0.06), transparent 24%),
rgba(10, 22, 17, 0.82);
--app-nav-item-hover: linear-gradient(135deg, rgba(185, 58, 77, 0.18), rgba(129, 181, 104, 0.12));
--app-nav-item-active: linear-gradient(135deg, rgba(185, 58, 77, 0.22), rgba(214, 75, 95, 0.14));
--app-nav-item-active-border: rgba(214, 75, 95, 0.34);
--app-icon-soft: #f0c2c9;
--app-footer-background:
radial-gradient(circle at top right, rgba(214, 75, 95, 0.08), transparent 25%),
radial-gradient(circle at left bottom, rgba(129, 181, 104, 0.08), transparent 22%),
linear-gradient(135deg, rgba(9, 23, 17, 0.96), rgba(21, 47, 36, 0.9));
--app-button-background: linear-gradient(135deg, #ab3144, #d64b5f);
--app-button-background-hover: linear-gradient(135deg, #b93a4d, #e36c7c);
--app-progress-background: linear-gradient(90deg, #ab3144 0%, #d64b5f 55%, #f2acb6 100%);
--app-success-background: linear-gradient(135deg, rgba(69, 115, 53, 0.24), rgba(255, 255, 255, 0.03));
--app-editor-background: rgba(10, 22, 17, 0.46);
--app-muted-pill-background: rgba(118, 150, 126, 0.18);
--app-marker-background: #f1d78b;
--app-marker-shadow: 0 0 0 6px rgba(241, 215, 139, 0.14);
--app-target-flash: rgba(214, 75, 95, 0.24);
--app-hero-decor:
linear-gradient(rgba(241, 215, 139, 0.22), rgba(241, 215, 139, 0.22)) 18% 0 / 2px 5rem no-repeat,
linear-gradient(rgba(241, 215, 139, 0.22), rgba(241, 215, 139, 0.22)) 32% 0 / 2px 4.2rem no-repeat,
linear-gradient(rgba(241, 215, 139, 0.22), rgba(241, 215, 139, 0.22)) 46% 0 / 2px 5.4rem no-repeat,
linear-gradient(rgba(241, 215, 139, 0.22), rgba(241, 215, 139, 0.22)) 78% 0 / 2px 4.4rem no-repeat,
linear-gradient(rgba(241, 215, 139, 0.22), rgba(241, 215, 139, 0.22)) 88% 0 / 2px 5rem no-repeat,
radial-gradient(circle at 18% 28%, rgba(214, 75, 95, 0.22) 0 1rem, transparent 1.05rem),
radial-gradient(circle at 32% 20%, rgba(129, 181, 104, 0.22) 0 1rem, transparent 1.05rem),
radial-gradient(circle at 46% 30%, rgba(241, 215, 139, 0.24) 0 1rem, transparent 1.05rem),
radial-gradient(circle at 78% 24%, rgba(214, 75, 95, 0.2) 0 0.9rem, transparent 0.95rem),
radial-gradient(circle at 88% 30%, rgba(129, 181, 104, 0.2) 0 0.9rem, transparent 0.95rem),
radial-gradient(circle at 64% 74%, rgba(255, 255, 255, 0.14) 0 0.18rem, transparent 0.22rem),
radial-gradient(circle at 68% 68%, rgba(255, 255, 255, 0.14) 0 0.18rem, transparent 0.22rem),
radial-gradient(circle at 72% 78%, rgba(255, 255, 255, 0.14) 0 0.18rem, transparent 0.22rem);
}
html {
scroll-behavior: smooth;
background: var(--app-page-background);
}
body {
min-height: 100vh;
color: var(--app-text);
background: transparent;
}
body,
button,
input,
select,
textarea {
font-family: "Avenir Next", "Segoe UI", sans-serif;
}
a {
transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.title {
color: var(--app-text);
font-weight: 600;
letter-spacing: -0.015em;
}
.subtitle,
.content,
.label,
.table,
.message,
.box,
.card,
p,
li {
color: var(--app-text);
font-weight: 400;
}
.app-shell {
position: relative;
min-height: 100vh;
}
.app-chrome {
position: relative;
padding: 1.25rem 1rem 0;
}
.app-chrome::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 360px;
background: var(--app-chrome-background);
pointer-events: none;
}
.app-topbar {
position: relative;
z-index: 1;
border: 1px solid var(--app-surface-border);
border-radius: 26px;
background: var(--app-topbar-background);
box-shadow: var(--app-shadow);
backdrop-filter: blur(16px);
}
.app-topbar::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--app-topbar-overlay);
pointer-events: none;
}
.app-topbar .navbar {
background: transparent;
}
.app-topbar .navbar-item,
.app-topbar .navbar-link {
background: transparent;
color: inherit;
}
.app-topbar a.navbar-item:hover,
.app-topbar a.navbar-item:focus,
.app-topbar a.navbar-item:focus-visible,
.app-topbar a.navbar-link:hover,
.app-topbar a.navbar-link:focus,
.app-topbar a.navbar-link:focus-visible {
background: var(--app-nav-item-hover);
color: inherit;
}
.app-brand {
display: flex;
flex-direction: column;
gap: 0.1rem;
line-height: 1.1;
}
.app-brand-mark {
display: inline-flex;
align-items: center;
gap: 0.65rem;
font-weight: 700;
font-size: 1.45rem;
color: var(--app-text-strong);
}
.app-brand-mark .icon {
width: 2.4rem;
height: 2.4rem;
border-radius: 14px;
background: var(--app-brand-icon-background);
color: var(--app-text);
box-shadow: 0 0 18px var(--app-accent-glow);
}
.app-brand-copy {
color: var(--app-muted);
font-size: 0.92rem;
}
.app-status {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 0.95rem;
border-radius: 18px;
background: var(--app-white-03);
border: 1px solid var(--app-line);
color: var(--app-text);
}
.app-status .icon {
width: 2.25rem;
height: 2.25rem;
border-radius: 999px;
background: var(--app-accent-glow-strong);
color: var(--app-text-dim);
}
.app-status-meta {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.app-status-label {
color: var(--app-muted);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.app-status-value {
color: var(--app-text-strong);
font-weight: 600;
}
.app-main {
position: relative;
z-index: 1;
padding: 1rem 1rem 3rem;
}
:target {
scroll-margin-top: 84px;
animation: target-flash 1.2s ease-out;
}
p.subtitle:has(a:target) {
border-radius: 6px;
animation: target-flash 1.2s ease-out;
}
.box,
.card,
.message .message-body,
.table {
border: 1px solid var(--app-surface-border);
background: var(--app-surface-strong);
box-shadow: var(--app-shadow-soft);
}
.message-header,
.card-header,
.card-footer {
background: var(--app-white-025);
border-color: var(--app-line);
}
.card-header-title,
.card-footer-item,
.message-header,
.message-header p {
color: var(--app-text-subtle);
font-weight: 500;
}
.table {
color: var(--app-text);
}
.table th,
.table td {
border-color: var(--app-line);
color: inherit;
}
.table thead td,
.table thead th {
color: var(--app-text-bright);
}
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
background-color: var(--app-white-02);
}
.input,
.textarea,
.select select {
border-color: var(--app-surface-border);
background: var(--app-white-03);
color: var(--app-text-soft);
box-shadow: var(--app-shadow-inset);
}
.input::placeholder,
.textarea::placeholder {
color: var(--app-text-faint);
}
.input:focus,
.textarea:focus,
.select select:focus {
border-color: var(--app-accent-focus);
box-shadow: 0 0 0 0.125em var(--app-accent-ring);
}
.app-page-hero,
.app-panel {
border: 1px solid var(--app-line);
border-radius: 24px;
box-shadow: var(--app-shadow-panel);
}
.app-page-hero {
position: relative;
overflow: hidden;
padding: 2rem;
background: var(--app-hero-background);
}
.app-page-hero::before,
.dashboard-hero::before,
.productivity-hero::before {
content: "";
position: absolute;
inset: 0;
background: var(--app-hero-decor);
background-repeat: no-repeat;
pointer-events: none;
}
.app-page-hero::after {
content: "";
position: absolute;
top: -48px;
right: -28px;
width: 210px;
height: 210px;
border-radius: 50%;
background: var(--app-hero-orb);
pointer-events: none;
}
.app-page-hero > *,
.dashboard-hero > *,
.productivity-hero > * {
position: relative;
z-index: 1;
}
.app-page-hero .title,
.app-page-hero .subtitle {
color: var(--app-text-bright);
}
.app-kicker {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.9rem;
border-radius: 999px;
background: var(--app-accent-wash);
color: var(--app-text-dim);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.app-panel {
padding: 1.5rem;
background: var(--app-panel-background);
}
.app-panel .title,
.app-panel .subtitle,
.app-panel .content,
.app-panel .label {
color: var(--app-text);
}
.app-chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.8rem;
border-radius: 999px;
background: var(--app-accent-soft-wash);
border: 1px solid var(--app-line);
color: var(--app-text-dim);
font-size: 0.85rem;
font-weight: 500;
}
.app-button-group {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.app-empty {
color: var(--app-text-muted);
}
.button {
font-weight: 500;
}
.button.is-link,
.tag.is-link,
.progress.is-link::-webkit-progress-value {
background: var(--app-button-background);
border-color: transparent;
}
.button.is-link:hover,
.tag.is-link:hover {
background: var(--app-button-background-hover);
}
.tabs a {
color: var(--app-text-dim);
}
.app-nav-wrap {
margin: 1rem auto 0;
}
.app-nav {
padding: 0.75rem;
border-radius: 22px;
border: 1px solid var(--app-line);
background: var(--app-nav-background);
box-shadow: var(--app-shadow-panel);
backdrop-filter: blur(14px);
}
.app-nav .tabs {
margin-bottom: 0;
}
.app-nav .tabs ul {
border-bottom: 0;
gap: 0.75rem;
flex-wrap: wrap;
}
.app-nav .tabs li {
margin: 0;
}
.app-nav .tabs a {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 3rem;
padding: 0.8rem 1rem;
border: 1px solid var(--app-line);
border-radius: 16px;
background: var(--app-white-03);
color: var(--app-text-subtle);
font-weight: 500;
}
.app-nav .tabs a:hover {
background: var(--app-nav-item-hover);
transform: translateY(-1px);
}
.app-nav .tabs li.is-active a {
border-color: var(--app-nav-item-active-border);
background: var(--app-nav-item-active);
color: var(--app-text-strong);
box-shadow: inset 0 1px 0 var(--app-white-05);
}
.app-nav .icon {
color: var(--app-icon-soft);
}
.app-nav .tabs li.is-active .icon {
color: var(--app-text-dim);
}
.app-footer {
margin-top: 3rem;
padding: 1.5rem;
border-radius: 26px;
border: 1px solid var(--app-line);
background: var(--app-footer-background);
box-shadow: var(--app-shadow-panel-strong);
}
.app-footer-brand {
height: 100%;
padding: 0.75rem;
}
.app-footer-brand p {
color: var(--app-text-faint);
}
.app-footer-kicker {
display: inline-block;
margin-bottom: 0.9rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: var(--app-accent-wash);
color: var(--app-text-dim);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.app-footer-stat {
display: flex;
flex-direction: column;
gap: 0.35rem;
height: 100%;
padding: 1rem 1.05rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-03);
color: var(--app-text-bright);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.app-footer-stat:hover {
transform: translateY(-1px);
background: var(--app-white-04);
color: var(--app-text-strong);
}
.app-footer-stat-label {
color: var(--app-text-faint);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.app-footer-stat-value {
font-size: 1.65rem;
font-weight: 650;
line-height: 1.1;
letter-spacing: -0.01em;
}
.app-footer-stat-meta {
color: var(--app-text-dim);
font-size: 0.88rem;
}
.app-footer-stat-meta i {
margin-right: 0.35rem;
color: var(--app-icon-soft);
}
.app-footer-stat-compact .app-footer-stat-value {
font-size: 1.18rem;
font-weight: 600;
line-height: 1.25;
}
.app-footer-lozenges {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
padding-top: 0.15rem;
}
.app-footer-action.button {
align-self: flex-start;
min-height: 0;
padding: 0.65rem 0.95rem;
border-color: var(--app-accent-line);
border-radius: 999px;
background: var(--app-accent-wash);
color: var(--app-text-bright);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
font-size: 0.84rem;
font-weight: 600;
text-decoration: none;
}
.app-footer-action.button:hover,
.app-footer-action.button:focus-visible {
border-color: var(--app-nav-item-active-border);
background: var(--app-nav-item-hover);
color: var(--app-text-strong);
}
.app-footer-action.button .icon {
color: var(--app-icon-soft);
}
.app-footer-action-static.button {
cursor: default;
pointer-events: none;
opacity: 0.9;
}
.hig-dashboard-head,
.hig-record-head,
.hig-form-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.hig-record-title-row {
display: flex;
align-items: center;
gap: 0.7rem;
flex-wrap: wrap;
}
.hig-record-meta {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.hig-record-link,
.sickness-case-link {
color: inherit;
}
.hig-record-link:hover,
.sickness-case-link:hover {
color: var(--app-text-strong);
}
.hig-insight-card,
.hig-side-stat {
height: 100%;
}
.hig-record-card + .hig-record-card {
margin-top: 1rem;
}
.hig-record-heading {
margin-bottom: 0.55rem;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--app-text-soft);
}
.hig-form .textarea {
min-height: 9rem;
}
.hig-score-row {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.hig-score-option {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
}
.hig-score-option input {
position: absolute;
opacity: 0;
inset: 0;
}
.hig-score-option span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 999px;
border: 1px solid var(--app-accent-line);
background: rgba(255, 255, 255, 0.03);
color: var(--app-text-bright);
font-weight: 700;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.hig-score-option input:checked + span {
border-color: var(--app-button-border);
background: var(--app-button-background);
color: #fff;
transform: translateY(-1px);
}
.hig-score-option input:focus-visible + span {
outline: 2px solid var(--app-button-border);
outline-offset: 2px;
}
.hig-section-panel.wellbeing {
border-color: rgba(164, 192, 66, 0.5);
}
.hig-section-panel.learning {
border-color: rgba(74, 126, 214, 0.52);
}
.hig-section-panel.career,
.hig-view-section.career {
border-color: rgba(209, 71, 60, 0.52);
}
.hig-section-panel.recognition,
.hig-view-section.recognition {
border-color: rgba(164, 192, 66, 0.5);
}
.hig-section-panel.support,
.hig-view-section.support {
border-color: rgba(247, 182, 43, 0.5);
}
.hig-view-section.wellbeing {
border-color: rgba(164, 192, 66, 0.5);
}
.hig-view-section.learning {
border-color: rgba(74, 126, 214, 0.52);
}
.hig-awareness-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.9rem 1.2rem;
}
.hig-awareness-option {
display: flex;
align-items: flex-start;
gap: 0.65rem;
}
.hig-awareness-option input {
margin-top: 0.2rem;
}
.hig-history-list {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
@keyframes target-flash {
0% {
background-color: var(--app-target-flash);
}
100% {
background-color: transparent;
}
}
@media screen and (max-width: 768px) {
.app-topbar {
border-radius: 22px;
}
.app-main,
.app-chrome {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.app-brand-mark {
font-size: 1.3rem;
}
}
.dashboard-hero,
.dashboard-card {
border: 1px solid var(--app-line);
border-radius: 24px;
box-shadow: var(--app-shadow-panel);
}
.dashboard-hero {
position: relative;
overflow: hidden;
padding: 2rem;
background: var(--app-hero-background);
}
.dashboard-hero::after {
content: "";
position: absolute;
top: -40px;
right: -20px;
width: 180px;
height: 180px;
border-radius: 50%;
background: var(--app-hero-orb);
}
.dashboard-kicker {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.9rem;
border-radius: 999px;
background: var(--app-accent-wash);
color: var(--app-text-dim);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dashboard-hero .title,
.dashboard-hero .subtitle {
color: var(--app-text-bright);
}
.dashboard-callout {
padding: 1rem 1.1rem;
border-radius: 18px;
background: var(--app-white-045);
border: 1px solid var(--app-line);
}
.dashboard-callout-label {
color: var(--app-text-muted);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.dashboard-callout-value {
margin-top: 0.25rem;
color: var(--app-text-strong);
font-size: 1.4rem;
font-weight: 600;
}
.dashboard-section-title {
color: var(--app-text-bright);
}
.dashboard-card {
height: 100%;
overflow: hidden;
background: var(--app-panel-background);
}
.dashboard-card .card-header,
.dashboard-card .card-footer {
background: transparent;
border-color: var(--app-line);
}
.dashboard-card .card-header-title,
.dashboard-card .content,
.dashboard-card .card-footer-item {
color: var(--app-text-subtle);
}
.dashboard-card .card-footer-item:hover {
background: var(--app-nav-item-hover);
color: var(--app-text-strong);
}
.dashboard-card .icon {
color: var(--app-icon-soft);
}
.dashboard-card.is-coming-soon .card-footer-item {
color: var(--app-text-dim);
}
.landing-hero-stat {
padding: 1rem 1.1rem;
border-radius: 18px;
background: var(--app-white-045);
border: 1px solid var(--app-line);
}
.landing-hero-stat-label {
color: var(--app-text-muted);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.landing-hero-stat-value {
margin-top: 0.3rem;
color: var(--app-text-strong);
font-size: 1.6rem;
font-weight: 800;
}
.landing-hero-stat-value-small {
font-size: 1.1rem;
}
.landing-price-card {
height: 100%;
}
.landing-price {
color: var(--app-text-strong);
font-size: 2.1rem;
font-weight: 800;
}
.landing-list {
color: var(--app-text-dim);
}
.landing-list li {
margin-bottom: 0.55rem;
}
.checklist-loading-shell {
max-width: 760px;
margin: 0 auto;
}
.checklist-loading-ring {
width: 72px;
height: 72px;
margin: 0 auto 1.5rem;
border-radius: 50%;
border: 3px solid var(--app-surface-border-strong);
border-top-color: var(--app-accent-orb);
animation: checklist-spin 0.9s linear infinite;
}
.checklist-loading-steps {
display: grid;
gap: 0.85rem;
margin-top: 1.5rem;
}
.checklist-loading-step {
padding: 0.95rem 1rem;
border-radius: 16px;
border: 1px solid var(--app-line);
background: var(--app-white-025);
color: var(--app-text-dim);
}
.checklist-loading-count {
color: var(--app-text-bright);
font-weight: 600;
}
@keyframes checklist-spin {
to {
transform: rotate(360deg);
}
}
.checklist-shell {
padding-bottom: 2rem;
}
.checklist-shell .grid {
display: block;
}
.checklist-shell .cell {
display: block;
}
.checklist-shell .box {
border-radius: 22px;
}
.checklist-shell .box .title {
font-size: 1.1rem;
}
.checklist-shell .box .subtitle {
color: var(--app-text-dim);
}
.checklist-shell .box .icon,
.checklist-shell .box .icon-text {
margin-right: 0.3rem;
}
.checklist-shell .box p.subtitle a {
margin-left: 0.35rem;
}
.checklist-item-row {
display: flex;
gap: 0.85rem;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
transition: opacity 0.18s ease;
}
.checklist-item-copy {
flex: 1 1 18rem;
}
.checklist-item-status {
display: inline-flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
}
.checklist-item-row.is-updating {
opacity: 0.55;
}
.checklist-inline-choice-menu {
width: 100%;
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
align-items: center;
margin-top: 0.55rem;
padding-top: 0.55rem;
border-top: 1px solid var(--app-line);
}
.checklist-inline-choice-label {
color: var(--app-text-faint);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.checklist-hero {
margin-bottom: 1.5rem;
}
.checklist-progress-wrap {
padding: 1rem 1.1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-03);
}
.checklist-progress-meta {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
color: var(--app-text-dim);
font-size: 0.95rem;
}
.checklist-pill-row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.checklist-section-label {
margin-bottom: 0.75rem;
color: var(--app-text-faint);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.checklist-target-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.checklist-path-grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media screen and (min-width: 769px) {
.checklist-target-grid,
.checklist-path-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.checklist-action-row {
display: grid;
gap: 0.75rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media screen and (min-width: 769px) {
.checklist-action-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.todo-create-panel,
.todo-list-panel {
margin-bottom: 1.5rem;
}
.todo-list-panel {
overflow: visible;
}
.todo-create-disclosure {
display: inline-block;
}
.todo-create-disclosure summary {
list-style: none;
cursor: pointer;
}
.todo-create-disclosure summary::-webkit-details-marker {
display: none;
}
.todo-create-disclosure-panel {
margin-top: 0.7rem;
max-width: 26rem;
padding: 1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-editor-background);
}
.todo-filter-panel {
margin-bottom: 1.5rem;
padding-top: 0.25rem;
}
.todo-filter-head {
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.todo-filter-summary,
.todo-filter-links,
.todo-filter-controls {
display: flex;
gap: 0.65rem;
align-items: center;
flex-wrap: wrap;
}
.todo-filter-label {
color: var(--app-text-faint);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.todo-filter-disclosure {
position: relative;
}
.todo-filter-disclosure summary {
list-style: none;
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.todo-filter-disclosure summary::-webkit-details-marker {
display: none;
}
.todo-filter-disclosure summary:hover,
.todo-filter-disclosure summary:focus-visible {
transform: translateY(-1px);
}
.todo-filter-disclosure[open] summary {
border-color: var(--app-accent-wash-bold);
background: var(--app-accent-wash-strong);
color: var(--app-text-bright);
}
.todo-filter-disclosure-panel {
margin-top: 0.65rem;
padding: 0.9rem 1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-editor-background);
min-width: min(24rem, 90vw);
}
.todo-assigned-filter-form {
display: flex;
gap: 0.65rem;
align-items: center;
flex-wrap: wrap;
margin-top: 0.75rem;
}
.todo-filter-controls {
flex: 1 1 20rem;
}
.todo-filter-controls .select {
flex: 1 1 14rem;
}
.todo-filter-button {
white-space: nowrap;
}
.todo-list-head,
.todo-panel-head {
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.todo-kicker {
background: var(--app-accent-soft-wash);
}
.todo-list-title-row {
display: flex;
gap: 0.65rem;
align-items: center;
min-width: 0;
}
.todo-list-tools {
display: flex;
gap: 0.45rem;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
margin-left: auto;
position: relative;
}
.todo-list-title-row .title {
line-height: 1.2;
}
.todo-list-icon-chip {
flex: 0 0 auto;
}
.todo-item-card {
padding: 0.8rem 1rem;
border: 1px solid var(--app-line);
border-radius: 18px;
background: var(--app-white-03);
}
.todo-item-card + .todo-item-card {
margin-top: 0.65rem;
}
.todo-item-card.is-complete {
background: var(--app-success-background);
}
.todo-item-card.is-due-soon {
background: linear-gradient(135deg, rgba(145, 102, 18, 0.2), rgba(255, 255, 255, 0.03));
border-color: rgba(214, 164, 72, 0.18);
}
.todo-item-card.is-overdue {
background: linear-gradient(135deg, rgba(116, 26, 42, 0.22), rgba(255, 255, 255, 0.03));
border-color: rgba(181, 70, 96, 0.2);
}
.todo-item-main {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.todo-item-copy {
min-width: 0;
flex: 1 1 auto;
}
.todo-item-line {
display: flex;
gap: 0.75rem;
align-items: center;
flex-wrap: wrap;
}
.todo-item-title {
line-height: 1.3;
min-width: 0;
flex: 1 1 14rem;
}
.todo-item-meta {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
align-items: center;
}
.todo-edit-trigger {
display: flex;
gap: 0.55rem;
flex-wrap: wrap;
align-items: center;
cursor: pointer;
list-style: none;
margin: 0;
}
.todo-edit-trigger::-webkit-details-marker {
display: none;
}
.todo-edit-trigger .app-chip {
transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.todo-edit-trigger:hover .app-chip,
.todo-edit-trigger:focus-visible .app-chip {
transform: translateY(-1px);
border-color: var(--app-accent-wash-bold);
background: var(--app-accent-wash-strong);
}
.app-chip.is-ghost {
background: var(--app-white-04);
color: var(--app-text-dim);
}
.todo-item-actions {
display: flex;
gap: 0.45rem;
flex-wrap: wrap;
align-items: center;
flex: 0 0 auto;
}
.todo-inline-form {
display: inline-flex;
}
.todo-icon-button {
width: 2.25rem;
min-width: 2.25rem;
padding-inline: 0;
justify-content: center;
}
.todo-action-button {
border-color: var(--app-line);
box-shadow: none;
}
.todo-action-button:hover,
.todo-action-button:focus-visible {
border-color: var(--app-accent-wash-bold);
}
.todo-action-button-subtle {
background: var(--app-white-04);
color: var(--app-text-dim);
}
.todo-action-button-subtle:hover,
.todo-action-button-subtle:focus-visible {
background: var(--app-white-05);
color: var(--app-text-bright);
}
.todo-action-button-primary {
background: var(--app-accent-wash-bold);
color: var(--app-text-bright);
}
.todo-action-button-primary:hover,
.todo-action-button-primary:focus-visible {
background: var(--app-accent);
color: var(--app-text-strong);
}
.todo-action-button-danger {
background: rgba(170, 38, 61, 0.12);
color: #f2c2ca;
border-color: rgba(170, 38, 61, 0.18);
}
.todo-action-button-danger:hover,
.todo-action-button-danger:focus-visible {
background: rgba(170, 38, 61, 0.18);
color: #ffe8ec;
border-color: rgba(170, 38, 61, 0.26);
}
.todo-status-chip {
min-width: 2.1rem;
justify-content: center;
}
.todo-status-chip.is-complete {
background: var(--app-success-soft);
color: var(--app-success-text);
}
.todo-due-chip.is-due-soon {
background: rgba(214, 164, 72, 0.14);
color: #f2ddb2;
border-color: rgba(214, 164, 72, 0.2);
}
.todo-due-chip.is-overdue {
background: rgba(181, 70, 96, 0.14);
color: #f6c2cc;
border-color: rgba(181, 70, 96, 0.2);
}
html[data-theme="daybreak"] .todo-action-button-subtle {
background: rgba(255, 255, 255, 0.92);
color: #223653;
border-color: rgba(123, 152, 190, 0.24);
}
html[data-theme="daybreak"] .todo-action-button-subtle:hover,
html[data-theme="daybreak"] .todo-action-button-subtle:focus-visible {
background: #ffffff;
color: #13253d;
border-color: rgba(79, 127, 210, 0.28);
}
html[data-theme="daybreak"] .todo-action-button-primary {
background: rgba(79, 127, 210, 0.22);
color: #17345a;
border-color: rgba(79, 127, 210, 0.22);
}
html[data-theme="daybreak"] .todo-action-button-primary:hover,
html[data-theme="daybreak"] .todo-action-button-primary:focus-visible {
background: rgba(79, 127, 210, 0.32);
color: #0e2340;
border-color: rgba(79, 127, 210, 0.3);
}
html[data-theme="daybreak"] .todo-action-button-danger {
background: rgba(193, 68, 96, 0.12);
color: #b34560;
border-color: rgba(193, 68, 96, 0.2);
}
html[data-theme="daybreak"] .todo-action-button-danger:hover,
html[data-theme="daybreak"] .todo-action-button-danger:focus-visible {
background: rgba(193, 68, 96, 0.18);
color: #8e2740;
border-color: rgba(193, 68, 96, 0.28);
}
html[data-theme="daybreak"] .todo-status-chip.is-complete {
background: rgba(91, 166, 119, 0.2);
color: #1f5b37;
border-color: rgba(91, 166, 119, 0.22);
}
html[data-theme="daybreak"] .todo-due-chip.is-due-soon {
background: rgba(219, 170, 69, 0.2);
color: #8a6114;
border-color: rgba(219, 170, 69, 0.24);
}
html[data-theme="daybreak"] .todo-due-chip.is-overdue {
background: rgba(193, 68, 96, 0.14);
color: #a23552;
border-color: rgba(193, 68, 96, 0.22);
}
.todo-edit-shell {
margin-top: 0.95rem;
}
.todo-item-create-disclosure {
position: static;
display: inline-block;
}
.todo-item-create-disclosure summary {
list-style: none;
cursor: pointer;
}
.todo-item-create-disclosure summary::-webkit-details-marker {
display: none;
}
.todo-item-create-panel {
position: absolute;
top: calc(100% + 0.75rem);
right: 0;
max-width: 30rem;
width: min(30rem, 78vw);
z-index: 5;
padding: 1rem;
border-radius: 20px;
border: 1px solid var(--app-surface-border-strong);
background: var(--app-panel-background);
box-shadow: var(--app-shadow-panel-strong);
}
.todo-item-create-disclosure[open] + .todo-inline-form,
.todo-item-create-disclosure[open] {
position: relative;
z-index: 6;
}
.todo-edit-shell summary {
color: inherit;
}
.todo-edit-shell-inline {
margin-top: 0;
}
.todo-edit-shell summary::-webkit-details-marker {
display: none;
}
.todo-edit-shell[open] summary {
margin-bottom: 0.95rem;
}
.todo-edit-shell-inline[open] {
flex-basis: 100%;
}
.todo-edit-shell-inline[open] summary {
margin-bottom: 0.75rem;
}
.todo-edit-shell[open] {
padding-top: 0.95rem;
border-top: 1px solid var(--app-line);
}
.todo-item-editor {
padding: 1rem;
border-radius: 18px;
background: var(--app-editor-background);
border: 1px solid var(--app-line-soft);
}
.todo-item-create-panel .todo-item-editor {
padding: 0;
border: 0;
background: transparent;
}
.todo-form-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.todo-item-create {
margin-top: 1rem;
}
.todo-create-form .button.is-fullwidth-mobile,
.todo-item-editor .button.is-fullwidth-mobile {
width: auto;
}
@media screen and (min-width: 769px) {
.todo-item-main {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.todo-item-actions {
justify-content: flex-end;
margin-left: 1rem;
flex-wrap: nowrap;
}
}
@media screen and (max-width: 768px) {
.todo-create-form .button.is-fullwidth-mobile,
.todo-item-editor .button.is-fullwidth-mobile,
.todo-inline-form,
.todo-inline-form .button {
width: 100%;
}
.todo-assigned-filter-form,
.todo-filter-controls,
.todo-filter-button {
width: 100%;
}
.todo-filter-disclosure {
width: 100%;
}
.todo-filter-disclosure summary {
width: 100%;
justify-content: center;
}
.todo-filter-disclosure-panel {
min-width: 0;
width: 100%;
}
.todo-item-create-disclosure {
width: 100%;
}
.todo-item-create-disclosure summary {
width: 100%;
justify-content: center;
}
.todo-item-create-panel {
position: static;
margin-top: 0.75rem;
max-width: none;
width: 100%;
padding: 0.9rem;
}
.todo-create-disclosure {
width: 100%;
}
.todo-create-disclosure summary {
width: 100%;
justify-content: center;
}
.todo-create-disclosure-panel {
max-width: none;
}
.todo-item-actions {
width: 100%;
}
.todo-list-head .button,
.todo-panel-head .app-chip {
width: 100%;
justify-content: center;
}
}
.pr-stat,
.pr-result-hero-stat {
padding: 1rem 1.1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-03);
}
.pr-stat-label,
.pr-result-hero-label {
color: var(--app-text-faint);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pr-stat-value,
.pr-result-hero-value {
margin-top: 0.25rem;
color: var(--app-text-bright);
font-size: 1.35rem;
font-weight: 600;
}
.pr-stat-value-small {
font-size: 1rem;
}
.pr-review-card {
display: block;
padding: 1.2rem;
border-radius: 20px;
border: 1px solid var(--app-line);
background: var(--app-white-025);
color: inherit;
}
.pr-review-card:hover {
background: var(--app-white-04);
transform: translateY(-1px);
}
.pr-review-card + .pr-review-card {
margin-top: 1rem;
}
.pr-review-meta,
.pr-review-copy {
color: var(--app-text-dim);
}
.pr-review-heading {
margin-bottom: 0.5rem;
color: var(--app-text);
font-weight: 600;
}
.pr-form-shell {
display: grid;
gap: 1rem;
}
.pr-checkbox {
display: block;
padding: 1rem 1.1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-025);
color: var(--app-text);
}
.pr-checkbox input {
margin-right: 0.75rem;
}
.pr-loading-shell {
max-width: 760px;
margin: 0 auto;
}
.pr-loading-ring {
width: 72px;
height: 72px;
margin: 0 auto 1.5rem;
border-radius: 50%;
border: 3px solid var(--app-surface-border-strong);
border-top-color: var(--app-accent-orb);
animation: pr-spin 0.9s linear infinite;
}
.pr-loading-steps {
display: grid;
gap: 0.85rem;
margin-top: 1.5rem;
}
.pr-loading-step {
padding: 0.95rem 1rem;
border-radius: 16px;
border: 1px solid var(--app-line);
background: var(--app-white-025);
color: var(--app-text-dim);
}
.pr-loading-count {
color: var(--app-text-bright);
font-weight: 600;
}
@keyframes pr-spin {
to {
transform: rotate(360deg);
}
}
.changelog-shell {
display: grid;
gap: 1.5rem;
}
.changelog-release {
position: relative;
padding: 1.4rem;
border-radius: 24px;
border: 1px solid var(--app-line);
background: var(--app-panel-background);
}
.changelog-release::before {
content: "";
position: absolute;
top: 1.6rem;
left: -0.65rem;
width: 0.85rem;
height: 0.85rem;
border-radius: 999px;
background: var(--app-marker-background);
box-shadow: var(--app-marker-shadow);
}
.changelog-section-title {
margin-top: 1rem;
margin-bottom: 0.4rem;
color: var(--app-text);
font-weight: 600;
}
.changelog-list {
margin: 0;
padding-left: 1.1rem;
color: var(--app-text-dim);
}
.changelog-list li + li {
margin-top: 0.35rem;
}
.bug-report-history {
display: grid;
gap: 1rem;
}
.bug-report-card {
padding: 1.15rem;
border-radius: 20px;
border: 1px solid var(--app-line);
background: var(--app-white-04);
box-shadow: var(--app-shadow-inset-strong);
}
.bug-report-card.is-fixed,
.bug-report-card.bug-status-fixed {
border-color: var(--app-accent-line);
background: var(--app-accent-wash);
}
.bug-report-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.85rem;
}
.bug-report-meta {
color: var(--app-text-faint);
font-size: 0.92rem;
}
.bug-report-copy {
color: var(--app-text-dim);
white-space: normal;
}
.discussion-markdown {
display: grid;
gap: 0.8rem;
}
.discussion-markdown > :first-child {
margin-top: 0;
}
.discussion-markdown > :last-child {
margin-bottom: 0;
}
.discussion-markdown-paragraph,
.discussion-markdown-list,
.discussion-markdown-quote,
.discussion-markdown-code,
.discussion-markdown-heading {
margin: 0;
}
.discussion-markdown-heading {
color: var(--app-text);
font-size: 1rem;
font-weight: 700;
line-height: 1.35;
}
.discussion-markdown-list {
padding-left: 1.1rem;
color: var(--app-text-dim);
}
.discussion-markdown-list li + li {
margin-top: 0.35rem;
}
.discussion-markdown-quote {
padding: 0.85rem 1rem;
border-left: 3px solid var(--app-accent-line);
border-radius: 0 14px 14px 0;
background: var(--app-white-03);
color: var(--app-text);
}
.discussion-markdown-code {
padding: 0.9rem 1rem;
border-radius: 16px;
border: 1px solid var(--app-line);
background: rgba(11, 16, 32, 0.78);
color: #f3f6ff;
overflow-x: auto;
}
.discussion-markdown code {
padding: 0.1rem 0.35rem;
border-radius: 8px;
background: var(--app-white-03);
color: var(--app-text);
font-size: 0.92em;
}
.discussion-markdown pre code {
padding: 0;
background: transparent;
color: inherit;
}
.discussion-markdown a {
color: var(--app-text-bright);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.discussion-help {
margin-top: 0.65rem;
color: var(--app-text-faint);
font-size: 0.85rem;
line-height: 1.45;
}
.bug-report-tags,
.bug-context-row,
.bug-filter-row {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.bug-report-tags {
margin-top: 0.95rem;
}
.bug-report-note {
margin-top: 0.95rem;
padding: 0.85rem 1rem;
border-radius: 16px;
background: var(--app-white-04);
color: var(--app-text-dim);
}
.sickness-register-head,
.sickness-case-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.sickness-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.9rem;
margin: 1.5rem 0;
}
.sickness-summary-card {
padding: 1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-03);
}
.sickness-summary-label {
display: block;
color: var(--app-text-faint);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sickness-summary-value {
display: block;
margin-top: 0.35rem;
color: var(--app-text-strong);
font-size: 1.5rem;
font-weight: 700;
}
.sickness-filter-row,
.sickness-case-meta {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.sickness-filter-row {
margin-bottom: 1.25rem;
}
.sickness-case-list {
display: grid;
gap: 1rem;
}
.sickness-case-card {
padding: 1.2rem;
}
.sickness-case-title-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.sickness-case-link {
color: inherit;
}
.sickness-case-link:hover,
.sickness-case-link:focus-visible {
color: var(--app-text-strong);
text-decoration: underline;
}
.sickness-case-guidance {
margin-top: 1rem;
padding: 0.95rem 1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-03);
}
.sickness-case-guidance-title {
margin-bottom: 0.4rem;
color: var(--app-text-faint);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sickness-chip-alert {
border-color: rgba(214, 164, 72, 0.26);
background: rgba(214, 164, 72, 0.14);
color: #f2ddb2;
}
.app-chip.sickness-stage-none {
border-color: var(--app-line);
color: var(--app-text-dim);
}
.app-chip.sickness-stage-informal_review {
border-color: rgba(79, 127, 210, 0.24);
background: rgba(79, 127, 210, 0.1);
color: #d9e5ff;
}
.app-chip.sickness-stage-first_formal {
border-color: rgba(214, 164, 72, 0.24);
background: rgba(214, 164, 72, 0.12);
color: #f4e0b4;
}
.app-chip.sickness-stage-final_warning {
border-color: rgba(193, 68, 96, 0.24);
background: rgba(193, 68, 96, 0.12);
color: #f6c2cc;
}
.app-chip.sickness-stage-dismissal_risk {
border-color: rgba(170, 38, 61, 0.28);
background: rgba(170, 38, 61, 0.16);
color: #ffe8ec;
}
.first-aid-register-head,
.first-aid-card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.first-aid-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.9rem;
margin: 1.5rem 0;
}
.first-aid-summary-card {
padding: 1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-03);
}
.first-aid-summary-label {
display: block;
color: var(--app-text-faint);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.first-aid-summary-value {
display: block;
margin-top: 0.35rem;
color: var(--app-text-strong);
font-size: 1.5rem;
font-weight: 700;
}
.first-aid-card-list {
display: grid;
gap: 1rem;
}
.first-aid-card {
padding: 1.2rem;
}
.first-aid-title-row,
.first-aid-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.65rem;
}
.first-aid-title-row {
margin-bottom: 0.75rem;
}
.first-aid-certificate-name {
margin-top: 1rem;
color: var(--app-text-muted);
font-size: 0.92rem;
}
.app-chip.first-aid-status-current {
border-color: rgba(67, 150, 92, 0.26);
background: rgba(67, 150, 92, 0.13);
color: #bfe7c8;
}
.app-chip.first-aid-status-orange,
.first-aid-card.first-aid-status-orange {
border-color: rgba(214, 141, 42, 0.42);
}
.app-chip.first-aid-status-orange {
background: rgba(214, 141, 42, 0.16);
color: #ffd8a2;
}
.app-chip.first-aid-status-red,
.first-aid-card.first-aid-status-red {
border-color: rgba(210, 70, 82, 0.48);
}
.app-chip.first-aid-status-red {
background: rgba(210, 70, 82, 0.17);
color: #ffc5cc;
}
.app-chip.first-aid-status-expired,
.first-aid-card.first-aid-status-expired {
border-color: rgba(0, 0, 0, 0.82);
}
.app-chip.first-aid-status-expired {
background: rgba(0, 0, 0, 0.55);
color: #f4f4f6;
}
.sickness-preview-stack {
display: grid;
gap: 1rem;
}
.sickness-preview-card,
.sickness-history-card {
height: 100%;
}
.bug-admin-form {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--app-line);
}
.todo-item-link {
color: inherit;
}
.todo-item-link:hover,
.todo-item-link:focus-visible {
color: var(--app-text-strong);
text-decoration: underline;
}
.discussion-composer {
position: relative;
}
.discussion-mention-picker {
display: none;
margin-top: 0.75rem;
padding: 0.5rem;
border-radius: 16px;
border: 1px solid var(--app-line);
background: var(--app-panel-background);
}
.discussion-mention-picker.is-active {
display: grid;
gap: 0.45rem;
}
.discussion-mention-option {
width: 100%;
padding: 0.7rem 0.85rem;
border: 1px solid var(--app-line);
border-radius: 12px;
background: var(--app-white-03);
color: var(--app-text-bright);
text-align: left;
cursor: pointer;
}
.discussion-mention-option:hover,
.discussion-mention-option:focus-visible {
background: var(--app-nav-item-hover);
}
.discussion-selected-mentions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 0.75rem;
}
.discussion-attachment-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.95rem;
}
.discussion-image-thumb {
display: inline-flex;
flex-direction: column;
gap: 0.45rem;
width: 132px;
padding: 0.55rem;
border-radius: 16px;
border: 1px solid var(--app-line);
background: var(--app-white-03);
color: var(--app-text-dim);
text-decoration: none;
}
.discussion-image-thumb:hover,
.discussion-image-thumb:focus-visible {
background: var(--app-white-04);
color: var(--app-text-strong);
}
.discussion-image-thumb img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 12px;
}
.discussion-image-thumb span {
display: block;
font-size: 0.78rem;
line-height: 1.3;
overflow-wrap: anywhere;
}
.notification-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-04);
color: var(--app-text-bright);
box-shadow: var(--app-shadow-inset-strong);
}
.notification-row.is-unread {
border-color: var(--app-accent);
background: var(--app-accent-wash);
}
.notification-row + .notification-row {
margin-top: 0.9rem;
}
.notification-row-head {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
}
.notification-row-copy {
min-width: 0;
}
.suggestion-card-top {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.suggestion-vote-panel {
flex: 0 0 5.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.8rem 0.65rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-03);
}
.suggestion-vote-button {
min-width: 2.4rem;
}
.suggestion-vote-count {
color: var(--app-text-bright);
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
}
.suggestion-vote-label {
color: var(--app-text-faint);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.suggestion-card-main {
flex: 1 1 auto;
min-width: 0;
}
.suggestion-status-planned,
.suggestion-status-building {
border-color: var(--app-accent-line);
}
.suggestion-status-shipped {
border-color: var(--app-accent-line);
background: var(--app-accent-wash);
}
@media screen and (max-width: 768px) {
.suggestion-card-top {
flex-direction: column;
}
.suggestion-vote-panel {
flex-basis: auto;
width: 100%;
flex-direction: row;
}
.sickness-summary-grid {
grid-template-columns: 1fr 1fr;
}
}
.productivity-shell {
padding-bottom: 2rem;
}
.productivity-hero {
position: relative;
overflow: hidden;
border-radius: 24px;
padding: 2rem;
background: var(--app-hero-background);
box-shadow: var(--app-shadow-hero);
}
.productivity-hero::after {
content: "";
position: absolute;
inset: auto -60px -80px auto;
width: 220px;
height: 220px;
border-radius: 50%;
background: var(--app-accent-soft-wash);
}
.productivity-kicker {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.45rem 0.85rem;
border-radius: 999px;
background: var(--app-accent-wash);
color: var(--app-text-dim);
font-size: 0.85rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.productivity-hero .title,
.productivity-hero .subtitle {
color: var(--app-text-strong);
}
.productivity-stat-card,
.productivity-panel,
.productivity-timeline-item {
border: 1px solid var(--app-line);
border-radius: 20px;
background: var(--app-panel-background);
box-shadow: var(--app-shadow-panel);
}
.productivity-stat-card {
height: 100%;
padding: 1.25rem;
}
.productivity-stat-label {
color: var(--app-text-muted);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.productivity-stat-value {
display: block;
margin-top: 0.35rem;
color: var(--app-text-bright);
font-size: 2rem;
font-weight: 600;
line-height: 1.1;
}
.productivity-stat-value-small {
font-size: 1.35rem;
}
.productivity-stat-note {
margin-top: 0.5rem;
color: var(--app-text-dim);
font-size: 0.95rem;
}
.productivity-panel {
padding: 1.5rem;
height: 100%;
}
.productivity-panel-title {
color: var(--app-text-bright);
margin-bottom: 0.35rem;
}
.productivity-panel-copy {
color: var(--app-text-muted);
margin-bottom: 1.25rem;
}
.productivity-progress-wrap {
padding: 1rem;
border-radius: 18px;
background: var(--app-white-03);
}
.productivity-progress-meta {
display: flex;
justify-content: space-between;
gap: 1rem;
color: var(--app-text-dim);
font-size: 0.95rem;
margin-bottom: 0.75rem;
}
.productivity-progress {
height: 1rem;
border-radius: 999px;
overflow: hidden;
background: var(--app-muted-pill-background);
}
.productivity-progress-bar {
height: 100%;
border-radius: 999px;
background: var(--app-progress-background);
}
.productivity-breakdown-item {
display: flex;
justify-content: space-between;
gap: 1rem;
align-items: center;
padding: 0.95rem 0;
border-bottom: 1px solid var(--app-line);
}
.productivity-breakdown-item:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.productivity-breakdown-task {
color: var(--app-text-bright);
font-weight: 500;
}
.productivity-breakdown-meta {
color: var(--app-text-muted);
font-size: 0.92rem;
}
.productivity-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
border-radius: 999px;
padding: 0.45rem 0.8rem;
font-size: 0.82rem;
background: var(--app-accent-soft-wash);
color: var(--app-text-dim);
}
.productivity-timeline {
display: grid;
gap: 1rem;
}
.productivity-timeline-item {
display: flex;
gap: 1rem;
padding: 1rem 1.1rem;
}
.productivity-timeline-icon {
flex: 0 0 2.75rem;
width: 2.75rem;
height: 2.75rem;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--app-brand-icon-background);
color: var(--app-text-dim);
}
.productivity-timeline-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.productivity-timeline-title {
color: var(--app-text-bright);
font-weight: 500;
}
.productivity-timeline-meta,
.productivity-empty {
color: var(--app-text-muted);
}
.productivity-timeline-time {
color: var(--app-accent-strong);
font-weight: 500;
}
.analytics-shell {
padding-bottom: 2rem;
}
.analytics-module-grid {
display: grid;
gap: 1rem;
}
.analytics-module-card {
padding: 1rem;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-white-03);
}
.analytics-module-head {
display: flex;
align-items: flex-start;
gap: 0.9rem;
}
.analytics-module-icon {
flex: 0 0 2.9rem;
width: 2.9rem;
height: 2.9rem;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--app-brand-icon-background);
color: var(--app-text-dim);
}
.analytics-module-rank {
margin: 0 0 0.2rem;
color: var(--app-text-muted);
font-size: 0.8rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.analytics-module-meta,
.analytics-module-latest {
color: var(--app-text-muted);
font-size: 0.92rem;
}
.analytics-module-bar {
height: 0.85rem;
margin-top: 1rem;
border-radius: 999px;
overflow: hidden;
background: var(--app-muted-pill-background);
}
.analytics-module-bar-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--app-accent), var(--app-accent-orb));
}
.analytics-module-foot {
display: flex;
justify-content: space-between;
gap: 0.75rem;
align-items: center;
margin-top: 0.9rem;
flex-wrap: wrap;
}
@media screen and (max-width: 768px) {
.productivity-hero {
padding: 1.5rem;
}
.productivity-progress-meta,
.productivity-breakdown-item {
display: block;
}
.productivity-breakdown-meta {
margin-top: 0.35rem;
}
.analytics-module-foot {
align-items: flex-start;
}
}
.dev-log-shell {
min-height: 28rem;
}
.dev-log-meta {
overflow-wrap: anywhere;
word-break: break-word;
}
.dev-log-output {
margin: 0;
padding: 1rem;
max-height: 70vh;
overflow: auto;
border-radius: 18px;
border: 1px solid var(--app-line);
background: var(--app-editor-background);
color: var(--app-text-soft);
font-size: 0.88rem;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
.store-user-list {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
align-items: flex-start;
}
.store-user-chip-set {
display: inline-flex;
gap: 0.45rem;
flex-wrap: wrap;
align-items: center;
max-width: 100%;
}
.store-user-chip {
flex-wrap: wrap;
}
.store-developer-inline {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-left: 0.15rem;
padding-left: 0.6rem;
border-left: 1px solid var(--app-line);
color: var(--app-text);
}
.store-user-chip:has(.store-developer-inline) {
background: rgba(72, 199, 142, 0.12);
color: var(--app-text);
}
.store-user-admin-form {
margin: 0;
}
.store-access-list {
display: grid;
gap: 0.9rem;
}
.store-access-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
border: 1px solid var(--app-line);
border-radius: 18px;
background: var(--app-white-03);
}
.store-access-toggle,
.store-access-form {
display: grid;
gap: 0.75rem;
}
.store-access-admin-chip {
border-color: rgba(79, 127, 210, 0.28);
background: rgba(79, 127, 210, 0.12);
color: #d9e5ff;
}
.store-access-multi-chip {
border-color: rgba(67, 150, 92, 0.26);
background: rgba(67, 150, 92, 0.13);
color: #bfe7c8;
}
.checklist-action-form {
display: inline-flex;
margin: 0;
}
.checklist-action-link {
border: 0;
padding: 0;
background: transparent;
cursor: pointer;
}