/* ── Base ─────────────────────────────── */
.varni-wrap{max-width:720px;margin:30px auto;font-family:'Segoe UI',Arial,sans-serif;}

/* ── Steps ────────────────────────────── */
.varni-steps{display:flex;align-items:center;margin-bottom:24px;}
.varni-step{display:flex;flex-direction:column;align-items:center;gap:4px;}
.sn{width:36px;height:36px;border-radius:50%;background:#ccc;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;transition:.3s;}
.sl{font-size:12px;color:#888;white-space:nowrap;}
.varni-step.active .sn{background:#2761E7;}
.varni-step.done .sn{background:#27ae60;}
.varni-step.active .sl{color:#2761E7;font-weight:600;}
.varni-step-line{flex:1;height:3px;background:#ddd;margin:0 6px;margin-bottom:18px;}

/* ── Card ─────────────────────────────── */
.varni-card{background:#fff;border-radius:12px;padding:28px;box-shadow:0 4px 20px rgba(0,0,0,.1);}
.varni-title{margin:0 0 20px;color:#2761E7;font-size:20px;}

/* ── Customer bar ─────────────────────── */
.vcust-bar{display:flex;align-items:center;justify-content:space-between;
    background:#eef1fb;border-radius:8px;padding:10px 14px;margin-bottom:18px;font-size:14px;font-weight:600;color:#2761E7;}
.vcust-change{background:#2761E7;color:#fff;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;font-size:12px;}

/* ── Fields ───────────────────────────── */
.vf{margin-bottom:16px;}
.vf label,.vseclabel{display:block;font-weight:600;margin-bottom:6px;color:#333;font-size:14px;}
.vseclabel{margin-top:18px;margin-bottom:10px;font-size:15px;color:#2761E7;}
.vf input{width:100%;padding:11px 14px;border:2px solid #ddd;border-radius:8px;font-size:15px;box-sizing:border-box;transition:.2s;}
.vf input:focus{outline:none;border-color:#2761E7;}
.vhint{color:#666;font-size:13px;margin-bottom:14px;}

/* ── Type cards ───────────────────────── */
.vtype-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px;}
.vtype-card{border:3px solid #ddd;border-radius:10px;padding:16px;cursor:pointer;text-align:center;transition:.2s;}
.vtype-card:hover,.vtype-card.selected{border-color:#2761E7;}
.vtype-card.selected{background:#eef1fb;}
.vt-icon{font-size:28px;margin-bottom:6px;}
.vt-name{font-weight:700;font-size:15px;color:#2761E7;margin-bottom:5px;}
.vt-desc{font-size:11px;color:#666;line-height:1.5;}

/* ── Camera model cards ───────────────── */
.vcam-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;}
.vcam-card{border:2px solid #ddd;border-radius:8px;padding:12px;cursor:pointer;transition:.2s;}
.vcam-card:hover,.vcam-card.selected{border-color:#2761E7;}
.vcam-card.selected{background:#eef1fb;}
.vcam-name{font-weight:700;font-size:13px;color:#2761E7;margin-bottom:3px;}
.vcam-price{font-size:15px;font-weight:700;color:#c0392b;margin-bottom:5px;}
.vcam-info{font-size:11px;color:#666;line-height:1.4;margin-bottom:6px;}
.vcam-video{font-size:11px;color:#2761E7;text-decoration:none;font-weight:600;}

/* ── DVR auto info ────────────────────── */
.vdvr-auto-info{margin-top:8px;padding:8px 14px;background:#fff3cd;border-radius:6px;
    font-size:13px;color:#856404;border-left:3px solid #ffc107;}

/* ── Qty stepper ──────────────────────── */
.vqty-row{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.vqty-btn{width:42px;height:42px;border-radius:50%;border:2px solid #2761E7;background:#fff;
    color:#2761E7;font-size:22px;cursor:pointer;font-weight:700;transition:.2s;}
.vqty-btn:hover{background:#2761E7;color:#fff;}
.vqty-num{font-size:28px;font-weight:700;color:#2761E7;min-width:50px;text-align:center;}

/* ── Buttons ──────────────────────────── */
.vbr{display:flex;justify-content:flex-end;gap:10px;margin-top:22px;}
.vbtn{padding:10px 24px;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;background:#2761E7;color:#fff;transition:.2s;}
.vbtn:hover{opacity:.85;}
.vbtn-out{background:#fff;border:2px solid #2761E7;color:#2761E7;}
.vbtn-green{background:#27ae60;}
.vbtn-blue{background:#17a2b8;}
.vbtn-red{background:#c0392b;}
.vdl-row{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap;}

/* ── Modal ────────────────────────────── */
.varni-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:99999;align-items:center;justify-content:center;}
.varni-modal.open{display:flex;}
.varni-modal-inner{background:#fff;border-radius:10px;padding:20px;max-width:700px;width:95%;position:relative;}
.varni-modal-close{position:absolute;top:10px;right:14px;font-size:24px;cursor:pointer;}
.varni-modal-inner iframe,.varni-modal-inner video{width:100%;height:370px;border:none;border-radius:6px;}

/* ══════════════════════════════════════
   INVOICE BASE
══════════════════════════════════════ */
#varniInvoice{width:700px;margin:0 auto;font-family:'Segoe UI',Arial,sans-serif;background:#fff;border-radius:4px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.15);}

/* ── Common invoice parts ─────────────── */
.inv-red-bar{height:7px;}
.inv-meta{text-align:right;padding:14px 28px 0;font-size:13px;line-height:1.9;}
.inv-cust{display:flex;gap:20px;padding:8px 28px;font-size:13px;border-bottom:1px solid rgba(0,0,0,.1);flex-wrap:wrap;}
.inv-pkg{text-align:center;font-size:14px;margin:12px 28px 8px;padding-bottom:8px;}
.inv-tbl{width:calc(100% - 56px);margin:0 28px;border-collapse:collapse;font-size:13px;}
.inv-tbl th{padding:11px 12px;text-align:left;font-weight:700;}
.inv-tbl td{padding:9px 12px;border-bottom:1px solid rgba(0,0,0,.06);}
.inv-tbl th:not(:first-child),.inv-tbl td:not(:first-child){text-align:center;}
.inv-foot{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;margin-top:8px;}
.inv-ty{font-size:26px;font-style:italic;}
.inv-gt{font-size:17px;font-weight:700;}
.inv-website{text-align:center;font-size:13px;font-weight:700;padding:6px;letter-spacing:1px;}
.inv-bottom-bar{display:flex;justify-content:center;gap:36px;padding:11px 28px;font-size:13px;font-weight:600;color:#fff;}

/* ══════════════════════════════════════
   TEMPLATE 1 — Classic Blue + Red
══════════════════════════════════════ */
.tpl-template1 .inv-hdr{background:#1a2b6d;padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template1 .inv-company{color:#fff;font-size:26px;font-weight:900;}
.tpl-template1 .inv-subtitle{color:#fff;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template1 .inv-red-bar{background:#c0392b;}
.tpl-template1 .inv-pkg{color:#1a2b6d;border-bottom:2px solid #1a2b6d;}
.tpl-template1 .inv-tbl thead tr{background:#1a2b6d;}
.tpl-template1 .inv-tbl th{color:#fff;}
.tpl-template1 .inv-tbl tr:nth-child(even) td{background:#f0f3ff;}
.tpl-template1 .inv-foot{border-top:2px solid #1a2b6d;}
.tpl-template1 .inv-ty,.tpl-template1 .inv-gt{color:#1a2b6d;}
.tpl-template1 .inv-website{background:#eef1fb;color:#1a2b6d;}
.tpl-template1 .inv-bottom-bar{background:#c0392b;}

/* ══════════════════════════════════════
   TEMPLATE 2 — Midnight Black + Red
══════════════════════════════════════ */
.tpl-template2 .inv-hdr{background:#1a1a2e;padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template2 .inv-company{color:#e94560;font-size:26px;font-weight:900;}
.tpl-template2 .inv-subtitle{color:#fff;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template2 .inv-red-bar{background:#e94560;}
.tpl-template2 .inv-pkg{color:#1a1a2e;border-bottom:2px solid #e94560;}
.tpl-template2 .inv-tbl thead tr{background:#1a1a2e;}
.tpl-template2 .inv-tbl th{color:#e94560;}
.tpl-template2 .inv-tbl tr:nth-child(even) td{background:#f5f5f5;}
.tpl-template2 .inv-foot{border-top:2px solid #1a1a2e;}
.tpl-template2 .inv-ty{color:#e94560;}
.tpl-template2 .inv-gt{color:#1a1a2e;}
.tpl-template2 .inv-website{background:#1a1a2e;color:#e94560;}
.tpl-template2 .inv-bottom-bar{background:#1a1a2e;}

/* ══════════════════════════════════════
   TEMPLATE 3 — Royal Gold
══════════════════════════════════════ */
.tpl-template3 .inv-hdr{background:linear-gradient(135deg,#2c1810,#4a2c0a);padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template3 .inv-company{color:#d4a017;font-size:26px;font-weight:900;}
.tpl-template3 .inv-subtitle{color:#fff8dc;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template3 .inv-red-bar{background:#d4a017;}
.tpl-template3 .inv-pkg{color:#2c1810;border-bottom:2px solid #d4a017;}
.tpl-template3 .inv-tbl thead tr{background:linear-gradient(90deg,#2c1810,#4a2c0a);}
.tpl-template3 .inv-tbl th{color:#d4a017;}
.tpl-template3 .inv-tbl tr:nth-child(even) td{background:#fdf6e3;}
.tpl-template3 .inv-foot{border-top:2px solid #d4a017;}
.tpl-template3 .inv-ty{color:#d4a017;}
.tpl-template3 .inv-gt{color:#2c1810;}
.tpl-template3 .inv-website{background:#fdf6e3;color:#2c1810;}
.tpl-template3 .inv-bottom-bar{background:linear-gradient(90deg,#2c1810,#4a2c0a);}

/* ══════════════════════════════════════
   TEMPLATE 4 — Forest Green
══════════════════════════════════════ */
.tpl-template4 .inv-hdr{background:#1a4731;padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template4 .inv-company{color:#fff;font-size:26px;font-weight:900;}
.tpl-template4 .inv-subtitle{color:#a8edca;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template4 .inv-red-bar{background:#27ae60;}
.tpl-template4 .inv-pkg{color:#1a4731;border-bottom:2px solid #27ae60;}
.tpl-template4 .inv-tbl thead tr{background:#1a4731;}
.tpl-template4 .inv-tbl th{color:#fff;}
.tpl-template4 .inv-tbl tr:nth-child(even) td{background:#f0fff4;}
.tpl-template4 .inv-foot{border-top:2px solid #27ae60;}
.tpl-template4 .inv-ty,.tpl-template4 .inv-gt{color:#1a4731;}
.tpl-template4 .inv-website{background:#f0fff4;color:#1a4731;}
.tpl-template4 .inv-bottom-bar{background:#1a4731;}

/* ══════════════════════════════════════
   TEMPLATE 5 — Ocean Blue
══════════════════════════════════════ */
.tpl-template5 .inv-hdr{background:linear-gradient(135deg,#0d3b6e,#00b4d8);padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template5 .inv-company{color:#fff;font-size:26px;font-weight:900;}
.tpl-template5 .inv-subtitle{color:#caf0f8;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template5 .inv-red-bar{background:#00b4d8;}
.tpl-template5 .inv-pkg{color:#0d3b6e;border-bottom:2px solid #00b4d8;}
.tpl-template5 .inv-tbl thead tr{background:linear-gradient(90deg,#0d3b6e,#00b4d8);}
.tpl-template5 .inv-tbl th{color:#fff;}
.tpl-template5 .inv-tbl tr:nth-child(even) td{background:#e0f7ff;}
.tpl-template5 .inv-foot{border-top:2px solid #00b4d8;}
.tpl-template5 .inv-ty{color:#00b4d8;}
.tpl-template5 .inv-gt{color:#0d3b6e;}
.tpl-template5 .inv-website{background:#e0f7ff;color:#0d3b6e;}
.tpl-template5 .inv-bottom-bar{background:linear-gradient(90deg,#0d3b6e,#00b4d8);}

/* ══════════════════════════════════════
   TEMPLATE 6 — Sunset Orange
══════════════════════════════════════ */
.tpl-template6 .inv-hdr{background:linear-gradient(135deg,#7d3c98,#e67e22);padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template6 .inv-company{color:#fff;font-size:26px;font-weight:900;}
.tpl-template6 .inv-subtitle{color:#fdebd0;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template6 .inv-red-bar{background:#e67e22;}
.tpl-template6 .inv-pkg{color:#7d3c98;border-bottom:2px solid #e67e22;}
.tpl-template6 .inv-tbl thead tr{background:linear-gradient(90deg,#7d3c98,#e67e22);}
.tpl-template6 .inv-tbl th{color:#fff;}
.tpl-template6 .inv-tbl tr:nth-child(even) td{background:#fef5e7;}
.tpl-template6 .inv-foot{border-top:2px solid #e67e22;}
.tpl-template6 .inv-ty{color:#e67e22;}
.tpl-template6 .inv-gt{color:#7d3c98;}
.tpl-template6 .inv-website{background:#fef5e7;color:#7d3c98;}
.tpl-template6 .inv-bottom-bar{background:linear-gradient(90deg,#7d3c98,#e67e22);}

/* ══════════════════════════════════════
   TEMPLATE 7 — Steel Grey
══════════════════════════════════════ */
.tpl-template7 .inv-hdr{background:linear-gradient(135deg,#2c3e50,#566573);padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template7 .inv-company{color:#fff;font-size:26px;font-weight:900;}
.tpl-template7 .inv-subtitle{color:#d5d8dc;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template7 .inv-red-bar{background:#95a5a6;}
.tpl-template7 .inv-pkg{color:#2c3e50;border-bottom:2px solid #95a5a6;}
.tpl-template7 .inv-tbl thead tr{background:#2c3e50;}
.tpl-template7 .inv-tbl th{color:#fff;}
.tpl-template7 .inv-tbl tr:nth-child(even) td{background:#f2f3f4;}
.tpl-template7 .inv-foot{border-top:2px solid #2c3e50;}
.tpl-template7 .inv-ty,.tpl-template7 .inv-gt{color:#2c3e50;}
.tpl-template7 .inv-website{background:#f2f3f4;color:#2c3e50;}
.tpl-template7 .inv-bottom-bar{background:#2c3e50;}

/* ══════════════════════════════════════
   TEMPLATE 8 — Deep Purple
══════════════════════════════════════ */
.tpl-template8 .inv-hdr{background:linear-gradient(135deg,#4a235a,#8e44ad);padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template8 .inv-company{color:#fff;font-size:26px;font-weight:900;}
.tpl-template8 .inv-subtitle{color:#e8daef;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template8 .inv-red-bar{background:#8e44ad;}
.tpl-template8 .inv-pkg{color:#4a235a;border-bottom:2px solid #8e44ad;}
.tpl-template8 .inv-tbl thead tr{background:linear-gradient(90deg,#4a235a,#8e44ad);}
.tpl-template8 .inv-tbl th{color:#fff;}
.tpl-template8 .inv-tbl tr:nth-child(even) td{background:#f9f0ff;}
.tpl-template8 .inv-foot{border-top:2px solid #8e44ad;}
.tpl-template8 .inv-ty{color:#8e44ad;}
.tpl-template8 .inv-gt{color:#4a235a;}
.tpl-template8 .inv-website{background:#f9f0ff;color:#4a235a;}
.tpl-template8 .inv-bottom-bar{background:linear-gradient(90deg,#4a235a,#8e44ad);}

/* ══════════════════════════════════════
   TEMPLATE 9 — Crimson Red
══════════════════════════════════════ */
.tpl-template9 .inv-hdr{background:linear-gradient(135deg,#7b241c,#e74c3c);padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template9 .inv-company{color:#fff;font-size:26px;font-weight:900;}
.tpl-template9 .inv-subtitle{color:#fadbd8;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template9 .inv-red-bar{background:#e74c3c;}
.tpl-template9 .inv-pkg{color:#7b241c;border-bottom:2px solid #e74c3c;}
.tpl-template9 .inv-tbl thead tr{background:linear-gradient(90deg,#7b241c,#e74c3c);}
.tpl-template9 .inv-tbl th{color:#fff;}
.tpl-template9 .inv-tbl tr:nth-child(even) td{background:#fff5f5;}
.tpl-template9 .inv-foot{border-top:2px solid #e74c3c;}
.tpl-template9 .inv-ty{color:#e74c3c;}
.tpl-template9 .inv-gt{color:#7b241c;}
.tpl-template9 .inv-website{background:#fff5f5;color:#7b241c;}
.tpl-template9 .inv-bottom-bar{background:linear-gradient(90deg,#7b241c,#e74c3c);}

/* ══════════════════════════════════════
   TEMPLATE 10 — Teal Modern
══════════════════════════════════════ */
.tpl-template10 .inv-hdr{background:linear-gradient(135deg,#0e6655,#1abc9c);padding:22px 28px;display:flex;align-items:center;gap:18px;}
.tpl-template10 .inv-company{color:#fff;font-size:26px;font-weight:900;}
.tpl-template10 .inv-subtitle{color:#d5f5e3;font-size:20px;letter-spacing:10px;font-weight:700;}
.tpl-template10 .inv-red-bar{background:#1abc9c;}
.tpl-template10 .inv-pkg{color:#0e6655;border-bottom:2px solid #1abc9c;}
.tpl-template10 .inv-tbl thead tr{background:linear-gradient(90deg,#0e6655,#1abc9c);}
.tpl-template10 .inv-tbl th{color:#fff;}
.tpl-template10 .inv-tbl tr:nth-child(even) td{background:#e8f8f5;}
.tpl-template10 .inv-foot{border-top:2px solid #1abc9c;}
.tpl-template10 .inv-ty{color:#1abc9c;}
.tpl-template10 .inv-gt{color:#0e6655;}
.tpl-template10 .inv-website{background:#e8f8f5;color:#0e6655;}
.tpl-template10 .inv-bottom-bar{background:linear-gradient(90deg,#0e6655,#1abc9c);}

/* ── Responsive ───────────────────────── */
@media(max-width:740px){
    #varniInvoice{width:100%;}
    .vtype-row,.vcam-list{grid-template-columns:1fr;}
    .inv-bottom-bar{flex-direction:column;gap:6px;text-align:center;}
    .inv-cust{flex-direction:column;gap:4px;}
}

/* ── Invoice mobile responsive wrapper ── */
#invoiceScrollWrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile: scale invoice to fit screen */
@media (max-width: 740px) {
    #invoiceScrollWrap {
        display: flex;
        justify-content: center;
    }
    #varniInvoice {
        transform-origin: top center;
        /* JS will set scale dynamically */
    }
}

/* ── Invoice scroll wrapper ── */
#invoiceScrollWrap {
    width: 100%;
    position: relative;
}

/* ── Invoice mobile display fix ── */
#invoiceScrollWrap {
    width: 100%;
    overflow: visible;
}

/* On mobile: use zoom to shrink invoice to fit */
@media (max-width: 719px) {
    #invoiceScrollWrap {
        overflow-x: hidden;
    }
    #varniInvoice {
        zoom: 0.52;          /* 700 * 0.52 = 364px — fits 380px screen */
        margin: 0 !important;
    }
}

@media (min-width: 360px) and (max-width: 719px) {
    #varniInvoice {
        zoom: calc(100vw / 700);
    }
}

/* ── Section blocks (Step 2 UX) ────────── */
.vsec-block{
    margin-bottom:22px;
    border:2px solid #eef1fb;
    border-radius:10px;
    padding:16px;
    background:#fafbff;
}
.vsec-head{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}
.vsec-num{
    width:28px;height:28px;border-radius:50%;
    background:#2761E7;color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:14px;flex-shrink:0;
}
.vsec-label{
    font-weight:700;font-size:15px;color:#222;
}
.vsec-auto-badge{
    margin-left:auto;
    background:#e8f5e9;color:#1b5e20;
    font-size:11px;font-weight:700;
    padding:3px 10px;border-radius:20px;
    border:1px solid #a5d6a7;
    white-space:nowrap;
}

/* ── Type cards improved ─────────────────── */
.vtype-card{
    border:2px solid #ddd;border-radius:12px;
    padding:16px 14px;cursor:pointer;
    text-align:center;transition:.2s;
    position:relative;background:#fff;
}
.vtype-card:hover{border-color:#2761E7;background:#f0f4ff;}
.vtype-card.selected{border-color:#2761E7;background:#eef1fb;box-shadow:0 0 0 3px rgba(39,97,231,.15);}
.vtype-check{
    position:absolute;top:10px;right:10px;
    width:22px;height:22px;border-radius:50%;
    background:#2761E7;color:#fff;
    font-size:13px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:.2s;
}
.vtype-card.selected .vtype-check{opacity:1;}
.vt-icon{font-size:32px;margin-bottom:6px;}
.vt-name{font-weight:800;font-size:16px;color:#2761E7;margin-bottom:4px;}
.vt-tag{font-size:11px;color:#2761E7;background:#eef1fb;
    padding:2px 8px;border-radius:10px;display:inline-block;margin-bottom:6px;font-weight:600;}
.vt-desc{font-size:12px;color:#555;line-height:1.5;}

/* ── Camera cards improved ───────────────── */
.vcam-card{
    border:2px solid #e0e0e0;border-radius:10px;
    padding:14px;cursor:pointer;transition:.2s;
    background:#fff;position:relative;
}
.vcam-card:hover{border-color:#2761E7;background:#f8f9ff;}
.vcam-card.selected{
    border-color:#2761E7;background:#eef1fb;
    box-shadow:0 0 0 3px rgba(39,97,231,.15);
}
.vcam-card.selected::after{
    content:'✓ Selected';
    position:absolute;top:8px;right:8px;
    background:#2761E7;color:#fff;
    font-size:10px;font-weight:700;
    padding:2px 8px;border-radius:10px;
}

/* ── Qty stepper improved ────────────────── */
.vqty-wrap{
    display:flex;align-items:center;
    justify-content:center;gap:20px;
    padding:14px 0 8px;
}
.vqty-btn{
    width:48px;height:48px;border-radius:50%;
    border:2px solid #2761E7;background:#fff;
    color:#2761E7;font-size:26px;cursor:pointer;
    font-weight:700;transition:.2s;line-height:1;
}
.vqty-btn:hover{background:#2761E7;color:#fff;}
.vqty-mid{display:flex;flex-direction:column;align-items:center;gap:2px;}
.vqty-num{font-size:42px;font-weight:800;color:#2761E7;line-height:1;}
.vqty-label{font-size:13px;color:#888;font-weight:600;}

/* ── HDD Guide tip ───────────────────────── */
.vhdd-guide{margin-bottom:12px;}
.vhdd-tip{
    background:#fff8e1;border-left:4px solid #ffc107;
    padding:10px 14px;border-radius:6px;
    font-size:13px;color:#555;line-height:1.6;
}

/* ── Fix: Selected badge — CSS only, no JS duplication ── */
.vcam-card.selected::after{
    content:'✓ Selected';
    position:absolute;top:8px;right:8px;
    background:#2761E7;color:#fff;
    font-size:10px;font-weight:700;
    padding:3px 10px;border-radius:20px;
    white-space:nowrap;
}
/* DVR/HDD card — only show badge on selected */
#dvrList .vcam-card::after,
#hddList .vcam-card::after{ content:none; }
#dvrList .vcam-card.selected::after,
#hddList .vcam-card.selected::after{
    content:'✓ Selected';
    position:absolute;top:8px;right:8px;
    background:#2761E7;color:#fff;
    font-size:10px;font-weight:700;
    padding:3px 10px;border-radius:20px;
}