:root {
  --blue: #0A4EA3;
  --blue-dark: #062B5F;
  --blue-soft: #F6F8FB;
  --green: #0A4EA3;
  --orange: #D99A00;
  --red: #DC2626;
  --bg: #F6F8FB;
  --text: #102033;
  --muted: #667085;
  --card: #ffffff;
  --border: #E4E7EC;
  --border-strong: #CBD5E1;
  --shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
  --radius: 18px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(10, 78, 163, 0.08), transparent 32%),
    linear-gradient(180deg, #FFF7E6 0%, var(--bg) 100%);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body { padding-bottom: 92px; }

.app {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 22px 18px;
}

/* Header */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.topbar h1 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.small {
  color: var(--muted);
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.topbar > div:first-child .small {
  color: #475467;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.logo-circle {
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-soft);
}

.logo-circle img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}

.dashboard-logo-panel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: min(228px, 44vw);
  min-width: 168px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}

.dashboard-logo-panel img {
  display: block;
  width: 100%;
  max-width: 218px;
  height: auto;
  object-fit: contain;
}

/* Hero */
.hero-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(76, 137, 190, 0.30), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(135deg, #030711 0%, #071832 42%, #0b3465 74%, #040914 100%);
  color: white;
  padding: 24px;
  border-radius: 20px;
  margin-bottom: 18px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(255,255,255,0.18);
}

.hero-card h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.hero-card p {
  margin: 0;
  color: rgba(255,255,255,0.86);
  line-height: 1.55;
}

/* Cards and layout */
.card {
  background: var(--card);
  padding: 20px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.card h2,
.card h3 {
  margin-top: 0;
  letter-spacing: -0.025em;
}

.card p {
  line-height: 1.55;
}

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

a.card {
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

a.card:hover {
  transform: translateY(-2px);
  border-color: rgba(10, 78, 163, 0.28);
  box-shadow: var(--shadow);
}

.child h3 { margin-top: 0; }
.child strong { color: var(--green); }

/* Forms */
label {
  display: block;
  font-weight: 700;
  margin: 14px 0 6px;
  color: #344054;
}

input, select, textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  font-size: 16px;
  font-family: inherit;
  background: white;
  color: var(--text);
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(10, 78, 163, 0.70);
  box-shadow: 0 0 0 4px rgba(10, 78, 163, 0.10);
}

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

/* Summary */
.percent-row { display: flex; justify-content: space-between; gap: 14px; }
.percent-row div { width: 50%; background: #F8FAFC; padding: 14px; border-radius: 14px; border: 1px solid var(--border); }
.percent-row strong { display: block; font-size: 28px; color: var(--blue); }
.percent-row span { color: var(--muted); font-size: 13px; }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.summary-grid div { background: rgba(255,255,255,0.14); padding: 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.16); }
.summary-grid strong { display: block; font-size: 22px; }
.summary-grid p { margin: 0; font-size: 13px; opacity: 0.85; }
.bar { height: 12px; background: var(--border); border-radius: 99px; margin: 16px 0 8px; overflow: hidden; }
.bar-fill { width: 50%; height: 100%; background: linear-gradient(90deg, var(--blue-dark), var(--orange)); }

/* Mini calendar */
.mini-calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; text-align: center; }
.mini-calendar div { background: #F8FAFC; border: 1px solid var(--border); border-radius: 12px; padding: 10px 4px; font-weight: 700; font-size: 13px; }
.mini-calendar span { font-size: 16px; }

/* Lists */
.list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: none; }
.list-item p { margin: 4px 0 0; color: var(--muted); }
.list-item span { font-weight: 800; color: var(--orange); }

/* Gold */
.premium {
  border: 1px solid rgba(10, 78, 163, 0.18);
  background: linear-gradient(180deg, #ffffff, #F8FAFF);
}

/* Buttons */
button {
  width: 100%;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--blue);
  color: white;
  font-weight: 750;
  font-size: 15.5px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(10, 78, 163, 0.18);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
  margin-top: 10px;
  letter-spacing: -0.01em;
}

button:hover {
  transform: translateY(-1px);
  background: var(--blue-dark);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.20);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.16);
}

button.secondary,
.muted-button {
  background: #ffffff;
  color: #344054;
  border-color: var(--border-strong);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

button.secondary:hover,
.muted-button:hover {
  background: #F8FAFC;
  color: var(--text);
  border-color: #94A3B8;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

/* Bottom nav */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 620px;
  margin: auto;
  height: 76px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: repeat(5,1fr);
  border-top: 1px solid var(--border);
  box-shadow: 0 -12px 28px rgba(15,23,42,0.08);
  z-index: 9999;
}
.bottom-nav a {
  text-decoration: none;
  color: var(--muted);
  font-size: 19px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.bottom-nav span { font-size: 11px; margin-top: 2px; font-weight: 700; }
.bottom-nav .active { color: var(--blue); font-weight: 800; }

/* Calendar */
.calendar-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 10px; }
.calendar-title h3 { margin: 0; color: var(--blue); }
.calendar-title button { width: 38px; min-width: 38px; height: 38px; padding: 0; border-radius: 12px; background: #eef2f7; color: var(--blue); font-size: 24px; font-weight: bold; box-shadow: none; margin: 0; }
.full-calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 7px; }
.full-calendar.weekdays { margin-bottom: 8px; }
.full-calendar.weekdays div { text-align: center; font-size: 12px; color: var(--muted); font-weight: 800; }
.calendar-day { min-height: 70px; border-radius: 16px; padding: 8px; border: 1px solid #dbe4f0; background: #f8fafc; display: flex; flex-direction: column; gap: 6px; overflow: hidden; position: relative; }
.calendar-day.empty { background: transparent; border: none; }
.calendar-day.today { outline: 2px solid #2D7FF9; outline-offset: 2px; }
.calendar-day.mine { background: #dbeafe; border-color: #93c5fd; }
.calendar-day.coparent { background: #f8fafc; border-color: #dbe4f0; }
.calendar-day.switch { background: #fff2cc; border-color: #facc15; }
.calendar-day.mixed { background: #eef2ff; border-color: #c7d2fe; }
.calendar-day.unknown { background: #f8fafc; border-style: dashed; }
.calendar-day.vacation { border: 2px solid #fb923c; box-shadow: inset 0 0 0 999px rgba(251,146,60,0.12); }
.calendar-day-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; min-height: 18px; }
.calendar-day-number { font-size: 20px; font-weight: 900; color: #2D7FF9; line-height: 1; }
.calendar-switch-marker { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 999px; background: #f59e0b; color: #7c2d12; font-size: 13px; font-weight: 900; line-height: 1; box-shadow: 0 2px 5px rgba(124,45,18,0.14); }
.calendar-day.coparent .calendar-day-number, .calendar-day.unknown .calendar-day-number { color: #64748b; }
.calendar-day.switch .calendar-day-number { color: #b45309; }
.calendar-symbol-small { font-size: 11px; line-height: 1; opacity: 0.65; transform: scale(0.75); transform-origin: top right; }
.calendar-label { font-size: 11px; font-weight: 900; line-height: 1.1; color: #2D7FF9; }
.calendar-day.coparent .calendar-label, .calendar-day.unknown .calendar-label { color: #64748b; }
.calendar-day.switch .calendar-label { color: #b45309; }
.vacation-badge { display: inline-block; margin-top: 2px; padding: 2px 6px; border-radius: 999px; background: #fb923c; color: #7c2d12; font-size: 9px; font-weight: 900; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-segments { display: flex; flex: 1; gap: 4px; min-height: 24px; }
.calendar-segments.vertical { flex-direction: column; }
.calendar-segment { flex: 1; border-radius: 10px; padding: 4px 5px; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; font-size: 10px; font-weight: 900; line-height: 1; border: 1px solid transparent; overflow: hidden; }
.calendar-segment .child-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.calendar-segment.mine { background: #2D7FF9; color: white; border-color: #2D7FF9; }
.calendar-segment.coparent { background: #ffffff; color: #64748b; border-color: #cbd5e1; }
.calendar-segment.switch { background: #FFB020; color: #7c3e00; border-color: #FFB020; }
.calendar-segment.unknown { background: #f1f5f9; color: #94a3b8; border-color: #e2e8f0; border-style: dashed; }
.calendar-legend-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.calendar-legend-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 12px; text-align: left; font-size: 13px; color: #64748b; }
.calendar-legend-item strong { color: #132238; }
.legend-color { display: inline-block; width: 14px; height: 14px; border-radius: 5px; margin-right: 6px; vertical-align: middle; border: 1px solid #cbd5e1; }
.legend-mine { background: #dbeafe; border-color: #2D7FF9; }
.legend-coparent { background: #ffffff; border-color: #cbd5e1; }
.legend-switch { background: #fff2cc; border-color: #f59e0b; }
.legend-vacation { background: #ffedd5; border-color: #fb923c; }
.calendar-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.calendar-stat, .child-month-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 12px; text-align: center; }
.calendar-stat strong, .child-month-box b { display: block; color: #2D7FF9; font-size: 22px; margin-bottom: 4px; }
.calendar-stat span, .child-month-box span { color: #64748b; font-size: 12px; }
.child-month-row { margin-top: 10px; padding: 14px; border-radius: 16px; background: #f8fafc; border: 1px solid #e2e8f0; }
.child-month-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.calendar-child-meta { color: #64748b; font-size: 13px; line-height: 1.4; margin-top: 10px; }
.calendar-child-actions { margin-top: 10px; }
.calendar-child-actions a { color: #2D7FF9; font-weight: 800; text-decoration: none; font-size: 13px; }
.vacation-list-item { margin-top: 10px; padding: 14px; border-radius: 16px; background: #fff7ed; border: 1px solid #fed7aa; }
.vacation-list-item strong { color: #9a3412; }

/* Holidays admin */
.vacation-admin-row { border-radius: 18px; padding: 16px; margin-top: 12px; border: 2px solid transparent; }
.vacation-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vacation-icon { width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.9); flex-shrink: 0; }
.vacation-title-block strong { display: block; color: #132238; font-size: 17px; margin-bottom: 4px; }
.vacation-subtitle { font-size: 13px; color: #64748b; font-weight: 700; }
.vacation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.schoolyear-preview { margin-top: 10px; padding: 12px; border-radius: 14px; background: #e0f2fe; color: #075985; font-weight: 900; border: 1px solid #7dd3fc; }
.admin-note { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 16px; padding: 14px; color: #9a3412; margin-top: 12px; }
.success-note { background: #ecfdf5; border: 1px solid #86efac; border-radius: 16px; padding: 14px; color: #166534; margin-top: 12px; font-size: 14px; line-height: 1.5; }
.template-badge { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; margin-top: 4px; background: #e0f2fe; color: #1d5fc4; }
.extra-badge { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 900; margin-top: 4px; background: #f1f5f9; color: #64748b; }
.vacation-admin-meta { color: #64748b; font-size: 13px; line-height: 1.4; margin-top: 8px; }
.delete-vacation { margin-top: 8px; color: #FF4D6D; font-weight: 800; cursor: pointer; font-size: 13px; }
.code-output { width: 100%; min-height: 260px; font-family: monospace; font-size: 12px; white-space: pre; overflow: auto; background: #0f172a; color: #e2e8f0; border-radius: 16px; padding: 14px; border: none; box-sizing: border-box; }
.vacation-krokus { background: #f3e8ff; border-color: #c084fc; }
.vacation-paas { background: #dcfce7; border-color: #86efac; }
.vacation-zomer { background: #ffedd5; border-color: #fb923c; }
.vacation-herfst { background: #fef3c7; border-color: #f59e0b; }
.vacation-kerst { background: #e0f2fe; border-color: #38bdf8; }
.vacation-extra { background: #f8fafc; border-color: #cbd5e1; }

/* Reports */
.report-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 14px; }
.report-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 18px; padding: 16px; }
.report-box strong { display: block; font-size: 24px; color: #2D7FF9; margin-bottom: 4px; }
.report-box span { display: block; color: #64748b; font-size: 13px; }
.report-child-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 18px; padding: 16px; margin-top: 12px; }
.report-child-card h3 { margin: 0 0 8px; }
.report-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid #e2e8f0; }
.report-row:last-child { border-bottom: none; }
.report-row span { color: #64748b; }
.report-row strong { text-align: right; }
.report-badge { display: inline-block; margin-top: 8px; padding: 6px 10px; border-radius: 999px; background: #e0f2fe; color: #1d5fc4; font-weight: 800; font-size: 13px; }
.empty-state { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 18px; padding: 16px; color: #64748b; }
.category-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 12px; }
.category-item { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px; }
.category-item strong { display: block; color: #132238; margin-bottom: 4px; }
.category-item span { color: #64748b; font-size: 13px; }
.muted-button { background: #ffffff; color: #344054; border: 1px solid var(--border-strong); box-shadow: 0 4px 12px rgba(15,23,42,0.05); }

.next-step-panel { margin-top: 14px; padding: 14px; border-radius: 16px; background: #eef6ff; border: 1px solid #bfdbfe; }
.next-step-panel p { margin: 0 0 10px; color: #1d4ed8; font-weight: 800; }
.next-step-panel a { text-decoration: none; }
.next-step-panel button { margin: 0; }

/* Logbook */
.log-meta { color: #64748b; margin-top: 4px; }
.log-tag { display: inline-block; margin-top: 8px; padding: 6px 10px; border-radius: 999px; background: #e0f2fe; color: #1d5fc4; font-weight: 800; font-size: 13px; }
.log-actions { margin-top: 10px; }
.delete-log { color: #FF4D6D; cursor: pointer; font-weight: 800; }
.log-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 14px; }
.log-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 18px; padding: 16px; }
.log-box strong { display: block; font-size: 24px; color: #2D7FF9; margin-bottom: 4px; }
.log-box span { display: block; color: #64748b; font-size: 13px; }

/* Documents */
.doc-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.doc-box { background: #f8fafc; border-radius: 18px; padding: 16px; border: 1px solid #e2e8f0; }
.doc-box h3 { margin: 0 0 6px; font-size: 18px; }
.doc-box p { margin: 0; color: #64748b; }
.document-meta { margin-top: 4px; color: #64748b; }

/* Language switcher */
.lang-switcher { display: flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 8px; }
.lang-switcher select {
  width: auto;
  min-width: 94px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
}

/* Test page: compact link grid */
.test-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.test-grid a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 13px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  min-height: 64px;
  box-shadow: 0 4px 12px rgba(15,23,42,0.04);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
.test-grid a span.icon { font-size: 20px; }
.test-grid a:hover { transform: translateY(-1px); background: #F8FAFC; border-color: rgba(37,99,235,0.35); box-shadow: 0 10px 20px rgba(15,23,42,0.08); }

/* Helper */
.hidden { display: none; }

.ps-save-confirmation { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(18px); z-index: 9999; display: flex; align-items: center; gap: 14px; width: min(92vw, 460px); padding: 18px 20px; border-radius: 22px; background: #ffffff; color: #132238; border: 1px solid #bfdbfe; box-shadow: 0 22px 60px rgba(15,47,87,.24); opacity: 0; pointer-events: none; transition: opacity .22s ease, transform .22s ease; }
.ps-save-confirmation.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ps-save-confirmation-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #dcfce7; color: #166534; font-size: 24px; flex: 0 0 auto; }
.ps-save-confirmation-text { font-size: 16px; line-height: 1.35; font-weight: 900; }

.checkbox-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 16px; font-weight: 700; line-height: 1.35; }
.checkbox-row input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #2563eb; }
.ps-recovered-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.bottom-nav .ps-nav-icon { display: block; margin-bottom: 2px; font-size: 20px; }

/* Responsive */
@media (max-width: 600px) {
  .app { max-width: 100%; padding: 16px; }
  .grid { grid-template-columns: 1fr; }
  .percent-row { flex-direction: column; }
  .percent-row div { width: 100%; }
  .bottom-nav { max-width: 100%; }
  .calendar-stats, .child-month-grid, .calendar-legend-row { grid-template-columns: 1fr; }
  .vacation-grid { grid-template-columns: 1fr; }
  .calendar-day { min-height: 62px; border-radius: 14px; padding: 6px; }
  .calendar-day-number { font-size: 17px; }
  .calendar-switch-marker { min-width: 21px; height: 20px; padding: 0 5px; font-size: 12px; }
  .calendar-label { font-size: 10px; }
  .calendar-segment { font-size: 9px; padding: 3px 4px; }
  .test-grid { grid-template-columns: 1fr; }
  .ps-save-confirmation { bottom: 82px; padding: 16px; border-radius: 18px; }
}

.ps-save-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(12px);z-index:9999;display:flex;align-items:center;gap:10px;max-width:min(92vw,420px);padding:13px 18px;border-radius:16px;background:#0f2f57;color:#fff;font-weight:800;box-shadow:0 18px 44px rgba(15,47,87,.28);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}.ps-save-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.ps-save-toast-icon{font-size:18px;filter:saturate(.9)}

/* ParentSync DATA 1.4 fixes */
.ps-user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(45, 127, 249, .10);
  color: #1d4ed8;
  border: 1px solid rgba(45, 127, 249, .18);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
  margin-left: auto;
  margin-right: 10px;
}

.ps-user-badge.is-logged-in::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .13);
  margin-right: 7px;
}

.child-link-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.child-link-button,
.child-link-actions button.child-link-button,
.child-link-actions a.child-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
@media (max-width: 520px) {
  .topbar { gap: 8px; }
  .ps-user-badge { order: 2; margin: 6px 0 0; }
}


/* ParentSync DATA 1.6 refinements */
.ps-user-badge.is-logged-in {
  background: rgba(22, 163, 74, .10);
  color: #166534;
  border-color: rgba(22, 163, 74, .25);
}
.child-link-actions {
  align-items: center;
}
.child-link-email-button {
  background: #eef5ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #cfe0ff !important;
}
.child-link-email-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(45,127,249,.14);
}
.hero-card p.ps-children-summary,
.hero-card p[data-i18n="children_none"] {
  line-height: 1.45;
}

/* ParentSync DATA 1.6 header layout */
.topbar {
  align-items: flex-start;
  flex-wrap: nowrap;
}
.ps-header-title-block {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 10px;
}
.ps-header-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.ps-header-controls .logo-circle {
  order: 1;
  margin: 0;
}
.ps-header-controls .dashboard-logo-panel {
  order: 1;
  margin: 0;
}
.ps-header-controls .ps-global-language-switcher {
  order: 2 !important;
  width: auto !important;
  max-width: 190px !important;
  margin: 0 !important;
  justify-content: center !important;
  align-self: center !important;
}
.ps-header-controls .ps-global-language-select {
  max-width: 145px !important;
}
.ps-user-badge {
  margin: 8px 0 0 0;
  width: fit-content;
  max-width: 100%;
}
.ps-user-badge.is-logged-in {
  background: rgba(22, 163, 74, .11);
  color: #166534;
  border-color: rgba(22, 163, 74, .28);
}
.child-link-email-button {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
  box-shadow: 0 8px 18px rgba(29,78,216,.18);
}
@media (max-width: 520px) {
  .topbar { gap: 10px; }
  .ps-header-controls { gap: 6px; }
  .ps-header-controls .logo-circle {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
  }
  .ps-header-controls .ps-global-language-switcher {
    width: auto !important;
    margin: 0 !important;
    padding: 5px 7px !important;
  }
  .ps-header-controls .ps-global-language-select {
    width: auto !important;
    max-width: 132px !important;
    font-size: 12px !important;
  }
  .ps-user-badge { font-size: 12px; padding: 7px 10px; }
}


/* ParentSync DATA 1.7 header width refinement */
:root { --ps-header-control-width: 190px; }
.ps-header-controls .ps-global-language-switcher {
  width: var(--ps-header-control-width) !important;
  max-width: var(--ps-header-control-width) !important;
}
.ps-header-controls .ps-global-language-select {
  width: 132px !important;
  max-width: 132px !important;
}
.ps-user-badge {
  width: var(--ps-header-control-width);
  max-width: var(--ps-header-control-width);
  box-sizing: border-box;
}
@media (max-width: 520px) {
  :root { --ps-header-control-width: 172px; }
  .ps-header-controls .ps-global-language-select {
    width: 116px !important;
    max-width: 116px !important;
  }
}

/* ParentSync DATA 1.8 - cleaner child link sharing */
.child-link-actions {
  gap: 10px !important;
  margin-top: 12px !important;
}
.child-link-button,
.child-link-actions button.child-link-button,
.child-link-actions a.child-link-button {
  min-height: 38px;
  padding: 9px 13px !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #0f2f57 !important;
  border: 1px solid rgba(45,127,249,.18) !important;
  box-shadow: 0 8px 20px rgba(15,47,87,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.child-link-button:hover,
.child-link-actions button.child-link-button:hover,
.child-link-actions a.child-link-button:hover {
  transform: translateY(-1px);
  border-color: rgba(45,127,249,.34) !important;
  box-shadow: 0 12px 26px rgba(15,47,87,.10);
}
.child-link-share-button {
  background: linear-gradient(135deg, #2D7FF9, #6DA7FF) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}
.child-link-open-button {
  background: #f7fbff !important;
}
.child-link-copy-button {
  background: #fffaf0 !important;
}
.ps-share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 47, 87, .34);
  backdrop-filter: blur(6px);
}
.ps-share-card {
  position: relative;
  width: min(420px, 94vw);
  padding: 24px 20px 18px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(15,47,87,.28);
  text-align: center;
  border: 1px solid rgba(45,127,249,.14);
}
.ps-share-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: #f2f6fb;
  color: #0f2f57;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.ps-share-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(45,127,249,.14), rgba(109,167,255,.24));
  font-size: 28px;
}
.ps-share-card h3 {
  margin: 0 0 6px;
  color: #0f2f57;
}
.ps-share-card p {
  margin: 0 0 14px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}
.ps-share-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.ps-share-option {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(45,127,249,.16);
  background: #f8fbff;
  color: #0f2f57;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15,47,87,.05);
}
.ps-share-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(15,47,87,.09);
}
.ps-share-note {
  font-size: 12px !important;
  margin: 10px 0 0 !important;
  color: #789 !important;
}
@media (max-width: 520px) {
  .child-link-actions { display: grid !important; grid-template-columns: 1fr; }
  .child-link-button { width: 100% !important; }
  .ps-share-actions { grid-template-columns: 1fr; }
}


/* ParentSync DATA 1.9 - final polish */
.ps-user-badge {
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ps-header-controls .ps-global-language-switcher,
.ps-user-badge {
  box-shadow: 0 8px 20px rgba(15,47,87,.06);
}
.list-item {
  align-items: flex-start;
}
.child-link-actions {
  width: 100%;
}
.child-link-button {
  white-space: nowrap;
}
.ps-share-option {
  touch-action: manipulation;
}
@media (max-width: 520px) {
  .ps-user-badge {
    width: var(--ps-header-control-width);
    max-width: var(--ps-header-control-width);
    white-space: normal;
  }
  .child-link-button {
    min-height: 46px;
    white-space: normal;
  }
}


/* ParentSync DATA 2.0 - visual consistency and wider planning area */
:root {
  --ps-app-max-width: 760px;
  --ps-header-control-width: 178px;
}

.app {
  max-width: var(--ps-app-max-width);
}

.bottom-nav {
  max-width: var(--ps-app-max-width);
}

.card,
.hero-card {
  width: 100%;
}

.topbar {
  width: 100%;
}

.ps-header-controls {
  width: var(--ps-header-control-width);
  min-width: var(--ps-header-control-width);
  align-items: center;
}

.ps-header-controls .ps-global-language-switcher,
.ps-user-badge {
  width: var(--ps-header-control-width) !important;
  max-width: var(--ps-header-control-width) !important;
  min-width: var(--ps-header-control-width) !important;
  min-height: 34px;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center !important;
  box-sizing: border-box;
}

.ps-header-controls .ps-global-language-switcher {
  padding: 5px 8px !important;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(17,24,39,.10);
}

.ps-header-controls .ps-global-language-select,
.ps-header-controls .ps-global-language-switcher select {
  width: 126px !important;
  max-width: 126px !important;
}

.ps-user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
}

@media (max-width: 600px) {
  :root {
    --ps-app-max-width: 100%;
    --ps-header-control-width: 176px;
  }

  .app {
    max-width: 100%;
  }

  .bottom-nav {
    max-width: 100%;
  }
}

@media (max-width: 420px) {
  :root {
    --ps-header-control-width: 166px;
  }

  .topbar {
    gap: 8px;
  }

  .ps-header-title-block {
    padding-right: 6px;
  }

  .ps-header-controls .ps-global-language-select,
  .ps-header-controls .ps-global-language-switcher select {
    width: 114px !important;
    max-width: 114px !important;
    font-size: 12px !important;
  }

  .ps-user-badge {
    font-size: 11.5px;
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* ParentSync DATA 2.1 - header alignment and child-link buttons */
:root {
  --ps-header-control-height: 40px;
  --ps-header-title-small-height: 20px;
  --ps-header-title-main-height: 38px;
  --ps-header-title-control-gap: 8px;
}

.ps-header-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ps-header-title-block > .small:first-child {
  min-height: var(--ps-header-title-small-height);
  display: flex;
  align-items: flex-start;
}

.ps-header-title-block > h1 {
  min-height: var(--ps-header-title-main-height);
  display: flex;
  align-items: flex-end;
}

.ps-header-controls {
  gap: var(--ps-header-title-control-gap) !important;
}

.ps-header-controls .logo-circle {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
}

.ps-header-controls .dashboard-logo-panel {
  width: min(228px, var(--ps-header-control-width)) !important;
  min-width: min(168px, var(--ps-header-control-width)) !important;
  max-width: var(--ps-header-control-width) !important;
}

.ps-user-badge,
.topbar .ps-global-language-switcher,
.ps-header-controls .ps-global-language-switcher {
  height: var(--ps-header-control-height) !important;
  min-height: var(--ps-header-control-height) !important;
  max-height: var(--ps-header-control-height) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1.15 !important;
}

.ps-user-badge {
  margin-top: var(--ps-header-title-control-gap) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.topbar .ps-global-language-icon,
.ps-header-controls .ps-global-language-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

.topbar .ps-global-language-select,
.ps-header-controls .ps-global-language-select,
.ps-header-controls .ps-global-language-switcher select {
  height: 30px !important;
  min-height: 30px !important;
  line-height: 30px !important;
}

.child-link-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
  align-items: stretch !important;
}

.child-link-button,
.child-link-actions button.child-link-button,
.child-link-actions a.child-link-button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  gap: 8px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-align: center !important;
  box-shadow: 0 10px 24px rgba(15,47,87,.08) !important;
}

.child-link-open-button {
  background: linear-gradient(135deg, #eaf3ff, #ffffff) !important;
  color: #174ea6 !important;
  border-color: #bcd7ff !important;
}

.child-link-copy-button {
  background: linear-gradient(135deg, #dcfce7, #ffffff) !important;
  color: #166534 !important;
  border-color: rgba(22,163,74,.32) !important;
}

.child-link-share-button {
  background: linear-gradient(135deg, #16a34a, #4ade80) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

.child-link-button:hover,
.child-link-actions button.child-link-button:hover,
.child-link-actions a.child-link-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,47,87,.13) !important;
}

@media (max-width: 520px) {
  :root {
    --ps-header-control-height: 38px;
    --ps-header-title-small-height: 19px;
    --ps-header-title-main-height: 36px;
  }

  .ps-header-controls .logo-circle {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
  }

  .child-link-actions {
    grid-template-columns: 1fr !important;
  }

  .child-link-button,
  .child-link-actions button.child-link-button,
  .child-link-actions a.child-link-button {
    min-height: 48px !important;
  }
}


/* ParentSync DATA 2.2 - wider readable header controls */
:root {
  --ps-header-control-width: clamp(220px, 30vw, 280px);
  --ps-header-control-height: 42px;
}

.ps-header-controls {
  width: var(--ps-header-control-width) !important;
  min-width: var(--ps-header-control-width) !important;
}

.ps-user-badge,
.topbar .ps-global-language-switcher,
.ps-header-controls .ps-global-language-switcher {
  width: var(--ps-header-control-width) !important;
  min-width: var(--ps-header-control-width) !important;
  max-width: var(--ps-header-control-width) !important;
  height: var(--ps-header-control-height) !important;
  min-height: var(--ps-header-control-height) !important;
  max-height: var(--ps-header-control-height) !important;
}

.ps-user-badge {
  padding-left: 14px !important;
  padding-right: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.topbar .ps-global-language-select,
.ps-header-controls .ps-global-language-select,
.ps-header-controls .ps-global-language-switcher select {
  width: calc(var(--ps-header-control-width) - 56px) !important;
  max-width: calc(var(--ps-header-control-width) - 56px) !important;
  min-width: calc(var(--ps-header-control-width) - 56px) !important;
  font-size: 13.5px !important;
}

@media (max-width: 760px) {
  :root {
    --ps-header-control-width: clamp(206px, 34vw, 238px);
  }
}

@media (max-width: 600px) {
  :root {
    --ps-header-control-width: clamp(194px, 48vw, 218px);
    --ps-header-control-height: 40px;
  }

  .topbar .ps-global-language-select,
  .ps-header-controls .ps-global-language-select,
  .ps-header-controls .ps-global-language-switcher select {
    width: calc(var(--ps-header-control-width) - 54px) !important;
    max-width: calc(var(--ps-header-control-width) - 54px) !important;
    min-width: calc(var(--ps-header-control-width) - 54px) !important;
    font-size: 13px !important;
  }

  .ps-user-badge {
    font-size: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 420px) {
  :root {
    --ps-header-control-width: clamp(184px, 50vw, 206px);
  }

  .topbar .ps-global-language-select,
  .ps-header-controls .ps-global-language-select,
  .ps-header-controls .ps-global-language-switcher select {
    width: calc(var(--ps-header-control-width) - 52px) !important;
    max-width: calc(var(--ps-header-control-width) - 52px) !important;
    min-width: calc(var(--ps-header-control-width) - 52px) !important;
    font-size: 12.5px !important;
  }

  .ps-user-badge {
    font-size: 11.5px !important;
  }
}


/* ParentSync DATA 2.3 - login page consistency and equal child-link buttons */
.login-shell {
  max-width: var(--ps-app-max-width, 760px) !important;
}

.login-shell .topbar {
  margin-bottom: 18px;
}

.login-shell .login-hero {
  text-align: left;
}

.login-shell .login-hero h2 {
  margin: 0 0 8px;
  color: #ffffff;
}

.login-shell .login-hero .login-mode-tabs {
  margin-top: 18px;
}

.login-shell .login-tab {
  min-height: 50px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.94);
  color: #12315f;
  box-shadow: 0 10px 22px rgba(15,47,87,.12);
}

.login-shell .login-tab.active {
  border-color: rgba(255,255,255,.84);
  background: #ffffff;
  color: #1d4ed8;
}

#kinderenLijst .list-item > div:first-child {
  width: 100%;
  min-width: 0;
}

.child-link-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.child-link-button,
.child-link-actions button.child-link-button,
.child-link-actions a.child-link-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  min-height: 52px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border-radius: 17px !important;
  border-width: 1px !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  line-height: 1.18 !important;
  text-align: center !important;
  white-space: normal !important;
  text-decoration: none !important;
  box-shadow: 0 12px 26px rgba(15,47,87,.10) !important;
}

.child-link-open-button,
.child-link-actions a.child-link-open-button {
  background: linear-gradient(135deg, #1d4ed8 0%, #60a5fa 100%) !important;
  color: #ffffff !important;
  border-color: rgba(29,78,216,.18) !important;
}

.child-link-copy-button,
.child-link-actions button.child-link-copy-button {
  background: linear-gradient(135deg, #dcfce7 0%, #ffffff 100%) !important;
  color: #166534 !important;
  border-color: rgba(22,163,74,.32) !important;
}

.child-link-share-button,
.child-link-actions button.child-link-share-button {
  background: linear-gradient(135deg, #15803d 0%, #4ade80 100%) !important;
  color: #ffffff !important;
  border-color: rgba(21,128,61,.18) !important;
}

.child-link-button:hover,
.child-link-actions button.child-link-button:hover,
.child-link-actions a.child-link-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15,47,87,.16) !important;
  filter: saturate(1.04);
}

@media (max-width: 640px) {
  .login-shell .login-mode-tabs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .child-link-actions {
    grid-template-columns: 1fr !important;
  }

  .child-link-button,
  .child-link-actions button.child-link-button,
  .child-link-actions a.child-link-button {
    min-height: 54px !important;
  }
}


/* ParentSync DATA 2.5 - status button matches language button, no purple child-link button */
.ps-user-badge::before,
.ps-user-badge.is-logged-in::before,
.ps-user-badge.is-logged-out::before {
  content: none !important;
  display: none !important;
}

.ps-user-badge,
.ps-user-badge.ps-status-control {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: var(--ps-header-control-width, 280px) !important;
  min-width: var(--ps-header-control-width, 280px) !important;
  max-width: var(--ps-header-control-width, 280px) !important;
  height: var(--ps-header-control-height, 42px) !important;
  min-height: var(--ps-header-control-height, 42px) !important;
  max-height: var(--ps-header-control-height, 42px) !important;
  margin: var(--ps-header-title-control-gap, 8px) 0 0 0 !important;
  padding: 5px 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(22, 163, 74, .22) !important;
  color: #14532d !important;
  box-shadow: 0 14px 30px rgba(15,47,87,.10) !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  line-height: 1 !important;
}

.ps-user-badge.is-logged-out,
.ps-user-badge.ps-status-control.is-logged-out {
  border-color: rgba(220,38,38,.25) !important;
  color: #991b1b !important;
}

.ps-status-led-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.12) !important;
  flex: 0 0 auto !important;
}

.ps-status-led {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 999px !important;
  background: #16a34a !important;
  box-shadow:
    0 0 0 4px rgba(22,163,74,.14),
    0 0 14px rgba(22,163,74,.70),
    inset 0 1px 2px rgba(255,255,255,.50) !important;
}

.ps-user-badge.is-logged-out .ps-status-led {
  background: #dc2626 !important;
  box-shadow:
    0 0 0 4px rgba(220,38,38,.14),
    0 0 14px rgba(220,38,38,.62),
    inset 0 1px 2px rgba(255,255,255,.50) !important;
}

.ps-status-text {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(22,163,74,.20) !important;
  background: rgba(240,253,244,.94) !important;
  color: #14532d !important;
  font-size: 13.5px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ps-user-badge.is-logged-out .ps-status-text {
  border-color: rgba(220,38,38,.20) !important;
  background: rgba(254,242,242,.96) !important;
  color: #991b1b !important;
}

.topbar .ps-global-language-switcher,
.ps-header-controls .ps-global-language-switcher {
  height: var(--ps-header-control-height, 42px) !important;
  min-height: var(--ps-header-control-height, 42px) !important;
  max-height: var(--ps-header-control-height, 42px) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 14px 30px rgba(15,47,87,.10) !important;
}

.child-link-copy-button,
.child-link-actions button.child-link-copy-button {
  background: linear-gradient(135deg, #dcfce7 0%, #ffffff 100%) !important;
  color: #166534 !important;
  border-color: rgba(22,163,74,.32) !important;
}

.child-link-share-button,
.child-link-actions button.child-link-share-button {
  background: linear-gradient(135deg, #15803d 0%, #4ade80 100%) !important;
  color: #ffffff !important;
  border-color: rgba(21,128,61,.18) !important;
}

.child-link-open-button,
.child-link-actions a.child-link-open-button {
  background: linear-gradient(135deg, #1d4ed8 0%, #60a5fa 100%) !important;
  color: #ffffff !important;
  border-color: rgba(29,78,216,.18) !important;
}

@media (max-width: 600px) {
  .ps-status-text {
    font-size: 12.5px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

@media (max-width: 420px) {
  .ps-status-led-wrap {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
  }

  .ps-status-text {
    height: 30px !important;
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

.ps-status-control {
  cursor: pointer;
}
.ps-status-control:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 3px;
}
.ps-delete-child-button {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 999px;
  background: #fff5f5;
  color: #dc2626;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ps-delete-child-button:hover,
.ps-delete-child-button:focus-visible {
  background: #fee2e2;
  border-color: rgba(220, 38, 38, 0.42);
}

.birthdate-select-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.birthdate-select-grid label {
  margin: 0;
}

.birthdate-select-grid span {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
  color: #1d3557;
}

.child-share-info {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background: #f8fbff;
}

.child-share-info p {
  margin: 4px 0 0;
}

.child-friends-info {
  background: #fffaf2;
  border-color: #f2dfbc;
}

.launch-finish-panel {
  border-color: #cdeed8;
  background: linear-gradient(135deg, #f5fff8, #ffffff);
}

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

.launch-actions a {
  text-decoration: none;
}

.launch-actions button {
  width: auto;
  min-width: 160px;
  margin: 0;
}

.child-friends-note {
  border-left: 6px solid #2d7ff9;
  background: #f7fbff;
}

@media (max-width: 640px) {
  .birthdate-select-grid {
    grid-template-columns: 1fr;
  }

  .launch-actions button {
    width: 100%;
  }
}


button.danger,
.btn.danger {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: #fff;
  border: 0;
}

button.danger:hover,
.btn.danger:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.account-danger-card {
  border-color: rgba(220, 38, 38, 0.18);
}

/* Launch/onboarding primary CTA */
.launch-primary-action {
  background: linear-gradient(135deg, #ffe45c, #f59e0b) !important;
  color: #18324f !important;
  border: 0 !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 30px rgba(245, 158, 11, .28) !important;
}
.launch-primary-action:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
}


/* DATA 4.8 onboarding flow helpers */
.flow-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}
.flow-action-row > button,
.flow-action-row > a {
  flex: 1 1 220px;
}
.flow-action-row > a {
  display: flex;
  text-decoration: none;
}
.flow-action-row > a > button {
  width: 100%;
}
.login-mobile-tip {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: #f8fbff;
  color: #38536f;
  line-height: 1.55;
}
.install-app-btn {
  width: fit-content;
  min-width: 220px;
  margin-top: 2px;
}
.install-app-help {
  margin: 0;
}
.next-step-panel .flow-action-row {
  margin-top: 10px;
}
@media (max-width: 640px) {
  .flow-action-row {
    display: grid;
    grid-template-columns: 1fr;
  }
  .install-app-btn {
    width: 100%;
  }
}


/* Children: compact existing children list */
.child-collapsible-item {
  align-items: flex-start;
  gap: 12px;
}
.child-collapsible-content {
  min-width: 0;
  flex: 1 1 auto;
}
.child-summary-toggle {
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #dbe7f3;
  background: #f8fbff;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: left;
  box-shadow: none;
}
.child-summary-toggle:hover {
  background: #eef6ff;
}
.child-summary-symbol {
  flex: 0 0 auto;
  font-size: 1.45rem;
  line-height: 1;
}
.child-summary-name {
  font-weight: 900;
  overflow-wrap: anywhere;
}
.child-details-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e4edf6;
}
.child-collapsible-item.is-open .child-summary-toggle {
  border-color: rgba(45, 127, 249, .38);
  background: #eef6ff;
}
.signup-confirm-actions {
  align-items: stretch;
}
.signup-confirm-actions #signupBackToLoginBtn {
  min-width: 210px;
}
.premium-benefits-panel {
  display: none;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid #dbe7f3;
  border-radius: 16px;
  background: #ffffff;
}
.premium-benefits-panel.is-visible {
  display: block;
}
.premium-benefits-panel ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.premium-benefits-panel li {
  margin: 6px 0;
}

/* YAAGI DATA 5.4 - calm dashboard header */
.dashboard-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 18px !important;
  margin-bottom: 18px !important;
}

.dashboard-topbar .dashboard-header-copy,
.dashboard-topbar .ps-header-title-block {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}

.dashboard-topbar .dashboard-header-copy .small,
.dashboard-topbar .ps-header-title-block .small {
  margin: 0 !important;
}

.dashboard-topbar h1,
.dashboard-topbar #dashboardUserName {
  margin: 0 !important;
  max-width: 100% !important;
  color: #132238 !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}

.dashboard-topbar .ps-user-badge {
  margin: 6px 0 0 0 !important;
  align-self: flex-start !important;
}

.dashboard-topbar .ps-header-controls {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 300px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 5px !important;
  overflow: visible !important;
}

.dashboard-topbar .dashboard-logo-panel,
.dashboard-topbar .ps-header-controls .dashboard-logo-panel {
  width: fit-content !important;
  min-width: 0 !important;
  max-width: 300px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.dashboard-topbar .dashboard-logo-panel img,
.dashboard-topbar .ps-header-controls .dashboard-logo-panel img {
  display: block !important;
  width: clamp(190px, 24vw, 275px) !important;
  max-width: 275px !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dashboard-brand-slogan {
  display: block;
  margin-top: 2px;
  color: #475467;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 750;
  text-align: right;
  white-space: normal;
}

.dashboard-topbar .ps-header-controls .ps-global-language-switcher {
  align-self: flex-end !important;
  margin: 6px 0 0 0 !important;
}

@media (max-width: 680px) {
  .dashboard-topbar {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .dashboard-topbar .ps-header-controls {
    width: 100% !important;
    max-width: 100% !important;
    align-items: flex-start !important;
  }

  .dashboard-topbar .dashboard-logo-panel,
  .dashboard-topbar .ps-header-controls .dashboard-logo-panel {
    align-items: flex-start !important;
    max-width: 220px !important;
  }

  .dashboard-topbar .dashboard-logo-panel img,
  .dashboard-topbar .ps-header-controls .dashboard-logo-panel img {
    width: clamp(170px, 56vw, 220px) !important;
    max-width: 220px !important;
  }

  .dashboard-brand-slogan {
    text-align: left;
    font-size: 11.5px;
  }

  .dashboard-topbar .ps-header-controls .ps-global-language-switcher {
    align-self: flex-start !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 380px) {
  .dashboard-topbar .dashboard-logo-panel img,
  .dashboard-topbar .ps-header-controls .dashboard-logo-panel img {
    width: clamp(150px, 54vw, 190px) !important;
  }
}


/* YAAGI DATA 5.5 - centered transparent dashboard brand header */
.dashboard-topbar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 300px) minmax(0, 1fr) !important;
  grid-template-areas:
    "welcome logo spacer"
    "name    logo spacer"
    "status  logo language" !important;
  column-gap: 18px !important;
  row-gap: 4px !important;
  align-items: center !important;
  margin-bottom: 16px !important;
}

.dashboard-topbar .dashboard-header-copy,
.dashboard-topbar .ps-header-title-block {
  display: contents !important;
}

.dashboard-topbar .dashboard-header-copy .small,
.dashboard-topbar .ps-header-title-block .small {
  grid-area: welcome !important;
  margin: 0 !important;
  align-self: end !important;
}

.dashboard-topbar h1,
.dashboard-topbar #dashboardUserName {
  grid-area: name !important;
  margin: 0 !important;
  align-self: center !important;
  max-width: 100% !important;
  color: #102033 !important;
  font-size: clamp(24px, 3.4vw, 36px) !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
  overflow-wrap: anywhere !important;
}

.dashboard-topbar .ps-user-badge {
  grid-area: status !important;
  margin: 6px 0 0 0 !important;
  align-self: center !important;
  justify-self: start !important;
}

.dashboard-topbar .dashboard-logo-panel {
  grid-area: logo !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: min(280px, 24vw) !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.dashboard-topbar .dashboard-logo-panel img {
  display: block !important;
  width: clamp(185px, 21vw, 270px) !important;
  max-width: 270px !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dashboard-brand-slogan {
  display: block !important;
  margin: 1px 0 0 !important;
  color: #7a5a05 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(13px, 1.15vw, 16px) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  font-style: italic !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.dashboard-topbar .ps-header-controls {
  grid-area: language !important;
  width: fit-content !important;
  max-width: 320px !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 6px 0 0 0 !important;
  gap: 0 !important;
  overflow: visible !important;
}

.dashboard-topbar .ps-header-controls .dashboard-logo-panel,
.dashboard-topbar .ps-header-controls .logo-circle {
  display: none !important;
}

.dashboard-topbar .ps-header-controls .ps-global-language-switcher {
  align-self: flex-end !important;
  margin: 0 !important;
}

@media (max-width: 760px) {
  .dashboard-topbar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "welcome"
      "name"
      "status"
      "language" !important;
    justify-items: start !important;
    gap: 7px !important;
  }

  .dashboard-topbar .dashboard-logo-panel {
    justify-self: start !important;
    align-items: flex-start !important;
    margin: 0 !important;
    max-width: 230px !important;
  }

  .dashboard-topbar .dashboard-logo-panel img {
    width: clamp(165px, 58vw, 225px) !important;
    max-width: 225px !important;
  }

  .dashboard-brand-slogan {
    text-align: left !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  .dashboard-topbar .ps-header-controls {
    justify-self: start !important;
    align-items: flex-start !important;
    margin-top: 0 !important;
    max-width: 100% !important;
  }

  .dashboard-topbar .ps-user-badge {
    margin-top: 2px !important;
  }
}

@media (max-width: 390px) {
  .dashboard-topbar .dashboard-logo-panel img {
    width: clamp(150px, 56vw, 205px) !important;
  }

  .dashboard-brand-slogan {
    font-size: 12.5px !important;
  }
}

/* YAAGI DATA 5.5.1 - header brand spacing */
.dashboard-topbar {
  grid-template-areas:
    "welcome logo spacer"
    "name    logo spacer"
    "status  .    language" !important;
  row-gap: 8px !important;
  align-items: start !important;
}

.dashboard-topbar .dashboard-logo-panel {
  align-self: start !important;
  justify-self: center !important;
  justify-content: flex-start !important;
  margin: 0 auto 14px !important;
}

.dashboard-brand-slogan {
  display: block !important;
  position: static !important;
  margin: 6px 0 0 !important;
  line-height: 1.25 !important;
}

.dashboard-topbar .ps-user-badge {
  align-self: center !important;
  margin: 0 !important;
}

.dashboard-topbar .ps-header-controls {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  align-self: center !important;
  margin: 0 !important;
}

@media (max-width: 760px) {
  .dashboard-topbar {
    row-gap: 8px !important;
  }

  .dashboard-topbar .dashboard-logo-panel {
    margin: 0 0 12px 0 !important;
  }

  .dashboard-brand-slogan {
    margin-top: 5px !important;
    line-height: 1.25 !important;
  }

  .dashboard-topbar .ps-header-controls {
    justify-content: flex-start !important;
    align-items: center !important;
  }
}

/* YAAGI DATA 5.6 - text wordmark while final brand assets are pending */
.yaagi-brand-wordmark,
.logo-circle.yaagi-mini-wordmark,
.test-logo.yaagi-test-wordmark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #25324a !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.yaagi-brand-wordmark {
  font-size: clamp(34px, 4.7vw, 58px) !important;
}

.logo-circle.yaagi-mini-wordmark {
  width: auto !important;
  min-width: 72px !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 16px !important;
}

.dashboard-topbar .dashboard-logo-panel {
  max-width: min(300px, 28vw) !important;
}

.dashboard-topbar .dashboard-logo-panel img {
  display: none !important;
}

.test-logo.yaagi-test-wordmark {
  width: auto !important;
  min-width: 74px !important;
  height: 32px !important;
  border-radius: 0 !important;
  font-size: 17px !important;
}

@media (max-width: 760px) {
  .yaagi-brand-wordmark {
    font-size: clamp(30px, 11vw, 44px) !important;
  }

  .logo-circle.yaagi-mini-wordmark {
    min-width: 64px !important;
    font-size: 14px !important;
  }
}

/* YAAGI DATA 5.7 - real logo assets */
.dashboard-topbar .dashboard-logo-panel {
  max-width: min(320px, 30vw) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dashboard-topbar .dashboard-logo-panel img {
  display: block !important;
  width: clamp(190px, 24vw, 300px) !important;
  max-width: 300px !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.logo-circle {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.logo-circle img {
  width: 46px !important;
  height: 46px !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.test-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

@media (max-width: 760px) {
  .dashboard-topbar .dashboard-logo-panel {
    max-width: 235px !important;
  }

  .dashboard-topbar .dashboard-logo-panel img {
    width: clamp(170px, 58vw, 230px) !important;
    max-width: 230px !important;
  }
}

/* Y-DATA yaagi-0.1 - visual polish */
:root {
  --yaagi-midnight: #050b16;
  --yaagi-navy: #071832;
  --yaagi-blue-metal: #0b3465;
  --yaagi-blue-glow: #246aa4;
  --yaagi-gold: #d7a947;
  --yaagi-gold-light: #fff0a8;
  --yaagi-gold-deep: #9c6511;
}

.hero-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 0%, rgba(76, 137, 190, 0.34), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.12), transparent 28%),
    radial-gradient(circle at 88% 88%, rgba(215, 169, 71, 0.10), transparent 22%),
    linear-gradient(135deg, #030711 0%, #071832 38%, #0b3465 72%, #040914 100%) !important;
  background-size: 140% 140%, 120% 120%, 120% 120%, 100% 100% !important;
  color: #f8fbff !important;
  border-color: rgba(164, 199, 229, 0.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 22px 50px rgba(3, 10, 24, 0.24) !important;
  animation: yaagiMetallicSilk 16s ease-in-out infinite alternate;
}

.hero-card h2,
.hero-card p,
.card p,
.dashboard-card p,
.launch-welcome p,
.launch-flow p,
.launch-premium-card p {
  text-align: left !important;
}

.hero-card p {
  color: rgba(248, 251, 255, 0.88) !important;
}

@keyframes yaagiMetallicSilk {
  0% { background-position: 0% 0%, 100% 0%, 85% 95%, 0% 0%; }
  100% { background-position: 18% 8%, 86% 14%, 92% 88%, 0% 0%; }
}

button.launch-primary-action,
.launch-actions button.launch-primary-action,
.launch-step-actions button.launch-primary-action,
.flow-action-row > button:not(.secondary):not(.muted-button):not(.danger),
.hero-card button:not(.secondary):not(.muted-button):not(.danger) {
  background:
    linear-gradient(135deg, #fff3b4 0%, #e8c45e 34%, #c58a24 67%, #fff0a8 100%) !important;
  color: #071832 !important;
  border: 1px solid rgba(128, 86, 21, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 13px 28px rgba(156, 101, 17, 0.27) !important;
  text-shadow: none !important;
}

button.launch-primary-action:hover,
.launch-actions button.launch-primary-action:hover,
.launch-step-actions button.launch-primary-action:hover,
.flow-action-row > button:not(.secondary):not(.muted-button):not(.danger):hover,
.hero-card button:not(.secondary):not(.muted-button):not(.danger):hover {
  background:
    linear-gradient(135deg, #ffeaa0 0%, #d9ad45 38%, #a96f17 72%, #f7d87a 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 16px 32px rgba(132, 82, 12, 0.32) !important;
}

button.launch-primary-action:focus-visible,
.launch-actions button.launch-primary-action:focus-visible,
.launch-step-actions button.launch-primary-action:focus-visible,
.flow-action-row > button:not(.secondary):not(.muted-button):not(.danger):focus-visible,
.hero-card button:not(.secondary):not(.muted-button):not(.danger):focus-visible {
  outline: 3px solid rgba(255, 220, 120, 0.58) !important;
  outline-offset: 3px !important;
}

.dashboard-topbar .dashboard-logo-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-self: center !important;
  text-align: center !important;
  width: auto !important;
  max-width: min(320px, 72vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.dashboard-topbar .dashboard-logo-panel img {
  margin: 0 auto !important;
}

.dashboard-brand-slogan {
  width: 100% !important;
  text-align: center !important;
  align-self: center !important;
}

@media (max-width: 760px) {
  .hero-card {
    animation-duration: 20s;
  }

  .dashboard-topbar .dashboard-logo-panel {
    max-width: min(235px, 78vw) !important;
  }
}

/* Y-DATA yaagi-0.2 - consistent horizontal brand headers */
.topbar {
  align-items: flex-start !important;
}

.topbar > div:first-child,
.topbar .ps-header-title-block {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.ps-header-controls {
  align-items: flex-start !important;
}

.logo-circle.ps-wordmark-logo,
.ps-header-controls .logo-circle.ps-wordmark-logo {
  width: clamp(148px, 24vw, 205px) !important;
  min-width: clamp(148px, 24vw, 205px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
}

.logo-circle.ps-wordmark-logo img,
.ps-header-controls .logo-circle.ps-wordmark-logo img {
  display: block !important;
  width: 100% !important;
  max-width: 205px !important;
  height: auto !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.dashboard-topbar {
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "welcome logo"
    "name    logo"
    "status  language" !important;
  column-gap: 18px !important;
  align-items: start !important;
}

.dashboard-topbar .dashboard-logo-panel {
  justify-self: end !important;
  align-self: start !important;
  align-items: flex-end !important;
  text-align: right !important;
  max-width: min(230px, 34vw) !important;
  margin: 0 !important;
}

.dashboard-topbar .dashboard-logo-panel img {
  width: clamp(150px, 21vw, 220px) !important;
  max-width: 220px !important;
  margin: 0 0 0 auto !important;
}

.dashboard-brand-slogan {
  text-align: right !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  margin-top: 4px !important;
}

@media (max-width: 760px) {
  .topbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .ps-header-controls {
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .logo-circle.ps-wordmark-logo,
  .ps-header-controls .logo-circle.ps-wordmark-logo {
    width: clamp(150px, 58vw, 210px) !important;
    min-width: clamp(150px, 58vw, 210px) !important;
  }

  .dashboard-topbar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "welcome"
      "name"
      "logo"
      "status"
      "language" !important;
    row-gap: 8px !important;
  }

  .dashboard-topbar .dashboard-logo-panel {
    justify-self: start !important;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: min(220px, 72vw) !important;
  }

  .dashboard-topbar .dashboard-logo-panel img {
    width: clamp(150px, 56vw, 210px) !important;
    max-width: 210px !important;
    margin: 0 !important;
  }

  .dashboard-brand-slogan {
    text-align: left !important;
  }
}
/* Y-DATA yaagi-0.2.1 - header alignment + premium gold CTA polish
   Purpose: keep login/status and language control aligned, keep full YAAGI wordmark smaller,
   and make primary CTA buttons feel more metallic/premium without changing app logic. */

/* Consistent functional page header: title left, compact YAAGI wordmark right,
   status and language on one aligned row. */
.topbar:not(.dashboard-topbar) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(170px, auto) !important;
  grid-template-areas:
    "eyebrow brand"
    "title   brand"
    "status  language" !important;
  column-gap: clamp(16px, 4vw, 34px) !important;
  row-gap: 5px !important;
  align-items: start !important;
  justify-content: stretch !important;
  flex-wrap: nowrap !important;
}

.topbar:not(.dashboard-topbar) > .ps-header-title-block,
.topbar:not(.dashboard-topbar) > .ps-header-controls {
  display: contents !important;
}

.topbar:not(.dashboard-topbar) .ps-header-title-block .small {
  grid-area: eyebrow !important;
  align-self: end !important;
  margin: 0 !important;
}

.topbar:not(.dashboard-topbar) .ps-header-title-block h1 {
  grid-area: title !important;
  align-self: start !important;
  margin: 0 !important;
}

.topbar:not(.dashboard-topbar) .ps-user-badge,
.topbar:not(.dashboard-topbar) .ps-user-badge.ps-status-control {
  grid-area: status !important;
  justify-self: start !important;
  align-self: center !important;
  margin: 8px 0 0 0 !important;
  width: min(var(--ps-header-control-width, 280px), 100%) !important;
  min-width: min(var(--ps-header-control-width, 280px), 100%) !important;
  max-width: min(var(--ps-header-control-width, 280px), 100%) !important;
}

.topbar:not(.dashboard-topbar) .logo-circle.ps-wordmark-logo,
.topbar:not(.dashboard-topbar) .ps-header-controls .logo-circle.ps-wordmark-logo {
  grid-area: brand !important;
  justify-self: end !important;
  align-self: start !important;
  width: clamp(135px, 17vw, 174px) !important;
  min-width: clamp(135px, 17vw, 174px) !important;
  max-width: 174px !important;
  margin: 0 !important;
}

.topbar:not(.dashboard-topbar) .logo-circle.ps-wordmark-logo img,
.topbar:not(.dashboard-topbar) .ps-header-controls .logo-circle.ps-wordmark-logo img {
  width: 100% !important;
  max-width: 174px !important;
  height: auto !important;
  object-fit: contain !important;
}

body .app .topbar:not(.dashboard-topbar) .ps-global-language-switcher,
body .app .topbar:not(.dashboard-topbar) .ps-header-controls .ps-global-language-switcher {
  grid-area: language !important;
  justify-self: end !important;
  align-self: center !important;
  margin: 8px 0 0 0 !important;
  width: var(--ps-header-control-width, 280px) !important;
  min-width: var(--ps-header-control-width, 280px) !important;
  max-width: var(--ps-header-control-width, 280px) !important;
}

/* Dashboard/start header: slightly smaller wordmark, right aligned, language/status unchanged. */
.dashboard-topbar {
  grid-template-columns: minmax(0, 1fr) minmax(170px, auto) !important;
  column-gap: clamp(18px, 4vw, 36px) !important;
}

.dashboard-topbar .dashboard-logo-panel {
  max-width: min(198px, 28vw) !important;
  justify-self: end !important;
  align-items: flex-end !important;
  text-align: right !important;
}

.dashboard-topbar .dashboard-logo-panel img {
  width: clamp(160px, 18vw, 198px) !important;
  max-width: 198px !important;
  margin-left: auto !important;
}

.dashboard-brand-slogan {
  font-size: 12px !important;
  line-height: 1.22 !important;
}

/* Richer YAAGI gold for primary actions: metallic but controlled. */
button.launch-primary-action,
.launch-actions button.launch-primary-action,
.launch-step-actions button.launch-primary-action,
.flow-action-row > button:not(.secondary):not(.muted-button):not(.danger),
.hero-card button:not(.secondary):not(.muted-button):not(.danger) {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 16%),
    linear-gradient(135deg, #fff4b8 0%, #f1d678 18%, #d6a638 43%, #9d6515 66%, #eac65f 84%, #fff0a6 100%) !important;
  color: #071832 !important;
  border: 1px solid rgba(118, 76, 12, 0.55) !important;
  border-bottom-color: rgba(82, 51, 6, 0.68) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -2px 0 rgba(96, 58, 5, 0.18),
    0 2px 0 rgba(97, 59, 5, 0.34),
    0 16px 30px rgba(121, 77, 14, 0.28) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
}

button.launch-primary-action::after,
.launch-actions button.launch-primary-action::after,
.launch-step-actions button.launch-primary-action::after,
.flow-action-row > button:not(.secondary):not(.muted-button):not(.danger)::after,
.hero-card button:not(.secondary):not(.muted-button):not(.danger)::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px 1px auto 1px !important;
  height: 46% !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)) !important;
  pointer-events: none !important;
}

button.launch-primary-action:hover,
.launch-actions button.launch-primary-action:hover,
.launch-step-actions button.launch-primary-action:hover,
.flow-action-row > button:not(.secondary):not(.muted-button):not(.danger):hover,
.hero-card button:not(.secondary):not(.muted-button):not(.danger):hover {
  background:
    linear-gradient(160deg, rgba(255,255,255,.66) 0%, rgba(255,255,255,0) 16%),
    linear-gradient(135deg, #fff0a6 0%, #e7c15b 20%, #c28a24 48%, #8b570e 69%, #e0b64f 86%, #fae391 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -2px 0 rgba(70, 42, 4, .22),
    0 3px 0 rgba(76, 46, 5, .33),
    0 20px 34px rgba(101, 63, 10, .34) !important;
  transform: translateY(-2px) !important;
}

button.launch-primary-action:active,
.launch-actions button.launch-primary-action:active,
.launch-step-actions button.launch-primary-action:active,
.flow-action-row > button:not(.secondary):not(.muted-button):not(.danger):active,
.hero-card button:not(.secondary):not(.muted-button):not(.danger):active {
  transform: translateY(0) !important;
  box-shadow:
    inset 0 2px 5px rgba(60, 37, 5, .20),
    0 1px 0 rgba(76, 46, 5, .28),
    0 10px 20px rgba(101, 63, 10, .25) !important;
}

/* Mobile: keep the full wordmark visible, but stack safely. */
@media (max-width: 760px) {
  .topbar:not(.dashboard-topbar) {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "eyebrow brand"
      "title   brand"
      "status  status"
      "language language" !important;
    column-gap: 12px !important;
    row-gap: 7px !important;
  }

  .topbar:not(.dashboard-topbar) .logo-circle.ps-wordmark-logo,
  .topbar:not(.dashboard-topbar) .ps-header-controls .logo-circle.ps-wordmark-logo {
    width: clamp(128px, 38vw, 162px) !important;
    min-width: clamp(128px, 38vw, 162px) !important;
    max-width: 162px !important;
  }

  .topbar:not(.dashboard-topbar) .logo-circle.ps-wordmark-logo img,
  .topbar:not(.dashboard-topbar) .ps-header-controls .logo-circle.ps-wordmark-logo img {
    max-width: 162px !important;
  }

  .topbar:not(.dashboard-topbar) .ps-user-badge,
  .topbar:not(.dashboard-topbar) .ps-user-badge.ps-status-control,
  body .app .topbar:not(.dashboard-topbar) .ps-global-language-switcher,
  body .app .topbar:not(.dashboard-topbar) .ps-header-controls .ps-global-language-switcher {
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 4px !important;
  }

  .dashboard-topbar .dashboard-logo-panel {
    max-width: min(188px, 58vw) !important;
  }

  .dashboard-topbar .dashboard-logo-panel img {
    width: clamp(150px, 52vw, 188px) !important;
    max-width: 188px !important;
  }
}

@media (max-width: 440px) {
  .topbar:not(.dashboard-topbar) {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "eyebrow"
      "title"
      "status"
      "language" !important;
  }

  .topbar:not(.dashboard-topbar) .logo-circle.ps-wordmark-logo,
  .topbar:not(.dashboard-topbar) .ps-header-controls .logo-circle.ps-wordmark-logo {
    justify-self: start !important;
  }
}

/* Y-DATA yaagi-0.2.2 - mobile header, compact language control, dark YAAGI cards */
:root {
  --yaagi-header-control-height: 42px;
  --yaagi-header-control-width: clamp(188px, 24vw, 248px);
  --yaagi-header-mobile-control-width: min(248px, calc(100vw - 36px));
  --yaagi-navy-glass: rgba(7, 24, 50, 0.96);
  --yaagi-navy-line: rgba(164, 199, 229, 0.22);
}

/* Keep the full YAAGI wordmark visible and let headers wrap instead of clipping. */
html body .app .topbar,
html body .app .topbar.dashboard-topbar {
  max-width: 100% !important;
  overflow: visible !important;
}

html body .app .topbar .logo-circle.ps-wordmark-logo,
html body .app .topbar .dashboard-logo-panel {
  overflow: visible !important;
  box-sizing: border-box !important;
}

html body .app .topbar .logo-circle.ps-wordmark-logo img,
html body .app .topbar .dashboard-logo-panel img {
  display: block !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Desktop/tablet: status and language are the same height and align as a matched pair. */
html body .app .topbar .ps-user-badge,
html body .app .topbar .ps-user-badge.ps-status-control,
html body .app .topbar .ps-global-language-switcher,
html body .app .topbar .ps-header-controls .ps-global-language-switcher {
  height: var(--yaagi-header-control-height) !important;
  min-height: var(--yaagi-header-control-height) !important;
  max-height: var(--yaagi-header-control-height) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  align-self: center !important;
  margin-top: 8px !important;
}

html body .app .topbar .ps-user-badge,
html body .app .topbar .ps-user-badge.ps-status-control {
  width: min(var(--yaagi-header-control-width), 100%) !important;
  min-width: 0 !important;
  max-width: min(var(--yaagi-header-control-width), 100%) !important;
  padding: 5px 8px !important;
  gap: 7px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(22, 163, 74, 0.22) !important;
  box-shadow: 0 14px 30px rgba(15, 47, 87, 0.10) !important;
}

html body .app .topbar .ps-user-badge.is-logged-out,
html body .app .topbar .ps-user-badge.ps-status-control.is-logged-out {
  border-color: rgba(220, 38, 38, 0.25) !important;
}

html body .app .topbar .ps-user-badge.is-logged-in::before {
  display: none !important;
}

html body .app .topbar .ps-status-led-wrap {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10) !important;
}

html body .app .topbar .ps-status-text {
  height: 30px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
}

/* Language selector: one compact pill, no double white container/select bar. */
html body .app .topbar .ps-global-language-switcher,
html body .app .topbar .ps-header-controls .ps-global-language-switcher {
  width: fit-content !important;
  min-width: 170px !important;
  max-width: min(var(--yaagi-header-control-width), 100%) !important;
  padding: 0 12px !important;
  gap: 0 !important;
  justify-content: center !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,251,0.94)) !important;
  border: 1px solid rgba(16, 32, 51, 0.14) !important;
  box-shadow: 0 14px 30px rgba(15, 47, 87, 0.10) !important;
  color: #102033 !important;
  overflow: hidden !important;
}

html body .app .topbar .ps-global-language-icon,
html body .app .topbar .ps-header-controls .ps-global-language-icon {
  display: none !important;
}

html body .app .topbar .ps-global-language-switcher select,
html body .app .topbar .ps-header-controls .ps-global-language-switcher select,
html body .app .topbar select.ps-global-language-select {
  width: auto !important;
  min-width: 146px !important;
  max-width: 205px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 26px 0 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 40px !important;
  outline: none !important;
}

html body .app .topbar .ps-global-language-switcher:focus-within,
html body .app .topbar .ps-user-badge.ps-status-control:focus-visible {
  outline: 3px solid rgba(215, 169, 71, 0.36) !important;
  outline-offset: 3px !important;
  border-color: rgba(173, 122, 30, 0.45) !important;
}

/* Functional pages: safe mobile stack, using the settings-like logo treatment everywhere. */
@media (max-width: 560px) {
  html body .app .topbar:not(.dashboard-topbar) {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "brand"
      "eyebrow"
      "title"
      "status"
      "language" !important;
    justify-items: start !important;
    align-items: start !important;
    row-gap: 7px !important;
    column-gap: 0 !important;
  }

  html body .app .topbar:not(.dashboard-topbar) .logo-circle.ps-wordmark-logo,
  html body .app .topbar:not(.dashboard-topbar) .ps-header-controls .logo-circle.ps-wordmark-logo {
    justify-self: start !important;
    width: min(218px, 72vw) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 36px) !important;
    margin: 0 0 2px 0 !important;
  }

  html body .app .topbar:not(.dashboard-topbar) .logo-circle.ps-wordmark-logo img,
  html body .app .topbar:not(.dashboard-topbar) .ps-header-controls .logo-circle.ps-wordmark-logo img {
    width: 100% !important;
    max-width: 218px !important;
  }

  html body .app .topbar:not(.dashboard-topbar) .ps-user-badge,
  html body .app .topbar:not(.dashboard-topbar) .ps-user-badge.ps-status-control,
  html body .app .topbar:not(.dashboard-topbar) .ps-global-language-switcher,
  html body .app .topbar:not(.dashboard-topbar) .ps-header-controls .ps-global-language-switcher {
    justify-self: start !important;
    width: fit-content !important;
    min-width: 170px !important;
    max-width: var(--yaagi-header-mobile-control-width) !important;
    margin-top: 3px !important;
  }

  html body .app .topbar:not(.dashboard-topbar) .ps-user-badge,
  html body .app .topbar:not(.dashboard-topbar) .ps-user-badge.ps-status-control {
    width: var(--yaagi-header-mobile-control-width) !important;
  }

  html body .app .topbar:not(.dashboard-topbar) .ps-status-text {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  html body .app .topbar:not(.dashboard-topbar) .ps-global-language-switcher select,
  html body .app .topbar:not(.dashboard-topbar) .ps-header-controls .ps-global-language-switcher select {
    min-width: 142px !important;
    max-width: calc(100vw - 72px) !important;
  }
}

/* Dashboard/start page: stack safely on mobile so the horizontal logo never clips. */
@media (max-width: 760px) {
  html body .app .dashboard-topbar {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "welcome"
      "name"
      "status"
      "language" !important;
    justify-items: start !important;
    align-items: start !important;
    row-gap: 8px !important;
    column-gap: 0 !important;
  }

  html body .app .dashboard-topbar .dashboard-logo-panel {
    justify-self: start !important;
    align-items: flex-start !important;
    width: min(260px, 76vw) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 36px) !important;
    margin: 0 0 8px 0 !important;
  }

  html body .app .dashboard-topbar .dashboard-logo-panel img {
    width: min(260px, 76vw) !important;
    max-width: calc(100vw - 36px) !important;
  }

  html body .app .dashboard-topbar .dashboard-brand-slogan {
    text-align: left !important;
    white-space: normal !important;
    max-width: calc(100vw - 36px) !important;
  }

  html body .app .dashboard-topbar .ps-user-badge,
  html body .app .dashboard-topbar .ps-user-badge.ps-status-control,
  html body .app .dashboard-topbar .ps-global-language-switcher,
  html body .app .dashboard-topbar .ps-header-controls .ps-global-language-switcher {
    justify-self: start !important;
    width: var(--yaagi-header-mobile-control-width) !important;
    min-width: 0 !important;
    max-width: var(--yaagi-header-mobile-control-width) !important;
    margin-top: 3px !important;
  }

  html body .app .dashboard-topbar .ps-header-controls {
    justify-self: start !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    max-width: 100% !important;
  }
}

@media (max-width: 380px) {
  html body .app .dashboard-topbar .dashboard-logo-panel,
  html body .app .dashboard-topbar .dashboard-logo-panel img,
  html body .app .topbar:not(.dashboard-topbar) .logo-circle.ps-wordmark-logo,
  html body .app .topbar:not(.dashboard-topbar) .ps-header-controls .logo-circle.ps-wordmark-logo {
    width: min(224px, 78vw) !important;
    max-width: calc(100vw - 32px) !important;
  }

  html body .app .topbar .ps-status-text {
    font-size: 12.2px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* Darker, calmer YAAGI card/hero language across large blue panels. */
html body .app .hero-card,
html body .app .guide-hero,
html body .app .child-planning-hero,
html body .app .login-hero {
  background:
    radial-gradient(circle at 18% 0%, rgba(76, 137, 190, 0.28), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.10), transparent 28%),
    radial-gradient(circle at 88% 88%, rgba(215, 169, 71, 0.06), transparent 22%),
    linear-gradient(135deg, #020611 0%, #071323 36%, #081f3e 68%, #020611 100%) !important;
  border: 1px solid var(--yaagi-navy-line) !important;
  color: #f8fbff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 50px rgba(3, 10, 24, 0.24) !important;
}

html body .app .guide-hero h2,
html body .app .guide-hero p,
html body .app .guide-kicker,
html body .app .child-planning-hero h2,
html body .app .child-planning-hero p,
html body .app .login-hero h2,
html body .app .login-hero p {
  color: #f8fbff !important;
}

html body .app .guide-kicker {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

html body .app .guide-copy .guide-step {
  background: linear-gradient(135deg, #071832, #0b3465) !important;
  color: #f8fbff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

html body .app .guide-shot {
  background:
    radial-gradient(circle at 20% 0%, rgba(76, 137, 190, 0.08), transparent 36%),
    linear-gradient(180deg, #f8fbff, #f1f5f9) !important;
  border-color: rgba(8, 31, 62, 0.10) !important;
}

/* Controlled premium gold for primary guide links and key CTAs. */
html body .app .guide-actions a:not(.secondary),
html body .app button.launch-primary-action,
html body .app .launch-actions button.launch-primary-action,
html body .app .launch-step-actions button.launch-primary-action,
html body .app .flow-action-row > button:not(.secondary):not(.muted-button):not(.danger),
html body .app .hero-card button:not(.secondary):not(.muted-button):not(.danger) {
  background:
    linear-gradient(160deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,0) 15%),
    linear-gradient(135deg, #fff1aa 0%, #e9ca68 22%, #c9962e 48%, #8f5a10 72%, #e4bd59 100%) !important;
  color: #071323 !important;
  border: 1px solid rgba(112, 72, 11, 0.55) !important;
  border-bottom-color: rgba(75, 46, 4, 0.70) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -2px 0 rgba(76,46,5,0.18),
    0 2px 0 rgba(76,46,5,0.28),
    0 15px 28px rgba(101,63,10,0.25) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.38) !important;
}

html body .app .guide-actions a:not(.secondary):hover,
html body .app button.launch-primary-action:hover,
html body .app .launch-actions button.launch-primary-action:hover,
html body .app .launch-step-actions button.launch-primary-action:hover,
html body .app .flow-action-row > button:not(.secondary):not(.muted-button):not(.danger):hover,
html body .app .hero-card button:not(.secondary):not(.muted-button):not(.danger):hover {
  background:
    linear-gradient(160deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 15%),
    linear-gradient(135deg, #ffe999 0%, #ddb752 24%, #b98021 52%, #774806 76%, #d8aa45 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.68),
    inset 0 -2px 0 rgba(60,37,5,0.22),
    0 3px 0 rgba(68,40,4,0.30),
    0 18px 32px rgba(88,54,8,0.31) !important;
}

html body .app .guide-actions a:not(.secondary):focus-visible,
html body .app button.launch-primary-action:focus-visible,
html body .app .launch-actions button.launch-primary-action:focus-visible,
html body .app .launch-step-actions button.launch-primary-action:focus-visible,
html body .app .flow-action-row > button:not(.secondary):not(.muted-button):not(.danger):focus-visible,
html body .app .hero-card button:not(.secondary):not(.muted-button):not(.danger):focus-visible {
  outline: 3px solid rgba(215, 169, 71, 0.46) !important;
  outline-offset: 3px !important;
}

/* Professional sharing module */
.professional-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.premium-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  background: #fff7db;
  color: #8a5b00;
  border: 1px solid #f3d37a;
}

.status-badge.is-active {
  background: #e8f8ef;
  color: #166534;
  border-color: #bce8cb;
}

.status-badge.is-paused {
  background: #f8fafc;
  color: #475467;
  border-color: #d7dee8;
}

.form-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.permission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 8px 0 14px;
}

.permission-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #dbe6f3;
  background: #f8fbff;
  color: #20354f;
  font-weight: 850;
  line-height: 1.25;
}

.permission-option input {
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #0A4EA3;
}

.button-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.button-row button {
  margin-top: 0;
}

.professional-shares-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.professional-share-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe6f3;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.professional-share-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.professional-share-title {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.professional-share-meta {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.permission-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.permission-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid #d7e5f5;
  background: #f3f8ff;
  color: #0a4ea3;
  font-size: 12px;
  font-weight: 900;
}

.share-link-box {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  overflow-wrap: anywhere;
}

.share-link-box code {
  color: #20354f;
  font-size: 12px;
  line-height: 1.45;
}

.empty-state {
  padding: 14px;
  border: 1px dashed #cbd5e1;
  border-radius: 16px;
  color: var(--muted);
  background: #f8fafc;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .form-grid-two,
  .permission-grid {
    grid-template-columns: 1fr;
  }

  .button-row button,
  .button-row a {
    width: 100%;
  }

  .professional-share-card header {
    display: grid;
  }
}


/* YAAGI 2.0 - multilingual status/login pill fix
   Long labels such as Spanish "Sesión cerrada - Completar perfil" must never be clipped. */
.ps-user-badge,
.ps-user-badge.ps-status-control {
  width: fit-content !important;
  min-width: min(100%, 280px) !important;
  max-width: min(100%, 520px) !important;
  height: auto !important;
  min-height: var(--ps-header-control-height, 42px) !important;
  max-height: none !important;
  padding: 5px 8px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  flex-wrap: nowrap !important;
}

.ps-status-text {
  width: auto !important;
  min-width: 0 !important;
  max-width: 460px !important;
  height: auto !important;
  min-height: 32px !important;
  max-height: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.15 !important;
  padding: 6px 12px !important;
}

.topbar,
.ps-header-controls,
.ps-header-title-block {
  min-width: 0 !important;
}

@media (max-width: 760px) {
  .ps-user-badge,
  .ps-user-badge.ps-status-control {
    max-width: 100% !important;
  }
  .ps-status-text {
    max-width: calc(100vw - 120px) !important;
    font-size: 12.5px !important;
  }
}

@media (max-width: 420px) {
  .ps-user-badge,
  .ps-user-badge.ps-status-control {
    align-items: flex-start !important;
  }
  .ps-status-text {
    max-width: calc(100vw - 110px) !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
  }
}


/* YAAGI 2.1 subscription prototype */
.yaagi-subscription-mini-status,
.subscription-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  width: fit-content;
  margin: -8px 0 16px;
  padding: 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(10, 78, 163, 0.16);
  background: #eef6ff;
  color: #0A4EA3;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.25;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 18px rgba(10, 78, 163, 0.08);
}

.yaagi-subscription-mini-status.is-plus,
.subscription-status-badge.is-plus {
  border-color: rgba(217, 154, 0, 0.34);
  background: linear-gradient(135deg, #fff8df 0%, #fff1b8 42%, #f4c75d 100%);
  color: #6c4a00;
}

.yaagi-subscription-mini-status.is-expired,
.subscription-status-badge.is-expired {
  border-color: rgba(220, 38, 38, 0.22);
  background: #fff1f2;
  color: #b42318;
}

.subscription-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.subscription-plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

.subscription-plan-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.subscription-plan-card.is-plus {
  border-color: rgba(217, 154, 0, 0.32);
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 58%);
}

.subscription-plan-card h3 {
  margin-top: 0;
}

.subscription-feature-list {
  margin: 12px 0 0;
  padding-left: 20px;
  color: #40546d;
  line-height: 1.55;
}

.subscription-actions {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.subscription-key-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.subscription-key-row input {
  min-width: 0;
}

.subscription-message {
  min-height: 22px;
  margin-top: 12px;
  font-weight: 800;
  color: var(--muted);
}

.subscription-message.is-ok {
  color: #047857;
}

.subscription-message.is-error {
  color: #b42318;
}

.subscription-test-keys {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.subscription-test-key {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 10px;
  background: #f8fafc;
  color: #24364b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

@media (min-width: 720px) {
  .subscription-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .subscription-key-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}


.holiday-custom-grid {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 16px;
  background: rgba(248, 251, 255, 0.92);
}

.holiday-custom-grid select {
  margin: 6px 0 10px;
}


/* YAAGI 10.3 premium holiday cards */
.yaagi-holiday-card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.yaagi-holiday-card {
  --holiday-bg1: #f7f9fc;
  --holiday-bg2: #ffffff;
  --holiday-border: rgba(44, 75, 105, 0.14);
  --holiday-accent: #2f5f9f;
  --holiday-accent-2: #7aa7d9;
  --holiday-soft: rgba(255,255,255,0.74);
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  width: 100%;
  min-height: 92px;
  padding: 14px 16px 14px 14px;
  border: 1px solid var(--holiday-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255,255,255,0.84), transparent 28%),
    linear-gradient(135deg, var(--holiday-bg1), var(--holiday-bg2));
  color: #132238;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(17, 35, 63, 0.08);
}

.yaagi-holiday-card::after {
  content: "";
  position: absolute;
  inset: auto -24px -42px auto;
  width: 160px;
  height: 110px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--holiday-accent) 13%, transparent);
  pointer-events: none;
}

.yaagi-holiday-card-icon {
  position: relative;
  width: 96px;
  min-width: 96px;
  height: 64px;
  display: block;
  align-self: center;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.14)),
    linear-gradient(135deg, var(--holiday-accent), var(--holiday-accent-2));
  color: transparent;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px rgba(15, 35, 75, 0.16);
}

.yaagi-holiday-card-icon::before,
.yaagi-holiday-card-icon::after,
.arrangement-holiday-icon::before,
.arrangement-holiday-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.yaagi-holiday-card-icon::before {
  left: 12px;
  right: 12px;
  bottom: 12px;
  height: 18px;
  border-radius: 18px 18px 8px 8px;
  background: rgba(255,255,255,0.78);
}

.yaagi-holiday-card-icon::after {
  width: 26px;
  height: 26px;
  right: 13px;
  top: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  box-shadow: -34px 24px 0 -9px rgba(255,255,255,0.55);
}

.yaagi-holiday-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.yaagi-holiday-card-body strong {
  color: #10243d;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.yaagi-holiday-card-body span {
  color: #40546d;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 750;
}

.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card {
  margin-bottom: 12px;
}

.holiday-review-year {
  margin-left: auto;
  align-self: center;
  z-index: 1;
  font-size: 12px;
  color: #66758a;
  white-space: nowrap;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.58);
}

.holiday-edit-main {
  flex: 1;
  min-width: 0;
  z-index: 1;
}

.holiday-edit-row.yaagi-holiday-card {
  align-items: flex-start;
}

.arrangement-holiday-block.yaagi-holiday-themed {
  --holiday-bg1: #f7f9fc;
  --holiday-bg2: #ffffff;
  --holiday-border: rgba(44, 75, 105, 0.14);
  --holiday-accent: #2f5f9f;
  --holiday-accent-2: #7aa7d9;
  position: relative;
  overflow: hidden;
  border-color: var(--holiday-border);
  background:
    radial-gradient(circle at 96% 0%, rgba(255,255,255,0.78), transparent 22%),
    linear-gradient(135deg, var(--holiday-bg1), var(--holiday-bg2));
  box-shadow: 0 14px 34px rgba(17, 35, 63, 0.07);
}

.arrangement-holiday-block.yaagi-holiday-themed::after {
  content: "";
  position: absolute;
  right: -38px;
  bottom: -48px;
  width: 145px;
  height: 108px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--holiday-accent) 12%, transparent);
  pointer-events: none;
}

.arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-title {
  color: #10243d;
}

.arrangement-holiday-icon {
  position: relative;
  width: 72px;
  height: 52px;
  min-width: 72px;
  display: inline-block;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.64), rgba(255,255,255,0.12)),
    linear-gradient(135deg, var(--holiday-accent), var(--holiday-accent-2));
  color: transparent !important;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 18px rgba(15, 35, 75, 0.13);
}

.arrangement-holiday-icon::before {
  left: 9px;
  right: 9px;
  bottom: 9px;
  height: 14px;
  border-radius: 16px 16px 8px 8px;
  background: rgba(255,255,255,0.78);
}

.arrangement-holiday-icon::after {
  width: 20px;
  height: 20px;
  right: 10px;
  top: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.86);
  box-shadow: -25px 19px 0 -7px rgba(255,255,255,0.52);
}

.holiday-theme-autumn {
  --holiday-bg1: #fff4e8;
  --holiday-bg2: #ffe3c2;
  --holiday-border: rgba(205, 99, 35, 0.22);
  --holiday-accent: #d36b27;
  --holiday-accent-2: #f6a64f;
}

.holiday-theme-autumn .yaagi-holiday-card-icon::before,
.holiday-theme-autumn .arrangement-holiday-icon::before {
  background:
    radial-gradient(circle at 20% 65%, #8d3d1d 0 4px, transparent 5px),
    radial-gradient(circle at 52% 45%, #f8d27e 0 5px, transparent 6px),
    radial-gradient(circle at 78% 65%, #c94f26 0 4px, transparent 5px),
    rgba(255,255,255,0.36);
}

.holiday-theme-christmas {
  --holiday-bg1: #eefaf2;
  --holiday-bg2: #d8f0e0;
  --holiday-border: rgba(40, 139, 84, 0.22);
  --holiday-accent: #1f8a52;
  --holiday-accent-2: #5fc97e;
}

.holiday-theme-christmas .yaagi-holiday-card-icon::before,
.holiday-theme-christmas .arrangement-holiday-icon::before {
  clip-path: polygon(50% 0%, 78% 40%, 64% 40%, 88% 78%, 12% 78%, 36% 40%, 22% 40%);
  height: 40px;
  bottom: 8px;
  background: rgba(255,255,255,0.82);
}

.holiday-theme-carnival {
  --holiday-bg1: #edf6ff;
  --holiday-bg2: #d9ecff;
  --holiday-border: rgba(56, 132, 215, 0.22);
  --holiday-accent: #256db6;
  --holiday-accent-2: #77b7f6;
}

.holiday-theme-carnival .yaagi-holiday-card-icon::before,
.holiday-theme-carnival .arrangement-holiday-icon::before {
  background:
    linear-gradient(120deg, rgba(255,255,255,0.84) 0 28%, transparent 29% 42%, rgba(255,255,255,0.68) 43% 58%, transparent 59% 72%, rgba(255,255,255,0.84) 73%),
    rgba(255,255,255,0.30);
}

.holiday-theme-easter {
  --holiday-bg1: #fff0f8;
  --holiday-bg2: #fde2f1;
  --holiday-border: rgba(201, 62, 142, 0.20);
  --holiday-accent: #c83c90;
  --holiday-accent-2: #ef8cc1;
}

.holiday-theme-easter .yaagi-holiday-card-icon::before,
.holiday-theme-easter .arrangement-holiday-icon::before {
  width: 28px;
  left: 22px;
  right: auto;
  height: 36px;
  bottom: 9px;
  border-radius: 50% 50% 45% 45%;
  background: rgba(255,255,255,0.84);
  box-shadow: 31px 4px 0 -4px rgba(255,255,255,0.64);
}

.holiday-theme-spring {
  --holiday-bg1: #effbf5;
  --holiday-bg2: #daf3e7;
  --holiday-border: rgba(45, 151, 104, 0.20);
  --holiday-accent: #269866;
  --holiday-accent-2: #82d4a7;
}

.holiday-theme-spring .yaagi-holiday-card-icon::before,
.holiday-theme-spring .arrangement-holiday-icon::before {
  background:
    radial-gradient(circle at 25% 50%, rgba(255,255,255,0.88) 0 7px, transparent 8px),
    radial-gradient(circle at 49% 38%, rgba(255,255,255,0.72) 0 8px, transparent 9px),
    radial-gradient(circle at 72% 54%, rgba(255,255,255,0.88) 0 7px, transparent 8px);
}

.holiday-theme-summer {
  --holiday-bg1: #fff7dc;
  --holiday-bg2: #fde9a7;
  --holiday-border: rgba(226, 157, 37, 0.24);
  --holiday-accent: #e19a24;
  --holiday-accent-2: #f5c95b;
}

.holiday-theme-summer .yaagi-holiday-card-icon::before,
.holiday-theme-summer .arrangement-holiday-icon::before {
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 16px;
  border-radius: 999px 999px 8px 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0.5)),
    rgba(255,255,255,0.72);
}

.holiday-theme-summer .yaagi-holiday-card-icon::after,
.holiday-theme-summer .arrangement-holiday-icon::after {
  background: #fff;
  box-shadow:
    0 0 0 6px rgba(255,255,255,0.18),
    -32px 26px 0 -10px rgba(255,255,255,0.62);
}

.holiday-theme-other {
  --holiday-bg1: #f4f7fb;
  --holiday-bg2: #e8eef6;
  --holiday-border: rgba(82, 104, 133, 0.18);
  --holiday-accent: #526885;
  --holiday-accent-2: #9db0c5;
}

@media (max-width: 640px) {
  .yaagi-holiday-card {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 82px;
    padding: 12px;
    gap: 12px;
    border-radius: 20px;
  }

  .yaagi-holiday-card-icon {
    width: 78px;
    min-width: 78px;
    height: 56px;
    border-radius: 16px;
  }

  .arrangement-holiday-icon {
    width: 60px;
    min-width: 60px;
    height: 46px;
  }

  .holiday-review-year {
    display: none;
  }
}



/* YAAGI 10.3 subscription and legal readiness */
.subscription-status-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 14px 0;
}

.subscription-status-grid > div {
  padding: 13px 14px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 16px;
  background: #f8fbff;
}

.subscription-meta-label {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 800;
}

.subscription-status-text,
.subscription-cloud-note {
  margin-top: 10px;
  color: #40546d;
  line-height: 1.55;
}

.subscription-cloud-note.is-ok {
  color: #047857;
  font-weight: 800;
}

.subscription-cloud-note.is-warning {
  color: #9a5b00;
  font-weight: 800;
}

.subscription-actions .danger-button,
.danger-button {
  border-color: rgba(220, 38, 38, 0.28);
  background: #fff1f2;
  color: #b42318;
}

.subscription-setup-card {
  margin-top: 14px;
}

.legal-app .hero-card,
.legal-hero {
  margin-bottom: 14px;
}

.legal-card h2,
.subscription-status-card h2,
.subscription-upgrade-card h2,
.subscription-portal-card h2,
.subscription-test-card h2,
.subscription-setup-card h2,
.subscription-plan-card h2 {
  margin-top: 0;
  color: #10243d;
  font-size: 1.18rem;
}

.legal-card p,
.legal-list,
.legal-contact-strip {
  color: #40546d;
  line-height: 1.62;
}

.legal-list {
  margin: 10px 0 0;
  padding-left: 20px;
}

.legal-list li + li {
  margin-top: 7px;
}

.legal-link-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.legal-contact-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(10, 78, 163, 0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.78);
  font-weight: 800;
}

.legal-contact-strip a {
  color: #0A4EA3;
  text-decoration: none;
}

@media (min-width: 720px) {
  .subscription-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .legal-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* YAAGI 10.3 - Plus feature markers */
.yaagi-plus-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.55em;
  height: 1.55em;
  margin-left: 0.45rem;
  padding: 0 0.38rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f3d46b, #c99b2e);
  color: #142033;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 12px rgba(154, 112, 24, 0.22);
  cursor: pointer;
  vertical-align: middle;
  text-decoration: none;
  user-select: none;
}

.yaagi-plus-badge:hover,
.yaagi-plus-badge:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(154, 112, 24, 0.30);
  outline: 2px solid rgba(201, 155, 46, 0.40);
  outline-offset: 2px;
}

.bottom-nav .yaagi-plus-badge {
  position: absolute;
  top: 0.18rem;
  right: 0.55rem;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.28rem;
  font-size: 0.62rem;
}

.bottom-nav a {
  position: relative;
}

.list-item .yaagi-plus-badge {
  flex: 0 0 auto;
}

/* YAAGI 10.3: clickable logo home link */
.ps-home-logo-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ps-home-logo-link:focus-visible {
  outline: 3px solid rgba(45, 127, 249, 0.45);
  outline-offset: 4px;
}


/* YAAGI 10.3 - clearer Plus pricing and upsell UI */
.yaagi-plus-badge {
  min-width: 3.1rem !important;
  height: 1.85rem !important;
  padding: 0 0.68rem !important;
  border: 2px solid rgba(78, 52, 10, 0.18) !important;
  background: linear-gradient(135deg, #fff0a6 0%, #f5c84f 50%, #b97812 100%) !important;
  color: #071529 !important;
  font-size: 0.82rem !important;
  font-weight: 950 !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
  box-shadow: 0 8px 18px rgba(133, 86, 12, 0.30), inset 0 1px 0 rgba(255,255,255,0.65) !important;
}
.bottom-nav .yaagi-plus-badge {
  top: -0.18rem !important;
  right: 0.15rem !important;
  min-width: 2.55rem !important;
  height: 1.25rem !important;
  padding: 0 0.38rem !important;
  font-size: 0.58rem !important;
}
.yaagi-plus-kicker,
.yaagi-plan-label {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(245, 200, 79, 0.22);
  color: #74520c;
  font-weight: 950;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.yaagi-pricing-hero .subscription-hero-grid {
  align-items: center;
}
.yaagi-pricing-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 16px 0 8px;
}
.yaagi-pricing-actions button {
  width: auto;
  min-width: 190px;
}
.yaagi-coffee-gif {
  width: min(190px, 42vw);
  border-radius: 26px;
  box-shadow: 0 18px 38px rgba(15, 35, 75, 0.14);
  background: #fffaf0;
  justify-self: end;
}
.yaagi-price-card {
  background: linear-gradient(135deg, #ffffff, #fff8e8);
}
.yaagi-price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.yaagi-price-grid article {
  padding: 16px;
  border: 1px solid rgba(217, 154, 0, 0.18);
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
}
.yaagi-price-grid article.is-highlight {
  border-color: rgba(10, 78, 163, 0.24);
  background: #f7fbff;
}
.yaagi-price-grid h2 {
  margin: 0 0 4px;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  letter-spacing: -0.05em;
}
.yaagi-plus-feature-list li::marker {
  content: "✦ ";
}
.yaagi-upsell-banner,
.yaagi-plus-page-banner,
.signup-plus-choice,
.settings-plus-upgrade-card {
  border: 1px solid rgba(217, 154, 0, 0.30);
  background: linear-gradient(135deg, #fffaf0, #ffffff);
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 35, 75, 0.08);
}
.yaagi-upsell-banner h3,
.yaagi-plus-page-banner h3,
.signup-plus-choice h3,
.settings-plus-upgrade-card h3 {
  margin: 0 0 6px;
  color: var(--text);
}
.yaagi-upsell-banner p,
.yaagi-plus-page-banner p,
.signup-plus-choice p,
.settings-plus-upgrade-card p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.55;
}
.yaagi-upsell-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.yaagi-upsell-actions button,
.yaagi-upsell-actions a {
  width: auto;
  min-width: 160px;
}
.signup-plus-choice {
  margin: 16px 0;
  outline: 3px solid rgba(245, 200, 79, 0.26);
}
.signup-plus-choice .yaagi-coffee-gif,
.settings-plus-upgrade-card .yaagi-coffee-gif {
  width: 92px;
  float: right;
  margin: 0 0 8px 12px;
  border-radius: 18px;
}
.settings-plus-upgrade-card {
  margin: 18px 0;
}
@media (min-width: 680px) {
  .yaagi-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .yaagi-coffee-gif {
    justify-self: start;
    width: 136px;
  }
  .yaagi-pricing-actions button,
  .yaagi-upsell-actions button,
  .yaagi-upsell-actions a {
    width: 100%;
  }
}


/* YAAGI 10.3 - realistic Plus coffee cup at Basis vs Plus section */
.yaagi-plus-comparison-card {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(circle at 82% 10%, rgba(245, 200, 79, 0.24), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #fffaf0 100%);
}
.yaagi-plus-comparison-layout {
  position: relative;
  display: grid;
  gap: 18px;
}
.yaagi-plus-comparison-copy {
  position: relative;
  z-index: 2;
}
.yaagi-coffee-value-line {
  margin: 10px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(217, 154, 0, 0.25);
  background: rgba(255, 255, 255, 0.78);
  color: #2b3444;
  font-weight: 850;
  line-height: 1.55;
  box-shadow: 0 8px 20px rgba(15, 35, 75, 0.06);
}
.yaagi-plus-coffee-stage {
  position: relative;
  z-index: 1;
  pointer-events: none;
  margin: -126px auto -20px;
  width: min(430px, 100%);
  min-height: 350px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.yaagi-plus-coffee-animated {
  display: block;
  width: min(430px, 100%);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 24px 26px rgba(15, 35, 75, 0.18));
}
.yaagi-pricing-hero .yaagi-coffee-gif {
  background: transparent;
  box-shadow: none;
  width: min(260px, 44vw);
  border-radius: 0;
}
@media (min-width: 720px) {
  .yaagi-plus-comparison-layout {
    grid-template-columns: minmax(0, 1fr) 260px;
    align-items: end;
  }
  .yaagi-plus-coffee-stage {
    margin: -210px -24px -36px -110px;
    width: 430px;
    min-height: 560px;
    align-self: stretch;
  }
  .subscription-page .app {
    max-width: 720px;
  }
}
@media (max-width: 560px) {
  .yaagi-plus-comparison-card {
    padding-bottom: 6px;
  }
  .yaagi-plus-coffee-stage {
    margin-top: -82px;
    width: 100%;
    min-height: 300px;
  }
  .yaagi-plus-coffee-animated {
    width: min(360px, 108%);
  }
}


/* Previous subscription coffee video upgrade */
.yaagi-pricing-hero .subscription-hero-grid{
  align-items:center;
}
.yaagi-coffee-video-shell{
  width:min(235px, 46vw);
  border-radius:26px;
  overflow:hidden;
  background:#ffffff;
  justify-self:end;
  box-shadow:0 18px 38px rgba(15, 35, 75, 0.14);
}
.yaagi-coffee-video{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  background:#ffffff;
}
@media (min-width: 860px){
  .subscription-hero-grid{
    grid-template-columns:minmax(0, 1.15fr) 250px;
    gap:18px;
  }
}


/* Previous subscription hero video polish */
.yaagi-pricing-hero .subscription-hero-grid{
  align-items: start !important;
}
.yaagi-coffee-video-shell{
  width: min(250px, 46vw) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  justify-self: end !important;
  align-self: start !important;
  box-shadow: 0 18px 38px rgba(15, 35, 75, 0.14) !important;
}
.yaagi-coffee-video{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  background: #ffffff !important;
  border-radius: 26px !important;
}
@media (min-width: 860px){
  .subscription-hero-grid{
    grid-template-columns: minmax(0, 1.15fr) 250px !important;
    gap: 18px !important;
    align-items: start !important;
  }
}


/* Previous subscription video rounding */
.yaagi-pricing-hero .subscription-hero-grid{
  align-items:center !important;
}
.yaagi-coffee-video-shell{
  width:min(240px, 46vw) !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  justify-self:end !important;
  box-shadow:0 18px 38px rgba(15,35,75,.14) !important;
}
.yaagi-coffee-video{
  width:100% !important;
  height:auto !important;
  display:block !important;
  object-fit:contain !important;
  background:#ffffff !important;
  border-radius:22px !important;
}
@media (min-width: 860px){
  .subscription-hero-grid{
    grid-template-columns:minmax(0,1.15fr) 250px !important;
    gap:18px !important;
  }
}


/* Previous subscription video verified rounded wrapper */
.yaagi-coffee-video-shell{
  width:300px !important;
  height:182px !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  box-shadow:0 12px 24px rgba(15,35,75,.08) !important;
  clip-path:inset(0 round 18px) !important;
}
.yaagi-coffee-video{
  width:300px !important;
  height:182px !important;
  display:block !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#ffffff !important;
}
@media (max-width:760px){
  .yaagi-coffee-video-shell,
  .yaagi-coffee-video{
    width:min(300px,84vw) !important;
    height:auto !important;
    min-height:182px !important;
  }
}


/* Previous subscription coffee video refined */
.yaagi-coffee-video-shell{
  width: 300px !important;
  height: 182px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 14px 28px rgba(15,35,75,.10) !important;
  clip-path: inset(0 round 24px) !important;
}
.yaagi-coffee-video{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: 58% 52% !important;
  border-radius: 24px !important;
  background: #ffffff !important;
}
@media (max-width:760px){
  .yaagi-coffee-video-shell{
    width:min(300px,84vw) !important;
    height:182px !important;
    border-radius:24px !important;
  }
  .yaagi-coffee-video{
    width:100% !important;
    height:100% !important;
    border-radius:24px !important;
  }
}


/* Previous subscription hero full-width title, centered video and bottom actions */
.yaagi-pricing-hero{
  display:block !important;
}
.yaagi-pricing-hero .pricing-hero-inner{
  min-height:520px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
}
.yaagi-pricing-hero .yaagi-plus-kicker{
  align-self:flex-start !important;
}
.yaagi-pricing-hero h2{
  width:100% !important;
  margin:0 0 16px !important;
  font-size:clamp(1.75rem, 5vw, 2.65rem) !important;
  line-height:1.08 !important;
  color:var(--text) !important;
}
.yaagi-pricing-hero .yaagi-coffee-video-shell{
  width:min(320px, 100%) !important;
  max-width:320px !important;
  height:auto !important;
  aspect-ratio:300 / 182 !important;
  margin:18px auto 20px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  box-shadow:0 16px 34px rgba(15,35,75,.12) !important;
  clip-path:inset(0 round 24px) !important;
}
.yaagi-pricing-hero .yaagi-coffee-video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:50% 50% !important;
  border-radius:24px !important;
  background:#ffffff !important;
}
.yaagi-pricing-hero .pricing-hero-intro{
  width:100% !important;
  margin:auto 0 14px !important;
  color:var(--muted) !important;
  line-height:1.55 !important;
  font-size:1rem !important;
}
.yaagi-pricing-hero .yaagi-pricing-actions{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px !important;
  margin:0 0 10px !important;
}
.yaagi-pricing-hero .yaagi-pricing-actions button{
  width:100% !important;
  min-width:0 !important;
  min-height:48px !important;
}
.yaagi-pricing-hero .yaagi-pricing-no-card{
  width:100% !important;
  margin:0 !important;
  text-align:center !important;
  line-height:1.35 !important;
}
@media (max-width:560px){
  .yaagi-pricing-hero .pricing-hero-inner{
    min-height:0 !important;
  }
  .yaagi-pricing-hero h2{
    font-size:clamp(1.55rem, 8vw, 2.05rem) !important;
  }
  .yaagi-pricing-hero .yaagi-coffee-video-shell{
    width:min(320px, 100%) !important;
    margin:16px auto 18px !important;
  }
  .yaagi-pricing-hero .pricing-hero-intro{
    margin:0 0 14px !important;
  }
  .yaagi-pricing-hero .yaagi-pricing-actions{
    grid-template-columns:1fr !important;
  }
}


/* Previous subscription hero contrast and video crop fix */
.yaagi-pricing-hero h2,
.yaagi-pricing-hero [data-i18n="pricing_app_title"]{
  color:#ffffff !important;
  opacity:1 !important;
}
.yaagi-pricing-hero p,
.yaagi-pricing-hero .small,
.yaagi-pricing-hero .pricing-hero-intro,
.yaagi-pricing-hero .yaagi-pricing-no-card{
  color:rgba(255,255,255,.88) !important;
}
.yaagi-pricing-hero .yaagi-coffee-video-shell,
.yaagi-coffee-video-shell{
  width:min(320px, 90%) !important;
  max-width:320px !important;
  aspect-ratio:16 / 9 !important;
  height:auto !important;
  margin:18px auto !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:transparent !important;
  box-shadow:0 18px 34px rgba(0,0,0,.20) !important;
  clip-path:inset(0 round 24px) !important;
}
.yaagi-pricing-hero .yaagi-coffee-video,
.yaagi-coffee-video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:inherit !important;
  background:transparent !important;
}





/* Previous emergency subscription hero visibility and video crop */
html body .yaagi-pricing-hero h2[data-i18n="pricing_app_title"]{
  color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
  -webkit-text-fill-color:#ffffff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.22) !important;
}
html body .yaagi-pricing-hero .pricing-hero-intro,
html body .yaagi-pricing-hero p[data-i18n="pricing_app_intro"],
html body .yaagi-pricing-hero .small,
html body .yaagi-pricing-hero .yaagi-pricing-no-card{
  color:rgba(255,255,255,.90) !important;
  opacity:1 !important;
  -webkit-text-fill-color:rgba(255,255,255,.90) !important;
}
html body .yaagi-pricing-hero .yaagi-coffee-video-shell{
  width:min(320px, 92%) !important;
  max-width:320px !important;
  aspect-ratio:16 / 9 !important;
  height:auto !important;
  margin:18px auto 20px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#d9d9d9 !important;
  box-shadow:0 18px 34px rgba(0,0,0,.22) !important;
  clip-path:inset(0 round 24px) !important;
}
html body .yaagi-pricing-hero .yaagi-coffee-video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:24px !important;
  background:#d9d9d9 !important;
}


/* Previous definitive subscription hero fix
   Fixes stale cache, title contrast, UTF-safe text rendering and stable video crop. */
html body.subscription-page .yaagi-pricing-hero{
  background:linear-gradient(135deg,#0b1c32 0%,#102c4f 100%) !important;
  color:#ffffff !important;
  overflow:hidden !important;
}
html body.subscription-page .yaagi-pricing-hero .pricing-hero-inner{
  width:100% !important;
  min-height:520px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:0 !important;
}
html body.subscription-page .yaagi-pricing-hero .yaagi-plus-kicker{
  align-self:flex-start !important;
  margin:0 0 12px !important;
}
html body.subscription-page .yaagi-pricing-hero h2,
html body.subscription-page .yaagi-pricing-hero h2.pricing-hero-title,
html body.subscription-page .yaagi-pricing-hero h2[data-i18n="pricing_app_title"]{
  width:100% !important;
  display:block !important;
  margin:0 0 18px !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
  font-size:clamp(2rem,5vw,3.25rem) !important;
  line-height:1.08 !important;
  letter-spacing:-0.035em !important;
  text-shadow:0 2px 16px rgba(0,0,0,.32) !important;
  mix-blend-mode:normal !important;
  filter:none !important;
}
html body.subscription-page .yaagi-pricing-hero .yaagi-coffee-video-shell{
  width:min(340px,92%) !important;
  max-width:340px !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  margin:18px auto 22px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  box-shadow:0 18px 34px rgba(0,0,0,.22) !important;
  clip-path:inset(0 round 24px) !important;
  flex:0 0 auto !important;
}
html body.subscription-page .yaagi-pricing-hero .yaagi-coffee-video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#ffffff !important;
}
html body.subscription-page .yaagi-pricing-hero .pricing-hero-intro,
html body.subscription-page .yaagi-pricing-hero p[data-i18n="pricing_app_intro"]{
  width:100% !important;
  margin:auto 0 18px !important;
  color:rgba(255,255,255,.92) !important;
  -webkit-text-fill-color:rgba(255,255,255,.92) !important;
  opacity:1 !important;
  font-size:1rem !important;
  line-height:1.55 !important;
}
html body.subscription-page .yaagi-pricing-hero .yaagi-pricing-actions{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  margin:0 0 12px !important;
  align-items:stretch !important;
}
html body.subscription-page .yaagi-pricing-hero .yaagi-pricing-actions button{
  width:100% !important;
  min-width:0 !important;
  min-height:54px !important;
  margin:0 !important;
}
html body.subscription-page .yaagi-pricing-hero .yaagi-pricing-no-card,
html body.subscription-page .yaagi-pricing-hero .small[data-i18n="pricing_no_card"]{
  margin:0 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  text-align:center !important;
  font-size:.95rem !important;
}
@media (max-width:620px){
  html body.subscription-page .yaagi-pricing-hero .pricing-hero-inner{
    min-height:0 !important;
  }
  html body.subscription-page .yaagi-pricing-hero h2,
  html body.subscription-page .yaagi-pricing-hero h2.pricing-hero-title,
  html body.subscription-page .yaagi-pricing-hero h2[data-i18n="pricing_app_title"]{
    font-size:clamp(1.65rem,8vw,2.2rem) !important;
  }
  html body.subscription-page .yaagi-pricing-hero .yaagi-pricing-actions{
    grid-template-columns:1fr !important;
  }
  html body.subscription-page .yaagi-pricing-hero .pricing-hero-intro,
  html body.subscription-page .yaagi-pricing-hero p[data-i18n="pricing_app_intro"]{
    margin:0 0 16px !important;
  }
}

/* YAAGI 10.3 - final app subscription title and video override */
html body .yaagi-pricing-hero h2,
html body .yaagi-pricing-hero h2[data-i18n="pricing_app_title"],
html body .yaagi-pricing-hero [data-i18n="pricing_app_title"]{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  text-shadow:none !important;
}
html body .yaagi-pricing-hero [data-i18n="pricing_app_intro"]{
  color:rgba(255,255,255,.86) !important;
  -webkit-text-fill-color:rgba(255,255,255,.86) !important;
  opacity:1 !important;
}
html body .yaagi-pricing-hero .small,
html body .yaagi-pricing-hero [data-i18n="pricing_no_card"]{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
html body .yaagi-pricing-hero .subscription-hero-grid,
html body .yaagi-pricing-hero .pricing-hero-inner{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:16px !important;
}
html body .yaagi-subscription-video-wrap,
html body .yaagi-coffee-video-shell{
  width:min(320px, 90%) !important;
  max-width:320px !important;
  aspect-ratio:16 / 9 !important;
  height:auto !important;
  margin:18px auto 22px auto !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#ffffff !important;
  box-shadow:0 18px 34px rgba(0,0,0,.20) !important;
  clip-path:inset(0 round 24px) !important;
}
html body .yaagi-subscription-coffee-video,
html body .yaagi-coffee-video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center center !important;
  border-radius:24px !important;
  background:#ffffff !important;
}
html body .yaagi-pricing-actions{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px !important;
  width:100% !important;
  margin-top:8px !important;
}
html body .yaagi-pricing-actions button{
  width:100% !important;
  min-height:50px !important;
}
@media (max-width:680px){
  html body .yaagi-pricing-actions{
    grid-template-columns:1fr !important;
  }
}




/* YAAGI 10.3 - subscription lower comparison cleanup only */
.yaagi-plus-comparison-card {
  overflow: hidden !important;
}
.yaagi-plus-comparison-card .yaagi-plus-comparison-layout {
  display: block !important;
}
.yaagi-plus-comparison-card .yaagi-plus-comparison-copy {
  width: 100% !important;
  max-width: 100% !important;
}
.yaagi-plus-comparison-card .yaagi-plus-coffee-stage,
.yaagi-plus-comparison-card .yaagi-plus-coffee-animated {
  display: none !important;
}
.yaagi-plus-comparison-card .subscription-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  width: 100% !important;
  margin-top: 16px !important;
}
.yaagi-plus-comparison-card .subscription-plan-card {
  height: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 16px !important;
  border-radius: 18px !important;
}
.yaagi-plus-comparison-card .subscription-plan-card h2 {
  margin: 0 0 10px !important;
}
.yaagi-plus-comparison-card .subscription-plan-card p {
  margin: 0 0 10px !important;
}
.yaagi-plus-comparison-card .subscription-feature-list {
  display: grid !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
  padding-left: 20px !important;
  line-height: 1.42 !important;
}
.yaagi-plus-comparison-card .yaagi-plus-feature-list {
  gap: 7px !important;
}
@media (max-width: 680px) {
  .yaagi-plus-comparison-card .subscription-plan-grid {
    grid-template-columns: 1fr !important;
  }
}


/* YAAGI 10.3 - subscription comparison clarity */
.subscription-page .yaagi-plus-comparison-card {
  overflow: visible !important;
}
.subscription-page .yaagi-plus-comparison-layout {
  display: block !important;
  grid-template-columns: 1fr !important;
}
.subscription-page .yaagi-plus-comparison-copy {
  width: 100% !important;
}
.subscription-page .yaagi-plus-comparison-card .subscription-plan-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: 14px !important;
  align-items: stretch !important;
}
.subscription-page .yaagi-plus-comparison-card .subscription-plan-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 20px !important;
  padding: 18px !important;
}
.subscription-page .subscription-plan-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.subscription-page .subscription-plan-card-head h2 {
  margin: 0 !important;
  font-size: 1.18rem !important;
  line-height: 1.1 !important;
}
.subscription-page .subscription-plan-price-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 30px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.subscription-page .subscription-plan-price-badge.is-free {
  color: #143a68 !important;
  background: #edf6ff !important;
  border: 1px solid #cfe0f4 !important;
}
.subscription-page .subscription-plan-price-badge.is-plus-price {
  color: #382708 !important;
  border: 1px solid rgba(174,133,52,.45) !important;
  background: linear-gradient(180deg,#fffbe5 0%,#f8df99 22%,#dfb452 53%,#bb8a21 86%,#ffedbb 100%) !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.82), inset 0 -2px 2px rgba(116,79,15,.18), 0 8px 14px rgba(192,149,56,.16) !important;
}
.subscription-page .yaagi-plus-comparison-card .subscription-feature-list {
  margin: 12px 0 0 !important;
  padding-left: 18px !important;
  color: #344862 !important;
  line-height: 1.42 !important;
  font-size: .96rem !important;
}
.subscription-page .yaagi-plus-comparison-card .subscription-feature-list li {
  margin: 0 0 7px !important;
  overflow-wrap: anywhere !important;
}
.subscription-page .yaagi-plus-comparison-card .yaagi-plus-feature-list li::marker {
  content: "• " !important;
}
.subscription-page .yaagi-plus-comparison-card .yaagi-coffee-value-line {
  max-width: none !important;
  margin: 14px 0 14px !important;
}
.subscription-page .yaagi-plus-comparison-card .yaagi-pricing-actions {
  max-width: 320px !important;
  margin: 14px 0 0 !important;
}
@media (max-width: 680px) {
  .subscription-page .yaagi-plus-comparison-card .subscription-plan-grid {
    grid-template-columns: 1fr !important;
  }
}


/* YAAGI 10.3 - clear subscription actions */
.subscription-page .yaagi-pricing-actions a.secondary,
.subscription-page .yaagi-pricing-actions .subscription-basic-link {
  min-height: 50px !important;
  width: 100% !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(207,216,228,.95) !important;
  background: #ffffff !important;
  color: #11243a !important;
}


/* YAAGI 10.3 - clearer annual subscription choice and CTA visibility */
.subscription-page [data-yaagi-basis-visibility][hidden] {
  display: none !important;
}
.subscription-page .yaagi-price-card .yaagi-price-grid article {
  display: flex !important;
  flex-direction: column !important;
}
.subscription-page .yaagi-price-card .yaagi-yearly-plan-button {
  margin-top: auto !important;
  min-height: 48px !important;
  width: 100% !important;
  border-radius: 14px !important;
  font-size: .94rem !important;
  line-height: 1.15 !important;
}
.subscription-page .yaagi-price-card .is-highlight {
  border-color: rgba(217,154,0,.38) !important;
  background: linear-gradient(180deg, #fffdf5 0%, #ffffff 58%) !important;
}
.subscription-page .subscription-basic-link {
  font-size: .96rem !important;
}
.subscription-page .yaagi-plus-comparison-card .yaagi-pricing-actions[data-yaagi-basis-visibility] {
  max-width: 320px !important;
}


/* YAAGI 10.3 - focused Plus CTA flow */
.subscription-page [data-yaagi-subscription-cta][hidden],
.subscription-page [data-yaagi-basis-visibility][hidden],
.subscription-page [data-yaagi-plus-visibility][hidden] {
  display: none !important;
}
.subscription-page .yaagi-pricing-actions-main {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
}
.subscription-page .yaagi-pricing-actions-main .yaagi-basic-text-link {
  grid-column: 1 / -1 !important;
  min-height: 0 !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  box-shadow: none !important;
}
.subscription-page .yaagi-pricing-actions-main .yaagi-yearly-plan-button,
.subscription-page .yaagi-plan-cta .yaagi-yearly-plan-button {
  min-height: 50px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(207,216,228,.95) !important;
  background: #ffffff !important;
  color: #11243a !important;
  font-weight: 900 !important;
}
.subscription-page .yaagi-plan-cta {
  display: grid !important;
  gap: 10px !important;
  margin-top: auto !important;
  padding-top: 14px !important;
}
.subscription-page .yaagi-plan-cta-title {
  margin: 0 !important;
  font-weight: 900 !important;
  color: #10233a !important;
}
.subscription-page .yaagi-plan-cta-text {
  margin: 0 0 4px !important;
  color: #425875 !important;
  font-size: .94rem !important;
  line-height: 1.35 !important;
}
.subscription-page .yaagi-plan-cta button {
  width: 100% !important;
}
.subscription-page .yaagi-pricing-active-note {
  color: #ffffff !important;
  font-weight: 900 !important;
  margin-top: 10px !important;
}
@media (max-width: 680px) {
  .subscription-page .yaagi-pricing-actions-main {
    grid-template-columns: 1fr !important;
  }
}


/* YAAGI 10.3 - subscription pricing UX cleanup */
.yaagi-internal-only[hidden] {
  display: none !important;
}
.subscription-page .yaagi-price-grid article.yaagi-clickable-plan {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.subscription-page .yaagi-price-grid article.yaagi-clickable-plan:hover,
.subscription-page .yaagi-price-grid article.yaagi-clickable-plan:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(15, 35, 75, .10);
  border-color: rgba(217, 154, 0, .42);
}
.subscription-page .yaagi-price-grid article.yaagi-clickable-plan.is-highlight {
  border-color: rgba(217, 154, 0, .54);
  background: linear-gradient(135deg, #ffffff, #fff8e6);
}
.subscription-page .yaagi-price-grid .yaagi-plan-button,
.subscription-page .yaagi-price-grid .yaagi-yearly-plan-button {
  margin-top: auto;
  width: 100%;
}
.subscription-page .yaagi-price-grid p {
  line-height: 1.45;
}
.subscription-page .yaagi-pricing-actions-main {
  justify-content: center;
}
.subscription-page .yaagi-pricing-actions-main .launch-primary-action {
  min-width: min(100%, 290px);
}
@media (min-width: 720px) {
  .subscription-page .yaagi-price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* YAAGI 10.3 - floating app bottom navigation and lightweight themes */
.bottom-nav {
  left: 50% !important;
  right: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  width: min(620px, calc(100% - 24px)) !important;
  max-width: min(620px, calc(100% - 24px)) !important;
  height: 68px !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18) !important;
  overflow: hidden !important;
}

body {
  padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px));
}

.bottom-nav a {
  min-width: 0;
}

.bottom-nav .active {
  background: rgba(10, 78, 163, 0.08);
  color: var(--blue);
}

html[data-yaagi-theme="playful"] {
  --blue: #0B5CAD;
  --blue-dark: #07396C;
  --blue-soft: #F0F7FF;
  --orange: #E0A11A;
  --bg: #F7FBFF;
  --card: #FFFFFF;
  --border: #DCE9F7;
  --shadow: 0 16px 38px rgba(10, 78, 163, 0.12);
  --radius: 22px;
}

html[data-yaagi-theme="playful"] .card,
html[data-yaagi-theme="playful"] .calendar-card,
html[data-yaagi-theme="playful"] .yaagi-pricing-card {
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(10, 78, 163, 0.10);
}

html[data-yaagi-theme="playful"] .bottom-nav {
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,251,255,0.96)) !important;
}

html[data-yaagi-theme="playful"] button,
html[data-yaagi-theme="playful"] .button,
html[data-yaagi-theme="playful"] .btn {
  border-radius: 999px;
}

@supports not (bottom: env(safe-area-inset-bottom)) {
  .bottom-nav { bottom: 12px !important; }
  body { padding-bottom: 98px; }
}

@media (max-width: 380px) {
  .bottom-nav {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
    height: 64px !important;
    border-radius: 20px !important;
  }
  .bottom-nav span { font-size: 10px; }
  .bottom-nav .ps-nav-icon { font-size: 18px; }
}

/* YAAGI 10.3 i18n and file-picker polish */
.yaagi-hidden-micro-label {
  display: none !important;
}
.yaagi-native-file-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.yaagi-file-picker-i18n {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.yaagi-file-picker-button {
  width: auto !important;
  min-width: 150px;
  margin: 0 !important;
}
.yaagi-file-picker-label {
  color: var(--muted);
  font-weight: 700;
}
.settings-plus-upgrade-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
  gap: 18px;
  align-items: center;
}
.settings-plus-upgrade-card .yaagi-coffee-gif,
.settings-plus-upgrade-card .yaagi-coffee-video {
  grid-column: 2;
  grid-row: 1 / span 4;
  width: min(220px, 38vw);
  border-radius: 24px;
  box-shadow: 0 18px 40px rgba(15, 35, 75, 0.16);
  background: #fffaf0;
  justify-self: end;
}
@media (max-width: 620px) {
  .settings-plus-upgrade-card {
    grid-template-columns: 1fr;
  }
  .settings-plus-upgrade-card .yaagi-coffee-gif,
  .settings-plus-upgrade-card .yaagi-coffee-video {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    width: min(240px, 74vw);
    order: -1;
  }
}

/* YAAGI 10.3 - desktop layout alignment with WordPress landing */
@media (min-width: 900px) {
  :root {
    --ps-app-max-width: 1040px;
  }

  html,
  body {
    background:
      radial-gradient(circle at top left, rgba(10, 78, 163, 0.10), transparent 34%),
      radial-gradient(circle at top right, rgba(217, 154, 0, 0.08), transparent 26%),
      linear-gradient(180deg, #eef6ff 0%, #f6f8fb 44%, #ffffff 100%) !important;
  }

  body {
    padding-top: 92px !important;
    padding-bottom: 44px !important;
  }

  .app {
    width: min(100%, var(--ps-app-max-width)) !important;
    max-width: var(--ps-app-max-width) !important;
    padding: 30px 32px 64px !important;
  }

  .bottom-nav {
    top: 16px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    width: min(920px, calc(100% - 48px)) !important;
    max-width: min(920px, calc(100% - 48px)) !important;
    height: 62px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(203, 213, 225, 0.92) !important;
    box-shadow: 0 18px 48px rgba(15, 35, 75, 0.16) !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .bottom-nav a {
    flex-direction: row !important;
    gap: 8px !important;
    font-size: 19px !important;
    min-width: 0;
  }

  .bottom-nav span {
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 1.1;
  }

  .bottom-nav .active {
    margin: 6px !important;
    border-radius: 999px !important;
  }

  .topbar {
    margin-top: 0;
  }
}

@media (min-width: 1180px) {
  :root {
    --ps-app-max-width: 1120px;
  }

  .app {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }
}



/* YAAGI 10.3 - visible desktop shell and WordPress/app alignment
   Purpose: make the app visibly wider on laptop/desktop, move the app nav to the top on desktop,
   and keep the existing bottom navigation on mobile. */
@media (min-width: 900px) {
  html body {
    background:
      radial-gradient(circle at 12% 8%, rgba(10, 78, 163, 0.12), transparent 30%),
      radial-gradient(circle at 88% 12%, rgba(210, 153, 34, 0.10), transparent 26%),
      linear-gradient(180deg, #eef6ff 0%, #f7fbff 42%, #ffffff 100%) !important;
    padding-top: 96px !important;
    padding-bottom: 44px !important;
  }

  html body > .app,
  html body .app {
    width: min(1120px, calc(100vw - 96px)) !important;
    max-width: min(1120px, calc(100vw - 96px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 32px 34px 68px !important;
  }

  html body .bottom-nav {
    position: fixed !important;
    top: 18px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    z-index: 9999 !important;
    width: min(940px, calc(100vw - 56px)) !important;
    max-width: min(940px, calc(100vw - 56px)) !important;
    height: 64px !important;
    transform: translateX(-50%) !important;
    border-radius: 999px !important;
    border: 1px solid rgba(203, 213, 225, 0.95) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 20px 55px rgba(15, 35, 75, 0.18) !important;
    backdrop-filter: blur(18px);
  }

  html body .bottom-nav a {
    flex-direction: row !important;
    justify-content: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    font-size: 18px !important;
  }

  html body .bottom-nav span {
    margin-top: 0 !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
  }

  html body .bottom-nav .active {
    margin: 6px !important;
    border-radius: 999px !important;
  }

  html body .card,
  html body .hero-card,
  html body .launch-flow,
  html body .launch-welcome,
  html body .launch-premium-card,
  html body .launch-holiday-banner {
    border-radius: 20px !important;
  }
}

@media (min-width: 980px) {
  body.yaagi-dashboard-page .app {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 18px !important;
    align-items: start !important;
  }

  body.yaagi-dashboard-page .topbar,
  body.yaagi-dashboard-page .launch-holiday-banner,
  body.yaagi-dashboard-page .launch-welcome,
  body.yaagi-dashboard-page .dashboard-today-card {
    grid-column: 1 / -1 !important;
  }

  body.yaagi-dashboard-page .launch-flow {
    grid-column: 1 / span 7 !important;
    height: 100% !important;
  }

  body.yaagi-dashboard-page .launch-premium-card {
    grid-column: 8 / -1 !important;
    height: 100% !important;
  }

  body.yaagi-dashboard-page .app > .grid {
    grid-column: 1 / span 5 !important;
    margin-bottom: 0 !important;
  }

  body.yaagi-dashboard-page .dashboard-overview-card {
    grid-column: 6 / -1 !important;
    margin-bottom: 0 !important;
  }

  body.yaagi-dashboard-page .dashboard-coming-card,
  body.yaagi-dashboard-page .dashboard-latest-costs-card {
    grid-column: 1 / span 7 !important;
    margin-bottom: 0 !important;
  }

  body.yaagi-dashboard-page .dashboard-quick-card {
    grid-column: 8 / -1 !important;
    margin-bottom: 0 !important;
  }

  body.yaagi-dashboard-page .mini-calendar {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1220px) {
  html body > .app,
  html body .app {
    width: min(1180px, calc(100vw - 112px)) !important;
    max-width: min(1180px, calc(100vw - 112px)) !important;
  }
}

@media (max-width: 899px) {
  body.yaagi-dashboard-page .app {
    display: block !important;
  }

  html body .bottom-nav {
    top: auto !important;
  }
}


/* YAAGI 10.3 - Gold naming, clearer trial badges and direct-trial CTA buttons */
.launch-primary-action,
a.launch-primary-action,
.yaagi-direct-trial-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 0 18px !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  line-height: 1.15 !important;
}

.settings-plus-upgrade-card .yaagi-direct-trial-button {
  width: fit-content !important;
  max-width: 100%;
  border: 1px solid rgba(120, 75, 6, 0.25) !important;
}

.yaagi-subscription-mini-status,
.subscription-status-badge {
  min-width: 168px;
  padding: 9px 16px !important;
  white-space: nowrap !important;
  text-align: center;
}

.bottom-nav .yaagi-nav-gold-status {
  position: absolute !important;
  right: 10px !important;
  top: -44px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 112px !important;
  max-width: calc(100vw - 24px) !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(120, 75, 6, 0.22) !important;
  background: linear-gradient(135deg, #fff8df 0%, #f6d36b 52%, #d99a00 100%) !important;
  color: #102033 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(132, 86, 10, 0.22), inset 0 1px 0 rgba(255,255,255,.62) !important;
}

.bottom-nav .yaagi-nav-gold-status img {
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}

.bottom-nav .yaagi-nav-gold-status span {
  margin-top: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  white-space: nowrap !important;
}

@media (min-width: 900px) {
  html body .bottom-nav .yaagi-nav-gold-status {
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    min-width: 118px !important;
    height: 38px !important;
  }
}

@media (max-width: 560px) {
  .settings-plus-upgrade-card .yaagi-direct-trial-button,
  .settings-plus-upgrade-card .yaagi-upsell-actions a {
    width: 100% !important;
  }

  .yaagi-subscription-mini-status,
  .subscription-status-badge {
    min-width: 156px;
    max-width: calc(100vw - 48px);
  }
}

/* YAAGI 10.3 - stable Gold menu status */
.bottom-nav .yaagi-plus-badge {
  display: none !important;
}

.bottom-nav .yaagi-nav-gold-status {
  cursor: default !important;
  pointer-events: none !important;
}

.settings-plus-upgrade-card .yaagi-direct-trial-button {
  border: 0 !important;
  cursor: pointer;
}

/* YAAGI 10.3 - Gold status is a real nav sibling, not an overlay */
.bottom-nav.has-yaagi-gold-status {
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(132px, auto) !important;
}

.bottom-nav .yaagi-nav-gold-status {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  align-self: center !important;
  justify-self: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: calc(100% - 8px) !important;
  cursor: default !important;
  pointer-events: none !important;
  user-select: none !important;
}

.bottom-nav .yaagi-nav-gold-status span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 899px) {
  .bottom-nav.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 56px 34px !important;
    height: 98px !important;
    padding: 3px 6px 7px !important;
  }

  .bottom-nav.has-yaagi-gold-status a {
    min-height: 54px !important;
  }

  .bottom-nav.has-yaagi-gold-status .yaagi-nav-gold-status {
    grid-column: 1 / -1 !important;
    min-width: min(190px, calc(100% - 18px)) !important;
    max-width: calc(100% - 18px) !important;
    height: 30px !important;
    margin: 0 auto !important;
    padding: 0 11px !important;
    font-size: 11px !important;
  }

  .bottom-nav.has-yaagi-gold-status .yaagi-nav-gold-status img {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (min-width: 900px) {
  html body .bottom-nav.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(142px, auto) !important;
  }

  html body .bottom-nav.has-yaagi-gold-status .yaagi-nav-gold-status {
    top: auto !important;
    right: auto !important;
    transform: none !important;
    min-width: 132px !important;
    height: 38px !important;
  }
}

@media (max-width: 380px) {
  .bottom-nav.has-yaagi-gold-status {
    height: 96px !important;
    grid-template-rows: 54px 32px !important;
  }

.bottom-nav.has-yaagi-gold-status .yaagi-nav-gold-status {
    height: 28px !important;
    font-size: 10px !important;
  }
}


/* YAAGI 10.17 - prevent the legacy pricing hero from flashing before checkout intent JS initializes. */
html.yaagi-precheckout-mode body.subscription-page .yaagi-pricing-hero,
html.yaagi-precheckout-mode body.subscription-page .yaagi-pricing-options-card,
html.yaagi-precheckout-mode body.subscription-page .subscription-status-card,
html.yaagi-precheckout-mode body.subscription-page .yaagi-plus-comparison-card,
html.yaagi-precheckout-mode body.subscription-page .subscription-setup-card,
html.yaagi-precheckout-mode body.subscription-page .subscription-portal-card,
html.yaagi-precheckout-mode body.subscription-page .subscription-test-card {
  display: none !important;
}

/* YAAGI 10.17 - clean monthly/yearly checkout completion flow */
.subscription-page.yaagi-checkout-mode .yaagi-pricing-hero,
.subscription-page.yaagi-checkout-mode .yaagi-pricing-options-card,
.subscription-page.yaagi-checkout-mode .subscription-status-card,
.subscription-page.yaagi-checkout-mode .yaagi-plus-comparison-card,
.subscription-page.yaagi-checkout-mode .subscription-setup-card,
.subscription-page.yaagi-checkout-mode .subscription-portal-card,
.subscription-page.yaagi-checkout-mode .subscription-test-card {
  display: none !important;
}

.subscription-page.yaagi-checkout-mode .app {
  max-width: 980px;
}

.yaagi-checkout-intent-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 22px;
  border: 1px solid rgba(207, 164, 71, .38);
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 225, 144, .34), transparent 34%),
    linear-gradient(145deg, #ffffff 0%, #fffaf0 42%, #f7fbff 100%);
  box-shadow: 0 24px 64px rgba(16, 42, 84, .16);
}

.yaagi-checkout-intent-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #9f6b16, #f6d47c, #b78124);
}

.yaagi-checkout-intent-head {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.yaagi-checkout-intent-head h2 {
  margin: 0;
  color: #071d49;
  font-size: clamp(1.85rem, 4vw, 3rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.yaagi-checkout-intent-head p {
  margin: 0;
  color: #34425f;
  font-size: 1.02rem;
  line-height: 1.55;
}

.yaagi-checkout-plan-pill {
  width: fit-content;
  padding: 8px 13px;
  border-radius: 999px;
  color: #071d49;
  font-weight: 800;
  background: linear-gradient(135deg, #fff4c7, #d8a93d 58%, #9f6b16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 10px 22px rgba(137, 93, 21, .22);
}

.yaagi-checkout-price-panel {
  display: grid;
  gap: 6px;
  width: min(100%, 420px);
  padding: 20px 22px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 38, 75, .10);
  box-shadow: 0 16px 36px rgba(16, 42, 84, .10);
}

.yaagi-checkout-price-panel span {
  color: #65718a;
  font-weight: 700;
  font-size: .86rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.yaagi-checkout-price-panel strong {
  color: #071d49;
  font-size: clamp(1.8rem, 4vw, 2.55rem);
  line-height: 1;
}

.yaagi-checkout-benefits {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yaagi-checkout-benefits li {
  position: relative;
  padding-left: 30px;
  color: #20304f;
  line-height: 1.45;
}

.yaagi-checkout-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .25em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d72d2, #54bd35);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.65);
}

.yaagi-checkout-primary-button {
  width: min(100%, 420px);
  justify-content: center;
}

.yaagi-checkout-message:empty {
  display: none;
}

@media (max-width: 720px) {
  .yaagi-checkout-intent-card {
    gap: 18px;
    padding: 24px 20px;
  }

  .yaagi-checkout-primary-button,
  .yaagi-checkout-price-panel {
    width: 100%;
  }
}


/* YAAGI 10.3 - subscription hero restoration: video, handwritten coffee line and visible yearly plan */
.subscription-page .yaagi-pricing-hero .pricing-hero-inner {
  position: relative !important;
}
.subscription-page .yaagi-coffee-handwritten {
  display: inline-flex !important;
  align-self: center !important;
  margin: 2px auto -8px auto !important;
  padding: 6px 18px !important;
  border-radius: 999px !important;
  background: rgba(255, 247, 221, .96) !important;
  color: #6f4a00 !important;
  -webkit-text-fill-color: #6f4a00 !important;
  border: 1px solid rgba(230, 181, 58, .55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive !important;
  font-weight: 800 !important;
  font-size: clamp(1rem, 2.6vw, 1.3rem) !important;
  line-height: 1.15 !important;
  transform: rotate(-2deg) !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  z-index: 2 !important;
}
.subscription-page .yaagi-coffee-video-shell,
.subscription-page .yaagi-pricing-hero .yaagi-coffee-video-shell {
  display: block !important;
  visibility: visible !important;
}
.subscription-page .yaagi-pricing-options-card,
.subscription-page .yaagi-pricing-options-card[hidden] {
  display: block !important;
}
.subscription-page .yaagi-price-card-heading {
  max-width: 780px !important;
  margin: 0 auto 18px !important;
  text-align: center !important;
}
.subscription-page .yaagi-price-card-heading h2 {
  margin: 6px 0 8px !important;
  color: #071f46 !important;
}
.subscription-page .yaagi-price-card-heading p {
  margin: 0 auto !important;
}
.subscription-page .yaagi-yearly-saving-note {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff6c9 0%, #e6b437 100%) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  border: 1px solid rgba(177,124,0,.32) !important;
  box-shadow: 0 10px 22px rgba(192,132,0,.18) !important;
  font-weight: 900 !important;
  font-size: .92rem !important;
}
.subscription-page .yaagi-price-card .yaagi-price-grid article {
  cursor: default !important;
}
.subscription-page .yaagi-price-card .yaagi-price-grid article[hidden] {
  display: flex !important;
}
@media (max-width: 620px) {
  .subscription-page .yaagi-coffee-handwritten {
    font-size: 1rem !important;
    margin-bottom: -4px !important;
    padding: 6px 14px !important;
  }
  .subscription-page .yaagi-price-card-heading {
    text-align: left !important;
  }
}



/* YAAGI 10.3 - subscription checkout intent and trial expiry notice */
.yaagi-checkout-intent-card{
  border:1px solid rgba(191,142,33,.38);
  background:linear-gradient(135deg,#fffaf0 0%,#ffffff 58%,#eef6ff 100%);
  box-shadow:0 22px 55px rgba(15,46,87,.10);
}
.yaagi-checkout-intent-head h2{margin:6px 0 8px;color:#0b1f3f;}
.yaagi-checkout-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0;}
.yaagi-checkout-summary-box{border:1px solid #d8e3ef;background:rgba(255,255,255,.82);border-radius:16px;padding:14px;}
.yaagi-checkout-summary-box span{display:block;color:#64748b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:6px;}
.yaagi-checkout-summary-box strong{display:block;color:#0b1f3f;font-size:18px;}
.yaagi-checkout-action-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px;}
.yaagi-checkout-action-row button{min-width:210px;}
.yaagi-checkout-backend-note{margin-top:12px;color:#7c5a09;font-weight:700;}
.yaagi-trial-expiry-notice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(191,142,33,.35);
  background:linear-gradient(135deg,#fff7db 0%,#fffef9 68%);
  color:#0b1f3f;
  border-radius:20px;
  padding:14px 16px;
  margin:14px 0 0;
  box-shadow:0 14px 35px rgba(191,142,33,.12);
}
.yaagi-trial-expiry-notice strong{display:block;font-size:16px;margin-bottom:4px;}
.yaagi-trial-expiry-notice p{margin:0;color:#52627a;}
.yaagi-trial-expiry-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.yaagi-trial-expiry-notice a{
  text-decoration:none;
  white-space:nowrap;
  border-radius:999px;
  padding:11px 16px;
  font-weight:900;
  color:#111827;
  background:linear-gradient(180deg,#ffe994,#c58a12);
  border:1px solid #b9820f;
  box-shadow:0 8px 18px rgba(148,94,10,.18);
}
@media (max-width: 720px){
  .yaagi-checkout-summary-grid{grid-template-columns:1fr;}
  .yaagi-checkout-action-row button{width:100%;min-width:0;}
  .yaagi-trial-expiry-notice{display:block;}
  .yaagi-trial-expiry-actions{justify-content:flex-start;margin-top:12px;}
  .yaagi-trial-expiry-notice a{display:inline-flex;}
}

.yaagi-clickable-plan.is-selected-from-link{
  outline:3px solid rgba(191,142,33,.35);
  box-shadow:0 18px 44px rgba(191,142,33,.18);
}


/* YAAGI 10.3 - yearly conversion focus */
.subscription-page .yaagi-checkout-reassurance,
.subscription-page .yaagi-yearly-autorenew-note {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 246, 218, .82);
  border: 1px solid rgba(213, 160, 42, .28);
  color: #5f4314;
  font-weight: 650;
}

.subscription-page.yaagi-yearly-plan-intent .yaagi-price-grid {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.subscription-page.yaagi-yearly-plan-intent .yaagi-clickable-plan[data-plan="yearly"] {
  box-shadow: 0 24px 48px rgba(132, 86, 10, .18);
}

.subscription-page.yaagi-yearly-plan-intent .yaagi-checkout-action-row {
  justify-content: flex-start;
}

.subscription-page.yaagi-yearly-plan-intent #checkoutMonthlyPlanButton,
.subscription-page.yaagi-yearly-plan-intent #checkoutTrialPlanButton,
.subscription-page.yaagi-yearly-plan-intent .yaagi-clickable-plan[data-plan="monthly"] {
  display: none !important;
}

/* YAAGI 10.3 - focused yearly checkout fix */
.subscription-page.yaagi-yearly-plan-intent [data-plan="monthly"],
.subscription-page.yaagi-yearly-plan-intent #monthlyPlanButton,
.subscription-page.yaagi-yearly-plan-intent #checkoutMonthlyPlanButton,
.subscription-page.yaagi-yearly-plan-intent .subscription-basic-link {
  display: none !important;
}
.subscription-page.yaagi-yearly-plan-intent #checkoutYearlyPlanButton {
  display: inline-flex !important;
}
.subscription-page.yaagi-existing-trial-intent .yaagi-price-card-heading [data-i18n="pricing_yearly_saving_badge"]::after {
  content: " · proefperiode blijft behouden";
}


/* YAAGI 10.3 - app language selector lives inside the floating navigation */
.bottom-nav.has-yaagi-language-switcher {
  max-width: 780px !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(96px, auto) !important;
}

.bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(96px, auto) minmax(142px, auto) !important;
}

.bottom-nav .ps-nav-language-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  justify-self: center !important;
  width: auto !important;
  min-width: 94px !important;
  max-width: 118px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(15,35,75,.12) !important;
  box-shadow: 0 8px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72) !important;
}

.bottom-nav .ps-nav-language-switcher .ps-global-language-icon {
  display: none !important;
}

.bottom-nav .ps-nav-language-switcher select {
  width: 82px !important;
  min-width: 82px !important;
  max-width: 82px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 4px 18px 4px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

@media (min-width: 900px) {
  html body .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    max-width: 820px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(98px, auto) minmax(142px, auto) !important;
  }

  html body .bottom-nav.has-yaagi-language-switcher .yaagi-nav-gold-status {
    min-width: 132px !important;
  }
}

@media (max-width: 899px) {
  .bottom-nav.has-yaagi-language-switcher {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: 56px 34px !important;
    height: 102px !important;
    padding: 3px 6px 7px !important;
  }

  .bottom-nav.has-yaagi-language-switcher .ps-nav-language-switcher {
    grid-column: 1 / 3 !important;
    grid-row: 2 !important;
    height: 30px !important;
    min-height: 30px !important;
    min-width: min(130px, calc(100vw - 24px)) !important;
  }

  .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status .yaagi-nav-gold-status {
    grid-column: 3 / -1 !important;
    grid-row: 2 !important;
    min-width: min(180px, calc(100vw - 24px)) !important;
  }

  .bottom-nav.has-yaagi-language-switcher:not(.has-yaagi-gold-status) .ps-nav-language-switcher {
    grid-column: 1 / -1 !important;
    margin: 0 auto !important;
  }
}

/* YAAGI 10.3 - checkout CTA must remain visible even during an active trial */
.subscription-page.yaagi-checkout-mode #checkoutPrimaryPlanButton {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* YAAGI 10.3 - final checkout visual, wider app nav, no duplicate header language */
body .topbar .ps-global-language-switcher {
  display: none !important;
}

@media (min-width: 900px) {
  html body .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    width: min(1040px, calc(100vw - 48px)) !important;
    max-width: min(1040px, calc(100vw - 48px)) !important;
    grid-template-columns: repeat(5, minmax(92px, 1fr)) minmax(118px, auto) minmax(162px, auto) !important;
    padding: 0 12px !important;
  }

  html body .bottom-nav.has-yaagi-language-switcher .ps-nav-language-switcher {
    min-width: 118px !important;
    max-width: 132px !important;
  }

  html body .bottom-nav.has-yaagi-language-switcher .ps-nav-language-switcher select {
    width: 104px !important;
    max-width: 104px !important;
  }

  html body .bottom-nav.has-yaagi-language-switcher .yaagi-nav-gold-status {
    min-width: 158px !important;
    max-width: 168px !important;
  }
}

.subscription-page.yaagi-checkout-mode .app {
  width: min(1180px, calc(100vw - 96px)) !important;
  max-width: min(1180px, calc(100vw - 96px)) !important;
}

.yaagi-checkout-intent-card {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  align-items: center;
  min-height: 560px;
}

.yaagi-checkout-copy {
  display: grid;
  gap: 22px;
  min-width: 0;
}

.yaagi-checkout-visual {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 16px;
  min-width: 0;
}

.yaagi-checkout-phone-preview {
  display: block;
  width: min(250px, 100%);
  height: auto;
  object-fit: contain;
  filter: none !important;
  box-shadow: none !important;
}

.yaagi-checkout-visual-note {
  width: min(310px, 100%);
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(15,35,75,.10);
  color: #34425f;
  text-align: center;
}

.yaagi-checkout-visual-note strong {
  display: block;
  margin-bottom: 5px;
  color: #071d49;
  font-size: 1rem;
}

.yaagi-checkout-visual-note span {
  display: block;
  line-height: 1.4;
  font-size: .92rem;
}

@media (max-width: 820px) {
  .subscription-page.yaagi-checkout-mode .app {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: min(100%, calc(100vw - 28px)) !important;
  }

  .yaagi-checkout-intent-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .yaagi-checkout-visual {
    order: -1;
  }

  .yaagi-checkout-phone-preview {
    width: min(210px, 72vw);
  }
}

/* YAAGI 10.3 - costs summary is readable on mobile and uses distinct cards */
.summary-grid div:nth-child(1) {
  background: linear-gradient(135deg, rgba(37,99,235,.30), rgba(37,99,235,.14));
  border-color: rgba(147,197,253,.42);
}
.summary-grid div:nth-child(2) {
  background: linear-gradient(135deg, rgba(20,184,166,.30), rgba(20,184,166,.13));
  border-color: rgba(94,234,212,.42);
}
.summary-grid div:nth-child(3) {
  background: linear-gradient(135deg, rgba(245,158,11,.32), rgba(245,158,11,.14));
  border-color: rgba(251,191,36,.46);
}

@media (max-width: 640px) {
  .summary-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .summary-grid div {
    min-width: 0 !important;
    overflow: hidden !important;
    padding: 14px 16px !important;
  }

  .summary-grid strong {
    font-size: 24px !important;
    white-space: nowrap !important;
  }
}

/* YAAGI 10.3 - illustrated holiday icons */
.yaagi-holiday-card-icon,
.arrangement-holiday-icon,
.vacation-icon {
  color: transparent !important;
  font-size: 0 !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 26px 26px !important;
}

.holiday-theme-autumn .yaagi-holiday-card-icon,
.holiday-theme-autumn .arrangement-holiday-icon,
.vacation-admin-row.holiday-theme-autumn .vacation-icon,
.vacation-admin-row.autumn .vacation-icon {
  background-image: url("../assets/img/holiday-autumn.svg") !important;
}

.holiday-theme-christmas .yaagi-holiday-card-icon,
.holiday-theme-christmas .arrangement-holiday-icon,
.vacation-admin-row.holiday-theme-christmas .vacation-icon,
.vacation-admin-row.christmas .vacation-icon {
  background-image: url("../assets/img/holiday-christmas.svg") !important;
}

.holiday-theme-carnival .yaagi-holiday-card-icon,
.holiday-theme-carnival .arrangement-holiday-icon,
.vacation-admin-row.holiday-theme-carnival .vacation-icon,
.vacation-admin-row.carnival .vacation-icon {
  background-image: url("../assets/img/holiday-carnival.svg") !important;
}

.holiday-theme-easter .yaagi-holiday-card-icon,
.holiday-theme-easter .arrangement-holiday-icon,
.vacation-admin-row.holiday-theme-easter .vacation-icon,
.vacation-admin-row.easter .vacation-icon {
  background-image: url("../assets/img/holiday-easter.svg") !important;
}

.holiday-theme-spring .yaagi-holiday-card-icon,
.holiday-theme-spring .arrangement-holiday-icon,
.vacation-admin-row.holiday-theme-spring .vacation-icon,
.vacation-admin-row.spring .vacation-icon {
  background-image: url("../assets/img/holiday-spring.svg") !important;
}

.holiday-theme-summer .yaagi-holiday-card-icon,
.holiday-theme-summer .arrangement-holiday-icon,
.vacation-admin-row.holiday-theme-summer .vacation-icon,
.vacation-admin-row.summer .vacation-icon {
  background-image: url("../assets/img/holiday-summer.svg") !important;
}

.holiday-theme-other .yaagi-holiday-card-icon,
.holiday-theme-other .arrangement-holiday-icon,
.vacation-admin-row.holiday-theme-other .vacation-icon,
.vacation-admin-row.other .vacation-icon {
  background-image: url("../assets/img/holiday-other.svg") !important;
}


/* YAAGI 10.3 - checkout video frame, public checkout and calmer visual */
.yaagi-checkout-visual {
  align-content: center !important;
  gap: 14px !important;
}

.yaagi-checkout-video-frame {
  width: min(250px, 100%);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 24px;
  background: #0b1628;
  border: 1px solid rgba(15, 35, 75, .12);
  box-shadow: none !important;
}

.yaagi-checkout-phone-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 24px;
  box-shadow: none !important;
  filter: none !important;
}

.yaagi-checkout-phone-preview {
  box-shadow: none !important;
  filter: none !important;
}

.yaagi-checkout-public-note {
  margin-top: 6px;
  color: #475569;
  font-size: .95rem;
  line-height: 1.45;
}

.subscription-message.is-info {
  color: #0f3f7a;
  background: rgba(219, 234, 254, .72);
  border: 1px solid rgba(59, 130, 246, .20);
  padding: 10px 12px;
  border-radius: 12px;
}

@media (max-width: 820px) {
  .yaagi-checkout-video-frame {
    width: min(210px, 72vw);
  }
}



/* YAAGI 10.3 - checkout success, safer loading state, right-aligned Gold menu and richer holiday cards */
.yaagi-checkout-loading-note {
  display: block;
  width: min(100%, 420px);
  margin: -10px 0 0;
  color: #6b4d00;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.45;
}

.yaagi-checkout-primary-button.is-loading,
.yaagi-checkout-primary-button[aria-busy="true"] {
  opacity: .82;
  cursor: wait !important;
}

.subscription-page.yaagi-checkout-success-mode .yaagi-pricing-hero,
.subscription-page.yaagi-checkout-success-mode .yaagi-pricing-options-card,
.subscription-page.yaagi-checkout-success-mode .subscription-status-card,
.subscription-page.yaagi-checkout-success-mode .yaagi-plus-comparison-card,
.subscription-page.yaagi-checkout-success-mode .subscription-setup-card,
.subscription-page.yaagi-checkout-success-mode .subscription-portal-card,
.subscription-page.yaagi-checkout-success-mode .subscription-test-card,
.subscription-page.yaagi-checkout-success-mode .yaagi-checkout-intent-card {
  display: none !important;
}

.subscription-page.yaagi-checkout-success-mode .app {
  width: min(1060px, calc(100vw - 64px)) !important;
  max-width: min(1060px, calc(100vw - 64px)) !important;
}

.yaagi-checkout-success-card {
  display: grid;
  gap: 18px;
  border: 1px solid rgba(37, 155, 106, .22);
  background: linear-gradient(145deg, #ffffff 0%, #f5fff9 54%, #eef6ff 100%);
  box-shadow: 0 22px 56px rgba(15, 46, 87, .12);
}

.yaagi-checkout-success-card[hidden] {
  display: none !important;
}

.yaagi-success-badge {
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: #dcfce7;
  color: #047857;
  font-weight: 950;
  border: 1px solid rgba(16, 185, 129, .22);
}

.yaagi-checkout-success-card h2 {
  margin: 0;
  color: #071d49;
  font-size: clamp(1.7rem, 4vw, 2.7rem);
  line-height: 1.08;
}

.yaagi-success-lead {
  margin: 0;
  color: #34425f;
  font-size: 1.05rem;
  line-height: 1.55;
}

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

.yaagi-success-panel,
.yaagi-success-start-guide {
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(15, 35, 75, .10);
  background: rgba(255,255,255,.88);
}

.yaagi-success-panel h3,
.yaagi-success-start-guide h3 {
  margin: 0 0 8px;
  color: #071d49;
}

.yaagi-success-panel p,
.yaagi-success-start-guide li,
.yaagi-success-help-note {
  color: #40516f;
  line-height: 1.55;
}

.yaagi-success-panel .launch-primary-action,
.yaagi-success-panel .secondary-button {
  margin-top: 12px;
}

.yaagi-success-start-guide ol {
  margin: 10px 0 0;
  padding-left: 22px;
}

.yaagi-success-start-guide li + li {
  margin-top: 7px;
}

.yaagi-success-help-note {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-radius: 14px;
  background: #f1f5f9;
}

@media (max-width: 760px) {
  .subscription-page.yaagi-checkout-success-mode .app {
    width: min(100%, calc(100vw - 28px)) !important;
    max-width: min(100%, calc(100vw - 28px)) !important;
  }

  .yaagi-success-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 900px) {
  html body .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    width: min(1120px, calc(100vw - 72px)) !important;
    max-width: min(1120px, calc(100vw - 72px)) !important;
    grid-template-columns: repeat(5, minmax(92px, 1fr)) minmax(128px, auto) minmax(164px, auto) !important;
    justify-content: stretch !important;
    align-items: center !important;
  }

  html body .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status .ps-nav-language-switcher {
    justify-self: end !important;
  }

  html body .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status .yaagi-nav-gold-status {
    justify-self: end !important;
    min-width: 156px !important;
    margin-left: 8px !important;
  }
}

/* Holiday blocks: larger themed illustrations and stronger colours */
.yaagi-holiday-card {
  min-height: 82px;
  padding: 12px 14px !important;
  border-width: 2px !important;
  border-radius: 18px !important;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--holiday-bg) 0%, rgba(255,255,255,.86) 62%),
    var(--holiday-bg) !important;
  box-shadow: 0 10px 22px rgba(15,35,75,.06);
}

.yaagi-holiday-card-icon,
.arrangement-holiday-icon {
  width: 72px !important;
  height: 58px !important;
  min-width: 72px !important;
  border-radius: 16px !important;
  background-color: rgba(255,255,255,.42) !important;
  background-size: contain !important;
  background-position: center !important;
  box-shadow: none !important;
}

.yaagi-holiday-card-body strong {
  font-size: 16px !important;
  font-weight: 950 !important;
}

.yaagi-holiday-card-body span {
  font-size: 14px !important;
}

.holiday-theme-autumn { --holiday-bg:#f89a5b; --holiday-border:#d35f17; --holiday-accent:#5d2700; }
.holiday-theme-christmas { --holiday-bg:#f5c747; --holiday-border:#d39a10; --holiday-accent:#4b3400; }
.holiday-theme-carnival { --holiday-bg:#f58bb4; --holiday-border:#db4f8c; --holiday-accent:#641134; }
.holiday-theme-easter { --holiday-bg:#79d19b; --holiday-border:#3aaa69; --holiday-accent:#0a4d2a; }
.holiday-theme-spring { --holiday-bg:#92dfbd; --holiday-border:#4fb486; --holiday-accent:#0f563a; }
.holiday-theme-summer { --holiday-bg:#84bdf6; --holiday-border:#4b92da; --holiday-accent:#0d3f78; }
.holiday-theme-other { --holiday-bg:#d7e3f3; --holiday-border:#8ca8c9; --holiday-accent:#263f61; }

@media (max-width: 640px) {
  .yaagi-holiday-card {
    min-height: 78px;
    gap: 12px !important;
  }

  .yaagi-holiday-card-icon,
  .arrangement-holiday-icon {
    width: 66px !important;
    height: 54px !important;
    min-width: 66px !important;
  }
}


/* YAAGI 10.3 - payment-success page and clearer paid-but-not-logged-in state */
.yaagi-payment-success-page .yaagi-checkout-success-card,
.subscription-page.yaagi-checkout-success-mode .yaagi-checkout-success-card {
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.95) 0 20%, rgba(255,255,255,0) 34%),
    linear-gradient(135deg, #f0fff8 0%, #f7fbff 58%, #fff8df 100%) !important;
  border: 1px solid rgba(16, 185, 129, .20) !important;
  box-shadow: 0 24px 60px rgba(15, 35, 75, .10) !important;
}
.yaagi-success-link-note {
  margin: 10px 0 20px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(217, 154, 0, .28);
  background: rgba(255, 248, 221, .9);
  color: #5f4300;
  font-weight: 750;
  line-height: 1.5;
}
.yaagi-success-panel {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(8px);
}
.bottom-nav.has-yaagi-checkout-success-status .yaagi-nav-gold-status {
  justify-self: end !important;
}

/* YAAGI 10.3 - desktop app Gold/trial status right aligned */
@media (min-width: 900px) {
  html body .bottom-nav.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(150px, auto) !important;
  }
  html body .bottom-nav.has-yaagi-gold-status .yaagi-nav-gold-status {
    justify-self: end !important;
    margin-left: auto !important;
    margin-right: 6px !important;
    min-width: 142px !important;
    max-width: 220px !important;
  }
}

/* YAAGI 10.3 - dominant holiday cards with themed scene backgrounds */
.vacation-admin-row {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  border-radius: 24px !important;
  padding: 18px 190px 18px 20px !important;
  min-height: 118px;
  box-shadow: 0 16px 34px rgba(15, 35, 75, .12);
}
.vacation-admin-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 174px 112px;
  opacity: .98;
  pointer-events: none;
}
.vacation-admin-row .vacation-header,
.vacation-admin-row .vacation-grid,
.vacation-admin-row .vacation-admin-meta,
.vacation-admin-row .delete-vacation {
  position: relative;
  z-index: 1;
}
.vacation-admin-row .vacation-icon {
  display: none !important;
}
.vacation-admin-row .vacation-title-block strong {
  font-size: 1.12rem;
  color: #102243;
}
.vacation-admin-row .vacation-subtitle,
.vacation-admin-row .vacation-admin-meta {
  color: rgba(16, 34, 67, .76) !important;
  font-weight: 750;
}
.vacation-krokus,
.holiday-theme-carnival,
.holiday-theme-spring {
  background: linear-gradient(135deg, #f4a9c7 0%, #fcd3e1 58%, #fff5fb 100%) !important;
}
.vacation-krokus::after,
.holiday-theme-carnival::after,
.holiday-theme-spring::after {
  background-image: url("../assets/img/holiday-spring-scene.svg");
}
.vacation-paas,
.holiday-theme-easter {
  background: linear-gradient(135deg, #98d7a7 0%, #c7f0cb 56%, #fff5bf 100%) !important;
}
.vacation-paas::after,
.holiday-theme-easter::after {
  background-image: url("../assets/img/holiday-easter-scene.svg");
}
.vacation-zomer,
.holiday-theme-summer {
  background: linear-gradient(135deg, #67b7ff 0%, #aee4ff 52%, #ffe59b 100%) !important;
}
.vacation-zomer::after,
.holiday-theme-summer::after {
  background-image: url("../assets/img/holiday-summer-scene.svg");
}
.vacation-herfst,
.holiday-theme-autumn {
  background: linear-gradient(135deg, #dc7b3a 0%, #efb36d 56%, #ffe1bd 100%) !important;
}
.vacation-herfst::after,
.holiday-theme-autumn::after {
  background-image: url("../assets/img/holiday-autumn-scene.svg");
}
.vacation-kerst,
.holiday-theme-christmas {
  background: linear-gradient(135deg, #2c9a5c 0%, #72c884 54%, #fff2d0 100%) !important;
}
.vacation-kerst::after,
.holiday-theme-christmas::after {
  background-image: url("../assets/img/holiday-christmas-scene.svg");
}
.vacation-extra,
.holiday-theme-other {
  background: linear-gradient(135deg, #9cb6d8 0%, #dce8f7 58%, #ffffff 100%) !important;
}
.vacation-extra::after,
.holiday-theme-other::after {
  background-image: url("../assets/img/holiday-family-scene.svg");
}
.holiday-year-body .vacation-admin-row {
  margin-top: 14px !important;
}
.yaagi-holiday-card {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 18px 176px 18px 18px !important;
  border-radius: 24px !important;
  border: 0 !important;
  box-shadow: 0 16px 34px rgba(15, 35, 75, .12);
  background: var(--holiday-bg) !important;
}
.yaagi-holiday-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 162px 104px;
  pointer-events: none;
}
.yaagi-holiday-card-icon,
.arrangement-holiday-icon {
  display: none !important;
}
.yaagi-holiday-card-body {
  position: relative;
  z-index: 1;
}
.holiday-theme-autumn::after { background-image: url("../assets/img/holiday-autumn-scene.svg"); }
.holiday-theme-christmas::after { background-image: url("../assets/img/holiday-christmas-scene.svg"); }
.holiday-theme-carnival::after,
.holiday-theme-spring::after { background-image: url("../assets/img/holiday-spring-scene.svg"); }
.holiday-theme-easter::after { background-image: url("../assets/img/holiday-easter-scene.svg"); }
.holiday-theme-summer::after { background-image: url("../assets/img/holiday-summer-scene.svg"); }
.holiday-theme-other::after { background-image: url("../assets/img/holiday-family-scene.svg"); }

@media (max-width: 640px) {
  .vacation-admin-row,
  .yaagi-holiday-card {
    min-height: 132px;
    padding: 16px 138px 16px 16px !important;
    border-radius: 22px !important;
  }
  .vacation-admin-row::after,
  .yaagi-holiday-card::after {
    background-size: 132px 94px;
    background-position: right -2px bottom 8px;
  }
}


/* YAAGI 10.3 - Help/Q&A page */
.yaagi-help-page .card {
  overflow: hidden;
}
.yaagi-help-hero {
  background:
    radial-gradient(circle at 84% 10%, rgba(255,255,255,.42), transparent 30%),
    linear-gradient(135deg, #0f234b 0%, #1959a6 72%, #6fb5ff 100%);
  color: #fff;
}
.yaagi-help-hero h2 {
  color: #fff;
  margin-bottom: 10px;
}
.yaagi-help-hero p {
  color: rgba(255,255,255,.92);
  line-height: 1.65;
}
.yaagi-help-search label {
  display: block;
  margin-bottom: 8px;
  color: #132238;
  font-weight: 900;
}
.yaagi-help-search input {
  width: 100%;
}
.yaagi-help-list {
  display: grid;
  gap: 14px;
}
.yaagi-help-category h2 {
  margin: 0 0 12px;
  color: #0f234b;
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: -.025em;
}
.yaagi-help-category details {
  border: 1px solid rgba(15,35,75,.10);
  border-radius: 16px;
  background: #fbfdff;
  overflow: hidden;
}
.yaagi-help-category details + details {
  margin-top: 10px;
}
.yaagi-help-category summary {
  cursor: pointer;
  padding: 15px 16px;
  color: #102243;
  font-weight: 900;
  list-style: none;
}
.yaagi-help-category summary::-webkit-details-marker {
  display: none;
}
.yaagi-help-category summary::after {
  content: "⌄";
  float: right;
  color: #64748b;
  font-weight: 900;
}
.yaagi-help-category details[open] summary::after {
  transform: rotate(180deg);
}
.yaagi-help-category p {
  margin: 0;
  padding: 0 16px 16px;
  color: #40546d;
  line-height: 1.65;
}

/* YAAGI 10.3 - clearer Help/Q&A structure and child edit actions */
.child-profile-actions {
  margin: 10px 0 8px;
}
.child-profile-actions .child-edit-button {
  width: auto;
  min-width: 0;
}
.yaagi-help-category details {
  scroll-margin-top: 96px;
}
.yaagi-help-category summary {
  display: flex;
  align-items: center;
  gap: 10px;
}
.yaagi-help-category summary::before {
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 999px;
  background: #e8f2ff;
  color: #0f5fb7;
  font-weight: 950;
  font-size: 14px;
}
.yaagi-help-category summary::after {
  content: "+";
  margin-left: auto;
  float: none;
}
.yaagi-help-category details[open] summary::after {
  content: "-";
  transform: none;
}
.yaagi-help-answer {
  position: relative;
  padding-left: 52px !important;
}
.yaagi-help-answer::before {
  content: "i";
  position: absolute;
  left: 16px;
  top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #fff7d8;
  color: #8a5f00;
  font-weight: 950;
  font-size: 13px;
}
.yaagi-help-answer a {
  color: #1456a8;
  font-weight: 900;
  text-decoration: none;
}
.yaagi-help-answer a:hover,
.yaagi-help-answer a:focus-visible {
  text-decoration: underline;
}
@media (max-width: 640px) {
  .yaagi-help-category details {
    scroll-margin-top: 116px;
  }
  .yaagi-help-category summary {
    align-items: flex-start;
  }
  .yaagi-help-answer {
    padding-left: 44px !important;
  }
}

/* YAAGI 10.3 - app Gold/proef status right aligned on desktop */
@media (min-width: 900px) {
  html body .bottom-nav.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(150px, auto) !important;
  }
  html body .bottom-nav.has-yaagi-gold-status .yaagi-nav-gold-status {
    justify-self: end !important;
    margin-left: auto !important;
    margin-right: 12px !important;
  }
}

/* YAAGI 10.3 - richer holiday cards: illustration becomes the card background */
.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card,
.vacation-admin-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 112px;
  padding: 18px 172px 18px 18px !important;
  border-radius: 24px !important;
  border: 0 !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
  background-color: var(--holiday-bg);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 47%, rgba(255,255,255,.10) 100%),
    var(--holiday-art);
  background-repeat: no-repeat;
  background-size: cover, auto 100%;
  background-position: center, right center;
}
.yaagi-holiday-card::after,
.vacation-admin-row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.42);
  pointer-events: none;
  z-index: -1;
}
.yaagi-holiday-card-icon,
.arrangement-holiday-icon,
.vacation-admin-row .vacation-icon {
  display: none !important;
}
.yaagi-holiday-card-body strong,
.vacation-admin-row strong,
.arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-title {
  color: #0f234b !important;
  font-size: 17px;
  line-height: 1.18;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.yaagi-holiday-card-body span,
.vacation-admin-meta {
  color: #1f2b3d !important;
  font-weight: 700;
}
.holiday-theme-autumn,
.vacation-herfst {
  --holiday-bg: #d86927;
  --holiday-art: url("../assets/img/holiday-art-autumn.svg");
}
.holiday-theme-christmas,
.vacation-kerst {
  --holiday-bg: #0f8f5b;
  --holiday-art: url("../assets/img/holiday-art-christmas.svg");
}
.holiday-theme-carnival,
.vacation-krokus {
  --holiday-bg: #c46adf;
  --holiday-art: url("../assets/img/holiday-art-carnival.svg");
}
.holiday-theme-easter,
.vacation-paas {
  --holiday-bg: #f7a6c9;
  --holiday-art: url("../assets/img/holiday-art-easter.svg");
}
.holiday-theme-spring {
  --holiday-bg: #60ca91;
  --holiday-art: url("../assets/img/holiday-art-spring.svg");
}
.holiday-theme-summer,
.vacation-zomer {
  --holiday-bg: #38bdf8;
  --holiday-art: url("../assets/img/holiday-art-summer.svg");
}
.holiday-theme-other,
.vacation-extra {
  --holiday-bg: #cbd5e1;
  --holiday-art: url("../assets/img/holiday-art-other.svg");
}
.holiday-edit-row.yaagi-holiday-card {
  display: block;
}
.holiday-edit-row.yaagi-holiday-card .holiday-edit-main {
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card,
  .vacation-admin-row {
    min-height: 124px;
    padding: 18px 122px 18px 16px !important;
    background-size: cover, auto 100%;
    background-position: center, right center;
  }
  .yaagi-holiday-card-body strong,
  .vacation-admin-row strong {
    font-size: 16px;
  }
}
@media (max-width: 420px) {
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card,
  .vacation-admin-row {
    padding-right: 104px !important;
  }
}


/* YAAGI 10.3 admin dashboard */
.yaagi-admin-app {
  max-width: 1120px;
}
.yaagi-admin-hero {
  background:
    radial-gradient(circle at top right, rgba(217, 154, 0, 0.18), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #fff7e6 100%);
}
.yaagi-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.yaagi-admin-actions .primary,
.yaagi-admin-actions .secondary {
  width: auto;
  min-width: 180px;
  text-align: center;
  text-decoration: none;
}
.yaagi-admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.yaagi-admin-metric {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.30);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}
.yaagi-admin-metric::after {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: rgba(217, 154, 0, 0.14);
}
.yaagi-admin-metric strong {
  display: block;
  margin-top: 6px;
  font-size: clamp(1.8rem, 4vw, 2.45rem);
  line-height: 1;
  color: var(--blue-dark);
}
.yaagi-admin-metric span {
  color: var(--muted);
  font-weight: 800;
  font-size: .88rem;
}
.yaagi-admin-metric small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.35;
}
.yaagi-admin-table-card {
  margin-top: 16px;
}
.yaagi-admin-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.yaagi-admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
}
.yaagi-admin-table th,
.yaagi-admin-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  text-align: left;
  vertical-align: top;
}
.yaagi-admin-table th {
  color: var(--blue-dark);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #f8fafc;
}
.yaagi-admin-table td {
  color: var(--text);
}
.yaagi-admin-table .number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.yaagi-admin-empty {
  padding: 14px 0;
  color: var(--muted);
}
.yaagi-admin-note {
  margin-top: 16px;
  border-color: rgba(217, 154, 0, 0.24);
  background: #fffaf0;
}

@media (max-width: 980px) {
  .yaagi-admin-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .yaagi-admin-app {
    padding-left: 14px;
    padding-right: 14px;
  }
  .yaagi-admin-grid {
    grid-template-columns: 1fr;
  }
  .yaagi-admin-actions .primary,
  .yaagi-admin-actions .secondary {
    width: 100%;
  }
}


/* YAAGI 10.3 - Help/Q&A clearer thematic icons and no duplicate topbar language */
.yaagi-help-page .topbar .ps-global-language-switcher,
.yaagi-help-page .topbar #parentSyncGlobalLanguageSwitcher {
  display: none !important;
}
.yaagi-help-category[data-help-category] {
  border-left: 6px solid rgba(20, 86, 168, .18);
}
.yaagi-help-category[data-help-category="children"] { border-left-color: rgba(236,72,153,.35); }
.yaagi-help-category[data-help-category="documents"] { border-left-color: rgba(37,99,235,.35); }
.yaagi-help-category[data-help-category="costs"] { border-left-color: rgba(22,163,74,.35); }
.yaagi-help-category[data-help-category="holidays"] { border-left-color: rgba(245,158,11,.42); }
.yaagi-help-category[data-help-category="calendar"] { border-left-color: rgba(14,165,233,.35); }
.yaagi-help-category[data-help-category="arrangements"] { border-left-color: rgba(124,58,237,.35); }
.yaagi-help-category[data-help-category="subscription"] { border-left-color: rgba(202,138,4,.45); }
.yaagi-help-category[data-help-category="troubleshooting"] { border-left-color: rgba(239,68,68,.35); }

.yaagi-help-category summary::before {
  content: "❔";
  background: linear-gradient(135deg, #e8f2ff, #ffffff);
  color: #0f5fb7;
  box-shadow: 0 6px 14px rgba(15,95,183,.12);
}
.yaagi-help-category[data-help-category="general"] summary::before { content: "✨"; background: #eef6ff; color: #1359a5; }
.yaagi-help-category[data-help-category="account"] summary::before { content: "🔐"; background: #edf7ff; color: #075985; }
.yaagi-help-category[data-help-category="children"] summary::before { content: "👧"; background: #fff0f7; color: #be185d; }
.yaagi-help-category[data-help-category="coparents"] summary::before { content: "👥"; background: #eef2ff; color: #4338ca; }
.yaagi-help-category[data-help-category="arrangements"] summary::before { content: "🔁"; background: #f3e8ff; color: #7e22ce; }
.yaagi-help-category[data-help-category="holidays"] summary::before { content: "🏖️"; background: #fff7ed; color: #c2410c; }
.yaagi-help-category[data-help-category="calendar"] summary::before { content: "📅"; background: #ecfeff; color: #0e7490; }
.yaagi-help-category[data-help-category="documents"] summary::before { content: "📄"; background: #eff6ff; color: #1d4ed8; }
.yaagi-help-category[data-help-category="costs"] summary::before { content: "💶"; background: #ecfdf5; color: #047857; }
.yaagi-help-category[data-help-category="subscription"] summary::before {
  content: "";
  background: #fffbeb url("../assets/img/GOLD512.png") center/72% 72% no-repeat;
  color: transparent;
}
.yaagi-help-category[data-help-category="troubleshooting"] summary::before { content: "🛟"; background: #fff1f2; color: #be123c; }

.yaagi-help-answer::before {
  content: "✓";
  background: #ecfdf5;
  color: #047857;
}
.yaagi-help-category[data-help-category="children"] .yaagi-help-answer::before { content: "👧"; background: #fff0f7; color: #be185d; }
.yaagi-help-category[data-help-category="documents"] .yaagi-help-answer::before { content: "📎"; background: #eff6ff; color: #1d4ed8; }
.yaagi-help-category[data-help-category="costs"] .yaagi-help-answer::before { content: "€"; background: #ecfdf5; color: #047857; }
.yaagi-help-category[data-help-category="holidays"] .yaagi-help-answer::before { content: "🌞"; background: #fff7ed; color: #c2410c; }
.yaagi-help-category[data-help-category="calendar"] .yaagi-help-answer::before { content: "📅"; background: #ecfeff; color: #0e7490; }
.yaagi-help-category[data-help-category="arrangements"] .yaagi-help-answer::before { content: "↔"; background: #f3e8ff; color: #7e22ce; }
.yaagi-help-category[data-help-category="subscription"] .yaagi-help-answer::before { content: ""; background: #fffbeb url("../assets/img/GOLD512.png") center/72% 72% no-repeat; color: transparent; }
.yaagi-help-category[data-help-category="troubleshooting"] .yaagi-help-answer::before { content: "!"; background: #fff1f2; color: #be123c; }

.yaagi-help-answer {
  line-height: 1.68;
}
.yaagi-help-answer a {
  display: inline-block;
  margin-top: 6px;
}


/* YAAGI 10.3 - align Gold/trial status fully to the right on desktop */
@media (min-width: 900px) {
  html body .bottom-nav.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(96px, 1fr)) minmax(154px, auto) !important;
    column-gap: 10px !important;
  }

  html body .bottom-nav.has-yaagi-gold-status .yaagi-nav-gold-status {
    justify-self: end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

/* YAAGI 10.3 - realistic integrated holiday bars */
.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card,
.vacation-admin-row {
  min-height: 126px !important;
  border-radius: 26px !important;
  padding: 20px 205px 20px 20px !important;
  border: 1px solid rgba(255,255,255,.56) !important;
  box-shadow: 0 18px 36px rgba(15,23,42,.12) !important;
  background-image:
    linear-gradient(90deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.87) 38%,
      rgba(255,255,255,.46) 66%,
      rgba(255,255,255,.08) 100%),
    var(--holiday-art) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}

.yaagi-holiday-card-body strong,
.vacation-admin-row strong,
.arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-title {
  color: #0a1f44 !important;
  font-size: 18px !important;
  letter-spacing: -0.02em;
}

.yaagi-holiday-card-body span,
.vacation-admin-meta {
  color: #21344d !important;
  font-weight: 760 !important;
}

.holiday-theme-autumn,
.vacation-herfst {
  --holiday-bg: #d9772a;
  --holiday-art: url("../assets/img/holiday-art-autumn.svg");
}

.holiday-theme-christmas,
.vacation-kerst {
  --holiday-bg: #154d44;
  --holiday-art: url("../assets/img/holiday-art-christmas.svg");
}

.holiday-theme-carnival,
.vacation-krokus {
  --holiday-bg: #7286d3;
  --holiday-art: url("../assets/img/holiday-art-carnival.svg");
}

.holiday-theme-easter,
.vacation-paas {
  --holiday-bg: #c987a9;
  --holiday-art: url("../assets/img/holiday-art-easter.svg");
}

.holiday-theme-spring {
  --holiday-bg: #6fbf91;
  --holiday-art: url("../assets/img/holiday-art-spring.svg");
}

.holiday-theme-summer,
.vacation-zomer {
  --holiday-bg: #16a6d8;
  --holiday-art: url("../assets/img/holiday-art-summer.svg");
}

.holiday-theme-other,
.vacation-extra {
  --holiday-bg: #8fa4bd;
  --holiday-art: url("../assets/img/holiday-art-other.svg");
}

.arrangement-holiday-block.yaagi-holiday-themed {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 44%, rgba(255,255,255,.20) 100%),
    var(--holiday-art) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  border-radius: 24px !important;
  overflow: hidden;
}

@media (max-width: 640px) {
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card,
  .vacation-admin-row {
    min-height: 132px !important;
    padding: 18px 132px 18px 16px !important;
  }

  .yaagi-holiday-card-body strong,
  .vacation-admin-row strong {
    font-size: 16.5px !important;
  }
}

@media (max-width: 420px) {
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card,
  .vacation-admin-row {
    padding-right: 112px !important;
  }
}


/* YAAGI 10.3 - final live polish */
.bottom-nav .yaagi-nav-gold-status,
.bottom-nav #yaagiGoldMenuStatus {
  margin-left: auto !important;
}
.bottom-nav.has-yaagi-gold-status {
  justify-content: flex-start;
}
.bottom-nav.has-yaagi-gold-status .language-switcher,
.bottom-nav.has-yaagi-gold-status .language-select-wrap {
  margin-left: auto;
}
.bottom-nav.has-yaagi-gold-status .language-switcher + .yaagi-nav-gold-status,
.bottom-nav.has-yaagi-gold-status .language-select-wrap + .yaagi-nav-gold-status {
  margin-left: 10px !important;
}

.login-current-session {
  border-color: rgba(22, 163, 74, .28);
  background: #f0fdf4;
}
.login-current-session strong {
  word-break: break-all;
}

.yaagi-admin-metric.is-money {
  border-color: rgba(217, 154, 0, .35);
  background: linear-gradient(135deg, #fffdf5, #fff7d6);
}
.yaagi-admin-year-groups {
  display: grid;
  gap: 12px;
}
.yaagi-admin-year {
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.yaagi-admin-year summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 950;
  color: #0f234b;
  background: #f8fbff;
}
.yaagi-admin-filter-card label {
  display: block;
  margin-bottom: 8px;
  font-weight: 950;
}
.yaagi-admin-filter-card select {
  max-width: 360px;
}

/* Holiday cards: more mature full-card scenic treatment */
.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card,
.vacation-admin-row {
  min-height: 154px !important;
  padding: 24px 42% 24px 22px !important;
  overflow: hidden;
  background-color: var(--holiday-bg);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 36%, rgba(255,255,255,.18) 72%, rgba(255,255,255,.04) 100%),
    var(--holiday-art);
  background-repeat: no-repeat;
  background-size: cover, cover;
  background-position: center, center;
  border: 1px solid rgba(255,255,255,.45) !important;
  box-shadow: 0 20px 46px rgba(15, 23, 42, .13);
}
.holiday-theme-autumn,
.vacation-herfst {
  --holiday-bg: #c96f32;
  --holiday-art: url("../assets/img/holiday-scene-autumn.svg");
}
.holiday-theme-christmas,
.vacation-kerst {
  --holiday-bg: #174e72;
  --holiday-art: url("../assets/img/holiday-scene-christmas.svg");
}
.holiday-theme-carnival,
.vacation-krokus {
  --holiday-bg: #9f7ad0;
  --holiday-art: url("../assets/img/holiday-scene-spring.svg");
}
.holiday-theme-easter,
.vacation-paas {
  --holiday-bg: #79b78f;
  --holiday-art: url("../assets/img/holiday-scene-easter.svg");
}
.holiday-theme-spring {
  --holiday-bg: #62a985;
  --holiday-art: url("../assets/img/holiday-scene-spring.svg");
}
.holiday-theme-summer,
.vacation-zomer {
  --holiday-bg: #1c9cc5;
  --holiday-art: url("../assets/img/holiday-scene-summer.svg");
}
.holiday-theme-other,
.vacation-extra {
  --holiday-bg: #8296ad;
  --holiday-art: url("../assets/img/holiday-scene-other.svg");
}
@media (max-width: 640px) {
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card,
  .vacation-admin-row {
    min-height: 150px !important;
    padding: 18px 34% 18px 16px !important;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 44%, rgba(255,255,255,.22) 100%),
      var(--holiday-art);
  }
}



/* ============================================================
   YAAGI 10.3 live readiness layout fixes
   ============================================================ */

/* Only one language selector: keep it in the white app menu. */
.topbar .ps-global-language-switcher,
.ps-header-controls .ps-global-language-switcher {
  display: none !important;
}

/* Desktop menu: fixed zones so language and Gold no longer jump. */
@media (min-width: 900px) {
  html body .bottom-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 12px 0 18px !important;
    width: min(1120px, calc(100vw - 56px)) !important;
    max-width: min(1120px, calc(100vw - 56px)) !important;
    height: 64px !important;
  }

  html body .bottom-nav a {
    flex: 0 0 auto !important;
    min-width: 126px !important;
    max-width: 150px !important;
    height: 42px !important;
  }

  html body .bottom-nav .ps-nav-language-switcher {
    display: inline-flex !important;
    flex: 0 0 154px !important;
    width: 154px !important;
    min-width: 154px !important;
    margin-left: auto !important;
    margin-right: 8px !important;
    order: 50 !important;
  }

  html body .bottom-nav .ps-global-language-select {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
  }

  html body .bottom-nav .yaagi-nav-gold-status {
    flex: 0 0 auto !important;
    order: 60 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 164px !important;
    height: 42px !important;
    justify-self: end !important;
  }

  html body .bottom-nav.has-yaagi-gold-status,
  html body .bottom-nav.has-yaagi-language-switcher {
    grid-template-columns: none !important;
  }
}

.ps-user-badge .ps-status-text {
  white-space: normal;
  line-height: 1.15;
}

/* Hide unclear floating status marks and old loose labels. */
.card > span:empty,
.list-item > span:empty {
  display: none !important;
}

/* More page: stable icons and aligned actions. */
.yaagi-more-list .list-item,
.more-page .list-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.more-item-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef6ff, #ffffff);
  border: 1px solid rgba(10,78,163,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

.more-item-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.more-item-action {
  margin-left: auto;
  min-width: 36px;
  text-align: right;
  color: #8aa0b8;
  font-weight: 900;
}

.more-gold-action {
  margin-left: auto;
  justify-self: end;
}

/* Costs: no orphan Gold marker. */
.costs-page .premium .yaagi-plus-badge,
.costs-page .premium::after {
  display: none !important;
}

/* Assistant copy card should look active, not unavailable. */
.assistant-page .template-badge {
  background: #eaf3ff;
  color: #0a4ea3;
}

/* Legal disclaimer hidden when legacy markup remains. */
.legal-disclaimer-card {
  display: none !important;
}

/* Holiday cards: no loose icon boxes; full bar acts as the scene. */
.vacation-admin-row {
  position: relative !important;
  overflow: hidden !important;
  min-height: 128px !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  border-radius: 24px !important;
  padding: 24px 28px !important;
  background-size: cover !important;
  background-position: center !important;
  box-shadow: 0 18px 40px rgba(15,35,75,.14) !important;
}

.vacation-admin-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.78) 35%, rgba(255,255,255,.18) 72%, rgba(255,255,255,.06) 100%);
  z-index: 0;
}

.vacation-admin-row .vacation-header,
.vacation-admin-row .vacation-admin-meta,
.vacation-admin-row .delete-vacation {
  position: relative;
  z-index: 1;
}

.vacation-admin-row .vacation-icon {
  display: none !important;
}

.vacation-admin-row .vacation-title-block strong {
  font-size: 1.18rem;
  color: #071d49;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.vacation-admin-row .vacation-admin-meta {
  color: #071d49;
  font-weight: 900;
  margin-top: 6px;
}

.vacation-herfst,
.holiday-theme-autumn {
  background-image:
    radial-gradient(circle at 82% 28%, rgba(255,188,87,.75) 0 8%, transparent 22%),
    linear-gradient(110deg, #fff6e9 0%, #e99f55 47%, #9a4e1f 100%) !important;
}

.vacation-kerst,
.holiday-theme-christmas {
  background-image:
    radial-gradient(circle at 77% 22%, rgba(255,255,255,.95) 0 4%, transparent 18%),
    linear-gradient(120deg, #f8fbff 0%, #b9d7e8 45%, #234c70 100%) !important;
}

.vacation-krokus,
.holiday-theme-carnival,
.holiday-theme-spring {
  background-image:
    radial-gradient(circle at 78% 32%, rgba(255,232,161,.78) 0 7%, transparent 22%),
    linear-gradient(120deg, #f6fff9 0%, #96d5ad 48%, #2f8d73 100%) !important;
}

.vacation-paas,
.holiday-theme-easter {
  background-image:
    radial-gradient(circle at 78% 31%, rgba(255,235,170,.80) 0 7%, transparent 24%),
    linear-gradient(120deg, #fffaf2 0%, #b8dfb3 45%, #77b995 100%) !important;
}

.vacation-zomer,
.holiday-theme-summer {
  background-image:
    radial-gradient(circle at 78% 24%, rgba(255,222,108,.9) 0 8%, transparent 22%),
    linear-gradient(120deg, #e9fbff 0%, #48c7de 45%, #f5b84b 78%, #d99026 100%) !important;
}

.vacation-extra,
.holiday-theme-other {
  background-image: linear-gradient(120deg, #f8fbff 0%, #dbe8f7 50%, #7799bd 100%) !important;
}

.holiday-year-body {
  display: grid;
  gap: 14px;
}

/* Arrangement holiday blocks use scenery, not icon chips. */
.arrangement-holiday-block.yaagi-holiday-themed {
  position: relative;
  overflow: hidden;
  background-size: cover !important;
  background-position: center !important;
}
.arrangement-holiday-block .arrangement-holiday-icon {
  display: none !important;
}

/* Test page compact checkboxes */
.test-checklist-grid {
  display: grid;
  gap: 10px;
}
.test-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 12px;
  background: #fff;
}
.test-check input {
  margin-top: 4px;
}



/* YAAGI 10.3 scenic holiday image assets */
.vacation-herfst,
.holiday-theme-autumn {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 36%, rgba(255,255,255,.08) 100%),
    url("../assets/img/holiday-scene-autumn.svg") !important;
}
.vacation-kerst,
.holiday-theme-christmas {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.72) 36%, rgba(255,255,255,.08) 100%),
    url("../assets/img/holiday-scene-christmas.svg") !important;
}
.vacation-krokus,
.holiday-theme-carnival,
.holiday-theme-spring {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.70) 36%, rgba(255,255,255,.08) 100%),
    url("../assets/img/holiday-scene-spring.svg") !important;
}
.vacation-paas,
.holiday-theme-easter {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.70) 36%, rgba(255,255,255,.08) 100%),
    url("../assets/img/holiday-scene-easter.svg") !important;
}
.vacation-zomer,
.holiday-theme-summer {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.66) 36%, rgba(255,255,255,.04) 100%),
    url("../assets/img/holiday-scene-summer.svg") !important;
}


/* ============================================================
   YAAGI 10.3 - test bar, Gold badge cleanup and mature holiday bars
   ============================================================ */
.yaagi-test-mode-bar {
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(7,29,73,.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px rgba(15,23,42,.18);
}
.yaagi-test-mode-bar button {
  width: auto !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background: #ffffff !important;
  color: #071d49 !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}
.yaagi-plus-badge {
  display: none !important;
}

/* Holiday cards: full-bar scenic images, no icon chips and no childish drawings. */
.vacation-admin-row,
.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 148px !important;
  padding: 24px 28px !important;
  border-radius: 25px !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  box-shadow: 0 22px 50px rgba(15,35,75,.16) !important;
  background-color: var(--holiday-bg, #d9e7f5) !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.74) 30%, rgba(255,255,255,.28) 58%, rgba(255,255,255,.05) 100%),
    var(--holiday-art) !important;
  background-repeat: no-repeat !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}
.vacation-admin-row::before,
.vacation-admin-row::after,
.yaagi-holiday-card::before,
.yaagi-holiday-card::after {
  display: none !important;
}
.vacation-admin-row .vacation-icon,
.yaagi-holiday-card-icon,
.arrangement-holiday-icon {
  display: none !important;
}
.vacation-admin-row .vacation-header {
  margin: 0 0 10px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.vacation-admin-row .vacation-title-block,
.yaagi-holiday-card-body {
  max-width: min(460px, 58%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.vacation-admin-row .vacation-title-block strong,
.yaagi-holiday-card-body strong,
.arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-title {
  color: #071d49 !important;
  font-size: clamp(17px, 2.1vw, 22px) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -0.03em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
}
.vacation-admin-row .vacation-subtitle,
.vacation-admin-row .vacation-admin-meta,
.yaagi-holiday-card-body span {
  color: #102033 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.42) !important;
}
.vacation-admin-row .template-badge,
.vacation-admin-row .extra-badge {
  display: none !important;
}
.vacation-herfst,
.holiday-theme-autumn {
  --holiday-bg: #c86d32;
  --holiday-art: url("../assets/img/holiday-scene-autumn.svg");
}
.vacation-kerst,
.holiday-theme-christmas {
  --holiday-bg: #184d72;
  --holiday-art: url("../assets/img/holiday-scene-christmas.svg");
}
.vacation-krokus,
.holiday-theme-carnival,
.holiday-theme-spring {
  --holiday-bg: #7fb49c;
  --holiday-art: url("../assets/img/holiday-scene-spring.svg");
}
.vacation-paas,
.holiday-theme-easter {
  --holiday-bg: #8abf9b;
  --holiday-art: url("../assets/img/holiday-scene-easter.svg");
}
.vacation-zomer,
.holiday-theme-summer {
  --holiday-bg: #2b9ec8;
  --holiday-art: url("../assets/img/holiday-scene-summer.svg");
}
.vacation-extra,
.holiday-theme-other {
  --holiday-bg: #8fa4bd;
  --holiday-art: url("../assets/img/holiday-scene-other.svg");
}
@media (max-width: 700px) {
  .vacation-admin-row,
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card {
    min-height: 132px !important;
    padding: 18px 18px !important;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 48%, rgba(255,255,255,.22) 100%),
      var(--holiday-art) !important;
  }
  .vacation-admin-row .vacation-title-block,
  .yaagi-holiday-card-body {
    max-width: 72% !important;
  }
}

/* YAAGI 10.3 correction: holiday cards use one full scenic bar, never an icon column. */
.vacation-admin-row,
.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card {
  display: block !important;
  grid-template-columns: none !important;
}
.yaagi-holiday-card .yaagi-holiday-card-icon,
.holiday-review-row.yaagi-holiday-card .yaagi-holiday-card-icon,
.holiday-edit-row.yaagi-holiday-card .yaagi-holiday-card-icon,
.vacation-admin-row .vacation-icon {
  display: none !important;
}
.holiday-edit-row.yaagi-holiday-card .holiday-edit-main,
.holiday-review-row.yaagi-holiday-card > *,
.yaagi-holiday-card .yaagi-holiday-card-body {
  display: block !important;
  max-width: min(480px, 62%) !important;
}
.holiday-edit-row.yaagi-holiday-card .holiday-edit-dates {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 10px !important;
}
@media (max-width: 700px) {
  .holiday-edit-row.yaagi-holiday-card .holiday-edit-main,
  .holiday-review-row.yaagi-holiday-card > *,
  .yaagi-holiday-card .yaagi-holiday-card-body {
    max-width: 74% !important;
  }
  .holiday-edit-row.yaagi-holiday-card .holiday-edit-dates {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   YAAGI 10.3 dashboard polish and premium holiday scenes
   ============================================================ */

.yaagi-gold-dot {
  width: 22px;
  height: 22px;
  min-width: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 7px;
}

.dashboard-gold-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.launch-ready-actions-three {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.launch-ready-actions-three a,
.launch-ready-actions-three button {
  width: 100% !important;
  margin: 0 !important;
  min-height: 48px !important;
}

.dashboard-action-card {
  width: 100%;
}

.yaagi-dashboard-page .launch-flow {
  margin-bottom: 16px !important;
}

@media (min-width: 880px) {
  .yaagi-dashboard-page .app {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
  }

  .yaagi-dashboard-page .topbar,
  .yaagi-dashboard-page .launch-welcome,
  .yaagi-dashboard-page .launch-holiday-banner,
  .yaagi-dashboard-page .launch-flow,
  .yaagi-dashboard-page .launch-premium-card,
  .yaagi-dashboard-page .dashboard-today-card,
  .yaagi-dashboard-page .dashboard-overview-card {
    grid-column: 1 / -1;
  }

  .yaagi-dashboard-page .grid {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .yaagi-dashboard-page .dashboard-coming-card,
  .yaagi-dashboard-page .dashboard-quick-card,
  .yaagi-dashboard-page .dashboard-activity-card,
  .yaagi-dashboard-page .dashboard-latest-costs-card {
    min-height: 100%;
  }

  .yaagi-dashboard-page .dashboard-activity-card,
  .yaagi-dashboard-page .dashboard-latest-costs-card {
    align-self: stretch;
  }
}

@media (max-width: 720px) {
  .launch-ready-actions-three {
    grid-template-columns: 1fr !important;
  }
}

/* Replace childlike holiday icons with full-width mature scenic cards. */
.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card,
.vacation-admin-row {
  min-height: 154px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: var(--holiday-bg, #eef3f8) !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.82) 31%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.06) 100%),
    var(--holiday-art) !important;
  background-repeat: no-repeat !important;
  background-size: cover, cover !important;
  background-position: center center, center center !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 26px !important;
  box-shadow: 0 20px 46px rgba(15, 23, 42, .14) !important;
}

.yaagi-holiday-card::before,
.yaagi-holiday-card::after,
.holiday-review-row.yaagi-holiday-card::before,
.holiday-review-row.yaagi-holiday-card::after,
.holiday-edit-row.yaagi-holiday-card::before,
.holiday-edit-row.yaagi-holiday-card::after,
.vacation-admin-row::before,
.vacation-admin-row::after {
  display: none !important;
}

.yaagi-holiday-card-icon,
.arrangement-holiday-icon {
  display: none !important;
}

.yaagi-holiday-card-body,
.yaagi-holiday-card-content,
.holiday-review-row .holiday-review-content,
.holiday-edit-row .holiday-edit-content,
.vacation-admin-row > div:first-child {
  position: relative !important;
  z-index: 2 !important;
  width: min(420px, calc(100% - 28px)) !important;
  margin: 18px 0 18px 18px !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(8px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.1) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
}

.yaagi-holiday-card h3,
.yaagi-holiday-card strong,
.holiday-review-row strong,
.holiday-edit-row strong,
.vacation-admin-row strong {
  color: #071d49 !important;
  text-shadow: none !important;
}

.yaagi-holiday-card p,
.yaagi-holiday-card small,
.holiday-review-row p,
.holiday-edit-row p,
.vacation-admin-row p {
  color: #152238 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.holiday-theme-autumn,
.vacation-herfst {
  --holiday-bg: #c77838;
  --holiday-art: url("../assets/img/holiday-scene-autumn.svg");
}
.holiday-theme-christmas,
.vacation-kerst {
  --holiday-bg: #285777;
  --holiday-art: url("../assets/img/holiday-scene-christmas.svg");
}
.holiday-theme-carnival,
.vacation-krokus {
  --holiday-bg: #76b896;
  --holiday-art: url("../assets/img/holiday-scene-spring.svg");
}
.holiday-theme-easter,
.vacation-paas {
  --holiday-bg: #8fca8a;
  --holiday-art: url("../assets/img/holiday-scene-easter.svg");
}
.holiday-theme-spring {
  --holiday-bg: #76b896;
  --holiday-art: url("../assets/img/holiday-scene-spring.svg");
}
.holiday-theme-summer,
.vacation-zomer {
  --holiday-bg: #3fa9ce;
  --holiday-art: url("../assets/img/holiday-scene-summer.svg");
}
.holiday-theme-other,
.vacation-extra {
  --holiday-bg: #7b8ea5;
  --holiday-art: url("../assets/img/holiday-scene-other.svg");
}

@media (max-width: 640px) {
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card,
  .vacation-admin-row {
    min-height: 138px !important;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.86) 52%, rgba(255,255,255,.18) 100%),
      var(--holiday-art) !important;
  }

  .yaagi-holiday-card-body,
  .yaagi-holiday-card-content,
  .holiday-review-row .holiday-review-content,
  .holiday-edit-row .holiday-edit-content,
  .vacation-admin-row > div:first-child {
    width: min(340px, calc(100% - 24px)) !important;
    margin: 14px 0 14px 12px !important;
    padding: 14px 16px !important;
  }
}


/* ============================================================
   YAAGI 10.3 - mobile menu + dashboard polish
   ============================================================ */

/* Keep the mobile navigation simple: 5 real navigation items only.
   Language and Gold status move out of the bottom bar on small screens
   because they were compressing the menu and covering content. */
@media (max-width: 760px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 4px 6px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 0 !important;
    overflow: hidden !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -10px 26px rgba(15, 35, 75, .14) !important;
  }

  .bottom-nav .ps-nav-language-switcher,
  .bottom-nav .yaagi-nav-gold-status,
  .bottom-nav #yaagiGoldMenuStatus {
    display: none !important;
  }

  .bottom-nav a {
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 4px 2px !important;
    gap: 1px !important;
    overflow: hidden !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .bottom-nav a span,
  .bottom-nav span {
    display: block !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    font-size: clamp(8.5px, 2.45vw, 10.5px) !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }
}

/* Desktop/tablet dashboard: consistent width and fewer empty holes. */
.yaagi-dashboard-page .app {
  max-width: min(1180px, calc(100vw - 40px)) !important;
}

.yaagi-dashboard-page .dashboard-topbar {
  margin-bottom: 28px !important;
}

.yaagi-dashboard-page #launchFlow {
  width: 100% !important;
  margin-bottom: 18px !important;
}

.yaagi-dashboard-page .launch-single-step-card.dashboard-action-card {
  width: 100% !important;
}

.yaagi-dashboard-page .launch-ready-actions,
.yaagi-dashboard-page .launch-ready-actions-three {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.yaagi-dashboard-page .launch-ready-actions a,
.yaagi-dashboard-page .launch-ready-actions button {
  min-width: 0 !important;
  width: 100% !important;
}

.yaagi-dashboard-page .dashboard-action-card .small {
  margin-top: 4px !important;
}

/* Make dashboard cards occupy a stable grid instead of leaving large holes. */
.yaagi-dashboard-page .grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.yaagi-dashboard-page .dashboard-overview-card {
  margin-top: 0 !important;
}

.yaagi-dashboard-page .dashboard-coming-card {
  grid-column: span 1 !important;
}

.yaagi-dashboard-page .dashboard-quick-card {
  grid-column: span 1 !important;
}

.yaagi-dashboard-page .dashboard-activity-card,
.yaagi-dashboard-page .dashboard-latest-costs-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  align-self: stretch !important;
}

.yaagi-dashboard-page #dashboardActivity .empty-state,
.yaagi-dashboard-page #latestCosts .empty-state {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 74px !important;
  display: flex !important;
  align-items: center !important;
  white-space: normal !important;
  word-break: normal !important;
  line-height: 1.45 !important;
}

.yaagi-dashboard-page .dashboard-activity-card .list-item,
.yaagi-dashboard-page .dashboard-latest-costs-card .list-item {
  width: 100% !important;
}

@media (min-width: 900px) {
  .yaagi-dashboard-page .dashboard-today-card {
    grid-column: 1 / -1 !important;
  }

  .yaagi-dashboard-page .dashboard-overview-card,
  .yaagi-dashboard-page .dashboard-coming-card,
  .yaagi-dashboard-page .dashboard-activity-card,
  .yaagi-dashboard-page .dashboard-latest-costs-card {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 760px) {
  .yaagi-dashboard-page .app {
    max-width: 100% !important;
    padding: 14px 14px 92px !important;
  }

  .yaagi-dashboard-page .dashboard-topbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .yaagi-dashboard-page .dashboard-logo-panel {
    justify-self: center !important;
    width: min(260px, 78vw) !important;
    max-width: min(260px, 78vw) !important;
    margin: 0 auto !important;
    order: -1 !important;
  }

  .yaagi-dashboard-page .dashboard-header-copy {
    width: 100% !important;
  }

  .yaagi-dashboard-page .launch-ready-actions,
  .yaagi-dashboard-page .launch-ready-actions-three {
    grid-template-columns: 1fr !important;
  }

  .yaagi-dashboard-page .grid {
    grid-template-columns: 1fr !important;
  }

  .yaagi-dashboard-page .dashboard-activity-card,
  .yaagi-dashboard-page .dashboard-latest-costs-card {
    min-height: 0 !important;
  }
}

/* YAAGI 10.3 - holiday bars: full-width premium image cards, no childish left icons. */
.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card,
.vacation-admin-row {
  display: block !important;
  grid-template-columns: none !important;
  min-height: 142px !important;
  padding: 22px 24px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background-color: var(--holiday-bg, #5d738b) !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 34%, rgba(255,255,255,.34) 62%, rgba(255,255,255,.06) 100%),
    var(--holiday-art) !important;
  background-repeat: no-repeat !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 18px 42px rgba(15, 35, 75, .14) !important;
}

.yaagi-holiday-card-icon,
.arrangement-holiday-icon,
.vacation-icon {
  display: none !important;
}

.yaagi-holiday-card-content,
.vacation-title-block,
.holiday-review-row .vacation-title-block {
  max-width: min(430px, 54%) !important;
  min-width: 220px !important;
  position: relative !important;
  z-index: 2 !important;
}

.yaagi-holiday-card strong,
.vacation-title-block strong {
  color: #061c35 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
}

.yaagi-holiday-card p,
.yaagi-holiday-card small,
.vacation-subtitle {
  color: #24364d !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.45) !important;
}

@media (max-width: 640px) {
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card,
  .vacation-admin-row {
    min-height: 132px !important;
    padding: 18px 18px !important;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 54%, rgba(255,255,255,.18) 100%),
      var(--holiday-art) !important;
  }

  .yaagi-holiday-card-content,
  .vacation-title-block,
  .holiday-review-row .vacation-title-block {
    max-width: 72% !important;
    min-width: 0 !important;
  }
}


/* YAAGI 10.3 dashboard and mobile layout correction
   Goal: dashboard uses full page width; no skinny activity card; launch card actions are 3x2 on desktop. */
@media (min-width: 980px) {
  body.yaagi-dashboard-page .app {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    column-gap: 22px !important;
    row-gap: 22px !important;
  }

  body.yaagi-dashboard-page .launch-flow {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: auto !important;
  }

  body.yaagi-dashboard-page .launch-flow .launch-single-step-card {
    width: 100% !important;
    max-width: none !important;
    padding: 30px !important;
  }

  body.yaagi-dashboard-page .launch-ready-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
  }

  body.yaagi-dashboard-page .launch-ready-actions a,
  body.yaagi-dashboard-page .launch-ready-actions button {
    min-height: 56px !important;
    border-radius: 18px !important;
  }

  body.yaagi-dashboard-page .launch-premium-card {
    grid-column: 1 / -1 !important;
    height: auto !important;
  }

  body.yaagi-dashboard-page .app > .grid {
    grid-column: 1 / span 4 !important;
  }

  body.yaagi-dashboard-page .dashboard-overview-card {
    grid-column: 5 / -1 !important;
  }

  body.yaagi-dashboard-page .dashboard-coming-card {
    grid-column: 1 / span 7 !important;
  }

  body.yaagi-dashboard-page .dashboard-quick-card {
    grid-column: 8 / -1 !important;
  }

  body.yaagi-dashboard-page .dashboard-activity-card {
    grid-column: 1 / span 6 !important;
    width: 100% !important;
    min-height: 190px !important;
  }

  body.yaagi-dashboard-page .dashboard-latest-costs-card {
    grid-column: 7 / -1 !important;
    width: 100% !important;
    min-height: 190px !important;
  }
}

body.yaagi-dashboard-page .dashboard-activity-card .empty-state,
body.yaagi-dashboard-page .dashboard-latest-costs-card .empty-state {
  display: block !important;
  width: 100% !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  text-align: left !important;
}

body.yaagi-dashboard-page .dashboard-activity-card,
body.yaagi-dashboard-page .dashboard-latest-costs-card {
  overflow: visible !important;
}

body.yaagi-dashboard-page .dashboard-activity-card .list-item,
body.yaagi-dashboard-page .dashboard-latest-costs-card .list-item {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 979px) {
  body.yaagi-dashboard-page .launch-ready-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (max-width: 560px) {
  body.yaagi-dashboard-page .launch-ready-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile nav must never stack labels on top of each other. */
@media (max-width: 899px) {
  html body .bottom-nav {
    height: 72px !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 5px 4px max(5px, env(safe-area-inset-bottom)) !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    overflow: hidden !important;
  }

  html body .bottom-nav a {
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    gap: 2px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  html body .bottom-nav span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  html body .bottom-nav .yaagi-nav-gold-status,
  html body .bottom-nav .yaagi-nav-language,
  html body .bottom-nav .language-switcher {
    display: none !important;
  }
}

/* Hide the Gold promo card more aggressively when a user is already in trial, paid or admin mode. */
body.yaagi-subscription-active #launchPremiumCard,
body.yaagi-subscription-trial #launchPremiumCard,
body.yaagi-admin-account #launchPremiumCard {
  display: none !important;
}

/* ============================================================
   YAAGI 10.3 - stability fixes: dashboard width, mobile nav and holiday readability
   ============================================================ */
body.yaagi-dashboard-page .app {
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: min(1180px, calc(100vw - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.yaagi-dashboard-page #launchFlow,
body.yaagi-dashboard-page .launch-flow,
body.yaagi-dashboard-page .launch-flow .launch-single-step-card,
body.yaagi-dashboard-page .launch-single-step-card.dashboard-action-card {
  width: 100% !important;
  max-width: none !important;
}

body.yaagi-dashboard-page .launch-ready-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
}

body.yaagi-dashboard-page .launch-ready-actions a,
body.yaagi-dashboard-page .launch-ready-actions button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 54px !important;
  margin: 0 !important;
}

body.yaagi-dashboard-page .dashboard-activity-card,
body.yaagi-dashboard-page .dashboard-latest-costs-card {
  min-width: 0 !important;
  max-width: none !important;
  min-height: 190px !important;
}

body.yaagi-dashboard-page .dashboard-activity-card .list-item,
body.yaagi-dashboard-page .dashboard-latest-costs-card .list-item {
  align-items: flex-start !important;
  gap: 14px !important;
}

@media (min-width: 980px) {
  body.yaagi-dashboard-page .app {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
  body.yaagi-dashboard-page .topbar,
  body.yaagi-dashboard-page #launchFlow,
  body.yaagi-dashboard-page .launch-flow,
  body.yaagi-dashboard-page .launch-premium-card,
  body.yaagi-dashboard-page .dashboard-today-card {
    grid-column: 1 / -1 !important;
  }
  body.yaagi-dashboard-page .app > .grid {
    grid-column: 1 / span 4 !important;
  }
  body.yaagi-dashboard-page .dashboard-overview-card {
    grid-column: 5 / -1 !important;
  }
  body.yaagi-dashboard-page .dashboard-coming-card {
    grid-column: 1 / span 6 !important;
  }
  body.yaagi-dashboard-page .dashboard-quick-card {
    grid-column: 7 / -1 !important;
  }
  body.yaagi-dashboard-page .dashboard-activity-card {
    grid-column: 1 / span 6 !important;
  }
  body.yaagi-dashboard-page .dashboard-latest-costs-card {
    grid-column: 7 / -1 !important;
  }
}

@media (max-width: 760px) {
  body.yaagi-dashboard-page .app {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  body.yaagi-dashboard-page .launch-ready-actions {
    grid-template-columns: 1fr !important;
  }
  html body .bottom-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
  }
  html body .bottom-nav a:nth-of-type(n+6),
  html body .bottom-nav .ps-nav-language-switcher,
  html body .bottom-nav .yaagi-nav-gold-status,
  html body .bottom-nav #yaagiGoldMenuStatus {
    display: none !important;
  }
  html body .bottom-nav a {
    min-width: 0 !important;
    padding: 4px 2px !important;
  }
  html body .bottom-nav a span {
    font-size: clamp(8px, 2.35vw, 10.25px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card,
.vacation-admin-row,
.arrangement-holiday-block.yaagi-holiday-themed {
  overflow: hidden !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,.38) 68%, rgba(255,255,255,.06) 100%),
    var(--holiday-art) !important;
  background-size: cover, cover !important;
  background-position: center, center !important;
}

.arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-icon,
.yaagi-holiday-card-icon,
.vacation-icon {
  display: none !important;
}

.yaagi-holiday-card-content,
.yaagi-holiday-card-body,
.vacation-title-block,
.arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-header {
  width: min(460px, 60%) !important;
  max-width: min(460px, 60%) !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 12px 28px rgba(15,35,75,.12) !important;
}

@media (max-width: 640px) {
  .yaagi-holiday-card-content,
  .yaagi-holiday-card-body,
  .vacation-title-block,
  .arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-header {
    width: min(100%, 360px) !important;
    max-width: min(100%, 360px) !important;
  }
}


/* ============================================================
   YAAGI 10.3 - stable onboarding, menu and Gold gating
   ============================================================ */
html body .bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  overflow: hidden !important;
}
html body .bottom-nav a:nth-of-type(n+6),
html body .bottom-nav .ps-nav-language-switcher,
html body .bottom-nav .yaagi-nav-language,
html body .bottom-nav .language-switcher,
html body .bottom-nav .yaagi-nav-gold-status,
html body .bottom-nav #yaagiGoldMenuStatus {
  display: none !important;
}
html body .bottom-nav a {
  min-width: 0 !important;
  overflow: hidden !important;
}
html body .bottom-nav span {
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.yaagi-signup-plan-choice {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(217, 154, 0, 0.28);
  border-radius: 22px;
  background: linear-gradient(135deg, #fffaf0 0%, #ffffff 58%, #f6f8fb 100%);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
}
.yaagi-signup-video-frame {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18);
}
.yaagi-signup-preview-video {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}
.yaagi-signup-plan-grid,
.yaagi-price-grid-three {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.yaagi-signup-plan {
  width: 100%;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  padding: 15px;
  text-align: left;
  color: #102033;
  background: #ffffff;
  border: 1px solid #dbe5f0;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}
.yaagi-signup-plan span {
  font-weight: 950;
  color: #0A4EA3;
}
.yaagi-signup-plan strong {
  font-size: 1.05rem;
  line-height: 1.15;
}
.yaagi-signup-plan small {
  color: #667085;
  line-height: 1.35;
  font-weight: 750;
}
.yaagi-signup-plan.is-selected {
  border-color: rgba(217, 154, 0, .72);
  background: linear-gradient(135deg, #fff7db 0%, #ffffff 100%);
  box-shadow: 0 14px 32px rgba(132, 86, 10, .15);
}
.yaagi-gold-video-shell {
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.yaagi-gold-locked-page .app > .card:not(#yaagiGoldPageBanner),
.yaagi-gold-locked-page .app > .hero-card:not(#yaagiGoldPageBanner),
.yaagi-gold-locked-page .app > section:not(#yaagiGoldPageBanner):not(.topbar) {
  display: none !important;
}
.yaagi-gold-lock-card {
  display: block !important;
  border: 1px solid rgba(217, 154, 0, .34) !important;
  background: linear-gradient(135deg, #fff8df 0%, #ffffff 62%, #f8fbff 100%) !important;
}
.yaagi-gold-lock-card .yaagi-upsell-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.yaagi-gold-lock-card .yaagi-upsell-actions a {
  text-align: center;
  text-decoration: none;
}
@media (max-width: 760px) {
  .yaagi-signup-plan-grid,
  .yaagi-price-grid-three,
  .yaagi-gold-lock-card .yaagi-upsell-actions {
    grid-template-columns: 1fr !important;
  }
  .yaagi-signup-preview-video {
    max-height: 180px;
  }
}



/* YAAGI 10.3 - #o stability and layout fixes */
html body > .app,
html body .app{
  width: min(1180px, calc(100vw - 32px)) !important;
  max-width: min(1180px, calc(100vw - 32px)) !important;
}

html body .bottom-nav{
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
html body .bottom-nav a{
  min-width: 0 !important;
  overflow: hidden !important;
}
html body .bottom-nav a span{
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ps-global-language-switcher,
.yaagi-top-language-switcher{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 112px !important;
  max-width: 190px !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(203,213,225,.95) !important;
  box-shadow: 0 8px 22px rgba(15,23,42,.08) !important;
  color: #111827 !important;
}
.ps-global-language-switcher select,
.yaagi-top-language-switcher select{
  min-width: 88px !important;
  width: 100% !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background: #fff !important;
  border: 1px solid #dbe4f0 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}
.ps-header-controls{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-left:auto !important;
}
.topbar{
  width: 100% !important;
}
.dashboard-topbar{
  align-items: center !important;
  min-height: 96px !important;
}
.dashboard-header-copy{
  min-width: min(100%, 320px) !important;
}

body.yaagi-dashboard-page .app{
  display:grid !important;
  grid-template-columns: repeat(12, minmax(0,1fr)) !important;
  gap: 18px !important;
  align-items:start !important;
}
body.yaagi-dashboard-page .topbar,
body.yaagi-dashboard-page .launch-welcome,
body.yaagi-dashboard-page .launch-holiday-banner,
body.yaagi-dashboard-page .launch-flow,
body.yaagi-dashboard-page .launch-premium-card,
body.yaagi-dashboard-page .dashboard-today-card,
body.yaagi-dashboard-page .dashboard-overview-card{
  grid-column: 1 / -1 !important;
}
body.yaagi-dashboard-page .launch-single-step-card{
  width: 100% !important;
}
body.yaagi-dashboard-page .launch-ready-actions{
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
body.yaagi-dashboard-page .launch-ready-actions a,
body.yaagi-dashboard-page .launch-ready-actions button{
  min-height: 58px !important;
}
body.yaagi-dashboard-page .app > .grid{
  grid-column: 1 / -1 !important;
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 18px !important;
}
body.yaagi-dashboard-page .dashboard-coming-card{
  grid-column: 1 / -1 !important;
}
body.yaagi-dashboard-page .dashboard-quick-card{
  grid-column: 1 / -1 !important;
}
body.yaagi-dashboard-page .dashboard-activity-card{
  grid-column: 1 / span 6 !important;
}
body.yaagi-dashboard-page .dashboard-latest-costs-card{
  grid-column: 7 / -1 !important;
}
body.yaagi-dashboard-page .dashboard-activity-card,
body.yaagi-dashboard-page .dashboard-latest-costs-card{
  min-width: 0 !important;
  width: 100% !important;
}
body.yaagi-dashboard-page .dashboard-activity-card .list-item,
body.yaagi-dashboard-page .dashboard-latest-costs-card .list-item{
  align-items:flex-start !important;
}
body.yaagi-dashboard-page .empty-state{
  min-height: 72px !important;
  display:flex !important;
  align-items:center !important;
}
.yaagi-first-user-card{
  background:
    radial-gradient(circle at top right, rgba(45,127,249,.18), transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 20px 46px rgba(15,23,42,.10) !important;
}
.yaagi-first-user-steps{
  display:grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}
.yaagi-first-user-step{
  border: 1px solid #dbeafe !important;
  background:#fff !important;
  border-radius: 18px !important;
  padding: 14px !important;
}
.yaagi-first-user-step strong{
  display:block !important;
  color:#0A4EA3 !important;
  margin-bottom: 4px !important;
}

@media (max-width: 900px){
  html body > .app,
  html body .app{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.yaagi-dashboard-page .app{
    display:block !important;
  }
  body.yaagi-dashboard-page .launch-ready-actions,
  body.yaagi-dashboard-page .app > .grid,
  .yaagi-first-user-steps{
    grid-template-columns: 1fr !important;
  }
  .topbar .yaagi-top-language-switcher,
  .topbar .ps-global-language-switcher{
    margin-left: auto !important;
  }
}


/* YAAGI 10.3 subscription split pricing layout */
.subscription-page .yaagi-pricing-hero.yaagi-pricing-hero-split{
  background: linear-gradient(135deg,#0b1c32 0%,#102c4f 100%) !important;
}
.subscription-page .yaagi-pricing-hero.yaagi-pricing-hero-split .yaagi-pricing-split-layout{
  display:grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 420px) !important;
  gap: 28px !important;
  align-items:center !important;
}
.subscription-page .yaagi-pricing-copy-column{
  display:flex !important;
  flex-direction:column !important;
  gap: 14px !important;
  min-width:0 !important;
}
.subscription-page .yaagi-pricing-media-column{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.subscription-page .yaagi-pricing-choice-stack{
  display:flex !important;
  flex-direction:column !important;
  gap: 14px !important;
  margin-top: 6px !important;
}
.subscription-page .yaagi-pricing-choice-stack .yaagi-stacked-plan{
  width:100% !important;
  background:#ffffff !important;
  color:#102243 !important;
  border:1px solid #d6e1f0 !important;
  border-radius: 22px !important;
  padding: 18px 18px 16px !important;
  box-shadow: 0 14px 28px rgba(8,24,54,.14) !important;
}
.subscription-page .yaagi-pricing-choice-stack .yaagi-stacked-plan p,
.subscription-page .yaagi-pricing-choice-stack .yaagi-stacked-plan h2{
  color:#102243 !important;
  -webkit-text-fill-color:#102243 !important;
}
.subscription-page .yaagi-pricing-choice-stack .yaagi-stacked-plan h2{
  margin: 4px 0 6px !important;
  font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
}
.subscription-page .yaagi-pricing-choice-stack .yaagi-stacked-plan.is-highlight{
  border: 1px solid rgba(205,154,39,.56) !important;
  background: linear-gradient(180deg,#fffef8 0%,#fffaf0 100%) !important;
  box-shadow: 0 18px 36px rgba(196,150,42,.20) !important;
}
.subscription-page .yaagi-stacked-plan-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 10px !important;
  flex-wrap:wrap !important;
}
.subscription-page .yaagi-most-chosen-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,#fff6c9 0%,#e6b437 100%) !important;
  color:#102243 !important;
  -webkit-text-fill-color:#102243 !important;
  border:1px solid rgba(177,124,0,.32) !important;
  box-shadow:0 10px 22px rgba(192,132,0,.18) !important;
  font-weight:900 !important;
  font-size:.86rem !important;
  white-space:nowrap !important;
}
.subscription-page .yaagi-inline-pricing-note{
  display:flex !important;
  flex-direction:column !important;
  gap: 8px !important;
  margin-top: 10px !important;
}
.subscription-page .yaagi-inline-pricing-note h2{
  display:none !important;
}
.subscription-page .yaagi-pricing-media-column .yaagi-coffee-video-shell{
  width:min(100%, 390px) !important;
  max-width:390px !important;
  aspect-ratio: 10 / 16 !important;
  margin: 0 auto !important;
  border-radius: 28px !important;
}
.subscription-page .yaagi-pricing-media-column .yaagi-subscription-coffee-video{
  object-fit: cover !important;
}
.subscription-page .yaagi-pricing-options-card{
  display:none !important;
}
@media (max-width: 980px){
  .subscription-page .yaagi-pricing-hero.yaagi-pricing-hero-split .yaagi-pricing-split-layout{
    grid-template-columns: 1fr !important;
  }
  .subscription-page .yaagi-pricing-media-column{
    order:-1 !important;
  }
  .subscription-page .yaagi-pricing-media-column .yaagi-coffee-video-shell{
    width:min(100%, 340px) !important;
    max-width:340px !important;
  }
}


/* YAAGI 10.3 - stable desktop/mobile navigation and language selector */
@media (min-width: 761px) {
  html body {
    padding-top: 96px !important;
    padding-bottom: 28px !important;
  }

  html body .bottom-nav,
  html body.yaagi-dashboard-page .bottom-nav {
    position: fixed !important;
    top: 16px !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1040px, calc(100vw - 48px)) !important;
    max-width: min(1040px, calc(100vw - 48px)) !important;
    min-width: 0 !important;
    height: 74px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: visible !important;
    border: 1px solid rgba(203, 213, 225, .88) !important;
    border-radius: 999px !important;
    border-top: 1px solid rgba(203, 213, 225, .88) !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 18px 48px rgba(15,23,42,.11) !important;
    z-index: 9999 !important;
  }

  html body .bottom-nav a,
  html body.yaagi-dashboard-page .bottom-nav a {
    position: relative !important;
    flex: 0 1 auto !important;
    min-width: 118px !important;
    max-width: 150px !important;
    height: 52px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  html body .bottom-nav a span,
  html body.yaagi-dashboard-page .bottom-nav a span {
    display: inline !important;
    min-width: 0 !important;
    max-width: 112px !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 850 !important;
  }

  html body .bottom-nav a.active,
  html body.yaagi-dashboard-page .bottom-nav a.active {
    background: #eef5ff !important;
    color: #0A4EA3 !important;
  }

  html body .bottom-nav .ps-nav-language-switcher,
  html body .bottom-nav #parentSyncGlobalLanguageSwitcher,
  html body .bottom-nav .yaagi-nav-gold-status {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    min-width: 128px !important;
    max-width: 190px !important;
    height: 52px !important;
    margin: 0 0 0 auto !important;
    padding: 6px 10px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-radius: 999px !important;
  }

  html body .bottom-nav .yaagi-nav-gold-status + .ps-nav-language-switcher,
  html body .bottom-nav .ps-nav-language-switcher + .yaagi-nav-gold-status {
    margin-left: 8px !important;
  }
}

@media (max-width: 760px) {
  html body {
    padding-top: 0 !important;
    padding-bottom: 92px !important;
  }

  html body .bottom-nav,
  html body.yaagi-dashboard-page .bottom-nav {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 76px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    overflow: hidden !important;
  }

  html body .bottom-nav a {
    min-width: 0 !important;
    width: auto !important;
    height: 76px !important;
    flex-direction: column !important;
    padding: 0 4px !important;
    font-size: 18px !important;
    gap: 3px !important;
  }

  html body .bottom-nav a span {
    max-width: 100% !important;
    font-size: 11px !important;
    margin-top: 2px !important;
  }

  html body .bottom-nav #parentSyncGlobalLanguageSwitcher,
  html body .bottom-nav .ps-nav-language-switcher,
  html body .bottom-nav .yaagi-nav-gold-status {
    display: none !important;
  }

  .topbar .ps-header-controls,
  .topbar .yaagi-top-language-switcher,
  .topbar #parentSyncGlobalLanguageSwitcher {
    display: inline-flex !important;
    visibility: visible !important;
  }
}



/* YAAGI 10.3 - login onboarding split layout */
.yaagi-signup-plan-choice{
  padding: 18px !important;
  border: 1px solid rgba(217, 154, 0, 0.28) !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #fffaf0 0%, #ffffff 58%, #f6f8fb 100%) !important;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08) !important;
}
.yaagi-signup-split-layout{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px) !important;
  gap: 22px !important;
  align-items: start !important;
}
.yaagi-signup-plan-column{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.yaagi-signup-media-column{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
}
.yaagi-signup-video-frame{
  width: 100% !important;
  max-width: 380px !important;
  min-height: 100% !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #0b1220 !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .18) !important;
}
.yaagi-signup-preview-video{
  width: 100% !important;
  height: 100% !important;
  min-height: 520px !important;
  object-fit: cover !important;
  display: block !important;
}
.yaagi-signup-plan-grid.yaagi-signup-plan-stack{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-top: 4px !important;
}
.yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan{
  width: 100% !important;
  min-height: 108px !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: center !important;
  position: relative !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
}
.yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan span,
.yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan strong,
.yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan small{
  display: block !important;
  width: 100% !important;
}
.yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan strong{
  margin-top: 4px !important;
  font-size: 1.18rem !important;
}
.yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan small{
  margin-top: 6px !important;
}
.yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan.is-featured{
  border-color: rgba(189, 140, 16, 0.42) !important;
  box-shadow: 0 14px 28px rgba(192, 132, 0, 0.16) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff8ec 100%) !important;
}
.yaagi-signup-plan-badge{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,#fff6c9 0%,#e6b437 100%) !important;
  color:#102243 !important;
  border:1px solid rgba(177,124,0,.28) !important;
  box-shadow:0 8px 20px rgba(192,132,0,.16) !important;
  font-size: .8rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
@media (max-width: 980px){
  .yaagi-signup-split-layout{
    grid-template-columns: 1fr !important;
  }
  .yaagi-signup-media-column{
    order: -1 !important;
    justify-content: center !important;
  }
  .yaagi-signup-video-frame{
    max-width: 340px !important;
    margin: 0 auto !important;
  }
  .yaagi-signup-preview-video{
    min-height: 420px !important;
  }
}



/* YAAGI 10.3 - login onboarding, menu and language fixes */
body.login-page{
  padding-top: 18px !important;
}
body.login-page .login-shell{
  width: min(1120px, calc(100vw - 32px)) !important;
}
body.login-page .topbar{
  display:flex !important;
  align-items:center !important;
  gap: 18px !important;
}
body.login-page .topbar .ps-header-controls{
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
body.login-page .login-top-nav{
  position: static !important;
  transform:none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 14px 0 18px !important;
  display:grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
  border-radius: 999px !important;
}
body.login-page .login-top-nav a{
  min-width:0 !important;
  justify-content:center !important;
}
body.login-page .login-top-nav a span{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.login-page .ps-global-language-switcher,
body.login-page .yaagi-top-language-switcher{
  display:inline-flex !important;
  visibility:visible !important;
}
body.login-page .signup-plus-choice.yaagi-signup-plan-choice{
  padding: 20px !important;
}
body.login-page .yaagi-signup-split-layout{
  display:grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px) !important;
  gap: 22px !important;
  align-items: stretch !important;
}
body.login-page .yaagi-signup-plan-column{
  display:flex !important;
  flex-direction:column !important;
  gap: 12px !important;
  min-width:0 !important;
}
body.login-page .yaagi-signup-media-column{
  display:flex !important;
  align-items:stretch !important;
  justify-content:flex-end !important;
  min-height: 100% !important;
}
body.login-page .yaagi-signup-video-frame{
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 390px !important;
  border-radius: 22px !important;
}
body.login-page .yaagi-signup-preview-video{
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 22px !important;
}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack{
  display:grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan{
  border: 1px solid #dbe5f0 !important;
  background: #ffffff !important;
  color: #102243 !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan:hover,
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan:focus-visible{
  background: linear-gradient(135deg, #fff7db 0%, #f4d06a 55%, #d99a00 100%) !important;
  border-color: rgba(177,124,0,.72) !important;
  color:#102243 !important;
  box-shadow: 0 18px 36px rgba(177,124,0,.22) !important;
  transform: translateY(-1px) !important;
}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan:hover span,
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan:hover strong,
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan:hover small,
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan:focus-visible span,
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan:focus-visible strong,
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan:focus-visible small{
  color:#102243 !important;
  -webkit-text-fill-color:#102243 !important;
}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan.is-featured{
  position: relative !important;
  padding-top: 18px !important;
  border-color: rgba(189, 140, 16, 0.46) !important;
  background: linear-gradient(180deg, #fffef8 0%, #fff8ec 100%) !important;
}
body.login-page .yaagi-signup-plan-badge{
  position: static !important;
  display:inline-flex !important;
  width: auto !important;
  max-width: fit-content !important;
  margin: 0 0 6px 0 !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg,#fff6c9 0%,#e6b437 100%) !important;
  color:#102243 !important;
  -webkit-text-fill-color:#102243 !important;
  border:1px solid rgba(177,124,0,.32) !important;
  box-shadow:0 8px 18px rgba(192,132,0,.16) !important;
  font-size: .8rem !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}
body.login-page .login-tab:hover,
body.login-page .login-tab:focus-visible{
  background: linear-gradient(135deg, #fff7db 0%, #e6b437 100%) !important;
  border-color: rgba(177,124,0,.62) !important;
  color:#102243 !important;
}
@media (max-width: 980px){
  body.login-page .yaagi-signup-split-layout{
    grid-template-columns: 1fr !important;
  }
  body.login-page .yaagi-signup-media-column{
    order:-1 !important;
    justify-content:center !important;
  }
  body.login-page .yaagi-signup-video-frame{
    max-width: 340px !important;
    height: 420px !important;
  }
  body.login-page .yaagi-signup-preview-video{
    height: 420px !important;
  }
}
@media (max-width: 760px){
  body.login-page{
    padding-bottom: 86px !important;
  }
  body.login-page .login-top-nav{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 22px 22px 0 0 !important;
    z-index: 1000 !important;
  }
  body.login-page .login-top-nav a{
    font-size: 12px !important;
  }
}



/* YAAGI 10.3 final login menu and pricing override */
html body.login-page .bottom-nav.login-top-nav{
  position: static !important;
  transform:none !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:100% !important;
  max-width:none !important;
  margin:14px 0 18px 0 !important;
}
html body.login-page .yaagi-signup-plan-stack .yaagi-signup-plan:hover,
html body.login-page .yaagi-signup-plan-stack .yaagi-signup-plan:focus-visible,
html body.login-page .yaagi-signup-plan-stack .yaagi-signup-plan.is-featured:hover,
html body.login-page .yaagi-signup-plan-stack .yaagi-signup-plan.is-featured:focus-visible{
  background:linear-gradient(135deg,#fff7db 0%,#f4d06a 55%,#d99a00 100%) !important;
  color:#102243 !important;
  border-color:rgba(177,124,0,.72) !important;
}
html body.login-page .yaagi-signup-plan-badge{
  position:static !important;
  width:auto !important;
  max-width:fit-content !important;
  margin:0 0 6px 0 !important;
}
@media (max-width:760px){
  html body.login-page .bottom-nav.login-top-nav{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    margin:0 !important;
  }
}

/* YAAGI 10.3 - stable login navigation, independent from the app bottom nav */
body.login-page {
  padding-bottom: 32px !important;
}

body.login-page #loginLanguageNote {
  display: none !important;
}

body.login-page .login-page-nav-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 14px 0 18px !important;
}

body.login-page .login-page-nav {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px !important;
  border: 1px solid rgba(15, 35, 75, .10) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08) !important;
  z-index: auto !important;
}

body.login-page .login-page-nav-link {
  min-width: 0 !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

body.login-page .login-page-nav-link:hover,
body.login-page .login-page-nav-link:focus-visible {
  background: linear-gradient(135deg, #fff7db 0%, #f4d06a 55%, #d99a00 100%) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  box-shadow: 0 12px 24px rgba(177, 124, 0, .20) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

body.login-page .login-page-nav-link span {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.login-page .login-language-select {
  flex: 0 0 auto !important;
  min-width: 220px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  z-index: 2 !important;
}

body.login-page .login-language-select .ps-global-language-switcher {
  width: 220px !important;
  max-width: 220px !important;
  min-width: 220px !important;
  margin: 0 !important;
}

body.login-page .login-language-select .ps-global-language-switcher select {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  background-color: rgba(255, 255, 255, .98) !important;
}

@media (max-width: 760px) {
  body.login-page {
    padding-bottom: 32px !important;
  }

  body.login-page .login-page-nav-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 12px 0 16px !important;
  }

  body.login-page .login-language-select {
    order: -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }

  body.login-page .login-language-select .ps-global-language-switcher {
    width: min(220px, 100%) !important;
    max-width: 220px !important;
    min-width: min(176px, 100%) !important;
  }

  body.login-page .login-page-nav {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    border-radius: 22px !important;
    padding: 8px !important;
  }

  body.login-page .login-page-nav-link {
    min-height: 42px !important;
    padding: 8px 4px !important;
    font-size: 12px !important;
  }
}




/* YAAGI 10.3 - login language selector integrated into menu */
body.login-page .login-page-nav-row{
  display:block !important;
  width:100% !important;
  margin:14px 0 18px !important;
}
body.login-page .login-page-nav{
  display:grid !important;
  grid-template-columns: repeat(5, minmax(110px, 1fr)) minmax(170px, 220px) !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
}
body.login-page .login-page-nav-language,
body.login-page .login-language-select{
  min-width:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:stretch !important;
}
body.login-page .login-page-nav-language .ps-global-language-switcher{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:44px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:999px !important;
  box-shadow:none !important;
  background:transparent !important;
  border:0 !important;
}
body.login-page .login-page-nav-language .ps-global-language-icon{
  display:none !important;
}
body.login-page .login-page-nav-language select,
body.login-page .login-page-nav-language .ps-global-language-select{
  width:100% !important;
  height:44px !important;
  min-width:0 !important;
  max-width:none !important;
  border-radius:999px !important;
  border:0 !important;
  background:transparent !important;
  color:#102243 !important;
  -webkit-text-fill-color:#102243 !important;
  font-weight:850 !important;
  text-align:center !important;
  text-align-last:center !important;
  padding:0 18px !important;
  cursor:pointer !important;
}
body.login-page .login-page-nav-language:hover,
body.login-page .login-page-nav-language:focus-within{
  background:rgba(239,246,255,.95) !important;
  border-radius:999px !important;
}
@media (max-width: 900px){
  body.login-page .login-page-nav{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.login-page .login-page-nav-language{
    grid-column:1 / -1 !important;
  }
}
@media (max-width: 560px){
  body.login-page .login-page-nav{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}



/* YAAGI 10.3 - clear selected signup plan */
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan.is-selected{
  background: linear-gradient(135deg, #fff7db 0%, #f4d06a 58%, #d99a00 100%) !important;
  border: 2px solid rgba(177,124,0,.85) !important;
  color:#102243 !important;
  box-shadow: 0 18px 38px rgba(177,124,0,.24) !important;
  transform: translateY(-1px) !important;
}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan.is-selected span,
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan.is-selected strong,
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan.is-selected small{
  color:#102243 !important;
  -webkit-text-fill-color:#102243 !important;
}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan.is-selected::after{
  content:"Gekozen";
  position:absolute;
  right:14px;
  bottom:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:#102243;
  font-weight:950;
  font-size:.78rem;
  box-shadow:0 8px 16px rgba(15,23,42,.10);
}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan.is-featured .yaagi-signup-plan-badge{
  background:rgba(255,255,255,.90) !important;
}



/* YAAGI 10.3 - wider desktop navigation and success note */
@media (min-width: 900px) {
  html body .bottom-nav,
  html body .bottom-nav.has-yaagi-language-switcher,
  html body .bottom-nav.has-yaagi-gold-status,
  html body .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    width: min(1240px, calc(100vw - 72px)) !important;
    max-width: min(1240px, calc(100vw - 72px)) !important;
  }

  html body .bottom-nav.has-yaagi-language-switcher {
    grid-template-columns: repeat(5, minmax(100px, 1fr)) minmax(150px, 170px) !important;
  }

  html body .bottom-nav.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(100px, 1fr)) minmax(158px, 180px) !important;
  }

  html body .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(100px, 1fr)) minmax(150px, 170px) minmax(158px, 180px) !important;
  }

  html body .bottom-nav a span {
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .bottom-nav .ps-nav-language-switcher {
    min-width: 148px !important;
    max-width: 170px !important;
    width: 100% !important;
  }

  html body .bottom-nav .ps-nav-language-switcher select {
    width: 132px !important;
    max-width: 132px !important;
  }

  html body .bottom-nav .yaagi-nav-gold-status {
    min-width: 154px !important;
    max-width: 176px !important;
  }
}

.yaagi-success-link-note.is-logged-in-note,
#subscriptionSuccessLoginNote.is-logged-in-note {
  background: #ecfdf3 !important;
  border-color: #b7efc5 !important;
  color: #075e2a !important;
}



/* YAAGI 10.3 login cleanup and registration order */
[hidden],
.login-status[hidden],
#loginTopStatus[hidden] {
  display: none !important;
}

body.login-page .topbar .ps-header-title-block > p.small,
body.login-page .topbar .ps-header-title-block > h1 {
  display: none !important;
}

body.login-page .topbar {
  justify-content: space-between !important;
  align-items: center !important;
}

body.login-page .topbar .ps-user-badge {
  margin: 0 !important;
  align-self: flex-start !important;
}

body.login-page .login-page-nav {
  box-shadow: 0 18px 42px rgba(15, 23, 42, .10) !important;
}

body.login-page .login-page-nav-language,
body.login-page .login-page-nav-language .ps-global-language-switcher,
body.login-page .login-page-nav-language select {
  border-radius: 999px !important;
}

body.login-page .login-page-nav-language {
  border: 1px solid rgba(15,35,75,.12) !important;
}

.bottom-nav a:hover,
.bottom-nav a:focus-visible {
  background: linear-gradient(135deg, #fff7db 0%, #f4d06a 58%, #d99a00 100%) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  border-radius: 999px !important;
}

body.login-page .yaagi-signup-step-title {
  margin: 8px 0 8px;
  color: #8a5b00;
  font-weight: 950;
  letter-spacing: .08em;
  font-size: .82rem;
  text-transform: uppercase;
}

body.login-page .signup-plus-choice {
  margin-top: 8px !important;
  margin-bottom: 18px !important;
}

body.login-page .yaagi-signup-split-layout {
  align-items: stretch !important;
  gap: 18px !important;
}

body.login-page .yaagi-signup-plan {
  min-height: 76px !important;
  padding: 12px 14px !important;
}

body.login-page .yaagi-signup-plan strong {
  font-size: 1rem !important;
}

body.login-page .yaagi-signup-plan small {
  line-height: 1.35 !important;
}

body.login-page .yaagi-signup-video-frame {
  min-height: 360px !important;
  height: 100% !important;
}

@media (min-width: 900px) {
  body.login-page .signup-setup-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.login-page .yaagi-signup-video-frame {
    min-height: 260px !important;
  }
}



/* YAAGI 10.3 - unified app menu and login menu polish */
:root {
  --yaagi-menu-bg: rgba(255, 255, 255, .94);
  --yaagi-menu-border: rgba(15, 35, 75, .12);
  --yaagi-menu-shadow: 0 18px 44px rgba(15, 23, 42, .14);
  --yaagi-menu-gold: linear-gradient(135deg, #fff8dd 0%, #f6d66f 45%, #dfa72c 72%, #b77900 100%);
  --yaagi-menu-gold-soft: linear-gradient(135deg, #fff9e8 0%, #f8df88 56%, #d9a424 100%);
}

html body .bottom-nav,
body.login-page .login-page-nav,
body.email-confirmed-page .login-page-nav {
  background: var(--yaagi-menu-bg) !important;
  border: 1px solid var(--yaagi-menu-border) !important;
  box-shadow: var(--yaagi-menu-shadow) !important;
  backdrop-filter: blur(16px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.25) !important;
}

html body .bottom-nav a,
body.login-page .login-page-nav-link,
body.email-confirmed-page .login-page-nav-link {
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

html body .bottom-nav a:hover,
html body .bottom-nav a:focus-visible,
body.login-page .login-page-nav-link:hover,
body.login-page .login-page-nav-link:focus-visible,
body.email-confirmed-page .login-page-nav-link:hover,
body.email-confirmed-page .login-page-nav-link:focus-visible {
  background: var(--yaagi-menu-gold) !important;
  border-color: rgba(173, 119, 0, .42) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 10px 20px rgba(173,119,0,.18) !important;
}

html body .bottom-nav a.active,
body.login-page .login-page-nav-link.active,
body.email-confirmed-page .login-page-nav-link.active {
  background: var(--yaagi-menu-gold-soft) !important;
  border-color: rgba(173, 119, 0, .36) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 9px 18px rgba(173,119,0,.14) !important;
}

html body .bottom-nav a span,
body.login-page .login-page-nav-link span,
body.email-confirmed-page .login-page-nav-link span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
}

html body .bottom-nav .ps-nav-language-switcher,
html body .bottom-nav #parentSyncGlobalLanguageSwitcher,
body.login-page .login-page-nav-language .ps-global-language-switcher,
body.email-confirmed-page .login-page-nav-language .ps-global-language-switcher {
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(15,35,75,.14) !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
}

html body .bottom-nav .ps-global-language-icon,
body.login-page .login-page-nav-language .ps-global-language-icon,
body.email-confirmed-page .login-page-nav-language .ps-global-language-icon {
  display: none !important;
}

html body .bottom-nav .ps-global-language-select,
html body .bottom-nav select,
body.login-page .login-page-nav-language select,
body.login-page .login-page-nav-language .ps-global-language-select,
body.email-confirmed-page .login-page-nav-language select,
body.email-confirmed-page .login-page-nav-language .ps-global-language-select {
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

html body .bottom-nav .yaagi-nav-gold-status,
html body .bottom-nav #yaagiGoldMenuStatus {
  pointer-events: none !important;
  cursor: default !important;
  border-radius: 999px !important;
  border: 1px solid rgba(173,119,0,.30) !important;
  background: linear-gradient(135deg, rgba(255,249,225,.98), rgba(246,211,111,.92) 58%, rgba(213,151,0,.88)) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 12px 24px rgba(173,119,0,.18) !important;
}

html body .bottom-nav .yaagi-nav-gold-status span,
html body .bottom-nav #yaagiGoldMenuStatus span {
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body.login-page .topbar > div:first-child > p.small,
body.login-page .topbar > div:first-child > h1 {
  display: none !important;
}

body.login-page .topbar > div:first-child {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  align-items: center !important;
}

body.login-page .topbar .ps-user-badge {
  max-width: min(360px, 100%) !important;
  margin: 0 !important;
  align-self: center !important;
}

body.login-page .login-header-actions {
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

@media (min-width: 900px) {
  html body .bottom-nav,
  html body .bottom-nav.has-yaagi-language-switcher,
  html body .bottom-nav.has-yaagi-gold-status,
  html body .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: min(1240px, calc(100vw - 48px)) !important;
    max-width: min(1240px, calc(100vw - 48px)) !important;
    min-height: 64px !important;
    height: 64px !important;
    padding: 9px 12px !important;
    overflow: visible !important;
    border-radius: 999px !important;
  }

  html body .bottom-nav a {
    display: inline-flex !important;
    flex: 0 1 136px !important;
    min-width: 112px !important;
    max-width: 156px !important;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .bottom-nav a span {
    display: inline !important;
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html body .bottom-nav .ps-nav-language-switcher,
  html body .bottom-nav #parentSyncGlobalLanguageSwitcher {
    display: inline-flex !important;
    flex: 0 0 clamp(168px, 15vw, 220px) !important;
    order: 50 !important;
    width: clamp(168px, 15vw, 220px) !important;
    min-width: 168px !important;
    max-width: 220px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: stretch !important;
  }

  html body .bottom-nav .ps-nav-language-switcher select,
  html body .bottom-nav #parentSyncGlobalLanguageSwitcher select,
  html body .bottom-nav .ps-global-language-select {
    width: 100% !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    text-align: center !important;
    text-align-last: center !important;
  }

  html body .bottom-nav .yaagi-nav-gold-status,
  html body .bottom-nav #yaagiGoldMenuStatus {
    display: inline-flex !important;
    flex: 0 0 clamp(170px, 16vw, 220px) !important;
    order: 60 !important;
    width: clamp(170px, 16vw, 220px) !important;
    min-width: 170px !important;
    max-width: 220px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body .bottom-nav .yaagi-nav-gold-status img,
  html body .bottom-nav #yaagiGoldMenuStatus img {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
  }

  body.login-page .login-page-nav,
  body.email-confirmed-page .login-page-nav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(112px, 1fr)) minmax(168px, 220px) !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 64px !important;
    height: auto !important;
    padding: 9px 12px !important;
    overflow: visible !important;
    border-radius: 999px !important;
  }

  body.login-page .login-page-nav-link,
  body.email-confirmed-page .login-page-nav-link {
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.login-page .login-page-nav-language,
  body.email-confirmed-page .login-page-nav-language {
    min-width: 0 !important;
    width: 100% !important;
    height: 44px !important;
  }

  body.login-page .login-page-nav-language .ps-global-language-switcher,
  body.email-confirmed-page .login-page-nav-language .ps-global-language-switcher {
    width: 100% !important;
    max-width: none !important;
    height: 44px !important;
    padding: 0 !important;
  }
}

@media (max-width: 899px) {
  html body:not(.login-page):not(.email-confirmed-page) .app {
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body .bottom-nav,
  html body .bottom-nav.has-yaagi-language-switcher,
  html body .bottom-nav.has-yaagi-gold-status,
  html body .bottom-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 4px !important;
    row-gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 112px !important;
    height: auto !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: hidden !important;
    border-radius: 22px 22px 0 0 !important;
  }

  html body .bottom-nav a {
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 4px !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  html body .bottom-nav a span {
    display: inline-block !important;
    max-width: 100% !important;
    font-size: clamp(9px, 2.45vw, 11px) !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }

  html body .bottom-nav .ps-nav-language-switcher,
  html body .bottom-nav #parentSyncGlobalLanguageSwitcher {
    display: inline-flex !important;
    grid-column: 1 / -1 !important;
    order: 50 !important;
    justify-self: center !important;
    align-self: center !important;
    width: min(270px, 92vw) !important;
    min-width: 0 !important;
    max-width: min(270px, 92vw) !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: stretch !important;
  }

  html body .bottom-nav .ps-nav-language-switcher select,
  html body .bottom-nav #parentSyncGlobalLanguageSwitcher select,
  html body .bottom-nav .ps-global-language-select {
    width: 100% !important;
    max-width: none !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    text-align: center !important;
    text-align-last: center !important;
    font-size: 12px !important;
  }

  html body .bottom-nav .yaagi-nav-gold-status,
  html body .bottom-nav #yaagiGoldMenuStatus {
    display: none !important;
  }

  body.login-page .login-page-nav,
  body.email-confirmed-page .login-page-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 9px !important;
    border-radius: 24px !important;
  }

  body.login-page .login-page-nav-link,
  body.email-confirmed-page .login-page-nav-link {
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  body.login-page .login-page-nav-language,
  body.email-confirmed-page .login-page-nav-language {
    grid-column: 1 / -1 !important;
    height: 38px !important;
  }

  body.login-page .login-page-nav-language .ps-global-language-switcher,
  body.email-confirmed-page .login-page-nav-language .ps-global-language-switcher,
  body.login-page .login-page-nav-language select,
  body.email-confirmed-page .login-page-nav-language select {
    height: 38px !important;
    min-height: 38px !important;
  }
}

@media (max-width: 560px) {
  body.login-page .login-page-nav,
  body.email-confirmed-page .login-page-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}



/* YAAGI 10.3 - real redesigned signup layout */
body.login-page #signupPanel.yaagi-signup-redesigned {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 22px !important;
  overflow: visible !important;
}

body.login-page #signupPanel.yaagi-signup-redesigned > h2 {
  margin-bottom: 4px !important;
}

body.login-page #signupPanel.yaagi-signup-redesigned > p.muted {
  margin-bottom: 14px !important;
}

body.login-page .yaagi-signup-layout-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 360px) !important;
  gap: 18px !important;
  align-items: stretch !important;
  padding: 18px !important;
  border: 1px solid rgba(217, 154, 0, .28) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 96% 8%, rgba(244,211,109,.22), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,251,255,.96)) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08) !important;
}

body.login-page .yaagi-signup-main-column {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body.login-page .yaagi-signup-step-title {
  width: fit-content !important;
  margin: 0 0 2px !important;
  padding: 7px 13px !important;
  border-radius: 999px !important;
  background: rgba(255, 248, 223, .96) !important;
  border: 1px solid rgba(217, 154, 0, .30) !important;
  color: #7a4b00 !important;
  font-weight: 950 !important;
  font-size: .78rem !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body.login-page .yaagi-signup-redesigned .signup-plus-choice {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-column {
  width: 100% !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-plus-kicker {
  margin: 0 0 4px !important;
  font-size: .74rem !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-intro {
  margin: 0 0 8px !important;
  color: #475569 !important;
  font-size: .88rem !important;
  line-height: 1.35 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-grid {
  gap: 8px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  min-height: 64px !important;
  padding: 10px 12px !important;
  border-radius: 15px !important;
  gap: 2px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge) {
  font-size: .82rem !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong {
  font-size: .98rem !important;
  line-height: 1.15 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small {
  font-size: .76rem !important;
  line-height: 1.25 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected::after {
  right: 10px !important;
  bottom: 8px !important;
  padding: 5px 8px !important;
  font-size: .68rem !important;
}

body.login-page .yaagi-signup-redesigned #signupPlusMessage {
  margin: 7px 0 0 !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
}

body.login-page .yaagi-signup-credentials-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: end !important;
  margin-top: 2px !important;
}

body.login-page .yaagi-signup-credentials-grid > div:first-child {
  grid-column: 1 / -1 !important;
}

body.login-page .yaagi-signup-password-toggle {
  grid-column: 1 / -1 !important;
  margin: -2px 0 0 !important;
}

body.login-page .yaagi-signup-redesigned label {
  margin-bottom: 4px !important;
  font-size: .84rem !important;
}

body.login-page .yaagi-signup-redesigned input,
body.login-page .yaagi-signup-redesigned select {
  min-height: 42px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: .92rem !important;
}

body.login-page .yaagi-signup-redesigned .signup-explain,
body.login-page .yaagi-signup-redesigned .signup-legal-note {
  padding: 10px 12px !important;
  border-radius: 14px !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
}

body.login-page .yaagi-signup-redesigned .signup-setup-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  margin-top: 0 !important;
}

body.login-page .yaagi-signup-redesigned .signup-setup-grid .full {
  grid-column: 1 / -1 !important;
}

body.login-page .yaagi-signup-submit-row {
  margin-top: 2px !important;
  justify-content: flex-start !important;
}

body.login-page .yaagi-signup-submit-row button {
  width: auto !important;
  min-width: 190px !important;
}

body.login-page .yaagi-signup-media-sticky {
  min-width: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
  width: 100% !important;
  min-height: 100% !important;
  height: auto !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  align-self: stretch !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-preview-video {
  height: 100% !important;
  min-height: 520px !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 980px) {
  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-media-sticky {
    order: 2 !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-preview-video {
    min-height: 320px !important;
  }
}

@media (max-width: 620px) {
  body.login-page #signupPanel.yaagi-signup-redesigned {
    padding: 16px !important;
  }

  body.login-page .yaagi-signup-layout-card {
    padding: 14px !important;
    border-radius: 22px !important;
  }

  body.login-page .yaagi-signup-credentials-grid,
  body.login-page .yaagi-signup-redesigned .signup-setup-grid {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-preview-video {
    min-height: 260px !important;
  }

  body.login-page .yaagi-signup-submit-row button {
    width: 100% !important;
  }
}



/* YAAGI 10.3 - corrected signup layout proportions and badge alignment */
body.login-page .topbar {
  width: min(1240px, calc(100vw - 72px)) !important;
  max-width: min(1240px, calc(100vw - 72px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
}

body.login-page .topbar .ps-header-title-block {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-width: 0 !important;
  width: 100% !important;
}

body.login-page .topbar .ps-user-badge {
  margin: 0 !important;
  align-self: center !important;
  justify-self: start !important;
}

body.login-page .topbar .ps-header-controls {
  justify-self: end !important;
  margin-left: 0 !important;
}

body.login-page #signupPanel.yaagi-signup-redesigned {
  max-width: 1120px !important;
  padding: 20px !important;
}

body.login-page #signupPanel.yaagi-signup-redesigned > h2,
body.login-page #signupPanel.yaagi-signup-redesigned > p.muted {
  max-width: 100% !important;
}

body.login-page .yaagi-signup-layout-card {
  grid-template-columns: minmax(0, 1fr) minmax(230px, 292px) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 14px !important;
  border-radius: 22px !important;
}

body.login-page .yaagi-signup-main-column {
  gap: 8px !important;
}

body.login-page .yaagi-signup-step-title {
  margin: 0 0 1px !important;
  padding: 5px 11px !important;
  font-size: .72rem !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-plus-kicker,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-intro {
  display: inline !important;
  margin-right: 8px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-plus-kicker {
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 248, 223, .88) !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-intro {
  font-size: .78rem !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-grid {
  margin-top: 8px !important;
  gap: 6px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  display: grid !important;
  grid-template-columns: minmax(92px, .55fr) minmax(0, 1fr) auto !important;
  grid-template-areas:
    "price title badge"
    "price text chosen" !important;
  align-items: center !important;
  column-gap: 8px !important;
  row-gap: 1px !important;
  min-height: 46px !important;
  padding: 8px 10px !important;
  border-radius: 13px !important;
  text-align: left !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge) {
  grid-area: price !important;
  font-size: .77rem !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong {
  grid-area: title !important;
  font-size: .92rem !important;
  line-height: 1.05 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small {
  grid-area: text !important;
  font-size: .68rem !important;
  line-height: 1.18 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-badge {
  grid-area: badge !important;
  position: static !important;
  justify-self: end !important;
  align-self: center !important;
  padding: 4px 7px !important;
  font-size: .64rem !important;
  white-space: nowrap !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected::after {
  grid-area: chosen !important;
  content: "Gekozen" !important;
  position: static !important;
  justify-self: end !important;
  align-self: center !important;
  padding: 4px 7px !important;
  font-size: .62rem !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

body.login-page .yaagi-signup-redesigned #signupPlusMessage {
  margin: 5px 0 0 !important;
  font-size: .72rem !important;
}

body.login-page .yaagi-signup-credentials-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, .95fr) !important;
  gap: 8px !important;
  align-items: end !important;
}

body.login-page .yaagi-signup-credentials-grid > div:first-child {
  grid-column: auto !important;
}

body.login-page .yaagi-signup-password-toggle {
  grid-column: 1 / -1 !important;
  margin-top: -4px !important;
}

body.login-page .yaagi-signup-redesigned .signup-setup-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 10px !important;
}

body.login-page .yaagi-signup-redesigned .signup-setup-grid .yaagi-court-field {
  grid-column: auto !important;
}

body.login-page .yaagi-signup-redesigned label {
  font-size: .78rem !important;
  margin-bottom: 3px !important;
}

body.login-page .yaagi-signup-redesigned input,
body.login-page .yaagi-signup-redesigned select {
  min-height: 38px !important;
  padding: 7px 10px !important;
  font-size: .86rem !important;
  border-radius: 12px !important;
}

body.login-page .yaagi-signup-redesigned .signup-explain,
body.login-page .yaagi-signup-redesigned .signup-legal-note {
  padding: 8px 10px !important;
  font-size: .75rem !important;
  line-height: 1.28 !important;
  border-radius: 12px !important;
}

body.login-page .yaagi-signup-submit-row {
  margin-top: 0 !important;
}

body.login-page .yaagi-signup-submit-row button {
  min-width: 170px !important;
  min-height: 40px !important;
  padding: 9px 16px !important;
}

body.login-page .yaagi-signup-media-sticky {
  align-self: start !important;
  justify-self: stretch !important;
  max-width: 292px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 520px !important;
  border-radius: 20px !important;
  background: #0f172a !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-preview-video {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (min-width: 981px) {
  body.login-page .yaagi-signup-redesigned .signup-setup-grid .full:not(.signup-legal-note) {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 980px) {
  body.login-page .topbar {
    width: min(100%, calc(100vw - 32px)) !important;
  }

  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-media-sticky {
    max-width: 320px !important;
    justify-self: center !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    max-height: 430px !important;
  }

  body.login-page .yaagi-signup-credentials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.login-page .yaagi-signup-credentials-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 620px) {
  body.login-page .topbar {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.login-page .topbar .ps-header-controls {
    justify-self: start !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "price badge"
      "title chosen"
      "text text" !important;
  }

  body.login-page .yaagi-signup-credentials-grid,
  body.login-page .yaagi-signup-redesigned .signup-setup-grid {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-redesigned .signup-setup-grid .yaagi-court-field {
    grid-column: 1 / -1 !important;
  }

  body.login-page .yaagi-signup-media-sticky {
    max-width: 260px !important;
  }
}



/* YAAGI 10.3 - narrower signup form, compact choices and taller non-stretched phone */
body.login-page #signupPanel.yaagi-signup-redesigned {
  max-width: 980px !important;
  padding: 18px !important;
}

body.login-page #signupPanel.yaagi-signup-redesigned > h2 {
  display: inline-block !important;
  margin-right: 12px !important;
}

body.login-page #signupPanel.yaagi-signup-redesigned > p.muted {
  display: inline !important;
  font-size: .9rem !important;
}

body.login-page .yaagi-signup-layout-card {
  margin-top: 12px !important;
  grid-template-columns: minmax(0, 58%) minmax(250px, 38%) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 14px !important;
}

body.login-page .yaagi-signup-step-title,
body.login-page .yaagi-signup-redesigned .yaagi-plus-kicker,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-intro {
  display: inline-flex !important;
  vertical-align: middle !important;
}

body.login-page .yaagi-signup-step-title {
  margin-right: 8px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-plus-kicker {
  margin: 0 8px 0 0 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-intro {
  margin: 0 !important;
  max-width: 320px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-grid {
  max-width: 100% !important;
  margin-top: 7px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  min-height: 38px !important;
  padding: 6px 8px !important;
  border-radius: 11px !important;
  grid-template-columns: 86px minmax(0, 1fr) auto !important;
  column-gap: 7px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge) {
  font-size: .70rem !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong {
  font-size: .83rem !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small {
  font-size: .62rem !important;
  line-height: 1.1 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-badge,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected::after {
  padding: 3px 6px !important;
  font-size: .58rem !important;
}

body.login-page .yaagi-signup-redesigned #signupPlusMessage {
  font-size: .68rem !important;
  margin-top: 4px !important;
}

body.login-page .yaagi-signup-credentials-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

body.login-page .yaagi-signup-credentials-grid > div:first-child {
  grid-column: 1 / -1 !important;
}

body.login-page .yaagi-signup-password-toggle {
  grid-column: auto !important;
  align-self: end !important;
  min-height: 38px !important;
  display: flex !important;
  align-items: center !important;
  padding-top: 18px !important;
  margin: 0 !important;
}

body.login-page .yaagi-signup-redesigned .signup-setup-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 7px 9px !important;
}

body.login-page .yaagi-signup-redesigned input,
body.login-page .yaagi-signup-redesigned select {
  min-height: 35px !important;
  padding: 6px 9px !important;
  font-size: .82rem !important;
}

body.login-page .yaagi-signup-redesigned label {
  font-size: .74rem !important;
  margin-bottom: 2px !important;
}

body.login-page .yaagi-signup-redesigned .signup-explain,
body.login-page .yaagi-signup-redesigned .signup-legal-note {
  padding: 7px 9px !important;
  font-size: .70rem !important;
}

body.login-page .yaagi-signup-submit-row button {
  min-height: 37px !important;
  padding: 8px 14px !important;
}

body.login-page .yaagi-signup-media-sticky {
  max-width: 330px !important;
  width: 100% !important;
  justify-self: stretch !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
  width: 100% !important;
  aspect-ratio: 9 / 16 !important;
  max-height: 620px !important;
  min-height: 500px !important;
  height: auto !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-preview-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (min-width: 981px) {
  body.login-page .yaagi-signup-redesigned .signup-setup-grid .yaagi-court-field {
    grid-column: auto !important;
  }
}

@media (max-width: 980px) {
  body.login-page #signupPanel.yaagi-signup-redesigned {
    max-width: min(720px, calc(100vw - 24px)) !important;
  }

  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-media-sticky {
    max-width: 300px !important;
    justify-self: center !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    min-height: 0 !important;
    max-height: 460px !important;
  }
}

@media (max-width: 620px) {
  body.login-page #signupPanel.yaagi-signup-redesigned > h2,
  body.login-page #signupPanel.yaagi-signup-redesigned > p.muted {
    display: block !important;
  }

  body.login-page .yaagi-signup-credentials-grid,
  body.login-page .yaagi-signup-redesigned .signup-setup-grid {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-password-toggle {
    padding-top: 0 !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
    grid-template-columns: 1fr auto !important;
  }
}



/* YAAGI 10.3 - final login/signup alignment and unified floating menu */
:root {
  --yaagi-app-container: min(1120px, calc(100vw - 56px));
  --yaagi-menu-height: 58px;
  --yaagi-menu-radius: 999px;
}

body.login-page main.app,
body.login-page .app {
  width: var(--yaagi-app-container) !important;
  max-width: var(--yaagi-app-container) !important;
}

body.login-page .topbar,
body.login-page .login-page-nav-row,
body.login-page .hero-card,
body.login-page .card,
body.login-page #signupPanel.yaagi-signup-redesigned {
  width: 100% !important;
  max-width: 100% !important;
}

body.login-page .login-page-nav-row {
  position: sticky !important;
  top: 14px !important;
  z-index: 30 !important;
  margin: 14px 0 18px !important;
  filter: drop-shadow(0 18px 32px rgba(15,23,42,.12)) !important;
}

body.login-page .login-page-nav {
  min-height: var(--yaagi-menu-height) !important;
  padding: 7px !important;
  border-radius: var(--yaagi-menu-radius) !important;
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(15,35,75,.08) !important;
  box-shadow: 0 16px 38px rgba(15,23,42,.10) !important;
  grid-template-columns: repeat(5, minmax(102px, 1fr)) minmax(176px, 220px) !important;
  gap: 6px !important;
  align-items: center !important;
}

body.login-page .login-page-nav-link,
body.login-page .bottom-nav a {
  min-height: 44px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  text-decoration: none !important;
}

body.login-page .login-page-nav-link .nav-icon,
body.login-page .bottom-nav .nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  font-size: .94rem !important;
  opacity: .82 !important;
}

body.login-page .login-page-nav-link:hover,
body.login-page .login-page-nav-link:focus-visible,
body.login-page .bottom-nav a:hover,
body.login-page .bottom-nav a:focus-visible {
  background: linear-gradient(135deg, #fff7db 0%, #f4d06a 58%, #d99a00 100%) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  transform: translateY(-1px) !important;
}

body.login-page .login-page-nav-language {
  min-height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.76) !important;
  border: 1px solid rgba(15,35,75,.10) !important;
}

body.login-page .login-page-nav-language select,
body.login-page .login-page-nav-language .ps-global-language-select {
  height: 44px !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
}

body.login-page #signupPanel.yaagi-signup-redesigned {
  padding: 18px !important;
}

body.login-page .yaagi-signup-layout-card {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 50%) !important;
  gap: 14px !important;
  align-items: stretch !important;
  padding: 14px !important;
  margin-top: 0 !important;
}

body.login-page .yaagi-signup-main-column {
  min-width: 0 !important;
  gap: 8px !important;
}

body.login-page .yaagi-signup-heading-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(217,154,0,.22) !important;
}

body.login-page .yaagi-signup-heading-card h2 {
  margin: 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.1 !important;
}

body.login-page .yaagi-signup-heading-card p {
  margin: 2px 0 0 !important;
  font-size: .72rem !important;
  line-height: 1.25 !important;
}

body.login-page .yaagi-signup-step-title {
  margin: 0 !important;
  white-space: nowrap !important;
  padding: 5px 9px !important;
  font-size: .67rem !important;
}

body.login-page .yaagi-signup-plan-heading {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 0 6px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-plus-kicker {
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: .62rem !important;
  padding: 3px 7px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-intro {
  margin: 0 !important;
  font-size: .68rem !important;
  line-height: 1.18 !important;
  color: #475569 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-grid {
  gap: 5px !important;
  margin-top: 0 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  min-height: 34px !important;
  padding: 5px 7px !important;
  border-radius: 10px !important;
  grid-template-columns: 76px minmax(0, 1fr) auto !important;
  column-gap: 6px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge) {
  font-size: .64rem !important;
  line-height: 1 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong {
  font-size: .76rem !important;
  line-height: 1 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small {
  font-size: .57rem !important;
  line-height: 1.08 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-badge,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected::after {
  padding: 2px 5px !important;
  font-size: .52rem !important;
}

body.login-page .yaagi-signup-redesigned #signupPlusMessage {
  font-size: .62rem !important;
  margin: 3px 0 0 !important;
  line-height: 1.15 !important;
}

body.login-page .yaagi-signup-credentials-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 7px !important;
}

body.login-page .yaagi-signup-credentials-grid > div:first-child {
  grid-column: auto !important;
}

body.login-page .yaagi-signup-password-toggle {
  grid-column: auto !important;
  min-height: 34px !important;
  align-self: end !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

body.login-page .yaagi-password-confirm-field {
  grid-column: auto !important;
}

body.login-page .yaagi-signup-redesigned label {
  font-size: .68rem !important;
  margin-bottom: 2px !important;
}

body.login-page .yaagi-signup-redesigned input,
body.login-page .yaagi-signup-redesigned select {
  min-height: 32px !important;
  padding: 5px 8px !important;
  font-size: .76rem !important;
  border-radius: 10px !important;
}

body.login-page .yaagi-signup-redesigned .signup-explain,
body.login-page .yaagi-signup-redesigned .signup-legal-note {
  padding: 6px 8px !important;
  font-size: .64rem !important;
  line-height: 1.18 !important;
  border-radius: 10px !important;
}

body.login-page .yaagi-signup-redesigned .signup-setup-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
}

body.login-page .yaagi-signup-redesigned .signup-setup-grid .yaagi-court-field {
  grid-column: auto !important;
}

body.login-page .yaagi-signup-submit-row {
  margin: 1px 0 0 !important;
}

body.login-page .yaagi-signup-submit-row button {
  min-height: 34px !important;
  min-width: 150px !important;
  padding: 7px 12px !important;
  font-size: .78rem !important;
}

body.login-page .yaagi-signup-media-sticky {
  max-width: none !important;
  width: 100% !important;
  align-self: stretch !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 540px !important;
  max-height: 700px !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 20px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-preview-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 1100px) {
  :root { --yaagi-app-container: min(980px, calc(100vw - 32px)); }

  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 46%) !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    min-height: 500px !important;
  }
}

@media (max-width: 860px) {
  body.login-page .login-page-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-radius: 28px !important;
  }

  body.login-page .login-page-nav-language {
    grid-column: 1 / -1 !important;
  }

  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-media-sticky {
    max-width: 280px !important;
    justify-self: center !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    min-height: 0 !important;
    max-height: 460px !important;
  }
}

@media (max-width: 620px) {
  body.login-page .yaagi-signup-heading-card,
  body.login-page .yaagi-signup-credentials-grid,
  body.login-page .yaagi-signup-redesigned .signup-setup-grid {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-plan-heading {
    display: block !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-plus-kicker {
    display: inline-flex !important;
    margin-bottom: 4px !important;
  }
}



/* YAAGI 10.3 - final signup field grid, menu consistency and app nav sizing */
:root {
  --yaagi-layout-width: min(1180px, calc(100vw - 72px));
  --yaagi-nav-width: min(1180px, calc(100vw - 72px));
}

/* App-wide top/floating menu: compact, evenly distributed */
@media (min-width: 821px) {
  html body .bottom-nav {
    position: sticky !important;
    top: 18px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--yaagi-nav-width) !important;
    max-width: var(--yaagi-nav-width) !important;
    min-height: 56px !important;
    height: auto !important;
    margin: 18px auto 22px !important;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(190px, 230px) !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid rgba(15,35,75,.08) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.88) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
    z-index: 40 !important;
  }

  html body .bottom-nav a {
    min-height: 42px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: .92rem !important;
    font-weight: 850 !important;
    color: #102243 !important;
    -webkit-text-fill-color: #102243 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  html body .bottom-nav span:not(.ps-recovered-icon):not(.ps-global-language-icon) {
    font-size: .92rem !important;
    font-weight: 850 !important;
    margin: 0 !important;
  }

  html body .bottom-nav .ps-nav-icon,
  html body .bottom-nav .ps-recovered-icon {
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .95rem !important;
  }

  html body .bottom-nav a.active,
  html body .bottom-nav a:hover,
  html body .bottom-nav a:focus-visible {
    background: linear-gradient(135deg, #fff7db 0%, #f4d06a 58%, #d99a00 100%) !important;
    color: #102243 !important;
    -webkit-text-fill-color: #102243 !important;
  }

  html body .bottom-nav .ps-nav-language-switcher {
    min-width: 190px !important;
    max-width: 230px !important;
    width: 100% !important;
    justify-self: end !important;
    min-height: 42px !important;
    border-radius: 999px !important;
  }
}

/* Login uses same visual menu and same icons */
body.login-page main.app,
body.login-page .app,
body.login-page .login-shell {
  width: var(--yaagi-layout-width) !important;
  max-width: var(--yaagi-layout-width) !important;
}

body.login-page .login-page-nav-row {
  width: 100% !important;
  margin: 18px auto 22px !important;
  position: sticky !important;
  top: 18px !important;
  z-index: 40 !important;
}

body.login-page .login-page-nav {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 56px !important;
  padding: 7px !important;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(190px, 230px) !important;
  gap: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,35,75,.08) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
}

body.login-page .login-page-nav-link {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
}

body.login-page .login-page-nav-link .nav-icon {
  width: 18px !important;
  height: 18px !important;
  font-size: .95rem !important;
  line-height: 1 !important;
}

body.login-page .login-page-nav-language {
  min-height: 42px !important;
  min-width: 190px !important;
  max-width: 230px !important;
  justify-self: end !important;
  border-radius: 999px !important;
}

body.login-page .login-page-nav-language select,
body.login-page .login-page-nav-language .ps-global-language-select {
  height: 42px !important;
}

/* Signup card: same width as text cards; info block above buttons */
body.login-page #signupPanel.yaagi-signup-redesigned {
  width: 100% !important;
  max-width: 100% !important;
  padding: 18px !important;
}

body.login-page .yaagi-signup-layout-card {
  grid-template-columns: minmax(0, 1fr) minmax(430px, 50%) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 14px !important;
  padding: 14px !important;
  align-items: stretch !important;
}

body.login-page .yaagi-signup-heading-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 9px 11px !important;
  margin-bottom: 0 !important;
  border: 1px solid rgba(217,154,0,.24) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,.95) !important;
}

body.login-page .yaagi-signup-heading-card h2 {
  margin: 0 !important;
  font-size: 1.05rem !important;
  line-height: 1.05 !important;
}

body.login-page .yaagi-signup-heading-card p {
  margin: 3px 0 0 !important;
  font-size: .68rem !important;
  line-height: 1.18 !important;
}

body.login-page .yaagi-signup-step-title {
  align-self: center !important;
  white-space: nowrap !important;
  padding: 5px 9px !important;
  font-size: .66rem !important;
}

body.login-page .yaagi-signup-plan-heading {
  display: grid !important;
  grid-template-columns: auto minmax(0,1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  margin: 0 0 5px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-plus-kicker {
  white-space: nowrap !important;
  font-size: .60rem !important;
  padding: 3px 7px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-intro {
  font-size: .64rem !important;
  line-height: 1.12 !important;
}

/* Buttons: clearly clickable but very compact */
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-grid {
  gap: 5px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  min-height: 32px !important;
  padding: 5px 7px !important;
  grid-template-columns: 76px minmax(0, 1fr) auto !important;
  column-gap: 6px !important;
  border-radius: 10px !important;
  border-width: 1px !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.04) !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge) {
  font-size: .62rem !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong {
  font-size: .74rem !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small {
  font-size: .55rem !important;
  line-height: 1.05 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-badge,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected::after {
  font-size: .50rem !important;
  padding: 2px 5px !important;
}

body.login-page .yaagi-signup-redesigned #signupPlusMessage {
  margin-top: 3px !important;
  font-size: .60rem !important;
}

/* Credentials: email, password, repeat password on one row; show password below */
body.login-page .yaagi-signup-credentials-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px 8px !important;
}

body.login-page .yaagi-signup-credentials-grid > div:first-child,
body.login-page .yaagi-password-confirm-field {
  grid-column: auto !important;
}

body.login-page .yaagi-signup-password-toggle {
  grid-column: 1 / -1 !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: -2px 0 0 !important;
  align-self: start !important;
}

/* Profile: aanhef, voornaam, achternaam, rol on one row */
body.login-page .yaagi-signup-redesigned .signup-setup-grid {
  grid-template-columns: .72fr 1fr 1fr .82fr !important;
  gap: 6px 7px !important;
}

body.login-page .yaagi-field-title { order: 1 !important; }
body.login-page .yaagi-field-firstname { order: 2 !important; }
body.login-page .yaagi-field-lastname { order: 3 !important; }
body.login-page .yaagi-field-role { order: 4 !important; }
body.login-page .yaagi-field-country { order: 5 !important; grid-column: span 2 !important; }
body.login-page .yaagi-field-region { order: 6 !important; grid-column: span 2 !important; }
body.login-page .signup-legal-note { order: 7 !important; grid-column: 1 / -1 !important; }
body.login-page .yaagi-court-field { order: 8 !important; grid-column: span 2 !important; }
body.login-page #signupCourtOtherWrap { order: 9 !important; grid-column: 1 / -1 !important; }
body.login-page #signupNotaryNote { order: 10 !important; grid-column: 1 / -1 !important; }

body.login-page .yaagi-signup-redesigned label {
  font-size: .64rem !important;
  margin-bottom: 1px !important;
}

body.login-page .yaagi-signup-redesigned input,
body.login-page .yaagi-signup-redesigned select {
  min-height: 30px !important;
  padding: 4px 7px !important;
  font-size: .72rem !important;
  border-radius: 9px !important;
}

body.login-page .yaagi-signup-redesigned .signup-explain,
body.login-page .yaagi-signup-redesigned .signup-legal-note {
  padding: 6px 7px !important;
  font-size: .60rem !important;
  line-height: 1.15 !important;
}

body.login-page .yaagi-signup-submit-row button {
  min-height: 32px !important;
  min-width: 146px !important;
  font-size: .74rem !important;
  padding: 6px 12px !important;
}

/* Bigger phone/video, not stretched */
body.login-page .yaagi-signup-media-sticky {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
  width: 100% !important;
  height: 100% !important;
  min-height: 600px !important;
  max-height: 760px !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-preview-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 1180px) {
  :root {
    --yaagi-layout-width: min(1080px, calc(100vw - 44px));
    --yaagi-nav-width: min(1080px, calc(100vw - 44px));
  }

  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 48%) !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    min-height: 560px !important;
  }
}

@media (max-width: 930px) {
  body.login-page .login-page-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    border-radius: 28px !important;
  }

  body.login-page .login-page-nav-language {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    max-width: none !important;
  }

  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-media-sticky {
    max-width: 340px !important;
    justify-self: center !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    min-height: 0 !important;
    max-height: 520px !important;
  }

  body.login-page .yaagi-signup-redesigned .signup-setup-grid,
  body.login-page .yaagi-signup-credentials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  :root {
    --yaagi-layout-width: min(100%, calc(100vw - 24px));
    --yaagi-nav-width: min(100%, calc(100vw - 24px));
  }

  body.login-page .yaagi-signup-heading-card,
  body.login-page .yaagi-signup-plan-heading,
  body.login-page .yaagi-signup-redesigned .signup-setup-grid,
  body.login-page .yaagi-signup-credentials-grid {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-field-country,
  body.login-page .yaagi-field-region,
  body.login-page .yaagi-court-field {
    grid-column: 1 / -1 !important;
  }
}



/* YAAGI 10.3 - separate signup info card and final 50/50 balance */
body.login-page .yaagi-signup-info-card {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr) !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(217,154,0,.24) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(244,211,109,.14), transparent 28%),
    rgba(255,255,255,.94) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.07) !important;
}

body.login-page .yaagi-signup-info-card h2 {
  margin: 0 0 4px !important;
  font-size: 1.35rem !important;
  line-height: 1.08 !important;
}

body.login-page .yaagi-signup-info-card p {
  margin: 0 !important;
  line-height: 1.38 !important;
  color: #31445d !important;
}

body.login-page .yaagi-signup-info-step {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "step title"
    "step text" !important;
  gap: 3px 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: rgba(255,248,223,.82) !important;
  border: 1px solid rgba(217,154,0,.22) !important;
}

body.login-page .yaagi-signup-info-step .yaagi-signup-step-title {
  grid-area: step !important;
}

body.login-page .yaagi-signup-info-step strong {
  grid-area: title !important;
  color: #7a4b00 !important;
  font-size: .84rem !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

body.login-page .yaagi-signup-info-step p {
  grid-area: text !important;
  font-size: .86rem !important;
}

body.login-page #signupPanel.yaagi-signup-redesigned {
  padding: 14px !important;
}

body.login-page .yaagi-signup-layout-card {
  grid-template-columns: minmax(0, 1fr) minmax(440px, 50%) !important;
  gap: 16px !important;
  padding: 12px !important;
}

body.login-page .yaagi-signup-main-column {
  gap: 8px !important;
}

/* Hide old in-card heading if older CSS still targets it */
body.login-page #signupPanel .yaagi-signup-heading-card,
body.login-page #signupPanel .yaagi-signup-plan-heading {
  display: none !important;
}

/* Stronger, equal-height button appearance */
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  min-height: 50px !important;
  height: 50px !important;
  padding: 8px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15,35,75,.14) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: 0 9px 20px rgba(15,23,42,.07) !important;
  grid-template-columns: 92px minmax(0,1fr) auto !important;
  column-gap: 8px !important;
  cursor: pointer !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:hover,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:focus-visible,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected {
  background: linear-gradient(135deg, #fff7db 0%, #f4d06a 58%, #d99a00 100%) !important;
  border-color: rgba(177,124,0,.75) !important;
  box-shadow: 0 14px 28px rgba(177,124,0,.22) !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge) {
  font-size: .72rem !important;
  line-height: 1.08 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong {
  font-size: .86rem !important;
  line-height: 1.08 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small {
  font-size: .64rem !important;
  line-height: 1.12 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-badge,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected::after {
  font-size: .58rem !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
}

body.login-page .yaagi-signup-redesigned #signupPlusMessage {
  font-size: .68rem !important;
  margin-top: 5px !important;
}

/* Credentials: email + password on first row, repeat below; show password immediately below */
body.login-page .yaagi-signup-credentials-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 7px 9px !important;
}

body.login-page .yaagi-signup-credentials-grid > div:first-child {
  grid-column: auto !important;
}

body.login-page .yaagi-password-confirm-field {
  grid-column: 1 / 2 !important;
}

body.login-page .yaagi-signup-password-toggle {
  grid-column: 2 / 3 !important;
  align-self: end !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
}

/* Profile grid: first line 4 fields, court fields exactly half width */
body.login-page .yaagi-signup-redesigned .signup-setup-grid {
  grid-template-columns: .72fr 1fr 1fr .82fr !important;
  gap: 7px 8px !important;
}

body.login-page .yaagi-field-title { grid-column: 1 / 2 !important; }
body.login-page .yaagi-field-firstname { grid-column: 2 / 3 !important; }
body.login-page .yaagi-field-lastname { grid-column: 3 / 4 !important; }
body.login-page .yaagi-field-role { grid-column: 4 / 5 !important; }

body.login-page .yaagi-field-country { grid-column: 1 / 3 !important; }
body.login-page .yaagi-field-region { grid-column: 3 / 5 !important; }

body.login-page .signup-legal-note {
  grid-column: 1 / -1 !important;
}

body.login-page .yaagi-court-field {
  grid-column: span 2 !important;
  min-width: 0 !important;
}

body.login-page .yaagi-court-field:nth-of-type(8) {
  grid-column: 1 / 3 !important;
}

body.login-page .yaagi-court-field:nth-of-type(9) {
  grid-column: 3 / 5 !important;
}

body.login-page .yaagi-signup-redesigned label {
  font-size: .70rem !important;
}

body.login-page .yaagi-signup-redesigned input,
body.login-page .yaagi-signup-redesigned select {
  min-height: 34px !important;
  font-size: .78rem !important;
}

body.login-page .yaagi-signup-redesigned .signup-explain,
body.login-page .yaagi-signup-redesigned .signup-legal-note {
  font-size: .66rem !important;
  line-height: 1.18 !important;
}

/* Slightly larger phone: real 50/50, taller, no stretching */
body.login-page .yaagi-signup-media-sticky {
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
  width: 100% !important;
  min-height: 640px !important;
  max-height: 780px !important;
  height: 100% !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 22px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-preview-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 1120px) {
  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: minmax(0,1fr) minmax(380px, 48%) !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    min-height: 590px !important;
  }
}

@media (max-width: 940px) {
  body.login-page .yaagi-signup-info-card,
  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-media-sticky {
    max-width: 340px !important;
    justify-self: center !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    min-height: 0 !important;
    max-height: 540px !important;
  }

  body.login-page .yaagi-signup-redesigned .signup-setup-grid,
  body.login-page .yaagi-signup-credentials-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }

  body.login-page .yaagi-field-title,
  body.login-page .yaagi-field-firstname,
  body.login-page .yaagi-field-lastname,
  body.login-page .yaagi-field-role,
  body.login-page .yaagi-field-country,
  body.login-page .yaagi-field-region,
  body.login-page .yaagi-court-field,
  body.login-page .yaagi-password-confirm-field,
  body.login-page .yaagi-signup-password-toggle {
    grid-column: auto !important;
  }
}

@media (max-width: 620px) {
  body.login-page .yaagi-signup-info-card,
  body.login-page .yaagi-signup-info-step,
  body.login-page .yaagi-signup-redesigned .signup-setup-grid,
  body.login-page .yaagi-signup-credentials-grid {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-info-step {
    grid-template-areas:
      "step"
      "title"
      "text" !important;
  }

  body.login-page .yaagi-field-title,
  body.login-page .yaagi-field-firstname,
  body.login-page .yaagi-field-lastname,
  body.login-page .yaagi-field-role,
  body.login-page .yaagi-field-country,
  body.login-page .yaagi-field-region,
  body.login-page .yaagi-court-field,
  body.login-page .yaagi-password-confirm-field,
  body.login-page .yaagi-signup-password-toggle {
    grid-column: 1 / -1 !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
    height: auto !important;
    min-height: 54px !important;
    grid-template-columns: 1fr auto !important;
  }
}



/* YAAGI 10.3 - final signup visual polish */
body.login-page .yaagi-signup-layout-card {
  grid-template-columns: minmax(0, 0.96fr) minmax(470px, 1.04fr) !important;
  gap: 10px !important;
  padding: 12px !important;
}

/* Remove the visual frame around the plan-choice group */
body.login-page .signup-plus-choice,
body.login-page .yaagi-signup-redesigned .signup-plus-choice,
body.login-page .yaagi-signup-plan-choice,
body.login-page .yaagi-signup-plan-column {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Make the three choices clearly look like equal buttons */
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  height: 54px !important;
  min-height: 54px !important;
  padding: 8px 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15, 35, 75, .16) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  box-shadow:
    0 10px 22px rgba(15, 23, 42, .08),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) 86px !important;
  grid-template-areas:
    "price title badge"
    "price text chosen" !important;
  align-items: center !important;
  column-gap: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge) {
  grid-area: price !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  min-width: 108px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: rgba(238, 246, 255, .92) !important;
  color: #0b2b55 !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong {
  grid-area: title !important;
  font-size: .88rem !important;
  line-height: 1.08 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small {
  grid-area: text !important;
  font-size: .64rem !important;
  line-height: 1.12 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-badge {
  grid-area: badge !important;
  justify-self: end !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected::after {
  grid-area: chosen !important;
  justify-self: end !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:hover,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:focus-visible,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected {
  background: linear-gradient(135deg, #fff7db 0%, #f4d06a 58%, #d99a00 100%) !important;
  border-color: rgba(177,124,0,.76) !important;
  box-shadow:
    0 16px 30px rgba(177,124,0,.22),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:hover > span:not(.yaagi-signup-plan-badge),
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:focus-visible > span:not(.yaagi-signup-plan-badge),
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected > span:not(.yaagi-signup-plan-badge) {
  background: rgba(255,255,255,.88) !important;
}

/* Bring the phone closer and make it larger */
body.login-page .yaagi-signup-media-sticky {
  align-self: stretch !important;
  width: 100% !important;
  max-width: none !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
  width: 100% !important;
  min-height: 690px !important;
  max-height: 820px !important;
  height: 100% !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 22px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-preview-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Court fields: exact half/half across the full form width */
body.login-page .yaagi-signup-redesigned .signup-setup-grid {
  grid-template-columns: .72fr 1fr 1fr .82fr !important;
}

body.login-page .yaagi-court-field {
  min-width: 0 !important;
  width: 100% !important;
}

body.login-page .yaagi-court-field:nth-of-type(8),
body.login-page .signup-setup-grid > .yaagi-court-field:first-of-type {
  grid-column: 1 / 3 !important;
}

body.login-page .yaagi-court-field:nth-of-type(9),
body.login-page .signup-setup-grid > .yaagi-court-field:last-of-type {
  grid-column: 3 / 5 !important;
}

body.login-page .yaagi-court-field input,
body.login-page .yaagi-court-field select {
  width: 100% !important;
}

/* Keep password confirmation below email/password */
body.login-page .yaagi-signup-credentials-grid {
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
}

body.login-page .yaagi-signup-credentials-grid > div:first-child,
body.login-page .yaagi-signup-credentials-grid > div:nth-child(2) {
  grid-column: auto !important;
}

body.login-page .yaagi-password-confirm-field {
  grid-column: 1 / 2 !important;
}

body.login-page .yaagi-signup-password-toggle {
  grid-column: 2 / 3 !important;
  align-self: end !important;
}

@media (max-width: 1120px) {
  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 48%) !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    min-height: 620px !important;
  }
}

@media (max-width: 940px) {
  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-media-sticky {
    max-width: 360px !important;
    justify-self: center !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    min-height: 0 !important;
    max-height: 560px !important;
  }

  body.login-page .yaagi-court-field,
  body.login-page .yaagi-court-field:nth-of-type(8),
  body.login-page .yaagi-court-field:nth-of-type(9) {
    grid-column: auto !important;
  }
}

@media (max-width: 620px) {
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
    height: auto !important;
    min-height: 62px !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "price"
      "title"
      "text"
      "badge"
      "chosen" !important;
    text-align: center !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge),
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-badge,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected::after {
    justify-self: center !important;
  }

  body.login-page .yaagi-password-confirm-field,
  body.login-page .yaagi-signup-password-toggle,
  body.login-page .yaagi-court-field {
    grid-column: 1 / -1 !important;
  }
}

/* YAAGI 10.3 - signup layout correction requested after 9.34 */
@media (min-width: 941px) {
  body.login-page .yaagi-signup-layout-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 49%) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  body.login-page .yaagi-signup-main-column {
    min-width: 0 !important;
    padding-right: 4px !important;
  }

  body.login-page .yaagi-signup-media-sticky {
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    width: 100% !important;
    max-width: none !important;
    min-height: 760px !important;
    height: 100% !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
}

/* Taller plan buttons with clean, unframed price text */
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  height: auto !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  grid-template-columns: 128px minmax(0, 1fr) 92px !important;
  column-gap: 12px !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge) {
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: .82rem !important;
  line-height: 1.15 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:hover > span:not(.yaagi-signup-plan-badge),
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:focus-visible > span:not(.yaagi-signup-plan-badge),
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected > span:not(.yaagi-signup-plan-badge) {
  background: transparent !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong {
  font-size: .94rem !important;
  line-height: 1.15 !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small {
  font-size: .70rem !important;
  line-height: 1.2 !important;
}

/* Registration form fields use an even two-column rhythm, including both court fields */
body.login-page .yaagi-signup-redesigned .signup-setup-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 14px !important;
}

body.login-page .signup-setup-grid > .yaagi-court-field:first-of-type,
body.login-page .signup-setup-grid > .yaagi-court-field:last-of-type {
  grid-column: auto !important;
  width: 100% !important;
}

/* Full-width gold account creation action up to the video column */
body.login-page .yaagi-signup-submit-row {
  width: 100% !important;
  display: block !important;
}

body.login-page .yaagi-signup-submit-row button,
body.login-page #signupBtn {
  width: 100% !important;
  max-width: none !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #fff1a8 0%, #e6b437 45%, #c88900 100%) !important;
  border: 1px solid rgba(151, 103, 0, .72) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  font-weight: 950 !important;
  box-shadow: 0 14px 30px rgba(177, 124, 0, .26) !important;
}

body.login-page .yaagi-signup-submit-row button:hover,
body.login-page .yaagi-signup-submit-row button:focus-visible,
body.login-page #signupBtn:hover,
body.login-page #signupBtn:focus-visible {
  background: linear-gradient(135deg, #fff6c9 0%, #f0c958 45%, #d99a00 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 18px 34px rgba(177, 124, 0, .32) !important;
}

@media (max-width: 940px) {
  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    width: 100% !important;
    max-width: 420px !important;
    min-height: 0 !important;
    height: 560px !important;
    aspect-ratio: auto !important;
  }
}

@media (max-width: 620px) {
  body.login-page .yaagi-signup-redesigned .signup-setup-grid {
    grid-template-columns: 1fr !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
    min-height: 76px !important;
  }

  body.login-page .yaagi-signup-redesigned .yaagi-signup-video-frame {
    height: 500px !important;
  }
}


/* YAAGI 10.3 - final signup field alignment and gold action polish */
body.login-page .yaagi-signup-redesigned #signupPlusMessage {
  width: 100% !important;
  margin: 10px 0 14px !important;
  text-align: center !important;
}

body.login-page .yaagi-signup-redesigned .signup-explain {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  text-align: justify !important;
  text-justify: inter-word !important;
}

body.login-page .yaagi-signup-redesigned .signup-setup-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 14px !important;
  align-items: start !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-field-title,
body.login-page .yaagi-signup-redesigned .yaagi-field-firstname,
body.login-page .yaagi-signup-redesigned .yaagi-field-lastname,
body.login-page .yaagi-signup-redesigned .yaagi-field-role,
body.login-page .yaagi-signup-redesigned .yaagi-field-country,
body.login-page .yaagi-signup-redesigned .yaagi-field-region,
body.login-page .yaagi-signup-redesigned .yaagi-court-field {
  width: 100% !important;
  min-width: 0 !important;
  grid-column: auto !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-field-title select,
body.login-page .yaagi-signup-redesigned .yaagi-field-firstname input,
body.login-page .yaagi-signup-redesigned .yaagi-field-lastname input,
body.login-page .yaagi-signup-redesigned .yaagi-field-role select,
body.login-page .yaagi-signup-redesigned .yaagi-field-country select,
body.login-page .yaagi-signup-redesigned .yaagi-field-region select,
body.login-page .yaagi-signup-redesigned .yaagi-court-field input,
body.login-page .yaagi-signup-redesigned .yaagi-court-field select {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Keep the two court/legal fields on one equal 50/50 row on desktop. */
@media (min-width: 621px) {
  body.login-page .yaagi-signup-redesigned .signup-setup-grid > .yaagi-court-field {
    grid-column: span 1 !important;
  }
}

/* More realistic metallic-gold account button without changing behaviour. */
body.login-page .yaagi-signup-submit-row button,
body.login-page #signupBtn {
  background:
    linear-gradient(180deg,
      #fff4b8 0%,
      #f7d66a 12%,
      #dcae28 34%,
      #f4cf55 52%,
      #bd7f05 78%,
      #e1a91b 100%) !important;
  border: 1px solid #a66b00 !important;
  color: #172238 !important;
  -webkit-text-fill-color: #172238 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -2px 0 rgba(117,72,0,.18),
    0 10px 24px rgba(169,112,0,.24) !important;
}

body.login-page .yaagi-signup-submit-row button:hover,
body.login-page .yaagi-signup-submit-row button:focus-visible,
body.login-page #signupBtn:hover,
body.login-page #signupBtn:focus-visible {
  background:
    linear-gradient(180deg,
      #fff8cf 0%,
      #ffe184 14%,
      #e6b936 36%,
      #f8d968 54%,
      #c98b0b 80%,
      #e9b52a 100%) !important;
}

@media (max-width: 620px) {
  body.login-page .yaagi-signup-redesigned .signup-explain {
    text-align: left !important;
  }
}


/* YAAGI 10.3 - login alignment, signup-only info, validation and gold plan polish */
body.login-page #loginPanel .login-actions {
  justify-content: center !important;
}

body.login-page #loginPanel .login-actions #loginBtn {
  min-width: 190px !important;
  margin-inline: auto !important;
}

body.login-page #signupInfoCard[hidden] {
  display: none !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  background: linear-gradient(180deg, #fff9dc 0%, #f9e8a2 48%, #e8c75a 100%) !important;
  border-color: rgba(174, 121, 0, .48) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 5px 13px rgba(157,109,0,.10) !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:hover,
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan:focus-visible {
  background: linear-gradient(180deg, #fffbea 0%, #fbeaa7 44%, #e6be3e 100%) !important;
  border-color: rgba(157, 103, 0, .72) !important;
}

body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected {
  background: linear-gradient(180deg, #fff1a6 0%, #efc94f 33%, #d69a0a 68%, #f0c446 100%) !important;
  border-color: #9f6800 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -2px 0 rgba(112,68,0,.16), 0 8px 20px rgba(158,105,0,.22) !important;
}

body.login-page .signup-validation-message {
  width: 100%;
  box-sizing: border-box;
  margin: 12px 0 4px;
  padding: 11px 13px;
  border: 1px solid #dc2626;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  font-weight: 800;
  text-align: center;
}

body.login-page #signupPanel input.signup-field-invalid,
body.login-page #signupPanel select.signup-field-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .14) !important;
  background-color: #fff7f7 !important;
}

/* YAAGI 10.3 - final unified top navigation and login alignment */
body.login-page .topbar .ps-header-title-block,
body.login-page .topbar > div:first-child {
  justify-self: start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
body.login-page .topbar .ps-user-badge,
body.login-page .topbar .ps-user-badge.ps-status-control {
  margin-left: 0 !important;
  margin-right: auto !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}
body.login-page .login-page-nav-language {
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  min-width: 168px !important;
}
body.login-page .login-page-nav-language .ps-global-language-switcher {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}
body.login-page .login-page-nav-language select {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  cursor: pointer !important;
}

/* The normal app navigation is moved after .topbar by app.js so every page
   has the same visible menu, dimensions, alignment, icons and language choice. */
html body .bottom-nav.yaagi-unified-top-nav,
html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher,
html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-gold-status,
html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: min(1240px, calc(100vw - 48px)) !important;
  max-width: min(1240px, calc(100vw - 48px)) !important;
  min-height: 64px !important;
  height: 64px !important;
  margin: 10px auto 18px !important;
  padding: 9px 12px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  z-index: 50 !important;
}
html body .bottom-nav.yaagi-unified-top-nav a {
  display: inline-flex !important;
  flex: 0 1 136px !important;
  min-width: 112px !important;
  max-width: 156px !important;
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 clamp(168px, 15vw, 220px) !important;
  width: clamp(168px, 15vw, 220px) !important;
  min-width: 168px !important;
  max-width: 220px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin-left: auto !important;
}
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select,
html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher select {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  cursor: pointer !important;
}
@media (max-width: 899px) {
  html body .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-gold-status,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: min(96vw, 760px) !important;
    max-width: min(96vw, 760px) !important;
    border-radius: 24px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav a {
    flex: 1 1 118px !important;
    min-width: 104px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    flex: 1 1 100% !important;
    width: min(270px, 92vw) !important;
    max-width: min(270px, 92vw) !important;
    margin: 4px auto 0 !important;
  }
}

/* ============================================================
   YAAGI 10.4 - unified floating navigation
   Login is the visual reference for every regular app page.
   This final block intentionally overrides legacy bottom-nav rules.
   ============================================================ */

/* Normal app navigation: same slim floating pill as login, aligned to page content. */
html body .app > .bottom-nav.yaagi-unified-top-nav,
html body .app .bottom-nav.yaagi-unified-top-nav {
  position: sticky !important;
  top: 18px !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 80 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 56px !important;
  height: auto !important;
  margin: 18px 0 22px !important;
  padding: 7px !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(190px, 230px) !important;
  grid-template-rows: 1fr !important;
  gap: 6px !important;
  align-items: center !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(15,35,75,.08) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

/* Never widen the menu because of subscription status; login has no status badge in the nav. */
html body .bottom-nav.yaagi-unified-top-nav .yaagi-nav-gold-status,
html body .bottom-nav.yaagi-unified-top-nav #yaagiGoldMenuStatus,
html body .bottom-nav.yaagi-unified-top-nav .yaagi-plus-badge {
  display: none !important;
}

html body .bottom-nav.yaagi-unified-top-nav a {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  font-size: .92rem !important;
  line-height: 1 !important;
  font-weight: 850 !important;
  text-decoration: none !important;
}

html body .bottom-nav.yaagi-unified-top-nav a .ps-nav-icon,
html body .bottom-nav.yaagi-unified-top-nav a .ps-recovered-icon.ps-nav-icon {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .95rem !important;
  line-height: 1 !important;
}

html body .bottom-nav.yaagi-unified-top-nav a > span:not(.ps-nav-icon) {
  display: inline !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-size: .92rem !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  text-align: center !important;
}

html body .bottom-nav.yaagi-unified-top-nav a.active {
  background: linear-gradient(135deg, #fff3ad 0%, #e0a817 100%) !important;
  color: #071832 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78), 0 8px 18px rgba(166,111,9,.16) !important;
}

/* Language selector has exactly the same footprint as on login. */
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  justify-self: stretch !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 190px !important;
  max-width: 230px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.98) !important;
  border: 1px solid rgba(15,35,75,.12) !important;
  box-shadow: none !important;
}

html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher .ps-global-language-icon {
  display: none !important;
}

html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select,
html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 34px 0 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
  text-align: center !important;
  text-align-last: center !important;
}

/* Tablet: same responsive behaviour as login (three columns, language full row). */
@media (max-width: 930px) {
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: 56px !important;
    border-radius: 28px !important;
    padding: 7px !important;
    overflow: visible !important;
  }

  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* Phone: keep the same floating navigation concept instead of reverting to the old thick bottom bar. */
@media (max-width: 620px) {
  html body {
    padding-bottom: 24px !important;
  }

  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav {
    position: sticky !important;
    top: 8px !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 18px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 24px !important;
  }

  html body .bottom-nav.yaagi-unified-top-nav a {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 8px !important;
  }

  html body .bottom-nav.yaagi-unified-top-nav a > span:not(.ps-nav-icon) {
    font-size: .82rem !important;
  }

  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher {
    grid-column: 1 / -1 !important;
    height: 40px !important;
    min-height: 40px !important;
  }
}


/* ============================================================
   YAAGI 10.5 - exact compact navigation height on every app page
   Login navigation is the visual reference. Border-box prevents legacy
   padding from making the normal page menu look taller or heavier.
   ============================================================ */
html body .app > .bottom-nav.yaagi-unified-top-nav,
html body .app .bottom-nav.yaagi-unified-top-nav {
  box-sizing: border-box !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 7px !important;
  margin-top: 14px !important;
  margin-bottom: 18px !important;
}
html body .bottom-nav.yaagi-unified-top-nav a {
  box-sizing: border-box !important;
  min-height: 44px !important;
  height: 44px !important;
}
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select,
html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-select {
  box-sizing: border-box !important;
  min-height: 44px !important;
  height: 44px !important;
}
@media (max-width: 930px) {
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav {
    height: auto !important;
    min-height: 58px !important;
  }
}
@media (max-width: 620px) {
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav {
    height: auto !important;
    min-height: 0 !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav a,
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select,
  html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-select {
    min-height: 40px !important;
    height: 40px !important;
  }
}


/* ============================================================
   YAAGI 10.17 - definitive compact menu and header alignment
   Login remains the visual reference. This layer neutralizes
   older .bottom-nav sizing/positioning overrides without
   touching calendar, auth, sync, Stripe or data logic.
   ============================================================ */
:root {
  --yaagi-layout-width: min(1180px, calc(100vw - 72px));
  --yaagi-menu-height: 58px;
  --yaagi-menu-item-height: 44px;
  --yaagi-menu-padding: 7px;
  --yaagi-menu-gap: 6px;
  --yaagi-menu-radius: 999px;
  --yaagi-menu-bg: rgba(255, 255, 255, .88);
  --yaagi-menu-border: rgba(15, 35, 75, .08);
  --yaagi-menu-shadow: 0 16px 38px rgba(15, 23, 42, .10);
  --yaagi-menu-gold: linear-gradient(135deg, #fff7db 0%, #f4d06a 58%, #d99a00 100%);
}

html body > .app,
html body .app,
body.login-page main.app,
body.login-page .app,
body.login-page .login-shell {
  width: var(--yaagi-layout-width) !important;
  max-width: var(--yaagi-layout-width) !important;
  padding-top: 14px !important;
}

html body .app > .topbar,
html body .app > .topbar.dashboard-topbar,
body.login-page .topbar {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding-top: 0 !important;
  align-items: center !important;
  gap: 10px !important;
}

html body .app > .topbar:not(.dashboard-topbar) {
  min-height: 62px !important;
}

html body .app > .topbar.dashboard-topbar {
  min-height: 82px !important;
}

html body .app > .topbar .ps-header-title-block,
html body .app > .topbar > div:first-child,
body.login-page .topbar .ps-header-title-block,
body.login-page .topbar > div:first-child {
  align-self: center !important;
  justify-self: start !important;
}

html body .app > .topbar .ps-header-controls,
body.login-page .topbar .ps-header-controls {
  align-self: center !important;
  justify-self: end !important;
  align-items: center !important;
}

html body .app > .topbar .ps-user-badge,
html body .app > .topbar .ps-user-badge.ps-status-control,
body.login-page .topbar .ps-user-badge,
body.login-page .topbar .ps-user-badge.ps-status-control {
  align-self: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.login-page .login-page-nav-row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0 18px !important;
  position: sticky !important;
  top: 12px !important;
  z-index: 80 !important;
  filter: none !important;
}

body.login-page .login-page-nav,
html body .app > .bottom-nav.yaagi-unified-top-nav,
html body .app .bottom-nav.yaagi-unified-top-nav,
html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher,
html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-gold-status,
html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
  box-sizing: border-box !important;
  position: sticky !important;
  top: 12px !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(190px, 230px) !important;
  grid-template-rows: var(--yaagi-menu-item-height) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: var(--yaagi-menu-gap) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: var(--yaagi-menu-height) !important;
  height: var(--yaagi-menu-height) !important;
  margin: 10px 0 18px !important;
  padding: var(--yaagi-menu-padding) !important;
  overflow: visible !important;
  border-radius: var(--yaagi-menu-radius) !important;
  background: var(--yaagi-menu-bg) !important;
  border: 1px solid var(--yaagi-menu-border) !important;
  box-shadow: var(--yaagi-menu-shadow) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

body.login-page .login-page-nav {
  margin: 0 !important;
}

body.login-page .login-page-nav-link,
html body .bottom-nav.yaagi-unified-top-nav a {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: var(--yaagi-menu-item-height) !important;
  height: var(--yaagi-menu-item-height) !important;
  margin: 0 !important;
  padding: 0 12px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: var(--yaagi-menu-radius) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body.login-page .login-page-nav-link:hover,
body.login-page .login-page-nav-link:focus-visible,
html body .bottom-nav.yaagi-unified-top-nav a:hover,
html body .bottom-nav.yaagi-unified-top-nav a:focus-visible,
html body .bottom-nav.yaagi-unified-top-nav a.active {
  background: var(--yaagi-menu-gold) !important;
  border-color: rgba(173, 119, 0, .32) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 8px 18px rgba(166, 111, 9, .14) !important;
}

body.login-page .login-page-nav-link .nav-icon,
html body .bottom-nav.yaagi-unified-top-nav a .ps-nav-icon,
html body .bottom-nav.yaagi-unified-top-nav a .ps-recovered-icon.ps-nav-icon {
  box-sizing: border-box !important;
  display: inline-flex !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .95rem !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transform: none !important;
}

body.login-page .login-page-nav-link > span:not(.nav-icon),
html body .bottom-nav.yaagi-unified-top-nav a > span:not(.ps-nav-icon):not(.ps-recovered-icon),
html body .bottom-nav.yaagi-unified-top-nav span:not(.ps-nav-icon):not(.ps-recovered-icon):not(.ps-global-language-icon) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 1em !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  vertical-align: middle !important;
}

body.login-page .login-page-nav-language,
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
  box-sizing: border-box !important;
  position: relative !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: stretch !important;
  justify-self: stretch !important;
  align-self: center !important;
  width: 100% !important;
  min-width: 190px !important;
  max-width: 230px !important;
  min-height: var(--yaagi-menu-item-height) !important;
  height: var(--yaagi-menu-item-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--yaagi-menu-radius) !important;
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid rgba(15, 35, 75, .12) !important;
  box-shadow: none !important;
}

body.login-page .login-page-nav-language .ps-global-language-switcher,
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher .ps-global-language-switcher {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.login-page .login-page-nav-language .ps-global-language-icon,
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher .ps-global-language-icon {
  display: none !important;
}

body.login-page .login-page-nav-language select,
body.login-page .login-page-nav-language .ps-global-language-select,
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select,
html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-select {
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: var(--yaagi-menu-item-height) !important;
  height: var(--yaagi-menu-item-height) !important;
  margin: 0 !important;
  padding: 0 34px 0 16px !important;
  border: 0 !important;
  border-radius: var(--yaagi-menu-radius) !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  font-size: .92rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-align-last: center !important;
  cursor: pointer !important;
}

html body .bottom-nav.yaagi-unified-top-nav .yaagi-nav-gold-status,
html body .bottom-nav.yaagi-unified-top-nav #yaagiGoldMenuStatus,
html body .bottom-nav.yaagi-unified-top-nav .yaagi-plus-badge {
  display: none !important;
}

@media (max-width: 930px) {
  :root {
    --yaagi-layout-width: min(100%, calc(100vw - 32px));
  }

  body.login-page .login-page-nav,
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
    height: auto !important;
    min-height: var(--yaagi-menu-height) !important;
    border-radius: 28px !important;
  }

  body.login-page .login-page-nav-language,
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

@media (max-width: 620px) {
  :root {
    --yaagi-menu-item-height: 40px;
  }

  html body > .app,
  html body .app,
  body.login-page main.app,
  body.login-page .app,
  body.login-page .login-shell {
    padding-top: 10px !important;
  }

  body.login-page .login-page-nav-row,
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav {
    top: 8px !important;
    margin-top: 8px !important;
    margin-bottom: 16px !important;
  }

  body.login-page .login-page-nav,
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-radius: 24px !important;
  }

  body.login-page .login-page-nav-link,
  html body .bottom-nav.yaagi-unified-top-nav a {
    padding: 0 8px !important;
  }

  body.login-page .login-page-nav-link > span:not(.nav-icon),
  html body .bottom-nav.yaagi-unified-top-nav a > span:not(.ps-nav-icon):not(.ps-recovered-icon),
  html body .bottom-nav.yaagi-unified-top-nav span:not(.ps-nav-icon):not(.ps-recovered-icon):not(.ps-global-language-icon) {
    font-size: .82rem !important;
  }
}

/* YAAGI 10.17 - paid Gold status fallback below the logo, outside the compact menu */
.yaagi-header-gold-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  align-self: center !important;
  margin-top: 6px !important;
  order: 2 !important;
  padding: 6px 12px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(153, 101, 0, .28) !important;
  background: linear-gradient(135deg, #fff8dd 0%, #f4d06a 58%, #d99a00 100%) !important;
  color: #102243 !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 10px 22px rgba(98, 69, 0, .16) !important;
  pointer-events: none !important;
}

.yaagi-header-gold-status img {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: block !important;
}

.yaagi-header-gold-status span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.ps-header-controls > .yaagi-header-gold-status {
  align-self: center !important;
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 620px) {
  .yaagi-header-gold-status {
    align-self: center !important;
    margin-top: 4px !important;
    padding: 5px 10px !important;
    font-size: .74rem !important;
  }
}



/* YAAGI 10.17 - compact GOLD badge and compact selected language code */
html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status{grid-template-columns:repeat(5,minmax(0,1fr)) 86px minmax(92px,118px)!important;}
html body .bottom-nav.yaagi-unified-top-nav .yaagi-nav-gold-status,html body .bottom-nav.yaagi-unified-top-nav #yaagiGoldMenuStatus{box-sizing:border-box!important;display:inline-flex!important;visibility:visible!important;opacity:1!important;align-items:center!important;justify-content:center!important;gap:6px!important;width:86px!important;min-width:86px!important;max-width:86px!important;height:var(--yaagi-menu-item-height)!important;min-height:var(--yaagi-menu-item-height)!important;margin:0!important;padding:0 9px!important;border-radius:999px!important;border:1px solid rgba(164,108,0,.42)!important;background:linear-gradient(135deg,#fff3ad 0%,#e7b82f 46%,#b67600 100%)!important;color:#102243!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 5px 12px rgba(116,76,0,.16)!important;font-size:.78rem!important;font-weight:950!important;line-height:1!important;white-space:nowrap!important;pointer-events:none!important;}
html body .bottom-nav.yaagi-unified-top-nav .yaagi-nav-gold-status img,html body .bottom-nav.yaagi-unified-top-nav #yaagiGoldMenuStatus img{display:block!important;width:17px!important;height:17px!important;flex:0 0 17px!important;}
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher{position:relative!important;}
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher::after{content:attr(data-current-language);position:absolute;inset:0 28px 0 10px;display:flex;align-items:center;justify-content:center;color:#102033;font-size:.92rem;font-weight:900;line-height:1;pointer-events:none;z-index:2;}
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select{color:transparent!important;-webkit-text-fill-color:transparent!important;position:relative;z-index:3;}
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select option{color:#102033!important;-webkit-text-fill-color:#102033!important;background:#fff!important;}
@media(max-width:930px){html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status{grid-template-columns:repeat(3,minmax(0,1fr))!important;}html body .bottom-nav.yaagi-unified-top-nav .yaagi-nav-gold-status,html body .bottom-nav.yaagi-unified-top-nav #yaagiGoldMenuStatus{width:100%!important;min-width:0!important;max-width:none!important;}}
@media(max-width:760px){html body .bottom-nav.yaagi-unified-top-nav .yaagi-nav-gold-status,html body .bottom-nav.yaagi-unified-top-nav #yaagiGoldMenuStatus{display:none!important;}}


/* ================================================================
   YAAGI 10.17 - compact desktop menu space fix
   Keep the proven 10.6/10.8 height/sticky layout intact.
   Only reserve explicit compact slots for confirmed GOLD + language.
   ================================================================ */
@media (min-width: 931px) {
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 72px !important;
  }

  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 84px 72px !important;
  }

  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher #parentSyncGlobalLanguageSwitcher {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    justify-self: end !important;
    overflow: visible !important;
  }

  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select,
  html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-select {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    padding: 0 24px 0 8px !important;
  }

  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher::after {
    inset: 0 22px 0 6px !important;
  }

  html body .bottom-nav.yaagi-unified-top-nav .yaagi-nav-gold-status,
  html body .bottom-nav.yaagi-unified-top-nav #yaagiGoldMenuStatus {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    justify-self: end !important;
    padding: 0 8px !important;
    overflow: hidden !important;
  }

  /* Keep link cells efficient without changing menu height or active-state behavior. */
  html body .bottom-nav.yaagi-unified-top-nav a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    gap: 6px !important;
  }
}


/* ================================================================
   YAAGI 12.1 - active menu state regression fix
   Keep the current page visibly selected with the same gold treatment
   as hover, restoring the established YAAGI navigation behaviour.
   ================================================================ */
html body .bottom-nav.yaagi-unified-top-nav a.active {
  background: var(--yaagi-menu-gold) !important;
  border-color: rgba(173, 119, 0, .32) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 8px 18px rgba(166, 111, 9, .14) !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
}

html body .bottom-nav.yaagi-unified-top-nav a.active span:last-child {
  font-weight: 950 !important;
}

/* Center the compact selected language code and all native option labels. */
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
  text-align: center !important;
}
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select,
html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-select {
  text-align: center !important;
  text-align-last: center !important;
}
html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select option,
html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-select option {
  text-align: center !important;
}

@media (min-width: 931px) {
  /* Five flexible links + guaranteed GOLD + compact language code. */
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 84px 72px !important;
  }
}


/* ================================================================
   YAAGI 10.22 - mobile collapsible navigation and compact GOLD/language spacing
   Keeps desktop menu architecture unchanged.
   ================================================================ */
.yaagi-mobile-nav-toggle {
  display: none;
}

@media (min-width: 931px) {
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 92px 80px !important;
    column-gap: 6px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .yaagi-nav-gold-status,
  html body .bottom-nav.yaagi-unified-top-nav #yaagiGoldMenuStatus {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    overflow: visible !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher,
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select,
  html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-select {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }
}

@media (max-width: 930px) {
  .yaagi-mobile-nav-toggle {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin: 8px 0 10px;
    padding: 8px 14px;
    border: 1px solid rgba(18, 49, 95, .15);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: #102243;
    font: inherit;
    font-weight: 900;
    box-shadow: 0 8px 20px rgba(15, 35, 70, .10);
    position: sticky;
    top: 8px;
    z-index: 82;
  }
  .yaagi-mobile-nav-toggle.is-open {
    border-radius: 22px 22px 10px 10px;
    margin-bottom: 4px;
  }
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed {
    display: none !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) {
    position: sticky !important;
    top: 58px !important;
    z-index: 81 !important;
    margin-top: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) #parentSyncGlobalLanguageSwitcher {
    grid-column: 1 / -1 !important;
  }
}

/* ================================================================
   YAAGI 10.22 - compact login/signup mobile menu + browser recovery
   ================================================================ */
@media (max-width: 930px) {
  body.login-page .login-page-nav-row {
    display: block !important;
  }
  body.login-page .login-page-nav.yaagi-mobile-collapsed {
    display: none !important;
  }
  body.login-page .login-page-nav.yaagi-unified-login-nav:not(.yaagi-mobile-collapsed) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 10px !important;
    margin: 0 0 14px !important;
    border-radius: 22px !important;
  }
  body.login-page .login-page-nav.yaagi-unified-login-nav:not(.yaagi-mobile-collapsed) .login-page-nav-language {
    grid-column: 1 / -1 !important;
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
    justify-self: center !important;
  }
  body.login-page .yaagi-mobile-nav-toggle {
    margin: 6px 0 10px !important;
  }

  .yaagi-mobile-browser-controls {
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: 44px 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 52px;
    padding: 4px 8px;
    background: rgba(255,255,255,.98);
    border-bottom: 1px solid rgba(16,34,67,.14);
    box-shadow: 0 5px 16px rgba(16,34,67,.10);
  }
  .yaagi-mobile-browser-controls + .app {
    padding-top: 8px !important;
  }
  .yaagi-browser-control-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    min-width: 44px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(16,34,67,.14) !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #102243 !important;
    text-decoration: none !important;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    box-shadow: none !important;
  }
  .yaagi-browser-control-url {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
    color: #38536f;
    font-size: .78rem;
    font-weight: 750;
    text-align: center;
  }
}

@media (min-width: 931px) {
  .yaagi-mobile-browser-controls {
    display: none !important;
  }
}


/* ================================================================
   YAAGI 11.0 - cross-browser court autocomplete + GOLD/language safety
   ================================================================ */
body.login-page .yaagi-court-field {
  position: relative;
}
body.login-page .yaagi-court-autocomplete {
  position: absolute;
  z-index: 120;
  top: calc(100% - 2px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(18,49,95,.18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15,35,70,.16);
}
body.login-page .yaagi-court-autocomplete[hidden] { display: none !important; }
body.login-page .yaagi-court-autocomplete-option {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #102243;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
body.login-page .yaagi-court-autocomplete-option:hover,
body.login-page .yaagi-court-autocomplete-option:focus-visible {
  outline: none;
  background: rgba(30,93,180,.09);
}
@media (min-width: 931px) {
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    grid-template-columns: repeat(5, minmax(0,1fr)) 96px 76px !important;
    column-gap: 8px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .yaagi-nav-gold-status,
  html body .bottom-nav.yaagi-unified-top-nav #yaagiGoldMenuStatus {
    width: 96px !important;
    min-width: 96px !important;
    max-width: 96px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher,
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher select,
  html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-select {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }
}

/* ================================================================
   YAAGI 11.0 - mobile encoding-safe navigation + persistent controls
   ================================================================ */
@media (max-width: 930px) {
  /* Emoji glyphs can be mojibake when a hosting layer serves a legacy charset.
     Keep the compact mobile menu text-only; desktop icons remain unchanged. */
  .login-page-nav .nav-icon,
  .login-page-nav .ps-recovered-icon,
  .bottom-nav .ps-recovered-icon,
  .bottom-nav .ps-nav-icon,
  .yaagi-unified-login-nav .nav-icon,
  .yaagi-unified-login-nav .ps-recovered-icon {
    display: none !important;
  }

  /* The in-app recovery controls are intentionally always available on mobile,
     including custom tabs where the browser's own chrome disappears. */
  .yaagi-mobile-browser-controls {
    display: grid !important;
  }
}


/* ================================================================
   YAAGI 11.0 - consistent GOLD brand stack + compact mobile controls
   ================================================================ */
.yaagi-header-brand-stack {
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  gap:7px !important;
  width:max-content !important;
  margin-left:auto !important;
}
.yaagi-header-brand-stack .yaagi-header-gold-status {
  align-self:flex-end !important;
  justify-self:auto !important;
  min-width:112px !important;
  padding:7px 16px !important;
  margin:2px 0 0 !important;
}
.yaagi-header-brand-stack .yaagi-header-gold-status img {
  width:20px !important;
  height:20px !important;
  flex-basis:20px !important;
}
@media (min-width:931px) {
  html body .app .topbar .ps-header-controls {
    margin-left:auto !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
  }
  html body .app .topbar .yaagi-header-brand-stack,
  html body .app .topbar .yaagi-header-brand-stack .dashboard-logo-panel,
  html body .app .topbar .yaagi-header-brand-stack .logo-circle {
    margin-left:auto !important;
    margin-right:0 !important;
  }
}
@media (max-width:930px) {
  .yaagi-mobile-nav-toggle {
    width:56px !important;
    min-width:56px !important;
    max-width:56px !important;
    min-height:50px !important;
    height:50px !important;
    padding:0 !important;
    margin:8px auto 10px !important;
    border-radius:16px !important;
    font-size:1.65rem !important;
    line-height:1 !important;
    position:relative !important;
    top:auto !important;
  }
  .yaagi-mobile-nav-toggle.is-open {
    border-radius:16px !important;
    margin-bottom:10px !important;
  }
  .yaagi-mobile-browser-controls {
    display:flex !important;
    width:auto !important;
    min-height:0 !important;
    padding:4px 6px !important;
    gap:6px !important;
    position:sticky !important;
    top:0 !important;
    justify-content:flex-start !important;
    background:rgba(255,255,255,.96) !important;
  }
  .yaagi-mobile-browser-controls .yaagi-browser-control-url,
  .yaagi-mobile-browser-controls a.yaagi-browser-control-button {
    display:none !important;
  }
  .yaagi-mobile-browser-controls .yaagi-browser-control-button {
    width:42px !important;
    min-width:42px !important;
    height:40px !important;
    min-height:40px !important;
  }
  .yaagi-header-brand-stack {
    align-items:center !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .yaagi-header-brand-stack .yaagi-header-gold-status {
    align-self:center !important;
    min-width:104px !important;
  }
}

/* ================================================================
   YAAGI 11.0 - stable three-slot header + subtle language affordance
   ================================================================ */
@media (min-width: 931px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 28px !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: end !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status {
    min-width: 132px !important;
    padding: 8px 18px !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status img {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
  }
}

@media (max-width: 930px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "logo logo"
      "title gold" !important;
    align-items: end !important;
    gap: 14px 12px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    justify-self: start !important;
    align-self: end !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
    justify-self: end !important;
    align-self: end !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status {
    min-width: 104px !important;
    margin: 0 !important;
  }
}

/* The language selector deliberately uses a CSS-drawn chevron rather than a text glyph,
   so the affordance stays subtle and cannot turn into mojibake on a misconfigured host. */
html body .bottom-nav .ps-nav-language-switcher,
html body .bottom-nav #parentSyncGlobalLanguageSwitcher,
body.login-page .login-page-nav-language .ps-global-language-switcher,
body.email-confirmed-page .login-page-nav-language .ps-global-language-switcher {
  position: relative !important;
}
html body .bottom-nav .ps-nav-language-switcher::after,
html body .bottom-nav #parentSyncGlobalLanguageSwitcher::after,
body.login-page .login-page-nav-language .ps-global-language-switcher::after,
body.email-confirmed-page .login-page-nav-language .ps-global-language-switcher::after {
  content: "" !important;
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.5px solid rgba(16,34,67,.72) !important;
  border-bottom: 1.5px solid rgba(16,34,67,.72) !important;
  transform: translateY(-70%) rotate(45deg) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html body .bottom-nav .ps-nav-language-switcher select,
html body .bottom-nav #parentSyncGlobalLanguageSwitcher select,
body.login-page .login-page-nav-language select,
body.email-confirmed-page .login-page-nav-language select {
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 36px !important;
}

/* YAAGI 11.0 - neutralize older dashboard display:contents so the left header slot stays intact. */
html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  gap: 5px !important;
}

/* ================================================================
   YAAGI 11.0 - final header alignment + compact phone language/menu
   ================================================================ */
@media (min-width: 931px) {
  /* Keep the logo exactly where it is. Lower the left login/status chip and
     right GOLD chip so their bottoms line up with the bottom of the logo. */
  html body .app .topbar.yaagi-stable-header {
    align-items: end !important;
    margin-bottom: 6px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    align-self: end !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block,
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    align-self: end !important;
  }
  html body .app .topbar.yaagi-stable-header .ps-user-badge,
  html body .app .topbar.yaagi-stable-header .ps-user-badge.ps-status-control {
    margin-bottom: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status {
    /* More room on desktop, while placing the ball inside the left rounded end. */
    min-width: 132px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 8px 18px 8px 7px !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status img {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    margin-left: 0 !important;
  }
}

@media (max-width: 930px) {
  /* Phone header: language left, logo centered, hamburger right. Their bottoms
     share one baseline. Login/status and GOLD stay on the row below. */
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) 56px !important;
    grid-template-areas:
      "lang logo menu"
      "title title gold" !important;
    align-items: end !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    grid-area: lang !important;
    display: inline-flex !important;
    align-self: end !important;
    justify-self: start !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(16,34,67,.14) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 8px 20px rgba(15,35,70,.10) !important;
    position: relative !important;
    overflow: hidden !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot .ps-global-language-icon {
    display: none !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot::before {
    content: attr(data-current-language) !important;
    position: absolute !important;
    inset: 0 18px 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #102243 !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot::after {
    content: "" !important;
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    width: 6px !important;
    height: 6px !important;
    border-right: 1.5px solid rgba(16,34,67,.70) !important;
    border-bottom: 1.5px solid rgba(16,34,67,.70) !important;
    transform: translateY(-70%) rotate(45deg) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    z-index: 3 !important;
    cursor: pointer !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot select option {
    color: #102243 !important;
    -webkit-text-fill-color: #102243 !important;
    background: #fff !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
    align-self: end !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    display: inline-flex !important;
    align-self: end !important;
    justify-self: end !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
    position: static !important;
    top: auto !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    align-self: end !important;
    justify-self: start !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
    align-self: end !important;
    justify-self: end !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status {
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-left: 6px !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status img {
    margin-left: 0 !important;
  }
}


/* ================================================================
   YAAGI 11.0 - supplied holiday artwork + clearer holiday cards
   ================================================================ */
.holiday-theme-autumn { --holiday-art: url("../img/holidays/autumn.png?v=YAAGI_19_3") !important; }
.holiday-theme-christmas { --holiday-art: url("../img/holidays/christmas.png?v=YAAGI_19_3") !important; }
.holiday-theme-carnival { --holiday-art: url("../img/holidays/spring.png?v=YAAGI_19_3") !important; }
.holiday-theme-easter { --holiday-art: url("../img/holidays/easter.png?v=YAAGI_19_3") !important; }
.holiday-theme-spring { --holiday-art: url("../img/holidays/may.png?v=YAAGI_19_3") !important; }
.holiday-theme-may { --holiday-art: url("../img/holidays/may.png?v=YAAGI_19_3") !important; }
.holiday-theme-pentecost { --holiday-art: url("../img/holidays/pentecost.png?v=YAAGI_19_3") !important; }
.holiday-theme-winter { --holiday-art: url("../img/holidays/winter.png?v=YAAGI_19_3") !important; }
.holiday-theme-whiteweek { --holiday-art: url("../img/holidays/whiteweek.png?v=YAAGI_19_3") !important; }
.holiday-theme-summer { --holiday-art: url("../img/holidays/summer.png?v=YAAGI_19_3") !important; }

.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card,
.vacation-admin-row,
.arrangement-holiday-block.yaagi-holiday-themed {
  position: relative !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 38%, rgba(255,255,255,.58) 62%, rgba(255,255,255,.12) 100%),
    var(--holiday-art) !important;
  background-size: cover, min(48%, 440px) auto !important;
  background-position: center, right center !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* Give the supplied transparent PNG art room on the right without hiding the text. */
.arrangement-holiday-block.yaagi-holiday-themed {
  min-height: 230px;
}
.arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-controls {
  position: relative;
  z-index: 1;
  width: min(68%, 720px);
}

@media (max-width: 760px) {
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card,
  .vacation-admin-row,
  .arrangement-holiday-block.yaagi-holiday-themed {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.96) 54%, rgba(255,255,255,.58) 74%, rgba(255,255,255,.16) 100%),
      var(--holiday-art) !important;
    background-size: cover, 68% auto !important;
    background-position: center, right bottom !important;
  }
  .arrangement-holiday-block.yaagi-holiday-themed {
    padding-bottom: 150px !important;
  }
  .arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-controls {
    width: 100% !important;
  }
  .yaagi-holiday-card-content,
  .yaagi-holiday-card-body,
  .vacation-title-block,
  .arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-header {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* YAAGI 11.0 - named holiday cards on holidays.html use the same supplied PNG artwork. */
.vacation-herfst { --holiday-art: url("../img/holidays/autumn.png?v=YAAGI_19_3") !important; }
.vacation-kerst { --holiday-art: url("../img/holidays/christmas.png?v=YAAGI_19_3") !important; }
.vacation-krokus { --holiday-art: url("../img/holidays/spring.png?v=YAAGI_19_3") !important; }
.vacation-paas { --holiday-art: url("../img/holidays/easter.png?v=YAAGI_19_3") !important; }
.vacation-mei { --holiday-art: url("../img/holidays/may.png?v=YAAGI_19_3") !important; }
.vacation-pinkster { --holiday-art: url("../img/holidays/pentecost.png?v=YAAGI_19_3") !important; }
.vacation-winter { --holiday-art: url("../img/holidays/winter.png?v=YAAGI_19_3") !important; }
.vacation-whiteweek { --holiday-art: url("../img/holidays/whiteweek.png?v=YAAGI_19_3") !important; }
.vacation-zomer { --holiday-art: url("../img/holidays/summer.png?v=YAAGI_19_3") !important; }


/* ================================================================
   YAAGI 11.0 - final stable app chrome + always-visible language code
   ================================================================ */
/* The selected language is rendered by a dedicated overlay span. The native
   select remains on top for interaction and keeps the full language names in
   its option list. This avoids the empty white selector caused by transparent
   native selected text on some browsers. */
.ps-global-language-switcher,
.ps-nav-language-switcher,
.yaagi-mobile-language-slot {
  position: relative !important;
}
.ps-global-language-switcher .yaagi-language-code {
  position: absolute !important;
  inset: 0 22px 0 6px !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  font-size: .9rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  pointer-events: none !important;
}
.ps-global-language-switcher select[data-parent-sync-language-select="true"] {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  cursor: pointer !important;
}
.ps-global-language-switcher select[data-parent-sync-language-select="true"] option {
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  background: #fff !important;
}

@media (min-width: 931px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: end !important;
    column-gap: 28px !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-column: 1 !important;
    justify-self: start !important;
    align-self: end !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-column: 2 !important;
    justify-self: center !important;
    align-self: end !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-column: 3 !important;
    justify-self: end !important;
    align-self: end !important;
    margin: 0 !important;
    width: auto !important;
  }
  /* A mobile-collapsed class may survive a browser resize; desktop navigation
     must nevertheless always stay visible. */
  html body .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed {
    display: grid !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-icon {
    display: none !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-global-language-switcher .yaagi-language-code {
    inset: 0 24px 0 8px !important;
  }
}

@media (max-width: 930px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) 52px !important;
    grid-template-areas:
      "lang logo menu"
      "title title gold" !important;
    align-items: end !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    grid-area: lang !important;
    justify-self: start !important;
    align-self: end !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot .ps-global-language-icon {
    display: none !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot .yaagi-language-code {
    inset: 0 18px 0 4px !important;
    display: flex !important;
    color: #102243 !important;
    -webkit-text-fill-color: #102243 !important;
  }
  /* Disable the older pseudo-label so there is exactly one visible code. */
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot::before {
    content: none !important;
    display: none !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: end !important;
    margin: 0 auto !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    justify-self: end !important;
    align-self: end !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    justify-self: start !important;
    align-self: end !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
    justify-self: end !important;
    align-self: end !important;
  }
}

/* ================================================================
   YAAGI 11.0 - arrangement holiday cards match calendar palette
   ================================================================ */
.arrangement-holiday-block.yaagi-holiday-themed {
  background-color: var(--holiday-bg, #eef3f8) !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 42%, rgba(255,255,255,.70) 67%, rgba(255,255,255,.52) 100%),
    var(--holiday-art) !important;
  background-size: cover, min(34%, 300px) auto !important;
  background-position: center, right 18px center !important;
  background-repeat: no-repeat, no-repeat !important;
  border-color: rgba(255,255,255,.74) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.12) !important;
  min-height: 210px !important;
}
.arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-controls {
  width: min(74%, 760px) !important;
}
.holiday-theme-may { --holiday-bg: #e1b94f; }
.holiday-theme-pentecost { --holiday-bg: #d7b05a; }
.holiday-theme-winter { --holiday-bg: #718ca4; }
.holiday-theme-whiteweek { --holiday-bg: #6f8da8; }

@media (max-width: 760px) {
  .arrangement-holiday-block.yaagi-holiday-themed {
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.90) 55%, rgba(255,255,255,.72) 76%, rgba(255,255,255,.56) 100%),
      var(--holiday-art) !important;
    background-size: cover, 48% auto !important;
    background-position: center, right 10px bottom 10px !important;
    padding-bottom: 105px !important;
    min-height: 0 !important;
  }
  .arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-controls {
    width: 100% !important;
  }
}


/* ================================================================
   YAAGI 11.0 - final responsive header/navigation stabilization
   ================================================================ */
.ps-global-language-switcher .ps-global-language-icon,
.ps-nav-language-switcher .ps-global-language-icon,
.yaagi-mobile-language-slot .ps-global-language-icon {
  display: none !important;
}
.ps-global-language-switcher,
.ps-nav-language-switcher,
.yaagi-mobile-language-slot {
  position: relative !important;
  box-sizing: border-box !important;
}
.ps-global-language-switcher .yaagi-language-code,
.ps-nav-language-switcher .yaagi-language-code,
.yaagi-mobile-language-slot .yaagi-language-code {
  position: absolute !important;
  inset: 0 20px 0 4px !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  pointer-events: none !important;
}
.ps-global-language-switcher::after,
.ps-nav-language-switcher::after,
.yaagi-mobile-language-slot::after {
  content: "" !important;
  position: absolute !important;
  right: 9px !important;
  top: 50% !important;
  width: 6px !important;
  height: 6px !important;
  border-right: 1.5px solid rgba(16,34,67,.68) !important;
  border-bottom: 1.5px solid rgba(16,34,67,.68) !important;
  transform: translateY(-72%) rotate(45deg) !important;
  pointer-events: none !important;
  z-index: 6 !important;
}
.ps-global-language-switcher select[data-parent-sync-language-select="true"],
.ps-nav-language-switcher select[data-parent-sync-language-select="true"],
.yaagi-mobile-language-slot select[data-parent-sync-language-select="true"] {
  position: relative !important;
  z-index: 7 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer !important;
}
.ps-global-language-switcher select[data-parent-sync-language-select="true"] option,
.ps-nav-language-switcher select[data-parent-sync-language-select="true"] option,
.yaagi-mobile-language-slot select[data-parent-sync-language-select="true"] option {
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  background: #fff !important;
}

@media (min-width: 761px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    grid-template-areas: "title logo gold" !important;
    align-items: end !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    margin-bottom: 8px !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    grid-column: auto !important;
    justify-self: start !important;
    align-self: end !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
    grid-column: auto !important;
    justify-self: center !important;
    align-self: end !important;
    margin: 0 auto !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
    grid-column: auto !important;
    justify-self: end !important;
    align-self: end !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    display: none !important;
  }
  html body .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-header-menu-slot {
    display: none !important;
  }
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) 78px !important;
    align-items: center !important;
    gap: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav > a {
    display: flex !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    display: inline-flex !important;
    grid-column: 6 !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-self: end !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid rgba(15,35,75,.12) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.08) !important;
    overflow: hidden !important;
  }
}

@media (max-width: 760px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: 60px minmax(0,1fr) 52px !important;
    grid-template-areas:
      "lang logo menu"
      "title title gold" !important;
    align-items: end !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    grid-area: lang !important;
    display: inline-flex !important;
    justify-self: start !important;
    align-self: end !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(16,34,67,.14) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 8px 20px rgba(15,35,70,.10) !important;
    overflow: hidden !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: end !important;
    margin: 0 auto !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    display: inline-flex !important;
    justify-self: end !important;
    align-self: end !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 16px !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    justify-self: start !important;
    align-self: end !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
    justify-self: end !important;
    align-self: end !important;
  }
}

/* ================================================================
   YAAGI 11.0 - align page eyebrow/subtitle with page title
   ================================================================ */
html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
  align-items: flex-start !important;
  text-align: left !important;
}
html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .small:first-child,
html body .app .topbar.yaagi-stable-header > .ps-header-title-block > h1 {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
}


/* ================================================================
   YAAGI 11.0 - definitive page-title alignment fix
   ================================================================ */
html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  min-width: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}
html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .small:first-child,
html body .app .topbar.yaagi-stable-header > .ps-header-title-block > h1,
html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge {
  align-self: flex-start !important;
  justify-self: start !important;
}
html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .small:first-child,
html body .app .topbar.yaagi-stable-header > .ps-header-title-block > h1 {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

/* Keep every holiday distribution control explicitly interactive above artwork. */
.arrangement-holiday-block.yaagi-holiday-themed .arrangement-holiday-controls,
.arrangement-holiday-block .arrangement-holiday-distribution,
.arrangement-holiday-block .arrangement-summer-distribution {
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}
.arrangement-holiday-block .arrangement-holiday-distribution select,
.arrangement-holiday-block .arrangement-summer-distribution select {
  position: relative !important;
  z-index: 4 !important;
  pointer-events: auto !important;
}


/* YAAGI 11.3 - requested UI refinements */
.yaagi-holiday-card,
.holiday-review-row.yaagi-holiday-card,
.holiday-edit-row.yaagi-holiday-card {
  background-color: var(--holiday-bg, #d9e7f5) !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,.30) 38%, rgba(255,255,255,.10) 68%, rgba(255,255,255,.02) 100%),
    var(--holiday-art) !important;
}
.yaagi-holiday-card .yaagi-holiday-card-body,
.holiday-review-row.yaagi-holiday-card .yaagi-holiday-card-body {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 4px !important;
}
.holiday-review-year {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.ps-global-language-switcher select[data-parent-sync-language-select="true"],
.ps-nav-language-switcher select[data-parent-sync-language-select="true"],
.yaagi-mobile-language-slot select[data-parent-sync-language-select="true"],
body.login-page .login-page-nav-language select,
body.email-confirmed-page .login-page-nav-language select {
  text-align: center !important;
  text-align-last: center !important;
}
.ps-global-language-switcher select[data-parent-sync-language-select="true"] option,
.ps-nav-language-switcher select[data-parent-sync-language-select="true"] option,
.yaagi-mobile-language-slot select[data-parent-sync-language-select="true"] option,
body.login-page .login-page-nav-language option,
body.email-confirmed-page .login-page-nav-language option {
  text-align: center !important;
}
@media (min-width: 931px) {
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    grid-template-columns: repeat(6, minmax(0, 1fr)) 84px 72px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher:not(.has-yaagi-gold-status) {
    grid-template-columns: repeat(6, minmax(0, 1fr)) 84px !important;
  }
  body.login-page .login-page-nav,
  body.email-confirmed-page .login-page-nav {
    grid-template-columns: repeat(6, minmax(100px, 1fr)) 84px !important;
  }
  body.login-page .login-page-nav-language,
  body.email-confirmed-page .login-page-nav-language {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }
}

/* YAAGI 11.3 - extended admin dashboard and isolated admin test family */
.yaagi-admin-section-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.yaagi-admin-section-heading h2 { margin:2px 0 0; }
.yaagi-admin-test-badge {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  background:#eef7ff;
  border:1px solid rgba(31,86,150,.16);
  font-size:.78rem;
  font-weight:800;
  white-space:nowrap;
}
.yaagi-admin-test-family-form {
  display:grid;
  grid-template-columns:minmax(220px,2fr) minmax(90px,.6fr) minmax(180px,1.3fr) minmax(110px,.7fr);
  gap:12px;
  margin:18px 0;
}
.yaagi-admin-test-family-form label {
  display:grid;
  gap:6px;
  font-weight:800;
  font-size:.86rem;
}
.yaagi-admin-test-family-form input,
.yaagi-admin-test-family-form select {
  width:100%;
  min-height:44px;
  border:1px solid rgba(15,35,70,.16);
  border-radius:12px;
  background:#fff;
  padding:10px 12px;
  color:inherit;
  font:inherit;
}
.yaagi-admin-mini-metrics {
  display:grid;
  grid-template-columns:repeat(7,minmax(88px,1fr));
  gap:8px;
  margin-top:14px;
}
.yaagi-admin-mini-metrics span {
  display:grid;
  gap:2px;
  padding:10px;
  border-radius:12px;
  background:rgba(244,248,253,.92);
  border:1px solid rgba(15,35,70,.08);
  text-align:center;
}
.yaagi-admin-mini-metrics strong { font-size:1.05rem; }
.yaagi-admin-mini-metrics small { opacity:.72; }
.yaagi-admin-shortcut-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.yaagi-admin-shortcut-grid a {
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 12px;
  border-radius:13px;
  border:1px solid rgba(15,35,70,.12);
  background:#fff;
  color:inherit;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 7px 18px rgba(15,35,70,.05);
}
.yaagi-admin-shortcut-grid a:hover { transform:translateY(-1px); }
.yaagi-admin-only-card[hidden] { display:none !important; }
@media (max-width:900px) {
  .yaagi-admin-test-family-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .yaagi-admin-mini-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .yaagi-admin-shortcut-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px) {
  .yaagi-admin-test-family-form { grid-template-columns:1fr; }
  .yaagi-admin-mini-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .yaagi-admin-shortcut-grid { grid-template-columns:1fr; }
}

.yaagi-admin-test-family-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:10px 0 18px;
  padding:12px 14px;
  border:1px solid rgba(185,130,0,.24);
  border-radius:16px;
  background:linear-gradient(90deg,rgba(255,245,199,.96),rgba(255,251,234,.96));
  color:#5c4300;
  box-shadow:0 8px 20px rgba(80,55,0,.07);
}
.yaagi-admin-test-family-banner > div:first-child { display:grid; gap:2px; }
.yaagi-admin-test-family-banner strong { font-size:.82rem; letter-spacing:.04em; }
.yaagi-admin-test-family-banner span { font-size:.78rem; }
.yaagi-admin-test-family-banner-actions { display:flex; gap:8px; flex-wrap:wrap; }
.yaagi-admin-test-family-banner-actions a,
.yaagi-admin-test-family-banner-actions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  margin:0;
  padding:7px 11px;
  border:1px solid rgba(92,67,0,.18);
  border-radius:10px;
  background:#fff;
  color:#5c4300;
  font:inherit;
  font-size:.78rem;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
}
@media (max-width:640px) {
  .yaagi-admin-test-family-banner { align-items:flex-start; flex-direction:column; }
}

/* YAAGI 11.3 - definitive tablet/index navigation fix.
   Earlier desktop overrides start at 761px and used !important, while compact
   navigation starts at 930px. Keep the hamburger and collapse state usable in
   the overlap (761-930px), including on the dashboard/index page. */
@media (min-width: 761px) and (max-width: 930px) {
  html body .yaagi-mobile-nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html body .app > .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed,
  html body .app .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed,
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed {
    display: none !important;
  }
  html body .app > .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed),
  html body .app .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed),
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ================================================================
   YAAGI 11.3 - definitive navigation correction + 6-link Hulp menu
   ================================================================ */
@media (min-width: 931px) {
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr)) 78px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    grid-column: 7 !important;
  }
}
@media (min-width: 761px) and (max-width: 930px) {
  html body .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-header-menu-slot {
    display: none !important;
  }
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed,
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    grid-column: 1 / -1 !important;
  }
}
@media (max-width: 760px) {
  html body .yaagi-mobile-nav-toggle {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* YAAGI 11.3 - state-class specificity guard for the six-link navigation. */
@media (min-width: 931px) {
  html body .app > .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher,
  html body .app .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher,
  html body .app > .bottom-nav.yaagi-unified-top-nav.has-yaagi-gold-status,
  html body .app .bottom-nav.yaagi-unified-top-nav.has-yaagi-gold-status,
  html body .app > .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status,
  html body .app .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    grid-template-columns: repeat(6, minmax(0, 1fr)) 78px !important;
  }
  html body .app .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher .ps-nav-language-switcher,
  html body .app .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher #parentSyncGlobalLanguageSwitcher {
    grid-column: 7 !important;
  }
}
@media (min-width: 761px) and (max-width: 930px) {
  html body .app > .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher,
  html body .app .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher,
  html body .app > .bottom-nav.yaagi-unified-top-nav.has-yaagi-gold-status,
  html body .app .bottom-nav.yaagi-unified-top-nav.has-yaagi-gold-status,
  html body .app > .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status,
  html body .app .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ================================================================
   YAAGI 11.4 - definitive index/navigation breakpoint correction
   One layout only per viewport range:
   - > 930px: full six-link desktop navigation + language selector
   - <=930px: compact language selector + hamburger in header
   This intentionally overrides the YAAGI 11.3 tablet overlap rules.
   ================================================================ */
@media (min-width: 931px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
    grid-template-areas: "title logo gold" !important;
    align-items: end !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot,
  html body .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-header-menu-slot {
    display: none !important;
  }
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed,
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed),
  html body .app > .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher,
  html body .app .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) 78px !important;
    grid-template-rows: var(--yaagi-menu-item-height) !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: var(--yaagi-menu-height) !important;
    height: var(--yaagi-menu-height) !important;
    max-height: var(--yaagi-menu-height) !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav > a {
    display: inline-flex !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher #parentSyncGlobalLanguageSwitcher {
    display: inline-flex !important;
    grid-column: 7 !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    justify-self: end !important;
  }
}

@media (max-width: 930px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) 52px !important;
    grid-template-areas:
      "lang logo menu"
      "title title gold" !important;
    align-items: end !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    grid-area: lang !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-self: start !important;
    align-self: end !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: end !important;
    margin: 0 auto !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-self: end !important;
    align-self: end !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    border-radius: 16px !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    justify-self: start !important;
    align-self: end !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
    justify-self: end !important;
    align-self: end !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed,
  html body .app > .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed,
  html body .app .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed {
    display: none !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed),
  html body .app > .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed),
  html body .app .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) {
    box-sizing: border-box !important;
    position: sticky !important;
    top: 8px !important;
    z-index: 81 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    gap: 6px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 8px 0 18px !important;
    padding: 10px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    border-radius: 22px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) > a {
    display: inline-flex !important;
    min-height: 44px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    display: none !important;
  }
}



/* ================================================================
   YAAGI 11.6 - definitive app chrome: one breakpoint, six menu links
   Header -> navigation -> content. Removes legacy fixed desktop nav.
   ================================================================ */
@media (min-width: 931px) {
  html body {
    padding-top: 0 !important;
  }
  html body .app {
    padding-top: 24px !important;
  }
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    grid-template-areas: "title logo gold" !important;
    align-items: end !important;
    min-height: 118px !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    column-gap: 24px !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    justify-self: start !important;
    align-self: end !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: end !important;
    margin: 0 auto !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
    justify-self: end !important;
    align-self: end !important;
    margin: 0 !important;
  }
  html body .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-header-menu-slot,
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    display: none !important;
  }
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) 78px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 62px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 28px !important;
    padding: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    border-radius: 24px !important;
  }
  body.yaagi-dashboard-page .app > .bottom-nav.yaagi-unified-top-nav,
  body.yaagi-dashboard-page .app .bottom-nav.yaagi-unified-top-nav {
    grid-column: 1 / -1 !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav > a {
    display: flex !important;
    min-width: 0 !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    display: inline-flex !important;
    grid-column: 7 !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    justify-self: end !important;
  }
}

@media (max-width: 930px) {
  html body {
    padding-top: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) 52px !important;
    grid-template-areas:
      "lang logo menu"
      "title title gold" !important;
    align-items: end !important;
    min-height: 0 !important;
    height: auto !important;
    column-gap: 8px !important;
    row-gap: 12px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    grid-area: lang !important;
    display: inline-flex !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed {
    display: none !important;
  }
  html body .app > .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed),
  html body .app .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed),
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 12px 0 24px !important;
    padding: 8px !important;
    overflow: visible !important;
  }
  body.yaagi-dashboard-page .app > .bottom-nav.yaagi-unified-top-nav,
  body.yaagi-dashboard-page .app .bottom-nav.yaagi-unified-top-nav {
    grid-column: 1 / -1 !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    display: none !important;
  }
}

/* ================================================================
   YAAGI 11.13 - center language names in the expanded selector
   ================================================================ */
.ps-global-language-switcher select[data-parent-sync-language-select="true"] option,
.ps-nav-language-switcher select[data-parent-sync-language-select="true"] option,
.yaagi-mobile-language-slot select[data-parent-sync-language-select="true"] option,
.login-page-nav-language select option,
#langSelect option {
  text-align: center !important;
  text-align-last: center !important;
  direction: ltr !important;
}


/* YAAGI 11.13 finetuning */
.ps-global-language-switcher select[data-parent-sync-language-select="true"],
.ps-nav-language-switcher select[data-parent-sync-language-select="true"],
.yaagi-mobile-language-slot select[data-parent-sync-language-select="true"],
.login-page-nav-language select,
#langSelect { text-align:center !important; text-align-last:center !important; }
.ps-global-language-switcher select[data-parent-sync-language-select="true"] option,
.ps-nav-language-switcher select[data-parent-sync-language-select="true"] option,
.yaagi-mobile-language-slot select[data-parent-sync-language-select="true"] option,
.login-page-nav-language select option,
#langSelect option { text-align:center !important; text-align-last:center !important; padding-inline:0 !important; }
.yaagi-help-lifebuoy{display:inline-block!important;width:1.2em!important;height:1.2em!important;border-radius:50%!important;background:conic-gradient(#dc2626 0 12.5%,#fff 12.5% 25%,#dc2626 25% 37.5%,#fff 37.5% 50%,#dc2626 50% 62.5%,#fff 62.5% 75%,#dc2626 75% 87.5%,#fff 87.5% 100%)!important;border:2px solid #dc2626!important;box-shadow:inset 0 0 0 .23em #fff, inset 0 0 0 .38em #dc2626!important;vertical-align:-.18em!important;}
.settings-profile-editbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:10px 0 16px}.settings-profile-editbar button{width:auto;margin:0}.is-profile-locked{background:#f5f7fa!important;color:#334155!important;opacity:1!important;cursor:default!important}.is-editing-profile .settings-profile-editbar{display:none}

/* YAAGI 11.13: browser-independent centered language popup */
.ps-global-language-switcher{position:relative!important;overflow:visible!important;}
.ps-global-language-switcher .yaagi-language-native-select{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;}
.ps-global-language-switcher .yaagi-language-custom-trigger{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;background:transparent!important;border:0!important;box-shadow:none!important;cursor:pointer!important;z-index:3!important;padding:0!important;}
.ps-global-language-switcher .yaagi-language-custom-menu{position:absolute!important;top:calc(100% + 8px)!important;left:50%!important;transform:translateX(-50%)!important;min-width:190px!important;width:max-content!important;max-width:min(260px,90vw)!important;background:#fff!important;border:1px solid #dbe5f2!important;border-radius:16px!important;padding:8px!important;box-shadow:0 14px 34px rgba(15,23,42,.16)!important;z-index:10000!important;}
.ps-global-language-switcher .yaagi-language-custom-menu[hidden]{display:none!important;}
.ps-global-language-switcher .yaagi-language-custom-option{display:block!important;width:100%!important;margin:0!important;padding:10px 18px!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:#0f2747!important;text-align:center!important;font:inherit!important;font-weight:700!important;white-space:nowrap!important;}
.ps-global-language-switcher .yaagi-language-custom-option:hover,.ps-global-language-switcher .yaagi-language-custom-option.is-active{background:#eef6ff!important;}
.yaagi-help-lifebuoy.ps-nav-icon{flex:0 0 auto!important;}


/* YAAGI 12.1 - focused scalable admin analytics */
.yaagi-admin-app{max-width:1480px;margin:0 auto;padding-bottom:60px}
.yaagi-admin-commandbar{display:flex;justify-content:space-between;gap:18px;align-items:center;position:sticky;top:8px;z-index:20}
.yaagi-admin-commandbar-copy{display:flex;flex-direction:column;gap:4px}.yaagi-admin-commandbar-copy span{color:var(--muted)}
.yaagi-admin-tabs{display:flex;gap:8px;overflow:auto;padding:8px;background:#fff;border:1px solid var(--border);border-radius:18px;margin:18px 0;position:sticky;top:100px;z-index:19}
.yaagi-admin-tabs button{width:auto;white-space:nowrap;background:#f6f8fb;color:var(--text);border:1px solid transparent}.yaagi-admin-tabs button.is-active{background:#0b2a4a;color:#fff}
.yaagi-admin-panel{display:none}.yaagi-admin-panel.is-active{display:block}
.yaagi-admin-table{table-layout:fixed;width:100%;border-collapse:collapse}.yaagi-admin-table th,.yaagi-admin-table td{vertical-align:middle;padding:12px 10px;overflow-wrap:anywhere}.yaagi-admin-table th{text-align:left}.yaagi-admin-table th.number,.yaagi-admin-table td.number{text-align:right;font-variant-numeric:tabular-nums}.yaagi-admin-table td.number{padding-right:14px}
.yaagi-admin-table thead th{position:sticky;top:0;background:#f5f7fa;z-index:1}
.yaagi-admin-filter-toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:end}.yaagi-admin-filter-toolbar label{min-width:220px;flex:1}.yaagi-admin-filter-toolbar select,.yaagi-admin-filter-toolbar input{margin-top:6px}
.yaagi-admin-insight-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.yaagi-admin-insight-grid>div{background:#f7f9fc;border:1px solid var(--border);border-radius:14px;padding:14px}.yaagi-admin-insight-grid strong{display:block;font-size:1.35rem}.yaagi-admin-insight-grid small{color:var(--muted)}
.yaagi-admin-print-heading{display:none}
@media(max-width:900px){.yaagi-admin-commandbar{position:static;align-items:flex-start;flex-direction:column}.yaagi-admin-tabs{position:static}.yaagi-admin-insight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.yaagi-admin-table-wrap{overflow:auto}.yaagi-admin-table{min-width:760px}}
@media print{
 body.yaagi-admin-page{background:#fff!important}.yaagi-admin-app{max-width:none;padding:0}.no-print,.topbar,.bottom-nav{display:none!important}.yaagi-admin-panel{display:none!important}.yaagi-admin-panel.yaagi-print-target{display:block!important}.yaagi-admin-print-heading{display:block!important;border-bottom:2px solid #0b2a4a;margin-bottom:16px}.yaagi-admin-print-heading h1{font-size:22px}.card{box-shadow:none!important;border:1px solid #ccd5df!important;break-inside:avoid}.yaagi-admin-table{font-size:10px;table-layout:auto}.yaagi-admin-table th,.yaagi-admin-table td{padding:6px}.yaagi-admin-table thead th{position:static}.yaagi-admin-year{break-inside:avoid}.yaagi-admin-table-wrap{overflow:visible!important}
}


/* YAAGI 12.1: compact, complete holiday artwork on phones */
@media (max-width: 640px) {
  .yaagi-holiday-card,
  .holiday-review-row.yaagi-holiday-card,
  .holiday-edit-row.yaagi-holiday-card,
  .vacation-admin-row {
    min-height: 118px !important;
    padding: 14px 42% 14px 14px !important;
    border-radius: 22px !important;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.68) 40%, rgba(255,255,255,.12) 72%, rgba(255,255,255,0) 100%),
      var(--holiday-art) !important;
    background-size: cover, contain !important;
    background-position: center, right center !important;
    background-repeat: no-repeat !important;
  }
  .yaagi-holiday-card-body strong,
  .holiday-review-row.yaagi-holiday-card strong,
  .holiday-edit-row.yaagi-holiday-card strong,
  .vacation-admin-row strong {
    font-size: clamp(1.05rem, 5vw, 1.35rem) !important;
    line-height: 1.08 !important;
  }
  .yaagi-holiday-card-body span,
  .holiday-review-row.yaagi-holiday-card span,
  .holiday-edit-row.yaagi-holiday-card span,
  .vacation-admin-row span {
    font-size: .9rem !important;
    line-height: 1.2 !important;
  }
}


/* YAAGI 12.1 - stable trial banner and recognizable help lifebuoy */
body.yaagi-dashboard-page #yaagiTrialExpiryNotice{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  margin:0 0 4px !important;
  padding:14px 18px !important;
}
body.yaagi-dashboard-page #yaagiTrialExpiryNotice > div{min-width:0!important;flex:1 1 auto!important;}
body.yaagi-dashboard-page #yaagiTrialExpiryNotice a{flex:0 0 auto!important;}
.yaagi-help-lifebuoy{
  width:20px!important;height:20px!important;min-width:20px!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background:transparent url('../assets/img/yaagi-help-lifebuoy.svg?v=YAAGI_19_3') center/contain no-repeat!important;
}
@media (max-width:720px){
  body.yaagi-dashboard-page #yaagiTrialExpiryNotice{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:13px 14px!important;}
  body.yaagi-dashboard-page #yaagiTrialExpiryNotice a{margin-top:0!important;white-space:normal!important;text-align:center!important;}
}


/* ================================================================
   YAAGI 12.1 - mobile header: hamburger below the centered logo
   ================================================================ */
@media (max-width: 930px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(72px, 1fr) minmax(120px, 1.5fr) minmax(88px, 1fr) !important;
    grid-template-areas:
      "lang logo gold"
      ". menu ."
      "title title title" !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    grid-area: lang !important;
    justify-self: start !important;
    align-self: center !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: center !important;
    z-index: 1 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    justify-self: center !important;
    align-self: center !important;
    position: static !important;
    z-index: 2 !important;
    margin: 0 auto !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
    justify-self: end !important;
    align-self: center !important;
    min-width: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    justify-self: stretch !important;
    align-self: start !important;
    width: 100% !important;
  }
}

/* ================================================================
   YAAGI 12.1 - canonical desktop floating menu + mobile header
   This is the final responsive source of truth for the shared app chrome.
   Keep header/logo/GOLD slots stable; do not add per-page overrides below it.
   ================================================================ */
@media (min-width: 931px) {
  html body .app > .bottom-nav.yaagi-unified-top-nav,
  html body .app .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-gold-status,
  html body .bottom-nav.yaagi-unified-top-nav.has-yaagi-language-switcher.has-yaagi-gold-status {
    position: sticky !important;
    top: 12px !important;
    inset-inline: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) 78px !important;
    grid-template-rows: 44px !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 60px !important;
    height: 60px !important;
    margin: 10px 0 20px !important;
    padding: 8px !important;
    overflow: visible !important;
    border-radius: 999px !important;
    border: 1px solid rgba(15, 35, 75, .10) !important;
    background: rgba(255, 255, 255, .92) !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .14) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav > a {
    display: inline-flex !important;
    min-width: 0 !important;
    height: 44px !important;
    padding-inline: 9px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    display: inline-flex !important;
    grid-column: 7 !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 44px !important;
    min-height: 44px !important;
    justify-self: end !important;
  }
}

@media (max-width: 930px) {
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(72px, 1fr) 56px minmax(88px, 1fr) !important;
    grid-template-areas:
      "logo logo logo"
      "lang menu gold"
      "title title title" !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 auto !important;
    z-index: 1 !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    grid-area: lang !important;
    display: inline-flex !important;
    justify-self: start !important;
    align-self: center !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    display: inline-flex !important;
    justify-self: center !important;
    align-self: center !important;
    position: static !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 15px !important;
    z-index: 2 !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: gold !important;
    justify-self: end !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 118px !important;
    margin: 0 !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 118px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px 9px !important;
    gap: 5px !important;
    font-size: .70rem !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status img {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    justify-self: stretch !important;
    align-self: start !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-collapsed {
    display: none !important;
  }
  html body .app > .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed),
  html body .app .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed),
  html body .bottom-nav.yaagi-unified-top-nav:not(.yaagi-mobile-collapsed) {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 10px 0 22px !important;
    padding: 8px !important;
    overflow: visible !important;
    border-radius: 22px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav #parentSyncGlobalLanguageSwitcher {
    display: none !important;
  }
}

@media (max-width: 430px) {
  html body .app .topbar.yaagi-stable-header {
    grid-template-columns: minmax(64px, 1fr) 52px minmax(80px, 1fr) !important;
    column-gap: 7px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot,
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status {
    max-width: 104px !important;
  }
}


/* ================================================================
   YAAGI 12.7 - persistent mail/custom-tab recovery controls
   ================================================================ */
@media (max-width:930px) {
  .yaagi-mobile-browser-controls.yaagi-transition-browser-controls {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    width:100% !important;
    min-height:52px !important;
    box-sizing:border-box !important;
    padding:6px 8px !important;
    position:sticky !important;
    top:0 !important;
    z-index:10050 !important;
    background:rgba(255,255,255,.98) !important;
    border-bottom:1px solid rgba(16,34,67,.14) !important;
    box-shadow:0 5px 16px rgba(16,34,67,.10) !important;
  }
  .yaagi-mobile-browser-controls.yaagi-transition-browser-controls .yaagi-browser-open-button {
    display:inline-flex !important;
    width:auto !important;
    min-width:104px !important;
    padding:0 10px !important;
    font-size:.78rem !important;
    letter-spacing:.01em !important;
    white-space:nowrap !important;
  }
  .yaagi-recovery-language {
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:58px !important;
    min-width:58px !important;
    height:40px !important;
    margin-left:auto !important;
    border:1px solid rgba(16,34,67,.14) !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#102243 !important;
    font-weight:900 !important;
    overflow:hidden !important;
  }
  .yaagi-recovery-language-code {
    pointer-events:none !important;
    font-size:.86rem !important;
    line-height:1 !important;
  }
  .yaagi-recovery-language-select {
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    opacity:0 !important;
    cursor:pointer !important;
  }
}

/* ================================================================
   YAAGI 12.7 - clean subscription page
   ================================================================ */
body.subscription-page.yaagi-subscription-clean-page {
  background: radial-gradient(circle at 10% 0%, rgba(219,234,254,.72), transparent 34%), linear-gradient(180deg,#f8fbff 0%,#fff 58%,#f7fafc 100%) !important;
  color:#102243 !important;
}
body.subscription-page.yaagi-subscription-clean-page .app { width:min(1120px,calc(100vw - 32px)) !important; max-width:1120px !important; }
.yaagi-subscription-main { display:grid; gap:18px; }
html.yaagi-precheckout-mode body.subscription-page .yaagi-subscription-main,
body.subscription-page.yaagi-checkout-mode .yaagi-subscription-main,
body.subscription-page.yaagi-checkout-success-mode .yaagi-subscription-main { display:none !important; }
.yaagi-subscription-clean-page .card { border:1px solid rgba(15,35,75,.10); background:rgba(255,255,255,.97); box-shadow:0 16px 42px rgba(15,35,75,.09); }
.yaagi-subscription-state-card { position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:22px; padding:clamp(24px,4vw,38px) !important; border-color:rgba(189,137,35,.28) !important; }
.yaagi-subscription-state-card::before { content:""; position:absolute; inset:0 0 auto; height:5px; background:linear-gradient(90deg,#b47a16,#f6d97e,#c89025); }
.yaagi-subscription-state-copy { display:grid; gap:10px; min-width:0; }
.yaagi-subscription-state-copy h2 { margin:0; color:#0b2552; font-size:clamp(1.65rem,3vw,2.45rem); line-height:1.08; }
.yaagi-subscription-state-copy>p:not(.yaagi-plus-kicker) { margin:0; color:#43526e; line-height:1.55; }
.yaagi-subscription-coffee-text { max-width:760px; padding-top:3px; font-size:.94rem; font-style:italic; }
.yaagi-subscription-state-actions { display:flex; align-items:center; justify-content:flex-end; min-width:min(230px,100%); }
.yaagi-subscription-state-actions a[hidden] { display:none !important; }
body.yaagi-subscription-state-trial .yaagi-subscription-state-card { border-color:rgba(40,167,100,.30) !important; background:linear-gradient(135deg,#fff 0%,#f2fff7 100%); }
body.yaagi-subscription-state-paid .yaagi-subscription-state-card { border-color:rgba(189,137,35,.40) !important; background:linear-gradient(135deg,#fff 0%,#fff9e9 100%); }
body.yaagi-subscription-state-expired .yaagi-subscription-state-card,
body.yaagi-subscription-state-cancelled .yaagi-subscription-state-card { background:linear-gradient(135deg,#fff 0%,#fff9f3 100%); }
.yaagi-section-heading-row { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.yaagi-section-heading-row h2,.yaagi-subscription-options-heading h2,.yaagi-subscription-summary-card h2 { margin:2px 0 0; color:#102243; }
.yaagi-compact-refresh { width:auto !important; min-width:160px; margin:0 !important; }
.yaagi-subscription-status-grid-clean { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
.yaagi-subscription-status-grid-clean>div { min-height:82px; padding:16px 18px; border:1px solid rgba(15,35,75,.09); border-radius:16px; background:#f8fbff; }
.yaagi-subscription-status-clean .subscription-status-text { margin:16px 0 0; color:#33435f; font-weight:700; }
.yaagi-subscription-options-card { display:grid; gap:24px; padding:clamp(22px,4vw,34px) !important; }
.yaagi-subscription-options-card[hidden] { display:none !important; }
.yaagi-subscription-options-heading { display:grid; gap:6px; max-width:780px; }
.yaagi-subscription-options-heading p { margin:0; color:#4b5b75; }
.yaagi-subscription-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
.yaagi-subscription-plan-card { display:flex; flex-direction:column; gap:13px; min-width:0; padding:22px; border:1px solid rgba(15,35,75,.11); border-radius:20px; background:#fff; box-shadow:0 12px 28px rgba(15,35,75,.07); }
.yaagi-subscription-plan-card.is-yearly { border-color:rgba(197,143,29,.40); background:linear-gradient(155deg,#fffdf8 0%,#fff7dc 100%); }
.yaagi-subscription-plan-card.is-trial { background:linear-gradient(155deg,#fff 0%,#f2fff7 100%); border-color:rgba(38,159,96,.28); }
.yaagi-subscription-plan-card[hidden],.yaagi-subscription-plan-card button[hidden] { display:none !important; }
.yaagi-plan-card-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.yaagi-subscription-plan-card h3 { margin:0; color:#0b2552; font-size:clamp(1.8rem,3vw,2.45rem); }
.yaagi-subscription-plan-card>p { flex:1 1 auto; margin:0; color:#4b5b75; line-height:1.5; }
.yaagi-subscription-plan-card .yaagi-plan-button { width:100%; margin-top:auto; }
.yaagi-basic-choice-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border:1px solid rgba(15,35,75,.10); border-radius:18px; background:#f8fbff; }
.yaagi-basic-choice-row[hidden] { display:none !important; }
.yaagi-basic-choice-row strong { display:block; color:#102243; margin-bottom:4px; }
.yaagi-basic-choice-row p { margin:0; color:#52617a; }
.yaagi-basic-choice-row a { flex:0 0 auto; white-space:nowrap; }
.yaagi-subscription-summary-card { padding:clamp(22px,4vw,32px) !important; }
.yaagi-subscription-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }
.yaagi-subscription-summary-grid>div { padding:18px 20px; border:1px solid rgba(15,35,75,.09); border-radius:17px; background:#f8fbff; }
.yaagi-subscription-summary-grid strong { color:#102243; }
.yaagi-subscription-summary-grid p { margin:7px 0 0; color:#52617a; line-height:1.48; }
.yaagi-checkout-back-link { display:inline-flex; width:fit-content; color:#243b63; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.yaagi-subscription-clean-page .yaagi-checkout-intent-card { border-color:rgba(189,137,35,.30) !important; background:linear-gradient(145deg,#fff 0%,#fffdf8 100%) !important; }
@media(max-width:900px){
  .yaagi-subscription-state-card{grid-template-columns:1fr;}
  .yaagi-subscription-state-actions{justify-content:flex-start;min-width:0;}
  .yaagi-subscription-plan-grid{grid-template-columns:1fr;}
  .yaagi-subscription-status-grid-clean{grid-template-columns:1fr !important;}
  .yaagi-subscription-summary-grid{grid-template-columns:1fr;}
}
@media(max-width:620px){
  body.subscription-page.yaagi-subscription-clean-page .app{width:min(100%,calc(100vw - 20px)) !important;}
  .yaagi-section-heading-row,.yaagi-basic-choice-row{align-items:stretch;flex-direction:column;}
  .yaagi-compact-refresh,.yaagi-basic-choice-row a{width:100% !important;white-space:normal;}
}


/* ================================================================
   YAAGI 12.14 - authoritative language code and session controls
   ================================================================ */
.ps-global-language-switcher,
.ps-nav-language-switcher,
.yaagi-mobile-language-slot,
.login-page-nav-language .ps-global-language-switcher {
  position: relative !important;
  overflow: visible !important;
}
.ps-global-language-switcher .yaagi-language-code,
.ps-nav-language-switcher .yaagi-language-code,
.yaagi-mobile-language-slot .yaagi-language-code,
.login-page-nav-language .yaagi-language-code {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 22px 0 6px !important;
  align-items: center !important;
  justify-content: center !important;
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  font-weight: 900 !important;
  pointer-events: none !important;
  z-index: 6 !important;
}
.ps-global-language-switcher .yaagi-language-native-select,
.ps-nav-language-switcher .yaagi-language-native-select,
.yaagi-mobile-language-slot .yaagi-language-native-select,
.login-page-nav-language .yaagi-language-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.ps-global-language-switcher .yaagi-language-custom-trigger,
.ps-nav-language-switcher .yaagi-language-custom-trigger,
.yaagi-mobile-language-slot .yaagi-language-custom-trigger,
.login-page-nav-language .yaagi-language-custom-trigger {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 7 !important;
  background: transparent !important;
  color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.yaagi-auth-session-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 6px !important;
}
.yaagi-auth-session-row .ps-user-badge,
.yaagi-auth-session-row .ps-user-badge.ps-status-control {
  margin: 0 !important;
  width: auto !important;
  max-width: min(100%, 360px) !important;
}
.yaagi-header-logout-btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 13px !important;
  border: 1px solid rgba(120,76,0,.22) !important;
  border-radius: 999px !important;
  background: #fff8e5 !important;
  color: #6c4600 !important;
  box-shadow: 0 5px 14px rgba(15,23,42,.08) !important;
  font-size: .82rem !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  cursor: pointer !important;
}
.yaagi-header-logout-btn[hidden] { display: none !important; }
.yaagi-header-logout-btn:hover,
.yaagi-header-logout-btn:focus-visible {
  background: #f6c84f !important;
  color: #102243 !important;
}
body.login-page .yaagi-login-identity,
body.login-page #loginCurrentSession { display: none !important; }
body.login-page .login-signed-in-actions .login-actions {
  justify-content: flex-start !important;
}
@media (max-width: 930px) {
  .yaagi-auth-session-row { gap: 6px !important; }
  .yaagi-header-logout-btn { min-height: 32px !important; padding: 6px 10px !important; font-size: .76rem !important; }
}


/* ================================================================
   YAAGI 12.14 - requested scope only: page logout, 2-letter language code
   ================================================================ */
.yaagi-header-logout-btn { display: none !important; }
.login-page-session-copy { margin-bottom: 4px !important; }
.login-page-session-email { margin: 0 0 14px !important; font-weight: 800 !important; overflow-wrap: anywhere !important; }
.ps-global-language-switcher .yaagi-language-code,
.ps-nav-language-switcher .yaagi-language-code,
.yaagi-mobile-language-slot .yaagi-language-code,
.login-page-nav-language .yaagi-language-code {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
  font-size: .88rem !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
}
.yaagi-subscription-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 760px) { .yaagi-subscription-plan-grid { grid-template-columns: 1fr !important; } }


/* ================================================================
   YAAGI 12.14 - persistent, clickable two-letter language selector
   ================================================================ */
#parentSyncGlobalLanguageSwitcher {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#parentSyncGlobalLanguageSwitcher .yaagi-language-custom-trigger {
  display: block !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 20 !important;
}
#parentSyncGlobalLanguageSwitcher .yaagi-language-custom-menu {
  pointer-events: auto !important;
  z-index: 20000 !important;
}
#parentSyncGlobalLanguageSwitcher .yaagi-language-code {
  text-transform: uppercase !important;
}


/* YAAGI 12.14 - reliable browser fallback when a mail custom tab hides native browser chrome. */
.yaagi-browser-fallback-panel {
  position: sticky;
  top: 52px;
  z-index: 9998;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(16,34,67,.16);
  background: rgba(255,255,255,.99);
  box-shadow: 0 8px 20px rgba(16,34,67,.10);
}
.yaagi-browser-fallback-panel[hidden] { display: none !important; }
.yaagi-browser-fallback-panel p { margin: 0 0 8px; font-weight: 750; }
.yaagi-browser-fallback-url {
  width: 100%;
  min-height: 42px;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid rgba(16,34,67,.18);
  border-radius: 12px;
  background: #f7faff;
  color: #102243;
  font-size: .82rem;
}
.yaagi-browser-fallback-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.yaagi-browser-fallback-actions > * { flex: 1 1 150px; margin: 0 !important; }
@media (max-width: 930px) {
  .yaagi-browser-fallback-panel { top: 48px; }
}

/* YAAGI 12.14 - visible save feedback prevents repeated clicks during database writes. */
.yaagi-save-busy {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(194, 139, 16, .28);
  border-radius: 14px;
  background: #fff9df;
  color: #5f4300;
  font-weight: 850;
}
.yaagi-save-busy::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(194, 139, 16, .24);
  border-top-color: #c28b10;
  border-radius: 50%;
  animation: yaagi-save-spin .75s linear infinite;
}
@keyframes yaagi-save-spin { to { transform: rotate(360deg); } }
button[aria-busy="true"] { cursor: wait !important; opacity: .78; }


/* ================================================================
   YAAGI 13.1 - one reliable language control on every app page
   ================================================================ */
/* The two-letter code is visual only. The full-size native select is the
   single click target on desktop, mobile and mail/custom-tab browsers. */
#parentSyncGlobalLanguageSwitcher,
.ps-global-language-switcher,
.ps-nav-language-switcher,
.yaagi-mobile-language-slot,
.login-page-nav-language .ps-global-language-switcher {
  position: relative !important;
  overflow: visible !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}
#parentSyncGlobalLanguageSwitcher .yaagi-language-code {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 31 !important;
  text-transform: uppercase !important;
}
#parentSyncGlobalLanguageSwitcher select.yaagi-language-native-select,
#parentSyncGlobalLanguageSwitcher select[data-parent-sync-language-select="true"] {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 40 !important;
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}
#parentSyncGlobalLanguageSwitcher select.yaagi-language-native-select option,
#parentSyncGlobalLanguageSwitcher select[data-parent-sync-language-select="true"] option {
  color: #102243 !important;
  -webkit-text-fill-color: #102243 !important;
  background: #fff !important;
  text-align: left !important;
}
/* No second JavaScript dropdown may cover or compete with the native select. */
#parentSyncGlobalLanguageSwitcher .yaagi-language-custom-trigger,
#parentSyncGlobalLanguageSwitcher .yaagi-language-custom-menu {
  display: none !important;
  pointer-events: none !important;
}
/* Local selectors on Settings, password reset and the recovery bar remain
   native controls and must always accept taps. */
.settings-language-compact select,
.reset-language-compact select,
.yaagi-recovery-language-select {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}

/* ================================================================
   YAAGI 13.1 - authoritative shared mobile header layout
   One stable order on every normal app page:
   logo -> language/menu/Gold controls -> page title + session status.
   This prevents the language selector from sitting on top of or beside the
   login-status badge and removes competing mobile grid placements.
   ================================================================ */
@media (max-width: 930px) {
  html body .app .topbar.yaagi-stable-header {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 10px !important;
    row-gap: 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 4px !important;
    overflow: visible !important;
  }

  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: min(330px, 82vw) !important;
    max-width: min(330px, 82vw) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    justify-self: auto !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    z-index: 1 !important;
  }

  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    order: 2 !important;
    flex: 0 0 66px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    align-self: center !important;
    justify-self: auto !important;
    z-index: 4 !important;
  }

  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    order: 3 !important;
    flex: 0 0 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    min-width: 54px !important;
    max-width: 54px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    align-self: center !important;
    justify-self: auto !important;
    z-index: 3 !important;
  }

  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    order: 4 !important;
    flex: 0 1 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 132px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    align-self: center !important;
    justify-self: auto !important;
    z-index: 2 !important;
  }

  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot:empty {
    display: none !important;
  }

  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status {
    width: auto !important;
    min-width: 0 !important;
    max-width: 132px !important;
    min-height: 40px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    gap: 6px !important;
    font-size: .76rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    order: 5 !important;
    flex: 0 0 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    align-self: stretch !important;
    justify-self: auto !important;
    z-index: 1 !important;
  }

  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .small:first-child,
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > h1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge,
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge.ps-status-control,
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block .yaagi-auth-session-row {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    clear: both !important;
    align-self: flex-start !important;
    width: min(100%, 430px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    z-index: 1 !important;
  }

  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge,
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge.ps-status-control {
    box-sizing: border-box !important;
  }
}

@media (max-width: 430px) {
  html body .app .topbar.yaagi-stable-header {
    column-gap: 8px !important;
    row-gap: 11px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot {
    flex-basis: 62px !important;
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    flex-basis: 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot,
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status {
    max-width: 118px !important;
  }
}

/* YAAGI 13.2 - persistent account identity and logout access */
.yaagi-auth-session-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-top: .35rem;
  flex-wrap: wrap;
}
.yaagi-header-session-email {
  font-size: .78rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.yaagi-header-logout-btn {
  appearance: none;
  border: 1px solid rgba(13, 39, 75, .22);
  border-radius: 999px;
  background: #fff;
  color: #0d274b;
  padding: .38rem .72rem;
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  cursor: pointer;
}
.yaagi-header-logout-btn:disabled { opacity: .6; cursor: wait; }

/* ============================================================
   YAAGI 14.8 — authoritative shared header and subscription polish
   This final block intentionally overrides older page-specific fixes.
============================================================ */

/* Account control remains usable on every page. */
html body .app .topbar .yaagi-header-logout-btn:not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .app .topbar .yaagi-auth-session-row[hidden],
html body .app .topbar .yaagi-header-logout-btn[hidden],
html body .app .topbar .yaagi-header-session-email[hidden] {
  display: none !important;
}

/* Paid Gold replaces the normal green account chip; it is not a second badge. */
html body .app .topbar .ps-user-badge.is-gold-member {
  border-color: rgba(188, 125, 0, .55) !important;
  background: linear-gradient(135deg, #fff8dc 0%, #f8cc4d 58%, #e8a900 100%) !important;
  color: #082348 !important;
  box-shadow: 0 10px 24px rgba(173, 113, 0, .20) !important;
}
html body .app .topbar .ps-user-badge.is-gold-member .ps-status-led-wrap {
  background: rgba(255,255,255,.74) !important;
  border-color: rgba(151, 96, 0, .28) !important;
}
html body .app .topbar .ps-status-led-wrap.is-gold-ball {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .app .topbar .ps-status-gold-ball {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
}
html body .app .topbar .yaagi-header-gold-status.is-trial {
  text-decoration: none !important;
}

/* One calm visual hierarchy for Gold choices. */
.yaagi-subscription-plan-card.is-yearly {
  border: 2px solid rgba(184, 121, 0, .55) !important;
  background: linear-gradient(145deg, #fffdf4 0%, #ffe995 52%, #f1b817 100%) !important;
  box-shadow: 0 18px 38px rgba(169, 105, 0, .18) !important;
}
.yaagi-subscription-plan-card.is-yearly .yaagi-plan-label,
.yaagi-subscription-plan-card.is-yearly h3,
.yaagi-subscription-plan-card.is-yearly > p,
.yaagi-subscription-plan-card.is-yearly .yaagi-yearly-value-note {
  color: #082348 !important;
}
.yaagi-subscription-plan-card.is-yearly .yaagi-plan-button {
  border-color: rgba(118, 74, 0, .52) !important;
  background: linear-gradient(135deg, #fff3b0 0%, #efb512 52%, #d99800 100%) !important;
  color: #082348 !important;
  box-shadow: 0 10px 20px rgba(126, 78, 0, .22) !important;
}
.yaagi-subscription-plan-card:not(.is-yearly) {
  background: #fff !important;
}
.yaagi-yearly-value-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 15px;
  background: rgba(255,255,255,.62);
  font-weight: 850;
  line-height: 1.35;
}
.yaagi-yearly-value-note img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
}
.yaagi-trial-reassurance {
  margin: 8px 0 0;
  color: #42536e;
  font-size: .9rem;
  font-weight: 750;
}
.yaagi-gold-benefits-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(250px, .82fr);
  gap: 24px;
  align-items: stretch;
}
.yaagi-gold-benefits-list {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.yaagi-gold-benefits-list li {
  position: relative;
  padding: 14px 16px 14px 48px;
  border: 1px solid rgba(14, 45, 84, .11);
  border-radius: 16px;
  background: rgba(248, 251, 255, .92);
  color: #173052;
  line-height: 1.45;
}
.yaagi-gold-benefits-list li::before {
  content: "✓";
  position: absolute;
  left: 15px;
  top: 13px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe795, #e7aa00);
  color: #082348;
  font-weight: 950;
}
.yaagi-gold-product-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(155deg, #071c39, #164f95);
  color: #fff;
  overflow: hidden;
}
.yaagi-gold-product-preview strong { font-size: 1.08rem; }
.yaagi-gold-product-preview video {
  display: block;
  width: 100%;
  max-height: 430px;
  border-radius: 16px;
  background: #07152a;
  object-fit: contain;
}
.launch-premium-card .premium-benefits-panel ul {
  display: grid;
  gap: 10px;
}

@media (max-width: 930px) {
  /* The same mobile header grid is used by index, help, children, subscription and every app page. */
  html body .app .topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "logo logo"
      "language menu"
      "title title"
      "trial trial" !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 0 !important;
    column-gap: 14px !important;
    row-gap: 16px !important;
    padding: 18px 0 8px !important;
  }

  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot,
  html body .app .topbar.yaagi-stable-header > .logo-circle,
  html body .app .topbar.yaagi-stable-header > .dashboard-logo-panel {
    grid-area: logo !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    order: initial !important;
  }

  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-language-slot,
  html body .app .topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher,
  html body .app .topbar.yaagi-stable-header > .ps-global-language-switcher {
    grid-area: language !important;
    justify-self: start !important;
    align-self: center !important;
    display: inline-flex !important;
    visibility: visible !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    order: initial !important;
  }

  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    order: initial !important;
    border: 1px solid rgba(12, 41, 79, .12) !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #0b274c !important;
    box-shadow: 0 12px 26px rgba(12, 36, 70, .11) !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot:hover,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot:focus,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot:focus-visible,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot:active,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot.is-open {
    border-color: rgba(12, 41, 79, .18) !important;
    background: #fff !important;
    color: #0b274c !important;
    box-shadow: 0 12px 26px rgba(12, 36, 70, .11) !important;
    outline: 3px solid transparent !important;
  }

  html body .app .topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    justify-self: stretch !important;
    align-self: start !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    order: initial !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .small:first-child,
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > h1 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge,
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge.ps-status-control,
  html body .app .topbar.yaagi-stable-header > .ps-header-title-block > .yaagi-auth-session-row {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(100%, 470px) !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    align-self: flex-start !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: trial !important;
    justify-self: start !important;
    align-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    order: initial !important;
  }
  html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot:empty {
    display: none !important;
  }
  html body .app .topbar.yaagi-stable-header .yaagi-header-gold-status {
    max-width: min(100%, 300px) !important;
    min-height: 44px !important;
  }

  .yaagi-gold-benefits-layout { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  html body .app .topbar.yaagi-stable-header {
    column-gap: 10px !important;
    row-gap: 14px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .app .topbar.yaagi-stable-header > .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
  }
  .yaagi-gold-product-preview video { max-height: 360px; }
}

/* YAAGI 14.8 mobile header lock: defeat legacy page-specific grid/order rules. */
@media (max-width: 930px) {
  html body .app header.topbar.yaagi-stable-header > a.logo-circle.yaagi-header-logo-slot,
  html body .app header.topbar.yaagi-stable-header > a.dashboard-logo-panel.yaagi-header-logo-slot {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: min(330px, 82vw) !important;
    max-width: min(330px, 82vw) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > .small:first-child {
    order: 1 !important;
  }
  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > h1 {
    order: 2 !important;
  }
  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge,
  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge.ps-status-control {
    order: 3 !important;
    grid-area: auto !important;
  }
  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > .yaagi-auth-session-row {
    order: 4 !important;
    grid-area: auto !important;
  }
}
html body.yaagi-help-page .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot:not(:empty),
html body .app .topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot:not(:empty) {
  display: flex !important;
  align-items: center !important;
}

/* ================================================================
   YAAGI 14.8 - final pre-live shared header contract
   One mobile contract for logo, language, menu and title, including auth pages.
   ================================================================ */
@media (max-width: 930px) {
  html body .app header.topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(112px, 1fr) minmax(68px, 1fr) !important;
    grid-template-areas:
      "logo logo"
      "language menu"
      "title title"
      "trial trial" !important;
    column-gap: 12px !important;
    row-gap: 14px !important;
    width: 100% !important;
    padding-inline: 0 !important;
  }

  html body .app header.topbar.yaagi-stable-header > a.logo-circle.yaagi-header-logo-slot,
  html body .app header.topbar.yaagi-stable-header > a.dashboard-logo-panel.yaagi-header-logo-slot {
    grid-area: logo !important;
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(330px, 82vw) !important;
    max-width: min(330px, 82vw) !important;
    margin: 0 auto !important;
  }

  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher {
    grid-area: language !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: start !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    overflow: visible !important;
    visibility: visible !important;
    border: 1px solid rgba(12, 41, 79, .12) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 12px 26px rgba(12, 36, 70, .11) !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    z-index: 30 !important;
  }

  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher .ps-language-code,
  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher .yaagi-language-code,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot .ps-language-code,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot .yaagi-language-code,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher .ps-language-code,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher .yaagi-language-code {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    inset: auto !important;
    min-width: 42px !important;
    min-height: 42px !important;
    color: #0b274c !important;
    font-weight: 900 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher::after,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot::after,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher::after {
    content: "▾" !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #0b274c !important;
    font-size: 15px !important;
    line-height: 1 !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher select,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot select,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher select {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    opacity: .001 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    z-index: 5 !important;
  }

  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 !important;
    border: 1px solid rgba(12, 41, 79, .12) !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #0b274c !important;
    box-shadow: 0 12px 26px rgba(12, 36, 70, .11) !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 30 !important;
  }

  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot:hover,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot:focus,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot:focus-visible,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot:active,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot.is-open,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot[aria-expanded="true"] {
    border-color: rgba(12, 41, 79, .18) !important;
    background: #fff !important;
    color: #0b274c !important;
    box-shadow: 0 12px 26px rgba(12, 36, 70, .11) !important;
    outline: 3px solid transparent !important;
  }

  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block {
    grid-area: title !important;
    justify-self: stretch !important;
    align-self: start !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > .small:first-child,
  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > h1 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge,
  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge.ps-status-control {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: min(100%, 470px) !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    align-self: flex-start !important;
  }

  html body .app header.topbar.yaagi-stable-header > .ps-header-controls.yaagi-header-gold-slot {
    grid-area: trial !important;
    justify-self: start !important;
    align-self: start !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }
}

@media (max-width: 520px) {
  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
  }
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
  }
}

/* E-mail address and logout are intentionally shown only in login.html's account card. */
html body .app .topbar .yaagi-auth-session-row {
  display: none !important;
}

.yaagi-cookie-preferences-button {
  margin-top: 14px;
}

.yaagi-free-test-notice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(12, 41, 79, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .84);
  color: #0b274c;
  font-weight: 700;
}


/* ================================================================
   YAAGI 14.8 - exact mobile header symmetry + clear Gold lock choices
   ================================================================ */
.yaagi-gold-lock-card .yaagi-gold-lock-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 18px !important;
}
.yaagi-gold-lock-card .yaagi-gold-lock-option {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  padding: 13px 18px !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}
.yaagi-gold-lock-card .yaagi-gold-lock-option.is-monthly,
.yaagi-gold-lock-card .yaagi-gold-lock-option.is-trial {
  background: #fff !important;
  color: #0b274c !important;
  border: 1px solid rgba(12, 41, 79, .18) !important;
}
.yaagi-gold-lock-card .yaagi-gold-lock-trial-used {
  margin: 2px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.78) !important;
  color: #6d3a00 !important;
  font-weight: 700 !important;
}
.yaagi-subscription-plan-card[id] {
  scroll-margin-top: 24px;
}

@media (max-width: 930px) {
  html body .app header.topbar.yaagi-stable-header > a.logo-circle.yaagi-header-logo-slot,
  html body .app header.topbar.yaagi-stable-header > a.dashboard-logo-panel.yaagi-header-logo-slot {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  html body .app header.topbar.yaagi-stable-header > a.logo-circle.yaagi-header-logo-slot img,
  html body .app header.topbar.yaagi-stable-header > a.dashboard-logo-panel.yaagi-header-logo-slot img {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: min(330px, 82vw) !important;
    min-width: 0 !important;
    max-width: min(330px, 82vw) !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    border-radius: 20px !important;
  }
  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher::after,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot::after,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher::after {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    right: 12px !important;
    top: 48% !important;
    border-right: 2px solid #0b274c !important;
    border-bottom: 2px solid #0b274c !important;
    transform: translateY(-50%) rotate(45deg) !important;
    font-size: 0 !important;
  }
  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher .ps-language-code,
  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher .yaagi-language-code,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot .ps-language-code,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot .yaagi-language-code,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher .ps-language-code,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher .yaagi-language-code {
    min-width: 0 !important;
    width: 100% !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

@media (max-width: 520px) {
  html body .app header.topbar.yaagi-stable-header > #parentSyncGlobalLanguageSwitcher,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-language-slot,
  html body .app header.topbar.yaagi-stable-header > .ps-global-language-switcher,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-header-menu-slot,
  html body .app header.topbar.yaagi-stable-header > .yaagi-mobile-nav-toggle,
  html body .yaagi-mobile-nav-toggle.yaagi-mobile-header-menu-slot {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    border-radius: 19px !important;
  }
}

/* ================================================================
   YAAGI 14.8 - auth navigation uses the shared desktop menu contract
   Login and e-mail confirmation have six links plus the same compact
   language control as the normal app navigation. This replaces legacy
   190-280 px login-language widths that could force horizontal overflow.
   ================================================================ */
@media (min-width: 931px) {
  html body.login-page .app .login-page-nav.yaagi-unified-login-nav {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) 78px !important;
    grid-template-rows: 44px !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 60px !important;
    height: 60px !important;
    padding: 8px !important;
    overflow: visible !important;
  }
  html body.login-page .app .login-page-nav.yaagi-unified-login-nav > .login-page-nav-link {
    min-width: 0 !important;
    width: auto !important;
    height: 44px !important;
    padding-inline: 9px !important;
  }
  html body.login-page .app .login-page-nav.yaagi-unified-login-nav > #parentSyncGlobalLanguageSwitcher,
  html body.login-page .app .login-page-nav.yaagi-unified-login-nav > .ps-nav-language-switcher {
    display: inline-flex !important;
    grid-column: 7 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* YAAGI 14.8 - keep the extra holiday date fields inside the mobile card. */
.holidays-extra-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.holidays-extra-date-grid > div,
.holidays-extra-date-grid input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .holidays-extra-date-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* YAAGI 14.8 - keep special-day date fields inside the mobile settings card. */
.settings-special-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.settings-special-date-grid > div,
.settings-special-date-grid input {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .settings-special-date-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ================================================================
   YAAGI 14.8 - final launch stability and compact page titles
   ================================================================ */
/* The small eyebrow/kicker above every application title is intentionally hidden. */
html body .app header.topbar .ps-header-title-block > .small:first-child,
html body .app header.topbar > div:first-child > .small:first-child {
  display: none !important;
}
html body .app header.topbar .ps-header-title-block > h1,
html body .app header.topbar > div:first-child > h1 {
  margin-top: 0 !important;
}
html body .app header.topbar.yaagi-stable-header {
  min-height: 178px;
  contain: layout style;
}
html body .app header.topbar .ps-user-badge,
html body .app header.topbar .ps-user-badge.ps-status-control {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
}
html body .app header.topbar .ps-status-text {
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 930px) {
  html body .app header.topbar.yaagi-stable-header {
    min-height: 304px;
    grid-template-areas:
      "logo logo"
      "language menu"
      "title title"
      "trial trial" !important;
  }
  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge,
  html body .app header.topbar.yaagi-stable-header > .ps-header-title-block > .ps-user-badge.ps-status-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* YAAGI 14.8 - direct Stripe plan choice and clear hover affordance. */
.yaagi-subscription-plan-card {
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.yaagi-subscription-plan-card[data-plan="monthly"]:hover,
.yaagi-subscription-plan-card[data-plan="monthly"]:focus-within,
.yaagi-subscription-plan-card[data-plan="monthly"]:focus-visible {
  border-color: rgba(184, 121, 0, .55) !important;
  background: linear-gradient(145deg, #fffdf4 0%, #ffe995 52%, #f1b817 100%) !important;
  box-shadow: 0 18px 38px rgba(169, 105, 0, .18) !important;
  transform: translateY(-1px);
  outline: none;
}
.yaagi-subscription-plan-card[data-plan="monthly"]:hover .yaagi-plan-button,
.yaagi-subscription-plan-card[data-plan="monthly"]:focus-within .yaagi-plan-button,
.yaagi-subscription-plan-card[data-plan="monthly"]:focus-visible .yaagi-plan-button {
  border-color: rgba(118, 74, 0, .52) !important;
  background: linear-gradient(135deg, #fff3b0 0%, #efb512 52%, #d99800 100%) !important;
  color: #082348 !important;
  box-shadow: 0 10px 20px rgba(126, 78, 0, .22) !important;
}
@media (hover: none) {
  .yaagi-subscription-plan-card[data-plan="monthly"]:hover { transform: none; }
}

/* YAAGI 14.8 invitation onboarding isolation */
body.yaagi-family-invite-auth .yaagi-signup-plan-choice,
body.yaagi-family-invite-auth .yaagi-signup-media-column{display:none!important;}
body.yaagi-family-invite-auth .signup-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
body.invite-page .yaagi-header-gold-status,body.email-confirmed-page .yaagi-header-gold-status{display:none!important;}
@media(max-width:700px){body.yaagi-family-invite-auth .signup-setup-grid{grid-template-columns:1fr;}}

/* YAAGI 14.8: official Gold ball for all Gold navigation/help markers. */
.yaagi-gold-ball-icon {
  display: inline-block;
  background: transparent url("../assets/img/GOLD512.png") center/contain no-repeat;
}
.more-item-icon.yaagi-gold-ball-icon { width: 2.25rem; height: 2.25rem; }
.yaagi-inline-gold-ball { display:inline-block; width:1.15em; height:1.15em; vertical-align:-0.18em; background:url("../assets/img/GOLD512.png") center/contain no-repeat; }


/* ================================================================
   YAAGI 14.8 - final mobile signup plan containment
   Full-width clickable cards, centered content and badges inside card.
   ================================================================ */
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan.is-selected::after{display:none!important;content:none!important}
body.login-page .yaagi-signup-redesigned .yaagi-signup-selected-label{
  grid-area:chosen;justify-self:end;align-self:center;display:inline-flex;align-items:center;justify-content:center;
  max-width:100%;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:#0b274c;
  font-size:.64rem;font-weight:950;line-height:1;white-space:nowrap;box-sizing:border-box
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-selected-label[hidden]{display:none!important}
@media(max-width:700px){
  body.login-page #signupPanel.yaagi-signup-redesigned,
  body.login-page .yaagi-signup-layout-card,
  body.login-page .yaagi-signup-main-column,
  body.login-page .signup-plus-choice,
  body.login-page .yaagi-signup-plan-choice,
  body.login-page .yaagi-signup-plan-column,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-grid{
    width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important
  }
  body.login-page #signupPanel.yaagi-signup-redesigned{padding:10px!important;overflow:hidden!important}
  body.login-page .yaagi-signup-layout-card{grid-template-columns:minmax(0,1fr)!important;padding:10px!important;overflow:hidden!important}
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important;margin:0!important;padding:0!important}
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important;min-height:150px!important;
    margin:0!important;padding:20px 16px!important;gap:8px!important;box-sizing:border-box!important;overflow:hidden!important;
    border-radius:20px!important;text-align:center!important
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge):not(.yaagi-signup-selected-label),
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small{
    display:block!important;position:static!important;width:100%!important;max-width:100%!important;min-width:0!important;
    height:auto!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;
    color:inherit!important;text-align:center!important;white-space:normal!important;overflow-wrap:break-word!important;box-sizing:border-box!important
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge):not(.yaagi-signup-selected-label){font-size:1rem!important;line-height:1.2!important;font-weight:900!important}
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong{font-size:1.25rem!important;line-height:1.12!important}
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small{font-size:.9rem!important;line-height:1.3!important;color:#526078!important}
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-badge,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-selected-label{
    position:static!important;inset:auto!important;order:4!important;align-self:center!important;justify-self:center!important;
    width:auto!important;max-width:100%!important;margin:0!important;padding:5px 10px!important;box-sizing:border-box!important;
    font-size:.72rem!important;line-height:1!important;white-space:nowrap!important
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-selected-label{order:5!important}
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid,
  body.login-page .yaagi-signup-redesigned .signup-setup-grid{grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-width:0!important}
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid>*,
  body.login-page .yaagi-signup-redesigned .signup-setup-grid>*{grid-column:1/-1!important;min-width:0!important;max-width:100%!important}
  body.login-page .yaagi-signup-redesigned input,
  body.login-page .yaagi-signup-redesigned select{width:100%!important;max-width:100%!important;box-sizing:border-box!important}
}
@media(max-width:380px){
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan{min-height:142px!important;padding:18px 12px!important}
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong{font-size:1.12rem!important}
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small{font-size:.84rem!important}
}


/* ================================================================
   YAAGI 14.8 - authentication pages are neutral
   The large Gold membership ball is never shown while signing in or
   confirming an e-mail address. Account entitlement remains unchanged.
   ================================================================ */
body.login-page .ps-user-badge.is-gold-member{
  border-color:#b7e8c5!important;
  background:#effaf3!important;
  color:#176b39!important;
  box-shadow:0 9px 22px rgba(23,107,57,.10)!important;
}
body.login-page .ps-status-led-wrap.is-gold-ball{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#e6f7ec!important;
  border-color:#b7e8c5!important;
}
body.login-page .ps-status-led-wrap.is-gold-ball::after{
  content:""!important;
  display:block!important;
  width:12px!important;
  height:12px!important;
  border-radius:50%!important;
  background:#21ad58!important;
  box-shadow:0 0 0 5px rgba(33,173,88,.13)!important;
}
body.login-page .ps-status-gold-ball,
body.login-page .yaagi-header-gold-status,
body.email-confirmed-page .ps-status-gold-ball,
body.email-confirmed-page .yaagi-header-gold-status{display:none!important}

/* YAAGI 16.1: consistent birth-date controls; indicator remains on thumb side. */
.birthdate-select-grid select {
  direction: ltr;
  text-align: left;
  text-align-last: left;
  background-position: right 12px center;
  padding-right: 38px;
}


/* ================================================================
   YAAGI 16.1 PRE-LIVE - stable floating navigation and in-page OTP
   This final layer changes only shared navigation positioning and the
   signup verification card. It does not alter calendar or data logic.
   ================================================================ */
.yaagi-signup-otp-card {
  max-width: 680px;
  margin-inline: auto;
}
.yaagi-signup-otp-entry {
  display: grid;
  gap: 8px;
  margin: 22px 0 16px;
}
.yaagi-signup-otp-entry label {
  color: #102b50;
  font-weight: 900;
}
#signupOtpCode {
  width: min(100%, 360px);
  margin-inline: auto;
  min-height: 68px;
  padding: 12px 18px;
  border: 2px solid #9bb7d7;
  border-radius: 18px;
  background: #fff;
  color: #082348;
  font-size: clamp(1.7rem, 7vw, 2.25rem);
  font-weight: 950;
  letter-spacing: .22em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#signupOtpCode:focus {
  outline: 4px solid rgba(36, 113, 196, .16);
  border-color: #2471c4;
}
.yaagi-signup-otp-entry .small,
.yaagi-signup-otp-fallback {
  text-align: center;
}
.yaagi-signup-otp-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.yaagi-signup-otp-actions #signupBackToLoginBtn {
  grid-column: 1 / -1;
}
.yaagi-nav-floating-placeholder {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
@media (min-width: 931px) {
  html body .app { overflow: visible !important; }
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-nav-floating-active {
    position: fixed !important;
    top: 12px !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(1180px, calc(100vw - 72px)) !important;
    max-width: min(1180px, calc(100vw - 72px)) !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    z-index: 5000 !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .20) !important;
  }
}
@media (max-width: 930px) {
  html body:not(.login-page) .yaagi-mobile-nav-toggle.yaagi-mobile-toggle-floating {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: 54px !important;
    min-width: 54px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    z-index: 5101 !important;
    border: 1px solid rgba(15, 35, 75, .14) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .20) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) {
    position: fixed !important;
    top: max(70px, calc(env(safe-area-inset-top, 0px) + 70px)) !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: min(360px, calc(100vw - 24px)) !important;
    max-height: calc(100dvh - 92px) !important;
    margin: 0 !important;
    padding: 10px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    z-index: 5100 !important;
    border: 1px solid rgba(15, 35, 75, .14) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 20px 52px rgba(15, 23, 42, .24) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }
  .yaagi-signup-otp-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .yaagi-signup-otp-actions #signupBackToLoginBtn {
    grid-column: auto;
  }
}
@media (max-width: 420px) {
  #signupOtpCode {
    letter-spacing: .15em;
    font-size: 1.65rem;
  }
}

/* ================================================================
   YAAGI 16.1 PRE-LIVE - laptop signup plan text containment
   Prevent the selected marker and price copy from sharing the same
   grid area on narrower laptop layouts.
   ================================================================ */
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
  position: relative !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span.yaagi-signup-selected-label {
  display: none !important;
}
@media (min-width: 701px) and (max-width: 1250px) {
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
    grid-template-columns: minmax(138px, 0.9fr) minmax(240px, 1.65fr) minmax(96px, 0.7fr) !important;
    grid-template-areas:
      "price title badge"
      "price text badge" !important;
    min-height: 88px !important;
    height: auto !important;
    padding: 14px 16px !important;
    column-gap: 16px !important;
    row-gap: 5px !important;
    overflow: hidden !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan > span:not(.yaagi-signup-plan-badge):not(.yaagi-signup-selected-label) {
    grid-area: price !important;
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan strong,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan small {
    min-width: 0 !important;
    width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan-badge {
    grid-area: badge !important;
    align-self: center !important;
    justify-self: end !important;
    max-width: 100% !important;
  }
}
@media (min-width: 701px) and (max-width: 900px) {
  body.login-page .yaagi-signup-redesigned .yaagi-signup-plan {
    grid-template-columns: minmax(128px, 0.85fr) minmax(210px, 1.5fr) minmax(90px, 0.65fr) !important;
    padding-inline: 14px !important;
    column-gap: 12px !important;
  }
}


/* ================================================================
   YAAGI 16.1 - focused 8-digit verification and contained trial card
   This final layer deliberately leaves all navigation positioning intact.
   ================================================================ */
body.login-page.yaagi-signup-otp-mode .login-hero,
body.login-page.yaagi-signup-otp-mode .login-page-nav-row,
body.login-page.yaagi-signup-otp-mode #loginRegistrationInfo,
body.login-page.yaagi-signup-otp-mode #signupInfoCard,
body.login-page.yaagi-signup-otp-mode #loginTopStatus {
  display: none !important;
}
body.login-page.yaagi-signup-otp-mode .topbar {
  margin-bottom: 14px !important;
}
body.login-page.yaagi-signup-otp-mode .yaagi-signup-otp-card {
  display: block !important;
  max-width: 620px !important;
  padding: clamp(22px, 5vw, 38px) !important;
  border: 1px solid rgba(48, 180, 108, .28) !important;
  background: linear-gradient(145deg, #f4fff8 0%, #ffffff 100%) !important;
  box-shadow: 0 18px 50px rgba(15, 55, 37, .10) !important;
}
body.login-page.yaagi-signup-otp-mode .yaagi-signup-otp-card > h2,
body.login-page.yaagi-signup-otp-mode .yaagi-signup-otp-card > p {
  text-align: center !important;
}
body.login-page.yaagi-signup-otp-mode .signup-confirm-email {
  display: flex !important;
  width: fit-content !important;
  margin: 16px auto 6px !important;
  padding: 9px 15px !important;
}
#signupOtpCode {
  caret-color: #0b2a55;
}
#signupOtpCode::placeholder {
  color: #7c8797 !important;
  opacity: .78 !important;
  letter-spacing: .16em !important;
}
.yaagi-signup-otp-fallback {
  margin-top: 12px !important;
  color: #667085 !important;
  font-size: .86rem !important;
}
@media (max-width: 760px) {
  html body .yaagi-trial-expiry-notice {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    padding: 16px !important;
  }
  html body .yaagi-trial-expiry-notice > div,
  html body .yaagi-trial-expiry-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body .yaagi-trial-expiry-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 14px !important;
  }
  html body .yaagi-trial-expiry-notice a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }
}

/* ================================================================
   YAAGI 16.1 - compact registration credentials and mobile menu panel
   Keeps authentication logic unchanged; only layout and menu behaviour.
   ================================================================ */
body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 9px 12px !important;
  align-items: end !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div:first-child,
body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div:nth-child(2) {
  grid-column: auto !important;
  min-width: 0 !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-password-confirm-field {
  grid-column: 1 / 2 !important;
  min-width: 0 !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-password-toggle {
  grid-column: 2 / 3 !important;
  display: inline-flex !important;
  width: max-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 0 7px !important;
  align-self: end !important;
  justify-self: start !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  font-size: .76rem !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-password-toggle input[type="checkbox"] {
  display: inline-block !important;
  flex: 0 0 16px !important;
  width: 16px !important;
  max-width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-password-toggle span {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
}

@media (max-width: 930px) {
  html body:not(.login-page) .yaagi-mobile-nav-toggle.yaagi-mobile-toggle-floating {
    width: 50px !important;
    min-width: 50px !important;
    height: 46px !important;
    min-height: 46px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(40px, auto) !important;
    gap: 6px !important;
    top: max(66px, calc(env(safe-area-inset-top, 0px) + 66px)) !important;
    width: min(330px, calc(100vw - 24px)) !important;
    max-width: min(330px, calc(100vw - 24px)) !important;
    max-height: min(410px, calc(100dvh - 86px)) !important;
    padding: 8px !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) > a {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
  }
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) .ps-nav-language-switcher,
  html body .bottom-nav.yaagi-unified-top-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) #parentSyncGlobalLanguageSwitcher {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Login and registration use a separate nav element. Give it the exact same
     floating-panel behaviour so it can never sit between form cards. */
  html body.login-page .login-page-nav.yaagi-unified-login-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) {
    position: fixed !important;
    top: var(--yaagi-auth-menu-panel-top, max(150px, calc(env(safe-area-inset-top, 0px) + 150px))) !important;
    right: var(--yaagi-auth-menu-panel-right, 12px) !important;
    bottom: auto !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(40px, auto) !important;
    gap: 6px !important;
    width: min(330px, calc(100vw - 24px)) !important;
    max-width: min(330px, calc(100vw - 24px)) !important;
    max-height: min(410px, calc(100dvh - 86px)) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid rgba(15, 35, 75, .14) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 20px 52px rgba(15, 23, 42, .24) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    z-index: 5100 !important;
  }
  html body.login-page .login-page-nav.yaagi-unified-login-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) > .login-page-nav-link {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 8px !important;
  }
  html body.login-page .login-page-nav.yaagi-unified-login-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) .login-page-nav-language,
  html body.login-page .login-page-nav.yaagi-unified-login-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) #parentSyncGlobalLanguageSwitcher,
  html body.login-page .login-page-nav.yaagi-unified-login-nav.yaagi-mobile-panel-floating:not(.yaagi-mobile-collapsed) .ps-nav-language-switcher {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}
/* YAAGI 16.1 - auth menu returns to the shared header grid instead of the browser corner. */
@media (max-width: 930px) {
  html body.login-page .yaagi-mobile-nav-toggle.yaagi-mobile-toggle-floating {
    grid-area: menu !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    z-index: 30 !important;
  }
}
@media (max-width: 520px) {
  html body.login-page .yaagi-mobile-nav-toggle.yaagi-mobile-toggle-floating {
    width: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    max-height: 62px !important;
    border-radius: 19px !important;
  }
}

/* YAAGI 16.1 - custom birth-year chooser. Native mobile select dialogs place
   their indicators inconsistently on some Android variants, so YAAGI renders
   one accessible list whose radio control is always on the right. */
.yaagi-native-birth-year-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
body.login-page .yaagi-birth-year-trigger {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid #cfd9e6 !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #102243 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-weight: 800 !important;
  text-align: left !important;
}
body.login-page .yaagi-birth-year-trigger:hover,
body.login-page .yaagi-birth-year-trigger:focus-visible {
  border-color: #2471c4 !important;
  outline: 3px solid rgba(36, 113, 196, .14) !important;
}
.yaagi-year-picker-overlay[hidden] { display: none !important; }
.yaagi-year-picker-overlay {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
  background: rgba(12, 27, 50, .48) !important;
  z-index: 12000 !important;
}
body.yaagi-year-picker-open { overflow: hidden !important; }
.yaagi-year-picker-dialog {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(520px, 100%) !important;
  max-height: min(760px, calc(100dvh - 32px)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(15, 35, 75, .14) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .28) !important;
}
.yaagi-year-picker-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid #e3e8ef !important;
}
.yaagi-year-picker-header h3 { margin: 0 !important; color: #102243 !important; }
.yaagi-year-picker-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d8e0ea !important;
  border-radius: 14px !important;
  background: #f7f9fc !important;
  color: #102243 !important;
  box-shadow: none !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
}
.yaagi-year-picker-list {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 4px 0 !important;
}
.yaagi-year-picker-option {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 28px !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 58px !important;
  padding: 8px 20px !important;
  border-bottom: 1px solid #e5eaf0 !important;
  color: #172033 !important;
  font-size: 1.15rem !important;
  cursor: pointer !important;
}
.yaagi-year-picker-option:last-child { border-bottom: 0 !important; }
.yaagi-year-picker-option:hover,
.yaagi-year-picker-option:focus-within { background: #f2f7ff !important; }
.yaagi-year-picker-option span { grid-column: 1 !important; }
.yaagi-year-picker-option input[type="radio"] {
  grid-column: 2 !important;
  justify-self: end !important;
  display: block !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #1f6fbd !important;
}

@media (max-width: 339px) {
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div,
  body.login-page .yaagi-signup-redesigned .yaagi-password-confirm-field,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-password-toggle {
    grid-column: 1 / -1 !important;
  }
}

/* YAAGI 16.1 — compact co-parent sharing overview */
.coparent-sharing-card .list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
  row-gap: 6px;
}

.coparent-sharing-card .list-item > div {
  min-width: 0;
}

.coparent-sharing-card .list-item > .template-badge {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  width: auto;
  max-width: 180px;
  margin: 1px 0 0;
  padding: 4px 9px;
  border: 1px solid rgba(181, 126, 0, 0.22);
  border-radius: 999px;
  background: rgba(255, 248, 222, 0.82);
  color: #8a6100;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  box-shadow: none;
}

.coparent-sharing-card .coparent-sharing-note {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.coparent-sharing-card .more-item-action {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

@media (max-width: 700px) {
  .coparent-sharing-card .list-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 16px 0;
  }

  .coparent-sharing-card .list-item > div,
  .coparent-sharing-card .list-item > p {
    width: 100%;
    min-width: 0;
  }

  .coparent-sharing-card .list-item > .template-badge {
    order: 3;
    align-self: flex-start;
    width: auto;
    max-width: 100%;
    margin-top: 1px;
    padding: 4px 8px;
  }

  .coparent-sharing-card .coparent-sharing-note {
    order: 2;
    margin: 0;
  }

  .coparent-sharing-card .more-item-action {
    order: 3;
    align-self: flex-end;
  }
}


/* ================================================================
   YAAGI 16.1 - final registration usability corrections
   - balanced birth-year rows
   - single court autocomplete implementation
   - visible inline OTP feedback
   ================================================================ */
.yaagi-year-picker-dialog {
  width: min(520px, calc(100% - 24px)) !important;
}
.yaagi-year-picker-option {
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 10px 28px !important;
  font-weight: 500 !important;
}
.yaagi-year-picker-option span {
  font-weight: 500 !important;
  line-height: 1.25 !important;
}
.yaagi-year-picker-option input[type="radio"] {
  justify-self: end !important;
  margin: 0 !important;
}
body.login-page .yaagi-court-autocomplete {
  top: calc(100% + 6px) !important;
  z-index: 8000 !important;
}
body.login-page .yaagi-court-autocomplete-option {
  min-height: 46px !important;
  padding: 10px 12px !important;
}
.yaagi-signup-otp-status {
  width: min(100%, 430px);
  margin: 10px auto 0;
  padding: 10px 12px;
  border: 1px solid rgba(15, 35, 75, .14);
  border-radius: 12px;
  background: #f7f9fc;
  color: #102243;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}
.yaagi-signup-otp-status[hidden] { display: none !important; }
.yaagi-signup-otp-status.error {
  border-color: rgba(190, 24, 42, .28);
  background: #fff3f4;
  color: #9f1239;
}
.yaagi-signup-otp-status.success {
  border-color: rgba(22, 163, 74, .28);
  background: #f0fdf4;
  color: #166534;
}
@media (max-width: 520px) {
  .yaagi-year-picker-overlay { padding: 10px !important; }
  .yaagi-year-picker-dialog {
    width: calc(100% - 8px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 20px !important;
  }
  .yaagi-year-picker-option {
    min-height: 62px !important;
    padding-inline: 24px !important;
    font-size: 1.05rem !important;
  }
  .yaagi-year-picker-option input[type="radio"] {
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
  }
  body.login-page .yaagi-court-autocomplete {
    max-height: min(230px, 38dvh) !important;
  }
}

/* ================================================================
   YAAGI 16.1 - stable signed-out authentication header
   Prevents an old OTP state from exposing a broken/clipped mobile header.
   ================================================================ */
@media (max-width: 930px) {
  body.login-page .topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "brand brand"
      "language menu" !important;
    align-items: center !important;
    gap: 14px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 18px !important;
    padding: 8px 0 0 !important;
    overflow: visible !important;
  }
  body.login-page .topbar .login-title-block {
    display: none !important;
  }
  body.login-page .topbar .login-header-actions {
    grid-area: brand !important;
    justify-self: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  body.login-page .topbar .ps-home-logo-link,
  body.login-page .topbar .ps-wordmark-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(270px, 76vw) !important;
    min-width: 0 !important;
    max-width: min(270px, 76vw) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  body.login-page .topbar .ps-home-logo-link img,
  body.login-page .topbar .ps-wordmark-logo img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 180px !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  body.login-page .topbar #parentSyncGlobalLanguageSwitcher,
  body.login-page .topbar .yaagi-mobile-language-slot {
    grid-area: language !important;
    justify-self: start !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  body.login-page .topbar .yaagi-mobile-nav-toggle.yaagi-mobile-toggle-floating {
    grid-area: menu !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  body.login-page.yaagi-signup-otp-mode .topbar {
    margin-bottom: 18px !important;
  }
}

@media (max-width: 420px) {
  body.login-page .topbar {
    gap: 12px 14px !important;
  }
  body.login-page .topbar .ps-home-logo-link,
  body.login-page .topbar .ps-wordmark-logo {
    width: min(240px, 74vw) !important;
    max-width: min(240px, 74vw) !important;
  }
}

/* YAAGI 16.1 - specificity guard against historical one-column auth header rules. */
@media (max-width: 930px) {
  html body.login-page .app header.topbar.yaagi-stable-header:not(.dashboard-topbar),
  html body.login-page .app header.topbar:not(.dashboard-topbar) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "brand brand"
      "language menu" !important;
    justify-items: stretch !important;
    align-items: center !important;
    row-gap: 14px !important;
    column-gap: 18px !important;
    min-height: 0 !important;
    height: auto !important;
    contain: none !important;
  }
  html body.login-page .app header.topbar .login-title-block,
  html body.login-page .app header.topbar .ps-header-title-block.login-title-block {
    display: none !important;
  }
  html body.login-page .app header.topbar .login-header-actions {
    grid-area: brand !important;
    justify-self: center !important;
  }
  html body.login-page .app header.topbar .login-header-actions .logo-circle.ps-wordmark-logo,
  html body.login-page .app header.topbar .login-header-actions .ps-home-logo-link {
    justify-self: center !important;
    margin: 0 auto !important;
  }
  html body.login-page .app header.topbar #parentSyncGlobalLanguageSwitcher {
    grid-area: language !important;
    justify-self: start !important;
  }
  html body.login-page .app header.topbar #yaagiMobileNavToggle {
    grid-area: menu !important;
    justify-self: end !important;
  }
}


/* ================================================================
   YAAGI 16.1 - mobile registration containment and year picker
   Prevents horizontal page movement when the keyboard opens and keeps
   the year dialog fully inside the visual viewport.
   ================================================================ */
body.login-page .yaagi-birth-year-trigger,
body.login-page .yaagi-birth-year-trigger span,
.yaagi-year-picker-option,
.yaagi-year-picker-option span {
  font-weight: 400 !important;
}
.yaagi-year-picker-overlay,
.yaagi-year-picker-dialog,
.yaagi-year-picker-header,
.yaagi-year-picker-list,
.yaagi-year-picker-option {
  box-sizing: border-box !important;
}
.yaagi-year-picker-overlay {
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}
.yaagi-year-picker-dialog {
  width: min(520px, calc(100vw - 20px)) !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(100dvh - 20px) !important;
  margin: 0 auto !important;
}
.yaagi-year-picker-option {
  grid-template-columns: minmax(0, 1fr) 24px !important;
  padding-inline: 20px !important;
  font-size: 1rem !important;
}
.yaagi-year-picker-option input[type="radio"] {
  justify-self: end !important;
  margin: 0 !important;
}
@media (max-width: 600px) {
  html, body.login-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  body.login-page .app,
  body.login-page main,
  body.login-page .login-shell,
  body.login-page .login-panel,
  body.login-page .yaagi-signup-redesigned,
  body.login-page .yaagi-signup-redesigned form,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div,
  body.login-page .yaagi-signup-redesigned .field,
  body.login-page .yaagi-signup-redesigned input,
  body.login-page .yaagi-signup-redesigned select,
  body.login-page .yaagi-signup-redesigned button {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div,
  body.login-page .yaagi-signup-redesigned .yaagi-password-confirm-field,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-password-toggle {
    grid-column: 1 / -1 !important;
  }
  body.login-page .yaagi-signup-redesigned input,
  body.login-page .yaagi-signup-redesigned select,
  body.login-page .yaagi-signup-redesigned textarea {
    width: 100% !important;
    font-size: 16px !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-password-toggle {
    width: auto !important;
    padding-bottom: 0 !important;
  }
  .yaagi-year-picker-overlay {
    place-items: center !important;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }
  .yaagi-year-picker-dialog {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    border-radius: 18px !important;
  }
  .yaagi-year-picker-header {
    padding: 12px 14px !important;
  }
  .yaagi-year-picker-option {
    min-height: 56px !important;
    padding-inline: 18px !important;
    font-size: 1rem !important;
  }
}


/* ================================================================
   YAAGI 16.1 - consistent signed-out dashboard welcome/header
   Signed-out visitors see "Welcome to YAAGI" and the same stable mobile
   brand arrangement as the login page. Authenticated users keep the normal
   dashboard header and see "Welcome back".
   ================================================================ */
@media (max-width: 930px) {
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar.yaagi-stable-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "brand brand"
      "language menu"
      "title title" !important;
    align-items: center !important;
    gap: 14px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 0 18px !important;
    padding: 8px 0 0 !important;
    overflow: visible !important;
    contain: none !important;
  }
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .yaagi-header-logo-slot {
    grid-area: brand !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(270px, 76vw) !important;
    min-width: 0 !important;
    max-width: min(270px, 76vw) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .yaagi-header-logo-slot img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 180px !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .ps-header-title-block {
    grid-area: title !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .ps-header-title-block > .small:first-child {
    display: none !important;
  }
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .ps-header-title-block > h1 {
    margin: 0 !important;
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.08 !important;
  }
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > #parentSyncGlobalLanguageSwitcher,
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .yaagi-mobile-language-slot,
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .ps-global-language-switcher {
    grid-area: language !important;
    justify-self: start !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .yaagi-mobile-nav-toggle,
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .yaagi-mobile-header-menu-slot {
    grid-area: menu !important;
    justify-self: end !important;
    align-self: center !important;
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .ps-header-controls.yaagi-header-gold-slot:empty {
    display: none !important;
  }
}

@media (max-width: 420px) {
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar.yaagi-stable-header {
    gap: 12px 14px !important;
  }
  html body.yaagi-dashboard-page.yaagi-index-signed-out .app > header.topbar > .yaagi-header-logo-slot {
    width: min(240px, 74vw) !important;
    max-width: min(240px, 74vw) !important;
  }
}


/* ================================================================
   YAAGI 16.1 - single authoritative floating application header
   This final contract intentionally overrides legacy header patches.
   ================================================================ */
:root {
  --yaagi-app-header-height: 54px;
  --yaagi-app-header-gap: 8px;
}
html, body { max-width: 100%; overflow-x: clip; }
body { overflow-x: clip; }
.app { overflow: visible !important; }
.yaagi-app-chrome {
  position: sticky;
  top: 0;
  z-index: 20000;
  width: 100%;
  margin: 0 0 14px;
  padding: 8px 0 0;
  pointer-events: none;
}
.yaagi-app-chrome > * { pointer-events: auto; }
html body .app header.yaagi-app-header,
html body main.app header.yaagi-app-header {
  position: relative !important;
  inset: auto !important;
  z-index: 20001 !important;
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) 54px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: var(--yaagi-app-header-height) !important;
  height: var(--yaagi-app-header-height) !important;
  margin: 0 !important;
  padding: 5px 6px !important;
  gap: 6px !important;
  border: 1px solid rgba(11, 39, 76, .12) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 10px 30px rgba(15, 39, 76, .13) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: visible !important;
  transform: none !important;
  contain: none !important;
  flex-wrap: nowrap !important;
}
.yaagi-app-header .yaagi-header-language,
.yaagi-app-header .yaagi-header-menu-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(11, 39, 76, .15) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #0b274c !important;
  box-shadow: none !important;
  cursor: pointer;
}
.yaagi-app-header .yaagi-header-language { grid-column: 1; justify-self: start; gap: 2px; }
.yaagi-app-header .yaagi-header-language-code { font-size: .79rem; line-height: 1; font-weight: 900; letter-spacing: .02em; }
.yaagi-app-header .yaagi-header-language-arrow { font-size: .56rem; line-height: 1; transform: translateY(1px); }
.yaagi-app-header .yaagi-header-logo {
  grid-column: 2;
  justify-self: center;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: min(136px, 42vw) !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.yaagi-app-header .yaagi-header-logo img { display: block; width: 100% !important; max-width: 132px !important; height: 34px !important; object-fit: contain; }
.yaagi-app-header .yaagi-header-menu-button { grid-column: 3; justify-self: end; flex-direction: column; gap: 4px; }
.yaagi-app-header .yaagi-header-menu-button span { display: block; width: 19px; height: 2px; border-radius: 2px; background: currentColor; }
.yaagi-app-header .yaagi-header-menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.yaagi-app-header .yaagi-header-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.yaagi-app-header .yaagi-header-menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.yaagi-app-header .yaagi-header-menu-button span { transition: transform .16s ease, opacity .16s ease; }
.yaagi-header-panel {
  position: absolute !important;
  top: calc(100% + 7px) !important;
  z-index: 20010 !important;
  display: none;
  max-height: min(68vh, 520px);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border: 1px solid rgba(11, 39, 76, .14);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(15, 39, 76, .2);
}
.yaagi-header-panel.is-open { display: block !important; }
.yaagi-language-panel { left: 0; width: min(260px, calc(100vw - 32px)); padding: 7px; }
.yaagi-language-panel button {
  display: grid; grid-template-columns: 34px 1fr; align-items: center; width: 100%; min-height: 39px; margin: 0; padding: 7px 9px;
  border: 0; border-radius: 10px; background: transparent; color: #102033; text-align: left; box-shadow: none; font-size: .88rem;
}
.yaagi-language-panel button:hover, .yaagi-language-panel button:focus-visible, .yaagi-language-panel button[aria-current="true"] { background: #eef5ff; }
.yaagi-language-panel strong { font-size: .78rem; }
.yaagi-menu-panel { right: 0; width: min(290px, calc(100vw - 32px)); padding: 7px; }
.yaagi-menu-panel a {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 9px 11px; border-radius: 10px;
  color: #102033; text-decoration: none; font-weight: 750; font-size: .9rem;
}
.yaagi-menu-panel a:hover, .yaagi-menu-panel a:focus-visible, .yaagi-menu-panel a[aria-current="page"] { background: #eef5ff; color: #0a4ea3; }
.yaagi-menu-panel .yaagi-menu-icon { width: 23px; text-align: center; font-size: 1.05rem; }
.yaagi-account-status {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: max-content; max-width: calc(100% - 20px);
  min-height: 28px; margin: 6px auto 0; padding: 5px 11px; border: 1px solid rgba(11,39,76,.1); border-radius: 999px;
  background: rgba(255,255,255,.96); color: #344054; box-shadow: 0 5px 15px rgba(15,39,76,.08); font-size: .77rem; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.yaagi-account-status-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #dc2626; }
.yaagi-account-status.is-logged-in .yaagi-account-status-dot { background: #16a34a; }
.yaagi-account-status.is-gold .yaagi-account-status-dot { width: 18px; height: 18px; border-radius: 50%; background: url("../assets/img/GOLD512.png") center/contain no-repeat !important; box-shadow: none; }
.yaagi-page-heading { margin: 0 0 15px; padding: 0 2px; }
.yaagi-page-heading h1 { margin: 0; color: var(--text); font-size: clamp(25px, 6vw, 36px); line-height: 1.08; font-weight: 800; letter-spacing: -.04em; }
.yaagi-page-heading .small { margin: 4px 0 0; }
/* Legacy header artifacts may still exist in cached HTML, but are not rendered twice. */
.yaagi-app-header > .ps-header-title-block,
.yaagi-app-header > .ps-header-controls,
.yaagi-app-header > .ps-global-language-switcher,
.yaagi-app-header > .yaagi-mobile-nav-toggle,
.yaagi-app-header > .logo-circle,
.yaagi-app-header > .dashboard-logo-panel,
.yaagi-app-chrome .ps-user-badge,
.yaagi-app-chrome .yaagi-header-gold-status { display: none !important; }
@media (max-width: 420px) {
  :root { --yaagi-app-header-height: 50px; }
  .app { padding-left: 12px !important; padding-right: 12px !important; }
  html body .app header.yaagi-app-header, html body main.app header.yaagi-app-header { grid-template-columns: 48px minmax(0,1fr) 48px !important; padding: 4px !important; border-radius: 15px !important; }
  .yaagi-app-header .yaagi-header-language, .yaagi-app-header .yaagi-header-menu-button { width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 38px !important; min-height: 38px !important; border-radius: 11px !important; }
  .yaagi-app-header .yaagi-header-logo { width: min(124px, 40vw) !important; height: 36px !important; }
  .yaagi-app-header .yaagi-header-logo img { max-width: 120px !important; height: 31px !important; }
  .yaagi-account-status { max-width: calc(100% - 10px); font-size: .72rem; }
}
@media (min-width: 760px) {
  .yaagi-app-chrome { padding-top: 10px; }
  html body .app header.yaagi-app-header, html body main.app header.yaagi-app-header { min-height: 58px !important; height: 58px !important; }
}

/* ================================================================
   YAAGI 16.1 R1 - compact single-menu correction
   Keeps only the six-link hamburger overlay and refines sizing.
   ================================================================ */
.yaagi-app-chrome ~ nav.bottom-nav,
.yaagi-app-chrome ~ .login-page-nav-row {
  display: none !important;
}
body.yaagi-dashboard-page .yaagi-app-chrome,
body.yaagi-dashboard-page .yaagi-page-heading {
  grid-column: 1 / -1 !important;
}
html body .app header.yaagi-app-header,
html body main.app header.yaagi-app-header {
  grid-template-columns: 58px minmax(0, 1fr) 58px !important;
}
.yaagi-app-header .yaagi-header-language,
.yaagi-app-header .yaagi-header-menu-button {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
  height: 44px !important;
  min-height: 44px !important;
}
.yaagi-app-header .yaagi-header-logo {
  width: min(152px, 46vw) !important;
  height: 42px !important;
}
.yaagi-app-header .yaagi-header-logo img {
  width: 100% !important;
  max-width: 148px !important;
  height: 38px !important;
}
body.login-page #loginBtn {
  min-width: 190px !important;
  min-height: 50px !important;
  padding: 12px 24px !important;
  font-size: 1rem !important;
}
@media (max-width: 420px) {
  :root { --yaagi-app-header-height: 52px; }
  html body .app header.yaagi-app-header,
  html body main.app header.yaagi-app-header {
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  }
  .yaagi-app-header .yaagi-header-language,
  .yaagi-app-header .yaagi-header-menu-button {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 40px !important;
    min-height: 40px !important;
  }
  .yaagi-app-header .yaagi-header-logo {
    width: min(140px, 44vw) !important;
    height: 38px !important;
  }
  .yaagi-app-header .yaagi-header-logo img {
    max-width: 136px !important;
    height: 35px !important;
  }
  body.login-page #loginBtn {
    width: 100% !important;
    min-width: 0 !important;
  }
}


/* ================================================================
   YAAGI 16.1 - logo, canonical account state, trial notice order,
   and side-by-side registration passwords.
   ================================================================ */
.yaagi-app-header .yaagi-header-logo {
  width: min(168px, 49vw) !important;
  height: 44px !important;
}
.yaagi-app-header .yaagi-header-logo img {
  max-width: 164px !important;
  height: 41px !important;
}
.app > .yaagi-app-chrome + .yaagi-trial-expiry-notice {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 16px !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 10px 12px !important;
  width: 100% !important;
  align-items: end !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div:first-child {
  grid-column: 1 / -1 !important;
  min-width: 0 !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div:nth-child(2) {
  grid-column: 1 / 2 !important;
  min-width: 0 !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div.yaagi-password-confirm-field {
  grid-column: 2 / 3 !important;
  min-width: 0 !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-signup-password-toggle {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 600px) {
  .yaagi-app-header .yaagi-header-logo {
    width: min(154px, 48vw) !important;
    height: 40px !important;
  }
  .yaagi-app-header .yaagi-header-logo img {
    max-width: 150px !important;
    height: 38px !important;
  }
  .app > .yaagi-app-chrome + .yaagi-trial-expiry-notice {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 13px 14px !important;
    border-radius: 18px !important;
  }
  .app > .yaagi-app-chrome + .yaagi-trial-expiry-notice p {
    display: none !important;
  }
  .app > .yaagi-app-chrome + .yaagi-trial-expiry-notice strong {
    margin: 0 !important;
    font-size: .98rem !important;
    line-height: 1.25 !important;
  }
  .app > .yaagi-app-chrome + .yaagi-trial-expiry-notice .yaagi-trial-expiry-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    margin: 0 !important;
  }
  .app > .yaagi-app-chrome + .yaagi-trial-expiry-notice a {
    min-height: 42px !important;
    padding: 9px 8px !important;
    font-size: .86rem !important;
    line-height: 1.15 !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div:nth-child(2) {
    grid-column: 1 / 2 !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div.yaagi-password-confirm-field {
    grid-column: 2 / 3 !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-password-toggle {
    grid-column: 1 / -1 !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid label:not(.password-toggle) {
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 299px) {
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.login-page .yaagi-signup-redesigned .yaagi-signup-credentials-grid > div,
  body.login-page .yaagi-signup-redesigned .yaagi-password-confirm-field,
  body.login-page .yaagi-signup-redesigned .yaagi-signup-password-toggle {
    grid-column: 1 / -1 !important;
  }
}


/* ================================================================
   YAAGI 16.8 - app header visual alignment with WordPress mobile header
   Keep one central app header, but use the same large centred brand rhythm.
   ================================================================ */
.yaagi-app-header .yaagi-header-logo {
  width: min(170px, 46vw) !important;
  height: 46px !important;
}
.yaagi-app-header .yaagi-header-logo img {
  width: 100% !important;
  max-width: 168px !important;
  height: 44px !important;
}
@media (max-width: 960px) {
  html body .app header.yaagi-app-header,
  html body main.app header.yaagi-app-header {
    grid-template-columns: minmax(72px, 1fr) auto minmax(72px, 1fr) !important;
    grid-template-areas:
      "brand brand brand"
      "language spacer menu" !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px 10px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }
  .yaagi-app-header .yaagi-header-logo {
    grid-area: auto !important;
    grid-row: 1 !important;
    grid-column: 1 / -1 !important;
    width: clamp(180px, 50vw, 215px) !important;
    height: 58px !important;
    justify-self: center !important;
  }
  .yaagi-app-header .yaagi-header-logo img {
    width: 100% !important;
    max-width: 215px !important;
    height: 56px !important;
  }
  .yaagi-app-header .yaagi-header-language {
    grid-area: auto !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
    justify-self: start !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 17px !important;
  }
  .yaagi-app-header .yaagi-header-language-code { font-size: .9rem !important; }
  .yaagi-app-header .yaagi-header-menu-button {
    grid-area: auto !important;
    grid-row: 2 !important;
    grid-column: 3 !important;
    justify-self: end !important;
    width: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
    border-radius: 18px !important;
  }
  .yaagi-app-header .yaagi-header-menu-button span { width: 22px !important; }
  .yaagi-account-status { margin-top: 7px !important; }
}
@media (max-width: 360px) {
  html body .app header.yaagi-app-header,
  html body main.app header.yaagi-app-header {
    grid-template-columns: minmax(64px, 1fr) auto minmax(64px, 1fr) !important;
    padding-inline: 10px !important;
  }
  .yaagi-app-header .yaagi-header-logo { width: min(188px, 54vw) !important; height: 54px !important; }
  .yaagi-app-header .yaagi-header-logo img { max-width: 188px !important; height: 52px !important; }
  .yaagi-app-header .yaagi-header-language { width: 64px !important; min-width: 64px !important; max-width: 64px !important; height: 50px !important; min-height: 50px !important; }
  .yaagi-app-header .yaagi-header-menu-button { width: 52px !important; min-width: 52px !important; max-width: 52px !important; height: 52px !important; min-height: 52px !important; }
}

/* YAAGI 16.8 child-link chooser */
.yaagi-child-chooser-card{max-width:440px}
#yaagiChildChooserList{display:grid;gap:8px;margin-top:12px}
.yaagi-child-choice{width:100%;min-height:48px;font-weight:800}
.yaagi-child-link-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
@media(max-width:420px){.yaagi-child-link-actions{grid-template-columns:1fr}}


/* YAAGI 16.10 gold badge alignment */
body.login-page .ps-user-badge.is-gold-member,body.email-confirmed-page .ps-user-badge.is-gold-member{border-color:rgba(151,96,0,.28)!important;background:rgba(255,255,255,.82)!important;color:#173054!important;box-shadow:0 9px 22px rgba(128,83,0,.14)!important}
body.login-page .ps-status-led-wrap.is-gold-ball,body.email-confirmed-page .ps-status-led-wrap.is-gold-ball{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:rgba(255,255,255,.74)!important;border-color:rgba(151,96,0,.28)!important}
body.login-page .ps-status-led-wrap.is-gold-ball::after,body.email-confirmed-page .ps-status-led-wrap.is-gold-ball::after{display:none!important;content:none!important}
body.login-page .ps-status-gold-ball,body.email-confirmed-page .ps-status-gold-ball{display:block!important;width:20px!important;height:20px!important;object-fit:contain!important}

/* YAAGI 17.5 - parent dashboard child actions / Connect Four */
.dashboard-child-actions-card{border:1px solid rgba(75,120,160,.14);background:linear-gradient(145deg,#fff,#f7fbff);}
.yaagi-owner-inbox-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.yaagi-owner-inbox-head h3,.yaagi-owner-inbox-section h4{margin-top:0}
.yaagi-owner-inbox-all{white-space:nowrap}
.yaagi-owner-inbox-section{margin-top:16px;padding-top:14px;border-top:1px solid rgba(37,78,120,.10)}
.yaagi-owner-request{padding:12px 0;border-top:1px solid rgba(37,78,120,.08)}
.yaagi-owner-request:first-of-type{border-top:0}
.yaagi-owner-request p{margin:.45rem 0}
.yaagi-owner-actions{display:flex;gap:8px;flex-wrap:wrap}
.yaagi-owner-actions button{width:auto;margin:0}
.parent-game{margin:12px 0;padding:14px;border-radius:20px;background:linear-gradient(145deg,#fff9dd,#fff,#f1f9ff);border:1px solid rgba(222,181,65,.20)}
.parent-game-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.parent-game-title span{font-weight:800}
.parent-game-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:360px;margin:12px auto;padding:8px;border-radius:18px;background:linear-gradient(135deg,#ffd75d,#f4b52e)}
.parent-game-cell{display:block;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:inset 0 1px 4px rgba(0,0,0,.08)}
.parent-game-cell.p1{background:#9d4edd}.parent-game-cell.p2{background:#ff7ca8}
.parent-game-help{text-align:center;margin-bottom:7px}
.parent-game-cols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:360px;margin:0 auto}
.parent-game-cols button{min-width:0;width:100%;padding:9px 2px;margin:0;border-radius:12px;font-weight:950}
.game-invite-list{margin-top:14px}
.game-invite-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid rgba(37,78,120,.08)}
.game-invite-row button{width:auto;margin:0}
@media(max-width:520px){.parent-game-title{display:block}.parent-game-title span{display:block;margin-top:4px}.yaagi-owner-inbox-all{width:100%;text-align:center}.game-invite-row{align-items:flex-start;flex-direction:column}.game-invite-row button{width:100%}}

/* YAAGI 17.5 - livelier Connect Four dashboard card */
.dashboard-child-actions-card{background:linear-gradient(145deg,#fff,#fffaf0 48%,#f2fbff)!important;border-color:rgba(74,154,194,.15)!important}
.parent-game{background:linear-gradient(145deg,#fff7df,#fff 48%,#edfaff)!important;border-color:rgba(85,177,216,.20)!important;box-shadow:0 10px 24px rgba(64,114,151,.09)!important}
.parent-game-board{gap:6px!important;padding:11px!important;border:4px solid rgba(255,255,255,.86)!important;border-radius:24px!important;background:linear-gradient(145deg,#7fd8f5,#64c5ee)!important;box-shadow:0 13px 25px rgba(65,150,191,.20),inset 0 1px 0 rgba(255,255,255,.55)!important}
.parent-game-cell{background:#f8fcff!important;box-shadow:inset 0 3px 7px rgba(45,116,151,.14),0 1px 0 rgba(255,255,255,.85)!important}
.parent-game-cell.p1{background:linear-gradient(145deg,#ffb15f,#ff7c8f)!important;box-shadow:inset 0 -4px 7px rgba(181,74,84,.16),0 2px 5px rgba(176,91,99,.18)!important}
.parent-game-cell.p2{background:linear-gradient(145deg,#ffe36e,#ffc447)!important;box-shadow:inset 0 -4px 7px rgba(176,131,30,.15),0 2px 5px rgba(173,129,27,.16)!important}
.parent-game-cols button{border:0!important;background:linear-gradient(180deg,#ffffff,#eaf8ff)!important;color:#235270!important;box-shadow:0 5px 13px rgba(60,132,168,.12)!important}
.parent-game-cols button:hover,.parent-game-cols button:focus-visible{background:linear-gradient(180deg,#fff7cf,#ffe99d)!important;transform:translateY(-1px)}

/* YAAGI 17.5 - polished parent Connect Four test UI */
.yaagi-owner-game-section{border-radius:22px;padding:16px!important;background:linear-gradient(145deg,#fff,#fff9e8 48%,#eef9ff);border:1px solid rgba(89,150,191,.14)!important}
.yaagi-owner-game-heading h4{margin-bottom:4px!important;color:#34436f!important}
.parent-game{padding:17px!important;border-radius:24px!important;background:linear-gradient(145deg,#fff,#eef8ff 56%,#fff8df)!important;border:1px solid rgba(75,131,183,.16)!important;box-shadow:0 12px 28px rgba(56,104,145,.11)!important}
.parent-game-title strong{font-size:1.08rem;color:#30426d}.parent-game-status{display:inline-flex;padding:7px 11px;border-radius:999px;background:#fff4c8;color:#675219;font-weight:900!important}
.parent-game-board-shell{position:relative;max-width:390px;margin:14px auto 21px;padding:6px 6px 18px}
.parent-game-board-shell:before{content:"";position:absolute;inset:0 0 11px;border-radius:27px;background:linear-gradient(145deg,#306fd4,#4f88ed 55%,#3873dc);box-shadow:0 14px 22px rgba(43,91,173,.25),inset 0 3px 0 rgba(255,255,255,.32),inset 0 -5px 0 rgba(22,74,160,.25)}
.parent-game-board-shell:after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:24px;border-radius:6px 6px 15px 15px;background:linear-gradient(180deg,#6847c6,#5136aa);box-shadow:0 7px 11px rgba(71,48,143,.22)}
.parent-game-board{position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px!important;max-width:none!important;margin:0!important;padding:12px!important;border:0!important;border-radius:22px!important;background:transparent!important;box-shadow:none!important}
.parent-game-cell{display:block;aspect-ratio:1;border-radius:50%;background:linear-gradient(145deg,#f7fcff,#dff3ff)!important;box-shadow:inset 0 4px 8px rgba(29,79,145,.24),0 1px 0 rgba(255,255,255,.72)!important}
.parent-game-cell.p1{background:radial-gradient(circle at 35% 28%,#ff8875 0 18%,#f24f48 42%,#cf342f 100%)!important;box-shadow:inset 0 -5px 7px rgba(141,31,29,.24),inset 0 3px 4px rgba(255,255,255,.45),0 2px 4px rgba(85,27,30,.18)!important}
.parent-game-cell.p2{background:radial-gradient(circle at 35% 28%,#fff18a 0 18%,#ffc72f 44%,#f0a90d 100%)!important;box-shadow:inset 0 -5px 7px rgba(153,104,9,.20),inset 0 3px 4px rgba(255,255,255,.52),0 2px 4px rgba(95,70,12,.18)!important}
.parent-game-help{text-align:center!important;font-weight:900!important;color:#415d76!important}
.parent-game-cols{gap:7px!important;max-width:390px!important}
.parent-game-cols button{height:42px!important;border-radius:50%!important;background:linear-gradient(145deg,#8b59df,#623cc7)!important;color:#fff!important;border:0!important;box-shadow:0 5px 0 #4d2da6,0 8px 14px rgba(75,48,150,.16)!important;font-weight:950!important}
.parent-game-cols button:hover,.parent-game-cols button:focus-visible{background:linear-gradient(145deg,#9968e9,#7149d4)!important;color:#fff!important;transform:translateY(-1px)}
.parent-game-empty{padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.72);color:#65758b}
.game-invite-list{margin-top:18px!important;padding:14px;border-radius:19px;background:rgba(255,255,255,.80);border:1px solid rgba(85,125,169,.10)}
.game-invite-row{padding:11px 0!important}.game-invite-row strong{color:#34436f}.game-link-needed{display:block;margin-top:3px;color:#7a8392}.game-invite-row button{border-radius:999px!important;padding-inline:15px!important}
@media(max-width:520px){.yaagi-owner-game-section{padding:12px!important}.parent-game{padding:13px!important}.parent-game-board-shell{padding:4px 3px 15px}.parent-game-board{gap:5px!important;padding:9px!important}.parent-game-cols{gap:5px!important}.parent-game-cols button{height:38px!important}}

/* YAAGI 17.5 — Connect Four turn clarity + live turn signal */
.connect4-columns.child-turn-buttons button,
.parent-game-cols.parent-turn-buttons button{
  position:relative!important;
  overflow:visible!important;
  font-size:0!important;
}
.connect4-columns.child-turn-buttons button span,
.parent-game-cols.parent-turn-buttons button span{
  display:block;
  width:26px;height:26px;
  margin:auto;border-radius:50%;
  box-shadow:inset 0 3px 4px rgba(255,255,255,.45),inset 0 -4px 6px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.14);
}
.connect4-columns.child-turn-buttons button{
  background:linear-gradient(145deg,#fff3f0,#ffd9d3)!important;
  box-shadow:0 5px 0 #e4aaa3,0 8px 14px rgba(177,76,65,.12)!important;
}
.connect4-columns.child-turn-buttons button span{
  background:radial-gradient(circle at 35% 28%,#ff8875 0 18%,#f24f48 42%,#cf342f 100%);
}
.connect4-columns.child-turn-buttons button:hover,.connect4-columns.child-turn-buttons button:focus-visible{
  background:linear-gradient(145deg,#fff8f5,#ffe4df)!important;
}
.parent-game-cols.parent-turn-buttons button{
  background:linear-gradient(145deg,#fff9d8,#ffe98a)!important;
  box-shadow:0 5px 0 #d8b133,0 8px 14px rgba(141,104,12,.15)!important;
}
.parent-game-cols.parent-turn-buttons button span{
  background:radial-gradient(circle at 35% 28%,#fff18a 0 18%,#ffc72f 44%,#f0a90d 100%);
}
.parent-game-cols.parent-turn-buttons button:hover,.parent-game-cols.parent-turn-buttons button:focus-visible{
  background:linear-gradient(145deg,#fffce9,#fff0a9)!important;
}
.connect4-color-key{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 0!important;font-weight:850;color:#41516d}
.connect4-color-key>span{width:18px;height:18px;border-radius:50%;display:inline-block;box-shadow:inset 0 2px 3px rgba(255,255,255,.45),inset 0 -3px 4px rgba(0,0,0,.15)}
.child-color-key>span{background:#ef4c45}.parent-color-key>span{background:#ffc72f}
@keyframes yaagiTurnPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,199,47,.0)}50%{box-shadow:0 0 0 8px rgba(255,199,47,.18)}}
.parent-game.game-turn-live{animation:yaagiTurnPulse 1.15s ease-in-out infinite}
.game-status.game-turn-live{animation:yaagiTurnText 1.15s ease-in-out infinite}
@keyframes yaagiTurnText{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.68;transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.parent-game.game-turn-live,.game-status.game-turn-live{animation:none!important}}


/* YAAGI 17.5 — account status badge is an interactive login/account control. */
.ps-user-badge.ps-status-control[data-yaagi-account-button="1"]{cursor:pointer!important;pointer-events:auto!important;touch-action:manipulation!important}

/* YAAGI 17.5 — unified account status is a real button so touch/click always opens account. */
button.yaagi-account-status {
  appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer; pointer-events:auto; touch-action:manipulation;
}
button.yaagi-account-status:hover, button.yaagi-account-status:focus-visible {
  border-color:rgba(10,78,163,.32); box-shadow:0 6px 18px rgba(15,39,76,.13),0 0 0 3px rgba(42,127,234,.10); outline:none;
}


/* YAAGI 18.12 KNOW ME */
.yaagi-owner-knowme-section{margin-top:14px;padding-top:14px;border-top:1px solid rgba(148,163,184,.2)}
.yaagi-owner-knowme-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}.yaagi-owner-knowme-heading h4{margin:0}.yaagi-owner-knowme-heading p{margin:3px 0 0}
.parent-knowme{padding:13px;border:1px solid rgba(160,132,219,.2);border-radius:16px;background:linear-gradient(135deg,#fff9df,#fff,#f5efff);margin:9px 0}.parent-knowme-question{font-weight:950;color:#243b5a;margin-bottom:9px}.parent-knowme-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.parent-knowme-options button{width:100%;min-height:44px;margin:0;border-radius:13px;font-weight:850}.parent-knowme-result{margin:8px 0 0;padding:9px 11px;border-radius:12px;background:#fff;font-weight:800}.parent-knowme-wait{color:#5b4b82}.parent-knowme-correct{color:#176b39}.parent-knowme-wrong{color:#7b4b16}@media(max-width:560px){.parent-knowme-options{grid-template-columns:1fr}}


/* YAAGI 18.12 UX fixes */
.yaagi-collapsible-add>summary{cursor:pointer;list-style:none;font-weight:900;font-size:1.08rem;color:#173b73;display:flex;align-items:center;gap:8px;padding:4px 0}.yaagi-collapsible-add>summary::-webkit-details-marker{display:none}.yaagi-collapsible-add-body{padding-top:18px}.child-summary-main{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}.child-summary-meta{font-size:.78rem;font-weight:650;color:#6a788d;white-space:normal}.child-game-actions{grid-template-columns:1fr 1fr!important}.yaagi-global-notice-backdrop{position:fixed;inset:0;z-index:2147482500;background:rgba(9,24,45,.36);display:grid;place-items:center;padding:18px}.yaagi-global-notice{position:relative;width:min(520px,100%);background:#fff;border-radius:24px;padding:24px;box-shadow:0 24px 70px rgba(7,23,43,.28);text-align:center;color:#173b73}.yaagi-global-notice h3{margin:5px 28px 10px;font-size:1.25rem}.yaagi-global-notice-icon{font-size:2.1rem}.yaagi-global-notice-x{position:absolute;right:12px;top:10px;width:40px;height:40px;min-height:40px!important;padding:0!important;border-radius:50%!important;background:#eef4fb!important;color:#173b73!important}.yaagi-global-notice-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.yaagi-global-notice-options button{min-height:52px}.yaagi-global-later{margin-top:5px}.calendar-birthday{margin:7px 0;padding:7px 10px;border-radius:12px;background:#fff3cd;color:#664d03;font-weight:850;font-size:.86rem}.calendar-birthday.is-compact{padding:2px 5px;margin:3px 2px;font-size:.67rem;line-height:1.1}.calendar-mobile-month-day{position:relative}.calendar-birthday-dot{position:absolute;right:2px;bottom:1px;font-size:.72rem}.calendar-mobile-month-day.has-birthday{box-shadow:inset 0 0 0 2px rgba(222,167,27,.34)}
@media(max-width:560px){.child-game-actions,.yaagi-global-notice-options{grid-template-columns:1fr!important}}

/* Child page must stay light, playful and readable. Stronger than the global dark hero rule above. */
html body.yaagi-public-child .app .child-simple-header{display:flex!important;flex-direction:column!important;justify-content:center!important;gap:8px!important;min-height:154px!important;padding:14px 16px 12px!important;background:linear-gradient(135deg,#ffffff,#fff8fc 48%,#effbff)!important}
html body.yaagi-public-child .app .child-simple-logo{position:static!important;width:min(280px,76vw)!important;max-height:94px!important;margin:0 auto!important}
html body.yaagi-public-child .app .child-language-select{position:static!important;width:min(310px,86vw)!important;height:50px!important;min-height:50px!important;margin:0 auto!important;padding:0 44px 0 18px!important;border-radius:16px!important;color:#173b73!important;background:#fff!important;font-size:1rem!important;text-align:left!important}
html body.yaagi-public-child .app .child-planning-hero{background:linear-gradient(135deg,#fffaf0 0%,#fff3fa 35%,#eefaff 70%,#f4ffef 100%)!important;color:#29435f!important;border:2px solid rgba(255,255,255,.96)!important;box-shadow:0 14px 30px rgba(65,112,150,.10)!important}
html body.yaagi-public-child .app .child-planning-hero h2{color:#4b438e!important}html body.yaagi-public-child .app .child-planning-hero p{color:#36536e!important}html body.yaagi-public-child .app .child-planning-hero .child-kicker{color:#72588b!important;background:rgba(255,255,255,.82)!important}
html body.yaagi-public-child .app .child-mini-note,html body.yaagi-public-child .app .child-mini-note *{background:#fff!important;color:#36536e!important;-webkit-text-fill-color:#36536e!important;opacity:1!important;text-shadow:none!important}
html body.yaagi-public-child .app .child-fold-card{padding:0!important;overflow:hidden!important}html body.yaagi-public-child .app .child-fold-card>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:20px 22px;color:#433d89;font-weight:950;font-size:1.2rem}html body.yaagi-public-child .app .child-fold-card>summary::-webkit-details-marker{display:none}.child-fold-icon{font-size:1.35rem}.child-fold-arrow{font-size:1.3rem;transition:transform .2s ease}.child-fold-card[open] .child-fold-arrow{transform:rotate(180deg)}.child-fold-body{padding:0 22px 22px}.know-me-calm{display:block;margin-top:10px;padding:10px 12px;border-radius:13px;background:#f4f7ff;color:#5a6680;line-height:1.4}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}


/* YAAGI 18.4 — internal child-game notifications on parent pages. */
.children-game-inbox-card{scroll-margin-top:86px}
.yaagi-owner-action-alerts{display:grid;gap:8px;margin:10px 0 14px}
.yaagi-owner-action-alert{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:11px 13px;border-radius:14px;border:1px solid rgba(57,91,132,.12);font-size:.93rem;line-height:1.35}
.yaagi-owner-action-alert strong{color:#173b73}.yaagi-owner-action-alert span{color:#56697f}
.yaagi-owner-action-alert.connect4-alert{background:linear-gradient(135deg,#eef9ff,#fff9df)}
.yaagi-owner-action-alert.knowme-alert{background:linear-gradient(135deg,#fff1f8,#f3efff)}
@media(max-width:640px){.children-game-inbox-card{margin-top:10px}.yaagi-owner-action-alert{padding:10px 11px}}

/* YAAGI 18.12 — persistent child-activity badge + child-request response states. */
.yaagi-app-header .yaagi-header-menu-button{position:relative}
.yaagi-activity-badge{position:absolute;right:-6px;top:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#d92d20;color:#fff;font-size:.69rem;font-weight:950;line-height:20px;text-align:center;box-shadow:0 3px 9px rgba(92,20,20,.28);border:2px solid #fff;z-index:4}
.yaagi-activity-badge[hidden]{display:none!important}
.yaagi-owner-request-status{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.yaagi-owner-request-status span{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;background:#eef5ff;color:#335f88;font-size:.79rem;font-weight:850}
.yaagi-owner-request.is-resolved{margin-top:8px;padding:12px;border-radius:14px;border:1px solid rgba(100,126,156,.12);background:#fafcff}
.yaagi-owner-request.is-resolved.is-accepted{background:#f2fff6;border-color:rgba(38,150,83,.16)}
.yaagi-owner-request.is-resolved.is-declined{background:#fff9f1;border-color:rgba(190,118,45,.16)}
.yaagi-owner-request-history{margin-bottom:4px}
.yaagi-global-notice-message{margin:8px 0 14px;color:#435a74;line-height:1.45}
.yaagi-global-notice-meta{display:block;margin:-4px 0 12px;color:#6a7788;font-size:.86rem;font-weight:750}

/* YAAGI 18.12 dashboard: information stays compact; items needing the parent open automatically. */
.yaagi-dashboard-fold{border:1px solid #e0e9f3;border-radius:16px;margin:12px 0;overflow:hidden}.yaagi-dashboard-fold>summary{cursor:pointer;list-style:none;padding:13px 15px;display:flex;align-items:center;gap:10px}.yaagi-dashboard-fold>summary::-webkit-details-marker{display:none}.yaagi-dashboard-fold>summary span{margin-left:auto;border-radius:999px;background:#edf4fb;padding:2px 9px;font-weight:800}.yaagi-dashboard-fold[open]>summary{border-bottom:1px solid #e5edf5}.yaagi-dashboard-fold .yaagi-fold-body{padding:12px 14px}

/* YAAGI 18.12 — dashboard child-actions layout recovery. */
body.yaagi-dashboard-page #yaagiChildOwnerInbox.dashboard-child-actions-card{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}
body.yaagi-dashboard-page #yaagiChildOwnerInbox .yaagi-owner-inbox-head,
body.yaagi-dashboard-page #yaagiChildOwnerInbox .yaagi-owner-inbox-section,
body.yaagi-dashboard-page #yaagiChildOwnerInbox .yaagi-owner-knowme-section{width:100% !important;max-width:none !important;box-sizing:border-box !important;}
@media(max-width:760px){body.yaagi-dashboard-page #yaagiChildOwnerInbox.dashboard-child-actions-card{margin-left:0!important;margin-right:0!important;padding-left:14px!important;padding-right:14px!important;}}


/* YAAGI 18.12 — professional parent-side fold system.
   Deliberately excluded from the public child portal. */
html:not(.yaagi-public-child) .parent-fold-card,
html:not(.yaagi-public-child) .settings-fold,
html:not(.yaagi-public-child) .more-fold,
html:not(.yaagi-public-child) .costs-pro-card{
  position:relative;overflow:hidden;border:1px solid rgba(148,163,184,.26);
  box-shadow:0 12px 30px rgba(15,46,87,.07);
}
html:not(.yaagi-public-child) .parent-fold-card details,
html:not(.yaagi-public-child) .settings-fold details,
html:not(.yaagi-public-child) .more-fold details{margin:0}
html:not(.yaagi-public-child) .parent-fold-card summary,
html:not(.yaagi-public-child) .settings-fold summary,
html:not(.yaagi-public-child) .more-fold summary{
  position:relative;isolation:isolate;list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:64px;padding:16px 72px 16px 18px;border-radius:18px;
  font-weight:900;color:#102f50;letter-spacing:.01em;
}
html:not(.yaagi-public-child) .parent-fold-card summary::-webkit-details-marker,
html:not(.yaagi-public-child) .settings-fold summary::-webkit-details-marker,
html:not(.yaagi-public-child) .more-fold summary::-webkit-details-marker{display:none}
html:not(.yaagi-public-child) .parent-fold-card summary:before,
html:not(.yaagi-public-child) .settings-fold summary:before,
html:not(.yaagi-public-child) .more-fold summary:before{
  content:"›";position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(90deg);
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.8);border:1px solid rgba(23,59,115,.14);font-size:22px;
  transition:transform .18s ease;
}
html:not(.yaagi-public-child) details[open]>summary:before{transform:translateY(-50%) rotate(-90deg)}
html:not(.yaagi-public-child) .parent-fold-body,
html:not(.yaagi-public-child) .settings-fold-body,
html:not(.yaagi-public-child) .more-fold-body{padding:4px 18px 18px}
html:not(.yaagi-public-child) .parent-tone-blue summary{background:linear-gradient(110deg,#f4f8ff,#eef6ff)}
html:not(.yaagi-public-child) .parent-tone-teal summary{background:linear-gradient(110deg,#f2fbfa,#eef8f8)}
html:not(.yaagi-public-child) .parent-tone-violet summary{background:linear-gradient(110deg,#f7f5ff,#f1f3fb)}
html:not(.yaagi-public-child) .parent-tone-gold summary{background:linear-gradient(110deg,#fffaf0,#f8f1dc)}
html:not(.yaagi-public-child) .parent-tone-slate summary{background:linear-gradient(110deg,#f7f9fb,#f1f4f7)}
html:not(.yaagi-public-child) .parent-tone-coral summary{background:linear-gradient(110deg,#fff7f4,#f8f3f0)}
html:not(.yaagi-public-child) .parent-summary-title{display:flex;align-items:center;gap:10px;min-width:0}
html:not(.yaagi-public-child) .parent-summary-meta{
  margin-left:auto;margin-right:6px;white-space:nowrap;border-radius:999px;padding:5px 9px;
  background:rgba(255,255,255,.78);font-size:12px;color:#51657a
}

/* Dashboard keeps the daily information prominent, while secondary material folds away. */
html:not(.yaagi-public-child) .dashboard-today-card{position:relative;overflow:hidden}
html:not(.yaagi-public-child) .dashboard-child-actions-card{
  width:100%!important;max-width:none!important;min-width:0!important;box-sizing:border-box!important;
}
html:not(.yaagi-public-child) .dashboard-child-actions-card .yaagi-owner-inbox-section,
html:not(.yaagi-public-child) .dashboard-child-actions-card .yaagi-owner-knowme-section{width:100%;box-sizing:border-box}
html:not(.yaagi-public-child) .dashboard-child-actions-card .yaagi-owner-request,
html:not(.yaagi-public-child) .dashboard-child-actions-card .parent-game,
html:not(.yaagi-public-child) .dashboard-child-actions-card .parent-knowme{max-width:100%;box-sizing:border-box}

/* Costs: settlement is visually distinct from merchant payment. */
.costs-page .costs-pro-card{background:linear-gradient(135deg,#fff 78%,rgba(23,59,115,.025))}
.costs-page .cost-split-panel{
  margin:14px 0;padding:14px;border:1px solid #d8e4ef;border-radius:16px;background:#f8fbfe
}
.costs-page .cost-split-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.costs-page .cost-split-preview{
  margin:12px 0 0;padding:12px;border-radius:14px;background:#fff;border:1px solid #e3eaf2;
  display:grid;grid-template-columns:1fr 1fr;gap:8px
}
.costs-page .cost-split-preview strong{display:block;color:#173b73}
.costs-page .cost-settlement-note{margin-top:8px;font-weight:800;color:#365b79}
.costs-page .cost-settlement-open{color:#9a6700}
.costs-page .cost-settlement-done{color:#18794e}
.costs-page .cost-share-lines{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.costs-page .cost-share-chip{
  display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;
  background:#edf4fb;color:#244967;font-size:12px;font-weight:800
}
.costs-page .cost-settlement-toggle{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:800}
.costs-page .cost-settlement-toggle input{width:20px;height:20px}
.costs-page .cost-legacy-note{font-size:11px;color:#7a8794;margin-top:6px}

/* More page: grouped navigation remains compact and professional. */
html:not(.yaagi-public-child) .more-fold .list-item{background:rgba(255,255,255,.72)}
html:not(.yaagi-public-child) .more-fold details:not([open]){min-height:64px}

/* Settings: the top card and current preference card remain calm; rare sections stay closed. */
html:not(.yaagi-public-child) .settings-fold summary{min-height:66px}
html:not(.yaagi-public-child) .settings-fold-body{padding-top:14px}

@media(max-width:640px){
  html:not(.yaagi-public-child) .parent-fold-card summary,
  html:not(.yaagi-public-child) .settings-fold summary,
  html:not(.yaagi-public-child) .more-fold summary{padding:14px 62px 14px 14px;min-height:58px}
  .costs-page .cost-split-grid,.costs-page .cost-split-preview{grid-template-columns:1fr}
}



html:not(.yaagi-public-child) .parent-nav-card{position:relative;overflow:hidden;border:1px solid rgba(23,59,115,.12)}
html:not(.yaagi-public-child) .parent-nav-children{background:linear-gradient(135deg,#fff,#f3f7fd)}
html:not(.yaagi-public-child) .parent-nav-calendar{background:linear-gradient(135deg,#fff,#f0f9f8)}
/* YAAGI 18.12 — subtle professional page identity using existing YAAGI artwork. */
html:not(.yaagi-public-child) body.parent-page .hero-card{position:relative;overflow:hidden;border:1px solid rgba(23,59,115,.12)}
body.parent-page-children .hero-card,body.parent-page-calendar .hero-card{background:linear-gradient(135deg,#fff,#f4f8fd)}
body.parent-page-coparent .hero-card,body.parent-page-holidays .hero-card{background:linear-gradient(135deg,#fff,#f4faf8)}
body.parent-page-costs .hero-card,body.parent-page-documents .hero-card{background:linear-gradient(135deg,#fff,#f8f7f2)}
body.parent-page-settings .hero-card,body.parent-page-more .hero-card{background:linear-gradient(135deg,#fff,#f6f5fb)}



/* YAAGI 18.12 — adult/professional colour coding for parent action folds. */
html:not(.yaagi-public-child) .yaagi-owner-inbox-section>summary,
html:not(.yaagi-public-child) .yaagi-owner-knowme-section>summary{
  border:1px solid rgba(23,59,115,.12);border-radius:14px;padding:12px 14px;
  background:#f6f8fb;color:#173b73
}
html:not(.yaagi-public-child) .yaagi-owner-inbox-section:not(.yaagi-owner-game-section):not(.yaagi-owner-request-history)>summary{background:linear-gradient(110deg,#f1f7ff,#f8fbff)}
html:not(.yaagi-public-child) .yaagi-owner-request-history>summary{background:linear-gradient(110deg,#f5f6f8,#fafbfc)}
html:not(.yaagi-public-child) .yaagi-owner-game-section>summary{background:linear-gradient(110deg,#eff9f7,#f8fcfb)}
html:not(.yaagi-public-child) .yaagi-owner-knowme-section>summary{background:linear-gradient(110deg,#f6f3fb,#fbf9fd)}



/* YAAGI 18.12 — visible but not endless full-screen attention for child actions. */
@keyframes yaagiActionAttention {
  0%,100%{transform:scale(1);box-shadow:0 24px 70px rgba(7,23,43,.28)}
  45%{transform:scale(1.018);box-shadow:0 24px 76px rgba(17,99,180,.38),0 0 0 5px rgba(45,127,249,.10)}
}
@keyframes yaagiBadgeAttention {
  0%,100%{transform:scale(1);box-shadow:0 3px 9px rgba(92,20,20,.28)}
  50%{transform:scale(1.28);box-shadow:0 0 0 6px rgba(217,45,32,.14),0 4px 12px rgba(92,20,20,.35)}
}
.yaagi-global-notice.yaagi-action-attention{animation:yaagiActionAttention .72s ease-in-out 4}
.yaagi-activity-badge.is-attention{animation:yaagiBadgeAttention 1.35s ease-in-out infinite}
.yaagi-owner-action-alert{position:relative}
.yaagi-owner-action-alert:before{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px rgba(45,127,249,.10)}
@media (prefers-reduced-motion:reduce){
  .yaagi-global-notice.yaagi-action-attention,.yaagi-activity-badge.is-attention{animation:none!important}
}



/* YAAGI 18.12 — referral share sheet. */
.yaagi-referral-share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.yaagi-referral-share-grid button{min-height:48px}
.yaagi-referral-card .yaagi-referral-stats{margin-top:10px;font-weight:800;color:#365b79}
@media(max-width:520px){.yaagi-referral-share-grid{grid-template-columns:1fr}}



/* YAAGI 18.12 — Gold acquisition is never shown to an entitled account. */
body.yaagi-gold-entitled #launchPremiumCard,
body.yaagi-gold-entitled .settings-plus-upgrade-card,
body.yaagi-gold-entitled [data-yaagi-start-trial].yaagi-direct-trial-button{display:none!important}



/* YAAGI 18.12 — small functional extension for multi-day child swap requests. */
.child-request-extra-dates{display:grid;gap:8px;margin-top:8px}
.child-request-extra-date-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.child-request-extra-date-row button{width:auto;min-width:96px;margin:0}
.child-request-add-date{margin-top:8px}
@media(max-width:480px){.child-request-extra-date-row{grid-template-columns:1fr}.child-request-extra-date-row button{width:100%}}



/* YAAGI 18.12 — menu-integrated account/Gold status + two action counters. */
.yaagi-menu-panel .yaagi-menu-account-status{width:100%!important;max-width:none!important;min-height:44px!important;margin:0 0 6px!important;justify-content:flex-start!important;border-radius:12px!important;padding:9px 11px!important;box-shadow:none!important;background:linear-gradient(135deg,#fff,#f7f9fc)!important}
.yaagi-menu-panel .yaagi-menu-account-status.is-gold{background:linear-gradient(135deg,#fffaf0,#fff)!important;border-color:rgba(183,121,0,.22)!important}
.yaagi-action-count{position:absolute;min-width:19px;height:19px;padding:0 5px;border-radius:999px;color:#fff;font-size:.66rem;font-weight:950;line-height:19px;text-align:center;border:2px solid #fff;z-index:5}
.yaagi-action-count.is-requests{right:-7px;top:-8px;background:#d92d20;box-shadow:0 3px 9px rgba(92,20,20,.28)}
.yaagi-action-count.is-games{right:-7px;bottom:-8px;background:#6d4aff;box-shadow:0 3px 9px rgba(62,42,145,.28)}
.yaagi-action-count[hidden]{display:none!important}.yaagi-action-count.is-attention{animation:yaagiBadgeAttention 1.35s ease-in-out infinite}
.yaagi-menu-action-counts{margin-left:auto;display:flex;gap:4px}.yaagi-menu-action-counts[hidden]{display:none!important}.yaagi-menu-action-counts span{min-width:20px;height:20px;padding:0 6px;border-radius:999px;color:#fff;font-size:.7rem;line-height:20px;text-align:center;font-weight:950}.yaagi-menu-action-counts .is-requests{background:#d92d20}.yaagi-menu-action-counts .is-games{background:#6d4aff}
/* Live Yaagi 2.0 — research invitation must span the dashboard grid and remain readable on mobile. */
.yaagi-research-invite{grid-column:1 / -1!important;width:min(100%,920px)!important;max-width:920px!important;min-width:0!important;box-sizing:border-box;margin:14px auto!important}
.yaagi-research-invite h2,.yaagi-research-invite p{overflow-wrap:normal;word-break:normal}
.yaagi-research-invite-actions{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.yaagi-research-invite-actions button{flex:1 1 190px;min-width:0;white-space:normal}
@media(max-width:640px){.yaagi-research-invite{width:100%!important;max-width:100%!important;margin:12px 0!important}.yaagi-research-invite-actions{display:grid;grid-template-columns:1fr;gap:10px}.yaagi-research-invite-actions button{width:100%;min-height:44px}}
@media(prefers-reduced-motion:reduce){.yaagi-action-count.is-attention{animation:none!important}}

/* YAAGI 18.12 — parent Connect Four: one clean game area, full useful width. */
html:not(.yaagi-public-child) .yaagi-owner-game-section{padding:0!important;background:transparent!important;border:1px solid rgba(89,150,191,.18)!important;border-radius:18px!important;box-shadow:none!important}
html:not(.yaagi-public-child) .yaagi-owner-game-section>.yaagi-fold-body{padding:10px 10px 14px!important}
html:not(.yaagi-public-child) .yaagi-owner-game-section .parent-game{width:100%!important;max-width:none!important;box-sizing:border-box!important;margin:6px 0 12px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
html:not(.yaagi-public-child) .yaagi-owner-game-section .parent-game-title{padding:2px 2px 9px!important}
html:not(.yaagi-public-child) .yaagi-owner-game-section .parent-game-board-shell{width:100%!important;max-width:540px!important;box-sizing:border-box!important;margin:8px auto 20px!important;padding:5px 5px 18px!important}
html:not(.yaagi-public-child) .yaagi-owner-game-section .parent-game-board{width:100%!important;box-sizing:border-box!important;gap:clamp(4px,1.4vw,7px)!important;padding:clamp(7px,2vw,11px)!important}
html:not(.yaagi-public-child) .yaagi-owner-game-section .parent-game-cols{width:100%!important;max-width:540px!important}
html:not(.yaagi-public-child) .yaagi-owner-game-section .game-invite-list{margin-top:12px!important;padding:12px 2px 0!important;background:transparent!important;border:0!important;border-top:1px solid rgba(37,78,120,.10)!important;border-radius:0!important;box-shadow:none!important}
html:not(.yaagi-public-child) .yaagi-owner-knowme-invite-inline{margin:0 0 10px!important;padding:0!important;border:0!important;background:transparent!important}
html:not(.yaagi-public-child) .yaagi-owner-knowme-invite-inline .knowme-invite-list{margin-top:8px!important}
html:not(.yaagi-public-child) .yaagi-owner-knowme-invite-inline .game-invite-row{padding:8px 0!important}
html:not(.yaagi-public-child) .yaagi-owner-knowme-active{margin-top:12px;padding-top:10px;border-top:1px solid rgba(37,78,120,.10)}
@media(max-width:520px){html:not(.yaagi-public-child) .yaagi-owner-game-section>.yaagi-fold-body{padding:8px 6px 12px!important}html:not(.yaagi-public-child) .yaagi-owner-game-section .parent-game-board-shell{width:100%!important;max-width:none!important;padding:3px 3px 16px!important}html:not(.yaagi-public-child) .yaagi-owner-game-section .parent-game-board{gap:4px!important;padding:7px!important}}

/* YAAGI 19.3: rustigere professionele navigatie-iconen */
.yaagi-line-icon{width:1.28em;height:1.28em;display:inline-block;vertical-align:-.18em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.parent-nav-card h3{display:flex;align-items:center;gap:.55rem}
.parent-nav-icon{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:.7rem;background:rgba(19,53,94,.07);color:#173b73;flex:0 0 auto}
.parent-nav-icon .yaagi-line-icon{width:1.15rem;height:1.15rem}
.more-item-icon .yaagi-line-icon{width:1.28rem;height:1.28rem}
.parent-summary-title>.yaagi-line-icon{width:1.15rem;height:1.15rem;margin-right:.38rem}

/* YAAGI 19.3 — action state is shown on the full hamburger instead of floating dots. */
.yaagi-app-header .yaagi-header-menu-button{
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.yaagi-app-header .yaagi-header-menu-button.has-request-action{
  background:#c7352c!important;
  border-color:#c7352c!important;
  color:#fff!important;
  box-shadow:0 5px 14px rgba(126,31,24,.24)!important;
}
.yaagi-app-header .yaagi-header-menu-button.has-game-action{
  background:#f3c84b!important;
  border-color:#e2b739!important;
  color:#463915!important;
  box-shadow:0 5px 14px rgba(139,103,14,.20)!important;
}
.yaagi-app-header .yaagi-header-menu-button.has-request-action:hover,
.yaagi-app-header .yaagi-header-menu-button.has-game-action:hover{transform:translateY(-1px)}
.yaagi-app-header .yaagi-header-menu-button.has-request-action span{background:#fff!important}
.yaagi-app-header .yaagi-header-menu-button.has-game-action span{background:#463915!important}
.yaagi-app-header .yaagi-header-menu-button .yaagi-action-count{display:none!important}
@media(prefers-reduced-motion:reduce){.yaagi-app-header .yaagi-header-menu-button{transition:none!important}}


/* YAAGI 19.3 - desktop-only larger brand mark. Phone/tablet rules below 931px remain untouched. */
@media (min-width: 931px) {
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot .dashboard-logo-panel,
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot .logo-circle.ps-wordmark-logo {
    width: 190px !important;
    max-width: 190px !important;
    min-width: 190px !important;
  }
  html body .app .topbar.yaagi-stable-header > .yaagi-header-logo-slot img {
    width: 190px !important;
    max-width: 190px !important;
    height: auto !important;
  }
}


/* Live Yaagi 2.0 — dedicated full-width research invitation mount.
   The mount itself is the dashboard-grid child, so the invitation can never
   collapse into one of the 12 dashboard columns. */
body.yaagi-dashboard-page .yaagi-research-invite-mount{
  grid-column:1 / -1!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
}
body.yaagi-dashboard-page .yaagi-research-invite-mount:empty{display:none!important}
body.yaagi-dashboard-page .yaagi-research-invite-mount > .yaagi-research-invite{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  grid-column:auto!important;
  margin:0 0 18px!important;
  padding:22px!important;
  box-sizing:border-box!important;
}
body.yaagi-dashboard-page .yaagi-research-invite h2{
  display:block!important;width:auto!important;max-width:none!important;
  margin:0 0 10px!important;line-height:1.2!important;white-space:normal!important;
  overflow-wrap:normal!important;word-break:normal!important;
}
body.yaagi-dashboard-page .yaagi-research-invite p{
  display:block!important;width:auto!important;max-width:900px!important;
  margin:0 0 16px!important;line-height:1.55!important;white-space:normal!important;
  overflow-wrap:normal!important;word-break:normal!important;
}
body.yaagi-dashboard-page .yaagi-research-invite-actions{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;width:100%!important;
}
body.yaagi-dashboard-page .yaagi-research-invite-actions button{
  width:100%!important;min-width:0!important;min-height:46px!important;
  white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;
}
@media(max-width:700px){
 body.yaagi-dashboard-page .yaagi-research-invite-mount{width:100%!important}
 body.yaagi-dashboard-page .yaagi-research-invite-mount > .yaagi-research-invite{padding:16px!important;margin:0 0 14px!important}
 body.yaagi-dashboard-page .yaagi-research-invite-actions{grid-template-columns:1fr!important}
}


/* ================================================================
   Live Yaagi 2.0 — final desktop dashboard alignment.
   - Referral card is a real full-width dashboard-grid child.
   - Desktop brand is deliberately larger; phone/tablet remains unchanged.
   ================================================================ */
body.yaagi-dashboard-page .app > #yaagiReferralCard.yaagi-referral-card{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  justify-self:stretch !important;
  box-sizing:border-box !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
@media (min-width: 931px) {
  html body .app header.yaagi-app-header > a.yaagi-header-logo-slot,
  html body .app header.topbar.yaagi-stable-header > a.yaagi-header-logo-slot {
    width:230px !important;
    min-width:230px !important;
    max-width:230px !important;
    height:56px !important;
    min-height:56px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
  html body .app header.yaagi-app-header > a.yaagi-header-logo-slot img,
  html body .app header.topbar.yaagi-stable-header > a.yaagi-header-logo-slot img {
    width:226px !important;
    max-width:226px !important;
    height:52px !important;
    max-height:52px !important;
    object-fit:contain !important;
  }
}

/* ================================================================
   Live Yaagi 2.15 MIRROR TEST — FINAL desktop brand + research invitation attention
   This block is intentionally last so older 20.x/2.0 overrides cannot win.
   ================================================================ */
@media (min-width: 931px) {
  html body .app header.yaagi-app-header,
  html body .app header.topbar.yaagi-stable-header {
    min-height: 116px !important;
  }
  html body .app header.yaagi-app-header > a.yaagi-header-logo-slot,
  html body .app header.topbar.yaagi-stable-header > a.yaagi-header-logo-slot {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    height: 104px !important;
    min-height: 104px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }
  html body .app header.yaagi-app-header > a.yaagi-header-logo-slot img,
  html body .app header.topbar.yaagi-stable-header > a.yaagi-header-logo-slot img {
    display: block !important;
    width: 250px !important;
    max-width: 250px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

@keyframes yaagiSurveyInvitePulse {
  0%,100% { box-shadow: 0 12px 34px rgba(20,56,104,.12), 0 0 0 0 rgba(110,78,205,0); }
  50% { box-shadow: 0 16px 40px rgba(20,56,104,.18), 0 0 0 5px rgba(110,78,205,.10); }
}
@keyframes yaagiSurveyIconPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes yaagiSurveyMenuPulse {
  0%,100% { box-shadow: 0 5px 14px rgba(68,48,143,.22); }
  50% { box-shadow: 0 5px 18px rgba(68,48,143,.34), 0 0 0 5px rgba(110,78,205,.12); }
}

body.yaagi-dashboard-page .yaagi-research-invite-mount > .yaagi-research-invite {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(89,67,174,.24) !important;
  border-left: 6px solid #6e4ecd !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg,#ffffff 0%,#f8f6ff 54%,#eef5ff 100%) !important;
  box-shadow: 0 12px 34px rgba(20,56,104,.12) !important;
  animation: yaagiSurveyInvitePulse 1.7s ease-in-out 3 !important;
}
body.yaagi-dashboard-page .yaagi-research-invite-heading {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 0 12px !important;
}
body.yaagi-dashboard-page .yaagi-research-invite-icon {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  color: #fff !important;
  background: linear-gradient(145deg,#173b73,#6e4ecd) !important;
  box-shadow: 0 8px 18px rgba(45,54,133,.23) !important;
  animation: yaagiSurveyIconPulse 1.35s ease-in-out 4 !important;
}
body.yaagi-dashboard-page .yaagi-research-invite-icon svg {
  width: 34px !important;
  height: 34px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.6 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
body.yaagi-dashboard-page .yaagi-research-invite-title { min-width: 0 !important; }
body.yaagi-dashboard-page .yaagi-research-invite-kicker {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 25px !important;
  margin: 0 0 4px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  background: rgba(110,78,205,.10) !important;
  color: #5439ad !important;
  font-size: .77rem !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}
body.yaagi-dashboard-page .yaagi-research-invite h2 {
  color: #132f59 !important;
  font-size: clamp(1.32rem,2vw,1.72rem) !important;
  font-weight: 900 !important;
}
body.yaagi-dashboard-page .yaagi-research-invite-copy {
  max-width: 980px !important;
  color: #27445f !important;
  font-size: 1rem !important;
}
body.yaagi-dashboard-page .yaagi-research-invite-actions [data-yes] {
  font-weight: 900 !important;
  box-shadow: 0 7px 16px rgba(139,103,14,.16) !important;
}

.yaagi-app-header .yaagi-header-menu-button:not(.has-request-action):not(.has-game-action).has-survey-action {
  background: #6e4ecd !important;
  border-color: #6041bd !important;
  color: #fff !important;
  animation: yaagiSurveyMenuPulse 1.7s ease-in-out 4 !important;
}
.yaagi-app-header .yaagi-header-menu-button:not(.has-request-action):not(.has-game-action).has-survey-action span {
  background: #fff !important;
}
@media(max-width:700px) {
  body.yaagi-dashboard-page .yaagi-research-invite-heading { align-items: flex-start !important; gap: 11px !important; }
  body.yaagi-dashboard-page .yaagi-research-invite-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    border-radius: 14px !important;
  }
  body.yaagi-dashboard-page .yaagi-research-invite-icon svg { width: 29px !important; height: 29px !important; }
}
@media(prefers-reduced-motion:reduce) {
  body.yaagi-dashboard-page .yaagi-research-invite-mount > .yaagi-research-invite,
  body.yaagi-dashboard-page .yaagi-research-invite-icon,
  .yaagi-app-header .yaagi-header-menu-button.has-survey-action {
    animation: none !important;
  }
}


/* Live Yaagi 2.15 MIRROR TEST — definitive unified desktop header logo override.
   The real runtime header uses .yaagi-header-logo (not the legacy logo-slot class). */
@media (min-width: 961px) {
  html body .app header.yaagi-app-header,
  html body main.app header.yaagi-app-header {
    height: 116px !important;
    min-height: 116px !important;
  }
  html body .yaagi-app-header .yaagi-header-logo {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    height: 104px !important;
    min-height: 104px !important;
    max-height: 104px !important;
  }
  html body .yaagi-app-header .yaagi-header-logo img {
    display: block !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}


/* Live Yaagi 2.15 MIRROR TEST — paid-first Gold conversion layout. */
.subscription-page .yaagi-subscription-options-card{order:-30;background:linear-gradient(145deg,#fff 0%,#fffaf0 100%)!important;border-color:rgba(194,139,25,.32)!important;}
.subscription-page .yaagi-subscription-options-heading{max-width:none;text-align:center;justify-items:center;}
.subscription-page .yaagi-subscription-options-heading h2{font-size:clamp(1.7rem,3.2vw,2.45rem);}
.subscription-page .yaagi-subscription-plan-grid{grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr)!important;max-width:900px;width:100%;margin:0 auto;}
.subscription-page .yaagi-subscription-plan-card.is-yearly{position:relative;transform:scale(1.02);border:2px solid #d7a82f!important;background:linear-gradient(145deg,#fffdf3 0%,#ffe78f 100%)!important;box-shadow:0 20px 45px rgba(143,96,6,.18)!important;}
.subscription-page .yaagi-subscription-plan-card.is-yearly::before{content:"★";position:absolute;right:18px;top:14px;color:#b87d10;font-size:1.1rem;}
.subscription-page .yaagi-subscription-plan-card.is-yearly .yaagi-plan-button{font-size:1rem!important;min-height:50px!important;box-shadow:0 10px 22px rgba(166,111,9,.24)!important;}
.subscription-page .yaagi-subscription-plan-card[data-plan="monthly"] .yaagi-plan-button{min-height:46px!important;}
.subscription-page .yaagi-yearly-sales-copy{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px;align-items:center;}
.subscription-page .yaagi-yearly-sales-copy p{margin:0;color:#4b5b75;line-height:1.5;}
.subscription-page .yaagi-plan-coffee{width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(60,40,10,.16));}
.subscription-page .yaagi-trial-secondary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;max-width:900px;width:100%;margin:0 auto;padding:14px 16px;border:1px dashed rgba(15,35,75,.18);border-radius:14px;background:#f8fbff;color:#52617a;}
.subscription-page .yaagi-trial-secondary strong{color:#344963;font-size:.9rem;}
.subscription-page .yaagi-trial-secondary p{margin:3px 0 0;font-size:.86rem;}
.subscription-page .yaagi-trial-secondary-actions{text-align:right;max-width:310px;}
.subscription-page .yaagi-trial-secondary-actions .secondary{padding:8px 12px!important;font-size:.82rem!important;}
.subscription-page .yaagi-subscription-state-card{order:-20;padding:18px 22px!important;box-shadow:none!important;background:#fff!important;}
.subscription-page .yaagi-subscription-state-card::before{height:3px;}
.subscription-page .yaagi-subscription-state-copy h2{font-size:1.2rem!important;}
.subscription-page .yaagi-subscription-state-copy>p:not(.yaagi-plus-kicker){font-size:.9rem;}
.subscription-page .subscription-status-card{order:-10;}
.yaagi-paid-first-actions{align-items:center;gap:9px!important;}
.yaagi-paid-first-actions .launch-primary-action,.yaagi-paid-first-actions .secondary-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
.yaagi-quiet-trial-link{display:inline-block;margin-top:10px;color:#62728a!important;text-decoration:underline!important;font-size:.82rem!important;font-weight:600!important;background:none!important;border:0!important;box-shadow:none!important;}
.yaagi-signup-plan.is-trial-secondary{opacity:.82;border-style:dashed!important;order:3;}
@media(max-width:760px){
 .subscription-page .yaagi-subscription-plan-grid{grid-template-columns:1fr!important;}
 .subscription-page .yaagi-subscription-plan-card.is-yearly{transform:none;order:-2;}
 .subscription-page .yaagi-subscription-plan-card[data-plan="monthly"]{order:-1;}
 .subscription-page .yaagi-trial-secondary{grid-template-columns:1fr;text-align:left;}
 .subscription-page .yaagi-trial-secondary-actions{text-align:left;max-width:none;}
 .subscription-page .yaagi-yearly-sales-copy{grid-template-columns:minmax(0,1fr) 70px;}
 .subscription-page .yaagi-plan-coffee{width:66px;height:66px;}
}


/* Live Yaagi 2.15 MIRROR TEST final paid-first refinements. */
.subscription-page details.yaagi-trial-secondary{display:block!important;padding:0!important;overflow:hidden;background:#f8fbff!important;}
.subscription-page details.yaagi-trial-secondary>summary{cursor:pointer;list-style:none;padding:12px 15px;font-weight:750;color:#53657c;font-size:.88rem;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.subscription-page details.yaagi-trial-secondary>summary::-webkit-details-marker{display:none}
.subscription-page details.yaagi-trial-secondary>summary::after{content:"＋";font-size:1rem;color:#8a6a1e;}
.subscription-page details.yaagi-trial-secondary[open]>summary::after{content:"−";}
.subscription-page .yaagi-trial-secondary-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;padding:2px 15px 14px;border-top:1px dashed rgba(15,35,75,.14);}
.yaagi-gold-lock-actions{display:flex!important;flex-wrap:wrap;gap:9px!important;align-items:center;}
.yaagi-gold-lock-actions .is-yearly{order:1;}
.yaagi-gold-lock-actions .is-monthly{order:2;}
.yaagi-gold-lock-actions .yaagi-quiet-trial-link,.yaagi-gold-lock-actions .yaagi-gold-lock-trial-used{order:3;flex-basis:100%;}
@media(max-width:760px){.subscription-page .yaagi-trial-secondary-body{grid-template-columns:1fr;}.yaagi-gold-lock-actions>a{width:100%;}}

/* Live Yaagi 2.3 mirror — paid Gold + 30-day money-back guarantee. */
.subscription-page .yaagi-guarantee-strip{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  max-width:900px;width:100%;margin:2px auto 0;padding:14px 16px;border:1px solid rgba(22,115,73,.20);
  border-radius:16px;background:linear-gradient(135deg,#f5fff9 0%,#ffffff 72%);box-shadow:0 8px 22px rgba(15,35,75,.05);
}
.subscription-page .yaagi-guarantee-strip p{margin:3px 0 0;color:#52617a;line-height:1.45;font-size:.9rem;}
.subscription-page .yaagi-guarantee-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#e6f7ed;color:#146b46;font-weight:950;font-size:.92rem;border:1px solid rgba(22,115,73,.20);}
.subscription-page .yaagi-moneyback-card{border-color:rgba(22,115,73,.18)!important;background:linear-gradient(145deg,#fff 0%,#f7fff9 100%)!important;}
.subscription-page .yaagi-moneyback-heading{max-width:780px;margin:0 auto 16px;text-align:center;}
.subscription-page .yaagi-moneyback-heading h2{margin:8px 0 7px;color:#0b2552;}
.subscription-page .yaagi-moneyback-heading p{margin:0;color:#52617a;line-height:1.55;}
.subscription-page .yaagi-moneyback-badge{display:inline-flex;padding:5px 10px;border-radius:999px;background:#e8f7ee;color:#146b46;font-weight:850;font-size:.78rem;border:1px solid rgba(22,115,73,.18);}
.subscription-page .yaagi-moneyback-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:900px;margin:0 auto;}
.subscription-page .yaagi-why-paid-card,.subscription-page .yaagi-refund-steps-card{padding:17px 18px;border:1px solid rgba(15,35,75,.10);border-radius:17px;background:#fff;box-shadow:0 7px 18px rgba(15,35,75,.045);}
.subscription-page .yaagi-why-paid-card h3,.subscription-page .yaagi-refund-steps-card h3{margin:0 0 8px;color:#102243;font-size:1rem;}
.subscription-page .yaagi-why-paid-card p{margin:0;color:#52617a;line-height:1.55;font-size:.9rem;}
.subscription-page .yaagi-refund-steps{margin:0 0 13px;padding-left:21px;color:#42536d;line-height:1.5;font-size:.9rem;}
.subscription-page .yaagi-refund-steps li+li{margin-top:6px;}
.subscription-page .yaagi-guarantee-legal{max-width:900px;margin:13px auto 0;color:#6c7890;font-size:.78rem;text-align:center;}
.yaagi-guarantee-link{display:inline-flex;align-items:center;gap:5px;margin-top:8px;color:#176b49!important;text-decoration:none!important;font-size:.84rem!important;font-weight:800!important;background:none!important;border:0!important;box-shadow:none!important;}
.yaagi-guarantee-link::before{content:"✓";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e7f7ed;color:#176b49;font-size:.72rem;}
.yaagi-compact-action,.subscription-page .yaagi-compact-action{
  width:auto!important;min-width:0!important;max-width:100%;min-height:40px!important;padding:9px 14px!important;
  font-size:.88rem!important;line-height:1.2!important;border-radius:11px!important;box-shadow:none!important;
}
.subscription-page .yaagi-subscription-plan-card .yaagi-plan-button{
  width:auto!important;align-self:flex-start;min-width:190px;max-width:100%;min-height:42px!important;padding:10px 15px!important;font-size:.9rem!important;border-radius:12px!important;
}
.subscription-page .yaagi-subscription-plan-card.is-yearly .yaagi-plan-button{min-height:42px!important;font-size:.9rem!important;box-shadow:0 7px 16px rgba(166,111,9,.18)!important;}
.yaagi-paid-first-actions .launch-primary-action,.yaagi-paid-first-actions .secondary-button{width:auto!important;min-height:40px!important;padding:9px 14px!important;font-size:.88rem!important;border-radius:11px!important;}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan{min-height:92px!important;padding:13px 16px!important;}
body.login-page .yaagi-signup-plan-grid.yaagi-signup-plan-stack .yaagi-signup-plan strong{font-size:1.06rem!important;}
.yaagi-signup-guarantee{display:flex;gap:8px;align-items:flex-start;margin-top:3px;padding:10px 12px;border-radius:13px;background:#f2fbf6;border:1px solid rgba(22,115,73,.15);color:#38566a;font-size:.84rem;line-height:1.4;}
.yaagi-signup-guarantee strong{color:#176b49;white-space:nowrap;}
@media(max-width:760px){
  .subscription-page .yaagi-guarantee-strip{grid-template-columns:auto minmax(0,1fr);}
  .subscription-page .yaagi-guarantee-strip .yaagi-compact-action{grid-column:1/-1;justify-self:start;}
  .subscription-page .yaagi-moneyback-grid{grid-template-columns:1fr;}
  .subscription-page .yaagi-subscription-plan-card .yaagi-plan-button{width:100%!important;min-width:0;}
  .yaagi-signup-guarantee{display:grid;gap:3px;}
}

/* Live Yaagi 2.15 MIRROR TEST — free Basic is a clear, secondary signup choice. */
body.login-page .yaagi-signup-plan-basic{background:#fff;border-style:solid;box-shadow:none;}
body.login-page .yaagi-signup-plan-basic strong{color:#19324d;}


/* Live Yaagi 2.14 — final parent visual cleanup before launch.
   Scope deliberately excludes the public child environment and Gold/subscription pages. */
html:not(.yaagi-public-child) body.parent-page .parent-fold-card summary::after,
html:not(.yaagi-public-child) body.parent-page .settings-fold summary::after,
html:not(.yaagi-public-child) body.parent-page .more-fold summary::after,
html:not(.yaagi-public-child) body.parent-page .hero-card::after,
html:not(.yaagi-public-child) body.parent-page .dashboard-today-card::after,
html:not(.yaagi-public-child) body.parent-page .parent-nav-card::after {
  content:none !important;
  display:none !important;
  background-image:none !important;
}

/* Normal parent actions use one YAAGI navy treatment. Gold remains reserved for Gold/subscription UI. */
html:not(.yaagi-public-child) body.parent-page button:not(.secondary):not(.muted-button):not(.danger):not(.yaagi-language-trigger):not(.yaagi-header-menu-button):not(.calendar-title button):not([data-cost-period]),
html:not(.yaagi-public-child) body.parent-page .button.primary,
html:not(.yaagi-public-child) body.parent-page a.button.primary {
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#173b73 0%,#102f5d 55%,#0b274d 100%) !important;
  color:#fff !important;
  border:1px solid rgba(7,32,67,.72) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 18px rgba(11,39,77,.18) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.16) !important;
}
html:not(.yaagi-public-child) body.parent-page button:not(.secondary):not(.muted-button):not(.danger):not(.yaagi-language-trigger):not(.yaagi-header-menu-button):not(.calendar-title button):not([data-cost-period])::after,
html:not(.yaagi-public-child) body.parent-page .button.primary::after,
html:not(.yaagi-public-child) body.parent-page a.button.primary::after {
  content:"" !important;display:block !important;position:absolute !important;inset:1px 1px auto 1px !important;height:38% !important;
  border-radius:inherit !important;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0)) !important;pointer-events:none !important;
}
html:not(.yaagi-public-child) body.parent-page button:not(.secondary):not(.muted-button):not(.danger):not(.yaagi-language-trigger):not(.yaagi-header-menu-button):not(.calendar-title button):not([data-cost-period]):hover,
html:not(.yaagi-public-child) body.parent-page .button.primary:hover,
html:not(.yaagi-public-child) body.parent-page a.button.primary:hover {
  background:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 42%),linear-gradient(135deg,#1b477f 0%,#123764 55%,#0c2c55 100%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 11px 22px rgba(11,39,77,.22) !important;
}

/* Costs 2.11: calm navy cards, red means still open, green means settled. */
.costs-page .hero-card{background:linear-gradient(145deg,#102a49,#0b1f38) !important;border-color:rgba(10,38,72,.55) !important;box-shadow:0 14px 34px rgba(11,31,56,.18) !important;}
.costs-page .hero-card h2,.costs-page .hero-card .cost-period-caption{color:#fff !important;}
.costs-page .summary-grid>div,
.costs-page .cost-paid-summary>div,
.costs-page .cost-settlement-summary>div{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.055)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.costs-page .summary-grid p,.costs-page .cost-paid-summary .small,.costs-page .cost-settlement-summary .small{color:rgba(255,255,255,.72) !important;}
.costs-page .summary-grid strong,.costs-page .cost-paid-summary strong,.costs-page .cost-settlement-summary strong{color:#fff !important;}
.costs-page .cost-paid-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px;}
.costs-page .cost-paid-summary>div{padding:11px 13px;border-radius:14px;}
.costs-page .cost-paid-summary strong{display:block;font-size:18px;margin-top:3px;}
.costs-page .cost-settlement-open{color:#c62828 !important;}
.costs-page .cost-settlement-done{color:#18794e !important;}
.costs-page .cost-settlement-toggle:not(:has(input:checked)) span{color:#c62828 !important;}
.costs-page .cost-settlement-toggle:has(input:checked) span{color:#18794e !important;}
.costs-page .cost-amount{color:#173b73 !important;}
.costs-page .cost-period-tabs button{background:#fff !important;color:#173b73 !important;border:1px solid #cbd8e6 !important;box-shadow:none !important;text-shadow:none !important;}
.costs-page .cost-period-tabs button.is-active{background:linear-gradient(180deg,#1a457e,#102f5d) !important;color:#fff !important;border-color:#102f5d !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 5px 12px rgba(16,47,93,.18) !important;}
@media(max-width:700px){.costs-page .cost-paid-summary{grid-template-columns:1fr;}}


/* Live Yaagi 2.15 MIRROR TEST — subscription mobile containment hotfix.
   Isolated patch: prevents the Gold visual from forcing horizontal overflow. */
.subscription-page,
.subscription-page .app-shell,
.subscription-page main,
.subscription-page .yaagi-subscription-main,
.subscription-page .yaagi-subscription-options-card,
.subscription-page .yaagi-subscription-options-heading,
.subscription-page .yaagi-yearly-sales-copy,
.subscription-page .yaagi-subscription-plan-grid,
.subscription-page .yaagi-subscription-plan-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.subscription-page { overflow-x: clip; }
.subscription-page .yaagi-subscription-options-card {
  display: grid;
  gap: 24px;
  padding: clamp(20px, 4vw, 34px) !important;
}
.subscription-page .yaagi-subscription-options-heading {
  width: 100%;
  max-width: none;
}
.subscription-page .yaagi-subscription-options-heading p,
.subscription-page .yaagi-subscription-plan-card p,
.subscription-page .yaagi-subscription-plan-card span {
  overflow-wrap: anywhere;
}
.subscription-page .yaagi-yearly-sales-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, 110px);
  gap: 14px;
  align-items: center;
  width: 100%;
  overflow: hidden;
}
.subscription-page .yaagi-yearly-sales-copy p { margin: 0; }
.subscription-page .yaagi-plan-coffee {
  display: block;
  width: 100%;
  max-width: 110px;
  height: auto;
  max-height: 110px;
  object-fit: contain;
  justify-self: end;
  filter: drop-shadow(0 8px 10px rgba(60,40,10,.16));
}
.subscription-page .yaagi-subscription-plan-grid {
  grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr) !important;
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
}
@media (max-width: 760px) {
  .subscription-page .yaagi-subscription-main { width: 100%; }
  .subscription-page .yaagi-subscription-options-card { padding: 20px 16px !important; }
  .subscription-page .yaagi-subscription-options-heading { text-align: left; }
  .subscription-page .yaagi-subscription-plan-grid { grid-template-columns: minmax(0,1fr) !important; }
  .subscription-page .yaagi-subscription-plan-card.is-yearly { transform: none !important; }
  .subscription-page .yaagi-yearly-sales-copy {
    grid-template-columns: minmax(0,1fr) 76px;
    gap: 10px;
  }
  .subscription-page .yaagi-plan-coffee { max-width: 76px; max-height: 76px; }
}
@media (max-width: 420px) {
  .subscription-page .yaagi-subscription-options-card { padding: 18px 14px !important; }
  .subscription-page .yaagi-yearly-sales-copy { grid-template-columns: minmax(0,1fr) 64px; }
  .subscription-page .yaagi-plan-coffee { max-width: 64px; max-height: 64px; }
}


/* Live Yaagi 2.15 MIRROR TEST — compact adaptive coffee video on subscription only. */
.subscription-page .yaagi-yearly-sales-copy {
  grid-template-columns: minmax(0,1fr) clamp(56px, 8vw, 92px) !important;
  gap: clamp(8px, 1.4vw, 14px) !important;
  align-items: center !important;
  overflow: visible !important;
}
.subscription-page .yaagi-plan-coffee-link {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: clamp(56px, 8vw, 92px) !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  cursor: pointer !important;
  justify-self: end !important;
  line-height: 0 !important;
}
.subscription-page .yaagi-plan-coffee-link::before,
.subscription-page .yaagi-plan-coffee-link::after { content:none !important; display:none !important; }
.subscription-page .yaagi-plan-coffee-link:focus-visible {
  outline: 3px solid rgba(23,59,115,.38) !important;
  outline-offset: 3px !important;
}
.subscription-page .yaagi-plan-coffee-link .yaagi-plan-coffee {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  filter: none !important;
}
@media (max-width:760px) {
  .subscription-page .yaagi-yearly-sales-copy { grid-template-columns:minmax(0,1fr) clamp(50px,16vw,68px) !important; }
  .subscription-page .yaagi-plan-coffee-link { width:clamp(50px,16vw,68px) !important; }
}
@media (max-width:420px) {
  .subscription-page .yaagi-yearly-sales-copy { grid-template-columns:minmax(0,1fr) clamp(46px,15vw,60px) !important; }
  .subscription-page .yaagi-plan-coffee-link { width:clamp(46px,15vw,60px) !important; }
}


/* Live Yaagi 2.16 MIRROR TEST — final subscription media sizing guard. */
.subscription-page .yaagi-plan-coffee-link{width:clamp(46px,7vw,78px)!important;max-width:78px!important;min-width:0!important;padding:0!important;border:0!important;background:transparent!important;overflow:hidden!important;box-shadow:none!important}
.subscription-page .yaagi-plan-coffee-link .yaagi-plan-coffee{width:100%!important;height:auto!important;max-width:78px!important;max-height:52px!important;object-fit:contain!important}
.subscription-page .ps-status-gold-ball,.subscription-page .yaagi-header-gold-status img,.subscription-page .yaagi-nav-gold-status img{width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important}
@media(max-width:760px){.subscription-page .yaagi-plan-coffee-link{width:clamp(44px,12vw,56px)!important;max-width:56px!important}.subscription-page .yaagi-plan-coffee-link .yaagi-plan-coffee{max-width:56px!important;max-height:40px!important}}
@media(max-width:420px){.subscription-page .yaagi-plan-coffee-link{width:clamp(42px,11vw,50px)!important;max-width:50px!important}.subscription-page .yaagi-plan-coffee-link .yaagi-plan-coffee{max-width:50px!important;max-height:36px!important}}


/* Live Yaagi 2.17 MIRROR TEST — subscription final desktop/mobile correction. */
.subscription-page .yaagi-subscription-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;max-width:1040px!important;width:100%!important;margin-inline:auto!important}
.subscription-page .yaagi-subscription-plan-card,.subscription-page .yaagi-subscription-plan-card.is-yearly{min-width:0!important;width:auto!important;max-width:none!important;transform:none!important}
.subscription-page .yaagi-yearly-value-note img{display:none!important}
.subscription-page .yaagi-yearly-sales-copy{grid-template-columns:minmax(0,1fr) clamp(118px,11vw,154px)!important;gap:18px!important}
.subscription-page .yaagi-plan-coffee-link{width:clamp(118px,11vw,154px)!important;max-width:154px!important}
.subscription-page .yaagi-plan-coffee-link video,.subscription-page .yaagi-plan-coffee{width:100%!important;height:auto!important;max-width:154px!important;max-height:102px!important;object-fit:contain!important}
.subscription-page .ps-status-gold-ball,.subscription-page .yaagi-header-gold-status img,.subscription-page .yaagi-nav-gold-status img{display:none!important;width:0!important;height:0!important}
@media(max-width:760px){
 .subscription-page .yaagi-subscription-plan-grid{grid-template-columns:minmax(0,1fr)!important;max-width:100%!important}
 .subscription-page .yaagi-yearly-sales-copy{grid-template-columns:minmax(0,1fr) clamp(76px,23vw,98px)!important;gap:12px!important}
 .subscription-page .yaagi-plan-coffee-link{width:clamp(76px,23vw,98px)!important;max-width:98px!important}
 .subscription-page .yaagi-plan-coffee-link video,.subscription-page .yaagi-plan-coffee{max-width:98px!important;max-height:66px!important}
}
@media(max-width:420px){
 .subscription-page .yaagi-yearly-sales-copy{grid-template-columns:minmax(0,1fr) clamp(68px,22vw,86px)!important}
 .subscription-page .yaagi-plan-coffee-link{width:clamp(68px,22vw,86px)!important;max-width:86px!important}
 .subscription-page .yaagi-plan-coffee-link video,.subscription-page .yaagi-plan-coffee{max-width:86px!important;max-height:58px!important}
}


/* Live Yaagi 4.3 — WordPress-style Gold pricing presentation. */
.subscription-page .yaagi-subscription-options-card{
  background:#fff !important;
  border:1px solid rgba(15,35,75,.10) !important;
  box-shadow:0 16px 38px rgba(15,35,75,.08) !important;
}
.subscription-page .yaagi-subscription-plan-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px !important;
  max-width:1040px !important;
}
.subscription-page .yaagi-subscription-plan-card,
.subscription-page .yaagi-subscription-plan-card.is-yearly{
  min-height:100% !important;
  padding:28px !important;
  border-radius:24px !important;
  transform:none !important;
}
.subscription-page .yaagi-subscription-plan-card.is-yearly{
  border:1px solid rgba(193,145,43,.34) !important;
  background:linear-gradient(150deg,#fffdf7 0%,#fff8e7 100%) !important;
  box-shadow:0 12px 30px rgba(151,106,16,.10) !important;
}
.subscription-page .yaagi-subscription-plan-card.is-yearly::before{content:none !important;display:none !important;}
.subscription-page .yaagi-subscription-plan-card[data-plan="monthly"]{
  border:1px solid rgba(15,35,75,.11) !important;
  background:linear-gradient(150deg,#fff 0%,#fffdf8 100%) !important;
  box-shadow:0 12px 30px rgba(15,35,75,.07) !important;
}
.subscription-page .yaagi-plan-label{
  border-radius:999px !important;
  padding:7px 13px !important;
  background:#fff2c8 !important;
  color:#6d4c0d !important;
  font-weight:900 !important;
}
.subscription-page .yaagi-most-chosen-badge{
  border-radius:999px !important;
  padding:7px 13px !important;
}
.subscription-page .yaagi-subscription-plan-card h3{font-size:clamp(2.25rem,4vw,3.25rem) !important;}
.subscription-page .yaagi-yearly-value-note{
  background:#fff9e8 !important;
  border:1px solid rgba(193,145,43,.14) !important;
  border-radius:17px !important;
}
.subscription-page .yaagi-monthly-plan-top{
  display:grid !important;
  grid-template-columns:minmax(0,.88fr) minmax(220px,1.12fr) !important;
  gap:20px !important;
  align-items:center !important;
}
.subscription-page .yaagi-monthly-plan-copy{min-width:0 !important;}
.subscription-page .yaagi-monthly-coffee-link{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:block !important;
  width:100% !important;
  max-width:330px !important;
  padding:0 !important;
  margin:0 0 0 auto !important;
  border:0 !important;
  border-radius:20px !important;
  background:#eceeef !important;
  box-shadow:0 10px 24px rgba(15,35,75,.12) !important;
  overflow:hidden !important;
  cursor:pointer !important;
  line-height:0 !important;
}
.subscription-page .yaagi-monthly-coffee-link::before,
.subscription-page .yaagi-monthly-coffee-link::after{content:none !important;display:none !important;}
.subscription-page .yaagi-monthly-coffee-link:focus-visible{outline:3px solid rgba(23,59,115,.35) !important;outline-offset:3px !important;}
.subscription-page .yaagi-monthly-coffee-video{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  object-fit:cover !important;
  border-radius:20px !important;
}
.subscription-page .yaagi-subscription-plan-card .yaagi-plan-button{
  margin-top:auto !important;
  min-height:46px !important;
  border-radius:13px !important;
}
.subscription-page .yaagi-subscription-plan-card.is-yearly .yaagi-plan-button{
  background:linear-gradient(135deg,#fff2ad 0%,#e4aa13 52%,#c88b05 100%) !important;
  color:#082348 !important;
  border-color:rgba(117,74,0,.46) !important;
}
@media(max-width:900px){
 .subscription-page .yaagi-monthly-plan-top{grid-template-columns:minmax(0,1fr) minmax(180px,.85fr) !important;}
 .subscription-page .yaagi-monthly-coffee-link{max-width:270px !important;}
}
@media(max-width:760px){
 .subscription-page .yaagi-subscription-plan-grid{grid-template-columns:minmax(0,1fr) !important;}
 .subscription-page .yaagi-subscription-plan-card,.subscription-page .yaagi-subscription-plan-card.is-yearly{padding:22px !important;}
 .subscription-page .yaagi-monthly-plan-top{grid-template-columns:minmax(0,1fr) !important;gap:14px !important;}
 .subscription-page .yaagi-monthly-coffee-link{width:min(100%,310px) !important;max-width:310px !important;margin:0 auto !important;}
}
@media(max-width:420px){
 .subscription-page .yaagi-subscription-plan-card,.subscription-page .yaagi-subscription-plan-card.is-yearly{padding:18px !important;border-radius:20px !important;}
 .subscription-page .yaagi-monthly-coffee-link{width:min(100%,270px) !important;max-width:270px !important;border-radius:16px !important;}
 .subscription-page .yaagi-monthly-coffee-video{border-radius:16px !important;}
}


/* Live Yaagi 4.3 — final subscription card copy placement and responsive safeguards. */
.subscription-page .yaagi-monthly-value-note{
  margin:14px 0 18px !important;
  padding:14px 16px !important;
  border:1px solid rgba(15,35,75,.10) !important;
  border-radius:17px !important;
  background:#f7faff !important;
  color:#0d2d58 !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}
.subscription-page .yaagi-yearly-value-note{
  color:#0d2d58 !important;
  font-weight:800 !important;
  line-height:1.45 !important;
}
.subscription-page .yaagi-subscription-plan-card{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
}
.subscription-page .yaagi-monthly-plan-top,
.subscription-page .yaagi-monthly-plan-copy,
.subscription-page .yaagi-yearly-sales-copy{min-width:0 !important;}
@media(max-width:760px){
  .subscription-page .yaagi-monthly-value-note,
  .subscription-page .yaagi-yearly-value-note{font-size:.94rem !important;}
  .subscription-page .yaagi-subscription-plan-card .yaagi-plan-button{width:100% !important;}
}

/* YAAGI 3.8 — smooth gold, no stripe effect.
   Only the controls already intended to be gold are touched. */
.subscription-page .yaagi-plan-pill,
.subscription-page .yaagi-plan-cta,
.login-page .yaagi-signup-plan.is-featured,
.yaagi-signup-plan.is-featured,
.yaagi-signup-plan-badge{
  color:#08264e !important;
  border:1px solid #a87408 !important;
  background:linear-gradient(135deg,#f9dc73 0%,#e7bd4d 42%,#c99018 72%,#b57908 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(94,57,0,.18),
    0 3px 8px rgba(104,64,0,.22) !important;
  text-shadow:none !important;
}
.subscription-page .yaagi-plan-pill{
  border-radius:14px !important;
  font-weight:900 !important;
}
.subscription-page .yaagi-plan-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.1 !important;
  min-height:50px !important;
  width:min(100%,310px) !important;
  padding:11px 22px !important;
  border-radius:999px !important;
  font-weight:900 !important;
  position:relative !important;
}
.subscription-page .yaagi-plan-cta::before,
.subscription-page .yaagi-plan-cta::after{content:none !important}
.subscription-page .yaagi-plan-cta:hover{filter:brightness(1.035);transform:translateY(-1px)}
.subscription-page .yaagi-plan-cta:active{transform:translateY(1px)}
/* Mobile plan order: copy first, media second, CTA last. */
@media(max-width:760px){
  .subscription-page .yaagi-pricing-card-grid{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:16px !important;
  }
  .subscription-page .yaagi-pricing-card-grid > .yaagi-plan-media{
    order:2 !important;
    width:min(92%,300px) !important;
    margin:0 auto !important;
    justify-self:auto !important;
  }
  .subscription-page .yaagi-pricing-card-grid > .yaagi-plan-cta{
    order:3 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
}
/* Lower YAAGI demo: just the video, no blue preview card. */
.subscription-page .yaagi-gold-product-preview{
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  overflow:visible !important;
}
.subscription-page .yaagi-gold-product-preview video{
  display:block !important;
  width:100% !important;
  max-height:none !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:none !important;
  object-fit:cover !important;
}

/* YAAGI 3.8 — final subscription media alignment */
.subscription-page .yaagi-basic-image-link{
  display:block !important;
  width:100% !important;
  height:100% !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 10px 24px rgba(7,38,78,.16) !important;
  text-decoration:none !important;
}
.subscription-page .yaagi-basic-image-link img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:16/10 !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:none !important;
}
.subscription-page .yaagi-pricing-card-grid > .yaagi-plan-media{
  overflow:visible !important;
}
@media(max-width:760px){
  .subscription-page .yaagi-pricing-card-grid > .yaagi-plan-media{
    width:min(92%,300px) !important;
    aspect-ratio:16/10 !important;
    margin:0 auto !important;
  }
  .subscription-page .yaagi-pricing-card-grid > .yaagi-plan-media video,
  .subscription-page .yaagi-pricing-card-grid > .yaagi-plan-media .yaagi-plan-video-button,
  .subscription-page .yaagi-pricing-card-grid > .yaagi-plan-media .yaagi-basic-image-link{
    width:100% !important;
    height:100% !important;
    aspect-ratio:16/10 !important;
  }
  .subscription-page .yaagi-pricing-card-grid > .yaagi-plan-media video{
    object-fit:cover !important;
    object-position:center !important;
    border-radius:18px !important;
    box-shadow:0 10px 24px rgba(7,38,78,.16) !important;
  }
  /* Keep every plan CTA below its media, centered and full-width. */
  .subscription-page .yaagi-pricing-card-grid > .yaagi-plan-cta{
    order:3 !important;
    width:100% !important;
    margin:0 !important;
  }
}
/* On desktop Basic media uses the same visual box proportions as Gold media. */
@media(min-width:761px){
  .subscription-page .yaagi-basic-image-link img{
    min-height:100% !important;
  }
}

/* YAAGI 3.8 Basic: image is a real media item, CTA below it. */
.subscription-page .yaagi-basic-image-wrap{
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
@media(max-width:760px){
  .subscription-page #basic-plan .yaagi-pricing-card-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }
  .subscription-page #basic-plan .yaagi-basic-image-wrap{
    order:2 !important;
    width:min(92%,300px) !important;
    aspect-ratio:16/10 !important;
    margin:0 auto !important;
  }
  .subscription-page #basic-plan .yaagi-plan-cta{
    order:3 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
  }
}

/* YAAGI 3.8 — screenshot/live cleanup: no ghost artwork in parent cards. */
html:not(.yaagi-public-child) body.parent-page .hero-card::after{
  content:none !important;
  display:none !important;
  background-image:none !important;
}
html:not(.yaagi-public-child) body.parent-page .settings-fold summary::after,
html:not(.yaagi-public-child) body.parent-page .more-fold summary::after,
html:not(.yaagi-public-child) body.parent-page .parent-fold-card summary::after{
  background-image:none !important;
  background:none !important;
  opacity:1 !important;
}
/* The fold chevron remains visible; only the decorative image layer is removed. */


/* YAAGI 3.8 LIVE FINAL — screenshot cleanup and stable entry transition. */
/* Decorative ghost artwork must never appear in parent cards/folds. */
html:not(.yaagi-public-child) body.parent-page .hero-card:after,
html:not(.yaagi-public-child) body.parent-page .hero-card::after,
html:not(.yaagi-public-child) body.parent-page .dashboard-today-card:after,
html:not(.yaagi-public-child) body.parent-page .dashboard-today-card::after,
html:not(.yaagi-public-child) body.parent-page .parent-nav-card:after,
html:not(.yaagi-public-child) body.parent-page .parent-nav-card::after,
html:not(.yaagi-public-child) body.parent-page .parent-fold-card summary:after,
html:not(.yaagi-public-child) body.parent-page .parent-fold-card summary::after,
html:not(.yaagi-public-child) body.parent-page .settings-fold summary:after,
html:not(.yaagi-public-child) body.parent-page .settings-fold summary::after,
html:not(.yaagi-public-child) body.parent-page .more-fold summary:after,
html:not(.yaagi-public-child) body.parent-page .more-fold summary::after {
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
}
/* Keep real fold chevrons from page-local CSS; only image pseudo-layers above are suppressed. */

/* No Gold-ball flash while the app restores its authenticated cloud state. */
html.yaagi-booting .ps-status-gold-ball,
html.yaagi-booting .yaagi-header-gold-status,
html.yaagi-booting .yaagi-nav-gold-status,
html.yaagi-booting #yaagiHeaderGoldStatus,
html.yaagi-booting #yaagiGoldMenuStatus { display:none !important; }
/* Entry loader is deliberately neutral: no round/gold visual when entering from WordPress. */
html.yaagi-booting .yaagi-boot-orb { display:none !important; }
html.yaagi-booting .yaagi-boot-loader-inner { gap:9px !important; }


/* YAAGI 3.8 R2 — LIVE parent visual cleanup.
   Decorative guide artwork is disabled centrally. Functional arrows/icons remain. */
html:not(.yaagi-public-child) body.parent-page .hero-card::after,
html:not(.yaagi-public-child) body.parent-page .hero-card:after,
html:not(.yaagi-public-child) body.parent-page .dashboard-today-card::after,
html:not(.yaagi-public-child) body.parent-page .dashboard-today-card:after,
html:not(.yaagi-public-child) body.parent-page .parent-nav-card::after,
html:not(.yaagi-public-child) body.parent-page .parent-nav-card:after,
html:not(.yaagi-public-child) body.parent-page .parent-fold-card summary::after,
html:not(.yaagi-public-child) body.parent-page .parent-fold-card summary:after,
html:not(.yaagi-public-child) body.parent-page .settings-fold summary::after,
html:not(.yaagi-public-child) body.parent-page .settings-fold summary:after,
html:not(.yaagi-public-child) body.parent-page .more-fold summary::after,
html:not(.yaagi-public-child) body.parent-page .more-fold summary:after {
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
  filter:none !important;
}

/* One consistent YAAGI navy for genuine parent hero cards. */
html:not(.yaagi-public-child) body.parent-page .hero-card,
html:not(.yaagi-public-child) body.parent-page .yaagi-help-hero {
  background:linear-gradient(145deg,#102a49 0%,#0b1f38 100%) !important;
  border:1px solid rgba(10,38,72,.55) !important;
  box-shadow:0 14px 34px rgba(11,31,56,.18) !important;
}
html:not(.yaagi-public-child) body.parent-page .hero-card h1,
html:not(.yaagi-public-child) body.parent-page .hero-card h2,
html:not(.yaagi-public-child) body.parent-page .hero-card h3,
html:not(.yaagi-public-child) body.parent-page .hero-card p,
html:not(.yaagi-public-child) body.parent-page .yaagi-help-hero h1,
html:not(.yaagi-public-child) body.parent-page .yaagi-help-hero h2,
html:not(.yaagi-public-child) body.parent-page .yaagi-help-hero p {
  color:#fff !important;
}

/* More: keep the folds light, but make each section instantly recognisable. */
html:not(.yaagi-public-child) body.parent-page-more .more-fold.parent-tone-blue summary{background:linear-gradient(110deg,#e8f2ff,#dcecff) !important}
html:not(.yaagi-public-child) body.parent-page-more .more-fold.parent-tone-teal summary{background:linear-gradient(110deg,#e5f8f3,#d6f1ea) !important}
html:not(.yaagi-public-child) body.parent-page-more .more-fold.parent-tone-violet summary{background:linear-gradient(110deg,#f0eaff,#e6defa) !important}
html:not(.yaagi-public-child) body.parent-page-more .more-fold.parent-tone-gold summary{background:linear-gradient(110deg,#fff3cf,#f8e7af) !important}
html:not(.yaagi-public-child) body.parent-page-more .more-fold.parent-tone-slate summary{background:linear-gradient(110deg,#edf1f5,#e1e7ee) !important}
html:not(.yaagi-public-child) body.parent-page-more .more-fold.parent-tone-coral summary{background:linear-gradient(110deg,#ffebe5,#f9ddd4) !important}

/* Costs: whole list can collapse, existing month/year folds remain untouched. */
.costs-all-details>summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  font-weight:900;font-size:1.08rem;color:#173b73;padding:2px 0 14px;
}
.costs-all-details>summary::-webkit-details-marker{display:none}
.costs-all-details>summary::after{
  content:"⌄";margin-left:auto;width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;background:#fff;border:1px solid #d7e0ea;color:#173b73;
  font-size:20px;line-height:1;transition:transform .18s ease;
}
.costs-all-details[open]>summary::after{transform:rotate(180deg)}
.costs-all-details-body{padding-top:2px}
@media print{
  .costs-all-details>summary{display:none!important}
  .costs-all-details-body{display:block!important}
}

/* Smooth Gold only: no striped reflection. Do not touch menu/language/normal buttons. */
.subscription-page .launch-primary-action,
.subscription-page .yaagi-plan-cta,
.login-page .yaagi-signup-plan.is-featured,
.yaagi-gold-lock-option.is-yearly,
.yaagi-paid-first-actions .launch-primary-action {
  background:linear-gradient(135deg,#f9dc73 0%,#d7a72d 54%,#b57908 100%) !important;
  background-image:linear-gradient(135deg,#f9dc73 0%,#d7a72d 54%,#b57908 100%) !important;
  color:#082b55 !important;
  text-shadow:none !important;
}
.subscription-page .launch-primary-action::after,
.subscription-page .yaagi-plan-cta::after,
.login-page .yaagi-signup-plan.is-featured::after,
.yaagi-gold-lock-option.is-yearly::after,
.yaagi-paid-first-actions .launch-primary-action::after{
  content:none !important;display:none !important;background:none !important;
}


/* YAAGI 3.8 R2 final specificity: dashboard/index also contains these adult cards. */
html:not(.yaagi-public-child) .parent-nav-card::after,
html:not(.yaagi-public-child) .parent-nav-card:after,
html:not(.yaagi-public-child) .dashboard-today-card::after,
html:not(.yaagi-public-child) .dashboard-today-card:after,
html:not(.yaagi-public-child) .parent-fold-card summary::after,
html:not(.yaagi-public-child) .parent-fold-card summary:after,
html:not(.yaagi-public-child) .settings-fold summary::after,
html:not(.yaagi-public-child) .settings-fold summary:after,
html:not(.yaagi-public-child) .more-fold summary::after,
html:not(.yaagi-public-child) .more-fold summary:after {
  content:none !important;display:none !important;background:none !important;
  background-image:none !important;opacity:0 !important;filter:none !important;
}
.yaagi-help-page .yaagi-help-hero,
.guide-wrap .guide-hero {
  background:linear-gradient(145deg,#102a49 0%,#0b1f38 100%) !important;
  border:1px solid rgba(10,38,72,.55) !important;
  box-shadow:0 14px 34px rgba(11,31,56,.18) !important;
}
.yaagi-help-page .yaagi-help-hero h1,
.yaagi-help-page .yaagi-help-hero h2,
.yaagi-help-page .yaagi-help-hero p,
.guide-wrap .guide-hero h1,
.guide-wrap .guide-hero h2,
.guide-wrap .guide-hero p {color:#fff !important;}

/* Keep the blue hero family consistent on dashboard and assistant too. */
body.yaagi-dashboard-page .hero-card,
body.assistant-page .hero-card {
  background:linear-gradient(145deg,#102a49 0%,#0b1f38 100%) !important;
  border:1px solid rgba(10,38,72,.55) !important;
  box-shadow:0 14px 34px rgba(11,31,56,.18) !important;
}
body.yaagi-dashboard-page .hero-card h1,
body.yaagi-dashboard-page .hero-card h2,
body.yaagi-dashboard-page .hero-card h3,
body.yaagi-dashboard-page .hero-card p,
body.assistant-page .hero-card h1,
body.assistant-page .hero-card h2,
body.assistant-page .hero-card h3,
body.assistant-page .hero-card p {color:#fff !important;}

/* YAAGI 3.8 — permanent adult ghost-art kill. Source generators above were removed too. */
html:not(.yaagi-public-child) .dashboard-today-card::after,
html:not(.yaagi-public-child) .dashboard-today-card:after,
html:not(.yaagi-public-child) .parent-nav-card::after,
html:not(.yaagi-public-child) .parent-nav-card:after,
html:not(.yaagi-public-child) body.parent-page .hero-card::after,
html:not(.yaagi-public-child) body.parent-page .hero-card:after,
html:not(.yaagi-public-child) .parent-fold-card summary::after,
html:not(.yaagi-public-child) .parent-fold-card summary:after,
html:not(.yaagi-public-child) .settings-fold summary::after,
html:not(.yaagi-public-child) .settings-fold summary:after,
html:not(.yaagi-public-child) .more-fold summary::after,
html:not(.yaagi-public-child) .more-fold summary:after{content:none!important;display:none!important;background:none!important;background-image:none!important;opacity:0!important;}


/* YAAGI 4.3 — readability and premium blue surface correction.
   Pure CSS light/gloss only: no decorative/transparent page artwork is reintroduced. */
html body .app .yaagi-child-choice,
html body .app button.yaagi-child-choice.secondary,
html body .app .child-summary-toggle {
  background: linear-gradient(180deg, #ffffff 0%, #f3f8fd 100%) !important;
  color: #17365e !important;
  border-color: rgba(36, 91, 145, 0.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 18px rgba(15,47,87,.07) !important;
}
html body .app .yaagi-child-choice:hover,
html body .app button.yaagi-child-choice.secondary:hover,
html body .app .child-summary-toggle:hover,
html body .app .child-collapsible-item.is-open .child-summary-toggle {
  background: linear-gradient(180deg, #ffffff 0%, #eaf4ff 100%) !important;
  color: #0d315d !important;
  border-color: rgba(45,127,249,.28) !important;
}
html body:not(.yaagi-public-child) .app .hero-card,
html body:not(.yaagi-public-child) .app .guide-hero,
html body:not(.yaagi-public-child) .app .login-hero,
html body:not(.yaagi-public-child) .app .yaagi-help-hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.055) 14%, rgba(255,255,255,0) 31%),
    radial-gradient(ellipse at 50% -24%, rgba(119,184,255,.30) 0%, rgba(59,130,246,.09) 36%, transparent 66%),
    linear-gradient(135deg, #071a36 0%, #0b3567 48%, #071d3e 100%) !important;
  border: 1px solid rgba(145,190,235,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 3px 0 rgba(4,20,43,.18),
    0 18px 38px rgba(3,18,39,.20) !important;
}

/* ================================================================
   YAAGI 4.3.7 — urgent live UI regression fixes (2026-08-27)
   Keep language/login controls white; normalize birth-year field and
   restore full-width settings folds. These rules intentionally override
   the broad parent-action navy rule without changing normal app actions.
   ================================================================ */
.yaagi-app-header .yaagi-header-language,
.yaagi-language-panel button {
  background: #ffffff !important;
  background-image: none !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  border-color: rgba(11, 39, 76, .15) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.yaagi-language-panel button {
  border: 1px solid transparent !important;
}
.yaagi-language-panel button:hover,
.yaagi-language-panel button:focus-visible,
.yaagi-language-panel button[aria-current="true"] {
  background: #f8fafc !important;
  background-image: none !important;
  color: #0b274c !important;
  border-color: #dbe5f2 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.yaagi-app-header .yaagi-header-language::after,
.yaagi-language-panel button::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
body.login-page #loginPanel .login-actions #loginBtn,
body.login-page #loginBtn {
  background: #ffffff !important;
  background-image: none !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  border: 1px solid #cbd8e6 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .05) !important;
  text-shadow: none !important;
}
body.login-page #loginPanel .login-actions #loginBtn:hover,
body.login-page #loginPanel .login-actions #loginBtn:focus-visible,
body.login-page #loginBtn:hover,
body.login-page #loginBtn:focus-visible {
  background: #f8fafc !important;
  background-image: none !important;
  color: #102033 !important;
  border-color: #94a3b8 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}
body.login-page #loginBtn::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
body.login-page .yaagi-signup-redesigned .yaagi-birth-year-trigger {
  box-sizing: border-box !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 5px 8px !important;
  border-radius: 10px !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
}
body.parent-page-settings .settings-fold.settings-plus-upgrade-card {
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
body.parent-page-settings .settings-fold.settings-plus-upgrade-card > details {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
  box-sizing: border-box !important;
}
body.parent-page-settings.yaagi-gold-entitled .settings-fold.settings-plus-upgrade-card {
  display: none !important;
}