:root {
  --ink: #102c2b;
  --ink-soft: #385351;
  --paper: #f4f1e9;
  --card: #fffdf8;
  --accent: #ff6b35;
  --accent-soft: #fff1e8;
  --accent-contrast: #ffffff;
  --mint: #a8d5ba;
  --line: #dcd9cf;
  --clock-bg: #102c2b;
  --brand-bg: #102c2b;
  --brand-fg: #ffffff;
  --input-bg: #ffffff;
  --weekend-bg: #edf2f3;
  --weekend-line: #bed0d2;
  --holiday-bg: #f6f1e4;
  --holiday-line: #cdbd8d;
  --holiday-accent: #e2ca84;
  --holiday-accent-deep: #9b8242;
  --holiday-ink: #4f4529;
  --shadow: 0 18px 50px rgba(16, 44, 43, .10);
}
:root[data-palette="ocean"] { --accent: #287fd1; --accent-soft: #e8f3ff; --mint: #82c8d8; }
:root[data-palette="forest"] { --accent: #2d8a58; --accent-soft: #e8f6ed; --mint: #96d0a8; }
:root[data-palette="berry"] { --accent: #8a55c5; --accent-soft: #f3eafe; --mint: #c3a6dc; }
:root[data-palette="stone"] {
  --ink: #434a42;
  --ink-soft: #626c66;
  --paper: #e1ca96;
  --card: #f1e4c4;
  --accent: #626c66;
  --accent-soft: #aca885;
  --accent-contrast: #ffffff;
  --mint: #aca885;
  --line: #918b76;
  --clock-bg: #434a42;
  --brand-bg: #434a42;
  --brand-fg: #ffffff;
  --input-bg: #f7edd6;
  --weekend-bg: #d8ca9f;
  --weekend-line: #918b76;
  --holiday-bg: #ead6a8;
  --holiday-line: #918b76;
}
:root[data-palette="meadow"] {
  --ink: #3d4b31;
  --ink-soft: #718355;
  --paper: #e9f5db;
  --card: #f8fbf2;
  --accent: #718355;
  --accent-soft: #cfe1b9;
  --accent-contrast: #ffffff;
  --mint: #b5c99a;
  --line: #cfe1b9;
  --clock-bg: #46593a;
  --brand-bg: #718355;
  --brand-fg: #ffffff;
  --input-bg: #ffffff;
  --weekend-bg: #dceacd;
  --weekend-line: #97a97c;
  --holiday-bg: #edf2d7;
  --holiday-line: #87986a;
}
:root[data-palette="harvest"] {
  --ink: #283618;
  --ink-soft: #606c38;
  --paper: #fefae0;
  --card: #fffdf2;
  --accent: #bc6c25;
  --accent-soft: #f2d2aa;
  --accent-contrast: #ffffff;
  --mint: #606c38;
  --line: #dda15e;
  --clock-bg: #283618;
  --brand-bg: #283618;
  --brand-fg: #fefae0;
  --input-bg: #fffef7;
  --weekend-bg: #f3e5c0;
  --weekend-line: #dda15e;
  --holiday-bg: #f7d6ad;
  --holiday-line: #bc6c25;
}
:root[data-palette="woodland"] {
  --ink: #333d29;
  --ink-soft: #656d4a;
  --paper: #c2c5aa;
  --card: #e7e3d5;
  --accent: #7f4f24;
  --accent-soft: #b6ad90;
  --accent-contrast: #ffffff;
  --mint: #a4ac86;
  --line: #a68a64;
  --clock-bg: #333d29;
  --brand-bg: #333d29;
  --brand-fg: #f2eddf;
  --input-bg: #f1ecdf;
  --weekend-bg: #d4d7bd;
  --weekend-line: #a4ac86;
  --holiday-bg: #dbc4aa;
  --holiday-line: #936639;
}
:root[data-mode="dark"] {
  --ink: #eef4f2;
  --ink-soft: #a9b8b4;
  --paper: #080b0b;
  --card: #111716;
  --line: #28312f;
  --clock-bg: #13201e;
  --brand-bg: #edf4f2;
  --brand-fg: #10201e;
  --input-bg: #0c1110;
  --weekend-bg: #101b20;
  --weekend-line: #254653;
  --holiday-bg: #302817;
  --holiday-line: #b68b32;
  --accent-contrast: #ffffff;
  --shadow: 0 18px 50px rgba(0, 0, 0, .38);
}
:root[data-mode="dark"][data-palette="stone"] {
  --ink: #f1e5c5;
  --ink-soft: #bdb9a3;
  --paper: #171b17;
  --card: #242a24;
  --accent: #e1ca96;
  --accent-soft: #4a493c;
  --accent-contrast: #333a34;
  --mint: #aca885;
  --line: #4d564e;
  --clock-bg: #303731;
  --brand-bg: #e1ca96;
  --brand-fg: #434a42;
  --input-bg: #1e231f;
  --weekend-bg: #2e352f;
  --weekend-line: #626c66;
  --holiday-bg: #383326;
  --holiday-line: #918b76;
}
:root[data-mode="dark"][data-palette="meadow"] {
  --ink: #edf6e4;
  --ink-soft: #b5c99a;
  --paper: #0f150c;
  --card: #182014;
  --accent: #b5c99a;
  --accent-soft: #35442c;
  --accent-contrast: #26331e;
  --mint: #97a97c;
  --line: #35442c;
  --clock-bg: #24311d;
  --brand-bg: #b5c99a;
  --brand-fg: #28351f;
  --input-bg: #121a0f;
  --weekend-bg: #202b1b;
  --weekend-line: #718355;
  --holiday-bg: #29301c;
  --holiday-line: #87986a;
}
:root[data-mode="dark"][data-palette="harvest"] {
  --ink: #fefae0;
  --ink-soft: #c8c89d;
  --paper: #0e1309;
  --card: #17200e;
  --accent: #dda15e;
  --accent-soft: #4c351d;
  --accent-contrast: #283618;
  --mint: #606c38;
  --line: #465229;
  --clock-bg: #283618;
  --brand-bg: #dda15e;
  --brand-fg: #283618;
  --input-bg: #11180c;
  --weekend-bg: #202b14;
  --weekend-line: #606c38;
  --holiday-bg: #352513;
  --holiday-line: #bc6c25;
}
:root[data-mode="dark"][data-palette="woodland"] {
  --ink: #eee8d8;
  --ink-soft: #b6ad90;
  --paper: #11150d;
  --card: #1d2318;
  --accent: #a68a64;
  --accent-soft: #463725;
  --accent-contrast: #261a10;
  --mint: #a4ac86;
  --line: #414833;
  --clock-bg: #333d29;
  --brand-bg: #b6ad90;
  --brand-fg: #333d29;
  --input-bg: #161b12;
  --weekend-bg: #252c1f;
  --weekend-line: #656d4a;
  --holiday-bg: #35271b;
  --holiday-line: #936639;
}

/* Active palette system: neutral surfaces, restrained color accents. */
:root,
:root[data-palette="coast"] {
  --ink: #172426;
  --ink-soft: #566568;
  --paper: #f3f5f4;
  --card: #ffffff;
  --accent: #17786f;
  --accent-soft: #e4f1ef;
  --accent-contrast: #ffffff;
  --mint: #6ab187;
  --line: #d9dfde;
  --clock-bg: #17383a;
  --brand-bg: #17786f;
  --brand-fg: #ffffff;
  --brand-logo-a: #20948b;
  --brand-logo-b: #63b8ae;
  --brand-logo-c: #f4cc70;
  --brand-logo-ink: #031817;
  --input-bg: #ffffff;
  --weekend-bg: #edf2f3;
  --weekend-line: #bed0d2;
  --holiday-bg: #fff3cf;
  --holiday-line: #d3a63e;
  --holiday-accent: #f4cc70;
  --holiday-accent-deep: #c99729;
  --holiday-ink: #4f3909;
  --palette-secondary: #f4cc70;
  --palette-tertiary: #f4cc70;
  --palette-quaternary: #6ab187;
  --shadow: 0 18px 50px rgba(20, 43, 44, .10);
}
:root[data-palette="canopy"] {
  --accent: #4d7318;
  --accent-soft: #edf3dc;
  --accent-contrast: #ffffff;
  --mint: #c6d166;
  --clock-bg: #172b12;
  --brand-bg: #0f1b07;
  --brand-fg: #ffffff;
  --palette-secondary: #ffffff;
  --palette-tertiary: #5c821a;
  --palette-quaternary: #c6d166;
}
:root[data-palette="berrynight"] {
  --accent: #40577f;
  --accent-soft: #e9eff9;
  --accent-contrast: #ffffff;
  --mint: #d0e1f9;
  --clock-bg: #1e2430;
  --brand-bg: #283655;
  --brand-fg: #ffffff;
  --palette-secondary: #283655;
  --palette-tertiary: #4d648d;
  --palette-quaternary: #d0e1f9;
}
:root[data-palette="highland"] {
  --accent: #2f657f;
  --accent-soft: #e5eef2;
  --accent-contrast: #ffffff;
  --mint: #90afc5;
  --clock-bg: #273234;
  --brand-bg: #2a3132;
  --brand-fg: #ffffff;
  --palette-secondary: #90afc5;
  --palette-tertiary: #2a3132;
  --palette-quaternary: #763626;
}
:root[data-palette="linengold"] {
  --accent: #725d00;
  --accent-soft: #f7f0d1;
  --accent-contrast: #ffffff;
  --mint: #e1b80d;
  --clock-bg: #4d443b;
  --brand-bg: #6d5f52;
  --brand-fg: #ffffff;
  --palette-secondary: #d5c3aa;
  --palette-tertiary: #867666;
  --palette-quaternary: #e1b80d;
}
:root[data-palette="alpenglow"] {
  --accent: #375e97;
  --accent-soft: #e7edf5;
  --accent-contrast: #ffffff;
  --mint: #ffbb00;
  --clock-bg: #26384f;
  --brand-bg: #375e97;
  --brand-fg: #ffffff;
  --palette-secondary: #fb6542;
  --palette-tertiary: #ffbb00;
  --palette-quaternary: #3f681c;
}

:root[data-mode="dark"],
:root[data-mode="dark"][data-palette="coast"] {
  --ink: #f1f4f3;
  --ink-soft: #aeb8b5;
  --paper: #0b0e0f;
  --card: #151a1b;
  --accent: #6fc6bd;
  --accent-soft: #193b38;
  --accent-contrast: #102b29;
  --mint: #83c49f;
  --line: #2b3334;
  --clock-bg: #142425;
  --brand-bg: #6fc6bd;
  --brand-fg: #102b29;
  --input-bg: #101415;
  --weekend-bg: #101b20;
  --weekend-line: #254653;
  --holiday-bg: #302817;
  --holiday-line: #b68b32;
  --palette-secondary: #f4cc70;
  --palette-tertiary: #f4cc70;
  --palette-quaternary: #6ab187;
  --shadow: 0 18px 50px rgba(0, 0, 0, .38);
}
:root[data-mode="dark"][data-palette="canopy"] {
  --accent: #b6cc5b;
  --accent-soft: #2b3815;
  --accent-contrast: #182007;
  --mint: #c6d166;
  --clock-bg: #172016;
  --brand-bg: #b6cc5b;
  --brand-fg: #182007;
}
:root[data-mode="dark"][data-palette="berrynight"] {
  --accent: #9db4dc;
  --accent-soft: #25324a;
  --accent-contrast: #172035;
  --mint: #d0e1f9;
  --clock-bg: #171b26;
  --brand-bg: #9db4dc;
  --brand-fg: #172035;
}
:root[data-mode="dark"][data-palette="highland"] {
  --accent: #90afc5;
  --accent-soft: #203844;
  --accent-contrast: #17262d;
  --mint: #b5cad8;
  --clock-bg: #192124;
  --brand-bg: #90afc5;
  --brand-fg: #17262d;
}
:root[data-mode="dark"][data-palette="linengold"] {
  --accent: #e1b80d;
  --accent-soft: #3c3212;
  --accent-contrast: #2b2408;
  --mint: #ead36b;
  --clock-bg: #211f1b;
  --brand-bg: #e1b80d;
  --brand-fg: #2b2408;
}
:root[data-mode="dark"][data-palette="alpenglow"] {
  --accent: #7fa2d6;
  --accent-soft: #25344c;
  --accent-contrast: #17233a;
  --mint: #ffbb00;
  --clock-bg: #17202c;
  --brand-bg: #7fa2d6;
  --brand-fg: #17233a;
}

/* Five focused themes. Light and dark modes keep the same color identity. */
:root,
:root[data-palette="coast"] {
  --ink: #202722;
  --ink-soft: #5c665f;
  --paper: #f0f1ed;
  --card: #fafaf7;
  --accent: #17786f;
  --accent-soft: #e4f1ef;
  --accent-contrast: #ffffff;
  --mint: #f4cc70;
  --line: #d6dbd5;
  --clock-bg: #17383a;
  --brand-bg: #17786f;
  --brand-fg: #ffffff;
  --brand-logo-a: #20948b;
  --brand-logo-b: #63b8ae;
  --brand-logo-c: #f4cc70;
  --brand-logo-ink: #031817;
  --input-bg: #f7f8f5;
  --weekend-bg: #edf2f3;
  --weekend-line: #bed0d2;
  --holiday-bg: #fff3cf;
  --holiday-line: #d3a63e;
  --holiday-accent: #f4cc70;
  --holiday-accent-deep: #c99729;
  --holiday-ink: #4f3909;
  --coast-sand: #f4cc70;
  --coast-orange: #f4cc70;
  --coast-sea: #20948b;
  --coast-lagoon: #6ab187;
  --table-head-bg: #235a57;
  --table-head-fg: #ffffff;
  --table-head-line: #4a817c;
  --liquid-a: #20948b;
  --liquid-b: #f4cc70;
  --liquid-c: #17786f;
  --shadow: 0 18px 50px rgba(23, 56, 58, .10);
}
:root[data-palette="nature"] {
  --accent: #46634c;
  --accent-soft: #e5ebe3;
  --accent-contrast: #ffffff;
  --mint: #c2b18c;
  --clock-bg: #28382e;
  --brand-bg: #46634c;
  --brand-fg: #ffffff;
  --brand-logo-a: #35503d;
  --brand-logo-b: #78907d;
  --brand-logo-c: #c2b18c;
  --brand-logo-ink: #ffffff;
  --table-head-bg: #3f5945;
  --table-head-fg: #ffffff;
  --table-head-line: #71806a;
  --liquid-a: #46634c;
  --liquid-b: #c2b18c;
  --liquid-c: #354b3a;
  --holiday-bg: #f0eee7;
  --holiday-line: #b8ad8f;
  --holiday-accent: #cfc4a5;
  --holiday-accent-deep: #766c50;
  --holiday-ink: #403b2a;
}
:root[data-palette="ocean"] {
  --accent: #315f79;
  --accent-soft: #e2ebef;
  --accent-contrast: #ffffff;
  --mint: #8fb4c6;
  --clock-bg: #223743;
  --brand-bg: #315f79;
  --brand-fg: #ffffff;
  --brand-logo-a: #244b63;
  --brand-logo-b: #315f79;
  --brand-logo-c: #8fb4c6;
  --brand-logo-ink: #ffffff;
  --table-head-bg: #315f79;
  --table-head-fg: #ffffff;
  --table-head-line: #648da3;
  --liquid-a: #315f79;
  --liquid-b: #4f819a;
  --liquid-c: #8fb4c6;
  --holiday-bg: #e9edf4;
  --holiday-line: #9cabc2;
  --holiday-accent: #b8c5da;
  --holiday-accent-deep: #5b6e8d;
  --holiday-ink: #2d3c53;
}
:root[data-palette="summer"] {
  --accent: #2d6f9f;
  --accent-soft: #e3eef7;
  --accent-contrast: #ffffff;
  --mint: #ffdb5c;
  --clock-bg: #1d3446;
  --brand-bg: #2d6f9f;
  --brand-fg: #ffffff;
  --brand-logo-a: #4897d8;
  --brand-logo-b: #ffdb5c;
  --brand-logo-c: #e4b83f;
  --brand-logo-ink: #071d2c;
  --table-head-bg: #2b5878;
  --table-head-fg: #ffffff;
  --table-head-line: #78a8cf;
  --liquid-a: #4897d8;
  --liquid-b: #ffdb5c;
  --liquid-c: #2d6f9f;
  --liquid-d: #ffdb5c;
  --holiday-bg: #e8f0f4;
  --holiday-line: #94b5c7;
  --holiday-accent: #b3cede;
  --holiday-accent-deep: #557b90;
  --holiday-ink: #294553;
}
:root[data-palette="desert"] {
  --accent: #8d5538;
  --accent-soft: #f0e5dc;
  --accent-contrast: #ffffff;
  --mint: #c7a873;
  --clock-bg: #3a2d27;
  --brand-bg: #8d5538;
  --brand-fg: #ffffff;
  --brand-logo-a: #d7bd8e;
  --brand-logo-b: #bf8d66;
  --brand-logo-c: #8d5538;
  --brand-logo-ink: #20130d;
  --table-head-bg: #7a492f;
  --table-head-fg: #ffffff;
  --table-head-line: #ae795c;
  --liquid-a: #8d5538;
  --liquid-b: #c7a873;
  --liquid-c: #a46a4e;
  --holiday-bg: #f0e8dd;
  --holiday-line: #c2a67e;
  --holiday-accent: #d6bd92;
  --holiday-accent-deep: #8b6848;
  --holiday-ink: #49351f;
}

:root[data-mode="dark"],
:root[data-mode="dark"][data-palette="coast"] {
  --ink: #eef1ee;
  --ink-soft: #aeb6b0;
  --paper: #0d100f;
  --card: #181b1a;
  --accent: #6fc6bd;
  --accent-soft: #193b38;
  --accent-contrast: #102b29;
  --mint: #f4cc70;
  --line: #2c322e;
  --clock-bg: #142425;
  --brand-bg: #6fc6bd;
  --brand-fg: #102b29;
  --input-bg: #121614;
  --weekend-bg: #101b20;
  --weekend-line: #254653;
  --holiday-bg: #24231e;
  --holiday-line: #756c50;
  --holiday-accent: #c6b273;
  --holiday-accent-deep: #938047;
  --holiday-ink: #2c2819;
  --table-head-bg: #285c59;
  --table-head-fg: #ffffff;
  --table-head-line: #4a817c;
  --shadow: 0 18px 50px rgba(0, 0, 0, .38);
}
:root[data-mode="dark"][data-palette="nature"] {
  --accent: #78907d;
  --accent-soft: #29342c;
  --accent-contrast: #152019;
  --mint: #c2b18c;
  --clock-bg: #19231d;
  --brand-bg: #78907d;
  --brand-fg: #152019;
  --table-head-bg: #3f5945;
  --table-head-fg: #ffffff;
  --table-head-line: #71806a;
  --holiday-bg: #26251f;
  --holiday-line: #6e684f;
  --holiday-accent: #92896a;
  --holiday-accent-deep: #70684b;
  --holiday-ink: #1e1b12;
}
:root[data-mode="dark"][data-palette="ocean"] {
  --accent: #7597aa;
  --accent-soft: #253741;
  --accent-contrast: #142129;
  --mint: #8fb4c6;
  --clock-bg: #16252e;
  --brand-bg: #7597aa;
  --brand-fg: #142129;
  --table-head-bg: #315f79;
  --table-head-fg: #ffffff;
  --table-head-line: #648da3;
  --holiday-bg: #20242d;
  --holiday-line: #53637d;
  --holiday-accent: #7d8fab;
  --holiday-accent-deep: #596b88;
  --holiday-ink: #18222f;
}
:root[data-mode="dark"][data-palette="summer"] {
  --accent: #76b4e5;
  --accent-soft: #23394a;
  --accent-contrast: #152738;
  --mint: #ffdb5c;
  --clock-bg: #152633;
  --brand-bg: #76b4e5;
  --brand-fg: #152738;
  --table-head-bg: #294f6a;
  --table-head-fg: #ffffff;
  --table-head-line: #587f9b;
  --holiday-bg: #20282d;
  --holiday-line: #527486;
  --holiday-accent: #7399ad;
  --holiday-accent-deep: #4d7184;
  --holiday-ink: #17262f;
}
:root[data-mode="dark"][data-palette="desert"] {
  --accent: #bd8062;
  --accent-soft: #3a2b23;
  --accent-contrast: #281d18;
  --mint: #c7a873;
  --clock-bg: #261f1a;
  --brand-bg: #bd8062;
  --brand-fg: #281d18;
  --table-head-bg: #75472f;
  --table-head-fg: #ffffff;
  --table-head-line: #ae795c;
  --holiday-bg: #29231c;
  --holiday-line: #806849;
  --holiday-accent: #aa8c61;
  --holiday-accent-deep: #7e603f;
  --holiday-ink: #21170d;
}
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--paper); color: var(--ink); }
body { margin: 0; min-height: 100vh; }
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; max-width: 1120px; padding: 0 28px; margin: auto; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid color-mix(in srgb, var(--brand-logo-a, var(--brand-bg)) 34%, transparent); border-radius: 12px; color: var(--brand-logo-ink, var(--brand-fg)); background: linear-gradient(135deg, var(--brand-logo-a, var(--brand-bg)) 0%, var(--brand-logo-b, var(--brand-bg)) 66%, var(--brand-logo-c, var(--brand-bg)) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 7px 18px color-mix(in srgb, var(--brand-logo-a, var(--brand-bg)) 20%, transparent); }
.profile { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.desktop-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; margin-right: 28px; }
.desktop-nav a { text-decoration: none; color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.desktop-nav a:hover { color: var(--accent); }
.link-button { border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 8px; }
.theme-toggle { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 18px; }
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.page { width: min(100% - 40px, 1064px); margin: 44px auto 100px; }
.eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--accent); }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(32px, 5vw, 54px); letter-spacing: -.055em; line-height: 1.02; margin-bottom: 10px; }
h2 { letter-spacing: -.03em; }
.muted { color: var(--ink-soft); }
.dashboard-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.status-pill { border: 1px solid var(--line); background: var(--card); padding: 10px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.status-pill.active { background: #dff2e6; border-color: #9fd3b3; color: #174d31; }
.status-pill.paused { background: #ffedc7; border-color: #e8bd68; color: #573800; }
.clock-card { position: relative; isolation: isolate; overflow: hidden; background: var(--clock-bg); color: white; padding: clamp(26px, 5vw, 58px); border-radius: 30px; box-shadow: var(--shadow); }
.clock-card::before, .clock-card::after { content: ""; position: absolute; pointer-events: none; }
.clock-card::before { z-index: 0; inset: -34% -18%; border-radius: 42% 58% 48% 52%; background: radial-gradient(ellipse 58% 30% at 18% 28%, color-mix(in srgb, var(--liquid-a) 76%, transparent) 0 34%, transparent 66%), radial-gradient(ellipse 64% 28% at 75% 34%, color-mix(in srgb, var(--liquid-b) 62%, transparent) 0 30%, transparent 65%), radial-gradient(ellipse 70% 26% at 48% 78%, color-mix(in srgb, var(--liquid-c) 52%, transparent) 0 28%, transparent 65%); filter: blur(22px); opacity: .46; animation: liquid-flow-a 14s ease-in-out infinite alternate; }
.clock-card::after { z-index: 1; inset: -48% -24%; border-radius: 58% 42% 62% 38%; background: conic-gradient(from 118deg at 52% 48%, transparent 0deg 42deg, color-mix(in srgb, var(--liquid-b) 38%, transparent) 76deg, transparent 124deg 188deg, color-mix(in srgb, var(--liquid-a) 48%, transparent) 226deg, color-mix(in srgb, var(--liquid-c) 35%, transparent) 268deg, transparent 320deg 360deg); filter: blur(34px); opacity: .38; animation: liquid-flow-b 18s ease-in-out infinite alternate; }
:root[data-palette="summer"] .clock-card::before { filter: blur(25px); opacity: .44; animation-duration: 19s; animation-timing-function: ease-in-out; will-change: transform; backface-visibility: hidden; }
:root[data-palette="summer"] .clock-card::after { filter: blur(38px); opacity: .34; animation-duration: 25s; animation-timing-function: ease-in-out; will-change: transform; backface-visibility: hidden; }
.clock-card > :not(.second-track) { position: relative; z-index: 3; }
.second-track { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.second-tick { position: absolute; left: var(--tick-x); top: var(--tick-y); width: 3px; height: 11px; border-radius: 999px; background: rgba(255, 255, 255, .42); opacity: .22; transform: translate(-50%, -50%) rotate(var(--tick-angle)) scale(.38); transition: opacity .22s ease, transform .22s cubic-bezier(.2, .9, .3, 1.45), background .22s ease; }
.second-tick.lit { background: #ffffff; opacity: 1; transform: translate(-50%, -50%) rotate(var(--tick-angle)) scale(1); box-shadow: none; }
.second-tick.latest { animation: second-pop .28s cubic-bezier(.2, .9, .25, 1.6); }
@keyframes second-pop {
  0% { opacity: .2; transform: translate(-50%, -50%) rotate(var(--tick-angle)) scale(.15); }
  70% { transform: translate(-50%, -50%) rotate(var(--tick-angle)) scale(1.35); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--tick-angle)) scale(1); }
}
@keyframes liquid-flow-a {
  0% { transform: translate3d(-4%, -2%, 0) rotate(-3deg) scale(1); border-radius: 42% 58% 48% 52%; }
  52% { transform: translate3d(5%, 3%, 0) rotate(4deg) scale(1.08); border-radius: 58% 42% 61% 39%; }
  100% { transform: translate3d(-1%, 7%, 0) rotate(-1deg) scale(1.03); border-radius: 49% 51% 39% 61%; }
}
@keyframes liquid-flow-b {
  0% { transform: translate3d(5%, -5%, 0) rotate(0deg) scale(.96); }
  50% { transform: translate3d(-5%, 4%, 0) rotate(10deg) scale(1.07); }
  100% { transform: translate3d(4%, 7%, 0) rotate(-7deg) scale(1.02); }
}
@keyframes stat-liquid-drift {
  0% { transform: translate3d(-4%, 0, 0) rotate(-3deg) scale(1); border-radius: 42% 58% 62% 38%; }
  55% { transform: translate3d(7%, 7%, 0) rotate(5deg) scale(1.08); border-radius: 60% 40% 43% 57%; }
  100% { transform: translate3d(-1%, 12%, 0) rotate(-1deg) scale(1.03); border-radius: 48% 52% 37% 63%; }
}
@keyframes header-liquid-drift {
  0% { transform: translate3d(-4%, 0, 0) rotate(-1deg) scale(1); }
  50% { transform: translate3d(5%, 5%, 0) rotate(3deg) scale(1.07); }
  100% { transform: translate3d(-1%, -4%, 0) rotate(-2deg) scale(1.03); }
}
@keyframes week-liquid-drift {
  0% { transform: translate3d(-5%, -4%, 0) rotate(-2deg) scale(1); border-radius: 46% 54% 63% 37%; }
  52% { transform: translate3d(6%, 5%, 0) rotate(4deg) scale(1.08); border-radius: 62% 38% 42% 58%; }
  100% { transform: translate3d(-1%, 9%, 0) rotate(-1deg) scale(1.03); border-radius: 51% 49% 36% 64%; }
}
@keyframes holiday-liquid-drift {
  0% { transform: translate3d(-4%, -2%, 0) rotate(-2deg) scale(1); border-radius: 44% 56% 62% 38%; }
  54% { transform: translate3d(7%, 5%, 0) rotate(4deg) scale(1.08); border-radius: 61% 39% 43% 57%; }
  100% { transform: translate3d(-1%, 9%, 0) rotate(-1deg) scale(1.03); border-radius: 49% 51% 36% 64%; }
}
.clock-label { color: #bbcfcd; font-size: 14px; }
.live-clock { font-variant-numeric: tabular-nums; font-size: clamp(52px, 10vw, 96px); font-weight: 760; letter-spacing: -.06em; margin: 18px 0 34px; }
.clock-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.clock-button, .secondary-button, .primary-button { border: 0; border-radius: 16px; padding: 15px 24px; font-weight: 800; cursor: pointer; }
.clock-button { min-width: 170px; background: var(--accent); color: var(--accent-contrast); }
.clock-action-button { min-width: 170px; appearance: none; -webkit-appearance: none; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; font-weight: 800; font-style: normal; line-height: 1.2; letter-spacing: -.01em; text-align: center; text-rendering: optimizeLegibility; }
.clock-button.start { background: #278a55; color: #ffffff; border: 1px solid #55b982; }
.clock-button.start:hover { background: #207548; }
.clock-button.pause { background: #f2bc55; color: #17130b; }
.clock-button.resume { background: var(--mint); color: #102c2b; }
.secondary-button { background: #c93d42; color: #ffffff; border: 1px solid #e36a6e; }
.secondary-button:hover { background: #ad2e33; }
.primary-button { background: var(--accent); color: var(--accent-contrast); width: 100%; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 18px 0 42px; }
.stats-grid.four { grid-template-columns: repeat(4, 1fr); }
.stat-card, .table-card, .narrow-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 24px; }
.stat-card { position: relative; isolation: isolate; overflow: hidden; --stat-liquid: var(--liquid-a); background: linear-gradient(145deg, color-mix(in srgb, var(--card) 92%, #ffffff) 0%, color-mix(in srgb, var(--card) 84%, transparent) 100%); border-color: color-mix(in srgb, var(--stat-liquid) 32%, var(--line)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 12px 28px rgba(15, 25, 21, .07); backdrop-filter: blur(18px) saturate(135%); }
.stat-card::before { content: ""; position: absolute; z-index: 0; width: 150%; height: 125%; left: -28%; top: -67%; border-radius: 42% 58% 62% 38%; background: radial-gradient(ellipse at 28% 50%, color-mix(in srgb, var(--stat-liquid) 58%, transparent) 0 22%, transparent 58%), radial-gradient(ellipse at 76% 54%, color-mix(in srgb, var(--stat-liquid) 24%, transparent) 0 20%, transparent 55%); filter: blur(17px); opacity: .42; animation: stat-liquid-drift 13s ease-in-out infinite alternate; pointer-events: none; }
.stat-card::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 34% 72%, rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(0, 0, 0, .05); pointer-events: none; }
.stat-card > * { position: relative; z-index: 2; }
.stat-card span { display: block; color: var(--ink-soft); font-size: 13px; margin-bottom: 8px; }
.stat-card strong { font-size: 28px; letter-spacing: -.04em; }
.stat-card small { display: block; color: var(--ink-soft); margin-top: 8px; }
.section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.section-title h2 { margin: 0; }
.section-title a { font-size: 14px; color: var(--ink-soft); }
.session-list { display: grid; gap: 1px; background: var(--line); border-radius: 18px; overflow: hidden; border: 1px solid var(--line); }
.session-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; background: var(--card); }
.session-row div { display: grid; gap: 4px; }
.session-row span { color: var(--ink-soft); font-size: 13px; }
.session-row small { color: var(--ink-soft); font-size: 12px; }
.session-row.holiday, .month-card.holiday, .day-card.holiday { position: relative; isolation: isolate; overflow: hidden; background: var(--holiday-bg); border-color: var(--holiday-line); }
.session-row.holiday::before, .month-card.holiday::before, .day-card.holiday::before { content: ""; position: absolute; z-index: 0; inset: -70% -16%; border-radius: 44% 56% 62% 38%; background: radial-gradient(ellipse 46% 34% at 18% 42%, color-mix(in srgb, var(--holiday-accent) 48%, transparent) 0 30%, transparent 67%), radial-gradient(ellipse 42% 30% at 78% 58%, color-mix(in srgb, var(--holiday-accent-deep) 22%, transparent) 0 27%, transparent 64%); filter: blur(20px); opacity: .24; animation: holiday-liquid-drift 16s ease-in-out infinite alternate; pointer-events: none; }
.session-row.holiday > *, .month-card.holiday > *, .day-card.holiday > * { position: relative; z-index: 1; }
.session-value { text-align: right; justify-items: end; }
.session-value a, .row-actions a { color: var(--ink-soft); font-size: 12px; }
.row-actions { display: flex !important; grid-auto-flow: column; gap: 12px !important; }
.user-row { min-width: 0; }
.user-summary { min-width: 0; }
.user-summary span { overflow-wrap: anywhere; }
.user-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.danger-text-link { color: #d84d52 !important; font-weight: 800; }
.current-account-label { align-self: center; font-size: 11px !important; font-weight: 750; }
.empty-state { background: var(--card); margin: 0; padding: 24px; color: var(--ink-soft); }
.login-shell { min-height: calc(100vh - 190px); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 8vw, 110px); align-items: center; }
.login-copy p:last-child { max-width: 520px; color: var(--ink-soft); font-size: 18px; }
.login-card { background: var(--clock-bg); color: white; padding: clamp(28px, 5vw, 46px); border-radius: 28px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.login-card h2 { font-size: 28px; margin-bottom: 18px; }
.login-card label { color: #c7d8d6; font-size: 13px; margin-top: 8px; }
.login-card input, .stacked-form input { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 13px; padding: 14px; background: rgba(255,255,255,.08); color: white; outline: none; }
.login-card input:focus { border-color: var(--mint); }
.login-card .primary-button { margin-top: 16px; }
.form-error, .message.error { color: #ffd2c4; }
.messages { width: min(100% - 40px, 1064px); margin: 0 auto; }
.message { border-radius: 14px; padding: 12px 16px; background: var(--clock-bg); color: white; }
.message.warning { background: #f2a13a; border: 1px solid #ffc46f; color: #17130b; }
.undo-message { position: fixed; z-index: 1000; top: calc(84px + env(safe-area-inset-top, 0px)); left: 50%; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; width: min(calc(100vw - 40px), 720px); padding: 14px 16px 17px; box-shadow: 0 18px 48px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .28); transform: translateX(-50%); transition: opacity .25s ease, transform .25s ease; }
.undo-message.expired { opacity: 0; pointer-events: none; transform: translate(-50%, -7px); }
.undo-message-content { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.undo-dot { font-size: 18px; line-height: 1; }
.undo-message form { margin: 0; }
.undo-message button { white-space: nowrap; padding: 8px 12px; border: 1px solid rgba(23, 19, 11, .38); border-radius: 10px; background: #17130b; color: #ffffff; cursor: pointer; font-size: 12px; font-weight: 850; }
.undo-message button:disabled { cursor: default; opacity: .55; }
.undo-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: #17130b; transform-origin: left center; }
.narrow-card { max-width: 640px; margin: auto; }
.form-card { max-width: 780px; background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 5vw, 42px); }
.stacked-form p { display: grid; gap: 8px; }
.stacked-form input { color: var(--ink); background: var(--input-bg); border-color: var(--line); }
.stacked-form ul { color: var(--ink-soft); font-size: 13px; }
.light-form input, .light-form textarea, .light-form select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); color: var(--ink); font: inherit; }
.light-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.light-form label { font-size: 13px; font-weight: 750; }
.light-form .errorlist { color: #a43c19; padding-left: 18px; }
.form-actions { display: flex; align-items: center; gap: 18px; margin-top: 24px; }
.header-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pending-section { margin-bottom: 24px; }
.password-rules { display: grid; gap: 5px; margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--accent); border-radius: 8px 14px 14px 8px; background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
.password-rules strong { font-size: 13px; }
.password-rules span { color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.primary-button.fit { width: auto; }
.primary-link, .secondary-link { display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; padding: 13px 18px; font-weight: 800; text-decoration: none; }
.primary-link { background: var(--accent); color: var(--accent-contrast); }
.secondary-link { border: 1px solid var(--line); background: var(--card); }
.danger-eyebrow { color: #d84d52; }
.delete-account-card { border-color: color-mix(in srgb, #d84d52 42%, var(--line)); }
.delete-account-summary { display: grid; gap: 22px; }
.delete-account-question { margin: 0; font-size: clamp(18px, 2.3vw, 24px); line-height: 1.35; }
.delete-account-facts { display: grid; gap: 1px; overflow: hidden; margin: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--line); }
.delete-account-facts div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 16px; background: var(--input-bg); }
.delete-account-facts dt { color: var(--ink-soft); font-size: 13px; font-weight: 750; }
.delete-account-facts dd { margin: 0; overflow-wrap: anywhere; font-weight: 800; text-align: right; }
.danger-notice { display: grid; gap: 5px; padding: 15px 17px; border: 1px solid rgba(216, 77, 82, .55); border-radius: 14px; background: color-mix(in srgb, #d84d52 12%, var(--card)); color: var(--ink); }
.danger-notice strong { color: #d84d52; }
.danger-notice span { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.danger-button { border: 1px solid #ed7377; border-radius: 14px; padding: 13px 18px; background: #c93d42; color: #ffffff; cursor: pointer; font: inherit; font-weight: 850; }
.danger-button:hover { background: #ad2e33; }
.page-back { display: flex; margin: 0 0 18px; }
.page-back.narrow-back { max-width: 640px; margin-right: auto; margin-left: auto; }
.back-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); font-size: 13px; font-weight: 800; text-decoration: none; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.back-link:hover { transform: translateX(-2px); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent) 7%, var(--card)); color: var(--ink); }
.back-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 3px; }
.notice { border-left: 4px solid var(--accent); background: var(--accent-soft); padding: 14px 16px; border-radius: 8px 14px 14px 8px; }
.month-grid, .settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.month-card, .settings-card { min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 24px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.month-card:hover, .settings-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.month-card span, .settings-card span { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.month-card strong, .settings-card strong { font-size: 25px; letter-spacing: -.035em; }
.month-card small, .settings-card p { color: var(--ink-soft); margin: 0; }
.system-status-card { cursor: default; }
.system-status-card:hover { transform: none; }
.status-link { align-self: flex-start; color: var(--accent); font-size: 12px; font-weight: 850; }
.help-head { margin-bottom: 24px; }
.help-accordion-list { display: grid; gap: 16px; }
.help-accordion { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.help-accordion[open] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--card); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.24); }
.help-accordion > summary { display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 16px; align-items: center; min-height: 92px; padding: 20px 24px; list-style: none; cursor: pointer; user-select: none; }
.help-accordion > summary::-webkit-details-marker { display: none; }
.help-accordion > summary:hover { background: color-mix(in srgb, var(--accent-soft) 42%, transparent); }
.help-accordion-index { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: var(--accent); color: var(--accent-contrast); font-size: 13px; font-weight: 900; }
.help-accordion-copy { display: grid; gap: 5px; }
.help-accordion-copy strong { color: var(--ink); font-size: 19px; line-height: 1.2; }
.help-accordion-copy small { color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.help-accordion-toggle { position: relative; display: block; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); transition: background .24s ease, border-color .24s ease, color .24s ease; }
.help-accordion-toggle::before, .help-accordion-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 999px; background: currentColor; transform-origin: center; transition: transform .28s ease; }
.help-accordion-toggle::before { transform: translate(-50%, -50%) rotate(0deg); }
.help-accordion-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.help-accordion[open] .help-accordion-toggle { border-color: transparent; background: var(--accent); color: var(--accent-contrast); }
.help-accordion[open] .help-accordion-toggle::before, .help-accordion[open] .help-accordion-toggle::after { transform: translate(-50%, -50%) rotate(180deg); }
.help-accordion-content { padding: 30px 32px 34px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 72%, transparent); }
.help-section-head { margin-bottom: 24px; }
.help-section-head .eyebrow { margin-bottom: 7px; }
.help-section-head h2 { margin: 0 0 8px; font-size: 27px; }
.help-section-head > p:last-child { margin-bottom: 0; }
.help-topic-list { display: grid; gap: 3px; }
.help-topic-list article { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.help-topic-list article:first-child { border-top: 0; padding-top: 0; }
.help-topic-list article > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 900; }
.help-topic-list h3 { margin: 1px 0 6px; font-size: 16px; }
.help-topic-list p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.help-request-form { display: grid; gap: 17px; max-width: 760px; }
.help-form-field { display: grid; gap: 8px; }
.help-form-field small { color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.help-form-field textarea { resize: vertical; min-height: 170px; }
.day-list { display: grid; gap: 14px; }
.day-card { border: 1px solid var(--line); background: var(--card); border-radius: 20px; padding: 20px; }
.day-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.day-head > div { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.holiday-badge { display: inline-flex; border-radius: 999px; padding: 5px 9px; background: var(--holiday-accent); color: var(--holiday-ink); border: 1px solid var(--holiday-line); font-size: 11px; font-weight: 900; }
.day-session { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; font-size: 14px; }
.day-session a { color: var(--ink-soft); font-size: 12px; }
.holiday-empty { color: var(--ink-soft); margin: 14px 0 0; font-size: 13px; }
.current-month-section { margin-top: 6px; }
.month-title { align-items: end; margin-bottom: 16px; }
.month-title .eyebrow { margin-bottom: 6px; }
.month-title h2 { margin: 0; font-size: 30px; }
.month-title > a { font-weight: 800; }
.month-day-table { display: grid; gap: 0; overflow: visible; border: 0; border-radius: 22px; background: transparent; box-shadow: none; }
.month-table-head { position: relative; isolation: isolate; display: grid; grid-template-columns: 190px minmax(0, 1fr) 118px; gap: 18px; overflow: hidden; margin-bottom: 11px; padding: 17px 18px; background: color-mix(in srgb, var(--table-head-bg) 88%, transparent); color: var(--table-head-fg); border: 1px solid var(--table-head-line); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -12px 24px rgba(0, 0, 0, .08), 0 10px 24px rgba(15, 25, 21, .10); backdrop-filter: blur(18px) saturate(140%); font-size: 12px; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }
.month-table-head::before { content: ""; position: absolute; z-index: 0; inset: -120% -12%; border-radius: 45% 55% 62% 38%; background: radial-gradient(ellipse 44% 28% at 18% 50%, color-mix(in srgb, var(--liquid-a) 78%, transparent) 0 32%, transparent 66%), radial-gradient(ellipse 50% 28% at 58% 47%, color-mix(in srgb, var(--liquid-b) 56%, transparent) 0 28%, transparent 64%), radial-gradient(ellipse 42% 26% at 88% 52%, color-mix(in srgb, var(--liquid-c) 48%, transparent) 0 27%, transparent 62%); filter: blur(18px); opacity: .52; animation: header-liquid-drift 13s ease-in-out infinite alternate; pointer-events: none; }
:root[data-palette="summer"] .month-table-head::before { opacity: .44; animation-duration: 18s; animation-timing-function: ease-in-out; will-change: transform; backface-visibility: hidden; }
.month-table-head::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient(155deg, rgba(255, 255, 255, .20), transparent 35% 74%, rgba(255, 255, 255, .06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36); pointer-events: none; }
.month-table-head > span { position: relative; z-index: 2; }
.month-table-head span:last-child { text-align: right; }
.month-weeks { display: grid; gap: 15px; }
.month-week-card { position: relative; isolation: isolate; overflow: hidden; --week-liquid: var(--liquid-a); border: 1px solid color-mix(in srgb, var(--week-liquid) 32%, var(--line)); border-radius: 20px; background: color-mix(in srgb, var(--card) 91%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 12px 28px rgba(15, 25, 21, .08); backdrop-filter: blur(16px) saturate(130%); }
.month-week-card::before { content: ""; position: absolute; z-index: 0; inset: -58% -16%; border-radius: 46% 54% 63% 37%; background: radial-gradient(ellipse 42% 34% at 14% 42%, color-mix(in srgb, var(--week-liquid) 28%, transparent) 0 30%, transparent 68%), radial-gradient(ellipse 45% 32% at 70% 58%, color-mix(in srgb, var(--week-liquid) 16%, transparent) 0 28%, transparent 65%), radial-gradient(ellipse 34% 30% at 94% 24%, color-mix(in srgb, var(--week-liquid) 10%, transparent) 0 27%, transparent 64%); filter: blur(22px); opacity: .46; animation: week-liquid-drift 17s ease-in-out infinite alternate; pointer-events: none; }
.month-week-card::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; background: linear-gradient(150deg, rgba(255, 255, 255, .17), transparent 30% 76%, rgba(255, 255, 255, .05)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); pointer-events: none; }
.month-week-card > * { position: relative; z-index: 2; }
.month-week-divider { display: flex; align-items: center; min-height: 42px; padding: 7px 18px; background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.month-week-divider strong { position: relative; display: inline-flex; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.month-week-days { display: grid; }
.month-day-row { position: relative; display: grid; grid-template-columns: 190px minmax(0, 1fr) 118px; gap: 18px; align-items: center; min-height: 76px; padding: 13px 18px; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, transparent); }
.month-week-days .month-day-row:last-child { border-radius: 0 0 19px 19px; }
.month-day-row.weekend { background: var(--weekend-bg); }
.month-day-row.holiday { isolation: isolate; overflow: hidden; background: var(--holiday-bg); box-shadow: inset 0 1px 0 var(--holiday-line), inset 0 -1px 0 var(--holiday-line); }
.month-day-row.holiday::after { content: ""; position: absolute; z-index: 0; inset: -95% -15%; border-radius: 48% 52% 60% 40%; background: radial-gradient(ellipse 42% 32% at 14% 42%, color-mix(in srgb, var(--holiday-accent) 48%, transparent) 0 30%, transparent 66%), radial-gradient(ellipse 48% 31% at 72% 58%, color-mix(in srgb, var(--holiday-accent-deep) 20%, transparent) 0 27%, transparent 64%), radial-gradient(ellipse 30% 27% at 96% 24%, color-mix(in srgb, #ffffff 12%, transparent) 0 24%, transparent 60%); filter: blur(20px); opacity: .23; animation: holiday-liquid-drift 16s ease-in-out infinite alternate; pointer-events: none; }
.month-day-row.holiday > * { position: relative; z-index: 1; }
.month-day-row.holiday.future { opacity: .92; }
.month-day-row.today { z-index: 3; margin: 4px 7px; border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--card)); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 9%, transparent); }
.month-week-days .month-day-row.today { border-radius: 14px; }
.month-day-row.future { opacity: .62; }
.month-day-date { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: baseline; }
.month-day-date > strong { font-size: 17px; }
.month-day-date > span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.day-kind { grid-column: 1 / -1; margin-top: 6px; font-size: 11px; font-weight: 800; }
.weekend-label { color: #48717c; }
.holiday-label { display: inline-flex; width: max-content; max-width: 100%; padding: 4px 8px; border: 1px solid var(--holiday-line); border-radius: 999px; background: var(--holiday-accent); color: var(--holiday-ink); font-weight: 900; white-space: nowrap; }
:root[data-mode="dark"] .weekend-label { color: #83b5c2; }
:root[data-mode="dark"] .holiday-badge, :root[data-mode="dark"] .holiday-label { border-color: var(--holiday-line); background: var(--holiday-accent); color: var(--holiday-ink); }
.month-day-entries { min-width: 0; display: grid; }
.month-session { display: grid; grid-template-columns: repeat(4, minmax(88px, 1fr)) 80px; gap: 12px; align-items: center; padding: 9px 0; }
.month-session + .month-session { border-top: 1px dashed var(--line); }
.time-fact { min-width: 0; display: grid; gap: 2px; }
.time-fact span { color: var(--ink-soft); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }
.time-fact strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.time-fact small { color: var(--ink-soft); font-size: 10px; line-height: 1.25; }
.clock-in-fact > span, .clock-in-fact > strong { color: #207548; }
.clock-out-fact > span, .clock-out-fact > strong { color: #bd3237; }
.pause-fact > span, .pause-fact > strong { color: #9a6000; }
.active-session .clock-out-fact > span, .active-session .clock-out-fact > strong { color: #207548; }
:root[data-mode="dark"] .clock-in-fact > span, :root[data-mode="dark"] .clock-in-fact > strong { color: #62c991; }
:root[data-mode="dark"] .clock-out-fact > span, :root[data-mode="dark"] .clock-out-fact > strong { color: #f0787c; }
:root[data-mode="dark"] .pause-fact > span, :root[data-mode="dark"] .pause-fact > strong { color: #f2bc55; }
:root[data-mode="dark"] .active-session .clock-out-fact > span, :root[data-mode="dark"] .active-session .clock-out-fact > strong { color: #62c991; }
.pause-fact strong { font-size: 12px; }
.edit-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink); text-decoration: none; font-size: 20px; }
.edit-icon:hover { border-color: var(--accent); color: var(--accent); }
.edit-icon.disabled { opacity: .35; cursor: not-allowed; }
.entry-actions { display: flex; gap: 7px; align-items: center; justify-content: flex-end; }
.entry-actions form { margin: 0; }
.delete-form { position: relative; z-index: 4; width: 36px; height: 36px; }
.delete-icon { position: absolute; inset: 0; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #a94c4f; border-radius: 11px; background: transparent; color: #c94c50; cursor: pointer; font-size: 24px; line-height: 1; transition: opacity .14s ease, transform .2s ease, background .18s ease; }
.delete-icon:hover { background: #c93d42; border-color: #c93d42; color: #ffffff; }
.delete-confirm { position: absolute; right: -4px; bottom: calc(100% + 11px); display: flex; align-items: center; gap: 8px; width: 222px; min-height: 46px; padding: 7px 8px 7px 12px; visibility: hidden; opacity: 0; border: 1px solid #ff777c; border-radius: 12px; background: #b92f35; box-shadow: 0 12px 30px rgba(95, 13, 17, .42); transform: translateY(7px) scale(.88); transform-origin: calc(100% - 18px) bottom; transition: opacity .16s ease, transform .22s cubic-bezier(.2, .85, .25, 1), visibility 0s linear .22s; }
.delete-confirm::after { content: ""; position: absolute; right: 14px; bottom: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #b92f35; }
.delete-confirm strong { min-width: 102px; color: #ffffff; font-size: 11px; white-space: nowrap; }
.delete-confirm button { min-width: 37px; height: 29px; padding: 0 9px; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 900; }
.delete-yes { border: 2px solid #ffffff; background: #ffffff; color: #9f252a; }
.delete-no { border: 2px solid rgba(255,255,255,.88); background: #8f2227; color: #ffffff; }
.delete-yes:hover { background: #ffe9ea; }
.delete-no:hover { background: #6f171b; }
.delete-form.confirming { z-index: 20; }
.delete-form.confirming .delete-icon { background: #c93d42; border-color: #ff777c; color: #ffffff; transform: scale(1.04); }
.delete-form.confirming .delete-confirm { visibility: visible; opacity: 1; transform: translateY(0) scale(1); transition: opacity .16s ease, transform .22s cubic-bezier(.2, .85, .25, 1); }
.no-entry { color: var(--ink-soft); font-size: 13px; }
.month-day-total { display: grid; gap: 7px; text-align: right; justify-items: end; }
.month-day-total strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.add-entry-link { color: var(--ink-soft); font-size: 11px; }
.appearance-card { display: grid; gap: 26px; }
.appearance-field { display: grid; gap: 9px; }
.appearance-field label { font-size: 13px; font-weight: 800; }
.appearance-field select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); color: var(--ink); }
.appearance-description { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.appearance-note { margin: -6px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 12px; line-height: 1.5; }
.archive-head { align-items: end; }
.year-picker { display: grid; gap: 7px; min-width: 180px; }
.year-picker label { color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.year-picker select { width: 100%; padding: 12px 42px 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--input-bg); color: var(--ink); font-weight: 800; }
.month-state-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: -8px 0 20px; }
.month-state-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 750; }
.month-state-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.month-state-legend .current::before { background: var(--accent); }
.month-state-legend .future::before { background: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.year-month { min-height: 380px; justify-content: flex-start; }
.year-month.past { background: color-mix(in srgb, var(--card) 90%, var(--paper)); }
.year-month.current { position: relative; isolation: isolate; background: color-mix(in srgb, var(--accent) 5%, var(--card)); border-color: var(--accent); box-shadow: 0 12px 34px color-mix(in srgb, var(--accent) 16%, transparent); }
.year-month.current::before { content: ""; position: absolute; z-index: 2; inset: -2px; padding: 3px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--comet-angle), transparent 0deg 270deg, color-mix(in srgb, var(--accent) 12%, transparent) 292deg, color-mix(in srgb, var(--accent) 62%, transparent) 330deg, var(--accent) 349deg, #ffffff 356deg, transparent 360deg); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 75%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: month-comet 3.8s linear infinite; }
.year-month.future { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); }
.year-month.holiday-work { box-shadow: inset 0 4px 0 var(--holiday-line); }
.year-month.current.holiday-work { box-shadow: inset 0 4px 0 var(--holiday-line), 0 12px 34px color-mix(in srgb, var(--accent) 16%, transparent); }
.month-card-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.month-card-head > span { color: var(--ink); font-size: clamp(20px, 2vw, 24px); font-weight: 900; letter-spacing: -.035em; text-transform: none; }
.month-card-head small { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: 9px; font-weight: 850; }
.year-month.current .month-card-head small { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.year-month.future .month-card-head small { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--ink); }
.year-month > strong { font-size: 22px; margin-top: 5px; }
.month-work-summary { width: 100%; display: grid; gap: 7px; margin: 4px 0 10px; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--card) 76%, transparent); }
.month-work-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.month-work-summary dt { color: var(--ink-soft); font-size: 11px; line-height: 1.3; }
.month-work-summary dd { min-width: 20px; margin: 0; color: var(--ink); font-size: 13px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.month-work-summary .holiday-work-count dt, .month-work-summary .holiday-work-count dd { color: color-mix(in srgb, var(--holiday-accent-deep) 78%, var(--ink)); }
:root[data-mode="dark"] .month-work-summary .holiday-work-count dt, :root[data-mode="dark"] .month-work-summary .holiday-work-count dd { color: var(--holiday-accent); }
.month-holidays { width: 100%; display: grid; gap: 5px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.month-holidays b { margin-bottom: 2px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.month-holidays small { display: grid; grid-template-columns: 42px 1fr; gap: 6px; color: var(--ink-soft); font-size: 11px; line-height: 1.35; }
.month-holidays time { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 800; }
.current-comet { position: absolute !important; z-index: 6 !important; inset: -2px; padding: 3px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--comet-angle), transparent 0deg 270deg, color-mix(in srgb, var(--accent) 12%, transparent) 292deg, color-mix(in srgb, var(--accent) 62%, transparent) 330deg, var(--accent) 349deg, #ffffff 356deg, transparent 360deg); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 75%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: month-comet 3.8s linear infinite; }
@property --comet-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes month-comet { to { --comet-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .year-month.current::before { animation: none; background: var(--accent); filter: none; }
  .current-comet { animation: none; background: var(--accent); filter: none; }
  .clock-card::before, .clock-card::after, .stat-card::before, .month-table-head::before, .month-week-card::before, .month-day-row.holiday::after, .session-row.holiday::before, .month-card.holiday::before, .day-card.holiday::before { animation: none; }
  .second-tick { transition: none; }
  .second-tick.latest { animation: none; }
}
.bottom-nav { display: none; }
@media (max-width: 720px) {
  .topbar { padding: 0 20px; }
  .profile > span, .desktop-nav { display: none; }
  .page { width: min(100% - 28px, 1064px); margin-top: 24px; }
  .dashboard-head { align-items: flex-start; flex-direction: column; }
  .archive-head .year-picker { width: 100%; }
  .undo-message { top: calc(76px + env(safe-area-inset-top, 0px)); align-items: flex-start; flex-direction: column; gap: 10px; width: min(calc(100vw - 28px), 720px); }
  .clock-card { border-radius: 24px; }
  .stats-grid, .stats-grid.four, .login-shell, .month-grid, .settings-grid { grid-template-columns: 1fr; }
  .help-accordion > summary { grid-template-columns: 42px minmax(0, 1fr) 34px; gap: 11px; min-height: 82px; padding: 17px 16px; }
  .help-accordion-index { width: 42px; height: 42px; border-radius: 13px; }
  .help-accordion-copy strong { font-size: 16px; }
  .help-accordion-copy small { font-size: 11px; }
  .help-accordion-toggle { width: 34px; height: 34px; border-radius: 11px; }
  .help-accordion-content { padding: 24px 18px 26px; }
  .login-shell { align-content: start; }
  .login-copy { padding-top: 30px; }
  .clock-actions > * { flex: 1; }
  .session-row { align-items: flex-start; }
  .user-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .user-actions { display: grid !important; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; width: 100%; }
  .user-actions a, .user-actions .current-account-label { min-width: 0; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 9px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--input-bg) 82%, var(--card)); text-align: center; text-decoration: none; line-height: 1.2; }
  .user-actions .danger-text-link { border-color: color-mix(in srgb, #d84d52 54%, var(--line)); background: color-mix(in srgb, #d84d52 8%, var(--card)); }
  .day-session { grid-template-columns: 1fr auto; }
  .day-session a { grid-column: 1 / -1; }
  .month-day-table { border-radius: 18px; }
  .month-table-head { display: none; }
  .month-weeks { gap: 12px; }
  .month-week-card { border-radius: 18px; }
  .month-week-divider { min-height: 48px; padding-inline: 14px; }
  .month-day-row { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 13px 12px; }
  .month-day-date { align-self: start; grid-template-columns: 1fr; gap: 2px; }
  .day-kind { grid-column: auto; line-height: 1.25; }
  .month-day-row.has-sessions { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .has-sessions .month-day-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; padding: 0 2px; }
  .has-sessions .month-day-date > strong { font-size: 19px; }
  .has-sessions .month-day-date > span { font-size: 16px; }
  .has-sessions .day-kind { flex-basis: 100%; width: max-content; }
  .has-sessions .month-day-entries, .has-sessions .month-day-total { grid-column: 1; }
  .month-session { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding: 15px; border: 1px solid color-mix(in srgb, var(--line) 86%, transparent); border-radius: 15px; background: color-mix(in srgb, var(--card) 76%, transparent); }
  .month-session + .month-session { margin-top: 10px; border-top: 1px solid color-mix(in srgb, var(--line) 86%, transparent); }
  .time-fact { gap: 4px; }
  .time-fact span { font-size: 9px; letter-spacing: .025em; white-space: nowrap; }
  .time-fact strong { font-size: 15px; line-height: 1.2; }
  .time-fact small { font-size: 11px; line-height: 1.35; }
  .pause-fact, .total-fact { grid-column: auto; }
  .pause-fact strong { font-size: 14px; }
  .entry-actions { grid-column: 1 / -1; grid-row: auto; flex-direction: row; justify-content: flex-end; padding-top: 2px; }
  .edit-icon, .delete-form, .delete-icon { width: 42px; height: 42px; }
  .has-sessions .month-day-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 2px 0; border-top: 1px solid var(--line); text-align: left; }
  .empty-day { grid-template-columns: 76px minmax(0, 1fr); min-height: 96px; }
  .empty-day .month-day-date { grid-row: 1 / 3; }
  .empty-day .month-day-entries { grid-column: 2; align-self: end; }
  .empty-day .month-day-total { grid-column: 2; display: flex; justify-content: flex-start; align-items: start; padding: 0; text-align: left; }
  .empty-day .month-day-total strong { display: none; }
  .empty-day .add-entry-link { font-size: 12px; }
  .month-day-row.holiday { grid-template-columns: 1fr; }
  .month-day-row.holiday .month-day-date, .month-day-row.holiday .month-day-entries, .month-day-row.holiday .month-day-total { grid-column: 1; }
  .month-day-row.holiday .month-day-date { grid-template-columns: auto 1fr; }
  .month-day-row.holiday .holiday-label { white-space: normal; }
  .month-day-row.holiday .month-day-total { padding-left: 0; }
  .month-day-row.holiday.empty-day .month-day-date { grid-row: auto; }
  .month-day-row.holiday.empty-day .month-day-entries { align-self: auto; }
  .dashboard-head .primary-link, .dashboard-head .secondary-link { width: 100%; }
  .header-actions { width: 100%; }
  .bottom-nav { position: fixed; display: flex; z-index: 10; left: 14px; right: 14px; bottom: 12px; justify-content: space-around; padding: 13px; border-radius: 18px; background: rgba(16,44,43,.96); color: white; box-shadow: var(--shadow); }
  .bottom-nav a { text-decoration: none; font-size: 13px; font-weight: 700; }
}

.optional-label { color: var(--muted); font-size: .78em; font-weight: 600; }
.security-card, .privacy-card { max-width: 780px; }
.success-notice, .secret-code {
  display: grid; gap: .35rem; margin-bottom: 1.4rem; padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--mint) 55%, var(--line));
  border-radius: 16px; background: color-mix(in srgb, var(--mint) 14%, var(--card));
}
.secret-code code, .technical-details code { overflow-wrap: anywhere; font-size: .92rem; }
.setup-steps { display: grid; gap: .65rem; padding-left: 1.4rem; }
.technical-details { margin: 0 0 1.4rem; color: var(--muted); }
.privacy-card h2:not(:first-child) { margin-top: 1.7rem; }
.danger-outline-button { border-color: #d94c55; color: #d94c55; cursor: pointer; }
.compliance-notice, .day-pause-warning {
  border: 1px solid color-mix(in srgb, #e0a228 55%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, #e0a228 12%, var(--card));
  color: var(--ink);
}
.compliance-notice { display: flex; gap: .7rem; margin: -6px 0 18px; padding: .85rem 1rem; }
.day-pause-warning { grid-column: 1 / -1; margin: 0 1rem 1rem; padding: .6rem .8rem; font-size: .78rem; }
.month-balance-line { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-soft); font-size: .82rem; }
.schedule-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .7fr); gap: 1.2rem; align-items: start; }
.schedule-form { max-width: none; }
.schedule-basics { display: grid; gap: 1.2rem; margin-bottom: 1.4rem; }
.schedule-valid-from { display: grid; gap: .45rem; }
.schedule-valid-from input { max-width: 260px; }
.schedule-valid-from small, .schedule-editor header p { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.5; }
.schedule-mode-picker { margin: 0; padding: 0; border: 0; }
.schedule-mode-picker legend { margin-bottom: .55rem; font-size: .82rem; font-weight: 850; }
.schedule-mode-picker ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; padding: 0; list-style: none; }
.schedule-mode-picker label { display: flex; align-items: center; gap: .65rem; min-height: 48px; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--input-bg); cursor: pointer; }
.schedule-mode-picker input { width: 18px; height: 18px; accent-color: var(--accent); }
.schedule-editor { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--input-bg) 72%, var(--card)); }
.schedule-editor[hidden] { display: none; }
.schedule-editor > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
.schedule-editor h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.schedule-unit { color: var(--ink-soft); font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.schedule-day-list { display: grid; }
.schedule-hours-row { display: grid; grid-template-columns: minmax(120px, 1fr) 120px; gap: .75rem; align-items: center; min-height: 58px; padding: .55rem 1rem; border-bottom: 1px solid var(--line); }
.schedule-hours-row:last-child, .schedule-times-row:last-child { border-bottom: 0; }
.schedule-hours-row input { text-align: right; }
.schedule-hours-row .errorlist { grid-column: 1 / -1; margin: 0; }
.schedule-times-head, .schedule-times-row { display: grid; grid-template-columns: minmax(80px, .75fr) repeat(3, minmax(100px, 1fr)) minmax(90px, .8fr); gap: .65rem; align-items: center; }
.schedule-times-head { padding: .65rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .67rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.schedule-times-row { min-height: 76px; padding: .65rem 1rem; border-bottom: 1px solid var(--line); }
.schedule-times-row label { display: grid; gap: .25rem; }
.schedule-times-row label > span { display: none; color: var(--ink-soft); font-size: .68rem; font-weight: 800; }
.schedule-times-row output { justify-self: end; color: var(--accent); font-size: .8rem; font-weight: 900; }
.schedule-times-row output.invalid { color: #d84d52; }
.schedule-times-row .errorlist { grid-column: 1 / -1; margin: 0; font-size: .72rem; }
.schedule-history { max-width: none; padding: 1.4rem; }
.schedule-history > h2 { margin-bottom: .4rem; }
.schedule-history-item { display: grid; gap: .7rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.schedule-history-item > header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.schedule-history-item > header span { padding: .25rem .45rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--ink); font-size: .65rem; font-weight: 850; }
.schedule-history-days { display: grid; gap: .35rem; }
.schedule-history-days > div { display: grid; grid-template-columns: 28px 1fr; gap: .1rem .45rem; align-items: baseline; color: var(--ink-soft); font-size: .76rem; }
.schedule-history-days > div strong { grid-row: 1 / 3; color: var(--ink); }
.schedule-history-days small { color: var(--ink-soft); }
.work-mode-form { max-width: 860px; }
.work-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.work-mode-option { position: relative; display: flex; gap: .9rem; min-height: 145px; padding: 1.2rem; border: 1px solid var(--line); border-radius: 18px; background: var(--input-bg); cursor: pointer; }
.work-mode-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.work-mode-option input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--accent); }
.work-mode-option span { display: grid; align-content: start; gap: .45rem; }
.work-mode-option strong { font-size: 1.1rem; }
.work-mode-option small { color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.project-dashboard-head { margin-bottom: 1.2rem; }
.project-focus-card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.3rem 2rem; overflow: hidden; margin-bottom: 1rem; padding: clamp(1.4rem, 4vw, 2.4rem); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 28px; background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, var(--clock-bg)), var(--clock-bg)); color: #fff; box-shadow: var(--shadow); }
.project-focus-card::before { content: ""; position: absolute; z-index: -1; inset: -80% -15%; background: radial-gradient(ellipse at 18% 52%, color-mix(in srgb, var(--liquid-a) 50%, transparent) 0 24%, transparent 58%), radial-gradient(ellipse at 78% 46%, color-mix(in srgb, var(--liquid-b) 38%, transparent) 0 22%, transparent 56%); filter: blur(26px); opacity: .65; animation: header-liquid-drift 15s ease-in-out infinite alternate; }
.project-focus-card.unassigned { border-color: color-mix(in srgb, #e0a228 68%, var(--line)); }
.project-focus-copy { min-width: 0; }
.project-focus-copy p { margin: .55rem 0 .2rem; color: rgba(255,255,255,.72); font-size: .78rem; font-weight: 800; }
.project-focus-copy h2 { margin: 0; overflow-wrap: anywhere; color: #fff; font-size: clamp(1.8rem, 5vw, 3.2rem); }
.project-focus-copy small { display: block; margin-top: .4rem; color: rgba(255,255,255,.72); }
.project-kind { display: inline-flex; padding: .35rem .55rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.1); font-size: .66rem; font-weight: 900; letter-spacing: .06em; }
.project-kind.warning { border-color: rgba(255,210,122,.78); background: rgba(255,210,122,.2); color: #ffe1a2; }
.project-focus-time { display: grid; justify-items: end; align-content: center; }
.project-focus-time span { color: rgba(255,255,255,.7); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.project-focus-time strong { color: #fff; font-size: clamp(1.8rem, 4vw, 3rem); font-variant-numeric: tabular-nums; }
.project-focus-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; }
.project-focus-actions form { margin: 0; }
.project-action-button { min-height: 44px; padding: .7rem 1rem; border: 1px solid rgba(255,255,255,.22); border-radius: 13px; background: rgba(255,255,255,.11); color: #fff; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 850; }
.project-action-button:hover { background: rgba(255,255,255,.18); }
.project-action-button.start { border-color: color-mix(in srgb, #43c37a 70%, white); background: #269a5d; }
.project-action-button.note { border-color: color-mix(in srgb, var(--accent) 70%, white); background: color-mix(in srgb, var(--accent) 72%, #17343b); color: #fff; }
.project-action-button.pause { border-color: #ffd27a; background: #f2b94b; color: #241b08; }
.project-action-button.danger { border-color: #ef7c80; background: #c94147; }
.project-action-hint { color: rgba(255,255,255,.75); font-size: .82rem; }
.project-action-hint.warning { color: #ffe4ad; font-weight: 750; }
.project-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 2.4rem; }
.project-stats article { display: grid; gap: .3rem; min-height: 105px; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.project-stats article.attention { border-color: color-mix(in srgb, #e0a228 58%, var(--line)); background: color-mix(in srgb, #e0a228 9%, var(--card)); }
.project-stats article.attention strong { color: color-mix(in srgb, #e0a228 78%, var(--ink)); }
.project-stats span { color: var(--ink-soft); font-size: .74rem; font-weight: 800; }
.project-stats strong { align-self: end; font-size: 1.45rem; }
.project-picker-section, .project-recent-section { margin-top: 2rem; }
.project-picker-section .header-actions a, .project-recent-section .section-title > a { color: var(--ink-soft); font-weight: 800; }
.project-picker-section .secondary-link { min-height: 44px; cursor: pointer; color: var(--ink); font: inherit; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.project-tile { display: grid; align-content: start; min-height: 210px; padding: 1.15rem; border: 1px solid var(--line); border-radius: 21px; background: var(--card); box-shadow: inset 0 1px 0 color-mix(in srgb, white 20%, transparent); }
.project-tile.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.project-tile-head { display: flex; justify-content: space-between; gap: .6rem; color: var(--ink-soft); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.project-tile h3 { margin: 1.1rem 0 .25rem; overflow-wrap: anywhere; font-size: 1.35rem; }
.project-tile > p, .project-description { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; }
.project-description { margin-top: .7rem; }
.project-tile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: auto; padding-top: 1.1rem; }
.project-tile-actions .primary-button { width: auto; min-height: 42px; padding: .65rem .9rem; font-size: .76rem; }
.project-complete-button { padding: .55rem .4rem; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800; text-decoration: underline; text-underline-offset: .2rem; }
.project-running-indicator { display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); font-size: .78rem; font-weight: 900; }
.project-running-indicator::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: project-pulse 1.6s ease-in-out infinite; }
@keyframes project-pulse { 50% { opacity: .35; transform: scale(.75); } }
.project-empty-state { grid-column: 1 / -1; display: grid; justify-items: start; gap: .5rem; padding: 1.5rem; border: 1px dashed var(--line); border-radius: 20px; background: var(--card); }
.project-empty-state p { margin: 0 0 .6rem; color: var(--ink-soft); }
.project-empty-state .primary-button { width: auto; }
.project-recent-list { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.project-recent-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.project-recent-list article:last-child { border-bottom: 0; }
.project-recent-list article > div { display: grid; gap: .2rem; }
.project-recent-list span, .project-recent-list p { margin: 0; color: var(--ink-soft); font-size: .75rem; line-height: 1.45; }
.project-dialog { width: min(calc(100% - 28px), 600px); max-height: min(88vh, 760px); overflow: auto; padding: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--card); color: var(--ink); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.project-dialog::backdrop { background: rgba(5,10,10,.7); backdrop-filter: blur(8px); }
.project-dialog > form { position: relative; display: grid; gap: .7rem; padding: clamp(1.4rem, 5vw, 2rem); }
.project-dialog h2 { margin: 0; font-size: 1.65rem; }
.project-dialog .muted { margin: 0 0 .5rem; line-height: 1.55; }
.dialog-close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); color: var(--ink); cursor: pointer; font-size: 1.5rem; }
.project-note-field { display: grid; gap: .45rem; margin-top: .5rem; font-size: .78rem; font-weight: 800; }
.project-note-field[hidden] { display: none; }
.project-note-field textarea { width: 100%; resize: vertical; padding: .85rem; border: 1px solid var(--line); border-radius: 13px; background: var(--input-bg); color: var(--ink); font: inherit; }
.report-tabs { display: inline-flex; gap: .35rem; margin: 0 0 1.1rem; padding: .3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.report-tabs a { padding: .65rem .9rem; border-radius: 10px; color: var(--ink-soft); font-size: .78rem; font-weight: 850; text-decoration: none; }
.report-tabs a.active { background: color-mix(in srgb, var(--accent) 15%, var(--input-bg)); color: var(--ink); }
.project-report-list { overflow: hidden; }
.project-report-list > article { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(130px, .7fr) auto; gap: 1rem; align-items: start; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.project-report-list > article:last-child { border-bottom: 0; }
.project-report-list article > div { display: grid; gap: .18rem; }
.project-report-list span, .project-report-list small, .project-report-list p { margin: 0; color: var(--ink-soft); font-size: .74rem; line-height: 1.45; }
.completed-projects { margin-top: 2rem; }
.completed-projects > div:last-child { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.completed-projects article { display: grid; gap: .2rem; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.completed-projects article span, .completed-projects article small { color: var(--ink-soft); font-size: .7rem; }
@media (max-width: 760px) {
  .schedule-layout { grid-template-columns: 1fr; }
  .work-mode-options, .project-grid, .project-stats, .completed-projects > div:last-child { grid-template-columns: 1fr; }
  .project-focus-card { grid-template-columns: 1fr; padding: 1.25rem; border-radius: 22px; }
  .project-focus-copy h2 { font-size: clamp(1.75rem, 9vw, 2.25rem); line-height: 1.02; }
  .project-focus-time { justify-items: start; }
  .project-focus-actions { grid-column: 1; }
  .project-focus-actions > *, .project-focus-actions form, .project-focus-actions form button { width: 100%; }
  .project-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-stats article { min-height: 86px; padding: .85rem; }
  .project-grid { grid-template-columns: 1fr; }
  .project-tile { min-height: 0; }
  .project-tile h3 { margin-top: .8rem; }
  .project-tile-actions .primary-button { flex: 1; }
  .project-picker-section .section-title, .project-recent-section .section-title { align-items: flex-start; flex-direction: column; }
  .project-picker-section .header-actions { width: 100%; }
  .project-picker-section .header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-picker-section .header-actions > * { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: center; text-decoration: none; }
  .project-recent-list article, .project-report-list > article { grid-template-columns: 1fr; }
  .project-report-list > article > strong { justify-self: start; }
  .project-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  .schedule-mode-picker ul { grid-template-columns: 1fr; }
  .schedule-times-head { display: none; }
  .schedule-times-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: .85rem 1rem; }
  .schedule-times-row > strong, .schedule-times-row output { grid-column: 1 / -1; }
  .schedule-times-row label > span { display: block; }
  .schedule-times-row output { justify-self: start; padding-top: .2rem; }
  .compliance-notice { flex-direction: column; }
}
@media (max-width: 430px) {
  .form-card { padding: 20px; }
  .schedule-editor > header { flex-direction: column; }
  .schedule-hours-row { grid-template-columns: minmax(0, 1fr) minmax(82px, 96px); gap: .5rem; padding-inline: .7rem; }
  .schedule-times-row { gap: .5rem; padding-inline: .7rem; }
  .project-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .project-stats span { font-size: .68rem; line-height: 1.25; }
  .project-stats strong { font-size: 1.2rem; }
  .project-focus-actions { align-items: stretch; flex-direction: column; }
}
.report-filter { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: .8rem; align-items: end; margin-bottom: 1.2rem; }
.report-filter label { display: grid; gap: .35rem; color: var(--ink-soft); font-size: .78rem; font-weight: 800; }
.report-filter input, .report-filter select { width: 100%; }
.compact-filter { padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.pagination, .export-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 1.2rem 0; }
.pagination a, .export-actions a { padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 800; text-decoration: none; }
.report-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.report-summary div { display: grid; gap: .3rem; padding: 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.report-summary span { color: var(--ink-soft); font-size: .76rem; font-weight: 800; text-transform: uppercase; }
.closure-box { display: grid; gap: .4rem; justify-items: end; }
.closure-box span { color: var(--ink-soft); font-size: .75rem; text-transform: uppercase; }
.locked-notice { margin: 0 0 1rem; padding: .9rem 1rem; border: 1px solid var(--mint); border-radius: 14px; background: color-mix(in srgb, var(--mint) 15%, var(--card)); font-weight: 800; }
.team-period { display: flex; gap: .5rem; }
.team-table { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.team-row { display: grid; grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(70px, .65fr)) minmax(170px, 1.4fr); gap: .8rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid var(--line); }
.team-row:last-child { border-bottom: 0; }
.team-head { background: color-mix(in srgb, var(--accent) 14%, var(--card)); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.team-row small, .team-status { display: grid; gap: .25rem; color: var(--ink-soft); }
.team-status { grid-template-columns: 1fr auto auto; align-items: center; }
.team-status form { margin: 0; }
@media (max-width: 900px) {
  .report-filter { grid-template-columns: repeat(2, 1fr); }
  .team-table { overflow-x: auto; }
  .team-row { min-width: 850px; }
}
@media (max-width: 560px) {
  .report-filter, .report-summary { grid-template-columns: 1fr; }
  .closure-box { justify-items: start; }
  .form-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .form-actions > button, .form-actions > a { width: 100%; min-width: 0; }
  .team-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .team-period button { grid-column: 1 / -1; min-height: 42px; }
  .team-table { display: grid; gap: 12px; overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .team-head { display: none; }
  .team-row { min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
  .team-person { grid-column: 1 / -1; display: grid; gap: 3px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .team-metric { min-width: 0; display: grid; gap: 4px; }
  .team-metric::before, .team-status::before { content: attr(data-label); color: var(--ink-soft); font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
  .team-status { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  .team-status::before { grid-column: 1 / -1; }
  .team-status > strong { align-self: center; }
  .team-status a, .team-status button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; text-decoration: none; }
  .delete-account-facts div { display: grid; gap: 4px; }
  .delete-account-facts dd { text-align: left; }
}
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-160%); padding: .7rem 1rem; border-radius: 10px; background: var(--ink); color: var(--paper); font-weight: 900; }
.skip-link:focus { transform: translateY(0); }
.tutorial-launcher { position: fixed; z-index: 1150; top: 50%; right: 0; display: inline-flex; align-items: center; gap: .55rem; min-width: 50px; height: 50px; padding: 0 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-right: 0; border-radius: 17px 0 0 17px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink); box-shadow: 0 12px 38px rgba(0,0,0,.2); backdrop-filter: blur(16px); text-decoration: none; transform: translateY(-50%); transition: padding .22s ease, background .22s ease; }
.tutorial-launcher svg { flex: 0 0 auto; width: 22px; height: 22px; fill: var(--accent); }
.tutorial-launcher span { max-width: 0; overflow: hidden; opacity: 0; font-size: .78rem; font-weight: 900; white-space: nowrap; transition: max-width .24s ease, opacity .18s ease; }
.tutorial-launcher:hover, .tutorial-launcher:focus-visible { padding-right: 20px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.tutorial-launcher:hover span, .tutorial-launcher:focus-visible span { max-width: 90px; opacity: 1; }
.tutorial-experience[hidden] { display: none; }
.tutorial-backdrop { position: fixed; z-index: 2100; inset: 0; background: rgba(3,8,9,.66); backdrop-filter: blur(3px); }
.tutorial-coach { position: fixed; z-index: 2103; left: 16px; top: 16px; width: min(calc(100vw - 32px), 390px); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(1.15rem, 3vw, 1.5rem); border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: 24px; background: color-mix(in srgb, var(--card) 95%, transparent); color: var(--ink); box-shadow: 0 30px 100px rgba(0,0,0,.48); backdrop-filter: blur(22px); visibility: hidden; }
.tutorial-coach h2 { margin: .15rem 0 .5rem; font-size: clamp(1.4rem, 4vw, 1.9rem); }
.tutorial-coach > p:not(.eyebrow) { min-height: 3.1em; margin: 0; color: var(--ink-soft); line-height: 1.55; }
.tutorial-progress { display: grid; gap: .45rem; margin-bottom: 1rem; color: var(--ink-soft); font-size: .7rem; font-weight: 850; }
.tutorial-progress > div { height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--input-bg)); }
.tutorial-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.tutorial-actions { display: grid; grid-template-columns: auto minmax(130px, 1fr); gap: .7rem; margin-top: 1.2rem; }
.tutorial-actions .primary-button { width: 100%; }
.tutorial-actions .secondary-link { min-height: 44px; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: 12px; background: var(--input-bg); color: var(--ink); cursor: pointer; font: inherit; font-weight: 850; }
.tutorial-actions .secondary-link:disabled { opacity: .42; cursor: default; }
.tutorial-skip { display: block; margin: .75rem auto 0; padding: .3rem; border: 0; background: transparent; color: var(--ink-soft); cursor: pointer; font: inherit; font-size: .72rem; font-weight: 800; text-decoration: underline; text-underline-offset: .2rem; }
.tutorial-highlight { position: relative; z-index: 2102 !important; border-radius: 18px; outline: 3px solid color-mix(in srgb, var(--accent) 82%, white); outline-offset: 6px; box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent), 0 24px 75px rgba(0,0,0,.32) !important; }
.tutorial-open .tutorial-launcher { opacity: 0; pointer-events: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 75%, white); outline-offset: 3px; }
.desktop-nav a[aria-current="page"], .bottom-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: .35rem; }
.month-view-actions, .year-navigation { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.month-view-actions a, .year-navigation > a { min-height: 44px; display: inline-flex; align-items: center; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-decoration: none; font-weight: 800; }
.session-alert { display: flex; gap: .7rem; margin: -6px 0 18px; padding: .9rem 1rem; border: 1px solid color-mix(in srgb, #e0a228 60%, var(--line)); border-radius: 14px; background: color-mix(in srgb, #e0a228 13%, var(--card)); }
.reminder-card { max-width: 720px; }
.privacy-hint { margin: 1rem 0; padding: .8rem 1rem; border-radius: 12px; background: color-mix(in srgb, var(--mint) 12%, var(--card)); color: var(--ink-soft); font-size: .85rem; }
@media (max-width: 760px) {
  body { padding-bottom: calc(106px + env(safe-area-inset-bottom)); }
  .bottom-nav { left: 8px; right: 8px; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; overflow: visible; padding: 6px; background: color-mix(in srgb, var(--clock-bg) 94%, transparent); backdrop-filter: blur(18px); }
  .bottom-nav a { min-width: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .1rem; overflow: hidden; font-size: clamp(9.5px, 2.55vw, 11.5px); white-space: nowrap; }
  .session-alert { flex-direction: column; }
  .tutorial-launcher { display: none; }
  .tutorial-coach { width: calc(100% - 20px); max-height: calc(100dvh - 112px); padding: 1rem; border-radius: 20px; }
  .tutorial-highlight { outline-offset: 3px; }
}
@media (max-width: 340px) {
  .bottom-nav a { font-size: 8.5px; letter-spacing: -.025em; }
}
@media (prefers-reduced-motion: reduce) {
  .tutorial-launcher, .tutorial-launcher span, .tutorial-progress i, .tutorial-coach { transition: none; }
  .tutorial-highlight { scroll-behavior: auto; }
}