:root{
  --navy: #21214f;
  --navy-deep: #14142f;
  --panel: #ece7fb;
  --panel-deep: #d9d0f7;
  --lime: #c6ff4d;
  --lime-deep: #a9e030;
  --violet: #7c6cf0;
  --coral: #ff6b5b;
  --ink: #16162e;
  --paper: #f3f1f8;
  --white: #ffffff;
  --muted: #6c6a8a;
  --radius-outer: 44px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --font-display: 'Anton', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--paper);
  font-family: var(--font-body);
  color: var(--ink);
  min-height:100vh;
}

.page{ max-width: 1100px; margin: 0 auto; padding: 40px 24px 72px; }

.page-head{ text-align:center; margin-bottom: 28px; }
.wordmark{ display:flex; align-items:center; justify-content:center; gap:10px; }
.wordmark-badge{
  width: 34px; height:34px; border-radius: 10px; background: var(--navy);
  color: var(--lime); font-family: var(--font-display); font-size: 15px;
  display:flex; align-items:center; justify-content:center; letter-spacing: 0.5px;
}
.wordmark-text{ font-family: var(--font-display); letter-spacing: 1px; font-size: 20px; color: var(--navy); }
.page-pitch{ font-family: var(--font-mono); font-size: 13px; color: var(--muted); max-width: 480px; margin: 10px auto 0; line-height:1.5; }

.stage{ display:flex; flex-direction:column; align-items:center; }

/* ---------- device frame ---------- */
.device{
  position: relative;
  width: 380px;
  height: 780px;
  background: var(--navy);
  border-radius: var(--radius-outer);
  box-shadow: 0 30px 60px -20px rgba(20,20,47,0.45), 0 0 0 10px var(--navy-deep);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
.statusbar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 26px 4px; color: var(--white); font-family: var(--font-mono);
  font-size: 13px; flex-shrink:0; z-index: 5;
}
.statusbar-icons{ letter-spacing: 2px; font-size: 10px; }

.screen{
  position:absolute; inset:0; top:38px;
  display:none;
  flex-direction:column;
  background: var(--navy);
  color: var(--white);
  overflow-y:auto;
  -ms-overflow-style:none; scrollbar-width:none;
}
.screen::-webkit-scrollbar{ display:none; }
.screen.active{ display:flex; }
.screen-overlay{ z-index: 20; }

/* ---------- welcome ---------- */
.welcome{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 0 30px; }
.welcome-badge{
  width:64px; height:64px; border-radius:18px; background: var(--panel);
  color:var(--navy); font-family:var(--font-display); font-size:24px;
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.welcome-title{ font-family: var(--font-display); font-size: 44px; line-height: 1.05; color: var(--lime); margin: 0 0 16px; }
.welcome-tag{ font-size: 15px; color: #cfcdf0; max-width: 260px; line-height:1.5; }

/* ---------- shared buttons ---------- */
.btn{ font-family: var(--font-body); font-weight:700; font-size:15px; border:none; cursor:pointer; border-radius: var(--radius-pill); padding: 15px 20px; transition: transform .12s ease; }
.btn:active{ transform: scale(0.97); }
.btn-block{ width: calc(100% - 48px); margin: 0 24px 24px; display:block; }
.btn-primary{ background: var(--lime); color: var(--navy-deep); }
.btn-secondary{ background: var(--panel); color: var(--navy); }
.btn-ghost{ background: rgba(255,255,255,0.08); color: var(--white); }
.btn-text{ background:transparent; color: var(--muted); font-weight:600; padding: 10px; }
.btn-small{ padding: 10px 18px; font-size: 13px; }
.btn-chip{ display:block; width:100%; margin-bottom:10px; background: var(--panel); color: var(--navy); text-align:center; }
.btn-chip.ghost{ background: transparent; border: 1.5px solid rgba(255,255,255,0.25); color: var(--white); }

/* ---------- top bars ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; padding: 6px 14px 14px; flex-shrink:0; }
.topbar-title{ font-family: var(--font-body); font-weight:700; font-size:16px; }
.icon-btn{ width:36px; height:36px; border-radius:12px; border:none; background: rgba(255,255,255,0.08); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.icon-btn.spacer{ background:transparent; visibility:hidden; }
.icon-btn.small{ width:30px; height:30px; }
.icon-btn svg{ width:18px; height:18px; }

.home-topbar{ padding: 6px 20px 10px; }
.brand-mini{ font-family: var(--font-display); letter-spacing: 0.5px; font-size:14px; color: var(--lime); }

/* ---------- quiz ---------- */
.quiz-progress{ display:flex; gap:6px; padding: 0 24px 18px; }
.quiz-progress span{ height:4px; flex:1; border-radius:2px; background: rgba(255,255,255,0.15); }
.quiz-progress span.done{ background: var(--lime); }
#quiz-body{ padding: 4px 24px 24px; flex:1; display:flex; flex-direction:column; }
.quiz-q{ font-family: var(--font-display); font-size:24px; line-height:1.2; margin: 6px 0 22px; }
.quiz-options{ display:flex; flex-direction:column; gap:10px; margin-bottom: 26px; }
.quiz-option{ text-align:left; background: rgba(255,255,255,0.08); color: var(--white); border: 1.5px solid transparent; border-radius: 16px; padding: 14px 16px; font-size:14px; cursor:pointer; font-family: var(--font-body); }
.quiz-option.selected{ background: rgba(198,255,77,0.15); border-color: var(--lime); color: var(--lime); font-weight:700; }
.quiz-footer{ margin-top:auto; display:flex; gap:10px; }
.quiz-footer .btn{ flex:1; }

/* ---------- home ---------- */
.home-panel{ flex:1; background: var(--panel); color: var(--ink); border-radius: 28px 28px 0 0; padding: 26px 22px 90px; margin-top:6px; }
.home-greeting{ font-size:19px; font-weight:700; margin:0 0 2px; }
.home-gameday{ color: var(--violet); font-weight:800; font-size:16px; margin: 0 0 6px; }
.home-focus{ font-size:14px; color: var(--muted); margin: 0 0 22px; }
.home-focus strong{ color: var(--ink); }

.task-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.task-card{ background: var(--white); border-radius: var(--radius-card); padding: 18px 12px 14px; text-align:center; cursor:pointer; border: none; font-family: var(--font-body); position:relative; }
.task-card .task-icon{ width:52px; height:52px; border-radius: 50%; background: var(--panel-deep); display:flex; align-items:center; justify-content:center; margin: 0 auto 10px; }
.task-card .task-icon svg{ width:24px; height:24px; color: var(--navy); }
.task-card .task-label{ font-size: 13px; font-weight:700; color: var(--ink); line-height:1.3; }
.task-card.done{ opacity: 0.55; }
.task-card.done .task-icon{ background: var(--lime); }
.task-check{ position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; background: var(--lime); display:none; align-items:center; justify-content:center; }
.task-check svg{ width:12px; height:12px; }
.task-card.done .task-check{ display:flex; }

.tabbar{ display:flex; justify-content:space-around; background: var(--white); padding: 10px 6px 16px; flex-shrink:0; border-top: 1px solid #e4e0f5; }
.tab{ background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10px; font-family: var(--font-body); font-weight:600; color: var(--muted); cursor:pointer; }
.tab svg{ width:20px; height:20px; }
.tab.active{ color: var(--violet); }

/* ---------- task detail overlay ---------- */
.task-detail{ padding: 6px 24px 24px; flex:1; display:flex; flex-direction:column; }
.task-detail p{ font-size:14px; line-height:1.6; color: #d8d6f0; }
.breath-circle{ width:140px; height:140px; border-radius:50%; border:3px solid var(--lime); margin: 30px auto; display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size:14px; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ transform:scale(0.85);} 50%{ transform:scale(1.15);} }

/* ---------- generic list rows (journal hub / menu) ---------- */
.menu-list{ padding: 6px 18px 24px; display:flex; flex-direction:column; gap:10px; }
.menu-row{ display:flex; align-items:center; gap:14px; background: rgba(255,255,255,0.06); border:none; border-radius:18px; padding: 14px; text-align:left; cursor:pointer; }
.menu-row-icon{ width:40px; height:40px; border-radius:12px; background: rgba(198,255,77,0.15); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.menu-row-icon svg{ width:20px; height:20px; color: var(--lime); }
.menu-row-text{ display:flex; flex-direction:column; gap:2px; flex:1; }
.menu-row-text strong{ font-size:14px; color: var(--white); }
.menu-row-text small{ font-size:12px; color: #b8b6d6; }
.menu-row-chevron{ color: #8482a8; font-size:18px; }
.resource-row{ background: rgba(255,255,255,0.06); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:4px; }
.resource-row strong{ font-size:14px; }
.resource-row small{ font-size:12px; color:#b8b6d6; }

/* ---------- calendar ---------- */
.cal-wrap{ padding: 6px 20px 24px; }
.cal-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-month{ font-family: var(--font-mono); font-size:14px; font-weight:600; }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; background: rgba(255,255,255,0.06); border-radius:16px; padding:12px; }
.cal-dow{ text-align:center; font-size:10px; color:#a5a3c6; font-family: var(--font-mono); padding-bottom:6px; }
.cal-day{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:10px; font-size:12px; background:transparent; border:none; color:var(--white); cursor:pointer; position:relative; }
.cal-day.blank{ visibility:hidden; cursor:default; }
.cal-day.today{ box-shadow: inset 0 0 0 1.5px var(--lime); }
.cal-day .dot{ width:6px; height:6px; border-radius:50%; margin-top:2px; }
.cal-hint{ text-align:center; font-size:12px; color:#a5a3c6; margin: 10px 0 0; }
.cal-legend{ display:flex; gap:16px; justify-content:center; font-size:12px; margin: 14px 0; color:#d8d6f0; }
.cal-legend .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }
.dot-practice{ background: var(--coral); }
.dot-game{ background: var(--violet); }
.dot-open{ background: #4fd67a; }
.dot-booked{ background: #14142f; border: 1px solid #555; }
.dot-practice-bg{ background: var(--coral) !important; color: var(--white) !important; }
.dot-game-bg{ background: var(--violet) !important; color: var(--white) !important; }
.cal-note{ font-size:12px; color:#a5a3c6; line-height:1.5; margin: 4px 0 18px; }

/* ---------- modal ---------- */
.modal{ position:absolute; inset:0; background: rgba(10,10,26,0.6); display:none; align-items:flex-end; z-index: 40; }
.modal.open{ display:flex; }
.modal-card{ background: var(--navy-deep); width:100%; border-radius: 24px 24px 0 0; padding: 22px 22px 28px; }
.modal-title{ font-family: var(--font-mono); font-size:15px; margin: 0 0 4px; }
.modal-sub{ font-size:12px; color:#a5a3c6; margin: 0 0 16px; }

/* ---------- writing ---------- */
.writing-wrap{ padding: 6px 20px 24px; flex:1; display:flex; flex-direction:column; }
.prompt-pill{ background: var(--violet); color: var(--white); font-size:14px; font-weight:700; padding:16px; border-radius:16px; margin-bottom:14px; text-align:center; }
.writing-area{ background: rgba(255,255,255,0.08); border:none; border-radius:16px; color: var(--white); font-family: var(--font-body); font-size:14px; padding:16px; min-height:220px; resize:none; margin-bottom:14px; }
.writing-area.short{ min-height:100px; }
.writing-area:focus{ outline:2px solid var(--lime); }
.writing-actions{ display:flex; gap:10px; margin-bottom: 8px; }
.writing-actions .btn{ flex:1; }
.writing-saved{ text-align:center; font-size:11px; color: var(--lime); min-height: 14px; }
.entry-list{ padding: 6px 20px 24px; display:flex; flex-direction:column; gap:12px; }
.entry-card{ background: rgba(255,255,255,0.06); border-radius:16px; padding:14px; }
.entry-card .entry-date{ font-family: var(--font-mono); font-size:11px; color: var(--lime); margin-bottom:6px; display:block; }
.entry-card p{ font-size:13px; line-height:1.5; margin:0; color: #d8d6f0; }
.entry-empty{ text-align:center; color:#a5a3c6; font-size:13px; margin-top: 40px; }

/* ---------- symptoms ---------- */
.symptoms-wrap{ padding: 6px 20px 24px; }
.symptoms-q{ font-family: var(--font-display); font-size:20px; margin: 4px 0 16px; }
.emoji-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:8px; margin-bottom:16px; }
.emoji-btn{ font-size:22px; background: rgba(255,255,255,0.08); border:2px solid transparent; border-radius:14px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.emoji-btn.selected{ border-color: var(--lime); background: rgba(198,255,77,0.15); }
.symptoms-hint{ font-size:12px; color:#a5a3c6; margin-top:14px; line-height:1.5; }

/* ---------- community ---------- */
.community-wrap{ padding: 6px 18px 90px; flex:1; }
.community-compose{ background: rgba(255,255,255,0.08); border-radius:16px; padding:12px; margin-bottom:16px; }
.community-compose input[type=text]{ width:100%; background:transparent; border:none; color:var(--white); font-size:14px; padding:6px 4px 10px; font-family: var(--font-body); }
.community-compose-row{ display:flex; align-items:center; justify-content:space-between; }
.anon-toggle{ font-size:12px; color:#c9c7e8; display:flex; align-items:center; gap:6px; }
.community-feed{ display:flex; flex-direction:column; gap:10px; }
.post-card{ background: var(--violet); border-radius:16px; padding:14px; font-size:13px; line-height:1.5; }
.post-card.system{ background: rgba(255,255,255,0.08); }
.post-card .post-author{ font-weight:700; display:block; margin-bottom:2px; }
.post-card .post-time{ font-family: var(--font-mono); font-size:10px; opacity:0.7; display:block; margin-top:6px; }

/* ---------- notifications / lock screen ---------- */
.lock-screen{ text-align:center; padding: 20px 24px 10px; background: radial-gradient(circle at top, #2a2a63, var(--navy-deep)); flex-shrink:0; }
.lock-clock{ font-family: var(--font-display); font-size:52px; margin-top: 6px; }
.lock-date{ font-family: var(--font-mono); font-size:12px; letter-spacing:1px; color:#c9c7e8; margin-bottom: 18px; }
.notif-card{ display:flex; gap:10px; background: rgba(255,255,255,0.9); color: var(--ink); border-radius:16px; padding:12px; text-align:left; margin-bottom:10px; align-items:flex-start; }
.notif-card strong{ font-size:12px; color: var(--violet); display:block; }
.notif-card p{ font-size:13px; margin: 2px 0 0; line-height:1.4; }
.notif-badge{ width:26px; height:26px; border-radius:8px; background: var(--navy); color: var(--lime); font-family: var(--font-display); font-size:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.push-toast{ position:absolute; top: -120px; left:12px; right:12px; background: rgba(20,20,47,0.96); backdrop-filter: blur(6px); border-radius:18px; padding:12px; display:flex; gap:10px; align-items:flex-start; z-index: 60; box-shadow: 0 10px 30px rgba(0,0,0,0.4); transition: top .5s cubic-bezier(.2,.9,.3,1); }
.push-toast.show{ top: 46px; }
.push-toast strong{ font-size:12px; color: var(--lime); display:block; }
.push-toast p{ font-size:12px; margin: 2px 0 0; color: var(--white); line-height:1.4; }

/* ---------- profile ---------- */
.profile-wrap{ padding: 10px 24px 24px; }
.field-label{ font-size:12px; color:#a5a3c6; display:block; margin-bottom:6px; }
.field-input{ width:100%; background: rgba(255,255,255,0.08); border:none; border-radius:14px; color:var(--white); padding:14px; font-size:14px; margin-bottom:22px; font-family: var(--font-body); }
.field-input:focus{ outline:2px solid var(--lime); }

/* ---------- menu search ---------- */
.menu-search{ margin: 0 20px 8px; background: rgba(255,255,255,0.08); border-radius: var(--radius-pill); padding: 12px 16px; display:flex; align-items:center; gap:10px; }
.menu-search svg{ width:16px; height:16px; color:#a5a3c6; flex-shrink:0; }
.menu-search input{ background:transparent; border:none; color:var(--white); font-size:13px; width:100%; font-family: var(--font-body); }
.menu-search-results{ padding: 0 20px 10px; display:flex; flex-direction:column; gap:6px; }
.menu-search-results .result-row{ font-size:12px; color: var(--lime); background: rgba(198,255,77,0.1); padding:8px 12px; border-radius:10px; }

.stage-caption{ font-family: var(--font-mono); font-size:12px; color: var(--muted); max-width: 380px; text-align:center; margin-top: 22px; line-height:1.6; }

@media (max-width: 460px){
  .device{ width: 100%; max-width: 380px; height: 82vh; min-height: 620px; }
  .page{ padding: 24px 14px 48px; }
}

@media (prefers-reduced-motion: reduce){
  .breath-circle{ animation: none; }
  .push-toast{ transition: none; }
}