/* Surfify — styled after the Emergent "cyberpunk" app (App.css / index.css / Tailwind classes it used) */
:root {
  --bg-base:#050505; --bg-surface:#0A0A0A; --bg-hi:#121212; --b1:#222; --b2:#333;
  --neon-cyan:#00F0FF; --cyan-hover:#33F3FF; --hot-pink:#FF00FF;
  --cyan-400:#22d3ee; --cyan-500:#06b6d4; --pink-400:#f472b6; --pink-500:#ec4899; --amber-400:#fbbf24; --amber-500:#f59e0b;
  --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827;
  --text-2:#A1A1AA; --muted:#52525B; --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --head:'Unbounded', sans-serif;
}
*, ::before, ::after { box-sizing:border-box; }
html { background:var(--bg-base); -webkit-text-size-adjust:100%; }
body { margin:0; font-family:var(--mono); color:#fff; background:var(--bg-base); min-height:100vh; -webkit-font-smoothing:antialiased; line-height:1.5; }
h1,h2,h3 { margin:0; font-family:var(--head); font-weight:700; letter-spacing:-0.025em; }
button, input, textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; padding:0; }
button:disabled { cursor:not-allowed; opacity:.4; }
[hidden] { display:none !important; }
::selection { background:rgba(0,240,255,.3); }
::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:var(--bg-surface); }
::-webkit-scrollbar-thumb { background:#333; border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:var(--neon-cyan); }
.ic { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.ic.s { width:12px; height:12px; }
.c { color:var(--cyan-400); } .p { color:var(--pink-400); } .a { color:var(--amber-400); }

.surfify-container { min-height:100vh; background:var(--bg-base); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.surfify-container::before { content:''; position:absolute; inset:0; background-image:radial-gradient(#1a1a1a 1px, transparent 1px); background-size:20px 20px; pointer-events:none; opacity:.5; }
.wrap { max-width:80rem; margin:0 auto; padding-left:24px; padding-right:24px; width:100%; position:relative; z-index:1; }

/* header */
.topbar { position:relative; z-index:10; border-bottom:1px solid rgba(31,41,55,.5); background:rgba(0,0,0,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.topbar-in { display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.logo-container { display:flex; align-items:center; gap:12px; }
.open-box-logo { width:40px; height:40px; }
.open-box-logo svg { width:100%; height:100%; filter:drop-shadow(0 0 6px rgba(0,240,255,.6)); }
.logo-text { font-family:var(--head); font-size:1.5rem; font-weight:700; color:#fff; letter-spacing:-0.025em; }
.text-glow { text-shadow:0 0 10px rgba(0,240,255,.5), 0 0 20px rgba(0,240,255,.3); }
.tagline { font-size:.75rem; color:var(--gray-500); letter-spacing:.05em; }

.main { padding-top:32px; padding-bottom:32px; flex:1; }

/* section labels */
.label { display:flex; align-items:center; gap:8px; margin-bottom:16px; color:var(--cyan-400); }
.label h2 { font-family:var(--mono); font-size:.875rem; font-weight:400; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-400); }
.label h3 { font-family:var(--mono); font-size:.75rem; font-weight:400; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-400); }
.label.between { justify-content:space-between; margin-bottom:12px; }
.label .lbl { display:flex; align-items:center; gap:8px; }
.label.nomb { margin-bottom:0; }
.label .store { margin-left:auto; font-size:.7rem; color:var(--gray-500); text-transform:uppercase; letter-spacing:.05em; }
.glyph { font-size:.9rem; }
.mono-lbl { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-400); }
.hint { font-size:.7rem; color:var(--gray-500); text-transform:none; letter-spacing:0; }

/* URL */
.url-section { margin-bottom:40px; }
.url-input-wrapper { position:relative; background:var(--bg-surface); border:1px solid var(--b2); display:flex; align-items:center; gap:8px; padding:8px; border-radius:2px; transition:border-color .3s, box-shadow .3s; }
.url-input-wrapper:focus-within { border-color:var(--neon-cyan); box-shadow:0 0 20px rgba(0,240,255,.15); }
.url-input-wrapper .pkg { width:20px; height:20px; color:var(--gray-500); margin-left:8px; }
.url-input-wrapper input { flex:1; min-width:0; background:transparent; border:0; outline:0; color:#fff; font-family:var(--mono); font-size:.875rem; padding:8px 4px; }
.url-input-wrapper input::placeholder { color:var(--muted); }
.scan-overlay { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.scan-line { position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, #00F0FF, transparent); animation:scan-line 1.5s ease-in-out infinite; }
@keyframes scan-line { 0% { top:0; } 100% { top:100%; } }
.btn-primary { background:var(--neon-cyan); color:#000; font-family:var(--mono); font-weight:500; text-transform:uppercase; letter-spacing:.1em; border:none; cursor:pointer; border-radius:2px; transition:background-color .2s, box-shadow .2s, transform .1s; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-primary:hover:not(:disabled) { background:var(--cyan-hover); box-shadow:0 0 25px rgba(0,240,255,.5); }
.btn-primary:active:not(:disabled) { transform:scale(.98); }
.btn-primary:disabled { background:#333; color:#666; box-shadow:none; opacity:1; }
.btn-primary.scan { padding:8px 24px; font-size:.875rem; }
.btn-secondary { background:transparent; color:var(--hot-pink); font-family:var(--mono); font-weight:500; text-transform:uppercase; letter-spacing:.1em; border:1px solid var(--hot-pink); border-radius:2px; transition:background-color .2s, box-shadow .2s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-secondary:hover:not(:disabled) { background:rgba(255,0,255,.1); box-shadow:0 0 20px rgba(255,0,255,.3); }
.btn-ghost { background:transparent; color:var(--text-2); transition:color .2s; }
.btn-ghost:hover { color:#fff; }
.btn-ghost.demo { padding:8px 12px; font-size:.75rem; white-space:nowrap; }
.btn-outline { width:100%; padding:10px; border:1px solid var(--b2); color:var(--text-2); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; border-radius:2px; transition:border-color .2s, color .2s; }
.btn-outline:hover:not(:disabled) { border-color:var(--neon-cyan); color:#fff; }
.status { margin-top:12px; font-size:.8rem; padding:10px 12px; border:1px solid var(--b1); background:var(--bg-surface); color:var(--text-2); }
.status.err { border-color:rgba(255,0,255,.5); color:#ff7bff; }
.status.ok { color:var(--cyan-400); }

/* cards */
.product-card { background:var(--bg-surface); border:1px solid var(--b1); border-radius:2px; transition:border-color .3s; }
.product-card:hover { border-color:var(--b2); }
.pad5 { padding:20px; } .pad4 { padding:16px; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 24px; color:var(--muted); text-align:center; font-size:.875rem; }
.empty-state b { color:var(--neon-cyan); font-weight:500; }
.empty-state-icon { width:64px; height:64px; margin-bottom:16px; fill:none; stroke:var(--gray-700); stroke-width:1.5; }

/* layout */
.grid { display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:32px; }
.col-left { grid-column:span 4; display:flex; flex-direction:column; gap:24px; min-width:0; }
.col-right { grid-column:span 8; display:flex; flex-direction:column; gap:24px; min-width:0; }

/* product data */
.p-title { font-family:var(--head); font-size:1.25rem; font-weight:700; margin-bottom:8px; color:#fff; line-height:1.3; }
.p-price { font-size:1.125rem; color:var(--cyan-400); margin:0 0 16px; }
.p-price s { color:var(--gray-500); font-size:.9rem; margin-left:8px; }
.p-price .sale { font-size:.7rem; background:rgba(255,0,255,.15); color:#ff7bff; padding:2px 6px; margin-left:8px; vertical-align:middle; }
.p-vendor { font-size:.875rem; color:var(--gray-400); margin:0 0 16px; } .p-vendor span { color:#fff; }
.p-desc { font-size:.875rem; color:var(--gray-300); line-height:1.65; max-height:8rem; overflow:auto; white-space:pre-line; padding-right:6px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chips span { font-size:.75rem; padding:4px 8px; background:var(--gray-800); color:var(--gray-400); border-radius:2px; }
.brief { margin-top:14px; font-size:.75rem; color:var(--gray-500); }
.brief summary { cursor:pointer; text-transform:uppercase; letter-spacing:.05em; }
.brief summary:hover { color:#fff; }
.brief pre { white-space:pre-wrap; font-family:var(--mono); font-size:.72rem; line-height:1.5; color:var(--gray-300); background:#000; border:1px solid var(--b1); padding:10px; max-height:260px; overflow:auto; }

/* media */
.counts { font-size:.72rem; display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.media-actions { display:flex; gap:8px; margin-bottom:12px; }
.chip-btn { font-size:.7rem; padding:5px 10px; border:1px solid var(--b2); color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; border-radius:2px; background:var(--bg-surface); transition:border-color .2s, color .2s; }
.chip-btn:hover:not(:disabled) { border-color:var(--neon-cyan); color:#fff; }
.chip-btn.wide { min-width:120px; }
.media-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; padding-top:4px; }
.m { position:relative; }
.m .thb { position:relative; display:block; width:100%; aspect-ratio:1; overflow:hidden; border-radius:2px; border:2px solid transparent; background:#000; transition:border-color .2s; }
.m .thb:hover { border-color:var(--gray-600); }
.m.sel .thb { border-color:var(--cyan-400); }
.m.isbg .thb { border-color:var(--amber-500); border-style:dashed; }
.m img { width:100%; height:100%; object-fit:cover; display:block; }
.m .num { position:absolute; bottom:3px; left:3px; font-size:.6rem; background:rgba(0,0,0,.65); color:#fff; padding:0 4px; border-radius:2px; pointer-events:none; }
.m .tg { position:absolute; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:2; background:var(--gray-800); color:var(--gray-500); opacity:0; transition:opacity .15s, background-color .15s, transform .15s; }
.m .tg svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.m:hover .tg, .m .tg.on, .m .tg:focus-visible { opacity:1; }
.m .tg:hover { background:var(--gray-700); }
.m .tg.p { top:-4px; left:-4px; } .m .tg.l { top:-4px; right:-4px; }
.m .tg.b { bottom:-4px; right:-4px; } .m .cutbtn { bottom:-4px; left:-4px; }
.m .tg.p.on { background:var(--cyan-500); color:#000; }
.m .tg.l.on { background:var(--pink-500); color:#fff; } .m .tg.l.on svg { fill:currentColor; }
.m .tg.b.on { background:var(--amber-500); color:#000; }
.m .cutbtn { display:none; }
.m.isp .cutbtn { display:flex; opacity:1; }
.m .cutbtn.on { background:#000; color:var(--cyan-400); box-shadow:0 0 0 1px var(--cyan-500); }
.m .cutbtn.off { background:var(--gray-800); color:var(--gray-500); text-decoration:line-through; }
.m .cutbtn.none { background:var(--gray-800); color:#ff7bff; }
.m .spin { position:absolute; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); pointer-events:none; }
.m.cutting .spin { display:flex; }
.m .spin::after { content:''; width:22px; height:22px; border-radius:50%; border:2px solid rgba(0,240,255,.25); border-top-color:var(--neon-cyan); animation:spin .8s linear infinite; }
.m.queued .spin { display:flex; background:rgba(0,0,0,.25); } .m.queued .spin::after { animation-duration:2s; opacity:.5; }
@keyframes spin { to { transform:rotate(360deg); } }
.legend { margin-top:12px; font-size:.72rem; color:var(--gray-600); }
.legend p { margin:4px 0; } .legend .mix { color:var(--gray-500); } .legend .tip { color:var(--gray-600); }
.videos { margin-top:12px; border-top:1px solid var(--b1); padding-top:10px; font-size:.72rem; color:var(--gray-400); }
.videos a { color:var(--cyan-400); text-decoration:none; word-break:break-all; } .videos a:hover { text-decoration:underline; }
.videos ul { margin:6px 0 0; padding-left:16px; }

/* voice */
.voice-selector { display:flex; gap:8px; flex-wrap:wrap; }
.voice-option { padding:8px 16px; background:var(--bg-surface); border:1px solid var(--b2); color:var(--text-2); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; transition:background-color .2s, border-color .2s, color .2s, box-shadow .2s; }
.voice-option:hover { border-color:var(--neon-cyan); color:#fff; }
.voice-option.active { background:rgba(0,240,255,.1); border-color:var(--neon-cyan); color:var(--neon-cyan); box-shadow:0 0 15px rgba(0,240,255,.2); }
.custom-voice { width:100%; margin-top:16px; background:#000; border:1px solid var(--gray-800); color:#fff; font-size:.85rem; padding:8px 10px; resize:none; border-radius:2px; outline:0; }
.custom-voice:focus { border-color:var(--cyan-500); } .custom-voice::placeholder { color:var(--gray-600); }
.regen { width:100%; margin-top:16px; padding:8px; font-size:.85rem; }
.regen.busy .ic { animation:spin 1s linear infinite; }

/* preview */
.preview-panel { background:var(--bg-surface); border:1px solid var(--b1); border-radius:2px; padding:24px; position:relative; overflow:hidden; }
.pv-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.pv-ctrls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pv-layout { flex-basis:100%; display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--b1); background:#070707; border-left:2px solid var(--neon-cyan); }
.pv-layout.dim { border-left-color:var(--gray-700); }
.pv-layout .lay-k { color:var(--cyan-400); }
.pv-layout.dim .lay-k { color:var(--gray-500); }
.pv-layout .lay-hint { margin-left:auto; }
.dl-block { display:flex; flex-direction:column; gap:12px; padding-top:4px; }
.badge { margin-left:8px; padding:2px 8px; font-size:.75rem; border-radius:4px; }
.badge:empty { display:none; }
.badge.MIXED { background:linear-gradient(90deg, rgba(6,182,212,.2), rgba(236,72,153,.2)); color:#fff; }
.badge.STACKED, .badge.SINGLE, .badge.SLIDES { background:rgba(6,182,212,.2); color:var(--cyan-400); }
.badge.LIFESTYLE { background:rgba(236,72,153,.2); color:var(--pink-400); }
.seg { display:inline-flex; align-items:center; gap:4px; background:var(--gray-900); border-radius:2px; padding:4px; }
.seg button { padding:4px 12px; font-size:.75rem; color:var(--gray-400); border-radius:2px; display:inline-flex; align-items:center; gap:6px; transition:background-color .2s, color .2s; white-space:nowrap; }
.seg button:hover:not(:disabled) { color:#fff; }
.seg button.on { background:var(--cyan-500); color:#000; }
.seg.sm button { padding:3px 9px; font-size:.7rem; }
.format-selector { display:flex; gap:4px; background:var(--bg-surface); border:1px solid var(--b1); padding:4px; border-radius:2px; flex-wrap:wrap; }
.format-option { padding:6px 12px; color:var(--text-2); font-size:.7rem; transition:background-color .2s, color .2s; white-space:nowrap; }
.format-option:hover { color:#fff; }
.format-option.active { background:var(--neon-cyan); color:#000; }
.pv-body { display:flex; gap:24px; align-items:flex-start; }
.pv-stage-col { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.preview-phone-frame { background:#111; border:2px solid var(--b2); border-radius:24px; position:relative; overflow:hidden; box-shadow:0 0 40px rgba(0,0,0,.5); padding:8px; width:256px; }
.preview-phone-frame.post { width:300px; } .preview-phone-frame.wide { width:384px; border-radius:16px; }
.preview-phone-notch { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:80px; height:24px; background:#000; border-radius:12px; z-index:10; }
.media-container { position:relative; overflow:hidden; background:#000; border-radius:8px; }
.media-container canvas { display:block; width:100%; height:auto; }
.ctr { position:absolute; top:12px; right:12px; z-index:5; padding:4px 8px; background:rgba(0,0,0,.6); border-radius:4px; font-size:.7rem; color:#fff; }
.ctr:empty { display:none; }
.nav { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; transition:background-color .2s; }
.nav:hover { background:rgba(0,0,0,.8); }
.nav svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nav.prev { left:8px; } .nav.next { right:8px; }
.dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:6px; }
.dots button { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); transition:background-color .2s; }
.dots button.on { background:var(--cyan-400); } .dots button.on.l { background:var(--pink-400); }
.back-slides { font-size:.72rem; color:var(--cyan-400); text-transform:uppercase; letter-spacing:.05em; }
.back-slides:hover { text-decoration:underline; }
.pv-side { flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }
.caption-area { background:var(--bg-surface); border:1px solid var(--b1); padding:16px; border-radius:2px; }
.cap-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cap-tools { display:flex; gap:6px; } .icb { padding:4px; }
.icb.ok { color:#39FF14; }
.aiflag { margin-left:6px; font-size:.62rem; padding:1px 6px; border-radius:3px; letter-spacing:.05em; }
.aiflag.ai { background:rgba(57,255,20,.12); color:#39FF14; } .aiflag.tpl { background:var(--gray-800); color:var(--gray-400); }
.caption-text { width:100%; font-family:var(--mono); font-size:.9rem; line-height:1.6; color:#fff; background:transparent; border:0; outline:0; resize:vertical; padding:0; min-height:6.5em; }
.caption-text::placeholder { color:var(--gray-500); font-size:.85rem; }
.hashtags { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.hashtags span { color:var(--neon-cyan); font-size:.8rem; }
.cap-note { margin:8px 0 0; font-size:.68rem; color:var(--gray-600); } .cap-note:empty { display:none; }
.skel div { height:16px; border-radius:4px; margin-bottom:8px; background:linear-gradient(90deg, #0A0A0A 0%, #1a1a1a 50%, #0A0A0A 100%); background-size:200% 100%; animation:shimmer 1.5s infinite; }
.skel div:nth-child(2) { width:75%; } .skel div:nth-child(3) { width:50%; }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
.dl-big { width:100%; padding:12px; font-size:.85rem; }
.fmt-info { display:flex; justify-content:space-between; gap:12px; font-size:.72rem; color:var(--gray-500); }
.fmt-info b { color:var(--gray-300); font-weight:500; }

/* Stack & background panel */
.stackbg { border:1px solid var(--b1); background:#070707; border-radius:2px; }
.stackbg summary { list-style:none; cursor:pointer; padding:12px 16px; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-400); display:flex; align-items:center; gap:8px; user-select:none; }
.stackbg summary::-webkit-details-marker { display:none; }
.stackbg summary::after { content:'+'; margin-left:auto; color:var(--cyan-400); font-size:1rem; line-height:1; }
.stackbg[open] summary::after { content:'−'; }
.stackbg summary:hover { color:#fff; }
.sum-state { font-size:.66rem; color:var(--gray-600); text-transform:none; letter-spacing:0; }
.sb-body { padding:4px 16px 16px; border-top:1px solid var(--b1); }
.sb-body .row { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin-top:12px; }
.sb-body .k { width:84px; flex-shrink:0; font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--gray-500); }
.sb-body .v { font-size:.72rem; color:var(--gray-300); min-width:40px; }
.tgl { font-size:.7rem; padding:5px 10px; border:1px solid var(--b2); color:var(--gray-400); border-radius:2px; text-transform:uppercase; letter-spacing:.05em; transition:all .2s; }
.tgl::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--gray-600); margin-right:7px; vertical-align:1px; }
.tgl.on { border-color:var(--neon-cyan); color:var(--neon-cyan); background:rgba(0,240,255,.08); }
.tgl.on::before { background:var(--neon-cyan); box-shadow:0 0 6px var(--neon-cyan); }
.cut-status { margin:8px 0 0 94px; font-size:.68rem; color:var(--gray-500); } .cut-status:empty { display:none; }
.cut-status .bar { display:inline-block; width:80px; height:4px; background:var(--gray-800); vertical-align:middle; margin-left:6px; }
.cut-status .bar i { display:block; height:100%; background:var(--neon-cyan); }
input[type=range] { -webkit-appearance:none; appearance:none; flex:1; min-width:120px; max-width:260px; height:4px; background:var(--gray-800); border-radius:2px; outline:0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--neon-cyan); box-shadow:0 0 8px rgba(0,240,255,.6); cursor:pointer; }
input[type=range]::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:var(--neon-cyan); cursor:pointer; }
input[type=range]:disabled { opacity:.35; }

/* all images */
.allimgs details summary { list-style:none; cursor:pointer; } .allimgs summary::-webkit-details-marker { display:none; }
.allimgs summary h3 { transition:color .2s; } .allimgs summary:hover h3 { color:#fff; }
.all { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px; margin-top:14px; }
.all .it { font-size:.66rem; color:var(--gray-500); display:flex; flex-direction:column; gap:6px; }
.all img { width:100%; aspect-ratio:1; object-fit:cover; border:1px solid var(--b1); border-radius:2px; background:#000; }
.all button { font-size:.66rem; padding:5px; border:1px solid var(--b2); color:var(--text-2); text-transform:uppercase; letter-spacing:.05em; }
.all button:hover { border-color:var(--neon-cyan); color:#fff; } .all button.ok { border-color:#39FF14; color:#39FF14; }

/* footer, toast */
.foot { position:relative; z-index:1; border-top:1px solid rgba(31,41,55,.5); margin-top:48px; }
.foot-in { display:flex; justify-content:space-between; padding-top:16px; padding-bottom:16px; font-size:.75rem; color:var(--gray-600); }
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); background:#000; border:1px solid var(--neon-cyan); color:#fff; font-size:.8rem; padding:10px 16px; border-radius:2px; box-shadow:0 0 20px rgba(0,240,255,.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100; max-width:calc(100vw - 32px); }
.toast.show { opacity:1; transform:translate(-50%, 0); }

/* entrance */
@keyframes fade-in-up { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.fade-in-up { animation:fade-in-up .5s ease-out forwards; }
.fade-in-up-delay-1 { animation:fade-in-up .5s ease-out .1s forwards; opacity:0; }
.fade-in-up-delay-2 { animation:fade-in-up .5s ease-out .2s forwards; opacity:0; }
@media (prefers-reduced-motion: reduce) { .fade-in-up, .fade-in-up-delay-1, .fade-in-up-delay-2 { animation:none; opacity:1; } }

/* responsive */
@media (max-width: 1279px) { .pv-body { flex-direction:column; align-items:stretch; } .pv-stage-col { align-self:center; } }
@media (max-width: 1023px) {
  .grid { grid-template-columns:1fr; gap:24px; }
  .col-left, .col-right { grid-column:auto; }
  /* tablet/phone: one column in task order — tag media, see the preview, then voice + product details */
  .grid { display:flex; flex-direction:column; }
  .col-left, .col-right { display:contents; }
  #mediaCard { order:1; } .preview-panel { order:2; } #voiceCard { order:3; } #pdata { order:4; } .allimgs { order:5; }
  .media-grid { grid-template-columns:repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wrap { padding-left:14px; padding-right:14px; }
  .main { padding-top:20px; }
  .url-section { margin-bottom:24px; }
  .tagline { font-size:.62rem; }
  .logo-text { font-size:1.25rem; } .open-box-logo { width:34px; height:34px; }
  .url-input-wrapper { flex-wrap:wrap; }
  .url-input-wrapper .pkg { display:none; }
  .url-input-wrapper input { flex-basis:100%; font-size:16px; }   /* 16px stops iOS zoom-on-focus */
  .btn-ghost.demo { margin-right:auto; }
  .preview-panel { padding:14px; }
  .pv-head { gap:10px; margin-bottom:16px; }
  .pv-ctrls { gap:8px; width:100%; }
  .format-selector { width:100%; }
  .format-option { flex:1 1 30%; padding:7px 4px; text-align:center; }
  .preview-phone-frame, .preview-phone-frame.post { width:min(78vw, 280px); }
  .preview-phone-frame.wide { width:calc(100vw - 60px); }
  .media-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
  .m .tg { opacity:1; width:24px; height:24px; }   /* no hover on touch: always show tag buttons */
  .m .tg:not(.on) { background:rgba(31,41,55,.9); }
  .sb-body .k { width:100%; }
  .sum-state { display:none; }
  .cut-status { margin-left:0; }
  input[type=range] { max-width:none; }
  .voice-option { padding:8px 12px; }
  .fmt-info { flex-direction:column; gap:2px; }
  .pv-layout { padding:10px; gap:8px; }
  .pv-layout .lay-k { flex-basis:100%; }
  #laySeg { width:100%; } #laySeg button { flex:1; justify-content:center; padding:6px 4px; }
  .pv-layout .lay-hint { margin-left:0; flex-basis:100%; }
}