/* HEADER */
header {
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;
  padding:1rem 2rem;
  border-bottom: 2px solid var(--border);
  position:sticky;top:0;z-index:500;
  background: rgba(8,8,8,.97);
  backdrop-filter: blur(20px);
  overflow:hidden;
}
@media(max-width:480px){ header { padding:.75rem 1rem; } }

.logo {
  font-family:'Unbounded',sans-serif;
  font-weight:900;
  font-size:1.4rem;
  letter-spacing:-1px;
  color:var(--mode-color);
  transition: color .4s;
  text-transform:uppercase;
  flex-shrink:0;
}
.logo sub {
  font-size:.55em;
  color:var(--muted);
  vertical-align:super;
  letter-spacing:0;
  font-family:'IBM Plex Mono',monospace;
  font-weight:500;
}

.header-right { display:flex; gap:.6rem; align-items:center; flex-shrink:0; }
@media(max-width:400px){ .visit-chip { display:none; } }
/* Mobile: hide mode-pill + theme-toggle from header — they live in the bottom bar */
@media(max-width:680px){
  .header-right .mode-pill { display:none; }
  .header-right .theme-toggle { display:none; }
  .header-right .visit-chip { display:none; }
  .header-right .boss-key-btn { display:none; }
}

/* Boss key header button */
.boss-key-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: .88rem;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all .2s;
  opacity: .55;
}
.boss-key-btn:hover { border-color:var(--red); opacity:1; }

/* Boss key toast — fixed bottom-left, once per session */
.bk-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .6rem .5rem .8rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .65rem;
  letter-spacing: .4px;
  color: var(--muted);
  z-index: 998;
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 260px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.bk-toast.bk-toast-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.bk-toast kbd {
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: .02rem .28rem;
  font-family: inherit;
}
.bk-toast-x {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .15rem;
  flex-shrink: 0;
  opacity: .55;
}
.bk-toast-x:hover { opacity: 1; }

.visit-chip {
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:4px;
  padding:.3rem .7rem;
  font-size:.65rem;
  color:var(--muted);
  letter-spacing:1px;
}
.visit-chip b { color:var(--yellow); }

.mode-pill {
  display:flex;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
}
.mode-pill button {
  padding:.4rem .9rem;
  background:transparent;
  border:none;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;
  letter-spacing:1px;
  cursor:pointer;
  text-transform:uppercase;
  transition:all .2s;
}
.mode-pill button.active-slave {
  background: var(--red);
  color:#fff;
  font-weight:600;
}
.mode-pill button.active-grind {
  background: var(--green);
  color:#000;
  font-weight:600;
}

/* THEME TOGGLE */
.theme-toggle {
  background:transparent;
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;
  letter-spacing:.5px;
  padding:.35rem .65rem;
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
  flex-shrink:0;
}
.theme-toggle:hover { border-color:var(--yellow); color:var(--yellow); }

/* TICKER */
.ticker-outer {
  background:var(--s1);
  border-bottom:1px solid var(--border);
  overflow:hidden;
  padding:.4rem 0;
}
.ticker-inner {
  display:flex;gap:3rem;
  animation: tickscroll 40s linear infinite;
  white-space:nowrap;
}
.ticker-inner span {
  font-size:.68rem;
  color:var(--muted);
  flex-shrink:0;
}
.ticker-inner span b { color:var(--mode-color); transition: color .4s; }

/* HERO */
.hero {
  text-align:center;
  padding:4rem 2rem 2rem;
  position:relative;
}
.hero-tag {
  display:inline-block;
  background:var(--red);
  color:#fff;
  font-size:.65rem;
  letter-spacing:3px;
  text-transform:uppercase;
  padding:.3rem .8rem;
  border-radius:3px;
  margin-bottom:1.5rem;
  font-family:'Archivo Black',sans-serif;
  transition:background .4s;
}
.hero h1 {
  font-family:'Unbounded',sans-serif;
  font-size:clamp(2rem,7vw,5rem);
  font-weight:900;
  line-height:1.05;
  letter-spacing:-2px;
  color:var(--text);
  margin-bottom:1rem;
}
.hero h1 .accent { color:var(--mode-color); transition: color .4s; }
.hero-sub {
  font-size:.82rem;
  color:var(--muted);
  max-width:560px;
  margin:0 auto 2rem;
  line-height:1.7;
}

/* VISIT BANNER */
.visit-banner {
  display:none;
  margin:0 2rem 1.5rem;
  padding:1rem 1.5rem;
  border:1px solid var(--yellow);
  border-radius:8px;
  background: rgba(255,230,0,.04);
  font-size:.82rem;
  line-height:1.6;
  color:var(--yellow);
}
.visit-banner .vb-emoji { font-size:1.3rem; display:block; margin-bottom:.3rem; }

/* CARD */
.card {
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1.8rem;
  margin-bottom:1.2rem;
  position:relative;
}
.card-accent {
  position:absolute;top:0;left:0;right:0;height:2px;
  background: linear-gradient(90deg, var(--mode-color), transparent);
  border-radius:12px 12px 0 0;
  transition: background .4s;
}
.card-label {
  font-size:.6rem;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.2rem;
  display:flex;align-items:center;gap:.5rem;
}
.card-label::after {
  content:'';flex:1;height:1px;background:var(--border);
}

/* INPUTS */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem; }
@media(max-width:600px){.grid-2,.grid-3{grid-template-columns:1fr;}}

.field label {
  display:block;font-size:.62rem;letter-spacing:1px;color:var(--muted);
  text-transform:uppercase;margin-bottom:.45rem;
}
.field input, .field select {
  width:100%;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:.7rem .9rem;
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:.9rem;
  outline:none;
  transition:border-color .2s;
  -webkit-appearance:none;
}
.field input:focus, .field select:focus {
  border-color:var(--mode-color);
  box-shadow:0 0 0 3px rgba(255,45,45,.12);
  outline:none; /* outline handled globally by :focus-visible */
}

/* BIG BUTTON */
.big-btn {
  width:100%;
  padding:1.1rem;
  border-radius:8px;
  border:none;
  background:var(--mode-color);
  color: #000;
  font-family:'Unbounded',sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  margin-top:1rem;
  transition:all .2s;
  position:relative;
  overflow:hidden;
}
.big-btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,255,255,.1); }
.big-btn:active { transform:scale(.98); }

/* RESULTS HIDDEN */
#results { display:none; }

/* STAT TILES */
.tiles {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.8rem;
  margin-bottom:1rem;
}
.tile {
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.9rem .7rem;
  text-align:center;
  transition:border-color .3s;
  overflow:hidden;
  min-width:0;
}
.tile:hover { border-color:var(--mode-color); }
.tile .tv {
  font-family:'Unbounded',sans-serif;
  font-size:clamp(.85rem,2.5vw,1.35rem);
  font-weight:700;
  color:var(--mode-color);
  line-height:1.1;
  transition: color .4s;
  word-break:break-all;
  overflow-wrap:anywhere;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}
.tile .tl {
  font-size:.58rem;
  color:var(--muted);
  margin-top:.35rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1.3;
}

/* LIVE COUNTER */
.live-wrap {
  text-align:center;
  padding:1.5rem;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:1rem;
}
.live-label { font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem; }
.live-val {
  font-family:'Unbounded',sans-serif;
  font-size:3rem;
  font-weight:900;
  color:var(--mode-color);
  transition: color .4s;
  line-height:1;
}
.live-quip { font-size:.72rem;color:var(--muted);margin-top:.5rem; }

/* CHART AREA */
.chart-row { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem; }
@media(max-width:640px){.chart-row{grid-template-columns:1fr;}}
.chart-box {
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem;
  position:relative;
}
.chart-box-label { font-size:.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem; }
.chart-box canvas { max-height:180px;width:100%!important; }

/* MESSAGE BOX */
.msg-box {
  border-radius:10px;
  padding:1.3rem 1.5rem;
  margin-bottom:1rem;
  border-left:4px solid var(--mode-color);
  background:var(--s2);
  transition: border-color .4s;
}
.msg-speaker {
  font-family:'Archivo Black',sans-serif;
  font-size:.75rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--mode-color);
  margin-bottom:.5rem;
  transition: color .4s;
}
.msg-text { font-size:.85rem; line-height:1.75; color:var(--text); }
.msg-refresh {
  margin-top:.7rem;
  background:none;
  border:1px solid var(--border);
  border-radius:4px;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;
  padding:.3rem .7rem;
  cursor:pointer;
  letter-spacing:1px;
  transition:all .2s;
}
.msg-refresh:hover { border-color:var(--mode-color); color:var(--mode-color); }

/* RICH CARDS */
.rich-scroll { display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin;scrollbar-color:var(--border) transparent; }
.rich-card {
  flex:0 0 200px;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem;
  font-size:.75rem;
  transition:border-color .2s;
}
.rich-card:hover { border-color:var(--red); }
.rich-name { font-family:'Archivo Black',sans-serif;font-size:1rem;color:var(--yellow);margin-bottom:.25rem; }
.rich-rate { font-size:.85rem;color:var(--red);margin-bottom:.5rem;font-weight:600; }
.rich-fact { color:var(--muted);line-height:1.55; }
.rich-ratio { margin-top:.6rem;font-size:.68rem;color:var(--pink); }

/* COMPARISON BAR */
.cmp-row { margin:.5rem 0; }
.cmp-meta { display:flex;justify-content:space-between;font-size:.65rem;color:var(--muted);margin-bottom:.25rem; }
.cmp-track { height:6px;background:var(--s3);border-radius:99px;overflow:hidden; }
.cmp-fill { height:100%;border-radius:99px;transition:width 1.2s cubic-bezier(.22,1,.36,1); }

/* GOAL CARD */
.goal-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:.8rem; }
@media(max-width:680px){.goal-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:440px){.goal-grid{grid-template-columns:1fr;}}
.goal-result-actions { display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap; }
.goal-action-btn {
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;
  padding:.3rem .9rem;
  border-radius:4px;
  cursor:pointer;
  transition:all .15s;
  letter-spacing:.5px;
}
.goal-save-btn:hover { border-color:var(--green);color:var(--green); }
.goal-share-btn:hover { border-color:var(--mode-color);color:var(--mode-color); }
/* DREAMS LIST */
.dreams-list-title { font-size:.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:1rem 0 .6rem;border-top:1px solid var(--border);padding-top:.8rem; }
.dream-item { background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:.9rem 1rem;margin-bottom:.6rem; }
.dream-name { font-family:'Unbounded',sans-serif;font-size:.85rem;color:var(--mode-color);margin-bottom:.15rem;transition:color .4s; }
.dream-price { font-family:'IBM Plex Mono',monospace;font-size:1rem;color:var(--text);margin-bottom:.35rem; }
.dream-stats { font-size:.68rem;color:var(--muted);line-height:1.7;margin-bottom:.6rem; }
.dream-actions { display:flex;gap:.5rem;flex-wrap:wrap; }
.dream-btn {
  background:transparent;border:1px solid var(--border);color:var(--muted);
  font-family:'IBM Plex Mono',monospace;font-size:.56rem;padding:.22rem .55rem;
  border-radius:4px;cursor:pointer;transition:all .15s;
}
.dream-btn-edit:hover { border-color:var(--yellow);color:var(--yellow); }
.dream-btn-share:hover { border-color:var(--blue);color:var(--blue); }
.dream-btn-delete:hover { border-color:var(--red);color:var(--red); }
.goal-result {
  display:none;
  margin-top:.9rem;
  padding:1.1rem;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.8rem;
  line-height:1.9;
}
.goal-headline { font-family:'Unbounded',sans-serif;font-size:1.1rem;color:var(--mode-color);margin-bottom:.4rem;transition:color .4s; }

/* SICK BUTTON */
.sick-btn {
  width:100%;
  padding:.9rem;
  margin-top:.8rem;
  background:transparent;
  border:2px dashed var(--red);
  border-radius:8px;
  color:var(--red);
  font-family:'Archivo Black',sans-serif;
  font-size:1rem;
  letter-spacing:2px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s;
}
.sick-btn:hover { background:var(--mode-color);color:#000; }

/* JOB PROMPT */
.job-prompt { display:block; }
.jp-q { font-size:.9rem;font-weight:600;color:var(--yellow);margin-bottom:.8rem;line-height:1.5; }
.job-tags { display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem; }
.job-tag {
  background:var(--s2);border:1px solid var(--border);border-radius:999px;
  padding:.3rem .9rem;font-size:.68rem;color:var(--muted);cursor:pointer;transition:all .2s;
}
.job-tag:hover { border-color:var(--yellow);color:var(--yellow); }

/* HUSTLE TIPS */
.tip-single { background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:1rem;font-size:.8rem;line-height:1.7;margin-top:.5rem; }
.tip-single .tip-text { color:var(--text); }
.tip-single .tip-warn { font-size:.62rem;color:var(--muted);margin-top:.5rem;font-style:italic; }
.tip-actions { display:flex;gap:.6rem;margin-top:.7rem; }
.tip-action-btn {
  background:transparent;border:1px solid var(--border);color:var(--muted);
  font-family:'IBM Plex Mono',monospace;font-size:.58rem;padding:.28rem .65rem;
  border-radius:4px;cursor:pointer;transition:all .15s;letter-spacing:.5px;
}
.tip-action-btn:hover { border-color:var(--green);color:var(--green); }
.tip-action-btn:disabled { opacity:.35;cursor:not-allowed; }
.tip-action-btn:disabled:hover { border-color:var(--border);color:var(--muted); }
.tip-share-btn:hover { border-color:var(--blue);color:var(--blue); }

/* BURNOUT METER */
.burnout-wrap { margin:1rem 0; }
.burnout-label { display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);margin-bottom:.4rem; }
.burnout-track { height:16px;background:var(--s3);border-radius:4px;overflow:hidden;position:relative; }
.burnout-fill {
  height:100%;
  border-radius:4px;
  transition:width 1.5s cubic-bezier(.22,1,.36,1);
  background: linear-gradient(90deg, #00ff88, #ffe600, #ff7700, #ff2d2d);
}
.burnout-track::after {
  content:attr(data-pct);
  position:absolute;top:50%;right:.5rem;transform:translateY(-50%);
  font-size:.6rem;color:rgba(255,255,255,.5);
}

/* MODAL */
.overlay { display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:800;align-items:center;justify-content:center; }
body.light-mode .overlay { background:rgba(30,20,15,.45); }
.overlay.open { display:flex; }
.modal {
  background:var(--s1);
  border:1px solid var(--red);
  border-radius:14px;
  padding:2.5rem;
  max-width:440px;width:90%;
  position:relative;
  animation: popin .3s cubic-bezier(.34,1.56,.64,1);
}
.modal-close {
  position:absolute;top:1rem;right:1rem;
  background:none;border:none;color:var(--muted);
  font-size:1.1rem;cursor:pointer;
  padding:.4rem;min-width:2rem;min-height:2rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;transition:color .15s;
}
.modal-close:hover { color:var(--text); }
@media(max-width:680px){
  .modal-close { font-size:1.4rem; top:.6rem; right:.6rem; min-width:2.8rem; min-height:2.8rem; }
}
.modal h2 { font-family:'Unbounded',sans-serif;font-size:1.8rem;color:var(--red);margin-bottom:.5rem;line-height:1.2; }
.modal-money { font-family:'Unbounded',sans-serif;font-size:2.8rem;color:var(--yellow);margin:.5rem 0; }
.modal p { font-size:.82rem;color:var(--muted);line-height:1.7;margin-bottom:.7rem; }
.modal-cta {
  display:block;width:100%;padding:.85rem;background:var(--green);border:none;border-radius:7px;
  font-family:'Unbounded',sans-serif;font-size:.9rem;color:#000;cursor:pointer;margin-top:.3rem;transition:opacity .2s;
}
.modal-cta:hover { opacity:.85; }

/* REALITY CHECK CARD */
.reality-card {
  background: linear-gradient(135deg, #1a0000, #0e0e0e);
  border: 1px solid var(--red);
  border-radius:10px;
  padding:1.2rem 1.5rem;
  margin-bottom:1rem;
  display:none;
}
.reality-card-title {
  font-family:'Archivo Black',sans-serif;
  font-size:.7rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--mode-color);margin-bottom:.6rem;
}
.reality-items { display:flex;flex-wrap:wrap;gap:.5rem; }
.reality-item {
  background:var(--s2);border:1px solid var(--border);border-radius:6px;
  padding:.4rem .8rem;font-size:.72rem;line-height:1.5;color:var(--text);
}
.reality-item b { color:var(--mode-color); }

/* FUN FACT TOAST — bottom right */
.toast {
  position:fixed;bottom:1.5rem;right:1.5rem;
  background:var(--s1);border:1px solid var(--mode-color);
  border-radius:10px;padding:1rem 1.2rem;
  max-width:300px;font-size:.78rem;line-height:1.6;
  z-index:600;
  transform:translateY(120px);opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s;
  pointer-events:none;
}
.toast.show { transform:translateY(0);opacity:1; }
.toast-label { font-size:.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--mode-color);margin-bottom:.3rem; }

/* SOCIAL PROOF TOAST — top right */
.social-toast {
  position:fixed;top:5rem;right:1.5rem;
  background:var(--s1);border:1px solid var(--border);
  border-radius:10px;padding:.8rem 1.1rem;
  max-width:280px;font-size:.75rem;line-height:1.5;
  z-index:601;
  transform:translateX(120%);opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .4s;
  pointer-events:none;
}
.social-toast.show { transform:translateX(0);opacity:1; }
.social-toast-label { font-size:.55rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem; }

/* YEARLY HOURS WORKED stat */
.big-stat-row {
  display:flex;gap:.8rem;margin-bottom:1rem;flex-wrap:wrap;
}
.big-stat {
  flex:1;min-width:160px;
  background:var(--s2);border:1px solid var(--border);border-radius:10px;
  padding:1rem;text-align:center;
}
.big-stat .bsv {
  font-family:'Unbounded',sans-serif;font-size:1.8rem;font-weight:900;
  color:var(--mode-color);line-height:1;
}
.big-stat .bsl { font-size:.6rem;color:var(--muted);margin-top:.3rem;letter-spacing:1px;text-transform:uppercase; }

/* JOB SALARY COMPARISON */
.salary-cmp { margin-top:1rem; display:none; }
.salary-cmp-title { font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem; }
.salary-row {
  display:flex;align-items:center;gap:.8rem;
  margin-bottom:.6rem;
  padding:.5rem .7rem;
  border-radius:6px;
  background:var(--s3);
  border:1px solid transparent;
  transition:border-color .2s;
}
.salary-row.you-row { border-color:var(--mode-color);background:rgba(0,0,0,.3); }
.salary-row-label { font-size:.7rem;color:var(--muted);min-width:120px;flex-shrink:0; }
.salary-row-label b { color:var(--text);display:block; }
.salary-row-bar-wrap { flex:1; }
.salary-row-bar-track { height:6px;background:var(--s1);border-radius:99px;overflow:hidden; }
.salary-row-bar-fill { height:100%;border-radius:99px;transition:width 1s cubic-bezier(.22,1,.36,1); }
.salary-row-val { font-family:'IBM Plex Mono',monospace;font-size:.7rem;min-width:70px;text-align:right;color:var(--text); }

/* HERO QUOTE BOX */
.hero-quote {
  display:inline-block;
  max-width:560px;
  margin:1rem auto 0;
  background:var(--s2);
  border:1px solid var(--border);
  border-left:3px solid var(--mode-color);
  border-radius:8px;
  padding:.8rem 1.1rem;
  font-size:.78rem;
  font-style:italic;
  line-height:1.65;
  color:var(--muted);
  transition:border-color .4s;
  text-align:left;
}
.hero-quote cite {
  display:block;
  font-style:normal;
  font-size:.65rem;
  letter-spacing:1px;
  color:var(--mode-color);
  margin-top:.4rem;
  font-family:'Archivo Black',sans-serif;
  text-transform:uppercase;
  transition:color .4s;
}

/* CRASHOUT COUNTER */
.crashout-wrap {
  display:none;
  margin-top:.8rem;
  padding:.7rem 1rem;
  background:var(--s2);
  border:1px solid var(--orange);
  border-radius:8px;
}
.crashout-label { font-size:.58rem;letter-spacing:2px;text-transform:uppercase;color:var(--orange);margin-bottom:.3rem; }
.crashout-bar-track { height:8px;background:var(--s3);border-radius:99px;overflow:hidden;margin:.3rem 0; }
.crashout-bar-fill { height:100%;border-radius:99px;background:linear-gradient(90deg,#ffe600,#ff7700,#ff2d2d);transition:width .5s cubic-bezier(.22,1,.36,1); }
.crashout-msg { font-size:.72rem;color:var(--text);line-height:1.5;margin-top:.3rem; }

/* JOB COMMUNITY SECTION */
.community-card {
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1rem 1.2rem;
  margin-top:.8rem;
  font-size:.78rem;
  display:none;
}
.community-stat { display:flex;align-items:baseline;gap:.4rem;margin:.3rem 0; }
.community-stat .cs-val { font-family:'Unbounded',sans-serif;font-size:1.2rem;color:var(--mode-color); }
.community-stat .cs-lbl { font-size:.65rem;color:var(--muted); }
footer {
  text-align:center;
  padding:2.5rem 2rem;
  border-top:1px solid var(--border);
  margin-top:1rem;
}
footer .footer-logo {
  font-family:'Unbounded',sans-serif;
  font-weight:900;
  font-size:1.3rem;
  color:var(--mode-color);
  letter-spacing:-1px;
  text-transform:uppercase;
  margin-bottom:.5rem;
  transition:color .4s;
}
footer .footer-logo sub {
  font-size:.55em;
  color:var(--muted);
  vertical-align:super;
  letter-spacing:0;
  font-family:'IBM Plex Mono',monospace;
  font-weight:500;
}
.footer-tag {
  font-size:.75rem;
  color:var(--muted);
  margin-bottom:.3rem;
  letter-spacing:.5px;
}
footer .footer-legal {
  font-size:.62rem;
  color:var(--dim);
  letter-spacing:1px;
}

/* COMPARISON GRID — desktop 2-col, mobile stacked sections */
.cmp-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.2rem;
  align-items:start;
}
.cmp-rich { margin-top:1rem; }

/* WEALTH DETAIL GRID — 2-col on desktop */
.wealth-detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.2rem .8rem;
}
.wealth-detail-full { grid-column:1/-1; }

/* WALL OF WEALTH */
.wealth-wall { display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem; }
.wealth-brick {
  padding:.4rem .8rem;
  border-radius:6px;
  font-size:.62rem;
  font-family:'IBM Plex Mono',monospace;
  border:1px solid rgba(255,45,45,.4);
  background:rgba(255,45,45,.07);
  line-height:1.5;
  min-width:120px;
}
.wealth-brick b { display:block;font-size:.8rem;font-family:'Unbounded',sans-serif;font-weight:700;color:var(--red); }
.wealth-brick .wname { color:var(--muted);font-size:.6rem; }
.wealth-brick .wratio { color:var(--pink);font-size:.58rem;margin-top:.2rem;display:block; }

/* KO-FI HEADER WRAP + BUTTON */
.kofi-wrap {
  display:flex;
  align-items:center;
  gap:.4rem;
}
@media(max-width:680px){ .kofi-wrap { display:none; } }

/* Mobile-only compact Ko-Fi pill (cycles through messages) */
.kofi-mobile-btn {
  display:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:.6rem;
  letter-spacing:.3px;
  text-decoration:none;
  color:var(--muted);
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:99px;
  padding:.28rem .65rem;
  flex-shrink:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  max-width:165px;
  transition:border-color .2s, color .2s;
}
.kofi-mobile-btn:hover { border-color:var(--yellow); color:var(--yellow); }
.kofi-mobile-btn span {
  display:block;
  transition:opacity .3s;
}
.kofi-mobile-btn span.kofi-fade { opacity:0; }
@media(max-width:680px){ .kofi-mobile-btn { display:block; } }

.kofi-header-btn {
  padding:.35rem .9rem;
  background:transparent;
  border:1px solid var(--border);
  border-radius:99px;
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;
  letter-spacing:.5px;
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  transition:color .8s ease, border-color .8s ease, border-width .8s ease, text-shadow .8s ease;
}
.kofi-header-btn:hover { border-color:var(--yellow); color:var(--yellow); }

/* Stage 1 — warming up (2 min) */
.kofi-wrap.kofi-s1 .kofi-header-btn {
  color:var(--yellow);
  border-color:rgba(255,230,0,.5);
  animation:kofi-pulse-y 3s ease-in-out infinite;
}
/* Stage 2 — getting urgent (4 min) */
.kofi-wrap.kofi-s2 .kofi-header-btn {
  color:var(--yellow);
  border-color:var(--yellow);
  border-width:1.5px;
  animation:kofi-pulse-y 2s ease-in-out infinite, kofi-rumble 4s ease-in-out infinite;
}
/* Stage 3 — urgent (6 min) */
.kofi-wrap.kofi-s3 .kofi-header-btn {
  color:var(--orange);
  border-color:var(--orange);
  border-width:2px;
  animation:kofi-pulse-o 2s ease-in-out infinite, kofi-rumble 2.5s ease-in-out infinite;
}
/* Stage 4 — maximum desperation (8+ min) */
.kofi-wrap.kofi-s4 .kofi-header-btn {
  color:var(--red);
  border-color:var(--red);
  border-width:2px;
  text-shadow:0 0 8px rgba(255,45,45,.6);
  animation:kofi-pulse-r 1.8s ease-in-out infinite, kofi-rumble-hard 2s ease-in-out infinite;
}

/* Dismiss button — hidden until stage 1 */
.kofi-dismiss-btn {
  background:transparent;
  border:none;
  font-family:'IBM Plex Mono',monospace;
  font-size:.55rem;
  color:var(--dim);
  cursor:pointer;
  padding:.2rem .35rem;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease, color .2s;
}
.kofi-dismiss-btn:hover { color:var(--muted); }
.kofi-wrap.kofi-s1 .kofi-dismiss-btn,
.kofi-wrap.kofi-s2 .kofi-dismiss-btn,
.kofi-wrap.kofi-s3 .kofi-dismiss-btn,
.kofi-wrap.kofi-s4 .kofi-dismiss-btn { opacity:1; pointer-events:auto; }

/* Dismissed state — fade out */
.kofi-wrap.kofi-dismissed {
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
}

/* INLINE FIELD ERRORS */
.field-error {
  font-size:.62rem;
  color:var(--red);
  margin-top:.25rem;
  letter-spacing:.5px;
  min-height:.85rem;
}
.field-error-active { border-color:var(--red)!important; }

/* FOOTER LEGAL LINKS */
.footer-links {
  margin-top:.6rem;
  font-size:.6rem;
  letter-spacing:1px;
}
.footer-links a {
  color:var(--muted);
  text-decoration:none;
  transition:color .2s;
}
.footer-links a:hover { color:var(--text); }
.footer-dot { color:var(--dim); margin:0 .4rem; }

/* COOKIE NOTICE — class names intentionally obscure to avoid ad blocker false positives */
.ws-notice {
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:2000;
  background:var(--s1);
  border-top:2px solid var(--border);
  padding:1.2rem 2rem;
  transform:translateY(110%);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
  backdrop-filter:blur(20px);
}
.ws-notice.ws-show { transform:translateY(0); }
.ws-notice-inner {
  display:flex;
  align-items:center;
  gap:1.2rem;
  max-width:900px;
  margin:0 auto;
  flex-wrap:wrap;
}
.ws-notice-em { font-size:2rem; flex-shrink:0; }
.ws-notice-body { flex:1; min-width:200px; }
.ws-notice-title {
  font-family:'Archivo Black',sans-serif;
  font-size:.85rem;
  letter-spacing:1px;
  color:var(--text);
  margin-bottom:.35rem;
  text-transform:uppercase;
}
.ws-notice-txt {
  font-size:.72rem;
  color:var(--muted);
  line-height:1.7;
}
.ws-notice-txt em { font-style:normal; color:var(--yellow); }
.ws-notice-btns {
  display:flex;
  gap:.6rem;
  flex-shrink:0;
}
.ws-btn {
  padding:.55rem 1.1rem;
  border-radius:6px;
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;
  letter-spacing:.5px;
  cursor:pointer;
  transition:all .2s;
  white-space:nowrap;
}
.ws-yes {
  background:var(--mode-color);
  border:1px solid var(--mode-color);
  color:#000;
  font-weight:600;
}
.ws-yes:hover { opacity:.85; transform:translateY(-1px); }
.ws-no {
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
}
.ws-no:hover { border-color:var(--text); color:var(--text); }
/* Cookie blocker notice variant */
.ws-blocked { border-top-color:var(--orange); }
.ws-blocked .ws-notice-title { color:var(--orange); }

/* Inline fallback hint — shown when the banner is blocked by an extension */
.ws-hint {
  display:none;
  margin-bottom:.8rem;
  padding:.75rem 1rem;
  background:var(--s2);
  border:1px dashed var(--border);
  border-radius:8px;
  font-size:.7rem;
  color:var(--muted);
  line-height:1.7;
}
.ws-hint.ws-hint-show {
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  animation:wsHintIn .45s cubic-bezier(.34,1.56,.64,1), wsHintPulse 4s ease-in-out 1s 3;
}
.ws-hint-msg { flex:1; min-width:180px; }
.ws-hint-msg b { color:var(--text); }
.ws-hint-btns { display:flex; gap:.5rem; flex-shrink:0; }
.ws-hint-yes {
  padding:.35rem .8rem;
  background:var(--mode-color);
  border:none;
  border-radius:5px;
  color:#000;
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;
  cursor:pointer;
  font-weight:600;
}
.ws-hint-no {
  padding:.35rem .8rem;
  background:transparent;
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;
  cursor:pointer;
}
.ws-hint-no:hover { border-color:var(--text); color:var(--text); }

@media(max-width:600px){
  .ws-notice-inner { gap:.8rem; }
  .ws-notice-btns { width:100%; }
  .ws-btn { flex:1; text-align:center; }
}

/* ── SHARE CARD BANNER (in results) ── */
.share-btn-banner {
  margin-bottom:.8rem;
  padding:1.4rem 1.6rem;
  background:var(--s1);
  border:2px solid var(--mode-color);
  border-radius:12px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.share-btn-banner::before {
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--mode-color) 12%, transparent), transparent 70%);
  pointer-events:none;
}
.share-btn-eyebrow {
  font-family:'IBM Plex Mono',monospace;
  font-size:.58rem;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:.8rem;
}
.share-btn-main {
  display:inline-block;
  background:var(--mode-color);
  color:#000;
  font-family:'Archivo Black',sans-serif;
  font-size:1.05rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:.9rem 2.6rem;
  border:none;
  border-radius:8px;
  cursor:pointer;
  transition:transform .15s, filter .15s;
  animation: share-pulse 2.4s ease-in-out infinite;
  position:relative;z-index:1;
}
.share-btn-main:hover { filter:brightness(1.12); transform:scale(1.03); }
.share-btn-hint {
  font-family:'IBM Plex Mono',monospace;
  font-size:.58rem;
  color:var(--muted);
  letter-spacing:.5px;
  margin-top:.7rem;
}
@media(max-width:600px){
  .share-btn-main { font-size:.8rem; padding:.8rem 1.4rem; }
}

/* ── SHARE MODAL INNER ── */
.share-modal-inner {
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1.6rem;
  width:95%;
  max-width:760px;
  position:relative;
  margin:auto;
}

/* ── CARD TYPE PICKER ── */
.share-picker-wrap { margin-bottom:.5rem; }
.share-picker {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.4rem;
}
.share-pill {
  background:var(--s2);
  border:1px solid var(--border);
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:.6rem;
  padding:.5rem .6rem;
  border-radius:8px;
  cursor:pointer;
  transition:all .15s;
  text-align:left;
  line-height:1.4;
}
.share-pill:hover { border-color:var(--mode-color); color:var(--mode-color); }
.share-pill.active {
  background:var(--mode-color);
  border-color:var(--mode-color);
  color:#000;
  font-weight:700;
}
.share-shuffle-btn {
  grid-column:1/-1;
  background:transparent;
  border:1px dashed var(--border);
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:.6rem;
  padding:.4rem;
  border-radius:8px;
  cursor:pointer;
  transition:all .15s;
  letter-spacing:.5px;
}
.share-shuffle-btn:hover { border-color:var(--mode-color); color:var(--mode-color); }

/* ── CAPTION EDITOR ── */
.share-caption-wrap { margin:.2rem 0 .8rem; }
.share-caption-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.4rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.6rem;
  letter-spacing:.5px;
  color:var(--muted);
}
.share-regen-btn {
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  font-family:'IBM Plex Mono',monospace;
  font-size:.58rem;
  padding:.25rem .6rem;
  border-radius:4px;
  cursor:pointer;
  transition:all .15s;
}
.share-regen-btn:hover { border-color:var(--mode-color); color:var(--mode-color); }
.share-regen-btn:disabled { opacity:.35; cursor:not-allowed; border-color:var(--border); color:var(--muted); }
.share-regen-btn:disabled:hover { border-color:var(--border); color:var(--muted); }
.share-caption-ta {
  width:100%;
  box-sizing:border-box;
  background:var(--s2);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  line-height:1.6;
  padding:.7rem .9rem;
  resize:vertical;
  transition:border-color .15s;
}
.share-caption-ta:focus { outline:none; border-color:var(--mode-color); }

/* ── SHARE NOW (primary CTA) ── */
.share-now-btn {
  display:block;
  width:100%;
  margin:.8rem 0 .3rem;
  padding:1rem;
  background:var(--mode-color);
  color:#000;
  font-family:'Archivo Black',sans-serif;
  font-size:.95rem;
  letter-spacing:1px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:background .4s ease, color .4s ease, filter .15s, transform .1s;
}
.share-now-btn:hover:not(.share-success) { filter:brightness(1.1); transform:scale(1.01); }

/* Success state — suffer mode turns green, grind mode turns blue */
.share-now-btn.share-success {
  cursor:default;
  animation:shareSuccessPulse .5s ease;
}
body:not(.mode-grind) .share-now-btn.share-success {
  background:var(--green);
  color:#001a0d;
}
body.mode-grind .share-now-btn.share-success {
  background:var(--blue);
  color:#00080f;
}
.share-now-hint {
  font-family:'IBM Plex Mono',monospace;
  font-size:.58rem;
  color:var(--muted);
  text-align:center;
  line-height:1.5;
  margin-bottom:.8rem;
}
.share-email-btn {
  display:block;
  width:100%;
  padding:.55rem 1rem;
  margin:.3rem 0 .9rem;
  background:transparent;
  border:1px solid rgba(255,119,0,.35);
  color:var(--orange);
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:1px;
  text-transform:lowercase;
  border-radius:6px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.share-email-btn:hover {
  background:rgba(255,119,0,.08);
  border-color:rgba(255,119,0,.6);
}
body.light-mode .share-email-btn {
  border-color:rgba(191,85,0,.35);
  color:var(--orange);
}
body.light-mode .share-email-btn:hover {
  background:rgba(191,85,0,.07);
  border-color:rgba(191,85,0,.55);
}

/* ── HOW-TO INSTRUCTION BOX ── */
.share-howto {
  background:rgba(255,119,0,.07);
  border:1px solid rgba(255,119,0,.25);
  border-left:3px solid var(--orange);
  border-radius:6px;
  padding:.85rem 1rem .85rem 1rem;
  margin-bottom:1rem;
  animation:shareHowtoIn .35s ease both;
}
.share-howto-title {
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.55rem;
}
.share-howto-steps {
  margin:0;
  padding-left:1.2rem;
  list-style:decimal;
}
.share-howto-steps li {
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;
  color:var(--dim);
  line-height:1.7;
}
.share-howto-steps li strong {
  color:var(--text);
  font-weight:600;
}
.share-howto-steps kbd {
  display:inline-block;
  padding:.05rem .3rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.58rem;
  background:rgba(255,119,0,.12);
  border:1px solid rgba(255,119,0,.3);
  border-radius:3px;
  color:var(--orange);
}
body.light-mode .share-howto {
  background:rgba(191,85,0,.06);
  border-color:rgba(191,85,0,.22);
  border-left-color:var(--orange);
}
body.light-mode .share-howto-title { color:var(--orange); }
body.light-mode .share-howto-steps kbd {
  background:rgba(191,85,0,.1);
  border-color:rgba(191,85,0,.28);
  color:var(--orange);
}

.share-alts-label {
  font-family:'IBM Plex Mono',monospace;
  font-size:.58rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.4rem;
}

/* ── PLATFORM BUTTONS ── */
.share-platforms {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.45rem;
  margin-top:.6rem;
}
.share-plat {
  background:var(--s2);
  border:1px solid var(--border);
  color:var(--text);
  font-family:'IBM Plex Mono',monospace;
  font-size:1.1rem;
  padding:.6rem .4rem .4rem;
  border-radius:8px;
  cursor:pointer;
  transition:all .15s;
  line-height:1.2;
  text-align:center;
}
.share-plat span {
  display:block;
  font-size:.55rem;
  color:var(--muted);
  letter-spacing:.5px;
  margin-top:.2rem;
}
.share-plat:hover { background:var(--mode-color); color:#000; border-color:var(--mode-color); }
.share-plat:hover span { color:#000; }
.share-plat-dl { border-style:dashed; }
@media(max-width:480px){
  .share-platforms { grid-template-columns:repeat(3,1fr); }
}

/* light mode overrides for share UI */
body.light-mode .share-btn-banner { background:var(--s1); }
body.light-mode .share-plat { background:var(--s2); }
body.light-mode .share-caption-ta { background:var(--s2); }

/* ── MOBILE SAVE OVERLAY ── */
.mobile-save-overlay {
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.96);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.2rem;gap:.9rem;
  animation:fadeIn .2s ease;
}
.mso-hint {
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;
  letter-spacing:.5px;
  color:var(--yellow);
  text-align:center;
  line-height:1.6;
}
.mso-hint strong { color:#fff; }
.mso-img {
  max-width:100%;
  max-height:55vh;
  border-radius:10px;
  display:block;
  -webkit-user-select:none;
  user-select:none;
}
.mso-caption-note {
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;
  color:var(--green);
  text-align:center;
  line-height:1.7;
}
.mso-caption-note span { color:var(--muted); font-size:.58rem; }
.mso-close {
  background:transparent;
  border:1px solid #333;
  color:#555;
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;
  padding:.45rem 1.2rem;
  border-radius:6px;
  cursor:pointer;
  letter-spacing:.5px;
}
.mso-close:hover { border-color:#555; color:#888; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ── RESPONSIVE VISIBILITY HELPERS ── */
.mobile-only { display:none; }
.desktop-only { display:block; }
@media(max-width:680px){
  .mobile-only { display:block; }
  .desktop-only { display:none; }
}

/* ── MOBILE SAVE IMAGE BUTTON ── */
.share-save-mobile {
  display:block;
  width:100%;
  padding:.6rem 1rem;
  margin:.3rem 0 .5rem;
  background:transparent;
  border:1px solid rgba(0,255,136,.3);
  color:var(--green);
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  letter-spacing:1px;
  text-transform:lowercase;
  border-radius:6px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
.share-save-mobile:hover { background:rgba(0,255,136,.07); border-color:rgba(0,255,136,.55); }
body.light-mode .share-save-mobile { border-color:rgba(0,153,96,.3); color:var(--green); }

/* ═══════════════════════════════════════════════════
   MOBILE BOTTOM CONTROL BAR
   ═══════════════════════════════════════════════════ */
.mobile-bottom-bar {
  display:none; /* hidden on desktop */
}
@media(max-width:680px){
  /* Bottom padding — enough to clear the bottom bar without being excessive */
  main { padding-bottom:5rem; }

  /* Comparison: stack sections vertically with visual dividers */
  .cmp-grid { grid-template-columns:1fr; gap:0; }
  .cmp-section {
    padding:1rem 0;
    border-bottom:1px solid var(--border);
  }
  .cmp-section:last-child { border-bottom:none; }
  .cmp-rich { margin-top:0; padding-top:1rem; border-top:none; }

  /* Wealth detail: single column on narrow screens */
  .wealth-detail-grid { grid-template-columns:1fr; gap:.15rem; }
  .wealth-detail-full { grid-column:auto; }

  /* Bottom bar itself */
  .mobile-bottom-bar {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.45rem;
    position:fixed;
    bottom:0;left:0;right:0;
    z-index:600;
    padding:.55rem 1rem .75rem;
    background:rgba(8,8,8,.97);
    border-top:1px solid var(--border);
    backdrop-filter:blur(20px);
  }
  body.light-mode .mobile-bottom-bar {
    background:rgba(236,234,228,.97);
  }

  .mbb-label {
    font-family:'IBM Plex Mono',monospace;
    font-size:.52rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--muted);
  }

  .mbb-controls {
    display:flex;
    align-items:center;
    gap:.6rem;
    width:100%;
    justify-content:center;
  }

  /* Mode pill — same visual as header version */
  .mbb-mode-pill {
    display:flex;
    background:var(--s2);
    border:1px solid var(--border);
    border-radius:6px;
    overflow:hidden;
    flex:1;
    max-width:260px;
  }
  .mbb-mode-pill button {
    flex:1;
    padding:.5rem .8rem;
    background:transparent;
    border:none;
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    font-size:.72rem;
    letter-spacing:1px;
    cursor:pointer;
    text-transform:uppercase;
    transition:all .2s;
  }
  .mbb-mode-pill button.active-slave {
    background:var(--red);
    color:#fff;
    font-weight:600;
  }
  .mbb-mode-pill button.active-grind {
    background:var(--green);
    color:#000;
    font-weight:600;
  }

  /* Theme toggle — compact icon button */
  .mbb-theme {
    background:transparent;
    border:1px solid var(--border);
    border-radius:6px;
    color:var(--muted);
    font-size:.9rem;
    width:2.4rem;
    height:2.4rem;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    flex-shrink:0;
    transition:all .2s;
  }
  .mbb-theme:hover { border-color:var(--yellow); color:var(--yellow); }

  /* Toasts: shift up to clear the bottom bar */
  .toast { bottom:5.5rem; right:.75rem; max-width:calc(100vw - 1.5rem); }
  .bk-toast { bottom:5.5rem; left:.75rem; max-width:calc(100vw - 1.5rem); }
  .social-toast { top:4rem; right:.75rem; max-width:calc(100vw - 1.5rem); left:.75rem; }

  /* Share modal: full-height scroll on mobile */
  .overlay { align-items:flex-start; padding:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #shareModal { padding:.5rem .5rem 6rem; box-sizing:border-box; min-height:100%; }
  .share-modal-inner { margin:0 auto; width:100%; max-width:100%; border-radius:12px; }

  /* Hide platform grid on mobile */
  .share-platforms { display:none; }
  .share-alts-label { display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   BOSS KEY — fake work screen overlay
   Space = activate/cycle   Escape = exit
   ═══════════════════════════════════════════════════════════════ */
#bossOverlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  user-select: none;
  cursor: default;
}
.bk-screen { width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; }

/* Hint bar */
.bk-hint {
  position: fixed;
  bottom:0; left:0; right:0;
  background: rgba(0,0,0,.88);
  color: rgba(255,255,255,.6);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .58rem;
  letter-spacing: 1.5px;
  text-align: center;
  padding: .28rem .5rem;
  z-index: 10000;
}
.bk-hint kbd {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2px;
  padding: 0 .25rem;
  font-family: inherit;
}
.bk-hint-exit {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 4px;
  color: rgba(255,255,255,.85);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .65rem;
  letter-spacing: .8px;
  padding: .25rem .7rem;
  cursor: pointer;
  margin: 0 .2rem;
}

/* Shared titlebar helpers */
.bk-bar { display:flex; align-items:center; justify-content:space-between; padding:0 .7rem; height:2rem; flex-shrink:0; font-size:.75rem; }
.bk-wm  { display:flex; gap:.6rem; align-items:center; color:#999; font-size:.7rem; }

/* ── Excel ─────────────────────────────────────────────── */
.bk-excel { background:#fff; color:#222; }
.bk-bar-excel { background:#217346; color:#fff; }
.bk-excel-x { background:#217346; color:#fff; font-weight:800; font-size:.85rem; border:2px solid rgba(255,255,255,.4); width:1.4rem; height:1.4rem; display:flex; align-items:center; justify-content:center; }
.bk-ex-menu { display:flex; background:#f3f2f1; border-bottom:1px solid #d0d0d0; padding:0 .3rem; font-size:.72rem; }
.bk-ex-menu span { padding:.25rem .5rem; cursor:pointer; }
.bk-ex-menu span:hover,.bk-ex-menu span.act { background:#e1dfdd; }
.bk-ex-fbar { display:flex; align-items:center; background:#fff; border-bottom:1px solid #ccc; padding:.18rem .4rem; gap:.4rem; font-size:.75rem; flex-shrink:0; }
.bk-ex-fcell { border:1px solid #aaa; padding:.1rem .4rem; min-width:3rem; text-align:center; }
.bk-ex-body { flex:1; overflow:auto; }
.bk-table { border-collapse:collapse; width:100%; font-size:.75rem; }
.bk-table th,.bk-table td { border:1px solid #d0d0d0; padding:.15rem .5rem; min-width:3rem; white-space:nowrap; }
.bk-table th { background:#f3f2f1; text-align:center; font-weight:400; font-size:.7rem; position:sticky; top:0; z-index:1; }
.bk-rnum { background:#f3f2f1; color:#666; text-align:right; font-size:.68rem; width:1.8rem; }
.bk-cell { background:#fff; }
.bk-hdr  { background:#e2efda; }
.bk-grn  { color:#217346; font-weight:600; }
.bk-red  { color:#c00; }
.bk-blu  { color:#0070c0; }
.bk-mut  { color:#aaa; font-style:italic; }
.bk-bold { font-weight:700; }
.bk-sel  { background:#d9e1f2; }
.bk-ex-foot { background:#f3f2f1; border-top:1px solid #ccc; padding:.2rem .6rem; font-size:.65rem; color:#666; display:flex; gap:.8rem; flex-shrink:0; }

/* ── Slack ─────────────────────────────────────────────── */
.bk-slack { background:#fff; color:#1d1c1d; display:flex; flex-direction:row; overflow:hidden; }
.bk-slack-sb { width:220px; flex-shrink:0; background:#3f0e40; color:#cba8ce; display:flex; flex-direction:column; overflow:hidden; }
.bk-slack-ws { padding:.6rem .7rem .2rem; font-weight:700; font-size:.88rem; color:#fff; display:flex; justify-content:space-between; align-items:center; }
.bk-slack-status { padding:.05rem .7rem .5rem; font-size:.65rem; display:flex; align-items:center; gap:.3rem; }
.bk-slack-sec { padding:.5rem .7rem .1rem; font-size:.65rem; color:#b4a0b5; font-weight:700; letter-spacing:.3px; }
.bk-slack-ch { padding:.18rem .7rem; font-size:.8rem; cursor:pointer; }
.bk-slack-ch:hover,.bk-slack-ch.act { background:rgba(255,255,255,.1); }
.bk-slack-ch.act { background:#1264a3; color:#fff; border-radius:4px; margin:0 .3rem; }
.bk-slack-dm { padding:.18rem .7rem; font-size:.8rem; display:flex; align-items:center; gap:.4rem; }
.bk-sdot { font-size:.55rem; }
.bk-sdot-g { color:#2bac76; } .bk-sdot-y { color:#ecb22e; } .bk-sdot-r { color:#e01e5a; }
.bk-slack-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.bk-slack-hdr { padding:.5rem .8rem; border-bottom:1px solid #ddd; display:flex; align-items:center; gap:.3rem; font-weight:700; font-size:.88rem; flex-shrink:0; }
.bk-slack-sub { color:#888; font-weight:400; font-size:.78rem; }
.bk-slack-msgs { flex:1; overflow:auto; padding:.6rem .8rem; display:flex; flex-direction:column; gap:.8rem; }
.bk-slack-msg { display:flex; gap:.7rem; }
.bk-slack-av { width:2.1rem; height:2.1rem; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:.65rem; font-weight:700; flex-shrink:0; }
.bk-slack-nm { font-weight:700; font-size:.8rem; margin-bottom:.15rem; }
.bk-slack-ts { color:#888; font-size:.7rem; font-weight:400; margin-left:.3rem; }
.bk-slack-txt { font-size:.85rem; color:#1d1c1d; line-height:1.5; }
.bk-slack-inp { padding:.5rem .8rem; border-top:1px solid #ddd; flex-shrink:0; }
.bk-slack-inpbox { width:100%; border:1px solid #ccc; border-radius:8px; padding:.4rem .8rem; font-size:.82rem; color:#aaa; background:#fff; box-sizing:border-box; }

/* ── VS Code ────────────────────────────────────────────── */
.bk-vsc { background:#1e1e1e; color:#d4d4d4; }
.bk-vsc-bar { background:#3c3c3c; display:flex; align-items:center; justify-content:space-between; padding:0 .5rem; height:1.9rem; font-size:.72rem; flex-shrink:0; }
.bk-vsc-menu { display:flex; gap:.05rem; }
.bk-vsc-menu span { padding:.2rem .45rem; cursor:pointer; color:#ccc; }
.bk-vsc-menu span:hover { background:rgba(255,255,255,.1); }
.bk-vsc-body { flex:1; display:flex; overflow:hidden; }
.bk-vsc-sbr { width:175px; flex-shrink:0; background:#252526; border-right:1px solid #333; overflow:hidden; }
.bk-vsc-sbr-title { padding:.5rem .7rem .2rem; font-size:.6rem; letter-spacing:1px; color:#bbb; }
.bk-vsc-dir  { padding:.18rem .5rem; font-size:.78rem; cursor:pointer; color:#ccc; }
.bk-vsc-file { padding:.18rem .5rem; font-size:.78rem; cursor:pointer; color:#ccc; }
.bk-vsc-dir:hover,.bk-vsc-file:hover { background:rgba(255,255,255,.06); }
.bk-vsc-file.act { background:#094771; }
.bk-vsc-ed { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }
.bk-vsc-tabs { background:#2d2d2d; display:flex; border-bottom:1px solid #252526; flex-shrink:0; }
.bk-vsc-tab { padding:.4rem .9rem; font-size:.75rem; color:#888; border-right:1px solid #252526; cursor:pointer; white-space:nowrap; }
.bk-vsc-tab.act { background:#1e1e1e; color:#d4d4d4; border-top:1px solid #0078d4; }
.bk-vsc-tab-dot { color:#d4d4d4; }
.bk-vsc-code { flex:1; overflow:auto; padding:.3rem 0; font-family:'Courier New',Courier,monospace; font-size:.78rem; }
.bk-ln { padding:.06rem 0 .06rem .5rem; display:flex; gap:.6rem; }
.bk-ln-hl { background:rgba(255,255,255,.05); }
.bk-lnum { color:#858585; min-width:1.6rem; text-align:right; user-select:none; flex-shrink:0; }
.bk-kw { color:#569cd6; } .bk-str { color:#ce9178; } .bk-cmt { color:#6a9955; }
.bk-fn  { color:#dcdcaa; } .bk-type { color:#4ec9b0; } .bk-op { color:#d4d4d4; }
.bk-id  { color:#9cdcfe; } .bk-lit { color:#b5cea8; }
.bk-vsc-term { height:6.5rem; background:#1e1e1e; border-top:1px solid #333; font-family:'Courier New',Courier,monospace; font-size:.75rem; overflow:hidden; flex-shrink:0; }
.bk-vsc-term-tabs { background:#252526; display:flex; padding:0 .5rem; border-bottom:1px solid #333; }
.bk-vsc-term-tabs span { padding:.25rem .6rem; font-size:.65rem; color:#888; cursor:pointer; }
.bk-vsc-term-tabs span.act { color:#fff; border-bottom:1px solid #0078d4; }
.bk-vsc-term-body { padding:.4rem .8rem; color:#d4d4d4; line-height:1.6; }
.bk-term-path { color:#e9a700; } .bk-term-dollar { color:#89d185; }
.bk-vsc-status { background:#007acc; color:#fff; display:flex; align-items:center; gap:1rem; padding:0 .6rem; font-size:.65rem; height:1.4rem; flex-shrink:0; }

/* ── Google Docs ────────────────────────────────────────── */
.bk-gdocs { background:#f8f9fa; color:#202124; }
.bk-gdocs-bar { background:#fff; border-bottom:1px solid #e0e0e0; display:flex; align-items:center; gap:.6rem; padding:.35rem .8rem; flex-shrink:0; }
.bk-gdocs-logo { color:#4285f4; font-size:1.5rem; line-height:1; }
.bk-gdocs-title { font-size:.9rem; font-weight:500; }
.bk-gdocs-toolbar { background:#f1f3f4; border-bottom:1px solid #e0e0e0; display:flex; align-items:center; gap:.05rem; padding:.2rem .5rem; flex-wrap:wrap; font-size:.72rem; flex-shrink:0; }
.bk-gdocs-btn { padding:.2rem .4rem; border-radius:3px; cursor:pointer; color:#444; }
.bk-gdocs-btn:hover { background:#e0e0e0; }
.bk-gdocs-sep { width:1px; height:1.2rem; background:#ccc; margin:0 .2rem; flex-shrink:0; }
.bk-gdocs-body { flex:1; overflow:auto; background:#f8f9fa; display:flex; justify-content:center; padding:1.5rem 1rem 3rem; }
.bk-gdocs-page { background:#fff; width:min(640px,100%); min-height:300px; padding:2rem 2.5rem; box-shadow:0 1px 4px rgba(0,0,0,.12); font-size:.86rem; line-height:1.75; color:#202124; }
.bk-gdocs-h1 { font-size:1.3rem; font-weight:600; margin-bottom:.2rem; }
.bk-gdocs-h2 { font-size:.95rem; font-weight:600; margin:1.2rem 0 .3rem; }
.bk-gdocs-p  { margin-bottom:.6rem; }
.bk-gdocs-meta { font-size:.7rem; color:#888; margin-bottom:1rem; border-bottom:1px solid #eee; padding-bottom:.6rem; }

/* ── Teams ──────────────────────────────────────────────── */
.bk-teams { background:#1e1e2d; color:#e8e8e8; }
.bk-teams-bar { background:#464775; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:.3rem .8rem; flex-shrink:0; }
.bk-teams-logo { font-weight:700; font-size:.88rem; }
.bk-teams-body { flex:1; display:flex; overflow:hidden; }
.bk-teams-sb { width:54px; background:#201f2d; display:flex; flex-direction:column; align-items:center; padding:.6rem 0; gap:.9rem; flex-shrink:0; }
.bk-teams-sbico { width:2.1rem; height:2.1rem; display:flex; align-items:center; justify-content:center; font-size:1.1rem; border-radius:6px; cursor:pointer; color:#aaa; }
.bk-teams-sbico.act { background:#464775; color:#fff; }
.bk-teams-main { flex:1; padding:.8rem; overflow:auto; }
.bk-teams-mtg-hdr { font-size:1rem; font-weight:600; margin-bottom:.2rem; }
.bk-teams-mtg-sub { font-size:.73rem; color:#aaa; margin-bottom:.8rem; }
.bk-teams-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.5rem; }
.bk-teams-tile { background:#2a2938; border-radius:8px; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.3rem; position:relative; overflow:hidden; }
.bk-teams-tile-name { position:absolute; bottom:.3rem; left:.5rem; font-size:.62rem; color:rgba(255,255,255,.8); background:rgba(0,0,0,.6); padding:.05rem .3rem; border-radius:3px; }
.bk-teams-av { width:2.6rem; height:2.6rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; }
.bk-teams-muted  { font-size:.6rem; color:#f04c4c; }
.bk-teams-camoff { font-size:.58rem; color:#aaa; }
.bk-teams-timer  { font-size:.75rem; color:#aaa; text-align:center; padding:.2rem 0 .4rem; }
.bk-teams-ctrl { display:flex; justify-content:center; gap:.5rem; padding:.5rem; border-top:1px solid #333; flex-shrink:0; }
.bk-teams-cbtn { background:#2a2938; border:none; border-radius:50%; width:2.4rem; height:2.4rem; display:flex; align-items:center; justify-content:center; font-size:.85rem; cursor:pointer; color:#fff; }
.bk-teams-cbtn.red { background:#c4314b; }

/* ── Gmail ──────────────────────────────────────────────── */
.bk-gmail { background:#f6f8fc; color:#202124; }
.bk-gmail-bar { background:#fff; border-bottom:1px solid #e8eaed; display:flex; align-items:center; gap:.8rem; padding:.32rem .8rem; flex-shrink:0; }
.bk-gmail-logo { font-size:.95rem; font-weight:700; color:#444; }
.bk-gmail-logo em { color:#ea4335; font-style:normal; }
.bk-gmail-search { flex:1; max-width:420px; background:#eaf0fb; border-radius:20px; padding:.3rem .9rem; font-size:.8rem; color:#888; }
.bk-gmail-body { flex:1; display:flex; overflow:hidden; }
.bk-gmail-sb { width:195px; flex-shrink:0; padding:.5rem .3rem; overflow:hidden; }
.bk-gmail-comp { background:#c2e7ff; color:#001d35; border-radius:20px; padding:.4rem .8rem .4rem .6rem; font-size:.8rem; display:flex; align-items:center; gap:.3rem; margin-bottom:.8rem; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.bk-gmail-nav { display:flex; flex-direction:column; }
.bk-gmail-navit { padding:.32rem .7rem; border-radius:0 20px 20px 0; font-size:.82rem; cursor:pointer; display:flex; align-items:center; gap:.4rem; }
.bk-gmail-navit:hover { background:#f1f3f4; }
.bk-gmail-navit.act { background:#d3e3fd; font-weight:600; }
.bk-gmail-badge { background:#d93025; color:#fff; border-radius:10px; padding:.05rem .35rem; font-size:.62rem; margin-left:auto; }
.bk-gmail-inbox { flex:1; overflow:auto; }
.bk-gmail-inbox-hdr { padding:.35rem .8rem; font-size:.68rem; color:#888; letter-spacing:.3px; border-bottom:1px solid #f0f0f0; }
.bk-gmail-row { display:flex; align-items:center; gap:.5rem; padding:.48rem .8rem; border-bottom:1px solid #f0f0f0; cursor:pointer; font-size:.82rem; }
.bk-gmail-row:hover { background:#f1f3f4; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.bk-gmail-row.unrd { font-weight:700; background:#fff; }
.bk-gmail-star  { font-size:.8rem; color:#bbb; flex-shrink:0; }
.bk-gmail-star.on { color:#f4b400; }
.bk-gmail-from { width:130px; flex-shrink:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.bk-gmail-subj { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.bk-gmail-preview { color:#888; font-weight:400; }
.bk-gmail-date { color:#888; font-size:.73rem; flex-shrink:0; margin-left:.3rem; }

/* ── Jira ───────────────────────────────────────────────── */
.bk-jira { background:#0052cc; color:#fff; }
.bk-bar-jira { background:#0052cc; color:#fff; }
.bk-jira-body { flex:1; display:flex; background:#fff; color:#172b4d; overflow:hidden; }
.bk-jira-sb { width:195px; flex-shrink:0; background:#0747a6; color:rgba(255,255,255,.9); padding:.5rem 0; overflow:hidden; }
.bk-jira-proj { padding:.4rem .7rem .1rem; font-size:.65rem; color:rgba(255,255,255,.55); letter-spacing:.4px; text-transform:uppercase; }
.bk-jira-navit { padding:.38rem .7rem; font-size:.8rem; cursor:pointer; }
.bk-jira-navit:hover { background:rgba(255,255,255,.1); }
.bk-jira-navit.act { background:rgba(255,255,255,.14); border-left:3px solid #4c9aff; padding-left:calc(.7rem - 3px); }
.bk-jira-main { flex:1; padding:.7rem .8rem; overflow:auto; }
.bk-jira-sprint { font-size:.85rem; font-weight:600; margin-bottom:.5rem; }
.bk-jira-sprint span { color:#888; font-weight:400; font-size:.75rem; }
.bk-jira-board { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.bk-jira-col { background:#f4f5f7; border-radius:4px; padding:.4rem; min-height:180px; }
.bk-jira-col-hdr { font-size:.62rem; font-weight:700; color:#6b778c; letter-spacing:.5px; padding:.2rem 0 .4rem; }
.bk-jira-ticket { background:#fff; border-radius:4px; padding:.38rem .5rem; margin-bottom:.3rem; font-size:.72rem; box-shadow:0 1px 2px rgba(0,0,0,.08); cursor:pointer; line-height:1.4; }
.bk-jira-ticket:hover { box-shadow:0 2px 5px rgba(0,0,0,.14); }
.bk-jira-tick-id { color:#0052cc; font-size:.62rem; font-weight:600; margin-bottom:.15rem; display:flex; align-items:center; gap:.3rem; }
.bk-jira-tick-type { padding:.04rem .25rem; border-radius:2px; font-size:.6rem; font-weight:600; }
.bk-jira-bug   { background:#ff5630; color:#fff; }
.bk-jira-story { background:#36b37e; color:#fff; }
.bk-jira-task  { background:#4c9aff; color:#fff; }

/* ── Notion ─────────────────────────────────────────────── */
.bk-notion { background:#fff; color:#37352f; }
.bk-notion-bar { background:#fff; border-bottom:1px solid #e8e8e4; display:flex; align-items:center; gap:.4rem; padding:.32rem .7rem; font-size:.78rem; color:#888; flex-shrink:0; }
.bk-notion-crumb { color:#37352f; font-weight:500; }
.bk-notion-body { flex:1; display:flex; overflow:hidden; }
.bk-notion-sb { width:210px; flex-shrink:0; background:#f7f7f5; border-right:1px solid #e8e8e4; padding:.5rem 0; overflow:hidden; }
.bk-notion-ws { padding:.3rem .6rem .5rem; font-weight:700; font-size:.85rem; }
.bk-notion-navit { padding:.22rem .6rem; font-size:.8rem; cursor:pointer; display:flex; align-items:center; gap:.35rem; }
.bk-notion-navit:hover,.bk-notion-navit.act { background:#eceae4; border-radius:4px; margin:0 .3rem; padding:.22rem .3rem; }
.bk-notion-main { flex:1; padding:1.5rem 2rem; overflow:auto; }
.bk-notion-h1 { font-size:1.7rem; font-weight:700; margin-bottom:.3rem; }
.bk-notion-h2 { font-size:1rem; font-weight:600; margin:1.3rem 0 .4rem; }
.bk-notion-p { font-size:.87rem; color:#555; line-height:1.7; margin-bottom:.4rem; }
.bk-notion-table { width:100%; border-collapse:collapse; margin:.4rem 0; font-size:.82rem; }
.bk-notion-table th { background:#f7f7f5; padding:.32rem .6rem; text-align:left; font-weight:600; border:1px solid #e8e8e4; font-size:.72rem; color:#888; letter-spacing:.3px; }
.bk-notion-table td { padding:.32rem .6rem; border:1px solid #e8e8e4; }
.bk-notion-cb { display:flex; align-items:flex-start; gap:.4rem; font-size:.85rem; margin:.25rem 0; }
.bk-notion-tag { display:inline-block; background:#e3e2de; border-radius:3px; padding:.05rem .35rem; font-size:.7rem; color:#666; margin:.1rem; }
.bk-notion-prog { background:#e8e8e4; border-radius:3px; height:.45rem; margin:.3rem 0 .1rem; }
.bk-notion-prog-fill { background:#2eaadc; border-radius:3px; height:100%; transition:width .4s; }

/* ── GitHub ─────────────────────────────────────────────── */
.bk-gh { background:#0d1117; color:#e6edf3; }
.bk-gh-bar { background:#161b22; border-bottom:1px solid #30363d; display:flex; align-items:center; gap:1rem; padding:.38rem 1rem; flex-shrink:0; font-size:.8rem; }
.bk-gh-logo { font-size:1.3rem; line-height:1; }
.bk-gh-nav { display:flex; gap:.6rem; }
.bk-gh-nav span { cursor:pointer; }
.bk-gh-nav span:hover { color:#58a6ff; }
.bk-gh-search { background:#0d1117; border:1px solid #30363d; border-radius:6px; padding:.22rem .7rem; color:#8b949e; font-size:.73rem; width:170px; }
.bk-gh-body { flex:1; overflow:auto; padding:.8rem 1.5rem 3rem; }
.bk-gh-pr-hdr { margin-bottom:.8rem; }
.bk-gh-pr-title { font-size:1.05rem; font-weight:600; margin-bottom:.3rem; }
.bk-gh-pr-num { color:#8b949e; font-weight:400; }
.bk-gh-badge { display:inline-flex; align-items:center; gap:.3rem; background:#1a7f37; color:#fff; border-radius:20px; padding:.2rem .6rem; font-size:.72rem; font-weight:600; }
.bk-gh-tab-row { display:flex; gap:0; border-bottom:1px solid #30363d; margin-bottom:.8rem; font-size:.82rem; }
.bk-gh-tab { padding:.4rem .9rem; cursor:pointer; color:#8b949e; }
.bk-gh-tab:hover { color:#e6edf3; }
.bk-gh-tab.act { color:#e6edf3; border-bottom:2px solid #f78166; }
.bk-gh-diff-hdr { background:#161b22; border:1px solid #30363d; border-radius:6px 6px 0 0; padding:.38rem .8rem; font-size:.75rem; color:#8b949e; }
.bk-gh-diff { font-family:'Courier New',Courier,monospace; font-size:.75rem; border:1px solid #30363d; border-top:none; border-radius:0 0 6px 6px; overflow:hidden; margin-bottom:.8rem; }
.bk-gh-diff-line { padding:.1rem .6rem; display:flex; gap:.9rem; line-height:1.6; }
.bk-gh-ln { color:#3d444d; min-width:2.2rem; text-align:right; user-select:none; flex-shrink:0; }
.bk-gh-diff-line.add { background:#0d2818; }
.bk-gh-diff-line.del { background:#3d0e0e; }
.bk-gh-diff-line.ctx { color:#8b949e; }
.bk-gh-plus  { color:#3fb950; }
.bk-gh-minus { color:#f85149; }
.bk-gh-comment { background:#161b22; border:1px solid #30363d; border-radius:6px; margin:.6rem 0; }
.bk-gh-comment-hdr  { background:#1c2128; border-radius:6px 6px 0 0; padding:.3rem .7rem; font-size:.75rem; color:#8b949e; border-bottom:1px solid #30363d; }
.bk-gh-comment-body { padding:.5rem .7rem; font-size:.83rem; line-height:1.6; }
.bk-gh-comment-actions { padding:.3rem .7rem; border-top:1px solid #30363d; display:flex; gap:.6rem; font-size:.72rem; color:#8b949e; }
.bk-gh-comment-actions span { cursor:pointer; }
.bk-gh-comment-actions span:hover { color:#58a6ff; }

/* ── Mobile boss button ─────────────────────────────────── */
@media(max-width:680px) {
  .mbb-boss {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: .7rem;
    padding: 0 .5rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    gap: .25rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s;
    letter-spacing: .5px;
  }
  .mbb-boss:hover { border-color:var(--red); color:var(--red); }
}