:root{
  --bg:#F6F1E8; --bg2:#FBF7F0; --card:#FFFBF4; --card2:#F1E9DC; --line:#EADFCF; --line2:#D9CBB6;
  --text:#2B2622; --muted:#8A7F72; --muted2:#B5A997; --soft:#5C534A;
  --gold:#B8893E; --gold-ink:#FFF8EA; --violet:#8C7BB8; --green:#5F8F6E; --red:#C8695C;
  --green-bg:#DCE8DC; --red-bg:#F3DCD6; --blush:#E7B8B0; --goldsoft:#E9D7B4; --sage:#5F8F6E;
  --serif:'Cormorant Garamond',serif; --sans:Manrope,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#EDE5D8;color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
button{font-family:var(--sans)}
a{color:var(--gold);text-decoration:none}
#frame{min-height:100%;display:flex;align-items:center;justify-content:center;gap:28px;padding:24px}
#phone{position:relative;width:390px;height:844px;background:var(--bg);border-radius:44px;overflow:hidden;box-shadow:0 30px 80px rgba(80,60,30,.25),0 0 0 10px #FFFBF4,0 0 0 12px #D9CBB6}
#screens{position:absolute;inset:0}
#dbg-toggle{display:none}
@media (max-width:900px){#frame{padding:0;gap:0}#phone{width:100vw;height:100vh;border-radius:0;box-shadow:none}body:not(.dbg-open) #debug{display:none}#debug{position:fixed;right:8px;top:52px;width:220px;padding:12px;font-size:12px;background:#FFFBF4;z-index:50;box-shadow:0 10px 30px rgba(0,0,0,.6)}body.dbg-open #debug{display:flex}#dbg-toggle{display:flex;position:fixed;right:8px;top:8px;width:36px;height:36px;border-radius:50%;background:#FFFBF4;border:1px solid #D9CBB6;color:#8A7F72;align-items:center;justify-content:center;z-index:51;font-size:16px;cursor:pointer}}

/* debug panel */
#debug{width:230px;background:#FFFBF4;border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:12px;color:var(--muted)}
#debug .dbg-title{font-family:var(--serif);font-size:18px;color:var(--text)}
#debug label{display:flex;flex-direction:column;gap:4px}
#debug select,#debug button{background:#FFF;color:var(--text);border:1px solid var(--line2);border-radius:9px;padding:8px 10px;font-size:12px;cursor:pointer}
#debug button.danger{color:var(--red)}
#debug .dbg-hint{font-size:11px;color:var(--muted2);line-height:1.4}

/* screens and transitions */
.screen{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;will-change:transform,opacity}
.screen .scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:56px 20px 24px;display:flex;flex-direction:column;gap:14px;scrollbar-width:none}
.screen .scroll::-webkit-scrollbar{display:none}
.screen.has-tabs .scroll{padding-bottom:110px}
.screen.enter-push{animation:pushIn .34s cubic-bezier(.2,.8,.2,1) both}
.screen.exit-push{animation:pushOut .34s cubic-bezier(.2,.8,.2,1) both}
.screen.enter-pop{animation:popIn .32s cubic-bezier(.2,.8,.2,1) both}
.screen.exit-pop{animation:popOut .32s cubic-bezier(.2,.8,.2,1) both}
.screen.enter-fade{animation:fadeIn .26s ease both}
.screen.exit-fade{animation:fadeOut .26s ease both}
.screen.enter-up{animation:upIn .4s cubic-bezier(.2,.8,.2,1) both}
.screen.exit-down{animation:downOut .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes pushIn{from{transform:translateX(100%)}to{transform:none}}
@keyframes pushOut{from{transform:none;opacity:1}to{transform:translateX(-28%);opacity:.4}}
@keyframes popIn{from{transform:translateX(-28%);opacity:.4}to{transform:none;opacity:1}}
@keyframes popOut{from{transform:none}to{transform:translateX(100%)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes upIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes downOut{from{transform:none}to{transform:translateY(100%)}}

/* tab bar */
.tabbar{position:absolute;left:0;right:0;bottom:0;height:92px;background:var(--bg2);border-top:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-around;padding:10px 8px 0;z-index:5}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;min-height:44px;color:var(--muted);font-size:11px;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;background:none;border:0;padding:0}
.tab.on{color:var(--gold)}
.tab .badge{position:absolute;top:-6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--gold);color:var(--gold-ink);font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;font-family:var(--serif)}
.tab.me{margin-top:-26px}
.tab.me .orb{width:56px;height:56px;border-radius:50%;background:var(--card);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;transition:background .2s;box-shadow:0 6px 18px rgba(184,137,62,.18)}
.tab.me.on .orb{background:var(--gold)}
.tab.me.on .orb svg{stroke:var(--gold-ink)}
.tab.me.on .badge{top:-4px;right:0;background:var(--bg);border:1px solid var(--gold);color:var(--gold)}
.tab.pressing{transform:scale(.94);transition:transform .4s}

/* type */
.h1{font-family:var(--serif);font-size:30px;line-height:1.05}
.h2{font-family:var(--serif);font-size:26px;line-height:1.05}
.h3{font-family:var(--serif);font-size:22px;line-height:1.1}
.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow.gold{color:var(--gold)}
.muted{color:var(--muted)}.muted2{color:var(--muted2)}.soft{color:var(--soft)}
.small{font-size:13px;line-height:1.45}.tiny{font-size:11px;line-height:1.4}
.row{display:flex;align-items:center;gap:10px}.between{justify-content:space-between}.col{display:flex;flex-direction:column;gap:8px}
.top{display:flex;justify-content:space-between;align-items:center;min-height:28px}
.pill{font-size:11px;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:4px 10px;background:none;cursor:pointer}
.pill.gold{color:var(--gold)}
.iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer}
.back{width:44px;height:44px;margin-left:-12px;display:flex;align-items:center;justify-content:center;color:var(--muted);background:none;border:0;cursor:pointer}
.divider{height:1px;background:var(--line)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;color:var(--text);cursor:pointer;transition:transform .15s,background .15s;text-align:left;width:100%}
.card:active{transform:scale(.985);background:var(--card2)}
.card.gold{border-color:var(--gold)}
.card .body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.card .title{font-size:15px;font-weight:500;line-height:1.3}
.card .src{font-size:11px;color:var(--muted)}
.card.static{cursor:default}.card.static:active{transform:none;background:var(--card)}
.blur{filter:blur(5px);opacity:.6;pointer-events:none}
.plate{background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.plate-wrap{position:relative}
.plate-over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px 12px}
.addr{display:flex;align-items:center;gap:8px;background:var(--card2);border-radius:12px;padding:8px 8px 8px 12px}
.addr span{flex:1;font-size:13px;letter-spacing:.02em}
.btn{min-height:36px;padding:0 14px;border-radius:9px;border:0;background:var(--gold);color:var(--gold-ink);font-size:12px;font-weight:600;cursor:pointer}
.btn.ghost{background:none;border:1px solid var(--line2);color:var(--muted)}
.btn.big{min-height:52px;border-radius:14px;font-size:15px;width:100%}
.btn.green{background:var(--green-bg);color:var(--green)}.btn.red{background:var(--red-bg);color:var(--red)}
.btn:active{transform:scale(.98)}
.chip{font-size:12px;color:var(--soft);border:1px solid var(--line2);border-radius:999px;padding:6px 12px;background:none;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--card2);color:var(--gold);border-color:var(--gold)}

/* state block */
.state{display:flex;flex-direction:column;gap:8px;padding:4px 0 2px}
.state .name{font-family:var(--serif);font-size:30px;line-height:1.05}
.axes{display:flex;align-items:flex-end;gap:10px}
.axis{display:flex;flex-direction:column;align-items:center;gap:3px;width:34px}
.axis span.bar{width:22px;height:14px;border-radius:3px;background:var(--line2);transition:height .6s cubic-bezier(.2,.8,.2,1),background .4s}
.axis span.lbl{font-size:9px;color:var(--muted2)}
.ask-row{display:flex;align-items:center;gap:6px;background:var(--card);border-radius:12px;padding:6px 6px 6px 12px}
.ask-row span{flex:1;font-size:13px}
.ask-row .btn{min-height:34px;padding:0 12px}
.ask-row.done{justify-content:center;color:var(--green);font-size:13px;padding:10px}

/* sheet */
#sheet-root{position:absolute;inset:0;pointer-events:none;z-index:20}
.sheet-bg{position:absolute;inset:0;background:rgba(43,38,34,.28);opacity:0;transition:opacity .25s;pointer-events:auto}
.sheet-bg.on{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);box-shadow:0 -10px 40px rgba(80,60,30,.18);border-radius:24px 24px 0 0;padding:10px 20px 28px;display:flex;flex-direction:column;gap:12px;transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.8,.2,1);pointer-events:auto;max-height:80%;overflow-y:auto}
.sheet.on{transform:none}
.sheet .grip{width:36px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto 4px}
.sheet .opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid var(--line);background:none;color:var(--text);cursor:pointer;text-align:left;width:100%}
.sheet .opt.on{background:var(--card2)}
.sheet .opt .ring{width:36px;height:36px;border-radius:50%;border:1px solid var(--muted2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;color:var(--text);flex-shrink:0}
.sheet .opt.on .ring{border-color:var(--gold);color:var(--gold)}
.sheet .opt .t{font-size:14px;font-weight:500}.sheet .opt .s{font-size:11px;color:var(--muted)}

/* toast */
#toast{position:absolute;left:20px;right:20px;top:60px;z-index:30;pointer-events:none;display:flex;justify-content:center}
#toast .msg{background:var(--card2);border:1px solid var(--line2);color:var(--text);font-size:13px;padding:10px 14px;border-radius:12px;opacity:0;transform:translateY(-8px);transition:all .25s}
#toast .msg.on{opacity:1;transform:none}

/* rings */
.rings{display:flex;align-items:center;justify-content:center}
@keyframes spinA{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes spinB{from{transform:rotate(360deg)}to{transform:rotate(0)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
.ringA{animation:spinA 28s linear infinite;transform-origin:50% 50%}
.ringB{animation:spinB 44s linear infinite;transform-origin:50% 50%}
.ringC{animation:spinA 70s linear infinite;transform-origin:50% 50%}
.fast .ringA{animation-duration:14s}.fast .ringB{animation-duration:22s}.fast .ringC{animation-duration:36s}
.core{animation:breathe 6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes shimmer{0%{opacity:.35}50%{opacity:.7}100%{opacity:.35}}
.sk{animation:shimmer 1.8s ease-in-out infinite;background:var(--card2);border-radius:8px}
.steps{display:flex;flex-direction:column;gap:6px;font-size:13px;text-align:center}
.steps div{color:var(--muted2);transition:color .3s}
.steps div.now{color:var(--gold)}.steps div.todo{color:var(--text)}

/* chat */
.chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.bubble-me{align-self:flex-end;max-width:85%;background:var(--gold);color:var(--gold-ink);border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:14px;line-height:1.4;animation:fadeIn .25s ease both}
.bubble{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;animation:fadeIn .3s ease both}
.bubble.first{border-radius:16px 16px 16px 4px}
.bubble .k{font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.bubble .t{font-size:13px;line-height:1.45}
.bubble .s{font-size:11px;color:var(--muted)}
.daysep{font-size:11px;color:var(--muted2);text-align:center}
.typing{display:flex;gap:4px;padding:12px 14px;background:var(--card);border-radius:16px 16px 16px 4px;width:max-content}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:block;animation:pulse 1.4s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,80%,100%{opacity:.25}40%{opacity:1}}
.inputbar{padding:0 16px 10px;display:flex;flex-direction:column;gap:8px}
.inputrow{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 8px}
.inputrow input{flex:1;min-width:0;background:none;border:0;color:var(--text);font-family:var(--sans);font-size:14px;min-height:36px;outline:none}
.inputrow .send{width:40px;height:40px;border-radius:50%;background:var(--gold);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.inputrow .horary{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none;cursor:pointer}
.inputrow .horary.on{border-color:var(--gold);background:var(--card2)}
.inputrow .horary .b{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--line2);color:var(--soft);font-size:10px;display:flex;align-items:center;justify-content:center}
.inputrow .horary .b.ok{background:var(--green-bg);color:var(--green)}
.ask-bottom{position:absolute;left:0;right:0;bottom:92px;background:linear-gradient(to top,var(--bg) 70%,transparent)}
.screen.ask .scroll{padding-bottom:230px}

/* periods */
.seg{display:flex;gap:4px;background:var(--card);border-radius:999px;padding:4px}
.seg button{flex:1;min-height:40px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);background:none;border:0;cursor:pointer;transition:all .2s}
.seg button.on{color:var(--gold-ink);background:var(--gold)}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal .wd{font-size:11px;color:var(--muted2);text-align:center}
.cal button{height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;background:none;color:var(--text);border:1px solid transparent;cursor:pointer;padding:0}
.cal button.hard{background:#F3DCD6}.cal button.easy{background:#DCE8DC}.cal button.mid{background:var(--card2)}
.cal button.today{border-color:var(--gold)}.cal button.sel{background:var(--gold);color:var(--gold-ink)}
.cal button.off{color:var(--muted2);opacity:.6}
.period{background:var(--card);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;color:var(--text);cursor:pointer;border:1px solid var(--line);width:100%;text-align:left}
.period.gold{border-color:var(--gold)}
.period .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.period .t b{font-size:14px;font-weight:500;line-height:1.3}
.period .t span{font-size:11px;color:var(--muted);white-space:nowrap}
.bar{height:6px;border-radius:3px;background:var(--card2);position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.period .f{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.trans{display:flex;justify-content:space-between;font-size:13px}

/* me */
.me-img{position:relative;height:430px;display:flex;align-items:center;justify-content:center;border-radius:28px;background:radial-gradient(ellipse at 50% 38%,#FBF3E6 0%,var(--bg) 72%);border:1px solid var(--line);overflow:hidden}
.me-img .glow{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(231,184,176,.45),transparent 70%);animation:breathe 7s ease-in-out infinite}
.theme{background:var(--card);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;color:var(--text);cursor:pointer;width:100%;text-align:left;border:1px solid var(--line)}
.theme .b{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.theme .t{font-size:14px;font-weight:500}.theme .s{font-size:11px;color:var(--muted)}
.lens-row{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.lens-row .g{width:28px;height:28px;border-radius:50%;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:13px;flex-shrink:0;color:var(--gold)}
.source{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--line)}
.source .t{font-size:13px;line-height:1.4}.source .s{font-size:11px;color:var(--muted)}

/* people */
.person{background:var(--card);border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;color:var(--text);cursor:pointer;width:100%;text-align:left;border:1px solid var(--line)}
.person .av{width:40px;height:40px;border-radius:50%;background:var(--card2);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;color:var(--gold);flex-shrink:0}
.person .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.person .n{font-size:14px;font-weight:500}.person .n span{color:var(--muted);font-weight:400}
.person .s{font-size:11px;color:var(--muted)}
.person .st{font-size:11px;color:var(--gold);white-space:nowrap}
.facet{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.facet .h{display:flex;justify-content:space-between;align-items:baseline}
.facet .h b{font-size:14px;font-weight:500}.facet .h span{font-size:12px;color:var(--gold)}
.facet p{margin:0;font-size:13px;line-height:1.45;color:var(--soft)}
.tg-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.tg-row .av{width:40px;height:40px;border-radius:50%;background:#3b8ad9;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.tg-row .b{flex:1}.tg-row .b .n{font-size:14px}.tg-row .b .s{font-size:11px;color:var(--muted)}

/* journal */
.widgets{display:flex;gap:8px}
.widget{flex:1;background:var(--card);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;cursor:pointer;border:1px solid var(--line);color:var(--text);text-align:left}
.widget.on{border-color:var(--gold)}
.widget .v{font-family:var(--serif);font-size:22px;line-height:1}
.widget .l{font-size:11px;color:var(--muted)}
.entry{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;cursor:pointer;animation:fadeIn .3s ease both}
.entry .d{font-size:11px;color:var(--muted2)}
.entry .t{font-size:14px;font-weight:500;line-height:1.3}
.entry .s{font-size:12px;color:var(--muted);line-height:1.4}
.entry .check{display:flex;gap:6px;align-items:center;margin-top:4px}
.entry .check span{flex:1;font-size:12px;color:var(--muted)}
.entry .check .btn{min-height:32px;padding:0 10px}
.entry .result{font-size:12px;color:var(--green)}

/* onboarding forms */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--text);font-family:var(--sans);font-size:15px;outline:none;width:100%}
.field input:focus{border-color:var(--gold)}
.check-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--soft);cursor:pointer}
.check-row i{width:18px;height:18px;border-radius:5px;border:1px solid var(--line2);display:inline-flex;align-items:center;justify-content:center}
.check-row.on i{background:var(--gold);border-color:var(--gold)}
.toggle{width:44px;height:26px;border-radius:13px;background:var(--line2);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s;border:0}
.toggle i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:transform .2s}
.toggle.on{background:var(--gold)}.toggle.on i{transform:translateX(18px)}

/* listening bar */
.listen{display:flex;align-items:center;gap:10px;background:var(--card2);border:1px solid var(--line2);border-radius:14px;padding:10px 12px;animation:fadeIn .3s ease both}
.listen .wave{display:flex;gap:2px;align-items:center;height:18px}
.listen .wave i{width:3px;background:var(--gold);border-radius:2px;animation:wave 1s ease-in-out infinite}
.listen .wave i:nth-child(2){animation-delay:.15s}.listen .wave i:nth-child(3){animation-delay:.3s}.listen .wave i:nth-child(4){animation-delay:.45s}
@keyframes wave{0%,100%{height:4px}50%{height:18px}}
.progress{height:3px;background:var(--line2);border-radius:2px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--gold);width:0;transition:width 1s linear}

/* call */
.call{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.call .orb{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#F7EEDF,var(--bg) 70%);border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;animation:breathe 3s ease-in-out infinite}
.call .orb.talk{animation-duration:1.2s}
.call .end{width:64px;height:64px;border-radius:50%;background:var(--red-bg);color:var(--red);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.transcript{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--soft);text-align:left;width:100%}
.transcript .g{color:var(--text)}.transcript .u{color:var(--gold)}

/* web pages */
.web{background:#FBF7F0}
.web .scroll{padding-top:24px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px}
.plan.on{border-color:var(--gold)}
.plan .price{font-family:var(--serif);font-size:30px}
.plan .price small{font-family:var(--sans);font-size:12px;color:var(--muted)}
.topbar-web{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.logo{font-family:var(--serif);font-size:22px;color:var(--gold)}

/* light theme additions */
@keyframes twinkle{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes halo{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}
.star{animation:twinkle 3s ease-in-out infinite}.star2{animation:twinkle 4s ease-in-out .8s infinite}.star3{animation:twinkle 3.5s ease-in-out 1.6s infinite}
.haloA{animation:halo 7s ease-in-out infinite;transform-origin:50% 50%}
.ringC{animation:spinA 70s linear infinite;transform-origin:50% 50%}

/* radar */
@keyframes radarIn{from{transform:scale(.15);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes dotIn{from{opacity:0}to{opacity:1}}
@keyframes radarPulse{0%,100%{opacity:1}50%{opacity:.75}}
.radar{flex-shrink:0}
.radar-shape{animation:radarIn .9s cubic-bezier(.2,.8,.2,1) both,radarPulse 5s ease-in-out 1s infinite}
.radar-dot{animation:dotIn .4s ease .7s both}
/* listen bar with play/pause */
.listen .pp{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.listen.paused .wave i{animation-play-state:paused;height:6px}
/* me character */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes breatheSoft{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes orbitFast{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.figure{animation:floatY 6s ease-in-out infinite;transform-origin:50% 50%}
.figure .hair{animation:sway 5s ease-in-out infinite;transform-origin:125px 120px}
.figure .body{animation:breatheSoft 4s ease-in-out infinite;transform-origin:125px 180px}
.orbit-fast{animation:orbitFast 30s linear infinite;transform-origin:50% 50%}
.pull-hint{animation:floatY 2.2s ease-in-out infinite}
/* segmented in Ask */
.seg.small button{min-height:32px;font-size:12px}
/* journal timeline scrubber */
.scrub{position:absolute;right:6px;top:150px;bottom:112px;width:28px;z-index:4;touch-action:none}
.scrub .track{position:absolute;left:12px;top:0;bottom:0;width:3px;border-radius:2px;background:var(--line2)}
.scrub .tick{position:absolute;left:0;width:28px;font-size:9px;color:var(--muted2);text-align:center;transform:translateY(-50%)}
.scrub .tick i{display:block;width:9px;height:1px;background:var(--line2);margin:0 auto 2px}
.scrub .handle{position:absolute;left:5px;width:17px;height:17px;border-radius:50%;background:var(--gold);border:2px solid var(--card);box-shadow:0 2px 8px rgba(80,60,30,.25);transform:translateY(-50%);cursor:grab}
.scrub .bubble{position:absolute;right:34px;transform:translateY(-50%);background:var(--text);color:var(--card);font-size:12px;padding:6px 10px;border-radius:10px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.scrub.active .bubble{opacity:1}
.journal-feed{padding-right:26px}

/* fixed headers */
.fixed{flex-shrink:0;padding:56px 20px 10px;display:flex;flex-direction:column;gap:12px;background:var(--bg);position:relative;z-index:3}
.fixed:after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:14px;background:linear-gradient(var(--bg),transparent);pointer-events:none}
.fixed + .scroll{padding-top:8px}
/* ask header icon switch */
.iconseg{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}
.iconseg button{width:40px;height:32px;border-radius:999px;border:0;background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.iconseg button.on{background:var(--gold);color:var(--gold-ink)}
/* call controls */
.callbar{display:flex;justify-content:center;gap:28px;align-items:flex-end;padding:8px 0 24px}
.callbar .cb{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.callbar .cb button{width:56px;height:56px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.callbar .cb button.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.callbar .cb button.end{width:68px;height:68px;background:#C8695C;border-color:#C8695C;color:#fff;box-shadow:0 8px 22px rgba(200,105,92,.35)}
/* journal header */
.jhead{display:flex;flex-direction:column;gap:10px}
.jhead .title{display:flex;justify-content:space-between;align-items:baseline}
.mirror{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.mirror .days{display:grid;grid-template-columns:repeat(31,1fr);gap:2px}
.mirror .days i{display:block;height:14px;border-radius:3px;background:var(--card2)}
.mirror .days i.e{background:#CFE0CF}.mirror .days i.h{background:#EFC9C2}.mirror .days i.m{background:#E9D7B4}.mirror .days i.t{outline:1.5px solid var(--gold);outline-offset:-1.5px}
.mirror .stats{display:flex;gap:6px;flex-wrap:wrap}
.mirror .stats button{font-size:11px;color:var(--soft);border:1px solid var(--line2);border-radius:999px;padding:5px 10px;background:none;cursor:pointer}
.mirror .stats button.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.scrub{right:auto;left:6px}
.scrub .bubble{right:auto;left:34px}
.journal-feed{padding-right:20px;padding-left:40px}
/* calendar month nav */
.calnav{display:flex;align-items:center;justify-content:space-between}
.calnav button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--card);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
/* portrait sheet grip */
.grip-top{width:36px;height:4px;border-radius:2px;background:var(--line2);margin:0 auto}

/* period priority */
.period.p3{background:linear-gradient(90deg,#FBE6E0 0%,var(--card) 60%);border-color:#EFC9C2}
.period.p1{opacity:.78}
.period .pbadge{font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.period.p3 .pbadge{background:#F3DCD6;color:#C8695C}.period.p2 .pbadge{background:#F1E4C8;color:#8A6224}.period.p1 .pbadge{background:var(--card2);color:var(--muted)}
.legend{display:flex;gap:12px;font-size:11px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}
/* chips row */
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin:0 -14px;padding-left:14px;padding-right:14px}
.chips::-webkit-scrollbar{display:none}
.chips button{flex-shrink:0;font-size:11px;color:var(--soft);border:1px solid var(--line2);border-radius:999px;padding:5px 10px;background:none;cursor:pointer;white-space:nowrap}
.chips button.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
/* journal entries, richer */
.entry .kind{font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--card2);color:var(--muted)}
.entry .kind.day{background:#F1E4C8;color:#8A6224}.entry .kind.card{background:#DCE8DC;color:#5F8F6E}.entry .kind.horary{background:#E6E0F0;color:#8C7BB8}.entry .kind.guide{background:#F3DCD6;color:#C8695C}
.entry .ev{font-size:12px;color:var(--soft);line-height:1.4;border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}

/* watercolor cloud (variant B) */
@keyframes blobA{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.08) rotate(6deg)}}
@keyframes blobB{0%,100%{transform:scale(1.05) rotate(0deg)}50%{transform:scale(.95) rotate(-8deg)}}
.blobA{animation:blobA 9s ease-in-out infinite;transform-origin:50% 50%}.blobB{animation:blobB 11s ease-in-out infinite;transform-origin:50% 50%}
.cloud{animation:fadeIn .9s ease both}

/* period timeline */
.tl{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.tl .track{position:relative;height:10px;border-radius:5px;background:var(--card2);margin:14px 0 6px}
.tl .fill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.tl .now{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--card);border:3px solid var(--gold);transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(80,60,30,.25)}
.tl .now span{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--gold);white-space:nowrap}
.tl .mark{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:var(--text);transform:translate(-50%,-50%);opacity:.5}
.tl .mark span{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--muted);white-space:nowrap}
.tl .ends{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.tl .facts{display:flex;gap:14px;font-size:12px;color:var(--soft)}
.tl .facts b{font-family:var(--serif);font-size:20px;font-weight:500;color:var(--text);display:block;line-height:1}

/* watercolor stains on cards */
.card,.period,.theme,.facet,.person,.mirror{position:relative;overflow:hidden}
.stain{position:absolute;display:block;filter:blur(7px);pointer-events:none;z-index:0}
.card > *:not(.stain),.period > *:not(.stain),.theme > *:not(.stain),.facet > *:not(.stain),.person > *:not(.stain){position:relative;z-index:1}
.wash-head{position:relative;height:120px;margin:-12px -20px 0;overflow:hidden}
.wash-head i{position:absolute;display:block;border-radius:50%;filter:blur(18px);opacity:.8}
/* timeline, simplified */
.tl .meta{display:none}

/* calendar: the original form */
.cal button{border-radius:9px;background:none;box-shadow:none;transition:none}
.cal button.hard{background:#F3DCD6}.cal button.easy{background:#DCE8DC}.cal button.mid{background:var(--card2)}
.cal button.today{border-color:var(--gold);box-shadow:none}.cal button.sel{background:var(--gold);color:var(--gold-ink)}
.cal button.off{color:var(--muted2);opacity:.6}
/* the cloud on Today, livelier */
@keyframes cloudA{0%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(10px,-8px) scale(1.18) rotate(10deg)}66%{transform:translate(-8px,6px) scale(.94) rotate(-8deg)}100%{transform:translate(0,0) scale(1) rotate(0deg)}}
@keyframes cloudB{0%{transform:translate(0,0) scale(1.05) rotate(0deg)}40%{transform:translate(-12px,8px) scale(.9) rotate(-12deg)}70%{transform:translate(8px,-10px) scale(1.15) rotate(9deg)}100%{transform:translate(0,0) scale(1.05) rotate(0deg)}}
@keyframes cloudC{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-6px,-12px) scale(1.22)}100%{transform:translate(0,0) scale(1)}}
.cloud .blobA{animation:cloudA 4.5s ease-in-out infinite}.cloud .blobB{animation:cloudB 5.5s ease-in-out infinite}.cloud .blobA:nth-of-type(3){animation:cloudC 3.8s ease-in-out infinite}
.cloud .star{animation-duration:1.6s}.cloud .star2{animation-duration:2.1s}.cloud .star3{animation-duration:1.9s}
/* listening bar anywhere */
.listen{margin:0 0 4px}
/* people day screen */
.pblock{display:flex;flex-direction:column;gap:10px}
.pblock .phead{display:flex;justify-content:space-between;align-items:baseline;padding-top:6px}
.pblock .phead b{font-size:17px;font-weight:500}
.pblock .phead span{font-size:12px;color:var(--gold)}

/* round 6b: the player sits inside the fixed header, above the fade at its bottom edge */
.fixed .listen{position:relative;z-index:1;margin:0}

/* the scrubber's date bubble shares the class name with chat bubbles: the chat fade-in
   animation (fill both) was forcing opacity 1 on it, so it never disappeared */
.scrub .bubble{animation:none;background:var(--text);color:var(--card);border:0;padding:6px 10px;border-radius:10px}

/* round 7: three-way switch on Ask with a lock on the VIP modes */
.iconseg button{width:38px}
.seglock{position:absolute;top:1px;right:3px;width:12px;height:12px;border-radius:50%;background:var(--card2);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.iconseg button.on .seglock{background:var(--gold-ink);color:var(--gold)}

/* round 7b: plain explanation blocks on the locked screens, nothing to tap */
.info{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.info .t{font-size:15px;font-weight:500;line-height:1.3}

/* round 9: an opened card carries a small "seen" eye in its corner; the People card glows */
.card.read .body .title,.period.read .t b{color:var(--soft)}
.card.read::after,.period.read::after{content:"";position:absolute;top:10px;right:12px;width:14px;height:14px;z-index:2;opacity:.75;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7F72' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}
.period.read::after{top:12px;right:14px}
.period.read .pbadge{margin-right:20px}
@keyframes glowRing{0%,100%{opacity:.55;background-position:0% 50%}50%{opacity:1;background-position:100% 50%}}
@keyframes glowHalo{0%,100%{box-shadow:0 0 0 1px rgba(184,137,62,.18),0 0 10px rgba(184,137,62,.14)}50%{box-shadow:0 0 0 1px rgba(184,137,62,.32),0 0 22px rgba(184,137,62,.36)}}
.card.glow,.period.glow{border-color:transparent;animation:glowHalo 3.2s ease-in-out infinite}
.card.glow::before,.period.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(120deg,#B8893E,#E7B8B0,#D9C08A,#B8893E,#E7B8B0);background-size:220% 220%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:glowRing 3.2s ease-in-out infinite}
.card.glow.read,.period.glow.read{animation:none;box-shadow:none}.card.glow.read::before,.period.glow.read::before{animation:none;opacity:.5}

/* round 10: the people row in the portrait is as visible as the big button on "Я" */
.theme.gold{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.theme.gold .t{color:var(--gold-ink);font-weight:600}.theme.gold .s{color:rgba(255,248,234,.8)}.theme.gold svg{stroke:rgba(255,248,234,.8)}
.theme.glow{animation:glowHalo 3.2s ease-in-out infinite}
.theme.glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(120deg,#FFF8EA,#E7B8B0,#FFE3B0,#FFF8EA);background-size:220% 220%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;animation:glowRing 3.2s ease-in-out infinite}

/* round 11: the check row under a card; answers gated until the check time */
.checkrow{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.checkrow .btn{min-height:38px;flex:1;padding:0 8px;font-size:12px}
.checkrow.gated .btn.green,.checkrow.gated .btn.red{opacity:.45}
.checkrow.done{flex-direction:row;align-items:center;justify-content:space-between;color:var(--green);font-size:13px}
.scrub .tick{display:none}

/* round 12: the journal A2: chapters by day, clean cards, outline by result, people blocks, period chapters */
.jchap{display:flex;align-items:baseline;gap:8px;padding-top:8px}
.jchap b{font-size:14px;font-weight:600}.jchap.now b{color:var(--gold)}.jchap span{font-size:11px;color:var(--muted2)}
.jsep{font-size:11px;color:var(--muted2);padding-top:10px;letter-spacing:.06em;text-transform:uppercase}
.jcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;cursor:pointer;animation:fadeIn .3s ease both}
.jcard.yes{border:2px solid var(--green)}.jcard.no{border:2px solid var(--red)}.jcard.dim{opacity:.55}
.jcard .cap{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.jcard .t{font-size:15px;font-weight:500;line-height:1.3}.jcard .s{font-size:12px;color:var(--muted);line-height:1.45}
.jcard .check{display:flex;gap:6px;margin-top:6px}.jcard .check .btn{flex:1;min-height:34px;padding:0 8px;font-size:12px}
.jperson{display:flex;align-items:center;gap:8px;padding-top:2px}
.jperson i{width:22px;height:22px;border-radius:50%;color:var(--gold-ink);font-size:11px;font-weight:600;font-style:normal;display:flex;align-items:center;justify-content:center}
.jperson b{font-size:13px;font-weight:600}.jperson span{font-size:11px;color:var(--muted)}
.jpchap{padding-top:8px;display:flex;flex-direction:column;gap:6px}.jpchap b{font-size:14px;font-weight:600}
.jpchap .bar{height:4px;border-radius:2px;background:var(--line);overflow:hidden}.jpchap .bar i{display:block;height:100%}
.jentry{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 14px;display:flex;gap:10px;align-items:baseline;font-size:13px;line-height:1.4}
.jentry.yes{border:2px solid var(--green)}.jentry.no{border:2px solid var(--red)}
.jentry .d{font-size:11px;color:var(--muted);white-space:nowrap;min-width:46px}
.jhead .seg{width:100%}
/* the journal feed starts 40px from the left so the scrubber line (at 18px) has equal air on both sides;
   the generic .screen .scroll padding was winning over the earlier .journal-feed rule */
.screen .scroll.journal-feed{padding-left:40px;padding-right:20px}

/* round 13: periods in the journal, P2 in the feed, P1 inside */
.jp{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 14px;cursor:pointer;animation:fadeIn .3s ease both}
.jp.ended{opacity:.72}.jp b{font-size:15px;font-weight:600}
.pbar{position:relative;height:4px;border-radius:2px;background:var(--line);margin:16px 6px 0}
.pbar > i:first-child{display:block;height:100%;border-radius:2px}
.pbar .dot{position:absolute;top:-3px;width:10px;height:10px;border-radius:50%;transform:translateX(-50%);border:2px solid var(--card);box-shadow:0 0 0 1px currentColor;color:var(--line2)}
.pbar .dot.yes{color:var(--green)}.pbar .dot.no{color:var(--red)}.pbar .dot.now{width:14px;height:14px;top:-5px;color:var(--gold)}.pbar .dot.start{color:var(--muted2)}
.plabels{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--muted2)}.plabels .now{color:var(--gold);font-weight:600}
.pnow{background:#FBF4E6;border-radius:12px;padding:10px 12px;margin-top:10px;display:flex;flex-direction:column;gap:3px}
.pnow .btn,.pt .btn{flex:1;min-height:32px;font-size:12px;padding:0 8px}
.ptl{display:flex;flex-direction:column}
.pt{position:relative;padding-left:24px;padding-bottom:12px}
.pt:not(:last-child)::before{content:"";position:absolute;left:5px;top:16px;bottom:-2px;width:2px;background:var(--line)}
.pt i{position:absolute;left:0;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line2)}
.pt.yes i{box-shadow:0 0 0 1px var(--green)}.pt.no i{box-shadow:0 0 0 1px var(--red)}.pt.now i{box-shadow:0 0 0 1px var(--gold)}
.pt .box{border-radius:10px;padding:2px 0}
.pt.yes .box{background:#F4F8F4;padding:8px 10px}.pt.no .box{background:#FBF0EE;padding:8px 10px}.pt.now .box{background:#FBF4E6;padding:8px 10px}

/* round 14: thinner result outline, stains on journal cards, a quieter scrubber at rest */
.jcard.yes,.jentry.yes,.pt.yes .box{border-width:1px}.jcard.no,.jentry.no{border-width:1px}
.jcard.yes{border:1px solid var(--green)}.jcard.no{border:1px solid var(--red)}
.jcard,.jp{position:relative;overflow:hidden}
.jcard > *:not(.stain),.jp > *:not(.stain){position:relative;z-index:1}
.scrub .track,.scrub .handle{opacity:.45;transition:opacity .25s}
.scrub.active .track,.scrub.active .handle{opacity:1}

/* round 14b: closed periods sit evenly under a veil (the fade-in animation used to leave some at full strength),
   still tappable; periods that have not started are veiled lightly */
.jp.ended,.jp.ahead{animation:none;opacity:1}
.jp.ended::after,.jp.ahead::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(246,241,232,.55);z-index:3;pointer-events:none}
.jp.ahead::after{background:rgba(246,241,232,.3)}

/* round 15: the card inside the journal (V2) */
.jstat{font-size:12px;font-weight:600;border-radius:999px;padding:5px 10px;background:var(--card2);color:var(--muted)}
.jstat.yes{background:#F4F8F4;color:var(--green)}.jstat.no{background:#FBF0EE;color:var(--red)}.jstat.wait{background:#FBF4E6;color:var(--gold)}
.jdiv{display:flex;align-items:center;gap:10px;padding-top:4px}.jdiv span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.jdiv i{flex:1;height:1px;background:var(--line)}
.jnote{background:var(--card);border-radius:14px 14px 14px 4px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.jcard .jn{font-size:12px;color:var(--soft);font-style:italic;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.static{cursor:default;color:var(--soft)}
.jmini{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center}
.jmini.yes{border-color:var(--green)}.jmini.no{border-color:var(--red)}
.jmini .cap{font-size:10px;letter-spacing:.08em;text-transform:uppercase}.jmini .t{font-size:13px;font-weight:500}
.jmini b{font-size:12px;font-weight:500;color:var(--muted)}.jmini.yes b{color:var(--green)}.jmini.no b{color:var(--red)}
.jentry-screen .inputrow{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 6px 6px 14px}
.jentry-screen .inputrow input{flex:1;min-width:0;background:none;border:0;color:var(--text);font-family:inherit;font-size:14px;min-height:36px;outline:none}
.jentry-screen .send{width:40px;height:40px;border-radius:50%;background:var(--gold);border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}

/* round 15b: a period inside the journal */
.jp .jn{font-size:12px;color:var(--soft);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jentry-screen .source{padding:8px 0;border-bottom:1px solid var(--line)}

/* round 17: what lies ahead is veiled evenly in every journal (the fade-in used to cancel the dimming);
   closed periods stay veiled, running ones at full strength */
.jcard.dim{animation:none;opacity:1}
.jcard.dim::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(246,241,232,.55);z-index:3;pointer-events:none}
.jp.ahead::after{background:rgba(246,241,232,.55)}
/* direct children of a scrolling column never shrink: a card with overflow hidden (for the stains) has min-height 0
   and was being squeezed to 30px at the top of the People screen */
.screen .scroll > *{flex-shrink:0}

/* round 18: the voice cards */
.vcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;cursor:pointer;color:var(--text)}
.vcard .cap{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vcard .line{font-size:14px;line-height:1.45}
.vcard .dot{width:16px;height:16px;border-radius:50%;border:1px solid var(--line2);display:block}
.vcard.on{border-color:var(--gold);background:#FFFBF4}.vcard.on .cap{color:var(--gold)}.vcard.on .dot{background:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 3px var(--card)}

/* round 18b: a way back inside the onboarding */
.oback{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font-size:12px;color:var(--muted);cursor:pointer;margin-top:-4px}

/* round 18c: the voice step as tiles (variant B) with the button fixed at the bottom */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vtile{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:10px 12px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:150px;overflow:hidden;cursor:pointer;color:var(--text);text-align:center;font-family:inherit}
.vtile .vdot{position:absolute;top:10px;right:10px;width:14px;height:14px;border-radius:50%;border:1px solid var(--line2);display:block;z-index:2}
.vtile.on{border-color:var(--gold)}.vtile.on .vdot{background:var(--gold);border-color:var(--gold)}
.vpic{position:relative;width:80px;height:72px}
.vname{font-size:13px;font-weight:600;line-height:1.25;position:relative}.vhint{font-size:11px;color:var(--muted);position:relative}
.screen.onb-voice .scroll{padding-bottom:120px}
.onb-bottom{position:absolute;left:0;right:0;bottom:0;padding:12px 20px 24px;background:linear-gradient(to top,var(--bg) 70%,transparent)}
.onb-bottom .btn.big{min-height:60px;line-height:1.2}

/* round 19: "Я" fills the screen without a gap: the image takes the free height, the hint sits right above the tab bar */
.screen.me .scroll{padding-bottom:100px;justify-content:space-between;gap:12px}
.screen.me .me-img{flex:1;min-height:260px;height:auto}
.screen.me .me-img .figure{width:min(260px,100%);height:auto;max-height:100%}
.me-img .glow{width:220px;height:220px}
.screen.me .pull-hint{margin-top:-4px}

/* bot mode: full screen in Telegram, no prototype panel */
body.bot #frame{padding:0;gap:0}body.bot #phone{width:100vw;height:100vh;height:100dvh;border-radius:0;box-shadow:none}