/* Zpix — Simplified-Chinese pixel font (covers 中文+英文+数字 in pixel style) */
@font-face{font-family:'Zpix';src:url('public/fonts/zpix.ttf') format('truetype');font-display:swap}
/* Make every pixel-font usage cover Chinese: Zpix first, then the English pixel fonts as fallback */
body, body *{font-family:'Zpix','Press Start 2P','VT323',monospace !important}

:root{
  --black:#0d0d0f;
  --panel:#161619;
  --white:#f4f1ea;
  --red:#c8102e;
  --red-dk:#8b0a1f;
  --grey:#3a3a40;
  --line:#2a2a30;
  --ink:#1a1a1f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[hidden]{display:none !important}
body{
  background:var(--black);
  color:var(--white);
  font-family:'VT323','Noto Sans SC',monospace;
  font-size:20px;
  image-rendering:pixelated;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:24px 24px;
}
img{image-rendering:auto}
.px{font-family:'Press Start 2P',monospace}

/* scanline overlay — ambient CRT texture, sits BEHIND content so it never blurs images/text */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 2px,transparent 2px 4px);opacity:.28}
/* all real content sits above the scanline */
.topbar,.hero,.studio-section,.copy-page,.jk-wrap,.footer,.loading,.lightbox{position:relative;z-index:1}

/* ===== TOPBAR ===== */
.topbar{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;background:var(--black);border-bottom:4px solid var(--red)}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:38px;image-rendering:auto}
.brand-name{font-family:'Press Start 2P';font-size:16px;letter-spacing:1px;color:var(--white)}
.lfc-badge{font-family:'Press Start 2P';font-size:11px;background:var(--red);color:#fff;padding:8px 10px;border:2px solid #fff}
.topnav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topnav a{font-family:'Press Start 2P',monospace;font-size:9px;text-decoration:none;color:var(--white);padding:8px 10px;border:2px solid var(--white);background:transparent;box-shadow:2px 2px 0 rgba(0,0,0,.4);display:inline-flex;align-items:center;gap:4px;transition:.12s}
.topnav a:hover{background:var(--white);color:var(--red)}
.topnav a.active{background:var(--red);color:#fff;border-color:#fff;box-shadow:2px 2px 0 rgba(0,0,0,.5)}
.nav-ic{height:18px;width:18px;vertical-align:-3px;margin-right:5px;border-radius:3px}
.src-ic{height:16px;width:16px;vertical-align:middle;margin-right:3px;border-radius:3px}
@media(max-width:680px){.topnav{gap:10px}.topnav a{font-size:13px}}

/* ===== HERO ===== */
.hero{min-height:86vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:50px 20px 40px;border-bottom:4px solid var(--red);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(200,16,46,.18),transparent 60%);pointer-events:none}
.hero-scarf{font-family:'Press Start 2P';font-size:12px;color:var(--white);background:var(--red);border:3px solid #fff;padding:8px 18px;letter-spacing:2px;margin-bottom:26px;box-shadow:4px 4px 0 #000;z-index:2}
.hero-bird{height:180px;image-rendering:auto;margin-bottom:18px;filter:drop-shadow(6px 6px 0 var(--black));animation:float 3s steps(6) infinite;z-index:2}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hero-title{font-family:'Press Start 2P';font-size:clamp(26px,7vw,60px);color:var(--white);line-height:1.25;
  text-shadow:5px 5px 0 var(--red),10px 10px 0 var(--black);letter-spacing:2px;z-index:2}
.hero-title .ttl-red{color:var(--red);text-shadow:5px 5px 0 #fff,10px 10px 0 var(--black)}
.hero-sub{font-size:22px;color:var(--white);letter-spacing:3px;margin:24px 0 30px;z-index:2}
.hero-flourish,.hero-rose{display:none}
.cta{font-family:'Press Start 2P';font-size:16px;background:var(--red);color:#fff;text-decoration:none;
  padding:18px 34px;border:4px solid #fff;box-shadow:6px 6px 0 var(--black);transition:.1s;z-index:2;animation:ctapulse 1s steps(2) infinite}
@keyframes ctapulse{0%,70%{box-shadow:6px 6px 0 #000}71%,100%{box-shadow:6px 6px 0 var(--red-dk)}}
.cta:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--black);animation:none}
.cta:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--black)}
.hero-mascot{position:absolute;right:4%;bottom:8%;z-index:1;opacity:.92}
.hero-mascot img{height:140px;image-rendering:auto;filter:drop-shadow(5px 5px 0 #000);animation:bob2 .6s steps(2) infinite}
@keyframes bob2{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@media(max-width:680px){.hero-mascot{display:none}}

/* footer scarf */
.footer-scarf{font-family:'Press Start 2P';font-size:11px;color:#fff;background:var(--red);display:inline-block;padding:7px 14px;border:3px solid #fff;letter-spacing:1px;margin-bottom:10px}

/* ===== STUDIO ===== */
.studio-section{max-width:1000px;margin:0 auto;padding:50px 18px 90px}
.block{background:var(--panel);border:4px solid var(--line);box-shadow:6px 6px 0 #000;padding:22px;margin-bottom:30px}
.blk-title{font-family:'Press Start 2P';font-size:15px;color:var(--white);margin-bottom:18px;display:flex;align-items:center;gap:12px;line-height:1.5}
.blk-title small{font-family:'VT323';font-size:18px;color:var(--red);letter-spacing:1px}
.num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--red);color:#fff;font-size:13px;border:2px solid #fff}

/* PICKER (multi-select models) */
.picker{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pick{position:relative;cursor:pointer;border:4px solid var(--line);background:var(--black);overflow:hidden;transition:.1s;display:flex;flex-direction:column}
.pick img{width:100%;flex:1;min-height:0;aspect-ratio:3/4;object-fit:contain;object-position:center;background:var(--black);image-rendering:auto;filter:contrast(1.1) saturate(.9)}
.pick .pname{flex:0 0 auto;background:var(--black);font-family:'Press Start 2P';font-size:9px;padding:7px 4px;text-align:center;color:var(--white);border-top:2px solid var(--line)}
.pick:hover{border-color:var(--white)}
.pick.sel{border-color:var(--red)}
.pick.sel::after{content:"✓";position:absolute;top:6px;right:6px;width:24px;height:24px;background:var(--red);color:#fff;font-family:'Press Start 2P';font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.pick.sel .pname{background:var(--red)}
.pick .order{position:absolute;top:6px;left:6px;width:24px;height:24px;background:var(--white);color:#000;font-family:'Press Start 2P';font-size:11px;display:none;align-items:center;justify-content:center;border:2px solid #000}

/* SKU SEARCH */
.sku-search{margin-bottom:18px;border:3px solid var(--line);background:var(--black);padding:14px}
.sku-row{display:flex;gap:10px}
.sku-input{flex:1;background:#000;border:3px solid var(--line);color:var(--white);font-family:'VT323';font-size:20px;padding:10px 12px;letter-spacing:.5px}
.sku-input:focus{outline:none;border-color:var(--red)}
.sku-btn{font-family:'Press Start 2P';font-size:11px;background:var(--red);color:#fff;border:3px solid #fff;padding:0 16px;cursor:pointer;box-shadow:3px 3px 0 #000;transition:.1s;white-space:nowrap}
.sku-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000}
.sku-results{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.sku-card{position:relative;border:3px solid var(--line);background:#fff;aspect-ratio:3/4;overflow:hidden;transition:.15s}
.sku-card img{width:100%;height:100%;object-fit:contain}
.sku-tag{position:absolute;top:0;left:0;z-index:2;background:var(--red);color:#fff;font-family:'Press Start 2P';font-size:8px;padding:3px 5px}
.sku-actions{position:absolute;bottom:0;left:0;right:0;display:flex}
.sku-actions button{flex:1;border:none;font-family:'Press Start 2P';font-size:12px;padding:7px;cursor:pointer;transition:.1s}
.sku-add{background:var(--red);color:#fff}.sku-add:hover{background:var(--red-dk)}
.sku-no{background:#000;color:#fff}.sku-no:hover{background:var(--red)}
@media(max-width:680px){.sku-results{grid-template-columns:repeat(2,1fr)}}

/* UPLOAD */
.upload-zone{border:4px dashed var(--line);background:var(--black);min-height:130px;display:flex;align-items:center;justify-content:center;transition:.1s;text-align:center}
.upload-zone:focus{outline:none;border-color:var(--red)}
.browse-link,.ref-browse{font-family:'VT323';font-size:15px;background:var(--red);color:#fff;border:none;padding:2px 9px;cursor:pointer;letter-spacing:.5px;transition:.1s}
.browse-link:hover,.ref-browse:hover{background:#fff;color:var(--red)}
.ref-browse{font-size:13px;padding:1px 7px}
.clear-btn{margin-left:auto;font-family:'VT323';font-size:14px;background:var(--ink);color:#fff;border:2px solid var(--line);padding:4px 10px;cursor:pointer;letter-spacing:.5px}
.clear-btn:hover{border-color:var(--red);color:var(--red)}
.upload-zone:hover{border-color:var(--red)}
.upload-ic{font-family:'Press Start 2P';font-size:20px;color:var(--red);display:block;margin-bottom:10px}
.upload-hint{font-family:'VT323';font-size:17px;color:var(--white);opacity:.7}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.thumb{position:relative;width:74px;height:74px;border:3px solid var(--line);background:var(--black);overflow:hidden}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.thumb-vid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.4);pointer-events:none;font-size:18px}
.thumb-x{position:absolute;top:0;right:0;width:20px;height:20px;background:var(--red);color:#fff;border:none;cursor:pointer;font-family:'VT323';font-size:16px;line-height:1}

/* TEXTAREA */
.ta{width:100%;background:var(--black);border:3px solid var(--line);color:var(--white);padding:12px;font-family:'VT323';font-size:20px;resize:vertical;margin-bottom:12px;letter-spacing:.5px}
.ta:focus{outline:none;border-color:var(--red)}
.ta-lg{min-height:90px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:'VT323';font-size:17px;letter-spacing:1px;background:var(--black);border:3px solid var(--line);color:var(--white);padding:6px 12px;cursor:pointer;transition:.1s}
.chip:hover{background:var(--red);border-color:#fff}

/* OPTIONS */
.opt-row{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
.opt-label{font-family:'Press Start 2P';font-size:11px;color:var(--red);min-width:90px}
.opt-hint{display:block;font-family:'VT323';font-size:15px;color:var(--white);opacity:.6;margin-top:8px;letter-spacing:.5px}
.ratios{display:flex;gap:8px;flex-wrap:wrap}
.ratio{font-family:'Press Start 2P';font-size:11px;background:var(--black);border:3px solid var(--line);color:var(--white);padding:11px 13px;cursor:pointer;transition:.1s}
.ratio:hover{border-color:var(--white)}
.ratio.active{background:var(--red);border-color:#fff;color:#fff}

/* ACTIONS */
.actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.gen-btn{flex:1;min-width:220px;font-family:'Press Start 2P';font-size:15px;color:#fff;border:4px solid #fff;padding:20px;cursor:pointer;box-shadow:6px 6px 0 #000;transition:.1s}
.gen-btn.img{background:var(--red)}
.gen-btn.vid{background:var(--grey)}
.gen-btn:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 #000}
.gen-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #000}
.gen-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.note{text-align:center;font-size:16px;color:var(--red);letter-spacing:2px;margin-top:16px}

/* RESULTS */
.results{margin-top:36px}
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.rcard{border:4px solid var(--line);background:var(--black);box-shadow:5px 5px 0 #000}
.rcard img,.rcard video{width:100%;display:block;image-rendering:auto}
.rcard a{display:block;text-align:center;font-family:'Press Start 2P';font-size:10px;background:var(--white);color:#000;padding:10px;text-decoration:none}
.rcard a:hover{background:var(--red);color:#fff}
/* REFINE box */
.refine{border-top:3px solid var(--line);padding:10px;background:rgba(200,16,46,.05)}
.refine-ta{width:100%;background:var(--black);border:2px solid var(--line);color:var(--white);font-family:'VT323';font-size:17px;padding:8px;resize:vertical;min-height:54px;letter-spacing:.5px}
.refine-ta:focus{outline:none;border-color:var(--red)}
.refine-btn{width:100%;margin-top:8px;font-family:'Press Start 2P';font-size:10px;background:var(--red);color:#fff;border:2px solid #fff;padding:11px;cursor:pointer;box-shadow:3px 3px 0 #000;transition:.1s}
.refine-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #000;background:var(--red-dk)}
.refine-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
/* per-card reference dropzone */
.ref-drop{border:2px dashed var(--line);background:#000;margin:8px 0;padding:8px;text-align:center;transition:.1s}
.ref-drop:hover,.ref-drop:focus{border-color:var(--red);outline:none}
.ref-drop.dragover{border-color:var(--red);background:rgba(200,16,46,.08)}
.ref-drop-hint{font-family:'VT323';font-size:14px;color:var(--white);opacity:.6;letter-spacing:.5px}
.ref-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ref-thumbs:empty{margin-top:0}
.ref-thumb{position:relative;width:48px;height:48px;border:2px solid var(--line);overflow:hidden}
.ref-thumb img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.ref-x{position:absolute;top:0;right:0;width:16px;height:16px;background:var(--red);color:#fff;border:none;cursor:pointer;font-family:'VT323';font-size:13px;line-height:1;padding:0}
/* per-card refine options: count + lookbook */
.refine-opts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.ro-label{font-family:'VT323';font-size:14px;color:var(--white);opacity:.7}
.rcount{display:flex;gap:4px}
.rc-n{font-family:'Press Start 2P';font-size:9px;background:#000;border:2px solid var(--line);color:#fff;padding:6px 8px;cursor:pointer;transition:.1s}
.rc-n:hover{border-color:#fff}
.rc-n.active{background:var(--red);border-color:#fff}
.ro-hint{font-family:'VT323';font-size:13px;color:var(--white);opacity:.5;flex:1;min-width:140px}
/* main lookbook toggle */
.lookbook-toggle{font-family:'VT323';font-size:17px;color:var(--white);display:flex;align-items:center;gap:8px;cursor:pointer;letter-spacing:.5px}
.lookbook-toggle input{width:18px;height:18px;accent-color:var(--red)}

/* FOOTER */
.footer{text-align:center;padding:40px 20px;border-top:4px solid var(--red)}
.footer-logo{height:54px;margin-bottom:12px;image-rendering:auto}
.footer-sub{font-family:'Press Start 2P';font-size:10px;color:var(--white);letter-spacing:1px}

/* LOADING + PROGRESS BAR */
.loading{position:fixed;inset:0;z-index:2000;background:rgba(8,7,9,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background-image:repeating-linear-gradient(0deg,rgba(200,16,46,.04) 0 2px,transparent 2px 5px)}
.prog-stage{width:min(560px,86vw);display:flex;flex-direction:column;align-items:center;gap:16px}
.prog-track{position:relative;width:100%;height:34px;background:var(--black);border:4px solid var(--white);box-shadow:6px 6px 0 #000;overflow:visible}
.prog-fill{height:100%;width:0%;background:repeating-linear-gradient(45deg,var(--red) 0 12px,var(--red-dk) 12px 24px);transition:width .4s steps(8);box-shadow:inset 0 0 0 2px rgba(255,255,255,.15)}
.prog-mascot{position:absolute;top:50%;left:0%;height:92px;transform:translate(-50%,-62%);image-rendering:auto;transition:left .4s steps(8);filter:drop-shadow(3px 3px 0 #000);animation:bob .35s steps(2) infinite}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-4px}}
.prog-pct{font-family:'Press Start 2P';font-size:30px;color:var(--white);text-shadow:3px 3px 0 var(--red)}
.loading-txt{font-family:'Press Start 2P';font-size:14px;color:var(--red);letter-spacing:1px}
.loading-scarf{font-family:'Press Start 2P';font-size:12px;color:var(--white);background:var(--red);padding:8px 16px;border:3px solid #fff;letter-spacing:2px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{0%,60%{opacity:1}61%,100%{opacity:.4}}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:3000;background:rgba(5,4,6,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px}
.lb-inner{max-width:92vw;max-height:78vh;display:flex;align-items:center;justify-content:center;border:4px solid var(--white);box-shadow:8px 8px 0 #000;background:var(--black)}
.lb-inner img{max-width:88vw;max-height:76vh;display:block;image-rendering:auto}
.lb-x{position:absolute;top:18px;right:22px;width:48px;height:48px;background:var(--red);color:#fff;border:3px solid #fff;font-family:'Press Start 2P';font-size:16px;cursor:pointer;box-shadow:4px 4px 0 #000}
.lb-x:hover{background:#fff;color:var(--red)}
.lb-dl{font-family:'Press Start 2P';font-size:13px;background:var(--white);color:#000;padding:14px 26px;text-decoration:none;border:3px solid var(--red);box-shadow:5px 5px 0 #000}
.lb-dl:hover{background:var(--red);color:#fff}
.rimg{cursor:zoom-in}

/* ===== COPY PAGE ===== */
.copy-page{max-width:1000px;margin:0 auto;padding:40px 18px 90px}
.copy-head{text-align:center;padding:30px 0 36px}
.copy-bird{height:90px;image-rendering:auto;margin-bottom:14px;filter:drop-shadow(4px 4px 0 #000)}
.copy-title{font-family:'Press Start 2P';font-size:clamp(28px,6vw,52px);color:var(--white);text-shadow:4px 4px 0 var(--red),8px 8px 0 #000;letter-spacing:2px}
.copy-title .ttl-red{color:var(--red);text-shadow:4px 4px 0 #fff,8px 8px 0 #000}
.copy-sub{font-family:'VT323';font-size:22px;color:var(--white);letter-spacing:2px;margin-top:18px}
.mode-tabs{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.mode-tab{font-family:'Noto Sans SC';font-weight:700;font-size:15px;background:var(--black);border:3px solid var(--line);color:var(--white);padding:12px 18px;cursor:pointer;transition:.1s}
.mode-tab:hover{border-color:var(--white)}
.mode-tab.active{background:var(--red);border-color:#fff;color:#fff}
.fl{display:block;font-family:'Noto Sans SC';font-weight:700;font-size:14px;color:var(--red);margin-bottom:10px}
.tri-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tri-card{border:3px solid var(--line);background:var(--black);display:flex;flex-direction:column}
.tri-lang{font-family:'Press Start 2P';font-size:11px;background:var(--red);color:#fff;padding:9px 10px;text-align:center}
.tri-text{font-family:'Noto Sans SC';font-size:16px;line-height:1.7;color:var(--white);padding:16px;flex:1;white-space:pre-wrap;min-height:120px}
.copy-c{font-family:'Press Start 2P';font-size:10px;background:var(--white);color:#000;border:none;padding:11px;cursor:pointer;transition:.1s;border-top:3px solid var(--line)}
.copy-c:hover{background:var(--red);color:#fff}
@media(max-width:680px){.tri-grid{grid-template-columns:1fr}}

/* RESPONSIVE */
@media(max-width:680px){
  .picker{grid-template-columns:repeat(2,1fr)}
  .brand-name{font-size:12px}
  body{font-size:18px}
  .opt-label{min-width:70px;font-size:9px}
}

/* ===== MOBILE (≤640px) — comprehensive responsive fixes ===== */
@media(max-width:640px){
  html,body{max-width:100%;overflow-x:hidden}
  *{max-width:100%}
  /* sku search: stack input + button so SEARCH never overflows */
  .sku-row{flex-wrap:wrap}
  .sku-input{flex:1 1 100%;min-width:0;font-size:16px}
  .sku-btn{flex:1 1 100%;padding:12px}
  .sku-srcs{flex-wrap:wrap;gap:8px}
  /* nav: tighter pixel chips that wrap */
  .topnav{gap:5px;justify-content:flex-end}
  .topnav a{font-size:8px;padding:7px 8px}
  .topbar{padding:8px 10px}
  /* hero scale down */
  .hero-title{font-size:30px}
  .hero-sub{font-size:16px}
  .cta{font-size:14px;padding:14px 22px}
  /* blocks/buttons full width, comfy touch targets */
  .block{padding:14px}
  .gen-btn{width:100%;font-size:14px;padding:16px}
  .actions{flex-direction:column;gap:10px}
  .ratios{flex-wrap:wrap}
  .ratio{padding:10px 12px}
  .opt-row{align-items:flex-start}
  .ta{font-size:16px}
  .result-grid{grid-template-columns:repeat(2,1fr)}
  .lb-inner img,.lb-inner video{max-width:94vw}
}
@media(max-width:380px){
  .picker{grid-template-columns:repeat(2,1fr)}
  .hero-title{font-size:24px}
  .topnav a{font-size:7px;padding:6px 6px}
}