*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Microsoft JhengHei",-apple-system,"PingFang TC",sans-serif;
  background:linear-gradient(135deg,#fda4af 0%,#f9a8d4 50%,#a5b4fc 100%);
  min-height:100dvh;color:#1f2937}
.hidden{display:none!important}

.page{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:16px}
.card{background:rgba(255,255,255,.95);border-radius:24px;box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding:28px 22px;width:100%;max-width:480px;text-align:center}
h1{font-size:2rem;margin-bottom:8px}
h2{font-size:1.3rem;margin-bottom:12px}
.subtitle{color:#6b7280;margin-bottom:16px;line-height:1.7}
.steps{text-align:left;margin:0 auto 20px;max-width:300px;line-height:2;color:#374151}

.btn{display:inline-block;border:none;border-radius:999px;background:#e5e7eb;color:#111827;
  font-size:1rem;padding:10px 20px;cursor:pointer;text-decoration:none;font-family:inherit}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(135deg,#ec4899,#8b5cf6);color:#fff;font-weight:bold}
.btn.big{font-size:1.15rem;padding:14px 32px;width:100%}
.btn.small{font-size:.85rem;padding:6px 14px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.status{margin-top:14px;min-height:1.5em;color:#374151;line-height:1.5;word-break:break-all}
.warn{position:sticky;top:0;z-index:50;background:#fef3c7;color:#92400e;padding:10px 14px;
  font-size:.9rem;text-align:center;line-height:1.6}
.row{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:12px;flex-wrap:wrap}
input[type=text]{flex:1;min-width:0;border:2px solid #e5e7eb;border-radius:12px;padding:10px 12px;
  font-size:1rem;font-family:inherit}
input[type=text]:focus{outline:none;border-color:#ec4899}

/* ---- 拍照頁 ---- */
.stage{position:relative;background:#000;border-radius:16px;overflow:hidden;margin-bottom:12px;min-height:200px}
.stage video{display:block;width:100%}
.stage video.mirrored{transform:scaleX(-1)}
.frame-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.camstart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;white-space:nowrap}
.thumbs{display:flex;gap:8px;overflow-x:auto;padding:4px 0;margin-bottom:8px;justify-content:center}
.thumbs img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:3px solid transparent;
  cursor:pointer;background:#f3f4f6}
.thumbs img.sel{border-color:#ec4899}
#editCanvas{width:100%;border-radius:16px;touch-action:none;background:#000}
.toolbar{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:12px;flex-wrap:wrap}
.colors{display:flex;gap:8px}
.color{width:32px;height:32px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #d1d5db;cursor:pointer}
.color.sel{box-shadow:0 0 0 3px #ec4899}
.preview{width:100%;border-radius:16px;margin-bottom:12px}
#qr{margin:16px auto 0;display:flex;justify-content:center}

/* ---- AR 頁 ---- */
#arView{position:fixed;inset:0;z-index:40;background:#000}
#bgCam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#threeWrap canvas{position:absolute;inset:0}
.hud{position:absolute;top:14px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);
  color:#fff;padding:8px 18px;border-radius:999px;font-size:.95rem;pointer-events:none;white-space:nowrap}
#reveal{position:fixed;inset:0;z-index:60;background:rgba(17,24,39,.85);display:flex;
  align-items:center;justify-content:center;padding:20px}
.postcard-pop{background:#fff;border-radius:20px;padding:14px;max-width:92vw;text-align:center;
  animation:popIn .7s cubic-bezier(.2,1.6,.4,1)}
.postcard-pop img{max-width:100%;max-height:70vh;border-radius:12px;display:block}
.postcard-pop p{margin-top:10px;color:#374151}
@keyframes popIn{0%{transform:scale(0) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}