/* =========================================================
   Rydo — design tokens
   ========================================================= */
:root{
  --bg-1:#383d43;
  --bg-2:#17191c;
  --surface:#26292e;
  --surface-2:#2f3338;
  --surface-3:#3a3f46;
  --hairline:#3a3d42;
  --hairline-2:#2a2d31;
  --text:#ffffff;
  --text-dim:#c9cdd2;
  --text-mute:#8b9097;
  --text-faint:#6c7077;
  --gold:#a8a479;       /* khaki gold (active nav, badges) */
  --gold-2:#c3a226;
  --gold-3:#d6b441;
  --gold-soft:rgba(168,164,121,.18);
  --warm:#b15233;       /* warm brown alert */
  --warm-2:#8a3e22;
  --green:#4caf50;
  --green-soft:rgba(76,175,80,.18);
  --blue:#5aa9e6;
  --red:#e34d4d;
  --orange:#e88a3a;
  --skill-beg:#6fa86b;
  --skill-int:#d6a13a;
  --skill-adv:#d35a4a;
  --shadow-card:0 4px 20px rgba(0,0,0,.35);
  --shadow-pop:0 12px 35px rgba(0,0,0,.55);
  --radius-card:20px;
  --radius-pill:999px;
  --radius-tile:14px;
  --w:428px;
  --h:926px;
}

*{box-sizing:border-box}
html,body{height:100%; height:100dvh}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:#0a0b0d;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Prevent over-scroll bounce on iOS Safari which can reveal the URL bar */
  overscroll-behavior:none;
  -webkit-overflow-scrolling:touch;
}

/* Outside-the-phone backdrop */
body::before{
  content:"";
  position:fixed;inset:0;
  background:
    radial-gradient(1100px 650px at 80% -10%, rgba(168,164,121,.10), transparent 60%),
    radial-gradient(900px 700px at -10% 90%, rgba(177,82,51,.12), transparent 60%),
    linear-gradient(180deg,#0c0d0f,#000);
  z-index:-1;
}

/* ============== Device frame ============== */
.device{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:100vw;
  max-height:100dvh;
}
/* Desktop only: show iPhone-style bezel preview */
@media (min-width:900px) and (min-height:1000px){
  .device{
    width:var(--w);
    height:var(--h);
    border-radius:54px;
    box-shadow:
      0 0 0 12px #0c0c0e,
      0 0 0 14px #1c1c20,
      0 30px 80px rgba(0,0,0,.65),
      0 0 1px rgba(255,255,255,.04) inset;
  }
}
.device-shell{
  position:relative;
  width:100%;
  height:100%;
  border-radius:inherit;
  overflow:hidden;
  background:linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 60%);
  isolation:isolate;
}
@media (min-width:900px) and (min-height:1000px){
  .device-shell{ border-radius:42px; }
}

/* Compact mobile tweaks */
@media (max-width:480px){
  .topbar{padding:6px 16px 12px}
  .pad-x, .section-h{padding-left:16px;padding-right:16px}
  .card{padding:14px}
  .scr-header{padding:6px 14px 12px}
  .tile-grid{padding:0 16px;gap:12px}
  .tile{height:148px;padding:18px 12px 14px}
  .tile .ico{width:54px;height:54px}
  .tile .ico svg{width:42px;height:42px}
  .tile .label{font-size:16px}
  .home-indicator{display:none}
}
@media (max-width:380px){
  .tabbar{height:84px;padding:8px 10px 18px}
  #screens{bottom:84px}
  .tab .tab-icon{width:40px;height:40px}
  .tab-label{font-size:10px}
}

/* status bar removed */

/* main screens region — accounts for tabbar + safe-area home indicator */
#screens{
  position:absolute;
  top:0; left:0; right:0;
  bottom: 96px;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  overflow:hidden;
  z-index:1;
  transition:bottom .2s ease;
}
#screens.fullscreen{ bottom:0 }

.screen{
  position:absolute;inset:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding: calc(env(safe-area-inset-top) + 12px) 0 18px;
  scrollbar-width:none;
  display:none;
  background:linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 60%);
}
.screen::-webkit-scrollbar{display:none}
.screen.active{display:block; animation:slideIn .28s ease}
.screen.is-pop{ animation:popIn .26s ease }

@keyframes slideIn{
  from{opacity:.0; transform:translateY(8px) }
  to{opacity:1; transform:translateY(0)}
}
@keyframes popIn{
  from{opacity:0; transform:scale(.985)}
  to{opacity:1; transform:scale(1)}
}

/* ============== Topbar pattern ============== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 22px 14px;
  gap:12px;
}
.topbar .title{
  flex:1;
  text-align:center;
  font-weight:700;font-size:18px;
  letter-spacing:.2px;
}
.icon-btn{
  appearance:none;border:none;cursor:pointer;
  width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #b9b48a, #837e58 70%);
  display:flex;align-items:center;justify-content:center;
  color:#1d1f22;
  box-shadow:0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s ease;
}
.icon-btn:active{transform:scale(.95)}
.icon-btn svg{width:20px;height:20px}
.avatar-btn{
  width:46px;height:46px;border-radius:50%;
  border:2px solid var(--gold);
  background-size:cover;background-position:center;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  flex-shrink:0;
}

/* ============== Tabbar — anchored at bottom with generous padding under labels ============== */
.tabbar{
  position:absolute;
  left:0;right:0;
  bottom: 0;
  height: 96px;
  height: calc(96px + env(safe-area-inset-bottom, 0px));
  display:grid;grid-template-columns:repeat(4,1fr);
  background:linear-gradient(180deg,#1f2226 0%, #15171a 100%);
  border-top:1px solid rgba(255,255,255,.04);
  padding:10px 14px 0;
  padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
  gap:6px;
  z-index:25;
}
.tab{
  appearance:none;border:none;background:transparent;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--text-mute);
  cursor:pointer;
  padding:6px 4px 4px;
  position:relative;
  transition:color .15s ease;
  font:inherit;
}
.tab .tab-icon{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;
  transition:background .2s ease, transform .15s ease;
}
.tab .tab-icon svg{width:22px;height:22px}
.tab.active{ color:#fff }
.tab.active .tab-icon{
  background:radial-gradient(circle at 30% 30%, #c2bd8b, #87825c);
  color:#1d1f22;
  box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.tab:not(.active):active .tab-icon{transform:scale(.92)}
.tab-label{font-size:11px; font-weight:500; letter-spacing:.2px}
.tabbar.hidden, .home-indicator.hidden { display:none }

.home-indicator{
  position:absolute;
  bottom:8px;left:50%;transform:translateX(-50%);
  width:140px;height:5px;border-radius:5px;
  background:rgba(255,255,255,.55);
  z-index:40;
  pointer-events:none;
}

/* ============== Cards / pieces ============== */
.card{
  background:var(--surface);
  border-radius:var(--radius-card);
  padding:18px;
  box-shadow:var(--shadow-card);
}
.card.outline{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.row{display:flex;align-items:center;gap:12px}
.row.between{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:8px}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.muted{color:var(--text-mute)}
.dim{color:var(--text-dim)}
.gold{color:var(--gold-3)}
.center{text-align:center}
.bold{font-weight:700}
.t-12{font-size:12px}.t-13{font-size:13px}.t-14{font-size:14px}.t-15{font-size:15px}
.t-16{font-size:16px}.t-18{font-size:18px}.t-20{font-size:20px}.t-22{font-size:22px}
.t-26{font-size:26px}.t-32{font-size:32px}
.pad-x{padding-left:22px;padding-right:22px}
.pad{padding:22px}
.scroll-x{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 22px 6px}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x > *{scroll-snap-align:start;flex:0 0 auto}

/* Buttons */
.btn{
  appearance:none;border:none;cursor:pointer;
  font:inherit;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:var(--radius-pill);
  font-weight:700;font-size:15px;
  background:linear-gradient(180deg, #bb9a1e, #a38821);
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  transition:transform .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.btn.full{width:100%}
.btn.ghost{
  background:rgba(255,255,255,.06);
  color:#fff;
  box-shadow:none;
}
.btn.danger{ background:linear-gradient(180deg,#b15233,#8a3e22) }
.btn.dark{ background:#1f2226; color:#fff; border:1px solid #34383d }

/* Pills */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  background:rgba(255,255,255,.08); color:var(--text-dim);
}
.pill.gold{ background:rgba(168,164,121,.22); color:#e2dca8 }
.pill.beg{ background:rgba(111,168,107,.22); color:#abd2a7 }
.pill.int{ background:rgba(214,161,58,.22); color:#e9c479 }
.pill.adv{ background:rgba(211,90,74,.22); color:#f0a39a }
.pill.warm{ background:rgba(177,82,51,.22); color:#f0bba6 }

/* Checkbox row */
.check-row{
  display:flex;align-items:center;gap:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.04);
  border-radius:14px;
  cursor:pointer;
  transition:background .15s ease;
  user-select:none;
}
.check-row:hover{background:rgba(255,255,255,.06)}
.check-row .box{
  width:26px;height:26px;border-radius:7px;
  border:1.5px solid #5e636a;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:all .15s ease;
}
.check-row.on .box{
  background:var(--gold);
  border-color:var(--gold);
}
.check-row .box svg{opacity:0; transition:opacity .15s ease; color:#1d1f22}
.check-row.on .box svg{opacity:1}
.check-row .label{font-size:15px;color:var(--text-dim)}
.check-row.on .label{color:#fff}

/* Section headers */
.section-h{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 10px;
}
.section-h .l{font-size:11px;font-weight:700;letter-spacing:1.5px;color:var(--text-mute);text-transform:uppercase}
.section-h .r{font-size:13px;color:var(--gold-3); cursor:pointer}

/* List rows (e.g. learning hub list) */
.list-row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:var(--surface);
  border-radius:14px;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.list-row:hover{ background:#2c3036 }
.list-row:active{transform:scale(.99)}
.list-row .ico{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:var(--gold-3);
}
.list-row .meta{flex:1;min-width:0}
.list-row .meta .t{font-size:15px;font-weight:600}
.list-row .meta .s{font-size:12px;color:var(--text-mute);margin-top:3px}
.list-row .pill{margin-left:auto}

/* Cover card (videos / articles) */
.cover{
  position:relative;border-radius:18px;overflow:hidden;
  background:#1c1f23;
  aspect-ratio:16/10;
  cursor:pointer;
}
.cover img{width:100%;height:100%;object-fit:cover; display:block}
.cover .grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.85) 100%);
}
.cover .pills{position:absolute;top:12px;left:12px;display:flex;gap:6px}
.cover .play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:rgba(0,0,0,.55);
  border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
}
.cover .info{
  position:absolute;left:14px;right:14px;bottom:12px;
  color:#fff;
}
.cover .info .t{font-size:18px;font-weight:800; line-height:1.2}
.cover .info .s{font-size:12px;color:#dadada;margin-top:4px}

/* Tile grid */
.tile-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:0 22px;
}
.tile{
  position:relative;
  height:170px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(239,198,34,.85), rgba(168,140,33,.85));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:22px 14px 18px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.3);
  transition:transform .15s ease, filter .15s ease;
  overflow:hidden;
  text-align:center;
  gap:10px;
}
.tile:hover{filter:brightness(1.05)}
.tile:active{transform:scale(.97)}
.tile .ico{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  color:#1d1f22;
  opacity:.95;
  margin:0 auto;
}
.tile .ico svg{width:56px;height:56px}
.tile.dark{
  background:linear-gradient(180deg, #2a2d32, #1d2024);
  border:1px solid rgba(255,255,255,.06);
}
.tile.dark .ico{color:var(--gold-3); opacity:1}
.tile.dark .label{color:#e9e3b2}
.tile .label{
  font-weight:800;font-size:18px;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  text-align:center;
}
.tile .sub{font-size:12px;color:rgba(255,255,255,.55);text-align:center;margin-top:2px}
.tile.dark .sub{color:var(--text-mute)}
.tile.dark{
  background:linear-gradient(180deg, #2a2d32, #1d2024);
  border:1px solid rgba(255,255,255,.06);
}
.tile.dark .label{color:#e9e3b2}
.tile.dark .ico{color:var(--gold-3)}

/* Stats row */
.stats{
  display:flex;align-items:stretch;justify-content:space-between;
  padding:18px 0;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  margin:18px 0;
}
.stats .stat{flex:1;text-align:center}
.stats .stat .v{font-size:18px;font-weight:700;color:#fff}
.stats .stat .l{font-size:11px;color:var(--text-mute);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}
.stats .stat + .stat{border-left:1px solid rgba(255,255,255,.06)}

/* Avatars / monogram */
.mono{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;color:#fff;
  letter-spacing:.5px;flex-shrink:0;
  background:linear-gradient(135deg,#5a8df0,#3a5fb8);
}
.mono.amber{background:linear-gradient(135deg,#e1a23a,#9d6e1a)}
.mono.green{background:linear-gradient(135deg,#5fb56b,#2d7a3a)}
.mono.cyan{background:linear-gradient(135deg,#3ab4c8,#1a6e7e)}
.mono.violet{background:linear-gradient(135deg,#8b6df0,#523aa8)}
.mono.rose{background:linear-gradient(135deg,#e25d8a,#9a2a55)}
.mono.warm{background:linear-gradient(135deg,#d27249,#8a3e22)}
.mono.indigo{background:linear-gradient(135deg,#4a6db5,#2a3e7c)}
.mono.gray{background:linear-gradient(135deg,#5a6068,#2c3036)}
.mono.gold{background:linear-gradient(135deg,#d6b441,#7d6420); color:#1d1f22}
.mono.lg{width:56px;height:56px;font-size:16px}
.mono.sm{width:34px;height:34px;font-size:11px}
.mono.has-dot::after{
  content:"";
  position:absolute;
  width:11px;height:11px;border-radius:50%;
  background:var(--green);
  border:2px solid var(--surface);
  bottom:0;right:0;
}
.mono-wrap{position:relative;display:inline-flex}

/* Search bar */
.search{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:11px 14px;
  margin:0 22px 12px;
  color:var(--text-mute);
}
.search svg{flex-shrink:0;color:var(--text-mute)}
.search input{
  background:transparent;border:none;outline:none;color:#fff;
  font:inherit;font-size:14px;flex:1;
}
.search input::placeholder{color:var(--text-mute)}

/* Segmented control */
.seg{
  display:flex;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  margin:0 22px 16px;
  padding:5px;
  position:relative;
}
.seg button{
  flex:1;
  appearance:none;border:none;background:transparent;cursor:pointer;
  padding:9px 12px;border-radius:999px;
  font:inherit;font-size:13px;font-weight:600;
  color:var(--text-mute);
  transition:color .15s ease;
}
.seg button.on{
  background:#1f2226;
  color:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}

/* Filter chips */
.chips{display:flex;gap:8px;padding:0 22px 14px;flex-wrap:wrap}
.chip{
  appearance:none;border:none;cursor:pointer;
  padding:8px 14px;border-radius:999px;
  font:inherit;font-size:13px;font-weight:600;
  background:rgba(255,255,255,.05);
  color:var(--text-dim);
  border:1px solid rgba(255,255,255,.05);
}
.chip.on{ background:var(--gold); color:#1d1f22; border-color:var(--gold) }

/* Toast */
.toast{
  position:absolute;
  left:50%;top:80px;transform:translateX(-50%) translateY(-20px);
  background:rgba(20,22,25,.92);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  padding:11px 18px;border-radius:14px;
  font-size:13px;font-weight:600;
  box-shadow:var(--shadow-pop);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:60;
  white-space:nowrap;
  max-width:90%;
  backdrop-filter: blur(10px);
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* Sheet / modal */
.sheet{
  position:absolute;inset:0;
  z-index:50;
  display:flex;align-items:flex-end;
}
.sheet[hidden]{display:none}
.sheet-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(5px);
  animation:fadeIn .25s ease;
}
.sheet-card{
  position:relative;
  width:100%;
  max-height:85%;
  background:linear-gradient(180deg, #2a2e33, #1c1f23);
  border-radius:24px 24px 0 0;
  padding:14px 22px 28px;
  overflow-y:auto;
  box-shadow:0 -10px 40px rgba(0,0,0,.7);
  animation:sheetUp .3s cubic-bezier(.2,.7,.2,1);
}
.sheet-card::before{
  content:"";display:block;
  width:46px;height:5px;border-radius:5px;
  background:rgba(255,255,255,.18);
  margin:0 auto 14px;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}

/* ============== Home dashboard ============== */
.hero-greet{padding:6px 22px 16px}
.hero-greet .hi{font-size:25px;font-weight:800; color:#fff}
.hero-greet .sub{font-size:14px; color:var(--gold-3); margin-top:4px}
.hero-greet .row{margin-top:14px}

.status-card{
  margin:0 22px 14px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;gap:14px;
}
.status-card .ring{
  width:54px;height:54px;border-radius:50%;
  background:rgba(168,164,121,.18);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold-3);
}
.status-card .info .t{font-size:16px;font-weight:700}
.status-card .info .s{font-size:12px;color:var(--text-mute);margin-top:3px}

/* Big call-to-action band (hero on home) */
.hero-band{
  margin:0 22px 16px;
  padding:18px;
  border-radius:22px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(168,164,121,.22), transparent 60%),
    linear-gradient(135deg, #2a2d31, #1a1c1f);
  border:1px solid rgba(168,164,121,.18);
  display:flex;align-items:center;gap:14px;
}
.hero-band .badge{
  width:60px;height:60px;border-radius:50%;
  background:linear-gradient(180deg,#bb9a1e,#a38821);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  color:#1d1f22;
  box-shadow:0 6px 18px rgba(187,154,30,.35);
}
.hero-band .info{flex:1;min-width:0}
.hero-band .info .t{font-size:17px;font-weight:800}
.hero-band .info .s{font-size:13px;color:var(--text-mute);margin-top:4px}
.hero-band .go{color:var(--gold-3)}

/* Map pseudo styling */
.map-bg{
  position:relative;
  aspect-ratio:1/1.1;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px),
    radial-gradient(120% 80% at 50% 30%, #2a2d32, #15171a 100%);
  border-radius:18px;
  margin:0 22px;
  overflow:hidden;
}
.map-bg .road{
  position:absolute;
  background:linear-gradient(180deg, #c39038, #836014);
  height:7px; border-radius:3px;
  filter:drop-shadow(0 0 6px rgba(195,144,56,.5));
}
.map-bg .pin{
  position:absolute;
  width:30px;height:30px;border-radius:50%;
  background:#1c1f23;border:2px solid #fff;
  font-size:10px;font-weight:800;color:#fff;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%);
}
.map-bg .pin.warn{ background:#b15233; border-color:#fff }
.map-bg .pin.green{ background:#3a5e3a; border-color:#fff }
.map-bg .park{
  position:absolute;
  background:#3a4a35;
  border-radius:8px;
  opacity:.55;
}

/* Achievement rings */
.achievement{
  background:var(--surface);
  border-radius:18px;
  padding:18px 14px 16px;
  text-align:center;
  position:relative;
  border:1px solid rgba(255,255,255,.05);
}
.achievement .ico{
  width:54px;height:54px;border-radius:50%;
  margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#bb9a1e,#a38821);
  color:#1d1f22;
}
.achievement.locked{ opacity:.55; filter:grayscale(.5) }
.achievement.locked .ico{ background:#3a3d42; color:#7c8088 }
.achievement .t{font-size:13px;font-weight:700}
.achievement .s{font-size:11px;color:var(--text-mute);margin-top:4px}

/* Notifications */
.notify-row{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 22px;
  border-bottom:1px solid rgba(255,255,255,.04);
  cursor:pointer;
  transition:background .15s ease;
}
.notify-row:hover{background:rgba(255,255,255,.02)}
.notify-row.unread{background:rgba(168,164,121,.05)}
.notify-row .ico{
  width:40px;height:40px;border-radius:50%;
  background:rgba(168,164,121,.16);color:var(--gold-3);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.notify-row .ico.warn{background:rgba(177,82,51,.18);color:#e3927a}
.notify-row .ico.green{background:rgba(76,175,80,.18);color:#88d18b}
.notify-row .ico.blue{background:rgba(90,169,230,.18);color:#9fcaef}
.notify-row .body{flex:1;min-width:0}
.notify-row .body .t{font-size:14px;font-weight:600;color:#fff}
.notify-row .body .s{font-size:13px;color:var(--text-mute);margin-top:2px;line-height:1.4}
.notify-row .body .ts{font-size:11px;color:var(--text-faint);margin-top:6px;text-transform:uppercase;letter-spacing:.4px}
.notify-row.unread::after{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--gold-3);
  flex-shrink:0;align-self:center;
}

/* Settings rows */
.setting-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 18px;
  background:var(--surface);
  cursor:pointer;
  transition:background .15s ease;
}
.setting-row:hover{background:#2c3036}
.setting-row .ico{
  width:36px;height:36px;border-radius:50%;
  background:rgba(168,164,121,.16);color:var(--gold-3);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.setting-row .label{flex:1;font-size:14px;font-weight:500}
.setting-row .val{font-size:13px; color:var(--text-mute)}
.setting-list{
  margin:0 22px 14px;
  border-radius:14px;
  overflow:hidden;
}
.setting-list .setting-row + .setting-row{border-top:1px solid rgba(255,255,255,.04)}

/* Toggle — clearly affords interaction with raised thumb + shadowed track */
.toggle{
  width:54px;height:30px;
  background:#2a2d31;
  border:1px solid rgba(255,255,255,.06);
  border-radius:99px;
  position:relative;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
  flex-shrink:0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
}
.toggle::after{
  content:"";
  position:absolute;
  top:3px;left:3px;
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(180deg,#ffffff,#dcdcdc);
  transition:left .25s cubic-bezier(.34,1.56,.64,1), background .2s ease;
  box-shadow:
    0 2px 4px rgba(0,0,0,.45),
    0 1px 2px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.toggle.on{ background:var(--gold); border-color:var(--gold-3) }
.toggle.on::after{
  left:25px;
  background:linear-gradient(180deg,#fffdf2,#e7d99c);
}
.toggle:active::after{ transform:scale(.92) }

/* Chat bubbles */
.bubble{
  max-width:78%;
  padding:10px 14px;
  border-radius:16px;
  font-size:14px;line-height:1.4;
  word-wrap:break-word;
}
.bubble.me{
  background:linear-gradient(180deg,#bb9a1e,#a38821);
  color:#fff;
  margin-left:auto;
  border-bottom-right-radius:6px;
}
.bubble.them{
  background:rgba(255,255,255,.07);
  color:#fff;
  border-bottom-left-radius:6px;
}
.msg{
  display:flex;gap:8px;align-items:flex-end;
  margin-bottom:10px;
  padding:0 18px;
}
.msg.me{justify-content:flex-end}
.msg .mono{width:30px;height:30px;font-size:10px}
.msg .stack{display:flex;flex-direction:column;gap:4px;max-width:78%}
.msg .name{font-size:11px;color:var(--gold-3);font-weight:700; padding-left:6px}

/* Composer */
.composer{
  margin:0 18px 14px;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;padding:6px 6px 6px 14px;
}
.composer input{
  flex:1;background:transparent;border:none;outline:none;
  color:#fff;font:inherit;font-size:14px;
  padding:8px 0;
}
.composer input::placeholder{color:var(--text-mute)}
.composer .send{
  width:36px;height:36px;border-radius:50%;
  background:var(--gold);color:#1d1f22;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;
}
.composer .send:active{transform:scale(.93)}

/* Alert banner */
.alert{
  margin:0 22px 12px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg,#b15233,#8a3e22);
  display:flex;align-items:center;gap:10px;
  font-size:14px;
  cursor:pointer;
}
.alert .ico{
  width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.alert .body{flex:1;min-width:0}
.alert .body .t{font-weight:700}
.alert .body .s{font-size:12px;opacity:.85}
.alert .x{opacity:.7;cursor:pointer;padding:4px}

/* Heart utility */
.fab{
  position:absolute;
  right:22px; bottom:114px;
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(180deg,#bb9a1e,#a38821);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(0,0,0,.5);
  cursor:pointer;
  z-index:5;
  border:none;
}
.fab:active{transform:scale(.95)}

/* group cover header for group detail */
.group-hero{
  position:relative;
  height:240px;
  margin:0 22px 18px;
  border-radius:22px;
  overflow:hidden;
  background:#22252a;
}
.group-hero .img{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.group-hero .grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.85) 100%);
}
.group-hero .pill{
  position:absolute;left:14px;bottom:62px;
}
.group-hero .name{
  position:absolute;left:14px;right:14px;bottom:14px;
  color:#fff;font-size:24px;font-weight:800;line-height:1.1;
}
.group-hero .back{
  position:absolute;left:14px;top:14px;
}

/* generic header (back + title + avatar) */
.scr-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 18px 14px;gap:10px;
}
.scr-header .title{flex:1;text-align:center;font-weight:700;font-size:18px}

/* "How to connect" tile grid */
.hc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 22px 14px}
.hc-tile{
  background:var(--surface);
  border-radius:16px;
  padding:14px;
  cursor:pointer;
  transition:background .15s ease;
  position:relative;
  min-height:108px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.hc-tile:hover{background:#2c3036}
.hc-tile .ico{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.hc-tile .t{font-size:14px;font-weight:700;color:#fff;margin-top:8px}
.hc-tile .s{font-size:11px;color:var(--text-mute);margin-top:2px}
.hc-tile .arr{
  position:absolute;right:10px;bottom:10px;
  color:var(--text-mute);
}

/* badges nav row */
.badge-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 22px 16px;
  font-size:11px;color:var(--text-mute); letter-spacing:.4px;
  text-transform:uppercase;
}
.badge-row .stage{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(168,164,121,.18);
  color:var(--gold-3);
  padding:6px 12px;border-radius:99px;
  text-transform:none;letter-spacing:0;font-weight:700;font-size:12px;
}

/* Marketplace card */
.mk-card{
  background:var(--surface);
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.04);
}
.mk-card .img{
  height:130px;
  background:linear-gradient(135deg,#3a3d42,#22252a);
  position:relative;
}
.mk-card .body{padding:12px}
.mk-card .body .t{font-size:14px;font-weight:700; line-height:1.3}
.mk-card .body .price{font-size:14px;font-weight:800;color:var(--gold-3);margin-top:4px}
.mk-card .body .meta{font-size:11px;color:var(--text-mute);margin-top:6px}

/* Live overview ride */
.ride-status-band{
  margin:0 22px 14px;
  padding:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(168,164,121,.2);
}
.ride-status-band .head{
  padding:14px 16px;
  background:linear-gradient(180deg,#bb9a1e,#a38821);
  color:#1d1f22;
  display:flex;align-items:center;gap:12px;
}
.ride-status-band .head .t{font-weight:800;font-size:14px}
.ride-status-band .head .s{font-size:11px;opacity:.8}
.ride-status-band .map{
  height:120px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 30px),
    #1f2226;
  position:relative;
}
.ride-status-band .map::after{
  content:"";
  position:absolute;left:10%;right:10%;top:30%;bottom:30%;
  background:linear-gradient(90deg,#c39038,#836014);
  height:5px; border-radius:3px;
  transform:rotate(-12deg);
  filter:drop-shadow(0 0 6px rgba(195,144,56,.5));
}
.ride-status-band .info{
  padding:12px 16px;
  display:flex;justify-content:space-between;
  background:#1f2226;
}
.ride-status-band .info .v{font-size:18px;font-weight:800}
.ride-status-band .info .l{font-size:10px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.4px}

/* utility */
.spread{display:flex;justify-content:space-between;align-items:center;gap:8px}
.divider{height:1px;background:rgba(255,255,255,.06);margin:14px 0}

/* Profile header */
.profile-hero{
  display:flex;align-items:center;gap:14px;
  padding:0 22px 18px;
}
.profile-hero .av{
  width:74px;height:74px;border-radius:50%;
  border:3px solid var(--gold);
  background:linear-gradient(135deg,#5a8df0,#3a5fb8);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:24px;
  flex-shrink:0;
}
.profile-hero .info .name{font-size:20px;font-weight:800}
.profile-hero .info .handle{font-size:13px;color:var(--text-mute);margin-top:2px}
.profile-hero .info .row{margin-top:8px;gap:8px}

.kpi-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin:0 22px 18px;
  background:var(--surface);
  border-radius:18px;
  overflow:hidden;
}
.kpi{padding:14px;text-align:center}
.kpi + .kpi{border-left:1px solid rgba(255,255,255,.05)}
.kpi .v{font-size:18px;font-weight:800}
.kpi .l{font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}

/* schedule date pickers */
.dates{display:flex;gap:10px;padding:0 22px 14px;overflow-x:auto;scroll-snap-type:x proximity}
.dates::-webkit-scrollbar{display:none}
.dates .d{
  flex:0 0 auto;
  width:54px;height:74px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;
  scroll-snap-align:start;
  transition:all .15s ease;
}
.dates .d.on{ background:var(--gold); color:#1d1f22; border-color:var(--gold) }
.dates .d .dow{font-size:10px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;opacity:.8}
.dates .d .dn{font-size:18px;font-weight:800;margin-top:4px}

/* time slots */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 22px 14px}
.slot{
  appearance:none;border:none;cursor:pointer;
  padding:10px;border-radius:10px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  font:inherit;font-size:13px;font-weight:700;color:#fff;
}
.slot.on{ background:var(--gold); color:#1d1f22; border-color:var(--gold) }

/* Achievement category title */
.cat-title{
  padding:14px 22px 6px;
  font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--text-mute);
  text-transform:uppercase;
}

/* Gear-detail sticky buy bar (above global tabbar) */
.gear-buybar{
  position:sticky; bottom:0;
  display:flex;align-items:center;gap:10px;
  padding:12px 18px 16px;
  background:linear-gradient(180deg, rgba(16,18,20,0) 0%, #101214 30%);
  border-top:1px solid rgba(255,255,255,.05);
  z-index:5;
}

/* Coach Profile sticky action bar */
.coach-profile-screen{ background:#101214 !important }
.coach-profile-actions{
  padding:18px 20px 24px;
  background:linear-gradient(180deg, rgba(16,18,20,0) 0%, #101214 24%);
  position:sticky;
  bottom:0;
  z-index:5;
}

/* Image-backed Figma screens (exact 1:1 of source frame) */
.img-screen{padding:0 !important; background:#101214 !important; overflow-y:auto; -webkit-overflow-scrolling:touch}
.img-screen.no-tabbar{padding:0 !important}
/* When global nav stays visible, image is full-width and scrolls inside #screens.
   Clip the bottom of the image so its drawn-nav doesn't render twice with the global tabbar. */
.img-screen:not(.no-tabbar) .img-frame{position:relative; width:100%}
.img-screen:not(.no-tabbar) .img-screen-bg{
  position:relative;
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  clip-path:inset(0 0 9% 0);
}
.img-screen:not(.no-tabbar) .img-screen-hots{position:absolute; inset:0; z-index:2; pointer-events:none}
/* When image-backed screen replaces nav (drawn nav inside) */
.img-screen.no-tabbar .img-frame{position:absolute; inset:0}
.img-screen.no-tabbar .img-screen-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.img-screen.no-tabbar .img-screen-hots{position:absolute; inset:0; z-index:2; pointer-events:none}
.hot{
  position:absolute;
  border:none; background:transparent; cursor:pointer;
  pointer-events:auto;
  outline:none;
  -webkit-tap-highlight-color:rgba(168,164,121,.18);
}
.hot:active{ background:rgba(168,164,121,.18); border-radius:8px }

/* Welcome / intro — full-bleed image with overlay CTA.
   Forward chevron on screens 1-5 hints "tap to advance". */
.welcome-screen{
  padding:0 !important;
  background:#101214 !important;
  overflow:hidden;
  position:absolute !important;
  inset:0 !important;
  cursor:pointer;
}
.welcome-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#101214;
}
/* Screens 3-5 (intro-3..5) have drawn page-dots + Next button baked into the
   Figma image. Mask off the bottom ~16 % with a solid dark band so they
   never compete with the gold chevron on top — matches screens 1-2. */
.screen[data-screen="welcome-3"]::after,
.screen[data-screen="welcome-4"]::after,
.screen[data-screen="welcome-5"]::after,
.screen[data-screen="welcome-6"]::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:16%;
  background:linear-gradient(180deg, rgba(16,18,20,0) 0%, #101214 35%);
  pointer-events:none;
  z-index:1;
}
/* Get-started + Sign-in overlay sits above the mask */
.welcome-overlay{ z-index:3 }
/* Forward chevron pill on tap-to-advance screens (1-5) */
.welcome-fwd{
  appearance:none; border:none; cursor:pointer;
  position:absolute;
  right:22px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(180deg,#bb9a1e,#7d6420);
  color:#1d1f22;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.2);
  z-index:3;
  transition:transform .15s ease, filter .15s ease;
}
.welcome-fwd svg{ width:28px; height:28px; transform:translateX(1px) }
.welcome-fwd:hover{ filter:brightness(1.05) }
.welcome-fwd:active{ transform:scale(.95) }
/* Last screen overlay (Get started + Sign in) sitting on top of the image */
.welcome-overlay{
  position:absolute;
  left:0; right:0;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  padding:0 22px;
  display:flex;flex-direction:column;gap:6px;
  z-index:3;
}
.welcome-dots{
  display:flex;gap:8px;justify-content:center;margin-bottom:14px;
}
.welcome-dots .dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.25);
  cursor:pointer;transition:background .15s ease, width .15s ease;
}
.welcome-dots .dot.on{background:var(--gold-3); width:24px; border-radius:99px}