:root{
 --bg:#f4ede6;--paper:#fffaf7;--paper2:#fff5ef;--ink:#2b231f;--muted:#8d7f74;--line:#e8ddd4;
 --accent:#9f615c;--accent2:#e8c9c1;--green:#748473;--gold:#b08a5a;
 --shadow:0 18px 55px rgba(73,53,40,.10);--soft:0 8px 26px rgba(73,53,40,.06);
 --safeTop:env(safe-area-inset-top);--safeBottom:env(safe-area-inset-bottom)
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
 background:radial-gradient(circle at 0% -5%,rgba(255,255,255,.9),transparent 36%),radial-gradient(circle at 100% 0%,rgba(240,216,206,.65),transparent 28%),linear-gradient(180deg,#f6efe9,#efe5dc);overflow-x:hidden}
button,input,textarea,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}.hidden{display:none!important}
body.private #root{filter:blur(14px) saturate(.8)}
.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;opacity:.32;filter:blur(4px);animation:drift 16s ease-in-out infinite}
.orb.a{width:220px;height:220px;left:-70px;top:7%;background:#edcec7}
.orb.b{width:190px;height:190px;right:-70px;top:34%;background:#e4d6bd;animation-duration:20s}
.orb.c{width:260px;height:260px;left:15%;bottom:-150px;background:rgba(255,255,255,.8);animation-duration:18s}
@keyframes drift{50%{transform:translate(11px,-20px)}}
#root{position:relative;z-index:1;width:min(100%,680px);margin:auto;min-height:100vh;padding:calc(16px + var(--safeTop)) 16px calc(110px + var(--safeBottom))}
.screen{animation:screenIn .35s ease}@keyframes screenIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.center-screen{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center}
.center-card{width:100%;padding:26px 22px 22px;border:1px solid rgba(229,218,209,.96);border-radius:32px;background:linear-gradient(160deg,rgba(255,250,247,.98),rgba(251,242,236,.97));box-shadow:var(--shadow);position:relative;overflow:hidden}
.center-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-85px;top:-95px;background:rgba(159,97,92,.08)}
.mark{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#efddd7,#e5c5bd);font:23px Georgia,serif;color:#5b3a38;margin-bottom:18px;box-shadow:0 7px 16px rgba(160,112,98,.12)}
.title{font:35px/1.03 Georgia,serif;letter-spacing:-.7px;margin:0 0 10px}
.subtitle{font-size:14px;color:var(--muted);line-height:1.54;margin:0 0 21px;max-width:94%}
.mode-grid,.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice{border:1px solid var(--line);border-radius:20px;background:#fff;padding:17px 12px;text-align:left;color:var(--ink);box-shadow:var(--soft);transition:.15s}
.choice:active{transform:scale(.985)}.choice.active{border-color:#cda79e;box-shadow:0 0 0 3px rgba(159,97,92,.07)}
.choice b{display:block;font-size:14px}.choice small{display:block;font-size:10.5px;color:var(--muted);margin-top:5px;line-height:1.35}
.label{display:block;font-size:12px;font-weight:750;color:#6c5c53;margin:15px 0 8px}
.input,textarea,select{width:100%;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);padding:14px 15px;outline:none}
.input:focus,textarea:focus,select:focus{border-color:#cda79e;box-shadow:0 0 0 3px rgba(159,97,92,.08)}
.primary,.secondary{width:100%;border-radius:17px;padding:14px 16px;font-weight:800}
.primary{border:0;color:#fff;background:linear-gradient(#372d28,#221b17);box-shadow:0 10px 20px rgba(34,27,23,.16)}
.secondary{border:1px solid var(--line);background:#fff;color:var(--ink)}
.primary:active,.secondary:active{transform:scale(.988)}
.note{font-size:10.7px;color:var(--muted);line-height:1.48;margin-top:12px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}
.brand{font:32px/1 Georgia,serif;letter-spacing:-.8px}.subline{font-size:12px;color:var(--muted);margin-top:7px}
.iconrow{display:flex;gap:8px}.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,250,247,.78);box-shadow:0 6px 18px rgba(60,43,31,.055);color:var(--ink)}
.sync-dot{display:none}
.hero{padding:22px;border:1px solid rgba(228,217,208,.95);border-radius:32px;background:linear-gradient(145deg,rgba(255,250,247,.98),rgba(248,238,231,.97));box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;right:-95px;top:-95px;background:rgba(159,97,92,.09)}
.kicker{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:800}
.hero h1{margin:12px 0 12px;font:29px/1.18 Georgia,serif;letter-spacing:-.45px;max-width:92%}
.hero-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.hero-note{font-size:12px;color:var(--muted);line-height:1.5;max-width:72%}
.pill{border:0;border-radius:999px;background:var(--ink);color:#fff;padding:10px 14px;font-size:12px;font-weight:800;white-space:nowrap}
.stats{display:grid;grid-template-columns:1.15fr .85fr;gap:10px;margin:13px 0 14px}.panel{border:1px solid var(--line);border-radius:22px;background:rgba(255,250,247,.72);padding:14px;box-shadow:var(--soft)}
.panel-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.bigstat{font-size:14px;font-weight:800}.smallstat{font-size:11px;color:var(--muted);margin-top:2px}
.track{height:6px;background:#eadfd6;border-radius:30px;overflow:hidden;margin-top:10px}.fill{height:100%;background:linear-gradient(90deg,#b8786c,#9f615c);border-radius:inherit;transition:width .4s ease}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.mini{background:#fff;border:1px solid var(--line);border-radius:15px;padding:10px}.mini .n{font-size:16px;font-weight:800}.mini .l{font-size:9.5px;color:var(--muted);margin-top:3px}
.search{margin-bottom:12px}.tabs{display:flex;gap:8px;overflow:auto;scrollbar-width:none;padding:2px 0 12px}.tabs::-webkit-scrollbar{display:none}.tab{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:9px 13px;background:rgba(255,250,247,.74);color:var(--muted);font-size:12px}.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.list-head{display:flex;justify-content:space-between;align-items:flex-end;margin:8px 2px 11px}.list-head h2{margin:0;font-size:15px}.list-head span{font-size:11px;color:var(--muted)}
.list{display:grid;gap:11px}.qcard{width:100%;text-align:left;border:1px solid var(--line);border-radius:22px;background:rgba(255,250,247,.86);padding:16px;color:var(--ink);box-shadow:var(--soft);opacity:1;transform:none}
.qcard:active{transform:scale(.988)}.qmeta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:9px}.cat{font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:800}.status{font-size:10px;color:var(--muted);white-space:nowrap}.status.mine{color:var(--accent);font-weight:700}.status.both{color:var(--green);font-weight:750}.qtext{font:18px/1.35 Georgia,serif}
.empty{text-align:center;padding:40px 20px;border:1px dashed var(--line);border-radius:22px;color:var(--muted);font-size:13px;background:rgba(255,250,247,.58)}
.modal{position:fixed;inset:0;z-index:30;background:rgba(38,30,26,.26);backdrop-filter:blur(11px);display:flex;align-items:stretch;justify-content:center}
.sheet{width:100%;height:100%;max-width:none;max-height:none;overflow:auto;background:linear-gradient(#fffbf8,#fff7f1);border-radius:0;padding:calc(10px + var(--safeTop)) 18px calc(28px + var(--safeBottom));box-shadow:none;animation:fadeIn .18s ease-out}
@keyframes fadeIn{from{opacity:.78}to{opacity:1}}
.grab{display:none}.sheet-top{position:sticky;top:calc(-10px - var(--safeTop));z-index:4;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;background:linear-gradient(180deg,rgba(255,251,248,.98),rgba(255,247,241,.95));padding:12px 0 12px}.sheet h2{font:30px/1.16 Georgia,serif;letter-spacing:-.35px;margin:9px 0 15px;max-width:92%}.close{border:0;background:transparent;color:var(--muted);font-size:28px;padding:0 2px;line-height:1}
.block{border-top:1px solid var(--line);padding-top:15px;margin-top:4px}.block-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.person{font-size:11px;font-weight:800}.edit{border:0;background:transparent;color:var(--accent);font-size:12px;padding:5px}
textarea{min-height:260px;resize:vertical;line-height:1.56}.help{font-size:11px;color:var(--muted);line-height:1.45;margin:8px 2px 0}.saved{white-space:pre-wrap;background:#f6ede7;border:1px solid #e8dbd1;border-radius:18px;padding:15px;line-height:1.56;font-size:14.5px}.locked{border:1px dashed #dccabd;border-radius:18px;padding:17px;background:#fbf5ef;color:var(--muted);font-size:12px;text-align:center;line-height:1.5}.reveal{font-size:11px;color:var(--green);font-weight:800;margin-bottom:8px}.follow{margin-top:11px;padding:10px 11px;border-left:3px solid var(--accent2);border-radius:0 14px 14px 0;background:#fbf5ef;color:var(--muted);font-size:11px;line-height:1.45}.navrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.sheetbtn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:15px;padding:11px;font-size:12px;font-weight:700}
.settings{display:grid;gap:10px}.setting{border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px;display:flex;justify-content:space-between;align-items:center;gap:12px}.setting strong{font-size:14px}.setting small{display:block;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.4}.tiny{border:1px solid var(--line);background:#fffaf7;border-radius:13px;padding:9px 11px;font-size:12px;color:var(--ink)}.danger{color:#944b48}
.invite-box{padding:15px;border:1px solid var(--line);border-radius:20px;background:#fff}.invite-code{font:27px/1 Georgia,serif;letter-spacing:.16em;margin:8px 0}.invite-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.toast{position:fixed;z-index:30;left:50%;bottom:calc(22px + var(--safeBottom));transform:translate(-50%,18px);opacity:0;pointer-events:none;background:#26201c;color:#fff;border-radius:999px;padding:10px 14px;font-size:11px;transition:.22s}.toast.show{opacity:1;transform:translate(-50%,0)}

.topbar{position:sticky;top:calc(8px + var(--safeTop));z-index:6;margin-bottom:16px;padding:12px 14px;border:1px solid rgba(232,221,212,.95);border-radius:22px;background:rgba(255,250,247,.72);backdrop-filter:blur(14px);box-shadow:0 8px 22px rgba(73,53,40,.06)}
.hero{padding:24px 22px 20px;border-radius:34px}
.hero-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap}
.hero-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(224,210,201,.9);background:rgba(255,255,255,.7);padding:8px 11px;border-radius:999px;font-size:11px;color:#6f6158;font-weight:700}
.hero h1{font-size:31px;max-width:100%;margin-top:6px}
.hero-row{align-items:center}
.hero-note{font-size:12.5px;max-width:68%}
.pill{padding:12px 16px;box-shadow:0 12px 20px rgba(34,27,23,.14)}
.stats{grid-template-columns:1fr;gap:12px}
.panel{border-radius:24px;padding:16px}
.search-wrap{position:relative}
.search-wrap .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6}
.search-wrap input{padding-left:40px}
.browser-card{margin-top:14px;padding:14px;border:1px solid rgba(232,221,212,.95);border-radius:28px;background:rgba(255,250,247,.72);box-shadow:var(--soft)}
.helper-strip{display:flex;gap:8px;overflow:auto;scrollbar-width:none;padding-bottom:2px;margin-bottom:12px}
.helper-strip::-webkit-scrollbar{display:none}
.helper-chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 12px;font-size:11px;font-weight:800;color:#5f5148;box-shadow:0 2px 8px rgba(73,53,40,.04)}
.helper-chip:active{transform:scale(.985)}
.list-head{margin:12px 2px 11px}
.qcard{padding:17px 16px 14px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,248,244,.92))}
.qcard:hover{box-shadow:0 12px 25px rgba(73,53,40,.08)}
.qtext{font-size:19px}
.qfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.qhint{font-size:11px;color:var(--muted)}
.qopen{font-size:12px;font-weight:800;color:var(--accent)}
.sheet{background:linear-gradient(180deg,#fffbf8 0%,#fff7f1 100%);padding-top:12px}
.sheet-top{position:sticky;top:-10px;z-index:2;background:linear-gradient(180deg,rgba(255,251,248,.97),rgba(255,247,241,.94));padding-bottom:8px}
textarea{min-height:210px;border-radius:20px}
.saved,.locked{border-radius:20px}
.navrow{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,247,241,0),rgba(255,247,241,.98) 30%);padding-top:14px;padding-bottom:8px;margin-top:16px}
.sheetbtn{padding:14px 12px;border-radius:18px;font-size:13px;font-weight:800}
.bottom-dock{position:fixed;left:50%;bottom:calc(14px + var(--safeBottom));transform:translateX(-50%);width:min(calc(100% - 24px),520px);z-index:12;padding:8px;border:1px solid rgba(232,221,212,.94);border-radius:24px;background:rgba(255,250,247,.84);backdrop-filter:blur(14px);display:grid;grid-template-columns:repeat(4,1fr);gap:8px;box-shadow:0 16px 35px rgba(73,53,40,.12)}
.dock-btn{border:0;background:transparent;border-radius:18px;padding:10px 6px 9px;color:#695a51}
.dock-btn b{display:block;font-size:11px;line-height:1.15}
.dock-btn span{display:block;font-size:16px;margin-bottom:5px}
.dock-btn.active,.dock-btn:active{background:#fff;box-shadow:0 3px 10px rgba(73,53,40,.08);color:var(--ink)}
.toast{bottom:calc(98px + var(--safeBottom))}
@media(min-width:720px){
  #root{padding-bottom:132px}
  .stats{grid-template-columns:1fr 1fr}
}

@media(min-width:720px){
  .modal{padding:18px}
  .sheet{max-width:760px;height:calc(100% - 36px);border-radius:28px;box-shadow:0 20px 70px rgba(35,28,23,.16)}
  .sheet-top{top:-10px;padding-top:8px}
}


.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;display:inline-block;vertical-align:-4px;animation:spin .65s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.shake{animation:shake .22s linear 2}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(min-width:720px){.modal{align-items:center}.sheet{border-radius:30px;max-height:88vh}}

/* ===== Playful Geometry v7 ===== */
:root{
  --bg:#fbf9f6;
  --paper:#fffdfb;
  --paper2:#f8f7fb;
  --ink:#182235;
  --muted:#7d8492;
  --line:#e8e9ee;

  --blue:#dbeafe;
  --blue-strong:#7faee8;
  --blue-deep:#4f7fc3;

  --pink:#f8dfe4;
  --pink-strong:#e9a7b5;
  --pink-deep:#b86b7d;

  --lav:#e8e2f7;
  --lav-strong:#b7a8df;

  --cream:#fff4dd;
  --green:#a8c7b4;

  --shadow:0 16px 44px rgba(54,63,86,.08);
  --soft:0 7px 20px rgba(54,63,86,.055);
}
html{background:var(--bg)}
body{
  color:var(--ink);
  background:
    radial-gradient(circle at -5% 3%,rgba(248,223,228,.72) 0 105px,transparent 106px),
    radial-gradient(circle at 104% 6%,rgba(219,234,254,.82) 0 125px,transparent 126px),
    linear-gradient(180deg,#fcfaf7 0%,#f8f8fb 100%);
}
.ambient{opacity:.9}
.orb{filter:none;animation:geoFloat 18s ease-in-out infinite;opacity:.55}
.orb.a{width:210px;height:210px;left:-105px;top:4%;background:var(--pink);border-radius:50%}
.orb.b{width:180px;height:180px;right:-95px;top:33%;background:var(--blue);border-radius:44% 56% 55% 45%}
.orb.c{width:210px;height:210px;left:10%;bottom:-145px;background:var(--lav);border-radius:50%}
@keyframes geoFloat{50%{transform:translate(8px,-10px) rotate(3deg)}}

#root{max-width:680px;padding-left:14px;padding-right:14px}
.topbar{
  position:relative;top:auto;
  margin:0 0 15px;padding:9px 4px 8px;
  border:0;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:none;
}
.brand{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;
  font-size:28px;font-weight:850;letter-spacing:-.9px
}
.subline{font-size:11px;margin-top:5px;color:#9399a5}
.iconrow{gap:7px}
.icon-btn{
  width:42px;height:42px;border:1px solid #e7e8ed;background:rgba(255,255,255,.82);
  box-shadow:0 4px 14px rgba(54,63,86,.045);font-size:17px
}

/* setup / unlock */
.center-card{
  background:rgba(255,253,251,.94);
  border:1px solid #ebe9ed;
  border-radius:30px;
  box-shadow:var(--shadow);
  padding:25px 21px 22px;
}
.center-card:before{
  content:"";position:absolute;width:150px;height:150px;border-radius:50%;
  right:-55px;top:-70px;background:var(--blue);opacity:.65
}
.center-card:after{
  width:115px;height:115px;right:auto;left:-52px;top:auto;bottom:-55px;
  background:var(--pink);opacity:.62
}
.mark{position:relative;z-index:1;background:var(--lav);color:var(--ink);box-shadow:none}
.title{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;font-weight:850;letter-spacing:-1px;color:var(--ink)}
.subtitle{color:var(--muted)}
.choice{
  background:#fff;border:1px solid #e9e9ee;border-radius:19px;box-shadow:none;padding:15px 12px
}
.choice.active{border-color:#aac8ef;background:#f4f8ff;box-shadow:0 0 0 3px rgba(127,174,232,.11)}
.input,textarea,select{
  border:1px solid #e4e5eb;background:rgba(255,255,255,.94);
  border-radius:18px;color:var(--ink)
}
.input:focus,textarea:focus,select:focus{border-color:#a7c5eb;box-shadow:0 0 0 4px rgba(127,174,232,.10)}
.primary{
  background:linear-gradient(180deg,#75a8eb,#5c91da);
  color:#fff;box-shadow:0 9px 20px rgba(91,145,218,.18);border-radius:18px
}
.secondary{border-color:#e5e6eb;background:#fff;border-radius:18px}

/* today card */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  padding:21px 19px 19px;border-radius:28px;
  border:1px solid #e8e8ed;
  background:linear-gradient(145deg,#fff 0%,#fffaf9 72%);
  box-shadow:var(--shadow);
}
.hero:before{
  width:165px;height:165px;right:-69px;top:-76px;
  background:var(--blue);opacity:.9;border-radius:50%;z-index:-1
}
.hero:after{
  content:"";position:absolute;z-index:-1;width:128px;height:128px;left:-67px;bottom:-67px;
  border-radius:50%;background:var(--pink);opacity:.88
}
.hero-head{margin-bottom:8px}
.kicker{color:#9c7180;font-size:9px;font-weight:850;letter-spacing:.14em}
.hero-badges{gap:6px;margin-top:8px}
.hero-badge{
  padding:7px 9px;border:0;background:rgba(255,255,255,.72);
  color:#78808e;font-size:10px;box-shadow:0 2px 8px rgba(54,63,86,.035)
}
.hero h1{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;
  font-size:30px;line-height:1.12;font-weight:860;letter-spacing:-1.1px;color:var(--ink)
}
.hero-note{color:#7f8795}
.pill{
  background:var(--blue-deep);padding:12px 16px;
  box-shadow:0 8px 18px rgba(79,127,195,.16)
}

/* role state cards below hero */
.role-state-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:11px 0 0}
.role-state{
  position:relative;overflow:hidden;border:1px solid #e8e8ee;border-radius:21px;padding:13px 12px 12px;background:#fff
}
.role-state.you{background:linear-gradient(145deg,#f5f9ff,#eef5ff)}
.role-state.partner{background:linear-gradient(145deg,#fff8fa,#fdf0f3)}
.role-avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:17px;font-weight:850;margin-bottom:9px
}
.role-state.you .role-avatar{background:#cfe2fb;color:#486eaa}
.role-state.partner .role-avatar{background:#f4ced7;color:#a75d70}
.role-state strong{display:block;font-size:12px}
.role-state small{display:block;color:#8a919d;font-size:10px;margin-top:3px;line-height:1.3}

/* stats */
.stats{grid-template-columns:1fr;gap:10px;margin:11px 0 12px}
.panel{
  background:rgba(255,255,255,.86);border:1px solid #e9e9ee;border-radius:22px;
  padding:14px;box-shadow:none
}
.panel-title{font-size:9px;color:#969ca8}
.bigstat{color:var(--ink)}
.track{background:#edf0f4;height:7px}
.fill{background:linear-gradient(90deg,#a6c8f2,#d9b7e8)}
.mini{border:0;background:#f8f8fb;border-radius:14px}
.mini .n{color:#28334a}

/* question browser */
.browser-card{
  margin-top:10px;padding:13px;border:1px solid #e8e9ee;border-radius:27px;
  background:rgba(255,255,255,.77);box-shadow:none
}
.helper-strip{gap:7px;margin-bottom:10px}
.helper-chip{
  border:0;background:#f3f4f7;color:#697181;padding:9px 12px;box-shadow:none
}
.helper-chip:nth-child(1){background:#f7e7eb;color:#9f6071}
.helper-chip:nth-child(2){background:#e7f0fc;color:#577ba8}
.helper-chip:nth-child(3){background:#eee9f9;color:#76669e}
.search-wrap .icon{color:#9299a6}
.search-wrap input{background:#f8f8fb;border-color:#ececf0}
.tabs{gap:7px;padding-bottom:10px}
.tab{border:0;background:#f4f4f7;color:#7b8290;padding:8px 12px}
.tab.active{background:#dfeafb;color:#4b6f9e}
.list-head h2{font-size:14px}
.qcard{
  display:block;padding:13px 13px 12px;border:1px solid #e9e9ee;border-radius:20px;
  background:#fff;box-shadow:none
}
.qcard:active{background:#fafbfe}
.qmeta{margin-bottom:7px}
.cat{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 8px;border-radius:999px;background:#f7eef1;
  color:#a06475;font-size:8.5px;letter-spacing:.08em
}
.status{font-size:9.5px}
.qtext{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;
  font-weight:740;font-size:17px;line-height:1.28;letter-spacing:-.25px
}
.qfoot{margin-top:9px}
.qhint{font-size:10px}.qopen{font-size:11px;color:#6a8bb8}

/* bottom nav */
.bottom-dock{
  bottom:calc(10px + var(--safeBottom));padding:7px;border:1px solid rgba(229,230,235,.95);
  border-radius:23px;background:rgba(255,255,255,.90);box-shadow:0 12px 35px rgba(54,63,86,.10)
}
.dock-btn{border-radius:17px;color:#7a8190;padding:9px 5px}
.dock-btn span{font-size:16px}.dock-btn b{font-size:10px}
.dock-btn.active,.dock-btn:active{background:#edf4fd;color:#5279ae;box-shadow:none}

/* full-screen question */
.modal{background:#fbfaf8;backdrop-filter:none}
.sheet{
  background:
    radial-gradient(circle at 2% 0%,rgba(248,223,228,.82) 0 90px,transparent 91px),
    radial-gradient(circle at 100% 16%,rgba(219,234,254,.88) 0 105px,transparent 106px),
    linear-gradient(180deg,#fffdfb,#fbfafc);
}
.sheet-top{
  background:linear-gradient(180deg,rgba(255,253,251,.97),rgba(255,253,251,.84));
  backdrop-filter:blur(12px)
}
.sheet h2{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;
  font-weight:860;font-size:31px;line-height:1.12;letter-spacing:-1px
}
.close{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.82);
  border:1px solid #e9e9ee;display:grid;place-items:center;font-size:24px
}
.block{border-top:0;padding-top:12px;margin-top:4px}
.block + .block{margin-top:14px}
.block-head{margin-bottom:9px}
.person{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;color:#4d5668
}
.person:before{
  content:"";width:26px;height:26px;border-radius:50%;background:var(--blue);display:inline-block
}
#otherAnswerLabel.person:before{background:var(--pink)}
.edit{color:#6888b2}
textarea{
  min-height:250px;background:rgba(255,255,255,.91);border:1px solid #e4e6eb;
  border-radius:23px;padding:17px;font-size:16px
}
.help{margin:10px 3px;color:#8b919d}
.saved{
  background:linear-gradient(145deg,#eff6ff,#e8f2fd);border:0;border-radius:22px;
  color:#34445d;padding:16px
}
#otherArea .saved{background:linear-gradient(145deg,#fff2f5,#fae7ec)}
.locked{
  border:0;background:#f3f1f8;border-radius:22px;color:#838798;padding:17px
}
.reveal{color:#6e7c98}
.follow{border-left:0;border-radius:18px;background:#f5f4f9;padding:11px 12px;color:#858a97}
.navrow{background:linear-gradient(180deg,rgba(251,250,252,0),rgba(251,250,252,.98) 28%)}
.sheetbtn{border:0;background:#f0f2f7;color:#5f6878}
#nextBtn{background:#e8e3f8;color:#6c5d99}

/* invite/settings */
.invite-box{border:0;background:#f6f7fb;border-radius:22px}
.invite-code{color:#506d9e}
.setting{border:0;background:#f7f7fa;border-radius:18px}
.tiny{border:0;background:#fff;color:#667084}
.danger{color:#b26778}

/* tiny motion only, no jumping sync */
.hero,.browser-card,.panel,.qcard,.role-state{transition:transform .14s ease,background .14s ease}
.qcard:active,.role-state:active{transform:scale(.99)}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


/* ===== Conversation depth & response stage v8 ===== */
.hero-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.soft-pill{border:0;border-radius:999px;background:rgba(255,255,255,.78);color:#78808e;padding:11px 13px;font-size:11px;font-weight:800;box-shadow:0 2px 8px rgba(54,63,86,.04)}
.soft-pill:active{transform:scale(.985)}
.question-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 12px}
.question-tools>span{font-size:10.5px;color:#9299a6;line-height:1.35}
.not-now-btn{border:0;border-radius:999px;background:#f1f2f6;color:#777f8e;padding:8px 11px;font-size:10.5px;font-weight:800;white-space:nowrap}
.response-intro{font-size:12px;line-height:1.5;color:#7e8592;margin:-1px 0 11px}
.response-person:before{background:var(--lav)!important}
.response-prompts{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 0 10px;padding-bottom:2px}
.response-prompts::-webkit-scrollbar{display:none}
.response-prompt{flex:0 0 auto;max-width:235px;border:0;border-radius:999px;background:#f1f2f6;color:#737b89;padding:9px 11px;font-size:10px;font-weight:800;line-height:1.2}
.response-prompt.active{background:#e8e3f8;color:#675a93}
.response-box{min-height:120px!important}
.response-save{margin-top:9px}
.response-saved{margin-top:2px;padding:14px 15px;border-radius:20px;background:linear-gradient(145deg,#f2eefb,#ebe5f8);color:#544b70;font-size:14px;line-height:1.5;white-space:pre-wrap}
.response-saved .response-label,.partner-response-card .response-label{display:block;margin-bottom:6px;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#8c82a5}
.partner-response-area{margin-top:10px}
.partner-response-card{padding:14px 15px;border-radius:20px;background:linear-gradient(145deg,#fff2f5,#fae7ec);color:#684c55;font-size:14px;line-height:1.5;white-space:pre-wrap}
.partner-response-card .response-label{color:#a57a86}
.depth-locked-note{margin:10px 0 0;font-size:10.5px;color:#8e95a2}
@media(max-width:420px){
 .hero-row{align-items:flex-end}
 .hero-note{max-width:56%}
 .hero-actions{gap:6px}
 .soft-pill,.pill{padding:10px 11px}
}



/* ===== Guided Questionnaire Journey v9 ===== */
.journey-shell{display:grid;gap:12px}
.journey-hero{position:relative;overflow:hidden;border:1px solid #e8e9ee;border-radius:30px;background:linear-gradient(145deg,#fff 0%,#fff9fb 56%,#f5f8ff 100%);box-shadow:var(--shadow);padding:20px 18px 18px}
.journey-hero:before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-78px;top:-85px;background:var(--blue);opacity:.72;pointer-events:none}
.journey-hero:after{content:"";position:absolute;width:118px;height:118px;border-radius:50%;left:-60px;bottom:-69px;background:var(--pink);opacity:.7;pointer-events:none}
.journey-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.journey-title{font-size:27px;line-height:1.05;font-weight:860;letter-spacing:-.9px;margin:5px 0 5px}
.journey-sub{font-size:11px;line-height:1.42;color:var(--muted);max-width:86%}
.journey-overall{flex:0 0 auto;text-align:right;border-radius:16px;background:rgba(255,255,255,.74);padding:9px 10px;min-width:72px}
.journey-overall b{display:block;font-size:16px}.journey-overall span{font-size:9px;color:var(--muted)}
.level-path{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:17px 0 13px}
.level-node{position:relative;border:0;background:transparent;padding:0;color:#7e8593;min-width:0}
.level-node:before{content:"";position:absolute;height:3px;left:-50%;right:50%;top:17px;background:#eceef2;z-index:-1}
.level-node:first-child:before{display:none}
.level-node.unlocked:before,.level-node.cleared:before,.level-node.mastered:before{background:linear-gradient(90deg,#c7dcf7,#e5c7e0)}
.level-dot{width:35px;height:35px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;background:#f0f1f4;border:1px solid #e7e8ed;font-size:11px;font-weight:850;transition:.18s}
.level-node.unlocked .level-dot{background:#eef5ff;color:#557bad;border-color:#dbe8f8}
.level-node.cleared .level-dot{background:#eee9fa;color:#73639f;border-color:#e1d8f5}
.level-node.mastered .level-dot{background:#e4f1ea;color:#5e806b;border-color:#d3e8db}
.level-node.active .level-dot{transform:scale(1.12);box-shadow:0 0 0 4px rgba(127,174,232,.12);background:#dcecff;color:#416b9f}
.level-node.locked{opacity:.52}
.level-node b{display:block;font-size:9px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.level-node small{display:block;font-size:8px;margin-top:2px;color:#9aa0aa}
.level-card{position:relative;z-index:1;border:1px solid rgba(229,230,235,.98);background:rgba(255,255,255,.82);border-radius:23px;padding:14px 14px 13px}
.level-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.level-name{font-size:15px;font-weight:850;letter-spacing:-.2px}.level-desc{font-size:10.5px;color:var(--muted);line-height:1.4;margin-top:3px}
.level-score{font-size:10px;color:#737b88;white-space:nowrap;background:#f5f6f8;padding:7px 9px;border-radius:999px}
.level-track{height:6px;background:#edf0f4;border-radius:999px;overflow:hidden;margin:11px 0 14px}.level-track>div{height:100%;border-radius:inherit;background:linear-gradient(90deg,#9fc4ef,#d4b7e5);transition:width .35s ease}
.next-question{border-top:1px solid #ececf0;padding-top:13px}
.next-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px;font-size:9px;color:#8f96a1;text-transform:uppercase;letter-spacing:.11em;font-weight:800}
.next-question h2{margin:0;font-size:22px;line-height:1.18;font-weight:850;letter-spacing:-.6px}
.next-note{font-size:11px;color:var(--muted);line-height:1.45;margin-top:8px}
.journey-actions{display:grid;grid-template-columns:1fr auto;gap:9px;margin-top:13px}.journey-actions .primary{padding:13px 15px}.browse-btn{border:1px solid #e3e6ec;background:#f7f8fb;color:#657083;border-radius:16px;padding:12px 14px;font-size:11px;font-weight:800}
.waiting-card{padding:17px 14px;border-radius:18px;background:#f4f5f8;color:#7c8491;font-size:12px;line-height:1.48;text-align:center}
.journey-role-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}.journey-role{border-radius:17px;padding:10px 11px;background:#f4f8fe}.journey-role.partner{background:#fff4f7}.journey-role strong{display:block;font-size:10.5px}.journey-role small{display:block;font-size:9px;color:#8d939d;margin-top:3px}
.levels-explainer{margin:2px 0 0;padding:13px 14px;border-radius:20px;background:rgba(255,255,255,.66);border:1px solid #ebebef;font-size:10.5px;line-height:1.48;color:#858c98}
.library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:2px 2px 10px}.library-head h2{font-size:19px;margin:0;letter-spacing:-.4px}.library-head p{font-size:10.5px;color:var(--muted);margin:4px 0 0}.library-count{font-size:11px;color:#707989;background:#f1f3f7;padding:7px 9px;border-radius:999px}
.browser-card{scroll-margin-top:16px}
.qlevel{font-size:8.5px;color:#6e7890;background:#eef3fa;border-radius:999px;padding:5px 7px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-right:5px}
.level-library-tab{font-weight:750}
.level-lock-hint{font-size:10px;color:#8e95a1;margin-top:9px;line-height:1.4}
@media(max-width:430px){.journey-title{font-size:25px}.next-question h2{font-size:20px}.level-node b{font-size:8px}.journey-actions{grid-template-columns:1fr}.browse-btn{width:100%}}


/* ===== Mobile-first phone pass v11 ===== */
@media(max-width:600px){
  html,body{width:100%;max-width:100%;min-height:100%;overflow-x:hidden}
  html{background:#fbf9f6}
  body{
    min-height:100dvh;
    overscroll-behavior-x:none;
    -webkit-tap-highlight-color:transparent;
    background:
      radial-gradient(circle at -10% -2%,rgba(248,223,228,.58) 0 88px,transparent 89px),
      radial-gradient(circle at 108% 5%,rgba(219,234,254,.65) 0 102px,transparent 103px),
      linear-gradient(180deg,#fcfaf8 0%,#f8f8fb 100%);
  }
  body:has(.modal:not(.hidden)){overflow:hidden;touch-action:none}
  button{touch-action:manipulation}
  input,textarea,select{font-size:16px!important}
  .ambient{opacity:.55}

  #root{
    width:100%;max-width:none;min-height:100dvh;margin:0;
    padding:calc(8px + var(--safeTop)) 10px calc(86px + var(--safeBottom));
  }
  .screen{width:100%;min-width:0}

  /* onboarding / unlock */
  .center-screen{
    min-height:calc(100dvh - var(--safeTop) - var(--safeBottom) - 16px);
    align-items:flex-start;padding-top:12px;padding-bottom:12px;
  }
  .center-card{border-radius:24px;padding:20px 16px 18px;box-shadow:0 12px 34px rgba(54,63,86,.07)}
  .mark{width:48px;height:48px;font-size:20px;margin-bottom:14px}
  .title{font-size:30px;line-height:1.05;margin-bottom:8px}
  .subtitle{font-size:13px;line-height:1.48;margin-bottom:17px;max-width:100%}
  .choice{padding:14px 10px;border-radius:17px}
  .choice b{font-size:13px}.choice small{font-size:10px}
  .label{font-size:11px;margin:13px 0 7px}
  .input,select{border-radius:16px;padding:13px 13px}
  .primary,.secondary{min-height:48px;border-radius:16px;padding:13px 14px}
  .note{font-size:10px;line-height:1.42}

  /* compact app header */
  .topbar{
    position:sticky;top:0;z-index:10;
    margin:calc(-8px - var(--safeTop)) -2px 10px;
    padding:calc(9px + var(--safeTop)) 4px 8px;
    border:0;border-radius:0;
    background:linear-gradient(180deg,rgba(252,250,248,.96) 0%,rgba(252,250,248,.90) 72%,rgba(252,250,248,0) 100%);
    backdrop-filter:blur(12px);box-shadow:none;
  }
  .brand{font-size:24px;letter-spacing:-.7px}
  .subline{font-size:10px;margin-top:3px}
  .iconrow{gap:6px}
  .icon-btn{width:38px;height:38px;font-size:16px;background:rgba(255,255,255,.88)}

  /* questionnaire journey */
  .journey-shell{gap:9px}
  .journey-hero{padding:15px 12px 13px;border-radius:23px;box-shadow:0 10px 28px rgba(54,63,86,.065)}
  .journey-hero:before{width:120px;height:120px;right:-58px;top:-66px;opacity:.62}
  .journey-hero:after{width:92px;height:92px;left:-48px;bottom:-54px;opacity:.58}
  .journey-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
  .journey-title{font-size:22px;line-height:1.08;letter-spacing:-.7px;margin:4px 0 4px}
  .journey-sub{font-size:10px;line-height:1.38;max-width:100%;padding-right:2px}
  .journey-overall{min-width:58px;border-radius:14px;padding:7px 7px}
  .journey-overall b{font-size:14px}.journey-overall span{font-size:8px}

  .level-path{gap:2px;margin:14px -2px 11px;overflow:visible}
  .level-node{min-width:0}
  .level-node:before{top:15px;height:2px}
  .level-dot{width:31px;height:31px;font-size:10px;margin-bottom:4px}
  .level-node b{display:none}
  .level-node small{font-size:7.5px;line-height:1.05;white-space:nowrap}

  .level-card{border-radius:19px;padding:12px 11px 11px}
  .level-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
  .level-name{font-size:14px;line-height:1.2}
  .level-desc{font-size:9.5px;line-height:1.35;margin-top:2px}
  .level-score{font-size:8.5px;padding:6px 7px}
  .level-track{height:5px;margin:9px 0 11px}
  .next-question{padding-top:11px}
  .next-meta{font-size:8px;margin-bottom:6px}
  .next-question h2{font-size:19px;line-height:1.2;letter-spacing:-.42px}
  .next-note{font-size:10px;line-height:1.38;margin-top:7px}
  .journey-role-row{gap:6px;margin-top:9px}
  .journey-role{border-radius:14px;padding:8px 9px}
  .journey-role strong{font-size:9.5px}.journey-role small{font-size:8.5px;margin-top:2px}
  .journey-actions{grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:10px}
  .journey-actions .primary{min-height:46px;padding:11px 12px;font-size:13px}
  .browse-btn{min-height:46px;border-radius:15px;padding:10px 11px;font-size:10px;white-space:nowrap}
  .waiting-card{padding:14px 11px;border-radius:15px;font-size:11px}
  .levels-explainer{padding:10px 11px;border-radius:16px;font-size:9.5px;line-height:1.42}

  /* all questions library */
  .browser-card{margin-top:0;padding:10px;border-radius:20px}
  .library-head{align-items:center;margin:0 1px 8px;gap:8px}
  .library-head h2{font-size:17px}.library-head p{font-size:9.5px;line-height:1.32;margin-top:2px}
  .library-count{font-size:9px;padding:6px 7px;white-space:nowrap}
  .search{margin-bottom:9px}.search-wrap input{padding-left:37px}
  .tabs{gap:6px;padding-bottom:8px;margin-right:-10px;padding-right:10px}
  .tab{padding:8px 10px;font-size:10.5px}
  .list-head{margin:8px 1px 8px}.list-head h2{font-size:13px}.list-head span{font-size:10px}
  .list{gap:8px}
  .qcard{padding:12px 11px 11px;border-radius:17px}
  .qmeta{margin-bottom:6px;gap:6px;align-items:flex-start}
  .qmeta>span:first-child{display:flex;flex-wrap:wrap;gap:4px}
  .qlevel,.cat{font-size:7.5px;padding:4px 6px}
  .status{font-size:8.5px;padding-top:4px}
  .qtext{font-size:15.5px;line-height:1.3;letter-spacing:-.18px}
  .qfoot{margin-top:8px}.qhint{font-size:9px}.qopen{font-size:10px}

  /* mobile bottom navigation */
  .bottom-dock{
    left:8px;right:8px;bottom:calc(7px + var(--safeBottom));transform:none;
    width:auto;max-width:none;padding:5px;gap:4px;border-radius:20px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(18px);
    box-shadow:0 10px 30px rgba(54,63,86,.11)
  }
  .dock-btn{min-width:0;min-height:52px;border-radius:15px;padding:7px 2px 6px}
  .dock-btn span{font-size:15px;margin-bottom:3px}.dock-btn b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toast{bottom:calc(76px + var(--safeBottom));max-width:calc(100% - 28px);text-align:center}

  /* full-screen question, tuned for iPhone + keyboard */
  .modal{height:100dvh;min-height:100dvh;align-items:stretch;background:#fbfaf8;overscroll-behavior:contain}
  .sheet{
    width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    border-radius:0!important;box-shadow:none!important;
    padding:0 12px calc(24px + var(--safeBottom));
    background:
      radial-gradient(circle at 102% 7%,rgba(219,234,254,.70) 0 76px,transparent 77px),
      radial-gradient(circle at -4% 22%,rgba(248,223,228,.55) 0 66px,transparent 67px),
      linear-gradient(180deg,#fffdfb,#fbfafc);
  }
  .sheet-top{
    position:sticky;top:0;z-index:8;
    margin:0 -12px 0;padding:calc(8px + var(--safeTop)) 12px 8px;
    background:linear-gradient(180deg,rgba(255,253,251,.99),rgba(255,253,251,.93));
    backdrop-filter:blur(14px);border-bottom:1px solid rgba(232,233,238,.78)
  }
  .sheet .kicker{font-size:8px}
  .sheet h2{font-size:23px;line-height:1.13;letter-spacing:-.65px;margin:6px 0 4px;max-width:100%}
  .close{flex:0 0 auto;width:38px;height:38px;font-size:22px;margin-top:1px}
  .question-tools{margin:8px 0 2px;gap:8px;align-items:center}
  .question-tools>span{font-size:9.5px}
  .not-now-btn{padding:8px 11px;font-size:10px;min-height:36px}
  .block{padding-top:10px;margin-top:3px}
  .block+.block{margin-top:10px}
  .block-head{margin-bottom:7px}
  .person{font-size:11px}.person:before{width:23px;height:23px}
  .edit{font-size:11px}
  textarea{
    min-height:170px;max-height:38dvh;resize:none;
    border-radius:18px;padding:14px;font-size:16px!important;line-height:1.48;
  }
  .help{font-size:9.5px;line-height:1.4;margin:7px 2px 0}
  #saveBtn,#saveResponseBtn{min-height:48px;margin-top:9px!important}
  .saved,.locked,.response-saved,.partner-response-card{border-radius:17px;padding:13px;font-size:13.5px;line-height:1.48}
  .response-intro{font-size:10.5px;line-height:1.42;margin-bottom:9px}
  .response-prompts{margin-right:-12px;padding-right:12px;gap:6px}
  .response-prompt{max-width:210px;padding:8px 10px;font-size:9.5px}
  .response-box{min-height:130px!important;max-height:30dvh!important}
  .navrow{
    position:static!important;display:grid;grid-template-columns:1fr 1fr;gap:7px;
    margin:12px 0 0;padding:0;background:none!important
  }
  .sheetbtn{min-height:44px;border-radius:15px;padding:11px 9px;font-size:11px}

  /* settings / invite */
  .settings{gap:8px}.setting{border-radius:16px;padding:12px 11px}.setting strong{font-size:12.5px}.setting small{font-size:9.5px}
  .tiny{padding:8px 9px;font-size:10px}
  .invite-box{border-radius:18px;padding:13px}.invite-code{font-size:23px;word-break:break-all}
  .invite-actions{gap:7px}
}

@media(max-width:360px){
  #root{padding-left:8px;padding-right:8px}
  .mode-grid,.role-grid{grid-template-columns:1fr}
  .journey-title{font-size:20px}
  .journey-overall{min-width:54px}
  .level-dot{width:29px;height:29px}
  .level-node small{font-size:7px}
  .journey-actions{grid-template-columns:1fr}
  .browse-btn{width:100%}
  .bottom-dock{left:6px;right:6px}
  .dock-btn b{font-size:8.5px}
}



/* ===== Playful Geometry design foundation v12 =====
   Purpose: stable visual system for the approved soft Playful Geometry direction.
   Future visual iterations should mostly change tokens/skins below, not app logic. */
:root{
  --ui-canvas:#fbf8f3;
  --ui-surface:#fffdfb;
  --ui-surface-soft:#f7f7fa;
  --ui-ink:#1d2637;
  --ui-muted:#7f8796;
  --ui-line:rgba(91,104,128,.12);
  --ui-blue:#dceafb;
  --ui-blue-strong:#8db6e7;
  --ui-blue-ink:#5277a8;
  --ui-blush:#f7e2e7;
  --ui-blush-strong:#e8b0bc;
  --ui-blush-ink:#a76c79;
  --ui-lav:#ebe5f8;
  --ui-lav-strong:#c5b6e7;
  --ui-lav-ink:#73649b;
  --ui-cream:#fff3db;
  --ui-cream-strong:#ebd4a5;
  --ui-sage:#e5f0e9;
  --ui-sage-strong:#b7d1c0;
  --ui-radius-xs:12px;
  --ui-radius-sm:17px;
  --ui-radius-md:22px;
  --ui-radius-lg:30px;
  --ui-space-1:6px;
  --ui-space-2:10px;
  --ui-space-3:14px;
  --ui-space-4:18px;
  --ui-space-5:24px;
  --ui-shadow:0 16px 44px rgba(64,74,96,.075);
  --ui-shadow-soft:0 6px 18px rgba(64,74,96,.05);
  --level-bg:var(--ui-blue);
  --level-strong:var(--ui-blue-strong);
  --level-ink:var(--ui-blue-ink);
}
body[data-theme="playful-soft"]{
  color:var(--ui-ink);
  background:
    radial-gradient(circle at -7% -1%,rgba(247,226,231,.70) 0 92px,transparent 93px),
    radial-gradient(circle at 107% 4%,rgba(220,234,251,.82) 0 110px,transparent 111px),
    linear-gradient(180deg,#fcfaf6 0%,#f8f8fb 100%);
}
body[data-theme="playful-soft"] .ambient{opacity:.34}

/* Reusable surface language */
[data-component="app-header"],
[data-component="question-library"],
.quest-card,
.center-card,
.setting,
.invite-box{
  border-color:var(--ui-line);
}
.app-header .brand,
.journey-title,
.next-question h2,
.question-screen h2,
.qtext{
  color:var(--ui-ink);
}

/* Header foundation */
.app-header{isolation:isolate}
.app-identity{min-width:0}
.app-actions{flex:0 0 auto}
.app-header .icon-btn{
  border-color:var(--ui-line);
  background:rgba(255,255,255,.82);
  box-shadow:var(--ui-shadow-soft);
}

/* Stage + geometry slots. These are intentionally CSS-only so final art can replace them later. */
.journey-stage{
  --stage-a:var(--ui-blue);
  --stage-b:var(--ui-blush);
  --stage-c:var(--ui-lav);
  isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(255,250,249,.94) 58%,rgba(245,248,253,.96));
  border-color:var(--ui-line);
  box-shadow:var(--ui-shadow);
}
.journey-stage[data-level="1"]{--level-bg:var(--ui-blue);--level-strong:var(--ui-blue-strong);--level-ink:var(--ui-blue-ink);--stage-a:var(--ui-blue);--stage-b:var(--ui-blush)}
.journey-stage[data-level="2"]{--level-bg:var(--ui-blush);--level-strong:var(--ui-blush-strong);--level-ink:var(--ui-blush-ink);--stage-a:var(--ui-blush);--stage-b:var(--ui-blue)}
.journey-stage[data-level="3"]{--level-bg:var(--ui-lav);--level-strong:var(--ui-lav-strong);--level-ink:var(--ui-lav-ink);--stage-a:var(--ui-lav);--stage-b:var(--ui-blue)}
.journey-stage[data-level="4"]{--level-bg:var(--ui-cream);--level-strong:var(--ui-cream-strong);--level-ink:#886d3e;--stage-a:var(--ui-cream);--stage-b:var(--ui-blush)}
.journey-stage[data-level="5"]{--level-bg:var(--ui-sage);--level-strong:var(--ui-sage-strong);--level-ink:#5f7d69;--stage-a:var(--ui-sage);--stage-b:var(--ui-lav)}
.geo-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.geo{position:absolute;display:block;opacity:.72}
.geo-orb{width:150px;height:150px;border-radius:50%;right:-60px;top:-72px;background:var(--stage-a)}
.geo-pill{width:108px;height:54px;border-radius:999px;left:-40px;bottom:14px;background:var(--stage-b);transform:rotate(-24deg);opacity:.55}
.geo-spark{width:18px;height:18px;right:28px;bottom:28px;border-radius:6px;background:var(--stage-c);transform:rotate(24deg);opacity:.72}
.journey-stage:before,.journey-stage:after{display:none!important}

/* Five levels are a visual game-path, not a form stepper. */
.level-path{isolation:isolate}
.level-node{--node-bg:#f0f2f5;--node-ink:#858d9a}
.level-node.level-1{--node-bg:var(--ui-blue);--node-ink:var(--ui-blue-ink)}
.level-node.level-2{--node-bg:var(--ui-blush);--node-ink:var(--ui-blush-ink)}
.level-node.level-3{--node-bg:var(--ui-lav);--node-ink:var(--ui-lav-ink)}
.level-node.level-4{--node-bg:var(--ui-cream);--node-ink:#8a7042}
.level-node.level-5{--node-bg:var(--ui-sage);--node-ink:#5f7d69}
.level-node.unlocked .level-dot,
.level-node.cleared .level-dot,
.level-node.mastered .level-dot,
.level-node.active .level-dot{
  background:var(--node-bg);
  color:var(--node-ink);
  border-color:transparent;
}
.level-node.active .level-dot{box-shadow:0 0 0 5px rgba(255,255,255,.86),0 5px 14px rgba(68,80,106,.10)}
.level-node.mastered .level-dot:after{content:"✓";position:absolute;width:14px;height:14px;border-radius:50%;display:grid;place-items:center;right:-2px;top:-2px;background:#fff;color:var(--node-ink);font-size:8px;font-weight:900;box-shadow:0 2px 7px rgba(60,70,92,.12)}
.level-node .level-dot{position:relative}

/* Guided card becomes the stable content frame for any future visual skin. */
.quest-card{
  --card-accent:var(--level-bg);
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.86);
  border-color:var(--ui-line);
  box-shadow:none;
}
.quest-card[data-level="1"]{--card-accent:var(--ui-blue)}
.quest-card[data-level="2"]{--card-accent:var(--ui-blush)}
.quest-card[data-level="3"]{--card-accent:var(--ui-lav)}
.quest-card[data-level="4"]{--card-accent:var(--ui-cream)}
.quest-card[data-level="5"]{--card-accent:var(--ui-sage)}
.quest-card:after{content:"";position:absolute;width:86px;height:86px;border-radius:50%;right:-44px;bottom:-49px;background:var(--card-accent);opacity:.42;pointer-events:none}
.level-score{background:var(--level-bg);color:var(--level-ink)}
.level-track{background:#eef0f4}
.level-track>div{background:linear-gradient(90deg,var(--level-strong),var(--ui-lav-strong))}
.journey-role{background:rgba(220,234,251,.52)}
.journey-role.partner{background:rgba(247,226,231,.58)}

/* Buttons: one strong action, everything else quiet. */
.primary{background:linear-gradient(180deg,#77a9e7,#638fd0);box-shadow:0 9px 20px rgba(95,143,205,.17)}
.browse-btn,.soft-pill,.not-now-btn,.sheetbtn,.tiny{border-color:transparent;background:#f2f3f7;color:#6d7585}

/* Library foundation */
.question-library{background:rgba(255,255,255,.73);border-color:var(--ui-line);box-shadow:none}
.question-library .input{background:#f6f6f9;border-color:transparent}
.tab{background:#f1f2f5;border-color:transparent}
.tab.active{background:var(--ui-blue);color:var(--ui-blue-ink)}
.qcard{border-color:var(--ui-line);background:rgba(255,255,255,.92);box-shadow:none}
.qcard:hover{box-shadow:var(--ui-shadow-soft)}
.qlevel{background:var(--ui-blue);color:var(--ui-blue-ink)}
.cat{background:var(--ui-blush);color:var(--ui-blush-ink)}

/* Question screen foundation — answer cards map to the two people, not to "correct/incorrect" states. */
.question-screen{
  --modal-accent:var(--ui-blue);
  --modal-ink:var(--ui-blue-ink);
}
.question-screen[data-level="1"]{--modal-accent:var(--ui-blue);--modal-ink:var(--ui-blue-ink)}
.question-screen[data-level="2"]{--modal-accent:var(--ui-blush);--modal-ink:var(--ui-blush-ink)}
.question-screen[data-level="3"]{--modal-accent:var(--ui-lav);--modal-ink:var(--ui-lav-ink)}
.question-screen[data-level="4"]{--modal-accent:var(--ui-cream);--modal-ink:#886d3e}
.question-screen[data-level="5"]{--modal-accent:var(--ui-sage);--modal-ink:#5f7d69}
.question-screen .kicker{color:var(--modal-ink)}
.question-screen textarea{border-color:var(--ui-line);background:rgba(255,255,255,.94)}
.question-screen .saved{background:linear-gradient(145deg,#eef6ff,#e6f0fb);color:#34465f}
.question-screen #otherArea .saved{background:linear-gradient(145deg,#fff3f5,#fae8ec);color:#654d55}
.response-saved{background:linear-gradient(145deg,#f3effb,#ece6f8)}

/* Bottom dock is intentionally skin-able without changing navigation logic. */
.app-dock{border-color:var(--ui-line);background:rgba(255,255,255,.90);box-shadow:0 12px 34px rgba(64,74,96,.10)}
.app-dock .dock-btn{color:#7a8290}
.app-dock .dock-btn.active{background:var(--ui-blue);color:var(--ui-blue-ink)}
.dock-icon{font-weight:850;letter-spacing:-1px}

/* Foundation states for later illustrations / generated artwork. */
[data-illustration-slot]{min-height:1px}
[data-state="locked"]{--state-opacity:.48}
[data-state="unlocked"]{--state-opacity:1}
[data-state="cleared"],[data-state="mastered"]{--state-opacity:1}

@media(max-width:600px){
  body[data-theme="playful-soft"]{background:linear-gradient(180deg,#fcfaf6 0%,#f8f8fb 100%)}
  .journey-stage{border-radius:25px;padding:16px 13px 14px}
  .geo-orb{width:118px;height:118px;right:-50px;top:-55px}
  .geo-pill{width:80px;height:40px;left:-32px;bottom:8px}
  .geo-spark{right:20px;bottom:22px}
  .quest-card{border-radius:19px}
  .question-library{border-radius:21px}
  .app-dock{border-radius:20px}
}

/* ===== iPhone post-auth layout hotfix v13 ===== */
@media (max-width:430px){
  html,body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }

  #root,
  #app,
  .journey-shell,
  .journey-stage,
  .journey-hero,
  .journey-top,
  .level-path,
  .level-card,
  .quest-card,
  .next-question,
  .journey-role-row,
  .journey-actions,
  .question-library,
  .browser-card{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  #root{
    padding:
      calc(6px + var(--safeTop))
      8px
      calc(102px + var(--safeBottom));
  }

  .topbar{
    margin:calc(-6px - var(--safeTop)) 0 8px;
    padding:calc(8px + var(--safeTop)) 0 6px;
  }

  .brand{
    font-size:22px;
    line-height:1.02;
  }

  .subline{
    font-size:9.5px;
    margin-top:2px;
  }

  .icon-btn{
    width:36px;
    height:36px;
    font-size:15px;
  }

  .journey-stage{
    overflow:hidden;
    padding:13px 11px 12px;
    border-radius:20px;
  }

  .journey-top{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:6px;
  }

  .journey-top > *,
  .level-head > *,
  .journey-role-row > *,
  .journey-actions > *{
    min-width:0;
  }

  .journey-overall{
    justify-self:start;
    min-width:auto;
    padding:6px 8px;
    border-radius:12px;
    text-align:left;
  }

  .journey-title{
    font-size:20px;
    line-height:1.08;
    letter-spacing:-.5px;
    margin:3px 0;
    overflow-wrap:anywhere;
  }

  .journey-sub{
    width:100%;
    max-width:100%;
    padding-right:0;
    font-size:9.5px;
    line-height:1.34;
    overflow-wrap:anywhere;
  }

  .level-path{
    grid-template-columns:repeat(5,minmax(0,1fr));
    margin:12px 0 10px;
    gap:0;
    overflow:visible;
  }

  .level-node{
    width:auto;
    min-width:0;
  }

  .level-node:before{
    top:14px;
  }

  .level-dot{
    width:28px;
    height:28px;
    font-size:9px;
    margin-bottom:3px;
  }

  .level-node small{
    width:100%;
    font-size:7px;
    line-height:1.05;
    white-space:normal;
    overflow-wrap:anywhere;
  }

  .level-card{
    padding:10px;
    border-radius:17px;
    overflow:hidden;
  }

  .level-head{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:4px;
  }

  .level-score{
    justify-self:start;
    font-size:8px;
    padding:5px 7px;
  }

  .level-name{
    font-size:13px;
    line-height:1.18;
    overflow-wrap:anywhere;
  }

  .level-desc{
    font-size:9px;
    line-height:1.3;
    overflow-wrap:anywhere;
  }

  .level-track{
    margin:8px 0 10px;
  }

  .next-question{
    padding-top:9px;
    overflow:hidden;
  }

  .next-meta{
    font-size:7.5px;
    margin-bottom:5px;
  }

  .next-question h2{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0;
    font-size:17px;
    line-height:1.16;
    letter-spacing:-.28px;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .next-note{
    width:100%;
    max-width:100%;
    font-size:9.5px;
    line-height:1.34;
    margin-top:6px;
    overflow-wrap:anywhere;
  }

  .journey-role-row{
    grid-template-columns:1fr;
    gap:6px;
    margin-top:8px;
  }

  .journey-role{
    padding:8px 9px;
    border-radius:13px;
  }

  .journey-role strong{font-size:9px}
  .journey-role small{font-size:8px}

  .journey-actions{
    grid-template-columns:1fr;
    gap:7px;
    margin-top:9px;
  }

  .journey-actions .primary,
  .browse-btn{
    width:100%;
    min-width:0;
    min-height:44px;
  }

  .browse-btn{
    font-size:10px;
    white-space:normal;
  }

  .levels-explainer{
    padding:9px 10px;
    font-size:9px;
    line-height:1.4;
    border-radius:14px;
    overflow-wrap:anywhere;
  }

  .browser-card{
    margin-top:8px;
    padding:10px;
    border-radius:18px;
    overflow:hidden;
  }

  .library-head{
    min-width:0;
  }

  .library-head > *{
    min-width:0;
  }

  .library-head h2{font-size:16px}
  .library-head p{
    font-size:9px;
    overflow-wrap:anywhere;
  }

  .bottom-dock{
    left:8px;
    right:8px;
    bottom:calc(4px + var(--safeBottom));
    width:auto;
    max-width:none;
    transform:none;
    padding:4px;
    gap:4px;
    border-radius:18px;
  }

  .dock-btn{
    min-width:0;
    min-height:48px;
    padding:6px 2px 5px;
  }

  .dock-btn span{
    font-size:14px;
    margin-bottom:2px;
  }

  .dock-btn b{
    font-size:8.5px;
  }
}