.app-menu [hidden] {
  display: none !important;
}

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.settings-overlay { z-index: 520; }
.toast { z-index: 650; }
.app-view[hidden] { display: none !important; }
.app-nav { position: sticky; z-index: 20; top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; width: min(610px, 100%); margin: 0 auto 22px; padding: 5px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--card) 90%, transparent); box-shadow: 0 10px 30px rgba(14,38,52,.09); backdrop-filter: blur(18px); }
.app-nav button { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; min-height: 52px; padding: 8px 12px; border: 0; border-radius: 13px; color: var(--muted); background: transparent; text-align: left; }
.app-nav button > span { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: var(--blue-strong); background: var(--blue-soft); font-size: 1rem; font-weight: 900; }
.app-nav b { color: var(--ink); font-size: .8rem; }
.app-nav small { font-size: .62rem; }
.app-nav button[aria-current="page"] { color: var(--result-ink); background: var(--result-bg); box-shadow: 0 7px 18px rgba(8,31,46,.16); }
.app-nav button[aria-current="page"] b { color: var(--result-ink); }
.app-nav button[aria-current="page"] > span { color: var(--result-bg); background: var(--blue); }

/* Compact app menu */
.app-menu-wrap { position:relative; }
.menu-button { display:grid; place-items:center; align-content:center; gap:4px; width:46px; height:46px; padding:0; border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line)); border-radius:14px; color:var(--blue-strong); background:color-mix(in srgb,var(--card) 90%,transparent); box-shadow:0 8px 24px rgba(14,38,52,.08); transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.menu-button > span { display:block; width:20px; height:2px; border-radius:99px; background:currentColor; transition:transform .24s ease,opacity .18s ease; }
.menu-button:hover,.menu-button:focus-visible { transform:translateY(-1px); background:var(--blue-soft); box-shadow:0 11px 28px rgba(14,38,52,.13); }
.menu-button[aria-expanded="true"] > span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.menu-button[aria-expanded="true"] > span:nth-child(2) { opacity:0; }
.menu-button[aria-expanded="true"] > span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.app-menu-panel { position:absolute; z-index:500; top:calc(100% + 10px); right:0; display:grid; gap:6px; width:min(300px,calc(100vw - 24px)); padding:10px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:color-mix(in srgb,var(--card) 96%,transparent); box-shadow:0 24px 60px rgba(8,31,46,.2); backdrop-filter:blur(20px); transform-origin:top right; animation:menu-in .2s cubic-bezier(.2,.8,.2,1) both; }
.app-menu-panel[hidden] { display:none; }
@keyframes menu-in { from { opacity:0; transform:translateY(-5px) scale(.97); } to { opacity:1; transform:none; } }
.menu-live { display:flex; align-items:center; gap:10px; margin-bottom:2px; padding:11px 12px; border-radius:13px; color:var(--green); background:var(--green-soft); }
.menu-live > span { flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 0 5px color-mix(in srgb,var(--green) 13%,transparent); }
.menu-live > div { display:grid; gap:1px; }
.menu-live b { color:var(--ink); font-size:.74rem; }
.menu-live small { color:var(--green); font-size:.62rem; font-weight:800; }
.app-menu-panel > button { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:11px; width:100%; min-height:52px; padding:8px 10px; border:0; border-radius:13px; color:var(--text); background:transparent; text-align:left; }
.app-menu-panel > button > span { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:var(--blue-strong); background:var(--blue-soft); font-weight:900; }
.app-menu-panel > button > div { display:grid; gap:2px; }
.app-menu-panel > button b { color:var(--ink); font-size:.76rem; }
.app-menu-panel > button small { color:var(--muted); font-size:.61rem; }
.app-menu-panel > button:hover,.app-menu-panel > button:focus-visible,.app-menu-panel > button[aria-current="page"] { background:var(--surface-soft); outline:none; }
.app-menu-panel > button:focus-visible { box-shadow:inset 0 0 0 2px var(--blue); }
.app-menu-panel > button[aria-current="page"] > span { color:white; background:var(--blue); }
.menu-account-summary { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; min-height:48px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--blue-soft) 65%,var(--card)); }
.menu-account-summary > span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:white; background:var(--blue); font-size:.72rem; font-weight:900; }
.menu-account-summary > div { display:grid; min-width:0; gap:2px; }
.menu-account-summary b,.menu-account-summary small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-account-summary b { color:var(--ink); font-size:.69rem; }
.menu-account-summary small { color:var(--muted); font-size:.56rem; }
.menu-account-action { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:11px; width:100%; min-height:52px; padding:8px 10px; border:0; border-radius:13px; color:var(--text); background:transparent; text-align:left; text-decoration:none; }
.menu-account-action > span { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:var(--blue-strong); background:var(--blue-soft); font-weight:900; }
.menu-account-action > div { display:grid; gap:2px; }
.menu-account-action b { color:var(--ink); font-size:.76rem; }
.menu-account-action small { color:var(--muted); font-size:.61rem; }
.menu-account-action:hover,.menu-account-action:focus-visible { background:var(--surface-soft); outline:none; box-shadow:inset 0 0 0 2px var(--blue); }

/* Quiet company sign-in prompt */
.team-signin-banner { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:12px; width:min(1180px,calc(100% - 48px)); margin:-8px auto 22px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line)); border-radius:15px; color:var(--text); background:color-mix(in srgb,var(--blue-soft) 72%,var(--card)); box-shadow:0 10px 28px rgba(14,38,52,.07); animation:signin-banner-in .32s cubic-bezier(.2,.8,.2,1) both; }
.team-signin-banner[hidden] { display:none !important; }
@keyframes signin-banner-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.team-signin-banner-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:white; background:var(--blue); font-size:.72rem; font-weight:950; }
.team-signin-banner-copy { display:grid; min-width:0; gap:2px; }
.team-signin-banner-copy strong { color:var(--ink); font-size:.7rem; }
.team-signin-banner-copy span { color:var(--muted); font-size:.59rem; line-height:1.35; }
.team-signin-banner > button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.team-signin-banner > button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size:1rem; }
.team-signin-banner > button:hover { color:var(--ink); background:var(--surface-soft); }
.google-signin-slot { display:flex; align-items:center; min-height:34px; overflow:hidden; }
.google-signin-slot[hidden] { display:none !important; }
.menu-google-signin { justify-content:center; padding:8px 10px 4px; }
.banner-google-signin { justify-content:flex-end; min-width:118px; }

.first-welcome-overlay { position:fixed; inset:0; z-index:5000; display:grid; place-items:center; overflow:hidden; padding:clamp(20px,4vw,48px); color:#fff; background:
  radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--blue) 54%,transparent),transparent 34%),
  radial-gradient(circle at 88% 82%,rgba(18,177,116,.32),transparent 36%),
  linear-gradient(145deg,#071d2a 0%,#0c3144 46%,#075a78 100%);
  opacity:0; transition:opacity .42s ease; }
.first-welcome-overlay[hidden] { display:none !important; }
.first-welcome-overlay.open { opacity:1; }
.first-welcome-overlay.closing { opacity:0; }
.first-welcome-overlay::before { content:""; position:absolute; inset:-45%; background:conic-gradient(from 180deg,transparent,rgba(255,255,255,.055),transparent 24%); animation:welcome-sweep 10s linear infinite; }
.first-welcome-atmosphere { position:absolute; inset:0; pointer-events:none; }
.welcome-orb { position:absolute; border:1px solid rgba(255,255,255,.15); border-radius:50%; box-shadow:inset 0 0 60px rgba(255,255,255,.035); animation:welcome-drift 7s ease-in-out infinite; }
.welcome-orb-one { width:34vw; height:34vw; min-width:330px; min-height:330px; top:-18vw; right:-6vw; }
.welcome-orb-two { width:24vw; height:24vw; min-width:260px; min-height:260px; bottom:-12vw; left:-6vw; animation-delay:-2.2s; }
.welcome-orb-three { width:12vw; height:12vw; min-width:140px; min-height:140px; top:46%; left:13%; animation-delay:-4.4s; }
.welcome-money,.welcome-spark { position:absolute; color:rgba(255,255,255,.18); font-weight:950; text-shadow:0 12px 36px rgba(0,0,0,.16); animation:welcome-float 5.2s ease-in-out infinite; }
.welcome-money { font-size:clamp(2rem,4vw,4.8rem); }
.welcome-spark { color:rgba(104,224,190,.52); font-size:clamp(1rem,2vw,2.1rem); }
.welcome-money-one { top:13%; left:9%; transform:rotate(-14deg); }
.welcome-money-two { top:20%; right:12%; animation-delay:-1.2s; transform:rotate(11deg); }
.welcome-money-three { bottom:14%; left:18%; animation-delay:-2.6s; transform:rotate(9deg); }
.welcome-money-four { right:8%; bottom:19%; animation-delay:-3.7s; transform:rotate(-9deg); }
.welcome-spark-one { top:23%; left:23%; animation-delay:-.8s; }
.welcome-spark-two { top:16%; right:27%; animation-delay:-2.2s; }
.welcome-spark-three { right:20%; bottom:25%; animation-delay:-3.5s; }
.first-welcome-card { position:relative; z-index:1; display:grid; justify-items:center; width:min(680px,100%); padding:clamp(30px,5vw,58px); border:1px solid rgba(255,255,255,.22); border-radius:clamp(24px,4vw,40px); text-align:center; background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.07)); box-shadow:0 34px 100px rgba(0,13,24,.46); backdrop-filter:blur(24px); transform:translateY(24px) scale(.97); opacity:0; transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .42s ease; }
.first-welcome-overlay.open .first-welcome-card { transform:none; opacity:1; }
.first-welcome-logo-shell { display:grid; place-items:center; width:clamp(92px,13vw,126px); height:clamp(72px,10vw,96px); margin-bottom:22px; padding:10px; overflow:hidden; border:1px solid rgba(255,255,255,.5); border-radius:22px; background:rgba(255,255,255,.94); box-shadow:0 18px 45px rgba(0,0,0,.2); }
.first-welcome-logo-shell img { width:100%; height:100%; object-fit:contain; }
.first-welcome-kicker { margin-bottom:12px; color:#7de6c0; font-size:.72rem; font-weight:950; letter-spacing:.2em; }
.first-welcome-card h2 { max-width:590px; margin:0; color:#fff; font-size:clamp(2rem,5.4vw,4.25rem); line-height:.96; letter-spacing:-.055em; }
.first-welcome-card h2 span { color:#8ddfff; }
.first-welcome-card > p { max-width:540px; margin:20px 0 0; color:rgba(255,255,255,.76); font-size:clamp(.95rem,1.7vw,1.16rem); line-height:1.55; }
.first-welcome-features { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:28px 0 30px; }
.first-welcome-features > span { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid rgba(255,255,255,.15); border-radius:999px; color:rgba(255,255,255,.84); background:rgba(0,20,31,.22); font-size:.72rem; font-weight:800; }
.first-welcome-features i { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#062535; background:#77e3bd; font-size:.68rem; font-style:normal; font-weight:950; }
.first-welcome-actions { display:grid; grid-template-columns:minmax(230px,1fr) auto; gap:10px; width:min(500px,100%); }
#firstWelcomeTour,#firstWelcomeExplore { min-height:58px; padding:0 22px; border-radius:17px; font-size:.82rem; font-weight:950; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
#firstWelcomeTour { display:flex; align-items:center; justify-content:center; gap:22px; border:0; color:#062535; background:linear-gradient(135deg,#8ee4ff,#6de1b2); box-shadow:0 15px 34px rgba(45,211,177,.2); }
#firstWelcomeExplore { border:1px solid rgba(255,255,255,.25); color:#fff; background:rgba(255,255,255,.08); }
#firstWelcomeTour:hover,#firstWelcomeExplore:hover { transform:translateY(-2px); }
#firstWelcomeTour:hover { box-shadow:0 19px 42px rgba(45,211,177,.3); }
#firstWelcomeExplore:hover { background:rgba(255,255,255,.14); }
#firstWelcomeTour:focus-visible,#firstWelcomeExplore:focus-visible { outline:3px solid #fff; outline-offset:4px; }
#firstWelcomeTour span:last-child { font-size:1.35rem; transition:transform .2s ease; }
#firstWelcomeTour:hover span:last-child { transform:translateX(4px); }
.first-welcome-card > small { margin-top:16px; color:rgba(255,255,255,.48); font-size:.62rem; }
body.welcome-open { overflow:hidden; }
body.welcome-open .mobile-pay-bar { display:none !important; }
@keyframes welcome-sweep { to { transform:rotate(360deg); } }
@keyframes welcome-drift { 50% { transform:translate3d(0,14px,0) scale(1.03); } }
@keyframes welcome-float { 50% { translate:0 -13px; opacity:.65; } }
@media (max-width:600px) {
  .first-welcome-overlay { padding:14px; }
  .first-welcome-card { padding:30px 19px 25px; border-radius:26px; }
  .first-welcome-logo-shell { margin-bottom:17px; }
  .first-welcome-card h2 { font-size:clamp(2rem,11vw,3.2rem); }
  .first-welcome-features { display:grid; width:100%; margin:23px 0 25px; }
  .first-welcome-features > span { justify-content:flex-start; }
  .first-welcome-actions { grid-template-columns:1fr; }
  #firstWelcomeTour,#firstWelcomeExplore { min-height:52px; }
  .welcome-money-three,.welcome-money-four,.welcome-spark-three { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .first-welcome-overlay,.first-welcome-card { transition-duration:.001ms; }
  .first-welcome-overlay::before,.welcome-orb,.welcome-money,.welcome-spark { animation:none !important; }
}
body.reduced-motion .first-welcome-overlay,body.reduced-motion .first-welcome-card { transition-duration:.001ms; }
body.reduced-motion .first-welcome-overlay::before,body.reduced-motion .welcome-orb,body.reduced-motion .welcome-money,body.reduced-motion .welcome-spark { animation:none !important; }

/* First-login guided tour */
.settings-tour-button { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; width:100%; min-height:62px; margin-top:12px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line)); border-radius:14px; color:var(--text); background:color-mix(in srgb,var(--blue-soft) 55%,var(--card)); text-align:left; }
.settings-tour-button > span:first-child { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; color:#fff; background:var(--blue); font-weight:950; }
.settings-tour-button > span:nth-child(2) { display:grid; gap:2px; }
.settings-tour-button strong { color:var(--ink); font-size:.68rem; }
.settings-tour-button small { color:var(--muted); font-size:.56rem; }
.settings-tour-button > i { color:var(--blue-strong); font-size:1rem; font-style:normal; }
.settings-tour-button:hover,.settings-tour-button:focus-visible { border-color:var(--blue); outline:none; box-shadow:0 0 0 3px var(--focus-ring); }
.settings-tour-link { display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:5px 1px; border:0; color:var(--blue-strong); background:transparent; font-size:.6rem; font-weight:850; text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--blue) 35%,transparent); text-underline-offset:3px; }
.settings-tour-link > span:first-child { display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--blue); border-radius:50%; font-size:.52rem; text-decoration:none; }
.settings-tour-link > i { font-style:normal; transition:transform .18s ease; }
.settings-tour-link:hover > i,.settings-tour-link:focus-visible > i { transform:translateX(3px); }

.birthday-theme-banner { position:relative; isolation:isolate; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; width:min(1120px,calc(100% - 48px)); margin:-8px auto 24px; padding:15px 20px; overflow:hidden; border:1px solid rgba(219,39,119,.35); border-radius:22px; color:#fff; background:linear-gradient(115deg,#6d1f69,#8b2b78 45%,#4f3b96 100%); box-shadow:0 18px 44px rgba(88,29,96,.2); }
.birthday-theme-banner::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.42; background:radial-gradient(circle at 8% 18%,rgba(255,255,255,.28),transparent 18%),repeating-linear-gradient(120deg,transparent 0 22px,rgba(255,255,255,.035) 23px 24px); }
.birthday-theme-banner .birthday-cake { display:grid; place-items:center; width:62px; height:62px; border-radius:19px; background:rgba(255,255,255,.14); font-size:2rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.birthday-theme-banner > div { display:grid; gap:2px; }
.birthday-theme-banner small { color:#ffd0eb; font-size:.5rem; font-weight:950; letter-spacing:.15em; }
.birthday-theme-banner strong { font-size:1.32rem; line-height:1.05; letter-spacing:-.03em; }
.birthday-theme-banner p { margin:2px 0 0; color:#f1e5ff; font-size:.62rem; }
.birthday-balloons { font-size:1.3rem; letter-spacing:.18em; animation:birthday-bob 2.5s ease-in-out infinite; }
@keyframes birthday-bob { 50% { transform:translateY(-5px) rotate(2deg); } }
.tutorial-overlay { position:fixed; inset:0; z-index:7000; color:var(--text); }
.tutorial-overlay[hidden] { display:none !important; }
.tutorial-dim { position:fixed; background:rgba(3,17,25,.72); backdrop-filter:blur(2px); transition:top .3s cubic-bezier(.2,.8,.2,1),left .3s cubic-bezier(.2,.8,.2,1),right .3s cubic-bezier(.2,.8,.2,1),bottom .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1); }
.tutorial-spotlight { position:fixed; border:2px solid color-mix(in srgb,var(--blue) 78%,white); border-radius:18px; box-shadow:0 0 0 5px color-mix(in srgb,var(--blue) 24%,transparent),0 16px 46px rgba(0,0,0,.25); transition:top .3s cubic-bezier(.2,.8,.2,1),left .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1); }
.tutorial-card { position:fixed; display:grid; gap:12px; width:min(370px,calc(100vw - 28px)); max-height:calc(100vh - 28px); overflow:auto; padding:18px; border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line)); border-radius:21px; color:var(--text); background:color-mix(in srgb,var(--card) 97%,transparent); box-shadow:0 28px 80px rgba(0,13,24,.35); backdrop-filter:blur(22px); animation:tutorial-card-in .28s cubic-bezier(.16,1,.3,1) both; }
@keyframes tutorial-card-in { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.tutorial-card-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tutorial-card-header > span { color:var(--blue-strong); font-size:.62rem; font-weight:950; letter-spacing:.12em; text-transform:uppercase; }
.tutorial-card-header > button { min-height:34px; padding:0 9px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size:.64rem; font-weight:850; }
.tutorial-card-header > button:hover { color:var(--ink); background:var(--surface-soft); }
.tutorial-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:14px; color:#fff; background:linear-gradient(145deg,var(--blue),var(--green)); box-shadow:0 9px 20px color-mix(in srgb,var(--blue) 22%,transparent); font-size:1rem; font-weight:950; }
.tutorial-card h2 { margin:0; color:var(--ink); font-size:1.42rem; line-height:1.06; letter-spacing:-.035em; }
.tutorial-card > p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.58; }
.tutorial-card-footer { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:4px; }
.tutorial-card-footer > button,.tutorial-final-actions > button { min-height:42px; padding:0 15px; border-radius:12px; font-size:.69rem; font-weight:900; }
#tutorialBack { border:1px solid var(--line); color:var(--text); background:var(--card); }
#tutorialNext,.tutorial-final-actions > button { border:0; color:#fff; background:var(--blue); }
#tutorialBack:disabled { visibility:hidden; }
.tutorial-step-dots { display:flex; justify-content:center; gap:4px; }
.tutorial-step-dots > i { width:5px; height:5px; border-radius:99px; background:var(--line); transition:width .2s ease,background .2s ease; }
.tutorial-step-dots > i.active { width:16px; background:var(--blue); }
.tutorial-final-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.tutorial-final-actions > button:last-of-type { color:var(--blue-strong); background:var(--blue-soft); }
.tutorial-final-actions label { grid-column:1 / 3; display:flex; align-items:flex-start; gap:8px; color:var(--muted); font-size:.62rem; line-height:1.35; }
.tutorial-final-actions input { margin-top:1px; accent-color:var(--blue); }
.tutorial-card button:focus-visible,.tutorial-card input:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
body.tutorial-open { overflow:hidden; }
body.tutorial-open .mobile-pay-bar { display:none !important; }
.tutorial-overlay.final-step .tutorial-dim { inset:0 !important; width:auto !important; height:auto !important; }
.tutorial-overlay.final-step .tutorial-dim:not(.tutorial-dim-top),.tutorial-overlay.final-step .tutorial-spotlight { display:none; }
.tutorial-overlay.final-step .tutorial-card { top:50% !important; left:50% !important; width:min(520px,calc(100vw - 28px)); transform:translate(-50%,-50%); text-align:center; justify-items:center; }
.tutorial-overlay.final-step .tutorial-card { animation:none; }
.tutorial-overlay.final-step .tutorial-card-header,.tutorial-overlay.final-step .tutorial-card-footer { width:100%; }
.tutorial-overlay.final-step .tutorial-icon { width:58px; height:58px; border-radius:18px; font-size:1.35rem; }
.tutorial-overlay.final-step .tutorial-card > p { max-width:410px; }
.tutorial-overlay.final-step .tutorial-card-footer { display:none; }
@media (max-width:640px) {
  .tutorial-dim { backdrop-filter:none; }
  .tutorial-card { left:10px !important; right:10px !important; bottom:calc(10px + env(safe-area-inset-bottom)) !important; top:auto !important; width:auto; max-height:min(48vh,430px); border-radius:22px; padding:17px; }
  .tutorial-card h2 { font-size:1.28rem; }
  .tutorial-card > p { font-size:.75rem; }
  .tutorial-overlay.final-step .tutorial-card { top:auto !important; left:10px !important; right:10px !important; bottom:calc(10px + env(safe-area-inset-bottom)) !important; width:auto; transform:none; }
  .tutorial-final-actions { grid-template-columns:1fr; width:100%; }
  .tutorial-final-actions label { grid-column:1; }
}
@media (prefers-reduced-motion:reduce) {
  .tutorial-card { animation:none; }
  .tutorial-dim,.tutorial-spotlight { transition:none; }
}
body.reduced-motion .tutorial-card { animation:none; }
body.reduced-motion .tutorial-dim,body.reduced-motion .tutorial-spotlight { transition:none; }
.cpa-card.tutorial-demo-risk { animation:tutorial-cpa-risk 1.15s ease-in-out infinite alternate; }
@keyframes tutorial-cpa-risk { from { box-shadow:0 0 0 rgba(225,58,69,0); } to { box-shadow:0 0 0 3px rgba(225,58,69,.12),0 12px 34px rgba(225,58,69,.18); } }
@media (prefers-reduced-motion:reduce) { .cpa-card.tutorial-demo-risk { animation:none; box-shadow:0 0 0 3px rgba(225,58,69,.12); } }
body.reduced-motion .cpa-card.tutorial-demo-risk { animation:none; box-shadow:0 0 0 3px rgba(225,58,69,.12); }

.dashboard-view { animation: dashboard-in .28s ease both; }
@keyframes dashboard-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 8px 0 18px; }
.dashboard-heading h2 { margin: 4px 0; color: var(--ink); font-size: clamp(1.9rem,4vw,2.75rem); line-height: 1; letter-spacing: -.045em; }
.dashboard-heading p { max-width: 680px; margin: 0; color: var(--muted); }
.dashboard-surface { border: 1px solid var(--line); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.day-dashboard { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(300px,.7fr); gap: 18px; align-items: start; }
.day-main { padding: 24px; }
.day-side { display: grid; gap: 14px; }
.day-side > section { padding: 18px; }
.surface-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.surface-heading > div > span, .tracked-bridge > div > span, .goal-path-result > div > span { color: var(--blue-strong); font-size: .62rem; font-weight: 900; letter-spacing: .12em; }
.surface-heading h3 { margin: 2px 0 0; color: var(--ink); font-size: 1.12rem; }
.surface-heading > small { color: var(--muted); font-size: .68rem; }
.secondary-action, .primary-action, .danger-action { min-height: 42px; padding: 0 16px; border-radius: 12px; font-weight: 800; }
.secondary-action { border: 1px solid var(--line); color: var(--text); background: var(--surface-raised, var(--card)); }
.primary-action { border: 0; color: white; background: var(--blue); }
.danger-action { border: 0; color: white; background: #b52d3a; }

.counter-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.product-counter { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 12px; min-height: 142px; padding: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-soft, #f8fbfc); }
.product-counter > div:first-child { display: grid; grid-template-columns: auto 1fr; align-content: start; column-gap: 9px; }
.product-counter strong { align-self: center; color: var(--ink); font-size: .84rem; }
.product-counter small { grid-column: 1 / 3; margin-top: 6px; color: var(--muted); font-size: .65rem; }
.product-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: white; background: var(--product-color, var(--blue)); font-size: .65rem; font-weight: 900; }
.product-counter output { color: var(--ink); font-size: 2.7rem; font-weight: 900; line-height: .9; letter-spacing: -.06em; }
.product-aca { --product-color: #15976c; }
.product-aflac { --product-color: #e09a28; }
.product-ameritas { --product-color: #7761bd; }
.product-referral { --product-color: #079bdd; }
.counter-actions { position: absolute; right: 14px; bottom: 13px; display: flex; gap: 8px; }
.counter-actions button { min-width: 42px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: var(--card); font-size: 1.2rem; font-weight: 900; }
.counter-actions .counter-plus { min-width: 52px; border-color: transparent; color: white; background: var(--product-color); }
.counter-actions .counter-minus[data-confirming="true"] { color: white; background: #b52d3a; font-size: .65rem; }
.product-counter.success-pulse { animation: success-pulse .65s ease; }
.product-counter.ancillary-pop { animation: ancillary-pop .65s ease; }
.product-counter.referral-pop { animation: referral-pop .7s ease; }
@keyframes success-pulse { 40% { border-color: #15976c; box-shadow: 0 0 0 6px rgba(21,151,108,.12); transform: scale(1.015); } }
@keyframes ancillary-pop { 45% { border-color: var(--product-color); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--product-color) 18%, transparent); } }
@keyframes referral-pop { 38% { transform: translateY(-4px) rotate(-.35deg); box-shadow: 0 12px 26px rgba(7,155,221,.18); } }

.activity-form { margin-top: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-soft, #f8fbfc); padding: 14px; }
.form-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-heading > div { display: grid; }
.form-heading strong { color: var(--ink); font-size: .78rem; }
.form-heading small { color: var(--muted); font-size: .62rem; }
.form-heading button { border: 0; color: var(--blue-strong); background: transparent; font-size: .67rem; font-weight: 800; }
.activity-form-grid { display: grid; grid-template-columns: 1.15fr .55fr 1fr 1fr; gap: 10px; align-items: end; margin-top: 13px; }
.activity-form-grid[hidden] { display: none; }
.activity-form-grid [hidden], .undo-banner[hidden] { display: none !important; }
.activity-form-grid label { display: grid; gap: 5px; color: var(--muted); font-size: .63rem; font-weight: 750; }
.activity-form-grid label > span { display: flex; justify-content: space-between; gap: 5px; }
.activity-form-grid label small { font-size: .55rem; font-weight: 600; }
.activity-form-grid input, .activity-form-grid select, .settings-select-row select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--card); }
.activity-note-field { grid-column: 1 / 4; }
.activity-submit { grid-column: 4; }
.input-prefix { display: flex !important; align-items: center; gap: 4px !important; min-height: 40px; padding: 0 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.input-prefix > span { color: var(--muted); font-size: .75rem; }
.input-prefix input { width: 100%; min-width: 0; border: 0 !important; background: transparent !important; outline: none; }
.undo-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; color: var(--text); background: var(--green-soft); font-size: .7rem; font-weight: 750; }
.undo-banner button { border: 0; color: var(--green); background: transparent; font-weight: 900; }

.totals-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 3px; border-radius: 11px; background: var(--canvas); }
.totals-tabs button { min-height: 34px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: .65rem; font-weight: 800; }
.totals-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--card); box-shadow: 0 3px 9px rgba(0,0,0,.07); }
.activity-totals { margin: 10px 0 0; }
.activity-totals > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.activity-totals dt { color: var(--text); font-size: .72rem; }
.activity-totals dd { display: flex; align-items: baseline; gap: 6px; margin: 0; color: var(--ink); font-weight: 850; }
.activity-totals dd small { color: var(--muted); font-size: .62rem; }
.tracked-estimate { display: grid; gap: 3px; margin-top: 12px; padding: 13px; border-radius: 13px; color: var(--result-ink); background: var(--result-bg); }
.tracked-estimate span, .tracked-estimate small { color: var(--result-muted); font-size: .61rem; }
.tracked-estimate strong { font-size: 1.05rem; }
.focus-goal-summary { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cpa-entry-surface { display: grid; grid-template-columns: 1fr 108px; align-items: center; gap: 12px; }
.cpa-entry-surface > div { display: grid; gap: 3px; }
.cpa-entry-surface strong { color: var(--ink); font-size: .78rem; }
.cpa-entry-surface small { color: var(--muted); font-size: .61rem; line-height: 1.35; }
.tracked-bridge { display: grid; gap: 14px; background: linear-gradient(145deg, var(--card), var(--blue-soft)); }
.tracked-bridge > div { display: grid; gap: 4px; }
.tracked-bridge strong { color: var(--ink); }
.tracked-bridge small { color: var(--muted); font-size: .65rem; line-height: 1.4; }

.activity-log-surface { margin-top: 18px; padding: 22px; }
.empty-state { padding: 28px 16px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); text-align: center; font-size: .75rem; }
.activity-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.activity-list li { display: grid; grid-template-columns: auto 1fr minmax(155px,.32fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft, #f8fbfc); }
.activity-product-dot { width: 10px; height: 34px; border-radius: 999px; background: var(--product-color,var(--blue)); }
.activity-record-main { display: grid; gap: 2px; }
.activity-record-main strong { color: var(--ink); font-size: .78rem; }
.activity-record-main span, .activity-record-main small { color: var(--muted); font-size: .63rem; }
.activity-status select { width: 100%; min-height: 36px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--card); font-size: .66rem; }

.goals-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: 18px; }
.goal-builder, .goal-progress-surface, .goal-path-surface { padding: 24px; }
.goal-exact { display: grid; gap: 5px; width: 150px; color: var(--muted); font-size: .6rem; font-weight: 750; }
.goal-range { --goal-fill: 20%; appearance: none; width: 100%; height: 34px; margin: 20px 0 0; background: transparent; }
.goal-range::-webkit-slider-runnable-track { height: 9px; border-radius: 999px; background: linear-gradient(90deg,var(--blue) var(--goal-fill),var(--range-track,#dbe9ef) var(--goal-fill)); }
.goal-range::-webkit-slider-thumb { appearance: none; width: 27px; height: 27px; margin-top: -9px; border: 6px solid var(--blue); border-radius: 50%; background: var(--card); box-shadow: 0 5px 15px rgba(7,155,221,.3); }
.goal-range::-moz-range-track { height: 9px; border-radius: 999px; background: var(--range-track,#dbe9ef); }
.goal-range::-moz-range-progress { height: 9px; border-radius: 999px; background: var(--blue); }
.goal-range::-moz-range-thumb { width: 15px; height: 15px; border: 6px solid var(--blue); border-radius: 50%; background: var(--card); }
.goal-range-labels { position: relative; height: 28px; margin: -2px 4px 0; color: var(--muted); font-size: .62rem; }
.goal-range-labels span { position: absolute; transform: translateX(-50%); }
.goal-range-labels span:first-child { transform: none; }
.goal-range-labels span:last-child { transform: translateX(-100%); }
.goal-quick-picks { display: flex; flex-wrap: wrap; gap: 7px; }
.goal-quick-picks button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: var(--card); font-size: .66rem; font-weight: 800; }
.goal-quick-picks button.active { color: white; border-color: var(--blue); background: var(--blue); }
.goal-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.goal-metrics > div { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft,#f8fbfc); }
.goal-metrics span, .tracked-goal-line span { display: block; color: var(--muted); font-size: .62rem; }
.goal-metrics strong { display: block; margin-top: 3px; color: var(--ink); font-size: 1.05rem; }
.goal-progress-track { height: 12px; margin-top: 18px; overflow: hidden; border-radius: 999px; background: var(--range-track,#dbe9ef); }
.goal-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--green)); transition: width .35s ease; }
.goal-progress-surface > p { margin: 9px 0 12px; color: var(--muted); font-size: .7rem; }
.tracked-goal-line { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.tracked-goal-line strong { color: var(--ink); font-size: .76rem; }
.goal-path-surface { margin-top: 18px; }
.goal-path-result { display: grid; gap: 8px; padding: 18px; border: 1px solid color-mix(in srgb,var(--green) 26%,var(--line)); border-radius: 15px; background: var(--green-soft); }
.goal-path-result strong { color: var(--ink); font-size: 1.15rem; }
.goal-path-result strong i { color: var(--muted); font-size: .7rem; font-style: normal; }
.goal-path-result p { margin: 0; color: var(--text); font-size: .72rem; line-height: 1.5; }
.assumption-note { margin: 12px 2px 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }

.dashboard-dialog { width: min(560px,calc(100% - 28px)); padding: 0; border: 0; border-radius: 20px; color: var(--text); background: var(--card); box-shadow: 0 26px 80px rgba(0,0,0,.28); }
.dashboard-dialog::backdrop { background: rgba(6,22,31,.58); backdrop-filter: blur(4px); }
.dialog-shell { padding: 22px; }
.dialog-heading { display: flex; justify-content: space-between; gap: 16px; }
.dialog-heading h2 { margin: 3px 0 0; color: var(--ink); font-size: 1.35rem; }
.dialog-heading > button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--card); font-size: 1.2rem; }
.dialog-shell > p { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.preview-changes { display: grid; gap: 7px; }
.preview-changes > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 11px; background: var(--surface-soft,#f8fbfc); }
.preview-changes span { color: var(--muted); font-size: .68rem; }
.preview-changes strong { color: var(--ink); font-size: .72rem; }
.preview-changes i { color: var(--blue); font-style: normal; }
.dialog-note { margin-top: 12px; padding: 10px 12px; border-radius: 11px; color: var(--text); background: var(--blue-soft); font-size: .67rem; line-height: 1.45; }
.dialog-note.error { color: #872530; background: #fdebed; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.clear-choice { display: flex; gap: 10px; margin-top: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; }
.clear-choice > span { display: grid; gap: 2px; }
.clear-choice strong { color: var(--ink); font-size: .75rem; }
.clear-choice small { color: var(--muted); font-size: .62rem; }

.audio-status { margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px; color: var(--muted); background: var(--canvas); font-size: .63rem; font-weight: 750; }
.audio-status[data-state="ready"] { color: var(--green); background: var(--green-soft); }
.audio-status[data-state="blocked"] { color: #9a5a12; background: #fff4dc; }
.sound-choice-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.sound-choice-row label { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; }
.sound-choice-row label > span:first-child { display: grid; gap: 2px; }
.sound-choice-row strong { color: var(--ink); font-size: .68rem; }
.sound-choice-row small { color: var(--muted); font-size: .58rem; }
.sound-choice-row > button { min-height: 30px; border: 1px solid var(--line); border-radius: 999px; color: var(--blue-strong); background: var(--card); font-size: .58rem; font-weight: 850; }
.legacy-sound-setting { display: none !important; }
.settings-select-list { margin-top: 10px; }
.settings-select-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.settings-select-row > span { display: grid; gap: 2px; }
.settings-select-row strong { color: var(--ink); font-size: .68rem; }
.settings-select-row small { color: var(--muted); font-size: .58rem; }
.settings-select-row select { width: 132px; min-height: 36px; font-size: .63rem; }
.settings-explainer { color: var(--muted); font-size: .65rem; line-height: 1.5; }
.data-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.data-actions button { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--card); font-size: .63rem; font-weight: 800; }
.data-actions .danger-lite { grid-column: 1 / 3; color: #a72e3a; }
.theme-preview-system { background: linear-gradient(90deg,#f8fbfd 50%,#111827 50%); }
.theme-preview-oe27 { background: linear-gradient(145deg,#061d39,#0a4f83); }.theme-preview-oe27 i{background:#eafaff!important}.theme-preview-oe27 b{background:#00a7e1!important}.theme-preview-oe27 em{background:#11b981!important}
.theme-preview-forest { background: #edf6f1; }.theme-preview-forest b{background:#176b55!important}.theme-preview-forest em{background:#163e35!important}
.theme-preview-slate { background: #eef2f6; }.theme-preview-slate b{background:#475569!important}.theme-preview-slate em{background:#1e293b!important}
.theme-preview-sand { background: #faf3e8; }.theme-preview-sand b{background:#9a6735!important}.theme-preview-sand em{background:#4e3928!important}
.theme-preview-degenerate { background:linear-gradient(145deg,#ffffff,#d9ebe7); }.theme-preview-degenerate i{background:#ffffff!important}.theme-preview-degenerate b{background:#00a9d6!important}.theme-preview-degenerate em{background:#0fa96f!important}

html[data-theme="forest"] { --page-background: linear-gradient(180deg,#f7fbf8,#eaf4ef); --blue:#247f66; --blue-strong:#176b55; --blue-soft:#e3f2ec; --ink:#15342c; --text:#345349; --muted:#6b817a; --line:#cfe0d9; --card:#fff; --canvas:#eef6f2; --surface-soft:#f7fbf8; --surface-raised:#fff; --surface-translucent:rgba(255,255,255,.9); --range-track:#d6e6df; --green:#2a8a65; --green-soft:#e4f3ec; --result-bg:#12382f; --result-ink:#fff; --result-muted:#bdd7cd; --result-card:#fff; --result-card-ink:#15342c; --result-card-muted:#6b817a; --result-tint:rgba(255,255,255,.08); --result-border:rgba(255,255,255,.14); --focus-ring:rgba(36,127,102,.42); }
html[data-theme="slate"] { --page-background:linear-gradient(180deg,#f8fafc,#e8eef4); --blue:#3b82a8; --blue-strong:#2b6f93; --blue-soft:#e2f1f8; --ink:#172433; --text:#3b4b5c; --muted:#718094; --line:#d2dce6; --card:#fff; --canvas:#eef3f7; --surface-soft:#f8fafc; --surface-raised:#fff; --surface-translucent:rgba(255,255,255,.9); --range-track:#d9e2ea; --green:#218268; --green-soft:#e5f2ee; --result-bg:#1e293b; --result-ink:#fff; --result-muted:#c5cfdb; --result-card:#fff; --result-card-ink:#172433; --result-card-muted:#718094; --result-tint:rgba(255,255,255,.07); --result-border:rgba(255,255,255,.13); --focus-ring:rgba(59,130,168,.42); }
html[data-theme="sand"] { --page-background:linear-gradient(180deg,#fffaf3,#f2e7d7); --blue:#a16835; --blue-strong:#855324; --blue-soft:#f5e8d6; --ink:#3e2f22; --text:#5c4b3d; --muted:#877667; --line:#dfd0bd; --card:#fffdf9; --canvas:#f6eee3; --surface-soft:#fff9f0; --surface-raised:#fffdf9; --surface-translucent:rgba(255,253,249,.9); --range-track:#e7dac9; --green:#657d55; --green-soft:#edf1e8; --result-bg:#4b3829; --result-ink:#fffaf3; --result-muted:#dacbbb; --result-card:#fffaf3; --result-card-ink:#3e2f22; --result-card-muted:#877667; --result-tint:rgba(255,255,255,.08); --result-border:rgba(255,255,255,.15); --focus-ring:rgba(161,104,53,.42); }
html[data-theme="oe27"] { --page-background:radial-gradient(circle at 12% 8%,rgba(0,167,225,.2),transparent 29%),radial-gradient(circle at 90% 16%,rgba(17,185,129,.14),transparent 24%),linear-gradient(180deg,#f8fcff,#e8f4fb); --blue:#00a7e1; --blue-strong:#0579aa; --blue-soft:#ddf5fc; --ink:#08223d; --text:#294961; --muted:#688197; --line:#c9deea; --card:#fff; --canvas:#eaf5fa; --surface-soft:#f4fbfe; --surface-raised:#fff; --surface-translucent:rgba(255,255,255,.91); --range-track:#d5e8f1; --green:#11a875; --green-soft:#e1f6ee; --result-bg:linear-gradient(145deg,#061d39,#0b416a); --result-ink:#fff; --result-muted:#b9d9e8; --result-card:#fafdff; --result-card-ink:#08223d; --result-card-muted:#688197; --result-tint:rgba(255,255,255,.08); --result-border:rgba(0,190,241,.25); --focus-ring:rgba(0,167,225,.42); }
html[data-theme="oe27"] .eyebrow::after { content:"  •  OPEN ENROLLMENT ’27"; color:#11a875; }
html[data-theme="oe27"] .live-pill::after { content:"27"; display:grid; place-items:center; width:22px; height:22px; border-radius:7px; color:white; background:linear-gradient(145deg,#00a7e1,#11b981); font-size:.55rem; font-weight:950; }
html[data-theme="oe27"] .controls-panel, html[data-theme="oe27"] .tier-reference, html[data-theme="oe27"] .counter-stage { box-shadow:0 24px 70px rgba(5,78,118,.13),inset 0 3px 0 rgba(0,167,225,.32); }
html[data-theme="oe27"] .counter-card-primary::before { content:"27"; position:absolute; right:22px; top:12px; color:rgba(0,167,225,.075); font-size:5rem; font-weight:950; line-height:1; letter-spacing:-.08em; }

body.hide-ancillary #calculator .control-row, body.hide-ancillary [data-counter-product="aflac"], body.hide-ancillary [data-counter-product="ameritas"] { display: none; }
body.focus-mode #viewDay .activity-form, body.focus-mode #viewDay .activity-log-surface, body.focus-mode #viewDay .tracked-bridge { display: none; }
body.focus-mode #viewDay .counter-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body.focus-mode #viewDay .product-counter { min-height: 190px; }
body.focus-mode #viewDay .product-counter output { font-size: 4.2rem; }
body.focus-mode #viewDay .focus-goal-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@media (max-width: 900px) {
  .day-dashboard, .goals-layout { grid-template-columns: 1fr; }
  .day-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .day-side .tracked-bridge { grid-column: 1 / 3; }
  .activity-form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .activity-note-field { grid-column: 1 / 2; }
  .activity-submit { grid-column: 2; }
}

@media (max-width: 640px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .page-shell { width: min(100% - 20px,1180px); }
  .app-nav { position: fixed; z-index: 420; inset: auto 8px max(8px,env(safe-area-inset-bottom)); width: auto; margin: 0; border-radius: 17px; }
  .app-nav button { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; min-height: 56px; padding: 6px 4px; text-align: center; }
  .app-nav button > span { grid-row: auto; width: 26px; height: 25px; }
  .app-nav button small { display: none; }
  .app-nav b { font-size: .66rem; }
  body[data-active-view="calculator"] .mobile-pay-bar { bottom: calc(78px + env(safe-area-inset-bottom)); }
  body:not([data-active-view="calculator"]) .mobile-pay-bar { display: none !important; }
  .dashboard-heading { align-items: start; margin-top: 2px; }
  .dashboard-heading p { font-size: .75rem; }
  .counter-grid { grid-template-columns: 1fr; }
  .product-counter { min-height: 126px; }
  .day-main, .goal-builder, .goal-progress-surface, .goal-path-surface, .activity-log-surface { padding: 17px; }
  .day-side { grid-template-columns: 1fr; }
  .day-side .tracked-bridge { grid-column: auto; }
  .activity-form-grid { grid-template-columns: 1fr; }
  .activity-note-field, .activity-submit { grid-column: 1; }
  .activity-list li { grid-template-columns: auto 1fr; }
  .activity-status { grid-column: 2; }
  .surface-heading { align-items: start; }
  .goal-exact { width: 126px; }
  .goal-metrics { grid-template-columns: 1fr 1fr; }
  .goal-metrics strong { font-size: .9rem; }
  .goal-range-labels { font-size: .55rem; }
  .settings-select-row { align-items: start; flex-direction: column; }
  .settings-select-row select { width: 100%; }
  body.focus-mode #viewDay .counter-grid { grid-template-columns: 1fr; }
}

/* Simplified two-tool dashboard */
.app-nav { grid-template-columns: repeat(2,minmax(0,1fr)); width: min(470px,100%); }
.calculator-goal { margin-top: 18px; overflow: hidden; }
.calculator-goal summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; cursor: pointer; list-style: none; }
.calculator-goal summary::-webkit-details-marker { display: none; }
.calculator-goal summary > span { display: grid; gap: 2px; }
.calculator-goal summary b { color: var(--ink); font-size: .82rem; }
.calculator-goal summary small { color: var(--muted); font-size: .62rem; }
.calculator-goal summary > strong { display: flex; align-items: center; gap: 9px; color: var(--blue-strong); font-size: .75rem; }
.calculator-goal summary > strong::after { content: "⌄"; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--blue-soft); transition: transform .28s ease; }
.calculator-goal[open] summary > strong::after { transform: rotate(180deg); }
.calculator-goal-body { display: grid; grid-template-columns: 160px 1fr; gap: 14px 22px; padding: 0 20px 20px; border-top: 1px solid var(--line); }
.calculator-goal-body .goal-exact { align-self: end; margin-top: 18px; }
.calculator-goal-body .goal-range { align-self: end; }
.calculator-goal-body .goal-range-labels { grid-column: 2; }
.compact-goal-metrics { grid-column: 1 / 3; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.compact-goal-metrics > div { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft,#f8fbfc); }
.compact-goal-metrics span { display: block; color: var(--muted); font-size: .6rem; }
.compact-goal-metrics strong { display: block; margin-top: 2px; color: var(--ink); font-size: .92rem; }

.counter-reset-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: color-mix(in srgb,var(--card) 82%,transparent); font-size: .66rem; font-weight: 800; }
.counter-period-switch { display: grid; grid-template-columns: 1fr 1fr; width: min(340px,100%); margin: 0 auto 14px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 8px 24px rgba(14,38,52,.06); }
.counter-period-switch button { min-height: 40px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: .72rem; font-weight: 850; }
.counter-period-switch button[aria-pressed="true"] { color: white; background: var(--result-bg); box-shadow: 0 6px 14px rgba(14,38,52,.15); }
html[data-theme="degenerate"] .counter-period-switch { border-color:#9fc9c0; background:#cfe4df; box-shadow:0 10px 26px rgba(20,69,63,.12); }
html[data-theme="degenerate"] .counter-period-switch button { color:#4f6970; }
html[data-theme="degenerate"] .counter-period-switch button[aria-pressed="true"] { color:#ffffff; background:linear-gradient(135deg,#087e9d,#0fa96f); box-shadow:0 7px 18px rgba(8,126,157,.23); }
.counter-stage { width: min(920px,100%); margin: 0 auto; padding: 20px; }
.counter-card { --product-color: var(--blue); position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; min-height: 150px; padding: 20px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-soft,#f8fbfc); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.counter-card-primary { min-height: 260px; padding: 28px; border-color: color-mix(in srgb,var(--product-color) 34%,var(--line)); background: linear-gradient(145deg,color-mix(in srgb,var(--product-color) 10%,var(--card)),var(--card)); }
.counter-copy { align-self: start; display: flex; align-items: center; gap: 11px; }
.counter-copy > div { display: grid; gap: 2px; }
.counter-copy strong { color: var(--ink); font-size: .92rem; }
.counter-copy small { color: var(--muted); font-size: .65rem; }
.counter-card output { align-self: start; color: var(--ink); font-size: 3.15rem; font-weight: 950; line-height: .9; letter-spacing: -.07em; }
.counter-card-primary output { align-self: center; grid-column: 1 / 3; justify-self: center; font-size: clamp(6.8rem,15vw,10rem); }
.counter-secondary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 12px; }
.counter-secondary-grid .counter-card { min-height: 180px; }
.counter-secondary-grid .counter-actions { width: 100%; justify-content: stretch; }
.counter-secondary-grid .counter-actions button { flex: 1 1 0; }
.counter-card .counter-actions { position: static; grid-column: 1 / 3; display: flex; justify-content: flex-end; gap: 9px; }
.counter-card-primary .counter-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); justify-content: center; width: min(560px,80%); margin: 0 auto; }
.counter-card .counter-actions button { min-width: 46px; height: 44px; }
.counter-card .counter-actions .counter-plus { min-width: 76px; color: white; background: var(--product-color); font-size: 1.45rem; }
.counter-card-primary .counter-actions button { width: 100%; height: 68px; border-radius: 18px; font-size: 2rem; }
.counter-card-primary .counter-actions .counter-minus { color: var(--blue-strong); border-color: color-mix(in srgb,var(--product-color) 28%,var(--line)); background: var(--card); }
.counter-card-primary .counter-actions .counter-plus { width: 100%; min-width: 0; box-shadow: 0 12px 26px color-mix(in srgb,var(--product-color) 24%,transparent); }
.counter-actions button { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; }
.counter-actions button::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:currentColor; opacity:.3; transform:scaleX(0); transform-origin:left; }
.counter-actions button.is-holding::after { animation:counter-hold-fill .42s linear forwards; }
.counter-actions button.is-repeating { animation:counter-repeat-pulse .34s ease-in-out infinite alternate; }
@keyframes counter-hold-fill { to { transform:scaleX(1); } }
@keyframes counter-repeat-pulse { to { transform:translateY(-1px); filter:brightness(1.07); } }
.counter-save-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 15px; color: var(--muted); font-size: .62rem; }
.counter-save-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb,var(--green) 12%,transparent); }
.hide-counter-aflac [data-counter-product="aflac"], .hide-counter-ameritas [data-counter-product="ameritas"], .hide-counter-referral [data-counter-product="referral"] { display: none !important; }

.degenerate-ticker { margin:-4px 0 14px; padding:8px 12px; overflow:hidden; border:1px solid color-mix(in srgb,var(--green) 30%,var(--line)); border-radius:11px; color:var(--green); background:color-mix(in srgb,var(--green-soft) 56%,var(--card)); font:850 .57rem/1.2 "SFMono-Regular",Consolas,monospace; letter-spacing:.13em; text-align:center; }
.degenerate-ticker span { display:inline-block; animation:degen-ticker-in .45s ease both; }
.degenerate-reaction { margin:0 0 12px; padding:10px 13px; border-left:3px solid var(--blue); border-radius:0 10px 10px 0; color:var(--text); background:color-mix(in srgb,var(--blue-soft) 62%,transparent); font-size:.67rem; font-weight:850; }
.degenerate-reaction.reaction-in { animation:degen-reaction-in .38s cubic-bezier(.2,.8,.2,1); }
@keyframes degen-ticker-in { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
@keyframes degen-reaction-in { 50%{border-left-color:var(--green);transform:translateX(3px)} }

.side-quests-card { width:min(920px,100%); margin:14px auto 0; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:19px; color:var(--text); background:var(--card); box-shadow:var(--shadow); }
.side-quests-card > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:70px; padding:14px 17px; cursor:pointer; list-style:none; }
.side-quests-card > summary::-webkit-details-marker { display:none; }
.side-quests-card > summary > span { display:flex; align-items:center; gap:11px; }
.side-quests-card > summary i { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#07111c; background:linear-gradient(145deg,var(--green),#b8ffda); box-shadow:0 0 20px color-mix(in srgb,var(--green) 25%,transparent); font-style:normal; }
.side-quests-card > summary span span { display:grid; gap:2px; }
.side-quests-card > summary strong { color:var(--ink); font-size:.82rem; }
.side-quests-card > summary small { color:var(--muted); font-size:.59rem; }
.side-quests-card > summary > b { color:var(--muted); transition:transform .25s ease; }
.side-quests-card[open] > summary > b { transform:rotate(180deg); }
.side-quests-body { padding:0 17px 17px; }
.side-quest-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.side-quest { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; min-height:98px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.side-quest:last-child { grid-column:1 / 3; }
.side-quest-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:var(--blue-strong); background:var(--blue-soft); font-size:.73rem; font-weight:950; }
.side-quest > div:nth-child(2) { display:grid; gap:2px; min-width:0; }
.side-quest strong { color:var(--ink); font-size:.68rem; }
.side-quest small { overflow:hidden; color:var(--muted); font-size:.54rem; white-space:nowrap; text-overflow:ellipsis; }
.side-quest output { color:var(--ink); font-size:1.55rem; font-weight:950; }
.side-quest-pb { width:max-content; margin-top:2px; padding:3px 6px; border:1px solid color-mix(in srgb,var(--green) 30%,var(--line)); border-radius:999px; color:var(--green); background:color-mix(in srgb,var(--green) 8%,transparent); font-size:.44rem; font-weight:950; letter-spacing:.04em; }
.side-quest-actions { grid-column:1 / 4; display:grid; grid-template-columns:1fr 1.45fr; gap:8px; }
.side-quest-actions button { position:relative; min-height:42px; overflow:hidden; border:1px solid var(--line); border-radius:11px; color:var(--muted); background:var(--card); font-size:1.1rem; font-weight:950; user-select:none; }
.side-quest-actions button:last-child { border-color:transparent; color:#07111c; background:var(--green); }
.side-quest-actions button::after { content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:currentColor; opacity:.25; transform:scaleX(0); transform-origin:left; }
.side-quest-actions button.is-holding::after { animation:counter-hold-fill .42s linear forwards; }
.side-quest-actions button.is-repeating { animation:counter-repeat-pulse .34s ease-in-out infinite alternate; }
.side-quest.side-quest-pop { animation:side-quest-pop .5s ease; }
.side-quest.new-personal-best { animation:new-personal-best .85s cubic-bezier(.2,.8,.2,1); }
@keyframes side-quest-pop { 45%{border-color:var(--green);box-shadow:0 0 22px color-mix(in srgb,var(--green) 18%,transparent);transform:translateY(-2px)} }
@keyframes new-personal-best { 38%{border-color:#f5ca54;box-shadow:0 0 0 3px rgba(245,202,84,.12),0 0 28px rgba(245,202,84,.28);transform:translateY(-3px) scale(1.012)} }
.side-quest-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.side-quest-footer span,.side-quest-recap { color:var(--muted); font-size:.56rem; line-height:1.45; }
.side-quest-footer button { min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--card); font-size:.56rem; font-weight:850; }
.side-quest-recap { margin-top:9px; padding:9px 11px; border-radius:10px; background:var(--canvas); }
.ams-mini-games-section { width:min(1120px,calc(100% - 48px)); margin:18px auto 0; padding:18px; border:1px solid color-mix(in srgb,var(--blue) 35%,var(--line)); border-radius:24px; background:linear-gradient(145deg,color-mix(in srgb,var(--blue-soft) 45%,var(--card)),var(--card)); box-shadow:var(--shadow); }
.ams-mini-games-heading { display:flex; align-items:center; gap:12px; width:min(920px,100%); margin:0 auto 12px; }
.ams-mini-games-heading > span { display:grid; place-items:center; flex:0 0 auto; width:38px; height:38px; border-radius:12px; color:#fff; background:linear-gradient(145deg,var(--blue),var(--green)); box-shadow:0 8px 18px color-mix(in srgb,var(--blue) 22%,transparent); }
.ams-mini-games-heading > div { display:grid; gap:2px; }
.ams-mini-games-heading > div > span { color:var(--blue-strong); font-size:.48rem; font-weight:950; letter-spacing:.14em; }
.ams-mini-games-heading h2 { margin:0; color:var(--ink); font-size:1.08rem; letter-spacing:-.03em; }
.ams-mini-games-heading p { margin:0; color:var(--muted); font-size:.58rem; }
.throwable-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0 0 11px; }
.throwable-picker button { display:flex; align-items:center; gap:8px; min-width:0; min-height:54px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface-soft); text-align:left; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease; }
.throwable-picker button:hover { transform:translateY(-1px); }
.throwable-picker button[aria-checked="true"] { border-color:var(--blue); background:color-mix(in srgb,var(--blue-soft) 65%,var(--card)); box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 15%,transparent),0 8px 18px color-mix(in srgb,var(--blue) 10%,transparent); }
.throwable-picker button > i { display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; overflow:hidden; border-radius:9px; color:var(--blue-strong); background:var(--card); font-size:.7rem; font-style:normal; font-weight:950; }
.throwable-picker button > span { display:grid; min-width:0; gap:1px; }
.throwable-picker strong { overflow:hidden; color:var(--ink); font-size:.6rem; text-overflow:ellipsis; white-space:nowrap; }
.throwable-picker small { color:var(--muted); font-size:.46rem; }
.throwable-picker-face img { width:100%; height:100%; object-fit:cover; }
.headset-toss-card { width:min(920px,100%); margin:14px auto 0; padding:0; overflow:hidden; border:1px solid color-mix(in srgb,#087e9d 34%,var(--line)); border-radius:20px; color:var(--text); background:var(--card); box-shadow:var(--shadow); }
.headset-toss-card > summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; min-height:74px; padding:14px 17px; cursor:pointer; list-style:none; background:linear-gradient(90deg,rgba(0,169,214,.08),rgba(15,169,111,.07),rgba(246,184,43,.08)); }
.headset-toss-card > summary::-webkit-details-marker { display:none; }
.headset-toss-card > summary > span:first-child { display:flex; align-items:center; gap:11px; min-width:0; }
.headset-toss-card > summary > span:first-child > span { display:grid; gap:2px; min-width:0; }
.headset-toss-card > summary strong { color:var(--ink); font-size:.82rem; }
.headset-toss-card > summary small { color:var(--muted); font-size:.57rem; }
.headset-toss-card > summary > b { color:var(--muted); transition:transform .25s ease; }
.headset-toss-card[open] > summary > b { transform:rotate(180deg); }
.headset-summary-icon { position:relative; display:block; flex:0 0 auto; width:40px; height:40px; border-radius:13px; background:linear-gradient(145deg,#00a9d6,#0fa96f); box-shadow:0 9px 22px rgba(0,169,214,.2); }
.headset-summary-icon::before { content:""; position:absolute; left:10px; top:9px; width:16px; height:14px; border:3px solid white; border-bottom:0; border-radius:10px 10px 0 0; }
.headset-summary-icon b,.headset-summary-icon em { position:absolute; top:21px; width:6px; height:10px; border-radius:4px; background:white; }
.headset-summary-icon b { left:8px; }.headset-summary-icon em { right:8px; }
.headset-summary-best { display:grid; gap:2px; min-width:82px; text-align:right; }
.headset-summary-best strong { color:#087d56 !important; font-size:.7rem !important; }
.headset-game-body { padding:0 17px 17px; }
.headset-game-topline { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:10px; padding-top:4px; }
.headset-game-topline > div:first-child { display:grid; gap:3px; }
.headset-game-topline > div:first-child span { color:var(--blue-strong); font-size:.48rem; font-weight:950; letter-spacing:.12em; }
.headset-game-topline > div:first-child strong { color:var(--ink); font-size:.72rem; }
.headset-game-topline > div:last-child { display:grid; min-width:60px; text-align:right; }
.headset-game-topline small { color:var(--muted); font-size:.48rem; font-weight:850; }
.headset-game-topline output { color:var(--ink); font-size:1.1rem; font-weight:950; }
.headset-arena { position:relative; height:260px; overflow:hidden; border:1px solid #9bbfc0; border-radius:17px; background:linear-gradient(180deg,#d7edf0 0 57%,#9ab3ad 57% 59%,#607a76 59% 61%,#b9cbc6 61% 100%); box-shadow:inset 0 -34px 55px rgba(25,66,66,.14); perspective:700px; }
.headset-arena::before { content:""; position:absolute; z-index:0; left:-8%; right:-8%; bottom:-26px; height:127px; opacity:.48; background:repeating-linear-gradient(90deg,transparent 0 53px,rgba(45,77,76,.22) 54px 55px),repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.34) 28px 29px); transform:perspective(230px) rotateX(54deg); transform-origin:bottom; }
.headset-arena::after { content:""; position:absolute; z-index:1; left:0; right:0; bottom:38px; height:2px; background:rgba(35,73,72,.22); box-shadow:0 4px 0 rgba(255,255,255,.42); }
.headset-party-rays { position:absolute; z-index:0; inset:-60% -10% auto 30%; height:160%; opacity:.16; background:conic-gradient(from 20deg,transparent 0 12deg,#f6b82b 13deg 18deg,transparent 19deg 42deg,#ff4e7b 43deg 47deg,transparent 48deg 74deg,#00a9d6 75deg 80deg,transparent 81deg 110deg,#0fa96f 111deg 116deg,transparent 117deg); mask-image:radial-gradient(circle at center,black,transparent 68%); }
.sales-floor-wall { position:absolute; z-index:1; inset:0 0 auto; height:57%; border-bottom:3px solid #73908d; background:linear-gradient(90deg,rgba(255,255,255,.16),transparent 20% 80%,rgba(255,255,255,.15)),repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 104px); }
.sales-floor-wall strong { position:absolute; left:50%; top:13px; padding:5px 10px; border:1px solid rgba(12,76,95,.25); border-radius:7px; color:#087e9d; background:rgba(255,255,255,.54); box-shadow:0 4px 10px rgba(26,74,76,.08); font-size:.42rem; font-weight:1000; letter-spacing:.16em; transform:translateX(-50%); }
.sales-floor-wall i { position:absolute; right:22px; top:12px; width:25px; height:25px; border:3px solid #4f6769; border-radius:50%; background:#f8fbfa; box-shadow:0 3px 8px rgba(24,58,60,.14); }
.sales-floor-wall i::before,.sales-floor-wall i::after { content:""; position:absolute; left:50%; top:50%; width:2px; border-radius:2px; background:#4f6769; transform-origin:bottom; }
.sales-floor-wall i::before { height:7px; transform:translate(-50%,-100%) rotate(8deg); }.sales-floor-wall i::after { height:9px; transform:translate(-50%,-100%) rotate(118deg); }
.sales-floor-cubicles { position:absolute; z-index:2; left:16%; right:28%; bottom:39px; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; height:99px; }
.sales-floor-cubicles > span { position:relative; align-self:end; height:68px; border:1px solid #739495; border-top:5px solid #6a8e91; border-radius:4px 4px 1px 1px; background:linear-gradient(110deg,#b8d1d0,#d7e6e3); box-shadow:0 7px 12px rgba(36,69,70,.13); }
.sales-floor-cubicles > span:nth-child(even) { height:78px; background:linear-gradient(110deg,#a9c9ca,#cfe0dd); }
.sales-floor-cubicles i { position:absolute; left:50%; bottom:12px; width:25px; height:18px; border:4px solid #304e55; border-bottom-width:6px; border-radius:3px; background:linear-gradient(145deg,#0a9fc7,#12536d); transform:translateX(-50%); box-shadow:0 5px 0 -3px #304e55; }
.sales-floor-cubicles b { position:absolute; right:5px; bottom:7px; width:10px; height:8px; border-radius:3px 3px 5px 5px; background:#f6b82b; box-shadow:-3px -7px 0 -2px #5a7375; }
.sales-floor-cubicles em { position:absolute; left:50%; top:-19px; width:18px; height:18px; border:3px solid rgba(255,255,255,.72); border-radius:50%; background:#0fa96f; box-shadow:0 3px 7px rgba(22,65,64,.18); transform:translateX(-50%); }
.sales-floor-cubicles > span:nth-child(2) em { background:#ff4e7b; }.sales-floor-cubicles > span:nth-child(3) em { background:#00a9d6; }.sales-floor-cubicles > span:nth-child(4) em { background:#f6b82b; }
.headset-desk { position:absolute; z-index:3; left:0; bottom:24px; width:132px; height:55px; border-radius:0 9px 4px 0; background:linear-gradient(#354f55 0 8px,#eef7f5 8px); box-shadow:0 12px 22px rgba(25,64,67,.18); }
.headset-desk i { position:absolute; top:50px; width:6px; height:30px; background:#526e73; }.headset-desk i:first-of-type{left:19px}.headset-desk i:last-of-type{right:18px}
.desk-monitor { position:absolute; left:35px; bottom:47px; width:39px; height:29px; border:4px solid #28474e; border-bottom-width:6px; border-radius:4px; background:linear-gradient(145deg,#00a9d6,#173b50); box-shadow:0 7px 0 -4px #28474e; }
.desk-phone { position:absolute; right:11px; top:15px; width:26px; height:17px; border-radius:4px 4px 8px 8px; background:#304d53; }
.desk-phone::before { content:""; position:absolute; left:3px; right:3px; top:-5px; height:8px; border:3px solid #304d53; border-bottom:0; border-radius:8px 8px 0 0; }
.desk-cup { position:absolute; left:79px; top:17px; width:13px; height:18px; border-radius:2px 2px 5px 5px; background:#ff4e7b; box-shadow:7px 4px 0 -4px #ff4e7b; }
.headset-trash-can { position:absolute; z-index:3; right:16%; bottom:23px; width:91px; height:83px; border:4px solid #314f52; border-top-width:7px; border-radius:9px 9px 18px 18px; color:#d9e8e4; background:linear-gradient(100deg,#506a6a,#78918d 48%,#425b5d); box-shadow:0 12px 24px rgba(21,52,54,.25),inset 9px 0 14px rgba(255,255,255,.08); transform-origin:center bottom; }
.headset-trash-can::before { content:""; position:absolute; left:8px; right:8px; top:-12px; height:12px; border:4px solid #263f43; border-radius:50%; background:#142d32; box-shadow:inset 0 3px 4px rgba(0,0,0,.35),0 2px 0 rgba(255,255,255,.18); }
.trash-lid { position:absolute; left:-9px; right:-9px; top:-20px; height:9px; border:3px solid #314f52; border-radius:8px; background:#78918d; transform:rotate(-5deg); }
.trash-mesh { position:absolute; inset:8px; opacity:.3; border-radius:5px 5px 11px 11px; background:repeating-linear-gradient(55deg,transparent 0 6px,#1f3f43 7px 8px),repeating-linear-gradient(-55deg,transparent 0 6px,#1f3f43 7px 8px); }
.headset-trash-can span { position:absolute; left:50%; bottom:16px; padding:3px 5px; border:1px solid rgba(255,255,255,.3); border-radius:4px; color:#eff7f4; background:rgba(18,45,48,.45); font-size:.42rem; font-weight:1000; letter-spacing:.09em; transform:translateX(-50%) rotate(-2deg); }
.headset-impact-word { position:absolute; z-index:7; right:13%; top:30px; opacity:0; color:#17343c; text-shadow:2px 2px 0 rgba(255,255,255,.8); font:1000 1.05rem/1 Arial,sans-serif; letter-spacing:.03em; transform:scale(.3) rotate(-14deg); }
.headset-impact-word.show { animation:headset-impact-pop .86s cubic-bezier(.16,.85,.2,1) both; }
@keyframes headset-impact-pop { 0%{opacity:0;transform:scale(.25) rotate(-18deg)} 46%{opacity:1;transform:scale(1.18) rotate(5deg)} 100%{opacity:1;transform:scale(1) rotate(-3deg)} }
.headset-arena[data-result="swish"] .headset-trash-can { box-shadow:0 0 0 8px rgba(246,184,43,.19),0 12px 24px rgba(21,52,54,.25); }
.headset-arena[data-result="swish"] .headset-impact-word,.headset-arena[data-result="bucket"] .headset-impact-word { color:#a56e00; }
.headset-arena[data-result="clang"] .headset-impact-word,.headset-arena[data-result="miss"] .headset-impact-word { color:#d93d62; }
.headset-arena[data-result="swish"] .sales-floor-cubicles em,.headset-arena[data-result="bucket"] .sales-floor-cubicles em { animation:sales-floor-cheer .52s ease-out 2 alternate; }
.headset-arena[data-result="swish"] .sales-floor-cubicles > span:nth-child(2) em,.headset-arena[data-result="bucket"] .sales-floor-cubicles > span:nth-child(2) em { animation-delay:.08s; }
.headset-arena[data-result="swish"] .sales-floor-cubicles > span:nth-child(3) em,.headset-arena[data-result="bucket"] .sales-floor-cubicles > span:nth-child(3) em { animation-delay:.14s; }
@keyframes sales-floor-cheer { to { transform:translate(-50%,-10px) scale(1.16); box-shadow:0 8px 0 -4px #f6b82b; } }
.headset-token { position:absolute; z-index:4; left:29px; bottom:71px; width:50px; height:48px; filter:drop-shadow(0 7px 7px rgba(23,52,60,.22)); transform-origin:center; }
.headset-band { position:absolute; left:8px; top:2px; width:30px; height:28px; border:6px solid #17343c; border-bottom:0; border-radius:19px 19px 0 0; }
.headset-cup { position:absolute; top:25px; width:11px; height:19px; border:3px solid #ffffff; border-radius:6px; background:#00a9d6; box-shadow:0 0 0 2px #17343c; }
.headset-cup.left{left:3px}.headset-cup.right{right:3px}
.headset-mic { position:absolute; right:-5px; top:37px; width:16px; height:4px; border-radius:999px; background:#17343c; transform:rotate(16deg); transform-origin:left; }
.headset-mic::after { content:""; position:absolute; right:-3px; top:-2px; width:6px; height:7px; border-radius:50%; background:#ff4e7b; }
.throwable-computer,.throwable-cash,.throwable-dillan { display:none; position:absolute; inset:0; }
.headset-token[data-throwable="computer"] > .headset-band,.headset-token[data-throwable="computer"] > .headset-cup,.headset-token[data-throwable="computer"] > .headset-mic,
.headset-token[data-throwable="cash"] > .headset-band,.headset-token[data-throwable="cash"] > .headset-cup,.headset-token[data-throwable="cash"] > .headset-mic,
.headset-token[data-throwable="dillan"] > .headset-band,.headset-token[data-throwable="dillan"] > .headset-cup,.headset-token[data-throwable="dillan"] > .headset-mic { display:none; }
.headset-token[data-throwable="computer"] .throwable-computer,.headset-token[data-throwable="cash"] .throwable-cash,.headset-token[data-throwable="dillan"] .throwable-dillan { display:block; }
.throwable-computer { top:4px; left:2px; width:46px; height:32px; border:4px solid #274850; border-bottom-width:6px; border-radius:4px; background:linear-gradient(145deg,#11b1d8,#183d53); box-shadow:0 9px 0 -5px #274850; }
.throwable-computer b { position:absolute; left:50%; bottom:-12px; width:20px; height:4px; border-radius:4px; background:#274850; transform:translateX(-50%); }
.throwable-cash { inset:7px -3px 5px; border:3px solid #145d42; border-radius:7px; background:repeating-linear-gradient(-12deg,#46bd78 0 6px,#78d49d 7px 12px); box-shadow:inset 0 0 0 3px rgba(255,255,255,.32),0 5px 0 #0f6d49; transform:rotate(-5deg); }
.throwable-cash b { position:absolute; inset:0; display:grid; place-items:center; color:#083d2c; font-size:.5rem; font-weight:1000; text-shadow:0 1px rgba(255,255,255,.5); }
.throwable-dillan { inset:-2px; overflow:hidden; border:4px solid #fff; border-radius:50%; background:#0fa96f; box-shadow:0 0 0 3px #087e9d,0 5px 0 rgba(21,63,68,.4); }
.throwable-dillan img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(1.08); }
.headset-score-burst { position:absolute; z-index:6; right:25%; top:20%; display:none; place-items:center; width:82px; height:82px; color:#17343c; background:#f6b82b; clip-path:polygon(50% 0,61% 25%,85% 8%,78% 34%,100% 36%,78% 53%,95% 73%,68% 70%,69% 100%,50% 78%,31% 100%,32% 70%,5% 73%,22% 53%,0 36%,22% 34%,15% 8%,39% 25%); font-size:1.05rem; font-weight:1000; filter:drop-shadow(0 8px 12px rgba(106,76,3,.24)); }
.headset-score-burst.show { display:grid; animation:headset-score-pop .72s cubic-bezier(.15,.8,.2,1); }
@keyframes headset-score-pop { 0%{scale:.25;rotate:-24deg;opacity:0} 65%{scale:1.15;rotate:8deg;opacity:1} 100%{scale:1;rotate:0} }
.headset-game-controls { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:10px 13px; align-items:end; margin-top:12px; }
.headset-power-label { display:flex; align-items:center; justify-content:space-between; color:var(--ink); font-size:.58rem; font-weight:900; }
.headset-power-label output { color:var(--blue-strong); }
.headset-power-track { position:relative; grid-column:1; height:13px; overflow:hidden; border:1px solid var(--line); border-radius:999px; background:linear-gradient(90deg,#dcece8 0 61%,rgba(246,184,43,.32) 62% 82%,#dcece8 83%); }
.headset-power-track > i { position:absolute; z-index:2; top:0; bottom:0; left:68%; width:14%; border-left:1px solid #d39a0c; border-right:1px solid #d39a0c; background:rgba(246,184,43,.22); }
.headset-power-track > b { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#00a9d6,#0fa96f); box-shadow:0 0 12px rgba(0,169,214,.28); }
.headset-game-controls button { grid-column:2; grid-row:1 / 3; min-height:50px; border:0; border-radius:14px; color:white; background:linear-gradient(135deg,#087e9d,#0fa96f); box-shadow:0 10px 24px rgba(8,126,157,.22); font-size:.66rem; font-weight:1000; letter-spacing:.08em; }
.headset-game-controls button:hover,.headset-game-controls button:focus-visible { transform:translateY(-1px); box-shadow:0 13px 28px rgba(8,126,157,.28); }
.headset-game-controls button:disabled { cursor:wait; opacity:.62; transform:none; }
.headset-game-status { min-height:20px; margin:10px 0 0; color:var(--ink); font-size:.62rem; font-weight:850; text-align:center; }
.headset-game-privacy { display:block; margin-top:6px; color:var(--muted); font-size:.49rem; text-align:center; }

.degenerate-options { display:grid; gap:10px; margin-top:13px; padding:13px; border:1px solid color-mix(in srgb,var(--green) 26%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--green-soft) 35%,var(--surface-soft)); }
.degenerate-options[hidden] { display:none; }
.degenerate-options > div:first-child { display:grid; gap:9px; }
.degenerate-options > div:first-child > span { display:grid; gap:2px; }
.degenerate-options strong { color:var(--ink); font-size:.68rem; }
.degenerate-options small { color:var(--muted); font-size:.56rem; }
.degenerate-sound-row { display:grid; grid-template-columns:minmax(0,1fr) 132px; }
.degenerate-sound-row > select { width:132px; }
.degenerate-sound-row > button { grid-column:1 / 3; margin-top:2px; }

/* Settings as smooth accordion list */
.settings-panel { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.settings-panel-content { display:flex; flex-direction:column; height:100%; min-height:0; gap:9px; overflow:hidden; }
.settings-section { flex:0 0 auto; margin:0; padding:0; overflow:hidden; border-radius:15px; transition:flex-grow .38s cubic-bezier(.2,.8,.2,1); }
.settings-section.accordion-open { display:flex; flex:1 1 0; flex-direction:column; min-height:0; }
.settings-section-heading { position: relative; min-height: 58px; margin: 0; padding: 14px 42px 14px 14px; cursor: pointer; outline: none; }
.settings-section-heading::after { content: "⌄"; position: absolute; right: 15px; top: 50%; color: var(--muted); font-size: .95rem; transform: translateY(-50%); transition: transform .32s cubic-bezier(.2,.8,.2,1),color .2s ease; }
.settings-section.accordion-open .settings-section-heading::after { color: var(--blue-strong); transform: translateY(-50%) rotate(180deg); }
.settings-section-heading:focus-visible { box-shadow: inset 0 0 0 3px var(--focus-ring); border-radius: 14px; }
.settings-accordion-body { display:block; flex:0 0 auto; max-height:0; overflow:hidden; opacity:.35; overscroll-behavior:contain; scrollbar-gutter:stable; transition:max-height .38s cubic-bezier(.2,.8,.2,1),opacity .25s ease; }
.settings-accordion-inner { min-height:0; overflow:hidden; padding:0 15px; }
.settings-section.accordion-open .settings-accordion-body { flex:1 1 auto; min-height:0; max-height:none; overflow-x:hidden; overflow-y:auto; opacity:1; }
.settings-section.accordion-open .settings-accordion-inner { overflow:visible; padding-bottom:15px; }
.settings-section.accordion-open .settings-accordion-body::-webkit-scrollbar { width:8px; }
.settings-section.accordion-open .settings-accordion-body::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:999px; background:color-mix(in srgb,var(--muted) 42%,transparent); background-clip:padding-box; }
.settings-panel-content:has(.settings-section.accordion-open) > .settings-section:not(.accordion-open) .settings-section-heading { min-height:44px; padding-top:9px; padding-bottom:9px; }
.settings-panel-content:has(.settings-section.accordion-open) > .settings-section:not(.accordion-open) .settings-section-heading small { display:none; }
.settings-panel-content:has(.settings-section.accordion-open) > .reset-appearance-button { display:none; }
.theme-vault-card,.degenerate-lab-intro { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:11px; margin-bottom:13px; padding:12px; border:1px solid var(--line); border-radius:13px; background:var(--card); }
.theme-vault-mark,.degenerate-lab-intro > span { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:#07111c; background:linear-gradient(145deg,var(--blue),#8de7ff); font-size:1rem; font-weight:950; box-shadow:0 8px 20px color-mix(in srgb,var(--blue) 24%,transparent); }
.theme-vault-card > div,.degenerate-lab-intro > div { display:grid; gap:3px; }
.theme-vault-card strong,.degenerate-lab-intro strong { color:var(--ink); font-size:.68rem; }
.theme-vault-card small,.degenerate-lab-intro small { color:var(--muted); font-size:.54rem; line-height:1.42; }
.theme-vault-form { display:grid; gap:7px; }
.theme-vault-form > label { color:var(--ink); font-size:.58rem; font-weight:900; }
.theme-code-shell { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.theme-code-shell input { min-width:0; height:43px; padding:0 12px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:var(--card); font:800 .65rem/1 Arial,sans-serif; outline:none; }
.theme-code-shell input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 17%,transparent); }
.theme-code-shell button { min-width:86px; border:1px solid var(--blue); border-radius:11px; color:white; background:var(--blue); font-size:.59rem; font-weight:950; }
.theme-unlock-status { min-height:18px; margin:0; color:var(--muted); font-size:.51rem; line-height:1.45; }
.theme-unlock-status.unlocked { color:#118a58; font-weight:850; }
.theme-unlock-status.error { color:#d23a48; font-weight:850; }
.degenerate-lab-section { border-color:color-mix(in srgb,#21f38b 34%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,#07111c 4%,var(--surface-soft)),var(--surface-soft)); }
.degenerate-lab-intro > span { color:#07111c; background:linear-gradient(145deg,#21f38b,#6ee7ff); box-shadow:0 8px 22px rgba(33,243,139,.2); }
.degenerate-lock-button { width:100%; min-height:39px; margin-top:12px; border:1px solid var(--line); border-radius:11px; color:var(--muted); background:var(--card); font-size:.56rem; font-weight:850; }
.degenerate-lock-button:hover { color:#c8323d; border-color:color-mix(in srgb,#c8323d 35%,var(--line)); }
.counter-visibility-settings { margin-top: 12px; }
.counter-feedback-settings { margin-bottom: 6px; }
.counter-sound-preview { width:100%; min-height:38px; margin:10px 0 3px; border:1px solid color-mix(in srgb,var(--blue) 28%,var(--line)); border-radius:11px; color:var(--blue-strong); background:var(--card); font-size:.65rem; font-weight:850; }
.counter-sound-preview:disabled { cursor:not-allowed; opacity:.48; }
.counter-link-badge { width:max-content; margin-top:5px; padding:4px 8px; border:1px solid color-mix(in srgb,var(--green) 28%,var(--line)); border-radius:999px; color:var(--green); background:var(--green-soft); font-size:.53rem!important; font-weight:850; letter-spacing:.01em; }
.counter-link-badge[hidden] { display:none !important; }
.control-card.counter-linked { border-color:color-mix(in srgb,var(--green) 38%,var(--line)); box-shadow:inset 3px 0 0 var(--green); }
.control-card.counter-linked input { opacity:1; }
.sync-mode-explainer { display:grid; gap:3px; margin:10px 0 4px; padding:11px 12px; border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line)); border-radius:11px; background:var(--blue-soft); }
.sync-mode-explainer strong { color:var(--blue-strong); font-size:.66rem; }
.sync-mode-explainer span { color:var(--text); font-size:.58rem; line-height:1.45; }
.sync-mode-explainer[data-mode="off"] { border-color:var(--line); background:var(--surface-soft,#f8fbfc); }
.sync-mode-explainer[data-mode="off"] strong { color:var(--muted); }
.sync-mode-explainer[data-mode="two_way"] { border-color:color-mix(in srgb,var(--green) 28%,var(--line)); background:var(--green-soft); }
.sync-mode-explainer[data-mode="two_way"] strong { color:var(--green); }
.settings-save-bar { position:sticky; z-index:4; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:color-mix(in srgb,var(--card) 94%,transparent); box-shadow:0 -12px 28px rgba(14,38,52,.09); backdrop-filter:blur(16px); }
.settings-save-bar > span { display:grid; gap:2px; }
.settings-save-bar strong { color:var(--ink); font-size:.68rem; }
.settings-save-bar small { color:var(--muted); font-size:.56rem; }
.settings-save-bar > div { display:flex; gap:8px; }
.settings-save-bar button { min-height:38px; padding:0 13px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:var(--card); font-size:.63rem; font-weight:850; }
#settingsSaveButton { border-color:var(--blue); color:white; background:var(--blue); }
.rule-admin-overlay { z-index:540; }
.rule-admin-panel { width:min(760px,100%); }
.rule-admin-content { min-height:0; overflow-y:auto; padding:18px 20px 34px; overscroll-behavior:contain; }
.active-rule-summary { display:grid; gap:4px; margin-bottom:16px; padding:16px 18px; border:1px solid color-mix(in srgb,#159b63 35%,var(--line)); border-radius:16px; background:color-mix(in srgb,#159b63 9%,var(--card)); }
.active-rule-summary span { color:#108653; font-size:.57rem; font-weight:950; letter-spacing:.13em; }
.active-rule-summary strong { color:var(--ink); font-size:1rem; }
.active-rule-summary small { color:var(--muted); font-size:.63rem; }
.rule-admin-form { display:grid; gap:14px; }
.rule-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.rule-form-grid-top { grid-template-columns:1.4fr 1fr; }
.rule-admin-form label { display:grid; gap:6px; color:var(--muted); font-size:.58rem; font-weight:800; }
.rule-admin-form input { width:100%; min-width:0; height:40px; padding:0 10px; border:1px solid var(--line); border-radius:10px; color:var(--ink); background:var(--card); font:800 .72rem/1 Arial,sans-serif; outline:none; }
.rule-admin-form input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent); }
.rule-editor-section,.rule-history-section { padding:15px; border:1px solid var(--line); border-radius:16px; background:var(--surface-soft); }
.rule-editor-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.rule-editor-heading > div { display:grid; gap:2px; }
.rule-editor-heading span { color:var(--blue-strong); font-size:.55rem; font-weight:950; letter-spacing:.12em; }
.rule-editor-heading strong { color:var(--ink); font-size:.82rem; }
.rule-editor-heading small { color:var(--muted); font-size:.56rem; }
.rule-tier-grid { display:grid; grid-template-columns:.8fr .8fr .9fr 1fr; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line); }
.rule-tier-grid.single-gate { grid-template-columns:.9fr .9fr 1fr; }
.rule-tier-grid-head { padding-top:0; border-top:0; color:var(--muted); font-size:.53rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.rule-tier-grid > strong { color:var(--ink); font-size:.65rem; }
.rule-tier-grid > span { color:var(--muted); font-size:.64rem; }
.rule-tier-grid label { position:relative; display:flex; align-items:center; gap:4px; }
.rule-tier-grid label b { color:var(--muted); font-size:.62rem; }
.rule-tier-grid input { height:36px; }
.rule-cpa-gate { display:grid; grid-template-columns:1fr minmax(120px, .65fr); align-items:center; gap:12px; margin:0 0 12px; padding:11px 12px; border:1px solid color-mix(in srgb, var(--blue) 30%, var(--line)); border-radius:12px; background:var(--blue-soft); }
.rule-cpa-gate > span { color:var(--ink); font-size:.68rem; font-weight:900; }
.rule-cpa-gate .rule-input-affix { background:var(--card); }
.rule-input-affix { display:flex; align-items:center; gap:6px; height:40px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.rule-input-affix:focus-within { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent); }
.rule-input-affix input { height:auto; padding:0; border:0; box-shadow:none; }
.rule-input-affix input:focus { box-shadow:none; }
.rule-input-affix b { color:var(--muted); }
.rule-form-status { min-height:18px; margin:0; color:var(--muted); font-size:.62rem; font-weight:750; }
.rule-form-status.error { color:#c8323d; }
.rule-form-status.success { color:#108653; }
.rule-history-section { margin-top:14px; }
.rule-history-list { display:grid; gap:8px; }
.rule-history-list > p { margin:0; color:var(--muted); font-size:.64rem; }
.rule-history-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.rule-history-item strong { color:var(--ink); font-size:.67rem; }
.rule-history-item small { color:var(--muted); font-size:.55rem; }
.rule-history-item button { grid-row:1/3; grid-column:2; align-self:center; min-height:32px; padding:0 10px; border:1px solid var(--line); border-radius:9px; color:var(--blue-strong); background:var(--blue-soft); font-size:.56rem; font-weight:900; }
.rule-status-pill { display:inline-flex; width:max-content; margin-left:6px; padding:2px 6px; border-radius:999px; color:#108653; background:rgba(21,155,99,.11); font-size:.48rem; text-transform:uppercase; letter-spacing:.07em; }
.rule-status-pill.draft { color:#8a6510; background:rgba(202,151,30,.13); }
.rule-save-bar .rule-publish-button { color:white; border-color:var(--blue); background:var(--blue); }

/* Admin team activity */
.team-activity-overlay { z-index:550; }
.team-activity-panel { width:min(1050px,100%); }
.team-activity-content { min-height:0; overflow-y:auto; padding:18px 20px 34px; overscroll-behavior:contain; }
.team-activity-notice { display:grid; grid-template-columns:auto 1fr; align-items:start; gap:10px; margin-bottom:14px; padding:12px 14px; border:1px solid color-mix(in srgb,var(--blue) 24%,var(--line)); border-radius:14px; background:var(--blue-soft); }
.team-activity-notice > span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:white; background:var(--blue); font-size:.58rem; font-weight:950; }
.team-activity-notice p { margin:0; color:var(--text); font-size:.6rem; line-height:1.55; }
.team-activity-notice strong { color:var(--ink); }
.team-activity-toolbar { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.5fr); align-items:center; gap:12px; margin-bottom:10px; }
.team-search-field input { width:100%; height:42px; padding:0 13px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--card); font:750 .66rem/1 Arial,sans-serif; outline:none; }
.team-search-field input:focus { border-color:var(--blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent); }
.team-filter-group { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:4px; border:1px solid var(--line); border-radius:13px; background:var(--surface-soft); }
.team-filter-group button { min-height:34px; padding:0 8px; border:0; border-radius:9px; color:var(--muted); background:transparent; font-size:.56rem; font-weight:850; }
.team-filter-group button[aria-pressed="true"] { color:white; background:var(--blue); box-shadow:0 6px 14px color-mix(in srgb,var(--blue) 20%,transparent); }
.team-filter-group button:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; }
.team-activity-status { min-height:18px; margin:0 0 8px; color:var(--muted); font-size:.58rem; font-weight:750; }
.team-activity-status.error { color:#c8323d; }
.team-activity-directory { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:12px; }
.team-activity-directory:has(.team-activity-detail:not([hidden])) { grid-template-columns:minmax(0,1.65fr) minmax(290px,.8fr); }
.team-table-card,.team-activity-detail { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 10px 30px rgba(14,38,52,.06); }
.team-card-heading,.team-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 15px; border-bottom:1px solid var(--line); background:var(--surface-soft); }
.team-card-heading > div,.team-detail-heading > div { display:grid; min-width:0; gap:2px; }
.team-card-heading span,.team-detail-heading span { color:var(--blue-strong); font-size:.51rem; font-weight:950; letter-spacing:.11em; }
.team-card-heading strong,.team-detail-heading strong { color:var(--ink); font-size:.78rem; }
.team-card-heading small,.team-detail-heading small { overflow:hidden; color:var(--muted); font-size:.55rem; text-overflow:ellipsis; white-space:nowrap; }
.team-detail-heading > button { display:grid; place-items:center; flex:0 0 auto; width:30px; height:30px; padding:0; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--card); font-size:.9rem; }
.team-table-scroll { min-height:220px; overflow:auto; }
.team-activity-table { width:100%; border-collapse:collapse; color:var(--text); font-size:.59rem; }
.team-activity-table th { position:sticky; z-index:1; top:0; padding:10px 9px; color:var(--muted); background:color-mix(in srgb,var(--card) 96%,transparent); font-size:.49rem; font-weight:900; text-align:left; text-transform:uppercase; letter-spacing:.07em; backdrop-filter:blur(12px); }
.team-activity-table td { padding:10px 9px; border-top:1px solid var(--line); vertical-align:middle; }
.team-activity-table tbody tr { transition:background .18s ease; }
.team-activity-table tbody tr:hover { background:var(--surface-soft); }
.team-member-button { display:grid; gap:2px; max-width:170px; padding:0; border:0; color:var(--ink); background:transparent; font:inherit; text-align:left; }
.team-member-button strong { overflow:hidden; font-size:.62rem; text-overflow:ellipsis; white-space:nowrap; }
.team-member-button small { color:var(--blue-strong); font-size:.5rem; font-weight:800; }
.team-member-button:focus-visible { border-radius:5px; outline:3px solid var(--focus-ring); outline-offset:3px; }
.team-role-pill,.team-status-pill { display:inline-flex; align-items:center; width:max-content; padding:4px 7px; border-radius:999px; font-size:.49rem; font-weight:900; text-transform:capitalize; }
.team-role-pill { color:var(--blue-strong); background:var(--blue-soft); }
.team-status-pill { color:var(--muted); background:var(--surface-soft); }
.team-status-pill.active { color:#108653; background:rgba(21,155,99,.11); }
.team-activity-empty { display:grid; place-items:center; gap:6px; min-height:220px; padding:28px; text-align:center; }
.team-activity-empty > span { display:grid; place-items:center; width:40px; height:40px; border-radius:14px; color:var(--blue-strong); background:var(--blue-soft); font-weight:950; }
.team-activity-empty strong { color:var(--ink); font-size:.75rem; }
.team-activity-empty p { max-width:330px; margin:0; color:var(--muted); font-size:.58rem; line-height:1.5; }
.team-detail-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; padding:13px; }
.team-detail-metrics > div { display:grid; gap:3px; padding:10px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); }
.team-detail-metrics dt { color:var(--muted); font-size:.49rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.team-detail-metrics dd { margin:0; color:var(--ink); font-size:.6rem; font-weight:850; }
.team-session-timeline { display:grid; gap:8px; max-height:420px; overflow-y:auto; padding:0 13px 16px; }
.team-session-item { position:relative; display:grid; gap:3px; padding:10px 10px 10px 27px; border:1px solid var(--line); border-radius:11px; background:var(--card); }
.team-session-item::before { content:""; position:absolute; top:14px; left:11px; width:8px; height:8px; border:2px solid var(--card); border-radius:50%; background:var(--blue); box-shadow:0 0 0 2px color-mix(in srgb,var(--blue) 24%,transparent); }
.team-session-item strong { color:var(--ink); font-size:.6rem; }
.team-session-item span { color:var(--muted); font-size:.52rem; line-height:1.4; }
.team-session-item .session-open { color:#108653; font-weight:850; }
.team-activity-footer button { border-color:var(--blue); color:white; background:var(--blue); }
body.reduced-motion .counter-actions button.is-holding::after, body.reduced-motion .counter-actions button.is-repeating, body.reduced-motion .side-quest-actions button, body.reduced-motion .degenerate-ticker span, body.reduced-motion .degenerate-reaction,body.reduced-motion .birthday-balloons { animation:none !important; }

@media (max-width: 760px) {
  .counter-secondary-grid { grid-template-columns: 1fr; }
  .counter-card { min-height: 126px; }
  .calculator-goal-body { grid-template-columns: 1fr; }
  .calculator-goal-body .goal-range-labels,.compact-goal-metrics { grid-column: 1; }
  .compact-goal-metrics { grid-template-columns: 1fr 1fr 1fr; }
  .team-activity-toolbar { grid-template-columns:1fr; }
  .team-activity-directory:has(.team-activity-detail:not([hidden])) { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  .app-nav { width: auto; }
  .header-copy { min-width: 0; }
  .header-copy h1 { overflow-wrap: anywhere; }
  .dashboard-heading { align-items: center; }
  .dashboard-heading h2 { font-size: 1.8rem; }
  .counter-stage { padding: 12px; }
  .counter-card-primary { grid-template-columns: 1fr auto; min-height: 245px; padding: 20px; }
  .counter-card-primary output { grid-column: 1 / 3; font-size: 7.4rem; }
  .counter-card-primary .counter-actions { grid-column: 1 / 3; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .counter-card-primary .counter-actions .counter-plus { width: auto; min-width: 0; }
  .counter-secondary-grid { gap: 9px; }
  .counter-card { grid-template-columns: 1fr auto auto; min-height: 104px; padding: 14px; }
  .counter-card output { align-self: center; font-size: 2.6rem; }
  .counter-card .counter-actions { grid-column: auto; align-items: center; }
  .counter-secondary-grid .counter-card { min-height: 112px; }
  .counter-secondary-grid .counter-actions { width: auto; }
  .counter-secondary-grid .counter-actions button { flex: 0 0 auto; }
  .counter-card .counter-actions button { min-width: 40px; height: 42px; }
  .counter-card .counter-actions .counter-plus { min-width: 54px; }
  .calculator-goal summary { padding: 15px; }
  .calculator-goal-body { padding: 0 15px 16px; }
  .compact-goal-metrics { grid-template-columns: 1fr; }
  .settings-panel-content { gap:10px; padding:12px 12px 96px; }
  .settings-panel-content.mobile-section-open { padding:10px 10px 0; }
  .settings-panel-content.mobile-section-open > .settings-section:not(.accordion-open),
  .settings-panel-content.mobile-section-open > .reset-appearance-button { display:none; }
  .settings-panel-content.mobile-section-open > .settings-section.accordion-open { flex:1 1 100%; width:100%; min-height:0; border-radius:18px; }
  .settings-panel-content.mobile-section-open .settings-section-heading { flex:0 0 auto; min-height:62px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--surface-soft) 72%,var(--card)); }
  .settings-panel-content.mobile-section-open .settings-section-heading::after { content:"←"; color:var(--blue-strong); transform:translateY(-50%); }
  .settings-panel-content.mobile-section-open .settings-accordion-body { flex:1 1 auto; max-height:none; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:auto; }
  .settings-panel-content.mobile-section-open .settings-accordion-inner { padding:14px 12px 24px; }
  .settings-panel-content:not(.mobile-section-open) > .settings-section { flex:0 0 auto; }
  .settings-panel-content:not(.mobile-section-open) .settings-section-heading { min-height:64px; }
  .settings-save-bar { align-items:stretch; flex-direction:column; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .settings-save-bar > div { display:grid; grid-template-columns:1fr 1fr; }
  .settings-section.accordion-open .settings-accordion-body { max-height:none; }
  .rule-form-grid,.rule-form-grid-top { grid-template-columns:1fr; }
  .rule-tier-grid { grid-template-columns:.8fr .7fr .85fr .95fr; gap:5px; }
  .rule-tier-grid.single-gate { grid-template-columns:.9fr .8fr 1fr; }
  .rule-admin-content { padding:14px 14px 110px; }
  .team-signin-banner { grid-template-columns:auto minmax(0,1fr) auto; width:calc(100% - 24px); margin:-4px auto 16px; gap:9px; }
  .team-signin-banner-copy span { line-height:1.3; }
  .team-signin-banner .banner-google-signin { grid-column:2; justify-content:flex-start; width:max-content; }
  .team-signin-banner > button { grid-column:3; grid-row:1; }
  .team-activity-content { padding:14px 14px 110px; }
  .team-filter-group { grid-template-columns:1fr 1fr; }
  .team-table-scroll { overflow:visible; }
  .team-activity-table,.team-activity-table tbody { display:block; }
  .team-activity-table thead { display:none; }
  .team-activity-table tr { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:12px; border-top:1px solid var(--line); }
  .team-activity-table td { display:grid; gap:3px; padding:0; border:0; }
  .team-activity-table td::before { content:attr(data-label); color:var(--muted); font-size:.46rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
  .team-activity-table td:first-child,.team-activity-table td:nth-child(2) { grid-column:1 / 3; }
  .team-member-button { max-width:none; }
  .team-detail-metrics { grid-template-columns:1fr 1fr; }
  .side-quests-card { border-radius:16px; }
  .side-quest-grid { grid-template-columns:1fr; }
  .side-quest:last-child { grid-column:auto; }
  .side-quest-actions button { min-height:48px; }
  .side-quest-footer { align-items:flex-start; flex-direction:column; }
  .ams-mini-games-section { width:calc(100% - 24px); padding:12px; border-radius:18px; }
  .ams-mini-games-heading { align-items:flex-start; }
  .throwable-picker { grid-template-columns:1fr 1fr; }
  .throwable-picker button { min-height:58px; }
  .headset-toss-card { border-radius:16px; }
  .headset-toss-card > summary { grid-template-columns:minmax(0,1fr) auto; }
  .headset-toss-card > summary > b { display:none; }
  .headset-game-body { padding:0 10px 14px; }
  .headset-arena { height:230px; }
  .headset-game-controls { grid-template-columns:1fr; }
  .headset-power-track { grid-column:1; }
  .headset-game-controls button { grid-column:1; grid-row:auto; min-height:54px; }
  .side-quest-footer button { width:100%; min-height:42px; }
  .headset-toss-card { border-radius:16px; }
  .headset-toss-card > summary { grid-template-columns:minmax(0,1fr) auto; padding:12px; }
  .headset-toss-card > summary > b { display:none; }
  .headset-summary-best { min-width:70px; }
  .headset-game-body { padding:0 12px 14px; }
  .headset-arena { height:230px; }
  .headset-desk { width:91px; }
  .desk-monitor { left:25px; width:31px; }
  .desk-phone { display:none; }
  .desk-cup { left:64px; }
  .sales-floor-wall strong { left:57%; font-size:.36rem; }
  .sales-floor-cubicles { left:18%; right:28%; gap:3px; }
  .sales-floor-cubicles > span:nth-child(1) { display:none; }
  .sales-floor-cubicles { grid-template-columns:repeat(3,1fr); }
  .headset-trash-can { right:7%; width:76px; height:72px; }
  .headset-impact-word { right:5%; top:25px; font-size:.88rem; }
  .headset-game-controls { grid-template-columns:1fr; }
  .headset-power-label,.headset-power-track,.headset-game-controls button { grid-column:1; }
  .headset-game-controls button { grid-row:auto; min-height:52px; }
  .degenerate-sound-row { grid-template-columns:1fr; }
  .degenerate-sound-row > select { width:100%; }
  .degenerate-sound-row > button { grid-column:1; }
}
[hidden] {
  display: none !important;
}

.theme-code-preview { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; margin-top:9px; padding:9px 11px; border:1px dashed color-mix(in srgb,var(--blue) 36%,var(--line)); border-radius:11px; background:color-mix(in srgb,var(--blue-soft) 30%,var(--surface-soft)); }
.theme-code-preview > span { color:var(--muted); font-size:.5rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.theme-code-preview output { min-width:0; overflow:hidden; color:var(--ink); font:850 .62rem/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.theme-code-preview output[data-empty="true"] { color:var(--muted); font-family:inherit; font-weight:700; }
.admin-code-directory { display:grid; gap:11px; margin-top:13px; padding:13px; border:1px solid color-mix(in srgb,#d7a72c 48%,var(--line)); border-radius:13px; background:linear-gradient(145deg,color-mix(in srgb,#fff4c4 55%,var(--card)),var(--surface-soft)); }
.admin-code-directory > div { display:grid; gap:2px; }
.admin-code-directory > div > span { color:#9c6514; font-size:.47rem; font-weight:950; letter-spacing:.14em; }
.admin-code-directory > div > strong { color:var(--ink); font-size:.72rem; }
.admin-code-directory > div > small { color:var(--muted); font-size:.53rem; line-height:1.4; }
.admin-code-directory dl { display:grid; gap:7px; margin:0; }
.admin-code-directory dl > div { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.admin-code-directory dt { color:var(--text); font-size:.57rem; font-weight:800; }
.admin-code-directory dd { display:flex; align-items:center; gap:7px; margin:0; }
.admin-code-directory code { padding:4px 7px; border-radius:6px; color:var(--ink); background:var(--canvas); font-size:.56rem; font-weight:900; }
.admin-code-directory button { min-height:28px; padding:0 8px; border:1px solid var(--line); border-radius:7px; color:var(--blue-strong); background:var(--surface-soft); font-size:.49rem; font-weight:900; }
.bad-code-overlay { position:fixed; z-index:575; inset:0; display:grid; place-items:center; padding:22px; opacity:0; background:rgba(8,19,25,.6); backdrop-filter:blur(9px); transition:opacity .18s ease; }
.bad-code-overlay.open { opacity:1; }
.bad-code-dialog { position:relative; display:grid; justify-items:center; width:min(430px,100%); padding:28px 26px 24px; overflow:hidden; border:1px solid color-mix(in srgb,var(--blue) 46%,var(--line)); border-radius:24px; color:var(--text); background:var(--card); box-shadow:0 30px 90px rgba(0,0,0,.32); text-align:center; transform:translateY(10px) scale(.97); transition:transform .22s cubic-bezier(.2,.8,.2,1); }
.bad-code-overlay.open .bad-code-dialog { transform:none; }
.bad-code-dialog::before { content:"???"; position:absolute; right:-8px; top:-22px; color:color-mix(in srgb,var(--blue) 8%,transparent); font-size:7rem; font-weight:1000; letter-spacing:-.12em; transform:rotate(8deg); }
.bad-code-dialog > span { display:grid; place-items:center; width:54px; height:54px; margin-bottom:12px; border-radius:17px; color:#fff; background:linear-gradient(145deg,var(--blue),var(--blue-strong)); box-shadow:0 12px 26px color-mix(in srgb,var(--blue) 28%,transparent); font-size:1.35rem; }
.bad-code-dialog small { color:var(--blue-strong); font-size:.52rem; font-weight:950; letter-spacing:.16em; }
.bad-code-dialog h2 { max-width:350px; margin:8px 0 9px; color:var(--ink); font-size:1.45rem; line-height:1.05; letter-spacing:-.04em; }
.bad-code-dialog p { max-width:350px; margin:0; color:var(--muted); font-size:.72rem; line-height:1.55; }
.bad-code-dialog button { min-height:44px; margin-top:19px; padding:0 18px; border:0; border-radius:12px; color:#fff; background:var(--blue); font-size:.62rem; font-weight:950; }

/* Monthly GOAT award */
.goat-award-banner { position:relative; isolation:isolate; display:grid; grid-template-columns:96px minmax(0,1fr) auto; align-items:center; gap:18px; width:min(1120px,calc(100% - 48px)); min-height:126px; margin:-8px auto 24px; padding:14px 22px 14px 12px; overflow:hidden; border:1px solid rgba(205,153,45,.58); border-radius:22px; color:#fff6d8; background:linear-gradient(115deg,#17130d 0%,#33230d 44%,#16120d 100%); box-shadow:0 18px 45px rgba(61,42,8,.22),inset 0 1px rgba(255,244,190,.18); animation:goat-banner-in .48s cubic-bezier(.2,.8,.2,1) both; }
.goat-award-banner::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.38; background:radial-gradient(circle at 11% 18%,rgba(255,213,91,.38),transparent 22%),repeating-linear-gradient(120deg,transparent 0 18px,rgba(255,224,134,.035) 19px 20px); }
.goat-award-glow { position:absolute; z-index:-1; left:13px; top:50%; width:116px; height:116px; border-radius:50%; background:rgba(244,184,48,.28); filter:blur(22px); transform:translateY(-50%); }
.goat-award-banner > img { width:92px; height:110px; object-fit:contain; filter:drop-shadow(0 10px 12px rgba(0,0,0,.46)); transform:translateY(2px); }
.goat-award-copy { display:grid; min-width:0; gap:4px; }
.goat-award-copy > span { color:#f5c65a; font-size:.58rem; font-weight:950; letter-spacing:.16em; }
.goat-award-copy > strong { overflow:hidden; color:#fff9e9; font-size:1.35rem; line-height:1.05; letter-spacing:-.03em; text-overflow:ellipsis; white-space:nowrap; }
.goat-award-copy > small { color:#d9caa6; font-size:.62rem; }
.goat-award-copy > small b { color:#f5d681; }
.goat-award-seal { display:grid; place-items:center; align-content:center; width:74px; height:74px; border:1px solid rgba(255,223,125,.7); border-radius:50%; color:#1c1407; background:radial-gradient(circle at 32% 24%,#fff4a7,#e0a72d 62%,#875515); box-shadow:0 0 0 5px rgba(240,183,49,.12),0 8px 20px rgba(0,0,0,.35); transform:rotate(4deg); }
.goat-award-seal span { font-size:1.2rem; line-height:1; }
.goat-award-seal b { font-size:.6rem; letter-spacing:.08em; }
@keyframes goat-banner-in { from { opacity:0; transform:translateY(-10px) scale(.985); } to { opacity:1; transform:none; } }

.goat-club-overlay { z-index:545; }
.goat-club-panel { width:min(780px,100%); }
.goat-club-header { background:linear-gradient(135deg,#fffaf0,#fff1bd); }
.goat-club-content { min-height:0; overflow-y:auto; padding:18px 22px 40px; overscroll-behavior:contain; }
.goat-club-hero { position:relative; display:grid; grid-template-columns:270px minmax(0,1fr); align-items:center; gap:18px; min-height:198px; padding:18px; overflow:hidden; border:1px solid rgba(215,167,44,.58); border-radius:22px; color:#fff7d5; background:radial-gradient(circle at 15% 20%,rgba(247,211,103,.18),transparent 28%),linear-gradient(125deg,#120f09,#38250a 60%,#171006); box-shadow:0 20px 48px rgba(55,35,4,.2); }
.goat-club-hero::after { content:"♛"; position:absolute; right:-8px; bottom:-30px; color:rgba(255,225,122,.09); font-size:11rem; line-height:1; transform:rotate(8deg); }
.goat-club-hero img { position:relative; z-index:1; width:100%; max-height:154px; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.48)); }
.goat-club-hero div { position:relative; z-index:1; display:grid; gap:7px; }
.goat-club-hero span,.goat-section-heading span,.goat-current-race span { color:#d9a82d; font-size:.58rem; font-weight:950; letter-spacing:.15em; }
.goat-club-hero strong { color:#fff9e8; font-size:1.2rem; line-height:1.18; letter-spacing:-.025em; }
.goat-club-hero small { color:#d9c99e; font-size:.65rem; line-height:1.45; }
.goat-current-holder { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin-top:15px; padding:13px 16px; border:1px solid rgba(215,167,44,.5); border-radius:16px; background:linear-gradient(135deg,#181108,#3a2709); box-shadow:0 12px 26px rgba(54,35,4,.14); }
.goat-current-holder > span { color:#e0b848; font-size:.52rem; font-weight:950; letter-spacing:.13em; }
.goat-current-holder > strong { color:#fff8de; font-size:.83rem; }
.goat-current-holder > small { color:#d9c99e; font-size:.57rem; text-align:right; }
.goat-current-race { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:15px 0; padding:15px 17px; border:1px solid #e2cf95; border-radius:17px; background:linear-gradient(135deg,#fffdf5,#fff4cc); }
.goat-current-race > div { display:grid; gap:3px; }
.goat-current-race > div:last-child { text-align:right; }
.goat-current-race strong,.goat-current-race b { color:#2a1d08; font-size:.88rem; }
.goat-current-race small { color:#806a3c; font-size:.6rem; }
.goat-win-card,.goat-team-history { margin-top:15px; padding:18px; border:1px solid var(--line); border-radius:19px; background:var(--surface-soft); }
.goat-section-heading { display:grid; gap:4px; margin-bottom:10px; }
.goat-section-heading h3 { margin:0; color:var(--ink); font-size:1rem; letter-spacing:-.02em; }
.goat-win-card > p { margin:0 0 14px; color:var(--text); font-size:.69rem; line-height:1.55; }
.goat-score-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.goat-score-grid article { display:grid; gap:4px; min-width:0; padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.goat-score-grid article span { color:#a47518; font-size:.52rem; font-weight:950; letter-spacing:.12em; }
.goat-score-grid article strong { color:var(--ink); font-size:.68rem; line-height:1.25; }
.goat-score-grid article small { color:var(--muted); font-size:.57rem; line-height:1.4; }
.goat-team-history-list { display:grid; gap:9px; }
.goat-team-history-list > p { margin:0; padding:18px; border:1px dashed var(--line); border-radius:13px; color:var(--muted); text-align:center; font-size:.64rem; }
.goat-team-history-list article { display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.goat-team-history-list article > span { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#342205; background:linear-gradient(145deg,#fff3a5,#d7a72c); box-shadow:0 7px 16px rgba(156,101,20,.18); }
.goat-team-history-list article div { display:grid; gap:2px; min-width:0; }
.goat-team-history-list article strong { overflow:hidden; color:var(--ink); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.goat-team-history-list article small { color:var(--muted); font-size:.57rem; }
.goat-team-history-list article > b { padding:5px 7px; border-radius:999px; color:#6d4808; background:#fff0b4; font-size:.48rem; letter-spacing:.08em; }
.goat-theme-card { border-color:rgba(215,167,44,.62)!important; background:linear-gradient(135deg,var(--surface-raised),color-mix(in srgb,#f4cf5b 14%,var(--surface-raised)))!important; }

.goat-status-overlay { position:fixed; inset:0; z-index:720; display:grid; place-items:center; padding:22px; background:rgba(9,6,2,.68); opacity:0; backdrop-filter:blur(10px); transition:opacity .22s ease; }
.goat-status-overlay[hidden] { display:none; }
.goat-status-overlay.open { opacity:1; }
.goat-status-dialog { position:relative; isolation:isolate; display:grid; justify-items:center; width:min(500px,100%); padding:30px 30px 26px; overflow:hidden; border:1px solid rgba(255,226,130,.65); border-radius:28px; color:#fff8dc; background:radial-gradient(circle at 50% 15%,rgba(255,218,91,.23),transparent 34%),linear-gradient(145deg,#151006,#3a2608 58%,#120d05); box-shadow:0 34px 90px rgba(0,0,0,.48),inset 0 1px rgba(255,246,199,.26); text-align:center; outline:none; transform:translateY(18px) scale(.97); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.goat-status-overlay.open .goat-status-dialog { transform:none; }
.goat-status-rays { position:absolute; z-index:-1; width:520px; height:520px; top:-250px; border-radius:50%; opacity:.2; background:repeating-conic-gradient(from 0deg,#f7d866 0 9deg,transparent 9deg 18deg); animation:goat-status-spin 18s linear infinite; }
.goat-status-dialog > img { width:150px; height:174px; object-fit:contain; filter:drop-shadow(0 14px 18px rgba(0,0,0,.5)); }
.goat-status-dialog > span { margin-top:4px; color:#eac254; font-size:.58rem; font-weight:950; letter-spacing:.17em; }
.goat-status-dialog h2 { margin:8px 0 6px; color:#fff9e7; font-size:1.72rem; letter-spacing:-.045em; }
.goat-status-dialog p { max-width:380px; margin:0; color:#d9c99e; font-size:.72rem; line-height:1.55; }
.goat-status-dialog button { min-height:44px; margin-top:20px; padding:0 20px; border:1px solid #f4d579; border-radius:13px; color:#271905; background:linear-gradient(135deg,#fff1a1,#d7a72c); box-shadow:0 10px 25px rgba(215,167,44,.25); font-size:.66rem; font-weight:950; }
.goat-status-overlay[data-mode="lost"] .goat-status-dialog { border-color:rgba(214,191,132,.42); background:radial-gradient(circle at 50% 10%,rgba(215,167,44,.11),transparent 30%),linear-gradient(145deg,#17130c,#2b2112 60%,#15110b); }
.goat-status-overlay[data-mode="lost"] .goat-status-rays { opacity:.08; animation:none; }
.goat-status-overlay[data-mode="lost"] .goat-status-dialog > img { filter:grayscale(.35) drop-shadow(0 12px 16px rgba(0,0,0,.45)); opacity:.82; }
@keyframes goat-status-spin { to { transform:rotate(360deg); } }

.goat-admin-overlay { z-index:550; }
.goat-admin-panel { width:min(760px,100%); }
.goat-admin-header { background:linear-gradient(135deg,color-mix(in srgb,#f1c251 18%,var(--surface-soft)),var(--surface-soft)); }
.goat-admin-content { min-height:0; overflow-y:auto; padding:18px 20px 36px; overscroll-behavior:contain; }
.goat-admin-hero { position:relative; display:grid; grid-template-columns:118px minmax(0,1fr); align-items:center; min-height:154px; margin-bottom:16px; padding:10px 20px 10px 8px; overflow:hidden; border:1px solid rgba(196,145,34,.45); border-radius:20px; color:#fff6d8; background:linear-gradient(120deg,#17130d,#3b2910 55%,#1a140c); box-shadow:0 16px 34px rgba(65,43,5,.16); }
.goat-admin-hero::after { content:"♛"; position:absolute; right:18px; top:4px; color:rgba(255,222,119,.11); font-size:7rem; line-height:1; transform:rotate(8deg); }
.goat-admin-hero img { z-index:1; width:108px; height:138px; object-fit:contain; filter:drop-shadow(0 10px 12px rgba(0,0,0,.48)); }
.goat-admin-hero div { z-index:1; display:grid; gap:5px; }
.goat-admin-hero span { color:#f2c65a; font-size:.55rem; font-weight:950; letter-spacing:.14em; }
.goat-admin-hero strong { max-width:430px; color:#fff9e7; font-size:1.08rem; line-height:1.25; }
.goat-admin-hero small { color:#d9c9a3; font-size:.62rem; }
.goat-admin-form { display:grid; gap:13px; margin-bottom:22px; padding:16px; border:1px solid var(--line); border-radius:18px; background:var(--surface-soft); }
.goat-admin-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:12px; }
.goat-admin-form label { display:grid; gap:6px; color:var(--muted); font-size:.58rem; font-weight:850; }
.goat-admin-form input { width:100%; min-width:0; height:42px; padding:0 11px; border:1px solid var(--line); border-radius:11px; color:var(--ink); background:var(--card); font:800 .7rem/1 Arial,sans-serif; outline:none; }
.goat-admin-form input:focus { border-color:#c9982f; box-shadow:0 0 0 3px rgba(218,168,55,.17); }
.goat-admin-form label > small { color:var(--muted); font-size:.54rem; font-weight:600; line-height:1.45; }
.goat-code-editor { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.goat-code-editor button,.goat-save-button { min-height:42px; border:1px solid #b77c13; border-radius:11px; color:#241804; background:linear-gradient(135deg,#ffe38a,#dba72f); font-size:.62rem; font-weight:950; }
.goat-code-editor button { padding:0 14px; }
.goat-save-button { justify-self:start; padding:0 18px; }
.goat-code-editor button:hover,.goat-save-button:hover { filter:brightness(1.04); transform:translateY(-1px); }
.goat-history-section { display:grid; gap:10px; }
.goat-award-history { display:grid; gap:9px; }
.goat-award-history > p { margin:0; padding:18px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); text-align:center; font-size:.64rem; }
.goat-history-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; align-items:center; padding:12px 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-soft); }
.goat-history-item > div { display:grid; gap:3px; }
.goat-history-item strong { color:var(--ink); font-size:.7rem; }
.goat-history-item small { color:var(--muted); font-size:.56rem; }
.goat-history-item button { grid-column:2; grid-row:1 / 3; min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:9px; color:var(--blue-strong); background:var(--card); font-size:.56rem; font-weight:900; }
.goat-claim-pill { display:inline-flex; width:max-content; margin-left:6px; padding:3px 6px; border-radius:999px; color:#7a5310; background:#fff1be; font-size:.46rem; font-weight:950; text-transform:uppercase; }
.goat-claim-pill.claimed { color:#08724d; background:#d8f6e8; }
.goat-admin-footer { justify-content:flex-start; }

@media (max-width:640px) {
  .birthday-theme-banner { grid-template-columns:auto minmax(0,1fr); width:calc(100% - 24px); margin:-4px auto 16px; padding:12px; border-radius:18px; }
  .birthday-theme-banner .birthday-cake { width:48px; height:48px; border-radius:15px; font-size:1.45rem; }
  .birthday-theme-banner strong { font-size:1rem; }
  .birthday-theme-banner p { line-height:1.35; }
  .birthday-balloons { position:absolute; right:8px; top:6px; opacity:.24; font-size:1rem; }
  .theme-code-preview { grid-template-columns:1fr; gap:4px; }
  .theme-code-preview output { text-align:left; }
  .bad-code-overlay { padding:14px; }
  .bad-code-dialog { padding:24px 18px 20px; border-radius:20px; }
  .goat-award-banner { grid-template-columns:72px minmax(0,1fr); gap:10px; width:calc(100% - 24px); min-height:108px; margin:-4px auto 16px; padding:10px 12px 10px 7px; border-radius:18px; }
  .goat-award-banner > img { width:70px; height:88px; }
  .goat-award-copy > strong { font-size:1rem; white-space:normal; }
  .goat-award-copy > small { line-height:1.35; }
  .goat-award-seal { position:absolute; right:8px; top:8px; width:44px; height:44px; opacity:.2; }
  .goat-award-seal span { font-size:.8rem; }
  .goat-award-seal b { font-size:.42rem; }
  .goat-admin-content { padding:14px 12px 100px; }
  .goat-admin-hero { grid-template-columns:90px minmax(0,1fr); min-height:132px; padding:8px 12px 8px 4px; }
  .goat-admin-hero img { width:84px; height:112px; }
  .goat-admin-hero strong { font-size:.88rem; }
  .goat-admin-grid { grid-template-columns:1fr; }
  .goat-code-editor { grid-template-columns:1fr; }
  .goat-code-editor button,.goat-save-button { width:100%; }
  .goat-club-content { padding:13px 12px 92px; }
  .goat-club-hero { grid-template-columns:1fr; min-height:240px; padding:14px; text-align:center; }
  .goat-club-hero img { width:min(300px,100%); max-height:128px; margin:auto; }
  .goat-club-hero strong { font-size:1rem; }
  .goat-current-race { align-items:flex-start; }
  .goat-current-holder { grid-template-columns:1fr; gap:4px; text-align:center; }
  .goat-current-holder > small { text-align:center; }
  .goat-score-grid { grid-template-columns:1fr; }
  .goat-team-history-list article { grid-template-columns:38px minmax(0,1fr); }
  .goat-team-history-list article > b { grid-column:2; width:max-content; }
  .goat-status-dialog { padding:24px 18px 22px; border-radius:22px; }
  .goat-status-dialog > img { width:122px; height:142px; }
  .goat-status-dialog h2 { font-size:1.35rem; }
}

@media (prefers-reduced-motion:reduce) { .goat-status-rays { animation:none; } }