:root{
  --bg:#0b1220;--panel:#121b2e;--panel2:#18233a;--line:#24314d;--line2:#2f3f60;
  --text:#e8edf7;--muted:#93a1bd;--dim:#6b7a99;--accent:#ffb020;--live:#ff3b4e;--ok:#35d07f;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:14px/1.45 Inter,system-ui,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.display{font-family:"Barlow Condensed",Inter,sans-serif;letter-spacing:.02em;text-transform:uppercase}

/* header */
header{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0f1930,#0b1220);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#0b1220;font:700 18px "Barlow Condensed",Inter,system-ui,sans-serif}
.brand h1{margin:0;font-size:24px;line-height:1}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px;text-transform:none;letter-spacing:0;font-family:Inter}
.spacer{flex:1}
.status{font-size:12px;color:var(--muted);white-space:nowrap}
.btn{border:1px solid var(--line2);background:var(--panel2);border-radius:9px;padding:8px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;font-weight:500}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#111;font-weight:600}
.btn.primary:hover{filter:brightness(1.07)}
.btn.live{background:var(--live);border-color:var(--live);color:#fff;font-weight:600}
.btn.sm{padding:5px 9px;font-size:12px;border-radius:7px}
.btn.ghost{background:transparent}
.btn.danger{color:#ff8a95;border-color:#5a2a35;background:transparent}
.btn:disabled{opacity:.45;cursor:default}

/* live strip */
#liveStrip{display:flex;gap:10px;overflow-x:auto;padding:10px 20px;background:#1a0f17;border-bottom:1px solid #3a1824}
#liveStrip[hidden]{display:none}
.livecard{flex:0 0 auto;display:flex;align-items:center;gap:10px;background:#24131c;border:1px solid #4a1f2c;border-radius:10px;padding:8px 10px;cursor:pointer}
.pill{font:700 11px Inter;letter-spacing:.06em;padding:3px 7px;border-radius:999px;text-transform:uppercase}
.pill.live{background:var(--live);color:#fff;animation:pulse 1.6s infinite}
.pill.soon{background:#3a2c0b;color:var(--accent)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,78,.6)}50%{box-shadow:0 0 0 6px rgba(255,59,78,0)}}

/* layout */
.layout{display:grid;grid-template-columns:310px 1fr;min-height:calc(100vh - 64px)}
aside{border-right:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:12px;background:#0d1526}
main{padding:16px 20px;min-width:0}
.sectionhead{display:flex;align-items:center;justify-content:space-between}
.sectionhead h2{margin:0;font-size:18px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line2);background:transparent;border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--muted)}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text);font-weight:600}

.team{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:10px 10px 10px 14px;position:relative;overflow:hidden}
.team::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c)}
.team.off{opacity:.45}
.team-top{display:flex;align-items:center;gap:8px}
.team-name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.team-name:hover{text-decoration:underline}
.lvl{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line2);border-radius:5px;padding:1px 5px;white-space:nowrap}
.eye{width:28px;height:28px;border-radius:7px;border:1px solid var(--line2);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.next{font-size:12px;color:var(--muted);margin:6px 0 8px}
.next b{color:var(--text);font-weight:500}
.links{display:flex;flex-wrap:wrap;gap:5px}

/* toolbar */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar h2{margin:0;font-size:26px;min-width:200px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.seg button{border:0;background:transparent;padding:7px 12px;cursor:pointer;color:var(--muted);font-weight:500}
.seg button.on{background:var(--panel2);color:var(--text)}
.navbtns{display:inline-flex;gap:6px}

/* month */
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.dow div{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;padding:0 6px}
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cell{background:var(--panel);border:1px solid var(--line);border-radius:9px;min-height:112px;padding:5px;cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0}
.cell:hover{border-color:var(--line2)}
.cell.out{background:transparent;opacity:.5}
.cell.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.dnum{font-size:12px;color:var(--muted);font-weight:600;padding:1px 3px}
.cell.today .dnum{color:var(--accent)}
.ev{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 20%,transparent);border-radius:5px;padding:3px 5px;font-size:11.5px;line-height:1.25;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev:hover{background:color-mix(in srgb,var(--c) 34%,transparent)}
.ev .t{color:var(--muted);margin-right:3px}
.ev.islive{box-shadow:inset 0 0 0 1px var(--live)}
.more{font-size:11px;color:var(--muted);padding:0 4px}
.dots{display:none;gap:3px;flex-wrap:wrap;padding:0 3px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.35)}

/* week */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wcol{background:var(--panel);border:1px solid var(--line);border-radius:10px;min-height:340px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.wcol.today{border-color:var(--accent)}
.whead{font-size:12px;color:var(--muted);display:flex;justify-content:space-between}
.whead b{font:700 20px "Barlow Condensed",Inter,system-ui,sans-serif;color:var(--text)}
.wcol.today .whead b{color:var(--accent)}
.wev{border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);border-radius:7px;padding:6px 7px;font-size:12px;cursor:pointer;text-align:left;border-top:0;border-right:0;border-bottom:0;width:100%}
.wev .tm{color:var(--muted);font-size:11px}
.wev .mu{font-weight:600;margin:1px 0}
.wev .tn{font-size:11px;color:var(--muted)}

/* list */
.listday{margin-bottom:18px}
.listday h3{margin:0 0 8px;font-size:17px;color:var(--muted)}
.listday h3.today{color:var(--accent)}
.row{display:grid;grid-template-columns:86px 1fr auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:10px;padding:10px 12px;margin-bottom:6px;cursor:pointer}
.row:hover{border-color:var(--line2);border-left-color:var(--c)}
.row .tm{font:700 18px "Barlow Condensed",Inter,system-ui,sans-serif;color:var(--text)}
.row .tm small{display:block;font:500 11px Inter;color:var(--muted)}
.row .mu{font-weight:600}
.row .sub{font-size:12px;color:var(--muted)}
.row .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.result{font-weight:700;color:var(--accent)}

/* empty */
.empty{border:1px dashed var(--line2);border-radius:var(--r);padding:28px;text-align:center;color:var(--muted)}
.empty h3{color:var(--text);margin:0 0 6px;font-size:22px}
.hero{max-width:640px;margin:30px auto;text-align:center}
.hero h2{font-size:40px;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 18px}
.hero .ways{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0;text-align:left}
.hero .ways div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:13px;color:var(--muted)}
.hero .ways b{display:block;color:var(--text);margin-bottom:3px}

/* modal */
#modal{position:fixed;inset:0;background:rgba(3,7,15,.72);display:none;align-items:flex-start;justify-content:center;padding:40px 14px;overflow:auto;z-index:50}
#modal.open{display:flex}
.sheet{background:var(--panel);border:1px solid var(--line2);border-radius:16px;width:100%;max-width:640px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.sheet-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.sheet-h h2{margin:0;font-size:24px;flex:1;min-width:0}
.sheet-b{padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.sheet-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.x{border:0;background:transparent;color:var(--muted);font-size:22px;cursor:pointer;line-height:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:500}
input[type=text],input[type=url],input[type=email],input[type=date],input[type=time],select,textarea{background:var(--bg);border:1px solid var(--line2);border-radius:8px;padding:8px 10px;width:100%;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
textarea{min-height:110px;resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:12.5px}
.hint{font-size:12px;color:var(--dim)}
.swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sw{width:26px;height:26px;border-radius:7px;border:2px solid transparent;cursor:pointer;background:var(--c)}
.sw.on{border-color:#fff}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding:0 18px}
.tabs button{border:0;background:transparent;padding:10px 10px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;font-weight:500}
.tabs button.on{color:var(--text);border-bottom-color:var(--accent)}
table.roster{width:100%;border-collapse:collapse;font-size:13px}
table.roster th{text-align:left;color:var(--dim);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.06em;padding:6px;border-bottom:1px solid var(--line)}
table.roster td{padding:6px;border-bottom:1px solid var(--line)}
table.roster td.num{font:700 16px "Barlow Condensed",Inter,system-ui,sans-serif;color:var(--accent);width:44px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.matchup{display:flex;align-items:center;gap:12px}
.badge{width:46px;height:46px;border-radius:11px;background:var(--c);display:grid;place-items:center;font-size:22px;flex:0 0 auto}
.glist .g{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.glist .g:last-child{border-bottom:0}
.glist .g .d{width:92px;color:var(--muted);flex:0 0 auto}
.glist .g .m{flex:1;min-width:0;cursor:pointer}
.glist .g .m:hover{text-decoration:underline}
.helper{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.helper h4{margin:0 0 6px;font-size:13px}
.check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.preview{max-height:220px;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12.5px}
.preview div{padding:3px 0;border-bottom:1px solid var(--line)}
.preview div:last-child{border:0}
.banner{background:#1d2840;border:1px solid var(--line2);border-radius:10px;padding:8px 12px;font-size:12.5px;color:var(--muted);margin-bottom:12px}
/* trips */
.tbadge{background:var(--live);color:#fff;border-radius:999px;font-size:10px;font-weight:700;padding:1px 6px;margin-left:4px}
.tripbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;margin-bottom:14px}
.tripbar label.f{min-width:120px}
.tripbar .home{flex:1 1 220px}
.trip{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
.trip.new{border-color:var(--accent)}
.trip-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.trip-h h3{margin:0;font-size:20px;flex:1;min-width:200px}
.trip-h .meta{font-size:12px;color:var(--muted)}
.trip-b{padding:10px 14px;display:flex;flex-direction:column;gap:10px}
.tteam{border-left:4px solid var(--c);padding-left:10px}
.tteam .nm{font-weight:600}
.tteam .pl{font-size:12px;color:var(--accent)}
.tteam .gm{font-size:13px;color:var(--muted);cursor:pointer}
.tteam .gm:hover{color:var(--text)}
.h2h{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:6px;cursor:pointer;flex-wrap:wrap}
.vs2{font:700 16px "Barlow Condensed",Inter,system-ui,sans-serif;letter-spacing:.03em}
.star{color:var(--accent)}
.players{font-size:12px;color:var(--accent);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:9px 14px;border-radius:10px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
#toast.show{opacity:1}

@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  aside{border-right:0;border-bottom:1px solid var(--line)}
  #teamList{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
  .week{grid-template-columns:1fr}
  .wcol{min-height:0}
}
@media (max-width:640px){
  header{padding:10px 12px;flex-wrap:wrap}
  .brand small,.status{display:none}
  main{padding:12px}
  .cell{min-height:58px;padding:3px}
  .cell .ev,.cell .more{display:none}
  .dots{display:flex}
  .toolbar h2{font-size:22px;min-width:0;flex:1 0 100%}
  .row{grid-template-columns:64px 1fr}
  .row .acts{grid-column:1/-1;justify-content:flex-start}
  .grid2{grid-template-columns:1fr}
  .hero .ways{grid-template-columns:1fr}
  .hero h2{font-size:30px}
}

/* ---------- public app additions ---------- */
html,body{min-height:100%}
body{padding-bottom:env(safe-area-inset-bottom)}
header{padding-top:max(14px,env(safe-area-inset-top))}
.avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:var(--panel2);display:grid;place-items:center;cursor:pointer;font-weight:700;overflow:hidden;padding:0}
.avatar img{width:100%;height:100%;object-fit:cover}
#authScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.authcard{max-width:420px;width:100%;background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:26px;text-align:center}
.authcard .logo{width:56px;height:56px;font-size:28px;border-radius:14px;margin:0 auto 12px}
.authcard h1{font-size:40px;margin:0}
.authcard p{color:var(--muted)}
.authcard .btn{width:100%;justify-content:center;padding:11px 14px;margin-top:8px}
.authcard input{margin-top:14px}
.or{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:12px;margin:14px 0 0}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.fine{font-size:11.5px;color:var(--dim);margin-top:16px}
.fine a{color:var(--muted)}
#installBar{display:flex;align-items:center;gap:10px;background:#1d2840;border-bottom:1px solid var(--line2);padding:9px 16px;font-size:13px;color:var(--muted)}
#installBar[hidden]{display:none}
#installBar b{color:var(--text)}
.feedstat{font-size:12px;color:var(--muted)}
.feedstat.bad{color:#ff8a95}
.dirlist{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto}
.diritem{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:9px;padding:8px 10px}
.diritem .nm{flex:1;min-width:0}
.diritem .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer.site{padding:20px;text-align:center;font-size:12px;color:var(--dim)}
footer.site a{color:var(--muted);margin:0 6px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.toggle div{font-size:13px}
.toggle small{display:block;color:var(--dim);font-size:12px}
@media (max-width:640px){
  header .btn .lbl{display:none}
  .seg button{padding:7px 9px}
  #modal{padding:0;align-items:flex-end}
  .sheet{border-radius:16px 16px 0 0;max-height:92vh;overflow:auto}
}

[hidden]{display:none!important}
main,aside{min-width:0}
.seg{max-width:100%;overflow-x:auto}
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .layout aside{order:2;border-top:1px solid var(--line);border-bottom:0}
}
/* back button, roster follow stars */
.backbtn{border:1px solid var(--line2);background:var(--panel);color:var(--text);border-radius:999px;padding:7px 14px 7px 10px;font:600 15px Inter,system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;min-height:38px}
.backbtn:hover{border-color:var(--muted)}
.sheet-h{position:sticky;top:0;z-index:2;background:var(--panel);border-radius:16px 16px 0 0}
.star{border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;color:var(--dim);padding:4px 6px;min-width:36px;min-height:36px}
.star.on{color:var(--accent)}
table.roster tr.followed td{color:var(--accent);font-weight:600}
.inline{display:flex;gap:8px;align-items:center}
.inline input{flex:1;min-width:0}
img.logo{object-fit:contain;flex:0 0 auto;border-radius:4px;background:#fff1;display:inline-block;vertical-align:middle}
.badge img.logo{background:transparent}
/* trip planner */
.planner{border:1px solid var(--line2);border-radius:14px;padding:14px;background:var(--panel);margin-bottom:6px}
.planform{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:8px;align-items:end}
.planform .btn{min-height:40px}
.planopts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.planopts .f.inline{display:flex;gap:8px;align-items:center;margin:0}
.stop{border-top:1px solid var(--line2);margin-top:12px;padding-top:10px}
.stop.past{opacity:.6}
.stop-h{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.stop-pl{color:var(--accent);font-weight:600;margin:6px 0 2px}
.stop-day{font:700 12px Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:10px 0 4px}
.pgame{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;border-left:4px solid var(--c);background:var(--panel2,rgba(255,255,255,.03));margin-bottom:6px;cursor:pointer}
.pgame .pt{width:64px;flex:0 0 auto;font-weight:700;font-size:13px}
.pgame .pm{flex:1;min-width:0}
.pgame .pp{color:var(--accent);font-size:13px;margin-top:2px}
.unk{margin-top:8px}.unk .gm{font-size:13px;padding:3px 0;cursor:pointer}
@media (max-width:640px){.planform{grid-template-columns:1fr 1fr}.planform .dest{grid-column:1/-1}.planform .btn{grid-column:1/-1}}
.brandmark{width:34px;height:34px;border-radius:9px;flex:0 0 auto;display:block}
.brandmark.big{width:64px;height:64px;border-radius:16px;margin:0 auto 12px}
.wordmark{text-transform:none!important;letter-spacing:.01em}
.wordmark span{color:var(--accent)}
.planform{display:flex!important;flex-direction:column;gap:10px}
.planform .step{display:flex;gap:10px;align-items:flex-end}
.planform .step .num{flex:0 0 26px;height:26px;border-radius:50%;background:var(--accent);color:#0b1220;font-weight:800;display:grid;place-items:center;margin-bottom:8px}
.planform .dates{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1;min-width:0}
.planform .f.grow{flex:1;min-width:0;margin:0}
.planform .btn.big{min-height:46px;font-size:16px}
select.mini{padding:2px 6px;font-size:13px;min-height:0;width:auto;display:inline-block}
.planform .step{width:100%}
.planform .f{display:flex;flex-direction:column;align-items:stretch;text-align:left;width:100%;gap:4px}
.planform .f input,.planform .f select{width:100%}
.planform .btn.big{align-self:stretch;justify-content:center}

/* ===== Trips: cards, hero, timeline ===== */
.tripshome{margin-bottom:6px}
.th-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.th-head h3{margin:0 0 2px;font-size:24px}
.newtrip{border:1px solid var(--line2);border-radius:16px;padding:14px;background:linear-gradient(180deg,rgba(255,176,32,.07),transparent 60%),var(--panel);margin-bottom:14px}
.nt-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tripcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tripcard{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:18px;border:1px solid var(--line2);
  background:radial-gradient(120% 90% at 100% 0%,rgba(255,176,32,.18),transparent 55%),linear-gradient(160deg,#16213a,#0e1628);transition:transform .15s,border-color .15s;min-height:150px}
.tripcard:hover,.tripcard:focus-visible{transform:translateY(-2px);border-color:var(--accent)}
.tripcard.past{opacity:.55}
.tc-top{display:flex;justify-content:space-between;align-items:center}
.tc-dates{font:700 12px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.tc-pill{font-size:11px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted)}
.tc-name{font-size:24px;line-height:1.05;color:var(--text)}
.tc-route{color:var(--muted);font-size:13px;line-height:1.4}.tc-route span{color:var(--dim);margin:0 2px}
.tc-stats{display:flex;gap:14px;font-size:12px;color:var(--muted);margin-top:auto}.tc-stats b{color:var(--text);font-size:15px;margin-right:3px}
.tc-dots{display:flex;gap:4px;flex-wrap:wrap;min-height:18px}.tc-dots span{font-size:14px}
.trip-h h2{flex:1}
.trip-hero{border-radius:18px;padding:16px;margin-bottom:14px;border:1px solid var(--line2);
  background:radial-gradient(120% 100% at 100% 0%,rgba(255,176,32,.22),transparent 55%),linear-gradient(160deg,#18233d,#0e1628)}
.trip-hero.solo{margin-top:4px}
.th-name{font-size:32px;margin:2px 0 4px;line-height:1}
.th-dates{font:700 12px Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.th-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.th-stats div{background:rgba(255,255,255,.05);border-radius:12px;padding:10px;text-align:center}
.th-stats b{display:block;font:700 26px "Barlow Condensed",Inter,sans-serif;color:var(--text)}
.th-stats span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.th-actions{display:flex;gap:8px;flex-wrap:wrap}.th-actions .btn{flex:1 1 auto;justify-content:center;text-align:center}
.th-actions .btn.ghost{flex:0 0 auto}
.plan-box{border:1px solid rgba(53,208,127,.45);background:rgba(53,208,127,.07);border-radius:14px;padding:12px 14px;margin-bottom:14px}
.plan-box h4{margin:0 0 8px;color:var(--ok);font:700 13px Inter,sans-serif;text-transform:uppercase;letter-spacing:.07em}
.plan-row{display:grid;grid-template-columns:auto auto 1fr;gap:10px;padding:5px 0;border-top:1px solid rgba(255,255,255,.06);cursor:pointer;font-size:14px}
.plan-row:first-of-type{border-top:0}.pr-d{font-weight:700}.pr-t{color:var(--muted)}.pr-m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tstop{margin-top:16px}.tstop.past{opacity:.6}
.ts-h{display:flex;align-items:flex-start;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line2)}
.ts-pin{font-size:20px;line-height:1.2}.ts-t{flex:1;min-width:0}.ts-t b{font-size:16px}
.tday{font:700 12px Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:14px 0 6px 2px}
.tgame{display:flex;gap:10px;align-items:center;padding:10px 10px 10px 12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid transparent;
  box-shadow:inset 4px 0 0 var(--c);margin-bottom:8px;transition:background .15s,border-color .15s}
.tgame.is-going{border-color:rgba(53,208,127,.55);background:rgba(53,208,127,.08)}
.tg-time{width:52px;flex:0 0 auto;font:700 15px "Barlow Condensed",Inter,sans-serif;letter-spacing:.02em}
.tg-main{flex:1;min-width:0;cursor:pointer}
.tg-mu{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.tg-mu span{color:var(--muted)}
.tg-sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.tg-pl{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pchip{font-size:12px;padding:3px 9px;border-radius:999px;background:rgba(255,176,32,.12);color:var(--accent);font-weight:600;white-space:nowrap}
.pchip.on{background:var(--accent);color:#0b1220}
.tg-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.gobtn{border:1px solid var(--line2);background:transparent;color:var(--text);border-radius:999px;padding:7px 12px;font:600 13px Inter,sans-serif;cursor:pointer;min-width:78px;min-height:34px;transition:all .15s}
.gobtn:hover{border-color:var(--ok)}
.gobtn.on{background:var(--ok);border-color:var(--ok);color:#06210f}
.iconbtn{border:1px solid var(--line2);background:transparent;color:var(--text);border-radius:10px;width:34px;height:34px;display:grid;place-items:center;text-decoration:none;cursor:pointer;font-size:15px;flex:0 0 auto}
.empty-stop{color:var(--muted);font-size:14px;padding:12px;border:1px dashed var(--line2);border-radius:12px;margin-top:10px}
.addstop{margin-top:18px;border:1px solid var(--line2);border-radius:14px;padding:4px 14px}
.addstop summary{cursor:pointer;padding:10px 0;font-weight:700;color:var(--accent);list-style:none}
.addstop summary::-webkit-details-marker{display:none}
.addstop[open] summary{margin-bottom:6px}.addstop[open]{padding-bottom:14px}
.calopt{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;padding:14px;border:1px solid var(--line2);border-radius:14px;margin-bottom:10px;cursor:pointer;color:var(--text);text-decoration:none}
.calopt:hover{border-color:var(--accent)}.calopt span{font-size:22px}.calopt small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.calopt.danger b{color:var(--live)}
@media (max-width:640px){.tripcards{grid-template-columns:1fr}.th-head{flex-direction:column;align-items:stretch}.th-head .btn{align-self:flex-start}}
.th-rename{all:unset;cursor:pointer;display:block;font:700 30px/1.05 "Barlow Condensed",Inter,sans-serif;text-transform:uppercase;color:var(--text);margin-bottom:4px}
.th-rename span{font-size:16px;color:var(--muted);vertical-align:middle}
.tstop.editing{border:1px solid var(--accent);border-radius:14px;padding:12px;background:rgba(255,176,32,.05)}
.ts-edit-h{font-weight:700;color:var(--accent);margin-bottom:8px}
.editbtns{display:flex;gap:8px}.editbtns .btn.big{flex:1}
.ts-h .iconbtn+.iconbtn{margin-left:2px}
.th-title{cursor:pointer}.th-title span{font-size:15px;color:var(--muted);vertical-align:middle}