/* Shared frontend quality layer for Mindsup pages. */
@font-face {
  font-family: "Ravi";
  src: local("Ravi"), local("Ravi VF"), local("Ravi Variable");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-body: "Ravi", "Vazirmatn", Tahoma, sans-serif;
  --font: "Ravi", "Vazirmatn", Tahoma, sans-serif;
}

:where(*, *::before, *::after) { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Ravi", "Vazirmatn", Tahoma, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(button, input, textarea, select) {
  font-family: "Ravi", "Vazirmatn", Tahoma, sans-serif !important;
}

/* Keep the brand typeface consistent across every visible text node, including
   legacy components that still declare their own font stack. */
:where(body, body *, body *::before, body *::after) {
  font-family: "Ravi", "Vazirmatn", Tahoma, sans-serif !important;
}

.brand-logo-image {
  display: block;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 11px;
  clip-path: inset(3% round 22%);
  background: transparent;
  mix-blend-mode: multiply;
}

.sidebar .brand-logo-image { width: 34px; height: 34px; }

.auth-page-logo {
  display: block;
  width: 68px;
  height: 68px;
  margin: 0 auto 15px;
  object-fit: contain;
  border-radius: 19px;
  clip-path: inset(3% round 22%);
  background: transparent;
  mix-blend-mode: multiply;
}

.form-header::before { content: none !important; display: none !important; }

/* One shared panel shell across dashboard, usage, settings, image studio and API keys. */
.sidebar {
  background: #101411 !important;
  border-left: 1px solid rgba(255, 255, 255, .07) !important;
}

.sidebar-head {
  padding-inline: 20px !important;
  border-bottom-color: rgba(255, 255, 255, .07) !important;
}

.sidebar .main-nav { padding: 20px 16px !important; gap: 4px !important; }
.sidebar .nav-label {
  margin: 16px 8px 8px !important;
  color: #88938c !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.sidebar .nav-item {
  padding: 11px 12px !important;
  border-radius: 11px !important;
  color: #c1c9c3 !important;
  font-size: 14px !important;
}

.sidebar .nav-item:hover,
.sidebar .nav-item.active {
  background: rgba(116, 16, 84, .22) !important;
  color: #f4d7ea !important;
}

.sidebar .nav-item.active { font-weight: 700 !important; }
.sidebar .nav-item svg { color: #88938c !important; }
.sidebar .nav-item.active svg { color: #e3a3ce !important; }
.sidebar-foot { border-top-color: rgba(255, 255, 255, .07) !important; }
.sidebar .sf-user { background: rgba(255, 255, 255, .055) !important; }

/* Global page entrance and transition loader. */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: #fbfffe;
  color: #1f271b;
  opacity: 1;
  visibility: visible;
  transition: opacity .38s ease, visibility .38s ease;
}

.site-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.site-loader-card { display: grid; justify-items: center; gap: 15px; }
.site-loader-logo { width: 62px; height: 62px; border-radius: 18px; object-fit: cover; clip-path: inset(4.5% round 24%); transform: scale(1.08); box-shadow: none; }
.site-loader-name { font-weight: 800; font-size: 15px; letter-spacing: -.2px; }
.site-loader-status { min-width: 132px; color: #737a75; font-size: 10px; text-align: center; }
.site-loader-track { width: 132px; height: 3px; overflow: hidden; border-radius: 99px; background: #e7eae7; }
.site-loader-track i { width: 42%; height: 100%; display: block; border-radius: inherit; background: #741054; animation: loaderSweep 1.15s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes loaderSweep { from { transform: translateX(170%); } to { transform: translateX(-270%); } }

[data-reveal] {
  opacity: 0;
  transform: translateY(13px);
  transition: opacity .52s cubic-bezier(.22,1,.36,1), transform .52s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}

body.page-ready [data-reveal] { opacity: 1; transform: none; }

:where(img, video, canvas) {
  max-inline-size: 100%;
}

:where(button, a, input, textarea, select, [tabindex]) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, [role="button"], input[type="button"], input[type="submit"]) {
  touch-action: manipulation;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, #741054 32%, transparent);
  outline-offset: 3px;
}

:where(input, textarea, select)::placeholder {
  opacity: .72;
}

:where(.ambient, .ai-background, .grid-overlay) {
  pointer-events: none;
  user-select: none;
}

:where(svg) { flex-shrink: 0; }

:where(section, article, form, [id]) {
  scroll-margin-top: 84px;
}

@media (hover: hover) and (pointer: fine) {
  :where(button, a, [role="button"]) { transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
}

@media (max-width: 768px) {
  :where(input, textarea, select) { font-size: 16px !important; }
  :where(.btn, [class$="-btn"], [class*="btn-"]) { min-height: 42px; }
  :where(.topbar, header) { padding-inline: max(14px, env(safe-area-inset-left)); }
}

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

@media (prefers-contrast: more) {
  :where(input, textarea, select, button, .card, [class*="card"]) { border-color: currentColor; }
}

@media print {
  :where(.sidebar, .topbar, header, footer, .ambient, .ai-background, button) { display: none !important; }
  body { overflow: visible !important; background: #fff !important; color: #000 !important; }
}