:root {
  --bg: #090a0b;
  --bg-elevated: #0f1112;
  --panel: #151719;
  --panel-2: #1b1e20;
  --panel-soft: #202326;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .17);
  --text: #f5f4ed;
  --muted: #a3a6a2;
  --subtle: #747976;
  --brand: #f5d74d;
  --brand-deep: #d5b52d;
  --brand-soft: rgba(245, 215, 77, .12);
  --mint: #75d9b7;
  --blue: #75aef2;
  --violet: #ad96ed;
  --danger: #e98779;
  --gold: #e8c36d;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow: 0 28px 80px rgba(0, 0, 0, .35);
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
}

/* Routine library, detail and Ask BananaUp */
.routine-section { margin-top: 34px; }
.routine-section:first-of-type { margin-top: 20px; }
.routine-section .section-kicker { display: block; color: var(--brand); font-size: 10px; font-weight: 850; letter-spacing: .12em; margin-bottom: 5px; }
.routine-section .section-head { align-items: end; }
.routine-section .section-head p { max-width: 700px; }
.routine-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.routine-meta span { color: var(--subtle); border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; font-size: 10px; }
.routine-card.is-locked { border-color: rgba(245,215,77,.24); }
.routine-card.is-done { border-color: rgba(127,224,177,.46); }
.routine-status-count { color: var(--brand); font-size: 18px; font-weight: 800; white-space: nowrap; }
.routine-status-note { display: block; color: var(--subtle); font-size: 11px; margin-top: 8px; }
.routine-lock-badge { display: inline-flex; align-items: center; gap: 4px; color: var(--brand); font-size: 10px; font-weight: 800; white-space: nowrap; }
.routine-lock-badge svg { width: 13px; height: 13px; }
.routine-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.routine-card-actions .toggle { margin-left: auto; }
.routine-search { display: flex; gap: 10px; margin: 16px 0 12px; }
.routine-search input { flex: 1; min-width: 0; }
.routine-filters, .ask-candidates { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }
.filter-chip { border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.025); color: var(--muted); padding: 8px 12px; font-size: 12px; cursor: pointer; }
.filter-chip:hover, .filter-chip.active { border-color: rgba(245,215,77,.6); color: var(--brand); background: rgba(245,215,77,.08); }
.routine-detail { display: grid; gap: 18px; }
.routine-detail-illustration { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: #101213; overflow: hidden; }
.routine-step-visuals { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 8px; }
.routine-step-visuals:has(> img:only-child) { grid-template-columns: minmax(0, 1fr); }
.routine-step-visuals img { display: block; width: 100%; height: 190px; object-fit: contain; background: #b5b6b8; }
.routine-step-arrow { color: var(--brand); font-size: 1.2rem; font-weight: 800; line-height: 1; }
.routine-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.routine-detail-meta > span { border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; color: var(--muted); font-size: 11px; }
.routine-detail h3 { margin: 0 0 8px; font-size: 14px; }
.routine-instructions, .routine-cautions { display: grid; gap: 8px; margin: 0; padding-left: 22px; color: var(--muted); font-size: 13px; line-height: 1.65; }
.routine-cautions { list-style: disc; }
.evidence-note { color: var(--subtle); border-top: 1px solid var(--border); padding-top: 12px; font-size: 11px; }

@media (max-width: 520px) {
  .routine-step-visuals { gap: 4px; padding: 6px; }
  .routine-step-visuals img { height: 145px; }
  .routine-step-arrow { font-size: 1rem; }
}
.ask-banana-card { padding: 20px; }
.ask-banana-card textarea { width: 100%; resize: vertical; }
.ask-banana-card .modal-actions { justify-content: flex-start; margin-top: 12px; }
.ai-quota { color: var(--muted); font-size: 11px; white-space: nowrap; }
.quota-dots { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.quota-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); border: 1px solid var(--border-strong); }
.quota-dot.available { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 8px rgba(245,215,77,.25); }
.onboarding-category-choice { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(255,255,255,.025); }
.onboarding-category-choice strong { display: block; }
.onboarding-routine-group { margin-top: 22px; }
.onboarding-routine-group h2 { font-size: 16px; margin: 0 0 10px; }
.program-card { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 24px; border: 1px solid rgba(245,215,77,.26); border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(245,215,77,.09), rgba(255,255,255,.025)); }
.program-copy { min-width: 0; flex: 1; }
.program-copy h2 { margin-top: 8px; font-size: clamp(22px, 3vw, 30px); }
.program-copy p { color: var(--muted); margin: 10px 0 16px; }
.program-progress { height: 7px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.program-progress span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.program-milestones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.program-milestones span { display: inline-flex; align-items: center; gap: 5px; color: var(--subtle); font-size: 11px; }
.program-milestones span.done { color: var(--mint); }
.program-milestones svg { width: 14px; height: 14px; }
.program-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.program-report { display: grid; gap: 18px; }
.program-report h3 { margin-top: 4px; }

@media (max-width: 760px) {
  .routine-search { flex-direction: column; }
  .routine-search .btn { width: 100%; }
  .routine-section .section-head { align-items: start; }
  .ai-quota { display: block; margin-top: 8px; }
  .program-card { display: grid; align-items: start; gap: 16px; }
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
img, svg { display: block; }
.hidden { display: none !important; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 999; padding: 10px 14px; background: var(--brand); color: #111; border-radius: 8px; font-weight: 800; }
.skip-link:focus { top: 16px; }
.app-root { min-height: 100vh; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 850; letter-spacing: -.04em; font-size: 21px; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; color: #111; background: var(--brand); border-radius: 9px 14px 9px 14px; transform: rotate(-6deg); box-shadow: 0 8px 30px rgba(245,215,77,.16); }
.brand-mark svg { width: 18px; }
.brand-mark img { width:18px;height:18px;display:block; }
.brand-mark-image { background: transparent; border-radius: 0; transform: none; box-shadow: none; }
.brand-mark-image img { width:100%;height:100%;object-fit:cover;border-radius:9px 14px 9px 14px; }
.brand small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; margin-left: 3px; }

.landing { min-height: 100vh; overflow: hidden; position: relative; background: radial-gradient(circle at 77% 18%, rgba(245,215,77,.10), transparent 32%), radial-gradient(circle at 20% 65%, rgba(117,217,183,.055), transparent 34%), var(--bg); }
.landing::before { content: ""; position: absolute; inset: 0; opacity: .32; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 80%); }
.landing-nav { position: relative; z-index: 2; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; }
.nav-action { border: 1px solid var(--border); background: rgba(17,19,20,.72); color: var(--muted); border-radius: 999px; padding: 9px 16px; cursor: pointer; backdrop-filter: blur(14px); }
.nav-action:hover { color: var(--text); border-color: var(--border-strong); }
.hero { position: relative; z-index: 1; width: min(1180px, calc(100% - 40px)); margin: 0 auto; min-height: 760px; padding: 56px 0 80px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .72fr); gap: 72px; align-items: center; }
.hero-copy { position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 12px; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; margin-bottom: 22px; }
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }
h1, h2, h3 { line-height: 1.22; letter-spacing: -.045em; margin: 0; }
.hero h1 { font-size: clamp(42px, 5vw, 62px); font-weight: 830; max-width: 860px; }
html[lang="ja"] .hero h1 { font-size: clamp(40px, 4vw, 54px); letter-spacing: -.035em; }
.hero-ja-segment { display:inline; }
.hero-lead { color: #bbbdb7; font-size: clamp(16px, 1.7vw, 20px); line-height: 1.9; margin: 28px 0 34px; max-width: 760px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.btn { min-height: 48px; padding: 12px 19px; border-radius: 13px; border: 1px solid transparent; display: inline-flex; justify-content: center; align-items: center; gap: 9px; cursor: pointer; font-weight: 750; text-decoration: none; white-space: nowrap; transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--brand); color: #121309; box-shadow: 0 14px 42px rgba(245,215,77,.16); }
.btn-primary:hover { background: #ffe56d; }
.btn-secondary { border-color: var(--border); background: var(--panel); color: var(--text); }
.btn-secondary:hover { border-color: var(--border-strong); background: var(--panel-2); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-danger { border-color: rgba(233,135,121,.3); background: rgba(233,135,121,.08); color: #f1aa9f; }
.btn-block { width: 100%; }
.microcopy { color: var(--subtle); font-size: 12px; margin: 14px 0 0; }
.trust-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; color: var(--muted); font-size: 11px; }
.trust-row span { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; align-items: center; min-width: 0; min-height: 58px; padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); }
.trust-row b { color: var(--muted); font-size: 11px; line-height: 1.35; }
.trust-row svg { width: 16px; color: var(--mint); }

.hero-visual { position: relative; min-height: 520px; display: grid; place-items: center; }
.orb { position: absolute; width: 420px; aspect-ratio: 1; border: 1px solid rgba(245,215,77,.13); border-radius: 50%; box-shadow: inset 0 0 90px rgba(245,215,77,.03), 0 0 120px rgba(245,215,77,.04); }
.orb::before, .orb::after { content: ""; position: absolute; border-radius: inherit; border: 1px solid rgba(255,255,255,.055); }
.orb::before { inset: 42px; }
.orb::after { inset: 92px; }
.preview-phone { position: relative; z-index: 1; width: min(330px, 88vw); padding: 10px; border-radius: 38px; background: linear-gradient(145deg, #34383a, #0e0f10 38%); box-shadow: 0 44px 110px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.12); transform: rotate(3deg); }
.preview-screen { min-height: 510px; border-radius: 30px; overflow: hidden; padding: 26px 20px; background: linear-gradient(180deg, #141719, #0d0f10); border: 1px solid rgba(255,255,255,.05); }
.preview-top { display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:11px; }
.preview-top b { color: var(--text); font-size: 14px; }
.preview-day { margin: 37px 0 18px; }
.preview-day small { color: var(--brand); font-weight: 800; letter-spacing: .1em; }
.preview-day strong { display: block; font-size: 36px; line-height: 1.2; letter-spacing: -.04em; }
.preview-card { margin-top: 10px; padding: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.025); border-radius: 17px; }
.preview-card .line { height: 7px; border-radius: 9px; background: #2b2e30; margin-top: 8px; }
.preview-card .line.brand-line { width: 68%; background: var(--brand); opacity: .72; }
.preview-card-row { display: flex; justify-content: space-between; align-items: center; }
.mini-ring { width: 44px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 5px solid var(--brand); border-left-color: #303335; font-size: 10px; font-weight: 800; }
.float-chip { position: absolute; z-index: 3; padding: 11px 15px; border-radius: 13px; background: rgba(25,28,29,.9); border: 1px solid var(--border-strong); box-shadow: var(--shadow); backdrop-filter: blur(16px); font-size: 12px; color: var(--muted); }
.float-chip b { display:block; color:var(--text); font-size:14px; }
.float-one { left: -18px; top: 142px; }
.float-two { right: -26px; bottom: 105px; }
.landing-section { position: relative; z-index: 1; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 100px 0; border-top: 1px solid var(--border); }
.landing-features { padding-top: 0; border-top: 0; }
.landing-section h2 { font-size: clamp(30px, 4vw, 52px); max-width: 920px; }
.landing-section > p { color:var(--muted); max-width:900px; font-size:17px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:0; }
.feature-card { padding:26px; min-height:230px; border:1px solid var(--border); border-radius:var(--radius-lg); background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); }
.feature-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; color:var(--brand); background:var(--brand-soft); margin-bottom:42px; }
.feature-icon svg { width:21px; }
.feature-card h3 { font-size:20px; }
.feature-card p { color:var(--muted); margin-bottom:0; }
.feature-note { display:block; margin-top:12px; color:var(--subtle); font-size:11px; line-height:1.55; }
.source-note { font-size:12px; color:var(--subtle); }
.btn svg { width:18px; height:18px; flex:none; }
.landing-footer { width:min(1180px, calc(100% - 40px)); margin:0 auto; }
.landing-footer .legal-footer { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px 10px; margin:0; padding:22px 12px max(28px, env(safe-area-inset-bottom)); border-top:1px solid var(--border); color:var(--subtle); font-size:11px; text-align:center; }
.landing-footer .legal-footer-link { padding:3px 0; color:inherit; text-decoration:underline; text-underline-offset:3px; }
.landing-footer .legal-footer-link:hover, .landing-footer .legal-footer-link:focus-visible { color:var(--brand); }
.landing-footer .legal-footer-separator { color:var(--subtle); user-select:none; }
.legal-shell { min-height:100vh; background:radial-gradient(circle at 10% 0, rgba(245,215,77,.06), transparent 35%),var(--bg); }
.legal-header { position:sticky; top:0; }
.legal-main { width:min(920px,calc(100% - 40px)); margin:0 auto; padding:58px 0 80px; }
.legal-page { padding:clamp(24px,5vw,54px); border:1px solid var(--border); border-radius:var(--radius-xl); background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),var(--panel); box-shadow:var(--shadow); }
.legal-page h1 { font-size:clamp(34px,6vw,58px); }
.legal-lead { color:var(--muted); font-size:17px; margin:20px 0 8px; }
.legal-updated { color:var(--subtle); font-size:11px; margin:0; }
.legal-body { margin-top:38px; }
.legal-body section + section { margin-top:30px; padding-top:30px; border-top:1px solid var(--border); }
.legal-body h2 { font-size:19px; margin-bottom:10px; }
.legal-body p { color:var(--muted); margin:0; }
.legal-body a, .contact-form-note a { color:var(--brand); text-underline-offset:3px; }
.operator-facts { display:grid; gap:0; margin:0; }
.operator-facts > div { display:grid; grid-template-columns:minmax(110px,.35fr) minmax(0,1fr); gap:20px; padding:16px 0; border-bottom:1px solid var(--border); }
.operator-facts dt { color:var(--subtle); font-size:12px; }
.operator-facts dd { margin:0; color:var(--text); }
.legal-note { color:var(--subtle) !important; font-size:12px; margin-top:24px !important; }
.legal-page-footer { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:6px 10px; margin-top:42px; padding-top:22px; border-top:1px solid var(--border); color:var(--subtle); font-size:11px; text-align:center; }
.legal-page-footer a { color:inherit; text-underline-offset:3px; }
.legal-page-footer a:hover, .legal-page-footer a:focus-visible { color:var(--brand); }
.legal-home-link { display:flex; width:max-content; margin:24px auto 0; }
.help-page .legal-lead { max-width:760px; }
.help-overview { margin-top:36px; }
.help-overview h2 { margin-bottom:14px; font-size:20px; }
.help-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.help-overview-card { display:grid; gap:10px; min-width:0; padding:18px; border:1px solid var(--border); border-radius:var(--radius-lg); color:var(--text); background:rgba(245,215,77,.06); text-decoration:none; }
.help-overview-card:hover,.help-overview-card:focus-visible { border-color:rgba(245,215,77,.64); background:rgba(245,215,77,.1); }
.help-overview-number { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#111; background:var(--brand); font-weight:850; }
.help-overview-card strong { font-size:15px; }
.help-overview-card > span:last-child { color:var(--muted); font-size:12px; line-height:1.55; }
.help-body { margin-top:40px; }
.help-section + .help-section { margin-top:42px; padding-top:42px; border-top:1px solid var(--border); }
.help-section h2 { margin-bottom:12px; font-size:24px; }
.help-section > p { color:var(--muted); }
.help-step-list { display:grid; gap:12px; margin:18px 0 0; padding:0; list-style:none; counter-reset:help-step; }
.help-step { display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; padding:16px; border:1px solid var(--border); border-radius:var(--radius-md); background:rgba(255,255,255,.02); counter-increment:help-step; }
.help-step::before { content:counter(help-step); display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#111; background:var(--brand); font-weight:850; }
.help-step strong { display:block; font-size:15px; }
.help-step p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.help-path { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin:18px 0; padding:14px; border:1px solid var(--border); border-radius:var(--radius-md); color:var(--muted); background:rgba(255,255,255,.025); font-size:12px; }
.help-path span { padding:6px 9px; border-radius:8px; color:var(--text); background:var(--panel-soft); }
.help-path b { color:var(--brand); }
.help-callout { display:grid; gap:5px; margin-top:18px; padding:16px 18px; border-left:3px solid var(--brand); border-radius:0 var(--radius-md) var(--radius-md) 0; background:rgba(245,215,77,.08); }
.help-callout strong { font-size:13px; }
.help-callout span { color:var(--muted); font-size:13px; line-height:1.7; }
.help-two-column { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.help-card { min-width:0; padding:18px; border:1px solid var(--border); border-radius:var(--radius-md); background:rgba(255,255,255,.02); }
.help-card h3 { font-size:16px; }
.help-card p { margin:9px 0 0; color:var(--muted); font-size:13px; line-height:1.7; }
.help-card .help-note { color:var(--subtle); font-size:11px; }
.help-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:42px; }
.app-help-page { max-width:920px; margin:0 auto; }
.contact-form { margin-top:0; }
.contact-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.contact-form-grid .full { grid-column:1/-1; }
.contact-form textarea { min-height:180px; }
.contact-character-note { display:block; color:var(--subtle); font-size:10px; margin-top:5px; }
.contact-form-note { color:var(--subtle) !important; font-size:11px; margin:22px 0 0 !important; }
.contact-status { padding:11px 13px; border:1px solid var(--border); border-radius:12px; font-size:12px; margin:16px 0 0 !important; }
.contact-status.success { color:var(--mint) !important; border-color:rgba(117,217,183,.35); background:rgba(117,217,183,.06); }
.contact-status.error { color:#f1aa9f !important; border-color:rgba(233,135,121,.35); background:rgba(233,135,121,.06); }
.contact-form > [data-contact-submit] { margin-top:18px; }
.contact-honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.onboarding-shell { min-height:100vh; background:radial-gradient(circle at 0 0, rgba(245,215,77,.055), transparent 38%), var(--bg); }
.onboarding-body { min-height:calc(100vh - 78px); display:grid; grid-template-columns:minmax(260px, .7fr) minmax(0, 1.3fr); }
.onboarding-side { position:sticky; top:78px; height:calc(100vh - 78px); padding:42px clamp(26px,4vw,64px); border-right:1px solid var(--border); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.onboarding-side::after { content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(245,215,77,.11); border-radius:50%; bottom:-130px; left:-100px; }
.progress-list { display:grid; gap:19px; margin:20px 0 auto; position:relative; }
.progress-item { display:flex; align-items:center; gap:13px; color:var(--subtle); font-size:13px; }
.progress-item span { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border); font-size:11px; }
.progress-item.active { color:var(--text); }
.progress-item.active span { background:var(--brand); color:#111; border-color:var(--brand); }
.progress-item.done span { background:var(--brand-soft); color:var(--brand); border-color:rgba(245,215,77,.24); }
.onboarding-side-note { color:var(--subtle); font-size:11px; max-width:300px; }
.onboarding-main { min-height:calc(100vh - 78px); padding:50px clamp(24px,7vw,110px); display:flex; flex-direction:column; }
.onboarding-privacy { display:flex; justify-content:flex-end; margin-top:14px; }
.onboarding-privacy .nav-action { min-height:44px; padding:10px 16px; }
.onboarding-card { width:min(720px,100%); margin:auto; padding:30px 0 70px; }
.onboarding-card.wide { width:min(900px,100%); }
.step-kicker { color:var(--brand); letter-spacing:.14em; font-size:11px; font-weight:850; text-transform:uppercase; margin-bottom:16px; }
.onboarding-card h1 { font-size:clamp(32px,5vw,54px); }
.onboarding-card > .lead { color:var(--muted); font-size:16px; margin:20px 0 34px; max-width:780px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-field { display:grid; gap:8px; }
.birth-fields { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:10px; }
.form-field.full { grid-column:1/-1; }
.form-field label, .fieldset-label { color:#d8d8d2; font-size:13px; font-weight:700; }
.input-wrap { position:relative; }
.input-wrap .unit { position:absolute; right:15px; top:50%; transform:translateY(-50%); color:var(--subtle); font-size:13px; pointer-events:none; }
input, select, textarea { width:100%; color:var(--text); background:var(--panel); border:1px solid var(--border); border-radius:13px; padding:14px 15px; outline:none; transition:border-color .18s, box-shadow .18s; }
input:focus, select:focus, textarea:focus { border-color:rgba(245,215,77,.58); box-shadow:0 0 0 3px rgba(245,215,77,.08); }
input[type=checkbox], input[type=radio] { width:auto; accent-color:var(--brand); }
textarea { min-height:100px; resize:vertical; }
.help-text { color:var(--subtle); font-size:11px; margin:0; }
.measurement-entry-layout { display:grid; grid-template-columns:42px minmax(0,1fr); gap:18px; align-items:stretch; }
.measurement-entry-layout > form { min-width:0; }
.measurement-ruler { position:relative; width:42px; height:var(--ruler-height); color:var(--subtle); }
.measurement-ruler-unit { position:absolute; top:0; left:0; color:var(--brand); font-size:10px; font-weight:800; letter-spacing:.08em; line-height:1; text-transform:uppercase; }
.measurement-ruler-scale { position:absolute; inset:0; }
.measurement-ruler-mark { position:absolute; top:var(--ruler-position); right:0; width:11px; border-top:1px solid rgba(255,255,255,.20); transform:translateY(-50%); }
.measurement-ruler-mark.medium { width:17px; border-color:rgba(255,255,255,.34); }
.measurement-ruler-mark.major { width:25px; border-color:rgba(245,215,77,.72); }
.measurement-ruler-mark b { position:absolute; right:30px; top:50%; transform:translateY(-55%); color:var(--muted); font-size:10px; font-weight:650; line-height:1; }
.measurement-picker { width:min(100%,365px); }
.measurement-picker-display { width:100%; min-height:64px; display:flex; align-items:center; gap:8px; padding:11px 15px; border:1px solid var(--border); border-radius:16px; color:var(--text); background:var(--panel); cursor:pointer; text-align:left; transition:border-color .18s,background .18s,box-shadow .18s; }
.measurement-picker-display:hover, .measurement-picker-display[aria-expanded="true"] { border-color:rgba(245,215,77,.48); background:var(--panel-2); }
.measurement-picker-display:focus-visible { outline:none; border-color:rgba(245,215,77,.72); box-shadow:0 0 0 3px rgba(245,215,77,.10); }
.measurement-picker-value { font-size:28px; font-variant-numeric:tabular-nums; font-weight:820; letter-spacing:-.045em; line-height:1; }
.measurement-picker-unit { color:var(--muted); font-size:14px; }
.measurement-picker-chevron { margin-left:auto; color:var(--brand); font-size:24px; line-height:1; transform:translateY(-2px); transition:transform .18s; }
.measurement-picker-display[aria-expanded="true"] .measurement-picker-chevron { transform:rotate(180deg) translateY(2px); }
.measurement-picker-panel { margin-top:8px; padding:10px 12px 12px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),var(--bg-elevated); box-shadow:0 18px 45px rgba(0,0,0,.24); overflow:hidden; }
.measurement-picker-panel[hidden] { display:none; }
.measurement-wheel-wrap { display:flex; align-items:center; gap:9px; width:min(100%,365px); }
.measurement-wheel-picker { --wheel-row-height:46px; position:relative; display:grid; grid-template-columns:minmax(52px,1fr) 12px minmax(42px,1fr) 12px minmax(42px,1fr); gap:5px; align-items:center; width:min(100%,330px); margin-top:2px; }
.measurement-wheel-picker::before { content:""; position:absolute; z-index:1; left:0; right:0; top:calc(var(--wheel-row-height) * 2); height:var(--wheel-row-height); border-top:1px solid rgba(245,215,77,.48); border-bottom:1px solid rgba(245,215,77,.48); border-radius:12px; background:rgba(245,215,77,.08); pointer-events:none; }
.measurement-wheel-column { position:relative; z-index:2; min-width:0; }
.measurement-wheel-viewport { position:relative; height:calc(var(--wheel-row-height) * 5); overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:none; scroll-snap-type:y mandatory; scroll-behavior:auto; -webkit-overflow-scrolling:touch; mask-image:linear-gradient(to bottom, transparent 0%, #000 27%, #000 73%, transparent 100%); -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 27%, #000 73%, transparent 100%); outline:none; }
.measurement-wheel-viewport::-webkit-scrollbar { display:none; }
.measurement-wheel-list { display:flex; flex-direction:column; padding-block:0; }
.measurement-wheel-spacer { flex:0 0 calc(var(--wheel-row-height) * 2); height:calc(var(--wheel-row-height) * 2); }
.measurement-wheel-option { flex:0 0 var(--wheel-row-height); width:100%; height:var(--wheel-row-height); scroll-snap-align:center; border:0; border-radius:10px; color:var(--subtle); background:transparent; font-size:20px; font-variant-numeric:tabular-nums; font-weight:650; opacity:.34; transform:scale(.9); cursor:pointer; transition:color .12s,opacity .12s,transform .12s; }
.measurement-wheel-option.is-near { color:var(--muted); opacity:.68; transform:scale(.96); }
.measurement-wheel-option.is-selected { position:relative; z-index:4; color:var(--text); font-size:24px; font-weight:820; opacity:1; transform:scale(1); }
.measurement-wheel-viewport:focus-visible { box-shadow:0 0 0 3px rgba(245,215,77,.12); border-radius:12px; }
.measurement-wheel-dot { position:relative; z-index:2; align-self:center; color:var(--text); font-size:24px; font-weight:750; text-align:center; }
.measurement-wheel-unit { color:var(--subtle); font-size:12px; white-space:nowrap; }
.modal-measurement-layout { margin-top:4px; }
.unit-toggle, .segmented { display:inline-flex; padding:4px; border-radius:12px; background:var(--panel); border:1px solid var(--border); }
.unit-toggle button, .segmented button { border:0; padding:8px 13px; border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; font-size:12px; font-weight:700; }
.unit-toggle button.active, .segmented button.active { color:var(--text); background:var(--panel-soft); box-shadow:inset 0 0 0 1px var(--border); }
.onboarding-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:30px; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.choice-card { display:block; width:100%; min-width:0; cursor:pointer; position:relative; }
.choice-card input { position:absolute; width:1px; height:1px; margin:-1px; padding:0; opacity:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); pointer-events:none; white-space:nowrap; border:0; }
.onboarding-routine-group .choice-grid { margin-top:10px; }
.choice-content { display:block; min-width:0; height:100%; position:relative; padding:16px 16px 16px 46px; border:1px solid var(--border); background:var(--panel); border-radius:15px; transition:.18s; }
.choice-content::before { content:""; position:absolute; top:16px; left:16px; width:18px; height:18px; border:1px solid var(--border-strong); border-radius:4px; background:var(--panel-soft); }
.choice-content strong, .choice-content small { display:block; overflow-wrap:anywhere; }
.choice-content strong { line-height:1.45; }
.choice-content small { color:var(--muted); margin-top:3px; line-height:1.55; }
.choice-card input:focus-visible + .choice-content { outline:2px solid var(--brand); outline-offset:2px; }
.choice-card input:checked + .choice-content { border-color:rgba(245,215,77,.54); background:var(--brand-soft); box-shadow:0 0 0 2px rgba(245,215,77,.05); }
.choice-card input:checked + .choice-content::before { border-color:var(--brand); background:var(--brand); }
.choice-card input:checked + .choice-content::after { content:"✓"; position:absolute; top:16px; left:20px; color:#111; font-size:13px; font-weight:850; line-height:18px; }
.adult-confirm-card { display:flex; align-items:flex-start; gap:12px; width:100%; padding:18px; border:1px solid var(--border); border-radius:15px; background:var(--panel); cursor:pointer; transition:border-color .18s,background .18s,box-shadow .18s; }
.adult-confirm-card:has(.adult-confirm-checkbox:checked) { border-color:rgba(245,215,77,.54); background:var(--brand-soft); box-shadow:0 0 0 2px rgba(245,215,77,.05); }
.adult-confirm-checkbox { appearance:auto; -webkit-appearance:auto; flex:0 0 auto; width:20px !important; height:20px; margin:2px 0 0; padding:0; border:0; border-radius:4px; background:transparent; box-shadow:none; }
.adult-confirm-checkbox:focus { border-color:transparent; box-shadow:none; }
.adult-confirm-checkbox:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }
.adult-confirm-content { display:block; min-width:0; }
.adult-confirm-content strong, .adult-confirm-content small { display:block; overflow-wrap:anywhere; }
.adult-confirm-content small { color:var(--muted); margin-top:4px; }

.result-hero { display:grid; grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr); gap:28px; padding:25px; background:linear-gradient(140deg,rgba(245,215,77,.10),rgba(255,255,255,.018)); border:1px solid rgba(245,215,77,.16); border-radius:var(--radius-xl); }
.result-number span { color:var(--muted); font-size:12px; }
.result-number strong { font-size:clamp(44px,7vw,74px); line-height:1; letter-spacing:-.06em; display:block; margin-top:8px; }
.result-graph-title { display:block; color:var(--muted); font-size:13px; font-weight:700; margin-bottom:6px; }
.distribution { min-height:190px; position:relative; display:flex; align-items:center; }
.distribution svg { width:100%; height:auto; overflow:visible; }
.distribution-labels { display:flex; justify-content:space-between; color:var(--subtle); font-size:11px; margin-top:-18px; }
.comparison-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }
.girth-comparison { margin-top:16px; }
.comparison-grid-girth { grid-template-columns:minmax(0,1fr); }
.comparison-card { padding:20px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); }
.comparison-card header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.comparison-card h3 { font-size:17px; }
.data-badge { color:var(--muted); background:var(--panel-soft); border:1px solid var(--border); border-radius:999px; padding:4px 8px; font-size:9px; white-space:nowrap; }
.comparison-metrics { display:grid; grid-template-columns:repeat(2,1fr); margin-top:20px; gap:10px; }
.metric-value { display:block; font-size:22px; font-weight:800; letter-spacing:-.035em; }
.metric-label { display:block; color:var(--subtle); font-size:12px; line-height:1.35; margin-bottom:6px; }
.disclaimer { color:var(--subtle); font-size:10px; line-height:1.65; margin-top:18px; }

.generation { text-align:center; width:min(620px,100%); margin:auto; }
.generation-orbit { width:132px; height:132px; margin:0 auto 34px; position:relative; display:grid; place-items:center; }
.generation-orbit::before, .generation-orbit::after { content:""; position:absolute; inset:0; border:1px solid rgba(245,215,77,.2); border-radius:50%; animation:spin 5s linear infinite; border-top-color:var(--brand); }
.generation-orbit::after { inset:17px; animation-direction:reverse; animation-duration:3s; border-top-color:var(--mint); }
.generation-orbit .brand-mark { transform:none; width:52px; height:52px; border-radius:17px 23px 17px 23px; }
@keyframes spin { to { transform:rotate(360deg); } }
.generation h1 { font-size:clamp(30px,5vw,48px); }
.generation-list { display:grid; gap:10px; text-align:left; margin:32px auto 0; width:min(430px,100%); }
.generation-item { display:flex; gap:11px; align-items:center; padding:11px 13px; color:var(--subtle); }
.generation-item span { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border); font-size:11px; }
.generation-item.complete { color:var(--text); }
.generation-item.complete span { color:#111; background:var(--mint); border-color:var(--mint); }

.paywall-shell { min-height:100vh; display:grid; place-items:center; padding:40px 20px; background:radial-gradient(circle at 50% -10%,rgba(232,195,109,.13),transparent 38%),var(--bg); }
.paywall { width:min(1040px,100%); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(330px,.75fr); gap:50px; align-items:center; }
.paywall-copy h1 { font-size:clamp(36px,5vw,60px); }
.paywall-copy > p { color:var(--muted); font-size:17px; }
.benefit-list { display:grid; gap:16px; margin:32px 0; }
.benefit { display:grid; grid-template-columns:38px 1fr; gap:13px; align-items:start; }
.benefit-icon { width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(232,195,109,.1);color:var(--gold); }
.benefit-icon svg { width:19px; }
.benefit strong { display:block; }
.benefit small { color:var(--muted); }
.pricing-card { padding:24px; border-radius:var(--radius-xl); background:linear-gradient(155deg,#20201d,#121414); border:1px solid rgba(232,195,109,.25); box-shadow:var(--shadow); }
.premium-label { display:inline-flex; align-items:center; gap:7px; color:var(--gold); font-size:11px; font-weight:850; letter-spacing:.12em; }
.price-choice { display:grid; gap:10px; margin:21px 0; }
.price-option { position:relative; cursor:pointer; }
.price-option input { position:absolute; opacity:0; }
.price-option-content { display:flex; justify-content:space-between; align-items:center; padding:15px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.02); }
.price-option input:checked + .price-option-content { border-color:var(--gold); background:rgba(232,195,109,.08); }
.price-option strong { display:block; }
.price-option small { color:var(--muted); }
.price-option small.price-equivalent.is-emphasized { display:block; margin-top:5px; color:var(--gold); font-size:14px; font-weight:800; }
.recommended { display:inline-block; margin-left:4px; color:#111;background:var(--gold);font-size:9px;font-weight:850;border-radius:999px;padding:4px 8px; }
.price-main { font-size:19px;font-weight:850; }
.paywall-links { display:grid; text-align:center; gap:10px; margin-top:12px; }
.text-button { border:0;background:transparent;color:var(--muted);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:4px; }
.free-includes { color:var(--subtle); font-size:10px; line-height:1.7; margin-top:18px; }

.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); background:var(--bg); }
.sidebar { position:sticky; top:0; height:100vh; padding:26px 18px; border-right:1px solid var(--border); background:#0c0e0f; display:flex; flex-direction:column; z-index:20; }
.sidebar .brand { padding:0 10px 30px; }
.side-nav { display:grid; gap:4px; }
.nav-item { border:0; background:transparent; color:var(--muted); display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; cursor:pointer; text-align:left; font-weight:700; font-size:14px; }
.nav-item svg { width:19px; }
.nav-item.active { color:var(--text); background:var(--panel); }
.nav-item.active svg { color:var(--brand); }
.sidebar-foot { margin-top:auto; }
.privacy-status { padding:13px; border:1px solid var(--border); border-radius:13px; background:rgba(255,255,255,.02); }
.privacy-status strong { font-size:11px; display:flex; align-items:center; gap:7px; }
.privacy-status svg { width:16px; flex:0 0 auto; }
.privacy-status p { color:var(--subtle); font-size:9px; margin:5px 0 0; }
.app-main { min-width:0; }
.topbar { height:78px; padding:0 clamp(22px,4vw,56px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:15; background:rgba(9,10,11,.86); backdrop-filter:blur(20px); }
.topbar-title strong { display:block;font-size:15px; }
.topbar-title span { color:var(--subtle);font-size:10px; }
.account-button { border:1px solid var(--border);background:var(--panel);border-radius:999px;padding:7px 12px 7px 8px;display:flex;align-items:center;gap:9px;cursor:pointer;color:var(--muted);max-width:240px; }
.avatar { width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:850; }
.account-button span:last-child { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.site-header { gap:0;display:grid;grid-template-columns:minmax(0,1fr) 217px;width:100%;max-width:100%;overflow:hidden; }
.topbar-brand { display:flex;align-items:center;gap:18px;min-width:0; }
.brand-button { display:inline-flex;min-width:0;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left;text-decoration:none; }
.brand-button .brand { color:var(--text); }
.topbar-actions { display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:0;width:217px; }
.pwa-install-header-button { display:inline-flex;flex:0 0 44px;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:44px;min-width:44px;min-height:52px;padding:4px 1px 3px;border:1px solid rgba(117,174,242,.28);border-radius:16px;color:var(--blue);background:rgba(117,174,242,.08);font-size:9px;font-weight:800;line-height:1.1;white-space:nowrap;cursor:pointer;overflow:hidden; }
@media (display-mode: standalone) { .pwa-install-header-button { display:none!important; } }
.pwa-install-header-icon svg { width:19px;height:19px; }
.pwa-install-header-label { font-size:7px; }
.language-button { display:inline-flex;flex:0 0 52px;align-items:center;justify-content:center;gap:3px;width:52px;min-width:52px;min-height:40px;padding:0 3px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:var(--panel);font-size:14px;white-space:nowrap;cursor:pointer; }
.language-button .active { color:var(--brand);font-weight:850; }
.language-button:hover,.language-button:focus-visible { border-color:var(--border-strong);color:var(--text); }
.site-account-button { display:inline-flex;flex:0 0 112px;width:112px;min-width:112px;max-width:112px;align-items:center;justify-content:center;padding:9px 7px;text-align:center; }
.site-account-button.authenticated { justify-content:center;text-align:center; }
.site-account-label { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.content { width:min(1120px,100%); margin:0 auto; padding:44px clamp(20px,4vw,52px) 48px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:28px; }
.page-head h1 { font-size:clamp(30px,4vw,44px); }
.page-head p { color:var(--muted); margin:7px 0 0; }
.date-label { color:var(--brand);font-size:11px;font-weight:850;letter-spacing:.12em;text-transform:uppercase; }
.hero-dashboard { padding:28px; border:1px solid rgba(245,215,77,.14); background:linear-gradient(130deg,rgba(245,215,77,.08),rgba(255,255,255,.015) 55%); border-radius:var(--radius-xl); display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center; }
.hero-dashboard h2 { font-size:clamp(26px,4vw,42px); }
.hero-dashboard p { color:var(--muted);margin:8px 0 0; }
.premium-milestone { margin-top:18px;padding:22px 24px;border:1px solid rgba(245,215,77,.24);border-radius:var(--radius-lg);background:linear-gradient(120deg,rgba(245,215,77,.10),rgba(245,215,77,.025));display:flex;align-items:center;justify-content:space-between;gap:22px; }
.premium-milestone h2 { margin:8px 0 5px;font-size:21px; }
.premium-milestone p { color:var(--muted); }
.streak { min-width:110px;text-align:center;padding:16px;border-left:1px solid var(--border); }
.streak strong { display:block;font-size:28px;letter-spacing:-.04em; }
.streak span { color:var(--muted);font-size:10px; }
.dashboard-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px; }
.action-card { min-height:186px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);display:flex;flex-direction:column;text-align:left;cursor:pointer;position:relative;overflow:hidden; }
.action-card:hover { border-color:var(--border-strong);background:var(--panel-2); }
.action-card-icon { width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);margin-bottom:auto; }
.action-card-icon svg { width:21px; }
.action-card strong { font-size:18px; }
.action-card small { color:var(--muted); }
.action-card.done::after { content:'完了';position:absolute;right:14px;top:14px;color:#111;background:var(--mint);font-size:9px;font-weight:850;padding:3px 7px;border-radius:999px; }
.section { margin-top:34px; }
.section-head { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px; }
.section-head h2 { font-size:22px; }
.section-head p { color:var(--muted);font-size:12px;margin:0; }
.card { border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);padding:21px; }
.plan-list { display:grid; gap:8px; }
.plan-row { display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:12px;border-radius:13px;background:rgba(255,255,255,.025); }
.plan-check { width:30px;height:30px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;color:var(--subtle); }
.plan-row.done .plan-check { background:var(--mint);color:#102018;border-color:var(--mint); }
.plan-row strong { display:block;font-size:13px; }
.plan-row small { color:var(--subtle);font-size:10px; }
.plan-row .btn { min-height:36px;padding:7px 11px;font-size:11px; }
.insight-card { background:linear-gradient(140deg,rgba(117,217,183,.08),rgba(255,255,255,.015)); border-color:rgba(117,217,183,.16); }
.insight-header { display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px; }
.insight-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px; }
.insight-actions .btn { min-height:34px;padding:7px 11px;font-size:12px; }
.insight-list { display:grid;gap:7px;margin:14px 0 16px;padding-left:20px;color:#c4c8c4; }
.ai-chip { color:var(--mint);font-size:9px;font-weight:850;letter-spacing:.1em;border:1px solid rgba(117,217,183,.2);padding:4px 8px;border-radius:999px; }
.insight-card p { color:#c4c8c4; }
.premium-lock { padding:28px;text-align:center;border:1px dashed rgba(232,195,109,.28);background:rgba(232,195,109,.035);border-radius:var(--radius-lg); }
.premium-lock h3 { font-size:20px; }
.premium-lock p { color:var(--muted); }
.premium-lock .premium-label { justify-content:center; }

.record-layout { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:18px; }
.record-stack { display:grid;gap:14px; }
.record-card { display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:14px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel); }
.record-icon { width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand); }
.record-icon svg { width:23px; }
.record-card h3 { font-size:17px; }
.record-card p { color:var(--muted);font-size:12px;margin:3px 0 0; }
.timeline { display:grid;gap:0; }
.timeline-row { display:grid;grid-template-columns:90px 14px 1fr;gap:13px;min-height:70px; }
.timeline-date { color:var(--subtle);font-size:10px;padding-top:4px; }
.timeline-line { position:relative; }
.timeline-line::before { content:"";position:absolute;top:10px;bottom:-8px;left:6px;width:1px;background:var(--border); }
.timeline-line::after { content:"";position:absolute;top:7px;left:3px;width:7px;height:7px;border-radius:50%;background:var(--brand); }
.timeline-row:last-child .timeline-line::before { display:none; }
.timeline-content strong { display:block;font-size:13px; }
.timeline-content span { color:var(--muted);font-size:11px; }

.stat-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.stat-card { padding:18px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel); }
.stat-card span { color:var(--subtle);font-size:10px; }
.stat-card strong { display:block;font-size:25px;line-height:1.2;margin-top:6px;letter-spacing:-.04em; }
.chart-card { margin-top:15px; }
.chart-head { display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:22px; }
.chart-head h3 { font-size:18px; }
.chart { width:100%;min-height:250px;position:relative; }
.chart svg { width:100%;height:auto; }
.chart-empty { min-height:240px;display:grid;place-items:center;text-align:center;color:var(--muted); }
.chart-empty strong { color:var(--text);display:block; }
.reliability { display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center; }
.score-ring { width:130px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--brand) calc(var(--score)*1%),#292c2e 0); }
.score-ring::after { content:"";position:absolute;inset:9px;border-radius:50%;background:var(--panel); }
.score-ring strong { position:relative;z-index:1;font-size:29px; }
.score-ring strong small { color:var(--subtle);font-size:11px; }
.detail-list { display:grid;gap:8px;margin-top:13px; }
.detail-list span { color:var(--muted);font-size:11px; }
.trend-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.trend-card { padding:18px;border-radius:15px;background:rgba(255,255,255,.025);border:1px solid var(--border); }
.trend-card span { color:var(--subtle);font-size:10px; }
.trend-card strong { display:block;font-size:20px;margin-top:5px; }

.routine-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px; }
.routine-card { padding:19px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);position:relative; }
.routine-card-top { display:flex;justify-content:space-between;align-items:start;gap:12px; }
.routine-card h3 { font-size:17px; }
.routine-card p { color:var(--muted);font-size:12px; }
.routine-category { color:var(--brand);font-size:9px;font-weight:850;letter-spacing:.1em;text-transform:uppercase; }
.toggle { width:44px;height:25px;border-radius:999px;background:#303335;border:0;padding:3px;cursor:pointer;transition:.2s; }
.toggle::after { content:"";display:block;width:19px;height:19px;border-radius:50%;background:#858a87;transition:.2s; }
.toggle.on { background:var(--brand); }
.toggle.on::after { transform:translateX(19px);background:#111; }
.custom-card { border-style:dashed;display:grid;place-items:center;min-height:168px;text-align:center;cursor:pointer; }

.settings-list { display:grid;gap:12px; }
.settings-group { border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);overflow:hidden; }
.settings-group h2 { font-size:13px;padding:17px 19px;border-bottom:1px solid var(--border); }
.setting-row { min-height:68px;padding:13px 19px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--border); }
.setting-row:last-child { border-bottom:0; }
.setting-copy strong { display:block;font-size:13px; }
.setting-copy small { color:var(--subtle);font-size:10px;max-width:650px;display:block; }
.setting-copy .account-id { word-break:break-all; }
.setting-value { color:var(--muted);font-size:11px; }
.app-footer { padding:0 clamp(20px,4vw,52px) 28px; }
.app-legal-footer { display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:20px 12px 0;border-top:1px solid var(--border);color:var(--subtle);font-size:11px;text-align:center; }
.app-legal-footer-link { padding:3px 0;color:inherit;text-decoration:underline;text-underline-offset:3px; }
.app-legal-footer-link:hover,.app-legal-footer-link:focus-visible { color:var(--brand); }
.app-legal-footer-separator { color:var(--subtle);user-select:none; }
.account-delete-link { display:block;margin:18px auto 0;color:var(--danger); }
.legal-consent-choice { display:block;margin-top:14px; }

.bottom-nav { display:none; }
.toast-root { position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:9px; }
.toast { min-width:260px;max-width:390px;padding:13px 16px;border:1px solid var(--border-strong);border-radius:13px;background:#202324;box-shadow:var(--shadow);font-size:12px;animation:toast-in .25s ease; }
.toast.error { border-color:rgba(233,135,121,.36); }
@keyframes toast-in { from { opacity:0;transform:translateY(8px); } }
.modal-backdrop { position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px; }
.modal { width:min(580px,100%);max-height:min(88vh,800px);overflow:auto;border:1px solid var(--border-strong);border-radius:var(--radius-xl);background:#121415;box-shadow:var(--shadow);padding:25px; }
.routine-detail-actions { align-items: center; flex-wrap: wrap; }
.routine-detail-actions a { text-decoration: none; }
.routine-preview-modal .routine-detail { gap: 16px; }
.modal-backdrop-routine-preview-modal { align-items: center; }
.pwa-install-header-button[hidden],.pwa-install-modal[hidden] { display:none!important; }
.pwa-install-modal { z-index:210; }
.pwa-install-dialog { width:min(520px,100%); }
.pwa-install-dialog h2 { margin:0 0 18px;font-size:22px; }
.pwa-install-steps { display:grid;gap:13px;margin:0;padding-left:24px;color:var(--text);font-size:13px;line-height:1.65; }
.pwa-install-inline-icon { width:1em;height:1em;display:inline-block;vertical-align:-.15em; }
.pwa-install-guide { display:inline-block;margin-top:17px;color:var(--brand);font-size:12px;font-weight:750; }
.modal.wide { width:min(780px,100%); }
.modal-head { display:flex;justify-content:space-between;align-items:start;gap:18px;margin-bottom:22px; }
.modal-head.login-modal-head > div { flex:1;text-align:center; }
.modal-head h2 { font-size:25px; }
.modal-head p { color:var(--muted);margin:6px 0 0;font-size:12px; }
.icon-button { width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--panel);display:grid;place-items:center;cursor:pointer;flex:0 0 auto; }
.icon-button svg { width:17px; }
.modal-actions { display:flex;justify-content:flex-end;gap:10px;margin-top:22px; }
.auth-options { display:grid;gap:10px; }
.oauth-button { min-height:52px;border:1px solid var(--border);border-radius:13px;background:var(--panel);display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;font-weight:750; }
.oauth-button:hover { border-color:var(--border-strong); }
.provider-mark { width:27px;height:27px;border-radius:8px;background:#fff;color:#222;display:grid;place-items:center;font-weight:850; }
.provider-mark.line { background:#06c755;color:#fff; }
.email-auth-form { display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border); }
.email-auth-form label { color:var(--muted);font-size:12px; }
.email-auth-form input { width:100%;min-height:48px;border:1px solid var(--border);border-radius:13px;background:var(--panel);padding:0 14px;color:var(--text);font:inherit; }
.email-auth-form input:focus { outline:2px solid rgba(245,215,77,.3);outline-offset:1px;border-color:var(--accent); }
.email-auth-form button:disabled { cursor:not-allowed;opacity:.55; }
.consent-box { padding:15px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.02);color:var(--muted);font-size:11px; }
.login-modal { position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(8px); }
.login-modal-card { position:relative;width:min(100%,520px);max-height:min(88vh,800px);overflow:auto;padding:28px 25px;border:1px solid var(--border-strong);border-radius:var(--radius-xl);background:#121415;box-shadow:var(--shadow);text-align:center; }
.login-modal-card h2 { margin:0 0 18px;font-size:25px; }
.close-login-button { position:absolute;top:16px;right:16px;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--panel);color:var(--muted);display:grid;place-items:center;cursor:pointer; }
.close-login-button svg { width:17px; }
.login-subtitle { margin:0 0 22px;color:var(--text);font-size:12px;line-height:1.7; }
.login-subtitle small,.login-subtitle span { color:var(--muted);font-size:11px; }
.login-subtitle .login-legal-consent { color:var(--text);font-size:12px; }
.login-subtitle .login-legal-consent a { color:var(--brand);text-decoration:underline;text-underline-offset:2px; }
.login-subtitle .login-account-note { color:var(--muted);font-size:11px; }
.login-methods { display:grid;gap:12px; }
.login-modal .oauth-button,.login-modal .email-submit-button { position:relative;display:flex;width:100%;min-height:50px;align-items:center;justify-content:center;gap:11px;border-radius:999px;padding:12px 24px;cursor:pointer;font:inherit;font-weight:750; }
.login-modal .oauth-button { border:1px solid var(--border);background:var(--panel);color:var(--text); }
.login-modal .oauth-button:hover { border-color:var(--border-strong); }
.login-modal .google-button { border-color:rgba(117,174,242,.45); }
.login-modal .line-button { border-color:#06c755;background:#06c755;color:#fff; }
.recommend-label { position:absolute;top:-3px;left:8px;border-radius:5px;padding:2px 8px;background:var(--brand);color:#171717;font-size:9px;font-weight:850;line-height:1; }
.provider-icon { width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:850; }
.google-icon { border:1px solid rgba(117,174,242,.55);color:var(--blue); }
.line-icon { background:#fff;color:#06c755; }
.otp-form { display:grid;gap:10px;margin-top:14px;border-top:1px solid var(--border);padding-top:14px;text-align:left; }
.otp-form label { color:var(--muted);font-size:12px; }
.otp-form input { width:100%;min-height:48px;border:1px solid var(--border);border-radius:999px;background:var(--panel);padding:0 18px;color:var(--text);font:inherit; }
.otp-form input:focus { outline:2px solid rgba(245,215,77,.3);outline-offset:1px;border-color:var(--brand); }
.login-modal .email-submit-button { border:0;background:var(--brand);color:#171717; }
.login-modal .email-submit-button:disabled { cursor:not-allowed;opacity:.55; }
.legal-consent-modal { width:min(520px,100%); }
.legal-consent-sheet header { margin-bottom:16px; }
.legal-consent-sheet h2 { margin:0;font-size:25px; }
.legal-consent-sheet > p { color:var(--muted);font-size:13px;line-height:1.65; }
.legal-consent-links { display:grid;gap:8px;margin-top:18px;font-size:13px; }
.legal-consent-links a { color:var(--brand);text-decoration:underline;text-underline-offset:3px; }
.legal-consent-version { margin:-6px 0 0;color:var(--muted);font-size:12px!important; }
.legal-consent-check { display:flex;align-items:flex-start;gap:9px;margin-top:20px;color:var(--text);font-size:13px;line-height:1.55; }
.legal-consent-check input { flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--brand); }
.sheet-actions { display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px; }
.test-data-page { width:min(1040px,calc(100% - 32px));margin:0 auto;padding:26px 0 80px; }
.test-data-head { display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:52px; }
.test-data-panel { border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(145deg,rgba(245,215,77,.06),var(--panel) 40%);padding:clamp(26px,5vw,54px);box-shadow:var(--shadow); }
.test-data-panel h1 { margin:12px 0 10px;font-size:clamp(34px,6vw,54px); }
.test-data-panel .lead { color:var(--muted);font-size:16px; }
.scenario-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0; }
.scenario-card { min-height:135px;padding:18px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel-2);text-align:left;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;gap:5px; }
.scenario-card:hover,.scenario-card.recommended { border-color:rgba(245,215,77,.45); }
.scenario-card.recommended { color:var(--text);background:var(--panel-2); }
.scenario-card.recommended strong { color:var(--text); }
.scenario-card.recommended span { color:var(--muted); }
.scenario-card strong { font-size:18px; }
.scenario-card span { color:var(--muted);font-size:11px; }
.test-import-row { margin-top:24px;padding-top:22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:18px; }
.test-import-row p { color:var(--muted);font-size:11px;margin:4px 0 0; }
#test-status.success { color:var(--mint); }
.tools-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.tools-category { border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);padding:18px; }
.tools-category h3 { margin:7px 0 12px;font-size:16px; }
.tools-category > p { margin:0;color:var(--muted);font-size:11px; }
.tools-items { display:grid;gap:10px; }
.tools-item { display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;border-top:1px solid var(--border); }
.tools-item strong,.tools-item small { display:block; }
.tools-item small { color:var(--muted);margin-top:3px; }
.pr-label { display:inline-block;color:var(--brand);font-size:8px;font-weight:850;letter-spacing:.1em;margin-bottom:5px; }

.landing-discover { padding-top:18px; }
.landing-discover-head { display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:26px; }
.landing-discover-head h2 { margin:0;font-size:clamp(28px,4vw,44px);line-height:1.12;letter-spacing:-.035em; }
.landing-discover-head p { width:min(480px,100%);margin:0;color:var(--muted);font-size:14px;line-height:1.8; }
.landing-discover-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.landing-discover-card { min-height:300px;padding:24px;border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(145deg,rgba(245,215,77,.07),var(--panel) 42%);color:var(--text);display:flex;flex-direction:column;text-decoration:none;transition:transform .2s ease,border-color .2s ease; }
.landing-discover-card:hover { transform:translateY(-3px);border-color:rgba(245,215,77,.45); }
.landing-discover-card .feature-icon { margin-bottom:auto; }
.landing-discover-card h3 { margin:26px 0 9px;font-size:20px; }
.landing-discover-card p { margin:0 0 20px;color:var(--muted);font-size:13px;line-height:1.7; }
.landing-discover-card strong { display:flex;align-items:center;gap:8px;color:var(--brand);font-size:12px; }
.landing-discover-card strong svg { width:16px; }
.routine-finder-import { padding:22px;border:1px solid rgba(245,215,77,.28);border-radius:var(--radius-xl);background:linear-gradient(145deg,rgba(245,215,77,.07),rgba(255,255,255,.015)); }

@media (max-width: 980px) {
  .hero { grid-template-columns:1fr; padding-top:70px; gap:20px; }
  .hero-visual { margin-top:10px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:auto; }
  .feature-icon { margin-bottom:22px; }
  .landing-discover-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .onboarding-body { grid-template-columns:1fr; }
  .onboarding-side { display:none; }
  .paywall { grid-template-columns:1fr; max-width:700px; }
  .app-shell { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .record-layout { grid-template-columns:1fr; }
  .dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bottom-nav { position:fixed;z-index:30;bottom:0;left:0;right:0;height:calc(68px + env(safe-area-inset-bottom));padding:7px 8px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border);background:rgba(11,13,14,.93);backdrop-filter:blur(22px); }
  .bottom-nav button { border:0;background:transparent;color:var(--subtle);display:grid;place-items:center;align-content:center;gap:2px;font-size:8px;cursor:pointer; }
  .bottom-nav svg { width:20px; }
  .bottom-nav button.active { color:var(--brand); }
  .content { padding-bottom:32px; }
  .app-shell .app-footer { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
}

@media (max-width: 680px) {
  .hero-ja-segment { display:block; }
  .premium-milestone,.test-import-row { align-items:flex-start;flex-direction:column; }
  .scenario-grid { grid-template-columns:1fr; }
  .landing-nav { width:calc(100% - 28px);padding-top:18px; }
  .brand small { display:none; }
  .hero { width:calc(100% - 28px);padding:30px 0 54px;min-height:auto; }
  .hero h1 { font-size:clamp(37px,10vw,45px); }
  .hero-lead { font-size:16px; }
  .cta-row .btn { width:auto; min-height:44px; padding:11px 15px; font-size:14px; }
  .trust-row { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-top:24px; }
  .trust-row span { grid-template-columns:1fr; justify-items:center; gap:5px; min-height:70px; padding:9px 5px; text-align:center; }
  .trust-row b { font-size:10px; }
  .hero-visual { min-height:475px; }
  .preview-phone { transform:rotate(1deg); }
  .float-one { left:-5px; }
  .float-two { right:-4px; }
  .landing-section { width:calc(100% - 28px);padding:70px 0; }
  .landing-features { padding-top:0; }
  .landing-discover { padding-top:12px; }
  .landing-discover-head { align-items:flex-start;flex-direction:column;gap:12px; }
  .landing-discover-grid { grid-template-columns:1fr; }
  .landing-discover-card { min-height:250px; }
  .landing-footer { width:calc(100% - 28px); }
  .legal-main { width:calc(100% - 28px); padding:28px 0 54px; }
  .legal-page { padding:24px 18px 28px; }
  .legal-page h1 { font-size:36px; }
  .legal-lead { font-size:15px; }
  .help-overview-grid,.help-two-column { grid-template-columns:1fr; }
  .help-section h2 { font-size:21px; }
  .help-path { justify-content:flex-start; }
  .contact-form-grid { grid-template-columns:1fr; }
  .contact-form-grid .full { grid-column:auto; }
  .operator-facts > div { grid-template-columns:1fr; gap:4px; }
  .onboarding-main { padding:20px 18px; }
  .onboarding-card { padding:32px 0 60px; }
  .onboarding-card h1 { font-size:36px; }
  .measurement-entry-layout { grid-template-columns:38px minmax(0,1fr); gap:12px; }
  .measurement-ruler { min-height:0; }
  .measurement-ruler-mark b { right:25px; font-size:9px; }
  .measurement-wheel-wrap { width:100%; }
  .measurement-wheel-picker { --wheel-row-height:44px; grid-template-columns:minmax(44px,1fr) 10px minmax(38px,1fr) 10px minmax(38px,1fr); gap:3px; }
  .measurement-wheel-option { font-size:18px; }
  .measurement-wheel-option.is-selected { font-size:22px; }
  .form-grid, .choice-grid, .comparison-grid { grid-template-columns:1fr; }
  .result-hero { grid-template-columns:1fr; }
  .onboarding-actions { align-items:stretch;flex-direction:column-reverse; }
  .onboarding-actions .btn { width:100%; }
  .paywall-shell { align-items:start;padding-top:32px; }
  .paywall-copy h1 { font-size:38px; }
  .pricing-card { padding:19px; }
  .topbar { height:66px;padding:0 12px; }
  .onboarding-body { min-height:calc(100vh - 66px); }
  .onboarding-main { min-height:calc(100vh - 66px); }
  .topbar-title span { display:none; }
  .topbar-title { display:none; }
  .topbar-brand { flex:1 1 auto;gap:0;min-width:0; }
  .topbar-brand .brand { gap:7px;font-size:17px;white-space:nowrap; }
  .topbar-brand .brand-mark { width:28px;height:28px; }
  .topbar-brand .brand > span:nth-child(2) { min-width:0;overflow:hidden;text-overflow:ellipsis; }
  .site-header { position:sticky;width:100%;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr) 217px;gap:0;overflow:hidden; }
  .site-header .topbar-brand { width:auto;max-width:none; }
  .site-header .topbar-actions { position:static;width:217px;transform:none;gap:3px; }
  .site-header .pwa-install-header-button { flex:0 0 44px;width:44px;min-width:44px;min-height:46px;padding:3px 1px 2px;overflow:hidden; }
  .site-header .pwa-install-header-label { font-size:7px; }
  .site-header .language-button { flex:0 0 52px;width:52px;min-width:52px;min-height:36px;padding-inline:3px;gap:2px;font-size:13px; }
  .account-button { padding-right:8px; }
  .account-button span:last-child { display:none; }
  .site-header .account-button span:last-child { display:inline; }
  .site-header .site-account-button { flex:0 0 112px;width:112px;min-width:112px;max-width:112px;min-height:36px;padding:7px 6px; }
  .site-account-label { font-size:12px; }
  .content { padding:28px 15px 32px; }
  .page-head { align-items:start;flex-direction:column; }
  .hero-dashboard { grid-template-columns:1fr;padding:22px; }
  .streak { border-left:0;border-top:1px solid var(--border);text-align:left;display:flex;align-items:center;gap:8px;padding:13px 0 0; }
  .streak strong { font-size:20px; }
  .dashboard-grid { grid-template-columns:1fr; }
  .action-card { min-height:140px; }
  .record-card { grid-template-columns:43px 1fr; }
  .record-card .btn { grid-column:1/-1; }
  .timeline-row { grid-template-columns:66px 12px 1fr; }
  .stat-grid { grid-template-columns:repeat(2,1fr); }
  .stat-card { padding:14px; }
  .stat-card strong { font-size:20px; }
  .reliability { grid-template-columns:1fr; }
  .score-ring { margin:auto; }
  .trend-grid, .routine-grid { grid-template-columns:1fr; }
  .tools-grid { grid-template-columns:1fr; }
  .setting-row { align-items:flex-start;gap:12px; }
  .setting-copy { flex:1 1 auto;width:auto;min-width:0; }
  .setting-copy small { max-width:none; }
  .setting-row > .btn,.setting-row > .toggle,.setting-row > .segmented { flex:0 0 auto;align-self:flex-start; }
  .modal { padding:20px; }
  .modal-backdrop-routine-preview-modal { align-items: end; padding: 0; }
  .routine-preview-modal { width: 100%; max-height: 88vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; }
  .modal-actions { flex-direction:column-reverse; }
  .modal-actions .btn { width:100%; }
  .login-modal-card { padding:26px 20px; }
  .sheet-actions { grid-template-columns:1fr; }
  .toast-root { left:12px;right:12px;bottom:82px; }
  .toast { min-width:0;max-width:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important; }
}