/* Portal-only styles on top of the shared brand variables. */
#toast{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:100}
#toast div{background:var(--dark);color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);animation:pop .25s both;max-width:340px}
#toast div.err{background:var(--bad)}
.vbar{background:#7c3aed;color:#fff;padding:9px 16px;display:flex;gap:12px;align-items:center;justify-content:center;font-weight:600;position:sticky;top:0;z-index:60;flex-wrap:wrap}
.vbar button{background:#fff;color:#7c3aed;padding:4px 12px}
.live-card{border-left:4px solid var(--bad);display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--bad);margin-right:8px;animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}100%{box-shadow:0 0 0 12px rgba(220,38,38,0)}}
.slot{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--br);align-items:center}.slot:last-child{border-bottom:0}
.slot .tm{width:110px;font-weight:600;flex:none;color:var(--pri)}.slot .tt{flex:1}
.empty{padding:34px;text-align:center;color:var(--mut)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:90;padding:16px;animation:pop .2s both}
.modal .box{background:var(--card);border-radius:16px;padding:24px;width:100%;max-width:560px;max-height:90vh;overflow:auto;box-shadow:var(--shadow)}
.modal h2{font-size:19px}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:5px 12px;border-radius:99px;border:1px solid var(--br);cursor:pointer;font-size:13px;user-select:none;background:var(--card)}.chip.on{background:var(--pri);color:#fff;border-color:var(--pri)}
.cc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.cc .card{margin:0;display:flex;flex-direction:column;gap:6px}
.cc .code{font-size:22px;font-weight:800;letter-spacing:-.02em}
.week{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.week .d{background:var(--card);border:1px solid var(--br);border-radius:12px;padding:10px}.week .d b{display:block;margin-bottom:6px}
.week .it{font-size:12.5px;padding:6px 8px;border-radius:8px;background:var(--pri-soft);margin-bottom:6px}.week .it.comb{background:color-mix(in srgb,var(--acc) 22%,white)}
.jitsi{width:100%;height:calc(100vh - 220px);min-height:420px;border:0;border-radius:14px;background:#000}
.bar{height:8px;border-radius:99px;background:var(--br);overflow:hidden}.bar i{display:block;height:100%;background:var(--pri)}
.nav-sec{margin:0}
.bell{position:relative}.badge{position:absolute;top:-4px;right:-4px;background:#dc2626;color:#fff;border-radius:99px;font-size:10px;line-height:1;padding:3px 5px;font-weight:700}.badge[hidden]{display:none}
[data-href]{cursor:pointer}.card[data-href]:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.12)}.card[data-href]{transition:.15s}[data-href]:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
.note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.note.unread{border-left:4px solid var(--pri)}

/* phone bottom bar */
.tabbar{display:none}
@media(max-width:900px){
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--br);padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -6px 20px rgba(0,0,0,.06)}
 .tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--mut);background:transparent;border:0;box-shadow:none;padding:6px 2px;min-height:0;border-radius:10px;text-decoration:none;position:relative}
 .tabbar a.on{color:var(--pri);font-weight:700}.tabbar svg{width:22px;height:22px}
 .tabbar .badge{top:0;right:calc(50% - 20px)}
 .jitsi{height:calc(100vh - 170px)}
 #toast{left:12px;right:12px;bottom:78px}
}

/* ---- v0.12 look: hero, quick actions, skeletons, motion ---- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:-300px 0}100%{background-position:300px 0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#page>*{animation:rise .4s both}#page>*:nth-child(2){animation-delay:.05s}#page>*:nth-child(3){animation-delay:.1s}#page>*:nth-child(4){animation-delay:.15s}#page>*:nth-child(n+5){animation-delay:.2s}
.sk-h,.sk-b,.sk-r i{background:linear-gradient(90deg,var(--br) 0,color-mix(in srgb,var(--br) 40%,white) 150px,var(--br) 300px);background-size:600px 100%;animation:shimmer 1.2s infinite linear;border-radius:12px}
.sk-h{height:34px;width:46%;margin-bottom:18px}.sk-b{height:120px;margin-bottom:14px}.sk-r{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}.sk-r i{height:76px}
.hero{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:22px 24px;border-radius:18px;margin-bottom:18px;color:#fff;background:linear-gradient(120deg,var(--pri),color-mix(in srgb,var(--pri) 55%,var(--acc)));box-shadow:var(--shadow);position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;right:-40px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.12);animation:floaty 5s infinite ease-in-out}
.hero .hello{font-size:24px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}.hero .hello .i{width:26px;height:26px;stroke:#fff;animation:wig 1.6s .4s both}
.hero p{margin:6px 0 2px;font-size:15px;opacity:.95}.hero small{opacity:.8}
.hero .livebtn{background:#fff;color:var(--bad);position:relative;z-index:1;font-weight:700}
.qrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:12px;margin-bottom:20px}
.qa{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border-radius:16px;background:var(--card);border:1px solid var(--br);color:var(--ink,inherit);font-weight:600;font-size:13px;text-align:center;text-decoration:none;transition:.18s}
.qa:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.1);border-color:var(--pri)}
.qa .qi{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--pri-soft);color:var(--pri);transition:.18s}.qa:hover .qi{background:var(--pri);color:#fff;transform:rotate(-6deg) scale(1.08)}
h2 .i{vertical-align:-4px;margin-right:4px;color:var(--pri)}
.empty .i{width:34px;height:34px;color:var(--pri);opacity:.55;animation:floaty 3s infinite ease-in-out}
.slot{border-left:3px solid var(--pri-soft);padding-left:12px;transition:.15s}.slot:hover{border-left-color:var(--pri);background:color-mix(in srgb,var(--pri-soft) 40%,transparent)}
.meter{height:10px;border-radius:99px;background:var(--br);overflow:hidden;margin:8px 0}.meter i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pri),var(--acc));transition:width .8s cubic-bezier(.2,.8,.2,1)}
.steps{display:flex;flex-direction:column;gap:8px;margin:10px 0}.steps .st{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--br);border-radius:12px}
.steps .st b{flex:1}.steps .st.done{background:#f0fdf4;border-color:#bbf7d0}.steps .st.late{background:#fef2f2;border-color:#fecaca}
.chips.fl{margin:6px 0 12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
button .i,.btn .i{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
h1 .i{width:26px;height:26px;vertical-align:-4px;color:var(--pri);margin-right:2px}
.card .i{vertical-align:-4px}
.pill{font-weight:600}
.livebtn2{background:var(--bad)!important;color:#fff!important;display:inline-flex;align-items:center;gap:4px}.livebtn2 .dot{background:#fff;margin-right:2px}
.slot .btn{margin-left:auto;flex:none}
.q-type{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.qcard{border:1px solid var(--br);border-radius:12px;padding:12px;margin:10px 0}
.qcard.ok{background:#f0fdf4;border-color:#bbf7d0}.qcard.no{background:#fef2f2;border-color:#fecaca}.qcard.wait{background:#fffbeb;border-color:#fde68a}