/* ── TOKENS ── */
:root{
  --bg:    #07080a;
  --s1:    #0e0f13;
  --s2:    #141619;
  --s3:    #1c1e24;
  --b1:    #23262e;
  --b2:    #2e323c;

  --gold:  #e8a020;
  --gold2: #b87a10;
  --glow:  rgba(232,160,32,.14);

  --teal:  #0bbfa0;
  --teal2: rgba(11,191,160,.13);
  --vio:   #7b6ef6;
  --vio2:  rgba(123,110,246,.13);
  --fire:  #f05050;
  --fire2: rgba(240,80,80,.13);
  --grn:   #22c55e;
  --grn2:  rgba(34,197,94,.13);

  --tx:    #dde0e8;
  --tx2:   #8890a0;
  --tx3:   #454d5c;

  --r:     13px;
  --r-sm:  9px;
  --mono:  'Space Mono', monospace;
  --body:  'Outfit', sans-serif;
  --nav:   62px;
  --top:   54px;
  --sbot:  env(safe-area-inset-bottom, 0px);
  --stop:  env(safe-area-inset-top, 0px);
}

/* ── BASE ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:var(--body);background:var(--bg);color:var(--tx);height:100dvh;overflow:hidden;}

/* ── SPLASH ── */
.splash{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  transition:opacity .5s,visibility .5s;
}
.splash.out{opacity:0;visibility:hidden;}
.splash-mark{
  font-family:var(--mono);font-size:64px;font-weight:700;color:var(--gold);
  animation:glow 1.2s ease-in-out infinite alternate;
}
@keyframes glow{
  from{text-shadow:0 0 16px rgba(232,160,32,.3);}
  to  {text-shadow:0 0 48px rgba(232,160,32,.6);}
}
.splash-name{font-family:var(--mono);font-size:16px;letter-spacing:5px;color:var(--tx);}
.splash-tagline{font-size:12px;color:var(--tx3);letter-spacing:.5px;}

/* ── APP ── */
.app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  padding-top:calc(var(--top) + var(--stop));
  padding-bottom:calc(var(--nav) + var(--sbot));
}

/* ── TOP BAR ── */
.bar{
  position:fixed;top:0;left:0;right:0;
  height:calc(var(--top) + var(--stop));
  padding:calc(var(--stop) + 8px) 16px 8px;
  background:rgba(7,8,10,.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--b1);
  display:flex;align-items:flex-end;justify-content:space-between;
  z-index:50;
}
.bar-brand{display:flex;align-items:center;gap:9px;}
.bar-logo{
  width:32px;height:32px;border-radius:9px;
  background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-weight:700;font-size:15px;color:var(--bg);
  flex-shrink:0;
}
.bar-title{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:3px;color:var(--tx);}
.bar-date{font-size:10px;color:var(--tx3);margin-top:2px;}
.bar-actions{display:flex;align-items:center;gap:8px;}

/* ── TOGGLE MODE ── */
.toggle-mode{
  display:flex;background:var(--s2);border:1px solid var(--b1);
  border-radius:99px;padding:3px;gap:2px;
}
.tm-btn{
  padding:4px 12px;border-radius:99px;border:none;
  background:transparent;color:var(--tx3);
  font-size:12px;font-family:var(--body);font-weight:500;cursor:pointer;transition:all .2s;
}
.tm-btn.active{background:var(--s3);color:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.4);}

.icon-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--b1);
  background:var(--s2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.icon-btn svg{width:16px;height:16px;stroke:var(--tx2);}
.icon-btn.on{border-color:var(--gold);background:var(--glow);}
.icon-btn.on svg{stroke:var(--gold);}

/* ── STAGE ── */
.stage{flex:1;position:relative;overflow:hidden;}
.view{
  position:absolute;inset:0;
  overflow-y:auto;overflow-x:hidden;
  padding:14px 14px 14px;
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .22s,transform .22s;
  -webkit-overflow-scrolling:touch;
}
.view.active{opacity:1;transform:none;pointer-events:auto;}

/* ── SPACING HELPERS ── */
.block{margin-bottom:14px;}
.block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.block-title{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:2.5px;color:var(--tx3);}
.block-hint{font-size:11px;color:var(--tx3);}
.ghost-btn{
  font-size:11px;color:var(--tx3);padding:3px 9px;
  border:1px solid var(--b1);border-radius:6px;background:none;
  cursor:pointer;font-family:var(--body);transition:all .2s;
}
.ghost-btn:hover{border-color:var(--fire);color:var(--fire);}

/* ── RING CARD ── */
.ring-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);
  padding:18px;display:flex;align-items:center;gap:18px;
  margin-bottom:12px;position:relative;overflow:hidden;
}
.ring-card::after{
  content:'';position:absolute;top:-50px;right:-50px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 70%);
  pointer-events:none;
}
.ring-wrap{position:relative;width:96px;height:96px;flex-shrink:0;}
.ring-svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-track{fill:none;stroke:var(--s3);stroke-width:7;}
.ring-prog{
  fill:none;stroke:var(--gold);stroke-width:7;stroke-linecap:round;
  transition:stroke-dashoffset .7s cubic-bezier(.4,0,.2,1);
}
.ring-center{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.ring-pct{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--gold);line-height:1;}
.ring-sub{font-size:10px;color:var(--tx3);margin-top:2px;}
.ring-stats{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.rstat{text-align:center;}
.rstat-n{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--gold);line-height:1;}
.rstat-l{font-size:10px;color:var(--tx3);margin-top:3px;}
.c-violet{color:var(--vio)!important;}
.c-teal{color:var(--teal)!important;}
.c-fire{color:var(--fire)!important;}

/* ── MENTOR TIP ── */
.mentor-tip{
  background:var(--glow);border:1px solid rgba(232,160,32,.25);
  border-radius:var(--r-sm);padding:11px 14px;
  display:flex;gap:10px;align-items:flex-start;
  margin-bottom:12px;
}
.mt-icon{font-size:16px;flex-shrink:0;margin-top:1px;}
.mt-text{font-size:12px;color:var(--tx2);line-height:1.55;}

/* ── TIMELINE ── */
.tl{display:flex;flex-direction:column;gap:7px;}
.tl-row{
  background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);
  display:flex;align-items:stretch;overflow:hidden;cursor:pointer;
  transition:border-color .18s,transform .12s;
}
.tl-row:active{transform:scale(.984);}
.tl-row.now {border-color:rgba(232,160,32,.5);background:rgba(232,160,32,.03);}
.tl-row.done{opacity:.48;border-color:var(--b1);}
.tl-row.done .tl-name{text-decoration:line-through;color:var(--tx3);}

.tl-stripe{width:3px;flex-shrink:0;background:var(--b2);}
.tl-row.cat-english .tl-stripe{background:var(--vio);}
.tl-row.cat-finans  .tl-stripe{background:var(--gold);}
.tl-row.cat-tekrar  .tl-stripe{background:var(--teal);}
.tl-row.done .tl-stripe{background:var(--teal);}
.tl-row.now  .tl-stripe{background:var(--gold);}

.tl-main{flex:1;padding:12px 13px;min-width:0;}
.tl-meta{display:flex;align-items:center;gap:7px;margin-bottom:4px;}
.tl-time{font-family:var(--mono);font-size:10px;color:var(--tx3);}
.now-dot{
  font-size:8px;font-weight:700;padding:1px 6px;border-radius:99px;
  background:var(--gold);color:var(--bg);letter-spacing:.4px;text-transform:uppercase;
  animation:blink 1.3s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.4;}}
.tl-name{font-size:14px;font-weight:500;color:var(--tx);}
.tl-desc{font-size:11px;color:var(--tx3);margin-top:2px;line-height:1.4;}

.tl-side{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  padding:11px 12px;gap:5px;flex-shrink:0;
}
.tl-cat{
  font-size:9px;font-weight:700;padding:2px 7px;border-radius:5px;
  letter-spacing:.4px;text-transform:uppercase;
}
.cat-english{background:var(--vio2);color:var(--vio);}
.cat-finans {background:var(--glow);color:var(--gold);}
.cat-tekrar {background:var(--teal2);color:var(--teal);}
.tl-dur{font-family:var(--mono);font-size:10px;color:var(--tx3);}

.tl-chk{
  width:26px;height:26px;border-radius:7px;border:2px solid var(--b2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;transition:all .18s;
  align-self:center;margin-right:4px;flex-shrink:0;
}
.tl-row.done .tl-chk{background:var(--teal);border-color:var(--teal);color:var(--bg);}
.tl-row.now  .tl-chk{border-color:var(--gold);}

/* ── WEEKLY ── */
.week{display:flex;gap:5px;}
.wd{flex:1;text-align:center;}
.wd-lbl{font-family:var(--mono);font-size:9px;color:var(--tx3);margin-bottom:5px;}
.wd-bar{
  background:var(--s2);border:1px solid var(--b1);
  border-radius:6px;height:44px;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;padding:2px;
}
.wd-fill{
  width:100%;border-radius:4px;
  background:linear-gradient(180deg,var(--gold),var(--gold2));
  transition:height .5s cubic-bezier(.4,0,.2,1);
}
.wd-pct{font-family:var(--mono);font-size:8px;color:var(--tx3);margin-top:3px;}
.wd.today .wd-lbl{color:var(--gold);font-weight:700;}
.wd.today .wd-bar{border-color:rgba(232,160,32,.4);}

/* ── ROAD TOP ── */
.road-top{
  background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);
  padding:20px;display:flex;align-items:center;gap:16px;
  margin-bottom:12px;position:relative;overflow:hidden;
}
.road-top::before{
  content:'';position:absolute;bottom:-40px;left:-40px;
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 70%);
  pointer-events:none;
}
.road-top-left{flex:1;}
.road-eyebrow{font-family:var(--mono);font-size:8px;letter-spacing:2.5px;color:var(--tx3);margin-bottom:6px;}
.road-big-pct{font-family:var(--mono);font-size:40px;font-weight:700;color:var(--gold);line-height:1;margin-bottom:10px;}
.road-bar{height:4px;background:var(--s3);border-radius:99px;overflow:hidden;}
.road-bar-fill{height:100%;background:linear-gradient(90deg,var(--vio),var(--gold));border-radius:99px;transition:width .6s;}
.road-caption{font-size:11px;color:var(--tx3);margin-top:7px;}
.road-top-right{display:flex;flex-direction:column;gap:14px;align-items:flex-end;}
.road-kpi{text-align:right;}
.road-kpi-n{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--teal);line-height:1;}
.road-kpi-l{font-size:10px;color:var(--tx3);margin-top:2px;}

/* ── WARNING BOX ── */
.warning-box{
  background:rgba(240,80,80,.07);border:1px solid rgba(240,80,80,.25);
  border-radius:var(--r-sm);padding:13px 14px;
  display:flex;gap:10px;margin-bottom:12px;
}
.wb-icon{font-size:18px;flex-shrink:0;margin-top:1px;}
.wb-title{font-size:12px;font-weight:600;color:var(--fire);margin-bottom:4px;}
.wb-text{font-size:12px;color:var(--tx2);line-height:1.55;}

/* ── PHASES ── */
.phases{display:flex;flex-direction:column;gap:9px;}
.phase{
  background:var(--s1);border:1px solid var(--b1);
  border-radius:var(--r);overflow:hidden;transition:border-color .2s;
}
.phase.ph-active{border-color:rgba(232,160,32,.4);}
.phase.ph-done  {border-color:rgba(11,191,160,.3);}
.phase.ph-locked{opacity:.4;pointer-events:none;}

.ph-head{
  padding:15px;display:flex;align-items:center;gap:11px;
  cursor:pointer;user-select:none;
}
.ph-ico{
  width:42px;height:42px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.ci1{background:var(--vio2);}
.ci2{background:var(--glow);}
.ci3{background:var(--teal2);}
.ci4{background:var(--grn2);}

.ph-meta{flex:1;min-width:0;}
.ph-title{font-size:13px;font-weight:600;color:var(--tx);}
.ph-sub{font-size:11px;color:var(--tx3);margin-top:2px;}
.ph-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.ph-badge{
  font-size:9px;font-weight:700;padding:3px 8px;border-radius:99px;letter-spacing:.4px;
}
.b-active  {background:rgba(232,160,32,.15);color:var(--gold);}
.b-done    {background:var(--teal2);color:var(--teal);}
.b-locked  {background:var(--s3);color:var(--tx3);}
.b-upcoming{background:var(--vio2);color:var(--vio);}
.ph-prog-row{display:flex;align-items:center;gap:5px;}
.ph-mini{width:44px;height:3px;background:var(--s3);border-radius:99px;overflow:hidden;}
.ph-mini-fill{height:100%;background:var(--gold);border-radius:99px;transition:width .4s;}
.ph-pct{font-family:var(--mono);font-size:10px;color:var(--tx3);}
.ph-chv{font-size:10px;color:var(--tx3);transition:transform .2s;}
.phase.open .ph-chv{transform:rotate(180deg);}

.ph-topics{display:none;padding:0 11px 11px;flex-direction:column;gap:6px;}
.phase.open .ph-topics{display:flex;}

.topic{
  background:var(--s2);border:1px solid var(--b1);
  border-radius:var(--r-sm);padding:11px 11px;
  display:flex;align-items:flex-start;gap:9px;
  cursor:pointer;transition:border-color .15s,transform .1s;
}
.topic:active{transform:scale(.986);}
.topic.done{opacity:.45;border-color:var(--teal2);}
.topic.done .topic-name{text-decoration:line-through;color:var(--tx3);}
.topic-chk{
  width:20px;height:20px;border-radius:5px;border:2px solid var(--b2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;margin-top:1px;transition:all .18s;
}
.topic.done .topic-chk{background:var(--teal);border-color:var(--teal);color:var(--bg);}
.topic-body{flex:1;min-width:0;}
.topic-name{font-size:13px;font-weight:500;color:var(--tx);}
.topic-detail{font-size:11px;color:var(--tx3);margin-top:3px;line-height:1.4;}
.topic-tag{
  font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;
  flex-shrink:0;margin-top:2px;letter-spacing:.4px;text-transform:uppercase;
}
.t-makro {background:var(--vio2);color:var(--vio);}
.t-temel {background:var(--glow);color:var(--gold);}
.t-emtia {background:var(--teal2);color:var(--teal);}
.t-risk  {background:var(--fire2);color:var(--fire);}
.t-teknik{background:var(--grn2);color:var(--grn);}
.t-demo  {background:rgba(251,191,36,.12);color:#fbbf24;}
.t-canli {background:var(--fire2);color:var(--fire);}
.t-birikim{background:var(--glow);color:var(--gold);}

/* ── PROFILE ── */
.profile-hero{text-align:center;padding:24px 0 20px;border-bottom:1px solid var(--b1);margin-bottom:14px;}
.p-avatar{
  width:74px;height:74px;border-radius:50%;
  background:var(--s2);border:2px solid var(--gold);
  margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:28px;font-weight:700;color:var(--gold);
}
.p-name{font-size:18px;font-weight:600;color:var(--tx);margin-bottom:3px;}
.p-sub{font-size:12px;color:var(--tx3);}

.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px;}
.kpi-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);
  padding:14px;text-align:center;
}
.kpi-icon{font-size:20px;margin-bottom:6px;}
.kpi-val{font-family:var(--mono);font-size:22px;font-weight:700;color:var(--gold);}
.kpi-lbl{font-size:10px;color:var(--tx3);margin-top:3px;}

.settings-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r);overflow:hidden;}
.sc-label{
  font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--tx3);
  padding:11px 14px;border-bottom:1px solid var(--b1);
}
.sc-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 14px;border-bottom:1px solid var(--b1);
  font-size:13px;color:var(--tx2);
}
.sc-row:last-child{border-bottom:none;}
.sc-danger{color:var(--fire);}
.pill-btn{
  padding:5px 14px;border-radius:99px;border:1px solid var(--b2);
  background:var(--s2);color:var(--tx2);font-family:var(--body);
  font-size:11px;cursor:pointer;transition:all .2s;
}
.pill-btn.on{background:var(--glow);border-color:var(--gold);color:var(--gold);}
.pill-btn.danger{border-color:rgba(240,80,80,.3);background:var(--fire2);color:var(--fire);}
.mentor-note{padding:0 14px 14px;font-size:12px;color:var(--tx2);line-height:1.6;}

/* ── BOTTOM NAV ── */
.nav{
  position:fixed;bottom:0;left:0;right:0;
  height:calc(var(--nav) + var(--sbot));
  padding-bottom:var(--sbot);
  background:rgba(7,8,10,.95);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--b1);
  display:flex;z-index:50;
}
.nb{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;border:none;background:transparent;
  color:var(--tx3);font-family:var(--body);font-size:10px;font-weight:500;
  cursor:pointer;letter-spacing:.3px;transition:all .2s;
}
.nb svg{width:20px;height:20px;transition:all .2s;}
.nb.active{color:var(--gold);}
.nb.active svg{stroke:var(--gold);filter:drop-shadow(0 0 4px rgba(232,160,32,.4));}
.nb[data-view="road"].active{color:var(--vio);}
.nb[data-view="road"].active svg{stroke:var(--vio);filter:drop-shadow(0 0 4px rgba(123,110,246,.4));}
.nb[data-view="profile"].active{color:var(--teal);}
.nb[data-view="profile"].active svg{stroke:var(--teal);filter:drop-shadow(0 0 4px rgba(11,191,160,.4));}

/* ── TOAST ── */
.toast{
  position:fixed;
  bottom:calc(var(--nav) + var(--sbot) + 10px);
  left:50%;transform:translateX(-50%) translateY(16px);
  background:var(--s2);border:1px solid var(--b2);
  border-radius:11px;padding:9px 15px;
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;color:var(--tx);
  box-shadow:0 6px 28px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;white-space:nowrap;
  transition:opacity .2s,transform .28s cubic-bezier(.34,1.56,.64,1);
  z-index:100;max-width:calc(100vw - 32px);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ── SHEET ── */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  backdrop-filter:blur(3px);z-index:80;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.overlay.show{opacity:1;pointer-events:auto;}
.sheet{
  position:fixed;left:0;right:0;bottom:0;
  background:var(--s1);border-top:1px solid var(--b2);
  border-radius:18px 18px 0 0;
  max-height:82dvh;overflow-y:auto;
  padding-bottom:calc(var(--sbot) + 16px);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  z-index:81;-webkit-overflow-scrolling:touch;
}
.sheet.show{transform:translateY(0);}
.sheet-pill{width:34px;height:4px;background:var(--b2);border-radius:99px;margin:11px auto 0;}
.sheet-body{padding:14px 16px 0;}
.sh-title{font-size:17px;font-weight:600;color:var(--tx);margin-bottom:5px;}
.sh-detail{font-size:12px;color:var(--tx2);line-height:1.6;margin-bottom:14px;}
.sh-why{
  background:var(--glow);border:1px solid rgba(232,160,32,.2);
  border-radius:var(--r-sm);padding:11px 13px;margin-bottom:14px;
}
.sh-why-lbl{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--gold);margin-bottom:5px;}
.sh-why-text{font-size:12px;color:var(--tx2);line-height:1.55;}
.sh-src-lbl{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:var(--tx3);margin-bottom:8px;}
.sh-sources{display:flex;flex-direction:column;gap:7px;}
.sh-src{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:var(--r-sm);
  border:1px solid var(--b1);background:var(--s2);
  text-decoration:none;color:var(--tx2);font-size:12px;
  transition:all .15s;
}
.sh-src:hover,.sh-src:active{border-color:var(--b2);color:var(--tx);}
.sh-src.video{border-color:rgba(240,80,80,.25);color:var(--fire);}
.sh-src.video:hover{background:var(--fire2);}
.sh-src.site {border-color:rgba(123,110,246,.25);color:var(--vio);}
.sh-src.site:hover{background:var(--vio2);}
.sh-src-ico{font-size:15px;flex-shrink:0;}
.sh-src-lbl2{flex:1;}
.sh-src-arr{font-size:12px;opacity:.4;}
.sh-done-btn{
  width:100%;padding:13px;border-radius:var(--r);margin-top:14px;
  border:1px solid var(--teal);background:var(--teal2);
  color:var(--teal);font-family:var(--body);font-size:14px;font-weight:600;
  cursor:pointer;transition:all .2s;
}
.sh-done-btn.undo{border-color:var(--b2);background:var(--s3);color:var(--tx3);}

/* ── CONFETTI ── */
.cdot{
  position:fixed;width:7px;height:7px;border-radius:50%;
  pointer-events:none;z-index:999;
  animation:cfetti .85s ease-out forwards;
}
@keyframes cfetti{
  0%{transform:translateY(0) rotate(0);opacity:1;}
  100%{transform:translateY(85px) rotate(400deg);opacity:0;}
}

/* scrollbar */
::-webkit-scrollbar{width:2px;}
::-webkit-scrollbar-thumb{background:var(--b2);border-radius:99px;}