@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; }
/* Six OTP boxes: the code stays visible as it fills, and a pasted six-digit code lands in all of
   them at once. Kept visually part of the existing form so nothing else shifts. */
.otp-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; direction: ltr; }
.otp-box { width: 100%; min-height: 56px; padding: 0; border: 1px solid var(--line); border-radius: 15px; background: rgba(5,8,7,.72); color: var(--text); font-family: Manrope, Arial, sans-serif; font-size: 22px; font-weight: 900; text-align: center; direction: ltr; letter-spacing: 0; outline: 0; transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }
.otp-box:focus { border-color: rgba(61,255,156,.62); background: rgba(9,18,13,.94); box-shadow: 0 0 0 3px rgba(61,255,156,.14); }
.otp-box.filled { border-color: rgba(61,255,156,.34); }
@media (max-width: 360px) { .otp-boxes { gap: 5px; } .otp-box { min-height: 50px; font-size: 19px; border-radius: 12px; } }
.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; }
/* The completion nudge: reward-led, quiet enough to sit inside the account panel. */
.identity-bonus-nudge { display: grid; gap: 4px; padding: 12px 14px; border: 1px dashed rgba(61,255,156,.38); border-radius: 16px; background: rgba(61,255,156,.06); }
.identity-bonus-nudge b { color: var(--green); font-size: 13px; }
.identity-bonus-nudge p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.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); }
.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; }
/* Opaque and unblurred on purpose: the sticky bar used to fade to fully transparent and carried a
   `backdrop-filter`, so scrolling content was visible through its lower half and the whole page became
   a backdrop root. On Android GPUs that combination is what leaves the band of horizontal colour noise
   the owner kept seeing over the tiles: one large blurred layer re-rasterised every scroll frame. */
/* Opaque at the top where the controls sit, then a short fade into the page - the bar used to
   be a flat `var(--bg)` slab, which read as a black band pasted over the app's top glow. There is
   deliberately still NO `backdrop-filter`: one large blurred layer re-rasterised on every scroll
   frame on Android GPUs and left the horizontal colour noise over the tiles. */
.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, #08150f 0%, #060d0a 66%, rgba(6,13,10,.62) 88%, rgba(5,7,6,0) 100%); box-shadow: none; }
.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 { position: relative; 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; }
/* Opacity only, deliberately: `rise` animates a transform, which turns every view into a composited
   layer, and a card that grows inside such a layer (a font arriving late and rewrapping its title is
   exactly that) can be left rasterised at its old height — clipped, with its panel cut off. */
.view { display: none; animation: fadeIn .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; 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; }
/* the two ways out sit on one row; the store button keeps the primary weight through its fill,
   not through size — that is what keeps the dialog compact without demoting the main action */
/* --- auth gate: the mascot, and the reward that is the actual reason to sign in --- */
.auth-card > img.auth-mascot { width: 104px; height: 104px; margin: 0 auto 1px; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(61,255,156,.22)) drop-shadow(0 12px 20px rgba(0,0,0,.42)); }
.auth-gate-reward { display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px; border-radius: 12px; background: linear-gradient(180deg, rgba(61,255,156,.22), rgba(61,255,156,.08)); border: 1px solid rgba(61,255,156,.3); color: #eaffc4; white-space: nowrap; }
.auth-gate-coin-icon { width: 21px; height: 21px; margin: 0 1px; vertical-align: -4px; }

/* --- welcome reward: the coins a new account just received --- */
.welcome-reward-card { width: min(100%, 360px); display: grid; justify-items: center; gap: 10px; padding: 22px 20px 18px; text-align: center; border-color: rgba(61,255,156,.32); background: radial-gradient(circle at 50% 0%, rgba(61,255,156,.16), transparent 46%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--panel); }
.welcome-reward-art { position: relative; display: grid; place-items: center; width: 118px; height: 118px; }
.welcome-reward-glow { position: absolute; width: 112px; height: 112px; opacity: .28; filter: blur(3px) saturate(1.1); }
.welcome-reward-mascot { position: relative; width: 100px; height: 100px; object-fit: contain; filter: drop-shadow(0 14px 24px rgba(0,0,0,.42)); }
.welcome-reward-card h3 { margin: 0; font-size: 19px; color: #f2ffd6; }
.welcome-reward-card p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--muted); }
.welcome-reward-badge { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: rgba(215,255,101,.12); border: 1px solid rgba(215,255,101,.34); color: #eaffc4; font-size: 12.5px; font-weight: 800; }
.welcome-reward-badge-icon { width: 16px; height: 16px; }
.welcome-reward-go { width: 100%; min-height: 48px; }

/* --- coin buttons: even weight, even padding, one clean row --- */
.coin-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.coin-modal-topup, .coin-modal-way { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; width: 100%; min-height: 54px; padding: 7px 10px; border-radius: 14px; cursor: pointer; text-align: start; }
.coin-modal-topup { border: 1px solid rgba(61,255,156,.5); background: linear-gradient(180deg, rgba(61,255,156,.24), rgba(61,255,156,.09)); color: #eafff3; box-shadow: 0 8px 18px rgba(61,255,156,.14); }
.coin-modal-topup:active { transform: scale(.99); }
.coin-modal-topup-icon, .coin-modal-way-icon { font-size: 16px; line-height: 1; }
.coin-modal-topup-copy, .coin-modal-way-copy { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.coin-modal-topup-copy b, .coin-modal-way-copy b { font-size: 12.5px; line-height: 1.4; }
.coin-modal-topup-copy small, .coin-modal-way-copy small { color: rgba(234,255,243,.72); font-size: 10.5px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.coin-modal-grid .confirm-modal-actions { margin: 0; grid-column: 1 / -1; }
.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 fadeOut { from { opacity: 1; } to { opacity: 0; } }
@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-pill-save { color: #d7ff55; background: rgba(215,255,85,.12); border-color: rgba(215,255,85,.35); }
.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-package-value { display: grid; gap: 6px; margin: 0; padding: 10px 12px; list-style: none; border-radius: 14px; background: rgba(255,255,255,.035); }
.shop-package-value li { display: flex; align-items: center; gap: 8px; color: #e9f4ee; font-size: 12.5px; line-height: 1.45; }
.shop-package-value li span { flex: none; font-size: 14px; }
.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: 100%; height: auto; min-height: 38px; padding: 9px 10px; font-size: 12px; border-radius: 12px; }
}
@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; }
.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,.72); 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,.72); 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-copy { min-width: 0; flex: 1 1 auto; }
.profile-summary-copy h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary-copy p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A compact way out of the account, sitting in the card the user already opens. The old full-width
   red button dominated the page; this stays quiet until it is wanted. */
.profile-signout-chip { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 1px solid rgba(255,105,105,.30); border-radius: 999px; color: #ffb3b3; background: rgba(255,80,80,.07); font-size: 12px; font-weight: 850; }
.profile-signout-chip:hover { border-color: rgba(255,105,105,.55); background: rgba(255,80,80,.13); }
.profile-signout-chip:disabled { opacity: .5; cursor: wait; }
.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:7px 10px; 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:2px; 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:0; padding:5px 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:6px; padding:9px; 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:5px; padding:6px 9px; 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:4px; min-height:24px; padding:2px 8px; 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:128px; min-width:0; text-overflow:ellipsis; 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 9px; border:1px solid rgba(255,255,255,.10); border-radius:999px; background:rgba(255,255,255,.05); color:#8b9993; 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.5px solid currentColor; border-radius:2.5px; transition:background .2s ease; }
.vid-ratios button.active i { background:rgba(61,255,156,.24); }
.vid-ratios .ratio-916 { width:9px; height:16px; }
.vid-ratios .ratio-169 { width:17px; height:10px; }
.vid-ratios .ratio-11 { width:12px; height:12px; }
.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; }
.video-results { display:grid; gap:8px; }
.video-results[hidden] { display:none; }
.video-result-card { display:grid; gap:5px; padding:10px; border-radius:16px; background:#070b08; border:1px solid rgba(255,255,255,.07); }
.video-result-card video { width:100%; border-radius:14px; background:#000; }
.video-result-card small { color:var(--green); font-size:10.5px; font-weight:800; }

.vid-actionbar { position:sticky; bottom:8px; z-index:6; display:flex; align-items:center; justify-content:space-between; gap:9px; padding:8px 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:10px}.text-model-tabs{display:flex;flex-wrap:nowrap;gap:7px;width:100%;max-width:100%;min-width:0;padding:2px 1px 6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}.text-model-tabs::-webkit-scrollbar{display:none}.text-model-tab{flex:0 0 auto;min-width:0;display:flex;align-items:center;gap:7px;text-align:start;padding:8px 11px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;white-space:nowrap}.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{display:none}.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:minmax(0,1fr);gap:6px;min-width:0;max-width:100%}.text-model-card{position:relative;min-width:0;max-width:100%;min-height:0;padding:8px 10px;display:flex;flex-direction:row;align-items:center;gap:6px;text-align:start;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}.text-model-card b{flex:none;font-size:12.5px;line-height:1.3;white-space:nowrap}.text-model-card small{flex:1 1 auto;min-width:0;color:var(--muted);font-size:9.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.text-model-card em{flex:none;color:var(--green);font-size:10px;font-style:normal;font-weight:900;white-space:nowrap}.text-model-icon{width:24px;height:24px;flex:0 0 24px;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:0;flex:0 0 20px;width:20px;height:20px}.text-model-check{flex:none;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:transparent;border:1px solid var(--line);font-size:11px}.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:210px;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:8px}.text-model-controls label,.text-model-estimate,.text-model-level{min-width:0;display:grid;gap:7px;padding:11px 12px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.text-model-level>span{font-weight:850;font-size:13px}
.text-model-level-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(61,255,156,.3);border-radius:13px;background:linear-gradient(135deg,rgba(61,255,156,.14),rgba(61,255,156,.05));color:var(--green);font:inherit;font-size:13px;font-weight:950;cursor:pointer;transition:border-color .18s ease}
.text-model-level-toggle:hover,.text-model-level-toggle:focus-visible{border-color:var(--green);outline:none}
.text-model-level-toggle.bump{animation:tierBump .26s cubic-bezier(.2,.9,.3,1)}
.text-model-level-dots{display:inline-flex;flex-direction:column;gap:2px}
.text-model-level-dots i{width:4px;height:4px;border-radius:50%;background:rgba(61,255,156,.3)}
.text-model-level-dots i.on{background:var(--green);box-shadow:0 0 6px rgba(61,255,156,.9)}.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-tab{padding:8px 10px}}@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); }

/* A visitor who has not signed in yet: the door is offered, never forced. */
.auth-guest-note { margin: 10px 0 4px; color: var(--muted); font-size: 13.5px; line-height: 1.9; }
.auth-later-button { margin-top: 4px; }
/* The badge hangs 6px outside the 44px pill. `overflow: hidden` on .profile-pill (which clips the
   avatar to a circle) would cut it off, so the guest variant opts out. */
.profile-pill.guest-pill { border-style: dashed; opacity: .9; overflow: visible; }
.profile-pill.guest-pill::after {
  content: 'ورود';
  position: absolute;
  inset-inline-end: -6px;
  inset-block-end: -6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent, #34d399);
  color: #04120b;
  font-size: 11px;
  font-weight: 700;
}
.top-coin-pill.guest-coin { opacity: .75; }
/* Parsis Guard */
.guard-card,.guard-safe-note{display:grid;gap:12px;padding:16px;border:1px solid rgba(61,255,156,.16);border-radius:22px;background:linear-gradient(145deg,rgba(61,255,156,.08),rgba(255,255,255,.025));margin:12px 0}.guard-card h3,.guard-safe-note b{margin:0}.guard-card p,.guard-safe-note p{margin:0;color:var(--muted);font-size:12px;line-height:1.8}.guard-identity-list,.guard-scan-buttons,.guard-pass-options{display:grid;gap:9px}.guard-identity-chip{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:9px 12px;border:1px solid rgba(61,255,156,.26);border-radius:999px;color:var(--green);background:rgba(61,255,156,.08);font-weight:800}.guard-score-card{grid-template-columns:1fr;align-items:center}.guard-score-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:11px;--guard-color:var(--green)}.guard-score-content small{color:var(--guard-color);font-weight:800}.guard-score-copy{display:grid;gap:4px;justify-items:center}.guard-score-copy b{font-size:13px}.guard-score-good{--guard-color:#3dff9c}.guard-score-warn{--guard-color:#ffca57}.guard-score-danger{--guard-color:#ff5577}.guard-score-idle{--guard-color:rgba(255,255,255,.28)}.guard-gauge{width:124px;height:124px;display:grid;place-items:center;align-content:center;border-radius:50%;background:conic-gradient(var(--guard-color) var(--guard-score,0%),rgba(255,255,255,.09) 0);position:relative;box-shadow:0 12px 30px -14px var(--guard-color)}.guard-gauge-idle{background:conic-gradient(rgba(255,255,255,.09) 0 100%)}.guard-gauge-idle strong{color:var(--muted)}.guard-gauge::after{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--panel)}.guard-gauge strong,.guard-gauge span{position:relative;z-index:1}.guard-gauge strong{font-size:34px}.guard-gauge span{font-size:10px;color:var(--muted)}.guard-scan-btn{min-height:46px}.guard-section-heading{display:flex;justify-content:space-between;gap:10px;align-items:center}.guard-muted,.guard-section-heading>span{color:var(--muted);font-size:11px}.guard-findings{display:grid;gap:8px}.guard-finding{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px;border-inline-start:4px solid var(--muted);border-radius:12px;background:rgba(255,255,255,.035)}.guard-finding>div{display:grid;gap:3px}.guard-finding small{color:var(--muted);font-size:10px}.guard-finding>span{font-size:10px;font-weight:900}.guard-severity-high{border-color:#ff5577}.guard-severity-medium{border-color:#ffca57}.guard-severity-low{border-color:var(--green)}.guard-pass-option{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px;border:1px solid rgba(61,255,156,.22);border-radius:15px;color:var(--text);background:rgba(3,17,10,.65);text-align:start}.guard-pass-option span{color:var(--green);font-size:11px;font-weight:900}.guard-pass-active{display:flex;justify-content:space-between;gap:10px;padding:14px;border:1px solid rgba(61,255,156,.35);border-radius:15px;color:var(--green)}.guard-password-row{display:flex;gap:8px}.guard-password-row input{flex:1}.guard-password-row .primary-cta{width:auto;white-space:nowrap}.guard-safe-note{border-color:rgba(103,196,255,.22);background:rgba(103,196,255,.06)}.guard-safe-note b{color:var(--blue)}.guard-empty{color:var(--muted);font-size:12px}.guard-card button:disabled{opacity:.55;cursor:wait}@media(max-width:480px){.guard-score-content{align-items:center}.guard-password-row{flex-direction:column}.guard-password-row .primary-cta{width:100%}}

/* --- Parsis Guard: recovery assistant chat (additive) --- */
.guard-chat-log {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 330px;
  overflow-y: auto;
  padding: 4px 2px;
  margin: 10px 0 12px;
}
.guard-chat-bubble {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.95;
  white-space: pre-wrap;
  word-break: break-word;
}
.guard-chat-bubble.bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: #eafff4;
  border-end-start-radius: 6px;
}
.guard-chat-bubble.user {
  align-self: flex-end;
  background: linear-gradient(145deg, rgba(61, 255, 156, 0.22), rgba(61, 255, 156, 0.10));
  border: 1px solid rgba(61, 255, 156, 0.35);
  color: #eafff4;
  border-end-end-radius: 6px;
}
.guard-chat-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.guard-chat-row input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 11px 13px;
  color: #eafff4;
  font-family: inherit;
  font-size: 13.5px;
}
.guard-chat-row input:focus {
  outline: none;
  border-color: rgba(61, 255, 156, 0.45);
}
.guard-chat-card .guard-section-heading{align-items:flex-start}
.guard-chat-card .guard-section-heading>div{min-width:0}
.guard-chat-card .guard-section-heading p{margin-top:3px}
.guard-chat-log.guide-chat{max-height:320px;min-height:168px;margin:0;padding:14px 9px 18px;gap:12px;border-radius:20px;background:radial-gradient(circle at 80% 0%,rgba(61,255,156,.07),transparent 38%),linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));animation:fadeIn .22s ease-out}
.guard-chat-log .chat-row{max-width:94%;animation:messageIn .18s ease-out}
.guard-chat-log .chat-bubble{font-family:inherit;font-size:13px;line-height:1.85}
.guard-chat-log .chat-time{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.guard-chat-row{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:end;margin-top:10px}
.guard-chat-row textarea{min-height:50px;max-height:116px;margin:0;font-family:inherit}
.guard-chat-row button{width:50px;height:50px;padding:0;display:grid;place-items:center;font-size:0}
.guard-chat-row button .app-icon{width:22px;height:22px;color:#03110a;transform:scaleX(-1)}
.guard-chat-card .guard-muted{font-family:inherit}
#view-guard{animation:fadeIn .22s ease-out}
#view-guard>.page-head{view-transition-name:guard-head;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;min-height:76px;padding:14px 16px;margin-bottom:12px}
#view-guard>.page-head>span{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;font-size:0}
#view-guard>.page-head>span .app-icon{width:27px;height:27px}
.guard-safe-note b{display:flex;align-items:center;gap:7px}
.guard-safe-note b .app-icon{width:18px;height:18px;color:var(--green)}
.guard-recovery-card{gap:14px}.guard-free-badge{padding:5px 9px;border:1px solid rgba(61,255,156,.3);border-radius:999px;color:var(--green);background:rgba(61,255,156,.1);font-size:11px;font-weight:900}.guard-recovery-templates,.guard-recovery-links{display:grid;gap:8px}.guard-recovery-item,.guard-recovery-link{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);overflow:hidden}.guard-recovery-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px;color:var(--text);background:transparent;border:0;text-align:start;font:inherit;cursor:pointer}.guard-recovery-toggle>span:first-child{display:grid;gap:4px;min-width:0}.guard-recovery-toggle b{font-size:13px;line-height:1.5}.guard-recovery-toggle small,.guard-recovery-link small{color:var(--muted);font-size:10px;line-height:1.6}.guard-recovery-chevron{color:var(--green);font-size:20px;transition:transform .2s ease}.guard-recovery-toggle[aria-expanded="true"] .guard-recovery-chevron{transform:rotate(180deg)}.guard-recovery-detail{padding:0 13px 13px;animation:fadeIn .18s ease-out}.guard-recovery-when{margin:0 0 9px!important}.guard-recovery-body{margin:0;padding:12px;max-height:300px;overflow:auto;white-space:pre-wrap;word-break:break-word;color:var(--text);border:1px solid var(--line);border-radius:12px;background:var(--panel);font:inherit;font-size:12px;line-height:2}.guard-recovery-actions{display:flex;justify-content:flex-start;margin-top:9px}.guard-copy-template{display:inline-flex;align-items:center;gap:6px}.guard-copy-template.success{color:var(--green);border-color:rgba(61,255,156,.45)}.guard-copy-template .app-icon{width:16px;height:16px}.guard-recovery-tips{margin:10px 0 0;padding:0 18px 0 0;color:var(--muted);font-size:11px;line-height:1.9}.guard-recovery-links-heading{display:grid;gap:3px;padding-top:3px}.guard-recovery-links-heading h4{margin:0;font-size:13px}.guard-recovery-links-heading p{margin:0!important}.guard-recovery-link{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;color:var(--text);text-decoration:none}.guard-recovery-link-copy{display:grid;gap:3px;min-width:0}.guard-recovery-link b{font-size:12px;line-height:1.5}.guard-recovery-link code{direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--green);font-size:10px}.guard-recovery-link>span:last-child{color:var(--green);font-size:18px;flex:0 0 auto}.guard-inline-error{color:#ff9aaa!important}
@media (prefers-reduced-motion: reduce){#view-guard,.guard-chat-log.guide-chat,.guard-chat-log .chat-row,.guard-recovery-detail{animation:none!important}}

/* Guard IA and allowance additions */
.guard-explainer-list{display:grid;gap:8px;margin:0;padding:0 20px 0 0;color:var(--text);font-size:13px;line-height:1.85}.guard-explainer-list li::marker{color:var(--green)}.guard-explainer-limit{padding:10px 12px;border-radius:13px;background:rgba(255,196,87,.07);border:1px solid rgba(255,196,87,.2);color:#f1dfb0!important}.guard-explainer-limit b{color:#ffd276}.guard-candidate-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px;border:1px solid rgba(103,196,255,.22);border-radius:15px;background:rgba(103,196,255,.06)}.guard-candidate-row>span{display:grid;gap:3px;min-width:0}.guard-candidate-row small{color:var(--muted);font-size:10px}.guard-candidate-row .ghost-btn{white-space:nowrap;padding:9px 11px;font-size:11px}.guard-pass-features{display:grid;gap:7px;margin:0;padding:0 20px 0 0;color:var(--text);font-size:12px;line-height:1.8}.guard-pass-features li::first-letter{color:var(--green)}.guard-pass-free-note{padding-top:2px!important;font-size:11px!important}.guard-chat-templates{display:flex;gap:8px;overflow-x:auto;padding:2px 1px 8px;scrollbar-width:none}.guard-chat-templates::-webkit-scrollbar{display:none}.guard-chat-template-chip{flex:0 0 auto;padding:8px 12px;border:1px solid rgba(61,255,156,.25);border-radius:999px;color:var(--text);background:rgba(61,255,156,.07);font:inherit;font-size:11px;white-space:nowrap;cursor:pointer}.guard-chat-template-chip:active{transform:scale(.98)}.guard-chat-template-chip:disabled{opacity:.45;cursor:not-allowed}
.guard-chat-template-chip-scam{color:#03110a;background:linear-gradient(135deg,var(--green),var(--lime));border-color:transparent;font-weight:950;display:inline-flex;align-items:center;gap:6px}
.guard-chat-template-chip-scam::before{content:'✓'}.guard-chat-allowance{padding:9px 11px;border-radius:13px;color:var(--green);background:rgba(61,255,156,.07);font-size:11px;font-weight:850;line-height:1.7}.guard-chat-upsell{padding:10px 11px;border:1px solid rgba(103,196,255,.28);border-radius:13px;color:#d7edff;background:rgba(103,196,255,.08);font-size:11px;line-height:1.8}.guard-chat-row textarea:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:480px){.guard-candidate-row{align-items:stretch;flex-direction:column}.guard-candidate-row .ghost-btn{width:100%}}

/* Compact Guard layout and progressive disclosure */
#view-guard>.guard-card{gap:9px;padding:13px;margin:8px 0;border-radius:18px}
#view-guard>.page-head{min-height:64px;padding:11px 13px;margin-bottom:8px}
#view-guard>.page-head>span{width:42px;height:42px;border-radius:14px}
#view-guard .guard-section-heading h3,#view-guard .guard-card>h3{font-size:14px}
#view-guard .guard-card p,#view-guard .guard-safe-note p{line-height:1.65}
#view-guard .guard-explainer-list{gap:5px;font-size:12px;line-height:1.7}
.guard-chat-card{padding:8px!important}
.guard-chat-toggle{width:100%;min-height:52px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:9px;padding:7px 5px;color:var(--text);background:transparent;border:0;text-align:start;font:inherit;cursor:pointer;border-radius:13px}
.guard-chat-toggle:hover,.guard-chat-toggle:focus-visible{background:rgba(61,255,156,.06);outline:none}
.guard-chat-toggle:active{transform:scale(.99)}
.guard-chat-toggle-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;color:var(--green);background:rgba(61,255,156,.12);font-size:18px}
.guard-chat-toggle-copy{display:grid;gap:2px;min-width:0}
.guard-chat-toggle-copy b{font-size:13px}
.guard-chat-toggle-copy small{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.guard-chat-toggle-meta{color:var(--green);font-size:10px;font-weight:800;white-space:nowrap}
.guard-chat-toggle-chevron{color:var(--green);font-size:18px;transition:transform .2s ease}
.guard-chat-toggle.is-open .guard-chat-toggle-chevron{transform:rotate(180deg)}
.guard-chat-panel{display:grid;gap:9px;padding:10px 3px 3px;animation:fadeIn .2s ease-out}
.guard-chat-panel[hidden]{display:none}
.guard-chat-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:0 3px}
.guard-chat-panel-head h3{margin:0;font-size:13px}
.guard-chat-panel-head p{margin:2px 0 0;font-size:11px}
.guard-chat-close{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;color:var(--muted);background:rgba(255,255,255,.04);font-size:22px;line-height:1;cursor:pointer}
.guard-chat-close:active{transform:scale(.96)}
.guard-chat-log.guide-chat{min-height:130px;max-height:280px;padding:10px 7px 13px;border-radius:16px}
.guard-chat-row{margin-top:0}
.guard-pass-options{gap:7px}
.guard-pass-option{display:grid;gap:5px;min-height:76px;padding:11px 12px;text-align:start;color:var(--text);border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.035);font:inherit;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.guard-pass-option:hover,.guard-pass-option:focus-visible{border-color:rgba(61,255,156,.5);background:rgba(61,255,156,.07);outline:none}
.guard-pass-option:active{transform:scale(.99)}
.guard-pass-option-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.guard-pass-option-head b{font-size:13px}
.guard-pass-option small{color:var(--muted);font-size:11px}
.guard-pass-option>strong{color:var(--green);font-size:11px}
.guard-pass-active{display:grid;gap:9px;padding:12px;border:1px solid rgba(61,255,156,.35);border-radius:15px;background:rgba(61,255,156,.08)}
.guard-pass-remaining-copy{display:grid;gap:2px}
.guard-pass-remaining-copy small{color:var(--green);font-size:11px;font-weight:800}
.guard-pass-remaining-copy strong{font-size:25px;line-height:1.2;font-variant-numeric:tabular-nums}
.guard-pass-remaining-copy span,.guard-pass-expired span{color:var(--muted);font-size:11px}
.guard-pass-progress{height:6px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.12)}
.guard-pass-progress span{display:block;height:100%;border-radius:inherit;background:var(--green);transition:width .3s ease}
.guard-pass-expired{border-color:rgba(255,196,87,.34);background:rgba(255,196,87,.07)}
.guard-pass-expired b{color:#ffd276;font-size:18px}

/* --- Guard subscription: the coin badge must stay readable ---
   The legacy `.guard-pass-option span{color:var(--green)}` rule also hit the badge
   inside it, painting green text on a green pill. Restore the badge's own dark text. */
.guard-pass-option .coin-cost-badge{color:#03110a;font-size:13px;font-weight:950;padding:5px 12px;gap:5px}
.guard-pass-option .coin-cost-badge .coin-cost-icon{width:16px;height:16px}
.coin-inline-icon{width:1em;height:1em;vertical-align:-.14em;margin-inline-start:.2em;display:inline-block}
.guard-pass-option .coin-cost-badge.free-cost-badge{color:#eafff2}
.guard-pass-option .guard-pass-option-head b{font-size:14.5px}
.guard-pass-option .guard-pass-option-head{align-items:center}

/* --- Guard: first-run intro ------------------------------------------------
   Shown once, above everything else, with a short entrance so it reads as a
   deliberate welcome rather than a broken layout. */
.guard-intro{animation:sheetIn .24s ease-out both}
.guard-intro[hidden]{display:none}
.guard-intro-card{display:grid;gap:11px;padding:16px;border:1px solid rgba(61,255,156,.34);border-radius:22px;background:radial-gradient(circle at 88% -10%,rgba(61,255,156,.16),transparent 46%),linear-gradient(150deg,rgba(61,255,156,.11),rgba(255,255,255,.03));box-shadow:0 18px 42px -30px rgba(61,255,156,.5)}
.guard-intro-head{display:flex;align-items:center;gap:9px}
.guard-intro-head .app-icon{width:22px;height:22px;color:var(--green)}
.guard-intro-head b{font-size:15px;line-height:1.5}
.guard-intro-lead{margin:0;padding:11px 12px;border:1px solid rgba(61,255,156,.24);border-radius:14px;background:rgba(61,255,156,.07);color:var(--text);font-size:13px;line-height:1.85}
.guard-password-safe{display:flex;align-items:center;gap:6px;margin-top:2px;color:var(--muted);font-size:11px;line-height:1.7}
.guard-password-safe .app-icon{width:14px;height:14px;flex:0 0 auto;color:var(--green)}
.guard-intro-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.guard-intro-list li{padding:9px 11px;border:1px solid rgba(61,255,156,.16);border-radius:13px;background:rgba(255,255,255,.035);color:var(--text);font-size:12.5px;line-height:1.8}
.guard-intro-list b{color:var(--green)}
.guard-intro-limit{margin:0;padding:10px 12px;border:1px solid rgba(255,196,87,.2);border-radius:13px;background:rgba(255,196,87,.07);color:#f1dfb0;font-size:12px;line-height:1.8}
.guard-intro-limit b{color:#ffd276}
.guard-intro-note{margin:0;color:var(--muted);font-size:11px;line-height:1.8}
.guard-intro-cta{min-height:46px;font-size:14px}

/* --- Guard: subscription tiers ---------------------------------------------
   Each tier is a card: name + tag, one-line promise, what it includes, then the
   buy action as its own full-width button carrying the coin price. */
/* A <button> styled as a grid does not stretch its implicit column the way a plain grid does —
   children hug their content (measured: the includes block filled only 73% of the card). Force
   the column to the full width so every block inside spans the card. */
.guard-pass-option{display:grid;gap:10px;min-height:0;padding:14px;border-radius:18px;width:100%;justify-items:stretch;grid-template-columns:minmax(0,1fr)}
.guard-pass-option > *{min-width:0;width:100%}
.guard-pass-option.is-best{border-color:rgba(61,255,156,.42);background:linear-gradient(158deg,rgba(61,255,156,.1),rgba(255,255,255,.03))}
/* The owner asked for the tiers to be centred (or to fill the width) — the header is centred and
   every block inside stretches to the card's full width instead of hugging its content. */
.guard-pass-option-head{justify-content:center}
.guard-pass-option-title{display:grid;gap:3px;justify-items:center;text-align:center}
.guard-pass-option .guard-pass-option-title b{font-size:15px}
.guard-pass-tag{padding:3px 8px;border:1px solid rgba(61,255,156,.28);border-radius:999px;color:var(--green);background:rgba(61,255,156,.1);font-size:10px;font-weight:900}
.guard-pass-detail{color:var(--muted);font-size:11.5px;line-height:1.7;text-align:center}
.guard-pass-savings{display:block;justify-self:center;width:max-content;padding:4px 9px;border-radius:999px;color:#03110a;background:var(--green);font-size:10.5px;font-weight:900}
.guard-pass-includes{display:grid;gap:6px;margin:0;padding:11px 12px;width:100%;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.028);color:var(--text);font-size:12px;line-height:1.7}
.guard-pass-includes li{padding-inline-start:17px;position:relative}
.guard-pass-includes li::before{content:'✓';position:absolute;inset-inline-start:0;color:var(--green);font-weight:900}
/* The buy action. Beats the legacy `.guard-pass-option span{color:var(--green)}` (0,1,1). */
.guard-pass-option .guard-pass-buy{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 16px;border-radius:15px;color:#03110a;background:linear-gradient(135deg,var(--green),#67c4ff);font-size:15px;font-weight:950;box-shadow:0 14px 30px -18px rgba(61,255,156,.85)}
.guard-pass-option .guard-pass-buy-coins{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;color:#eafff2;background:rgba(3,17,10,.42);font-size:13px;font-weight:950}
.guard-pass-option .guard-pass-buy-coins .coin-cost-icon{width:16px;height:16px}
/* The badge's own rule is a green pill with dark text — invisible on a green button.
   Three classes beat the two-class override above and the base `.coin-cost-badge`. */
.guard-pass-option .guard-pass-buy-coins .coin-cost-badge{color:#eafff2;background:rgba(3,17,10,.55);font-size:14px;font-weight:950;padding:4px 11px}
.guard-pass-option:active .guard-pass-buy{transform:scale(.99)}

/* --- Guard: give the assistant real room ----------------------------------- */
.guard-chat-log.guide-chat{min-height:210px;max-height:340px}
.guard-chat-card .guard-chat-toggle{border-radius:18px 18px 0 0}
@media (max-width:480px){.guard-pass-option .guard-pass-buy{font-size:14.5px}}

/* --- Guard mascot: the transparent render, so no tile and no clipping --- */
.guard-mascot{width:100%;height:100%;object-fit:contain;display:block}
.guard-chat-toggle-icon{padding:0;overflow:visible;background:transparent}
.guard-chat-toggle-icon .guard-mascot{width:34px;height:34px}
.guard-chat-log .chat-mini-avatar{overflow:visible;padding:0;background:transparent}
.guard-chat-log .chat-mini-avatar .guard-mascot{width:100%;height:100%}

/* --- Shared layout + cross-fade between views (View Transitions API) --- */
/* Entering view: a short cross-fade instead of a View Transitions overlay, so the new DOM is
   live and tappable the instant the switch happens. */
.view.view-enter{animation:viewEnter .22s ease-out both}
/* opacity only: a translate here shifts the entering view for the length of the fade, which
   is long enough to catch a layout measurement (and to push a bottom bar past the viewport). */
@keyframes viewEnter{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root),::view-transition-group(root){animation:none!important}
}

/* --- Shop packages: readable price/feature hierarchy --- */
#productList .shop-package-card{padding:18px;gap:14px}
.shop-package-title h3{font-size:17px;letter-spacing:-.01em}
.shop-package-title small{color:var(--muted);font-size:11.5px;line-height:1.6}
.shop-price-row{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.045)}
.shop-price-row b{font-size:23px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.shop-coin-amount strong{font-variant-numeric:tabular-nums}
.shop-package-value{padding:11px 13px;gap:7px}
.shop-package-value li{font-size:13px;line-height:1.6}
.shop-package-meta span{font-size:12px;color:#9fb3a9}

/* --- Specialist assistants: list --- */
.assistant-grid{display:grid;gap:10px;margin:12px 0}
.asst-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 13px;border:1px solid rgba(61,255,156,.16);border-radius:20px;color:var(--text);background:linear-gradient(140deg,rgba(61,255,156,.09),rgba(255,255,255,.015) 60%);text-align:start;font:inherit;cursor:pointer;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.asst-card:hover,.asst-card:focus-visible{border-color:rgba(61,255,156,.45);box-shadow:0 14px 34px -22px rgba(61,255,156,.75);outline:none}
.asst-card:active{transform:scale(.99)}
/* The mascots are transparent renders, not flat icons: no tile, no rounded-square clip and
   no rectangular shadow (all three would cut the character or box it in). The glow is a
   drop-shadow of the character's own silhouette, so it follows the artwork. */
.asst-card-art{width:58px;height:58px;flex:none;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(61,255,156,.30))}
.asst-card-copy{display:grid;gap:4px;min-width:0}
.asst-card-copy b{font-size:14.5px;font-weight:900}
.asst-card-copy small{color:var(--muted);font-size:11.5px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.asst-card-go{color:var(--green);font-size:22px;line-height:1}

/* --- Assistant chat: one frame that gets out of the way --- */
.asst-shell{display:flex;flex-direction:column;gap:10px;margin:10px 0 0;padding:14px;border:1px solid rgba(61,255,156,.2);border-radius:26px;background:
  radial-gradient(120% 90% at 100% 0%,rgba(61,255,156,.12),transparent 55%),
  linear-gradient(180deg,rgba(16,26,21,.92),rgba(9,14,12,.96));
  box-shadow:0 26px 60px -34px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05);min-height:calc(100vh - 172px)}
.asst-hero{display:grid;justify-items:center;gap:8px;padding:22px 4px 6px;text-align:center}
/* the identity block sits at the top of the empty frame; the first message folds it away */
.asst-shell.is-chatting .asst-hero{display:none}
/* with nothing said yet there is no conversation area to show - no placeholder copy either */
.asst-shell:not(.is-chatting) .asst-thread{display:none}
.asst-shell:not(.is-chatting) .asst-composer{margin-top:auto}
/* the starter-prompt button belongs to the opening screen; it steps aside once chatting */
.asst-shell.is-chatting .asst-prompt-btn{display:none}
.asst-mascot{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 20px 38px rgba(61,255,156,.38))}
.asst-intro{margin:0;min-height:3.4em;color:var(--text);font-size:13.5px;line-height:2}
.asst-intro.is-typing{-webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.18));mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.18))}

.asst-thread{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;min-height:0;overflow-y:auto;padding:16px 6px;border-radius:20px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.045)}
.asst-row{display:flex;gap:9px;max-width:100%;animation:messageIn .2s ease-out}
/* My turn sits on the right and the assistant's on the left, in BOTH writing directions:
   a row packs from its own inline-start, so the flex direction that lands my turn on the
   right physically flips when the page flips. The tail corners stay physical for the same
   reason - the avatar is always physically on my right and on the assistant's left. */
:where([dir="rtl"]) .asst-row.user,
:where([dir="ltr"]) .asst-row.bot{flex-direction:row}
:where([dir="rtl"]) .asst-row.bot,
:where([dir="ltr"]) .asst-row.user{flex-direction:row-reverse}
.asst-mini-avatar{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;overflow:hidden;background:rgba(255,255,255,.06);color:var(--muted);font-size:9.5px;font-weight:900}
.asst-mini-avatar img{width:100%;height:100%;object-fit:cover}
.asst-stack{display:grid;gap:4px;max-width:84%}
.asst-bubble{padding:11px 14px;border-radius:18px;font-size:13px;line-height:1.95;word-break:break-word;white-space:pre-wrap}
.asst-bubble.bot{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.05);border-top-left-radius:6px;color:var(--text)}
.asst-bubble.user{background:linear-gradient(140deg,rgba(61,255,156,.2),rgba(61,255,156,.1));border:1px solid rgba(61,255,156,.28);border-top-right-radius:6px;color:var(--text)}
.asst-bubble-image{display:block;width:100%;max-width:200px;border-radius:12px;margin-bottom:8px}
.asst-bubble-text{white-space:pre-wrap}
.asst-typing{color:var(--muted);letter-spacing:.15em}

.asst-composer{display:grid;gap:8px;padding:10px 11px;border:1px solid rgba(61,255,156,.16);border-radius:22px;background:rgba(0,0,0,.34)}
.asst-composer textarea{min-height:44px;max-height:112px;margin:0;padding:11px 13px;border:1px solid rgba(255,255,255,.06);border-radius:16px;background:rgba(255,255,255,.03);font-family:inherit;font-size:13.5px;color:var(--text);resize:none}
.asst-composer textarea:focus{outline:none;border-color:rgba(61,255,156,.5);box-shadow:0 0 0 3px rgba(61,255,156,.12)}
.asst-bar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.asst-prompt-btn{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(61,255,156,.24);border-radius:14px;background:rgba(61,255,156,.07);color:var(--green);font:inherit;font-size:11.5px;font-weight:900;cursor:pointer;white-space:nowrap}
.asst-prompt-btn .app-icon{width:15px;height:15px;flex:none}
.asst-prompt-btn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asst-prompt-btn:disabled{opacity:.45;cursor:default}
.asst-prompt-btn:hover:not(:disabled),.asst-prompt-btn:focus-visible{border-color:rgba(61,255,156,.55);outline:none}

.asst-tier-toggle{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid rgba(61,255,156,.3);border-radius:14px;background:linear-gradient(135deg,rgba(61,255,156,.14),rgba(61,255,156,.05));color:var(--green);font:inherit;font-size:11.5px;font-weight:950;cursor:pointer;transition:border-color .18s ease,transform .12s ease}
.asst-tier-toggle:hover,.asst-tier-toggle:focus-visible{border-color:var(--green);outline:none}
.asst-tier-toggle.bump{animation:tierBump .26s cubic-bezier(.2,.9,.3,1)}
.asst-tier-dots{display:inline-flex;flex-direction:column;gap:2px}
.asst-tier-dots i{width:4px;height:4px;border-radius:50%;background:rgba(61,255,156,.3)}
.asst-tier-dots i.on{background:var(--green);box-shadow:0 0 6px rgba(61,255,156,.9)}
.asst-tier-toggle b{font-size:11.5px;font-weight:950}
.asst-tier-price{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:950;color:var(--green)}
.asst-tier-coin{width:14px;height:14px;flex:none}
@keyframes tierBump{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
.asst-actions{flex:none;display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.asst-icon{width:32px;height:32px;padding:0;display:grid;place-items:center;border:0;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;transition:color .18s ease,background .18s ease}
.asst-icon .app-icon{width:19px;height:19px}
.asst-icon:hover,.asst-icon:focus-visible{color:var(--green);background:rgba(61,255,156,.09);outline:none}
.asst-send{width:38px;height:38px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--lime));color:#03110a;cursor:pointer;box-shadow:0 12px 26px -16px rgba(61,255,156,.9);flex:none}
.asst-send:disabled{opacity:.5;box-shadow:none}
.asst-send .app-icon{width:18px;height:18px;color:#03110a;transform:scaleX(-1)}

.asst-attach{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid rgba(61,255,156,.28);border-radius:15px;background:rgba(61,255,156,.07)}
.asst-attach[hidden]{display:none}
.asst-attach img{width:46px;height:46px;border-radius:11px;object-fit:cover}
.asst-attach-copy{display:grid;gap:2px;min-width:0}
.asst-attach-copy b{font-size:11.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asst-attach-copy small{color:var(--muted);font-size:10px;line-height:1.5}
.asst-attach-x{width:34px;height:34px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:11px;background:transparent;color:var(--muted);cursor:pointer}
.asst-attach-x .app-icon{width:15px;height:15px}

.asst-cost{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--muted);min-height:1.4em;padding-inline-start:2px}
.asst-cost-free{color:var(--green);font-weight:900}
.asst-cost-note{color:var(--muted)}
.asst-note{color:var(--muted);font-size:10.5px;line-height:1.7}

/* --- starter-prompt sheet --- */
.asst-sheet{position:fixed;inset:0;z-index:1200;display:grid;align-items:end;justify-items:center;padding:0;background:rgba(2,5,4,.62)}
.asst-sheet[hidden]{display:none}
.asst-sheet-card{width:min(100%,520px);max-height:74vh;overflow-y:auto;display:grid;gap:8px;padding:16px 14px calc(22px + env(safe-area-inset-bottom));border:1px solid rgba(61,255,156,.22);border-radius:24px 24px 0 0;background:linear-gradient(180deg,rgba(16,26,21,.99),rgba(9,14,12,.99));box-shadow:0 -22px 60px -30px rgba(0,0,0,.95);animation:asstSheetUp .24s cubic-bezier(.2,.8,.2,1)}
.asst-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:4px}
.asst-sheet-head b{font-size:14px;font-weight:950}
.asst-sheet-x{width:34px;height:34px;padding:0;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:transparent;color:var(--muted);cursor:pointer}
.asst-sheet-x .app-icon{width:15px;height:15px}
.asst-sheet-item{display:grid;gap:3px;padding:12px;border:1px solid rgba(61,255,156,.16);border-radius:16px;background:rgba(61,255,156,.05);color:var(--text);text-align:start;font:inherit;cursor:pointer;transition:border-color .18s ease}
.asst-sheet-item:hover,.asst-sheet-item:focus-visible{border-color:rgba(61,255,156,.5);outline:none}
.asst-sheet-item b{font-size:13px;font-weight:900}
.asst-sheet-item small{color:var(--muted);font-size:11px;line-height:1.6}
@keyframes asstSheetUp{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}

@media(max-width:380px){
  /* one row at every width: the opener's label gives way before the row may wrap */
  .asst-prompt-btn b{display:none}
  .asst-prompt-btn{padding:9px 10px}
  .asst-tier-toggle{gap:5px;padding:7px 9px}
}
@media(max-width:480px){
  .asst-shell{padding:12px;border-radius:22px;min-height:calc(100vh - 158px)}
  .asst-tier-toggle{padding:7px 9px}
  .asst-bar{gap:7px}
}
@media (prefers-reduced-motion: reduce){
  .asst-row{animation:none!important}
  .asst-sheet-card{animation:none!important}
  .asst-tier-toggle.bump{animation:none!important}
  .view.view-enter{animation:none!important}
}


/* ===== Prompt gallery: one shared layout =====================================
   The card and the detail panel are the same object at two sizes, so the style
   badge, the stat row and the action row are defined once here and used by both.
   Two hand-rolled copies is what let the gallery drift from the app's own look. */

.prompt-style { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.07); color: #e8fff2; font-size: 10.5px; font-weight: 900; }
.prompt-style .app-icon { width: 13px; height: 13px; }
/* each style carries its own accent so the eye sorts the grid before reading a word */
.prompt-style[data-style="image"] { border-color: rgba(61,255,156,.30); color: #b9ffd8; }
.prompt-style[data-style="text"] { border-color: rgba(57,170,252,.32); color: #bfe4ff; }
.prompt-style[data-style="video"] { border-color: rgba(215,255,85,.30); color: #e9ffab; }
.prompt-code { font-size: 10.5px; font-weight: 950; color: rgba(210,224,216,.72); direction: ltr; letter-spacing: .02em; }

.prompt-stats { display: inline-flex; align-items: center; gap: 4px; }
.prompt-stat { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); color: rgba(226,240,233,.80); font-size: 10.5px; font-weight: 900; direction: ltr; }
.prompt-stat .app-icon { width: 13px; height: 13px; opacity: .85; }
.prompt-stat-like { cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
.prompt-stat-like:active { transform: scale(.94); }
/* liked is a filled state, not a colour swap on the number: the heart must read as "on" */
.prompt-stat-like.is-liked { color: #ff7b9c; border-color: rgba(255,123,156,.42); background: rgba(255,123,156,.14); }
.prompt-stat-like.is-liked .app-icon { fill: currentColor; opacity: 1; }
.prompt-stat-like[disabled] { opacity: .55; }
.prompt-stats.compact .prompt-stat { padding: 3px 7px; font-size: 10px; }

.prompt-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.prompt-card-foot .prompt-tags { flex: 1 1 auto; min-width: 0; margin: 0; }

.prompt-visual-glyph { display: grid; place-items: center; width: 100%; height: 100%; }
.prompt-visual-glyph .app-icon { width: 30px; height: 30px; opacity: .5; }

/* the detail's stat row sits under the meta line and matches the card's */
.prompt-detail-stats { display: flex; justify-content: flex-start; margin: 0 0 12px; }
.prompt-detail-stats .prompt-stat { font-size: 12px; padding: 6px 11px; }
.prompt-detail-stats .prompt-stat .app-icon { width: 15px; height: 15px; }
.prompt-detail-meta .prompt-style { font-size: 11.5px; }
.prompt-detail-meta .prompt-code { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; }

/* The body is meant to be read once and copied, not admired: a smaller, tighter
   face with generous line-height keeps a 900-character prompt on one screen. */
.prompt-full-text { font-size: 12.5px; line-height: 1.85; letter-spacing: .002em; padding: 13px 14px; max-height: 46vh; overflow: auto; }
.prompt-full-text::selection { background: rgba(61,255,156,.28); }

/* Action row: equal heights, primary first, everything on one shared grid so the
   three buttons line up instead of each sizing itself. */
.detail-actions { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: stretch; }
.detail-actions .primary-cta, .detail-actions .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; width: 100%; min-width: 0; padding: 0 14px; border-radius: 14px; font-size: 13px; font-weight: 900; }
.detail-actions .primary-cta .app-icon, .detail-actions .ghost-btn .app-icon { width: 16px; height: 16px; }
/* Copy is the same shape and size as its neighbours — it is told apart by COLOUR, not by being a
   differently-shaped pill. A filled blue reads as the primary action while the two ghost buttons
   recede, so the row stays a family instead of three unrelated buttons. */
.detail-actions .primary-cta { border: 1px solid rgba(103,196,255,.42); color: #04121f; background: linear-gradient(135deg, #67c4ff, #35eeb1); box-shadow: 0 12px 26px rgba(53,142,220,.22); }
.detail-actions .primary-cta:active { transform: scale(.98); }
.detail-actions .ghost-btn { border: 1px solid rgba(255,255,255,.14); color: #e6f2ec; background: rgba(255,255,255,.07); }
.detail-actions .prompt-like-btn { min-width: 74px; }
.detail-actions .prompt-like-btn.is-liked { color: #ff7b9c; border-color: rgba(255,123,156,.42); background: rgba(255,123,156,.12); }
.detail-actions .prompt-like-btn.is-liked .app-icon { fill: currentColor; }

/* Crossfade when a filter changes the grid: the swap should read as the same page
   re-sorting, not as the page blinking. */
.prompt-grid { transition: opacity .18s ease; }
.prompt-grid.is-swapping { opacity: 0; }
@keyframes prompt-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.prompt-card { animation: prompt-card-in .26s ease both; }
@media (prefers-reduced-motion: reduce) {
  .prompt-grid { transition: none; }
  .prompt-card { animation: none; }
}

@media (max-width: 420px) {
  .detail-actions { grid-template-columns: 1fr auto auto; }
  .prompt-full-text { font-size: 12px; }
}


/* ===== Prompt filters: two axes, two clearly different controls ==============
   The gallery used to show two identical rows of floating pills. Nothing said that
   one row was the style and the other a refinement of it, and with «همه» active the
   second row listed every topic from every style together — «پرتره» next to «کپشن»
   next to «رستوران» — which reads as noise, not as a filter.
   So the axes are now unmistakably different: style is ONE segmented control, and
   topics live under it, own only one style, and are visually subordinate. */

.prompt-filters { display: grid; gap: 12px; margin-top: 10px; padding: 13px 13px 14px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.016)), var(--panel); }
.prompt-filter-block { display: grid; gap: 7px; min-width: 0; }
.prompt-filter-label { color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: .02em; }

/* the style axis: one track, four equal segments inside it — a single control */
.seg-track { display: flex; gap: 3px; padding: 3px; border: 1px solid rgba(255,255,255,.09); border-radius: 15px; background: rgba(0,0,0,.28); }
#promptTypeChips button { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; padding: 9px 6px; color: #b9c7c0; background: transparent; font: inherit; font-size: 12px; font-weight: 900; white-space: nowrap; cursor: pointer; transition: color .16s ease, background .16s ease; }
#promptTypeChips button .app-icon { width: 15px; height: 15px; flex: 0 0 auto; opacity: .9; }
#promptTypeChips button span { overflow: hidden; text-overflow: ellipsis; }
#promptTypeChips button.active { color: #04160f; background: linear-gradient(135deg, var(--green), var(--blue)); box-shadow: 0 8px 20px rgba(7,200,117,.20); }
#promptTypeChips button.active .app-icon { opacity: 1; }

/* the topic axis: smaller, outlined, and it only ever lists ONE style's topics */
.prompt-topic-row { padding: 1px 0 2px; }
#promptCategoryChips button { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color: #c2cfc9; padding: 6px 12px; font: inherit; font-size: 11.5px; font-weight: 850; white-space: nowrap; cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease; }
#promptCategoryChips button:active { transform: scale(.97); }
/* an active topic is a tint, not another filled pill — the filled state belongs to the style */
#promptCategoryChips button.active { color: #b9ffd8; border-color: rgba(61,255,156,.42); background: rgba(61,255,156,.12); }

@media (max-width: 380px) {
  #promptTypeChips button { font-size: 11px; padding: 9px 4px; gap: 4px; }
  #promptTypeChips button span { display: none; }
  #promptTypeChips button { justify-content: center; }
}


/* ===== Prompt placeholder art ===============================================
   A prompt with no preview image used to render one grey icon on a gradient, and
   three styles produced three near-identical grey cards. Each style now gets its
   own drawn composition so the grid still reads when the picture is missing. */

.prompt-ph { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }

/* text: a written page — a quote mark over ruled lines with a blinking caret */
.ph-text { align-content: center; gap: 9px; grid-auto-rows: min-content; padding: 18% 16%; }
.ph-quote { position: absolute; top: 6%; inset-inline-start: 10%; font-size: 54px; line-height: 1; font-weight: 900; color: rgba(103,196,255,.34); font-family: Georgia, "Times New Roman", serif; }
.ph-line { display: block; height: 7px; border-radius: 999px; background: linear-gradient(90deg, rgba(191,228,255,.44), rgba(191,228,255,.10)); }
.ph-l1 { width: 84%; }
.ph-l2 { width: 62%; }
.ph-l3 { width: 72%; }
.ph-caret { display: block; width: 3px; height: 15px; border-radius: 2px; background: rgba(103,196,255,.85); justify-self: start; animation: phCaret 1.15s steps(1,end) infinite; }
@keyframes phCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* image: a framing reticle, the way a viewfinder frames a shot */
.ph-image { position: relative; }
.ph-image .app-icon { width: 34px; height: 34px; color: rgba(185,255,216,.42); }
.ph-corner { position: absolute; width: 20px; height: 20px; border: 2px solid rgba(185,255,216,.40); }
.ph-tl { top: 16%; inset-inline-start: 14%; border-inline-end: 0; border-bottom: 0; border-start-start-radius: 5px; }
.ph-tr { top: 16%; inset-inline-end: 14%; border-inline-start: 0; border-bottom: 0; border-start-end-radius: 5px; }
.ph-bl { bottom: 16%; inset-inline-start: 14%; border-inline-end: 0; border-top: 0; border-end-start-radius: 5px; }
.ph-br { bottom: 16%; inset-inline-end: 14%; border-inline-start: 0; border-top: 0; border-end-end-radius: 5px; }

/* video: a play head over a timeline */
.ph-video { align-content: center; gap: 14px; grid-auto-rows: min-content; }
.ph-play { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(215,255,85,.34); background: rgba(215,255,85,.10); }
.ph-play .app-icon { width: 22px; height: 22px; color: #e9ffab; fill: currentColor; }
.ph-timeline { display: block; width: 54%; height: 4px; border-radius: 999px; background: rgba(215,255,85,.20); overflow: hidden; }
.ph-timeline i { display: block; width: 42%; height: 100%; border-radius: 999px; background: rgba(215,255,85,.75); }

@media (prefers-reduced-motion: reduce) { .ph-caret { animation: none; opacity: 1; } }

/* the detail's own fallback uses the same art, just larger */
.prompt-detail-fallback .prompt-ph { min-height: 150px; }
.prompt-detail-fallback .ph-line { height: 9px; }
.prompt-detail-fallback .ph-image .app-icon { width: 48px; height: 48px; }

/* ===== Sign-in bar on a shared prompt =======================================
   A shared link must be readable to someone with no account; this is where the
   page says what is free and what needs one. */
.prompt-signin-bar { display: grid; gap: 10px; margin: 0 0 12px; padding: 13px 14px; border: 1px solid rgba(103,196,255,.28); border-radius: 16px; background: linear-gradient(180deg, rgba(103,196,255,.10), rgba(103,196,255,.03)); }
.prompt-signin-bar div { display: grid; gap: 4px; }
.prompt-signin-bar b { font-size: 13.5px; color: #dff0ff; }
.prompt-signin-bar small { color: #a9c2cf; font-size: 11.5px; line-height: 1.75; }
.prompt-signin-bar .primary-cta { width: 100%; min-height: 46px; border-radius: 14px; }

@media (max-width: 460px) {
  .ph-quote { font-size: 42px; }
  .ph-play { width: 44px; height: 44px; }
}


/* Android product surfaces: persistent platform chrome, compact content and explicit states. */
.android-app { --green:#58dea1; --green-2:#35bd83; --blue:#58dea1; --lime:#b9e7cd; --panel:#111c16; --panel-2:#17241c; --line:rgba(181,212,193,.12); --shadow:none; scroll-behavior:auto; }
.android-app body { background:#08100b; }
.android-app .view, .android-app .view.view-enter { animation:none !important; }
.android-app .app-shell { padding:10px 14px 20px; }
.android-app.native-toolbar .topbar { display:none; }
.android-app.native-toolbar .page-head { min-height:0 !important; padding:4px 2px 10px !important; margin-bottom:8px; border:0; background:none; box-shadow:none; display:block !important; }
.android-app.native-toolbar .page-head > span, .android-app.native-toolbar .page-head h1, .android-app.native-toolbar .page-head h2 { display:none; }
.android-app .page-head p { margin:0; font-size:12px; line-height:1.8; color:var(--muted); }
.android-app :is(.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,.content-tool-card,.content-page-input-card,.profile-summary-card,.prompt-detail-card) { background:var(--panel); box-shadow:none; border:1px solid var(--line); border-radius:18px; }
.android-app .hero { min-height:160px; display:flex; gap:16px; padding:18px 16px; border-radius:20px; text-align:start; background:#14271c; box-shadow:none; }
.android-app .hero::before, .android-app .emoji-field { display:none; }
.android-app .hero-avatar { width:68px; height:84px; flex:0 0 68px; object-fit:contain; margin:0; filter:none; animation:none; }
.android-app .hero-copy { min-width:0; text-align:start; flex:1; }
.android-app .hero h1 { margin:0 0 7px; font-size:21px; line-height:1.5; text-shadow:none; }
.android-app .hero p { margin:0 0 12px; font-size:12px; line-height:1.8; }
.android-app .primary-cta { min-height:46px; border-radius:13px; background:var(--green); color:#072014; box-shadow:none; font-size:14px; font-weight:800; }
.android-app .hero .primary-cta { width:100%; margin:0; min-height:42px; padding:8px 12px; }
.android-app :is(button,a) { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.android-app button:active { transform:scale(.98); }
.android-app .section { margin-top:16px; }
.android-app .tool-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.android-app .tool-card { display:grid; grid-template-columns:30px minmax(0,1fr); grid-template-rows:auto auto; align-content:center; align-items:start; justify-items:start; min-height:108px; padding:16px 12px; gap:6px 9px; text-align:start; }
.android-app .tool-card .icon-bubble { width:30px; height:30px; grid-column:1; grid-row:1/3; margin:0; padding:0; background:none; box-shadow:none; border:0; }
.android-app .tool-card .icon-bubble .app-icon { width:25px; height:25px; }
.android-app .tool-card b { grid-column:2; font-size:13px; line-height:1.7; }
.android-app .tool-card small { grid-column:2; font-size:11px; line-height:1.7; color:var(--muted); font-weight:500; }
.android-app .tool-card-badge { top:3px; padding:1px 5px; font-size:9px; font-weight:600; border-radius:5px; background:#254a35; color:#a5e8c2; }
.android-app .content-tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.android-app .content-tool-card { padding:14px 12px; min-height:110px; text-align:start; }
.android-app .content-tool-card:hover { transform:none; }
.android-app .content-tool-card b { font-size:14px; }
.android-app .content-tool-card small { line-height:1.8; font-size:11px; }
.android-app .content-page-input-card { padding:14px; }
.android-app .analyzer-type-chips { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:6px; scrollbar-width:none; padding-block:3px; }
.android-app .analyzer-type-chip { flex:0 0 auto; min-height:40px; padding:7px 10px; border-radius:10px; font-size:12px; }
.android-app :is(input,textarea,select) { font-size:16px; border-radius:12px; }
.android-app .field-label { font-size:12px; line-height:1.8; }
.android-app .profile-summary-card { padding:14px; }
.android-app .profile-summary-copy h3 { font-size:17px; }
.android-app .profile-summary-copy p { font-size:11px; line-height:1.8; overflow-wrap:anywhere; }
.android-app .profile-stats-grid article { min-height:84px; padding:12px 6px; border-radius:14px; background:#112319; box-shadow:none; }
.android-app .profile-stats-grid strong { font-size:24px; }
.android-app .profile-stats-grid span { font-size:11px; }
.android-app .prompt-detail-card { padding:14px; }
.android-app .prompt-detail-media { border-radius:14px; overflow:hidden; }
.android-app .prompt-detail-media img { max-height:340px; width:100%; object-fit:contain; background:#0a140e; }
.android-app :is(.prompt-signin-bar,.prompt-generate-box,.prompt-body-preview) { border-radius:14px; padding:15px; box-shadow:none; }
.android-app .prompt-detail-meta { flex-wrap:wrap; gap:7px; }
.android-app .prompt-detail-meta > span { font-size:11px; }
.android-app .auth-card { border-radius:20px; box-shadow:none; background:var(--panel); }
.android-app .auth-eyebrow { display:none; }
.android-app .auth-card h1 { font-size:22px; }
.android-app .auth-card > img { width:68px; height:68px; }
.android-app :is(.payment-sheet,.guide-modal,.onboarding-card) { border-radius:22px; background:var(--panel); box-shadow:none; }
.android-app .route-state { padding:24px 16px; border:1px solid var(--line); border-radius:16px; background:var(--panel); margin-bottom:12px; }
.route-state p { color:var(--muted); font-size:13px; line-height:1.8; }
.route-state button { min-height:44px; padding:9px 20px; }
.route-first-load[data-load-state="loading"] > :not(.route-state), .route-first-load[data-load-state="error"] > :not(.route-state) { display:none !important; }
.route-skeleton { display:grid; gap:12px; }
.route-skeleton span { display:block; height:68px; border-radius:12px; background:rgba(130,165,144,.12); animation:routePulse 1s ease-in-out infinite alternate; }
.route-skeleton span:first-child { width:65%; height:20px; }
@keyframes routePulse { to { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { .route-skeleton span { animation:none; } }
@media (max-width:350px) { .android-app .app-shell { padding-inline:10px; } .android-app .hero { gap:10px; padding:14px 12px; } .android-app .hero-avatar { width:50px; flex-basis:50px; height:70px; } .android-app .hero h1 { font-size:18px; } .android-app .tool-card { gap:6px; padding:14px 9px; grid-template-columns:24px minmax(0,1fr); } }