/* OneAIWorld design system: shared components.
   Namespaced .oaiw-*; used by the homepage, leaderboard, tools, pricing, and the /design-system/ living style guide.
   Every rule is scoped under html[data-oaiw-ui="new"] (set on every page by base.html). */

html[data-oaiw-ui="new"] .oaiw-container { width: 100%; max-width: var(--oaiw-container); margin-inline: auto; padding-inline: clamp(1rem, 3vw, 3rem); }   /* capped: an unbounded 3vw squeezed the content on ultrawide screens */
html[data-oaiw-ui="new"] .oaiw-section { padding-block: var(--oaiw-space-8); position: relative; }
html[data-oaiw-ui="new"] .oaiw-section--tight { padding-block: var(--oaiw-space-7); }
html[data-oaiw-ui="new"] .oaiw-section--alt { background: var(--oaiw-bg-2); border-block: 1px solid var(--oaiw-line); }
html[data-oaiw-ui="new"] .oaiw-section-head { max-width: 46rem; margin-bottom: var(--oaiw-space-6); }
html[data-oaiw-ui="new"] .oaiw-section-head--center { margin-inline: auto; text-align: center; }
html[data-oaiw-ui="new"] .oaiw-section-head--center .oaiw-eyebrow { margin-inline: auto; }
html[data-oaiw-ui="new"] .oaiw-lede { font-size: var(--oaiw-text-lg); color: var(--oaiw-text-muted); line-height: 1.6; }

/* eyebrow label and live pill */
html[data-oaiw-ui="new"] .oaiw-eyebrow {
  display: flex; width: fit-content; align-items: center; gap: .6rem; font-family: var(--oaiw-font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oaiw-accent); margin-bottom: var(--oaiw-space-3);
}
html[data-oaiw-ui="new"] .oaiw-eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; opacity: .7; }
html[data-oaiw-ui="new"] .oaiw-pill {
  display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem; border-radius: var(--oaiw-radius-pill); border: 1px solid var(--oaiw-line-strong);
  background: rgba(66, 139, 202, .12); color: var(--oaiw-text); font-family: var(--oaiw-font-mono); font-size: .76rem; letter-spacing: .04em;
}
html[data-oaiw-ui="new"] .oaiw-pill .oaiw-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--oaiw-success); box-shadow: 0 0 10px var(--oaiw-success); animation: oaiw-pulse 2.4s ease-in-out infinite; }
@keyframes oaiw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* glass card */
html[data-oaiw-ui="new"] .oaiw-glass {
  background: linear-gradient(180deg, color-mix(in srgb, var(--oaiw-surface-2) 78%, transparent), color-mix(in srgb, var(--oaiw-surface) 82%, transparent));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--oaiw-line-strong); border-radius: var(--oaiw-radius-xl); box-shadow: var(--oaiw-shadow); padding: var(--oaiw-space-5);
}
html[data-oaiw-ui="new"] .oaiw-card {
  background: var(--oaiw-surface); border: 1px solid var(--oaiw-line); border-radius: var(--oaiw-radius-lg); padding: var(--oaiw-space-5); height: 100%;
  transition: transform var(--oaiw-med) var(--oaiw-ease), border-color var(--oaiw-med), box-shadow var(--oaiw-med);
}
html[data-oaiw-ui="new"] a.oaiw-card { display: block; color: inherit; text-decoration: none; }
html[data-oaiw-ui="new"] a.oaiw-card:hover { transform: translateY(-4px); border-color: var(--oaiw-accent); box-shadow: var(--oaiw-shadow-sm); color: inherit; }
html[data-oaiw-ui="new"] .oaiw-card h3 { font-size: 1.25rem; margin: var(--oaiw-space-3) 0 var(--oaiw-space-2); }
html[data-oaiw-ui="new"] .oaiw-card p { color: var(--oaiw-text-muted); margin: 0; }
html[data-oaiw-ui="new"] .oaiw-icon-chip {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; font-size: 1.4rem; color: var(--oaiw-accent);
  background: linear-gradient(160deg, rgba(109, 179, 255, .3), rgba(66, 139, 202, .1)); border: 1px solid var(--oaiw-line-strong);
}

/* stat tile */
html[data-oaiw-ui="new"] .oaiw-stat { padding: var(--oaiw-space-4) 0; }
html[data-oaiw-ui="new"] .oaiw-stat b { display: block; font-family: var(--oaiw-font-display); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .oaiw-stat span { font-family: var(--oaiw-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oaiw-text-faint); }

/* score chip: the glowing number used everywhere a model gets scored */
html[data-oaiw-ui="new"] .oaiw-score {
  display: inline-block; min-width: 3.2rem; padding: .18rem .55rem; text-align: center; font-family: var(--oaiw-font-mono); font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  border-radius: 8px; color: var(--oaiw-on-accent); background: var(--oaiw-score-mid);
}
html[data-oaiw-ui="new"] .oaiw-score--hi { background: var(--oaiw-score-hi); }
html[data-oaiw-ui="new"] .oaiw-score--lo { background: var(--oaiw-score-lo); color: #211500; }
html[data-oaiw-ui="new"] .oaiw-score--glow { box-shadow: 0 0 18px color-mix(in srgb, currentColor 0%, var(--oaiw-score-mid)); }
html[data-oaiw-ui="new"] .oaiw-bar { display: block; height: 6px; border-radius: 6px; background: var(--oaiw-surface-2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--oaiw-line); }
html[data-oaiw-ui="new"] .oaiw-bar > i { display: block; width: var(--w, 0%); transform-origin: left center; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--oaiw-accent-fill), var(--oaiw-accent)); }

/* model pill (text names only: provider logos are trademarks) */
html[data-oaiw-ui="new"] .oaiw-model {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: var(--oaiw-radius-pill); border: 1px solid var(--oaiw-line-strong);
  background: var(--oaiw-surface); font-family: var(--oaiw-font-mono); font-size: .8rem; color: var(--oaiw-text);
}
html[data-oaiw-ui="new"] .oaiw-model::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--oaiw-accent); box-shadow: 0 0 8px var(--oaiw-accent); }

/* full-bleed call to action band */
html[data-oaiw-ui="new"] .oaiw-cta-band {
  position: relative; overflow: hidden; border-radius: var(--oaiw-radius-xl); padding: clamp(2rem, 6vw, 4.5rem); text-align: center; isolation: isolate;
  background: radial-gradient(ellipse at 50% 0%, rgba(66, 139, 202, .55), transparent 70%), linear-gradient(160deg, var(--oaiw-surface-2), var(--oaiw-bg-2));
  border: 1px solid var(--oaiw-line-strong);
}

/* page hero art (reused carousel images): dark overlay so text always reads */
html[data-oaiw-ui="new"] .oaiw-page-hero { position: relative; isolation: isolate; overflow: hidden; padding: var(--oaiw-space-8) 0 var(--oaiw-space-7); color: #e8f1ff; }
html[data-oaiw-ui="new"] .oaiw-page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
html[data-oaiw-ui="new"] .oaiw-page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 10, 22, .92), rgba(4, 10, 22, .55) 60%, rgba(4, 10, 22, .3)); }
html[data-oaiw-ui="new"] .oaiw-page-hero h1, html[data-oaiw-ui="new"] .oaiw-page-hero h2 { color: #fff; }

/* the live glow used behind hero content */
html[data-oaiw-ui="new"] .oaiw-glow-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 60% at 78% 40%, rgba(66, 139, 202, .3), transparent 70%); }

html[data-oaiw-ui="new"] .oaiw-swatch { height: 4.2rem; border-radius: var(--oaiw-radius); border: 1px solid var(--oaiw-line); }

/* .oaiw-on-dark: a section that stays "night mode" in BOTH themes (hero, story band, final CTA).
   Re-declares the dark palette locally so every token-driven component inside it renders correctly. */
html[data-oaiw-ui="new"] .oaiw-on-dark {
  --oaiw-bg: #040a16; --oaiw-bg-2: #071125; --oaiw-surface: #0b1830; --oaiw-surface-2: #10224a; --oaiw-surface-hover: #142a56;
  --oaiw-line: rgba(110, 170, 255, .2); --oaiw-line-strong: rgba(130, 190, 255, .38);
  --oaiw-text: #e8f1ff; --oaiw-text-muted: #9db4d6; --oaiw-text-faint: #7f9bc2;
  --oaiw-accent: #6db3ff; --oaiw-accent-fill: #428bca; --oaiw-accent-fill-hover: #5aa3e6; --oaiw-on-accent: #04101f; --oaiw-link: #8fc7ff;
  --oaiw-glow: 0 0 0 1px rgba(150, 200, 255, .45) inset, 0 10px 40px rgba(66, 139, 202, .5);
  --oaiw-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  --oaiw-success: #48e0a0; --oaiw-score-hi: #48e0a0; --oaiw-score-mid: #6db3ff; --oaiw-score-lo: #ffc83d;
  --oaiw-text-rgb: 232, 241, 255; --oaiw-bg-rgb: 4, 10, 22; --oaiw-muted-rgb: 157, 180, 214;
  --oaiw-link-rgb: 143, 199, 255; --oaiw-accent-rgb: 109, 179, 255; --oaiw-primary-rgb: 66, 139, 202;
  color: var(--oaiw-text);
}

/* plan cards: shared by the homepage teaser, /plan-comparison/, and /subscribe/ */
.oaiw-plans { display: grid; gap: var(--oaiw-space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); max-width: 62rem; margin-inline: auto; }
html[data-oaiw-ui="new"] .oaiw-plan { display: flex; flex-direction: column; gap: var(--oaiw-space-3); position: relative; padding: var(--oaiw-space-5) var(--oaiw-space-5) var(--oaiw-space-5); }
html[data-oaiw-ui="new"] .oaiw-plan h3 { margin: 0; font-size: 1.15rem; }
.oaiw-plan__price { margin: 0; display: flex; align-items: baseline; gap: .35rem; }
.oaiw-plan__price b { font: 700 2.6rem/1 var(--oaiw-font-display); letter-spacing: -.03em; color: var(--oaiw-text); }
.oaiw-plan__price span { color: var(--oaiw-text-faint); }
.oaiw-plan ul { list-style: none; margin: 0 0 var(--oaiw-space-3); padding: 0; display: grid; gap: .55rem; flex: 1; color: var(--oaiw-text-muted); font-size: .95rem; }
.oaiw-plan li { display: flex; gap: .55rem; }
.oaiw-plan li i { color: var(--oaiw-success); flex: none; }
html[data-oaiw-ui="new"] .oaiw-plan--featured { border-color: var(--oaiw-accent); box-shadow: 0 0 0 1px var(--oaiw-accent) inset, 0 20px 60px rgba(var(--oaiw-primary-rgb), .3); background: linear-gradient(180deg, rgba(var(--oaiw-primary-rgb), .14), var(--oaiw-surface) 40%); }
.oaiw-plan__flag { position: absolute; top: -.75rem; right: 1.25rem; padding: .25rem .75rem; border-radius: 999px; background: #ffc83d; color: #241800; font: 700 .68rem var(--oaiw-font-mono); letter-spacing: .08em; text-transform: uppercase; }


/* page header for content pages (shell/_pagehead.html): shared by marketing and editorial pages */
html[data-oaiw-ui="new"] .oaiw-pagehead { position: relative; isolation: isolate; overflow: hidden; padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2rem, 4vw, 3.25rem); background: radial-gradient(ellipse 60% 120% at 85% 0, rgba(var(--oaiw-accent-rgb), .16), transparent 65%), var(--oaiw-bg-2); border-bottom: 1px solid var(--oaiw-line); }
html[data-oaiw-ui="new"] .oaiw-pagehead h1 { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4rem); letter-spacing: -.035em; line-height: 1.02; margin: 0; max-width: 22ch; }
html[data-oaiw-ui="new"] .oaiw-pagehead .oaiw-lede { margin: var(--oaiw-space-4) 0 0; max-width: 40rem; }
html[data-oaiw-ui="new"] .oaiw-pagehead--art { background: #040a16; border-bottom-color: var(--oaiw-line); padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
html[data-oaiw-ui="new"] .oaiw-pagehead__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .85; }
html[data-oaiw-ui="new"] .oaiw-pagehead--art::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 10, 22, .92) 0%, rgba(4, 10, 22, .6) 55%, rgba(4, 10, 22, .25)); }
html[data-oaiw-ui="new"] .oaiw-pagehead--art h1 { color: #fff; }
html[data-oaiw-ui="new"] .oaiw-pagehead--art .oaiw-lede { color: #c3d6ef; }

.oaiw-pagehead__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }

/* search box (blog/_search.html): shared by editorial lists and the image job list */
/* search */
.oaiw-search { position: relative; max-width: 40rem; margin-bottom: var(--oaiw-space-5); }
.oaiw-search input[type="search"] { width: 100%; padding: .95rem 7.5rem .95rem 1.4rem; font-size: 1rem; border-radius: 999px; background: var(--oaiw-input-bg); border: 1px solid var(--oaiw-line-strong); color: var(--oaiw-text); }
.oaiw-search input[type="search"]:focus { border-color: var(--oaiw-accent); box-shadow: 0 0 0 .2rem rgba(var(--oaiw-accent-rgb), .25); outline: 0; }
.oaiw-search button { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); border-radius: 999px; padding: .55rem 1.3rem; font-weight: 600; }
.oaiw-results-note { margin: 0 0 var(--oaiw-space-4); color: var(--oaiw-text-muted); }

/* Rendered markdown (model output on job pages, article bodies). use tokens, never fixed greys.
   Long unbroken tokens (URL patterns, paths) wrap, and wide blocks scroll inside the card instead of widening the page. */
html[data-oaiw-ui="new"] .markdown-output { max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; }
html[data-oaiw-ui="new"] .markdown-output :is(code, li, p) { overflow-wrap: anywhere; }
html[data-oaiw-ui="new"] .markdown-output pre { max-width: 100%; overflow-x: auto; background: var(--oaiw-surface-2); color: var(--oaiw-text); border: 1px solid var(--oaiw-line); }
html[data-oaiw-ui="new"] .markdown-output blockquote { color: var(--oaiw-text-muted); border-left: 3px solid var(--oaiw-accent-fill); }
html[data-oaiw-ui="new"] .markdown-output blockquote :is(p, em, strong) { color: inherit; }
html[data-oaiw-ui="new"] .markdown-output :is(th, td) { border-color: var(--oaiw-line); }
html[data-oaiw-ui="new"] .markdown-output th { background: var(--oaiw-surface-2); color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .markdown-output a { color: var(--oaiw-link); }

/* Tool/account page header (shell/_toolhead.html); shared by tool pages and account pages */
html[data-oaiw-ui="new"] .oaiw-toolhead { padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.4rem, 3vw, 2rem); }
html[data-oaiw-ui="new"] .oaiw-toolhead h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); max-width: none; }
.oaiw-toolhead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2rem; }

/* Shared list items (used by account pages, the Latest feed, and content pages) */
html[data-oaiw-ui="new"] .oaiw-item { padding: .8rem 1rem; margin-bottom: .7rem; background: var(--oaiw-surface-2); border: 1px solid var(--oaiw-line); border-left: 3px solid var(--oaiw-accent-fill); border-radius: var(--oaiw-radius); overflow-wrap: anywhere; }
html[data-oaiw-ui="new"] .oaiw-item:last-child { margin-bottom: 0; }
html[data-oaiw-ui="new"] .oaiw-item__title { font-weight: 600; margin: 0 0 .2rem; }
html[data-oaiw-ui="new"] .oaiw-item__meta { color: var(--oaiw-text-muted); font-size: var(--oaiw-text-sm); }
html[data-oaiw-ui="new"] .oaiw-item__row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* Member badge (replaces the animated rainbow badge from the old stylesheet) */
html[data-oaiw-ui="new"] .badge.oaiw-vip { background: linear-gradient(135deg, var(--oaiw-gold), #ff9d3d); color: #1a1200; font-size: .9rem; padding: .45em .9em; border-radius: 999px; box-shadow: 0 0 14px rgba(255, 200, 61, .35); }

/* Hover/focus tooltip (.feature-tooltip > .tooltip-icon + .tooltip-text). The wrapper is focusable (tabindex="0") so keyboard users get it too. */
html[data-oaiw-ui="new"] .feature-tooltip { position: relative; display: inline-block; margin-left: .3rem; cursor: help; }
html[data-oaiw-ui="new"] .feature-tooltip:focus-visible { outline: 2px solid var(--oaiw-accent); outline-offset: 2px; border-radius: var(--oaiw-radius-sm); }
html[data-oaiw-ui="new"] .feature-tooltip .tooltip-icon { color: var(--oaiw-text-muted); font-size: .9rem; }
html[data-oaiw-ui="new"] .feature-tooltip .tooltip-text { visibility: hidden; opacity: 0; position: absolute; z-index: 5; bottom: 125%; left: 50%; width: 250px; max-width: 70vw; margin-left: -125px; padding: .6rem .75rem; text-align: left; font-size: .85rem; font-weight: 400; line-height: 1.4; color: var(--oaiw-text); background: var(--oaiw-surface-2); border: 1px solid var(--oaiw-line-strong); border-radius: var(--oaiw-radius); box-shadow: var(--oaiw-shadow); transition: opacity .2s; overflow-wrap: anywhere; }
html[data-oaiw-ui="new"] .feature-tooltip:is(:hover, :focus, :focus-within) .tooltip-text { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { html[data-oaiw-ui="new"] .feature-tooltip .tooltip-text { transition: none; } }

/* ==========================================================================================================
   AI analysis block (article, image, and prompt pages), ribbons, and small components.
   The structure below was ported from the old main.css / custom.css when those were retired; colors come from tokens.
   40-pages/editorial.css refines this block per page, so keep these selectors lower in specificity than its .oaiw-analysis rules.
   ========================================================================================================== */
html[data-oaiw-ui="new"] .analysis-icon { width: 50px; height: 50px; flex: none; border-radius: 12px; background: linear-gradient(135deg, var(--oaiw-accent-fill), var(--oaiw-blue-deep)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; box-shadow: 0 4px 15px rgba(var(--oaiw-primary-rgb), .3); position: relative; overflow: hidden; }
html[data-oaiw-ui="new"] .analysis-icon.inactive { background: var(--oaiw-surface-2); color: var(--oaiw-text-faint); box-shadow: none; }
html[data-oaiw-ui="new"] :is(.analysis-header, .analysis-summary) { background: var(--oaiw-surface-2); border-radius: 16px; padding: 24px; border: 1px solid var(--oaiw-line); }
html[data-oaiw-ui="new"] .overall-score-circle { width: 80px; height: 80px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--oaiw-accent-fill), var(--oaiw-blue-deep)); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; position: relative; box-shadow: 0 6px 20px rgba(var(--oaiw-primary-rgb), .3); }
html[data-oaiw-ui="new"] .score-value { font-size: 1.7rem; font-weight: 700; line-height: 1; }
html[data-oaiw-ui="new"] .score-max { font-size: 1.3rem; opacity: .8; }
html[data-oaiw-ui="new"] .metric-card { background: var(--oaiw-surface); border-radius: 16px; padding: 24px; border: 1px solid var(--oaiw-line); position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
html[data-oaiw-ui="new"] .metric-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--oaiw-accent-fill), var(--oaiw-accent)); transform: scaleX(0); transition: transform .3s ease; }
html[data-oaiw-ui="new"] .metric-card:hover::before { transform: scaleX(1); }
html[data-oaiw-ui="new"] .metric-header { display: flex; align-items: center; margin-bottom: 16px; }
html[data-oaiw-ui="new"] .metric-icon { width: 40px; height: 40px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; margin-right: 12px; }
html[data-oaiw-ui="new"] .metric-icon.review-category-1, html[data-oaiw-ui="new"] .metric-icon.category-1 { background: linear-gradient(135deg, #28a745, #20c997); }
html[data-oaiw-ui="new"] .metric-icon.review-category-2, html[data-oaiw-ui="new"] .metric-icon.category-2 { background: linear-gradient(135deg, #007bff, #0056b3); }
html[data-oaiw-ui="new"] .metric-icon.review-category-3, html[data-oaiw-ui="new"] .metric-icon.category-3 { background: linear-gradient(135deg, #17a2b8, #138496); }
html[data-oaiw-ui="new"] .metric-icon.review-category-4, html[data-oaiw-ui="new"] .metric-icon.category-4 { background: linear-gradient(135deg, #ffc107, #e0a800); color: #1a1200; }
html[data-oaiw-ui="new"] .metric-icon.review-category-5, html[data-oaiw-ui="new"] .metric-icon.category-5 { background: linear-gradient(135deg, #bb35dc, #b928dd); }
html[data-oaiw-ui="new"] .metric-icon.review-category-6, html[data-oaiw-ui="new"] .metric-icon.category-6 { background: linear-gradient(135deg, #6f42c1, #5a2d91); }
html[data-oaiw-ui="new"] .metric-info { flex: 1; min-width: 0; }
html[data-oaiw-ui="new"] .metric-title { margin: 0; font-weight: 600; color: var(--oaiw-text); }
html[data-oaiw-ui="new"] .metric-score { font-size: 24px; font-weight: 700; color: var(--oaiw-accent); margin-top: 4px; }
html[data-oaiw-ui="new"] .metric-explanation { font-size: 14px; color: var(--oaiw-text-muted); line-height: 1.5; margin: 0; }
html[data-oaiw-ui="new"] .enhanced-progress { margin: 16px 0; }
html[data-oaiw-ui="new"] .progress-track { height: 8px; background: var(--oaiw-surface-2); border-radius: 10px; overflow: hidden; position: relative; }
html[data-oaiw-ui="new"] .progress-fill { height: 100%; border-radius: 10px; transition: width .8s ease; position: relative; overflow: hidden; }
html[data-oaiw-ui="new"] .progress-fill.review-category-1, html[data-oaiw-ui="new"] .review-category-1:not(.metric-icon) { background: #28a745; }
html[data-oaiw-ui="new"] .progress-fill.review-category-2, html[data-oaiw-ui="new"] .review-category-2:not(.metric-icon) { background: #007bff; }
html[data-oaiw-ui="new"] .progress-fill.review-category-3, html[data-oaiw-ui="new"] .review-category-3:not(.metric-icon) { background: #17a2b8; }
html[data-oaiw-ui="new"] .progress-fill.review-category-4, html[data-oaiw-ui="new"] .review-category-4:not(.metric-icon) { background: #ffc107; }
html[data-oaiw-ui="new"] .progress-fill.review-category-5, html[data-oaiw-ui="new"] .review-category-5:not(.metric-icon) { background: #bb35dc; }
html[data-oaiw-ui="new"] .progress-fill.review-category-6, html[data-oaiw-ui="new"] .review-category-6:not(.metric-icon) { background: #6f42c1; }
html[data-oaiw-ui="new"] .progress-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--oaiw-text-faint); }
html[data-oaiw-ui="new"] .width-10 { width: 10% !important; } html[data-oaiw-ui="new"] .width-20 { width: 20% !important; } html[data-oaiw-ui="new"] .width-30 { width: 30% !important; } html[data-oaiw-ui="new"] .width-40 { width: 40% !important; }
html[data-oaiw-ui="new"] .width-60 { width: 60% !important; } html[data-oaiw-ui="new"] .width-70 { width: 70% !important; } html[data-oaiw-ui="new"] .width-80 { width: 80% !important; } html[data-oaiw-ui="new"] .width-90 { width: 90% !important; }
/* political-bias spectrum */
html[data-oaiw-ui="new"] .bias-indicator { margin: 16px 0; }
html[data-oaiw-ui="new"] .bias-spectrum { display: flex; align-items: center; margin-bottom: 8px; }
html[data-oaiw-ui="new"] .bias-marker { width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
html[data-oaiw-ui="new"] .bias-marker.liberal { background: #007bff; }
html[data-oaiw-ui="new"] .bias-marker.conservative { background: #c62f2b; }
html[data-oaiw-ui="new"] .bias-track { flex: 1; height: 8px; background: linear-gradient(90deg, #007bff 0%, #28a745 50%, #dc3545 100%); border-radius: 10px; margin: 0 8px; position: relative; }
html[data-oaiw-ui="new"] .bias-pointer { position: absolute; top: -4px; width: 16px; height: 16px; background: #fff; border: 3px solid #0d1b2e; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); transition: left .3s ease; }
html[data-oaiw-ui="new"] .bias-far-left { left: 0%; } html[data-oaiw-ui="new"] .bias-left { left: 20%; } html[data-oaiw-ui="new"] .bias-lean-left { left: 35%; } html[data-oaiw-ui="new"] .bias-center { left: 50%; }
html[data-oaiw-ui="new"] .bias-lean-right { left: 65%; } html[data-oaiw-ui="new"] .bias-right { left: 80%; } html[data-oaiw-ui="new"] .bias-far-right { left: 100%; }
html[data-oaiw-ui="new"] .bias-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--oaiw-text-faint); margin-bottom: 8px; }
html[data-oaiw-ui="new"] .bias-badge { text-align: center; }
html[data-oaiw-ui="new"] .badge.bias-liberal { background: #0a58ca; color: #fff; } html[data-oaiw-ui="new"] .badge.bias-conservative { background: #c62f2b; color: #fff; } html[data-oaiw-ui="new"] .badge.bias-neutral { background: #198754; color: #fff; }
/* summary and the "analyze this" call to action */
html[data-oaiw-ui="new"] .summary-header { display: flex; align-items: center; margin-bottom: 16px; color: var(--oaiw-accent); }
html[data-oaiw-ui="new"] .summary-content p { color: var(--oaiw-text); line-height: 1.6; }
html[data-oaiw-ui="new"] .analysis-cta { background: linear-gradient(135deg, var(--oaiw-accent-fill), var(--oaiw-blue-deep)); border-radius: 16px; padding: 0; overflow: hidden; box-shadow: 0 8px 30px rgba(var(--oaiw-primary-rgb), .3); }
html[data-oaiw-ui="new"] .cta-content { background: var(--oaiw-surface); padding: 32px; margin: 2px; border-radius: 14px; }
html[data-oaiw-ui="new"] .cta-title { color: var(--oaiw-text); font-weight: 600; margin-bottom: 8px; }
html[data-oaiw-ui="new"] .cta-description { color: var(--oaiw-text-muted); line-height: 1.5; }
html[data-oaiw-ui="new"] .cta-features { display: flex; gap: 8px; flex-wrap: wrap; }
html[data-oaiw-ui="new"] .feature-tag { background: rgba(var(--oaiw-primary-rgb), .14); color: var(--oaiw-accent); padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; }
html[data-oaiw-ui="new"] .btn-analyze { position: relative; background: linear-gradient(135deg, var(--oaiw-accent-fill), var(--oaiw-blue-deep)); color: #fff; padding: 16px 32px; border-radius: 50px; text-decoration: none; font-weight: 600; font-size: 16px; border: none; cursor: pointer; display: inline-flex; align-items: center; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; box-shadow: 0 6px 20px rgba(var(--oaiw-primary-rgb), .3); }
html[data-oaiw-ui="new"] .btn-analyze:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(var(--oaiw-primary-rgb), .4); color: #fff; text-decoration: none; }
html[data-oaiw-ui="new"] .btn-glow { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); transition: left .6s ease; }
html[data-oaiw-ui="new"] .btn-analyze:hover .btn-glow { left: 100%; }
@media (prefers-reduced-motion: reduce) { html[data-oaiw-ui="new"] :is(.metric-card, .progress-fill, .bias-pointer, .btn-analyze, .btn-glow) { transition: none; } html[data-oaiw-ui="new"] .btn-analyze:hover { transform: none; } }
/* corner ribbons on gallery images */
html[data-oaiw-ui="new"] .ribbon-wrapper { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; }
html[data-oaiw-ui="new"] .price-ribbon { font: 700 18px var(--oaiw-font-sans); text-align: center; position: absolute; padding: 12px 0; width: 250px; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: auto; }
html[data-oaiw-ui="new"] .price-ribbon-left { top: 25px; left: -65px; transform: rotate(-45deg); background: rgba(25, 135, 84, .85); color: #fff; }
html[data-oaiw-ui="new"] .price-ribbon-right { top: 25px; right: -65px; transform: rotate(45deg); background: rgba(28, 93, 159, .85); color: #fff; }
html[data-oaiw-ui="new"] :is(.ribbon-logo, .price-ribbon img) { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; background: #fff; border-radius: 50%; padding: 2px; flex-shrink: 0; object-fit: contain; }
html[data-oaiw-ui="new"] .oaiw-badge img.tag-logo-white { width: 18px !important; height: 18px !important; border-radius: 50% !important; border: 1px solid #fff !important; background: #fff !important; padding: 1px !important; }
/* small pieces */
html[data-oaiw-ui="new"] .clamp-lines-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
html[data-oaiw-ui="new"] .related-news-item a { color: var(--oaiw-text); text-decoration: none; }
html[data-oaiw-ui="new"] .related-news-item a:hover { color: var(--oaiw-accent); text-decoration: underline; }
html[data-oaiw-ui="new"] .job-badge { font-size: 1.25rem; }
html[data-oaiw-ui="new"] .rating-badge { background: var(--oaiw-surface-2); padding: .25rem .5rem; border-radius: .25rem; font-size: .875rem; }
html[data-oaiw-ui="new"] .task-details { display: flex; align-items: center; }
html[data-oaiw-ui="new"] :is(.carousel-control-prev-bg, .carousel-control-next-bg) { display: flex; background: rgba(0, 0, 0, .6); border-radius: .5rem; padding: 10px; }

/* ---- panels: a bordered box with a title, actions, and a key/value list (account pages, model pages) */
html[data-oaiw-ui="new"] .oaiw-panel { padding: var(--oaiw-space-5) var(--oaiw-space-6); background: var(--oaiw-surface); border: 1px solid var(--oaiw-line); border-radius: var(--oaiw-radius-lg); box-shadow: var(--oaiw-shadow-sm); }
html[data-oaiw-ui="new"] .oaiw-panel--accent { border-color: var(--oaiw-line-strong); background: linear-gradient(135deg, var(--oaiw-surface-2), var(--oaiw-surface)); }
html[data-oaiw-ui="new"] .oaiw-panel h3 { font-size: 1.1rem; margin: 0 0 var(--oaiw-space-3); }
html[data-oaiw-ui="new"] .oaiw-panel ul { padding-left: 1.2rem; margin: 0 0 var(--oaiw-space-4); }
html[data-oaiw-ui="new"] .oaiw-panel__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
html[data-oaiw-ui="new"] .oaiw-panel__actions form { margin: 0; }
html[data-oaiw-ui="new"] .oaiw-kv { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.25rem; margin: 0; }
html[data-oaiw-ui="new"] .oaiw-kv dt { color: var(--oaiw-text-muted); font-weight: 500; }
html[data-oaiw-ui="new"] .oaiw-kv dd { margin: 0; }
html[data-oaiw-ui="new"] .oaiw-panel legend, html[data-oaiw-ui="new"] .oaiw-panel__title { font: 600 1.1rem/1.3 var(--oaiw-font-display); padding: 0; margin: 0 0 var(--oaiw-space-4); color: var(--oaiw-text); }