/* ============================================================
   VEYRA · Pug — design system
   Quiet workspace: flat opaque surfaces, hairline borders,
   one gold accent. Dark-first.
   ============================================================ */

:root {
  /* ── Dark (default / gold on neutral near-black) ─────────────────── */
  --bg:           #0a0a0a;
  --bg-card:      #161616;
  --surface:      #161616;
  --surface-2:    #1f1f1f;
  --border:       #2b2b2b;
  --border2:      #3a3a3a;
  --border-hover: rgba(212,165,116,0.45);
  --text:         #e9e6de;
  --text-muted:   #a9a496;
  --text-dim:     #716c5f;
  --accent:       #d4a574;
  --accent-glow:  rgba(212,165,116,0.10);
  --accent-soft:  #2a241a;
  --accent2:      #c87c4a;
  --green:        #78b878;
  --blue:         #6f97c4;
  --bg-gradient:  #0a0a0a;
  --text-on-accent: #181410;
  --shadow:       0 1px 2px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.22);
  --shadow-lg:    0 8px 30px rgba(0,0,0,0.5);

  --header-h:  75px;
  --lbar-w:    clamp(240px, 22vw, 320px);
  --rbar-w:    clamp(180px, 22vw, 270px);
  --gap:       12px;
  --radius:    12px;

  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, monospace;
}


/* ── BACKGROUND (flat — video wallpaper retired) ── */
.pug-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg);
}
.pug-bg video { display: none; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 19px; }  /* bumped from 17px — larger text overall (wisdom bar pinned below) */

.page-layout {
  display: block;
  position: relative;
  z-index: 1;
}

body {
  /* No forced page zoom. We used to set zoom:0.8 (UI was designed at 80%), but that
     double-shrank for anyone whose OS/browser was already below 100% and broke the
     fixed sidebars' 100vh height (ghost space). The app now respects the user's own
     OS/browser scale — consistent for everyone; users can zoom with Ctrl +/- to taste. */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  overflow-x: hidden;
}

/* vignette overlay removed — flat background */

.main-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.32s ease;
}

.main-header.hidden {
  transform: translateY(-100%);
}

.main-header.scrolled {
  box-shadow: var(--shadow);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.logo span { color: var(--accent); }

.greeting {
  display: flex;
  flex-direction: column;   /* stack lines vertically */
  gap: 1px;
  line-height: 1.2;
}
.greeting strong { color: var(--text); font-weight: 500; }

.greeting-hey {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}
 
.greeting-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  /* Shows ". . ." after the name using CSS content */
  /* Remove the ::after if you don't want the dots */
}
 
.greeting-name::after {
  content: ' . . .';
  color: var(--accent);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.header-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.header-nav-right {
  justify-content: flex-end;
  flex: 0 1 auto;
  margin-left: auto;
}

.nav-pill {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  white-space: nowrap;
}

.nav-pill:hover,
.nav-pill.active,
.nav-pill.nav-active {
  color: var(--accent);
  border-color: var(--border-hover);
  background: var(--accent-glow);
}

/* ── SPA page routing ───────────────────────────────── */
.page-hidden { display: none !important; }

.playground > .card:not(.page-hidden),
.playground > .card.dream-standalone {
  animation: fadeUp 0.18s ease both;
}

.header-right {
    flex-shrink: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.clock-widget {
  display: flex;
  flex-direction: column;    /* two rows stacked */
  gap: 3px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 16px;
  /* Match r-bar width — var(--rbar-w) is 350px */
  width: var(--rbar-w);
  box-sizing: border-box;
}
 
/* Each row inside the clock widget */
.cw-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
 
.cw-time {
  font-family: var(--font-mono);
  font-size: 1.1rem;         /* bigger for the main time */
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
  min-width: 60px;           /* prevents layout jump as time changes */
}
 
.cw-weather {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  flex: 1;                   /* takes remaining row space */
}
 
.cw-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  min-width: 60px;
}
 
.cw-day {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  flex: 1;
}
 
.cw-sep {
  color: var(--border);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.l-bar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: var(--lbar-w);
  height: calc(100vh - var(--header-h));
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  padding: var(--gap) var(--gap) var(--gap) 8px;
  overflow: hidden;
}

/* ── Veyra lbar — 60px vertical capsule rail ─────────── */
.veyra-lbar {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 60px;
  height: calc(100vh - var(--header-h));
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

body.lbar-open .veyra-lbar {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
}

body.lbar-open .playground {
  margin-left: 60px;
}

.lbar-capsule {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 18px 9px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  min-height: 72px;
  line-height: 1;
}

.lbar-capsule:hover {
  background: var(--accent-glow);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
}

.lbar-capsule.nav-active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

.lbar-capsule-soon {
  opacity: 0.45;
  cursor: default;
  position: relative;
}
.lbar-capsule-soon::after {
  content: 'SOON';
  position: absolute;
  top: 6px;
  right: 50%;
  transform: translateX(50%) rotate(180deg);
  font-size: 0.44rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-family: var(--font-mono);
  opacity: 0.8;
}

.adbox-row {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--gap);
  height: 210px;
  margin-top: 15px;
}

.add1, .add2, .add3, .add4, .add5 {
  flex: 1;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  background: transparent;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s;
}

.add1:hover, .add2:hover, .add3:hover, .add4:hover, .add5:hover {
  border-color: var(--text-dim);
}

.add1::after, .add2::after, .add3::after, .add4::after, .add5::after {
  content: 'AD';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-dim);
  letter-spacing: 0.2em;
}


.r-bar {
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: var(--rbar-w);
  height: calc(100vh - var(--header-h));
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;                /* tighter than --gap so all cards fit without scrolling */
  padding: var(--gap) 8px var(--gap) var(--gap);
  overflow-y: auto;
  transition: top 0.32s cubic-bezier(0.4,0,0.2,1),
              height 0.32s cubic-bezier(0.4,0,0.2,1);
}

/* When header hides, sidebar stretches to fill the space */
body.header-hidden .r-bar,
body.header-hidden .l-bar {
  top: 0;
  height: 100vh;
}

/* The guest banner is fixed at the bottom — shrink the side bars by its height so
   their last card (the timer) isn't hidden behind it. */
body.has-guest-banner .r-bar,
body.has-guest-banner .l-bar { height: calc(100vh - var(--header-h) - 48px); }
body.has-guest-banner.header-hidden .r-bar,
body.has-guest-banner.header-hidden .l-bar { height: calc(100vh - 48px); }

.r-bar::-webkit-scrollbar { width: 0; }

/* ── Quick Ask: in-sidebar launcher + panel (desktop) ─────────────────────── */
.r-qa-toggle {
  position: fixed;
  /* Pinned beside the top card (now the calendar, since the timer moved to the
     bottom) — unchanged spot: the sidebar's top card starts at var(--header-h) +
     var(--gap), and +44px sits the tab against its upper area. translateY(-50%)
     pins the tab's OWN centre to that axis, so it stays put regardless of height. */
  top: calc(var(--header-h) + var(--gap) + 44px);
  transform: translateY(-50%);
  /* Butt the tab's right edge against the card's left edge — the card sits
     var(--gap) inside the sidebar (its left padding), so reach that far past the
     sidebar border. No gap; the tab reads as physically joined to the card. */
  right: calc(var(--rbar-w) - var(--gap));
  z-index: 130;
  width: 26px; padding: 13px 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border-radius: 14px 0 0 14px;          /* pull-tab: rounded on the left only */
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-right: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: -4px 0 14px rgba(0,0,0,0.25);
  transition: top 0.32s cubic-bezier(0.4,0,0.2,1),
              background .15s, color .15s, border-color .15s;
}
body.header-hidden .r-qa-toggle { top: calc(var(--gap) + 44px); }   /* card rides up with header; keep tab centred on it */
.r-qa-toggle .r-qa-label { writing-mode: vertical-rl; white-space: nowrap; }
.r-qa-toggle:hover { color: var(--text); border-color: var(--accent); }
.r-bar.qa-open .r-qa-toggle {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  /* While the panel is open there's no calendar card to butt against — pull the tab
     out into the gap so it doesn't overlap the panel's "Quick Ask" header. */
  right: calc(var(--rbar-w) + 3px);
}

/* Swap the sidebar in place: hide the cards, reveal the panel. Cards are only
   display:none'd, so their state (calendar month, to-do draft) survives. */
.r-bar.qa-open > .r-card { display: none; }

.r-quick-ask { display: none; flex: 1; min-height: 0; flex-direction: column; }
.r-bar.qa-open .r-quick-ask { display: flex; }

.r-qa-header {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 40px 10px 4px;   /* right pad clears the fixed launcher */
}
.r-qa-title {
  font-family: var(--font-mono);
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.r-qa-clear {
  margin-left: auto;
  font-size: 0.68rem; font-family: var(--font-mono);
  background: none; border: none; color: var(--text-dim);
  opacity: 0.45; cursor: pointer;
}
.r-qa-clear:hover { opacity: 0.8; }
.r-quick-ask .chat-window {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
}

.r-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 14px 14px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.r-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.buddybot { flex: 1; background: var(--surface); border-color: var(--border) !important; }
.buddybot:hover { border-color: rgba(74,122,170,0.45) !important; }
/* Calendar, BlinkBot and To-do share the rbar's free space (grow from natural height)
   so the bar fills top-to-bottom with the timer pinned at the end and no ghost gap;
   each has a min-height so content never crushes, and the rbar scrolls if too short. */
.calender { flex: 1 1 auto; min-height: 290px; }

/* ── Sidebar Goals Card ─────────────────────────────── */
.r-goals-card {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 8px;
}

.r-goals-sections {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  margin-bottom: 8px;
}

.r-goals-section-label {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);

  margin: 10px 0 5px;
  text-transform: uppercase;
}

.r-planned-label { color: #4a7aaa; opacity: 0.7; }

.r-goals-list { display: flex; flex-direction: column; gap: 4px; }

.r-goal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--text);
  transition: background 0.15s;
}

.r-goal-item:hover { background: var(--surface-2); }

.r-goal-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.r-goal-actions {
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.15s;
}

.r-goal-item:hover .r-goal-actions { opacity: 1; }

.r-goal-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 2px;
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
}

.r-goal-btn:hover { color: var(--text); }
.r-goal-btn.btn-finish:hover { color: var(--green); }
.r-goal-btn.btn-cancel:hover { color: var(--accent2); }

.r-goal-input-row {
  display: flex;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.r-goal-input-row input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.72rem;
  color: var(--text);
  font-family: var(--font-body);
  outline: none;
}

.r-goal-input-row input:focus { border-color: var(--accent); }

.r-goal-input-row button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  width: 28px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s;
}

.r-goal-input-row button:hover { background: var(--surface-2); }

/* ── Profile tab ────────────────────────────────────── */
.sec-profile-card {
  height: 720px;
  min-height: 0;
  cursor: default;
  overflow: hidden;
  padding: 0;
}
.sec-profile-card:hover { transform: none; border-color: var(--border); box-shadow: none; }
.profile-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.profile-cols {
  flex: 1;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  min-height: 0;
}
.profile-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
}
.profile-col-left {
  border-right: 1px solid var(--border);
}
.pp-rank-grid {
  padding: 4px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── Theme swatches ── */
.theme-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 6px;
}
.theme-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  outline: none;
  flex-shrink: 0;
}
.theme-swatch:hover { transform: scale(1.18); }
.theme-swatch-active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}
.theme-palette-swatches .theme-swatch {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border-width: 2px;
}
.pp-theme-palette-names {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  margin-bottom: 2px;
}
.pp-theme-palette-names span {
  width: 32px;
  text-align: center;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.theme-swatch-soon {
  background: var(--surface-2) !important;
  border: 1px dashed var(--border2) !important;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default !important;
  transform: none !important;
}
.theme-cs-label {
  font-size: 0.60rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  letter-spacing: 0.06em;
  opacity: 0.45;
  margin-bottom: 10px;
}
.profile-tab-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px 14px;
}
.profile-tab-avatar {
  width: 56px !important;
  height: 56px !important;
  font-size: 1.4rem;
  pointer-events: none;
}
/* Admin Panel entry — pinned to the right of the name in the profile header */
.profile-admin-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  color: var(--text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
.profile-admin-btn:hover { border-color: var(--accent); color: var(--accent); }
.profile-tab-username {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.profile-tab-sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* Native mobile-picker select shows on desktop; its styled button must be hidden
   off-mobile (the show rule lives in the mobile-only stylesheet). */
.mob-sel-btn { display: none; }

/* ── BlinkBot card (rbar) — sized to content, centered, small status badge ── */
.r-blinkbot-soon {
  flex: 1 1 auto;          /* shares the rbar's free space with calendar + to-do */
  min-height: 150px;       /* never shorter than its content — avoids the overflow sliver */
  display: flex;
  flex-direction: column;  /* header on top, content fills below */
  align-items: stretch;
  cursor: default;
  border-style: dashed;
  border-color: rgba(74,122,170,0.25) !important;
}
.r-blinkbot-soon:hover { transform: none; box-shadow: none; border-color: rgba(74,122,170,0.4) !important; }
/* "BlinkBot" reads as a card title (like the other rbar cards) but keeps its blue.
   Double-class so it beats the later .r-card-header { color: var(--text-muted) }. */
.r-card-header.r-blinkbot-header { color: #4a7aaa; border-bottom-color: rgba(74,122,170,0.3); }
/* Content below the title — centered; the input row spans full width. */
.r-blinkbot-soon-inner {
  flex: 1;
  text-align: center; width: 100%; box-sizing: border-box; padding: 6px 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
}
.r-blinkbot-soon-inner > .r-blinkbot-io { width: 100%; margin-top: 4px; }
.r-blinkbot-soon-inner > .r-blinkbot-dl-btn { width: 100%; }
/* BlinkBot and To-do share the leftover column height (both flex:1). */
.r-goals-card { flex: 1; }
.r-blinkbot-soon-sub {
  font-size: 0.68rem;
  color: var(--text-dim);
  opacity: 0.5;
}

/* ── BuddyBot coming soon — full-row tab card ────────── */
.buddybot-soon-card {
  height: auto !important;
  min-height: 300px;
  cursor: default;
  background: rgba(74,122,170,0.05) !important;
  border-color: rgba(74,122,170,0.18) !important;
}
.buddybot-soon-card:hover {
  transform: none !important;
  border-color: rgba(74,122,170,0.32) !important;
  box-shadow: none !important;
}
.bb-soon-inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.bb-soon-left { flex: 1; min-width: 0; }
.bb-soon-premium-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid rgba(74,122,170,0.38);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: 14px;
}
.bb-soon-name {
  font-family: var(--font-display);
  font-size: 3.0rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  margin-bottom: 10px;
}
.bb-soon-tagline {
  font-size: 1.0rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 14px;
}
.bb-soon-desc {
  font-size: 0.79rem;
  color: var(--text-dim);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 22px;
}
.bb-soon-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px dashed rgba(74,122,170,0.38);
  border-radius: 6px;
  padding: 6px 18px;
}
.bb-soon-features {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 6px;
}
.bb-soon-feature {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.bb-soon-feature-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
  opacity: 0.75;
}
.bb-soon-feature-name {
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.bb-soon-feature-desc {
  font-size: 0.71rem;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── Ask Anything flip card ─────────────────────────── */
.ask-flip-card {
  perspective: 1200px;
  height: 460px;
  padding: 0;
  overflow: hidden;
}
.ask-flip-card:hover { transform: none; }

.ask-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.ask-flip-inner.flipped { transform: rotateY(180deg); }

.ask-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px 18px;
}
.ask-back-face { transform: rotateY(180deg); }

/* Front face */
.ask-front-header { margin-bottom: 14px; }
.ask-front-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 7px;
  display: inline-block;
  margin-bottom: 6px;
  opacity: 0.8;
}
.ask-front-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--text);
  font-weight: 600;
  line-height: 1.1;
}
.ask-front-tagline {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 4px;
}
.ask-front-divider {
  height: 1px;
  background: var(--surface-2);
  margin: 12px 0;
}
.ask-front-how { display: flex; flex-direction: column; gap: 10px; }
.ask-how-row { display: flex; gap: 10px; align-items: flex-start; }
.ask-how-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
}
.ask-how-label {
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 1px;
}
.ask-how-desc {
  font-size: 0.73rem;
  color: var(--text-dim);
  line-height: 1.45;
}
.ask-front-quota {
  margin-top: auto;
  font-size: 0.72rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.ask-quota-free { color: var(--green); font-weight: 600; }
.ask-quota-sep  { opacity: 0.4; }
.ask-quota-paid { color: var(--text-dim); }
.ask-open-btn {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: opacity 0.15s;
  align-self: flex-start;
}
.ask-open-btn:hover { opacity: 0.85; }

/* Back face — chat */
.ask-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.ask-back-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  padding: 3px 6px;
  display: flex;
  align-items: center;
}
.ask-back-btn:hover { background: var(--surface-2); }
.ask-chat-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.ask-quota-pill {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  padding: 1px 7px;
  border-radius: 4px;
}
.ask-quota-pill.ask-quota-free {
  color: var(--green);
  border: 1px solid var(--green);
  opacity: 0.8;
}
.ask-quota-pill.ask-quota-paid {
  color: var(--accent);
  border: 1px solid var(--accent);
  opacity: 0.8;
}

/* Chat window */
.ama-chat-window {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding: 2px 0 4px;
}
.ama-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.78rem;
  gap: 4px;
  text-align: center;
  padding: 20px 0;
}
.ama-bubble {
  max-width: 85%;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.5;
  word-break: break-word;
}
.ama-bubble.from-user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
}
.ama-bubble.from-admin {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.bubble-meta {
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-top: 3px;
}
.ama-awaiting {
  font-size: 0.7rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
  padding: 0 2px;
}
.ama-input-row {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}
.ama-textarea {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 8px 10px;
  resize: none;
  min-height: 36px;
  max-height: 100px;
  overflow-y: auto;
}
.ama-textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.ama-send-btn {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 8px;
  padding: 0 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.ama-send-btn:hover { opacity: 0.85; }
.ama-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ama-error-toast {
  align-self: center;
  font-size: 0.74rem;
  color: var(--accent2);
  background: rgba(200,90,42,0.1);
  border: 1px solid rgba(200,90,42,0.25);
  border-radius: 6px;
  padding: 5px 10px;
  animation: fadeIn 0.2s ease;
}

/* Admin AMA inbox */
.admin-ama-card { min-height: 520px; }
.admin-ama-wrap {
  display: flex;
  gap: 12px;
  height: 440px;
  margin-top: 4px;
}
.admin-ama-users {
  width: 210px;
  flex-shrink: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-ama-empty-users {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 12px 4px;
}
.admin-ama-user-row {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s;
}
.admin-ama-user-row:hover { background: var(--surface-2); }
.admin-ama-user-row.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
.admin-ama-user-name {
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 600;
}
.admin-ama-user-preview {
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
  margin-top: 2px;
}
.admin-ama-thread {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  padding: 12px;
  min-height: 0;
  overflow: hidden;
}
.admin-ama-thread-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.admin-thread-header {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-mono);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.admin-thread-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  padding-bottom: 4px;
}
.admin-reply-row {
  display: flex;
  gap: 7px;
  margin-top: 8px;
}
.admin-ama-refresh {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 3px 7px;
  display: flex;
  align-items: center;
}
.admin-ama-refresh:hover { background: var(--surface-2); }

/* Admin nav pill accent */
.nav-pill-admin {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
}

/* ── Support donate buttons ────────────────────────── */
.support-donate-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 16px 16px;
}
.support-donate-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.support-donate-btn:hover {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}

/* ── Request / Report cards ─────────────────────────── */
.req-card { height: auto !important; min-height: 360px; cursor: default; }
.req-card:hover { transform: none !important; }
.req-sub {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 0 16px 12px;
  line-height: 1.6;
}
.req-from-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 10px;
}
.req-from-label {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.55;
}
.req-from-val {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.req-textarea {
  width: calc(100% - 32px);
  margin: 0 16px;
  min-height: 160px;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.18s;
}
.req-textarea:focus { border-color: var(--accent); }
.req-textarea::placeholder { color: var(--text-dim); opacity: 0.5; }
.req-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 0;
}
.req-send-btn {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: opacity 0.15s;
}
.req-send-btn:hover   { opacity: 0.85; }
.req-send-btn:disabled { opacity: 0.4; cursor: default; }
.req-status {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}
.req-type-pills {
  display: flex;
  gap: 5px;
}
.req-type-pill {
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.req-type-pill:hover { color: var(--text-muted); border-color: var(--border2); }
.req-type-pill.active { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); font-weight: 600; }

/* ── Request tab card ───────────────────────────────── */
.sec-request-card {
  height: 520px;
  overflow: hidden;
  padding: 0;
  cursor: default;
}
.sec-request-card:hover { transform: none; border-color: var(--border); box-shadow: none; }
.request-cols {
  display: flex;
  flex-direction: row;
  height: 100%;
}
.request-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
}
.request-col-divider {
  width: 1px;
  background: var(--surface-2);
  flex-shrink: 0;
}
.request-col .req-textarea {
  flex: 1;
  min-height: 180px;
  resize: none;
}

/* ── Main Quick Ask chat bubbles ────────────────────── */
.main-groq-bubble {
  font-size: 0.78rem;
  line-height: 1.55;
  padding: 8px 11px;
  border-radius: 12px;
  max-width: 80%;
  word-break: break-word;
}
.main-groq-user {
  align-self: flex-end;
  background: var(--surface-2);
  color: var(--text);
  border-bottom-right-radius: 3px;
}
.main-groq-ai {
  align-self: flex-start;
  background: rgba(74,122,170,0.15);
  color: var(--text);
  border-bottom-left-radius: 3px;
}
.main-groq-thinking { opacity: 0.5; font-style: italic; }

.main-groq-ai p { margin: 0 0 6px; }
.main-groq-ai p:last-child { margin-bottom: 0; }
.main-groq-ai ul, .main-groq-ai ol { margin: 4px 0 6px 16px; padding: 0; }
.main-groq-ai li { margin-bottom: 3px; }
.main-groq-ai strong { color: var(--text); font-weight: 600; }
.main-groq-ai code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.74rem; }
.main-groq-ai h1, .main-groq-ai h2, .main-groq-ai h3 { font-size: 0.85rem; font-weight: 600; margin: 6px 0 4px; color: var(--text); }

/* ── Goal flip card ─────────────────────────────────── */
.goal-flip-card {
  perspective: 1200px;
  overflow: hidden !important;
  padding: 0;
  /* No animation override here: inherit the unified .r-card fadeUp spawn so the
     To-do card pops in with the same animation + speed as every other rbar card
     (and replays when the Quick Ask panel closes). */
  flex: 1 1 auto;          /* grows with the others; flex gives it a definite box for the flip faces */
  min-height: 200px;
}
.goal-flip-card:hover { transform: none; }

.goal-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.goal-flip-inner.flipped { transform: rotateY(180deg); }

.goal-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 12px 14px 10px;
}
.goal-back { transform: rotateY(180deg); }

.goal-flip-btn {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.goal-flip-btn:hover { background: var(--surface-2); }

/* ── Groq quick-ask card ────────────────────────────── */
.r-groq-card {
  flex: 1;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r-groq-messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}
.r-groq-placeholder { color: var(--text-dim); opacity: 0.35; font-size: 0.72rem; padding: 2px 0; }
.r-groq-bubble {
  font-size: 0.74rem;
  line-height: 1.5;
  padding: 6px 9px;
  border-radius: 10px;
  max-width: 90%;
  word-break: break-word;
}
.r-groq-user {
  align-self: flex-end;
  background: var(--surface-2);
  color: var(--text);
  border-bottom-right-radius: 3px;
}
.r-groq-ai {
  align-self: flex-start;
  background: rgba(74,122,170,0.15);
  color: var(--text);
  border-bottom-left-radius: 3px;
}
.r-groq-thinking { opacity: 0.5; font-style: italic; }

.r-groq-input-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.r-groq-input-row input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.74rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.r-groq-input-row input:focus { border-color: var(--border2); }
.r-groq-input-row button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.r-groq-input-row button:hover { background: var(--surface-2); }

/* ── Finished / Cancelled Two-Column Card ──────────── */

.r-done-cols {
  display: flex;
  gap: 10px;
  height: 100%;
}

.r-done-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.r-done-label {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 600;
}

.r-done-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.r-done-item {
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 3px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.r-done-item.finished { color: var(--green); opacity: 0.75; }
.r-done-item.cancelled { text-decoration: line-through; opacity: 0.45; }

/* ── Main Skills Card ──────────────────────────────── */
.skills-main .skills-main-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
  overflow-y: auto;
  max-height: calc(100% - 60px);
}

.skills-main .skill-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.skills-main .skill-row:hover { border-color: var(--border2); }

.skills-main .skill-name {
  font-size: 0.82rem;
  color: var(--text);
  letter-spacing: 0.02em;
}

.skills-main .rank-badge {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ── Achievements Card ─────────────────────────────── */
.achievements-main .achievements-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
  overflow-y: auto;
  max-height: calc(100% - 60px);
}

.achievement-item {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.achievement-item:hover { border-color: var(--border2); }

.achievement-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}

.achievement-desc {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.playground {
  margin-top: var(--header-h);
  margin-left: 0;
  margin-right: var(--rbar-w);
  padding: 10px 20px 20px 20px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-rows: auto;
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: 0;
  align-content: start;
}

/* ── Card Base ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 16px 36px;
  position: relative;
  
  height: 700px;
  align-self: start;
  
  scroll-margin-top: calc(var(--header-h) + 40px); 
  overflow: visible !important; 
  cursor: pointer;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.2s;
}

.card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* full-width card spans both columns */
.card.full-row {
  grid-column: 1 / -1;
  grid-row: auto;
}

.card-label {
  font-family: var(--font-mono);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  position: absolute;
  top: 12px;
  left: 14px;
}

/* accent pip on hover */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity 0.25s;
}
.card:hover::before { opacity: 1; }

.notes::before       { background: var(--accent); }
.goal::before        { background: var(--green); }
.finished::before    { background: var(--green); }
.todo::before        { background: var(--accent2); }
.dream::before       { background: var(--blue); }
.consistency::before { background: var(--accent); }

/* card tints retired — uniform flat surfaces; the accent pip carries identity */

/* shared label style for r-bar cards */
.r-card .card-label {
  position: absolute;
  bottom: 10px; left: 12px;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.buddybot .card-label { color: #3d5a80; }
.streak .card-label   { color: var(--accent); opacity: 0.6; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.main-header { animation: fadeUp 0.4s ease both; }

.card:nth-child(1)  { animation: fadeUp 0.35s 0.05s ease both; }
.card:nth-child(2)  { animation: fadeUp 0.35s 0.10s ease both; }
.card:nth-child(3)  { animation: fadeUp 0.35s 0.15s ease both; }
.card:nth-child(4)  { animation: fadeUp 0.35s 0.20s ease both; }
.card:nth-child(5)  { animation: fadeUp 0.35s 0.25s ease both; }
.card:nth-child(6)  { animation: fadeUp 0.35s 0.30s ease both; }
.card:nth-child(7)  { animation: fadeUp 0.35s 0.35s ease both; }
.card:nth-child(8)  { animation: fadeUp 0.35s 0.40s ease both; }
.card:nth-child(9)  { animation: fadeUp 0.35s 0.45s ease both; }
.card:nth-child(10) { animation: fadeUp 0.35s 0.50s ease both; }
.card:nth-child(11) { animation: fadeUp 0.35s 0.55s ease both; }

/* Every rbar card spawns the same way + speed (calendar, BlinkBot, Quick Actions,
   To-do) — the old nth-child stagger skipped the later cards (the Ask button is the
   first child, so To-do/Quick Actions fell outside it and popped in instantly).
   This also replays when the Quick Ask panel closes and the cards come back. */
.r-card { animation: fadeUp 0.22s ease both; }

/* Quick Ask panel slides/fades in instead of appearing instantly. */
@keyframes qaSlideIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.r-bar.qa-open .r-quick-ask { animation: qaSlideIn 0.22s ease both; }

/* ── Scrollbar ── */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Selection ── */
::selection { background: var(--accent); color: var(--bg); }

.notes {
  display: flex;
  flex-direction: column;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 25px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 15px;
}

#noteTitle {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.4rem;
  width: 100%;
  outline: none;
}

#noteTitle::placeholder {
  color: var(--text-muted);
}

.save-status {
  font-family: var(--font-mono);
  font-size: 0.73rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: color 0.3s;
}

#noteBody {
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.1rem; /* Increased from 0.95rem */
    line-height: 1.7;
    resize: none;
    width: 100%;
    flex-grow: 1;
    outline: none;
    scrollbar-width: none; 
}

#noteBody::placeholder {
  color: var(--text-dim);
}

/* --- View Manager Logic --- */
.hidden {
    display: none !important;
}

/* Find and replace the .notes-view-list, .notes-view-editor block */
.notes-view-list{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; 
    overflow: hidden; /* <--- THIS IS THE MAGIC LINE: Clips the image bleed */
    border-radius: var(--radius);
    animation: fadeUp 0.3s ease forwards;
    position: relative;
}

.notes-view-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden; /* Keep the galaxy inside the card */
    position: relative;
}

.note-items-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 0; /* Keeps the scrollbar strictly inside this box */
    padding-bottom: 20px; /* Gives the last note some breathing room so it doesn't touch the floor */
}

/* --- Screen 1: List View --- */
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--border);
}

.list-header h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--text);
    font-weight: 500;
}

.icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.2s;
}

.icon-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
}

.note-items-container {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    flex-grow: 1;
}

.note-item {
    padding: 12px 14px;
    border-radius: 8px;
    background: #ffffff05; /* Very subtle highlight */
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.note-item:hover {
    background: #ffffff0a;
    border-color: var(--border);
}

.note-item h4 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 4px;
}

.note-item p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 50px; /* Room for date */
}

.note-time {
    position: absolute;
    right: 14px; top: 14px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
}

/* --- Screen 2: Editor View --- */
.editor-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
}

.back-btn {
    border: none;
    background: transparent;
}

/* Find the .infinite-canvas block and update the padding */
.infinite-canvas {
    flex-grow: 1;
    outline: none;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: var(--font-body);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text);
    padding-bottom: 90px; /* Room for the date/image/video buttons */
}

/* Placeholder logic for contenteditable */
.infinite-canvas:empty:before {
    content: attr(data-placeholder);
    color: var(--text-dim);
    pointer-events: none;
    display: block; 
}

/* --- Media Action Buttons (Bottom Right) --- */
.editor-media-actions {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    background: var(--bg-card);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.media-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.2s, background 0.2s;
}

.media-btn:hover {
    color: var(--accent);
    background: var(--accent-glow);
}
/* Find and replace the div.infinite-canvas img block */
div.infinite-canvas img,
div.infinite-canvas video {
    display: block !important;
    max-width: 33%;
    height: auto;
    margin: 15px 0 !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

/* --- NEW CARD HEADERS --- */

.card-top-bar {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    margin: -16px -16px 15px -16px; /* This pulls it flush to the card edges! */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;                       /* breathing room between the right-side action buttons */
}
.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dim);
    margin: 0;
}

.enc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  opacity: 0.55;
  cursor: default;
  user-select: none;
}
.enc-badge svg { opacity: 0.7; flex-shrink: 0; }

/* --- CUSTOM DELETE MODAL --- */
.custom-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(10, 10, 10, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.custom-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal-content {
    background: var(--surface);
    padding: 35px;
    border-radius: 16px;
    border: 1px solid var(--border);
    text-align: center;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.custom-modal.hidden .modal-content {
    transform: translateY(20px);
}

.modal-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Modal Button Specifics */
.btn-ghost {
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--text);
}
.btn-ghost:hover {
    background: var(--surface-2);
}

.btn-danger {
    background: var(--accent2);
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background: #e06833;
    transform: translateY(-1px);
}

/* --- ENHANCED GOAL CARD STYLES --- */

/* The Floating Input Pill */
.goal-input-pill {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 6px 6px 18px;
    align-items: center;
    transition: all 0.3s ease;
}

.goal-input-pill:focus-within {
    border-color: var(--green);
    background: rgba(120, 184, 120, 0.05);
    box-shadow: none;
}

.goal-input-pill input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
}

.goal-input-pill input::placeholder {
    color: var(--text-dim);
}

/* The Add Button */
.add-goal-btn {
    background: var(--green);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    width: 34px; 
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-goal-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: none;
    color: #000;
}

/* Minimalist List Items */
.goal-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 12px;
    background: transparent;
    border-bottom: 1px dashed var(--border);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideIn 0.3s ease-out forwards;
}

.goal-item:last-child {
    border-bottom: none;
}

.goal-item:hover {
    background: var(--surface-2);
    transform: translateX(6px); /* Smooth slide to the right on hover */
    border-radius: 8px;
}
.goal-text {
    font-family: var(--font-body);
    font-size: 1.1rem; /* Bumping up the size */
    font-weight: 500;
    color: var(--text);
    flex-grow: 1;
    padding-right: 15px;
    letter-spacing: 0.02em;
}

.finished-item {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-left: 4px solid var(--green) !important;
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 16px 14px;
    box-shadow: var(--shadow);
}

.finished-item .goal-text {
    color: var(--green);
    text-decoration: none; /* Kill the strikethrough! */
    font-family: var(--font-display); /* Fancy serif font */
    font-size: 1.15rem;
    font-style: italic;
    display: flex;
    align-items: center;
}

.finished-item .goal-text::before {
    content: '🎯'; /* Little trophy icon */
    margin-right: 12px;
    font-size: 1.2rem;
    font-style: normal;
}

/* Invisible Action Buttons that appear on hover */
.goal-actions {
    display: flex;
    gap: 8px;
    opacity: 0.3;
    transition: opacity 0.2s;
}

.goal-item:hover .goal-actions {
    opacity: 1;
}

.btn-goal-action {
    background: var(--surface-2);
    border: none;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    display: flex;
}

.btn-goal-action:hover { transform: scale(1.1); }
.action-achieve:hover { background: rgba(120, 184, 120, 0.15); color: var(--green); }
.action-remove:hover { background: rgba(200, 90, 42, 0.15); color: var(--accent2); }

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

/* Find and replace the .gap-bar block */
/* Standalone wisdom/quote bar — sits between card groups and adboxes */
.wisdom-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 24px;
  margin-top: 15px;
  margin-bottom: 15px;
  pointer-events: none;
}

.gap-bar {
    position: absolute;
    top: calc(100% + 15px);
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 100;
    pointer-events: none;
}

.gap-bar > * {
    pointer-events: auto; /* ...but allow clicks on the actual text/input! */
}
/* For cards that share a row, stretch the gap bar across both columns */
.gap-bar.span-row {
    width: calc(200% + var(--gap)); 
}

/* For cards that are already full width (like Consistency) */
.gap-bar.span-self {
    width: 100%;
}

.dream-bar {
  display: flex !important;
  justify-content: center;
  align-items: start;
  min-height: 80px; 
  padding: 0 20px;
  z-index: 100;
  pointer-events: none; /* Ensure the dream-bar container also ignores clicks */
}

.dream-bar > * {
    pointer-events: auto; /* Re-enable clicks for the input inside the dream-bar */
}
 
/* The text that gaps.js injects into dreamContainer */
.dream-text {
  font-family: var(--font-display) !important;
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.16em !important;
  color: var(--accent) !important;
  text-align: center;
  line-height: 1.4;
}
 
/* The dream input (before it's locked) */
.dream-input {
  background: rgba(74, 122, 170, 0.03); /* Extremely subtle blue tint */
  border: 1px dashed rgba(74, 122, 170, 0.3); /* Dashed "under construction" vibe */
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  font-style: italic; /* Dreamy serif look */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 12px 30px;
  border-radius: 12px;
  outline: none;
  width: auto;
  min-width: 350px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dream-input:focus {
  background: var(--surface-2);
  border: 1px solid var(--blue);
  box-shadow: 0 0 0 3px var(--accent-glow);
  letter-spacing: 0.2em; /* Expands slightly when you're typing your future */
}

.dream-input::placeholder {
  color: var(--text-dim);
  font-style: normal;
  letter-spacing: 0.1em;
  opacity: 0.5;
}
.quote-text {
    color: var(--text-muted); /* Slightly brighter than text-dim */
    font-family: var(--font-display);
    font-size: 25px;  /* pinned (px, not rem) so the global text bump skips the wisdom bar */
    font-style: italic;
    line-height: 1.5;
    letter-spacing: 0.03em;
}

/* --- AI CHAT WINDOW STYLES --- */
.chat-window {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 10px;
    margin-bottom: 15px;
    font-family: var(--font-body);
    font-size: 0.95rem;
}

/* Hide scrollbar for a cleaner look */
.chat-window::-webkit-scrollbar { width: 4px; }
.chat-window::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* Prevent markdown-rendered images from blowing up the chat card */
.chat-window img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin-top: 6px;
}

.chat-message {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1.5;
    animation: fadeUp 0.3s ease forwards;
}

.msg-user {
    align-self: flex-end;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-right-radius: 4px;
}

.msg-ai {
    align-self: flex-start;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

.chat-input-pill {
    display: flex;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 6px 6px 18px;
    align-items: center;
    transition: all 0.3s ease;
}

.chat-input-pill:focus-within {
    border-color: var(--accent);
    box-shadow: none;
}

.chat-input-pill input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
}

.send-ai-btn {
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s;
}
.send-ai-btn:hover { transform: scale(1.05); }

/* --- Add these to the bottom of your kstyle.css --- */

/* BuddyBot Main (The Strategic Hub) */
.buddybot-main {
    background: rgba(74, 122, 170, 0.12) !important;
    border-color: rgba(74,122,170,0.15) !important;
}

/* Double-class selector beats .card { overflow: visible !important } */
.card.buddybot-main {
    overflow: hidden !important;
}

.buddybot-main:hover {
    border-color: #4a7aaa !important;
    box-shadow: var(--shadow) !important;
}

#blinkChatState {
    min-height: 0;
    overflow: hidden;
}

/* height:0 forces flex to size from available space; max-height is the hard fallback */
.buddybot-main .chat-window {
    height: 0;
    max-height: 560px;
}

/* Stats wrapper — side-by-side on desktop, flip card on mobile */
.stats-wrap {
  grid-column: 1 / -1;
  display: flex;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
}
.stats-flip-inner {
  display: flex;
  flex: 1;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
}
.stats-flip-inner > .card { flex: 1; min-width: 0; }
.stats-flip-btn { display: none; }

/* Rank Guide card (desktop) */
.sec-rank-card {
  background: rgba(8,6,4,0.82) !important;
  border-color: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  height: auto;
  min-height: 460px;
  overflow-y: auto;
}
.rank-guide-scroll { padding: 4px 16px 20px; }

/* Skills/Achievements wrapper — side-by-side on desktop, flip card on mobile */
.skills-wrap {
  grid-column: 1 / -1;
  display: flex;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
}
.skills-flip-inner {
  display: flex;
  flex: 1;
  gap: clamp(16px, 2.5vw, 40px);
  align-items: start;
}
.skills-flip-inner > .card { flex: 1; min-width: 0; }
.skills-flip-btn { display: none; }

/* Habits — flip buttons: hidden by default; selectively shown via desk/mob classes */
.habit-flip-btn {
  display: none;
  align-items: center; gap: 5px;
  font-size: 0.68rem; font-family: var(--font-mono);
  padding: 5px 11px; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim); cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.2s, box-shadow 0.2s;
}
.habit-flip-btn:hover { background: var(--surface-2); }
.habit-desk-only { display: inline-flex; }
.habit-mob-only  { display: none !important; }

/* Add trigger: round + button in habit header (desktop) */
#habitAddTrigger {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 1.15rem; font-weight: 600;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
#habitAddTrigger:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Habit Pulse section — hidden on desktop, shown on mobile habits tab */
.habit-pulse-section { display: none; }

/* Notes card: clip overflowing images so they don't bleed into adjacent cards */
.card.notes {
    overflow: hidden !important;
    margin-top: 10px;
}

.card.skills-main {
    background: rgba(100, 190, 130, 0.10);
    border-color: rgba(100, 190, 130, 0.12);
    flex: 1;
    min-width: 0;
}

.sec-profile-card,
.req-card {
    background: rgba(6, 5, 4, 0.60);
    border-color: var(--border);
}

.card.buddybot-main {
    margin-top: 10px;
}

.buddybot-main .msg-ai {
    background: var(--surface-2) !important;
    border-color: var(--border) !important;
    border-left: 3px solid #4a7aaa !important;
}

/* Knowledge Sidebar (The Quick Reference) */
.ask-sidebar {
    display: flex;
    flex-direction: column;
    height: 400px !important; /* Sidebar needs fixed height to scroll chat */
}

.mini-chat {
    font-size: 0.85rem !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.mini-pill {
    padding: 4px 4px 4px 12px !important;
}

.mini-pill input {
    font-size: 0.8rem !important;
}

/* Ensures chat windows don't break the layout */
.chat-window {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
}

#blinkChatState {
    min-height: 0;
}

.calender {
    display: flex;
    flex-direction: column;
    padding: 12px !important;
    min-height: 270px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--accent);
}

.calendar-header button {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 3px;
}

.calendar-header button:hover { color: var(--accent); }

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.6rem;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1fr;
    gap: 3px;
    min-height: 150px;
}

.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.calendar-day.today {
    background: var(--accent-glow);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.calendar-day.has-event {
    font-weight: bold;
    color: #fff;
    text-decoration: underline var(--accent);
}

.calendar-day:hover { background: var(--border); color: var(--text); }
.calendar-day.today { border: 1px solid var(--accent); color: var(--accent); }
.calendar-day.has-event { background: var(--accent-glow); color: var(--accent); font-weight: bold; }
.calendar-day.empty { cursor: default; }

/* --- AI Chat Markdown Formatting --- */
.msg-ai p {
    margin-bottom: 8px;
    line-height: 1.4;
}

.msg-ai p:last-child {
    margin-bottom: 0;
}

.msg-ai ul, .msg-ai ol {
    margin-left: 18px;
    margin-bottom: 8px;
    padding-left: 0;
}

.msg-ai li {
    margin-bottom: 4px;
}

/* Make bold text pop with your theme color */
.msg-ai strong {
    color: var(--accent);
    font-weight: 600;
}

.stats-trigger {
    background: var(--accent-glow);
    border-color: var(--accent);
    color: var(--accent);
    cursor: pointer;
}

.stats-sheet {
    max-width: 600px !important;
    background: var(--surface) !important;
    border: 1px solid var(--accent) !important;
    box-shadow: var(--shadow-lg);
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 25px;
}

.stat-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 20px;
    border-radius: 12px;
    text-align: left;
}

.stat-card label, .stat-label-text {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-dim);
    display: block;
    margin-bottom: 8px;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text);
}

.stat-card.accent .stat-value { color: var(--accent); }

.stat-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
}



.clock-widget.stats-integrated {
    display: flex;
    flex-direction: row; /* Side-by-side */
    align-items: center;
    justify-content: space-between;
    padding: 0; /* Removing padding to let the button fill the height */
    overflow: hidden;
    width: auto;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    height: 54px; /* Fixed height for a sleek header look */
}
/* In the rbar it should fill the column width like the cards below it. */
.r-bar .clock-widget.stats-integrated { width: 100%; }

.cw-info {
    padding: 8px 14px;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The Button in the "Red Box" Area */
.stats-btn-inner {
    height: 100%;
    width: 90px;
    background: var(--accent-glow);
    border: none;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 4px;
}

.stats-btn-inner:hover {
    background: var(--accent);
}

.stats-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--accent);
    transition: color 0.2s;
}

.stats-icon {
    color: var(--accent);
    transition: color 0.2s;
}

.stats-btn-inner:hover .stats-label,
.stats-btn-inner:hover .stats-icon {
    color: var(--bg);
}

@keyframes blinkPulse {
    0%, 100% { opacity: 0.25; }
    50%       { opacity: 0.65; }
}

/* ── CHARACTER SHEET ─────────────────────────────── */

.stats-sheet {
    max-height: 88vh;
    overflow-y: auto;
}

.char-class-section {
    margin-bottom: 16px;
}

.char-class-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.char-class-name {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
    margin-bottom: 10px;
    min-height: 1.9rem;
}

.char-class-toggle {
    display: flex;
    gap: 8px;
}

.class-mode-btn {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.15s ease;
}

.class-mode-btn.active,
.class-mode-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
}

.char-bio {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 1.2em;
    font-style: italic;
}

.char-skills {
    margin-bottom: 22px;
}

.char-skills-header {
    font-family: var(--font-mono);
    font-size: 0.70rem;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    margin-bottom: 10px;
}

.skills-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.skill-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.skill-name {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--text);
}

.rank-badge {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    min-width: 28px;
    text-align: center;
    padding-top: 1px;
    flex-shrink: 0;
}

.skill-loading {
    font-family: var(--font-mono);
    font-size: 0.70rem;
    color: var(--text-dim);
    padding: 10px 0;
    font-style: italic;
}

.refresh-stats-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 1.4rem;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}

.refresh-stats-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow);
}
/* ── Header Rank Badge ────────────────────────────────── */
.header-rank-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.85;
  display: none;
}
.header-rank-badge.visible { display: inline-block; }

/* ── Profile Popup ────────────────────────────────────── */
.profile-popup {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 300;
  min-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 0;
  box-shadow: var(--shadow-lg);
}

.pp-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}
.pp-item:hover { background: var(--surface-2); color: var(--text); }

.pp-danger { color: var(--accent2); }
.pp-danger:hover { color: #e06030 !important; background: rgba(200,90,42,0.08) !important; }

.pp-divider {
  height: 1px;
  background: var(--surface-2);
  margin: 4px 0;
}

.pp-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 4px 16px 2px;
}

.pp-theme-box {
  margin: 4px 16px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 12px;
}
.pp-theme-row-label {
  font-family: var(--font-mono);
  font-size: 0.60rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.pp-label-section {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--text);
  padding: 10px 16px 4px;
}

.pp-lang-row {
  display: flex;
  gap: 5px;
  padding: 4px 16px 8px;
}

.pp-lang-btn {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.70rem;
  letter-spacing: 0.06em;
  padding: 4px 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.pp-lang-btn:hover { color: var(--text-muted); border-color: var(--border2); }
.pp-lang-btn.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Community (Comms) card ───────────────────────────── */
.card.comms {
  display: flex;
  flex-direction: row;
  padding: 0;
  overflow: hidden;
}
#sec-comms {
}

/* ── DM card (standalone tab, beside Notes) ──────────── */
.card.dms {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}
.comm-dm-lbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
  white-space: nowrap;
}
.comm-dm-lbar-title {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
}
.comm-dm-lbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.comm-dm-lbar-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.comm-dm-lbar-body .dm-conv-list { flex: 1; overflow-y: auto; }
.comm-dm-lbar-body .dm-chat-view { flex: 1; overflow: hidden; display: flex; flex-direction: column; width: 100%; max-width: 100%; }
.comm-dm-lbar-body .dm-messages  { flex: 1; overflow-y: auto; }

/* ── Community main area ─────────────────────────────── */
.comm-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.comm-main .comm-feed {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.comm-composer {
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.comm-input {
    min-height: 56px;
    max-height: 120px;
    overflow-y: auto;
    background: var(--surface-2);
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 9px 12px;
    color: var(--text);
    font-size: 0.82rem;
    font-family: var(--font-body);
    line-height: 1.55;
    outline: none;
    transition: border-color 0.15s;
}
.comm-input:focus { border-color: var(--accent); }
.comm-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-dim);
    pointer-events: none;
}
.comm-composer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 7px;
}
.comm-char-count {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--text-dim);
    opacity: 0.55;
}
.comm-feed {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}
.comm-empty {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--text-dim);
    opacity: 0.45;
    margin-top: 40px;
}
.comm-post {
    padding: 14px 16px;
    margin: 6px 8px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    transition: background 0.12s, border-color 0.12s;
}
.comm-post:hover {
    background: var(--surface-2);
    border-color: var(--border2);
}
.comm-post-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.comm-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
    font-family: var(--font-mono);
}
.comm-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    flex-shrink: 1;
}
.comm-post-hdr-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.comm-username {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--text);
}
.comm-rank-badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.comm-distro-tag {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--text-dim);
    opacity: 0.45;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.comm-ago {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-dim);
    opacity: 0.45;
    flex-shrink: 0;
}
.comm-dist-badge {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--accent);
    opacity: 0.7;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.comm-loc-prompt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 9px;
    font-size: 0.78rem;
    color: var(--text-dim);
}
.comm-loc-prompt svg { flex-shrink: 0; opacity: 0.7; }
.comm-loc-prompt span { flex: 1; }
.comm-loc-allow-btn {
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    cursor: pointer;
    flex-shrink: 0;
    font-weight: 600;
    transition: background 0.15s;
}
.comm-loc-allow-btn:hover { background: #e8b97a; }
.comm-post-body {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}
/* ── Side-by-side text + media ─────────────────────────── */
.comm-post-content {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 6px;
}
.comm-post-content .comm-post-body {
    flex: 1;
    min-width: 0;
}
.comm-post-content .comm-media-img,
.comm-post-content .comm-media-video {
    max-width: 52%;
    width: auto;
    height: auto;
    max-height: none;
    margin-top: 0;
    object-fit: initial;
    flex-shrink: 1;
}
.comm-post-content .comm-media-audio {
    max-width: 52%;
    margin-top: 0;
    flex-shrink: 1;
}
.comm-del-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    opacity: 0.4;
    font-size: 1rem;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.comm-del-btn:hover { opacity: 0.9; }
.comm-range-label { flex-shrink: 0; }

/* ── Moderation: more-button, report/block sheet, toast ── */
.comm-more-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    opacity: 0.5;
    font-size: 1.1rem;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
    letter-spacing: 1px;
    transition: opacity 0.15s, color 0.15s;
}
.comm-more-btn:hover { opacity: 1; color: var(--text-muted); }

.comm-mod-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}
.comm-mod-sheet {
    width: 100%;
    max-width: 320px;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.comm-mod-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    padding: 10px 12px 4px;
}
.comm-mod-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0 12px 8px;
    line-height: 1.4;
}
.comm-mod-item {
    text-align: left;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.86rem;
    padding: 11px 12px;
    cursor: pointer;
    transition: background 0.12s;
}
.comm-mod-item:hover { background: var(--surface-2); }
.comm-mod-danger { color: #e06666; font-weight: 600; }
.comm-mod-cancel { color: var(--text-dim); text-align: center; }

.comm-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%) translateY(16px);
    z-index: 1100;
    background: var(--surface-2);
    border: 1px solid var(--border2);
    color: var(--text);
    font-size: 0.84rem;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    max-width: 90vw;
}
.comm-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Post reactions footer ────────────────────────────── */
/* ── Post type switcher (own posts only) ─────────────────── */
.comm-type-switcher {
    display: flex;
    gap: 0;
    margin: 8px 0 0;
    width: fit-content;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--border);
}
/* Compact inline version lives in the post header */
.comm-type-sw-inline {
    display: inline-flex;
    gap: 0;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--border2);
    flex-shrink: 0;
}
.comm-type-sw-inline .comm-type-sw-btn {
    padding: 1px 7px;
    font-size: 0.60rem;
}
.comm-type-sw-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.68rem;
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 3px 10px;
    transition: background 0.13s, color 0.13s;
}
.comm-type-sw-btn + .comm-type-sw-btn { border-left: 1px solid var(--border); }
.comm-type-sw-btn:hover { background: var(--surface-2); color: var(--text); }
.comm-type-sw-btn.active { background: var(--accent-soft); color: var(--accent); }

/* ── Post header inline reactions + action buttons ─────── */
.comm-post-reactions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}
.comm-action-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Action buttons — Buy / Collab / Learn / Hire */
.comm-action-btn {
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity 0.14s, transform 0.1s, background 0.12s;
    border-width: 2px;
    border-style: solid;
    text-transform: uppercase;
}
.comm-action-btn:hover  { opacity: 0.88; transform: translateY(-1px); }
.comm-action-btn[data-mine="1"] { cursor: default; opacity: 0.4; }
.comm-action-btn[data-mine="1"]:hover { opacity: 0.4; transform: none; }

.comm-action-hire   { background: rgba(255,160,72,0.22);  border-color: #ffa048; color: #ffb86c; }
.comm-action-collab { background: rgba(255,100,180,0.22); border-color: #ff64b4; color: #ff82c4; }
.comm-action-buy    { background: rgba(77,158,255,0.22);  border-color: #4d9eff; color: #72b3ff; }
.comm-action-learn  { background: rgba(72,220,220,0.22);  border-color: #48dcdc; color: #6ee8e8; }

/* Reaction buttons — inline in post header */
.comm-react-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.74rem;
    padding: 4px 7px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
    font-family: var(--font-mono);
    font-weight: 500;
    line-height: 1;
}
.comm-react-btn svg { flex-shrink: 0; }
.comm-react-btn:hover { background: var(--surface-2); color: var(--text); }
.comm-react-btn.active { color: var(--accent); }
.comm-react-btn .react-count { font-size: 0.74rem; font-weight: 600; }
.comm-share-btn { margin-left: 2px; }

/* ── Community search ─────────────────────────────────────── */
.comm-search-panel {
    padding: 8px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.comm-search-input {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: 8px;
    color: var(--text);
    padding: 7px 12px;
    font-size: 0.85rem;
    outline: none;
    box-sizing: border-box;
}
.comm-search-input:focus { border-color: var(--accent); }
.comm-search-results { display: flex; flex-direction: column; gap: 2px; }
.comm-search-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s;
}
.comm-search-user-row:hover { background: var(--surface); }
.comm-search-av { width: 30px; height: 30px; font-size: 0.85rem; flex-shrink: 0; }
.comm-search-uname { font-size: 0.85rem; font-weight: 600; }
.comm-search-empty { font-size: 0.78rem; color: var(--text-dim); padding: 6px 10px; }
.comm-user-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 4px;
    font-size: 0.8rem;
    color: var(--accent);
    font-family: var(--font-mono);
}

/* ── Skill tag picker (compose) + badge (post card) ──────── */
.comm-skill-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
    margin-bottom: 4px;
}
.comm-skill-tag-chip {
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--border2);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.comm-skill-tag-chip:hover  { border-color: var(--accent); color: var(--text); }
.comm-skill-tag-chip.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
.comm-skill-empty-link {
    background: none; border: none; padding: 0;
    font-size: 0.72rem; font-family: var(--font-body);
    color: var(--accent); cursor: pointer; text-align: left;
    opacity: 0.85; transition: opacity .12s;
}
.comm-skill-empty-link:hover { opacity: 1; text-decoration: underline; }
.comm-skill-tag-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 20px;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 0.62rem;
    font-family: var(--font-mono);
    opacity: 0.85;
    vertical-align: middle;
}

/* ── Share popup ──────────────────────────────────────────── */
.comm-share-popup {
    position: absolute;
    z-index: 9999;
    background: var(--bg-card);
    border: 1px solid var(--border2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 12px 14px;
    min-width: 210px;
    animation: csp-in .15s ease;
}
@keyframes csp-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.csp-copied {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding-bottom: 10px;
}
.csp-copied.done .csp-copied-icon { color: #48dc70; }
.csp-copied.done .csp-copied-text { color: var(--text); }
.csp-copied-icon { font-size: 1rem; transition: color .2s; }
.csp-divider { height: 1px; background: var(--border); margin-bottom: 10px; }
.csp-platforms { display: flex; gap: 8px; }
.csp-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
    flex: 1;
}
.csp-btn:hover { background: var(--accent-glow); border-color: var(--accent); color: var(--text); }
.csp-btn svg { width: 20px; height: 20px; }
.csp-wa  { color: #25d366; }
.csp-tg  { color: #229ed9; }
.csp-x   { color: var(--text-muted); }
.csp-copy { color: var(--text-muted); }

.comm-post-highlighted { animation: comm-highlight-pulse 3s ease-out forwards; }
@keyframes comm-highlight-pulse {
    0%   { box-shadow: 0 0 0 3px var(--accent); }
    70%  { box-shadow: 0 0 0 3px var(--accent); }
    100% { box-shadow: none; }
}
.comm-linked-banner {
    font-size: 0.72rem;
    color: var(--accent);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.8;
}

/* ── Inline comments section ──────────────────────────── */
.comm-post-comments {
    margin-top: 10px;
    padding: 10px 4px 4px 4px;
    border-top: 1px solid var(--border);
}
.comm-comments-list { margin-bottom: 8px; }
.comm-comment-row {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 4px 0;
    font-size: 0.78rem;
}
.comm-comment-content {
    display: flex;
    gap: 6px;
    align-items: baseline;
    flex: 1;
    min-width: 0;
}
.comm-comment-av {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    text-transform: uppercase;
    user-select: none;
}
.comm-comment-av:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.comm-comment-user {
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
    font-size: 0.70rem;
    cursor: pointer;
    font-family: var(--font-mono);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 4px;
    padding: 1px 5px;
    letter-spacing: 0.02em;
    transition: background 0.15s;
}
.comm-comment-user:hover {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    text-decoration: none;
}
.comm-comment-text {
    color: var(--text);
    flex: 1;
    word-break: break-word;
}
.comm-comment-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}
.comm-comment-ago {
    color: var(--text-dim);
    font-size: 0.66rem;
    flex-shrink: 0;
    font-family: var(--font-mono);
    margin-right: 4px;
}
.comm-comment-react {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 0.66rem;
    padding: 2px 5px;
    border-radius: 4px;
    font-family: var(--font-mono);
    transition: background 0.12s, color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}
.comm-comment-react svg { flex-shrink: 0; }
.comm-comment-react:hover { background: var(--surface-2); color: var(--text); }
.comm-comment-react.active { color: var(--accent); }
.comm-comment-react .cmt-cnt { font-size: 0.62rem; }

/* ── Double-click heart animation ────────────────────────── */
.heart-pop {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    z-index: 9999;
    animation: heartPop 0.8s ease-out forwards;
}
@keyframes heartPop {
    0%  { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    55% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
    100%{ transform: translate(-50%, -120%) scale(1.2); opacity: 0; }
}
.comm-no-comments, .comm-comments-loading {
    font-size: 0.74rem;
    color: var(--text-dim);
    padding: 4px 0;
}

/* ── Comments preview (top 3, always visible) ────────────── */
.comm-comments-preview {
    margin-top: 8px;
    padding: 6px 4px 2px 4px;
    border-top: 1px solid var(--border);
}
.comm-comment-preview-row {
    display: flex;
    gap: 6px;
    align-items: baseline;
    padding: 2px 0;
    font-size: 0.77rem;
}
.comm-comment-preview-row .comm-comment-user { font-weight: 700; color: var(--accent); font-size: 0.72rem; flex-shrink: 0; }
.comm-comment-preview-row .comm-comment-text { color: var(--text); flex: 1; word-break: break-word; }

/* ── Pin button & badge ───────────────────────────────────── */
.comm-pin-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    opacity: 0.3;
    padding: 0 2px;
    transition: opacity 0.12s;
    flex-shrink: 0;
}
.comm-pin-btn:hover, .comm-pin-btn.pinned { opacity: 1; }
.comm-pin-badge {
    font-size: 0.6rem;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: 4px;
    padding: 1px 5px;
    margin-right: 4px;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* ── Profile popup action buttons ────────────────────────── */
.pub-profile-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.pub-action-btn {
    flex: 1;
    padding: 7px 0;
    border-radius: 8px;
    font-size: 0.76rem;
    font-family: var(--font-mono);
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: opacity 0.14s, transform 0.1s;
    border-width: 1.5px;
    border-style: solid;
}
.pub-action-btn:hover { opacity: 0.82; transform: translateY(-1px); }
.pub-action-hire   { background: rgba(255,160,72,0.15);  border-color: #ffa048; color: #ffa048; }
.pub-action-collab { background: rgba(255,100,180,0.15); border-color: #ff64b4; color: #ff64b4; }
.pub-action-friend { background: rgba(77,158,255,0.15);  border-color: #4d9eff; color: #4d9eff; }

/* ── Online presence dot ──────────────────────────────────── */
.online-dot {
    position: absolute;
    width: 9px; height: 9px;
    border-radius: 50%;
    bottom: 0; right: 0;
    border: 2px solid var(--bg);
    background: #666;
    pointer-events: none;
}
.online-dot.is-online { background: #48dc70; }
.comm-avatar-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* ── Mini profile popup card ──────────────────────────────── */
.comm-mini-profile {
    position: fixed;
    width: 272px;
    max-height: 62vh;
    overflow-y: auto;
    background: var(--surface);
    animation: cmpFadeIn 0.15s ease;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    z-index: 9100;
    padding: 14px;
}
.comm-mini-profile.hidden { display: none; }
@keyframes cmpFadeIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
.cmp-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}
.cmp-av-wrap {
    position: relative;
    flex-shrink: 0;
}
.cmp-av {
    width: 46px !important;
    height: 46px !important;
    font-size: 1.2rem !important;
}
.cmp-av-wrap .online-dot { bottom: 0; right: 0; }
.cmp-info { flex: 1; min-width: 0; }
.cmp-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 2px;
}
.cmp-rank {
    font-family: var(--font-mono);
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
.cmp-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.60rem;
    color: var(--text-dim);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pps-online-label.is-online { color: #48dc70; }
.cmp-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.cmp-actions .pub-action-btn { padding: 4px 12px; font-size: 0.72rem; }
.cmp-skills-label {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    margin-bottom: 4px;
}
.cmp-skills-list { display: flex; flex-direction: column; }
.pps-skill-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.80rem;
    color: var(--text);
}
.pps-skill-rank {
    font-family: var(--font-mono);
    font-size: 0.70rem;
    font-weight: 700;
}
.pps-empty {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-dim);
    text-align: center;
    padding: 16px 0 4px;
    opacity: 0.5;
}

/* DM chat header status line */
.dm-chat-header-body { display: flex; flex-direction: column; gap: 1px; }
.dm-chat-status {
    font-family: var(--font-mono);
    font-size: 0.60rem;
    color: var(--text-dim);
    letter-spacing: 0.04em;
}
.dm-chat-status.is-online { color: #48dc70; }
.comm-comment-input-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.comm-comment-input {
    flex: 1;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 10px;
    color: var(--text);
    font-size: 0.78rem;
    font-family: var(--font-ui);
}
.comm-comment-input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.comm-comment-send {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 8px;
    padding: 5px 10px;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.82rem;
    transition: background 0.12s;
}
.comm-comment-send:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }

/* ── Confirm button hover (keep dark text on gold bg) ─── */
button.nav-pill:not(.btn-ghost):hover {
  color: var(--text-on-accent) !important;
  background: color-mix(in srgb, var(--accent) 80%, transparent) !important;
  border-color: var(--accent) !important;
}

/* ── DMs card ─────────────────────────────────────────── */
.dm-conv-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.dm-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  margin-top: 40px;
  line-height: 1.7;
  opacity: 0.55;
}
.dm-conv-item {
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dm-conv-item:hover { background: var(--surface-2); }
.dm-conv-item.dm-unread { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.dm-conv-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.dm-conv-avatar-wrap .online-dot { width: 9px; height: 9px; bottom: 0; right: 0; }
.dm-conv-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.80rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.dm-conv-body {
  flex: 1;
  min-width: 0;
}
.dm-conv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.dm-conv-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dm-conv-time {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-dim);
  opacity: 0.5;
  flex-shrink: 0;
}
.dm-conv-preview {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.dm-unread-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Chat view */
.dm-chat-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.dm-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dm-chat-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
}
.dm-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dm-msg { display: flex; flex-direction: column; }
.dm-msg-mine  { align-items: flex-end; }
.dm-msg-theirs { align-items: flex-start; }
.dm-bubble {
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 0.82rem;
  line-height: 1.55;
  word-break: break-word;
}
.dm-msg-mine .dm-bubble {
  background: var(--accent);
  color: var(--text-on-accent);
  border-bottom-right-radius: 4px;
}
.dm-msg-theirs .dm-bubble {
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.dm-post-quote {
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 5px 8px 5px 9px;
  font-size: 0.78rem;
  opacity: 0.8;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dm-post-quote-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.04em;
  display: block;
}
/* Notification bubble (comment reply auto-DMs) */
.dm-notif-bubble {
  border-left: 3px solid #7c9ef5;
  background: rgba(124,158,245,0.10);
}
.dm-notif-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: #7c9ef5;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 4px;
}
.dm-notif-ctx {
  font-size: 0.75rem;
  opacity: 0.65;
  margin-bottom: 4px;
  font-style: italic;
}
/* Per-conversation unread badge in conv list */
.dm-conv-badge {
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 10px;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
  margin-left: auto;
}
.dm-time {
  font-size: 0.62rem;
  color: var(--text-dim);
  opacity: 0.55;
  margin-top: 2px;
  font-family: var(--font-mono);
}
.dm-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.dm-input-row input {
  flex: 1;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 0.82rem;
  font-family: var(--font-body);
  outline: none;
}
.dm-input-row input:focus { border-color: var(--accent); }
#dmSendBtn {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
#dmSendBtn:hover { opacity: 0.85; }

/* Inline DM search */
.dm-inline-search {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 5px 10px;
  color: var(--text);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  outline: none;
}
.dm-inline-search::placeholder { color: var(--text-dim); }
.dm-inline-results {
  border-bottom: 1px solid var(--border);
  max-height: 160px;
  overflow-y: auto;
  margin: 0 -1px;
}

/* User search results */
.dm-search-result {
  padding: 9px 12px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text);
  transition: background 0.12s;
}
.dm-search-result:hover { background: var(--surface-2); }
.dm-search-empty {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 8px 12px;
  font-family: var(--font-mono);
}

/* ── Unverified rank badge ────────────────────────────── */
.rank-unverified {
  color: var(--text-dim) !important;
  border: 1px dashed var(--border2) !important;
  border-radius: 4px;
  padding: 0 4px;
  font-size: 0.70rem;
  cursor: default;
}

/* ── App Language Select ──────────────────────────────── */
.pp-lang-select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  padding: 6px 10px;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  transition: border-color 0.15s;
}
.pp-lang-select:hover  { border-color: var(--border2); }
.pp-lang-select:focus  { border-color: var(--accent); }
.pp-lang-select option { background: #1a1712; color: var(--text); }

/* ── Verify button + badge ────────────────────────────── */
.ach-verify-btn {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.ach-verify-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ach-verified-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.ach-verified-badge.link {
  background: rgba(120, 184, 120, 0.12);
  border: 1px solid rgba(120, 184, 120, 0.3);
  color: var(--green);
}
.ach-verified-badge.pending {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
}

/* ── Verify modal tabs ────────────────────────────────── */
.verify-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 2px;
}
.verify-tab {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.70rem;
  letter-spacing: 0.06em;
  padding: 5px 0;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.verify-tab:hover  { color: var(--text-muted); border-color: var(--border2); }
.verify-tab.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}
.verify-upload-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 18px 12px;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.80rem;
  color: var(--text-muted);
  transition: border-color 0.15s;
  font-family: var(--font-mono);
}
.verify-upload-label:hover { border-color: var(--accent); color: var(--accent); }

/* ── Text visibility bump ─────────────────────────────── */
/* r-bar section labels, dim text — bump to readable contrast */
.r-goals-section-label,
.char-skills-header,
.r-done-label,
.r-bar-card-title,
.cw-date, .cw-day,
.char-class-label {
  opacity: 1 !important;
  color: rgba(240,235,224,0.50) !important;
}

.r-goal-item,
.r-done-item.finished { color: rgba(240,235,224,0.82) !important; }

/* card title rows visible */
.r-card .r-card-title,
.card-title,
.section-title {
  color: var(--text) !important;
  font-weight: 600;
}

/* ── Stats modal — personality section ───────────────── */
#statPersonality {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
}

/* ── Stats modal — blackhole accent ──────────────────── */
.stats-sheet {
  position: relative;
  overflow: hidden;
}

.stats-sheet::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: none;
  pointer-events: none;
  z-index: 0;
}

.stats-sheet > * { position: relative; z-index: 1; }

/* ── User Avatar (replaces B. logo) ──────────────────── */
.avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.user-avatar:hover {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}

.avatar-initial {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 900;
  color: var(--text-on-accent);
  line-height: 1;
  user-select: none;
}

/* ── r-bar card inline header ─────────────────────────── */
.r-card-header {
  font-family: var(--font-mono);
  font-size: 0.70rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Profile popup rank legend ────────────────────────── */
.pp-rank-legend {
  padding: 8px 16px 4px;
}

.pp-rank-row {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 4px 0;
  line-height: 1.5;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pp-rank-row > span:first-child {
  min-width: 54px;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ── Inline coming soon tag (card headers, section labels) ── */
.cs-inline-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 1px 5px;
  opacity: 0.7;
  vertical-align: middle;
  margin-left: 6px;
  font-weight: 600;
}

/* ── Achievement card soon notice (in title bar) ── */
.ach-soon-notice {
  font-size: 0.69rem;
  color: var(--accent);
  opacity: 0.80;
  margin: 3px 0 0;
  line-height: 1.4;
  font-family: var(--font-mono);
}

/* ── Stat card coming soon banner ── */
.stats-cs-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  font-size: 0.72rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

/* ── Achievement soon tag (replaces verify button) ── */
.ach-soon-tag {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 2px 6px;
  opacity: 0.55;
  cursor: default;
}

/* ── Premium coming soon ── */
.premium-soon-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 16px 16px;   /* side padding so items don't hug the card walls */
}
.premium-soon-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.premium-soon-info { flex: 1; min-width: 0; }
.premium-soon-name {
  font-size: 0.80rem;
  color: var(--text-muted);
  font-weight: 500;
}
.premium-soon-desc {
  font-size: 0.67rem;
  color: var(--text-dim);
  margin-top: 1px;
  opacity: 0.75;
}
.premium-soon-tag {
  font-size: 0.54rem;
  font-family: var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Skill class tag (e.g. "· 5km" next to skill name) ── */
.skill-class-tag {
  font-size: 0.72rem;
  opacity: 0.5;
  font-family: var(--font-mono, monospace);
  margin-left: 4px;
}

/* ── Skill note sub-text ──────────────────────────────── */
.skill-context {
  font-size: 0.71rem;
  color: var(--text-dim);
  margin-top: 3px;
  opacity: 0.60;
  line-height: 1.4;
}

.skill-note {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 2px;
  opacity: 0.75;
}

.skill-name-wrap {
  display: flex;
  flex-direction: column;
}

/* ── Status Dot ───────────────────────────────────────── */
.status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  cursor: pointer;
  transition: transform 0.15s;
  z-index: 2;
}
.status-dot:hover { transform: scale(1.25); }

.status-dot[data-status="online"]  { background: #4caf6e; }
.status-dot[data-status="afk"]     { background: #e8a020; }
.status-dot[data-status="offline"] { background: #666; box-shadow: none; }

/* ── First-launch language welcome ────────────────────── */
.lang-welcome {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-welcome.hidden { display: none; }

.lang-welcome-box {
  background: rgba(18,15,12,0.96);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 36px 40px;
  text-align: center;
  max-width: 360px;
  box-shadow: var(--shadow-lg);
}

.lang-welcome-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 10px;
}

.lang-welcome-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 26px;
  line-height: 1.5;
}

.lang-welcome-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.lang-welcome-btn {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s;
}
.lang-welcome-btn:hover {
  background: var(--surface-2);
  border-color: var(--border2);
}
.lang-welcome-local {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}
.lang-welcome-local:hover { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; }

/* ── What's Coming first-visit modal ────────────────────── */
.wn-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0,0,0,0.80);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wn-overlay.hidden { display: none; }

.wn-box {
  background: rgba(14,11,9,0.97);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 18px;
  padding: 32px 36px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 90vh;
  overflow-y: auto;
}

.wn-header { text-align: center; }

.wn-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.wn-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.wn-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wn-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

.wn-item-name {
  font-family: var(--font-mono);
  font-size: 0.80rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.wn-item-desc {
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.4;
}

.wn-dismiss {
  background: var(--accent);
  color: var(--text-on-accent);
  border: none;
  border-radius: 10px;
  padding: 11px 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: opacity 0.15s;
  width: 100%;
}
.wn-dismiss:hover { opacity: 0.88; }

@media (max-width: 480px) {
  .wn-box { padding: 24px 20px; }
  .wn-title { font-size: 1.2rem; }
}

/* ── Dream — standalone compact first card ────────────── */

.dream-standalone {
  grid-row: 1;
  grid-column: 1 / -1;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, transparent) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: default;
}

.dream-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

/* override gap-bar float — dream is now in-flow */
.dream-standalone .gap-bar,
.dream-inner .gap-bar {
  position: static;
  width: 100%;
}

/* Dream text in the header */
.header-dream {
  /* Deadline / Dream bar — sits next to the greeting, sized to its content. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 32vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 16px;
  overflow: hidden;
}

/* Clock/stats widget back in the header — aligned to sit exactly above the rbar
   cards. The rbar insets its cards by var(--gap)=12px on the left and 8px on the
   right, while the header pads 20px; so the widget matches the card *inner* box
   (width = rbar-w - 12 - 8) and is nudged right by (20 - 8)=12px so both edges
   line up with the Event Calendar below it. */
.clock-widget.header-clock {
  width: calc(var(--rbar-w) - var(--gap) - 8px);
  flex: 0 0 calc(var(--rbar-w) - var(--gap) - 8px);
  margin-right: -12px;
}
/* Keep the STATS button at full size (never let it shrink/crush), and pin the
   clock text in px so the 19px root bump doesn't inflate it past the width. */
.clock-widget.header-clock .stats-btn-inner { flex-shrink: 0; width: 82px; }
.clock-widget.header-clock .cw-info { min-width: 0; overflow: hidden; padding: 6px 12px; }
.clock-widget.header-clock .cw-row  { gap: 7px; }
.clock-widget.header-clock .cw-time { font-size: 16px; min-width: 0; }
.clock-widget.header-clock .cw-weather { font-size: 12px; }
.clock-widget.header-clock .cw-date,
.clock-widget.header-clock .cw-day  { font-size: 11px; }
.clock-widget.header-clock .cw-sep  { font-size: 12px; }

/* ── Header deadline / wisdom bar ─────────────────────── */
.hdr-deadline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text);
}
.hdr-dl-ico { color: var(--accent); flex-shrink: 0; }
.hdr-dl-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.hdr-dl-when {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--accent-glow);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hdr-dl-empty,
.hdr-wisdom {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.header-dream .dream-text {
  font-size: 0.90rem !important;
  letter-spacing: 0.12em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 35%, transparent)) !important;
}
.header-dream .dream-input {
  font-size: 0.78rem;
  min-width: 0;
  width: 100%;
  padding: 6px 14px;
  letter-spacing: 0.10em;
}

/* Wisdom bar in top slot — replaces dream card */
.wisdom-bar-top {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-top: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  padding-bottom: 12px;
}

/* ── Avatar image overlay ─────────────────────────────── */
.user-avatar.has-photo {
  background-image: var(--avatar-url);
  background-size: cover;
  background-position: center;
}

.user-avatar.has-photo .avatar-initial {
  display: none;
}

/* ── Stats tab — single card, no double box ──────────── */
.sec-stats-card {
  background: rgba(8, 6, 4, 0.82) !important;
  border-color: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  box-shadow: var(--shadow);
  height: auto;
  min-height: 460px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.sec-stats-card::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: none;
  pointer-events: none;
  z-index: 0;
}

/* plain centering wrapper — no border, no background */
.stats-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 24px 36px;
}

.stats-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
}

.stats-sheet-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-sheet-username {
  font-size: 1.15rem;
  line-height: 1;
}

.stats-field {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.stats-field-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  padding-top: 3px;
}

.stats-field-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.25;
}

.stats-field-desc {
  font-size: 0.79rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-style: italic;
  margin-top: 3px;
  min-height: 1em;
}

.stats-field-bio .stats-field-desc {
  font-style: normal;
  color: var(--text-dim);
}

.stats-skills-section {
  margin-top: 18px;
}

.stats-skills-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.stats-skills-header {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 0;
}
.skill-add-trigger {
  font-size: 1.1rem;
  line-height: 1;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.skill-add-trigger:hover { border-color: var(--border2); color: var(--text); }

/* Skill adder search box */
.skill-adder { margin-bottom: 10px; }
.skill-adder.hidden { display: none; }
.skill-adder-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  padding: 7px 12px;
  outline: none;
}
.skill-adder-input:focus { border-color: var(--border2); }
.skill-adder-results {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.skill-adder-empty { font-size: 0.75rem; opacity: 0.4; padding: 6px 12px; }
.skill-adder-nomatch {
  font-size: 0.76rem;
  color: var(--text);
  padding: 10px 12px;
  line-height: 1.6;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.skill-adder-nomatch strong { color: var(--accent); font-weight: 600; }
.skill-add-row {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;            /* don't let rows get squished/clipped in the scroll list */
  padding: 0;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  overflow: hidden;
}
.skill-add-row:hover { border-color: var(--border); background: var(--border); }
.skill-add-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  cursor: pointer;
}
.skill-add-name {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;        /* full line so descenders aren't cut */
  opacity: 1;               /* was 0.75 — names were too faint to read */
}
.skill-add-arrow {
  font-size: 0.9rem;
  opacity: 0.3;
  transition: opacity 0.12s, transform 0.12s;
}
.skill-add-row.open .skill-add-arrow { opacity: 0.6; transform: rotate(90deg); }
.skill-add-class-picker {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0 10px 8px;
}
.skill-add-class-picker.hidden { display: none; }
.skill-add-select {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text);
  font-size: 0.74rem;
  padding: 5px 8px;
  outline: none;
  font-family: var(--font-mono);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.skill-add-select option { background: #1a1814; }
.skill-add-confirm {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
  cursor: pointer;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: background 0.12s;
}
.skill-add-confirm:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }

.skill-add-type-badge {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  opacity: 0.6;
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.skill-add-type-metric  { background: rgba(90,143,200,0.18); color: #5a8fc8; }
.skill-add-type-exp     { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.skill-add-type-unranked{ background: var(--surface-2); color: var(--text-dim); }
.skill-add-row-header   { display:flex; align-items:center; gap:8px; }
.skill-add-name         { flex:1; }
.skill-add-notice       { padding: 6px 8px 4px; }
.skill-add-notice.hidden{ display:none; }

.skill-add-noprog {
  font-size: 0.72rem;
  color: var(--text);
  opacity: 0.7;
  padding: 5px 8px;
  margin-bottom: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  line-height: 1.4;
}
.skill-add-noprog-link {
  color: var(--accent);
  text-decoration: none;
}
.skill-add-noprog-link:hover { text-decoration: underline; }

/* ── Detected Activity (suggestions) ────────────────── */
.skill-suggestions-header {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  opacity: 0.35;
  margin: 16px 0 6px;
  padding: 0 2px;
  text-transform: uppercase;
}
.skill-suggestion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 4px;
}
.skill-suggestion-name {
  font-size: 0.78rem;
  color: var(--text-dim);
  opacity: 0.7;
}
.skill-suggestion-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.skill-suggestion-track {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--accent);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.12s, border-color 0.12s;
}
.skill-suggestion-track:hover {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.skill-suggestion-dismiss {
  font-size: 0.85rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0.3;
  transition: opacity 0.12s;
}
.skill-suggestion-dismiss:hover { opacity: 0.65; }

@media (max-width: 640px) {
  .stats-content { padding: 20px 14px 28px; }
  .stats-field { grid-template-columns: 72px 1fr; }
}

/* ── Stats popup panel ───────────────────────────────── */
.stats-popup {
  position: fixed;
  top: calc(var(--header-h) + 10px);
  right: 10px;
  width: var(--rbar-w);
  max-height: calc(100vh - var(--header-h) - 28px);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  transform: scale(0.93) translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.24s cubic-bezier(0.34,1.36,0.64,1),
              opacity 0.18s ease;
}

.stats-popup.visible {
  transform: scale(1) translateY(0);
  opacity: 1;
  pointer-events: all;
}

.stats-popup::-webkit-scrollbar { width: 0; }

.stats-popup-inner {
  padding: 20px 18px 18px;
}

/* ── Action sheets (username / password) ─────────────── */
.action-sheet {
  text-align: center;
  padding: 32px 28px 26px !important;
}

.action-sheet-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--accent);
}

.action-sheet-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.action-sheet-sub {
  font-size: 0.80rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.action-field-wrap {
  margin-bottom: 10px;
  text-align: left;
}

.action-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.action-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.action-error {
  font-size: 0.75rem;
  color: var(--accent2);
  min-height: 18px;
  margin: 4px 0 10px;
  text-align: left;
}

.action-btn-ghost {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s;
}
.action-btn-ghost:hover { background: var(--surface-2); color: var(--text); }

.action-btn-accent {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.action-btn-accent:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* ── Danger / Delete sheet ───────────────────────────── */
.danger-sheet {
  text-align: center;
  padding: 36px 28px 28px !important;
  border: 1px solid rgba(200,90,42,0.25) !important;
  background: rgba(10,8,6,0.98) !important;
}

.danger-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(200,90,42,0.10);
  border: 1px solid rgba(200,90,42,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.danger-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 900;
  color: #d46040;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.danger-warning-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 22px;
  padding: 14px 16px;
  background: rgba(200,90,42,0.07);
  border: 1px solid rgba(200,90,42,0.15);
  border-radius: 10px;
}

.danger-warning-text strong { color: #d46040; }

.danger-confirm-label {
  font-size: 0.76rem;
  color: var(--text-dim);
  text-align: left;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.danger-input:focus {
  border-color: #c85a2a !important;
  box-shadow: 0 0 0 3px rgba(200,90,42,0.15) !important;
}

.action-btn-destroy {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid #c85a2a;
  background: rgba(200,90,42,0.12);
  color: #d46040;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.action-btn-destroy:hover {
  background: rgba(200,90,42,0.22);
  box-shadow: none;
}

/* ── Comm post media ──────────────────────────────────── */
.comm-media-img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border-radius: 8px;
  margin-top: 8px;
  object-fit: cover;
}
.comm-media-video {
  display: block;
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  margin-top: 8px;
}
.comm-media-audio {
  display: block;
  width: 100%;
  margin-top: 8px;
  accent-color: var(--accent);
}
.comm-username-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: var(--text);
  transition: color 0.12s;
}
.comm-username-link:hover { color: var(--accent); }

/* ── DM attach button ─────────────────────────────────── */
.dm-attach-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.0rem;
  padding: 0 4px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: opacity 0.12s;
  line-height: 1;
}
.dm-attach-btn:hover { opacity: 0.9; }

/* ── DM media preview (attached before send) ──────────── */
.dm-media-preview {
  padding: 6px 8px 4px;
  border-top: 1px solid var(--border);
}
.dm-media-preview-wrap {
  position: relative;
  display: inline-block;
}
.dm-media-preview-img {
  max-height: 100px;
  max-width: 160px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}
.dm-media-preview-video {
  max-height: 100px;
  max-width: 200px;
  border-radius: 6px;
  display: block;
}
.dm-media-preview-audio {
  width: 200px;
  display: block;
  margin-top: 4px;
  accent-color: var(--accent);
}
.dm-media-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(30,28,24,0.85);
  border: 1px solid var(--border2);
  color: var(--text-dim);
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
.dm-media-remove:hover { color: #e87a5a; border-color: #e87a5a; }

/* ── DM media in bubbles ──────────────────────────────── */
.dm-bubble-img {
  display: block;
  max-width: 200px;
  max-height: 180px;
  border-radius: 8px;
  margin-bottom: 4px;
  object-fit: cover;
}
.dm-bubble-video {
  display: block;
  max-width: 220px;
  max-height: 160px;
  border-radius: 8px;
  margin-bottom: 4px;
}
.dm-bubble-audio {
  display: block;
  width: 200px;
  margin-bottom: 4px;
  accent-color: var(--accent);
}

/* ── Text after media spacing ─────────────────────────── */
.comm-body-spaced { margin-top: 8px; }

/* ── Community compose modal — legacy fallback ────────── */
#commComposeModal .modal-content {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  max-width: 560px;
  width: 92vw;
  text-align: left;
  padding: 22px 24px 18px;
}
#commComposeModal .comm-input {
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  min-height: 90px;
}
#commComposeModal .comm-input:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 7%, transparent);
}

/* ── Upload progress bar ──────────────────────────────── */
.upload-progress {
  height: 2px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
}
.upload-progress-bar {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 0.15s;
  border-radius: 2px;
}

/* ── Voice message button ─────────────────────────────── */
.dm-voice-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.05rem;
  padding: 0 3px;
  flex-shrink: 0;
  opacity: 0.55;
  transition: all 0.15s;
  line-height: 1;
}
.dm-voice-btn:hover { opacity: 0.9; color: var(--text); }
.dm-voice-btn.recording {
  color: #e87a5a;
  opacity: 1;
  animation: voicePulse 1s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { opacity: 1; transform: scale(1.05); }
  50%       { opacity: 0.45; transform: scale(0.95); }
}
.dm-voice-timer {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #e87a5a;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  display: none;
}

/* ── Community compose modal v23 ────────────────────────── */
.comm-inline-compose {
  border-top: 1px solid var(--border);
  padding: 12px 16px 8px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.comm-compose-content {
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: var(--shadow-lg);
  border-radius: 16px;
  padding: 22px 24px 20px;
  max-width: 560px;
  width: 92vw;
  text-align: left;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.custom-modal.hidden .comm-compose-content { transform: translateY(20px); }

.comm-compose-content h3 {
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

/* Compose action row: attach + compact camera (photo/video) icons + char count.
   The old Write/Quick tab split and the big capture-grid were merged into this
   single row — the camera is now two small icon buttons beside the paperclip. */
.comm-compose-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
/* Make the attach + camera icons clearly tappable (they were too small/faint). */
.comm-compose-actions .dm-attach-btn {
  opacity: 0.75;
  padding: 7px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.comm-compose-actions .dm-attach-btn svg { width: 21px; height: 21px; }
.comm-compose-actions .dm-attach-btn:hover {
  opacity: 1;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ── Feed mode toggle (inline in title row) ─────────────── */
.comm-feed-mode-bar {
  display: flex;
  gap: 0;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border2);
  flex-shrink: 0;
}

/* ── Distro filter (My distro / All distros) — mirrors the feed-mode bar ── */
.comm-distro-bar {
  display: flex;
  gap: 0;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border2);
  flex-shrink: 0;
}
.comm-distro-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  padding: 4px 11px;
  font-weight: 600;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
}
.comm-distro-btn + .comm-distro-btn { border-left: 1px solid var(--border2); }
.comm-distro-btn:hover { background: var(--surface-2); color: var(--text); }
.comm-distro-btn.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* ── Marketplace guide modal ──────────────────────────────────────────────── */
.mkt-guide-overlay {
  position: fixed; inset: 0; z-index: 9700;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,7,9,0.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
.mkt-guide-overlay.hidden { display: none; }
.mkt-guide-modal {
  width: min(520px, 96vw); max-height: 86vh; overflow-y: auto;
  background: var(--surface-1, #15161a);
  border: 1px solid var(--border2, #2a2c33);
  border-radius: 18px; padding: 28px 28px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.mkt-guide-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.mkt-guide-sub { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; }
.mkt-guide-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.mkt-guide-item { display: flex; gap: 13px; align-items: flex-start; }
.mkt-guide-ico { font-size: 1.4rem; line-height: 1.3; flex-shrink: 0; }
.mkt-guide-item > div:last-child { display: flex; flex-direction: column; gap: 3px; }
.mkt-guide-item b { color: var(--text); font-size: 0.92rem; }
.mkt-guide-item span { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
.mkt-guide-btn {
  width: 100%; padding: 13px; border: none; border-radius: 12px;
  background: var(--accent, #6c8cff); color: var(--text-on-accent, #fff);
  font-size: 1rem; font-weight: 600; cursor: pointer;
}
.mkt-guide-btn:hover { opacity: 0.92; }

/* ── Initial-load veil ────────────────────────────────────────────────────── */
#appLoader {
  position: fixed; inset: 0; z-index: 99995;
  background: #0a0a0a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  transition: opacity 0.45s ease;
}
#appLoader.app-loader-hide { opacity: 0; pointer-events: none; }
#appLoader .app-loader-word {
  font-family: var(--font-mono, monospace);
  font-size: 1.4rem; letter-spacing: 0.42em; text-indent: 0.42em;
  text-transform: uppercase; color: var(--text-muted, #b6bcc6); opacity: 0.9;
}
#appLoader .app-loader-distro { color: var(--accent, #6c8cff); opacity: 0.85; }
#appLoader .app-loader-bar {
  width: 150px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,0.08); overflow: hidden; position: relative;
}
#appLoader .app-loader-bar::after {
  content: ''; position: absolute; top: 0; left: -45%; height: 100%; width: 45%;
  background: var(--accent, #6c8cff); border-radius: 3px;
  animation: appLoaderSlide 1.05s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes appLoaderSlide { 0% { left: -45%; } 100% { left: 100%; } }

/* ── Mobile desktop-only gate ─────────────────────────────────────────────── */
#mobileGate {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,7,9,0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 24px;
}
#mobileGate .mg-box {
  max-width: 420px; width: 100%;
  background: var(--surface-1, #15161a);
  border: 1px solid var(--border2, #2a2c33);
  border-radius: 18px;
  padding: 30px 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
#mobileGate .mg-icon { font-size: 3rem; line-height: 1; margin-bottom: 14px; }
#mobileGate .mg-title { font-size: 1.45rem; font-weight: 700; color: var(--text, #e6e6e6); margin-bottom: 12px; }
#mobileGate .mg-text { font-size: 0.95rem; line-height: 1.6; color: var(--text-muted, #b6bcc6); margin-bottom: 24px; }
#mobileGate .mg-btn {
  background: var(--accent, #6c8cff); color: var(--text-on-accent, #fff);
  border: none; border-radius: 11px; padding: 12px 28px;
  font-size: 1rem; font-weight: 600; cursor: pointer;
}
#mobileGate .mg-btn:hover { opacity: 0.9; }

/* ── Quick Actions sidebar card (minimal focus timer) ─────────────────────── */
.r-quick-actions {
  flex: 0 0 auto;          /* compact — pinned at the bottom of the rbar, content height */
  display: flex;
  flex-direction: column;
  padding-top: 12px;
  padding-bottom: 12px;
}
.qa-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.qa-timer-display {
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.qa-timer-display:hover { color: var(--accent); }
.qa-timer-display.qa-running { color: var(--accent); cursor: default; }
.qa-timer-display.qa-overtime { color: #e5484d !important; }   /* ticking past zero */
/* Clear EDIT state — so you can tell when you're typing the minutes vs not. */
.qa-timer-display.qa-editing {
  color: var(--accent);
  outline: none;
  box-shadow: inset 0 -3px 0 var(--accent);
  border-radius: 3px;
}
.qa-timer-done { color: var(--accent) !important; animation: qaFlash 0.6s ease-in-out 4; }
@keyframes qaFlash { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
.qa-timer-controls { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.qa-timer-btn {
  background: var(--accent); color: var(--text-on-accent); border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 16px; border-radius: 7px; font-weight: 600; transition: opacity 0.14s;
}
.qa-timer-btn:hover { opacity: 0.9; }
.qa-timer-reset {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 6px;
  transition: color 0.14s;
}
.qa-timer-reset:hover { color: var(--text-muted); }

/* Sort bar (Latest / Popular) — same pill styling as the distro bar */
.comm-sort-bar {
  display: flex;
  gap: 0;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border2);
  flex-shrink: 0;
}
.comm-sort-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  padding: 4px 11px;
  font-weight: 600;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
}
.comm-sort-btn + .comm-sort-btn { border-left: 1px solid var(--border2); }
.comm-sort-btn:hover { background: var(--surface-2); color: var(--text); }
.comm-sort-btn.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* "Share to all distros" checkbox in the composer */
/* Foreign-distro posts: a subtle left accent to signal the post is from another distro
   (interactions are fully live and routed to that distro's store). */
.comm-post.comm-foreign { border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.comm-mode-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.68rem;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  padding: 4px 11px;
  font-weight: 600;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
}
.comm-mode-btn + .comm-mode-btn { border-left: 1px solid var(--border2); }
.comm-mode-btn:hover { background: var(--surface-2); color: var(--text); }
.comm-mode-btn.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

/* Marketplace type pills in compose */
.comm-type-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 6px;
}
.comm-type-pill {
  padding: 5px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border2);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.comm-type-pill:hover { border-color: var(--border2); background: var(--border); }
.comm-type-pill[data-type="blog"].active    { background: color-mix(in srgb, var(--accent) 18%, transparent); border-color: var(--accent); color: var(--accent); }
.comm-type-pill[data-type="showoff"].active { background: rgba(255,200,60,0.18);  border-color: #ffc83c; color: #ffc83c; }

/* Post type badge on feed posts */
.comm-post-type-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.67rem;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.comm-post-type-sell  { background: rgba(72,200,120,0.15); color: #48c878; border: 1px solid rgba(72,200,120,0.3); }
.comm-post-type-buy   { background: rgba(77,158,255,0.15); color: #4d9eff; border: 1px solid rgba(77,158,255,0.3); }
.comm-post-type-hire  { background: rgba(255,160,72,0.15); color: #ffa048; border: 1px solid rgba(255,160,72,0.3); }
.comm-post-type-teach { background: rgba(180,100,255,0.15); color: #b464ff; border: 1px solid rgba(180,100,255,0.3); }
.comm-post-type-learn { background: rgba(72,220,220,0.15); color: #48dcdc; border: 1px solid rgba(72,220,220,0.3); }
.comm-post-type-collab{ background: rgba(255,100,180,0.15); color: #ff64b4; border: 1px solid rgba(255,100,180,0.3); }

.comm-modal-textarea {
  width: 100%;
  min-height: 110px;
  max-height: 220px;
  overflow-y: auto;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 9px;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.6;
  outline: none;
  font-family: var(--font-body);
  word-break: break-word;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.comm-modal-textarea:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
  opacity: 0.45;
  pointer-events: none;
}
.comm-modal-textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 7%, transparent);
}

/* Community top-bar actions (search + new post) — bigger, softer, more button-like */
.card-top-bar #commSearchBtn,
.card-top-bar #commComposeBtn,
.card-top-bar #cancelCommPostBtn {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--surface-2);
  border-color: var(--border2);
  box-shadow: 0 2px 9px rgba(0,0,0,0.20);
}
.card-top-bar #commComposeBtn {            /* the + is the primary action — accent it */
  font-size: 1.35rem; line-height: 1;
  background: var(--accent-glow);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
}
.card-top-bar #commComposeBtn:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.card-top-bar #commSearchBtn svg { width: 16px; height: 16px; }

/* ── Camera recorder modal ───────────────────────────────────────────────── */
.cam-recorder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cam-recorder-modal {
  position: relative;
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  width: min(480px, 95vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cam-recorder-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  background: rgba(0,0,0,0.55);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.cam-recorder-close:hover { background: rgba(0,0,0,0.8); }
.cam-recorder-video {
  width: 100%;
  max-height: 60vh;
  object-fit: cover;
  display: block;
  background: #000;
}
.cam-recorder-actions {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  justify-content: center;
  background: #111;
  width: 100%;
}
.cam-action-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 30px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  border: none;
  transition: background 0.15s, transform 0.1s;
}
.cam-action-btn:active { transform: scale(0.96); }
.cam-action-capture { background: var(--accent); color: var(--text-on-accent); }
.cam-action-capture:hover { background: #e8b97a; }
.cam-action-record { background: #c0392b; color: #fff; }
.cam-action-record:hover { background: #e74c3c; }
.cam-action-stop { background: var(--surface-2); color: #fff; }
.cam-action-stop:hover { background: var(--border2); }
.cam-rec-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  animation: cam-rec-pulse 1s ease-in-out infinite;
}
@keyframes cam-rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.comm-field-label {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  color: var(--text-dim);
  opacity: 0.55;
  letter-spacing: 0.05em;
}
.comm-range-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  opacity: 0.65;
  white-space: nowrap;
}
.comm-range-badge.locating {
  opacity: 0.38;
  animation: range-blink 1.4s ease-in-out infinite;
}
.comm-range-badge.has-range {
  opacity: 1;
  color: var(--accent);
}
@keyframes range-blink {
  0%, 100% { opacity: 0.38; }
  50% { opacity: 0.65; }
}

/* ── Community skill filter chips ────────────────────────── */
.comm-skill-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 14px 4px;
  border-bottom: 1px solid var(--border);
}
.comm-skill-chip {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.comm-skill-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
}
.comm-skill-chip.active {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  font-weight: 600;
}

/* ── Habits card — desktop: flat two-column ──────────── */
.habits-card {
  cursor: default;
  overflow: hidden !important;
  padding: 0;
  height: 680px;
  background: rgba(10,8,6,0.5) !important;
}
.habits-card:hover { transform: none; }

.habits-inner {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.habit-face.habit-front {
  display: flex;
  flex-direction: row;
  flex: 1;
  height: 100%;
}
.habit-face.habit-back { display: none; }

.habit-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.habit-divider {
  width: 1px;
  height: 100%;
  background: var(--surface-2);
  flex-shrink: 0;
}

.habit-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.habit-add-row {
  display: none; /* desktop: hidden until + clicked */
  gap: 8px;
  padding: 10px 14px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  align-items: center;
}
.habit-add-row.visible { display: flex; }
.habit-add-row input {
  flex: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.2s;
}
.habit-add-row input:focus { border-color: var(--accent); }
.habit-add-row button {
  height: 34px;
  border-radius: 8px; border: none;
  background: var(--accent); color: #0a0a0a;
  font-size: 0.78rem; font-weight: 700;
  padding: 0 14px;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.2s;
}
.habit-add-row button:hover { opacity: 0.8; }
#habitAddCancel {
  background: var(--surface-2) !important;
  color: var(--text-dim) !important;
  font-size: 0.9rem !important;
  width: 30px; padding: 0 !important;
  border: 1px solid var(--border) !important;
}
#habitAddCancel:hover { opacity: 0.7; }

/* Pulse col (desktop right panel) */
.habit-pulse-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.habit-pulse-range-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  opacity: 0.6;
}
.habit-pulse-chart-area {
  flex: 1;
  position: relative;
  min-height: 0;
  padding: 10px 16px 16px;
}
.habit-pulse-chart-area canvas { width: 100% !important; height: 100% !important; }

/* Today col (mobile right panel — hidden on desktop) */
.habit-today-col { display: none; }

/* Combined tracker item (desktop manage list) */
.habit-combined-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 14px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 0.83rem;
  color: var(--text);
  transition: background 0.15s, border-color 0.2s, opacity 0.2s;
}
.habit-combined-item:hover {
  background: var(--surface-2);
  border-left-color: var(--border2);
}
.habit-combined-item.done {
  color: var(--text-dim);
  border-left-color: var(--accent);
  opacity: 0.65;
}
.habit-combined-item.done .habit-name { text-decoration: line-through; opacity: 0.6; }
.habit-combined-item .habit-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: transparent;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.habit-combined-item:hover .habit-check { border-color: var(--border2); }
.habit-combined-item.done .habit-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  transform: scale(1.08);
  box-shadow: none;
}
.habit-saving {
  font-size: 0.62rem; opacity: 0.35;
  font-family: var(--font-mono);
  margin-left: auto;
}

.habit-manage-list,
.habit-today-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}
.habit-empty {
  padding: 32px 18px;
  color: var(--text-dim);
  font-size: 0.77rem;
  font-family: var(--font-mono);
  text-align: center;
  opacity: 0.5;
}

/* Empty-state tutorial callout — fills the habits card when there are no habits */
.habit-empty-cta {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  margin: 14px 6px;
  padding: 30px 22px;
  border: 1px dashed var(--border2);
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}
.habit-empty-illu { color: var(--accent); opacity: 0.85; }
.habit-empty-title {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.habit-empty-text {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 270px;
}
.habit-empty-btn {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--accent-glow);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.habit-empty-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: var(--accent);
}
.habit-manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 0.83rem;
  color: var(--text);
  transition: background 0.15s;
}
.habit-manage-item:hover { background: var(--surface-2); }
.habit-manage-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.55;
}
.habit-del-btn {
  background: none; border: none;
  color: var(--text-dim); cursor: pointer;
  opacity: 0.25; font-size: 0.75rem;
  padding: 3px 7px; border-radius: 4px;
  margin-left: auto;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}
.habit-del-btn:hover { opacity: 1; color: #e05555; }

.habit-today-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 16px 10px 0;
  margin: 0 4px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  padding-left: 14px;
  cursor: pointer;
  font-size: 0.83rem;
  color: var(--text);
  transition: background 0.15s, border-color 0.2s, opacity 0.2s;
  border-radius: 0 6px 6px 0;
}
.habit-today-item:hover {
  background: var(--surface-2);
  border-left-color: var(--border2);
}
.habit-today-item.done {
  color: var(--text-dim);
  border-left-color: var(--accent);
  opacity: 0.65;
}
.habit-today-item.done .habit-name {
  text-decoration: line-through;
  opacity: 0.6;
}

.habit-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.72rem;
  color: transparent;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.habit-today-item:hover .habit-check {
  border-color: var(--border2);
}
.habit-today-item.done .habit-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  transform: scale(1.08);
  box-shadow: none;
}

.habit-today-footer {
  padding: 10px 18px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.habit-progress-wrap {
  height: 3px;
  background: var(--surface-2);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 7px;
}
.habit-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.habit-progress-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  opacity: 0.65;
  display: block;
}



/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* Sidebar toggle — hidden on desktop */
.rbar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.rbar-toggle:hover { background: var(--surface-2); color: var(--text); }

/* Overlay backdrop */
.rbar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 290;
}
.rbar-backdrop.active { display: block; }

/* ── 1400px: trim sidebar so cards get ~80px more room ── */
@media (max-width: 1400px) {
  :root { --rbar-w: clamp(220px, 18vw, 300px); }
}

/* ── 1100px: further trim ── */
@media (max-width: 1100px) {
  :root { --rbar-w: clamp(200px, 20vw, 260px); }
  .clock-widget { width: auto; }
}

/* ── 900px: sidebar becomes full-height overlay, playground takes all width ── */
@media (max-width: 900px) {
  :root {
    --rbar-w: 0px;
    --header-h: 76px;
  }

  .rbar-toggle { display: flex; }
  .header-nav  { display: none; }
  .clock-widget { width: auto; }
  .veyra-lbar  { display: none; }
  body.lbar-open .playground { margin-left: 0; }

  .r-bar {
    width: min(340px, 86vw) !important;
    top: 0 !important;
    height: 100vh !important;
    padding-top: 80px;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4,0,0.2,1),
                top 0.32s cubic-bezier(0.4,0,0.2,1),
                height 0.32s cubic-bezier(0.4,0,0.2,1) !important;
    box-shadow: var(--shadow-lg);
    z-index: 300;
  }
  .r-bar.open { transform: translateX(0); }

  .playground {
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  .stats-popup { right: 10px; }
}

/* ── Mobile Bottom Bar — hidden on desktop, shown in kstyle-mobile.css ── */
.mobile-bottom-bar {
  display: none;
}



/* ── Community tab: full central area (desktop only) ─── */
@media (min-width: 769px) {
  body[data-route="social"] #sec-comms {
    grid-column: 1 / -1;
    height: calc(100dvh - var(--header-h) - 30px);
    min-height: 500px;
  }
}

/* ══════════════════════════════════════════════════════════
   DM Sidebar Drawer
   ══════════════════════════════════════════════════════════ */
.dm-bar {
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: 340px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 600;
  transform: translateX(100%);
  transition: transform 0.26s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dm-bar.open { transform: translateX(0); }

.dm-bar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.48);
  z-index: 599;
  display: none;
  cursor: pointer;
}
.dm-bar-backdrop.active { display: block; }

.dm-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}
.dm-bar-title {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}
.dm-bar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.dm-bar-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 0.88rem;
  padding: 4px 7px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.15s, color 0.15s;
}
.dm-bar-close:hover { background: var(--surface-2); color: var(--text); }

.dm-bar-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.dm-bar-body .dm-conv-list  { flex: 1; overflow-y: auto; }
.dm-bar-body .dm-chat-view  { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.dm-bar-body .dm-messages   { flex: 1; overflow-y: auto; }

/* DM toggle capsule in header */
.dm-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--border2);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.73rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  position: relative;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.dm-toggle:hover { background: var(--surface-2); color: var(--text); }
.dm-toggle.active {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
/* DM unread — red notification badge pinned to the top-right of the header DMs pill */
.nav-pill-dms { position: relative; }
.dm-unread-badge {
  position: absolute;
  top: -5px; right: -7px;
  background: #e5484d;                       /* red, so it reads as "you have mail" */
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  font-family: var(--font-mono);
  border-radius: 10px;
  padding: 1px 5px;
  min-width: 15px;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 0 0 2px var(--surface, #0a0a0a);  /* ring so it pops off the pill */
  flex-shrink: 0;
  display: none;
}

/* ── Progression system ─────────────────────────────── */
.skill-row-prog {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  cursor: default;
}
.skill-row-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.skill-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.skill-remove-btn {
  font-size: 0.85rem;
  line-height: 1;
  padding: 1px 5px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0.18;
  transition: opacity 0.12s, color 0.12s;
  flex-shrink: 0;
}
.skill-remove-btn:hover { opacity: 0.7; color: #d06060; }
.skill-row-prog:hover .skill-remove-btn,
.skill-row-prog:focus-within .skill-remove-btn { opacity: 0.32; }
.skill-ladder-btn {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.05em;
}
.skill-ladder-btn:hover { background: var(--surface-2); }
.skill-progress-track {
  height: 3px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
}
.skill-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}
.skill-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.skill-bar-row .skill-progress-track {
  flex: 1;
}
.skill-bar-row .rank-badge {
  font-size: 0.72rem;
  min-width: 22px;
  flex-shrink: 0;
}
.skill-next {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--text-dim);
  opacity: 0.65;
  letter-spacing: 0.03em;
}
.skill-next-rank {
  font-weight: 600;
  opacity: 1;
}
.skill-maxed {
  color: #ffd700;
  opacity: 0.5;
}
.skill-unverified-hint {
  opacity: 0.45;
  font-style: italic;
}

/* ── Rank ladder (expand on click) ──────────────────── */
.skill-ladder {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  padding: 8px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.ladder-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  border: 1px solid transparent;
}
.ladder-rank {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 24px;
  letter-spacing: 0.06em;
}
.ladder-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  flex: 1;
}
.ladder-proof {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}
.ladder-current .ladder-label { color: var(--text); }

/* ── Ladder class tabs ───────────────────────────────── */
.ladder-class-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.ladder-class-tab {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s, border-color 0.15s;
}
.ladder-class-tab.active {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.ladder-class-block.hidden { display: none; }
.ladder-note {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.skill-threshold {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-dim);
  margin-left: 4px;
}

/* ── EXP ladder (dummy) ──────────────────────────────── */
.skill-ladder-exp {
  padding: 10px;
}
.exp-ladder-classes {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.exp-class-chip {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
}
.exp-class-chip:hover {
  border-color: var(--border2);
  color: var(--text);
}
.exp-class-chip.active {
  border-color: #ffb700;
  color: #ffb700;
  background: rgba(255,183,0,0.08);
}
.exp-ladder-icon {
  font-size: 1rem;
  margin-right: 6px;
  opacity: 0.4;
}
.exp-ladder-msg {
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.exp-rank-ladder {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.exp-rank-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 0;
}
.exp-rank-row.exp-subrank {
  padding-left: 12px;
  opacity: 0.75;
}
.exp-threshold-label {
  font-size: 0.68rem;
  font-family: monospace;
  opacity: 0.55;
  margin-left: auto;
}
.exp-rank-bar-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
}
.exp-rank-bar { height: 100%; border-radius: 2px; width: 100%; }
.exp-ladder-msg {
  margin-top: 10px;
  line-height: 1.5;
}
.skill-exp-hint {
  font-style: italic;
  opacity: 0.4;
}

/* ── Credits / Wallet ──────────────────────────────────────────────────────── */
.credits-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  height: auto !important;
  cursor: default;
}
.credits-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.credits-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.credits-currency-tag {
  font-size: 0.72rem;
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.08em;
  opacity: 0.5;
  background: var(--surface-2);
  border-radius: 5px;
  padding: 2px 7px;
}
.credits-rate-bar {
  font-size: 0.78rem;
  font-family: var(--font-mono, monospace);
  opacity: 0.45;
  margin-top: -8px;
}
.credits-conv-hint {
  font-size: 0.78rem;
  opacity: 0.55;
  margin-top: 2px;
}
.credits-balance-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
}
.credits-balance-label {
  font-size: 0.8rem;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.credits-balance-val {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.credits-balance-unit {
  font-size: 0.85rem;
  opacity: 0.55;
}
.credits-refresh-btn {
  opacity: 0.55;
  font-size: 1.1rem;
  transition: opacity 0.15s;
}
.credits-refresh-btn:hover { opacity: 1; }

/* Two-column cards row */
.credits-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) {
  .credits-cards-row { grid-template-columns: 1fr; }
}
.credits-sub-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.credits-sub-title {
  font-size: 1rem;
  font-weight: 600;
}
.credits-sub-desc {
  font-size: 0.82rem;
  opacity: 0.55;
  line-height: 1.45;
}

/* Amount grid */
.credits-amount-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.credits-amt-btn {
  padding: 9px 6px;
  border-radius: 10px;
  border: 1.5px solid var(--border2);
  background: transparent;
  color: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.credits-amt-btn:hover {
  border-color: var(--border2);
  background: var(--surface-2);
}
.credits-amt-btn.active {
  border-color: var(--accent, #7c6cfa);
  background: rgba(124,108,250,0.12);
  color: var(--accent, #7c6cfa);
}
.amt-eyes { font-size: 0.85rem; font-weight: 500; }
.amt-local { font-size: 0.72rem; opacity: 0.6; }

/* Custom input row */
.credits-custom-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.credits-custom-input {
  flex: 1;
  background: var(--surface-2);
  border: 1.5px solid var(--border2);
  border-radius: 9px;
  color: inherit;
  padding: 8px 12px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}
.credits-custom-input:focus { border-color: var(--accent, #7c6cfa); }
.credits-unit-label {
  font-size: 0.8rem;
  opacity: 0.55;
}

/* Selected row */
.credits-selected-row {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Balance hint */
.credits-balance-hint {
  font-size: 0.82rem;
  opacity: 0.55;
}

/* Action button */
.credits-action-btn {
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--accent, #7c6cfa);
  color: #fff;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  align-self: flex-start;
}
.credits-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.credits-action-btn:not(:disabled):hover { opacity: 0.85; }

/* Status messages */
.credits-msg {
  font-size: 0.82rem;
  min-height: 1em;
}
.credits-msg-ok  { color: #4caf87; }
.credits-msg-err { color: #f87171; }

/* Fine print */
.credits-fine-print {
  font-size: 0.75rem;
  opacity: 0.4;
  line-height: 1.4;
  margin: 0;
}
.credits-fine-print a { color: inherit; text-decoration: underline; }

/* Transaction list */
.credits-tx-section { display: flex; flex-direction: column; gap: 10px; }
.credits-tx-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
}
.credits-tx-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.credits-tx-empty {
  font-size: 0.85rem;
  opacity: 0.4;
  padding: 8px 0;
}
.credits-tx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  gap: 10px;
}
.credits-tx-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.credits-tx-label { font-size: 0.88rem; }
.credits-tx-date  { font-size: 0.75rem; opacity: 0.45; }
.credits-tx-status {
  font-size: 0.72rem;
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
}
.credits-tx-status-pending   { background: rgba(251,191,36,0.18);  color: #fbbf24; }
.credits-tx-status-rejected  { background: rgba(248,113,113,0.18); color: #f87171; }
.credits-tx-status-cancelled { background: rgba(148,163,184,0.18); color: #94a3b8; }
.credits-tx-amt { font-size: 0.92rem; font-weight: 600; }
.credits-tx-cancel {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 0.72rem;
  border-radius: 5px;
  border: 1px solid rgba(248,113,113,0.4);
  color: #f87171;
  background: transparent;
  cursor: pointer;
  line-height: 1.6;
}
.credits-tx-cancel:hover { background: rgba(248,113,113,0.12); }
.credits-tx-pos { color: #4caf87; }
.credits-tx-neg { color: #f87171; }
.credits-tx-void { color: var(--text-dim); font-weight: 500; font-style: italic; }

/* Pending topup hint icon + tooltip */
.credits-tx-hint {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  color: #fbbf24;
  cursor: pointer;
  margin-left: 4px;
  user-select: none;
}
.credits-tx-hint-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 260px;
  background: #1e1a2e;
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #d4cfc8;
  z-index: 500;
  pointer-events: none;
}
.credits-tx-hint-tooltip strong { color: #fbbf24; display: block; margin-bottom: 8px; }
.credits-tx-hint-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 10px;
  border: 6px solid transparent;
  border-top-color: rgba(251,191,36,0.3);
}
.credits-tx-hint:hover .credits-tx-hint-tooltip,
.credits-tx-hint:focus .credits-tx-hint-tooltip { display: block; }

/* Min note */
.credits-min-note {
  font-size: 0.75rem;
  opacity: 0.4;
  margin: -6px 0 0;
}

/* Sell-back title row with warning icon */
.credits-sub-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.credits-warn-icon {
  position: relative;
  font-size: 0.85rem;
  color: #fbbf24;
  cursor: help;
  line-height: 1;
  flex-shrink: 0;
}
.credits-warn-tooltip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: #1c1a17;
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.78rem;
  color: #c8bfad;
  line-height: 1.6;
  pointer-events: none;
  z-index: 500;
  text-align: left;
  box-shadow: var(--shadow);
}
.credits-warn-tooltip strong { color: #fbbf24; }
.credits-warn-tooltip em { color: #a89880; font-style: italic; }
.credits-warn-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: rgba(251,191,36,0.3);
}
.credits-warn-icon:hover .credits-warn-tooltip,
.credits-warn-icon:focus .credits-warn-tooltip {
  display: block;
}

/* Payment instructions block (shown after topup request is created) */
.credits-payment-inst {
  background: rgba(124,108,250,0.08);
  border: 1px solid rgba(124,108,250,0.25);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.83rem;
}
.cpi-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: #c8bfad;
  margin-bottom: 2px;
}
.cpi-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.cpi-label {
  opacity: 0.5;
  flex-shrink: 0;
}
.cpi-row strong {
  font-weight: 600;
  color: #ede7d4;
  text-align: right;
  word-break: break-all;
}
.cpi-note {
  font-size: 0.75rem;
  opacity: 0.45;
  margin-top: 2px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
/* ── Buy info modal ────────────────────────────────────────────────────── */
.buy-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.buy-info-overlay.hidden { display: none; }
.buy-info-modal {
  background: var(--card-bg, #1a1a2e);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px 20px;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.buy-info-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #ede7d4);
}
.buy-info-body {
  font-size: 0.84rem;
  color: var(--text-dim, #b0a89a);
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 1.55;
}
.buy-info-body p { margin: 0; }
.buy-info-body strong { color: var(--text, #ede7d4); }
.buy-info-body ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.buy-info-note {
  font-size: 0.78rem;
  opacity: 0.5;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.buy-info-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.buy-info-btn-primary {
  flex: 1;
  padding: 9px 0;
  border-radius: 8px;
  border: none;
  background: var(--accent, #7c6cfa);
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}
.buy-info-btn-primary:hover { opacity: 0.88; }
.buy-info-btn-secondary {
  flex: 1;
  padding: 9px 0;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text-dim, #b0a89a);
  font-size: 0.88rem;
  cursor: pointer;
}
.buy-info-btn-secondary:hover { background: var(--surface-2); }

.cpi-qr {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  border-radius: 8px;
  margin: 4px auto 2px;
  background: #fff;
  padding: 6px;
}

/* ── Admin moderation panel ───────────────────────────────────────────────── */
.card.admin { display: flex; flex-direction: column; overflow: hidden; }
.admin-tabs { display: flex; gap: 8px; margin: 4px 0 12px; }
.admin-tab {
  background: var(--surface-2); border: 1px solid var(--border2); color: var(--text-muted);
  padding: 7px 14px; border-radius: 9px; cursor: pointer; font-family: var(--font-mono);
  font-size: 0.76rem; letter-spacing: 0.04em; transition: background .15s, color .15s, border-color .15s;
}
.admin-tab.active { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); }
.admin-count { font-size: 0.66rem; opacity: 0.8; }
.admin-body { flex: 1; overflow-y: auto; min-height: 0; }
.admin-list { display: flex; flex-direction: column; gap: 10px; }
.admin-empty { color: var(--text-dim); font-size: 0.82rem; padding: 24px 8px; text-align: center; }
.admin-row {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px;
}
.admin-row-hidden { border-color: color-mix(in srgb, #e5484d 45%, var(--border)); }
.admin-row-main { flex: 1; min-width: 0; }
.admin-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.admin-row-author { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.admin-row-badge {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border2); color: var(--text-muted);
  padding: 1px 7px; border-radius: 20px;
}
.admin-badge-warn { background: color-mix(in srgb, #e5484d 18%, transparent); border-color: #e5484d; color: #ff8a80; }
.admin-badge-ctx { background: var(--accent-glow); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); }
.admin-row-when { font-size: 0.66rem; color: var(--text-dim); margin-left: auto; }
.admin-row-text { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; word-break: break-word; }
.admin-row-reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.admin-row-reasons span {
  font-size: 0.66rem; color: #ff8a80; background: color-mix(in srgb, #e5484d 12%, transparent);
  border: 1px solid color-mix(in srgb, #e5484d 30%, transparent); padding: 1px 7px; border-radius: 20px;
}
.admin-row-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.admin-act {
  background: var(--surface-1); border: 1px solid var(--border2); color: var(--text-muted);
  padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 0.74rem; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.admin-act:hover { border-color: var(--accent); color: var(--accent); }
.admin-act-remove:hover { border-color: #e5484d; color: #ff8a80; }
.admin-act-keep:hover { border-color: var(--green, #4ade80); color: var(--green, #4ade80); }

.admin-dm-overlay {
  position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.admin-dm-sheet {
  background: var(--surface-1); border: 1px solid var(--border2); border-radius: 14px;
  width: min(560px, 94vw); max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}
.admin-dm-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text);
}
.admin-dm-body { overflow-y: auto; padding: 12px 16px; }
.admin-dm-note {
  font-size: 0.72rem;
  color: var(--text-dim);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
  line-height: 1.45;
}
.admin-dm-thread { margin-bottom: 16px; }
.admin-dm-with { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.admin-dm-msg { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; padding: 3px 0; }
.admin-dm-msg b { color: var(--text); }

/* Live admin header bell */
.admin-bell {
  position: relative;
  background: transparent; border: none; cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  padding: 4px; border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.admin-bell:hover { color: var(--text); background: var(--surface-2); }
.admin-bell.has-notif { color: var(--accent); }
.admin-bell.has-notif svg { animation: bellRing 1.5s ease-in-out infinite; transform-origin: 50% 4px; }
@keyframes bellRing {
  0%,55%,100% { transform: rotate(0); }
  60% { transform: rotate(12deg); } 67% { transform: rotate(-10deg); }
  74% { transform: rotate(8deg); }  81% { transform: rotate(-5deg); } 88% { transform: rotate(0); }
}
.admin-bell-badge {
  position: absolute; top: -3px; right: -4px;
  min-width: 15px; height: 15px; padding: 0 4px;
  background: #e5484d; color: #fff;
  font-size: 0.56rem; font-weight: 700; font-family: var(--font-mono);
  border-radius: 8px; line-height: 1;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--bg, #0a0a0a);
}
.admin-bell.has-notif .admin-bell-badge { display: flex; }

/* Members overview — distro headcount stat cards + recent sign-ups */
.admin-members-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.admin-stat {
  flex: 1; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px;
  padding: 14px 8px;
}
.admin-stat-num { font-size: 1.7rem; font-weight: 700; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.admin-stat-num.admin-stat-on { color: var(--green, #4ade80); }
.admin-stat-lbl { font-size: 0.62rem; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-top: 6px; }
.admin-stat-sub { font-size: 0.56rem; font-family: var(--font-mono); color: var(--text-dim); opacity: 0.7; margin-top: 4px; }
.admin-members-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 9px; }
.admin-ov-divider { height: 1px; background: var(--border); margin: 20px 0 16px; }

/* Overview flip card — front (stats) ⟷ back (views graph). Faces don't scroll. */
.ov-flip { flex: 1; min-height: 0; perspective: 1600px; }
.ov-flip-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.ov-flip-inner.flipped { transform: rotateY(180deg); }
.ov-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; overflow: hidden;
}
.ov-back { transform: rotateY(180deg); }
.ov-signups { gap: 8px; }
.ov-back .admin-visits-chart { flex: 1; height: auto; min-height: 120px; }
.admin-reset-btn {
  background: transparent; border: 1px solid var(--border2); color: var(--text-dim);
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em;
  padding: 3px 10px; border-radius: 7px; cursor: pointer; text-transform: lowercase;
}
.admin-reset-btn:hover { color: #e87a5a; border-color: #e87a5a; }

/* ── Admin visits bar chart ── */
.admin-visits-chart {
  display: flex; align-items: flex-end; gap: 4px;
  height: 150px; padding: 4px 0 0;
}
.admin-bar-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; min-width: 0;
}
.admin-bar-val { font-size: 0.6rem; font-variant-numeric: tabular-nums; color: var(--text-dim); margin-bottom: 3px; }
.admin-bar {
  width: 100%; max-width: 22px; min-height: 2px;
  background: var(--accent); border-radius: 3px 3px 0 0;
  transition: height 0.2s;
}
.admin-bar-col:hover .admin-bar { background: var(--text); }
.admin-bar-lbl { font-size: 0.54rem; font-family: var(--font-mono); color: var(--text-dim); margin-top: 5px; white-space: nowrap; transform: rotate(-45deg); transform-origin: center; }
.admin-visits-note { font-size: 0.68rem; color: var(--text-dim); margin-top: 18px; line-height: 1.45; }

/* ── Guest mode ──────────────────────────────────────────────────────────────
   Guests see the WHOLE app. Personal tools (notes/habits/to-do) work locally via
   guest-store.js; only social/money actions are gated (guest.js → sign-up prompt).
   Nothing is hidden. */

.guest-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px;
  background: var(--surface-2); border-top: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text-muted);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.25);
}
.guest-banner-text { opacity: 0.9; }
.guest-banner-cta {
  flex-shrink: 0; padding: 5px 16px; border-radius: 8px;
  background: var(--accent); color: var(--text-on-accent);
  font-weight: 600; text-decoration: none; font-size: 0.8rem;
}
.guest-banner-cta:hover { opacity: 0.92; }
body.has-guest-banner .playground { padding-bottom: 56px; }

/* "Saved locally — sign up" nudge toast (slides up above the banner) */
.guest-nudge {
  position: fixed; left: 50%; bottom: 64px; transform: translate(-50%, 16px);
  z-index: 420; max-width: 90vw;
  background: var(--surface); border: 1px solid var(--accent);
  color: var(--text-muted); font-size: 0.8rem;
  padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  opacity: 0; pointer-events: none; transition: opacity 0.28s, transform 0.28s;
}
.guest-nudge.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.guest-nudge a { color: var(--accent); font-weight: 600; text-decoration: none; }
.guest-nudge a:hover { text-decoration: underline; }

.guest-prompt-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
}
.guest-prompt {
  width: min(380px, 90vw);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 22px 18px; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.guest-prompt-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--text); margin-bottom: 8px; }
.guest-prompt-sub { font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; margin-bottom: 18px; }
.guest-prompt-actions { display: flex; gap: 10px; justify-content: center; }
.guest-prompt-cancel {
  padding: 8px 16px; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  font-size: 0.82rem;
}
.guest-prompt-cancel:hover { color: var(--text); border-color: var(--text-dim); }
.guest-prompt-cta {
  padding: 8px 18px; border-radius: 9px; text-decoration: none;
  background: var(--accent); color: var(--text-on-accent); font-weight: 600; font-size: 0.82rem;
}
.guest-prompt-cta:hover { opacity: 0.92; }

/* ── Physique tab ──────────────────────────────────────────────────────────── */
.physique-wrap { grid-column: 1 / -1; }   /* big card spans the full playground width */
.physique-card { height: auto; min-height: 560px; cursor: default; }
.phys-privacy-note {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); opacity: 0.7;
}
.physique-body { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 8px; }
@media (max-width: 900px) { .physique-body { grid-template-columns: 1fr; } }
.phys-editor-title {
  font-size: 0.78rem; color: var(--accent); margin-bottom: 10px;
}
.phys-editor-title.hidden { display: none; }

/* Goal physique — progress rows + curated exercise plan */
.phys-goal-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; padding: 3px 0; }
.phys-goal-row.done { color: var(--text-dim); }
.phys-goal-row .goal-check { color: #2ecf72; margin-right: 4px; }
.phys-goal-plan { margin-top: 8px; font-size: 0.78rem; line-height: 1.5; }
.phys-goal-plan b { color: var(--accent); }
.phys-goal-clear { background: none; border: none; color: var(--text-dim); font-size: 0.7rem; text-decoration: underline; cursor: pointer; padding: 0; margin-top: 6px; }

.phys-section-label {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px;
}
.phys-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.phys-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-muted); }
.phys-field input {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--font-mono); font-size: 0.9rem; padding: 8px 10px; outline: none;
  transition: border-color 0.14s;
}
.phys-field input:focus { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

.phys-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.phys-save {
  background: var(--accent); color: var(--text-on-accent); border: none; cursor: pointer;
  font-weight: 600; font-size: 0.82rem; padding: 9px 18px; border-radius: 9px; transition: opacity 0.14s;
}
.phys-save:hover { opacity: 0.9; }
.phys-save:disabled { opacity: 0.5; cursor: default; }
.phys-scan {
  background: transparent; color: var(--text-muted); border: 1px solid var(--border2);
  cursor: pointer; font-size: 0.82rem; padding: 9px 16px; border-radius: 9px;
}
.phys-scan:hover { color: var(--text); border-color: var(--accent); }
.phys-msg { font-size: 0.78rem; color: var(--text-dim); min-height: 1.1em; margin-top: 8px; }

.phys-compare {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: var(--font-mono); font-size: 0.82rem; padding: 8px 10px; outline: none;
}
.phys-deltas { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.phys-delta {
  display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted);
  font-family: var(--font-mono); padding: 3px 0; border-bottom: 1px dashed var(--border);
}
.phys-delta.up   span:last-child { color: #5a9fd8; }
.phys-delta.down span:last-child { color: #6cc070; }

/* right column: mannequin */
.physique-right {
  display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 16px;
}
/* toolbar: Update + 2D/3D toggle */
.phys-fig-toolbar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 12px; }
.phys-toolbtn {
  background: transparent; border: 1px solid var(--border2); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  padding: 6px 12px; border-radius: 8px; cursor: pointer; transition: color .14s, border-color .14s;
}
.phys-toolbtn:hover { color: var(--text); border-color: var(--accent); }
.phys-editor { flex: 1; }
/* Figure viewport with a faint measurement grid (graph-paper look) in the corners. */
.phys-figure {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; border-radius: 12px; overflow: hidden;
  background-color: rgba(0,0,0,0.12);
  background-image:
    linear-gradient(rgba(212,165,116,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,165,116,0.10) 1px, transparent 1px);
  background-size: 28px 28px;
}
/* heavier ruler ticks down the left edge + along the bottom (the "scale") */
.phys-figure::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background-image: repeating-linear-gradient(to bottom, rgba(212,165,116,0.35) 0 1px, transparent 1px 28px);
}
.phys-figure::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background-image: repeating-linear-gradient(to right, rgba(212,165,116,0.35) 0 1px, transparent 1px 28px);
}
.phys-mannequin { width: 100%; max-width: 280px; height: 420px; display: flex; align-items: center; justify-content: center; }
.phys-mannequin-3d { max-width: 320px; }
.phys-mannequin svg { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.phys-mannequin-cap { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim); margin-top: 10px; letter-spacing: 0.06em; }

/* left-column stats list */
.phys-stats { display: flex; flex-direction: column; gap: 2px; }
.phys-stat-row {
  display: flex; justify-content: space-between; font-size: 0.84rem; color: var(--text-muted);
  font-family: var(--font-mono); padding: 5px 0; border-bottom: 1px dashed var(--border);
}
.phys-stat-row span:last-child { color: var(--text); }

/* Physique live-camera overlay (on-device pose; nothing recorded/stored) */
.phys-cam-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(3px);
}
.phys-cam-modal {
  width: min(560px, 94vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.phys-cam-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); }
.phys-cam-close { background: none; border: none; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; line-height: 1; }
.phys-cam-close:hover { color: var(--text); }
.phys-cam-device { width: 100%; background: var(--surface2, var(--surface)); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 8px; font-size: 0.78rem; }
.phys-cam-device.hidden { display: none; }
.phys-cam-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: 10px; overflow: hidden; }
.phys-cam-stage video, .phys-cam-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.phys-cam-status { font-size: 0.8rem; color: var(--accent); text-align: center; min-height: 1.1em; }
.phys-cam-mic { font-size: 0.7rem; color: var(--text-dim); text-align: center; font-family: monospace; }
.phys-cam-mic.hidden { display: none; }
.phys-cam-hint { font-size: 0.72rem; color: var(--text-dim); text-align: center; line-height: 1.4; }
.phys-cam-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* "How to measure" link (above the field grid) + guide modal */
.phys-fields-head { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.phys-how-link { background: none; border: none; color: var(--accent); font-size: 0.74rem;
  cursor: pointer; padding: 2px 4px; opacity: 0.85; }
.phys-how-link:hover { opacity: 1; text-decoration: underline; }
.phys-how-modal { max-height: 82vh; overflow-y: auto; }
.phys-how-body { display: flex; flex-direction: column; gap: 10px; }
.phys-how-lead { font-size: 0.78rem; color: var(--text-dim); line-height: 1.5; }
.phys-how-list { font-size: 0.8rem; color: var(--text); line-height: 1.6; padding-left: 18px; margin: 0; }
.phys-how-list li { margin-bottom: 4px; }
.phys-how-list b { color: var(--accent); }

/* Physique title-bar danger button + "coming soon" toast */
.phys-toolbtn-danger:hover { color: #e87a5a !important; border-color: #e87a5a !important; }
.veyra-soon-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  z-index: 600; background: var(--surface); border: 1px solid var(--accent);
  color: var(--text-muted); font-size: 0.82rem; padding: 9px 18px; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4); opacity: 0; pointer-events: none;
  transition: opacity 0.28s, transform 0.28s;
}
.veyra-soon-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Guest mode: hide account-management actions (guests have no account) — esp. Delete.
   Sign Out STAYS (relabeled in guest.js) — it's the guest's way back to the login page. */
body[data-guest] #ppChangeUsername,
body[data-guest] #ppChangePassword,
body[data-guest] #ppStudentVerify,
body[data-guest] #ppDeleteAccount { display: none !important; }