@font-face {
  font-family: "Noto CJK";
  src: url("./assets/fonts/NotoSansCJKsc-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto CJK";
  src: url("./assets/fonts/NotoSansCJKsc-Black.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #5a8f2b;
  --brand-dark: #3f681e;
  --ink: #111111;
  --muted: #77756f;
  --cream: #f7f3e9;
  --paper: #fffefa;
  --line: #e7e2d7;
  --warm: #d7b785;
  --shadow: 0 18px 50px rgba(42, 40, 32, 0.09);
  font-family: "Noto CJK", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #e9e6de;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #e9e6de; }

body {
  min-height: 100%;
  margin: 0;
  background: #e9e6de;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button { color: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }

.desktop-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 20%, rgba(90,143,43,.13), transparent 28%),
    radial-gradient(circle at 82% 75%, rgba(194,151,91,.14), transparent 30%),
    #e9e6de;
}

.grain { position: absolute; border: 1px solid rgba(17,17,17,.08); border-radius: 999px; }
.grain-a { width: 420px; height: 420px; left: -190px; bottom: 6%; }
.grain-b { width: 260px; height: 260px; right: -90px; top: 8%; }

.app-shell {
  position: relative;
  width: min(100%, 480px);
  min-height: 100svh;
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
}

.app-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  padding: 18px 20px 12px;
  background: rgba(255,254,250,.92);
  backdrop-filter: blur(18px);
}

.brand-logo { width: 166px; height: auto; }
.prototype-badge { padding: 5px 9px; border: 1px solid #d9d4c9; border-radius: 99px; color: #77736b; font-size: 11px; letter-spacing: .08em; }
.prototype-badge.is-ready { color:var(--brand-dark); border-color:#c9ddba; background:#eff6e9; }
.header-actions { display:flex; align-items:center; gap:7px; }
.history-button { display:flex; align-items:center; gap:4px; min-height:32px; padding:0 8px; border:0; border-radius:99px; color:#5e5a52; background:#f3f0e8; font-size:10px; cursor:pointer; }
.history-button svg { width:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.icon-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: -2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f3f0e8;
  cursor: pointer;
}
.icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.back-button + .brand-logo { margin-left: -2px; }
.back-button.is-hidden { display: none; }

.screen { display: none; padding: 18px 20px 126px; animation: screenIn .36s ease both; }
.screen.is-active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

.hero-copy { padding-top: 8px; }
.eyebrow { color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
h1, h2, p { margin-top: 0; }
.hero-copy h1 { margin: 12px 0 14px; font-size: clamp(34px, 10.2vw, 46px); line-height: 1.1; letter-spacing: -.045em; }
.hero-copy h1 em { color: var(--brand); font-style: normal; }
.hero-copy p { max-width: 390px; margin-bottom: 22px; color: var(--muted); font-size: 14px; line-height: 1.7; }

.output-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fbf9f3;
}
.output-summary div { display: flex; align-items: baseline; gap: 6px; }
.output-summary strong { font-size: 21px; }
.output-summary span { color: var(--muted); font-size: 12px; }
.output-summary i { width: 1px; height: 24px; background: var(--line); }

.upload-card {
  position: relative;
  display: block;
  min-height: 278px;
  overflow: hidden;
  border: 1.5px dashed #bdb6a8;
  border-radius: 22px;
  background: linear-gradient(145deg, #faf8f2, #f4f0e6);
  cursor: pointer;
}
.upload-card input, .logo-uploader input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload-card.is-dragging { border-color: var(--brand); background: #f1f6eb; }
.upload-empty { display: flex; min-height: 278px; align-items: center; justify-content: center; flex-direction: column; padding: 24px; text-align: center; }
.upload-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 16px; border-radius: 50%; background: var(--brand); color: white; box-shadow: 0 10px 28px rgba(90,143,43,.25); }
.upload-icon svg, .text-button svg, .privacy-note svg, .logo-uploader svg, .copy-safety-note svg { width: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.upload-empty strong { margin-bottom: 7px; font-size: 17px; }
.upload-empty > span:not(.upload-icon) { color: var(--muted); font-size: 13px; }
.upload-empty small { margin-top: 13px; color: #aaa59b; font-size: 10px; }
.upload-preview { position: relative; min-height: 278px; }
.upload-preview img { display: block; width: 100%; height: 278px; object-fit: contain; background: #f7f5ef; }
.replace-chip { position: absolute; right: 12px; bottom: 12px; padding: 7px 11px; border-radius: 99px; color: white; background: rgba(17,17,17,.78); font-size: 11px; backdrop-filter: blur(8px); }
.image-processing-note { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; margin-top:10px; border:1px solid #d6e4ca; border-radius:12px; color:#456725; background:#f2f7ed; font-size:10px; }
.image-processing-note span { display:flex; min-width:0; align-items:center; gap:7px; }
.image-processing-note i { display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; border-radius:50%; color:white; background:var(--brand); font-size:9px; font-style:normal; }
.image-processing-note strong { overflow:hidden; font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.image-processing-note button { flex:0 0 auto; min-height:32px; padding:0 8px; border:0; border-radius:8px; color:var(--brand-dark); background:#e4efda; font-size:9px; cursor:pointer; }
.is-hidden { display: none !important; }

.text-button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px; border: 0; color: var(--brand-dark); background: transparent; font-size: 13px; cursor: pointer; }
.text-button svg { width: 19px; }
.privacy-note { display:flex; align-items:flex-start; justify-content:center; gap:7px; padding:10px 11px; margin-top:2px; border-radius:10px; color:#6f675d; background:#f6f1e7; font-size:10px; line-height:1.55; }
.privacy-note svg { flex:0 0 15px; width:15px; margin-top:1px; }

.sticky-action {
  position: fixed;
  z-index: 30;
  right: max(0px, calc((100vw - 480px) / 2));
  bottom: 0;
  left: max(0px, calc((100vw - 480px) / 2));
  display: flex;
  gap: 10px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(231,226,215,.75);
  background: rgba(255,254,250,.94);
  backdrop-filter: blur(16px);
}
.primary-button, .secondary-button {
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
.primary-button { flex: 1; padding: 0 18px; color: white; background: var(--ink); box-shadow: 0 12px 24px rgba(17,17,17,.13); }
.primary-button:not(:disabled):active, .secondary-button:active { transform: scale(.985); }
.primary-button:disabled { opacity: .32; cursor: not-allowed; }
.secondary-button { flex: 0 0 104px; border: 1px solid var(--line); background: #f7f4ec; }

.section-heading { margin: 3px 0 19px; }
.section-heading.compact { margin-top: 34px; }
.step-count { display: block; margin-bottom: 8px; color: var(--brand); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.section-heading h2 { margin-bottom: 7px; font-size: 26px; line-height: 1.24; letter-spacing: -.035em; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

.product-mini-card { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px; padding: 10px; margin-bottom: 25px; border: 1px solid var(--line); border-radius: 16px; background: #fbfaf6; }
.product-mini-card img { width: 54px; height: 54px; border-radius: 11px; object-fit: contain; background: white; }
.product-mini-card div { min-width: 0; }
.product-mini-card span { display: block; color: var(--muted); font-size: 10px; }
.product-mini-card strong { display: block; overflow: hidden; margin-top: 3px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.product-mini-card button { border: 0; color: var(--brand-dark); background: transparent; font-size: 11px; cursor: pointer; }

.form-group { position: relative; margin-bottom: 22px; }
.form-group > label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 13px; font-weight: 800; }
.form-group label b { color: var(--brand); font-size: 9px; font-weight: 400; }
.form-group label b.optional { color: #9a958b; }
.form-group input, .form-group textarea { width: 100%; border: 1px solid var(--line); border-radius: 14px; outline: none; background: #fbfaf6; font-size: 14px; transition: border-color .2s, box-shadow .2s; }
.form-group input { height: 50px; padding: 0 46px 0 14px; }
.form-group textarea { min-height: 96px; padding: 13px 45px 13px 14px; resize: vertical; line-height: 1.65; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(90,143,43,.09); }
.form-group > small { position: absolute; right: 13px; bottom: 14px; color: #aaa59b; font-size: 9px; }
.field-hint { margin: 7px 0 0; color: #aaa59b; font-size: 9px; }
.logo-field-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.remove-logo-button { flex:0 0 auto; min-height:32px; margin-top:7px; padding:0 8px; border:0; border-radius:8px; color:#8b4d3b; background:#f6ebe7; font-size:9px; cursor:pointer; }
.logo-uploader { display: flex !important; align-items: center !important; justify-content: center !important; height: 72px; margin: 0 !important; overflow: hidden; border: 1px dashed #c9c3b7; border-radius: 14px; color: var(--muted); background: #fbfaf6; cursor: pointer; }
.logo-uploader span { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; }
.logo-uploader svg { width: 18px; }
.logo-uploader img { max-width: 75%; max-height: 46px; object-fit: contain; }

.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.style-card { position:relative; padding: 8px 8px 12px; overflow: hidden; border: 1.5px solid var(--line); border-radius: 16px; text-align: left; background: white; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; }
.style-card.is-selected { border-color: var(--brand); box-shadow: 0 8px 22px rgba(90,143,43,.12); }
.style-card.is-selected::after { content: "✓"; position:absolute; top:14px; right:14px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:white; background:var(--brand); box-shadow:0 4px 12px rgba(46,82,19,.25); font-size:10px; }
.style-card strong, .style-card small { display: block; padding: 0 3px; }
.style-card strong { margin-top: 9px; font-size: 13px; }
.style-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.style-preview { position: relative; display: block; height: 88px; overflow: hidden; border-radius: 11px; }
.style-preview::before { content: ""; position: absolute; width: 72px; height: 28px; left: 50%; bottom: 14px; transform: translateX(-50%); border-radius: 50%; background: linear-gradient(#bd7431,#7d3e14); box-shadow: 0 12px 20px rgba(41,24,10,.18); }
.style-preview i { position: absolute; width: 54px; height: 8px; left: 50%; bottom: 9px; transform: translateX(-50%); border-radius: 50%; background: rgba(0,0,0,.13); filter: blur(3px); }
.style-morning { background: linear-gradient(135deg,#f5eee2,#d9bd92); }
.style-morning::after { content:""; position:absolute; width:70px; height:70px; top:-35px; right:-8px; border-radius:50%; background:#fff7d1; box-shadow:0 0 25px #fff5bb; }
.style-clean { background: linear-gradient(145deg,#fff,#eeeee9); }
.style-warm { background: linear-gradient(145deg,#bf7a3e,#5b2e16); }
.style-dark { background: radial-gradient(circle at 70% 20%,#70543e,#141311 64%); }

.poster-picker { margin-top: 24px; }
.picker-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.picker-title strong { font-size: 13px; }
.picker-title span { color: var(--muted); font-size: 9px; }
.poster-options { display: flex; gap: 9px; margin: 0 -20px; padding: 0 20px 8px; overflow-x: auto; scrollbar-width: none; }
.poster-options::-webkit-scrollbar { display: none; }
.poster-option { flex: 0 0 84px; padding: 6px 6px 9px; border: 1.5px solid transparent; border-radius: 13px; background: #f8f6f0; cursor: pointer; }
.poster-option.is-selected { border-color: var(--brand); background: #f2f7ed; }
.poster-option span { display: block; margin-top: 6px; font-size: 9px; white-space: nowrap; }
.poster-thumb { display: grid; place-items: center; height: 86px; border-radius: 8px; font-size: 15px; font-style: normal; font-weight: 800; }
.editorial-thumb { color: #c7352b; background: #f4d9b3; font-family: Georgia,serif; font-size: 26px; }
.catalog-thumb { color: #151515; background: #fff; border: 1px solid #e7e4de; }
.handmade-thumb { color: #9a552e; background: #eee0c8; }
.playful-thumb { color: #d94372; background: #ffd6e3; }
.hero-thumb { color: #f3dd9f; background: #23160f; }

.generation-screen { min-height: calc(100svh - 76px); padding-top: 26px; background: var(--cream); }
.generation-visual { position: relative; height: 275px; margin-bottom: 18px; }
.generation-product-wrap { position: absolute; z-index: 4; width: 185px; height: 185px; left: 50%; top: 42px; padding: 12px; transform: translateX(-50%); border-radius: 50%; background: #fff; box-shadow: 0 24px 50px rgba(65,55,36,.16); animation: hover 3s ease-in-out infinite; }
.generation-product-wrap img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; mix-blend-mode: multiply; }
@keyframes hover { 50% { transform: translate(-50%,-8px) rotate(-1deg); } }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(90,143,43,.24); border-radius: 50%; transform: translate(-50%,-50%); animation: spin 12s linear infinite; }
.orbit::after { content:""; position:absolute; width:9px; height:9px; top:14%; left:10%; border-radius:50%; background:var(--brand); }
.orbit-one { width: 225px; height: 225px; }
.orbit-two { width: 270px; height: 170px; transform: translate(-50%,-50%) rotate(28deg); animation-duration: 17s; }
.orbit-two::after { background:#cb9348; }
.orbit-three { width: 170px; height: 270px; transform: translate(-50%,-50%) rotate(-28deg); animation-duration: 20s; animation-direction: reverse; }
@keyframes spin { to { rotate: 360deg; } }
.spark { position: absolute; z-index: 5; color: var(--brand); font-size: 25px; animation: twinkle 1.6s ease-in-out infinite; }
.spark-a { top: 30px; right: 48px; }
.spark-b { bottom: 40px; left: 55px; color: #c28a42; animation-delay: .7s; }
@keyframes twinkle { 50% { opacity: .35; transform: scale(.78); } }
.generation-copy { text-align: center; }
.generation-copy h2 { margin: 10px 0 10px; font-size: 27px; line-height: 1.3; letter-spacing: -.035em; }
.generation-copy p { min-height: 22px; color: var(--muted); font-size: 12px; }
.progress-wrap { margin-top: 28px; }
.progress-track { height: 7px; overflow: hidden; border-radius: 99px; background: #dfdbcf; }
.progress-track span { display:block; width: 12%; height:100%; border-radius:inherit; background:var(--brand); transition:width .45s ease; }
.progress-wrap > div:last-child { display:flex; justify-content:space-between; margin-top:8px; }
.progress-wrap span { font-size:11px; font-weight:800; }
.progress-wrap small { color:var(--muted); font-size:9px; }
.generation-steps { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:24px; }
.generation-steps span { display:flex; align-items:center; gap:7px; padding:10px; border:1px solid var(--line); border-radius:12px; color:#99958d; background:rgba(255,255,255,.42); font-size:10px; }
.generation-steps i { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#e6e2d8; font-size:9px; font-style:normal; }
.generation-steps span.is-done { color:var(--brand-dark); background:#f2f7ed; border-color:#cfdfc1; }
.generation-steps span.is-done i { color:white; background:var(--brand); }

.result-screen { padding-top: 8px; }
.result-heading { display:flex; align-items:center; gap:12px; padding:12px 0 18px; }
.success-mark { display:grid; place-items:center; flex:0 0 42px; height:42px; border-radius:50%; color:white; background:var(--brand); font-weight:800; }
.result-heading h2 { margin:0 0 4px; font-size:20px; }
.result-heading p { margin:0; color:var(--muted); font-size:10px; }
.result-tabs { position:sticky; z-index:10; top:76px; display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin:0 0 14px; border-radius:13px; background:#f1eee6; }
.result-tabs button { height:44px; border:0; border-radius:10px; color:#88837a; background:transparent; font-size:11px; cursor:pointer; }
.result-tabs button b { display:inline-grid; place-items:center; min-width:17px; height:17px; margin-left:3px; border-radius:50%; background:#e0dbd0; font-size:8px; }
.result-tabs button.is-active { color:var(--ink); background:white; box-shadow:0 3px 10px rgba(0,0,0,.06); font-weight:800; }
.result-tabs button.is-active b { color:white; background:var(--brand); }
.result-panel { display:none; }
.result-panel.is-active { display:block; animation:screenIn .28s ease both; }
.prototype-callout { padding:10px 11px; margin-bottom:12px; border-radius:10px; color:#6e695f; background:#f7f1df; font-size:9px; line-height:1.5; }
.prototype-callout span { margin-right:5px; color:#8b5f1e; font-weight:800; }
.visual-result-card { overflow:hidden; margin-bottom:16px; border:1px solid var(--line); border-radius:18px; background:white; box-shadow:var(--shadow); }
.visual-result-card > img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:#eee; }
.poster-result-card > img { aspect-ratio:3/4; }
.visual-result-card > div { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; }
.visual-result-card span strong, .visual-result-card span small { display:block; }
.visual-result-card span strong { font-size:11px; }
.visual-result-card span small { margin-top:3px; color:var(--muted); font-size:8px; }
.download-button { flex:0 0 auto; min-height:36px; padding:8px 11px; border:1px solid var(--line); border-radius:9px; background:#f8f6f0; font-size:9px; cursor:pointer; }
.download-button:disabled { opacity:.52; cursor:wait; }
.result-card-actions { display:flex; flex:0 0 auto; gap:6px; }
.copy-safety-note { display:flex; align-items:flex-start; gap:8px; padding:11px; margin-bottom:12px; border-radius:11px; color:#456725; background:#f0f6ea; font-size:9px; line-height:1.5; }
.copy-safety-note svg { flex:0 0 17px; width:17px; }
.copy-card { margin-bottom:12px; padding:15px; border:1px solid var(--line); border-radius:16px; background:white; }
.copy-card h3 { margin:0 0 9px; font-size:15px; line-height:1.45; }
.copy-card p { margin:0; color:#5f5b53; font-size:11px; line-height:1.8; white-space:pre-line; }
.copy-card footer { display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:11px; border-top:1px solid #eeeae2; }
.copy-card footer span { padding:5px 8px; border-radius:99px; color:var(--brand-dark); background:#eff5e9; font-size:9px; font-weight:800; }
.copy-card footer button { min-height:36px; padding:0 3px; border:0; color:var(--brand-dark); background:transparent; font-size:10px; cursor:pointer; }
.copy-actions { display:flex; align-items:center; gap:10px; }
.copy-actions button:disabled { opacity:.5; cursor:wait; }
.ai-notice { margin-top:18px; padding:14px; border-left:3px solid #c8893d; background:#fbf6eb; }
.ai-notice strong { font-size:11px; }
.ai-notice p { margin:5px 0 0; color:var(--muted); font-size:9px; line-height:1.7; }
.result-actions .secondary-button { flex-basis:112px; }

.history-heading { margin-top:8px; }
.history-card { display:grid; grid-template-columns:104px 1fr; gap:13px; width:100%; padding:10px; margin-bottom:12px; border:1px solid var(--line); border-radius:17px; text-align:left; background:white; box-shadow:0 10px 28px rgba(42,40,32,.06); cursor:pointer; }
.history-card:active { transform: scale(.992); }
.history-card img { width:104px; height:130px; border-radius:12px; object-fit:cover; background:#eee; }
.history-card-content { display:flex; min-width:0; flex-direction:column; justify-content:center; }
.history-card-content time { color:var(--muted); font-size:8px; }
.history-card-content strong { overflow:hidden; margin:6px 0 7px; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.history-card-content p { margin:0; color:var(--muted); font-size:9px; line-height:1.6; }
.history-card-content span { display:inline-flex; align-self:flex-start; margin-top:11px; padding:5px 8px; border-radius:99px; color:var(--brand-dark); background:#eff5e9; font-size:8px; }
.history-empty { display:flex; min-height:480px; align-items:center; justify-content:center; flex-direction:column; text-align:center; }
.history-empty img { width:78px; height:78px; margin-bottom:17px; opacity:.75; }
.history-empty strong { font-size:17px; }
.history-empty p { max-width:280px; margin:8px 0 20px; color:var(--muted); font-size:11px; line-height:1.7; }
.history-empty .primary-button { flex:0 0 auto; width:190px; }

.work-detail-screen { padding-top:8px; }
.detail-section { margin-bottom:22px; }
.detail-section-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.detail-section-title strong { font-size:14px; }
.detail-section-title span { color:var(--muted); font-size:10px; }
.detail-empty { padding:18px; border:1px dashed #d8d1c4; border-radius:14px; color:var(--muted); background:#fbf8ef; font-size:11px; line-height:1.7; }
.detail-asset-card { overflow:hidden; margin-bottom:13px; border:1px solid var(--line); border-radius:17px; background:white; box-shadow:0 10px 28px rgba(42,40,32,.06); }
.detail-asset-card img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; background:#eee; }
.detail-asset-card.is-poster img { aspect-ratio:3/4; }
.detail-asset-card footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; }
.detail-asset-card strong, .detail-asset-card small { display:block; }
.detail-asset-card strong { font-size:12px; }
.detail-asset-card small { margin-top:4px; color:var(--muted); font-size:9px; }
.detail-actions { display:flex; flex:0 0 auto; gap:7px; }
.detail-copy-card { margin-bottom:12px; padding:15px; border:1px solid var(--line); border-radius:16px; background:white; }
.detail-copy-card h3 { margin:0 0 9px; font-size:15px; line-height:1.45; }
.detail-copy-card p { margin:0; color:#5f5b53; font-size:11px; line-height:1.8; white-space:pre-line; }
.detail-copy-card footer { display:flex; align-items:center; justify-content:space-between; margin-top:13px; padding-top:11px; border-top:1px solid #eeeae2; }
.detail-copy-card footer span { padding:5px 8px; border-radius:99px; color:var(--brand-dark); background:#eff5e9; font-size:9px; font-weight:800; }
.danger-button { flex:1; min-height:52px; border:0; border-radius:14px; color:white; background:#8b3f2d; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 12px 24px rgba(139,63,45,.16); }
.danger-button:active { transform: scale(.985); }
.danger-actions .secondary-button { flex-basis:112px; }

.toast { position:fixed; z-index:100; left:50%; bottom:92px; padding:10px 16px; border-radius:99px; color:white; background:rgba(17,17,17,.9); font-size:11px; opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:.25s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%,0); }

button:focus-visible, input:focus-visible, textarea:focus-visible, label:focus-within { outline:3px solid rgba(90,143,43,.22); outline-offset:2px; }

@media (min-width: 600px) {
  .app-shell { margin: 24px auto; min-height: calc(100svh - 48px); border: 1px solid rgba(17,17,17,.08); border-radius: 28px; box-shadow: 0 30px 90px rgba(41,36,24,.18); }
  .sticky-action { right: calc((100vw - 480px) / 2); bottom: 24px; left: calc((100vw - 480px) / 2); border-radius: 0 0 28px 28px; }
}

@media (max-width: 360px) {
  .screen { padding-right: 16px; padding-left: 16px; }
  .sticky-action { padding-right:16px; padding-left:16px; }
  .hero-copy h1 { font-size:33px; }
  .output-summary { padding-right:13px; padding-left:13px; }
}

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