/* BokaLunch UI design system v9
   Visual presets are controlled by body[data-ui-style].
   Seasonal effects remain independent and can be enabled/disabled in Settings. */

:root{
  --ui-bg-a:#08111f;
  --ui-bg-b:#10182a;
  --ui-bg-glow-1:rgba(34,211,238,.24);
  --ui-bg-glow-2:rgba(139,92,246,.24);
  --ui-surface:rgba(12,23,41,.72);
  --ui-surface-strong:rgba(12,23,41,.91);
  --ui-surface-soft:rgba(255,255,255,.055);
  --ui-border:rgba(255,255,255,.13);
  --ui-grid:rgba(255,255,255,.085);
  --ui-text:#f7fbff;
  --ui-muted:#aab7c8;
  --ui-accent:#22d3ee;
  --ui-accent-2:#8b5cf6;
  --ui-accent-soft:rgba(34,211,238,.14);
  --ui-danger:#fb7185;
  --ui-header:rgba(8,17,31,.92);
  --ui-row-even:rgba(255,255,255,.025);
  --ui-row-hover:rgba(34,211,238,.085);
  --ui-shadow:0 26px 80px rgba(0,0,0,.36);
  --ui-radius:22px;
}

body[data-ui-style="aurora"]{
  --ui-bg-a:#07111e; --ui-bg-b:#121529;
  --ui-bg-glow-1:rgba(6,182,212,.30); --ui-bg-glow-2:rgba(124,58,237,.30);
  --ui-surface:rgba(8,18,34,.70); --ui-surface-strong:rgba(9,18,33,.92);
  --ui-surface-soft:rgba(255,255,255,.055); --ui-border:rgba(186,230,253,.15);
  --ui-grid:rgba(186,230,253,.09); --ui-text:#f5fbff; --ui-muted:#a7b6ca;
  --ui-accent:#22d3ee; --ui-accent-2:#a78bfa; --ui-accent-soft:rgba(34,211,238,.14);
  --ui-header:rgba(8,18,34,.94); --ui-row-even:rgba(255,255,255,.024); --ui-row-hover:rgba(34,211,238,.095);
}
body[data-ui-style="midnight"]{
  --ui-bg-a:#020617; --ui-bg-b:#0b1020;
  --ui-bg-glow-1:rgba(37,99,235,.23); --ui-bg-glow-2:rgba(14,165,233,.14);
  --ui-surface:rgba(4,11,28,.82); --ui-surface-strong:rgba(3,8,22,.95);
  --ui-surface-soft:rgba(148,163,184,.055); --ui-border:rgba(148,163,184,.14);
  --ui-grid:rgba(148,163,184,.09); --ui-text:#f8fafc; --ui-muted:#94a3b8;
  --ui-accent:#60a5fa; --ui-accent-2:#38bdf8; --ui-accent-soft:rgba(96,165,250,.13);
  --ui-header:rgba(2,6,23,.96); --ui-row-even:rgba(148,163,184,.025); --ui-row-hover:rgba(96,165,250,.09);
}
body[data-ui-style="neon"]{
  --ui-bg-a:#05020e; --ui-bg-b:#0d0720;
  --ui-bg-glow-1:rgba(217,70,239,.30); --ui-bg-glow-2:rgba(34,211,238,.27);
  --ui-surface:rgba(11,5,27,.74); --ui-surface-strong:rgba(12,5,29,.94);
  --ui-surface-soft:rgba(255,255,255,.052); --ui-border:rgba(232,121,249,.18);
  --ui-grid:rgba(103,232,249,.09); --ui-text:#fff8ff; --ui-muted:#c4b5d5;
  --ui-accent:#e879f9; --ui-accent-2:#22d3ee; --ui-accent-soft:rgba(232,121,249,.14);
  --ui-header:rgba(9,4,22,.96); --ui-row-even:rgba(255,255,255,.022); --ui-row-hover:rgba(232,121,249,.09);
}
body[data-ui-style="graphite"]{
  --ui-bg-a:#141619; --ui-bg-b:#202327;
  --ui-bg-glow-1:rgba(148,163,184,.12); --ui-bg-glow-2:rgba(99,102,241,.12);
  --ui-surface:rgba(27,30,34,.86); --ui-surface-strong:rgba(22,24,28,.96);
  --ui-surface-soft:rgba(255,255,255,.045); --ui-border:rgba(255,255,255,.11);
  --ui-grid:rgba(255,255,255,.075); --ui-text:#f3f4f6; --ui-muted:#a8adb5;
  --ui-accent:#cbd5e1; --ui-accent-2:#818cf8; --ui-accent-soft:rgba(203,213,225,.10);
  --ui-header:rgba(22,24,28,.97); --ui-row-even:rgba(255,255,255,.018); --ui-row-hover:rgba(255,255,255,.065);
}
body[data-ui-style="sunset"]{
  --ui-bg-a:#1b0d16; --ui-bg-b:#261420;
  --ui-bg-glow-1:rgba(251,146,60,.25); --ui-bg-glow-2:rgba(244,63,94,.24);
  --ui-surface:rgba(32,14,26,.76); --ui-surface-strong:rgba(31,13,25,.94);
  --ui-surface-soft:rgba(255,255,255,.052); --ui-border:rgba(253,186,116,.16);
  --ui-grid:rgba(253,186,116,.085); --ui-text:#fff8f3; --ui-muted:#d2b7b0;
  --ui-accent:#fb923c; --ui-accent-2:#fb7185; --ui-accent-soft:rgba(251,146,60,.13);
  --ui-header:rgba(31,13,25,.96); --ui-row-even:rgba(255,255,255,.022); --ui-row-hover:rgba(251,146,60,.085);
}
body[data-ui-style="nordic"]{
  --ui-bg-a:#edf4fa; --ui-bg-b:#dfeaf3;
  --ui-bg-glow-1:rgba(14,165,233,.14); --ui-bg-glow-2:rgba(99,102,241,.11);
  --ui-surface:rgba(255,255,255,.80); --ui-surface-strong:rgba(255,255,255,.96);
  --ui-surface-soft:rgba(15,23,42,.035); --ui-border:rgba(15,23,42,.11);
  --ui-grid:rgba(15,23,42,.085); --ui-text:#172033; --ui-muted:#64748b;
  --ui-accent:#0284c7; --ui-accent-2:#4f46e5; --ui-accent-soft:rgba(2,132,199,.09);
  --ui-header:rgba(248,250,252,.97); --ui-row-even:rgba(15,23,42,.018); --ui-row-hover:rgba(2,132,199,.065);
  --ui-shadow:0 25px 70px rgba(51,65,85,.18);
}
body[data-ui-style="classic"]{
  --ui-bg-a:#0f172a; --ui-bg-b:#111827;
  --ui-bg-glow-1:rgba(29,78,216,.30); --ui-bg-glow-2:rgba(124,58,237,.28);
  --ui-surface:rgba(255,255,255,.075); --ui-surface-strong:rgba(17,24,39,.93);
  --ui-surface-soft:rgba(255,255,255,.06); --ui-border:rgba(255,255,255,.18);
  --ui-grid:rgba(255,255,255,.12); --ui-text:#e5e7eb; --ui-muted:#9ca3af;
  --ui-accent:#60a5fa; --ui-accent-2:#7c3aed; --ui-accent-soft:rgba(96,165,250,.13);
  --ui-header:rgba(15,23,42,.90); --ui-row-even:rgba(255,255,255,.02); --ui-row-hover:rgba(96,165,250,.08);
}

/* Lunch tema can be disabled independently from seasonal effects.
   Off keeps the refreshed layout but uses a neutral, non-themed palette. */
body[data-lunch-theme="off"]{
  --ui-bg-a:#0b1220; --ui-bg-b:#111827;
  --ui-bg-glow-1:transparent; --ui-bg-glow-2:transparent;
  --ui-surface:rgba(17,24,39,.84); --ui-surface-strong:rgba(17,24,39,.97);
  --ui-surface-soft:rgba(255,255,255,.055); --ui-border:rgba(255,255,255,.14);
  --ui-grid:rgba(255,255,255,.10); --ui-text:#eef2f7; --ui-muted:#a5afbf;
  --ui-accent:#94a3b8; --ui-accent-2:#64748b; --ui-accent-soft:rgba(148,163,184,.12);
  --ui-header:rgba(15,23,42,.96); --ui-row-even:rgba(255,255,255,.02); --ui-row-hover:rgba(148,163,184,.07);
}
body[data-lunch-theme="off"]::before{opacity:.08;}

/* Shared visual refresh + ambient background light */
body{
  --ambient-base:var(--ui-bg-a);
  --ambient-glow-1:var(--ui-accent);
  --ambient-glow-2:var(--ui-accent-2);
  --ambient-opacity:.38;
  color:var(--ui-text) !important;
  min-height:100vh;
  height:auto !important;
  overflow-x:hidden;
  background:var(--ambient-base) !important;
  background-repeat:no-repeat !important;
  transition:background-color .28s ease,color .2s ease;
}
body[data-background-color-mode="custom"]{
  --ambient-base:var(--ambient-custom-base,#07111e);
  --ambient-glow-1:var(--ambient-custom-glow-1,#22d3ee);
  --ambient-glow-2:var(--ambient-custom-glow-2,#a78bfa);
}
body[data-background-glow-strength="low"]{--ambient-opacity:.22;}
body[data-background-glow-strength="medium"]{--ambient-opacity:.38;}
body[data-background-glow-strength="high"]{--ambient-opacity:.58;}

/* Seasonal adaptation only replaces glow colors; the base remains the selected Lunch theme/custom base. */
html.theme-vinter body[data-background-season="on"]{--ambient-glow-1:#60a5fa;--ambient-glow-2:#c4b5fd;}
html.theme-jul body[data-background-season="on"]{--ambient-glow-1:#22c55e;--ambient-glow-2:#ef4444;}
html.theme-nyar body[data-background-season="on"]{--ambient-glow-1:#f59e0b;--ambient-glow-2:#a855f7;}
html.theme-host body[data-background-season="on"]{--ambient-glow-1:#f97316;--ambient-glow-2:#dc2626;}
html.theme-var body[data-background-season="on"]{--ambient-glow-1:#22c55e;--ambient-glow-2:#60a5fa;}
html.theme-sommar body[data-background-season="on"]{--ambient-glow-1:#22c55e;--ambient-glow-2:#f59e0b;}
html.theme-pask body[data-background-season="on"]{--ambient-glow-1:#a855f7;--ambient-glow-2:#f9a8d4;}
html.theme-hjartan body[data-background-season="on"]{--ambient-glow-1:#ff2d55;--ambient-glow-2:#a855f7;}
html.theme-morsdag body[data-background-season="on"]{--ambient-glow-1:#fb7185;--ambient-glow-2:#c084fc;}

body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:44px 44px; mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 70%); opacity:.25;
}
body::after{
  content:"";
  position:fixed;
  left:-18vw; right:-18vw; top:-22vh; bottom:-22vh;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(circle at 18% 24%, color-mix(in srgb,var(--ambient-glow-1) 84%,transparent) 0%, transparent 31%),
    radial-gradient(circle at 84% 63%, color-mix(in srgb,var(--ambient-glow-2) 82%,transparent) 0%, transparent 33%),
    radial-gradient(circle at 48% 92%, color-mix(in srgb,var(--ambient-glow-1) 34%,var(--ambient-glow-2) 66%) 0%, transparent 27%);
  filter:blur(74px) saturate(118%);
  opacity:var(--ambient-opacity);
  transform:translate3d(0,0,0) scale(1.02);
  transform-origin:center;
  will-change:transform;
}
body[data-background-glow="off"]::after{display:none !important;}
body[data-background-glow="on"][data-background-glow-motion="on"]::after{animation:ambientLightDrift 24s ease-in-out infinite alternate;}
@keyframes ambientLightDrift{
  0%{transform:translate3d(-2.5%,-1.5%,0) scale(1.02) rotate(-1deg);}
  45%{transform:translate3d(2.5%,2%,0) scale(1.08) rotate(1.2deg);}
  100%{transform:translate3d(-1%,4%,0) scale(1.04) rotate(-.4deg);}
}
body[data-ui-style="nordic"]::before{background-image:linear-gradient(rgba(15,23,42,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.025) 1px,transparent 1px);}
body[data-ui-style="nordic"]::after{filter:blur(82px) saturate(108%);}
.app-shell{padding:28px 22px 22px !important; min-height:100vh;}
.container{
  width:min(1240px,96vw) !important;
  padding:22px 20px 20px !important;
  border-radius:var(--ui-radius) !important;
  color:var(--ui-text) !important;
  background:linear-gradient(145deg,var(--ui-surface),color-mix(in srgb,var(--ui-surface) 88%,transparent)) !important;
  border:1px solid var(--ui-border) !important;
  box-shadow:var(--ui-shadow), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter:blur(18px) saturate(125%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(125%) !important;
}
.container::before{
  inset:0 !important; border-radius:inherit !important; filter:none !important; opacity:1 !important;
  background:linear-gradient(90deg,var(--ring,var(--ui-accent)),var(--ring-2,var(--ui-accent-2))) top/100% 3px no-repeat !important;
}
.meta{gap:8px !important;margin-bottom:14px !important;color:var(--ui-muted) !important;}
.meta .pill{
  background:var(--ui-surface-soft) !important; border:1px solid var(--ui-border) !important; color:var(--ui-muted) !important;
  padding:7px 11px !important; border-radius:11px !important; font-size:12px; font-weight:750;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
#happyMsg{
  color:var(--ui-text) !important; background:none !important; -webkit-text-fill-color:initial !important;
  font-size:clamp(21px,2.1vw,29px) !important; letter-spacing:-.02em !important; margin:10px auto 14px !important;
  text-shadow:0 8px 28px color-mix(in srgb,var(--ui-accent) 20%,transparent);
}
.birthday-banner{
  background:linear-gradient(100deg,var(--ui-accent-soft),var(--ui-surface-soft)) !important;
  border:1px solid color-mix(in srgb,var(--ui-accent) 35%,var(--ui-border)) !important;
  color:var(--ui-text) !important; border-radius:16px !important; box-shadow:none !important;
}
.birthday-banner .item{background:var(--ui-surface-soft) !important;border-color:var(--ui-border) !important;color:var(--ui-text) !important;}
.controls{margin-bottom:14px !important;}
.controls button,.btn{
  color:var(--ui-text) !important; background:linear-gradient(180deg,var(--ui-surface-soft),color-mix(in srgb,var(--ui-surface-soft) 70%,transparent)) !important;
  border:1px solid var(--ui-border) !important; border-radius:11px !important; min-height:38px;
  box-shadow:0 5px 14px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease !important;
}
.controls button:hover,.btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--ui-accent) 45%,var(--ui-border)) !important;box-shadow:0 8px 20px rgba(0,0,0,.13) !important;}
.btn.primary{background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 78%,#fff 4%),var(--ui-accent-2)) !important;color:white !important;border-color:transparent !important;}
.btn.danger{border-color:color-mix(in srgb,var(--ui-danger) 48%,var(--ui-border)) !important;}
.table-card{
  background:color-mix(in srgb,var(--ui-surface-strong) 55%,transparent) !important; border:1px solid var(--ui-border) !important;
  border-radius:17px !important; box-shadow:0 10px 34px rgba(0,0,0,.12); overflow:auto !important;
}
table{color:var(--ui-text);}
thead th,tbody td{border-right-color:var(--ui-grid) !important;border-bottom-color:var(--ui-grid) !important;padding:10px 8px !important;}
thead th{
  background:var(--ui-header) !important;color:var(--ui-text) !important;font-size:12px !important;text-transform:uppercase;letter-spacing:.055em;font-weight:850 !important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
thead th:first-child{left:0;z-index:4;}
tbody td:first-child{
  position:sticky;left:0;z-index:2;background:var(--ui-header) !important;color:var(--ui-muted) !important;font-weight:850;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
tbody tr:nth-child(even) td:not(.locked):not(:first-child){background:var(--ui-row-even) !important;}
tbody td:not(:first-child):not(.locked):hover{background:var(--ui-row-hover) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 22%,transparent);}
td.closed-slot:not(.locked){color:color-mix(in srgb,var(--ui-muted) 56%,transparent) !important;}
td.locked{border-radius:10px !important;margin:1px;color:#0f172a !important;box-shadow:0 7px 16px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.45) !important;}
td.locked:hover{transform:translateY(-1px) scale(1.01) !important;box-shadow:0 10px 23px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.52) !important;}
.menu{
  background:var(--ui-surface-strong) !important;border:1px solid var(--ui-border) !important;color:var(--ui-text) !important;
  border-radius:14px !important;box-shadow:0 22px 52px rgba(0,0,0,.34) !important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.menu div{color:var(--ui-text) !important;}.menu div:hover{background:var(--ui-accent-soft) !important;}
.menu input,input[type="text"],input[type="password"],input[type="number"],input[type="date"],select,textarea{
  background:var(--ui-surface-soft) !important;color:var(--ui-text) !important;border-color:var(--ui-border) !important;
}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--ui-muted) 78%,transparent);}
select option{background:var(--ui-surface-strong);color:var(--ui-text);}
.modal-backdrop{
  background:linear-gradient(180deg,color-mix(in srgb,var(--ui-bg-a) 94%,#000 6%),color-mix(in srgb,var(--ui-bg-b) 94%,#000 6%)) !important;
  backdrop-filter:blur(14px) saturate(82%);-webkit-backdrop-filter:blur(14px) saturate(82%);
}
.modal,.bday-modal,.auth-card{
  background:var(--ui-surface-strong) !important;border-color:var(--ui-border) !important;color:var(--ui-text) !important;box-shadow:0 28px 90px rgba(0,0,0,.43) !important;
}
.modal .side{background:color-mix(in srgb,var(--ui-surface-strong) 90%,var(--ui-accent-soft)) !important;border-right-color:var(--ui-border) !important;}
.modal .head,.bday-modal .head{border-bottom-color:var(--ui-border) !important;}
.modal .head .title{font-size:17px;}
.tabbtn{background:transparent !important;color:var(--ui-muted) !important;border-color:transparent !important;border-radius:11px !important;}
.tabbtn:hover{background:var(--ui-surface-soft) !important;color:var(--ui-text) !important;}
.tabbtn.active{background:var(--ui-accent-soft) !important;color:var(--ui-text) !important;border-color:color-mix(in srgb,var(--ui-accent) 24%,transparent) !important;box-shadow:none !important;}
.card,.theme-row,.period-row,.bday-item{
  background:linear-gradient(145deg,var(--ui-surface-soft),color-mix(in srgb,var(--ui-surface-soft) 58%,transparent)) !important;
  border-color:var(--ui-border) !important;color:var(--ui-text) !important;
}
.card h4{font-size:15px !important;letter-spacing:-.01em;}.small,.row label,.theme-toolbar .small,.theme-ny-grid .small,.bday-item .meta{color:var(--ui-muted) !important;}
.toggle span{background:color-mix(in srgb,var(--ui-muted) 18%,transparent) !important;border-color:var(--ui-border) !important;}
.toggle input:checked + span{background:color-mix(in srgb,var(--ui-accent) 38%,transparent) !important;border-color:color-mix(in srgb,var(--ui-accent) 58%,var(--ui-border)) !important;}
#themeNowLabel{background:var(--ui-accent-soft) !important;border-color:color-mix(in srgb,var(--ui-accent) 26%,transparent) !important;color:var(--ui-text) !important;}

/* Design preset chooser */
.lunch-theme-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.lunch-theme-head h4{margin:0 0 5px !important;font-size:17px !important;}
.lunch-theme-enable{display:flex;align-items:center;gap:12px;padding:9px 11px;border:1px solid var(--ui-border);border-radius:14px;background:var(--ui-surface-soft);}
.lunch-theme-enable .small{font-weight:850;}
.design-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.design-intro h4{margin:0 0 5px !important;}.design-intro .small{max-width:660px;}
.design-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;transition:opacity .16s ease,filter .16s ease;}
.design-grid.lunch-theme-disabled{opacity:.52;filter:saturate(.45);}
.design-grid.lunch-theme-disabled .design-card:hover{opacity:1;filter:none;}
.design-card{
  position:relative;display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;padding:12px;border:1px solid var(--ui-border);border-radius:16px;
  background:var(--ui-surface-soft);cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.design-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--ui-accent) 42%,var(--ui-border));}
.design-card.active{border-color:var(--ui-accent);box-shadow:0 0 0 3px var(--ui-accent-soft);}
.design-preview{height:72px;border-radius:12px;border:1px solid rgba(255,255,255,.17);overflow:hidden;position:relative;box-shadow:0 8px 22px rgba(0,0,0,.18);}
.design-preview::before{content:"";position:absolute;left:10px;right:10px;top:10px;height:8px;border-radius:999px;background:rgba(255,255,255,.25);}
.design-preview::after{content:"";position:absolute;left:10px;right:10px;top:28px;height:33px;border-radius:8px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.19) 0 1px,transparent 1px 11px),repeating-linear-gradient(to right,rgba(255,255,255,.16) 0 1px,transparent 1px 31px);}
.design-preview.aurora{background:radial-gradient(circle at 10% 0,#155e75,transparent 55%),radial-gradient(circle at 100% 0,#5b21b6,transparent 55%),#07111e;}
.design-preview.midnight{background:radial-gradient(circle at 20% 0,#1e3a8a,transparent 55%),#020617;}
.design-preview.neon{background:radial-gradient(circle at 10% 0,#86198f,transparent 55%),radial-gradient(circle at 100% 0,#0e7490,transparent 55%),#05020e;}
.design-preview.graphite{background:linear-gradient(145deg,#32363b,#17191c);}
.design-preview.sunset{background:radial-gradient(circle at 10% 0,#9a3412,transparent 55%),radial-gradient(circle at 100% 0,#9f1239,transparent 55%),#1b0d16;}
.design-preview.nordic{background:radial-gradient(circle at 10% 0,#bae6fd,transparent 55%),linear-gradient(145deg,#f8fafc,#dbeafe);}.design-preview.nordic::before,.design-preview.nordic::after{filter:invert(1);opacity:.35;}
.design-preview.classic{background:radial-gradient(circle at 10% 0,#1d4ed8,transparent 55%),radial-gradient(circle at 100% 0,#6d28d9,transparent 55%),#0f172a;}
.design-card .design-name{font-weight:900;font-size:15px;color:var(--ui-text);}.design-card .design-desc{margin-top:4px;color:var(--ui-muted);font-size:12px;line-height:1.35;}
.design-check{position:absolute;right:10px;top:10px;width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:var(--ui-accent);color:white;font-size:12px;font-weight:900;opacity:0;transform:scale(.75);transition:.16s ease;}
.design-card.active .design-check{opacity:1;transform:scale(1);}
.design-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;align-items:center;}
.ambient-options{align-items:center;}
.ambient-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;transition:opacity .16s ease,filter .16s ease;}
.ambient-color-grid.disabled{opacity:.42;filter:saturate(.45);pointer-events:none;}
.ambient-color-field{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface-soft);color:var(--ui-muted);font-size:12px;font-weight:800;}
.ambient-color-field input[type="color"]{width:48px;height:32px;padding:2px;border-radius:9px;cursor:pointer;}

body[data-ui-density="compact"] thead th,body[data-ui-density="compact"] tbody td{padding:7px 6px !important;font-size:12px !important;}
body[data-ui-density="compact"] .meta .pill{padding:5px 9px !important;}
body[data-ui-density="compact"] .birthday-banner{padding:9px 14px !important;margin-bottom:9px !important;}
body[data-ui-density="compact"] #happyMsg{margin:7px auto 10px !important;font-size:clamp(19px,1.8vw,25px) !important;}

body[data-ui-motion="off"] *,body[data-ui-motion="off"] *::before,body[data-ui-motion="off"] *::after{transition:none !important;animation-duration:.001ms !important;animation-iteration-count:1 !important;}

/* Light preset needs explicit text overrides for legacy hard-coded white text. */
body[data-ui-style="nordic"] .modal .side h3,
body[data-ui-style="nordic"] .theme-row .name,
body[data-ui-style="nordic"] .theme-row .theme-sub,
body[data-ui-style="nordic"] .theme-row .theme-date-label,
body[data-ui-style="nordic"] .period-field label,
body[data-ui-style="nordic"] .auth-card p{color:var(--ui-muted) !important;}
body[data-ui-style="nordic"] td.locked.birthday-booking::before{background:rgba(255,255,255,.78);color:#7c2d12;}
body[data-ui-style="nordic"] .birthday-banner .item.today{color:#7c2d12 !important;}
body[data-ui-style="nordic"] .modal-backdrop{background:linear-gradient(180deg,#e7eef5,#dbe6ef) !important;}

@media (max-width:820px){
  .design-grid{grid-template-columns:1fr;}
  .ambient-color-grid{grid-template-columns:1fr;}
  .design-card{grid-template-columns:88px 1fr;}
  .design-preview{height:64px;}
}
@media (max-width:640px){
  .app-shell{padding:10px !important;}
  .container{width:min(100%,100vw) !important;padding:13px 9px !important;border-radius:18px !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
  .meta{justify-content:flex-start !important;}
  .table-card{border-radius:14px !important;}
  .design-options{grid-template-columns:1fr;}
}

/* Compact app header */
.app-topline{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 2px 13px;}
.app-brand{display:flex;align-items:center;gap:10px;color:var(--ui-text);}
.app-brand-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,var(--ui-accent-soft),var(--ui-surface-soft));border:1px solid var(--ui-border);font-size:19px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.app-brand strong{display:block;font-size:18px;letter-spacing:-.025em;line-height:1.05;}.app-brand small{display:block;margin-top:3px;color:var(--ui-muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;}
.live-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:var(--ui-surface-soft);border:1px solid var(--ui-border);color:var(--ui-muted);font-size:11px;font-weight:900;letter-spacing:.06em;}
.live-chip span{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.10),0 0 13px rgba(34,197,94,.55);}
body[data-ui-motion="on"] .live-chip span{animation:uiLivePulse 2s ease-in-out infinite;}@keyframes uiLivePulse{0%,100%{opacity:1}50%{opacity:.48}}
@media(max-width:640px){.app-topline{margin-bottom:10px}.app-brand-icon{width:34px;height:34px}.app-brand strong{font-size:16px}.live-chip{padding:6px 8px;font-size:10px}}

/* Settings legacy elements brought into the same design system */
.names-nav{background:linear-gradient(180deg,var(--ui-surface-strong),color-mix(in srgb,var(--ui-surface-strong) 10%,transparent)) !important;}
.chip{background:var(--ui-surface-soft) !important;border-color:var(--ui-border) !important;color:var(--ui-muted) !important;}
.chip.active,.chip:hover{background:var(--ui-accent-soft) !important;border-color:color-mix(in srgb,var(--ui-accent) 40%,var(--ui-border)) !important;color:var(--ui-text) !important;box-shadow:none !important;}
.cat-item{background:var(--ui-surface-soft) !important;border-color:var(--ui-border) !important;color:var(--ui-text) !important;}
#birthdaysList .cat-item,#categoriesList .cat-item{background:linear-gradient(135deg,var(--ui-surface-soft),color-mix(in srgb,var(--ui-accent-soft) 35%,transparent)) !important;}
.modal::before{background:linear-gradient(90deg,transparent,var(--ring,var(--ui-accent)),var(--ring-2,var(--ui-accent-2)),transparent) !important;}
.auth-backdrop{background:rgba(2,6,23,.62) !important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);}
.auth-card p{color:var(--ui-muted) !important;}.auth-error{color:var(--ui-danger) !important;}
.modal .body::-webkit-scrollbar-thumb,#birthdaysList::-webkit-scrollbar-thumb,#categoriesList::-webkit-scrollbar-thumb,.menu::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--ui-accent),var(--ui-accent-2)) !important;border-color:var(--ui-surface-strong) !important;}
body[data-ui-style="nordic"] .auth-backdrop{background:rgba(15,23,42,.28) !important;}


/* v6 settings scrolling + seamless surface */
.modal-backdrop{padding:12px !important;}
.modal{height:min(92vh,920px) !important;max-height:92vh !important;}
.modal .main{min-height:0 !important;overflow:hidden;}
.modal .body{min-height:0 !important;overflow-y:auto !important;overflow-x:hidden !important;padding-bottom:34px !important;scrollbar-gutter:stable;}
.modal .side{min-height:0;overflow-y:auto;}
#themesGrid{max-height:none !important;overflow:visible !important;padding-right:0 !important;scrollbar-gutter:auto !important;}
@media(max-width:820px){
  .modal-backdrop{padding:8px !important;}
  .modal{height:calc(100dvh - 16px) !important;max-height:calc(100dvh - 16px) !important;}
  .modal .side{overflow-x:auto;overflow-y:hidden;}
}

@media (prefers-reduced-motion: reduce){
  body::after{animation:none !important;}
}