/* Accessibility controls are present before any page-specific styles. */
.skip-link{position:fixed;z-index:10000;inset-block-start:10px;inset-inline-start:10px;padding:12px 16px;transform:translateY(-160%);transition:transform .16s ease}
.skip-link:focus{transform:translateY(0)}
.theme-toggle{flex:0 0 auto;min-width:42px;min-height:42px;padding:9px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--theme-border);font:600 12px var(--ui-font);cursor:pointer}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle[data-mode="dark"] .theme-toggle-sun,.theme-toggle[data-mode="light"] .theme-toggle-moon{display:none}
.theme-toggle-label{white-space:nowrap}
.auth-topbar>.theme-toggle{margin-inline-start:auto}
.auth-topbar>.language-switcher+.theme-toggle{margin-inline-start:0}

/* Cost centre readability. Cost data is dense and often inspected for long
   periods, so it uses a larger type floor and stronger semantic colours than
   the compact operational tables elsewhere in the admin panel. */
#adminCostsView{--cost-text:#f4f8ff;--cost-muted:#bdcbe0;--cost-subtle:#9fb2cf;--cost-row:rgba(10,30,58,.62);--cost-row-alt:rgba(14,39,73,.72);--cost-row-hover:rgba(28,68,116,.5);--cost-source:#79cdff;--cost-warning-bg:rgba(255,190,79,.16);--cost-warning-border:rgba(255,203,111,.46);--cost-warning-text:#ffe1a3;--cost-ok-bg:rgba(51,207,145,.16);--cost-ok-border:rgba(92,229,171,.42);--cost-ok-text:#b4f5d8}
#adminCostsView .dashboard-card{color:var(--cost-text)}
#adminCostsView :is(.admin-view-heading>p,.admin-section-note,.admin-metrics span,.admin-metrics small,.admin-cost-period,.admin-growth-grid p,.empty-copy){color:var(--cost-muted);font-size:12px;line-height:1.6}
#adminCostsView :is(h2,h3,.admin-metrics strong,.admin-growth-grid strong,.admin-table strong){color:var(--cost-text)}
#adminCostsView .admin-metrics article{background:linear-gradient(145deg,rgba(12,35,67,.94),rgba(7,24,49,.96));border-color:rgba(140,182,238,.24)}
#adminCostsView .admin-metrics span{white-space:normal;overflow:visible;text-overflow:clip}
#adminCostsView .admin-cost-period{font-weight:800}
#adminCostsView .admin-cost-form .field>span{color:var(--cost-muted);font-size:12px;line-height:1.45}
#adminCostsView .admin-cost-form :is(input,select){font-size:12px}
#adminCostsView .admin-growth-grid article{background:var(--cost-row);border-color:rgba(140,182,238,.22)}
#adminCostsView .admin-growth-grid p{margin:0}
#adminCostsView .admin-growth-grid code{background:rgba(1,9,20,.72);color:var(--cost-source);font-size:11px;line-height:1.55}
#adminCostsView .admin-table{border-collapse:separate;border-spacing:0}
#adminCostsView .admin-table :is(th,td){font-size:12px;line-height:1.55}
#adminCostsView .admin-table th{background:rgba(20,48,84,.94);color:#d4e2f5}
#adminCostsView .admin-table td{background:var(--cost-row);color:#e8f0fb}
#adminCostsView .admin-table tbody tr:nth-child(even) td{background:var(--cost-row-alt)}
#adminCostsView .admin-table tbody tr:hover td{background:var(--cost-row-hover)}
#adminCostsView .admin-cost-source{color:var(--cost-source);font-weight:750;text-decoration-color:rgba(121,205,255,.55)}
#adminCostsView :is(.admin-cost-status,.admin-growth-grid header span,.admin-count-badge){border:1px solid var(--cost-warning-border);background:var(--cost-warning-bg);color:var(--cost-warning-text);font-size:11px;line-height:1.35;font-weight:850}
#adminCostsView :is(.admin-cost-status.verified,.admin-growth-grid .ready header span){border-color:var(--cost-ok-border);background:var(--cost-ok-bg);color:var(--cost-ok-text)}

html[data-theme="light"] #adminCostsView{--cost-text:var(--ui-ink);--cost-muted:var(--ui-muted);--cost-subtle:var(--ui-subtle);--cost-row:var(--ui-surface);--cost-row-alt:var(--ui-surface-raised);--cost-row-hover:var(--ui-green-wash);--cost-source:var(--ui-green);--cost-warning-bg:var(--ui-ochre-wash);--cost-warning-border:var(--ui-ochre);--cost-warning-text:#754100;--cost-ok-bg:var(--ui-green-wash);--cost-ok-border:var(--ui-green);--cost-ok-text:#075b42}
html[data-theme="light"] #adminCostsView .dashboard-card{background:var(--ui-surface)!important;color:var(--cost-text)!important;border-color:var(--ui-line)!important}
html[data-theme="light"] #adminCostsView :is(.admin-view-heading>p,.admin-section-note,.admin-metrics span,.admin-metrics small,.admin-cost-period,.admin-growth-grid p,.empty-copy,.admin-cost-form .field>span){color:var(--cost-muted)!important}
html[data-theme="light"] #adminCostsView :is(h2,h3,.admin-metrics strong,.admin-growth-grid strong,.admin-table strong){color:var(--cost-text)!important}
html[data-theme="light"] #adminCostsView .admin-metrics article{background:var(--ui-surface-raised)!important;border-color:var(--ui-line)!important;box-shadow:none!important}
html[data-theme="light"] #adminCostsView .admin-growth-grid article{background:var(--cost-row-alt)!important;color:var(--cost-text)!important;border-color:var(--ui-line)!important}
html[data-theme="light"] #adminCostsView .admin-growth-grid code{background:var(--ui-surface-soft)!important;color:var(--cost-source)!important;border:1px solid var(--ui-line)}
html[data-theme="light"] #adminCostsView .admin-table th{background:var(--ui-ochre-wash)!important;color:var(--ui-ink)!important}
html[data-theme="light"] #adminCostsView .admin-table td{background:var(--cost-row)!important;color:var(--ui-muted)!important}
html[data-theme="light"] #adminCostsView .admin-table tbody tr:nth-child(even) td{background:var(--cost-row-alt)!important}
html[data-theme="light"] #adminCostsView .admin-table tbody tr:hover td{background:var(--cost-row-hover)!important}
html[data-theme="light"] #adminCostsView .admin-cost-source{color:var(--cost-source)!important}
html[data-theme="light"] #adminCostsView :is(.admin-cost-status,.admin-growth-grid header span,.admin-count-badge){border-color:var(--cost-warning-border)!important;background:var(--cost-warning-bg)!important;color:var(--cost-warning-text)!important}
html[data-theme="light"] #adminCostsView :is(.admin-cost-status.verified,.admin-growth-grid .ready header span){border-color:var(--cost-ok-border)!important;background:var(--cost-ok-bg)!important;color:var(--cost-ok-text)!important}

@media(max-width:620px){#adminCostsView .admin-section-head{gap:10px}#adminCostsView .admin-cost-period{width:100%;justify-content:space-between}#adminCostsView .admin-cost-period .admin-filter{min-width:132px}#adminCostsView .admin-table :is(th,td){font-size:12px}}


/* LectureSift / Product Studio
   One shared, accessible skin for marketing, study, account and admin screens.
   Components retain their behavior; color, type and spacing live here. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --ui-font: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ui-action: #eda987;
  --ui-action-hover: #f7bd9e;
  --ui-action-ink: #291d16;
  --ui-page: #1c1a18;
  --ui-surface: #25221f;
  --ui-surface-raised: #302b27;
  --ui-surface-soft: #3a332d;
  --ui-ink: #f5eee5;
  --ui-muted: #cec1b2;
  --ui-subtle: #bcae9e;
  --ui-green: #a8d5b0;
  --ui-green-strong: #c0e4c5;
  --ui-green-wash: rgba(130, 201, 174, .12);
  --ui-terracotta: #eda987;
  --ui-terracotta-strong: #f7bd9e;
  --ui-terracotta-wash: rgba(217, 130, 91, .13);
  --ui-ochre: #e1ab5b;
  --ui-ochre-wash: rgba(225, 171, 91, .14);
  --ui-danger: #f1a09a;
  --ui-danger-wash: rgba(241, 160, 154, .12);
  --ui-line: rgba(245, 240, 231, .18);
  --ui-line-strong: rgba(245, 240, 231, .3);
  --ui-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  --ui-shadow-soft: 0 8px 22px rgba(0, 0, 0, .16);
  --bg: var(--ui-page);
  --bg-soft: var(--ui-surface);
  --panel: var(--ui-surface);
  --panel-strong: var(--ui-surface-raised);
  --line: var(--ui-line);
  --line-strong: var(--ui-line-strong);
  --text: var(--ui-ink);
  --muted: var(--ui-muted);
  --blue: var(--ui-green);
  --violet: var(--ui-terracotta);
  --green: var(--ui-green);
  --orange: var(--ui-ochre);
  --red: var(--ui-danger);
  --shadow: var(--ui-shadow);
  --theme-surface: var(--ui-surface);
  --theme-surface-strong: var(--ui-page);
  --theme-input: var(--ui-surface-raised);
  --theme-raised: var(--ui-surface-soft);
  --theme-text: var(--ui-ink);
  --theme-muted: var(--ui-muted);
  --theme-border: var(--ui-line);
}

html[data-theme="light"] {
  color-scheme: light;
  --ui-action: #9b452a;
  --ui-action-hover: #81391f;
  --ui-action-ink: #fffaf5;
  --ui-page: #faf8f4;
  --ui-surface: #fffefc;
  --ui-surface-raised: #f1ede6;
  --ui-surface-soft: #e8e2d8;
  --ui-ink: #27231f;
  --ui-muted: #62584f;
  --ui-subtle: #70665c;
  --ui-green: #27604b;
  --ui-green-strong: #174832;
  --ui-green-wash: rgba(15, 102, 86, .09);
  --ui-terracotta: #9b452a;
  --ui-terracotta-strong: #81391f;
  --ui-terracotta-wash: rgba(159, 71, 37, .09);
  --ui-ochre: #a46c10;
  --ui-ochre-wash: rgba(164, 108, 16, .1);
  --ui-danger: #a73434;
  --ui-danger-wash: rgba(167, 52, 52, .08);
  --ui-line: rgba(23, 35, 31, .18);
  --ui-line-strong: rgba(23, 35, 31, .32);
  --ui-shadow: 0 5px 18px rgba(32, 39, 34, .045);
  --ui-shadow-soft: 0 3px 12px rgba(32, 39, 34, .04);
  --bg: var(--ui-page);
  --bg-soft: var(--ui-surface-raised);
  --panel: var(--ui-surface);
  --panel-strong: var(--ui-surface);
  --line: var(--ui-line);
  --line-strong: var(--ui-line-strong);
  --text: var(--ui-ink);
  --muted: var(--ui-muted);
  --blue: var(--ui-green);
  --violet: var(--ui-terracotta);
  --green: var(--ui-green);
  --orange: var(--ui-ochre);
  --red: var(--ui-danger);
  --shadow: var(--ui-shadow);
  --theme-surface: var(--ui-surface);
  --theme-surface-strong: var(--ui-page);
  --theme-input: var(--ui-surface);
  --theme-raised: var(--ui-surface-raised);
  --theme-text: var(--ui-ink);
  --theme-muted: var(--ui-muted);
  --theme-border: var(--ui-line);
  background: var(--ui-page) !important;
}

html,
body {
  background: var(--ui-page) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
}

body {
  font-family: var(--ui-font);
  font-weight: 450;
  text-rendering: optimizeLegibility;
}

:is(h1, h2, h3, h4, .brand, .brand > span, .metric strong, .admin-metrics strong) {
  color: var(--ui-ink) !important;
  font-family: var(--ui-font);
  font-weight: 700;
  letter-spacing: -.025em;
}

:is(p, li, dd, figcaption, small, .intro, .lead, .empty-copy) {
  color: var(--ui-muted);
}

a {
  text-decoration-color: color-mix(in srgb, var(--ui-green) 50%, transparent);
  text-underline-offset: .18em;
}

a:hover {
  text-decoration-color: var(--ui-terracotta);
}

::selection {
  background: var(--ui-ochre-wash) !important;
  color: var(--ui-ink) !important;
}

::placeholder {
  color: var(--ui-subtle) !important;
  opacity: .9;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ui-ochre) !important;
  outline-offset: 3px !important;
}

.skip-link {
  border-color: var(--ui-ochre) !important;
  border-radius: 7px;
  background: var(--ui-ink) !important;
  color: var(--ui-page) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

/* Navigation and identity */
:is(.topbar, .auth-topbar, .legal-topbar) {
  background: var(--ui-surface) !important;
  background-image: none !important;
  border-color: var(--ui-line) !important;
  box-shadow: 0 1px 0 var(--ui-line) !important;
  backdrop-filter: none !important;
}

.brand-mark {
  border: 1px solid color-mix(in srgb, var(--ui-green) 72%, var(--ui-line));
  border-radius: 7px !important;
  background: var(--ui-green) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.brand-mark i {
  background: var(--ui-page) !important;
  background-image: none !important;
}

.brand span span,
.brand > span > span {
  color: var(--ui-terracotta) !important;
}

:is(.public-nav-link, .public-account-link, .top-link, .top-links, .back-link, .footer-links a, .footer-instagram, .footer-bottom, .legal-footer, .legal-nav a) {
  color: var(--ui-muted) !important;
}

:is(.public-nav-link, .public-account-link, .top-link, .account-button, .public-social-link, .theme-toggle) {
  border-radius: 7px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:is(.public-nav-link:hover, .public-nav-link.active, .public-account-link:hover, .top-link:hover, .top-link.active) {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-green-wash) !important;
  color: var(--ui-green-strong) !important;
}

html:not([data-theme="light"]) :is(.public-nav-link:hover, .public-nav-link.active, .public-account-link:hover, .top-link:hover, .top-link.active) {
  color: var(--ui-green) !important;
}

.public-nav-link.active {
  box-shadow: inset 0 -2px var(--ui-terracotta) !important;
}

.public-account-link[data-session-state="signed-in"] {
  border-color: color-mix(in srgb, var(--ui-green) 48%, transparent) !important;
  background: var(--ui-green-wash) !important;
  color: var(--ui-green) !important;
}

.theme-toggle {
  border: 1px solid var(--ui-line) !important;
  background: var(--ui-surface-raised) !important;
  color: var(--ui-ink) !important;
}

.theme-toggle:hover {
  border-color: var(--ui-green) !important;
  background: var(--ui-green-wash) !important;
}

/* Paper, cards and editorial sections */
:is(
  .panel,
  .billing-section,
  .feature-band,
  .campaign-section,
  .detail-section,
  .auth-card,
  .dashboard-card,
  .admin-metrics article,
  .legal-card,
  .legal-nav,
  .rollout-card,
  .admin-command-bar,
  .admin-detail-dialog,
  .consent-card,
  .consent-banner,
  .checkout-panel,
  .results,
  .public-support-card
) {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: none !important;
}

:is(.panel, .billing-section, .feature-band, .campaign-section, .detail-section, .legal-card, .public-support-card) {
  border-radius: 14px !important;
}

:is(.detail-section, .billing-section, .legal-card, .public-support-card) {
  border-inline-start: 1px solid var(--ui-line) !important;
}

:is(.detail-hero, .auth-story, .account-hero, .workspace-intro) {
  border: 1px solid var(--ui-line) !important;
  border-inline-start: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  background: var(--ui-surface-raised) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow) !important;
}

:is(.detail-hero, .workspace-intro) h1 {
  max-width: 18ch;
  line-height: 1.04;
}

:is(.eyebrow, .step-number, .secure-note, .metric-label, .plan-kicker, .admin-sidebar-label) {
  color: var(--ui-terracotta) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
}

:is(.detail-hero > p:not(.eyebrow), .auth-story > p:not(.eyebrow), .workspace-intro > div > p:last-child, .lead) {
  color: var(--ui-muted) !important;
}

:is(
  .capability-card,
  .flow-grid article,
  .faq-list details,
  .payment-method-grid article,
  .account-panel,
  .account-meta div,
  .story-item,
  .feature-grid article,
  .campaign-card,
  .plan-card,
  .transfer-panel,
  .transfer-grid > div,
  .key-item,
  .note-item,
  .file-item,
  .quiz-item,
  .flash-card,
  .lesson-answer,
  .exam-readiness,
  .checkout-summary,
  .checkout-summary dl div,
  .checkout-legal-links,
  .iyzico-checkout-brand,
  .bank-transfer-guide,
  .source-tabs,
  .recording-mode-tabs,
  .upload-source-card,
  .process-metric,
  .result-card,
  .content-choice,
  .promise-card,
  .rollout-admin-row,
  .admin-readiness article,
  .admin-provider-summary article,
  .admin-alerts article,
  .admin-timeline article,
  .admin-detail-summary article,
  .admin-growth-grid article,
  .admin-user-card,
  .admin-user-form,
  .admin-user-stats span,
  .admin-plan-distribution article,
  .admin-row-details dl
) {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-raised) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

:is(.capability-card, .feature-grid article, .campaign-card, .plan-card) {
  border-radius: 10px !important;
  border-block-start: 3px solid var(--ui-ochre) !important;
}

:is(.plan-card.featured, .campaign-card.featured) {
  border-block-start-color: var(--ui-terracotta) !important;
  background: var(--ui-terracotta-wash) !important;
}

:is(.capability-card span, .flow-grid article::before, .payment-method-grid article > span, .admin-nav-icon, .admin-timeline-icon) {
  border: 1px solid color-mix(in srgb, var(--ui-ochre) 45%, transparent) !important;
  border-radius: 6px !important;
  background: var(--ui-ochre-wash) !important;
  color: var(--ui-ochre) !important;
}

html[data-theme="light"] :is(.capability-card span, .flow-grid article::before, .payment-method-grid article > span, .admin-nav-icon, .admin-timeline-icon) {
  color: #665019 !important;
}

:is(.capability-card p, .capability-card li, .flow-grid p, .faq-list p, .feature-grid p, .campaign-card p, .plan-card p, .plan-features li, .credit-callout p) {
  color: var(--ui-muted) !important;
}

.faq-list summary {
  color: var(--ui-ink) !important;
}

.faq-list summary::marker {
  color: var(--ui-terracotta);
}

.legal-card section {
  border-color: var(--ui-line) !important;
}

.legal-note,
.notice:not(.error),
.transcript-view-note {
  border-color: color-mix(in srgb, var(--ui-ochre) 52%, transparent) !important;
  border-inline-start: 4px solid var(--ui-ochre) !important;
  background: var(--ui-ochre-wash) !important;
  color: var(--ui-ink) !important;
}

.notice.error,
.danger-zone {
  border-color: color-mix(in srgb, var(--ui-danger) 50%, transparent) !important;
  background: var(--ui-danger-wash) !important;
  color: var(--ui-danger) !important;
}

.social-card,
.credit-callout,
.bank-summary {
  border-color: color-mix(in srgb, var(--ui-green) 42%, transparent) !important;
  background: var(--ui-green-wash) !important;
  color: var(--ui-ink) !important;
}

/* The product preview should feel like a marked-up study desk, not a neon
   dashboard. These rules deliberately cover the dark theme as well as light. */
.hero-visual {
  isolation: isolate;
}

.visual-window {
  border-color: var(--ui-line-strong) !important;
  border-radius: 12px !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow) !important;
  transform: none !important;
}

.visual-bar {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-raised) !important;
  color: var(--ui-muted) !important;
}

.visual-bar i {
  border: 1px solid color-mix(in srgb, var(--ui-ink) 20%, transparent);
  background: var(--ui-muted) !important;
}

.visual-bar i:first-child {
  background: var(--ui-terracotta) !important;
}

.visual-bar i:nth-child(2) {
  background: var(--ui-ochre) !important;
}

.visual-bar i:nth-child(3) {
  background: var(--ui-green) !important;
}

.visual-content {
  background: var(--ui-surface) !important;
  background-image: none !important;
}

.visual-menu {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-raised) !important;
  color: var(--ui-muted) !important;
}

.visual-menu > * {
  border: 1px solid transparent;
}

.visual-menu b {
  border-color: color-mix(in srgb, var(--ui-green) 38%, transparent) !important;
  background: var(--ui-green-wash) !important;
  color: var(--ui-green) !important;
}

.visual-summary small {
  color: var(--ui-terracotta) !important;
}

.visual-summary h3 {
  color: var(--ui-ink) !important;
  font-family: var(--ui-font);
}

.visual-summary p,
.visual-menu span,
.visual-chips span {
  color: var(--ui-muted) !important;
}

.visual-chips span {
  border-color: var(--ui-line) !important;
  background: var(--ui-ochre-wash) !important;
}

.floating-card {
  border-color: var(--ui-line-strong) !important;
  border-block-start: 3px solid var(--ui-ochre) !important;
  border-radius: 9px !important;
  background: var(--ui-surface-raised) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

.floating-card.quiz-float {
  border-block-start-color: var(--ui-terracotta) !important;
}

.floating-card.time-float {
  border-block-start-color: var(--ui-green) !important;
}

.floating-card small {
  color: var(--ui-terracotta) !important;
}

.floating-card strong {
  color: var(--ui-ink) !important;
  font-family: var(--ui-font);
}

.floating-card span {
  color: var(--ui-muted) !important;
}

/* Controls and actions */
:is(
  .field input,
  .field select,
  .field textarea,
  .auth-form input,
  .admin-filter,
  .admin-inline-input,
  .rollout-form input,
  .rollout-form select,
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .checkout-form input,
  .checkout-form textarea,
  .language-switcher,
  .language-picker select,
  .currency-picker select,
  .control select,
  .url-field input,
  .sync-control input,
  .lesson-ask textarea,
  .public-support-card textarea,
  .content-choice.with-count select
) {
  border-color: var(--ui-line-strong) !important;
  border-radius: 7px !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-ink) 4%, transparent) !important;
}

:is(.field select, .rollout-form select, .contact-form select, .language-switcher, .language-picker select, .currency-picker select, .control select, .content-choice.with-count select) {
  appearance: auto !important;
  padding-inline: 11px !important;
}

:is(
  .field input,
  .field select,
  .field textarea,
  .auth-form input,
  .admin-filter,
  .admin-inline-input,
  .rollout-form input,
  .rollout-form select,
  .contact-form input,
  .contact-form select,
  .contact-form textarea,
  .checkout-form input,
  .checkout-form textarea,
  .control select,
  .url-field input,
  .sync-control input,
  .lesson-ask textarea,
  .public-support-card textarea,
  .content-choice.with-count select
):focus {
  border-color: var(--ui-green) !important;
  box-shadow: 0 0 0 3px var(--ui-green-wash) !important;
}

.admin-action {
  min-height: 36px;
  max-width: 100%;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 7px !important;
  background: var(--ui-surface-raised) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
  cursor: pointer;
  font: inherit;
  font-size: 12px !important;
  font-weight: 800;
  line-height: 1.35 !important;
  text-align: center;
  white-space: normal;
}

.admin-action:hover:not(:disabled) {
  border-color: var(--ui-green) !important;
  background: var(--ui-green-wash) !important;
  color: var(--ui-green) !important;
}

.admin-action:disabled {
  cursor: not-allowed;
  opacity: .55;
}

:is(
  .primary-button,
  .primary-action,
  .auth-form button,
  .account-status button,
  .plan-action,
  .copy-transfer,
  .download-button,
  .hero-primary,
  .cta-register,
  .campaign-card a,
  .detail-actions .primary,
  .checkout-form .primary,
  .bank-transfer-guide .primary,
  .rollout-form button:not(.secondary),
  .rollout-action,
  .lesson-ask form button,
  .public-support-card button,
  .consent-actions button.primary,
  .contact-form button,
  .admin-action.approve,
  .admin-contact-reply .admin-action.approve,
  .house-campaign-action
) {
  border-color: var(--ui-action) !important;
  border-radius: 8px !important;
  background: var(--ui-action) !important;
  background-image: none !important;
  color: var(--ui-action-ink) !important;
  box-shadow: none !important;
}

html:not([data-theme="light"]) :is(
  .primary-button,
  .primary-action,
  .auth-form button,
  .account-status button,
  .plan-action,
  .copy-transfer,
  .download-button,
  .hero-primary,
  .cta-register,
  .campaign-card a,
  .detail-actions .primary,
  .checkout-form .primary,
  .bank-transfer-guide .primary,
  .rollout-form button:not(.secondary),
  .rollout-action,
  .lesson-ask form button,
  .public-support-card button,
  .consent-actions button.primary,
  .contact-form button,
  .admin-action.approve,
  .admin-contact-reply .admin-action.approve,
  .house-campaign-action
) {
  background: var(--ui-action) !important;
}

:is(
  .primary-button,
  .primary-action,
  .auth-form button,
  .account-status button,
  .plan-action,
  .copy-transfer,
  .download-button,
  .hero-primary,
  .cta-register,
  .campaign-card a,
  .detail-actions .primary,
  .checkout-form .primary,
  .bank-transfer-guide .primary,
  .rollout-action,
  .lesson-ask form button,
  .public-support-card button,
  .consent-actions button.primary,
  .contact-form button,
  .admin-action.approve,
  .admin-contact-reply .admin-action.approve,
  .house-campaign-action
):hover:not(:disabled) {
  background: var(--ui-action-hover) !important;
  border-color: var(--ui-action) !important;
  filter: none !important;
}

html:not([data-theme="light"]) :is(
  .primary-button,
  .primary-action,
  .auth-form button,
  .account-status button,
  .plan-action,
  .copy-transfer,
  .download-button,
  .hero-primary,
  .cta-register,
  .campaign-card a,
  .detail-actions .primary,
  .checkout-form .primary,
  .bank-transfer-guide .primary,
  .rollout-action,
  .lesson-ask form button,
  .public-support-card button,
  .consent-actions button.primary,
  .contact-form button,
  .admin-action.approve,
  .admin-contact-reply .admin-action.approve,
  .house-campaign-action
):hover:not(:disabled) {
  border-color: var(--ui-action) !important;
  background: var(--ui-action-hover) !important;
}

:is(
  .secondary-action,
  .hero-secondary,
  .cta-login,
  .detail-actions .secondary,
  .checkout-form .secondary,
  .bank-transfer-guide .secondary,
  .rollout-form button.secondary,
  .workspace-intro-actions a,
  .flash-actions button,
  .exam-prep > button,
  .admin-dialog-close,
  .consent-actions button:not(.primary),
  .consent-manage
) {
  border: 1px solid var(--ui-line-strong) !important;
  border-radius: 8px !important;
  background: var(--ui-surface-raised) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

:is(
  .secondary-action,
  .hero-secondary,
  .cta-login,
  .detail-actions .secondary,
  .checkout-form .secondary,
  .bank-transfer-guide .secondary,
  .rollout-form button.secondary,
  .workspace-intro-actions a,
  .flash-actions button,
  .exam-prep > button,
  .admin-dialog-close,
  .consent-actions button:not(.primary),
  .consent-manage
):hover:not(:disabled) {
  border-color: var(--ui-terracotta) !important;
  background: var(--ui-terracotta-wash) !important;
  color: var(--ui-terracotta-strong) !important;
}

.secondary-action.danger,
.danger-zone .secondary-action.danger {
  border-color: color-mix(in srgb, var(--ui-danger) 58%, transparent) !important;
  background: var(--ui-danger-wash) !important;
  color: var(--ui-danger) !important;
}

.secondary-action.danger:hover:not(:disabled),
.danger-zone .secondary-action.danger:hover:not(:disabled) {
  border-color: var(--ui-danger) !important;
  background: var(--ui-danger) !important;
  color: #ffffff !important;
}

:is(button, [role="button"], input, select, textarea, summary) {
  accent-color: var(--ui-green);
}

/* Upload, processing and study outputs */
:is(.drop-zone, .mini-drop-zone) {
  border: 1px dashed color-mix(in srgb, var(--ui-green) 58%, var(--ui-line)) !important;
  border-radius: 10px !important;
  background: var(--ui-green-wash) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
}

:is(.drop-zone:hover, .mini-drop-zone:hover) {
  border-color: var(--ui-terracotta) !important;
  background: var(--ui-terracotta-wash) !important;
}

:is(.drop-zone, .mini-drop-zone):focus-within,
.format-choices input:focus-visible + span,
.content-choice input:focus-visible + i {
  outline: 3px solid var(--ui-ochre) !important;
  outline-offset: 3px !important;
}

.upload-icon {
  border: 1px solid var(--ui-line) !important;
  border-radius: 7px !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  color: var(--ui-green) !important;
}

.promise-card > span {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-ochre) 45%, transparent);
  border-radius: 50%;
  background: var(--ui-ochre-wash) !important;
  color: var(--ui-ochre) !important;
  font-size: 16px;
  line-height: 1;
}

:is(.source-tab.active, .recording-mode-tabs button.active, .format-choices input:checked + span, .pack-presets button.active) {
  border-color: color-mix(in srgb, var(--ui-green) 52%, transparent) !important;
  background: var(--ui-green-wash) !important;
  background-image: none !important;
  color: var(--ui-green) !important;
  box-shadow: inset 0 -2px var(--ui-green) !important;
}

.content-choice label > i {
  border-color: var(--ui-line-strong) !important;
  background: var(--ui-surface) !important;
}

.content-choice input:checked + i {
  border-color: var(--ui-green) !important;
  background: var(--ui-green) !important;
  background-image: none !important;
}

.toggle-control input:checked + i {
  background: var(--ui-green) !important;
  background-image: none !important;
}

:is(.usage-track, .admin-progress, .admin-plan-distribution i) {
  background: var(--ui-surface-soft) !important;
}

:is(.usage-track i, .admin-progress span, .admin-plan-distribution b) {
  background: var(--ui-green) !important;
  background-image: none !important;
}

.progress-ring {
  background: conic-gradient(var(--ui-green) var(--progress), var(--ui-surface-soft) var(--progress)) !important;
}

.progress-ring::after {
  background: var(--ui-surface) !important;
}

:is(
  .format-choices,
  .sync-control,
  .url-field,
  .toggle-control,
  .stage-list li,
  .transcript-box,
  .transcript-enhancements,
  .transcript-timeline,
  .transcript-segment,
  .speaker-legend span,
  .slide-card,
  .quiz-option,
  .lesson-ask textarea,
  .exam-prep > button,
  .account-section-nav,
  .admin-bulk-toolbar,
  .pack-presets button
) {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-raised) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  backdrop-filter: none !important;
}

:is(.format-legend, .format-choices label span, .sync-control b, .sync-control small, .toggle-control b, .toggle-control small, .result-tab, .transcript-box, .transcript-plain, .transcript-segment-text, .transcript-speaker, .speaker-legend span, .slide-card figcaption, .quiz-option, .quiz-explanation, .flash-card p, .lesson-answer p, .lesson-answer li, .exam-readiness span, .exam-readiness p) {
  color: var(--ui-muted) !important;
}

.transcript-waveform {
  border-color: var(--ui-line) !important;
  background-color: var(--ui-surface-raised) !important;
}

.transcript-wave-track {
  background: transparent !important;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), var(--ui-line) 10%) !important;
}

.transcript-timeline-head > span,
.elapsed {
  border-color: var(--ui-line) !important;
  background: var(--ui-ochre-wash) !important;
  color: var(--ui-ochre) !important;
}

.transcript-segment time,
.section-detail-link,
.feature-deep-links a,
.social-card a,
.legal-card a {
  color: var(--ui-green) !important;
}

.transcript-segment:hover,
.transcript-segment.active {
  background: var(--ui-green-wash) !important;
  color: var(--ui-ink) !important;
}

.feature-deep-links a {
  border-color: var(--ui-line) !important;
  border-radius: 8px !important;
  background: var(--ui-surface-raised) !important;
}

.feature-deep-links a:hover {
  border-color: var(--ui-terracotta) !important;
  background: var(--ui-terracotta-wash) !important;
  color: var(--ui-terracotta-strong) !important;
}

/* Tables, status and commerce */
:is(.compare-wrap, .admin-table-wrap, .data-table) {
  border-color: var(--ui-line) !important;
}

:is(.compare-table, .admin-table, .admin-record-table, .data-table) {
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
}

:is(.compare-table th, .admin-table th, .admin-record-table th, .data-table th) {
  border-color: var(--ui-line) !important;
  background: var(--ui-ochre-wash) !important;
  color: var(--ui-ink) !important;
}

:is(.compare-table td, .admin-table td, .admin-record-table td, .data-table td) {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-muted) !important;
}

:is(.compare-table tbody tr:nth-child(even) td, .admin-table tbody tr:nth-child(even) td, .admin-record-table tbody tr:nth-child(even) td, .data-table tbody tr:nth-child(even) td) {
  background: var(--ui-surface-raised) !important;
}

:is(.compare-table tbody tr:hover td, .admin-table tbody tr:hover td, .admin-record-table tbody tr:hover td, .data-table tbody tr:hover td) {
  background: var(--ui-green-wash) !important;
}

.status-pill {
  border: 1px solid color-mix(in srgb, var(--ui-ochre) 48%, transparent) !important;
  background: var(--ui-ochre-wash) !important;
  color: var(--ui-ochre) !important;
}

.status-pill.paid,
.verified-pill,
.delivery-sent {
  border-color: color-mix(in srgb, var(--ui-green) 48%, transparent) !important;
  background: var(--ui-green-wash) !important;
  color: var(--ui-green) !important;
}

.admin-action.reject {
  border-color: var(--ui-danger) !important;
  background: var(--ui-danger-wash) !important;
  color: var(--ui-danger) !important;
}

.admin-action.reject:hover:not(:disabled) {
  border-color: var(--ui-danger) !important;
  background: #913737 !important;
  color: #ffffff !important;
}

.delivery-failed {
  background: transparent !important;
  color: var(--ui-danger) !important;
}

.plan-badge,
.campaign-value {
  border: 1px solid color-mix(in srgb, var(--ui-terracotta) 45%, transparent) !important;
  background: var(--ui-terracotta-wash) !important;
  color: var(--ui-terracotta) !important;
}

.checkout-panel iframe {
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
}

.checkout-panel {
  z-index: 120 !important;
}

.iyzico-checkout-brand img {
  filter: sepia(.18) saturate(.78);
}

/* Auth, consent and legal */
.auth-story::after {
  display: none !important;
}

.story-item i,
.status-orb,
.bank-transfer-guide-icon {
  border: 1px solid color-mix(in srgb, var(--ui-green) 42%, transparent) !important;
  border-radius: 7px !important;
  background: var(--ui-green-wash) !important;
  background-image: none !important;
  color: var(--ui-green) !important;
  box-shadow: none !important;
}

:is(.text-button, .inline-links a, .verify-inline-link, .check-row a, .back-link) {
  color: var(--ui-green) !important;
}

.legal-nav a:hover,
.legal-nav a.active {
  background: var(--ui-terracotta-wash) !important;
  color: var(--ui-terracotta-strong) !important;
}

.legal-nav a.active {
  box-shadow: inset 3px 0 var(--ui-terracotta);
}

[dir="rtl"] .legal-nav a.active {
  box-shadow: inset -3px 0 var(--ui-terracotta);
}

.consent-banner {
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow) !important;
}

:is(.consent-banner p, .consent-heading p, .consent-card label small) {
  color: var(--ui-muted) !important;
}

:is(.consent-banner a, .consent-card a) {
  color: var(--ui-green) !important;
}

.consent-modal {
  background: rgba(17, 25, 20, .74) !important;
}

.consent-heading > button {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface-raised) !important;
  color: var(--ui-ink) !important;
}

.consent-card input {
  accent-color: var(--ui-green) !important;
}

/* Workspace has a practical notebook character; admin stays denser and
   visually separate from customer pages without becoming a different brand. */
.workspace-intro {
  border-inline-start-color: var(--ui-green) !important;
}

.admin-sidebar {
  border-color: color-mix(in srgb, var(--ui-green) 34%, transparent) !important;
  border-radius: 10px !important;
  background: #0f1d18 !important;
  background-image: none !important;
  box-shadow: var(--ui-shadow-soft) !important;
  backdrop-filter: none !important;
}

html[data-theme="light"] .admin-sidebar {
  background: #202722 !important;
}

.admin-sidebar-label {
  color: var(--ui-ochre) !important;
}

.admin-section-nav button {
  border-radius: 7px !important;
  background: transparent !important;
  background-image: none !important;
  color: #d9d2c7 !important;
}

.admin-section-nav button small {
  color: #afa79a !important;
}

.admin-section-nav button:hover {
  border-color: rgba(225, 171, 91, .42) !important;
  background: rgba(225, 171, 91, .1) !important;
  color: #ffffff !important;
  transform: none !important;
}

.admin-section-nav button[aria-selected="true"] {
  border-color: rgba(130, 201, 174, .48) !important;
  background: rgba(130, 201, 174, .12) !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 #b3d99a !important;
}

[dir="rtl"] .admin-section-nav button[aria-selected="true"] {
  box-shadow: inset -3px 0 #b3d99a !important;
}

.admin-section-nav button[aria-selected="true"] small {
  color: #c8e5d9 !important;
}

:is(.account-section-nav, .admin-bulk-toolbar, .admin-command-bar) {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-soft) !important;
  backdrop-filter: none !important;
}

:is(.account-section-nav button, .admin-bulk-toolbar button) {
  border-radius: 7px !important;
  color: var(--ui-muted) !important;
}

:is(.account-section-nav button[aria-selected="true"], .account-section-nav button:hover) {
  border-color: color-mix(in srgb, var(--ui-green) 50%, transparent) !important;
  background: var(--ui-green-wash) !important;
  background-image: none !important;
  color: var(--ui-green) !important;
}

.support-thread {
  background: var(--ui-surface-raised) !important;
}

.support-bubble {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  color: var(--ui-ink) !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

.support-bubble.outgoing {
  border-color: color-mix(in srgb, var(--ui-green) 42%, transparent) !important;
  background: var(--ui-green-wash) !important;
  color: var(--ui-ink) !important;
}

.support-bubble :is(time, small) {
  color: var(--ui-subtle) !important;
}

/* Ads and house campaigns should read like a print margin notice, not a
   bright SaaS promotion. */
.display-ad,
.display-ad.house-campaign {
  border-color: var(--ui-line) !important;
  border-inline-start: 4px solid var(--ui-ochre) !important;
  border-radius: 9px !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: var(--ui-shadow-soft) !important;
}

:is(.display-ad-label, .house-campaign .display-ad-label) {
  color: var(--ui-terracotta) !important;
}

.house-campaign strong {
  color: var(--ui-ink) !important;
  font-family: var(--ui-font);
}

.house-campaign p {
  color: var(--ui-muted) !important;
}

/* Cost centre keeps its semantic warning/ok contrast while adopting the
   same paper-and-ledger material as the rest of the admin area. */
#adminCostsView {
  --cost-text: var(--ui-ink);
  --cost-muted: var(--ui-muted);
  --cost-subtle: var(--ui-subtle);
  --cost-row: var(--ui-surface);
  --cost-row-alt: var(--ui-surface-raised);
  --cost-row-hover: var(--ui-green-wash);
  --cost-source: var(--ui-green);
  --cost-warning-bg: var(--ui-ochre-wash);
  --cost-warning-border: var(--ui-ochre);
  --cost-warning-text: var(--ui-ochre);
  --cost-ok-bg: var(--ui-green-wash);
  --cost-ok-border: var(--ui-green);
  --cost-ok-text: var(--ui-green);
}

#adminCostsView :is(.dashboard-card, .admin-metrics article, .admin-growth-grid article, .admin-growth-grid code, .admin-table th, .admin-table td) {
  border-color: var(--ui-line) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  color: var(--ui-ink) !important;
  box-shadow: none !important;
}

#adminCostsView :is(.admin-metrics article, .admin-growth-grid article, .admin-table tbody tr:nth-child(even) td) {
  background: var(--ui-surface-raised) !important;
}

#adminCostsView .admin-growth-grid code {
  background: var(--ui-surface-soft) !important;
  color: var(--ui-green) !important;
}

#adminCostsView .admin-table th {
  background: var(--ui-ochre-wash) !important;
}

#adminCostsView .admin-table tbody tr:hover td {
  background: var(--ui-green-wash) !important;
}

/* Product Studio: clear type, restrained controls and useful product previews. */
html { scroll-padding-top: 24px; }
body { font-size: 15px; line-height: 1.6; }
.ambient { display: none; }
:is(h1,h2,h3,h4,.brand) { font-family: var(--ui-font); }
:is(.topbar,.auth-topbar,.legal-topbar) {
  position: relative !important;
  top: auto !important;
  width: min(1240px, calc(100% - 64px));
  min-height: 84px;
  height: auto;
  margin-inline: auto;
  padding-block: 16px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.brand { gap: 10px; font-size: 23px; font-weight: 750; letter-spacing: -.8px; }
.brand span span { color: var(--ui-ink) !important; }
.brand-mark {
  width: 34px; height: 34px; padding: 7px;
  transform: none; gap: 3px;
  border: 0 !important; border-radius: 9px !important;
  background: var(--ui-ink) !important;
}
.brand-mark i { background: var(--ui-action) !important; border-radius: 2px; }
.brand-mark i:nth-child(1) { height: 9px; opacity: 1; }
.brand-mark i:nth-child(2) { height: 20px; }
.brand-mark i:nth-child(3) { height: 14px; opacity: 1; }
.public-header-tools { gap: 12px; }
.public-nav { gap: 3px; }
:is(.public-nav-link,.public-account-link,.top-link,.theme-toggle,.language-switcher,.language-picker select) {
  font-size: 13px !important; line-height: 1.4; font-weight: 600;
  min-height: 42px;
}
.public-nav-link { padding: 11px 10px; }
.public-nav-link.active {
  box-shadow: none !important; background: var(--ui-surface-soft) !important;
  color: var(--ui-ink) !important; border-color: transparent !important;
}
.public-account-link { margin-inline-start: 8px; padding: 11px 16px; border-color: var(--ui-line-strong) !important; }
.public-social-link { min-width: 38px; min-height: 42px; color: var(--ui-muted) !important; }
.theme-toggle { border-color: transparent !important; background: transparent !important; }
.theme-toggle-label { display: none; }
.language-picker select,.language-switcher { max-width: 132px; }
.page-shell { width: min(1240px, calc(100% - 64px)); margin: 0 auto; }
.home-page .page-shell { padding-top: 0; padding-bottom: 32px; }
.home-page .hero {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px,5vw,72px); min-height: 620px;
  padding: 66px 0 72px; margin: 0; align-items: center;
}
.home-page .hero-copy { min-width: 0; }
.home-page .eyebrow {
  font-size: 12px; line-height: 1.6; font-weight: 650;
  letter-spacing: .045em; color: var(--ui-green) !important;
}
.home-page h1 {
  max-width: 14ch; margin: 20px 0 24px;
  font-size: clamp(42px,4.8vw,66px); font-weight: 730;
  line-height: 1.06; letter-spacing: -.055em;
  overflow-wrap: normal; text-wrap: balance;
}
.home-page .intro-copy { margin: 0 0 28px; max-width: 49ch; font-size: 17px; line-height: 1.75; }
.hero-actions { gap: 12px; }
.hero-actions a { min-height: 50px; padding: 13px 22px; font-size: 14px; font-weight: 650; }
.hero-primary {
  color: var(--ui-action-ink) !important;
  border-color: var(--ui-action) !important;
  background: var(--ui-action) !important;
}
.home-page .hero-actions a.hero-primary { color: var(--ui-action-ink) !important; background: var(--ui-action) !important; border-color: var(--ui-action) !important; }
html:not([data-theme="light"]) .hero-primary { background: var(--ui-action) !important; }
.hero-primary:hover:not(:disabled),html:not([data-theme="light"]) .hero-primary:hover:not(:disabled) {
  background: var(--ui-action-hover) !important; border-color: var(--ui-action-hover) !important;
}
.hero-secondary { background: transparent !important; }
.trust-row { gap: 8px 16px; margin-top: 20px; color: var(--ui-muted); font-size: 12px; }
.hero-visual { display: flex; flex-direction: column; gap: 0; min-height: 0; width: 100%; }
.source-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; width: 85%; padding-bottom: 30px; position: relative; }
.source-preview::after { content: ""; width: 1px; height: 22px; position: absolute; bottom: 3px; left: 50%; background: var(--ui-line-strong); }
.source-file {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 67px; padding: 12px; border: 1px solid var(--ui-line);
  background: var(--ui-surface); border-radius: 10px;
  color: var(--ui-ink); font-size: 13px; font-weight: 650;
  box-shadow: 0 3px 6px rgba(0,0,0,.025);
}
.source-file svg { width: 23px; height: 26px; fill: none; stroke: var(--ui-green); stroke-width: 1.5; }
.visual-window { width: 100%; border-radius: 16px !important; box-shadow: 0 16px 50px rgba(20,30,22,.08) !important; }
.visual-bar { height: 48px; padding: 0 18px; font-size: 11px; }
.visual-bar i { width: 5px; height: 5px; background: var(--ui-subtle) !important; opacity: .55; }
.visual-content { min-height: 285px; grid-template-columns: 98px minmax(0,1fr); }
.visual-menu { padding: 16px 8px; font-size: 11px; }
.visual-menu>* { padding: 8px; border-radius: 6px; }
.visual-menu b { color: var(--ui-ink) !important; background: var(--ui-surface-soft) !important; border-color: transparent !important; }
.visual-summary { padding: 28px 24px; }
.visual-summary small { font-size: 10px; letter-spacing: .08em; }
.visual-summary h3 { font-size: 23px; line-height: 1.3; font-weight: 650; letter-spacing: -.7px; }
.visual-summary p { font-size: 12px; line-height: 1.75; }
.visual-chips { flex-wrap: wrap; gap: 7px; }
.visual-chips span { background: var(--ui-surface-raised) !important; padding: 5px 9px; border-radius: 5px; font-size: 10px; }
.visual-caption { color: var(--ui-subtle); font-size: 11px; margin: 16px 0 0; text-align: center; line-height: 1.7; }
.feature-band,.campaign-section { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 44px 0; margin: 0; }
.feature-band { border-block-start: 1px solid var(--ui-line) !important; }
.section-lead { gap: 10px 60px; align-items: start; }
.section-lead h2 { font-size: clamp(26px,3vw,38px); line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.section-lead>p:last-child { font-size: 14px; line-height: 1.75; }
.feature-grid { margin-top: 28px; gap: 14px; }
.feature-grid article { padding: 24px 20px; background: var(--ui-surface) !important; border-radius: 12px !important; }
.feature-grid article>span { display: block; color: var(--ui-green) !important; font-size: 12px; font-weight: 650; }
.feature-grid h3 { font-size: 16px; line-height: 1.4; margin: 22px 0 10px; letter-spacing: -.025em; }
.feature-grid p { font-size: 13px; line-height: 1.75; }
.feature-deep-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.feature-deep-links a { font-size: 12px; line-height: 1.5; padding: 8px 10px; background: transparent !important; color: var(--ui-green) !important; }
.section-detail-link { font-size: 13px; color: var(--ui-green) !important; }
.campaign-grid { gap: 16px; margin-top: 28px; }
.campaign-card { padding: 26px; background: var(--ui-surface) !important; border-radius: 12px !important; }
.campaign-card.featured { border-color: var(--ui-green) !important; }
.campaign-value { padding: 0; color: var(--ui-ink) !important; background: transparent !important; font-size: 32px; letter-spacing: -.06em; font-weight: 650; }
.campaign-card h3 { font-size: 17px; line-height: 1.4; margin-top: 20px; }
.campaign-card p { font-size: 13px; line-height: 1.75; min-height: 70px; }
.campaign-card a { padding: 10px 15px; font-size: 13px; }
.site-footer { width: min(1240px,calc(100% - 64px)); margin-top: 36px; padding-block: 40px 24px; }
.footer-main>p { color: var(--ui-muted) !important; font-size: 13px; line-height: 1.75; }
:is(.footer-links a,.footer-links strong,.footer-instagram,.footer-bottom) { font-size: 12px; line-height: 1.7; }
.footer-payment-band { max-width: 285px; padding: 8px; border-radius: 6px; background: #fff; }
:is(.detail-hero,.auth-story,.account-hero,.workspace-intro) { box-shadow: none !important; border-radius: 12px !important; }
:is(.detail-hero,.workspace-intro) h1 { max-width: 24ch; font-size: clamp(28px,3.8vw,46px); line-height: 1.16; }
:is(.legal-card p,.legal-card li,.capability-card p,.capability-card li,.auth-story p,.lead) { font-size: 14px; line-height: 1.85; }
:is(.field span,.field-label,.control>span,.check-row,.account-meta dt,.account-meta dd) { font-size: 13px; line-height: 1.65; }
:is(.field-help,.control small,.upload-source-card p,.combined-limit,.source-file-list small,.stage-list p,.process-metric small,.legal-note,.empty-copy) { font-size: 12px; line-height: 1.65; }
:is(.field input,.field select,.field textarea,.auth-form input,.control select,.url-field input) { font-size: 15px; min-height: 42px; }
.upload-source-head strong,.drop-zone strong { font-size: 15px; }
.drop-zone>span:not(.upload-icon),.drop-zone small { color: var(--ui-muted) !important; font-size: 12px; }
.source-tab,.recording-mode-tabs button,.pack-presets button,.content-choice { font-size: 13px; min-height: 44px; }
.format-choices { align-items: stretch; }
.account-section-nav button { font-size: 13px; min-height: 44px; }
.quiz-option.correct { background: var(--ui-green-wash) !important; border-color: var(--ui-green) !important; color: var(--ui-green) !important; }
.quiz-option.wrong { background: var(--ui-danger-wash) !important; border-color: var(--ui-danger) !important; color: var(--ui-danger) !important; }
.stage-list li.active { border-color: var(--ui-green) !important; background: var(--ui-green-wash) !important; }
.stage-list li.done { border-color: var(--ui-green) !important; }
.transcript-segment time { color: var(--ui-green) !important; }
.content-choice input:focus-visible + i,.format-choices input:focus-visible + span,.toggle-control input:focus-visible + i { outline: 3px solid var(--ui-green); outline-offset: 3px; }
@media (max-width: 1100px) {
  .public-header-tools { gap: 5px; }
  .public-nav-link { padding-inline: 7px; font-size: 12px !important; }
  .public-social-link { display: none; }
  .language-picker select,.language-switcher { max-width: 110px; }
  .home-page .hero { gap: 30px; }
}
@media (max-width: 980px) {
  .home-page .hero { grid-template-columns: 1fr 1fr; gap: 26px; }
  .home-page h1 { font-size: 45px; }
  .home-page .intro-copy { font-size: 15px; }
  .visual-summary { padding: 22px 15px; }
  .visual-content { grid-template-columns: 80px minmax(0,1fr); }
  .visual-summary h3 { font-size: 20px; }
}
.plan-details { margin-block: 6px 18px; color: var(--ui-muted); }
.plan-details summary { min-height: 44px; padding-block: 12px; color: var(--ui-green); cursor: pointer; font-size: 13px; font-weight: 650; }
.plan-details[open] summary { border-bottom: 1px solid var(--ui-line); margin-bottom: 10px; }
.plan-card-actions { margin-top: auto; }
/* Bidirectional text and compact screens */
[dir="rtl"] :is(.legal-card, .legal-nav, .auth-card, .detail-main, .workspace-intro, .admin-view, .admin-section-nav button, .support-bubble) {
  text-align: right;
}

[dir="rtl"] :is(th, td, .quiz-option, .admin-view-heading > p, .admin-timeline time) {
  text-align: right !important;
}

[dir="rtl"] .support-bubble.outgoing {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
}

[dir="rtl"] :is(.legal-card, .detail-section, .billing-section, .public-support-card, .detail-hero, .auth-story, .account-hero, .workspace-intro, .display-ad) {
  border-inline-start-width: 1px !important;
  border-inline-end: 1px solid var(--ui-line) !important;
}

[dir="rtl"] :is(.detail-hero, .auth-story, .account-hero) {
  border-inline-end-color: var(--ui-terracotta) !important;
}

[dir="rtl"] .display-ad {
  border-inline-end-color: var(--ui-ochre) !important;
}

@media (max-width: 860px) {
  :is(.topbar, .auth-topbar, .legal-topbar) {
    row-gap: 9px;
  }

  .public-header-tools {
    max-width: 100%;
  }

  :is(.public-nav, .account-section-nav) {
    scroll-snap-type: inline proximity;
  }

  :is(.public-nav, .account-section-nav, .admin-section-nav, .topbar .top-actions, .legal-topbar .top-links) {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
  }

  :is(.public-nav, .account-section-nav, .admin-section-nav, .topbar .top-actions, .legal-topbar .top-links)::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  :is(.public-nav-link, .public-account-link, .account-section-nav button) {
    scroll-snap-align: start;
  }

  :is(.detail-hero, .auth-story, .account-hero, .workspace-intro, .panel, .billing-section, .feature-band, .campaign-section, .detail-section, .legal-card) {
    border-radius: 10px !important;
  }

  .admin-sidebar {
    position: static;
    max-width: 100%;
  }

  .account-section-nav {
    position: static;
  }

  .admin-section-nav {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  .admin-section-nav button {
    flex: 0 0 min(76vw, 230px);
    min-width: 0;
    scroll-snap-align: start;
  }

  .admin-section-nav button small {
    white-space: normal;
  }
}

@media (max-width: 620px) {
  :is(.detail-main, .account-layout, .admin-layout, .public-support-shell) {
    width: min(100% - 20px, 1240px);
  }

  :is(.panel, .billing-section, .feature-band, .campaign-section, .detail-section, .legal-card, .auth-card, .dashboard-card) {
    box-shadow: 0 3px 12px rgba(32, 39, 34, .04) !important;
  }

  :is(.detail-hero, .workspace-intro, .account-hero) {
    padding: 22px !important;
  }

  .consent-banner {
    inset-inline: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-height: min(72vh, 520px);
    overflow-y: auto;
  }

  :is(.admin-table-wrap, .compare-wrap, .data-table) {
    scrollbar-color: var(--ui-green) var(--ui-surface-soft);
  }

  .format-choices {
    grid-template-columns: 1fr !important;
  }

  .admin-action {
    min-height: 42px;
    padding: 10px 12px;
  }

  .admin-actions .admin-action {
    flex: 1 1 120px;
  }
}

@media (max-width: 860px) {
  :is(.topbar,.auth-topbar,.legal-topbar) { width: calc(100% - 32px); padding-block: 14px; row-gap: 10px; }
  .public-header-tools { gap: 6px; }
  .public-nav { padding: 0 0 4px; gap: 3px; mask-image: none; -webkit-mask-image: none; }
  .public-nav-link,.public-account-link { font-size: 13px !important; }
  .public-account-link { margin-inline-start: 0; }
  .auth-topbar { display: flex; flex-wrap: wrap; gap: 10px; }
  .auth-topbar>.brand { margin-inline-end: auto; }
  .home-page .hero { padding: 36px 0 44px; grid-template-columns: 1fr; gap: 38px; min-height: 0; }
  .home-page h1 { max-width: 17ch; font-size: clamp(38px,7.5vw,56px); margin-block: 16px 22px; }
  .home-page .intro-copy { max-width: 58ch; font-size: 16px; }
  .hero-visual { max-width: 540px; margin-inline: auto; }
  .page-shell,.site-footer { width: calc(100% - 32px); }
  .section-lead { gap: 14px 30px; }
}
@media (max-width: 620px) {
  .brand { font-size: 21px; }
  .home-page h1 { font-size: clamp(36px,10vw,48px); letter-spacing: -.045em; }
  .home-page .intro-copy { font-size: 15px; }
  .hero-actions a { flex: 1 1 auto; padding-inline: 16px; font-size: 13px; }
  .trust-row { font-size: 11px; gap: 7px 12px; }
  .source-preview { gap: 8px; width: 93%; }
  .source-file { gap: 7px; padding: 10px 6px; min-height: 58px; font-size: 12px; }
  .source-file svg { width: 18px; height: 21px; }
  .visual-content { min-height: 260px; grid-template-columns: 70px minmax(0,1fr); }
  .visual-menu { font-size: 10px; padding-inline: 5px; }
  .visual-menu>* { padding: 8px 5px; }
  .visual-summary { padding: 22px 16px; }
  .visual-summary h3 { font-size: 20px; }
  .visual-summary p { font-size: 11px; }
  .visual-bar { padding-inline: 14px; font-size: 10px; }
  .section-lead { grid-template-columns: 1fr; }
  .feature-band,.campaign-section { padding: 32px 0; }
  .feature-grid { grid-template-columns: 1fr; gap: 10px; }
  .feature-grid article { padding: 22px; }
  .feature-grid h3 { margin-top: 12px; }
  .campaign-grid { grid-template-columns: 1fr; }
  .campaign-card p { min-height: 0; }
  .footer-links { gap: 24px 16px; }
  :is(.field input,.field select,.field textarea,.auth-form input,.control select,.url-field input,.language-switcher,.language-picker select) { font-size: 16px !important; }
  :is(.detail-hero,.workspace-intro,.account-hero) { padding: 22px 18px !important; }
}

/* Reading room: quieter hierarchy, a useful sample and compact navigation. */
.brand-mark { background: var(--ui-action) !important; }
.brand-mark i { background: var(--ui-action-ink) !important; }
.public-menu-toggle { display: none; }
.home-page .hero { min-height: 550px; padding-block: 42px 58px; gap: clamp(32px, 6vw, 84px); }
.home-page h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4.4vw, 64px); line-height: 1.08;
  font-weight: 500; letter-spacing: -.035em; max-width: 16ch;
}
.home-page .eyebrow { color: var(--ui-terracotta) !important; letter-spacing: .1em; font-size: 11px; }
.home-page .intro-copy { font-size: 16px; line-height: 1.8; max-width: 45ch; }
.hero-actions a { border-radius: 9px !important; }
.hero-secondary { border-color: transparent !important; text-decoration: underline; text-underline-offset: 5px; }
.source-preview { width: 100%; display: flex; justify-content: flex-start; gap: 10px; padding-bottom: 18px; }
.source-preview::after { display: none; }
.source-file { min-height: 36px; padding: 6px 12px; border-radius: 6px; background: transparent; box-shadow: none; font-size: 11px; }
.source-file svg { width: 16px; height: 18px; stroke: var(--ui-terracotta); }
.visual-window { border-radius: 14px !important; box-shadow: 0 18px 45px rgba(25, 18, 10, .09) !important; }
.visual-bar { height: 42px; background: var(--ui-surface) !important; }
.visual-bar i { display: none; }
.visual-bar span { margin: 0; color: var(--ui-subtle); }
.visual-content { display: flex; flex-direction: column; min-height: 340px; }
.visual-menu { display: flex; gap: 6px; padding: 8px 16px; border-inline-end: 0 !important; border-bottom: 1px solid var(--ui-line); background: var(--ui-surface) !important; }
.visual-menu [role="tab"] {
  border: 0; background: transparent; color: var(--ui-muted); font: 600 12px var(--ui-font);
  padding: 9px 16px; border-radius: 6px; cursor: pointer; min-height: 38px;
}
.visual-menu [role="tab"][aria-selected="true"] { background: var(--ui-surface-raised); color: var(--ui-terracotta); }
.visual-summary { padding: 24px; min-width: 0; }
.visual-summary[hidden] { display: none !important; }
.visual-summary h3 { font-size: 22px; line-height: 1.35; margin-block: 10px 12px; }
.visual-summary p { font-size: 13px; }
.demo-note-lines { display: grid; gap: 8px; margin: 20px 0; }
.demo-note-lines i { height: 5px; width: 94%; border-radius: 2px; background: var(--ui-line); }
.demo-note-lines i:nth-child(2) { width: 100%; }
.demo-note-lines i:last-child { width: 62%; background: var(--ui-terracotta-wash); height: 9px; }
.demo-choices { display: grid; gap: 8px; }
.demo-choice {
  font: 500 13px var(--ui-font); text-align: start; padding: 10px 13px; min-height: 42px;
  border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-surface); color: var(--ui-ink); cursor: pointer;
}
.demo-choice:hover:not(:disabled),.quiz-option:hover:not(:disabled) { background: var(--ui-terracotta-wash) !important; border-color: var(--ui-terracotta) !important; }
.demo-choice.is-correct { background: var(--ui-green-wash); border-color: var(--ui-green); color: var(--ui-green); }
.demo-choice.is-wrong { background: var(--ui-danger-wash); border-color: var(--ui-danger); color: var(--ui-danger); }
.demo-choice:disabled,.quiz-option:disabled { opacity: 1 !important; cursor: default; }
.demo-feedback { min-height: 20px; margin-block: 12px 0; font-weight: 650; color: var(--ui-ink) !important; }
.demo-reset { border: 0; background: transparent; color: var(--ui-terracotta); text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; cursor: pointer; font: 600 12px var(--ui-font); }
.demo-reset[hidden] { display: none; }
.visual-caption { text-align: start; font-size: 11px; }
.home-page .feature-band { padding-block: 32px; }
.home-page .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 36px; }
.home-page .feature-grid article { border: 0 !important; border-bottom: 1px solid var(--ui-line) !important; border-radius: 0 !important; padding: 22px 0; background: transparent !important; }
.home-page .feature-grid article>span { float: inline-start; width: 35px; margin-block-start: 2px; color: var(--ui-terracotta) !important; }
.home-page .feature-grid h3 { margin: 0 0 8px; font-size: 17px; }
.home-page .feature-grid p { margin-inline-start: 35px; max-width: 50ch; }
.home-page .campaign-card { border-block-start-width: 1px !important; padding: 24px; }
.home-page .campaign-value { color: var(--ui-terracotta) !important; font-size: 38px; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.workspace-intro { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 16px 0 24px !important; margin-bottom: 0; }
.workspace-intro h1 { font-size: clamp(26px, 3vw, 38px); max-width: 28ch; letter-spacing: -.035em; }
.workspace-intro>div>p:last-child { max-width: 75ch; font-size: 14px; line-height: 1.7; }
.workspace-intro-actions a { border-radius: 7px; font-size: 12px; }
.workspace-source-help { color: var(--ui-muted); font-size: 13px; line-height: 1.65; margin-top: 12px; }
.workspace-source-help summary { cursor: pointer; color: var(--ui-terracotta); min-height: 32px; }
.workspace-source-help p { max-width: 75ch; margin: 8px 0; }
.panel { border-radius: 12px !important; box-shadow: none !important; }
.panel-heading { padding-bottom: 16px; }
.step-number { letter-spacing: 0; border-radius: 50%; font-size: 12px; color: var(--ui-terracotta) !important; }
.drop-zone { background: var(--ui-surface-raised) !important; border-color: var(--ui-line-strong) !important; }
.drop-zone:hover { border-color: var(--ui-terracotta) !important; background: var(--ui-terracotta-wash) !important; }
.content-choice { background: var(--ui-surface) !important; }
.content-choice:has(input:checked) { border-color: color-mix(in srgb, var(--ui-terracotta) 60%, var(--ui-line)) !important; }
.results { border-radius: 12px !important; }
.result-tabs { gap: 4px; padding: 10px 20px; background: var(--ui-surface); }
.result-tab { border: 0 !important; padding: 10px 14px; border-radius: 7px !important; font-size: 13px !important; min-height: 42px; }
.result-tab.active { color: var(--ui-terracotta) !important; background: var(--ui-terracotta-wash) !important; box-shadow: none !important; }
.quiz-item { padding: 22px !important; background: var(--ui-surface) !important; border-radius: 10px; }
.quiz-item h3 { font-size: 17px; line-height: 1.6; }
.quiz-option { min-height: 46px; padding: 12px 15px; border-radius: 8px; font-size: 14px !important; transition: background-color .15s ease, border-color .15s ease; }
.quiz-explanation { line-height: 1.75; font-size: 14px; }
@media (max-width: 860px) {
  :is(.topbar,.legal-topbar) { flex-direction: row !important; align-items: center !important; min-height: 72px; }
  .brand { font-size: 21px; gap: 7px; }
  .brand-mark { width: 30px; height: 30px; padding: 6px; }
  .public-header-tools { display: flex; width: auto; flex: 1; justify-content: flex-end; gap: 3px; }
  .public-header-tools>.language-picker,.public-header-tools>.language-switcher { width: auto; }
  .public-header-tools>.language-picker select,.public-header-tools>.language-switcher { width: 90px; max-width: 90px; min-height: 40px; font-size: 13px !important; padding-inline: 5px !important; }
  .theme-toggle { min-width: 34px; min-height: 40px; padding: 7px; }
  .public-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-surface); color: var(--ui-ink); cursor: pointer; }
  .public-menu-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .public-header-tools>.public-nav { display: none; position: absolute; inset-inline: 0; top: 100%; width: 100%; padding: 10px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface); box-shadow: var(--ui-shadow); overflow: visible; z-index: 50; }
  .public-menu-open .public-header-tools>.public-nav { display: flex; flex-wrap: wrap; gap: 5px; }
  .public-menu-open .public-nav :is(.public-nav-link,.public-account-link) { justify-content: flex-start; flex: 1 0 calc(50% - 10px); padding: 12px; white-space: normal; }
  .home-page .hero { padding-block: 24px 40px; gap: 30px; min-height: 0; }
  .home-page h1 { font-size: clamp(40px, 7vw, 54px); max-width: 18ch; }
  .hero-visual { max-width: 560px; }
  .workspace-intro { padding: 14px 0 20px !important; }
}
@media (max-width: 620px) {
  .home-page .hero { gap: 24px; }
  .home-page h1 { font-size: clamp(38px, 10vw, 48px); margin-block: 12px 20px; }
  .home-page .intro-copy { font-size: 15px; margin-bottom: 22px; }
  .visual-content { min-height: 310px; }
  .visual-summary { padding: 20px; }
  .visual-summary h3 { font-size: 21px; }
  .source-preview { width: 100%; padding-bottom: 12px; }
  .source-file { min-height: 32px; padding: 5px 10px; }
  .home-page .feature-grid { grid-template-columns: 1fr; }
  .hero-actions a { font-size: 14px; }
  .home-page .campaign-card { padding: 22px; }
  .workspace-intro h1 { font-size: 24px; line-height: 1.25; }
  .workspace-intro .eyebrow { margin-bottom: 10px; }
  .workspace-intro-actions { margin-top: 10px; }
  .result-tabs { padding: 8px; }
  .quiz-item { padding: 16px !important; }
  .quiz-item h3 { font-size: 16px; }
  .quiz-option { padding: 12px; }
}
@media (max-width: 360px) {
  .brand { font-size: 18px; }
  .brand-mark { display: none; }
  .public-header-tools>.language-picker select { width: 82px; max-width: 82px; }
}

@media (prefers-contrast: more) {
  :root,
  html[data-theme="dark"],
  html[data-theme="light"] {
    --ui-line: currentColor;
    --ui-line-strong: currentColor;
  }

  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline-width: 4px !important;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Official white payment marks require a stable dark plate in both themes. */
:is(.footer-payment-band,.payment-brand-band,.iyzico-pay-mark) {
  background: #11233b !important;
  padding: 12px 16px;
  border-radius: 8px;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  filter: none !important;
}
.footer-payment-band { width: min(390px,100%); max-width: 390px; }
.iyzico-checkout-brand { background: #11233b !important; }
.iyzico-checkout-brand img { filter: none !important; }

.plan-ad-scope{font-size:13px;line-height:1.8;color:var(--ui-muted);max-width:900px;margin:24px auto;padding-inline:16px}
#adminExtraEntitlements{margin-block:24px;padding-block:20px;border-block:1px solid var(--ui-line)}
#adminExtraEntitlements .admin-user-form{margin-block:16px}

.home-page [data-study-demo] .visual-window{border:1px solid var(--ui-line);overflow:hidden;transform:rotate(-.6deg)}
.home-page [data-study-demo] .visual-bar{height:auto;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;flex-wrap:wrap}
.home-page [data-study-demo] .demo-subject{font-size:10px;padding:4px 8px;border-radius:5px;background:var(--ui-green-wash);color:var(--ui-green)}
.home-page [data-study-demo] .visual-menu{padding:10px 16px;gap:4px;flex-wrap:wrap}
.home-page [data-study-demo] .visual-content{min-height:390px}
.home-page [data-study-demo] .visual-summary{padding:26px}
.home-page [data-study-demo] .demo-concept{display:flex;align-items:center;gap:18px}
.home-page [data-study-demo] .demo-concept svg{width:92px;flex-shrink:0;fill:var(--ui-terracotta-wash);stroke:var(--ui-terracotta);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.home-page [data-study-demo] .demo-concept svg path+path{fill:none;stroke-width:3}
.home-page [data-study-demo] .demo-concept h3{font-size:21px;margin-block:7px 0;max-width:24ch}
.home-page [data-study-demo] .demo-insight{font-size:14px;line-height:1.85;margin:23px 0;color:var(--ui-muted)}
.home-page [data-study-demo] .demo-takeaway{padding:15px 17px;border-inline-start:3px solid var(--ui-green);border-radius:0 8px 8px 0;background:var(--ui-green-wash)}
.home-page [data-study-demo] .demo-takeaway strong{font-size:11px;color:var(--ui-green)}
.home-page [data-study-demo] .demo-takeaway p{margin:7px 0 0;font-size:12px;line-height:1.7}
.home-page [data-study-demo] .demo-card h3{font-size:21px;line-height:1.55;margin-bottom:24px}
.home-page [data-study-demo] .demo-reveal{min-height:42px;border:1px solid var(--ui-line-strong);border-radius:8px;padding:9px 16px;background:var(--ui-surface-raised);color:var(--ui-ink);font:600 12px var(--ui-font);cursor:pointer}
.home-page [data-study-demo] .demo-card-answer{font-size:18px;color:var(--ui-green);padding:16px 0}
@media(max-width:620px){.home-page [data-study-demo] .visual-window{transform:none}.home-page [data-study-demo] .visual-summary{padding:20px}.home-page [data-study-demo] .visual-menu [role=tab]{padding-inline:12px}.home-page [data-study-demo] .demo-concept{gap:12px}.home-page [data-study-demo] .demo-concept svg{width:65px}.home-page [data-study-demo] .demo-concept h3{font-size:19px}}