/* ========================================================================== 
   BRENDA 2.1 — PRIVATE INTELLIGENCE UI · VISUAL REFINEMENT
   Rebuilt from scratch. The office/boutique images are atmosphere, not layout.
   ========================================================================== */

:root {
  color-scheme: dark;
  --brenda-outfit: url('images/brendachat.webp');
  --bg: #0a0d10;
  --bg-soft: #11161b;
  --surface: rgba(15, 19, 23, .76);
  --surface-strong: rgba(16, 21, 26, .94);
  --surface-soft: rgba(255, 255, 255, .065);
  --surface-hover: rgba(255, 255, 255, .10);
  --line: rgba(255, 255, 255, .135);
  --line-strong: rgba(255, 255, 255, .22);
  --text: #f4f6f8;
  --muted: #b6c0c9;
  --muted-2: #87929d;
  --pink: #f03272;
  --pink-soft: rgba(240, 50, 114, .17);
  --gold: #f3be4b;
  --gold-soft: rgba(243, 190, 75, .15);
  --cyan: #5ed8df;
  --cyan-soft: rgba(94, 216, 223, .14);
  --green: #63d5a0;
  --green-soft: rgba(99, 213, 160, .14);
  --amber: #f5a94c;
  --danger: #ff666f;
  --locked: #727b84;
  --radius-xs: 7px;
  --radius-sm: 11px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --shadow: 0 18px 60px rgba(0,0,0,.36);
  --shadow-hard: 0 26px 90px rgba(0,0,0,.58);
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Roboto Condensed', 'Arial Narrow', sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(15px, .84vw, 18px);
  line-height: 1.55;
  overflow: hidden;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
button, [role="button"], summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
img { max-width: 100%; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Scene + application shell
   -------------------------------------------------------------------------- */
.brenda-app {
  position: relative;
  isolation: isolate;
  height: 100dvh;
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr) 86px 30px;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 48%, rgba(126, 34, 55, .13), transparent 38%),
    radial-gradient(circle at 25% 65%, rgba(44, 94, 65, .13), transparent 36%),
    #0a0d10;
}
.scene-layer,
.scene-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
.scene-layer {
  background-image: url('images/intelroom.jpg');
  background-size: cover;
  background-position: center;
  opacity: .50;
  filter: saturate(.84) contrast(1.03) brightness(.80);
  transform: scale(1.02);
}
.scene-vignette {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5,7,9,.62) 0%, rgba(5,7,9,.08) 18%, rgba(5,7,9,.12) 72%, rgba(5,7,9,.72) 100%),
    linear-gradient(90deg, rgba(5,7,9,.56) 0%, transparent 24%, transparent 74%, rgba(5,7,9,.46) 100%);
}

/* --------------------------------------------------------------------------
   Top HUD
   -------------------------------------------------------------------------- */
.app-header {
  min-width: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(210px, 1fr) minmax(420px, 720px) minmax(210px, 1fr);
  align-items: center;
  gap: clamp(14px, 1.4vw, 28px);
  padding: 11px clamp(16px, 1.45vw, 30px);
  background: linear-gradient(180deg, rgba(6,8,10,.96), rgba(6,8,10,.78));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  text-decoration: none;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(240, 50, 114, .72);
  background: radial-gradient(circle at 35% 30%, #ff7ba7, var(--pink) 44%, #6d1533 100%);
  font-family: var(--display);
  font-size: 23px;
  font-weight: 700;
  box-shadow: 0 0 0 4px rgba(240,50,114,.08), 0 0 32px rgba(240,50,114,.18);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font-family: var(--display); font-size: 22px; letter-spacing: .12em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font: 500 11px/1.1 var(--mono); letter-spacing: .13em; }

.progression-hud {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
}
.progression-meter {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.035);
}
.progression-meter-main { display: flex; align-items: flex-start; gap: 9px; }
.progression-meter-main > i { width: 16px; margin-top: 3px; text-align: center; font-size: 14px; }
.brenda-rating .progression-meter-main > i { color: var(--gold); }
.brenda-love .progression-meter-main > i { color: var(--pink); }
.progression-meter-copy { min-width: 0; flex: 1; }
.progression-meter-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.progression-meter-label span { color: var(--muted); font: 600 11px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.progression-meter-label strong { font: 600 13px/1 var(--mono); }
.progress-bar-container { height: 3px; margin-top: 7px; overflow: hidden; background: rgba(255,255,255,.09); border-radius: 999px; }
.progress-bar { height: 100%; width: 0; border-radius: inherit; transition: width .5s cubic-bezier(.2,.8,.2,1); }
#brendaLiking { background: linear-gradient(90deg, #c18b27, var(--gold)); box-shadow: 0 0 12px rgba(243,190,75,.34); }
#brendaLove { background: linear-gradient(90deg, #a91247, var(--pink)); box-shadow: 0 0 12px rgba(240,50,114,.38); }
.progression-next { margin-top: 7px; overflow: hidden; color: var(--muted); font: 500 10px/1.25 var(--mono); text-overflow: ellipsis; white-space: nowrap; }

.user-info-display { justify-self: end; min-width: 0; }
.account-menu { position: relative; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-summary {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 12px;
  align-items: center;
  gap: 9px;
  min-width: 174px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.account-summary:hover, .account-menu[open] .account-summary { background: var(--surface-soft); border-color: var(--line); }
.user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(243,190,75,.52); }
.account-copy { min-width: 0; display: flex; flex-direction: column; }
.account-copy strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { color: var(--gold); font: 500 11px/1.2 var(--mono); }
.account-summary > i { color: var(--muted); font-size: 11px; transition: transform .18s; }
.account-menu[open] .account-summary > i { transform: rotate(180deg); }
.account-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 120;
  width: 285px;
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: rgba(8,10,13,.98);
  box-shadow: var(--shadow);
}
.account-detail { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.account-detail span { color: var(--muted); font: 500 11px/1.3 var(--mono); text-transform: uppercase; }
.account-detail strong { overflow: hidden; font: 500 12px/1.35 var(--mono); text-overflow: ellipsis; }
.account-link { display: flex; justify-content: space-between; margin-top: 11px; color: var(--cyan); font-size: 13px; text-decoration: none; }
.loginInfo { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid rgba(94,216,223,.28); border-radius: 999px; background: var(--cyan-soft); color: var(--cyan); font-size: 13px; text-decoration: none; }

/* --------------------------------------------------------------------------
   Main experience grid
   -------------------------------------------------------------------------- */
.experience-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 23vw) minmax(520px, 1fr) minmax(260px, 21vw);
  gap: clamp(14px, 1.35vw, 26px);
  padding: clamp(14px, 1.35vw, 24px) clamp(16px, 1.45vw, 30px) 12px;
}
.character-zone, .conversation-zone, .daily-intel-report { min-height: 0; min-width: 0; }

/* Character */
.character-stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(14,18,20,.03), rgba(8,11,13,.22)),
    radial-gradient(circle at 50% 72%, rgba(240,50,114,.16), transparent 34%),
    radial-gradient(circle at 38% 30%, rgba(94,216,223,.055), transparent 36%);
}
.character-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 80px rgba(0,0,0,.2);
}
.brenda-character {
  position: absolute;
  inset: 2% 0 -1.5%;
  z-index: 2;
  background-image: var(--brenda-outfit);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  filter: drop-shadow(0 32px 30px rgba(0,0,0,.46));
  transition: background-image .2s ease, filter .2s ease;
}
.character-glow {
  position: absolute;
  left: 16%; right: 16%; bottom: 4%; height: 40%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(240,50,114,.16), transparent 68%);
  filter: blur(28px);
}
.character-caption {
  position: absolute;
  z-index: 5;
  left: 14px; right: 14px; bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(6,8,10,.75);
  backdrop-filter: blur(12px);
}
.status-led { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.character-caption div { display: flex; flex-direction: column; line-height: 1.1; }
.character-caption strong { font: 700 13px/1 var(--mono); letter-spacing: .13em; }
.character-caption small { margin-top: 5px; color: var(--muted); font: 500 10px/1.2 var(--mono); letter-spacing: .08em; }

/* Conversation */
.conversation-zone {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: radial-gradient(circle at 54% 36%, rgba(94,216,223,.045), transparent 32%), radial-gradient(circle at 48% 78%, rgba(240,50,114,.045), transparent 34%), linear-gradient(180deg, rgba(10,14,17,.62), rgba(10,14,17,.82));
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px) saturate(1.05);
}
#content-area { height: 100%; min-height: 0; }
.chat-container { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.conversation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: rgba(10,13,16,.62);
}
.brenda-context-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.context-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--green); box-shadow: 0 0 12px rgba(99,213,160,.7); }
.brenda-context-identity div { display: flex; flex-direction: column; min-width: 0; }
.brenda-context-identity strong { font: 600 12px/1 var(--mono); letter-spacing: .12em; }
.brenda-context-identity small { margin-top: 5px; color: var(--muted); font: 500 10px/1.2 var(--mono); }
.brenda-context-strip { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; }
.context-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  max-width: 170px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font: 500 10px/1 var(--mono);
  white-space: nowrap;
}
button.context-chip { cursor: pointer; }
button.context-chip:hover { border-color: rgba(255,255,255,.24); color: var(--text); }
.context-chip.love i { color: var(--pink); }
.context-chip.rating i { color: var(--gold); }
.context-chip.thoughts.unlocked { border-color: rgba(99,213,160,.24); color: #bfeeda; background: var(--green-soft); }

.chat-interface {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(22px, 2.4vw, 40px);
  scroll-behavior: smooth;
}
.conversation-empty-state {
  margin: auto;
  max-width: 520px;
  padding: 36px;
  text-align: center;
  color: var(--muted);
}
.empty-kicker, .composer-kicker, .panel-kicker, .section-label {
  color: var(--cyan);
  font: 600 10px/1.2 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.conversation-empty-state h2 { margin: 8px 0 5px; font: 700 clamp(24px, 2.1vw, 38px)/1 var(--display); letter-spacing: .01em; color: var(--text); }
.conversation-empty-state p { margin: 0; font-size: 15px; }
.user-message, .ai-message, .error-message {
  position: relative;
  font-size: clamp(15px, .9vw, 18px);
  max-width: min(82%, 760px);
  padding: 15px 17px;
  border-radius: 16px;
  line-height: 1.58;
  overflow-wrap: anywhere;
}
.user-message {
  align-self: flex-end;
  border: 1px solid rgba(240,50,114,.21);
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, rgba(240,50,114,.20), rgba(104,24,55,.16));
  color: #f8eff3;
}
.ai-message {
  align-self: flex-start;
  border: 1px solid rgba(94,216,223,.16);
  border-bottom-left-radius: 5px;
  background: linear-gradient(135deg, rgba(22,31,35,.88), rgba(15,21,25,.74));
  color: #e9eef1;
}
.timestamp { display: block; margin-bottom: 7px; color: var(--muted-2); font: 500 9px/1 var(--mono); }
.ai-message p, .user-message p { margin: 0 0 8px; }
.ai-message p:last-child, .user-message p:last-child { margin-bottom: 0; }
.ai-message strong { color: #fff; }
.ai-message a { color: var(--cyan); text-decoration-color: rgba(94,216,223,.4); }
.ai-message img, .user-message img { display: block; max-width: 100%; border-radius: 12px; }

.thought-bubble {
  position: absolute;
  top: -9px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(243,190,75,.52);
  border-radius: 50%;
  background: #15130e;
  color: var(--gold);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 7px 22px rgba(0,0,0,.3);
}
.thought-bubble.revealed { opacity: .4; cursor: default; }
.revealed-thought {
  margin-top: 11px;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  border-radius: 4px 9px 9px 4px;
  background: var(--gold-soft);
  color: #f1dca9;
  font-size: 13px;
  font-style: italic;
}
.pending-ai-message { color: var(--muted); }
.pending-response { display: flex; align-items: center; gap: 10px; }
.pending-label { font-size: 13px; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); animation: typeDot 1s infinite ease-in-out; }
.typing-dots span:nth-child(2) { animation-delay: .13s; }
.typing-dots span:nth-child(3) { animation-delay: .26s; }
@keyframes typeDot { 0%,60%,100%{opacity:.25;transform:translateY(0)} 30%{opacity:1;transform:translateY(-3px)} }
.request-recovery { align-self: flex-start; max-width: 78%; padding: 13px 14px; border: 1px solid rgba(245,169,76,.22); border-radius: 12px; background: rgba(245,169,76,.08); color: #e5d6c2; font-size: 13px; }
.request-recovery p { margin: 0 0 8px; }
.request-recovery button { border: 0; background: transparent; color: var(--amber); cursor: pointer; padding: 0; font-weight: 700; }

/* TA/message formatting */
.ta-header-1, .ta-header-2, .ta-header-3, .ta-header-4 { margin: 15px 0 7px; color: #fff; font-family: var(--display); }
.ta-header-1 { font-size: 26px; }
.ta-header-2 { font-size: 21px; }
.ta-header-3 { padding-left: 10px; border-left: 2px solid var(--cyan); font-size: 17px; }
.ta-header-4 { font-size: 15px; color: var(--cyan); }
.ta-bullet { margin: 5px 0; padding-left: 12px; color: #d8dfe4; }
.ta-bold { font-weight: 700; }
.ta-price { color: var(--green); font-family: var(--mono); font-weight: 600; }
.ta-indicator { color: #b99bf0; font-weight: 600; }
.citation-link { color: var(--cyan); font-size: 11px; text-decoration: none; }
.sources-list { margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); }
.sources-list h4 { margin: 0 0 7px; color: var(--muted); font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .11em; }
.sources-list ol { margin: 0; padding-left: 18px; }
.sources-list li { margin: 5px 0; font-size: 12px; }

/* Unified composer */
.unified-composer {
  position: relative;
  border-top: 1px solid var(--line);
  background: rgba(10,13,16,.86);
  backdrop-filter: blur(16px);
}
.interaction-mode-strip { display: flex; gap: 4px; padding: 8px 10px 0; }
.mode-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 9px 9px 0 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 600 11px/1 var(--mono);
}
.mode-label:hover { color: #fff; background: rgba(255,255,255,.035); }
.mode-label.active { color: #fff; border-color: var(--line); border-bottom-color: rgba(8,10,12,.98); background: rgba(8,10,12,.9); }
.mode-label.active i { color: var(--pink); }
.composer-mode-panel { display: none; padding: 9px 10px 8px; }
.composer-mode-panel.active { display: block; }
.chat-form { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 7px; align-items: center; }
.composer-input-wrap { position: relative; min-width: 0; }
.chat-input, #cryptoInput, #tweetLink {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 0 15px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  outline: 0;
  background: rgba(255,255,255,.055);
  color: var(--text);
  caret-color: var(--pink);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.chat-input::placeholder, #cryptoInput::placeholder { color: #6f767d; }
.chat-input:focus, #cryptoInput:focus, #tweetLink:focus { border-color: rgba(240,50,114,.55); background: rgba(255,255,255,.07); box-shadow: 0 0 0 3px rgba(240,50,114,.08); }
.uploaded-file-name { position: absolute; left: 14px; bottom: -18px; max-width: 80%; overflow: hidden; color: var(--cyan); font: 500 10px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.image-upload-label, .chat-submit, .primary-composer-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  cursor: pointer;
  transition: transform .15s, border-color .15s, background .15s;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.image-upload-label { background: rgba(255,255,255,.04); color: var(--muted); }
.image-upload-label:hover { border-color: rgba(255,255,255,.28); color: #fff; }
.chat-submit, .primary-composer-action { border-color: rgba(240,50,114,.6); background: linear-gradient(135deg, #ec2f6e, #a81749); color: white; }
.chat-submit:hover, .primary-composer-action:hover { transform: translateY(-1px); background: linear-gradient(135deg, #ff3b7d, #bd1f58); }
.chat-submit:disabled, .primary-composer-action:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.composer-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; color: var(--muted-2); font: 500 10px/1 var(--mono); }
.char-counter.near-limit { color: var(--amber); }
.char-counter.at-limit { color: var(--danger); }
.ta-request { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; align-items: end; }
.market-input-wrap label { position: absolute; z-index: 2; top: 7px; left: 14px; color: var(--cyan); font: 600 9px/1 var(--mono); letter-spacing: .1em; }
.market-input-wrap #cryptoInput { height: 54px; padding-top: 12px; }
.intel-composer-state { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); }
.intel-composer-state > div { min-width: 0; display: flex; flex-direction: column; }
.intel-composer-state strong { overflow: hidden; margin-top: 4px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.intel-composer-state small { overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.chat-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; margin-top: 6px; }
.loading-indicator, .connection-status { color: var(--muted); font: 500 10px/1 var(--mono); }
.connection-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.connection-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--locked); }
.connection-status.connected .connection-dot { background: var(--green); box-shadow: 0 0 9px rgba(99,213,160,.7); }
.connection-status.reconnecting .connection-dot { background: var(--amber); }
.connection-status.offline .connection-dot { background: var(--danger); }
.error-message { max-width: none; margin-top: 8px; padding: 10px 12px; border: 1px solid rgba(255,102,111,.25); background: rgba(255,102,111,.1); color: #ffc4c8; font-size: 12px; }

/* --------------------------------------------------------------------------
   Intel feed
   -------------------------------------------------------------------------- */
.daily-intel-report {
  overflow: hidden;
  border: 1px solid rgba(94,216,223,.16);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 0%, rgba(94,216,223,.06), transparent 36%), linear-gradient(180deg, rgba(9,16,19,.74), rgba(8,13,16,.88));
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
#newsList { height: 100%; margin: 0; padding: 0; overflow: auto; list-style: none; }
.intel-feed-heading {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 15px 13px;
  border-bottom: 1px solid rgba(94,216,223,.12);
  background: rgba(9,15,18,.94);
}
.intel-feed-heading h3 { margin: 6px 0 0; color: #e7fdff; font: 700 21px/1 var(--display); letter-spacing: .07em; }
.intel-feed-heading small { max-width: 96px; color: var(--muted); font: 500 9px/1.45 var(--mono); text-align: right; }
.intel-item {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.intel-item:hover { background: rgba(94,216,223,.055); }
.intel-item.selected { border-left: 2px solid var(--cyan); background: rgba(94,216,223,.08); }
.intel-item-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted-2); font: 500 9px/1 var(--mono); text-transform: uppercase; }
.intel-timestamp { color: var(--gold); }
.intel-item-title { margin-top: 8px; color: #e2e9ed; font-size: 13px; line-height: 1.45; }
.intel-action { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; color: var(--cyan); font: 600 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

/* --------------------------------------------------------------------------
   Navigation rail
   -------------------------------------------------------------------------- */
.brenda-nav {
  z-index: 25;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 1fr);
  gap: 6px;
  width: min(900px, calc(100vw - 36px));
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(7,9,11,.88);
  box-shadow: 0 12px 42px rgba(0,0,0,.34);
  backdrop-filter: blur(20px);
}
.brenda-nav-button {
  position: relative;
  display: grid;
  grid-template-columns: 31px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  height: 58px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .16s, border-color .16s, transform .16s;
}
.brenda-nav-button:hover { border-color: var(--line); background: rgba(255,255,255,.055); transform: translateY(-1px); }
.brenda-nav-button.active { border-color: rgba(240,50,114,.34); background: var(--pink-soft); }
.brenda-nav-button.active .nav-copy strong { color: #fff; }
.nav-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: rgba(255,255,255,.06); }
.nav-icon img { width: 19px; height: 19px; object-fit: contain; filter: grayscale(.1); }
.nav-copy { min-width: 0; display: flex; flex-direction: column; }
.nav-copy strong { font-size: 13px; line-height: 1.15; }
.nav-copy small { margin-top: 5px; overflow: hidden; color: var(--muted); font: 500 9px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.nav-badge { position: absolute; top: 6px; right: 7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--pink); color: #fff; font: 600 9px/19px var(--mono); text-align: center; }
.nav-badge:empty { display: none; }

/* --------------------------------------------------------------------------
   Shared overlay framework
   -------------------------------------------------------------------------- */
body.modal-open { overflow: hidden; }
.outfit-menu, .shop-overlay, .missions-overlay, .inventory-display {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  padding: clamp(12px, 2vw, 28px);
  background: rgba(4,7,9,.66);
  backdrop-filter: blur(18px) saturate(.7);
}
.outfit-menu.active, .shop-overlay.active, .missions-overlay.active, .inventory-display.active { display: flex; }
.panel-kicker { display: block; }
.panel-close, .close-shop, .close-missions {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  color: var(--muted);
  cursor: pointer;
  font: 300 24px/1 var(--sans);
  transition: background .16s, color .16s, transform .16s;
}
.panel-close:hover, .close-shop:hover, .close-missions:hover { background: rgba(255,102,111,.12); color: #fff; transform: rotate(8deg); }
.primary-action, .secondary-action, .claim-button, .tweet-button, .submit-tweet-button, .payment-button, .copy-hash-button {
  min-height: 39px;
  padding: 0 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.primary-action, .claim-button, .tweet-button, .submit-tweet-button { border: 1px solid rgba(240,50,114,.55); background: linear-gradient(135deg, #e92e6b, #a81749); color: #fff; }
.secondary-action { border: 1px solid var(--line-strong); background: rgba(255,255,255,.045); color: var(--text); }
.primary-action:disabled, .secondary-action:disabled, .claim-button:disabled, .tweet-button:disabled, .submit-tweet-button:disabled { opacity: .42; cursor: not-allowed; }

/* --------------------------------------------------------------------------
   Wardrobe
   -------------------------------------------------------------------------- */
.wardrobe-shell {
  width: min(1260px, 100%);
  height: min(850px, 100%);
  margin: auto;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  border: 1px solid var(--line-strong);
  border-radius: 25px;
  background: rgba(8,10,13,.96);
  box-shadow: var(--shadow-hard);
}
.wardrobe-header, .panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.wardrobe-header h2, .panel-header h2, .shop-panel-heading h2 { margin: 5px 0 4px; font: 700 clamp(22px,2vw,32px)/1 var(--display); letter-spacing: .02em; }
.wardrobe-header p, .panel-header p, .shop-panel-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.wardrobe-layout { min-height: 0; display: grid; grid-template-columns: minmax(300px, 37%) minmax(0,1fr); }
.wardrobe-catalog { min-height: 0; padding: 16px; overflow: hidden; border-right: 1px solid var(--line); }
.wardrobe-catalog-header { display: flex; justify-content: space-between; padding: 0 4px 12px; color: var(--muted); font: 500 11px/1 var(--mono); }
.outfit-grid { max-height: calc(100% - 30px); overflow: auto; display: grid; gap: 7px; padding-right: 4px; }
.outfit-option {
  display: grid;
  grid-template-columns: 58px minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 68px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.026);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .16s, border-color .16s, transform .16s;
}
.outfit-option:hover { transform: translateX(2px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.055); }
.outfit-option.previewing { border-color: rgba(240,50,114,.55); background: var(--pink-soft); }
.outfit-option.locked { opacity: .7; }
.outfit-card-image { grid-column:1; grid-row:1 / 3; width: 58px; height: 54px; overflow: hidden; border-radius: 9px; background: #131519; }
.outfit-card-image img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.outfit-card-copy { grid-column:2; grid-row:1; min-width: 0; display: flex; flex-direction: column; }
.outfit-card-copy strong { font-size: 13px; }
.outfit-card-copy small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.outfit-card-state { grid-column:3; grid-row:1; padding: 5px 7px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted); font: 600 9px/1 var(--mono); }
.outfit-option.available .outfit-card-state { color: var(--green); background: var(--green-soft); }
.outfit-option.current .outfit-card-state { color: var(--pink); background: var(--pink-soft); }
.outfit-card-req { grid-column:2 / 4; grid-row:2; margin-top: 6px; color: var(--muted-2); font: 500 10px/1.35 var(--mono); }

.outfit-detail { min-height: 0; display: grid; grid-template-columns: minmax(280px, 43%) minmax(0,1fr); }
.outfit-preview-stage { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(240,50,114,.055)), radial-gradient(circle at 50% 70%, rgba(240,50,114,.14), transparent 38%); }
.outfit-preview-stage::after { content:''; position:absolute; inset:0; box-shadow: inset 0 0 60px rgba(0,0,0,.28); pointer-events:none; }
.outfit-preview-stage img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 22px 28px rgba(0,0,0,.38)); }
.outfit-preview-status { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 999px; background: rgba(10,13,16,.8); font: 600 10px/1 var(--mono); letter-spacing: .07em; }
.outfit-detail-copy { overflow: auto; padding: clamp(20px, 2.5vw, 38px); }
.outfit-detail-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.outfit-category { color: var(--muted); font: 600 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; }
.outfit-detail-heading h3 { margin: 6px 0 0; font: 700 clamp(25px,2.8vw,45px)/.95 var(--display); }
.state-pill { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 600 10px/1 var(--mono); }
.state-pill.state-current { border-color: rgba(240,50,114,.3); background: var(--pink-soft); color: #ffb1ca; }
.state-pill.state-available { border-color: rgba(99,213,160,.3); background: var(--green-soft); color: #a9e8cc; }
.state-pill.state-locked { color: #a1a8ae; }
.brenda-flavor { margin: 24px 0 13px; padding: 0 0 0 17px; border-left: 2px solid var(--pink); color: #f3e4e9; font: 500 clamp(14px,1.25vw,18px)/1.55 var(--sans); }
.outfit-effect { color: var(--muted); font-size: 13px; }
.outfit-requirement-panel { margin-top: 22px; }
.outfit-requirement-list { margin-top: 8px; display: grid; gap: 6px; }
.requirement-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 40px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.026); }
.requirement-row.met { border-color: rgba(99,213,160,.16); }
.requirement-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--locked); font-size: 10px; }
.requirement-row.met .requirement-icon { background: var(--green-soft); color: var(--green); }
.requirement-type { color: var(--muted); font-size: 12px; }
.requirement-value { font: 600 10px/1 var(--mono); text-align: right; }
.outfit-missing-summary { margin-top: 12px; color: var(--amber); font-size: 12px; }
.outfit-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* --------------------------------------------------------------------------
   Boutique
   -------------------------------------------------------------------------- */
.shop-content {
  position: relative;
  isolation: isolate;
  width: min(1480px, 100%);
  height: min(900px, 100%);
  margin: auto;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  background: #0b090a;
  box-shadow: var(--shadow-hard);
}
.shop-content::before { content:''; position:absolute; inset:0; z-index:-2; background:url('images/shop.jpg') center/cover no-repeat; filter:saturate(.85) brightness(.56); transform:scale(1.01); }
.shop-content::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(5,6,7,.24) 0%, rgba(5,6,7,.44) 26%, rgba(5,6,7,.72) 52%, rgba(5,6,7,.88) 100%), linear-gradient(180deg,rgba(5,6,7,.16),rgba(5,6,7,.54)); }
.shop-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:20px 22px; border-bottom:1px solid var(--line); background:rgba(5,6,7,.52); backdrop-filter:blur(12px); }
.shop-scene { min-height:0; display:grid; grid-template-columns:minmax(290px,30%) minmax(0,1fr); }
.seller-container { position:relative; min-height:0; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; padding:22px 20px 0; border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(7,10,12,.2),rgba(7,10,12,.5)); }
#sellerImage { width:min(92%, 350px); max-height:82%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 26px 28px rgba(0,0,0,.46)); cursor:pointer; }
.seller-message { position:absolute; z-index:2; top:20px; left:18px; right:18px; padding:15px 16px; border:1px solid rgba(255,255,255,.17); border-radius:14px; background:rgba(10,12,14,.8); backdrop-filter:blur(10px); color:#f4eced; font-size:14px; line-height:1.55; box-shadow:0 18px 42px rgba(0,0,0,.18); }
.shop-products { min-height:0; padding:16px; overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr); gap:14px; background:rgba(4,5,6,.24); }
.pending-orders { border:1px solid rgba(243,190,75,.18); border-radius:14px; background:rgba(243,190,75,.06); color:#dccb9f; overflow:hidden; }
.pending-orders summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; cursor:pointer; }
.pending-orders summary::-webkit-details-marker { display:none; }
.pending-orders-title { display:flex; align-items:center; gap:10px; font:700 13px/1 var(--mono); letter-spacing:.04em; text-transform:uppercase; }
.pending-orders-count { display:inline-grid; place-items:center; min-width:24px; height:24px; padding:0 8px; border-radius:999px; background:rgba(243,190,75,.16); color:var(--gold); }
.pending-orders-hint { color:#e6d3a4; font-size:13px; }
.pending-orders-list { display:grid; gap:10px; padding:0 16px 16px; }
.pending-order-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(12,14,16,.36); }
.pending-order-copy { display:grid; gap:5px; min-width:0; }
.pending-order-copy strong { font-size:14px; }
.pending-order-copy span { color:var(--muted); font-size:13px; line-height:1.4; }
.pending-order-button { min-height:38px; padding:0 14px; border:1px solid rgba(243,190,75,.26); border-radius:10px; background:rgba(243,190,75,.08); color:#f3d58d; font:700 12px/1 var(--mono); cursor:pointer; white-space:nowrap; }
.pending-order-button:disabled { opacity:.45; cursor:not-allowed; }
.shop-workbench { min-height:0; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(320px,.88fr); gap:15px; }
.shop-catalogue { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); gap:12px; overflow:hidden; }
.shop-catalogue-note { padding:12px 14px; border:1px solid rgba(94,216,223,.12); border-radius:12px; background:rgba(94,216,223,.06); color:#cceff2; font-size:13px; line-height:1.45; }
.item-list { overflow:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-content:start; padding-right:4px; }
.shop-item { position:relative; display:grid; grid-template-rows:150px auto auto; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,rgba(17,19,23,.82),rgba(9,11,14,.94)); transition:transform .16s,border-color .16s,background .16s, box-shadow .16s; }
.shop-item:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.22); background:linear-gradient(180deg,rgba(22,24,29,.92),rgba(11,14,18,.98)); }
.shop-item.selected, .shop-item.highlighted, .shop-item.shop-target { border-color:rgba(243,190,75,.7); box-shadow:0 0 0 3px rgba(243,190,75,.08), 0 0 28px rgba(243,190,75,.12); }
.shop-item:focus-visible { outline:2px solid rgba(94,216,223,.7); outline-offset:2px; }
.shop-item-visual { position:relative; display:grid; place-items:center; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015)); }
.shop-item-image { width:128px; height:128px; object-fit:contain; border-radius:12px; }
.owned-badge { position:absolute; top:9px; left:9px; padding:6px 9px; border-radius:999px; background:rgba(99,213,160,.92); color:#08100c; font:700 10px/1 var(--mono); }
.shop-item-copy { padding:14px 14px 10px; }
.shop-item h3 { margin:0; font-size:17px; line-height:1.18; }
.shop-item-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.shop-benefit { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; background:rgba(255,255,255,.04); color:#ff91b4; font:700 11px/1.2 var(--mono); }
.shop-benefit.unlock { color:#d8dfe5; }
.shop-item-note { margin:12px 0 0; color:var(--muted); font-size:13px; line-height:1.5; min-height:58px; }
.shop-item-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 14px 14px; margin-top:auto; }
.shop-price { font:700 13px/1 var(--mono); color:#fff; }
.buy-button { min-height:42px; padding:0 14px; border:1px solid rgba(240,50,114,.48); border-radius:10px; background:var(--pink-soft); color:#ff9cbb; cursor:pointer; font-size:13px; font-weight:700; }
.buy-button:hover { background:rgba(240,50,114,.27); color:white; }
.buy-button:disabled { opacity:.45; cursor:not-allowed; }
.shop-focus { min-height:0; }
.shop-focus-card { height:100%; display:grid; grid-template-rows:auto 220px auto; gap:14px; padding:16px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,rgba(13,15,18,.78),rgba(8,10,13,.95)); }
.shop-focus-visual { display:grid; place-items:center; border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015)); overflow:hidden; }
.shop-focus-visual img { width:min(220px,80%); max-height:190px; object-fit:contain; }
.shop-focus-copy h3 { margin:0; font:700 28px/1.05 var(--display); }
.shop-focus-note { margin:10px 0 0; color:#f2d8e1; font-size:15px; line-height:1.6; }
.shop-focus-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.shop-focus-stat { display:grid; gap:6px; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); }
.shop-focus-stat-label { color:var(--muted); font:700 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.shop-focus-stat strong { font-size:16px; }
.shop-focus-owned { margin-top:14px; padding:11px 12px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03); color:#dfe5ea; font-size:13px; line-height:1.5; }
.shop-focus-owned.is-owned { border-color:rgba(99,213,160,.22); background:rgba(99,213,160,.07); color:#cbf1df; }
.shop-focus-unlocks-block { margin-top:14px; }
.shop-focus-unlocks-block h4 { margin:0 0 10px; font-size:14px; }
.shop-focus-unlock-list { margin:0; padding-left:18px; color:#e6ecf0; font-size:14px; line-height:1.6; }
.shop-focus-empty-list { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.shop-focus-buy { width:100%; margin-top:18px; min-height:46px; font-size:14px; }
.shop-focus-empty { height:100%; display:grid; place-items:center; padding:20px; border:1px dashed var(--line-strong); border-radius:18px; color:var(--muted); text-align:center; }
.shop-loading { grid-column:1/-1; display:grid; place-items:center; min-height:180px; color:var(--muted); }
.shop-loading-spinner { width:22px; height:22px; margin-bottom:8px; border:2px solid var(--line); border-top-color:var(--pink); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }


/* --------------------------------------------------------------------------
   Missions
   -------------------------------------------------------------------------- */
.missions-content {
  width:min(920px,100%);
  height:min(820px,100%);
  margin:auto;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  border:1px solid var(--line-strong);
  border-radius:24px;
  background:rgba(8,10,13,.97);
  box-shadow:var(--shadow-hard);
}
.missions-list { overflow:auto; padding:14px; }
.mission-item { margin-bottom:8px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }
.mission-item.mission-state-claimable { border-color:rgba(99,213,160,.28); background:linear-gradient(90deg,rgba(99,213,160,.07),rgba(255,255,255,.02)); }
.mission-item.mission-state-completed { opacity:.62; }
.mission-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px; cursor:pointer; }
.mission-title-group { display:flex; align-items:center; gap:11px; }
.mission-icon { display:grid; place-items:center; width:29px; color:var(--cyan); font-size:14px; }
.mission-header h3 { margin:0; font-size:14px; }
.mission-state-label { display:block; margin-top:5px; color:var(--muted); font:600 9px/1 var(--mono); letter-spacing:.07em; }
.mission-state-claimable .mission-state-label { color:var(--green); }
.mission-toggle-icon { color:var(--muted); font-size:11px; transition:transform .2s; }
.mission-item.active .mission-toggle-icon { transform:rotate(180deg); }
.mission-body { max-height:0; overflow:hidden; padding:0 14px; border-top:1px solid transparent; background:rgba(0,0,0,.15); transition:max-height .28s ease,padding .28s ease,border-color .28s; }
.mission-item.active .mission-body { max-height:600px; padding:13px 14px 15px; border-color:var(--line); }
.mission-body p { margin:0 0 11px; color:var(--muted); font-size:12px; line-height:1.45; }
.mission-body strong { color:#fff; }
.mission-body .completed { color:var(--green); }
.streak-visualizer, .outfit-visualizer { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
.streak-day, .outfit-milestone { display:grid; place-items:center; width:29px; height:29px; border:1px dashed var(--line-strong); border-radius:50%; background:rgba(255,255,255,.025); }
.outfit-milestone { border-radius:8px; }
.streak-day.completed, .outfit-milestone.completed { border-style:solid; border-color:rgba(99,213,160,.35); background:var(--green-soft); }
.streak-day.completed::after { content:'✓'; color:var(--green); font-size:12px; }
.outfit-milestone.completed::after { content:'◆'; color:var(--green); font-size:10px; }
.milestone-progress { height:26px; margin:10px 0; overflow:hidden; border-radius:8px; background:rgba(255,255,255,.045); }
.milestone-progress-bar { height:100%; min-width:34px; display:flex; align-items:center; justify-content:flex-end; padding-right:8px; border-radius:inherit; background:linear-gradient(90deg,#2b868c,var(--cyan)); }
.milestone-progress-text { color:#041012; font:700 9px/1 var(--mono); }
#tweetLink { margin:8px 0; }
.tweet-button, .submit-tweet-button, .claim-button { margin-right:6px; }
.missions-footer { padding:11px 16px; border-top:1px solid var(--line); color:var(--muted); text-align:right; }
.missions-footer p { margin:0; font:500 11px/1 var(--mono); }
.missions-footer span { color:var(--gold); font-weight:700; }

/* --------------------------------------------------------------------------
   Inventory
   -------------------------------------------------------------------------- */
.inventory-display { align-items:center; justify-content:center; }
.inventory-display > .inventory-header,
.inventory-display > .inventory-grid { width:min(1050px,100%); }
.inventory-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:19px 20px; border:1px solid var(--line-strong); border-bottom:0; border-radius:22px 22px 0 0; background:rgba(8,10,13,.98); }
.inventory-header h3 { margin:5px 0 4px; font:700 25px/1 var(--display); }
.inventory-header p { margin:0; color:var(--muted); font-size:12px; }
.inventory-grid { max-height:min(620px,70vh); overflow:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; padding:14px; border:1px solid var(--line-strong); border-radius:0 0 22px 22px; background:rgba(8,10,13,.98); box-shadow:var(--shadow-hard); }
.inventory-item { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.028); }
.inventory-item-visual { position:relative; height:120px; display:grid; place-items:center; background:linear-gradient(180deg,rgba(255,255,255,.04),transparent); }
.inventory-item-visual img { width:92px; height:92px; object-fit:contain; }
.inventory-item .owned-badge { left:auto; right:8px; }
.item-details { padding:11px; }
.item-name { margin:0; font-size:14px; }
.item-love { margin:7px 0 0; color:#ff91b4; font:600 10px/1 var(--mono); }
.inventory-unlock-list { margin:9px 0 0; color:var(--muted); font-size:11px; line-height:1.4; }
.receipt-details { margin-top:10px; padding-top:8px; border-top:1px solid var(--line); }
.receipt-details summary { color:var(--muted); cursor:pointer; font:600 10px/1 var(--mono); }
.inventory-receipt-row { display:grid; grid-template-columns:88px minmax(0,1fr); gap:8px; margin-top:8px; color:var(--muted); font-size:10px; }
.inventory-receipt-row strong, .inventory-receipt-row a { overflow:hidden; color:#e3e8eb; font-family:var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.copy-hash-button { margin-top:8px; min-height:30px; border:1px solid var(--line); background:rgba(255,255,255,.035); color:var(--muted); }
.inventory-empty-state { grid-column:1/-1; min-height:200px; display:grid; place-items:center; color:var(--muted); text-align:center; }

/* --------------------------------------------------------------------------
   Payment + success modals
   -------------------------------------------------------------------------- */
.qr-modal, .purchase-success-modal {
  position:fixed;
  inset:0;
  z-index:500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(2,4,6,.82);
  backdrop-filter:blur(18px);
}
.qr-content, .purchase-success-content {
  position:relative;
  width:min(760px,100%);
  max-height:90dvh;
  overflow:auto;
  padding:24px;
  border:1px solid var(--line-strong);
  border-radius:24px;
  background:rgba(8,10,13,.98);
  box-shadow:var(--shadow-hard);
  text-align:left;
}
.qr-content h2 { margin:0 0 8px; font:700 31px/1 var(--display); text-align:center; }
.payment-layout { display:grid; grid-template-columns:minmax(220px,260px) minmax(0,1fr); gap:18px; margin-top:18px; }
.payment-qr-column { display:grid; gap:14px; align-content:start; }
.qr-content > img, .payment-qr-column > img { width:min(240px,100%); margin:0 auto; padding:10px; border-radius:14px; background:white; }
.payment-info-column { display:grid; gap:14px; align-content:start; }
.close-qr-button { position:absolute; top:12px; right:12px; display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; font-size:20px; }
.payment-instruction { color:var(--muted); font-size:14px; line-height:1.5; text-align:center; }
.exact-amount-row { padding:13px 14px; border:1px solid rgba(243,190,75,.2); border-radius:13px; background:var(--gold-soft); }
.payment-amount-card { display:grid; gap:7px; text-align:left; }
.payment-amount-card strong, .payment-value { color:var(--gold); font:700 18px/1.2 var(--mono); }
.payment-copy-inline { justify-self:start; }
.payment-status { margin:0; padding:12px; border:1px solid var(--line); border-radius:12px; text-align:left; }
.payment-status-title { font-size:14px; font-weight:700; }
.payment-status-message { margin-top:5px; color:var(--muted); font-size:12px; line-height:1.45; }
.payment-actions { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:10px; }
.payment-button { border:1px solid rgba(94,216,223,.3); background:var(--cyan-soft); color:#b9f0f3; }
.payment-button:disabled { opacity:.4; cursor:not-allowed; }
.payment-details { margin-top:0; padding:14px; border-radius:13px; background:rgba(255,255,255,.028); text-align:left; }
.payment-details h3 { margin:0 0 10px; font-size:18px; }
.payment-detail-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:12px 0; border-bottom:1px solid var(--line); align-items:start; }
.payment-detail-row:last-child { border-bottom:0; }
.payment-detail-copy { display:grid; gap:6px; min-width:0; }
.payment-detail-copy strong { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.transaction-value { overflow-wrap:anywhere; color:#e6eaed; font-family:var(--mono); font-size:12px; line-height:1.45; }
.copy-payment-button { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.03); color:var(--cyan); cursor:pointer; font-size:11px; font-weight:700; }
#paymentWarnings { color:#ffc0c4; font-size:12px; }
.purchase-success-modal { opacity:0; transition:opacity .22s; }
.purchase-success-modal.visible { opacity:1; }
.brenda-reaction-quote { padding-left:13px; border-left:2px solid var(--pink); color:#f4e3e9; font-style:italic; text-align:left; }
.rewards-summary { margin-top:13px; padding:13px; border:1px solid rgba(99,213,160,.2); border-radius:12px; background:var(--green-soft); }
.reward-item { color:#bdebd7; }


/* --------------------------------------------------------------------------
   Toasts, transition remnants, footer
   -------------------------------------------------------------------------- */
.app-toast-container { position:fixed; z-index:1000; right:16px; bottom:94px; display:grid; gap:7px; pointer-events:none; }
.app-toast { max-width:400px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:11px; background:rgba(12,16,20,.97); color:#e7ecef; box-shadow:var(--shadow); opacity:0; transform:translateY(8px); transition:.2s; font-size:12px; }
.app-toast.visible { opacity:1; transform:translateY(0); }
.app-toast.success { border-color:rgba(99,213,160,.28); }
.app-toast.error { border-color:rgba(255,102,111,.3); }
.fade-overlay, .transition-message { display:none !important; }
.footer { display:flex; align-items:center; justify-content:flex-end; gap:13px; padding:0 clamp(16px,1.45vw,30px); color:var(--muted-2); font:500 9px/1 var(--mono); }
.privacy-unavailable { opacity:.7; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.16); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.26); }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .brenda-app { grid-template-rows: 70px minmax(0,1fr) 72px 24px; }
  .app-header { grid-template-columns: minmax(160px,.7fr) minmax(330px,1.3fr) minmax(150px,.7fr); }
  .progression-next { display:none; }
  .experience-grid {
    grid-template-columns: minmax(210px, 31vw) minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) 155px;
  }
  .character-zone { grid-row:1 / 3; }
  .conversation-zone { grid-column:2; grid-row:1; }
  .daily-intel-report { grid-column:2; grid-row:2; border-radius:17px; }
  #newsList { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .intel-feed-heading { grid-column:1/-1; padding:9px 11px; }
  .intel-item { min-width:0; border-right:1px solid rgba(255,255,255,.055); }
  .intel-item:nth-of-type(n+4) { display:none; }
  .shop-scene { grid-template-columns:minmax(240px,28%) minmax(0,1fr); }
  .shop-workbench { grid-template-columns:minmax(0,1fr) minmax(290px,.9fr); }
  .item-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inventory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* --------------------------------------------------------------------------
   Mobile / narrow tablet: adapt, don't miniaturize the desktop.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body { overflow:auto; }
  .brenda-app { min-height:100dvh; height:auto; grid-template-rows:auto auto auto auto; overflow:visible; padding-bottom:72px; }
  .scene-layer { position:fixed; background-position:58% center; opacity:.24; }
  .scene-vignette { position:fixed; }
  .app-header {
    position:sticky;
    top:0;
    z-index:80;
    grid-template-columns:1fr auto;
    gap:8px;
    min-height:58px;
    padding:8px 10px;
  }
  .brand-mark { width:32px; height:32px; font-size:18px; }
  .brand-copy strong { font-size:16px; }
  .brand-copy small { display:none; }
  .progression-hud { grid-column:1/-1; grid-row:2; grid-template-columns:1fr 1fr; width:100%; }
  .progression-meter { padding:6px 8px; }
  .user-info-display { grid-column:2; grid-row:1; }
  .account-summary { min-width:0; grid-template-columns:30px 12px; padding:3px; }
  .user-avatar { width:30px; height:30px; }
  .account-copy { display:none; }
  .account-popover { position:fixed; top:58px; right:9px; width:min(300px,calc(100vw - 18px)); }

  .experience-grid { display:flex; flex-direction:column; gap:10px; padding:10px; }
  .character-zone { height:36vh; min-height:260px; }
  .character-stage { border-radius:18px; }
  .brenda-character { inset:0 4% -3%; }
  .character-caption { bottom:9px; left:9px; right:9px; }
  .conversation-zone { min-height:68vh; border-radius:18px; }
  .chat-container { min-height:68vh; }
  .conversation-header { align-items:flex-start; padding:9px 10px; }
  .brenda-context-strip { flex-wrap:wrap; }
  .context-chip.thoughts { display:none; }
  .chat-interface { min-height:340px; padding:14px 11px; }
  .user-message, .ai-message { max-width:92%; }
  .interaction-mode-strip { overflow:auto; }
  .mode-label { flex:1; min-width:max-content; justify-content:center; }
  .chat-form { grid-template-columns:minmax(0,1fr) 43px auto; }
  .image-upload-label { width:43px; padding:0; grid-column:2; grid-row:1; }
  .image-upload-label span { display:none; }
  .chat-submit { grid-column:3; grid-row:1; }
  .composer-meta { font-size:9px; }
  .intel-composer-state { grid-template-columns:1fr; }
  .intel-composer-state .primary-composer-action { width:100%; }
  .daily-intel-report { min-height:260px; border-radius:18px; }
  #newsList { display:block; }
  .intel-item:nth-of-type(n+4) { display:block; }

  .brenda-nav {
    position:fixed;
    left:8px; right:8px; bottom:8px;
    z-index:250;
    width:auto;
    grid-auto-columns:1fr;
    gap:3px;
    padding:5px;
    border-radius:15px;
  }
  .brenda-nav-button { grid-template-columns:1fr; height:53px; padding:4px; text-align:center; }
  .nav-icon { margin:auto; width:29px; height:29px; }
  .nav-copy strong { font-size:11px; }
  .nav-copy small { display:none; }
  .nav-badge { top:3px; right:calc(50% - 22px); }
  .footer { padding:4px 10px 84px; justify-content:center; }

  .outfit-menu, .shop-overlay, .missions-overlay, .inventory-display { padding:0; align-items:stretch; background:#06080a; }
  .wardrobe-shell, .shop-content, .missions-content { width:100%; height:100dvh; max-height:none; border:0; border-radius:0; }
  .wardrobe-header, .panel-header, .shop-panel-heading { padding:15px; }
  .wardrobe-layout { display:flex; flex-direction:column; overflow:auto; }
  .wardrobe-catalog { flex:none; max-height:42dvh; border-right:0; border-bottom:1px solid var(--line); }
  .outfit-grid { max-height:calc(42dvh - 36px); }
  .outfit-detail { min-height:58dvh; grid-template-columns:42% 58%; }
  .outfit-detail-copy { padding:16px 13px; }
  .brenda-flavor { margin-top:14px; font-size:14px; }
  .requirement-row { grid-template-columns:22px minmax(0,1fr); }
  .requirement-value { grid-column:2; text-align:left; }
  .shop-scene { display:flex; flex-direction:column; overflow:auto; }
  .shop-workbench { grid-template-columns:1fr; }
  .shop-focus-card { grid-template-rows:auto 180px auto; }
  .payment-layout { grid-template-columns:1fr; }
  .seller-container { flex:none; min-height:240px; border-bottom:1px solid var(--line); }
  #sellerImage { width:60%; height:90%; left:-2%; }
  .seller-message { left:42%; top:20px; }
  .shop-products { overflow:visible; border-left:0; }
  .item-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop-item { grid-template-rows:110px auto auto; }
  .seller-message { position:static; margin-bottom:12px; }
  #sellerImage { max-height:280px; }
  .shop-products { padding:14px; }
  .shop-focus-copy h3 { font-size:24px; }
  .inventory-display { overflow:auto; }
  .inventory-display > .inventory-header, .inventory-display > .inventory-grid { width:100%; }
  .inventory-header { border-radius:0; border:0; border-bottom:1px solid var(--line); }
  .inventory-grid { max-height:none; grid-template-columns:1fr; border:0; border-radius:0; box-shadow:none; }
  .qr-content, .purchase-success-content { max-height:94dvh; }
}

@media (max-width: 460px) {
  .progression-meter-main > i { display:none; }
  .progression-meter-label strong { font-size:11px; }
  .outfit-detail { display:flex; flex-direction:column; }
  .outfit-preview-stage { min-height:42dvh; }
  .item-list { grid-template-columns:1fr; }
  .pending-orders summary { flex-direction:column; align-items:flex-start; }
  .pending-order-row { flex-direction:column; align-items:flex-start; }
  .payment-detail-row { grid-template-columns:1fr; }
  .buy-button, .pending-order-button, .copy-payment-button { width:100%; }
  .payment-actions { flex-direction:column; }
  .seller-container { min-height:210px; }
  .seller-message { left:36%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}


/* --------------------------------------------------------------------------
   Brenda UI 2.2.1 — readability + layout polish
   -------------------------------------------------------------------------- */
body { font-size: clamp(16px, .92vw, 19px); }
.brand-copy small { font-size: 12px; }
.progression-meter-label span { font-size: 12px; }
.progression-meter-label strong { font-size: 14px; }
.progression-next {
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.brenda-context-identity strong { font-size: 13px; }
.brenda-context-identity small { font-size: 11px; }
.brenda-context-strip { gap: 7px; flex-wrap: wrap; }
.context-chip {
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  height: auto;
  padding: 6px 12px;
  font-size: 11px;
  line-height: 1.15;
}
.context-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-chip.thoughts { max-width: 190px; }
.chat-interface { padding: clamp(24px, 2.6vw, 42px); }
.user-message, .ai-message, .error-message { font-size: clamp(16px, .98vw, 19px); }
.empty-kicker, .composer-kicker, .panel-kicker, .section-label { font-size: 11px; }
.composer-topbar label, .composer-topbar small, .market-chart-caption, .intel-composer-state small { font-size: 12px; }
.intel-feed-heading small { max-width: 120px; font-size: 10px; }
.intel-item-meta { font-size: 10px; }
.intel-item-title { font-size: 14px; line-height: 1.5; }
.intel-action { font-size: 10px; }
.nav-copy strong { font-size: 14px; }
.nav-copy small { font-size: 10px; line-height: 1.25; }
.inventory-display {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: clamp(18px, 4vh, 34px) clamp(16px, 2vw, 26px);
}
.inventory-display > .inventory-header,
.inventory-display > .inventory-grid { width: min(1160px, 100%); }
.inventory-header { padding: 22px 24px; }
.inventory-header h3 { font-size: 28px; }
.inventory-header p { font-size: 14px; line-height: 1.45; }
.inventory-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  padding: 18px;
}
.item-name { font-size: 16px; line-height: 1.25; }
.item-love { font-size: 11px; line-height: 1.35; }
.inventory-unlock-list { font-size: 12px; line-height: 1.5; }
.receipt-details summary { font-size: 11px; }
.inventory-receipt-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.inventory-receipt-row > span:first-child { flex: 0 0 auto; min-width: 48px; }
.inventory-receipt-row > span:nth-child(2) {
  flex: 1 1 150px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inventory-receipt-row a,
.inventory-receipt-row .copy-hash-button { flex: 0 0 auto; }
.copy-hash-button { margin-top: 0; padding-inline: 10px; }
.inventory-empty-state { padding: 40px 16px; gap: 10px; }

@media (max-width: 1420px) {
  .app-header { grid-template-columns: minmax(190px, 1fr) minmax(360px, 700px) minmax(190px, 1fr); }
  .brenda-context-strip { justify-content: flex-start; }
}

@media (max-width: 1180px) {
  .conversation-header { align-items: flex-start; }
  .context-chip.thoughts { max-width: 170px; }
}

@media (max-width: 860px) {
  .progression-next { -webkit-line-clamp: 3; }
  .inventory-grid { grid-template-columns: 1fr; }
}