:root {
  color-scheme: light;
  --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 {
  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;
}

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: #fffaf0; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.brand-line { color: #fffaf0; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.recent-derived-surface, .status-surface:not(:empty) { position: relative; isolation: isolate; border: 1px solid color-mix(in srgb, var(--recent-foreground) 28%, transparent); border-radius: .95rem; color: var(--recent-foreground); background-color: color-mix(in srgb, var(--recent-surface) 92%, transparent); background-image: radial-gradient(circle at 13% 18%, color-mix(in srgb, var(--recent-foreground) 9%, transparent) 0 1px, transparent 1.35px), repeating-linear-gradient(17deg, color-mix(in srgb, var(--recent-foreground) 5%, transparent) 0 1px, transparent 1px 5px), linear-gradient(135deg, color-mix(in srgb, var(--recent-surface) 93%, transparent), color-mix(in srgb, var(--recent-surface) 74%, var(--recent-foreground) 26%)); box-shadow: 0 7px 16px color-mix(in srgb, var(--recent-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(--recent-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(--recent-foreground) 34%, transparent); border-radius: .78rem; background: color-mix(in srgb, var(--recent-surface) 56%, var(--recent-foreground) 44%); color: #fffaf0; 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 rgba(43, 39, 30, .28);
  border-radius: 999px;
  box-shadow: inset 0 1px rgba(255,255,255,.72), 0 3px 8px rgba(63, 53, 39, .14);
  background-image: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.1)), repeating-linear-gradient(110deg, rgba(78,62,34,.035) 0 1px, transparent 1px 4px);
  color: var(--ink);
}
.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; }

.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;
  background: linear-gradient(125deg, rgba(255,255,255,.95), rgba(242,237,225,.95));
  border: 1px solid rgba(91, 82, 66, .28);
  box-shadow: 0 18px 25px rgba(47,40,30,.17), inset 0 0 0 1px rgba(255,255,255,.72), inset 2px 0 rgba(205,196,177,.22);
  transform: rotate(-1.2deg);
}
.polaroid:nth-child(2) { transform: rotate(1.2deg); margin-top: 1.2rem; }
.polaroid::before { content: ""; position: absolute; inset: 0; opacity: .36; pointer-events: none; background-image: repeating-linear-gradient(4deg, rgba(84,70,49,.055) 0 1px, transparent 1px 5px), radial-gradient(circle at 30% 60%, rgba(110,91,58,.08) 0 1px, transparent 1px 3px); background-size: auto, 9px 9px; mix-blend-mode: multiply; }
.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 { font-size: .8rem; font-weight: 700; opacity: .68; }
.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); 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(--recent-foreground)); color: var(--recent-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(--recent-focus-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(--recent-foreground) 24%, transparent); border-radius: 1.65rem; background-color: color-mix(in srgb, var(--recent-surface) 92%, transparent); background-image: radial-gradient(circle at 13% 18%, color-mix(in srgb, var(--recent-foreground) 9%, transparent) 0 1px, transparent 1.35px), repeating-linear-gradient(17deg, color-mix(in srgb, var(--recent-foreground) 5%, transparent) 0 1px, transparent 1px 5px), linear-gradient(135deg, color-mix(in srgb, var(--recent-surface) 93%, transparent), color-mix(in srgb, var(--recent-surface) 74%, var(--recent-foreground) 26%)); box-shadow: 0 19px 34px color-mix(in srgb, var(--recent-foreground) 16%, transparent), inset 0 1px color-mix(in srgb, #fff 70%, transparent); }
.recent-surface { color: var(--recent-foreground); }
.album-section::before { position: absolute; z-index: -1; inset: .42rem; border: 1px solid color-mix(in srgb, var(--recent-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(--recent-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(--recent-foreground) 42%, transparent); color: var(--recent-foreground); text-align: center; font-size: .95rem; font-weight: 650; }
.result-card { overflow: hidden; border: 1px solid color-mix(in srgb, var(--recent-foreground) 30%, transparent); border-radius: 1rem; background: var(--recent-surface); box-shadow: 0 6px 16px color-mix(in srgb, var(--recent-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 rgba(255,255,255,.76); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-weight: 760; letter-spacing: .02em; text-decoration: none; }
.support-email-link:hover, .support-email-link:focus-visible { background: rgba(255,255,255,.2); outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }
.result-info { padding: .55rem; }
.result-meta { margin: .3rem 0; color: var(--recent-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(--recent-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(--recent-foreground); background: var(--recent-surface); 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(--theme-panel-foreground) 32%, transparent); color: var(--theme-panel-foreground); background: var(--theme-panel-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; background-color: var(--theme-panel-surface); background-image: repeating-linear-gradient(115deg, color-mix(in srgb, var(--theme-panel-foreground) 5%, transparent) 0 1px, transparent 1px 4px); }
.compact-sheet { width: min(470px, calc(100% - 1.5rem)); }
.sheet h2 { margin: .15rem 0 .55rem; font-size: 1.33rem; }
.sheet p { color: var(--theme-panel-foreground); font-size: .89rem; line-height: 1.5; }
.help-sheet, .help-sheet h2, .help-sheet li { color: var(--theme-panel-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(--theme-panel-foreground); background: color-mix(in srgb, var(--theme-panel-foreground) 12%, transparent); font-size: 1.45rem; }
.eyebrow { margin: 0; color: var(--theme-panel-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: rgba(120,32,28,.4); color: #801f1b; }
.consent-row { display: flex; align-items: flex-start; gap: .55rem; margin: 1rem 0 .5rem; padding: .8rem; border: 1px solid rgba(43,55,44,.2); background: rgba(255,255,255,.42); font-size: .84rem; font-weight: 750; }
.consent-row input { width: 1.1rem; height: 1.1rem; margin: 0; }
.fine-print { color: var(--theme-panel-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(--theme-panel-foreground) 32%, transparent); border-radius: .65rem; color: #172118; background: #fffdf7; }
.account-form .submit-button, .account-form .danger-button { justify-self: start; }
.text-button { margin-top: .35rem; padding: .45rem .65rem; border-radius: .55rem; color: var(--theme-panel-foreground); font-size: .78rem; font-weight: 850; text-decoration: underline; }
.identity-choice-stack { display: grid; gap: .55rem; margin: 1rem 0 .65rem; }
.identity-provider-button { width: 100%; min-height: 2.7rem; padding: .62rem .75rem; border: 1px solid color-mix(in srgb, var(--theme-panel-foreground) 35%, transparent); border-radius: .7rem; color: var(--theme-panel-foreground); background: color-mix(in srgb, var(--theme-panel-surface) 78%, var(--theme-panel-foreground) 22%); font-weight: 850; text-align: left; }
.identity-provider-button:hover, .identity-provider-button:focus-visible { color: var(--theme-panel-foreground); background: color-mix(in srgb, var(--theme-panel-surface) 66%, var(--theme-panel-foreground) 34%); }
.first-use-sheet .consent-row { color: var(--theme-panel-foreground); background: color-mix(in srgb, var(--theme-panel-surface) 80%, var(--theme-panel-foreground) 20%); border-color: color-mix(in srgb, var(--theme-panel-foreground) 26%, transparent); }
.help-steps { display: grid; gap: .55rem; margin: 1rem 0 0; padding-left: 1.35rem; color: var(--theme-panel-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(--theme-panel-foreground) 24%, transparent); border-radius: .75rem; color: var(--theme-panel-foreground); background: color-mix(in srgb, var(--theme-panel-surface) 82%, var(--theme-panel-foreground) 18%); 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: #173c2b; 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 rgba(43,55,44,.2); background: rgba(255,255,255,.42); }
.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(--theme-panel-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(--recent-foreground) 27%, transparent); border-radius: 1rem; color: var(--recent-foreground); background-color: color-mix(in srgb, var(--recent-surface) 87%, transparent); background-image: radial-gradient(circle at 13% 18%, color-mix(in srgb, var(--recent-foreground) 8%, transparent) 0 1px, transparent 1.35px), repeating-linear-gradient(17deg, color-mix(in srgb, var(--recent-foreground) 5%, transparent) 0 1px, transparent 1px 5px), linear-gradient(135deg, color-mix(in srgb, var(--recent-surface) 95%, transparent), color-mix(in srgb, var(--recent-surface) 74%, var(--recent-foreground) 26%)); 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(--recent-foreground)); box-shadow: 0 8px 18px color-mix(in srgb, var(--recent-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: rgba(31,36,31,.72); font-size: .71rem; }
.credit-activity-amount { color: var(--ink) !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(--theme-panel-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; } }