/* Printable certificates for the three levels of «Адаптивные продажи 2.0».
   A paper document: fixed palettes in both site themes, A4 landscape in print.
   Every size inside the sheet is in cqw (percent of the sheet width), so the
   certificate scales like an image on any screen and fills the page in print.
   Levels: I base — ivory and bronze, II advanced — pearl and silver,
   III expert — midnight and gold. */

body {
    --paper: #fbf8f1;
    --paper-2: #f3ecdd;
    --ink: #192326;
    --muted: #5f6a6b;
    --line: #d9cdb4;
    --accent: #11695f;
    --metal-1: #e2b27a;
    --metal-2: #a8682f;
    --metal-3: #7a4a1f;
    --metal-ink: #ffffff;
    --frame: #24474a;
    --watermark: rgba(17, 105, 95, .06);
    --guilloche: rgba(168, 104, 47, .07);
    --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans: 'Manrope', system-ui, 'Segoe UI', sans-serif;
    margin: 0;
    min-height: 100vh;
    font-variant-numeric: lining-nums;
    background: #e6e1d6;
    color: var(--ink);
    font-family: var(--sans);
}
body.lvl-advanced {
    --paper: #f7f7fa;
    --paper-2: #e9ebf2;
    --ink: #1c2136;
    --muted: #5d6378;
    --line: #c9cddb;
    --accent: #4b2f86;
    --metal-1: #eef0f5;
    --metal-2: #b9bfcc;
    --metal-3: #8a91a4;
    --metal-ink: #1c2136;
    --frame: #33285e;
    --watermark: rgba(75, 47, 134, .06);
    --guilloche: rgba(95, 102, 123, .08);
    background: #dfe1e8;
}
body.lvl-expert {
    --paper: #10142a;
    --paper-2: #1b2142;
    --ink: #f5ecd3;
    --muted: #b9b39f;
    --line: rgba(214, 178, 96, .45);
    --accent: #e3c06d;
    --metal-1: #f8e3a1;
    --metal-2: #d1a548;
    --metal-3: #8f6a1f;
    --metal-ink: #1a1305;
    --frame: #c9a24a;
    --watermark: rgba(227, 192, 109, .05);
    --guilloche: rgba(227, 192, 109, .07);
    background: #0a0d1c;
}

* { box-sizing: border-box; }

/* ── Toolbar (screen only) ───────────────────────────────── */
.tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 18px 20px 0;
    font-size: 15px;
}
.tools-back { color: #1d3337; font-weight: 700; text-decoration: none; padding: 10px 0; }
.lvl-expert .tools-back { color: #f1d58a; }
.tools-name { display: flex; flex-direction: column; gap: 4px; flex: 1 1 320px; max-width: 520px; }
.tools-name label { font-size: 13px; font-weight: 700; color: #3e4a4c; }
.lvl-expert .tools-name label { color: #d8cfb5; }
.tools-name-row { display: flex; gap: 8px; }
.tools-name input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #b9b2a4;
    background: #fff;
    color: #192326;
    font: 500 16px var(--sans);
}
.tools-save, .tools-print {
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    font: 700 15px var(--sans);
    cursor: pointer;
    white-space: nowrap;
}
.tools-save { border: 1px solid #b9b2a4; background: #fff; color: #192326; }
.tools-print { border: 0; background: #11695f; color: #fff; }
.lvl-advanced .tools-print { background: #4b2f86; }
.lvl-expert .tools-print { background: linear-gradient(135deg, #f1d58a, #c3953a); color: #1a1305; }
.tools-error { margin: 2px 0 0; color: #a0182d; font-weight: 600; font-size: 14px; }
.lvl-expert .tools-error { color: #ffb4bf; }
.tools :focus-visible { outline: 3px solid #e0752c; outline-offset: 2px; }

/* ── Sheet ───────────────────────────────────────────────── */
.sheet {
    container-type: inline-size;
    max-width: 1180px;
    margin: 18px auto 40px;
    padding: 0 20px;
}
.cert {
    position: relative;
    overflow: hidden;
    aspect-ratio: 297 / 210;
    display: flex;
    flex-direction: column;
    padding: 5.4cqw 6.4cqw 3.2cqw;
    color: var(--ink);
    background:
        radial-gradient(circle at 50% 46%, transparent 0 30%, var(--paper-2) 100%),
        var(--paper);
    box-shadow: 0 2.4cqw 6cqw rgba(20, 24, 30, .22);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.lvl-expert .cert {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(227, 192, 109, .16), transparent 55%),
        radial-gradient(circle at 50% 50%, #151a36 0 35%, #0b0e1f 100%);
    box-shadow: 0 2.4cqw 6cqw rgba(0, 0, 0, .6), 0 0 0 1px rgba(201, 162, 74, .35);
}

/* fine engraved pattern */
.cert-guilloche {
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient(circle at 0% 100%, transparent 0 .9cqw, var(--guilloche) .9cqw 1cqw),
        repeating-radial-gradient(circle at 100% 0%, transparent 0 .9cqw, var(--guilloche) .9cqw 1cqw);
    -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 0 46%, #000 80%);
    mask: radial-gradient(ellipse at 50% 50%, transparent 0 46%, #000 80%);
    pointer-events: none;
}

/* double frame */
.cert-frame {
    position: absolute;
    inset: 1.7cqw;
    border: .28cqw solid var(--frame);
    pointer-events: none;
}
.cert-frame::after {
    content: "";
    position: absolute;
    inset: .55cqw;
    border: .1cqw solid var(--line);
}
.lvl-expert .cert-frame {
    border-image: linear-gradient(135deg, #f8e3a1, #b8862f 30%, #f3d98b 50%, #9a7224 75%, #f8e3a1) 1;
}
.lvl-expert .cert-frame::after { border-color: rgba(227, 192, 109, .5); }

/* corner ornaments */
.corner {
    position: absolute;
    width: 4.2cqw;
    height: 4.2cqw;
    border: .28cqw solid var(--metal-2);
    pointer-events: none;
}
.corner::after {
    content: "";
    position: absolute;
    width: 1cqw;
    height: 1cqw;
    background: linear-gradient(135deg, var(--metal-1), var(--metal-3));
    transform: rotate(45deg);
}
.corner.tl { top: 2.9cqw; left: 2.9cqw; border-right: 0; border-bottom: 0; }
.corner.tr { top: 2.9cqw; right: 2.9cqw; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: 2.9cqw; left: 2.9cqw; border-right: 0; border-top: 0; }
.corner.br { bottom: 2.9cqw; right: 2.9cqw; border-left: 0; border-top: 0; }
.corner.tl::after { top: .6cqw; left: .6cqw; }
.corner.tr::after { top: .6cqw; right: .6cqw; }
.corner.bl::after { bottom: .6cqw; left: .6cqw; }
.corner.br::after { bottom: .6cqw; right: .6cqw; }

.cert-numeral {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    font: 700 34cqw/1 var(--serif);
    color: var(--watermark);
    pointer-events: none;
    letter-spacing: -.02em;
}

.cert-head, .cert-body, .cert-foot, .cert-honor { position: relative; z-index: 1; }

/* ── Header ──────────────────────────────────────────────── */
.cert-head { display: flex; justify-content: space-between; align-items: center; }
.cert-brand { display: flex; align-items: center; gap: .9cqw; font: 800 1.9cqw/1 var(--sans); letter-spacing: -.02em; }
.cert-brand img { width: 3.1cqw; height: 3.1cqw; }
.cert-code { font-size: 1.15cqw; font-weight: 700; letter-spacing: .12em; color: var(--muted); }

/* ── Body ────────────────────────────────────────────────── */
.cert-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.cert-title {
    font: 600 5.6cqw/1 var(--serif);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
}
.lvl-expert .cert-title,
.lvl-expert .cert-name {
    background: linear-gradient(180deg, #fff2c4 0%, #f0cf78 45%, #c4953a 70%, #f3d98b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cert-ribbon {
    margin: 1.3cqw 0 1.6cqw;
    padding: .55cqw 3cqw;
    background: linear-gradient(135deg, var(--metal-1), var(--metal-2) 55%, var(--metal-3));
    color: var(--metal-ink);
    font-size: 1.35cqw;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    clip-path: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%);
}
.lvl-base .cert-ribbon span,
.lvl-expert .cert-ribbon span { text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
.cert-confirm, .cert-lead { margin: 0; font-size: 1.45cqw; color: var(--muted); }
.cert-name {
    margin: .7cqw 0 .9cqw;
    max-width: 82%;
    font: 600 5cqw/1.08 var(--serif);
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}
.cert-name::after {
    content: "";
    display: block;
    width: 16cqw;
    height: .18cqw;
    margin: 1.1cqw auto 0;
    background: linear-gradient(90deg, transparent, var(--metal-2), transparent);
}
.cert-course {
    margin: .5cqw 0 0;
    font: italic 600 2.7cqw/1.15 var(--serif);
    color: var(--accent);
}

.cert-stats { display: flex; justify-content: center; gap: 1.4cqw; margin-top: 2cqw; }
.cert-stat {
    min-width: 15cqw;
    padding: 1cqw 1.6cqw;
    border: .1cqw solid var(--line);
    border-radius: 1.2cqw;
    background: rgba(255, 255, 255, .5);
}
.lvl-expert .cert-stat { background: rgba(255, 255, 255, .04); }
.cert-stat span {
    display: block;
    font-size: .95cqw;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.cert-stat strong { display: block; margin-top: .3cqw; font: 800 2.3cqw/1.15 var(--sans); color: var(--ink); }
/* Playfair's digits are old-style ("2.o"), so figures use the sans face */
.cert-digits { font: normal 700 .92em var(--sans); letter-spacing: 0; }
.cert-stat small { font: 600 1.25cqw var(--sans); color: var(--muted); }
.cert-stat em { display: block; font-style: normal; font-weight: 700; font-size: 1.15cqw; color: var(--accent); }

.cert-scale { list-style: none; margin: .7cqw 0 0; padding: 0; display: flex; gap: 1cqw; justify-content: center; }
.cert-scale li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35cqw;
    font-size: 1cqw;
    font-weight: 700;
    color: var(--muted);
    opacity: .55;
}
.cert-scale i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6cqw;
    height: 2.6cqw;
    border-radius: 50%;
    border: .12cqw solid var(--line);
    font: normal 700 1.15cqw/1 var(--serif);
}
.cert-scale li.is-passed { opacity: .9; }
.cert-scale li.is-passed i { border-color: var(--metal-2); }
.cert-scale li.is-current { opacity: 1; color: var(--ink); }
.cert-scale li.is-current i {
    width: 3.1cqw;
    height: 3.1cqw;
    margin-top: -.25cqw;
    border: 0;
    background: linear-gradient(135deg, var(--metal-1), var(--metal-2) 55%, var(--metal-3));
    color: var(--metal-ink);
    box-shadow: 0 .2cqw .6cqw rgba(0, 0, 0, .25);
}

/* ── Footer ──────────────────────────────────────────────── */
.cert-foot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 2cqw;
    margin-top: 1.4cqw;
}
.cert-foot-cell { border-top: .1cqw solid var(--line); padding-top: .7cqw; }
.cert-foot-cell span {
    display: block;
    font-size: .95cqw;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.cert-foot-cell strong { font-size: 1.5cqw; }
.cert-foot-right { text-align: right; }

.cert-seal { width: 9.6cqw; height: 9.6cqw; display: block; }
.cert-seal .seal-outer { fill: var(--metal-2); stroke: var(--metal-3); stroke-width: 1.5; }
.cert-seal .seal-line { fill: none; stroke: var(--metal-ink); stroke-opacity: .55; stroke-width: .8; }
.cert-seal .seal-ring-text { font: 800 7.2px var(--sans); letter-spacing: .9px; fill: var(--metal-ink); }
.cert-seal .seal-numeral { font: 700 26px var(--serif); fill: var(--metal-ink); }
.cert-seal .seal-caption { font: 800 6.4px var(--sans); letter-spacing: 1.2px; fill: var(--metal-ink); }
.lvl-expert .cert-seal { filter: drop-shadow(0 0 1.2cqw rgba(227, 192, 109, .35)); }

.cert-honor {
    margin: 1.2cqw 0 0;
    text-align: center;
    font: italic 600 1.55cqw var(--serif);
    letter-spacing: .02em;
    color: var(--accent);
}

/* ── Print: one A4 landscape page, nothing else ─────────── */
@page { size: A4 landscape; margin: 0; }
@media print {
    html, body { background: none !important; width: 297mm; height: 210mm; }
    .tools { display: none; }
    .sheet { margin: 0; padding: 0; max-width: none; width: 297mm; }
    .cert { width: 297mm; height: 210mm; aspect-ratio: auto; box-shadow: none; }
    /* Chrome draws a box around gradient-clipped text in PDFs: use solid gold */
    .lvl-expert .cert-title,
    .lvl-expert .cert-name { background: none; color: #ebc66c; }
}

@media (max-width: 640px) {
    .tools { padding: 14px 12px 0; }
    .tools-print { width: 100%; }
    .sheet { padding: 0 10px; margin-top: 14px; }
}