:root{
    /* тёмная палитра UI */
    --ink-900:#0b1118; --ink-850:#111827; --ink-800:#132034;
    --ink-750:#172944; --ink-700:#1b2f4d;
    --line:#34496b;
    --text:#f3f7ff; --text-weak:#d7e2f0; --muted:#a9b8cc;
    --accent:#7bb7ff; --accent-600:#66a9fb; --green:#4cc38a; --danger:#ef5a5a;
    --shadow:0 10px 30px rgba(0,0,0,.35); --radius:12px;

    /* корпоративные для превью ценника */
    --brand-cream:#E2D8A6; /* Pantone 614 C / RAL 1014 */
    --brand-red:#E64126;   /* Pantone 179 C / RAL 2012 */
    --brand-ink:#0b0b0b;
}

*{box-sizing:border-box}
html,body{height:100%}
body.bg-dark-ink{
    background:var(--ink-900); color:var(--text);
    font:500 16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"DM Sans",Arial,sans-serif;
}
.app-title{font-weight:800;letter-spacing:.3px}
.text-muted{color:var(--text-weak)!important}

/* buttons */
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-ghost:hover{border-color:#4a6189;background:var(--ink-800)}
.btn-primary{background:var(--accent-600);border-color:var(--accent-600)}
.btn-primary:hover{background:var(--accent);border-color:var(--accent)}
.btn-success{background:var(--green);border-color:var(--green)}
.btn-success:hover{filter:brightness(1.06)}
.btn[disabled],.btn.disabled{opacity:.7;cursor:not-allowed}
.btn .spin-sm{
    width:1rem;height:1rem;border:.18rem solid rgba(255,255,255,.3);
    border-top-color:#fff;border-radius:50%;display:inline-block;margin-right:.5rem;
    animation:spin .8s linear infinite;vertical-align:-2px;
}

/* panels */
.panel{background:var(--ink-700);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.panel-h{padding:.75rem 1rem;border-bottom:1px solid var(--line);font-weight:700;background:var(--ink-800)}
.panel-b{padding:1rem}

/* forms */
.bg-input,.form-control.bg-input,.form-select.bg-input{
    background:var(--ink-750)!important;border:1px solid var(--line)!important;color:var(--text)!important
}
.bg-input:focus{border-color:#5b86c7;box-shadow:0 0 0 .15rem rgba(123,183,255,.17)}
.form-control::placeholder{color:var(--text-weak);opacity:1}
.form-label{color:var(--muted);font-weight:600}
.form-check-label{color:var(--text-weak)}
.form-check-input{background:transparent;border-color:#4a6189}
.form-check-input:checked{background-color:#66a9fb;border-color:#66a9fb}

/* tables */
.table{color:var(--text)}
.table thead th{font-weight:800;color:var(--text);background:var(--ink-800)!important;border-bottom:1px solid var(--line)}
.table>tbody>tr>*{background-color:var(--ink-700)!important;color:var(--text)!important;border-color:var(--line)}
.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:var(--ink-750)!important}
.table-hover tbody tr:hover>*{background-color:var(--ink-800)!important}
tr.is-selected>*{background:rgba(76,195,138,.12)!important}

/* code badge */
code,.code{color:var(--text);background:var(--ink-800);padding:.12rem .38rem;border-radius:8px}

/* modals */
.modal-content{background:var(--ink-800);border:1px solid var(--line);color:var(--text);border-radius:16px;box-shadow:var(--shadow)}
.modal-header,.modal-footer{border-color:var(--line)}
.modal-title{font-weight:800}
.btn-close.btn-close-white{filter:invert(1) grayscale(100%)}
.modal-backdrop.show{background:rgba(3,6,10,.65)}

/* overlay */
#appOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(10,15,22,.55);backdrop-filter:saturate(140%) blur(2px);z-index:2000}
#appOverlay.show{display:flex}
.loader{width:54px;height:54px;border-radius:50%;border:5px solid rgba(255,255,255,.22);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* skeletons */
.skel{position:relative;overflow:hidden;border-radius:8px;
    background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
    background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.skel.line{height:14px;margin:8px 0}
.skel.badge{height:24px;width:120px;border-radius:999px}
@keyframes shimmer{to{background-position:-200% 0}}

/* toasts */
.toast-lite{
    color:#0b0b0b;background:#fff;border-radius:10px;padding:.65rem .9rem;box-shadow:0 10px 24px rgba(0,0,0,.25);
    margin-top:.5rem;min-width:220px;display:flex;gap:.5rem;align-items:center
}
.toast-lite.info{background:#e7f0ff}
.toast-lite.ok{background:#e7fbf1}
.toast-lite.err{background:#ffe8e8}

/* ---------- LIVE PREVIEW (как в PDF) ---------- */
.preview-wrap{min-height:240px}

/* Карточка превью — теперь в фирменном кремовом, без скруглений */
.tagv2{
    width:100%;
    max-width:520px;
    border:1px solid var(--brand-ink);
    border-radius:0;                 /* без скруглений */
    overflow:hidden;
    background:var(--brand-cream);
    color:var(--brand-ink);
    box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.tagv2 .grid{display:grid;grid-template-columns:54% 46%;min-height:170px}

/* left */
.tagv2 .left{
    background:transparent;          /* чтобы фон брала карточка */
    padding:14px 16px;position:relative;color:inherit
}
.tagv2 .name{font-weight:800;font-size:22px;line-height:1.15;margin-bottom:10px}
.tagv2 .countryline{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tagv2 .flag{
    font-size:20px;border:1px solid rgba(0,0,0,.15);
    border-radius:4px;padding:2px 8px;background:rgba(255,255,255,.7)
}
.tagv2 .country{font-weight:700;font-size:14px}
.tagv2 .barcode-cv{display:block;width:100%;height:34px}
.tagv2 .barcode-num{font-size:10px;margin-top:2px;color:#333}

/* right */
.tagv2 .right{background:transparent;color:inherit; position:relative}
.tagv2 .topRight,.tagv2 .botRight{position:relative;overflow:hidden}
.tagv2 .topRight{height:50%;padding:8px 18px}
.tagv2 .topRight .title{position:absolute;right:18px;top:6px;font-weight:800;font-size:16px}
.tagv2 .botRight{height:50%; background:transparent; color:inherit; padding:8px 18px;
    display:grid; grid-template-rows:auto 1fr; align-items:end;
}
.tagv2 .bulkLabel{
    position:static; justify-self:end; margin:0 0 6px 0;
    font-weight:800; font-size:12px; border-radius:8px; padding:2px 8px;
    background:#111419; color:#fff;
}
.tagv2 .date{position:absolute;right:16px;bottom:8px;font-weight:700;font-size:12px}

/* price drawing */
.priceBox{left:14px;right:12px;max-width:calc(100% - 26px)}
.priceBox .int{line-height:.84;letter-spacing:-.5px;white-space:nowrap}
.priceBox .tail{display:flex;flex-direction:column;align-items:flex-start;margin-left:4px;transform:translateY(-.2em)}
.priceBox .frac{font-weight:900;font-size:var(--frac,20px);line-height:1}
.priceBox .cur{font-weight:900;font-size:var(--cur,18px);line-height:1;margin-top:2px}

/* в нижнем блоке при двух ценах — не наезжать на дату */
.tagv2 .botRight .priceBox{bottom:36px}
.tagv2 .botRight .priceBox .tail{ margin-left:8px; }
/* ---------- Переключатели дизайна в превью ---------- */

/* single — скрываем нижний блок */
.tagv2.is-single .botRight{display:none}

/* promo — вся карточка красная, белая типографика, перечёркнутая старая цена */
.tagv2.is-promo{
    background:var(--brand-red);
    color:#fff;
    border-color:#fff;
}
.tagv2.is-promo .left,
.tagv2.is-promo .right,
.tagv2.is-promo .topRight,
.tagv2.is-promo .botRight{background:transparent;color:#fff}
.tagv2.is-promo .flag{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.tagv2.is-promo .bulkLabel{background:rgba(255,255,255,.2);color:#fff;border-color:transparent}
.tagv2.is-promo .date{color:#fff}
.tagv2 .oldPrice{
    position:absolute; right:14px; bottom:28px;
    font-weight:800; font-size:12px; color:#fff;
    white-space:nowrap; max-width:180px; overflow:hidden; text-overflow:ellipsis;
}
.tagv2 .oldPrice .s{ text-decoration:line-through; text-decoration-thickness:3px; }