:root {
  color-scheme: light;
  --app-loading-background: #b8abcc;
  --app-loading-foreground: #37274b;
  --ink: #1f241f;
  --paper: #fbf8ef;
  --paper-shadow: #b6ae9b;
  --accent: #294f3c;
  --accent-2: #f6bf43;
  --danger: #9d3e38;
  --surface: rgba(255, 252, 244, .9);
  --theme-panel-surface: #fffdf7;
  --theme-panel-foreground: #162218;
  --theme-panel-muted: #2e3e33;
  --recent-surface: #fffdf7;
  --recent-foreground: #162218;
  --recent-muted: #2e3e33;
  --recent-hover-surface: #e8f2ea;
  --recent-hover-foreground: #102b1b;
  --recent-focus-surface: #d9ebff;
  --recent-focus-foreground: #10284a;
  --recent-disabled-surface: #e2e5de;
  --recent-disabled-foreground: #26372b;
  --texture: radial-gradient(circle at 17% 21%, rgba(255,255,255,.43) 0 1px, transparent 1.3px), radial-gradient(circle at 74% 62%, rgba(80,70,54,.07) 0 1px, transparent 1.2px), linear-gradient(135deg, #ece7d9, #dad5c7);
  font-family: ui-rounded, "Avenir Next", Avenir, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  --oe-ui-surface: var(--theme-panel-surface);
  --oe-ui-foreground: var(--theme-panel-foreground);
  --oe-ui-muted: var(--theme-panel-muted);
  --oe-ui-line-angle: 17deg;
  --oe-ui-line-color: color-mix(in srgb, var(--oe-ui-foreground) 5%, transparent);
  --oe-ui-lines: repeating-linear-gradient(var(--oe-ui-line-angle), var(--oe-ui-line-color) 0 1px, transparent 1px 5px);
  --oe-ui-grain: radial-gradient(circle at 13% 18%, color-mix(in srgb, var(--oe-ui-foreground) 9%, transparent) 0 1px, transparent 1.35px);
  --oe-ui-sheen: linear-gradient(135deg, color-mix(in srgb, var(--oe-ui-surface) 93%, transparent), color-mix(in srgb, var(--oe-ui-surface) 74%, var(--oe-ui-foreground) 26%));
  --oe-ui-texture: var(--oe-ui-grain), var(--oe-ui-lines), var(--oe-ui-sheen);
  --oe-ui-terminal-surface: color-mix(in srgb, var(--oe-ui-surface) 82%, var(--oe-ui-foreground) 18%);
  --oe-ui-danger-surface: color-mix(in srgb, #6f1820 90%, var(--oe-ui-surface) 10%);
  --oe-ui-danger-foreground: color-mix(in srgb, #fff 94%, var(--oe-ui-foreground) 6%);
  --oe-ui-danger-border: color-mix(in srgb, #9d3e38 82%, var(--oe-ui-foreground) 18%);
  --oe-ui-monogram-surface: color-mix(in srgb, var(--oe-ui-surface) 82%, var(--oe-ui-foreground) 18%);
  --oe-ui-monogram-foreground: var(--oe-ui-foreground);
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background-color: #dfd9ca;
  background-image: var(--texture);
  background-size: 7px 7px, 13px 13px, cover;
  background-attachment: fixed;
}

body.app-starting { overflow: hidden; }
body.app-starting > :not(.app-loading-screen):not(script) { visibility: hidden; }
.app-loading-screen {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  overflow: hidden;
  background: var(--app-loading-background);
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease, visibility 0s linear .32s;
}
.app-loading-screen.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.app-loading-wordmark {
  position: relative;
  color: var(--app-loading-foreground);
  font-size: clamp(1.35rem, 5vw, 2rem);
  font-weight: 850;
  letter-spacing: .3em;
  text-indent: .3em;
  text-shadow: 0 .45rem 1.4rem color-mix(in srgb, var(--app-loading-foreground) 14%, transparent);
  animation: outfit-envy-startup-breathe 1.8s ease-in-out infinite;
}
.app-loading-wordmark em { font-family: Georgia, "Times New Roman", serif; font-size: 1.06em; font-weight: 600; letter-spacing: .2em; }
@keyframes outfit-envy-startup-breathe { 0%, 100% { opacity: .9; transform: scale(.992); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .app-loading-screen { transition-duration: .01ms; }
  .app-loading-wordmark { animation: none; }
}

button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #124e80; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.skip-link { position: fixed; z-index: 30; left: 1rem; top: -4rem; background: #fff; color: #111; padding: .75rem 1rem; border-radius: .7rem; }
.skip-link:focus { top: 1rem; }

.topbar { width: min(1160px, calc(100% - 2rem)); margin: 0 auto; padding: 1.2rem 0 .8rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand-lockup { display: grid; gap: .32rem; min-width: 0; }
.identity-badge-surface { max-width: min(31rem, 100%); padding: .58rem .72rem .64rem; border-radius: 1.18rem; }
.brand { display: inline-flex; align-items: center; width: fit-content; gap: .55rem; color: var(--oe-ui-foreground); text-shadow: 0 1px 2px color-mix(in srgb, var(--oe-ui-surface) 38%, transparent); }
.brand-line { color: var(--oe-ui-foreground); text-shadow: 0 1px 2px color-mix(in srgb, var(--oe-ui-surface) 38%, transparent); }
.recent-derived-surface, .status-surface:not(:empty) { position: relative; isolation: isolate; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 28%, transparent); border-radius: .95rem; color: var(--oe-ui-foreground); background-color: var(--oe-ui-surface); background-image: var(--oe-ui-texture); box-shadow: 0 7px 16px color-mix(in srgb, var(--oe-ui-foreground) 16%, transparent), inset 0 1px color-mix(in srgb, #fff 70%, transparent); }
.recent-derived-surface::after, .status-surface:not(:empty)::after { position: absolute; z-index: -1; inset: .22rem; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 14%, transparent); border-radius: inherit; content: ""; pointer-events: none; }
.brand-monogram { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 34%, transparent); border-radius: .78rem; background: var(--oe-ui-monogram-surface); color: var(--oe-ui-monogram-foreground); box-shadow: inset 0 1px color-mix(in srgb, #fff 20%, transparent); font-family: Georgia, "Times New Roman", serif; font-size: .78rem; font-weight: 700; letter-spacing: -.1em; }
.brand-wordmark { font-size: .84rem; font-weight: 900; letter-spacing: .17em; }
.brand-wordmark em { font-family: Georgia, "Times New Roman", serif; font-size: 1.05em; font-weight: 700; letter-spacing: .11em; }
.active-job-notice { width: fit-content; margin: .05rem 0 0; padding: .28rem .62rem; border-radius: 999px; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.active-job-notice.is-active { animation: outfit-envy-loading-flash 1.7s ease-in-out infinite; }
.brand-line { max-width: 25rem; margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .015em; opacity: .78; }
@keyframes outfit-envy-loading-flash { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.top-actions { display: flex; align-items: center; gap: .55rem; }
.texture-control, .primary-mini, .secondary-mini, .secondary-button, .sheet-action, .show-more, .danger-button, .text-button {
  border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 28%, transparent);
  border-radius: 999px;
  box-shadow: inset 0 1px color-mix(in srgb, #fff 72%, transparent), 0 3px 8px color-mix(in srgb, var(--oe-ui-foreground) 14%, transparent);
  background-color: var(--oe-ui-surface);
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 58%, transparent), color-mix(in srgb, #fff 10%, transparent)), var(--oe-ui-lines);
  color: var(--oe-ui-foreground);
}
.credit-pill { display: inline-flex; align-items: center; gap: .36rem; min-height: 2.55rem; padding: .4rem .55rem .4rem .75rem; font-weight: 800; }
.account-button { min-height: 2.45rem; padding: .4rem .72rem; font-size: .76rem; font-weight: 850; }
.credit-word { font-weight: 600; opacity: .75; font-size: .83rem; }
.plus { display: inline-grid; place-items: center; margin-left: .15rem; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1.15rem; line-height: 1; }
.icon-button { width: 2.45rem; height: 2.45rem; font-weight: 900; font-size: 1.05rem; }
.palette-icon { display: block; width: 1.55rem; height: 1.55rem; margin: auto; overflow: visible; }
.palette-shell { fill: color-mix(in srgb, var(--oe-ui-surface) 76%, var(--oe-ui-foreground) 24%); stroke: currentColor; stroke-linejoin: round; stroke-width: 1.35; }
.palette-swatch { stroke: color-mix(in srgb, #fff 88%, var(--oe-ui-foreground) 12%); stroke-width: .55; }
.palette-swatch-red { fill: #e9504f; }
.palette-swatch-yellow { fill: #f3bc3d; }
.palette-swatch-blue { fill: #4387d9; }
.palette-swatch-green { fill: #43a56b; }

.creation-surface { width: min(970px, calc(100% - 2rem)); margin: 1.65rem auto 5rem; }
.polaroid-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.1rem, 4vw, 3.6rem); align-items: start; }
.polaroid {
  position: relative;
  min-height: 430px;
  padding: 1.1rem 1.1rem 1.35rem;
  color: var(--oe-ui-foreground);
  background-color: var(--oe-ui-surface);
  background-image: var(--oe-ui-sheen);
  border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 28%, transparent);
  box-shadow: 0 18px 25px color-mix(in srgb, var(--oe-ui-foreground) 17%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 72%, transparent), inset 2px 0 color-mix(in srgb, var(--oe-ui-foreground) 10%, transparent);
  transform: rotate(-1.2deg);
}
.polaroid:nth-child(2) { transform: rotate(1.2deg); margin-top: 1.2rem; }
.polaroid::before { content: ""; position: absolute; inset: 0; opacity: 1; pointer-events: none; background-image: var(--oe-ui-grain), var(--oe-ui-lines); background-size: auto; mix-blend-mode: normal; }
.polaroid h1 { position: relative; z-index: 1; margin: 0 0 .8rem .2rem; font-size: .76rem; letter-spacing: .18em; font-weight: 900; }
.image-well { position: relative; z-index: 1; display: grid; place-items: center; min-height: 326px; overflow: hidden; border: 1px solid rgba(60,52,40,.3); background: linear-gradient(135deg, #d7d0c2, #ece7dc); box-shadow: inset 0 2px 10px rgba(77,64,43,.22); }
.upload-preview { display: block; width: 100%; height: 326px; object-fit: cover; }
.upload-placeholder { display: grid; place-items: center; gap: .2rem; padding: 1.4rem; }
.upload-texture { display: block; width: clamp(4.6rem, 20vw, 7.5rem); height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 .28rem .34rem rgba(43, 54, 49, .16)); }
.well-copy { color: #344139; font-size: .8rem; font-weight: 700; opacity: 1; }
.panel-actions { position: relative; z-index: 1; display: flex; gap: .48rem; justify-content: center; padding-top: 1rem; }
.primary-mini, .secondary-mini { padding: .55rem .85rem; font-size: .78rem; font-weight: 800; }
.primary-mini { background-color: var(--accent); background-image: linear-gradient(180deg, rgba(255,255,255,.14), transparent), var(--oe-ui-lines); color: #fff; border-color: rgba(20,46,34,.8); }
.processing-overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: start center; padding: clamp(1rem, 10vh, 7rem) 1rem 1rem; background: rgba(30, 34, 30, .4); }
.processing-polaroid { position: relative; width: min(380px, calc(100vw - 2rem)); aspect-ratio: 1; padding: .85rem .85rem 1.15rem; background: linear-gradient(125deg, rgba(255,255,255,.97), rgba(242,237,225,.97)); border: 1px solid rgba(91, 82, 66, .3); box-shadow: 0 25px 50px rgba(16,18,15,.35), inset 0 0 0 1px rgba(255,255,255,.78); transform: rotate(-1deg); }
.processing-polaroid::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .3; background-image: repeating-linear-gradient(4deg, rgba(84,70,49,.05) 0 1px, transparent 1px 5px); }
.processing-polaroid .close-button { position: absolute; z-index: 2; right: 1rem; top: 1rem; }
.processing-message { position: absolute; z-index: 1; top: 1.25rem; left: 1rem; right: 3.8rem; margin: 0; color: #172419; font: 700 .8rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.processing-image { position: relative; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; overflow: hidden; border: 1px solid rgba(60,52,40,.3); background: linear-gradient(135deg, #d7d0c2, #ece7dc); }
.processing-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.loading-circle { width: 3.6rem; height: 3.6rem; border: .34rem solid rgba(41,79,60,.22); border-top-color: var(--accent); border-radius: 50%; animation: outfit-envy-spin .9s linear infinite; }
@keyframes outfit-envy-spin { to { transform: rotate(360deg); } }

.input-error { min-height: 1.25rem; margin: 1rem auto 0; text-align: center; color: #7d211d; font-size: .85rem; font-weight: 700; }
.input-error.status-surface:not(:empty) { max-width: min(44rem, calc(100% - 1rem)); padding: .72rem .9rem; border-color: color-mix(in srgb, #852d27 48%, var(--oe-ui-foreground)); color: var(--oe-ui-foreground); line-height: 1.45; }
.submit-area { display: grid; justify-items: center; gap: .85rem; margin: 2.15rem auto 4.1rem; }
.generation-configuration { display: grid; place-items: center; min-height: 2.72rem; padding: .58rem .92rem; border-radius: 1.1rem; font-size: .8rem; font-weight: 800; }
.generation-configuration-price { color: var(--oe-ui-foreground); font-size: .76rem; letter-spacing: .045em; text-align: center; text-transform: uppercase; }
.submit-button { min-width: 190px; padding: .91rem 1.35rem; border: 1px solid #173c2b; border-radius: 999px; color: #fff; background: linear-gradient(135deg, #315a44, #183b2c); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 8px 14px rgba(29,62,45,.25); font-size: .94rem; font-weight: 900; }
.submit-button:not(:disabled):active { transform: translateY(1px); box-shadow: inset 0 3px 7px rgba(0,0,0,.25); }
.job-status { max-width: 34rem; margin: 0; text-align: center; font-size: .86rem; font-weight: 650; }
.job-status:empty { display: none; }
.job-status.status-surface:not(:empty) { padding: .65rem .9rem; line-height: 1.4; }

.album-section { position: relative; isolation: isolate; padding: clamp(1.15rem, 3vw, 1.7rem); border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 24%, transparent); border-radius: 1.65rem; background-color: var(--oe-ui-surface); background-image: var(--oe-ui-texture); box-shadow: 0 19px 34px color-mix(in srgb, var(--oe-ui-foreground) 16%, transparent), inset 0 1px color-mix(in srgb, #fff 70%, transparent); }
.recent-surface { color: var(--oe-ui-foreground); }
.album-section::before { position: absolute; z-index: -1; inset: .42rem; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 14%, transparent); border-radius: 1.3rem; content: ""; pointer-events: none; }
.album-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.album-heading h2 { margin: 0; font-size: 1rem; letter-spacing: .01em; }
.recent-title { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 4vw, 2rem) !important; font-style: italic; font-weight: 700; letter-spacing: .035em !important; }
.album-heading p { margin: .36rem 0 0; color: var(--oe-ui-muted); font-size: .92rem; font-weight: 650; }
.album-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.empty-album { grid-column: 1 / -1; padding: 1.35rem; border: 1px dashed color-mix(in srgb, var(--oe-ui-foreground) 42%, transparent); color: var(--oe-ui-foreground); text-align: center; font-size: .95rem; font-weight: 650; }
.result-card { overflow: hidden; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 30%, transparent); border-radius: 1rem; color: var(--oe-ui-foreground); background-color: var(--oe-ui-terminal-surface); background-image: var(--oe-ui-lines); box-shadow: 0 6px 16px color-mix(in srgb, var(--oe-ui-foreground) 13%, transparent); }
.result-image-frame { position: relative; }
.result-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.support-email-link { display: inline-flex; align-items: center; justify-content: center; margin-top: .8rem; min-height: 2.65rem; padding: .55rem .95rem; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 35%, transparent); border-radius: 999px; background-color: var(--oe-ui-terminal-surface); background-image: var(--oe-ui-lines); color: var(--oe-ui-foreground); font: inherit; font-weight: 760; letter-spacing: .02em; text-decoration: none; }
.support-email-link:hover, .support-email-link:focus-visible { background-color: color-mix(in srgb, var(--oe-ui-surface) 66%, var(--oe-ui-foreground) 34%); outline: 2px solid color-mix(in srgb, var(--oe-ui-foreground) 80%, transparent); outline-offset: 2px; }
.result-info { padding: .55rem; }
.result-meta { margin: .3rem 0; color: var(--oe-ui-muted); font-size: .78rem; line-height: 1.4; font-weight: 650; }
.result-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .32rem; }
.recent-surface .result-actions button { width: 100%; min-width: 0; padding: .42rem .54rem; border: 1px solid transparent; background: transparent; color: var(--oe-ui-foreground); font-size: .76rem; font-weight: 850; line-height: 1.2; text-align: left; text-decoration: underline; }
.recent-surface .result-actions button:hover { background: var(--recent-hover-surface); color: var(--recent-hover-foreground); border-color: currentColor; }
.recent-surface .result-actions button:focus-visible, .recent-surface .show-more:focus-visible { outline-color: var(--recent-focus-foreground); background: var(--recent-focus-surface); color: var(--recent-focus-foreground); }
.show-more { display: block; margin: 1.05rem auto 0; padding: .6rem 1rem; color: var(--oe-ui-foreground); background-color: var(--oe-ui-terminal-surface); background-image: var(--oe-ui-lines); font-weight: 850; font-size: .9rem; }
.show-more:not(:disabled):hover { color: var(--recent-hover-foreground); background: var(--recent-hover-surface); }
.show-more:disabled { color: var(--recent-disabled-foreground); background: var(--recent-disabled-surface); border-color: var(--recent-disabled-foreground); }

dialog { width: min(650px, calc(100% - 1.5rem)); max-height: min(90dvh, 820px); padding: 0; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 32%, transparent); color: var(--oe-ui-foreground); background: var(--oe-ui-surface); box-shadow: 0 26px 60px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(26,30,26,.48); backdrop-filter: blur(2px); }
.sheet { padding: 1.55rem; border-radius: 1.2rem; color: var(--oe-ui-foreground); background-color: var(--oe-ui-surface); background-image: var(--oe-ui-texture); }
.compact-sheet { width: min(470px, calc(100% - 1.5rem)); }
.sheet h2 { margin: .15rem 0 .55rem; font-size: 1.33rem; }
.sheet p { color: var(--oe-ui-foreground); font-size: .89rem; line-height: 1.5; }
.help-sheet, .help-sheet h2, .help-sheet li { color: var(--oe-ui-foreground); }
.sheet-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.close-button { float: right; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; color: var(--oe-ui-foreground); background-color: var(--oe-ui-terminal-surface); background-image: var(--oe-ui-lines); font-size: 1.45rem; }
.eyebrow { margin: 0; color: var(--oe-ui-foreground); font-size: .67rem !important; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.choice-stack { display: grid; gap: .65rem; margin-top: 1.2rem; }
.sheet-action { padding: .88rem; font-weight: 800; text-align: left; }
.sheet-actions, .prepare-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; }
.secondary-button, .danger-button { padding: .75rem 1rem; font-size: .84rem; font-weight: 800; }
.danger-button { border-color: var(--oe-ui-danger-border); color: var(--oe-ui-danger-foreground); background-color: var(--oe-ui-danger-surface); background-image: var(--oe-ui-lines); }
.consent-row { display: flex; align-items: flex-start; gap: .55rem; margin: 1rem 0 .5rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 20%, transparent); color: var(--oe-ui-foreground); background-color: var(--oe-ui-terminal-surface); background-image: var(--oe-ui-lines); font-size: .84rem; font-weight: 750; }
.consent-row input { width: 1.1rem; height: 1.1rem; margin: 0; }
.fine-print { color: var(--oe-ui-muted); font-size: .76rem !important; }
.account-form { display: grid; gap: .76rem; margin: 1.05rem 0; }
.account-form label { display: grid; gap: .34rem; font-size: .78rem; font-weight: 850; }
.account-form input { min-height: 2.6rem; padding: .55rem .65rem; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 32%, transparent); border-radius: .65rem; color: var(--oe-ui-foreground); background-color: var(--oe-ui-surface); background-image: var(--oe-ui-lines); }
.account-form .delete-confirmation-label { grid-template-columns: auto 1fr; align-items: start; }
.account-form .delete-confirmation-checkbox { inline-size: 1.1rem; min-height: 1.1rem; padding: 0; margin-block-start: .1rem; }
.account-form .submit-button, .account-form .danger-button { justify-self: start; }
.text-button { margin-top: .35rem; padding: .45rem .65rem; border-radius: .55rem; color: var(--oe-ui-foreground); font-size: .78rem; font-weight: 850; text-decoration: underline; }
.identity-choice-stack { display: grid; gap: .55rem; margin: 1rem 0 .65rem; }
.identity-provider-button { display: flex; align-items: center; justify-content: center; gap: .72rem; width: 100%; min-height: 2.75rem; padding: .62rem .9rem; border-radius: .35rem; font-weight: 700; text-align: center; }
.identity-provider-button::before { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; background-position: center; background-repeat: no-repeat; background-size: contain; content: ""; }
.apple-provider-button { border: 1px solid #000; color: #fff; background: #000; }
.apple-provider-button::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23fff' d='M24.04 17.29c-.03-3.83 3.13-5.67 3.27-5.76-1.8-2.63-4.59-2.99-5.58-3.02-2.35-.25-4.63 1.41-5.83 1.41-1.23 0-3.08-1.38-5.08-1.34-2.57.04-4.98 1.53-6.3 3.85-2.71 4.69-.69 11.58 1.91 15.38 1.3 1.86 2.82 3.94 4.82 3.86 1.96-.08 2.69-1.24 5.06-1.24 2.34 0 3.03 1.24 5.08 1.19 2.1-.03 3.42-1.86 4.67-3.74 1.5-2.14 2.1-4.25 2.13-4.36-.05-.02-4.04-1.54-4.09-6.29zM20.15 6.02c1.04-1.3 1.75-3.07 1.56-4.86-1.51.07-3.4 1.05-4.48 2.32-.96 1.12-1.81 2.96-1.6 4.68 1.7.13 3.43-.86 4.52-2.14z'/%3E%3C/svg%3E"); }
.apple-provider-button:hover, .apple-provider-button:focus-visible { border-color: #333; color: #fff; background: #333; }
.google-provider-button { border: 1px solid #747775; color: #1f1f1f; background: #fff; font-family: Roboto, Arial, sans-serif; }
.google-provider-button::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%23EA4335' d='M17.64 9.205c0-.638-.057-1.252-.164-1.841H9v3.482h4.844a4.14 4.14 0 0 1-1.796 2.716v2.258h2.909c1.702-1.567 2.683-3.874 2.683-6.615z'/%3E%3Cpath fill='%234285F4' d='M9 18c2.43 0 4.468-.806 5.957-2.18l-2.91-2.258c-.805.54-1.835.86-3.047.86-2.344 0-4.33-1.585-5.04-3.714H.952v2.332A9 9 0 0 0 9 18z'/%3E%3Cpath fill='%23FBBC05' d='M3.96 10.728A5.41 5.41 0 0 1 3.678 9c0-.6.103-1.182.282-1.728V4.94H.952A9 9 0 0 0 0 9c0 1.452.347 2.827.952 4.06l3.008-2.332z'/%3E%3Cpath fill='%2334A853' d='M9 3.58c1.322 0 2.508.455 3.442 1.346l2.581-2.581C13.463.892 11.425 0 9 0A9 9 0 0 0 .952 4.94L3.96 7.272C4.67 5.143 6.656 3.58 9 3.58z'/%3E%3C/svg%3E"); }
.google-provider-button:hover, .google-provider-button:focus-visible { border-color: #747775; color: #1f1f1f; background: #f7f8f8; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.identity-provider-button:disabled { cursor: not-allowed; filter: grayscale(.35); opacity: .58; }
.first-use-sheet .consent-row { color: var(--oe-ui-foreground); background-color: var(--oe-ui-terminal-surface); border-color: color-mix(in srgb, var(--oe-ui-foreground) 26%, transparent); }
.help-steps { display: grid; gap: .55rem; margin: 1rem 0 0; padding-left: 1.35rem; color: var(--oe-ui-foreground); font-size: .94rem; font-weight: 650; line-height: 1.45; }
.refund-result-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; max-height: 45dvh; margin-top: 1rem; overflow-y: auto; }
.refund-result-choice { display: grid; gap: .4rem; padding: .45rem; border: 2px solid color-mix(in srgb, var(--oe-ui-foreground) 24%, transparent); border-radius: .75rem; color: var(--oe-ui-foreground); background-color: var(--oe-ui-terminal-surface); background-image: var(--oe-ui-lines); font: inherit; font-size: .72rem; font-weight: 800; text-align: left; }
.refund-result-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.refund-result-choice img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .45rem; background: rgba(0,0,0,.08); }
.policy-link { display: inline-block; margin-top: 1rem; color: var(--oe-ui-foreground); font-size: .76rem; font-weight: 800; }
.account-actions { justify-content: flex-start; }
.native-purchase, .credit-activity { margin-top: 1.15rem; padding: .9rem; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 20%, transparent); color: var(--oe-ui-foreground); background-color: var(--oe-ui-terminal-surface); background-image: var(--oe-ui-lines); }
.native-purchase h3, .credit-activity h3 { margin: 0; font-size: .9rem; }
.native-purchase p, .credit-activity p { margin: .35rem 0 .6rem; }
.purchase-products { display: flex; flex-wrap: wrap; gap: .5rem; }
.credit-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.credit-activity-toggle { flex: 0 0 auto; padding: .45rem .65rem; font-size: .72rem; }
.credit-activity { border-radius: 1rem; }
#accountDialog { overflow: hidden; }
#creditActivityList { max-block-size: min(38dvh, 22rem); margin-top: .75rem; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.credit-activity-list { margin-top: 0; }
.credits-balance { margin: .2rem 0 1rem !important; color: var(--oe-ui-muted) !important; font-weight: 850; }
.credit-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .58rem; }
.credit-pack { display: grid; grid-template-rows: auto 1fr; gap: .55rem; min-height: 8.8rem; padding: .8rem; border: 1px solid color-mix(in srgb, var(--oe-ui-foreground) 27%, transparent); border-radius: 1rem; color: var(--oe-ui-foreground); background-color: var(--oe-ui-terminal-surface); background-image: var(--oe-ui-texture); box-shadow: inset 0 1px color-mix(in srgb, #fff 65%, transparent); }
.credit-pack span { font-size: .7rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.credit-pack strong { align-self: start; min-block-size: 2.2em; font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; line-height: 1.1; }
.credit-pack em { align-self: end; font-size: .88rem; font-style: normal; font-weight: 900; line-height: 1.25; }
.credit-pack.featured { transform: translateY(-.24rem); border-color: color-mix(in srgb, var(--accent) 66%, var(--oe-ui-foreground)); box-shadow: 0 8px 18px color-mix(in srgb, var(--oe-ui-foreground) 18%, transparent), inset 0 1px color-mix(in srgb, #fff 65%, transparent); }
.credit-activity-list { display: grid; gap: .42rem; }
.credit-activity-row { display: flex; justify-content: space-between; gap: .65rem; align-items: baseline; padding-top: .42rem; border-top: 1px solid rgba(43,55,44,.13); font-size: .79rem; }
.credit-activity-row:first-child { padding-top: 0; border-top: 0; }
.credit-activity-row span { color: var(--oe-ui-muted); font-size: .71rem; }
.credit-activity-amount { color: var(--oe-ui-foreground) !important; font-weight: 850; font-size: .79rem !important; white-space: nowrap; }
.prepare-sheet { position: relative; width: min(920px, calc(100% - 1.5rem)); }
.prepare-sheet > .close-button { position: absolute; z-index: 2; right: 1rem; top: 1rem; }
#maskCanvas { display: block; width: auto; height: auto; max-width: 100%; max-height: 55dvh; margin: .3rem auto 0; border: 1px solid rgba(42,38,30,.37); background: #d8d3ca; touch-action: none; cursor: crosshair; }
.content-policy-warning { margin: .7rem auto 0; max-width: 64ch; color: var(--oe-ui-foreground); font-size: clamp(.63rem, 1.9vw, .76rem); font-weight: 900; line-height: 1.35; letter-spacing: .045em; text-align: center; }
.settings-sheet { width: min(700px, calc(100% - 1.5rem)); overflow-y: auto; }
.settings-sheet > form { position: sticky; z-index: 3; top: .55rem; display: block; height: 0; }
.settings-sheet > form .close-button { position: absolute; top: 0; right: 0; float: none; }
.settings-sheet > h2 { padding-right: 2.75rem; }
.material-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: 1rem; }
.material-choice { min-height: 3.25rem; padding: .6rem .7rem; border: 2px solid rgba(55,47,35,.19); color: inherit; text-align: left; font-size: .76rem; font-weight: 850; box-shadow: inset 0 1px rgba(255,255,255,.4); }
.material-choice[aria-pressed="true"] { border-color: #134d7d; }
.image-viewer { width: min(96vw, 1180px); max-height: 96dvh; padding: .6rem; border-radius: .9rem; background: #151713; }
.image-viewer .close-button { position: absolute; z-index: 1; right: 1rem; top: 1rem; color: #fff; background: rgba(0, 0, 0, .55); }
.image-viewer img { display: block; width: auto; max-width: 100%; max-height: calc(96dvh - 1.2rem); margin: 0 auto; object-fit: contain; }
.policy-page, .admin-page { width: min(780px, calc(100% - 2rem)); margin: 0 auto; padding: 2.5rem 0 5rem; }
.policy-page h1, .admin-page h1 { margin: .25rem 0 1.1rem; font-size: clamp(1.8rem, 6vw, 2.8rem); }
.policy-page h2 { margin: 2rem 0 .45rem; font-size: 1.05rem; }
.policy-page p { max-width: 72ch; font-size: .98rem; line-height: 1.66; }
.policy-page a { color: #173c2b; font-weight: 800; }
.narrow-page { width: min(520px, calc(100% - 2rem)); }
.back-link { color: #173c2b; font-size: .8rem; font-weight: 850; text-decoration: none; }
.success-copy { margin: 0; color: #174a31; font-size: .86rem; font-weight: 800; }
.admin-page { width: min(1080px, calc(100% - 2rem)); }
.admin-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; padding-bottom: 1.35rem; border-bottom: 1px solid rgba(53,45,35,.22); }
.admin-header h1 { margin-bottom: 0; }
.admin-notice, .admin-panel, .admin-search { padding: 1.2rem; border: 1px solid rgba(53,45,35,.24); background: rgba(255,253,247,.76); box-shadow: 0 5px 15px rgba(55,47,35,.09); }
.admin-notice { max-width: 520px; margin: 2rem auto; text-align: center; }
.admin-search { margin: 1.7rem 0; }
.admin-search label { display: block; margin-bottom: .55rem; font-size: .8rem; font-weight: 900; }
.admin-search > div { display: flex; gap: .65rem; }
.admin-search input { min-width: 0; flex: 1; min-height: 2.75rem; padding: .6rem .7rem; border: 1px solid rgba(47,40,30,.32); border-radius: .65rem; background: rgba(255,255,255,.8); }
.admin-search .submit-button { min-width: auto; padding: .65rem 1rem; }
.admin-layout { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.4fr); gap: 1rem; align-items: start; }
.admin-panel h2 { margin: 0 0 .4rem; font-size: 1rem; }
.refund-request-panel { display: grid; gap: .75rem; margin-top: 1rem; }
.refund-request-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .55rem; max-height: 20rem; overflow: auto; }
.refund-request-row { display: grid; gap: .16rem; width: 100%; padding: .75rem; border: 1px solid rgba(41,79,60,.35); border-radius: .65rem; color: var(--ink); background: rgba(245,251,245,.82); text-align: left; }
.refund-request-row strong { font-size: .84rem; }
.refund-request-row span, .refund-request-row small { font-size: .74rem; line-height: 1.35; }
.refund-request-detail { min-height: 3rem; padding-top: .8rem; border-top: 1px solid rgba(53,45,35,.18); }
.owner-review-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.owner-review-image { min-width: 0; margin: 0; padding: .45rem; border: 1px solid rgba(53,45,35,.22); border-radius: .65rem; background: rgba(255,255,255,.55); }
.owner-review-image img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: contain; border-radius: .4rem; background: rgba(35,30,24,.08); }
.owner-review-image figcaption { margin-top: .4rem; font-size: .72rem; font-weight: 850; text-align: center; }
.user-results { display: grid; gap: .45rem; }
.user-row { display: grid; gap: .18rem; width: 100%; padding: .7rem; border: 1px solid rgba(47,40,30,.2); border-radius: .55rem; color: var(--ink); background: rgba(255,255,255,.5); text-align: left; }
.user-row:hover { border-color: #174a31; background: rgba(234,244,233,.7); }
.user-row span, .user-row small { font-size: .73rem; opacity: .78; }
.detail-list { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem .75rem; margin: 0; font-size: .84rem; }
.detail-list dt { font-weight: 900; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; }
.ticket-list { display: flex; flex-wrap: wrap; gap: .45rem; }
.ticket-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .75rem 0; }
.ticket-images figure { min-width: 0; margin: 0; }
.ticket-images img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(54,47,36,.25); }
.ticket-images figcaption { margin-top: .25rem; font-size: .64rem; font-weight: 850; letter-spacing: .08em; }
.user-detail h3 { margin: 1.2rem 0 .45rem; font-size: .87rem; }
.timeline { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; gap: .12rem; padding: .55rem; border-left: 3px solid rgba(41,79,60,.45); background: rgba(255,255,255,.45); font-size: .76rem; }
.timeline small { opacity: .68; }
.admin-evidence-summary { display: inline-flex; margin: 0 0 .7rem; padding: .35rem .55rem; border-radius: 999px; background: rgba(23,74,49,.12); color: #174a31; font-size: .72rem; font-weight: 900; letter-spacing: .06em; }
.admin-evidence-record { max-height: 34rem; margin: 0; padding: .85rem; overflow: auto; border: 1px solid rgba(47,40,30,.2); border-radius: .6rem; background: rgba(34,31,25,.94); color: #f8f2e7; font: .7rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.owner-actions { display: grid; gap: .7rem; margin-top: 1.35rem; padding-top: 1.2rem; border-top: 1px solid rgba(53,45,35,.2); }
.owner-actions h3 { margin: 0; }
.owner-action-form { display: grid; grid-template-columns: minmax(6.5rem, .33fr) minmax(0, 1fr) auto; gap: .55rem; align-items: end; }
.owner-action-field { display: grid; gap: .3rem; color: #393128; font-size: .72rem; font-weight: 850; }
.owner-action-field input { width: 100%; min-height: 2.45rem; padding: .48rem .58rem; border: 1px solid rgba(47,40,30,.32); border-radius: .55rem; background: rgba(255,255,255,.82); color: #29231d; }
.owner-action-form .submit-button { min-width: auto; min-height: 2.45rem; padding: .6rem .82rem; }
.owner-suspend-button { min-height: 2.45rem; padding: .6rem .82rem; border: 1px solid #7d211d; border-radius: .55rem; color: #fff8f3; background: #852d27; font-weight: 900; }

@media (max-width: 640px) {
  .topbar, .creation-surface { width: min(100% - 1.2rem, 520px); }
  .brand { font-size: .62rem; letter-spacing: .17em; }
  .credit-word { display: none; }
  .polaroid-grid { gap: 1.3rem; }
  .polaroid { min-height: 288px; padding: .72rem .72rem .9rem; }
  .image-well, .upload-preview { min-height: 205px; height: 205px; }
  .panel-actions { flex-wrap: wrap; padding-top: .65rem; }
  .primary-mini, .secondary-mini { padding: .42rem .58rem; font-size: .69rem; }
  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credit-pack-grid { grid-template-columns: 1fr; }
  .credit-pack { min-height: 0; grid-template-columns: 1fr auto; align-items: center; }
  .credit-pack strong { grid-row: span 2; }
  .credit-pack.featured { transform: none; }
  .prepare-actions .secondary-button { flex: 1 1 42%; }
  .admin-layout { grid-template-columns: 1fr; }
  .owner-review-media { grid-template-columns: 1fr; }
  .admin-search > div { flex-direction: column; }
  .owner-action-form { grid-template-columns: 1fr; }
}

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