@font-face {
  font-family: 'Vazirmatn';
  src: url('./assets/fonts/Vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
  font-family: 'Manrope';
  src: url('./assets/fonts/Manrope-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #050706;
  --panel: #101511;
  --panel-2: #171f19;
  --text: #f7fbf8;
  --muted: #9aaca2;
  --green: #3dff9c;
  --green-2: #06c875;
  --blue: #67c4ff;
  --lime: #d7ff55;
  --line: rgba(255,255,255,.10);
  --glass: rgba(255,255,255,.052);
  --shadow: 0 22px 58px rgba(0,0,0,.34);
  font-family: Manrope, Vazirmatn, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, ui-sans-serif, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}
* { box-sizing: border-box; min-width: 0; }
[hidden] { display: none !important; }
html { width: 100%; max-width: 100%; overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; margin: 0; min-height: 100vh; min-height: 100dvh; background: radial-gradient(circle at 50% -18%, rgba(61,255,156,.15), transparent 34%), radial-gradient(circle at 0% 16%, rgba(103,196,255,.08), transparent 32%), var(--bg); color: var(--text); overflow-x: clip; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
.skip-link { position: fixed; z-index: 3000; inset-inline-start: 14px; top: -80px; padding: 10px 14px; border-radius: 12px; color: #03110a; background: var(--green); font-weight: 900; text-decoration: none; transition: top .18s ease; }
.skip-link:focus { top: max(12px, env(safe-area-inset-top)); }
:where(button, a, input, textarea, select, summary):focus-visible { outline: 3px solid rgba(103,196,255,.82); outline-offset: 3px; }
.auth-gate { position: fixed; z-index: 2000; inset: 0; overflow-y: auto; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 4%, rgba(61,255,156,.18), transparent 34%), rgba(5,7,6,.98); }
.auth-card { width: min(100%, 430px); display: grid; gap: 13px; padding: 24px 20px; border: 1px solid rgba(61,255,156,.20); border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), var(--panel); box-shadow: 0 28px 70px rgba(0,0,0,.52); text-align: center; }
.auth-card > img { width: 94px; height: 94px; margin: 0 auto -3px; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0,0,0,.36)); }
.auth-eyebrow { justify-self: center; padding: 5px 10px; border: 1px solid rgba(61,255,156,.22); border-radius: 999px; color: var(--green); background: rgba(61,255,156,.08); font-size: 11px; font-weight: 950; letter-spacing: .12em; }
.auth-card h1 { margin: 0; font-size: 25px; }
.auth-card > p, .identity-binding p { margin: 0; color: var(--muted); line-height: 1.8; font-size: 13px; }
.google-login-button { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 17px; color: #17202a; background: #fff; font-weight: 950; }
.google-login-button span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #4285f4; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.10); font-family: Arial, sans-serif; }
.google-login-button:disabled { opacity: .48; cursor: not-allowed; }
.auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: var(--line); }
.phone-login-form { display: grid; gap: 10px; text-align: start; }
.phone-login-form label { color: #dbe9e1; font-size: 12px; font-weight: 900; }
.phone-entry { display: grid; grid-template-columns: auto 1fr; align-items: center; border: 1px solid var(--line); border-radius: 17px; background: rgba(5,8,7,.72); overflow: hidden; }
.phone-entry > span { padding: 0 12px; direction: ltr; color: #d7e5dd; border-inline-end: 1px solid var(--line); font-size: 13px; }
.phone-entry input, .otp-form > input, .identity-inline-phone input { width: 100%; min-height: 52px; padding: 12px 14px; border: 0; outline: 0; color: var(--text); background: transparent; direction: ltr; text-align: center; letter-spacing: .08em; }
.phone-login-form .primary-cta { width: 100%; min-height: 48px; }
.auth-text-button { border: 0; color: var(--green); background: transparent; font-size: 12px; }
.auth-status { min-height: 21px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.auth-status.error { color: #ff8f8f; }.auth-status.success { color: var(--green); }
.phone-bidi, input[inputmode="numeric"], input[autocomplete="tel"], input[autocomplete="one-time-code"] { direction: ltr !important; unicode-bidi: isolate; text-align: center; font-family: Manrope, ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.auth-legal { color: #718078; font-size: 10px; line-height: 1.7; }
.identity-binding { margin: 12px 0; padding: 16px; display: grid; gap: 12px; border: 1px solid rgba(61,255,156,.18); border-radius: 22px; background: linear-gradient(180deg, rgba(61,255,156,.055), rgba(255,255,255,.018)), var(--panel); }
.identity-binding h3 { margin: 0 0 4px; font-size: 17px; }
.identity-binding-list { display: grid; gap: 8px; }
.identity-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 12px; border-radius: 15px; background: rgba(255,255,255,.045); }
.identity-row b { font-size: 13px; }.identity-row small { color: var(--green); }
.identity-row > div { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.identity-row small.phone-bidi { padding: 2px 7px; border-radius: 8px; background: rgba(61,255,156,.10); font-size: 12px; }
.google-login-button.compact { min-height: 46px; }
.identity-phone-button { width: 100%; min-height: 44px; }
.profile-account-actions { display: grid; gap: 9px; margin: 12px 0; }
.logout-button { width: 100%; min-height: 46px; border-color: rgba(255,105,105,.35); color: #ffadad; background: rgba(255,80,80,.08); }
.profile-summary-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.identity-inline-phone { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.identity-inline-phone input { border: 1px solid var(--line); border-radius: 14px; background: rgba(5,8,7,.72); }
.identity-inline-phone button { border: 0; border-radius: 14px; padding: 8px 13px; color: #03110a; background: var(--green); font-weight: 900; }
.pwa-install-banner { position: fixed; z-index: 1000; inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); width: min(calc(100% - 24px), 620px); margin-inline: auto; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto 34px; align-items: center; gap: 10px; padding: 10px; border: 1px solid rgba(61,255,156,.30); border-radius: 20px; color: var(--text); background: rgba(16,21,17,.96); box-shadow: 0 18px 48px rgba(0,0,0,.48); backdrop-filter: blur(18px); }
.pwa-install-banner > img { width: 48px; height: 48px; border-radius: 14px; }
.pwa-install-banner > div { display: grid; gap: 2px; }
.pwa-install-banner b { font-size: 14px; }
.pwa-install-banner small { color: var(--muted); font-size: 11px; line-height: 1.55; }
.pwa-install-action { min-width: 64px; min-height: 42px; padding: 8px 12px; border: 0; border-radius: 13px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); font-weight: 950; }
.pwa-install-close { width: 34px; height: 42px; border: 0; color: var(--muted); background: transparent; font-size: 25px; }
@media (max-width: 420px) { .pwa-install-banner { grid-template-columns: 42px minmax(0, 1fr) auto 30px; gap: 7px; } .pwa-install-banner > img { width: 42px; height: 42px; } .pwa-install-action { min-width: 56px; padding-inline: 9px; } }
[dir="rtl"] body { direction: rtl; text-align: right; }
[dir="ltr"] body { direction: ltr; text-align: left; }
button, a, input, textarea, select { font: inherit; }
input, textarea, select { max-width: 100%; font-size: 16px !important; line-height: 1.6; touch-action: manipulation; direction: inherit; text-align: inherit; unicode-bidi: plaintext; }
textarea { resize: vertical; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
.app-shell { width: min(100%, 680px); max-width: 100%; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 14px calc(104px + env(safe-area-inset-bottom)); overflow-x: clip; }
.topbar { --topbar-control-size: 44px; position: sticky; top: 0; z-index: 20; min-height: 58px; display: grid; grid-template-columns: auto 1fr auto auto auto; grid-template-areas: "profile spacer bell coins cart"; align-items: center; gap: 8px; padding: 4px 0 10px; background: linear-gradient(180deg, rgba(7,10,8,.96), rgba(7,10,8,.70), transparent); backdrop-filter: blur(14px); }
.profile-tools { grid-area: profile; display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
.language-switch { width: calc(var(--topbar-control-size) * 2); height: var(--topbar-control-size); display: inline-grid; grid-template-columns: repeat(2, var(--topbar-control-size)); align-items: center; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: rgba(22,28,24,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); opacity: .88; transition: opacity .18s ease, border-color .18s ease, background-color .18s ease; }
.language-switch:hover, .language-switch:focus-within { opacity: 1; border-color: rgba(61,255,156,.24); }
.language-switch button { width: var(--topbar-control-size); height: var(--topbar-control-size); padding: 0; border: 0; border-radius: 999px; color: #90a198; background: transparent; font-family: Manrope, Arial, ui-sans-serif, sans-serif; font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: .01em; cursor: pointer; }
.language-switch button[aria-pressed="true"] { color: #dfffea; background: rgba(61,255,156,.14); box-shadow: inset 0 0 0 1px rgba(61,255,156,.16); }
/* No per-direction override: grid areas follow the writing direction, so the bar mirrors
   itself — profile/lang at the inline start (right in RTL), coins and cart at the inline end. */
.icon-btn, .cart-btn, .profile-pill, .top-coin-pill, .context-help-button { border: 1px solid var(--line); color: var(--text); background: rgba(22,28,24,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.icon-btn { position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: var(--topbar-control-size); height: var(--topbar-control-size); display: none; place-items: center; border-radius: 16px; padding: 0; font-size: 24px; }
/* the back control owns the inline start edge, so the identity cluster steps aside in subviews */
.topbar.subview .profile-tools { margin-inline-start: calc(var(--topbar-control-size) + 12px); }
.icon-btn { justify-self: end; }
[dir="rtl"] .icon-btn { justify-self: start; }
[dir="ltr"] .icon-btn { justify-self: end; }
.profile-pill { width: var(--topbar-control-size); min-width: var(--topbar-control-size); max-width: var(--topbar-control-size); height: var(--topbar-control-size); display: inline-grid; place-items: center; border-radius: 999px; padding: 4px; font-weight: 950; overflow: hidden; }
[dir="rtl"] .profile-pill { justify-self: end; direction: rtl; }
[dir="ltr"] .profile-pill { justify-self: start; direction: ltr; }
.context-help-button { width: var(--topbar-control-size); min-width: var(--topbar-control-size); height: var(--topbar-control-size); display: grid; place-items: center; border-radius: 16px; padding: 0; color: #c9d8d0; font-family: Manrope, Arial, sans-serif; font-size: 19px; font-weight: 800; line-height: 1; opacity: .88; }
.context-help-button:hover, .context-help-button:focus-visible { opacity: 1; color: var(--green); border-color: rgba(61,255,156,.32); }
.onboarding-replay-button { width: 100%; min-height: 47px; margin: 10px 0 2px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.onboarding-replay-button > span { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: rgba(61,255,156,.1); font-family: Arial, sans-serif; }
.top-coin-pill { grid-area: coins; height: var(--topbar-control-size); min-width: 72px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 950; line-height: 1; color: #dcffe9; }
[dir="rtl"] .top-coin-pill { justify-self: start; }
[dir="ltr"] .top-coin-pill { justify-self: end; }
.top-coin-icon { width: 24px; height: 24px; filter: drop-shadow(0 5px 10px rgba(61,255,156,.20)); }
.cart-btn { grid-area: cart; }
[dir="rtl"] .cart-btn { justify-self: start; }
[dir="ltr"] .cart-btn { justify-self: end; }
.topbar.subview .cart-btn { display: none; }
.topbar.subview .icon-btn.visible { display: grid; }
.profile-pill img, .profile-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: linear-gradient(135deg, var(--green), var(--blue)); color: #04100b; box-shadow: 0 8px 18px rgba(61,255,156,.18); }
.profile-copy { display: none; }
.cart-btn { position: relative; width: var(--topbar-control-size); height: var(--topbar-control-size); display: grid; place-items: center; border-radius: 16px; padding: 0; font-size: 21px; }
.cart-btn .cart-icon { position: static; width: 23px; height: 23px; display: grid; place-items: center; color: #e9fff2; background: transparent; border-radius: 0; min-width: 0; }
.cart-btn .cart-icon .app-icon { width: 22px; height: 22px; }
.cart-btn #cartCount { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 19px; height: 19px; display: grid; place-items: center; border-radius: 999px; color: #03110a; background: var(--green); font-size: 11px; font-weight: 950; }
.view { display: none; animation: rise .22s ease-out; }
.view.active { display: block; }
.hero { position: relative; min-height: 288px; overflow: hidden; border-radius: 28px; padding: 14px 14px 16px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; background: linear-gradient(180deg, rgba(20,28,23,.92), rgba(10,14,12,.96)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero::before { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 999px; background: radial-gradient(circle, rgba(61,255,156,.26), transparent 62%); filter: blur(4px); }
.emoji-field { position: absolute; inset: 0; pointer-events: none; }
.emoji-field span { position: absolute; font-size: 24px; opacity: .72; filter: drop-shadow(0 8px 16px rgba(0,0,0,.32)); animation: drift 4.5s ease-in-out infinite; }
.parsis-coin-icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.18em; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 3px 7px rgba(0,0,0,.22)); }
.coin-cost-icon { width: 17px; height: 17px; vertical-align: middle; filter: drop-shadow(0 2px 4px rgba(3,17,10,.20)); }
.coin-inline-icon { width: 23px; height: 23px; margin-inline-end: 4px; }
.coin-title-icon { width: 46px; height: 46px; vertical-align: -0.42em; margin-inline-end: 4px; filter: drop-shadow(0 10px 18px rgba(61,255,156,.24)); }
.coin-hero-icon { width: 34px; height: 34px; }
.coin-modal-icon { width: 54px; height: 54px; filter: drop-shadow(0 12px 20px rgba(61,255,156,.24)); }
.coin-floating-icon { width: 28px; height: 28px; }
.coin-gift-icon { width: 64px; height: 64px; filter: drop-shadow(0 16px 26px rgba(61,255,156,.32)); }
.emoji-field span:nth-child(1) { top: 16%; left: 20%; }
.emoji-field span:nth-child(2) { top: 20%; right: 18%; animation-delay: .5s; }
.emoji-field span:nth-child(3) { top: 44%; left: 12%; animation-delay: 1s; }
.emoji-field span:nth-child(4) { top: 48%; right: 12%; animation-delay: 1.5s; }
.emoji-field span:nth-child(5) { top: 10%; right: 48%; animation-delay: 2s; }
.hero-avatar { position: relative; z-index: 1; width: 108px; height: auto; object-fit: contain; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 20px 28px rgba(0,0,0,.40)); animation: float 3.2s ease-in-out infinite; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: inline-flex; margin-bottom: 8px; color: var(--green); font-size: 12px; font-weight: 950; letter-spacing: 0; background: rgba(61,255,156,.10); border: 1px solid rgba(61,255,156,.18); border-radius: 999px; padding: 7px 11px; }
.hero h1 { margin: 0 0 5px; font-size: clamp(22px, 7vw, 29px); letter-spacing: 0; line-height: 1.3; }
.hero p, .page-head p, .support-card p, .referral-card p { margin: 0; color: #c7d4cd; line-height: 1.75; }
.hero p { max-width: 360px; margin: 0 auto 12px; font-size: 13px; line-height: 1.65; }
.primary-cta, .buy-btn, .chat-input button, .prompt-search button, .service-card button { border: 0; border-radius: 999px; color: #03110a; font-weight: 950; background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 16px 34px rgba(7,200,117,.18); }
.primary-cta { width: min(100%, 330px); padding: 13px 18px; font-size: 15px; }
.section { margin-top: 18px; }
.section-title { display: flex; align-items: end; justify-content: space-between; margin: 0 4px 10px; gap: 10px; text-align: start; }
.section-title h2 { margin: 0; font-size: 19px; }
.account-section .section-title { margin-bottom: 7px; }
.account-section .section-title h2 { font-size: 15px; color: #d7e7df; font-weight: 850; }
.section-title span { color: var(--muted); font-size: 13px; }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.tool-card, .ai-panel, .prompt-card, .plan-card, .coin-wallet-card, .account-status-card, .usage-card, .mini-card, .service-card, .support-card, .referral-card, .guide-chat, .page-head, .image-studio-hero, .image-generator-card, .image-upload-card, .image-result-card { background: linear-gradient(180deg, rgba(255,255,255,.047), rgba(255,255,255,.018)), var(--panel); border-radius: 22px; border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 14px 32px rgba(0,0,0,.18); }
.tool-card { position: relative; min-height: 138px; padding: 16px 10px; display: grid; place-items: center; gap: 8px; text-align: center; color: var(--text); transition: transform .16s ease, border-color .16s ease; }
.tool-card:active { transform: scale(.98); border-color: rgba(61,255,156,.36); }
.icon-bubble { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 21px; font-size: 28px; background: radial-gradient(circle at 30% 20%, rgba(61,255,156,.25), rgba(57,170,252,.13)); box-shadow: 0 0 0 9px rgba(61,255,156,.06); }
.tool-card b { font-size: 15px; }
.tool-card small { color: var(--green); font-weight: 850; }
.tool-card-disabled { opacity: .55; filter: grayscale(.75); cursor: not-allowed; }
.tool-card-disabled:active { transform: none; border-color: var(--line); }
.tool-card-badge { position: absolute; top: 10px; inset-inline-start: 10px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 950; font-style: normal; color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); }
.tool-card-badge.muted { color: #d2d9d5; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.usage-grid { display: block; }
.account-status-card { padding: 15px; display: grid; gap: 13px; border-color: rgba(61,255,156,.24); background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.13), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.047), rgba(255,255,255,.018)), var(--panel); }
.account-status-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.account-plan-main { min-width: 0; display: flex; align-items: center; gap: 10px; }
.account-plan-emoji { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px; border-radius: 17px; font-size: 23px; background: radial-gradient(circle at 30% 20%, rgba(61,255,156,.25), rgba(57,170,252,.12)); box-shadow: 0 0 0 7px rgba(61,255,156,.045); }
.account-plan-main b { display: block; font-size: 18px; line-height: 1.3; }
.account-plan-main small { display: block; margin-top: 3px; color: #c7d4cd; font-size: 12px; font-weight: 850; line-height: 1.65; }
.account-balance-box { flex: 0 0 auto; min-width: 104px; display: grid; place-items: center; gap: 1px; color: #06130d; background: linear-gradient(135deg, var(--green), var(--lime)); border-radius: 18px; padding: 9px 12px; box-shadow: 0 10px 22px rgba(7,200,117,.18); }
.account-balance-box strong { font-size: 24px; line-height: 1.05; font-weight: 950; letter-spacing: -.01em; }
.account-balance-icon { width: 24px; height: 24px; margin-bottom: 1px; filter: drop-shadow(0 4px 7px rgba(3,17,10,.18)); }
.account-balance-box span { font-size: 11px; font-weight: 950; white-space: nowrap; }
.account-shop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 42px; border: 0; border-radius: 15px; padding: 11px 14px; font-size: 14px; font-weight: 950; line-height: 1.2; color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 8px 20px rgba(7, 200, 117, 0.26); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.account-shop-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(7, 200, 117, 0.38); }
.account-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.usage-card { padding: 13px; display: grid; gap: 10px; background: rgba(5,8,7,.52); border-radius: 17px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.055); border: 0; }
.usage-card div:first-child { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.usage-card span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.meter { height: 7px; background: #0a0e0c; border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--blue)); }
.page-head { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; padding: 16px; margin-bottom: 12px; }
.page-head > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 19px; font-size: 28px; background: rgba(61,255,156,.12); }
.page-head h2 { margin: 0 0 4px; font-size: 22px; }
.analyzer-panel, .analyzer-confirmation { padding: 22px; display: grid; gap: 14px; }
.analyzer-steps { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 18px; padding: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 18px; }
.analyzer-step { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.analyzer-step-num { width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; font-size: 15px; font-weight: 950; color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); }
.analyzer-step-body b { display: block; font-size: 13px; margin-bottom: 2px; }
.analyzer-step-body p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.analyzer-step-arrow { display: grid; place-items: center; flex-shrink: 0; padding-top: 6px; font-size: 18px; color: var(--green); font-weight: 800; }
.analyzer-info { margin-bottom: 10px; }
.analyzer-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.analyzer-info-item { padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 18px; }
.analyzer-info-item b { font-size: 14px; margin-bottom: 3px; display: block; }
.analyzer-info-item p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.analyzer-info-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 19px; background: rgba(61,255,156,.10); flex-shrink: 0; }
.analyzer-type-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.analyzer-type-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.04); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 800; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.analyzer-type-chip:hover { background: rgba(255,255,255,.08); color: var(--text); }
.analyzer-type-chip.active { color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); border-color: transparent; box-shadow: 0 4px 14px rgba(7, 200, 117, 0.25); }
.platform-icon { width: 20px; height: 20px; flex-shrink: 0; }
.analyzer-type-chip.active .platform-icon { color: #03110a; }
.analyzer-url-wrapper { position: relative; }
.analyzer-url-wrapper input { width: 100%; border: 1px solid var(--line); outline: 0; color: var(--text); background: rgba(5,8,7,.74); border-radius: 18px; padding: 14px; padding-inline-start: 48px; }
.analyzer-url-wrapper input:disabled { opacity: .45; cursor: not-allowed; }
.analyzer-url-status { position: absolute; top: 50%; inset-inline-start: 14px; transform: translateY(-50%); font-size: 20px; pointer-events: none; }
.analyzer-url-status.ok { font-size: 18px; color: var(--green); }
.analyzer-url-hint { font-size: 12px; padding: 0 4px; color: var(--muted); }
.analyzer-url-hint.ok { color: var(--green); }
.analyzer-url-hint.bad { color: #ff6b6b; }
.analyzer-url-hint.loading { color: var(--lime); font-style: italic; animation: hintPulse 1.2s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.analyzer-panel input.valid { border-color: var(--green); box-shadow: 0 0 0 2px rgba(61,255,156,.25); }
.analyzer-panel input.invalid { border-color: #ff6b6b; box-shadow: 0 0 0 2px rgba(255,107,107,.25); }
.analyzer-panel select { width: 100%; border: 1px solid var(--line); outline: 0; color: var(--text); background: rgba(5,8,7,.74); border-radius: 18px; padding: 14px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393a39a' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 16px center; padding-inline-end: 38px; }
[dir="ltr"] .analyzer-panel select { background-position: right 16px center; padding-inline-start: 14px; padding-inline-end: 38px; }
.analyzer-panel .field-label { margin: 5px 2px 2px; }
.analyzer-submit-wrap { display: grid; place-items: center; margin-top: 8px; }
.analyzer-submit-wrap .primary-cta { width: auto; min-width: 220px; }
.primary-cta[disabled] { opacity: .45; cursor: not-allowed; }
.platform-choice-card { grid-column: 1 / -1; padding: 20px 16px; text-align: center; }
.platform-choice-card h2 { margin: 8px 0 6px; font-size: 22px; line-height: 1.35; }
.platform-choice-card p { max-width: 320px; margin: 0 auto 14px; font-size: 13px; line-height: 1.8; }
.platform-choice-list { display: grid; gap: 10px; margin-top: 12px; }
.platform-choice-btn { width: 100%; display: grid; gap: 3px; text-align: right; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 13px 15px; color: #eefcf5; background: rgba(255,255,255,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.platform-choice-btn.primary { color: #03110a; border-color: transparent; background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 14px 30px rgba(7,200,117,.18); }
.platform-choice-btn b { font-size: 15px; font-weight: 950; }
.platform-choice-btn small { color: rgba(238,252,245,.72); font-size: 12px; line-height: 1.55; }
.platform-choice-btn.primary small { color: rgba(3,17,10,.72); }
.platform-choice-btn:active { transform: scale(.985); }
.platform-retry-btn { margin: 12px auto 0; width: 100%; min-height: 42px; border-radius: 16px; }
.analyzer-confirmation { text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.047), rgba(255,255,255,.018)), var(--panel); border-radius: 22px; border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 14px 32px rgba(0,0,0,.18); }
.analyzer-confirmation-icon { font-size: 42px; margin-bottom: 4px; }
.analyzer-confirmation h3 { margin: 0 0 8px; font-size: 20px; font-weight: 900; }
.analyzer-confirmation p { font-size: 15px; line-height: 1.8; margin: 0 0 14px; }
.analyzer-confirmation-tips { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.analyzer-confirmation-tips span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-size: 22px; background: rgba(61,255,156,.10); }
.analyzer-confirmation .ghost-btn { margin-inline: auto; }
#view-guide { min-height: calc(100dvh - 116px); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 10px; }
#view-guide.active { display: grid; }
.chat-hero { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 26px; background: radial-gradient(circle at 12% 0%, rgba(61,255,156,.16), transparent 40%), linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow: 0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08); }
.chat-avatar-wrap { position: relative; width: 58px; height: 58px; }
.chat-avatar { width: 58px; height: 58px; border-radius: 22px; object-fit: cover; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 26px rgba(0,0,0,.28); }
.chat-status-dot { position: absolute; left: -1px; bottom: 2px; width: 15px; height: 15px; border-radius: 999px; background: var(--green); border: 3px solid #07100b; box-shadow: 0 0 0 5px rgba(61,255,156,.12); }
.chat-hero-copy { min-width: 0; }
.chat-hero-copy h2 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 950; letter-spacing: -.02em; }
.chat-hero-copy p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.guide-chat { position: relative; min-height: 0; overflow-y: auto; padding: 16px 9px 116px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: radial-gradient(circle at 80% 0%, rgba(61,255,156,.09), transparent 35%), linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.guide-chat::-webkit-scrollbar { width: 0; height: 0; }
.chat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 94%; animation: messageIn .18s ease-out; }
.chat-row.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-mini-avatar { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 13px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); font-size: 10px; font-weight: 950; box-shadow: 0 10px 24px rgba(0,0,0,.22); }
.chat-row.user .chat-mini-avatar { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.12); }
.chat-message-stack { display: grid; gap: 4px; min-width: 0; }
.chat-bubble { max-width: min(100%, 330px); padding: 12px 14px; border-radius: 20px 20px 20px 8px; line-height: 1.85; font-size: 14px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); color: #e7f3ec; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.chat-bubble strong, .chat-welcome-card strong { color: #f2fff8; font-weight: 950; padding: 0 .18em; border-radius: .45em; background: linear-gradient(180deg, rgba(61,255,156,.13), rgba(61,255,156,.035)); }
.chat-bubble.user { border-radius: 20px 20px 8px 20px; color: #03110a; border: 0; background: linear-gradient(135deg, var(--green), var(--lime)); font-weight: 800; }
.chat-bubble.error { border-color: rgba(255,112,112,.28); background: rgba(255,112,112,.11); color: #ffd6d6; }
.chat-time { color: rgba(221,236,228,.48); font-size: 10px; font-weight: 800; padding-inline: 4px; }
.chat-row.user .chat-time { text-align: left; color: rgba(94,255,171,.68); }
.chat-welcome-card { margin: 4px auto 2px; width: min(100%, 300px); display: grid; place-items: center; gap: 6px; text-align: center; padding: 14px 13px; border: 1px solid rgba(61,255,156,.16); border-radius: 22px; background: radial-gradient(circle at 50% 0%, rgba(61,255,156,.14), transparent 42%), rgba(255,255,255,.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 30px rgba(0,0,0,.16); }
.chat-welcome-card img { width: 46px; height: 46px; border-radius: 17px; object-fit: cover; }
.chat-welcome-card h3 { margin: 0; font-size: 15px; font-weight: 950; }
.chat-welcome-card p { margin: 0; color: #cbdad2; font-size: 12px; line-height: 1.75; }
@keyframes messageIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.quick-chips, .chip-row { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding: 8px 1px; scrollbar-width: none; scroll-snap-type: x proximity; }
.quick-chips::-webkit-scrollbar, .chip-row::-webkit-scrollbar { display: none; }
.quick-chips.sub { margin-top: -5px; padding-top: 1px; padding-bottom: 7px; opacity: .98; }
.quick-chips button, .chip-row button { flex: 0 0 auto; white-space: nowrap; border: 1px solid rgba(255,255,255,.10); color: var(--text); background: rgba(255,255,255,.055); border-radius: 999px; padding: 9px 13px; font-size: 12px; font-weight: 900; scroll-snap-align: start; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.quick-chips button:active, .chip-row button:active { transform: scale(.97); }
.quick-chips button.active, .chip-row button.active { color: #03110a; border-color: transparent; background: linear-gradient(135deg, var(--green), var(--blue)); }
.chat-input, .prompt-search, .ai-actions { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: end; position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 8; background: linear-gradient(180deg, rgba(7,10,8,0), rgba(7,10,8,.92) 24%, rgba(7,10,8,.98)); padding-top: 10px; padding-bottom: 2px; }
.chat-input { padding-inline: 2px; }
.chat-input input, .chat-input textarea, .prompt-search input, .bio-questions input, .bio-current-section input, .reels-control-grid select, .reels-control-grid input, .tool-topic-input, textarea, select { width: 100%; border: 1px solid var(--line); outline: 0; color: var(--text); background: rgba(5,8,7,.78); border-radius: 20px; padding: 13px 14px; resize: vertical; }
.chat-input textarea { min-height: 50px; max-height: 116px; resize: none; line-height: 1.65; font-family: inherit; }
.tool-topic-input { min-height: 54px; font-size: 15px; line-height: 1.45; margin-bottom: 2px; }
.chat-input button, .prompt-search button, .buy-btn, .service-card button { padding: 13px 16px; }
.chat-input button { width: 50px; height: 50px; padding: 0; display: grid; place-items: center; font-size: 0; }
.chat-input button .app-icon { width: 22px; height: 22px; color: #03110a; transform: scaleX(-1); }
.chat-input button:disabled { opacity: .55; filter: grayscale(.2); }
.engine-chip { margin-top: 6px; display: inline-flex; align-items: center; width: fit-content; color: #5effab; font-size: 11px; font-weight: 900; padding: 5px 9px; border-radius: 999px; background: rgba(61,255,156,.09); border: 1px solid rgba(61,255,156,.16); }
.engine-chip.warn { color: #ffcf66; background: rgba(255,207,102,.08); border-color: rgba(255,207,102,.18); }
.guide-typing { display: none !important; }
.typing-bubble { display: inline-flex; align-items: center; gap: 5px; min-height: 38px; padding: 11px 14px; border-radius: 18px; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.08); }
.typing-bubble i { width: 16px; height: 16px; display: inline-block; border-radius: 50%; border: 2px solid rgba(94,255,171,.22); border-top-color: rgba(94,255,171,.95); animation: spin .82s linear infinite; }
.typing-bubble span { width: 7px; height: 7px; border-radius: 50%; background: rgba(94,255,171,.8); animation: typingPulse 1.1s infinite ease-in-out; }
.typing-bubble span:nth-child(2) { animation-delay: .15s; }
.typing-bubble span:nth-child(3) { animation-delay: .30s; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-panel { padding: 15px; }
.content-page-input-card { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.03); margin-bottom: 14px; }
/* Content URL row: input + confirm button same row */
.content-url-row { display: flex; align-items: center; gap: 8px; }
.content-url-input-wrap { flex: 1; min-width: 0; }
.content-url-input-wrap input { padding-inline-end: 38px; }
.inspect-page-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 0; border: 0; border-radius: 999px; padding: 10px 14px; background: linear-gradient(135deg, var(--green), var(--green-2)); box-shadow: 0 4px 14px rgba(6,200,117,.22); transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; white-space: nowrap; flex-shrink: 0; min-width: 44px; cursor: pointer; }
.inspect-page-btn .inspect-icon { width: 20px; height: 20px; color: #03110a; }
.inspect-page-btn.loading { animation: confirmPulse 0.8s ease-in-out infinite; }
.inspect-page-btn.loading .inspect-icon { opacity: 0.5; }
@keyframes confirmPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.inspect-page-btn:hover:not(:disabled) { transform: scale(1.03); box-shadow: 0 8px 22px rgba(6,200,117,.35); }
.inspect-page-btn:disabled { opacity: .45; cursor: not-allowed; }
.inspect-cooldown-banner { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255,180,60,.12); border: 1px solid rgba(255,180,60,.25); display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: #ffb83c; animation: rise .22s ease-out; }
.inspect-cooldown-banner .cooldown-emoji { font-size: 22px; flex-shrink: 0; }
.inspect-cooldown-banner .cooldown-timer { margin-inline-start: auto; font-size: 15px; font-weight: 900; background: rgba(255,180,60,.18); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.confirmed-page-card { margin-top: 12px; min-height: 76px; padding: 11px 12px; border: 1px solid rgba(61,255,156,.38); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.18), transparent 44%), rgba(61,255,156,.075); animation: rise .22s ease-out; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "page action" "topic action"; gap: 4px 10px; align-items: center; }
.confirmed-page-head { grid-area: page; display: flex; align-items: center; justify-self: stretch; gap: 8px; min-width: 0; }
.confirmed-platform-icon { width: 34px; height: 34px; display: grid; place-items: center; flex-shrink: 0; border-radius: 12px; font-size: 19px; background: rgba(61,255,156,.14); }
.confirmed-page-info { min-width: 0; }
.confirmed-page-info b { display: block; color: #f8fff9; font-size: 16px; font-weight: 950; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 10px rgba(61,255,156,.12); }
.confirmed-page-info small { display: block; margin-top: 1px; color: #cfe0d7; font-size: 11px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confirmed-page-topic { grid-area: topic; display: flex; align-items: center; gap: 6px; padding: 0; border-radius: 0; background: transparent; border: 0; margin: 0; min-width: 0; overflow: hidden; white-space: nowrap; }
.confirmed-topic-label { color: #a7bbb2; font-size: 11px; line-height: 1.2; font-weight: 900; flex: 0 0 auto; }
.confirmed-page-topic strong { color: #eafff2; font-size: 14px; line-height: 1.2; font-weight: 950; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.change-page-btn { grid-area: action; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 10px; background: rgba(255,255,255,.045); color: var(--text); font-size: 11px; font-weight: 800; transition: background 0.2s ease, border-color 0.2s ease; white-space: nowrap; }
.change-page-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(61,255,156,.3); }
.change-page-btn .coin-cost-badge { font-size: 11px; padding: 2px 8px; }
/* Tool-view confirmed card — same look, compact for tool pages */
.tool-confirmed-card { margin: 0 0 14px; min-height: 72px; padding: 10px 12px; border: 1px solid rgba(61,255,156,.30); border-radius: 16px; background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.14), transparent 44%), rgba(61,255,156,.06); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "page action" "topic action"; gap: 4px 10px; align-items: center; }
.tool-confirmed-card .confirmed-page-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tool-confirmed-card .confirmed-platform-icon { width: 30px; height: 30px; font-size: 17px; }
.tool-confirmed-card .confirmed-page-info b { font-size: 14px; }
.tool-confirmed-card .confirmed-page-info small { font-size: 11px; }
.tool-confirmed-card .confirmed-page-topic { grid-area: topic; display: flex; align-items: center; gap: 6px; padding: 0; min-width: 0; }
.tool-confirmed-card .confirmed-topic-label { font-size: 11px; }
.tool-confirmed-card .confirmed-page-topic strong { font-size: 13px; }
.tool-confirmed-card .change-page-btn { grid-area: action; padding: 7px 10px; font-size: 11px; }
.tool-confirmed-card .change-page-btn .coin-cost-badge { font-size: 10px; padding: 1px 6px; }
/* In-app confirmation modal */
.confirm-modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(7,10,8,.82); backdrop-filter: blur(8px); animation: fadeIn .18s ease-out; }
.confirm-modal-card { width: min(340px, calc(100% - 32px)); padding: 24px 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.022)), var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 54px rgba(0,0,0,.38); text-align: center; animation: rise .22s ease-out; }
.confirm-modal-icon { min-height: 54px; display: grid; place-items: center; margin-bottom: 8px; font-size: 42px; }
.confirm-modal-card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.confirm-modal-card p { margin: 0 0 18px; color: #c7d4cd; font-size: 14px; line-height: 1.75; }
.confirm-modal-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-modal-actions .primary-cta { width: auto; min-width: 100px; padding: 11px 18px; font-size: 14px; }
.confirm-modal-actions .ghost-btn { padding: 11px 18px; font-size: 14px; border-radius: 999px; }
.insufficient-coins-card { border-color: rgba(215,255,101,.28); background: radial-gradient(circle at 50% 0%, rgba(215,255,101,.14), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)), var(--panel); }
.insufficient-coins-card .confirm-modal-icon { position: relative; min-height: 66px; }
.insufficient-coins-card .coin-modal-icon { width: 62px; height: 62px; }
.coin-sad-face { position: absolute; right: calc(50% - 45px); bottom: 2px; font-size: 24px; filter: drop-shadow(0 8px 12px rgba(0,0,0,.32)); }
.insufficient-coins-card h3 { color: #f2ffd6; }
.insufficient-coins-card p { color: #dff7ea; }
.insufficient-coins-card .ghost-btn { color:#eafff2; border-color:rgba(255,255,255,.18); }
/* Coin shortfall: two honest exits (invite / buy) plus a highlighted package shelf. */
/* Compact shared layout: one head row (icon + copy + shortfall) over a two-column action grid.
   Nothing is dropped — the joke, the numbers, both exits, the suggested package and the opt-out. */
.insufficient-coins-card { padding: 14px; }
.coin-modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.coin-modal-icon-wrap { position: relative; flex: 0 0 auto; display: inline-grid; place-items: center; }
.insufficient-coins-card .coin-modal-icon-wrap .coin-modal-icon { width: 44px; height: 44px; }
.insufficient-coins-card .coin-modal-icon-wrap .coin-sad-face { right: -4px; bottom: -2px; font-size: 17px; }
.coin-modal-copy { min-width: 0; }
.coin-modal-copy h3 { margin: 0 0 2px; font-size: 15px; line-height: 1.35; }
.coin-modal-copy p { margin: 0; font-size: 12.5px; line-height: 1.7; }
.coin-modal-shortfall { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(215,255,101,.12); border: 1px solid rgba(215,255,101,.3); color: #eaffc4; font-size: 11.5px; font-weight: 700; }
.coin-modal-shortfall-icon { width: 15px; height: 15px; }
.coin-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coin-modal-way { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-height: 62px; padding: 8px 10px; border-radius: 14px; border: 1px solid rgba(61,255,156,.28); background: linear-gradient(180deg, rgba(61,255,156,.12), rgba(61,255,156,.04)); color: #eafff3; text-align: start; cursor: pointer; }
.coin-modal-way:active { transform: scale(.99); }
.coin-modal-way-icon { font-size: 17px; line-height: 1; }
.coin-modal-way-copy { display: flex; flex-direction: column; gap: 1px; }
.coin-modal-way-copy b { font-size: 12.5px; }
.coin-modal-way-copy small { color: rgba(234,255,243,.72); font-size: 10.5px; line-height: 1.45; }
.coin-modal-suggestion { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 7px 10px; border-radius: 14px; border: 1px dashed rgba(215,255,101,.42); background: rgba(215,255,101,.08); color: #f2ffd6; cursor: pointer; text-align: start; }
.coin-modal-suggestion-copy { flex: 1; font-size: 11.5px; }
.coin-modal-suggestion-cta { font-size: 11px; font-weight: 700; color: #d7ff65; white-space: nowrap; }
.coin-modal-suggestion-holder, .coin-modal-grid .confirm-modal-actions { grid-column: 1 / -1; }
.coin-modal-grid .confirm-modal-actions { margin: 0; }
.coin-modal-grid .confirm-modal-actions button { width: 100%; min-height: 44px; }
.platform-link-card .confirm-modal-actions { display: grid; gap: 8px; }
.platform-link-card .confirm-modal-actions button { width: 100%; min-height: 48px; }
.identity-platform-button { margin-top: 8px; }

.coin-packs-highlight { animation: coinPacksPulse 1.3s ease-in-out 2; border-radius: 16px; }
@keyframes coinPacksPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(61,255,156,0); } 50% { box-shadow: 0 0 0 3px rgba(61,255,156,.35); } }
@media (prefers-reduced-motion: reduce) { .coin-packs-highlight { animation: none; outline: 2px solid rgba(61,255,156,.45); outline-offset: 3px; } .coin-modal-way:active { transform: none; } }

.payment-modal-card { text-align: right; }
.payment-modal-card h3, .payment-modal-card p, .payment-modal-card .confirm-modal-icon { text-align: center; }
.shop-payment-sheet-overlay { align-items: end; justify-items: center; padding: 12px; }
.shop-payment-sheet-overlay .payment-sheet { width: min(460px, 100%); max-height: min(86vh, 620px); overflow: auto; padding: 10px 16px 18px; border: 1px solid rgba(255,255,255,.12); border-radius: 28px 28px 22px 22px; background: #0c110e; box-shadow: 0 -22px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); animation: sheetIn .18s ease-out; }
.payment-sheet-handle { width: 44px; height: 4px; margin: 2px auto 14px; border-radius: 999px; background: rgba(255,255,255,.22); }
.payment-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.payment-sheet-head h3 { margin: 8px 0 0; font-size: 20px; text-align: right; }
.payment-close { width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid rgba(255,255,255,.10); border-radius: 50%; color: var(--text); background: rgba(255,255,255,.06); font-size: 25px; line-height: 1; }
.payment-summary-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.075); }
.payment-summary-coins { display: flex; align-items: center; gap: 7px; }
.payment-summary-coins strong { font-size: 34px; line-height: 1; }
.payment-summary-card b { display: block; text-align: left; font-size: 17px; }
.payment-summary-card small { display: block; color: var(--green); font-size: 11px; font-weight: 900; text-align: left; margin-top: 4px; }
.payment-method-list { display: grid; gap: 9px; margin-top: 13px; }
.payment-method-btn { width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 13px; border: 1px solid rgba(61,255,156,.18); border-radius: 18px; color: var(--text); text-align: right; background: rgba(61,255,156,.075); }
.payment-method-btn span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 13px; background: rgba(61,255,156,.13); }
.payment-method-btn b { display: block; font-size: 14px; }
.payment-method-btn small { display: block; margin-top: 3px; color: #c6d5cc; font-size: 11px; line-height: 1.45; }
.payment-method-btn:disabled { opacity: .7; cursor: progress; }
.zarinpal-note { margin: 12px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.65; text-align: center; }
.payment-options { display: grid; gap: 9px; margin: 12px 0; }
.payment-options .primary-cta, .payment-options .ghost-btn, .payment-cancel { width: 100%; min-height: 44px; border-radius: 15px; font-size: 14px; }
.payment-options button:disabled { opacity: .65; cursor: progress; }
.payment-cancel { margin-top: 10px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetIn { from { transform: translateY(26px); opacity: .76; } to { transform: translateY(0); opacity: 1; } }
.smart-context-card { margin-top: 10px; padding: 12px; border: 1px solid rgba(61,255,156,.25); border-radius: 16px; background: radial-gradient(circle at 8% 0%, rgba(61,255,156,.12), transparent 48%), rgba(61,255,156,.055); color: var(--text); font-size: 12px; line-height: 1.75; }
.smart-context-card.warning { border-color: rgba(255,207,102,.34); background: radial-gradient(circle at 8% 0%, rgba(255,207,102,.14), transparent 48%), rgba(255,207,102,.06); }
.smart-context-title { font-weight: 900; margin-bottom: 4px; }
.smart-context-title b { color: var(--green); }
.smart-context-reason { color: var(--muted); }
.smart-context-meta { margin-top: 7px; color: #8fa39a; font-size: 11px; }
.smart-context-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.smart-context-actions .ghost-btn { border-radius: 999px; padding: 7px 12px; }
.smart-suggestions-list { display: grid; gap: 8px; margin-top: 10px; }
.smart-suggestion-chip { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 9px; width: 100%; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 10px 11px; background: rgba(0,0,0,.18); color: var(--text); text-align: right; }
.smart-suggestion-chip.primary { border-color: rgba(61,255,156,.32); background: rgba(61,255,156,.08); }
.smart-suggestion-chip.confidence-medium { border-color: rgba(57,170,252,.24); }
.smart-suggestion-chip.confidence-weak { border-color: rgba(255,207,102,.26); background: rgba(255,207,102,.045); }
.smart-suggestion-chip.active { border-color: transparent; background: linear-gradient(135deg, var(--green), var(--blue)); color: #03110a; }
.smart-suggestion-main { min-width: 0; display: grid; gap: 3px; }
.smart-suggestion-main b { display: inline-flex; align-items: center; gap: 5px; line-height: 1.45; }
.smart-suggestion-main b i { font-style: normal; }
.smart-suggestion-chip small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.smart-suggestion-chip.active small { color: rgba(3,17,10,.72); }
.smart-suggestion-chip em { flex: 0 0 auto; min-width: 54px; border-radius: 999px; padding: 4px 7px; background: rgba(255,255,255,.08); font-size: 10px; font-style: normal; text-align: center; white-space: nowrap; }
.confidence-badge.high { color: #06130d; background: linear-gradient(135deg, var(--green), var(--lime)); }
.confidence-badge.medium { color: #051322; background: rgba(57,170,252,.72); }
.confidence-badge.weak { color: #241800; background: rgba(255,207,102,.86); }
.smart-suggestion-chip.active .confidence-badge { color: #03110a; background: rgba(255,255,255,.72); }
.smart-evidence { display: grid; gap: 2px; margin-top: 2px; }
.smart-evidence-line { overflow: hidden; text-overflow: ellipsis; color: #b4c4bb !important; }
.smart-evidence-line strong { color: var(--green); font-weight: 900; }
.smart-suggestion-chip.active .smart-evidence-line, .smart-suggestion-chip.active .smart-evidence-line strong { color: rgba(3,17,10,.74) !important; }
.needs-category-pulse { animation: needsCategoryPulse 1.4s ease-in-out 1; }
.needs-platform-glow { position: relative; border-radius: 20px; animation: needsPlatformGlow 1.25s ease-in-out 2; }
.needs-platform-glow::after { content: "← از اینجا شروع کن"; position: absolute; left: 8px; top: -32px; z-index: 2; padding: 5px 9px; border-radius: 999px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); font-size: 11px; font-weight: 950; box-shadow: 0 0 22px rgba(61,255,156,.28); }
.needs-selector-glow { animation: needsSelectorGlow 1.25s ease-in-out 2; border-color: rgba(61,255,156,.75) !important; }
@keyframes needsCategoryPulse { 0%, 100% { box-shadow: 0 0 0 rgba(61,255,156,0); } 35% { box-shadow: 0 0 0 4px rgba(61,255,156,.18), 0 0 30px rgba(61,255,156,.16); } }
@keyframes needsPlatformGlow { 0%,100% { box-shadow: 0 0 0 rgba(61,255,156,0); } 45% { box-shadow: 0 0 0 3px rgba(61,255,156,.22), 0 0 34px rgba(61,255,156,.28); } }
@keyframes needsSelectorGlow { 0%,100% { box-shadow: 0 0 0 rgba(61,255,156,0); } 45% { box-shadow: 0 0 0 4px rgba(61,255,156,.18), 0 0 28px rgba(61,255,156,.18); } }
.content-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.content-tool-card { display: grid; gap: 6px; padding: 18px 14px; text-align: right; background: linear-gradient(180deg, rgba(255,255,255,.047), rgba(255,255,255,.018)), var(--panel); border: 1px solid var(--line); border-radius: 20px; color: var(--text); transition: transform 0.2s ease, border-color 0.2s ease; }
.content-tool-card:hover { transform: translateY(-2px); border-color: rgba(61,255,156,.3); }
.content-tool-card-disabled { opacity: .85; cursor: pointer; filter: none; }
.content-tool-card-disabled:hover { transform: translateY(-2px); border-color: rgba(61,255,156,.3); }
.content-tool-card b { font-size: 15px; font-weight: 900; }
.content-tool-card small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.content-tool-emoji { font-size: 28px; }
.coin-cost-badge { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 900; color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); font-style: normal; align-self: flex-start; white-space: nowrap; line-height: 1.25; }
.coin-cost-badge.free-cost-badge { color: #eafff2; background: rgba(61,255,156,.13); border: 1px solid rgba(61,255,156,.34); }
.primary-cta .coin-cost-badge.free-cost-badge { color: #03110a; background: rgba(255,255,255,.85); border-color: transparent; }
.primary-cta .coin-cost-badge { color: #03110a; background: rgba(255,255,255,.85); }
.coin-cost-badge.inline-quota-badge { margin-inline-start: 4px; padding: 2px 8px; font-size: 11px; }
.tool-niche-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(61,255,156,.08); border: 1px solid rgba(61,255,156,.18); border-radius: 14px; margin-bottom: 14px; }
.sales-angle-explainer { margin: 0 0 14px; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(57,170,252,.24); background: radial-gradient(circle at 100% 0%, rgba(57,170,252,.14), transparent 42%), rgba(61,255,156,.055); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.sales-angle-explainer b { display: block; margin-bottom: 6px; color: #f4fffb; font-size: 14px; font-weight: 950; }
.sales-angle-explainer p { margin: 0; color: #cfe0d7; font-size: 13px; line-height: 1.85; }
.sales-angle-recommended { grid-column: 1 / -1; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(61,255,156,.24); background: rgba(61,255,156,.08); color: #e6fff0; font-size: 13px; font-weight: 850; line-height: 1.75; }
.tool-niche-label { font-size: 12px; color: var(--muted); font-weight: 800; }
.tool-niche-bar strong { color: var(--green); font-size: 14px; font-weight: 900; }
.viral-hooks-list { display: grid; gap: 10px; }
.viral-sample-hook-box { padding: 14px; border-radius: 18px; background: rgba(61,255,156,.07); border: 1px solid rgba(61,255,156,.2); display: grid; gap: 8px; margin-bottom: 14px; }
.viral-sample-hook-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.viral-sample-hook-head b { color: var(--green); font-size: 13px; font-weight: 900; }
.viral-sample-hook-box p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text); font-weight: 800; }
.viral-sample-hook-box small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.viral-sample-hook-box .ghost-btn { padding: 6px 12px; font-size: 12px; }
.viral-hook-section-card { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid var(--line); display: grid; gap: 10px; }
.viral-hook-section-head { display: grid; gap: 4px; }
.viral-hook-section-head b { color: var(--green); font-size: 14px; font-weight: 900; }
.viral-hook-section-head small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.viral-hook-item { padding: 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); display: grid; gap: 8px; }
.viral-hook-item b { color: var(--green); font-size: 13px; font-weight: 800; }
.viral-hook-item p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text); }
.viral-hook-item small { color: var(--muted); font-size: 12px; line-height: 1.6; }
.viral-hook-item .viral-hook-actions { display: flex; gap: 8px; margin-top: 4px; }
.viral-hook-item .ghost-btn { padding: 6px 12px; font-size: 12px; }
.tool-submit-wrap { display: grid; place-items: center; margin-top: 14px; }
.tool-submit-wrap .primary-cta { display: inline-flex; align-items: center; gap: 10px; min-width: 220px; justify-content: center; }
.bio-emoji-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; font-size: 14px; cursor: pointer; }
.bio-emoji-toggle input { width: 20px; height: 20px; accent-color: var(--green); }
.tool-output { margin-top: 16px; padding: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 18px; }
.tool-output-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tool-output-header b { font-size: 15px; font-weight: 900; }
.tool-output pre { margin: 0; white-space: pre-wrap; line-height: 1.8; color: #dce9e1; font-family: inherit; }

.viral-hook-groups { display: grid; gap: 10px; }
.viral-hook-group { padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.viral-hook-group-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 9px; align-items: center; }
.viral-hook-group-emoji { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; font-size: 18px; background: rgba(61,255,156,.10); border: 1px solid rgba(61,255,156,.22); }
.viral-hook-group-head b { display: block; font-size: 14px; font-weight: 950; }
.viral-hook-group-head small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.viral-hook-group-count { font-style: normal; min-width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; font-size: 11.5px; font-weight: 900; color: var(--green); background: rgba(61,255,156,.12); }
.viral-hook-list { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 7px; }
.viral-hook-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: start; padding: 9px 10px; border-radius: 13px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.viral-hook-text { margin: 0; font-size: 13.5px; line-height: 1.8; font-weight: 850; }
.viral-hook-why { grid-column: 1; color: var(--muted); font-size: 11px; line-height: 1.6; }
.viral-hook-copy { grid-row: 1 / 3; grid-column: 2; align-self: center; min-height: 32px; min-width: 46px; padding: 0 10px; font-size: 11.5px; }
.viral-hook-recommended { padding: 12px; border-radius: 18px; border: 1px solid rgba(61,255,156,.28); background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.14), transparent 46%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.viral-hook-recommended header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.viral-hook-recommended header b { font-size: 14px; font-weight: 950; }
.viral-hook-recommended p { margin: 0 0 5px; font-size: 14.5px; line-height: 1.85; font-weight: 900; }
.viral-hook-recommended small { color: var(--muted); font-size: 11.5px; line-height: 1.65; }
@media (max-width: 390px) { .viral-hook-copy { min-width: 40px; padding: 0 8px; } }
.upcoming-occasions-panel { margin-top: 12px; padding: 12px; border: 1px solid rgba(61,255,156,.22); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(103,196,255,.10), transparent 42%), rgba(61,255,156,.055); }
.upcoming-occasions-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 8px; }
.calendar-panel-head { align-items: flex-start; }
.occasion-calendar-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.occasion-calendar-title b { font-size: 14.5px; font-weight: 950; }
.occasion-calendar-title span { color: var(--muted); font-size: 10.5px; font-weight: 850; }
.upcoming-occasions-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.upcoming-occasions-tabs button { border: 1px solid var(--line); border-radius: 999px; padding: 6px 9px; color: var(--text); background: rgba(255,255,255,.05); font-size: 11px; font-weight: 850; }
.upcoming-occasions-tabs button.active { color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); border-color: transparent; }
.upcoming-gregorian-toggle { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.04); color: #dce9e1; font-size: 11.5px; font-weight: 850; cursor: pointer; }
.upcoming-gregorian-toggle input { width: 18px; height: 18px; accent-color: var(--green); }
.occasion-calendar-legend { display: flex; flex-wrap: wrap; gap: 10px; margin: -2px 0 8px; color: var(--muted); font-size: 10.5px; font-weight: 900; }
.occasion-calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.occasion-calendar-legend span::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: rgba(61,255,156,.88); }
.occasion-calendar-legend .legend-gregorian::before { background: rgba(103,196,255,.90); }
.upcoming-occasions-list { display: grid; gap: 10px; }

.occasion-detail-panel { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(103,196,255,.22); border-radius: 16px; background: linear-gradient(180deg, rgba(103,196,255,.08), rgba(255,255,255,.025)); }
.occasion-detail-kicker { width: max-content; padding: 3px 8px; border-radius: 999px; color: #dff2ff; background: rgba(103,196,255,.12); border: 1px solid rgba(103,196,255,.18); font-size: 9.5px; font-weight: 950; }
.occasion-detail-date { color: var(--muted); font-size: 11px; font-weight: 850; }
.occasion-detail-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.occasion-detail-item { display: grid; gap: 3px; padding: 7px 8px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(255,255,255,.04); }
.occasion-detail-item.jalali { border-color: rgba(61,255,156,.22); background: rgba(61,255,156,.055); }
.occasion-detail-item.gregorian { border-color: rgba(103,196,255,.24); background: rgba(103,196,255,.06); }
.occasion-detail-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.occasion-detail-item-head b { font-size: 12.5px; line-height: 1.5; color: #f4fff8; }
.occasion-detail-item p { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #c7d4cd; font-size: 10.5px; line-height: 1.55; }
.occasion-type-badge { flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 950; line-height: 1.65; white-space: nowrap; }
.occasion-type-badge.jalali { color: #dfffea; background: rgba(61,255,156,.16); border: 1px solid rgba(61,255,156,.22); }
.occasion-type-badge.gregorian { color: #dff2ff; background: rgba(103,196,255,.18); border: 1px solid rgba(103,196,255,.24); }
.occasion-detail-meta span.holiday { color: #ffe6a8; background: rgba(255,210,77,.12); border: 1px solid rgba(255,210,77,.20); }
.occasion-detail-meta, .occasion-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.occasion-detail-meta span, .occasion-detail-tags span { padding: 4px 8px; border-radius: 999px; color: #dce9e1; background: rgba(255,255,255,.055); font-size: 11px; font-weight: 850; }
.occasion-detail-tags span { color: #dfffea; background: rgba(61,255,156,.10); border: 1px solid rgba(61,255,156,.16); }
.occasion-detail-body { display: grid; gap: 6px; }
.occasion-detail-body p { margin: 0; color: #dce9e1; font-size: 12px; line-height: 1.75; }
.occasion-detail-body b { color: #f4fff8; font-weight: 950; }
.occasion-calendar-wrap { display: grid; gap: 6px; padding: 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: rgba(5,8,7,.45); }
.occasion-calendar-weekdays, .occasion-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.occasion-calendar-weekdays span { display: grid; place-items: center; min-height: 20px; color: var(--muted); font-size: 10px; font-weight: 950; }
.occasion-calendar-day { position: relative; width: 100%; min-height: 50px; display: grid; align-content: start; gap: 3px; padding: 4px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.028); color: inherit; font: inherit; text-align: right; overflow: hidden; }
.occasion-calendar-day.today { border-color: rgba(103,196,255,.38); box-shadow: inset 0 0 0 1px rgba(103,196,255,.12); }
.occasion-calendar-day.is-empty { visibility: hidden; pointer-events: none; }
.occasion-calendar-day.has-occasion { border-color: rgba(61,255,156,.30); background: linear-gradient(180deg, rgba(61,255,156,.10), rgba(103,196,255,.035)); cursor: pointer; }
.occasion-calendar-day.has-occasion.selected { border-color: rgba(255,210,77,.62); box-shadow: inset 0 0 0 1px rgba(255,210,77,.22); }
.occasion-calendar-day.has-occasion:focus-visible { outline: 2px solid rgba(61,255,156,.48); outline-offset: 2px; }
.occasion-day-number { width: 20px; height: 18px; display: grid; place-items: center; border-radius: 7px; color: #eafff2; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 950; }
.occasion-calendar-day.today .occasion-day-number { color: #03110a; background: linear-gradient(135deg, var(--blue), var(--green)); }
.occasion-day-chips { display: grid; gap: 2px; }
.occasion-chip { display: block; width: 100%; border: 0; padding: 2px 4px; border-radius: 6px; color: #03110a; background: rgba(61,255,156,.88); font-size: 9px; font-weight: 900; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.occasion-chip.gregorian { background: rgba(103,196,255,.90); }
.occasion-chip.active { background: #ffd24d; box-shadow: 0 0 0 2px rgba(255,210,77,.18); }
.occasion-day-chips small { position: absolute; top: 3px; inset-inline-end: 3px; padding: 0 3px; border-radius: 5px; color: #dfe9e3; background: rgba(5,8,7,.72); font-size: 8.5px; font-weight: 950; line-height: 1.5; }
.occasion-calendar-fallback { display: flex; flex-wrap: wrap; gap: 6px; }
.occasion-calendar-fallback button { border: 0; padding: 5px 8px; border-radius: 999px; color: #dce9e1; background: rgba(255,255,255,.055); font-size: 11px; font-weight: 850; }
@media (max-width: 420px) {
  .calendar-panel-head { display: grid; }
  .upcoming-occasions-tabs { justify-content: stretch; }
  .upcoming-occasions-tabs button { flex: 1 1 auto; padding-inline: 7px; }
  .occasion-calendar-weekdays, .occasion-calendar-grid { gap: 3px; }
  .occasion-calendar-day { min-height: 46px; padding: 3px; }
  .occasion-chip { font-size: 8.5px; padding: 2px 3px; }
  .occasion-calendar-title b { font-size: 14px; }
}
.caption-output-list { display: grid; gap: 12px; }
.caption-output-card { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(5,8,7,.45); }
.caption-output-card .tool-output-header { margin-bottom: 8px; }
.caption-output-card .ghost-btn { padding: 6px 11px; font-size: 11px; }
.caption-output-text { font-size: 13px; line-height: 1.75; color: #dce9e1; }
.bio-copy-box { margin-top: 8px; padding: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); }
.bio-copy-box .tool-output-header { margin-bottom: 5px; }
.bio-output-title { font-weight: 900; color: #f4fff8; }
.bio-checklist-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 6px; }
.bio-checklist-chips span { padding: 4px 8px; border-radius: 999px; background: rgba(61,255,156,.10); color: #dfffea; border: 1px solid rgba(61,255,156,.16); font-size: 11px; font-weight: 800; }
.ideas-section { margin-top: 12px; padding: 11px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.032); }
.ideas-section .section-title { align-items: center; margin-bottom: 8px; }
.ideas-section .section-title h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.ideas-section .section-title span { font-size: 11px; line-height: 1.55; }
.trend-idea-grid, .ideas-preset-grid { display: grid; gap: 8px; }
.idea-card { position: relative; min-height: 82px; border: 1px solid rgba(255,255,255,.10); background: linear-gradient(145deg, rgba(61,255,156,.075), rgba(103,196,255,.035)); border-radius: 15px; padding: 10px 11px 10px 42px; display: grid; gap: 5px; transition: .18s ease; touch-action: manipulation; }
.idea-card::after { content: ""; position: absolute; left: 11px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.045); }
.idea-card b { font-size: 13px; line-height: 1.45; font-weight: 900; }
.idea-card small { color: var(--muted); font-size: 11px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.idea-card.selected { border-color: rgba(61,255,156,.62); background: linear-gradient(145deg, rgba(61,255,156,.14), rgba(103,196,255,.06)); box-shadow: 0 0 0 2px rgba(61,255,156,.09), 0 10px 22px rgba(0,0,0,.20); transform: translateY(-1px); }
.idea-card.selected::after { content: "✓"; display: grid; place-items: center; color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); border-color: transparent; font-size: 13px; font-weight: 950; }
.idea-format, .idea-format-row span { width: max-content; padding: 3px 8px; border-radius: 999px; background: rgba(61,255,156,.11); color: #dfffea; border: 1px solid rgba(61,255,156,.18); font-size: 10px; font-weight: 900; }
.idea-format-row { display: flex; flex-wrap: wrap; gap: 5px; }
.selected-ideas-list { margin: 0; padding: 0 18px 0 0; color: #dfffea; line-height: 1.75; font-size: 12px; }
.ideas-smart-questions { margin-top: 12px; display: grid; gap: 10px; grid-template-columns: 1fr; }
.idea-output-list { display: grid; gap: 12px; }
.idea-output-card { padding: 14px; border: 1px solid rgba(61,255,156,.16); border-radius: 16px; background: rgba(5,8,7,.50); }
.idea-output-card h3 { margin: 8px 0 10px; font-size: 16px; }
.idea-output-card p { margin: 7px 0; color: #dce9e1; line-height: 1.75; font-size: 13px; }
.idea-output-card small { display: block; margin-top: 9px; padding: 9px; border-radius: 12px; background: rgba(215,255,85,.08); color: #eefcc4; line-height: 1.65; }
.idea-output-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12px; }
.idea-output-head span { padding: 4px 9px; border-radius: 999px; background: rgba(103,196,255,.10); color: #dff2ff; border: 1px solid rgba(103,196,255,.18); font-weight: 900; }
.content-profile-card { margin-bottom: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.03); }
.content-profile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.content-profile-fields { display: grid; gap: 8px; margin-bottom: 8px; }
.content-profile-fields label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 800; }
.content-profile-fields input { width: 100%; border: 1px solid var(--line); outline: 0; color: var(--text); background: rgba(5,8,7,.74); border-radius: 12px; padding: 10px 12px; }
#contentProfileStatus { color: var(--green); font-size: 12px; font-weight: 700; }
.ai-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.ai-tool { min-height: 92px; border: 1px solid var(--line); border-radius: 18px; color: var(--text); background: rgba(255,255,255,.045); display: grid; align-content: center; justify-items: center; gap: 5px; text-align: center; padding: 10px; font-weight: 850; }
.ai-tool .badge { font-size: 11px; color: var(--green); }
.ai-tool.locked { opacity: .66; cursor: not-allowed; }
.ai-tool span { font-size: 24px; }
.ai-tool small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.ai-tool.active { color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); }
.ai-tool.active small { color: rgba(3,17,10,.74); }
.field-label { display: block; margin: 4px 2px 8px; color: var(--muted); font-size: 13px; font-weight: 850; }
.compact-cta { width: auto; min-width: 122px; padding-inline: 15px; }
.ai-output { min-height: 128px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; padding: 14px; color: #dce9e1; background: rgba(5,8,7,.72); border: 1px solid var(--line); border-radius: 18px; line-height: 1.8; font-family: inherit; }
.ai-output-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.content-history { margin-top: 14px; }
#historyList { display: grid; gap: 8px; }
.history-item {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
}
.history-item b { display: block; margin-bottom: 4px; }
.history-item small { color: var(--muted); display: block; line-height: 1.5; }
.history-item .ghost-btn { margin-top: 8px; }
.ghost-btn { border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); border-radius: 12px; padding: 8px 10px; font-weight: 800; font-size: 12px; }
.prompt-search { margin-bottom: 2px; }
.prompt-hero-head { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), var(--panel); border-color: rgba(255,255,255,.08); }
#promptTypeChips, #promptCategoryChips { gap: 7px; padding: 3px 0; overflow-x: auto; }
#promptTypeChips button, #promptCategoryChips button { border-radius: 999px; border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); color: #c9d5d0; padding: 8px 12px; font-weight: 900; white-space: nowrap; }
#promptTypeChips button.active, #promptCategoryChips button.active { color: #07110c; background: #dff7ea; border-color: transparent; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.prompt-grid.gallery-v1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.prompt-card { overflow: hidden; }
.banana-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 390px; border: 1px solid rgba(255,255,255,.11); border-radius: 28px; background: #07100c; box-shadow: 0 20px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); isolation: isolate; }
.banana-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5,9,7,0) 40%, rgba(5,9,7,.24) 61%, rgba(5,9,7,.74) 82%, rgba(5,9,7,.93) 100%); pointer-events: none; }
.banana-card::after { content: ""; position: absolute; inset: 1px; z-index: 4; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -1px 0 rgba(255,255,255,.06); pointer-events: none; }
.prompt-card-click { position: absolute; inset: 0; z-index: 2; border: 0; background: transparent; cursor: pointer; }
.prompt-visual { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; overflow: hidden; min-height: 100%; background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 54%), linear-gradient(160deg, #111916, #080c0a); }
.prompt-visual.no-image { background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 54%), linear-gradient(160deg, #111916, #080c0a); }
.prompt-visual::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.08), transparent 38%), linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.20)); opacity: .9; pointer-events: none; }
.prompt-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.01); }
.prompt-visual span { font-size: 44px; z-index: 1; filter: saturate(.8); }
.prompt-visual b { color: #cfe7da; font-size: 12px; z-index: 1; letter-spacing: .08em; }
.prompt-body { position: relative; z-index: 5; margin: auto 8px 8px; padding: 10px 10px 9px; display: flex; flex-direction: column; gap: 6px; max-height: 34%; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: linear-gradient(180deg, rgba(9,17,14,.62), rgba(7,12,10,.82)); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 36px rgba(0,0,0,.22); overflow: hidden; }
.prompt-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; color: #e8fff2; font-size: 10.5px; font-weight: 950; }
.prompt-top span { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.09); color: #d8e8df; }
.prompt-card h3 { margin: 0; font-size: 13.5px; line-height: 1.42; text-shadow: 0 1px 12px rgba(0,0,0,.38); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prompt-title-link { position: relative; z-index: 7; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; line-height: inherit; text-align: inherit; cursor: pointer; text-shadow: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prompt-card p { margin: 0; color: rgba(232,244,238,.84); line-height: 1.58; font-size: 10.2px; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.prompt-card.locked { opacity: .72; }
.prompt-actions { position: relative; z-index: 6; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1px; padding-top: 0; }
.prompt-actions .ghost-btn { padding: 6px 8px; border-radius: 12px; background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.14); font-size: 11px; }
.prompt-card .prompt-tags { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 1px; overflow: hidden; opacity: .58; direction: ltr; justify-content: flex-end; }
.prompt-card .prompt-tags small { color: rgba(210,224,216,.78); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.055); border-radius: 999px; padding: 2px 5px; font-size: 9px; line-height: 1.2; max-width: 82px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prompt-detail-wrap { display: grid; gap: 14px; }
.prompt-detail-card { padding: 14px; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)), var(--panel); }
.prompt-detail-media { min-height: 260px; border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.04); }
.prompt-detail-media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.prompt-detail-fallback { width: 100%; min-height: 260px; display: grid; place-items: center; align-content: center; gap: 10px; background: radial-gradient(circle at 50% 25%, color-mix(in srgb, var(--accent) 35%, transparent), transparent 55%); }
.prompt-detail-fallback span { font-size: 64px; }
.prompt-detail-fallback b { color: var(--green); }
.prompt-detail-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
.prompt-detail-meta span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }
.prompt-full-text { white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; border: 1px solid rgba(61,255,156,.18); border-radius: 18px; background: rgba(5,8,7,.74); color: #e8fff2; line-height: 1.8; font-family: inherit; direction: ltr; text-align: left; }
.detail-actions .primary-cta { width: auto; min-width: 140px; }
.prompt-generate-box { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid rgba(57,170,252,.24); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(57,170,252,.13), transparent 45%), rgba(255,255,255,.035); }
.prompt-generate-box h3 { margin: 0; font-size: 16px; }
.prompt-generate-box p { margin: 0; color: var(--muted); line-height: 1.7; font-size: 13px; }
.prompt-studio-cta { width: 100%; max-width: none; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(61,255,156,.32); color: #effff6; background: linear-gradient(135deg, rgba(61,255,156,.18), rgba(57,170,252,.15)); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 34px rgba(7,200,117,.13); }
.prompt-studio-cta .coin-cost-badge { color: #06130d; background: linear-gradient(135deg, var(--green), var(--lime)); }
.prompt-generate-box input[type=file] { padding: 12px; border: 1px dashed rgba(61,255,156,.34); border-radius: 16px; background: rgba(0,0,0,.22); color: var(--muted); }
.prompt-upload-preview, .prompt-result-image { display: grid; gap: 8px; }
.prompt-upload-preview img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 16px; }
.prompt-result-image img { width: 100%; border-radius: 18px; border: 1px solid var(--line); }
.prompt-result-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prompt-result-actions a { text-align: center; text-decoration: none; }
.prompt-run-panel { display: grid; gap: 0; margin-top: 14px; border: 1px solid rgba(61,255,156,.18); border-radius: 22px; background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.11), transparent 42%), rgba(255,255,255,.035); overflow: hidden; }
.prompt-run-panel summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px; }
.prompt-run-panel summary::-webkit-details-marker { display: none; }
.prompt-run-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 14px; color: #07110c; background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 14px 28px rgba(61,255,156,.14); }
.prompt-run-icon .app-icon { width: 20px; height: 20px; }
.prompt-run-panel summary b { display: block; margin-bottom: 3px; font-size: 15px; color: #edfff5; }
.prompt-run-panel summary small { display: block; color: var(--muted); line-height: 1.55; font-size: 11.5px; }
.prompt-run-panel summary em { color: var(--muted); font-style: normal; transition: transform .18s ease; }
.prompt-run-panel[open] summary em { transform: rotate(180deg); }
.prompt-run-body { display: grid; gap: 11px; padding: 0 14px 14px; }
.prompt-run-nudge { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border: 1px solid rgba(215,255,85,.22); border-radius: 16px; background: linear-gradient(135deg, rgba(215,255,85,.11), rgba(61,255,156,.055)); }
.prompt-run-nudge span { color: var(--lime); font-size: 11px; font-weight: 950; white-space: nowrap; }
.prompt-run-nudge b { color: #f3fff7; font-size: 12px; line-height: 1.5; }
.prompt-run-nudge small { color: #06130d; background: linear-gradient(135deg, var(--green), var(--lime)); border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 1000; white-space: nowrap; }
.prompt-run-nudge small, .prompt-run-actions .primary-cta em { display: inline-flex; align-items: center; gap: 4px; }
.prompt-run-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.prompt-run-body label { display: grid; gap: 6px; min-width: 0; }
.prompt-run-body label span, .prompt-run-question-head b { color: #e9fff3; font-size: 12px; font-weight: 950; }
.prompt-run-body input, .prompt-run-body select, .prompt-run-body textarea { width: 100%; border: 1px solid rgba(255,255,255,.09); outline: 0; color: var(--text); background: rgba(5,8,7,.76); border-radius: 16px; padding: 11px 12px; font: inherit; line-height: 1.55; }
.prompt-run-body textarea { min-height: 86px; resize: vertical; }
.prompt-run-body input:focus, .prompt-run-body select:focus, .prompt-run-body textarea:focus { border-color: rgba(61,255,156,.45); box-shadow: 0 0 0 3px rgba(61,255,156,.08); }
.prompt-run-questions { display: grid; gap: 9px; padding: 11px; border: 1px solid rgba(57,170,252,.24); border-radius: 18px; background: rgba(57,170,252,.055); }
.prompt-run-question-head { display: grid; gap: 3px; }
.prompt-run-question-head small { color: var(--muted); line-height: 1.5; font-size: 11px; }
.prompt-run-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.prompt-run-actions .primary-cta { width: auto; min-width: 160px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.prompt-run-actions .primary-cta em { font-style: normal; font-size: 11px; font-weight: 1000; opacity: .78; }
.prompt-run-result { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 19px; background: rgba(0,0,0,.20); }
.prompt-run-result-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prompt-run-result-head b { color: #edfff5; }
.prompt-run-result-head small { color: var(--green); font-size: 11px; }
.prompt-run-output { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; padding: 13px; border-radius: 16px; color: #ecfff5; background: rgba(5,8,7,.72); line-height: 1.85; font-size: 13.5px; }
.prompt-run-result-actions .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; }
.prompt-run-result-actions .app-icon { width: 16px; height: 16px; }
.prompt-generate-status { min-height: 22px; color: var(--green); font-size: 13px; line-height: 1.6; }
.prompt-generate-status[data-tone="error"] { color: #ffb1a8; }
.prompt-generate-status[data-tone="success"] { color: var(--green); }
@media (max-width: 520px) { .prompt-run-grid { grid-template-columns: 1fr; } .prompt-result-actions { grid-template-columns: 1fr; } }

.coin-wallet-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-bottom: 14px; padding: 16px; background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)), var(--panel); border-color: rgba(255,255,255,.09); }
.coin-wallet-card h3 { margin: 0 0 6px; font-size: 22px; display: flex; align-items: center; gap: 8px; }
.coin-wallet-card p, .mini-card p, .service-card p { margin: 0; color: #c8d6ce; line-height: 1.65; }
.coin-balance { min-width: 108px; display: grid; place-items: center; gap: 3px; padding: 12px 10px; border-radius: 19px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); box-shadow: 0 12px 22px rgba(7,200,117,.16); }
.coin-balance-icon { width: 32px; height: 32px; filter: drop-shadow(0 6px 10px rgba(3,17,10,.18)); }
.coin-balance strong { font-size: 24px; line-height: 1; }
.coin-balance span { font-size: 12px; font-weight: 950; }
.coin-toggle { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; color: var(--text); border-radius: 18px; background: rgba(255,255,255,.05); font-weight: 850; }
.coin-toggle input { width: 20px; height: 20px; accent-color: var(--green); }
.view.shop-view { display: none; }
.view.shop-view.active { display: grid; gap: 12px; }
.shop-wallet-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; min-height: 104px; padding: 13px 14px; border: 1px solid rgba(61,255,156,.18); border-radius: 22px; background: radial-gradient(circle at 0% 0%, rgba(61,255,156,.13), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)), #101511; box-shadow: 0 14px 34px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04); }
.shop-wallet-hero::after { content: ""; position: absolute; inset-inline-end: -44px; bottom: -72px; width: 170px; height: 170px; border-radius: 999px; background: rgba(61,255,156,.12); filter: blur(3px); }
.shop-wallet-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.shop-kicker { display: inline-flex; width: max-content; padding: 5px 9px; border-radius: 999px; color: var(--green); background: rgba(61,255,156,.10); border: 1px solid rgba(61,255,156,.16); font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.shop-wallet-copy h2 { margin: 8px 0 5px; font-size: clamp(19px, 5.4vw, 25px); line-height: 1.25; }
.shop-wallet-copy p { margin: 0; color: #dce9e1; line-height: 1.5; font-size: 12px; }
.shop-wallet-stats { position: relative; z-index: 1; display: grid; grid-template-columns: 96px; gap: 7px; }
.shop-wallet-balance, .shop-wallet-free { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 12px; border-radius: 20px; background: rgba(5,8,7,.56); border: 1px solid rgba(255,255,255,.08); }
.shop-wallet-balance { color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); border: 0; box-shadow: 0 16px 28px rgba(7,200,117,.14); }
.shop-wallet-balance .coin-balance-icon { width: 30px; height: 30px; }
.shop-wallet-balance small, .shop-wallet-free small { font-size: 10px; font-weight: 900; opacity: .82; }
.shop-wallet-balance strong { font-size: 25px; line-height: 1; }
.shop-wallet-free b { color: var(--green); font-size: 19px; line-height: 1; }
.shop-wallet-balance span, .shop-wallet-free span { font-size: 11px; font-weight: 950; }
.shop-section-label { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 2px; }
.shop-section-label span { font-size: 18px; font-weight: 950; }
.shop-section-label small { color: var(--muted); font-size: 12px; line-height: 1.45; text-align: left; }
.coin-methods { display: none; }
.shop-method-chip, .shop-pay-chips span { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #cfded5; background: rgba(255,255,255,.045); font-size: 11px; font-weight: 850; white-space: nowrap; }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.mini-card, .service-card { padding: 14px; }
.service-card { min-height: 280px; display: flex; flex-direction: column; gap: 8px; }
.mini-card small { display: inline-flex; margin-top: 9px; color: var(--green); font-weight: 900; }
.product-list { display: grid; gap: 13px; }
.shop-package-card { position: relative; overflow: hidden; display: grid; gap: 13px; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)), #0d120f; box-shadow: 0 16px 34px rgba(0,0,0,.22); }
.shop-package-card.is-recommended { border-color: rgba(61,255,156,.38); box-shadow: 0 18px 44px rgba(7,200,117,.13), inset 0 0 0 1px rgba(61,255,156,.08); }
.shop-package-card.is-recommended::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 999px; background: var(--green); }
.shop-package-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.shop-package-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shop-package-emoji { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 16px; font-size: 22px; background: rgba(61,255,156,.10); border: 1px solid rgba(61,255,156,.13); }
.shop-package-title h3 { margin: 0 0 2px; font-size: 18px; }
.shop-package-title small { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; }
.shop-package-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.shop-pill { display: inline-flex; padding: 5px 8px; border-radius: 999px; color: var(--green); background: rgba(61,255,156,.09); border: 1px solid rgba(61,255,156,.16); font-size: 10px; font-weight: 950; white-space: nowrap; }
.shop-pill-recommended { color: #03110a; background: var(--green); border-color: transparent; }
.shop-coin-amount { display: flex; align-items: center; gap: 9px; margin-top: 1px; }
.shop-coin-amount strong { font-size: clamp(39px, 13vw, 58px); line-height: .95; letter-spacing: -.04em; }
.shop-package-coin-icon { width: 34px; height: 34px; filter: drop-shadow(0 8px 16px rgba(7,200,117,.20)); }
.payment-summary-coins .shop-package-coin-icon { width: 24px; height: 24px; }
.shop-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border-radius: 17px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); }
.shop-price-row b { font-size: 18px; }
.shop-price-row small { color: var(--green); font-size: 12px; font-weight: 900; text-align: left; }
.shop-package-meta span { display: block; color: #cad8d0; font-size: 12px; line-height: 1.55; }
.shop-pay-chips { display: none; }
.shop-buy-btn { min-height: 50px; font-size: 15px; background: var(--green); box-shadow: 0 14px 26px rgba(7,200,117,.15); }
.plan-card { position: relative; overflow: hidden; padding: 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)), #0f1512; }
.featured-plan { border-color: rgba(61,255,156,.34); box-shadow: 0 16px 36px rgba(7,200,117,.12), inset 0 0 0 1px rgba(61,255,156,.10); }
.featured-plan::before { content: ""; position: absolute; inset-inline: 16px; top: 0; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--blue)); }
.plan-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.plan-emoji { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 20px; font-size: 29px; background: radial-gradient(circle at 30% 20%, rgba(61,255,156,.26), rgba(57,170,252,.12)); box-shadow: 0 0 0 9px rgba(61,255,156,.05); }
.coin-plan-icon { background: radial-gradient(circle at 50% 26%, rgba(215,255,85,.28), rgba(61,255,156,.14)); }
.plan-head span { color: var(--green); font-size: 12px; font-weight: 950; }
.plan-head h3 { margin: 3px 0 2px; font-size: 24px; }
.plan-head p { margin: 0; color: var(--muted); font-size: 13px; }
.plan-price { margin: 14px 0 12px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.plan-price strong { font-size: 26px; line-height: 1.1; color: #f8fff9; }
.plan-price span { display: inline-flex; align-items: center; gap: 4px; color: #dffdf0; font-size: 14px; font-weight: 950; padding: 7px 10px; border-radius: 999px; background: rgba(61,255,156,.09); }
.plan-features { display: grid; gap: 8px; margin-bottom: 16px; }
.plan-features span { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 10px; color: #dce9e1; background: rgba(255,255,255,.045); border-radius: 14px; line-height: 1.45; }

.referral-card h2 { margin: 0 0 4px; font-size: 20px; line-height: 1.5; }
.referral-share-box { display: grid; gap: 6px; margin-top: 10px; }
.referral-code-box, .referral-link-box, .referral-share-preview { display: grid; gap: 3px 10px; padding: 8px 11px; border-radius: 13px; background: rgba(255,255,255,.05); border: 1px solid var(--line); margin-top: 0; }
.referral-code-box, .referral-link-box { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.referral-share-preview { margin-top: 8px; }
.referral-label { font-size: 11px; font-weight: 900; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.referral-code-box code { justify-self: start; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 950; color: var(--green); background: rgba(61,255,156,.12); padding: 4px 9px; border-radius: 9px; word-break: break-all; }
.referral-link-box small { font-size: 12px; color: var(--text-2); word-break: break-all; direction: ltr; text-align: left; unicode-bidi: plaintext; }
.referral-share-preview { text-align: right; }
.referral-share-preview p { margin: 0; color: #dce9e1; font-size: 12px; line-height: 1.75; white-space: pre-wrap; }
.referral-subtitle { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 8px; }
.referral-reward-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.referral-reward-pill { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "label value note"; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(61,255,156,.18); border-radius: 13px; background: radial-gradient(circle at 50% 0%, rgba(61,255,156,.10), transparent 46%), rgba(255,255,255,.035); }
.referral-reward-pill span { grid-area: label; color: var(--muted); font-size: 10.5px; font-weight: 850; }
.referral-reward-pill b { grid-area: value; color: var(--green); font-size: 13.5px; font-weight: 950; white-space: nowrap; }
.referral-reward-pill small { grid-area: note; color: #c8d6ce; font-size: 10.5px; line-height: 1.45; }
.referral-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.referral-actions .primary-cta, .referral-actions .ghost-btn { width: 100%; }
.referral-reward-info { padding: 13px 14px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.03); margin-top: 10px; }
.referral-reward-info h3 { margin: 0 0 10px; font-size: 14.5px; font-weight: 900; }
.referral-steps-mini { display: grid; gap: 9px; }
.referral-step-mini { display: flex; align-items: flex-start; gap: 10px; }
.referral-step-num-mini { width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; border-radius: 50%; font-size: 13px; font-weight: 950; color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); }
.referral-step-star { padding: 10px 11px; border: 1px solid rgba(255,207,102,.35); border-radius: 14px; background: radial-gradient(circle at 100% 0%, rgba(255,207,102,.16), transparent 54%), rgba(255,207,102,.045); }
.referral-step-star .referral-step-num-mini { color: #3a2600; background: linear-gradient(135deg, #ffcf66, #fff06b); box-shadow: 0 0 22px rgba(255,207,102,.18); }
.referral-step-star b { color: #ffcf66; }
.referral-step-mini b { display: block; font-size: 13px; }
.referral-step-mini p { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.referral-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.referral-stat { padding: 10px; display: grid; gap: 2px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px; }
.referral-stat-label { font-size: 11px; color: var(--muted); font-weight: 800; }
.referral-stat strong { font-size: 20px; font-weight: 950; color: var(--green); }
.referral-list { margin-top: 12px; display: grid; gap: 8px; }
.referral-invited-accordion { border: 1px solid rgba(61,255,156,.18); border-radius: 18px; background: rgba(255,255,255,.035); overflow: hidden; }
.referral-invited-accordion summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 14px 15px; font-weight: 950; color: #eafff2; }
.referral-invited-accordion summary::-webkit-details-marker { display: none; }
.referral-invited-accordion summary b { color: var(--green); font-size: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(61,255,156,.10); }
.referral-invited-accordion summary em { font-style: normal; color: var(--green); transition: transform .18s ease; }
.referral-invited-accordion[open] summary em { transform: rotate(180deg); }
.referral-invited-body { display: grid; gap: 8px; padding: 0 10px 12px; }
.referral-item { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px; }
.referral-item b { font-size: 14px; }
.referral-item span { font-size: 13px; color: var(--green); font-weight: 800; }
.referral-item small { font-size: 11px; color: var(--muted); }
.empty-hint { text-align: center; color: var(--muted); padding: 20px; font-size: 13px; }
.buy-btn { width: 100%; }
.buy-btn:disabled { color: var(--muted); background: rgba(255,255,255,.08); box-shadow: none; }
.service-card span { display: inline-grid; width: 48px; height: 48px; place-items: center; border-radius: 17px; margin-bottom: 10px; font-size: 26px; background: rgba(61,255,156,.12); }
.service-card h3 { margin: 0 0 8px; font-size: 16px; }
.service-card .service-meta { margin-top: auto; display: grid; gap: 8px; }
.service-card .service-meta small { color: var(--green); font-size: 12px; font-weight: 900; }
.service-card .service-meta ul { margin: 0; padding: 0 16px; color: #c8d6ce; font-size: 12px; line-height: 1.6; }
.service-card button { width: 100%; margin-top: 13px; padding-block: 11px; }
.service-card.disabled { opacity: .72; border-color: rgba(255,255,255,.12); }
.service-card.disabled button { color: #8e9b94; background: rgba(255,255,255,.10); box-shadow: none; cursor: not-allowed; }
.referral-card, .support-card { padding: 26px 18px; text-align: center; }
.auth-warning-card { grid-column: 1 / -1; border-color: rgba(255,207,102,.38); background: radial-gradient(circle at 50% 0%, rgba(255,207,102,.16), transparent 44%), linear-gradient(180deg, rgba(255,255,255,.047), rgba(255,255,255,.018)), var(--panel); }
.auth-warning-icon { display: inline-grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 19px; font-size: 28px; background: rgba(255,207,102,.13); }
.auth-warning-card h2 { margin: 0 0 10px; font-size: 19px; line-height: 1.55; }
.auth-warning-card b { color: var(--green); }
.auth-warning-steps { display: grid; gap: 7px; margin-top: 14px; text-align: right; }
.auth-warning-steps small { display: block; color: #ffcf66; font-weight: 850; line-height: 1.65; }
.support-actions { display: grid; gap: 10px; margin-top: 18px; }
.support-actions .primary-cta { width: 100%; }
.support-actions .ghost-btn { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: rgba(255,255,255,.06); font-size: 14px; font-weight: 800; transition: background 0.2s ease; }
.support-actions .ghost-btn:hover { background: rgba(255,255,255,.12); }
.gift-stack { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 2px; font-size: 20px; }
.gift-stack .coin-gift-icon { width: 34px; height: 34px; filter: drop-shadow(0 8px 14px rgba(61,255,156,.24)); }
.gift-stack span { animation: float 2.8s ease-in-out infinite; }
.gift-stack span:nth-child(2) { animation-delay: .4s; transform: scale(1.08); padding: 0; border-radius: 0; background: transparent; box-shadow: none; }
.gift-stack span:nth-child(3) { animation-delay: .8s; }
.bottom-nav { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(420px, calc(100% - 28px)); height: 66px; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: linear-gradient(180deg, #1b231c, #121713); border: 1px solid rgba(255,255,255,.10); border-radius: 999px; box-shadow: 0 12px 30px rgba(0,0,0,.42); }
.bottom-nav a { color: var(--muted); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 18px; font-weight: 850; }
.bottom-nav a span { font-size: 11px; line-height: 1.1; font-weight: 850; }
.image-studio-hero { padding: 12px 15px; margin-bottom: 8px; background: radial-gradient(circle at 18% 10%, rgba(57,170,252,.12), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.046), rgba(255,255,255,.016)), var(--panel); }
.image-generator-hero { position: relative; overflow: hidden; border-color: rgba(61,255,156,.18); }
.image-generator-hero::after { content: ""; position: absolute; width: 120px; height: 120px; left: -58px; top: -58px; border-radius: 50%; background: radial-gradient(circle, rgba(61,255,156,.14), transparent 64%); pointer-events: none; }
.image-studio-hero h2 { margin: 0 0 4px; font-size: 18px; font-weight: 950; letter-spacing: -.02em; }
.image-studio-hero p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 12px; }
.avatar-reuse-note { display: inline-flex; margin-top: 10px; padding: 8px 11px; border-radius: 999px; color: #06130d; background: linear-gradient(135deg, var(--green), var(--lime)); font-size: 12px; font-weight: 1000; box-shadow: 0 12px 24px rgba(61,255,156,.14); }
.image-generator-card { padding: 13px 14px; display: grid; gap: 8px; margin-bottom: 9px; border-color: rgba(61,255,156,.18); }
.avatar-existing-card { display: grid; gap: 12px; padding: 14px; margin-bottom: 10px; border-radius: 22px; border: 1px solid rgba(61,255,156,.25); background: radial-gradient(circle at 0% 0%, rgba(61,255,156,.16), transparent 45%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)), var(--panel); box-shadow: 0 16px 36px rgba(0,0,0,.20); }
.avatar-existing-card[hidden] { display: none; }
.avatar-existing-card h3 { margin: 8px 0 4px; font-size: 17px; }
.avatar-existing-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 12px; }
.avatar-existing-preview img { width: 100%; max-height: 240px; object-fit: cover; border-radius: 18px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); }
.avatar-new-sheet-btn { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.avatar-new-sheet-btn em { font-style: normal; color: var(--green); font-weight: 1000; }
.avatar-sheet-panel { padding: 14px; display: grid; gap: 10px; margin-bottom: 10px; border-radius: 22px; border: 1px solid rgba(103,196,255,.22); background: radial-gradient(circle at 100% 0%, rgba(103,196,255,.14), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.047), rgba(255,255,255,.018)), var(--panel); box-shadow: 0 14px 32px rgba(0,0,0,.18); }
.avatar-sheet-panel[hidden] { display: none; }
.avatar-sheet-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; }
.avatar-sheet-head h3 { margin: 0 0 4px; font-size: 16px; font-weight: 950; }
.avatar-sheet-head p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.avatar-cost-badge { min-width: 68px; justify-content: center; }
.avatar-shot-guide { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.avatar-shot-guide span { padding: 8px 7px; border-radius: 14px; text-align: center; font-size: 11px; font-weight: 900; color: #dfffea; background: rgba(61,255,156,.08); border: 1px solid rgba(61,255,156,.14); }
.avatar-upload-drop { min-height: 116px; }
.avatar-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
.avatar-preview-grid img { width: 100%; height: 96px; object-fit: cover; border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.2); }
.avatar-generate-btn.primary-cta { margin-top: 0; }
.image-generator-card textarea { width: 100%; resize: vertical; min-height: 108px; border: 1px solid rgba(61,255,156,.18); outline: 0; color: #eefbf3; background: rgba(5,8,7,.78); border-radius: 16px; padding: 11px 12px; line-height: 1.7; font-family: inherit; }
.image-generator-card textarea:focus { border-color: rgba(61,255,156,.46); box-shadow: 0 0 0 3px rgba(61,255,156,.08); }
.image-prompt-hint { color: var(--muted); line-height: 1.55; font-size: 11px; }
.prompt-magic-row { display: flex; align-items: center; justify-content: flex-start; gap: 7px; margin-top: -1px; }
.prompt-magic-btn { flex: 0 0 auto; min-height: 32px; padding: 6px 11px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #dfffea; background: rgba(255,255,255,.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 11px; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.16); }
.prompt-magic-btn.avatar-use-btn.active { color: #07120d; border-color: rgba(139,255,183,.75); background: linear-gradient(135deg, #6cff9d, #caff62); box-shadow: 0 12px 24px rgba(108,255,157,.18); }
.prompt-magic-btn:active { transform: scale(.98); }
.prompt-optimizer-card { display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(103,196,255,.28); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(103,196,255,.12), transparent 42%), rgba(255,255,255,.04); }
.prompt-optimizer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.prompt-optimizer-head b { color: #dfffea; font-size: 14px; }
.prompt-optimizer-head small { max-width: 190px; color: var(--muted); font-size: 11px; line-height: 1.6; text-align: left; }
.prompt-optimizer-card p { margin: 0; padding: 11px; border-radius: 14px; color: #e8fff2; background: rgba(0,0,0,.24); line-height: 1.8; font-size: 12px; }
.prompt-optimizer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prompt-optimizer-actions button { min-height: 40px; border-radius: 14px; font-weight: 950; }
.prompt-optimizer-accept { color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); border: 0; }
.prompt-optimizer-reject { color: #eaf8ef; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); }
.image-model-section, .image-quality-section { margin-bottom: 9px; }
.image-tool-grid { display: grid; gap: 10px; margin-bottom: 12px; }
.image-model-grid { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 0; }
.image-tool-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 3px 10px; align-items: center; width: 100%; padding: 13px; color: var(--text); text-align: right; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); overflow: hidden; }
.image-model-card { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; align-content: center; justify-items: stretch; gap: 10px; min-height: 82px; padding: 11px 12px; border-radius: 20px; }
.image-tool-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 96% 0%, rgba(61,255,156,.10), transparent 44%); opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.image-tool-card.active { border-color: rgba(61,255,156,.48); background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.18), transparent 48%), rgba(61,255,156,.055); box-shadow: 0 12px 26px rgba(61,255,156,.08); }
.image-tool-card.active::after { opacity: 1; }
.image-tool-card > span { grid-row: 1 / 4; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; font-size: 23px; background: rgba(61,255,156,.11); }
.image-model-card > span { grid-row: auto; width: 42px; height: 42px; border-radius: 15px; font-size: 20px; }
.image-model-copy { min-width: 0; display: grid; gap: 3px; align-content: center; }
.image-model-meta { width: max-content; padding: 4px 9px; border-radius: 999px; color: #b9ffe1; background: rgba(61,255,156,.10); border: 1px solid rgba(61,255,156,.16); font-size: 10px; font-weight: 950; line-height: 1; }
.image-tool-card b { font-size: 15px; }
.image-model-card b { font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.image-tool-card small { color: var(--muted); line-height: 1.55; }
.image-model-card .image-model-description { font-size: 11px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.image-tool-card em { grid-row: 1 / 4; }
.image-model-card em { grid-row: auto; justify-self: end; }
.model-cost-badge { min-width: 76px; padding: 8px 10px; display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; align-items: center; justify-content: center; gap: 0 4px; line-height: 1; }
.image-model-card .model-cost-badge { min-width: 66px; padding: 7px 9px; width: auto; border-radius: 16px; }
.model-cost-badge img { grid-row: 1 / 3; }
.model-cost-badge span { font-size: 15px; font-weight: 1000; }
.model-cost-badge small { grid-column: 2; color: rgba(3,17,10,.74); font-size: 10px; font-weight: 950; line-height: 1.1; }
.image-quality-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.image-quality-card { position: relative; display: grid; gap: 5px; min-height: 86px; padding: 12px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; color: var(--text); text-align: center; background: rgba(255,255,255,.04); }
.image-quality-card b { font-size: 14px; font-weight: 1000; }
.image-quality-card small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.image-quality-card em { position: absolute; top: -8px; left: 8px; padding: 4px 8px; border-radius: 999px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); box-shadow: 0 8px 18px rgba(61,255,156,.18); font-size: 10px; font-weight: 1000; font-style: normal; }
.image-quality-card.active { border-color: rgba(61,255,156,.52); background: radial-gradient(circle at 50% 0%, rgba(61,255,156,.16), transparent 56%), rgba(61,255,156,.055); }
.image-size-section { margin-bottom: 9px; }
.image-size-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.image-size-card { position: relative; display: grid; justify-items: center; gap: 5px; min-height: 92px; padding: 10px 7px; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; color: var(--text); text-align: center; background: rgba(255,255,255,.04); }
.ratio-icon { width: 34px; height: 26px; display: grid; place-items: center; border-radius: 9px; border: 2px solid rgba(223,255,234,.72); background: linear-gradient(135deg, rgba(61,255,156,.17), rgba(103,196,255,.10)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 16px rgba(0,0,0,.14); }
.ratio-icon::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(223,255,234,.72); box-shadow: 9px 7px 0 rgba(223,255,234,.24); }
.ratio-portrait { width: 25px; height: 34px; }
.ratio-landscape { width: 39px; height: 22px; }
.ratio-classic { width: 27px; height: 36px; border-radius: 8px; }
.ratio-wide { width: 42px; height: 24px; border-radius: 8px; }
.ratio-square { width: 31px; height: 31px; }
.image-size-card b { font-size: 13px; font-weight: 1000; }
.image-size-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.image-size-card.active { border-color: rgba(61,255,156,.52); background: radial-gradient(circle at 50% 0%, rgba(61,255,156,.16), transparent 56%), rgba(61,255,156,.055); }
.image-size-card.active .ratio-icon { border-color: rgba(61,255,156,.96); background: linear-gradient(135deg, rgba(61,255,156,.38), rgba(202,255,98,.22)); box-shadow: 0 0 0 5px rgba(61,255,156,.08), 0 10px 20px rgba(61,255,156,.12); }
.image-size-section.needs-choice { animation: imageSizeBlink .72s ease-in-out 0s 3; }
.image-size-section.needs-choice .image-size-card { border-color: rgba(255,207,102,.62); }
@keyframes imageSizeBlink { 0%, 100% { filter: none; transform: none; } 50% { filter: drop-shadow(0 0 18px rgba(255,207,102,.38)); transform: translateY(-1px); } }
.image-upload-card, .image-result-card { padding: 16px; display: grid; gap: 12px; margin-bottom: 12px; }
.image-generate-btn.primary-cta { width: min(300px, 86%); min-height: 56px; margin: 2px auto 12px; display: grid; place-items: center; align-content: center; justify-self: center; gap: 2px; padding: 10px 20px; text-align: center; color: #f2fff7; border: 1px solid rgba(255,255,255,.22); background: linear-gradient(135deg, rgba(61,255,156,.28), rgba(103,196,255,.22)), rgba(255,255,255,.08); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 16px 34px rgba(0,0,0,.30); font-size: 18px; }
.image-generate-btn span { line-height: 1.1; }
.image-generate-btn em { display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: rgba(242,255,247,.76); background: transparent; font-style: normal; font-size: 11px; font-weight: 900; }
.image-upload-drop { min-height: 154px; display: grid; place-items: center; gap: 7px; padding: 18px; text-align: center; border: 1px dashed rgba(61,255,156,.34); border-radius: 20px; background: rgba(255,255,255,.035); cursor: pointer; }
.image-reference-drop { min-height: 104px; padding: 13px; }
.image-reference-drop.required { border-color: rgba(255,207,102,.62); background: radial-gradient(circle at 100% 0%, rgba(255,207,102,.12), transparent 48%), rgba(255,255,255,.035); }
.image-upload-drop input { display: none; }
.image-reference-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: -4px; }
.image-reference-action { position: relative; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 950; overflow: hidden; }
.image-reference-action input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 80px; }
.image-upload-drop > span { font-size: 34px; }
.image-upload-drop b { font-size: 16px; }
.image-upload-drop small { color: var(--muted); line-height: 1.7; }
.image-preview { display: grid; gap: 8px; }
.image-preview img { width: 100%; max-height: 260px; object-fit: contain; border: 1px solid var(--line); border-radius: 18px; background: rgba(0,0,0,.22); }
.image-tool-status { min-height: 18px; color: var(--muted); font-size: 13px; line-height: 1.75; text-align: center; }
.image-tool-status.ok { color: var(--green); }
.image-tool-status.error { color: #ff8c8c; }
.image-tool-status.loading { color: #8ddfff; }
.image-result-grid { display: grid; gap: 12px; }
.image-loading-card { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 10px; padding: 26px 18px; text-align: center; border: 1px solid rgba(141,223,255,.22); border-radius: 22px; background: radial-gradient(circle at 50% 20%, rgba(141,223,255,.18), transparent 42%), rgba(255,255,255,.035); }
.image-loading-card b { color: #f2fff7; font-size: 16px; }
.image-loading-card p { margin: 0; color: #dce9e1; line-height: 1.8; }
.image-loading-card small { color: var(--muted); line-height: 1.7; }
.image-loading-orb { width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(141,223,255,.22); border-top-color: rgba(61,255,156,.95); border-right-color: rgba(103,196,255,.85); box-shadow: 0 0 30px rgba(61,255,156,.18); animation: imageLoadingSpin 1s linear infinite; }
.image-failure-card { border-color: rgba(255,140,140,.30); background: radial-gradient(circle at 50% 20%, rgba(255,140,140,.12), transparent 42%), rgba(255,255,255,.035); }
.image-failure-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #ffdede; border: 1px solid rgba(255,140,140,.45); background: rgba(255,140,140,.12); font-weight: 950; font-size: 24px; }
@keyframes imageLoadingSpin { to { transform: rotate(360deg); } }
.image-result-loading h3 { color: #8ddfff; }
.image-result-error h3 { color: #ff8c8c; }
.image-result-item { position: relative; display: grid; gap: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 22px; background: rgba(255,255,255,.035); }
.image-result-preview { display: block; width: 100%; padding: 0; border: 0; background: rgba(0,0,0,.22); cursor: zoom-in; }
.image-result-preview img { display: block; width: 100%; border: 0; border-radius: 0; background: rgba(0,0,0,.22); }
.image-result-actions { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; padding: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(5,8,7,.42); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
.image-icon-action, .image-glass-action { width: 38px; height: 38px; min-height: 38px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: #f2fff7; background: rgba(255,255,255,.085); text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.image-icon-action .app-icon, .image-glass-action .app-icon { width: 18px; height: 18px; }
.image-icon-action:active, .image-glass-action:active { transform: scale(.97); }
.image-preview-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.64); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.image-preview-modal[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.image-preview-shell { position: relative; width: min(100%, 760px); max-height: min(86vh, 760px); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); box-shadow: 0 30px 90px rgba(0,0,0,.48); overflow: hidden; }
.image-preview-shell img { display: block; width: 100%; max-height: 86vh; object-fit: contain; background: rgba(0,0,0,.28); }
.image-preview-toolbar { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 9px; padding: 8px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(5,8,7,.38); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
.image-preview-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
@media (min-width: 560px) {
  .image-model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .image-model-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; min-height: 168px; align-content: start; justify-items: start; gap: 8px; }
  .image-model-card > span { width: 38px; height: 38px; }
  .image-model-card em { justify-self: stretch; width: 100%; }
  .image-model-card .model-cost-badge { width: 100%; }
}
@media (max-width: 420px) {
  .image-studio-hero { padding: 11px 13px; }
  .image-studio-hero h2 { font-size: 17px; }
  .image-generator-card { padding: 12px; gap: 8px; }
  .image-generator-card textarea { min-height: 104px; padding: 10px 11px; }
  .prompt-magic-row { justify-content: flex-start; }
  .prompt-magic-btn { width: auto; max-width: 100%; }
  .prompt-optimizer-head { display: grid; }
  .prompt-optimizer-head small { max-width: none; text-align: right; }
  .image-tool-card { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 12px 10px; gap: 4px 8px; }
  .image-model-grid { grid-template-columns: 1fr; gap: 8px; }
  .image-model-card { grid-template-columns: 38px minmax(0, 1fr) auto; min-height: 78px; padding: 10px; gap: 8px; }
  .image-tool-card > span { width: 38px; height: 38px; border-radius: 14px; }
  .image-model-card > span { width: 38px; height: 38px; border-radius: 14px; font-size: 18px; }
  .image-tool-card b { font-size: 13px; }
  .image-model-card b { font-size: 14px; }
  .image-tool-card small { font-size: 11px; }
  .image-model-card .image-model-description { -webkit-line-clamp: 1; }
  .model-cost-badge { min-width: 64px; padding: 7px 8px; }
  .image-model-card .model-cost-badge { min-width: 58px; padding: 6px 7px; }
  .model-cost-badge span { font-size: 13px; }
  .model-cost-badge small { font-size: 9px; }
  .image-quality-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .image-quality-card { min-height: 70px; text-align: right; }
  .image-quality-card small { font-size: 10px; }
  .image-size-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .image-size-card { min-height: 68px; text-align: right; }
  .image-size-card:last-child { grid-column: 1 / -1; }
  .image-generate-btn.primary-cta { position: sticky; bottom: 86px; z-index: 8; width: min(290px, 84%); min-height: 54px; margin: 0 auto 10px; left: 0; right: 0; }
}
.bottom-nav a.active { color: var(--green); }
.analyzer-score-wrap { display: grid; place-items: center; gap: 10px; margin: 12px 0; }
.analyzer-score-ring { width: 112px; height: 112px; display: grid; place-items: center; align-content: center; border-radius: 50%; color: #03110a; background: conic-gradient(var(--green), var(--blue), var(--lime), var(--green)); box-shadow: 0 16px 42px rgba(61,255,156,.18); }
.analyzer-score-ring strong { font-size: 30px; line-height: 1; }
.analyzer-score-ring span { font-size: 12px; font-weight: 900; }
.analyzer-checklist { display: grid; gap: 9px; margin: 14px 0; text-align: right; }
.analyzer-check-item { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.045); }
.analyzer-check-item.ok { border-color: rgba(61,255,156,.24); background: rgba(61,255,156,.06); }
.analyzer-check-item.warning { border-color: rgba(255,207,102,.28); background: rgba(255,207,102,.055); }
.analyzer-check-item b { font-size: 13px; }
.analyzer-check-item small { color: var(--muted); line-height: 1.7; }
.analyzer-pro-wrap { margin: 14px 0; }
.pro-banner { display: grid; gap: 8px; padding: 14px; border: 1px solid rgba(61,255,156,.28); border-radius: 18px; background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.16), transparent 45%), rgba(255,255,255,.04); }
.pro-banner code { display: inline-grid; place-items: center; padding: 9px 12px; border-radius: 12px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); font-weight: 950; direction: ltr; }
.analyzer-pro-detail { color: var(--muted); }
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.calc-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 850; }
.calc-grid input, #calcHandle { width: 100%; border: 1px solid var(--line); outline: 0; color: var(--text); background: rgba(5,8,7,.74); border-radius: 16px; padding: 12px 13px; }
.calc-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 13px 0; }
.calc-metric-card { display: grid; gap: 7px; padding: 13px; border-radius: 16px; background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.calc-metric-card span { color: var(--muted); font-size: 12px; }
.calc-metric-card strong { color: var(--green); font-size: 22px; }
.calc-ai-narrative { color: #dce9e1; line-height: 1.8; }
@keyframes coinPulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(61,255,156,.40); } 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(61,255,156,.08); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(61,255,156,0); } }
.top-coin-pill.coin-updated { animation: coinPulse .65s ease-out; }
@keyframes rise { from { transform: translateY(8px); opacity: .75; } to { transform: translateY(0); opacity: 1; } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes drift { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(7deg); } }
@keyframes typingPulse { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px);} }
@media (max-width: 460px) {
  .app-shell { padding-inline: 12px; }
  .hero { min-height: 268px; }
  .hero-avatar { width: 96px; }
  .banana-card { min-height: 360px; border-radius: 26px; }
  .prompt-body { margin: auto 7px 7px; padding: 10px; border-radius: 20px; }
  .account-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: 1fr; }
  .shop-wallet-hero { grid-template-columns: 1fr; min-height: auto; padding: 16px; border-radius: 24px; }
  .shop-wallet-stats { grid-template-columns: 1fr 1fr; }
  .shop-section-label { align-items: flex-start; flex-direction: column; }
  .shop-section-label small { text-align: right; }
  .shop-price-row, .payment-summary-card { align-items: flex-start; flex-direction: column; }
  #view-guide { min-height: calc(100vh - 164px); }
  /* Mobile page-head compact */
  .page-head { padding: 12px; gap: 10px; }
  .page-head > span { width: 42px; height: 42px; border-radius: 14px; font-size: 22px; }
  .page-head h2 { font-size: 18px; }
  .page-head p { font-size: 12px; line-height: 1.6; }
  /* Platform chips: icon-only compact */
  .analyzer-type-chips { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .analyzer-type-chips::-webkit-scrollbar { display: none; }
  .analyzer-type-chip { padding: 8px 10px; font-size: 0; gap: 0; border-radius: 14px; min-width: 40px; justify-content: center; }
  .analyzer-type-chip .platform-icon { width: 20px; height: 20px; }
  .analyzer-type-chip.active { font-size: 12px; gap: 5px; padding: 8px 12px; }
  .analyzer-type-chip.active .platform-icon { width: 16px; height: 16px; }
  /* Content URL row stays flex */
  .content-url-row { gap: 6px; }
  .inspect-page-btn { padding: 10px 12px; min-width: 40px; }
}
@media (max-width: 390px) {
  .tool-grid, .ai-tools { grid-template-columns: 1fr; }
  .content-tools-grid { grid-template-columns: 1fr; }
  .account-metrics { grid-template-columns: 1fr; }
  .chat-input, .prompt-search, .ai-actions, .coin-wallet-card { grid-template-columns: 1fr; position: static; background: transparent; padding-top: 0; }
  #view-guide .chat-input { grid-template-columns: 1fr auto; position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(7,10,8,0), rgba(7,10,8,.92) 24%, rgba(7,10,8,.98)); padding-top: 10px; }
  .compact-cta { width: 100%; }
  .coin-balance { width: 100%; }
  .shop-wallet-stats { grid-template-columns: 1fr; }
  .shop-package-top { flex-direction: column; }
  .shop-package-badges { justify-content: flex-start; }
  .profile-copy { max-width: 190px; }
  .banana-card { min-height: 340px; }
  .prompt-body { margin: auto 6px 6px; padding: 9px; }
  .prompt-visual { min-height: 100%; }
  .prompt-card h3 { font-size: 13px; }
  .prompt-card p { font-size: 11px; -webkit-line-clamp: 2; }
  .prompt-actions .ghost-btn { padding: 6px 7px; font-size: 10.5px; }
  .analyzer-info-grid { grid-template-columns: 1fr; }
  .referral-reward-grid { grid-template-columns: 1fr; }
  .analyzer-info-item { grid-template-columns: auto 1fr; }
  .analyzer-steps { flex-direction: column; gap: 12px; }
  .analyzer-step-arrow { transform: rotate(90deg); padding-top: 0; }
  .analyzer-submit-wrap .primary-cta { min-width: 100%; }
  .account-shop-btn { width: 32px; height: 32px; font-size: 20px; border-radius: 10px; }
}
@media (min-width: 768px) {
  .app-shell { width: min(100%, 940px); padding-inline: 24px; }
  .hero { min-height: 330px; }
  .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .content-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bottom-nav { width: min(520px, calc(100% - 48px)); }
  .analyzer-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .app-shell { width: min(100%, 1120px); padding-inline: 32px; }
  .hero { min-height: 360px; }
  .content-tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-model-deck { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 599px) {
  .image-size-grid,
  .content-tools-grid,
  .text-model-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analyzer-info-grid,
  .referral-reward-grid,
  .calc-result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .content-tools-grid { grid-template-columns: 1fr; }
}

/* آنالیزور تبلیغ */
.ad-analyzer-hero,
.ad-analyzer-panel,
.ad-progress-card,
.ad-report {
  border: 1px solid rgba(42, 210, 168, 0.18);
  background: linear-gradient(145deg, rgba(10, 24, 30, 0.96), rgba(6, 13, 18, 0.98));
  border-radius: 26px;
  padding: 20px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
  color: #ecfff8;
}
.ad-analyzer-hero { display:flex; justify-content:space-between; gap:16px; align-items:stretch; margin-bottom:14px; overflow:hidden; position:relative; }
.ad-analyzer-hero::after { content:""; position:absolute; width:180px; height:180px; left:-70px; top:-60px; background:radial-gradient(circle, rgba(57,255,185,.28), transparent 68%); pointer-events:none; }
.ad-analyzer-kicker { display:inline-flex; color:#36f0b4; font-size:11px; letter-spacing:.12em; font-weight:800; margin-bottom:8px; }
.ad-analyzer-hero h2 { margin:0 0 8px; font-size:30px; }
.ad-analyzer-hero p { margin:0; color:#b9d7cf; line-height:1.9; }
.ad-analyzer-price { min-width:118px; border-radius:22px; padding:14px; background:rgba(54,240,180,.1); border:1px solid rgba(54,240,180,.24); text-align:center; display:flex; flex-direction:column; justify-content:center; }
.ad-analyzer-price strong { font-size:42px; line-height:1; color:#55ffc5; }
.ad-analyzer-price span { font-weight:800; }
.ad-analyzer-price small { color:#a9c6bf; }
.ad-analyzer-panel { margin-bottom:14px; }
.ad-analyzer-field { margin-bottom:14px; }
.ad-handle-row { display:flex; align-items:center; gap:10px; background:#f8fffc; border:1px solid rgba(54,240,180,.32); border-radius:18px; padding:0 14px; color:#0d3b32; }
.ad-handle-row span { font-weight:900; color:#0ca678; }
.ad-handle-row input { border:0 !important; background:transparent !important; color:#102620 !important; box-shadow:none !important; direction:ltr; text-align:left; flex:1; padding:15px 0 !important; }
.ad-input-hint { display:block; margin-top:8px; color:#a9c6bf; font-size:12px; }
.ad-input-hint.ok { color:#5dffc8; }
.ad-input-hint.bad { color:#ffb4a8; }
.ad-analyzer-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.ad-analyzer-grid label { display:flex; flex-direction:column; gap:7px; color:#cde8e0; font-size:13px; }
.ad-analyzer-grid input,
.ad-analyzer-grid select { width:100%; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:#ecfff8; padding:12px; }
.ad-analyzer-grid option { color:#111; }
.ad-analyzer-note { margin:14px 0; padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.06); color:#cde8e0; line-height:1.8; }
.ad-analyzer-submit { width:100%; justify-content:center; }
.ad-progress-card { margin-bottom:14px; }
.ad-progress-card h3 { margin-top:0; }
.ad-progress-steps { display:grid; gap:10px; }
.ad-progress-step { display:flex; align-items:center; gap:10px; color:#8daaa2; }
.ad-progress-step span { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); font-weight:800; }
.ad-progress-step.active { color:#effff9; }
.ad-progress-step.active span { background:#35eeb1; color:#05251d; }
.ad-report-head { display:flex; justify-content:space-between; gap:16px; margin-bottom:14px; }
.ad-report-head h3 { margin:0 0 8px; font-size:24px; }
.ad-report-head p { margin:0; color:#c5e4dc; line-height:1.9; }
.ad-report-score { min-width:112px; border-radius:22px; background:#35eeb1; color:#05251d; padding:13px; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.ad-report-score strong { font-size:36px; line-height:1; }
.ad-report .calc-result-grid { margin:12px 0; }
.ad-score-bar { height:9px; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; margin:10px 0 16px; }
.ad-score-bar span { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#25d49a,#d7ff65); transition:width .45s ease; }
.ad-report-actions { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
.ad-report-actions .primary-cta, .ad-report-actions .ghost-btn { flex:1; min-width:140px; text-align:center; justify-content:center; }
.ad-section { margin-top:12px; border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:12px 14px; background:rgba(255,255,255,.045); }
.ad-section summary { cursor:pointer; font-weight:900; color:#f4fffb; }
.ad-keyword-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ad-keyword-cloud span { padding:7px 10px; border-radius:999px; background:rgba(54,240,180,.12); color:#bfffe9; border:1px solid rgba(54,240,180,.16); font-size:12px; }
.ad-mini-table { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:14px; color:#cde8e0; }
.ad-mini-table b { color:#fff; text-align:left; direction:rtl; }
.ad-history-list { display:grid; gap:10px; margin-top:12px; }
.ad-history-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:16px; background:rgba(255,255,255,.055); }
.ad-history-item b { color:#fff; direction:ltr; display:inline-block; }
.ad-history-item small { display:block; color:#accac1; }
.ad-history-item a { color:#55ffc5; font-weight:800; }
@media (max-width: 720px) {
  .ad-analyzer-hero, .ad-report-head { flex-direction:column; }
  .ad-analyzer-grid { grid-template-columns:1fr; }
  .ad-analyzer-price, .ad-report-score { width:100%; }
}

/* آنالیزور تبلیغ fixes */
.ad-analyzer-panel input,
.ad-analyzer-panel select,
.ad-handle-row input {
  font-size: 16px !important;
}
.info-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.mini-info-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(54,240,180,.45);
  background: rgba(54,240,180,.12);
  color: #5dffc8;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  position: relative;
  z-index: 4;
}
.mini-info-btn:active { transform: scale(.96); }
.mini-tooltip {
  position: fixed;
  z-index: 80;
  padding: 10px 12px;
  border-radius: 14px;
  background: #effff9;
  color: #0d3129;
  border: 1px solid rgba(54,240,180,.38);
  box-shadow: 0 14px 35px rgba(0,0,0,.24);
  font-size: 12px;
  line-height: 1.7;
  pointer-events: none;
}
.ad-failure-card {
  border: 1px solid rgba(255, 185, 105, .26);
  background: linear-gradient(145deg, rgba(45, 24, 12, .96), rgba(10, 14, 18, .98));
  color: #fff7ed;
  border-radius: 22px;
  padding: 16px;
  margin: 12px 0;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}
.ad-failure-card b { display:block; margin-bottom:8px; }
.ad-failure-card p { margin: 0 0 12px; color:#ffd9b2; line-height:1.9; }
.ad-failure-card div { display:flex; gap:10px; }
.ad-failure-card .primary-cta,
.ad-failure-card .ghost-btn { flex:1; justify-content:center; }
.ad-history-standalone { margin-bottom: 14px; }
.ad-progress-card { animation: adFoldIn .22s ease-out; }
@keyframes adFoldIn { from { transform: translateY(-8px); opacity: .75; } to { transform: translateY(0); opacity: 1; } }

.reels-context-card { margin: 10px 0 12px; padding: 12px 13px; border-radius: 18px; border: 1px solid rgba(61,255,156,.22); background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.12), transparent 44%), rgba(255,255,255,.035); }
.reels-context-card b { display: block; font-size: 13px; margin-bottom: 4px; }
.reels-context-card p { margin: 0; color: #c7d4cd; font-size: 12px; line-height: 1.75; }
.reels-raw-textarea { min-height: 150px; line-height: 1.8; }
.goal-chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.goal-chip-row::-webkit-scrollbar { display: none; }
.goal-chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 9px 12px; background: rgba(255,255,255,.04); color: var(--text); font-size: 12px; font-weight: 850; }
.goal-chip.active { color: #03110a; border-color: transparent; background: linear-gradient(135deg, var(--green), var(--blue)); }
.reels-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.reels-control-grid label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
.reels-script-list { display: grid; gap: 12px; }
.reels-script-card { display: grid; gap: 10px; }
.reels-script-card p { margin: 0; color: #dcebe4; font-size: 13px; line-height: 1.8; }
.reels-script-card small { display: block; color: var(--muted); font-size: 12px; line-height: 1.75; }
.reels-copy-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.reels-copy-actions .ghost-btn { padding: 8px 10px; font-size: 12px; }
.reels-script-text { white-space: pre-wrap; margin: 0; }
.reels-pill { display: inline-block; margin: 3px 0 3px 5px; padding: 4px 8px; border-radius: 999px; background: rgba(61,255,156,.09); color: #e7f3ec; font-size: 12px; }
.hashtag-platform-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.hashtag-platform-chips::-webkit-scrollbar { display: none; }
.hashtag-output-list { display: grid; gap: 12px; }
.hashtag-category-card { padding: 12px; border: 1px solid rgba(61,255,156,.17); border-radius: 16px; background: rgba(5,8,7,.50); }
.hashtag-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hashtag-result-chip { border: 1px solid rgba(61,255,156,.22); background: rgba(61,255,156,.08); color: #eafff2; border-radius: 999px; padding: 8px 10px; font-size: 12px; font-weight: 850; }
.hashtag-tip-card { margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(215,255,85,.08); border: 1px solid rgba(215,255,85,.18); }
.hashtag-tip-card p { margin: 6px 0; color: #edf8d0; line-height: 1.75; font-size: 13px; }
.hashtag-tip-card small { color: var(--muted); line-height: 1.7; }
@media (max-width: 420px) { .reels-control-grid { grid-template-columns: 1fr; } .reels-copy-actions { grid-template-columns: 1fr 1fr; } }

/* Luxury icon system */
.app-icon { width: 1.35em; height: 1.35em; display: block; color: currentColor; }
.cta-icon { width: 19px; height: 19px; display: inline-block; vertical-align: -0.25em; margin-inline-end: 6px; }
.primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.icon-orbit span[data-icon] { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 15px; color: rgba(217,255,236,.92); background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.11); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 28px rgba(0,0,0,.24); }
.icon-orbit .app-icon { width: 20px; height: 20px; }
.cart-btn, .icon-btn { font-size: 0; }
.cart-btn .cart-icon, .icon-btn span[data-icon] { width: 23px; height: 23px; display: grid; place-items: center; color: #e9fff2; }
.cart-btn .cart-icon .app-icon, .icon-btn .app-icon { width: 22px; height: 22px; }
.cart-btn #cartCount { font-size: 11px; }
.hero { background: radial-gradient(circle at 50% 0%, rgba(61,255,156,.16), transparent 44%), linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.018) 42%), #090d0a; border-color: rgba(255,255,255,.12); box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08); }
.hero::before { background: radial-gradient(circle, rgba(61,255,156,.18), transparent 63%); }
.tool-card { position: relative; overflow: hidden; min-height: 144px; padding: 18px 12px; background: radial-gradient(circle at 75% 0%, rgba(61,255,156,.10), transparent 44%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), #0f1511; border-color: rgba(255,255,255,.105); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 42px rgba(0,0,0,.22); }
.tool-card::after { content: ""; position: absolute; inset: auto 18px 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(61,255,156,.34), transparent); opacity: .8; }
.tool-card:active { transform: scale(.985) translateY(1px); }
.icon-bubble, .service-icon, .account-plan-emoji, .page-head > span, .analyzer-info-icon, .analyzer-confirmation-tips span { color: var(--green); background: linear-gradient(145deg, rgba(61,255,156,.15), rgba(103,196,255,.06)); border: 1px solid rgba(61,255,156,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 0 7px rgba(61,255,156,.035); }
.icon-bubble .app-icon, .service-icon .app-icon, .page-head > span .app-icon { width: 28px; height: 28px; }
.tool-card b { letter-spacing: -.01em; }
.tool-card small { color: #95ffca; opacity: .9; }
.service-card > span.service-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 19px; font-size: 0; }
.service-card > span.service-icon .app-icon { width: 27px; height: 27px; }
.image-studio-hero { background: radial-gradient(circle at 15% 10%, rgba(103,196,255,.14), transparent 36%), radial-gradient(circle at 90% 0%, rgba(61,255,156,.14), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), #0f1511; border-color: rgba(255,255,255,.115); }
.image-tool-card { position: relative; overflow: hidden; padding: 14px; background: linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)), #0f1511; border-color: rgba(255,255,255,.11); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.image-tool-card.active { border-color: rgba(61,255,156,.42); background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.13), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022)), #0f1511; }
.image-tool-card:active { transform: scale(.99); }
.image-tool-card > span, .upload-icon { color: var(--green); background: linear-gradient(145deg, rgba(61,255,156,.14), rgba(103,196,255,.06)); border: 1px solid rgba(61,255,156,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.image-tool-card > span .app-icon, .upload-icon .app-icon { width: 23px; height: 23px; }
.image-upload-drop { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); border-color: rgba(61,255,156,.26); }
.upload-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 20px; font-size: 0; }
.bottom-nav { height: 70px; background: linear-gradient(180deg, rgba(22,29,24,.86), rgba(9,13,10,.92)); border-color: rgba(255,255,255,.13); box-shadow: 0 18px 60px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08); }
.bottom-nav a { gap: 4px; font-size: 0; transition: color .18s ease, transform .18s ease; }
.bottom-nav a:active { transform: translateY(1px) scale(.98); }
.nav-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 12px; color: currentColor; }
.nav-icon .app-icon { width: 21px; height: 21px; }
.bottom-nav a.active .nav-icon { color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 8px 18px rgba(61,255,156,.18); }

.free-badge { display: inline-flex; align-items: center; justify-content: center; width: fit-content; margin-inline: auto; padding: 5px 10px; border-radius: 999px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); font-size: 11px; font-weight: 950; }
.trend-radar-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 28px; border: 1px solid rgba(61,255,156,.22); background: radial-gradient(circle at 10% 0%, rgba(61,255,156,.18), transparent 40%), radial-gradient(circle at 100% 0%, rgba(103,196,255,.12), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)), #08100d; box-shadow: 0 22px 52px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); }
.trend-radar-hero h2 { margin: 4px 0; font-size: 25px; }
.trend-radar-hero p { margin: 0; color: #cbe0d5; line-height: 1.8; font-size: 13px; }
.radar-visual { position: relative; width: 104px; height: 104px; border-radius: 999px; overflow: hidden; background: repeating-radial-gradient(circle, rgba(61,255,156,.13) 0 1px, transparent 1px 23px), linear-gradient(90deg, rgba(61,255,156,.15) 50%, transparent 50% 51%, rgba(61,255,156,.10) 51%), linear-gradient(0deg, rgba(61,255,156,.10) 50%, transparent 50% 51%, rgba(61,255,156,.10) 51%), radial-gradient(circle, rgba(61,255,156,.20), rgba(103,196,255,.05) 58%, transparent 62%); border: 1px solid rgba(61,255,156,.32); box-shadow: inset 0 0 28px rgba(61,255,156,.10), 0 0 28px rgba(61,255,156,.10); }
.radar-visual::before { content: ""; position: absolute; left: 50%; top: 50%; width: 48px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, rgba(61,255,156,.95), rgba(61,255,156,0)); transform-origin: left center; animation: radarSweep 2.1s linear infinite; }
.radar-visual span, .radar-visual i, .radar-visual b { position: absolute; width: 10px; height: 10px; border-radius: 999px; background: var(--green); box-shadow: 0 0 0 0 rgba(61,255,156,.55); animation: radarPulse 1.8s ease-out infinite; }
.radar-visual span { top: 28px; right: 31px; } .radar-visual i { bottom: 26px; left: 29px; animation-delay: .45s; } .radar-visual b { top: 52px; left: 45px; animation-delay: .9s; }
@keyframes radarSweep { to { transform: rotate(360deg); } }
@keyframes radarPulse { 70%,100% { box-shadow: 0 0 0 18px rgba(61,255,156,0); } }
.trend-niche-bar { margin-top: 12px; align-items: center; gap: 8px; }
.trend-niche-bar small { margin-inline-start: auto; color: var(--green); font-size: 11px; font-weight: 900; }
.trend-scan-btn { width: 100%; }
.trend-radar-status { margin-top: 12px; padding: 11px 12px; border-radius: 16px; border: 1px solid rgba(61,255,156,.16); background: rgba(61,255,156,.07); color: #eafff2; font-size: 13px; line-height: 1.8; text-align: center; }
.trend-output { margin-top: 14px; display: grid; gap: 12px; }
.trend-output-list { display: grid; gap: 12px; }
.trend-card { padding: 13px; border: 1px solid rgba(61,255,156,.16); border-radius: 20px; background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.trend-card-head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.trend-rank { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 13px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); font-weight: 950; }
.trend-card-head b { display: block; font-size: 15px; line-height: 1.6; }
.trend-card-head small { color: var(--green); font-weight: 850; }
.trend-simple-grid { display: grid; gap: 8px; margin-top: 10px; }
.trend-simple-grid div { padding: 10px; border-radius: 14px; background: rgba(5,8,7,.42); border: 1px solid rgba(255,255,255,.07); }
.trend-simple-grid span { display: block; margin-bottom: 4px; color: var(--green); font-size: 11px; font-weight: 950; }
.trend-simple-grid p { margin: 0; color: #e8f7ef; line-height: 1.75; font-size: 13px; }
.trend-explanation { margin: 10px 0 8px; padding: 9px 10px; border-radius: 15px; background: rgba(61,255,156,.07); border: 1px solid rgba(61,255,156,.13); color: #eafff2; line-height: 1.8; font-size: 13px; }
.trend-one-liner { margin: 9px 0 0; color: #e8f7ef; font-size: 13.5px; line-height: 1.8; }
.trend-context { margin: 9px 0 0; color: #e8f7ef; font-size: 13.5px; line-height: 1.9; }
.trend-meta-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.trend-chip-category { padding: 4px 10px; border-radius: 999px; background: rgba(61,255,156,.10); border: 1px solid rgba(61,255,156,.24); color: var(--green); font-size: 11px; font-weight: 900; }
.radar-category-filter { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.radar-category-filter::-webkit-scrollbar { display: none; }
.radar-category-chip { flex: 0 0 auto; padding: 7px 12px; min-height: 34px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 850; cursor: pointer; }
.radar-category-chip.selected { color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); border-color: transparent; }
.trend-idea-card small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.trend-head-text { min-width: 0; }
.trend-head-text b { display: block; font-size: 15.5px; line-height: 1.6; }
.trend-ticks { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 5px; }
.trend-ticks li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px; align-items: baseline; padding: 6px 9px; border-radius: 11px; background: rgba(5,8,7,.42); border: 1px solid rgba(255,255,255,.06); font-size: 12px; line-height: 1.65; }
.trend-ticks .trend-tick-icon { font-size: 12px; }
.trend-tick-label { color: var(--green); font-weight: 900; white-space: nowrap; }
.trend-ticks b { color: #e8f7ef; font-weight: 700; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.trend-source-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; padding: 7px 12px; min-height: 34px; border-radius: 999px; border: 1px solid rgba(103,196,255,.22); background: rgba(103,196,255,.09); color: #d8f1ff; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.trend-source-link:active { transform: translateY(1px); }
@media (max-width: 360px) { .trend-ticks li { grid-template-columns: auto minmax(0, 1fr); } .trend-tick-label { grid-column: 2; } .trend-ticks b { grid-column: 2; } }
.trend-format-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.trend-format-chips span { padding: 5px 9px; border-radius: 999px; background: rgba(103,196,255,.09); border: 1px solid rgba(103,196,255,.18); color: #d8f1ff; font-size: 11px; font-weight: 850; }
.trend-score-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.trend-score-grid span { min-width: 0; padding: 8px 6px; border-radius: 14px; text-align: center; background: rgba(5,8,7,.58); border: 1px solid rgba(255,255,255,.07); }
.trend-score-grid b { display: block; color: #d7ff55; font-size: 18px; }
.trend-score-grid small { display: block; color: var(--muted); font-size: 10px; white-space: nowrap; }
.trend-angle { margin: 0 0 10px; color: #e8f7ef; line-height: 1.85; font-size: 13px; }
.trend-idea { padding: 10px; border-radius: 16px; background: rgba(103,196,255,.07); border: 1px solid rgba(103,196,255,.13); }
.trend-idea span { color: var(--blue); font-size: 12px; font-weight: 950; }
.trend-idea p { margin: 5px 0 0; color: #dcebe4; line-height: 1.8; font-size: 13px; }
.trend-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.trend-action-primary { color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); border-color: transparent; font-weight: 950; }
@media (max-width: 420px) { .trend-radar-hero { grid-template-columns: 1fr; text-align: center; } .radar-visual { margin: 0 auto; } .trend-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bottom-nav a span:last-child { font-size: 11px; }

/* Carousel mode selector */
.carousel-mode-selector { margin-top: 12px; }
.carousel-mode-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.carousel-mode-chip { position: relative; overflow: hidden; padding: 14px 12px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)), var(--panel); color: var(--text); text-align: start; display: grid; gap: 6px; transition: border-color .18s ease, background .18s ease; }
.carousel-mode-chip.active { border-color: rgba(61,255,156,.42); background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.13), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022)), var(--panel); }
.carousel-mode-chip:active { transform: scale(.99); }
.carousel-mode-chip > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; font-size: 20px; background: linear-gradient(145deg, rgba(61,255,156,.15), rgba(103,196,255,.06)); border: 1px solid rgba(61,255,156,.18); }
.carousel-mode-chip b { display: block; font-size: 14px; line-height: 1.5; }
.carousel-mode-chip small { display: block; color: var(--muted); font-size: 11px; line-height: 1.65; }
.carousel-mode-chip em { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(61,255,156,.10); color: #dcffe9; font-size: 11px; font-weight: 950; font-style: normal; }
.carousel-style-controls { margin-top: 12px; display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(61,255,156,.13); border-radius: 18px; background: rgba(255,255,255,.025); }
.carousel-style-controls input, .carousel-style-controls textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.045); color: var(--text); font-size: 16px; }

/* Carousel / story output */
.carousel-output, .story-output { margin-top: 14px; display: grid; gap: 12px; }
.carousel-output-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.carousel-output-header b { font-size: 16px; }
.carousel-output-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.carousel-slide-cards, .story-card-list, .story-day-list { display: grid; gap: 10px; }
.carousel-slide-card { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid rgba(61,255,156,.17); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(61,255,156,.07), transparent 38%), rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.carousel-generated-image { width: 100%; border-radius: 16px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); display: block; }
.carousel-slide-num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 13px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); font-size: 14px; font-weight: 950; }
.carousel-slide-body b { display: block; font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
.carousel-slide-body p { margin: 0; color: #dcebe4; font-size: 13px; line-height: 1.8; }
.carousel-visual-hint { display: block; margin-top: 6px; color: var(--blue); font-size: 12px; line-height: 1.7; }
.carousel-slide-cta { display: block; margin-top: 4px; color: var(--green); font-size: 12px; font-weight: 850; }
.story-interaction-hint { display: block; margin-top: 4px; color: #edf8d0; font-size: 12px; line-height: 1.7; }
.story-day-card { padding: 13px; border: 1px solid rgba(103,196,255,.18); border-radius: 20px; background: radial-gradient(circle at 0% 0%, rgba(103,196,255,.08), transparent 38%), rgba(255,255,255,.032); }
.story-day-card > p { margin: 6px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.carousel-slide-raw pre { white-space: pre-wrap; margin: 0; font-size: 13px; line-height: 1.8; color: #dcebe4; }
.carousel-design-notes { padding: 14px; border: 1px solid rgba(215,255,85,.18); border-radius: 20px; background: rgba(215,255,85,.06); }
.carousel-design-notes p { margin: 8px 0 0; color: #edf8d0; font-size: 13px; line-height: 1.8; }
.carousel-prompt-box { padding: 14px; border: 1px solid rgba(103,196,255,.22); border-radius: 20px; background: rgba(103,196,255,.07); }
.carousel-prompt-text { white-space: pre-wrap; margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: #dcebf7; }
@media (max-width: 420px) { .carousel-mode-chips { grid-template-columns: 1fr; } .carousel-slide-card { grid-template-columns: 32px 1fr; gap: 10px; } }

/* Content Doctor v2 - aligned with Parsis green tool system */
.content-doctor-card{border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.047),rgba(255,255,255,.018)),var(--panel);border-radius:22px;padding:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 14px 32px rgba(0,0,0,.18)}
.content-doctor-head{grid-template-columns:auto 1fr auto}.content-doctor-head .coin-cost-badge{align-self:start;white-space:nowrap}.content-doctor-head > span{background:rgba(61,255,156,.12);border:1px solid rgba(61,255,156,.18)}
.doctor-score-ring{width:76px;height:76px;flex:0 0 76px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,var(--green),var(--blue));color:#03110a;box-shadow:0 16px 34px rgba(7,200,117,.18);position:relative}.doctor-score-ring:after{content:none}.doctor-score-ring b,.doctor-score-ring small{position:relative;z-index:1}.doctor-score-ring b{font-size:22px}.doctor-score-ring small{font-size:11px;color:#05351f}.doctor-score-ring.big{width:84px;height:84px;flex-basis:84px}.doctor-score-ring.big b{font-size:26px}
.content-analysis-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.analysis-mode-chip{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),var(--panel);color:var(--text);padding:14px 12px;text-align:right;display:grid;gap:6px;transition:border-color .18s ease,background .18s ease,transform .18s ease}.analysis-mode-chip:active{transform:scale(.99)}.analysis-mode-chip.active{border-color:rgba(61,255,156,.42);background:radial-gradient(circle at 100% 0%,rgba(61,255,156,.13),transparent 52%),linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.022)),var(--panel)}.analysis-mode-chip span{width:40px;height:40px;display:grid;place-items:center;border-radius:14px;font-size:20px;background:linear-gradient(145deg,rgba(61,255,156,.15),rgba(103,196,255,.06));border:1px solid rgba(61,255,156,.18)}.analysis-mode-chip b{font-size:14px;line-height:1.5}.analysis-mode-chip small{color:var(--muted);line-height:1.65;font-size:11px}.analysis-mode-chip em{justify-self:start;margin-top:4px}
.doctor-input-panel{display:grid;gap:0;margin-bottom:12px}.doctor-input-panel select,.doctor-input-panel textarea{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;color:var(--text);padding:12px;outline:none}.doctor-input-panel textarea{resize:vertical;min-height:150px;line-height:1.9}.doctor-counter{margin-top:7px;color:var(--muted);font-size:12px;text-align:left}.doctor-select{appearance:none;-webkit-appearance:none;background-color:#09100c!important;color:#f7fbf8!important;border-color:rgba(61,255,156,.22)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233dff9c' stroke-width='2' fill='none'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:left 14px center!important;padding-inline-start:38px!important;color-scheme:dark}.doctor-select:focus{border-color:rgba(61,255,156,.62)!important;box-shadow:0 0 0 3px rgba(61,255,156,.10)}.doctor-select option{background:#09100c!important;color:#f7fbf8!important}.doctor-select option:checked,.doctor-select option:hover{background:#13251b!important;color:#3dff9c!important}
.content-doctor-result{display:grid;gap:12px;margin-top:14px}.doctor-score-card{display:flex;align-items:center;gap:14px}.doctor-score-card h3{margin:0 0 8px;color:var(--text);font-size:17px;line-height:1.7}.doctor-score-card p{margin:0;color:#c7d4cd;line-height:1.8;font-size:13px}.doctor-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.doctor-metric-chip{border:1px solid rgba(61,255,156,.16);border-radius:16px;background:rgba(61,255,156,.055);padding:10px 12px;display:flex;justify-content:space-between;align-items:center}.doctor-metric-chip b{font-size:12px;color:#c7d4cd}.doctor-metric-chip em{font-style:normal;color:var(--green);font-weight:950}
.doctor-section h3,.doctor-hooks-card h3{margin:4px 2px 9px;color:#fff;font-size:15px}.doctor-card-grid{display:grid;gap:9px}.doctor-mini-card{border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:12px;background:rgba(255,255,255,.045)}.doctor-mini-card.danger{border-color:rgba(255,107,107,.23);background:rgba(255,107,107,.07)}.doctor-mini-card.good{border-color:rgba(41,211,176,.23);background:rgba(41,211,176,.07)}.doctor-mini-card b{display:block;color:#fff;margin-bottom:6px}.doctor-mini-card p{margin:0;color:#c2cadc;line-height:1.8;font-size:13px}.doctor-copy-card pre{white-space:pre-wrap;line-height:1.9;color:#f6f7ff;margin:10px 0 0;font-family:inherit}.doctor-hooks-card ol{display:grid;gap:9px;margin:8px 0 0;padding:0;list-style:none}.doctor-hooks-card li{display:flex;gap:8px;align-items:flex-start;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:10px;background:rgba(255,255,255,.045)}.doctor-hooks-card li span{line-height:1.8;color:#fff}.doctor-format-card b{color:#fff}.doctor-format-card p{margin:8px 0 0;color:#bdc5da;line-height:1.8}.error-card{color:#ffd6d6;border-color:rgba(255,107,107,.35)}
@media (max-width:420px){.content-analysis-mode-switch{grid-template-columns:1fr}.content-doctor-hero,.doctor-score-card{align-items:flex-start}.doctor-score-ring{width:74px;height:74px;flex-basis:74px}.doctor-metric-grid{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce) { .emoji-field span, .hero-avatar, .view, .radar-visual::before, .radar-visual span, .radar-visual i, .radar-visual b { animation: none !important; } }

/* Page Analyzer V2 */
.analyzer-v2-hero,
.analyzer-v2-panel,
.analyzer-v2-report,
.analyzer-progress,
.analyzer-history,
.analyzer-pro-report {
  border: 1px solid rgba(80,255,190,.18);
  background: radial-gradient(circle at 100% 0%, rgba(54,240,180,.14), transparent 38%), rgba(255,255,255,.045);
  border-radius: 24px;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  margin-bottom: 14px;
}
.analyzer-v2-hero h2 { margin: 0 0 8px; font-size: 30px; }
.analyzer-v2-hero p { margin: 0 0 14px; color: #cde8e0; line-height: 1.9; }
.analyzer-v2-quota { display:flex; gap:12px; align-items:center; padding:12px; border-radius:18px; background:rgba(54,240,180,.09); border:1px solid rgba(54,240,180,.22); }
.analyzer-v2-quota b { min-width:44px; min-height:44px; display:grid; place-items:center; border-radius:14px; color:#06251c; background:linear-gradient(135deg,var(--green),var(--blue)); font-size:24px; }
.analyzer-v2-quota span { color:#d9fff4; line-height:1.8; font-weight:800; }
.analyzer-platform-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0 0 12px; }
.analyzer-platform-card { min-height:78px; border-radius:18px; padding:10px 8px; align-items:center; justify-content:center; flex-direction:column; font-size:13px; text-align:center; touch-action:manipulation; }
.analyzer-platform-card .platform-icon { width:23px; height:23px; }
.analyzer-platform-card b { color:#f2fff9; font-size:13.5px; line-height:1.35; }
.analyzer-platform-card small { color:#9fbab2; line-height:1.35; font-weight:600; font-size:10px; max-width:100%; }
.analyzer-platform-card.active b,
.analyzer-platform-card.active small { color:#03110a; }
.analyzer-v2-panel input,
.analyzer-v2-panel select { min-height:48px; font-size:16px; }
.analyzer-cost-note { padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.06); color:#cde8e0; line-height:1.8; }
.analyzer-submit { width:100%; justify-content:center; min-height:48px; }
.analyzer-metrics-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.analyzer-metric-card { display:grid; gap:6px; padding:13px; border-radius:18px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1); }
.analyzer-metric-card strong { color:#55ffc5; font-size:18px; }
.analyzer-metric-card small { color:#a9c6bf; line-height:1.7; }
.analyzer-metric-card.bad { border-color:rgba(255,107,107,.35); }
.analyzer-metric-card.warning { border-color:rgba(255,207,102,.35); }
.analyzer-metric-card.ok { border-color:rgba(61,255,156,.28); }
.analyzer-pro-report { background:rgba(54,240,180,.07); }
.analyzer-pro-report h3 { margin:0 0 8px; }
.analyzer-pro-report ol { margin:10px 20px 0 0; color:#dffdf5; line-height:2; }
.pro-banner del { color:#92aaa3; }
.pro-banner strong { color:#55ffc5; }
@media (max-width:720px) {
  .analyzer-platform-cards { grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
  .analyzer-metrics-grid { grid-template-columns:1fr; }
  .analyzer-platform-card { min-height:74px; font-size:12px; gap:5px; padding:9px 6px; }
  .analyzer-platform-card.active { font-size:12px; gap:5px; padding:9px 6px; }
  .analyzer-platform-card small { display:block; }
  .analyzer-platform-card .platform-icon { width:22px; height:22px; }
}

/* Page Analyzer premium refresh — inspired by Ad Analyzer */
.analyzer-premium-hero,
.analyzer-premium-panel,
.analyzer-premium-report,
.analyzer-premium-progress,
.analyzer-premium-pro-report {
  border-color: rgba(42,210,168,.18);
  background: radial-gradient(circle at 10% 0%, rgba(103,196,255,.10), transparent 34%), radial-gradient(circle at 100% 0%, rgba(54,240,180,.15), transparent 42%), linear-gradient(145deg, rgba(10,24,30,.96), rgba(6,13,18,.98));
  box-shadow: 0 22px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.065);
  color: #ecfff8;
}
.analyzer-premium-hero { display:flex; justify-content:space-between; gap:8px; align-items:center; overflow:hidden; position:relative; padding:9px 11px; min-height:0; }
.analyzer-premium-hero h2 { margin:0 0 2px; font-size:20px; letter-spacing:-.02em; }
.analyzer-premium-hero p { margin:0; max-width:520px; line-height:1.45; font-size:12px; }
.analyzer-hero-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.analyzer-hero-badges span { padding:5px 8px; border-radius:999px; background:rgba(54,240,180,.11); color:#cffff0; border:1px solid rgba(54,240,180,.18); font-size:10.5px; font-weight:900; }
.analyzer-premium-quota { min-width:188px; width:auto; flex:0 0 auto; flex-direction:column; justify-content:center; text-align:right; padding:8px; gap:7px; align-self:center; white-space:normal; border-radius:20px; }
.analyzer-quota-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; padding:7px 9px; border-radius:15px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); }
.analyzer-quota-row span { color:#d9fff4; font-size:11.5px; line-height:1.25; font-weight:950; }
.analyzer-quota-row b { min-width:34px !important; min-height:34px !important; width:34px; height:34px; margin:0; border-radius:12px !important; display:grid; place-items:center; color:#06251c; background:linear-gradient(135deg,var(--green),var(--blue)); font-size:18px !important; font-weight:950; }
.analyzer-quota-row small { display:inline-flex; align-items:center; justify-content:center; min-height:30px; color:#d9fff4; font-size:11px; font-weight:950; }
.analyzer-quota-row .coin-cost-badge { min-height:30px; padding:5px 9px; font-size:13px; }
.analyzer-quota-paid { background:rgba(54,240,180,.13); border-color:rgba(54,240,180,.30); }
.analyzer-quota-paid .analyzer-quota-cost { color:#061f18; background:linear-gradient(135deg,#d7ff65,#35eeb1); border:1px solid rgba(215,255,101,.42); border-radius:999px; padding:5px 10px; box-shadow:0 8px 18px rgba(54,240,180,.18); }
.analyzer-quota-paid .coin-cost-badge { color:#061f18 !important; background:linear-gradient(135deg,#d7ff65,#35eeb1); border:1px solid rgba(215,255,101,.42); }
.analyzer-panel-head { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.analyzer-panel-head > span { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; border-radius:14px; color:#05251d; background:#35eeb1; font-weight:950; }
.analyzer-panel-head b { display:block; color:#fff; }
.analyzer-panel-head small { color:#a9c6bf; line-height:1.7; }
.analyzer-input-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:12px; margin-top:12px; }
.analyzer-input-grid-single { grid-template-columns:1fr; }
.analyzer-input-grid label { display:flex; flex-direction:column; gap:7px; color:#cde8e0; font-size:13px; font-weight:850; }
.analyzer-input-grid select { width:100%; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:#ecfff8; padding:13px; }
.analyzer-input-grid option { color:#111; }
.analyzer-premium-report .analyzer-score-card { background:#35eeb1; color:#05251d; }
.analyzer-premium-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.analyzer-premium-metrics .analyzer-metric-card { position:relative; min-height:116px; background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.105); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.analyzer-metric-card span { color:#cde8e0; font-size:12px; font-weight:900; }
.analyzer-metric-card strong { color:#55ffc5; font-size:22px; line-height:1.25; }
.analyzer-status-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.08); font-size:18px!important; color:#fff!important; }
.analyzer-metric-card.ok .analyzer-status-mark { background:rgba(54,240,180,.18); color:#55ffc5!important; }
.analyzer-metric-card.bad .analyzer-status-mark { background:rgba(255,107,107,.16); color:#ff8e8e!important; }
.analyzer-metric-card.warning .analyzer-status-mark { background:rgba(255,207,102,.16); color:#ffd86f!important; }
.analyzer-target-chip { display:inline-flex; width:max-content; max-width:100%; margin:3px 0 8px; padding:5px 9px; border-radius:999px; border:1px solid rgba(54,240,180,.22); background:rgba(54,240,180,.09); color:#d9fff4; font-weight:900; direction:ltr; }
.analyzer-insight-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.analyzer-insight-card { border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:13px; background:rgba(255,255,255,.045); }
.analyzer-insight-card h4 { margin:0 0 9px; color:#fff; font-size:14px; }
.analyzer-insight-card p { display:flex; gap:8px; align-items:flex-start; margin:8px 0 0; color:#cde8e0; font-size:13px; line-height:1.8; }
.analyzer-item-index { width:22px; height:22px; flex:0 0 22px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.09); color:#fff!important; font-size:11px!important; }
.analyzer-insight-card.warning { border-color:rgba(255,207,102,.24); background:rgba(255,207,102,.06); }
.analyzer-insight-card.ok { border-color:rgba(54,240,180,.23); background:rgba(54,240,180,.06); }
.analyzer-insight-card.bad { border-color:rgba(255,107,107,.24); background:rgba(255,107,107,.06); }
.analyzer-insight-card.trend { border-color:rgba(103,196,255,.23); background:rgba(103,196,255,.06); }
.analyzer-pro-detail { color:#a9c6bf; line-height:1.7; }
.analyzer-deep-sections { display:grid; gap:10px; margin-top:12px; }
.analyzer-premium-pro-report { margin-top:14px; }
.analyzer-premium-pro-report .ad-analyzer-kicker, .analyzer-premium-pro-report h3 { display:none; }
.analyzer-new-request { width:100%; min-height:64px; margin-top:16px; justify-content:center; font-size:17px; font-weight:950; border-radius:22px; box-shadow:0 18px 34px rgba(54,240,180,.20); }
.analyzer-new-request .coin-cost-badge { transform:scale(1.08); }
.analyzer-pro-actions { display:grid; gap:9px; margin-top:12px; }
.analyzer-plan-card { margin-top:12px; padding:13px; border-radius:18px; border:1px solid rgba(103,196,255,.18); background:rgba(103,196,255,.06); }
.analyzer-plan-card b { color:#fff; }
.analyzer-plan-card p { color:#cde8e0; line-height:1.9; margin:8px 0 0; }
.analyzer-plan-card ol { margin:10px 20px 0 0; color:#dffdf5; line-height:2; }
.analyzer-pro-integrated { border-color:rgba(54,240,180,.22); background:linear-gradient(145deg, rgba(54,240,180,.08), rgba(103,196,255,.05)); }
.analyzer-history summary { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; list-style:none; }
.analyzer-history summary::-webkit-details-marker { display:none; }
.analyzer-history summary::after { content:'⌄'; width:28px; height:28px; display:inline-grid; place-items:center; flex:0 0 28px; border-radius:999px; color:#061f18; background:linear-gradient(135deg,#d7ff65,#35eeb1); box-shadow:0 8px 18px rgba(54,240,180,.16); transition:transform .18s ease; }
.analyzer-history[open] summary::after { transform:rotate(180deg); }
.analyzer-history .ad-history-list { gap:8px; }
.analyzer-history-item { border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(255,255,255,.035); padding:10px 12px; }
.analyzer-history-item b { margin:3px 0; color:#effff9; direction:rtl; }
.analyzer-history-item small { color:#a9c6bf; font-size:11.5px; line-height:1.55; }
@media (max-width:720px) {
  .analyzer-report-head { flex-direction:column; }
  .analyzer-input-grid, .analyzer-premium-metrics, .analyzer-insight-columns { grid-template-columns:1fr; }
  .analyzer-premium-hero { flex-direction:column; align-items:stretch; gap:10px; padding:12px; overflow:visible; }
  .analyzer-premium-hero > div:first-child { width:100%; min-width:0; }
  .analyzer-premium-hero h2 { font-size:22px; line-height:1.35; }
  .analyzer-premium-hero p { max-width:none; font-size:13px; line-height:1.8; }
  .analyzer-premium-quota { width:100%; min-width:0; flex:0 0 auto; }
  .analyzer-quota-row { width:100%; }
}

.studio-head small { display: block; margin-top: 4px; color: var(--muted); line-height: 1.7; }
/* categories live in one shared line: scrollable, never wrapped into ragged rows */
.studio-tabs { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 8px 1px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.studio-tabs::-webkit-scrollbar { display: none; }
.studio-tabs button { flex: 0 0 auto; white-space: nowrap; min-width: 0; min-height: 40px; padding: 9px 15px; text-align: center; scroll-snap-align: start; }
.studio-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; overflow-x: hidden; }
.studio-card, .studio-detail-card { min-width: 0; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); box-shadow: inset 0 0 0 1px rgba(255,255,255,.014), 0 12px 26px rgba(0,0,0,.16); }
.studio-card { display: flex; flex-direction: column; height: 100%; cursor: pointer; }
/* media on top, solid text block below: nothing is written over the photo/video any more */
.studio-card-story { position: relative; min-height: 0; justify-content: flex-start; background: var(--panel); }
.studio-preview { position: relative; min-height: 108px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(61,255,156,.13), rgba(57,170,252,.12)); color: var(--text); }
.studio-preview img, .studio-preview video { width: 100%; height: 118px; object-fit: cover; display: block; }
.studio-preview em { position: absolute; top: 8px; inset-inline-start: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(0,0,0,.42); color: #fff; font-style: normal; font-size: 10px; font-weight: 900; }
.studio-card-story .studio-preview { position: relative; inset: auto; aspect-ratio: 4 / 5; min-height: 0; overflow: hidden; background: linear-gradient(150deg, rgba(61,255,156,.10), rgba(57,170,252,.07)); }
.studio-card-story .studio-preview img, .studio-card-story .studio-preview video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.03) contrast(1.03); }
.studio-card-story .studio-preview::after { display: none; }
.studio-card-story .studio-preview em { z-index: 1; }
.studio-media-fallback { display: grid; place-items: center; width: 100%; height: 100%; font-size: 26px; opacity: .5; }
.studio-preview em { padding: 3px 8px; border-radius: 999px; background: rgba(4,12,8,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #e6f7ee; font-size: 9.5px; font-weight: 800; letter-spacing: .01em; }
.studio-kind { position: absolute; bottom: 8px; inset-inline-end: 8px; padding: 3px 7px; border-radius: 999px; background: rgba(4,12,8,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #dff7ea; font-size: 9px; font-style: normal; font-weight: 800; }
.studio-audio { gap: 6px; min-height: 108px; }
.studio-audio audio { width: min(92%, 320px); }
.studio-wave { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: rgba(61,255,156,.16); color: var(--green); font-size: 28px; box-shadow: 0 0 0 10px rgba(61,255,156,.06); }
.studio-card-body, .studio-detail-body { display: grid; gap: 8px; padding: 11px; }
.studio-card-body { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.studio-card-story .studio-card-body { position: static; z-index: auto; flex: 1 1 auto; min-height: 0; justify-content: flex-start; margin: 0; padding: 10px 11px 11px; border: 0; border-radius: 0; background: var(--panel-2); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.studio-tag { align-self: flex-start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 800; }
.studio-card-story h3 { font-size: 13.5px; font-weight: 900; line-height: 1.6; min-height: 43px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.studio-card-top, .studio-meta, .studio-detail-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.studio-meta { justify-content: flex-end; margin-top: auto; }
.studio-card-top b { color: var(--green); font-size: 11px; }
.studio-card-top span { color: var(--muted); font-size: 11px; font-weight: 850; }
.studio-card h3, .studio-detail-card h3 { margin: 0; font-size: 14px; line-height: 1.55; }
.studio-card h3[data-studio-open], .studio-card p[data-studio-open] { cursor: pointer; }
.studio-card p { margin: 0; color: #cbdad2; line-height: 1.65; font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.studio-card-story h3 { color: #f4fff8; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.studio-card-story p { color: #d8e9df; }
.studio-detail-card p, .studio-detail-card small { margin: 0; color: #cbdad2; line-height: 1.75; }

.studio-like, .studio-detail-close { min-width: 42px; min-height: 42px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; background: rgba(255,255,255,.055); color: var(--text); font-weight: 900; }
.studio-action { margin-top: auto; }
.studio-action, .studio-detail-actions .primary-cta, .studio-detail-actions .ghost-btn { min-height: 44px; width: 100%; }
/* a quiet, readable button instead of a loud gradient on top of the artwork */
.studio-card .studio-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; margin-top: auto; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(61,255,156,.26); background: rgba(61,255,156,.10); color: #eafff3; font-size: 12px; font-weight: 900; box-shadow: none; }
.studio-card .studio-action:active { background: rgba(61,255,156,.18); }
.studio-detail { margin-top: 14px; }
.studio-detail-mode .studio-head, .studio-detail-mode .studio-tabs, .studio-detail-mode .studio-grid { display: none; }
.studio-detail-mode .studio-detail { margin-top: 0; min-height: calc(100dvh - 100px); display: block; }
.studio-detail-card { position: relative; }
.studio-detail-close { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; background: rgba(0,0,0,.48); font-size: 22px; }
.studio-detail-actions { flex-wrap: wrap; }
.studio-send-status { width: 100%; text-align: center; color: #d7ff55; font-size: 12px; font-weight: 900; padding: 8px 10px; border-radius: 14px; background: rgba(215,255,85,.08); border: 1px solid rgba(215,255,85,.16); }
.template-use-actions { justify-content: center; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.template-use-cta { max-width: 260px; margin-inline: auto; text-align: center; justify-content: center; }
.studio-detail-mode .template-use-actions { position: sticky; bottom: 10px; z-index: 3; padding: 10px; border-radius: 20px; background: rgba(5,12,8,.70); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
@media (min-width: 560px) { .studio-grid { gap: 12px; } .studio-preview img, .studio-preview video { height: 150px; } .studio-card-story .studio-preview img, .studio-card-story .studio-preview video { height: 100%; } .studio-card-story .studio-preview { aspect-ratio: 16 / 11; } }


.template-detail-card { display:grid; gap:14px; border:1px solid rgba(61,255,156,.18); border-radius:24px; padding:14px; background:rgba(8,14,10,.78); }
.template-detail-media { min-height:190px; border-radius:18px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,rgba(61,255,156,.12),rgba(215,255,85,.08)); }
.template-detail-media img, .template-detail-media video { width:100%; max-height:70dvh; object-fit:cover; display:block; }
.template-detail-fallback { min-height:190px; display:grid; place-items:center; color:#d7ff55; font-weight:900; }
.template-detail-copy { display:grid; gap:10px; }
.template-detail-copy h3 { margin:0; }
.template-detail-copy p { margin:0; color:#cfe0d7; line-height:1.9; }
.template-detail-actions { display:flex; gap:10px; flex-wrap:wrap; }

.profile-panel, .support-composer-card, .support-ticket-list { display: grid; gap: 12px; }
.profile-summary-card, .support-composer-card, .mini-ticket-card, .empty-ticket-card {
  border: 1px solid rgba(255,255,255,.12); border-radius: 24px; padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), rgba(13,18,16,.78);
  box-shadow: 0 16px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.profile-summary-card { display: flex; align-items: center; gap: 10px; padding: 13px; border-radius: 20px; }
.profile-summary-avatar { width: 48px; height: 48px; flex:0 0 48px; border-radius: 16px; display: grid; place-items: center; font-size: 23px; font-weight: 900; color: #07120c; background: linear-gradient(135deg, #3dff9c, #c6ff3d); }
.profile-summary-card h3 { margin: 0 0 4px; }
.profile-summary-card p { margin: 0; color: var(--muted); }
.profile-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; min-width:0; }
.profile-stats-grid article { min-width:0; aspect-ratio:1/1; border: 1px solid rgba(61,255,156,.20); border-radius: 16px; padding: 8px 5px; background: rgba(61,255,156,.06); display: grid; align-content:center; gap: 3px; text-align:center; overflow-wrap:anywhere; }
.profile-stats-grid b { color: var(--lime); font-size: clamp(16px,5vw,20px); }
.profile-stats-grid span { font-size:clamp(10px,3.2vw,12px); line-height:1.45; }
.profile-stats-grid span, .mini-ticket-card small, .empty-ticket-card { color: var(--muted); }
.support-composer-card input, .support-composer-card select, .support-composer-card textarea { width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(0,0,0,.22); color: var(--text); padding: 13px; margin-top: 8px; font: inherit; }
.mini-ticket-card { display: grid; gap: 8px; }
.mini-ticket-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.mini-ticket-head span { border-radius: 999px; padding: 5px 10px; background: rgba(61,255,156,.16); color: var(--green); font-size: 12px; font-weight: 800; }
.mini-ticket-card p { margin: 0; color: var(--soft); line-height: 1.8; }
@media (max-width: 340px) { .profile-stats-grid { gap:5px; } .profile-stats-grid article { padding:6px 3px; border-radius:14px; } }

/* Direction guardrails: Persian/Arabic UI must read RTL, English/Russian LTR.
   Keep URLs, codes and prompt bodies LTR, but make tool cards, menus and titles follow the selected app direction. */
[dir="rtl"] .page-head,
[dir="rtl"] .image-studio-hero,
[dir="rtl"] .image-generator-card,
[dir="rtl"] .image-model-copy,
[dir="rtl"] .image-tool-card,
[dir="rtl"] .content-tool-card,
[dir="rtl"] .payment-modal-card,
[dir="rtl"] .payment-sheet-head h3,
[dir="rtl"] .payment-method-btn,
[dir="rtl"] .smart-suggestion-chip,
[dir="rtl"] .occasion-calendar-day,
[dir="rtl"] .referral-share-preview,
[dir="rtl"] .auth-warning-steps,
[dir="rtl"] .analyzer-checklist,
[dir="rtl"] .template-detail-copy,
[dir="rtl"] .profile-summary-card,
[dir="rtl"] .support-composer-card,
[dir="rtl"] .mini-ticket-card { text-align: right; }

[dir="ltr"] .page-head,
[dir="ltr"] .image-studio-hero,
[dir="ltr"] .image-generator-card,
[dir="ltr"] .image-model-copy,
[dir="ltr"] .image-tool-card,
[dir="ltr"] .content-tool-card,
[dir="ltr"] .payment-modal-card,
[dir="ltr"] .payment-sheet-head h3,
[dir="ltr"] .payment-method-btn,
[dir="ltr"] .smart-suggestion-chip,
[dir="ltr"] .occasion-calendar-day,
[dir="ltr"] .referral-share-preview,
[dir="ltr"] .auth-warning-steps,
[dir="ltr"] .analyzer-checklist,
[dir="ltr"] .template-detail-copy,
[dir="ltr"] .profile-summary-card,
[dir="ltr"] .support-composer-card,
[dir="ltr"] .mini-ticket-card { text-align: left; }

[dir="rtl"] .prompt-magic-row { justify-content: flex-start; }
[dir="ltr"] .prompt-magic-row { justify-content: flex-start; }
[dir="rtl"] .prompt-optimizer-head small,
[dir="rtl"] .shop-section-label small,
[dir="rtl"] .shop-price-row small,
[dir="rtl"] .payment-summary-card b,
[dir="rtl"] .payment-summary-card small { text-align: left; }
[dir="ltr"] .prompt-optimizer-head small,
[dir="ltr"] .shop-section-label small,
[dir="ltr"] .shop-price-row small,
[dir="ltr"] .payment-summary-card b,
[dir="ltr"] .payment-summary-card small { text-align: right; }

[dir="rtl"] .needs-platform-glow::after { content: "← از اینجا شروع کن"; inset-inline-start: auto; inset-inline-end: 8px; left: auto; }
[dir="ltr"] .needs-platform-glow::after { content: "Start here →"; inset-inline-start: 8px; inset-inline-end: auto; left: auto; }
[dir="rtl"] .image-quality-card em,
[dir="rtl"] .image-result-actions,
[dir="rtl"] .image-preview-toolbar { left: 10px; right: auto; }
[dir="ltr"] .image-quality-card em,
[dir="ltr"] .image-result-actions,
[dir="ltr"] .image-preview-toolbar { right: 10px; left: auto; }
[dir="rtl"] .image-preview-close { right: 14px; left: auto; }
[dir="ltr"] .image-preview-close { left: 14px; right: auto; }
[dir="rtl"] .image-model-meta { justify-self: start; }
[dir="ltr"] .image-model-meta { justify-self: start; }
[dir="rtl"] .prompt-card .prompt-tags { justify-content: flex-end; }
[dir="ltr"] .prompt-card .prompt-tags { justify-content: flex-start; }

/* Parsis Video Studio — compact deck: shared-layout picker, crossfade modes, sticky action bar */
.video-studio-shell { display:grid; gap:12px; padding-bottom:12px; }

.vid-head { display:flex; align-items:center; justify-content:space-between; gap:9px; padding:9px 11px; border:1px solid var(--line); border-radius:20px; background:radial-gradient(circle at 100% 0%,rgba(61,255,156,.12),transparent 44%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)),var(--panel); }
.vid-head-copy { min-width:0; display:grid; gap:2px; }
.vid-head h2 { margin:0; font-size:clamp(18px,4.6vw,21px); line-height:1.15; }
.vid-head p { margin:0; color:var(--muted); font-size:11px; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.vid-state { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid rgba(61,255,156,.24); border-radius:999px; color:var(--green); background:rgba(61,255,156,.08); font-size:10px; font-weight:800; white-space:nowrap; }
.vid-state::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }

.vid-modes { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; padding:3px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.03); }
.vid-glider { position:absolute; left:0; top:0; pointer-events:none; border-radius:14px; background:linear-gradient(180deg,rgba(61,255,156,.18),rgba(61,255,156,.08)); border:1px solid rgba(61,255,156,.34); transition:transform .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1); }
.vid-glider.no-anim { transition:none; }
.vid-crossfade { transition:opacity .18s ease, transform .18s ease; }
.vid-crossfade.is-swapping { opacity:0; transform:translateY(3px); }
.vid-modes button { position:relative; z-index:1; display:grid; gap:1px; padding:7px 8px; border:0; border-radius:14px; background:transparent; color:var(--muted); text-align:center; cursor:pointer; transition:color .24s ease; }
.vid-modes button b { font-size:13px; }
.vid-modes button small { font-size:9.5px; }
.vid-modes button.active { color:var(--text); }

.vid-compose { display:grid; gap:7px; padding:11px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.014)),var(--panel); }
.vid-compose textarea { width:100%; min-height:72px; resize:vertical; padding:11px; border-radius:16px; border:1px solid var(--line); background:rgba(5,8,7,.72); color:var(--text); font:inherit; font-size:16px !important; line-height:1.6; outline:none; transition:border-color .22s,box-shadow .22s; }
.vid-compose textarea:focus { border-color:rgba(61,255,156,.5); box-shadow:0 0 0 4px rgba(61,255,156,.06); }
.vid-compose-bar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vid-count { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.vid-magic { display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:0 10px; border:1px solid rgba(61,255,156,.36); border-radius:999px; color:#04140c; background:linear-gradient(180deg,var(--green),var(--green-2)); font-size:11px; font-weight:900; cursor:pointer; white-space:nowrap; }
.vid-magic:disabled { opacity:.62; cursor:progress; }
.vid-ghost { min-height:28px; padding:0 10px; border:1px solid var(--line); border-radius:999px; color:var(--text); background:rgba(255,255,255,.04); font-size:10.5px; cursor:pointer; }

.vid-pick { display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line); border-radius:20px; background:var(--panel-2); color:var(--text); text-align:start; cursor:pointer; transition:border-color .22s,background .22s,transform .18s; }
.vid-pick:active { transform:scale(.99); }
.vid-pick[aria-expanded="true"] { border-color:rgba(61,255,156,.44); }
.vid-pick-copy { min-width:0; flex:1 1 auto; display:flex; align-items:center; gap:7px; flex-wrap:nowrap; justify-content:flex-start; }
.vid-pick-copy small { color:var(--muted); font-size:10px; }
.vid-pick-copy b { font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vid-pick-more { color:var(--green); font-size:11px; font-weight:800; }
.vid-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.vid-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border:1px solid rgba(255,255,255,.1); border-radius:999px; color:#cfd9d3; background:rgba(255,255,255,.04); font-size:10px; font-weight:700; }
.vid-chip.on { border-color:rgba(61,255,156,.34); color:var(--green); background:rgba(61,255,156,.09); }
.vid-icon { width:30px; height:30px; flex:0 0 30px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; color:var(--green); }
.vid-icon:empty, .vid-icon[hidden] { display:none; }
.vid-icon svg { width:24px; height:24px; display:block; }
.vid-pick-icon { width:28px; height:28px; flex:0 0 28px; }



.vid-ref { display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:999px; color:#d8e6dd; background:rgba(255,255,255,.04); font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; }
.vid-ref svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.vid-ref[aria-pressed="true"] { border-color:rgba(61,255,156,.44); color:var(--green); background:rgba(61,255,156,.1); }
.vid-ref:disabled { opacity:.5; cursor:not-allowed; }
.vid-ref-preview { display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid rgba(61,255,156,.28); border-radius:14px; background:rgba(61,255,156,.06); }
.vid-ref-preview[hidden] { display:none; }
.vid-ref-preview img { width:44px; height:44px; flex:0 0 44px; border-radius:10px; object-fit:cover; border:1px solid rgba(255,255,255,.14); }
.vid-ref-copy { min-width:0; display:grid; gap:2px; }
.vid-ref-copy b { font-size:11.5px; }
.vid-ref-copy small { color:var(--muted); font-size:10px; }
.vid-ref-remove { margin-inline-start:auto; width:26px; height:26px; border:0; border-radius:50%; color:#cfe0d6; background:rgba(255,255,255,.07); font-size:11px; cursor:pointer; }
.vid-generate { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 13px; }
.vid-generate-cost { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; background:rgba(4,20,12,.28); font-size:11.5px; font-weight:900; }
.vid-generate-cost[hidden] { display:none; }
.vid-generate-cost img { width:13px; height:13px; }

.vid-compose-field { position:relative; }
.vid-icon-btn { position:absolute; top:8px; inset-inline-end:8px; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:#cfe0d6; background:rgba(9,14,11,.86); cursor:pointer; }
.vid-icon-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.vid-icon-btn:active { border-color:rgba(61,255,156,.44); color:var(--green); }
.vid-compose-actions { display:flex; align-items:center; gap:6px; }
.vid-opt { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 9px 0 11px; border:1px solid rgba(61,255,156,.3); border-radius:999px; color:var(--green); background:rgba(61,255,156,.08); font-size:11px; font-weight:800; cursor:pointer; white-space:nowrap; }
.vid-opt:disabled { opacity:.6; cursor:progress; }
.vid-opt-price { display:inline-flex; align-items:center; gap:3px; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.08); color:#e8f2ec; font-size:10px; font-style:normal; font-weight:800; }
.vid-opt-price img { width:12px; height:12px; }
.vid-undo { position:absolute; inset-inline-start:8px; bottom:8px; display:flex; align-items:center; gap:7px; padding:5px 7px 5px 9px; border:1px solid rgba(61,255,156,.34); border-radius:999px; background:rgba(8,14,10,.94); box-shadow:0 10px 26px rgba(0,0,0,.42); animation:vidFadeIn .22s ease-out; }
.vid-undo[hidden] { display:none; }
.vid-undo-ring { width:15px; height:15px; border-radius:50%; background:conic-gradient(var(--green) calc(var(--p, 100) * 1%), rgba(255,255,255,.14) 0); }
.vid-undo-text { color:#dbe7df; font-size:10.5px; font-weight:700; white-space:nowrap; }
.vid-undo-btn { min-height:26px; padding:0 9px; border:1px solid rgba(61,255,156,.4); border-radius:999px; color:#04140c; background:var(--green); font-size:10.5px; font-weight:900; cursor:pointer; }
.vid-undo-close { width:22px; height:22px; border:0; border-radius:50%; color:#b6c4bc; background:rgba(255,255,255,.07); font-size:10px; cursor:pointer; }

/* Per-model logo tiles: distinct marks, same product palette */
.vid-logo { width:26px; height:26px; flex:0 0 26px; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; border-radius:0; }
.vid-logo-svg { width:24px; height:24px; display:block; }
.vid-chip-coin { display:inline-flex; align-items:center; gap:3px; }
.vid-chip-coin img { width:11px; height:11px; }

.vid-quality { align-items:center; gap:7px; padding:3px 8px; border-style:solid; }
.vid-quality[hidden] { display:none; }
.vid-quality-title { color:var(--muted); font-size:10px; font-weight:800; white-space:nowrap; flex:0 0 auto; }
.vid-quality-chips { display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
#videoToolStatus:empty { display:none; }
.vid-group > * { min-width:0; }
.vid-quality-chips button { display:flex; align-items:center; gap:4px; min-height:27px; padding:4px 9px; border:1px solid var(--line); border-radius:999px; background:var(--panel-2); color:var(--muted); font-size:11px; font-weight:800; cursor:pointer; transition:border-color .2s,color .2s,background .2s; }
.vid-quality-chips button small { color:var(--muted); font-size:9.5px; font-weight:700; }
.vid-quality-chips button[aria-pressed="true"] { border-color:rgba(61,255,156,.45); background:rgba(61,255,156,.10); color:var(--text); }
.vid-quality-chips button[aria-pressed="true"] small { color:var(--green); }
.vid-controls { display:grid; gap:0; padding:0; border:1px solid var(--line); border-radius:20px; background:var(--panel); overflow:hidden; }
.vid-group { display:flex; flex-wrap:wrap; align-items:center; align-content:flex-start; gap:6px; padding:8px 10px; min-width:0; }
.vid-group + .vid-group { border-top:1px solid var(--line); }
.vid-group:last-child { padding-bottom:9px; }
.vid-pill { flex:0 1 auto; min-width:0; display:flex; align-items:center; gap:5px; min-height:31px; padding:4px 9px; border:1px solid rgba(255,255,255,.07); border-radius:999px; background:rgba(255,255,255,.035); color:var(--text); font-size:10.5px; }
.vid-pill>span { color:var(--muted); font-size:9.5px; font-weight:700; white-space:nowrap; }
.vid-pill select { width:auto; max-width:88px; min-height:0; padding:0; border:0; border-radius:0; background-color:var(--panel-2); background-image:none; color:var(--text); font:inherit; font-size:10.5px !important; font-weight:800; line-height:1.35; outline:none; }

.vid-pill select:disabled { opacity:.6; }
.vid-ratios { gap:4px; padding:4px 6px; }
.vid-ratios button { display:inline-flex; align-items:center; gap:4px; min-height:26px; padding:0 8px; border:1px solid transparent; border-radius:999px; background:rgba(255,255,255,.05); color:#a9b6b0; font:inherit; font-size:10.5px; font-weight:800; cursor:pointer; }
.vid-ratios button.active { border-color:rgba(61,255,156,.4); color:var(--green); background:rgba(61,255,156,.1); }
.vid-ratios i { display:block; border:1.4px solid currentColor; border-radius:2px; }
.vid-ratios .ratio-916 { width:8px; height:14px; }
.vid-ratios .ratio-169 { width:15px; height:9px; }
.vid-ratios .ratio-11 { width:11px; height:11px; }
.vid-audio { cursor:pointer; }
.vid-audio input { position:absolute; opacity:0; pointer-events:none; }
.vid-audio i { position:relative; width:34px; height:19px; border-radius:999px; background:rgba(255,255,255,.12); transition:background .22s ease; }
.vid-audio i::after { content:""; position:absolute; top:2px; inset-inline-start:2px; width:15px; height:15px; border-radius:50%; background:#e7f0ea; transition:transform .22s ease; }
.vid-audio input:checked~i { background:rgba(61,255,156,.4); }
.vid-audio input:checked~i::after { transform:translateX(-15px); }
[dir="ltr"] .vid-audio input:checked~i::after { transform:translateX(15px); }
.vid-audio.disabled { opacity:.5; cursor:not-allowed; }

.video-shot-timeline { display:grid; gap:8px; }
.video-shot-timeline:empty { display:none; }
.video-shot-timeline .empty-hint { margin:0; padding:5px; color:var(--muted); font-size:11px; text-align:center; }
.video-shot-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; padding:10px; border-radius:16px; background:#070b08; border:1px solid rgba(255,255,255,.07); }
.video-shot-index { width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:var(--lime); background:rgba(215,255,85,.09); font-size:12px; font-weight:900; font-variant-numeric:tabular-nums; }
.video-shot-copy { min-width:0; display:grid; gap:6px; }
.video-shot-copy header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.video-shot-copy header b { font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-shot-copy header span { flex:0 0 auto; color:var(--muted); font-size:10px; }
.video-shot-copy p { margin:0; color:#c9d3cd; font-size:11px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.video-shot-copy small { color:var(--muted); font-size:10px; }
.video-shot-copy details { border-top:1px dashed rgba(255,255,255,.08); padding-top:6px; }
.video-shot-copy details summary { color:var(--green); font-size:10.5px; font-weight:800; cursor:pointer; list-style:none; }
.video-shot-copy details summary::-webkit-details-marker { display:none; }
.video-shot-copy details summary::before { content:"▸ "; }
.video-shot-copy details[open] summary::before { content:"▾ "; }
.video-shot-prompt { width:100%; min-height:64px; margin-top:7px; resize:vertical; padding:9px; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.025); color:#dce6df; font:inherit; font-size:10px; line-height:1.6; direction:ltr; text-align:left; }
.video-shot-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.video-shot-actions small { color:var(--green); font-size:10.5px; font-weight:800; }
.video-shot-actions button { min-height:30px; padding:0 10px; font-size:10px; }
.video-shot-result { grid-column:1/-1; }
.video-shot-result video { width:100%; border-radius:14px; background:#000; }

.vid-actionbar { position:sticky; bottom:8px; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:9px; padding:9px 10px; border:1px solid rgba(61,255,156,.26); border-radius:20px; background:linear-gradient(180deg,rgba(16,24,19,.96),rgba(8,12,9,.96)); backdrop-filter:blur(14px); box-shadow:0 16px 40px rgba(0,0,0,.42); }
.vid-action-copy { flex:1 1 auto; min-width:0; display:grid; gap:2px; }
.vid-action-copy > b { display:flex; align-items:center; gap:5px; color:var(--green); font-size:15px; }
.vid-action-stats b { display:inline; color:#e6efe9; font-weight:800; }
.vid-action-copy #videoCoinCost { color:var(--muted); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vid-action-stats { color:#c3cdc7; font-size:10.5px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vid-generate { flex:0 0 auto; min-height:42px; padding:0 15px; border:1px solid rgba(61,255,156,.4); border-radius:16px; color:#04140c; background:linear-gradient(180deg,var(--green),var(--green-2)); font-size:12.5px; font-weight:900; cursor:pointer; }
.vid-generate:disabled { color:#cfe0d6; background:rgba(255,255,255,.07); border-color:var(--line); cursor:not-allowed; }

.vid-sheet-overlay { position:fixed; z-index:2200; inset:0; display:grid; align-items:end; justify-items:center; padding:0 10px max(10px,env(safe-area-inset-bottom)); }
.vid-sheet-overlay[hidden] { display:none; }
.vid-sheet-backdrop { position:absolute; inset:0; background:rgba(2,5,3,.68); backdrop-filter:blur(10px); animation:vidFade .2s ease-out; }
.vid-sheet { position:relative; width:min(100%,470px); max-height:min(80dvh,660px); overflow-y:auto; display:grid; gap:12px; padding:16px 15px 18px; border:1px solid rgba(61,255,156,.22); border-radius:26px; background:radial-gradient(circle at 85% 0%,rgba(61,255,156,.13),transparent 38%),linear-gradient(180deg,#151c17,#0b100d); box-shadow:0 30px 90px rgba(0,0,0,.6); animation:vidRise .26s cubic-bezier(.2,.8,.2,1); }
.vid-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vid-sheet-head small { color:var(--green); font-size:10px; font-weight:900; letter-spacing:.05em; }
.vid-sheet-head h3 { margin:2px 0 0; font-size:17px; }
.vid-sheet-close { width:34px; height:34px; border:1px solid var(--line); border-radius:50%; color:var(--text); background:rgba(255,255,255,.05); font-size:14px; cursor:pointer; }
.vid-sheet-note { margin:0; color:var(--muted); font-size:10.5px; line-height:1.7; }
.video-model-deck { display:grid; gap:8px; }
.video-model-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:10px; padding:11px; border:1px solid var(--line); border-radius:17px; background:var(--panel-2); color:var(--text); text-align:start; cursor:pointer; transition:border-color .22s,background .22s; }
.video-model-card.active { border-color:rgba(61,255,156,.5); background:radial-gradient(circle at 100% 0%,rgba(61,255,156,.13),transparent 46%),var(--panel-2); }
.video-model-copy { min-width:0; display:grid; gap:3px; }
.video-model-copy b { font-size:13.5px; }
.video-model-copy p { margin:0; color:var(--muted); font-size:10.5px; line-height:1.6; }
.video-model-check { width:20px; height:20px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:transparent; font-size:11px; }
.video-model-card.active .video-model-check { color:#03110a; background:var(--green); border-color:var(--green); }
.video-skeleton { min-height:76px; border-radius:17px; background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.08),rgba(255,255,255,.03)); background-size:220% 100%; animation:video-shimmer 1.2s linear infinite; }
@keyframes video-shimmer { to { background-position:-220% 0; } }

/* Crossfade + shared-layout transitions */
.vid-swap { transition:opacity .22s ease,transform .22s ease; }
.vid-fade-out { opacity:0; transform:translateY(4px); }
.vid-fade-in { animation:vidFadeIn .24s ease-out; }
@keyframes vidFadeIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes vidFade { from { opacity:0; } to { opacity:1; } }
@keyframes vidRise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
::view-transition-old(video-model-icon),::view-transition-new(video-model-icon) { animation-duration:.26s; animation-timing-function:cubic-bezier(.2,.8,.2,1); }

@media (max-width:420px) {
  .vid-head{padding:9px 11px}
  /* one shared panel: groups stack, dividers separate them, pills stay compact */
  .vid-controls { grid-template-columns:1fr; gap:0; }
  .vid-group { padding:7px 9px; gap:5px; }
  .vid-pill { width:auto; justify-content:flex-start; padding:4px 8px; }
  .vid-pill select { max-width:104px; text-align:end; }
  .vid-ratios { justify-content:flex-start; }
  .vid-compose-actions { flex:1 1 auto; justify-content:flex-end; }
  .vid-ref { padding:0 9px; }
  .vid-ref span { display:none; }
  .vid-ref svg { width:17px; height:17px; }
  .vid-magic, .vid-opt { padding:0 9px; font-size:10.5px; }
  .vid-pick-copy b { font-size:14px; }
  .vid-generate { padding:0 12px; font-size:12px; }
  .vid-action-copy #videoCoinCost { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  .vid-glider,.vid-modes button,.video-model-card,.vid-pick,.vid-audio i,.vid-audio i::after,.vid-swap { transition:none; }
  .vid-sheet,.vid-sheet-backdrop,.vid-fade-in,.video-skeleton { animation:none; }
  ::view-transition-old(video-model-icon),::view-transition-new(video-model-icon) { animation:none; }
}


/* First-run onboarding and contextual help */
.guided-overlay { position: fixed; z-index: 2400; inset: 0; display: grid; align-items: end; justify-items: center; padding: max(16px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); background: rgba(1,4,2,.76); backdrop-filter: blur(14px); overscroll-behavior: contain; }
.guided-sheet { position: relative; width: min(100%, 470px); max-height: min(84dvh, 720px); overflow-y: auto; display: grid; gap: 13px; padding: 24px 20px 20px; border: 1px solid rgba(61,255,156,.23); border-radius: 30px; background: radial-gradient(circle at 85% 0%, rgba(61,255,156,.14), transparent 36%), linear-gradient(180deg, #151c17, #0b100d); box-shadow: 0 30px 90px rgba(0,0,0,.64); animation: guided-rise .24s ease-out; }
.guided-sheet h2 { margin: 0; font-size: clamp(22px, 6vw, 29px); line-height: 1.35; }
.guided-sheet p { margin: 0; color: #b9c9c0; font-size: 13px; line-height: 1.85; }
.guided-close { position: absolute; top: 13px; inset-inline-end: 13px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #9caf9f; background: rgba(255,255,255,.055); font-size: 24px; }
.guided-eyebrow { width: max-content; color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .05em; }
.onboarding-progress { display: flex; gap: 6px; min-height: 7px; padding-inline-end: 46px; }
.onboarding-progress span { width: 7px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.17); transition: width .18s ease, background .18s ease; }
.onboarding-progress span.active { width: 24px; background: var(--green); }
.onboarding-visual { width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid rgba(61,255,156,.28); border-radius: 25px; color: #04110a; background: linear-gradient(135deg, var(--green), var(--lime)); box-shadow: 0 18px 38px rgba(61,255,156,.15); font-size: 35px; }
.onboarding-points, .context-help-points { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 9px; }
.onboarding-points li, .context-help-points li { position: relative; padding: 11px 38px 11px 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; color: #dce8e1; background: rgba(255,255,255,.035); font-size: 12px; line-height: 1.65; }
[dir="ltr"] .onboarding-points li, [dir="ltr"] .context-help-points li { padding: 11px 12px 11px 38px; }
.onboarding-points li::before, .context-help-points li::before { content: "✓"; position: absolute; top: 10px; inset-inline-start: 12px; color: var(--green); font-family: Arial, sans-serif; font-weight: 900; }
.guided-actions { display: grid; grid-template-columns: auto 1fr; gap: 9px; margin-top: 3px; }
.guided-primary, .guided-secondary { min-height: 49px; padding: 10px 18px; border-radius: 15px; font-weight: 900; }
.guided-primary { border: 0; color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); }
.guided-secondary { border: 1px solid var(--line); color: #d7e4dd; background: rgba(255,255,255,.04); }
.guided-wide { width: 100%; }
.context-help-sheet { gap: 12px; }
.context-help-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 17px; color: var(--green); background: rgba(61,255,156,.10); border: 1px solid rgba(61,255,156,.2); font-family: Arial, sans-serif; font-size: 24px; font-weight: 900; }
body.guided-open { overflow: hidden; touch-action: none; }
@keyframes guided-rise { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@media (min-width: 640px) { .guided-overlay { align-items: center; } }
@media (max-width: 390px) {
  .app-shell { padding-inline: 8px; }
  .topbar { gap: 4px; }
  .profile-tools { gap: 4px; }
  .top-coin-pill { min-width: 64px; gap: 4px; padding-inline: 7px; }
  .guided-sheet { padding: 21px 16px 16px; border-radius: 25px; }
}
@media (prefers-reduced-motion: reduce) { .guided-sheet { animation: none; }.onboarding-progress span { transition: none; } }

/* Text Model Hub */
.text-model-submit:disabled{opacity:.62;cursor:not-allowed}
.text-model-head > span{color:var(--green)}.text-model-shell{display:grid;gap:14px}.text-model-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%;max-width:100%;min-width:0;padding:2px 1px 8px}.text-model-tabs::-webkit-scrollbar{display:none}.text-model-tab{min-width:0;width:100%;display:flex;align-items:center;gap:9px;text-align:start;padding:11px 12px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:17px;overflow:hidden}.text-model-tab>span:last-child{min-width:0;display:grid;gap:2px}.text-model-tab b{font-size:13px;line-height:1.3;overflow-wrap:anywhere}.text-model-tab small{color:var(--muted);font-size:10px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.text-model-tab.active{border-color:rgba(61,255,156,.58);background:rgba(61,255,156,.1)}.text-model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;max-width:100%}.text-model-card{position:relative;min-width:0;max-width:100%;min-height:128px;padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:start;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}.text-model-card b{max-width:calc(100% - 26px);font-size:15px;line-height:1.35;overflow-wrap:anywhere}.text-model-card small{max-width:100%;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}.text-model-card em{max-width:100%;margin-top:auto;color:var(--green);font-size:12px;font-style:normal;font-weight:900;overflow-wrap:anywhere}.text-model-icon{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border-radius:9px;color:var(--green);background:rgba(61,255,156,.08);border:1px solid rgba(61,255,156,.18)}.text-model-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.text-model-icon-deepseek svg,.text-model-icon-gemini svg{fill:currentColor;stroke:none}.text-model-card>.text-model-icon{margin-bottom:2px}.text-model-check{position:absolute;top:12px;inset-inline-end:12px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:transparent;border:1px solid var(--line)}.text-model-card.active{border-color:rgba(61,255,156,.58);background:rgba(61,255,156,.075)}.text-model-card.active .text-model-check{color:#03110a;background:var(--green);border-color:var(--green)}.text-model-prompt{display:grid;gap:8px}.text-model-prompt>span,.text-model-controls label>span{font-weight:850;font-size:13px}.text-model-prompt textarea{width:100%;resize:vertical;min-height:150px;padding:15px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:20px;line-height:1.85}.text-model-prompt textarea:focus,.text-model-controls select:focus{outline:2px solid rgba(61,255,156,.28);border-color:var(--green)}.text-model-prompt small{color:var(--muted);text-align:end}.text-model-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px}.text-model-controls label,.text-model-estimate{min-width:0;display:grid;gap:7px;padding:13px;background:var(--panel);border:1px solid var(--line);border-radius:18px}.text-model-controls select{width:100%;padding:11px;color:var(--text);background:#090d0b;border:1px solid var(--line);border-radius:13px}.text-model-estimate span,.text-model-estimate small{color:var(--muted);font-size:11px}.text-model-estimate strong{color:var(--green);font-size:18px}.text-model-submit{width:100%}.text-model-result{padding:16px;background:var(--panel);border:1px solid rgba(61,255,156,.28);border-radius:22px}.text-model-result header,.text-model-history article header{display:flex;justify-content:space-between;align-items:center;gap:10px}.text-model-result header>div{display:grid;gap:4px}.text-model-result header span{color:var(--green);font-size:12px;font-weight:900}.text-model-result header b{font-size:13px}#textModelAnswer{margin-top:14px;white-space:pre-wrap;line-height:1.95;overflow-wrap:anywhere}.text-model-history{padding:13px;background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:18px}.text-model-history summary{cursor:pointer;font-weight:850}#textModelHistory{display:grid;gap:9px;margin-top:12px}.text-model-history article{padding:12px;background:var(--panel);border-radius:14px}.text-model-history article header span{color:var(--green);font-size:12px}.text-model-history article p{margin:9px 0 0;color:#d5e1db;line-height:1.75;white-space:pre-wrap;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:680px){.text-model-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.text-model-tab:last-child{grid-column:1/-1}.text-model-tab{padding:10px}.text-model-tab small{font-size:9px}.text-model-icon{width:26px;height:26px;flex-basis:26px}.text-model-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:350px){.text-model-tab{gap:7px;padding:9px}.text-model-tab b{font-size:12px}.text-model-tab small{font-size:8.5px}.text-model-card{padding:13px}.text-model-card b{font-size:14px}}@media(max-width:319px){.text-model-grid,.text-model-controls{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.text-model-tab,.text-model-card{transition:none}}

/* --- Analyzer: real verification + confirm card + metric chart --- */
.analyzer-verify-card { margin: 14px 0 4px; padding: 14px; border: 1px solid rgba(61,255,156,.30); border-radius: 18px; background: radial-gradient(circle at 0% 0%, rgba(61,255,156,.14), transparent 52%), rgba(255,255,255,.035); display: grid; gap: 10px; }
.analyzer-verify-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.analyzer-verify-avatar, .analyzer-report-avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: rgba(61,255,156,.14); border: 1px solid rgba(61,255,156,.30); flex: none; }
.analyzer-verify-avatar img, .analyzer-report-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.analyzer-report-avatar { width: 42px; height: 42px; font-size: 18px; }
.analyzer-verify-id { display: grid; gap: 3px; min-width: 0; }
.analyzer-verify-id b { font-size: 15px; font-weight: 950; color: #f2fff8; overflow-wrap: anywhere; }
.analyzer-verify-id small { color: var(--muted); font-size: 11px; font-weight: 700; direction: ltr; text-align: start; overflow-wrap: anywhere; }
.analyzer-verify-badge { align-self: start; padding: 5px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 900; white-space: nowrap; background: rgba(61,255,156,.16); color: var(--green); border: 1px solid rgba(61,255,156,.30); }
.analyzer-verify-badge.medium { background: rgba(255,196,61,.14); color: #ffcf5c; border-color: rgba(255,196,61,.30); }
.analyzer-verify-badge.low { background: rgba(255,120,120,.14); color: #ff9a9a; border-color: rgba(255,120,120,.30); }
.analyzer-verify-stats { color: #dcf7ea; font-size: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.analyzer-verify-question { margin: 2px 0 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.analyzer-verify-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.analyzer-verify-actions .primary-cta { width: 100%; min-height: 46px; padding-inline: 10px; font-size: 13.5px; }
.ghost-cta { border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #e7f6ef; font-weight: 900; font-size: 13.5px; min-height: 46px; padding: 12px 14px; cursor: pointer; }
.ghost-cta:hover { border-color: rgba(61,255,156,.34); color: #f4fffa; }
.analyzer-report-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.analyzer-verified-chip { margin: 10px 0 0; padding: 9px 12px; border-radius: 14px; border: 1px solid rgba(61,255,156,.22); background: rgba(61,255,156,.08); color: #d9fbec; font-size: 11.5px; font-weight: 800; line-height: 1.9; overflow-wrap: anywhere; }
.analyzer-score-card.no-score strong { opacity: .55; }
.analyzer-chart { margin: 12px 0 0; padding: 13px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); display: grid; gap: 9px; }
.analyzer-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.analyzer-chart-head b { font-size: 13px; font-weight: 950; color: #effff7; }
.analyzer-chart-head small { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.analyzer-chart-row { display: grid; grid-template-columns: minmax(84px, 34%) minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.analyzer-chart-label { color: #dff6ec; font-size: 11.5px; font-weight: 800; overflow-wrap: anywhere; }
.analyzer-chart-track { height: 11px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; min-width: 40px; }
.analyzer-chart-bar { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--blue)); }
.analyzer-chart-value { color: var(--green); font-size: 11.5px; font-weight: 950; white-space: nowrap; }
@media (max-width: 360px) { .analyzer-verify-head { grid-template-columns: 44px minmax(0, 1fr); } .analyzer-verify-badge { grid-column: 1 / -1; justify-self: start; } .analyzer-chart-row { grid-template-columns: minmax(70px, 40%) minmax(0, 1fr) auto; } }

/* --- Shared verified-page identity strip (content + engagement calculator) --- */


/* --- Verified identity: same calm row as the URL input the user already liked --- */
.analyzer-verify-card { margin: 12px 0 6px; padding: 13px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.035); display: grid; gap: 11px; box-shadow: none; }
.analyzer-verify-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 18px; border: 1px solid var(--line); background: rgba(5,8,7,.74); text-align: start; }
.analyzer-verify-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; background: rgba(255,255,255,.06); box-shadow: none; }
.analyzer-verify-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.analyzer-verify-id { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.analyzer-verify-id b { max-width: 100%; color: var(--text); font-size: 13.5px; font-weight: 950; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analyzer-verify-id small { max-width: 100%; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.verify-trust { align-self: flex-start; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 950; white-space: nowrap; color: var(--green); background: rgba(61,255,156,.10); border: 1px solid rgba(61,255,156,.24); }
.verify-trust.official { color: #03110a; background: linear-gradient(135deg, var(--green), var(--lime)); border-color: transparent; }
.analyzer-verify-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.verify-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.045); border: 1px solid var(--line); color: #dff8ee; font-size: 11.5px; font-weight: 850; }
.verify-pill em { font-style: normal; font-size: 12px; }
.verify-bio { width: 100%; margin: 3px 0 0; color: var(--muted); font-size: 11px; line-height: 1.85; }
.analyzer-verify-question { margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 850; }
.analyzer-verify-actions { display: grid; gap: 8px; }
.analyzer-verify-actions .primary-cta { width: 100%; max-width: none; min-height: 48px; font-size: 14px; }
.ghost-cta { border: 0; background: transparent; color: var(--muted); font-weight: 900; font-size: 12.5px; min-height: 40px; padding: 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.ghost-cta:hover { color: var(--text); }

/* --- Not found: ask for the exact link --- */
.target-link-prompt { display: grid; gap: 9px; margin: 12px 0 4px; padding: 14px; border-radius: 18px; border: 1px dashed rgba(255,196,61,.4); background: rgba(255,196,61,.05); }
.target-link-prompt b { color: #ffe0a3; font-size: 13px; font-weight: 950; }
.target-link-prompt small { color: var(--muted); font-size: 11px; line-height: 1.85; }
.target-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.target-link-row input { width: 100%; min-height: 46px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(5,8,7,.74); color: var(--text); font-size: 13px; direction: ltr; text-align: start; }
.target-link-row input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 2px rgba(61,255,156,.18); }
.target-link-submit { min-height: 46px; padding: 10px 16px; border: 0; border-radius: 999px; font-weight: 950; font-size: 13px; color: #03110a; background: linear-gradient(135deg, var(--green), var(--blue)); cursor: pointer; white-space: nowrap; }

/* --- Verified strip: identical row to the input above it --- */
.target-verified-strip { display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; align-self: stretch; margin: 10px 0 0; padding: 11px 13px; border-radius: 18px; border: 1px solid var(--line); background: rgba(5,8,7,.74); text-align: start; }
/* inside the confirmed-page grid: span the full card width like the header above it */
.confirmed-page-card .target-verified-strip,
.tool-confirmed-card .target-verified-strip,
.confirmed-page-card #contentConfirmedVerified { grid-area: auto; grid-column: 1 / -1; width: 100%; justify-self: stretch; }
.target-verified-icon { width: 38px; height: 38px; flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; font-size: 18px; background: rgba(255,255,255,.06); }
.target-verified-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.target-verified-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; flex: 1 1 auto; text-align: start; }
.target-verified-text b { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--text); font-size: 13.5px; font-weight: 950; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.target-verified-text small { display: block; max-width: 100%; color: var(--muted); font-size: 11px; font-weight: 800; line-height: 1.65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.target-verified-tick { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; background: var(--green); color: #03110a; font-size: 10.5px; font-weight: 950; }
@media (max-width: 360px) {
  .analyzer-verify-head { grid-template-columns: auto minmax(0, 1fr); }
  .verify-trust { grid-column: 1 / -1; justify-self: start; }
  .target-link-row { grid-template-columns: minmax(0, 1fr); }
  .target-link-submit { width: 100%; }
}

.vid-pick b { font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vid-pick .vid-chips { display:inline-flex; align-items:center; gap:5px; flex-wrap:nowrap; min-width:0; overflow:hidden; }
.vid-pick .vid-chip { white-space:nowrap; padding:3px 7px; font-size:10px; }
.vid-pick-more { flex:0 0 auto; }

/* Native dropdowns must stay readable: Windows/Telegram WebViews render the
   popup with the system (light) surface and inherit our white text otherwise. */
select { color-scheme: dark; }
select option, select optgroup { background-color: #0d1a13; color: #eafff3; }
select option:checked { background-color: #173a27; color: #3dff9c; }


/* Notification bell and sheet: shared by the web app, the PWA and the Android host. */
.bell-btn { grid-area: bell; position: relative; justify-self: center; width: var(--topbar-control-size); height: var(--topbar-control-size); display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 16px; color: var(--text); background: rgba(22,28,24,.88); font-size: 0; }
.bell-btn span[data-icon] { width: 23px; height: 23px; display: grid; place-items: center; color: #e9fff2; }
.bell-btn .app-icon { width: 22px; height: 22px; }
.bell-badge { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, #ff5c7a, #ff9a4d); color: #20060a; font-size: 11px; font-weight: 800; line-height: 1; display: grid; place-items: center; }
.bell-badge[hidden] { display: none; }
.notifications-sheet { gap: 10px; }
.notifications-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.notifications-head small { color: var(--blue); letter-spacing: .14em; font-size: 11px; }
.notifications-head h3 { margin: 4px 0 0; font-size: 20px; }
.notifications-list { display: grid; gap: 8px; max-height: 56dvh; overflow-y: auto; overscroll-behavior: contain; }
.notification-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; width: 100%; min-height: 56px; padding: 12px; text-align: start; border: 1px solid var(--line); border-radius: 18px; background: rgba(16,21,17,.9); color: var(--text); }
.notification-row.unread { border-color: rgba(103,196,255,.42); background: linear-gradient(180deg, rgba(103,196,255,.12), rgba(16,21,17,.92)); }
.notification-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: rgba(255,255,255,.18); }
.notification-row.unread .notification-dot { background: var(--blue); box-shadow: 0 0 0 4px rgba(103,196,255,.16); }
.notification-copy { display: grid; gap: 3px; }
.notification-copy b { font-size: 14.5px; }
.notification-copy span { font-size: 13px; color: var(--muted); line-height: 1.6; }
.notification-copy small { font-size: 11.5px; color: rgba(255,255,255,.45); }
.notifications-empty { display: grid; gap: 6px; padding: 22px 6px; text-align: center; color: var(--muted); }
.notifications-foot { display: flex; justify-content: center; }
.ghost-button { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--text); }