/* Shared Lumina layout and theme primitives. Static design studies remain independent. */
@font-face { font-family: "OpenPix Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "OpenPix Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root { color-scheme: dark; --page: #0b0d11; --surface: #14171d; --raised: #1d222b; --ink: #f2f4f8; --muted: #a2adbd; --line: #303846; --accent: #a3c0ff; --on-accent: #102345; --tint: #1c2b46; --shadow: 0 16px 60px #0005; font-family: "OpenPix Inter", Arial, sans-serif; background: var(--page); color: var(--ink); }
:root[data-theme="light"] {
  /* Editorial Glass / light: warm paper, forest green and terracotta (from LifeMap). */
  --light-background: #f7f5f0;
  --light-surface: #fffefa;
  --light-accent: #39665b;

  color-scheme: light;
  --bg: var(--light-background);
  --surface: var(--light-surface);
  --surface-2: #efebe4;
  --text: #292524;
  --muted: #706861;
  --line: #e0dad2;
  --accent: var(--light-accent);
  --accent-2: #a45e42;
  --accent-soft: #e8efea;
  --on-accent: #fffefa;
  --shadow: 0 12px 36px -16px #4535272e;

  /* Map the palette to the existing OpenPix components. */
  --page: var(--bg);
  --raised: var(--surface-2);
  --ink: var(--text);
  --tint: var(--accent-soft);
  --announcement: color-mix(in srgb, var(--page) 85%, var(--accent-2));
  --announcement-line: color-mix(in srgb, var(--announcement) 90%, var(--ink));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 570; letter-spacing: -.045em; text-wrap: balance; }
h2 { font-size: clamp(23px, 2.1vw, 30px); line-height: 1.2; }
h3 { font-size: 21px; line-height: 1.3; }
a { color: inherit; text-decoration: none; }
button, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .5; cursor: default; }
button, a, select, textarea, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
[hidden] { display: none !important; }
.op-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
.op-icon { width: 20px; height: 20px; display: block; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.op-inline { display: inline-flex; align-items: center; gap: 8px; }
.op-small, .op-eyebrow { font-size: 11px; line-height: 1.6; color: var(--muted); }
.op-eyebrow { font-weight: 550; letter-spacing: .1em; text-transform: uppercase; }
.op-skip { position: fixed; z-index: 50; left: 16px; top: 16px; padding: 14px 20px; background: var(--accent); color: var(--on-accent); border-radius: 8px; transform: translateY(-160%); }
.op-skip:focus { transform: none; }
.op-header { display: flex; align-items: center; gap: 32px; padding: 8px 28px; min-height: 72px; border-bottom: 1px solid var(--line); background: var(--page); position: sticky; top: 0; z-index: 10; }
.op-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-height: 44px; font-size: 26px; font-weight: 700; letter-spacing: -.07em; }
.op-brand img { object-fit: contain; }
.op-brand-dot { color: var(--accent); }
.op-tagline { color: var(--muted); font-size: 12px; }
.op-header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.op-theme { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); }
.op-theme button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; min-height: 44px; border-radius: 24px; border: 0; background: transparent; font-size: 11px; color: var(--muted); }
.op-theme button[aria-pressed="true"] { color: var(--ink); background: var(--raised); }
.op-theme .op-icon { width: 17px; height: 17px; }
.op-language-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); font-size: 11px; }
.op-language-button:hover { background: var(--raised); }
.op-language-button > .op-icon { width: 16px; height: 16px; }
.op-language-button > .op-icon:last-child { width: 12px; }
.op-language-picker .dropdown-menu { min-width: 208px; }
.op-language-picker .dropdown-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 16px; font-size: 12px; }
.op-locale-code { color: var(--muted); font-size: 10px; }
.op-language-picker .dropdown-item .op-icon { width: 16px; height: 16px; margin-left: auto; }
.op-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; min-height: 46px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 570; text-align: center; line-height: 1.5; }
.op-button:hover { background: var(--raised); }
.op-primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.op-primary:hover { background: var(--accent); filter: brightness(1.08); }
.op-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 0; border: 0; background: transparent; text-align: left; font-size: 12px; font-weight: 550; }
.op-link:hover { color: var(--accent); }
.op-icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; min-height: 44px; padding: 12px; color: var(--muted); background: transparent; border: 0; border-radius: 50%; }
.op-icon-button:hover { color: var(--ink); background: var(--raised); }
.op-app-shell { display: grid; grid-template-columns: 216px minmax(0, 1fr); flex: 1; }
.op-sidebar { position: sticky; top: var(--op-header-height); align-self: start; display: flex; flex-direction: column; gap: 20px; padding: 20px 16px; }
.op-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.op-nav-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 9px; font-size: 12px; color: var(--muted); }
.op-nav-link:hover, .op-nav-link.is-active { color: var(--ink); background: var(--raised); }
.op-nav-link.is-active .op-icon { color: var(--accent); }
.op-nav-label { padding: 16px 12px 2px; color: var(--muted); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.op-sidebar-widget { display: flex; flex-direction: column; flex-shrink: 0; gap: 18px; padding: 20px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.op-nav-feature { margin-top: 12px; transition: border-color .2s, background .2s; }
.op-nav-feature:hover { border-color: var(--accent); background: var(--raised); color: var(--ink); }
.op-widget-art { position: relative; display: grid; place-items: center; width: 100%; height: 82px; padding: 16px; color: var(--accent); }
.op-widget-copy { display: flex; flex-direction: column; gap: 8px; }
.op-widget-copy > strong { font-size: 13px; font-weight: 600; line-height: 1.6; letter-spacing: -.02em; }
.op-widget-copy > :is(span,p) { color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-widget-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 12px 0 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 550; min-height: 44px; }
.op-widget-action > .op-icon { width: 16px; height: 16px; }
.op-widget-action:hover { color: var(--accent); }
.op-sidebar-bottom { margin-top: 0; }
.op-widget-frame { position: relative; display: grid; place-items: center; width: 76px; height: 62px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); transform: rotate(-9deg); box-shadow: 7px 6px 0 var(--page), 8px 7px 0 var(--line); }
.op-widget-frame > .op-icon { width: 32px; height: 32px; }
.op-widget-lock { position: absolute; bottom: 2px; right: 20px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.op-widget-lock > .op-icon { width: 16px; height: 16px; }
.op-main { min-width: 0; width: 100%; max-width: 1800px; padding: 24px 32px 0; }
.op-main section { min-width: 0; scroll-margin-top: 20px; }
.op-stage { position: relative; overflow: hidden; padding: 10px 8% 0; }
.op-stage-viewport { position: relative; height: clamp(340px, 31vw, 490px); isolation: isolate; }
.op-slide { position: absolute; inset: 0; padding: 16px; border-radius: 18px; clip-path: url(#op-design-stage-clip); overflow: hidden; background: var(--surface); transition: transform .6s ease, opacity .6s ease; }
.op-slide img { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; }
.op-slide[data-slide="flower"] img { object-position: center 57%; }
.op-slide[data-slide="portrait"] img { object-position: center 38%; }
.op-slide.is-active { z-index: 1; opacity: 1; transform: none; box-shadow: var(--shadow); }
.op-slide.is-after { z-index: 0; transform: translateX(92%) perspective(800px) rotateY(-12deg) scale(.93); opacity: .4; }
.op-slide.is-before { z-index: 0; transform: translateX(-92%) perspective(800px) rotateY(12deg) scale(.93); opacity: .4; }
.op-slide.is-active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #050c0900 23%, #050c0930 45%, #050c09e8 100%); }
.op-hero-copy { position: absolute; z-index: 2; inset: auto 24px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; text-align: center; pointer-events: none; }
.op-hero-copy .op-eyebrow { color: #b7f4df; font-size: 10px; }
.op-hero-copy h1 { font-size: clamp(32px, 3.15vw, 51px); line-height: 1.09; max-width: 740px; }
.op-hero-copy > p:not(.op-eyebrow) { color: #e5ece8; font-size: 12px; max-width: 540px; }
.op-glass { background: #101b1b40; border-color: #ffffff50; color: #fff; backdrop-filter: blur(12px); pointer-events: auto; }
.op-glass:hover { background: #183a3280; }
.op-hero-copy .op-button { margin-top: 4px; }
.op-stage-arrow { position: absolute; z-index: 3; top: 47%; width: 44px; min-height: 44px; padding: 12px; border-radius: 50%; background: var(--raised); color: var(--ink); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; }
.op-stage-prev { left: 12px; }
.op-stage-prev .op-icon { transform: rotate(180deg); }
.op-stage-next { right: 12px; }
.op-slide-dots { display: flex; gap: 0; justify-content: center; padding: 2px 0; }
.op-slide-dots button { width: 44px; min-height: 44px; padding: 14px; background: transparent; border: 0; display: flex; align-items: center; justify-content: center; }
.op-slide-dots span { display: block; width: 5px; height: 5px; border-radius: 10px; background: var(--muted); }
.op-slide-dots [aria-pressed="true"] span { background: var(--accent); width: 22px; }
.op-studio { width: min(100%, 970px); margin: 0 auto; }
#studio-form { border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 12px; background: var(--surface); box-shadow: var(--shadow); }
.op-prompt-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 10px; }
.op-prompt-heading label { font-size: 12px; font-weight: 550; }
.op-prompt-heading .op-eyebrow { font-size: 9px; }
.op-prompt-box { display: flex; align-items: start; gap: 12px; }
.op-prompt-box > .op-icon { margin-top: 12px; }
.op-prompt-box textarea { width: 100%; min-width: 0; min-height: 70px; max-height: 260px; padding: 8px 0; resize: vertical; background: transparent; border: 0; font-size: 14px; line-height: 1.7; }
.op-prompt-box textarea::placeholder { color: var(--muted); opacity: .85; }
.op-composer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.op-fields { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.op-field { display: flex; align-items: center; gap: 8px; }
.op-field > span { color: var(--muted); font-size: 10px; }
.op-field select { max-width: 155px; min-height: 44px; padding: 10px 28px 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); font-size: 11px; }
.op-roulette-link { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 11px; }
.op-generate { flex-shrink: 0; }
.op-options { font-size: 11px; padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--line); }
.op-options summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--ink); min-height: 44px; padding: 12px 0; list-style: none; }
.op-options summary::-webkit-details-marker { display: none; }
.op-settings-summary-title, .op-settings-account { display: inline-flex; align-items: center; gap: 8px; }
.op-settings-summary-title > .op-icon { width: 16px; height: 16px; }
.op-options[open] .op-settings-summary-title > .op-icon { transform: rotate(180deg); }
.op-settings-account { padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); background: var(--raised); font-size: 10px; }
.op-settings-account > .op-icon { width: 14px; height: 14px; }
.op-settings-access { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); }
.op-settings-access p { max-width: 660px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.op-settings-access .op-button { flex-shrink: 0; }
.op-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding-top: 16px; }
.op-setting-option { display: grid; grid-template-columns: 44px minmax(0,1fr) 20px; align-items: center; gap: 12px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .2s,background .2s; }
.op-setting-option:hover, .op-setting-option:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.op-setting-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border-radius: 12px; background: var(--raised); color: var(--accent); }
.op-setting-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.op-setting-copy strong { font-size: 12px; font-weight: 550; line-height: 1.6; }
.op-setting-copy > span { font-size: 11px; line-height: 1.7; color: var(--muted); }
.op-setting-option .form-check-input { width: 20px; height: 20px; accent-color: var(--accent); }
.op-setting-lock { width: 16px; height: 16px; color: var(--muted); }
@media (max-width: 1200px) { .op-setting-option { grid-template-columns: minmax(0,1fr) 20px; padding: 16px; } .op-setting-icon { grid-column: 1 / -1; } }
@media (max-width: 760px) { .op-option-grid { grid-template-columns: 1fr; } .op-setting-option { grid-template-columns: 44px minmax(0,1fr) 20px; } .op-setting-icon { grid-column: auto; } .op-settings-access { align-items: start; flex-direction: column; gap: 16px; } }
.op-composer-help { color: var(--muted); font-size: 11px; text-align: center; padding: 14px 16px 0; }
.op-section { margin-top: 48px; }
.op-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 24px; }
.op-section-heading > div { display: flex; flex-direction: column; gap: 9px; }
.op-section-heading p { font-size: 12px; color: var(--muted); max-width: 700px; line-height: 1.7; }
.op-style-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.op-style-card { display: flex; flex-direction: column; align-items: start; gap: 14px; text-align: left; min-width: 0; padding: 22px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, background .2s; }
.op-style-card:hover { background: var(--raised); }
.op-style-card[aria-pressed="true"] { border-color: var(--accent); background: var(--tint); }
.op-icon-tile { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 46px; height: 46px; padding: 12px; background: var(--raised); border-radius: 13px; }
.op-style-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.op-style-title strong { font-size: 14px; font-weight: 580; }
.op-style-check { width: 17px; height: 17px; color: var(--accent); visibility: hidden; }
[aria-pressed="true"] .op-style-check { visibility: visible; }
.op-style-card > span:last-child { color: var(--muted); font-size: 11px; line-height: 1.7; }
.op-campaign-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.op-campaign { min-width: 0; min-height: 330px; position: relative; overflow: hidden; border-radius: 14px; padding: 28px; color: #fff; isolation: isolate; }
.op-campaign > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .5s; }
.op-campaign:hover > img { transform: scale(1.025); }
.op-campaign::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #06130de8, #06130d00 100%); }
.op-campaign-copy { display: flex; flex-direction: column; align-items: start; gap: 12px; height: 100%; justify-content: end; }
.op-badge { display: inline-flex; gap: 8px; padding: 6px 12px; border-radius: 20px; border: 1px solid #ffffff50; background: #0c191b66; backdrop-filter: blur(10px); font-size: 9px; margin-bottom: 26px; }
.op-campaign h3 { font-size: clamp(25px, 2.3vw, 36px); max-width: 370px; }
.op-campaign p { color: #e6ebe7; font-size: 12px; }
.op-campaign .op-button { margin-top: 8px; }
.op-roulette { display: grid; grid-template-columns: .65fr 1.35fr; align-items: center; gap: 32px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.op-roulette-copy { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.op-roulette-machine { min-width: 0; }
.op-roulette-copy h2 { font-size: clamp(28px, 2.5vw, 36px); max-width: 370px; }
.op-roulette-copy > p { font-size: 12px; color: var(--muted); line-height: 1.9; }
@keyframes op-spin { 50% { transform: rotate(-20deg) scale(.8); } }
.op-play-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.op-game, .op-guide { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.op-game-art { min-height: 170px; position: relative; display: flex; gap: 16px; justify-content: center; align-items: center; padding: 16px; background: var(--raised); border-radius: 9px; overflow: hidden; }
.op-battle-frame { width: 42%; height: 116px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; transform: rotate(-9deg); }
.op-battle-frame:last-child { transform: rotate(9deg); }
.op-battle-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.op-versus { position: absolute; z-index: 1; width: 36px; height: 36px; padding: 10px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--on-accent); border-radius: 50%; font-size: 10px; font-weight: 700; }
.op-game-copy { display: flex; flex-direction: column; align-items: start; gap: 12px; padding-top: 24px; }
.op-game-copy > p, .op-guide > p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.op-game-copy .op-link { margin-top: auto; }
.op-detective-image { width: 106px; height: 136px; object-fit: cover; border-radius: 8px; transform: rotate(-9deg); }
.op-detective-lens { display: flex; align-items: center; justify-content: center; padding: 18px; border-radius: 50%; border: 1px solid var(--accent); width: 72px; height: 72px; position: absolute; left: 40%; top: 42%; background: var(--tint); }
.op-detective-lens .op-icon { width: 32px; height: 32px; color: var(--accent); }
.op-detective-lines { width: 60px; display: flex; flex-direction: column; gap: 10px; }
.op-detective-lines span { width: 100%; height: 6px; background: var(--line); border-radius: 5px; }
.op-detective-lines span:nth-child(2) { width: 65%; }
.op-guide { display: flex; flex-direction: column; align-items: start; gap: 20px; background: var(--tint); padding: 28px; }
.op-guide .op-icon-tile { background: var(--surface); }
.op-guide h3 { font-size: clamp(25px, 2.2vw, 34px); }
.op-guide .op-link { margin-top: auto; }
.op-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 24px; }
.op-filters button { border: 1px solid var(--line); border-radius: 24px; padding: 10px 18px; min-height: 44px; background: transparent; font-size: 11px; }
.op-filters [aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--page); }
.op-inspiration-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.op-inspiration-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.op-inspiration-card > img { width: 100%; height: 260px; object-fit: cover; border-radius: 9px; display: block; }
.op-inspiration-card[data-sample="portrait"] > img { object-position: 50% 35%; }
.op-inspiration-card > div { display: flex; flex-direction: column; align-items: start; gap: 10px; padding: 20px 8px 4px; }
.op-inspiration-card .op-eyebrow { font-size: 9px; }
.op-inspiration-card h3 { font-size: 20px; }
.op-community { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 40px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.op-community-copy { display: flex; flex-direction: column; align-items: start; gap: 18px; }
.op-community-copy h2 { font-size: clamp(29px, 2.8vw, 42px); max-width: 400px; }
.op-community-copy > p { font-size: 12px; color: var(--muted); max-width: 390px; line-height: 1.8; }
.op-community-art { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 220px; }
.op-community-art img { width: 28%; height: 160px; object-fit: cover; border-radius: 50% 50% 14px 14px; transform: rotate(-9deg); }
.op-community-art img:nth-child(2) { height: 215px; border-radius: 70px; transform: translateY(-6px); }
.op-community-art img:nth-child(3) { transform: rotate(9deg); }
.op-android { display: flex; gap: 20px; align-items: center; padding: 32px 8px; margin-top: 24px; }
.op-android h2 { font-size: 18px; letter-spacing: -.025em; }
.op-android p { font-size: 11px; color: var(--muted); margin-top: 6px; }
.op-android .op-link { margin-left: auto; }
.op-footer { border-top: 1px solid var(--line); padding: 28px 8px; color: var(--muted); font-size: 10px; display: flex; flex-direction: column; gap: 12px; }
.op-footer > div { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.op-footer a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.op-footer .op-icon { width: 13px; height: 13px; transform: rotate(-40deg); }
.op-toast { position: fixed; z-index: 30; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 16px 24px; background: var(--ink); color: var(--page); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); font-size: 12px; text-align: center; }
#openpixToastContainer { --op-toast-bottom: 24px; position: fixed; z-index: 1095; right: 24px; bottom: calc(var(--op-toast-bottom) + env(safe-area-inset-bottom,0px)); display: flex; flex-direction: column; gap: 12px; width: min(380px,calc(100vw - 32px)); max-height: calc(100dvh - 160px); overflow-y: auto; pointer-events: none; }
#openpixToastContainer .op-notification { width: 100%; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); pointer-events: auto; }
.op-notification-heading { display: grid; grid-template-columns: 40px minmax(0,1fr) 44px; align-items: center; gap: 12px; }
.op-notification-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--tint); color: var(--accent); }
.op-notification-title { font-size: 14px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.op-notification-message { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.op-notification-actions { display: flex; justify-content: flex-end; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); }
.op-notification-actions .op-button { justify-content: space-between; gap: 20px; font-size: 12px; }
.openpix-app:has(.sticky-ad-bar) #openpixToastContainer { bottom: calc(var(--op-toast-bottom) + 50px + env(safe-area-inset-bottom,0px)); }
@media (max-width: 960px) { #openpixToastContainer { --op-toast-bottom: 16px; right: 16px; } }
@media (min-width: 1800px) { .op-main { margin-inline: auto; } }
@media (max-width: 1200px) {
  .op-tagline { display: none; }
  .op-header { gap: 20px; }
  .op-app-shell { grid-template-columns: 192px minmax(0, 1fr); }
  .op-sidebar { padding-inline: 12px; }
  .op-main { padding-inline: 24px; }
  .op-style-card { padding: 18px; }
  .op-composer-toolbar { align-items: end; }
  .op-fields { gap: 8px 16px; }
  .op-field { flex-direction: column; align-items: start; gap: 4px; }
  .op-roulette { gap: 24px; grid-template-columns: 1fr; padding: 28px; }
  .op-roulette-copy { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 16px 32px; }
  .op-roulette-copy > .op-eyebrow { grid-column: 1 / -1; }
  .op-roulette-copy > .op-small { grid-column: 1 / -1; }
  .op-play-grid { grid-template-columns: 1fr 1fr; }
  .op-guide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; align-items: start; }
  .op-guide > .op-icon-tile { grid-row: 1 / 4; }
  .op-guide h3 { font-size: 26px; }
  .op-guide > p, .op-guide > .op-link { grid-column: 2; }
  .op-community { padding: 28px; gap: 24px; }
  .op-inspiration-card > img { height: 210px; }
}
@media (max-width: 960px) {
  .op-app-shell { display: flex; flex-direction: column; }
  .op-sidebar { position: static; min-height: 0; padding: 12px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .op-sidebar nav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .op-nav-feature, .op-nav-label, .op-sidebar-bottom, .op-nav-link[href="#styles"], .op-nav-link[href="#inspiration"], .op-nav-link[href="#community"], .op-nav-link[href="#guide"] { display: none; }
  .op-nav-link { padding: 12px 16px; font-size: 11px; }
  .op-header-actions { gap: 12px; }
  .op-header { padding-inline: 24px; }
  .op-stage-viewport { height: 370px; }
  .op-community-art { min-height: 190px; }
  .op-community-art img:nth-child(2) { height: 180px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 160px; }
  .op-header { padding: 8px 16px; flex-wrap: wrap; gap: 8px 16px; }
  .op-brand { font-size: 24px; }
  .op-header-actions { display: contents; }
  .op-login { margin-left: auto; font-size: 11px; padding: 10px 14px; order: 1; }
  .op-theme { order: 2; }
  .op-sidebar { padding: 12px 16px; }
  .op-sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .op-nav-link { justify-content: center; gap: 8px; padding: 12px 10px; font-size: 10px; text-align: center; }
  .op-nav-link[href="#campaigns"] { display: none; }
  .op-nav-link .op-icon { width: 17px; height: 17px; }
  .op-main { padding: 20px 16px 0; }
  .op-stage { padding: 0; border-radius: 12px; }
  .op-stage-viewport { height: 390px; }
  .op-slide { border-radius: 12px; clip-path: none; }
  .op-slide.is-before, .op-slide.is-after { visibility: hidden; }
  .op-stage-arrow { top: 27%; width: 44px; min-height: 44px; background: #09131080; border-color: #ffffff30; color: #fff; }
  .op-stage-prev { left: 12px; }
  .op-stage-next { right: 12px; }
  .op-hero-copy { inset-inline: 20px; bottom: 24px; gap: 10px; }
  .op-hero-copy h1 { font-size: 36px; }
  .op-hero-copy > p:not(.op-eyebrow) { font-size: 11px; }
  .op-hero-copy .op-button { padding-inline: 14px; font-size: 11px; }
  #studio-form { padding: 20px 16px 12px; border-radius: 14px; }
  .op-prompt-heading { flex-wrap: wrap; gap: 8px; }
  .op-prompt-heading .op-eyebrow { display: none; }
  .op-prompt-box { gap: 8px; }
  .op-prompt-box > .op-icon { display: none; }
  .op-prompt-box textarea { font-size: 16px; min-height: 115px; }
  .op-prompt-box .op-icon-button { width: 44px; }
  .op-composer-toolbar { flex-direction: column; align-items: stretch; gap: 16px; }
  .op-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .op-field select { width: 100%; max-width: none; font-size: 12px; }
  .op-roulette-link { grid-column: 1 / -1; }
  .op-composer-help { text-align: left; padding-inline: 0; line-height: 1.8; }
  .op-section { margin-top: 40px; }
  .op-section-heading { padding-bottom: 20px; }
  .op-section-heading p { font-size: 11px; }
  .op-style-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .op-style-card { padding: 16px; gap: 14px; }
  .op-style-title strong { font-size: 12px; overflow-wrap: anywhere; }
  .op-style-card > span:last-child { font-size: 10px; }
  .op-campaign-grid { grid-template-columns: 1fr; gap: 16px; }
  .op-campaign { padding: 24px; min-height: 350px; }
  .op-campaign h3 { font-size: 30px; }
  .op-campaign p { font-size: 11px; }
  .op-roulette { padding: 24px 16px; gap: 24px; }
  .op-roulette-copy { display: flex; gap: 16px; }
  .op-roulette-copy h2 { font-size: 30px; }
  .op-roulette-copy > p { font-size: 11px; }
  .op-play-grid, .op-inspiration-grid { grid-template-columns: 1fr; gap: 16px; }
  .op-game { padding: 20px; }
  .op-game-art { min-height: 190px; }
  .op-game-copy { gap: 14px; }
  .op-guide { display: flex; padding: 24px; gap: 20px; }
  .op-filters { gap: 8px; }
  .op-filters button { padding: 10px 14px; }
  .op-inspiration-card > img { height: 280px; }
  .op-community { display: flex; flex-direction: column; align-items: stretch; padding: 24px; gap: 24px; }
  .op-community-copy h2 { font-size: 34px; }
  .op-community-art { min-height: 180px; }
  .op-community-art img { height: 135px; }
  .op-android { padding: 28px 0; flex-wrap: wrap; gap: 16px; }
  .op-android > div { flex: 1; min-width: 160px; }
  .op-android .op-link { margin-left: 0; }
  .op-footer { padding-inline: 0; }
  .op-footer p { line-height: 1.9; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Application shell and the existing Bootstrap components share the same tokens. */
:root {
  --op-header-height: 72px;
  --op-bg-page: var(--page); --op-bg-card: var(--surface); --op-bg-card-hover: var(--raised); --op-bg-surface: var(--raised);
  --op-border-subtle: var(--line); --op-border-active: var(--accent); --op-border-focus: var(--accent);
  --op-text-primary: var(--ink); --op-text-secondary: var(--muted); --op-text-muted: var(--muted);
  --op-accent-cyan: var(--accent); --op-accent-indigo: var(--accent); --op-accent-purple: var(--accent); --op-accent-emerald: var(--accent);
  --op-glass-bg: var(--surface); --op-glass-border: var(--line); --op-shadow-glow: var(--shadow);
  --op-surface-rgb: 20,23,29; --op-raised-rgb: 29,34,43; --op-ink-rgb: 242,244,248;
  --bs-body-bg: var(--page); --bs-body-color: var(--ink); --bs-secondary-color: var(--muted); --bs-tertiary-bg: var(--raised);
  --bs-border-color: var(--line); --bs-primary: var(--accent); --bs-primary-rgb: 163,192,255; --bs-link-color: var(--accent); --bs-link-hover-color: var(--ink);
  --bs-emphasis-color: var(--ink); --bs-secondary-bg: var(--surface); --bs-primary-text-emphasis: var(--accent); --bs-primary-bg-subtle: var(--tint);
}
:root[data-theme="light"] { --op-surface-rgb: 255,254,250; --op-raised-rgb: 239,235,228; --op-ink-rgb: 41,37,36; --bs-primary-rgb: 57,102,91; --bs-danger: #b4443d; --bs-danger-rgb: 180,68,61; }
:root[data-theme="light"] .openpix-app :is(.bg-primary,.text-bg-primary) { background-color: color-mix(in srgb, var(--accent) calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important; }
.openpix-app { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: 0 !important; background: var(--page); background-image: none; color: var(--ink); font-family: "OpenPix Inter",Arial,sans-serif; }
.openpix-app h1, .openpix-app h2, .openpix-app h3 { color: inherit; }
.openpix-app button, .openpix-app select, .openpix-app a.btn { min-height: 44px; }
.openpix-app button:not(.op-icon-button):not(.btn-close):not(.op-stage-arrow):not(.filter-chip-btn):not(.op-style-card):not(.op-account-button):not(.op-theme button) { gap: 8px; }
.op-defs { position: absolute; width: 0; height: 0; pointer-events: none; }
.op-page-shell { display: flex; flex-direction: column; flex: 1; min-width: 0; border-left: 1px solid var(--line); }
.op-main { flex: 1; padding-bottom: 40px; min-height: 0; }
.op-main > .openpix-container { padding-inline: 0; max-width: none; }
.op-main .openpix-container .openpix-container { padding-inline: 0; }
.op-main .row > * { min-width: 0; }
.op-main h1 { font-size: clamp(32px,3.3vw,49px); line-height: 1.15; font-weight: 580; letter-spacing: -.05em; }
.op-main h2 { font-weight: 560; letter-spacing: -.035em; }
.op-main h3 { font-weight: 560; letter-spacing: -.025em; }
.op-header { background: var(--page); }
.op-header { z-index: 1030; }
.op-account-button { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; min-height: 46px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface); }
.op-account-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.op-avatar { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.op-avatar-initial { display: grid; place-items: center; background: var(--tint); color: var(--accent); font-weight: 600; }
.op-account-button > .op-icon { width: 16px; height: 16px; }
.op-sidebar { max-height: calc(100dvh - var(--op-header-height)); min-height: 0; overflow-y: auto; scrollbar-width: none; top: var(--op-header-height); }
.op-sidebar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.op-sidebar-heading, .op-mobile-nav, .op-nav-backdrop { display: none; }
.op-sidebar .op-sidebar-widget { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 10px 12px; padding: 16px; border-radius: 14px; transition: border-color .2s,background .2s; }
.op-sidebar .op-sidebar-widget:hover { border-color: var(--accent); background: var(--raised); color: var(--ink); }
.op-sidebar .op-nav-feature { margin-top: 16px; }
.op-sidebar .op-widget-art { grid-column: 1; grid-row: 1; align-self: center; width: 44px; height: 44px; padding: 6px; }
.op-sidebar .op-widget-art.op-widget-roulette { padding: 0; }
.op-sidebar :is(.op-widget-die,.op-widget-frame) { width: 34px; height: 34px; padding: 6px; border-radius: 9px; box-shadow: 3px 4px 0 var(--page); animation: op-nav-widget-float 3.6s ease-in-out 1; }
.op-sidebar :is(.op-widget-die,.op-widget-frame) > .op-icon { width: 22px; height: 22px; }
.op-sidebar .op-widget-lock { bottom: -3px; right: -4px; padding: 5px; border-radius: 7px; }
.op-sidebar .op-widget-lock > .op-icon { width: 12px; height: 12px; }
.op-sidebar .op-widget-copy { display: contents; }
.op-sidebar .op-widget-copy > strong { grid-column: 2; grid-row: 1; align-self: center; font-size: 12px; line-height: 1.6; }
.op-sidebar .op-widget-description { grid-column: 1 / -1; font-size: 11px; line-height: 1.7; }
.op-sidebar .op-widget-action { grid-column: 1 / -1; min-height: 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 10px; line-height: 1.8; }
.op-sidebar-widget:is(:hover,:focus-visible) :is(.op-widget-die,.op-widget-frame) { animation: op-nav-widget-float 2.4s ease-in-out infinite; }
@keyframes op-nav-widget-float { 0%,100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-3px); } }
@keyframes op-nav-widget-spark { 0%,100% { transform: scale(.9); opacity: .65; } 50% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .op-sidebar-widget :is(.op-widget-die,.op-widget-frame,.op-widget-spark), .op-sidebar-widget:is(:hover,:focus-visible) :is(.op-widget-die,.op-widget-frame,.op-widget-spark) { animation: none; transition: none; } }
.op-sidebar nav { flex-shrink: 0; }
.op-sidebar .op-nav-label { margin: 0; }
.op-sidebar .op-nav-feature .op-inline { gap: 8px; }
.op-nav-link { color: var(--muted); }
.op-nav-link:hover { color: var(--ink); }
.op-footer { margin: 0 32px; padding: 24px 0 20px; font-size: 11px; }
/* Reserve space inside the footer only when the fixed ad bar actually exists. */
.openpix-app:has(.sticky-ad-bar) .op-footer { padding-bottom: calc(20px + 50px + env(safe-area-inset-bottom,0px)); }
/* Keep the fixed usage widget from covering the footer links once the page is scrolled to the end. */
.openpix-app:has(.op-usage) .op-footer { padding-bottom: calc(92px + env(safe-area-inset-bottom,0px)); }
.openpix-app:has(.op-usage):has(.sticky-ad-bar) .op-footer { padding-bottom: calc(92px + 50px + env(safe-area-inset-bottom,0px)); }
.openpix-app .sticky-ad-bar { min-height: calc(50px + env(safe-area-inset-bottom,0px)); padding-bottom: env(safe-area-inset-bottom,0px); background: var(--surface); }
.op-footer .op-footer-main { display: block; }
.op-footer-main .op-newsletter { max-width: 760px; }
.op-footer .op-footer-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 24px; padding-top: 8px; border-top: 1px solid var(--line); }
.op-footer-bar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.op-footer-bar .op-copyright { font-size: 11px; white-space: nowrap; }
.op-footer-bar nav a, .op-footer-bar nav button { font-size: 11px; white-space: nowrap; }
.op-copyright { color: var(--muted); font-size: 10px; }
.op-footer .newsletter-submit-btn { background: var(--accent); color: var(--on-accent); box-shadow: none; border-radius: 24px; min-height: 46px; padding: 12px 16px; }
.op-newsletter { display: flex; align-items: start; gap: 24px; min-width: 0; width: 100%; }
.op-newsletter-content { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; }
.op-newsletter .op-icon { transform: none; }
.op-newsletter > .op-brand { gap: 8px; color: var(--ink); font-size: 23px; }
.op-newsletter p { font-size: 11px; line-height: 1.8; color: var(--muted); }
.op-newsletter-fields { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.op-newsletter-fields input { min-width: 0; min-height: 44px; font-size: 11px; padding: 10px 12px; border-radius: 8px; }
.op-newsletter-fields input::placeholder { color: var(--muted); opacity: 1; }
.op-newsletter-fields .op-button { min-height: 44px; padding: 12px 16px; border-radius: 10px; font-size: 11px; }
.op-newsletter-fields .op-button > .op-icon { width: 18px; height: 18px; }
.op-newsletter-fields [aria-busy="true"] .op-newsletter-submit-icon { display: none; }
.op-newsletter #newsletter-feedback { font-size: 11px; margin-top: 12px; }

/* Shared surfaces for gallery, games, guides, profiles, campaigns and dialogs. */
.openpix-app :is(.card,.bento-card,.hero-card,.gallery-filter-bar,.wallpaper-detail-header,.wallpaper-hub-header,.category-seo-header,.category-content-section,.category-faq-section,.seo-content-section,.guide-card,.guide-content-card,.profile-card,.login-card,.campaign-card,.faq-card,.accordion-item,.modal-content,.dropdown-menu) {
  background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none;
}
.openpix-app :is(.card,.bento-card,.hero-card,.wallpaper-detail-header,.wallpaper-hub-header,.category-seo-header,.category-content-section,.category-faq-section,.seo-content-section,.guide-content-card) { border: 1px solid var(--line); border-radius: 14px; }
.openpix-app .bento-card { padding: 24px; }
.openpix-app :is(.bg-white,.bg-white.bg-opacity-75) { background-color: var(--surface) !important; }
.openpix-app :is(.bg-light,.bg-body-tertiary,.bg-body-secondary) { background-color: var(--raised) !important; }
.openpix-app :is(.text-dark,.text-black,.text-body) { color: var(--ink) !important; }
.openpix-app :is(.text-secondary,.text-muted,.text-body-secondary) { color: var(--muted) !important; }
.openpix-app :is(.text-primary,.text-info) { color: var(--accent) !important; }
.openpix-app .text-success { color: var(--bs-success-text-emphasis) !important; }
.openpix-app .text-danger { color: var(--bs-danger-text-emphasis) !important; }
.openpix-app .border { border-color: var(--line) !important; }
.openpix-app :is(.shadow-sm,.shadow-lg,.shadow-xs) { box-shadow: none !important; }
.openpix-app .badge { padding: 6px 12px; line-height: 1.5; font-weight: 550; }
.openpix-app :is(.btn-primary,.btn-generate,.btn-studio-download,.profile-save-btn,.login-btn-google) { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: none; }
.openpix-app :is(.btn-outline-primary,.btn-outline-secondary) { background: transparent; border-color: var(--line); color: var(--ink); }
.openpix-app :is(.btn-outline-primary,.btn-outline-secondary):hover { background: var(--raised); border-color: var(--accent); color: var(--ink); }
.openpix-app .btn { padding: 11px 18px; border-radius: 26px; font-size: 12px; }
.openpix-app .btn-close { width: 44px; height: 44px; min-width: 44px; padding: 14px; box-sizing: border-box; background-size: 14px; }
.openpix-app .form-control, .openpix-app .form-select, .openpix-app .input-group-text { color: var(--ink); background-color: var(--page); border-color: var(--line); border-radius: 9px; min-height: 46px; padding: 12px 14px; font-size: 13px; }
.openpix-app .form-control::placeholder { color: var(--muted); opacity: 1; }
.openpix-app .form-control:focus, .openpix-app .form-select:focus { background-color: var(--page); color: var(--ink); border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
.openpix-app .form-check-input { background-color: var(--raised); border-color: var(--line); }
.openpix-app .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.openpix-app .dropdown-menu { padding: 12px; border: 1px solid var(--line); border-radius: 12px; min-width: 220px; box-shadow: var(--shadow); }
.openpix-app .dropdown-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 14px; color: var(--ink); border-radius: 8px; font-size: 12px; }
.openpix-app .dropdown-item:hover, .openpix-app .dropdown-item:focus { background: var(--raised); color: var(--ink); }
.openpix-app .modal-content { border: 1px solid var(--line); border-radius: 18px; }
.openpix-app .modal-header, .openpix-app .modal-footer { border-color: var(--line); padding: 20px 24px; gap: 12px; }
.openpix-app .modal-body { padding: 24px; }
.openpix-app .table { --bs-table-bg: var(--surface); --bs-table-color: var(--ink); --bs-table-border-color: var(--line); --bs-table-striped-bg: var(--raised); --bs-table-striped-color: var(--ink); }
.openpix-app .pagination { gap: 8px; flex-wrap: wrap; }
.openpix-app .image-card, .openpix-app .user-image-card { border-color: var(--line); background: var(--surface); box-shadow: none; border-radius: 14px; }
.openpix-app .style-option-card { background: var(--surface); border-color: var(--line); color: var(--ink); padding: 20px; }
.openpix-app .style-option-card:hover, .openpix-app .style-option-card.active { background: var(--tint); border-color: var(--accent); }
.openpix-app :is(.style-card-title,.style-card-text) { color: var(--ink); }
.openpix-app .style-card-desc { color: var(--muted); }
.openpix-app .category-breadcrumb-nav { padding-block: 8px; gap: 10px; flex-wrap: wrap; }
.openpix-app .category-breadcrumb-link { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.openpix-app .category-breadcrumb-current { color: var(--ink); }
.op-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 8px 0 32px; }
.op-page-heading > div { display: flex; flex-direction: column; gap: 14px; }
.op-page-heading p { color: var(--muted); font-size: 13px; max-width: 740px; line-height: 1.8; }
.op-page-heading h1 { max-width: 1000px; }

/* Live studio and its supporting modules. */
.op-home { width: 100%; }
.op-hero-copy h1 { color: #fff; font-size: clamp(32px,3.15vw,51px); }
.op-slide img { display: block; }
.op-media-fallback { display: none; position: absolute; inset: 0; padding: 24px; align-items: center; justify-content: center; gap: 12px; color: var(--muted); background: var(--raised); text-align: center; font-size: 12px; }
.has-media-error .op-media-fallback { display: flex; }
.op-slide.has-media-error .op-media-fallback { color: #ddd; background: #152521; }
.op-slide.has-media-error .op-media-fallback > span { align-self: start; padding-top: 20px; }
.op-studio { scroll-margin-top: calc(var(--op-header-height) + 20px) !important; }
#studio-form { width: 100%; margin: 0; }
.op-studio .prompt-textarea-box { display: flex; flex-direction: row; align-items: start; gap: 12px; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.op-studio .prompt-textarea { flex: 1; width: 100%; margin: 0; height: 260px; background: transparent; color: var(--ink); border: 0; box-shadow: none; min-height: 160px; max-height: 260px; resize: vertical; font-size: 14px; padding: 8px 0; }
.op-studio .prompt-textarea:focus { outline-offset: 0; box-shadow: none; }
.op-field .prompt-dropdown-wrapper { min-width: 0; }
.op-field .prompt-pill-btn { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; gap: 10px; font-size: 11px; min-height: 44px; max-width: 220px; }
.op-field .prompt-pill-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-field .prompt-pill-btn .op-icon { width: 14px; height: 14px; }
.op-studio .prompt-dropdown-menu { background: var(--surface); color: var(--ink); border-color: var(--line); padding: 8px; min-width: 210px; box-shadow: var(--shadow); }
.op-studio .prompt-dropdown-item { display: flex; align-items: center; gap: 10px; color: var(--ink); padding: 12px 14px; min-height: 44px; font-size: 12px; }
.op-studio .prompt-dropdown-item:hover, .op-studio .prompt-dropdown-item.active { background: var(--tint); color: var(--accent); }
.op-studio .prompt-dropdown-divider { background: var(--line); }
.op-studio .op-option-grid label { font-size: 12px; }
.op-studio .op-option-grid .form-check-input { margin: 0; cursor: pointer; }
.op-studio .op-option-grid { align-items: stretch; }
.op-prompt-counter { padding: 8px 4px 12px; font-size: 10px; color: var(--muted); text-align: right; }
.op-studio #btn-generate { width: auto; display: inline-flex; background: var(--accent); color: var(--on-accent); padding: 12px 18px; box-shadow: none; font-size: 12px; border-radius: 26px; }
.op-studio .generation-progress-box { background: var(--surface); color: var(--ink); border-color: var(--line); border-radius: 14px; margin-top: 24px; padding: 24px; box-shadow: none; }
.op-studio .generation-progress-box img { max-height: 500px; }
.op-style-card { color: var(--ink); }
.op-style-card > .op-style-description { color: var(--muted); font-size: 11px; line-height: 1.7; }
.op-campaign-copy { position: relative; z-index: 2; }
.op-campaign .op-media-fallback { z-index: -1; }
.op-campaign .op-badge { color: #fff; }
.op-campaign .op-glass { color: #fff; }
.op-campaign-grid:has(> :only-child) { grid-template-columns: 1fr; }
.op-play-grid .op-game-art img { border: 0; }
.op-game-copy h3, .op-guide h3 { color: var(--ink); }
.op-creator-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.op-creator { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.op-creator .op-avatar { width: 48px; height: 48px; }
.op-creator > div { min-width: 0; }
.op-creator strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.op-creator small { color: var(--muted); font-size: 11px; }
.op-creator-profile-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.op-creator-stat { display: flex; flex-direction: column; gap: 6px; }
.op-creator-stat > strong { color: var(--ink); font-size: 26px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.op-creator-stat > span { color: var(--muted); font-size: 11px; }
.op-creator-gallery-heading { flex-wrap: wrap; gap: 16px; }
.op-creator-gallery-heading > h2 { font-size: 22px; }
.op-hero-empty { min-height: 360px; display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 20px; background: var(--tint); border: 1px solid var(--line); border-radius: 16px; padding: 40px; }
.op-hero-empty p { max-width: 600px; color: var(--muted); }
.op-inspiration-card .op-inspiration-media { position: relative; min-height: 240px; border-radius: 9px; overflow: hidden; }
.op-inspiration-media > img { width: 100%; height: 260px; object-fit: cover; }
.op-inspiration-card > div:not(.op-inspiration-media) { padding: 20px 8px 4px; }
.op-inspiration-card .op-inspiration-media { padding: 0; }
.op-inspiration-media { display: block; width: 100%; }
.op-inspiration-card .op-link { justify-content: space-between; width: 100%; }
.op-inspiration-card h3 { font-size: 16px; line-height: 1.5; }
.op-community-art .has-media-error { display: none; }
.op-inline { gap: 8px; }
.op-footer .newsletter-submit-btn { font-size: 11px; white-space: normal; line-height: 1.5; }
.guide-article-header { text-align: left !important; padding: 12px 0 24px; }
.guide-article-header > p { margin-inline: 0 !important; max-width: 760px; line-height: 1.8; color: var(--muted); font-size: 13px; }
.openpix-app :is(.guide-hero-title,.guide-article-title,.campaign-editorial-title,.category-hero-h1) { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.openpix-app :is(.guide-hero-badge,.guide-badge,.guide-tag,.category-hero-badge) { background: var(--tint); color: var(--accent); border-color: var(--line); padding: 8px 14px; gap: 8px; }
.openpix-app :is(.guide-card-header,.guide-card-footer,.guide-highlight,.guide-section-card,.guide-content-box) { background: var(--surface); color: var(--ink); border-color: var(--line); }
.openpix-app :is(.guide-card,.guide-section-card,.guide-content-box) { border: 1px solid var(--line); border-radius: 14px; }
.openpix-app :is(.guide-card-title,.category-editorial-h2,.category-editorial-h3) { color: var(--ink); }
.openpix-app :is(.guide-card-desc,.guide-article-body,.category-editorial-p) { color: var(--muted); }
.op-profile-heading { background: var(--surface) !important; color: var(--ink) !important; border-bottom: 1px solid var(--line); padding: 32px !important; }
.op-profile-heading .text-white { color: var(--ink) !important; }
.op-profile-heading .text-white-50 { color: var(--muted) !important; }
.op-profile-heading .btn-outline-light { border-color: var(--line); color: var(--ink) !important; background: var(--raised); }
.op-profile-heading .btn-light { background: var(--tint); color: var(--accent); }
.op-main :is(h2,h3,h4,h5):has(> .op-icon) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.op-login-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; padding: 40px 16px; max-width: 1300px; margin: 0 auto; }
.op-login-story { display: flex; flex-direction: column; align-items: start; gap: 24px; }
.op-login-story h1 { font-size: clamp(38px,4.2vw,64px); max-width: 600px; }
.op-login-story > p { color: var(--muted); max-width: 550px; font-size: 14px; line-height: 1.9; }
.op-login-benefits { display: flex; flex-direction: column; gap: 20px; padding-block: 8px; }
.op-login-benefits > div { display: flex; align-items: center; gap: 16px; }
.op-login-benefits .op-icon-tile { flex-shrink: 0; }
.op-login-benefits p { font-size: 12px; color: var(--muted); max-width: 470px; line-height: 1.8; }
.op-login-images { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; padding: 8px 0; }
.op-login-images img { width: 100%; height: 170px; object-fit: cover; border-radius: 12px; }
.op-login-panel { display: flex; flex-direction: column; align-items: start; gap: 20px; padding: 40px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.op-login-panel h2 { font-size: 29px; }
.op-login-panel > p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.op-provider-button { width: 100%; justify-content: start; min-height: 56px; border-radius: 10px; gap: 14px; }
.op-provider-button > .op-icon { margin-left: auto; }
.op-provider-logo { flex-shrink: 0; }
.op-login-secure { display: flex; align-items: start; gap: 12px; padding-block: 4px; }
.op-login-secure .op-icon { color: var(--accent); }
.op-login-links { display: flex; flex-direction: column; align-items: start; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); width: 100%; }
.openpix-app :is(.bento-tile-card,.category-faq-item,.category-editorial-card,.category-hero-section,.category-faq-section,.guide-article-card,.guide-toc) { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
.openpix-app :is(.category-faq-question,.category-faq-answer,.category-editorial-p) { color: var(--ink); }
.openpix-app :is(.category-faq-answer,.category-editorial-p) { color: var(--muted); }
.openpix-app :is(.filter-pills-group,.filter-category-group,.filter-ratio-group) { display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; }
.openpix-app :is(.bento-tile-card,.image-card) .op-icon { display: inline-block; }
.op-legal { max-width: 1100px; margin: 0 auto; padding: 16px 0 32px; --primary: var(--accent); }
.op-legal .hero, .op-legal .hero-section { padding: 24px 0 32px; display: flex; flex-direction: column; align-items: start; gap: 18px; }
.op-legal .hero h1 { max-width: 850px; }
.op-legal .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--tint); color: var(--accent); border-radius: 24px; font-size: 11px; }
.op-legal .hero-subtitle { font-size: 14px; color: var(--muted); max-width: 750px; line-height: 1.9; }
.op-legal .hero-date { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 11px; }
.op-legal .highlights-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-bottom: 32px; }
.op-legal .highlight-card { display: flex; flex-direction: column; align-items: start; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.op-legal .highlight-card .highlight-icon { margin-bottom: 8px; }
.op-legal .highlight-title { color: var(--ink); font-size: 15px; font-weight: 550; line-height: 1.5; letter-spacing: -.02em; }
.op-legal .highlight-desc { color: var(--muted); font-size: 12px; line-height: 1.8; }
.op-legal .highlight-card h3 { font-size: 16px; margin-block: 16px 12px; }
.op-legal .highlight-card p { font-size: 12px; color: var(--muted); line-height: 1.8; }
.op-legal .highlight-icon { width: 44px; height: 44px; padding: 12px; display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--tint); border-radius: 12px; }
.op-legal .section-card { padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 24px; overflow-wrap: anywhere; }
.op-legal .section-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.op-legal .section-num { min-width: 38px; height: 38px; display: grid; place-items: center; padding: 8px; border-radius: 9px; background: var(--raised); color: var(--accent); font-size: 12px; }
.op-legal .section-title { font-size: 22px; }
.op-legal .section-content { font-size: 13px; color: var(--muted); line-height: 1.9; }
.op-legal .section-content p { margin-bottom: 16px; }
.op-legal .section-content strong { color: var(--ink); font-weight: 600; }
.op-legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.op-legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.op-legal :is(.contact-box,.contact-card,.info-box) { background: var(--raised); border: 1px solid var(--line); padding: 24px; border-radius: 10px; margin-top: 20px; }
.openpix-app .error-page-card { background: var(--surface); border: 1px solid var(--line); box-shadow: none; padding: 40px; }
.openpix-app .error-title-huge { color: var(--accent); -webkit-text-fill-color: currentColor; background: none; }
.openpix-app .error-headline { color: var(--ink); }
.openpix-app .error-description { color: var(--muted); }
.openpix-app .error-btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: none; border-color: var(--accent); padding: 12px 20px; }
.openpix-app .error-btn-secondary { color: var(--ink); background: var(--raised); border-color: var(--line); padding: 12px 20px; }
.op-legal svg { max-width: 24px; max-height: 24px; }
.openpix-app :is(.guide-formula-box,.campaign-seo-card,.detail-image-box,.obfuscated-prompt-box,.detail-action-bar,.bento-compact-tile) { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: none; }
.openpix-app .detail-action-bar { padding: 20px; gap: 12px; }
.openpix-app .bento-masonry-grid { column-count: auto; column-width: 280px; column-gap: 20px; }
.openpix-app :is(.bento-action-bar,.card-meta-bar) { background: var(--surface); border-color: var(--line); padding: 12px; gap: 8px; flex-wrap: wrap; }
.openpix-app :is(.bento-like-group,.bento-download-group) { gap: 6px; }
.openpix-app :is(.btn-vote-icon,.btn-favorite-icon) { width: 44px; height: 44px; flex-shrink: 0; padding: 11px; color: var(--muted); background: var(--raised); border-color: var(--line); border-radius: 10px; box-shadow: none; }
.openpix-app :is(.btn-vote-icon,.btn-favorite-icon):hover, .openpix-app .btn-vote-icon.upvoted, .openpix-app .btn-favorite-icon.is-favorited { background: var(--tint); color: var(--accent); border-color: var(--accent); }
.openpix-app :is(.vote-counter-text,.download-counter-text) { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.openpix-app .filter-chip-btn { min-height: 44px; padding: 10px 16px; background: var(--raised); color: var(--muted); border-color: var(--line); box-shadow: none; }
.openpix-app .filter-chip-btn:hover, .openpix-app .filter-chip-btn.active { background: var(--tint); color: var(--accent); border-color: var(--accent); box-shadow: none; }
.openpix-app #btnOpenSourcePicker { width: 44px; height: 44px; padding: 12px; flex-shrink: 0; color: var(--on-accent); }
@media (max-width: 640px) { .op-legal .highlights-grid { grid-template-columns: 1fr; } .op-legal .section-card { padding: 24px 20px; } .op-legal .section-header { align-items: start; gap: 12px; } .op-legal .section-title { font-size: 20px; } .op-legal .hero { padding-top: 8px; } }
@media (max-width: 1200px) { .op-login-layout { gap: 32px; padding-inline: 0; } .op-login-panel { padding: 28px; } }
@media (max-width: 760px) { .op-login-layout { grid-template-columns: 1fr; gap: 32px; padding-top: 16px; } .op-login-story { gap: 20px; } .op-login-benefits { display: none; } .op-login-images { display: none; } .op-login-panel { padding: 28px 24px; } .op-profile-heading { padding: 24px !important; } }
@media (min-width: 961px) { .op-sidebar .op-nav-link { display: flex; } .op-sidebar .op-nav-label { display: block; } }
@media (max-width: 1200px) { .op-account-name { display: none; } .op-creator-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .op-roulette-copy { display: flex; } }
@media (max-width: 960px) {
  .op-app-shell { display: flex; flex-direction: column; }
  .op-page-shell { border-left: 0; }
  .op-mobile-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--line); }
  .op-mobile-nav a, .op-mobile-nav button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 11px; }
  .op-mobile-nav .is-active { background: var(--raised); color: var(--ink); }
  .op-sidebar { position: fixed; z-index: 1050; inset: 0 auto 0 0; width: min(330px,calc(100% - 32px)); min-height: 100dvh; max-height: 100dvh; padding: 16px; background: var(--page); border-right: 1px solid var(--line); transform: translateX(-105%); visibility: hidden; transition: transform .22s,visibility .22s; overflow-y: auto; display: flex; gap: 12px; }
  .op-sidebar nav { display: flex; flex-direction: column; gap: 2px; }
  .op-sidebar .op-nav-link { display: flex; justify-content: start; font-size: 12px; padding: 8px 12px; }
  .op-sidebar .op-nav-label { display: block; }
  .op-sidebar-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 23px; font-weight: 650; }
  .op-menu-open { overflow: hidden; }
  .op-menu-open .op-sidebar { transform: none; visibility: visible; }
  .op-nav-backdrop:not([hidden]) { display: block; position: fixed; z-index: 1040; inset: 0; padding: 16px; background: #0008; backdrop-filter: blur(5px); border: 0; width: 100%; height: 100%; }
  .op-footer { margin-inline: 24px; }
}
@media (max-width: 640px) {
  .op-header .op-account { order: 1; margin-left: auto; }
  .op-header .op-theme { order: 2; }
  .op-header .op-language-picker { order: 3; }
  .op-mobile-nav { padding: 12px 16px; gap: 4px; }
  .op-mobile-nav a, .op-mobile-nav button { flex-direction: column; font-size: 9px; gap: 6px; padding: 10px 8px; }
  .op-mobile-nav .op-icon { width: 18px; height: 18px; }
  .op-main { padding: 20px 16px 32px; }
  .op-footer { margin-inline: 16px; padding: 24px 0; }
  .op-footer-main { gap: 12px 20px; }
  .op-main h1 { font-size: 34px; }
  .op-main .bento-card { padding: 20px; }
  .op-page-heading { flex-direction: column; align-items: start; gap: 16px; margin-bottom: 24px; }
  .op-page-heading p { font-size: 12px; }
  .op-prompt-box .prompt-textarea { font-size: 16px; min-height: 112px; }
  .op-fields { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
  .op-field .prompt-pill-btn { max-width: 100%; width: 100%; }
  .op-field .prompt-dropdown-wrapper { width: 100%; }
  .op-studio .prompt-dropdown-menu { min-width: min(210px,calc(100vw - 64px)); }
  .op-studio #style-dropdown-menu { left: 0; right: auto; }
  .op-studio #ratio-dropdown-menu { left: auto; right: 0; }
  .op-studio #btn-generate { width: 100%; }
  .op-options summary { min-height: 44px; }
  .op-style-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .op-creator-list { grid-template-columns: 1fr; }
  .op-hero-empty { padding: 28px 24px; min-height: 350px; }
  .openpix-app .modal-dialog { margin: 16px; }
  .openpix-app .modal-body { padding: 20px; }
}
@media (max-width: 360px) {
  .op-header .op-theme button > span { display: none; }
  .op-header .op-theme button { width: 44px; padding: 12px; }
  .op-header .op-login { font-size: 10px; padding: 10px 12px; gap: 8px; }
}

/* Campaigns: image and controls each have their own readable surface. */
.op-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; margin-bottom: 28px; }
.op-breadcrumb a { min-height: 44px; display: inline-flex; align-items: center; }
.op-breadcrumb .op-icon { width: 13px; height: 13px; transform: rotate(-90deg); }
.op-label { display: inline-flex; align-items: center; gap: 8px; align-self: start; padding: 7px 12px; color: var(--accent); background: var(--tint); border: 1px solid var(--line); border-radius: 7px; font-size: 10px; font-weight: 550; line-height: 1.6; }
.op-campaign-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.op-campaign-tile { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; transition: border-color .18s; }
.op-campaign-tile:hover { border-color: var(--accent); color: var(--ink); }
.op-campaign-tile-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--raised); }
.op-campaign-tile-media img { width: 100%; height: 100%; object-fit: cover; }
.op-campaign-tile-media:not(:has(img)) .op-media-fallback, .op-campaign-picture:not(:has(img)) .op-media-fallback { display: flex; }
.op-campaign-tile-copy { display: flex; flex: 1; flex-direction: column; align-items: start; gap: 18px; padding: 24px; }
.op-campaign-tile-copy h2 { font-size: 23px; color: var(--ink); }
.op-campaign-tile-copy p { font-size: 13px; color: var(--muted); line-height: 1.8; }
.op-campaign-tile-copy .op-link { margin-top: auto; padding-top: 4px; color: var(--accent); }
.op-empty-panel { display: flex; flex-direction: column; align-items: start; gap: 24px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.campaign-page-wrapper { padding-top: 0 !important; }
.openpix-app .op-campaign-builder { max-width: none; margin: 0 0 48px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: none !important; isolation: isolate; }
.op-campaign-builder .wizard-backdrop-container { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; min-height: 590px; padding: 0; background: var(--surface); }
.op-campaign-visual { display: grid; grid-template-rows: minmax(350px,1fr) auto; min-width: 0; background: var(--raised); border-right: 1px solid var(--line); }
.op-campaign-picture { position: relative; min-height: 350px; overflow: hidden; }
.op-campaign-picture > img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.op-campaign-visual figcaption { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 24px; color: var(--muted); font-size: 11px; background: var(--surface); border-top: 1px solid var(--line); }
.op-campaign-builder .wizard-content-wrapper { width: 100%; max-width: none; min-width: 0; padding: 32px; margin: 0; color: var(--ink); }
.op-wizard-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--muted); }
.op-wizard-feedback { padding: 16px; margin-bottom: 24px; color: var(--accent); background: var(--tint); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.8; }
.op-wizard-feedback[data-kind="error"] { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.op-wizard-start { display: flex; flex-direction: column; align-items: start; gap: 24px; padding-block: 16px; }
.op-wizard-start h2 { font-size: 32px; }
.op-wizard-start > p { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 440px; }
.op-campaign-builder .wizard-step-card, .op-campaign-builder .wizard-loading-box, .op-campaign-builder .wizard-result-card { padding: 0 !important; background: transparent; border: 0; border-radius: 0 !important; backdrop-filter: none; box-shadow: none; }
.op-campaign-builder .wizard-question-title { color: var(--ink); text-align: left; font-size: 24px; font-weight: 560; line-height: 1.5; text-shadow: none; margin-bottom: 24px; }
.op-campaign-builder .wizard-options-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; max-height: none; padding: 0; overflow: visible; }
.op-campaign-builder #screen-step-4 .wizard-options-list { grid-template-columns: 1fr; }
.op-campaign-builder .wizard-option-btn { display: flex; align-items: center; gap: 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-height: 64px; text-align: left; font-size: 13px; font-weight: 450; line-height: 1.7; box-shadow: none; backdrop-filter: none; transform: none; }
.op-option-radio { display: grid; place-items: center; flex: 0 0 22px; height: 22px; padding: 3px; border: 1px solid var(--line); border-radius: 50%; color: transparent; }
.op-option-radio .op-icon { width: 14px; height: 14px; }
.selected .op-option-radio { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.op-campaign-builder .wizard-option-btn:hover, .op-campaign-builder .wizard-option-btn.selected { border-color: var(--accent); color: var(--accent); background: var(--tint); transform: none; box-shadow: none; }
.op-campaign-builder .wizard-back-btn { width: 44px; height: 44px; padding: 12px; background: var(--raised); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.op-campaign-builder .wizard-back-btn:hover { background: var(--tint); color: var(--accent); border-color: var(--accent); transform: none; }
.op-campaign-builder .text-white { color: var(--ink) !important; }
.op-campaign-builder .text-white-50 { color: var(--muted) !important; }
.op-campaign-builder .wizard-review-list { display: flex; flex-direction: column; gap: 12px; max-height: none !important; overflow: visible !important; padding: 0 !important; margin: 24px 0 !important; }
.op-campaign-builder .wizard-review-item { display: flex; align-items: center; justify-content: space-between; background: var(--raised); padding: 16px !important; margin: 0 !important; border: 1px solid var(--line); border-radius: 10px; gap: 16px; }
.op-campaign-builder .wizard-review-item > div:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; }
.op-review-label { color: var(--muted); font-size: 11px; }
.wizard-review-item strong { font-weight: 550; font-size: 13px; line-height: 1.8; }
.op-review-help { color: var(--muted); font-size: 13px; line-height: 1.8; }
.op-review-actions { display: flex; gap: 12px; align-items: center; }
.op-review-actions .op-button { flex: 1; }
.op-review-actions .wizard-back-btn .op-icon { transform: rotate(90deg); }
.op-campaign-builder .btn-review-edit { background: var(--surface); color: var(--accent); border: 1px solid var(--line); border-radius: 24px; min-height: 44px; font-size: 11px !important; flex-shrink: 0; padding: 10px 14px !important; }
.op-campaign-builder .wizard-question-title:focus { outline: none; }
.op-campaign-builder .wizard-result-img { width: 100%; max-height: 560px; object-fit: contain; background: var(--raised); border-radius: 12px; }
.op-campaign-builder .wizard-result-actions { padding: 20px 0 0; gap: 12px; flex-wrap: wrap; background: transparent; }
.op-campaign-builder :is(.wizard-btn-restart,.wizard-btn-share,.wizard-btn-download) { min-height: 44px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--raised); color: var(--ink); font-size: 12px; box-shadow: none; transform: none; }
.op-campaign-builder .wizard-btn-download { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.op-campaign-builder[data-state="result"] .wizard-backdrop-container { grid-template-columns: 1fr; }
.op-campaign-builder[data-state="result"] .op-campaign-visual { display: none; }
.op-campaign-builder[data-state="result"] .wizard-content-wrapper { max-width: 850px; margin: 0 auto; }
.openpix-app :is(.campaign-seo-pill,.campaign-preset-quote-item) { background: var(--raised); color: var(--ink); border-color: var(--line); padding: 8px 12px; font-weight: 450; }

/* Gallery: sorting, collections and image actions remain separate at every width. */
.op-gallery-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.op-gallery-filter-toggle { display: flex; align-items: center; gap: 16px; min-height: 46px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-align: left; font-size: 12px; }
.op-gallery-filter-toggle:hover, .op-gallery-filter-toggle[aria-expanded="true"] { border-color: var(--accent); }
.op-filter-label { color: var(--muted); font-size: 11px; }
.op-filter-value { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.op-filter-value .op-icon { width: 14px; height: 14px; }
.op-filter-menu { min-width: 230px; max-height: min(440px,65dvh); overflow-y: auto; }
.op-filter-menu .dropdown-item { display: flex; gap: 12px; align-items: center; min-height: 44px; padding: 12px 16px; font-size: 12px; }
.op-filter-menu .op-icon { width: 16px; height: 16px; }
.op-filter-menu .op-icon:last-child:not(:first-child) { margin-left: auto; }
.op-filter-menu [aria-current="page"] { background: var(--tint); color: var(--accent); }
.op-gallery-toolbar > .op-result-count { margin-left: auto; }
.op-gallery-toolbar > .op-filter-reset { padding: 10px 12px; }
.op-result-count { color: var(--muted); font-size: 11px; font-weight: 400; }
.op-filter-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; min-height: 44px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--muted); font-size: 12px; transition: border-color .18s,background .18s; }
.op-filter-chip:hover { color: var(--ink); border-color: var(--accent); background: var(--raised); }
.op-filter-chip.is-active { color: var(--accent); border-color: var(--accent); background: var(--tint); }
.op-filter-chip .op-icon { width: 16px; height: 16px; }
.op-filter-reset { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); font-size: 11px; }
.op-filter-reset:hover { color: var(--accent); }
.op-filter-reset .op-icon { width: 15px; height: 15px; }
.openpix-app .op-image-actions { gap: 8px; padding: 12px; flex-wrap: wrap; }
.op-image-action-group { display: flex; flex-wrap: wrap; min-width: 0; gap: 4px; align-items: center; }
.op-image-actions-right { margin-left: auto; gap: 8px; }
.openpix-app .op-image-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px !important; width: auto; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 9px; flex-shrink: 0; box-shadow: none; }
.op-image-action .op-icon { width: 18px; height: 18px; }
.openpix-app .op-image-action :is(.vote-counter-text,.download-counter-text) { color: inherit; min-width: 0; font-size: 11px; font-weight: 500; }
/* Zero counts read as empty social proof, so only the icon stays until someone interacts. */
.openpix-app :is(.vote-counter-text,.download-counter-text):empty { display: none; }
.openpix-app .op-image-action:hover, .openpix-app .op-image-action:is(.upvoted,.is-favorited) { background: var(--tint); color: var(--accent); border-color: var(--accent); transform: none; box-shadow: none; }

/* Games use a single list on mobile so every game and its state can be read. */
.op-games-facts { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 32px; color: var(--muted); font-size: 12px; }
.op-games-facts > span { display: inline-flex; align-items: center; gap: 10px; }
.op-games-facts .op-icon { width: 17px; height: 17px; color: var(--accent); }
.op-games-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-bottom: 48px; }
.op-game-tile { display: flex; flex-direction: column; gap: 26px; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-game-tile-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.op-status-label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 7px; background: var(--raised); color: var(--muted); font-size: 10px; }
.op-status-label.is-live { background: var(--tint); color: var(--accent); }
.op-status-label > .op-icon { width: 14px; height: 14px; }
.op-status-dot { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.op-game-tile-heading { display: flex; flex-direction: column; gap: 14px; }
.op-game-tile h2 { font-size: 27px; }
.op-game-tile-heading > p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.op-game-rules summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 0; color: var(--muted); font-size: 11px; cursor: pointer; list-style: none; }
.op-game-rules summary::-webkit-details-marker { display: none; }
.op-game-rules summary > .op-icon { width: 16px; height: 16px; }
.op-game-rules summary > .op-icon:last-child { margin-left: auto; }
.op-rule-hide, .op-game-rules[open] .op-rule-show { display: none; }
.op-game-rules[open] .op-rule-hide { display: inline; }
.op-game-rules[open] summary > .op-icon:last-child { transform: rotate(180deg); }
.op-game-rules p { margin-top: 12px; font-size: 12px; line-height: 1.9; color: var(--muted); }
.op-game-features { display: flex; flex-direction: column; gap: 18px; list-style: none; padding: 0; margin: 0 0 8px; }
.op-game-features li { display: flex; align-items: start; gap: 10px; font-size: 12px; line-height: 1.8; }
.op-game-features .op-icon { margin-top: 3px; width: 16px; height: 16px; color: var(--accent); }
.op-game-tile > :is(.op-button,.op-upcoming-action) { width: 100%; margin-top: auto; justify-content: space-between; }
.op-upcoming-action { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 24px; color: var(--muted); background: var(--raised); font-size: 11px; }

/* All dialogs share theme surfaces, type, buttons and a clearly visible close control. */
.openpix-app .modal .modal-content { color: var(--ink); background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: var(--shadow); max-height: calc(100dvh - 48px); }
.openpix-app .modal .modal-body { background: transparent; padding: 24px !important; overflow-y: auto; }
.openpix-app .modal :is(.opacity-75,.opacity-50) { opacity: 1 !important; }
.openpix-app .modal .modal-header, .openpix-app .modal .modal-footer { gap: 16px; background: transparent; border-color: var(--line); }
.openpix-app .modal .modal-title { display: flex; align-items: center; gap: 12px; color: var(--ink); font-size: 19px !important; line-height: 1.5; }
.openpix-app .modal .text-white, .openpix-app .modal [class~="text-white/80"] { color: var(--ink) !important; }
.openpix-app .modal .text-white-50 { color: var(--muted) !important; }
.openpix-app .modal .btn-light, .openpix-app .modal .btn-outline-light { color: var(--ink) !important; background: var(--raised); border-color: var(--line); }
.openpix-app .modal .btn-primary, .openpix-app .modal .op-primary { color: var(--on-accent) !important; background: var(--accent); border-color: var(--accent); }
.openpix-app .modal .btn-close { opacity: 1; filter: none !important; border-radius: 50%; background-color: var(--raised); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M6 18 18 6'/%3E%3C/svg%3E"); background-size: 16px; background-position: center; background-repeat: no-repeat; flex-shrink: 0; }
.openpix-app .modal .btn-close:hover { outline: 1px solid var(--accent); }
.openpix-app .modal :is(.ai-info-card-item,.ai-info-card-item:hover) { background: var(--raised); color: var(--ink); border-color: var(--line); padding: 20px; box-shadow: none; }
.openpix-app .modal :is(.ai-info-icon-badge,.ai-info-icon-box,.ai-info-pill) { color: var(--accent); background: var(--tint); box-shadow: none; }
.openpix-app .modal .ai-info-pill { padding: 7px 12px; }
.openpix-app .op-auth-provider { min-height: 48px; color: var(--ink) !important; background: var(--surface) !important; border: 1px solid var(--line) !important; font-size: 12px; }
.openpix-app .op-auth-provider:hover { background: var(--raised) !important; border-color: var(--accent) !important; }
.openpix-app .modal :is(.btn-outline-info,.btn-link) { color: var(--accent); }
.openpix-app .modal .form-check { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; }
.openpix-app .modal .form-check-input { margin: 0; flex-shrink: 0; }
.openpix-app .modal .form-check-label { flex: 1; cursor: pointer; }
.openpix-app .modal .lightbox-img { max-height: 78dvh; }
.openpix-app .modal .lightbox-content .modal-body { padding: 64px 24px 24px !important; }
.openpix-app #avatarSourceModal .modal-title { padding-right: 40px; }
.openpix-app .op-style-modal .modal-header { align-items: start; padding: 28px; }
.op-style-modal-heading { display: flex; align-items: start; gap: 16px; }
.op-style-modal-heading > div { display: flex; flex-direction: column; gap: 8px; }
.op-style-modal-heading p { color: var(--muted); font-size: 12px; line-height: 1.8; }
.openpix-app .op-style-modal .style-modal-body { display: flex; flex-direction: column; gap: 28px; max-height: none; padding: 28px !important; scrollbar-color: var(--line) var(--surface); }
.op-style-family { display: flex; flex-direction: column; gap: 16px; }
.op-style-family > h3 { color: var(--muted); font-size: 12px; font-weight: 550; letter-spacing: .04em; }
.op-style-modal .modal-dialog { max-width: 1080px; }
.op-style-picker-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.openpix-app .op-style-choice { display: flex; flex-direction: column; justify-content: start; gap: 10px; padding: 16px; min-height: 110px; height: 100%; aspect-ratio: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: none; text-align: left; transform: none; }
.op-style-choice-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; }
.op-style-selected { visibility: hidden; color: var(--accent); }
[aria-pressed="true"] > .op-style-selected, [aria-pressed="true"] .op-style-choice-top > .op-style-selected { visibility: visible; }
.openpix-app .op-style-choice:is(:hover,.active) { background: var(--tint); border-color: var(--accent); box-shadow: none; transform: none; }
.op-style-modal .style-card-title { margin: 0; width: 100%; white-space: normal; font-size: 14px; line-height: 1.6; overflow: visible; }
.op-style-modal .style-card-desc { display: -webkit-box; -webkit-box-orient: vertical; color: var(--muted); font-size: 11px; line-height: 1.8; overflow: hidden; -webkit-line-clamp: 2; }
.openpix-app .op-style-reset { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; width: auto; height: auto; aspect-ratio: auto; padding: 12px 16px; border-radius: 24px; background: var(--raised); color: var(--ink); min-height: 46px; }
.op-style-modal .modal-header > .op-icon-button { margin-left: auto; }
.op-style-reset .style-card-text { color: inherit; font-size: 12px; }
.openpix-app .op-style-modal .modal-footer { justify-content: space-between; padding: 20px 28px; }

.openpix-app .btn-primary:hover, .openpix-app .op-primary:hover { background: color-mix(in srgb,var(--accent),var(--ink) 12%); color: var(--on-accent); border-color: var(--accent); }

@media (max-width: 1200px) { .op-campaign-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .op-games-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .op-game-tile:last-child { grid-column: 1 / -1; } .op-campaign-builder .wizard-backdrop-container { grid-template-columns: .8fr 1.2fr; } .op-campaign-builder .wizard-content-wrapper { padding: 28px; } }
@media (max-width: 760px) { .op-campaign-builder .wizard-backdrop-container { grid-template-columns: 1fr; min-height: 0; } .op-campaign-visual { grid-template-rows: 220px auto; border-right: 0; border-bottom: 1px solid var(--line); } .op-campaign-picture { min-height: 0; } .op-campaign-visual figcaption { padding: 20px; } .op-campaign-builder .wizard-content-wrapper { padding: 24px; } .op-wizard-start h2 { font-size: 28px; } .op-games-grid { grid-template-columns: 1fr; } .op-game-tile:last-child { grid-column: auto; } .op-style-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .op-campaign-list { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .op-campaign-builder .wizard-content-wrapper { padding: 24px 20px; } .op-campaign-builder .wizard-options-list { grid-template-columns: 1fr; } .op-campaign-builder .wizard-question-title { font-size: 22px; } .op-game-tile { padding: 24px; } .op-campaign-tile-copy { padding: 24px; } .op-games-facts { gap: 16px; } .openpix-app .op-style-modal .modal-header, .openpix-app .op-style-modal .style-modal-body { padding: 24px 20px !important; } .openpix-app .op-style-modal .modal-footer { padding: 20px; } .op-style-modal-heading > .op-icon-tile { display: none; } .op-style-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .openpix-app .op-style-choice { min-height: 0; }}

/* Compact supporting content and shared control states. */
.openpix-app .modal .btn-link:not(.text-danger) { color: var(--accent) !important; }
.openpix-app .cloud-export-connection-banner { background: var(--raised); color: var(--ink); border: 1px solid var(--line); padding: 16px; border-radius: 10px; }
.op-style-choice-top { gap: 8px; justify-content: start; }
.op-style-choice-top > .op-icon { width: 20px; height: 20px; }
.op-style-choice-top .op-style-selected { margin-left: auto; width: 14px; height: 14px; }
.openpix-app .op-style-modal .style-modal-body { gap: 20px; }
.op-style-family { gap: 12px; }
.op-style-modal .style-card-title { font-size: 12px; }
.op-campaign-guide { display: flex; flex-direction: column; gap: 32px; padding-block: 24px 48px; }
.op-help-heading { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.op-help-heading p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.op-help-steps { display: grid; grid-template-columns: repeat(var(--help-columns, 4),minmax(0,1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.op-help-step { display: flex; flex-direction: column; align-items: start; gap: 18px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.op-help-step-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding-bottom: 8px; }
.op-help-number { color: var(--muted); font-size: 36px; line-height: 1; letter-spacing: -.06em; font-weight: 500; font-variant-numeric: tabular-nums; }
.op-help-step-top > .op-icon { width: 28px; height: 28px; color: var(--accent); }
.op-help-step h3 { font-size: 17px; line-height: 1.5; letter-spacing: -.025em; }
.op-help-step > p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.op-help-examples { width: 100%; padding-top: 20px; margin-top: auto; border-top: 1px solid var(--line); }
.op-help-example-label { font-size: 10px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.op-help-examples ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 14px 0 0; margin: 0; }
.op-help-examples li { display: flex; align-items: start; gap: 8px; min-width: 0; padding: 12px; background: var(--raised); border-radius: 8px; color: var(--ink); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.op-help-examples li > .op-icon { color: var(--accent); width: 14px; height: 14px; margin-top: 2px; }
.op-help-quotes li { background: var(--tint); padding: 12px; }
.op-quote-mark { font-family: Georgia, serif; font-size: 30px; line-height: 1; color: var(--accent); }
.op-help-faq { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); align-items: start; gap: 48px; padding: 40px; margin-top: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.op-help-faq > .op-help-heading { gap: 18px; padding-block: 8px; }
.op-faq-emblem { display: grid; place-items: center; width: 64px; height: 64px; padding: 16px; margin-bottom: 8px; background: var(--tint); color: var(--accent); border: 1px solid var(--line); border-radius: 20px; transform: rotate(-6deg); }
.op-faq-emblem > .op-icon { width: 30px; height: 30px; }
.op-help-faq .op-help-heading h2 { font-size: clamp(25px,2.5vw,34px); max-width: 340px; }
.op-help-faq .op-link { align-self: start; }
.op-help-faq-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.op-help-faq-list details { padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
.op-help-faq-list details[open] { border-color: var(--accent); background: var(--tint); }
.op-help-faq-list summary { display: flex; align-items: center; gap: 14px; cursor: pointer; min-height: 44px; font-size: 13px; font-weight: 550; line-height: 1.8; list-style: none; }
.op-help-faq-list summary::-webkit-details-marker { display: none; }
.op-faq-number { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.op-faq-toggle { display: grid; place-items: center; flex: 0 0 32px; height: 32px; padding: 8px; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--surface); }
.op-faq-toggle > .op-icon { width: 14px; height: 14px; transform: rotate(45deg); }
details[open] .op-faq-toggle { color: var(--accent); }
details[open] .op-faq-toggle > .op-icon { transform: rotate(0); }
.op-help-faq-list p { color: var(--muted); font-size: 13px; line-height: 1.9; padding: 16px 0 8px 28px; }
.op-explainer, .op-gallery-guide { display: flex; flex-direction: column; gap: 28px; }
.op-gallery-guide { padding-block: 20px 40px; gap: 40px; }
.op-explainer-grid { display: grid; grid-template-columns: repeat(var(--help-columns,3),minmax(0,1fr)); gap: 16px; }
.op-explainer-body { display: flex; flex-direction: column; gap: 14px; }
.op-explainer-body p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.op-explainer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.op-explainer-rows .op-explainer-grid { grid-template-columns: 1fr; }
.op-explainer-rows .op-help-step { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); grid-template-rows: min-content 1fr; gap: 16px 40px; padding: 28px; }
.op-explainer-rows .op-help-step-top { grid-column: 1; }
.op-explainer-rows .op-help-step h3 { grid-column: 1; align-self: start; }
.op-explainer-rows .op-explainer-body { grid-column: 2; grid-row: 1 / 3; }

/* Discovery pages share cards, reading widths and quiet metadata. */
.op-creators-page, .op-guides-page { display: flex; flex-direction: column; gap: 32px; padding-block: 20px 40px; }
.op-creators-page .op-page-heading, .op-guides-page .op-page-heading, .op-creators-page .op-breadcrumb { margin: 0; }
.op-creators-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.op-creator-card { display: flex; flex-direction: column; gap: 22px; min-width: 0; padding: 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; transition: border-color .2s,background .2s; }
.op-creator-card:hover { color: var(--ink); border-color: var(--accent); background: var(--raised); }
.op-creator-card-identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.op-creator-card-identity > div { min-width: 0; }
.op-creator-card-identity h2 { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.op-creator-card-identity p { margin-top: 5px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.op-creator-card-avatar { display: grid; place-items: center; flex: 0 0 60px; width: 60px; height: 60px; border-radius: 18px; object-fit: cover; background: var(--tint); color: var(--accent); font-size: 23px; }
.op-creator-card-bio { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: 13px; line-height: 1.9; }
.op-creator-card-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: auto; font-size: 11px; color: var(--muted); }
.op-creator-card-stats > span { display: inline-flex; align-items: center; gap: 8px; }
.op-creator-card-stats .op-icon { width: 16px; height: 16px; color: var(--accent); }
.op-creator-card-action, .op-guide-card-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--accent); font-size: 12px; font-weight: 550; }
/* Creator cards lead with the creator's latest public works. */
.op-creator-card.has-works { overflow: hidden; }
.op-creator-card-works { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0,1fr)); gap: 3px; height: 190px; margin: -24px -24px 0; background: var(--line); }
.op-creator-card-works img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.op-creator-card-works img:first-child { grid-row: span 2; }
.op-creator-card-works img:only-child { grid-column: span 2; }
.op-creator-card-works img:nth-child(2):last-child { grid-row: span 2; }
.op-creator-invite, .op-guide-cta { display: flex; flex-direction: column; align-items: start; gap: 24px; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-creator-invite > p { max-width: 700px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.op-creator-pagination:empty { display: none; }
.op-wallpaper-hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; gap: 40px; padding: 36px; margin-bottom: 32px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); overflow: hidden; }
.op-wallpaper-hero-copy { display: flex; flex-direction: column; align-items: start; gap: 22px; }
.op-wallpaper-hero h1 { font-size: clamp(30px,3.3vw,44px); line-height: 1.2; letter-spacing: -.045em; }
.op-wallpaper-hero-copy > p { color: var(--muted); font-size: 14px; line-height: 1.9; }
.op-wallpaper-facts { display: flex; flex-wrap: wrap; gap: 16px 24px; padding-block: 4px; color: var(--muted); font-size: 11px; }
.op-wallpaper-facts > span { display: inline-flex; align-items: center; gap: 8px; }
.op-wallpaper-facts .op-icon { width: 17px; height: 17px; color: var(--accent); }
.op-wallpaper-hero-art { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 20px 12px; }
.op-wallpaper-hero-art > span { flex: 0 1 145px; min-width: 0; aspect-ratio: 9 / 16; padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); box-shadow: var(--shadow); transform: rotate(-9deg); }
.op-wallpaper-hero-art > span + span { margin-left: -52px; transform: translateY(-16px); }
.op-wallpaper-hero-art > span:last-child { transform: rotate(9deg); }
.op-wallpaper-hero-art img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.op-wallpaper-category-header { padding: 28px; margin-block: 24px 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-wallpaper-category-header .op-page-heading { margin: 0; gap: 28px; align-items: center; }
.op-wallpaper-category-header .op-page-heading > a { flex-shrink: 0; }
.wallpaper-hub-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.openpix-app .wallpaper-card { min-width: 0; background: var(--surface); border-color: var(--line); box-shadow: none; }
.openpix-app .wallpaper-card:hover { border-color: var(--accent); box-shadow: none; }
.wallpaper-card-title { min-width: 0; font-size: 14px; gap: 8px; }
.wallpaper-card-title .op-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.wallpaper-card-title > span { min-width: 0; }
.wallpaper-card-count { font-size: 11px; }
.op-guides-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.op-guide-card { display: flex; flex-direction: column; align-items: start; gap: 22px; min-width: 0; padding: 32px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 20px; transition: border-color .2s,background .2s; }
.op-guide-card:hover { color: var(--ink); border-color: var(--accent); background: var(--raised); }
.op-guide-card h2 { font-size: clamp(23px,2vw,29px); line-height: 1.35; letter-spacing: -.035em; }
.op-guide-card > p { font-size: 13px; line-height: 1.9; color: var(--muted); }
.op-guide-card-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; width: 100%; padding-bottom: 8px; }
.op-guide-read-time { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.op-guide-read-time .op-icon { width: 15px; height: 15px; }
.op-guide-card-action { width: 100%; margin-top: auto; }
.op-guide-article { padding-block: 24px 40px; }
.op-guide-reading { max-width: 860px; margin-inline: auto; }
.op-guide-article .guide-article-header { display: flex; flex-direction: column; gap: 24px; padding-block: 16px 32px; border-bottom: 1px solid var(--line); }
.op-guide-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.op-guide-article .guide-article-title { font-size: clamp(30px,3.5vw,44px); line-height: 1.22; font-weight: 550; letter-spacing: -.045em; }
.op-guide-article .guide-article-lead { font-size: 16px; line-height: 1.9; color: var(--muted); }
.op-guide-article .guide-content-body { display: flex; flex-direction: column; gap: 40px; font-size: 15px; line-height: 1.9; }
.op-guide-article .guide-section { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.op-guide-article .guide-section-title { display: flex; align-items: center; gap: 12px; font-size: 23px; line-height: 1.45; font-weight: 550; letter-spacing: -.025em; }
.op-guide-article .guide-section-title > svg { flex: 0 0 24px; color: var(--accent); }
.op-guide-article .guide-section > p { color: var(--muted); }
.op-guide-article .guide-formula-box, .op-guide-callout { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-guide-article .guide-formula-box { background: var(--tint); }
.op-guide-callout-title { margin-bottom: 16px; font-size: 17px; font-weight: 550; }
.op-guide-article code { white-space: normal; overflow-wrap: anywhere; font-size: 13px; line-height: 1.9; }
.op-guide-article .guide-feature-list { display: flex; flex-direction: column; gap: 18px; padding-left: 22px; }
.op-guide-article .guide-feature-list li { margin: 0; padding-left: 6px; }
.op-guide-callout ul { padding-left: 22px; }
.op-guide-callout li + li { margin-top: 16px; }
.op-guide-table-wrap { padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-guide-article .guide-table { min-width: 580px; margin-bottom: 0; font-size: 13px; border-radius: 0; }
.op-guide-article .guide-table :is(th,td) { padding: 16px; line-height: 1.9; border-width: 0 0 1px; }
.op-guide-article .guide-table th { font-weight: 550; color: var(--ink); }
.op-guide-article .guide-table tr:last-child td { border-bottom: 0; }
.op-prompt-example { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-prompt-example.is-refined { border-color: var(--accent); background: var(--tint); }
.op-prompt-example-label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 550; }
.is-refined .op-prompt-example-label { color: var(--accent); }
.op-prompt-example-label .op-icon { flex: 0 0 16px; width: 16px; height: 16px; }
.op-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; width: 100%; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.op-pagination-summary { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.op-pagination-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; }
.op-pagination-pages { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; list-style: none; }
.op-pagination-number, .op-pagination-direction, .op-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--page); font-size: 12px; font-variant-numeric: tabular-nums; }
.op-pagination-number:hover, .op-pagination-direction:hover { border-color: var(--accent); color: var(--accent); background: var(--tint); }
.op-pagination-number.is-current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.op-pagination-direction.is-disabled { color: var(--muted); opacity: .45; }
.op-pagination-direction .op-icon { width: 16px; height: 16px; }
.op-arrow-back { transform: rotate(180deg); }
.op-pagination-ellipsis { min-width: 24px; padding-inline: 0; border: 0; background: transparent; color: var(--muted); }
.op-pagination-position { display: none; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.op-load-more { display: flex; align-items: center; justify-content: center; gap: 20px; padding: 24px; margin-bottom: 32px; }
.op-load-more::before, .op-load-more::after { content: ''; flex: 1; max-width: 180px; height: 1px; background: var(--line); }
.openpix-app .op-load-more-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 14px 24px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--surface); font-size: 12px; font-weight: 550; }
.openpix-app .op-load-more-button:hover { border-color: var(--accent); background: var(--tint); color: var(--accent); }
.op-load-more-button .op-icon { width: 17px; height: 17px; transform: rotate(90deg); }
.op-load-more-button[aria-busy=true] .op-icon { display: none; }
@media (max-width: 1200px) {
 .op-creators-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .wallpaper-hub-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .op-wallpaper-hero { gap: 24px; padding: 28px; }
 .op-wallpaper-category-header .op-page-heading { align-items: start; flex-direction: column; }
 .op-pagination { justify-content: center; }
}
@media (max-width: 760px) {
 .op-creators-grid, .op-guides-grid { grid-template-columns: 1fr; }
 .wallpaper-hub-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .op-creator-card, .op-guide-card, .op-guide-cta, .op-creator-invite { padding: 24px; }
 .op-wallpaper-hero { grid-template-columns: 1fr; padding: 24px 20px; }
 .op-wallpaper-hero-art { display: none; }
 .op-wallpaper-category-header { padding: 24px 20px; }
 .op-guide-article .guide-article-lead { font-size: 15px; }
 .op-guide-article .guide-section-title { align-items: start; font-size: 21px; }
 .op-guide-article .guide-section-title > svg { margin-top: 3px; }
 .op-guide-article .guide-content-body { font-size: 14px; gap: 32px; }
 .op-guide-article .guide-formula-box, .op-guide-callout, .op-prompt-example { padding: 20px; }
 .op-pagination { flex-direction: column; padding: 20px 16px; gap: 16px; }
 .op-pagination-controls { justify-content: space-between; flex-wrap: nowrap; gap: 12px; width: 100%; }
 .op-pagination-pages { display: none; }
 .op-pagination-position { display: inline; }
 .op-pagination-direction > span { display: none; }
 .op-load-more { padding: 16px 0; gap: 12px; }
 .openpix-app .op-load-more-button { padding: 14px 18px; }
}

/* Artwork stays fully visible; useful details live in separate, compact widgets. */
.op-image-detail { padding-block: 20px 40px; }
.op-detail-back-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 28px; font-size: 11px; }
.op-detail-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); align-items: start; gap: 28px; margin: 0; }
.op-detail-layout > div { width: 100%; min-width: 0; margin-top: 0; padding-inline: 0; }
.op-image-detail .detail-stage-card { padding: 16px; margin: 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: none; }
.op-image-detail .detail-image-box { height: clamp(420px,48vw,720px); max-height: none; border-radius: 12px; background: var(--page); }
.op-detail-image-trigger { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: zoom-in; }
.op-image-detail .detail-main-img { object-fit: contain; }
.op-image-detail .detail-image-box:hover .detail-main-img { transform: none; }
.op-image-detail .detail-badges-overlay { gap: 12px; right: 12px; bottom: 12px; }
.op-image-detail .btn-wallpaper-preview-pill, .op-image-detail .detail-tap-fullscreen-badge { min-height: 44px; padding: 12px 16px; gap: 8px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); background: var(--surface); backdrop-filter: none; }
.op-image-detail .detail-tap-fullscreen-badge { min-width: 44px; padding: 12px; pointer-events: auto; cursor: zoom-in; }
.op-detail-widgets { display: flex; flex-direction: column; gap: 24px; }
.op-detail-widget { display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-detail-widget h2 { font-size: 17px; line-height: 1.5; font-weight: 550; letter-spacing: -.02em; }
.op-detail-widget-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.op-detail-widget-heading h2 { display: flex; align-items: center; gap: 12px; margin: 0; }
.op-detail-widget-heading h2 .op-icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.op-image-detail .op-detail-copy { width: 44px; height: 44px; padding: 12px; background: var(--raised); color: var(--muted); border: 1px solid var(--line); border-radius: 12px; flex-shrink: 0; }
.op-image-detail .op-detail-copy:hover { color: var(--accent); border-color: var(--accent); }
.op-detail-copy > .op-icon { width: 18px; height: 18px; }
.op-detail-prompt-text { font-size: 14px; line-height: 1.9; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.op-detail-widget > .op-button { justify-content: center; text-align: center; width: 100%; gap: 12px; border-radius: 12px; line-height: 1.7; }
.op-detail-widget > .op-button > .op-icon { flex-shrink: 0; }
.op-detail-note { color: var(--muted); font-size: 12px; line-height: 1.9; }
.op-detail-enhanced { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); }
.op-detail-enhanced summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; font-size: 12px; font-weight: 550; cursor: pointer; list-style: none; }
.op-detail-enhanced summary::-webkit-details-marker { display: none; }
.op-detail-enhanced summary .op-icon { width: 14px; height: 14px; flex-shrink: 0; transform: rotate(90deg); }
.op-detail-enhanced[open] summary .op-icon { transform: rotate(-90deg); }
.op-detail-enhanced p { margin-top: 16px; font-size: 12px; line-height: 1.9; color: var(--muted); overflow-wrap: anywhere; }
.op-detail-enhanced .op-link { margin-top: 12px; font-size: 11px; }
.op-detail-copy-status { font-size: 11px; line-height: 1.8; color: var(--accent); }
.op-image-detail .detail-action-bar { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 20px 0 0; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.op-image-detail .op-image-actions { padding: 0; border: 0; background: transparent; }
.op-image-detail .detail-meta-group { align-self: end; }
.op-image-detail .detail-meta-group { justify-content: space-between; gap: 12px; }
.openpix-app .op-image-detail .btn-report-action { gap: 8px; min-height: 44px; padding: 10px 14px; color: var(--muted); background: var(--page); border-color: var(--line); font-size: 10px; }
.openpix-app .op-image-detail .btn-report-action:hover { color: var(--ink); border-color: var(--muted); }
/* Download: the whole card is the button. Votes, favourite and report follow as one slim bar. */
.openpix-app .op-detail-download-cta { display: flex; align-items: center; gap: 16px; width: 100%; padding: 14px 18px 14px 14px; border: 0; border-radius: 14px; background: var(--accent); color: var(--on-accent); text-align: left; box-shadow: 0 14px 28px -18px color-mix(in srgb, var(--accent) 90%, transparent); transition: transform .2s, box-shadow .2s, filter .2s; }
.openpix-app .op-detail-download-cta:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 18px 32px -18px color-mix(in srgb, var(--accent) 90%, transparent); }
.op-detail-download-cta > .op-icon-tile { flex-shrink: 0; background: color-mix(in srgb, var(--on-accent) 16%, transparent); color: inherit; }
.op-detail-download-cta > .op-icon-tile .op-icon { width: 20px; height: 20px; }
.op-detail-download-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.op-detail-download-copy strong { font-size: 15px; font-weight: 600; line-height: 1.35; }
.op-detail-download-copy > span { font-size: 11.5px; line-height: 1.5; opacity: .8; font-variant-numeric: tabular-nums; }
.op-detail-download-count:has(.download-counter-text:empty) { display: none; }
.op-detail-download-cta > .op-icon:last-child { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s; }
.op-detail-download-cta:hover > .op-icon:last-child { transform: translateX(3px); }
.op-image-detail .op-detail-download { gap: 12px; padding: 0; border: 0; background: transparent; }
.op-image-detail .op-detail-reactions { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-image-detail .op-detail-reactions .op-image-actions { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; }
.op-image-detail .op-detail-reactions .op-image-actions-right { margin-left: 0; }
.op-image-detail .op-detail-reactions .detail-meta-group { margin-left: auto; align-self: center; }
.openpix-app .op-image-detail .op-detail-reactions .btn-report-action { gap: 6px; border-color: transparent; background: transparent; font-size: 11px; }
.openpix-app .op-image-detail .op-detail-reactions .btn-report-action .op-icon { width: 16px; height: 16px; }
.op-detail-specs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; }
.op-detail-specs > div { min-width: 0; padding: 16px; background: var(--page); border: 1px solid var(--line); border-radius: 12px; }
.op-detail-specs dt { margin-bottom: 12px; font-size: 10px; font-weight: 400; color: var(--muted); }
.op-detail-specs dd { margin: 0; font-size: 12px; font-weight: 550; line-height: 1.8; overflow-wrap: anywhere; }
.op-detail-specs dd a { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--accent); }
.op-detail-specs dd .op-icon { width: 14px; height: 14px; flex-shrink: 0; }
.op-detail-creator, .op-detail-winner { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--page); }
.op-detail-creator:hover, .op-detail-winner:hover { border-color: var(--accent); color: var(--ink); }
.op-detail-creator img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; }
.op-detail-creator > span:not(.op-icon-tile), .op-detail-winner > span:not(.op-icon-tile) { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
.op-detail-creator strong, .op-detail-winner strong { font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.op-detail-creator span span, .op-detail-winner span span { font-size: 10px; line-height: 1.8; color: var(--muted); overflow-wrap: anywhere; }
.op-detail-creator > .op-icon, .op-detail-winner > .op-icon { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.op-detail-palette { display: flex; flex-wrap: wrap; gap: 12px; }
.op-detail-swatch { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); color: var(--muted); font-size: 10px; }
.op-detail-swatch > span:first-child { display: block; width: 40px; height: 40px; border-radius: 10px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(128,128,128,.25); }
.op-detail-swatch:hover { border-color: var(--accent); color: var(--accent); }
.op-detail-license .op-eyebrow { display: flex; align-items: center; gap: 8px; line-height: 1.8; }
.op-detail-license .op-eyebrow .op-icon { width: 16px; height: 16px; flex-shrink: 0; }
.op-detail-license .op-link { align-self: start; font-size: 12px; }
.op-image-detail .surprise-prompt-card { padding: 20px; min-height: 0; }
.op-detail-related-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.op-detail-related-heading h4 { font-size: 22px; }
@media (max-width: 1200px) {
 .op-detail-layout { grid-template-columns: 1fr; }
 .op-image-detail .surprise-prompts-wrapper.d-none { display: none !important; }
 .op-image-detail .surprise-prompts-wrapper.d-lg-none { display: block !important; margin-top: 28px; }
 .op-image-detail .detail-image-box { height: clamp(360px,55vw,640px); }
}
@media (max-width: 760px) {
 .op-detail-widget { padding: 24px 20px; }
 .op-image-detail .detail-image-box { height: clamp(300px,100vw,540px); }
 .op-image-detail .detail-stage-card { padding: 12px; }
 .op-detail-specs > div { padding: 14px; }
 .op-image-detail .detail-meta-group { flex-wrap: wrap; }
 .op-image-detail .surprise-prompts-wrapper { padding-block: 12px; }
}

.op-surprise-widget { position: relative; display: flex; flex-direction: column; gap: 28px; padding: 28px; border: 1px solid var(--accent); border-radius: 22px; background: radial-gradient(ellipse at 0 0,var(--tint),transparent 65%),var(--surface); }
.op-surprise-header { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 24px; }
.op-surprise-copy { display: flex; flex-direction: column; gap: 12px; padding-right: 16px; }
.op-surprise-copy h2 { font-size: 25px; line-height: 1.3; letter-spacing: -.035em; }
.op-surprise-copy p { font-size: 12px; line-height: 1.9; color: var(--muted); }
.op-surprise-art { position: relative; display: grid; place-items: center; width: 90px; height: 110px; color: var(--accent); }
.op-surprise-dice { display: grid; place-items: center; width: 58px; height: 58px; padding: 12px; border: 1px solid var(--accent); border-radius: 18px; background: var(--surface); box-shadow: 0 8px 28px var(--tint); animation: op-idea-float 5s ease-in-out infinite; }
.op-surprise-dice .op-icon { width: 34px; height: 34px; }
.op-surprise-orbit { position: absolute; inset: 12px 0; border: 1px dashed var(--accent); opacity: .3; border-radius: 50%; animation: op-idea-orbit 24s linear infinite; }
.op-surprise-star { position: absolute; width: 22px; height: 22px; animation: op-idea-spark 4s ease-in-out infinite; }
.op-surprise-star.star-one { top: 4px; right: -3px; }
.op-surprise-star.star-two { bottom: 6px; left: -2px; width: 16px; height: 16px; animation-delay: -2s; }
.op-surprise-dot { position: absolute; left: 4px; top: 20px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.op-surprise-motion { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 14px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.op-surprise-motion:hover { background: var(--tint); color: var(--accent); }
.op-surprise-motion svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.op-surprise-widget.is-paused .op-surprise-art * { animation-play-state: paused; }
.op-surprise-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.op-image-detail .op-surprise-choice { display: flex; flex-direction: column; align-items: start; gap: 18px; width: 100%; min-width: 0; height: 100%; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--page); color: var(--ink); text-align: left; box-shadow: none; }
.op-image-detail .op-surprise-choice:hover, .op-image-detail .op-surprise-choice:focus-visible { background: var(--surface); border-color: var(--accent); transform: translateY(-3px); box-shadow: none; }
.op-surprise-choice-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--accent); background: var(--tint); }
.op-surprise-choice-icon > .op-icon { width: 20px; height: 20px; }
.op-surprise-choice-copy { display: flex; flex-direction: column; gap: 10px; }
.op-surprise-choice-copy strong { font-size: 13px; line-height: 1.6; font-weight: 550; }
.op-surprise-choice-copy > span { font-size: 11px; line-height: 1.9; color: var(--muted); }
.op-surprise-choice-action { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding-top: 16px; margin-top: auto; border-top: 1px solid var(--line); color: var(--accent); font-size: 11px; font-weight: 550; }
.op-surprise-choice-action .op-icon { width: 16px; height: 16px; transition: transform .2s; }
.op-surprise-choice:hover .op-surprise-choice-action .op-icon { transform: translateX(3px); }
@keyframes op-idea-float { 0%,100% { transform: translateY(3px) rotate(-7deg); } 50% { transform: translateY(-5px) rotate(7deg); } }
@keyframes op-idea-orbit { to { transform: rotate(360deg); } }
@keyframes op-idea-spark { 0%,100% { transform: scale(.85); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
.op-wallpaper-dialog { width: min(1020px,calc(100vw - 32px)); height: min(960px,calc(100svh - 32px)); max-height: calc(100svh - 32px); margin: auto; padding: 8px; border: 1px solid var(--line); border-radius: 24px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); overflow-y: auto; scrollbar-gutter: stable; cursor: auto; }
.op-wallpaper-dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.op-wallpaper-dialog-content { display: flex; flex-direction: column; gap: 24px; min-height: 100%; padding: 24px; }
.op-wallpaper-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.op-wallpaper-dialog-header > div { display: flex; flex-direction: column; gap: 12px; }
.op-wallpaper-dialog-header h2 { font-size: clamp(24px,3vw,32px); line-height: 1.3; letter-spacing: -.035em; }
.op-wallpaper-dialog-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--page); }
.op-wallpaper-dialog-close:hover { color: var(--ink); border-color: var(--accent); }
.op-wallpaper-dialog-close .op-icon { width: 18px; height: 18px; }
.op-wallpaper-dialog-intro { max-width: 650px; font-size: 13px; line-height: 1.9; color: var(--muted); }
.op-wallpaper-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.op-wallpaper-device-switch { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
.op-wallpaper-device-switch button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 9px; color: var(--muted); background: transparent; font-size: 12px; }
.op-wallpaper-device-switch button.is-active { color: var(--accent); border-color: var(--line); background: var(--surface); }
.op-wallpaper-device-switch button > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.op-wallpaper-fit { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; }
.op-wallpaper-fit select { min-height: 44px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--ink); font-size: 12px; }
.op-wallpaper-preview-stage { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(ellipse at 50% 40%,var(--tint),transparent 70%),var(--page); }
.op-wallpaper-preview-canvas { display: flex; align-items: center; justify-content: center; width: 100%; height: clamp(240px,42svh,430px); container-type: size; }
.op-wallpaper-device { position: relative; flex-shrink: 0; height: 100cqh; max-width: 100cqw; aspect-ratio: 9 / 19.5; padding: 7px; border: 2px solid var(--muted); border-radius: 32px; background: #101218; box-shadow: 0 18px 36px rgba(0,0,0,.18); }
.op-wallpaper-screen { position: relative; width: 100%; height: 100%; border-radius: 23px; overflow: hidden; background: #101218; }
.op-wallpaper-screen > img { display: block; width: 100%; height: 100%; }
.op-wallpaper-phone-chrome { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 12px; color: #fff; pointer-events: none; background: linear-gradient(rgba(0,0,0,.2),transparent 50%); }
.op-wallpaper-camera { width: 54px; height: 13px; border-radius: 10px; background: #101218; }
.op-wallpaper-clock { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 8px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.op-wallpaper-clock strong { font-size: clamp(28px,4.5vw,44px); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; }
.op-wallpaper-clock > span { font-size: 9px; }
.op-wallpaper-home-bar { margin-top: auto; width: 65px; height: 3px; border-radius: 3px; background: #fff; }
.op-wallpaper-device.is-desktop { height: auto; width: min(100cqw,calc((100cqh - 18px)*1.6),680px); aspect-ratio: 16 / 10; padding: 9px; margin-bottom: 16px; border-radius: 18px; }
.op-wallpaper-device.is-desktop .op-wallpaper-screen { border-radius: 7px; }
.op-wallpaper-device.is-desktop::after { content: ''; position: absolute; width: 100px; height: 12px; left: calc(50% - 50px); bottom: -18px; border: 1px solid var(--muted); border-radius: 2px 2px 8px 8px; background: var(--surface); }
.op-wallpaper-desktop-chrome { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(16,18,24,.75); color: #fff; backdrop-filter: blur(8px); font-size: 9px; }
.op-wallpaper-desktop-chrome > span:first-child { display: flex; align-items: center; gap: 12px; }
.op-wallpaper-desktop-chrome .op-icon { width: 14px; height: 14px; }
.op-wallpaper-preview-caption { max-width: 500px; min-height: 3.6em; text-align: center; color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-wallpaper-dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: auto; }
.op-wallpaper-dialog-footer p { flex: 1 1 200px; max-width: 380px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-wallpaper-dialog-footer .op-image-action { flex-shrink: 0; gap: 12px; }
@media (max-width: 760px) {
 .op-surprise-widget { padding: 24px 20px; }
 .op-surprise-header { grid-template-columns: 70px minmax(0,1fr); gap: 16px; }
 .op-surprise-art { width: 70px; height: 90px; }
 .op-surprise-dice { width: 48px; height: 48px; padding: 10px; border-radius: 15px; }
 .op-surprise-dice .op-icon { width: 28px; height: 28px; }
 .op-surprise-copy h2 { font-size: 23px; }
 .op-surprise-copy .op-eyebrow { font-size: 9px; }
 .op-surprise-choices { grid-template-columns: 1fr; }
 .op-image-detail .op-surprise-choice { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 12px 16px; padding: 20px; }
 .op-surprise-choice-action { grid-column: 2; padding-top: 12px; }
 .op-surprise-choice-copy > span { font-size: 12px; }
 .op-wallpaper-dialog { width: calc(100vw - 24px); height: calc(100svh - 24px); max-height: calc(100svh - 24px); border-radius: 20px; }
 .op-wallpaper-dialog-content { padding: 16px; gap: 20px; }
 .op-wallpaper-toolbar { align-items: stretch; flex-direction: column; gap: 16px; }
 .op-wallpaper-device-switch { flex-wrap: nowrap; justify-content: space-between; gap: 4px; padding: 6px; }
 .op-wallpaper-device-switch button { flex: 1; padding: 10px 12px; font-size: 11px; }
 .op-wallpaper-fit { justify-content: space-between; flex-wrap: wrap; }
 .op-wallpaper-preview-stage { padding: 20px 16px; }
 .op-wallpaper-clock strong { font-size: 30px; }
 .op-wallpaper-dialog-footer .op-image-action { width: 100%; justify-content: center; text-align: center; }
 .op-wallpaper-dialog-intro { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
 .op-surprise-art *, .op-surprise-choice-action .op-icon { animation: none !important; transition: none !important; }
 .op-image-detail .op-surprise-choice:hover { transform: none; }
 .op-surprise-motion { display: none; }
}

/* The guest profile is a readable sample of the account, with explicit demo data. */
.op-guest-page { display: flex; flex-direction: column; gap: 36px; padding-block: 20px 40px; }
.op-guest-page .op-page-heading { margin: 0; }
.op-guest-invitation { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px; border: 1px solid var(--accent); border-radius: 20px; background: var(--surface); }
.op-guest-invitation-copy { display: flex; align-items: start; gap: 20px; }
.op-guest-invitation-copy > div { display: flex; flex-direction: column; gap: 14px; max-width: 600px; }
.op-guest-invitation h2 { font-size: 23px; line-height: 1.4; }
.op-guest-invitation p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.op-guest-auth { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.op-guest-auth > a { gap: 12px; justify-content: start; }
.op-guest-account { display: flex; flex-direction: column; gap: 28px; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-guest-identity { display: flex; align-items: center; gap: 24px; }
.op-guest-identity > img { flex-shrink: 0; width: 88px; height: 88px; border-radius: 24px; object-fit: cover; }
.op-guest-identity > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.op-guest-identity h2 { font-size: 27px; overflow-wrap: anywhere; }
.op-guest-identity p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.op-guest-account-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 0; }
.op-guest-account-fields > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); }
.op-guest-account-fields dt { color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.8; }
.op-guest-account-fields dd { margin: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.op-guest-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.op-guest-metric { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-guest-metric > span:not(.op-icon-tile) { color: var(--muted); font-size: 11px; }
.op-guest-metric > strong { font-size: clamp(20px,2vw,27px); font-weight: 500; letter-spacing: -.035em; overflow-wrap: anywhere; }
.op-guest-insights { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.op-guest-insight { display: flex; flex-direction: column; gap: 28px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-guest-insight h3 { display: flex; align-items: start; gap: 12px; font-size: 17px; line-height: 1.5; }
.op-guest-insight h3 > .op-icon { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; color: var(--accent); }
.op-guest-insight ol { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; }
.op-guest-insight li { display: flex; flex-direction: column; gap: 12px; }
.op-guest-insight li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-guest-insight li strong { color: var(--ink); font-size: 11px; font-weight: 500; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.op-guest-bar { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.op-guest-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.op-guest-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.op-guest-badge { flex-shrink: 0; padding: 7px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.op-guest-watermark-demo { position: relative; display: grid; place-items: center; height: 210px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--tint); overflow: hidden; }
.op-guest-watermark-demo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.op-guest-watermark-demo > .op-icon { width: 44px; height: 44px; color: var(--accent); }
.op-guest-watermark-demo > span { position: absolute; right: 16px; bottom: 16px; padding: 10px 16px; border: 1px dashed var(--muted); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 12px; }
.op-guest-features .op-link { align-self: start; margin-top: auto; }
.op-guest-features .op-detail-widget-heading { align-items: start; flex-wrap: wrap; }
.op-guest-favorites-count { font-size: 60px; line-height: 1.1; letter-spacing: -.06em; font-weight: 450; }
.op-guest-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.op-guest-gallery .bento-compact-tile { min-width: 0; }
.op-guest-gallery .bento-compact-img { width: 100%; }
@media (max-width: 1200px) {
 .op-guest-invitation { flex-direction: column; align-items: stretch; }
 .op-guest-auth { flex-direction: row; flex-wrap: wrap; }
 .op-guest-insights { grid-template-columns: 1fr; }
 .op-guest-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
 .op-guest-page { gap: 28px; }
 .op-guest-invitation, .op-guest-account { padding: 24px 20px; }
 .op-guest-invitation-copy { flex-direction: column; gap: 20px; }
 .op-guest-auth { flex-direction: column; }
 .op-guest-identity { align-items: start; gap: 16px; }
 .op-guest-identity > img { width: 64px; height: 64px; border-radius: 18px; }
 .op-guest-identity h2 { font-size: 21px; }
 .op-guest-account-fields, .op-guest-features { grid-template-columns: 1fr; }
 .op-guest-account-fields > div { padding: 18px; }
 .op-guest-metric { padding: 20px 16px; }
 .op-guest-insight { padding: 24px 20px; }
 .op-guest-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
}

/* The battle makes voting, results and the next round separate, explicit actions. */
.op-detective-live-score { display: inline-flex; align-items: center; gap: 8px; }
.op-detective-live-score .op-icon { width: 16px; height: 16px; color: var(--accent); }
.op-detective-arena { display: flex; flex-direction: column; gap: 28px; }
.op-detective-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: start; gap: 28px; }
.op-detective-artwork { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.op-detective-artwork > button { position: relative; display: block; width: 100%; height: clamp(320px,36vw,520px); padding: 0; border: 0; border-radius: 12px; background: var(--page); overflow: hidden; cursor: zoom-in; }
.op-detective-artwork img { display: block; width: 100%; height: 100%; object-fit: contain; }
.op-detective-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 11px; }
.op-detective-zoom .op-icon { width: 16px; height: 16px; }
.op-detective-answer-panel, .op-detective-options { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.op-detective-option { display: flex; align-items: start; gap: 16px; width: 100%; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); background: var(--surface); text-align: left; transition: border-color .2s,background .2s; }
.op-detective-option:not(:disabled):hover, .op-detective-option.is-pending { border-color: var(--accent); background: var(--tint); }
.op-detective-option:disabled { opacity: 1; cursor: default; }
/* Right and wrong get their own colours, so the verdict never reads like a normal (selected) answer. */
.op-detective-arena { --right: #7dd3a0; --wrong: #ff8f80; }
:root[data-theme="light"] .op-detective-arena { --right: #2f7a50; --wrong: #b4443d; }
.op-detective-option.is-correct { --tone: var(--right); }
.op-detective-option.is-wrong { --tone: var(--wrong); }
.op-detective-option:is(.is-correct, .is-wrong) { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--surface)); }
.op-detective-option.is-other { opacity: .6; }
.op-detective-option-number { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--page); font-size: 11px; font-variant-numeric: tabular-nums; }
.op-detective-option:is(.is-correct, .is-wrong) .op-detective-option-number { border-color: var(--tone); color: var(--tone); background: transparent; }
.op-detective-option-text { flex: 1; min-width: 0; padding-block: 3px; font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
.op-detective-option > .op-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 7px; color: var(--tone, var(--accent)); }
.op-detective-checking { font-size: 12px; line-height: 1.8; color: var(--muted); }
/* The verdict: a tinted card with a coloured edge and a filled badge; the real prompt sits below as a quote. */
.op-detective-feedback { --tone: var(--wrong); position: relative; display: flex; flex-direction: column; align-items: start; gap: 14px; padding: 24px 24px 24px 28px; border: 1px solid color-mix(in srgb, var(--tone) 45%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--tone) 9%, var(--surface)); overflow: hidden; animation: op-detective-verdict .45s cubic-bezier(.16,1,.3,1); }
.op-detective-feedback.is-correct { --tone: var(--right); }
.op-detective-feedback::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--tone); }
.op-detective-verdict { display: flex; align-items: center; gap: 12px; color: var(--tone); font-size: 17px; }
.op-detective-verdict .op-icon { box-sizing: content-box; width: 18px; height: 18px; padding: 7px; border-radius: 50%; background: var(--tone); color: var(--surface); }
.op-detective-verdict strong { font-weight: 650; }
.op-detective-feedback h3 { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.8; }
.op-detective-feedback > p { width: 100%; margin-top: -6px; padding: 14px 16px; border-left: 2px solid color-mix(in srgb, var(--tone) 60%, transparent); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--page) 55%, transparent); color: var(--ink); font-size: 13px; line-height: 1.9; overflow-wrap: anywhere; }
@keyframes op-detective-verdict { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .op-detective-feedback { animation: none; } }
.op-detective-feedback .op-button { margin-top: 6px; }
.op-detective-result-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; width: 100%; }
.op-detective-result-stats > div { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
.op-detective-result-stats > div > span { color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-detective-result-stats strong { font-size: 34px; font-weight: 500; line-height: 1.3; letter-spacing: -.04em; }
.op-detective-result-stats strong small { font-size: 15px; color: var(--muted); }
.op-detective-result-stats .op-detective-rank { font-size: 21px; }
@media (max-width: 1200px) { .op-detective-grid { grid-template-columns: 1fr; } .op-detective-artwork > button { height: clamp(320px,48vw,500px); } }
@media (max-width: 760px) { .op-detective-option { gap: 12px; padding: 20px 16px; } .op-detective-option-number { flex-basis: 30px; width: 30px; height: 30px; padding: 6px; } .op-detective-option-text { font-size: 12px; } .op-detective-feedback { padding: 24px 20px; } .op-detective-result-stats { grid-template-columns: 1fr; } .op-detective-result-stats > div { padding: 20px; } .op-detective-artwork > button { height: clamp(280px,85vw,420px); } }
.op-battle-page { display: flex; flex-direction: column; gap: 24px; padding-block: 20px 40px; }
.op-battle-page .op-breadcrumb { margin-bottom: 0; }
.op-battle-heading { display: flex; align-items: start; justify-content: space-between; gap: 32px; }
.op-battle-heading .op-page-heading { margin-bottom: 0; }
.op-battle-heading > .op-link { flex-shrink: 0; font-size: 11px; }
.op-battle-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding-block: 4px; font-size: 11px; color: var(--muted); }
.op-battle-progress > strong { color: var(--ink); font-weight: 550; font-variant-numeric: tabular-nums; }
.op-battle-progress-track { display: flex; gap: 6px; grid-column: 1 / -1; }
.op-battle-progress-track > span { flex: 1; height: 4px; background: var(--line); border-radius: 4px; }
.op-battle-progress-track > .is-done { background: var(--accent); }
.op-battle-progress-track > .is-current { background: var(--accent); opacity: .45; }
.op-battle-arena { display: flex; flex-direction: column; gap: 24px; }
.op-battle-question { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.op-battle-question h2 { font-size: clamp(25px,2.8vw,36px); }
.op-battle-question > p { color: var(--muted); font-size: 13px; line-height: 1.8; max-width: 650px; }
.op-duel-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.op-vote-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); transition: border-color .2s,box-shadow .2s; }
.op-vote-card:hover, .op-vote-card:focus-within, .op-vote-card.is-selected { border-color: var(--accent); }
.op-vote-card.is-selected { box-shadow: 0 0 0 2px var(--tint); }
.op-vote-media { position: relative; min-width: 0; }
.op-vote-image { display: block; width: 100%; height: clamp(250px,27vw,380px); padding: 0; border: 0; border-radius: 14px; background: var(--raised); overflow: hidden; cursor: pointer; }
.op-vote-image img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
.op-vote-image:hover img { transform: scale(1.015); }
.op-vote-image:disabled { opacity: 1; cursor: wait; }
.op-vote-preview { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; min-height: 44px; padding: 12px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); }
.op-vote-preview:hover { background: var(--raised); color: var(--accent); }
.op-vote-preview > .op-icon { width: 18px; height: 18px; }
.op-vote-selected { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); color: var(--accent); font-size: 11px; }
.op-vote-selected > .op-icon { width: 14px; height: 14px; }
.op-vote-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 14px 18px; border: 1px solid var(--accent); border-radius: 12px; color: var(--accent); background: var(--tint); font-size: 13px; font-weight: 600; text-align: left; }
.op-vote-action > span { flex: 1; }
.op-vote-action:hover, .is-selected .op-vote-action { color: var(--on-accent); background: var(--accent); }
.op-vote-action > .op-icon { width: 18px; height: 18px; }
.op-vote-result { display: flex; flex-direction: column; gap: 14px; padding: 4px 4px 8px; }
.op-vote-result > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.op-vote-result strong { font-size: 29px; font-weight: 550; color: var(--ink); letter-spacing: -.04em; }
.op-vote-result span { color: var(--muted); font-size: 11px; }
.op-vote-meter { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.op-vote-meter > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.op-battle-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-battle-next > div { display: flex; align-items: center; gap: 16px; }
.op-battle-next strong { font-size: 13px; font-weight: 550; }
.op-battle-next p { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 6px; }
.op-battle-next .op-icon-tile { color: var(--accent); }
.op-battle-next > button { flex-shrink: 0; }
.op-battle-error { padding: 16px 20px; border: 1px solid var(--bs-danger-border-subtle); border-radius: 12px; color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); font-size: 13px; line-height: 1.8; }
.op-battle-complete, .op-battle-empty { display: flex; flex-direction: column; align-items: start; gap: 24px; padding: 32px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.op-battle-complete h2 { margin: 10px 0 16px; }
.op-battle-complete p, .op-battle-empty p { color: var(--muted); font-size: 13px; line-height: 1.9; max-width: 700px; }
.op-battle-reset { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); font-size: 12px; color: var(--muted); }
.op-battle-reset strong { color: var(--accent); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.op-battle-results-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.op-battle-result-card { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-battle-result-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; }
.op-battle-result-heading > span { font-size: 10px; color: var(--muted); }
.op-battle-result-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.op-battle-result-pair figure { position: relative; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); }
.op-battle-result-pair figure.is-selected { border-color: var(--accent); }
.op-battle-result-pair img { width: 100%; height: 160px; object-fit: contain; border-radius: 7px; }
.op-battle-result-pair figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; justify-content: space-between; padding: 10px 4px 4px; font-size: 10px; color: var(--muted); }
.op-battle-result-pair figcaption > strong { font-size: 18px; color: var(--ink); }
.op-result-pick { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--accent); background: var(--surface); font-size: 9px; }
.op-result-pick > .op-icon { width: 12px; height: 12px; }
.op-battle-agreement { display: flex; flex-direction: column; align-items: end; gap: 6px; color: var(--muted); font-size: 11px; }
.op-battle-agreement > strong { font-size: 25px; font-weight: 550; color: var(--accent); }
@media (max-width: 1200px) {
 .op-battle-heading { flex-direction: column; gap: 12px; }
 .op-explainer-rows .op-help-step { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 16px 24px; }
}
@media (max-width: 760px) {
 .op-battle-page { gap: 28px; }
 .op-duel-grid, .op-battle-results-grid { grid-template-columns: 1fr; }
 .op-vote-image { height: clamp(260px,75vw,420px); }
 .op-vote-card { padding: 16px; border-radius: 18px; }
 .op-battle-next { flex-direction: column; align-items: stretch; padding: 20px; }
 .op-battle-next .op-icon-tile { display: none; }
 .op-battle-complete, .op-battle-empty { padding: 24px 20px; }
 .op-battle-result-card { padding: 20px; }
 .op-explainer-grid { grid-template-columns: 1fr; }
 .op-explainer-rows .op-help-step { display: flex; padding: 24px 20px; }
 .op-battle-question { align-items: start; text-align: left; }
 .op-battle-progress { padding-block: 4px; }
 .op-battle-result-pair img { height: 130px; }
 .op-battle-agreement { align-items: start; }
}
.openpix-app :is(.category-hero-cta,.category-cta-btn) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
.openpix-app :is(.category-hero-cta,.category-cta-btn):hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.06); transform: none; }
.openpix-app .category-editorial-card { padding: 28px; }
.openpix-app .category-editorial-body { font-size: 14px; line-height: 1.95; }
@media (max-width: 1200px) {
 .op-footer .op-footer-bar { flex-direction: column-reverse; align-items: start; }
 .op-help-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 960px) {
 .op-language-picker { margin-left: auto; }
 .op-header-actions .op-language-button { min-width: 70px; justify-content: center; }
 .op-help-faq { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 760px) {
 .op-newsletter { flex-direction: column; gap: 16px; }
 .op-newsletter-content { width: 100%; }
 .op-gallery-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .op-gallery-control { min-width: 0; }
 .op-gallery-filter-toggle { width: 100%; display: flex; flex-direction: column; align-items: start; gap: 6px; padding: 12px 14px; }
 .op-filter-value { width: 100%; justify-content: space-between; gap: 8px; font-size: 11px; }
 .op-gallery-toolbar > .op-result-count { margin-left: 0; }
 .op-gallery-toolbar > .op-filter-reset { justify-self: end; padding: 0; min-height: 32px; }
 .op-language-button > .op-icon:first-child { display: none; }
 .op-help-step { padding: 20px; }
 .openpix-app .category-editorial-card { padding: 24px 20px; }
}
@media (max-width: 480px) {
 .op-newsletter-fields { grid-template-columns: 1fr; }
 .op-help-steps { grid-template-columns: 1fr; }
 .op-help-step { gap: 18px; }
 .openpix-app .op-style-choice { padding: 14px; }
 .op-style-choice-top { flex-wrap: wrap; }
 .op-style-choice-top .style-card-title { width: calc(100% - 28px); }
 .op-style-choice-top .op-style-selected { display: none; }
 .op-style-modal .style-card-title { font-size: 11px; }
 .op-style-modal .style-card-desc { font-size: 10px; }
 .op-campaign-builder .wizard-backdrop-container { padding: 0 !important; min-height: 0 !important; }
 .op-campaign-builder .wizard-question-title { font-size: 22px !important; margin-bottom: 20px !important; }
 .op-campaign-builder .wizard-review-item { align-items: start; flex-direction: column; gap: 10px; }
 .op-campaign-builder .btn-review-edit { align-self: start; }
}

.openpix-app .btn-primary { color: var(--on-accent) !important; }
.openpix-app .category-hero-lead { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 780px; }
.openpix-app .category-faq-btn { color: var(--ink); background: transparent; padding: 20px; }
.openpix-app .category-faq-btn:hover { color: var(--accent); background: var(--raised); }
.openpix-app .category-faq-answer { padding: 0 20px 20px; }
.openpix-app .category-faq-chevron { color: var(--muted); }
.openpix-app .guide-read-time { color: var(--muted); }
.openpix-app .badge.bg-warning { color: #30200a !important; }
.openpix-app .op-main code { color: var(--accent); }
.openpix-app .op-main :is(.text-secondary.opacity-75,.text-muted .opacity-75) { opacity: 1 !important; }
.openpix-app .btn-report-action { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-border-subtle); }
.openpix-app .btn-report-action:hover { color: var(--bs-danger-text-emphasis); background: var(--bs-danger-bg-subtle); border-color: var(--bs-danger-text-emphasis); box-shadow: none; }
.openpix-app .bento-action-bar .badge.bg-dark { background: var(--raised) !important; color: var(--muted) !important; }
.openpix-app .op-main .btn[style*="linear-gradient"] { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent); }

/* Personal profile: account, editable details, insights and creations. */
.op-profile-page { display: flex; flex-direction: column; gap: 32px; padding-block: 20px 40px; }
.op-profile-page-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.op-profile-page-heading .op-page-heading { margin: 0; }
.op-profile-page-heading form { flex-shrink: 0; }
.op-profile-account-grid { display: grid; grid-template-columns: 280px minmax(0,1fr); align-items: start; gap: 24px; }
.op-profile-widget { min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-profile-widget h2 { font-size: 24px; line-height: 1.4; }
.op-profile-identity { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.op-profile-avatar { position: relative; flex-shrink: 0; width: 112px; }
.op-profile-avatar-preview { display: grid; place-items: center; width: 112px; height: 112px; padding: 6px; border: 1px solid var(--line); border-radius: 50%; background: var(--page); overflow: hidden; }
.op-profile-avatar-preview > span { display: grid; place-items: center; width: 100%; height: 100%; padding: 12px; border-radius: 50%; background: var(--tint); color: var(--accent); font-size: 34px; font-weight: 550; }
.op-profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.op-profile-avatar #btnOpenSourcePicker { position: absolute; right: -4px; bottom: 0; width: 44px; height: 44px; padding: 10px; border: 3px solid var(--surface); background: var(--accent); color: var(--on-accent); }
.op-profile-identity-copy { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; text-align: center; }
.op-profile-identity-copy h2, .op-profile-handle { max-width: 100%; overflow-wrap: anywhere; }
.op-profile-handle { color: var(--muted); font-size: 12px; }
.op-profile-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 24px; background: var(--page); color: var(--muted); font-size: 10px; line-height: 1.6; }
.op-profile-status .op-icon { width: 14px; height: 14px; }
.op-profile-avatar-hint, .op-profile-note { color: var(--muted); font-size: 12px; line-height: 1.8; }
.op-profile-avatar-hint { text-align: center; }
.op-profile-totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; width: 100%; margin: 0; }
.op-profile-totals > div { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
.op-profile-totals dt { color: var(--muted); font-size: 10px; font-weight: 400; overflow-wrap: anywhere; }
.op-profile-totals dd { margin: 0; font-size: 26px; line-height: 1.4; letter-spacing: -.04em; }
.op-profile-account-details { display: grid; gap: 16px; width: 100%; margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.op-profile-account-details div { min-width: 0; }
.op-profile-account-details dt { margin-bottom: 6px; font-size: 10px; color: var(--muted); font-weight: 400; }
.op-profile-account-details dd { margin: 0; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.op-profile-public-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; }
.op-profile-public-link .op-link { gap: 8px; font-size: 12px; }
.op-profile-copy-feedback { flex-basis: 100%; color: var(--accent); font-size: 11px; }
.op-profile-copy-feedback:empty { display: none; }
.op-profile-settings { display: flex; flex-direction: column; gap: 24px; }
.op-profile-settings .op-help-heading p { font-size: 12px; }
.op-profile-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.op-profile-field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.op-profile-field-wide { grid-column: 1 / -1; }
.op-profile-field label { color: var(--ink); font-size: 12px; font-weight: 550; }
.op-profile-field .form-control { min-width: 0; min-height: 48px; padding: 12px 14px; border-radius: 10px; font-size: 12px; }
.op-profile-field textarea { line-height: 1.8; resize: vertical; }
.op-profile-username { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: stretch; gap: 8px; }
.op-profile-username > span { display: grid; place-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--accent); font-size: 14px; }
.op-profile-field-help { color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-profile-field-label { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.op-profile-field-label > span { color: var(--muted); font-size: 10px; }
.op-profile-field-error { margin-top: 8px; padding: 12px 16px; border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--raised); color: var(--ink); font-size: 12px; line-height: 1.8; }
.op-profile-visibility { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
.op-profile-visibility-heading { display: flex; align-items: center; gap: 16px; }
.op-profile-visibility-heading > div:not(.form-check) { display: flex; flex: 1; min-width: 0; flex-direction: column; align-items: start; gap: 8px; }
.op-profile-visibility-heading label { font-size: 13px; line-height: 1.6; font-weight: 550; cursor: pointer; }
.op-profile-visibility .op-icon-tile { width: 44px; height: 44px; padding: 12px; flex-shrink: 0; border-radius: 12px; }
.op-profile-visibility .form-check { margin: 0; padding: 0; flex-shrink: 0; }
.op-profile-visibility .form-check-input { float: none; width: 44px; height: 24px; margin: 0; cursor: pointer; }
.op-profile-visibility > p { color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-profile-form-footer { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.op-profile-form-footer > p { color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-profile-form-footer > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.op-profile-form-footer .op-button { font-size: 12px; }
.op-profile-notice { display: flex; align-items: center; gap: 16px; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--tint); color: var(--ink); font-size: 12px; }
.op-profile-notice > span { flex: 1; }
.op-profile-notice > .op-icon { color: var(--accent); }
.op-profile-dashboard h2 { font-size: 18px; }
#profileDashboardToggle { display: grid; grid-template-columns: 44px minmax(0,1fr) 20px; align-items: center; gap: 20px; width: 100%; padding: 24px 28px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink); background: var(--surface); text-align: left; }
#profileDashboardToggle .op-icon-tile { width: 44px; height: 44px; padding: 12px; border-radius: 12px; }
.op-profile-dashboard-heading { display: flex; flex-direction: column; gap: 8px; }
.op-profile-dashboard-heading strong { font-size: 18px; line-height: 1.5; font-weight: 550; }
.op-profile-dashboard-heading > span { color: var(--muted); font-size: 12px; line-height: 1.8; font-weight: 400; letter-spacing: 0; }
#profileDashboardToggle[aria-expanded="true"] > .op-icon { transform: rotate(180deg); }
.op-profile-dashboard:has(.show,.collapsing) #profileDashboardToggle { border-radius: 20px 20px 0 0; }
.op-profile-dashboard-body { padding: 28px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 20px 20px; background: var(--surface); }
.op-profile-loading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-block: 16px; font-size: 12px; color: var(--muted); }
.op-profile-loading .spinner-border { color: var(--accent); }
.op-profile-skeletons { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; flex-basis: 100%; margin-top: 16px; }
.op-profile-skeletons span { height: 100px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); }
.op-profile-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 0 0 24px; }
.op-profile-metrics > div { display: flex; flex-direction: column; gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
.op-profile-metrics dt { display: flex; align-items: start; gap: 10px; color: var(--muted); font-size: 11px; line-height: 1.7; font-weight: 400; }
.op-profile-metrics dt .op-icon { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.op-profile-metrics dd { margin: auto 0 0; font-size: 23px; line-height: 1.4; letter-spacing: -.03em; overflow-wrap: anywhere; }
.op-profile-insight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.op-profile-insight { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--page); }
.op-profile-insight h3 { display: flex; align-items: start; gap: 10px; font-size: 15px; line-height: 1.6; }
.op-profile-insight h3 .op-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.op-profile-insight .op-help-heading p { font-size: 11px; }
.op-profile-insight-rows { display: grid; gap: 24px; margin-top: 24px; }
.op-profile-insight-row > div { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 12px; line-height: 1.7; }
.op-profile-insight-row strong { flex-shrink: 0; color: var(--accent); font-weight: 500; }
.op-profile-insight-bar { display: block; height: 5px; border-radius: 4px; background: var(--line); overflow: hidden; }
.op-profile-insight-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.op-profile-insight-row small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.op-profile-empty { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 28px 16px; text-align: center; }
.op-profile-empty h3 { max-width: 600px; font-size: 23px; }
.op-profile-empty p { max-width: 540px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.op-profile-empty .op-button { font-size: 12px; }
.op-profile-section-heading { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 28px; }
.op-profile-section-heading p { font-size: 12px; }
.op-profile-section-heading .op-button { font-size: 12px; white-space: normal; }
.op-profile-gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.op-profile-image-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--page); }
.op-profile-image-link { display: block; position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; }
.op-profile-image-link > img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.op-profile-image-link:hover > img { transform: scale(1.035); }
.op-profile-image-open { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 8px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); }
.op-profile-image-meta { padding: 16px 4px 4px; }
.op-profile-image-meta > p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.op-profile-image-meta > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.op-profile-image-meta > div:empty { display: none; }
.op-profile-image-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px; color: var(--muted); font-size: 10px; }
.op-profile-image-badge .op-icon { width: 14px; height: 14px; }
.op-profile-shortcuts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.op-profile-shortcut { display: grid; grid-template-columns: 44px minmax(0,1fr) 20px; align-items: center; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.op-profile-shortcut:hover { border-color: var(--accent); color: var(--ink); }
.op-profile-shortcut .op-icon-tile { width: 44px; height: 44px; padding: 12px; border-radius: 12px; }
.op-profile-shortcut > span:not(.op-icon-tile) { display: flex; flex-direction: column; gap: 8px; }
.op-profile-shortcut strong { font-size: 14px; line-height: 1.6; font-weight: 550; }
.op-profile-shortcut > span > span { color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-profile-modal-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.op-profile-avatar-modal .modal-dialog { max-width: 440px; margin-inline: auto; padding-inline: 16px; }
.op-profile-avatar-modal .op-help-heading h2 { font-size: 25px; }
.op-profile-avatar-modal .op-help-heading p { font-size: 12px; }
.op-profile-source-actions { display: grid; gap: 12px; margin-top: 24px; }
.op-profile-source-actions .op-button { white-space: normal; text-align: left; font-size: 12px; }
.op-profile-source-actions .op-icon:last-child { width: 16px; height: 16px; margin-left: auto; }
.op-profile-crop-stage { height: min(48dvh,380px); margin-top: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); overflow: hidden; }
.op-profile-crop-stage > img { display: block; max-width: 100%; max-height: 100%; }
.op-profile-crop-modal .modal-footer { justify-content: space-between; }
.op-profile-crop-modal .op-button { font-size: 12px; white-space: normal; }
@media (max-width: 1200px) {
 .op-profile-account-grid { grid-template-columns: 1fr; }
 .op-profile-identity { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 20px 24px; }
 .op-profile-identity-copy { align-items: start; text-align: left; }
 .op-profile-identity > :not(.op-profile-avatar,.op-profile-identity-copy) { grid-column: 1 / -1; }
 .op-profile-avatar-hint { text-align: left; }
 .op-profile-account-details { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .op-profile-insight-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
 .op-profile-page { gap: 24px; padding-block: 16px 32px; }
 .op-profile-page-heading { flex-direction: column; gap: 20px; }
 .op-profile-widget { padding: 24px 20px; }
 .op-profile-identity { grid-template-columns: 80px minmax(0,1fr); gap: 20px; }
 .op-profile-avatar { width: 80px; }
 .op-profile-avatar-preview { width: 80px; height: 80px; padding: 4px; }
 .op-profile-avatar-preview > span { font-size: 26px; }
 .op-profile-widget h2 { font-size: 22px; }
 .op-profile-fields { grid-template-columns: 1fr; }
 .op-profile-visibility-heading { flex-wrap: wrap; }
 .op-profile-visibility-heading > .op-icon-tile { display: none; }
 .op-profile-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .op-profile-metrics > div { padding: 16px; gap: 16px; }
 .op-profile-metrics dd { font-size: 20px; }
 #profileDashboardToggle { padding: 20px; gap: 12px; }
 .op-profile-dashboard-heading strong { font-size: 16px; }
 .op-profile-dashboard-heading > span { font-size: 11px; }
 .op-profile-dashboard-body { padding: 20px; }
 .op-profile-insight { padding: 20px; }
 .op-profile-gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
 .op-profile-shortcuts { grid-template-columns: 1fr; gap: 16px; }
 .op-profile-shortcut { padding: 20px; gap: 16px; }
}
@media (max-width: 480px) {
 .op-profile-account-details { grid-template-columns: 1fr; }
 .op-profile-form-footer > div { flex-direction: column; align-items: stretch; }
 .op-profile-form-footer .op-button { white-space: normal; text-align: center; }
 .op-profile-gallery-grid { grid-template-columns: 1fr; }
 .op-profile-crop-modal .modal-footer { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .op-profile-image-link > img { transition: none; } .op-profile-loading .spinner-border { animation: none; } }

/* Featured campaigns and supporting widgets retain their hierarchy on small screens. */
@media (max-width: 960px) {
  .op-sidebar .op-nav-feature, .op-sidebar-bottom { display: grid; }
  .op-help-faq { padding: 28px; gap: 28px; }
}
@media (max-width: 760px) {
  .op-help-faq { padding: 24px 20px; border-radius: 18px; }
  .op-help-faq-list details { padding: 14px 16px; }
  .op-help-faq-list summary { gap: 10px; font-size: 12px; }
  .op-help-faq-list p { padding-left: 0; font-size: 12px; }
  .op-faq-number { display: none; }
}

/* Personal collections share the profile and gallery design language. */
.op-collection-page { display: flex; flex-direction: column; gap: 28px; padding-block: 20px 48px; min-width: 0; }
.op-collection-page .op-breadcrumb { margin: 0; }
.op-page-heading.op-collection-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,220px); align-items: center; gap: 40px; margin: 0; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-collection-heading h1 { font-size: clamp(28px,3vw,42px); line-height: 1.2; }
.op-collection-heading .op-collection-intro { align-items: start; gap: 14px; min-width: 0; }
.op-collection-heading .op-collection-intro > .op-button { margin-top: 8px; }
.op-collection-heading .op-collection-summary { position: relative; align-items: center; gap: 12px; padding: 24px; border: 1px solid color-mix(in srgb,var(--accent) 22%,var(--line)); border-radius: 20px; background: radial-gradient(ellipse at 50% 0%,var(--tint),var(--surface) 80%); text-align: center; isolation: isolate; }
.op-collection-summary-art { position: relative; display: grid; place-items: center; width: 110px; height: 80px; margin-bottom: 4px; }
.op-collection-summary-orbit { position: absolute; inset: 1px 16px; border: 1px dashed color-mix(in srgb,var(--accent) 35%,transparent); border-radius: 50%; transform: rotate(-20deg); }
.op-collection-summary-card { position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 15px; border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius: 17px; color: var(--accent); background: var(--surface); box-shadow: 0 7px 0 -3px var(--tint),0 8px 0 -3px var(--line); transform: rotate(-9deg); transition: transform .2s; }
.op-collection-summary-card > .op-icon { width: 26px; height: 26px; stroke-width: 1.5; }
.op-collection-summary-spark { position: absolute; top: 1px; right: 6px; width: 20px; height: 20px; color: var(--accent); }
.op-collection-summary:hover .op-collection-summary-card { transform: rotate(0deg) translateY(-2px); }
.op-collection-summary > strong { font-size: 56px; line-height: 1; font-weight: 500; letter-spacing: -.06em; overflow-wrap: anywhere; }
.op-collection-summary > span:last-child { color: var(--muted); font-size: 11px; line-height: 1.7; }
.op-collection-nav { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-collection-tab { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 12px 20px; border-radius: 10px; font-size: 12px; color: var(--muted); }
.op-collection-tab:hover { color: var(--ink); background: var(--raised); }
.op-collection-tab.is-active { color: var(--accent); background: var(--tint); font-weight: 600; }
.op-collection-tab .op-icon { width: 18px; height: 18px; }
.op-collection-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.op-collection-toolbar-copy { display: flex; flex-direction: column; gap: 8px; }
.op-collection-toolbar h2 { font-size: 20px; }
.op-collection-toolbar p { max-width: 620px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.op-collection-order { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; }
.op-collection-order .op-icon { width: 16px; height: 16px; }
.op-collection-selection { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.op-collection-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.op-collection-page [x-cloak] { display: none !important; }
.openpix-app .op-collection-grid { column-width: 260px; column-gap: 24px; }
.op-collection-grid .bento-tile-card { padding: 12px; margin-bottom: 24px; border-color: var(--line); border-radius: 16px; background: var(--surface); box-shadow: none; }
.op-collection-grid .bento-tile-card:hover { border-color: var(--accent); transform: none; box-shadow: none; }
.op-collection-grid .bento-media-anchor { border-radius: 10px; background: var(--raised); }
.op-collection-grid .bento-scrim-gradient { display: none; }
.op-collection-caption { display: flex; flex-direction: column; gap: 12px; padding: 20px 4px 16px; }
.op-collection-caption > a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.op-collection-caption > a:hover { color: var(--accent); }
.op-collection-caption time { color: var(--muted); font-size: 10px; }
.op-collection-grid .bento-action-bar { padding: 12px 4px 4px; }
.op-collection-page .op-load-more { margin: 0; }
.op-empty-widget.op-collection-empty { max-width: none; min-height: 340px; margin: 0; gap: 28px; padding: 48px 24px; box-shadow: none; }
.op-collection-empty-art { position: relative; padding: 16px; }
.op-collection-empty-frame { display: grid; place-items: center; width: 92px; height: 80px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); color: var(--muted); transform: rotate(-8deg); }
.op-collection-empty-frame .op-icon { width: 40px; height: 40px; stroke-width: 1.2; }
.op-collection-empty-mark { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border: 4px solid var(--surface); border-radius: 50%; background: var(--tint); color: var(--accent); }
.op-collection-empty-copy { display: flex; flex-direction: column; gap: 12px; max-width: 470px; }
.op-collection-empty h2 { font-size: 24px; }
.op-collection-empty p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.op-card-badge-row { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; z-index: 5; }
.op-card-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 30px; font-size: 10px; font-weight: 550; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.op-card-badge .op-icon { width: 12px; height: 12px; }
.op-badge-private { border-color: var(--line); color: var(--ink); background: var(--surface); }

/* Bento Select Checkbox overrides */
.openpix-app .bento-select-checkbox-box { background: var(--surface); border: 1.5px solid var(--line); border-radius: 8px; color: transparent; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16); transition: all .2s ease; }
.openpix-app .bento-select-checkbox-wrapper:hover .bento-select-checkbox-box { border-color: var(--accent); }
.openpix-app .bento-select-checkbox-wrapper.is-selected .bento-select-checkbox-box { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important; }
.openpix-app .bento-select-checkbox-wrapper { display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; border: 0; border-radius: 12px; background: transparent; }
.openpix-app .bento-select-checkbox-box { padding: 4px; flex-shrink: 0; }
.op-collection-grid .bento-select-checkbox-wrapper { top: 16px; right: 16px; }
.op-collection-grid .bento-tile-card:has([aria-checked="true"]) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Floating Export Bar & Cloud Export Modal overrides */
.openpix-app .floating-export-bar { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow), 0 0 0 1px var(--line); color: var(--ink); padding: 10px 18px; }
.openpix-app .floating-export-badge { color: var(--ink); gap: 10px; font-size: 13px; }
.openpix-app .floating-export-badge .badge-bubble { background: var(--accent); color: var(--on-accent); font-weight: 600; padding: 3px 9px; border-radius: 9999px; }
.openpix-app .btn-floating-cloud-export { background: var(--accent); color: var(--on-accent) !important; font-weight: 600; padding: 10px 18px; border-radius: 9999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); transition: all .2s; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.openpix-app .btn-floating-cloud-export:hover { filter: brightness(1.1); transform: translateY(-1px); color: var(--on-accent) !important; }
.openpix-app .cloud-export-modal-content { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; color: var(--ink); box-shadow: var(--shadow); padding: 28px !important; }
.openpix-app .cloud-export-header-icon { background: var(--tint); border: 1px solid var(--line); border-radius: 16px; color: var(--accent); margin: 0 auto 16px; width: 56px; height: 56px; }
.openpix-app .cloud-export-connection-banner { background: var(--raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; color: var(--ink); }
.openpix-app .cloud-export-folder-input { background: var(--page); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.openpix-app .cloud-export-folder-input:focus { background: var(--page); border-color: var(--accent); color: var(--ink); box-shadow: 0 0 0 3px var(--tint); }
.openpix-app .cloud-export-modal-content .progress { background-color: var(--line) !important; }
.openpix-app .cloud-export-modal-content .progress-bar { background-color: var(--accent) !important; }
.op-collection-page .floating-export-bar { z-index: 1040; max-width: 760px; padding: 16px 20px; border-radius: 18px; gap: 16px; }
.op-collection-page:has(.floating-export-bar) { padding-bottom: 180px; }
.op-collection-page .floating-export-bar > .d-flex { flex-wrap: wrap; justify-content: end; gap: 12px !important; }
.op-collection-page .cloud-export-connection-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px; }
.op-collection-page .cloud-export-header-icon { display: grid; place-items: center; padding: 12px; }
.op-collection-page .cloud-export-header-icon svg { width: 28px; height: 28px; }
.op-collection-page .cloud-export-modal-content .modal-body { padding: 16px 0 0 !important; }
.op-collection-page .cloud-export-modal-content .modal-body > .text-center:first-child { padding-inline: 16px; }
.op-collection-page .cloud-export-modal-content .btn-link { padding: 8px 14px !important; min-height: 44px; }
@media (max-width: 760px) {
 .op-collection-page { gap: 24px; padding-block: 16px 32px; }
 .op-page-heading.op-collection-heading { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 24px 20px; }
 .op-collection-heading .op-collection-summary { display: grid; grid-template-columns: 90px minmax(0,1fr); align-items: center; gap: 8px 20px; padding: 20px; text-align: center; }
 .op-collection-summary-art { grid-row: span 2; width: 90px; height: 80px; margin: 0; }
 .op-collection-summary > strong { font-size: 44px; align-self: end; }
 .op-collection-summary > span:last-child { align-self: start; }
 .op-collection-nav { gap: 8px; }
 .op-collection-tab { flex: 1; padding: 12px; gap: 8px; }
 .op-collection-toolbar { gap: 16px; }
 .op-collection-selection { padding: 20px; }
 .op-collection-tools { width: 100%; }
 .op-collection-tools > .op-button { flex: 1; }
 .openpix-app .op-collection-grid { column-width: 230px; column-gap: 20px; }
 .op-collection-page .floating-export-bar { width: calc(100% - 32px); flex-wrap: wrap; padding: 16px; }
 .op-collection-page .floating-export-bar > .d-flex { width: 100%; }
 .op-collection-page .floating-export-bar .op-button { font-size: 11px; }
 .op-collection-page .btn-floating-cloud-export { flex: 1; min-height: 46px; padding: 12px 16px !important; white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
 .op-collection-page .floating-export-bar { animation: none; }
 .op-collection-grid .bento-thumbnail-img { transition: none; }
 .op-collection-summary-card { transition: none; }
}

/* Unified Empty State Widget */
.op-empty-widget {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    width: 100%;
    max-width: 480px;
    margin: 48px auto;
    padding: 36px 32px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
}
.op-empty-widget h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
}
.op-empty-widget .op-button {
    margin-top: 4px;
}

/* Practical guides, with a small diagram that illustrates prompt ingredients. */
.op-library-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.7fr); align-items: center; gap: 36px; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-library-hero .op-page-heading { margin: 0; }
.op-prompt-flow { display: flex; position: relative; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 16px; min-width: 0; }
.op-prompt-flow-lines { position: absolute; width: 100%; height: 100%; inset: 0; pointer-events: none; }
.op-prompt-flow-lines path { stroke: var(--line); stroke-width: 2; }
.op-prompt-flow-lines .op-prompt-flow-trace { stroke: var(--accent); stroke-dasharray: 45 375; animation: op-prompt-trace 7s linear infinite; animation-play-state: paused; }
.op-prompt-flow-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; padding: 12px 8px; border: 1px solid var(--line); border-radius: 16px; background: var(--page); font-size: 11px; }
.op-prompt-flow-symbol { display: grid; place-items: center; width: 52px; height: 52px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--accent); animation: op-prompt-node 7s ease-in-out infinite; animation-play-state: paused; }
.op-prompt-flow-node:nth-of-type(2) .op-prompt-flow-symbol { animation-delay: 2s; }
.op-prompt-flow-node:nth-of-type(3) .op-prompt-flow-symbol { animation-delay: 4s; }
.op-guide-library-section { display: flex; flex-direction: column; gap: 28px; }
.op-style-guide-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.op-style-guide-card { display: flex; flex-direction: column; align-items: start; gap: 20px; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); transition: border-color .2s; }
.op-style-guide-card:hover { border-color: var(--accent); color: var(--ink); }
.op-style-guide-card .op-icon-tile { transition: transform .2s; }
.op-style-guide-card:hover .op-icon-tile { transform: rotate(-6deg); }
.op-style-guide-card h3 { font-size: 21px; line-height: 1.4; }
.op-style-guide-card p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.op-style-guide-card .op-guide-card-action { margin-top: auto; }
/* Guide cards with a community image: the image leads, the copy keeps the card's usual rhythm below it. */
.op-guide-card-body { display: contents; }
:is(.op-guide-card, .op-style-guide-card).has-media { padding: 0; gap: 0; overflow: hidden; }
:is(.op-guide-card, .op-style-guide-card).has-media > .op-guide-card-body { display: flex; flex: 1; flex-direction: column; align-items: start; gap: 22px; width: 100%; padding: 32px; }
.op-style-guide-card.has-media > .op-guide-card-body { gap: 16px; padding: 24px 28px 28px; }
.op-guide-card-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 7; overflow: hidden; background: var(--raised); border-bottom: 1px solid var(--line); }
.op-style-guide-card .op-guide-card-media { aspect-ratio: 16 / 9; }
.op-guide-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
:is(.op-guide-card, .op-style-guide-card):is(:hover, :focus-visible) .op-guide-card-media img { transform: scale(1.04); }
.op-guide-card-media.is-collage { display: grid; grid-template-columns: repeat(auto-fit,minmax(0,1fr)); gap: 2px; background: var(--line); }
.op-guide-card-media > .op-icon-tile { position: absolute; left: 20px; bottom: 16px; color: #fff; background: #0b0d1199; border: 1px solid #ffffff40; backdrop-filter: blur(8px); }
.op-guide-card-media.is-placeholder { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, var(--tint), transparent 60%), radial-gradient(circle at 80% 90%, var(--tint), transparent 55%), var(--raised); }
.op-guide-card-media.is-placeholder > .op-icon-tile { position: static; width: 64px; height: 64px; padding: 18px; border-radius: 18px; color: var(--accent); background: var(--surface); border: 1px solid var(--line); backdrop-filter: none; transition: transform .2s; }
.op-guide-card-media.is-placeholder > .op-icon-tile .op-icon { width: 28px; height: 28px; }
.op-style-guide-card:is(:hover, :focus-visible) .op-guide-card-media.is-placeholder > .op-icon-tile { transform: rotate(-6deg); }
@media (max-width: 760px) { :is(.op-guide-card, .op-style-guide-card).has-media > .op-guide-card-body { padding: 24px; } .op-guide-card-media { aspect-ratio: 16 / 8; } }
@media (prefers-reduced-motion: reduce) { .op-guide-card-media img { transition: none; } }
.op-main > .op-library-article { max-width: 920px; margin-inline: auto; }
.op-library-article { display: flex; flex-direction: column; gap: 36px; }
.op-library-article .op-breadcrumb { flex-wrap: wrap; line-height: 1.8; }
.op-guide-toc { display: flex; flex-direction: column; gap: 20px; padding: 24px; margin-block: 28px 36px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); font-size: 12px; }
.op-guide-toc > div { display: flex; flex-direction: column; gap: 12px; }
.op-guide-toc a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.op-guide-toc a:hover { color: var(--accent); }
.op-guide-example { display: flex; flex-direction: column; gap: 24px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.op-guide-example h3 { font-size: 20px; line-height: 1.5; }
.op-guide-example blockquote { padding: 20px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--tint); color: var(--ink); font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.op-guide-example-explanation { display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
.op-guide-example-explanation > p { color: var(--muted); }
.op-guide-example-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; }
.op-related-guides { display: flex; flex-direction: column; gap: 28px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-related-guides-header { display: flex; align-items: center; gap: 18px; }
.op-related-guides-header > .op-icon-tile { flex-shrink: 0; width: 48px; height: 48px; padding: 14px; border-radius: 14px; }
.op-related-guides-header > div { display: flex; flex-direction: column; gap: 8px; }
.op-related-guides-header h2 { font-size: 23px; line-height: 1.4; }
.op-related-guides-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.op-related-guide { display: flex; flex-direction: column; align-items: start; gap: 20px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--page); transition: border-color .2s; }
.op-related-guide:hover { color: var(--ink); border-color: var(--accent); }
.op-related-guide-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--accent); background: var(--surface); }
.op-related-guide-copy { display: flex; flex-direction: column; gap: 12px; }
.op-related-guide-copy > strong { font-size: 15px; line-height: 1.6; font-weight: 550; letter-spacing: -.02em; }
.op-related-guide-copy > span { font-size: 11px; line-height: 1.9; color: var(--muted); }
.op-related-guide-arrow { width: 18px; height: 18px; margin-top: auto; margin-left: auto; color: var(--accent); transition: transform .2s; }
.op-related-guide:hover .op-related-guide-arrow { transform: translateX(3px); }
.op-related-guides-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.op-related-guides-footer > .op-button { margin-left: auto; }
.op-related-guides .op-button { white-space: normal; }

/* Keep the familiar profile structure and add a little visual character. */
.op-profile-page-heading { display: grid; grid-template-columns: minmax(0,1fr) 150px; align-items: center; padding: 28px 32px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(ellipse at 100% 0,var(--tint),transparent 65%),var(--surface); }
.op-profile-heading-art { position: relative; display: grid; place-items: center; width: 140px; height: 110px; }
.op-profile-heading-frame { display: grid; place-items: center; width: 76px; height: 76px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--accent); transform: rotate(-10deg); box-shadow: 8px 8px 0 var(--tint); }
.op-profile-heading-frame .op-icon { width: 34px; height: 34px; stroke-width: 1.4; }
.op-profile-heading-spark { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--tint); color: var(--accent); }
.op-profile-heading-dot { position: absolute; left: 8px; bottom: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.op-profile-identity { background: radial-gradient(ellipse at 50% 0,var(--tint),transparent 46%),var(--surface); }
.op-profile-avatar { margin-top: 8px; }
.op-profile-avatar::before { content: ''; position: absolute; inset: -8px; border: 1px dashed color-mix(in srgb,var(--accent) 50%,transparent); border-radius: 50%; pointer-events: none; animation: op-avatar-orbit 32s linear infinite; animation-play-state: paused; }
.op-profile-avatar-preview { border-color: color-mix(in srgb,var(--accent) 30%,var(--line)); box-shadow: 0 10px 28px color-mix(in srgb,var(--accent) 12%,transparent); }
.op-profile-totals { gap: 12px; border-top: 0; padding-top: 4px; }
.op-profile-totals > div { display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--page); }
.op-profile-totals dd { color: var(--accent); font-size: 30px; font-weight: 500; letter-spacing: -.04em; }

[data-motion] .op-collection-summary-card, [data-motion] .op-profile-heading-frame { animation: op-art-float 8s ease-in-out infinite; animation-play-state: paused; }
[data-motion].is-moving :is(.op-collection-summary-card,.op-profile-heading-frame,.op-profile-avatar)::before { animation-play-state: running; }
[data-motion].is-moving :is(.op-collection-summary-card,.op-profile-heading-frame,.op-prompt-flow-trace,.op-prompt-flow-symbol) { animation-play-state: running; }
@keyframes op-art-float { 0%,100% { transform: translateY(0) rotate(-9deg); } 50% { transform: translateY(-5px) rotate(-4deg); } }
@keyframes op-avatar-orbit { to { transform: rotate(360deg); } }
@keyframes op-prompt-trace { to { stroke-dashoffset: -420; } }
@keyframes op-prompt-node { 0%,14%,100% { background: var(--surface); transform: translateY(0); } 28% { background: var(--tint); transform: translateY(-4px); } }
.op-generation-graphic { width: 144px; margin: 0 auto 20px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); color: var(--accent); }
.op-generation-graphic svg { display: block; width: 100%; height: auto; overflow: visible; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.op-generation-frame { fill: var(--tint); }
.op-generation-drawing { stroke-dasharray: 170; stroke-dashoffset: 0; animation: op-generation-draw 3.6s ease-in-out infinite; animation-play-state: paused; }
.op-generation-spark { animation: op-generation-glimmer 3.6s ease-in-out infinite; animation-play-state: paused; transform-origin: 137px 18px; }
.op-generation-line { stroke: var(--line); }
.is-moving :is(.op-generation-drawing,.op-generation-spark) { animation-play-state: running; }
.generation-progress-box:has(#progress-error:not(:empty)) .op-generation-graphic { display: none; }
.op-collection-empty-art .op-collection-empty-frame { animation: op-art-float 8s ease-in-out infinite; animation-play-state: paused; }
.op-collection-empty-art.is-moving .op-collection-empty-frame { animation-play-state: running; }
.op-style-card:is(:hover,:focus-visible) > .op-icon-tile > .op-icon { animation: op-style-gesture .5s ease 1; }
.op-style-card[aria-pressed="true"] .op-style-check { animation: op-selection-check .3s ease 1; }
.op-completion-symbol.is-moving > .op-icon { animation: op-award-arrive .7s ease 1; }
@keyframes op-generation-draw { 0%,8% { stroke-dashoffset: 170; } 65%,100% { stroke-dashoffset: 0; } }
@keyframes op-generation-glimmer { 0%,20%,100% { opacity: .45; transform: scale(.85); } 65% { opacity: 1; transform: scale(1.08); } }
@keyframes op-style-gesture { 45% { transform: rotate(-12deg) scale(1.1); } }
@keyframes op-selection-check { 0% { transform: scale(.6); } 70% { transform: scale(1.2); } }
@keyframes op-award-arrive { 0% { transform: translateY(7px) scale(.8) rotate(-10deg); opacity: .4; } 65% { transform: translateY(-3px) scale(1.05) rotate(5deg); } }

/* Small scenes explain each destination without moving the page content. */
.op-page-heading > div { min-width: 0; }
.op-motion-art { display: grid; place-items: center; flex: 0 0 156px; width: 156px; padding: 12px; margin: 0; color: var(--accent); }
.op-motion-art svg { display: block; width: 100%; height: auto; overflow: visible; stroke-linecap: round; stroke-linejoin: round; }
.op-motion-art-halo { fill: var(--tint); opacity: .7; }
.op-motion-art-panel { fill: var(--surface); stroke: var(--line); stroke-width: 1.8; }
.op-motion-art-ink { stroke: currentColor; stroke-width: 1.8; }
.op-motion-art-dots { fill: currentColor; }
.op-motion-art-lift { animation: op-scene-float 7s ease-in-out infinite; animation-play-state: paused; }
.op-motion-art-spark { stroke: currentColor; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: op-generation-glimmer 5s ease-in-out infinite; animation-play-state: paused; }
.op-motion-art-trace { stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 4 8; opacity: .6; animation: op-scene-trace 14s linear infinite; animation-play-state: paused; }
.op-motion-art-signal { fill: currentColor; animation: op-scene-signal 4s ease-in-out infinite; animation-play-state: paused; }
.op-motion-art-signal--later { animation-delay: 1s; }
.op-motion-art.is-moving :is(.op-motion-art-lift,.op-motion-art-spark,.op-motion-art-trace,.op-motion-art-signal) { animation-play-state: running; }
.op-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.op-category-heading > div { min-width: 0; }
.op-guide-motion-mark > .op-icon { transform-origin: center; animation: op-book-gesture 9s ease-in-out infinite; animation-play-state: paused; }
.op-guide-motion-mark.is-moving > .op-icon { animation-play-state: running; }
.op-widget-account[data-motion] .op-widget-frame { animation-play-state: paused; }
.op-widget-account[data-motion].is-moving .op-widget-frame { animation-play-state: running; }
.op-wallpaper-hero-art > span { animation: op-media-float 8s ease-in-out infinite; animation-play-state: paused; }
.op-wallpaper-hero-art > span:nth-child(2) { animation-delay: -2.5s; }
.op-wallpaper-hero-art > span:nth-child(3) { animation-delay: -5s; }
.op-wallpaper-hero-art.is-moving > span { animation-play-state: running; }
.op-login-images.is-moving img { animation: op-media-arrive .7s ease both; }
.op-login-images.is-moving img:nth-child(2) { animation-delay: .1s; }
.op-surprise-art :is(.op-surprise-dice,.op-surprise-orbit,.op-surprise-star) { animation-play-state: paused; }
.op-surprise-art.is-moving :is(.op-surprise-dice,.op-surprise-orbit,.op-surprise-star) { animation-play-state: running; }
.op-surprise-widget.is-paused .op-surprise-art.is-moving * { animation-play-state: paused; }
@keyframes op-scene-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes op-scene-trace { to { stroke-dashoffset: -168; } }
@keyframes op-scene-signal { 0%,100% { opacity: .4; } 45% { opacity: 1; } }
@keyframes op-book-gesture { 0%,65%,100% { transform: rotate(0); } 75% { transform: rotate(-7deg); } 85% { transform: rotate(4deg); } }
@keyframes op-media-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes op-media-arrive { from { opacity: .5; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@media (hover: hover) and (pointer: fine) {
 .op-campaign-tile-media img { transition: transform .45s ease; }
 .op-campaign-tile:is(:hover,:focus-visible) .op-campaign-tile-media img { transform: scale(1.035); }
 .op-button { transition: background .2s,border-color .2s,transform .2s; }
 .op-button:hover { transform: translateY(-1px); }
 .op-button:active { transform: translateY(0); }
 .op-game-tile:is(:hover,:focus-within) .op-icon-tile > .op-icon, .op-creator-card:is(:hover,:focus-visible) .op-creator-card-stats .op-icon { animation: op-style-gesture .5s ease 1; }
}
@media (max-width: 1100px) { .op-library-hero { grid-template-columns: 1fr; gap: 20px; } .op-prompt-flow { max-width: 520px; width: 100%; margin-inline: auto; } .op-style-guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) {
 .op-page-heading:has(> .op-motion-art) { flex-direction: row; align-items: center; }
 .op-motion-art { flex-basis: 84px; width: 84px; padding: 8px; }
 .op-library-hero { padding: 24px 20px; }
 .op-style-guide-grid { grid-template-columns: 1fr; gap: 20px; }
 .op-style-guide-card { padding: 24px; }
 .op-guide-example { padding: 20px; gap: 20px; }
 .op-guide-example blockquote { padding: 16px; }
 .op-related-guides { padding: 24px 20px; gap: 24px; }
 .op-related-guides-grid { grid-template-columns: 1fr; }
 .op-related-guides-header { align-items: start; gap: 14px; }
 .op-related-guides-header h2 { font-size: 20px; }
 .op-related-guide { padding: 20px; }
 .op-profile-page-heading { grid-template-columns: minmax(0,1fr) 64px; padding: 24px 20px; gap: 16px; }
 .op-profile-page-heading .op-page-heading h1 { font-size: 28px; }
 .op-profile-heading-art { width: 64px; height: 80px; }
 .op-profile-heading-frame { width: 52px; height: 52px; padding: 12px; border-radius: 14px; }
 .op-profile-heading-frame .op-icon { width: 26px; height: 26px; }
 .op-profile-heading-spark { width: 32px; height: 32px; padding: 7px; border-radius: 10px; right: -4px; top: -4px; }
 .op-profile-heading-spark .op-icon { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 [data-motion] *, [data-motion] ::before { animation: none !important; transition: none !important; }
 .op-style-guide-card .op-icon-tile { transition: none; }
 .op-style-card:is(:hover,:focus-visible) > .op-icon-tile > .op-icon, .op-style-card[aria-pressed="true"] .op-style-check { animation: none; }
}

/* Profile backgrounds: the account picks one (cards, diffusion, light table or off); it sits underneath all page content.
   Everything is drawn in theme tokens at low opacity, so it suits light and dark and never competes with the page. */
.openpix-app { isolation: isolate; }
.op-motion-background { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: strict; color: var(--accent); }
.op-bg-layer { position: absolute; inset: 0; display: none; }
.op-motion-background[data-variant="cards"] .op-bg-cards, .op-motion-background[data-variant="diffusion"] .op-bg-diffusion, .op-motion-background[data-variant="lighttable"] .op-bg-lighttable { display: block; }

/* Bildkarten (animated) */
.op-motion-background-orbit { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: .65; opacity: .11; }
.op-motion-background-orbit ellipse:last-child { stroke-dasharray: 3 14; }
.op-motion-background-tile { position: absolute; display: flex; flex-direction: column; align-items: start; gap: 12px; width: 116px; height: 138px; padding: 20px; border: 1px solid currentColor; border-radius: 20px; background: color-mix(in srgb,var(--tint) 45%,transparent); opacity: .13; transform: rotate(var(--motion-angle,-9deg)); animation: op-background-drift var(--motion-duration,30s) ease-in-out infinite; animation-delay: var(--motion-delay,0s); animation-play-state: paused; }
.op-motion-background-tile > .op-icon { width: 44px; height: 44px; stroke-width: 1.3; margin-bottom: auto; }
.op-motion-background-caption { display: block; width: 100%; height: 2px; border-radius: 3px; background: currentColor; }
.op-motion-background-caption:last-child { width: 60%; }
.op-motion-background-tile-1 { left: 18%; top: 11%; --motion-angle: -14deg; --motion-duration: 34s; }
.op-motion-background-tile-2 { right: 6%; top: 15%; width: 88px; height: 100px; --motion-angle: 12deg; --motion-duration: 28s; --motion-delay: -8s; }
.op-motion-background-tile-3 { left: 44%; top: 45%; --motion-angle: 8deg; --motion-duration: 38s; --motion-delay: -12s; }
.op-motion-background-tile-4 { left: 3%; top: 67%; --motion-angle: -7deg; --motion-duration: 32s; --motion-delay: -5s; }
.op-motion-background-tile-5 { right: 9%; bottom: 9%; --motion-angle: 17deg; --motion-duration: 36s; --motion-delay: -17s; }
.op-motion-background-tile-6 { left: 27%; bottom: 3%; width: 86px; height: 104px; --motion-angle: -12deg; --motion-duration: 26s; --motion-delay: -9s; }
.op-motion-background-tile-7 { right: 33%; top: -5%; --motion-angle: 9deg; --motion-duration: 40s; --motion-delay: -21s; }
.op-motion-background-glow { position: absolute; width: 70vw; height: 80vh; right: -10vw; top: 10vh; background: radial-gradient(ellipse,color-mix(in srgb,var(--tint) 65%,transparent),transparent 70%); opacity: .5; animation: op-background-glow 38s ease-in-out infinite; animation-play-state: paused; }
.op-motion-background.is-running :is(.op-motion-background-tile,.op-motion-background-glow) { animation-play-state: running; }
/* Diffusion (animated): a dot field, two slow waves of light and image frames that condense out of the noise. */
:is(.op-bg-diffusion-dots, .op-bg-diffusion-wave) { position: absolute; inset: -10%; background-image: radial-gradient(circle, currentColor 1.1px, transparent 1.6px); background-size: 22px 22px; }
.op-bg-diffusion-dots { opacity: .07; }
.op-bg-diffusion-wave { opacity: .5; -webkit-mask: radial-gradient(closest-side, #000, transparent) 0 20% / 46vmax 46vmax no-repeat; mask: radial-gradient(closest-side, #000, transparent) 0 20% / 46vmax 46vmax no-repeat; animation: op-bg-wave 26s ease-in-out infinite paused; }
.op-bg-diffusion-wave + .op-bg-diffusion-wave { opacity: .35; -webkit-mask-size: 34vmax 34vmax; mask-size: 34vmax 34vmax; animation-duration: 34s; animation-delay: -13s; animation-direction: reverse; }
.op-bg-diffusion-frame { position: absolute; border: 1px solid currentColor; border-radius: 18px; background: radial-gradient(circle, currentColor 1.4px, transparent 2px) 0 0 / 10px 10px; opacity: 0; animation: op-bg-form 18s ease-in-out infinite paused; }
.op-bg-diffusion-frame:nth-of-type(4) { left: 14%; top: 18%; width: 180px; height: 136px; }
.op-bg-diffusion-frame:nth-of-type(5) { right: 12%; top: 46%; width: 136px; height: 176px; animation-delay: -6s; }
.op-bg-diffusion-frame:nth-of-type(6) { left: 46%; bottom: 8%; width: 160px; height: 120px; animation-delay: -12s; }
.op-motion-background.is-running :is(.op-bg-diffusion-wave, .op-bg-diffusion-frame) { animation-play-state: running; }
@keyframes op-bg-wave { 33% { -webkit-mask-position: 70% 0%; mask-position: 70% 0%; } 66% { -webkit-mask-position: 100% 80%; mask-position: 100% 80%; } }
@keyframes op-bg-form { 0%, 100% { opacity: 0; transform: scale(.94); filter: blur(6px); } 35%, 55% { opacity: .16; transform: none; filter: blur(0); } }

/* Leuchttisch (still): a contact sheet of frames with crop marks, a film strip and a soft lamp in one corner. */
.op-bg-lighttable-lamp { position: absolute; right: -12vw; top: -14vh; width: 70vw; height: 70vh; background: radial-gradient(ellipse, color-mix(in srgb, var(--tint) 85%, transparent), transparent 68%); opacity: .7; }
.op-bg-lighttable-strip { position: absolute; left: -10%; right: -10%; top: 38%; height: 64px; transform: rotate(-8deg); border-block: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, currentColor 12%, transparent) 18px 30px) top / 100% 9px no-repeat, repeating-linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, currentColor 12%, transparent) 18px 30px) bottom / 100% 9px no-repeat; opacity: .8; }
.op-bg-lighttable-frame { position: absolute; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 10px; background: color-mix(in srgb, currentColor 3%, transparent); transform: rotate(var(--r)); }
.op-bg-lighttable-frame::before, .op-bg-lighttable-frame::after, .op-bg-lighttable-frame i { position: absolute; width: 14px; height: 14px; content: ""; border: 0 solid color-mix(in srgb, currentColor 40%, transparent); }
.op-bg-lighttable-frame::before { left: -9px; top: -9px; border-width: 1px 0 0 1px; }
.op-bg-lighttable-frame::after { right: -9px; bottom: -9px; border-width: 0 1px 1px 0; }
.op-bg-lighttable-frame i:first-child { right: -9px; top: -9px; border-width: 1px 1px 0 0; }
.op-bg-lighttable-frame i:last-child { left: -9px; bottom: -9px; border-width: 0 0 1px 1px; }
.op-bg-lighttable-frame:nth-of-type(3) { left: 8%; top: 12%; width: 150px; height: 112px; --r: -3deg; }
.op-bg-lighttable-frame:nth-of-type(4) { left: 20%; top: 58%; width: 112px; height: 150px; --r: 4deg; }
.op-bg-lighttable-frame:nth-of-type(5) { left: 74%; top: 9%; width: 132px; height: 100px; --r: 2deg; }
.op-bg-lighttable-frame:nth-of-type(6) { left: 83%; top: 52%; width: 150px; height: 112px; --r: -4deg; }
.op-bg-lighttable-frame:nth-of-type(7) { left: 56%; top: 78%; width: 112px; height: 84px; --r: 3deg; }
.op-bg-lighttable-frame:nth-of-type(8) { left: 38%; top: 26%; width: 96px; height: 72px; --r: -2deg; }
.op-bg-lighttable-frame:nth-of-type(9) { left: 4%; top: 82%; width: 100px; height: 76px; --r: 5deg; }

/* Profile setting: four choices with a small preview each; picking one previews it live behind the page. */
.op-profile-background { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 24px; margin: 24px 0 0; border: 1px solid var(--line); border-radius: 16px; background: var(--page); }
.op-profile-background legend { float: left; width: 100%; margin: 0; padding: 0; font-size: 13px; font-weight: 550; }
.op-profile-background-intro { color: var(--muted); font-size: 11px; line-height: 1.8; }
.op-background-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.op-background-option { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 10px 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .2s, background .2s; }
.op-background-option:hover { border-color: var(--accent); }
.op-background-option:has(input:checked) { border-color: var(--accent); background: var(--tint); }
.op-background-option:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; }
.op-background-option input { position: absolute; opacity: 0; pointer-events: none; }
.op-background-option strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline: 4px; font-size: 12px; font-weight: 550; }
.op-background-option strong .op-icon { width: 16px; height: 16px; color: var(--accent); opacity: 0; }
.op-background-option:has(input:checked) strong .op-icon { opacity: 1; }
.op-background-option-hint { padding-inline: 4px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.op-background-preview { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--page); color: var(--accent); }
.op-background-preview > span { position: absolute; }
.op-background-preview[data-preview="off"]::after { content: ""; position: absolute; inset: 50% 30% auto; border-top: 1px solid var(--line); }
.op-background-preview[data-preview="cards"] > span { width: 26%; height: 38%; border: 1px solid currentColor; border-radius: 6px; background: var(--tint); opacity: .7; }
.op-background-preview[data-preview="cards"] > span:nth-child(1) { left: 14%; top: 18%; transform: rotate(-12deg); }
.op-background-preview[data-preview="cards"] > span:nth-child(2) { right: 14%; top: 12%; transform: rotate(10deg); }
.op-background-preview[data-preview="cards"] > span:nth-child(3) { left: 40%; bottom: 10%; transform: rotate(3deg); }
.op-background-preview[data-preview="diffusion"] { background: radial-gradient(circle, color-mix(in srgb, currentColor 45%, transparent) 1px, transparent 1.5px) 0 0 / 9px 9px, var(--page); }
.op-background-preview[data-preview="diffusion"] > span { left: 30%; top: 26%; width: 40%; height: 48%; border: 1px solid currentColor; border-radius: 6px; background: radial-gradient(circle, currentColor 1.2px, transparent 1.7px) 0 0 / 5px 5px; opacity: .6; }
.op-background-preview[data-preview="lighttable"] { background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--tint) 90%, transparent), transparent 60%), var(--page); }
.op-background-preview[data-preview="lighttable"] > span { width: 30%; height: 34%; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 4px; }
.op-background-preview[data-preview="lighttable"] > span:nth-child(1) { left: 12%; top: 16%; transform: rotate(-3deg); }
.op-background-preview[data-preview="lighttable"] > span:nth-child(2) { right: 12%; bottom: 14%; transform: rotate(4deg); }
.op-background-preview[data-preview="lighttable"] > span:nth-child(3) { left: -10%; right: -10%; top: 46%; width: auto; height: 12%; border-width: 1px 0; border-radius: 0; transform: rotate(-8deg); }
.op-motion-reduced-note { display: none; color: var(--muted); font-size: 11px; line-height: 1.8; }

@keyframes op-background-drift { 0%,100% { transform: translate3d(0,0,0) rotate(var(--motion-angle)); } 50% { transform: translate3d(18px,-28px,0) rotate(calc(var(--motion-angle) + 7deg)); } }
@keyframes op-background-glow { 50% { transform: translate3d(-8vw,5vh,0); opacity: .3; } }
@media (max-width: 960px) { .op-background-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
 .op-profile-background { padding: 20px; }
 .op-motion-background-tile { width: 82px; height: 100px; padding: 16px; gap: 8px; opacity: .1; }
 .op-motion-background-tile > .op-icon { width: 32px; height: 32px; }
 .op-motion-background-tile-3, .op-motion-background-tile-6, .op-motion-background-tile-7, .op-bg-diffusion-frame:nth-of-type(6), .op-bg-lighttable-frame:nth-of-type(n+8) { display: none; }
}
/* Reduced motion keeps the chosen background as a still picture. */
@media (prefers-reduced-motion: reduce) {
 .op-motion-background * { animation: none !important; }
 .op-bg-diffusion-frame:nth-of-type(4) { opacity: .14; }
 .op-motion-reduced-note { display: block; }
}

/* Daily web budget: a quiet floating pointer to the Android app. */
.op-usage { --usage-tone: var(--accent); --usage-warn: #f2b37e; position: fixed; z-index: 1030; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom,0px)); display: flex; flex-direction: column; align-items: flex-end; color: var(--ink); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1); }
:root[data-theme="light"] .op-usage { --usage-warn: var(--accent-2); }
.op-usage[data-ready] { opacity: 1; transform: none; pointer-events: auto; }
.op-usage[data-level="high"], .op-usage[data-level="reached"] { --usage-tone: var(--usage-warn); }
.openpix-app:has(.sticky-ad-bar) .op-usage { bottom: calc(24px + 50px + env(safe-area-inset-bottom,0px)); }
.op-menu-open .op-usage { visibility: hidden; }
.op-usage-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); box-shadow: var(--shadow); font-size: 12px; font-variant-numeric: tabular-nums; transition: border-color .2s, transform .2s; }
.op-usage-pill:hover { border-color: var(--usage-tone); transform: translateY(-2px); }
.op-usage-pill-count strong { color: var(--ink); font-weight: 650; }
.op-usage-pill-app { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--tint); color: var(--accent); font-weight: 600; }
.op-usage-pill-app > .op-icon { width: 15px; height: 15px; }
.op-usage[data-level="reached"] .op-usage-pill-app { background: var(--usage-warn); color: var(--page); }
.op-usage-ring { width: 34px; height: 34px; flex: 0 0 auto; transform: rotate(-90deg); }
.op-usage-ring circle { fill: none; stroke: var(--raised); stroke-width: 4; }
.op-usage-ring .op-usage-ring-value { stroke: var(--usage-tone); stroke-linecap: round; }
.op-usage-panel { display: none; flex-direction: column; width: 296px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.op-usage[data-state="open"] .op-usage-panel { display: flex; animation: op-usage-in .35s cubic-bezier(.16,1,.3,1); }
.op-usage[data-state="open"] .op-usage-pill { display: none; }
.op-usage-head { display: flex; align-items: center; justify-content: space-between; margin: -4px -10px 2px 0; }
.op-usage-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 550; letter-spacing: .09em; text-transform: uppercase; }
.op-usage-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--usage-tone); animation: op-usage-pulse 2.4s ease-out infinite; }
.op-usage-collapse { width: 36px; min-height: 36px; padding: 8px; }
.op-usage-count { display: flex; align-items: baseline; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; }
.op-usage-count strong { font-size: 34px; font-weight: 650; line-height: 1.1; letter-spacing: -.04em; color: var(--ink); }
.op-usage[data-level="reached"] .op-usage-count strong { color: var(--usage-warn); }
.op-usage-count span { color: var(--muted); font-size: 15px; font-weight: 500; }
.op-usage-caption { margin: 2px 0 14px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.op-usage-meter { display: block; width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 999px; background: var(--raised); color: var(--usage-tone); appearance: none; }
.op-usage-meter::-webkit-progress-bar { background: var(--raised); border-radius: 999px; }
.op-usage-meter::-webkit-progress-value { background: var(--usage-tone); border-radius: 999px; }
.op-usage-meter::-moz-progress-bar { background: var(--usage-tone); border-radius: 999px; }
.op-usage-remaining { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.op-usage-app { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 12px; align-items: center; margin-top: 16px; padding: 12px; border-radius: 12px; background: var(--tint); }
.op-usage-device { display: grid; place-items: center; width: 30px; height: 46px; margin-inline: auto; padding: 3px; border: 1.5px solid var(--accent); border-radius: 8px; background: var(--surface); transform: rotate(-8deg); transition: transform .3s cubic-bezier(.16,1,.3,1); }
.op-usage-device-screen { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 5px; background: var(--tint); color: var(--accent); }
.op-usage-device-screen > .op-icon { width: 14px; height: 14px; }
.op-usage-app:hover .op-usage-device, .op-usage[data-level="reached"] .op-usage-device { transform: rotate(4deg) translateY(-2px); }
.op-usage-app-copy { display: flex; flex-direction: column; gap: 3px; }
.op-usage-app-copy strong { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.op-usage-app-copy span { color: var(--muted); font-size: 11px; line-height: 1.55; }
.openpix-app .op-usage-store { display: flex; align-items: center; gap: 12px; min-height: 50px; margin-top: 12px; padding: 9px 14px; border-radius: 12px; background: var(--ink); color: var(--page); text-decoration: none; transition: background .2s, color .2s, transform .2s; }
.openpix-app .op-usage-store:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-1px); }
.op-usage-play { width: 20px; height: 20px; flex: 0 0 auto; fill: currentColor; }
.op-usage-store-copy { display: flex; flex-direction: column; line-height: 1.2; }
.op-usage-store-copy span { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.op-usage-store-copy strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.op-usage-store > .op-icon { width: 16px; height: 16px; margin-left: auto; }
@keyframes op-usage-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes op-usage-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--usage-tone) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media (max-width: 640px) {
  .op-usage { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom,0px)); }
  .openpix-app:has(.sticky-ad-bar) .op-usage { bottom: calc(16px + 50px + env(safe-area-inset-bottom,0px)); }
  .op-usage-panel { width: min(320px, calc(100vw - 32px)); }
}
@media print { .op-usage { display: none; } }

/* "Just created": a slow band of the newest community images. */
.op-ticker { display: flex; align-items: center; gap: 20px; margin-top: 32px; padding: 10px 0; border-block: 1px solid var(--line); }
.op-ticker-label { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.op-ticker-label h2 { margin: 0; color: var(--muted); font-size: 10px; font-weight: 550; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.op-ticker-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: op-ticker-live 2.4s ease-out infinite; }
.openpix-app .op-ticker-toggle { min-height: 32px; }
.op-ticker-toggle { display: grid; place-items: center; width: 32px; height: 32px; padding: 8px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.op-ticker-toggle:hover { color: var(--ink); background: var(--raised); }
.op-ticker-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.op-ticker-play, .op-ticker[data-paused] .op-ticker-pause { display: none; }
.op-ticker[data-paused] .op-ticker-play { display: inline; }
.op-ticker-viewport { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.op-ticker-track { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; animation: op-ticker-scroll var(--ticker-duration, 70s) linear infinite; }
.op-ticker:is(:has(.op-ticker-viewport:hover), :has(.op-ticker-item:focus-visible), [data-paused]) .op-ticker-track { animation-play-state: paused; }
.op-ticker-item { display: flex; align-items: center; gap: 10px; max-width: 260px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s; }
.op-ticker-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.op-ticker-item img { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: var(--raised); }
.op-ticker-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.op-ticker-prompt { overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.op-ticker-copy time { color: var(--muted); font-size: 10.5px; }
@keyframes op-ticker-scroll { to { transform: translateX(calc(-50% - 6px)); } }
@keyframes op-ticker-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media (max-width: 640px) {
  .op-ticker { flex-direction: column; align-items: stretch; gap: 10px; }
  .op-ticker-item { max-width: 210px; }
}
/* Without motion the band becomes a plain, swipeable row. */
@media (prefers-reduced-motion: reduce) {
  .op-ticker-track { animation: none; }
  .op-ticker-viewport { overflow-x: auto; mask-image: none; }
  .op-ticker-track li[aria-hidden="true"], .op-ticker-toggle { display: none; }
}

/* Image ⇄ detail page transition; openpix-transitions.js skips every other navigation. */
@view-transition { navigation: auto; }
::view-transition-group(op-image) { animation-duration: .45s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
::view-transition-old(op-image), ::view-transition-new(op-image) { height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

[data-count-up] { font-variant-numeric: tabular-nums; }

/* Style picker: styles with a community image always show it as the card background; the others keep the plain card. */
:is(.op-style-card, .openpix-app .op-style-choice):has(.op-style-preview) { position: relative; isolation: isolate; overflow: hidden; }
.op-style-preview { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; background: var(--raised); transition: transform .6s cubic-bezier(.16,1,.3,1); pointer-events: none; }
:is(.op-style-card, .op-style-choice):is(:hover, :focus-visible) .op-style-preview { transform: scale(1.04); }
:is(.op-style-card, .op-style-choice):has(.op-style-preview)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #000000b8 0%, #00000085 50%, #000000d0 100%); pointer-events: none; }
.openpix-app :is(.op-style-card, .op-style-choice):has(.op-style-preview) :is(strong, .op-style-description, .style-card-text, .style-card-desc, .op-icon) { color: #fff; text-shadow: 0 1px 3px #000a; }
:is(.op-style-card, .op-style-choice):has(.op-style-preview) .op-icon-tile { background: #ffffff26; border-color: #ffffff40; }
:is(.op-style-card, .openpix-app .op-style-choice):has(.op-style-preview)[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* Home: the composer overlaps the hero so the prompt and the generate button sit in the first view. */
.op-hero:has(+ .op-studio) .op-stage-viewport { height: clamp(300px, 26vw, 400px); }
.op-hero:has(+ .op-studio) .op-hero-copy { bottom: 110px; }
.op-hero:has(+ .op-studio) .op-slide-dots { display: none; }
.op-hero + .op-studio { position: relative; z-index: 4; width: min(100%, 860px); margin-top: -96px; box-shadow: 0 24px 60px -24px #0000008c; }
/* The prompt starts at about four lines and grows with the text (JS fallback where field-sizing is missing). */
.op-studio .prompt-textarea { height: auto; min-height: 120px; max-height: 260px; field-sizing: content; }
@media (max-width: 640px) {
  .op-hero:has(+ .op-studio) .op-hero-copy { bottom: 84px; }
  .op-hero + .op-studio { margin-top: -64px; }
  .op-studio .prompt-textarea { min-height: 110px; }
}

/* Campaign bar: one slim line above the header; each notice can be dismissed in the browser. */
.op-campaign-bar { border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink); }
:root[data-theme="light"] .op-campaign-bar { background: var(--announcement); border-bottom-color: var(--announcement-line); }
.op-campaign-bar[hidden], .op-campaign-slide[hidden] { display: none; }
.op-campaign-slide { display: flex; align-items: center; gap: 8px; width: min(100%, 1240px); min-height: 52px; margin-inline: auto; padding: 6px 12px 6px 24px; }
.op-campaign-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.op-campaign-link:hover { color: inherit; }
.op-campaign-thumb { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; overflow: hidden; border-radius: 8px; background: var(--raised); color: var(--accent); transform: rotate(-4deg); transition: transform .2s; }
.op-campaign-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.op-campaign-thumb .op-icon { width: 18px; height: 18px; }
.op-campaign-link:hover .op-campaign-thumb { transform: none; }
.op-campaign-bar-copy { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.op-campaign-eyebrow { flex: 0 0 auto; color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.op-campaign-title { flex: 0 0 auto; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.op-campaign-description { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.op-campaign-countdown { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.op-campaign-countdown .op-icon { width: 14px; height: 14px; }
.op-campaign-join { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; margin-left: auto; min-height: 34px; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; transition: transform .2s; }
.op-campaign-countdown + .op-campaign-join { margin-left: 0; }
.op-campaign-join .op-icon { width: 14px; height: 14px; }
.op-campaign-link:hover .op-campaign-join { transform: translateX(2px); }
.openpix-app .op-campaign-close { width: 40px; min-height: 40px; padding: 10px; }
@media (max-width: 960px) { .op-campaign-description { display: none; } }
@media (max-width: 640px) {
  .op-campaign-slide { min-height: 48px; padding: 2px 4px 2px 16px; gap: 4px; }
  .op-campaign-link { gap: 10px; }
  .op-campaign-thumb { width: 30px; height: 30px; }
  .op-campaign-eyebrow, .op-campaign-countdown { display: none; }
  .op-campaign-bar-copy { flex: 1; }
  .op-campaign-title { min-width: 0; overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
  .op-campaign-join { min-height: 32px; padding: 6px 12px; }
  .openpix-app .op-campaign-close { width: 44px; min-height: 44px; }
}

/* Campaign community gallery: newest images of the campaign, free slots invite the next one. */
.op-campaign-gallery .op-section-heading p strong { color: var(--ink); font-weight: 600; }
.op-campaign-gallery-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.op-campaign-gallery-grid li { min-width: 0; }
.op-campaign-gallery-item, .op-campaign-gallery-slot { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; }
.op-campaign-gallery-item { background: var(--raised); text-decoration: none; }
.op-campaign-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.op-campaign-gallery-item:hover img { transform: scale(1.04); }
.op-campaign-gallery-item time { position: absolute; inset: 8px auto auto 8px; width: max-content; max-width: calc(100% - 16px); padding: 4px 9px; border-radius: 999px; background: #000000a6; color: #fff; font-size: 10.5px; backdrop-filter: blur(6px); }
.op-campaign-gallery-slot { display: grid; place-items: center; border: 1.5px dashed var(--line); background: transparent; color: var(--line); }
.op-campaign-gallery-slot > .op-icon { width: 26px; height: 26px; }
.openpix-app .op-campaign-gallery-slot.is-next { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 0; padding: 16px; border-color: var(--accent); background: var(--tint); color: var(--ink); text-align: center; transition: transform .2s, background .2s; }
.op-campaign-gallery-slot.is-next:hover { transform: translateY(-3px); }
.op-campaign-gallery-slot.is-next strong { font-size: 13px; font-weight: 600; }
.op-campaign-gallery-slot.is-next > span:last-child { color: var(--muted); font-size: 11px; line-height: 1.5; }
.op-campaign-gallery-slot-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); animation: op-gallery-invite 2.6s ease-in-out infinite; }
.op-campaign-gallery-slot-icon .op-icon { width: 20px; height: 20px; }
@keyframes op-gallery-invite { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 1100px) { .op-campaign-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .op-campaign-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .op-campaign-gallery-grid li[aria-hidden="true"] { display: none; }
}

/* Campaign card mode: options are dealt as cards, the progress becomes the player's hand. */
.op-campaign-builder.is-card-mode { --card-tone-1: var(--accent); --card-tone-2: #f2a27e; --card-tone-3: #e6c56f; --card-tone-4: #b3a6ff; }
:root[data-theme="light"] .op-campaign-builder.is-card-mode { --card-tone-2: #b4573a; --card-tone-3: #94701c; --card-tone-4: #5f52b0; }
.is-card-mode #screen-step-1, .is-card-mode :is([data-card-slot="1"], [data-card-tone="1"]) { --card-tone: var(--card-tone-1); }
.is-card-mode #screen-step-2, .is-card-mode :is([data-card-slot="2"], [data-card-tone="2"]) { --card-tone: var(--card-tone-2); }
.is-card-mode #screen-step-3, .is-card-mode :is([data-card-slot="3"], [data-card-tone="3"]) { --card-tone: var(--card-tone-3); }
.is-card-mode #screen-step-4, .is-card-mode :is([data-card-slot="4"], [data-card-tone="4"]) { --card-tone: var(--card-tone-4); }
.is-card-mode .op-option-radio { display: none; }
/* clip keeps the rounded frame but, unlike hidden, lets the hand stick on phones. */
.openpix-app .op-campaign-builder.is-card-mode, .op-campaign-builder.is-card-mode .wizard-backdrop-container { overflow: clip; }
.op-card-icon { display: none; }

/* Cards */
.op-campaign-builder.is-card-mode .wizard-options-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; perspective: 1000px; }
.op-campaign-builder.is-card-mode #screen-step-1 .wizard-options-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.op-campaign-builder.is-card-mode #screen-step-4 .wizard-options-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.openpix-app .is-card-mode .wizard-option-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; aspect-ratio: 3 / 4; min-height: 0; height: auto; padding: 18px 12px; border: 1px solid color-mix(in srgb, var(--card-tone) 40%, var(--line)); border-radius: 14px; background: linear-gradient(165deg, color-mix(in srgb, var(--card-tone) 18%, var(--surface)), var(--surface) 58%); color: var(--ink); text-align: center; font-family: var(--campaign-font, inherit); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; overflow-wrap: anywhere; hyphens: auto; box-shadow: 0 8px 18px -12px #0008; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s, border-color .2s; }
.openpix-app .is-card-mode .step4-preset-btn { aspect-ratio: auto; min-height: 132px; padding: 22px 18px; text-align: center !important; font-size: 1.05rem !important; }
.openpix-app .is-card-mode .wizard-option-btn[hidden] { display: none !important; }
.is-card-mode .wizard-option-btn::after { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--card-tone) 22%, transparent); border-radius: 10px; pointer-events: none; }
.is-card-mode .op-card-icon { display: block; width: 30px; height: 30px; color: var(--card-tone); }
.openpix-app .is-card-mode .wizard-option-btn:hover { transform: translateY(-6px) rotate(-1.2deg); border-color: var(--card-tone); background: linear-gradient(165deg, color-mix(in srgb, var(--card-tone) 24%, var(--surface)), var(--surface) 62%); color: var(--ink); box-shadow: 0 18px 30px -16px #0009; }
.openpix-app .is-card-mode .wizard-option-btn.selected, .openpix-app .is-card-mode .wizard-option-btn.is-drawn { transform: translateY(-10px); border-color: var(--card-tone); color: var(--ink); box-shadow: 0 0 0 2px var(--card-tone), 0 20px 34px -16px #000a; }
.is-card-mode .wizard-option-btn.is-dealt { animation: op-card-deal .6s cubic-bezier(.16,1,.3,1) var(--deal-delay, 0ms) backwards; }
@keyframes op-card-deal { from { opacity: 0; transform: translateY(-28px) rotateY(88deg) scale(.9); } 55% { opacity: 1; } }

/* Shuffle and show-all */
.op-card-controls { display: flex; align-items: center; gap: 16px; flex: 1; flex-wrap: wrap; }
.is-card-mode .op-card-controls + .wizard-back-btn { order: -1; }
.openpix-app .op-card-shuffle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--card-tone) 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--card-tone) 12%, var(--surface)); color: var(--ink); font-size: 12px; font-weight: 600; }
.op-card-shuffle .op-icon { width: 16px; height: 16px; color: var(--card-tone); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.op-card-shuffle:not(:disabled):hover .op-icon { transform: rotate(180deg); }
.op-card-shuffle-count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.openpix-app .op-card-shuffle:disabled { opacity: .5; cursor: default; }
.op-card-show-all { font-size: 12px; }

/* The hand */
.op-card-hand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; }
.op-card-hand[data-size="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.openpix-app .op-card-slot { min-width: 0; display: flex; flex-direction: column; align-items: start; justify-content: space-between; gap: 6px; min-height: 76px; padding: 10px 12px; border: 1.5px dashed var(--line); border-radius: 12px; background: transparent; color: var(--muted); text-align: left; transition: border-color .2s, box-shadow .2s, transform .2s; }
.op-card-slot > .op-icon { width: 16px; height: 16px; color: var(--card-tone); }
.op-card-slot-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.op-card-slot-value { display: -webkit-box; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; color: var(--ink); font-family: var(--campaign-font, inherit); font-size: 13px; line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.op-card-slot-value:empty { display: none; }
.openpix-app .op-card-slot.is-filled { border-style: solid; border-color: color-mix(in srgb, var(--card-tone) 50%, var(--line)); background: linear-gradient(165deg, color-mix(in srgb, var(--card-tone) 16%, var(--surface)), var(--surface) 65%); animation: op-card-land .5s cubic-bezier(.16,1,.3,1); }
.openpix-app .op-card-slot.is-filled:hover { transform: translateY(-3px); border-color: var(--card-tone); }
.openpix-app .op-card-slot.is-current { border-color: var(--card-tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-tone) 22%, transparent); }
.openpix-app .op-card-slot:disabled { cursor: default; }
@keyframes op-card-land { from { transform: translateY(-16px) scale(1.08) rotate(-4deg); } }
.is-card-mode:is([data-state="start"], [data-state="result"]) .op-card-hand { display: none; }
.is-card-mode[data-state="review"] .wizard-review-list { display: none; }

/* Start screen: "Let's go" and the booster as an equal pair, the way back sits quietly bottom right */
.is-card-mode[data-state="start"] .wizard-content-wrapper { display: flex; flex-direction: column; }
.is-card-mode #screen-start { flex: 1; }
.op-card-start-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-top: 4px; }
.openpix-app .op-card-start-actions #btn-start-wizard { min-height: 60px; padding: 0 30px; border-radius: 999px; font-size: 15px; box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .2s, box-shadow .2s; }
.openpix-app .op-card-start-actions #btn-start-wizard:hover { transform: translateY(-2px); }
.openpix-app .op-card-booster { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 24px 8px 8px; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 999px; background: var(--tint); color: var(--ink); text-align: left; transition: transform .2s, border-color .2s; }
.openpix-app .op-card-booster:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); }
.op-card-booster-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.op-card-booster-icon .op-icon { width: 22px; height: 22px; animation: op-card-wiggle 5s ease-in-out 1.5s infinite; }
.op-card-booster-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.op-card-booster-copy strong { font-size: 15px; font-weight: 600; }
.op-card-booster-copy span { color: var(--muted); font-size: 11.5px; }
@keyframes op-card-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-16deg); } 94% { transform: rotate(14deg); } 97% { transform: rotate(-6deg); } }
.is-card-mode .op-wizard-start > .op-link { align-self: flex-end; margin-top: auto; color: var(--muted); font-size: 12px; }
.is-card-mode .op-wizard-start > .op-link:hover { color: var(--accent); }
.is-card-mode[data-booster="running"] .wizard-options-list { pointer-events: none; }

/* Playing the hand: the cards slide into one stack while the image is created */
.op-card-hand > :nth-child(1) { --stack-x: 150%; --stack-r: -9deg; }
.op-card-hand > :nth-child(2) { --stack-x: 50%; --stack-r: -3deg; }
.op-card-hand > :nth-child(3) { --stack-x: -50%; --stack-r: 3deg; }
.op-card-hand > :nth-child(4) { --stack-x: -150%; --stack-r: 9deg; }
.op-card-hand[data-size="3"] > :nth-child(1) { --stack-x: 100%; }
.op-card-hand[data-size="3"] > :nth-child(2) { --stack-x: 0%; }
.op-card-hand[data-size="3"] > :nth-child(3) { --stack-x: -100%; }
.is-card-mode[data-state="loading"] .op-card-slot { background-color: var(--surface); animation: op-card-stack .8s cubic-bezier(.16,1,.3,1) forwards; }
.is-card-mode[data-state="loading"] .op-card-hand { animation: op-card-float 2.4s ease-in-out .8s infinite; }
@keyframes op-card-stack { to { transform: translateX(var(--stack-x)) rotate(var(--stack-r)); } }
@keyframes op-card-float { 50% { transform: translateY(-8px); } }

/* The result turns over like the face of the finished card */
.is-card-mode[data-state="result"] .wizard-result-img { animation: op-card-reveal 1s cubic-bezier(.16,1,.3,1); }
@keyframes op-card-reveal { from { opacity: 0; transform: perspective(1000px) rotateY(75deg) scale(.92); filter: blur(12px); } 60% { filter: blur(2px); } }

@media (max-width: 1100px) { .op-campaign-builder.is-card-mode #screen-step-1 .wizard-options-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .is-card-mode .op-card-hand { position: sticky; top: var(--card-hand-top, 8px); z-index: 5; margin: 0 -10px 20px; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); }
  .openpix-app .op-card-slot { min-height: 58px; padding: 8px; }
  .op-card-slot.is-filled .op-card-slot-label { display: none; }
  .op-card-slot-value { font-size: 11.5px; }
  .op-campaign-builder.is-card-mode .wizard-options-list { gap: 10px; }
  .op-campaign-builder.is-card-mode #screen-step-4 .wizard-options-list { grid-template-columns: 1fr; }
  .openpix-app .is-card-mode .wizard-option-btn { aspect-ratio: auto; min-height: 150px; padding: 14px 8px; font-size: 12.5px; }
  .is-card-mode .wizard-step-card > .d-flex { flex-wrap: wrap; row-gap: 14px; }
  .is-card-mode .op-card-controls { flex: 1 1 100%; order: -2; justify-content: space-between; }
  .is-card-mode .op-card-icon { width: 24px; height: 24px; }
  .openpix-app .is-card-mode .step4-preset-btn { min-height: 92px; }
  .op-card-start-actions { flex-direction: column; width: 100%; }
  .openpix-app .op-card-start-actions :is(#btn-start-wizard, .op-card-booster) { justify-content: center; width: 100%; }
}

/* Fixed frame from tablet up: campaign-cards.js measures every step with all its cards laid out and keeps the
   builder at the tallest one, so dealing, shuffling or showing all never moves the campaign picture beside it. */
@media (min-width: 761px) {
  .op-campaign-builder.is-card-mode:not([data-state="result"]) .wizard-backdrop-container { min-height: var(--card-frame-height, 590px); }
  .is-card-mode:not([data-state="result"]) .wizard-content-wrapper { display: flex; flex-direction: column; }
  .is-card-mode:not([data-state="result"]) .wizard-screen:not(.d-none) { display: flex; flex: 1; flex-direction: column; }
  .is-card-mode .wizard-screen > .wizard-step-card { display: flex; flex: 1; flex-direction: column; }
  .is-card-mode .wizard-step-card > .d-flex { margin-top: auto; }
  .op-campaign-builder.is-card-mode.is-measuring .wizard-backdrop-container { align-items: start; min-height: 0 !important; }
  .openpix-app .is-card-mode.is-measuring .wizard-option-btn[hidden] { display: flex !important; }
  /* Four in a row leaves narrow cards: a smaller emblem and hyphenation instead of breaking words anywhere. */
  .openpix-app .is-card-mode :is(#screen-step-1, [data-card-all], .is-measuring [data-card-limited]) .wizard-option-btn { gap: 8px; padding: 34px 10px; font-size: 13px; overflow-wrap: normal; }
  .is-card-mode :is(#screen-step-1, [data-card-all], .is-measuring [data-card-limited]) .wizard-option-btn .op-card-icon { width: 22px; height: 22px; padding: 8px; }
  /* Empty hand slots already hold the two lines a chosen card fills, so the hand never grows mid-game. */
  .is-card-mode .op-card-slot-value:empty { display: -webkit-box; visibility: hidden; }
  .is-card-mode .op-card-slot-value:empty::before { content: "\a0\a\a0"; white-space: pre; }
}

/* Showing all cards of a step puts four in a row on wide screens, the same as the motif step. */
@media (min-width: 1101px) { .op-campaign-builder.is-card-mode :is([data-card-all], .is-measuring [data-card-limited]) .wizard-options-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Start screen deck: the category cards fan out and close again. */
.op-card-deck { position: relative; display: block; width: 120px; height: 92px; margin-bottom: 4px; }
.op-card-deck-card { position: absolute; left: 34px; bottom: 0; display: grid; place-items: center; width: 52px; height: 72px; border: 1px solid color-mix(in srgb, var(--card-tone) 45%, var(--line)); border-radius: 9px; background: linear-gradient(165deg, color-mix(in srgb, var(--card-tone) 22%, var(--surface)), var(--surface) 70%); box-shadow: 0 8px 16px -10px #0008; transform-origin: 50% 120%; animation: op-card-deck-fan 4.8s cubic-bezier(.45,0,.2,1) infinite; }
.op-card-deck-card .op-icon { width: 20px; height: 20px; color: var(--card-tone); }
.op-card-deck-card:nth-child(1) { --fan: -24deg; --fan-x: -26px; }
.op-card-deck-card:nth-child(2) { --fan: -8deg; --fan-x: -9px; }
.op-card-deck-card:nth-child(3) { --fan: 8deg; --fan-x: 9px; }
.op-card-deck-card:nth-child(4) { --fan: 24deg; --fan-x: 26px; }
.op-card-deck:has(> :nth-child(3):last-child) > :nth-child(1) { --fan: -18deg; --fan-x: -20px; }
.op-card-deck:has(> :nth-child(3):last-child) > :nth-child(2) { --fan: 0deg; --fan-x: 0px; }
.op-card-deck:has(> :nth-child(3):last-child) > :nth-child(3) { --fan: 18deg; --fan-x: 20px; }
@keyframes op-card-deck-fan { 0%, 12%, 100% { transform: translateX(0) rotate(0); } 38%, 74% { transform: translateX(var(--fan-x)) rotate(var(--fan)); } }
@media (prefers-reduced-motion: reduce) { .op-card-deck-card { animation: none; transform: translateX(var(--fan-x)) rotate(var(--fan)); } }

/* Livelier campaign cards: playing-card corners, a soft pattern, a glare that follows the pointer and a lift with sparks when drawn. */
.op-card-pip { display: none; }
.op-campaign-builder.is-card-mode .wizard-options-list { padding-top: 22px; margin-top: -22px; }
.is-card-mode .wizard-option-btn .op-card-pip { position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--card-tone) 16%, transparent); color: var(--card-tone); pointer-events: none; }
.is-card-mode .wizard-option-btn .op-card-pip.is-bottom { top: auto; left: auto; right: 12px; bottom: 12px; transform: rotate(180deg); }
.is-card-mode .op-card-pip .op-icon { width: 13px; height: 13px; }
.is-card-mode .wizard-option-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 0%), rgb(255 255 255 / .16), transparent 55%), repeating-linear-gradient(135deg, color-mix(in srgb, var(--card-tone) 8%, transparent) 0 2px, transparent 2px 12px); opacity: .6; transition: opacity .3s; }
.is-card-mode .wizard-option-btn:is(:hover, .selected)::before { opacity: 1; }
.is-card-mode .wizard-option-btn .op-card-icon { box-sizing: content-box; padding: 14px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--card-tone) 24%, transparent), transparent 70%); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.is-card-mode .wizard-option-btn:hover .op-card-icon { transform: scale(1.12) rotate(-6deg); }
.is-card-mode .step4-preset-btn .op-card-icon { padding: 8px; }
.openpix-app .is-card-mode .wizard-option-btn:hover { transform: translateY(-6px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); }
.openpix-app .is-card-mode .wizard-option-btn.is-picked { animation: op-card-pick .45s cubic-bezier(.16,1,.3,1); }
@keyframes op-card-pick { 0% { transform: translateY(-6px); } 45% { transform: translateY(-20px) scale(1.06) rotate(2deg); } 100% { transform: translateY(-10px); } }
.op-card-burst { position: absolute; left: 50%; top: 45%; width: 0; height: 0; pointer-events: none; z-index: 2; }
.op-card-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--card-tone); box-shadow: 0 0 10px var(--card-tone); animation: op-card-spark .65s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes op-card-spark { from { transform: rotate(var(--spark-angle)) translateY(0) scale(1); opacity: 1; } to { transform: rotate(var(--spark-angle)) translateY(-90px) scale(.2); opacity: 0; } }

/* Review: the finished hand fans out as large cards above the summary. */
.is-card-mode[data-state="review"] .op-card-hand { gap: 0; justify-items: center; padding: 22px 6px 8px; margin-bottom: 18px; }
.openpix-app .is-card-mode[data-state="review"] .op-card-slot { width: 100%; max-width: 150px; min-height: 0; aspect-ratio: 3 / 4; justify-content: flex-start; margin: 0 -5px; padding: 14px; border-radius: 14px; box-shadow: 0 18px 30px -18px #000c; transform: translateY(var(--fan-y, 0)) rotate(var(--fan-r, 0deg)); transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .2s; }
.openpix-app .is-card-mode[data-state="review"] .op-card-slot:hover { z-index: 1; transform: translateY(-10px) rotate(0); border-color: var(--card-tone); }
.is-card-mode[data-state="review"] .op-card-slot > .op-icon { width: 22px; height: 22px; margin-bottom: auto; }
.is-card-mode[data-state="review"] .op-card-slot-label { display: block; }
.is-card-mode[data-state="review"] .op-card-slot-value { font-size: 15px; -webkit-line-clamp: 4; }
.is-card-mode[data-state="review"] .op-card-hand > :nth-child(1) { --fan-r: -7deg; --fan-y: 12px; }
.is-card-mode[data-state="review"] .op-card-hand > :nth-child(2) { --fan-r: -2.5deg; }
.is-card-mode[data-state="review"] .op-card-hand > :nth-child(3) { --fan-r: 2.5deg; }
.is-card-mode[data-state="review"] .op-card-hand > :nth-child(4) { --fan-r: 7deg; --fan-y: 12px; }
.is-card-mode[data-state="review"] .op-card-hand[data-size="3"] > :nth-child(2) { --fan-r: 0deg; }
.is-card-mode[data-state="review"] .op-card-hand[data-size="3"] > :nth-child(3) { --fan-r: 7deg; --fan-y: 12px; }
@media (max-width: 760px) {
  .is-card-mode[data-state="review"] .op-card-hand { position: static; margin: 0 0 14px; padding: 14px 4px 8px; background: none; backdrop-filter: none; }
  .openpix-app .is-card-mode[data-state="review"] .op-card-slot { padding: 10px 8px; }
  .is-card-mode[data-state="review"] .op-card-slot-label { display: none; }
  .is-card-mode[data-state="review"] .op-card-slot-value { font-size: 12px; -webkit-line-clamp: 5; }
  .is-card-mode .wizard-option-btn .op-card-pip { top: 8px; left: 8px; width: 18px; height: 18px; }
  .is-card-mode .wizard-option-btn .op-card-pip.is-bottom { right: 8px; bottom: 8px; }
  .is-card-mode .op-card-pip .op-icon { width: 11px; height: 11px; }
}
@media (prefers-reduced-motion: reduce) { .is-card-mode .wizard-option-btn:hover .op-card-icon { transform: none; } }

/* Battle duel: both images side by side on every screen, with a VS badge between them. */
.op-duel-grid { --duel-media-h: clamp(250px, 27vw, 380px); --duel-pad: 16px; position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-vote-image { height: var(--duel-media-h); }
.op-vote-card { padding: var(--duel-pad); transition: border-color .2s, box-shadow .3s, opacity .35s, transform .35s cubic-bezier(.16,1,.3,1); }
.op-vote-card.is-selected { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--accent), 0 22px 40px -24px #000a; }
.op-vote-card.is-other { opacity: .62; }
.op-vote-card.is-other:is(:hover, :focus-within) { opacity: 1; }
.op-vote-action { justify-content: center; min-height: 46px; }
.op-vote-action > span { flex: 0 1 auto; }
.op-duel-vs { position: absolute; z-index: 2; left: 50%; top: calc(var(--duel-pad) + var(--duel-media-h) / 2); display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid var(--page); border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 750; letter-spacing: .04em; transform: translate(-50%, -50%); box-shadow: 0 10px 24px -10px #000a; pointer-events: none; animation: op-duel-vs 2.6s ease-in-out infinite; transition: opacity .3s, scale .3s; }
.has-vote .op-duel-vs { opacity: 0; scale: .6; animation: none; }
@keyframes op-duel-vs { 50% { scale: 1.08; } }
.op-battle-keys { display: none; }
@media (hover: hover) and (pointer: fine) { .op-battle-keys { display: inline; } }
@media (max-width: 760px) {
  .op-duel-grid { --duel-media-h: 40vw; --duel-pad: 8px; gap: 10px; }
  .op-vote-card { gap: 8px; border-radius: 16px; }
  .op-vote-image { border-radius: 10px; }
  .openpix-app .op-vote-preview { top: 6px; right: 6px; width: 34px; min-height: 34px; padding: 8px; }
  .op-vote-selected { left: 6px; top: 6px; padding: 6px; }
  .op-vote-selected > span { display: none; }
  .op-vote-action { min-height: 44px; padding: 8px; gap: 6px; font-size: 12px; }
  .op-vote-result strong { font-size: 22px; }
  .op-vote-result > div:first-child { flex-direction: column; align-items: start; gap: 2px; }
  .op-duel-vs { width: 42px; height: 42px; border-width: 2px; font-size: 12px; }
}

/* Battle game feel: running score, per-round verdict and completion tier. */
.op-battle-score { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; grid-column: 1 / -1; order: 3; color: var(--muted); font-size: 11.5px; }
.op-battle-score > .op-icon { width: 14px; height: 14px; color: var(--accent); }
.op-battle-score strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.op-battle-streak { padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--ink); font-weight: 600; animation: op-battle-pop .45s cubic-bezier(.16,1,.3,1); }
.op-battle-verdict { display: flex; align-items: center; gap: 16px; }
.op-battle-verdict .op-icon-tile { animation: op-battle-pop .5s cubic-bezier(.16,1,.3,1); }
.op-battle-verdict[data-verdict="majority"] .op-icon-tile { background: var(--accent); color: var(--on-accent); }
.op-battle-verdict[data-verdict="independent"] .op-icon-tile { background: color-mix(in srgb, var(--accent-2, #f2b37e) 22%, var(--surface)); color: var(--accent-2, #f2b37e); }
.op-battle-verdict strong { font-size: 15px; font-weight: 600; }
.op-battle-tier { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: var(--tint); }
.op-battle-tier > strong { font-size: 20px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.op-battle-tier > span { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.op-battle-tier-stats { color: var(--ink) !important; font-weight: 550; }
@keyframes op-battle-pop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.08); } }
@media (max-width: 760px) { .op-battle-verdict { align-items: start; } .op-battle-verdict .op-icon-tile { display: grid; } }

/* Compact help: explainer and FAQ stay in the page for search engines but take far less room. */
.op-explainer.is-compact { gap: 16px; }
.op-explainer.is-compact .op-help-heading { gap: 6px; }
.op-explainer.is-compact .op-help-heading h2, .op-help-faq.is-compact .op-help-heading h2 { font-size: 20px; max-width: none; }
.op-explainer.is-compact .op-explainer-grid { gap: 10px; }
.op-explainer.is-compact .op-help-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 12px; padding: 14px 16px; border-radius: 14px; }
.op-explainer.is-compact .op-help-step-top { grid-row: span 2; width: auto; padding: 0; }
.op-explainer.is-compact .op-help-step-top > .op-icon { display: none; }
.op-explainer.is-compact .op-help-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--accent); font-size: 12px; font-weight: 650; letter-spacing: 0; }
.op-explainer.is-compact .op-help-step h3 { font-size: 13.5px; line-height: 1.4; }
.op-explainer.is-compact .op-explainer-body p { font-size: 12px; line-height: 1.6; }
.op-help-faq.is-compact { grid-template-columns: 1fr; gap: 14px; padding: 20px; border-radius: 16px; }
.op-help-faq.is-compact > .op-help-heading { gap: 4px; padding: 0; }
.op-help-faq.is-compact .op-faq-emblem { display: none; }
.op-help-faq.is-compact .op-help-faq-list { gap: 8px; }
.op-help-faq.is-compact .op-help-faq-list details { padding: 4px 14px; border-radius: 12px; }
.op-help-faq.is-compact .op-help-faq-list p { padding: 4px 0 12px 28px; font-size: 12.5px; line-height: 1.7; }

/* Academy blog, prompt style pages and creator program. */
.op-blog-page, .op-prompt-styles-page, .op-creator-program { display: flex; flex-direction: column; gap: 32px; padding-block: 20px 40px; }
:is(.op-blog-page,.op-prompt-styles-page,.op-creator-program) > :is(.op-breadcrumb,.op-page-heading) { margin: 0; }
.op-blog-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.op-blog-featured { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center; gap: 40px; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-blog-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.op-blog-compare figure { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--raised); }
.op-blog-compare img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.op-blog-compare figcaption { position: absolute; left: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 6px 10px; border-radius: 8px; background: #0b0d11cc; color: #fff; font-size: 10px; font-weight: 600; letter-spacing: .04em; line-height: 1.5; backdrop-filter: blur(8px); }
.op-blog-compare figcaption .op-icon { width: 14px; height: 14px; stroke-width: 2.2; }
.op-blog-compare .is-raw figcaption .op-icon { color: #ffa49b; }
.op-blog-compare .is-fixed figcaption .op-icon { color: #8fe3bf; }
.op-blog-featured-copy { display: flex; flex-direction: column; align-items: start; gap: 18px; min-width: 0; }
.op-blog-featured-copy h2 { font-size: clamp(25px,2.4vw,34px); line-height: 1.25; }
.op-blog-featured-copy > p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.op-blog-labels { display: flex; flex-wrap: wrap; gap: 8px; }
.op-blog-labels .op-label > .op-icon { width: 14px; height: 14px; }
.op-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; color: var(--muted); font-size: 11px; }
.op-blog-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.op-blog-meta .op-icon { width: 15px; height: 15px; }
.op-media-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.op-media-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; color: var(--ink); transition: border-color .18s; }
.op-media-card:hover { border-color: var(--accent); color: var(--ink); }
.op-media-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--raised); }
.op-media-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.op-media-card:hover .op-media-card-media img { transform: scale(1.03); }
.op-media-card-copy { display: flex; flex: 1; flex-direction: column; align-items: start; gap: 16px; padding: 24px; }
.op-media-card-copy :is(h2,h3) { font-size: 19px; line-height: 1.4; letter-spacing: -.03em; }
.op-media-card-copy p { color: var(--muted); font-size: 12px; line-height: 1.9; }
.op-media-card-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; width: 100%; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.op-media-card-footer .op-link { min-height: 0; padding: 0; color: var(--accent); }
.op-tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.op-tag { display: inline-flex; padding: 5px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--page); color: var(--muted); font-size: 10px; line-height: 1.6; }
.op-blog-hero-media { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); }
.op-blog-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.op-blog-article-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.op-blog-related .op-related-guides-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.op-icon-back { transform: rotate(180deg); }
.op-heading-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.op-page-heading > .op-heading-actions { flex-direction: row; gap: 12px; }
.op-prompt-styles-page .op-page-heading > .op-button { flex-shrink: 0; }
.op-creator-program .op-library-hero .op-page-heading { flex-direction: column; align-items: start; }
.op-style-samples { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 16px; }
.op-style-sample { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.op-style-sample img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--raised); }
.op-style-sample > div { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 16px; }
.op-style-sample p { flex: 1; color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.op-style-sample .op-button { width: 100%; min-height: 44px; padding: 10px 14px; font-size: 11px; }
.op-prompt-about { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); align-items: start; gap: 24px; }
.op-prompt-about-copy { display: flex; flex-direction: column; gap: 18px; padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.op-prompt-about-copy > p { color: var(--muted); font-size: 14px; line-height: 1.9; }
.op-prompt-tips { display: flex; flex-direction: column; gap: 20px; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--tint); }
.op-prompt-tips h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.op-prompt-tips h2 .op-icon { color: var(--accent); }
.op-check-list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.op-check-list li { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 12px; color: var(--ink); font-size: 13px; line-height: 1.8; }
.op-check-list .op-icon { width: 18px; height: 18px; margin-top: 4px; color: var(--accent); stroke-width: 2.2; }
.op-tier-countries { border: 1px solid var(--line); border-radius: 16px; background: var(--page); }
.op-tier-countries[open] { border-color: var(--accent); }
.op-tier-countries summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 20px; cursor: pointer; font-size: 12px; font-weight: 550; list-style: none; }
.op-tier-countries summary::-webkit-details-marker { display: none; }
.op-tier-countries summary .op-icon { width: 18px; height: 18px; color: var(--accent); }
.op-tier-countries summary .op-icon:last-child { width: 14px; margin-left: auto; color: var(--muted); transition: transform .2s; }
.op-tier-countries[open] summary .op-icon:last-child { transform: rotate(180deg); }
.op-tier-country-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; padding: 4px 20px 20px; }
.op-tier-country-grid h3 { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 13px; letter-spacing: -.01em; }
.op-tier-country-grid ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.op-tier-country-grid li::marker { color: var(--accent); }
.op-info-page .op-help-step h2 { font-size: 21px; line-height: 1.4; letter-spacing: -.03em; }
.op-faq-icon { width: 18px; height: 18px; color: var(--accent); }
.op-creator-apply { display: flex; flex-direction: column; gap: 28px; width: min(100%,860px); margin-inline: auto; scroll-margin-top: 110px; }
.op-required { color: var(--accent); }
.op-form-notice { display: flex; align-items: start; gap: 12px; padding: 16px 18px; border: 1px solid var(--accent); border-radius: 12px; background: var(--tint); color: var(--ink); font-size: 13px; line-height: 1.7; }
.op-form-notice > .op-icon { margin-top: 2px; color: var(--accent); }
.op-form-notice ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink); }
.op-form-notice.is-error { border-color: var(--bs-danger); background: var(--surface); }
.op-form-notice.is-error > .op-icon { color: var(--bs-danger-text-emphasis); }
@media (max-width: 1100px) {
  .op-media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .op-blog-featured { grid-template-columns: 1fr; gap: 28px; }
  .op-prompt-about { grid-template-columns: 1fr; }
  .op-tier-country-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .op-blog-related .op-related-guides-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .op-blog-page, .op-prompt-styles-page, .op-creator-program { gap: 24px; padding-block: 8px 32px; }
  .op-media-grid, .op-tier-country-grid { grid-template-columns: 1fr; }
  .op-blog-featured, .op-prompt-about-copy, .op-prompt-tips { padding: 20px; }
  .op-blog-compare { gap: 8px; }
  .op-blog-compare figcaption { left: 8px; bottom: 8px; padding: 5px 8px; font-size: 9px; }
  .op-blog-filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .op-blog-filters::-webkit-scrollbar { display: none; }
  .op-blog-filters .op-filter-chip { flex-shrink: 0; }
  .op-style-samples { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .op-style-sample > div { padding: 12px; }
  .op-media-card-copy { padding: 20px; }
}

/* Decorative image bands: tall community image strips for text-only heroes and wide covers for guide pages. */
.op-image-strips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); align-items: center; gap: 10px; height: 230px; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%); mask-image: linear-gradient(90deg, transparent, #000 28%); }
.op-image-strips > span { height: 100%; overflow: hidden; border-radius: 14px; background: var(--raised); }
.op-image-strips > span:nth-child(odd) { height: 82%; }
.op-image-strips > span:nth-child(3n) { height: 92%; }
.op-image-strips img { width: 100%; height: 100%; object-fit: cover; }
.op-guide-cover { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 4px; margin: 0; aspect-ratio: 16 / 7; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.op-guide-cover img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 40%; }
.op-game-tile > .op-game-art { min-height: 180px; margin: -8px -8px 0; }
.op-game-tile .op-battle-frame + .op-battle-frame { transform: rotate(9deg); }
.op-hunter-art { padding: 0; }
.op-hunter-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .8; }
.op-hunter-focus { position: absolute; width: 58px; height: 58px; border: 2px dashed #fff; border-radius: 12px; box-shadow: 0 0 0 999px #0b0d1140; left: 22%; top: 24%; }
.op-hunter-focus + .op-hunter-focus { box-shadow: none; width: 40px; height: 40px; left: 64%; top: 52%; border-radius: 50%; }
.op-game-tile.is-upcoming > .op-game-art { filter: saturate(.6); }
@media (max-width: 1100px) { .op-image-strips { height: 170px; } }
@media (max-width: 640px) { .op-image-strips { height: 130px; gap: 6px; } .op-image-strips > span { border-radius: 10px; } .op-guide-cover { aspect-ratio: 16 / 9; border-radius: 14px; } }

/* Web daily budget used up: one notice where generation would start (studio result area, campaign builder), in the widget's warm "nearly full" tone. */
.op-web-limit { --limit-tone: #f2b37e; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: start; gap: 16px 18px; padding: 24px; border: 1px solid color-mix(in srgb, var(--limit-tone) 45%, var(--line)); border-radius: 20px; background: color-mix(in srgb, var(--limit-tone) 9%, var(--surface)); text-align: left; }
:root[data-theme="light"] .op-web-limit { --limit-tone: var(--accent-2); }
.op-web-limit > .op-icon-tile { background: color-mix(in srgb, var(--limit-tone) 18%, transparent); color: var(--limit-tone); }
.op-web-limit-copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.op-web-limit-copy h3 { font-size: 17px; line-height: 1.5; font-weight: 600; letter-spacing: -.02em; }
.op-web-limit-copy p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.op-web-limit > .op-button { grid-column: 2; justify-self: start; }
.op-studio .op-web-limit { margin-top: 20px; }
.op-web-limit-hint { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.8; text-align: center; padding: 14px 16px 0; }
.op-web-limit-hint .op-icon { width: 16px; height: 16px; color: #f2b37e; }
:root[data-theme="light"] .op-web-limit-hint .op-icon { color: var(--accent-2); }
.op-web-limit-hint a { color: var(--accent); font-weight: 550; }
@media (max-width: 480px) { .op-web-limit { grid-template-columns: 1fr; padding: 24px 20px; } .op-web-limit > .op-button { grid-column: auto; justify-self: stretch; } }
.op-campaign-builder #screen-limit:not(.d-none) { gap: 16px; }
.op-web-limit-back { align-self: start; }
.op-web-limit-back .op-icon { transform: rotate(180deg); }

/* Budget used up: the widget stops being a quiet pointer and becomes the way forward (warm frame, warm store button, larger pill on phones). */
.op-usage[data-level="reached"] .op-usage-panel { border-color: color-mix(in srgb, var(--usage-warn) 55%, var(--line)); background: color-mix(in srgb, var(--usage-warn) 7%, var(--surface)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--usage-warn) 14%, transparent), var(--shadow); }
.op-usage[data-level="reached"] .op-usage-app { background: color-mix(in srgb, var(--usage-warn) 14%, var(--surface)); }
.op-usage[data-level="reached"] .op-usage-device { border-color: var(--usage-warn); }
.op-usage[data-level="reached"] .op-usage-device-screen { background: color-mix(in srgb, var(--usage-warn) 18%, var(--surface)); color: var(--usage-warn); }
.openpix-app .op-usage[data-level="reached"] .op-usage-store { background: var(--usage-warn); color: var(--page); }
.op-usage[data-level="reached"] .op-usage-pill { border-color: var(--usage-warn); box-shadow: 0 0 0 4px color-mix(in srgb, var(--usage-warn) 16%, transparent), var(--shadow); }
@media (max-width: 640px) { .op-usage[data-level="reached"] .op-usage-pill { min-height: 54px; padding: 8px; font-size: 13px; } .op-usage[data-level="reached"] .op-usage-pill-app { padding: 9px 14px 9px 12px; } }