/* LET'S HANG — app layer.
   design.css is the design system (tokens + core components) and is loaded first.
   This file only adds what the app needs on top of it, using the same tokens. */

@font-face { font-family: 'Bangers'; src: url('/fonts/bangers.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('/fonts/nunito-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('/fonts/nunito-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('/fonts/nunito-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('/fonts/nunito-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('/fonts/nunito-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --nav-h: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --dim: rgba(255, 255, 255, .68);
  --glow-cyan: 0 0 10px rgba(0,234,255,.8), 0 0 28px rgba(0,234,255,.45);
  --glow-pink: 0 0 10px rgba(255,22,199,.85), 0 0 30px rgba(255,22,199,.45);
  --glow-yellow: 0 0 10px rgba(255,212,0,.8), 0 0 26px rgba(255,122,0,.35);
  --glow-purple: 0 0 10px rgba(139,0,255,.85), 0 0 30px rgba(139,0,255,.45);
  --glow-green: 0 0 10px rgba(25,245,138,.8), 0 0 26px rgba(25,245,138,.35);
  --glow-blue: 0 0 10px rgba(20,120,255,.8), 0 0 28px rgba(20,120,255,.45);
}

body { font-size: 16px; line-height: 1.45; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1; }
h2 { font-family: var(--display); font-size: 30px; letter-spacing: .02em; }
h3 { font-family: var(--display); font-size: 22px; letter-spacing: .03em; }
a { color: var(--cyan); }

/* ---------- layout ---------- */
.app { display: flex; flex-direction: column; }
main.view { flex: 1; width: 100%; padding: 0 18px 32px; }
main.view .hero { padding: 6px 0 18px; }
main.view .hero-logo { font-size: clamp(60px, 17vw, 120px); }
main.view .dashboard-grid { padding: 4px 0 18px; }
main.view .panel { margin: 0 0 16px; }
main.view .motivation-banner { margin: 4px 0 8px; }
.auth { padding: 0 0 32px; }
.auth .panel { margin: 8px 18px 16px; }

/* gradient text + drop shadow (text-shadow would paint over a clipped gradient) */
.hero-logo .hang { text-shadow: none; filter: drop-shadow(4px 5px 0 #080016) drop-shadow(0 0 18px rgba(0,234,255,.45)); }
.hero { isolation: isolate; }
.hero { overflow: hidden; }
.hero .doodles { position: absolute; left: 0; right: 0; top: -6px; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .9; }

/* ---------- utilities ---------- */
.muted { color: var(--dim); }
.small { font-size: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
.stack-sm > * + * { margin-top: 6px; }
.grow { flex: 1; min-width: 0; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.linkish { appearance: none; border: 0; background: none; color: var(--cyan); font-weight: 800; cursor: pointer; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.empty { text-align: center; padding: 22px 12px; color: var(--dim); font-weight: 700; }
.empty .e { font-size: 42px; }

/* ---------- design-system components used as <button>s ---------- */
button.action-card, button.motivation-banner, .nav-item, .icon-button {
  appearance: none; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
button.action-card { width: 100%; text-align: left; }
button.action-card .action-label { width: 100%; }
button.motivation-banner { width: 100%; text-align: left; color: var(--white); }
.mb-sub { display: block; margin-top: 6px; font-family: var(--body); font-size: 15px; font-weight: 800; text-transform: none; color: var(--cyan); line-height: 1.3; }
.mb-emoji { font-size: 46px; line-height: 1; filter: drop-shadow(0 0 10px rgba(0,234,255,.6)); }
.icon-button svg { width: 22px; height: 22px; }
.icon-button:active { transform: scale(.94); }

/* sign-in doors */
.doors { padding-top: 4px; }
.door { transition: transform .16s ease, opacity .16s ease, filter .16s ease; }
.door[aria-pressed="false"] { opacity: .5; filter: saturate(.6); }
.door[aria-pressed="true"] { transform: translateY(-3px) scale(1.02); }

/* top bar */
.profile-avatar { display: grid; place-items: center; flex: none; font-family: var(--display); font-size: 22px; color: var(--black); }
.greeting { font-size: clamp(22px, 6vw, 30px); }

/* bottom nav as buttons */
.nav-item { position: relative; background: none; border: 0; }
.nav-icon { display: grid; place-items: center; }
.nav-icon svg { width: 26px; height: 26px; }
.nav-item .notification-badge { top: -2px; right: calc(50% - 26px); }
.nav-item.active .nav-icon { filter: drop-shadow(0 0 8px rgba(0,234,255,.8)); }

/* ---------- buttons (extends design.css) ---------- */
.primary-button, .secondary-button, .danger-button, .warm-button, .ghost-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 20px; border-radius: 999px; cursor: pointer;
  font-family: var(--body); font-weight: 900; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.primary-button { box-shadow: 0 0 14px rgba(0,234,255,.5); }
.primary-button.go { background: linear-gradient(90deg, var(--green), var(--cyan)); color: var(--black); box-shadow: 0 0 14px rgba(25,245,138,.55); }
.secondary-button { box-shadow: 0 0 14px rgba(255,22,199,.5); }
.warm-button { border: 0; color: #1a0c00; background: linear-gradient(90deg, var(--yellow), var(--orange)); box-shadow: 0 0 14px rgba(255,170,0,.55); }
.ghost-button { border: 2px solid rgba(255,255,255,.85); color: var(--white); background: rgba(0,0,0,.45); }
.danger-button { box-shadow: 0 0 12px rgba(255,36,79,.45); }
.primary-button:active, .secondary-button:active, .danger-button:active, .warm-button:active, .ghost-button:active { transform: scale(.97); }
.primary-button:disabled, .secondary-button:disabled, .warm-button:disabled, .ghost-button:disabled, .danger-button:disabled { opacity: .45; pointer-events: none; filter: grayscale(.4); }
.block { width: 100%; }
.big { min-height: 60px; font-size: 18px; }
.sm { min-height: 38px; padding: 6px 14px; font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none; cursor: pointer; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35); background: rgba(0,0,0,.5); color: var(--white);
  font-weight: 800; font-size: 14px;
}
.chip[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-cyan); background: rgba(0,234,255,.08); }
.chips.seg { display: grid; grid-template-columns: repeat(3, 1fr); }
.chips.seg .chip { padding: 0 6px; min-height: 50px; font-size: 13px; line-height: 1.15; }

/* ---------- forms (extends .field) ---------- */
label.fld { display: block; }
label.fld > span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.field { font-size: 17px; }
.field::placeholder { color: rgba(255,255,255,.4); }
textarea.field { min-height: 96px; resize: vertical; }
select.field { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cyan) 50%), linear-gradient(135deg, var(--cyan) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--dim); cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--cyan); flex: none; }
.form-error { min-height: 1em; color: #ff5c8a; font-weight: 800; }
fieldset { border: 0; padding: 0; margin: 0; }
fieldset > span { font-size: 13px !important; font-weight: 900 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
details summary { font-weight: 800; cursor: pointer; }

/* ---------- panels ---------- */
.panel h2 { color: var(--white); }
.panel.flat { border: 2px dashed rgba(255,255,255,.25); box-shadow: none; background: rgba(0,0,0,.4); }
.panel.empty { text-align: center; }

.section-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 26px 2px 12px; }
.section-title h2 {
  font-size: 32px; text-transform: uppercase; color: var(--cyan);
  text-shadow: 2px 3px 0 #05000c, 0 0 12px rgba(0,234,255,.7);
}
.section-title:nth-of-type(4n+1) h2 { color: var(--pink); text-shadow: 2px 3px 0 #05000c, 0 0 12px rgba(255,22,199,.7); }
.section-title:nth-of-type(4n+2) h2 { color: var(--yellow); text-shadow: 2px 3px 0 #05000c, 0 0 12px rgba(255,212,0,.7); }
.section-title:nth-of-type(4n+3) h2 { color: var(--green); text-shadow: 2px 3px 0 #05000c, 0 0 12px rgba(25,245,138,.7); }
.section-title .muted.small { font-size: 12px; font-weight: 800; text-align: right; }

.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--display); font-size: 19px; color: var(--black); border: 3px solid var(--white);
}
.avatar.lg { width: 58px; height: 58px; font-size: 25px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase;
  border: 2px solid rgba(255,255,255,.35); color: var(--white);
}
.pill.in { border-color: var(--green); color: var(--green); box-shadow: var(--glow-green); }
.pill.out { color: var(--dim); }
.pill.wait { border-color: var(--yellow); color: var(--yellow); box-shadow: var(--glow-yellow); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pulse { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.7); opacity: .35 } }

/* ---------- check-in picker ---------- */
.house-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.house-opt {
  appearance: none; cursor: pointer; text-align: left; color: var(--white);
  border: 3px solid var(--house, var(--cyan)); border-radius: var(--radius-md); background: rgba(7,0,20,.78);
  padding: 12px; min-height: 110px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.house-opt .em { font-size: 34px; line-height: 1; }
.house-opt strong { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .03em; line-height: 1; }
.house-opt small { font-size: 12px; font-weight: 700; color: var(--dim); }
.house-opt[aria-pressed="true"] { transform: scale(1.04); box-shadow: 0 0 12px var(--house, var(--cyan)), 0 0 30px var(--house, var(--cyan)); }

/* ---------- pickup heads-up banner ---------- */
.alert-banner {
  display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; margin-bottom: 14px;
  border: 3px solid var(--yellow); border-radius: var(--radius-lg); background: rgba(0,0,0,.7); box-shadow: var(--glow-yellow);
  animation: shake 2.6s ease-in-out infinite;
}
@keyframes shake { 0%,86%,100% { transform: rotate(0) } 89% { transform: rotate(-1.2deg) } 93% { transform: rotate(1.2deg) } 96% { transform: rotate(-.6deg) } }
.alert-banner .big-emoji { font-size: 40px; line-height: 1; animation: drive 1.1s ease-in-out infinite alternate; }
@keyframes drive { from { transform: translateX(-3px) } to { transform: translateX(4px) } }
.alert-banner h3 { font-size: 26px; text-transform: uppercase; color: var(--yellow); }
.alert-banner p { font-weight: 700; }

/* ---------- kids / board ---------- */
.kid-card h3 { font-size: 26px; }
.kid-card .meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--dim); margin-top: 6px; }
.kid-card .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.kid-card .actions > * { padding: 10px 8px; white-space: nowrap; }

.board-house + .board-house { margin-top: 0; }
.board-house .house-head { display: flex; gap: 12px; align-items: center; }
.board-house .house-head h3 { font-size: 24px; }
.board-house .house-em { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; flex: none; border: 3px solid var(--white); }
.board-house .who { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kid-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px;
  border: 2px solid var(--green); color: var(--white); font-weight: 900; font-size: 14px; box-shadow: var(--glow-green);
}
.kid-chip .avatar { width: 28px; height: 28px; font-size: 13px; border-width: 2px; }
.kid-chip .t { font-weight: 700; font-size: 11px; color: var(--dim); }
.kid-chip.out { border-color: rgba(255,255,255,.3); box-shadow: none; color: var(--dim); }
.count-badge { padding: 4px 12px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 900; text-transform: uppercase; border: 2px solid rgba(255,255,255,.3); color: var(--dim); }
.count-badge.hot { border-color: var(--pink); color: var(--pink); box-shadow: var(--glow-pink); }
.contact-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.contact-links a { padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 900; font-size: 13px; color: var(--white); background: linear-gradient(90deg, var(--blue), var(--cyan)); }

/* ---------- walk weather ---------- */
.wx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.wx {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 3px solid currentColor; border-radius: var(--radius-lg); background: rgba(7,0,20,.78);
}
.wx.am { color: var(--yellow); box-shadow: var(--glow-yellow); }
.wx.pm { color: var(--purple); box-shadow: var(--glow-purple); }
.wx-band { padding: 12px 12px 0; }
.wx-band b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .03em; line-height: .95; text-transform: uppercase; }
.wx-band span { display: block; margin-top: 4px; font-size: 12px; font-weight: 900; color: var(--white); }
.wx-body { padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; color: var(--white); }
.wx-main { display: flex; align-items: center; gap: 6px; }
.wx-emoji { font-size: 34px; line-height: 1; }
.wx-temp { display: block; font-family: var(--display); font-weight: 400; font-size: 46px; line-height: .9; }
.wx-desc { display: block; font-size: 12px; font-weight: 800; line-height: 1.2; color: var(--dim); }
.wx-meta { font-size: 12px; font-weight: 800; color: var(--dim); }
.wx-tip { font-size: 14px; font-weight: 900; line-height: 1.25; border-top: 2px dashed rgba(255,255,255,.2); padding-top: 6px; }
.wx-sub { font-size: 11px; font-weight: 800; color: var(--dim); }
.wx-empty { padding: 12px; font-weight: 700; color: var(--dim); }

.subway { position: relative; display: flex; justify-content: space-between; padding: 16px 6px 14px !important; }
.subway .line { position: absolute; left: 34px; right: 34px; top: 46px; height: 6px; border-radius: 3px; background: linear-gradient(90deg,#ff6a00,#ffd000,#ff2fcf,#00dfff,#19f58a); box-shadow: 0 0 12px rgba(0,234,255,.6); }
.stop { position: relative; z-index: 1; flex: 1; min-width: 0; text-align: center; }
.stop b { display: block; margin-bottom: 8px; font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .03em; }
.stop i { display: block; width: 18px; height: 18px; margin: 0 auto 8px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px var(--black), 0 0 12px rgba(255,255,255,.8); }
.stop span { display: block; font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.walk-note { margin: -6px 4px 0; font-size: 13px; font-weight: 800; color: var(--dim); }

/* ---------- plans ---------- */
.plan-row { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; font-weight: 700; }
.plan-row + .plan-row { border-top: 2px dashed rgba(255,255,255,.15); padding-top: 12px; }
.plan-em { width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 22px; border-radius: 50%; border: 3px solid var(--pink); box-shadow: var(--glow-pink); background: rgba(0,0,0,.5); }
.plan-row:nth-child(2n) .plan-em, .list-row:nth-child(2n) .plan-em { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.kind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kind {
  appearance: none; cursor: pointer; text-align: left; min-height: 104px; padding: 12px;
  display: flex; flex-direction: column; gap: 3px;
  border: 3px solid currentColor; border-radius: var(--radius-md); background: rgba(7,0,20,.78);
  font-family: var(--display); font-size: 20px; letter-spacing: .03em; line-height: 1; text-transform: uppercase;
}
.kind:nth-child(1) { color: var(--purple); } .kind:nth-child(2) { color: var(--yellow); }
.kind:nth-child(3) { color: var(--pink); } .kind:nth-child(4) { color: var(--cyan); }
.kind span { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.kind small { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--dim); }
.kind[aria-pressed="false"] { opacity: .6; }
.kind[aria-pressed="true"] { box-shadow: 0 0 10px currentColor, 0 0 28px currentColor; transform: scale(1.02); }

/* ---------- alerts feed ---------- */
.feed-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 2px dashed rgba(255,255,255,.12); }
.feed-item:last-child { border-bottom: 0; }
.feed-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 21px; border-radius: 14px; border: 2px solid rgba(255,255,255,.35); }
.feed-icon.pickup { border-color: var(--yellow); box-shadow: var(--glow-yellow); }
.feed-icon.checkin { border-color: var(--green); box-shadow: var(--glow-green); }
.feed-icon.checkout { border-color: var(--cyan); box-shadow: var(--glow-cyan); }

/* ---------- chat ---------- */
.chat-wrap { display: flex; flex-direction: column; padding-top: 6px; }
.chat-note { margin: 4px auto 14px; padding: 6px 14px; border-radius: 999px; border: 2px solid rgba(0,234,255,.5); font-size: 12px; font-weight: 800; text-align: center; color: var(--cyan); }
.msgs { display: flex; flex-direction: column; gap: 4px; }
.msg { max-width: 82%; align-self: flex-start; }
.msg .bubble { padding: 10px 15px; border-radius: 20px 20px 20px 6px; border: 2px solid rgba(255,255,255,.3); background: rgba(7,0,20,.85); white-space: pre-wrap; word-wrap: break-word; }
.msg .who { margin: 10px 0 4px 8px; font-size: 13px; font-weight: 900; color: var(--dim); }
.msg.mine { align-self: flex-end; }
.msg.mine .bubble { border: 0; background: linear-gradient(90deg, var(--purple), var(--pink)); border-radius: 20px 20px 6px 20px; box-shadow: 0 0 14px rgba(255,22,199,.45); }
.msg.mine .who { text-align: right; margin-right: 8px; }
.msg.parent .bubble { border-color: var(--cyan); box-shadow: 0 0 10px rgba(0,234,255,.4); }
.msg .time { margin: 3px 10px 0; font-size: 11px; color: rgba(255,255,255,.45); }
.msg.mine .time { text-align: right; }
.composer {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + var(--safe-b)); z-index: 9;
  max-width: 520px; margin: 0 auto; padding: 10px 14px; display: flex; gap: 8px; align-items: flex-end;
  background: linear-gradient(0deg, rgba(2,3,8,.98) 70%, rgba(2,3,8,0));
}
.composer textarea { flex: 1; min-height: 52px; max-height: 120px; border-radius: 26px; resize: none; }
.composer .primary-button { width: 52px; min-height: 52px; padding: 0; flex: none; }
.chat-pad { height: 90px; }

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head h2 { font-size: 30px; text-transform: uppercase; color: var(--yellow); text-shadow: 0 0 10px rgba(255,212,0,.6); }
.cal-head .icon-button { width: 44px; height: 44px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dow { padding: 4px 0; font-size: 12px; font-weight: 900; color: var(--dim); }
.cal-day { appearance: none; position: relative; aspect-ratio: 1; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--white); font-weight: 800; font-size: 15px; }
.cal-day.other { opacity: .3; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--yellow), 0 0 12px rgba(255,212,0,.6); color: var(--yellow); }
.cal-day[aria-pressed="true"] { background: linear-gradient(135deg, var(--purple), var(--pink)); color: var(--white); box-shadow: 0 0 14px rgba(255,22,199,.6); }
.cal-day .marks { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.cal-day .marks i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }
.event-card .when { font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--pink); }
.event-card h3 { font-size: 28px; }
.event-card .rsvp-row { display: flex; gap: 8px; margin-top: 14px; }
.event-card .rsvp-row .chip { flex: 1; padding: 0 6px; }
.event-card .rsvp-row .chip[aria-pressed="true"].going { border-color: var(--green); color: var(--green); box-shadow: var(--glow-green); }
.date-badge { width: 60px; flex: none; text-align: center; border-radius: 16px; border: 3px solid var(--pink); box-shadow: var(--glow-pink); padding: 4px 0; }
.date-badge span { display: block; font-size: 12px; font-weight: 900; text-transform: uppercase; color: var(--pink); }
.date-badge b { display: block; font-family: var(--display); font-weight: 400; font-size: 32px; line-height: 1; }
.fab {
  position: fixed; right: max(18px, calc(50% - 242px)); bottom: calc(var(--nav-h) + var(--safe-b) + 18px); z-index: 9;
  width: 62px; height: 62px; border-radius: 50%; border: 3px solid var(--white); cursor: pointer;
  background: linear-gradient(135deg, var(--purple), var(--pink)); color: var(--white); font-size: 34px; font-weight: 900; line-height: 1;
  box-shadow: var(--glow-pink);
}
.fab:active { transform: scale(.94); }

/* ---------- settings ---------- */
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 2px dashed rgba(255,255,255,.12); }
.list-row:last-child { border-bottom: 0; }
.list-row strong { font-weight: 900; }
.code-box { padding: 10px 12px 6px; border-radius: var(--radius-md); border: 3px solid var(--yellow); box-shadow: var(--glow-yellow); text-align: center; font-family: var(--display); font-size: 40px; letter-spacing: .16em; color: var(--yellow); }
.status-line { display: flex; gap: 8px; align-items: center; }
.sms-row { padding: 10px 0; font-size: 13px; border-bottom: 2px dashed rgba(255,255,255,.12); }
.sms-row:last-child { border-bottom: 0; }

/* ---------- bottom sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.7); animation: fade .15s ease; }
.sheet {
  width: 100%; max-width: 520px; max-height: 92dvh; overflow-y: auto;
  padding: 10px 18px calc(24px + var(--safe-b)); border-radius: 28px 28px 0 0;
  border: 3px solid var(--cyan); border-bottom: 0; background: #07001a; box-shadow: 0 -6px 30px rgba(0,234,255,.35);
  animation: up .26s cubic-bezier(.2,1.2,.4,1);
}
.sheet .grab { width: 50px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: rgba(255,255,255,.3); }
.sheet h2 { margin-bottom: 4px; font-size: 34px; text-transform: uppercase; color: var(--white); text-shadow: 2px 3px 0 #05000c, 0 0 12px rgba(0,234,255,.6); }
@keyframes fade { from { opacity: 0 } }
@keyframes up { from { transform: translateY(80px) } }

/* ---------- toast ---------- */
#toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 14px); z-index: 100;
  transform: translate(-50%, -170%); transition: transform .3s cubic-bezier(.3,1.5,.5,1);
  max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 999px;
  border: 3px solid var(--cyan); background: rgba(2,3,8,.95); color: var(--white); font-weight: 900; box-shadow: var(--glow-cyan);
}
#toast.show { transform: translate(-50%, 0); }
#toast.warn { border-color: var(--yellow); box-shadow: var(--glow-yellow); }

/* ---------- celebration ---------- */
.confetti { position: fixed; inset: 0; z-index: 120; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall var(--d, 1.8s) cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes fall { to { transform: translate(var(--x), 110vh) rotate(var(--r)); opacity: .95; } }

@media (min-width: 640px) {
  .sheet-backdrop { align-items: center; }
  .sheet { border-radius: 28px; border-bottom: 3px solid var(--cyan); }
}

/* ================================================================ v2 components */
.center { text-align: center; }
.center-row { justify-content: center; }
.small-gap { gap: 6px; margin-top: 6px; }
.pad { padding: 0 6px 10px; }
.note { margin: -4px 4px 14px; font-size: 13px; font-weight: 800; color: var(--dim); }
.tiny { display: block; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.5); }
.sub { display: block; font-size: 13px; font-weight: 600; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-h { margin: 18px 4px 10px; font-size: 22px; text-transform: uppercase; color: var(--yellow); }
button.profile-chip { appearance: none; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }

/* avatars (preset neon set — no photos) */
.ava { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 24px; line-height: 1; border: 3px solid var(--c, var(--cyan)); background: rgba(0,0,0,.55); box-shadow: 0 0 10px var(--c, var(--cyan)); }
.ava.sm { width: 34px; height: 34px; font-size: 18px; border-width: 2px; }
.ava.lg { width: 60px; height: 60px; font-size: 32px; }
.ava.xl { width: 112px; height: 112px; font-size: 62px; border-width: 4px; box-shadow: 0 0 16px var(--c), 0 0 40px var(--c); }
.ava.profile-avatar { width: 48px; height: 48px; font-size: 26px; border-color: var(--yellow); box-shadow: 0 0 10px rgba(255,212,0,.8), 0 0 26px rgba(255,122,0,.35); }
.ava-xl-wrap { display: flex; justify-content: center; padding-top: 4px; }
.ava-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ava-pick { appearance: none; background: none; border: 0; padding: 6px; border-radius: 18px; cursor: pointer; display: grid; place-items: center; }
.ava-pick .ava { width: 56px; height: 56px; font-size: 30px; }
.ava-pick[aria-checked="true"] { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 3px var(--white); }

/* sub-screen header */
.subhead { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.subhead h2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: 28px; text-transform: uppercase; overflow: hidden; }
.subhead h2 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* list rows */
.panel.list { padding: 6px 14px; }
.list .row-btn + .row-btn { border-top: 2px dashed rgba(255,255,255,.1); }
.row-btn { appearance: none; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 0; background: none; border: 0; color: var(--white); font: inherit; text-align: left; cursor: pointer; }
.row-btn.static { cursor: default; }
.row-btn .grow { min-width: 0; }
.row-btn b { font-weight: 900; }
.row-actions { display: flex; gap: 6px; flex: none; }
.meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.unread { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; display: grid; place-items: center; background: var(--pink); font-size: 12px; font-weight: 900; box-shadow: var(--glow-pink); }
.unread-row b { color: var(--cyan); }
.dot-new { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: var(--glow-cyan); flex: none; }
.card-badge { position: absolute; top: 10px; right: 10px; }
.feed-icon.type-ready, .feed-icon.type-pickup { border-color: var(--yellow); box-shadow: var(--glow-yellow); }
.feed-icon.type-safety { border-color: var(--pink); box-shadow: var(--glow-pink); }
.feed-icon.type-message, .feed-icon.type-parent_message { border-color: var(--purple); box-shadow: var(--glow-purple); }
.feed-icon.type-checkin, .feed-icon.type-friend_approval { border-color: var(--green); box-shadow: var(--glow-green); }

/* banner tones (extends .motivation-banner) */
.motivation-banner + .motivation-banner, .motivation-banner + .dashboard-grid, .alert-banner + .motivation-banner { margin-top: 12px; }
.motivation-banner.tone-yellow { border-color: var(--yellow); box-shadow: var(--glow-yellow); }
.motivation-banner.tone-yellow .mb-sub { color: var(--yellow); }
.motivation-banner.tone-pink { border-color: var(--pink); box-shadow: var(--glow-pink); }
.motivation-banner.tone-pink .mb-sub { color: var(--pink); }
.motivation-banner.tone-green { border-color: var(--green); box-shadow: var(--glow-green); margin-bottom: 14px; }
.motivation-banner.tone-green .mb-sub { color: var(--green); }
.panel.tone-yellow { border-color: var(--yellow); box-shadow: var(--glow-yellow); }
.panel.tone-pink { border-color: var(--pink); box-shadow: var(--glow-pink); }

/* I'm Ready! */
.ready-button {
  appearance: none; width: 100%; margin: 0 0 14px; padding: 18px 20px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 3px solid var(--green); border-radius: var(--radius-lg); color: var(--black);
  background: linear-gradient(90deg, var(--green), var(--cyan)); box-shadow: var(--glow-green);
  transition: transform .12s ease, filter .12s ease;
}
.ready-button:active { transform: scale(.97); }
.rb-main { font-family: var(--display); font-size: 42px; line-height: 1; letter-spacing: .03em; text-transform: uppercase; }
.rb-sub { font-weight: 900; font-size: 14px; }
.ready-button.sent { background: rgba(0,0,0,.6); color: var(--green); }
.ready-button.sent .rb-main { font-size: 30px; }
.ready-flag { margin-top: 10px; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--green); color: var(--green); font-weight: 900; box-shadow: var(--glow-green); }

/* check-in */
.stay-panel { position: relative; border-color: var(--green) !important; box-shadow: var(--glow-green) !important; }
.stay-panel h2 { margin: 10px 0 4px; font-size: 38px; text-transform: uppercase; color: var(--green); text-shadow: 2px 3px 0 #05000c, 0 0 12px rgba(25,245,138,.6); padding-right: 54px; }
.stay-panel .ghost-button { margin-top: 14px; }
.stay-em { position: absolute; right: 16px; top: 14px; font-size: 46px; transform: rotate(8deg); }
.house-em { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 24px; border-radius: 14px; border: 3px solid var(--house, var(--cyan)); box-shadow: 0 0 10px var(--house, var(--cyan)); }
.house-opt[aria-checked="true"] { transform: scale(1.04); box-shadow: 0 0 12px var(--house, var(--cyan)), 0 0 30px var(--house, var(--cyan)); }

/* friend code */
.code-row { display: flex; gap: 10px; align-items: center; }
.code-row .code-box { flex: 1; font-size: 32px; }
.code-input { text-transform: uppercase; letter-spacing: .1em; font-weight: 900; }

/* chat extras */
.plan-cta {
  appearance: none; width: 100%; margin-bottom: 12px; padding: 14px; cursor: pointer;
  border: 3px solid var(--yellow); border-radius: var(--radius-md); background: rgba(0,0,0,.6); color: var(--white);
  font-family: var(--display); font-size: 24px; letter-spacing: .03em; text-transform: uppercase; box-shadow: var(--glow-yellow);
}
.plan-cta:active { transform: scale(.98); }
.day-sep { margin: 14px auto 6px; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 900; color: var(--dim); border: 1px solid rgba(255,255,255,.2); }
.quick-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.quick-row .chip { flex: none; }
.msg.parent .bubble { border-color: var(--cyan); }

/* onboarding */
.onboarding { padding-top: 20px; }
.ob-top { margin-top: 24px !important; }
.ob-dots { display: flex; gap: 6px; justify-content: center; }
.ob-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.25); }
.ob-dots i.on { background: var(--cyan); box-shadow: var(--glow-cyan); width: 26px; border-radius: 5px; }
.rules { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-weight: 700; }
.rules li::marker { color: var(--pink); }

/* toggles */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font-weight: 800; cursor: pointer; }
.switch-row input { appearance: none; width: 54px; height: 32px; flex: none; border-radius: 16px; border: 2px solid rgba(255,255,255,.4); background: rgba(0,0,0,.5); position: relative; cursor: pointer; transition: background .15s, border-color .15s; }
.switch-row input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); transition: transform .15s; }
.switch-row input:checked { background: var(--green); border-color: var(--green); box-shadow: var(--glow-green); }
.switch-row input:checked::after { transform: translateX(22px); background: var(--black); }

/* plans */
.plan-card.st-declined, .plan-card.st-cancelled { opacity: .55; border-style: dashed; box-shadow: none; }
.plan-card .when { font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--pink); }
.plan-card h3 { font-size: 26px; }
.pill.st-waiting { border-color: var(--yellow); color: var(--yellow); }
.pill.st-approved { border-color: var(--green); color: var(--green); }
.pill.st-declined { border-color: #ff5c8a; color: #ff5c8a; }
.pill.st-cancelled { color: var(--dim); }
.ps { font-size: 11px; font-weight: 900; }
.ps-approved { color: var(--green); } .ps-declined { color: #ff5c8a; } .ps-waiting { color: var(--yellow); }
.approve-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 2px dashed rgba(255,255,255,.12); }
.approve-row .small { flex: 1 1 100%; }
.danger-link { color: #ff5c8a; }
.pair { display: flex; align-items: center; gap: 8px; }
.pair-plus { font-family: var(--display); font-size: 26px; color: var(--yellow); }
.kid-panel h3 { font-size: 26px; }
.kid-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.kid-actions > * { padding: 8px; white-space: nowrap; }

/* games */
.memo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.memo { appearance: none; aspect-ratio: 1; border-radius: 16px; border: 3px solid var(--purple); background: rgba(7,0,20,.85); color: var(--white); font-family: var(--display); font-size: 30px; cursor: pointer; box-shadow: var(--glow-purple); transition: transform .15s; }
.memo.up { border-color: var(--cyan); box-shadow: var(--glow-cyan); transform: rotateY(0) scale(1.03); }
.memo.done { border-color: var(--green); box-shadow: var(--glow-green); opacity: .85; }
.ttt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 320px; margin: 0 auto; width: 100%; }
.ttt { appearance: none; aspect-ratio: 1; border-radius: 18px; border: 3px solid var(--cyan); background: rgba(7,0,20,.85); font-size: 40px; cursor: pointer; box-shadow: var(--glow-cyan); }
.ttt:disabled { cursor: default; }
.wyr { appearance: none; width: 100%; padding: 22px 16px; border-radius: var(--radius-lg); border: 3px solid var(--pink); background: rgba(7,0,20,.85); color: var(--white); font-family: var(--display); font-size: 26px; letter-spacing: .02em; cursor: pointer; box-shadow: var(--glow-pink); }
.wyr.alt { border-color: var(--cyan); box-shadow: var(--glow-cyan); }
.wyr.on { background: rgba(255,255,255,.12); transform: scale(1.02); }
.or { font-family: var(--display); font-size: 26px; color: var(--yellow); }
.idea { font-family: var(--display); font-size: 34px; line-height: 1.05; padding: 18px 6px; text-shadow: 0 0 12px rgba(255,212,0,.5); }
.big-win { font-family: var(--display); font-size: 30px; color: var(--green); text-shadow: 0 0 12px rgba(25,245,138,.7); }

/* loading state on buttons */
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: var(--white); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ghost-button svg, .primary-button svg { width: 20px; height: 20px; flex: none; }

/* ======================================================================
   JAZZ + PERFORMANCE LAYER
   Louder look for kids, built from cheap effects (solid colors, hard 3D
   "sticker" shadows, transforms). Removes blur-heavy effects (blurred glows,
   backdrop blur, CSS/SVG filters) that freeze iPhone browsers.
   ====================================================================== */

/* --- kill the expensive stuff (overrides design.css without editing it) --- */
.bottom-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.action-icon, .mb-emoji, .nav-item.active .nav-icon, .hero-logo .hang { filter: none !important; }
.alert-banner { animation-iteration-count: 3; }
.pulse { animation-iteration-count: 6; }

/* --- the wall: big spray-paint clouds + faint doodles, scrolls with the page (no fixed bg) --- */
.app {
  background-color: #07001a;
  background-image:
    radial-gradient(260px 200px at 8% 140px, rgba(255, 22, 199, .55), transparent 70%),
    radial-gradient(240px 220px at 96% 380px, rgba(0, 234, 255, .45), transparent 70%),
    radial-gradient(280px 220px at 4% 900px, rgba(255, 212, 0, .35), transparent 70%),
    radial-gradient(300px 240px at 98% 1300px, rgba(139, 0, 255, .55), transparent 70%),
    radial-gradient(260px 220px at 10% 1750px, rgba(25, 245, 138, .35), transparent 70%),
    radial-gradient(280px 220px at 92% 2200px, rgba(255, 122, 0, .45), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 50c-11-8-17-14-17-21a8 8 0 0 1 17-3 8 8 0 0 1 17 3c0 7-6 13-17 21z'/%3E%3Cpath d='M170 22l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z'/%3E%3Cpath d='M28 170l5-22 12 12 8-16 8 16 12-12 5 22z'/%3E%3Cpath d='M180 120l-16 28h12l-7 25 20-32h-12l8-21z'/%3E%3Ccircle cx='110' cy='105' r='14'/%3E%3Cpath d='M104 101l4 4m0-4-4 4M114 101l4 4m0-4-4 4M103 112q7 7 14 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 2400px, 100% 2400px, 100% 2400px, 100% 2400px, 100% 2400px, 100% 2400px, 220px 220px;
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat-y, repeat;
}

/* --- hero: stickers around the logo --- */
.hero { padding-top: 14px !important; }
.hero-logo { font-size: clamp(70px, 21vw, 130px) !important; }
.hero-logo .lets { color: #fff; text-shadow: 4px 4px 0 #ff16c7, 7px 7px 0 #000; }
.hero-logo .hang {
  background: linear-gradient(90deg, #ff7a00, #ffd400 25%, #ff16c7 50%, #00eaff 75%, #19f58a) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
  -webkit-text-stroke: 2px #000;
}
.hero-tagline { display: inline-block; padding: 6px 14px; background: #ffd400; color: #120024; text-shadow: none !important; border-radius: 8px; transform: rotate(-2deg); box-shadow: 4px 4px 0 #ff16c7; }
.hero-tagline::after { display: none !important; }
.stk { position: absolute; font-size: 38px; line-height: 1; z-index: 0; pointer-events: none;
  text-shadow: 0 2px 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, -2px 0 0 #fff, 3px 4px 0 rgba(0,0,0,.5); }
.stk.s1 { left: 4%; top: 18px; transform: rotate(-14deg); }
.stk.s2 { right: 5%; top: 30px; transform: rotate(12deg); }
.stk.s3 { left: 2%; top: 150px; transform: rotate(10deg); font-size: 32px; }
.stk.s4 { right: 3%; top: 160px; transform: rotate(-10deg); font-size: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .stk.s1, .stk.s4 { animation: bob 3.2s ease-in-out infinite; }
  .stk.s2 { animation: bob 3.8s ease-in-out infinite reverse; }
}
@keyframes bob { 50% { translate: 0 -7px; } }
.hero .doodles { opacity: .55; }

/* --- action cards: solid-color stickers with chunky 3D edges, tilted --- */
.action-card {
  --dark: color-mix(in srgb, currentColor 45%, #000);
  background:
    radial-gradient(70px 60px at 88% 18%, color-mix(in srgb, currentColor 55%, transparent), transparent 70%),
    radial-gradient(18px 18px at 70% 40%, color-mix(in srgb, currentColor 60%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, currentColor 42%, #12002a) 0%, #12002a 75%) !important;
  border: 4px solid currentColor !important;
  box-shadow: 6px 7px 0 var(--dark), 6px 7px 0 2px #000 !important;
  min-height: 140px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.dashboard-grid .action-card:nth-child(odd) { transform: rotate(-1.6deg); }
.dashboard-grid .action-card:nth-child(even) { transform: rotate(1.4deg); }
.dashboard-grid .action-card:active { transform: translate(4px, 5px) rotate(0); box-shadow: 2px 2px 0 var(--dark) !important; }
.action-icon { font-size: 54px !important; text-shadow: 3px 4px 0 rgba(0,0,0,.45); }
.action-label { font-size: clamp(26px, 7vw, 34px) !important; text-shadow: 3px 3px 0 #000 !important; }
.action-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: currentColor; color: #000; font-size: 22px !important; }
.action-card .action-arrow { color: #000 !important; background: #fff; }
.action-card.plan .action-label, .action-card.games .action-label { color: #fff; }

/* --- section titles: big tags with a rainbow swoosh --- */
.section-title { margin-top: 32px !important; }
.section-title h2 { position: relative; font-size: 38px !important; text-shadow: 3px 3px 0 #000, 5px 5px 0 rgba(0,0,0,.35) !important; transform: rotate(-3deg); padding-bottom: 6px; }
.section-title h2::after {
  content: ''; position: absolute; left: 0; right: -10px; bottom: -4px; height: 8px; border-radius: 6px;
  background: linear-gradient(90deg, #ff16c7, #ffd400, #00eaff, #19f58a);
  transform: rotate(-1deg);
}

/* --- panels: tinted, crisp sticker shadows instead of blurred glows --- */
.panel {
  background: linear-gradient(160deg, rgba(0, 234, 255, .14), rgba(10, 0, 30, .92) 55%) !important;
  border: 3px solid var(--cyan) !important;
  box-shadow: 6px 6px 0 rgba(0, 234, 255, .35) !important;
  border-radius: 24px !important;
}
.panel.tone-yellow { background: linear-gradient(160deg, rgba(255, 212, 0, .2), rgba(10, 0, 30, .92) 55%) !important; border-color: var(--yellow) !important; box-shadow: 6px 6px 0 rgba(255, 212, 0, .4) !important; }
.panel.tone-pink { background: linear-gradient(160deg, rgba(255, 22, 199, .2), rgba(10, 0, 30, .92) 55%) !important; border-color: var(--pink) !important; box-shadow: 6px 6px 0 rgba(255, 22, 199, .4) !important; }
.panel.flat { box-shadow: none !important; border-style: dashed !important; }
.stay-panel { background: linear-gradient(160deg, rgba(25, 245, 138, .25), rgba(10, 0, 30, .92) 60%) !important; box-shadow: 6px 6px 0 rgba(25, 245, 138, .45) !important; }
.plan-card:nth-of-type(odd) { border-color: var(--pink) !important; box-shadow: 6px 6px 0 rgba(255, 22, 199, .4) !important; background: linear-gradient(160deg, rgba(255, 22, 199, .16), rgba(10, 0, 30, .92) 55%) !important; }

/* --- banners --- */
.motivation-banner { border-width: 4px !important; box-shadow: 6px 6px 0 rgba(0, 234, 255, .45) !important; background: linear-gradient(120deg, rgba(0, 234, 255, .22), rgba(10, 0, 30, .9) 60%) !important; border-radius: 24px !important; }
.motivation-banner.tone-yellow { box-shadow: 6px 6px 0 rgba(255, 212, 0, .5) !important; background: linear-gradient(120deg, rgba(255, 212, 0, .25), rgba(10, 0, 30, .9) 60%) !important; }
.motivation-banner.tone-pink { box-shadow: 6px 6px 0 rgba(255, 22, 199, .5) !important; background: linear-gradient(120deg, rgba(255, 22, 199, .25), rgba(10, 0, 30, .9) 60%) !important; }
.motivation-banner.tone-green { box-shadow: 6px 6px 0 rgba(25, 245, 138, .5) !important; background: linear-gradient(120deg, rgba(25, 245, 138, .25), rgba(10, 0, 30, .9) 60%) !important; }
.motivation-copy { font-size: clamp(24px, 6.5vw, 32px) !important; text-shadow: 2px 2px 0 #000; }
.mb-emoji { font-size: 54px !important; transform: rotate(10deg); }
.alert-banner { box-shadow: 6px 6px 0 rgba(255, 212, 0, .5) !important; background: linear-gradient(120deg, rgba(255, 212, 0, .22), rgba(10, 0, 30, .95) 60%) !important; border-width: 4px !important; }

/* --- I'M READY!: big candy button --- */
.ready-button {
  background: linear-gradient(100deg, #19f58a, #00eaff 50%, #8b5cff) !important;
  border: 4px solid #fff !important; border-radius: 28px !important;
  box-shadow: 0 8px 0 #0a6b5a, 0 8px 0 3px #000 !important;
  padding: 20px !important;
}
.ready-button:active { transform: translateY(6px) !important; box-shadow: 0 2px 0 #0a6b5a !important; }
.rb-main { font-size: 50px !important; color: #fff; text-shadow: 3px 3px 0 #000; }
.rb-main::before { content: '🙋 '; }
.rb-sub { color: #06121f; }
.ready-button.sent { background: #12002a !important; border-color: #19f58a !important; box-shadow: 0 6px 0 #0a6b5a !important; }
.ready-button.sent .rb-main { color: #19f58a; }
.ready-button.sent .rb-main::before { content: ''; }
.ready-button.sent .rb-sub { color: #b9ffe0; }

/* --- buttons: chunky 3D press --- */
.primary-button, .secondary-button, .warm-button, .danger-button {
  box-shadow: 0 5px 0 rgba(0,0,0,.55) !important; border: 3px solid rgba(255,255,255,.85) !important;
}
.primary-button:active, .secondary-button:active, .warm-button:active, .danger-button:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 rgba(0,0,0,.55) !important; }
.ghost-button { border-width: 3px !important; box-shadow: 0 4px 0 rgba(0,0,0,.55); }
.ghost-button:active { transform: translateY(3px); box-shadow: none; }
.big { font-size: 20px !important; min-height: 62px !important; }

/* --- top bar --- */
.greeting { text-shadow: 2px 2px 0 #000; }
.greeting strong { color: #ffd400 !important; text-shadow: 3px 3px 0 #ff16c7 !important; font-size: 1.15em; }
.ava { box-shadow: 3px 3px 0 #000 !important; }
.ava.profile-avatar { box-shadow: 3px 3px 0 #ff16c7 !important; }
.ava.xl { box-shadow: 6px 6px 0 #000 !important; }
.icon-button { background: #ff16c7 !important; border: 3px solid #fff !important; box-shadow: 3px 3px 0 #000; }
.icon-button + .icon-button { background: #8b00ff !important; }
.subhead .icon-button { background: #00eaff !important; color: #000; }

/* --- bottom nav: solid, rainbow top edge, candy active tab --- */
.bottom-nav { background: #0b0020 !important; border-top: 0 !important; box-shadow: inset 0 4px 0 #ff16c7, inset 0 8px 0 #ffd400; padding-top: 14px !important; }
.nav-item { border-radius: 16px; font-weight: 900 !important; }
.nav-item.active { background: #00eaff; color: #05000c !important; text-shadow: none !important; box-shadow: 3px 3px 0 #ff16c7; transform: translateY(-4px) rotate(-2deg); }
.nav-item:nth-child(2).active { background: #ff16c7; color: #fff !important; box-shadow: 3px 3px 0 #ffd400; }
.nav-item:nth-child(3).active { background: #ffd400; box-shadow: 3px 3px 0 #8b00ff; }
.nav-item:nth-child(4).active { background: #19f58a; box-shadow: 3px 3px 0 #ff16c7; }
.nav-item:nth-child(5).active { background: #b06bff; color: #fff !important; box-shadow: 3px 3px 0 #00eaff; }

/* --- chat: candy bubbles --- */
.msg .bubble { border-width: 3px !important; box-shadow: 3px 3px 0 rgba(0,0,0,.6); background: #1a0640 !important; }
.msg.mine .bubble { background: linear-gradient(100deg, #ff16c7, #ff7a00) !important; box-shadow: 3px 3px 0 #8b00ff !important; border: 0 !important; }
.msg.parent .bubble { background: #003a52 !important; }
.plan-cta { box-shadow: 5px 5px 0 rgba(255, 212, 0, .5) !important; background: linear-gradient(110deg, rgba(255, 212, 0, .25), #12002a 60%) !important; border-width: 4px !important; }

/* --- misc cheap glows → crisp outlines --- */
.pill.in, .pill.wait, .kid-chip, .count-badge.hot, .unread, .dot-new, .feed-icon, .house-opt[aria-checked="true"], .kind[aria-pressed="true"],
.chip[aria-pressed="true"], .cal-day.today, .cal-day[aria-pressed="true"], .code-box, .memo, .ttt, .wyr, .wyr.alt, .date-badge, .fab, .ready-flag,
.primary-button, .primary-button.go, .secondary-button, .warm-button, .danger-button, .contact-links a, .sheet, #toast, .wx, .wx.am, .wx.pm {
  --glow-off: 1;
}
.pill.in, .pill.wait, .kid-chip, .count-badge.hot, .ready-flag { box-shadow: 2px 2px 0 #000 !important; }
.unread, .dot-new { box-shadow: 0 0 0 2px #000 !important; }
.feed-icon { box-shadow: 3px 3px 0 #000 !important; }
.code-box { box-shadow: 5px 5px 0 #ff16c7 !important; background: #12002a; transform: rotate(-1.5deg); }
.chip[aria-pressed="true"] { background: #00eaff !important; color: #05000c !important; box-shadow: 3px 3px 0 #ff16c7 !important; }
.cal-day.today { box-shadow: inset 0 0 0 3px var(--yellow) !important; }
.cal-day[aria-pressed="true"] { box-shadow: 3px 3px 0 #000 !important; }
.memo, .ttt, .wyr { box-shadow: 4px 4px 0 rgba(0,0,0,.6) !important; }
.memo.up { background: #8b00ff !important; } .memo.done { background: #0b5236 !important; }
.date-badge { box-shadow: 4px 4px 0 #000 !important; background: #12002a; transform: rotate(-5deg); }
.fab { box-shadow: 4px 5px 0 #000 !important; }
.sheet { box-shadow: 0 -6px 0 #ff16c7 !important; }
#toast { box-shadow: 4px 4px 0 #ff16c7 !important; background: #12002a !important; }
.wx { box-shadow: 6px 6px 0 rgba(0,0,0,.6) !important; }
.wx.am { background: linear-gradient(160deg, rgba(255, 212, 0, .25), #12002a 60%) !important; }
.wx.pm { background: linear-gradient(160deg, rgba(139, 0, 255, .35), #12002a 60%) !important; }
.house-opt[aria-checked="true"] { box-shadow: 5px 5px 0 #fff !important; }
.kind[aria-pressed="true"] { box-shadow: 5px 5px 0 #fff !important; }
.subway .line { box-shadow: none !important; height: 10px; border: 2px solid #000; }
.stop i { box-shadow: 0 0 0 3px #000 !important; }
.ava { box-shadow: 3px 3px 0 #000 !important; }
.switch-row input:checked { box-shadow: none !important; }
.primary-button { box-shadow: 0 5px 0 rgba(0,0,0,.55) !important; }

/* --- "My style" picker (works in both themes) --- */
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.style-opt { appearance: none; cursor: pointer; text-align: left; padding: 12px; border-radius: 20px; border: 3px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: inherit; font: inherit; display: flex; flex-direction: column; gap: 4px; }
.style-opt b { font-family: var(--display); font-size: 24px; font-weight: 400; letter-spacing: .03em; }
.style-opt small { font-size: 12px; font-weight: 800; opacity: .75; }
.style-opt .sw { display: flex; gap: 4px; margin-bottom: 4px; }
.style-opt .sw i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); }
.style-opt.on { border-color: #fff; background: rgba(255,255,255,.12); box-shadow: 4px 4px 0 #ff16c7; }
.auth-style .panel { margin-top: 0 !important; }
html[data-theme="pastel"] .style-opt { background: rgba(255,255,255,.75); border: 2px solid #fff; color: var(--p-ink); }
html[data-theme="pastel"] .style-opt b { font-family: var(--serif); font-style: italic; }
html[data-theme="pastel"] .style-opt.on { border-color: var(--p-lav-d); box-shadow: 0 10px 20px -12px rgba(110,70,170,.6); }