@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Lora:wght@500;600&display=swap');

/* ── Global loading & error fallbacks ────────────────────────────────────
   Shown while modules load or when something fails — prevents blank screen.
──────────────────────────────────────────────────────────────────────── */

.fh-loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  gap: 16px;
  color: var(--ink2);
}

.fh-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fhSpin .8s linear infinite;
}

@keyframes fhSpin {
  to { transform: rotate(360deg); }
}

.fh-loading-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .7;
}

.fh-module-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 32px 24px;
  max-width: 560px;
  margin: 32px auto;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.fh-module-error h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.fh-module-error p {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.6;
}

.fh-fatal-error {
  margin: 48px auto;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --serif: 'Lora', Georgia, serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --scrim: rgba(0, 0, 0, 0.34);
  --scrim-soft: rgba(0, 0, 0, 0.24);
  --scrim-medium: rgba(0, 0, 0, 0.45);
  --scrim-strong: rgba(0, 0, 0, 0.62);

  --topbar-h: 52px;
  --sidebar-w: 248px;
  --bottom-nav-h: 0px;
}

/* ── Layf Core — default premium theme ──────────────────────────────────── */
html[data-theme='layf-core'] {
  --base: #f7f8fc;
  --surface: #ffffff;
  --surface2: #f0f2f7;
  --surface3: #e4e7ef;

  --line: rgba(17, 24, 56, 0.07);
  --line2: rgba(17, 24, 56, 0.04);
  --border: var(--line);

  --ink: #111827;
  --ink2: rgba(17, 24, 39, 0.58);
  --ink3: rgba(17, 24, 39, 0.36);
  --muted: var(--ink3);
  --card: var(--surface);

  --accent: #7c5cfc;
  --accent-contrast: #ffffff;
  --accent-lt: rgba(124, 92, 252, 0.09);
  --accent-md: rgba(124, 92, 252, 0.18);

  --positive: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #2563eb;

  --pos-bg: rgba(22, 163, 74, 0.09);
  --warn-bg: rgba(217, 119, 6, 0.09);
  --danger-bg: rgba(220, 38, 38, 0.08);
  --info-bg: rgba(37, 99, 235, 0.08);

  --shadow-xs: 0 1px 2px rgba(17, 24, 56, 0.04);
  --shadow-sm: 0 1px 6px rgba(17, 24, 56, 0.06), 0 0 0 1px rgba(17, 24, 56, 0.03);
  --shadow-md: 0 4px 14px rgba(17, 24, 56, 0.07), 0 0 0 1px rgba(17, 24, 56, 0.03);
  --shadow-lg: 0 14px 36px rgba(17, 24, 56, 0.10), 0 0 0 1px rgba(17, 24, 56, 0.03);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(124, 92, 252, 0.22);
  --scrollbar-thumb-hover: rgba(124, 92, 252, 0.38);

  --warm-accent-active: var(--accent);
  --warm-card: var(--surface);
  --warm-card-2: var(--surface2);
  --warm-card-hover: var(--accent-lt);
  --warm-icon-bg: var(--accent-lt);
  --warm-ghost: rgba(255, 255, 255, 0.72);
  --warm-glass: rgba(255, 255, 255, 0.78);
  --warm-header-bg: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,242,247,0.76));
  --warm-border: var(--line);
  --warm-border-hover: rgba(124, 92, 252, 0.30);
  --warm-ink: var(--ink);
  --warm-ink-2: var(--ink2);
  --warm-ink-3: var(--ink3);
}

html[data-theme='layf-core'][data-dark='true'] {
  --base: #0e0f1a;
  --surface: #161728;
  --surface2: #1e2038;
  --surface3: #252840;

  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.05);
  --border: var(--line);

  --ink: #f3f4f8;
  --ink2: rgba(243, 244, 248, 0.68);
  --ink3: rgba(243, 244, 248, 0.42);
  --muted: var(--ink3);
  --card: var(--surface);

  --accent: #a78bfa;
  --accent-contrast: #0e0f1a;
  --accent-lt: rgba(167, 139, 250, 0.14);
  --accent-md: rgba(167, 139, 250, 0.26);

  --positive: #4ade80;
  --warning: #fbbf24;
  --danger: #f87171;
  --info: #60a5fa;

  --pos-bg: rgba(74, 222, 128, 0.14);
  --warn-bg: rgba(251, 191, 36, 0.14);
  --danger-bg: rgba(248, 113, 113, 0.14);
  --info-bg: rgba(96, 165, 250, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(255, 255, 255, 0.03);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(167, 139, 250, 0.28);
  --scrollbar-thumb-hover: rgba(167, 139, 250, 0.44);

  --warm-accent-active: var(--accent);
  --warm-card: var(--surface);
  --warm-card-2: var(--surface2);
  --warm-card-hover: var(--accent-lt);
  --warm-icon-bg: var(--accent-lt);
  --warm-ghost: rgba(255, 255, 255, 0.05);
  --warm-glass: var(--surface);
  --warm-header-bg: var(--surface2);
  --warm-border: var(--line);
  --warm-border-hover: rgba(167, 139, 250, 0.30);
  --warm-ink: var(--ink);
  --warm-ink-2: var(--ink2);
  --warm-ink-3: var(--ink3);
}

/* ── Energy OS (espresso) ────────────────────────────────────────────────── */
html:not([data-theme]),
html[data-theme='espresso'] {
  --base: #f5f2ee;
  --surface: #ffffff;
  --surface2: #ede9e4;
  --surface3: #e3ded7;

  --line: rgba(26, 20, 16, 0.1);
  --line2: rgba(26, 20, 16, 0.05);
  --border: var(--line);

  --ink: #1a1410;
  --ink2: rgba(26, 20, 16, 0.68);
  --ink3: rgba(26, 20, 16, 0.44);
  --muted: var(--ink3);
  --card: var(--surface);

  --accent: #ef6016;
  --accent-contrast: #ffffff;
  --accent-lt: rgba(239, 96, 22, 0.12);
  --accent-md: rgba(239, 96, 22, 0.24);

  --positive: #2d7d4f;
  --warning: #a05c1a;
  --danger: #b83232;
  --info: #2d5fa0;

  --pos-bg: rgba(45, 125, 79, 0.09);
  --warn-bg: rgba(160, 92, 26, 0.09);
  --danger-bg: rgba(184, 50, 50, 0.08);
  --info-bg: rgba(45, 95, 160, 0.08);

  --shadow-xs: 0 1px 2px rgba(26, 20, 16, 0.05);
  --shadow-sm: 0 1px 4px rgba(26, 20, 16, 0.06), 0 0 0 1px rgba(26, 20, 16, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 20, 16, 0.08), 0 0 0 1px rgba(26, 20, 16, 0.04);
  --shadow-lg: 0 14px 36px rgba(26, 20, 16, 0.12), 0 0 0 1px rgba(26, 20, 16, 0.04);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(239, 96, 22, 0.28);
  --scrollbar-thumb-hover: rgba(239, 96, 22, 0.46);

  /* Warm OS design tokens — light */
  --warm-card: #fffdf9;
  --warm-card-2: #fbf7f0;
  --warm-card-hover: #fff5ec;
  --warm-icon-bg: #f5ebe1;
  --warm-ghost: rgba(250, 247, 241, 0.72);
  --warm-glass: rgba(255, 255, 255, 0.78);
  --warm-header-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 247, 241, 0.76));
  --warm-border: rgba(124, 92, 68, 0.12);
  --warm-border-hover: rgba(239, 96, 22, 0.30);
  --warm-ink: #17120f;
  --warm-ink-2: #5f4635;
  --warm-ink-3: #7c5c44;
  --warm-accent-active: var(--accent);
}

html[data-theme='espresso'][data-dark='true'] {
  --base: #101112;
  --surface: #181a1c;
  --surface2: #202326;
  --surface3: #2a2e32;

  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.05);
  --border: var(--line);

  --ink: #f4f1ec;
  --ink2: rgba(244, 241, 236, 0.72);
  --ink3: rgba(244, 241, 236, 0.46);
  --muted: var(--ink3);
  --card: var(--surface);

  --accent: #f28a3c;
  --accent-contrast: #16110d;
  --accent-lt: rgba(242, 138, 60, 0.15);
  --accent-md: rgba(242, 138, 60, 0.28);

  --positive: #6bc48c;
  --warning: #e0a15c;
  --danger: #e17373;
  --info: #7fb3ff;

  --pos-bg: rgba(107, 196, 140, 0.15);
  --warn-bg: rgba(224, 161, 92, 0.15);
  --danger-bg: rgba(225, 115, 115, 0.14);
  --info-bg: rgba(127, 179, 255, 0.14);

  --shadow-xs: 0 1px 2px var(--scrim);
  --shadow-sm: 0 1px 4px color-mix(in srgb, var(--scrim) 82%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md: 0 4px 12px var(--scrim), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.03);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(242, 138, 60, 0.30);
  --scrollbar-thumb-hover: rgba(242, 138, 60, 0.48);

  /* Warm OS design tokens — dark */
  --warm-card: #181a1c;
  --warm-card-2: #202326;
  --warm-card-hover: rgba(242, 138, 60, 0.12);
  --warm-icon-bg: rgba(242, 138, 60, 0.16);
  --warm-ghost: rgba(255, 255, 255, 0.05);
  --warm-glass: var(--warm-card);
  --warm-header-bg: var(--warm-card-2);
  --warm-border: rgba(255, 255, 255, 0.08);
  --warm-border-hover: rgba(242, 138, 60, 0.30);
  --warm-ink: #f4f1ec;
  --warm-ink-2: rgba(244, 241, 236, 0.72);
  --warm-ink-3: rgba(244, 241, 236, 0.46);
  --warm-accent-active: #f28a3c;
}

html[data-theme='chalk'] {
  --base: #ffffff;
  --surface: #f5f5f7;
  --surface2: #ebebeb;
  --surface3: #dedee2;

  --line: rgba(29, 29, 31, 0.1);
  --line2: rgba(29, 29, 31, 0.05);
  --border: var(--line);

  --ink: #1d1d1f;
  --ink2: rgba(29, 29, 31, 0.68);
  --ink3: rgba(29, 29, 31, 0.44);
  --muted: var(--ink3);
  --card: var(--surface);

  --accent: #1d1d1f;
  --accent-contrast: #ffffff;
  --accent-lt: rgba(29, 29, 31, 0.1);
  --accent-md: rgba(29, 29, 31, 0.2);

  --positive: #28784d;
  --warning: #9a5a13;
  --danger: #b83232;
  --info: #245c9c;

  --pos-bg: rgba(40, 120, 77, 0.09);
  --warn-bg: rgba(154, 90, 19, 0.09);
  --danger-bg: rgba(184, 50, 50, 0.08);
  --info-bg: rgba(36, 92, 156, 0.08);

  --shadow-xs: 0 1px 2px rgba(29, 29, 31, 0.04);
  --shadow-sm: 0 1px 4px rgba(29, 29, 31, 0.05), 0 0 0 1px rgba(29, 29, 31, 0.04);
  --shadow-md: 0 4px 12px rgba(29, 29, 31, 0.07), 0 0 0 1px rgba(29, 29, 31, 0.04);
  --shadow-lg: 0 14px 36px rgba(29, 29, 31, 0.1), 0 0 0 1px rgba(29, 29, 31, 0.04);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(29, 29, 31, 0.28);
  --scrollbar-thumb-hover: rgba(29, 29, 31, 0.48);
}

html[data-theme='chalk'][data-dark='true'] {
  --base: #000000;
  --surface: #1c1c1e;
  --surface2: #2c2c2e;
  --surface3: #3a3a3c;

  --line: rgba(255, 255, 255, 0.1);
  --line2: rgba(255, 255, 255, 0.06);
  --border: var(--line);

  --ink: #ffffff;
  --ink2: rgba(255, 255, 255, 0.72);
  --ink3: rgba(255, 255, 255, 0.46);
  --muted: var(--ink3);
  --card: var(--surface);

  --accent: #ffffff;
  --accent-contrast: #000000;
  --accent-lt: rgba(255, 255, 255, 0.12);
  --accent-md: rgba(255, 255, 255, 0.24);

  --positive: #67d18a;
  --warning: #e5aa62;
  --danger: #f07c7c;
  --info: #8dbfff;

  --pos-bg: rgba(103, 209, 138, 0.15);
  --warn-bg: rgba(229, 170, 98, 0.15);
  --danger-bg: rgba(240, 124, 124, 0.14);
  --info-bg: rgba(141, 191, 255, 0.14);

  --shadow-xs: 0 1px 2px var(--scrim);
  --shadow-sm: 0 1px 4px color-mix(in srgb, var(--scrim) 82%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-md: 0 4px 12px var(--scrim), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(255, 255, 255, 0.04);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 255, 255, 0.32);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.52);
}

html[data-theme='forest'] {
  --base: #f4f1ec;
  --surface: #ffffff;
  --surface2: #eceae4;
  --surface3: #e0ded6;

  --line: rgba(28, 31, 24, 0.1);
  --line2: rgba(28, 31, 24, 0.05);
  --border: var(--line);

  --ink: #1c1f18;
  --ink2: rgba(28, 31, 24, 0.68);
  --ink3: rgba(28, 31, 24, 0.44);
  --muted: var(--ink3);
  --card: var(--surface);

  --accent: #4a6741;
  --accent-contrast: #ffffff;
  --accent-lt: rgba(74, 103, 65, 0.12);
  --accent-md: rgba(74, 103, 65, 0.24);

  --positive: #3f7a43;
  --warning: #94621b;
  --danger: #b33a32;
  --info: #38698f;

  --pos-bg: rgba(63, 122, 67, 0.09);
  --warn-bg: rgba(148, 98, 27, 0.09);
  --danger-bg: rgba(179, 58, 50, 0.08);
  --info-bg: rgba(56, 105, 143, 0.08);

  --shadow-xs: 0 1px 2px rgba(28, 31, 24, 0.05);
  --shadow-sm: 0 1px 4px rgba(28, 31, 24, 0.06), 0 0 0 1px rgba(28, 31, 24, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 31, 24, 0.08), 0 0 0 1px rgba(28, 31, 24, 0.04);
  --shadow-lg: 0 14px 36px rgba(28, 31, 24, 0.12), 0 0 0 1px rgba(28, 31, 24, 0.04);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(74, 103, 65, 0.28);
  --scrollbar-thumb-hover: rgba(74, 103, 65, 0.48);
}

html[data-theme='forest'][data-dark='true'] {
  --base: #141810;
  --surface: #1c2218;
  --surface2: #252e20;
  --surface3: #303a2a;

  --line: rgba(232, 237, 224, 0.09);
  --line2: rgba(232, 237, 224, 0.05);
  --border: var(--line);

  --ink: #e8ede0;
  --ink2: rgba(232, 237, 224, 0.72);
  --ink3: rgba(232, 237, 224, 0.46);
  --muted: var(--ink3);
  --card: var(--surface);

  --accent: #7aad6e;
  --accent-contrast: #10140e;
  --accent-lt: rgba(122, 173, 110, 0.16);
  --accent-md: rgba(122, 173, 110, 0.3);

  --positive: #7ad28b;
  --warning: #d7a85c;
  --danger: #e17a72;
  --info: #8abaf2;

  --pos-bg: rgba(122, 210, 139, 0.15);
  --warn-bg: rgba(215, 168, 92, 0.15);
  --danger-bg: rgba(225, 122, 114, 0.14);
  --info-bg: rgba(138, 186, 242, 0.14);

  --shadow-xs: 0 1px 2px var(--scrim);
  --shadow-sm: 0 1px 4px color-mix(in srgb, var(--scrim) 82%, transparent), 0 0 0 1px rgba(232, 237, 224, 0.03);
  --shadow-md: 0 4px 12px var(--scrim), 0 0 0 1px rgba(232, 237, 224, 0.03);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(232, 237, 224, 0.03);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(122, 173, 110, 0.34);
  --scrollbar-thumb-hover: rgba(122, 173, 110, 0.56);
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--base);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

button {
  border: none;
  background: none;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--base);
}

.topbar {
  height: var(--topbar-h);
  padding: 0 10px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  position: relative;
  z-index: 30;
  flex-shrink: 0;
}

.topbar-toggle,
.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.topbar-toggle:hover,
.icon-btn:hover {
  background: var(--surface2);
  color: var(--ink);
}

.topbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
}

.topbar-logo-icon {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-contrast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.topbar-logo-text {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -0.2px;
}

.topbar-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
}

.topbar-page {
  font-size: 12px;
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface2);
}

.lang-btn {
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink2);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.lang-btn.is-active {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-xs);
  font-weight: 700;
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 6px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.user-pill:hover {
  background: var(--surface3);
}

.user-pill-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-lt);
  border: 1px solid var(--accent-md);
  font-size: 11px;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: var(--surface2);
}

.signout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.signout-btn:hover {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--line));
}

.shell {
  min-height: 0;
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 10px 8px 24px;
  transition: transform 0.22s ease, width 0.22s ease, opacity 0.22s ease;
}

.sidebar.is-collapsed {
  width: 0;
  opacity: 0;
  pointer-events: none;
  padding-left: 0;
  padding-right: 0;
  border-right: none;
}

.sidebar-section-label {
  padding: 12px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink3);
}

.sidebar-divider {
  height: 1px;
  margin: 8px 10px;
  background: var(--line2);
}

.nav-item {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 12px;
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease, color 0.14s ease;
}

.nav-item:hover {
  background: var(--surface2);
  color: var(--ink);
}

.nav-item.is-active {
  background: var(--accent-lt);
  color: var(--accent);
  font-weight: 600;
}

.nav-icon {
  width: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overflow-x: clip; /* prevent any module content from causing horizontal scroll */
  background: var(--base);
}

.page-wrap {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.page-title {
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--ink);
}

.page-sub {
  margin: 0 0 24px;
  max-width: 780px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink2);
}

.section-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line2);
}

.summary-card {
  padding: 18px;
}

.summary-icon {
  font-size: 18px;
  margin-bottom: 10px;
}

.summary-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--ink);
}

.summary-label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink3);
}

.summary-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink2);
}

.content-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 16px;
}

.panel {
  padding: 18px;
}

.panel p {
  margin: 0;
  line-height: 1.65;
  color: var(--ink2);
}

.panel ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink2);
}

.panel li + li {
  margin-top: 8px;
}

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.btn:hover {
  opacity: 0.9;
}

.btn:active {
  transform: scale(0.98);
}

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

.btn-outline {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}

.btn-outline.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
  color: var(--accent);
}

.budget-chip-row,
.wishlist-chip-row,
.inventory-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.budget-chip-row .btn,
.wishlist-chip-row .btn,
.inventory-chips .btn {
  min-height: 32px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.module-stack {
  margin-top: 16px;
}

.module-stack-lg {
  margin-top: 18px;
}

.medical-tabs,
.people-tabs,
.budget-tabs,
.mod-tabbar,
.event-tabs,
.pets-tabs,
.projects-tabs,
.calendar-tabs,
.medications-filters {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.medical-tabs button,
.people-tabs button,
.budget-tabs button,
.mod-tabbar button,
.event-tabs button,
.pets-tabs button,
.projects-tabs button,
.calendar-tabs .calendar-tab,
.medications-filters .btn {
  min-height: 40px;
  padding: 12px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
}

.medical-tabs button.is-active,
.people-tabs button.is-active,
.budget-tabs button.is-active,
.mod-tabbar button.is-active,
.event-tabs button.is-active,
.pets-tabs button.is-active,
.projects-tabs button.is-active,
.calendar-tabs .calendar-tab.is-active,
.medications-filters .btn-primary {
  border-bottom-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
  background: transparent;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.theme-card {
  min-height: 138px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.theme-card:hover {
  background: var(--surface2);
}

.theme-card:active {
  transform: scale(0.99);
}

.theme-card.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.theme-card-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.theme-card-swatches i {
  display: block;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line2);
}

.theme-card strong {
  font-size: 14px;
}

.theme-card small {
  color: var(--ink2);
  line-height: 1.45;
}

.theme-mode-row {
  padding-top: 2px;
}

.settings-page {
  width: 100%;
  padding-bottom: 88px;
}

.settings-workspace {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settings-source {
  display: none;
}

.settings-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
}

.settings-tabs::-webkit-scrollbar {
  display: none;
}

.settings-tab {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 0 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2, var(--card));
  color: var(--ink2);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.settings-tab:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  color: var(--ink);
}

.settings-tab.is-active {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
  background: color-mix(in srgb, var(--accent-lt) 80%, var(--card));
  color: var(--ink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 13%, transparent);
}

.settings-tab-panel,
.settings-tab-panel [data-settings-slot] {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.settings-tab-panel[hidden] {
  display: none;
}

.settings-tab-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 2px 0;
}

.settings-tab-intro > div > span {
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
}

.settings-tab-intro h2 {
  margin: 0;
  color: var(--ink);
  font-size: 21px;
  font-weight: 650;
}

.settings-tab-intro p {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.5;
}

.settings-language-plan {
  padding: 18px 20px;
  border-style: dashed;
}

.settings-language-plan .section-title {
  margin: 2px 0 6px;
}

.settings-workspace .settings-profile-card,
.settings-workspace .settings-backup-panel,
.settings-workspace .settings-legal-panel {
  margin-bottom: 0;
}

.settings-workspace .settings-two-col,
.settings-workspace .settings-top-row {
  display: contents;
}

@media (max-width: 640px) {
  .settings-tabs {
    margin-inline: -2px;
  }

  .settings-tab {
    min-height: 36px;
    padding-inline: 13px;
    font-size: 12px;
  }

  .settings-tab-intro {
    display: block;
    padding-inline: 2px;
  }

  .settings-tab-intro h2 {
    font-size: 19px;
  }
}

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

.settings-grid > .settings-theme-panel,
.settings-grid > .settings-privacy-panel,
.settings-grid > .settings-shortcuts-panel,
.settings-grid > .settings-modules-panel {
  grid-column: 1 / -1;
}

.settings-profile-card {
  margin-bottom: 16px;
  padding: 20px;
}

.settings-profile-main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.settings-profile-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--accent-md);
  background: var(--accent-lt);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}

.settings-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-editor {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.52);
  backdrop-filter: blur(8px);
}

.profile-photo-editor-card {
  width: min(460px, 100%);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--card);
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.24);
}

.profile-photo-editor-head,
.profile-photo-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
}

.profile-photo-editor-head {
  border-bottom: 1px solid var(--border);
}

.profile-photo-editor-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
}

.profile-photo-editor-head p,
.profile-photo-editor-hint {
  margin: 5px 0 0;
  color: var(--ink2);
  font-size: 13px;
}

.profile-photo-editor-body {
  padding: 22px;
}

.profile-photo-stage {
  position: relative;
  width: min(320px, 78vw);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--surface-2, #eef1f7);
  cursor: grab;
  touch-action: none;
}

.profile-photo-stage:active {
  cursor: grabbing;
}

.profile-photo-stage img {
  position: absolute;
  max-width: none;
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

.profile-photo-frame {
  position: absolute;
  inset: 0;
  border: 3px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.16);
  pointer-events: none;
}

.profile-photo-zoom {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  color: var(--ink2);
  font-size: 13px;
  font-weight: 600;
}

.profile-photo-zoom input {
  width: 100%;
  accent-color: var(--accent);
}

.profile-photo-editor-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--border);
}

@media (max-width: 560px) {
  .profile-photo-editor {
    padding: 10px;
  }

  .profile-photo-editor-card {
    border-radius: 16px;
  }

  .profile-photo-editor-head,
  .profile-photo-editor-body,
  .profile-photo-editor-actions {
    padding: 16px;
  }
}

.settings-profile-copy {
  flex: 1;
  min-width: 180px;
}

.settings-profile-copy h2 {
  margin: 0;
  font-size: 22px;
  color: var(--ink);
}

.settings-profile-copy p,
.settings-profile-copy small,
.settings-copy,
.settings-muted,
.settings-privacy-head p,
.settings-privacy-summary {
  color: var(--ink2);
  line-height: 1.6;
}

.settings-profile-copy p {
  margin: 4px 0 0;
}

.settings-profile-copy small {
  display: block;
  margin-top: 4px;
}

.settings-profile-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-file-btn input {
  display: none;
}

.settings-pin-form,
.settings-form-stack {
  display: grid;
  gap: 10px;
}

.settings-inline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-inline-copy {
  color: var(--ink);
  font-weight: 600;
}

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

.settings-privacy-card {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface2);
}

.settings-privacy-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.settings-privacy-head strong {
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
}

.settings-privacy-head p {
  margin: 0;
  font-size: 13px;
}

.settings-privacy-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.settings-share-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.settings-module-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-module-card.is-hidden {
  opacity: 0.76;
}

.settings-module-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-module-card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-module-card-copy strong {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.settings-module-card-copy small {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink2);
}

.settings-module-card-actions {
  display: flex;
  justify-content: flex-start;
}

.settings-privacy-summary {
  display: block;
  margin-top: 12px;
  font-size: 12px;
}

.field-group + .field-group {
  margin-top: 16px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.field > span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink3);
}

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink3);
}

.field-input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}

textarea.field-input {
  resize: vertical;
  min-height: 96px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
}

.badge-accent {
  background: var(--accent-lt);
  color: var(--accent);
}

.badge-info {
  background: var(--info-bg);
  color: var(--info);
}

.empty-state {
  padding: 22px;
  border-radius: 18px;
  border: 1px dashed var(--line);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
}

.empty-state-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.empty-state-sub {
  margin: 0;
  color: var(--ink2);
  line-height: 1.65;
}

.more-drawer {
  display: none;
}

.ice-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.btn-row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.medical-panel-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.ice-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.ice-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-medium);
  backdrop-filter: blur(4px);
}

.ice-overlay-sheet {
  position: absolute;
  inset: 24px;
  overflow: auto;
  max-width: 980px;
  margin: auto;
  background: var(--base);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 20px;
  box-shadow: var(--shadow-lg);
}

.ice-overlay-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.ice-card {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.ice-head,
.ice-grid,
.ice-columns {
  display: grid;
  gap: 14px;
}

.ice-head {
  grid-template-columns: 1fr auto;
  align-items: start;
}

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

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

.ice-block,
.ice-panel {
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.ice-blood strong {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1;
}

.ice-alert {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}

.ice-contacts {
  display: grid;
  gap: 10px;
}

.ice-contact {
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--surface2);
}

.meal-ai-grid,
.meal-ai-inline {
  display: grid;
  gap: 12px;
}

.meal-ai-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.meal-ai-inline {
  grid-template-columns: 1fr auto auto;
  align-items: center;
}

.meal-allergy-box {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--surface);
  margin-bottom: 14px;
}

.meal-allergy-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.meal-allergy-chips .badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.meal-ai-results {
  display: grid;
  gap: 12px;
}

.meal-ai-day {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  background: var(--surface);
  display: grid;
  gap: 12px;
}

.meal-ai-meals {
  display: grid;
  gap: 10px;
}

.meal-ai-meal {
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface2);
  display: grid;
  gap: 6px;
}

.meal-slot-ai .meal-recipe {
  border: 1px solid var(--line);
}

.meal-slot-ai .meal-photo {
  background: var(--surface2);
}

.nutrition-page,
.beauty-page,
.gym-page,
.breastfeeding-page {
  display: grid;
  gap: 16px;
}

.bottom-nav {
  display: none;
}

.sidebar-overlay {
  display: none;
}

code.inline-code {
  display: inline;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--line2);
  font-size: 12px;
}

@media (max-width: 960px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

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

  .settings-grid,
  .settings-privacy-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --topbar-h: 50px;
    --bottom-nav-h: 60px;
  }

  .topbar {
    padding-right: 8px;
  }

  .topbar-page,
  .topbar-sep {
    display: none;
  }

  .user-pill span:last-child {
    display: none;
  }

  .shell {
    position: relative;
  }

  .sidebar {
    position: fixed;
    inset: var(--topbar-h) auto 0 0;
    width: 280px;
    max-width: calc(100vw - 40px);
    z-index: 40;
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }

  .sidebar.is-mobile-open {
    transform: translateX(0);
  }

  .sidebar.is-collapsed {
    width: 280px;
    opacity: 1;
    pointer-events: auto;
    padding-left: 8px;
    padding-right: 8px;
    border-right: 1px solid var(--line);
  }

  .sidebar-overlay.is-visible {
    display: block;
    position: fixed;
    inset: var(--topbar-h) 0 var(--bottom-nav-h) 0;
    background: color-mix(in srgb, var(--scrim) 82%, transparent);
    z-index: 35;
    backdrop-filter: blur(2px);
  }

  .main {
    padding-bottom: calc(var(--bottom-nav-h) + 18px);
  }

  .page-wrap {
    padding: 20px 16px 92px;
  }

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

  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--bottom-nav-h);
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    z-index: 45;
  }

  .bn-tab {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--ink3);
    cursor: pointer;
    transition: color 0.15s ease;
  }

  .bn-tab.is-active {
    color: var(--accent);
  }

  .bn-icon {
    font-size: 18px;
    line-height: 1;
  }

  .bn-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: -0.1px;
  }

  .more-drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
  }

  .more-drawer[aria-hidden='true'] {
    display: none;
  }

  .more-drawer[aria-hidden='false'] {
    display: block;
  }

  .more-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--scrim) 94%, transparent);
    backdrop-filter: blur(4px);
  }

  .more-drawer-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px 24px;
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-lg);
  }

  .more-drawer-handle {
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: var(--surface3);
    margin: 0 auto 14px;
  }

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

  .more-item {
    min-height: 78px;
    border-radius: 16px;
    background: var(--surface2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--ink);
    cursor: pointer;
  }

  .more-item-icon {
    font-size: 20px;
    line-height: 1;
  }

  .more-item-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink2);
    text-align: center;
    line-height: 1.2;
  }

  .ice-fab {
    right: 16px;
    bottom: calc(var(--bottom-nav-h) + 12px);
  }

  .ice-overlay-sheet {
    inset: 10px;
    border-radius: 20px;
  }

  .ice-grid,
  .ice-columns {
    grid-template-columns: 1fr;
  }
}
.fh-dialog-open {
  overflow: hidden;
}

.fh-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.fh-dialog-layer[aria-hidden='false'] {
  pointer-events: auto;
}

.fh-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--scrim) 94%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
}

.fh-dialog {
  width: min(520px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px 24px 18px 18px;
  box-shadow: var(--shadow-lg);
  padding: 14px 14px 16px;
  transform: translateY(16px);
  opacity: 0;
  animation: fhDialogIn 0.18s ease forwards;
}

.fh-dialog-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--surface3);
  margin: 0 auto 14px;
}

.fh-dialog-header {
  margin-bottom: 10px;
}

.fh-dialog-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.3px;
}

.fh-dialog-body {
  margin-bottom: 16px;
}

.fh-dialog-message {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink2);
}

.fh-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.fh-dialog-actions.is-alert {
  justify-content: flex-end;
}

.fh-dialog-actions.is-confirm {
  justify-content: flex-end;
}

.fh-dialog-btn {
  min-height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  transition: opacity 0.15s ease, transform 0.1s ease, background 0.15s ease;
}

.fh-dialog-btn:active {
  transform: scale(0.98);
}

.fh-dialog-btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
}

.fh-dialog-btn--ghost {
  background: var(--surface2);
  color: var(--ink);
  border: 1px solid var(--line);
}

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

.fh-dialog--danger .fh-dialog-title {
  color: var(--danger);
}

.fh-dialog--danger .fh-dialog-btn--primary {
  background: var(--danger);
}

@keyframes fhDialogIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .fh-dialog-backdrop {
    align-items: center;
    padding: 20px;
  }

  .fh-dialog {
    border-radius: 24px;
    padding: 18px 18px 18px;
  }

  .fh-dialog-handle {
    display: none;
  }
}
/* ── SCROLLBAR ── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: padding-box;
}
/* ═══════════════════════════════════════════════════════════════
   FAMILY TREE — visual tree rebuild (ftree-* prefix)
═══════════════════════════════════════════════════════════════ */
.ftree-outer {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  position: relative; background: var(--bg);
  --ftree-accent: var(--warm-accent-active, var(--accent));
  --ftree-accent-lt: color-mix(in srgb, var(--ftree-accent) 14%, transparent);
}
.ftree-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 24px 24px 16px; gap: 16px; flex-shrink: 0;
}
.ftree-title {
  font-family: var(--serif); font-size: 2rem; font-weight: 700;
  color: var(--ink); margin: 0; line-height: 1.2;
}
.ftree-subtitle { color: var(--ink2); font-size: 14px; margin: 4px 0 0; }

/* Viewport & scene */
.ftree-viewport {
  flex: 1; overflow: auto; position: relative;
  min-height: 0; cursor: grab;
}
.ftree-viewport:active { cursor: grabbing; }
.ftree-scene {
  display: inline-block; min-width: 100%; min-height: 100%;
  transform-origin: top left; padding: 32px 24px 80px;
  position: relative;
}
.ftree-svg {
  position: absolute; top: 0; left: 0;
  pointer-events: none; overflow: visible;
}
.ftree-connection {
  fill: none; stroke: var(--border); stroke-width: 2px;
  stroke-linecap: round;
}

/* Generation rows */
.ftree-generations {
  display: flex; flex-direction: column; gap: 64px;
  position: relative; z-index: 1;
}
.ftree-row {
  display: flex; align-items: center; gap: 20px;
}
.ftree-row-label {
  min-width: 110px; flex-shrink: 0; text-align: right;
  padding-right: 12px;
}
.ftree-row-ordinal {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; color: var(--ink2); text-transform: uppercase;
}
.ftree-row-count {
  display: block; font-size: 11px; color: var(--ink3); margin-top: 3px;
}
.ftree-row-cards {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
}
.ftree-sibling-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ftree-couple {
  display: flex; align-items: center; gap: 0;
}
.ftree-single { display: flex; }

/* Heart connector between partners */
.ftree-heart {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ftree-accent); flex-shrink: 0;
  z-index: 2; position: relative;
}

/* Person card */
.ftree-card {
  width: 172px; background: var(--surface);
  border: 2px solid var(--border); border-radius: 14px;
  padding: 14px 12px; display: flex; align-items: center; gap: 10px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.05); user-select: none;
  position: relative;
}
.ftree-card:hover { border-color: color-mix(in srgb, var(--ftree-accent) 42%, var(--border)); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.ftree-card.is-hub {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--layf-accent-gradient, linear-gradient(135deg, var(--ftree-accent), var(--accent))) border-box;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--layf-accent-violet, var(--ftree-accent)) 12%, transparent), 0 2px 10px rgba(0,0,0,.05);
}
.ftree-card.is-pending {
  border-style: dotted;
  border-color: color-mix(in srgb, var(--ftree-accent) 54%, var(--border));
}
.ftree-card.is-memory {
  border-color: color-mix(in srgb, var(--border) 84%, var(--ink2));
}
.ftree-card.is-selected {
  border-color: color-mix(in srgb, var(--border) 64%, var(--surface2));
  box-shadow: 0 8px 22px rgba(0,0,0,.10), 0 0 0 3px color-mix(in srgb, var(--surface2) 82%, transparent);
  transform: translateY(-1px);
}
.ftree-card.is-selected.is-hub {
  border-color: transparent;
}

.ftree-card-photo {
  width: 48px; height: 48px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0; background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ftree-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.ftree-card-initials {
  font-size: 18px; font-weight: 700; color: var(--ftree-accent);
}
.ftree-linked-badge {
  position: absolute; top: 7px; right: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--layf-accent-gradient, var(--ftree-accent)); color: var(--surface);
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.ftree-linked-badge.is-legend {
  position: static;
  width: 16px;
  height: 16px;
  font-size: 9px;
  display: inline-flex;
  flex: 0 0 auto;
}
.ftree-card-body { flex: 1; min-width: 0; }
.ftree-card-name {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--ink); line-height: 1.3; word-break: break-word;
}
.ftree-card-years {
  display: block; font-size: 11px; color: var(--ink2); margin-top: 3px;
}
.ftree-status-badge {
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ftree-accent-lt);
  color: var(--ftree-accent);
  font-size: 10px;
  font-weight: 700;
}

/* Empty state */
.ftree-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 80px 24px; text-align: center; gap: 12px;
}
.ftree-empty-icon { font-size: 56px; line-height: 1; }
.ftree-empty h2 { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); margin: 0; }
.ftree-empty p  { color: var(--ink2); margin: 0; }

/* Zoom controls */
.ftree-controls {
  position: absolute; right: 16px; top: 90px;
  display: flex; flex-direction: column; gap: 4px; z-index: 2;
}
.ftree-status-badge.is-memory {
  background: color-mix(in srgb, var(--surface2) 76%, transparent);
  color: var(--ink2);
}
.ftree-ctrl {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; color: var(--ink);
  transition: background .15s; font-family: var(--sans);
}
.ftree-ctrl:hover { background: var(--surface2); color: var(--ftree-accent); }

/* Legend */
.ftree-legend {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; gap: 20px; padding: 10px 24px;
  background: var(--surface); border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink2); flex-wrap: wrap;
  z-index: 10; flex-shrink: 0;
}
.ftree-legend-item { display: flex; align-items: center; gap: 6px; }

/* Centered detail modal */
.ftree-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.32);
  z-index: 300; display: grid; place-items: center;
  padding: 18px;
}
.ftree-panel {
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow-y: auto;
  padding: 0; display: flex; flex-direction: column;
  animation: ftree-pop .18s ease;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.ftree-panel--add,
.ftree-panel--edit {
  width: min(820px, calc(100vw - 28px));
}
@keyframes ftree-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.ftree-panel-head {
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px; position: relative;
}
.ftree-panel-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--surface2); border: none; cursor: pointer;
  font-size: 14px; color: var(--ink2); display: flex;
  align-items: center; justify-content: center;
  transition: background .15s;
}
.ftree-panel-close:hover { background: var(--border); }
.ftree-panel-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  overflow: hidden; background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: var(--ftree-accent);
  flex-shrink: 0;
}
.ftree-panel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ftree-panel-name {
  font-family: var(--sans); font-size: 1.16rem; font-weight: 600;
  color: var(--ink); margin: 0;
}
.ftree-panel-role { color: var(--ink2); font-size: 13px; margin: 0; }
.ftree-status-line { display: flex; flex-wrap: wrap; gap: 6px; }
.ftree-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  width: fit-content; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--ink2);
  background: var(--surface2); font-size: 11px; font-weight: 700;
}
.ftree-status-pill.is-linked {
  border-color: var(--layf-accent-border, color-mix(in srgb, var(--ftree-accent) 52%, var(--border)));
  color: var(--ink);
  background: var(--layf-accent-soft-bg, var(--ftree-accent-lt));
}
.ftree-status-pill.is-pending {
  border-style: dashed;
  color: var(--ink2);
}
.ftree-status-pill.is-memory {
  color: var(--ink2);
  background: color-mix(in srgb, var(--surface2) 82%, transparent);
}

.ftree-panel-meta {
  padding: 16px 20px; display: flex; flex-direction: column; gap: 10px;
}
.ftree-meta-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px;
}
.ftree-meta-row span { color: var(--ink2); }
.ftree-meta-row strong { color: var(--ink); font-weight: 600; text-align: right; max-width: 60%; }

.ftree-panel-actions {
  padding: 0 20px 16px; display: flex; flex-wrap: wrap; gap: 8px;
}
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 72%, var(--border)); }
.btn-danger:hover { background: var(--danger-bg); }

.ftree-invite-block {
  margin: 0 20px 20px; padding: 14px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border);
}
.ftree-invite-hint { font-size: 12px; color: var(--ink2); margin: 0 0 10px; }

/* Form inside panel */
.ftree-form {
  padding: 16px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ftree-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ftree-existing-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ftree-accent) 20%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--ftree-accent) 5%, var(--surface));
}
.ftree-existing-card strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.ftree-existing-card span {
  display: block;
  margin-top: 2px;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}
.ftree-existing-card .field-input,
.ftree-form-grid .field-input,
.ftree-photo-input .field-input {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
}
.ftree-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.ftree-form-grid .field-group,
.ftree-form-grid .field-group + .field-group {
  margin-top: 0;
}
.ftree-form-grid .field-label {
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .42px;
}
.ftree-field-wide {
  grid-column: 1 / -1;
}
.ftree-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ftree-form-or {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left; font-size: 11px; color: var(--ink3);
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  position: relative;
}
.ftree-form-or::before, .ftree-form-or::after {
  content: '';
  position: static;
  flex: 1;
  height: 1px;
  background: var(--border);
}
.ftree-form-preview {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.ftree-photo-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px dashed color-mix(in srgb, var(--ftree-accent) 28%, var(--border));
  border-radius: 12px;
  background: var(--surface2);
}
.ftree-photo-placeholder {
  color: var(--ink2);
  font-size: 13px;
}
.ftree-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.ftree-relations-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.ftree-relations-editor .eyebrow,
.ftree-relations-editor .ftree-form-note {
  grid-column: 1 / -1;
}
.ftree-form-note {
  margin: 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 720px) {
  .ftree-header {
    flex-direction: column;
    align-items: stretch;
  }
  .ftree-scene {
    padding: 24px 12px 92px;
  }
  .ftree-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .ftree-row-label {
    min-width: 0;
    text-align: left;
    padding-right: 0;
  }
  .ftree-sibling-group {
    flex-wrap: wrap;
  }
  .ftree-card {
    width: 156px;
  }
  .ftree-panel {
    width: min(100%, calc(100vw - 18px));
    max-height: calc(100vh - 20px);
    border-radius: 16px;
  }
  .ftree-panel-head {
    padding: 16px 18px 12px;
  }
  .ftree-form {
    padding: 14px 18px 18px;
  }
  .ftree-existing-card,
  .ftree-form-grid,
  .ftree-photo-input {
    grid-template-columns: 1fr;
  }
  .ftree-existing-card {
    gap: 10px;
  }
  .ftree-form-row,
  .ftree-relations-editor {
    grid-template-columns: 1fr;
  }
}
/* ─────────────────────────────────────────────────────────────── end ftree ── */

/* ── FAMILY TREE ── */
.family-tree-page {
  max-width: 1320px;
}

.family-tree-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  margin-bottom: 18px;
}

.family-tree-name-block {
  flex: 1;
  min-width: 220px;
}

.family-tree-name-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.family-tree-name-input {
  max-width: 420px;
  flex: 1;
}

.family-tree-name-btn {
  flex-shrink: 0;
}

.family-tree-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.family-tree-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.family-tree-board {
  padding: 18px;
  min-height: 420px;
}

.family-tree-generation + .family-tree-generation {
  margin-top: 18px;
}

.family-tree-generation-label {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.family-tree-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.family-tree-member-card {
  min-height: 104px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  box-shadow: var(--shadow-xs);
}

.family-tree-member-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-md);
}

.family-tree-member-card.is-active {
  background: var(--accent-lt);
  border-color: var(--accent-md);
}

.family-tree-member-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.family-tree-member-role {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink2);
  min-height: 18px;
}

.family-tree-member-meta {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}

.family-tree-side {
  padding: 18px;
  position: sticky;
  top: 18px;
}

.family-tree-side-empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.family-tree-side-empty h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}

.family-tree-side-empty p {
  margin: 0;
  color: var(--ink2);
  line-height: 1.65;
}

.family-tree-side-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.family-tree-side-kicker {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: var(--accent);
}

.family-tree-side-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
}

.family-tree-you-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--sans);
  letter-spacing: .03em;
  color: var(--accent);
  background: var(--accent-lt);
  border-radius: 20px;
  vertical-align: middle;
  line-height: 1.6;
}

.family-tree-side-role {
  margin-top: 6px;
  color: var(--ink2);
  line-height: 1.5;
}

.family-tree-side-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.family-tree-detail-block + .family-tree-detail-block {
  margin-top: 16px;
}

.family-tree-portrait-card {
  margin: 16px 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
}

.family-tree-portrait {
  width: 92px;
  height: 92px;
  margin: 0 auto;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  display: grid;
  place-items: center;
  font-size: 34px;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}

.family-tree-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-tree-portrait-actions {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.family-tree-detail-label {
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: var(--ink3);
}

.family-tree-detail-text {
  color: var(--ink2);
  line-height: 1.65;
}

.family-tree-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.family-tree-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.family-tree-empty-inline {
  color: var(--ink3);
  line-height: 1.6;
  font-size: 13px;
}

.family-tree-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.family-tree-form-span {
  grid-column: 1 / -1;
}

.family-tree-textarea {
  resize: vertical;
  min-height: 120px;
}

.family-tree-checklist {
  display: grid;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface2);
}

.family-tree-checkrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
}

.family-tree-form-hint {
  margin: 16px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.6;
}

.family-tree-form-actions {
  margin-top: 18px;
}

.family-tree-empty {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.family-tree-empty h2 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}

.family-tree-empty p {
  margin: 0 0 18px;
  max-width: 460px;
  color: var(--ink2);
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .family-tree-layout {
    grid-template-columns: 1fr;
  }

  .family-tree-side {
    position: static;
  }
}

@media (max-width: 767px) {
  .family-tree-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .family-tree-name-row {
    flex-direction: column;
    align-items: stretch;
  }

  .family-tree-name-input {
    max-width: none;
  }

  .family-tree-member-grid {
    grid-template-columns: 1fr;
  }

  .family-tree-side-header {
    flex-direction: column;
  }

  .family-tree-form-grid {
    grid-template-columns: 1fr;
  }
}
/* ── PLANNER ── */
.planner-page {
  max-width: none;
  width: 100%;
}

.planner-quick-add,
.planner-toolbar {
  padding: 18px;
  margin-bottom: 18px;
}

.planner-quick-add-top,
.planner-toolbar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.planner-quick-add-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}

.planner-quick-add-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) 170px 170px auto;
  gap: 10px;
  align-items: center;
}

.planner-filter-group,
.planner-toolbar-actions,
.planner-side-actions,
.planner-status-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.planner-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
  gap: 18px;
  align-items: start;
}

.planner-board {
  padding: 18px;
  min-height: 420px;
}

.planner-side {
  padding: 18px;
  position: sticky;
  top: 18px;
}

.planner-side-empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.planner-side-empty h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}

.planner-side-empty p {
  margin: 0;
  color: var(--ink2);
  line-height: 1.65;
}

.planner-side-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.planner-side-kicker {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: var(--accent);
}

.planner-side-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
}

.planner-side-sub {
  margin-top: 6px;
  color: var(--ink2);
  line-height: 1.5;
}

.planner-detail-block + .planner-detail-block {
  margin-top: 16px;
}

.planner-detail-label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: var(--ink3);
}

.planner-detail-text {
  color: var(--ink2);
  line-height: 1.65;
}

.planner-section + .planner-section {
  margin-top: 18px;
}

.planner-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.planner-section-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
}

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

.planner-task-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.planner-task-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-md);
}

.planner-task-card.is-active {
  background: var(--accent-lt);
  border-color: var(--accent-md);
}

.planner-task-card.is-done {
  opacity: 0.82;
}

.planner-task-card.is-dragging,
.planner-calendar-task.is-dragging {
  opacity: 0.58;
}

.planner-task-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.planner-task-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.planner-pin-badge {
  flex-shrink: 0;
}

.planner-task-meta {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.planner-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--line);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.planner-pill.is-high {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 18%, transparent);
}

.planner-pill.is-medium {
  background: var(--warn-bg);
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 18%, transparent);
}

.planner-pill.is-low {
  background: var(--info-bg);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 18%, transparent);
}

.planner-pill.is-todo {
  background: var(--surface2);
  color: var(--ink2);
}

.planner-pill.is-doing {
  background: var(--info-bg);
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 18%, transparent);
}

.planner-pill.is-done {
  background: var(--pos-bg);
  color: var(--positive);
  border-color: color-mix(in srgb, var(--positive) 18%, transparent);
}

.planner-task-notes-preview {
  margin-top: 10px;
  color: var(--ink2);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.planner-empty-inline {
  color: var(--ink3);
  line-height: 1.6;
  font-size: 13px;
}

.planner-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.planner-form-span {
  grid-column: 1 / -1;
}

.planner-textarea {
  resize: vertical;
  min-height: 140px;
}

.planner-checkrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
}

.planner-form-hint {
  margin: 16px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.6;
}

.planner-form-actions {
  margin-top: 18px;
}

@media (max-width: 1100px) {
  .planner-layout {
    grid-template-columns: 1fr;
  }

  .planner-side {
    position: static;
  }
}

@media (max-width: 900px) {
  .planner-quick-add-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .planner-quick-add-grid,
  .planner-form-grid {
    grid-template-columns: 1fr;
  }

  .planner-side-header {
    flex-direction: column;
  }
}
/* ── PEOPLE ── */
.people-page {
  max-width: none;
  width: 100%;
}

.people-toolbar {
  padding: 18px;
  margin-bottom: 18px;
}

.people-toolbar-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.people-search-wrap {
  min-width: 240px;
  flex: 1;
  max-width: 420px;
}

.people-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.people-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.people-directory {
  padding: 18px;
  min-height: 420px;
}

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

.people-person-card {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  box-shadow: var(--shadow-xs);
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.people-person-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent-md);
}

.people-person-card.is-active {
  background: var(--accent-lt);
  border-color: var(--accent-md);
}

.people-person-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}

.people-person-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.people-person-role {
  margin-top: 6px;
  color: var(--ink2);
  line-height: 1.5;
}

.people-person-content {
  min-width: 0;
  flex: 1;
}

.people-person-meta {
  margin-top: 10px;
  display: grid;
  gap: 4px;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.5;
}

.people-side {
  padding: 28px 30px 70px;
  position: relative;
  min-width: 0;
  overflow-y: auto;
  border-left: 1px solid var(--border);
}

.people-sidebar {
  width: auto;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 16px 10px;
  overflow-y: auto;
}

.people-main {
  min-width: 0;
  padding: 28px 30px 70px;
  overflow-y: auto;
}

.people-sidebar .people-person-card {
  padding: 8px 10px;
  border-radius: 8px;
  box-shadow: none;
  min-height: auto;
}

.people-sidebar .people-person-top {
  align-items: center;
}

.people-side-empty {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.people-side-empty h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}

.people-side-empty p {
  margin: 0;
  color: var(--ink2);
  line-height: 1.65;
}

.people-side-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.people-side-kicker {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: var(--accent);
}

.people-side-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
}

.people-side-sub {
  margin-top: 6px;
  color: var(--ink2);
  line-height: 1.5;
}

.people-side-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.people-detail-block + .people-detail-block {
  margin-top: 16px;
}

.people-detail-label {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.45px;
  color: var(--ink3);
}

.people-detail-text {
  color: var(--ink2);
  line-height: 1.65;
}

.chronicle-text {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
}

.elder-incident {
  border-left: 4px solid var(--border);
}

.elder-incident.is-open {
  border-left-color: var(--danger);
}

.elder-incident.is-resolved {
  border-left-color: var(--positive);
}

.beauty-photo {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.beauty-detail.people-side {
  padding: 0;
  border-left: 0;
  overflow: visible;
}

.creator-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.child-milestone-photo img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

.table-card iframe {
  display: block;
  width: 100%;
  min-height: 300px;
  border: 0;
  border-radius: var(--r-lg);
}

.people-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.people-form-span {
  grid-column: 1 / -1;
}

.people-textarea {
  resize: vertical;
  min-height: 140px;
}

.people-form-hint {
  margin: 16px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.6;
}

.people-form-actions {
  margin-top: 18px;
}

.people-empty {
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.people-empty h2 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
}

.people-empty p {
  margin: 0 0 18px;
  max-width: 460px;
  color: var(--ink2);
  line-height: 1.65;
}

@media (max-width: 1100px) {
  .people-layout {
    grid-template-columns: 1fr;
  }

  .people-side {
    position: static;
  }
}

@media (max-width: 767px) {
  .people-side-header {
    flex-direction: column;
  }

  .people-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Assets */
.assets-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.assets-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

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

.assets-money {
  font-size: 15px;
}

.assets-bridge {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.assets-bridge h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
}

.assets-bridge p {
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.6;
  max-width: 820px;
}

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

.assets-bridge-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
}

.assets-bridge-grid span {
  display: block;
  color: var(--ink3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.assets-bridge-grid strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 15px;
}

.assets-bridge-actions {
  display: flex;
  justify-content: flex-end;
}

.assets-layout {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.assets-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.assets-card {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.assets-card:hover,
.assets-card.is-active {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.assets-card-top,
.assets-detail-head,
.assets-title-row,
.assets-card-foot,
.assets-form-head,
.assets-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.assets-card-main {
  flex: 1;
  min-width: 0;
}

.assets-card-icon,
.assets-detail-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface2);
  font-size: 20px;
  flex-shrink: 0;
}

.assets-card-title {
  font-weight: 700;
  color: var(--ink);
}

.assets-card-address,
.assets-card-foot,
.assets-detail-head p,
.assets-info-row small,
.assets-doc.empty {
  color: var(--ink3);
  font-size: 12px;
}

.assets-status {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.assets-card-stats,
.assets-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.assets-card-stats div {
  min-width: 0;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface2);
}

.assets-card-stats span {
  display: block;
  font-size: 10px;
  color: var(--ink3);
  margin-bottom: 3px;
}

.assets-card-stats strong {
  display: block;
  font-size: 12px;
  color: var(--ink);
}

.assets-card-foot {
  justify-content: space-between;
  margin-top: 12px;
}

.positive {
  color: var(--green);
}

.warning {
  color: var(--warning);
}

.assets-detail-panel {
  min-width: 0;
}

.assets-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.assets-photo {
  position: relative;
  min-height: 220px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface2);
  border: 1px solid var(--line);
  cursor: pointer;
}

.assets-photo img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.assets-photo-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--ink3);
}

.assets-photo-empty span {
  font-size: 44px;
}

.assets-photo-btn {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.assets-detail-head {
  align-items: flex-start;
}

.assets-detail-head > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.assets-detail-head h2 {
  font-family: var(--serif);
  font-size: 24px;
  margin: 0;
}

.assets-detail-actions {
  display: flex;
  gap: 8px;
}

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

.assets-metrics .card {
  padding: 14px;
}

.assets-metrics span {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.assets-metrics strong {
  display: block;
  font-family: var(--serif);
  font-size: 18px;
}

.assets-metrics small {
  color: var(--ink3);
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
}

.assets-info {
  padding: 0;
  overflow: hidden;
}

.assets-info-row {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line2);
}

.assets-info-row:last-child {
  border-bottom: 0;
}

.assets-info-row > span {
  width: 24px;
  text-align: center;
}

.assets-info-row strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}

.assets-docs h3,
.assets-notes h3 {
  font-family: var(--serif);
  font-size: 18px;
  margin: 0 0 10px;
}

.assets-doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.assets-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.assets-notes {
  padding: 16px;
}

.assets-notes p {
  margin: 0;
  line-height: 1.6;
  color: var(--ink2);
}

.assets-empty-detail,
.assets-empty-list {
  min-height: 220px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--ink3);
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.assets-empty-detail div {
  font-size: 40px;
}

.assets-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
}

.assets-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.assets-form {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.assets-form-head {
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.assets-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.assets-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink2);
}

.assets-form-span {
  grid-column: 1 / -1;
}

.assets-form-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

@media (max-width: 920px) {
  .assets-layout,
  .assets-bridge-grid,
  .assets-summary,
  .assets-metrics {
    grid-template-columns: 1fr;
  }

  .assets-page-head,
  .assets-detail-head,
  .assets-title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .assets-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── PLANNER CALENDAR UPGRADE ── */
.planner-layout-rich {
  grid-template-columns: minmax(0, 1.5fr) minmax(340px, 0.72fr);
  align-items: start;
}

.planner-layout-rich.is-workflow-tab {
  grid-template-columns: minmax(0, 1fr);
}

.planner-layout-rich.is-v2-shell {
  grid-template-columns: minmax(0, 1fr);
}

.planner-main-stack {
  display: grid;
  gap: 16px;
}

.planner-v2-toolbar {
  display: grid;
  gap: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 90%, var(--base));
}

.planner-tab-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.planner-tab-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface2) 70%, var(--base));
}

.planner-tab-chip {
  border: 0;
  border-radius: 8px;
  padding: 6px 12px;
  background: transparent;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

.planner-tab-chip:hover {
  background: var(--surface2);
  color: var(--ink);
}

.planner-tab-chip.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--shadow-xs);
}

.planner-search {
  width: 170px;
  max-width: 100%;
  min-height: 34px;
}

.planner-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.planner-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.planner-filter-chip {
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, var(--base));
  color: var(--ink2);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.planner-filter-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  color: var(--ink);
}

.planner-filter-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.planner-detail-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.planner-calendar {
  padding: 18px 18px 16px;
  overflow: hidden;
  border-radius: 18px;
}

.planner-calendar-title-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.planner-calendar-title-row p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.5;
  max-width: 620px;
}

.planner-calendar-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.planner-calendar-more {
  margin-left: auto;
}

.planner-trash-zone {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink2);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease;
}

.planner-trash-zone.is-drag-over {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
  transform: scale(1.08);
}

@keyframes plannerTrashPulse {
  0%   { transform: scale(1.08); border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
  45%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}

.planner-trash-zone.is-pulse {
  animation: plannerTrashPulse 0.4s ease forwards;
}

.planner-calendar-viewport {
  overflow: hidden;
  border-radius: 10px;
  cursor: grab;
  position: relative;
  user-select: none;
}

.planner-calendar-viewport:active {
  cursor: grabbing;
}

.planner-calendar-strip {
  display: grid;
  grid-auto-columns: 94px;
  grid-auto-flow: column;
  gap: 6px;
  padding: 2px 2px 10px;
  will-change: transform;
  cursor: inherit;
}

.planner-calendar-day {
  min-height: 240px;
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 92%, var(--base));
  overflow: hidden;
  cursor: pointer;
  box-shadow: none;
}

.planner-calendar-day.is-month-end {
  border-right: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  position: relative;
}

.planner-calendar-day.is-month-end::after {
  content: attr(data-month-label);
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent);
  opacity: 0.55;
  pointer-events: none;
  text-transform: uppercase;
}

.planner-calendar-day.is-today {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface) 98%, var(--base));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.planner-calendar-day.is-drag-over {
  outline: 2px solid var(--accent-md);
  outline-offset: 2px;
}

/* Cars module */
.cars-page {
  padding: 28px clamp(14px, 2vw, 28px) 80px;
}

.cars-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0 auto 18px;
  max-width: 1180px;
}

.cars-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.cars-head p {
  max-width: 740px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

.cars-stats,
.cars-layout {
  max-width: 1180px;
  margin-inline: auto;
}

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

.cars-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.cars-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.cars-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
}

.cars-stat.is-warning strong {
  color: var(--warning);
}

.cars-stat.is-positive strong {
  color: var(--positive);
}

.cars-stat.is-info strong {
  color: var(--info);
}

.cars-alerts {
  max-width: 1180px;
  margin: 0 auto 14px;
  display: grid;
  gap: 8px;
}

.cars-alert {
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--warn-bg);
  color: var(--warning);
  font-size: 13px;
  font-weight: 800;
}

.cars-alert.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.cars-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.cars-list,
.cars-detail-panel {
  padding: 14px;
}

.car-card {
  width: 100%;
  padding: 14px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.car-card + .car-card {
  margin-top: 10px;
}

.car-card.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.car-swatch {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
}

.car-card-main {
  min-width: 0;
}

.car-card-main strong,
.car-card-main small {
  display: block;
}

.car-card-main strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.car-card-main small {
  margin-top: 4px;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
}

.car-card-tags {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.car-card-tags em {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.car-card-tags .is-ok {
  background: var(--pos-bg);
  color: var(--positive);
}

.car-card-tags .is-warning {
  background: var(--warn-bg);
  color: var(--warning);
}

.cars-empty,
.cars-empty-detail {
  min-height: 280px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  text-align: center;
}

.cars-empty-detail div {
  font-size: 42px;
}

.car-hero {
  min-height: 220px;
  padding: 22px;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--car-color, var(--accent));
}

.car-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.car-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, 0.58));
}

.car-hero-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 70px;
}

.car-hero-copy,
.car-photo-btn {
  position: relative;
  z-index: 1;
}

.car-hero-copy {
  min-width: 0;
  margin-right: auto;
}

.car-hero-copy h2 {
  margin: 0;
  color: var(--accent-contrast);
  font-family: var(--serif);
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.08;
}

.car-hero-copy p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.78);
}

.car-photo-btn {
  color: var(--accent-contrast);
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.16);
}

.cars-detail-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.cars-detail-actions {
  margin: 14px 0;
}

.cars-info-grid,
.cars-two-col {
  display: grid;
  gap: 10px;
}

.cars-info-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 14px;
}

.cars-info-grid div,
.cars-panel,
.cars-note {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.cars-info-grid span,
.cars-info-row span,
.cars-note strong {
  display: block;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.cars-info-grid strong,
.cars-info-row strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cars-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.cars-panel h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 16px;
}

.cars-info-row {
  padding: 9px 0;
  border-top: 1px solid var(--line2);
}

.cars-info-row:first-of-type {
  border-top: 0;
}

.cars-docs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cars-docs span {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
}

.cars-note {
  margin-bottom: 14px;
}

.cars-note p {
  margin: 6px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

/* car-modal/car-form/car-form-head → module-form-modal (2026-05-11) */

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

.car-form-grid .is-wide {
  grid-column: 1 / -1;
}

/* car-form-actions → module-form-modal-foot (2026-05-11) */

@media (max-width: 980px) {
  .cars-head,
  .cars-layout {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

  .cars-stats,
  .cars-info-grid,
  .cars-two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cars-page {
    padding: 20px 12px 70px;
  }

  .cars-stats,
  .cars-info-grid,
  .cars-two-col,
  .car-form-grid {
    grid-template-columns: 1fr;
  }

  .car-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

.planner-calendar-day.is-drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.planner-calendar-day {
  position: relative;
}

.planner-calendar-day-head {
  min-height: 52px;
  padding: 8px 10px 6px;
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  background: transparent;
  position: relative;
}

.planner-day-add {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background 0.12s ease, color 0.12s ease;
  font-family: var(--sans);
}

.planner-calendar-day:hover .planner-day-add {
  color: var(--ink3);
}

.planner-day-add:hover {
  background: var(--accent) !important;
  color: #fff !important;
}

.planner-calendar-day-head span {
  color: var(--ink3);
  font-size: 10px;
  text-transform: capitalize;
}

.planner-calendar-day-head strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  font-family: var(--serif);
}

.planner-calendar-day-body {
  display: grid;
  gap: 4px;
  padding: 8px;
}

.planner-calendar-task {
  padding: 6px 7px;
  border: 1px solid color-mix(in srgb, var(--line) 58%, transparent);
  border-left-width: 3px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 95%, var(--base));
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.planner-calendar-task:hover,
.planner-calendar-task:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.planner-calendar-task.is-high {
  border-left-color: var(--danger);
}

.planner-calendar-task.is-medium {
  border-left-color: var(--warning);
}

.planner-calendar-task.is-low {
  border-left-color: var(--info);
}

.planner-calendar-task.is-dragging {
  opacity: 0.58;
}

.planner-task-card.is-focus,
.planner-calendar-task.is-focus {
  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 24%, var(--line));
}

.planner-task-card.is-focus.is-done,
.planner-calendar-task.is-focus.is-done,
.planner-task-card.is-pinned-done,
.planner-calendar-task.is-pinned-done {
  background: color-mix(in srgb, var(--positive) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--positive) 30%, var(--line));
}

.planner-task-card.is-focus.is-active,
.planner-calendar-task.is-focus.is-active {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 30%, var(--accent-md));
}

.planner-calendar-task.is-done {
  opacity: 0.74;
}

.planner-calendar-task strong {
  display: block;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.28;
  font-weight: 500;
}

.planner-carry-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  font-size: 8px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--danger-bg);
  color: var(--danger);
  letter-spacing: 0.02em;
  line-height: 1.4;
}

.planner-calendar-task span {
  display: block;
  margin-top: 2px;
  color: var(--ink3);
  font-size: 9px;
  line-height: 1.3;
}

.planner-calendar-empty {
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--ink3);
  font-size: 12px;
}

.planner-inspector {
  padding: 14px 16px;
}

.planner-inspector .planner-side-header {
  margin-bottom: 18px;
}

.planner-task-card.is-overdue {
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

.planner-pin-badge {
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 11px;
  font-weight: 800;
  border: 1px solid color-mix(in srgb, var(--danger) 16%, transparent);
}

.planner-checklist {
  display: grid;
  gap: 8px;
}

.planner-check-item {
  display: flex;
  align-items: start;
  gap: 9px;
  color: var(--ink2);
  line-height: 1.5;
}

.planner-check-item input {
  margin-top: 3px;
}

.planner-check-item input:checked + span {
  color: var(--ink3);
  text-decoration: line-through;
}

.planner-textarea.is-compact {
  min-height: 92px;
}

.planner-pinned {
  padding: 16px 18px;
  border-radius: 16px;
}

.planner-workflows {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 16px;
}

.planner-workflow-list {
  display: grid;
  gap: 14px;
}

.planner-workflow-card {
  border: 0.5px solid var(--line);
  border-radius: 10px;
  background: var(--warm-card);
  padding: 12px 14px;
  box-shadow: none;
}

.planner-workflow-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.planner-workflow-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.planner-workflow-members {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: var(--ink2);
  font-size: 12px;
}

.planner-avatar-mini {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-lt);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}

.planner-workflow-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.planner-workflow-chain {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.planner-workflow-chain::-webkit-scrollbar {
  display: none;
}

.planner-workflow-step {
  flex: 0 0 auto;
  min-width: 80px;
  max-width: 140px;
  display: grid;
  gap: 4px;
  position: relative;
  text-align: left;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 8px 14px;
  background: var(--warm-card);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.planner-workflow-step strong {
  font-size: 12px;
  color: var(--ink);
}

.planner-workflow-step span,
.planner-workflow-step em {
  font-size: 10px;
  color: var(--ink2);
  font-style: normal;
}

.planner-workflow-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.planner-workflow-step.is-done {
  background: var(--pos-bg);
  border-color: color-mix(in srgb, var(--positive) 48%, var(--line));
}

.planner-workflow-step.is-done strong {
  color: var(--positive);
}

.planner-workflow-step.is-done span,
.planner-workflow-step.is-done em {
  color: var(--positive);
  opacity: 0.75;
}

.planner-workflow-step.is-current {
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 80%, #111 20%);
}

.planner-workflow-step.is-current strong,
.planner-workflow-step.is-current span,
.planner-workflow-step.is-current em {
  color: var(--accent-contrast);
}

@keyframes plannerDotPulse {
  0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
  50%       { opacity: 0.45; transform: translateX(-50%) scale(1.7); }
}

.planner-workflow-step.is-current::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
  animation: plannerDotPulse 1.5s ease-in-out infinite;
}

.planner-workflow-step.is-upcoming {
  background: var(--warm-card);
  border-color: var(--line);
  opacity: 0.55;
}

.planner-workflow-check {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--positive);
  color: var(--accent-contrast);
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--surface);
}

.planner-workflow-arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wl);
}

.planner-workflow-arrow svg {
  width: 14px;
  height: 14px;
  stroke: var(--wl);
  stroke-width: 1.5;
  fill: none;
}

.planner-workflow-add {
  width: 32px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1.5px dashed var(--line);
  background: transparent;
  color: var(--ink2);
  font-size: 18px;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

.planner-workflow-add:hover {
  background: var(--surface2);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

.planner-workflow-progress {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.planner-workflow-track {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.planner-workflow-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.35s ease, background 0.35s ease;
}

.planner-pinned-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.planner-pinned-head p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 12px;
}

.planner-pinned-head-link {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
}

.planner-wf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.planner-wf-head-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--warm-ink-3);
}

.planner-wf-head-title svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex: 0 0 auto;
}

.planner-wf-head-btn {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  transition: background .18s;
  white-space: nowrap;
}

.planner-wf-head-btn:hover {
  background: var(--surface2);
}

.planner-wf-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
}

.planner-wf-badge.is-shared {
  background: var(--info-bg);
  color: var(--info);
}

.planner-wf-badge.is-private {
  background: var(--surface2);
  color: var(--ink2);
}

.planner-wf-badge.is-count {
  background: var(--surface2);
  color: var(--ink2);
}

.planner-pinned-head-actions,
.planner-pinned-column-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.planner-pinned-columns {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.planner-pinned-column {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, var(--base));
}

.planner-pinned-column.is-drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

.planner-pinned-column-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.planner-pinned-column-head h3 {
  margin: 0;
  color: var(--wl);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
}

.planner-pinned-plus {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--wl);
  font-size: 15px;
  cursor: pointer;
}

.planner-pinned-plus:hover {
  border-color: var(--accent-md);
  color: var(--accent);
}

.planner-task-card {
  padding: 12px;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--line) 65%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, var(--base));
  box-shadow: none;
}

.planner-task-card:hover {
  box-shadow: none;
}

.planner-task-title {
  font-size: 13px;
  font-weight: 600;
}

.planner-pinned-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.planner-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  /* Aligned with the shared modal helper (.lf-modal-*) backdrop. */
  background: color-mix(in srgb, #000 30%, transparent);
  backdrop-filter: blur(10px);
}

.planner-modal-backdrop {
  position: absolute;
  inset: 0;
}

.planner-modal-card {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-radius: 8px;
}

.planner-quick-modal {
  width: min(840px, 100%);
}

/* ── Quick-add card (new design) ────────────────────────── */
.planner-quick-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  background: var(--surface);
  border: var(--layf-border);
  border-radius: var(--layf-modal-radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.planner-qm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 22px 0;
}

.planner-qm-kicker {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.planner-qm-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

.planner-qm-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: var(--surface2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease, color .12s ease;
  margin-top: 2px;
}

.planner-qm-close:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

.planner-qm-body {
  padding: 16px 22px;
  display: grid;
  gap: 12px;
}

.planner-qm-title-input {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.planner-qm-title-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt);
}

.planner-qm-title-input::placeholder {
  color: var(--ink3);
}

.planner-qm-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.planner-qm-field {
  display: grid;
  gap: 4px;
}

.planner-qm-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink3);
}

.planner-qm-input {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
  outline: none;
  width: 100%;
  transition: border-color .15s ease;
}

.planner-qm-input:focus {
  border-color: var(--accent);
}

.planner-qm-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 22px 20px;
}

.planner-qm-btn-ghost {
  font-size: 12px;
  color: var(--ink3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .12s ease;
}

.planner-qm-btn-ghost:hover {
  color: var(--ink);
}

.planner-qm-btn-primary {
  padding: 10px 22px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: opacity .15s ease;
}

.planner-qm-btn-primary:hover {
  opacity: 0.86;
}

.planner-qm-btn-ghost.is-danger {
  color: var(--danger);
}

.planner-qm-btn-ghost.is-danger:hover {
  color: var(--danger);
}

.planner-qm-checkrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink2);
  cursor: pointer;
  user-select: none;
}

.planner-qm-checkrow input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.planner-qm-textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
}

.planner-wf-title-brick strong {
  color: #fff !important;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-wf-title-brick em {
  color: rgba(255,255,255,0.65) !important;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.planner-wf-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.planner-wf-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  flex-shrink: 0;
}

.planner-wf-color-swatch.is-active {
  border-color: var(--ink);
  transform: scale(1.18);
}

.planner-wf-color-swatch:hover:not(.is-active) {
  transform: scale(1.1);
}

.planner-wf-color-custom {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  background: none;
  flex-shrink: 0;
}

@media (max-width: 520px) {
  .planner-qm-row {
    grid-template-columns: 1fr 1fr;
  }
}

.planner-workflow-modal {
  width: min(620px, 100%);
}

.planner-quick-form-grid {
  margin-top: 2px;
}

.planner-status-hint {
  margin: 10px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

.planner-full-modal {
  width: min(980px, 100%);
}

.planner-modal-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.planner-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* ── Delete flash overlay ───────────────────────────────── */
@keyframes plannerDeleteFlash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

.planner-delete-flash {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  background: var(--danger-bg);
  animation: plannerDeleteFlash 0.65s ease forwards;
}

/* ── Congrats popup ─────────────────────────────────────── */
@keyframes plannerCongratsIn {
  0%   { opacity: 0; transform: translate(-50%, 12px) scale(0.94); }
  100% { opacity: 1; transform: translate(-50%, 0)    scale(1); }
}

.planner-congrats {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--positive) 28%, var(--line));
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--serif);
  pointer-events: none;
  opacity: 0;
  z-index: 50;
}

.planner-congrats.is-visible {
  animation: plannerCongratsIn 0.3s cubic-bezier(0.34, 1.5, 0.64, 1) forwards;
}

.planner-congrats-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--positive) 16%, var(--surface));
  color: var(--positive);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--sans);
  flex-shrink: 0;
}

.planner-congrats-text {
  color: var(--ink);
}

/* ── Toast ──────────────────────────────────────────────── */
.planner-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 40;
}

.planner-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

@media (max-width: 1180px) {
  .planner-layout-rich {
    grid-template-columns: 1fr;
  }

  .planner-side {
    position: static;
  }

  .planner-tab-row,
  .planner-calendar-title-row,
  .planner-workflow-top {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .planner-calendar-title-row,
  .planner-toolbar,
  .planner-tab-row {
    flex-direction: column;
  }

  .planner-toolbar-actions,
  .planner-filter-group {
    width: 100%;
  }

  .planner-toolbar-actions .btn,
  .planner-filter-group .btn,
  .planner-search {
    width: 100%;
  }

  .planner-detail-grid,
  .planner-quick-add-grid-rich {
    grid-template-columns: 1fr;
  }

  .planner-calendar {
    padding: 12px;
  }

  .planner-calendar-strip {
    grid-auto-columns: 228px;
  }

  .planner-workflow-step {
    min-width: 200px;
  }

  .planner-modal {
    padding: 12px;
    align-items: stretch;
  }

  .planner-modal-card {
    max-height: calc(100vh - 24px);
  }

  .planner-pinned-grid {
    grid-template-columns: 1fr;
  }
}

/* ── FAMILY TREE VISUAL CANVAS ── */
.family-tree-page {
  max-width: 1500px;
}

.family-tree-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.family-tree-canvas-card {
  padding: 0;
  overflow: hidden;
}

.family-tree-canvas-head {
  min-height: 78px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface2) 58%, var(--surface)) 100%);
}

.family-tree-canvas-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
}

.family-tree-canvas-head p {
  margin: 5px 0 0;
  color: var(--ink2);
  line-height: 1.55;
  font-size: 13px;
}

.family-tree-canvas-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.family-tree-canvas {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent-lt) 55%, var(--surface)) 0%, var(--surface2) 100%);
  touch-action: none;
}

.family-tree-watermark {
  position: absolute;
  left: 50%;
  bottom: -38px;
  width: 420px;
  height: 380px;
  transform: translateX(-50%);
  opacity: 0.06;
  pointer-events: none;
}

.family-tree-watermark::before,
.family-tree-watermark::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
}

.family-tree-watermark::before {
  bottom: 0;
  width: 34px;
  height: 210px;
  border-radius: 8px 8px 0 0;
}

.family-tree-watermark::after {
  bottom: 140px;
  width: 280px;
  height: 210px;
  border-radius: 50%;
  box-shadow:
    -92px 36px 0 -30px var(--accent),
    92px 36px 0 -30px var(--accent),
    -58px -42px 0 -44px var(--accent),
    58px -42px 0 -44px var(--accent);
}

.family-tree-svg,
.family-tree-node-layer {
  position: absolute;
  inset: 0;
}

.family-tree-svg {
  z-index: 1;
  pointer-events: none;
}

.family-tree-svg-line {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.family-tree-svg-line.is-parent {
  stroke: color-mix(in srgb, var(--accent) 34%, transparent);
  stroke-width: 1.6;
  stroke-dasharray: 5 5;
}

.family-tree-svg-line.is-partner {
  stroke: color-mix(in srgb, var(--accent) 42%, transparent);
  stroke-width: 1.8;
}

.family-tree-child-dot {
  fill: color-mix(in srgb, var(--accent) 48%, transparent);
  vector-effect: non-scaling-stroke;
}

.family-tree-heart-dot {
  fill: var(--surface);
  stroke: color-mix(in srgb, var(--accent) 32%, transparent);
  vector-effect: non-scaling-stroke;
}

.family-tree-heart {
  fill: var(--accent);
  font-size: 3px;
  font-family: var(--sans);
}

.family-tree-node-layer {
  z-index: 2;
}

.family-tree-visual-node {
    position: absolute;
    width: 112px;
    min-height: 142px;
    transform: translate(-50%, -38px);
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: grab;
  user-select: none;
  touch-action: none;
  text-align: center;
}

.family-tree-visual-node:hover .family-tree-avatar,
.family-tree-visual-node.is-active .family-tree-avatar,
.family-tree-visual-node.is-dragging .family-tree-avatar {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 0 4px var(--surface);
}

.family-tree-visual-node.is-dragging {
  cursor: grabbing;
  z-index: 4;
}

.family-tree-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid var(--surface);
  background: radial-gradient(circle at 38% 32%, var(--surface) 0%, color-mix(in srgb, var(--accent) 72%, #ffffff) 42%, var(--accent) 100%);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 0 1px var(--line);
  font-size: 30px;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.family-tree-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
  }

.family-tree-avatar > span,
.family-tree-visual-name,
.family-tree-visual-role,
.family-tree-visual-meta {
    pointer-events: none;
    user-select: none;
}

.family-tree-visual-name {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.family-tree-visual-role,
.family-tree-visual-meta {
  color: var(--ink3);
  font-size: 10px;
  line-height: 1.25;
}

.family-tree-visual-role {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.family-tree-visual-meta {
  opacity: 0;
  transition: opacity 0.16s ease;
}

.family-tree-visual-node:hover .family-tree-visual-meta,
.family-tree-visual-node.is-active .family-tree-visual-meta {
  opacity: 1;
}

.family-tree-generations {
  padding: 18px;
}

@media (max-width: 1180px) {
  .family-tree-canvas {
    min-height: 560px;
  }

  .family-tree-canvas-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .family-tree-canvas {
    min-height: 520px;
  }

  .family-tree-canvas-actions,
  .family-tree-canvas-actions .btn {
    width: 100%;
  }

  .family-tree-visual-node {
      width: 96px;
      transform: translate(-50%, -32px);
    }

  .family-tree-avatar {
    width: 64px;
    height: 64px;
    font-size: 25px;
  }

  .family-tree-visual-name {
    font-size: 12px;
  }
}

/* ── FAMILY CALENDAR MODULE ── */
.calendar-page {
  max-width: 1480px;
}

.calendar-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.calendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}

.calendar-board {
  padding: 18px;
  min-width: 0;
}

.calendar-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.calendar-nav h2 {
  min-width: 240px;
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  text-transform: capitalize;
}

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

.calendar-weekdays {
  margin-bottom: 4px;
}

.calendar-weekdays div {
  padding: 8px 0;
  text-align: center;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.calendar-cell {
  min-height: 118px;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.calendar-cell:hover {
  border-color: var(--accent-md);
  box-shadow: var(--shadow-xs);
}

.calendar-cell.is-empty {
  visibility: hidden;
  cursor: default;
}

.calendar-cell.is-today {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.calendar-cell-day {
  font-weight: 800;
  font-size: 13px;
}

.calendar-cell-events {
  display: grid;
  gap: 4px;
}

.calendar-event-chip {
  min-width: 0;
  min-height: 24px;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.calendar-event-chip span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-more {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 700;
}

.calendar-type-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 3px;
  display: inline-block;
}

.calendar-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.calendar-panel {
  padding: 16px;
}

.calendar-kicker {
  margin-bottom: 10px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.calendar-upcoming-card {
  width: 100%;
  padding: 9px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.calendar-upcoming-card:hover,
.calendar-upcoming-card.is-active {
  background: var(--surface2);
  border-color: var(--line);
}

.calendar-upcoming-date {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 8px;
  background: var(--accent-lt);
  color: var(--accent);
  flex-shrink: 0;
}

.calendar-upcoming-date strong {
  font-size: 16px;
  line-height: 1;
}

.calendar-upcoming-date span {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.calendar-upcoming-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.calendar-upcoming-body strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.calendar-upcoming-body span {
  color: var(--ink3);
  font-size: 11px;
}

.calendar-detail-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: var(--ink3);
}

.calendar-detail-empty h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
}

.calendar-detail-empty p {
  margin: 0;
  line-height: 1.55;
}

.calendar-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.calendar-detail-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
}

.calendar-detail-head p {
  margin: 6px 0 0;
  color: var(--ink2);
  line-height: 1.45;
}

.calendar-detail-actions,
.calendar-form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.calendar-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.calendar-detail-grid div,
.calendar-detail-note {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
}

.calendar-detail-grid span,
.calendar-detail-note span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.calendar-detail-grid strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.calendar-detail-note {
  margin-top: 10px;
}

.calendar-detail-note p {
  margin: 0;
  color: var(--ink2);
  line-height: 1.6;
}

.calendar-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink2);
  font-size: 12px;
}

.calendar-empty-small {
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.55;
}

.calendar-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.calendar-modal[hidden] {
  display: none;
}

.calendar-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.calendar-form {
  position: relative;
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.calendar-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.calendar-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.calendar-form-span {
  margin-top: 12px;
}

.calendar-member-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.calendar-member-hint {
  display: block;
  margin-top: 8px;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.5;
}

.calendar-member-pill {
  min-height: 32px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.calendar-member-pill input {
  accent-color: var(--accent);
}

.calendar-textarea {
  resize: vertical;
  min-height: 96px;
}

.calendar-form-actions {
  margin-top: 16px;
}

@media (max-width: 1100px) {
  .calendar-layout {
    grid-template-columns: 1fr;
  }

  .calendar-side {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .calendar-page-head,
  .calendar-nav,
  .calendar-detail-head {
    flex-direction: column;
  }

  .calendar-page-head .btn,
  .calendar-nav .btn,
  .calendar-detail-actions .btn {
    width: 100%;
  }

  .calendar-nav h2 {
    min-width: 0;
    width: 100%;
  }

  .calendar-weekdays,
  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .calendar-weekdays {
    display: none;
  }

  .calendar-cell.is-empty {
    display: none;
  }

  .calendar-cell {
    min-height: 96px;
  }

  .calendar-detail-grid,
  .calendar-form-grid,
  .calendar-legend {
    grid-template-columns: 1fr;
  }
}

/* ── IMPORTANT DATES MODULE ── */
.important-dates-page {
  max-width: 1100px;
}

.important-date-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.important-date-toolbar {
  margin: 18px 0;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.important-date-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.important-date-total {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.important-date-board {
  padding: 18px;
}

.important-date-section + .important-date-section {
  margin-top: 20px;
}

.important-date-section-head {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.important-date-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.important-date-section-head span {
  min-width: 26px;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 12px;
  font-weight: 800;
}

.important-date-row {
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.important-date-row + .important-date-row {
  margin-top: 8px;
}

.important-date-row.is-warning {
  border-left: 4px solid var(--warning);
}

.important-date-row.is-danger {
  border-left: 4px solid var(--danger);
}

.important-date-row.is-info {
  border-left: 4px solid var(--info);
}

.important-date-row.is-accent {
  border-left: 4px solid var(--accent);
}

.important-date-row.is-neutral {
  border-left: 4px solid var(--ink3);
}

.important-date-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface2);
  font-size: 20px;
}

.important-date-main {
  min-width: 0;
}

.important-date-main h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.important-date-main p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.5;
}

.important-date-countdown {
  min-width: 132px;
  text-align: right;
}

.important-date-countdown strong {
  display: block;
  color: var(--accent);
  font-size: 13px;
  line-height: 1.2;
}

.important-date-countdown span {
  display: block;
  margin-top: 4px;
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.35;
}

.important-date-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.important-date-empty,
.important-date-empty-inline {
  color: var(--ink3);
  line-height: 1.6;
  font-size: 13px;
}

.important-date-empty {
  min-height: 140px;
  display: grid;
  place-items: center;
  text-align: center;
}

.important-date-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.important-date-modal[hidden] {
  display: none;
}

.important-date-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.important-date-form {
  position: relative;
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.important-date-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.important-date-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

.important-date-kicker {
  margin-bottom: 6px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.important-date-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.important-date-form-span {
  margin-top: 12px;
}

.important-date-checkrow {
  margin-top: 12px;
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
}

.important-date-checkrow input {
  accent-color: var(--accent);
}

.important-date-form-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .important-date-page-head,
  .important-date-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .important-date-page-head .btn,
  .important-date-filters .btn {
    width: 100%;
  }

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

  .important-date-countdown {
    text-align: left;
  }

  .important-date-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .important-date-actions .btn {
    flex: 1;
  }

  .important-date-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── ERRANDS / TASKS HEALTH MODULE ── */
.errands-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 30px 24px 80px;
}

.errands-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.errands-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
}

.errands-lead {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.7;
}

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

.errands-stat {
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.errands-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.errands-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.errands-stat.is-danger {
  border-left: 4px solid var(--danger);
}

.errands-stat.is-warning {
  border-left: 4px solid var(--warning);
}

.errands-stat.is-info {
  border-left: 4px solid var(--info);
}

.errands-stat.is-done {
  border-left: 4px solid var(--positive);
}

.errands-toolbar {
  margin-bottom: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.errands-tabs,
.errands-categories {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.errands-categories {
  margin-bottom: 16px;
}

.errands-search {
  min-width: min(290px, 100%);
}

.errands-search span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.errands-search input {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  font: inherit;
}

.errands-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.75fr);
  gap: 14px;
  align-items: start;
}

.errands-list,
.errands-detail {
  padding: 14px;
}

.errand-row {
  min-height: 74px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.errand-row + .errand-row {
  margin-top: 8px;
}

.errand-row.is-selected {
  border-color: var(--accent);
  background: var(--surface2);
}

.errand-row.is-done {
  opacity: 0.68;
}

.errand-check {
  width: 26px;
  height: 26px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--positive);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.errand-main {
  min-width: 0;
  cursor: pointer;
}

.errand-main h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.errand-main p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.errand-priority,
.errand-due,
.errand-status {
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.errand-priority.is-wysoki {
  background: var(--danger-bg);
  color: var(--danger);
}

.errand-priority.is-średni {
  background: var(--warn-bg);
  color: var(--warning);
}

.errand-priority.is-niski {
  background: var(--surface2);
  color: var(--ink3);
}

.errand-due.is-danger {
  color: var(--danger);
}

.errand-due.is-warning {
  color: var(--warning);
}

.errand-due.is-done {
  color: var(--positive);
}

.errand-due.is-neutral {
  color: var(--ink3);
}

.errands-empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  text-align: center;
  line-height: 1.6;
}

.errands-empty.is-detail {
  min-height: 320px;
}

.errands-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.errands-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
}

.errand-status.is-open {
  background: var(--info-bg);
  color: var(--info);
}

.errand-status.is-done {
  background: var(--pos-bg);
  color: var(--positive);
}

.errands-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.errands-meta div,
.errands-note,
.errands-calendar-link {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface2);
}

.errands-meta dt,
.errands-note span {
  margin-bottom: 4px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.errands-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.errands-note,
.errands-calendar-link {
  margin-top: 12px;
}

.errands-note p,
.errands-calendar-link span {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.55;
}

.errands-calendar-link strong {
  color: var(--ink);
  font-size: 13px;
}

.errands-calendar-link.is-linked {
  border: 1px solid color-mix(in srgb, var(--positive) 24%, transparent);
}

.errands-detail-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* errand-modal/errand-form/errand-form-head/errand-form-actions → module-form-modal (2026-05-11) */

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

.errand-checkrow {
  margin-top: 12px;
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
}

.errand-checkrow input {
  accent-color: var(--accent);
}

/* errand-form-actions → module-form-modal-foot (2026-05-11) */

@media (max-width: 900px) {
  .errands-head,
  .errands-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

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

  .errands-layout {
    grid-template-columns: 1fr;
  }

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

  .errand-priority,
  .errand-due {
    justify-self: start;
  }

  .errand-form-grid,
  .errands-meta {
    grid-template-columns: 1fr;
  }
}

/* ── SHOPPING MODULE ── */
.shopping-page {
  width: 100%;
}

.shopping-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.shopping-sidebar,
.shopping-main {
  min-width: 0;
}

.shopping-sidebar {
  padding: 14px;
}

.shopping-sidebar-head,
.shopping-head,
.shopping-section-head,
.shopping-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.shopping-sidebar-head {
  margin-bottom: 14px;
}

.shopping-sidebar-head h1,
.shopping-head h2,
.shopping-no-list h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.15;
}

.shopping-sidebar-head h1 {
  font-size: 21px;
}

.shopping-list-tabs {
  display: grid;
  gap: 8px;
}

.shopping-list-tab {
  width: 100%;
  min-height: 88px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.shopping-list-tab.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.shopping-list-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.shopping-list-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
}

.shopping-list-count {
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.shopping-list-tab small {
  grid-column: 1 / -1;
  color: var(--ink3);
  font-size: 11px;
  line-height: 1.4;
}

.shopping-progress {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface3);
}

.shopping-progress span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--positive);
}

.shopping-main {
  padding-right: 2px;
}

.shopping-head {
  margin-bottom: 12px;
  padding: 18px;
}

.shopping-head h2 {
  font-size: clamp(26px, 4vw, 38px);
}

.shopping-head p {
  margin: 8px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.6;
}

.shopping-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.shopping-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.shopping-stat {
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.shopping-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.shopping-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.shopping-toolbar {
  margin-bottom: 12px;
  padding: 14px;
  display: grid;
  gap: 12px;
}

.shopping-search span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.shopping-search input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  font: inherit;
}

.shopping-cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shopping-board {
  padding: 14px;
}

.shopping-section-head {
  margin: 2px 0 10px;
  align-items: center;
}

.shopping-section-head.is-done {
  margin-top: 22px;
}

.shopping-section-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.shopping-section-head span {
  min-width: 26px;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 12px;
  font-weight: 800;
}

.shopping-item {
  min-height: 66px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.shopping-item + .shopping-item {
  margin-top: 8px;
}

.shopping-item.is-done {
  opacity: 0.66;
}

.shopping-check {
  width: 26px;
  height: 26px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--positive);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.shopping-item-main {
  min-width: 0;
}

.shopping-item-main h4 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.shopping-item.is-done .shopping-item-main h4 {
  text-decoration: line-through;
}

.shopping-item-main p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.shopping-delete {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 18px;
  cursor: pointer;
}

.shopping-empty,
.shopping-no-list {
  color: var(--ink3);
  line-height: 1.6;
  text-align: center;
}

.shopping-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
}

.shopping-no-list {
  min-height: 420px;
  padding: 34px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
}

.shopping-no-list p {
  max-width: 420px;
  margin: 0;
}

.shopping-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.shopping-modal[hidden] {
  display: none;
}

.shopping-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.shopping-form {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.shopping-form-head {
  margin-bottom: 16px;
}

.shopping-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.shopping-share-box {
  margin-top: 12px;
  padding: 12px;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  border-radius: 8px;
  background: var(--surface2);
}

.shopping-share-box > span {
  width: 100%;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.shopping-share-box label {
  min-height: 30px;
  padding: 6px 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.shopping-share-box input {
  accent-color: var(--accent);
}

.shopping-form-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .shopping-layout {
    grid-template-columns: 1fr;
  }

  .shopping-head,
  .shopping-sidebar-head {
    flex-direction: column;
    align-items: stretch;
  }

  .shopping-head-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .shopping-stats {
    grid-template-columns: 1fr;
  }

  .shopping-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .shopping-item .btn,
  .shopping-delete {
    justify-self: start;
  }

  .shopping-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── MEDICATIONS MODULE ── */
.medications-page {
  width: 100%;
  max-width: none;
}

.medications-head {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.medications-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
}

.medications-head p {
  max-width: 660px;
  margin: 10px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.7;
}

.medications-toolbar {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 260px;
  gap: 12px;
  align-items: end;
}


.medications-field span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.medications-field input,
.medications-field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  font: inherit;
}

.medications-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.medications-layout {
  grid-template-columns: minmax(340px, 0.95fr) minmax(0, 1.2fr);
}

.medications-list {
  padding: 16px;
}

.medications-panel-head {
  margin-bottom: 16px;
}

.medications-panel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.medication-row {
  min-height: 86px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.medication-row + .medication-row {
  margin-top: 10px;
}

.medication-row.is-selected {
  border-color: var(--accent);
  background: var(--accent-lt);
  transform: translateY(-1px);
}

.medication-pill {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface2);
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
}

.medication-main {
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.medication-main h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.medication-main p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.medication-tag,
.medication-refill {
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.medication-tag {
  background: var(--surface2);
  color: var(--accent);
}

.medication-refill.is-danger {
  color: var(--danger);
}

.medication-refill.is-warning {
  color: var(--warning);
}

.medication-refill.is-neutral {
  color: var(--ink3);
}

.medications-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  line-height: 1.6;
  text-align: center;
}

.medications-empty.is-detail {
  min-height: 340px;
}

.medications-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.medications-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.15;
}

.medications-hero,
.medications-info-card,
.medications-note-card {
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.medications-hero-sub {
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.5;
}

.medications-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.medications-meta div,
.medications-note {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface2);
}

.medications-detail .card {
  border: 1px solid var(--line);
}

.medications-meta dt,
.medications-note span {
  margin-bottom: 4px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.medications-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.medications-note {
  margin-top: 12px;
}

.medications-note p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.55;
}

.medications-detail-actions {
  margin-top: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* medication-modal/medication-form/medication-form-head → module-form-modal (2026-05-11) */

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

.medication-checkrow {
  margin-top: 12px;
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
}

.medication-checkrow input {
  accent-color: var(--accent);
}

/* medication-form-actions → module-form-modal-foot (2026-05-11) */

@media (max-width: 980px) {
  .medications-toolbar {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 720px) {
  .medications-meta,
  .medication-form-grid {
    grid-template-columns: 1fr;
  }

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

  .medication-tag,
  .medication-refill {
    justify-self: start;
  }
}

/* ── MEDICINE CABINET MODULE ── */
.cabinet-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 30px 24px 80px;
}

.cabinet-head {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.cabinet-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
}

.cabinet-head p {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.7;
}

.cabinet-alerts {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.cabinet-alert {
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}

.cabinet-alert strong,
.cabinet-alert span {
  overflow-wrap: anywhere;
}

.cabinet-alert span {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 800;
}

.cabinet-alert.is-danger {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
  background: var(--danger-bg);
}

.cabinet-alert.is-warning {
  border-color: color-mix(in srgb, var(--warning) 32%, var(--line));
  background: var(--warn-bg);
}

.cabinet-alert.is-good {
  justify-content: center;
  color: var(--ink3);
}

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

.cabinet-stat {
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.cabinet-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.cabinet-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.cabinet-stat.is-info {
  border-left: 4px solid var(--info);
}

.cabinet-stat.is-positive {
  border-left: 4px solid var(--positive);
}

.cabinet-stat.is-warning {
  border-left: 4px solid var(--warning);
}

.cabinet-stat.is-danger {
  border-left: 4px solid var(--danger);
}

.cabinet-toolbar {
  margin-bottom: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 260px;
  gap: 12px;
  align-items: end;
}

.cabinet-field span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.cabinet-field input,
.cabinet-field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  font: inherit;
}

.cabinet-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cabinet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.cabinet-list,
.cabinet-detail {
  padding: 14px;
}

.cabinet-row {
  min-height: 76px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.cabinet-row + .cabinet-row {
  margin-top: 8px;
}

.cabinet-row.is-selected {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.cabinet-pill {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface2);
  color: var(--accent);
  font-size: 20px;
  font-weight: 900;
}

.cabinet-main {
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.cabinet-main h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.cabinet-main p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cabinet-qty,
.cabinet-status {
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.cabinet-qty {
  background: var(--surface2);
  color: var(--ink);
}

.cabinet-qty.is-warning {
  color: var(--warning);
}

.cabinet-status.is-danger {
  color: var(--danger);
}

.cabinet-status.is-warning {
  color: var(--warning);
}

.cabinet-status.is-neutral {
  color: var(--ink3);
}

.cabinet-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  line-height: 1.6;
  text-align: center;
}

.cabinet-empty.is-detail {
  min-height: 340px;
}

.cabinet-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cabinet-detail-head {
  margin-bottom: 18px;
}

.cabinet-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
}

.cabinet-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cabinet-meta div,
.cabinet-note {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface2);
}

.cabinet-meta dt,
.cabinet-note span {
  margin-bottom: 4px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.cabinet-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.cabinet-note {
  margin-top: 12px;
}

.cabinet-note p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.55;
}

.cabinet-detail-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* cabinet-modal/cabinet-form/cabinet-form-head → module-form-modal (2026-05-11) */

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

.cabinet-checkrow {
  margin-top: 12px;
  min-height: 42px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
}

.cabinet-checkrow input {
  accent-color: var(--accent);
}

/* cabinet-form-actions → module-form-modal-foot (2026-05-11) */

@media (max-width: 980px) {
  .cabinet-head,
  .cabinet-toolbar {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

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

  .cabinet-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .cabinet-page {
    padding: 20px 12px 70px;
  }

  .cabinet-alert {
    align-items: flex-start;
    flex-direction: column;
  }

  .cabinet-stats,
  .cabinet-meta,
  .cabinet-form-grid {
    grid-template-columns: 1fr;
  }

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

  .cabinet-qty,
  .cabinet-status {
    justify-self: start;
  }
}

/* ── CHORES MODULE ── */
.chores-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 30px 24px 80px;
}

.chores-head {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.chores-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
}

.chores-head p {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.7;
}

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

.chores-stat {
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.chores-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.chores-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.chores-stat.is-warning {
  border-left: 4px solid var(--warning);
}

.chores-stat.is-positive {
  border-left: 4px solid var(--positive);
}

.chores-stat.is-danger {
  border-left: 4px solid var(--danger);
}

.chores-stat.is-info {
  border-left: 4px solid var(--info);
}

.chores-toolbar {
  margin-bottom: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 260px;
  gap: 12px;
  align-items: end;
}

.chores-field span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.chores-field input,
.chores-field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  font: inherit;
}

.chores-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chores-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.chores-list,
.chores-detail {
  padding: 14px;
}

.chore-row {
  min-height: 76px;
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.chore-row + .chore-row {
  margin-top: 8px;
}

.chore-row.is-selected {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.chore-row.is-done {
  opacity: 0.68;
}

.chore-check {
  width: 28px;
  height: 28px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--positive);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.chore-main {
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.chore-main h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.chore-main p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.chore-person,
.chore-due {
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.chore-person {
  background: var(--surface2);
  color: var(--accent);
}

.chore-due.is-danger {
  color: var(--danger);
}

.chore-due.is-warning {
  color: var(--warning);
}

.chore-due.is-done {
  color: var(--positive);
}

.chore-due.is-neutral {
  color: var(--ink3);
}

.chores-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  line-height: 1.6;
  text-align: center;
}

.chores-empty.is-detail {
  min-height: 340px;
}

.chores-detail-head,
.chore-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.chores-detail-head {
  margin-bottom: 18px;
}

.chores-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
}

.chores-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.chores-meta div,
.chores-note {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface2);
}

.chores-meta dt,
.chores-note span {
  margin-bottom: 4px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.chores-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.chores-note {
  margin-top: 12px;
}

.chores-note p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.55;
}

.chores-detail-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chore-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.chore-modal[hidden] {
  display: none;
}

.chore-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.chore-form {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.chore-form-head {
  margin-bottom: 16px;
}

.chore-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.chore-form-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .chores-head,
  .chores-toolbar {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

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

  .chores-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .chores-page {
    padding: 20px 12px 70px;
  }

  .chores-stats,
  .chores-meta,
  .chore-form-grid {
    grid-template-columns: 1fr;
  }

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

  .chore-person,
  .chore-due {
    justify-self: start;
  }
}

/* ── GIFTS MODULE ── */
.gifts-page {
  width: 100%;
}

/* ── MARKETPLACE MODULE ── */
.market-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px clamp(14px, 2vw, 28px) 80px;
}

.market-head,
.market-toolbar,
.market-detail-head,
.market-form-head {
  display: flex;
  gap: 14px;
}

.market-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.market-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.market-head p {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

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

.market-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.market-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.market-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.market-stat.is-positive strong {
  color: var(--positive);
}

.market-stat.is-info strong {
  color: var(--info);
}

.market-stat.is-warning strong {
  color: var(--warning);
}

.market-toolbar {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px;
}

.market-search {
  min-width: 240px;
  flex: 1;
  display: grid;
  gap: 5px;
}

.market-search span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.market-search input {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.market-cats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.market-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.market-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.market-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.market-card.is-selected {
  border-color: var(--accent);
}

.market-card-main {
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.market-photo {
  height: 150px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
}

.market-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.market-photo span {
  font-size: 42px;
}

.market-photo em {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.market-photo em.is-oddane {
  color: var(--ink3);
}

.more-section-label {
  grid-column: 1 / -1;
  padding: 4px 2px 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink3);
}

.nav-beta-badge,
.more-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  color: var(--warning);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.nav-beta-badge {
  margin-left: auto;
}

.sidebar-section-toggle {
  width: 100%;
  min-height: 30px;
  padding: 0;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: transparent;
  border: 0;
  color: var(--ink3);
  cursor: pointer;
}

.sidebar-section-toggle .sidebar-section-label {
  margin: 0;
}

.sidebar-section-caret {
  font-size: 11px;
  line-height: 1;
  transition: transform 0.16s ease;
}

.sidebar-section-toggle.is-collapsed .sidebar-section-caret {
  transform: rotate(-90deg);
}

.module-page {
  width: 100%;
  max-width: none;
  padding-bottom: 32px;
}

.module-page-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.module-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.module-header-main {
  min-width: 0;
  flex: 1;
}

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

.module-action-bar,
.module-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.section-card {
  padding: 18px 20px;
}

.module-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
}

.module-empty-state-icon {
  font-size: 48px;
  line-height: 1;
}

.collection-page {
  width: 100%;
}

.collection-action-bar {
  padding: 16px 18px;
  margin-bottom: 18px;
}

.collection-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: start;
}

.collection-rail {
  padding: 16px;
}

.collection-detail {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.collection-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.collection-panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.12;
}

@media (max-width: 980px) {
  .collection-layout {
    grid-template-columns: 1fr;
  }
}

.module-empty-state h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
}

.module-empty-state p {
  margin: 0;
  max-width: 320px;
  font-size: 13px;
  color: var(--muted);
}

.market-photo em.is-zarezerwowane {
  color: var(--warning);
}

.market-card-body {
  padding: 12px;
}

.market-card-body > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.market-card h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.2;
}

.market-card p {
  margin: 7px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.45;
}

.market-card small {
  display: block;
  margin-top: 9px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
}

.market-detail {
  width: min(390px, 36vw);
  flex: 0 0 min(390px, 36vw);
  max-height: calc(100vh - 120px);
  overflow: auto;
  padding: 16px;
}

.market-detail-head {
  align-items: flex-start;
  margin-bottom: 14px;
}

.market-detail-head img,
.market-detail-icon {
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface2);
}

.market-detail-icon {
  display: grid;
  place-items: center;
  font-size: 34px;
}

.market-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
}

.market-detail-head p {
  margin: 7px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

.market-price {
  margin-left: auto;
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--pos-bg);
  color: var(--positive);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.market-info {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.market-info div {
  padding: 11px;
  border-radius: 8px;
  background: var(--surface2);
}

.market-info dt {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.market-info dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.market-actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.market-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  text-align: center;
}

.market-empty.is-detail {
  min-height: 320px;
}

.market-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.market-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.market-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  position: relative;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.market-form-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.market-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

.market-form-grid,
.market-photo-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.market-form-grid .is-wide,
.market-photo-fields {
  grid-column: 1 / -1;
}

.market-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .market-head,
  .market-toolbar,
  .market-layout,
  .market-detail-head {
    flex-direction: column;
    align-items: stretch;
  }

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

  .market-detail {
    width: 100%;
    flex-basis: auto;
    max-height: none;
  }
}

.notifications-page {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1120px;
  padding: 30px 28px 90px;
}

.notifications-head {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.notifications-head h1 {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.1;
  margin: 4px 0 8px;
}

.notifications-head p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}

.notifications-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 260px;
}

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

.notifications-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 4px;
  min-height: 118px;
  padding: 16px;
  text-align: left;
}

.notifications-stat.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-lt);
}

.notifications-stat span {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

.notifications-stat.is-critical span {
  color: var(--danger);
}

.notifications-stat strong {
  font-size: 13px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.notifications-stat small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

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

.notification-item {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 14px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  padding: 14px;
}

.notification-item.is-critical,
.notification-item.is-high {
  border-left-color: var(--danger);
}

.notification-item.is-medium {
  border-left-color: var(--warning);
}

.notification-item.is-low {
  border-left-color: var(--info);
}

.notification-icon {
  align-items: center;
  background: var(--surface2);
  border-radius: 8px;
  display: flex;
  font-size: 22px;
  height: 46px;
  justify-content: center;
  width: 46px;
}

.notification-main {
  min-width: 0;
}

.notification-main h2 {
  font-size: 16px;
  line-height: 1.25;
  margin: 4px 0;
}

.notification-main p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.notification-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 8px;
}

.notification-meta strong {
  color: var(--accent);
}

.notification-item.is-critical .notification-meta strong,
.notification-item.is-high .notification-meta strong {
  color: var(--danger);
}

.notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.notification-dismissed {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  min-height: 38px;
}

.notifications-empty {
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  padding: 34px;
  text-align: center;
}

.notifications-empty h2 {
  color: var(--ink);
  font-family: var(--serif);
  margin: 0 0 8px;
}

.notifications-empty p {
  line-height: 1.55;
  margin: 0 auto;
  max-width: 560px;
}

@media (max-width: 920px) {
  .notifications-page {
    padding: 20px 14px 80px;
  }

  .notifications-head {
    flex-direction: column;
  }

  .notifications-head-actions {
    justify-content: flex-start;
    min-width: 0;
  }

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

  .notification-item {
    align-items: flex-start;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .notification-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .notifications-summary {
    grid-template-columns: 1fr;
  }
}

.financial-page {
  display: grid;
  gap: 16px;
  margin: 0 auto;
  max-width: 1560px;
  padding: 30px 28px 90px;
}

.financial-top h1 {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.1;
  margin: 4px 0 8px;
}

.financial-top p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.financial-tabs {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 5px;
}

.financial-tab {
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
}

.financial-tab.is-active {
  background: var(--accent-lt);
  color: var(--accent);
}

.financial-panel {
  display: grid;
  gap: 14px;
}

.financial-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.financial-panel-head h2 {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.15;
  margin: 3px 0 0;
}

.financial-head-buttons,
.financial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

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

.financial-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 4px;
  min-height: 120px;
  padding: 16px;
}

.financial-stat-icon {
  font-size: 22px;
}

.financial-stat strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.1;
}

.financial-stat span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.financial-stat small {
  color: var(--muted);
  font-size: 12px;
}

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

.financial-row {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto) auto;
  padding: 15px;
}

.financial-row.is-internal {
  border-left: 4px solid var(--info);
}

.financial-row h3 {
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 4px;
}

.financial-row p,
.financial-row small {
  color: var(--muted);
  display: block;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.financial-money {
  display: grid;
  gap: 3px;
  text-align: right;
}

.financial-money strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
}

.financial-money span {
  color: var(--muted);
  font-size: 12px;
}

.financial-company-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.financial-company-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.financial-company-card header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.financial-company-card h3 {
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 4px;
}

.financial-company-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.financial-company-card dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.financial-company-card dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.financial-company-card dd {
  font-size: 13px;
  font-weight: 700;
  margin: 2px 0 0;
}

.financial-status {
  background: var(--pos-bg);
  border-radius: 8px;
  color: var(--positive);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
}

.financial-net {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  padding: 28px;
  text-align: center;
}

.financial-net span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.financial-net strong {
  color: var(--positive);
  display: block;
  font-family: var(--serif);
  font-size: 42px;
  line-height: 1.1;
  margin: 8px 0;
}

.financial-net p {
  color: var(--muted);
  margin: 0;
}

.financial-net-grid {
  display: grid;
  gap: 10px;
}

.financial-net-line {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}

.financial-net-line div:first-child {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  margin-bottom: 9px;
}

.financial-net-line .btn {
  min-height: 34px;
  padding: 7px 12px;
}

.financial-net-line em {
  color: var(--ink);
  font-style: normal;
  font-weight: 800;
}

.financial-bar {
  background: var(--surface2);
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.financial-bar i {
  background: var(--positive);
  display: block;
  height: 100%;
}

.financial-net-line.is-debt .financial-bar i {
  background: var(--danger);
}

.financial-modal {
  inset: 0;
  position: fixed;
  z-index: 90;
}

.financial-modal-backdrop {
  background: color-mix(in srgb, var(--scrim-medium) 92%, transparent);
  border: 0;
  cursor: pointer;
  height: 100%;
  position: absolute;
  width: 100%;
}

.financial-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  display: grid;
  gap: 16px;
  left: 50%;
  max-height: calc(100vh - 48px);
  max-width: 820px;
  overflow: auto;
  padding: 18px;
  position: absolute;
  top: 24px;
  transform: translateX(-50%);
  width: min(820px, calc(100vw - 28px));
}

.financial-form header,
.financial-form footer {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.financial-form h2 {
  font-family: var(--serif);
  font-size: 22px;
  margin: 0;
}

.financial-form header button {
  color: var(--muted);
  cursor: pointer;
}

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

.financial-form-grid label {
  color: var(--muted);
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 5px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.financial-form-grid .is-wide,
.financial-check {
  grid-column: 1 / -1;
}

.financial-check {
  align-items: center;
  display: flex !important;
  flex-direction: row;
}

@media (max-width: 880px) {
  .financial-page {
    padding: 20px 14px 80px;
  }

  .financial-panel-head,
  .financial-form header,
  .financial-form footer {
    align-items: stretch;
    flex-direction: column;
  }

  .financial-stats,
  .financial-form-grid,
  .financial-company-card dl {
    grid-template-columns: 1fr;
  }

  .financial-row {
    grid-template-columns: 1fr;
  }

  .financial-money {
    text-align: left;
  }

  .financial-actions,
  .financial-head-buttons {
    justify-content: flex-start;
  }
}

.hub-dashboard {
  display: grid;
  gap: 22px;
  margin: 0;
  max-width: none;
  padding: 28px clamp(18px, 2.8vw, 34px) 96px;
  width: 100%;
}

.dashboard-hero {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  padding: 22px;
}

.dashboard-hero p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.dashboard-hero h1 {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.1;
  margin: 0;
}

.dashboard-hero button {
  align-items: center;
  background: var(--accent-lt);
  border-radius: 8px;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  text-align: left;
}

.dashboard-main-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
}

.dashboard-lower-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  align-items: start;
}

.dashboard-side-stack {
  display: grid;
  gap: 18px;
}

.dashboard-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 12px;
  padding: 18px;
}

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

.dashboard-card h2 {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
  margin: 0;
}

.dashboard-card header button {
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-notification-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dashboard-notification-pill {
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  display: inline-flex;
  gap: 8px;
  padding: 7px 12px;
}

.dashboard-notification-pill strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.dashboard-notification-pill span {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
}

.dashboard-notification-pill.is-danger {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
}

.dashboard-notification-pill.is-warning {
  background: color-mix(in srgb, var(--warning) 10%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
}

.dashboard-alert-group {
  display: grid;
  gap: 8px;
}

.dashboard-alert-group-title {
  color: var(--ink2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.dashboard-alert {
  align-items: center;
  background: var(--surface2);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  padding: 10px;
  text-align: left;
}

.dashboard-alert.is-warning,
.dashboard-alert.is-danger {
  border-left-color: var(--danger);
}

.dashboard-alert strong,
.dashboard-week-list strong,
.dashboard-quick strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-alert em {
  color: var(--warning);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.dashboard-alert.is-danger em {
  color: var(--danger);
}

.dashboard-alert.is-compact {
  background: transparent;
  border-left-color: var(--line);
  padding: 7px 4px 7px 9px;
}

.dashboard-soon {
  border-top: 1px solid var(--line2);
  display: grid;
  gap: 6px;
  margin-top: 4px;
  padding-top: 10px;
}

.dashboard-soon > strong {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.dashboard-empty {
  color: var(--muted);
  display: grid;
  gap: 4px;
  padding: 18px 8px;
  text-align: center;
}

.dashboard-empty strong {
  color: var(--ink);
}

.dashboard-week-strip {
  display: grid;
  gap: 5px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.dashboard-week-strip button {
  background: var(--surface2);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 3px;
  min-height: 76px;
  padding: 7px 3px;
  text-align: center;
}

.dashboard-week-strip button.is-today {
  background: var(--accent);
  color: var(--accent-contrast);
}

.dashboard-week-strip span,
.dashboard-week-strip small {
  font-size: 10px;
  min-height: 14px;
}

.dashboard-week-strip strong {
  font-size: 16px;
}

.dashboard-week-list {
  display: grid;
  gap: 6px;
}

.dashboard-week-list button {
  align-items: center;
  border-bottom: 1px solid var(--line2);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 8px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  padding: 8px 0;
  text-align: left;
}

.dashboard-week-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.dashboard-stats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: row;
  width: 100%;
}

.dashboard-stats button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 18px 16px;
  text-align: left;
  width: 100%;
}

.dashboard-stats span {
  font-size: 21px;
}

.dashboard-stats strong {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
}

.dashboard-stats em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.dashboard-quick > div {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-quick button {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 8px;
  min-height: 92px;
  padding: 12px 8px;
  place-items: center;
  text-align: center;
}

.dashboard-quick span {
  font-size: 24px;
}

.dashboard-quick strong {
  font-size: 12px;
}

@media (max-width: 980px) {
  .dashboard-main-grid,
  .dashboard-lower-grid,
  .dashboard-quick > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 620px) {
  .hub-dashboard {
    padding: 20px 12px 80px;
  }

  .dashboard-main-grid,
  .dashboard-lower-grid,
  .dashboard-stats,
  .dashboard-quick > div {
    grid-template-columns: 1fr;
  }

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

  .dashboard-week-strip {
    grid-template-columns: repeat(7, minmax(38px, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 520px) {
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
}

.voice-page,
.integrations-page {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 1120px;
  padding: 28px 24px 90px;
}

.voice-head,
.integrations-head {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.voice-head h1,
.integrations-head h1 {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.1;
  margin: 4px 0 8px;
}

.voice-head p,
.integrations-head p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}

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

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

.voice-stat,
.integration-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 5px;
  min-height: 94px;
  padding: 14px;
}

.voice-stat span,
.integration-stat span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.voice-stat strong,
.integration-stat strong {
  font-family: var(--serif);
  font-size: 24px;
  overflow-wrap: anywhere;
}

.voice-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: .9fr 1.1fr;
}

.voice-card,
.integration-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.voice-card h2,
.integration-card h2 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  margin: 0;
}

.voice-toolbar {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.voice-toolbar label,
.integration-controls label {
  color: var(--muted);
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 5px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.voice-hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}

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

.voice-note {
  background: var(--surface2);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.voice-note strong {
  display: block;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.voice-note small,
.voice-note em {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-style: normal;
  margin-top: 4px;
}

.voice-actions {
  align-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.voice-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  padding: 24px;
  text-align: center;
}

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

.integration-card header {
  align-items: flex-start;
  display: grid;
  gap: 12px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.integration-card header > span:first-child {
  align-items: center;
  background: var(--surface2);
  border-radius: 8px;
  display: flex;
  font-size: 22px;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.integration-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
}

.integration-badge {
  background: var(--surface2);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  padding: 6px 8px;
}

.integration-badge.is-on {
  background: var(--pos-bg);
  color: var(--positive);
}

.integration-controls {
  display: grid;
  gap: 10px;
}

.integration-chip {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: inline-flex;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
}

.integration-chip strong {
  color: var(--ink);
  font-size: 12px;
}

.integration-chip em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.integration-chip.is-on {
  border-color: color-mix(in srgb, var(--positive) 24%, var(--border));
  background: color-mix(in srgb, var(--positive) 8%, var(--card));
}

.integration-chip.is-off {
  opacity: 0.86;
}

.integration-controls small {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 920px) {
  .voice-head,
  .integrations-head {
    flex-direction: column;
  }

  .voice-layout,
  .integrations-grid {
    grid-template-columns: 1fr;
  }

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

  .voice-note {
    grid-template-columns: 1fr;
  }

  .voice-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .voice-page,
  .integrations-page {
    padding: 20px 12px 80px;
  }

  .voice-stats,
  .integrations-stats {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .market-page {
    padding: 20px 12px 70px;
  }

  .market-stats,
  .market-info,
  .market-form-grid,
  .market-photo-fields {
    grid-template-columns: 1fr;
  }
}

.gifts-head {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.gifts-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
}

.gifts-head p {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.7;
}

.gifts-people {
  margin-bottom: 14px;
  padding: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gift-person {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.gift-person.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
  color: var(--accent);
}

.gift-person strong {
  min-width: 22px;
  min-height: 22px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 11px;
}

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

.gifts-stat {
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.gifts-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.gifts-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
}

.gifts-stat.is-info {
  border-left: 4px solid var(--info);
}

.gifts-stat.is-warning {
  border-left: 4px solid var(--warning);
}

.gifts-stat.is-positive {
  border-left: 4px solid var(--positive);
}

.gifts-stat.is-neutral {
  border-left: 4px solid var(--accent);
}


.gifts-toolbar {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 260px;
  gap: 12px;
  align-items: end;
}

.gifts-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gifts-field span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.gifts-field input,
.gifts-field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  font: inherit;
}

.gifts-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.gifts-list,
.gifts-detail {
  padding: 14px;
}

.gift-row {
  min-height: 76px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.gift-row + .gift-row {
  margin-top: 8px;
}

.gift-row.is-selected {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.gift-main {
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.gift-thumb {
  width: 52px;
  height: 52px;
  float: left;
  margin-right: 12px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface2);
}

.gift-main h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.gift-main p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.gift-status,
.gift-cost {
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
}

.gift-cost {
  background: var(--surface2);
  color: var(--ink);
}

.gift-status.is-chcę {
  background: var(--info-bg);
  color: var(--info);
}

.gift-status.is-może {
  background: var(--warn-bg);
  color: var(--warning);
}

.gift-status.is-kupione {
  background: var(--pos-bg);
  color: var(--positive);
}

.gift-status.is-nieaktualne {
  background: var(--surface2);
  color: var(--ink3);
}

.gifts-empty-state {
  min-height: 170px;
}

.gifts-empty-state.gifts-empty-state-detail {
  min-height: 340px;
}

.gifts-detail-head,
.gift-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.gifts-detail-head {
  margin-bottom: 18px;
}

.gift-detail-photo {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface2);
}

.gifts-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
}

.gifts-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.gifts-meta div,
.gifts-note {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface2);
}

.gifts-meta dt,
.gifts-note span {
  margin-bottom: 4px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.gifts-meta dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.gifts-meta a {
  color: var(--accent);
}

.gifts-note {
  margin-top: 12px;
}

.gifts-note p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.55;
}

.gifts-detail-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gift-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.gift-modal[hidden] {
  display: none;
}

.gift-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.gift-form {
  position: relative;
  width: min(580px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.gift-form-head {
  margin-bottom: 16px;
}

.gift-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.gift-form-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .gifts-head,
  .gifts-toolbar {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }

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

  .gifts-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .gifts-stats,
  .gifts-meta,
  .gift-form-grid {
    grid-template-columns: 1fr;
  }

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

  .gift-status,
  .gift-cost {
    justify-self: start;
  }
}

/* ── PETS MODULE ── */
.pets-page {
  width: 100%;
}

.pets-head,
.pets-layout,
.pets-panel-head,
.pet-hero,
.pet-row,
.pet-doc,
.pet-form-head {
  display: flex;
  gap: 14px;
}

.pets-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.pets-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.pets-head p {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

.pets-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

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

.pets-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.pets-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.pets-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.pets-stat.is-warning strong,
.pet-card-alerts.is-warning {
  color: var(--warning);
}

.pets-stat.is-danger strong,
.pet-card-alerts.is-danger {
  color: var(--danger);
}

.pets-layout {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pets-sidebar {
  padding: 14px;
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pets-sidebar-title {
  margin-bottom: 4px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pets-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Sidebar items — Sport disc-item pattern ── */
.pet-sb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--ink2);
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}

.pet-sb-item:hover {
  background: var(--accent-lt);
  color: var(--ink);
}

.pet-sb-item.is-active {
  background: var(--accent-lt);
  color: var(--ink);
  font-weight: 600;
}

.pet-sb-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

.pet-sb-name {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pet-sb-badge {
  font-size: 11px;
  background: var(--surface2);
  color: var(--ink3);
  border-radius: 10px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.pet-sb-badge.is-ok {
  background: var(--pos-bg);
  color: var(--positive);
}

.pet-sb-badge.is-warning {
  background: var(--warn-bg);
  color: var(--warning);
}

.pet-sb-badge.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.pet-sb-add {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  padding: 4px 10px;
  text-align: left;
  border-radius: 6px;
  transition: background 0.15s;
  margin-top: 4px;
}

.pet-sb-add:hover {
  background: var(--accent-lt);
}

.pet-card {
  width: 100%;
  min-height: 76px;
  padding: 10px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.pet-card.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.pet-avatar,
.pet-hero-avatar,
.pet-doc-thumb {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
}

.pet-avatar {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  font-size: 24px;
}

.pet-avatar img,
.pet-hero-avatar img,
.pet-doc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-card-main {
  min-width: 0;
}

.pet-card-main strong,
.pet-card-main small {
  display: block;
  overflow-wrap: anywhere;
}

.pet-card-main strong {
  color: var(--ink);
  font-size: 14px;
}

.pet-card-main small {
  margin-top: 3px;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.35;
}

.pet-card-alerts {
  min-width: 28px;
  min-height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface2);
  color: var(--ink3);
  font-weight: 900;
}

.pets-detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pet-hero {
  align-items: center;
  padding: 18px;
}

.pet-hero-avatar {
  width: 116px;
  height: 116px;
  flex: 0 0 116px;
  border-radius: 8px;
  font-size: 56px;
}

.pet-hero-main {
  min-width: 0;
  flex: 1;
}

.pet-hero-main h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
}

.pet-hero-main p {
  margin: 7px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.5;
}

.pet-tags {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pet-tags span {
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.pet-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Compact profile bar ── */
.pet-profile-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.pet-profile-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
  font-size: 18px;
}

.pet-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-profile-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
}

.pet-profile-name {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.pet-profile-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.pet-profile-details,
.pet-detail-list {
  display: grid;
  gap: 8px;
}

.pet-profile-details {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  width: 100%;
}

.pet-profile-detail {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
}

.pet-profile-detail span {
  display: block;
  margin-bottom: 3px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.pet-profile-detail strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.pet-tag {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.pet-profile-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}

.pet-action-btn {
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 600;
  font: inherit;
  font-size: 10px;
  line-height: 1.4;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink2);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.pet-action-btn:hover {
  background: var(--surface2);
}

.pet-action-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.pet-action-btn--primary:hover {
  opacity: 0.9;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.4;
}

/* ── Mini-stats row (per-pet: Zaległe / Wkrótce / Historia) ── */
.pet-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.pet-mini-stat {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
}

.pet-mini-stat strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.pet-mini-stat span {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink3);
}

.pet-mini-stat.is-danger strong { color: var(--danger); }
.pet-mini-stat.is-warning strong { color: var(--warning); }
.pet-mini-stat.is-neutral strong { color: var(--ink2); }

/* ── Pill tab bar ── */
.pet-tab-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 14px 0;
  border-bottom: 1px solid var(--line);
}

.pet-tab-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--surface2);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-bottom: 10px;
}

.pet-tab-chip:hover {
  background: var(--surface3, var(--surface2));
  border-color: var(--ink3);
}

.pet-tab-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.pet-tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(0,0,0,0.15);
  color: inherit;
}

.pet-tab-chip:not(.is-active) .pet-tab-badge {
  background: var(--surface);
  color: var(--ink2);
}

.pet-tab-chip:not(.is-active) .pet-tab-badge.is-warning {
  background: var(--warn-bg);
  color: var(--warning);
}

.pet-tab-chip:not(.is-active) .pet-tab-badge.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ── Timeline (Terminarz & Historia tabs) ── */
.pet-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 4px 28px;
}

.pet-timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--line);
  border-radius: 1px;
}

/* Entry card */
.pet-tl-entry {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.pet-tl-entry.is-danger  { border-left: 3px solid var(--danger); }
.pet-tl-entry.is-warning { border-left: 3px solid var(--warning); }
.pet-tl-entry.is-ok      { border-left: 3px solid var(--positive); }
.pet-tl-entry.is-closed,
.pet-tl-entry.is-muted   { border-left: 3px solid var(--line); }

.pet-tl-dot {
  position: absolute;
  left: -23px;
  top: 13px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink3);
  flex-shrink: 0;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px var(--line);
}

.pet-tl-dot.is-danger  { background: var(--danger);  box-shadow: 0 0 0 2px var(--danger-bg); }
.pet-tl-dot.is-warning { background: var(--warning); box-shadow: 0 0 0 2px var(--warn-bg); }
.pet-tl-dot.is-ok      { background: var(--positive); box-shadow: 0 0 0 2px var(--pos-bg); }
.pet-tl-dot.is-closed,
.pet-tl-dot.is-muted   { background: var(--ink3);   box-shadow: 0 0 0 2px var(--line); }

.pet-tl-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pet-tl-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pet-tl-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

/* Days badge */
.pet-days-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--ink3);
  white-space: nowrap;
}

.pet-days-badge.is-danger  { background: var(--danger-bg); color: var(--danger); }
.pet-days-badge.is-warning { background: var(--warn-bg); color: var(--warning); }
.pet-days-badge.is-ok      { background: var(--pos-bg); color: var(--positive); }
.pet-days-badge.is-closed  { background: var(--surface2); color: var(--ink3); }

.pet-tl-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pet-tl-meta span {
  font-size: 11px;
  color: var(--ink3);
}

.pet-tl-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2px;
}

.pet-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.pet-alert {
  min-height: 62px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.pet-alert strong,
.pet-alert span {
  display: block;
}

.pet-alert strong {
  color: var(--ink);
  font-size: 13px;
}

.pet-alert span {
  margin-top: 4px;
  color: var(--ink3);
  font-size: 12px;
}

.pet-alert.is-danger {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.pet-alert.is-warning {
  border-color: var(--warning);
  background: var(--warn-bg);
}

.pets-panel {
  overflow: hidden;
}

.pets-tabs {
  display: flex;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.pets-tabs button {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.pets-tabs button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.pets-panel-body {
  padding: 16px;
}

.pets-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 14px;
}

.pets-panel-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
}

.pets-panel-head p {
  margin: 5px 0 0;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.5;
}

.pets-panel-head-compact h3 {
  font-size: 18px;
}

.pets-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pets-table {
  display: grid;
  gap: 8px;
}

.pet-row {
  min-height: 82px;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.pet-row > div:first-child {
  min-width: 0;
  flex: 1;
}

.pet-row strong {
  display: block;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.pet-row p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.pet-row-meta {
  min-width: 150px;
  display: grid;
  gap: 4px;
  color: var(--ink3);
  font-size: 12px;
}

.pet-status {
  min-width: 92px;
  padding: 6px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.pet-status.is-ok {
  background: var(--pos-bg);
  color: var(--positive);
}

.pet-status.is-warning {
  background: var(--warn-bg);
  color: var(--warning);
}

.pet-status.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.pet-status.is-closed {
  background: var(--surface2);
  color: var(--ink3);
}

.pet-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pet-doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.pet-doc {
  min-height: 110px;
  padding: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.pet-doc-thumb {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 8px;
  font-size: 24px;
}

/* ── Document card grid (Książeczka tab) ── */
.pet-doc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.pet-doc-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pet-doc-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
  font-size: 36px;
}

.pet-doc-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-doc-card-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.pet-doc-card-body strong {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
}

.pet-doc-card-body p {
  margin: 0;
  font-size: 11px;
  color: var(--ink3);
  line-height: 1.4;
}

.pet-doc-card-actions {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.pet-doc-icon {
  font-size: 36px;
  line-height: 1;
}

.pet-doc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px;
  gap: 6px;
}

.pet-doc-empty-icon {
  font-size: 36px;
  margin-bottom: 4px;
}

.pet-doc-empty p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink2);
}

.pet-doc-empty small {
  font-size: 12px;
  color: var(--ink3);
}

.pet-info-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pet-info-grid div,
.pet-notes {
  padding: 13px;
  border-radius: 8px;
  background: var(--surface2);
}

.pet-info-grid .is-wide {
  grid-column: 1 / -1;
}

.pet-info-grid dt {
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.pet-info-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.pet-notes {
  min-height: 180px;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}

.pets-empty-state {
  min-height: 150px;
}

.pets-linked-contacts {
  margin-top: 16px;
}

/* ── Vet tab rows ── */
.pet-vet-list {
  display: grid;
  gap: 8px;
}

.pet-vet-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.pet-vet-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
  padding-top: 2px;
}

.pet-vet-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pet-vet-info strong {
  font-size: 14px;
  color: var(--ink);
}

.pet-vet-info span {
  font-size: 12px;
  color: var(--ink3);
}

.pet-vet-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.pets-empty-state.pets-empty-state-compact {
  min-height: 120px;
}

.pet-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.pet-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.pet-form {
  position: relative;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.pet-form-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pet-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.pet-form-grid .is-wide {
  grid-column: 1 / -1;
}

.pet-check {
  min-height: 64px;
  justify-content: center;
}

.pet-check input {
  width: 18px;
  height: 18px;
}

.pet-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .pets-head,
  .pet-hero,
  .pets-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

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

  .pet-hero-actions,
  .pets-head-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  .pets-layout {
    grid-template-columns: 1fr;
  }

  .pets-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
  }

  .pets-sidebar-title {
    display: none;
  }

  .pet-sb-item {
    flex-direction: column;
    align-items: center;
    padding: 6px 8px;
    gap: 3px;
    width: auto;
    min-width: 56px;
  }

  .pet-sb-name {
    font-size: 10px;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .pets-stats,
  .pet-info-grid,
  .pet-form-grid {
    grid-template-columns: 1fr;
  }

  .pet-form-grid .is-wide {
    grid-column: auto;
  }

  .pet-row,
  .pet-doc {
    flex-direction: column;
    align-items: stretch;
  }

  .pet-row-meta,
  .pet-status {
    min-width: 0;
    justify-self: start;
  }

  .pet-row-actions {
    justify-content: flex-start;
  }
}

/* ── PROJECTS MODULE ── */
.projects-page {
  padding: 28px clamp(14px, 2vw, 28px) 80px;
}

.projects-head,
.projects-layout,
.project-hero,
.projects-panel-head,
.project-row,
.project-doc,
.project-form-head {
  display: flex;
  gap: 14px;
}

.projects-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.projects-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.projects-head p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

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

.projects-stats {
  margin-bottom: 14px;
}

.project-budget-grid {
  margin-bottom: 12px;
}

.projects-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.projects-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.projects-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.projects-stat.is-warning strong {
  color: var(--warning);
}

.projects-stat.is-positive strong {
  color: var(--positive);
}

.projects-layout {
  align-items: flex-start;
}

.projects-sidebar {
  width: min(360px, 34vw);
  flex: 0 0 min(360px, 34vw);
  padding: 14px;
}

.projects-filter {
  margin-bottom: 12px;
  display: grid;
  gap: 6px;
}

.projects-filter span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.projects-filter select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
}

.projects-list,
.projects-detail,
.project-table,
.project-doc-grid {
  display: grid;
  gap: 8px;
}

.project-card {
  width: 100%;
  min-height: 94px;
  padding: 12px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.project-card.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.project-card-icon,
.project-hero-icon,
.project-datebox,
.project-doc-icon {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--project-color, var(--accent)) 18%, var(--surface2));
}

.project-card-icon {
  width: 46px;
  height: 46px;
  font-size: 22px;
}

.project-card-main {
  min-width: 0;
}

.project-card-main strong,
.project-card-main small {
  display: block;
  overflow-wrap: anywhere;
}

.project-card-main strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.project-card-main small {
  margin-top: 4px;
  color: var(--ink3);
  font-size: 12px;
}

.project-progress {
  height: 5px;
  margin-top: 8px;
  border-radius: 8px;
  display: block;
  overflow: hidden;
  background: var(--surface2);
}

.project-progress i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--accent);
}

.project-status,
.project-due,
.project-money {
  min-height: 28px;
  padding: 6px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

button.project-status {
  border: 0;
  cursor: pointer;
}

.project-status.is-active,
.project-due.is-ok {
  background: var(--pos-bg);
  color: var(--positive);
}

.project-status.is-planning {
  background: var(--info-bg);
  color: var(--info);
}

.project-status.is-paused,
.project-due.is-warning {
  background: var(--warn-bg);
  color: var(--warning);
}

.project-status.is-done {
  background: var(--pos-bg);
  color: var(--positive);
}

.project-due.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.projects-detail {
  flex: 1;
  min-width: 0;
}

.project-hero {
  align-items: center;
  padding: 18px;
}

.project-hero-icon {
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  font-size: 42px;
}

.project-hero-main {
  min-width: 0;
  flex: 1;
}

.project-hero-main h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
}

.project-hero-main p {
  margin: 7px 0 0;
  color: var(--ink2);
  line-height: 1.5;
}

.project-tags {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.project-tags span {
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 700;
}

.project-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.projects-panel {
  overflow: hidden;
}

.projects-tabs {
  display: flex;
  gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.projects-tabs button {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink2);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.projects-tabs button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.projects-panel-body {
  padding: 16px;
}

.projects-panel-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.projects-panel-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
}

.projects-panel-head p {
  margin: 5px 0 0;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.5;
}

.project-row {
  min-height: 80px;
  padding: 12px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.project-row.is-done {
  opacity: 0.72;
}

.project-check {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--positive);
  font-weight: 900;
  cursor: pointer;
}

.project-row > div:nth-child(2),
.project-row > div:first-child:not(.project-datebox) {
  min-width: 0;
  flex: 1;
}

.project-row strong,
.project-doc strong {
  display: block;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.project-row p,
.project-doc p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.project-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.project-datebox {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.project-datebox strong {
  font-size: 16px;
  line-height: 1;
}

.project-datebox span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
}

.project-doc-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.project-doc {
  min-height: 112px;
  padding: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.project-doc-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  font-size: 24px;
}

.project-notes {
  min-height: 180px;
  padding: 14px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  line-height: 1.7;
  white-space: pre-wrap;
}

.projects-empty {
  min-height: 150px;
  padding: 22px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  text-align: center;
}

.project-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.project-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.project-form {
  position: relative;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.project-form-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.project-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.project-form-grid .is-wide {
  grid-column: 1 / -1;
}

.project-check-field {
  justify-content: center;
}

.project-check-field input {
  width: 18px;
  height: 18px;
}

.project-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .projects-head,
  .projects-layout,
  .project-hero,
  .projects-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .projects-sidebar {
    width: 100%;
    flex-basis: auto;
  }

  .projects-stats,
  .project-budget-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-hero-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .projects-page {
    padding: 20px 12px 70px;
  }

  .projects-stats,
  .project-budget-grid,
  .project-form-grid {
    grid-template-columns: 1fr;
  }

  .project-form-grid .is-wide {
    grid-column: auto;
  }

  .project-row,
  .project-doc {
    flex-direction: column;
    align-items: stretch;
  }

  .project-due,
  .project-status,
  .project-money {
    align-self: flex-start;
  }

  .project-row-actions {
    justify-content: flex-start;
  }
}

/* ── ASSISTANT MODULE ── */
.assistant-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px clamp(14px, 2vw, 28px) 80px;
}

.assistant-head,
.assistant-layout,
.assistant-card-head,
.assistant-item,
.assistant-note,
.assistant-date,
.assistant-form-head {
  display: flex;
  gap: 14px;
}

.assistant-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

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

.assistant-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.assistant-head p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

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

.assistant-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.assistant-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.assistant-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.assistant-stat.is-warning strong {
  color: var(--warning);
}

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

.assistant-layout {
  align-items: flex-start;
}

.assistant-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 14px;
}

.assistant-side {
  width: min(340px, 32vw);
  flex: 0 0 min(340px, 32vw);
  display: grid;
  gap: 14px;
}

.assistant-card {
  padding: 18px;
}

.assistant-card h2,
.assistant-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
}

.assistant-card-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.assistant-card-head p {
  margin: 5px 0 0;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.5;
}

.assistant-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.assistant-hub-tile {
  display: grid;
  gap: 8px;
  min-height: 152px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
}

.assistant-hub-tile strong {
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.assistant-hub-label {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.assistant-hub-tile small {
  color: var(--ink2);
  line-height: 1.45;
}

.assistant-hub-notes {
  display: grid;
  gap: 10px;
}

.assistant-hub-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.assistant-hub-note strong {
  display: block;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.assistant-hub-note small {
  color: var(--ink3);
}

.assistant-group {
  margin-top: 14px;
}

.assistant-group h3 {
  margin: 0 0 8px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.assistant-item,
.assistant-note,
.assistant-date {
  min-height: 64px;
  padding: 11px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.assistant-item.is-clickable {
  cursor: pointer;
}

.assistant-item-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface2);
}

.assistant-item-main {
  min-width: 0;
  flex: 1;
}

.assistant-item-main strong,
.assistant-note strong,
.assistant-date strong {
  display: block;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.assistant-item-main small,
.assistant-note small,
.assistant-date small {
  display: block;
  margin-top: 4px;
  color: var(--ink3);
  font-size: 12px;
}

.assistant-badge {
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.assistant-badge.is-warning {
  background: var(--warn-bg);
  color: var(--warning);
}

.assistant-badge.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.assistant-notes-list {
  display: grid;
  gap: 8px;
}

.assistant-note {
  justify-content: space-between;
}

.assistant-note > div:first-child {
  min-width: 0;
  flex: 1;
}

.assistant-note-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.assistant-date span {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent-lt);
  color: var(--accent);
  font-weight: 900;
}

.assistant-date div {
  min-width: 0;
}

.assistant-links {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.assistant-links .btn {
  justify-content: flex-start;
}

.assistant-empty {
  min-height: 120px;
  padding: 18px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  line-height: 1.5;
  text-align: center;
}

.assistant-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.assistant-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.assistant-form {
  position: relative;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.assistant-form-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.assistant-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

.assistant-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .assistant-head,
  .assistant-layout,
  .assistant-card-head {
    flex-direction: column;
    align-items: stretch;
  }

  .assistant-head-actions {
    justify-content: flex-start;
  }

  .assistant-side {
    width: 100%;
    flex-basis: auto;
  }

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

  .assistant-hub-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .assistant-page {
    padding: 20px 12px 70px;
  }

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

  .assistant-item,
  .assistant-note {
    flex-direction: column;
    align-items: stretch;
  }

  .assistant-hub-note {
    flex-direction: column;
    align-items: stretch;
  }

  .assistant-badge,
  .assistant-note-actions {
    align-self: flex-start;
  }
}

/* ── SANTA MODULE ── */
.santa-page {
  width: 100%;
}

.santa-head,
.santa-event-head,
.santa-draw-head,
.santa-draw,
.santa-form-head {
  display: flex;
  gap: 14px;
}

.santa-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.santa-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.santa-head p {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

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

.santa-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.santa-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.santa-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.santa-stat.is-positive strong {
  color: var(--positive);
}

.santa-stat.is-warning strong {
  color: var(--warning);
}

.santa-list {
  display: grid;
  gap: 14px;
}

.santa-event {
  padding: 18px;
}

.santa-event-head {
  align-items: flex-start;
  margin-bottom: 16px;
}

.santa-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface2);
  font-size: 30px;
}

.santa-event-main {
  min-width: 0;
  flex: 1;
}

.santa-event-main h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.12;
}

.santa-event-main p {
  margin: 6px 0 0;
  color: var(--ink3);
  line-height: 1.45;
}

.santa-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.santa-section {
  margin-top: 14px;
}

.santa-section h3,
.santa-draw-head h3 {
  margin: 0 0 8px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.santa-section p,
.santa-mail-count,
.santa-note {
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.55;
}

.santa-people {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.santa-people span,
.santa-note {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--surface2);
}

.santa-draw-head {
  align-items: center;
  justify-content: space-between;
}

.santa-draw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.santa-draw {
  min-height: 58px;
  padding: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.santa-draw span {
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.santa-draw strong {
  color: var(--ink3);
}

.santa-draw .btn {
  margin-left: auto;
}

.santa-mail-count {
  margin: 10px 0 0;
}

.santa-note {
  margin-top: 12px;
  white-space: pre-wrap;
}

.santa-empty {
  min-height: 120px;
  padding: 18px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  line-height: 1.5;
  text-align: center;
}

.santa-empty-state {
  min-height: 140px;
}

.santa-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.santa-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.santa-form {
  position: relative;
  width: min(700px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.santa-form-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.santa-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.santa-form-grid .is-wide {
  grid-column: 1 / -1;
}

.santa-participants {
  margin: 0;
  padding: 0;
  border: 0;
}

.santa-person-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.santa-person-option {
  min-height: 42px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 700;
}

.santa-person-option input {
  accent-color: var(--accent);
}

.santa-new-people {
  display: grid;
  gap: 8px;
}

.santa-exclusion-list {
  display: grid;
  gap: 8px;
}

.santa-exclusions small {
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.5;
}

.santa-new-person-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.santa-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 820px) {
  .santa-head,
  .santa-event-head,
  .santa-draw-head {
    flex-direction: column;
    align-items: stretch;
  }

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

  .santa-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .santa-stats,
  .santa-form-grid,
  .santa-person-list,
  .santa-new-person-row {
    grid-template-columns: 1fr;
  }

  .santa-form-grid .is-wide {
    grid-column: auto;
  }

  .santa-draw {
    flex-direction: column;
    align-items: stretch;
  }

  .santa-draw .btn {
    margin-left: 0;
    align-self: flex-start;
  }
}

/* ── WARDROBE MODULE ── */
.wardrobe-page {
  padding: 28px clamp(14px, 2vw, 28px) 80px;
}

.wardrobe-head,
.wardrobe-layout,
.wardrobe-panel-head,
.wardrobe-form-head,
.wardrobe-actions {
  display: flex;
  gap: 14px;
}

.wardrobe-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.wardrobe-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.wardrobe-head p {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

.wardrobe-head-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

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

.wardrobe-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.wardrobe-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.wardrobe-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.wardrobe-stat.is-positive strong {
  color: var(--positive);
}

.wardrobe-stat.is-warning strong {
  color: var(--warning);
}

.wardrobe-layout {
  align-items: flex-start;
}

.wardrobe-sidebar {
  width: min(300px, 31vw);
  flex: 0 0 min(300px, 31vw);
  padding: 14px;
}

.wardrobe-field,
.wardrobe-filter-group {
  display: grid;
  gap: 7px;
}

.wardrobe-field span,
.wardrobe-filter-group > span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.wardrobe-field select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
}

.wardrobe-tabs,
.wardrobe-filter-group {
  margin-top: 12px;
}

.wardrobe-tabs,
.wardrobe-filter-group {
  display: grid;
  gap: 6px;
}

.wardrobe-tabs button,
.wardrobe-filter-group button {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink2);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.wardrobe-tabs button.is-active,
.wardrobe-filter-group button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.wardrobe-main {
  flex: 1;
  min-width: 0;
  padding: 16px;
}

.wardrobe-panel-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.wardrobe-panel-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.12;
}

.wardrobe-panel-head p {
  margin: 5px 0 0;
  color: var(--ink3);
  font-size: 13px;
}

.wardrobe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.wardrobe-item,
.wardrobe-outfit,
.wardrobe-trip {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.wardrobe-photo {
  height: 180px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
}

.wardrobe-photo img,
.wardrobe-outfit-canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wardrobe-photo span {
  font-size: 36px;
}

.wardrobe-photo i {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}

.wardrobe-item-body,
.wardrobe-outfit-body,
.wardrobe-trip {
  padding: 12px;
}

.wardrobe-item h3,
.wardrobe-outfit h3,
.wardrobe-trip h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.wardrobe-item p,
.wardrobe-outfit p,
.wardrobe-trip p,
.wardrobe-outfit small,
.wardrobe-trip small {
  display: block;
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
}

.wardrobe-tags,
.wardrobe-people {
  margin-top: 8px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.wardrobe-tags span {
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
}

.wardrobe-actions {
  padding: 0 12px 12px;
  flex-wrap: wrap;
}

.wardrobe-outfits,
.wardrobe-trips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.wardrobe-outfit-canvas {
  min-height: 130px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  background: var(--surface2);
}

.wardrobe-outfit-canvas div {
  min-height: 78px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface);
}

.wardrobe-outfit-canvas p {
  grid-column: 1 / -1;
  align-self: center;
  justify-self: center;
  color: var(--ink3);
}

.wardrobe-trip-days {
  margin-top: 10px;
  display: grid;
  gap: 6px;
}

.wardrobe-trip-days span {
  padding: 8px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
}

.wardrobe-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  text-align: center;
}

.wardrobe-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.wardrobe-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.wardrobe-form {
  position: relative;
  width: min(720px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.wardrobe-form-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.wardrobe-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.wardrobe-form-grid .is-wide,
.wardrobe-checks {
  grid-column: 1 / -1;
}

.wardrobe-checks {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
}

.wardrobe-checks legend {
  padding: 0 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.wardrobe-checks label {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--ink2);
  font-size: 13px;
}

.wardrobe-checks p {
  margin: 0;
  color: var(--ink3);
}

.wardrobe-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .wardrobe-head,
  .wardrobe-layout,
  .wardrobe-panel-head {
    flex-direction: column;
    align-items: stretch;
  }

  .wardrobe-sidebar {
    width: 100%;
    flex-basis: auto;
  }

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

  .wardrobe-head-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .wardrobe-page {
    padding: 20px 12px 70px;
  }

  .wardrobe-stats,
  .wardrobe-form-grid {
    grid-template-columns: 1fr;
  }

  .wardrobe-form-grid .is-wide,
  .wardrobe-checks {
    grid-column: auto;
  }
}

/* ── VAULT MODULE ── */
.vault-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 28px clamp(14px, 2vw, 28px) 80px;
}

.vault-head,
.vault-owner,
.vault-layout,
.vault-list-head,
.vault-item,
.vault-form-head,
.vault-item-actions {
  display: flex;
  gap: 14px;
}

.vault-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.vault-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.vault-head p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

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

.vault-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.vault-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.vault-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.vault-stat.is-warning strong {
  color: var(--warning);
}

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

.vault-owner {
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 14px;
}

.vault-owner-main {
  display: flex;
  gap: 12px;
  align-items: center;
}

.vault-owner-main > span {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface2);
  font-size: 24px;
}

.vault-owner-main h2 {
  margin: 0;
  font-family: var(--serif);
}

.vault-field {
  display: grid;
  gap: 6px;
}

.vault-field span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.vault-field select {
  min-height: 40px;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
}

.vault-lock {
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.vault-lock.is-open {
  background: var(--pos-bg);
  color: var(--positive);
}

.vault-lock.is-closed {
  background: var(--danger-bg);
  color: var(--danger);
}

.vault-pin {
  max-width: 360px;
  margin: 0 auto;
  padding: 28px;
  text-align: center;
}

.vault-pin-icon {
  font-size: 46px;
  margin-bottom: 10px;
}

.vault-pin h2 {
  margin: 0;
  font-family: var(--serif);
}

.vault-pin p {
  margin: 6px 0 20px;
  color: var(--ink3);
}

.vault-pin-display {
  height: 44px;
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 10px;
}

.vault-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.vault-keypad button {
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.vault-pin-error {
  min-height: 18px;
  margin-top: 12px;
  color: var(--danger);
  font-size: 12px;
}

.vault-layout {
  align-items: flex-start;
}

.vault-sidebar {
  width: min(280px, 30vw);
  flex: 0 0 min(280px, 30vw);
  padding: 14px;
}

.vault-cats {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.vault-cats span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.vault-cats button {
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink2);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.vault-cats button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.vault-list {
  flex: 1;
  min-width: 0;
  padding: 16px;
}

.vault-list-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.vault-list-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
}

.vault-list-head p {
  margin: 5px 0 0;
  color: var(--ink3);
  font-size: 13px;
}

.vault-item {
  min-height: 78px;
  padding: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.vault-item + .vault-item {
  margin-top: 8px;
}

.vault-item-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface2);
  font-size: 22px;
}

.vault-item-main {
  min-width: 0;
  flex: 1;
}

.vault-item-main strong {
  display: block;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.vault-item-main p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.vault-item-main p.is-masked {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.vault-item-main small {
  display: block;
  margin-top: 4px;
  color: var(--ink3);
  font-size: 11px;
}

.vault-item-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.vault-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  text-align: center;
}

.vault-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.vault-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.vault-form {
  position: relative;
  width: min(640px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.vault-form-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.vault-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.vault-form-grid .is-wide {
  grid-column: 1 / -1;
}

.vault-check-field {
  justify-content: center;
}

.vault-check-field input {
  width: 18px;
  height: 18px;
}

.vault-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .vault-head,
  .vault-owner,
  .vault-layout,
  .vault-list-head {
    flex-direction: column;
    align-items: stretch;
  }

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

  .vault-sidebar {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 640px) {
  .vault-page {
    padding: 20px 12px 70px;
  }

  .vault-stats,
  .vault-form-grid {
    grid-template-columns: 1fr;
  }

  .vault-form-grid .is-wide {
    grid-column: auto;
  }

  .vault-item {
    flex-direction: column;
    align-items: stretch;
  }

  .vault-item-actions {
    justify-content: flex-start;
  }
}

/* ── PACKING MODULE ── */
.packing-page {
  width: 100%;
}

.packing-head,
.packing-layout,
.packing-detail-head,
.packing-actions,
.packing-form-head {
  display: flex;
  gap: 14px;
}

.packing-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.packing-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.packing-head p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

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

.packing-suggestions {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-xs);
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px;
}

.packing-suggestions h2 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.15;
  margin: 2px 0 0;
}

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

.packing-suggestion {
  align-items: center;
  background: var(--surface2);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  padding: 12px;
}

.packing-suggestion-icon {
  align-items: center;
  background: color-mix(in srgb, var(--packing-color, var(--accent)) 20%, var(--surface));
  border-radius: 8px;
  color: var(--packing-color, var(--accent));
  display: flex;
  font-size: 24px;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.packing-suggestion h3 {
  font-size: 15px;
  line-height: 1.25;
  margin: 0 0 4px;
}

.packing-suggestion p,
.packing-suggestion small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
}

.packing-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.packing-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.packing-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.packing-stat.is-positive strong {
  color: var(--positive);
}

.packing-stat.is-warning strong {
  color: var(--warning);
}

.packing-layout {
  align-items: flex-start;
}

.packing-sidebar {
  width: min(330px, 32vw);
  flex: 0 0 min(330px, 32vw);
  padding: 14px;
}

.packing-trip-list {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.packing-trip {
  width: 100%;
  min-height: 82px;
  padding: 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.packing-trip.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
}

.packing-trip > span:first-child {
  font-size: 24px;
}

.packing-trip strong,
.packing-trip small {
  display: block;
  overflow-wrap: anywhere;
}

.packing-trip strong {
  color: var(--ink);
  font-size: 13px;
}

.packing-trip small {
  margin-top: 3px;
  color: var(--ink3);
  font-size: 11px;
}

.packing-trip i,
.packing-progress i {
  height: 6px;
  margin-top: 8px;
  border-radius: 8px;
  display: block;
  overflow: hidden;
  background: var(--surface2);
}

.packing-trip i b,
.packing-progress i b {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--accent);
}

.packing-trip em {
  color: var(--ink3);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.packing-detail {
  flex: 1;
  min-width: 0;
  padding: 16px;
}

.packing-detail-head {
  align-items: center;
  margin-bottom: 16px;
}

.packing-trip-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--packing-color, var(--accent)) 20%, var(--surface2));
  font-size: 28px;
}

.packing-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 27px;
}

.packing-detail-head p {
  margin: 5px 0 0;
  color: var(--ink3);
}

.packing-detail-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.packing-progress {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  margin-bottom: 12px;
}

.packing-progress div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-weight: 900;
}

.packing-progress p {
  margin: 8px 0 0;
  color: var(--ink3);
  font-size: 12px;
}

.packing-actions {
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.packing-categories {
  display: grid;
  gap: 12px;
}

.packing-category {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.packing-category header {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--surface2);
}

.packing-category h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.packing-category p {
  margin: 3px 0 0;
  color: var(--ink3);
  font-size: 11px;
}

.packing-item {
  min-height: 48px;
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--line2);
}

.packing-item:last-child {
  border-bottom: 0;
}

.packing-item > button:first-child {
  width: 24px;
  height: 24px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent-contrast);
  font-weight: 900;
  cursor: pointer;
}

.packing-item.is-checked > button:first-child {
  border-color: var(--positive);
  background: var(--positive);
}

.packing-item span {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.packing-item.is-checked span {
  color: var(--ink3);
  text-decoration: line-through;
}

.packing-remove {
  border: 0;
  background: transparent;
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.packing-empty-state {
  min-height: 140px;
}

.packing-empty-state.packing-empty-state-detail {
  min-height: 380px;
}

.packing-empty-state.packing-empty-state-category {
  min-height: 170px;
}

.packing-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
}

.packing-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.packing-form {
  position: relative;
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.packing-form-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.packing-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.packing-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .packing-head,
  .packing-layout,
  .packing-detail-head {
    flex-direction: column;
    align-items: stretch;
  }

  .packing-sidebar {
    width: 100%;
    flex-basis: auto;
  }

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

  .packing-detail-actions {
    margin-left: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .packing-stats,
  .packing-form-grid {
    grid-template-columns: 1fr;
  }

  .packing-suggestion {
    align-items: flex-start;
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .packing-suggestion .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .packing-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .packing-remove {
    grid-column: 2;
    justify-self: start;
  }
}

/* ── RECIPES MODULE ── */
.recipes-page {
  width: 100%;
}

.recipes-head,
.recipes-toolbar,
.recipes-layout,
.recipe-detail-head,
.recipe-detail-actions,
.recipe-form-head {
  display: flex;
  gap: 14px;
}

.recipes-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.recipes-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.recipes-head p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

.recipes-toolbar {
  align-items: flex-end;
  padding: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.recipes-search {
  display: grid;
  gap: 6px;
  min-width: 240px;
}

.recipes-search span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.recipes-search input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 11px;
}

.recipes-cats {
  flex: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.recipes-layout {
  align-items: flex-start;
}

.recipes-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.recipe-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.recipe-card.is-selected {
  border-color: var(--accent);
}

.recipe-card-main {
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.recipe-photo {
  height: 155px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
}

.recipe-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.recipe-photo span {
  font-size: 42px;
}

.recipe-card-body {
  padding: 12px;
}

.recipe-category {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.recipe-card h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.recipe-card p {
  margin: 6px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
}

.recipe-tags {
  margin-top: 8px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.recipe-tags span {
  padding: 3px 7px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
}

.recipes-detail {
  /* removed from flow — always renders as fixed modal via .recipes-detail.card */
}

.recipe-detail-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.recipe-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.12;
}

.recipe-detail-head p {
  margin: 7px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

.recipe-difficulty {
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.recipe-difficulty.is-Łatwy {
  background: var(--pos-bg);
  color: var(--positive);
}

.recipe-difficulty.is-Średni {
  background: var(--warn-bg);
  color: var(--warning);
}

.recipe-difficulty.is-Trudny {
  background: var(--danger-bg);
  color: var(--danger);
}

.recipe-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.recipe-meta div {
  padding: 10px;
  border-radius: 8px;
  background: var(--surface2);
}

.recipe-meta span {
  display: block;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.recipe-meta strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.recipe-detail-actions {
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.recipe-section {
  margin-top: 14px;
}

.recipe-section h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 16px;
}

.recipe-ingredient {
  min-height: 38px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.recipe-ingredient:first-of-type {
  border-radius: 8px 8px 0 0;
}

.recipe-ingredient:last-child {
  border-bottom: 0;
  border-radius: 0 0 8px 8px;
}

.recipe-ingredient strong {
  color: var(--accent);
  font-size: 12px;
}

.recipe-ingredient span {
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.recipe-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 9px;
}

.recipe-step strong {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 12px;
}

.recipe-step p {
  margin: 3px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

.recipe-note {
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  background: var(--warn-bg);
  color: var(--ink2);
}

.recipe-note strong {
  display: block;
  color: var(--warning);
  font-size: 12px;
  text-transform: uppercase;
}

.recipe-note p {
  margin: 5px 0 0;
  line-height: 1.55;
}

.recipes-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  text-align: center;
}

.recipes-empty.is-detail {
  min-height: 340px;
}

.recipe-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 18px;
}

.recipe-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.recipe-form {
  position: relative;
  width: min(760px, calc(100vw - 28px));
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 20px;
}

.recipe-form-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.recipe-form-head h2 {
  margin: 0;
  font-family: var(--serif);
}

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

.recipe-form-grid .is-wide {
  grid-column: 1 / -1;
}

.recipe-plan-preview {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface2);
}

.recipe-plan-preview strong,
.recipe-plan-preview span {
  display: block;
}

.recipe-plan-preview strong {
  color: var(--ink);
}

.recipe-plan-preview span {
  margin-top: 6px;
  color: var(--ink3);
  font-size: 12px;
}

.recipe-form-actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 1020px) {
  .recipes-head,
  .recipes-layout,
  .recipe-detail-head {
    flex-direction: column;
    align-items: stretch;
  }

  .recipes-detail {
    width: 100%;
    flex-basis: auto;
    max-height: none;
  }
}

@media (max-width: 680px) {
  .recipes-page {
    width: 100%;
  }

  .recipes-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .recipe-meta,
  .recipe-form-grid {
    grid-template-columns: 1fr;
  }

  .recipe-form-grid .is-wide {
    grid-column: auto;
  }
}

/* ── MEAL PLANNER MODULE ── */
.meal-page {
  max-width: 1560px;
  margin: 0 auto;
  padding: 28px clamp(14px, 2vw, 28px) 80px;
}

.doc-tracker-page {
  width: 100%;
}

.doc-tracker-actions {
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

.doc-tracker-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
}

.doc-tracker-chip.is-danger {
  background: color-mix(in srgb, var(--danger) 12%, var(--surface) 88%);
  color: var(--danger);
}

.doc-tracker-chip.is-warning {
  background: color-mix(in srgb, var(--warning) 16%, var(--surface) 84%);
  color: var(--warning);
}

.doc-tracker-chip.is-positive {
  background: color-mix(in srgb, var(--positive) 14%, var(--surface) 86%);
  color: var(--positive);
}

.doc-tracker-rail {
  width: min(100%, 980px);
}

.doc-tracker-table-head,
.doc-tracker-row {
  display: grid;
  grid-template-columns: 2fr 1fr 0.8fr 0.8fr 0.8fr;
}

.doc-tracker-table-head {
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink3);
  border-bottom: 1px solid var(--line2);
}

.doc-tracker-row {
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line2);
  background: transparent;
  cursor: pointer;
  transition: background .12s ease;
  text-align: left;
  font-family: var(--sans);
}

.doc-tracker-row:hover {
  background: var(--surface2);
}

.doc-tracker-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.doc-tracker-owner,
.doc-tracker-date {
  font-size: 13px;
  color: var(--ink3);
}

.doc-tracker-type,
.doc-tracker-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 600;
}

.doc-tracker-type {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  color: var(--accent);
}

.doc-tracker-status {
  padding-inline: 9px;
  font-size: 11px;
}

.doc-tracker-status-meta {
  margin-top: 2px;
  font-size: 10px;
}

.doc-tracker-empty {
  padding: 40px;
  text-align: center;
  color: var(--ink3);
}

@media (max-width: 900px) {
  .doc-tracker-table-head,
  .doc-tracker-row {
    grid-template-columns: 1.8fr 1fr 0.8fr 0.9fr;
  }

  .doc-tracker-table-head span:nth-child(5),
  .doc-tracker-row > div:nth-child(5) {
    display: none;
  }
}

@media (max-width: 680px) {
  .doc-tracker-table-head,
  .doc-tracker-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.meal-head,
.meal-week,
.meal-recipe,
.meal-shopping {
  display: flex;
  gap: 14px;
}

.meal-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.meal-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.meal-head p {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

.meal-week {
  align-items: center;
  justify-content: center;
  padding: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.meal-week div {
  flex: 1;
  min-width: 220px;
  text-align: center;
}

.meal-week h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
}

.meal-week p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
}

.meal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
}

.meal-slots {
  display: grid;
  gap: 12px;
}

.meal-slot {
  display: grid;
  gap: 10px;
}

.meal-day {
  min-height: 176px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.meal-day header {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface2);
}

.meal-day h2 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.meal-day p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 12px;
}

.meal-recipe {
  min-height: 96px;
  padding: 12px;
  align-items: center;
}

.meal-photo {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
}

.meal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meal-photo span {
  font-size: 24px;
}

.meal-recipe div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.meal-recipe strong {
  display: block;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.meal-picker {
  padding: 14px;
  display: grid;
  gap: 7px;
}

.meal-picker span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.meal-picker select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
}

.meal-empty-day {
  padding: 14px;
  color: var(--ink3);
  font-size: 13px;
}

.meal-shopping {
  margin-top: 14px;
  padding: 16px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.meal-shopping h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
}

.meal-shopping p {
  margin: 5px 0 0;
  color: var(--ink3);
}

.meal-planned {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.meal-planned span {
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 760px) {
  .meal-page {
    padding: 20px 12px 70px;
  }

  .meal-head,
  .meal-shopping {
    flex-direction: column;
    align-items: stretch;
  }

  .meal-week div {
    min-width: 100%;
  }
}

/* ── HERITAGE MODULE ── */
.heritage-page {
  padding: 28px clamp(14px, 2vw, 28px) 80px;
}

.heritage-head,
.heritage-toolbar,
.heritage-layout,
.heritage-detail-head,
.heritage-actions {
  display: flex;
  gap: 14px;
}

.heritage-head {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.heritage-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.05;
}

.heritage-head p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

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

.heritage-stat {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.heritage-stat span {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.heritage-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  overflow-wrap: anywhere;
}

.heritage-stat.is-warning strong {
  color: var(--warning);
}

.heritage-toolbar {
  align-items: flex-end;
  padding: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.heritage-search {
  display: grid;
  gap: 6px;
  min-width: 240px;
}

.heritage-search span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.heritage-search input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 11px;
}

.heritage-cats {
  flex: 1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.heritage-layout {
  align-items: flex-start;
}

.heritage-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.heritage-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.heritage-card.is-selected {
  border-color: var(--accent);
}

.heritage-card-main {
  width: 100%;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.heritage-photo {
  height: 172px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--surface2);
}

.heritage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.heritage-photo span {
  font-size: 44px;
}

.heritage-photo em {
  position: absolute;
  top: 9px;
  left: 9px;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--scrim-strong);
  color: var(--accent-contrast);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.heritage-card-body {
  padding: 12px;
}

.heritage-card-body > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.heritage-card h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.heritage-card p,
.heritage-card small {
  display: block;
  margin: 7px 0 0;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.heritage-detail {
  width: min(420px, 38vw);
  flex: 0 0 min(420px, 38vw);
  padding: 16px;
}

.heritage-detail-head {
  align-items: flex-start;
  justify-content: space-between;
}

.heritage-detail-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.12;
}

.heritage-detail-head p {
  margin: 7px 0 0;
  color: var(--ink2);
  line-height: 1.55;
}

.heritage-detail-head > span {
  padding: 6px 9px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

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

.heritage-info div {
  padding: 10px;
  border-radius: 8px;
  background: var(--surface2);
}

.heritage-info dt {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.heritage-info dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.heritage-actions {
  margin-top: 14px;
  flex-wrap: wrap;
}

.heritage-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  color: var(--ink3);
  text-align: center;
}

.heritage-empty.is-detail {
  min-height: 340px;
}

/* heritage-modal/heritage-form/heritage-form-head → module-form-modal (2026-05-11) */

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

.heritage-form-grid .is-wide {
  grid-column: 1 / -1;
}

/* heritage-form-actions → module-form-modal-foot (2026-05-11) */

@media (max-width: 1020px) {
  .heritage-head,
  .heritage-layout,
  .heritage-detail-head {
    flex-direction: column;
    align-items: stretch;
  }

  .heritage-detail {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 680px) {
  .heritage-page {
    padding: 20px 12px 70px;
  }

  .heritage-stats,
  .heritage-info,
  .heritage-form-grid {
    grid-template-columns: 1fr;
  }

  .heritage-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .heritage-form-grid .is-wide {
    grid-column: auto;
  }
}

/* ── MEDICAL MODULE ─────────────────────────────────────────────────────── */
.medical-page {
  padding-bottom: 24px;
}

.health-layout {
  display: grid;
  grid-template-columns: minmax(210px, 230px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.health-rail {
  position: sticky;
  top: 16px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.health-person-picker {
  display: grid;
  gap: 6px;
}

.health-person-picker span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.health-tabs {
  display: grid;
  gap: 6px;
}

.health-tabs button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
  font: inherit;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.health-tabs button:hover {
  background: var(--surface2);
  color: var(--ink);
}

.health-tabs button.is-active {
  background: var(--card);
  border-color: var(--accent-md);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.health-content {
  min-width: 0;
}

/* ── SPORT ── */
/* Sport module — Energy OS token overrides */
/* --strava-brand defined in system.css :root */

.sport-page {
  max-width: none;
  width: 100%;
}

/* Layout */
.sport-layout {
  display: grid;
  grid-template-columns: 175px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* Sidebar */
.sport-sidebar {
  padding: 14px;
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sport-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sport-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ink3, var(--ink2));
  margin-bottom: 2px;
}

.sport-disc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sport-disc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--ink2);
  text-align: left;
  transition: background 0.15s, color 0.15s;
  width: 100%;
}

.sport-disc-item:hover {
  background: var(--surface2);
  color: var(--ink);
}

.sport-disc-item.is-active {
  background: var(--accent-lt);
  color: var(--ink);
  font-weight: 600;
}

.sport-disc-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.sport-disc-name {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sport-disc-count {
  font-size: 11px;
  color: var(--ink3, var(--ink2));
  background: var(--surface2);
  border-radius: 10px;
  padding: 1px 6px;
  flex-shrink: 0;
}

.sport-sidebar-add {
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
  padding: 4px 10px;
  text-align: left;
  border-radius: 6px;
  transition: background 0.15s;
}

.sport-sidebar-add:hover {
  background: var(--accent-lt);
}

/* Sharing */
.sport-sharing-label {
  font-size: 11px;
  color: var(--ink2);
  margin-bottom: 2px;
}

.sport-sharing-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sport-sharing-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink2);
}

.sport-sharing-row:hover { color: var(--ink); }

/* Tab bar */
.sport-global-actions {
  padding: 12px 16px;
  margin-bottom: 10px;
}

.sport-tab-bar {
  padding: 10px 14px;
  margin-bottom: 14px;
}

.sport-tab-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sport-tab-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ink2);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.sport-tab-chip:hover {
  background: var(--surface2);
  color: var(--ink);
}

.sport-tab-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 600;
}

/* Stats row */
.sport-stats-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sport-stat-chip {
  display: flex;
  align-items: baseline;
  gap: 4px;
  background: var(--surface2);
  border-radius: 10px;
  padding: 6px 12px;
}

.sport-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.sport-stat-lbl {
  font-size: 11px;
  color: var(--ink2);
}

/* Main panel */
.sport-main {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.sport-tab-panel {
  padding: 18px;
  min-height: 300px;
}

.sport-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

/* Routes grid */
.sport-route-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.sport-route-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sport-route-map {
  position: relative;
  height: 160px;
  background: var(--surface2);
  flex-shrink: 0;
}

.sport-map-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.sport-map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--ink2);
  font-size: 12px;
  text-align: center;
  padding: 12px;
  box-sizing: border-box;
}

.sport-map-ph-icon {
  font-size: 30px;
  line-height: 1;
}

.sport-map-ph-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sport-map-ph-hint {
  font-size: 10px;
  color: var(--ink3, var(--ink2));
}

.sport-map-has-link {
  background: linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);
  cursor: default;
}

.sport-map-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 20px;
  background: var(--accent);
  color: var(--accent-contrast);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
  transition: opacity 0.15s;
}

.sport-map-open-btn:hover { opacity: 0.85; }

.sport-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(4px);
  cursor: pointer;
  font-size: 16px;
  color: var(--ink3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}

.sport-fav-btn.is-fav { color: var(--warning); }
.sport-fav-btn:hover  { background: var(--surface); }

.sport-route-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.sport-route-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.sport-route-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.sport-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--ink2);
}

.sport-route-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}

.sport-route-link {
  text-decoration: none;
  font-size: 12px;
}

/* Activities */
.sport-activity-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sport-activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.sport-activity-row:hover { background: var(--surface2); }

.sport-activity-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.sport-disc-icon-sm {
  font-size: 20px;
  flex-shrink: 0;
}

.sport-activity-info { min-width: 0; }

.sport-activity-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sport-strava-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--strava-brand);
  color: var(--accent-contrast);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.sport-activity-meta {
  font-size: 12px;
  color: var(--ink2);
  margin-top: 2px;
}

.sport-activity-stats {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sport-stat-pill {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--ink2);
  white-space: nowrap;
}

/* Gear grid */
.sport-gear-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.sport-gear-card {
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sport-gear-card:hover { box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,.12)); }

.sport-gear-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sport-gear-icon {
  font-size: 24px;
  flex-shrink: 0;
}

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

.sport-gear-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.sport-gear-meta {
  font-size: 12px;
  color: var(--ink2);
  margin-top: 2px;
}

.sport-service-alert {
  font-size: 16px;
  flex-shrink: 0;
}

.sport-gear-km {
  font-size: 12px;
  color: var(--ink2);
}

/* Health bar */
.sport-health-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sport-health-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--surface2);
  overflow: hidden;
}

.sport-health-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--positive);
  transition: width 0.4s ease, background 0.4s ease;
}
.sport-health-bar-fill.is-ok     { background: var(--positive); }
.sport-health-bar-fill.is-warn   { background: var(--warning); }
.sport-health-bar-fill.is-danger { background: var(--danger); }

.sport-health-pct {
  font-size: 11px;
  font-weight: 700;
  min-width: 32px;
  text-align: right;
  color: var(--positive);
}
.sport-health-pct.is-ok     { color: var(--positive); }
.sport-health-pct.is-warn   { color: var(--warning); }
.sport-health-pct.is-danger { color: var(--danger); }

/* Wishlist */
.sport-wishlist-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 8px;
}

.sport-wishlist-head { margin-bottom: 10px; }

.sport-wishlist-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.sport-wishlist-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sport-wishlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface2);
}

.sport-wishlist-del {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ink2);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.sport-wishlist-del:hover {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Service */
.sport-service-group {
  margin-bottom: 18px;
}

.sport-service-group:last-child { margin-bottom: 0; }

.sport-service-gear-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.sport-service-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.sport-service-row:hover { background: var(--surface2); }

.sport-service-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.sport-service-dot.is-done    { background: var(--positive); }
.sport-service-dot.is-planned { background: var(--warning); }
.sport-service-dot.is-overdue { background: var(--danger); }

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

.sport-service-type {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.sport-service-meta {
  font-size: 11px;
  color: var(--ink2);
  margin-top: 2px;
}

.sport-service-status-label {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  flex-shrink: 0;
}

.sport-service-status-label.is-done    { color: var(--positive); background: var(--pos-bg); }
.sport-service-status-label.is-planned { color: var(--warning); background: var(--warn-bg); }
.sport-service-status-label.is-overdue { color: var(--danger); background: var(--danger-bg); }

.sport-service-empty { padding: 0 0 8px; }

/* Strava panel */
.sport-strava-panel {
  padding: 8px 0;
}

.sport-strava-connected {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sport-strava-disconnected {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 24px;
}

.sport-strava-logo-big {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--strava-brand);
  color: var(--accent-contrast);
  font-size: 28px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sport-strava-placeholder {
  font-size: 14px;
  color: var(--ink2);
  text-align: center;
  max-width: 320px;
  line-height: 1.6;
}

.sport-strava-connect-btn { min-width: 160px; }

.sport-strava-status {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sport-strava-logo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--strava-brand);
  color: var(--accent-contrast);
  font-size: 20px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sport-strava-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.sport-strava-sync-info {
  font-size: 12px;
  color: var(--ink2);
  margin-top: 2px;
}

.sport-strava-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sport-strava-mode-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.sport-strava-mode-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink2);
}

.sport-strava-mode-hint {
  font-size: 11px;
  color: var(--ink2);
  margin: 0;
  width: 100%;
}

/* Modals */
.sport-modal-form { min-width: min(480px, 92vw); }

/* Icon picker */
.sport-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.sport-icon-opt {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--surface2);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, background 0.15s;
}

.sport-icon-opt:hover   { background: var(--accent-lt); }
.sport-icon-opt.is-active {
  border-color: var(--accent);
  background: var(--accent-lt);
}

/* Discipline pick modal */
.sport-pick-modal { min-width: min(360px, 92vw); }
.sport-pick-modal .planner-qm-help { padding: 0 18px 4px; }

.sport-pick-disc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 18px 18px;
}

.sport-pick-disc-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
}

.sport-pick-disc-btn:hover {
  background: var(--accent-lt);
  border-color: var(--accent);
}

/* Responsive: narrow sidebar collapses to top strip */
@media (max-width: 700px) {
  .sport-layout {
    grid-template-columns: 1fr;
  }

  .sport-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .sport-sidebar-section:first-child {
    flex: 1;
    min-width: 200px;
  }

  .sport-disc-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sport-disc-item {
    flex-direction: column;
    align-items: center;
    padding: 8px;
    gap: 4px;
    font-size: 11px;
    width: auto;
    min-width: 60px;
  }

  .sport-route-grid,
  .sport-gear-grid {
    grid-template-columns: 1fr;
  }
}

.health-embedded-view {
  min-width: 0;
}

.health-embedded-view .cabinet-page,
.health-embedded-view .medications-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.health-embedded-view .cabinet-head,
.health-embedded-view .module-header {
  margin-bottom: 18px;
}

.health-header {
  margin-bottom: 20px;
}

.health-embedded-view .cabinet-head {
  gap: 20px;
  margin-bottom: 20px;
}

.health-header .page-title,
.health-embedded-view .module-header .page-title,
.health-embedded-view .cabinet-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0;
}

.health-embedded-view .cabinet-head .eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.health-header .page-sub,
.health-embedded-view .module-header .page-sub,
.health-embedded-view .cabinet-head p:last-of-type {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 720px;
}

.financial-embedded-view {
  min-width: 0;
}

.financial-embedded-view .assets-page,
.financial-embedded-view .cars-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.financial-embedded-view .assets-page-head,
.financial-embedded-view .cars-head {
  margin-bottom: 18px;
}

.financial-embedded-view .assets-page-head,
.financial-embedded-view .cars-head,
.financial-embedded-view .cars-head > div:first-child {
  gap: 16px;
}

.financial-embedded-view .eyebrow,
.financial-embedded-view .cars-head .eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.financial-embedded-view .page-title,
.financial-embedded-view .cars-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: 0;
}

.financial-embedded-view .page-sub,
.financial-embedded-view .page-subtitle,
.financial-embedded-view .cars-head p:last-of-type {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 720px;
}


.health-card-grid {
  align-items: start;
}

.health-detail-card {
  padding: 18px;
}

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

.health-fact-card {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface2);
}

.health-fact-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.health-fact-card strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.health-card-stack {
  display: grid;
  gap: 14px;
}

.health-stack-grid {
  display: grid;
  gap: 10px;
}

.health-stack-item {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface2);
}

.health-stack-item strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.health-stack-item span {
  display: block;
  margin-top: 4px;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.5;
}

.health-record-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 18px;
}

.health-record-year {
  min-width: 64px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--accent);
  font-weight: 800;
  text-align: center;
}

.health-record-main {
  min-width: 0;
}

.health-record-main p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.health-record-main h3 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.08;
}

.health-record-main span {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.6;
}

.health-calendar-event {
  border-color: color-mix(in srgb, var(--danger) 18%, var(--line));
}

.health-calendar-date {
  background: var(--surface);
  border: 1px solid var(--line2);
}

.health-calendar-date strong {
  display: block;
  color: var(--accent);
  font-size: 15px;
}

.health-calendar-date span {
  display: block;
  margin-top: 4px;
  color: var(--ink3);
  font-size: 12px;
}

.health-inline-empty {
  margin: 0;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.6;
}

.health-metric-card .health-record-main h3 {
  font-size: 22px;
}

.health-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.health-metric-grid div {
  padding: 12px;
  border-radius: 8px;
  background: var(--surface2);
}

.health-metric-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.health-metric-grid strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.medical-vax-group {
  padding: 18px;
}

.medical-shell {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  min-height: calc(100vh - var(--topbar-h, 0px));
  background: var(--bg);
}

.medical-sidebar {
  border-right: 1px solid var(--border);
  background: var(--surface);
  padding: 18px 12px;
}

.medical-kicker {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.medical-person {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.medical-person span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.medical-person select,
.medical-tabs button,
.medical-filter button {
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

.medical-person select {
  background: var(--card);
  color: var(--ink);
  padding: 9px 10px;
}

.medical-tabs {
  display: grid;
  gap: 6px;
}

.medical-tabs button {
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 9px 10px;
  text-align: left;
}

.medical-tabs button.is-active {
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
}

.medical-main {
  min-width: 0;
  overflow: auto;
  padding: 28px 30px 70px;
}

.medical-header {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.medical-header h1 {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
  margin: 2px 0 6px;
}

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

.medical-stats,
.medical-grid {
  display: grid;
  gap: 14px;
}

.medical-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
}

.medical-stats article,
.medical-panel,
.medical-row,
.medical-event {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.medical-stats article,
.medical-panel {
  padding: 16px;
}

.medical-stats strong {
  color: var(--accent);
  display: block;
  font-size: 26px;
  line-height: 1;
}

.medical-stats span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 7px;
}

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

.medical-panel h2,
.medical-modal-panel h2 {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 20px;
  margin: 0 0 14px;
}

.medical-info {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 4px;
  padding: 11px 0;
}

.medical-info:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.medical-info span,
.medical-mini span,
.medical-row p,
.medical-row small,
.medical-event p,
.medical-event span,
.medical-history p,
.medical-history span {
  color: var(--muted);
  font-size: 12px;
}

.medical-info strong,
.medical-mini strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.medical-mini {
  border-top: 1px solid var(--border);
  display: grid;
  gap: 4px;
  padding: 10px 0;
}

.medical-list,
.medical-timeline,
.medical-history {
  display: grid;
  gap: 10px;
}

.medical-row,
.medical-event {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 16px;
}

.medical-row h3,
.medical-event h3,
.medical-history h3 {
  color: var(--ink);
  font-size: 16px;
  margin: 3px 0;
}

.medical-row.is-done {
  opacity: 0.64;
}

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

.medical-event {
  justify-content: flex-start;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.medical-event.is-late {
  border-color: rgba(196, 92, 58, 0.35);
}

.medical-event-date {
  background: var(--surface);
  border-radius: 8px;
  min-width: 108px;
  padding: 10px;
}

.medical-event-date strong,
.medical-event-date span {
  display: block;
}

.medical-event-date strong {
  color: var(--accent);
  font-size: 14px;
}

.medical-history article {
  display: grid;
  gap: 14px;
  grid-template-columns: 72px minmax(0, 1fr);
}

.medical-year {
  align-self: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  font-weight: 800;
  padding: 10px;
  text-align: center;
}

.medical-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.medical-filter button {
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  padding: 9px 12px;
}

.medical-filter button.is-active {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}

.medical-table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
}

.medical-table-head,
.medical-table-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 130px 80px 100px 70px 80px minmax(180px, 1fr);
  min-width: 760px;
  padding: 12px 14px;
}

.medical-table-head {
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.medical-table-row {
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-size: 13px;
}

.medical-modal {
  display: grid;
  inset: 0;
  padding: 24px;
  place-items: center;
  position: fixed;
  z-index: 80;
  isolation: isolate;
}

.medical-modal-backdrop {
  background: color-mix(in srgb, var(--scrim-strong) 87%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 0;
  cursor: pointer;
  height: 100%;
  position: absolute;
  width: 100%;
}

.medical-modal-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 40px);
  max-width: 840px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  width: min(840px, calc(100vw - 40px));
  z-index: 1;
}

.medical-modal-panel header,
.medical-modal-panel footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.medical-modal-panel header button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.medical-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.medical-form-grid .is-wide {
  grid-column: 1 / -1;
}

.medical-form-grid .field {
  min-width: 0;
}

.medical-form-grid small {
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.5;
}

.is-warning {
  color: var(--danger) !important;
  font-weight: 700;
}

@media (max-width: 1500px) {
  .health-embedded-view .cabinet-toolbar,
  .health-embedded-view .medications-toolbar {
    grid-template-columns: 1fr;
  }

  .health-embedded-view .cabinet-layout,
  .health-embedded-view .medications-layout {
    grid-template-columns: 1fr;
  }

  .health-embedded-view .cabinet-detail,
  .health-embedded-view .collection-detail {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 1280px) {
  .health-layout {
    grid-template-columns: 1fr;
  }

  .health-rail {
    position: static;
  }

  .health-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .health-tabs button {
    white-space: nowrap;
  }
}

@media (max-width: 760px) {
  .health-layout {
    grid-template-columns: 1fr;
  }

  .health-rail {
    position: static;
  }

  .health-tabs {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .health-tabs button {
    white-space: nowrap;
  }



  .health-record-card {
    grid-template-columns: 1fr;
  }

  .health-detail-grid,
  .health-metric-grid {
    grid-template-columns: 1fr;
  }

  .medical-shell {
    grid-template-columns: 1fr;
  }

  .medical-sidebar {
    border-bottom: 1px solid var(--border);
    border-right: 0;
  }

  .medical-tabs {
    display: flex;
    overflow-x: auto;
  }

  .medical-tabs button {
    white-space: nowrap;
  }

  .medical-main {
    padding: 20px 16px 60px;
  }

  .medical-header,
  .medical-row {
    align-items: stretch;
    flex-direction: column;
  }

  .medical-stats,
  .medical-grid,
  .medical-form-grid {
    grid-template-columns: 1fr;
  }

  .medical-modal,
  .legacy-modal {
    padding: 12px;
  }

  .medical-modal-panel,
  .legacy-form {
    width: min(100%, calc(100vw - 24px));
    padding: 18px;
  }
}

/* ── LEGACY SAFE MODULE ─────────────────────────────────────────────────── */
.legacy-page {
  min-height: calc(100vh - var(--topbar-h, 0px));
  overflow: auto;
  padding: 28px 24px 84px;
}

.legacy-hero,
.legacy-section-title,
.legacy-entry,
.legacy-form header,
.legacy-form footer {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.legacy-hero {
  margin: 0 auto 18px;
  max-width: 1040px;
}

.legacy-hero h1 {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.05;
  margin: 2px 0 8px;
}

.legacy-hero p {
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}

.legacy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.legacy-stats,
.legacy-grid {
  display: grid;
  gap: 14px;
  margin: 0 auto 18px;
  max-width: 1040px;
}

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

.legacy-stats article,
.legacy-panel,
.legacy-empty,
.legacy-entry {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.legacy-stats article {
  padding: 16px;
}

.legacy-stats strong {
  color: var(--accent);
  display: block;
  font-size: 26px;
  line-height: 1;
}

.legacy-stats span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 7px;
  text-transform: uppercase;
}

.legacy-stats p,
.legacy-panel p,
.legacy-empty p,
.legacy-entry p,
.legacy-entry span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
  margin: 7px 0 0;
}

.legacy-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  align-items: start;
}

.legacy-panel {
  padding: 18px;
}

.legacy-panel h2,
.legacy-section-title h2,
.legacy-form h2 {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
  margin: 0 0 12px;
}

.legacy-panel ol {
  color: var(--ink);
  line-height: 1.8;
  margin: 0 0 14px 20px;
  padding: 0;
}

.legacy-protocol {
  background: var(--surface);
  border-radius: 8px;
  margin: 14px 0;
  padding: 14px;
}

.legacy-protocol span {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 7px;
  text-transform: uppercase;
}

.legacy-protocol p {
  color: var(--ink);
  font-size: 13px;
  margin: 0;
}

.legacy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}

.legacy-tags span,
.legacy-hint {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  padding: 7px 9px;
}

.legacy-content {
  margin: 20px auto 0;
  max-width: 1040px;
}

.legacy-section-title {
  margin-bottom: 10px;
}

.legacy-section-title span {
  background: var(--accent);
  border-radius: 8px;
  color: var(--card);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
}

.legacy-empty {
  display: grid;
  gap: 9px;
  justify-items: center;
  padding: 32px 20px;
  text-align: center;
}

.legacy-empty strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
}

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

.legacy-entry {
  padding: 16px;
}

.legacy-entry h3 {
  color: var(--ink);
  font-size: 17px;
  margin: 4px 0 10px;
}

.legacy-entry pre {
  background: var(--surface);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  line-height: 1.6;
  margin: 0;
  padding: 12px;
  white-space: pre-wrap;
}

.legacy-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.legacy-modal {
  display: grid;
  inset: 0;
  padding: 24px;
  place-items: center;
  position: fixed;
  z-index: 90;
  isolation: isolate;
}

.legacy-modal-backdrop {
  background: color-mix(in srgb, var(--scrim-strong) 87%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 0;
  cursor: pointer;
  height: 100%;
  position: absolute;
  width: 100%;
}

.legacy-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 40px);
  max-width: 760px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  width: min(760px, calc(100vw - 40px));
  z-index: 1;
}

.legacy-form header,
.legacy-form footer {
  align-items: center;
}

.legacy-form header button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.legacy-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.legacy-form-grid .is-wide {
  grid-column: 1 / -1;
}

.legacy-form-grid .field {
  min-width: 0;
}

.legacy-form-grid small {
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .legacy-page {
    padding: 20px 14px 70px;
  }

  .legacy-hero,
  .legacy-entry {
    align-items: stretch;
    flex-direction: column;
  }

  .legacy-stats,
  .legacy-grid,
  .legacy-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── DOCUMENT CENTRE MODULE ─────────────────────────────────────────────── */
.docs-page {
  width: 100%;
  min-height: 0;
  overflow: visible;
}

.docs-toolbar,
.docs-detail-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}


.docs-toolbar {
  margin-bottom: 16px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) repeat(3, minmax(180px, 0.7fr));
  gap: 12px;
  align-items: end;
}

.docs-layout {
  gap: 16px;
}

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

.docs-field {
  display: grid;
  gap: 5px;
}

.docs-field span {
  color: var(--ink3);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.docs-field-search {
  min-width: 0;
}

.docs-card {
  cursor: pointer;
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  text-align: left;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.docs-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(46, 134, 171, 0.1);
}

.docs-card strong,
.docs-detail h2 {
  color: var(--ink);
}

.docs-card strong {
  font-size: 16px;
}

.docs-card small,
.docs-card em,
.docs-info span,
.docs-note span {
  color: var(--muted);
  font-size: 12px;
}

.docs-card em {
  font-style: normal;
}

.docs-status {
  background: var(--surface);
  border-radius: 8px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-self: start;
  padding: 5px 8px;
  text-transform: uppercase;
}

.docs-status.is-active,
.docs-status.is-permanent {
  color: var(--green);
}

.docs-detail {
  padding: 18px;
  position: sticky;
  top: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.docs-detail h2 {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.15;
  margin: 14px 0;
}

.docs-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

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

.docs-info div,
.docs-note {
  background: var(--surface);
  border-radius: 8px;
  padding: 11px;
}

.docs-info strong {
  color: var(--ink);
  display: block;
  font-size: 13px;
  margin-top: 3px;
}

.docs-note {
  margin-top: 12px;
}

.docs-note p {
  color: var(--ink);
  line-height: 1.55;
  margin: 5px 0 0;
}

/* docs-modal/docs-form/docs-form-head → module-form-modal (2026-05-11) */

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

.docs-form-grid .is-wide {
  grid-column: 1 / -1;
}

.docs-form-grid small {
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.5;
}

.docs-attachment-actions {
  margin-top: 14px;
}

@media (max-width: 820px) {
  .docs-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .docs-toolbar,
  .docs-layout,
  .docs-info,
  .docs-form-grid {
    grid-template-columns: 1fr;
  }

  .docs-detail {
    position: static;
  }
}

/* Sprint 1 finance additions */
.budget-page,
.wishlist-page {
  display: grid;
  gap: 16px;
  max-width: none;
  margin: 0 auto;
  width: 100%;
}

.budget-shell-header,
.wishlist-head,
.financial-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.budget-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.budget-tab,
.financial-tab {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
}

.budget-tab.is-active,
.financial-tab.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.budget-summary-grid,
.budget-inline-stats,
.financial-stats {
  display: grid;
  gap: 12px;
}

.budget-chip-row,
.wishlist-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.budget-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.budget-summary-card,
.budget-category-item,
.budget-sub-card,
.budget-ai-card,
.wishlist-card,
.financial-goal-card,
.financial-investment-detail,
.financial-panel.is-placeholder,
.financial-company-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.budget-summary-card.is-positive strong,
.financial-cashflow-balance.is-positive,
.is-positive {
  color: var(--positive);
}

.budget-summary-card.is-negative strong,
.financial-cashflow-balance.is-negative,
.is-negative {
  color: var(--danger);
}

.budget-card,
.budget-page-head,
.wishlist-toolbar,
.wishlist-grid-shell,
.wishlist-detail-shell {
  display: grid;
  gap: 16px;
}

.budget-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.budget-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.budget-list,
.financial-list,
.budget-category-list,
.budget-subscription-grid,
.financial-goal-grid,
.financial-investment-list,
.wishlist-grid,
.wishlist-layout,
.financial-investment-layout {
  display: grid;
  gap: 12px;
}

.budget-row,
.financial-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--card);
}

.budget-amount,
.budget-row-actions,
.financial-actions,
.financial-head-buttons,
.financial-position-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.budget-progress,
.financial-bar {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  overflow: hidden;
}

.budget-progress span,
.financial-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
}

.budget-progress span.is-over {
  background: var(--danger);
}

.budget-category-top,
.budget-sub-card header,
.wishlist-card-body,
.wishlist-card-head,
.financial-goal-card header,
.wishlist-detail-head {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: flex-start;
}

.budget-subscription-grid,
.financial-goal-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.budget-sub-emoji,
.budget-owner-pill {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}

.budget-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.budget-switch input {
  appearance: none;
  width: 38px;
  height: 22px;
  background: var(--surface);
  border-radius: 999px;
  position: relative;
  outline: none;
}

.budget-switch input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 0.2s ease;
}

.budget-switch input:checked::after {
  transform: translateX(16px);
  background: var(--accent);
}

.budget-ai-box,
.budget-ai-results,
.financial-cashflow,
.financial-investment-layout {
  display: grid;
  gap: 12px;
}

.budget-ai-results {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.budget-ai-card p,
.budget-empty,
.wishlist-empty,
.wishlist-detail-empty,
.wishlist-chart-empty,
.financial-panel.is-placeholder p {
  color: var(--ink3);
}

.budget-modal,
.wishlist-modal,
.financial-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 16px;
}

.budget-modal-backdrop,
.wishlist-modal-backdrop,
.financial-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim-medium);
}

.budget-modal-card,
.wishlist-form,
.financial-form {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: min(90vh, 900px);
  overflow: auto;
  display: grid;
  gap: 16px;
}

.budget-form-grid,
.wishlist-form-grid,
.financial-form-grid,
.financial-roi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.field-wide,
.is-wide {
  grid-column: 1 / -1;
}

.budget-trend {
  display: grid;
  gap: 10px;
}

.budget-trend-row {
  display: grid;
  gap: 8px;
}

.budget-trend-bars {
  display: grid;
  gap: 6px;
}

.budget-bar.is-income {
  background: var(--accent);
}

.budget-bar.is-expense {
  background: var(--danger);
}

.budget-limit-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.goal-circle {
  width: 96px;
  height: 96px;
}

.goal-circle-track {
  fill: none;
  stroke: var(--surface);
  stroke-width: 10;
}

.goal-circle-value {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.goal-circle text {
  fill: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.financial-investment-layout,
.wishlist-layout {
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1.2fr);
}

.financial-position-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(70px, 1fr));
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.financial-position-row:last-child {
  border-bottom: 0;
}

.financial-roi-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 8px;
  align-items: end;
}

.financial-roi-bar {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.financial-roi-bar span {
  width: 100%;
  min-height: 24px;
  background: var(--accent);
  border-radius: 8px 8px 0 0;
}

.wishlist-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.wishlist-card {
  display: grid;
  gap: 0;
  cursor: pointer;
  overflow: hidden;
  padding: 0;
}

.wishlist-image,
.wishlist-detail-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
}

.wishlist-image img,
.wishlist-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wishlist-image-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 40px;
}

.wishlist-hit-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--positive);
  color: var(--accent-contrast);
  font-size: 12px;
}

.wishlist-price {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--accent);
}

.wishlist-card-body {
  padding: 14px;
  display: grid;
  gap: 8px;
}

.wishlist-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.wishlist-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--ink2);
  font-size: 12px;
}

.wishlist-mini-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32px, 1fr));
  gap: 6px;
  align-items: end;
}

.wishlist-mini-bar {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.wishlist-mini-bar span {
  width: 100%;
  min-height: 10px;
  background: var(--accent);
  border-radius: 8px 8px 0 0;
}

.wishlist-search {
  display: grid;
  gap: 6px;
}

.home-inventory-page,
.plants-page,
.cleaning-page,
.creator-page,
.event-planner-page {
  display: grid;
  gap: 20px;
}

.home-inventory-head,
.plants-head,
.cleaning-head,
.creator-head,
.event-planner-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.home-inventory-head .btn-row,
.plants-head .btn-row,
.cleaning-head .btn-row,
.creator-head .btn-row,
.event-planner-head .btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.inventory-alert,
.plants-bulk,
.creator-setup,
.event-planner-banner,
.cleaning-top-note {
  display: grid;
  gap: 14px;
}

.inventory-alert-list,
.assets-manual-facts,
.assets-manual-tasks,
.assets-manual-contacts,
.cleaning-task-list,
.creator-tip-list,
.event-guest-list,
.event-task-list,
.calendar-sprint-list {
  display: grid;
  gap: 8px;
}

.inventory-alert-row,
.assets-manual-fact,
.assets-manual-task,
.assets-manual-contact,
.cleaning-task-row,
.creator-tip,
.event-guest-row,
.event-task-row,
.calendar-sprint-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.inventory-toolbar,
.cleaning-toolbar,
.creator-toolbar,
.event-toolbar,
.calendar-sprint-toolbar {
  display: grid;
  gap: 14px;
}

.inventory-toolbar-grid,
.cleaning-toolbar-grid,
.creator-toolbar-grid,
.event-toolbar-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.inventory-chips,
.plants-badges,
.cleaning-chips,
.creator-chips,
.event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-layout,
.cleaning-layout,
.creator-layout,
.event-planner-layout {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.85fr);
  align-items: start;
}

.inventory-grid,
.plants-grid,
.creator-list,
.event-planner-list {
  display: grid;
  gap: 12px;
  align-content: start;
}

.inventory-detail,
.plants-detail,
.cleaning-detail,
.creator-detail,
.event-detail {
  display: grid;
  gap: 16px;
  align-content: start;
}

.creator-list,
.event-planner-list {
  padding: 18px;
  min-height: 420px;
}

.creator-detail,
.event-detail {
  padding: 18px;
  position: sticky;
  top: 18px;
}

.inventory-empty,
.cleaning-empty,
.creator-empty,
.event-empty,
.calendar-empty-small {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 160px;
  color: var(--ink2);
}

.inventory-card,
.plants-card,
.cleaning-profile-card,
.creator-card,
.event-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.inventory-card.is-active,
.plants-card.is-active,
.cleaning-profile-card.is-active,
.creator-card.is-active,
.event-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  box-shadow: var(--shadow-md);
}

.inventory-thumb,
.plants-thumb,
.creator-thumb,
.event-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 30px;
}

.creator-head,
.event-planner-head,
.family-journal-page {
  gap: 24px;
}

.inventory-thumb img,
.plants-thumb img,
.creator-thumb img,
.event-thumb img,
.inventory-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inventory-card-body,
.plants-card-body,
.creator-card-body,
.event-card-body {
  display: grid;
  gap: 8px;
}

.inventory-card-body p,
.plants-card-body p,
.creator-card-body p,
.event-card-body p {
  margin: 0;
  color: var(--ink2);
}

.inventory-badges,
.plants-badges,
.creator-badges,
.event-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inventory-detail-head,
.plants-detail-head,
.cleaning-detail-head,
.creator-detail-head,
.event-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.inventory-detail-actions,
.plants-detail-actions,
.cleaning-detail-actions,
.creator-detail-actions,
.event-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inventory-photo,
.creator-cover,
.event-spaceplan,
.child-milestone-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface2);
  min-height: 220px;
  display: grid;
  place-items: center;
}

.inventory-photo-empty {
  font-size: 40px;
  color: var(--ink2);
}

.inventory-meta,
.creator-meta,
.event-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.inventory-meta dt,
.creator-meta dt,
.event-meta dt {
  color: var(--ink3);
  font-size: 12px;
}

.inventory-meta dd,
.creator-meta dd,
.event-meta dd {
  margin: 2px 0 0;
  font-weight: 600;
}

.inventory-notes,
.creator-notes,
.cleaning-notes,
.event-summary-card {
  display: grid;
  gap: 8px;
}

.inventory-form,
.cleaning-form,
.creator-form,
.event-form {
  display: grid;
  gap: 16px;
}

.inventory-form-grid,
.cleaning-form-grid,
.creator-form-grid,
.event-form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.inventory-form-grid .field-wide,
.cleaning-form-grid .field-wide,
.creator-form-grid .field-wide,
.event-form-grid .field-wide {
  grid-column: 1 / -1;
}

.plants-bulk {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.plants-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.plants-detail {
  padding: 20px;
}

.plants-detail .inventory-photo {
  min-height: 200px;
}

.cleaning-profile-list,
.creator-project-list {
  display: grid;
  gap: 12px;
}

.cleaning-task-row,
.event-guest-row,
.event-task-row,
.calendar-sprint-row {
  align-items: flex-start;
}

.cleaning-task-row.is-done,
.calendar-sprint-row.is-done {
  opacity: 0.72;
}

.cleaning-task-row strong,
.event-task-row strong,
.calendar-sprint-row strong {
  display: block;
}

.creator-stage-bar {
  display: grid;
  gap: 10px;
}

.creator-stage-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.creator-stage {
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.creator-stage.is-active {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
  background: var(--accent-lt);
}

.creator-updates {
  display: grid;
  gap: 10px;
}

.creator-update {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.creator-tip.is-dismissed {
  display: none;
}

.creator-tracking-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.event-tabs,
.assets-manual-tabs,
.chores-reminders-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.event-tab-panel,
.assets-manual-panel,
.chores-reminders-panel {
  display: grid;
  gap: 12px;
}

.event-space-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.event-spaceplan-canvas {
  width: 100%;
  height: 400px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.calendar-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.calendar-tab {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}

.calendar-tab.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: transparent;
}

.calendar-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.calendar-sprint-stage {
  position: relative;
  min-height: 520px;
}

.calendar-sprint-main {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.calendar-sprint-dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  flex: 0 0 auto;
  margin-top: 5px;
}

.calendar-focus-close {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 4;
}

.calendar-travel-stack {
  display: grid;
  gap: 10px;
}

.calendar-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.calendar-color-chip {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.calendar-color-chip.is-active {
  border-color: var(--ink);
}

.calendar-sprint {
  display: grid;
  gap: 16px;
}

.calendar-focus-shell {
  position: absolute;
  inset: auto 16px 16px auto;
  width: 180px;
  height: 240px;
  z-index: 3;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.calendar-focus-pill {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: grid;
  place-items: center;
  user-select: none;
}

.calendar-focus-fill {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 0%;
  background: var(--accent);
  transition: height 0.5s ease, background 0.35s ease;
}

.calendar-focus-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 6px;
  text-align: center;
  padding: 16px;
}

.calendar-focus-content strong {
  font-size: 32px;
  font-weight: 500;
}

.calendar-focus-content span {
  font-size: 11px;
  color: var(--ink2);
}

.calendar-focus-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.calendar-suggestion {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.calendar-suggestion-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

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

.assets-manual-editor {
  display: grid;
  gap: 12px;
}

.assets-manual-facts {
  grid-template-columns: 1fr;
}

.assets-manual-fact strong,
.assets-manual-task strong,
.assets-manual-contact strong {
  display: block;
}

.assets-manual-contact a {
  color: var(--accent);
}

.chores-reminder-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

.chores-reminder-row.is-done {
  background: color-mix(in srgb, var(--positive) 8%, var(--surface));
}

.chores-reminder-assignees {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chores-reminder-check {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  place-items: center;
}

.mod-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

.mod-tabbar button {
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
}

.mod-tabbar button.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: transparent;
}

@media (max-width: 767px) {
  .budget-row,
  .financial-row,
  .financial-position-row,
  .wishlist-layout,
  .financial-investment-layout,
  .inventory-layout,
  .cleaning-layout,
  .creator-layout,
  .event-planner-layout {
    grid-template-columns: 1fr;
  }

  .budget-shell-header,
  .wishlist-head,
  .financial-panel-head,
  .home-inventory-head,
  .plants-head,
  .cleaning-head,
  .creator-head,
  .event-planner-head {
    flex-direction: column;
  }

  .budget-modal-card,
  .wishlist-form,
  .financial-form,
  .inventory-form,
  .cleaning-form,
  .creator-form,
  .event-form {
    width: 100%;
  }

  .plants-bulk {
    grid-template-columns: 1fr;
  }

  .calendar-focus-shell {
    right: 10px;
    bottom: 10px;
    width: 160px;
    height: 220px;
  }
}

/* RC1 calendar integration: external module events shown inside Planner calendar */
.planner-calendar-task.is-global-event {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-style: dashed;
}

.planner-calendar-task.is-global-event strong {
  font-weight: 650;
}

/* RC2 personalization foundation */
html[data-density='compact'] {
  --topbar-h: 46px;
  --sidebar-w: 220px;
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 22px;
}

html[data-density='comfortable'] {
  --topbar-h: 56px;
  --sidebar-w: 260px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 30px;
}

html[data-density='compact'] .page-wrap {
  padding: 20px 20px 64px;
}

html[data-density='compact'] .module-header,
html[data-density='compact'] .page-head,
html[data-density='compact'] .section-head {
  margin-bottom: 14px;
}

html[data-density='compact'] .nav-item {
  min-height: 32px;
  padding: 6px 8px;
  gap: 8px;
  border-radius: 9px;
}

html[data-density='compact'] .sidebar-section-label {
  padding: 9px 8px 3px;
}

html[data-density='compact'] .card,
html[data-density='compact'] .panel {
  border-radius: 12px;
}

html[data-density='compact'] .btn,
html[data-density='compact'] .field-input,
html[data-density='compact'] .medical-tabs button,
html[data-density='compact'] .people-tabs button,
html[data-density='compact'] .budget-tabs button,
html[data-density='compact'] .mod-tabbar button,
html[data-density='compact'] .event-tabs button,
html[data-density='compact'] .pets-tabs button,
html[data-density='compact'] .projects-tabs button,
html[data-density='compact'] .calendar-tabs .calendar-tab,
html[data-density='compact'] .medications-filters .btn {
  min-height: 34px;
  padding-top: 8px;
  padding-bottom: 8px;
}

html[data-density='comfortable'] .page-wrap {
  padding: 34px 30px 96px;
}

html[data-density='comfortable'] .nav-item {
  min-height: 42px;
  padding: 10px 12px;
}

html[data-skin='minimal'] {
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

html[data-skin='minimal'] .card,
html[data-skin='minimal'] .panel,
html[data-skin='minimal'] .topbar,
html[data-skin='minimal'] .sidebar,
html[data-skin='minimal'] .more-drawer-sheet {
  box-shadow: none !important;
}

html[data-skin='minimal'] .nav-item.is-active {
  background: var(--surface2);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
}

html[data-skin='glass'] .topbar,
html[data-skin='glass'] .card,
html[data-skin='glass'] .panel,
html[data-skin='glass'] .more-drawer-sheet {
  background: color-mix(in srgb, var(--surface) 74%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

html[data-skin='glass'] .sidebar {
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

html[data-icons='mono'] .nav-icon,
html[data-icons='mono'] .bn-icon,
html[data-icons='mono'] .more-item-icon,
html[data-icons='mono'] .settings-theme-preview-icon,
html[data-icons='line'] .nav-icon,
html[data-icons='line'] .bn-icon,
html[data-icons='line'] .more-item-icon,
html[data-icons='line'] .settings-theme-preview-icon {
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

html[data-icons='line'] .nav-icon,
html[data-icons='line'] .bn-icon,
html[data-icons='line'] .more-item-icon,
html[data-icons='line'] .settings-theme-preview-icon {
  font-weight: 500;
  color: var(--ink2);
}

html[data-icons='color'] .nav-icon,
html[data-icons='color'] .bn-icon,
html[data-icons='color'] .more-item-icon {
  filter: saturate(0.78);
}

.settings-personalization-panel {
  display: grid;
  gap: 20px;
}

.personalization-block {
  padding-top: 2px;
}

.personalization-block + .personalization-block {
  padding-top: 18px;
  border-top: 1px solid var(--line2);
}

.personalization-block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

.personalization-block-head strong {
  font-size: 14px;
  color: var(--ink);
}

.personalization-block-head small {
  color: var(--ink2);
  line-height: 1.4;
  text-align: right;
}

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

.personalization-card {
  min-height: 122px;
}

.skin-preview,
.density-preview,
.iconset-preview {
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surface2);
  display: grid;
  gap: 5px;
  padding: 8px;
}

.skin-preview {
  grid-template-columns: 24px 1fr;
  grid-template-rows: repeat(3, 1fr);
}

.skin-preview i:first-child {
  grid-row: 1 / -1;
  background: var(--accent-lt);
}

.skin-preview i {
  border-radius: 6px;
  background: var(--line);
}

.skin-preview-minimal i {
  background: var(--line);
}

.skin-preview-glass {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
}

.density-preview {
  grid-template-columns: 1fr;
}

.density-preview i {
  border-radius: 999px;
  background: var(--line);
}

.density-preview-comfortable { gap: 8px; }
.density-preview-standard { gap: 5px; }
.density-preview-compact { gap: 2px; }

.iconset-preview {
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  text-align: center;
  font-size: 18px;
}

.iconset-preview-mono,
.iconset-preview-line {
  color: var(--accent);
  font-weight: 700;
}

.iconset-preview-line {
  color: var(--ink2);
  font-weight: 500;
}

@media (max-width: 900px) {
  .personalization-grid,
  .theme-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personalization-block-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .personalization-block-head small {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .personalization-grid,
  .theme-grid {
    grid-template-columns: 1fr;
  }
}

/* RC2 extended visual styles */
html[data-skin='dark'] {
  --base: #101010;
  --surface: #191919;
  --surface2: #242424;
  --surface3: #303030;
  --line: rgba(255, 255, 255, 0.09);
  --line2: rgba(255, 255, 255, 0.05);
  --border: var(--line);
  --ink: #f6f3ee;
  --ink2: rgba(246, 243, 238, 0.72);
  --ink3: rgba(246, 243, 238, 0.46);
  --muted: var(--ink3);
  --card: var(--surface);
  --accent: #c9a47a;
  --accent-lt: rgba(201, 164, 122, 0.15);
  --accent-md: rgba(201, 164, 122, 0.3);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.36);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md: 0 8px 24px var(--scrim), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

html[data-skin='nature'] {
  --base: #f1f5ed;
  --surface: #ffffff;
  --surface2: #e7efe0;
  --surface3: #d9e5cf;
  --ink: #182316;
  --ink2: rgba(24, 35, 22, 0.7);
  --ink3: rgba(24, 35, 22, 0.46);
  --accent: #4c7a43;
  --accent-lt: rgba(76, 122, 67, 0.12);
  --accent-md: rgba(76, 122, 67, 0.25);
}

html[data-skin='nature'][data-dark='true'] {
  --base: #10180f;
  --surface: #182217;
  --surface2: #22301f;
  --surface3: #2e3f29;
  --ink: #edf4e8;
  --ink2: rgba(237, 244, 232, 0.74);
  --ink3: rgba(237, 244, 232, 0.48);
  --accent: #8ac67a;
  --accent-lt: rgba(138, 198, 122, 0.17);
  --accent-md: rgba(138, 198, 122, 0.32);
}

html[data-skin='ocean'] {
  --base: #eef5f8;
  --surface: #ffffff;
  --surface2: #e1edf3;
  --surface3: #d2e3ec;
  --ink: #111c24;
  --ink2: rgba(17, 28, 36, 0.7);
  --ink3: rgba(17, 28, 36, 0.46);
  --accent: #2e6f9e;
  --accent-lt: rgba(46, 111, 158, 0.12);
  --accent-md: rgba(46, 111, 158, 0.25);
}

html[data-skin='ocean'][data-dark='true'] {
  --base: #0e1419;
  --surface: #16212a;
  --surface2: #1d2b36;
  --surface3: #263947;
  --ink: #edf6fb;
  --ink2: rgba(237, 246, 251, 0.74);
  --ink3: rgba(237, 246, 251, 0.48);
  --accent: #79b9e8;
  --accent-lt: rgba(121, 185, 232, 0.17);
  --accent-md: rgba(121, 185, 232, 0.32);
}

html[data-skin='sunset'] {
  --base: #fbf0e8;
  --surface: #ffffff;
  --surface2: #f5e3d7;
  --surface3: #eccfbe;
  --ink: #241611;
  --ink2: rgba(36, 22, 17, 0.7);
  --ink3: rgba(36, 22, 17, 0.46);
  --accent: #b75f35;
  --accent-lt: rgba(183, 95, 53, 0.13);
  --accent-md: rgba(183, 95, 53, 0.26);
}

html[data-skin='sunset'][data-dark='true'] {
  --base: #1b1110;
  --surface: #261816;
  --surface2: #34211c;
  --surface3: #432c25;
  --ink: #f8ede6;
  --ink2: rgba(248, 237, 230, 0.74);
  --ink3: rgba(248, 237, 230, 0.48);
  --accent: #ef9a68;
  --accent-lt: rgba(239, 154, 104, 0.17);
  --accent-md: rgba(239, 154, 104, 0.32);
}

html[data-skin='monochrome'] {
  --base: #f7f7f7;
  --surface: #ffffff;
  --surface2: #ededed;
  --surface3: #dedede;
  --ink: #111111;
  --ink2: rgba(17, 17, 17, 0.7);
  --ink3: rgba(17, 17, 17, 0.45);
  --accent: #111111;
  --accent-lt: rgba(17, 17, 17, 0.1);
  --accent-md: rgba(17, 17, 17, 0.22);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

html[data-skin='monochrome'][data-dark='true'] {
  --base: #050505;
  --surface: #141414;
  --surface2: #222222;
  --surface3: #303030;
  --ink: #f7f7f7;
  --ink2: rgba(247, 247, 247, 0.72);
  --ink3: rgba(247, 247, 247, 0.46);
  --accent: #f7f7f7;
  --accent-lt: rgba(247, 247, 247, 0.12);
  --accent-md: rgba(247, 247, 247, 0.24);
}

html[data-skin='monochrome'] .card,
html[data-skin='monochrome'] .panel,
html[data-skin='monochrome'] .topbar,
html[data-skin='monochrome'] .sidebar,
html[data-skin='monochrome'] .more-drawer-sheet {
  box-shadow: none !important;
}

.skin-preview-dark { background: #191919; }
.skin-preview-dark i { background: rgba(255,255,255,0.2); }
.skin-preview-nature { background: #e7efe0; }
.skin-preview-nature i:first-child { background: rgba(76, 122, 67, 0.22); }
.skin-preview-ocean { background: #e1edf3; }
.skin-preview-ocean i:first-child { background: rgba(46, 111, 158, 0.22); }
.skin-preview-sunset { background: #f5e3d7; }
.skin-preview-sunset i:first-child { background: rgba(183, 95, 53, 0.22); }
.skin-preview-monochrome { background: #efefef; }
.skin-preview-monochrome i:first-child { background: #111; }

/* ==============================================================
   RC3 — Calm premium system polish
   Purpose: one calmer, denser visual language across production modules.
   ============================================================== */
:root {
  --rc3-page-pad: clamp(18px, 2.4vw, 30px);
  --rc3-card-pad: clamp(14px, 1.7vw, 22px);
  --rc3-gap: 14px;
  --rc3-hairline: 1px solid var(--line);
  --rc3-soft-bg: color-mix(in srgb, var(--surface) 78%, var(--base) 22%);
}

.main {
  background:
    radial-gradient(circle at top left, var(--accent-lt), transparent 26rem),
    var(--base);
}

.page-wrap.module-page {
  max-width: 1480px;
  padding: var(--rc3-page-pad);
  gap: var(--rc3-gap);
}

.module-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 0;
}

.module-header-main { min-width: 0; }
.module-header .eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.module-header .page-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 2.2vw, 38px);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.module-header .page-sub {
  margin: 7px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.45;
}

.module-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.card,
.section-card,
.module-action-bar,
.module-filter-bar {
  border: var(--rc3-hairline);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.btn,
button.btn,
.module-header-actions .btn,
.planner-calendar-more,
.sport-tab-chip,
.planner-tab-chip,
.planner-filter-chip {
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  box-shadow: none;
  font-weight: 650;
}

.btn-primary,
button.btn-primary,
.module-header-actions .btn-primary {
  border-color: color-mix(in srgb, var(--accent) 70%, black 10%);
  background: var(--accent);
  color: var(--accent-contrast);
}

.sidebar {
  background: color-mix(in srgb, var(--surface) 86%, var(--base) 14%);
  border-right: 1px solid var(--line);
}

.nav-item,
.more-item,
.bn-tab {
  border-radius: 11px;
}

.nav-item.is-active,
.nav-item.active {
  background: var(--accent-lt);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-md);
}

.nav-icon,
.more-item-icon,
.bn-icon {
  filter: saturate(.7);
  opacity: .9;
}

html[data-icon-style='mono'] .nav-icon,
html[data-icon-style='mono'] .more-item-icon,
html[data-icon-style='mono'] .bn-icon,
html[data-icon-style='line'] .nav-icon,
html[data-icon-style='line'] .more-item-icon,
html[data-icon-style='line'] .bn-icon {
  filter: grayscale(1) saturate(0);
  color: var(--accent);
  opacity: .82;
}

/* Planner RC3 */
.planner-page .module-page-content,
.sport-page .module-page-content,
.dashboard-rc-page .module-page-content {
  margin-top: 0;
}

.planner-v2-toolbar,
.sport-tab-bar {
  padding: 8px;
  margin-bottom: 14px;
}

.planner-tab-row,
.sport-tab-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.planner-tab-group,
.sport-tab-group {
  background: transparent;
}

.planner-tab-chip,
.sport-tab-chip {
  height: 34px;
  padding: 0 14px;
  background: transparent;
  color: var(--ink2);
}

.planner-tab-chip.is-active,
.sport-tab-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.planner-layout-rich.is-v2-shell {
  display: block;
}

.planner-main-stack {
  gap: 14px;
}

.planner-calendar {
  padding: 16px;
  overflow: hidden;
}

.planner-calendar-title-row {
  margin-bottom: 12px;
  align-items: center;
  gap: 16px;
}

.planner-calendar-title-row p {
  display: none;
}

.planner-calendar-legend {
  gap: 7px;
  flex-wrap: wrap;
}

.planner-trash-zone {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: transparent;
}

.planner-pill {
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
}

.planner-calendar-viewport {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, var(--base) 12%);
}

.planner-calendar-strip {
  gap: 0;
}

.planner-calendar-day {
  width: 118px;
  min-width: 118px;
  height: 430px;
  border-right: 1px solid var(--line2);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.planner-calendar-day.is-today {
  background: color-mix(in srgb, var(--accent-lt) 58%, transparent);
  outline: 1px solid var(--accent-md);
  outline-offset: -1px;
}

.planner-calendar-day-head {
  min-height: 64px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--line2);
}

.planner-calendar-day-head span:first-child {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}

.planner-calendar-day-head strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.planner-calendar-day-head span:nth-child(3) {
  color: var(--ink3);
  font-size: 10px;
}

.planner-day-add {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  opacity: 0;
}

.planner-calendar-day:hover .planner-day-add { opacity: 1; }

.planner-calendar-day-body {
  padding: 8px;
  gap: 6px;
}

.planner-calendar-empty {
  min-height: 0;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--ink3);
  font-size: 12px;
}

.planner-calendar-task {
  padding: 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
}

.planner-calendar-task strong {
  font-size: 12px;
  line-height: 1.25;
}

.planner-calendar-task span {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.25;
}

.planner-pinned,
.planner-workflows,
.planner-board {
  padding: 16px;
}

/* Sport RC3 */
.sport-page .module-action-bar {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.sport-layout {
  grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.sport-sidebar,
.sport-tab-panel {
  padding: 14px;
  border-radius: 16px;
}

.sport-sidebar-label {
  margin-bottom: 8px;
  color: var(--ink3);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
}

.sport-disc-item {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
}

.sport-disc-item.is-active {
  background: var(--accent-lt);
  box-shadow: inset 0 0 0 1px var(--accent-md);
}

.sport-stats-row {
  gap: 8px;
  margin: 0 0 12px;
}

.sport-stat-chip {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: none;
}

.sport-stat-val { font-size: 20px; }
.sport-stat-lbl { color: var(--ink3); font-size: 12px; }

.sport-panel-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line2);
}

.sport-gear-grid,
.sport-route-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}

.sport-gear-card,
.sport-route-card,
.sport-activity-row,
.sport-service-row {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--base) 8%);
  box-shadow: none;
}

.sport-gear-card {
  padding: 12px;
}

.sport-health-bar-track {
  height: 7px;
  background: var(--surface2);
}

/* Dashboard RC3 */
.dashboard-rc {
  display: grid;
  gap: 14px;
}

.dashboard-rc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .9fr) 96px;
  gap: 14px;
  align-items: stretch;
  padding: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-lt) 60%, transparent), transparent 55%),
    var(--surface);
}

.dashboard-rc-hero h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 2vw, 34px);
  letter-spacing: -.04em;
}

.dashboard-rc-hero span,
.dashboard-rc-hero small,
.dashboard-rc-hero em {
  color: var(--ink2);
  font-style: normal;
}

.dashboard-rc-focus {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.dashboard-rc-focus small {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.dashboard-rc-focus button,
.dashboard-rc-alert-list button,
.dashboard-rc-timeline button,
.dashboard-rc-actions button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--base) 8%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.dashboard-rc-focus button {
  padding: 11px;
}

.dashboard-rc-focus strong,
.dashboard-rc-alert-list strong,
.dashboard-rc-timeline strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.dashboard-rc-signal {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.dashboard-rc-signal.has-alerts {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warning) 25%, var(--line));
}

.dashboard-rc-signal strong {
  font-size: 30px;
  line-height: 1;
}

.dashboard-rc-signal span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.dashboard-rc-command,
.dashboard-rc-week,
.dashboard-rc-alerts,
.dashboard-rc-actions {
  padding: 14px;
}

.dashboard-rc-command header,
.dashboard-rc-week header,
.dashboard-rc-alerts header,
.dashboard-rc-actions header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.dashboard-rc-command h2,
.dashboard-rc-week h2,
.dashboard-rc-alerts h2,
.dashboard-rc-actions h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -.02em;
}

.dashboard-rc-week p,
.dashboard-rc-alerts p {
  margin: 3px 0 0;
  color: var(--ink3);
  font-size: 12px;
}

.dashboard-rc-week header button {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink2);
  min-height: 32px;
  padding: 0 10px;
}

.dashboard-rc-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-rc-metrics button {
  min-height: 66px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, var(--base) 10%);
  text-align: left;
}

.dashboard-rc-metrics strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.dashboard-rc-metrics span {
  display: block;
  margin-top: 6px;
  color: var(--ink2);
  font-size: 12px;
}

.dashboard-rc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 14px;
  align-items: start;
}

.dashboard-rc-side {
  display: grid;
  gap: 14px;
}

.dashboard-rc-day-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.dashboard-rc-day-strip button {
  min-height: 80px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--base) 8%);
  text-align: left;
}

.dashboard-rc-day-strip button.is-today {
  background: var(--accent-lt);
  border-color: var(--accent-md);
}

.dashboard-rc-day-strip span,
.dashboard-rc-day-strip em {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  font-style: normal;
}

.dashboard-rc-day-strip strong {
  display: block;
  margin: 5px 0;
  font-size: 22px;
}

.dashboard-rc-timeline,
.dashboard-rc-alert-list,
.dashboard-rc-actions {
  display: grid;
  gap: 8px;
}

.dashboard-rc-timeline button,
.dashboard-rc-alert-list button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 9px 10px;
}

.dashboard-rc-timeline span,
.dashboard-rc-alert-list span {
  color: var(--accent);
}

.dashboard-rc-timeline em,
.dashboard-rc-alert-list em {
  color: var(--ink3);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.dashboard-rc-alert-list button.is-danger {
  background: var(--danger-bg);
  border-color: color-mix(in srgb, var(--danger) 26%, var(--line));
}

.dashboard-rc-alert-list button.is-warning {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warning) 26%, var(--line));
}

.dashboard-rc-actions button {
  min-height: 38px;
  padding: 0 12px;
  text-align: center;
}

@media (max-width: 1180px) {
  .dashboard-rc-hero,
  .dashboard-rc-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-rc-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .page-wrap.module-page { padding: 16px; }
  .module-header { align-items: flex-start; flex-direction: column; }
  .module-header-actions { width: 100%; justify-content: stretch; }
  .module-header-actions .btn { width: 100%; }
  .planner-calendar-day { width: 106px; min-width: 106px; height: 390px; }
  .sport-layout { grid-template-columns: 1fr; }
  .sport-gear-grid, .sport-route-grid { grid-template-columns: 1fr; }
  .dashboard-rc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-rc-day-strip { overflow-x: auto; grid-template-columns: repeat(7, 96px); padding-bottom: 2px; }
  .dashboard-rc-timeline button,
  .dashboard-rc-alert-list button { grid-template-columns: 24px minmax(0, 1fr); }
  .dashboard-rc-timeline em,
  .dashboard-rc-alert-list em { grid-column: 2; }
}

/* ==============================================================
   RC3.1 — Sport compact professional layout
   ============================================================== */
.sport-page .sport-module-header {
  align-items: flex-end;
  margin-bottom: 10px;
}

.sport-page .sport-module-header .page-title {
  font-size: clamp(26px, 2vw, 34px);
}

.sport-page .sport-module-header .page-sub {
  margin-top: 5px;
  max-width: 620px;
}

.sport-page .module-action-bar {
  margin-bottom: 12px;
}

.sport-tab-bar {
  width: auto;
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin: 0 0 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sport-tab-group {
  display: inline-flex;
  justify-content: flex-start;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 86%, var(--base) 14%);
}

.sport-tab-chip {
  height: 30px;
  min-height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink2);
  font-size: 12px;
}

.sport-tab-chip.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

.sport-layout-compact {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(480px, 1fr) minmax(230px, 280px);
  gap: 12px;
  align-items: start;
}

.sport-layout-compact .sport-sidebar,
.sport-layout-compact .sport-tab-panel,
.sport-rail-card {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--base) 8%);
  box-shadow: var(--shadow-xs);
}

.sport-layout-compact .sport-sidebar {
  top: 64px;
  padding: 12px;
  gap: 14px;
}

.sport-layout-compact .sport-main {
  gap: 10px;
}

.sport-layout-compact .sport-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.sport-layout-compact .sport-stat-chip {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 12px;
}

.sport-layout-compact .sport-stat-val {
  font-size: 19px;
  letter-spacing: -0.03em;
}

.sport-layout-compact .sport-tab-panel {
  padding: 14px;
  min-height: 0;
}

.sport-layout-compact .sport-panel-head {
  margin-bottom: 10px;
  padding-bottom: 9px;
}

.sport-layout-compact .sport-panel-head .planner-section-title {
  font-size: 16px;
  letter-spacing: -0.02em;
}

.sport-layout-compact .sport-gear-grid,
.sport-layout-compact .sport-route-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
}

.sport-layout-compact .sport-gear-card {
  padding: 12px;
  gap: 8px;
}

.sport-layout-compact .sport-gear-icon,
.sport-layout-compact .sport-disc-icon,
.sport-layout-compact .sport-disc-icon-sm {
  filter: saturate(.72);
}

html[data-icons='mono'] .sport-gear-icon,
html[data-icons='mono'] .sport-disc-icon,
html[data-icons='mono'] .sport-disc-icon-sm,
html[data-icons='line'] .sport-gear-icon,
html[data-icons='line'] .sport-disc-icon,
html[data-icons='line'] .sport-disc-icon-sm {
  filter: grayscale(1) saturate(0);
  opacity: .78;
}

.sport-layout-compact .sport-gear-name,
.sport-layout-compact .sport-activity-name,
.sport-layout-compact .sport-route-name {
  font-size: 13px;
}

.sport-layout-compact .sport-gear-meta,
.sport-layout-compact .sport-gear-km,
.sport-layout-compact .sport-activity-meta,
.sport-layout-compact .sport-service-meta {
  font-size: 11px;
}

.sport-layout-compact .sport-wishlist-section {
  margin-top: 12px;
  padding-top: 12px;
}

.sport-rail {
  display: grid;
  gap: 10px;
  min-width: 0;
  position: sticky;
  top: 64px;
}

.sport-rail-card {
  padding: 12px;
}

.sport-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.sport-rail-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .02em;
}

.sport-rail-list,
.sport-quick-actions,
.sport-integration-list {
  display: grid;
  gap: 6px;
}

.sport-rail-row,
.sport-quick-actions button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.sport-rail-row:hover,
.sport-quick-actions button:hover {
  border-color: var(--accent-md);
  background: var(--accent-lt);
}

.sport-rail-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--surface2);
  font-size: 14px;
}

.sport-rail-copy {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.sport-rail-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.sport-rail-copy small,
.sport-rail-empty,
.sport-integration-row em {
  color: var(--ink3);
  font-size: 11px;
  font-style: normal;
}

.sport-rail-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 10px;
  font-weight: 750;
}

.sport-rail-badge.is-warning {
  color: var(--warning);
  background: var(--warn-bg);
}

.sport-quick-actions button span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--accent);
}

.sport-integration-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line2);
}

.sport-integration-row:last-child { border-bottom: 0; }

.sport-integration-row > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--accent-lt);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.sport-integration-row strong {
  font-size: 12px;
  color: var(--ink);
}

@media (max-width: 1180px) {
  .sport-layout-compact {
    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  }

  .sport-rail {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }
}

@media (max-width: 760px) {
  .sport-page .sport-module-header {
    align-items: flex-start;
  }

  .sport-layout-compact {
    grid-template-columns: 1fr;
  }

  .sport-layout-compact .sport-sidebar,
  .sport-rail {
    position: static;
  }

  .sport-rail,
  .sport-layout-compact .sport-stats-row,
  .sport-layout-compact .sport-gear-grid,
  .sport-layout-compact .sport-route-grid {
    grid-template-columns: 1fr;
  }

  .sport-tab-bar,
  .sport-tab-group {
    width: 100%;
  }

  .sport-tab-group {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .sport-tab-chip {
    flex: 0 0 auto;
  }
}


/* ==========================================================================
   RC4 Warm OS Sport Template
   Sport is the first reference module for the next visual system.
   ========================================================================== */

.sport-warm-template {
  --sport-warm-bg: var(--bg);
  --sport-warm-surface: color-mix(in srgb, var(--surface) 88%, transparent);
  --sport-warm-surface-solid: var(--surface);
  --sport-warm-line: var(--line);
  --sport-warm-line-strong: color-mix(in srgb, var(--ink) 18%, transparent);
  --sport-warm-ink: var(--ink);
  --sport-warm-muted: var(--ink2);
  --sport-warm-soft: var(--accent-lt);
  --sport-warm-accent: var(--accent);
  --sport-warm-accent-2: color-mix(in srgb, var(--accent) 72%, var(--ink) 28%);
  --sport-warm-radius: 18px;
  --sport-warm-shadow: var(--shadow-lg);
  --sport-warm-shadow-sm: var(--shadow-sm);

  max-width: 1440px;
  margin: 0 auto;
}

html[data-dark='true'] .sport-warm-template {
  --sport-warm-bg: var(--bg);
  --sport-warm-surface: color-mix(in srgb, var(--surface) 86%, transparent);
  --sport-warm-surface-solid: var(--surface);
  --sport-warm-line: var(--line);
  --sport-warm-line-strong: color-mix(in srgb, var(--ink) 17%, transparent);
  --sport-warm-ink: var(--ink);
  --sport-warm-muted: var(--ink2);
  --sport-warm-soft: var(--accent-lt);
  --sport-warm-shadow: var(--shadow-lg);
  --sport-warm-shadow-sm: var(--shadow-sm);
}

.pet-mini-stat small {
  display: block;
  min-height: 2.7em;
  margin-top: 7px;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}

.pet-card-link {
  appearance: none;
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}

.pets-overview-grid,
.pets-vet-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pets-vet-contact-grid .pet-vet-clinic-section {
  grid-column: 1 / -1;
}

.pet-vet-clinic-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.pet-vet-clinic-icon,
.pet-contact-avatar {
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.pet-vet-clinic-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
}

.pet-vet-clinic-main {
  min-width: 0;
}

.pet-vet-clinic-main > span,
.pet-contact-main span {
  display: block;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 800;
}

.pet-vet-clinic-main strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.pet-vet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
  color: var(--ink2);
  font-size: 13px;
}

.pet-contact-card-grid {
  display: grid;
  gap: 10px;
}

.pet-contact-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.pet-contact-avatar {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-weight: 900;
}

.pet-contact-main {
  min-width: 0;
}

.pet-contact-main strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.pet-contact-main small,
.pet-contact-main em {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink2);
  font-size: 12px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-contact-actions,
.pet-vet-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.pet-contact-empty {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.pet-contact-empty strong {
  color: var(--ink);
  font-size: 15px;
}

.pet-contact-empty p {
  margin: 0;
  color: var(--ink2);
  font-size: 14px;
}

.pet-sharing-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.pet-sharing-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface2);
}

.pet-sharing-status.is-enabled {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--accent-lt);
}

.pet-sharing-status strong {
  color: var(--ink);
}

.pet-sharing-status span {
  color: var(--ink2);
  overflow-wrap: anywhere;
}

.sport-warm-template.module-page {
  padding-top: 26px;
  color: var(--sport-warm-ink);
}

.sport-warm-template::before {
  content: "";
  position: fixed;
  inset: var(--topbar-h, 52px) 0 0 var(--sidebar-w, 248px);
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 74% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 34%),
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 38%),
    linear-gradient(180deg, var(--surface) 0%, var(--base) 70%);
}

html[data-dark='true'] .sport-warm-template::before {
  background:
    radial-gradient(circle at 74% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 14% 8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 38%),
    linear-gradient(180deg, var(--surface2) 0%, var(--base) 70%);
}

.sport-warm-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
  min-height: clamp(210px, 23vw, 300px);
  padding: clamp(22px, 3.5vw, 42px);
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 34px;
  color: var(--accent-contrast);
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.30), transparent 24%),
    radial-gradient(circle at 70% 20%, rgba(255,225,180,.28), transparent 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 68%, #fff 32%) 0%, var(--accent) 48%, color-mix(in srgb, var(--accent) 56%, #111 44%) 100%);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 15%, transparent);
}

.sport-warm-heading {
  padding: 0;
}

.sport-warm-heading .eyebrow {
  margin: 0 0 8px;
  color: rgba(255,250,244,.88);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.sport-warm-heading .page-title {
  margin: 0;
  color: var(--accent-contrast);
  font-size: clamp(44px, 5vw, 72px);
  line-height: 0.92;
  letter-spacing: 0;
}

.sport-warm-heading .page-sub {
  max-width: 620px;
  margin: 14px 0 0;
  color: rgba(255,255,255,.88);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 750;
}

.sport-hero-card {
  --sport-hero-image: url("../assets/sport-hero-warm.svg");
  position: relative;
  min-height: 174px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 24px;
  background-image:
    linear-gradient(90deg, rgba(42, 24, 12, 0.08), rgba(15, 13, 10, 0.52)),
    var(--sport-hero-image);
  background-size: cover;
  background-position: center;
  box-shadow: 0 22px 50px color-mix(in srgb, var(--ink) 20%, transparent);
  isolation: isolate;
}

.sport-hero-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(0deg, rgba(0,0,0,.38), transparent);
  z-index: 0;
}

.sport-hero-shine {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 226, 171, 0.32), transparent 28%),
    linear-gradient(105deg, rgba(255,255,255,0.10), transparent 34%);
  mix-blend-mode: screen;
}

.sport-hero-copy {
  position: absolute;
  left: 24px;
  bottom: 22px;
  display: grid;
  gap: 3px;
  color: var(--accent-contrast);
  z-index: 2;
  text-shadow: 0 1px 12px rgba(0,0,0,0.34);
}

.sport-hero-copy span {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
}

.sport-hero-copy strong {
  font-size: 17px;
  letter-spacing: -0.02em;
}

.sport-hero-actions {
  position: absolute;
  right: 16px;
  top: 16px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.sport-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 999px;
  color: var(--accent-contrast);
  background: rgba(20, 13, 7, 0.32);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}

.sport-hero-btn:hover {
  transform: translateY(-1px);
  background: rgba(20, 13, 7, 0.44);
}

.sport-hero-btn.is-ghost {
  opacity: .82;
}

.sport-warm-main-action {
  position: absolute;
  right: 22px;
  bottom: 38px;
  z-index: 4;
  min-height: 46px;
  padding-inline: 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 82%, #111 18%));
  border: 0;
  color: var(--accent-contrast);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--accent) 26%, transparent);
}

.sport-warm-template .module-action-bar {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  position: relative;
  z-index: 5;
}

.sport-warm-template .sport-tab-bar {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.sport-warm-template .sport-tab-group {
  display: inline-flex;
  gap: 3px;
  min-height: 48px;
  padding: 5px;
  border: 1px solid var(--sport-warm-line);
  border-radius: 17px;
  background: var(--warm-glass);
  box-shadow: var(--sport-warm-shadow-sm);
  backdrop-filter: blur(14px);
}

.sport-warm-template .sport-tab-chip {
  min-width: 96px;
  border: 0;
  background: transparent;
  color: var(--sport-warm-ink);
  border-radius: 13px;
  font-size: 13px;
  font-weight: 700;
}

.sport-warm-template .sport-tab-chip.is-active {
  color: var(--sport-warm-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  box-shadow: inset 0 -2px 0 var(--sport-warm-accent);
}

.sport-warm-layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}

.sport-warm-template .card,
.sport-warm-template .sport-sidebar,
.sport-warm-template .sport-tab-panel,
.sport-warm-template .sport-rail-card {
  border: 1px solid var(--sport-warm-line);
  border-radius: var(--sport-warm-radius);
  background: var(--sport-warm-surface);
  box-shadow: var(--sport-warm-shadow-sm);
  backdrop-filter: blur(14px);
}

.sport-warm-template .sport-sidebar {
  padding: 15px;
  position: sticky;
  top: calc(var(--topbar-h, 52px) + 16px);
}

.sport-warm-template .sport-sidebar-label {
  color: var(--sport-warm-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}

.sport-warm-template .sport-disc-item {
  min-height: 43px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sport-warm-ink);
}

.sport-warm-template .sport-disc-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 15%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent) 5%, transparent));
  color: var(--sport-warm-accent);
  box-shadow: inset 2px 0 0 var(--sport-warm-accent);
}

.sport-warm-template .sport-disc-icon,
.sport-warm-template .sport-rail-icon,
.sport-warm-template .sport-disc-icon-sm {
  filter: saturate(0.7);
}

html[data-icons='mono'] .sport-warm-template .sport-disc-icon,
html[data-icons='line'] .sport-warm-template .sport-disc-icon {
  color: var(--sport-warm-accent);
}

.sport-warm-template .sport-disc-count {
  background: rgba(25, 20, 16, 0.06);
  color: var(--sport-warm-accent);
}

.sport-warm-template .sport-sidebar-add {
  color: var(--sport-warm-accent);
  font-weight: 700;
}

.sport-warm-template .sport-sharing-row {
  min-height: 29px;
  color: var(--sport-warm-muted);
}

.sport-warm-template input[type='checkbox'] {
  accent-color: var(--sport-warm-ink);
}

.sport-warm-template .sport-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

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

.sport-warm-template .sport-stat-chip {
  min-height: 96px;
  display: grid;
  gap: 8px;
  align-content: center;
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border: 1px solid var(--sport-warm-line);
  border-radius: 16px;
  background: var(--sport-warm-surface);
  box-shadow: var(--sport-warm-shadow-sm);
}

.sport-warm-template .sport-stat-kicker {
  color: var(--sport-warm-muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sport-warm-template .sport-stat-main {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.sport-warm-template .sport-stat-val {
  color: var(--sport-warm-ink);
  font-size: 30px;
  font-weight: 780;
  letter-spacing: -0.06em;
}

.sport-warm-template .sport-stat-lbl {
  color: var(--sport-warm-muted);
  font-size: 13px;
  font-weight: 560;
}

.sport-stat-spark {
  position: absolute;
  right: 18px;
  bottom: 20px;
  width: 70px;
  height: 28px;
  opacity: .76;
}

.sport-stat-spark.is-wave {
  background:
    radial-gradient(ellipse at 18% 52%, transparent 35%, var(--sport-warm-accent) 37%, var(--sport-warm-accent) 42%, transparent 44%),
    radial-gradient(ellipse at 48% 42%, transparent 35%, var(--sport-warm-accent) 37%, var(--sport-warm-accent) 42%, transparent 44%),
    radial-gradient(ellipse at 78% 50%, transparent 35%, var(--sport-warm-accent) 37%, var(--sport-warm-accent) 42%, transparent 44%);
}

.sport-stat-spark.is-bars {
  background:
    linear-gradient(to top, color-mix(in srgb, var(--accent) 25%, transparent) 25%, transparent 25%) 8px bottom / 8px 100% no-repeat,
    linear-gradient(to top, color-mix(in srgb, var(--accent) 55%, transparent) 48%, transparent 48%) 28px bottom / 8px 100% no-repeat,
    linear-gradient(to top, color-mix(in srgb, var(--accent) 85%, transparent) 75%, transparent 75%) 48px bottom / 8px 100% no-repeat;
}

.sport-stat-spark.is-bike::after {
  content: "⌘";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--sport-warm-accent);
  font-size: 24px;
  opacity: .75;
}

.sport-warm-template .sport-panel-head {
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--sport-warm-line);
}

.sport-warm-template .sport-panel-head .planner-section-title {
  font-size: 16px;
  letter-spacing: -0.03em;
}

.sport-warm-template .sport-tab-panel {
  padding: 16px;
}

.sport-warm-template .sport-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

.sport-warm-template .sport-route-card {
  position: relative;
  min-height: 214px;
  overflow: hidden;
  padding: 0;
  border-radius: 17px;
  background: var(--surface2);
  box-shadow: 0 14px 36px rgba(36, 23, 14, 0.18);
}

.sport-warm-template .sport-route-map {
  position: absolute;
  inset: 0;
  height: auto;
  border-radius: inherit;
  overflow: hidden;
}

.sport-warm-template .sport-route-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0.74) 100%),
    radial-gradient(circle at 80% 12%, rgba(255,255,255,.22), transparent 24%);
  pointer-events: none;
}

.sport-warm-template .sport-map-placeholder {
  height: 100%;
  min-height: 214px;
  color: transparent;
  border: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, transparent), rgba(0,0,0,.05)),
    radial-gradient(circle at 68% 18%, color-mix(in srgb, var(--surface) 55%, transparent), transparent 12%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 44%, var(--surface)) 0%, color-mix(in srgb, var(--positive) 42%, var(--surface2)) 42%, color-mix(in srgb, var(--positive) 36%, var(--ink)) 62%, color-mix(in srgb, var(--ink) 92%, #000) 100%);
  background-size: cover;
}

.sport-warm-template .sport-route-card[data-route-index="1"] .sport-map-placeholder {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--positive) 12%, transparent), rgba(0,0,0,.05)),
    radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--surface) 42%, transparent), transparent 12%),
    linear-gradient(150deg, color-mix(in srgb, var(--positive) 34%, var(--surface)) 0%, color-mix(in srgb, var(--positive) 48%, var(--surface2)) 34%, color-mix(in srgb, var(--positive) 44%, var(--ink)) 62%, color-mix(in srgb, var(--ink) 92%, #000) 100%);
}

.sport-warm-template .sport-route-card[data-route-index="2"] .sport-map-placeholder {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--positive) 18%, transparent), rgba(0,0,0,.06)),
    radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--surface) 38%, transparent), transparent 11%),
    linear-gradient(150deg, color-mix(in srgb, var(--positive) 22%, var(--surface)) 0%, color-mix(in srgb, var(--positive) 38%, var(--surface2)) 34%, color-mix(in srgb, var(--positive) 42%, var(--ink)) 62%, color-mix(in srgb, var(--ink) 90%, #000) 100%);
}

.sport-warm-template .sport-route-card[data-route-index="3"] .sport-map-placeholder {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), rgba(0,0,0,.05)),
    radial-gradient(circle at 58% 16%, color-mix(in srgb, var(--surface) 45%, transparent), transparent 12%),
    linear-gradient(150deg, color-mix(in srgb, var(--accent) 32%, var(--surface)) 0%, color-mix(in srgb, var(--positive) 40%, var(--surface2)) 38%, color-mix(in srgb, var(--positive) 42%, var(--ink)) 66%, color-mix(in srgb, var(--ink) 92%, #000) 100%);
}

.sport-warm-template .sport-map-ph-label,
.sport-warm-template .sport-map-ph-icon,
.sport-warm-template .sport-map-ph-hint {
  display: none;
}

.sport-warm-template .sport-fav-btn {
  z-index: 3;
  right: 12px;
  top: 12px;
  color: var(--accent-contrast);
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.42);
  backdrop-filter: blur(10px);
}

.sport-warm-template .sport-fav-btn.is-fav {
  color: var(--accent-contrast);
  background: var(--sport-warm-accent);
  border-color: var(--sport-warm-accent);
}

.sport-warm-template .sport-route-body {
  position: relative;
  z-index: 2;
  min-height: 214px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  color: var(--accent-contrast);
}

.sport-warm-template .sport-route-name {
  color: var(--accent-contrast);
  font-size: 17px;
  font-weight: 820;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
}

.sport-warm-template .sport-route-tags {
  margin-top: 8px;
}

.sport-warm-template .sport-tag {
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

.sport-warm-template .sport-route-actions {
  margin-top: 14px;
}

.sport-warm-template .sport-route-actions .btn {
  min-height: 37px;
  border-radius: 10px;
  color: var(--sport-warm-ink);
  background: var(--warm-glass);
  border: 1px solid rgba(255,255,255,.44);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}

.sport-warm-template .sport-route-actions .sport-route-link {
  color: var(--accent-contrast);
  background: var(--sport-warm-accent);
  border-color: var(--sport-warm-accent);
}

.sport-warm-template .sport-rail {
  display: grid;
  gap: 12px;
  position: sticky;
  top: calc(var(--topbar-h, 52px) + 16px);
}

.sport-warm-template .sport-rail-card {
  padding: 14px;
}

.sport-warm-template .sport-rail-head h3 {
  margin: 0 0 12px;
  color: var(--sport-warm-ink);
  font-size: 13px;
  font-weight: 840;
  letter-spacing: -0.01em;
}

.sport-warm-template .sport-rail-row,
.sport-warm-template .sport-quick-actions button,
.sport-warm-template .sport-integration-row {
  min-height: 46px;
  border-radius: 13px;
  border: 1px solid var(--sport-warm-line);
  background: var(--warm-glass);
  color: var(--sport-warm-ink);
}

.sport-warm-template .sport-rail-row:hover,
.sport-warm-template .sport-quick-actions button:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  background: var(--sport-warm-soft);
}

.sport-warm-template .sport-rail-badge {
  color: var(--sport-warm-accent);
  background: var(--sport-warm-soft);
}

.sport-warm-template .sport-quick-actions button span {
  color: var(--sport-warm-accent);
}

.sport-warm-template .sport-integration-row span {
  color: var(--sport-warm-accent);
  background: var(--sport-warm-soft);
}

.sport-warm-template .btn-primary {
  background: var(--sport-warm-accent);
  border-color: var(--sport-warm-accent);
}

@media (max-width: 1240px) {
  .sport-warm-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .sport-warm-template .sport-rail {
    grid-column: 1 / -1;
    position: static;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 900px) {
  .sport-warm-header {
    grid-template-columns: 1fr;
  }

  .sport-hero-card {
    min-height: 160px;
  }

  .sport-warm-main-action {
    position: static;
    justify-self: stretch;
    margin-top: -6px;
  }

  .sport-warm-template .module-action-bar {
    margin: 0 0 14px;
  }

  .sport-warm-layout,
  .sport-warm-template .sport-rail {
    grid-template-columns: 1fr;
  }

  .sport-warm-template .sport-sidebar,
  .sport-warm-template .sport-rail {
    position: static;
  }

  .sport-warm-template .sport-stats-row {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .sport-warm-template .sport-route-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .sport-warm-heading .page-title {
    font-size: 44px;
  }

  .sport-warm-template .sport-tab-group {
    width: 100%;
    overflow-x: auto;
  }

  .sport-warm-template .sport-tab-chip {
    min-width: 84px;
  }

  .sport-warm-template .sport-stats-row {
    grid-template-columns: 1fr;
  }

  .sport-hero-actions {
    left: 12px;
    right: 12px;
    justify-content: flex-end;
  }
}

/* ==========================================================================
   RC4.1 Warm OS Sport Polish
   Softer photo-like hero/cards + stronger responsive behavior.
   ========================================================================== */

.sport-warm-template {
  max-width: 1480px;
  overflow-x: clip;
}

.sport-warm-template.module-page {
  padding-top: 22px;
}

.sport-warm-header {
  grid-template-columns: minmax(220px, 0.36fr) minmax(520px, 1fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 14px;
}

.sport-warm-heading {
  padding: 10px 0 12px;
}

.sport-warm-heading .eyebrow {
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 10px;
  letter-spacing: .14em;
}

.sport-warm-heading .page-title {
  font-size: clamp(42px, 4.2vw, 62px);
  line-height: .96;
  letter-spacing: -0.055em;
  font-weight: 780;
}

.sport-warm-heading .page-sub {
  max-width: 330px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.46;
}

.sport-hero-card {
  min-height: 196px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .52);
  background-image:
    linear-gradient(90deg, rgba(55, 31, 16, .04), rgba(20, 18, 13, .54)),
    var(--sport-hero-image);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--ink) 15%, transparent), 0 1px 0 rgba(255,255,255,.72) inset;
}

.sport-hero-card::after {
  height: 58%;
  background: linear-gradient(0deg, rgba(0,0,0,.50), rgba(0,0,0,.03) 82%, transparent);
}

.sport-hero-copy {
  left: 26px;
  bottom: 23px;
}

.sport-hero-copy strong {
  font-size: 18px;
}

.sport-warm-main-action {
  right: 28px;
  bottom: 50px;
  min-height: 44px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 84%, var(--ink) 16%));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}

.sport-warm-template .module-action-bar {
  margin: -26px 0 18px;
}

.sport-warm-template .sport-tab-group {
  min-height: 46px;
  border-radius: 16px;
}

.sport-warm-template .sport-tab-chip {
  min-width: 102px;
}

.sport-warm-layout > *,
.sport-warm-template .sport-main,
.sport-warm-template .sport-tab-panel,
.sport-warm-template .sport-route-grid,
.sport-warm-template .sport-route-card {
  min-width: 0;
}

.sport-warm-template .sport-stats-row {
  grid-template-columns: repeat(4, minmax(128px, 1fr));
}

.sport-warm-template .sport-stat-chip {
  min-height: 82px;
  padding: 14px 16px;
}

.sport-warm-template .sport-stat-val {
  font-size: 28px;
}

.sport-warm-template .sport-stat-lbl {
  font-size: 12px;
}

.sport-warm-template .sport-tab-panel,
.sport-warm-template .sport-sidebar,
.sport-warm-template .sport-rail-card {
  box-shadow: 0 14px 36px color-mix(in srgb, var(--ink) 7.5%, transparent), 0 1px 0 rgba(255,255,255,.86) inset;
}

.sport-warm-template .sport-route-grid {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.sport-warm-template .sport-route-card {
  min-height: 204px;
  border: 1px solid rgba(255, 255, 255, .58);
  background: var(--surface2);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ink) 14%, transparent);
}

.sport-warm-template .sport-route-map::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.00) 0%, rgba(0,0,0,.10) 42%, rgba(0,0,0,.66) 100%),
    radial-gradient(circle at 83% 14%, rgba(255,255,255,.24), transparent 22%);
}

.sport-warm-template .sport-map-placeholder {
  min-height: 204px;
  background: url('../assets/sport-route-coast.svg') center / cover no-repeat;
}

.sport-warm-template .sport-route-card[data-route-index="1"] .sport-map-placeholder {
  background-image: url('../assets/sport-route-valley.svg');
}

.sport-warm-template .sport-route-card[data-route-index="2"] .sport-map-placeholder {
  background-image: url('../assets/sport-route-mountain.svg');
}

.sport-warm-template .sport-route-card[data-route-index="3"] .sport-map-placeholder {
  background-image: url('../assets/sport-route-sunset.svg');
}

.sport-warm-template .sport-route-body {
  min-height: 204px;
  padding: 18px;
}

.sport-warm-template .sport-route-name {
  font-size: 16px;
  letter-spacing: -0.035em;
}

.sport-warm-template .sport-tag {
  font-size: 11px;
  color: rgba(255,255,255,.95);
  background: rgba(20, 22, 16, .28);
}

.sport-warm-template .sport-route-actions .btn {
  min-height: 35px;
  border-radius: 10px;
}

.sport-warm-template .sport-rail-row,
.sport-warm-template .sport-quick-actions button,
.sport-warm-template .sport-integration-row {
  background: var(--warm-glass);
}

.sport-warm-template .sport-quick-actions button {
  justify-content: space-between;
}

.sport-warm-template .sport-quick-actions button::after {
  content: '›';
  opacity: .55;
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 1180px) {
  .sport-warm-header {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sport-warm-heading {
    max-width: 620px;
  }

  .sport-warm-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sport-warm-template .sport-sidebar,
  .sport-warm-template .sport-rail {
    position: static;
  }

  .sport-warm-template .sport-sidebar {
    display: grid;
    grid-template-columns: minmax(210px, .65fr) minmax(220px, .8fr);
    gap: 14px;
  }

  .sport-warm-template .sport-sidebar-section {
    margin: 0;
  }

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

  .sport-warm-template .module-action-bar {
    margin: 0 0 16px;
  }

  .sport-warm-main-action {
    right: 22px;
    bottom: 32px;
  }
}

@media (max-width: 980px) {
  .sport-warm-template.module-page {
    padding-inline: 18px;
  }

  .sport-warm-template .sport-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sport-warm-template .sport-route-grid {
    grid-template-columns: 1fr;
  }

  .sport-warm-template .sport-rail {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .sport-warm-template.module-page {
    padding: 16px 14px 96px;
  }

  .sport-warm-heading .page-title {
    font-size: 42px;
  }

  .sport-warm-heading .page-sub {
    max-width: none;
  }

  .sport-hero-card {
    min-height: 172px;
    border-radius: 20px;
  }

  .sport-hero-actions {
    top: 12px;
    right: 12px;
    left: auto;
  }

  .sport-warm-main-action {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 10px;
  }

  .sport-warm-template .sport-tab-group {
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .sport-warm-template .sport-tab-chip {
    flex: 0 0 auto;
    min-width: 94px;
  }

  .sport-warm-template .sport-sidebar {
    grid-template-columns: 1fr;
  }

  .sport-warm-template .sport-stats-row {
    grid-template-columns: 1fr;
  }

  .sport-warm-template .sport-route-card,
  .sport-warm-template .sport-route-body,
  .sport-warm-template .sport-map-placeholder {
    min-height: 218px;
  }
}

/* ==========================================================================
   RC4.2 Warm OS Sport refinement
   Real photo assets, cleaner stat icons, calmer duplicated actions.
   ========================================================================== */
.sport-hero-card {
  --sport-hero-image: url('../assets/sport-hero-warm-photo.jpg');
  min-height: 202px;
  background-image:
    linear-gradient(90deg, rgba(54, 30, 13, .04), rgba(18, 15, 10, .46)),
    var(--sport-hero-image);
  background-position: center;
}

.sport-hero-card::after {
  background: linear-gradient(0deg, rgba(0,0,0,.42), rgba(0,0,0,.06) 78%, transparent);
}

.sport-hero-shine {
  background:
    linear-gradient(105deg, rgba(255,255,255,.06), transparent 40%),
    radial-gradient(circle at 72% 16%, rgba(255, 227, 177, .18), transparent 22%);
}

.sport-warm-template .sport-stat-chip {
  overflow: hidden;
}

.sport-warm-template .sport-stat-icon {
  position: absolute;
  right: 15px;
  bottom: 18px;
  width: 72px;
  height: 32px;
  color: var(--sport-warm-accent);
  opacity: .72;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sport-warm-template .sport-stat-icon rect {
  fill: currentColor;
  stroke: none;
  opacity: .64;
}

.sport-warm-template .sport-stat-icon circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}

.sport-warm-template .sport-stat-icon + .sport-stat-spark,
.sport-warm-template .sport-stat-spark {
  display: none;
}

.sport-warm-template .sport-map-placeholder {
  background: url('../assets/sport-route-coast-photo.jpg') center / cover no-repeat;
}

.sport-warm-template .sport-route-card[data-route-index="1"] .sport-map-placeholder {
  background-image: url('../assets/sport-route-valley-photo.jpg');
}

.sport-warm-template .sport-route-card[data-route-index="2"] .sport-map-placeholder {
  background-image: url('../assets/sport-route-mountain-photo.jpg');
}

.sport-warm-template .sport-route-card[data-route-index="3"] .sport-map-placeholder {
  background-image: url('../assets/sport-route-sunset-photo.jpg');
}

.sport-warm-template .sport-route-map::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.64) 100%),
    linear-gradient(90deg, rgba(0,0,0,.18), transparent 42%),
    radial-gradient(circle at 82% 13%, rgba(255,255,255,.22), transparent 19%);
}

.sport-warm-template .sport-route-card {
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--ink) 13%, transparent);
}


@media (max-width: 1180px) {
  .sport-hero-card {
    min-height: 190px;
  }
}

@media (max-width: 720px) {
  .sport-hero-card {
    min-height: 180px;
    background-position: center;
  }

  .sport-warm-template .sport-stat-icon {
    width: 64px;
  }
}

/* ==========================================================================
   RC4.3 Warm OS Sport polish
   Fix hero upload visibility, clean photo assets, icons, tab transitions, and responsive layout.
   ========================================================================== */
.sport-hero-card {
  --sport-hero-image: url('../assets/sport-hero-warm-clean.jpg');
  background-image:
    linear-gradient(90deg, rgba(52, 31, 18, .08), rgba(20, 18, 13, .42)),
    var(--sport-hero-image) !important;
  background-size: cover;
  background-position: center;
}

.sport-hero-card::after {
  height: 62%;
  background: linear-gradient(0deg, rgba(0,0,0,.44), rgba(0,0,0,.07) 76%, transparent);
}

.sport-hero-shine {
  background: linear-gradient(110deg, rgba(255,255,255,.08), transparent 42%);
}

.sport-hero-primary {
  position: absolute;
  right: 28px;
  bottom: 40px;
  z-index: 4;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 14px;
  color: var(--accent-contrast);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 84%, var(--ink) 16%));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.sport-hero-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--accent) 22%, transparent);
  filter: saturate(1.04);
}

.sport-warm-main-action { display: none !important; }

.sport-warm-template .sport-tab-panel {
  animation: sportPanelIn .24s cubic-bezier(.2,.8,.2,1) both;
}

.sport-warm-template .sport-route-card,
.sport-warm-template .sport-stat-chip,
.sport-warm-template .sport-rail-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.sport-warm-template .sport-route-card:hover,
.sport-warm-template .sport-stat-chip:hover,
.sport-warm-template .sport-rail-card:hover {
  transform: translateY(-1px);
}

@keyframes sportPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.sport-warm-template .sport-stat-chip {
  padding-right: 82px !important;
  min-height: 86px;
}

.sport-warm-template .sport-stat-main,
.sport-warm-template .sport-stat-kicker {
  position: relative;
  z-index: 2;
}

.sport-warm-template .sport-stat-icon {
  right: 18px !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%);
  width: 48px !important;
  height: 32px !important;
  opacity: .42 !important;
  stroke-width: 2.2 !important;
  pointer-events: none;
}

.sport-warm-template .sport-stat-icon rect {
  opacity: .52 !important;
}

.sport-warm-template .sport-map-placeholder {
  background: url('../assets/sport-route-coast-clean.jpg') center / cover no-repeat !important;
}

.sport-warm-template .sport-route-card[data-route-index="1"] .sport-map-placeholder {
  background-image: url('../assets/sport-route-valley-clean.jpg') !important;
}

.sport-warm-template .sport-route-card[data-route-index="2"] .sport-map-placeholder {
  background-image: url('../assets/sport-route-mountain-clean.jpg') !important;
}

.sport-warm-template .sport-route-card[data-route-index="3"] .sport-map-placeholder {
  background-image: url('../assets/sport-route-sunset-clean.jpg') !important;
}

.sport-warm-template .sport-route-map::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 36%, rgba(0,0,0,.68) 100%),
    linear-gradient(90deg, rgba(0,0,0,.10), transparent 42%) !important;
}

.sport-warm-template .sport-route-card {
  border: 1px solid rgba(255, 255, 255, .74) !important;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--ink) 12%, transparent) !important;
  background: var(--surface2) !important;
}

.sport-warm-template .sport-route-body {
  text-shadow: 0 1px 14px rgba(0,0,0,.34);
}

.sport-warm-template .sport-route-name {
  line-height: 1.15;
}

.sport-warm-template .sport-route-actions .btn,
.sport-warm-template .sport-route-link {
  text-shadow: none;
}

@media (max-width: 1320px) {
  .sport-warm-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .sport-warm-template .sport-rail { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .sport-hero-primary {
    right: 18px;
    bottom: 22px;
    min-height: 40px;
    padding-inline: 18px;
    font-size: 14px;
  }

  .sport-warm-template .sport-stat-chip {
    padding-right: 72px !important;
  }

  .sport-warm-template .sport-stat-icon {
    width: 42px !important;
  }
}

@media (max-width: 720px) {
  .sport-hero-primary {
    position: relative;
    right: auto;
    bottom: auto;
    left: 16px;
    margin-top: 120px;
    width: calc(100% - 32px);
  }

  .sport-hero-copy {
    bottom: 82px;
  }

  .sport-warm-template .sport-stats-row {
    grid-template-columns: 1fr !important;
  }

  .sport-warm-template .sport-stat-chip {
    padding-right: 86px !important;
  }
}

/* ==========================================================================
   RC4.4 Warm OS Sport functional polish
   - collapsed sharing controls
   - stronger responsive half-screen layout
   - cleaner route cards
   - transitions on interactive controls
   ========================================================================== */
.sport-warm-template button,
.sport-warm-template a,
.sport-warm-template input,
.sport-warm-template summary,
.sport-warm-template .sport-tab-chip,
.sport-warm-template .sport-disc-item,
.sport-warm-template .sport-route-actions .btn,
.sport-warm-template .sport-quick-actions button {
  transition: transform .18s cubic-bezier(.2,.8,.2,1),
              box-shadow .18s cubic-bezier(.2,.8,.2,1),
              background-color .18s ease,
              border-color .18s ease,
              color .18s ease,
              opacity .18s ease,
              filter .18s ease;
}

.sport-warm-template button:hover,
.sport-warm-template a:hover,
.sport-warm-template summary:hover,
.sport-warm-template .sport-disc-item:hover,
.sport-warm-template .sport-route-actions .btn:hover,
.sport-warm-template .sport-quick-actions button:hover {
  transform: translateY(-1px);
}

.sport-sharing-details {
  overflow: visible;
}

.sport-sharing-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 14px;
  background: var(--warm-glass);
  cursor: pointer;
}

.sport-sharing-summary::-webkit-details-marker { display: none; }

.sport-sharing-summary strong {
  display: block;
  color: var(--sport-warm-ink);
  font-size: 12px;
  letter-spacing: .02em;
}

.sport-sharing-summary small {
  display: block;
  margin-top: 2px;
  color: var(--sport-warm-muted);
  font-size: 11px;
  font-weight: 650;
}

.sport-sharing-details[open] .sport-sharing-summary {
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), color-mix(in srgb, var(--surface) 78%, transparent));
}

.sport-sharing-details[open] .sport-sharing-summary > span:last-child {
  transform: rotate(180deg);
}

.sport-sharing-details .sport-sharing-label {
  margin-top: 12px;
}

.sport-warm-template .sport-sharing-list {
  max-height: 230px;
  overflow: auto;
  padding-right: 4px;
}

.sport-warm-template .sport-stat-chip {
  min-width: 0;
  padding-right: 76px !important;
}

.sport-warm-template .sport-stat-main {
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 0;
}

.sport-warm-template .sport-stat-val {
  font-size: clamp(25px, 2.4vw, 30px);
  white-space: nowrap;
}

.sport-warm-template .sport-stat-lbl {
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sport-warm-template .sport-route-grid {
  grid-template-columns: repeat(2, minmax(230px, 1fr));
}

.sport-warm-template .sport-route-card {
  min-width: 0;
  isolation: isolate;
}

.sport-warm-template .sport-route-map::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.12) 46%, rgba(0,0,0,.70) 100%),
    linear-gradient(90deg, rgba(0,0,0,.08), transparent 50%) !important;
}

.sport-map-open-btn,
.sport-map-ph-hint,
.sport-map-ph-icon {
  display: none !important;
}

.sport-warm-template .sport-map-ph-label {
  display: none !important;
}

.sport-warm-template .sport-route-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 214px;
  padding: 18px;
  gap: 10px;
}

.sport-warm-template .sport-route-actions {
  margin-top: 2px;
}

.sport-warm-template .sport-route-name {
  max-width: 92%;
  text-wrap: balance;
}

.sport-warm-template .sport-route-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sport-warm-template .sport-tag {
  backdrop-filter: blur(8px);
}

@media (max-width: 1320px) {
  .sport-warm-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sport-warm-template .sport-sidebar {
    position: static !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(220px, .8fr);
    gap: 14px;
    align-items: start;
  }

  .sport-warm-template .sport-sidebar-section {
    margin: 0 !important;
  }

  .sport-warm-template .sport-main {
    min-width: 0;
  }

  .sport-warm-template .sport-stats-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (max-width: 1040px) {
  .sport-warm-template.module-page {
    padding-inline: 20px;
  }

  .sport-warm-template .sport-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .sport-warm-template .sport-route-grid {
    grid-template-columns: repeat(2, minmax(210px, 1fr)) !important;
    gap: 12px;
  }

  .sport-warm-template .sport-route-card,
  .sport-warm-template .sport-route-body,
  .sport-warm-template .sport-map-placeholder {
    min-height: 250px;
  }
}

@media (max-width: 820px) {
  .sport-warm-template .sport-sidebar {
    grid-template-columns: 1fr !important;
  }

  .sport-warm-template .sport-route-grid {
    grid-template-columns: 1fr !important;
  }

  .sport-warm-template .sport-rail {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .sport-warm-template .sport-route-card,
  .sport-warm-template .sport-route-body,
  .sport-warm-template .sport-map-placeholder {
    min-height: 230px;
  }
}

/* ==========================================================================
   RC4.6 Warm OS Sport full-width layout polish
   - tabs integrated under the title
   - cleaner full-screen composition
   - hero aligned with module grid
   ========================================================================== */
.sport-warm-template .sport-warm-header {
  display: grid !important;
  grid-template-columns: minmax(250px, 0.36fr) minmax(560px, 1fr) !important;
  gap: clamp(22px, 3vw, 42px) !important;
  align-items: center !important;
  margin: 2px 0 18px !important;
}

.sport-warm-template .sport-warm-heading {
  padding: 4px 0 0 !important;
  align-self: center;
}

.sport-warm-template .sport-warm-heading .eyebrow {
  display: none !important;
}

.sport-warm-template .sport-warm-heading .page-title {
  font-size: clamp(44px, 4.7vw, 64px) !important;
  line-height: .92 !important;
  letter-spacing: -0.065em !important;
}

.sport-warm-template .sport-warm-heading .page-sub {
  max-width: 360px !important;
  margin-top: 14px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.sport-warm-template .sport-warm-heading .sport-tab-bar {
  margin: 22px 0 0 !important;
  width: 100% !important;
}

.sport-warm-template .module-action-bar {
  display: none !important;
}

.sport-warm-template .sport-tab-group {
  min-height: 42px !important;
  padding: 4px !important;
  gap: 2px !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 7%, transparent), 0 1px 0 rgba(255,255,255,.82) inset !important;
}

.sport-warm-template .sport-tab-chip {
  min-width: 84px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 13px !important;
  font-size: 12.5px !important;
}

.sport-warm-template .sport-hero-card {
  min-height: clamp(170px, 15vw, 214px) !important;
  border-radius: 24px !important;
  align-self: stretch;
  box-shadow: 0 22px 54px color-mix(in srgb, var(--ink) 15%, transparent) !important;
}

.sport-warm-template .sport-hero-copy {
  left: 24px !important;
  bottom: 26px !important;
}

.sport-warm-template .sport-hero-primary {
  right: 28px !important;
  bottom: 38px !important;
}

.sport-warm-template .sport-stats-row {
  margin-top: 0 !important;
}

@media (min-width: 1321px) {
  .sport-warm-template .sport-layout.sport-warm-layout {
    grid-template-columns: 230px minmax(0, 1fr) 280px !important;
    gap: 16px !important;
  }
}

@media (max-width: 1180px) {
  .sport-warm-template .sport-warm-header {
    grid-template-columns: minmax(0, .46fr) minmax(420px, 1fr) !important;
    gap: 22px !important;
  }
  .sport-warm-template .sport-warm-heading .page-title {
    font-size: clamp(40px, 5vw, 56px) !important;
  }
  .sport-warm-template .sport-tab-group {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }
}

@media (max-width: 980px) {
  .sport-warm-template .sport-warm-header {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .sport-warm-template .sport-warm-heading {
    display: grid;
    gap: 0;
  }
  .sport-warm-template .sport-warm-heading .page-sub {
    max-width: 560px !important;
  }
  .sport-warm-template .sport-warm-heading .sport-tab-bar {
    order: 3;
    margin-top: 16px !important;
  }
  .sport-warm-template .sport-hero-card {
    min-height: 176px !important;
  }
}

@media (max-width: 720px) {
  .sport-warm-template .sport-warm-heading .page-title {
    font-size: 42px !important;
  }
  .sport-warm-template .sport-warm-heading .page-sub {
    font-size: 14px !important;
  }
  .sport-warm-template .sport-tab-group {
    width: 100% !important;
  }
  .sport-warm-template .sport-tab-chip {
    min-width: 92px !important;
  }
  .sport-warm-template .sport-hero-primary {
    position: absolute !important;
    left: auto !important;
    right: 16px !important;
    bottom: 18px !important;
    width: auto !important;
    margin: 0 !important;
    min-height: 40px !important;
    padding-inline: 16px !important;
  }
  .sport-warm-template .sport-hero-copy {
    bottom: 72px !important;
  }
}

/* ==========================================================================
   RC4.7 Warm OS Sport final QA
   Hero upload, smooth tabs, gear photos, cleaner responsive polish.
   ========================================================================== */
.sport-warm-template .sport-hero-card {
  background-image:
    linear-gradient(90deg, rgba(52, 31, 18, .08), rgba(20, 18, 13, .42)),
    var(--sport-hero-image) !important;
}

.sport-warm-template .sport-tab-group {
  position: relative;
  overflow: hidden;
}

.sport-warm-template .sport-tab-group::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 4px;
  top: 4px;
  height: calc(100% - 8px);
  width: calc((100% - 8px) / var(--sport-tab-count, 5));
  border-radius: 13px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--surface) 86%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateX(calc(var(--sport-tab-index, 0) * 100%));
  transition: transform .28s cubic-bezier(.2,.8,.2,1), width .2s ease, background-color .2s ease;
}

.sport-warm-template .sport-tab-chip {
  position: relative;
  z-index: 1;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sport-warm-template .sport-tab-chip.is-active {
  color: var(--sport-warm-accent) !important;
}

.sport-warm-template .sport-stat-chip {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding-right: 18px !important;
}

.sport-warm-template .sport-stat-icon {
  position: static !important;
  transform: none !important;
  width: 46px !important;
  height: 30px !important;
  flex: 0 0 auto;
  justify-self: end;
}

.sport-gear-photo,
.sport-gear-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(244,232,218,.72));
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--ink) 8%, transparent);
}

.sport-gear-photo img,
.sport-gear-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sport-gear-photo-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 16px;
}

.sport-gear-photo-preview {
  width: 70px;
  height: 70px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(244,232,218,.72));
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--ink) 10%, transparent);
  font-size: 26px;
}

.sport-gear-photo-button { min-height: 40px; }

.sport-warm-template .sport-route-card { background: var(--warm-card-hover) !important; }

.sport-warm-template .sport-route-map::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.01) 0%, rgba(0,0,0,.08) 44%, rgba(0,0,0,.62) 100%),
    linear-gradient(90deg, rgba(0,0,0,.05), transparent 52%) !important;
}

@media (max-width: 1040px) {
  .sport-warm-template .sport-stat-chip { padding-right: 16px !important; }
  .sport-warm-template .sport-stat-icon { width: 40px !important; }
}

@media (max-width: 720px) {
  .sport-warm-template .sport-stat-chip { grid-template-columns: minmax(0, 1fr) 42px; }
}

/* ==========================================================================
   RC4.8 Sport template stability polish
   - tab highlight cannot wrap/desync on half-screen
   - global Planner events are clearly clickable
   ========================================================================== */
.sport-warm-template .sport-warm-heading .sport-tab-bar {
  max-width: 520px !important;
}

.sport-warm-template .sport-tab-group {
  display: grid !important;
  grid-template-columns: repeat(var(--sport-tab-count, 5), minmax(68px, 1fr)) !important;
  width: 100% !important;
  max-width: 520px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.sport-warm-template .sport-tab-chip {
  min-width: 0 !important;
  width: 100% !important;
  white-space: nowrap !important;
}

@media (max-width: 980px) {
  .sport-warm-template .sport-warm-heading .sport-tab-bar,
  .sport-warm-template .sport-tab-group {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .sport-warm-template .sport-tab-group {
    overflow-x: auto !important;
    grid-template-columns: repeat(var(--sport-tab-count, 5), 92px) !important;
    scrollbar-width: none;
  }
  .sport-warm-template .sport-tab-group::-webkit-scrollbar { display: none; }
}

.planner-calendar-task.is-global-event {
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease;
}

.planner-calendar-task.is-global-event:hover,
.planner-calendar-task.is-global-event:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 8%, transparent);
}

/* ==========================================================================
   RC4.9 Sport template UX polish
   - left rail owns sport context + actions
   - right rail is informational only
   - visibility naming and compact action cards
   - tab chips remain readable and animated
   ========================================================================== */
.sport-warm-template .sport-context-actions {
  display: grid;
  gap: 10px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  padding-top: 14px;
}

.sport-warm-template .sport-context-target {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--surface) 80%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--ink);
  font-size: 13px;
}

.sport-warm-template .sport-sidebar-actions {
  display: grid;
  gap: 8px;
}

.sport-warm-template .sport-sidebar-actions button {
  min-height: 38px !important;
  padding: 9px 10px !important;
  justify-content: flex-start !important;
  font-size: 13px !important;
  border-radius: 14px !important;
  background: var(--warm-glass) !important;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent) !important;
}

.sport-warm-template .sport-sidebar-actions button span {
  color: var(--sport-warm-accent) !important;
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}

.sport-warm-template .sport-sharing-summary strong {
  color: var(--ink) !important;
}

.sport-warm-template .sport-sharing-summary small {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.sport-warm-template .sport-rail .sport-rail-card:first-child {
  margin-top: 0;
}

.sport-warm-template .sport-warm-heading .sport-tab-bar {
  max-width: 520px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

.sport-warm-template .sport-warm-heading .sport-tab-bar::-webkit-scrollbar {
  display: none;
}

.sport-warm-template .sport-tab-group {
  grid-template-columns: repeat(var(--sport-tab-count, 5), 96px) !important;
  width: max-content !important;
  min-width: 480px !important;
  max-width: none !important;
}

.sport-warm-template .sport-tab-chip {
  width: 96px !important;
  padding: 0 8px !important;
  text-align: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 1180px) {
  .sport-warm-template .sport-tab-group {
    grid-template-columns: repeat(var(--sport-tab-count, 5), 92px) !important;
    min-width: 460px !important;
  }
  .sport-warm-template .sport-tab-chip { width: 92px !important; }
}

@media (max-width: 980px) {
  .sport-warm-template .sport-sidebar-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sport-warm-template .sport-sidebar-actions button {
    min-height: 42px !important;
  }
}

@media (max-width: 560px) {
  .sport-warm-template .sport-sidebar-actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   RC4.10 Sport Warm OS layout logic polish
   - tabs move as one smooth indicator
   - tabs are below hero/title and cannot be covered by hero
   - hero is visual only; primary CTA lives in the toolbar
   - visibility dropdown stays open until confirmed
   ========================================================================== */
.sport-warm-template .sport-warm-header {
  grid-template-columns: minmax(260px, 350px) minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: stretch !important;
  margin-bottom: 14px !important;
}

.sport-warm-template .sport-warm-heading {
  align-self: center;
  padding: 0 !important;
}

.sport-warm-template .sport-hero-card {
  min-width: 0 !important;
  min-height: 188px !important;
  border-radius: 24px !important;
}

.sport-warm-template .sport-hero-primary,
.sport-warm-template .sport-warm-main-action {
  display: none !important;
}

.sport-warm-template .sport-top-tabs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 2px 0 18px;
  max-width: none;
}

.sport-warm-template .sport-top-tabs .sport-tab-bar {
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible !important;
  max-width: 620px !important;
}

.sport-warm-template .sport-top-primary {
  flex: 0 0 auto;
  min-height: 44px;
  border-radius: 15px;
  padding: 0 20px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 20%, transparent);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.sport-warm-template .sport-top-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 25%, transparent);
  filter: brightness(1.02);
}

.sport-warm-template .sport-tab-group {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(var(--sport-tab-count, 5), minmax(92px, 1fr)) !important;
  width: min(100%, 620px) !important;
  min-width: 0 !important;
  max-width: 620px !important;
  gap: 0 !important;
  padding: 5px !important;
  overflow: hidden !important;
}

.sport-warm-template .sport-tab-group::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / var(--sport-tab-count, 5));
  border-radius: 13px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
  box-shadow: inset 0 -2px 0 var(--sport-warm-accent), 0 10px 20px color-mix(in srgb, var(--accent) 9%, transparent);
  transform: translateX(calc(var(--sport-tab-index, 0) * 100%));
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}

.sport-warm-template .sport-tab-chip {
  position: relative;
  z-index: 1;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 11px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .18s ease, transform .18s ease;
}

.sport-warm-template .sport-tab-chip:hover {
  transform: translateY(-1px);
}

.sport-warm-template .sport-tab-chip.is-active {
  background: transparent !important;
  box-shadow: none !important;
}

.sport-warm-template .sport-sharing-details {
  border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
  border-radius: 16px;
  background: var(--warm-glass);
  padding: 0;
  overflow: hidden;
}

.sport-warm-template .sport-sharing-summary {
  min-height: 48px;
  padding: 10px 12px;
  cursor: pointer;
}

.sport-warm-template .sport-sharing-list {
  padding: 4px 12px 10px;
}

.sport-warm-template .sport-share-confirm {
  width: calc(100% - 24px);
  margin: 0 12px 12px;
  min-height: 40px;
  border-radius: 13px;
}

.sport-warm-template .sport-sharing-row {
  transition: background .16s ease, color .16s ease;
}

.sport-warm-template .sport-sharing-row:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.sport-warm-template .sport-quick-actions button,
.sport-warm-template .sport-rail-row,
.sport-warm-template .sport-route-actions .btn,
.sport-warm-template .btn,
.sport-warm-template button {
  transition: transform .17s ease, box-shadow .17s ease, border-color .17s ease, background-color .17s ease, color .17s ease, opacity .17s ease;
}

.sport-warm-template .sport-quick-actions button:hover,
.sport-warm-template .sport-rail-row:hover,
.sport-warm-template .sport-route-actions .btn:hover {
  transform: translateY(-1px);
}

@media (max-width: 1180px) {
  .sport-warm-template .sport-warm-header {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .sport-warm-template .sport-hero-card {
    min-height: 170px !important;
  }
}

@media (max-width: 820px) {
  .sport-warm-template .sport-top-tabs {
    align-items: stretch;
    flex-direction: column;
  }
  .sport-warm-template .sport-top-tabs .sport-tab-bar,
  .sport-warm-template .sport-tab-group {
    width: 100% !important;
    max-width: none !important;
  }
  .sport-warm-template .sport-top-primary {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .sport-warm-template .sport-tab-group {
    grid-template-columns: repeat(var(--sport-tab-count, 5), 104px) !important;
    width: max-content !important;
    min-width: 520px !important;
  }
  .sport-warm-template .sport-top-tabs .sport-tab-bar {
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .sport-warm-template .sport-top-tabs .sport-tab-bar::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   RC4.11 Sport final template polish
   - edit active sport/discipline
   - visibility moves below contextual actions
   - half-screen tabs remain directly under hero and readable
   - equipment photos fill the whole card
   ========================================================================== */
.sport-warm-template .sport-context-target {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.sport-warm-template .sport-disc-edit-btn {
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background: var(--warm-glass);
  color: var(--sport-warm-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
}

.sport-warm-template .sport-disc-edit-btn:hover,
.sport-warm-template .sport-disc-edit-btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: translateY(-1px);
}

.sport-warm-template .sport-sharing-details {
  margin-top: 2px;
}

.sport-warm-template .sport-top-tabs {
  position: relative;
  z-index: 8;
}

.sport-warm-template .sport-tab-bar {
  min-width: 0;
}

.sport-warm-template .sport-tab-group {
  isolation: isolate;
}

.sport-warm-template .sport-tab-group::before {
  will-change: transform;
}

.sport-warm-template .sport-tab-chip {
  overflow: visible !important;
  text-overflow: clip !important;
}

.sport-warm-template .sport-gear-card.has-photo {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .45) !important;
  background: var(--surface2) !important;
  color: var(--accent-contrast);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--ink) 18%, transparent) !important;
}

.sport-warm-template .sport-gear-card.has-photo .sport-gear-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.24) 42%, rgba(0,0,0,.68) 100%),
    var(--sport-gear-photo-url);
  background-size: cover;
  background-position: center;
  transform: scale(1.01);
}

.sport-warm-template .sport-gear-card.has-photo .sport-gear-top,
.sport-warm-template .sport-gear-card.has-photo .sport-gear-km,
.sport-warm-template .sport-gear-card.has-photo .sport-health-bar-wrap {
  position: relative;
  z-index: 1;
}

.sport-warm-template .sport-gear-card.has-photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.sport-warm-template .sport-gear-card.has-photo .sport-gear-name,
.sport-warm-template .sport-gear-card.has-photo .sport-gear-meta,
.sport-warm-template .sport-gear-card.has-photo .sport-gear-km {
  color: #fff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.34);
}

.sport-warm-template .sport-gear-card.has-photo .sport-gear-meta,
.sport-warm-template .sport-gear-card.has-photo .sport-gear-km {
  opacity: .88;
}

.sport-warm-template .sport-gear-card.has-photo .sport-health-bar-track {
  background: rgba(255,255,255,.28) !important;
}

.sport-warm-template .sport-gear-card.has-photo .sport-health-pct {
  color: #fff !important;
}

@media (max-width: 1180px) {
  .sport-warm-template .sport-top-tabs {
    position: sticky;
    top: 52px;
    padding: 8px 0;
    margin-top: 8px !important;
    background: linear-gradient(180deg, rgba(248, 243, 236, .96), rgba(248, 243, 236, .82));
    backdrop-filter: blur(12px);
  }

  .sport-warm-template .sport-top-tabs .sport-tab-bar {
    overflow-x: auto !important;
    scrollbar-width: none;
  }

  .sport-warm-template .sport-top-tabs .sport-tab-bar::-webkit-scrollbar { display: none; }
}

@media (max-width: 760px) {
  .sport-warm-template .sport-top-tabs {
    top: 48px;
  }

  .sport-warm-template .sport-top-primary {
    min-height: 42px;
  }

  .sport-warm-template .sport-gear-card.has-photo {
    min-height: 170px;
  }
}

/* RC4.12 Sport goals tab */
.sport-goals-panel .sport-panel-subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.sport-goal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.sport-goal-card {
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(255,248,239,.72));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 8%, transparent);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.sport-goal-card:hover,
.sport-goal-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--ink) 12%, transparent);
  outline: none;
}
.sport-goal-main { display: grid; gap: 5px; }
.sport-goal-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sport-goal-main strong { font-size: 18px; line-height: 1.18; }
.sport-goal-main small { color: var(--muted); font-size: 12px; }
.sport-goal-progress {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  overflow: hidden;
  margin: 14px 0 10px;
}
.sport-goal-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 58%, #fff 42%));
}
.sport-goal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sport-goal-foot em { font-style: normal; color: var(--muted); font-size: 12px; }
.sport-goal-foot strong { color: var(--accent); }
.sport-goal-notes {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
@media (max-width: 900px) {
  .sport-goal-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RC5 — Planner / Warm OS beta template
   Safe parallel planner view. Does not replace classic Planner.
   ============================================================ */
.planner-warm-page {
  max-width: 1560px;
  margin: 0 auto;
  padding: clamp(18px, 2.4vw, 34px);
  color: var(--ink);
}

.planner-warm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  margin-bottom: 22px;
}

.planner-warm-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, #fff);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.planner-warm-hero h1 {
  margin: 0;
  font-size: clamp(40px, 6vw, 76px);
  line-height: .92;
  letter-spacing: -.065em;
  font-weight: 850;
}

.planner-warm-hero p {
  max-width: 520px;
  margin: 14px 0 18px;
  color: var(--ink2);
  font-size: 15px;
  line-height: 1.5;
}

.planner-warm-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 18px;
  background: var(--warm-glass);
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 7%, transparent);
}

.planner-warm-tab {
  appearance: none;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink2);
  font-weight: 800;
  padding: 10px 17px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.planner-warm-tab:hover {
  color: var(--ink);
  transform: translateY(-1px);
}

.planner-warm-tab.is-active {
  color: var(--accent);
  background: linear-gradient(135deg, rgba(255,255,255,.96), color-mix(in srgb, var(--accent) 9%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent), 0 8px 20px color-mix(in srgb, var(--accent) 8%, transparent);
}

.planner-warm-primary,
.planner-warm-ghost {
  border: 0;
  border-radius: 16px;
  padding: 12px 17px;
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.planner-warm-primary {
  color: var(--accent-contrast);
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 74%, var(--ink)));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 22%, transparent);
}

.planner-warm-primary:hover,
.planner-warm-ghost:hover {
  transform: translateY(-1px);
}

.planner-warm-ghost {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
}

.planner-warm-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 285px;
  gap: 18px;
  align-items: start;
}

.planner-warm-left,
.planner-warm-right,
.planner-warm-main {
  min-width: 0;
}

.planner-warm-panel,
.planner-warm-calendar-card {
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  background: var(--warm-glass);
  border-radius: 22px;
  box-shadow: 0 18px 45px color-mix(in srgb, var(--ink) 8%, transparent);
}

.planner-warm-panel {
  padding: 16px;
  margin-bottom: 14px;
}

.planner-warm-panel h3,
.planner-warm-calendar-card h2 {
  margin: 0 0 13px;
  font-size: 15px;
  letter-spacing: -.02em;
}

.planner-warm-field {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.planner-warm-field span,
.planner-warm-panel label span {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink3);
}

.planner-warm-field select,
.planner-warm-quick input,
.planner-warm-quick select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--warm-glass);
  padding: 11px 12px;
  color: var(--ink);
  font: inherit;
}

.planner-warm-quick {
  display: grid;
  gap: 10px;
}

.planner-warm-calendar-card {
  padding: 16px;
}

.planner-warm-section-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.planner-warm-section-head p {
  margin: 4px 0 0;
  color: var(--ink3);
  font-size: 13px;
}

.planner-warm-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(180px, 18vw, 220px);
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.planner-warm-day {
  min-height: 210px;
  border-radius: 18px;
  background: var(--warm-glass);
  border: 1px solid var(--line);
  overflow: hidden;
}

.planner-warm-day.is-today {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent),
    0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

.planner-warm-day.is-today header {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-bottom-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

.planner-warm-day.is-today header span {
  color: var(--accent);
  font-weight: 900;
}

.planner-warm-day.is-today header strong {
  color: var(--accent);
  font-size: 30px;
}

.planner-warm-day.is-today .planner-warm-event-icon,
.planner-warm-day.is-today .planner-warm-compact-event > span,
.planner-warm-day.is-today .planner-warm-row > span {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.planner-warm-day header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
  cursor: pointer;
  user-select: none;
}
.planner-warm-day header:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.planner-warm-day header span,
.planner-warm-day header small {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.planner-warm-day header strong {
  grid-row: span 2;
  font-size: 26px;
  line-height: 1;
}

.planner-warm-day-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.planner-warm-event,
.planner-warm-compact-event,
.planner-warm-row,
.planner-warm-source {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: 14px;
  background: var(--warm-glass);
  color: var(--ink);
  padding: 9px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.planner-warm-event:hover,
.planner-warm-compact-event:hover,
.planner-warm-source:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 8%, transparent);
}

.planner-warm-event.is-high { border-left: 3px solid var(--danger); }
.planner-warm-event.is-medium { border-left: 3px solid var(--warning); }
.planner-warm-event.is-low { border-left: 3px solid var(--positive); }

.planner-warm-event-icon,
.planner-warm-compact-event > span,
.planner-warm-row > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
}

.planner-warm-event strong,
.planner-warm-compact-event strong,
.planner-warm-row strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.planner-warm-event small,
.planner-warm-compact-event small,
.planner-warm-row small,
.planner-warm-source small {
  display: block;
  color: var(--ink3);
  font-size: 11px;
  margin-top: 2px;
}

.planner-warm-empty,
.planner-warm-muted {
  color: var(--ink3);
  font-size: 13px;
}

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

.planner-warm-compact-event,
.planner-warm-source {
  border: 0;
  cursor: pointer;
  margin-bottom: 8px;
}

.planner-warm-source {
  grid-template-columns: 1fr auto;
}

.planner-warm-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 850;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

@media (max-width: 1280px) {
  .planner-warm-grid {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .planner-warm-right {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .planner-warm-right .planner-warm-panel {
    margin-bottom: 0;
  }
  .planner-warm-days {
    grid-template-columns: repeat(4, minmax(128px, 1fr));
  }
}

@media (max-width: 860px) {
  .planner-warm-page { padding: 16px; }
  .planner-warm-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .planner-warm-tabs {
    width: 100%;
    overflow-x: auto;
  }
  .planner-warm-tab { white-space: nowrap; }
  .planner-warm-grid,
  .planner-warm-right {
    grid-template-columns: 1fr;
  }
  .planner-warm-days {
    grid-auto-columns: clamp(240px, 78vw, 320px);
  }
  .planner-warm-day { min-height: 150px; }
}

/* RC5.3 Planner Warm OS - no-left operational layout */
.planner-warm-page--no-left {
  max-width: 1640px;
}

.planner-warm-hero--compact {
  align-items: center;
  margin-bottom: 14px;
}

.planner-warm-hero--compact .planner-warm-badge {
  margin-bottom: 8px;
}

.planner-warm-hero--compact h1 {
  font-size: clamp(34px, 4.4vw, 58px);
  letter-spacing: -.055em;
}

.planner-warm-hero--compact p {
  margin: 10px 0 0;
  max-width: 760px;
}

.planner-warm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}

.planner-warm-grid--no-left {
  grid-template-columns: minmax(0, 1fr) 300px;
}

.planner-warm-quickbar {
  display: grid;
  grid-template-columns: minmax(190px, 1.05fr) minmax(220px, 1.35fr) 150px 145px auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  background: var(--warm-glass);
  box-shadow: 0 18px 45px color-mix(in srgb, var(--ink) 7%, transparent);
}

.planner-warm-quickbar strong {
  display: block;
  font-size: 13px;
  letter-spacing: -.01em;
}

.planner-warm-quickbar small {
  display: block;
  margin-top: 2px;
  color: var(--ink3);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.planner-warm-quickbar input,
.planner-warm-quickbar select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--warm-glass);
  padding: 11px 12px;
  color: var(--ink);
  font: inherit;
}

.planner-warm-grid--no-left .planner-warm-calendar-card {
  min-width: 0;
}

.planner-warm-grid--no-left .planner-warm-days {
  overflow-x: auto;
  padding-bottom: 4px;
}

.planner-warm-grid--no-left .planner-warm-right {
  position: sticky;
  top: 76px;
}

@media (max-width: 1320px) {
  .planner-warm-grid--no-left {
    grid-template-columns: minmax(0, 1fr);
  }
  .planner-warm-grid--no-left .planner-warm-right {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
  .planner-warm-quickbar {
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) 145px auto;
  }
  .planner-warm-quickbar select {
    display: none;
  }
}

@media (max-width: 900px) {
  .planner-warm-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .planner-warm-toolbar .planner-warm-ghost {
    width: 100%;
  }
  .planner-warm-quickbar {
    grid-template-columns: 1fr;
  }
  .planner-warm-quickbar select {
    display: block;
  }
  .planner-warm-grid--no-left .planner-warm-right {
    grid-template-columns: 1fr;
  }
  .planner-warm-grid--no-left .planner-warm-days {
    grid-auto-columns: clamp(240px, 78vw, 320px);
    overflow-x: auto;
  }
}

/* RC5.4 Planner operational fixes: week nav, workflow board, task sheet */
.planner-warm-section-head--calendar {
  align-items: center;
}

.planner-warm-week-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.planner-warm-week-nav strong {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--warm-glass);
  border: 1px solid var(--line);
  font-size: 13px;
  white-space: nowrap;
}

.planner-warm-event {
  cursor: pointer;
  font-family: inherit;
}

.planner-warm-event > span:last-child {
  min-width: 0;
}

.planner-warm-workflow-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.planner-warm-lane {
  min-width: 150px;
  border-radius: 18px;
  background: var(--warm-glass);
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  overflow: hidden;
}

.planner-warm-lane header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.planner-warm-lane header strong {
  font-size: 12px;
}

.planner-warm-lane header span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
}

.planner-warm-lane-body {
  display: grid;
  gap: 8px;
  padding: 10px;
  min-height: 260px;
  align-content: start;
}

.planner-warm-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: 16px;
  background: rgba(28, 23, 19, .28);
  backdrop-filter: blur(8px);
}

.planner-warm-step-backdrop {
  align-items: center;
  justify-items: center;
  padding: 16px;
}

.planner-warm-sheet {
  width: min(620px, calc(100% - 24px));
  margin: 0;
  padding: 18px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--line) 90%, transparent);
  background: var(--warm-glass);
  box-shadow: 0 12px 60px color-mix(in srgb, var(--ink) 22%, transparent);
}

.planner-warm-step-backdrop .planner-warm-sheet {
  margin: 0;
}

.planner-warm-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.planner-warm-sheet-head h2 {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -.04em;
}

.planner-warm-sheet-head p {
  margin: 6px 0 0;
  color: var(--ink3);
}

.planner-warm-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.planner-warm-sheet input,
.planner-warm-sheet select,
.planner-warm-sheet textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--warm-glass);
  padding: 11px 12px;
  color: var(--ink);
  font: inherit;
}

.planner-warm-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.planner-warm-danger {
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--line));
  border-radius: 16px;
  padding: 12px 17px;
  color: var(--danger);
  background: var(--danger-bg);
  font-weight: 850;
  cursor: pointer;
}

@media (max-width: 900px) {
  .planner-warm-section-head--calendar {
    align-items: stretch;
    flex-direction: column;
  }
  .planner-warm-week-nav {
    justify-content: stretch;
  }
  .planner-warm-week-nav .planner-warm-ghost,
  .planner-warm-week-nav strong {
    flex: 1 1 auto;
    text-align: center;
  }
  .planner-warm-workflow-board {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }
  .planner-warm-lane-body {
    min-height: auto;
  }
  .planner-warm-sheet {
    width: calc(100% - 16px);
    padding: 14px;
    border-radius: 24px;
  }
  .planner-warm-sheet-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .planner-warm-sheet-backdrop {
    align-items: start;
    overflow-y: auto;
    padding: max(12px, env(safe-area-inset-top)) 8px calc(28px + env(safe-area-inset-bottom));
  }

  .planner-warm-step-backdrop {
    align-items: start;
  }

  .planner-warm-sheet,
  .planner-warm-step-backdrop .planner-warm-sheet {
    width: min(100%, 620px);
    max-height: none;
    margin: 8px auto 28px;
    box-shadow: 0 18px 70px color-mix(in srgb, var(--ink) 22%, transparent);
  }

  .planner-warm-sheet input,
  .planner-warm-sheet select,
  .planner-warm-sheet textarea {
    font-size: 16px;
  }

  .planner-warm-sheet-actions {
    justify-content: stretch;
  }

  .planner-warm-sheet-actions button {
    flex: 1 1 150px;
  }
}

/* RC5.5 Planner stability + redesigned workflow chain */
.planner-warm-today-btn {
  padding-inline: 18px;
  box-shadow: 0 12px 26px var(--warm-border);
}

.planner-warm-workflow-list {
  display: grid;
  gap: 16px;
}

.planner-warm-flow-card {
  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: 22px;
  background: var(--warm-glass);
  padding: 16px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 6%, transparent);
}

.planner-warm-flow-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.planner-warm-flow-title {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}

.planner-warm-flow-title strong {
  display: block;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.05;
}

.planner-warm-flow-title small {
  display: inline-flex;
  margin-top: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--flow-color, var(--accent)) 9%, #fff);
  color: color-mix(in srgb, var(--flow-color, var(--accent)) 80%, var(--ink));
  font-size: 11px;
  font-weight: 850;
}

.planner-warm-flow-card--visual .planner-warm-flow-top {
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), rgba(255,255,255,.46));
}

.planner-warm-overdue-btn {
  border-color: color-mix(in srgb, var(--accent) 22%, transparent) !important;
  color: var(--accent) !important;
  font-weight: 900 !important;
}

.planner-warm-flow-members {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}

.planner-warm-flow-members span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 11px;
  font-weight: 850;
}

.planner-warm-flow-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  color: var(--ink2);
}

.planner-warm-flow-meta span {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface2);
  font-size: 12px;
  font-weight: 850;
}

.planner-warm-flow-meta strong {
  font-size: 16px;
}

.planner-warm-flow-chain {
  display: flex;
  align-items: center;
  gap: 9px;
  overflow-x: auto;
  padding: 4px 2px 12px;
}

.planner-warm-flow-start,
.planner-warm-flow-step,
.planner-warm-flow-add {
  appearance: none;
  flex: 0 0 auto;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  cursor: pointer;
  font-family: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.planner-warm-flow-start:hover,
.planner-warm-flow-step:hover,
.planner-warm-flow-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 25px color-mix(in srgb, var(--ink) 10%, transparent);
}

.planner-warm-flow-start {
  min-width: 160px;
  min-height: 72px;
  padding: 14px;
  color: var(--accent-contrast);
  text-align: left;
  font-weight: 850;
}

.planner-warm-flow-start em {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.74);
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
}

.planner-warm-flow-step {
  min-width: 150px;
  min-height: 82px;
  padding: 12px;
  background: var(--warm-glass);
  text-align: left;
}

.planner-warm-flow-step strong,
.planner-warm-flow-step span,
.planner-warm-flow-step em {
  display: block;
}

.planner-warm-flow-step strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.planner-warm-flow-step span {
  margin-top: 7px;
  color: var(--ink2);
  font-size: 12px;
}

.planner-warm-flow-step em {
  margin-top: 6px;
  color: var(--ink3);
  font-size: 11px;
  font-style: normal;
}

.planner-warm-flow-step.is-done {
  background: var(--pos-bg);
  border-color: color-mix(in srgb, var(--positive) 38%, var(--line));
}

.planner-warm-flow-step.is-doing {
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warning) 38%, var(--line));
}

.planner-warm-flow-arrow {
  flex: 0 0 auto;
  color: var(--ink3);
  font-size: 24px;
  font-weight: 400;
}

.planner-warm-flow-add {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-style: dashed;
  background: var(--warm-glass);
  color: var(--ink2);
  font-size: 26px;
  font-weight: 500;
}

.planner-warm-flow-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
}

.planner-warm-flow-progress div {
  height: 5px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.planner-warm-flow-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.planner-warm-flow-progress small {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 750;
}

.planner-warm-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  color: var(--ink2);
  font-weight: 750;
}

@media (max-width: 900px) {
  .planner-warm-flow-top,
  .planner-warm-flow-progress {
    grid-template-columns: 1fr;
  }
  .planner-warm-flow-meta {
    justify-items: start;
    display: flex;
    align-items: center;
  }
}

/* RC5.6 Planner visual workflow cards */
.planner-warm-visual-workflow .planner-warm-section-head p {
  max-width: 620px;
}

.planner-warm-flow-card--visual {
  padding: 18px;
}

.planner-warm-visual-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.planner-warm-visual-step {
  appearance: none;
  position: relative;
  min-height: 230px;
  border: 1px solid color-mix(in srgb, var(--flow-color, var(--accent)) 18%, var(--line));
  border-radius: 26px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--flow-color, var(--accent)) 12%, #fff), rgba(255,255,255,.78));
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--ink) 9%, transparent);
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.planner-warm-visual-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px color-mix(in srgb, var(--ink) 15%, transparent);
  border-color: color-mix(in srgb, var(--flow-color, var(--accent)) 40%, var(--line));
}

.planner-warm-visual-step.has-image {
  color: var(--accent-contrast);
}

.planner-warm-visual-step.is-done {
  filter: saturate(.9);
}

.planner-warm-visual-step.is-done::after {
  content: '✓';
  position: absolute;
  inset: 12px 12px auto auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--warm-glass);
  color: var(--positive);
  font-weight: 900;
}

.planner-warm-visual-step-number,
.planner-warm-visual-step-status {
  position: absolute;
  top: 14px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--warm-glass);
  color: color-mix(in srgb, var(--flow-color, var(--accent)) 75%, var(--ink));
  font-size: 11px;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.planner-warm-visual-step-number {
  left: 14px;
}

.planner-warm-visual-step-status {
  right: 14px;
}

.planner-warm-visual-step-content {
  position: absolute;
  inset: auto 14px 14px;
  z-index: 2;
  display: grid;
  gap: 7px;
}

.planner-warm-visual-step-content strong {
  font-size: 18px;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.planner-warm-visual-step-content small {
  opacity: .78;
  font-size: 12px;
  font-weight: 750;
}

.planner-warm-visual-step--add {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1.5px dashed color-mix(in srgb, var(--flow-color, var(--accent)) 28%, var(--line));
  background: var(--warm-glass);
  color: var(--warm-ink-3);
  text-align: center;
}

.planner-warm-visual-step--add span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--surface2);
  font-size: 32px;
  font-weight: 500;
}

.planner-warm-visual-step--add strong,
.planner-warm-visual-step--add small {
  display: block;
}

.planner-warm-step-detail {
  width: min(1040px, calc(100% - 24px));
  padding: 12px;
}

.planner-warm-step-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  gap: 16px;
}

.planner-warm-step-hero {
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  background: linear-gradient(145deg, #e8ded2, #fff8f0);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.planner-warm-step-hero.is-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  color: var(--warm-ink-3);
}

.planner-warm-step-hero.is-empty span {
  font-size: 44px;
}

.planner-warm-step-hero a {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 10px 13px;
  border-radius: 999px;
  background: var(--warm-glass);
  color: var(--ink);
  font-weight: 850;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.planner-warm-step-preview-label {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px 11px;
  border-radius: 999px;
  background: var(--warm-glass);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
}

.planner-warm-pinned-groups {
  display: grid;
  gap: 14px;
}

.planner-warm-pinned-group {
  display: grid;
  gap: 9px;
}

.planner-warm-pinned-group h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
}

.planner-warm-step-detail-body {
  padding: 8px 8px 8px 0;
}

.planner-warm-step-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .planner-warm-visual-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .planner-warm-visual-step {
    min-height: 190px;
    border-radius: 22px;
  }
  .planner-warm-step-detail-layout {
    grid-template-columns: 1fr;
  }
  .planner-warm-step-hero {
    min-height: 300px;
  }
  .planner-warm-step-detail-body {
    padding: 0;
  }
}

/* RC5.8 Planner requested fixes */
.planner-warm-page--no-left {
  --planner-orange: var(--accent);
}
.planner-warm-page--no-left .planner-warm-primary {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 82%, #111 18%));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 24%, transparent);
}
.planner-warm-toolbar--tabs-only {
  justify-content: flex-start;
}
.planner-warm-week-nav strong {
  display: none !important;
}
.planner-warm-grid--no-left .planner-warm-days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(180px, 18vw, 220px);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
}
.planner-warm-grid--no-left .planner-warm-day {
  scroll-snap-align: start;
}
.planner-warm-today-btn {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 82%, #111 18%));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 20%, transparent);
}
@media (max-width: 900px) {
  .planner-warm-grid--no-left .planner-warm-days {
    grid-auto-columns: clamp(240px, 80vw, 320px);
  }
}

/* RC5.9 Planner: weather hero + single-column planner cleanup */
.planner-warm-page--no-left {
  --planner-orange: var(--accent);
}

.planner-warm-grid--single {
  grid-template-columns: minmax(0, 1fr) !important;
}

.planner-warm-grid--single .planner-warm-main {
  width: 100%;
}

.planner-warm-right {
  display: none !important;
}

.planner-warm-toolbar--tabs-only {
  justify-content: flex-start !important;
  margin-top: 16px;
}

.planner-weather-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: clamp(18px, 3vw, 34px);
  align-items: end;
  min-height: clamp(170px, 20vw, 250px);
  padding: clamp(18px, 2.5vw, 32px);
  border-radius: 28px;
  overflow: hidden;
  color: var(--accent-contrast);
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.38), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 72%, #fff 28%) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 56%, #111 44%) 100%);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--ink) 18%, transparent);
  isolation: isolate;
}

.planner-weather-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(32, 20, 13, .18), transparent 48%),
    linear-gradient(0deg, rgba(0,0,0,.16), transparent 58%);
  z-index: -1;
}

.planner-weather-hero.is-night {
  background:
    radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--accent) 26%, #fff 12%), transparent 18%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, var(--surface2)) 0%, color-mix(in srgb, var(--accent) 18%, var(--surface)) 45%, color-mix(in srgb, var(--ink) 82%, #000) 100%);
}

.planner-weather-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.planner-weather-copy .planner-warm-badge {
  background: rgba(255,255,255,.18);
  color: var(--accent-contrast);
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
}

.planner-weather-copy h1 {
  margin: 0;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .9;
  letter-spacing: -.07em;
  font-weight: 900;
}

.planner-weather-copy p {
  max-width: 560px;
  margin: 14px 0 0;
  color: rgba(255,250,244,.78);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.45;
}

.planner-weather-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.planner-weather-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  color: rgba(255,250,244,.86);
  font-weight: 800;
}

.planner-weather-stats strong {
  font-size: 20px;
  color: var(--accent-contrast);
}

.planner-weather-card {
  position: relative;
  z-index: 2;
  padding: 18px;
  border-radius: 26px;
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 20px 50px rgba(32, 20, 13, .12);
  backdrop-filter: blur(18px);
}

.planner-weather-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: rgba(255,250,244,.82);
  font-weight: 850;
}

.planner-weather-clock {
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: var(--accent-contrast);
  font-size: 12px;
  font-weight: 900;
}

.planner-weather-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.planner-weather-topline button {
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,.14);
  color: var(--accent-contrast);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.planner-weather-temp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 24px 0 8px;
}

.planner-weather-temp strong {
  font-size: clamp(52px, 7vw, 78px);
  letter-spacing: -.07em;
  line-height: .85;
}

.planner-weather-temp span {
  font-size: 42px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

.planner-weather-card p {
  margin: 0 0 16px;
  color: rgba(255,250,244,.82);
  font-weight: 750;
}

.planner-weather-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.planner-weather-metrics span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.14);
  color: rgba(255,250,244,.72);
  font-size: 11px;
  font-weight: 800;
}

.planner-weather-metrics strong {
  color: var(--accent-contrast);
  font-size: 13px;
}

.planner-weather-sky,
.planner-weather-sky span {
  position: absolute;
  pointer-events: none;
}

.planner-weather-sky {
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.planner-weather-sky .sun {
  width: 150px;
  height: 150px;
  right: 9%;
  top: 11%;
  border-radius: 999px;
  background: radial-gradient(circle, #fff5c9 0%, #ffd56a 44%, rgba(255,194,78,.0) 72%);
  filter: blur(.2px);
  animation: plannerSunFloat 9s ease-in-out infinite;
}

.planner-weather-sky .moon {
  display: none;
  width: 118px;
  height: 118px;
  right: 10%;
  top: 10%;
  border-radius: 999px;
  background: radial-gradient(circle at 34% 32%, #fff9df, #e6d5a4 58%, rgba(230,213,164,0) 72%);
  box-shadow: 0 0 54px rgba(255,236,185,.24);
  animation: plannerSunFloat 10s ease-in-out infinite;
}

.planner-weather-hero.is-night .sun { display: none; }
.planner-weather-hero.is-night .moon { display: block; }

.planner-weather-sky .cloud {
  width: 210px;
  height: 70px;
  border-radius: 999px;
  background: rgba(255,255,255,.34);
  filter: blur(1px);
  animation: plannerCloudDrift 18s linear infinite;
}

.planner-weather-sky .cloud::before,
.planner-weather-sky .cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
}

.planner-weather-sky .cloud::before {
  width: 90px;
  height: 90px;
  left: 34px;
  top: -42px;
}

.planner-weather-sky .cloud::after {
  width: 120px;
  height: 120px;
  right: 22px;
  top: -62px;
}

.planner-weather-sky .cloud-a { left: 52%; top: 42%; animation-duration: 22s; opacity: .45; }
.planner-weather-sky .cloud-b { left: 72%; top: 62%; width: 160px; height: 54px; animation-duration: 26s; opacity: .30; }

.planner-weather-sky .stars {
  display: none;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.5px);
  background-size: 96px 96px, 142px 142px;
  background-position: 18px 24px, 68px 62px;
  opacity: .42;
  animation: plannerStars 4s ease-in-out infinite alternate;
}

.planner-weather-hero.is-night .stars { display: block; }

.planner-weather-hero.is-rain .planner-weather-sky::after {
  content: '';
  position: absolute;
  inset: -60px 0 0;
  background-image: linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.36));
  background-size: 2px 32px;
  transform: rotate(12deg);
  opacity: .24;
  animation: plannerRain 650ms linear infinite;
}

@keyframes plannerSunFloat {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-8px, 10px, 0) scale(1.03); }
}

@keyframes plannerCloudDrift {
  0% { transform: translateX(60px); }
  50% { transform: translateX(-34px); }
  100% { transform: translateX(60px); }
}

@keyframes plannerStars {
  from { opacity: .28; }
  to { opacity: .54; }
}

@keyframes plannerRain {
  from { transform: translateY(-36px) rotate(12deg); }
  to { transform: translateY(36px) rotate(12deg); }
}

@media (max-width: 900px) {
  .planner-weather-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    border-radius: 28px;
  }
  .planner-weather-card {
    max-width: none;
  }
  .planner-weather-metrics {
    grid-template-columns: 1fr;
  }
}

/* RC5.10 Planner polish: smaller hero, lighter quick add, stronger calendar feel */
.planner-weather-copy h1 { font-size: clamp(38px, 5vw, 68px) !important; }
.planner-weather-copy p { margin-top: 10px !important; font-size: clamp(14px, 1.25vw, 16px) !important; }
.planner-weather-stats { margin-top: 16px !important; }
.planner-weather-card { padding: 15px !important; border-radius: 22px !important; }
.planner-weather-temp { margin: 16px 0 6px !important; }
.planner-weather-temp strong { font-size: clamp(44px, 5.6vw, 64px) !important; }
.planner-weather-sky .sun { width: 120px !important; height: 120px !important; }
.planner-warm-quickbar {
  padding: 10px !important;
  margin-bottom: 12px !important;
  border-radius: 20px !important;
  grid-template-columns: minmax(145px, .8fr) minmax(260px, 1.8fr) 145px 135px auto !important;
}
.planner-warm-quickbar strong { font-size: 12px !important; }
.planner-warm-quickbar small { display: none !important; }
.planner-warm-quickbar input,
.planner-warm-quickbar select { padding: 10px 12px !important; border-radius: 13px !important; }
.planner-warm-quickbar .planner-warm-primary { white-space: nowrap; padding: 11px 15px !important; }
.planner-warm-day { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.planner-warm-day:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--ink) 8%, transparent);
}
.planner-warm-day.is-drop-target {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 16px 34px color-mix(in srgb, var(--ink) 8%, transparent);
}
.planner-warm-event[draggable="true"] { cursor: grab; }
.planner-warm-event.is-dragging { opacity: .55; cursor: grabbing; }
@media (max-width: 900px) {
  .planner-warm-quickbar { grid-template-columns: 1fr !important; }
  .planner-weather-hero { min-height: auto !important; }
}

/* Warm OS Core polish: active content container + Planner production pass */
.content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--base);
}

.planner-warm-page--no-left {
  max-width: 1540px;
  padding: clamp(14px, 1.8vw, 28px);
}

.planner-weather-hero {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 320px) !important;
  min-height: clamp(176px, 18vw, 235px) !important;
  padding: clamp(18px, 2.2vw, 28px) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.28), transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 66%, #fff 34%) 0%, var(--accent) 45%, color-mix(in srgb, var(--accent) 56%, #111 44%) 100%) !important;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 14%, transparent) !important;
}

.planner-weather-copy h1 {
  font-size: clamp(34px, 4.4vw, 56px) !important;
  letter-spacing: 0 !important;
}

.planner-weather-copy p {
  max-width: 520px;
  color: rgba(255,250,244,.74) !important;
}

.planner-weather-stats {
  margin-top: 12px !important;
}

.planner-weather-card {
  padding: 13px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.16) !important;
}

.planner-weather-temp {
  margin: 12px 0 4px !important;
}

.planner-weather-temp strong {
  font-size: clamp(38px, 4.8vw, 54px) !important;
  letter-spacing: 0 !important;
}

.planner-weather-metrics span {
  padding: 8px !important;
}

.planner-weather-sky {
  opacity: .64;
}

.planner-weather-sky .sun {
  width: 92px !important;
  height: 92px !important;
}

.planner-weather-sky .cloud {
  width: 150px !important;
  height: 50px !important;
  opacity: .34 !important;
}

.planner-warm-toolbar--tabs-only {
  margin: 12px 0 12px !important;
}

.planner-warm-tabs {
  border-radius: 16px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 6%, transparent);
}

.planner-warm-quickbar {
  grid-template-columns: minmax(120px, .55fr) minmax(260px, 1.6fr) 136px 124px auto !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ink) 5.5%, transparent) !important;
}

.planner-warm-calendar-card {
  border-radius: 18px;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--ink) 6.5%, transparent);
}

.planner-warm-grid--no-left .planner-warm-days {
  cursor: grab;
  scrollbar-width: thin;
}

.planner-warm-grid--no-left .planner-warm-days.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
}

.planner-warm-day {
  min-height: clamp(250px, 33vh, 430px);
}

.planner-warm-empty-button {
  appearance: none;
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.planner-warm-empty-button:hover {
  color: var(--accent);
}

.planner-warm-event.no-icon {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 11px;
}

.planner-warm-event.has-icon {
  grid-template-columns: auto minmax(0, 1fr);
}

.planner-warm-event-icon {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 900;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  letter-spacing: 0;
}

.planner-warm-event strong {
  font-size: 12px;
}

.planner-warm-visual-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.planner-warm-visual-step {
  min-height: 190px;
  border-radius: 20px;
}

.planner-warm-visual-step.has-image {
  background-size: cover;
  background-position: center;
  text-shadow: 0 1px 18px rgba(0,0,0,.36);
}

.planner-warm-step-hero {
  min-height: 420px;
}

.planner-warm-day-sheet {
  width: min(620px, calc(100% - 24px));
}

.planner-warm-file-field input[type="file"] {
  cursor: pointer;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.2;
}

.planner-warm-file-field input[type="file"]::file-selector-button {
  appearance: none;
  margin-right: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 800;
  padding: 8px 12px;
  cursor: pointer;
}

.planner-warm-step-detail .planner-warm-check {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  margin-top: 2px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--ink2);
  font-weight: 850;
}

.planner-warm-step-detail .planner-warm-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

@media (max-width: 1180px) {
  .planner-warm-step-detail {
    width: min(760px, calc(100% - 20px));
    max-height: calc(100dvh - 20px);
    overflow: auto;
  }

  .planner-warm-step-detail-layout {
    grid-template-columns: minmax(220px, .82fr) minmax(300px, 1.18fr);
    gap: 14px;
  }

  .planner-warm-step-hero {
    min-height: 360px;
  }

  .planner-warm-step-detail .planner-warm-sheet-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 1180px) {
  .planner-weather-hero {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) !important;
  }

  .planner-warm-quickbar {
    grid-template-columns: minmax(0, 1.5fr) minmax(138px, 150px) minmax(182px, auto) !important;
  }

  .planner-warm-quickbar > div:first-child,
  .planner-warm-quickbar select {
    display: none;
  }

  .planner-warm-quickbar input[type="date"] {
    min-width: 138px;
    font-size: 14px;
  }

  .planner-warm-quickbar .planner-warm-primary {
    min-width: 182px;
  }
}

@media (max-width: 900px) {
  .planner-warm-page--no-left {
    padding: 12px;
  }

  .planner-weather-hero {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .planner-weather-card {
    max-width: none;
  }

  .planner-warm-quickbar {
    grid-template-columns: 1fr !important;
  }

  .planner-warm-quickbar > div:first-child,
  .planner-warm-quickbar select {
    display: block;
  }

  .planner-warm-quickbar .planner-warm-primary {
    min-width: 0;
    width: 100%;
  }

  .planner-warm-grid--no-left .planner-warm-days {
    grid-auto-columns: clamp(240px, 80vw, 320px);
    overflow-x: auto;
  }

  .planner-warm-day {
    min-height: 310px;
  }

  .planner-warm-visual-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  }

  .planner-warm-visual-step {
    min-height: 170px;
  }
}

/* Beta & feedback */
.beta-feedback-page {
  --beta-accent: var(--accent);
}

.beta-feedback-header {
  margin-bottom: 16px;
}

.beta-feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: 18px;
  align-items: start;
}

.beta-feedback-panel {
  background: var(--warm-glass);
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 7%, transparent);
  padding: 16px;
}

.beta-feedback-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.beta-feedback-panel-head h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.beta-feedback-panel-head p {
  margin: 5px 0 0;
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.45;
}

.beta-feedback-panel-head > span {
  flex: 0 0 auto;
  min-width: 38px;
  padding: 8px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--beta-accent);
  font-weight: 900;
  text-align: center;
}

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

.beta-feedback-item {
  border: 1px solid var(--warm-border);
  border-radius: 14px;
  background: var(--warm-glass);
  overflow: hidden;
}

.beta-feedback-item summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.beta-feedback-item summary::-webkit-details-marker {
  display: none;
}

.beta-feedback-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 20px;
}

.beta-feedback-item strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.beta-feedback-item small {
  display: block;
  margin-top: 3px;
  color: var(--ink3);
  font-size: 12px;
  line-height: 1.35;
}

.beta-feedback-detail {
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  padding: 13px;
  color: var(--ink2);
}

.beta-feedback-detail p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
}

.beta-feedback-note-form,
.beta-feedback-form {
  display: grid;
  gap: 10px;
}

.beta-feedback-note-form {
  margin-top: 12px;
}

.beta-feedback-page input,
.beta-feedback-page textarea {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
  border-radius: 13px;
  background: var(--warm-glass);
  color: var(--ink);
  padding: 11px 12px;
  font: inherit;
  min-width: 0;
}

.beta-feedback-page textarea {
  resize: vertical;
}

.beta-feedback-page button {
  border: 0;
  border-radius: 999px;
  background: var(--beta-accent);
  color: var(--accent-contrast);
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
  justify-self: start;
}

.beta-feedback-notes,
.beta-feedback-cards {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.beta-feedback-notes article,
.beta-feedback-card {
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 13px;
  background: var(--warm-ghost);
  padding: 11px;
}

.beta-feedback-notes article p,
.beta-feedback-card p {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.beta-feedback-notes article small,
.beta-feedback-card small {
  display: block;
  margin-top: 6px;
  color: var(--ink3);
  font-size: 11px;
}

.beta-feedback-card div {
  margin-bottom: 7px;
}

.beta-feedback-empty {
  color: var(--ink3);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .beta-feedback-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .beta-feedback-page {
    padding: 12px;
  }

  .beta-feedback-panel {
    padding: 12px;
    border-radius: 16px;
  }

  .beta-feedback-item summary {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .beta-feedback-icon {
    width: 38px;
    height: 38px;
  }
}

/* Pets Warm OS pass */
.pets-warm-page {
  --pets-accent: var(--accent);
}

.pets-warm-page .module-page-content {
  display: grid;
  gap: 16px;
}

.pets-warm-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(170px, 20vw, 250px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  align-items: center;
  gap: 24px;
  padding: clamp(18px, 2.5vw, 30px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.30), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 66%, #fff 34%) 0%, var(--accent) 46%, color-mix(in srgb, var(--accent) 56%, #111 44%) 100%);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--accent-contrast);
}

.pets-warm-hero.has-photo {
  background:
    linear-gradient(90deg, rgba(28, 18, 13, .48) 0%, rgba(28, 18, 13, .12) 52%, rgba(28, 18, 13, .52) 100%),
    var(--pet-hero-photo);
  background-size: cover;
  background-position: center;
}

.pets-warm-hero.has-photo::after {
  display: none;
}

.pets-warm-hero::after {
  content: '';
  position: absolute;
  right: 23%;
  bottom: 28px;
  width: 210px;
  height: 74px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  filter: blur(.2px);
}

.pets-warm-hero-main,
.pets-warm-hero-card {
  position: relative;
  z-index: 1;
}

.pets-warm-hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(42px, 4.7vw, 64px);
  line-height: .95;
  letter-spacing: 0;
  color: var(--accent-contrast);
}

.pets-warm-hero p {
  max-width: 590px;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}

.pets-warm-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.pets-warm-hero-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 39px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .92);
  font-weight: 800;
}

.pets-warm-hero-stats strong {
  font-size: 20px;
  color: var(--accent-contrast);
}

.pets-warm-hero-stats .is-warning {
  background: rgba(255, 186, 87, .22);
}

.pets-warm-hero-stats .is-danger {
  background: rgba(255, 255, 255, .24);
}

.pets-warm-hero-card {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 22px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  backdrop-filter: blur(12px);
}

.pets-warm-hero-avatar {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, .2);
  font-size: 34px;
}

.pets-warm-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pets-warm-hero-card strong {
  display: block;
  color: var(--accent-contrast);
  font-size: 19px;
  line-height: 1.15;
}

.pets-warm-card-kicker {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .68);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pets-warm-hero-card p {
  margin-top: 5px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.35;
}

.pets-warm-hero-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.pets-warm-hero-actions .pet-action-btn {
  border-color: var(--pets-accent);
  background: var(--pets-accent);
  color: var(--accent-contrast);
}

.pets-warm-hero-actions .pet-action-btn--primary {
  background: var(--pets-accent);
  border-color: var(--pets-accent);
  color: var(--accent-contrast);
}

.pets-warm-page .pets-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.pets-warm-page .pets-sidebar,
.pets-warm-page .pets-profile-strip,
.pets-warm-page .pets-panel,
.pets-warm-page .pet-profile-bar,
.pets-warm-page .pet-mini-stats {
  border: 1px solid var(--warm-border);
  background: var(--warm-glass);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 6.5%, transparent);
}

.pets-warm-page .pets-sidebar {
  position: sticky;
  top: 14px;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
}

.pets-warm-page .pets-profile-strip {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
}

.pets-warm-page .pets-sidebar-title {
  margin: 0 0 2px;
  padding: 0 3px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
}

.pets-warm-page .pets-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px;
}

.pets-warm-page .pet-sb-item {
  min-height: 46px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
}

.pets-warm-page .pet-sb-item.is-active {
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.pets-warm-page .pet-sb-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.pets-warm-page .pet-sb-name {
  font-size: 13px;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pets-warm-page .pet-sb-badge {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.pets-warm-page .pet-sb-add {
  min-height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--pets-accent);
  font-weight: 900;
  justify-self: start;
  padding: 0 14px;
}

.pets-warm-page .pets-detail {
  gap: 12px;
}

.pets-warm-page .pet-profile-bar {
  padding: 14px;
  border-radius: 18px;
  border-bottom: 1px solid var(--warm-border);
}

.pets-warm-page .pet-profile-avatar {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  font-size: 26px;
}

.pets-warm-page .pet-profile-name {
  font-family: inherit;
  font-size: 22px;
  letter-spacing: 0;
}

.pets-warm-page .pet-tag {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--warm-border);
  font-size: 11px;
  font-weight: 800;
}

.pets-warm-page .pet-action-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--warm-border);
  background: var(--warm-glass);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
}

.pets-warm-page .pet-action-btn--primary {
  border-color: var(--pets-accent);
  background: var(--pets-accent);
  color: var(--accent-contrast);
}

.pets-warm-page .btn,
.pets-warm-page .btn-sm,
.pets-warm-page .btn-outline,
.pets-warm-page .btn-primary {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 9px 14px;
  border: 1px solid var(--warm-border);
  background: var(--warm-glass);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: none;
}

.pets-warm-page .btn-primary {
  border-color: var(--pets-accent);
  background: var(--pets-accent);
  color: var(--accent-contrast);
}

.pets-warm-page .pet-mini-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  border-bottom: 1px solid var(--warm-border);
}

.pets-warm-page .pet-alerts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.pets-warm-page .pet-alert {
  min-height: 72px;
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--ink) 11%, transparent);
  background: var(--warm-glass);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 5.5%, transparent);
}

.pets-warm-page .pet-alert strong {
  font-size: 14px;
  font-weight: 900;
}

.pets-warm-page .pet-mini-stat {
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 14px;
  background: var(--warm-ghost);
}

.pets-warm-page .pet-mini-stat strong {
  font-size: 26px;
}

.pets-warm-page .pet-mini-stat span {
  font-size: 11px;
  letter-spacing: 0;
}

.pets-warm-page .pets-panel {
  overflow: hidden;
  border-radius: 18px;
}

.pets-warm-page .pet-tab-bar {
  gap: 8px;
  padding: 14px 16px 0;
  border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--warm-glass);
}

.pets-warm-page .pet-tab-chip {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--warm-ghost);
  font-weight: 850;
}

.pets-warm-page .pet-tab-chip.is-active {
  background: var(--pets-accent);
  border-color: var(--pets-accent);
  color: var(--accent-contrast);
}

.pets-warm-page .pets-panel-body {
  padding: 18px 20px 20px;
}

.pets-warm-page .pets-panel-head {
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.pets-warm-page .pets-panel-head h3 {
  font-family: inherit;
  font-size: 20px;
  letter-spacing: 0;
}

.pets-warm-page .pets-panel-head p {
  font-size: 14px;
}

.pets-warm-page .pets-filters .btn {
  border-radius: 999px;
}

.pets-warm-page .pet-timeline {
  padding: 0;
  gap: 10px;
}

.pets-warm-page .pet-timeline::before,
.pets-warm-page .pet-tl-dot {
  display: none;
}

.pets-warm-page .pet-tl-entry,
.pets-warm-page .pet-doc-card,
.pets-warm-page .pet-vet-row,
.pets-warm-page .pet-notes,
.pets-warm-page .pet-doc-empty {
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 14px;
  background: var(--warm-glass);
}

.pets-warm-page .pet-tl-entry {
  display: block;
  padding: 16px 18px;
  border-left-width: 4px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 4.5%, transparent);
}

.pets-warm-page .pet-tl-title {
  font-size: 14px;
  font-weight: 900;
}

.pets-warm-page .pet-days-badge {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
}

.pets-warm-page .pet-tl-meta span {
  font-size: 12px;
  line-height: 1.35;
}

.pets-warm-page .pet-tl-actions {
  gap: 8px;
  margin-top: 12px;
}

.pets-warm-page .pet-tl-actions .pet-action-btn,
.pets-warm-page .pet-doc-card-actions .pet-action-btn,
.pets-warm-page .pet-vet-actions .btn {
  min-height: 36px;
  padding: 8px 13px;
  font-size: 12px;
}

.pets-warm-page .pets-linked-contacts {
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
  border-radius: 16px;
  background: var(--warm-glass);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ink) 4.5%, transparent);
}

.pets-warm-page .pet-doc-card {
  overflow: hidden;
}

.pets-warm-page .pet-doc-card-thumb {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.pets-warm-page .pet-vet-row {
  padding: 12px;
}

.pets-warm-page .pet-vet-icon {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.pets-warm-page .pet-notes {
  padding: 14px;
}

.pets-warm-page .pets-form-card {
  width: min(780px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  border-radius: 22px;
  background: var(--warm-glass);
  box-shadow: 0 26px 80px color-mix(in srgb, var(--ink) 22%, transparent);
}

.pets-warm-page .pets-form-card .planner-qm-header {
  flex: 0 0 auto;
  padding: 20px 24px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--warm-glass);
}

.pets-warm-page .pets-form-card .planner-qm-kicker {
  color: var(--pets-accent);
  font-weight: 900;
  letter-spacing: 0;
}

.pets-warm-page .pets-form-card .planner-qm-title {
  margin: 0;
  font-family: inherit;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0;
}

.pets-warm-page .pets-form-card .planner-qm-close {
  border-radius: 999px;
  background: var(--warm-border);
}

.pets-warm-page .pets-form-body {
  flex: 1 1 auto;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 24px;
}

.pets-warm-page .pets-form-body .is-wide {
  grid-column: 1 / -1;
}

.pets-warm-page .pets-form-card .planner-qm-field {
  gap: 7px;
}

.pets-warm-page .pets-form-card .planner-qm-label {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}

.pets-warm-page .pets-form-card .planner-qm-input,
.pets-warm-page .pets-form-card .planner-qm-title-input {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--warm-border);
  border-radius: 13px;
  background: var(--warm-card);
  font-size: 14px;
}

.pets-warm-page .pets-form-card .planner-qm-input:focus,
.pets-warm-page .pets-form-card .planner-qm-title-input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
}

.pets-warm-page .pets-form-card .planner-qm-textarea {
  min-height: 112px;
}

.pets-warm-page .pet-file-field input[type="file"] {
  cursor: pointer;
  color: var(--ink2);
}

.pets-warm-page .pet-file-field input[type="file"]::file-selector-button {
  appearance: none;
  margin-right: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--pets-accent);
  font-weight: 900;
  padding: 8px 12px;
  cursor: pointer;
}

.pets-warm-page .pets-form-card .planner-qm-footer {
  flex: 0 0 auto;
  padding: 14px 24px 20px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--warm-glass);
}

.pets-warm-page .pets-form-card .planner-qm-btn-ghost,
.pets-warm-page .pets-form-card .planner-qm-btn-primary {
  min-height: 40px;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
  text-decoration: none;
}

.pets-warm-page .pets-form-card .planner-qm-btn-ghost {
  border: 1px solid var(--warm-border);
  color: var(--ink2);
}

.pets-warm-page .pets-form-card .planner-qm-btn-primary {
  background: var(--pets-accent);
}

.pets-warm-page .pets-module-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 4%, transparent);
}

.pets-module-header-main {
  min-width: 0;
}

.pets-module-header h1 {
  margin: 1px 0 3px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
}

.pets-module-header p {
  max-width: 720px;
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.35;
}

.pets-module-header-meta,
.pets-module-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pets-module-header-meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 800;
}

.pets-module-header-meta strong {
  color: var(--ink);
  font-size: 15px;
}

.pets-warm-page .pets-compact-hero {
  min-height: 128px;
  padding: 24px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--ink) 96%, transparent), color-mix(in srgb, var(--ink) 82%, var(--accent) 18%));
  color: var(--accent-contrast);
}

.pets-warm-page .pets-compact-hero .module-hero-title,
.pets-warm-page .pets-compact-hero h1 {
  font-family: var(--serif);
  color: var(--accent-contrast);
  font-size: clamp(34px, 5vw, 56px);
}

.pets-warm-page .pets-compact-hero .module-hero-subtitle,
.pets-warm-page .pets-compact-hero p {
  max-width: 620px;
  color: color-mix(in srgb, var(--accent-contrast) 78%, transparent);
}

.pets-hero-brief {
  display: grid;
  gap: 10px;
  justify-items: end;
  color: var(--accent-contrast);
  text-align: right;
}

.pets-hero-brief-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pets-hero-brief span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-contrast) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-contrast) 10%, transparent);
  font-size: 12px;
  font-weight: 850;
}

.pets-hero-brief strong {
  font-size: 18px;
}

.pets-hero-brief small {
  max-width: 340px;
  color: color-mix(in srgb, var(--accent-contrast) 74%, transparent);
  font-size: 12px;
  line-height: 1.35;
}

.pets-warm-page .pets-detail {
  gap: 14px;
}

.pets-command-center {
  display: grid;
  grid-template-columns: minmax(136px, 168px) minmax(0, 1.4fr) minmax(240px, .72fr);
  gap: 12px;
  align-items: stretch;
}

.pets-warm-page .pets-profile-switcher,
.pets-warm-page .pets-overview-profile-card,
.pets-warm-page .pet-status-cards,
.pets-warm-page .pets-quick-actions {
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 5%, transparent);
}

.pets-warm-page .pets-panel,
.pets-warm-page .section-card,
.pets-warm-page .pet-sharing-card {
  border-color: color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--surface);
}

.pets-warm-page .pets-profile-switcher {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.pets-warm-page .pets-profile-switcher.is-single {
  min-height: auto;
}

.pets-warm-page .pets-profile-switcher.is-single .pets-switcher-head span {
  display: none;
}

.pets-switcher-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pet-switcher-add {
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 18px;
  font-weight: 850;
  cursor: pointer;
}

.pets-warm-page .pets-profile-switcher .pets-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.pets-warm-page .pets-profile-switcher.is-single .pets-list {
  gap: 0;
}

.pets-warm-page .pets-profile-switcher.is-single .pet-sb-item {
  min-height: 40px;
  padding: 6px;
}

.pets-warm-page .pets-overview-profile-card {
  min-height: 202px;
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.pets-warm-page .pets-overview-profile-card .pet-profile-avatar {
  width: 138px;
  height: 138px;
  flex-basis: auto;
  border-radius: 26px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface2));
  color: var(--accent);
  font-size: 62px;
}

.pet-profile-kicker {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 850;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-name {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

.pets-warm-page .pets-overview-profile-card .pet-tag,
.pets-warm-page .pet-tab-chip {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: var(--ink2);
}

.pets-warm-page .pet-profile-detail {
  border-color: color-mix(in srgb, var(--ink) 9%, transparent);
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

.pet-owner-line,
.pet-about-copy {
  margin: 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.5;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-actions {
  width: min(180px, 100%);
  display: grid;
  gap: 8px;
}

.pets-warm-page .pets-overview-profile-card .btn {
  width: 100%;
}

.pets-warm-page .pet-status-cards {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.pets-warm-page .pet-status-card {
  appearance: none;
  min-height: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  width: 100%;
  padding: 12px;
  border-color: color-mix(in srgb, var(--ink) 8%, transparent);
  background: var(--surface);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.pets-warm-page .pet-status-icon {
  grid-row: 1 / 4;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
}

.pets-warm-page .pet-status-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  transform: translateY(-1px);
}

.pets-warm-page .pet-status-card strong {
  font-size: 22px;
  line-height: 1;
}

.pets-warm-page .pet-status-card span {
  margin: 0;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 850;
}

.pets-warm-page .pet-status-card small {
  min-height: 0;
  margin: 2px 0 0;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.3;
}

.pets-warm-page .pets-quick-actions {
  display: block;
  padding: 10px;
}

.pets-warm-page .pet-tab-bar {
  background: var(--surface);
}

.pets-warm-page .pet-tab-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.pets-quick-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.pets-overview-grid--secondary {
  margin-top: 12px;
}

.pet-compact-list {
  display: grid;
  gap: 8px;
}

.pet-compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent);
  border-radius: 12px;
  background: var(--surface2);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.pet-compact-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-compact-row strong,
.pet-compact-row small {
  color: var(--ink2);
  font-size: 12px;
}

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

.pets-warm-page .pets-profile-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 16px;
}

.pets-warm-page .pets-profile-switcher .pets-switcher-head {
  flex: 0 0 auto;
}

.pets-warm-page .pets-profile-switcher .pets-list {
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.pets-warm-page .pets-profile-switcher .pet-sb-item {
  width: auto;
  min-width: 150px;
  flex: 0 0 auto;
}

.pets-command-center {
  grid-template-columns: minmax(0, 1.08fr) minmax(420px, .72fr);
  gap: 14px;
}

.pets-warm-page .pets-overview-profile-card {
  min-height: 224px;
  grid-template-columns: 210px minmax(0, 1fr) 156px;
  gap: 22px;
  padding: 0 20px 0 0;
  overflow: hidden;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-avatar {
  width: 210px;
  height: 224px;
  border-radius: 16px 0 0 16px;
  font-size: 72px;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-avatar img {
  object-fit: cover;
  object-position: center 42%;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-main {
  padding: 20px 0;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-name {
  font-size: clamp(36px, 4.6vw, 58px);
}

.pets-warm-page .pets-overview-profile-card .pet-profile-tags {
  gap: 8px;
  margin-top: 14px;
}

.pets-warm-page .pets-overview-profile-card .pet-tag {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.pets-warm-page .pet-status-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  gap: 10px;
  padding: 14px;
}

.pets-warm-page .pet-status-card {
  align-content: start;
  grid-template-columns: 1fr;
  gap: 6px;
  min-height: 126px;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
}

.pets-warm-page .pet-status-icon {
  grid-row: auto;
  width: 30px;
  height: 30px;
}

.pets-warm-page .pet-status-card strong {
  color: var(--ink);
  font-size: 36px;
  font-weight: 900;
}

.pets-warm-page .pet-status-card.is-danger strong,
.pets-warm-page .pet-status-card.is-warning strong {
  color: var(--accent);
}

.pets-warm-page .pet-status-card span {
  color: var(--ink);
  font-size: 12px;
  text-transform: none;
}

.pets-overview-grid--main {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  align-items: stretch;
}

.pets-overview-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr);
  gap: 18px;
}

.pet-note-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
}

.pet-note-card strong {
  color: var(--ink);
  font-size: 15px;
}

.pet-note-card .btn {
  justify-self: start;
}

.pets-warm-page .pets-overview-grid--main .pets-quick-actions {
  padding: 16px;
}

.pets-warm-page .pets-overview-grid--main .pets-quick-action-grid {
  grid-template-columns: 1fr;
}

.pets-warm-page .pets-overview-grid--main .pets-quick-action-grid .btn {
  min-height: 48px;
  justify-content: flex-start;
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
}

.pets-warm-page .pets-module-header .btn,
.pets-warm-page .pets-overview-profile-card .btn,
.pets-warm-page .pets-quick-actions .btn {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

.pets-warm-page .pets-module-header {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 4px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.pets-module-header h1 {
  margin: 0 0 5px;
  font-family: var(--sans);
  font-size: clamp(30px, 3.2vw, 38px);
  font-weight: 900;
}

.pets-module-header p {
  font-size: 14px;
  line-height: 1.4;
}

.pets-command-center {
  grid-template-columns: minmax(0, 1.2fr) minmax(410px, .8fr);
  gap: 16px;
}

.pets-warm-page .pets-overview-profile-card {
  min-height: 218px;
  grid-template-columns: 238px minmax(0, 1fr);
  gap: 28px;
  padding: 0 28px 0 0;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-avatar {
  width: 238px;
  height: 218px;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-main {
  min-width: 0;
  padding: 26px 0;
}

.pet-profile-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-name {
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: 0;
}

.pet-profile-species {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.pet-breed-line {
  margin: 7px 0 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.4;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-tags {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.pets-warm-page .pets-overview-profile-card .pet-tag {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 400;
}

.pet-tag-icon {
  grid-row: 1 / 3;
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
}

.pets-warm-page .pets-overview-profile-card .pet-tag strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pets-warm-page .pets-overview-profile-card .pet-tag small {
  min-width: 0;
  overflow: hidden;
  color: var(--ink2);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pets-warm-page .pet-status-cards {
  gap: 12px;
  padding: 18px;
}

.pets-warm-page .pet-status-card {
  gap: 8px;
  min-height: 178px;
  padding: 18px;
}

.pets-warm-page .pet-status-card strong {
  font-size: 38px;
}

.pets-warm-page .pet-status-card .pet-status-label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  text-transform: none;
}

.pets-warm-page .pet-status-card small {
  min-height: 34px;
}

.pets-warm-page .pet-status-card em {
  align-self: end;
  display: inline-flex;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 10px;
  color: var(--ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.pets-warm-page .pet-status-card .pet-status-icon {
  color: var(--accent);
}

.pets-warm-page .pets-overview-grid--main .pets-quick-actions {
  padding: 20px 20px 14px;
}

.pets-warm-page .pets-overview-grid--main .pets-quick-action-grid {
  gap: 0;
}

.pet-quick-action-row {
  appearance: none;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.pet-quick-action-row:last-child {
  border-bottom: 0;
}

.pet-quick-action-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 900;
}

.pet-quick-action-row strong,
.pet-quick-action-row small {
  display: block;
}

.pet-quick-action-row strong {
  font-size: 14px;
  font-weight: 850;
}

.pet-quick-action-row small {
  margin-top: 3px;
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}

.pet-quick-action-row em {
  color: var(--ink2);
  font-size: 24px;
  font-style: normal;
  line-height: 1;
}

.pet-emergency-section {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
}

.pet-emergency-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.pet-emergency-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  font-weight: 900;
}

.pet-emergency-card h3,
.pet-emergency-card p {
  margin: 0;
}

.pet-emergency-card h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.pet-emergency-card p {
  margin-top: 3px;
  color: var(--ink2);
  font-size: 12px;
}

.pet-emergency-contact {
  display: grid;
  gap: 3px;
  min-width: 170px;
}

.pet-emergency-contact strong {
  color: var(--ink);
  font-size: 15px;
}

.pet-emergency-contact span {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.pets-warm-page .pets-overview-profile-card {
  min-height: 220px;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 26px;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-avatar {
  width: 220px;
  height: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 16px 0 0 16px;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pet-photo-x, 50%) var(--pet-photo-y, 38%);
  transform: scale(var(--pet-photo-zoom, 1));
  transform-origin: var(--pet-photo-x, 50%) var(--pet-photo-y, 38%);
}

.pets-warm-page .pet-status-cards {
  padding: 14px;
}

.pets-warm-page .pet-status-card {
  gap: 6px;
  min-height: 150px;
  padding: 14px;
}

.pets-warm-page .pet-status-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
}

.pets-warm-page .pet-status-card strong {
  font-size: 34px;
}

.pets-warm-page .pet-status-card small {
  min-height: 26px;
  font-size: 11px;
}

.pets-warm-page .pet-status-card em {
  padding: 7px 10px;
}

.pet-emergency-card {
  grid-template-columns: 44px minmax(0, 1fr) minmax(160px, auto) auto;
}

.pet-emergency-card .btn {
  justify-self: end;
  white-space: nowrap;
}

.pets-warm-page .pets-overview-profile-card .pet-tag strong {
  white-space: normal;
  word-break: break-word;
}

.pets-warm-page .pets-overview-profile-card {
  align-items: stretch;
  min-height: 176px;
  grid-template-columns: minmax(178px, 23%) minmax(0, 1fr);
  gap: 20px;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-avatar {
  align-self: stretch;
  width: 100%;
  height: auto;
  min-height: 100%;
  aspect-ratio: auto;
  position: relative;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-main {
  padding: 18px 0;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-name {
  font-size: clamp(28px, 3.1vw, 38px);
}

.pet-breed-line {
  margin-top: 4px;
  font-size: 13px;
}

.pets-warm-page .pets-overview-profile-card .pet-profile-tags {
  gap: 8px;
  margin-top: 18px;
}

.pets-warm-page .pets-overview-profile-card .pet-tag {
  min-height: 46px;
  padding: 7px 10px;
}

.pet-owner-line {
  margin-top: 10px;
  font-size: 13px;
}

.pets-warm-page .pet-status-card {
  min-height: 136px;
}

.pet-photo-edit {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--surface) 80%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--accent);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 14%, transparent);
  cursor: pointer;
}

.pet-photo-edit:hover {
  transform: translateY(-1px);
}

.pet-photo-crop-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 14px;
  background: var(--surface2);
}

.pet-photo-crop-fields .pets-panel-head {
  grid-column: 1 / -1;
  margin: 0;
}

.pet-photo-crop-fields input[type='range'] {
  padding: 0;
  accent-color: var(--accent);
}

.pet-photo-crop-editor {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--ink) 8%, transparent);
}

.pet-crop-zoom-pill {
  align-self: start;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  font-size: 12px;
  font-weight: 800;
}

.pet-crop-stage {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.pet-crop-frame {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 4%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--ink) 4%, transparent) 75%),
    linear-gradient(45deg, color-mix(in srgb, var(--ink) 4%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--ink) 4%, transparent) 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.pet-crop-frame:active {
  cursor: grabbing;
}

.pet-crop-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--pet-crop-x, 50%) var(--pet-crop-y, 38%);
  transform: scale(var(--pet-crop-zoom, 1));
  transform-origin: var(--pet-crop-x, 50%) var(--pet-crop-y, 38%);
  transition: transform 120ms ease, object-position 120ms ease;
  pointer-events: none;
}

.pet-crop-placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--ink2);
  text-align: center;
  font-weight: 800;
}

.pet-crop-help {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  text-align: center;
}

.pet-crop-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.pet-crop-file-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.pet-crop-file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.pet-photo-crop-advanced {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.pet-photo-crop-advanced summary {
  color: var(--ink2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  list-style-position: inside;
}

.pet-photo-crop-advanced[open] summary {
  margin-bottom: 10px;
  color: var(--ink);
}

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

.pet-care-grid .section-card {
  padding: 18px;
}

.pet-care-grid .section-card:first-child,
.pet-care-grid .section-card:nth-child(4),
.pet-care-grid .section-card:nth-child(5) {
  grid-column: 1 / -1;
}

.pet-care-instruction-card {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
}

.pet-care-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.pet-care-summary-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
}

.pet-care-summary-item > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.pet-care-summary-item small,
.pet-care-line span {
  display: block;
  color: var(--ink2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pet-care-summary-item strong {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pet-care-summary-item.is-empty strong {
  color: var(--ink2);
  font-weight: 700;
}

.pet-care-food {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  gap: 16px;
  align-items: start;
}

.pet-care-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pet-care-line {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
}

.pet-care-line strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap;
}

.pet-care-line.is-strong strong {
  font-weight: 600;
}

.pet-care-empty {
  display: grid;
  gap: 10px;
  align-content: center;
  min-height: 96px;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.pet-care-empty p {
  margin: 0;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.4;
}

.pet-care-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 14px;
  object-fit: cover;
}

.pet-care-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pet-care-checkitem {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 12px;
  background: var(--surface);
}

.pet-care-checkitem > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-weight: 900;
}

.pet-care-checkitem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-care-checkitem strong,
.pet-care-checkitem small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pet-care-checkitem small {
  margin-top: 3px;
  color: var(--ink2);
  font-size: 12px;
}

.pet-existing-pages {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

.pets-booklet-viewer {
  width: min(980px, calc(100vw - 28px));
}

.pets-booklet-pages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  max-height: min(70dvh, 720px);
  overflow: auto;
  padding: 18px;
}

.pets-booklet-page {
  margin: 0;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-radius: 16px;
  background: var(--surface);
}

.pets-booklet-page img {
  width: 100%;
  max-height: 560px;
  border-radius: 12px;
  object-fit: contain;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.pets-booklet-page figcaption {
  margin-top: 8px;
  color: var(--ink2);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 1180px) {
  .pets-warm-page .pets-module-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .pets-module-header-meta,
  .pets-module-header-actions {
    justify-content: flex-start;
  }

  .pets-command-center {
    grid-template-columns: 1fr;
  }

  .pets-warm-page .pet-status-cards {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pets-overview-grid--main,
  .pets-overview-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .pets-warm-page .pets-compact-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 20px;
  }

  .pets-hero-brief {
    justify-items: start;
    text-align: left;
  }

  .pets-hero-brief-stats {
    justify-content: flex-start;
  }

  .pets-command-center {
    grid-template-columns: 1fr;
  }

  .pets-warm-page .pets-overview-profile-card {
    grid-template-columns: 144px minmax(0, 1fr);
    min-height: 0;
    padding: 0 16px 0 0;
    align-items: start;
  }

  .pets-warm-page .pets-overview-profile-card .pet-profile-avatar {
    width: 144px;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 16px 0 0 16px;
    font-size: 52px;
  }

  .pets-warm-page .pets-overview-profile-card .pet-profile-main {
    padding: 16px 0;
  }

  .pets-warm-page .pets-overview-profile-card .pet-profile-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
  }

  .pets-warm-page .pets-overview-profile-card .pet-profile-actions {
    grid-column: 1 / -1;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pets-warm-page .pets-profile-switcher .pets-list {
    display: flex;
  }

  .pets-warm-page .pets-quick-actions,
  .pet-sharing-grid {
    grid-template-columns: 1fr;
  }

  .pets-warm-page .pets-quick-actions {
    display: grid;
  }

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

  .pets-quick-action-grid .btn {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .pets-warm-page {
    padding: 12px;
  }

  .pets-warm-page .pets-module-header {
    padding: 12px;
    border-radius: 16px;
  }

  .pets-module-header h1 {
    font-size: 32px;
  }

  .pets-warm-hero-card,
  .pets-warm-page .pet-profile-bar,
  .pets-warm-page .pets-panel-head {
    align-items: stretch;
  }

  .pets-warm-page .pet-mini-stats {
    grid-template-columns: 1fr;
  }

  .pets-overview-grid,
  .pets-vet-contact-grid {
    grid-template-columns: 1fr;
  }

  .pet-vet-clinic-card,
  .pet-contact-card {
    grid-template-columns: 1fr;
  }

  .pet-contact-actions,
  .pet-vet-actions {
    justify-content: stretch;
  }

  .pet-contact-actions .btn,
  .pet-vet-actions .btn {
    flex: 1 1 auto;
  }

  .pets-warm-page .pet-profile-main {
    display: grid;
  }

  .pets-warm-page .pets-overview-profile-card {
    grid-template-columns: 1fr;
    padding: 0 0 16px;
  }

  .pets-warm-page .pets-overview-profile-card .pet-profile-avatar {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 18px 18px 0 0;
  }

  .pets-warm-page .pets-overview-profile-card .pet-profile-main,
  .pets-warm-page .pets-overview-profile-card .pet-profile-actions {
    padding-inline: 16px;
  }

  .pets-warm-page .pet-status-cards {
    grid-template-columns: 1fr;
  }

  .pets-warm-page .pets-overview-profile-card .pet-profile-actions,
  .pets-warm-page .pet-tl-actions,
  .pets-warm-page .pet-doc-card-actions {
    width: 100%;
  }

  .pets-warm-page .pets-overview-profile-card .pet-profile-actions {
    grid-template-columns: 1fr;
  }

  .pets-warm-page .pets-overview-profile-card .pet-profile-tags,
  .pet-emergency-card {
    grid-template-columns: 1fr;
  }

  .pet-emergency-contact {
    min-width: 0;
  }

  .pet-emergency-card .btn {
    justify-self: stretch;
  }

  .pet-care-grid,
  .pet-care-food,
  .pet-care-summary,
  .pet-care-checklist,
  .pet-photo-crop-fields {
    grid-template-columns: 1fr;
  }

  .pet-photo-crop-editor {
    padding: 12px;
    border-radius: 18px;
  }

  .pet-crop-frame {
    width: min(100%, 300px);
    border-radius: 20px;
  }

  .pet-crop-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pet-care-grid .section-card {
    grid-column: 1 / -1;
  }

  .pets-quick-action-grid {
    grid-template-columns: 1fr;
  }

  .pet-compact-row {
    grid-template-columns: 1fr;
  }

  .pets-warm-page .pet-action-btn {
    justify-content: center;
    text-align: center;
  }

  .pets-warm-page .pets-form-card {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .pets-warm-page .pets-form-body {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .pets-warm-page .pets-form-card .planner-qm-header,
  .pets-warm-page .pets-form-card .planner-qm-footer {
    padding-left: 14px;
    padding-right: 14px;
  }

  .pets-warm-page .pets-form-card .planner-qm-footer {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Medical Warm OS pass */
.medical-warm-page {
  --medical-accent: var(--accent);
}

.medical-warm-page .module-page-content {
  display: grid;
  gap: 16px;
}

.medical-warm-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(170px, 20vw, 250px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 380px);
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  padding: clamp(18px, 2.5vw, 32px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.30), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 66%, #fff 34%) 0%, var(--accent) 46%, color-mix(in srgb, var(--accent) 56%, #111 44%) 100%);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 14%, transparent);
  color: var(--accent-contrast);
  isolation: isolate;
}

.medical-warm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(32, 20, 13, .16), transparent 48%),
    linear-gradient(0deg, rgba(0,0,0,.14), transparent 58%);
  z-index: -1;
}

.medical-warm-hero::after {
  content: '';
  position: absolute;
  right: 22%;
  bottom: 28px;
  width: 220px;
  height: 74px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.medical-warm-hero-main,
.medical-warm-hero-card {
  position: relative;
  z-index: 1;
}

.medical-warm-hero h1 {
  margin: 10px 0 8px;
  color: var(--accent-contrast);
  font-family: inherit;
  font-size: clamp(42px, 4.7vw, 64px);
  line-height: .95;
  letter-spacing: 0;
}

.medical-warm-hero p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}

.medical-warm-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.medical-warm-hero-stats span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 39px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .92);
  font-weight: 800;
}

.medical-warm-hero-stats strong {
  color: var(--accent-contrast);
  font-size: 20px;
}

.medical-warm-hero-card {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 26px;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 20px 50px rgba(32, 20, 13, .12);
  backdrop-filter: blur(18px);
}

.medical-warm-hero-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .18);
  color: var(--accent-contrast);
  font-size: 34px;
  font-weight: 900;
}

.medical-warm-hero-card small {
  display: block;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.medical-warm-hero-card strong {
  display: block;
  color: var(--accent-contrast);
  font-size: 19px;
  line-height: 1.15;
}

.medical-warm-hero-card p {
  margin-top: 5px;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  line-height: 1.35;
}

.medical-warm-hero-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.medical-warm-hero-actions .btn {
  border-color: var(--medical-accent);
  background: var(--medical-accent);
  color: var(--accent-contrast);
  border-radius: 999px;
}

.medical-warm-page .health-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.medical-warm-page .health-rail,
.medical-warm-page .health-content .module-header,
.medical-warm-page .medical-panel,
.medical-warm-page .health-record-card,
.medical-warm-page .medical-table,
.medical-warm-page .medical-person-strip {
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  background: var(--warm-glass);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 6.5%, transparent);
}

.medical-warm-page .health-rail {
  position: static;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.medical-warm-page .medical-person-strip,
.medical-warm-page .medical-person-card,
.medical-warm-page .medical-person-strip-head {
  display: none;
}

.medical-warm-page .medical-person-strip {
  display: grid;
  gap: 10px;
  padding: 12px;
  box-shadow: none;
}

.medical-person-strip-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.medical-person-strip-head > span,
.medical-person-strip-head label span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.medical-person-strip-head label {
  display: grid;
  gap: 5px;
}

.medical-person-strip-head select {
  min-height: 36px;
  border: 1px solid var(--warm-border);
  border-radius: 12px;
  background: var(--warm-glass);
}

.medical-person-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.medical-person-card {
  min-height: 56px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--warm-ghost);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.medical-person-card strong {
  font-size: 14px;
  font-weight: 900;
}

.medical-person-card span {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 700;
}

.medical-person-card.is-active {
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--medical-accent);
}

.medical-warm-page .health-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 4px;
}

.medical-warm-page .health-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid var(--warm-border);
  border-radius: 999px;
  background: var(--warm-ghost);
  color: var(--ink2);
  font-weight: 850;
  white-space: nowrap;
}

.medical-warm-page .health-tabs button.is-active {
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--medical-accent);
  box-shadow: inset 0 -2px 0 var(--medical-accent);
}

.medical-warm-page .health-content {
  display: grid;
  gap: 14px;
}

.medical-warm-page .health-content .module-header,
.medical-warm-page .medical-panel {
  padding: 18px 20px;
}

.medical-warm-page .health-content .module-header .page-title,
.medical-warm-page .medical-panel h2,
.medical-warm-page .medical-modal-panel h2 {
  font-family: inherit;
  letter-spacing: 0;
}


.medical-warm-page .health-record-card {
  overflow: hidden;
}

.medical-warm-page .health-record-year,
.medical-warm-page .health-calendar-date {
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--medical-accent);
}

.medical-warm-page .medical-timeline,
.medical-warm-page .health-card-stack {
  display: grid;
  gap: 10px;
}

.medical-warm-page .health-calendar-event,
.medical-warm-page .health-record-card {
  display: grid;
  grid-template-columns: minmax(108px, 140px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  background: var(--warm-glass);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 5.5%, transparent);
}

.medical-warm-page .health-calendar-event.is-late {
  border-color: color-mix(in srgb, var(--danger) 22%, transparent);
  background: var(--warm-glass);
}

.medical-warm-page .health-calendar-date {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px;
  text-align: left;
}

.medical-warm-page .health-calendar-date strong {
  color: var(--medical-accent);
  font-size: 15px;
  font-weight: 900;
}

.medical-warm-page .health-calendar-date span {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 750;
}

.medical-warm-page .health-record-main {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
}

.medical-warm-page .health-record-main p {
  margin: 0;
  color: var(--ink3);
  font-size: 12px;
  font-weight: 850;
}

.medical-warm-page .health-record-main h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0;
}

.medical-warm-page .health-record-main span {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.medical-warm-page .health-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.medical-warm-page .health-detail-grid,
.medical-warm-page .health-stack-grid {
  display: grid;
  gap: 10px;
}

.medical-warm-page .health-detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.medical-warm-page .health-fact-card,
.medical-warm-page .health-stack-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 14px;
  background: var(--warm-ghost);
}

.medical-warm-page .health-fact-card span,
.medical-warm-page .health-stack-item span {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.medical-warm-page .health-fact-card strong,
.medical-warm-page .health-stack-item strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.medical-warm-page .medical-panel-actions {
  margin: -2px 0 12px;
}

.medical-warm-page .health-inline-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--warm-border);
  border-radius: 14px;
  color: var(--ink3);
  background: var(--warm-ghost);
  font-size: 13px;
}

.medical-warm-page .btn-primary {
  border-color: var(--medical-accent);
  background: var(--medical-accent);
  color: var(--accent-contrast);
}

.medical-warm-page .btn,
.medical-warm-page .btn-sm,
.medical-warm-page .btn-outline,
.medical-warm-page .btn-primary {
  min-height: 38px;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 900;
  line-height: 1.15;
  box-shadow: none;
}

.medical-warm-page .medical-modal-panel {
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--ink) 13%, transparent);
  background: var(--warm-glass);
  box-shadow: 0 26px 80px color-mix(in srgb, var(--ink) 22%, transparent);
}

.medical-warm-page .medical-form-grid .field-input {
  min-height: 44px;
  border-radius: 13px;
  border: 1px solid var(--warm-border);
}

@media (max-width: 900px) {
  .medical-warm-hero {
    grid-template-columns: 1fr;
    border-radius: 22px;
  }

  .medical-warm-hero h1 {
    font-size: clamp(38px, 12vw, 58px);
  }
}

@media (max-width: 760px) {
  .medical-warm-page .health-calendar-event,
  .medical-warm-page .health-record-card,
  .medical-warm-page .health-card-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .medical-warm-page {
    padding: 12px;
  }

  .medical-warm-hero {
    padding: 20px;
  }

  .medical-person-strip-head {
    align-items: stretch;
  }

  .medical-person-strip-head label,
  .medical-person-strip-head select {
    width: 100%;
  }

  .medical-warm-page .medical-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Family Warm OS shell */
.family-warm-page .module-page-content {
  display: grid;
  gap: 16px;
}

.family-warm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: clamp(16px, 2.5vw, 28px);
  align-items: center;
  min-height: clamp(170px, 20vw, 250px);
  padding: clamp(18px, 2.5vw, 32px);
  border-radius: 28px;
  overflow: hidden;
  color: var(--accent-contrast);
  background:
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.30), transparent 26%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 66%, #fff 34%) 0%, var(--accent) 46%, color-mix(in srgb, var(--accent) 56%, #111 44%) 100%);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 14%, transparent);
}

.family-warm-hero h1 {
  margin: 10px 0 8px;
  color: var(--accent-contrast);
  font-size: clamp(42px, 4.7vw, 64px);
  line-height: .95;
  letter-spacing: 0;
}

.family-warm-hero p {
  max-width: 620px;
  margin: 0;
  color: rgba(255,255,255,.88);
  font-weight: 700;
  line-height: 1.45;
}

.family-warm-hero-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 26px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(18px);
}

.family-warm-hero-card strong {
  color: var(--accent-contrast);
  font-size: 20px;
  font-weight: 950;
}

.family-warm-hero-card span {
  color: rgba(255,255,255,.74);
  font-weight: 800;
}

.family-warm-page .family-layout {
  display: grid;
  gap: 16px;
}

.family-warm-page .family-rail,
.family-warm-page .family-content {
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  background: var(--warm-glass);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 6.5%, transparent);
}

.family-warm-page .family-rail {
  padding: 12px;
}

.family-warm-page .family-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
}

.family-warm-page .family-tabs button {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 8px 13px;
  border: 1px solid var(--warm-border);
  border-radius: 999px;
  background: var(--warm-ghost);
  color: var(--ink2);
  font-weight: 850;
}

.family-warm-page .family-tabs button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.family-warm-page .family-content {
  overflow: hidden;
  padding: 12px;
}

.family-warm-page .family-tree-page {
  max-width: none;
  padding: 0;
}

.family-warm-page .family-tree-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 14px;
}

.family-warm-page .family-tree-main {
  display: block;
  min-width: 0;
}

.family-tree-warm-board,
.family-warm-page .family-tree-side {
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  background: var(--warm-card);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 6.5%, transparent);
}

.family-tree-warm-board {
  overflow: hidden;
}

.family-tree-warm-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border-bottom: 1px solid var(--warm-border);
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 26%),
    var(--warm-header-bg);
}

.family-tree-warm-kicker {
  margin: 0 0 8px;
  color: var(--warm-ink-3);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .04em;
}

.family-tree-warm-head h2 {
  margin: 0;
  color: var(--warm-ink);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
  letter-spacing: 0;
}

.family-tree-warm-head p {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--ink2);
  font-weight: 650;
  line-height: 1.5;
}

.family-tree-warm-actions,
.family-warm-page .family-tree-side-actions,
.family-warm-page .family-tree-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.family-warm-page .btn.btn-primary,
.family-warm-page .family-tree-side-actions .btn.btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.family-warm-page .btn.btn-outline {
  border-color: var(--warm-border);
  background: var(--warm-card);
  color: var(--warm-ink-2);
}

.family-tree-warm-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--warm-border);
  background: var(--warm-card-2);
}

.family-tree-warm-summary div {
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--warm-border);
  border-radius: 14px;
  background: var(--warm-glass);
}

.family-tree-warm-summary strong {
  display: block;
  color: var(--warm-ink);
  font-size: 26px;
  line-height: 1;
}

.family-tree-warm-summary span {
  display: block;
  margin-top: 7px;
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.family-tree-warm-map {
  display: grid;
  gap: 0;
  padding: 4px 0 14px;
}

.family-tree-warm-generation {
  padding: 18px 20px 20px;
}

.family-tree-warm-generation + .family-tree-warm-generation {
  border-top: 1px solid var(--warm-border);
}

.family-tree-warm-generation-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.family-tree-warm-generation-label span {
  color: var(--warm-ink);
  font-size: 17px;
  font-weight: 950;
}

.family-tree-warm-generation-label small {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.family-tree-warm-people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.family-tree-warm-person {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--warm-border);
  border-radius: 16px;
  background: var(--warm-card);
  color: inherit;
  text-align: left;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 4.5%, transparent);
  cursor: pointer;
}

.family-tree-warm-person:hover,
.family-tree-warm-person.is-active {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: var(--warm-card-hover);
}

.family-tree-warm-avatar {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--warm-icon-bg);
  color: var(--accent);
  font-size: 24px;
  font-weight: 950;
}

.family-tree-warm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.family-tree-warm-body {
  min-width: 0;
}

.family-tree-warm-body strong,
.family-tree-warm-body small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-tree-warm-body strong {
  color: var(--warm-ink);
  font-size: 16px;
  font-weight: 950;
}

.family-tree-warm-body small {
  margin-top: 3px;
  color: var(--ink2);
  font-weight: 750;
}

.family-tree-warm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.family-tree-warm-tags em {
  max-width: 100%;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--warm-card-2);
  color: var(--warm-ink-3);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.family-warm-page .family-tree-side {
  position: sticky;
  top: 86px;
  padding: 18px;
  align-self: start;
}

.family-warm-page .family-tree-portrait-card {
  border-radius: 16px;
  background: var(--warm-card-2);
}

.family-warm-page .family-tree-side-header {
  align-items: flex-start;
  gap: 12px;
}

.family-warm-page .family-tree-side-title,
.family-warm-page .people-side-title,
.family-warm-page .page-title,
.family-warm-page .heritage-head h1,
.family-warm-page .heritage-card h2,
.family-warm-page .heritage-detail-head h2 {
  font-family: inherit;
  letter-spacing: 0;
}

.family-warm-page .family-tree-side-title,
.family-warm-page .people-side-title {
  color: var(--warm-ink);
  font-size: 28px;
  line-height: 1.05;
  font-weight: 950;
}

.family-warm-page .family-tree-side-kicker,
.family-warm-page .people-side-kicker,
.family-warm-page .eyebrow,
.family-warm-page .field-label {
  color: var(--warm-ink-3);
  letter-spacing: .04em;
}

.family-warm-page .family-tree-portrait {
  margin-inline: auto;
  border-radius: 24px;
  background: var(--warm-card-2);
  box-shadow: inset 0 0 0 1px var(--warm-border);
}

.family-warm-page .family-tree-portrait-actions .btn {
  justify-content: center;
  min-height: 42px;
  border-radius: 12px;
}

.family-warm-page .family-tree-detail-block {
  padding: 12px 0;
  border-top: 1px solid var(--warm-border);
}

.family-warm-page .family-tree-detail-block + .family-tree-detail-block {
  margin-top: 0;
}

.family-warm-page .family-tree-chip {
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background: var(--warm-card-hover);
  color: var(--warm-ink-3);
}

.family-warm-page .people-page,
.family-warm-page .heritage-page {
  max-width: none;
  padding: 8px;
}

.family-warm-page .people-page > .eyebrow,
.family-warm-page .people-page > .page-title,
.family-warm-page .people-page > .page-sub {
  margin-left: 8px;
}

.family-warm-page .people-page > .page-title {
  margin-top: 8px;
  color: var(--warm-ink);
  font-size: clamp(32px, 3vw, 46px);
  line-height: 1;
  font-weight: 950;
}

.family-warm-page .people-toolbar,
.family-warm-page .people-directory,
.family-warm-page .people-side,
.family-warm-page .heritage-toolbar,
.family-warm-page .heritage-detail,
.family-warm-page .heritage-card,
.family-warm-page .heritage-stat {
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  background: var(--warm-card);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--ink) 4.5%, transparent);
}

.family-warm-page .people-toolbar {
  padding: 16px;
  margin: 18px 0 12px;
}

.family-warm-page .people-layout {
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: start;
}

.family-warm-page .people-directory {
  max-height: min(680px, calc(100vh - 260px));
  overflow: auto;
}

.family-warm-page .people-person-card {
  border-radius: 14px;
  background: var(--warm-card);
}

.family-warm-page .people-person-card.is-active,
.family-warm-page .people-person-card:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--warm-card-hover);
}

.family-warm-page .people-person-name {
  color: var(--warm-ink);
  font-size: 16px;
  font-weight: 950;
}

.family-warm-page .people-person-role,
.family-warm-page .people-person-meta,
.family-warm-page .people-detail-text,
.family-warm-page .family-tree-detail-text {
  color: var(--ink2);
}

.family-warm-page .badge.badge-accent {
  border-radius: 999px;
  background: var(--warm-card-2);
  color: var(--warm-ink-3);
}

.family-warm-page .people-side {
  min-height: 420px;
  padding: 24px;
}

.family-warm-page .people-detail-block {
  padding: 14px 0;
  border-top: 1px solid var(--warm-border);
}

.family-warm-page .people-detail-block + .people-detail-block {
  margin-top: 0;
}

.family-warm-page .heritage-page {
  display: grid;
  gap: 14px;
}

.family-warm-page .heritage-head {
  padding: 20px;
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 28%),
    var(--warm-card);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 5.5%, transparent);
}

.family-warm-page .heritage-head h1 {
  color: var(--warm-ink);
  font-size: clamp(34px, 3.2vw, 50px);
  line-height: 1;
  font-weight: 950;
}

.family-warm-page .heritage-head p {
  font-weight: 650;
}

.family-warm-page .heritage-stats {
  gap: 10px;
}

.family-warm-page .heritage-stat {
  min-height: 74px;
  padding: 14px;
}

.family-warm-page .heritage-stat strong {
  color: var(--warm-ink);
  font-size: 28px;
}

.family-warm-page .heritage-toolbar {
  padding: 14px;
}

.family-warm-page .heritage-cats .btn {
  border-radius: 999px;
}

.family-warm-page .heritage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: 14px;
}

.family-warm-page .heritage-layout.is-list-only {
  grid-template-columns: 1fr;
}

.family-warm-page .heritage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.family-warm-page .heritage-card {
  overflow: hidden;
}

.family-warm-page .heritage-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: var(--warm-card-hover);
}

.family-warm-page .heritage-photo {
  height: 150px;
}

.family-warm-page .heritage-card-body {
  padding: 14px;
}

.family-warm-page .heritage-card-body > span {
  color: var(--accent);
}

.family-warm-page .heritage-card h2 {
  color: var(--warm-ink);
  font-size: 19px;
  line-height: 1.12;
  font-weight: 950;
}

.family-warm-page .heritage-detail {
  position: sticky;
  top: 86px;
  width: auto;
  flex: initial;
  padding: 18px;
}

.family-warm-page .heritage-info div {
  border-radius: 14px;
  background: var(--warm-card-2);
}

/* .family-warm-page .heritage-modal → removed, now handled by .module-form-modal (2026-05-11) */

@media (max-width: 900px) {
  .family-warm-hero {
    grid-template-columns: 1fr;
  }

  .family-warm-page .family-tree-layout {
    grid-template-columns: 1fr;
  }

  .family-warm-page .family-tree-side {
    position: static;
  }

  .family-tree-warm-head {
    flex-direction: column;
  }

  .family-tree-warm-actions,
  .family-tree-warm-actions .btn {
    width: 100%;
  }

  .family-tree-warm-summary {
    grid-template-columns: 1fr;
  }

  .family-warm-page .people-layout,
  .family-warm-page .heritage-layout {
    grid-template-columns: 1fr;
  }

  .family-warm-page .people-directory {
    max-height: none;
  }

  .family-warm-page .heritage-detail {
    position: static;
  }
}

/* Dashboard — Layf Core */
.dashboard-page {
  max-width: 1500px;
}

.dashboard-page .module-page-content {
  display: grid;
  gap: 16px;
  margin-top: 0;
}

/* Hero animation — layout/colours handled by system.css */
.dashboard-warm-hero {
  animation: dashboardHeroBreathe 16s ease-in-out infinite;
}

/* Weather widget */
.dashboard-warm-weather {
  padding: 18px;
  border-radius: 24px;
  backdrop-filter: blur(18px);
}

.dashboard-warm-weather-top {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.dashboard-warm-weather-top span {
  color: var(--accent-contrast);
  font-size: 17px;
  font-weight: 950;
}

.dashboard-warm-weather-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.dashboard-warm-weather-top button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: var(--accent-contrast);
  font-weight: 900;
}

.dashboard-warm-weather-main {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 16px 0 6px;
}

.dashboard-warm-weather-main strong {
  color: var(--accent-contrast);
  font-size: clamp(44px, 5vw, 62px);
  line-height: .9;
}

.dashboard-warm-weather-main span {
  font-size: 42px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
}

.dashboard-warm-weather p {
  margin: 0 0 14px;
  color: rgba(255,250,244,.82);
  font-weight: 850;
}

.dashboard-warm-weather-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-warm-weather-metrics span {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 8px;
  border-radius: 13px;
  background: rgba(255,255,255,.14);
  color: rgba(255,250,244,.72);
  font-size: 11px;
  font-weight: 850;
}

.dashboard-warm-weather-metrics strong {
  color: var(--accent-contrast);
  font-size: 13px;
}

.dashboard-warm-weather.is-loading {
  opacity: .86;
}

/* ─── Body layout ─────────────────────────────────────── */

.layf-dash-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}

.layf-dash-main,
.layf-dash-aside {
  display: grid;
  gap: 16px;
}

.layf-dash-aside {
  position: sticky;
  top: 82px;
}

/* ─── Cards ───────────────────────────────────────────── */

.layf-dash-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--ink) 5%, transparent);
}

.layf-dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.layf-dash-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.layf-dash-card-head p {
  margin: 4px 0 0;
  color: var(--ink2);
  font-size: 13px;
}

/* ─── Event rows ──────────────────────────────────────── */

.layf-event-list {
  display: grid;
  gap: 6px;
}

.layf-event-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface2);
  text-align: left;
  transition: border-color .15s, background .15s;
}

.layf-event-row:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: var(--surface);
}

.layf-event-row.is-today {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.layf-event-row.is-overdue {
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}

.layf-event-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  font-size: 16px;
}

.layf-event-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.layf-event-body strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layf-event-body small {
  color: var(--ink2);
  font-size: 12px;
}

.layf-event-date {
  color: var(--ink2);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.layf-event-row.is-today .layf-event-date {
  color: var(--accent);
}

.layf-event-row.is-overdue .layf-event-date {
  color: var(--danger);
}

/* ─── Week strip ──────────────────────────────────────── */

.layf-dash-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.layf-dash-days button {
  min-height: 88px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface2);
  text-align: left;
  transition: border-color .15s, background .15s;
}

.layf-dash-days button:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--surface);
}

.layf-dash-days button.is-today {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.layf-dash-days span,
.layf-dash-days em {
  display: block;
  color: var(--ink2);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.layf-dash-days strong {
  display: block;
  margin: 6px 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

/* ─── Misc helpers ────────────────────────────────────── */

.layf-dash-muted {
  margin: 8px 0 0;
  color: var(--ink2);
  font-size: 13px;
}

.layf-dash-preview-rows {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.layf-dash-preview-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface2);
}

.layf-dash-preview-row span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.layf-dash-preview-row em {
  color: var(--ink2);
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
}

/* ─── Quick add ───────────────────────────────────────── */

.layf-dash-quickadd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* ─── Layf Assistant placeholder ──────────────────────── */

.layf-dash-assistant {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 18px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
}

.layf-dash-assistant-orb {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 35%,
    color-mix(in srgb, var(--accent) 80%, #fff 40%),
    var(--accent) 60%,
    color-mix(in srgb, var(--accent) 70%, #000 30%)
  );
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent),
    0 8px 28px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: layfOrbPulse 3s ease-in-out infinite;
}

.layf-dash-assistant-body {
  display: grid;
  gap: 6px;
}

.layf-dash-assistant-body h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
}

.layf-dash-assistant-body p {
  margin: 0;
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.5;
}

.layf-dash-assistant-soon {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ─── Keyframes ───────────────────────────────────────── */

@keyframes dashboardHeroBreathe {
  0%, 100% {
    background-position: 0% 50%;
    filter: saturate(1);
  }
  50% {
    background-position: 100% 50%;
    filter: saturate(1.08);
  }
}

@keyframes layfOrbPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 8px color-mix(in srgb, var(--accent) 14%, transparent),
      0 8px 28px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 14px color-mix(in srgb, var(--accent) 8%, transparent),
      0 12px 36px color-mix(in srgb, var(--accent) 40%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-warm-hero,
  .layf-dash-assistant-orb {
    animation: none;
  }
}

/* ─── Responsive ──────────────────────────────────────── */

/* ≤1100px — single column, aside becomes 2-col grid */
@media (max-width: 1100px) {
  .layf-dash-body {
    grid-template-columns: 1fr;
  }

  .layf-dash-aside {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ≤820px — hero goes 1-col (system.css), begin compacting weather */
@media (max-width: 820px) {
  .dashboard-warm-weather {
    padding: 14px;
    border-radius: 16px;
  }

  .dashboard-warm-weather-main {
    margin: 10px 0 4px;
  }

  .dashboard-warm-weather-main strong {
    font-size: clamp(34px, 8vw, 50px);
  }

  .dashboard-warm-weather-main span {
    font-size: clamp(28px, 7vw, 40px);
  }

  .dashboard-warm-weather-metrics span {
    padding: 6px;
    font-size: 10px;
  }
}

/* ≤760px — event rows wrap date, aside single column, week strip scrolls */
@media (max-width: 760px) {
  .layf-dash-days {
    grid-template-columns: repeat(7, 76px);
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .layf-dash-days button {
    min-height: 78px;
    padding: 8px;
  }

  .layf-dash-days strong {
    font-size: 18px;
  }

  .layf-event-row {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .layf-event-date {
    grid-column: 2;
    margin-top: -2px;
  }

  .layf-dash-aside {
    grid-template-columns: 1fr;
  }
}

/* ≤600px — true mobile: compact hero, slim weather, tighter spacing */
@media (max-width: 600px) {
  /* Hero greeting: tighter top margin when expanded on mobile */
  .dashboard-warm-hero h1 {
    margin: 8px 0 0 !important;
  }

  /* Hero meta pills: smaller */
  .dashboard-warm-hero-meta,
  .dashboard-hero-today {
    gap: 6px;
    margin-top: 8px;
  }

  .dashboard-warm-hero-meta span,
  .dashboard-hero-today button {
    min-height: 26px;
    padding: 0 10px;
    font-size: 11px !important;
  }

  /* Weather widget: strip layout — temp + icon only, hide detail */
  .dashboard-warm-weather {
    padding: 10px 12px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0 10px;
  }

  .dashboard-warm-weather-top {
    grid-column: 1 / -1;
    margin-bottom: 6px;
  }

  .dashboard-warm-weather-top span {
    font-size: 12px;
  }

  .dashboard-warm-weather-top button {
    min-height: 24px;
    padding: 0 7px;
    font-size: 11px;
  }

  .dashboard-warm-weather-main {
    margin: 0;
    gap: 6px;
    grid-column: 1;
    grid-row: 2;
  }

  .dashboard-warm-weather-main strong {
    font-size: 28px;
  }

  .dashboard-warm-weather-main span {
    font-size: 24px;
  }

  /* Hide secondary weather info on mobile */
  .dashboard-warm-weather p,
  .dashboard-warm-weather-metrics {
    display: none;
  }

  /* Page-level gaps: tighter */
  .dashboard-page .module-page-content {
    gap: 10px;
  }

  .layf-dash-body,
  .layf-dash-main,
  .layf-dash-aside {
    gap: 10px;
  }

  /* Cards: compact */
  .layf-dash-card {
    padding: 14px;
    border-radius: 14px;
    box-shadow: none;
  }

  .layf-dash-card-head {
    margin-bottom: 10px;
  }

  /* Event rows: tighter */
  .layf-event-row {
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 11px;
    gap: 8px;
  }

  .layf-event-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
    border-radius: 8px;
  }

  .layf-event-body strong {
    font-size: 13px;
  }

  .layf-event-body small {
    font-size: 11px;
  }

  .layf-event-date {
    font-size: 11px;
  }

  /* Assistant: horizontal strip on mobile */
  .layf-dash-assistant {
    flex-direction: row;
    text-align: left;
    padding: 14px;
    gap: 12px;
    align-items: center;
  }

  .layf-dash-assistant-orb {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .layf-dash-assistant-body {
    gap: 3px;
  }

  .layf-dash-assistant-body h2 {
    font-size: 14px;
  }

  .layf-dash-assistant-body p {
    font-size: 12px;
    line-height: 1.4;
  }
}

/* ≤480px — keep quickadd 2-col (already defined; preserve in own block) */
@media (max-width: 480px) {
  .layf-dash-quickadd-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Shopping Warm OS */
.shopping-page.collection-page {
  max-width: 1500px;
}


.shopping-layout {
  gap: 16px;
  align-items: start;
}

.shopping-sidebar,
.shopping-head,
.shopping-quick-add,
.shopping-toolbar,
.shopping-board,
.shopping-stat,
.shopping-no-list {
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  background: var(--warm-card);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 6%, transparent);
}

.shopping-sidebar {
  position: sticky;
  top: 82px;
  padding: 16px;
}

.shopping-sidebar-head h2,
.shopping-head h2,
.shopping-no-list h2 {
  color: var(--warm-ink);
  font-size: 26px;
  font-weight: 950;
  letter-spacing: 0;
}

.shopping-list-tabs {
  gap: 10px;
}

.shopping-list-tab {
  min-height: 94px;
  padding: 13px;
  border: 1px solid var(--warm-border);
  border-radius: 16px;
  background: var(--warm-card);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 4%, transparent);
}

.shopping-list-tab.is-active,
.shopping-list-tab:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  background: var(--warm-card-hover);
}

.shopping-list-name {
  color: var(--warm-ink);
  font-weight: 950;
}

.shopping-list-count {
  color: var(--accent);
  font-weight: 950;
}

.shopping-progress {
  background: var(--warm-card-2);
}

.shopping-progress span {
  background: var(--accent);
}

.shopping-add-list-card,
.shopping-share-card {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--warm-border);
  border-radius: 16px;
  background: var(--warm-card);
  text-align: left;
}

.shopping-add-list-card {
  display: grid;
  gap: 4px;
  color: var(--warm-ink);
}

.shopping-add-list-card:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: var(--warm-card-hover);
}

.shopping-add-list-card strong {
  color: var(--accent);
  font-size: 18px;
  font-weight: 950;
}

.shopping-add-list-card span {
  color: var(--ink3);
  font-weight: 750;
}

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

.shopping-share-card h3 {
  margin: 4px 0 0;
  color: var(--warm-ink);
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
}

.shopping-share-people {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.shopping-share-people span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--warm-card);
  color: var(--warm-ink-3);
  font-size: 12px;
  font-weight: 850;
}

.shopping-share-actions {
  display: grid;
  gap: 8px;
}

.shopping-share-card button {
  min-height: 36px;
  border: 1px solid var(--warm-border);
  border-radius: 999px;
  background: var(--warm-card);
  color: var(--warm-ink-2);
  font-weight: 900;
}

.shopping-share-card button.is-danger {
  border-color: color-mix(in srgb, var(--danger) 18%, transparent);
  background: var(--danger-bg);
  color: var(--danger);
}

.shopping-head {
  margin-bottom: 12px;
  padding: 20px;
}

.shopping-head p {
  color: var(--ink2);
  font-weight: 700;
}

.shopping-head-actions .btn,
.shopping-toolbar .btn,
.shopping-section-head .btn {
  border-radius: 999px;
}

.shopping-head-actions .btn-primary,
.shopping-cats .btn-primary,
.shopping-form-actions .btn-primary,
.shopping-quick-add .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.shopping-quick-add {
  display: grid;
  grid-template-columns: minmax(200px, 280px) minmax(220px, 1fr) 92px minmax(140px, 180px) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
}

.shopping-quick-add strong,
.shopping-quick-add small {
  display: block;
}

.shopping-quick-add strong {
  color: var(--warm-ink);
  font-weight: 950;
}

.shopping-quick-add small {
  margin-top: 3px;
  color: var(--ink3);
  font-weight: 700;
}

.shopping-quick-add input,
.shopping-quick-add select,
.shopping-search input {
  min-height: 44px;
  border: 1px solid var(--warm-border);
  border-radius: 14px;
  background: var(--warm-card);
}

.shopping-stats {
  gap: 10px;
  margin-bottom: 12px;
}

.shopping-stat {
  min-height: 76px;
}

.shopping-stat strong {
  color: var(--warm-ink);
  font-size: 30px;
  line-height: 1;
}

.shopping-toolbar {
  padding: 14px;
}

.shopping-cats .btn {
  border-color: var(--warm-border);
  background: var(--warm-card);
  color: var(--warm-ink-2);
  font-weight: 900;
}

.shopping-board {
  padding: 16px;
}

.shopping-section-head h3 {
  color: var(--warm-ink);
  font-size: 20px;
  font-weight: 950;
}

.shopping-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.shopping-section-head span {
  background: var(--warm-card-hover);
  color: var(--accent);
}

.shopping-item {
  min-height: 68px;
  border: 1px solid var(--warm-border);
  border-radius: 16px;
  background: var(--warm-card);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 3.5%, transparent);
}

.shopping-item:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: var(--warm-card);
}

.shopping-check {
  width: 30px;
  height: 30px;
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--accent);
}

.shopping-item.is-done .shopping-check {
  background: var(--accent);
  color: var(--accent-contrast);
}

.shopping-item-main h4 {
  color: var(--warm-ink);
  font-size: 16px;
  font-weight: 950;
}

.shopping-item-main p {
  color: var(--ink3);
  font-weight: 700;
}

.shopping-item .btn {
  border-radius: 999px;
  background: var(--warm-card);
}

.shopping-delete {
  border-radius: 999px;
  background: var(--warm-card-hover);
  color: var(--danger);
}

.shopping-form {
  border-radius: 22px;
  background: var(--warm-card);
}

.shopping-form-head h2 {
  font-family: inherit;
  color: var(--warm-ink);
  font-weight: 950;
  letter-spacing: 0;
}

.shopping-share-box {
  border-color: var(--warm-border);
  border-radius: 16px;
  background: var(--warm-card-2);
}

.shopping-share-box label {
  border-color: var(--warm-border);
  border-radius: 999px;
  background: var(--warm-card);
}

@media (max-width: 1120px) {
  .shopping-layout,
  .shopping-quick-add {
    grid-template-columns: 1fr;
  }

  .shopping-sidebar {
    position: static;
  }
}

@media (max-width: 760px) {
  .shopping-head-actions,
  .shopping-head-actions .btn,
  .shopping-quick-add .btn {
    width: 100%;
  }
}

/* Recipes Warm OS */
.recipes-page {
  max-width: 1560px;
  margin: 0 auto;
  padding-bottom: 80px;
}


.recipes-toolbar.card {
  margin: 16px 0;
  padding: 14px;
  align-items: center;
  border: 1px solid var(--warm-border);
  border-radius: 22px;
  background: var(--warm-glass);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--ink) 8%, transparent);
}

.recipes-search {
  min-width: min(310px, 100%);
}

.recipes-search span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.recipes-search input {
  min-height: 48px;
  border-color: var(--warm-border);
  border-radius: 16px;
  background: var(--warm-card);
  color: var(--warm-ink);
  font-size: 16px;
}

.recipes-cats {
  gap: 8px;
}

.recipes-cats .btn {
  min-height: 42px;
  border-radius: 999px;
  font-weight: 850;
}

.recipes-cats .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.recipes-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.recipes-stats div {
  min-height: 92px;
  padding: 18px;
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  background: var(--warm-card);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 6%, transparent);
}

.recipes-stats strong,
.recipes-stats span {
  display: block;
}

.recipes-stats strong {
  color: var(--warm-ink);
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1;
  font-weight: 950;
}

.recipes-stats span {
  margin-top: 9px;
  color: var(--ink3);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.recipes-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.recipes-layout.is-list-only {
  grid-template-columns: 1fr;
}

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

.recipe-card {
  min-width: 0;
  border: 1px solid var(--warm-border);
  border-radius: 20px;
  background: var(--warm-card);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 7%, transparent);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.recipe-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: var(--warm-card-hover);
}

.recipe-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: var(--warm-card-hover);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 12%, transparent);
}

.recipe-card-main {
  text-align: left;
}

.recipe-photo {
  height: 174px;
  border-radius: 18px 18px 0 0;
  background:
    radial-gradient(circle at 70% 26%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 28%),
    var(--surface2);
}

.recipe-photo span {
  color: var(--warm-ink-3);
  font-size: 15px;
  font-weight: 950;
}

.recipe-card-body {
  padding: 15px;
}

.recipe-category {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .08em;
}

.recipe-card h2 {
  margin-top: 7px;
  color: var(--warm-ink);
  font-family: inherit;
  font-size: 20px;
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 950;
}

.recipe-card p {
  color: var(--ink3);
  font-size: 13px;
  font-weight: 760;
}

.recipe-tags {
  gap: 6px;
}

.recipe-tags span {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--warm-border);
  color: var(--warm-ink-3);
  font-size: 11px;
  font-weight: 850;
}

.recipes-detail.card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 92vw);
  max-height: 88vh;
  padding: 18px;
  overflow-y: auto;
  z-index: 200;
  border: 1px solid var(--warm-border);
  border-radius: 22px;
  background: rgba(255, 251, 245, 0.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 18%, transparent);
}

.recipe-detail-head {
  gap: 12px;
  margin-bottom: 14px;
}

.recipe-detail-head h2 {
  color: var(--warm-ink);
  font-family: inherit;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.02;
  letter-spacing: 0;
  font-weight: 950;
}

.recipe-detail-head p {
  color: var(--ink2);
  font-weight: 680;
}

.recipe-difficulty {
  border-radius: 999px;
  font-weight: 950;
}

.recipe-meta {
  gap: 9px;
}

.recipe-meta div {
  border: 1px solid var(--warm-border);
  border-radius: 16px;
  background: var(--warm-card-2);
}

.recipe-meta strong {
  font-size: 15px;
  font-weight: 950;
}

.recipe-detail-actions .btn {
  border-radius: 999px;
}

.recipe-detail-actions .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.recipe-section {
  margin-top: 18px;
}

.recipe-section h3 {
  color: var(--warm-ink);
  font-size: 18px;
  font-weight: 950;
}

.recipe-ingredient {
  min-height: 42px;
  grid-template-columns: minmax(82px, .38fr) minmax(0, 1fr);
  border-color: var(--border);
  background: transparent;
}

.recipe-ingredient strong {
  color: var(--accent);
}

.recipe-step {
  gap: 11px;
}

.recipe-step strong {
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
}

.recipe-step p {
  color: var(--ink2);
  font-weight: 650;
}

.recipe-note {
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 18px;
  background: var(--warm-card-hover);
}

.recipe-note strong {
  color: var(--accent);
}

.recipes-empty.card {
  min-height: 220px;
  border-radius: 22px;
  background: var(--warm-card);
}

.recipe-modal {
  display: grid;
  place-items: center;
  padding: 24px;
}

.recipe-modal-backdrop {
  background: color-mix(in srgb, var(--scrim-medium) 84%, transparent);
  backdrop-filter: blur(10px);
}

.recipe-form.card {
  border: 1px solid var(--warm-border);
  border-radius: 24px;
  background: var(--warm-card);
  box-shadow: 0 26px 80px color-mix(in srgb, var(--scrim-soft) 92%, transparent);
}

.recipe-form-head h2 {
  color: var(--warm-ink);
  font-family: inherit;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: 0;
}

.recipe-form-grid .field-input {
  border-radius: 16px;
}

.recipe-plan-preview {
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 18px;
  background: var(--warm-card-hover);
}

.recipe-form-actions .btn {
  border-radius: 999px;
}

.recipe-form-actions .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.recipe-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  padding: 4px 12px;
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .recipes-toolbar.card {
    flex-direction: column;
    align-items: stretch;
  }

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

  .recipes-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  }

  .recipe-ingredient {
    grid-template-columns: 1fr;
  }
}

/* Packing Warm OS */
.packing-page {
  max-width: 1560px;
  margin: 0 auto;
  padding-bottom: 80px;
}


.packing-suggestions {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid var(--warm-border);
  border-radius: 22px;
  background: var(--warm-card);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--ink) 8%, transparent);
}

.packing-suggestions h2 {
  color: var(--warm-ink);
  font-family: inherit;
  font-size: 22px;
  font-weight: 950;
  letter-spacing: 0;
}

.packing-suggestion-list {
  margin-top: 14px;
}

.packing-suggestion {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--warm-border);
  border-radius: 18px;
  background: var(--warm-card-2);
}

.packing-suggestion-icon {
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 16%, #fff);
  color: var(--accent);
}

.packing-suggestion h3 {
  color: var(--warm-ink);
  font-size: 16px;
  font-weight: 950;
}

.packing-suggestion p,
.packing-suggestion small {
  color: var(--ink3);
  font-weight: 720;
}

.packing-layout {
  display: grid;
  grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.packing-sidebar.card,
.packing-detail.card {
  border: 1px solid var(--warm-border);
  border-radius: 22px;
  background: var(--warm-card);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 9%, transparent);
}

.packing-sidebar.card {
  position: sticky;
  top: 82px;
  width: auto;
  padding: 14px;
}

.packing-sidebar > .btn {
  width: 100%;
  border-radius: 999px;
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.packing-trip-list {
  gap: 10px;
}

.packing-trip {
  min-height: 88px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  border-color: var(--warm-border);
  border-radius: 18px;
  background: var(--warm-card);
}

.packing-trip.is-active {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--warm-card-hover);
  box-shadow: inset 3px 0 0 var(--accent);
}

.packing-trip > span:first-child {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--warm-card-2);
  font-size: 22px;
}

.packing-trip strong {
  color: var(--warm-ink);
  font-size: 14px;
  font-weight: 950;
}

.packing-trip small,
.packing-trip em {
  color: var(--ink3);
  font-weight: 750;
}

.packing-trip i,
.packing-progress i {
  background: var(--warm-border);
}

.packing-trip i b,
.packing-progress i b {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 66%, #fff 34%));
}

.packing-detail.card {
  padding: 18px;
}

.packing-detail-head {
  gap: 14px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--warm-border);
}

.packing-trip-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent) 14%, #fff5ec);
}

.packing-detail-head h2 {
  color: var(--warm-ink);
  font-family: inherit;
  font-size: clamp(28px, 2.5vw, 38px);
  font-weight: 950;
  letter-spacing: 0;
}

.packing-detail-head p {
  color: var(--ink3);
  font-weight: 750;
}

.packing-detail-actions {
  gap: 8px;
}

.packing-detail-actions .btn,
.packing-actions .btn,
.packing-category .btn {
  border-radius: 999px;
}

.packing-progress {
  margin-top: 16px;
  padding: 16px;
  border-color: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 18px;
  background: var(--warm-card-hover);
}

.packing-progress div {
  align-items: baseline;
}

.packing-progress span,
.packing-progress p {
  color: var(--ink3);
  font-weight: 780;
}

.packing-progress strong {
  color: var(--warm-ink);
  font-size: 26px;
  font-weight: 950;
}

.packing-actions.module-action-bar {
  margin: 14px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.packing-actions .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.packing-categories {
  gap: 14px;
}

.packing-category {
  border-color: var(--warm-border);
  border-radius: 20px;
  background: var(--warm-card);
}

.packing-category header {
  padding: 14px;
  background: var(--warm-card-2);
}

.packing-category h3 {
  color: var(--warm-ink);
  font-size: 17px;
  font-weight: 950;
}

.packing-category p {
  color: var(--ink3);
  font-weight: 800;
}

.packing-category-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.packing-item {
  min-height: 54px;
  padding: 10px 14px;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  border-color: var(--warm-border);
}

.packing-item > button:first-child {
  width: 28px;
  height: 28px;
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  color: var(--accent-contrast);
}

.packing-item.is-checked > button:first-child {
  border-color: var(--accent);
  background: var(--accent);
}

.packing-item span {
  color: var(--warm-ink);
  font-weight: 780;
}

.packing-item.is-checked span {
  color: var(--ink3);
}

.packing-remove {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--warm-card-hover);
  color: var(--danger);
  font-weight: 850;
}

.packing-empty-state {
  border-radius: 18px;
  background: var(--warm-card-2);
}

.packing-modal {
  display: grid;
  place-items: center;
  padding: 24px;
}

.packing-modal-backdrop {
  background: color-mix(in srgb, var(--scrim-medium) 84%, transparent);
  backdrop-filter: blur(10px);
}

.packing-form.card {
  border: 1px solid var(--warm-border);
  border-radius: 24px;
  background: var(--warm-card);
  box-shadow: 0 26px 80px color-mix(in srgb, var(--scrim-soft) 92%, transparent);
}

.packing-form-head h2 {
  color: var(--warm-ink);
  font-family: inherit;
  font-size: 30px;
  font-weight: 950;
  letter-spacing: 0;
}

.packing-form-grid .field-input {
  border-radius: 16px;
}

.packing-form-actions .btn {
  border-radius: 999px;
}

.packing-form-actions .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

@media (max-width: 1120px) {
  .packing-layout {
    grid-template-columns: 1fr;
  }

  .packing-sidebar.card {
    position: static;
  }
}

@media (max-width: 760px) {
  .packing-suggestion,
  .packing-item {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .packing-suggestion .btn,
  .packing-remove {
    grid-column: 2;
    justify-self: start;
  }

  .packing-detail-head,
  .packing-category header {
    align-items: stretch;
    flex-direction: column;
  }

  .packing-detail-actions,
  .packing-category-actions {
    justify-content: flex-start;
  }
}

/* Beta and Settings Warm OS */
.beta-feedback-page,
.settings-page {
  max-width: 1560px;
  margin: 0 auto;
  padding-bottom: 80px;
}


.beta-feedback-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 16px;
}

.beta-feedback-panel {
  border: 1px solid var(--warm-border);
  border-radius: 22px;
  background: var(--warm-card);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--ink) 9%, transparent);
}

.beta-feedback-panel--feedback {
  position: sticky;
  top: 82px;
  display: flex;
  max-height: calc(100vh - 104px);
  flex-direction: column;
  overflow: hidden;
}

.beta-feedback-panel-head h2 {
  color: var(--warm-ink);
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
}

.beta-feedback-panel-head p,
.beta-feedback-item small,
.beta-feedback-detail p,
.beta-feedback-empty,
.beta-feedback-card p {
  color: var(--ink3);
  font-weight: 720;
}

.beta-feedback-panel-head > span {
  border-radius: 999px;
  background: var(--warm-card-hover);
  color: var(--accent);
}

.beta-feedback-item {
  border-color: var(--warm-border);
  border-radius: 18px;
  background: var(--warm-card);
}

.beta-feedback-item[open] {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background: var(--warm-card-hover);
}

.beta-feedback-icon {
  border-radius: 14px;
  background: var(--warm-icon-bg);
  color: var(--accent);
}

.beta-feedback-item strong,
.beta-feedback-card strong {
  color: var(--warm-ink);
  font-weight: 950;
}

.beta-feedback-detail {
  border-top-color: var(--warm-border);
}

.beta-feedback-page input,
.beta-feedback-page textarea {
  border-color: var(--warm-border);
  border-radius: 16px;
  background: var(--warm-card);
  color: var(--warm-ink);
}

.beta-feedback-edit-form {
  display: grid;
  gap: 10px;
}

.beta-feedback-card-head {
  display: grid;
  gap: 6px;
}

.beta-feedback-card-head label,
.beta-feedback-edit-form label {
  display: grid;
  gap: 6px;
}

.beta-feedback-card-head span,
.beta-feedback-edit-form label > span {
  color: var(--ink3);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.beta-feedback-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 0;
}

.beta-feedback-card-actions button {
  justify-self: auto;
}

.beta-feedback-cards {
  min-height: 0;
  max-height: min(52vh, 560px);
  overflow-y: auto;
  padding-right: 4px;
  overscroll-behavior: contain;
}

.beta-feedback-page button {
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 900;
}

.beta-feedback-page .beta-feedback-card-actions .beta-feedback-danger {
  border: 1px solid rgba(172, 45, 26, .18);
  background: var(--warm-card);
  color: var(--danger);
}

.beta-feedback-notes article,
.beta-feedback-card {
  border-color: var(--warm-border);
  border-radius: 16px;
  background: var(--warm-card-2);
}

.settings-profile-card,
.settings-grid > .card,
.settings-privacy-card,
.settings-module-card {
  border: 1px solid var(--warm-border);
  border-radius: 22px;
  background: var(--warm-card);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--ink) 7%, transparent);
}

.settings-profile-card {
  margin: 16px 0;
}

.settings-profile-avatar {
  border-radius: 22px;
  background: var(--warm-icon-bg);
  color: var(--accent);
}

.settings-profile-copy h2,
.settings-grid .section-title,
.settings-privacy-head strong,
.settings-module-card-copy strong {
  color: var(--warm-ink);
  font-family: inherit;
  font-weight: 950;
  letter-spacing: 0;
}

.settings-copy,
.settings-muted,
.settings-profile-copy p,
.settings-profile-copy small,
.settings-privacy-head p,
.settings-privacy-summary,
.settings-module-card-copy small {
  color: var(--ink3);
  font-weight: 720;
}

.settings-profile-actions .btn,
.settings-grid .btn,
.settings-share-pills .btn {
  border-radius: 999px;
}

.settings-profile-actions .btn-primary,
.settings-grid .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.settings-grid {
  gap: 16px;
}

.settings-grid > .card {
  padding: 20px;
}

.settings-pin-form .field-input,
.settings-form-stack .field-input {
  border-color: var(--warm-border);
  border-radius: 16px;
}

.settings-inline-row {
  padding: 10px;
  border-radius: 16px;
  background: var(--warm-card-2);
}

.settings-privacy-grid {
  grid-template-columns: 1fr;
}

.settings-privacy-card {
  box-shadow: none;
}

.settings-privacy-icon {
  border-radius: 14px;
  background: var(--warm-icon-bg);
}

.settings-share-pills .btn.is-active {
  border-color: var(--accent);
  background: var(--warm-card-hover);
  color: var(--accent);
}

.settings-module-card {
  box-shadow: none;
}

.settings-module-card.is-hidden {
  background: var(--warm-card-2);
}

.settings-module-card-actions .btn {
  border-radius: 999px;
}

@media (max-width: 1120px) {
  .beta-feedback-layout,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .beta-feedback-panel--feedback {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .settings-profile-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-profile-actions,
  .settings-profile-actions .btn,
  .settings-inline-row .btn {
    width: 100%;
  }

  .settings-inline-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ── Family invite acceptance placeholder ─────────────────────────────── */
.fh-invite-notice {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: min(420px, calc(100vw - 32px));
  padding: 16px 16px 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 94%, white);
  box-shadow: 0 18px 42px rgba(39, 28, 18, .14);
  color: var(--ink);
}

.fh-invite-notice strong,
.fh-invite-notice span {
  display: block;
}

.fh-invite-notice strong {
  margin-bottom: 4px;
  font-size: 14px;
}

.fh-invite-notice span {
  color: var(--ink2);
  font-size: 13px;
  line-height: 1.45;
}

.fh-invite-notice button {
  border: 0;
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
}

@media (max-width: 640px) {
  .fh-invite-notice {
    right: 12px;
    bottom: 12px;
  }
}

/* ── Inspiracje — private masonry board ─────────────────────────────────── */
.inspirations-module .module-page-content {
  padding-top: 4px;
}

.inspirations-add-icon svg,
.inspirations-favorite-field svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.inspirations-board {
  columns: 4 210px;
  column-gap: 16px;
}

.inspirations-board.is-empty {
  max-width: 300px;
}

.inspirations-card,
.inspirations-add-card {
  break-inside: avoid;
  display: block;
  width: 100%;
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 9px 24px rgba(39, 28, 18, .055);
}

.inspirations-image-frame {
  display: block;
  overflow: hidden;
}

.inspirations-image-frame img {
  display: block;
  width: 100%;
  object-fit: cover;
  max-height: 390px;
  transform: translate(var(--inspiration-position-x, 0%), var(--inspiration-position-y, 0%)) scale(var(--inspiration-scale, 1));
  transform-origin: center;
  transition: transform .2s ease;
}

.inspirations-card {
  position: relative;
  padding: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.inspirations-card:hover,
.inspirations-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 15px 30px rgba(39, 28, 18, .1);
  outline: none;
}

.inspirations-card.is-dragging {
  opacity: .5;
}

.inspirations-card.is-drop-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

.inspirations-card-meta {
  display: grid;
  gap: 3px;
  padding: 11px 12px 12px;
}

.inspirations-card-meta strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.inspirations-card-meta small {
  color: var(--ink2);
  font-size: 11px;
  line-height: 1.35;
}

.inspirations-card-favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: #b77a20;
  box-shadow: 0 3px 10px rgba(37, 28, 20, .15);
}

.inspirations-drag-handle {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--ink2);
  box-shadow: 0 3px 10px rgba(37, 28, 20, .12);
  opacity: 0;
  transition: opacity .18s ease, color .18s ease;
}

.inspirations-card:hover .inspirations-drag-handle,
.inspirations-card:focus-visible .inspirations-drag-handle {
  opacity: 1;
}

.inspirations-drag-handle svg {
  width: 16px;
  height: 16px;
}

.inspirations-card-favorite svg {
  width: 15px;
  height: 15px;
}

.inspirations-add-card {
  display: grid;
  min-height: 220px;
  place-content: center;
  gap: 9px;
  padding: 20px;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 74%, white), #f7f5ff);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.inspirations-add-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 14px 28px rgba(113, 81, 184, .12);
}

.inspirations-add-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin: 0 auto 3px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, white);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 84%, white);
  color: var(--accent);
}

.inspirations-add-card strong {
  font-size: 14px;
}

.inspirations-add-card small {
  color: var(--ink2);
  font-size: 11px;
}

.inspirations-paste-capture {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface));
  color: var(--ink2);
  font-size: 12px;
  text-align: center;
}

.inspirations-paste-capture:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 48%, transparent);
  outline-offset: 2px;
}

.inspirations-paste-capture svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.inspirations-edit-preview {
  width: min(100%, 260px);
  margin: 0 auto 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
  cursor: grab;
  touch-action: none;
}

.inspirations-edit-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  transform: translate(var(--inspiration-position-x, 0%), var(--inspiration-position-y, 0%)) scale(var(--inspiration-scale, 1));
  transform-origin: center;
  transition: transform .18s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.inspirations-edit-preview.is-panning {
  cursor: grabbing;
}

.inspirations-edit-date {
  margin: -7px 0 15px;
  color: var(--ink2);
  font-size: 12px;
  text-align: center;
}

.inspirations-scale-field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 12px;
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.inspirations-scale-field output {
  color: var(--ink2);
  font-size: 12px;
  font-weight: 600;
}

.inspirations-scale-field input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}

.inspirations-favorite-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.inspirations-favorite-field input {
  accent-color: var(--accent);
}

.inspirations-favorite-field span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.inspirations-module.is-inspirations-saving .inspirations-board {
  opacity: .64;
  pointer-events: none;
}

@media (max-width: 720px) {
  .inspirations-board {
    columns: 2 140px;
    column-gap: 10px;
  }

  .inspirations-card,
  .inspirations-add-card {
    margin-bottom: 10px;
  }

  .inspirations-card-meta {
    padding: 9px 10px 10px;
  }

  .inspirations-add-card {
    min-height: 166px;
    padding: 14px 9px;
  }

}
/* ── Wine Apartments dashboard ─────────────────────────────────────────── */
.wa-dashboard-page .module-page-content {
  gap: 18px;
}

/* The kiosk must keep its support controls above the fold on 16:9 landscape tablets. */
@media (min-width: 821px) and (max-height: 850px) {
  .checkin-welcome {
    height: 100dvh;
  }

  .checkin-mobile-hint {
    right: 7vw;
    bottom: 238px;
  }

  .checkin-access-note {
    gap: 4px;
    margin-top: -12px;
    padding: 8px 14px;
  }

  .checkin-access-note span {
    font-size: 12px;
    line-height: 1.32;
  }

  .checkin-stepper {
    margin-bottom: 82px;
  }
}

/* Self check-in kiosk */

.wa-checkin-html,
.wa-checkin-body {
  min-height: 100%;
  height: auto;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  color: #1f1a17;
  background: #17110d;
}

.wa-checkin-body #app {
  min-height: 100dvh;
  height: auto;
  overflow: visible;
}

.checkin-kiosk {
  min-height: 100dvh;
  overflow: visible;
  letter-spacing: 0;
}

.checkin-welcome {
  --checkin-footer-bottom: clamp(18px, 2.4vh, 30px);
  --checkin-footer-height: 98px;
  --checkin-footer-gap: clamp(16px, 2vh, 24px);
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: var(--checkin-visual-viewport-height, 100dvh);
  overflow-x: clip;
  overflow-y: visible;
  color: #fff;
}

@media (min-width: 821px) and (max-height: 850px) {
  .checkin-welcome {
    --checkin-footer-height: 60px;
    height: 100dvh;
  }

  .checkin-welcome-top {
    padding: 28px 48px;
  }

  .checkin-brand {
    gap: 12px;
    border-radius: 20px;
    padding: 8px 13px 8px 8px;
  }

  .checkin-brand div {
    min-width: 0;
  }

  .checkin-brand img {
    width: 70px;
    height: 70px;
    border-radius: 15px;
  }

  .checkin-brand strong {
    font-size: 26px;
  }

  .checkin-welcome-copy {
    gap: 13px;
    width: min(580px, calc(100% - 96px));
    padding-bottom: 0;
  }

  .checkin-welcome-copy h1 {
    font-size: clamp(68px, 7.4vw, 102px);
  }

  .checkin-welcome-hero > span {
    font-size: clamp(18px, 2vw, 27px);
  }

  .checkin-primary {
    min-height: 62px;
    font-size: 18px;
  }

  .checkin-access-note {
    max-width: 455px;
    gap: 4px;
    margin-top: -12px;
    padding: 8px 14px;
  }

  .checkin-access-note span {
    font-size: 12px;
    line-height: 1.32;
  }

  .checkin-mobile-hint {
    right: 7vw;
    bottom: 238px;
  }

  .checkin-stepper {
    width: min(1040px, calc(100% - 116px));
    margin-bottom: 82px;
    padding: 12px 18px;
  }

  .checkin-stepper b {
    width: 38px;
    height: 38px;
  }

  .checkin-help-bar {
    min-height: 44px;
    padding: 8px 18px;
  }
}

.checkin-welcome-photo,
.checkin-welcome-shade,
.checkin-soft-bg {
  position: absolute;
  inset: 0;
}

.checkin-welcome-photo {
  background:
    linear-gradient(90deg, rgba(11, 10, 11, 0.75), rgba(15, 13, 13, 0.4) 48%, rgba(16, 12, 10, 0.08)),
    url('/assets/check-in-hero.png') 56% center / cover;
  transform: scale(1.01);
  filter: saturate(1.08) brightness(1.1) contrast(1.02);
}

.checkin-welcome-shade {
  background:
    radial-gradient(circle at 24% 42%, rgba(224, 170, 97, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(15, 10, 7, 0.04), rgba(8, 7, 7, 0.7));
}

.checkin-welcome-top,
.checkin-form-top {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(22px, 4vw, 48px);
}

.checkin-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0;
}

.checkin-form-wordmark {
  justify-self: center;
  color: #fffaf6;
  font-family: Lora, Georgia, serif;
  font-size: clamp(21px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}

.checkin-brand div {
  display: grid;
  gap: 3px;
}

.checkin-brand strong {
  font-family: Lora, Georgia, serif;
  font-size: clamp(21px, 2.6vw, 34px);
  font-weight: 600;
  line-height: 1;
}

.checkin-brand span {
  color: #e7bd7b;
  font-size: 14px;
  font-weight: 720;
}

.checkin-lang,
.checkin-back {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 58px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  font-weight: 800;
  cursor: pointer;
}

.checkin-language-control {
  position: relative;
  z-index: 6;
}

.checkin-lang {
  grid-auto-flow: column;
  align-items: center;
  gap: 9px;
  width: auto;
  min-width: 132px;
  padding: 0 16px;
  font-size: 15px;
  border-color: rgba(224, 182, 110, 0.54);
  background: rgba(7, 13, 20, 0.24);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

.checkin-lang-code,
.checkin-language-code {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(238, 205, 151, 0.54);
  border-radius: 50%;
  color: #f3d7a3;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.04em;
}

.checkin-lang-chevron {
  position: relative;
  align-self: center;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  color: currentColor;
  font-size: 0;
}

.checkin-lang-chevron::before {
  position: absolute;
  inset: 0;
  width: 7px;
  height: 7px;
  margin: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: '';
  transform: translateY(-2px) rotate(45deg);
}

.checkin-language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  width: min(286px, calc(100vw - 40px));
  border: 1px solid rgba(255, 237, 224, 0.2);
  border-radius: 18px;
  padding: 10px;
  color: #fffaf6;
  background: rgba(7, 13, 20, 0.34);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.56);
}

.checkin-language-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 8px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.checkin-language-menu button:hover,
.checkin-language-menu button:focus-visible,
.checkin-language-menu button.is-active {
  border-color: rgba(215, 166, 105, 0.52);
  outline: 0;
  background: rgba(209, 163, 107, 0.16);
}

.checkin-language-menu .checkin-language-code {
  width: 26px;
  height: 26px;
  color: rgba(255, 244, 224, 0.82);
  font-size: 10px;
}

.checkin-form-top .checkin-lang,
.checkin-form-top .checkin-back {
  border-color: rgba(77, 57, 44, 0.12);
  color: #4c3428;
  background: rgba(255, 255, 255, 0.84);
}

.checkin-form-top .checkin-language-menu {
  border-color: rgba(255, 237, 224, 0.18);
}

.checkin-welcome-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  display: grid;
  gap: 0;
  width: min(620px, calc(100% - 96px));
  margin-left: clamp(38px, 7vw, 116px);
  padding-bottom: 1vh;
}

.checkin-welcome-hero {
  display: grid;
  position: relative;
}

.checkin-welcome-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 24px;
  color: #e7bd7b;
  font-size: 14px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p.checkin-welcome-kicker span {
  color: #e7bd7b;
  font-size: 17px;
  line-height: 1;
}

.checkin-copy p,
.checkin-result-hero span {
  margin: 0;
  color: #f28f75;
  font-size: 13px;
  font-weight: 830;
  letter-spacing: 0;
  text-transform: uppercase;
}

.checkin-welcome-copy h1 {
  margin: 0 0 24px;
  font-family: Lora, Georgia, serif;
  font-size: clamp(68px, 8.6vw, 126px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: 0;
  color: #e7bd7b;
  text-shadow: 0 20px 64px rgba(0, 0, 0, 0.38);
}

.checkin-welcome-hero > span {
  max-width: 500px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(20px, 2.2vw, 31px);
  line-height: 1.28;
  margin: 0 0 26px;
  text-shadow: 0 12px 42px rgba(0, 0, 0, 0.32);
}

.checkin-primary,
.checkin-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 72px;
  border-radius: 999px;
  padding: 0 34px;
  font-size: 21px;
  font-weight: 840;
  text-decoration: none;
  cursor: pointer;
}

.checkin-primary {
  width: fit-content;
  min-width: min(100%, 340px);
  border: 0;
  color: #20170f;
  background: linear-gradient(105deg, #a87842, #c5985a 52%, #8e6238);
  box-shadow: 0 22px 54px rgba(70, 45, 25, 0.38), inset 0 1px rgba(255, 241, 208, 0.25);
}

.checkin-welcome .checkin-primary {
  margin-bottom: 16px;
}

.checkin-guide-link {
  margin-top: 14px;
}

.checkin-primary:hover,
.checkin-primary:focus-visible {
  background: linear-gradient(105deg, #b9874e, #d1a667 52%, #9d7042);
  box-shadow: 0 24px 60px rgba(106, 68, 35, 0.4);
}

.checkin-primary:focus-visible {
  outline: 3px solid rgba(255, 229, 192, 0.92);
  outline-offset: 4px;
}

.checkin-primary:disabled {
  cursor: wait;
  filter: saturate(0.7);
  opacity: 0.72;
}

.checkin-secondary {
  border: 1px solid rgba(83, 62, 48, 0.14);
  color: #5b4435;
  background: rgba(255, 255, 255, 0.78);
}

.checkin-reservation-help-trigger {
  justify-self: start;
  width: fit-content;
  max-width: min(100%, 360px);
  border: 1px solid rgba(231, 189, 123, 0.34);
  border-radius: 999px;
  padding: 12px 18px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(7, 13, 20, 0.34);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  backdrop-filter: blur(12px);
}

.checkin-reservation-help-trigger:hover,
.checkin-reservation-help-trigger:focus-visible {
  border-color: rgba(231, 189, 123, 0.68);
  color: #fff;
  background: rgba(7, 13, 20, 0.48);
  outline: none;
}

.checkin-reservation-help-popout {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 10060;
  transform: translate(-50%, -50%);
  width: min(540px, calc(100vw - 40px));
  max-height: min(76dvh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.checkin-reservation-help-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(231, 189, 123, 0.3);
  border-radius: 24px;
  color: #1f160f;
  text-align: left;
  background: rgba(255, 251, 245, 0.96);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

.checkin-reservation-help-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(94, 65, 38, 0.12);
  border-radius: 999px;
  color: #5d4532;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.checkin-reservation-help-close:hover,
.checkin-reservation-help-close:focus-visible {
  border-color: rgba(94, 65, 38, 0.26);
  outline: none;
}

.checkin-reservation-help-head {
  display: grid;
  gap: 7px;
  padding-right: 40px;
}

.checkin-reservation-help-head span {
  color: #9b6a36;
  font-size: 11px;
  font-weight: 860;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkin-reservation-help-head h2 {
  margin: 0;
  color: #1f160f;
  font-size: 25px;
  font-weight: 860;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.checkin-reservation-help-head p,
.checkin-reservation-help-note {
  margin: 0;
  color: #69513d;
  font-size: 14px;
  line-height: 1.48;
}

.checkin-reservation-help-list {
  display: grid;
  gap: 8px;
}

.checkin-reservation-help-list article {
  display: grid;
  grid-template-columns: minmax(88px, 0.74fr) minmax(128px, 1fr);
  gap: 4px 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid rgba(94, 65, 38, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
}

.checkin-reservation-help-list strong {
  color: #312318;
  font-size: 14px;
}

.checkin-reservation-help-list code {
  color: #7d542f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 820;
}

.checkin-reservation-help-list span {
  grid-column: 1 / -1;
  color: #765e49;
  font-size: 12px;
  line-height: 1.36;
}

.checkin-reservation-help-note {
  padding: 13px 14px;
  border-radius: 16px;
  color: #4d3928;
  background: #f5eadb;
  font-weight: 650;
}

.checkin-mobile-hint {
  position: absolute;
  top: 50%;
  right: clamp(32px, 8vw, 142px);
  bottom: auto;
  z-index: 3;
  display: grid;
  justify-items: center;
  width: min(292px, 24vw);
  gap: 16px;
  padding: 24px 24px 20px;
  transform: translateY(calc(-38% - 50px));
  border: 1px solid rgba(231, 189, 123, 0.3);
  border-radius: 24px;
  color: #fff;
  text-align: center;
  background: rgba(7, 13, 20, 0.48);
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 84px rgba(0, 0, 0, 0.32);
}

.checkin-mobile-hint-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 100%;
  text-align: left;
}

.checkin-mobile-hint-heading svg {
  width: 30px;
  height: 30px;
  color: #e7bd7b;
}

.checkin-mobile-hint-heading strong {
  display: block;
  margin-bottom: 3px;
  font-size: 18px;
  color: #e7bd7b;
  font-weight: 840;
}

.checkin-mobile-hint-heading span,
.checkin-mobile-hint-note {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.4;
}

.checkin-mobile-hint-note {
  max-width: 222px;
  padding-top: 1px;
}

.checkin-qr-card {
  display: grid;
  place-items: center;
  width: 164px;
  height: 164px;
  border-radius: 18px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}

.checkin-qr-card img {
  display: block;
  width: 100%;
  height: 100%;
}

.checkin-stepper {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 3vw, 34px);
  width: min(1120px, calc(100% - 116px));
  margin: 0 auto 94px;
  border: 1px solid rgba(255, 238, 221, 0.18);
  border-radius: 18px;
  padding: 15px 22px;
  background: rgba(18, 15, 13, 0.56);
  backdrop-filter: blur(16px);
}

.checkin-stepper span {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.58);
}

.checkin-stepper b {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 17px;
}

.checkin-stepper em {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkin-stepper .is-active {
  color: #fff;
}

.checkin-stepper .is-active b {
  border-color: #dfb06a;
  color: #231b13;
  background: #dfb06a;
}

.checkin-access-note {
  position: absolute;
  bottom: calc(var(--checkin-footer-bottom) + var(--checkin-footer-height) + var(--checkin-footer-gap));
  left: 50%;
  z-index: 3;
  display: grid;
  gap: 6px;
  width: min(500px, calc(100% - 96px));
  border: 1px solid rgba(231, 195, 133, 0.32);
  border-radius: 16px;
  padding: 14px 16px;
  justify-items: center;
  text-align: center;
  background: rgba(7, 13, 20, 0.42);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.checkin-access-note strong {
  color: #e7bd7b;
  font-size: 15px;
  font-weight: 820;
}

.checkin-access-note span {
  max-width: none;
  color: rgba(255, 249, 239, 0.82);
  font-size: 14px;
  line-height: 1.4;
  text-shadow: none;
}

.checkin-access-note-copy-short {
  display: none;
}

.checkin-help-bar {
  position: absolute;
  bottom: var(--checkin-footer-bottom);
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.3vw, 22px);
  width: min(1120px, calc(100% - 48px));
  box-sizing: border-box;
  height: var(--checkin-footer-height);
  border: 1px solid rgba(239, 208, 157, 0.22);
  border-radius: 18px;
  padding: 12px 32px;
  color: rgba(255, 248, 238, 0.93);
  background: rgba(7, 13, 20, 0.48);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.checkin-help-title,
.checkin-contact-card {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.checkin-help-title {
  gap: 14px;
  min-width: 250px;
  padding: 0 4px;
  white-space: nowrap;
}

.checkin-help-title strong,
.checkin-contact-card {
  color: inherit;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
}

.checkin-contact-card {
  gap: 16px;
  min-width: min(300px, 28vw);
  border: 1px solid rgba(224, 182, 110, 0.24);
  border-radius: 18px;
  padding: 8px 22px;
  white-space: nowrap;
}

.checkin-contact-card > span {
  display: grid;
  gap: 3px;
}

.checkin-contact-card em {
  color: #e1b66e;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
}

.checkin-contact-card b {
  color: rgba(255, 249, 240, 0.94);
  font-weight: 400;
}

.checkin-help-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: #dfb46d;
}

.checkin-contact-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: #dfb46d;
}

.checkin-help-separator {
  width: 1px;
  height: 46px;
  background: rgba(240, 218, 179, 0.23);
}

.checkin-legal-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  min-height: 42px;
  padding: 0 24px 18px;
}

.checkin-legal-link {
  align-self: center;
  color: rgba(255, 244, 236, 0.62);
  font-size: 12px;
  font-weight: 720;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
}

.checkin-legal-link:hover,
.checkin-legal-link:focus-visible {
  color: #f0c678;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkin-form-screen {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: var(--checkin-visual-viewport-height, 100dvh);
  overflow: hidden;
  color: #fff;
  background: #080e16;
}

.checkin-soft-bg {
  background:
    radial-gradient(circle at 12% 13%, rgba(236, 135, 95, 0.24), transparent 29%),
    radial-gradient(circle at 86% 20%, rgba(124, 78, 171, 0.24), transparent 34%),
    linear-gradient(90deg, rgba(4, 10, 17, 0.89), rgba(6, 12, 20, 0.74)),
    url('/assets/check-in-hero.png') center / cover;
}

.checkin-form-card {
  position: relative;
  z-index: 2;
  align-self: center;
  display: grid;
  gap: 18px;
  width: min(860px, calc(100% - 64px));
  margin: clamp(-28px, -3vh, -12px) auto 28px;
  border: 1px solid rgba(255, 231, 213, 0.19);
  border-radius: 28px;
  padding: clamp(24px, 3.3vw, 40px);
  background: linear-gradient(135deg, rgba(17, 25, 34, 0.9), rgba(9, 15, 23, 0.84));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(22px);
}

.wa-checkin-keyboard-open .checkin-form-card,
.wa-checkin-keyboard-open .checkin-result-card {
  scroll-margin-block: 24px;
}

.checkin-copy,
.checkin-result-hero {
  display: grid;
  gap: 10px;
  text-align: center;
}

.checkin-copy h1,
.checkin-result-hero h1 {
  margin: 0;
  color: #fffaf6;
  font-family: Lora, Georgia, serif;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0;
}

.checkin-copy span,
.checkin-result-hero p {
  max-width: 520px;
  margin: 0 auto;
  color: rgba(255, 244, 236, 0.72);
  font-size: 16px;
  line-height: 1.55;
}

.checkin-result-hero.is-warn span {
  color: #b45309;
}

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

.checkin-email-form {
  display: grid;
  gap: 14px;
}

.checkin-form label,
.checkin-email-form label {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255, 237, 224, 0.14);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: none;
}

.checkin-form label:nth-child(3),
.checkin-form .checkin-message,
.checkin-form .checkin-primary,
.checkin-form .checkin-secondary {
  grid-column: 1 / -1;
}

.checkin-form .checkin-primary {
  width: 100%;
}

.checkin-email-form .checkin-primary,
.checkin-form-screen > .checkin-form-card > .checkin-primary,
.checkin-form-screen > .checkin-form-card > .checkin-secondary {
  width: 100%;
}

.checkin-form label span,
.checkin-email-form label span {
  color: rgba(255, 238, 227, 0.7);
  font-size: 13px;
  font-weight: 830;
}

.checkin-form input,
.checkin-email-form input {
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 0;
  color: #fffaf6;
  background: transparent;
  font-size: 20px;
  font-weight: 720;
}

.checkin-form input::placeholder,
.checkin-email-form input::placeholder {
  color: rgba(255, 238, 227, 0.43);
}

.checkin-form input:focus,
.checkin-email-form input:focus {
  outline: 0;
}

.checkin-form input[type='date']::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(1) brightness(2);
  opacity: 0.92;
}

.checkin-form label:focus-within,
.checkin-email-form label:focus-within {
  border-color: rgba(243, 151, 112, 0.82);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 4px rgba(243, 116, 100, 0.14);
}

.checkin-message {
  margin: 0;
  border: 1px solid rgba(185, 28, 28, 0.18);
  border-radius: 14px;
  padding: 12px 14px;
  color: #ffd0c8;
  background: rgba(127, 29, 29, 0.42);
  font-weight: 720;
}

.checkin-notice {
  margin: 0;
  border: 1px solid rgba(222, 180, 108, 0.28);
  border-radius: 14px;
  padding: 12px 14px;
  color: #f2cf90;
  background: rgba(116, 78, 35, 0.3);
  font-weight: 620;
}

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

.checkin-summary article {
  display: grid;
  gap: 6px;
  min-height: 86px;
  border: 1px solid rgba(255, 237, 224, 0.12);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.075);
}

.checkin-summary span {
  color: rgba(255, 238, 227, 0.6);
  font-size: 12px;
  font-weight: 830;
  text-transform: uppercase;
}

.checkin-summary strong {
  align-self: end;
  color: #fffaf6;
  font-size: clamp(18px, 2.4vw, 25px);
}

.checkin-apartment-group,
.checkin-session-timer {
  margin: 0;
  border: 1px solid rgba(255, 237, 224, 0.14);
  border-radius: 16px;
  padding: 12px 14px;
  color: rgba(255, 247, 241, 0.78);
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  line-height: 1.4;
}

.checkin-apartment-group {
  display: grid;
  gap: 5px;
}

.checkin-apartment-group span {
  color: rgba(255, 238, 227, 0.62);
  font-size: 12px;
  font-weight: 760;
}

.checkin-apartment-group strong,
.checkin-session-timer strong {
  color: #fffaf6;
}

.checkin-session-timer {
  text-align: center;
}

.checkin-access-summary {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(231, 195, 133, 0.28);
  border-radius: 18px;
  padding: clamp(16px, 2.3vw, 22px);
  color: rgba(255, 247, 241, 0.84);
  background: rgba(255, 255, 255, 0.055);
}

.checkin-access-summary > p {
  margin: 0;
  color: rgba(255, 247, 241, 0.78);
  font-size: 15px;
  line-height: 1.5;
}

.checkin-access-intro {
  display: grid;
  gap: 6px;
  padding: 2px 0;
}

.checkin-access-intro strong {
  color: #f1c37c;
  font-size: 13px;
  font-weight: 820;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.checkin-access-intro p {
  margin: 0;
  color: rgba(255, 247, 241, 0.8);
  font-size: 15px;
  line-height: 1.5;
}

.checkin-access-stay {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 10px;
  margin: 0;
}

.checkin-access-stay div,
.checkin-access-codes article {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid rgba(255, 237, 224, 0.12);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.055);
}

.checkin-access-stay dt,
.checkin-access-codes span {
  color: rgba(255, 238, 227, 0.6);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.checkin-access-stay dd,
.checkin-access-codes strong,
.checkin-access-codes b {
  margin: 0;
  color: #fffaf6;
  font-size: 17px;
  line-height: 1.28;
}

.checkin-access-dates dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.checkin-access-dates dd span {
  color: #f1c37c;
  font-size: 15px;
  font-weight: 820;
}

.checkin-access-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.checkin-access-codes strong {
  color: #f1c37c;
  font-size: 21px;
}

.checkin-access-codes strong small {
  font-size: 12px;
}

.checkin-reader-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(158px, 220px);
  align-items: center;
  gap: clamp(16px, 3vw, 28px);
  border-top: 1px solid rgba(231, 195, 133, 0.2);
  padding-top: 18px;
}

.checkin-reader-guide > div {
  display: grid;
  gap: 8px;
}

.checkin-reader-guide > div > span {
  color: #f1c37c;
  font-size: 12px;
  font-weight: 820;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.checkin-reader-guide h2 {
  margin: 0;
  color: #fffaf6;
  font-family: Lora, Georgia, serif;
  font-size: clamp(21px, 2.7vw, 29px);
  line-height: 1.17;
}

.checkin-reader-guide p {
  margin: 0;
  color: rgba(255, 247, 241, 0.75);
  font-size: 14px;
  line-height: 1.5;
}

.checkin-reader-guide figure {
  display: grid;
  justify-items: center;
  gap: 7px;
  margin: 0;
}

.checkin-reader-image-frame {
  display: grid;
  place-items: center;
  width: min(100%, 148px);
  padding: 7px;
  border: 1px solid rgba(255, 247, 233, 0.72);
  border-radius: 14px;
  background: rgba(255, 251, 245, 0.84);
  box-shadow: 0 11px 24px rgba(0, 0, 0, 0.22);
}

.checkin-reader-guide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #050505;
}

.checkin-reader-guide figcaption {
  color: rgba(255, 232, 193, 0.82);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.checkin-access-notes {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(231, 195, 133, 0.2);
  padding-top: 16px;
}

.checkin-access-notes p {
  margin: 0;
  color: rgba(255, 247, 241, 0.76);
  font-size: 13px;
  line-height: 1.5;
}

.checkin-access-notes p:first-child {
  color: #f2cf90;
  font-weight: 720;
}

.checkin-access-notes a {
  color: #f1c37c;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.checkin-access-contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 14px;
  padding-top: 4px;
}

.checkin-access-contact strong {
  color: #f2cf90;
  font-size: 13px;
  font-weight: 760;
}

.checkin-access-contact a {
  font-size: 13px;
}

.checkin-audit-page { display: grid; gap: 18px; }
.checkin-audit-notice { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border)); border-radius: 8px; background: color-mix(in srgb, var(--accent-soft) 44%, transparent); }
.checkin-audit-notice strong { color: var(--ink); font-size: 14px; }
.checkin-audit-notice p, .checkin-audit-log-head p { margin: 0; color: var(--ink3); font-size: 13px; line-height: 1.45; }
.checkin-audit-period { display: flex; flex-wrap: wrap; gap: 8px; }
.checkin-audit-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.checkin-audit-stats article { display: grid; gap: 4px; min-height: 112px; padding: 16px; border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: 8px; background: var(--surface); }
.checkin-audit-stats article.is-good { border-top-color: #24966d; }.checkin-audit-stats article.is-warn { border-top-color: #d89218; }.checkin-audit-stats article.is-bad { border-top-color: #d24d5f; }
.checkin-audit-stats span, .checkin-audit-stats small { color: var(--ink3); font-size: 12px; }.checkin-audit-stats strong { color: var(--ink); font-size: 27px; line-height: 1.05; }
.checkin-audit-log { padding: 0; overflow: hidden; }.checkin-audit-log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); }.checkin-audit-log-head h2 { margin: 0 0 4px; color: var(--ink); font-size: 16px; }.checkin-audit-log-head > span { color: var(--ink3); font-size: 12px; }
.checkin-audit-table-wrap { overflow-x: auto; }.checkin-audit-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 13px; }.checkin-audit-table th, .checkin-audit-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); color: var(--ink2); }.checkin-audit-table th { color: var(--ink3); font-size: 11px; font-weight: 750; text-transform: uppercase; }.checkin-audit-table tr:last-child td { border-bottom: 0; }
.checkin-audit-more { align-items: center; display: flex; gap: 10px; justify-content: center; padding: 14px 16px; color: var(--ink3); font-size: 12px; }
.checkin-audit-outcome { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; text-transform: uppercase; }.checkin-audit-outcome.is-good { color: #08734c; background: #e3f7ed; }.checkin-audit-outcome.is-warn { color: #986008; background: #fff2d7; }.checkin-audit-outcome.is-bad { color: #a42f40; background: #ffe8ec; }
@media (max-width: 760px) { .checkin-audit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }.checkin-audit-stats article { min-height: 98px; padding: 13px; } }

.checkin-steps {
  display: grid;
  gap: 10px;
}

.checkin-steps article {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255, 237, 224, 0.1);
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.checkin-steps span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #fff;
  background: #b26254;
  font-weight: 830;
}

.checkin-steps p {
  margin: 0;
  color: rgba(255, 247, 241, 0.86);
  font-weight: 660;
  line-height: 1.35;
}

.checkin-email-preview {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(255, 237, 224, 0.14);
  border-radius: 22px;
  padding: 16px;
  background: rgba(4, 9, 15, 0.38);
  box-shadow: none;
}

.checkin-email-preview header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 237, 224, 0.1);
}

.checkin-email-preview header span {
  color: #f37464;
}

.checkin-email-preview header strong {
  color: rgba(255, 239, 230, 0.62);
  font-size: 13px;
  font-weight: 760;
}

.checkin-email-preview div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: baseline;
}

.checkin-email-preview span {
  color: rgba(255, 238, 227, 0.58);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.checkin-email-preview strong {
  color: #fffaf6;
  font-weight: 820;
}

.checkin-email-preview pre {
  max-height: min(38vh, 430px);
  overflow: auto;
  margin: 0;
  border: 1px solid rgba(255, 237, 224, 0.11);
  border-radius: 18px;
  padding: 16px;
  color: rgba(255, 247, 241, 0.9);
  background: rgba(0, 0, 0, 0.26);
  font: 650 15px/1.6 Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: pre-wrap;
}

.checkin-form-top .checkin-lang,
.checkin-form-top .checkin-back {
  border-color: rgba(255, 236, 221, 0.18);
  color: #fffaf6;
  background: rgba(7, 13, 21, 0.48);
}

.checkin-form-screen .checkin-secondary {
  border-color: rgba(255, 237, 224, 0.18);
  color: #fffaf6;
  background: rgba(255, 255, 255, 0.07);
}

@media (max-width: 820px) {
  .checkin-form-screen {
    display: block;
    min-height: var(--checkin-visual-viewport-height, 100dvh);
    overflow-x: clip;
    overflow-y: visible;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .checkin-form-card {
    align-self: auto;
    margin: 0 auto 24px;
  }

  .checkin-form-screen .checkin-stepper {
    margin: 0 auto 18px;
  }

  .checkin-welcome {
    --checkin-footer-bottom: max(12px, env(safe-area-inset-bottom));
    --checkin-footer-height: 146px;
    --checkin-footer-gap: 18px;
    display: flex;
    flex-direction: column;
    min-height: var(--checkin-visual-viewport-height, 100dvh);
    overflow: visible;
    padding: 0;
  }

  .checkin-welcome-photo {
    background-position: 62% center;
  }

  .checkin-welcome-top {
    align-items: flex-start;
    padding: 18px;
  }

  .checkin-brand {
    gap: 10px;
    padding: 0;
  }

  .checkin-brand img {
    width: 54px;
    height: 54px;
    border-radius: 13px;
  }

  .checkin-brand strong {
    font-size: 19px;
    white-space: nowrap;
  }

  .checkin-brand span {
    font-size: 12px;
  }

  .checkin-lang {
    min-width: 66px;
    height: 52px;
    padding: 0 12px;
    font-size: 14px;
  }

  .checkin-lang b,
  .checkin-lang-code {
    display: none;
  }

  .checkin-lang::after {
    content: attr(data-lang-short);
    order: 1;
    font-size: 12px;
    font-weight: 850;
  }

  .checkin-lang-chevron {
    order: 2;
    font-size: 0;
  }

  .checkin-language-menu {
    width: min(286px, calc(100vw - 32px));
    position: fixed;
    top: 84px;
    right: 16px;
    max-height: calc(100dvh - 104px);
    overflow-y: auto;
    border-color: rgba(229, 202, 156, 0.46);
    background: rgba(7, 13, 20, 0.34);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.72);
  }

  .checkin-welcome-copy {
    align-self: stretch;
    flex: 0 0 auto;
    gap: 0;
    width: min(560px, calc(100% - 40px));
    min-width: 0;
    margin: clamp(68px, 11svh, 104px) auto 0;
    padding-bottom: 0;
    text-align: center;
  }

  .checkin-welcome-hero,
  .checkin-welcome-hero > span {
    min-width: 0;
    max-width: 100%;
  }

  .checkin-welcome-hero > span,
  .checkin-access-note span {
    overflow-wrap: anywhere;
  }

  .checkin-welcome-kicker {
    font-size: 12px;
    justify-self: center;
    justify-content: center;
    margin: 0 0 20px;
  }

  .checkin-welcome-copy h1 {
    font-size: clamp(52px, 15vw, 74px);
    line-height: 0.95;
    margin: 0 0 18px;
  }

  .checkin-welcome-hero > span {
    font-size: clamp(15px, 4.3vw, 21px);
    line-height: 1.28;
    margin: 0 auto 24px;
  }

  .checkin-welcome-hero {
    transform: none;
  }

  .checkin-welcome .checkin-primary {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    font-size: 18px;
    margin-bottom: 16px;
  }

  .checkin-reservation-help-trigger {
    justify-self: center;
    max-width: 100%;
    padding: 11px 16px;
    font-size: 13px;
  }

  .checkin-reservation-help-popout {
    position: fixed;
    inset: max(78px, env(safe-area-inset-top)) 16px auto;
    z-index: 10060;
    transform: none;
    width: auto;
    max-height: min(72dvh, 560px);
    overflow-y: auto;
  }

  .checkin-reservation-help-card {
    gap: 13px;
    padding: 18px;
    border-radius: 20px;
  }

  .checkin-reservation-help-head h2 {
    font-size: 21px;
  }

  .checkin-reservation-help-list article {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .checkin-access-note {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 4;
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    border-radius: 14px;
    padding: 12px 14px;
    margin: auto 20px 0;
    justify-items: center;
    text-align: center;
    transform: none;
  }

  .checkin-access-note strong {
    font-size: 13px;
  }

  .checkin-access-note span {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
  }

  .checkin-access-note-copy-full {
    display: none;
  }

  .checkin-access-note-copy-short {
    display: inline;
  }

  .checkin-mobile-hint {
    display: none;
  }

  .checkin-stepper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    width: calc(100% - 40px);
    margin: 0 auto 18px;
    border-radius: 16px;
    padding: 9px 10px;
  }

  .checkin-help-bar {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    height: var(--checkin-footer-height);
    min-height: 0;
    margin: var(--checkin-footer-gap) 16px var(--checkin-footer-bottom);
    border-radius: 15px;
    padding: 9px 12px;
    transform: none;
  }

  .checkin-help-title,
  .checkin-help-bar > .checkin-help-separator {
    display: none;
  }

  .checkin-legal-footer {
    min-height: 34px;
    padding: 0 20px calc(10px + env(safe-area-inset-bottom));
  }

  .checkin-legal-link { font-size: 11px; }

  .checkin-contact-card {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid rgba(224, 182, 110, 0.3);
    border-radius: 11px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  }

  .checkin-contact-card:active {
    border-color: rgba(224, 182, 110, 0.56);
    background: rgba(224, 182, 110, 0.14);
    transform: scale(0.99);
  }

  .checkin-contact-card > span {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .checkin-contact-card em {
    font-size: 10px;
  }

  .checkin-contact-card b {
    overflow: visible;
    text-overflow: clip;
  }

  .checkin-contact-icon {
    width: 18px;
    height: 18px;
  }

  .checkin-stepper span {
    justify-content: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.68);
  }

  .checkin-stepper b {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .checkin-stepper em {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: normal;
  }

  .checkin-form {
    grid-template-columns: 1fr;
  }

  .checkin-email-preview pre {
    max-height: 36vh;
    font-size: 13px;
  }

  .checkin-email-preview header {
    display: grid;
  }

  .checkin-email-preview div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (max-width: 560px) {
  .checkin-welcome-top,
  .checkin-form-top {
    padding: 16px;
  }

  .checkin-welcome-copy h1 {
    font-size: 58px;
  }

  .checkin-welcome-hero > span {
    font-size: 19px;
  }

  .checkin-primary,
  .checkin-secondary {
    width: 100%;
    min-height: 58px;
    font-size: 16px;
  }

  .checkin-form-card {
    width: calc(100% - 28px);
    border-radius: 22px;
    padding: 20px;
  }

  .checkin-summary {
    grid-template-columns: 1fr;
  }

  .checkin-access-stay {
    grid-template-columns: 1fr;
  }

  .checkin-access-dates dd { justify-content: flex-start; }

  .checkin-access-contact {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .checkin-access-summary > p {
    font-size: 14px;
  }

  .checkin-reader-guide {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .checkin-reader-guide > div {
    justify-items: center;
  }

  .checkin-reader-image-frame {
    width: min(100%, 126px);
    padding: 6px;
  }
}

.wa-dash-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  min-height: 184px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(8, 11, 14, .91), rgba(11, 13, 16, .64) 48%, rgba(11, 13, 16, .20)),
    url('/assets/wa-dashboard-hero-2026.png') center / cover;
  box-shadow: 0 22px 60px rgba(17, 24, 39, .18);
}

.wa-dash-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  max-width: 760px;
  padding: clamp(22px, 3vw, 32px);
}

.wa-dash-hero-copy > span,
.wa-dash-card header p,
.wa-dash-hero-panel > span,
.wa-dash-source {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wa-dash-hero-copy > span {
  color: rgba(255, 255, 255, .74);
}

.wa-dash-hero-copy h1 {
  max-width: 720px;
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
}

.wa-dash-hero-copy p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.55;
}

.wa-dash-hero-status,
.wa-dash-hero-panel {
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px);
}

.wa-dash-hero-status {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
}

.wa-dash-hero-status strong,
.wa-dash-hero-panel strong {
  font-weight: 750;
}

.wa-dash-hero-status small,
.wa-dash-hero-panel small {
  color: rgba(255, 255, 255, .72);
  line-height: 1.4;
}

.wa-dash-hero-panel {
  align-self: end;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(260px, calc(100% - 32px));
  margin: 0 18px 18px 0;
  padding: 16px;
  border-radius: 16px;
}

.wa-dash-hero-panel strong {
  font-size: 52px;
  line-height: .9;
}

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

.wa-dash-metric {
  display: flex;
  min-width: 0;
  min-height: 82px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.wa-dash-metric:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: var(--shadow-md);
}

.wa-dash-metric span,
.wa-dash-metric small,
.wa-dash-row small,
.wa-dash-source-list small {
  color: var(--ink2);
  font-size: 12px;
  line-height: 1.35;
}

.wa-dash-metric span {
  font-weight: 750;
}

.wa-dash-metric strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1;
  font-weight: 760;
}

.wa-dash-metric.is-revenue { border-top: 3px solid #2563eb; }
.wa-dash-metric.is-positive { border-top: 3px solid var(--positive); }
.wa-dash-metric.is-info { border-top: 3px solid #0891b2; }
.wa-dash-metric.is-warn { border-top: 3px solid var(--warning); }
.wa-dash-metric.is-danger { border-top: 3px solid var(--danger); }
.wa-dash-metric.is-neutral { border-top: 3px solid color-mix(in srgb, var(--accent) 40%, var(--surface3)); }

.wa-dash-priority {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.wa-dash-priority header { align-items: baseline; display: flex; justify-content: space-between; gap: 12px; }
.wa-dash-priority header strong { color: var(--ink); font-size: 15px; }
.wa-dash-priority header span,
.wa-dash-priority-empty { color: var(--ink2); font-size: 12px; line-height: 1.4; }
.wa-dash-priority-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.wa-dash-priority-row {
  align-items: center;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface2);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.wa-dash-priority-row:hover { border-color: color-mix(in srgb, var(--accent) 36%, var(--line)); }
.wa-dash-priority-row > span { width: 8px; height: 8px; border-radius: 999px; background: var(--warning); }
.wa-dash-priority-row.is-danger > span { background: var(--danger); }
.wa-dash-priority-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.wa-dash-priority-row small { color: var(--ink2); font-size: 11px; white-space: nowrap; }

.wa-dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 12px;
  align-items: start;
}

.wa-dash-column {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.wa-dash-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.wa-dash-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px 11px;
  border-bottom: 1px solid var(--line2);
}

.wa-dash-card h2 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.18;
  font-weight: 760;
}

.wa-dash-card header p {
  margin: 0;
  color: var(--ink2);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 560;
}

.wa-dash-source {
  flex: 0 0 auto;
  max-width: 210px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--surface2);
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-dash-source.is-ok {
  background: var(--pos-bg);
  color: color-mix(in srgb, var(--positive) 82%, var(--ink));
}

.wa-dash-source.is-warn {
  background: var(--warn-bg);
  color: color-mix(in srgb, var(--warning) 82%, var(--ink));
}

.wa-dash-list {
  display: flex;
  flex-direction: column;
}

.wa-dash-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 10px 16px;
  border-top: 1px solid var(--line2);
}

.wa-dash-card header + .wa-dash-list .wa-dash-row:first-child {
  border-top: 0;
}

.wa-dash-row strong {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.wa-dash-dot,
.wa-dash-date {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.wa-dash-dot::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
}

.wa-dash-dot.is-info,
.wa-dash-date {
  background: var(--info-bg);
  color: var(--info);
}

.wa-dash-dot.is-ok {
  background: var(--pos-bg);
  color: var(--positive);
}

.wa-dash-dot.is-warn {
  background: var(--warn-bg);
  color: var(--warning);
}

.wa-dash-dot.is-danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.wa-dash-date {
  width: 42px;
  border-radius: 10px;
}

.wa-dash-empty {
  padding: 20px 18px;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.45;
}

.wa-dash-card--sources {
  margin-top: 12px;
}

.wa-dash-source-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--line2);
}

.wa-dash-source-list article {
  min-width: 0;
  padding: 16px;
  background: var(--surface);
}

.wa-dash-source-list strong,
.wa-dash-source-list span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.wa-dash-source-list strong {
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 13px;
}

.wa-dash-source-list span {
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
}

.wa-dash-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
  border-radius: 14px;
  background: var(--warn-bg);
  color: color-mix(in srgb, var(--warning) 78%, var(--ink));
  font-size: 13px;
}

.wa-dash-error span {
  color: var(--ink2);
}

@media (max-width: 1320px) {
  .wa-dash-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wa-dash-source-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .wa-dash-hero,
  .wa-dash-grid {
    grid-template-columns: 1fr;
  }

  .wa-dash-card--large {
    grid-row: auto;
  }

  .wa-dash-hero-panel {
    justify-self: stretch;
    width: auto;
    margin: 0 18px 18px;
  }
}

@media (max-width: 760px) {
  .wa-dashboard-page .module-page-content {
    gap: 12px;
  }

  .wa-dash-hero {
    min-height: 0;
    border-radius: 18px;
  }

  .wa-dash-hero-copy {
    gap: 10px;
    padding: 18px 16px 12px;
  }

  .wa-dash-hero-copy h1 {
    font-size: 34px;
    line-height: 1;
  }

  .wa-dash-hero-copy p {
    display: none;
  }

  .wa-dash-hero-status {
    padding: 10px 12px;
    border-radius: 12px;
  }

  .wa-dash-hero-panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 12px 12px;
    padding: 13px 14px;
    border-radius: 14px;
  }

  .wa-dash-hero-panel strong {
    font-size: 42px;
  }

  .wa-dash-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .wa-dash-priority { padding: 13px; }
  .wa-dash-priority header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .wa-dash-priority-list { grid-template-columns: 1fr; }

  .wa-dash-source-list {
    grid-template-columns: 1fr;
  }

  .wa-dash-metric {
    min-height: 92px;
    gap: 8px;
    padding: 13px;
    border-radius: 14px;
  }

  .wa-dash-metric strong {
    font-size: 22px;
  }

  .wa-dash-grid {
    gap: 12px;
  }

  .wa-dash-card header {
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
  }

  .wa-dash-card h2 {
    font-size: 16px;
  }

  .wa-dash-row {
    min-height: 56px;
    gap: 10px;
    padding: 11px 14px;
  }

  .wa-dash-source {
    max-width: 100%;
  }

  .wa-dash-error {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (min-width: 821px) and (max-height: 850px) {
  .checkin-welcome { height: 100dvh; }
  .checkin-welcome-copy { transform: translateY(-30px); }
  .checkin-mobile-hint { right: 7vw; bottom: auto; transform: translateY(calc(-40% - 50px)) scale(0.88); transform-origin: right center; }
  .checkin-access-note { bottom: 88px; gap: 4px; margin-top: 0; padding: 8px 14px; }
  .checkin-access-note span { font-size: 12px; line-height: 1.32; }
  .checkin-stepper { margin-bottom: 82px; }
}

@media (min-width: 821px) {
  .checkin-welcome-copy {
    transform: translateY(clamp(-132px, -13vh, -96px));
  }
}

@media (min-width: 821px) and (max-height: 850px) {
  .checkin-welcome-copy {
    transform: translateY(clamp(-102px, -12vh, -84px));
  }
}