/* Phone frame and concept-screen components. Everything is in em so a frame scales by font-size. */
.ph{--r:#e8292b;--ink:#17171c;--mu:#6b6b76;--ln:#e6e6ea;--soft:#f4f4f6;--ok:#1e8e5a;--okbg:#e6f4ec;--err:#c62828;--errbg:#fdecea;--warn:#8a5a00;--warnbg:#fff4dc;
  font-size:13px;width:23em;border-radius:2.6em;background:#0d0d10;padding:.55em;box-shadow:0 1.2em 2.6em rgba(0,0,0,.22);flex:none}
.ph .s{position:relative;border-radius:2.1em;overflow:hidden;background:#fff;aspect-ratio:9/19.5;color:var(--ink);font-family:Inter,system-ui,sans-serif}
.ph .s>img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.ph.mini{font-size:6.6px}
.c{position:absolute;inset:0;display:flex;flex-direction:column;font-size:1em;line-height:1.35}
.c .sb{display:flex;justify-content:space-between;padding:.9em 1.6em .3em;font-weight:600;font-size:.85em}
.c .hd{display:flex;align-items:center;gap:.7em;padding:.5em 1.2em .7em;border-bottom:1px solid var(--ln)}
.c .hd b{font-size:1.15em;font-weight:800}
.c .lg{color:var(--r);font-weight:900;font-size:1.3em;letter-spacing:-.02em}
.c .bd{flex:1;overflow:auto;padding:1em 1.2em;display:flex;flex-direction:column;gap:.75em}
.c .cf{padding:.8em 1.2em 1.3em;display:flex;gap:.6em}
.c h3{font-size:1.35em;font-weight:800;letter-spacing:-.01em;line-height:1.2;margin:0}
.c p{margin:0;color:var(--mu);font-size:.92em}
.c .btn{flex:1;border:0;border-radius:.7em;padding:.95em;font:700 1em Inter,sans-serif;background:var(--ink);color:#fff;cursor:pointer;text-align:center}
.c .btn.r{background:var(--r)}.c .btn.g{background:#fff;color:var(--ink);border:1px solid var(--ln)}
.c .bd>.btn{flex:none}
.c .btn[disabled]{background:#c9c9cf;color:#fff;cursor:not-allowed}
.c .card{background:var(--soft);border-radius:.8em;padding:.8em;display:flex;flex-direction:column;gap:.5em}
.c .chk{display:flex;gap:.6em;align-items:flex-start;font-size:.95em}
.c .chk i{flex:none;width:1.3em;height:1.3em;border-radius:50%;background:var(--ok);color:#fff;font-style:normal;font-size:.75em;display:flex;align-items:center;justify-content:center;margin-top:.15em}
.c .fld{display:flex;flex-direction:column;gap:.25em}
.c .fld label{font-size:.78em;font-weight:700;color:var(--mu)}
.c .fld label em{color:var(--r);font-style:normal}
.c .in{border:1.5px solid var(--ln);border-radius:.6em;padding:.65em .7em;font-size:.95em;background:#fff}
.c .in.bad{border-color:var(--err);background:var(--errbg)}.c .in.good{border-color:var(--ok)}
.c .msg{font-size:.78em;font-weight:600}.c .msg.e{color:var(--err)}.c .msg.o{color:var(--ok)}
.c .note{border-radius:.7em;padding:.65em .8em;font-size:.85em;font-weight:600}
.c .note.w{background:var(--warnbg);color:var(--warn)}.c .note.o{background:var(--okbg);color:var(--ok)}.c .note.e{background:var(--errbg);color:var(--err)}
.c .stp{display:flex;align-items:center;justify-content:space-between;gap:.5em}
.c .stp .ctl{display:flex;align-items:center;gap:.4em}
.c .stp button{width:2.6em;height:2.6em;border-radius:.6em;border:1.5px solid var(--ln);background:#fff;font:700 1.2em Inter,sans-serif;cursor:pointer;color:var(--ink)}
.c .stp output{min-width:2.6em;text-align:center;font-weight:800;font-size:1.15em}
.c .otp{display:flex;gap:.6em;justify-content:center}.c .otp span{width:2.6em;height:3em;border:1.5px solid var(--ok);border-radius:.6em;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2em;background:var(--okbg)}
.c .thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}.c .thumbs span{aspect-ratio:4/3;border-radius:.4em;background:linear-gradient(135deg,#c9b8a3,#8e7a63)}
.c .thumbs span.dup{outline:2px solid var(--err);outline-offset:-2px}.c .thumbs span.b{background:linear-gradient(135deg,#a9c0cf,#5e7a8e)}.c .thumbs span.c2{background:linear-gradient(135deg,#d6c48f,#a08343)}
.c .tl{display:flex;flex-direction:column;gap:.6em}.c .tl div{display:flex;gap:.6em;align-items:center;font-size:.92em}
.c .tl i{flex:none;width:1.4em;height:1.4em;border-radius:50%;border:2px solid var(--ln);font-style:normal}.c .tl i.d{background:var(--ok);border-color:var(--ok)}.c .tl i.n{border-color:var(--r)}
.c .row{display:flex;justify-content:space-between;gap:.6em;font-size:.92em}
.c .tag{display:inline-block;font-size:.72em;font-weight:800;letter-spacing:.04em;padding:.25em .55em;border-radius:.4em}
.c .tag.o{background:var(--okbg);color:var(--ok)}.c .tag.w{background:var(--warnbg);color:var(--warn)}.c .tag.r{background:var(--r);color:#fff}
.c .tabs2{display:flex;gap:1.2em;font-size:.88em;font-weight:700;color:var(--mu);border-bottom:1px solid var(--ln);padding-bottom:.4em}.c .tabs2 b{color:var(--ink);border-bottom:2px solid var(--r);padding-bottom:.3em}
.c .img{border-radius:.7em;background:linear-gradient(135deg,#7d4b3a,#d39a6a);min-height:7em}
.c .img.b{background:linear-gradient(135deg,#3f5f7a,#8fb3c9)}.c .img.c3{background:linear-gradient(135deg,#5b6b3a,#b9c48a)}
.c .pill{display:inline-flex;gap:.3em;align-items:center;border:1px solid var(--ln);border-radius:2em;padding:.35em .75em;font-size:.82em;font-weight:600;background:#fff}
.c .opt{border:1.5px solid var(--ln);border-radius:.7em;padding:.7em;display:flex;justify-content:space-between;align-items:center;gap:.6em;cursor:pointer;background:#fff;font:inherit;color:inherit;text-align:left;width:100%}
.c .opt.on{border-color:var(--r);background:#fff5f5}
.c .nav{display:flex;border-top:1px solid var(--ln);padding:.55em 0 1em}.c .nav span{flex:1;text-align:center;font-size:.75em;font-weight:700;color:var(--mu)}.c .nav span.on{color:var(--r)}