* {
  margin: 0; padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg:       #080808;
  --surface:  #111111;
  --surface2: #181818;
  --surface3: #1f1f1f;
  --accent:   #D4698A;
  --accent2:  #9B5CE8;
  --grad:      linear-gradient(135deg, #D4698A 0%, #9B5CE8 100%);
  --grad-glow: linear-gradient(135deg, rgba(212,105,138,0.18) 0%, rgba(155,92,232,0.18) 100%);
  --text:  #f2f2f2;
  --text2: #999999;
  --dim:   #555555;
  --muted: #2e2e2e;
  --border:    rgba(255,255,255,0.07);
  --border-hi: rgba(255,255,255,0.14);
  --r:  18px;
  --rs: 14px;
  --rx: 10px;
  --font:      -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
}

html, body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-size: 14px;
  line-height: 1.5;
}

html, body { overscroll-behavior-y: contain; }
body { padding-bottom: 0; }
#app {
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
}
/* Prevent rubber-band pull inside overlays (fixes purple pull-to-refresh artifact in Telegram) */
.overlay-page, .hab-app, .nut-app, .fin-app { overscroll-behavior: contain; }

/* ══════════════════════════════════════════
   USER CARD
══════════════════════════════════════════ */
.user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  margin: 14px 14px 12px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Gradient top line */
.user-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
}

.user-card__top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 18px 16px;
}

.user-card__avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--grad);
  box-shadow: 0 4px 20px rgba(212,105,138,0.35);
}
.user-card__avatar span {
  font-size: 24px; font-weight: 800; color: #fff;
  font-family: var(--font);
}

.user-card__name {
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.3px; color: var(--text);
}
.user-card__id {
  font-size: 11px; color: var(--dim); margin-top: 2px;
  font-family: var(--font-mono);
}

.user-card__balance {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  padding: 14px 18px;
  border-radius: 0 0 22px 22px;
}
.user-card__balance-left { display: flex; flex-direction: column; }

.balance-label {
  font-size: 10px; color: var(--dim);
  text-transform: uppercase; letter-spacing: 0.8px; font-weight: 600;
}
.balance-amount {
  display: flex; align-items: baseline; gap: 5px; margin-top: 3px;
}
.balance-num {
  font-size: 28px; font-weight: 800;
  font-family: var(--font-mono);
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sp-coin {
  font-size: 15px; font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

.btn-buy {
  background: var(--grad);
  color: #fff; border: none;
  border-radius: 50px;
  padding: 11px 24px;
  font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  box-shadow: 0 4px 18px rgba(212,105,138,0.4);
  white-space: nowrap;
}
.btn-buy:active { transform: scale(0.95); opacity: 0.85; }

/* ══════════════════════════════════════════
   SECTION TITLE
══════════════════════════════════════════ */
.section-title {
  font-size: 26px; font-weight: 800;
  padding: 18px 16px 12px;
  letter-spacing: -0.6px; color: var(--text);
}

/* ══════════════════════════════════════════
   SUB TABS
══════════════════════════════════════════ */
.sub-tabs {
  display: flex; gap: 6px;
  padding: 0 14px 14px;
  overflow-x: auto; scrollbar-width: none;
}
.sub-tabs::-webkit-scrollbar { display: none; }
.sub-tabs--4 .sub-tab { flex: 1; min-width: 0; }

.sub-tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  color: var(--dim);
  font-family: var(--font); font-size: 9px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  word-break: break-word;
}
.sub-tab.active {
  background: var(--grad-glow);
  border-color: rgba(212,105,138,0.45);
  color: var(--accent);
}
.sub-tab__icon { font-size: 17px; display: flex; align-items: center; justify-content: center; }
.sub-tab__icon svg { width: 18px; height: 18px; stroke-width: 2; }

/* ══════════════════════════════════════════
   TAB & SUB CONTENT
══════════════════════════════════════════ */
.tab-content { display: none; }
.tab-content.active {
  display: block;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  animation: fadeUp 0.22s ease;
}
.sub-content { display: none; padding: 0 14px; }
#subcontent-favorites { padding: 0; }
.sub-content.active { display: block; animation: fadeUp 0.18s ease; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes toastIn {
  from { opacity: 0; transform: translate3d(-50%, -8px, 0) scale(0.98); }
  to   { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
}

/* ══════════════════════════════════════════
   CARDS
══════════════════════════════════════════ */
.dark-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px; margin-bottom: 10px;
}
.dark-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }

.accent-card {
  background: var(--grad);
  color: #fff; border-radius: var(--r);
  padding: 18px; margin-bottom: 10px;
  box-shadow: 0 8px 28px rgba(155,92,232,0.25);
}
.accent-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.accent-card__btn {
  display: block; width: 100%; padding: 12px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--rx);
  font-family: var(--font); font-size: 13px; font-weight: 700;
  color: #fff; cursor: pointer; text-align: center; margin-top: 8px;
  transition: opacity 0.15s;
}
.accent-card__btn:active { opacity: 0.75; }

.ref-link-box {
  background: rgba(0,0,0,0.2); border-radius: var(--rx);
  padding: 12px; font-size: 11px; word-break: break-all;
  margin-bottom: 8px; cursor: pointer; font-weight: 600;
  font-family: var(--font-mono);
}
.ref-link-box:active { background: rgba(0,0,0,0.35); }

/* ══════════════════════════════════════════
   USEFUL BOTS
══════════════════════════════════════════ */
.useful-bots { display: flex; gap: 10px; }
.useful-bot {
  flex: 1; background: rgba(0,0,0,0.25);
  border-radius: var(--rs); padding: 14px; text-align: center; cursor: pointer;
}
.useful-bot__icon { font-size: 36px; margin-bottom: 8px; }
.useful-bot__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; }

/* ══════════════════════════════════════════
   LISTS & STATS
══════════════════════════════════════════ */
.bullet-list { list-style: none; padding: 0; }
.bullet-list li {
  position: relative; padding: 5px 0 5px 16px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.88); line-height: 1.5;
}
.bullet-list li::before { content: '•'; position: absolute; left: 0; font-weight: 900; }

.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.stat-row:last-child { border-bottom: none; }
.stat-row span:first-child { color: var(--text2); }
.stat-row span:last-child  { font-weight: 700; color: var(--text); }

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.empty-state {
  text-align: center; color: var(--dim);
  padding: 50px 20px; font-size: 14px; line-height: 1.7;
}

/* ══════════════════════════════════════════
   FAQ
══════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; gap: 6px; }
.faq-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--rs); cursor: pointer; transition: border-color 0.2s;
}
.faq-item.open { border-color: rgba(212,105,138,0.4); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; font-size: 13px; font-weight: 600;
}
.faq-arrow { font-size: 10px; color: var(--dim); transition: transform 0.25s; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a {
  display: none; padding: 0 16px 14px;
  font-size: 13px; color: var(--text2); line-height: 1.6;
}
.faq-item.open .faq-a { display: block; }
.faq-footer {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; padding: 20px 0 8px;
}

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.link-accent { color: var(--accent); text-decoration: underline; font-size: 12px; }

.input-field {
  width: 100%; padding: 13px 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--rs); color: var(--text);
  font-family: var(--font); font-size: 13px;
  margin: 6px 0; outline: none; transition: border-color 0.2s;
}
.input-field:focus { border-color: var(--accent); }
.input-field::placeholder { color: var(--muted); }

.outline-btn {
  display: block; width: 100%; padding: 13px;
  background: transparent;
  border: 1px solid rgba(212,105,138,0.4);
  border-radius: var(--rs); color: var(--accent);
  font-family: var(--font); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center; margin-top: 6px; transition: all 0.15s;
}
.outline-btn:active { background: rgba(212,105,138,0.08); }

/* ══════════════════════════════════════════
   BOT LIST & CARDS
══════════════════════════════════════════ */
.bot-list { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; }

.bot-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer; overflow: hidden;
  transition: transform 0.15s, border-color 0.2s;
}
.bot-item:active { transform: scale(0.985); border-color: var(--border-hi); }

/* Gradient banner strip */
.bot-item__banner {
  height: 5px; width: 100%;
}

.bot-item__inner {
  display: flex; gap: 14px;
  padding: 14px; align-items: flex-start;
}

.bot-item__icon {
  width: 66px; height: 66px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
  overflow: hidden; background: transparent !important;
}
.bot-item__icon img {
  width: 100% !important; height: 100% !important;
  border-radius: 16px; object-fit: cover;
}
.bot-item__body { flex: 1; min-width: 0; }
.bot-item__name {
  font-size: 13px; font-weight: 700;
  margin-bottom: 4px; color: var(--text); line-height: 1.3;
}
.bot-item__desc {
  font-size: 12px; color: var(--text2);
  line-height: 1.45; margin-bottom: 10px;
}
.bot-item__btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.bot-btn {
  padding: 8px 16px; border-radius: 50px;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  cursor: pointer; border: none; transition: all 0.15s;
}
.bot-btn--fill {
  background: var(--grad); color: #fff;
  box-shadow: 0 3px 12px rgba(212,105,138,0.3);
}
.bot-btn--line {
  background: transparent;
  border: 1px solid rgba(212,105,138,0.45);
  color: var(--accent);
}
.bot-btn:active { transform: scale(0.93); }

/* ══════════════════════════════════════════
   FULL WIDTH BUTTON
══════════════════════════════════════════ */
.full-btn {
  display: block; width: calc(100% - 28px);
  margin: 14px auto; padding: 15px;
  background: var(--grad); border: none; border-radius: 50px;
  color: #fff; font-family: var(--font); font-size: 15px; font-weight: 700;
  cursor: pointer; text-align: center;
  box-shadow: 0 6px 22px rgba(155,92,232,0.3);
  transition: all 0.2s;
}
.full-btn:active { transform: scale(0.97); opacity: 0.85; }

/* ══════════════════════════════════════════
   SETTINGS
══════════════════════════════════════════ */
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.setting-label { font-size: 14px; font-weight: 600; }
.setting-desc  { font-size: 12px; color: var(--dim); margin-top: 3px; line-height: 1.4; }

.lang-switch { display: flex; gap: 6px; flex-shrink: 0; }
.lang-btn {
  padding: 9px 18px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 50px; color: var(--dim);
  font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.lang-btn.active {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 3px 14px rgba(212,105,138,0.35);
}

/* ══════════════════════════════════════════
   BOTTOM NAV
══════════════════════════════════════════ */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex;
  background: rgba(8,8,8,0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--border);
  z-index: 100;
  padding: 6px 0;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
}

.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; gap: 3px; padding: 7px 4px;
  background: none; border: none; color: var(--dim);
  font-family: var(--font); cursor: pointer; transition: color 0.2s;
}
.nav-item.active { color: var(--accent); }
.nav-icon { font-size: 22px; transition: transform 0.2s; display: flex; align-items: center; justify-content: center; }
.nav-icon svg { width: 22px; height: 22px; stroke-width: 2; }
.nav-item.active .nav-icon { transform: scale(1.12); }
.nav-label { font-size: 9px; font-weight: 600; letter-spacing: 0.3px; }
.nav-item.active .nav-label {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════
   OVERLAY PAGES
══════════════════════════════════════════ */
.overlay-page {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg); z-index: 200;
  overflow-y: auto; padding-bottom: 40px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: slideIn 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.overlay-header {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: rgba(8,8,8,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10;
}
.overlay-header__title { font-size: 12px; color: var(--dim); font-weight: 500; }
.back-btn {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--accent); font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 7px 14px;
  font-family: var(--font); border-radius: 50px;
  transition: opacity 0.15s;
}
.back-btn:active { opacity: 0.7; }

.page-title {
  font-size: 30px; font-weight: 800;
  padding: 16px 16px 12px; letter-spacing: -0.8px;
}

/* ══════════════════════════════════════════
   SUBSCRIPTION PAYWALL
══════════════════════════════════════════ */
.paywall-hero {
  margin: 0 14px 14px;
  padding: 18px;
  border: 1px solid var(--border-hi);
  border-radius: var(--r);
  background: linear-gradient(145deg, rgba(212,105,138,0.16), rgba(155,92,232,0.10) 48%, rgba(17,17,17,0.96));
  box-shadow: 0 12px 34px rgba(0,0,0,0.28);
}
.paywall-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(255,255,255,0.06);
}
.paywall-hero h2 {
  margin-top: 12px;
  font-size: 24px;
  line-height: 1.1;
  font-weight: 900;
}
.paywall-hero p {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

.buy-subscription-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 0 14px 12px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--rs);
  background: var(--surface);
}
.subscription-period-btn {
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.subscription-period-btn.active {
  color: #fff;
  background: var(--grad);
  box-shadow: 0 5px 16px rgba(155,92,232,0.28);
}

.subscription-plans-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 12px;
}
.plan-card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.plan-card--featured {
  border-color: rgba(212,105,138,0.42);
  background: linear-gradient(150deg, rgba(212,105,138,0.12), rgba(17,17,17,0.98) 46%);
  box-shadow: 0 10px 28px rgba(212,105,138,0.13);
}
.plan-card--loading {
  color: var(--text2);
  text-align: center;
}
.plan-card__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.plan-card__name {
  font-size: 18px;
  font-weight: 900;
}
.plan-card__summary {
  margin-top: 4px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
}
.plan-card__badges {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
  flex-shrink: 0;
}
.plan-card__badge,
.plan-card__year {
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(212,105,138,0.16);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.plan-card__year {
  background: rgba(255,255,255,0.08);
  color: var(--text2);
}
.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.plan-card__price span {
  font-size: 28px;
  line-height: 1;
  font-weight: 950;
}
.plan-card__price small {
  color: var(--text2);
  font-size: 12px;
}
.plan-card__hint {
  margin-top: 7px;
  color: #f4c3d2;
  font-size: 12px;
  font-weight: 700;
}
.subscription-choice {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: var(--text2);
  font-size: 12px;
  font-weight: 800;
}
.subscription-choice__select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(212,105,138,0.34);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  padding: 0 12px;
  outline: none;
}
.subscription-choice__select:focus {
  border-color: rgba(212,105,138,0.72);
  box-shadow: 0 0 0 3px rgba(212,105,138,0.12);
}
.plan-card__features {
  display: grid;
  gap: 7px;
  margin-top: 13px;
}
.plan-card__feature {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text2);
  font-size: 12px;
}
.plan-card__feature .mx-ico {
  color: var(--accent);
  flex-shrink: 0;
}
.plan-card__btn {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 0;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(155,92,232,0.26);
}
.plan-card__btn:disabled {
  opacity: 0.72;
  cursor: wait;
}
.buy-terms {
  margin-top: 0;
}
.mx-packages-toggle {
  display: block;
  width: calc(100% - 28px);
  min-height: 42px;
  margin: 2px auto 14px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.mx-packages-panel {
  margin-bottom: 16px;
  padding-top: 2px;
}
.mx-packages-panel__title {
  padding: 0 16px 4px;
  font-size: 16px;
  font-weight: 900;
}
.mx-packages-panel__desc {
  padding: 0 16px 10px;
  color: var(--text2);
  font-size: 12px;
  line-height: 1.45;
}

/* ══════════════════════════════════════════
   PACKAGES
══════════════════════════════════════════ */
.packages-list { padding: 0 14px; display: flex; flex-direction: column; gap: 12px; }

.pkg-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
  cursor: pointer; transition: all 0.2s;
}
.pkg-card:active { border-color: var(--accent); transform: scale(0.99); }

.pkg-card__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 18px 16px;
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.pkg-card__name {
  font-size: 20px; font-weight: 900; font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pkg-card__sp {
  font-size: 17px; font-weight: 800;
  font-family: var(--font-mono); color: var(--text);
}
.pkg-card__section {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--dim); padding: 12px 18px 6px;
}
.pkg-card__bonus { font-size: 13px; font-weight: 600; padding: 0 18px 4px; }
.pkg-card__desc  { font-size: 12px; color: var(--text2); padding: 0 18px 8px; line-height: 1.5; }
.pkg-card__row { display: flex; justify-content: space-between; padding: 3px 18px; font-size: 12px; }
.pkg-card__row span:first-child { color: var(--text2); }
.pkg-card__row span:last-child  { font-weight: 700; }
.pkg-card__more { font-size: 11px; color: var(--muted); padding: 2px 18px 10px; }
.pkg-card__btn {
  display: block; width: calc(100% - 32px);
  margin: 12px 16px 16px; padding: 13px;
  background: var(--grad); border: none; border-radius: 50px;
  color: #fff; font-family: var(--font); font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(155,92,232,0.3);
  transition: all 0.15s;
}
.pkg-card__btn:active { transform: scale(0.97); opacity: 0.85; }

/* ══════════════════════════════════════════
   PACKAGE DETAIL
══════════════════════════════════════════ */
.notice-card {
  background: var(--grad); color: #fff;
  border-radius: var(--r); padding: 16px; margin: 12px 14px;
  box-shadow: 0 6px 22px rgba(155,92,232,0.28);
}
.notice-card h3 { font-size: 15px; font-weight: 800; margin-bottom: 5px; }
.notice-card p  { font-size: 12px; opacity: 0.9; }

.pkg-detail-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px; margin: 12px 14px;
}
.pkg-detail-card .d-name {
  font-size: 22px; font-weight: 900; font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 14px;
}
.pkg-detail-card .d-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.pkg-detail-card .d-row:last-of-type { border-bottom: none; }
.pkg-detail-card .d-row span:first-child { color: var(--text2); }
.pkg-detail-card .d-row span:last-child  { font-weight: 700; }
.pkg-detail-card .d-partner {
  font-size: 15px; font-weight: 800;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pkg-detail-card .d-sub { font-size: 12px; color: var(--dim); margin-top: 3px; }

.form-group { padding: 0 14px; margin-bottom: 10px; }
.form-label  { font-size: 12px; font-weight: 600; display: block; margin-bottom: 5px; color: var(--text2); }

.checkbox-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 0 14px; margin-bottom: 12px;
  font-size: 12px; color: var(--text2); cursor: pointer; line-height: 1.5;
}
.checkbox-row input { accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; }

/* ══════════════════════════════════════════
   FAVORITE BUTTON
══════════════════════════════════════════ */
.fav-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--dim); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: all 0.2s; padding: 0;
}
.fav-btn--active {
  background: rgba(212,105,138,0.15);
  border-color: rgba(212,105,138,0.5);
  color: var(--accent);
}

/* ══════════════════════════════════════════
   BOT DETAIL PAGE
══════════════════════════════════════════ */
#bot-detail-hero { padding-bottom: 30px; }

.bd-hero-banner {
  width: 100%; height: 200px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.bd-hero-banner::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(transparent, var(--bg));
}
.bd-hero-emoji {
  font-size: 90px;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.6));
  position: relative; z-index: 1;
}
.bd-hero-emoji img {
  width: 90px; height: 90px;
  border-radius: 22px; object-fit: cover;
}

.bd-info-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 16px 0;
}
.bd-icon-small {
  width: 54px; height: 54px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; flex-shrink: 0;
  overflow: hidden; background: transparent !important;
}
.bd-icon-small img {
  width: 100% !important; height: 100% !important;
  border-radius: 14px; object-fit: cover;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.bd-info-text { flex: 1; min-width: 0; }
.bd-name { font-size: 18px; font-weight: 800; margin-bottom: 5px; line-height: 1.3; }
.bd-desc { font-size: 13px; color: var(--text2); line-height: 1.5; }

.bd-btns { display: flex; gap: 8px; align-items: center; padding: 16px; flex-wrap: wrap; }
.bd-divider { height: 1px; background: var(--border); margin: 0 16px 20px; }
.bd-section { padding: 0 16px; margin-bottom: 22px; }
.bd-section h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.bd-section p  { font-size: 13px; color: var(--text2); line-height: 1.7; }
.bd-list { list-style: none; padding: 0; margin: 0; }
.bd-list li { font-size: 13px; color: var(--text2); line-height: 1.7; padding: 4px 0 4px 20px; position: relative; }
.bd-list li::before { content: '—'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.bd-list-ordered { list-style: none; padding: 0; margin: 0; counter-reset: steps; }
.bd-list-ordered li { font-size: 13px; color: var(--text2); line-height: 1.7; padding: 4px 0 4px 28px; position: relative; counter-increment: steps; }
.bd-list-ordered li::before { content: counter(steps); position: absolute; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; top: 6px; }

/* ── History rows ── */
.history-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.history-row__info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.history-row__desc { font-size: 13px; font-weight: 600; color: var(--text); }
.history-row__date { font-size: 11px; color: var(--text3); }
.history-row__amount { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* ══════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════ */
.server-time { display: none; }

.toast {
  position: fixed; top: 20px; left: 50%; transform: translate3d(-50%,0,0);
  width: max-content;
  max-width: calc(100vw - 28px);
  background: var(--surface2); color: var(--text);
  padding: 11px 18px; border-radius: 16px;
  font-family: var(--font); font-size: 13px; font-weight: 600;
  z-index: 1000; border: 1px solid var(--border-hi);
  animation: toastIn 0.24s ease; white-space: normal;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}

.subscription-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 3600;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(10px);
  animation: fadeUp 0.18s ease;
}
.subscription-modal {
  --sub-accent: #d4698a;
  width: min(100%, 360px);
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sub-accent) 45%, transparent);
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--sub-accent) 18%, #111 82%), #111 58%);
  color: #fff;
  box-shadow: 0 22px 70px rgba(0,0,0,0.52);
}
.subscription-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 20px;
  line-height: 1;
}
.subscription-modal__kicker {
  color: color-mix(in srgb, var(--sub-accent) 82%, #fff 18%);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.subscription-modal__title {
  margin-top: 8px;
  padding-right: 34px;
  font-size: 24px;
  line-height: 1.08;
  font-weight: 950;
}
.subscription-modal__text {
  margin-top: 10px;
  color: rgba(255,255,255,0.72);
  font-size: 13px;
  line-height: 1.48;
}
.subscription-modal__cta {
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sub-accent), color-mix(in srgb, var(--sub-accent) 55%, #fff 45%));
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 950;
}
.subscription-modal--habits { --sub-accent: #2d7a5a; }
.subscription-modal--astro { --sub-accent: #8b5cf6; }
.subscription-modal--nutri { --sub-accent: #21c55d; }
.subscription-modal--video { --sub-accent: #ef4444; }
.subscription-modal--travel { --sub-accent: #0ea5e9; }
.subscription-modal--marketing { --sub-accent: #f59e0b; }
.subscription-modal--finance { --sub-accent: #38bdf8; }
.subscription-modal--chef { --sub-accent: #ef4444; }

::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ══════════════════════════════════════════
   BOT CARD — CHAT BUTTON
══════════════════════════════════════════ */
.bot-btn--chat {
  background: var(--grad);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.18s;
}
.bot-btn--chat:active { opacity: 0.75; }

/* ══════════════════════════════════════════
   CHAT OVERLAY PAGE
══════════════════════════════════════════ */
.chat-page {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  /* Override overlay-page defaults */
  overflow-y: hidden;
  padding-bottom: 0;
  overscroll-behavior: contain;
}

/* ── Header ── */
.chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 58px;
  position: relative;
  z-index: 10;
}
.chat-back-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.chat-back-btn:active { background: var(--surface3); }

.chat-header__bot {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 10px;
  transition: background 0.15s;
}
.chat-header__bot:active { background: var(--surface3); }

.chat-header__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  overflow: hidden; background: transparent !important;
}
.chat-header__icon img {
  width: 100% !important; height: 100% !important;
  border-radius: 10px; object-fit: cover;
  flex-shrink: 0;
}
.chat-header__name {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
  line-height: 1.3;
}
.chat-header__chevron {
  color: var(--text2);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s;
}
.chat-header__bot.open .chat-header__chevron {
  transform: rotate(90deg);
}

.chat-header__right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.chat-sp-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--grad-glow);
  border: 1px solid rgba(212,105,138,0.25);
  border-radius: 50px;
  padding: 4px 10px;
}
.chat-sp-badge__coin {
  font-size: 13px;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}
.chat-sp-badge__val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.chat-new-btn {
  background: var(--grad);
  border: none;
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.chat-new-btn:active { opacity: 0.7; }

/* ── Thread panel (slide-in from left) ── */
.thread-panel {
  position: absolute;
  top: 58px; left: 0;
  width: 75%;
  max-width: 300px;
  bottom: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
.thread-panel.open {
  transform: translateX(0);
}
.thread-panel__head,
.thread-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.thread-panel__close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.thread-panel__close:hover { color: var(--text); background: var(--surface3); }

.thread-new-btn {
  margin: 8px 12px 12px;
  width: calc(100% - 24px);
  background: var(--grad);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font);
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.thread-new-btn:active { opacity: 0.75; }
.thread-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.thread-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
}
.thread-item:active,
.thread-item:hover { background: var(--surface2); }
.thread-item.active { background: var(--grad-glow); }
.thread-item__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dim);
  flex-shrink: 0;
}
.thread-item.active .thread-item__dot {
  background: var(--grad);
  background: linear-gradient(135deg, #D4698A 0%, #9B5CE8 100%);
}
.thread-item__info { flex: 1; min-width: 0; }
.thread-item__title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.thread-item.active .thread-item__title {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.thread-item__date {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}
.thread-item__del {
  background: none;
  border: none;
  color: var(--dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.thread-item__del:hover { color: var(--accent); background: rgba(212,105,138,0.12); }

.thread-overlay {
  position: absolute;
  inset: 0;
  top: 58px;
  background: rgba(0,0,0,0.55);
  z-index: 40;
  display: none;
}
.thread-overlay.visible { display: block; }

/* ── Message area ── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Empty state */
.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
}
.chat-empty__icon {
  font-size: 52px;
  opacity: 0.6;
}
.chat-empty__icon img {
  width: 56px; height: 56px;
  border-radius: 14px; object-fit: cover;
}
.chat-empty__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.chat-empty__sub {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
}

/* ── SP empty banner ── */
.chat-sp-empty {
  margin: 0 14px 10px;
  padding: 14px 16px;
  background: rgba(212,105,138,0.1);
  border: 1px solid rgba(212,105,138,0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}
.chat-sp-empty__icon { font-size: 22px; }
.chat-sp-empty__text { flex: 1; font-size: 13px; color: var(--text2); line-height: 1.5; }
.chat-sp-empty__text strong { color: var(--accent); }
.chat-sp-empty button,
.chat-sp-empty__btn {
  background: var(--grad);
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font);
  padding: 7px 14px;
  border-radius: 50px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Message bubbles ── */
.msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
  animation: msgIn 0.2s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.msg--user {
  align-self: flex-end;
  align-items: flex-end;
}
.msg--assistant {
  align-self: flex-start;
  align-items: flex-start;
}
.msg--full {
  max-width: 100%;
  width: 100%;
}

.msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow: hidden;
  position: relative;
  max-width: 100%;
  min-width: 0;
}
.msg--user .msg-bubble {
  background: var(--grad);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.msg--assistant .msg-bubble {
  background: var(--surface2);
  color: var(--text);
  border-bottom-left-radius: 5px;
  border: 1px solid var(--border);
}

/* Markdown inside bubbles */
.msg-bubble p { margin: 0 0 8px; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble pre {
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 8px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  max-width: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}
.msg-bubble code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(0,0,0,0.25);
  padding: 1px 5px;
  border-radius: 4px;
}
.msg-bubble pre code { background: none; padding: 0; }
.msg-bubble ul, .msg-bubble ol {
  padding-left: 18px;
  margin: 6px 0;
}
.msg-bubble li { margin-bottom: 3px; }
.msg-bubble strong { font-weight: 700; }
.msg-bubble em { font-style: italic; opacity: 0.9; }
.msg-bubble a { color: var(--accent); text-decoration: none; }
.msg--user .msg-bubble a { color: rgba(255,255,255,0.85); }
.msg-bubble blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 10px;
  margin: 6px 0;
  opacity: 0.8;
}
.msg-bubble h1, .msg-bubble h2, .msg-bubble h3 {
  font-weight: 700;
  margin: 8px 0 4px;
  font-size: 15px;
}
/* Tables in messages */
.msg-bubble table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
  display: block;
  overflow-x: auto;
}
.msg-bubble th, .msg-bubble td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
}
.msg-bubble th {
  background: rgba(0,0,0,0.2);
  font-weight: 600;
}
.msg-bubble tr:nth-child(even) td {
  background: rgba(255,255,255,0.03);
}

.msg-time {
  font-size: 10px;
  color: var(--dim);
  margin-top: 3px;
  padding: 0 4px;
}

/* Text content inside bubble */
.msg-text { line-height: 1.55; }

/* Image attachment in message — class is on <img> element */
.msg-image {
  display: block;
  border-radius: 12px;
  max-width: 220px;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: cover;
  cursor: pointer;
  margin-bottom: 4px;
}

/* File attachment — class is on <a> element */
.msg-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  max-width: 220px;
  transition: background 0.15s;
}
.msg-file:hover { background: var(--surface3); }
.msg--user .msg-file { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); color: #fff; }

/* Audio attachment — class is on <audio> element */
.msg-audio {
  display: block;
  width: 220px;
  max-width: 100%;
  border-radius: 10px;
}

/* Typing indicator — .msg-typing on outer div */
.msg-typing {
  min-width: 60px;
}
.typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}
.typing-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text2);
  display: inline-block;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* API stub message — .msg-stub on outer .msg div */
.msg-stub {
  max-width: 100%;
  align-self: stretch;
}
.msg-stub .msg-text,
.stub-text {
  background: var(--grad-glow);
  border: 1px solid rgba(155,92,232,0.2);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
}

/* ── Input area ── */
.chat-input-area {
  padding: 8px 12px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chat-attach-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: 10px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--text2);
  transition: background 0.15s, color 0.15s;
  align-self: flex-end;
  margin-bottom: 2px;
}
.chat-attach-btn:active,
.chat-attach-btn:hover { background: var(--surface3); color: var(--accent); }

.chat-input-wrap {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.chat-input-wrap:focus-within {
  border-color: var(--accent);
}

.chat-attached-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px 0;
}
.chat-attached-preview:empty { display: none; }

.attach-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface3);
  border: 1px solid var(--border-hi);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  max-width: 120px;
}
.attach-chip img {
  width: 24px; height: 24px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.attach-chip__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.attach-chip__rm {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.attach-chip__rm:hover { color: var(--accent); }

/* Simple button inside attach-chip (no explicit class) */
.attach-chip button {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.attach-chip button:hover { color: var(--accent); }

.chat-textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  overflow-y: auto;
  display: block;
}
.chat-textarea::placeholder { color: var(--dim); }

.chat-send-btn {
  background: var(--grad);
  border: none;
  color: #fff;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
  transition: opacity 0.15s, transform 0.15s;
}
.chat-send-btn:active { opacity: 0.75; transform: scale(0.92); }
.chat-send-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Confirm Modal ──────────────────────────────────── */
.confirm-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.confirm-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  max-width: 300px;
  width: 85%;
  text-align: center;
  animation: scaleIn 0.2s ease;
}
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
  line-height: 1.4;
}
.confirm-btns {
  display: flex; gap: 10px;
}
.confirm-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
}
.confirm-btn:active { transform: scale(0.95); }
.confirm-btn--cancel {
  background: var(--surface2);
  color: var(--text2);
}
.confirm-btn--ok {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
}

/* ══════════════════════════════════════════
   ATTACH MENU MODAL
══════════════════════════════════════════ */
.attach-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 300;
  display: none;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.15s ease;
}
.attach-menu-overlay.open {
  display: flex;
}
.attach-menu {
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 0 0 max(20px, env(safe-area-inset-bottom));
  animation: slideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.attach-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.attach-menu__close {
  width: 32px; height: 32px;
  background: var(--surface2);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  transition: background 0.15s;
}
.attach-menu__close:hover { background: var(--surface3); }
/* close icon is inline SVG in HTML */

.attach-menu__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 20px 16px;
}
.attach-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
}
.attach-menu__item:active {
  transform: scale(0.95);
  border-color: var(--accent);
  background: var(--grad-glow);
}
.attach-menu__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* attach-menu icons are inline SVG in HTML — only gradients needed */
.attach-menu__icon--photo {
  background: linear-gradient(135deg, #667eea, #764ba2);
}
.attach-menu__icon--camera {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}
.attach-menu__icon--docs {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}
.attach-menu__icon--audio {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

/* ══════════════════════════════════════════
   VOICE INPUT BUTTON
══════════════════════════════════════════ */
.chat-mic-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 2px;
  transition: all 0.2s;
}
/* mic icon is inline SVG in HTML */
.chat-mic-btn svg {
  color: var(--text2);
  transition: all 0.2s;
}
.chat-mic-btn:hover {
  border-color: var(--accent);
}
.chat-mic-btn.recording {
  background: rgba(212,105,138,0.15);
  border-color: var(--accent);
  animation: pulse 1.5s infinite;
}
.chat-mic-btn.recording svg {
  color: var(--accent);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,105,138,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(212,105,138,0); }
}

/* attach & send icons are inline SVG in HTML */
.chat-attach-btn svg {
  color: var(--text2);
}

/* ══════════════════════════════════════════
   ANIMATED CHAT BACKGROUND
══════════════════════════════════════════ */
.chat-messages {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(212,105,138,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(155,92,232,0.08) 0%, transparent 50%),
    var(--bg);
}
.chat-messages::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(212,105,138,0.06) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 70%, rgba(155,92,232,0.06) 0%, transparent 40%);
  animation: waveBg 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes waveBg {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1) translate(5%, -5%);
    opacity: 0.8;
  }
  100% {
    transform: scale(1) translate(-5%, 5%);
    opacity: 0.6;
  }
}
.chat-messages > * {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════
   ONBOARDING
══════════════════════════════════════════ */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.3s ease;
}
.onboarding-overlay.active { display: flex; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slides container */
.onboarding-slides {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  position: relative;
}

.onboarding-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  opacity: 0;
  transform: translateX(40px);
  transition: all 0.35s ease;
  pointer-events: none;
}
.onboarding-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.onboarding-slide.prev {
  opacity: 0;
  transform: translateX(-40px);
}

/* Visual area */
.onboarding-slide__visual {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.onboarding-slide__visual--bots {
  height: auto;
  max-height: 260px;
  overflow-y: auto;
}

/* Hero icons (slide 1) */
.onboarding-hero-icon {
  display: flex;
  gap: 12px;
}
.onboarding-hero-icon img {
  width: 72px; height: 72px;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  animation: float 3s ease-in-out infinite;
}
.onboarding-hero-icon img:nth-child(2) {
  animation-delay: 0.3s;
  transform: scale(1.1);
}
.onboarding-hero-icon img:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Coin (slide 2) */
.onboarding-coin {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: #fff;
  box-shadow: 0 8px 32px rgba(212,105,138,0.4);
  animation: pulse-coin 2s ease-in-out infinite;
}
@keyframes pulse-coin {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(212,105,138,0.4); }
  50% { transform: scale(1.05); box-shadow: 0 12px 48px rgba(212,105,138,0.6); }
}

/* Bots grid (slide 3) */
.onboarding-bots-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.onboarding-bots-grid img {
  width: 64px; height: 64px;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

/* Referral icon (slide 4) */
.onboarding-referral-icon {
  width: 100px; height: 100px;
  border-radius: 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 32px rgba(102,126,234,0.4);
}

/* Gamification visual (slide 5) */
.onboarding-gamif {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.onboarding-gamif__ring {
  position: relative;
  width: 96px;
  height: 96px;
  animation: onbGamifPulse 2.6s ease-in-out infinite;
}
.onboarding-gamif__ring svg {
  display: block;
  filter: drop-shadow(0 6px 24px rgba(212,105,138,0.45));
}
.onboarding-gamif__level {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
}
.onboarding-gamif__level-num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #D4698A, #9B5CE8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.onboarding-gamif__level-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}
.onboarding-gamif__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 300px;
}
.onboarding-gamif__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #fff);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}
.onboarding-gamif__chip b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.onboarding-gamif__chip--fire {
  background: linear-gradient(135deg, rgba(255,107,53,0.25), rgba(255,171,64,0.18));
  border-color: rgba(255,107,53,0.4);
  color: #FFAB40;
}
.onboarding-gamif__chip--xp {
  background: linear-gradient(135deg, rgba(212,105,138,0.22), rgba(155,92,232,0.18));
  border-color: rgba(212,105,138,0.4);
  color: #F2B5C6;
}
.onboarding-gamif__chip--gem {
  background: linear-gradient(135deg, rgba(155,92,232,0.25), rgba(212,105,138,0.18));
  border-color: rgba(155,92,232,0.45);
  color: #C89BF4;
}
.onboarding-gamif__chip--league {
  background: linear-gradient(135deg, rgba(250,204,21,0.22), rgba(234,179,8,0.18));
  border-color: rgba(250,204,21,0.45);
  color: #FCD34D;
}
.onboarding-gamif__chip {
  animation: onbChipPop 0.5s ease-out both;
}
.onboarding-gamif__chip:nth-child(1) { animation-delay: 0.15s; }
.onboarding-gamif__chip:nth-child(2) { animation-delay: 0.3s; }
.onboarding-gamif__chip:nth-child(3) { animation-delay: 0.45s; }
.onboarding-gamif__chip:nth-child(4) { animation-delay: 0.6s; }
@keyframes onbGamifPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes onbChipPop {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═════════════════════════════════════════ */
/*  GAMIFICATION "WHAT'S NEW" MODAL           */
/* ═════════════════════════════════════════ */
.gamif-intro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 15, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}
.gamif-intro-overlay.active {
  display: flex;
  animation: gamifIntroFade 0.3s ease-out;
}
@keyframes gamifIntroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.gamif-intro-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(40,25,45,0.96), rgba(20,12,25,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  padding: 28px 20px 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6),
              0 0 0 1px rgba(212,105,138,0.14) inset,
              0 0 60px rgba(155,92,232,0.14) inset;
  color: var(--text);
  text-align: center;
  animation: gamifIntroRise 0.45s cubic-bezier(.2,.7,.3,1.1);
}
@keyframes gamifIntroRise {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.gamif-intro-badge {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  background: var(--grad);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(212,105,138,0.5);
}
.gamif-intro-visual {
  margin: 24px 0 20px;
  display: flex;
  justify-content: center;
}
.gamif-intro-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
  background: linear-gradient(135deg, #D4698A, #9B5CE8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gamif-intro-text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  margin: 0 0 18px;
}
.gamif-intro-text b {
  color: #fff;
  font-weight: 700;
}
.gamif-intro-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 20px;
  text-align: left;
}
.gamif-intro-feat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
.gamif-intro-feat__ico {
  font-size: 22px;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}
.gamif-intro-feat__ttl {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.gamif-intro-feat__sub {
  font-size: 12px;
  color: rgba(255,255,255,0.58);
  margin-top: 2px;
  line-height: 1.3;
}
.gamif-intro-btn {
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--grad);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(212,105,138,0.38);
  transition: transform 0.2s, box-shadow 0.2s;
}
.gamif-intro-btn:active {
  transform: scale(0.97);
  box-shadow: 0 6px 18px rgba(212,105,138,0.3);
}

/* Bot picker (slide 5) */
.onboarding-bot-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 280px;
}
.onboarding-bot-picker__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.onboarding-bot-picker__item:active {
  transform: scale(0.95);
  border-color: var(--accent);
  background: var(--grad-glow);
}
.onboarding-bot-picker__item img {
  width: 48px; height: 48px;
  border-radius: 12px;
}
.onboarding-bot-picker__item span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text2);
  text-align: center;
  line-height: 1.2;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Title & text */
.onboarding-slide__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 12px;
  line-height: 1.3;
}
.onboarding-slide__text {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  margin: 0;
}

/* Dots */
.onboarding-dots {
  display: flex;
  gap: 8px;
  margin: 20px 0;
}
.onboarding-dot {
  width: 8px; height: 8px;
  border-radius: 4px;
  background: var(--surface3);
  transition: all 0.25s;
}
.onboarding-dot.active {
  width: 24px;
  background: var(--grad);
}

/* Buttons */
.onboarding-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  padding-bottom: env(safe-area-inset-bottom, 16px);
}
.onboarding-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 14px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}
.onboarding-btn--skip {
  background: var(--surface2);
  color: var(--text2);
  border: 1px solid var(--border);
}
.onboarding-btn--skip:hover { background: var(--surface3); }
.onboarding-btn--next {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 4px 16px rgba(212,105,138,0.35);
}
.onboarding-btn--next:hover {
  box-shadow: 0 6px 24px rgba(212,105,138,0.5);
  transform: translateY(-1px);
}

/* ══════════════════════════════════════════
   ONBOARDING TOOLTIP (tour)
══════════════════════════════════════════ */
.onboarding-tooltip {
  position: fixed;
  z-index: 10001;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: none;
  animation: tooltipIn 0.25s ease;
}
.onboarding-tooltip.active { display: block; }
@keyframes tooltipIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.onboarding-tooltip__content p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
}
.onboarding-tooltip__btn {
  width: 100%;
  padding: 10px;
  background: var(--grad);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.onboarding-tooltip__arrow {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none; border-right: none;
  transform: rotate(-45deg);
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
}
.onboarding-tooltip.arrow-top .onboarding-tooltip__arrow {
  top: -7px; bottom: auto;
  transform: rotate(135deg);
}
.onboarding-tooltip.arrow-left .onboarding-tooltip__arrow {
  left: 20px;
}
.onboarding-tooltip.arrow-right .onboarding-tooltip__arrow {
  left: auto; right: 20px;
  margin-left: 0;
}

/* Highlight overlay */
.onboarding-highlight {
  position: fixed;
  z-index: 10000;
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.75);
  pointer-events: none;
  display: none;
  transition: all 0.3s ease;
}
.onboarding-highlight.active { display: block; }

/* ══════════════════════════════════════════
   THINKING INDICATOR WITH TEXT
══════════════════════════════════════════ */
.thinking-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 18px;
  border-bottom-left-radius: 5px;
}
.thinking-dots {
  display: flex;
  gap: 4px;
}
.thinking-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: thinkBounce 1.4s infinite ease-in-out;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinkBounce {
  0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; }
  40% { transform: scale(1.2); opacity: 1; }
}
.thinking-text {
  font-size: 13px;
  color: var(--text2);
  font-weight: 500;
  animation: fadeInOut 2s infinite;
  transition: opacity 0.15s;
}
@keyframes fadeInOut {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* ══════════════════════════════════════════
   MARKETPLACE TABS
══════════════════════════════════════════ */
.market-tabs {
  display: flex;
  gap: 8px;
  padding: 0 14px 14px;
}
.market-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.market-tab svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
.market-tab.active {
  background: var(--grad-glow);
  border-color: rgba(212,105,138,0.45);
  color: var(--accent);
}
.market-tab:active {
  transform: scale(0.97);
}
.market-content {
  display: none;
}
.market-content.active {
  display: block;
  animation: fadeUp 0.2s ease;
}

/* Top bots badge */
.bot-item--top {
  position: relative;
}
.bot-item--top::after {
  content: '🔥';
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 18px;
}


/* ── Download .docx Button ────────────────────────── */
.docx-download-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #6c3ce0, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}
.docx-download-btn:hover {
  background: linear-gradient(135deg, #7c4cf0, #9b6cff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(108, 60, 224, 0.4);
}
.docx-download-btn:active {
  transform: translateY(0);
}
.docx-download-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}


/* ══════════════════════════════════════════════════════════════ */
/* VibeEGE — Exam Preparation App (Light Academic Design)        */
/* Palette: #5B6ABF primary, #7A3CC9 secondary, #F5F7FF surface  */
/* ══════════════════════════════════════════════════════════════ */

:root {
  --ege-primary: #5B6ABF;
  --ege-primary-light: #7B88D4;
  --ege-secondary: #7A3CC9;
  --ege-accent: #FF6B6B;
  --ege-bg: #F5F7FF;
  --ege-surface: #FFFFFF;
  --ege-text: #1A1D2E;
  --ege-text2: #6B7280;
  --ege-text3: #9CA3AF;
  --ege-border: #E5E7EB;
  --ege-success: #10B981;
  --ege-warning: #F59E0B;
  --ege-error: #EF4444;
  --ege-grad: linear-gradient(135deg, #5B6ABF 0%, #7A3CC9 100%);
  --ege-grad-soft: linear-gradient(135deg, #EEF0FF 0%, #F3EDFF 100%);
  --ege-shadow: 0 2px 12px rgba(91, 106, 191, 0.10);
  --ege-shadow-lg: 0 8px 32px rgba(91, 106, 191, 0.15);
  --ege-radius: 16px;
  --ege-radius-sm: 12px;
  --ege-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Main container ─────────────────────────────────── */
.ege-app {
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 250;
  display: none;
  flex-direction: column;
  background: var(--ege-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', system-ui, sans-serif;
  color: var(--ege-text);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.ege-app * { box-sizing: border-box; }

/* ── Top bar ────────────────────────────────────────── */
.ege-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ege-border);
  z-index: 10;
  flex-shrink: 0;
  min-height: 52px;
}
.ege-back-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--ege-bg);
  color: var(--ege-primary);
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ege-back-btn:active { background: var(--ege-border); }
.ege-subject-picker-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--ege-border);
  background: var(--ege-surface);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ege-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  flex: 1;
  min-width: 0;
}
.ege-subject-picker-btn:active { border-color: var(--ege-primary); box-shadow: 0 0 0 3px rgba(91,106,191,0.12); }
.ege-subj-icon { font-size: 18px; flex-shrink: 0; }
.ege-subj-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ege-subject-picker-btn svg { flex-shrink: 0; color: var(--ege-text3); }
.ege-exam-switch {
  min-height: 32px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--ege-primary);
  background: var(--ege-grad);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  transition: transform 0.15s, opacity 0.15s;
  display: inline-flex; align-items: center;
}
.ege-exam-switch:active { transform: scale(0.95); opacity: 0.9; }

/* ── Tab content area ───────────────────────────────── */
.ege-tab-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 16px 100px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ── Bottom navigation ──────────────────────────────── */
.ege-bottom-nav {
  display: flex;
  align-items: stretch;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--ege-border);
  padding: 4px 0 calc(4px + var(--ege-safe-bottom));
  flex-shrink: 0;
  z-index: 10;
}
.ege-nav-btn {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 0;
  border: none;
  background: transparent;
  color: var(--ege-text3);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.ege-nav-btn svg { transition: color 0.2s, transform 0.2s; }
.ege-nav-btn.active { color: var(--ege-primary); font-weight: 600; }
.ege-nav-btn.active svg { transform: scale(1.1); }
.ege-nav-btn:active { color: var(--ege-primary-light); }

/* ── Stats bar ──────────────────────────────────────── */
.ege-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--ege-surface);
  border-radius: var(--ege-radius-sm);
  box-shadow: var(--ege-shadow);
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
}
.ege-stats-bar > span {
  display: flex; align-items: center; gap: 4px;
}

/* ── Hero widget (home tab) ─────────────────────────── */
.ege-hero-widget {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 20px;
  background: var(--ege-grad);
  border-radius: var(--ege-radius);
  margin-bottom: 16px;
  box-shadow: var(--ege-shadow-lg);
  color: #fff;
}
.ege-hero-circle {
  position: relative;
  width: 90px; height: 90px;
  flex-shrink: 0;
}
.ege-hero-ring { width: 100%; height: 100%; }
.ege-hero-ring circle { transition: stroke-dashoffset 0.8s ease; }
.ege-hero-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.ege-hero-pct { font-size: 22px; font-weight: 800; line-height: 1; }
.ege-hero-label { font-size: 10px; opacity: 0.8; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.ege-hero-info { flex: 1; min-width: 0; }
.ege-hero-subject { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.ege-hero-meta { font-size: 13px; opacity: 0.85; display: flex; align-items: center; gap: 6px; }
.ege-hero-sep { opacity: 0.5; }

/* ── Quick start button ─────────────────────────────── */
.ege-quick-start {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: var(--ege-surface);
  border: 1.5px solid var(--ege-border);
  border-radius: var(--ege-radius-sm);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  margin-bottom: 20px;
}
.ege-quick-start:active { transform: scale(0.98); border-color: var(--ege-primary); box-shadow: 0 0 0 3px rgba(91,106,191,0.12); }
.ege-quick-start-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ege-grad-soft);
  border-radius: 12px;
  font-size: 22px;
  flex-shrink: 0;
}
.ege-quick-start-text { flex: 1; text-align: left; }
.ege-quick-start-title { font-size: 15px; font-weight: 700; color: var(--ege-text); }
.ege-quick-start-sub { font-size: 12px; color: var(--ege-text2); margin-top: 2px; }
.ege-quick-start svg { color: var(--ege-text3); flex-shrink: 0; }

/* ── Section titles ─────────────────────────────────── */
.ege-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ege-text);
  margin: 0 0 12px;
  padding: 0;
}

/* ── Plan list (home tab) ───────────────────────────── */
.ege-plan-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.ege-plan-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--ege-surface);
  border-radius: var(--ege-radius-sm);
  box-shadow: var(--ege-shadow);
  font-size: 14px;
}
.ege-plan-item-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ege-grad-soft);
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
}
.ege-plan-item-text { flex: 1; }
.ege-plan-item-title { font-weight: 600; }
.ege-plan-item-sub { font-size: 12px; color: var(--ege-text2); margin-top: 2px; }
.ege-plan-item-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--ege-border);
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s;
}
.ege-plan-item.done .ege-plan-item-check {
  background: var(--ege-success);
  border-color: var(--ege-success);
}

/* ── Mini subjects (home tab) ───────────────────────── */
.ege-mini-subjects {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

/* ── Subjects grid ──────────────────────────────────── */
.ege-subjects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.ege-leaderboard-section{margin-top:24px;padding:16px;background:var(--ege-surface);border:1px solid var(--ege-border);border-radius:16px}
.ege-lb-header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ege-lb-periods{display:flex;gap:4px;background:var(--ege-border);border-radius:10px;padding:3px}
.ege-lb-period{background:transparent;border:none;color:var(--ege-text2);font-family:inherit;font-size:11px;font-weight:700;padding:6px 10px;border-radius:8px;cursor:pointer;transition:all .15s}
.ege-lb-period.active{background:var(--ege-surface);color:var(--ege-text)}
.ege-lb-list{display:flex;flex-direction:column;gap:6px}
.ege-lb-loading,.ege-lb-empty{padding:20px;text-align:center;color:var(--ege-text3);font-size:12px}
.ege-lb-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 12px;background:var(--ege-border);border-radius:10px;font-size:12px}
.ege-lb-row--me{background:linear-gradient(90deg,rgba(139,92,246,.15),rgba(236,72,153,.08));border:1px solid rgba(139,92,246,.4)}
.ege-lb-rank{font-weight:800;color:var(--ege-text);min-width:28px;text-align:center}
.ege-lb-name{color:var(--ege-text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ege-lb-streak{color:#F59E0B;font-weight:600;font-size:11px}
.ege-lb-xp{color:var(--ege-accent, #8B5CF6);font-weight:800;font-size:11px;font-variant-numeric:tabular-nums}
.ege-lb-me{margin-top:8px;display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 12px;background:linear-gradient(90deg,rgba(139,92,246,.2),rgba(236,72,153,.12));border:1px solid rgba(139,92,246,.5);border-radius:10px;font-size:12px}
.ege-subject-card {
  background: var(--ege-surface);
  border-radius: var(--ege-radius);
  padding: 16px;
  box-shadow: var(--ege-shadow);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  border-left: 4px solid var(--ege-color, var(--ege-primary));
}
.ege-subject-card:active { transform: scale(0.97); box-shadow: var(--ege-shadow-lg); }
.ege-subject-icon { font-size: 28px; margin-bottom: 8px; }
.ege-subject-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--ege-text); }
.ege-subject-meta {
  display: flex; gap: 8px;
  font-size: 11px; color: var(--ege-text3);
  margin-bottom: 10px;
}
.ege-subject-progress { margin-top: 4px; }
.ege-progress-bar {
  height: 6px;
  background: var(--ege-bg);
  border-radius: 3px;
  overflow: hidden;
}
.ege-progress-fill {
  height: 100%;
  background: var(--ege-color, var(--ege-primary));
  border-radius: 3px;
  transition: width 0.6s ease;
  min-width: 0;
}
.ege-progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ege-text3);
  margin-top: 4px;
}

/* ── Subject hero (learning/practice tabs) ──────────── */
.ege-subject-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
  background: var(--ege-grad-soft);
  border-radius: var(--ege-radius);
  margin-bottom: 16px;
}
.ege-subj-hero-icon { font-size: 36px; }
.ege-subj-hero-title { font-size: 18px; font-weight: 700; }
.ege-subj-hero-desc { font-size: 13px; color: var(--ege-text2); margin-top: 2px; }

/* ── Topics list ────────────────────────────────────── */
.ege-topics-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ege-topic-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: var(--ege-surface);
  border-radius: var(--ege-radius-sm);
  box-shadow: var(--ege-shadow);
  cursor: pointer;
  transition: transform 0.1s;
  gap: 8px;
}
.ege-topic-item:active { transform: scale(0.98); }
.ege-topic-name { font-size: 14px; font-weight: 500; flex: 1; }
.ege-topic-item svg { color: var(--ege-text3); flex-shrink: 0; }

/* ── Practice modes ─────────────────────────────────── */
.ege-practice-modes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ege-practice-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 18px 16px;
  background: var(--ege-surface);
  border: 1.5px solid var(--ege-border);
  border-radius: var(--ege-radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.ege-practice-card:active { transform: scale(0.98); border-color: var(--ege-primary); box-shadow: 0 0 0 3px rgba(91,106,191,0.12); }
.ege-prac-ico {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ege-grad-soft);
  border-radius: 12px;
  font-size: 22px;
  flex-shrink: 0;
}
.ege-prac-meta { flex: 1; text-align: left; }
.ege-prac-ttl { font-size: 15px; font-weight: 700; color: var(--ege-text); }
.ege-prac-sub { font-size: 12px; color: var(--ege-text2); margin-top: 2px; }
.ege-practice-card svg { color: var(--ege-text3); flex-shrink: 0; }

/* ── Tutor section ──────────────────────────────────── */
.ege-tutor-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 20px;
  background: var(--ege-grad);
  border-radius: var(--ege-radius);
  margin-bottom: 16px;
  color: #fff;
}
.ege-tutor-avatar {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  font-size: 28px;
}
.ege-tutor-title { font-size: 18px; font-weight: 700; }
.ege-tutor-sub { font-size: 13px; opacity: 0.85; margin-top: 2px; }

.ege-quick-commands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
.ege-qcmd {
  display: flex; flex-direction: column;
  padding: 16px;
  background: var(--ege-surface);
  border: 1.5px solid var(--ege-border);
  border-radius: var(--ege-radius);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  text-align: left;
}
.ege-qcmd:active { transform: scale(0.97); border-color: var(--ege-primary); box-shadow: 0 0 0 3px rgba(91,106,191,0.12); }
.ege-qcmd-ico { font-size: 24px; margin-bottom: 8px; }
.ege-qcmd-ttl { font-size: 14px; font-weight: 700; color: var(--ege-text); }
.ege-qcmd-sub { font-size: 11px; color: var(--ege-text2); margin-top: 4px; line-height: 1.3; }

.ege-tutor-input-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.ege-tutor-input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--ege-border);
  border-radius: var(--ege-radius-sm);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  background: var(--ege-surface);
  color: var(--ege-text);
  transition: border-color 0.15s;
  outline: none;
}
.ege-tutor-input:focus { border-color: var(--ege-primary); }
.ege-tutor-input::placeholder { color: var(--ege-text3); }
.ege-tutor-send {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ege-grad);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, opacity 0.15s;
}
.ege-tutor-send:active { transform: scale(0.9); opacity: 0.85; }

/* ── Profile tab ────────────────────────────────────── */
.ege-profile-card {
  padding: 24px 20px;
  background: var(--ege-grad);
  border-radius: var(--ege-radius);
  margin-bottom: 16px;
  color: #fff;
  text-align: center;
}
.ege-profile-level { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.ege-profile-xp-row {
  display: flex; align-items: center; gap: 10px;
}
.ege-profile-xp-bar {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.25);
  border-radius: 4px;
  overflow: hidden;
}
.ege-profile-xp-fill {
  height: 100%;
  background: #fff;
  border-radius: 4px;
  transition: width 0.6s ease;
}
.ege-profile-xp-txt { font-size: 13px; font-weight: 600; opacity: 0.9; white-space: nowrap; }

.ege-profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.ege-pstat {
  background: var(--ege-surface);
  border-radius: var(--ege-radius-sm);
  padding: 16px 10px;
  text-align: center;
  box-shadow: var(--ege-shadow);
}
.ege-pstat-v { font-size: 22px; font-weight: 800; color: var(--ege-primary); }
.ege-pstat-l { font-size: 12px; color: var(--ege-text2); margin-top: 4px; }

.ege-achievements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.ege-achievement {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  background: var(--ege-surface);
  border-radius: var(--ege-radius-sm);
  box-shadow: var(--ege-shadow);
  text-align: center;
}
.ege-achievement.locked { opacity: 0.4; filter: grayscale(1); }
.ege-achievement-ico { font-size: 24px; margin-bottom: 4px; }
.ege-achievement-name { font-size: 10px; color: var(--ege-text2); font-weight: 500; }

.ege-settings {
  display: flex; flex-direction: column;
  gap: 2px;
  background: var(--ege-surface);
  border-radius: var(--ege-radius-sm);
  box-shadow: var(--ege-shadow);
  overflow: hidden;
}
.ege-setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--ege-text);
  width: 100%;
  text-align: left;
  transition: background 0.15s;
}
.ege-setting-row:not(:last-child) { border-bottom: 1px solid var(--ege-border); }
.ege-setting-row:active { background: var(--ege-bg); }
.ege-setting-val { color: var(--ege-text3); font-size: 13px; }

/* ── Subject detail screen ──────────────────────────── */
.ege-subject-screen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  flex-direction: column;
  background: var(--ege-bg);
  z-index: 20;
  overflow-y: auto;
  padding-bottom: 80px;
}
.ege-subject-screen-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ege-border);
  position: sticky; top: 0; z-index: 5;
}
.ege-subject-screen-hero {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  background: var(--ege-grad-soft);
  text-align: center;
}
.ege-subject-screen-hero .ege-subject-icon-big { font-size: 48px; margin-bottom: 8px; }
.ege-subject-screen-hero .ege-subject-title { font-size: 20px; font-weight: 800; }
.ege-subject-screen-info {
  display: flex; gap: 12px;
  justify-content: center;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.ege-info-row { font-size: 13px; color: var(--ege-text2); }
.ege-info-row strong { color: var(--ege-text); font-weight: 700; margin-left: 4px; }
.ege-subject-screen-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 16px;
}
.ege-subject-action-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px;
  border-radius: var(--ege-radius-sm);
  border: 1.5px solid var(--ege-border);
  background: var(--ege-surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--ege-text);
  cursor: pointer;
  transition: all 0.15s;
}
.ege-subject-action-btn:active { transform: scale(0.97); border-color: var(--ege-primary); }
.ege-subject-action-btn.primary {
  background: var(--ege-grad);
  color: #fff;
  border-color: transparent;
}
.ege-subject-action-btn.primary:active { opacity: 0.9; }
.ege-subject-screen-topics {
  padding: 0 16px;
}
.ege-subject-screen-topics .ege-section-title { margin-top: 8px; }

/* ── In-app AI session (overlay chat) ───────────────── */
.ege-session {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  flex-direction: column;
  background: var(--ege-bg);
  z-index: 30;
}
.ege-session-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ege-border);
  flex-shrink: 0;
}
.ege-session-title { flex: 1; min-width: 0; }
.ege-session-title-main { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ege-session-title-sub { font-size: 11px; color: var(--ege-text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ege-session-new-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--ege-bg);
  color: var(--ege-primary);
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ege-session-new-btn:active { background: var(--ege-border); }
.ege-session-timer{display:flex;align-items:center;gap:4px;padding:6px 10px;background:var(--ege-border);border-radius:10px;font-size:11px;font-weight:700;color:var(--ege-text2);font-variant-numeric:tabular-nums;flex-shrink:0}
.ege-session-timer svg{opacity:.7}

.ege-session-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ege-msg {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
.ege-msg.user {
  align-self: flex-end;
  background: var(--ege-grad);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.ege-msg.assistant {
  align-self: flex-start;
  background: var(--ege-surface);
  color: var(--ege-text);
  box-shadow: var(--ege-shadow);
  border-bottom-left-radius: 6px;
}
.ege-msg.assistant p { margin: 0 0 8px; }
.ege-msg.assistant p:last-child { margin-bottom: 0; }
.ege-msg.typing {
  align-self: flex-start;
  background: var(--ege-surface);
  box-shadow: var(--ege-shadow);
  border-bottom-left-radius: 6px;
}
.ege-typing-dots {
  display: flex; gap: 4px; padding: 4px 0;
}
.ege-typing-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ege-text3);
  animation: ege-bounce 1.2s infinite;
}
.ege-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ege-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes ege-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

.ege-session-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 16px calc(10px + var(--ege-safe-bottom));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--ege-border);
  flex-shrink: 0;
}
.ege-session-input {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--ege-border);
  border-radius: 20px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  max-height: 100px;
  background: var(--ege-bg);
  color: var(--ege-text);
  outline: none;
  transition: border-color 0.15s;
}
.ege-session-input:focus { border-color: var(--ege-primary); }
.ege-session-input::placeholder { color: var(--ege-text3); }
.ege-session-send {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ege-grad);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, opacity 0.15s;
}
.ege-session-send:active { transform: scale(0.9); opacity: 0.85; }

/* ── Subject picker modal ───────────────────────────── */
.ege-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 300;
  display: none;
  align-items: flex-end;
  justify-content: center;
  animation: ege-fade-in 0.2s ease;
}
@keyframes ege-fade-in { from { opacity: 0; } to { opacity: 1; } }
.ege-modal-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  background: var(--ege-surface);
  border-radius: 20px 20px 0 0;
  padding: 8px 16px calc(20px + var(--ege-safe-bottom));
  overflow-y: auto;
  animation: ege-slide-up 0.3s ease;
}
@keyframes ege-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ege-modal-handle {
  width: 36px; height: 4px;
  background: var(--ege-border);
  border-radius: 2px;
  margin: 8px auto 16px;
}
.ege-modal-title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}
.ege-modal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ege-modal-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--ege-radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
  color: var(--ege-text);
}
.ege-modal-item:active { background: var(--ege-bg); }
.ege-modal-item.selected { background: var(--ege-grad-soft); font-weight: 700; }
.ege-modal-item-icon { font-size: 22px; }
.ege-modal-item-name { flex: 1; }

/* ── Flashcard UI ───────────────────────────────────── */
.ege-flashcard-container {
  perspective: 1000px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 20px;
}
.ege-flashcard {
  position: relative;
  width: 100%;
  min-height: 240px;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}
.ege-flashcard.flipped { transform: rotateY(180deg); }
.ege-flashcard-face {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
  border-radius: var(--ege-radius);
  box-shadow: var(--ege-shadow-lg);
  backface-visibility: hidden;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
}
.ege-flashcard-front {
  background: var(--ege-surface);
  color: var(--ege-text);
}
.ege-flashcard-back {
  background: var(--ege-grad);
  color: #fff;
  transform: rotateY(180deg);
}
.ege-flashcard-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.6;
  margin-bottom: 12px;
}
.ege-flashcard-text {
  font-size: 18px;
  font-weight: 600;
}
.ege-flashcard-hint {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 16px;
}
.ege-flashcard-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 360px;
  margin: 0 auto;
}
.ege-fc-btn {
  padding: 12px 8px;
  border-radius: var(--ege-radius-sm);
  border: 1.5px solid var(--ege-border);
  background: var(--ege-surface);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.ege-fc-btn:active { transform: scale(0.95); }
.ege-fc-btn.again { color: var(--ege-error); border-color: var(--ege-error); }
.ege-fc-btn.hard { color: var(--ege-warning); border-color: var(--ege-warning); }
.ege-fc-btn.good { color: var(--ege-success); border-color: var(--ege-success); }
.ege-fc-btn.easy { color: var(--ege-primary); border-color: var(--ege-primary); }

/* ── Quiz mode ──────────────────────────────────────── */
.ege-quiz-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.ege-quiz-progress {
  flex: 1; height: 6px;
  background: var(--ege-border);
  border-radius: 3px;
  overflow: hidden;
}
.ege-quiz-progress-fill {
  height: 100%;
  background: var(--ege-grad);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.ege-quiz-counter { font-size: 13px; font-weight: 600; color: var(--ege-text2); white-space: nowrap; }
.ege-quiz-timer {
  font-size: 13px; font-weight: 700; color: var(--ege-primary);
  display: flex; align-items: center; gap: 4px;
}
.ege-quiz-question {
  padding: 20px;
  background: var(--ege-surface);
  border-radius: var(--ege-radius);
  box-shadow: var(--ege-shadow);
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.6;
}
.ege-quiz-options {
  display: flex; flex-direction: column;
  gap: 8px;
}
.ege-quiz-option {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  background: var(--ege-surface);
  border: 1.5px solid var(--ege-border);
  border-radius: var(--ege-radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
}
.ege-quiz-option:active { transform: scale(0.98); }
.ege-quiz-option.selected { border-color: var(--ege-primary); background: rgba(91,106,191,0.06); }
.ege-quiz-option.correct { border-color: var(--ege-success); background: rgba(16,185,129,0.08); }
.ege-quiz-option.incorrect { border-color: var(--ege-error); background: rgba(239,68,68,0.06); }
.ege-quiz-option-letter {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ege-bg);
  font-size: 13px;
  font-weight: 700;
  color: var(--ege-text2);
  flex-shrink: 0;
  transition: all 0.15s;
}
.ege-quiz-option.selected .ege-quiz-option-letter { background: var(--ege-primary); color: #fff; }
.ege-quiz-option.correct .ege-quiz-option-letter { background: var(--ege-success); color: #fff; }
.ege-quiz-option.incorrect .ege-quiz-option-letter { background: var(--ege-error); color: #fff; }

/* ── Pomodoro timer ─────────────────────────────────── */
.ege-pomodoro {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--ege-grad-soft);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ege-primary);
}
.ege-pomodoro-time { font-variant-numeric: tabular-nums; }
.ege-pomodoro-btn {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--ege-primary);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

/* ── Analytics charts ───────────────────────────────── */
.ege-chart-card {
  background: var(--ege-surface);
  border-radius: var(--ege-radius);
  box-shadow: var(--ege-shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.ege-chart-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.ege-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 120px;
  padding-top: 8px;
}
.ege-bar {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.ege-bar-fill {
  width: 100%;
  max-width: 32px;
  background: var(--ege-grad);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  min-height: 2px;
}
.ege-bar-label { font-size: 10px; color: var(--ege-text3); }
.ege-bar-value { font-size: 10px; font-weight: 600; color: var(--ege-text2); }

/* ── Utilities ──────────────────────────────────────── */
.ege-empty-state {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  text-align: center;
}
.ege-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.ege-empty-text { font-size: 14px; color: var(--ege-text2); }
.ege-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.ege-badge.success { background: rgba(16,185,129,0.12); color: var(--ege-success); }
.ege-badge.warning { background: rgba(245,158,11,0.12); color: var(--ege-warning); }
.ege-badge.error { background: rgba(239,68,68,0.12); color: var(--ege-error); }
.ege-badge.info { background: rgba(91,106,191,0.12); color: var(--ege-primary); }

.ege-loading {
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.ege-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--ege-border);
  border-top-color: var(--ege-primary);
  border-radius: 50%;
  animation: ege-spin 0.8s linear infinite;
}
@keyframes ege-spin { to { transform: rotate(360deg); } }

/* ── Animations ─────────────────────────────────────── */
@keyframes ege-slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.ege-app[style*="display: flex"],
.ege-app[style*="display:flex"] {
  animation: ege-slide-in-right 0.25s ease;
}

/* ═══════════════════════════════ END VibeEGE CSS ════ */

/* ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════ */
/* Nutritionist App — MIX.APP Design System                       */
/* ═══════════════════════════════════════════════════════════════ */

.nut-app {
  --nut-accent:  #ef4444;
  --nut-accent2: #dc2626;
  --nut-grad:    linear-gradient(135deg, #501A1A 0%, #8A2A2A 100%);
  --nut-glow:    rgba(239,68,68,0.15);
  --nut-green:   #22c55e;
  --nut-amber:   #f59e0b;
  --nut-blue:    #3b82f6;

  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--text);
  overflow: hidden;
  padding: 0;                       /* override .overlay-page's padding-bottom:40px (nav is flex-pinned) */
  -webkit-font-smoothing: antialiased;
}

/* ── Top bar ──────────────────────────────────────────────────── */
.nut-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.nut-back-btn,
.nut-topbar-action {
  width: 40px;
  height: 40px;
  border-radius: var(--rx);
  border: none;
  background: transparent;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.nut-back-btn:active,
.nut-topbar-action:active { background: var(--surface2); }

.nut-topbar-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

/* ── Tab content ─────────────────────────────────────────────── */
.nut-tab-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 0;
  -webkit-overflow-scrolling: touch;
}
.nut-tab-content.nut-ai-wrap {
  display: flex;
  flex-direction: column;
  padding: 0;                       /* full-width chat; children (header/messages/composer) manage their own side padding */
}

/* ── Bottom nav ──────────────────────────────────────────────── */
.nut-bottom-nav {
  display: flex;
  height: 64px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nut-nav-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font);
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.nut-nav-btn.active { color: var(--nut-accent); }
.nut-nav-btn svg { transition: transform 0.15s; }
.nut-nav-btn:active svg { transform: scale(0.92); }

/* ── Date nav ─────────────────────────────────────────────────── */
.nut-date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 12px;
}

.nut-date-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--surface2);
  color: var(--text);
  border-radius: var(--rx);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.nut-date-btn:active { background: var(--surface3); }

.nut-date-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nut-date-label {
  font-size: 15px;
  font-weight: 600;
}

.nut-today-btn {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1px solid var(--nut-accent);
  background: transparent;
  color: var(--nut-accent);
  cursor: pointer;
  font-family: var(--font);
}

/* ── Calorie ring ─────────────────────────────────────────────── */
.nut-cal-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 16px;
}

.nut-cal-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.nut-cal-done {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--text);
}

.nut-cal-sep {
  font-size: 11px;
  color: var(--text2);
  margin: 2px 0;
}

.nut-cal-target {
  font-size: 12px;
  color: var(--text2);
  font-weight: 500;
}

/* Ring level colors */
#nut-cal-arc.level-good   { stroke: var(--nut-green); }
#nut-cal-arc.level-warn   { stroke: var(--nut-amber); }
#nut-cal-arc.level-over   { stroke: var(--nut-accent); }
#nut-cal-arc              { stroke: var(--nut-accent); }

/* ── Macro pills ──────────────────────────────────────────────── */
.nut-macro-pills {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.nut-macro-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
}

.nut-macro-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nut-macro-name { color: var(--text2); font-size: 12px; }
.nut-macro-val  { font-weight: 700; color: var(--text); }

/* ── Meal sections ────────────────────────────────────────────── */
.nut-meal-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 10px;
  overflow: hidden;
}

.nut-meal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.nut-meal-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nut-meal-icon { font-size: 16px; }

.nut-meal-name {
  font-size: 15px;
  font-weight: 600;
}

.nut-meal-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nut-meal-kcal {
  font-size: 13px;
  color: var(--text2);
}

.nut-meal-add {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--nut-glow);
  color: var(--nut-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 18px;
}
.nut-meal-add:active { background: rgba(239,68,68,0.25); }

.nut-meal-items { padding: 4px 0; }

/* ── Food item ────────────────────────────────────────────────── */
.nut-food-item {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  gap: 8px;
  transition: background 0.1s;
}
.nut-food-item:active { background: var(--surface2); transform: scale(0.98); }

.nut-food-name {
  flex: 1;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nut-food-grams {
  font-size: 12px;
  color: var(--text2);
  min-width: 36px;
  text-align: right;
}

.nut-food-kcal {
  font-size: 13px;
  font-weight: 600;
  min-width: 50px;
  text-align: right;
}

.nut-food-del {
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--dim);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.nut-food-del:active { color: var(--nut-accent); background: var(--nut-glow); }

.nut-meal-empty {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--dim);
  font-style: italic;
}

/* ── FAB ──────────────────────────────────────────────────────── */
.nut-fab {
  position: fixed;
  bottom: 76px;
  right: 20px;
  z-index: 210;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--nut-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(239,68,68,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.nut-fab:active { transform: scale(0.93); box-shadow: 0 2px 10px rgba(239,68,68,0.3); }

/* ── Normy tab ────────────────────────────────────────────────── */
.nut-profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.nut-profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nut-grad);
}

.nut-profile-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.nut-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.nut-profile-info { flex: 1; }
.nut-profile-name { font-size: 16px; font-weight: 700; }
.nut-profile-goal { font-size: 13px; color: var(--nut-accent); margin-top: 2px; }

.nut-edit-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  border-radius: var(--rx);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s;
}
.nut-edit-btn:active { color: var(--nut-accent); }

.nut-profile-stats {
  display: flex;
  gap: 0;
}

.nut-profile-stat {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-right: 1px solid var(--border);
}
.nut-profile-stat:last-child { border-right: none; }

.nut-stat-val { font-size: 18px; font-weight: 700; }
.nut-stat-lbl { font-size: 11px; color: var(--text2); margin-top: 2px; }

/* ── Target grid ──────────────────────────────────────────────── */
.nut-target-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.nut-target-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.nut-target-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
}
.nut-tc-kcal::after    { background: var(--nut-accent); }
.nut-tc-protein::after { background: #ef4444; }
.nut-tc-fat::after     { background: var(--nut-amber); }
.nut-tc-carbs::after   { background: var(--nut-blue); }

.nut-tc-icon { font-size: 20px; margin-bottom: 4px; }
.nut-tc-val  { font-size: 24px; font-weight: 800; }
.nut-tc-lbl  { font-size: 12px; color: var(--text2); }

/* ── Section label ────────────────────────────────────────────── */
.nut-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

/* ── Goal/Activity pills ──────────────────────────────────────── */
.nut-goal-pills,
.nut-activity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.nut-pill {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.nut-pill.active {
  background: var(--nut-glow);
  border-color: var(--nut-accent);
  color: var(--nut-accent);
  font-weight: 600;
}
.nut-pill:active { transform: scale(0.96); }

/* ── Recalc button ────────────────────────────────────────────── */
.nut-recalc-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--r);
  border: none;
  background: var(--nut-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.15s;
}
.nut-recalc-btn:active { opacity: 0.85; }

/* ── Stats tab ────────────────────────────────────────────────── */
.nut-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 12px;
}

.nut-week-label {
  font-size: 14px;
  font-weight: 600;
}

.nut-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  margin-bottom: 12px;
}

.nut-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Bar chart ────────────────────────────────────────────────── */
.nut-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 100px;
}

.nut-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.nut-bar-outer {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: flex-end;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  background: var(--surface2);
}

.nut-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  animation: nut-bar-grow 0.5s ease;
  transform-origin: bottom;
}

.nut-bar[data-level="good"] { background: var(--nut-green); }
.nut-bar[data-level="warn"] { background: var(--nut-amber); }
.nut-bar[data-level="over"] { background: var(--nut-accent); }
.nut-bar[data-level="none"] { background: var(--surface3); height: 4px !important; }

@keyframes nut-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.nut-bar-day {
  font-size: 10px;
  color: var(--text2);
  font-weight: 600;
}

.nut-bar-val {
  font-size: 9px;
  color: var(--dim);
}

/* ── Macro bars ───────────────────────────────────────────────── */
.nut-macro-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.nut-macro-bar-row:last-child { margin-bottom: 0; }

.nut-mbr-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text2);
  width: 60px;
  flex-shrink: 0;
}

.nut-mbr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nut-mbr-track {
  flex: 1;
  height: 6px;
  background: var(--surface2);
  border-radius: 3px;
  overflow: hidden;
}

.nut-mbr-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
  max-width: 100%;
}

.nut-mbr-val {
  font-size: 12px;
  font-weight: 600;
  min-width: 36px;
  text-align: right;
}

/* ── Summary row ──────────────────────────────────────────────── */
.nut-summary-row {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 12px;
  overflow: hidden;
}

.nut-summary-cell {
  flex: 1;
  text-align: center;
  padding: 14px 8px;
  border-right: 1px solid var(--border);
}
.nut-summary-cell:last-child { border-right: none; }

.nut-summary-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--nut-accent);
}

.nut-summary-lbl {
  font-size: 11px;
  color: var(--text2);
  margin-top: 3px;
}

/* ── AI tab ───────────────────────────────────────────────────── */
.nut-ai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 4px;
  flex-shrink: 0;
}

.nut-ai-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nut-grad);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.nut-ai-name {
  font-size: 16px;
  font-weight: 700;
}

.nut-ai-sub {
  font-size: 12px;
  color: var(--text2);
  margin-top: 2px;
}

/* ── Score ring ───────────────────────────────────────────────── */
.nut-score-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin-left: auto;
  flex-shrink: 0;
}

.nut-score-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--nut-accent);
}

.nut-score-lbl {
  font-size: 11px;
  color: var(--text2);
  padding: 0 16px 10px;
  flex-shrink: 0;
}

#nut-score-arc { stroke: var(--nut-accent); }

@keyframes nut-ring-fill {
  from { stroke-dashoffset: 364.4; }
}

/* ── Chips ────────────────────────────────────────────────────── */
.nut-chips-wrap {
  overflow-x: auto;
  padding: 0 16px 12px;
  flex-shrink: 0;
  scrollbar-width: none;
}
.nut-chips-wrap::-webkit-scrollbar { display: none; }

.nut-chips {
  display: flex;
  gap: 8px;
  width: max-content;
}

.nut-ai-chip {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--border-hi);
  background: var(--surface2);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.nut-ai-chip:active {
  background: var(--nut-glow);
  border-color: var(--nut-accent);
  color: var(--nut-accent);
}

/* ── AI messages ──────────────────────────────────────────────── */
.nut-ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.nut-msg { display: flex; }
.nut-msg-bot { justify-content: flex-start; }
.nut-msg-user { justify-content: flex-end; }

.nut-msg-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.nut-msg-bot .nut-msg-bubble {
  background: var(--surface2);
  border-bottom-left-radius: 4px;
}

.nut-msg-user .nut-msg-bubble {
  background: var(--nut-accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.nut-msg-typing .nut-msg-bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 16px;
}

.nut-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text2);
  animation: nut-bounce 1.2s infinite;
}
.nut-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.nut-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes nut-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-5px); }
}

/* ── AI composer ──────────────────────────────────────────────── */
.nut-ai-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 16px;                /* flush to bottom-nav (no extra gap) */
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.nut-ai-input {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 14px;
  resize: none;
  max-height: 120px;
  outline: none;
  line-height: 1.4;
  transition: border-color 0.2s;
}
.nut-ai-input:focus { border-color: var(--nut-accent); }
.nut-ai-input::placeholder { color: var(--dim); }

.nut-ai-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--nut-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.nut-ai-send:active { opacity: 0.8; }

/* ── Modal / Sheet ────────────────────────────────────────────── */
.nut-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: flex-end;
  animation: nut-fade-in 0.2s ease;
}

@keyframes nut-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nut-sheet {
  width: 100%;
  background: var(--surface);
  border-radius: var(--r) var(--r) 0 0;
  padding: 12px 20px 32px;
  animation: nut-slide-up 0.3s ease;
  max-height: 92vh;
  overflow-y: auto;
}

@keyframes nut-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.nut-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-hi);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.nut-sheet-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 16px;
  text-align: center;
}

/* ── Meal tabs in modal ───────────────────────────────────────── */
.nut-meal-tabs {
  display: flex;
  background: var(--surface2);
  border-radius: var(--rx);
  padding: 3px;
  margin-bottom: 16px;
}

.nut-mtab {
  flex: 1;
  padding: 7px 4px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-family: var(--font);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.nut-mtab.active {
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ── Form fields ──────────────────────────────────────────────── */
.nut-field-wrap {
  margin-bottom: 12px;
}

.nut-field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.nut-field-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.nut-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--rx);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.2s;
}
.nut-input:focus { border-color: var(--nut-accent); }

/* ── Autocomplete suggest ─────────────────────────────────────── */
.nut-suggest-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface2);
  border: 1px solid var(--border-hi);
  border-radius: var(--rx);
  z-index: 10;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  margin-top: 4px;
}

.nut-suggest-item {
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.nut-suggest-item:last-child { border-bottom: none; }
.nut-suggest-item:active { background: var(--surface3); }

/* ── КБЖУ preview ─────────────────────────────────────────────── */
.nut-kbju-preview {
  display: flex;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--rx);
  margin-bottom: 16px;
  overflow: hidden;
}

.nut-kbju-cell {
  flex: 1;
  text-align: center;
  padding: 10px 4px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nut-kbju-cell:last-child { border-right: none; }

.nut-kbju-val {
  font-size: 15px;
  font-weight: 700;
  display: block;
}

.nut-kbju-lbl {
  font-size: 10px;
  color: var(--text2);
}

/* ── Gender buttons ───────────────────────────────────────────── */
.nut-gender-btns {
  display: flex;
  gap: 8px;
}

.nut-gender-btn {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: var(--rx);
  background: var(--surface2);
  color: var(--text2);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
}
.nut-gender-btn.active {
  background: var(--nut-glow);
  border-color: var(--nut-accent);
  color: var(--nut-accent);
}

/* ── Save button ──────────────────────────────────────────────── */
.nut-save-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--r);
  border: none;
  background: var(--nut-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: opacity 0.15s;
  margin-top: 4px;
}
.nut-save-btn:active { opacity: 0.85; }

/* ── AI Insight card ──────────────────────────────────────── */
.nut-insight-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(239,68,68,0.07);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 8px 16px;
  flex-shrink: 0;
}

.nut-insight-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.nut-insight-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  opacity: 0.9;
}

/* ── Water tracker ────────────────────────────────────────── */
.nut-water-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 16px 12px;
  flex-shrink: 0;
}

.nut-water-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.nut-water-icon { font-size: 16px; }

.nut-water-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.nut-water-val {
  font-size: 12px;
  color: var(--dim);
}

.nut-water-bar-bg {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}

.nut-water-bar-fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.nut-water-btns {
  display: flex;
  gap: 8px;
}

.nut-water-btn {
  flex: 1;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: #3b82f6;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.nut-water-btn:active { background: rgba(59,130,246,0.15); }

.nut-water-reset {
  flex: 0;
  min-width: 40px;
  color: var(--dim);
  font-size: 16px;
}


/* ══════════════════════════════════════════════════════
   HABITS APP styles (Phase 0-2)
   ══════════════════════════════════════════════════════ */

.hab-app { display: none; flex-direction: column; padding: 0 0 90px; }

.hab-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
  background: rgba(8,8,8,0.92); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.hab-topbar-title { font-size: 17px; font-weight: 700; color: #fff; }
.hab-back-btn, .hab-add-btn {
  background: var(--surface2); border: 1px solid var(--border);
  color: #fff; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.15s;
}
.hab-back-btn:active, .hab-add-btn:active { background: var(--surface3); }

.hab-tab-content { padding: 20px 16px; }

/* Today progress */
.hab-progress-wrap { position: relative; display: flex; justify-content: center; margin-top: 8px; }
.hab-progress-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.hab-progress-num { font-size: 28px; font-weight: 700; color: #fff; line-height: 1; }
.hab-progress-lbl { font-size: 11px; color: var(--dim); margin-top: 3px; }
.hab-today-date { text-align: center; color: var(--dim); font-size: 13px; margin: 8px 0 14px; }

.hab-streak-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff; font-weight: 700; padding: 10px 16px;
  border-radius: 14px; margin-bottom: 14px; font-size: 14px;
}

.hab-week-row {
  display: flex; gap: 6px; margin-bottom: 16px;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
}
.hab-week-row::-webkit-scrollbar { display: none; }
.hab-week-day {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  min-width: 52px; flex-shrink: 0;
  scroll-snap-align: center;
  cursor: pointer;
  transition: transform .15s, border-color .2s, background .2s;
  user-select: none;
}
.hab-week-day:active { transform: scale(.95); }
.hab-week-day.today { border-color: var(--accent); }
.hab-week-day.selected {
  background: rgba(96,165,250,.15);
  border-color: #60a5fa;
  box-shadow: 0 0 0 1px #60a5fa;
}
.hab-week-day.selected.today {
  background: rgba(34,197,94,.15);
  border-color: #22c55e;
  box-shadow: 0 0 0 1px #22c55e;
}
.hab-week-day-name { font-size: 10px; color: var(--dim); text-transform: uppercase; font-weight: 600; }
.hab-week-day-num { font-size: 13px; color: #fff; font-weight: 700; line-height: 1; }
.hab-week-day.selected .hab-week-day-name { color: #fff; }
.hab-week-day-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.hab-week-day.done .hab-week-day-dot { background: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,.5); }
.hab-item.past-date { opacity: .9; }
.hab-item.past-date .hab-check-btn { border-color: rgba(96,165,250,.4); }
.hab-item.past-date.done .hab-check-btn { background: #60a5fa; border-color: #60a5fa; }

.hab-insight-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(155,92,232,0.15), rgba(96,165,250,0.12));
  border: 1px solid rgba(155,92,232,0.3);
  padding: 14px; border-radius: 14px; margin-bottom: 16px;
}
.hab-insight-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.hab-insight-text { color: #e5e5e5; font-size: 13px; line-height: 1.45; }
.hab-insight-text b { color: #fff; }

/* Habit list */
.hab-list { display: flex; flex-direction: column; gap: 10px; }
.hab-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid #22c55e; padding: 12px 14px; border-radius: 14px;
  transition: all 0.2s;
}
.hab-item.done { opacity: 0.55; }
.hab-check-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--border-hi); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.hab-item.done .hab-check-btn { background: #22c55e; border-color: #22c55e; }
.hab-item-info { flex: 1; min-width: 0; }
.hab-item-name { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.hab-item.done .hab-item-name { text-decoration: line-through; }
.hab-item-meta { color: var(--dim); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.hab-item-time { background: var(--surface2); padding: 2px 8px; border-radius: 10px; }
.hab-skip-btn {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--dim); width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 14px;
}
.hab-backdate-btn {
  background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.25);
  color: #60a5fa; width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 14px; margin-right: 4px;
}
.hab-backdate-btn:active { background: rgba(96,165,250,.2); transform: scale(.94); }
.hab-modal-sub { text-align:center; color: var(--dim); font-size: 14px; margin-top: -8px; margin-bottom: 14px; }
.hab-backdate-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 14px; }
.hab-backdate-day {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; font-family: inherit; text-align: left; transition: all .15s;
}
.hab-backdate-day:active { transform: scale(.98); }
.hab-backdate-day.done { border-color: #22c55e; background: rgba(34,197,94,.08); }
.hab-backdate-label { flex: 1; color: #fff; font-size: 14px; font-weight: 600; }
.hab-backdate-sub { color: var(--dim); font-size: 12px; }
.hab-backdate-check {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 16px; font-weight: 700; flex-shrink: 0;
}
.hab-backdate-day.done .hab-backdate-check { background: #22c55e; color: #fff; border-color: #22c55e; }
.hab-backdate-hint { text-align: center; color: var(--dim); font-size: 11px; margin: 8px 0 12px; }

.hab-empty { text-align: center; padding: 50px 20px; }
.hab-empty-ico { font-size: 48px; margin-bottom: 14px; }
.hab-empty-title { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.hab-empty-sub { color: var(--dim); font-size: 14px; margin-bottom: 20px; }
.hab-empty-btn {
  background: var(--accent); color: #fff; border: none;
  padding: 12px 24px; border-radius: 12px; font-weight: 600;
  cursor: pointer; font-size: 14px;
}

/* Stats tab */
.hab-xp-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: linear-gradient(135deg, #1e1b4b, #3730a3);
  border: 1px solid rgba(155,92,232,0.3);
  padding: 16px; border-radius: 16px; margin-bottom: 16px;
}
.hab-xp-level { color: #FBBF24; font-weight: 800; font-size: 22px; }
.hab-xp-title { color: #e5e5e5; font-size: 12px; }
.hab-xp-right { flex: 1; max-width: 55%; }
.hab-xp-pts { text-align: right; color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.hab-xp-bar-bg { height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
.hab-xp-bar-fill { height: 100%; background: linear-gradient(90deg, #9B5CE8, #D4698A); transition: width 0.4s; }

.hab-stats-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 20px;
}
.hab-stat-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px; border-radius: 12px; text-align: center;
}
.hab-stat-val { color: #fff; font-size: 24px; font-weight: 700; }
.hab-stat-lbl { color: var(--dim); font-size: 11px; margin-top: 4px; }

.hab-section-title { color: #fff; font-size: 14px; font-weight: 700; margin: 20px 0 10px; }

.hab-dow-chart {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; height: 150px;
}
.hab-dow-bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.hab-dow-bar-fill {
  width: 80%; background: linear-gradient(to top, #22c55e, #4ade80);
  border-radius: 4px 4px 0 0; transition: height 0.4s; margin-top: auto;
  min-height: 2px;
}
.hab-dow-bar-val { font-size: 10px; color: var(--dim); margin-top: 4px; }
.hab-dow-bar-name { font-size: 10px; color: var(--dim); text-transform: uppercase; }

.hab-heatmap {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px; border-radius: 14px;
}
.hab-hm-cell { aspect-ratio: 1; border-radius: 3px; }

.hab-habit-stats { display: flex; flex-direction: column; gap: 10px; }
.hab-per-item {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid #22c55e; padding: 12px 14px; border-radius: 12px;
}
.hab-per-name { color: #fff; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.hab-per-stats { display: flex; gap: 12px; color: var(--dim); font-size: 12px; }

/* Manage tab */
.hab-manage-list { display: flex; flex-direction: column; gap: 10px; }
.hab-manage-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid #22c55e; padding: 14px; border-radius: 14px;
}
.hab-manage-info { flex: 1; min-width: 0; }
.hab-manage-name { color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 3px; }
.hab-manage-meta { color: var(--dim); font-size: 12px; }
.hab-manage-actions { display: flex; gap: 6px; }
.hab-icon-action {
  background: var(--surface2); border: 1px solid var(--border);
  width: 36px; height: 36px; border-radius: 10px;
  color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hab-icon-action:active { background: var(--surface); }
.hab-ia-edit:hover, .hab-ia-edit:active { color: #f5c150; border-color: rgba(245,193,80,0.35); }
.hab-ia-del:hover,  .hab-ia-del:active  { color: #ef4444; border-color: rgba(239,68,68,0.35); }

/* Delete animation for habit manage cards — slide-right + fade + collapse */
.hab-manage-item {
  transform-origin: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hab-manage-item--removing {
  pointer-events: none;
  overflow: hidden;
  animation: hab-manage-delete 340ms cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
@keyframes hab-manage-delete {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  40% {
    opacity: 0.5;
    transform: translateX(32%) scale(0.98);
  }
  60% {
    opacity: 0;
    transform: translateX(110%) scale(0.95);
    height: auto;
    margin-top: 0;
    margin-bottom: 10px;
    padding-top: 14px;
    padding-bottom: 14px;
    border-width: 1px;
  }
  100% {
    opacity: 0;
    transform: translateX(110%) scale(0.9);
    height: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }
}
.hab-add-habit-fab {
  position: fixed; right: 20px; bottom: 100px;
  background: var(--accent); color: #fff; border: none;
  padding: 14px 22px; border-radius: 50px;
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(212,105,138,0.4);
  z-index: 5;
}

/* AI tab — pinned composer + chips above bottom-nav (like Marketing/Chef) */
.hab-tab-content.hab-ai-wrap {
  /* When AI tab is active, its composer + chips are fixed at the bottom.
     Reserve space so last message isn't hidden under them. */
  padding-bottom: 0 !important;
}
.hab-ai-header {
  /* Pinned at top below the topbar — does NOT scroll with chat */
  position: fixed;
  top: calc(var(--hab-top-h, 64px) + 6px);
  left: 8px; right: 8px;
  z-index: 8;
  display: flex; align-items: center; gap: 12px;
  background: rgba(18,18,20,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.hab-app { --hab-top-h: 64px; }
.hab-ai-avatar {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #b679f5, #7c3aed 55%, #4c1d95 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px rgba(124,58,237,0.35);
  animation: hab-ai-avatar-pulse 3.2s ease-in-out infinite;
}
.hab-ai-avatar svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.hab-ai-avatar-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e;
  border: 2px solid #0f0f10;
  box-shadow: 0 0 8px rgba(34,197,94,0.7);
}
@keyframes hab-ai-avatar-pulse {
  0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 24px rgba(124,58,237,0.35); }
  50%     { box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 8px 34px rgba(155,92,232,0.55); }
}
.hab-ai-name { color: #fff; font-weight: 700; font-size: 15px; }
.hab-ai-sub { color: var(--dim); font-size: 12px; }

.hab-ai-messages {
  display: flex; flex-direction: column; gap: 10px;
  /* Top clearance = topbar (64px) + gap (6px) + ai-header (~66px) + breathing (14px) = ~150px.
     Bottom clearance for fixed dock (chips+composer) + nav.
     Side padding reduced (6px) so bubbles sit closer to screen edges. */
  padding: 150px 6px 185px;
  overflow: visible;
}
.hab-ai-msg { display: flex; min-width: 0; }
.hab-ai-msg-bot { justify-content: flex-start; }
.hab-ai-msg-user { justify-content: flex-end; }
.hab-ai-bubble {
  max-width: min(92%, calc(100vw - 20px));   /* wider bubbles, hug edges */
  min-width: 0;
  padding: 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.4;
  overflow-wrap: anywhere;
}
.hab-ai-msg-bot .hab-ai-bubble {
  background: var(--surface); border: 1px solid var(--border); color: #e5e5e5;
  border-bottom-left-radius: 4px;
}
.hab-ai-msg-user .hab-ai-bubble {
  background: linear-gradient(135deg, #9B5CE8, #D4698A); color: #fff;
  border-bottom-right-radius: 4px;
}

/* Welcome/quick-start chips (shown dynamically when chat empty) —
   unified to the same style as .hab-ai-chip below. */
.hab-ai-quick { padding: 4px 16px 8px !important; }
.hab-ai-quick-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: #fff;
  padding: 7px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  transition: background 0.15s;
}
.hab-ai-quick-btn:active { background: rgba(155,92,232,0.2); }

/* Single fixed dock: holds both chips (always visible) and composer, pinned above bottom-nav */
.hab-ai-dock {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--hab-nav-h, 66px) + env(safe-area-inset-bottom, 0px));
  z-index: 9;
  background: rgba(8,8,8,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

.hab-ai-chips {
  display: flex; flex-wrap: nowrap; gap: 6px;
  padding: 10px 16px 8px;              /* 8px under chips → matches composer padding-bottom */
  overflow-x: auto;
  scrollbar-width: none;
}
.hab-ai-chips::-webkit-scrollbar { display: none; }
.hab-ai-chip {
  flex-shrink: 0;
  background: var(--surface2); border: 1px solid var(--border);
  color: #fff; padding: 7px 12px; border-radius: 50px;
  font-size: 12px; cursor: pointer;
  white-space: nowrap;
}

/* Composer inside dock — symmetric gap above/below textarea */
.hab-ai-composer {
  display: flex; gap: 8px; align-items: center;
  padding: 0 16px 8px;                 /* 8px under textarea (to nav) · chips provides 8px above */
  background: transparent;
  border: none;
  border-radius: 0;
}
.hab-ai-input {
  flex: 1;
  min-height: 40px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: #fff;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 12px;
  resize: none;
  max-height: 120px;
  outline: none;
  transition: border-color 0.2s;
}
.hab-ai-input:focus { border-color: var(--accent); }
.hab-ai-input::placeholder { color: var(--dim); }
.hab-ai-send {
  background: var(--accent); color: #fff; border: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}

/* Bottom-nav actual height: padding 8/14 + btn (6+20+3+10+6) = 45 → 8+45+14 ≈ 67-69px.
   Match exactly so dock sits flush to nav (no visible gap, no overlap). */
.hab-app { --hab-nav-h: 69px; }

/* Bottom nav */
.hab-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(8,8,8,0.95); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border); padding: 8px 0 14px;
  z-index: 10;
}
.hab-nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--dim); cursor: pointer;
  padding: 6px 0; font-size: 10px;
  transition: color 0.15s;
}
.hab-nav-btn.active { color: var(--accent); }
.hab-nav-btn svg { opacity: 0.8; }
.hab-nav-btn.active svg { opacity: 1; }

/* Toast */
.hab-toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-150%);
  background: linear-gradient(135deg, #FBBF24, #F97316); color: #fff;
  padding: 12px 20px; border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 10px 30px rgba(251,191,36,0.4);
  z-index: 300; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 260px;
}
.hab-toast.show { transform: translateX(-50%) translateY(0); }
.hab-toast-title { font-size: 11px; opacity: 0.85; font-weight: 500; }
#hab-toast-name { font-size: 14px; font-weight: 700; }
#hab-toast-icon { font-size: 24px; }

/* Modal */
.hab-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 400; animation: habFadeIn 0.2s;
}
@keyframes habFadeIn { from { opacity: 0; } to { opacity: 1; } }
.hab-modal-sheet {
  background: var(--surface); border-radius: 20px 20px 0 0;
  width: 100%; max-width: 500px; max-height: 90vh;
  overflow-y: auto; padding: 16px 20px 30px;
  border: 1px solid var(--border); border-bottom: none;
  animation: habSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes habSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.hab-modal-handle {
  width: 40px; height: 4px; background: rgba(255,255,255,0.2);
  border-radius: 2px; margin: 0 auto 14px;
}
.hab-modal-title { color: #fff; font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 18px; }
.hab-modal-label { color: var(--dim); font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 14px 0 8px; }

.hab-icon-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hab-icon-btn {
  aspect-ratio: 1; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; font-size: 20px; cursor: pointer;
}
.hab-icon-btn.active { background: var(--accent); border-color: var(--accent); }

.hab-modal-input {
  width: 100%; background: var(--surface2); border: 1px solid var(--border);
  color: #fff; padding: 12px 14px; border-radius: 10px; font-size: 14px;
  font-family: var(--font); outline: none;
  box-sizing: border-box;
}
.hab-modal-input:focus { border-color: var(--accent); }

/* Native <select> with same dimensions as text inputs */
select.hab-modal-input {
  width: 100%;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;   /* space for chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-color: var(--surface2);
  cursor: pointer;
}

.hab-priority-row, .hab-freq-row { display: flex; gap: 6px; }
.hab-priority-btn, .hab-freq-btn {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  color: #fff; padding: 10px; border-radius: 10px; font-size: 12px;
  cursor: pointer;
}
.hab-priority-btn.active, .hab-freq-btn.active { background: var(--accent); border-color: var(--accent); }

.hab-color-picker { display: flex; gap: 8px; }
.hab-color-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid transparent; cursor: pointer;
}
.hab-color-btn.active { border-color: #fff; }

.hab-modal-save {
  width: 100%; background: var(--accent); color: #fff; border: none;
  padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 700;
  margin-top: 20px; cursor: pointer;
}
.hab-modal-cancel {
  width: 100%; background: transparent; color: var(--dim); border: none;
  padding: 10px; font-size: 13px; cursor: pointer; margin-top: 6px;
}

/* Skip modal */
.hab-skip-modal { z-index: 401; }
.hab-skip-reasons { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hab-skip-reason-btn {
  background: var(--surface2); border: 1px solid var(--border);
  color: #fff; padding: 14px; border-radius: 10px; font-size: 14px;
  text-align: left; cursor: pointer;
}
.hab-skip-reason-btn:active { background: var(--surface3); }

/* ══════════════════════════════════════════════════════
   FINANCE APP styles (Phase 0-1)
   ══════════════════════════════════════════════════════ */

.fin-app { display: none; flex-direction: column; padding: 0 0 90px; }

.fin-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
  background: rgba(8,8,8,0.92); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.fin-topbar-title { font-size: 17px; font-weight: 700; color: #fff; }
.fin-back-btn, .fin-settings-btn {
  background: var(--surface2); border: 1px solid var(--border);
  color: #fff; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

.fin-tab-content { padding: 20px 16px; }

/* Hero: income */
.fin-hero {
  background: linear-gradient(135deg, #0D4A2A, #1B8A4A);
  border-radius: 20px; padding: 20px 24px;
  margin-bottom: 16px; text-align: center;
  box-shadow: 0 6px 24px rgba(27,138,74,0.25);
}
.fin-hero-label { color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 500; letter-spacing: 0.3px; }
.fin-hero-income { color: #fff; font-size: 32px; font-weight: 800; margin: 6px 0 4px; }
.fin-hero-meta { color: rgba(255,255,255,0.8); font-size: 12px; }

/* Score ring */
.fin-score-card {
  position: relative; display: flex; justify-content: center; align-items: center;
  margin: 10px 0 18px;
}
.fin-score-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.fin-score-val { color: #fff; font-size: 28px; font-weight: 800; line-height: 1; }
.fin-score-lbl { color: var(--dim); font-size: 10px; margin-top: 4px; max-width: 80px; text-align: center; }

.fin-risk-banner {
  display: none; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px; margin-bottom: 14px;
  font-size: 13px; font-weight: 600;
}
.fin-risk-banner.warn { background: rgba(251,191,36,0.15); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
.fin-risk-banner.danger { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }

.fin-quick-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 20px;
}
.fin-quick-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px; border-radius: 14px; text-align: center;
}
.fin-quick-val { color: #fff; font-size: 18px; font-weight: 700; }
.fin-quick-lbl { color: var(--dim); font-size: 11px; margin-top: 4px; }

.fin-section-title { color: #fff; font-size: 14px; font-weight: 700; margin: 20px 0 10px; }

/* Category list */
.fin-cat-list { display: flex; flex-direction: column; gap: 10px; }
.fin-cat-row {
  background: var(--surface); border: 1px solid var(--border);
  padding: 12px 14px; border-radius: 12px;
}
.fin-cat-head {
  display: flex; justify-content: space-between; color: #fff;
  font-size: 13px; margin-bottom: 6px;
}
.fin-cat-val { color: #22c55e; font-weight: 700; }
.fin-cat-bar { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; overflow: hidden; }
.fin-cat-bar-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); transition: width 0.4s; }

.fin-empty-inline {
  text-align: center; color: var(--dim); font-size: 13px;
  padding: 20px; background: var(--surface); border-radius: 12px;
  border: 1px dashed var(--border);
}

/* Goals */
.fin-goals-list { display: flex; flex-direction: column; gap: 10px; }
.fin-goal-card {
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px; border-radius: 14px;
}
.fin-goal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fin-goal-name { color: #fff; font-weight: 600; font-size: 15px; }
.fin-goal-del {
  background: transparent; border: none; color: var(--dim);
  font-size: 16px; cursor: pointer;
}
.fin-goal-amt { color: var(--dim); font-size: 12px; margin-bottom: 8px; }
.fin-goal-bar { height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.fin-goal-bar-fill { height: 100%; background: linear-gradient(90deg, #9B5CE8, #D4698A); transition: width 0.5s; }
.fin-goal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.fin-goal-pct { color: #fff; font-weight: 700; font-size: 13px; }
.fin-goal-fund {
  background: var(--accent); color: #fff; border: none;
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer;
}

/* Spends/obligations list */
.fin-list { display: flex; flex-direction: column; gap: 10px; }
.fin-date-group { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 6px 0; }
.fin-date-head {
  display: flex; justify-content: space-between; padding: 8px 14px 6px;
  color: var(--dim); font-size: 12px; text-transform: uppercase; font-weight: 600;
}
.fin-date-total { color: #22c55e; }

.fin-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--border);
}
.fin-date-group .fin-row:first-of-type { border-top: 1px solid var(--border); }
.fin-row-info { flex: 1; min-width: 0; }
.fin-row-name { color: #fff; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-row-meta { color: var(--dim); font-size: 12px; margin-top: 2px; }
.fin-row-amt { color: #fff; font-weight: 700; font-size: 14px; }
.fin-row-amt.neg { color: #ef4444; }
.fin-row-del {
  background: transparent; border: none; color: var(--dim);
  font-size: 16px; cursor: pointer; width: 28px; height: 28px;
}

/* Obligations list (no date grouping) */
#fin-obl-list {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 0;
}
#fin-obl-list .fin-row { border-top: 1px solid var(--border); }
#fin-obl-list .fin-row:first-child { border-top: none; }
.fin-row.obl.paid .fin-row-name { text-decoration: line-through; opacity: 0.6; }
.fin-row.obl.paid .fin-row-amt { opacity: 0.6; }
.fin-obl-check {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border-hi); background: transparent;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fin-row.obl.paid .fin-obl-check { background: #22c55e; border-color: #22c55e; }

.fin-ops-filters{display:flex;gap:6px;padding:0 0 12px;overflow-x:auto}
.fin-ops-filters::-webkit-scrollbar{display:none}
.fin-ops-filter{min-height:32px;padding:8px 14px;border-radius:16px;font-size:12px;font-weight:600;background:var(--surface);border:1px solid var(--border);color:var(--text2);cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .2s}
.fin-ops-filter.active{background:rgba(155,92,232,.15);border-color:rgba(155,92,232,.3);color:#9B5CE8}
.fin-op-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.fin-op-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.fin-op-icon.expense{background:rgba(239,68,68,.1)}
.fin-op-icon.income{background:rgba(34,197,94,.1)}
.fin-op-info{flex:1;min-width:0}
.fin-op-name{font-size:14px;font-weight:600;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fin-op-cat{font-size:11px;color:var(--text3);margin-top:1px}
.fin-op-right{text-align:right;flex-shrink:0}
.fin-op-amount{font-size:14px;font-weight:700}
.fin-op-amount.expense{color:#ef4444}
.fin-op-amount.income{color:#22c55e}
.fin-op-date{font-size:10px;color:var(--text3);margin-top:1px}
.fin-op-del{width:28px;height:28px;border-radius:6px;background:transparent;border:none;color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;opacity:0;transition:opacity .2s}
.fin-op-item:hover .fin-op-del,.fin-op-item:active .fin-op-del{opacity:1}
.fin-empty {
  text-align: center; padding: 60px 20px;
}
.fin-empty-ico { font-size: 48px; margin-bottom: 14px; }
.fin-empty-title { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.fin-empty-sub { color: var(--dim); font-size: 14px; }

/* FAB */
.fin-fab {
  position: fixed; right: 20px; bottom: 90px;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, #1B8A4A, #22c55e); color: #fff;
  border: none; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 6px 20px rgba(27,138,74,0.5);
  z-index: 6;
}

/* Bottom nav */
.fin-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(8,8,8,0.95); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border); padding: 8px 0 14px;
  z-index: 10;
}
.fin-nav-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: var(--dim); cursor: pointer;
  padding: 6px 0; font-size: 10px;
}
.fin-nav-btn.active { color: #22c55e; }
.fin-nav-btn svg { opacity: 0.8; }
.fin-nav-btn.active svg { opacity: 1; }

/* AI tab */
.fin-ai-header {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px; border-radius: 14px; margin-bottom: 14px;
}
.fin-ai-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #1B8A4A, #22c55e);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.fin-ai-name { color: #fff; font-weight: 700; font-size: 15px; }
.fin-ai-sub { color: var(--dim); font-size: 12px; flex: 1; }
.fin-ai-refresh {
  background: var(--surface2); border: 1px solid var(--border);
  color: #fff; width: 36px; height: 36px; border-radius: 10px;
  cursor: pointer; font-size: 14px;
}

.fin-insights-list { display: flex; flex-direction: column; gap: 10px; }
.fin-insight-stub {
  text-align: center; color: var(--dim); font-size: 13px;
  padding: 30px 20px; background: var(--surface); border-radius: 12px;
  border: 1px dashed var(--border);
}
.fin-insight-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  padding: 14px; border-radius: 14px;
}
.fin-insight-card.warn { border-color: rgba(251,191,36,0.35); background: rgba(251,191,36,0.06); }
.fin-insight-card.danger { border-color: rgba(239,68,68,0.35); background: rgba(239,68,68,0.06); }
.fin-insight-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.fin-insight-body { flex: 1; }
.fin-insight-title { color: #fff; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.fin-insight-text { color: #e5e5e5; font-size: 13px; line-height: 1.45; }

/* Add modal type row */
.fin-type-row { display: flex; gap: 6px; }
.fin-type-btn {
  flex: 1; background: var(--surface2); border: 1px solid var(--border);
  color: #fff; padding: 10px; border-radius: 10px; font-size: 12px;
  cursor: pointer;
}
.fin-type-btn.active { background: #22c55e; border-color: #22c55e; }

/* ══════════════════════════════════════════════════════
   MIX.APP shell polish (top 10)
   ══════════════════════════════════════════════════════ */

/* #4 + #10: Greeting bar + streak chip */
.greeting-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px 8px;
}
.greeting-text-wrap { flex: 1; min-width: 0; }

/* === MX Gamification Widget === */
.mx-gw {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 4px 16px 12px; padding: 12px 14px;
  background: var(--grad-glow);
  border: 1px solid rgba(212,105,138,.22);
  border-radius: 16px; cursor: pointer;
  transition: transform .15s, box-shadow .2s;
}
.mx-gw:active { transform: scale(.98); }
.mx-gw__left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mx-gw__level-ring { position: relative; flex-shrink: 0; }
.mx-gw__level-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: #fff; line-height: 1;
}
.mx-gw__info { min-width: 0; }
.mx-gw__xp { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.1; }
.mx-gw__xp b { color: #fff; font-weight: 800; }
.mx-gw__next { font-size: 11px; color: var(--text2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-gw__right { display: flex; gap: 6px; flex-shrink: 0; }
.mx-gw__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 50px;
  font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
}
.mx-gw__chip--fire { background: rgba(251,146,60,.14); border-color: rgba(251,146,60,.25); color: #FDBA74; }
.mx-gw__chip--gem { background: rgba(155,92,232,.18); border-color: rgba(155,92,232,.32); color: #C89BF4; }

/* === XP toast === */
.mx-xp-toast {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-20px);
  z-index: 99999; pointer-events: none; opacity: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 50px;
  background: var(--grad);
  color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 8px 24px rgba(212,105,138,.4), 0 0 60px rgba(155,92,232,.22);
  transition: opacity .3s, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.mx-xp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mx-xp-toast .mx-xp-toast-icon { font-size: 18px; }

/* Streak milestone confetti overlay hook (reuse existing _habConfetti if present) */
.mx-streak-milestone {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 99999; pointer-events: none;
  padding: 20px 32px; border-radius: 20px;
  background: linear-gradient(135deg, #FB923C, #EF4444);
  color: #fff; font-size: 20px; font-weight: 900;
  box-shadow: 0 12px 48px rgba(251,146,60,.5);
  animation: mx-milestone-pop 2s ease-out forwards;
}
@keyframes mx-milestone-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  25% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.9); }
}
.greeting-text {
  color: #fff; font-size: 17px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.greeting-text b { color: var(--accent); }
.greeting-date {
  color: var(--dim); font-size: 12px; margin-top: 2px;
  text-transform: capitalize;
}
.greeting-streak {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff; padding: 8px 14px; border-radius: 20px;
  font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
  flex-shrink: 0;
  animation: mxStreakPulse 2.5s ease-in-out infinite;
}
@keyframes mxStreakPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* #1: Dashboard widget */
.dash-widget {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 0 16px; margin-bottom: 16px;
}
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 12px 10px;
  text-align: left; cursor: pointer;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
  font-family: inherit; color: inherit;
  position: relative; overflow: hidden;
}
.dash-card:active { transform: scale(0.97); background: var(--surface2); }
.dash-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
.dash-card-header {
  color: var(--dim); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
  margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-card-big {
  color: #fff; font-size: 24px; font-weight: 800; line-height: 1;
  margin-bottom: 4px;
}
.dash-card-denom {
  color: var(--dim); font-size: 14px; font-weight: 500; margin-left: 2px;
}
.dash-card-sub {
  color: var(--dim); font-size: 11px; margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-card-bar {
  height: 4px; background: rgba(255,255,255,0.07);
  border-radius: 2px; overflow: hidden;
}
.dash-card-bar-fill {
  height: 100%; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 2px;
}

/* #6: Skeleton loader */
.dash-skeleton {
  height: 56px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: mxShimmer 1.5s ease-in-out infinite;
}
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  animation: mxShimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes mxShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* #2: Recently used bots */
.recent-bots-container {
  padding: 0 16px; margin-bottom: 16px;
}
.recent-bots-label {
  color: var(--dim); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.recent-bots-row {
  display: flex; gap: 8px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 4px;
}
.recent-bots-row::-webkit-scrollbar { display: none; }
.recent-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 50px; padding: 6px 14px 6px 6px;
  cursor: pointer; flex-shrink: 0;
  color: #fff; font-size: 13px; font-weight: 500;
  font-family: inherit;
  transition: background 0.15s, transform 0.15s;
}
.recent-chip:active { background: var(--surface2); transform: scale(0.96); }
.recent-chip img {
  width: 28px; height: 28px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}

/* #5: Market search + category chips */
.market-search-wrap {
  position: relative;
  margin: 0 16px 12px;
}
.market-search-ico {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%); color: var(--dim);
  pointer-events: none;
}
.market-search-input {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50px; color: #fff;
  padding: 12px 16px 12px 40px;
  font-family: var(--font); font-size: 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.market-search-input::placeholder { color: var(--dim); }
.market-search-input:focus {
  border-color: var(--accent);
  background: var(--surface2);
}

.market-cat-chips {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding: 0 16px 12px;
  margin-top: -4px;
}
.market-cat-chips::-webkit-scrollbar { display: none; }
.cat-chip {
  background: var(--surface); border: 1px solid var(--border);
  color: #fff; padding: 7px 14px; border-radius: 50px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; flex-shrink: 0;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.cat-chip:active { transform: scale(0.96); }
.cat-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* #3: Bot avatar badges (prepared hook) */
.bot-item { position: relative; }
.bot-badge {
  position: absolute; top: 8px; right: 8px;
  min-width: 20px; height: 20px;
  background: #ef4444; color: #fff;
  border-radius: 50px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  padding: 0 6px;
  box-shadow: 0 2px 6px rgba(239,68,68,0.5);
  z-index: 2;
  animation: mxBadgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes mxBadgePop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* #9: FAQ v2 — iOS Settings style (single grouped card with dividers) */
.faq-list--v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.faq-list--v2 .faq-item {
  background: transparent;
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
  overflow: hidden;
  transition: background 0.15s;
}
.faq-list--v2 .faq-item:first-child { border-top: none; }
.faq-list--v2 .faq-item:active { background: rgba(255,255,255,0.03); }
.faq-list--v2 .faq-item.open { background: rgba(255,255,255,0.02); }
.faq-list--v2 .faq-q {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
  cursor: pointer;
  color: #fff; font-size: 15px; font-weight: 500;
}
.faq-list--v2 .faq-ico {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
  opacity: 0.85;
  background: none; border: none;
}
.faq-list--v2 .faq-q-text {
  flex: 1; min-width: 0;
  color: #fff;
}
.faq-list--v2 .faq-arrow {
  color: var(--dim); font-size: 11px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  transform: rotate(-90deg);
}
.faq-list--v2 .faq-item.open .faq-arrow { transform: rotate(0deg); }
.faq-list--v2 .faq-a {
  max-height: 0; overflow: hidden;
  padding: 0 18px 0 56px;
  color: #a0a0a0; font-size: 13px; line-height: 1.55;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s;
}
.faq-list--v2 .faq-item.open .faq-a {
  max-height: 240px;
  padding: 0 18px 16px 56px;
}

/* #8: Smoother overlay transitions (extends existing) */
.overlay-page {
  animation: mxSlideInSmooth 0.32s cubic-bezier(0.25, 1.02, 0.5, 1);
}
@keyframes mxSlideInSmooth {
  from { transform: translateX(8%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

/* Dashboard cards responsive for very narrow screens */
@media (max-width: 360px) {
  .dash-card-big { font-size: 20px; }
  .dash-card-header { font-size: 10px; }
  .dash-card { padding: 10px 8px; }
  .dash-card-sub { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════
   FINANCE APP v2 — density, gradients, sparklines
   ══════════════════════════════════════════════════════ */

/* #1 Hero: «Можно тратить сегодня» */
.fin-hero-v2 {
  position: relative;
  background:
    radial-gradient(ellipse at top right, rgba(34,197,94,0.25), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(27,138,74,0.3), transparent 55%),
    linear-gradient(135deg, #0a3522, #0f4b2e);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 20px;
  padding: 20px 22px 22px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(10,53,34,0.5);
}
.fin-hero-v2::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(34,197,94,0.2), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}
.fin-hero-v2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}
.fin-hero-v2 .fin-hero-label {
  position: relative;
  color: rgba(255,255,255,0.68);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fin-hero-safe {
  position: relative;
  color: #fff;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 10px rgba(34,197,94,0.4);
}
.fin-hero-meta-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 500;
}
.fin-hero-dot { color: rgba(255,255,255,0.4); font-size: 10px; }

/* #8 Pills row */
.fin-pill-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.fin-income-summary{padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:14px}
.fin-income-row{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.fin-income-item{display:flex;align-items:center;gap:5px;font-size:13px;color:var(--text2)}
.fin-income-item b{color:var(--text1)}
.fin-income-plus svg{color:#22c55e}
.fin-income-minus svg{color:#ef4444}
.fin-income-balance{text-align:center;font-size:14px;font-weight:600;color:var(--text1);padding-top:8px;border-top:1px solid var(--border)}
.fin-income-balance b{color:#22c55e}
.fin-budget-suggest{padding:12px 14px;background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(59,130,246,.08));border:1px solid rgba(34,197,94,.15);border-radius:14px;margin-bottom:14px}
.fin-budget-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#22c55e;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.fin-budget-text{font-size:13px;line-height:1.5;color:var(--text2);white-space:pre-wrap}
.fin-forecast-block{padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;margin-bottom:14px}
.fin-forecast-title{font-size:13px;font-weight:700;color:var(--text1);margin-bottom:8px}
.fin-forecast-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text2);margin-bottom:6px}
.fin-forecast-bar{height:6px;border-radius:3px;background:var(--dim,rgba(255,255,255,.06));overflow:hidden;margin-bottom:6px}
.fin-forecast-fill{height:100%;border-radius:3px;transition:width .5s}
.fin-forecast-status{font-size:13px;font-weight:600;margin-bottom:2px}
.fin-forecast-hint{font-size:11px;color:var(--text3)}
.fin-smart-notifs{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.fin-notif{padding:8px 12px;border-radius:10px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px}
.fin-notif-danger{background:rgba(239,68,68,.1);color:#fca5a5;border:1px solid rgba(239,68,68,.2)}
.fin-notif-warn{background:rgba(251,191,36,.1);color:#fde68a;border:1px solid rgba(251,191,36,.2)}
.fin-notif-success{background:rgba(34,197,94,.1);color:#86efac;border:1px solid rgba(34,197,94,.2)}
.fin-notif-info{background:rgba(59,130,246,.1);color:#93c5fd;border:1px solid rgba(59,130,246,.2)}
.fin-ai-loading{animation:fin-ai-pulse 1.5s ease-in-out infinite}
@keyframes fin-ai-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.fin-analytics-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.fin-an-metric{padding:12px 10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;text-align:center}
.fin-an-metric-val{font-size:16px;font-weight:700;color:var(--text1)}
.fin-an-metric-label{font-size:11px;color:var(--text3);margin-top:2px}
.fin-chart-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:12px}
.fin-chart-title{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.fin-chart-wrap{width:100%;overflow:hidden}
.fin-chart-wrap svg{width:100%;height:auto;display:block}
.fin-chart-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px}
.fin-chart-legend-item{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text2)}
.fin-chart-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fin-export-btn{width:100%;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;color:var(--text2);font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.fin-export-btn:active{background:rgba(155,92,232,.1);border-color:rgba(155,92,232,.3)}
.fin-settings-hint{font-size:11px;color:var(--text3);margin-top:4px;margin-bottom:8px}
.fin-import-area{display:flex;gap:8px;margin-top:6px}
.fin-import-btn{flex:1;padding:10px 8px;background:var(--surface);border:1px dashed var(--border);border-radius:10px;color:var(--text2);font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;transition:all .2s}
.fin-import-btn:active{background:rgba(155,92,232,.08);border-color:rgba(155,92,232,.3);border-style:solid}
.fin-import-btn-big{width:100%;padding:20px;background:var(--surface);border:2px dashed var(--border);border-radius:14px;color:var(--text2);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0;transition:all .2s}
.fin-import-btn-big:active{background:rgba(155,92,232,.08);border-color:rgba(155,92,232,.4);border-style:solid}
.fin-import-btn-big svg{color:var(--text3)}
.fin-import-hint{font-size:11px;color:var(--text3);font-weight:400}
.fin-import-preview{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.fin-import-thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;border:1px solid var(--border)}
.fin-import-count{font-size:12px;color:var(--text2);margin-bottom:6px;font-weight:600}
.fin-import-status{padding:12px;border-radius:10px;font-size:13px;text-align:center;margin:8px 0}
.fin-import-status.loading{background:rgba(59,130,246,.1);color:#93c5fd;border:1px solid rgba(59,130,246,.2)}
.fin-import-status.success{background:rgba(34,197,94,.1);color:#86efac;border:1px solid rgba(34,197,94,.2)}
.fin-import-status.error{background:rgba(239,68,68,.1);color:#fca5a5;border:1px solid rgba(239,68,68,.2)}
.fin-import-analyze-btn{width:100%;padding:12px;background:linear-gradient(135deg,#9B5CE8,#3B82F6);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0}
.fin-import-analyze-btn:disabled{opacity:.5;cursor:not-allowed}
.fin-onboarding-card{padding:16px;background:linear-gradient(135deg,rgba(155,92,232,.1),rgba(59,130,246,.08));border:1px solid rgba(155,92,232,.2);border-radius:16px;margin-bottom:14px;text-align:center}
.fin-onboarding-title{font-size:16px;font-weight:700;color:var(--text1);margin-bottom:6px}
.fin-onboarding-sub{font-size:13px;color:var(--text2);margin-bottom:12px}
.fin-onboarding-btn{padding:10px 24px;background:linear-gradient(135deg,#9B5CE8,#6366f1);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.fin-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.fin-pill::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,0.5), transparent);
}
.fin-pill-label {
  color: var(--dim);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
}
.fin-pill-val {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* #4 Combo card: Health score + 50/30/20 donut */
.fin-combo-card {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px 12px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.fin-combo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(155,92,232,0.08), transparent 60%);
  pointer-events: none;
}
.fin-combo-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-right: 10px;
  border-right: 1px solid var(--border);
}
.fin-combo-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  padding-left: 12px;
}
.fin-combo-label {
  color: var(--dim);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
  text-align: center;
}
.fin-combo-right .fin-combo-label { text-align: left; }
.fin-combo-score-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
}
.fin-combo-score-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fin-combo-card .fin-score-val {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}
.fin-score-sub {
  color: var(--dim);
  font-size: 9px;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Donut (50/30/20) */
.fin-donut-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fin-donut { flex-shrink: 0; }
.fin-donut circle { transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.fin-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #e5e5e5;
}
.fin-donut-lg {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.fin-donut-lg b {
  color: #fff;
  font-weight: 700;
  margin-left: auto;
}
.fin-donut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Section head with hint */
.fin-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 20px 0 10px;
}
.fin-section-head .fin-section-title { margin: 0; }
.fin-section-hint {
  color: var(--dim);
  font-size: 11px;
  font-weight: 500;
}

/* #7 Bills mini-calendar */
.fin-bills-strip {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  padding: 12px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 4px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fin-bills-strip::-webkit-scrollbar { display: none; }
.fin-bill-day {
  flex-shrink: 0;
  width: 30px;
  height: 38px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  position: relative;
  transition: background 0.2s;
}
.fin-bill-num {
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.fin-bill-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.fin-bill-day.today {
  background: rgba(212,105,138,0.12);
  border-color: var(--accent);
}
.fin-bill-day.today .fin-bill-num { color: #fff; }
.fin-bill-day.has-bill .fin-bill-num { color: #fff; }
.fin-bill-day.upcoming {
  background: rgba(251,191,36,0.1);
  border-color: rgba(251,191,36,0.4);
}
.fin-bill-day.upcoming .fin-bill-dot { background: #fbbf24; }
.fin-bill-day.overdue {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.4);
}
.fin-bill-day.overdue .fin-bill-dot { background: #ef4444; }
.fin-bill-day.paid {
  background: rgba(34,197,94,0.08);
  border-color: rgba(34,197,94,0.3);
}
.fin-bill-day.paid .fin-bill-dot { background: #22c55e; }

/* #5 + #6 Category row v2 with sparkline + limit */
.fin-cat-row-v2 {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.fin-cat-row-v2:active {
  background: var(--surface2);
}
.fin-cat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.fin-cat-label {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-spark { flex-shrink: 0; }
.fin-cat-mid {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.fin-cat-amt {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.fin-cat-limit {
  color: var(--dim);
  font-size: 11px;
}
.fin-cat-over {
  margin-left: auto;
  color: #ef4444;
  font-size: 11px;
  font-weight: 700;
  background: rgba(239,68,68,0.15);
  padding: 2px 6px;
  border-radius: 8px;
}

/* #10 Savings tip card */
.fin-tip-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background:
    radial-gradient(ellipse at left top, rgba(155,92,232,0.18), transparent 60%),
    var(--surface);
  border: 1px solid rgba(155,92,232,0.28);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 20px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
}
.fin-tip-card::before {
  content: '';
  position: absolute;
  top: -14px;
  right: -14px;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(212,105,138,0.18), transparent 70%);
  filter: blur(12px);
}
.fin-tip-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #9B5CE8, #D4698A);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(155,92,232,0.4);
  position: relative;
}
.fin-tip-body {
  flex: 1;
  position: relative;
  min-width: 0;
}
.fin-tip-title {
  color: var(--dim);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
}
.fin-tip-text {
  color: #fff;
  font-size: 13px;
  line-height: 1.45;
}
.fin-tip-text b {
  color: #FBBF24;
  font-weight: 700;
}

/* #2 + #3 Quick chips in add modal */
.fin-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
/* Quick-amount grid: equal-width chips, 3 per row → 2 tidy rows for 6 amounts */
.fin-quick-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 8px 0 14px;
}
.fin-quick-amounts .fin-chip,
.fin-quick-amounts .fin-chip--amount {
  width: 100%;
  text-align: center;
  padding: 10px 6px;
  box-sizing: border-box;
}
.fin-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: #fff;
  padding: 7px 12px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  white-space: nowrap;
}
.fin-chip:active { transform: scale(0.95); }
.fin-chip--amount {
  font-weight: 600;
  color: #22c55e;
  border-color: rgba(34,197,94,0.25);
  background: rgba(34,197,94,0.06);
}
.fin-chip--amount:active {
  background: rgba(34,197,94,0.15);
}
.fin-chip--tpl:active {
  background: var(--surface3);
}

/* Responsive */
@media (max-width: 360px) {
  .fin-hero-safe { font-size: 34px; }
  .fin-combo-card { grid-template-columns: 1fr 1.3fr; }
  .fin-combo-score-wrap { width: 84px; height: 84px; }
  .fin-donut-legend { font-size: 10px; }
  .fin-pill-val { font-size: 12px; }
  .fin-bill-day { width: 28px; height: 36px; }
}

/* Hide legacy unused elements from v1 if any */
.fin-hero:not(.fin-hero-v2),
.fin-score-card,
.fin-quick-stats { display: none; }

/* ══════════════════════════════════════════════════════
   HABITS APP v2 — density, quotes, templates, mood, confetti
   ══════════════════════════════════════════════════════ */

/* #1 Greeting bar + #9 Companion — unified card */
.hab-greet-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin: 14px 16px 12px;
  padding: 16px 18px;
  background:
    radial-gradient(ellipse at top right, rgba(34,197,94,0.18), transparent 65%),
    radial-gradient(ellipse at bottom left, rgba(155,92,232,0.12), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.hab-greet-left { flex: 1; min-width: 0; }
.hab-greet-text {
  color: #fff; font-size: 18px; font-weight: 700;
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hab-greet-text b { color: #22c55e; font-weight: 700; }
.hab-greet-date {
  color: var(--dim); font-size: 12px; margin-top: 4px;
  text-transform: capitalize;
  letter-spacing: 0.2px;
}
.hab-companion {
  width: 56px; height: 56px;
  background:
    radial-gradient(circle at top left, rgba(34,197,94,0.45), transparent 70%),
    linear-gradient(135deg, #1e3a1e, #0f4b2e);
  border: 1px solid rgba(34,197,94,0.4);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(34,197,94,0.28), inset 0 1px 2px rgba(255,255,255,0.08);
  animation: habCompFloat 3s ease-in-out infinite;
  cursor: default;
}
@keyframes habCompFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}

/* #1 Quote of the day */
.hab-quote {
  position: relative;
  margin: 0 16px 12px;
  padding: 14px 18px 14px 38px;
  background:
    radial-gradient(ellipse at top right, rgba(155,92,232,0.12), transparent 60%),
    var(--surface);
  border: 1px solid rgba(155,92,232,0.25);
  border-radius: 14px;
  overflow: hidden;
}
.hab-quote::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, #9B5CE8, #D4698A);
}
.hab-quote-mark {
  position: absolute;
  top: -6px; left: 12px;
  font-size: 46px; line-height: 1;
  color: rgba(155,92,232,0.45);
  font-family: Georgia, serif;
  pointer-events: none;
}
.hab-quote-text {
  color: #e5e5e5; font-size: 13px;
  line-height: 1.5; font-style: italic;
  margin-bottom: 4px;
}
.hab-quote-author {
  color: var(--dim); font-size: 11px;
  font-weight: 500;
}

/* #10 Weekly review banner */
.hab-weekly-review {
  margin: 0 16px 14px;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, #1e1b4b 0%, #3730a3 70%),
    radial-gradient(circle at top right, rgba(251,191,36,0.2), transparent);
  border: 1px solid rgba(155,92,232,0.4);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(30,27,75,0.5);
}
.hab-weekly-review::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(251,191,36,0.3), transparent 70%);
  filter: blur(16px);
}
.hab-wr-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  position: relative;
}
.hab-wr-badge {
  color: #fbbf24; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.hab-wr-close {
  background: rgba(255,255,255,0.1);
  border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.hab-wr-body {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
}
.hab-wr-stat {
  text-align: center;
  padding: 8px 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
}
.hab-wr-val {
  color: #fff; font-size: 22px; font-weight: 800;
  line-height: 1;
}
.hab-wr-lbl {
  color: rgba(255,255,255,0.65); font-size: 10px;
  margin-top: 4px; text-transform: uppercase; letter-spacing: 0.2px;
}
.hab-wr-text {
  color: #fff; font-size: 13px; line-height: 1.4;
  position: relative;
}

/* Hero card: progress ring + meta */
.hab-hero-card {
  display: flex; align-items: center; gap: 16px;
  margin: 0 16px 14px;
  padding: 16px 18px;
  background:
    radial-gradient(ellipse at top right, rgba(155,92,232,0.12), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.hab-hero-card .hab-progress-wrap {
  flex-shrink: 0;
  position: relative;
  width: 120px; height: 120px;
}
.hab-hero-meta {
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}
.hab-hero-row {
  display: flex; align-items: center; gap: 12px;
}
.hab-hero-ico {
  width: 36px; height: 36px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.hab-hero-val {
  color: #fff; font-size: 20px; font-weight: 800; line-height: 1;
}
.hab-hero-lbl {
  color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.2px;
  margin-top: 2px;
}

/* #4 Category chips on today */
.hab-cat-chips {
  display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
  padding: 0 16px 10px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
}
.hab-cat-chips::-webkit-scrollbar { display: none; }
.hab-cat-chip {
  flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  color: #fff;
  padding: 7px 14px; border-radius: 50px;
  font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.hab-cat-chip:active { transform: scale(0.95); }
.hab-cat-chip.active {
  background: linear-gradient(135deg, #22c55e, #10b981);
  border-color: #22c55e; color: #fff;
  box-shadow: 0 4px 12px rgba(34,197,94,0.35);
}
.hab-cat-empty {
  color: var(--dim); font-size: 13px;
  text-align: center; padding: 30px 20px;
  background: var(--surface); border-radius: 14px;
  border: 1px dashed var(--border);
}

/* Habit list enhanced */
.hab-item-right {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.hab-spark { display: block; flex-shrink: 0; }
.hab-item-mood {
  margin-left: 6px;
  font-size: 14px;
  vertical-align: -1px;
}

/* #3 Rich empty state */
.hab-empty-v2 {
  text-align: center;
  padding: 30px 20px 40px;
  margin: 10px 16px 20px;
  background:
    radial-gradient(ellipse at center top, rgba(34,197,94,0.12), transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.hab-empty-hero {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}
.hab-empty-illus {
  font-size: 72px;
  display: inline-block;
  animation: habFloat 3.5s ease-in-out infinite;
  position: relative;
  z-index: 2;
}
@keyframes habFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hab-empty-glow {
  position: absolute;
  inset: 50% 50% auto auto;
  transform: translate(50%, -20%);
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(34,197,94,0.35), transparent 70%);
  border-radius: 50%;
  filter: blur(18px);
  z-index: 1;
  animation: habGlow 3s ease-in-out infinite;
}
@keyframes habGlow {
  0%, 100% { opacity: 0.6; transform: translate(50%, -20%) scale(1); }
  50%      { opacity: 1.0; transform: translate(50%, -20%) scale(1.1); }
}
.hab-empty-title-v2 {
  color: #fff; font-size: 22px; font-weight: 800;
  margin-bottom: 6px; position: relative;
}
.hab-empty-sub-v2 {
  color: var(--dim); font-size: 13px;
  line-height: 1.5; margin-bottom: 18px;
  max-width: 240px; margin-left: auto; margin-right: auto;
  position: relative;
}
.hab-empty-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
  position: relative;
}
.hab-empty-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: transform 0.15s, background 0.15s;
}
.hab-empty-chip:active {
  transform: scale(0.96);
  background: var(--surface3);
}
.hab-empty-chip-ico { font-size: 20px; }
.hab-empty-chip-name { flex: 1; text-align: left; }
.hab-empty-btn-v2 {
  background: linear-gradient(135deg, #22c55e, #10b981);
  color: #fff; border: none;
  padding: 13px 28px;
  border-radius: 50px;
  font-family: inherit;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(34,197,94,0.35);
  position: relative;
}

/* #2 Templates library in modal */
#hab-templates-wrap { margin-bottom: 4px; }
.hab-templates-search-wrap { margin-bottom: 10px; }
.hab-templates-search {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s;
}
.hab-templates-search:focus { border-color: #22c55e; }
.hab-templates-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}
.hab-templates-grid::-webkit-scrollbar { width: 4px; }
.hab-templates-grid::-webkit-scrollbar-thumb {
  background: var(--border-hi); border-radius: 2px;
}
.hab-tpl-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--tpl-color, #22c55e);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  display: flex; align-items: center; gap: 10px;
  transition: transform 0.15s, background 0.15s;
}
.hab-tpl-card:active {
  transform: scale(0.96);
  background: var(--surface3);
}
.hab-tpl-ico { font-size: 22px; flex-shrink: 0; }
.hab-tpl-name {
  flex: 1;
  overflow: hidden; text-overflow: ellipsis;
  font-weight: 500;
}
.hab-templates-empty {
  grid-column: 1 / -1;
  color: var(--dim);
  text-align: center;
  padding: 20px;
  font-size: 12px;
}
.hab-modal-divider {
  display: flex; align-items: center;
  color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.3px;
  margin: 18px 0 4px;
  gap: 10px;
}
.hab-modal-divider::before,
.hab-modal-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--border);
}
.hab-modal-divider span { flex-shrink: 0; }

/* #8 Mood picker modal */
.hab-mood-sub {
  color: var(--dim);
  font-size: 12px;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 16px;
  padding: 0 10px;
}
.hab-mood-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.hab-mood-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: #fff;
  padding: 14px 6px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.hab-mood-btn:active {
  transform: scale(0.94);
  background: var(--surface3);
  border-color: var(--accent);
}
.hab-mood-emoji { font-size: 28px; line-height: 1; }
.hab-mood-lbl { font-size: 11px; color: var(--dim); }

/* Responsive tightening for narrow phones */
@media (max-width: 360px) {
  .hab-greet-text { font-size: 16px; }
  .hab-companion { width: 48px; height: 48px; font-size: 26px; }
  .hab-hero-card { padding: 14px 14px; gap: 12px; }
  .hab-hero-card .hab-progress-wrap { width: 100px; height: 100px; }
  .hab-hero-val { font-size: 18px; }
  .hab-empty-illus { font-size: 64px; }
  .hab-empty-title-v2 { font-size: 20px; }
  .hab-templates-grid { grid-template-columns: 1fr; }
}

/* Hide legacy element */
.hab-today-date:not(.hab-greet-date) { display: none; }

/* ══════════════════════════════════════════════════════
   NUTRI APP v2 — density, donut, streak, photo, popular
   ══════════════════════════════════════════════════════ */

/* Top row: streak + date nav */
.nut-top-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 16px 10px;
}
.nut-top-row .nut-date-nav {
  flex: 1;
  margin: 0;
  padding: 0;
}

/* #9 Streak badge */
.nut-streak-badge {
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(249,115,22,0.35);
  flex-shrink: 0;
  animation: nutStreakPulse 2.5s ease-in-out infinite;
  white-space: nowrap;
}
.nut-streak-badge.dim {
  background: var(--surface2);
  box-shadow: none;
  color: var(--dim);
  animation: none;
}
@keyframes nutStreakPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* #3 Hero v2 with bigger ring and "Осталось" primary */
.nut-hero-v2 {
  margin: 0 16px 14px;
  padding: 16px;
  background:
    radial-gradient(ellipse at top right, rgba(251,146,60,0.18), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(249,115,22,0.12), transparent 55%),
    var(--surface);
  border: 1px solid rgba(251,146,60,0.25);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.nut-hero-v2::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(251,146,60,0.2), transparent 70%);
  pointer-events: none;
  filter: blur(20px);
}
.nut-hero-v2 .nut-cal-wrap {
  position: relative;
  width: 160px; height: 160px;
  margin: 0;
}
.nut-hero-v2 .nut-cal-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.nut-cal-big-label {
  color: var(--dim);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}
.nut-cal-big {
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(251,146,60,0.35);
}
.nut-cal-sub {
  color: var(--dim);
  font-size: 11px;
  margin-top: 3px;
  white-space: nowrap;
}
.nut-cal-sub span { color: #fb923c; font-weight: 700; }
.nut-cal-done-badge {
  margin-top: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  background: rgba(255,255,255,0.05);
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
}
.nut-cal-done-badge span {
  color: #fff;
  font-weight: 700;
}
#nut-cal-arc.level-warn { stroke: #fbbf24 !important; }
#nut-cal-arc.level-over { stroke: #ef4444 !important; }
#nut-cal-arc.level-good { stroke: url(#nutCalGrad); }

/* #4 Macros donut card */
.nut-macros-card {
  margin: 0 16px 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.nut-macros-donut-wrap { flex-shrink: 0; }
.nut-macros-donut circle {
  transition: stroke-dasharray 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.nut-macros-legend {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 6px;
  font-size: 12px;
}
.nut-mc-row {
  display: flex; align-items: center;
  gap: 8px;
  color: #e5e5e5;
}
.nut-mc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nut-mc-name { color: var(--dim); min-width: 52px; }
.nut-mc-val { color: #fff; font-weight: 700; }
.nut-mc-pct {
  margin-left: auto;
  color: #fff;
  font-weight: 700;
  background: rgba(255,255,255,0.08);
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
}

/* #1 Photo + quick action row */
.nut-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 14px;
}
.nut-qa-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.nut-qa-btn:active { transform: scale(0.96); }
.nut-qa-photo {
  background:
    radial-gradient(ellipse at top right, rgba(251,191,36,0.3), transparent 60%),
    linear-gradient(135deg, #ea580c, #f97316);
  box-shadow: 0 6px 18px rgba(234,88,12,0.4);
}
.nut-qa-barcode {
  background:
    radial-gradient(ellipse at top right, rgba(167,139,250,.3), transparent 60%),
    linear-gradient(135deg, #7c3aed, #a78bfa);
  box-shadow: 0 6px 18px rgba(124,58,237,.3);
}
.nut-qa-quick {
  background: var(--surface);
  border: 1px solid var(--border);
}
.nut-qa-ico { font-size: 24px; line-height: 1; }
.nut-qa-lbl { font-size: 13px; font-weight: 600; }

/* Barcode scanner modal */
.nut-barcode-modal{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center}
.nut-barcode-sheet{width:100%;max-width:480px;background:#0b0b10;border:1px solid rgba(255,255,255,.08);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;max-height:90vh}
.nut-barcode-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;font-size:14px;font-weight:800;color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.nut-barcode-close{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;padding:4px 8px}
.nut-barcode-body{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden}
.nut-barcode-body video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nut-barcode-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;height:30%;border:2px solid #a78bfa;border-radius:12px;box-shadow:0 0 0 99999px rgba(0,0,0,.5);pointer-events:none}
.nut-barcode-frame::before,.nut-barcode-frame::after{content:'';position:absolute;left:5%;right:5%;height:2px;background:linear-gradient(90deg,transparent,#a78bfa,transparent);animation:nut-bc-scan 2s linear infinite}
.nut-barcode-frame::before{top:0}.nut-barcode-frame::after{bottom:0}
@keyframes nut-bc-scan{0%,100%{opacity:.4}50%{opacity:1}}
.nut-barcode-hint{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#fff;font-size:13px;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.nut-barcode-footer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.06)}
.nut-barcode-alt{flex:1;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.nut-barcode-history{border-top:1px solid rgba(255,255,255,.06);padding:12px 16px;max-height:200px;overflow-y:auto}
.nut-barcode-hist-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#a78bfa;margin-bottom:6px}
.nut-barcode-hist-list{display:flex;flex-direction:column;gap:4px}
.nut-barcode-hist-row{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;color:#fff;font-family:inherit;font-size:12px;cursor:pointer;text-align:left;width:100%}
.nut-barcode-hist-row:active{background:rgba(255,255,255,.08)}
.nut-barcode-hist-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nut-barcode-hist-kcal{color:#a78bfa;font-weight:700;font-size:10px;flex-shrink:0;margin-left:8px}

/* #6 «Часто ешь» */
.nut-freq-wrap {
  padding: 0 16px 16px;
}
.nut-freq-label {
  color: var(--dim);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.nut-freq-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.nut-freq-row::-webkit-scrollbar { display: none; }
.nut-freq-chip {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: #fff;
  padding: 8px 14px;
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  min-width: 120px;
  transition: transform 0.15s, background 0.15s;
}
.nut-freq-chip:active {
  transform: scale(0.96);
  background: var(--surface2);
}
.nut-freq-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}
.nut-freq-meta {
  color: var(--dim);
  font-size: 10px;
  margin-top: 2px;
}

/* #5 Popular foods in modal */
.nut-popular-wrap { margin-bottom: 6px; }
.nut-popular-grid {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 10px;
}
.nut-popular-grid::-webkit-scrollbar { display: none; }
.nut-popular-btn {
  flex-shrink: 0;
  width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.nut-popular-btn:active {
  transform: scale(0.95);
  background: var(--surface3);
  border-color: #fb923c;
}
.nut-popular-emoji {
  font-size: 28px;
  line-height: 1;
}
.nut-popular-name {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 78px;
}
.nut-popular-kcal {
  color: var(--dim);
  font-size: 9px;
  text-align: center;
}

/* Modal divider */
.nut-modal-divider {
  display: flex; align-items: center;
  color: var(--dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.3px;
  margin: 10px 0 6px;
  gap: 10px;
}
.nut-modal-divider::before,
.nut-modal-divider::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--border);
}
.nut-modal-divider span { flex-shrink: 0; }

/* #7 Portion chips */
.nut-portion-chips {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.nut-portion-chip {
  flex: 1;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: #fff;
  padding: 8px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.nut-portion-chip:active {
  transform: scale(0.94);
  background: #fb923c;
  border-color: #fb923c;
}

/* #1 Recognition modal */
.nut-recog-img-wrap {
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface2);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.nut-recog-preview-img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  display: block;
}
.nut-recog-loading,
.nut-recog-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--dim);
  font-size: 13px;
}
.nut-recog-loading-text {
  color: #fb923c;
  font-weight: 600;
  margin-top: 12px;
}
.nut-recog-spinner {
  width: 42px; height: 42px;
  border: 3px solid rgba(251,146,60,0.15);
  border-top-color: #fb923c;
  border-radius: 50%;
  margin: 0 auto;
  animation: nutSpin 0.8s linear infinite;
}
@keyframes nutSpin {
  to { transform: rotate(360deg); }
}
.nut-recog-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.nut-recog-retry {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: #fff;
  padding: 10px 18px;
  border-radius: 50px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
}

.nut-recog-confidence {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dim);
  margin: 10px 0 6px;
}
.nut-recog-confidence.good { color: #22c55e; }
.nut-recog-confidence.meh  { color: #fbbf24; }
.nut-recog-confidence.low  { color: #ef4444; }
.nut-recog-conf-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.nut-recog-ingredients {
  margin-bottom: 12px;
}
.nut-recog-ing-label {
  color: var(--dim);
  font-size: 11px;
  margin-bottom: 6px;
}
.nut-recog-ing-chip {
  display: inline-block;
  background: var(--surface2);
  color: #fff;
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 11px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.nut-recog-btns {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.nut-recog-btns .nut-save-btn {
  flex: 1;
  margin: 0;
}

/* Responsive */
@media (max-width: 360px) {
  .nut-hero-v2 .nut-cal-wrap { width: 140px; height: 140px; }
  .nut-cal-big { font-size: 26px; }
  .nut-popular-btn { width: 78px; }
  .nut-popular-emoji { font-size: 24px; }
  .nut-qa-ico { font-size: 20px; }
  .nut-qa-lbl { font-size: 12px; }
}

/* Hide old macro pills that we replaced (if any remain) */
.nut-macro-pills:not(.nut-macros-legend) { display: none; }

/* ══════════════════════════════════════════════════════
   MX inline SVG icon system — base + tweaks per component
   ══════════════════════════════════════════════════════ */

.mx-ico {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: -2px;
}

/* Greeting icon — a little visual prefix */
.greet-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FBBF24;
  margin-right: 6px;
  vertical-align: -3px;
}
.greet-ico .mx-ico { stroke-width: 2; }

/* Login streak chip — flame SVG + number */
.greeting-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1;
}
.greeting-streak .mx-ico { color: #fff; }

/* Dashboard widget: icon + label inline */
.dash-card-header {
  display: flex;
  align-items: center;
  gap: 5px;
}
.dash-card-header .mx-ico {
  color: var(--dim);
}
.dash-card-header span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* FAQ — monochrome icons */
.faq-list--v2 .faq-ico {
  color: var(--accent);
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.faq-list--v2 .faq-item.open .faq-ico { opacity: 1; }

/* Habits hero row icons */
.hab-hero-ico {
  color: #FBBF24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

/* Habits streak banner — inline flame + text */
.hab-streak-banner {
  gap: 8px;
}
.hab-streak-banner .mx-ico {
  color: #fff;
}

/* Habits category chips — icon + text */
.hab-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hab-cat-chip .mx-ico {
  color: currentColor;
  opacity: 0.9;
}

/* Habits AI chips — icon + text */
.hab-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.hab-ai-chip .mx-ico {
  color: var(--accent);
  opacity: 0.95;
}

/* Habits weekly review badge */
.hab-wr-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hab-wr-badge .mx-ico { color: #FBBF24; }

/* Nutri quick actions: icon + label in column */
.nut-qa-btn .mx-ico { color: currentColor; }
.nut-qa-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Nutri freq/popular labels — icon + text */
.nut-freq-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nut-freq-label .mx-ico { color: var(--dim); }
.nut-field-label--ico {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.nut-field-label--ico .mx-ico { color: var(--dim); }

/* Nutri streak badge — flame + number */
.nut-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.nut-streak-badge .mx-ico { color: #fff; }
.nut-streak-badge.dim .mx-ico { color: var(--dim); }

/* Finance type-row — icon + text */
.fin-type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.fin-type-btn .mx-ico { color: currentColor; opacity: 0.9; }

/* Finance tip card — center SVG in gradient box */
.fin-tip-icon .mx-ico {
  color: #fff;
  stroke-width: 2.2;
}
.fin-tip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════
   FAB overlap fix — ensure scrollable tab content never ends
   under the floating + button. Reserve space for:
   - bottom nav (~70px)
   - FAB (54px @ bottom:90px) + ~24 breathing
   Total safe = 180px.
   ══════════════════════════════════════════════════════ */
.hab-tab-content,
.fin-tab-content,
.nut-tab-content {
  padding-bottom: 180px !important;
}

/* ══════════════════════════════════════════════════════
   ASTRO APP — Deep space theme
   Premium cosmic aesthetic: deep indigo → black gradient,
   gold accents, serif headlines, glassmorphism cards,
   animated star field, subtle glow everywhere.
   ══════════════════════════════════════════════════════ */

:root {
  --ast-bg-0:  #030314;
  --ast-bg-1:  #0a0a22;
  --ast-bg-2:  #1a1a3a;
  --ast-indigo:#1e1b4b;
  --ast-violet:#7C3AED;
  --ast-violet-light: #A78BFA;
  --ast-violet-glow:  rgba(167,139,250,0.35);
  --ast-gold:  #FBBF24;
  --ast-gold-2:#FCD34D;
  --ast-gold-glow: rgba(251,191,36,0.5);
  --ast-text:  #F5F1E8;
  --ast-dim:   rgba(245,241,232,0.55);
  --ast-dim-2: rgba(245,241,232,0.35);
  --ast-glass: rgba(30,27,75,0.35);
  --ast-glass-hi: rgba(49,46,129,0.45);
  --ast-border: rgba(251,191,36,0.25);
  --ast-border-hi: rgba(251,191,36,0.5);
  --ast-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

.ast-app {
  /* Full-viewport overlay — must override .overlay-page with fixed */
  display: none;
  flex-direction: column;
  padding: 0 0 100px;
  color: var(--ast-text);
  font-family: var(--font);
  background:
    radial-gradient(ellipse at top right,   rgba(124,58,237,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(251,191,36,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at center top,  var(--ast-indigo) 0%, var(--ast-bg-1) 40%, var(--ast-bg-0) 100%),
    var(--ast-bg-0);
  position: fixed !important;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 250;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
}

/* ── Animated star field ── */
.ast-stars {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.ast-stars-layer {
  position: absolute; inset: 0;
  background-repeat: repeat;
}
/* 3 layers with different densities and sizes for parallax depth */
.ast-stars-1 {
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.2px 1.2px at 130px 40px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 170px 80px, #FBBF24, transparent),
    radial-gradient(1px 1px at 220px 150px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 260px 40px, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.2px 1.2px at 310px 180px, rgba(255,255,255,0.55), transparent),
    radial-gradient(1px 1px at 360px 90px, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 100px 250px, #A78BFA, transparent);
  background-size: 400px 300px;
  opacity: 0.9;
  animation: astTwinkle 4s ease-in-out infinite;
}
.ast-stars-2 {
  background-image:
    radial-gradient(0.8px 0.8px at 40px 60px, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 160px 200px, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.8px 0.8px at 280px 70px, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 350px 240px, rgba(255,255,255,0.55), transparent);
  background-size: 500px 400px;
  opacity: 0.7;
  animation: astTwinkle 6s ease-in-out infinite;
  animation-delay: 1.5s;
}
.ast-stars-3 {
  background-image:
    radial-gradient(0.6px 0.6px at 80px 100px, rgba(255,255,255,0.35), transparent),
    radial-gradient(0.8px 0.8px at 200px 180px, rgba(167,139,250,0.4), transparent),
    radial-gradient(0.6px 0.6px at 340px 30px, rgba(255,255,255,0.3), transparent);
  background-size: 600px 500px;
  opacity: 0.5;
}
@keyframes astTwinkle {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.4; }
}
.ast-nebula {
  position: absolute;
  top: -100px; right: -120px;
  width: 400px; height: 400px;
  background:
    radial-gradient(circle, rgba(124,58,237,0.4) 0%, rgba(124,58,237,0.12) 40%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.ast-nebula::after {
  content: '';
  position: fixed;
  bottom: -120px; left: -100px;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(251,191,36,0.18) 0%, transparent 70%);
  filter: blur(50px);
}

/* ── Topbar ── */
.ast-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg, rgba(3,3,20,0.92) 0%, rgba(3,3,20,0.6) 80%, transparent 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.ast-topbar-title {
  font-family: var(--ast-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--ast-gold);
  text-shadow: 0 0 18px var(--ast-gold-glow);
}
.ast-back-btn, .ast-profile-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(30,27,75,0.55);
  border: 1px solid var(--ast-border);
  color: var(--ast-gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  backdrop-filter: blur(10px);
}
.ast-back-btn:active, .ast-profile-btn:active {
  transform: scale(0.94);
  box-shadow: 0 0 20px var(--ast-gold-glow);
}

/* Tab content needs to sit above stars */
.ast-tab-content {
  position: relative;
  z-index: 2;
  padding: 10px 20px 200px;
}

/* ══════════════════════════════════════════════════════
   MOON HERO (today tab)
   ══════════════════════════════════════════════════════ */
.ast-moon-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 0 24px;
  position: relative;
}
.ast-moon-visual {
  width: 140px; height: 140px;
  flex-shrink: 0;
  position: relative;
  animation: astMoonFloat 8s ease-in-out infinite;
}
@keyframes astMoonFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.ast-moon-svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 30px rgba(251,191,36,0.25));
}
#ast-moon-shadow {
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}
.ast-moon-info {
  flex: 1;
  min-width: 0;
}
.ast-moon-label {
  color: var(--ast-dim);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
}
.ast-moon-sign {
  color: var(--ast-text);
  font-family: var(--ast-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 8px;
}
.ast-moon-sign b {
  color: var(--ast-gold);
  font-weight: 700;
}
.ast-moon-glyph {
  font-size: 24px;
  color: var(--ast-gold);
  text-shadow: 0 0 10px var(--ast-gold-glow);
  margin-left: 4px;
}
.ast-moon-illum {
  color: var(--ast-dim);
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* ── Date strip ── */
.ast-date-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 20px;
  font-size: 12px;
  color: var(--ast-dim);
  text-transform: lowercase;
}
.ast-sign-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.3);
  color: var(--ast-gold);
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.ast-sign-glyph {
  font-size: 14px;
  text-shadow: 0 0 8px var(--ast-gold-glow);
}
.ast-date-text {
  flex: 1;
}

/* ══════════════════════════════════════════════════════
   GLASS CARDS
   ══════════════════════════════════════════════════════ */
.ast-card {
  position: relative;
  background: var(--ast-glass);
  border: 1px solid var(--ast-border);
  border-radius: 20px;
  padding: 22px 22px 20px;
  margin-bottom: 18px;
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 8px 32px rgba(3,3,20,0.5),
    inset 0 1px 0 rgba(251,191,36,0.15),
    inset 0 0 40px rgba(124,58,237,0.08);
}
.ast-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(251,191,36,0.08) 0%, transparent 40%);
}
.ast-card-decor {
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(124,58,237,0.35), transparent 65%);
  filter: blur(30px);
  pointer-events: none;
}
.ast-card-head {
  margin-bottom: 16px;
  text-align: center;
  position: relative;
}
.ast-card-kicker {
  display: inline-block;
  color: var(--ast-gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  margin-bottom: 6px;
  text-shadow: 0 0 8px var(--ast-gold-glow);
}
.ast-card-title {
  font-family: var(--ast-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ast-text);
  margin: 0;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(167,139,250,0.25);
}

.ast-btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--ast-gold) 0%, #F59E0B 100%);
  color: #1a0f00;
  border: none;
  padding: 13px 28px;
  border-radius: 50px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 24px rgba(251,191,36,0.4);
}
.ast-btn-primary:active {
  transform: scale(0.96);
  box-shadow: 0 2px 12px rgba(251,191,36,0.6);
}
.ast-btn-full { display: block; width: 100%; margin-top: 12px; }
.ast-btn-secondary {
  display: inline-block;
  background: rgba(251,191,36,0.08);
  color: var(--ast-gold);
  border: 1px solid var(--ast-border);
  padding: 12px 24px;
  border-radius: 50px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
}
.ast-btn-secondary:active { background: rgba(251,191,36,0.16); }

.ast-empty-sub {
  color: var(--ast-dim);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 18px;
}
.ast-daily-empty {
  text-align: center;
  padding: 16px 8px 4px;
}

/* ── Daily horoscope body ── */
.ast-daily-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.ast-daily-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ast-daily-ico {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(251,191,36,0.1);
  border: 1px solid var(--ast-border);
  color: var(--ast-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ast-daily-text {
  flex: 1;
  color: var(--ast-text);
  font-size: 13.5px;
  line-height: 1.55;
}
.ast-daily-text b {
  display: block;
  color: var(--ast-gold);
  font-family: var(--ast-serif);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
  letter-spacing: 0.3px;
}

/* ── Loader ── */
.ast-loader {
  text-align: center;
  padding: 30px 10px;
  position: relative;
}
.ast-loader-star {
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  background:
    radial-gradient(circle at 50% 50%, var(--ast-gold) 0%, transparent 55%);
  border-radius: 50%;
  animation: astLoaderPulse 1.5s ease-in-out infinite;
  position: relative;
}
.ast-loader-star::before, .ast-loader-star::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--ast-gold) 50%, transparent 100%);
}
.ast-loader-star::before {
  width: 2px; left: 50%; transform: translateX(-50%);
}
.ast-loader-star::after {
  height: 2px; top: 50%; transform: translateY(-50%);
  background: linear-gradient(to right, transparent 0%, var(--ast-gold) 50%, transparent 100%);
}
@keyframes astLoaderPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.1); }
}
.ast-loader-text {
  color: var(--ast-dim);
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════
   TAROT CARDS (card of the day + spreads)
   ══════════════════════════════════════════════════════ */
.ast-card-day {
  display: flex;
  gap: 18px;
  align-items: center;
}
.ast-tarot-card {
  width: 96px; height: 152px;
  flex-shrink: 0;
  border-radius: 10px;
  background:
    linear-gradient(135deg, #2D1B69 0%, #1E1B4B 50%, #0F0F2F 100%);
  border: 1.5px solid var(--ast-gold);
  box-shadow:
    0 8px 28px rgba(0,0,0,0.5),
    0 0 24px rgba(251,191,36,0.25),
    inset 0 1px 0 rgba(251,191,36,0.3);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s;
}
.ast-tarot-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 7px;
  pointer-events: none;
}
.ast-tarot-card.reversed {
  transform: rotate(180deg);
}
.ast-tarot-frame {
  position: absolute;
  inset: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.ast-tarot-suit {
  font-size: 42px;
  color: var(--ast-gold);
  text-shadow: 0 0 16px var(--ast-gold-glow);
  line-height: 1;
  font-family: 'Segoe UI Symbol', Arial, sans-serif;
}
.ast-tarot-num {
  font-family: var(--ast-serif);
  font-size: 16px;
  color: var(--ast-gold-2);
  font-weight: 700;
  letter-spacing: 1px;
}
.ast-tarot-label {
  font-family: var(--ast-serif);
  font-size: 9px;
  color: var(--ast-text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  max-width: 74px;
  line-height: 1.2;
}

.ast-card-day-info {
  flex: 1;
  min-width: 0;
}
.ast-card-day-name {
  font-family: var(--ast-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ast-gold);
  line-height: 1.2;
  margin-bottom: 3px;
}
.ast-card-day-orient {
  color: var(--ast-dim);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ast-card-day-key {
  color: var(--ast-violet-light);
  font-size: 12px;
  font-style: italic;
  margin-bottom: 8px;
}
.ast-card-day-text {
  color: var(--ast-text);
  font-size: 13px;
  line-height: 1.55;
}

/* ── Quick actions grid ── */
.ast-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.ast-quick-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ast-glass);
  border: 1px solid var(--ast-border);
  color: var(--ast-text);
  padding: 14px 16px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  backdrop-filter: blur(20px);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ast-quick-btn:active {
  transform: scale(0.96);
  border-color: var(--ast-border-hi);
  background: var(--ast-glass-hi);
}
.ast-quick-btn .mx-ico { color: var(--ast-gold); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   NATAL CHART
   ══════════════════════════════════════════════════════ */
.ast-chart-wheel {
  display: flex;
  justify-content: center;
  margin: 10px 0 20px;
}
.ast-natal-svg {
  max-width: 340px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 40px rgba(167,139,250,0.3));
}
.ast-asc-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(124,58,237,0.12));
  border: 1px solid var(--ast-border);
  border-radius: 16px;
}
.ast-asc-kicker {
  color: var(--ast-gold);
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 4px;
}
.ast-asc-sign {
  font-family: var(--ast-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--ast-text);
  text-shadow: 0 0 20px rgba(251,191,36,0.4);
}
.ast-asc-sub {
  color: var(--ast-dim);
  font-size: 11px;
  margin-top: 2px;
}

.ast-planets-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.ast-planet-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(30,27,75,0.4);
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 12px;
}
.ast-planet-ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(251,191,36,0.2), rgba(30,27,75,0.6));
  border: 1px solid rgba(251,191,36,0.4);
  color: var(--ast-gold);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-family: 'Segoe UI Symbol', Arial, sans-serif;
  text-shadow: 0 0 8px var(--ast-gold-glow);
}
.ast-planet-info { flex: 1; min-width: 0; }
.ast-planet-name {
  color: var(--ast-text);
  font-size: 12px;
  font-weight: 600;
}
.ast-planet-sign {
  color: var(--ast-dim);
  font-size: 10px;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════
   ORACLE CHAT
   ══════════════════════════════════════════════════════ */
.ast-oracle-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0 20px;
}
.ast-oracle-avatar {
  width: 72px; height: 72px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 20px rgba(167,139,250,0.5));
  animation: astOracleFloat 4s ease-in-out infinite;
}
.ast-oracle-avatar svg { width: 100%; height: 100%; }
@keyframes astOracleFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.04); }
}
.ast-oracle-title {
  font-family: var(--ast-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ast-gold);
  line-height: 1.1;
  text-shadow: 0 0 16px var(--ast-gold-glow);
}
.ast-oracle-sub {
  color: var(--ast-dim);
  font-size: 12px;
  letter-spacing: 1px;
  margin-top: 3px;
}

.ast-oracle-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px 2px;
  scrollbar-width: none;
}
.ast-oracle-messages::-webkit-scrollbar { display: none; }
.ast-msg { display: flex; }
.ast-msg-user { justify-content: flex-end; }
.ast-msg-bot  { justify-content: flex-start; }
.ast-msg-bubble {
  max-width: 85%;
  padding: 13px 18px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  backdrop-filter: blur(10px);
}
.ast-msg-bot .ast-msg-bubble {
  background: var(--ast-glass);
  border: 1px solid var(--ast-border);
  color: var(--ast-text);
  border-bottom-left-radius: 6px;
  box-shadow: 0 4px 20px rgba(3,3,20,0.3);
}
.ast-msg-user .ast-msg-bubble {
  background: linear-gradient(135deg, #7C3AED, #5B21B6);
  color: #fff;
  border-bottom-right-radius: 6px;
  border: 1px solid rgba(167,139,250,0.4);
  box-shadow: 0 4px 20px rgba(124,58,237,0.3);
}

.ast-oracle-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.ast-chip {
  background: rgba(30,27,75,0.5);
  border: 1px solid var(--ast-border);
  color: var(--ast-gold);
  min-height: 32px;
  padding: 8px 13px;
  border-radius: 50px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.15s, transform 0.15s;
  display: inline-flex; align-items: center;
}
.ast-chip:active {
  background: rgba(251,191,36,0.15);
  transform: scale(0.95);
}

.ast-oracle-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px;
  background: var(--ast-glass);
  border: 1px solid var(--ast-border);
  border-radius: 18px;
  backdrop-filter: blur(20px);
}
.ast-oracle-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--ast-text);
  font-family: inherit;
  font-size: 14px;
  resize: none;
  outline: none;
  max-height: 120px;
  padding: 4px 6px;
}
.ast-oracle-input::placeholder { color: var(--ast-dim-2); }
.ast-oracle-send {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ast-gold), #F59E0B);
  color: #1a0f00;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(251,191,36,0.4);
  transition: transform 0.15s;
}
.ast-oracle-send:active { transform: scale(0.92); }

/* ══════════════════════════════════════════════════════
   TAROT SPREADS grid
   ══════════════════════════════════════════════════════ */
.ast-spread-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.ast-spread-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 12px 16px;
  background: var(--ast-glass);
  border: 1px solid var(--ast-border);
  border-radius: 16px;
  color: var(--ast-text);
  font-family: inherit;
  cursor: pointer;
  backdrop-filter: blur(20px);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ast-spread-btn:active {
  transform: scale(0.96);
  border-color: var(--ast-gold);
  background: var(--ast-glass-hi);
}
.ast-spread-cards {
  height: 60px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}
.ast-tcard {
  display: block;
  width: 22px; height: 34px;
  background: linear-gradient(135deg, #2D1B69, #0F0F2F);
  border: 1px solid var(--ast-gold);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(251,191,36,0.2);
  position: relative;
}
.ast-tcard::before {
  content: '';
  position: absolute; inset: 2px;
  border: 0.5px solid rgba(251,191,36,0.3);
  border-radius: 1px;
}
.ast-spread-cards--1 { justify-content: center; }
.ast-spread-cards--1 .ast-tcard { width: 30px; height: 46px; }
.ast-spread-cards--3 .ast-tcard { width: 24px; height: 38px; }
.ast-spread-cards--5 .ast-tcard { width: 18px; height: 30px; }
.ast-spread-cards--10 { flex-wrap: wrap; max-width: 110px; }
.ast-spread-cards--10 .ast-tcard { width: 16px; height: 24px; margin: 1px; }
.ast-spread-cards--12 { flex-wrap: wrap; max-width: 120px; }
.ast-spread-cards--12 .ast-tcard { width: 14px; height: 22px; margin: 1px; }
.ast-spread-name {
  font-family: var(--ast-serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--ast-gold);
  text-align: center;
}
.ast-spread-desc {
  color: var(--ast-dim);
  font-size: 10px;
  text-align: center;
  margin-top: -4px;
}

.ast-tarot-result {
  margin-top: 16px;
}
.ast-tarot-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.ast-tarot-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px;
  background: rgba(30,27,75,0.3);
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 14px;
}
.ast-tarot-row .ast-tarot-card {
  width: 64px; height: 100px;
  flex-shrink: 0;
}
.ast-tarot-row .ast-tarot-frame { inset: 6px; gap: 4px; }
.ast-tarot-row .ast-tarot-suit { font-size: 26px; }
.ast-tarot-row .ast-tarot-num { font-size: 12px; }
.ast-tarot-row .ast-tarot-label { font-size: 7px; max-width: 50px; }
.ast-tarot-info { flex: 1; min-width: 0; }
.ast-tarot-pos {
  color: var(--ast-gold);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-weight: 600;
}
.ast-tarot-card-name {
  font-family: var(--ast-serif);
  font-size: 15px;
  color: var(--ast-text);
  font-weight: 700;
  margin-bottom: 4px;
}
.ast-tarot-card-keys {
  color: var(--ast-violet-light);
  font-size: 11px;
  font-style: italic;
}
.ast-tarot-interp {
  padding: 20px;
  background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(251,191,36,0.08));
  border: 1px solid var(--ast-border);
  border-radius: 16px;
  margin-bottom: 14px;
}
.ast-tarot-text {
  color: var(--ast-text);
  font-size: 13.5px;
  line-height: 1.6;
  margin-top: 10px;
}

/* ══════════════════════════════════════════════════════
   NUMEROLOGY
   ══════════════════════════════════════════════════════ */
.ast-num-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}
.ast-field-wrap { display: flex; flex-direction: column; gap: 6px; }
.ast-field-row { display: flex; gap: 10px; }
.ast-field-label {
  color: var(--ast-dim);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ast-field-input {
  width: 100%;
  background: rgba(3,3,20,0.6);
  border: 1px solid var(--ast-border);
  color: var(--ast-text);
  padding: 13px 16px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.ast-field-input:focus {
  border-color: var(--ast-gold);
  background: rgba(3,3,20,0.8);
  box-shadow: 0 0 0 3px rgba(251,191,36,0.15);
}
.ast-field-input::placeholder { color: var(--ast-dim-2); }

.ast-num-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ast-num-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(30,27,75,0.4));
  border: 1px solid var(--ast-border);
  border-radius: 16px;
}
.ast-num-big {
  width: 60px; height: 60px;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--ast-gold), #B45309);
  color: #0a0a22;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ast-serif);
  font-size: 26px;
  font-weight: 800;
  box-shadow:
    0 6px 24px rgba(251,191,36,0.4),
    inset 0 2px 6px rgba(255,255,255,0.3);
}
.ast-num-body { flex: 1; min-width: 0; }
.ast-num-title {
  color: var(--ast-text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.ast-num-title span {
  color: var(--ast-gold);
  font-family: var(--ast-serif);
  font-weight: 700;
}
.ast-num-sub {
  color: var(--ast-dim);
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ast-num-meaning {
  color: var(--ast-text);
  font-size: 12px;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════
   BOTTOM NAV
   ══════════════════════════════════════════════════════ */
.ast-bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 10px 0 18px;
  background: linear-gradient(180deg, rgba(3,3,20,0.7) 0%, rgba(3,3,20,0.95) 40%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--ast-border);
  z-index: 10;
}
.ast-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  color: var(--ast-dim-2);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.5px;
  cursor: pointer;
  padding: 4px 0;
  transition: color 0.15s;
}
.ast-nav-btn.active {
  color: var(--ast-gold);
  text-shadow: 0 0 8px var(--ast-gold-glow);
}
.ast-nav-btn svg { opacity: 0.7; }
.ast-nav-btn.active svg { opacity: 1; filter: drop-shadow(0 0 6px var(--ast-gold-glow)); }

/* ══════════════════════════════════════════════════════
   MODAL SHEETS (profile, tarot)
   ══════════════════════════════════════════════════════ */
.ast-modal {
  position: fixed;
  inset: 0;
  background: rgba(3,3,20,0.75);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: astFadeIn 0.25s;
}
@keyframes astFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ast-sheet {
  background:
    radial-gradient(ellipse at top right, rgba(124,58,237,0.3), transparent 60%),
    linear-gradient(180deg, #1a1a3a 0%, #0a0a22 100%);
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 12px 24px 32px;
  border: 1px solid var(--ast-border);
  border-bottom: none;
  box-shadow: 0 -12px 50px rgba(3,3,20,0.9);
  animation: astSlideUp 0.35s cubic-bezier(0.25, 1.02, 0.5, 1);
}
.ast-sheet-large { max-height: 94vh; }
@keyframes astSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.ast-sheet-handle {
  width: 44px; height: 4px;
  background: rgba(251,191,36,0.3);
  border-radius: 2px;
  margin: 0 auto 18px;
}
.ast-sheet-kicker {
  text-align: center;
  color: var(--ast-gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.ast-sheet-title {
  font-family: var(--ast-serif);
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  color: var(--ast-text);
  margin-bottom: 10px;
  text-shadow: 0 2px 20px rgba(167,139,250,0.3);
}
.ast-sheet-sub {
  color: var(--ast-dim);
  font-size: 12px;
  text-align: center;
  line-height: 1.5;
  margin-bottom: 22px;
}

.ast-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  text-transform: lowercase;
  letter-spacing: 0.3px;
}
.ast-switch input { accent-color: var(--ast-gold); }

/* ── Responsive tweaks ── */
@media (max-width: 360px) {
  .ast-moon-visual { width: 110px; height: 110px; }
  .ast-moon-sign { font-size: 18px; }
  .ast-tarot-card { width: 82px; height: 130px; }
  .ast-tarot-suit { font-size: 34px; }
  .ast-card-title { font-size: 20px; }
  .ast-sheet-title { font-size: 22px; }
  .ast-planets-list { grid-template-columns: 1fr; }
  .ast-quick-grid { grid-template-columns: 1fr; }
}

/* Hide regular bottom-nav if active */
body.ast-app-open .bottom-nav { display: none; }

/* ══════════════════════════════════════════════════════
   CHART INTERPRETATION — synthesis + per-planet readings
   ══════════════════════════════════════════════════════ */

/* Expanded planet row with body text */
.ast-planets-list .ast-planet-row.expanded {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(251,191,36,0.08) 0%, rgba(30,27,75,0.5) 100%);
  border: 1px solid rgba(251,191,36,0.28);
}
.ast-planets-list .ast-planet-row.expanded .ast-planet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.ast-planet-body {
  color: var(--ast-text);
  font-size: 12.5px;
  line-height: 1.55;
  padding-left: 42px;
  padding-top: 4px;
  border-top: 1px dashed rgba(251,191,36,0.18);
  margin-top: 4px;
}
.ast-planets-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

/* Interpretation card (below chart wheel) */
.ast-interpret-card {
  position: relative;
}
.ast-interp-synthesis {
  padding: 20px 22px;
  margin-bottom: 20px;
  background:
    radial-gradient(ellipse at top right, rgba(167,139,250,0.2), transparent 60%),
    linear-gradient(135deg, rgba(124,58,237,0.25), rgba(30,27,75,0.4));
  border: 1px solid rgba(167,139,250,0.4);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.ast-interp-synthesis::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(251,191,36,0.25), transparent 70%);
  filter: blur(20px);
}
.ast-interp-label {
  color: var(--ast-gold);
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: 8px;
  position: relative;
  text-shadow: 0 0 10px var(--ast-gold-glow);
}
.ast-interp-synthesis .ast-interp-text {
  color: var(--ast-text);
  font-size: 14px;
  line-height: 1.65;
  font-family: var(--ast-serif);
  font-style: italic;
  position: relative;
}

.ast-interp-row {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(30,27,75,0.35);
  border: 1px solid rgba(167,139,250,0.18);
  border-left: 3px solid rgba(251,191,36,0.4);
  border-radius: 12px;
  transition: border-color 0.2s;
}
.ast-interp-row:hover {
  border-left-color: var(--ast-gold);
}
.ast-interp-head-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ast-interp-glyph {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(251,191,36,0.25), rgba(30,27,75,0.8));
  border: 1px solid rgba(251,191,36,0.45);
  color: var(--ast-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-family: 'Segoe UI Symbol', Arial, sans-serif;
  text-shadow: 0 0 8px var(--ast-gold-glow);
}
.ast-interp-title {
  font-family: var(--ast-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ast-gold);
}
.ast-interp-sub {
  margin-left: auto;
  color: var(--ast-dim);
  font-size: 10px;
  letter-spacing: 0.3px;
  font-style: italic;
}
.ast-interp-row .ast-interp-text {
  color: var(--ast-text);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 360px) {
  .ast-interp-sub { display: none; }
  .ast-interp-title { font-size: 14px; }
  .ast-interp-synthesis { padding: 16px; }
}

/* ════ Travel bot styles (extracted from live) ════ */

.trip-card {
  margin: 12px 0;
  background: linear-gradient(160deg, rgba(155, 92, 232, 0.12), rgba(212, 105, 138, 0.08));
  border: 1px solid rgba(155, 92, 232, 0.3);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.trip-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trip-card__dest-wrap { flex: 1; min-width: 0; }

.trip-card__dest {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 4px;
}

.trip-card__summary {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

.trip-card__cost {
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

.trip-card__cost-num {
  font-size: 16px;
  color: #fff;
  font-weight: 800;
  margin-right: 2px;
}

.trip-card__map {
  margin: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

.trip-card__map .trip-map__canvas { height: 180px; border-radius: 0; }

.trip-card__days {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 14px;
  scrollbar-width: none;
}

.trip-card__days::-webkit-scrollbar { display: none; }

.trip-day {
  flex: 0 0 85%;
  min-width: 260px;
  max-width: 320px;
  scroll-snap-align: start;
  background: rgba(18, 18, 26, 0.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trip-day__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.trip-day__num {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #D4698A;
}

.trip-day__date {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.trip-day__title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.trip-day__activities {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

.trip-act {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.trip-act:first-child { border-top: none; padding-top: 0; }

.trip-act__time {
  flex: 0 0 56px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  line-height: 1.4;
}

.trip-act__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trip-act__title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.trip-act__place {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

.trip-act__addr {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.3;
}

.trip-act__notes {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  margin-top: 3px;
}

.trip-act__meta {
  display: flex;
  gap: 6px;
  margin-top: 5px;
  flex-wrap: wrap;
}

.trip-act__chip {
  font-size: 10px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
}

.trip-day__alt {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
  padding: 6px 8px;
  background: rgba(79, 143, 255, 0.08);
  border-radius: 8px;
  line-height: 1.35;
}

.trip-day__cost {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
  padding-top: 6px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.trip-card__cta {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
}

.trip-card__btn {
  flex: 1;
  padding: 11px 14px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.trip-card__btn--primary {
  background: linear-gradient(135deg, #D4698A, #9B5CE8);
  color: #fff;
  box-shadow: 0 6px 18px rgba(155, 92, 232, 0.3);
}

.trip-card__btn--primary:hover:not(:disabled) { transform: translateY(-1px); }

.trip-card__btn--primary:disabled {
  background: rgba(155, 92, 232, 0.3);
  cursor: default;
  box-shadow: none;
}

.trip-map {
  margin: 10px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.trip-map__canvas {
  width: 100%;
  height: 220px;
  background: #0a0a12;
}

.trip-map__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
}

.trip-map__pin {
  background: transparent;
  border: none;
}

.trip-map__pin-inner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, #D4698A, #9B5CE8);
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

.travel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: background 0.15s;
}

.travel-btn:hover { background: rgba(255, 255, 255, 0.13); }

.travel-btn--primary {
  background: linear-gradient(135deg, rgba(212, 105, 138, 0.8), rgba(155, 92, 232, 0.8));
  border-color: transparent;
}

.travel-btn__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #D4698A;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: #fff;
}

.trip-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 1500;
  display: none;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.trip-modal-backdrop.active { display: flex; }

.trip-modal {
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  background: linear-gradient(180deg, #15151f, #0a0a12);
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.25s ease;
  overflow: hidden;
}

.trip-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trip-modal__title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}

.trip-modal__close {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
}

.trip-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trip-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trip-field__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55);
}

.trip-field__input,
.trip-field__select {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
}

.trip-field__input:focus,
.trip-field__select:focus {
  outline: none;
  border-color: rgba(155, 92, 232, 0.6);
  background: rgba(255, 255, 255, 0.08);
}

.trip-field__row {
  display: flex;
  gap: 10px;
}

.trip-field__row > * { flex: 1; }

.trip-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.trip-chip {
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  font-family: inherit;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.15s;
}

.trip-chip:hover { background: rgba(255, 255, 255, 0.1); }

.trip-chip.active {
  background: linear-gradient(135deg, rgba(212, 105, 138, 0.25), rgba(155, 92, 232, 0.25));
  border-color: rgba(155, 92, 232, 0.6);
  color: #fff;
}

.trip-modal__foot {
  padding: 14px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 10px;
  align-items: center;
}

.trip-submit-btn {
  flex: 1;
  padding: 14px 18px;
  background: linear-gradient(135deg, #D4698A, #9B5CE8);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 10px 30px rgba(155, 92, 232, 0.3);
  transition: transform 0.15s;
}

.trip-submit-btn:hover { transform: translateY(-1px); }

.trip-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.trip-submit-btn__cost {
  font-size: 11px;
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   TRAVEL MINI-APP (bot_8) — #travel-app
   Custom brand: ocean teal → sunset orange gradient, photo-card feed.
   Standalone palette — does NOT inherit from ast-/nut-/hab-/fin-.
═════════════════════════════════════════════════════════════════════ */

#travel-app {
  --trv-bg:        #0B1A22;
  --trv-bg-2:      #09141B;
  --trv-surface:   rgba(18, 36, 48, 0.8);
  --trv-border:    rgba(255, 255, 255, 0.08);
  --trv-text:      #F5F7FA;
  --trv-text-2:    rgba(245, 247, 250, 0.7);
  --trv-text-3:    rgba(245, 247, 250, 0.45);

  --trv-ocean:     #2DD4BF;
  --trv-ocean-2:   #14B8A6;
  --trv-sunset:    #FB923C;
  --trv-sunset-2:  #F97316;
  --trv-coral:     #F87171;
  --trv-sky:       #38BDF8;

  --trv-grad:      linear-gradient(135deg, #14B8A6 0%, #2DD4BF 40%, #FB923C 100%);
  --trv-grad-soft: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(251, 146, 60, 0.15) 100%);
  --trv-grad-hero: linear-gradient(160deg, rgba(20, 184, 166, 0.25) 0%, rgba(251, 146, 60, 0.12) 60%, transparent 100%);
}

#travel-app.overlay-page {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--trv-bg);
  color: var(--trv-text);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
#travel-app[style*="flex"] { display: flex; }

/* Subtle ambient backdrop gradient behind everything */
#travel-app::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(45, 212, 191, 0.12), transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(251, 146, 60, 0.10), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ── Top bar ── */
.trv-topbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  gap: 12px;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(11, 26, 34, 0.95), rgba(11, 26, 34, 0.4) 80%, transparent);
}
.trv-back-btn, .trv-profile-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--trv-border);
  border-radius: 12px;
  color: var(--trv-text);
  cursor: pointer;
  transition: background 0.2s;
}
.trv-back-btn:hover, .trv-profile-btn:hover { background: rgba(255, 255, 255, 0.1); }
.trv-topbar-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2px;
  background: var(--trv-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Tab content wrapper ── */
.trv-tab-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 90px; /* space for bottom nav */
  position: relative;
  z-index: 1;
  scrollbar-width: none;
}
.trv-tab-content::-webkit-scrollbar { display: none; }

/* ── Hero (Discover tab) ── */
.trv-hero {
  position: relative;
  padding: 24px 22px 28px;
  background: var(--trv-grad-hero);
  border-bottom: 1px solid var(--trv-border);
  overflow: hidden;
}
.trv-hero::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -30px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(251, 146, 60, 0.4), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.trv-hero-kicker {
  position: relative;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--trv-ocean);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.trv-hero-title {
  position: relative;
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
  color: var(--trv-text);
}
.trv-hero-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--trv-border);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 14px;
  color: var(--trv-text-2);
  backdrop-filter: blur(10px);
}
.trv-hero-search:focus-within {
  border-color: var(--trv-ocean);
  background: rgba(45, 212, 191, 0.08);
}
.trv-hero-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--trv-text);
  font-family: inherit;
  font-size: 14px;
}
.trv-hero-search input::placeholder { color: var(--trv-text-3); }

.trv-hero-cta {
  position: relative;
  width: 100%;
  padding: 16px 20px;
  background: var(--trv-grad);
  border: none;
  border-radius: 16px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(20, 184, 166, 0.35), 0 4px 12px rgba(251, 146, 60, 0.25);
  transition: transform 0.15s;
}
.trv-hero-cta:hover { transform: translateY(-1px); }
.trv-hero-cta:active { transform: translateY(0); }
.trv-hero-cta__cost {
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 12px;
}

/* ── Feed / sections ── */
.trv-feed {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 22px 0 8px;
}
.trv-feed-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--trv-text-3);
  font-size: 13px;
}

.trv-feed-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trv-feed-section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--trv-text);
  padding: 0 22px;
  letter-spacing: -0.3px;
}
.trv-feed-section-scroll {
  display: flex;
  gap: 12px;
  padding: 0 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.trv-feed-section-scroll::-webkit-scrollbar { display: none; }

/* ── Destination cards ── */
.trv-dest-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 220 / 280;
  background: var(--trv-surface);
  border: 1px solid var(--trv-border);
  transition: transform 0.2s, border-color 0.2s;
}
.trv-dest-card:hover {
  transform: translateY(-2px);
  border-color: var(--trv-ocean);
}
.trv-dest-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.trv-dest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(11, 26, 34, 0.2) 50%, rgba(11, 26, 34, 0.95) 100%);
  pointer-events: none;
  z-index: 1;
}
.trv-dest-card__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 14px 16px;
  z-index: 2;
}
.trv-dest-card__name {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.2px;
  margin-bottom: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.trv-dest-card__country {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}
.trv-dest-card__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.trv-dest-card__chip {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 7px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  border-radius: 5px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.trv-dest-card__chip--price {
  background: rgba(45, 212, 191, 0.25);
  color: #7DFFE7;
}
.trv-dest-card__chip--season {
  background: rgba(251, 191, 36, 0.3);
  color: #FDE68A;
}
.trv-skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:trvShimmer 1.5s infinite;border-radius:12px}
.trv-skeleton-card{flex:0 0 220px;height:280px;border-radius:18px}
.trv-skeleton-text{height:14px;width:60%;margin:8px 22px}
.trv-skeleton-title{height:20px;width:40%;margin:16px 22px 8px}
@keyframes trvShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.trv-dest-card__tagline {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Section titles and headings (Planner / Trips / Profile) ── */
.trv-planner-head {
  padding: 26px 22px 6px;
}
.trv-section-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--trv-text);
  margin: 0 0 6px 0;
  letter-spacing: -0.5px;
}
.trv-section-sub {
  font-size: 13px;
  color: var(--trv-text-2);
  line-height: 1.45;
  margin: 0;
}

/* ── Forms (Planner + Profile) ── */
.trv-planner-form {
  padding: 20px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.trv-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trv-field-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--trv-text-3);
  text-transform: uppercase;
}
.trv-label-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  opacity: 0.7;
}
.trv-field-input {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--trv-border);
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--trv-text);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.trv-field-input:focus {
  outline: none;
  border-color: var(--trv-ocean);
  background: rgba(45, 212, 191, 0.06);
}
.trv-field-input::placeholder { color: var(--trv-text-3); }
.trv-field-row {
  display: flex;
  gap: 10px;
}
.trv-field-row > * { flex: 1; }
select.trv-field-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.trv-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.trv-chip {
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--trv-border);
  border-radius: 11px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--trv-text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.trv-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--trv-text);
}
.trv-chip.active {
  background: var(--trv-grad-soft);
  border-color: var(--trv-ocean);
  color: var(--trv-text);
}

/* ── Buttons ── */
.trv-btn-primary {
  padding: 15px 22px;
  background: var(--trv-grad);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(20, 184, 166, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.trv-btn-primary:hover { transform: translateY(-1px); }
.trv-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.trv-btn-full { width: 100%; }
.trv-btn-cost {
  background: rgba(0, 0, 0, 0.25);
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
}
.trv-btn-secondary {
  padding: 13px 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--trv-border);
  border-radius: 14px;
  color: var(--trv-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.trv-btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }

/* ── Planner result — itinerary view ── */
.trv-planner-result {
  padding: 20px 22px;
}
.trv-result-card {
  background: var(--trv-surface);
  border: 1px solid var(--trv-border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
}
.trv-result-head {
  padding: 18px 20px 14px;
  background: var(--trv-grad-hero);
  border-bottom: 1px solid var(--trv-border);
}
.trv-result-dest {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 4px;
  color: var(--trv-text);
  letter-spacing: -0.3px;
}
.trv-result-summary {
  font-size: 13px;
  color: var(--trv-text-2);
  line-height: 1.4;
  margin: 0;
}
.trv-result-cost-strip {
  display: flex;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--trv-border);
  font-size: 12px;
  color: var(--trv-text-2);
}
.trv-result-cost-strip strong {
  color: var(--trv-ocean);
  font-size: 15px;
  font-weight: 800;
}

.trv-result-days {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trv-day {
  border-left: 3px solid var(--trv-ocean);
  padding-left: 14px;
}
.trv-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.trv-day-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--trv-ocean);
  text-transform: uppercase;
}
.trv-day-date {
  font-size: 11px;
  color: var(--trv-text-3);
}
.trv-day-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--trv-text);
  margin-bottom: 10px;
}
.trv-day-activities {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trv-activity {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed var(--trv-border);
}
.trv-activity:first-child { border-top: none; padding-top: 0; }
.trv-activity-time {
  flex: 0 0 58px;
  font-size: 11px;
  font-weight: 700;
  color: var(--trv-text-2);
}
.trv-activity-body { flex: 1; min-width: 0; }
.trv-activity-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--trv-text);
  margin-bottom: 2px;
}
.trv-activity-place {
  font-size: 11px;
  color: var(--trv-text-2);
}
.trv-activity-addr {
  font-size: 10px;
  color: var(--trv-text-3);
  line-height: 1.3;
  margin-top: 1px;
}
.trv-activity-notes {
  font-size: 11px;
  color: var(--trv-text-2);
  font-style: italic;
  margin-top: 4px;
}
.trv-activity-meta {
  display: flex;
  gap: 5px;
  margin-top: 5px;
  flex-wrap: wrap;
}
.trv-activity-chip {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  color: var(--trv-text-2);
}
.trv-day-alt {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding: 7px 10px;
  background: rgba(56, 189, 248, 0.08);
  border-radius: 8px;
  font-size: 10px;
  color: var(--trv-sky);
}
.trv-day-cost {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 800;
  color: var(--trv-text-3);
  text-align: right;
  text-transform: uppercase;
}

.trv-result-hotels {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--trv-border);
}
.trv-result-hotels-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--trv-text-3);
  margin-bottom: 10px;
}
.trv-hotel-mini {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--trv-border);
}
.trv-hotel-mini:last-child { border-bottom: none; }
.trv-hotel-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--trv-text);
}
.trv-hotel-area {
  font-size: 11px;
  color: var(--trv-text-3);
  margin-top: 2px;
}
.trv-hotel-why {
  font-size: 11px;
  color: var(--trv-text-2);
  margin-top: 4px;
  line-height: 1.35;
}
.trv-hotel-price {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--trv-ocean);
  white-space: nowrap;
}
.trv-hotel-price small {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--trv-text-3);
}

.trv-result-tips {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--trv-border);
}
.trv-tip {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--trv-text-2);
  line-height: 1.4;
}
.trv-tip-icon {
  flex-shrink: 0;
  color: var(--trv-sunset);
  font-weight: 800;
}

/* ── My Trips tab ── */
.trv-trips-list {
  padding: 20px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trv-trip-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--trv-surface);
  border: 1px solid var(--trv-border);
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.trv-trip-card:hover {
  border-color: var(--trv-ocean);
  transform: translateY(-1px);
}
.trv-trip-card__icon {
  flex: 0 0 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--trv-grad-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.trv-trip-card__body { flex: 1; min-width: 0; }
.trv-trip-card__dest {
  font-size: 15px;
  font-weight: 800;
  color: var(--trv-text);
  margin-bottom: 3px;
}
.trv-trip-card__meta {
  font-size: 11px;
  color: var(--trv-text-3);
  line-height: 1.35;
}
.trv-trip-card__del {
  align-self: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 113, 113, 0.1);
  border: none;
  border-radius: 10px;
  color: var(--trv-coral);
  font-size: 16px;
  cursor: pointer;
}

.trv-empty-state {
  padding: 60px 20px 40px;
  text-align: center;
}
.trv-empty-icon {
  font-size: 48px;
  opacity: 0.4;
  margin-bottom: 14px;
}
.trv-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--trv-text);
  margin-bottom: 6px;
}
.trv-empty-sub {
  font-size: 13px;
  color: var(--trv-text-3);
  margin-bottom: 22px;
  line-height: 1.5;
}

/* ── Bottom nav ── */
.trv-bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  background: rgba(9, 20, 27, 0.9);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--trv-border);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}
.trv-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  color: var(--trv-text-3);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s;
}
.trv-nav-btn svg { opacity: 0.7; transition: opacity 0.15s; }
.trv-nav-btn.active { color: var(--trv-ocean); }
.trv-nav-btn.active svg { opacity: 1; }

/* ── Modals ── */
.trv-modal {
  /* Inherit travel CSS variables since modal is outside #travel-app in DOM */
  --trv-bg: #0B1A22;
  --trv-surface: rgba(18, 36, 48, 0.8);
  --trv-border: rgba(255, 255, 255, 0.08);
  --trv-text: #F5F7FA;
  --trv-text-2: rgba(245, 247, 250, 0.7);
  --trv-text-3: rgba(245, 247, 250, 0.45);
  --trv-ocean: #2DD4BF;
  --trv-sunset: #FB923C;
  --trv-sky: #38BDF8;
  --trv-coral: #F87171;
  --trv-grad: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 40%, #FB923C 100%);
  --trv-grad-soft: linear-gradient(135deg, rgba(20, 184, 166, 0.2) 0%, rgba(251, 146, 60, 0.15) 100%);
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
@media (min-width: 600px) {
  .trv-modal { align-items: center; }
}
.trv-sheet {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  background: linear-gradient(180deg, #112230, #09141B);
  border: 1px solid var(--trv-border);
  border-radius: 22px 22px 0 0;
  padding: 20px;
  overflow-y: auto;
  animation: trvSlideUp 0.25s ease;
}
.trv-sheet-large {
  max-height: 92vh;
}
@media (min-width: 600px) {
  .trv-sheet { border-radius: 22px; }
}
@keyframes trvSlideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.trv-sheet {
  will-change: transform;
  touch-action: pan-y;
}
.trv-sheet-handle {
  width: 40px;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  margin: 0 auto 14px;
  cursor: grab;
  /* Expand touch target */
  padding: 8px 0;
  background-clip: content-box;
}

/* Destination detail inside modal */
.trv-dest-hero {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}
.trv-dest-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trv-dest-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(11, 26, 34, 0.95));
  pointer-events: none;
}
.trv-dest-hero-body {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 1;
}
.trv-dest-hero-name {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
}
.trv-dest-hero-country {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.trv-dest-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.trv-dest-info-cell {
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  text-align: center;
}
.trv-dest-info-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--trv-text);
}
.trv-dest-info-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--trv-text-3);
  margin-top: 2px;
}
.trv-dest-desc {
  font-size: 13px;
  color: var(--trv-text-2);
  line-height: 1.5;
  margin-bottom: 18px;
}
.trv-dest-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.trv-dest-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  background: var(--trv-grad-soft);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: 10px;
  color: var(--trv-ocean);
}

/* Photo credit pin */
.trv-photo-credit {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 3;
  font-size: 7px;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 5px;
  border-radius: 4px;
  pointer-events: none;
}

/* Loading spinner */
.trv-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--trv-ocean);
  border-radius: 50%;
  animation: trvSpin 0.8s linear infinite;
}
@keyframes trvSpin { to { transform: rotate(360deg); } }

/* ── Chat tab (Variant 1: free-form AI chat) ── */
.trv-tab-content[data-tab="chat"]{padding-bottom:0;overflow:hidden}
.trv-chat-container{display:flex;flex-direction:column;height:100%;position:relative;box-sizing:border-box}
.trv-chat-messages{flex:1;overflow-y:auto;padding:16px 18px calc(145px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.trv-chat-messages::-webkit-scrollbar{display:none}
.trv-chat-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 10px 20px;gap:10px}
.trv-chat-welcome-icon{font-size:48px;opacity:.6}
.trv-chat-welcome-title{font-size:20px;font-weight:800;color:var(--trv-text)}
.trv-chat-welcome-sub{font-size:13px;color:var(--trv-text-3);line-height:1.5;max-width:280px}
.trv-chat-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.trv-chat-suggestion{padding:9px 14px;background:var(--trv-grad-soft);border:1px solid rgba(45,212,191,.25);border-radius:12px;font-family:inherit;font-size:12px;font-weight:600;color:var(--trv-ocean);cursor:pointer;transition:all .15s}
.trv-chat-suggestion:hover{background:rgba(45,212,191,.15);border-color:var(--trv-ocean)}
.trv-chat-msg{max-width:85%;padding:12px 16px;border-radius:16px;font-size:13px;line-height:1.55;word-wrap:break-word}
.trv-chat-msg--user{align-self:flex-end;background:var(--trv-grad);color:#fff;border-bottom-right-radius:4px}
.trv-chat-msg--ai{align-self:flex-start;background:var(--trv-surface);border:1px solid var(--trv-border);color:var(--trv-text);border-bottom-left-radius:4px}
.trv-chat-msg--ai p{margin:0 0 8px}.trv-chat-msg--ai p:last-child{margin:0}
.trv-chat-msg--ai strong{color:var(--trv-ocean)}
.trv-chat-msg--ai ul,.trv-chat-msg--ai ol{margin:4px 0;padding-left:18px}
.trv-chat-msg--ai li{margin-bottom:3px}
.trv-chat-msg--loading{display:flex;gap:6px;padding:14px 18px}
.trv-chat-dot{width:7px;height:7px;background:var(--trv-ocean,#2DD4BF);border-radius:50%;animation:trvChatBounce 1.2s infinite}
.trv-chat-dot:nth-child(2){animation-delay:.2s}.trv-chat-dot:nth-child(3){animation-delay:.4s}
@keyframes trvChatBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}
/* Universal app-chat thinking indicator (used by all thick-bot chats) */
.app-chat-thinking{display:flex;align-items:center;gap:10px;padding:2px 0}
.app-chat-thinking .thinking-dots{display:flex;gap:4px}
.app-chat-thinking .thinking-dots span{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;animation:trvChatBounce 1.2s infinite}
.app-chat-thinking .thinking-dots span:nth-child(2){animation-delay:.2s}
.app-chat-thinking .thinking-dots span:nth-child(3){animation-delay:.4s}
.app-chat-thinking-text{font-size:12px;opacity:.7;transition:opacity .15s ease}
.trv-chat-msg--thinking{background:transparent!important;border:none!important}
.trv-chat-cost-badge{align-self:center;font-size:10px;color:var(--trv-text-3);padding:3px 10px;background:rgba(255,255,255,.03);border-radius:6px}
.trv-chat-input-area{position:fixed;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom, 0px));z-index:9;display:flex;gap:8px;padding:10px 18px;background:rgba(9,20,27,.97);backdrop-filter:blur(10px);border-top:1px solid var(--trv-border)}
.trv-chat-input{flex:1;padding:12px 16px;background:rgba(255,255,255,.06);border:1px solid var(--trv-border);border-radius:14px;font-family:inherit;font-size:14px;color:var(--trv-text);outline:none;resize:none;overflow:hidden;line-height:1.4}
.trv-chat-input:focus{border-color:var(--trv-ocean);background:rgba(45,212,191,.06)}
.trv-chat-input::placeholder{color:var(--trv-text-3)}
.trv-chat-send-btn{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--trv-grad);border:none;border-radius:14px;color:#fff;cursor:pointer;transition:transform .15s}
.trv-chat-send-btn:hover{transform:scale(1.05)}.trv-chat-send-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* ── Inline chat inside trip detail (Variant 2) ── */
.trv-inline-chat{border-top:1px solid var(--trv-border);margin-top:16px;padding-top:12px}
.trv-inline-chat-msgs{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;padding:0 4px;scrollbar-width:none;margin-bottom:10px}
.trv-inline-chat-msgs::-webkit-scrollbar{display:none}
.trv-inline-chat-msgs:empty{display:none}
.trv-inline-msg{max-width:90%;padding:8px 12px;border-radius:12px;font-size:12px;line-height:1.5;word-wrap:break-word}
.trv-inline-msg--user{align-self:flex-end;background:rgba(45,212,191,.2);color:var(--trv-text);border-bottom-right-radius:3px}
.trv-inline-msg--ai{align-self:flex-start;background:rgba(255,255,255,.04);border:1px solid var(--trv-border);color:var(--trv-text-2);border-bottom-left-radius:3px}
.trv-inline-msg--ai p{margin:0 0 4px}.trv-inline-msg--ai p:last-child{margin:0}
.trv-inline-chat{position:sticky;bottom:0;z-index:5;background:rgba(9,20,27,.97);padding:10px 14px 14px;border-top:1px solid var(--trv-border);backdrop-filter:blur(10px)}
.trv-inline-chat-input-area{display:flex;gap:6px}
.trv-inline-chat-input{flex:1;padding:10px 14px;background:rgba(255,255,255,.04);border:1px solid var(--trv-border);border-radius:12px;font-family:inherit;font-size:13px;color:var(--trv-text);outline:none;resize:none;overflow:hidden;line-height:1.4}
.trv-inline-chat-input:focus{border-color:var(--trv-ocean)}
.trv-inline-chat-input::placeholder{color:var(--trv-text-3)}
.trv-inline-chat-send{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--trv-ocean);border:none;border-radius:10px;color:#0B1A22;cursor:pointer}
.trv-inline-chat-send:disabled{opacity:.4;cursor:not-allowed}

/* ════════════════════════════════════════════════════════════
   VIDEO DOWNLOAD MINI-APP (bot_7)
   Red+violet brand palette, YouTube/TikTok inspired
═════════════════════════════════════════════════════════════ */
#video-app{--vid-bg:#0D0D14;--vid-surface:rgba(22,22,32,.85);--vid-border:rgba(255,255,255,.08);--vid-text:#F5F5F7;--vid-text-2:rgba(245,245,247,.7);--vid-text-3:rgba(245,245,247,.45);--vid-red:#E11D48;--vid-violet:#7C3AED;--vid-grad:linear-gradient(135deg,#E11D48,#7C3AED);--vid-grad-soft:linear-gradient(135deg,rgba(225,29,72,.15),rgba(124,58,237,.12))}
#video-app.overlay-page{position:fixed;inset:0;z-index:2000;background:var(--vid-bg);color:var(--vid-text);display:none;flex-direction:column;overflow:hidden;font-family:'Inter',-apple-system,sans-serif}
#video-app[style*="flex"]{display:flex}
#video-app::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(225,29,72,.08),transparent 60%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(124,58,237,.08),transparent 60%);pointer-events:none;z-index:0}
.vid-topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;gap:12px;backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(13,13,20,.95),rgba(13,13,20,.4) 80%,transparent)}
.vid-back-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--vid-border);border-radius:12px;color:var(--vid-text);cursor:pointer}
.vid-topbar-title{font-size:15px;font-weight:800;letter-spacing:2px;background:var(--vid-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vid-tab-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:90px;position:relative;z-index:1;scrollbar-width:none}
.vid-tab-content::-webkit-scrollbar{display:none}
.vid-tab-content[data-tab="chat"]{padding-bottom:0;overflow:hidden}
/* Hero */
.vid-hero{position:relative;padding:30px 22px 24px;text-align:center}
.vid-hero-icon{font-size:56px;margin-bottom:14px}
.vid-hero-title{font-size:28px;font-weight:800;line-height:1.15;margin:0 0 10px;letter-spacing:-.5px;color:var(--vid-text)}
.vid-hero-sub{font-size:13px;color:var(--vid-text-3);line-height:1.5;margin:0 0 24px;max-width:320px;margin-left:auto;margin-right:auto}
.vid-url-input-wrap{display:flex;gap:6px;margin-bottom:12px}
.vid-url-input{flex:1;padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid var(--vid-border);border-radius:14px;font-family:inherit;font-size:14px;color:var(--vid-text);outline:none;transition:border-color .15s}
.vid-url-input:focus{border-color:var(--vid-red);background:rgba(225,29,72,.04)}
.vid-url-input::placeholder{color:var(--vid-text-3)}
.vid-paste-btn{width:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--vid-border);border-radius:14px;color:var(--vid-text-2);cursor:pointer}
.vid-paste-btn:hover{background:rgba(255,255,255,.1)}
.vid-quality-row{display:flex;gap:8px;justify-content:center}
.vid-quality-select{padding:12px 16px;background:rgba(255,255,255,.06);border:1px solid var(--vid-border);border-radius:12px;color:var(--vid-text);font-family:inherit;font-size:13px;appearance:none;-webkit-appearance:none;min-width:80px;text-align:center;cursor:pointer}
.vid-dl-btn{flex:1;max-width:200px;padding:12px 18px;background:var(--vid-grad);border:none;border-radius:14px;color:#fff;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 24px rgba(225,29,72,.3);transition:transform .15s}
.vid-dl-btn:hover{transform:translateY(-1px)}
.vid-dl-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.vid-audio-btn{padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid var(--vid-border);border-radius:12px;color:var(--vid-text-2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px}
.vid-audio-btn:hover{background:rgba(255,255,255,.1)}
/* New: mode switch + chips */
.vid-mode-switch{display:flex;gap:6px;margin:12px 0 10px;background:rgba(255,255,255,.03);border:1px solid var(--vid-border);border-radius:14px;padding:4px}
.vid-mode-btn{flex:1;padding:10px 8px;background:transparent;border:none;border-radius:10px;color:var(--vid-text-2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.vid-mode-btn.active{background:var(--vid-grad);color:#fff;box-shadow:0 4px 12px rgba(225,29,72,.25)}
.vid-quality-chips,.vid-audio-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.vid-chip{padding:8px 14px;background:rgba(255,255,255,.06);border:1px solid var(--vid-border);border-radius:10px;color:var(--vid-text-2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.vid-chip.active{background:var(--vid-grad-soft);border-color:#E11D48;color:var(--vid-text)}
.vid-dl-btn--full{max-width:none;width:100%}
.vid-batch-toggle{width:100%;margin-top:8px;padding:10px;background:transparent;border:1px dashed var(--vid-border);border-radius:10px;color:var(--vid-text-2);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.vid-batch-toggle:active{background:rgba(255,255,255,.04)}
.vid-batch-area{width:100%;min-height:110px;padding:12px;background:rgba(255,255,255,.04);border:1px solid var(--vid-border);border-radius:12px;color:var(--vid-text);font-family:ui-monospace,monospace;font-size:12px;resize:vertical;box-sizing:border-box}
.vid-batch-progress{padding:12px;display:flex;flex-direction:column;gap:6px}
.vid-batch-row{display:flex;gap:8px;align-items:center;padding:8px 10px;background:rgba(255,255,255,.03);border:1px solid var(--vid-border);border-radius:10px;font-size:11px}
.vid-batch-num{color:var(--vid-text-3);font-weight:700;flex-shrink:0}
.vid-batch-url{flex:1;color:var(--vid-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vid-batch-status{flex-shrink:0;font-weight:600;color:var(--vid-text-2)}
.vid-batch-status.err{color:#EF4444}
.vid-batch-dl-link{color:#10B981;font-weight:700;text-decoration:none}
.vid-batch-summary{padding:8px 10px;background:var(--vid-grad-soft);border-radius:10px;font-size:12px;font-weight:700;color:var(--vid-text);text-align:center}

/* ── Global AI feedback (thumbs up/down) — works in any bot's color scheme ── */
.ai-fb-row{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-top:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;font-size:11px}
.ai-fb-label{color:currentColor;opacity:.7;font-weight:600}
.ai-fb-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:currentColor;padding:4px 10px;border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit;line-height:1;transition:all .15s}
.ai-fb-btn:active{transform:scale(.92)}
.ai-fb-btn.active{background:rgba(16,185,129,.2);border-color:rgba(16,185,129,.5)}
.ai-fb-btn[data-rate="-1"].active{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.5)}
.ai-fb-btn:disabled{opacity:.5;cursor:default}

/* Feedback row INSIDE chat bubbles — эргономичный, прилегает к низу пузыря без визуального шума */
.hab-ai-bubble .ai-fb-row,
.nut-msg-bubble .ai-fb-row,
.ast-msg-bubble .ai-fb-row,
.ege-msg .ai-fb-row,
.trv-chat-msg .ai-fb-row,
.mkt-chat-msg .ai-fb-row,
.chef-chat-msg .ai-fb-row,
.vid-chat-msg .ai-fb-row {
  margin-top: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 9px;
  font-size: 11px;
}
.hab-ai-bubble .ai-fb-btn,
.nut-msg-bubble .ai-fb-btn,
.ast-msg-bubble .ai-fb-btn,
.ege-msg .ai-fb-btn,
.trv-chat-msg .ai-fb-btn,
.mkt-chat-msg .ai-fb-btn,
.chef-chat-msg .ai-fb-btn,
.vid-chat-msg .ai-fb-btn {
  padding: 3px 8px;
  font-size: 12px;
}
/* Result card */
.vid-result{padding:0 22px 20px}
.vid-result-card{background:var(--vid-surface);border:1px solid var(--vid-border);border-radius:18px;overflow:hidden;margin-top:12px}
.vid-result-platform{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:12px;font-weight:700;color:var(--vid-text-2);border-bottom:1px solid var(--vid-border)}
.vid-result-platform-dot{width:8px;height:8px;border-radius:50%}
.vid-result-body{padding:16px}
.vid-result-filename{font-size:13px;font-weight:700;color:var(--vid-text);margin-bottom:8px;word-break:break-all}
.vid-result-actions{display:flex;gap:8px;margin-top:12px}
.vid-result-dl-btn{flex:1;padding:12px;background:var(--vid-grad);border:none;border-radius:12px;color:#fff;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none;text-align:center;display:block}
/* Platforms */
.vid-platforms{padding:20px 22px}
.vid-platforms-title{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--vid-text-3);margin-bottom:14px}
.vid-platforms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vid-platform-chip{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:rgba(255,255,255,.03);border:1px solid var(--vid-border);border-radius:14px;font-size:11px;font-weight:600;color:var(--vid-text-2);cursor:default;transition:border-color .15s}
.vid-platform-chip:hover{border-color:rgba(255,255,255,.15)}
.vid-platform-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff}
/* History */
.vid-section-head{padding:26px 22px 6px}
.vid-section-title{font-size:24px;font-weight:800;color:var(--vid-text);margin:0 0 6px;letter-spacing:-.5px}
.vid-section-sub{font-size:13px;color:var(--vid-text-2);margin:0}
.vid-history-list{padding:16px 22px;display:flex;flex-direction:column;gap:10px}
.vid-history-item{display:flex;gap:12px;padding:12px 14px;background:var(--vid-surface);border:1px solid var(--vid-border);border-radius:14px;align-items:center}
.vid-history-item__icon{flex:0 0 40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
.vid-history-item__body{flex:1;min-width:0}
.vid-history-item__url{font-size:12px;color:var(--vid-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vid-history-item__meta{font-size:10px;color:var(--vid-text-3);margin-top:2px}
.vid-history-item__del{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:rgba(225,29,72,.1);border:none;border-radius:8px;color:var(--vid-red);font-size:14px;cursor:pointer}
.vid-empty{padding:60px 20px;text-align:center}
.vid-empty-icon{font-size:48px;opacity:.4;margin-bottom:14px}
.vid-empty-title{font-size:17px;font-weight:800;color:var(--vid-text);margin-bottom:6px}
.vid-empty-sub{font-size:13px;color:var(--vid-text-3)}
/* Chat tab (reuses .trv-chat patterns but vid- prefixed) */
.vid-chat-container{display:flex;flex-direction:column;height:100%;position:relative}
.vid-chat-messages{flex:1;overflow-y:auto;padding:16px 18px calc(145px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.vid-chat-messages::-webkit-scrollbar{display:none}
.vid-chat-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 10px 20px;gap:10px}
.vid-chat-welcome-icon{font-size:48px;opacity:.6}
.vid-chat-welcome-title{font-size:20px;font-weight:800;color:var(--vid-text)}
.vid-chat-welcome-sub{font-size:13px;color:var(--vid-text-3);line-height:1.5;max-width:280px}
.vid-chat-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.vid-chat-suggestion{padding:9px 14px;background:var(--vid-grad-soft);border:1px solid rgba(225,29,72,.25);border-radius:12px;font-family:inherit;font-size:12px;font-weight:600;color:var(--vid-red);cursor:pointer}
.vid-chat-suggestion:hover{background:rgba(225,29,72,.15)}
.vid-chat-msg{max-width:85%;padding:12px 16px;border-radius:16px;font-size:13px;line-height:1.55;word-wrap:break-word}
.vid-chat-msg--user{align-self:flex-end;background:var(--vid-grad);color:#fff;border-bottom-right-radius:4px}
.vid-chat-msg--ai{align-self:flex-start;background:var(--vid-surface);border:1px solid var(--vid-border);color:var(--vid-text);border-bottom-left-radius:4px}
.vid-chat-msg--ai p{margin:0 0 8px}.vid-chat-msg--ai p:last-child{margin:0}
.vid-chat-msg--ai strong{color:var(--vid-red)}
.vid-chat-msg--thinking{background:transparent!important;border:none!important}
.vid-chat-input-area{position:fixed;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom, 0px));z-index:9;display:flex;gap:8px;padding:10px 18px;background:rgba(13,13,20,.97);backdrop-filter:blur(10px);border-top:1px solid var(--vid-border)}
.vid-chat-input{flex:1;padding:12px 16px;background:rgba(255,255,255,.06);border:1px solid var(--vid-border);border-radius:14px;font-family:inherit;font-size:14px;color:var(--vid-text);outline:none;resize:none;overflow:hidden;line-height:1.4}
.vid-chat-input:focus{border-color:var(--vid-red)}
.vid-chat-input::placeholder{color:var(--vid-text-3)}
.vid-chat-send-btn{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--vid-grad);border:none;border-radius:14px;color:#fff;cursor:pointer}
.vid-chat-send-btn:disabled{opacity:.4;cursor:not-allowed}
/* Bottom nav */
.vid-bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;background:rgba(13,13,20,.9);backdrop-filter:blur(16px);border-top:1px solid var(--vid-border);padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.vid-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:transparent;border:none;color:var(--vid-text-3);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer}
.vid-nav-btn svg{opacity:.7}.vid-nav-btn.active{color:var(--vid-red)}.vid-nav-btn.active svg{opacity:1}
/* Thinking spinner */
.vid-spinner{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--vid-red);border-radius:50%;animation:vidSpin .8s linear infinite}
@keyframes vidSpin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════════════════════
   MARKETING MINI-APP (bot_9) — amber + violet
═════════════════════════════════════════════════════════════ */
#marketing-app{--mkt-bg:#12100E;--mkt-surface:rgba(28,24,20,.85);--mkt-border:rgba(255,255,255,.08);--mkt-text:#F5F2EF;--mkt-text-2:rgba(245,242,239,.7);--mkt-text-3:rgba(245,242,239,.45);--mkt-amber:#F59E0B;--mkt-violet:#8B5CF6;--mkt-grad:linear-gradient(135deg,#F59E0B,#8B5CF6);--mkt-grad-soft:linear-gradient(135deg,rgba(245,158,11,.15),rgba(139,92,246,.12))}
#marketing-app.overlay-page{position:fixed;inset:0;z-index:2000;background:var(--mkt-bg);color:var(--mkt-text);display:none;flex-direction:column;overflow:hidden;font-family:'Inter',-apple-system,sans-serif}
#marketing-app[style*="flex"]{display:flex}
#marketing-app::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 30% 0%,rgba(245,158,11,.08),transparent 60%),radial-gradient(ellipse 60% 40% at 70% 100%,rgba(139,92,246,.08),transparent 60%);pointer-events:none;z-index:0}
.mkt-topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;gap:12px;backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(18,16,14,.95),rgba(18,16,14,.4) 80%,transparent)}
.mkt-back-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--mkt-border);border-radius:12px;color:var(--mkt-text);cursor:pointer}
.mkt-topbar-title{font-size:15px;font-weight:800;letter-spacing:2px;background:var(--mkt-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mkt-tab-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:90px;position:relative;z-index:1;scrollbar-width:none}
.mkt-tab-content::-webkit-scrollbar{display:none}
.mkt-tab-content[data-tab="chat"]{padding-bottom:0;overflow:hidden}
/* Hero */
.mkt-hero{position:relative;padding:24px 22px 20px}
.mkt-hero::after{content:'';position:absolute;right:-40px;top:-20px;width:180px;height:180px;background:radial-gradient(circle,rgba(245,158,11,.3),transparent 60%);filter:blur(20px);pointer-events:none}
.mkt-hero-kicker{position:relative;font-size:10px;font-weight:800;letter-spacing:2px;color:var(--mkt-amber);margin-bottom:10px;text-transform:uppercase}
.mkt-hero-title{position:relative;font-size:30px;font-weight:800;line-height:1.1;margin:0 0 10px;color:var(--mkt-text)}
.mkt-hero-sub{font-size:13px;color:var(--mkt-text-3);line-height:1.5;margin:0}
/* Content type grid */
.mkt-types-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:16px 22px}
.mkt-type-card{display:flex;align-items:center;gap:12px;padding:16px 14px;background:var(--mkt-surface);border:1px solid var(--mkt-border);border-radius:16px;cursor:pointer;transition:border-color .15s,transform .15s}
.mkt-type-card:hover{border-color:var(--mkt-amber);transform:translateY(-1px)}
.mkt-type-card:active{transform:scale(.97)}
.mkt-type-icon{font-size:24px;flex-shrink:0}
.mkt-type-info{flex:1;min-width:0}
.mkt-type-label{font-size:13px;font-weight:700;color:var(--mkt-text)}
.mkt-type-cost{font-size:10px;color:var(--mkt-text-3);margin-top:2px}
/* Section heads */
.mkt-section-head{padding:26px 22px 6px}
.mkt-section-title{font-size:24px;font-weight:800;color:var(--mkt-text);margin:0 0 6px;letter-spacing:-.5px}
.mkt-section-sub{font-size:13px;color:var(--mkt-text-2);margin:0}
/* Forms */
.mkt-profile-form,.mkt-plan-form{padding:20px 22px 32px;display:flex;flex-direction:column;gap:18px}
.mkt-field{display:flex;flex-direction:column;gap:8px}
.mkt-field-label{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--mkt-text-3);text-transform:uppercase}
.mkt-label-hint{text-transform:none;letter-spacing:0;font-weight:500;opacity:.7}
.mkt-field-input{padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid var(--mkt-border);border-radius:14px;font-family:inherit;font-size:15px;color:var(--mkt-text);width:100%;box-sizing:border-box}
.mkt-field-input:focus{outline:none;border-color:var(--mkt-amber);background:rgba(245,158,11,.04)}
.mkt-field-input::placeholder{color:var(--mkt-text-3)}
.mkt-textarea{resize:vertical;min-height:60px}
select.mkt-field-input{appearance:none;-webkit-appearance:none}
.mkt-chips{display:flex;gap:8px;flex-wrap:wrap}
.mkt-chip{padding:9px 14px;background:rgba(255,255,255,.04);border:1px solid var(--mkt-border);border-radius:11px;font-family:inherit;font-size:13px;font-weight:600;color:var(--mkt-text-2);cursor:pointer;transition:all .15s}
.mkt-chip:hover{background:rgba(255,255,255,.08)}
.mkt-chip.active{background:var(--mkt-grad-soft);border-color:var(--mkt-amber);color:var(--mkt-text)}
/* Buttons */
.mkt-btn-primary{padding:15px 22px;background:var(--mkt-grad);border:none;border-radius:14px;color:#fff;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 30px rgba(245,158,11,.25);transition:transform .15s}
.mkt-btn-primary:hover{transform:translateY(-1px)}
.mkt-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.mkt-btn-full{width:100%}
.mkt-btn-cost{background:rgba(0,0,0,.25);padding:3px 9px;border-radius:7px;font-size:12px}
/* Gen modal */
.mkt-gen-modal{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center}
@media(min-width:600px){.mkt-gen-modal{align-items:center}}
.mkt-gen-sheet{width:100%;max-width:520px;max-height:88vh;background:linear-gradient(180deg,#1A1714,#12100E);border:1px solid var(--mkt-border);border-radius:22px 22px 0 0;padding:20px;overflow-y:auto}
@media(min-width:600px){.mkt-gen-sheet{border-radius:22px}}
.mkt-gen-sheet-handle{width:40px;height:5px;background:rgba(255,255,255,.3);border-radius:3px;margin:0 auto 14px;padding:8px 0;background-clip:content-box;cursor:grab}
.mkt-gen-sheet-title{font-size:18px;font-weight:800;color:var(--mkt-text);margin-bottom:16px}
.mkt-gen-sheet-body{display:flex;flex-direction:column;gap:14px}
/* Result card */
.mkt-gen-result{padding:0 22px 20px}
.mkt-result-card{background:var(--mkt-surface);border:1px solid var(--mkt-border);border-radius:18px;padding:20px;margin-top:12px}
.mkt-result-type{font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--mkt-amber);margin-bottom:8px}
.mkt-result-text{font-size:13px;line-height:1.65;color:var(--mkt-text);white-space:pre-wrap;word-wrap:break-word}
.mkt-result-actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.mkt-result-btn{padding:10px 16px;background:rgba(255,255,255,.06);border:1px solid var(--mkt-border);border-radius:10px;color:var(--mkt-text-2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.mkt-result-btn:hover{background:rgba(255,255,255,.1)}
.mkt-result-btn--primary{background:var(--mkt-grad);border-color:transparent;color:#fff}
/* History */
.mkt-history-list{padding:16px 22px;display:flex;flex-direction:column;gap:10px}
.mkt-history-item{padding:14px;background:var(--mkt-surface);border:1px solid var(--mkt-border);border-radius:14px;cursor:pointer;transition:border-color .15s}
.mkt-history-item:hover{border-color:var(--mkt-amber)}
.mkt-history-item__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.mkt-history-item__type{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mkt-amber)}
.mkt-history-item__date{font-size:10px;color:var(--mkt-text-3)}
.mkt-history-item__topic{font-size:13px;font-weight:700;color:var(--mkt-text);margin-bottom:4px}
.mkt-history-item__preview{font-size:11px;color:var(--mkt-text-3);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mkt-history-item__actions{display:flex;gap:6px;margin-top:8px}
.mkt-history-item__btn{min-width:36px;min-height:36px;padding:6px 10px;background:rgba(255,255,255,.06);border:1px solid var(--mkt-border);border-radius:8px;font-size:13px;font-weight:700;color:var(--mkt-text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mkt-history-item__btn--fav{color:var(--mkt-amber)}
.mkt-history-item__btn--del{color:#F87171}
/* Plan */
.mkt-plan-result{padding:16px 22px}
.mkt-plan-card{background:var(--mkt-surface);border:1px solid var(--mkt-border);border-radius:16px;overflow:hidden}
.mkt-plan-day{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--mkt-border)}
.mkt-plan-day:last-child{border-bottom:none}
.mkt-plan-date{flex:0 0 50px;text-align:center}
.mkt-plan-date-num{font-size:18px;font-weight:800;color:var(--mkt-text)}
.mkt-plan-date-day{font-size:10px;color:var(--mkt-text-3);text-transform:uppercase}
.mkt-plan-body{flex:1;min-width:0}
.mkt-plan-format{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--mkt-violet);margin-bottom:3px}
.mkt-plan-topic{font-size:13px;font-weight:700;color:var(--mkt-text);margin-bottom:2px}
.mkt-plan-desc{font-size:11px;color:var(--mkt-text-3);line-height:1.4}
.mkt-plan-goal{font-size:9px;padding:2px 6px;background:var(--mkt-grad-soft);border-radius:4px;color:var(--mkt-amber);display:inline-block;margin-top:4px}
/* Empty */
.mkt-empty{padding:60px 20px;text-align:center}
.mkt-empty-icon{font-size:48px;opacity:.4;margin-bottom:14px}
.mkt-empty-title{font-size:17px;font-weight:800;color:var(--mkt-text);margin-bottom:6px}
/* Chat */
.mkt-chat-container{display:flex;flex-direction:column;height:100%;position:relative}
.mkt-chat-messages{flex:1;overflow-y:auto;padding:16px 18px calc(145px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.mkt-chat-messages::-webkit-scrollbar{display:none}
.mkt-chat-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 10px 20px;gap:10px}
.mkt-chat-welcome-icon{font-size:48px;opacity:.6}
.mkt-chat-welcome-title{font-size:20px;font-weight:800;color:var(--mkt-text)}
.mkt-chat-welcome-sub{font-size:13px;color:var(--mkt-text-3);line-height:1.5;max-width:280px}
.mkt-chat-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.mkt-chat-suggestion{padding:9px 14px;background:var(--mkt-grad-soft);border:1px solid rgba(245,158,11,.25);border-radius:12px;font-family:inherit;font-size:12px;font-weight:600;color:var(--mkt-amber);cursor:pointer}
.mkt-chat-msg{max-width:85%;padding:12px 16px;border-radius:16px;font-size:13px;line-height:1.55;word-wrap:break-word}
.mkt-chat-msg--user{align-self:flex-end;background:var(--mkt-grad);color:#fff;border-bottom-right-radius:4px}
.mkt-chat-msg--ai{align-self:flex-start;background:var(--mkt-surface);border:1px solid var(--mkt-border);color:var(--mkt-text);border-bottom-left-radius:4px}
.mkt-chat-msg--ai p{margin:0 0 8px}.mkt-chat-msg--ai p:last-child{margin:0}
.mkt-chat-msg--ai strong{color:var(--mkt-amber)}
.mkt-chat-msg--thinking{background:transparent!important;border:none!important}
.mkt-chat-input-area{position:fixed;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom, 0px));z-index:9;display:flex;gap:8px;padding:10px 18px;background:rgba(18,16,14,.97);backdrop-filter:blur(10px);border-top:1px solid var(--mkt-border)}
.mkt-chat-input{flex:1;padding:12px 16px;background:rgba(255,255,255,.06);border:1px solid var(--mkt-border);border-radius:14px;font-family:inherit;font-size:14px;color:var(--mkt-text);outline:none;resize:none;overflow:hidden;line-height:1.4}
.mkt-chat-input:focus{border-color:var(--mkt-amber)}
.mkt-chat-input::placeholder{color:var(--mkt-text-3)}
.mkt-chat-send-btn{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--mkt-grad);border:none;border-radius:14px;color:#fff;cursor:pointer}
.mkt-chat-send-btn:disabled{opacity:.4;cursor:not-allowed}
/* Bottom nav */
.mkt-bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;background:rgba(18,16,14,.9);backdrop-filter:blur(16px);border-top:1px solid var(--mkt-border);padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.mkt-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:transparent;border:none;color:var(--mkt-text-3);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer}
.mkt-nav-btn svg{opacity:.7}.mkt-nav-btn.active{color:var(--mkt-amber)}.mkt-nav-btn.active svg{opacity:1}

/* Toast */
.mkt-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(245,158,11,.92);color:#12100E;padding:10px 22px;border-radius:14px;font-weight:700;font-size:13px;z-index:3100;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(245,158,11,.3)}
.mkt-toast--error{background:rgba(239,68,68,.92);color:#fff;box-shadow:0 4px 20px rgba(239,68,68,.3)}
.mkt-toast--show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Brand Voice */
.mkt-bv-card{background:var(--mkt-surface);border:1px solid var(--mkt-border);border-radius:16px;padding:16px;margin-top:12px}
.mkt-bv-title{font-size:15px;font-weight:800;color:var(--mkt-amber);margin-bottom:12px}
.mkt-bv-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px}
.mkt-bv-row:last-of-type{border-bottom:none}
.mkt-bv-label{color:var(--mkt-text-3);font-weight:600}
.mkt-bv-val{color:var(--mkt-text);font-weight:500;text-align:right;max-width:60%}
.mkt-bv-summary{margin-top:12px;padding:12px;background:rgba(139,92,246,.08);border-radius:12px;font-size:12px;color:var(--mkt-text-2);line-height:1.5}

/* Holidays strip */
.mkt-holidays-strip{display:flex;gap:8px;overflow-x:auto;padding:12px 22px;scrollbar-width:none;touch-action:pan-x}
.mkt-holidays-strip::-webkit-scrollbar{display:none}
.mkt-holiday-chip{flex-shrink:0;display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(139,92,246,.1));border:1px solid rgba(245,158,11,.2);border-radius:12px;min-width:120px}
.mkt-holiday-date{font-size:11px;font-weight:800;color:var(--mkt-amber);letter-spacing:.5px}
.mkt-holiday-name{font-size:12px;font-weight:600;color:var(--mkt-text)}
.mkt-holiday-tip{font-size:10px;color:var(--mkt-text-3);margin-top:2px}

/* Unsplash images row */
.mkt-images-row{display:flex;gap:8px;overflow-x:auto;padding:12px 0;border-top:1px solid var(--mkt-border);margin-top:12px;scrollbar-width:none;touch-action:pan-x}
.mkt-images-row::-webkit-scrollbar{display:none}
.mkt-image-thumb{flex-shrink:0;width:100px;height:100px;border-radius:12px;overflow:hidden;position:relative;display:block}
.mkt-image-thumb img{width:100%;height:100%;object-fit:cover}
.mkt-image-credit{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:8px;padding:12px 6px 4px;text-align:center}

/* Wizard Onboarding */
.mkt-wizard{position:absolute;inset:0;z-index:100;background:linear-gradient(180deg,#1A1714,#12100E);display:flex;flex-direction:column;overflow:hidden}
.mkt-wizard-progress{height:4px;background:rgba(255,255,255,.06);margin:16px 24px 0;border-radius:2px;overflow:hidden}
.mkt-wizard-bar{height:100%;background:var(--mkt-grad);border-radius:2px;transition:width .4s cubic-bezier(.2,.9,.3,1)}
.mkt-wizard-slides{flex:1;display:flex;align-items:center;justify-content:center;padding:0 32px}
.mkt-wizard-slide{text-align:center;width:100%;max-width:360px;animation:mkt-wz-in .4s ease-out}
@keyframes mkt-wz-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.mkt-wizard-emoji{font-size:56px;margin-bottom:16px}
.mkt-wizard-title{font-size:24px;font-weight:800;color:var(--mkt-text);margin-bottom:8px}
.mkt-wizard-sub{font-size:14px;color:var(--mkt-text-3);margin-bottom:24px;line-height:1.5}
.mkt-wizard-chips{justify-content:center}
.mkt-wizard-actions{display:flex;gap:12px;padding:20px 24px calc(20px + env(safe-area-inset-bottom,0px));justify-content:space-between}
.mkt-wizard-actions .mkt-btn-primary{flex:1;padding:14px;border-radius:14px;font-size:15px}
.mkt-wizard-actions .mkt-result-btn{padding:14px 20px;font-size:13px}

/* Calendar grid */
.mkt-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:6px 8px}
.mkt-cal-header{text-align:center;font-size:9px;font-weight:700;color:var(--mkt-text-3);padding:4px 0;text-transform:uppercase}
.mkt-cal-cell{min-height:38px;background:var(--mkt-surface);border:1px solid var(--mkt-border);border-radius:8px;padding:6px 2px;display:flex;flex-direction:column;align-items:center;gap:3px;transition:border-color .15s}
.mkt-cal-cell--empty{background:transparent;border-color:transparent;min-height:0}
.mkt-cal-cell--filled{cursor:pointer}.mkt-cal-cell--filled:active{border-color:var(--mkt-amber);transform:scale(.95)}
.mkt-cal-num{font-size:11px;font-weight:700;color:var(--mkt-text-2)}
.mkt-cal-dot{width:8px;height:8px;border-radius:50%}
.mkt-cal-legend{display:flex;gap:8px;flex-wrap:wrap;padding:6px 10px;font-size:9px;color:var(--mkt-text-3)}
.mkt-cal-legend-item{display:flex;align-items:center;gap:3px}
.mkt-cal-legend-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* Skeleton loaders */
.mkt-skeleton-list{display:flex;flex-direction:column;gap:10px;padding:16px 22px}
.mkt-skeleton-item{background:var(--mkt-surface);border:1px solid var(--mkt-border);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;min-height:90px}
.mkt-skeleton-line{height:10px;border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:mkt-shimmer 1.5s infinite}
@keyframes mkt-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Styled inline modal (replaces alert/prompt) */
.mkt-inline-modal{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.mkt-inline-modal-card{background:linear-gradient(180deg,#1F1C18,#14120F);border:1px solid var(--mkt-border);border-radius:18px;padding:20px;max-width:340px;width:100%;max-height:70vh;overflow-y:auto}
.mkt-inline-modal-title{font-size:15px;font-weight:800;color:var(--mkt-text);margin-bottom:12px}
.mkt-inline-modal-text{font-size:13px;color:var(--mkt-text-2);line-height:1.6;margin-bottom:16px;white-space:pre-line}
.mkt-inline-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.mkt-inline-modal-actions button{padding:10px 18px;border-radius:12px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none}
.mkt-inline-modal-actions .mkt-im-primary{background:var(--mkt-amber);color:#12100E}
.mkt-inline-modal-actions .mkt-im-secondary{background:rgba(255,255,255,.08);color:var(--mkt-text-2)}

/* ══════════════════════════════════════════════════════════════
   OBSCURA — AI Photo Studio (FaceCraft bot_11)
   v3 — Polished Obsidian Monolith
   Maximum refinement: layered textures, deep shadows, rich surfaces
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Fira+Code:wght@300;400;500&display=swap');

.fc-app{
  /* ══ DEEP OBSIDIAN PALETTE — rich warm-cool shifts ══
     Each shade has deliberate color character, not flat gray.
     Darkest = blue-black obsidian. Mid = warm volcanic ash. Light = cool marble dust. */
  --fc-d990:#0A0A0E;  /* deepest void — dark granite base */
  --fc-d950:#101015;  /* granite core */
  --fc-d900:#161619;  /* polished dark surface */
  --fc-d870:#1B1B20;  /* raised stone slab */
  --fc-d850:#202026;  /* elevated platform */
  --fc-d800:#26262D;  /* column base */
  --fc-d750:#2D2D35;  /* architrave shadow */
  --fc-d700:#35353F;  /* carved relief bg */
  --fc-d650:#3E3E49;  /* frieze band */
  --fc-d600:#4A4A56;  /* weathered edge */
  --fc-d500:#585868;  /* dusty inscription */
  --fc-d400:#74748A;  /* aged marble — cool */
  --fc-d300:#9696AD;  /* moonlit stone */
  --fc-d200:#B8B8CC;  /* polished quartz */
  --fc-d100:#D8D8E6;  /* bright marble */
  --fc-d50:#EDEDF5;   /* pure highlight */

  /* ── Warm accent: aged bronze patina (used VERY sparingly — like gilded inscriptions) ── */
  --fc-w:#A89070;     /* warm stone accent for tiny highlights */
  --fc-w-dim:#7A6B55; /* darker warm */

  /* ── Status ── */
  --fc-success:#5D9B6E;--fc-error:#A05252;--fc-warning:#9B8545;--fc-info:#5275A0;

  /* ── Surface materials ── */
  --fc-slab:linear-gradient(176deg,var(--fc-d850) 0%,var(--fc-d870) 40%,var(--fc-d900) 100%);
  --fc-pillar:linear-gradient(180deg,var(--fc-d800) 0%,var(--fc-d870) 30%,var(--fc-d900) 70%,var(--fc-d950) 100%);
  --fc-pedestal:linear-gradient(180deg,var(--fc-d750) 0%,var(--fc-d800) 100%);

  /* ── Deep architectural shadows (5-layer depth system) ── */
  --fc-sh1:0 1px 2px rgba(6,6,9,.6);
  --fc-sh2:0 1px 1px rgba(6,6,9,.4),0 2px 4px rgba(6,6,9,.35),0 6px 12px rgba(6,6,9,.2);
  --fc-sh3:0 2px 4px rgba(6,6,9,.4),0 6px 12px rgba(6,6,9,.3),0 16px 32px rgba(6,6,9,.2);
  --fc-sh4:0 4px 8px rgba(6,6,9,.4),0 12px 24px rgba(6,6,9,.3),0 32px 64px rgba(6,6,9,.2),0 64px 128px rgba(6,6,9,.1);
  --fc-sh-in:inset 0 3px 8px rgba(0,0,0,.7),inset 0 1px 2px rgba(0,0,0,.5);

  /* ── Stone carved edge (bevel: light top + dark bottom = 3D slab feel) ── */
  --fc-bevel:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.4);
  --fc-bevel-strong:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 0 rgba(0,0,0,.5);
  --fc-bevel-deep:inset 0 2px 0 rgba(255,255,255,.04),inset 0 -2px 0 rgba(0,0,0,.6),inset 2px 0 0 rgba(255,255,255,.02),inset -2px 0 0 rgba(0,0,0,.3);

  /* ── Fonts ── */
  --fc-font-display:'Cinzel',Georgia,serif;
  --fc-font-body:'Raleway','Helvetica Neue',sans-serif;
  --fc-font-mono:'Fira Code','Courier New',monospace;

  /* ── Radius: chiseled stone = minimal ── */
  --fc-r:3px;--fc-r2:5px;--fc-rb:2px;

  /* ── App shell ── */
  position:fixed;inset:0;z-index:9999;
  background:var(--fc-d990);color:var(--fc-d100);
  font-family:var(--fc-font-body);font-size:14px;font-weight:400;line-height:1.55;letter-spacing:.015em;
  display:none;flex-direction:column;overflow:hidden;
  animation:fc-fade-in .5s cubic-bezier(.22,1,.36,1) both;
}

/* ══ NATURAL DARK GRANITE — organic turbulence, no linear patterns ══
   Uses SVG feTurbulence for organic veining + grain
   Reference: Absolute Black granite / dark marble with natural cracks */
/* Static grain layer */
.fc-app::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    /* Fine grain — mineral crystal structure */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='8' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.14'/%3E%3C/svg%3E"),
    /* Coarser grain for depth */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='coarse'%3E%3CfeTurbulence type='turbulence' baseFrequency='.35' numOctaves='4' seed='42' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23coarse)' opacity='.07'/%3E%3C/svg%3E"),
    /* Large-scale organic color variation */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='patches'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004' numOctaves='3' seed='8'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23patches)' opacity='.08'/%3E%3C/svg%3E"),
    /* Vignette */
    radial-gradient(ellipse 65% 55% at 50% 45%,transparent 0%,rgba(8,8,12,.45) 100%),
    linear-gradient(180deg,rgba(3,3,6,.2) 0%,transparent 6%,transparent 94%,rgba(3,3,6,.25) 100%);
}
/* Vignette + edge darkening (static) */
.fc-app::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 65% 55% at 50% 45%,transparent 0%,rgba(8,8,12,.45) 100%),
    linear-gradient(180deg,rgba(3,3,6,.2) 0%,transparent 6%,transparent 94%,rgba(3,3,6,.25) 100%);
}

/* ── ANIMATED VEINS — separate layers with independent drift ── */
.fc-veins-a,.fc-veins-b{position:fixed;inset:0;pointer-events:none;z-index:0}

/* Primary veins — smooth solid curves, no dashes */
.fc-veins-a{
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 600 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='b1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .025' numOctaves='4' seed='7' result='warp'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='warp' scale='14' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b1)' opacity='.5'%3E%3Cpath d='M22 0 C8 55,45 82,18 148 C-5 198,52 215,35 278 C18 342,62 358,42 432 C22 498,68 512,48 572 C28 638,58 665,38 735 C18 775,55 790,42 800' fill='none' stroke='rgba(215,210,228,.6)' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M18 148 C42 132,78 145,112 128 C138 115,95 168,85 192' fill='none' stroke='rgba(200,198,220,.35)' stroke-width='.9' stroke-linecap='round'/%3E%3Cpath d='M42 432 C68 445,88 425,72 478' fill='none' stroke='rgba(195,192,218,.28)' stroke-width='.6'/%3E%3Cpath d='M275 0 C255 52,302 72,268 142 C238 205,312 218,285 298 C258 375,328 388,305 465 C282 538,348 548,325 628 C302 702,362 718,342 800' fill='none' stroke='rgba(198,198,222,.48)' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M285 298 C318 272,358 295,392 268 C418 248,385 312,365 335' fill='none' stroke='rgba(192,190,218,.3)' stroke-width='.9'/%3E%3Cpath d='M305 465 C338 485,358 458,395 488 C422 508,388 542,372 565' fill='none' stroke='rgba(188,188,215,.25)' stroke-width='.7'/%3E%3Cpath d='M492 0 C468 62,522 78,498 162 C475 238,538 252,512 342 C488 428,552 442,528 532 C505 618,568 632,545 722 C522 775,558 790,538 800' fill='none' stroke='rgba(192,190,218,.38)' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M498 162 C535 142,572 178,585 215 C595 248,568 268,600 282' fill='none' stroke='rgba(188,188,215,.25)' stroke-width='.7'/%3E%3Cpath d='M0 72 C35 52,62 88,98 68 C128 48,82 125,118 142' fill='none' stroke='rgba(205,202,225,.38)' stroke-width='1.1'/%3E%3Cpath d='M0 418 C42 395,72 435,115 412 C155 388,92 478,138 498 C178 518,145 548,175 568' fill='none' stroke='rgba(195,195,220,.32)' stroke-width='1'/%3E%3Cpath d='M408 635 C445 612,482 658,518 632 C548 608,572 668,600 652' fill='none' stroke='rgba(188,186,215,.26)' stroke-width='.8'/%3E%3Cpath d='M155 262 C188 242,215 285,248 268' fill='none' stroke='rgba(195,192,218,.22)' stroke-width='.6'/%3E%3Cpath d='M378 118 C408 98,435 148,455 128' fill='none' stroke='rgba(190,188,215,.2)' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E") center/140% 140%;
}
/* Secondary veins — static, solid curves */
.fc-veins-b{
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 550 750' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='b2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.025 .012' numOctaves='4' seed='23' result='warp'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='warp' scale='12' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b2)' opacity='.32'%3E%3Cpath d='M0 45 C38 22,55 72,82 52 C112 32,68 128,105 148 C138 168,82 235,122 268 C158 298,98 378,142 408 C182 438,108 518,152 548 C192 578,138 652,175 692 C208 728,148 745,135 750' fill='none' stroke='rgba(208,205,228,.45)' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M105 148 C138 118,168 158,195 135 C218 115,152 198,148 225' fill='none' stroke='rgba(195,195,220,.28)' stroke-width='.7'/%3E%3Cpath d='M152 548 C185 528,168 578,198 562' fill='none' stroke='rgba(190,190,215,.2)' stroke-width='.5'/%3E%3Cpath d='M365 0 C342 55,395 78,368 158 C342 232,408 248,382 338 C358 422,425 438,398 528 C375 612,442 628,418 718 C398 748,435 755,422 750' fill='none' stroke='rgba(195,195,222,.38)' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M368 158 C405 135,445 178,478 155 C505 135,458 228,448 258' fill='none' stroke='rgba(190,190,218,.25)' stroke-width='.7'/%3E%3Cpath d='M0 305 C48 278,82 325,128 298 C168 272,105 388,148 405 C188 422,142 468,178 488' fill='none' stroke='rgba(200,198,225,.35)' stroke-width='1.1'/%3E%3Cpath d='M322 625 C358 605,392 648,428 622 C458 598,488 668,518 645 C542 625,525 688,550 705' fill='none' stroke='rgba(188,188,218,.28)' stroke-width='.9'/%3E%3Cpath d='M192 0 C172 52,225 78,198 148 C175 215,238 232,212 312 C188 388,248 398,228 465' fill='none' stroke='rgba(195,195,220,.32)' stroke-width='1'/%3E%3Cpath d='M478 68 C508 48,535 102,518 148 C502 192,545 208,528 262' fill='none' stroke='rgba(190,190,218,.25)' stroke-width='.7'/%3E%3Cpath d='M268 438 C298 458,278 498,315 512' fill='none' stroke='rgba(192,192,218,.18)' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E") center/155% 155%;
}
.fc-app>*:not(.fc-veins-a):not(.fc-veins-b){position:relative;z-index:1}
.fc-app.active{display:flex}

/* ══ STOIC ARCHITECTURAL ELEMENTS ══ */

/* ── IONIC COLUMN FLUTING — left & right edges ── */
.fc-content::before,.fc-content::after{
  content:'';position:fixed;top:56px;bottom:72px;width:8px;z-index:10;pointer-events:none;
}
.fc-content::before{
  left:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(30,30,42,.7) 0px,rgba(55,55,70,.4) 1px,rgba(80,80,100,.12) 2px,
      rgba(60,60,75,.3) 3px,rgba(30,30,42,.6) 4px,rgba(55,55,70,.35) 5px,
      rgba(80,80,100,.1) 6px,rgba(30,30,42,.5) 8px);
  border-right:1px solid rgba(100,100,120,.12);
  box-shadow:inset -3px 0 6px rgba(0,0,0,.5),3px 0 12px rgba(0,0,0,.25);
}
.fc-content::after{
  right:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(30,30,42,.5) 0px,rgba(80,80,100,.1) 2px,rgba(55,55,70,.35) 3px,
      rgba(30,30,42,.6) 4px,rgba(55,55,70,.4) 5px,rgba(80,80,100,.12) 6px,
      rgba(30,30,42,.7) 8px);
  border-left:1px solid rgba(100,100,120,.12);
  box-shadow:inset 3px 0 6px rgba(0,0,0,.5),-3px 0 12px rgba(0,0,0,.25);
}

/* Greek meander / key pattern for section dividers */
.fc-section-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;
  background:
    url("data:image/svg+xml,%3Csvg width='28' height='3' viewBox='0 0 28 3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h7v1h-6v1h7v1h-8v-3zM14 0h7v1h-6v1h7v1h-8v-3z' fill='rgba(100,100,120,.25)'/%3E%3C/svg%3E")
    repeat-x !important;
  opacity:.6}

/* Topbar — entablature with dentil molding */
.fc-topbar::after{content:'';position:absolute;bottom:-5px;left:0;right:0;height:5px;
  background:
    url("data:image/svg+xml,%3Csvg width='12' height='4' viewBox='0 0 12 4' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='0' width='4' height='4' fill='rgba(80,80,100,.3)'/%3E%3Crect x='7' y='0' width='4' height='4' fill='rgba(50,50,65,.15)'/%3E%3C/svg%3E")
    repeat-x;
  z-index:1}

/* Bottom nav — stepped plinth base */
.fc-bottom-nav::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px;pointer-events:none;
  background:
    linear-gradient(180deg,
      transparent 0px,rgba(70,70,85,.12) 1px,rgba(90,90,110,.08) 2px,transparent 3px,
      rgba(60,60,75,.18) 4px,rgba(80,80,100,.1) 5px,transparent 6px,
      rgba(50,50,65,.22) 7px,rgba(70,70,85,.12) 8px);
}

/* Classical laurel wreath — SVG accent on hero */
.fc-hero::before{content:'';position:absolute;top:14px;right:20px;width:36px;height:36px;opacity:.12;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 4C12 4 8 8 6 14c0 0 3-2 6-1s4 4 4 4c0 0 1-3 4-4s6 1 6 1C24 8 20 4 18 4z' fill='none' stroke='%238A7D65' stroke-width='.7'/%3E%3Cpath d='M18 32C12 32 8 28 6 22c0 0 3 2 6 1s4-4 4-4c0 0 1 3 4 4s6-1 6-1C24 28 20 32 18 32z' fill='none' stroke='%238A7D65' stroke-width='.7'/%3E%3Ccircle cx='18' cy='18' r='3' fill='none' stroke='%238A7D65' stroke-width='.5'/%3E%3C/svg%3E") no-repeat center/contain}

/* ── TORCH FLICKER — warm light play on stone walls ── */
@keyframes fc-torch-flicker{
  0%,100%{opacity:.03}15%{opacity:.06}30%{opacity:.02}
  45%{opacity:.07}60%{opacity:.03}75%{opacity:.05}90%{opacity:.01}
}

/* ══ Animations ══ */
@keyframes fc-fade-in{from{opacity:0}to{opacity:1}}
@keyframes fc-slide-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fc-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fc-pulse-stone{0%,100%{box-shadow:0 0 0 0 rgba(150,150,173,.2)}50%{box-shadow:0 0 0 8px rgba(150,150,173,0)}}
@keyframes fc-spin{to{transform:rotate(360deg)}}
@keyframes fc-item-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ══ TOPBAR — heavy stone lintel ══ */
.fc-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;
  background:linear-gradient(180deg,rgba(18,18,24,.98) 0%,rgba(12,12,17,.96) 100%);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(45,45,55,.6);
  box-shadow:0 2px 8px rgba(0,0,0,.5),0 8px 32px rgba(0,0,0,.3);
  position:sticky;top:0;z-index:20;min-height:56px;flex-shrink:0;
}
.fc-topbar-logo{font-family:var(--fc-font-display);font-size:17px;font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--fc-d100);
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.fc-topbar-logo span{color:var(--fc-d500);font-size:9px;font-family:var(--fc-font-body);
  font-weight:500;letter-spacing:.22em;text-transform:uppercase;margin-left:10px;
  position:relative;top:-1px}
.fc-topbar-actions{display:flex;gap:6px;align-items:center}
.fc-topbar-btn{width:38px;height:38px;border-radius:var(--fc-r);
  border:1px solid var(--fc-d700);
  background:var(--fc-slab);color:var(--fc-d400);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .25s;box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-topbar-btn:hover{color:var(--fc-d200);border-color:var(--fc-d600);
  background:var(--fc-pedestal)}
.fc-topbar-btn:active{box-shadow:var(--fc-sh-in);transform:translateY(1px)}
.fc-topbar-close{background:transparent;border-color:transparent;color:var(--fc-d500);box-shadow:none}
.fc-topbar-close:hover{color:var(--fc-d100)}

/* ══ BOTTOM NAV — temple floor plinth ══ */
.fc-bottom-nav{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;
  background:linear-gradient(180deg,rgba(12,12,17,.96) 0%,rgba(6,6,9,.99) 100%);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(45,45,55,.5);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -4px 16px rgba(0,0,0,.6),0 -12px 48px rgba(0,0,0,.3);
}
.fc-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:8px 4px;background:transparent;border:none;
  color:var(--fc-d500);font-family:var(--fc-font-display);font-size:8px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;
  position:relative;transition:all .3s}
.fc-nav-btn svg{width:20px;height:20px;opacity:.4;transition:all .3s}
.fc-nav-btn.active{color:var(--fc-d100)}
.fc-nav-btn.active svg{opacity:.85}
.fc-nav-btn.active::before{content:'';position:absolute;top:0;left:50%;
  transform:translateX(-50%);width:20px;height:2px;
  background:linear-gradient(90deg,transparent,var(--fc-d400),transparent);
  border-radius:0 0 1px 1px}

/* ══ TAB CONTENT ══ */
.fc-content{flex:1;overflow-y:auto;overflow-x:hidden;
  padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));
  -webkit-overflow-scrolling:touch}
.fc-tab{display:none;animation:fc-slide-up .4s cubic-bezier(.22,1,.36,1) both}
.fc-tab.active{display:block}

/* ══ HERO — grand entrance hall ══ */
.fc-hero{padding:32px 24px 28px;position:relative}
.fc-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 10%,rgba(45,45,70,.08) 0%,transparent 70%);
  pointer-events:none}
/* Torch flicker warm glow on hero */
.fc-hero .fc-hero-greeting::after{content:'';position:absolute;inset:-20px;pointer-events:none;
  background:radial-gradient(ellipse 90% 80% at 25% 50%,rgba(168,144,112,.06) 0%,transparent 60%);
  animation:fc-torch-flicker 5s ease-in-out infinite}
.fc-hero::after{content:'';position:absolute;bottom:0;left:20px;right:20px;height:3px;
  background:
    url("data:image/svg+xml,%3Csvg width='28' height='3' viewBox='0 0 28 3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h7v1h-6v1h7v1h-8v-3zM14 0h7v1h-6v1h7v1h-8v-3z' fill='rgba(100,100,120,.2)'/%3E%3C/svg%3E")
    repeat-x;opacity:.7}
.fc-hero-greeting{font-family:var(--fc-font-display);font-size:26px;font-weight:500;
  line-height:1.25;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px;
  color:var(--fc-d50);text-shadow:0 2px 4px rgba(0,0,0,.5)}
.fc-hero-credits{font-size:13px;color:var(--fc-d400);margin-bottom:16px;letter-spacing:.04em}
.fc-hero-credits b{color:var(--fc-d200);font-weight:600}
.fc-credits-bar{height:3px;background:var(--fc-d800);margin-bottom:24px;overflow:hidden;
  border-radius:1px;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.fc-credits-fill{height:100%;border-radius:1px;
  background:linear-gradient(90deg,var(--fc-d650) 0%,var(--fc-d400) 60%,var(--fc-d300) 100%);
  transition:width .7s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 8px rgba(150,150,173,.15)}

/* ══ PRIMARY BUTTON — monumental stone tablet ══ */
.fc-btn-primary{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:18px 28px;border-radius:var(--fc-rb);cursor:pointer;
  /* Multi-layer stone surface */
  border:1px solid var(--fc-d600);
  background:linear-gradient(176deg,var(--fc-d750) 0%,var(--fc-d800) 35%,var(--fc-d850) 100%);
  color:var(--fc-d50);
  font-family:var(--fc-font-display);font-size:12px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  /* Stone depth: bevel + layered shadow */
  box-shadow:var(--fc-bevel-strong),var(--fc-sh2);
  transition:all .25s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
/* Top highlight = polished stone reflection */
.fc-btn-primary::before{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,.02) 30%,transparent 60%,rgba(0,0,0,.08) 100%);
  pointer-events:none}
/* Granite grain + organic veining ON the button */
.fc-btn-primary::after{content:'';position:absolute;inset:0;opacity:1;pointer-events:none;border-radius:inherit;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='bv'%3E%3CfeTurbulence type='turbulence' baseFrequency='.02,.01' numOctaves='4' seed='99' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 .75 0 0 0 0 .75 0 0 0 0 .82 0 0 0 6 -4.5' result='v'/%3E%3CfeGaussianBlur in='v' stdDeviation='.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23bv)' opacity='.14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='bg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='5' seed='77' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23bg)' opacity='.07'/%3E%3C/svg%3E")}
.fc-btn-primary:hover{border-color:var(--fc-d500);transform:translateY(-1px);
  box-shadow:var(--fc-bevel-strong),var(--fc-sh3);
  background:linear-gradient(176deg,var(--fc-d700) 0%,var(--fc-d750) 35%,var(--fc-d800) 100%)}
.fc-btn-primary:active{transform:translateY(1px);
  box-shadow:var(--fc-sh-in);border-color:var(--fc-d750);
  background:linear-gradient(176deg,var(--fc-d850) 0%,var(--fc-d870) 100%)}
.fc-btn-primary:disabled{background:var(--fc-d900);color:var(--fc-d600);
  border-color:var(--fc-d800);box-shadow:none;cursor:not-allowed;transform:none;text-shadow:none}
.fc-btn-primary:disabled::before,.fc-btn-primary:disabled::after{display:none}

/* Secondary button — lesser stone block */
.fc-btn-secondary{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border:1px solid var(--fc-d700);border-radius:var(--fc-rb);
  background:var(--fc-slab);color:var(--fc-d200);
  font-family:var(--fc-font-display);font-size:10px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;cursor:pointer;
  box-shadow:var(--fc-bevel),var(--fc-sh1);transition:all .25s}
.fc-btn-secondary:hover{border-color:var(--fc-d600);color:var(--fc-d100);
  transform:translateY(-1px);box-shadow:var(--fc-bevel),var(--fc-sh2);
  background:var(--fc-pedestal)}
.fc-btn-secondary:active{transform:translateY(1px);box-shadow:var(--fc-sh-in)}

.fc-btn-ghost{background:transparent;border:1px solid transparent;border-radius:var(--fc-rb);
  color:var(--fc-d400);font-family:var(--fc-font-body);font-size:13px;font-weight:500;
  letter-spacing:.03em;padding:10px 20px;cursor:pointer;transition:all .2s}
.fc-btn-ghost:hover{background:rgba(255,255,255,.025);border-color:var(--fc-d700);color:var(--fc-d200)}
.fc-btn-sm{padding:8px 18px;font-size:10px}

.fc-btn-icon{width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--fc-r);border:1px solid var(--fc-d700);background:var(--fc-slab);
  color:var(--fc-d400);cursor:pointer;transition:all .2s;box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-btn-icon:hover{color:var(--fc-d200);border-color:var(--fc-d600);background:var(--fc-pedestal)}

/* ══ QUICK ACTIONS — stone pedestals row ══ */
.fc-quick-actions{display:flex;gap:10px;padding:24px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.fc-quick-actions::-webkit-scrollbar{display:none}
.fc-quick-action{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:18px 14px;min-width:88px;border-radius:var(--fc-r);
  background:var(--fc-slab);border:1px solid var(--fc-d700);cursor:pointer;
  transition:all .3s;box-shadow:var(--fc-bevel),var(--fc-sh1);position:relative;overflow:hidden}
/* Granite grain + micro-veining on each pedestal */
.fc-quick-action::before{content:'';position:absolute;inset:0;opacity:1;pointer-events:none;border-radius:inherit;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='qav'%3E%3CfeTurbulence type='turbulence' baseFrequency='.03,.025' numOctaves='3' seed='44' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 .7 0 0 0 0 .7 0 0 0 0 .75 0 0 0 5 -3.5' result='v'/%3E%3CfeGaussianBlur in='v' stdDeviation='.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23qav)' opacity='.12'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='qag'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='5' seed='66' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23qag)' opacity='.06'/%3E%3C/svg%3E")}
.fc-quick-action:hover{border-color:var(--fc-d600);transform:translateY(-3px);
  box-shadow:var(--fc-bevel),var(--fc-sh2),0 0 20px rgba(168,144,112,.04);
  background:var(--fc-pedestal)}
.fc-quick-action:active{transform:translateY(1px);box-shadow:var(--fc-sh-in)}
.fc-quick-action .icon{width:24px;height:24px;color:var(--fc-d300);position:relative}
.fc-quick-action .label{font-family:var(--fc-font-display);font-size:8px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fc-d400);white-space:nowrap;position:relative}

/* ══ SECTION HEADERS — carved frieze band ══ */
.fc-section{padding:0 24px 24px}
.fc-section-header{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;padding-bottom:10px;position:relative}
.fc-section-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--fc-d700) 0%,var(--fc-d650) 50%,var(--fc-d700) 100%)}
.fc-section-title{font-family:var(--fc-font-display);font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--fc-d300)}
.fc-section-link{font-family:var(--fc-font-display);font-size:9px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fc-d500);cursor:pointer;
  transition:color .2s;padding:10px 8px;min-width:44px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.fc-section-link:hover{color:var(--fc-d200)}

/* ══ RECENT WORKS — row of stone tablets ══ */
.fc-recent-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none}
.fc-recent-scroll::-webkit-scrollbar{display:none}
.fc-recent-card{flex-shrink:0;width:132px;aspect-ratio:4/5;border-radius:var(--fc-r);overflow:hidden;
  background:var(--fc-d900);cursor:pointer;position:relative;transition:all .35s;
  border:1px solid var(--fc-d700);box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-recent-card:hover{transform:translateY(-3px) scale(1.02);
  box-shadow:var(--fc-bevel),var(--fc-sh3);border-color:var(--fc-d600)}
.fc-recent-card img{width:100%;height:100%;object-fit:cover}
.fc-recent-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:32px 10px 10px;
  background:linear-gradient(to top,rgba(6,6,9,.95) 0%,rgba(6,6,9,.3) 70%,transparent 100%)}
.fc-recent-card-overlay span{font-family:var(--fc-font-display);font-size:9px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fc-d200)}

/* ══ STYLE CARDS — gallery of stone reliefs ══ */
.fc-styles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fc-style-card{border-radius:var(--fc-r);overflow:hidden;position:relative;cursor:pointer;
  border:1px solid var(--fc-d700);background:var(--fc-d900);transition:all .35s;aspect-ratio:1;
  box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-style-card:hover{border-color:var(--fc-d600);transform:translateY(-3px);
  box-shadow:var(--fc-bevel),var(--fc-sh3)}
.fc-style-card.selected{border-color:var(--fc-d400);
  box-shadow:0 0 0 1px var(--fc-d400),var(--fc-sh2),0 0 24px rgba(150,150,173,.08)}
.fc-style-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.fc-style-card:hover img{transform:scale(1.06)}
.fc-style-card-info{position:absolute;bottom:0;left:0;right:0;padding:36px 12px 12px;
  background:linear-gradient(to top,rgba(6,6,9,.97) 0%,rgba(6,6,9,.6) 50%,transparent 100%)}
.fc-style-card-name{font-family:var(--fc-font-display);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fc-d50);
  text-shadow:0 1px 3px rgba(0,0,0,.8)}
.fc-style-card-cat{font-size:9px;font-family:var(--fc-font-body);color:var(--fc-d500);
  text-transform:uppercase;letter-spacing:.1em;margin-top:3px}
.fc-style-badge{position:absolute;top:8px;right:8px;padding:4px 10px;border-radius:var(--fc-rb);
  font-family:var(--fc-font-display);font-size:8px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  box-shadow:var(--fc-sh1)}
.fc-badge-pro{background:var(--fc-d700);color:var(--fc-d200);border:1px solid var(--fc-d600)}
.fc-badge-new{background:var(--fc-d750);color:var(--fc-d300);border:1px solid var(--fc-d650)}

/* ══ CATEGORY CHIPS — carved stone tablets ══ */
.fc-cat-scroll{display:flex;gap:8px;overflow-x:auto;padding:0 24px 16px;
  scrollbar-width:none;-ms-overflow-style:none}
.fc-cat-scroll::-webkit-scrollbar{display:none}
.fc-cat-chip{flex-shrink:0;padding:9px 18px;border-radius:var(--fc-rb);
  border:1px solid var(--fc-d700);background:var(--fc-slab);
  font-family:var(--fc-font-display);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fc-d400);
  cursor:pointer;white-space:nowrap;transition:all .25s;
  box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-cat-chip:hover{border-color:var(--fc-d600);color:var(--fc-d200);
  background:var(--fc-pedestal)}
.fc-cat-chip.active{background:var(--fc-d800);border-color:var(--fc-d500);color:var(--fc-d100);
  box-shadow:var(--fc-bevel),var(--fc-sh1),inset 0 0 12px rgba(150,150,173,.03)}

/* ══ CREATE SCREEN ══ */
.fc-create-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
.fc-mode-switch{display:flex;border-radius:var(--fc-rb);border:1px solid var(--fc-d700);
  background:var(--fc-d900);overflow:hidden;box-shadow:var(--fc-sh-in)}
.fc-mode-btn{padding:11px 24px;border:none;background:transparent;color:var(--fc-d500);
  font-family:var(--fc-font-display);font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:all .25s;
  position:relative}
.fc-mode-btn.active{background:var(--fc-d800);color:var(--fc-d100);
  box-shadow:var(--fc-bevel)}
.fc-mode-btn.active::after{content:'';position:absolute;bottom:0;left:20%;right:20%;
  height:1px;background:linear-gradient(90deg,transparent,var(--fc-d400),transparent)}

/* ══ PREVIEW — deep carved niche ══ */
.fc-preview{margin:0 24px 20px;aspect-ratio:4/5;border-radius:var(--fc-r);overflow:hidden;
  background:var(--fc-d950);border:1px solid var(--fc-d750);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;
  position:relative;box-shadow:var(--fc-sh-in),var(--fc-sh2)}
.fc-preview img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.fc-preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--fc-d600)}
.fc-preview-placeholder svg{width:44px;height:44px;opacity:.2}
.fc-preview-placeholder span{font-family:var(--fc-font-display);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase}
.fc-preview-actions{position:absolute;bottom:14px;left:14px;right:14px;
  display:flex;gap:8px;justify-content:center;opacity:0;transition:opacity .3s}
.fc-preview:hover .fc-preview-actions{opacity:1}

/* ══ PROMPT INPUT — inscription surface ══ */
.fc-prompt-section{padding:0 24px 16px}
.fc-label{font-family:var(--fc-font-display);font-size:9px;font-weight:800;
  letter-spacing:.25em;text-transform:uppercase;color:var(--fc-d500);
  margin-bottom:10px;display:block}
.fc-prompt-textarea{width:100%;min-height:100px;padding:16px 18px;box-sizing:border-box;
  background:var(--fc-d950);border:1px solid var(--fc-d700);border-radius:var(--fc-r);
  color:var(--fc-d100);font-family:var(--fc-font-mono);font-size:13px;line-height:1.7;
  resize:vertical;box-shadow:var(--fc-sh-in);outline:none;transition:all .25s}
.fc-prompt-textarea::placeholder{color:var(--fc-d600)}
.fc-prompt-textarea:focus{border-color:var(--fc-d500);
  box-shadow:var(--fc-sh-in),0 0 0 1px rgba(150,150,173,.1);min-height:130px}
.fc-prompt-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.fc-prompt-counter{font-family:var(--fc-font-mono);font-size:11px;color:var(--fc-d600)}
.fc-prompt-counter.warning{color:var(--fc-warning)}

/* ══ STYLE CHIPS — small carved tokens ══ */
.fc-style-chips{display:flex;gap:8px;overflow-x:auto;padding:0 24px 16px;
  scrollbar-width:none;-ms-overflow-style:none}
.fc-style-chips::-webkit-scrollbar{display:none}
.fc-style-chip{flex-shrink:0;padding:9px 18px;border-radius:var(--fc-rb);
  border:1px solid var(--fc-d700);background:var(--fc-slab);
  font-family:var(--fc-font-display);font-size:10px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fc-d400);
  cursor:pointer;transition:all .25s;box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-style-chip.active{background:var(--fc-d800);border-color:var(--fc-d500);
  color:var(--fc-d100);box-shadow:var(--fc-bevel),var(--fc-sh1)}

/* ══ SELECTORS — stone toggles ══ */
.fc-selector-row{display:flex;gap:8px;padding:0 24px 16px}
.fc-selector-btn{flex:1;padding:12px;border:1px solid var(--fc-d700);border-radius:var(--fc-rb);
  background:var(--fc-slab);color:var(--fc-d400);font-family:var(--fc-font-display);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-align:center;cursor:pointer;
  transition:all .25s;box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-selector-btn.active{border-color:var(--fc-d500);background:var(--fc-d800);color:var(--fc-d100)}
.fc-selector-btn:active{box-shadow:var(--fc-sh-in)}

/* Generate area */
.fc-generate-area{padding:0 24px 24px}
.fc-generate-cost{font-family:var(--fc-font-display);font-size:9px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fc-d500);text-align:center;margin-top:10px}

/* ══ PRO MODE — stacked stone chambers ══ */
.fc-pro-section{margin:0 24px 12px;padding:18px;border-radius:var(--fc-r);
  background:var(--fc-slab);border:1px solid var(--fc-d700);
  box-shadow:var(--fc-bevel),var(--fc-sh1);position:relative;overflow:hidden}
.fc-pro-section::before{content:'';position:absolute;inset:0;opacity:1;pointer-events:none;border-radius:inherit;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='prs'%3E%3CfeTurbulence type='turbulence' baseFrequency='.02,.015' numOctaves='4' seed='22' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 .75 0 0 0 0 .75 0 0 0 0 .8 0 0 0 6 -4.2' result='v'/%3E%3CfeGaussianBlur in='v' stdDeviation='.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23prs)' opacity='.15'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='prg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23prg)' opacity='.07'/%3E%3C/svg%3E")}
.fc-pro-section-header{display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;margin-bottom:12px;position:relative}
.fc-pro-section-num{font-family:var(--fc-font-display);font-size:12px;color:var(--fc-d400);
  font-weight:700;letter-spacing:.06em;margin-right:10px}
.fc-pro-section-title{font-family:var(--fc-font-display);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fc-d200);flex:1;position:relative}
.fc-pro-section-toggle{color:var(--fc-d500);transition:transform .3s;position:relative}
.fc-pro-section.open .fc-pro-section-toggle{transform:rotate(180deg)}
.fc-pro-body{display:none;position:relative}
.fc-pro-section.open .fc-pro-body{display:block}
.fc-pro-field{margin-bottom:14px}
.fc-pro-field:last-child{margin-bottom:0}

/* ══ INPUTS — carved inscription channels ══ */
.fc-input{width:100%;padding:12px 14px;box-sizing:border-box;
  background:var(--fc-d950);border:1px solid var(--fc-d700);
  border-radius:var(--fc-r);color:var(--fc-d100);
  font-family:var(--fc-font-body);font-size:14px;
  box-shadow:var(--fc-sh-in);outline:none;transition:all .25s}
.fc-input::placeholder{color:var(--fc-d600)}
.fc-input:focus{border-color:var(--fc-d500);
  box-shadow:var(--fc-sh-in),0 0 0 1px rgba(150,150,173,.1)}
.fc-select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2374748A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.fc-slider-row{display:flex;align-items:center;gap:12px}
.fc-slider{-webkit-appearance:none;appearance:none;flex:1;height:3px;border-radius:1px;
  background:var(--fc-d750);outline:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.fc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:var(--fc-rb);
  background:linear-gradient(180deg,var(--fc-d600) 0%,var(--fc-d700) 100%);
  border:1px solid var(--fc-d500);cursor:pointer;
  box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-slider-val{font-family:var(--fc-font-mono);font-size:12px;color:var(--fc-d300);min-width:36px;text-align:right}

.fc-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.fc-toggle-label{font-size:13px;color:var(--fc-d200);letter-spacing:.02em}
.fc-toggle{width:44px;height:24px;border-radius:12px;background:var(--fc-d750);
  position:relative;cursor:pointer;transition:all .3s;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);border:none}
.fc-toggle.active{background:var(--fc-d600);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.fc-toggle::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,var(--fc-d300) 0%,var(--fc-d400) 100%);
  top:3px;left:3px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:var(--fc-sh1)}
.fc-toggle.active::after{transform:translateX(20px);
  background:linear-gradient(180deg,var(--fc-d100) 0%,var(--fc-d200) 100%)}

/* ══ AI CARD — illuminated stone relief ══ */
.fc-ai-card{margin:0 24px 16px;padding:18px;border-radius:var(--fc-r);
  background:var(--fc-slab);border:1px solid var(--fc-d700);
  border-left:3px solid var(--fc-d500);
  box-shadow:var(--fc-bevel),var(--fc-sh1);position:relative}
.fc-ai-card::before{content:'';position:absolute;top:0;left:0;bottom:0;width:40px;
  background:linear-gradient(90deg,rgba(150,150,173,.03) 0%,transparent 100%);pointer-events:none}
.fc-ai-card-title{font-family:var(--fc-font-display);font-size:9px;font-weight:800;
  letter-spacing:.25em;text-transform:uppercase;color:var(--fc-d400);margin-bottom:10px}
.fc-ai-card-text{font-family:var(--fc-font-body);font-size:13px;font-weight:300;
  color:var(--fc-d200);line-height:1.75;font-style:italic}

/* ══ GALLERY — mosaic floor ══ */
.fc-gallery-filters{display:flex;gap:8px;padding:16px 24px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.fc-gallery-filters::-webkit-scrollbar{display:none}
.fc-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 3px}
.fc-gallery-item{aspect-ratio:4/5;border-radius:var(--fc-rb);overflow:hidden;
  background:var(--fc-d900);cursor:pointer;position:relative;transition:all .35s;
  border:1px solid transparent;box-shadow:var(--fc-sh1)}
.fc-gallery-item:hover{transform:scale(1.03);border-color:var(--fc-d600);z-index:2;
  box-shadow:var(--fc-sh3)}
.fc-gallery-item img{width:100%;height:100%;object-fit:cover}
.fc-gallery-item-fav{position:absolute;top:6px;right:6px;width:24px;height:24px;
  border-radius:50%;background:rgba(6,6,9,.75);
  border:1px solid rgba(45,45,55,.5);
  display:flex;align-items:center;justify-content:center;
  color:var(--fc-d300);font-size:11px;opacity:0;transition:opacity .25s;
  box-shadow:var(--fc-sh1)}
.fc-gallery-item:hover .fc-gallery-item-fav{opacity:1}
.fc-gallery-item.fav .fc-gallery-item-fav{opacity:1}

/* ══ LIGHTBOX — stone viewing chamber ══ */
.fc-lightbox{position:fixed;inset:0;background:rgba(6,6,9,.98);backdrop-filter:blur(16px);
  z-index:10000;display:none;flex-direction:column;align-items:center;justify-content:center}
.fc-lightbox.active{display:flex}
.fc-lightbox-img{max-width:92vw;max-height:72vh;border-radius:var(--fc-r);
  box-shadow:var(--fc-sh4),0 0 0 1px var(--fc-d700);
  border:1px solid var(--fc-d650)}
.fc-lightbox-close{position:absolute;top:16px;right:16px;width:42px;height:42px;
  border-radius:var(--fc-rb);background:var(--fc-slab);border:1px solid var(--fc-d700);
  color:var(--fc-d400);font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-lightbox-close:hover{border-color:var(--fc-d500);color:var(--fc-d200)}
.fc-lightbox-meta{margin-top:24px;text-align:center}
.fc-lightbox-meta .style{font-family:var(--fc-font-display);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fc-d200);
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.fc-lightbox-meta .date{font-size:11px;color:var(--fc-d500);margin-top:5px;letter-spacing:.04em}
.fc-lightbox-actions{display:flex;gap:12px;margin-top:20px}

/* ══ PROFILE — inner sanctum ══ */
.fc-profile-card{margin:24px;padding:32px 24px;border-radius:var(--fc-r2);
  background:var(--fc-pillar);border:1px solid var(--fc-d700);text-align:center;
  box-shadow:var(--fc-bevel-deep),var(--fc-sh3);position:relative;overflow:hidden}
/* Granite grain + organic veining on profile card */
.fc-profile-card::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='pv'%3E%3CfeTurbulence type='turbulence' baseFrequency='.015,.01' numOctaves='4' seed='7' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 .8 0 0 0 0 .8 0 0 0 0 .86 0 0 0 7 -4.8' result='v'/%3E%3CfeGaussianBlur in='v' stdDeviation='.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pv)' opacity='.2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='pg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='6' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pg)' opacity='.1'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 50% at 50% 15%,rgba(150,150,173,.06) 0%,transparent 70%)}
.fc-profile-avatar{width:76px;height:76px;border-radius:50%;
  background:var(--fc-d870);
  border:2px solid var(--fc-d650);
  margin:0 auto 16px;display:flex;align-items:center;
  justify-content:center;font-size:28px;
  box-shadow:var(--fc-sh2),inset 0 2px 4px rgba(0,0,0,.4);position:relative}
.fc-profile-name{font-family:var(--fc-font-display);font-size:20px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;color:var(--fc-d50);
  text-shadow:0 1px 3px rgba(0,0,0,.5)}
.fc-profile-plan{display:inline-block;padding:5px 18px;border-radius:var(--fc-rb);
  background:var(--fc-d800);border:1px solid var(--fc-d650);
  color:var(--fc-d300);font-family:var(--fc-font-display);font-size:9px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;
  box-shadow:var(--fc-bevel)}

.fc-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 24px 24px;padding:0}
.fc-stat-card{padding:24px 16px;border-radius:var(--fc-r);
  background:var(--fc-slab);border:1px solid var(--fc-d700);text-align:center;
  box-shadow:var(--fc-bevel),var(--fc-sh1);position:relative;overflow:hidden}
.fc-stat-card::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='stv'%3E%3CfeTurbulence type='turbulence' baseFrequency='.025,.02' numOctaves='3' seed='33' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 .7 0 0 0 0 .7 0 0 0 0 .78 0 0 0 5 -3.5' result='v'/%3E%3CfeGaussianBlur in='v' stdDeviation='.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23stv)' opacity='.12'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='stg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='5' seed='55' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23stg)' opacity='.06'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 50% 20%,rgba(150,150,173,.05) 0%,transparent 60%)}
.fc-stat-number{font-family:var(--fc-font-display);font-size:34px;font-weight:400;
  color:var(--fc-d100);line-height:1;letter-spacing:.02em;position:relative;
  text-shadow:0 1px 2px rgba(0,0,0,.4)}
.fc-stat-label{font-family:var(--fc-font-display);font-size:8px;font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;color:var(--fc-d500);margin-top:10px;position:relative}

/* ══ SETTINGS — carved list of decrees ══ */
.fc-settings-list{margin:0 24px}
.fc-settings-item{display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--fc-d850);cursor:pointer;transition:all .2s}
.fc-settings-item:last-child{border-bottom:none}
.fc-settings-item:hover{padding-left:6px}
.fc-settings-item-left{display:flex;align-items:center;gap:14px}
.fc-settings-item-icon{width:34px;height:34px;border-radius:var(--fc-r);
  background:var(--fc-slab);border:1px solid var(--fc-d700);
  display:flex;align-items:center;justify-content:center;color:var(--fc-d400);font-size:14px;
  box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-settings-item-text{font-size:14px;color:var(--fc-d200);letter-spacing:.02em}
.fc-settings-item-arrow{color:var(--fc-d600);font-size:14px;transition:all .2s}
.fc-settings-item:hover .fc-settings-item-arrow{color:var(--fc-d300);transform:translateX(2px)}

/* ══ LOADING ══ */
.fc-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:40px;color:var(--fc-d500)}
.fc-spinner{width:28px;height:28px;border:2px solid var(--fc-d800);
  border-top-color:var(--fc-d400);border-radius:50%;animation:fc-spin .9s linear infinite}
.fc-skeleton{background:linear-gradient(90deg,var(--fc-d900) 25%,var(--fc-d870) 50%,var(--fc-d900) 75%);
  background-size:200% 100%;border-radius:var(--fc-r);animation:fc-shimmer 2.2s ease-in-out infinite}

/* ══ TOAST — floating stone message ══ */
.fc-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--fc-d870);border:1px solid var(--fc-d650);border-radius:var(--fc-r);
  padding:14px 20px;display:flex;align-items:center;gap:10px;
  box-shadow:var(--fc-bevel),var(--fc-sh4);
  min-width:260px;max-width:90vw;z-index:10001;
  animation:fc-toast-in .4s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes fc-toast-in{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.fc-toast-text{font-size:13px;color:var(--fc-d100);flex:1;letter-spacing:.02em}
.fc-toast.success .fc-toast-icon{color:var(--fc-success)}.fc-toast.error .fc-toast-icon{color:var(--fc-error)}

/* ══ EMPTY STATE — vacant chamber ══ */
.fc-empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:56px 32px;text-align:center}
.fc-empty svg{width:48px;height:48px;color:var(--fc-d700);opacity:.3}
.fc-empty-title{font-family:var(--fc-font-display);font-size:18px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fc-d400)}
.fc-empty-text{font-family:var(--fc-font-body);font-size:13px;font-weight:300;color:var(--fc-d500);
  max-width:280px;line-height:1.7;letter-spacing:.02em}

/* ══ PROGRESS RING ══ */
.fc-progress-ring{position:relative;display:inline-flex;align-items:center;justify-content:center}
.fc-progress-ring svg{transform:rotate(-90deg)}
.fc-progress-ring .track{fill:none;stroke:var(--fc-d800);stroke-width:3}
.fc-progress-ring .fill{fill:none;stroke:var(--fc-d300);stroke-width:3;stroke-linecap:square;
  transition:stroke-dashoffset .7s cubic-bezier(.45,0,.55,1);
  filter:drop-shadow(0 0 4px rgba(150,150,173,.2))}
.fc-progress-ring .pct{position:absolute;font-family:var(--fc-font-display);font-size:18px;
  font-weight:500;color:var(--fc-d200);letter-spacing:.05em}

/* ══ GENERATION STATUS ══ */
.fc-gen-status{display:flex;align-items:center;gap:14px;padding:16px 18px;
  background:var(--fc-slab);border:1px solid var(--fc-d700);border-radius:var(--fc-r);
  margin:0 24px 16px;box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-gen-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fc-gen-indicator.active{background:var(--fc-d300);
  box-shadow:0 0 6px rgba(150,150,173,.25);animation:fc-pulse-stone 2.5s ease-in-out infinite}
.fc-gen-indicator.done{background:var(--fc-success)}
.fc-gen-indicator.error{background:var(--fc-error)}
.fc-gen-text{font-size:13px;color:var(--fc-d200);letter-spacing:.02em}
.fc-gen-text small{display:block;font-size:11px;color:var(--fc-d500);margin-top:3px}

/* ══ MOOD CHIPS ══ */
.fc-mood-grid{display:flex;flex-wrap:wrap;gap:8px}
.fc-mood-chip{padding:8px 16px;border-radius:var(--fc-rb);border:1px solid var(--fc-d700);
  background:var(--fc-slab);font-family:var(--fc-font-display);font-size:10px;font-weight:600;
  letter-spacing:.1em;color:var(--fc-d400);cursor:pointer;transition:all .25s;
  box-shadow:var(--fc-bevel),var(--fc-sh1)}
.fc-mood-chip.active{border-color:var(--fc-d500);background:var(--fc-d800);color:var(--fc-d100)}

/* ══ UPLOAD ZONE — offering alcove ══ */
.fc-upload-zone{border:1px dashed var(--fc-d650);border-radius:var(--fc-r);
  background:var(--fc-d950);padding:36px 24px;display:flex;flex-direction:column;
  align-items:center;gap:14px;cursor:pointer;transition:all .3s;margin:0 24px 16px;
  box-shadow:var(--fc-sh-in)}
.fc-upload-zone:hover{border-color:var(--fc-d500);border-style:solid;
  background:var(--fc-d900);box-shadow:var(--fc-sh-in),0 0 20px rgba(150,150,173,.03)}
.fc-upload-zone svg{width:36px;height:36px;color:var(--fc-d500);opacity:.5}
.fc-upload-zone span{font-family:var(--fc-font-display);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fc-d400)}
.fc-upload-zone small{font-size:11px;color:var(--fc-d600)}

/* ══ MODAL — rising stone panel ══ */
.fc-modal-overlay{position:fixed;inset:0;background:rgba(6,6,9,.93);backdrop-filter:blur(10px);
  z-index:10002;display:none;align-items:flex-end;justify-content:center}
.fc-modal-overlay.active{display:flex}
.fc-modal-sheet{background:linear-gradient(180deg,var(--fc-d850) 0%,var(--fc-d900) 100%);
  border:1px solid var(--fc-d650);border-top:2px solid var(--fc-d500);
  border-radius:var(--fc-r2) var(--fc-r2) 0 0;width:100%;max-width:560px;
  padding:24px 24px 28px;box-shadow:var(--fc-sh4),0 -4px 24px rgba(0,0,0,.4);
  animation:fc-sheet-up .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes fc-sheet-up{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.fc-modal-handle{width:40px;height:3px;border-radius:1px;
  background:linear-gradient(90deg,var(--fc-d700),var(--fc-d600),var(--fc-d700));margin:0 auto 18px}
.fc-modal-title{font-family:var(--fc-font-display);font-size:18px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;text-align:center;
  color:var(--fc-d100)}

/* ════════════════════════════════════════════════════════════
   CHEF PLUS MINI-APP (bot_15) — red + orange warm palette
═════════════════════════════════════════════════════════════ */
#chef-app{--chef-bg:#12080A;--chef-surface:rgba(28,16,18,.85);--chef-border:rgba(255,255,255,.08);--chef-text:#F5F0EF;--chef-text-2:rgba(245,240,239,.7);--chef-text-3:rgba(245,240,239,.45);--chef-red:#EF4444;--chef-orange:#F97316;--chef-grad:linear-gradient(135deg,#EF4444,#F97316);--chef-grad-soft:linear-gradient(135deg,rgba(239,68,68,.15),rgba(249,115,22,.12))}
#chef-app.overlay-page{position:fixed;inset:0;z-index:2000;background:var(--chef-bg);color:var(--chef-text);display:none;flex-direction:column;overflow:hidden;font-family:'Inter',-apple-system,sans-serif}
#chef-app[style*="flex"]{display:flex}
#chef-app::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 30% 0%,rgba(239,68,68,.08),transparent 60%),radial-gradient(ellipse 60% 40% at 70% 100%,rgba(249,115,22,.08),transparent 60%);pointer-events:none;z-index:0}
.chef-topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;gap:12px;backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(18,8,10,.95),rgba(18,8,10,.4) 80%,transparent)}
.chef-back-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--chef-border);border-radius:12px;color:var(--chef-text);cursor:pointer}
.chef-topbar-title{font-size:15px;font-weight:800;letter-spacing:2px;background:var(--chef-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chef-tab-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:90px;position:relative;z-index:1;scrollbar-width:none}
.chef-tab-content::-webkit-scrollbar{display:none}
.chef-tab-content[data-tab="chat"]{padding-bottom:0;overflow:hidden}
.chef-hero{position:relative;padding:20px 22px 16px;text-align:center}
.chef-hero-icon{font-size:48px;margin-bottom:10px}
.chef-hero-title{font-size:26px;font-weight:800;line-height:1.15;margin:0 0 8px;color:var(--chef-text)}
.chef-hero-sub{font-size:13px;color:var(--chef-text-3);margin:0 0 16px}
.chef-input-wrap{margin-bottom:12px}
.chef-input{width:100%;padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid var(--chef-border);border-radius:14px;font-family:inherit;font-size:14px;color:var(--chef-text);resize:none;outline:none;box-sizing:border-box}
.chef-input:focus{border-color:var(--chef-red);background:rgba(239,68,68,.04)}
.chef-input::placeholder{color:var(--chef-text-3)}
.chef-filters{margin-bottom:12px}
.chef-filter-row{display:flex;gap:8px;margin-bottom:8px}
.chef-select{flex:1;min-height:40px;padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--chef-border);border-radius:10px;color:var(--chef-text);font-family:inherit;font-size:12px;appearance:none;-webkit-appearance:none;text-align:center;text-align-last:center}
.chef-hero-actions{display:flex;gap:8px}
.chef-btn-primary{padding:14px 20px;background:var(--chef-grad);border:none;border-radius:14px;color:#fff;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 10px 30px rgba(239,68,68,.25);transition:transform .15s}
.chef-btn-primary:hover{transform:translateY(-1px)}
.chef-btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.chef-btn-full{width:100%;flex:1}
.chef-btn-cost{background:rgba(0,0,0,.25);padding:3px 9px;border-radius:7px;font-size:12px}
.chef-btn-secondary{padding:14px 16px;background:rgba(255,255,255,.06);border:1px solid var(--chef-border);border-radius:14px;color:var(--chef-text);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
.chef-btn-sm{padding:10px 12px;font-size:12px;border-radius:10px;flex:1}
/* Redesigned cook tab */
.chef-input-camera{position:absolute;right:10px;top:10px;font-size:20px;cursor:pointer;opacity:.6;z-index:1}
.chef-input-camera:hover{opacity:1}
.chef-quick-row{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}
.chef-quick-row > .chef-quick-btn{flex:1 1 30%;min-width:0}
.chef-quick-btn{flex:1;min-height:40px;padding:10px 6px;background:rgba(255,255,255,.04);border:1px solid var(--chef-border);border-radius:10px;font-family:inherit;font-size:11px;font-weight:600;color:var(--chef-text-2);cursor:pointer;white-space:nowrap;text-align:center;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis}
.chef-quick-btn:hover{background:rgba(255,255,255,.08);border-color:var(--chef-red)}
.chef-quick-btn:active{transform:scale(.96)}
.chef-extra-filters{margin-top:8px}
.chef-filters-toggle{font-size:12px;color:var(--chef-text-3);cursor:pointer;list-style:none;text-align:center;padding:6px}
.chef-filters-toggle::-webkit-details-marker{display:none}
.chef-filters-toggle::marker{content:''}
/* History list */
.chef-history-list{padding:12px 22px;display:flex;flex-direction:column;gap:10px}
.chef-history-card{display:flex;gap:12px;padding:14px;background:var(--chef-surface);border:1px solid var(--chef-border);border-radius:14px;cursor:pointer;transition:border-color .15s}
.chef-history-card:hover{border-color:var(--chef-red)}
.chef-history-card__body{flex:1;min-width:0}
.chef-history-card__title{font-size:14px;font-weight:700;color:var(--chef-text);margin-bottom:3px}
.chef-history-card__meta{font-size:11px;color:var(--chef-text-3)}
.chef-history-card__rating{color:var(--chef-orange);font-size:12px;margin-top:2px}
.chef-history-card__actions{display:flex;gap:6px;align-self:center}
.chef-history-card__btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;font-size:16px;cursor:pointer}
.chef-history-card__btn--fav{background:rgba(249,115,22,.1);color:var(--chef-orange)}
.chef-history-card__btn--del{background:rgba(239,68,68,.1);color:var(--chef-red)}
/* Result card */
.chef-result{padding:0 22px 20px}
.chef-recipe-card{background:var(--chef-surface);border:1px solid var(--chef-border);border-radius:18px;overflow:hidden;margin-top:12px}
.chef-recipe-header{padding:16px 18px;background:var(--chef-grad-soft);border-bottom:1px solid var(--chef-border)}
.chef-recipe-title{font-size:20px;font-weight:800;color:var(--chef-text);margin:0 0 8px}
.chef-recipe-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--chef-text-2)}
.chef-recipe-meta-item{display:flex;align-items:center;gap:4px}
.chef-recipe-section{padding:14px 18px;border-bottom:1px solid var(--chef-border)}
.chef-recipe-section-title{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--chef-red);margin-bottom:10px}
.chef-recipe-ingredient{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:var(--chef-text-2);border-bottom:1px dashed rgba(255,255,255,.04)}
.chef-recipe-ingredient:last-child{border-bottom:none}
.chef-recipe-step{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.chef-recipe-step:last-child{border-bottom:none}
.chef-recipe-step-num{flex:0 0 28px;height:28px;border-radius:50%;background:var(--chef-grad);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.chef-recipe-step-text{flex:1;font-size:13px;line-height:1.5;color:var(--chef-text)}
.chef-recipe-step-time{flex-shrink:0;font-size:11px;color:var(--chef-text-3);white-space:nowrap}
.chef-recipe-tip{padding:14px 18px;background:rgba(249,115,22,.06);font-size:12px;color:var(--chef-orange);line-height:1.5}
.chef-recipe-nutrition{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 18px}
.chef-recipe-nutr-item{text-align:center;padding:8px 4px;background:rgba(255,255,255,.03);border-radius:10px}
.chef-recipe-nutr-val{font-size:16px;font-weight:800;color:var(--chef-text)}
.chef-recipe-nutr-label{font-size:9px;text-transform:uppercase;color:var(--chef-text-3);margin-top:2px}
.chef-recipe-actions{display:flex;gap:8px;padding:14px 18px;flex-wrap:wrap}
.chef-recipe-btn{padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--chef-border);border-radius:10px;color:var(--chef-text-2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.chef-recipe-btn--primary{background:var(--chef-grad);border-color:transparent;color:#fff}
/* Categories */
.chef-categories{padding:16px 22px}
.chef-section-label{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--chef-text-3);margin-bottom:12px}
.chef-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chef-cat-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:rgba(255,255,255,.03);border:1px solid var(--chef-border);border-radius:12px;cursor:pointer;font-size:11px;color:var(--chef-text-2)}
.chef-cat-card:hover{border-color:var(--chef-red)}
.chef-cat-icon{font-size:24px}
/* Fridge */
.chef-section-head{padding:26px 22px 6px}
.chef-section-title{font-size:24px;font-weight:800;color:var(--chef-text);margin:0 0 6px}
.chef-section-sub{font-size:13px;color:var(--chef-text-2);margin:0}
.chef-fridge-add{display:flex;gap:8px;padding:16px 22px}
.chef-field-input{flex:1;padding:12px 14px;background:rgba(255,255,255,.06);border:1px solid var(--chef-border);border-radius:12px;font-family:inherit;font-size:14px;color:var(--chef-text);outline:none}
.chef-field-input:focus{border-color:var(--chef-red)}
.chef-field-input::placeholder{color:var(--chef-text-3)}
.chef-textarea{resize:vertical;min-height:50px}
.chef-fridge-list{padding:0 22px 16px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chef-fridge-list .chef-empty{width:100%;text-align:center}
.chef-fridge-item{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:var(--chef-grad-soft);border:1px solid rgba(239,68,68,.25);border-radius:10px;font-size:12px;color:var(--chef-text)}
.chef-fridge-item__del{background:none;border:none;color:var(--chef-red);font-size:14px;cursor:pointer;padding:0 2px}
.chef-empty{padding:40px 20px;text-align:center}
.chef-empty-icon{font-size:40px;opacity:.4;margin-bottom:10px}
.chef-empty-title{font-size:15px;font-weight:700;color:var(--chef-text-3)}
/* Plan */
.chef-plan-form{padding:16px 22px}
.chef-field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.chef-field-label{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--chef-text-3);text-transform:uppercase}
.chef-chips{display:flex;gap:8px;flex-wrap:wrap}
.chef-chip{padding:9px 14px;background:rgba(255,255,255,.04);border:1px solid var(--chef-border);border-radius:11px;font-family:inherit;font-size:13px;font-weight:600;color:var(--chef-text-2);cursor:pointer}
.chef-chip.active{background:var(--chef-grad-soft);border-color:var(--chef-red);color:var(--chef-text)}
.chef-plan-result{padding:16px 22px}
.chef-plan-day{background:var(--chef-surface);border:1px solid var(--chef-border);border-radius:14px;padding:14px;margin-bottom:10px}
.chef-plan-day-head{font-size:13px;font-weight:800;color:var(--chef-red);margin-bottom:8px}
.chef-plan-meal{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12px;border-bottom:1px dashed rgba(255,255,255,.04)}
.chef-plan-meal:last-child{border-bottom:none}
.chef-plan-meal-type{color:var(--chef-text-3);flex:0 0 70px}
.chef-plan-meal-title{flex:1;color:var(--chef-text)}
.chef-plan-meal-cal{color:var(--chef-text-3);font-size:11px}
/* Chat */
.chef-chat-container{display:flex;flex-direction:column;height:100%;position:relative}
.chef-chat-messages{flex:1;overflow-y:auto;padding:16px 18px calc(145px + env(safe-area-inset-bottom, 0px));display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
.chef-chat-messages::-webkit-scrollbar{display:none}
.chef-chat-welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 10px 20px;gap:10px}
.chef-chat-welcome-icon{font-size:48px;opacity:.6}
.chef-chat-welcome-title{font-size:20px;font-weight:800;color:var(--chef-text)}
.chef-chat-welcome-sub{font-size:13px;color:var(--chef-text-3);line-height:1.5;max-width:280px}
.chef-chat-suggestions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.chef-chat-suggestion{padding:9px 14px;background:var(--chef-grad-soft);border:1px solid rgba(239,68,68,.25);border-radius:12px;font-family:inherit;font-size:12px;font-weight:600;color:var(--chef-red);cursor:pointer}
.chef-chat-msg{max-width:85%;padding:12px 16px;border-radius:16px;font-size:13px;line-height:1.55;word-wrap:break-word}
.chef-chat-msg--user{align-self:flex-end;background:var(--chef-grad);color:#fff;border-bottom-right-radius:4px}
.chef-chat-msg--ai{align-self:flex-start;background:var(--chef-surface);border:1px solid var(--chef-border);color:var(--chef-text);border-bottom-left-radius:4px}
.chef-chat-msg--ai p{margin:0 0 8px}.chef-chat-msg--ai p:last-child{margin:0}
.chef-chat-msg--ai strong{color:var(--chef-orange)}
.chef-chat-msg--thinking{background:transparent!important;border:none!important}
.chef-chat-input-area{position:fixed;left:0;right:0;bottom:calc(70px + env(safe-area-inset-bottom, 0px));z-index:9;display:flex;gap:8px;padding:10px 18px;background:rgba(18,8,10,.97);backdrop-filter:blur(10px);border-top:1px solid var(--chef-border)}
.chef-chat-input{flex:1;padding:12px 16px;background:rgba(255,255,255,.06);border:1px solid var(--chef-border);border-radius:14px;font-family:inherit;font-size:14px;color:var(--chef-text);outline:none;resize:none;overflow:hidden;line-height:1.4}
.chef-chat-input:focus{border-color:var(--chef-red)}
.chef-chat-input::placeholder{color:var(--chef-text-3)}
.chef-chat-send-btn{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--chef-grad);border:none;border-radius:14px;color:#fff;cursor:pointer}
.chef-chat-send-btn:disabled{opacity:.4;cursor:not-allowed}
/* Profile */
.chef-profile-form{padding:16px 22px;display:flex;flex-direction:column;gap:14px}
/* Bottom nav */
.chef-bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;background:rgba(18,8,10,.9);backdrop-filter:blur(16px);border-top:1px solid var(--chef-border);padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.chef-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:transparent;border:none;color:var(--chef-text-3);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer}
.chef-nav-btn svg{opacity:.7}.chef-nav-btn.active{color:var(--chef-red)}.chef-nav-btn.active svg{opacity:1}
/* Chef modals */
.chef-modal{position:fixed;inset:0;z-index:2100;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center}
@media(min-width:600px){.chef-modal{align-items:center}}
.chef-modal-sheet{width:100%;max-width:520px;max-height:88vh;background:linear-gradient(180deg,#1A120E,#12080A);border:1px solid var(--chef-border);border-radius:22px 22px 0 0;overflow-y:auto}
@media(min-width:600px){.chef-modal-sheet{border-radius:22px}}
/* Category picker items */
.chef-cat-modal-items{display:flex;flex-wrap:wrap;gap:8px;max-height:50vh;overflow-y:auto}
.chef-cat-modal-item{padding:8px 14px;background:rgba(255,255,255,.04);border:1px solid var(--chef-border);border-radius:10px;font-size:13px;color:var(--chef-text-2);cursor:pointer;transition:all .15s}
.chef-cat-modal-item:hover{background:rgba(255,255,255,.08)}
.chef-cat-modal-item.selected{background:var(--chef-grad-soft);border-color:var(--chef-red);color:var(--chef-text)}
/* Skeleton */
.chef-skeleton{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:chefShimmer 1.5s infinite;border-radius:12px}
@keyframes chefShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
/* Toast */
.chef-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:rgba(239,68,68,.9);color:#fff;padding:10px 18px;border-radius:12px;font-weight:700;font-size:13px;z-index:3000;animation:chefToastIn .3s ease}
@keyframes chefToastIn{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
/* Seasonal badge */
.chef-seasonal{padding:12px 22px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chef-seasonal-label{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--chef-orange)}
.chef-seasonal-item{padding:6px 12px;background:rgba(249,115,22,.1);border:1px solid rgba(249,115,22,.3);border-radius:8px;font-size:12px;color:var(--chef-orange);cursor:pointer}
/* Description in recipe card */
.chef-recipe-desc{font-size:13px;color:var(--chef-text-2);line-height:1.5;padding:0 18px 12px}
/* Share button */
.chef-share-btn{padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--chef-border);border-radius:10px;color:var(--chef-text-2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}


/* ================================================================= */
/* === MUSIC APP — bot_1 — AI Музыка и Создание Треков          === */
/* ================================================================= */

.mu-app{
  --mu-bg:#0D0612;--mu-bg2:#140C1E;--mu-bg3:#1E142A;--mu-bg4:#2A1C38;
  --mu-purple:#E040FB;--mu-purple2:#EA80FC;--mu-purple-dim:rgba(224,64,251,.12);
  --mu-pink:#FF4081;--mu-blue:#E040FB;--mu-green:#CE93D8;--mu-orange:#FF80AB;
  --mu-text:#F3E5F5;--mu-text2:#BA8CC8;--mu-text3:#7B5A8E;
  --mu-border:rgba(224,64,251,.12);--mu-border2:rgba(224,64,251,.25);
  --mu-glass:rgba(13,6,18,.88);--mu-card:rgba(30,20,42,.8);
  display:none;flex-direction:column;position:fixed;inset:0;z-index:9999;
  background:var(--mu-bg);color:var(--mu-text);font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;
  overflow:hidden;
}
.mu-app.active{display:flex}
.mu-app::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%,rgba(224,64,251,.1) 0%,transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 90%,rgba(255,64,129,.08) 0%,transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%,rgba(170,0,255,.05) 0%,transparent 40%);
}
.mu-topbar{
  position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--mu-glass);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--mu-border);
}
.mu-topbar-logo{font-size:18px;font-weight:800;letter-spacing:2px;color:var(--mu-text);text-transform:uppercase}
.mu-topbar-logo span{font-size:11px;font-weight:500;letter-spacing:1px;color:var(--mu-text3);margin-left:8px;text-transform:none}
.mu-topbar-actions{display:flex;gap:8px}
.mu-topbar-btn{width:36px;height:36px;border-radius:10px;background:var(--mu-purple-dim);border:1px solid var(--mu-border);color:var(--mu-text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.mu-topbar-btn:active{transform:scale(.92);background:var(--mu-border2)}
.mu-content{
  position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;
  padding:0 16px 100px;-webkit-overflow-scrolling:touch;
}
.mu-content::-webkit-scrollbar{display:none}
.mu-tab{display:none}.mu-tab.active{display:block}
.mu-hero{padding:28px 0 20px;text-align:center}
.mu-hero-visual{margin-bottom:16px}
.mu-hero-icon{width:72px;height:72px;margin:0 auto;animation:mu-pulse 4s ease-in-out infinite}
@keyframes mu-pulse{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.mu-hero-greeting{font-size:24px;font-weight:800;line-height:1.2;margin-bottom:10px;background:linear-gradient(135deg,var(--mu-text),var(--mu-purple2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.mu-hero-credits{font-size:13px;color:var(--mu-text2);margin-bottom:6px}
.mu-credits-bar{height:3px;border-radius:2px;background:var(--mu-bg3);margin-bottom:18px;overflow:hidden}
.mu-credits-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--mu-purple),var(--mu-pink));transition:width .5s}
.mu-btn-primary{
  display:inline-flex;align-items:center;gap:8px;padding:14px 32px;
  background:linear-gradient(135deg,#AA00FF,var(--mu-purple),#FF4081);color:#fff;
  border:none;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:.5px;transition:all .2s;
  box-shadow:0 4px 20px rgba(224,64,251,.3);
}
.mu-btn-primary:active{transform:scale(.96);box-shadow:0 2px 10px rgba(138,92,246,.2)}
.mu-quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.mu-quick-action{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px;
  background:var(--mu-card);border:1px solid var(--mu-border);border-radius:14px;
  cursor:pointer;transition:all .2s;text-align:center;
}
.mu-quick-action:active{transform:scale(.95);border-color:var(--mu-border2)}
.mu-quick-action .icon{width:28px;height:28px;color:var(--mu-purple2)}
.mu-quick-action .label{font-size:11px;font-weight:600;color:var(--mu-text2);text-transform:uppercase;letter-spacing:.5px}
.mu-section{margin-bottom:24px}
.mu-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.mu-section-title{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mu-text2)}
.mu-section-link{font-size:12px;color:var(--mu-purple2);font-weight:600;cursor:pointer;padding:8px;min-width:44px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.mu-genres-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.mu-genres-scroll::-webkit-scrollbar{display:none}
.mu-genre-chip{
  display:flex;align-items:center;gap:5px;padding:8px 14px;white-space:nowrap;
  background:var(--mu-card);border:1px solid var(--mu-border);border-radius:20px;
  font-size:12px;font-weight:600;color:var(--mu-text2);cursor:pointer;transition:all .2s;flex-shrink:0;
}
.mu-genre-chip:active,.mu-genre-chip.active{background:var(--mu-purple-dim);border-color:var(--mu-purple);color:var(--mu-purple2)}
.mu-mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mu-mood-card{
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;
  border-radius:12px;border:1px solid var(--mu-border);cursor:pointer;transition:all .2s;
  font-size:12px;font-weight:600;color:var(--mu-text2);
}
.mu-mood-card:active{transform:scale(.95)}
.mu-mood-happy{background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(251,146,60,.08))}
.mu-mood-happy:active{border-color:rgba(251,191,36,.5)}
.mu-mood-sad{background:linear-gradient(135deg,rgba(96,165,250,.1),rgba(99,102,241,.08))}
.mu-mood-sad:active{border-color:rgba(96,165,250,.5)}
.mu-mood-energy{background:linear-gradient(135deg,rgba(251,146,60,.1),rgba(239,68,68,.08))}
.mu-mood-energy:active{border-color:rgba(251,146,60,.5)}
.mu-mood-chill{background:linear-gradient(135deg,rgba(52,211,153,.1),rgba(96,165,250,.08))}
.mu-mood-chill:active{border-color:rgba(52,211,153,.5)}
.mu-mood-dark{background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(30,25,50,.3))}
.mu-mood-dark:active{border-color:rgba(99,102,241,.5)}
.mu-mood-epic{background:linear-gradient(135deg,rgba(232,121,168,.1),rgba(138,92,246,.08))}
.mu-mood-epic:active{border-color:rgba(232,121,168,.5)}
.mu-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px;color:var(--mu-text3)}
.mu-empty-text{font-size:14px;font-weight:600}
.mu-empty-sub{font-size:12px;opacity:.7}
.mu-tracks-list{display:flex;flex-direction:column;gap:8px}
.mu-track-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--mu-card);border:1px solid var(--mu-border);border-radius:12px;
  cursor:pointer;transition:all .2s;
}
.mu-track-item:active{background:var(--mu-purple-dim);border-color:var(--mu-border2)}
.mu-track-play{
  width:40px;height:40px;border-radius:50%;background:var(--mu-purple-dim);border:1px solid var(--mu-border2);
  display:flex;align-items:center;justify-content:center;color:var(--mu-purple2);flex-shrink:0;
}
.mu-track-info{flex:1;min-width:0}
.mu-track-title{font-size:14px;font-weight:600;color:var(--mu-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-track-meta{font-size:11px;color:var(--mu-text3);margin-top:2px}
.mu-track-duration{font-size:12px;color:var(--mu-text3);flex-shrink:0}
.mu-create-form{padding:20px 0}
.mu-form-section{margin-bottom:16px}
.mu-form-row{display:flex;gap:12px}
.mu-form-half{flex:1}
.mu-label{display:block;font-size:12px;font-weight:700;color:var(--mu-text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.mu-label-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--mu-text3)}
.mu-textarea{
  width:100%;padding:12px 14px;background:var(--mu-bg3);border:1px solid var(--mu-border);
  border-radius:12px;color:var(--mu-text);font-size:14px;font-family:inherit;
  resize:none;outline:none;transition:border-color .2s;box-sizing:border-box;
}
.mu-textarea:focus{border-color:var(--mu-purple)}
.mu-textarea-sm{font-size:13px}
.mu-textarea::placeholder{color:var(--mu-text3)}
.mu-select{
  width:100%;padding:10px 12px;background:var(--mu-bg3);border:1px solid var(--mu-border);
  border-radius:10px;color:var(--mu-text);font-size:13px;font-family:inherit;
  outline:none;appearance:none;cursor:pointer;box-sizing:border-box;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6480' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.mu-select:focus{border-color:var(--mu-purple)}
.mu-input{
  width:100%;padding:10px 12px;background:var(--mu-bg3);border:1px solid var(--mu-border);
  border-radius:10px;color:var(--mu-text);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;
}
.mu-input:focus{border-color:var(--mu-purple)}
.mu-input::placeholder{color:var(--mu-text3)}
.mu-btn-ghost{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;margin-top:6px;
  background:transparent;border:1px solid var(--mu-border);border-radius:8px;
  color:var(--mu-purple2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;
}
.mu-btn-ghost:active{background:var(--mu-purple-dim);border-color:var(--mu-purple)}
.mu-advanced-toggle{
  display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--mu-text3);
  font-size:12px;font-weight:600;cursor:pointer;
}
.mu-advanced-toggle:active{color:var(--mu-purple2)}
.mu-chevron{transition:transform .2s}
.mu-advanced-toggle.open .mu-chevron{transform:rotate(180deg)}
.mu-advanced-panel{padding:4px 0 12px}
.mu-structure-chips{display:flex;flex-wrap:wrap;gap:6px}
.mu-struct-chip{
  padding:6px 12px;border-radius:16px;font-size:12px;font-weight:600;
  background:var(--mu-bg3);border:1px solid var(--mu-border);color:var(--mu-text3);
  cursor:pointer;transition:all .2s;
}
.mu-struct-chip.active{background:var(--mu-purple-dim);border-color:var(--mu-purple);color:var(--mu-purple2)}
.mu-btn-generate{
  width:100%;padding:16px;margin-top:12px;
  background:linear-gradient(135deg,#AA00FF,var(--mu-purple),#FF4081);color:#fff;
  border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;
  font-family:inherit;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 4px 24px rgba(138,92,246,.35);transition:all .2s;
}
.mu-btn-generate:active{transform:scale(.97);box-shadow:0 2px 12px rgba(138,92,246,.2)}
.mu-btn-generate:disabled{opacity:.5;cursor:not-allowed;transform:none}
.mu-generating{padding:40px 0;text-align:center}
.mu-gen-visual{margin-bottom:24px}
.mu-eq-bars{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:48px}
.mu-eq-bars span{
  width:6px;border-radius:3px;background:linear-gradient(180deg,var(--mu-purple),var(--mu-pink));
  animation:mu-eq .8s ease-in-out infinite alternate;
}
.mu-eq-bars span:nth-child(1){height:12px;animation-delay:0s}
.mu-eq-bars span:nth-child(2){height:28px;animation-delay:.1s}
.mu-eq-bars span:nth-child(3){height:20px;animation-delay:.2s}
.mu-eq-bars span:nth-child(4){height:40px;animation-delay:.15s}
.mu-eq-bars span:nth-child(5){height:32px;animation-delay:.25s}
.mu-eq-bars span:nth-child(6){height:24px;animation-delay:.05s}
.mu-eq-bars span:nth-child(7){height:36px;animation-delay:.3s}
.mu-eq-bars span:nth-child(8){height:16px;animation-delay:.2s}
@keyframes mu-eq{to{height:8px}}
.mu-gen-status{font-size:16px;font-weight:700;color:var(--mu-text);margin-bottom:12px}
.mu-gen-progress-bar{height:4px;border-radius:2px;background:var(--mu-bg3);margin:0 40px 8px;overflow:hidden}
.mu-gen-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--mu-purple),var(--mu-pink));transition:width .5s;width:0%}
.mu-gen-hint{font-size:12px;color:var(--mu-text3)}
.mu-result{padding:20px 0}
.mu-result-card{
  background:var(--mu-card);border:1px solid var(--mu-border);border-radius:16px;
  padding:20px;overflow:hidden;
}
.mu-result-waveform{
  height:64px;border-radius:8px;background:var(--mu-bg3);margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;
}
.mu-wave-bars{display:flex;align-items:center;gap:2px;height:100%;padding:8px 4px}
.mu-result-info{margin-bottom:12px}
.mu-result-title{font-size:16px;font-weight:700;color:var(--mu-text)}
.mu-result-meta{font-size:12px;color:var(--mu-text3);margin-top:2px}
.mu-result-controls{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.mu-play-btn{
  width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#AA00FF,var(--mu-purple));
  border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 16px rgba(224,64,251,.4);transition:all .2s;
}
.mu-play-btn:active{transform:scale(.92)}
.mu-timeline-wrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mu-timeline{position:relative;width:100%;height:28px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.mu-timeline::before{content:'';position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);background:rgba(255,255,255,.12);border-radius:2px}
.mu-timeline-fill{position:absolute;left:0;top:50%;height:4px;transform:translateY(-50%);background:linear-gradient(90deg,#AA00FF,var(--mu-purple));border-radius:2px;width:0%;transition:width .1s linear;pointer-events:none}
.mu-timeline-thumb{position:absolute;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);left:0%;background:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.4);transition:left .1s linear;pointer-events:none}
.mu-timeline:active .mu-timeline-thumb{transform:translate(-50%,-50%) scale(1.25)}
.mu-time{font-size:12px;color:var(--mu-text2);font-variant-numeric:tabular-nums;align-self:flex-end}
.mu-result-actions{display:flex;gap:8px;flex-wrap:wrap}
.mu-action-btn{
  display:flex;align-items:center;gap:6px;padding:8px 14px;
  background:var(--mu-bg3);border:1px solid var(--mu-border);border-radius:10px;
  color:var(--mu-text2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;
}
.mu-action-btn:active{background:var(--mu-purple-dim);border-color:var(--mu-purple)}
.mu-library-header{padding:20px 0 16px}
.mu-library-title{font-size:20px;font-weight:800;margin-bottom:12px;color:var(--mu-text)}
.mu-library-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.mu-library-filters::-webkit-scrollbar{display:none}
.mu-filter-btn{
  padding:7px 14px;border-radius:16px;font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--mu-bg3);border:1px solid var(--mu-border);color:var(--mu-text3);
  cursor:pointer;font-family:inherit;transition:all .2s;
}
.mu-filter-btn.active{background:var(--mu-purple-dim);border-color:var(--mu-purple);color:var(--mu-purple2)}
.mu-lyrics-gen{padding:20px 0}
.mu-lyrics-output{
  margin-top:16px;padding:16px;background:var(--mu-bg3);border:1px solid var(--mu-border);
  border-radius:12px;font-size:14px;line-height:1.7;color:var(--mu-text);white-space:pre-wrap;
}
.mu-bottom-nav{
  position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;
  background:var(--mu-glass);backdrop-filter:blur(20px);
  border-top:1px solid var(--mu-border);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));
}
.mu-nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;
  background:transparent;border:none;color:var(--mu-text3);
  font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:color .2s;
}
.mu-nav-btn svg{opacity:.6;transition:opacity .2s}
.mu-nav-btn.active{color:var(--mu-purple2)}
.mu-nav-btn.active svg{opacity:1}

/* MU Toast */
.mu-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(224,64,251,.9);color:#fff;padding:10px 22px;border-radius:14px;font-weight:700;font-size:13px;z-index:3100;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(224,64,251,.3)}
.mu-toast--error{background:rgba(239,68,68,.9);box-shadow:0 4px 20px rgba(239,68,68,.3)}
.mu-toast--show{opacity:1;transform:translateX(-50%) translateY(0)}

/* MU Credits modal */
.mu-credits-modal{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.mu-credits-card{background:linear-gradient(180deg,#1E142A,#0D0612);border:1px solid var(--mu-border2);border-radius:18px;padding:24px;max-width:300px;width:100%}

/* MU Track actions */
.mu-track-actions{display:flex;gap:4px;flex-shrink:0;align-items:center}
.mu-track-fav{background:none;border:none;font-size:18px;cursor:pointer;color:var(--mu-pink);padding:6px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center}
.mu-track-del{background:none;border:none;font-size:14px;cursor:pointer;color:var(--mu-text3);padding:6px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center}
.mu-track-item{cursor:pointer;transition:border-color .15s}
.mu-track-item:active{border-color:var(--mu-purple)}

/* MU Recent tracks */
.mu-recent-scroll{display:flex;gap:10px;overflow-x:auto;padding:0 0 8px;scrollbar-width:none;touch-action:pan-x}
.mu-recent-scroll::-webkit-scrollbar{display:none}
.mu-recent-card{flex-shrink:0;width:110px;padding:14px 10px;background:var(--mu-card);border:1px solid var(--mu-border);border-radius:14px;cursor:pointer;text-align:center;transition:border-color .15s}
.mu-recent-card:active{border-color:var(--mu-purple)}
.mu-recent-icon{font-size:24px;margin-bottom:6px}
.mu-recent-title{font-size:10px;font-weight:600;color:var(--mu-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-recent-meta{font-size:9px;color:var(--mu-text3);margin-top:2px}

/* MU Lyrics formatting */
.mu-lyrics-formatted{line-height:1.7;color:var(--mu-text);font-size:13px}
.mu-lyrics-section{font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--mu-purple);margin:16px 0 6px;text-transform:uppercase}
.mu-btn-sm{padding:8px 14px;background:var(--mu-card);border:1px solid var(--mu-border);border-radius:10px;color:var(--mu-text2);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}

/* MU Preset cards */
.mu-preset-card{flex-shrink:0;width:90px;padding:14px 8px;background:linear-gradient(135deg,rgba(224,64,251,.08),rgba(138,92,246,.08));border:1px solid var(--mu-border);border-radius:14px;cursor:pointer;text-align:center;transition:border-color .15s}
.mu-preset-card:active{border-color:var(--mu-purple);transform:scale(.96)}
.mu-preset-emoji{font-size:28px;margin-bottom:6px}
.mu-preset-name{font-size:10px;font-weight:700;color:var(--mu-text)}

/* ══════════════════════════════════════════════════════════════
   NANO BANANA (bot_10) — AI Style Transfer
   ══════════════════════════════════════════════════════════════ */
.bn-app{--bn-bg:#1A0F05;--bn-bg2:#2A1A0A;--bn-surface:rgba(255,193,7,.06);--bn-border:rgba(255,193,7,.15);--bn-border2:rgba(255,193,7,.3);--bn-yellow:#FFC107;--bn-yellow2:#FFE082;--bn-orange:#FF9800;--bn-text:#FFF8E1;--bn-text-2:#FFECB3;--bn-text-3:#B8956B;--bn-grad:linear-gradient(135deg,#FFC107,#FF9800);--bn-grad-soft:linear-gradient(135deg,rgba(255,193,7,.15),rgba(255,152,0,.15));position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--bn-bg2),var(--bn-bg));color:var(--bn-text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:hidden}
.bn-topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;gap:12px;backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(26,15,5,.95),rgba(26,15,5,.4) 80%,transparent)}
.bn-back-btn,.bn-credits-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--bn-border);border-radius:12px;color:var(--bn-text);cursor:pointer}
.bn-topbar-title{font-size:15px;font-weight:800;letter-spacing:2px;background:var(--bn-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bn-tab-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:90px;scrollbar-width:none}
.bn-tab-content::-webkit-scrollbar{display:none}
.bn-hero{padding:16px 22px 10px;text-align:center}
.bn-hero-banana{font-size:48px;margin-bottom:8px}
.bn-hero-title{font-size:22px;font-weight:800;background:var(--bn-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 6px}
.bn-hero-sub{font-size:13px;color:var(--bn-text-3);margin:0}
.bn-upload-box{margin:10px 20px;padding:30px 20px;background:var(--bn-surface);border:2px dashed var(--bn-border2);border-radius:18px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;min-height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.bn-upload-box:active{border-color:var(--bn-yellow);background:rgba(255,193,7,.08)}
.bn-upload-icon{font-size:42px;margin-bottom:8px}
.bn-upload-text{font-size:14px;font-weight:700;color:var(--bn-text);margin-bottom:4px}
.bn-upload-hint{font-size:11px;color:var(--bn-text-3)}
#bn-upload-preview{width:100%;max-height:280px;object-fit:contain;border-radius:12px}
.bn-section{padding:12px 20px}
.bn-section-title{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--bn-text-3);text-transform:uppercase;margin-bottom:10px}
.bn-categories{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.bn-category-chip{padding:8px 14px;background:rgba(255,255,255,.04);border:1px solid var(--bn-border);border-radius:11px;font-size:12px;font-weight:600;color:var(--bn-text-2);cursor:pointer;display:flex;align-items:center;gap:6px}
.bn-category-chip.active{background:var(--bn-grad-soft);border-color:var(--bn-yellow);color:var(--bn-text)}
.bn-styles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bn-style-card{padding:12px 8px;background:var(--bn-surface);border:1px solid var(--bn-border);border-radius:12px;cursor:pointer;text-align:center;transition:border-color .15s}
.bn-style-card.active{border-color:var(--bn-yellow);background:var(--bn-grad-soft)}
.bn-style-emoji{font-size:28px;margin-bottom:4px}
.bn-style-name{font-size:10px;font-weight:600;color:var(--bn-text-2);line-height:1.2}
.bn-field-input{padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid var(--bn-border);border-radius:14px;font-family:inherit;font-size:14px;color:var(--bn-text);width:100%;box-sizing:border-box;resize:none}
.bn-field-input:focus{outline:none;border-color:var(--bn-yellow);background:rgba(255,193,7,.04)}
.bn-btn-primary{margin:18px 20px;padding:16px 24px;background:var(--bn-grad);border:none;border-radius:14px;color:#1A0F05;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 20px rgba(255,193,7,.3)}
.bn-btn-full{width:calc(100% - 40px)}
.bn-btn-primary:disabled{opacity:.6;cursor:default}
.bn-btn-cost{background:rgba(26,15,5,.25);padding:4px 10px;border-radius:8px;font-size:11px}
#bn-result{margin:18px 20px 0}
.bn-result-card{background:var(--bn-surface);border:1px solid var(--bn-border);border-radius:18px;padding:16px}
.bn-result-img{width:100%;border-radius:12px;margin-bottom:12px}
.bn-result-actions{display:flex;gap:8px;flex-wrap:wrap}
.bn-result-btn{padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--bn-border);border-radius:10px;color:var(--bn-text-2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.bn-result-btn--primary{background:var(--bn-grad);color:#1A0F05;border:none}
.bn-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 20px}
.bn-gallery-item{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1;cursor:pointer;background:var(--bn-surface)}
.bn-gallery-item img{width:100%;height:100%;object-fit:cover}
.bn-gallery-item .bn-gallery-name{position:absolute;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:10px;color:#fff}
.bn-gallery-item .bn-gallery-del{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.5);color:#fff;border:none;width:24px;height:24px;border-radius:50%;font-size:14px;cursor:pointer}
.bn-bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;background:rgba(26,15,5,.9);backdrop-filter:blur(16px);border-top:1px solid var(--bn-border);padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.bn-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:transparent;border:none;color:var(--bn-text-3);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer}
.bn-nav-btn svg{opacity:.7}.bn-nav-btn.active{color:var(--bn-yellow)}.bn-nav-btn.active svg{opacity:1}
.bn-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(255,193,7,.92);color:#1A0F05;padding:10px 22px;border-radius:14px;font-weight:700;font-size:13px;z-index:3100;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(255,193,7,.3)}
.bn-toast--error{background:rgba(239,68,68,.92);color:#fff}
.bn-toast--show{opacity:1;transform:translateX(-50%) translateY(0)}
.bn-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(26,15,5,.3);border-top-color:#1A0F05;border-radius:50%;animation:bn-spin 1s linear infinite}
@keyframes bn-spin{to{transform:rotate(360deg)}}
.bn-progress-overlay{margin:18px 20px;padding:20px;background:var(--bn-surface);border:1px solid var(--bn-border);border-radius:18px;text-align:center}
.bn-progress-bar{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-top:12px}
.bn-progress-fill{height:100%;background:var(--bn-grad);border-radius:3px;transition:width .5s;animation:bn-pulse 1.5s infinite}
@keyframes bn-pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ══════════════════════════════════════════════════════════════
   PHOTO ANIMATION (bot_4) — Image-to-Video
   ══════════════════════════════════════════════════════════════ */
.pa-app{--pa-bg:#0A0818;--pa-bg2:#12102A;--pa-surface:rgba(139,92,246,.06);--pa-border:rgba(139,92,246,.15);--pa-border2:rgba(139,92,246,.3);--pa-purple:#8B5CF6;--pa-purple2:#A78BFA;--pa-pink:#EC4899;--pa-text:#F5F3FF;--pa-text-2:#DDD6FE;--pa-text-3:#9B8EC7;--pa-grad:linear-gradient(135deg,#8B5CF6,#EC4899);--pa-grad-soft:linear-gradient(135deg,rgba(139,92,246,.15),rgba(236,72,153,.15));position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--pa-bg2),var(--pa-bg));color:var(--pa-text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;overflow:hidden}
.pa-topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;gap:12px;backdrop-filter:blur(12px);background:linear-gradient(180deg,rgba(10,8,24,.95),rgba(10,8,24,.4) 80%,transparent)}
.pa-back-btn,.pa-credits-btn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid var(--pa-border);border-radius:12px;color:var(--pa-text);cursor:pointer}
.pa-topbar-title{font-size:15px;font-weight:800;letter-spacing:2px;background:var(--pa-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pa-tab-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:90px;scrollbar-width:none}
.pa-tab-content::-webkit-scrollbar{display:none}
.pa-hero{padding:16px 22px 10px;text-align:center}
.pa-hero-sparks{font-size:32px;margin-bottom:8px}
.pa-hero-title{font-size:22px;font-weight:800;background:var(--pa-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 6px}
.pa-hero-sub{font-size:13px;color:var(--pa-text-3);margin:0}
.pa-upload-box{margin:10px 20px;padding:30px 20px;background:var(--pa-surface);border:2px dashed var(--pa-border2);border-radius:18px;text-align:center;cursor:pointer;min-height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.pa-upload-box:active{border-color:var(--pa-purple);background:rgba(139,92,246,.08)}
.pa-upload-icon{font-size:42px;margin-bottom:8px}
.pa-upload-text{font-size:14px;font-weight:700;color:var(--pa-text);margin-bottom:4px}
.pa-upload-hint{font-size:11px;color:var(--pa-text-3)}
#pa-upload-preview{width:100%;max-height:280px;object-fit:contain;border-radius:12px}
.pa-section{padding:12px 20px}
.pa-section-title{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--pa-text-3);text-transform:uppercase;margin-bottom:10px}
.pa-motions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pa-motion-card{padding:14px 6px;background:var(--pa-surface);border:1px solid var(--pa-border);border-radius:12px;cursor:pointer;text-align:center;transition:border-color .15s}
.pa-motion-card.active{border-color:var(--pa-purple);background:var(--pa-grad-soft)}
.pa-motion-emoji{font-size:24px;margin-bottom:4px}
.pa-motion-name{font-size:10px;font-weight:600;color:var(--pa-text-2);line-height:1.2}
.pa-chips{display:flex;gap:8px;flex-wrap:wrap}
.pa-chip{padding:9px 14px;background:rgba(255,255,255,.04);border:1px solid var(--pa-border);border-radius:11px;font-family:inherit;font-size:12px;font-weight:600;color:var(--pa-text-2);cursor:pointer}
.pa-chip.active{background:var(--pa-grad-soft);border-color:var(--pa-purple);color:var(--pa-text)}
.pa-field-input{padding:14px 16px;background:rgba(255,255,255,.04);border:1px solid var(--pa-border);border-radius:14px;font-family:inherit;font-size:14px;color:var(--pa-text);width:100%;box-sizing:border-box;resize:none}
.pa-field-input:focus{outline:none;border-color:var(--pa-purple)}
.pa-btn-primary{margin:18px 20px;padding:16px 24px;background:var(--pa-grad);border:none;border-radius:14px;color:#fff;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 20px rgba(139,92,246,.3)}
.pa-btn-full{width:calc(100% - 40px)}
.pa-btn-primary:disabled{opacity:.6;cursor:default}
.pa-btn-cost{background:rgba(0,0,0,.25);padding:4px 10px;border-radius:8px;font-size:11px}
#pa-result{margin:18px 20px 0}
.pa-result-card{background:var(--pa-surface);border:1px solid var(--pa-border);border-radius:18px;padding:16px}
.pa-result-video{width:100%;border-radius:12px;margin-bottom:12px;background:#000}
.pa-result-actions{display:flex;gap:8px;flex-wrap:wrap}
.pa-result-btn{padding:10px 14px;background:rgba(255,255,255,.06);border:1px solid var(--pa-border);border-radius:10px;color:var(--pa-text-2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.pa-result-btn--primary{background:var(--pa-grad);color:#fff;border:none}
.pa-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 20px}
.pa-gallery-item{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:9/16;cursor:pointer;background:var(--pa-surface)}
.pa-gallery-item video{width:100%;height:100%;object-fit:cover}
.pa-gallery-item .pa-gallery-name{position:absolute;bottom:0;left:0;right:0;padding:8px;background:linear-gradient(transparent,rgba(0,0,0,.7));font-size:10px;color:#fff}
.pa-gallery-item .pa-gallery-del{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.5);color:#fff;border:none;width:24px;height:24px;border-radius:50%;font-size:14px;cursor:pointer}
.pa-bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;background:rgba(10,8,24,.9);backdrop-filter:blur(16px);border-top:1px solid var(--pa-border);padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.pa-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:transparent;border:none;color:var(--pa-text-3);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer}
.pa-nav-btn svg{opacity:.7}.pa-nav-btn.active{color:var(--pa-purple2)}.pa-nav-btn.active svg{opacity:1}
.pa-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(139,92,246,.92);color:#fff;padding:10px 22px;border-radius:14px;font-weight:700;font-size:13px;z-index:3100;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(139,92,246,.3)}
.pa-toast--error{background:rgba(239,68,68,.92)}
.pa-toast--show{opacity:1;transform:translateX(-50%) translateY(0)}
.pa-progress-overlay{margin:18px 20px;padding:20px;background:var(--pa-surface);border:1px solid var(--pa-border);border-radius:18px;text-align:center}
.pa-progress-bar{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-top:12px}
.pa-progress-fill{height:100%;background:var(--pa-grad);border-radius:3px;transition:width .5s;animation:pa-pulse 1.5s infinite}
@keyframes pa-pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* MU Skeleton */
.mu-skeleton{display:flex;flex-direction:column;gap:10px;padding:12px}
.mu-skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(224,64,251,.03) 25%,rgba(224,64,251,.08) 50%,rgba(224,64,251,.03) 75%);background-size:200% 100%;animation:mu-shimmer 1.5s infinite}
@keyframes mu-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}


/* ================================================================= */
/* === LUMIX VIDEO STUDIO — bot_3 — Kinetic Dark Design          === */
/* ================================================================= */

.lx-app{
  --lx-bg:#0F0806;--lx-bg2:#1A0E08;--lx-bg3:#241610;--lx-bg4:#302018;
  --lx-electric:#FF6B35;--lx-electric2:#FF8A5C;--lx-electric-dim:rgba(255,107,53,.12);
  --lx-neon:#FF3D00;--lx-neon-dim:rgba(255,61,0,.12);
  --lx-orange:#FF6B35;--lx-red:#FF3D00;--lx-amber:#FFB347;
  --lx-text:#FBE9E0;--lx-text2:#C49480;--lx-text3:#7A5A48;
  --lx-border:rgba(255,107,53,.12);--lx-border2:rgba(255,61,0,.22);
  --lx-glass:rgba(15,8,6,.88);--lx-card:rgba(36,22,16,.82);
  display:none;flex-direction:column;position:fixed;inset:0;z-index:9999;
  background:var(--lx-bg);color:var(--lx-text);font-family:'Space Grotesk',Inter,system-ui,sans-serif;
  overflow:hidden;
}
.lx-app.active{display:flex}
.lx-app::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%,rgba(255,107,53,.12) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 100%,rgba(255,61,0,.08) 0%,transparent 50%);
}
.lx-topbar{
  position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;background:var(--lx-glass);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--lx-border);
}
.lx-topbar-logo{font-size:20px;font-weight:800;letter-spacing:3px;color:var(--lx-text);text-transform:uppercase}
.lx-topbar-logo span{font-size:11px;font-weight:500;letter-spacing:1px;color:var(--lx-text3);margin-left:8px;text-transform:none}
.lx-topbar-actions{display:flex;gap:8px}
.lx-topbar-btn{width:36px;height:36px;border-radius:10px;background:var(--lx-electric-dim);border:1px solid var(--lx-border);color:var(--lx-text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.lx-topbar-btn:active{transform:scale(.92);background:var(--lx-border2)}
.lx-content{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 100px;-webkit-overflow-scrolling:touch}
.lx-content::-webkit-scrollbar{display:none}
.lx-tab{display:none}.lx-tab.active{display:block}
.lx-hero{padding:28px 0 20px;text-align:center}
.lx-hero-visual{margin-bottom:16px}
.lx-hero-icon{width:72px;height:72px;margin:0 auto;animation:lx-pulse 4s ease-in-out infinite}
@keyframes lx-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.lx-hero-greeting{font-size:24px;font-weight:800;line-height:1.2;margin-bottom:10px;background:linear-gradient(135deg,var(--lx-text),var(--lx-neon));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lx-hero-credits{font-size:13px;color:var(--lx-text2);margin-bottom:6px}
.lx-credits-bar{height:3px;border-radius:2px;background:var(--lx-bg3);margin-bottom:18px;overflow:hidden}
.lx-credits-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--lx-electric),var(--lx-neon));transition:width .5s}
.lx-btn-primary{
  display:inline-flex;align-items:center;gap:8px;padding:14px 32px;
  background:linear-gradient(135deg,#8B2500,var(--lx-electric),#FFB347);color:#fff;
  border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:.5px;transition:all .2s;
  box-shadow:0 4px 20px rgba(255,107,53,.35),0 0 30px rgba(255,61,0,.1);
}
.lx-btn-primary:active{transform:scale(.96);box-shadow:0 2px 10px rgba(0,85,212,.2)}
.lx-quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.lx-quick-action{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px;
  background:var(--lx-card);border:1px solid var(--lx-border);border-radius:14px;
  cursor:pointer;transition:all .2s;text-align:center;
}
.lx-quick-action:active{transform:scale(.95);border-color:var(--lx-border2)}
.lx-quick-action .icon{width:28px;height:28px;color:var(--lx-neon)}
.lx-quick-action .label{font-size:11px;font-weight:600;color:var(--lx-text2);text-transform:uppercase;letter-spacing:.5px}
.lx-section{margin-bottom:24px}
.lx-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lx-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--lx-text3)}
.lx-section-link{font-size:12px;color:var(--lx-neon);font-weight:600;cursor:pointer;padding:8px;min-width:44px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.lx-styles-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.lx-styles-scroll::-webkit-scrollbar{display:none}
.lx-style-chip{
  padding:8px 16px;white-space:nowrap;background:var(--lx-card);border:1px solid var(--lx-border);
  border-radius:20px;font-size:12px;font-weight:600;color:var(--lx-text2);cursor:pointer;
  transition:all .2s;flex-shrink:0;
}
.lx-style-chip:active,.lx-style-chip.active{background:var(--lx-electric-dim);border-color:var(--lx-electric);color:var(--lx-electric2)}
.lx-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.lx-feature-card{
  display:flex;align-items:center;gap:10px;padding:14px;
  background:var(--lx-card);border:1px solid var(--lx-border);border-radius:12px;
  font-size:12px;font-weight:600;color:var(--lx-text2);
}
.lx-feature-card svg{color:var(--lx-electric2);flex-shrink:0}
.lx-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px;color:var(--lx-text3)}
.lx-empty-text{font-size:14px;font-weight:600}
.lx-empty-sub{font-size:12px;opacity:.7}
.lx-projects-list{display:flex;flex-direction:column;gap:8px}
.lx-project-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--lx-card);border:1px solid var(--lx-border);border-radius:12px;
  cursor:pointer;transition:all .2s;
}
.lx-project-item:active{background:var(--lx-electric-dim);border-color:var(--lx-border2)}
.lx-project-thumb{width:64px;height:36px;border-radius:6px;background:var(--lx-bg3);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
.lx-project-thumb svg{width:16px;height:16px;color:var(--lx-text3)}
.lx-project-info{flex:1;min-width:0}
.lx-project-title{font-size:14px;font-weight:600;color:var(--lx-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-project-meta{font-size:11px;color:var(--lx-text3);margin-top:2px}
.lx-create-form{padding:20px 0}
.lx-form-section{margin-bottom:16px}
.lx-form-row{display:flex;gap:12px}
.lx-form-half{flex:1}
.lx-label{display:block;font-size:12px;font-weight:700;color:var(--lx-text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.lx-textarea{
  width:100%;padding:14px;background:var(--lx-bg2);border:1px solid var(--lx-border);
  border-radius:12px;color:var(--lx-neon);font-size:14px;font-family:'IBM Plex Mono',monospace;
  resize:none;outline:none;transition:border-color .2s;box-sizing:border-box;caret-color:var(--lx-neon);
}
.lx-textarea:focus{border-color:rgba(0,229,255,.4);box-shadow:0 0 0 3px rgba(0,229,255,.08)}
.lx-textarea::placeholder{color:var(--lx-text3);font-family:inherit}
.lx-prompt-actions{display:flex;gap:8px;margin-top:8px}
.lx-select{
  width:100%;padding:10px 12px;background:var(--lx-bg2);border:1px solid var(--lx-border);
  border-radius:10px;color:var(--lx-text);font-size:13px;font-family:inherit;
  outline:none;appearance:none;cursor:pointer;box-sizing:border-box;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23435169' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.lx-select:focus{border-color:var(--lx-electric)}
.lx-ratio-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lx-ratio-chip{background:var(--lx-bg2);border:1px solid var(--lx-border);border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:border-color .15s,background .15s;color:var(--lx-text2);font-family:inherit}
.lx-ratio-chip:active{transform:scale(.96)}
.lx-ratio-chip.active{border-color:var(--lx-electric);background:var(--lx-electric-dim);color:var(--lx-text)}
.lx-ratio-preview{background:linear-gradient(135deg,var(--lx-electric),var(--lx-neon));border-radius:4px;flex-shrink:0}
.lx-ratio-preview--h{width:36px;height:20px}
.lx-ratio-preview--v{width:18px;height:32px}
.lx-ratio-preview--s{width:24px;height:24px}
.lx-ratio-preview--c{width:28px;height:21px}
.lx-ratio-name{font-size:11px;font-weight:800;letter-spacing:.5px}
.lx-ratio-use{font-size:9px;color:var(--lx-text3);text-transform:uppercase;letter-spacing:.3px}
.lx-ratio-chip.active .lx-ratio-use{color:var(--lx-electric2)}
.lx-input{
  width:100%;padding:10px 12px;background:var(--lx-bg2);border:1px solid var(--lx-border);
  border-radius:10px;color:var(--lx-text);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box;
}
.lx-input:focus{border-color:var(--lx-electric)}
.lx-input::placeholder{color:var(--lx-text3)}
.lx-btn-ghost{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  background:transparent;border:1px solid var(--lx-border);border-radius:8px;
  color:var(--lx-neon);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;
}
.lx-btn-ghost:active{background:var(--lx-neon-dim);border-color:var(--lx-neon)}
.lx-advanced-toggle{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--lx-text3);font-size:12px;font-weight:600;cursor:pointer}
.lx-chevron{transition:transform .2s}
.lx-advanced-toggle.open .lx-chevron{transform:rotate(180deg)}
.lx-advanced-panel{padding:4px 0 12px}
.lx-btn-generate{
  width:100%;padding:16px;margin-top:8px;
  background:linear-gradient(135deg,#8B2500,var(--lx-electric) 40%,#FFB347);color:#fff;
  border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;
  font-family:inherit;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 4px 24px rgba(255,107,53,.35),0 0 40px rgba(255,61,0,.1);transition:all .2s;
  animation:lx-gen-pulse 3s ease-in-out infinite;
}
.lx-btn-batch{width:100%;padding:12px;margin-top:8px;background:var(--lx-bg2);border:1px solid var(--lx-electric);color:var(--lx-electric2);border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s}
.lx-btn-batch:active{background:var(--lx-electric-dim)}
.lx-batch-header{padding:12px 14px;border-bottom:1px solid var(--lx-border)}
.lx-batch-title{font-size:14px;font-weight:700;color:var(--lx-text);margin-bottom:4px}
.lx-batch-sub{font-size:11px;color:var(--lx-text3)}
.lx-batch-grid{display:grid;grid-template-columns:1fr;gap:10px;padding:12px}
@media(min-width:500px){.lx-batch-grid{grid-template-columns:repeat(3,1fr)}}
.lx-batch-card{background:var(--lx-bg2);border:1px solid var(--lx-border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.lx-batch-video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;cursor:pointer}
.lx-batch-label{padding:8px 10px;font-size:11px;font-weight:700;color:var(--lx-text2);letter-spacing:.3px}
.lx-batch-actions{display:flex;gap:6px;padding:0 10px 10px}
.lx-batch-btn{flex:1;padding:8px;background:rgba(255,255,255,.05);border:1px solid var(--lx-border);border-radius:8px;color:var(--lx-text2);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer}
.lx-batch-btn--primary{background:var(--lx-electric-dim);border-color:var(--lx-electric);color:var(--lx-electric2)}
.lx-batch-label{display:flex;justify-content:space-between;align-items:center}
.lx-batch-fav{background:none;border:none;font-size:14px;cursor:pointer;padding:2px 6px;opacity:.5;transition:all .15s}
.lx-batch-fav:active{transform:scale(.9)}
.lx-batch-card--fav{border-color:#FFB347;box-shadow:0 0 0 2px rgba(255,179,71,.25)}
.lx-batch-card--fav .lx-batch-fav{opacity:1;filter:drop-shadow(0 0 8px #FFB347)}
.lx-batch-card--fav .lx-batch-label::before{content:'★ Выбрано · ';color:#FFB347;font-weight:700;font-size:10px;letter-spacing:.3px;text-transform:uppercase}
@keyframes lx-gen-pulse{
  0%,100%{box-shadow:0 4px 20px rgba(255,107,53,.3),0 0 30px rgba(255,61,0,.08)}
  50%{box-shadow:0 4px 30px rgba(255,107,53,.5),0 0 50px rgba(255,61,0,.15)}
}
.lx-btn-generate:active{transform:scale(.97)}
.lx-btn-generate:disabled{opacity:.5;cursor:not-allowed;animation:none}
.lx-cost-hint{text-align:center;font-size:12px;color:var(--lx-text3);margin-top:6px}
.lx-generating{padding:40px 0;text-align:center}
.lx-gen-visual{margin-bottom:24px}
.lx-particles{display:flex;align-items:center;justify-content:center;gap:6px;height:48px}
.lx-particles span{
  width:8px;height:8px;border-radius:50%;background:var(--lx-electric2);
  animation:lx-particle 1.5s ease-in-out infinite;
}
.lx-particles span:nth-child(1){animation-delay:0s}
.lx-particles span:nth-child(2){animation-delay:.15s}
.lx-particles span:nth-child(3){animation-delay:.3s}
.lx-particles span:nth-child(4){animation-delay:.45s}
.lx-particles span:nth-child(5){animation-delay:.6s}
.lx-particles span:nth-child(6){animation-delay:.75s}
@keyframes lx-particle{0%,100%{transform:scale(1);opacity:.4}50%{transform:scale(2.2);opacity:1;background:var(--lx-neon)}}
.lx-gen-status{font-size:16px;font-weight:700;color:var(--lx-text);margin-bottom:12px}
.lx-gen-progress-bar{height:4px;border-radius:2px;background:var(--lx-bg3);margin:0 40px 8px;overflow:hidden}
.lx-gen-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--lx-electric),var(--lx-neon));transition:width .5s;width:0%;box-shadow:0 0 8px rgba(0,229,255,.4)}
.lx-gen-model{font-size:12px;color:var(--lx-electric2);margin-bottom:4px}
.lx-gen-hint{font-size:12px;color:var(--lx-text3)}
.lx-result{padding:20px 0}
.lx-result-card{background:var(--lx-card);border:1px solid var(--lx-border);border-radius:16px;padding:16px;overflow:hidden}
.lx-result-preview{aspect-ratio:16/9;border-radius:10px;background:var(--lx-bg2);margin-bottom:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.lx-result-preview video{width:100%;height:100%;object-fit:cover}
.lx-result-placeholder{color:var(--lx-text3)}
.lx-result-info{margin-bottom:12px}
.lx-result-title{font-size:16px;font-weight:700;color:var(--lx-text)}
.lx-result-meta{font-size:12px;color:var(--lx-text3);margin-top:2px}
.lx-result-actions{display:flex;gap:8px;flex-wrap:wrap}
.lx-action-btn{
  display:flex;align-items:center;gap:6px;padding:8px 14px;
  background:var(--lx-bg3);border:1px solid var(--lx-border);border-radius:10px;
  color:var(--lx-text2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;
}
.lx-action-btn:active{background:var(--lx-electric-dim);border-color:var(--lx-electric)}
.lx-enhanced{margin-top:16px;padding:14px;background:var(--lx-bg2);border:1px solid var(--lx-border);border-radius:12px}
.lx-enhanced-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--lx-electric2);margin-bottom:8px}
.lx-enhanced-text{font-size:13px;line-height:1.6;color:var(--lx-text2);white-space:pre-wrap}
.lx-library-header{padding:20px 0 16px}
.lx-library-title{font-size:20px;font-weight:800;margin-bottom:12px;color:var(--lx-text)}
.lx-library-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.lx-library-filters::-webkit-scrollbar{display:none}
.lx-filter-btn{
  padding:7px 14px;border-radius:16px;font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--lx-bg3);border:1px solid var(--lx-border);color:var(--lx-text3);
  cursor:pointer;font-family:inherit;transition:all .2s;
}
.lx-filter-btn.active{background:var(--lx-electric-dim);border-color:var(--lx-electric);color:var(--lx-electric2)}
.lx-avatars-coming{display:flex;flex-direction:column;align-items:center;gap:12px;padding:60px 20px;color:var(--lx-text3);text-align:center}
.lx-bottom-nav{
  position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;
  background:var(--lx-glass);backdrop-filter:blur(20px);
  border-top:1px solid var(--lx-border);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px));
}
.lx-nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;
  background:transparent;border:none;color:var(--lx-text3);
  font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:color .2s;
}
.lx-nav-btn svg{opacity:.5;transition:opacity .2s}
.lx-nav-btn.active{color:var(--lx-neon)}
.lx-nav-btn.active svg{opacity:1}


/* ================================================================= */
/* === STUDYPRO — bot_12 — Academic Writing Assistant             === */
/* ================================================================= */

.sp-app{
  --sp-bg:#061210;--sp-bg2:#0A1A16;--sp-bg3:#102420;--sp-bg4:#183028;
  --sp-purple:#00E676;--sp-purple2:#69F0AE;--sp-purple-dim:rgba(0,230,118,.1);
  --sp-blue:#1DE9B6;--sp-green:#00E676;--sp-amber:#B2FF59;
  --sp-text:#E0F2F1;--sp-text2:#80CBC4;--sp-text3:#4A7A72;
  --sp-border:rgba(0,230,118,.1);--sp-border2:rgba(29,233,182,.2);
  --sp-glass:rgba(6,18,16,.9);--sp-card:rgba(16,36,32,.8);
  display:none;flex-direction:column;position:fixed;inset:0;z-index:9999;
  background:var(--sp-bg);color:var(--sp-text);font-family:Inter,'Segoe UI',system-ui,sans-serif;
  overflow:hidden;
}
.sp-app.active{display:flex}
.sp-app::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 30% 0%,rgba(0,230,118,.08) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 100%,rgba(29,233,182,.06) 0%,transparent 50%);
}
.sp-topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--sp-glass);backdrop-filter:blur(20px);border-bottom:1px solid var(--sp-border)}
.sp-topbar-logo{font-size:18px;font-weight:800;letter-spacing:2px;color:var(--sp-text);text-transform:uppercase}
.sp-topbar-logo span{font-size:11px;font-weight:500;letter-spacing:1px;color:var(--sp-text3);margin-left:8px;text-transform:none}
.sp-topbar-actions{display:flex;gap:8px}
.sp-topbar-btn{width:36px;height:36px;border-radius:10px;background:var(--sp-purple-dim);border:1px solid var(--sp-border);color:var(--sp-text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.sp-topbar-btn:active{transform:scale(.92)}
.sp-content{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;padding:0 16px 100px;-webkit-overflow-scrolling:touch}
.sp-content::-webkit-scrollbar{display:none}
.sp-tab{display:none}.sp-tab.active{display:block}
.sp-hero{padding:28px 0 20px;text-align:center}
.sp-hero-visual{margin-bottom:16px}
.sp-hero-icon{width:72px;height:72px;margin:0 auto;animation:sp-float 5s ease-in-out infinite}
@keyframes sp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.sp-hero-greeting{font-size:22px;font-weight:800;line-height:1.2;margin-bottom:6px;background:linear-gradient(135deg,var(--sp-text),var(--sp-purple2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sp-hero-sub{font-size:13px;color:var(--sp-text2);margin-bottom:16px}
.sp-btn-primary{
  display:inline-flex;align-items:center;gap:8px;padding:14px 32px;
  background:linear-gradient(135deg,#00895E,var(--sp-purple),#1DE9B6);color:#fff;
  border:none;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:all .2s;box-shadow:0 4px 20px rgba(88,60,180,.3);
}
.sp-btn-primary:active{transform:scale(.96)}
.sp-quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:24px}
.sp-quick-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 8px;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:14px;cursor:pointer;transition:all .2s;text-align:center}
.sp-quick-action:active{transform:scale(.95);border-color:var(--sp-border2)}
.sp-quick-action .icon{width:28px;height:28px;color:var(--sp-purple2)}
.sp-quick-action .label{font-size:11px;font-weight:600;color:var(--sp-text2);text-transform:uppercase;letter-spacing:.5px}
.sp-section{margin-bottom:24px}
.sp-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sp-section-title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--sp-text3)}
.sp-section-title-lg{font-size:20px;font-weight:800;color:var(--sp-text);margin-bottom:16px}
.sp-section-link{font-size:12px;color:var(--sp-purple2);font-weight:600;cursor:pointer;padding:8px;min-width:44px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.sp-templates-scroll{display:flex;gap:8px;overflow-x:auto;padding:0 16px 4px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;mask-image:linear-gradient(to right,#000 0,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 0,#000 92%,transparent 100%)}
.sp-templates-scroll::-webkit-scrollbar{display:none}
.sp-templates-scroll > *{scroll-snap-align:start}
.sp-template-chip{padding:8px 16px;white-space:nowrap;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:20px;font-size:12px;font-weight:600;color:var(--sp-text2);cursor:pointer;transition:all .2s;flex-shrink:0}
.sp-template-chip:active{background:var(--sp-purple-dim);border-color:var(--sp-purple);color:var(--sp-purple2)}
.sp-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sp-feature-card{display:flex;align-items:center;gap:10px;padding:14px;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:12px;font-size:12px;font-weight:600;color:var(--sp-text2)}
.sp-feature-card svg{color:var(--sp-purple2);flex-shrink:0}
.sp-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px;color:var(--sp-text3)}
.sp-empty-text{font-size:14px;font-weight:600}
.sp-empty-sub{font-size:12px;opacity:.7}
.sp-works-list{display:flex;flex-direction:column;gap:8px}
.sp-work-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:12px;cursor:pointer;transition:all .2s}
.sp-work-item:active{background:var(--sp-purple-dim)}
.sp-work-icon{width:40px;height:40px;border-radius:8px;background:var(--sp-purple-dim);display:flex;align-items:center;justify-content:center;color:var(--sp-purple2);flex-shrink:0}
.sp-work-info{flex:1;min-width:0}
.sp-work-title{font-size:14px;font-weight:600;color:var(--sp-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-work-meta{font-size:11px;color:var(--sp-text3);margin-top:2px}
.sp-create-form{padding:20px 0}
.sp-form-section{margin-bottom:16px}
.sp-form-row{display:flex;gap:12px}
.sp-form-half{flex:1}
.sp-label{display:block;font-size:12px;font-weight:700;color:var(--sp-text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.sp-label-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--sp-text3)}
.sp-textarea{width:100%;padding:12px 14px;background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:12px;color:var(--sp-text);font-size:14px;font-family:inherit;resize:none;outline:none;transition:border-color .2s;box-sizing:border-box}
.sp-textarea:focus{border-color:var(--sp-purple)}
.sp-textarea::placeholder{color:var(--sp-text3)}
.sp-textarea-sm{font-size:13px}
.sp-select{width:100%;padding:10px 12px;background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:10px;color:var(--sp-text);font-size:13px;font-family:inherit;outline:none;appearance:none;cursor:pointer;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235D5580' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.sp-select:focus{border-color:var(--sp-purple)}
.sp-input{width:100%;padding:10px 12px;background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:10px;color:var(--sp-text);font-size:13px;font-family:inherit;outline:none;box-sizing:border-box}
.sp-input:focus{border-color:var(--sp-purple)}
.sp-btn-generate{width:100%;padding:16px;margin-top:8px;background:linear-gradient(135deg,#00895E,var(--sp-purple),#1DE9B6);color:#fff;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 24px rgba(0,230,118,.3);transition:all .2s}
.sp-btn-generate:active{transform:scale(.97)}
.sp-hint{text-align:center;font-size:12px;color:var(--sp-text3);margin-top:8px}
.sp-generating{padding:40px 0;text-align:center}
.sp-gen-visual{margin-bottom:24px}
.sp-typing-dots{display:flex;align-items:center;justify-content:center;gap:6px}
.sp-typing-dots span{width:10px;height:10px;border-radius:50%;background:var(--sp-purple2);animation:sp-dot 1.2s ease-in-out infinite}
.sp-typing-dots span:nth-child(2){animation-delay:.2s}
.sp-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes sp-dot{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
.sp-gen-status{font-size:16px;font-weight:700;color:var(--sp-text);margin-bottom:12px}
.sp-gen-progress-bar{height:4px;border-radius:2px;background:var(--sp-bg3);margin:0 40px;overflow:hidden}
.sp-gen-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--sp-purple),var(--sp-blue));transition:width .5s;width:0%}
.sp-result{padding:20px 0}
.sp-result-card{background:var(--sp-card);border:1px solid var(--sp-border);border-radius:16px;padding:20px;overflow:hidden}
.sp-result-title{font-size:18px;font-weight:700;color:var(--sp-text);margin-bottom:14px}
.sp-result-outline{font-size:14px;line-height:1.8;color:var(--sp-text2);white-space:pre-wrap;margin-bottom:16px;max-height:400px;overflow-y:auto}
.sp-result-actions{display:flex;gap:8px;flex-wrap:wrap}
.sp-action-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--sp-bg3);border:1px solid var(--sp-border);border-radius:10px;color:var(--sp-text2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}
.sp-action-btn:active{background:var(--sp-purple-dim);border-color:var(--sp-purple)}
.sp-sources-header{padding:20px 0 16px}
.sp-search-bar{display:flex;gap:8px;align-items:center;padding:10px 14px;background:var(--sp-bg2);border:1px solid var(--sp-border);border-radius:12px}
.sp-search-bar svg{color:var(--sp-text3);flex-shrink:0}
.sp-search-input{flex:1;background:none;border:none;color:var(--sp-text);font-size:14px;font-family:inherit;outline:none}
.sp-search-input::placeholder{color:var(--sp-text3)}
.sp-search-btn{padding:8px 16px;background:var(--sp-purple);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;flex-shrink:0}
.sp-sources-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sp-source-item{padding:14px;background:var(--sp-card);border:1px solid var(--sp-border);border-radius:12px}
.sp-source-title{font-size:14px;font-weight:600;color:var(--sp-text);margin-bottom:4px}
.sp-source-authors{font-size:12px;color:var(--sp-text3);margin-bottom:4px}
.sp-source-meta{font-size:11px;color:var(--sp-text3)}
.sp-source-actions{display:flex;gap:6px;margin-top:8px}
.sp-source-btn{padding:5px 10px;background:var(--sp-purple-dim);border:1px solid var(--sp-border);border-radius:6px;color:var(--sp-purple2);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.sp-library-header{padding:20px 0 16px}
.sp-bottom-nav{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;background:var(--sp-glass);backdrop-filter:blur(20px);border-top:1px solid var(--sp-border);padding:8px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.sp-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;background:transparent;border:none;color:var(--sp-text3);font-family:inherit;font-size:10px;font-weight:600;cursor:pointer;transition:color .2s}
.sp-nav-btn svg{opacity:.5;transition:opacity .2s}
.sp-nav-btn.active{color:var(--sp-purple2)}
.sp-nav-btn.active svg{opacity:1}

/* SP Toast */
.sp-toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:rgba(0,230,118,.9);color:#061210;padding:10px 22px;border-radius:14px;font-weight:700;font-size:13px;z-index:3100;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(0,230,118,.3)}
.sp-toast--error{background:rgba(239,68,68,.9);color:#fff;box-shadow:0 4px 20px rgba(239,68,68,.3)}
.sp-toast--show{opacity:1;transform:translateX(-50%) translateY(0)}

/* SP Inline Modal */
.sp-inline-modal{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px}
.sp-inline-modal-card{background:linear-gradient(180deg,#0A1A16,#061210);border:1px solid var(--sp-border2);border-radius:18px;padding:20px;max-width:360px;width:100%;max-height:70vh;overflow-y:auto}
.sp-inline-modal-title{font-size:15px;font-weight:800;color:var(--sp-text);margin-bottom:12px}
.sp-inline-modal-text{font-size:13px;color:var(--sp-text2);line-height:1.6;margin-bottom:16px;white-space:pre-line}
.sp-inline-modal-actions{display:flex;gap:8px;justify-content:flex-end}
.sp-inline-modal-actions button{padding:10px 18px;border-radius:12px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none}
.sp-im-primary{background:var(--sp-purple);color:#061210}
.sp-im-secondary{background:rgba(255,255,255,.08);color:var(--sp-text2)}

/* SP Chapter rows */
.sp-chapter-row{border:1px solid var(--sp-border);border-radius:12px;margin-bottom:6px;overflow:hidden;background:var(--sp-card)}
.sp-chapter-row--sub{margin-left:16px}
.sp-chapter-header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;cursor:pointer}
.sp-chapter-info{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.sp-chapter-status{font-size:14px;flex-shrink:0}
.sp-chapter-title{font-size:12px;font-weight:600;color:var(--sp-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-chapter-btn{padding:6px 12px;background:var(--sp-purple-dim);border:1px solid var(--sp-border);border-radius:8px;color:var(--sp-purple2);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.sp-chapter-btn:disabled{opacity:.5;cursor:default}
.sp-chapter-body{padding:0 12px 12px;font-size:13px;color:var(--sp-text2);line-height:1.6}
.sp-chapter-text{max-height:300px;overflow-y:auto;scrollbar-width:thin}
.sp-chapter-wc{display:inline-block;margin-top:8px;font-size:10px;color:var(--sp-text3);background:rgba(255,255,255,.04);padding:2px 8px;border-radius:6px}
.sp-btn-write-all{width:100%;margin-bottom:12px;padding:14px;font-size:14px}
.sp-btn-secondary{padding:10px 16px;background:rgba(255,255,255,.06);border:1px solid var(--sp-border);border-radius:12px;color:var(--sp-text2);font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}

/* SP Citation modal extras */
.sp-cite-styles{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.sp-cite-style-btn{padding:6px 12px;background:rgba(255,255,255,.04);border:1px solid var(--sp-border);border-radius:8px;color:var(--sp-text2);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.sp-cite-style-btn.active{background:var(--sp-purple-dim);border-color:var(--sp-purple);color:var(--sp-purple2)}

/* SP Skeleton */
.sp-skeleton{display:flex;flex-direction:column;gap:10px;padding:12px}
.sp-skeleton-line{height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(0,230,118,.03) 25%,rgba(0,230,118,.08) 50%,rgba(0,230,118,.03) 75%);background-size:200% 100%;animation:sp-shimmer 1.5s infinite}
@keyframes sp-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}


/* ═══ MX HUB — Phases 2-9 UI ═══ */
.mx-hub {
  position: fixed; inset: 0; z-index: 9998;
  background: linear-gradient(180deg, #0F0D12 0%, #1A1320 100%);
  color: var(--text); overflow-y: auto;
  display: flex; flex-direction: column;
  font-family: inherit;
}
.mx-hub__topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 10px;
  position: sticky; top: 0; z-index: 20;
  background: rgba(15,13,18,.92); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mx-hub__back, .mx-hub__close {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mx-hub__title { flex: 1; font-size: 17px; font-weight: 700; text-align: center; color: var(--text); }
.mx-hub__tabs {
  display: flex; gap: 6px; padding: 10px 16px 12px;
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; touch-action: pan-x;
  overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.mx-hub__tabs::-webkit-scrollbar { display: none; }
.mx-hub__tab {
  padding: 8px 14px; border-radius: 50px; font-size: 13px; font-weight: 600;
  background: transparent; border: 1px solid var(--border); color: var(--text2);
  cursor: pointer; font-family: inherit; flex-shrink: 0;
  transition: all .2s;
  white-space: nowrap;
}
.mx-hub__tab.active { background: var(--grad); color: #fff; border-color: transparent; }
.mx-hub__content { padding: 16px; }

/* Mascot */
.mx-mascot {
  display: flex; gap: 12px; margin: 16px 16px 0; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(251,146,60,.1), rgba(239,68,68,.08));
  border: 1px solid rgba(251,146,60,.2); border-radius: 16px;
  flex-shrink: 0;
}
.mx-mascot__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(251,146,60,.15); display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
  animation: mx-mascot-bounce 3s ease-in-out infinite;
}
@keyframes mx-mascot-bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}
.mx-mascot__body { flex: 1; min-width: 0; }
.mx-mascot__name { font-size: 12px; color: #FB923C; font-weight: 700; }
.mx-mascot__text { font-size: 13px; color: var(--text); line-height: 1.4; margin-top: 2px; }

/* Profile pane */
.mx-pf-card {
  background: var(--grad-glow);
  border: 1px solid rgba(212,105,138,.22);
  border-radius: 20px; padding: 20px; margin-bottom: 16px;
}
.mx-pf-top { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.mx-pf-avatar {
  position: relative; width: 72px; height: 72px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 800; color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(212,105,138,.32);
}
.mx-pf-avatar-acc { position: absolute; top: -8px; right: -4px; font-size: 22px; }
.mx-pf-info { flex: 1; min-width: 0; }
.mx-pf-name { font-size: 18px; font-weight: 800; color: #fff; }
.mx-pf-level { font-size: 13px; color: var(--text2); margin-top: 2px; }
.mx-pf-level b { color: var(--accent); }
.mx-pf-progress {
  margin-top: 8px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.mx-pf-progress-fill {
  height: 100%; border-radius: 3px;
  background: var(--grad);
  transition: width .8s ease;
}
.mx-pf-progress-text { font-size: 11px; color: var(--text2); margin-top: 4px; }
.mx-pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mx-pf-stat {
  background: rgba(255,255,255,.04); border-radius: 12px; padding: 10px; text-align: center;
  border: 1px solid var(--border);
}
.mx-pf-stat-val { font-size: 18px; font-weight: 800; color: #fff; }
.mx-pf-stat-lbl { font-size: 11px; color: var(--text2); margin-top: 2px; }
.mx-pf-freezes {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: rgba(212,105,138,.08); border-radius: 12px; padding: 10px 14px;
  border: 1px solid rgba(212,105,138,.15);
}
.mx-pf-freezes-lbl { font-size: 13px; color: var(--text); }
.mx-btn-buy {
  padding: 6px 14px; border-radius: 50px;
  background: var(--grad);
  color: #fff; border: none; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 14px rgba(212,105,138,.3);
}
.mx-btn-primary {
  padding: 10px 16px; border-radius: 10px;
  background: var(--grad);
  color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* Quick grid */
.mx-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mx-quick-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 14px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  color: var(--text); cursor: pointer; font-family: inherit; text-align: left;
  transition: all .2s;
}
.mx-quick-btn:active { transform: scale(.97); background: rgba(255,255,255,.06); }
.mx-quick-icon { font-size: 24px; }
.mx-quick-lbl { font-size: 13px; font-weight: 700; color: #fff; }
.mx-quick-sub { font-size: 11px; color: var(--text2); }

/* League */
.mx-league-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--grad-glow);
  border: 1px solid rgba(155,92,232,.25); border-radius: 16px;
}
.mx-league-name { font-size: 16px; font-weight: 700; color: #fff; }
.mx-league-timer { font-size: 12px; color: var(--accent2); font-weight: 600; }
.mx-league-list { display: flex; flex-direction: column; gap: 6px; }
.mx-league-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 12px;
}
.mx-league-row.is-me { background: rgba(212,105,138,.14); border-color: rgba(212,105,138,.35); }
.mx-league-row.promote { border-left: 3px solid #10B981; }
.mx-league-row.demote  { border-left: 3px solid #EF4444; }
.mx-league-rank {
  width: 28px; font-size: 13px; font-weight: 800; color: var(--text2); text-align: center;
}
.mx-league-row.is-me .mx-league-rank { color: var(--accent); }
.mx-league-row.top-1 .mx-league-rank { color: #FBBF24; }
.mx-league-row.top-2 .mx-league-rank { color: #94A3B8; }
.mx-league-row.top-3 .mx-league-rank { color: #CD7F32; }
.mx-league-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #fff; font-size: 14px; flex-shrink: 0;
  overflow: hidden;
}
.mx-league-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mx-league-name-col { flex: 1; min-width: 0; }
.mx-league-uname { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-league-xp { font-size: 12px; color: var(--text2); }
.mx-league-xp b { color: var(--accent); }

/* Quests */
.mx-quests-sec { margin-bottom: 20px; }
.mx-quests-title {
  font-size: 13px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.mx-quests-list { display: flex; flex-direction: column; gap: 8px; }
.mx-quest-row {
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 14px;
}
.mx-quest-top {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.mx-quest-title { font-size: 14px; font-weight: 600; color: #fff; flex: 1; min-width: 0; }
.mx-quest-reward {
  font-size: 11px; color: #FBBF24; font-weight: 700; background: rgba(251,191,36,.1);
  padding: 3px 8px; border-radius: 6px; margin-left: 8px;
}
.mx-quest-bar {
  height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden;
}
.mx-quest-bar-fill {
  height: 100%; background: var(--grad);
  transition: width .6s ease;
}
.mx-quest-progress-text { font-size: 11px; color: var(--text2); margin-top: 4px; }
.mx-quest-claim-btn {
  padding: 6px 14px; border-radius: 50px;
  background: linear-gradient(135deg, #10B981, #34D399); color: #fff;
  border: none; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
  margin-top: 8px;
}
.mx-quest-row.completed { border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.05); }

/* Achievements */
.mx-ach-header {
  padding: 14px 16px; margin-bottom: 12px;
  background: rgba(255,255,255,.03); border-radius: 12px; text-align: center;
  border: 1px solid var(--border);
}
.mx-ach-count { font-size: 16px; color: #fff; }
.mx-ach-count b { color: var(--accent); font-size: 20px; }
.mx-ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mx-ach-card {
  aspect-ratio: 1; border-radius: 14px; padding: 12px 6px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; cursor: pointer;
  transition: transform .2s;
}
.mx-ach-card:active { transform: scale(.95); }
.mx-ach-card.locked { opacity: .35; filter: grayscale(.8); }
.mx-ach-card.rarity-rare      { background: rgba(212,105,138,.08); border-color: rgba(212,105,138,.3); }
.mx-ach-card.rarity-epic      { background: rgba(155,92,232,.12); border-color: rgba(155,92,232,.4); }
.mx-ach-card.rarity-legendary { background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(239,68,68,.1)); border-color: rgba(251,191,36,.4); }
.mx-ach-icon { font-size: 28px; }
.mx-ach-name { font-size: 10px; font-weight: 700; color: #fff; line-height: 1.1; }

/* Shop */
.mx-shop-header {
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--grad-glow);
  border: 1px solid rgba(155,92,232,.28); border-radius: 12px;
  text-align: center; font-size: 15px; color: #fff;
}
.mx-shop-header b { color: #FBBF24; font-size: 20px; }
.mx-shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mx-shop-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.mx-shop-icon { font-size: 32px; }
.mx-shop-name { font-size: 13px; font-weight: 700; color: #fff; }
.mx-shop-desc { font-size: 11px; color: var(--text2); flex: 1; }
.mx-shop-buy {
  padding: 8px 12px; border-radius: 10px;
  background: var(--grad); color: #fff;
  border: none; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  margin-top: 6px;
}
.mx-shop-buy:disabled { opacity: .4; cursor: not-allowed; background: #4A5568; }
.mx-shop-card.owned { border-color: rgba(16,185,129,.4); }

/* Friends */
.mx-friends-add {
  display: flex; gap: 8px; margin-bottom: 14px;
}
.mx-friend-input {
  flex: 1; padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-family: inherit; outline: none;
}
.mx-friend-input:focus { border-color: var(--accent); }
.mx-referral-card {
  padding: 14px 16px; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(16,185,129,.1), rgba(212,105,138,.08));
  border: 1px solid rgba(16,185,129,.25); border-radius: 14px;
  text-align: center; cursor: pointer;
}
.mx-ref-title { font-size: 15px; font-weight: 700; color: #10B981; }
.mx-ref-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.mx-friends-list { display: flex; flex-direction: column; gap: 8px; }
.mx-friend-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: 12px;
}
.mx-friend-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; flex-shrink: 0; overflow: hidden;
}
.mx-friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mx-friend-body { flex: 1; min-width: 0; }
.mx-friend-name { font-size: 14px; font-weight: 600; color: #fff; }
.mx-friend-meta { font-size: 11px; color: var(--text2); display: flex; gap: 8px; margin-top: 2px; }
.mx-friend-fs {
  font-size: 11px; color: var(--accent); font-weight: 700;
  background: rgba(212,105,138,.12); padding: 2px 8px; border-radius: 6px;
}

/* ══════════════════════════════════════════════════════════════════════
   QUIT HABITS — "Я бросаю"
   ══════════════════════════════════════════════════════════════════════ */

.quit-container{padding:16px 16px 100px;display:flex;flex-direction:column;gap:14px}

/* Empty state */
.quit-empty{padding:40px 20px;text-align:center}
.quit-empty-emoji{font-size:56px;margin-bottom:12px}
.quit-empty-title{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px}
.quit-empty-sub{font-size:14px;color:var(--text2);line-height:1.5;margin-bottom:20px}
.quit-empty-cta{padding:16px 28px;background:linear-gradient(135deg,#ef4444,#f97316);border:none;border-radius:14px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 8px 24px rgba(239,68,68,.3)}

/* Main quit habit card */
.quit-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0;overflow:hidden}
.quit-card-hero{padding:24px 20px;background:linear-gradient(135deg,var(--qh-g1),var(--qh-g2));color:#fff;position:relative}
.quit-card-icon{font-size:36px;margin-bottom:10px}
.quit-card-name{font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;opacity:.9;margin-bottom:6px}
.quit-card-timer{display:flex;gap:12px;margin-top:14px}
.quit-time-block{text-align:center;flex:1}
.quit-time-num{font-size:28px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.quit-time-lbl{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;opacity:.8;margin-top:4px}
.quit-card-menu{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.15);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Money + metric row */
.quit-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border)}
.quit-metric{background:rgba(255,255,255,.03);border-radius:12px;padding:12px;text-align:center}
.quit-metric-val{font-size:18px;font-weight:800;color:#fff;line-height:1.2}
.quit-metric-lbl{font-size:11px;color:var(--text2);margin-top:4px}
.quit-metric-ico{font-size:20px;margin-bottom:4px}

/* Panic button */
.quit-panic-btn{margin:14px 16px;padding:18px;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:16px;color:#fff;font-size:16px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 8px 28px rgba(239,68,68,.4);animation:quit-pulse 2.5s ease-in-out infinite}
@keyframes quit-pulse{0%,100%{box-shadow:0 8px 28px rgba(239,68,68,.4)}50%{box-shadow:0 8px 40px rgba(239,68,68,.7)}}
.quit-panic-btn-ico{font-size:22px}
.quit-panic-btn:active{transform:scale(.97)}

/* Reasons block */
.quit-block{padding:16px 20px;border-top:1px solid var(--border)}
.quit-block-label{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.quit-reasons-list{display:flex;flex-direction:column;gap:6px}
.quit-reason{padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;font-size:13px;color:#fff;display:flex;align-items:center;gap:8px}
.quit-reason::before{content:'•';color:#f97316;font-size:18px;flex-shrink:0}

/* Milestones row */
.quit-milestones-scroll{display:flex;gap:10px;overflow-x:auto;padding:0 20px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.quit-milestones-scroll::-webkit-scrollbar{display:none}
.quit-ms-card{flex-shrink:0;min-width:96px;padding:12px 10px;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:14px;text-align:center;opacity:.5}
.quit-ms-card.reached{background:linear-gradient(135deg,rgba(22,163,74,.15),rgba(16,185,129,.08));border-color:rgba(34,197,94,.4);opacity:1}
.quit-ms-card.next{border-color:#f59e0b;opacity:1}
.quit-ms-emoji{font-size:24px;margin-bottom:4px}
.quit-ms-title{font-size:10px;font-weight:700;color:#fff;line-height:1.2}

/* Health timeline */
.quit-timeline{display:flex;flex-direction:column;gap:8px}
.quit-tl-row{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:rgba(255,255,255,.03);border-radius:10px;border-left:3px solid transparent}
.quit-tl-row.reached{border-left-color:#22c55e;background:rgba(34,197,94,.08)}
.quit-tl-icon{font-size:16px;flex-shrink:0;line-height:1.4}
.quit-tl-title{font-size:12px;font-weight:800;color:#fff;margin-bottom:2px}
.quit-tl-text{font-size:11px;color:var(--text2);line-height:1.4}

/* Cravings history */
.quit-crav-list{display:flex;flex-direction:column;gap:6px}
.quit-crav{padding:10px 12px;background:rgba(255,255,255,.03);border-radius:10px;border-left:3px solid #22c55e}
.quit-crav.gave-in{border-left-color:#ef4444}
.quit-crav-head{display:flex;justify-content:space-between;font-size:11px;color:var(--text2);margin-bottom:4px}
.quit-crav-body{font-size:12px;color:#fff;line-height:1.4}
.quit-crav-advice{font-size:11px;color:var(--text2);margin-top:6px;padding:8px;background:rgba(255,255,255,.04);border-radius:8px;line-height:1.4}

/* ── Bottom-sheet modals (panic / create / relapse) ── */
.quit-panic-modal{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;animation:quit-fade-in .2s ease-out}
@keyframes quit-fade-in{from{opacity:0}to{opacity:1}}
.quit-panic-sheet{width:100%;max-width:520px;background:linear-gradient(180deg,#1a1a20,#0c0c12);border-radius:22px 22px 0 0;max-height:92vh;overflow:hidden;animation:quit-slide-up .28s cubic-bezier(.2,.9,.3,1);display:flex;flex-direction:column;position:relative}
@keyframes quit-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.quit-panic-handle{width:40px;height:5px;background:rgba(255,255,255,.3);border-radius:3px;margin:10px auto 0;flex-shrink:0;cursor:grab}
.quit-panic-body,.quit-create-body,.quit-relapse-body{padding:16px 20px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* Panic steps */
.quit-panic-title{font-size:20px;font-weight:800;color:#fff;margin:12px 0 6px;text-align:center}
.quit-panic-sub{font-size:13px;color:var(--text2);text-align:center;line-height:1.5;margin-bottom:20px}

/* Breathing circle */
.quit-breath{display:flex;flex-direction:column;align-items:center;padding:20px 0}
.quit-breath-circle{width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.3),rgba(59,130,246,.08));border:3px solid #3b82f6;display:flex;align-items:center;justify-content:center;animation:quit-breath 19s ease-in-out infinite;font-size:16px;font-weight:700;color:#fff;text-align:center}
@keyframes quit-breath{
  0%{transform:scale(.7);box-shadow:0 0 0 0 rgba(59,130,246,.3)}
  21%{transform:scale(1);box-shadow:0 0 0 20px rgba(59,130,246,0)}
  58%{transform:scale(1)}
  100%{transform:scale(.7);box-shadow:0 0 0 0 rgba(59,130,246,0)}
}
.quit-breath-phase{margin-top:12px;font-size:14px;font-weight:600;color:#3b82f6;letter-spacing:1px}
.quit-breath-hint{margin-top:8px;font-size:11px;color:var(--text2);text-align:center}

/* Panic form */
.quit-field{margin-bottom:14px}
.quit-field-label{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text2);margin-bottom:8px}
.quit-input{width:100%;padding:12px 14px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;color:#fff;font-size:14px;font-family:inherit;box-sizing:border-box;resize:none}
.quit-input:focus{outline:none;border-color:#3b82f6}
.quit-chips{display:flex;flex-wrap:wrap;gap:6px}
.quit-chip{padding:8px 14px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:20px;color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.quit-chip.active{background:rgba(59,130,246,.15);border-color:#3b82f6;color:#fff}
.quit-intensity{display:flex;gap:4px;margin-top:8px}
.quit-int-btn{flex:1;min-height:36px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.quit-int-btn.active{background:linear-gradient(135deg,#ef4444,#f97316);border-color:transparent;color:#fff}

/* Outcome buttons */
.quit-outcome-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.quit-outcome-btn{padding:16px;border-radius:14px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;border:2px solid transparent}
.quit-outcome-held{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff}
.quit-outcome-held:active{transform:scale(.97)}
.quit-outcome-relapse{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#ef4444}
.quit-outcome-relapse:active{background:rgba(239,68,68,.18)}

/* Reasons preview in panic */
.quit-reasons-reminder{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.3);border-radius:12px;padding:14px;margin:16px 0}
.quit-reasons-reminder-title{font-size:11px;font-weight:800;color:#f59e0b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.quit-reasons-reminder ul{margin:0;padding-left:20px}
.quit-reasons-reminder li{font-size:13px;color:#fff;line-height:1.5;margin-bottom:4px}

/* AI advice */
.quit-ai-advice{padding:14px;background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(139,92,246,.06));border:1px solid rgba(139,92,246,.3);border-radius:14px;margin:16px 0;font-size:13px;color:#fff;line-height:1.5}
.quit-ai-advice-title{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#a78bfa;margin-bottom:6px;display:flex;align-items:center;gap:6px}

/* Create flow — template grid */
.quit-tpl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.quit-tpl-card{padding:16px 12px;background:rgba(255,255,255,.05);border:2px solid var(--border);border-radius:16px;cursor:pointer;text-align:center;transition:all .15s}
.quit-tpl-card:active{transform:scale(.97)}
.quit-tpl-card.active{background:rgba(239,68,68,.1);border-color:#ef4444}
.quit-tpl-emoji{font-size:32px;margin-bottom:6px}
.quit-tpl-name{font-size:12px;font-weight:700;color:#fff}

/* Big red button */
.quit-btn-primary{width:100%;padding:16px;background:linear-gradient(135deg,#ef4444,#dc2626);border:none;border-radius:14px;color:#fff;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 8px 24px rgba(239,68,68,.3)}
.quit-btn-primary:active{transform:scale(.98)}
.quit-btn-primary:disabled{opacity:.5;cursor:default;transform:none}
.quit-btn-secondary{width:100%;padding:14px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:14px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:8px}

/* ── Universal swipe-to-dismiss support for any modal ── */
.mix-swipe-handle{width:40px;height:5px;background:rgba(255,255,255,.3);border-radius:3px;margin:10px auto;flex-shrink:0;cursor:grab;touch-action:none}
.mix-swipe-handle:active{cursor:grabbing}

/* ══════════════════════════════════════════════════════════════
   FINANCE: LIFE-VALUE CALCULATOR TAB («Время = деньги»)
   ══════════════════════════════════════════════════════════════ */

.fin-life-container {
  padding: 16px 16px 100px;
  display: flex; flex-direction: column; gap: 14px;
}

/* Hero */
.fin-life-hero {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background:
    radial-gradient(ellipse at top right, rgba(34,197,94,0.18), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(155,92,232,0.12), transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.fin-life-hero-ico {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(34,197,94,0.3);
}
.fin-life-hero-title {
  color: #fff; font-size: 16px; font-weight: 800; line-height: 1.2;
}
.fin-life-hero-sub {
  color: var(--dim); font-size: 12px; margin-top: 2px;
}

/* Rate card — current hourly rate (click to edit) */
.fin-life-rate-card {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 16px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.fin-life-rate-card:active { transform: scale(0.99); background: rgba(34,197,94,0.12); }
.fin-life-rate-left { flex: 1; min-width: 0; }
.fin-life-rate-lbl {
  font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.fin-life-rate-val {
  font-size: 28px; font-weight: 800; color: #22c55e;
  line-height: 1.1;
}
.fin-life-rate-meta {
  font-size: 12px; color: var(--text2); margin-top: 4px;
}
.fin-life-rate-edit-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Setup placeholder */
.fin-life-setup {
  padding: 22px 18px 18px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 16px;
  text-align: center;
}
.fin-life-setup-ico { font-size: 34px; margin-bottom: 10px; }
.fin-life-setup-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.fin-life-setup-sub { font-size: 13px; color: var(--dim); line-height: 1.45; margin-bottom: 14px; }
.fin-life-btn-primary {
  display: inline-block;
  padding: 11px 22px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 16px rgba(34,197,94,0.3);
}
.fin-life-btn-primary:active { transform: scale(0.98); }

/* Calculator */
.fin-life-calc { display: flex; flex-direction: column; gap: 10px; }
.fin-life-calc-lbl {
  font-size: 13px; color: var(--dim); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-top: 6px;
}
.fin-life-amount-wrap {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 18px;
  transition: border-color 0.2s;
}
.fin-life-amount-wrap:focus-within { border-color: #22c55e; }
.fin-life-amount-input {
  flex: 1; min-width: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-family: var(--font);
  font-size: 28px;
  font-weight: 800;
  padding: 18px 0;
  outline: none;
  letter-spacing: -0.5px;
}
.fin-life-amount-input::placeholder { color: var(--dim); font-weight: 600; }
.fin-life-amount-cur {
  font-size: 22px; font-weight: 700; color: var(--dim);
  margin-left: 8px;
}

/* Quick-amount chips */
.fin-life-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.fin-life-quick-btn {
  padding: 9px 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.fin-life-quick-btn:active { transform: scale(0.96); background: var(--surface); }

/* Result */
.fin-life-result {
  margin-top: 6px;
  padding: 20px 18px;
  background: linear-gradient(135deg, rgba(155,92,232,0.08), rgba(212,105,138,0.04));
  border: 1px solid rgba(155,92,232,0.25);
  border-radius: 18px;
  text-align: center;
}
.fin-life-result-big {
  font-size: 38px; font-weight: 900;
  background: linear-gradient(135deg, #fff, #9B5CE8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.05;
  letter-spacing: -1px;
}
.fin-life-result-sub {
  color: var(--dim);
  font-size: 12px;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fin-life-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(155,92,232,0.2);
}
.fin-life-bd-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.fin-life-bd-val { font-size: 16px; font-weight: 800; color: #fff; }
.fin-life-bd-lbl { font-size: 10px; color: var(--dim); text-align: center; }

/* Tip */
.fin-life-tip {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: 12px;
  color: #fbbf24;
  font-size: 12px;
  line-height: 1.5;
}
.fin-life-tip .mx-ico { flex-shrink: 0; margin-top: 2px; color: #fbbf24; }

/* Rate-setup modal extras */
.hab-modal-sub {
  font-size: 12px; color: var(--dim); margin: -4px 0 10px;
}
.fin-life-preview {
  margin: 14px 0;
  padding: 14px 16px;
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.25);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.fin-life-preview-lbl { font-size: 13px; color: var(--text2); }
.fin-life-preview-val { font-size: 22px; font-weight: 800; color: #22c55e; }
.fin-life-override-toggle {
  margin: 8px 0 6px;
  font-size: 13px; color: var(--text2);
}
.fin-life-override-toggle label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   UNIVERSAL CHAT-BUBBLE MARKDOWN FIT RULES
   Prevents AI-generated tables / wide code blocks / images from
   stretching chat bubbles beyond the screen. Applies to every
   chat bubble class across bots.
   `.msg-bubble` already has its own rules earlier — kept.
   ══════════════════════════════════════════════════════════════ */

/* Bubbles must allow children to shrink inside flex parent (otherwise table can push width) */
.nut-msg, .hab-ai-msg, .ege-msg-row, .trv-chat-row, .mkt-chat-row, .chef-chat-row, .vid-chat-row,
.msg-bubble, .nut-msg-bubble, .hab-ai-bubble, .ege-msg, .ast-msg-bubble,
.trv-chat-msg, .trv-inline-msg, .vid-chat-msg, .mkt-chat-msg, .chef-chat-msg {
  min-width: 0;
}

/* Tables → strictly constrained, horizontally scrollable inside the bubble */
.msg-bubble table,
.nut-msg-bubble table,
.hab-ai-bubble table,
.ege-msg table,
.ast-msg-bubble table,
.trv-chat-msg table,
.trv-inline-msg table,
.vid-chat-msg table,
.mkt-chat-msg table,
.chef-chat-msg table {
  display: block;
  width: 100%;
  max-width: min(100%, calc(100vw - 64px));   /* hard viewport cap (65px = safe area for bubble padding) */
  overflow-x: auto;
  overflow-y: hidden;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 11px;                             /* tighter — readable when scrolled */
  line-height: 1.35;
  -webkit-overflow-scrolling: touch;
  /* Subtle scroll-indicator shadow on right edge to hint scrollability */
  background:
    linear-gradient(to right, transparent, transparent 90%, rgba(0,0,0,0.25)) no-repeat right center / 20px 100%;
}
.msg-bubble th,       .msg-bubble td,
.nut-msg-bubble th,   .nut-msg-bubble td,
.hab-ai-bubble th,    .hab-ai-bubble td,
.ege-msg th,          .ege-msg td,
.ast-msg-bubble th,   .ast-msg-bubble td,
.trv-chat-msg th,     .trv-chat-msg td,
.trv-inline-msg th,   .trv-inline-msg td,
.vid-chat-msg th,     .vid-chat-msg td,
.mkt-chat-msg th,     .mkt-chat-msg td,
.chef-chat-msg th,    .chef-chat-msg td {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 5px 8px;                            /* tighter cells */
  text-align: left;
  white-space: nowrap;
  max-width: 180px;                            /* never let one cell get insane */
  overflow: hidden;
  text-overflow: ellipsis;
}
.nut-msg-bubble th,
.hab-ai-bubble th,
.ege-msg th,
.ast-msg-bubble th,
.trv-chat-msg th,
.trv-inline-msg th,
.vid-chat-msg th,
.mkt-chat-msg th,
.chef-chat-msg th {
  background: rgba(0,0,0,0.25);
  font-weight: 700;
}
.nut-msg-bubble tr:nth-child(even) td,
.hab-ai-bubble tr:nth-child(even) td,
.ege-msg tr:nth-child(even) td,
.ast-msg-bubble tr:nth-child(even) td,
.trv-chat-msg tr:nth-child(even) td,
.trv-inline-msg tr:nth-child(even) td,
.vid-chat-msg tr:nth-child(even) td,
.mkt-chat-msg tr:nth-child(even) td,
.chef-chat-msg tr:nth-child(even) td {
  background: rgba(255,255,255,0.03);
}

/* Code blocks + inline code — don't overflow the bubble */
.msg-bubble pre, .msg-bubble code,
.nut-msg-bubble pre, .nut-msg-bubble code,
.hab-ai-bubble pre, .hab-ai-bubble code,
.ege-msg pre, .ege-msg code,
.ast-msg-bubble pre, .ast-msg-bubble code,
.trv-chat-msg pre, .trv-chat-msg code,
.trv-inline-msg pre, .trv-inline-msg code,
.vid-chat-msg pre, .vid-chat-msg code,
.mkt-chat-msg pre, .mkt-chat-msg code,
.chef-chat-msg pre, .chef-chat-msg code {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
}
.msg-bubble pre,
.nut-msg-bubble pre,
.hab-ai-bubble pre,
.ege-msg pre,
.ast-msg-bubble pre,
.trv-chat-msg pre,
.trv-inline-msg pre,
.vid-chat-msg pre,
.mkt-chat-msg pre,
.chef-chat-msg pre {
  background: rgba(0,0,0,0.3);
  padding: 10px 12px;
  border-radius: 10px;
  margin: 6px 0;
  white-space: pre;                  /* preserve formatting but allow h-scroll */
}

/* Images (rare in chat, but safety) */
.msg-bubble img,
.nut-msg-bubble img,
.hab-ai-bubble img,
.ege-msg img,
.ast-msg-bubble img,
.trv-chat-msg img,
.trv-inline-msg img,
.vid-chat-msg img,
.mkt-chat-msg img,
.chef-chat-msg img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Long URLs / words shouldn't push bubble wider than screen */
.nut-msg-bubble, .hab-ai-bubble, .ege-msg, .ast-msg-bubble,
.trv-chat-msg, .trv-inline-msg, .vid-chat-msg,
.mkt-chat-msg, .chef-chat-msg {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ─── Fin Life: validation hint + formula toggle (2026-04-26) ─── */
.fin-life-hint {
  margin: -6px 2px 12px 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  padding: 0;
  transition: color 0.18s ease;
}
.fin-life-hint.err  { color: #f97316; }   /* amber, не агрессивный */
.fin-life-hint.warn { color: #fbbf24; }   /* мягкий жёлтый */

.fin-life-input-err {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25);
}

.fin-life-formula-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 4px 0 8px 0;
}
.fin-life-formula-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  outline: none;
}
.fin-life-formula-btn:hover { background: rgba(255, 255, 255, 0.06); }
.fin-life-formula-btn:active { transform: scale(0.98); }
.fin-life-formula-btn:focus-visible { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.6); }
.fin-life-formula-btn.active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.06));
  border-color: rgba(34, 197, 94, 0.42);
}
.fin-life-formula-btn-title {
  color: var(--text-1, #e6e6e6);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}
.fin-life-formula-btn.active .fin-life-formula-btn-title { color: #22c55e; }
.fin-life-formula-btn-sub {
  color: var(--text-3, rgba(255,255,255,0.55));
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}
.fin-life-formula-explain {
  font-size: 12px;
  color: var(--text-3, rgba(255,255,255,0.55));
  margin: 0 2px 14px 2px;
  line-height: 1.4;
}