/* Native-feeling controls, without changing the existing content routes. */
:root {
  --ink:#1d1d1f;
  --muted:#626267;
  --paper:#f5f5f7;
  --panel:#fff;
  --line:#dedee3;
  --blue:#0066cc;
  --blue-strong:#0057ad;
  --blue-bg:#edf5ff;
  --green:#267247;
  --green-bg:#edf6ef;
  --ui-ease:cubic-bezier(.16,1,.3,1);
  --ui-fast:160ms;
}
html { scroll-padding-top:90px; scrollbar-color:#b8b8c0 #f5f5f7; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
::selection { background:#cce3ff; color:#172c45; }
input,textarea { caret-color:var(--blue); }
a { text-underline-offset:4px; }
.app-navigation { position:sticky; top:0; z-index:30; margin:0; padding:12px max(20px,calc((100% - 1232px)/2)); display:flex; gap:4px; align-items:center; background:rgba(250,250,252,.94); border-bottom:1px solid #dedee3; backdrop-filter:blur(16px); }
.app-navigation .nav-btn { flex:1; justify-content:center; padding:11px 10px; border:0; border-radius:8px; min-height:44px; font-size:14px; color:#57575e; background:transparent; white-space:nowrap; transition:background var(--ui-fast),color var(--ui-fast),box-shadow var(--ui-fast); }
.app-navigation .nav-btn:hover { background:#eaeaf0; }
.app-navigation .nav-btn.active { background:#fff; color:#1d1d1f; box-shadow:0 2px 6px #00000012; }
.app-navigation .nav-btn.active .ui-icon { color:var(--blue); }
header { background:#fff; }
.hero { padding:16px 0 8px; }
.hero h1 { font-size:30px; max-width:900px; line-height:1.5; font-weight:650; text-wrap:balance; }
.eyebrow { color:var(--muted); font-size:13px; font-weight:500; }
.tool-lanes { max-width:760px; gap:32px; }
.tool-lane,.tool-lane:last-child { border-left:0; padding-left:0; }
.tool-lane strong { font-weight:600; }
.tool-mark { border:0; border-radius:8px; box-shadow:0 1px 4px #00000016; width:38px; height:38px; transition:background var(--ui-fast),transform var(--ui-fast); }
.tool-mark:hover { background:#f0f0f5; }
.tool-mark:active { transform:scale(.96); }
.tool-mark::after { background:#303036; }
.tool-mark.show-tooltip::after { display:block; }
#journeyBar { border:0; border-radius:8px; background:#eaf2fc; box-shadow:none; padding:18px 22px; }
#journeyBar .tag { color:#174e86; background:transparent; padding:0; }
.journey-context small { color:#4a6079; font-variant-numeric:tabular-nums; }
#gap .span-5 { border-color:var(--line); }
.panel h2 { font-size:22px; font-weight:650; }
.panel h3 { font-weight:600; }
.muted { color:var(--muted); }
button,input,select,textarea { font-family:inherit; }
button { touch-action:manipulation; }
button.small,button.primary,.login-submit { min-height:44px; border-radius:8px; transition:background var(--ui-fast),border-color var(--ui-fast),box-shadow var(--ui-fast),transform var(--ui-fast); }
button.primary,.login-submit { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
button.primary:hover,.login-submit:hover { background:var(--blue-strong); border-color:var(--blue-strong); }
button:active:not(:disabled) { transform:scale(.985); }
button:disabled { opacity:.48; cursor:not-allowed; transform:none; box-shadow:none; }
button.small:not(.primary) { background:#ededf1; border-color:transparent; color:#36363b; }
button.small:not(.primary):hover:not(:disabled) { background:#e2e2e8; }
input:not([type=radio]):not([type=checkbox]),select,textarea { border:1px solid #c9c9d1; border-radius:8px; background:#fff; min-height:44px; color:var(--ink); font-size:16px; transition:border-color var(--ui-fast),box-shadow var(--ui-fast); }
input::placeholder,textarea::placeholder { color:#6e6e75; opacity:1; }
:is(button,a,summary,input,select,textarea,[tabindex]):focus-visible { outline:3px solid #147ce5; outline-offset:3px; }
input[type=radio],input[type=checkbox] { accent-color:var(--blue); }
.question { padding:22px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.question-title { line-height:1.7; font-size:16px; }
.option { min-height:52px; padding:15px; border-radius:8px; background:white; border:1px solid var(--line); cursor:pointer; transition:background var(--ui-fast),border-color var(--ui-fast); }
.option:hover { background:#fafafd; border-color:#aaaab4; }
.option:has(input:checked) { background:#edf5ff; border-color:var(--blue); }
.option:has(input:focus-visible) { outline:3px solid #147ce5; outline-offset:3px; }
.option input { flex-shrink:0; }
.score-result { border-top:0; border-radius:8px; }
.score-number { color:var(--ink); font-variant-numeric:tabular-nums; }
.result-card,.mini-card,.guide-card,.solution-group { border-radius:8px; }
.result-card { border-radius:0; }
.tag { font-size:12px; font-weight:600; }
.tag.blue { color:#1a5792; background:#eaf3fd; }
.ui-disclosure > summary { min-height:52px; color:var(--ink); }
.ui-disclosure > summary::after { content:none; }
.disclosure-chevron { margin-left:auto; width:18px; height:18px; flex-shrink:0; color:var(--muted); transition:transform 200ms var(--ui-ease); }
.ui-disclosure[open] > summary > .disclosure-chevron { transform:rotate(90deg); }
.choice-list button.active,.flow-step.active,.challenge-day-button.active { background:#edf5ff; border-color:var(--blue); color:#174f89; }
.challenge-day-button { min-height:64px; border-radius:8px; }
.challenge-brief,.artifact-workspace { padding:20px; border:0; background:#fff; }
.challenge-output { background:#f5f5f7; color:var(--ink); border:0; border-radius:8px; padding:18px; line-height:1.8; }
.ai-reply-body { border-left:0; background:#f5f5f7; border-radius:8px; padding:18px; }
.modal-backdrop { background:rgba(15,18,25,.36); backdrop-filter:blur(6px); padding:24px; overscroll-behavior:contain; }
.pay-modal { border:0; border-radius:8px; background:#fff; box-shadow:0 24px 80px #00000030; max-height:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain; padding:28px; }
.modal-head { gap:16px; }
.modal-head h2 { font-size:23px; }
.modal-close { display:flex; align-items:center; justify-content:center; flex-shrink:0; border:0; width:44px; height:44px; border-radius:50%; background:#efeff3; color:#63636b; }
.modal-backdrop.show .pay-modal { animation:sheet-enter 220ms var(--ui-ease); }
.section.active { animation:content-arrive 180ms var(--ui-ease); }
.toast { background:#25252a; color:white; border:0; border-radius:8px; box-shadow:0 8px 24px #00000020; }
.price,.score-number,.history-row small { font-variant-numeric:tabular-nums; }
@keyframes sheet-enter { from { opacity:.7; transform:translateY(10px) scale(.99); } to { opacity:1; transform:none; } }
@keyframes content-arrive { from { opacity:.75; } to { opacity:1; } }
@media(max-width:760px) {
  html { scroll-padding-top:135px; }
  .app-navigation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:8px 12px; gap:4px; }
  .app-navigation .nav-btn { flex-direction:column; gap:4px; padding:8px 3px; min-height:54px; font-size:12px; white-space:normal; }
  .hero h1 { font-size:24px; }
  .tool-lanes { gap:20px; }
  .modal-backdrop { align-items:flex-end; padding:12px; }
  .pay-modal { padding:20px; width:100%; max-height:calc(100dvh - 32px); padding-bottom:max(20px,env(safe-area-inset-bottom)); }
  .login-code-row { gap:8px; }
  .modal-head h2 { font-size:21px; }
  .challenge-workbench { grid-template-columns:minmax(0,1fr); }
  .history-row { grid-template-columns:minmax(0,1fr) auto; }
  .history-row > span { grid-column:1 / -1; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .section.active,.modal-backdrop.show .pay-modal { animation:none; }
  button,.tool-mark,.disclosure-chevron { transition:none; }
  button:active:not(:disabled),.tool-mark:active { transform:none; }
}