:root{
  --bg:#10151f; --panel:#19212f; --panel-2:#202a3c; --line:#2c3850;
  --ink:#eef2f8; --muted:#9aa7bd;
  --prg:#c8763c; --por:#7a8c46; --lis:#3f8fa3;
  --gold:#e6b450; --done:#5a6678; --radius:14px;
  --danger:#ffb3bd; --danger-bg:rgba(122,36,48,.3); --danger-line:rgba(122,36,48,.5);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;background:#0a0e15;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}
.hidden{display:none !important;}

/* app shell — phone-width column centered on desktop */
#app{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;}
.screen{padding:10px 14px 90px;flex:1;display:flex;flex-direction:column;animation:fade .18s ease;}
@keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* top bars */
.topbar{display:flex;align-items:center;gap:10px;padding:12px 2px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:20;}
.icbtn{width:32px;height:32px;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:1rem;flex:0 0 auto;}
.icbtn:active{background:var(--panel-2);}
.topttl{font-weight:700;font-size:.98rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3f8fa3,#7a8c46);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex:0 0 auto;overflow:hidden;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.clockchip{font-size:.66rem;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap;}
.bell{position:relative;}
.badge{position:absolute;top:-5px;right:-5px;background:#e8702e;color:#fff;font-size:.58rem;font-weight:700;min-width:15px;height:15px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;border:1.5px solid var(--bg);}
.bell.pulse{animation:bellpulse 1.8s ease-in-out infinite;}
@keyframes bellpulse{0%,100%{box-shadow:0 0 0 0 rgba(232,112,46,.5);}50%{box-shadow:0 0 0 6px rgba(232,112,46,0);}}
@media (prefers-reduced-motion:reduce){.bell.pulse{animation:none;}}

.banner{font-size:1.35rem;font-weight:800;letter-spacing:.3px;margin:14px 2px 10px;}

/* search + filters + chips */
.search{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font-size:.88rem;font-family:inherit;}
.search::placeholder{color:var(--muted);}
.filters{display:flex;gap:6px;flex-wrap:wrap;margin:9px 0 4px;}
.chip{font-size:.74rem;font-weight:600;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap;}
.chip.on{background:#4a5677;color:#fff;border-color:transparent;}

/* trip bubbles */
.trip{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:13px;margin:9px 0;position:relative;}
.trip h3{margin:0 0 3px;font-size:1.02rem;}
.trip .meta{font-size:.78rem;color:var(--muted);}
.trip .row{display:flex;align-items:center;gap:6px;margin-top:10px;}
.rolechip{font-size:.62rem;font-weight:700;color:var(--gold);background:rgba(230,180,80,.14);border-radius:4px;padding:2px 6px;letter-spacing:.3px;text-transform:uppercase;}
.rolechip.member{color:var(--lis);background:rgba(63,143,163,.16);}
.rolechip.manager{color:var(--lis);background:rgba(63,143,163,.16);}
.draft{position:absolute;top:11px;right:11px;font-size:.6rem;font-weight:700;color:#e87d3e;background:rgba(232,125,62,.14);border-radius:4px;padding:2px 6px;}
.miniav{width:21px;height:21px;border-radius:50%;background:#36425e;display:inline-flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;margin-left:-5px;border:1.5px solid var(--panel);}
.addbtn{width:100%;background:transparent;border:1px dashed var(--line);border-radius:var(--radius);padding:12px;color:var(--gold);font-weight:600;font-size:.88rem;margin:6px 0 4px;}
.addbtn:active{background:rgba(230,180,80,.06);}

/* section headers + list rows */
.sect{font-size:.84rem;font-weight:700;margin:18px 2px 7px;display:flex;justify-content:space-between;align-items:center;}
.seeall{font-size:.72rem;color:var(--gold);font-weight:600;}
.listrow{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin:6px 0;}
.listrow:active{background:var(--panel-2);}
.ricon{width:28px;height:28px;border-radius:7px;background:var(--panel-2);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex:0 0 auto;}
.rtext{flex:1;min-width:0;}
.rtext .rn{font-size:.84rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rtext .rs{font-size:.72rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crosseye{display:inline-flex;align-items:center;color:var(--muted);opacity:.85;flex:0 0 auto;}

/* settings rows */
.setgrp{font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:var(--gold);font-weight:700;margin:18px 2px 6px;}
.setrow{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:11px;margin:5px 0;font-size:.84rem;gap:10px;}
.setrow .v{color:var(--muted);font-size:.8rem;text-align:right;}
.toggle{width:36px;height:20px;border-radius:999px;background:var(--line);position:relative;flex:0 0 auto;border:none;padding:0;}
.toggle.on{background:var(--por);}
.toggle i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s;}
.toggle.on i{left:18px;}

/* trip hero */
.hero{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin:10px 0;}
.heroimg{aspect-ratio:16/5;background:linear-gradient(135deg,#c8763c33,#3f8fa344),repeating-linear-gradient(45deg,#19212f,#19212f 10px,#202a3c 10px,#202a3c 20px);background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:flex-end;padding:7px;}
.editimg{font-size:.64rem;background:rgba(16,21,31,.7);border:1px solid var(--line);border-radius:6px;padding:3px 7px;color:var(--ink);}
.herobar{display:flex;align-items:center;gap:10px;padding:10px;background:var(--panel);flex-wrap:wrap;}
.widget{font-size:.74rem;color:var(--muted);display:flex;align-items:center;gap:4px;}
.nextbtn{margin-left:auto;font-size:.72rem;font-weight:700;color:#10151f;background:var(--gold);border:none;border-radius:999px;padding:6px 12px;}

/* bubble nav */
.bubbles{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none;}
.bubbles::-webkit-scrollbar{display:none;}
.bub{flex:0 0 auto;padding:8px 14px;border-radius:999px;font-size:.84rem;font-weight:600;background:var(--panel);color:var(--muted);border:1px solid var(--line);white-space:nowrap;}
.bub.active{color:#fff;border-color:transparent;background:#4a5677;}
.bub.leg0.active{background:var(--prg);} .bub.leg1.active{background:var(--por);} .bub.leg2.active{background:var(--lis);}
.bub.leg3.active{background:#8a5a9a;} .bub.leg4.active{background:#5a8a7a;}
.bub.tix.active{background:var(--gold);color:#10151f;} .bub.saved.active{background:#6a8f5a;color:#10151f;}

/* day strip */
.daystrip{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:8px;}
.daystrip::-webkit-scrollbar{display:none;}
.day{flex:0 0 auto;padding:7px 12px;border-radius:10px;font-size:.74rem;font-weight:600;background:var(--panel);color:var(--muted);border:1px solid var(--line);white-space:nowrap;text-align:center;line-height:1.25;}
.day.active{background:var(--prg);color:#fff;border-color:transparent;}
.day b{display:block;font-size:.84rem;}

/* activity rows */
ul.stops{list-style:none;margin:0;padding:0;}
li.stop{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;border-bottom:1px solid rgba(44,56,80,.5);border-left:3px solid transparent;}
li.stop.meal{border-left-color:var(--prg);} li.stop.activity{border-left-color:var(--lis);} li.stop.transport{border-left-color:var(--por);}
li.stop.lodging{border-left-color:var(--gold);}
.time{flex:0 0 auto;min-width:50px;color:var(--muted);line-height:1.05;white-space:nowrap;padding-top:1px;}
.time b{font-size:.92rem;font-weight:700;color:var(--ink);}
.time .ap{font-size:.56rem;font-weight:600;color:var(--muted);margin-left:2px;text-transform:uppercase;letter-spacing:.3px;vertical-align:1px;}
.stopbody{flex:1;min-width:0;}
.place{font-size:.94rem;font-weight:600;}
.placesub{display:block;font-size:.76rem;color:var(--muted);}
.chips{display:flex;align-items:center;gap:8px;margin-top:4px;flex-wrap:wrap;}
.usertag{font-size:.62rem;font-weight:700;color:var(--gold);background:rgba(230,180,80,.14);border-radius:4px;padding:1px 5px;letter-spacing:.3px;}
.pencil{flex:0 0 auto;color:var(--muted);font-size:1rem;align-self:center;background:none;border:none;padding:4px;}
.maplink{font-size:.68rem;color:var(--lis);background:none;border:none;padding:0;}
.ckbox{flex:0 0 auto;width:21px;height:21px;border-radius:6px;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;color:transparent;align-self:flex-start;margin-top:1px;background:none;}
.ckbox.on{background:var(--por);border-color:var(--por);color:#fff;}
.dayprog{display:flex;align-items:center;gap:9px;margin:0 2px 8px;}
.dayprog-bar{flex:1;height:6px;border-radius:999px;background:var(--panel-2);overflow:hidden;}
.dayprog-bar i{display:block;height:100%;background:var(--por);transition:width .25s;}
.dayprog-txt{font-size:.68rem;color:var(--muted);white-space:nowrap;}
.rating{font-size:.68rem;color:var(--gold);letter-spacing:1px;background:none;border:none;padding:0;}
.rating small{color:var(--muted);letter-spacing:0;font-size:.62rem;}
.rating.rate-cta{color:var(--muted);letter-spacing:0;font-weight:600;}
.plink{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(63,143,163,.5);}
.tappable{cursor:pointer;}
.place.tappable:active,.placesub.tappable:active{opacity:.55;}

/* competing slot */
li.stop.slot{border-left-color:var(--gold);background:rgba(230,180,80,.04);}
.slothead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.slotbadge{font-size:.62rem;font-weight:700;color:var(--gold);background:rgba(230,180,80,.14);border-radius:4px;padding:3px 8px;white-space:nowrap;border:none;}
.chips .slottoggle{margin-left:auto;}
.slotopts{margin-top:8px;display:flex;flex-direction:column;gap:5px;}
.opt{display:flex;align-items:center;gap:8px;font-size:.82rem;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;}
.opt.win{border-color:var(--gold);}
.optrank{font-size:.92rem;color:var(--gold);flex:0 0 auto;}
.optname{flex:1;}
.lockbadge{font-size:.72rem;}
.votebtn{margin-top:4px;align-self:flex-start;font-size:.72rem;font-weight:700;color:#10151f;background:var(--gold);border:none;border-radius:999px;padding:7px 15px;}

/* manage trip */
.userrow{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;margin:6px 0;}
.urole{font-size:.62rem;font-weight:700;border-radius:4px;padding:2px 6px;letter-spacing:.3px;text-transform:uppercase;}
.urole.owner{color:var(--gold);background:rgba(230,180,80,.14);}
.urole.manager{color:var(--lis);background:rgba(63,143,163,.16);}
.urole.member{color:var(--muted);background:var(--panel-2);}
.permline{font-size:.68rem;color:var(--muted);margin-top:2px;}
.pubrow{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;margin:8px 0;gap:10px;}
.legblock{border:1px solid var(--line);border-radius:10px;padding:9px;margin:6px 0;background:var(--panel);}
.legrow{display:flex;align-items:center;gap:8px;padding:3px 0;}
.legname{flex:1;font-size:.88rem;font-weight:600;}
.legname small{font-weight:400;color:var(--muted);font-size:.72rem;}
.legthumb,.daythumb{width:28px;height:28px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;flex:0 0 auto;overflow:hidden;}
.legthumb img,.daythumb img{width:100%;height:100%;object-fit:cover;}
.dayrow{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);padding:6px 0 6px 8px;border-top:1px solid rgba(44,56,80,.4);margin-top:5px;}
.imgbtn{font-size:.64rem;color:var(--lis);border:1px solid var(--line);border-radius:6px;padding:3px 8px;flex:0 0 auto;background:none;}
.imgbtn.sm{font-size:.6rem;padding:2px 7px;margin-left:auto;}
.addsub{font-size:.72rem;color:var(--gold);padding:7px 0 2px 8px;background:none;border:none;display:block;}

/* saved sub-toggle */
.subtog{display:flex;gap:6px;margin:8px 0;}
.subtog .chip{flex:1;text-align:center;}

/* tickets grid */
.tixgrouphead{font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin:14px 2px 8px;}
.tixgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tixcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px;}
.tixqr{width:100%;max-width:160px;aspect-ratio:1;border-radius:8px;background:#fff;padding:8px;display:block;overflow:hidden;}
.tixqr img{width:100%;height:100%;object-fit:contain;}
.qrmock{width:100%;height:100%;background:repeating-linear-gradient(90deg,#000 0 6px,#fff 6px 12px),repeating-linear-gradient(0deg,#000 0 6px,transparent 6px 12px);background-blend-mode:multiply;border:4px solid #000;border-radius:3px;}
.tixactions{display:flex;align-items:center;gap:8px;margin-top:10px;}
.tixqrbtn{flex:1;font-size:.74rem;font-weight:700;color:#10151f;background:var(--gold);border:none;border-radius:8px;padding:8px 10px;}
.tixqrbtn:active{opacity:.85;}
.tixcard .tixname{margin-top:0;}
/* large QR viewer */
.qrviewer{position:relative;width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin:0 14px;align-self:center;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5);}
.qrclose{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font-size:.9rem;}
.qrtitle{font-size:1rem;font-weight:700;margin:2px 30px 12px;}
.qrbig{width:100%;max-width:300px;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:10px;padding:10px;}
.tixname{font-size:.9rem;font-weight:700;margin-top:9px;line-height:1.2;}
.tixsub{font-size:.74rem;color:var(--muted);margin-top:2px;}
.tixdate{font-size:.64rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--gold);margin-top:5px;}

/* empty / note */
.note{font-size:.7rem;color:var(--muted);font-style:italic;margin-top:8px;}
.empty{text-align:center;color:var(--muted);font-size:.84rem;padding:30px 16px;}

/* ===== modal / dialogue system ===== */
.backdrop{position:fixed;inset:0;background:rgba(8,11,17,.82);display:flex;align-items:flex-end;justify-content:center;z-index:100;animation:fade .15s ease;}
@media(min-width:431px){.backdrop{align-items:center;}}
.modal{width:100%;max-width:430px;max-height:92vh;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;padding:16px;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:slideup .2s ease;}
@media(min-width:431px){.modal{border-radius:var(--radius);}}
@keyframes slideup{from{transform:translateY(20px);opacity:.6;}to{transform:none;opacity:1;}}
.modal h4{margin:0 0 4px;font-size:1.05rem;}
.modal .sub{font-size:.74rem;color:var(--muted);margin-bottom:8px;}
.modal label{display:block;font-size:.7rem;color:var(--muted);margin:10px 0 3px;}
.fld{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:10px 11px;color:var(--ink);font-size:.86rem;font-family:inherit;}
select.fld{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%239aa7bd' stroke-width='2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:28px;}
textarea.fld{min-height:60px;resize:vertical;}
.row2{display:flex;gap:8px;} .row2>*{flex:1;min-width:0;}
.visrow{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap;}
.visrow .chip{flex:1;text-align:center;min-width:60px;}
.btns{display:flex;gap:8px;margin-top:16px;}
.btn{flex:1;text-align:center;border-radius:9px;padding:11px;font-weight:600;font-size:.86rem;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);}
.btn.save{background:var(--gold);color:#10151f;border-color:transparent;}
.btn.del{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line);}
.btn.sm{flex:0 0 auto;padding:8px 13px;font-size:.76rem;}

/* popover (smaller centered card) */
.pop{width:100%;max-width:340px;background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:14px;box-shadow:0 12px 30px rgba(0,0,0,.45);margin:0 14px;align-self:center;}
.backdrop.center{align-items:center;}
.pop h5{margin:0 0 6px;font-size:.9rem;display:flex;align-items:center;gap:6px;}
.pop p{margin:0;font-size:.8rem;color:var(--muted);}

/* member picker */
.mp{display:flex;align-items:center;gap:9px;padding:9px;border-radius:8px;background:var(--panel);border:1px solid var(--line);margin:5px 0;}
.av{width:28px;height:28px;border-radius:50%;background:#36425e;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;flex:0 0 auto;}
.mp .nm{flex:1;font-size:.84rem;}
.ck{width:20px;height:20px;border-radius:5px;border:2px solid var(--muted);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:transparent;font-size:.7rem;}
.ck.on{background:var(--por);border-color:var(--por);color:#fff;}

/* permission toggles */
.ptog{display:flex;align-items:center;justify-content:space-between;padding:9px 2px;font-size:.84rem;border-bottom:1px solid rgba(44,56,80,.4);}

/* token grid */
.tokgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:6px;}
.tok{aspect-ratio:1;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
.tok.on{border-color:var(--gold);background:rgba(230,180,80,.12);}

/* emoji rating */
.emojirow{display:flex;justify-content:space-between;gap:6px;margin-top:4px;}
.emj{flex:1;text-align:center;font-size:1.8rem;padding:8px 0;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);filter:grayscale(.5);opacity:.7;}
.emj.on{border-color:var(--gold);background:rgba(230,180,80,.12);filter:none;opacity:1;}

/* rank vote rows */
.rankrow{display:flex;align-items:center;gap:8px;font-size:.86rem;background:var(--panel-2);border:1px solid var(--line);border-radius:9px;padding:11px 10px;margin:5px 0;}
.rgrip{color:var(--muted);cursor:grab;}
.rankrow .up,.rankrow .down{margin-left:auto;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--ink);width:26px;height:26px;}
.rankrow .down{margin-left:6px;}

/* notifications */
.notif{display:flex;gap:9px;align-items:flex-start;padding:9px;border-radius:8px;background:var(--panel);border:1px solid var(--line);margin:5px 0;font-size:.82rem;}
.notif.unread{border-color:rgba(230,180,80,.4);}
.nicon{font-size:1.05rem;flex:0 0 auto;}
.notif b{font-size:.84rem;}
.nsub{font-size:.72rem;color:var(--muted);}

/* crop + zoom */
.cropper-back{z-index:130;}
.cropvp{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:#000;margin:6px auto 0;touch-action:none;cursor:grab;}
.cropvp:active{cursor:grabbing;}
.cropvp img{position:absolute;top:0;left:0;transform-origin:0 0;user-select:none;-webkit-user-drag:none;will-change:transform;max-width:none;}
.cropvp .grid{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:33.33% 33.33%;}
.cropvp.circle .grid{border-radius:50%;background-image:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 0 0 1000px rgba(8,11,17,.5);}
.cropctl{display:flex;align-items:center;gap:10px;margin-top:12px;}
.cropctl input[type=range]{flex:1;accent-color:var(--gold);height:4px;}

/* crop stage */
.cropstage{background:repeating-linear-gradient(45deg,#19212f,#19212f 10px,#202a3c 10px,#202a3c 20px);height:160px;border-radius:9px;position:relative;border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.cropstage img{max-width:100%;max-height:100%;}
.qrbadge{font-size:.68rem;color:#10151f;background:var(--gold);border-radius:6px;padding:4px 9px;font-weight:700;display:inline-block;margin-top:8px;}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel-2);border:1px solid var(--line);color:var(--ink);padding:11px 16px;border-radius:10px;font-size:.84rem;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transition:opacity .2s, transform .2s;pointer-events:none;max-width:90%;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.err{border-color:var(--danger-line);color:var(--danger);}

/* login */
.login{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;text-align:center;gap:14px;}
.logo{width:248px;max-width:80%;height:auto;border-radius:18px;background:#fff;padding:13px 17px;box-shadow:0 14px 40px rgba(0,0,0,.5);}
/* Clerk sign-in mounted as the first screen */
.clerkwrap{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 14px;}
.clerkmount{width:100%;display:flex;justify-content:center;}
.login h1{font-size:2rem;margin:0;letter-spacing:1px;}
.login .tag{color:var(--muted);font-size:.9rem;margin-top:-6px;max-width:300px;text-wrap:balance;}
.bigbtn{width:100%;max-width:320px;background:var(--gold);color:#10151f;border:none;border-radius:12px;padding:14px;font-weight:700;font-size:.95rem;}
.devnote{font-size:.72rem;color:var(--muted);max-width:300px;}

/* spinner */
.spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:rot 1s linear infinite;margin:30px auto;}
@keyframes rot{to{transform:rotate(360deg);}}