/* Plotmosa Premium UI layer — visual-only. Payment/auth/render contracts stay in existing HTML/JS. */
:root {
  --pm-bg: #f5f2eb;
  --pm-bg-deep: #ebe6dc;
  --pm-paper: rgba(255,255,255,.78);
  --pm-paper-solid: #fffdf8;
  --pm-ink: #171914;
  --pm-ink-2: #4d5148;
  --pm-ink-3: #73786d;
  --pm-line: rgba(28,34,25,.12);
  --pm-line-strong: rgba(28,34,25,.2);
  --pm-accent: #52633d;
  --pm-accent-strong: #344327;
  --pm-accent-soft: rgba(82,99,61,.1);
  --pm-warm: #9d7451;
  --pm-danger: #a6483f;
  --pm-shadow-sm: 0 1px 2px rgba(26,30,23,.04), 0 8px 24px rgba(26,30,23,.06);
  --pm-shadow-md: 0 18px 50px rgba(26,30,23,.10), 0 2px 10px rgba(26,30,23,.05);
  --pm-shadow-lg: 0 34px 90px rgba(22,27,20,.16), 0 8px 28px rgba(22,27,20,.08);
  --pm-radius-sm: 12px;
  --pm-radius: 18px;
  --pm-radius-lg: 28px;
  --pm-ease: cubic-bezier(.2,.8,.2,1);
}

html { scroll-behavior: smooth; background: var(--pm-bg); }
body {
  color: var(--pm-ink);
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(133,151,105,.14), transparent 64%),
    radial-gradient(820px 500px at 96% 10%, rgba(157,116,81,.09), transparent 62%),
    linear-gradient(180deg, #faf8f3 0, var(--pm-bg) 46%, #f1ede5 100%);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  isolation: isolate;
}
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

::selection { background: rgba(82,99,61,.2); color: var(--pm-ink); }
a, button, input, textarea, select, summary { -webkit-tap-highlight-color: rgba(82,99,61,.18); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--pm-accent-strong) !important;
  outline-offset: 3px !important;
}

/* Navigation */
nav.top, .topbar, header.topbar {
  border-bottom: 1px solid var(--pm-line) !important;
  background: rgba(250,248,243,.82) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.72), 0 10px 30px rgba(30,34,27,.045) !important;
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}
nav.top .inner { min-height: 72px; gap: clamp(12px, 1.6vw, 26px); }
nav.top .brand, .topbar-brand, .studio-brand {
  color: var(--pm-ink) !important;
  letter-spacing: -.035em !important;
  font-weight: 700 !important;
}
nav.top a:not(.cta), .topbar a { color: var(--pm-ink-2); }
nav.top a:not(.cta):hover, .topbar a:hover { color: var(--pm-ink); }
nav.top .cta, .topbar-action.cta, .btn-primary, button.primary, .ft-cta {
  border: 1px solid rgba(29,41,22,.18) !important;
  background: linear-gradient(180deg, #61744a 0%, var(--pm-accent) 100%) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(68,83,50,.22), inset 0 1px 0 rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  transition: transform .2s var(--pm-ease), box-shadow .2s var(--pm-ease), filter .2s ease !important;
}
nav.top .cta:hover, .topbar-action.cta:hover, .btn-primary:hover:not(:disabled), button.primary:hover:not(:disabled), .ft-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 13px 30px rgba(68,83,50,.28), inset 0 1px 0 rgba(255,255,255,.2) !important;
  filter: saturate(1.04);
}

/* Editorial headings */
h1, h2, h3, .section-title, .hero-title, .modal h2, .account-modal h2 {
  text-wrap: balance;
  letter-spacing: -.035em;
}
.section-title, h1.hero-title, .try-lead-title {
  color: var(--pm-ink) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}
.section-lede, .hero-lede, .lede { color: var(--pm-ink-2) !important; line-height: 1.68 !important; text-wrap: pretty; }
.kicker, .eyebrow { letter-spacing: .13em !important; color: var(--pm-accent-strong) !important; }

/* Create-first homepage hero */
.try-section--lead, #try.try-section {
  position: relative;
  isolation: isolate;
  padding-top: clamp(54px, 7vw, 108px) !important;
  padding-bottom: clamp(68px, 8vw, 122px) !important;
}
.try-section--lead::before {
  content: ""; position: absolute; inset: 24px max(16px, 2vw) 10px; z-index: -1;
  border-radius: clamp(24px, 4vw, 46px);
  border: 1px solid rgba(255,255,255,.75);
  background:
    linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.35)),
    radial-gradient(80% 100% at 100% 0%, rgba(120,139,91,.13), transparent 65%);
  box-shadow: var(--pm-shadow-md);
}
.try-mode-tabs, .input-modes, .engine-selector {
  padding: 5px !important;
  border: 1px solid var(--pm-line) !important;
  border-radius: 16px !important;
  background: rgba(246,243,236,.88) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88) !important;
}
.try-mode-tab, .input-mode, .engine-pill {
  border-radius: 12px !important;
  transition: background .18s ease, transform .18s var(--pm-ease), color .18s ease, box-shadow .18s ease !important;
}
.try-mode-tab:hover, .input-mode:hover, .engine-pill:hover { transform: translateY(-1px); }
.try-mode-tab.active, .input-mode.active, .engine-pill.active, .engine-pill.selected {
  background: var(--pm-paper-solid) !important;
  color: var(--pm-ink) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  border-color: rgba(82,99,61,.16) !important;
}
.try-prompt-panel, .try-grid, .drop-zone, .upload-zone, .prompt-panel, .photo-panel {
  border-color: var(--pm-line) !important;
}
.prompt-textarea, textarea, input:not([type]), input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"]), select {
  border-color: var(--pm-line-strong) !important;
  background: rgba(255,253,248,.86) !important;
  color: var(--pm-ink) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.prompt-textarea:focus, textarea:focus, input:not([type]):focus, input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"]):focus, select:focus {
  border-color: rgba(82,99,61,.48) !important;
  background: #fffefb !important;
  box-shadow: 0 0 0 4px rgba(82,99,61,.09), inset 0 1px 0 white !important;
}
.style-chip, .chip, .pill, .tag {
  border-radius: 999px !important;
  border-color: var(--pm-line) !important;
  background: rgba(255,255,255,.55) !important;
}
.style-chip.active, .chip.active, .pill.active { background: var(--pm-accent-soft) !important; border-color: rgba(82,99,61,.26) !important; color: var(--pm-accent-strong) !important; }

/* Inspiration/examples directly after create */
#examples, .examples-section, .gallery-section {
  position: relative;
}
.examples-grid, .gallery-grid, .masonry-grid {
  gap: clamp(14px, 2vw, 26px) !important;
}
.example-card, .gallery-card, .render-card, .demo-card {
  border: 1px solid rgba(28,34,25,.1) !important;
  border-radius: var(--pm-radius-lg) !important;
  overflow: hidden;
  background: var(--pm-paper-solid) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  transition: transform .28s var(--pm-ease), box-shadow .28s var(--pm-ease), border-color .2s ease !important;
}
.example-card:hover, .gallery-card:hover, .render-card:hover, .demo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pm-shadow-md) !important;
  border-color: rgba(82,99,61,.18) !important;
}
.example-card img, .gallery-card img, .render-card img, .demo-card img { transition: transform .55s var(--pm-ease), filter .3s ease; }
.example-card:hover img, .gallery-card:hover img, .render-card:hover img, .demo-card:hover img { transform: scale(1.018); }

/* Common cards/panels */
.moat-card, .free-tier-card, .price-card, .card, .panel, .workspace-banner,
.account-card, .account-stats-card, .result-card, .settings-card, .history-card {
  border-color: var(--pm-line) !important;
  background: var(--pm-paper) !important;
  box-shadow: var(--pm-shadow-sm) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.moat-card, .free-tier-card, .price-card, .workspace-banner, .account-card, .result-card { border-radius: var(--pm-radius) !important; }
.workspace-banner { padding: clamp(18px, 2.5vw, 28px) !important; }

/* Pricing/payment surface: styling only; identifiers and JS contract untouched. */
#pricing { position: relative; }
#pricing-checkout {
  border: 1px solid var(--pm-line) !important;
  border-radius: var(--pm-radius-lg) !important;
  background: rgba(255,255,255,.5) !important;
  box-shadow: var(--pm-shadow-sm) !important;
}
#pricing-checkout > summary.pricing-divider {
  min-height: 58px;
  padding: 15px 20px !important;
  color: var(--pm-ink) !important;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(248,245,238,.72));
}
#pricing-checkout[open] > summary.pricing-divider { border-bottom: 1px solid var(--pm-line); }
#pricing-checkout .checkout-body { padding: clamp(18px, 3vw, 34px) !important; }
#pricing-grid { gap: clamp(12px, 1.5vw, 20px) !important; }
.price-card {
  position: relative;
  border-radius: 20px !important;
  padding: clamp(22px, 2.2vw, 30px) !important;
  transition: transform .24s var(--pm-ease), box-shadow .24s var(--pm-ease), border-color .2s ease !important;
}
.price-card:hover { transform: translateY(-3px); box-shadow: var(--pm-shadow-md) !important; border-color: rgba(82,99,61,.19) !important; }
.price-card.featured {
  border-color: rgba(82,99,61,.3) !important;
  background: linear-gradient(160deg, rgba(253,255,249,.96), rgba(238,243,229,.86)) !important;
  box-shadow: 0 22px 54px rgba(70,86,51,.15) !important;
}
.price-card .price { letter-spacing: -.04em; color: var(--pm-ink) !important; }
.price-card .badge, .promo-badge { border-radius: 999px !important; }
.btn-tier, [data-buy-credits] {
  min-height: 48px;
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: transform .18s var(--pm-ease), box-shadow .18s var(--pm-ease), opacity .18s ease !important;
}
[data-buy-credits]:hover:not(:disabled) { transform: translateY(-1px); }
[data-buy-credits]:disabled { opacity: .62 !important; transform: none !important; }

/* Modals: auth, account, consent, render/refine */
.modal-backdrop, .signup-backdrop, .account-backdrop, .lightbox-backdrop {
  background: rgba(20,24,18,.58) !important;
  backdrop-filter: blur(10px) saturate(.92);
  -webkit-backdrop-filter: blur(10px) saturate(.92);
}
.modal, .signup-modal, .account-modal, .consent-modal, .lightbox-wrap, [role="dialog"] > .modal {
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: clamp(20px, 3vw, 30px) !important;
  background: rgba(255,253,248,.96) !important;
  box-shadow: var(--pm-shadow-lg) !important;
}
.modal-close, .signup-close, .account-close, .lightbox-close, .nav-queue-popup-close {
  border: 1px solid var(--pm-line) !important;
  background: rgba(255,255,255,.72) !important;
  color: var(--pm-ink-2) !important;
  border-radius: 999px !important;
  transition: transform .18s var(--pm-ease), background .18s ease, color .18s ease !important;
}
.modal-close:hover, .signup-close:hover, .account-close:hover, .lightbox-close:hover { transform: rotate(3deg) scale(1.04); background: white !important; color: var(--pm-ink) !important; }
.modal-spinner { border-color: rgba(82,99,61,.16) !important; border-top-color: var(--pm-accent) !important; }
.modal-error, .error-box, .alert-error { border-radius: 16px !important; background: rgba(166,72,63,.07) !important; border: 1px solid rgba(166,72,63,.2) !important; }
.modal-error-icon { background: rgba(166,72,63,.11) !important; color: var(--pm-danger) !important; }

/* Consent: visually premium, semantics untouched */
/* The fixed consent backdrop covers the viewport; only its panel is bounded. */
#consent-modal { max-width: none; }
.consent-modal { max-width: 620px; }
#consent-modal label, .consent-modal label { line-height: 1.55; }
#consent-checkbox { width: 20px; height: 20px; accent-color: var(--pm-accent); }
#consent-agree:disabled { opacity: .48 !important; box-shadow: none !important; }

/* Account/payment history */
.account-pay-stats { gap: 10px !important; }
.account-pay-stat, .account-pay-row, .account-ledger-row, .account-pay-empty {
  border-color: var(--pm-line) !important;
  background: rgba(255,255,255,.6) !important;
  border-radius: 14px !important;
}
.account-pay-row, .account-ledger-row { transition: background .15s ease, border-color .15s ease; }
.account-pay-row:hover, .account-ledger-row:hover { background: rgba(255,255,255,.86) !important; border-color: rgba(82,99,61,.18) !important; }
.pay-invoice { color: var(--pm-accent-strong) !important; }

/* Toasts / transient state */
.toast, #toast, .notification, .status-toast {
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 14px !important;
  background: rgba(28,32,25,.92) !important;
  color: #fff !important;
  box-shadow: 0 16px 44px rgba(18,22,17,.26) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.skeleton, .loading-placeholder {
  animation: pm-shimmer 1.5s linear infinite;
  background: linear-gradient(100deg, rgba(82,99,61,.06) 20%, rgba(255,255,255,.58) 38%, rgba(82,99,61,.06) 58%) !important;
  background-size: 220% 100% !important;
}

/* Studio: professional, quieter workspace */
body:has(.studio-shell), body:has(.studio-layout), body.studio-page {
  background: #ece9e2;
}
.studio-shell, .studio-layout, .workspace-layout, .studio-grid {
  gap: 12px !important;
}
.studio-sidebar, .studio-panel, .side-panel, .left-panel, .right-panel,
.canvas-panel, .result-panel, .controls-panel {
  border-color: var(--pm-line) !important;
  background: rgba(250,248,243,.88) !important;
  border-radius: 16px !important;
  box-shadow: var(--pm-shadow-sm) !important;
}
.canvas-wrap, .canvas-stage, .studio-canvas, .result-canvas {
  background:
    linear-gradient(45deg, rgba(49,55,45,.025) 25%, transparent 25%, transparent 75%, rgba(49,55,45,.025) 75%),
    linear-gradient(45deg, rgba(49,55,45,.025) 25%, rgba(255,255,255,.64) 25%, rgba(255,255,255,.64) 75%, rgba(49,55,45,.025) 75%) !important;
  background-size: 24px 24px !important;
  background-position: 0 0, 12px 12px !important;
  border-color: var(--pm-line) !important;
  border-radius: 16px !important;
}
.studio-section-title, .panel-title { letter-spacing: -.02em !important; color: var(--pm-ink) !important; }
.studio-toolbar button, .canvas-toolbar button, .tool-btn, .icon-btn, .topbar-action:not(.cta) {
  border-radius: 10px !important;
  border-color: var(--pm-line) !important;
  background: rgba(255,255,255,.64) !important;
}
.studio-toolbar button:hover, .canvas-toolbar button:hover, .tool-btn:hover, .icon-btn:hover { background: white !important; border-color: rgba(82,99,61,.18) !important; }

/* Footer and legal/public cards */
footer { border-top: 1px solid var(--pm-line) !important; background: rgba(239,235,226,.72) !important; }
footer a { transition: color .15s ease; }
footer a:hover { color: var(--pm-accent-strong) !important; }

/* Motion */
@keyframes pm-shimmer { to { background-position-x: -220%; } }
@keyframes pm-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.try-section--lead .container, #examples .container, #pricing .container { animation: pm-fade-up .55s var(--pm-ease) both; }
#examples .container { animation-delay: .06s; }
#pricing .container { animation-delay: .1s; }

/* Responsive polish */
@media (max-width: 900px) {
  nav.top .inner { min-height: 64px; }
  .try-section--lead { padding-top: 44px !important; }
  .try-section--lead::before { inset: 12px 8px 8px; border-radius: 24px; }
  .section-title, h1.hero-title, .try-lead-title { letter-spacing: -.045em !important; }
  .price-card.featured { transform: none !important; }
  .modal, .signup-modal, .account-modal, .consent-modal { border-radius: 22px !important; }
  .studio-sidebar, .studio-panel, .side-panel, .left-panel, .right-panel, .canvas-panel, .result-panel { border-radius: 13px !important; }
}
@media (max-width: 640px) {
  nav.top .inner { padding-inline: 14px !important; }
  nav.top .cta, nav.top .signin, nav.top button, .topbar button, .topbar a,
  .btn-primary, .btn-secondary, .btn-tier, [data-buy-credits], summary.pricing-divider,
  .style-chip, .try-mode-tab, .engine-pill {
    min-height: 44px;
  }
  .try-section--lead::before { background: rgba(255,255,255,.5); }
  #pricing-checkout .checkout-body { padding: 14px !important; }
  .price-card { padding: 20px !important; }
  .modal-backdrop, .signup-backdrop, .account-backdrop { padding: 10px !important; }
  .modal, .signup-modal, .account-modal, .consent-modal { max-height: calc(100dvh - 20px); overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .try-mode-tab:hover, .input-mode:hover, .engine-pill:hover,
  .example-card:hover, .gallery-card:hover, .render-card:hover, .demo-card:hover,
  .example-card:hover img, .gallery-card:hover img, .render-card:hover img, .demo-card:hover img,
  .price-card:hover, nav.top .cta:hover, .topbar-action.cta:hover, .btn-primary:hover,
  button.primary:hover, .ft-cta:hover, [data-buy-credits]:hover,
  .modal-close:hover, .signup-close:hover, .account-close:hover, .lightbox-close:hover { transform: none !important; }
}

/* Visual QA F01: intentional compact rows; every navigation destination stays accessible. */
@media (max-width: 1100px) {
  nav.top .inner { flex-wrap: wrap; min-width: 0; gap: 8px 12px; }
  nav.top .inner > a { white-space: normal; }
}
@media (max-width: 640px) {
  nav.top { padding-block: 0; }
  nav.top .inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 10px; }
  nav.top .inner > a { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; max-width: 100%; font-size: 13px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
  nav.top .inner > .brand { grid-column: 1 / 3; grid-row: 1; justify-content: flex-start; margin: 0; font-size: 20px; }
  nav.top .inner > .lang-picker { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0 !important; }
  nav.top .inner:has(> .cta) > .brand { grid-column: 1; }
  nav.top .inner > .cta { grid-column: 2; grid-row: 1; padding-inline: 8px !important; }
  .try-lead-title, .section-title, header.page h1 { overflow-wrap: anywhere; }
  .try-mode-tabs, .free-tiers-row, .wb-actions { flex-wrap: wrap; min-width: 0; }
}
/* Visual QA F02: readable foregrounds on the premium light footer, including inline copy. */
footer { color: var(--pm-ink-2) !important; }
footer p, footer span, footer strong, footer .tagline, footer .col h4, footer .col a,
footer .legal-entity, footer .bottom, footer a { color: var(--pm-ink-2) !important; }
footer .brand-large, footer .legal-entity strong { color: var(--pm-ink) !important; }
footer .legal-entity a { color: var(--pm-accent-strong) !important; }
footer .legal-entity, footer .bottom { border-color: var(--pm-line-strong) !important; }
/* Visual QA F09: hidden widgets cannot overlap or receive focus during sign-in. */
body:has(#signup-backdrop.open) #pl-wa-fab,
body:has(#signup-backdrop.open) #pl-report-fab { visibility: hidden !important; pointer-events: none !important; }

/* F01: long translated footer links must not impose minimum grid tracks. */
@media (max-width: 640px) {
  footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
  footer .footer-grid > *, footer .legal-entity { min-width: 0; overflow-wrap: anywhere; }
}