:root {
  --ink:#181814;
  --muted:#77746c;
  --line:rgba(24,24,20,.1);
  --paper:#f5f2eb;
  --card:#fffdf8;
  --accent:#ef5f3c;
  --accent-dark:#d84828;
  --moss:#233e35;
  --soft:#e8eee8;
  --danger:#b83f3f;
}
* { box-sizing:border-box; }
html { background:var(--paper); }
body { min-width:320px; margin:0; background:radial-gradient(circle at 100% 0,rgba(239,95,60,.1),transparent 32rem),var(--paper); color:var(--ink); font:15px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea,select { font:inherit; }
button { border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled { opacity:.42; cursor:not-allowed; }
#app { width:min(100%,680px); min-height:100svh; margin:auto; padding-bottom:104px; }
.topbar { position:sticky; top:0; z-index:10; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:10px; min-height:calc(70px + env(safe-area-inset-top)); padding:calc(13px + env(safe-area-inset-top)) 18px 11px; background:rgba(245,242,235,.85); backdrop-filter:blur(18px); }
.home-mark { display:grid; width:35px; height:35px; place-items:center; border-radius:12px; background:var(--ink); color:#fffaf3; font-family:Georgia,serif; font-size:18px; font-style:italic; font-weight:bold; }
.back-button { display:grid; width:35px; height:35px; place-items:center; border-radius:12px; background:#e9e5db; color:var(--ink); font-size:20px; line-height:1; }
.brand { overflow:hidden; font-size:14px; font-weight:760; letter-spacing:-.035em; white-space:nowrap; }
.brand small { display:block; margin-top:1px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.13em; }
.home-button { min-height:34px; padding:0 11px; border-radius:10px; background:#e9e5db; color:var(--ink); font-size:12px; font-weight:750; }.home-button:disabled { opacity:.5; }
.page { padding:20px 18px; }
.home-page { padding-top:4px; }
.stepper { display:flex; gap:5px; padding:0 18px 10px; overflow:auto; border-bottom:1px solid var(--line); color:#aaa59c; font-size:11px; white-space:nowrap; scrollbar-width:none; }
.stepper::-webkit-scrollbar { display:none; }
.step { padding:6px 5px; background:transparent; color:inherit; }.step.active { color:var(--ink); font-weight:800; }.step.done { color:var(--moss); font-weight:700; }.step.locked { color:#aaa59c; }
.hero { padding:20px 1px 26px; }
.hero-home { position:relative; padding-top:20px; overflow:hidden; }
.hero-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.eyebrow { color:var(--moss); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hero-pill { padding:5px 8px; border:1px solid rgba(35,62,53,.18); border-radius:99px; color:var(--moss); font-size:10px; font-weight:700; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:540px; margin:3px 0 14px; font-family:Georgia,"Songti SC",serif; font-size:clamp(40px,11vw,64px); font-weight:600; line-height:1.02; letter-spacing:-.075em; }
h2 { margin-bottom:7px; font-size:23px; letter-spacing:-.055em; } h3 { margin-bottom:4px; font-size:15px; }.sub { max-width:350px; color:var(--muted); font-size:15px; }
.primary,.secondary,.ghost,.danger { min-height:48px; padding:0 17px; border-radius:14px; font-weight:750; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; }
.primary { display:flex; align-items:center; justify-content:center; gap:13px; background:var(--ink); color:#fffaf3; box-shadow:0 7px 0 #c8c4b9; }.primary:hover { background:#34332c; transform:translateY(-1px); box-shadow:0 8px 0 #c8c4b9; }.primary:active { transform:translateY(4px); box-shadow:0 3px 0 #c8c4b9; }.primary span { color:#f5b14a; font-size:20px; line-height:0; }
.secondary { background:var(--soft); color:var(--moss); }.ghost { background:#ebe8e0; color:var(--ink); }.danger { background:#fff0ef; color:var(--danger); }.small { min-height:34px; padding:0 11px; border-radius:10px; font-size:13px; }.wide { width:100%; }.button-row { display:flex; gap:9px; flex-wrap:wrap; }.button-row > * { flex:1; }
.hero-visual { position:relative; height:188px; margin:37px -18px 0; transform:rotate(-1.5deg); }
.hero-card { position:absolute; overflow:hidden; width:130px; height:154px; border:5px solid #fffdf8; border-radius:8px; box-shadow:0 17px 28px rgba(32,27,20,.16); }
.hero-card::after { position:absolute; inset:auto 0 0; height:48%; content:""; background:linear-gradient(transparent,rgba(0,0,0,.34)); }
.hero-card b { position:absolute; z-index:1; bottom:9px; left:10px; color:#fff; font-family:Georgia,serif; font-size:13px; letter-spacing:.08em; }.hero-card i { position:absolute; width:74px; height:74px; border-radius:50%; opacity:.87; }
.card-one { z-index:2; bottom:0; left:12%; background:linear-gradient(145deg,#dfc191 0 25%,#866b51 25% 52%,#e3a978 52%); transform:rotate(-8deg); }.card-one i { top:22px; right:14px; background:#f3d7a4; box-shadow:-29px 30px 0 -10px #735846; }
.card-two { z-index:4; top:4px; left:39%; background:linear-gradient(145deg,#3b6659,#142b28 54%,#f19c66); transform:rotate(5deg); }.card-two i { top:22px; left:26px; background:#edc27d; box-shadow:25px 37px 0 -12px #f4eee1; }
.card-three { z-index:3; bottom:2px; right:12%; background:linear-gradient(145deg,#bc593f,#e69767 48%,#3a382f 49%); transform:rotate(12deg); }.card-three i { top:19px; right:19px; background:#f5e8ce; box-shadow:-33px 38px 0 -11px #7c4235; }
.hero-caption { position:absolute; right:18px; bottom:-3px; color:var(--muted); font-family:Georgia,"Songti SC",serif; font-size:12px; font-style:italic; transform:rotate(1.5deg); }
.privacy-note { display:flex; gap:11px; margin:9px 0 46px; padding:15px; border:1px solid rgba(35,62,53,.12); border-radius:16px; background:rgba(255,253,248,.62); }.privacy-note > span { display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center; border-radius:9px; background:var(--moss); color:#e7eddd; font-size:12px; }.privacy-note strong { display:block; margin-bottom:1px; font-size:13px; }.privacy-note p { margin:0; color:var(--muted); font-size:12px; }
.recent-section { padding-top:3px; }.recent-section .section-head { margin-bottom:11px; }.recent-section h2 { margin:2px 0 0; }
.card { padding:16px; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 6px 18px rgba(39,33,22,.025); margin:14px 0; }.card p:last-child { margin-bottom:0; }.recent { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:12px; border-radius:16px; }.recent::after { position:absolute; top:-30px; right:-25px; width:90px; height:90px; border:1px solid rgba(239,95,60,.22); border-radius:50%; content:""; }.recent-info { position:relative; z-index:1; min-width:0; }.recent-info strong { display:block; margin-bottom:4px; font-size:13px; }.recent-info .hint { display:block; font-size:11px; line-height:1.55; }.recent-actions { position:relative; z-index:1; display:flex; flex:0 0 auto; flex-direction:column; align-items:stretch; gap:6px; }.delete-project { min-height:27px; padding:0 8px; border-radius:8px; background:transparent; color:var(--danger); font-size:11px; font-weight:700; }.delete-project:hover { background:#fff0ef; }.tag { display:inline-block; padding:4px 8px; background:var(--soft); color:var(--moss); border-radius:7px; font-size:11px; font-weight:700; }
.upload-zone { display:grid; min-height:235px; place-items:center; padding:28px; border:1.5px dashed #bdb7ab; border-radius:23px; background:linear-gradient(135deg,rgba(255,253,248,.95),rgba(236,231,220,.7)); text-align:center; }.upload-icon { display:grid; width:54px; height:54px; margin:0 auto 8px; place-items:center; border-radius:17px; background:var(--moss); color:#fff; font-size:27px; box-shadow:0 8px 0 #cfd8d1; }.hint { color:var(--muted); font-size:13px; }.notice { padding:11px 12px; border-left:3px solid var(--accent); border-radius:9px; background:#fff0e9; color:#70584e; font-size:13px; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:10px; margin:26px 0 11px; }.section-head h2 { margin:0; }.counter { color:var(--muted); font-size:13px; }.counter strong { color:var(--ink); }
.photos { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.photo { position:relative; overflow:hidden; aspect-ratio:1; border:2px solid transparent; border-radius:14px; background:#ddd; box-shadow:0 2px 5px rgba(0,0,0,.05); }.photo.selected { border-color:var(--accent); box-shadow:0 0 0 2px rgba(239,95,60,.15); }.photo.used-photo { opacity:.55; filter:grayscale(.42); pointer-events:none; }.photo img { width:100%; height:100%; display:block; object-fit:cover; }.num { position:absolute; top:6px; left:6px; width:21px; height:21px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.64); color:white; font-size:11px; font-weight:700; }.check { position:absolute; right:6px; bottom:6px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:white; color:transparent; font-weight:800; }.selected .check { background:var(--accent); color:white; }.remove { position:absolute; right:5px; top:5px; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.9); color:var(--danger); }.ai-tag,.used-badge { position:absolute; bottom:6px; left:6px; padding:2px 5px; border-radius:5px; background:rgba(255,255,255,.88); color:var(--moss); font-size:10px; font-weight:700; }.used-badge { right:6px; left:auto; background:rgba(31,39,34,.82); color:#fff; }
.sticky-actions { position:fixed; z-index:20; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,680px); padding:12px 18px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid rgba(24,24,20,.08); background:rgba(245,242,235,.9); backdrop-filter:blur(16px); }.sticky-actions .primary { width:100%; }
.product-list { display:grid; gap:9px; }.product { display:flex; align-items:center; gap:11px; padding:9px; border:1px solid var(--line); border-radius:14px; background:var(--card); }.product img { width:57px; height:57px; object-fit:cover; border-radius:9px; }.product .detail { flex:1; }.product .detail strong { display:block; font-size:13px; }.product .detail span { color:var(--muted); font-size:12px; }.layout-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.layout { overflow:hidden; padding:5px; background:var(--card); border:2px solid var(--line); border-radius:12px; text-align:left; }.layout.active { border-color:var(--accent); }.layout-preview { display:grid; height:76px; gap:2px; margin-bottom:5px; }.layout-preview span { background:#d7d5d0; border-radius:2px; }.layout-preview.two-v { grid-template-columns:1fr 1fr; }.layout-preview.two-h { grid-template-rows:1fr 1fr; }.layout-preview.feature { grid-template-columns:1.4fr 1fr; }.layout-preview.feature span:first-child { grid-row:span 2; }.layout-preview.grid { grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }.layout label { display:block; font-size:11px; font-weight:700; }
.selected-tray { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; min-height:105px; padding:10px; border:1px solid rgba(35,62,53,.16); border-radius:18px; background:rgba(255,253,248,.65); }.selected-product { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--card); cursor:pointer; }.selected-product.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(239,95,60,.14); }.selected-image { position:relative; overflow:hidden; aspect-ratio:1; background:#e6e2d8; }.selected-image img,.selected-image canvas { display:block; width:100%; height:100%; object-fit:cover; }.selected-order { position:absolute; top:5px; left:5px; display:grid; width:21px; height:21px; place-items:center; border-radius:50%; background:var(--ink); color:#fff; font-size:10px; font-weight:800; }.collage-badge { position:absolute; right:5px; bottom:5px; padding:3px 5px; border-radius:6px; background:rgba(255,253,248,.92); color:var(--moss); font-size:9px; font-weight:800; }.selected-product-info { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:7px; }.selected-product-info strong { overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.text-button { padding:0; background:transparent; color:var(--accent-dark); font-size:10px; font-weight:750; white-space:nowrap; }.tray-empty { display:grid; grid-column:1/-1; min-height:82px; place-items:center; color:var(--muted); font-size:12px; text-align:center; }.tray-order-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; padding:9px 10px; border-radius:12px; background:var(--soft); color:var(--moss); font-size:12px; font-weight:700; }.tray-order-actions div { display:flex; gap:5px; }.tray-order-actions .small { min-height:29px; padding:0 8px; }.selection-actions { margin-top:10px; }
.grid9 { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }.final-photo { position:relative; aspect-ratio:1; overflow:hidden; background:#ddd; border-radius:13px; border:1px solid var(--line); touch-action:none; }.final-photo.dragging { opacity:.35; }.final-photo img,.final-photo canvas { width:100%; height:100%; display:block; object-fit:cover; }.order { position:absolute; top:5px; left:5px; display:grid; width:22px; height:22px; place-items:center; background:var(--ink); color:#fff; border-radius:50%; font-size:11px; font-weight:700; }.collage-mark { position:absolute; right:5px; bottom:5px; padding:2px 5px; background:rgba(255,255,255,.9); border-radius:5px; font-size:10px; }.mode-options { display:flex; gap:7px; overflow:auto; padding-bottom:2px; }.mode { flex:0 0 auto; padding:8px 11px; border:1px solid var(--line); background:var(--card); border-radius:10px; font-size:13px; }.mode.active { color:var(--moss); border-color:var(--moss); background:var(--soft); font-weight:700; }
.system-style-note { display:flex; gap:11px; margin:0 0 15px; padding:13px; border-radius:15px; background:var(--soft); color:var(--moss); }.system-style-note > span { display:grid; width:25px; height:25px; flex:0 0 25px; place-items:center; border-radius:8px; background:var(--moss); color:#edf4ed; font-size:11px; }.system-style-note strong { display:block; font-size:13px; }.system-style-note p { margin:1px 0 0; color:#587067; font-size:12px; }
.system-style-note .text-button { margin-left:auto; align-self:center; padding:7px 8px; border:1px solid rgba(35,62,53,.18); border-radius:8px; color:var(--moss); }.batch-tuning { margin:0 0 15px; padding:14px; border:1px solid rgba(35,62,53,.16); border-radius:16px; background:var(--card); }.batch-tuning .section-head { margin:0 0 8px; }.batch-tuning .section-head h3 { margin:0; }.batch-tuning label { display:grid; grid-template-columns:58px 1fr 35px; align-items:center; gap:9px; margin:11px 0; color:var(--ink); font-size:12px; }.batch-tuning input { width:100%; accent-color:var(--accent); }.batch-tuning output { color:var(--muted); font-size:12px; text-align:right; }
.adjust-panel { padding:14px; background:var(--card); border:1px solid var(--line); border-radius:16px; }.adjust-panel label { display:grid; grid-template-columns:50px 1fr 34px; align-items:center; gap:9px; margin:9px 0; font-size:13px; }.adjust-panel output { text-align:right; color:var(--muted); font-size:12px; }.adjust-panel input { width:100%; accent-color:var(--accent); }.image-large { overflow:hidden; aspect-ratio:1; background:#ddd; border-radius:18px; }.image-large img,.image-large canvas { width:100%; height:100%; display:block; object-fit:contain; }.collage-gesture-stage { touch-action:none; }.collage-gesture-stage canvas { touch-action:none; cursor:grab; }.collage-gesture-stage canvas:active { cursor:grabbing; }.direct-edit-note { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:15px; }.direct-edit-note strong { font-size:13px; }.direct-edit-note p { margin:3px 0 0; }.collage-adjust { margin-top:16px; }.collage-adjust .section-head { margin:0 0 10px; }.collage-photo-picker { display:flex; gap:8px; overflow:auto; padding:2px 0 11px; }.collage-photo-choice { position:relative; flex:0 0 58px; width:58px; height:58px; overflow:hidden; padding:0; border:2px solid transparent; border-radius:12px; background:#dedbd3; }.collage-photo-choice img { width:100%; height:100%; object-fit:cover; display:block; }.collage-photo-choice span { position:absolute; top:3px; left:3px; display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:rgba(25,25,22,.75); color:#fff; font-size:10px; font-weight:800; }.collage-photo-choice.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(239,95,60,.16); }.collage-controls { padding:11px 12px; }.collage-controls label { grid-template-columns:42px 1fr 40px; margin:10px 0; }.nudge-pad { display:grid; grid-template-columns:repeat(3,38px); gap:6px; justify-content:center; margin-top:15px; }.nudge-pad button { width:38px; height:34px; border:1px solid var(--line); border-radius:9px; background:#fffdf8; color:var(--ink); font-size:17px; line-height:1; }.nudge-pad button:active { background:var(--soft); color:var(--moss); }
textarea { width:100%; min-height:150px; padding:14px; resize:vertical; border:1px solid var(--line); border-radius:15px; background:var(--card); outline:none; }.tone-grid { display:flex; gap:8px; flex-wrap:wrap; }.tone { padding:8px 10px; border-radius:10px; background:var(--card); border:1px solid var(--line); font-size:13px; }.tone.active { background:var(--soft); border-color:var(--moss); color:var(--moss); font-weight:700; }.copy-result { min-height:150px; padding:15px; border-radius:16px; background:#20201d; color:#f9f6ee; white-space:pre-wrap; line-height:1.75; }
.preview-card { overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:20px; }.preview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--card); }.preview-grid img,.preview-grid canvas { width:100%; aspect-ratio:1; display:block; object-fit:cover; }.preview-copy { padding:16px; white-space:pre-wrap; }.checks { margin:0; padding:0; list-style:none; }.checks li { padding:8px 0; border-bottom:1px solid var(--line); }.checks li:last-child { border:0; }.ok::before { content:'✓'; color:var(--moss); font-weight:800; margin-right:8px; }.warn::before { content:'!'; color:#b57600; font-weight:800; margin-right:10px; }
.toast { position:fixed; z-index:50; left:50%; bottom:92px; transform:translateX(-50%); padding:10px 15px; background:#20201d; color:white; border-radius:99px; box-shadow:0 5px 20px #0003; font-size:13px; }.empty { padding:34px 10px; color:var(--muted); text-align:center; }
/* iPhone 17 Pro Max: 440 × 956 CSS px portrait, Dynamic Island safe areas. */
@media (min-width:430px) and (max-width:460px) and (min-height:900px) {
  #app { min-height:100dvh; padding-bottom:116px; }
  .page { padding-left:22px; padding-right:22px; }
  .topbar { padding-left:22px; padding-right:22px; }
  .stepper { padding-left:22px; padding-right:22px; }
  .home-page { padding-top:8px; }
  .hero-home h1 { font-size:53px; }
  .hero-home .sub { max-width:380px; font-size:16px; }
  .hero-visual { height:215px; margin:43px -22px 0; }
  .hero-card { width:145px; height:171px; }
  .hero-caption { right:24px; }
  .privacy-note { margin-bottom:52px; padding:17px; }
  .sticky-actions { padding-left:22px; padding-right:22px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .sticky-actions .primary { min-height:54px; }
}
@media (min-width:600px) { .photos { grid-template-columns:repeat(4,1fr); }.hero-visual { margin-left:-45px; margin-right:-45px; } }