/* ===================================================================================================
   ΝΕΑ ΕΜΦΑΝΙΣΗ (μακέτα 10/2026, maketa-ux-2026-10.html — εγκρίθηκε 20/10/2026).
   ΟΛΟΙ οι κανόνες ισχύουν ΜΟΝΟ μέσα σε .v2 — έτσι η νέα εμφάνιση χτίζεται ΟΘΟΝΗ-ΟΘΟΝΗ δίπλα στην παλιά (main.css)
   χωρίς να «χαλάει» όσες οθόνες δεν έχουν αλλάξει ακόμη. Όταν μετακομίσουν όλες, το main.css φεύγει.
   Χρώματα: ΦΩΤΕΙΝΟ παντού· ΣΚΟΤΕΙΝΟ μόνο στον editor & στην τετράδα (.darkzone) — απόφαση ιδιοκτήτη 14/10.
   Εικονίδια: Material Symbols Rounded από τον ΔΙΚΟ μας server (υποσύνολο — tools/fonts/icons.txt).
   =================================================================================================== */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400 600;
  font-display: block;
  src: url(/assets/fonts/material-symbols-rounded-subset.woff2) format('woff2');
}
.v2{--bg:#f5f6fa; --surface:#ffffff; --surface2:#f0f2f7; --line:#e2e5ee; --text:#151a26; --muted:#5a6377; --faint:#6b7489;
    --primary:#6d4ee8; --primary2:#5a3fd6; --on-primary:#ffffff; --primary-soft:rgba(109,78,232,.10);
    --ok:#059669; --warn:#b45309; --warn-soft:rgba(245,158,11,.12); --danger:#e11d48;
    --stage:#e6e9f0; --shadow:0 10px 26px rgba(22,28,45,.10); --scrim:rgba(15,18,30,.45); --sheet:#ffffff;}
.v2 .darkzone{--bg:#0c0e14; --surface:#151926; --surface2:#1c2131; --line:#272d40; --text:#eef1f8; --muted:#a0a8c0; --faint:#8a93ad;
    --primary:#a78bfa; --primary2:#7c6cf0; --on-primary:#15121f; --primary-soft:rgba(167,139,250,.16);
    --stage:#07080c; --shadow:0 12px 30px rgba(0,0,0,.45); --scrim:rgba(0,0,0,.6); --sheet:#151926;
    background:var(--bg); color:var(--text);}
.v2 button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
.v2 .ic{font-family:'Material Symbols Rounded';font-weight:500;font-style:normal;font-size:22px;line-height:1;display:inline-block;vertical-align:middle;
      font-variation-settings:'FILL' 0,'wght' 500,'opsz' 24;-webkit-font-smoothing:antialiased;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr}
.v2 .ic.fill{font-variation-settings:'FILL' 1,'wght' 500,'opsz' 24}
.v2 .ic.sm{font-size:18px}
.v2 .ic.lg{font-size:28px}
.v2 header.top{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line)}
.v2 .iconbtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--text);background:var(--surface2)}
.v2 .brand{font-weight:800;letter-spacing:.2px;font-size:15.5px}
.v2 .brand b{color:var(--primary)}
.v2 .title{font-weight:800;font-size:16.5px}
.v2 .spacer{flex:1}
.v2 .cart{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;background:var(--surface2);font-weight:800;font-size:14px}
.v2 .cart .n{min-width:20px;height:20px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:12px;display:grid;place-items:center;padding:0 5px}
.v2 .screen{flex:1;display:none;flex-direction:column;min-height:0}
.v2 .screen.on{display:flex}
.v2 .scroll{flex:1;overflow-y:auto;padding:16px 16px 24px;-webkit-overflow-scrolling:touch}
.v2 h1{font-size:25px;line-height:1.2;margin:4px 0 6px;letter-spacing:-.4px}
.v2 h2{font-size:20px;margin:2px 0 6px;letter-spacing:-.2px}
.v2 .sub{color:var(--muted);font-size:15px;line-height:1.45;margin:0 0 16px}
.v2 .label{font-size:12.5px;color:var(--muted);font-weight:700;margin:20px 2px 8px}
.v2 .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.v2 .card + .card{margin-top:12px}
.v2 .card h4{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:700}
.v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 20px;border-radius:14px;font-weight:800;font-size:15.5px;white-space:nowrap}
.v2 .btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:var(--on-primary);box-shadow:0 6px 18px var(--primary-soft)}
.v2 .btn.secondary{background:var(--surface2);color:var(--text);border:1px solid var(--line)}
.v2 .btn.textlink{height:auto;padding:8px;color:var(--muted);font-weight:600;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.v2 .btn.block{width:100%}
.v2 .btn[disabled]{opacity:.45}
.v2 .hero{position:relative;display:block;width:100%;text-align:left;border-radius:20px;overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:12px}
.v2 .hero .shot{position:relative;height:180px;background:linear-gradient(135deg,#fde2e4,#e9d5ff 60%,#c7d2fe)}
#stepLogin .pol{position:absolute;width:86px;aspect-ratio:1181/1500;background:#fff;border-radius:3px;box-shadow:0 8px 18px rgba(0,0,0,.25);padding:6px 6px 22px}
#stepLogin .pol i{position:relative;display:block;width:100%;height:100%;overflow:hidden}
#stepLogin .pol small{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-size:9.5px;color:#b4233a;font-style:italic}
.v2 .hero .shot img, .v2 .row .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v2 .hero .body{display:flex;align-items:center;gap:10px;padding:12px 14px}
.v2 .hero h3{margin:0;font-size:18px}
.v2 .hero p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.v2 .badge{position:absolute;top:12px;left:12px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:var(--on-primary);font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:999px;display:inline-flex;align-items:center;gap:4px}
.v2 .price{margin-left:auto;text-align:right;white-space:nowrap;font-size:12px;color:var(--muted)}
.v2 .price b{display:block;font-size:18px;color:var(--text)}
.v2 .row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:12px;margin-bottom:10px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.v2 .row .ph{position:relative;flex:0 0 64px;height:64px;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.v2 .row h3{margin:0 0 2px;font-size:16px}
.v2 .row h3 .newchip{display:inline-block;vertical-align:2px;font-size:10.5px;margin-left:2px}
.v2 .row p{margin:0;color:var(--muted);font-size:13px;line-height:1.35}
.v2 .chev{color:var(--faint)}
.v2 .soon{display:flex;flex-wrap:wrap;gap:6px}
.v2 .soon > span{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--faint);border:1px dashed var(--line);border-radius:999px;padding:6px 10px}
.v2 .trust{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.v2 .trust div{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;line-height:1.3}
.v2 .trust b{color:var(--text)}
.v2 .trust .ic{color:var(--primary)}
.v2 .codechip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;margin-bottom:10px}
.v2 .codechip b{color:var(--primary);letter-spacing:2px;font-family:ui-monospace,monospace;font-size:14px}
.v2 .allrow{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 10px;margin-bottom:12px}
.v2 .allrow .t{color:var(--muted);font-weight:700;font-size:13.5px}
.v2 .pill{display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 10px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);font-weight:700;font-size:13.5px}
.v2 .pill .ic{font-size:18px;color:var(--faint)}
.v2 .stepper{display:inline-flex;align-items:center;height:40px;border-radius:10px;background:var(--surface2);border:1px solid var(--line);overflow:hidden}
.v2 .stepper button{width:40px;height:100%;display:grid;place-items:center}
.v2 .stepper span{min-width:22px;text-align:center;font-weight:800;color:var(--primary)}
.v2 .apply{margin-left:auto;height:40px;padding:0 12px;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-weight:800;font-size:13px}
.v2 .addbar{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:54px;border-radius:16px;border:2px dashed var(--primary);background:var(--primary-soft);color:var(--primary);font-weight:800;font-size:15px;margin-bottom:12px}
.v2 .addbar small{font-weight:600;color:var(--muted);font-size:12.5px}
.v2 .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v2 .tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.v2 .tile .img{position:relative;aspect-ratio:3/2;overflow:hidden;cursor:pointer;background:#000}
.v2 .tile .img.port{aspect-ratio:2/3}
.v2 .tile .img.polimg{aspect-ratio:1181/1500;background:#fff}
.v2 .tile .img.polimg .win{position:absolute;left:5.5%;top:7%;width:89%;height:72.5%;overflow:hidden}
.v2 .tile .img.polimg .cap{position:absolute;left:0;right:0;bottom:6%;text-align:center;font-size:11px;color:#b4233a;font-style:italic}
.v2 .hint{position:absolute;left:6px;right:6px;bottom:6px;display:flex;align-items:center;justify-content:center;gap:4px;background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(4px);border-radius:9px;font-size:12px;font-weight:700;padding:5px 7px}
.v2 .del{position:absolute;top:6px;right:6px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center}
.v2 .tile .ctl{padding:8px;display:flex;flex-direction:column;gap:6px}
.v2 .tile .pill{width:100%;justify-content:space-between}
.v2 .tile .pill em{font-style:normal;color:var(--muted);font-weight:600;font-size:12.5px}
.v2 .tile .r{display:flex;align-items:center;justify-content:space-between}
.v2 .tile .sumline{font-weight:800;font-size:14px}
.v2 .idrow{grid-column:1/-1;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow)}
.v2 .idrow .mini{width:42px;aspect-ratio:2/3;background:#fff;border-radius:4px;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:6px 4px;border:1px solid var(--line)}
.v2 .idrow .mini i{background:#bfdbfe;border:1px solid #333}
.v2 .empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;border:2px dashed var(--primary);background:var(--primary-soft);border-radius:22px;padding:34px 18px;margin-top:6px}
.v2 .empty .ic{font-size:46px;color:var(--primary)}
.v2 .empty b{font-size:18px}
.v2 .empty span{color:var(--muted);font-size:14px;line-height:1.45}
.v2 .slip{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.12)}
.v2 .slip .info{display:flex;flex-direction:column;line-height:1.2}
.v2 .slip .info small{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:5px}
.v2 .slip .info b{font-size:19px}
.v2 .slip .count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--primary);color:var(--on-primary);font-size:12px;font-weight:800;display:grid;place-items:center}
.v2 .slip .btn{margin-left:auto}
.v2 .pulse{animation:pulse .45s}
@keyframes pulse{50%{transform:scale(1.1)}}
.v2 .sheet{position:absolute;inset:0;background:var(--scrim);display:none;align-items:flex-end;z-index:40}
.v2 .sheet.on{display:flex}
.v2 .sheet .box{position:relative;width:100%;max-height:88%;overflow:auto;background:var(--sheet);color:var(--text);border-radius:22px 22px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom))}
.v2 .sheet h3{margin:0 0 6px;font-size:18px;padding-right:40px}
.v2 .sheet p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 12px}
.v2 .sheet .x{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;background:var(--surface2);display:grid;place-items:center}
.v2 .sizes{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.v2 .sizes button{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:12px;background:var(--surface2);border:1px solid var(--line);font-weight:700;font-size:15px;text-align:left}
.v2 .sizes button.on{border-color:var(--primary);background:var(--primary-soft)}
.v2 .sizes button small{color:var(--muted);font-weight:600;font-size:12.5px}
.v2 .sizes button .p{margin-left:auto;font-weight:800}
.v2 .sizes .ic.ck{color:var(--primary)}
.v2 .newchip{font-size:10.5px;font-weight:800;color:var(--on-primary);background:var(--primary);border-radius:999px;padding:2px 7px}
.v2 .edhead{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.v2 .edhead .cancel{display:inline-flex;align-items:center;gap:2px;color:var(--muted);font-weight:700;font-size:14.5px;padding:8px 6px}
.v2 .edhead .navb{width:40px;height:40px;border-radius:50%;background:var(--surface2);display:grid;place-items:center}
.v2 .edhead .pos{font-size:13.5px;color:var(--muted);font-weight:700;margin:0 4px}
.v2 .edhead .btn{height:42px;padding:0 16px;margin-left:auto;font-size:15px}
.v2 .stage{flex:1;min-height:0;display:grid;place-items:center;padding:12px;background:var(--stage)}
.v2 .paper{position:relative;height:100%;max-height:100%;aspect-ratio:1181/1500;max-width:100%;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35);border-radius:2px;overflow:hidden}
.v2 .paper .motif{position:absolute;inset:0;display:none}
.v2 .paper .win{position:absolute;left:5.5%;top:7.07%;width:89%;height:72.47%;overflow:hidden;z-index:2}
.v2 .paper .txt{position:absolute;left:5.5%;right:5.5%;top:79.5%;bottom:0;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(14px,5.2vw,24px);line-height:1.15;white-space:pre-line;padding:0 4px}
.v2 .paper .txt.ph{opacity:.45;font-size:clamp(11px,3.6vw,15px);font-style:normal !important}
.v2 .tabs{flex:0 0 auto;display:flex;gap:2px;padding:6px;background:var(--surface);border-top:1px solid var(--line)}
.v2 .tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;color:var(--muted);font-size:11.5px;font-weight:700}
.v2 .tabs button.on{background:var(--primary-soft);color:var(--primary)}
.v2 .panel{flex:0 0 184px;overflow-y:auto;padding:12px 14px;background:var(--surface)}
.v2 .panel .pt{font-size:12.5px;color:var(--faint);font-weight:700;margin-bottom:8px}
.v2 .sw{display:flex;flex-wrap:wrap;gap:10px}
.v2 .sw button{width:36px;height:36px;border-radius:50%;border:2px solid var(--line)}
.v2 .sw button.on{border-color:var(--surface);box-shadow:0 0 0 3px var(--primary)}
.v2 .cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.v2 .cats button{border-radius:999px;border:1px solid var(--line);background:var(--surface2);padding:6px 10px;font-size:12.5px;font-weight:600}
.v2 .cats button.on{background:var(--primary);color:var(--on-primary);border-color:transparent;font-weight:800}
.v2 .motifs{display:flex;gap:8px;flex-wrap:wrap}
.v2 .motifs button{width:48px;height:60px;border-radius:8px;border:2px solid var(--line);overflow:hidden;position:relative;background:#fff;font-size:11px;color:#475569}
.v2 .motifs button.on{border-color:var(--surface);box-shadow:0 0 0 3px var(--primary)}
.v2 .motifs button i{position:absolute;left:10%;top:9%;width:80%;height:66%;background:#94a3b8}
.v2 textarea{width:100%;resize:none;border-radius:12px;border:1px solid var(--line);background:var(--surface2);color:var(--text);font:inherit;font-size:16px;padding:10px 12px}
.v2 .fonts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.v2 .fonts button{border-radius:10px;border:1px solid var(--line);background:var(--surface2);padding:6px 10px;font-size:15px}
.v2 .fonts button.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary)}
.v2 .segs{display:flex;gap:6px;flex-wrap:wrap}
.v2 .segs button{display:inline-flex;align-items:center;gap:5px;border-radius:10px;border:1px solid var(--line);background:var(--surface2);padding:8px 11px;font-size:13.5px;font-weight:700}
.v2 .segs button.on{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}
.v2 .zoomrow{display:flex;align-items:center;gap:10px;color:var(--muted)}
.v2 input[type=range]{width:100%;accent-color:var(--primary)}
.v2 .steps{display:flex;gap:6px;margin:2px 0 14px}
.v2 .steps div{flex:1;height:4px;border-radius:4px;background:var(--line)}
.v2 .steps div.on{background:var(--primary)}
.v2 .sum{display:flex;align-items:center;gap:8px;cursor:pointer}
.v2 .thumbs{display:flex}
.v2 .thumbs i{position:relative;width:32px;height:32px;border-radius:8px;border:2px solid var(--surface);margin-left:-9px;overflow:hidden}
.v2 .thumbs i:first-child{margin-left:0}
.v2 .sum .t{font-size:14px;line-height:1.3}
.v2 .sum .t small{color:var(--muted)}
.v2 .sum .tot{margin-left:auto;font-weight:800;font-size:18px}
.v2 .lines{display:none;margin-top:10px;border-top:1px solid var(--line);padding-top:8px;font-size:13.5px;color:var(--muted)}
.v2 .lines.on{display:block}
.v2 .lines div{display:flex;justify-content:space-between;padding:3px 0}
.v2 .seg2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:4px}
.v2 .seg2 + .seg2{margin-top:8px}
.v2 .seg2 button{display:flex;flex-direction:column;align-items:center;gap:1px;border-radius:10px;padding:9px 6px;font-size:14px;font-weight:700;color:var(--muted)}
.v2 .seg2 button .ic{font-size:20px}
.v2 .seg2 button.on{background:var(--surface);color:var(--text);box-shadow:0 0 0 1.5px var(--primary)}
.v2 .seg2 small{font-weight:500;font-size:11.5px;color:var(--faint);text-align:center;line-height:1.25}
.v2 .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.v2 .f{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.v2 .f label{font-size:13px;color:var(--muted);font-weight:600}
.v2 .f input{width:100%;min-width:0;height:48px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:0 12px;font:inherit;font-size:16px;color:var(--text)}
.v2 .autofill{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ok);margin:-2px 0 10px}
.v2 .idstage{flex:1;min-height:0;display:grid;place-items:center;background:var(--stage);padding:10px}
.v2 .idframe{position:relative;height:100%;max-height:100%;aspect-ratio:35/45;background:linear-gradient(180deg,#dbeafe,#bfdbfe);overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.v2 .idframe .face{position:absolute;left:50%;top:50%;width:46%;height:52%;transform:translate(-50%,-47%);border-radius:50%;background:#f1c7a4}
.v2 .idframe .face::before{content:"";position:absolute;left:-12%;right:-12%;top:-14%;height:42%;border-radius:50% 50% 30% 30%;background:#3b2a20}
.v2 .idframe .body{position:absolute;left:18%;right:18%;bottom:-6%;height:24%;border-radius:45% 45% 0 0;background:#334155}
.v2 .guide{position:absolute;left:0;right:0;border-top:2px dashed #10b981;font-size:10px;color:#047857;font-weight:700;text-align:right;padding-right:4px}
.v2 .oval{position:absolute;left:50%;top:48%;width:56%;height:66%;transform:translate(-50%,-50%);border:2px dashed rgba(255,255,255,.85);border-radius:50%}
.v2 .idtools{flex:0 0 auto;padding:10px 14px 6px;background:var(--surface)}
.v2 .tips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 2px}
.v2 .tips > span{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.v2 .tips .ic{font-size:16px}
.v2 .sizechip{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);margin-top:6px;flex-wrap:wrap}
.v2 .sizechip b{color:var(--text)}
.v2 .sizechip button{color:var(--primary);font-weight:700;font-size:13px;display:inline-flex;align-items:center}
.v2 .mm{display:none;gap:8px;align-items:center;margin-top:6px;font-size:13.5px}
.v2 .mm.on{display:flex}
.v2 .mm input{width:64px;height:40px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;color:var(--text);font:inherit;font-size:16px;text-align:center}
.v2 .twobtn{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.v2 .twobtn .btn{height:44px;font-size:14px;padding:0 10px}
.v2 .quad{background:#fff;width:46%;margin:0 auto 12px;aspect-ratio:2/3;border-radius:4px;display:grid;grid-template-columns:repeat(2,1fr);align-content:center;gap:4%;padding:12% 10%;box-shadow:0 6px 18px rgba(0,0,0,.18);border:1px solid var(--line)}
.v2 .quad i{position:relative;aspect-ratio:35/45;background:linear-gradient(180deg,#dbeafe,#bfdbfe);border:1px solid #111;overflow:hidden}
.v2 .quad i::after{content:"";position:absolute;left:28%;top:20%;width:44%;height:50%;border-radius:50%;background:#f1c7a4}
.v2 .dots{display:flex;gap:5px;justify-content:center;padding:10px 0 0}
.v2 .dots i{width:7px;height:7px;border-radius:4px;background:var(--line)}
.v2 .dots i.on{width:22px;background:var(--primary)}
.v2 .rules{display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.4}
.v2 .rules div{display:flex;gap:10px;align-items:flex-start}
.v2 .rules .ic{color:var(--primary);font-size:21px;flex:0 0 auto}
.v2 .mpphoto{position:relative;width:42%;margin:6px auto 12px;aspect-ratio:3/4;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.v2 .warn{display:flex;gap:10px;border:1px solid var(--warn);background:var(--warn-soft);border-radius:14px;padding:12px;font-size:14px;line-height:1.45}
.v2 .warn .ic{color:var(--warn)}
.v2 .warn b{color:var(--warn)}
.v2 .sigbox{position:relative;width:100%;aspect-ratio:3/1;background:#fff;border:2px dashed var(--line);border-radius:14px;display:grid;place-items:center;color:#64748b;font-weight:700;font-size:15px;cursor:pointer;overflow:hidden}
.v2 .sigbox .inner{display:flex;align-items:center;gap:6px}
.v2 .sigbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.v2 .sigfull{position:absolute;inset:0;z-index:90;background:var(--surface);display:none;flex-direction:column}
.v2 .sigfull.on{display:flex}
.v2 .sigfull .bar{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.v2 .sigfull .bar .btn{height:40px;font-size:14px;padding:0 14px}
.v2 .sigfull canvas{flex:1;width:100%;height:100%;min-width:0;min-height:0;background:#f8fafc;touch-action:none;display:block}
.v2 .sigfull .hintl{position:absolute;left:0;right:0;top:54%;text-align:center;color:#94a3b8;font-size:13.5px;pointer-events:none}
.v2 .sigfull .line{position:absolute;left:8%;right:8%;top:70%;border-top:2px dashed #94a3b8;pointer-events:none}
.v2 .scrimd{position:absolute;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60}
.v2 .scrimd.on{opacity:1;pointer-events:auto}
.v2 .drawer{position:absolute;top:0;bottom:0;left:0;width:86%;max-width:340px;background:var(--surface);color:var(--text);z-index:61;transform:translateX(-102%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:8px 0 30px rgba(0,0,0,.25)}
.v2 .drawer.on{transform:none}
.v2 .drawer .dhead{display:flex;align-items:center;gap:8px;padding:14px 14px 10px}
.v2 .drawer .dscroll{flex:1;overflow-y:auto;padding:0 12px 16px}
.v2 .dcode{background:var(--primary-soft);border-radius:16px;padding:12px;margin:2px 2px 6px}
.v2 .dcode .t{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.v2 .dcode b{display:block;font-family:ui-monospace,monospace;font-size:22px;letter-spacing:4px;color:var(--primary);margin:2px 0 8px}
.v2 .dcode .acts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.v2 .dcode .acts button{height:38px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.v2 .dlbl{font-size:12px;color:var(--faint);font-weight:700;margin:16px 6px 6px;letter-spacing:.3px}
.v2 .ditem{display:flex;align-items:center;gap:12px;width:100%;height:50px;padding:0 10px;border-radius:12px;font-size:15.5px;font-weight:600;text-align:left}
.v2 .ditem:active, .v2 .ditem.on{background:var(--surface2)}
.v2 .ditem .ic{color:var(--primary)}
.v2 .ditem .r{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:700;display:inline-flex;align-items:center;gap:4px}
.v2 .ditem .newchip{margin-left:auto}
.v2 .dsoon{display:flex;flex-wrap:wrap;gap:6px;padding:2px 6px}
.v2 .dsoon > span{font-size:12px;color:var(--faint);border:1px dashed var(--line);border-radius:999px;padding:4px 9px}
.v2 .ddanger{display:flex;align-items:center;gap:8px;margin:14px 8px 0;color:var(--danger);font-weight:700;font-size:14px}
.v2 .dfoot{padding:10px 18px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--faint);display:flex;gap:12px}
.v2 .dfoot a{color:var(--faint)}
.v2 .contact{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.v2 .contact a{display:flex;align-items:center;gap:12px;height:56px;padding:0 14px;border-radius:14px;background:var(--surface2);border:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:700}
.v2 .contact a small{display:block;font-weight:500;color:var(--muted);font-size:12.5px}
.v2 .contact .ic{color:var(--primary)}
.v2 .openchip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;border-radius:999px;padding:5px 10px}
.v2 .openchip.yes{background:rgba(16,185,129,.14);color:var(--ok)}
.v2 .openchip.no{background:rgba(244,63,94,.12);color:var(--danger)}
.v2 .openchip i{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.v2 .hours{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0 4px}
.v2 .hours td{padding:6px 2px;border-bottom:1px solid var(--line)}
.v2 .hours td:last-child{text-align:right;color:var(--muted)}
.v2 .hours tr.today td{font-weight:800;color:var(--text)}
.v2 .ditem .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:2px}
.v2 .brand2{display:flex;flex-direction:column;line-height:1.05}
.v2 .brand2 .l{font-weight:800;font-size:18px;letter-spacing:-.2px}
.v2 .brand2 .l b{color:var(--primary)}
.v2 .brand2 small{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px}
.v2 a.btn{text-decoration:none}
.v2 .terms{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:2px;margin:0 0 14px;box-shadow:var(--shadow)}
.v2 .terms label{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;font-size:15px;font-weight:600;cursor:pointer}
.v2 .terms input{position:absolute;opacity:0;pointer-events:none}
.v2 .terms .bx{flex:0 0 28px;height:28px;border-radius:8px;border:2px solid var(--muted);display:grid;place-items:center;color:transparent;transition:background .15s}
.v2 .terms input:checked + .bx{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.v2 .terms a{color:var(--primary);font-weight:800}
.v2 .terms .tmsg{display:none;color:var(--danger);font-size:13px;font-weight:700;padding:0 12px 10px 52px}
.v2 .terms.need{border-color:var(--danger);animation:shake .4s}
.v2 .terms.need .tmsg{display:block}
.v2 .terms.ok{border-color:var(--ok)}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.v2 .rev{display:flex;align-items:center;gap:10px;margin-top:10px;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--text);text-decoration:none;font-size:14px;font-weight:700}
.v2 .rev small{display:block;color:var(--muted);font-weight:500;font-size:12px}
.v2 .legal{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;line-height:1.65;color:var(--muted);text-align:center}
.v2 .legal a{color:var(--muted)}
.v2 .legal b{color:var(--text)}
.v2 .codein{width:100%;height:56px;border-radius:14px;border:1px solid var(--line);background:var(--surface2);color:var(--text);font:inherit;font-family:ui-monospace,monospace;font-size:24px;letter-spacing:6px;text-align:center;text-transform:uppercase;margin-bottom:10px}
.v2 .deal{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--primary-soft);font-size:13.5px;border-top:1px solid var(--line)}
.v2 .deal .ic{color:var(--primary)}
.v2 .deal.done .ic{color:var(--ok)}
.v2 .offline{display:none;flex:0 0 auto;align-items:center;gap:8px;padding:9px 14px;background:var(--warn-soft);color:var(--warn);font-size:13px;font-weight:700;border-bottom:1px solid var(--line)}
.v2 .offline.on{display:flex}
.v2 .dupth{position:relative;flex:0 0 64px;height:64px;border-radius:10px;overflow:hidden}
.v2 .autoface{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--ok);background:rgba(16,185,129,.12);border-radius:999px;padding:4px 10px;margin-bottom:8px}
.v2 .readyline{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--text);background:rgba(16,185,129,.10);border-radius:12px;padding:10px 12px}
.v2 .readyline .ic{color:var(--ok)}
.v2 .fine{display:flex;gap:8px;font-size:12.5px;line-height:1.5;color:var(--muted);margin:14px 2px 0}
.v2 .fine .ic{color:var(--faint);flex:0 0 auto}
.v2 .fine a{color:var(--primary)}
.v2 .paylogos{display:flex;gap:6px;justify-content:center;margin-top:8px}
.v2 .paylogos span{font-size:11.5px;font-weight:800;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 7px;background:var(--surface)}
.v2 .done{text-align:center;padding:10px 0 4px}
.v2 .done > .ic{font-size:64px;color:var(--ok)}
.v2 .readyrow{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4}
.v2 .readyrow .ic{color:var(--ok);font-size:26px}
.v2 .readyrow small{color:var(--muted);font-size:13px}
.v2 .mail{border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14px;line-height:1.55}
.v2 .mail .mh{background:var(--surface2);padding:10px 12px;font-size:12.5px;color:var(--muted)}
.v2 .mail .mh b{color:var(--text)}
.v2 .mail .mb{padding:12px;color:var(--text)}
.v2 .idph{position:absolute;left:0;right:0;bottom:4%;text-align:center;font-size:12px;color:#1e3a8a;font-weight:800;padding:0 8px}
.v2 .idframe.empty #idphoto, .v2 .idframe.empty .guide{display:none}
.v2 .legalmini{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0;line-height:1.5}
.v2 .pv{display:block;width:44px;height:30px;border-radius:3px;position:relative;overflow:hidden;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);margin-bottom:4px}
.v2 .pv i{position:absolute;inset:0;background:linear-gradient(180deg,#f59e0b,#f97316 40%,#7c3aed 41%,#1e3a8a)}
.v2 .pv.bord i{inset:4px}
.v2 .pv.gloss::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 28%,rgba(255,255,255,.7) 44%,transparent 58%)}
.v2 .pv.matte i{filter:saturate(.75) brightness(.95) contrast(.9)}
.v2 .locker{margin-top:10px}
.v2 .locker .pick{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;border-radius:14px;border:2px dashed #16a34a;background:rgba(22,163,74,.08);color:#15803d;font-weight:800;font-size:15px}
.v2 .locker .pick.need{animation:shake .4s;border-color:var(--danger);color:var(--danger)}
.v2 .locker .chosen{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;border:1.5px solid #16a34a;background:rgba(22,163,74,.08);font-size:14px;line-height:1.35}
.v2 .locker .chosen .ic{color:#16a34a}
.v2 .locker .chosen small{color:var(--muted)}
.v2 .locker .chosen button{margin-left:auto;color:var(--primary);font-weight:800;font-size:13.5px;padding:8px 4px}
.v2 .seg2 button[disabled]{opacity:.5}
.v2 .storenote{display:none;align-items:flex-start;gap:8px;margin-top:10px;font-size:13.5px;line-height:1.45;background:var(--primary-soft);border-radius:12px;padding:10px 12px}
.v2 .storenote.on{display:flex}
.v2 .storenote .ic{color:var(--primary)}
.v2 .lr{position:absolute;left:6px;top:6px;z-index:2;display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:800;padding:5px 9px;border-radius:999px;background:#f59e0b;color:#1b1400;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.v2 .lr.bad{background:#e11d48;color:#fff}
.v2 .lr .ic{font-size:15px}
.v2 .lrt{font-size:11px;font-weight:800;color:#b45309;background:var(--warn-soft);border-radius:999px;padding:2px 7px;margin-left:6px}
.v2 .lrt.bad{color:var(--danger);background:rgba(225,29,72,.1)}
.v2 .edlr{display:none;flex:0 0 auto;align-items:center;gap:8px;padding:9px 12px;font-size:13px;font-weight:700;background:rgba(245,158,11,.16);color:#fbbf24;border-top:1px solid var(--line);cursor:pointer}
.v2 .edlr.on{display:flex}
.v2 .edlr.bad{background:rgba(225,29,72,.18);color:#fb7185}
.v2 .addsize{font-size:12.5px;font-weight:700;color:var(--primary);text-align:center;padding:7px 0 3px}
.v2 .upl{display:none;margin-bottom:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:13.5px;font-weight:700}
.v2 .upl.on{display:block}
.v2 .pbar{height:8px;border-radius:8px;background:var(--surface2);overflow:hidden;margin-top:8px}
.v2 .pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary2));transition:width .15s}
.v2 .delimg{position:relative;width:62%;aspect-ratio:3/2;margin:4px auto 12px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.v2 .zl{font-size:12px;min-width:40px;text-align:right;color:var(--muted)}
.v2 .swc{position:relative;width:36px;height:36px;border-radius:50%;border:2px solid var(--line);background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);overflow:hidden;cursor:pointer}
.v2 .swc input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.v2 .polall{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:13.5px;font-weight:800;color:var(--primary);padding:6px 0}
.v2 .chk{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:14px;line-height:1.4;cursor:pointer;color:var(--text)}
.v2 .chk input{width:20px;height:20px;accent-color:var(--primary);flex:0 0 auto;margin:0}
.v2 .ferr{display:none;color:var(--danger);font-size:12.5px;font-weight:700}
.v2 .f.bad input{border-color:var(--danger);box-shadow:0 0 0 2px rgba(225,29,72,.12)}
.v2 .f.bad .ferr{display:block}
.v2 .dmail{width:100%;height:38px;margin-top:6px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.v2 .ptag{display:inline-block;font-size:12px;font-weight:800;color:var(--primary);background:var(--primary-soft);border-radius:999px;padding:3px 10px;margin-bottom:6px}
.v2 .ageopt{display:block;width:100%;text-align:left;position:relative;padding:14px 16px;border-radius:16px;border:1.5px solid var(--line);background:var(--surface);margin-bottom:10px;box-shadow:var(--shadow)}
.v2 .ageopt.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.v2 .ageopt b{display:block;font-size:16px;padding-right:80px}
.v2 .ageopt .d{display:block;color:var(--muted);font-size:13px;margin-top:3px;line-height:1.4;padding-right:70px}
.v2 .ageopt .ap{position:absolute;right:14px;top:14px;font-weight:800;font-size:17px}
.v2 .ageopt .ap s{color:var(--faint);font-weight:500;font-size:13px;margin-right:4px}
.v2 .ageopt.sm{padding:11px 14px}
.v2 .ageopt.sm b{font-size:14.5px}
.v2 .kidinfo{font-size:13px;line-height:1.5;background:var(--primary-soft);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.v2 .person{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer}
.v2 .person .ph{position:relative;flex:0 0 46px;height:58px;border-radius:8px;overflow:hidden}
.v2 .person .t{flex:1;min-width:0;font-size:14px;line-height:1.35}
.v2 .person .t small{color:var(--muted)}
.v2 .person .pr{font-weight:800;white-space:nowrap;text-align:right}
.v2 .person .pr s{display:block;color:var(--faint);font-weight:500;font-size:12px}
.v2 .person .rm{width:40px;height:40px;display:grid;place-items:center;color:var(--danger)}
.v2 .okbox{display:flex;gap:10px;border:1px solid var(--ok);background:rgba(16,185,129,.10);border-radius:14px;padding:12px;font-size:14px;line-height:1.45}
.v2 .okbox .ic{color:var(--ok)}
.v2 .qbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;font-size:14px}
.v2 .qbox div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--muted)}
.v2 .qbox div.tot{color:var(--text);font-weight:800;border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-size:15.5px}
.v2 .qbox div.h{color:var(--text);font-weight:800;margin-top:6px}
.v2 .gdpr{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:12px;border:1.5px solid var(--line);font-size:13.5px;line-height:1.45;margin-top:6px;background:var(--surface)}
.v2 .gdpr input{width:24px;height:24px;accent-color:var(--primary);flex:0 0 auto;margin:0}
.v2 .gdpr.miss{border-color:var(--danger);animation:shake .4s}
.v2 .gdpr a{color:var(--primary)}
.v2 .mpprog{display:none;margin:8px 0 4px}
.v2 .mpprog.on{display:block}
.v2 .mpprog small{color:var(--muted);font-size:13px;font-weight:700}
.v2 .cam{position:absolute;inset:0;z-index:90;background:#000;display:none;flex-direction:column}
.v2 .cam.on{display:flex}
.v2 .cam .vid{position:relative;flex:1;overflow:hidden}
.v2 .cam .vid .pic{transition:transform .4s}
.v2 .cam .ov{position:absolute;left:50%;top:44%;width:58%;height:50%;transform:translate(-50%,-50%);border:3px solid rgba(255,255,255,.9);border-radius:50%;box-shadow:0 0 0 2000px rgba(0,0,0,.45);transition:border-color .3s}
.v2 .cam .ov.good{border-color:#34d399}
.v2 .cam .guide2{position:absolute;left:0;right:0;top:14px;text-align:center;color:#fff;font-weight:800;font-size:16px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.v2 .cam .x{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center}
.v2 .cam .zm{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px}
.v2 .cam .zm button{width:42px;height:42px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:13px}
.v2 .cam .zm button.on{background:#fff;color:#000}
.v2 .cam .cbar{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0 calc(18px + env(safe-area-inset-bottom));background:#000;color:#cbd5e1;font-size:13.5px}
.v2 .cam .shoot{width:70px;height:70px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.35)}
.v2 .lrfilter{display:none;align-items:center;gap:8px;margin-bottom:12px;padding:10px 12px;border-radius:14px;border:1px solid var(--warn);background:var(--warn-soft);font-size:13.5px;line-height:1.4}
.v2 .lrfilter.on{display:flex}
.v2 .lrfilter .ic{color:var(--warn)}
.v2 .lrfilter button{margin-left:auto;flex:0 0 auto;height:36px;padding:0 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);font-weight:800;font-size:13px}
.v2 .savechip{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 4px 4px 12px;margin-bottom:10px;cursor:pointer}
.v2 .savechip .ok{color:var(--ok)}
.v2 .savechip .go{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--primary);display:inline-flex;align-items:center;padding:8px 4px}
.v2 .firstcard{position:relative;background:var(--surface);border:1.5px solid var(--ok);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.v2 .firstcard h4{margin:0 0 4px;font-size:15.5px;display:flex;align-items:center;gap:6px;padding-right:30px}
.v2 .firstcard p{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.45}
.v2 .firstcard .x{position:absolute;right:4px;top:4px;width:40px;height:40px;display:grid;place-items:center;color:var(--muted)}
.v2 .two2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.v2 .two2 .btn{height:44px;font-size:14px;padding:0 8px}
.v2 .opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border-radius:14px;background:var(--surface2);border:1px solid var(--line);margin-bottom:8px}
.v2 .opt > .ic{font-size:28px;color:var(--primary)}
.v2 .opt b{display:block;font-size:15.5px}
.v2 .opt small{color:var(--muted);font-size:12.5px}
.v2 .sharemsg{background:var(--surface2);border:1px solid var(--line);border-radius:14px;padding:12px;font-size:14px;line-height:1.5;margin-bottom:12px}
.v2 .sharemsg a{color:var(--primary);font-weight:800;text-decoration:none}
.v2 .apps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.v2 .apps button{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--muted)}
.v2 .apps button i{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800;font-size:19px}
.v2 .qr{width:172px;height:172px;margin:6px auto 6px;background:#fff;padding:8px;border-radius:12px;border:1px solid var(--line)}
.v2 .joinb{background:linear-gradient(135deg,var(--primary),var(--primary2));color:var(--on-primary);border-radius:16px;padding:14px;margin-bottom:14px}
.v2 .joinb b{font-size:16px}
.v2 .joinb p{margin:4px 0 10px;font-size:13.5px;opacity:.92;line-height:1.4}
.v2 .joinb .btn{background:#fff;color:#2b1d6b;height:46px;width:100%}
.v2 .backb{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px 12px;background:var(--surface);border:1.5px solid var(--primary);border-radius:16px;padding:12px;margin-bottom:14px;box-shadow:var(--shadow)}
.v2 .pres{display:inline-flex;align-items:center;gap:3px;height:32px;padding:0 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-weight:800;font-size:13px}
.v2 .syncs{display:none;flex:0 0 auto;align-items:center;gap:8px;padding:9px 14px;background:var(--primary-soft);color:var(--primary);font-size:13px;font-weight:800;border-bottom:1px solid var(--line);cursor:pointer}
.v2 .syncs.on{display:flex}
.v2 .toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);background:#111827;color:#fff;padding:10px 14px;border-radius:12px;font-size:13.5px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;z-index:95;display:flex;align-items:center;gap:6px}
.v2 .toast.on{opacity:1}

/* ===================================================================================================
   ΚΕΛΥΦΟΣ ΕΦΑΡΜΟΓΗΣ (όχι από τη μακέτα — η μακέτα είναι ένα «κινητό» 430px· εδώ είναι η πραγματική σελίδα)
   body.on-v2 = φαίνεται οθόνη της ΝΕΑΣ εμφάνισης: κρύβεται η παλιά κοινή μπάρα (κάθε νέα οθόνη έχει δική της)
   και η σελίδα γίνεται φωτεινή. Το βάζει/βγάζει το app.js (_hideAllSteps / showChooser).
   =================================================================================================== */
body.on-v2 { background: #f5f6fa; }
body.on-v2 .app-container > .header { display: none; }
.v2screen { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; position: relative;
            background: var(--bg); color: var(--text); font-family: 'Manrope', system-ui, sans-serif; }
.v2screen.hidden { display: none !important; }
.v2 .wrap { max-width: 560px; margin: 0 auto; }
.v2 header.top > * { flex-shrink: 0; }
.v2 header.top .brand2 { flex-shrink: 1; min-width: 0; }
.v2 a { color: var(--primary); }
.v2 h1, .v2 h2, .v2 h3 { font-family: 'Manrope', system-ui, sans-serif; }
.v2 .hero, .v2 .row { color: var(--text); font: inherit; cursor: pointer; }
.v2 .row > div:nth-child(2) { min-width: 0; }
.v2 .price s { display: block; color: var(--faint); font-size: 12px; font-weight: 500; }
.v2 .onl { display: inline-block; vertical-align: 2px; font-size: 11px; font-weight: 800; color: var(--primary);
           background: var(--primary-soft); border-radius: 999px; padding: 2px 8px; margin-left: 4px; }
.v2 .soon > button { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--faint);
                     border: 1px dashed var(--line); border-radius: 999px; padding: 6px 10px; }
.v2 .rev .stars { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.v2 .rev .stars b { font-size: 22px; }
.v2 .rev .stars span { color: #f59e0b; font-size: 12px; letter-spacing: 1px; }
.v2 .rev .chev { margin-left: auto; }
.v2 .codelink { display: flex; margin: 12px auto 0; }
.v2 .backb .ic { color: var(--primary); font-size: 30px; }
.v2 .backb .t { flex: 1; font-size: 14px; line-height: 1.4; }
.v2 .backb .btn { height: 44px; padding: 0 14px; grid-column: 1 / -1; width: 100%; }   /* μήνυμα πάνω, «Συνέχεια» κάτω σε όλο το πλάτος (25/10: το κείμενο «έσπαγε» δίπλα στο κουμπί) */
/* Κουτάκι Όρων: το πραγματικό checkbox ΑΠΟ ΠΑΝΩ από το σχέδιο (διάφανο) -> πατιέται κανονικά και με το δάχτυλο
   και από τα αυτόματα τεστ, και το διαβάζουν σωστά οι αναγνώστες οθόνης. */
.v2 .terms label { position: relative; }
.v2 .terms input { position: absolute; left: 12px; top: 50%; width: 30px; height: 30px; margin: -15px 0 0;
                   opacity: 0; pointer-events: auto; cursor: pointer; z-index: 1; }
.v2 .terms input:focus-visible + .bx { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Παράθυρα από κάτω: πάνω από ΟΛΗ τη σελίδα (όχι μόνο την οθόνη), το κουτί στο κέντρο σε υπολογιστή */
.v2 .sheet { position: fixed; z-index: 1000; }
.v2 .sheet .box { max-width: 560px; margin: 0 auto; }
@media (min-width: 600px) { .v2 .sheet { align-items: center; } .v2 .sheet .box { border-radius: 22px; } }

/* ===== Μενού (drawer) & Επικοινωνία: σταθερά πάνω από ΟΛΗ τη σελίδα, όποια οθόνη κι αν φαίνεται ===== */
.v2 .scrimd, .v2 .drawer { position: fixed; }
.v2 .scrimd { z-index: 900; }
.v2 .drawer { z-index: 901; font-family: 'Manrope', system-ui, sans-serif; }
.v2 .drawer button { text-align: left; }
.v2 .drawer .dcode .acts button, .v2 .drawer .dmail { color: var(--text); }
.v2 .drawer .dcode .t .ic { color: var(--ok); }
.v2 .drawer .ddanger { padding: 6px 2px; }
.v2 .dfoot { flex-wrap: wrap; }
.v2 .dfoot .dlegal { flex-basis: 100%; margin-top: 4px; }
.v2 .ditem .r .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 2px; }
.v2 #contactSheet .openchip { margin-bottom: 4px; }

/* ===================================================================================================
   ΛΙΣΤΑ ΦΩΤΟΓΡΑΦΙΩΝ (#stepWorkspace). Με #id ώστε να «κερδίζει» τους παλιούς κανόνες του main.css (.tile κ.λπ.)
   που ισχύουν ακόμη αλλού. Τα ονόματα κλάσεων (tile-img-box, qty-btn…) μένουν: τα χρησιμοποιούν κώδικας και τεστ.
   =================================================================================================== */
#stepWorkspace .scroll { padding-bottom: 16px; }
#stepWorkspace #uploadProgress { display: none; width: auto; height: auto; position: static; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px; font-weight: 700; overflow: visible; }
#stepWorkspace #uploadText { position: static; display: block; color: var(--text); text-shadow: none; font-size: 13.5px; }
#stepWorkspace #uploadBar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--primary2)); transition: width .25s; }
#stepWorkspace .addbar { position: static; width: 100%; max-width: none; text-transform: none; letter-spacing: 0; backdrop-filter: none;
  box-shadow: none; margin: 0 0 12px; padding: 0; font-size: 15px; }
#stepWorkspace .addbar small { margin-left: 2px; }
#stepWorkspace #gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 0; }
#stepWorkspace .tile { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transform: none; cursor: default; }
#stepWorkspace .tile:hover { transform: none; }
#stepWorkspace .tile-img-box { cursor: pointer; background-color: #f0f2f7; }
#stepWorkspace .tile-img-box.skeleton::before { background: linear-gradient(90deg, #eceff5 25%, #f6f7fb 50%, #eceff5 75%); background-size: 200% 100%; }
#stepWorkspace .hint-overlay { inset: auto 6px 6px 6px; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); border-radius: 9px;
  font-size: 12px; font-weight: 700; padding: 5px 7px; gap: 4px; }
#stepWorkspace .btn-delete-tile { top: 6px; right: 6px; width: 38px; height: 38px; opacity: 1; background: rgba(0,0,0,.5); color: #fff;
  border: 0; backdrop-filter: none; }
#stepWorkspace .tile-controls { background: var(--surface); border-top: 0; padding: 8px; gap: 6px; }
#stepWorkspace .size-pill { width: 100%; justify-content: space-between; color: var(--text); font-family: inherit; }
#stepWorkspace .size-pill em { margin-left: auto; margin-right: 2px; }
#stepWorkspace .tile .r { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
#stepWorkspace .qty-group { width: auto; padding: 0; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; height: 40px; }
#stepWorkspace .qty-btn { width: 38px; height: 100%; color: var(--text); font-size: inherit; }
#stepWorkspace .qty-btn:active { background: var(--primary-soft); }
#stepWorkspace .qty-val { flex: 0 0 auto; min-width: 22px; color: var(--primary); font-weight: 800; font-size: 15px; }
#stepWorkspace .sumline { font-size: 14px; white-space: nowrap; }
#stepWorkspace .btn-add-size { border: 0; background: none; color: var(--primary); font-weight: 700; font-size: 12.5px; padding: 6px 0 2px; margin: 0; }
#stepWorkspace .btn-add-size:hover { background: none; color: var(--primary2); }
#stepWorkspace .lowres-badge { z-index: 5; }
/* τετράδες ταυτότητας στο καλάθι */
#stepWorkspace #idExtras { margin-bottom: 12px; }
#stepWorkspace .extra-row { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--text); }
#stepWorkspace .extra-info div { color: var(--muted); }
#stepWorkspace .btn-delete-extra { color: var(--danger); background: none; border: 0; }
/* μπάρα-δελτίο */
#stepWorkspace .slip .btn { margin-left: auto; }
#stepWorkspace .slip .info b { font-variant-numeric: tabular-nums; }
.v2 .sizes button .lrt { margin-left: 6px; }
.v2 .sizes button .ic.ck { margin-right: -2px; }
/* Η κάρτα «Αποθηκεύεται αυτόματα»: ακυρώνει τον παλιό μονόγραμμο .save-nudge του main.css (αλλιώς φαρδαίνει την οθόνη) */
#stepWorkspace .save-nudge { display: block; width: auto; max-width: none; margin: 0 0 12px; padding: 14px; background: var(--surface); border: 1.5px solid var(--ok); }
#stepWorkspace .save-nudge.hidden { display: none; }
#stepWorkspace .save-nudge .sn-text { flex: 1 1 auto; min-width: 0; font-size: inherit; color: var(--text); white-space: normal; overflow: visible; }
#stepWorkspace .save-nudge .sn-text b { color: var(--primary); font-family: inherit; letter-spacing: 1px; font-size: inherit; }
#stepWorkspace .save-nudge .sn-info { width: auto; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface2);
  color: var(--text); font-style: normal; font-family: inherit; font-size: 14px; padding: 0 8px; gap: 8px; }
#stepWorkspace .save-nudge .sn-close { padding: 0; font-size: inherit; color: var(--muted); }
#stepWorkspace #gallery { grid-template-columns: repeat(auto-fill, minmax(min(150px, calc(50% - 6px)), 1fr)); }
#stepWorkspace .tile, #stepWorkspace .allrow > * { min-width: 0; }
#stepWorkspace .allrow { flex-wrap: wrap; }
#stepWorkspace .slip .app-cart { flex: 0 1 auto; min-width: 0; margin-left: auto; border-radius: 14px; padding: 0 20px; font-size: 15.5px; border: 0; }
#stepWorkspace .empty .btn .ic { font-size: 22px; color: inherit; }
#stepWorkspace .save-nudge h4 { flex-wrap: wrap; }
/* ===================================================================================================
   EDITOR (#editorModal) — όλη η οθόνη, σκούρο. Με #id ώστε να «κερδίζει» τα παλιά .editor-sheet/.ed-stage του main.css.
   =================================================================================================== */
#editorModal .v2ed { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--text);
  font-family: 'Manrope', system-ui, sans-serif; overflow: hidden; }
#editorModal .edhead { padding-top: calc(8px + env(safe-area-inset-top)); }
#editorModal .edhead .navb:disabled { opacity: .3; }
#editorModal .edhead .pos:empty { display: none; }
#editorModal .ed-stage { flex: 1 1 auto; height: auto; min-height: 0; }
#editorModal .ed-lowres { flex: 0 0 auto; margin: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line); padding: 9px 12px; font-size: 13px; }
#editorModal .panel { flex: 0 0 auto; height: clamp(170px, 32vh, 270px); max-height: none; overflow-y: auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); gap: 0; display: block; }
#editorModal .edp { display: none; }
#editorModal .edp.on { display: flex; flex-direction: column; gap: 10px; }
#editorModal .tabs button.pol-only { display: none; }
#editorModal .v2ed.is-pol .tabs button.pol-only { display: flex; }
#editorModal .pt { font-size: 12.5px; color: var(--faint); font-weight: 700; margin: 0; }
#editorModal .zoomrow input[type=range] { flex: 1; accent-color: var(--primary); }
#editorModal .zoomrow .zl { font-size: 12.5px; min-width: 40px; text-align: right; }
/* φίλτρα + κουμπιά κάδρου ως «segs» (ξεπερνά τα παλιά .filter-btn/.btn-toggle-fit) */
#editorModal .segs .filter-btn, #editorModal .segs .btn-toggle-fit { flex: 0 0 auto; width: auto; margin: 0; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface2); color: var(--text); padding: 8px 11px; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
#editorModal .segs .filter-btn.active, #editorModal .segs .btn-toggle-fit.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
#editorModal .filter-btn-group { overflow: visible; margin: 0; }
#editorModal .bgrow { display: none; align-items: center; gap: 10px; }
#editorModal .bgrow.on { display: flex; }
#editorModal .bgrow input[type=color] { width: 44px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; }
/* polaroid */
#editorModal #edPolRow { flex-direction: column; gap: 10px; }
#editorModal #edPolRow .pol-sw { width: 34px; height: 34px; border-color: var(--line); }
#editorModal #edPolRow .pol-sw.on { border-color: var(--surface); box-shadow: 0 0 0 3px var(--primary); }
#editorModal .pol-text { width: 100%; background: var(--surface2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; }
#editorModal .pol-all { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 13.5px; }
/* μέγεθος + ποσότητα */
#editorModal #edSize { width: 100%; height: 46px; border-radius: 12px; background: var(--surface2); color: var(--text); border: 1px solid var(--line); padding: 0 12px; font: inherit; font-weight: 700; font-size: 15px; }
#editorModal .qtyrow { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
#editorModal .qtyrow #edQtyVal { min-width: 26px; text-align: center; font-weight: 800; color: var(--primary); }
#editorModal .v2ed:not([data-tab=frame]):not([data-tab=motif]):not([data-tab=text]) #edPolAll { display: none; }
#editorModal .tabs button { font-family: inherit; }
#editorModal .edhead .btn { width: auto; flex: 0 0 auto; padding: 0 16px; }
#editorModal .edhead .cancel { flex: 0 0 auto; }
/* ===================================================================================================
   ΤΑΜΕΙΟ (#stepDetails). Τα ίδια στοιχεία με πριν (option-card / radio-option με input) ντυμένα ως «seg2» της μακέτας.
   =================================================================================================== */
#stepDetails .card h4 .h4sub { font-weight: 500; color: var(--faint); }
#stepDetails .seg2 > .option-card, #stepDetails .seg2 > .radio-option { display: flex; flex-direction: column; align-items: center; gap: 1px;
  border-radius: 10px; padding: 9px 6px; font-size: 14px; font-weight: 700; color: var(--muted); background: none; border: 0; margin: 0;
  width: auto; min-width: 0; cursor: pointer; text-align: center; box-shadow: none; }
#stepDetails .seg2 > .option-card.selected, #stepDetails .seg2 > .radio-option.active, #stepDetails .seg2 > .radio-option.active-boxnow {
  background: var(--surface); color: var(--text); box-shadow: 0 0 0 1.5px var(--primary); }
#stepDetails .seg2 > .radio-option.active-boxnow { box-shadow: 0 0 0 1.5px #16a34a; }
#stepDetails .seg2 .radio-option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
#stepDetails .seg2 .radio-text { color: inherit; font-size: inherit; font-weight: inherit; }
#stepDetails .seg2 .radio-option .ic { font-size: 20px; }
#stepDetails #ckLines > #costBreakdown { display: block; padding: 0; }
#stepDetails #ckLines > #costBreakdown > div { display: flex; justify-content: space-between; padding: 3px 0; margin: 0 !important; font-size: inherit !important; }
#stepDetails .thumbs i { background-size: cover; background-position: center; background-color: var(--surface2); }
#stepDetails .lowres-summary { margin: 12px 0 0; border-radius: 14px; color: var(--text); }
#stepDetails .lowres-summary .lowres-see { width: auto; height: 40px; margin-top: 10px; padding: 0 14px; font-size: 13.5px; }
#stepDetails #detailsForm > .card, #stepDetails #custForm { margin-top: 12px; }
#stepDetails .f textarea { width: 100%; min-width: 0; background: var(--surface2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px;
  font: inherit; font-size: 16px; color: var(--text); resize: vertical; }
#stepDetails .f input.invalid { border-color: var(--danger); }
#stepDetails .input-error-msg { font-size: 12.5px; margin-top: 0; }
/* BoxNow: η περιοχή του χάρτη (η λογική/iframe όπως πριν) */
#stepDetails .boxnow-widget-container { margin-top: 10px; padding: 0; background: none; border: 0; }
#stepDetails .bn-label { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
#stepDetails .boxnow-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; border-radius: 14px;
  border: 2px dashed #16a34a; background: rgba(22,163,74,.08); color: #15803d; font-weight: 800; font-size: 15px; text-transform: none; }
#stepDetails .bn-test { margin-top: 10px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; font-size: 12.5px; color: var(--muted); }
#stepDetails .bn-test input { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface2); color: var(--text); }
#stepDetails .bn-test .btn { flex: 0 0 auto; width: auto; height: 40px; padding: 0 14px; font-size: 14px; }   /* όχι όλο το πλάτος: αλλιώς το κουτί του αριθμού «ζουλιόταν» σε οβάλ (26/10) */
#stepDetails .storenote.hidden { display: none; }
#stepDetails #payMethodSection:not(.hidden) + .paylogos { margin-top: 12px; }
#stepDetails .paylogos { flex-wrap: wrap; margin-top: 0; }
#stepDetails .slip .btn { margin-left: auto; flex: 0 1 auto; min-width: 0; width: auto; }
#stepDetails .slip .info b { font-variant-numeric: tabular-nums; }
#stepDetails #processingSpotlight { padding: 24px 0; color: var(--text); }
#stepDetails #processingSpotlight .sp-text { margin-top: 10px; font-weight: 800; color: var(--primary); }
#stepDetails #processingSpotlight .sp-note { color: var(--muted); font-size: 14px; text-align: center; line-height: 1.6; }
#stepDetails:has(#detailsForm.hidden) .slip { display: none; }
/* αντίθεση (axe): τα μικρά γράμματα στα μη επιλεγμένα κουμπιά (φόντο surface2) + προειδοποίηση χαμηλής ανάλυσης */
#stepDetails .seg2 small { color: var(--muted); }
#stepDetails .lowres-summary .lowres-sub { color: var(--muted); }
#stepSuccess .contact a { height: auto; min-height: 56px; padding: 10px 14px; line-height: 1.3; }
/* ===================================================================================================
   ΤΥΠΟΥ ΤΑΥΤΟΤΗΤΑΣ (#stepIdPhoto σκούρο + #stepIdResult φύλλο). Ίδια μηχανή κάδρου (idLayout/idFrame).
   =================================================================================================== */
#stepIdPhoto .idwrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
#stepIdPhoto .id-stage { flex: 1 1 auto; min-height: 0; }
#stepIdPhoto .id-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #cbd5e1; font-size: 14px; padding: 0 12px; }
#stepIdPhoto .id-empty .ic { font-size: 40px; color: var(--primary); }
#stepIdPhoto .idguide { position: absolute; left: 0; right: 0; border-top: 2px dashed #10b981; font-size: 10px; color: #6ee7b7; font-weight: 700;
  text-align: right; padding-right: 4px; pointer-events: none; z-index: 3; }
#stepIdPhoto .idtools { padding: 8px 14px 6px; }
#stepIdPhoto .zoomrow { gap: 6px; }
#stepIdPhoto .zoomrow input[type=range] { flex: 1; accent-color: var(--primary); }
#stepIdPhoto .iconbtn.sm { width: 40px; height: 40px; flex: 0 0 auto; }
#stepIdPhoto .idhint { font-size: 12.5px; color: var(--muted); text-align: center; margin-top: 2px; }
#stepIdPhoto .id-note { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
#stepIdPhoto .id-note:empty { display: none; }
#stepIdPhoto .slip .btn { margin-left: auto; }
#stepIdPhoto.mp-quad #idMmToggle, #stepIdPhoto.mp-quad #idMm, #stepIdPhoto.mp-quad #idDimNote { display: none; }
#stepIdPhoto.mp-quad #idPriceChip { display: none; }
#stepIdPhoto #idPriceChip:empty { display: none; }
#stepIdPhoto #idPriceChip s { color: var(--faint); font-weight: 500; }
/* η τετράδα: φύλλο από κάτω ΠΑΝΩ από τον editor */
#stepIdResult .sheet { z-index: 60; }
#stepIdResult .id-sheet-wrap { background: none; padding: 0 0 12px; flex: 0 0 auto; display: flex; justify-content: center; }
#stepIdResult .id-sheet { height: min(42vh, 340px); box-shadow: 0 6px 18px rgba(0,0,0,.18); border: 1px solid var(--line); }
#stepIdResult .id-note { font-size: 14px; text-align: center; margin-bottom: 10px; color: var(--text); }
#stepIdResult .qbtns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
#stepIdResult .qbtns .tool-btn { height: 50px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); color: var(--text); font-weight: 800; font-size: 15.5px; padding: 0; }
#stepIdResult { position: fixed; inset: 0; z-index: 60; }
#stepIdPhoto .slip .info small, #stepIdPhoto .slip .info b { white-space: nowrap; }
#stepIdPhoto .slip .btn { padding: 0 14px; font-size: 15px; }
#stepIdResult .id-sheet { height: min(36vh, 300px); }
/* ===================================================================================================
   myPhoto (#stepMyPhoto) — νέα εμφάνιση, ΙΔΙΑ markup/ids/λογική (mpGo, setAge, mpDonePerson, mpPay…).
   Ντύνει τις παλιές κλάσεις (mph, mpsub, guidelist, ageopt .at/.ad/.old, info-box, lg-input, mprow…) με τη μακέτα.
   =================================================================================================== */
#stepMyPhoto .mp-dots { display: flex; gap: 5px; justify-content: center; padding: 10px 0 0; background: var(--bg); }
#stepMyPhoto .mp-dot { width: 7px; height: 7px; border-radius: 4px; background: var(--line); transition: width .2s; }
#stepMyPhoto .mp-dot.on { width: 22px; background: var(--primary); }
#stepMyPhoto .mp-dot.done { background: var(--primary); opacity: .45; }
#stepMyPhoto .mp-wrap { max-width: 560px; margin: 0 auto; padding: 10px 16px 0; width: 100%; }
#stepMyPhoto .mp-ptag { display: inline-block; font-size: 12px; font-weight: 800; color: var(--primary); background: var(--primary-soft);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 6px; }
#stepMyPhoto .mph { font-size: 20px; font-weight: 800; margin: 2px 0 6px; letter-spacing: -.2px; color: var(--text); }
#stepMyPhoto .mpsub { color: var(--muted); font-size: 15px; line-height: 1.45; margin: 0 0 14px; }
/* οδηγίες φωτογραφίας = κάρτα «rules» */
#stepMyPhoto .guidelist { list-style: none; margin: 0 0 12px; padding: 14px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 9px; }
#stepMyPhoto .guidelist li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; color: var(--text); margin: 0; }
#stepMyPhoto .guidelist .gi { flex: 0 0 auto; font-size: 18px; line-height: 1.2; }
#stepMyPhoto .mppreview { border-radius: 14px; background: var(--surface2); border: 1px dashed var(--line); color: var(--muted); }
#stepMyPhoto .mpprog.on { display: block; }
#stepMyPhoto .mptrack { height: 8px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
#stepMyPhoto .mpfill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary2)); }
#stepMyPhoto .mplbl, #stepMyPhoto .mpfile { color: var(--muted); font-size: 13px; font-weight: 700; }
/* κουτιά πληροφοριών / προειδοποιήσεων */
#stepMyPhoto .info-box { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; color: var(--text); box-shadow: none; padding: 12px 14px; }
#stepMyPhoto .info-box h3 { color: var(--text); }
/* επιλογές ηλικίας / τετράδας / παραλαβής (παλιές κλάσεις .at .ad .old) */
#stepMyPhoto .ageopt { display: block; width: 100%; text-align: left; position: relative; padding: 14px 16px; border-radius: 16px;
  border: 1.5px solid var(--line); background: var(--surface); margin-bottom: 10px; box-shadow: var(--shadow); color: var(--text); cursor: pointer; }
#stepMyPhoto .ageopt.on, #stepMyPhoto .ageopt.sel { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--surface); }
#stepMyPhoto .ageopt .at { font-size: 16px; font-weight: 800; padding-right: 84px; color: var(--text); }
#stepMyPhoto .ageopt .ad { color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.4; padding-right: 70px; }
#stepMyPhoto .ageopt .ap { position: absolute; right: 14px; top: 14px; font-weight: 800; font-size: 17px; color: var(--text); }
#stepMyPhoto .ageopt .ap .old { color: var(--faint); font-weight: 500; font-size: 13px; margin-right: 4px; text-decoration: line-through; }
/* πεδία */
#stepMyPhoto .form-label { font-size: 13px; color: var(--muted); font-weight: 600; display: block; margin-bottom: 5px; }
#stepMyPhoto .lg-input { width: 100%; min-width: 0; height: 48px; background: var(--surface2); border: 1px solid var(--line); border-radius: 12px;
  padding: 0 12px; font: inherit; font-size: 16px; color: var(--text); box-shadow: none; }
#stepMyPhoto .form-section-title { font-size: 13px; color: var(--muted); font-weight: 700; margin: 14px 0 8px; }
#stepMyPhoto .gdprbox { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line);
  font-size: 13.5px; line-height: 1.45; margin-top: 12px; background: var(--surface); color: var(--text); }
#stepMyPhoto .gdprbox input { width: 24px; height: 24px; accent-color: var(--primary); flex: 0 0 auto; margin: 0; }
#stepMyPhoto .gdprbox.miss { border-color: var(--danger); animation: shake .4s; }
/* υπογραφή (Δόση α: ίδιο πλαίσιο, νέα εμφάνιση· η πλήρης οθόνη έρχεται στη Δόση β) */
#stepMyPhoto .sigwrap { background: #fff; border: 2px dashed var(--line); border-radius: 14px; }
#stepMyPhoto .sighint { color: var(--faint); font-size: 12.5px; }
/* άτομα παραγγελίας */
#stepMyPhoto .mpp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); color: var(--text); }
#stepMyPhoto .mpp-sub { color: var(--muted); }
#stepMyPhoto .mpp-del { color: var(--danger); background: none; border: 0; }
/* κουμπιά: οι παλιές κλάσεις btn-primary / btn-sec με το στυλ της μακέτας */
#stepMyPhoto .btn { width: auto; flex: 1 1 0; min-width: 0; height: 50px; padding: 0 14px; border-radius: 14px; font-weight: 800; font-size: 15.5px; }
#stepMyPhoto .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: var(--on-primary); border: 0; box-shadow: 0 6px 18px var(--primary-soft); }
#stepMyPhoto .btn-sec { background: var(--surface2); color: var(--text); border: 1px solid var(--line); }
#stepMyPhoto .btn[disabled] { opacity: .45; }
#stepMyPhoto .mprow { display: flex; gap: 8px; margin-top: 12px; }
/* η ΤΕΛΕΥΤΑΙΑ σειρά κουμπιών κάθε βήματος (Πίσω / Συνέχεια) = κάτω μπάρα που μένει ορατή */
#stepMyPhoto .mp-step > .mprow:last-child { position: sticky; bottom: 0; margin: 14px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(0,0,0,.08); z-index: 5; }
#stepMyPhoto #mp7 .content-wrapper { color: var(--text); }
#stepMyPhoto #mp7 .big-icon { font-size: 56px; }
#stepMyPhoto .mpchip { height: 26px; font-size: 11.5px; padding: 0 9px; }
/* η μπάρα «Πίσω / Συνέχεια» ΠΑΝΤΑ κάτω-κάτω, και με λίγο περιεχόμενο (όχι στη μέση της οθόνης) */
#stepMyPhoto .mp-wrap { display: flex; flex-direction: column; }
#stepMyPhoto .mp-step.on { display: flex; flex-direction: column; flex: 1 0 auto; }
#stepMyPhoto .mp-step > .mprow:last-child { margin-top: auto; }
#stepMyPhoto .info-box:empty { display: none; }
#stepMyPhoto .ageopt .ad b { display: inline; font-size: inherit; padding: 0; color: var(--text); }
/* myPhoto — υπογραφή σε ΟΛΗ την οθόνη (δόση β) */
#stepMyPhoto .sigfull { position: fixed; inset: 0; z-index: 90; }
#stepMyPhoto .sigfull .bar { padding-top: calc(8px + env(safe-area-inset-top)); }
#stepMyPhoto .sigfull .bar .btn { flex: 0 0 auto; width: auto; height: 42px; font-size: 14px; padding: 0 14px; }
#stepMyPhoto .sigfull .bar .btn.secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--line); }
#stepMyPhoto .sigfull .bar .btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: var(--on-primary); }
#stepMyPhoto .sigfull .bar .btn.textlink { text-decoration: none; color: var(--muted); padding: 0 6px; }
#stepMyPhoto .sigarea { position: relative; flex: 1; min-height: 0; display: flex; }
/* ΑΠΟΛΥΤΗ θέση: ο καμβάς έχει 3× pixel (Retina) και ως «κανονικό» στοιχείο φούσκωνε τη σελίδα στο γύρισμα του iPhone
   (2688px πλάτος -> «ξεζουμάρισμα», η υπογραφή έχανε την πλήρη οθόνη και τα κουμπιά — 25/10). */
#stepMyPhoto .sigarea canvas { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; background: #f8fafc; touch-action: none; display: block; }
#stepMyPhoto .sigbox { margin-bottom: 8px; }
#stepMyPhoto .sigbox.has .inner { display: none; }
#stepMyPhoto .sighint { text-align: center; }
/* ΣΦΑΛΜΑ 4 (ιδιοκτήτης 21/10): τα κρυμμένα radio έμεναν «αόρατα» χαμηλά στη σελίδα -> η σελίδα ψηλότερη από την οθόνη και
   το πάτημα «Στο κατάστημα» σκρόλαρε ΟΛΗ τη σελίδα (μπάρα στη μέση, κενό από κάτω). Τώρα μένουν ΜΕΣΑ στο κουμπί τους. */
#stepDetails .seg2 > .radio-option { position: relative; }
#stepDetails .seg2 .radio-option input { left: 0; top: 0; }
/* ===================================================================================================
   ΠΑΡΑΘΥΡΑ (.modal.v2m): ΚΟΙΝΗ νέα επένδυση για ΟΛΑ τα παλιά σκούρα παράθυρα — φωτεινό φύλλο από κάτω, τίτλος χωρίς
   χρωματιστή μπάρα, κουμπιά της μακέτας. Ίδιο περιεχόμενο/ids/λογική (κανένα markup δεν αλλάζει, μόνο η κλάση v2m).
   Οι ΠΑΛΙΕΣ μεταβλητές (--text-muted, --surface-low…) ξαναορίζονται σε φωτεινές τιμές μέσα στο παράθυρο.
   =================================================================================================== */
.modal.v2m { --text-muted: var(--muted); --text-faint: var(--faint); --surface-low: var(--surface2); --surface-high: var(--surface2);
  --border: var(--line); --border-strong: var(--line); --accent-bg: var(--primary-soft); --accent: #059669; --danger: #e11d48;
  color: var(--text); font-family: 'Manrope', system-ui, sans-serif; }
.modal.v2m .backdrop { background: var(--scrim, rgba(15,18,30,.45)); backdrop-filter: none; }
.modal.v2m .editor-sheet { top: auto; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 560px !important;
  max-height: 88vh; border-radius: 22px 22px 0 0; border: 0; background: var(--surface); color: var(--text); backdrop-filter: none;
  box-shadow: 0 -10px 40px rgba(0,0,0,.18); padding-bottom: env(safe-area-inset-bottom); animation: v2mUp .22s ease; }
@keyframes v2mUp { from { transform: translate(-50%, 24px); opacity: .6; } to { transform: translate(-50%, 0); opacity: 1; } }
.modal.v2m .editor-header { background: none !important; color: var(--text) !important; border-bottom: 0; text-align: left;
  font-family: 'Manrope', system-ui, sans-serif; font-weight: 800; font-size: 18px; padding: 18px 18px 4px; }
.modal.v2m .editor-header button { color: var(--text) !important; background: var(--surface2) !important; }
.modal.v2m p, .modal.v2m li { color: inherit; }
.modal.v2m .info-box { background: var(--surface2); border: 1px solid var(--line) !important; color: var(--text); }
.modal.v2m .btn { border-radius: 14px; font-weight: 800; font-size: 15.5px; padding: 0 14px; height: 50px; }
.modal.v2m .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: var(--on-primary); border: 0; box-shadow: 0 6px 18px var(--primary-soft); }
.modal.v2m .btn-sec { background: var(--surface2); color: var(--text); border: 1px solid var(--line); }
.modal.v2m .btn-danger { background: var(--danger); color: #fff; border: 0; }
.modal.v2m .lg-input, .modal.v2m input[type=email], .modal.v2m input[type=text] { background: var(--surface2); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; height: 48px; font-size: 16px; }
.modal.v2m a { color: var(--primary); }
/* χαμηλή ανάλυση: η «προειδοποίηση» στο χρώμα του τίτλου, όχι πορτοκαλί μπάρα */
.modal.v2m .lowres-head.warn { color: #b45309 !important; }
.modal.v2m .lowres-head.bad { color: #be123c !important; }
/* «Αποθήκευση & συνέχεια» */
#saveModal .savesheet { padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; }
#saveModal .savesheet .x { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface2); color: var(--muted); border: 0; }
#saveModal h3 { margin: 0 44px 6px 0; font-size: 18px; }
#saveModal .lead { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 0 0 12px; }
#saveModal .lead b { color: var(--text); }
#saveModal .uses { list-style: none; padding: 0; margin: 10px 0 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
#saveModal .uses li { display: flex; gap: 8px; align-items: flex-start; }
#saveModal .uses .ic { color: var(--primary); }
#saveModal .uses b { color: var(--text); }
#saveModal .row2 { display: flex; gap: 8px; }
#saveModal .row2 input { flex: 1; min-width: 0; padding: 0 12px; }
#saveModal .row2 .btn { flex: 0 0 auto; width: auto; height: 48px; }
#saveModal .safe { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin: 10px 0 0; }
/* «Δες ποιες» -> μόνο οι φωτό χαμηλής ανάλυσης */
#stepWorkspace .tile.lr-hide { display: none; }
#stepWorkspace .lowbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border-radius: 14px;
  background: var(--warn-soft); border: 1px solid var(--warn); font-size: 13.5px; font-weight: 700; color: var(--text); }
#stepWorkspace .lowbar.hidden { display: none; }
#stepWorkspace .lowbar .ic { color: var(--warn); }
#stepWorkspace .lowbar button { margin-left: auto; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-weight: 800; color: var(--primary); white-space: nowrap; }
/* ταμείο: σύνολο σε ΜΙΑ γραμμή */
#stepDetails .slip .info b { white-space: nowrap; }
/* ερώτηση της εφαρμογής (appAsk) + «πρόσφατη φωτογραφία» */
.modal.v2m .asksheet { padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
.modal.v2m .asksheet h3 { margin: 0 0 8px; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.modal.v2m .asksheet h3 .ic { color: var(--primary); }
.modal.v2m .asktext { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-bottom: 14px; }
.modal.v2m .asktext b { color: var(--text); }
.modal.v2m .asktext .warnc, .modal.v2m .warnc { color: #b45309; }
.modal.v2m .asktext ul { margin: 6px 0 8px; padding-left: 20px; color: var(--text); }
.modal.v2m .askbtns { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }