/* oaf ai × Crinzy theme — vibrant indigo + coral, Poppins, animated controls.
   Loaded last, so it re-skins styles.css / theme.css / plans.css without touching them. */

:root, :root[data-theme] {
  --c-ink: #0C0A1D;
  --c-indigo-900: #16142B;
  --c-indigo-800: #1E1A3F;
  --c-indigo-700: #2E2A63;
  --c-indigo-600: #433D85;
  --c-lav-400: #9990DD;
  --c-lav-100: #F3F2FB;
  --c-coral: #FF7A59;
  --c-coral-hi: #FF9B7F;
  --c-pink: #FF4F8B;
  --c-violet: #7C6CFF;
  --grad: linear-gradient(120deg, #FF7A59 0%, #FF4F8B 48%, #7C6CFF 100%);
  --grad-soft: linear-gradient(120deg, rgba(255,122,89,.16), rgba(255,79,139,.12) 50%, rgba(124,108,255,.16));
  --grad-text: linear-gradient(100deg, #FFB199 0%, #FF7A59 30%, #FF4F8B 60%, #A99CFF 100%);

  --night: #0A0818;
  --base: #0E0C20;
  --panel: #15122C;
  --raised: #1C1838;
  --raised-2: #262148;
  --line: rgba(153,144,221,.12);
  --line-2: rgba(153,144,221,.22);
  --brand: #0E0C20;
  --text: #F3F2FB;
  --muted: #A7A2D2;
  --faint: #6E6A9C;
  --gold: #FF7A59;
  --gold-hi: #FF9B7F;
  --gold-lo: #E8573A;
  --gold-a10: rgba(255,122,89,.10);
  --gold-a20: rgba(255,122,89,.20);
  --gold-a35: rgba(255,122,89,.35);
  --ink: #0C0A1D;
  --ok: #6EE7B7;
  --danger: #FF6B8A;
  --glass: rgba(21,18,44,.66);
  --shadow-lg: 0 30px 80px -24px rgba(5,3,20,.85), 0 0 0 1px rgba(153,144,221,.10);
  --ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Poppins", system-ui, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  color-scheme: dark;
}

html, body { background: var(--night); }
body {
  font-family: var(--ui);
  color: var(--text);
  letter-spacing: -0.005em;
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(124,108,255,.20), transparent 60%),
    radial-gradient(800px 520px at 100% 0%, rgba(255,79,139,.13), transparent 60%),
    radial-gradient(1000px 700px at 50% 120%, rgba(67,61,133,.35), transparent 60%),
    var(--night);
  background-attachment: fixed;
}
::selection { background: rgba(255,79,139,.35); color: #fff; }
* { scrollbar-color: rgba(153,144,221,.28) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(153,144,221,.22); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; }
:focus-visible { outline: 2px solid var(--c-lav-400); outline-offset: 2px; }

/* headings: Poppins with gradient accents instead of serif */
h1, h2, h3, .view-title, .l-title, .hero h1 { font-family: var(--display); letter-spacing: -0.03em; }
.hero h1 { font-weight: 700; }
.hero h1 em, .l-title em, .pw-intro h1 em, h1 em {
  font-family: var(--display); font-style: normal; font-weight: 700;
  background: var(--grad-text); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: oaf-shift 8s ease-in-out infinite;
}
.l-kicker, .eyebrow b { color: var(--c-coral-hi); }
.eyebrow { border-color: var(--line-2) !important; background: rgba(124,108,255,.10) !important; }
.eyebrow b { background: var(--grad); color: #fff !important; -webkit-text-fill-color: #fff; border-radius: 99px; padding: 1px 8px; }

@keyframes oaf-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes oaf-glow { 0%, 100% { box-shadow: 0 10px 30px -10px rgba(255,79,139,.55), 0 0 0 1px rgba(255,255,255,.08) inset; } 50% { box-shadow: 0 14px 40px -10px rgba(124,108,255,.6), 0 0 0 1px rgba(255,255,255,.12) inset; } }
@keyframes oaf-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes oaf-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes oaf-spin { to { transform: rotate(360deg); } }

/* ---------- buttons ---------- */
.btn-gold, .btn-ghost, .btn-danger, .ghost-sm, .icon-btn, .tab, .seg button, .chip, .stepper button,
.enhance-btn, .rail-btn, .nav-tile, .tpl-strip button, .plans-tabs button, .c-tabs button, .link-btn, .wallet-chip, .rail-wallet, .starter {
  position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--spring), background .25s var(--ease), border-color .25s var(--ease), box-shadow .3s var(--ease), color .2s, opacity .2s;
}
.link-btn { overflow: visible; }

.btn-gold {
  background: var(--grad) !important; background-size: 180% 100% !important; background-position: 0% 50% !important;
  color: #fff !important; border: 0 !important; border-radius: 999px !important;
  font-family: var(--ui); font-weight: 600; letter-spacing: .005em;
  box-shadow: 0 10px 30px -10px rgba(255,79,139,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  text-shadow: 0 1px 1px rgba(60,10,40,.25);
}
.btn-gold::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s var(--ease);
}
.btn-gold:hover { background-position: 100% 50% !important; transform: translateY(-2px); box-shadow: 0 18px 44px -12px rgba(255,79,139,.7), 0 0 0 1px rgba(255,255,255,.16) inset; }
.btn-gold:hover::after { transform: translateX(120%); }
.btn-gold:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn-gold:disabled, .btn-gold[disabled] { filter: saturate(.4) brightness(.8); transform: none; box-shadow: none; cursor: not-allowed; }
.btn-gold:disabled::after { display: none; }

.btn-generate { min-height: 48px; padding-inline: 22px !important; animation: oaf-glow 4s ease-in-out infinite; }
.btn-generate .cost, .btn-gold .cost { background: rgba(255,255,255,.18) !important; color: #fff !important; border-radius: 99px; padding: 2px 9px; font-weight: 600; backdrop-filter: blur(4px); }
.btn-generate.is-busy, #generate:disabled { animation: none; }

.btn-ghost, .ghost-sm {
  background: rgba(153,144,221,.08) !important; color: var(--text) !important;
  border: 1px solid var(--line-2) !important; border-radius: 999px !important;
  backdrop-filter: blur(10px);
}
.btn-ghost:hover, .ghost-sm:hover { background: rgba(153,144,221,.16) !important; border-color: rgba(169,156,255,.5) !important; transform: translateY(-1px); box-shadow: 0 10px 26px -14px rgba(124,108,255,.7); }
.btn-ghost:active, .ghost-sm:active { transform: scale(.97); }
.btn-danger { border-radius: 999px !important; background: rgba(255,107,138,.10) !important; border: 1px solid rgba(255,107,138,.35) !important; color: #FFB3C4 !important; }
.btn-danger:hover { background: rgba(255,107,138,.2) !important; transform: translateY(-1px); }
.icon-btn { border-radius: 999px; }
.icon-btn:hover { background: rgba(153,144,221,.14); transform: rotate(-4deg) scale(1.06); }
.link-btn { color: var(--c-coral-hi) !important; }
.link-btn:hover { color: #fff !important; }
.link-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.link-btn:hover::after { transform: scaleX(1); }

/* click ripple (crinzy.js adds <i class="oaf-rip">) */
.oaf-rip { position: absolute; border-radius: 50%; pointer-events: none; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 60%); opacity: .9; animation: oaf-ripple .6s var(--ease) forwards; }

/* ---------- tabs, segments, chips (pill style) ---------- */
.tabs { gap: 6px !important; padding: 4px; border-radius: 999px; background: rgba(153,144,221,.06); border: 1px solid var(--line); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { border-radius: 999px !important; border: 0 !important; color: var(--muted) !important; background: transparent !important; padding: 8px 16px !important; font-weight: 500; white-space: nowrap; }
.tab:hover { color: var(--text) !important; background: rgba(153,144,221,.10) !important; }
.tab.is-active, .c-tabs button.is-on, .plans-tabs button.is-on {
  color: #fff !important; background: var(--grad) !important; box-shadow: 0 8px 22px -10px rgba(255,79,139,.7);
}
.c-tabs button { border-radius: 999px !important; }

.chip, .seg, .stepper, .search {
  background: rgba(153,144,221,.08) !important; border: 1px solid var(--line-2) !important; border-radius: 999px !important;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.chip:hover, .seg:hover, .stepper:hover, .search:focus-within { border-color: rgba(169,156,255,.5) !important; background: rgba(153,144,221,.13) !important; }
.chip select, .seg button, .stepper button, .search input { color: var(--text) !important; font-family: var(--ui); }
.chip .dot { background: var(--grad) !important; box-shadow: 0 0 10px rgba(255,79,139,.7); }
.seg button { border-radius: 999px !important; }
.seg button.is-on { background: var(--grad) !important; color: #fff !important; box-shadow: 0 6px 16px -8px rgba(255,79,139,.8); }
.stepper button:hover { background: rgba(255,255,255,.08); }
.stepper button:active { transform: scale(.85); }
select option { background: var(--panel); color: var(--text); }

input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select {
  font-family: var(--ui);
}
.c-search, .pay-form input, .auth-form input, .auth-form select, .c-settings input, .c-settings textarea, .field-row input, .field-row select, .edit-box textarea, .c-row input, .c-row select, #su-biz {
  background: rgba(10,8,24,.55) !important; border: 1px solid var(--line-2) !important; border-radius: 14px !important; color: var(--text) !important;
  transition: border-color .2s, box-shadow .25s;
}
.c-search:focus, .pay-form input:focus, .auth-form input:focus, .auth-form select:focus, .c-settings input:focus, .c-settings textarea:focus, .field-row input:focus, .edit-box textarea:focus, #su-biz:focus {
  outline: none; border-color: rgba(255,122,89,.6) !important; box-shadow: 0 0 0 4px rgba(255,122,89,.14);
}

/* ---------- app shell (Higgsfield-style) ---------- */
.rail {
  background: linear-gradient(180deg, rgba(30,26,63,.85), rgba(14,12,32,.9)) !important;
  border-right: 1px solid var(--line) !important; backdrop-filter: blur(18px);
}
.rail-btn, .nav-tile { border-radius: 16px !important; color: var(--muted) !important; }
.rail-btn:hover, .nav-tile:hover { background: rgba(153,144,221,.12) !important; color: var(--text) !important; transform: translateY(-1px); }
.rail-btn:hover svg, .nav-tile:hover svg { transform: scale(1.12) rotate(-4deg); }
.rail-btn svg, .nav-tile svg { transition: transform .3s var(--spring); }
.rail-btn.is-active { color: #fff !important; background: var(--grad-soft) !important; box-shadow: inset 0 0 0 1px rgba(255,122,89,.35); }
.rail-btn.is-active svg { color: var(--c-coral-hi) !important; stroke: currentColor; }
.rail-btn.is-active::before { background: var(--grad) !important; box-shadow: 0 0 14px rgba(255,79,139,.8); }
.rail-wallet, .wallet-chip {
  background: rgba(255,122,89,.10) !important; border: 1px solid rgba(255,122,89,.32) !important; border-radius: 999px !important; color: var(--text) !important;
}
.rail-wallet strong, .wallet-chip strong { color: #fff !important; }
.rail-wallet:hover, .wallet-chip:hover { background: rgba(255,122,89,.18) !important; transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(255,122,89,.9); }
.wallet-chip .plus { background: var(--grad); color: #fff; border-radius: 99px; }
.mhead { background: rgba(14,12,32,.78) !important; backdrop-filter: blur(16px); border-bottom: 1px solid var(--line) !important; }
.topbar { border-bottom-color: var(--line) !important; }
.view-title { font-weight: 700 !important; }
.spend-chip { border-radius: 999px !important; background: rgba(153,144,221,.08) !important; border: 1px solid var(--line-2) !important; }
.avatar { box-shadow: 0 0 0 2px rgba(255,122,89,.55); transition: transform .3s var(--spring), box-shadow .3s; }
.avatar:hover { transform: scale(1.08); box-shadow: 0 0 0 3px rgba(255,79,139,.7); }

/* floating prompt bar */
.composer {
  background: linear-gradient(var(--glass), var(--glass)) padding-box, linear-gradient(120deg, rgba(255,122,89,.45), rgba(153,144,221,.25) 40%, rgba(124,108,255,.45)) border-box !important;
  border: 1px solid transparent !important; border-radius: 26px !important;
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 30px 70px -26px rgba(5,3,20,.95), 0 0 0 1px rgba(255,255,255,.02) inset !important;
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.composer:focus-within {
  background: linear-gradient(rgba(21,18,44,.82), rgba(21,18,44,.82)) padding-box, var(--grad) border-box !important;
  box-shadow: 0 30px 80px -24px rgba(255,79,139,.45), 0 0 60px -20px rgba(124,108,255,.55) !important;
}
.composer textarea { color: var(--text) !important; font-size: 15.5px; }
.composer textarea::placeholder, textarea::placeholder, input::placeholder { color: #8A85B8 !important; }
.enhance-btn { border-radius: 999px !important; background: rgba(124,108,255,.14) !important; color: #D9D4FF !important; border: 1px solid rgba(124,108,255,.35) !important; }
.enhance-btn:hover { background: rgba(124,108,255,.24) !important; transform: translateY(-1px); }
.add-ref { border-radius: 14px !important; border: 1px dashed rgba(153,144,221,.4) !important; transition: transform .3s var(--spring), border-color .2s, background .2s; }
.add-ref:hover { border-color: var(--c-coral) !important; background: rgba(255,122,89,.08); transform: rotate(-3deg) scale(1.05); }

/* gallery tiles */
.tile, .vcard, .strip-item, .md-item {
  border-radius: 18px !important; overflow: hidden; border: 1px solid var(--line) !important;
  background: var(--panel) !important; animation: oaf-rise .5s var(--ease) both;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.tile:hover, .vcard:hover, .md-item:hover { transform: translateY(-4px); border-color: rgba(255,122,89,.4) !important; box-shadow: 0 24px 50px -24px rgba(255,79,139,.5), 0 0 0 1px rgba(124,108,255,.25); }
.tile img { transition: transform .8s var(--ease), filter .4s !important; }
.tile:hover img { transform: scale(1.05); filter: saturate(1.08); }
.tile.is-pending, .vph.is-pending {
  background: linear-gradient(110deg, rgba(124,108,255,.10) 8%, rgba(255,79,139,.18) 18%, rgba(124,108,255,.10) 33%) !important;
  background-size: 200% 100% !important; animation: oaf-shimmer 1.4s linear infinite !important;
}
@keyframes oaf-shimmer { to { background-position: -200% 0; } }
.badge-star, .star-btn[aria-pressed="true"] { color: var(--c-coral) !important; }
.empty-mark { filter: drop-shadow(0 10px 30px rgba(255,79,139,.35)); }
.load-more { border-radius: 999px !important; border: 1px solid var(--line-2) !important; background: rgba(153,144,221,.08) !important; }
.load-more:hover { border-color: var(--c-coral) !important; }

/* cards, sheets, dialogs */
.card, .sheet, .viewer-side, .vform, .pay, .console, .plan-card, .price-table, .cust-welcome, .pa-row, .c-row, .kpi, .ov {
  border-color: var(--line) !important;
}
.card, .vform, .sheet, .viewer-side { background: linear-gradient(180deg, rgba(30,26,63,.55), rgba(21,18,44,.75)) !important; border-radius: 22px !important; }
.card { transition: transform .35s var(--ease), border-color .3s, box-shadow .35s; }
.card:hover { border-color: rgba(153,144,221,.28) !important; box-shadow: 0 20px 50px -30px rgba(124,108,255,.6); }
dialog::backdrop { background: rgba(6,4,18,.72) !important; backdrop-filter: blur(8px); }
dialog[open] > * { animation: oaf-rise .35s var(--ease); }
.pay { background: linear-gradient(180deg, rgba(30,26,63,.75), rgba(16,14,34,.92)) !important; border: 1px solid var(--line-2) !important; border-radius: 26px !important; box-shadow: var(--shadow-lg) !important; }
.kpi, .ov { background: rgba(153,144,221,.06) !important; border-radius: 18px !important; }
.kpi.hot strong, .ov.hot strong { color: var(--c-coral-hi) !important; }
.status { border-radius: 99px !important; }
.status.approved { background: rgba(110,231,183,.12) !important; color: #9FF0CF !important; }
.status.pending { background: rgba(124,108,255,.16) !important; color: #CFC8FF !important; }
.status.rejected { background: rgba(255,107,138,.14) !important; color: #FFB3C4 !important; }
.toast { background: rgba(28,24,56,.92) !important; border: 1px solid var(--line-2) !important; border-radius: 16px !important; backdrop-filter: blur(16px); box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); }

/* chat bubbles */
.bubble-text, .msg-body { border-radius: 18px !important; }
.chat-log .me .bubble-text, .msg.me .msg-body { background: var(--grad) !important; color: #fff !important; }
.starter { border-radius: 999px !important; border: 1px solid var(--line-2) !important; background: rgba(153,144,221,.07) !important; }
.starter:hover { border-color: var(--c-coral) !important; transform: translateY(-2px); }

/* ---------- landing ---------- */
.landing { background: transparent !important; }
.l-nav.is-stuck { background: rgba(12,10,29,.72) !important; backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line) !important; }
.l-links a { color: var(--muted) !important; transition: color .2s; }
.l-links a:hover { color: #fff !important; }
.hero-aura i:nth-child(1) { background: radial-gradient(circle, rgba(255,122,89,.45), transparent 65%) !important; }
.hero-aura i:nth-child(2) { background: radial-gradient(circle, rgba(124,108,255,.5), transparent 65%) !important; }
.hero-aura i:nth-child(3) { background: radial-gradient(circle, rgba(255,79,139,.4), transparent 65%) !important; }
.hero-grid { opacity: .5; }
.demo, .demo-bar, .frame, .cell { border-color: var(--line-2) !important; }
.demo-go { background: var(--grad) !important; color: #fff !important; border-radius: 999px !important; }
.cell { background: linear-gradient(180deg, rgba(30,26,63,.6), rgba(16,14,34,.85)) !important; border-radius: 24px !important; transition: transform .45s var(--ease), border-color .3s; }
.cell:hover { transform: translateY(-4px); border-color: rgba(255,122,89,.35) !important; }
.cell .num { color: var(--c-coral-hi) !important; }
.faq details { border-color: var(--line) !important; transition: background .25s; }
.faq details[open] { background: rgba(153,144,221,.05); }
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--c-coral-hi); }

/* plan cards */
.plan-card { background: linear-gradient(180deg, rgba(30,26,63,.7), rgba(16,14,34,.9)) !important; border-radius: 24px !important; transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.plan-card:hover { transform: translateY(-6px); border-color: rgba(153,144,221,.35) !important; box-shadow: 0 30px 60px -30px rgba(124,108,255,.65); }
.plan-card.has-badge {
  background: linear-gradient(180deg, rgba(46,42,99,.95), rgba(22,18,48,.95)) padding-box, var(--grad) border-box !important;
  border: 1.5px solid transparent !important; box-shadow: 0 30px 70px -30px rgba(255,79,139,.6);
}
.plan-badge { background: var(--grad) !important; color: #fff !important; box-shadow: 0 6px 16px -6px rgba(255,79,139,.8); }
.plan-price strong { background: linear-gradient(100deg, #fff, #D9D4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-feats li::before { border-color: var(--c-coral) !important; }
.plan-card.is-current { outline-color: var(--c-coral) !important; }
.plans-bal strong, .pa-margin, .cust-welcome h3 b { color: var(--c-coral-hi) !important; }
.cust-welcome { background: var(--grad-soft), rgba(21,18,44,.7) !important; border: 1px solid rgba(255,122,89,.25) !important; border-radius: 22px !important; }
.tpl-strip button:hover { background: rgba(255,122,89,.14) !important; border-color: rgba(255,122,89,.5) !important; transform: translateY(-2px); }
.upi-box { border-radius: 20px !important; }
.pay-steps span.on { background: var(--grad) !important; }
.announce { background: var(--grad) !important; color: #fff !important; }

/* splash */
.splash { background: var(--night) !important; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}