:root {
    --paper-bg: #FAFAF8;
    --paper-card: #FFFFFF;
    --paper-outline: #2D3436;
    --paper-shadow: #D0D0D0;
    --paper-primary: #E17055;
    --paper-primary-dark: #B84F3B;
    --paper-accent-yellow: #FFEAA7;
    --paper-accent-pink: #FFD6D6;
    --paper-accent-green: #D4EDDA;
    --paper-accent-blue: #D6E9FF;
    --paper-text-muted: #636E72;
    --page-width: 297mm;
    --page-height: 210mm;
    --trim-width: 63mm;
    --trim-height: 88mm;
    --bleed: 3mm;
    --art-width: 69mm;
    --art-height: 94mm;
    --grid-left: 10.5mm;
    --grid-top: 11mm;
    --frame-gap: 2.4mm;
    --line: 0.7mm;
    --frame-shadow: 0.55mm;
    --cut-line: rgba(126, 142, 149, 0.78);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--paper-bg);
    color: var(--paper-outline);
    font-family: Inter, Fredoka, system-ui, sans-serif;
}

.screen-toolbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px 18px;
    background: rgba(250, 250, 248, 0.96);
    border-bottom: 1px solid rgba(45, 52, 54, 0.12);
}

.screen-note {
    color: var(--paper-text-muted);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.toolbar-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.toolbar-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 2px solid var(--paper-outline);
    border-radius: 8px;
    background: var(--paper-card);
    color: var(--paper-outline);
    font: 800 13px/1 Inter, system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
}

.toolbar-btn.primary {
    background: var(--paper-primary);
    color: #fff;
}

.toolbar-btn svg {
    width: 17px;
    height: 17px;
}

.toolbar-btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.setup-panel {
    display: grid;
    grid-template-columns: minmax(220px, 320px) auto;
    gap: 20px;
    align-items: start;
    width: min(calc(var(--page-width) + 40px), calc(100vw - 24px));
    margin: 0 auto;
    padding: 18px 20px 0;
}

.setup-panel[hidden] {
    display: none;
}

.setup-controls {
    display: grid;
    gap: 12px;
    align-content: start;
    padding: 14px;
    background: var(--paper-card);
    border: 2px solid var(--paper-outline);
    border-radius: 8px;
}

.card-source-control {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.card-source-control legend {
    margin: 0 0 6px;
    padding: 0;
    color: var(--paper-text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.card-source-control p {
    margin: 0;
    color: var(--paper-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

.segmented-control {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 2px solid var(--paper-outline);
    border-radius: 8px;
}

.segmented-control label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.segmented-control label + label {
    border-left: 2px solid var(--paper-outline);
}

.segmented-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-control span {
    display: grid;
    min-height: 38px;
    place-items: center;
    padding: 6px 8px;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
}

.segmented-control input:checked + span {
    background: var(--paper-accent-yellow);
}

.segmented-control input:focus-visible + span {
    box-shadow: inset 0 0 0 3px rgba(225, 112, 85, 0.35);
}

.control-field {
    display: grid;
    gap: 6px;
    color: var(--paper-text-muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.control-select {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 2px solid var(--paper-outline);
    border-radius: 8px;
    background: #fff;
    color: var(--paper-outline);
    font: 800 13px/1 Inter, system-ui, sans-serif;
}

.control-field.is-active-control .control-select {
    box-shadow: 0 0 0 3px rgba(225, 112, 85, 0.24);
}

.stat-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.portrait-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.portrait-control-field span {
    font-size: 10px;
}

.portrait-control-field .control-select {
    min-height: 34px;
    padding: 0 8px;
    font-size: 11px;
}

.stat-control-field span {
    font-size: 10px;
}

.stat-control-field .control-select {
    min-height: 34px;
    padding: 0 8px;
    font-size: 11px;
}

.preview-panel {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.preview-title {
    color: var(--paper-text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.preview-card-mount {
    display: grid;
    min-width: var(--art-width);
    min-height: var(--art-height);
}

.preview-card-mount .print-card {
    box-shadow: 0 10px 24px rgba(45, 52, 54, 0.16);
}

.preview-card-mount [data-card-edit-target] {
    cursor: pointer;
}

.preview-card-mount [data-card-edit-target]:focus-visible,
.preview-card-mount [data-card-edit-target].is-edit-target-active {
    outline: 0.45mm solid rgba(225, 112, 85, 0.72);
    outline-offset: 0.6mm;
}

.empty-state {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24mm;
    color: var(--paper-text-muted);
    font-size: 4mm;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

.book {
    display: grid;
    gap: 16mm;
    justify-content: center;
    padding: 20px;
}

.book.is-waiting {
    display: none;
}

.book.rotate-backs .back-sheet .print-card {
    transform: rotate(180deg);
}

.sheet {
    position: relative;
    width: var(--page-width);
    height: var(--page-height);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(45, 52, 54, 0.18);
    break-after: page;
    page-break-after: always;
}

.sheet-grid {
    position: absolute;
    z-index: 1;
    left: var(--grid-left);
    top: var(--grid-top);
    display: grid;
    grid-template-columns: repeat(4, var(--art-width));
    grid-template-rows: repeat(2, var(--art-height));
    width: calc(var(--art-width) * 4);
    height: calc(var(--art-height) * 2);
}

.print-card {
    position: relative;
    width: var(--art-width);
    height: var(--art-height);
    overflow: hidden;
    background-color: var(--paper-card);
    --portrait-base: var(--paper-accent-blue);
    --portrait-base-soft: #EEF6FF;
    --portrait-band-a: rgba(255, 255, 255, 0.38);
    --portrait-band-b: rgba(212, 237, 218, 0.36);
    --portrait-mark-a: rgba(225, 112, 85, 0.22);
    --portrait-mark-b: rgba(255, 234, 167, 0.45);
    --portrait-line: rgba(45, 52, 54, 0.18);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.print-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 11%, var(--paper-accent-yellow) 0 11mm, transparent 11.4mm),
        radial-gradient(circle at 88% 91%, var(--paper-accent-pink) 0 14mm, transparent 14.4mm),
        linear-gradient(135deg, rgba(214,233,255,0.58) 0 18%, transparent 18% 42%, rgba(212,237,218,0.5) 42% 58%, transparent 58%),
        var(--paper-card);
    opacity: 0.88;
}

.card-paper-art {
    display: none;
}

.card-face {
    position: absolute;
    left: var(--bleed);
    top: var(--bleed);
    width: var(--trim-width);
    height: var(--trim-height);
    overflow: hidden;
    background: transparent;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.card-face::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: var(--frame-gap);
    border: var(--line) solid var(--paper-outline);
    border-radius: 3.6mm;
    box-shadow: var(--frame-shadow) var(--frame-shadow) 0 var(--paper-shadow);
    pointer-events: none;
}

.back-card::after {
    content: none;
}

.cut-lines {
    position: absolute;
    z-index: 20;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.cut-line {
    fill: none;
    stroke: var(--cut-line);
    stroke-width: 0.15mm;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.safe-frame {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto auto auto;
    gap: 0.85mm;
    height: 100%;
    padding: 3.35mm 3.35mm 3.65mm;
}

.name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.9mm;
    align-items: center;
}

.name-plate {
    display: grid;
    place-items: center;
    justify-self: start;
    max-width: 38.8mm;
    padding: 0.45mm 1.45mm 0.55mm;
    overflow: hidden;
    background: var(--paper-card);
    border: 0.58mm solid var(--paper-outline);
    border-radius: 2.6mm;
    box-shadow: none;
}

.top-name-canvas {
    display: block;
    width: 33.2mm;
    height: 9.4mm;
}

.name-plate.is-two-line .top-name-canvas {
    height: 12.4mm;
}

.level-chip {
    display: grid;
    place-items: center;
    min-width: 12mm;
    padding: 0.75mm 1.15mm 0.95mm;
    background: var(--paper-accent-yellow);
    border: var(--line) solid var(--paper-outline);
    border-radius: 2.3mm;
    box-shadow: none;
    font-family: Fredoka, Inter, sans-serif;
    line-height: 1;
    transform: translateX(-2.15mm);
}

.level-chip span {
    color: var(--paper-text-muted);
    font-size: 1.7mm;
    font-weight: 800;
    text-transform: uppercase;
}

.level-chip strong {
    display: block;
    font-size: 5.25mm;
    font-weight: 700;
}

.portrait-panel {
    position: relative;
    display: grid;
    min-height: 35.6mm;
    margin-top: 0.25mm;
    margin-bottom: 0.7mm;
    padding: 1.9mm 1.7mm;
    overflow: hidden;
    background: var(--portrait-base);
    border: var(--line) solid var(--paper-outline);
    border-radius: 3.3mm;
    box-shadow: none;
}

.portrait-panel::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 2.4mm;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.34) 0 29%, transparent 29% 100%),
        linear-gradient(330deg, transparent 0 57%, var(--portrait-band-b) 57% 70%, transparent 70% 100%),
        linear-gradient(180deg, var(--portrait-band-a), rgba(255, 255, 255, 0.1)),
        var(--portrait-base);
    border: 0.42mm solid var(--portrait-line);
    border-radius: 2.2mm;
    pointer-events: none;
}

.print-card[data-portrait-pattern="clean-diagonals"] .portrait-panel::before {
    background:
        linear-gradient(150deg, var(--portrait-band-a) 0 29%, transparent 29% 100%),
        linear-gradient(330deg, transparent 0 57%, var(--portrait-band-b) 57% 70%, transparent 70% 100%),
        linear-gradient(180deg, var(--portrait-band-a), rgba(255, 255, 255, 0.1)),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="soft-ribbons"] .portrait-panel::before {
    background:
        linear-gradient(148deg, transparent 0 16%, var(--portrait-band-a) 16% 30%, transparent 30% 100%),
        linear-gradient(148deg, transparent 0 48%, var(--portrait-band-b) 48% 61%, transparent 61% 100%),
        linear-gradient(328deg, transparent 0 64%, var(--portrait-mark-b) 64% 74%, transparent 74% 100%),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="window-pane"] .portrait-panel::before {
    background:
        linear-gradient(90deg, transparent 0 47%, var(--portrait-line) 47% 48.3%, transparent 48.3% 100%),
        linear-gradient(0deg, transparent 0 48%, var(--portrait-line) 48% 49.3%, transparent 49.3% 100%),
        linear-gradient(135deg, var(--portrait-band-a), transparent 46%),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="notebook-lines"] .portrait-panel::before {
    background:
        repeating-linear-gradient(0deg, transparent 0 4.2mm, var(--portrait-band-a) 4.2mm 4.5mm),
        linear-gradient(90deg, var(--portrait-mark-a) 0 0.7mm, transparent 0.7mm 100%),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="tiny-dots"] .portrait-panel::before {
    background:
        linear-gradient(180deg, var(--portrait-base-soft), var(--portrait-base));
}

.print-card[data-portrait-pattern="tiny-dots"] .portrait-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 4.2mm 5.1mm;
    background:
        radial-gradient(circle, var(--portrait-mark-a) 0 0.72mm, transparent 0.82mm) 1.1mm 1.15mm / 5.2mm 5.2mm repeat,
        radial-gradient(circle, rgba(45, 52, 54, 0.12) 0 0.36mm, transparent 0.46mm) 3.7mm 3.65mm / 5.2mm 5.2mm repeat,
        radial-gradient(circle, var(--portrait-mark-b) 0 0.44mm, transparent 0.54mm) 5.9mm 1.75mm / 10.4mm 10.4mm repeat;
    border-radius: 1.1mm;
    pointer-events: none;
}

.print-card[data-portrait-pattern="paper-fibres"] .portrait-panel::before {
    background:
        repeating-linear-gradient(16deg, transparent 0 2.8mm, var(--portrait-band-a) 2.8mm 3mm),
        repeating-linear-gradient(103deg, transparent 0 4.8mm, var(--portrait-band-b) 4.8mm 5mm),
        linear-gradient(180deg, var(--portrait-base-soft), var(--portrait-base));
}

.print-card[data-portrait-pattern="corner-tabs"] .portrait-panel::before {
    background:
        linear-gradient(135deg, var(--portrait-mark-b) 0 13%, transparent 13% 100%),
        linear-gradient(315deg, var(--portrait-band-b) 0 15%, transparent 15% 100%),
        linear-gradient(225deg, var(--portrait-mark-a) 0 12%, transparent 12% 100%),
        linear-gradient(180deg, var(--portrait-base-soft), var(--portrait-base));
}

.print-card[data-portrait-pattern="offset-blocks"] .portrait-panel::before {
    background:
        linear-gradient(90deg, transparent 0 8%, var(--portrait-band-a) 8% 26%, transparent 26% 100%),
        linear-gradient(0deg, transparent 0 58%, var(--portrait-band-b) 58% 77%, transparent 77% 100%),
        linear-gradient(90deg, transparent 0 68%, var(--portrait-mark-b) 68% 86%, transparent 86% 100%),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="chevron-fold"] .portrait-panel::before {
    background:
        repeating-linear-gradient(45deg, transparent 0 6mm, var(--portrait-band-a) 6mm 6.5mm),
        repeating-linear-gradient(135deg, transparent 0 6mm, var(--portrait-band-b) 6mm 6.5mm),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="topographic"] .portrait-panel::before {
    background:
        repeating-radial-gradient(ellipse at 35% 55%, transparent 0 4mm, var(--portrait-band-a) 4mm 4.4mm),
        repeating-radial-gradient(ellipse at 77% 31%, transparent 0 5.4mm, var(--portrait-band-b) 5.4mm 5.7mm),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="stacked-bands"] .portrait-panel::before {
    background:
        linear-gradient(0deg, transparent 0 14%, var(--portrait-band-a) 14% 27%, transparent 27% 45%, var(--portrait-band-b) 45% 58%, transparent 58% 76%, var(--portrait-mark-b) 76% 87%, transparent 87% 100%),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="dashed-grid"] .portrait-panel::before {
    background:
        repeating-linear-gradient(90deg, transparent 0 5.2mm, var(--portrait-line) 5.2mm 5.5mm, transparent 5.5mm 6.6mm),
        repeating-linear-gradient(0deg, transparent 0 5.2mm, var(--portrait-line) 5.2mm 5.5mm, transparent 5.5mm 6.6mm),
        linear-gradient(180deg, var(--portrait-base-soft), var(--portrait-base));
}

.print-card[data-portrait-pattern="patchwork"] .portrait-panel::before {
    background:
        linear-gradient(var(--portrait-band-a), var(--portrait-band-a)) left 9% top 12% / 27% 25% no-repeat,
        linear-gradient(var(--portrait-mark-b), var(--portrait-mark-b)) left 39% top 10% / 23% 20% no-repeat,
        linear-gradient(var(--portrait-band-b), var(--portrait-band-b)) right 10% top 17% / 26% 28% no-repeat,
        linear-gradient(var(--portrait-mark-a), var(--portrait-mark-a)) left 12% bottom 17% / 26% 27% no-repeat,
        linear-gradient(var(--portrait-band-a), var(--portrait-band-a)) left 41% bottom 16% / 21% 23% no-repeat,
        linear-gradient(var(--portrait-mark-b), var(--portrait-mark-b)) right 12% bottom 18% / 23% 23% no-repeat,
        linear-gradient(150deg, rgba(255, 255, 255, 0.22) 0 32%, transparent 32% 100%),
        linear-gradient(330deg, transparent 0 62%, var(--portrait-band-b) 62% 74%, transparent 74% 100%),
        linear-gradient(180deg, var(--portrait-base-soft), var(--portrait-base));
}

.print-card[data-portrait-pattern="patchwork"] .portrait-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 4mm 4.8mm;
    background:
        repeating-linear-gradient(90deg, var(--portrait-line) 0 0.65mm, transparent 0.65mm 1.62mm) left 0 top 34% / 100% 0.26mm no-repeat,
        repeating-linear-gradient(90deg, var(--portrait-line) 0 0.65mm, transparent 0.65mm 1.62mm) left 0 top 66% / 100% 0.26mm no-repeat,
        repeating-linear-gradient(0deg, var(--portrait-line) 0 0.65mm, transparent 0.65mm 1.62mm) left 33% top 0 / 0.26mm 100% no-repeat,
        repeating-linear-gradient(0deg, var(--portrait-line) 0 0.65mm, transparent 0.65mm 1.62mm) left 65% top 0 / 0.26mm 100% no-repeat,
        linear-gradient(0deg, transparent 0 48%, rgba(255, 255, 255, 0.26) 48% 52%, transparent 52% 100%) left 8% top 7% / 19% 14% no-repeat,
        linear-gradient(90deg, transparent 0 45%, rgba(255, 255, 255, 0.24) 45% 55%, transparent 55% 100%) right 12% bottom 9% / 16% 18% no-repeat;
    border-radius: 1.1mm;
    opacity: 0.62;
    pointer-events: none;
}

.print-card[data-portrait-pattern="stitched-edge"] .portrait-panel::before {
    background:
        repeating-linear-gradient(90deg, var(--portrait-line) 0 1.3mm, transparent 1.3mm 2.8mm) left 1.7mm top 1.5mm / calc(100% - 3.4mm) 0.32mm no-repeat,
        repeating-linear-gradient(90deg, var(--portrait-line) 0 1.3mm, transparent 1.3mm 2.8mm) left 1.7mm bottom 1.5mm / calc(100% - 3.4mm) 0.32mm no-repeat,
        repeating-linear-gradient(0deg, var(--portrait-line) 0 1.3mm, transparent 1.3mm 2.8mm) left 1.5mm top 1.7mm / 0.32mm calc(100% - 3.4mm) no-repeat,
        repeating-linear-gradient(0deg, var(--portrait-line) 0 1.3mm, transparent 1.3mm 2.8mm) right 1.5mm top 1.7mm / 0.32mm calc(100% - 3.4mm) no-repeat,
        linear-gradient(180deg, var(--portrait-base-soft), var(--portrait-base));
}

.print-card[data-portrait-pattern="sunlit-stripes"] .portrait-panel::before {
    background:
        repeating-linear-gradient(154deg, transparent 0 6mm, var(--portrait-band-a) 6mm 8.4mm, transparent 8.4mm 13mm),
        linear-gradient(180deg, var(--portrait-base-soft), var(--portrait-base));
}

.print-card[data-portrait-pattern="calm-waves"] .portrait-panel::before {
    background:
        radial-gradient(ellipse at -14% 52%, var(--portrait-band-a) 0 34%, transparent 34.5%),
        radial-gradient(ellipse at 114% 48%, var(--portrait-band-b) 0 35%, transparent 35.5%),
        linear-gradient(180deg, var(--portrait-base-soft), var(--portrait-base));
}

.print-card[data-portrait-pattern="torn-strips"] .portrait-panel::before {
    background:
        linear-gradient(172deg, transparent 0 18%, var(--portrait-band-a) 18% 31%, transparent 31% 100%),
        linear-gradient(184deg, transparent 0 52%, var(--portrait-band-b) 52% 64%, transparent 64% 100%),
        linear-gradient(176deg, transparent 0 75%, var(--portrait-mark-b) 75% 85%, transparent 85% 100%),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="folded-corners"] .portrait-panel::before {
    background:
        linear-gradient(135deg, var(--portrait-band-a) 0 16%, transparent 16% 100%),
        linear-gradient(225deg, var(--portrait-band-b) 0 14%, transparent 14% 100%),
        linear-gradient(315deg, var(--portrait-mark-b) 0 18%, transparent 18% 100%),
        linear-gradient(45deg, var(--portrait-mark-a) 0 13%, transparent 13% 100%),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="confetti"] .portrait-panel::before {
    background:
        linear-gradient(150deg, var(--portrait-band-a) 0 27%, transparent 27% 100%),
        linear-gradient(330deg, transparent 0 61%, var(--portrait-band-b) 61% 73%, transparent 73% 100%),
        radial-gradient(ellipse at 84% 18%, var(--portrait-mark-b) 0 9%, transparent 9.5%),
        var(--portrait-base);
}

.print-card[data-portrait-pattern="confetti"] .portrait-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 4mm 5.1mm;
    background:
        linear-gradient(32deg, transparent 0 20%, var(--portrait-mark-a) 20% 80%, transparent 80% 100%) left 6% top 17% / 6.2mm 1.65mm no-repeat,
        linear-gradient(32deg, transparent 0 20%, rgba(45, 52, 54, 0.12) 20% 80%, transparent 80% 100%) left 7% top 19% / 6.2mm 1.65mm no-repeat,
        linear-gradient(118deg, transparent 0 20%, var(--portrait-mark-b) 20% 80%, transparent 80% 100%) left 27% top 11% / 5.1mm 1.55mm no-repeat,
        linear-gradient(118deg, transparent 0 20%, rgba(45, 52, 54, 0.1) 20% 80%, transparent 80% 100%) left 28% top 13% / 5.1mm 1.55mm no-repeat,
        radial-gradient(circle at center, var(--portrait-mark-a) 0 1.02mm, transparent 1.14mm) left 48% top 18% / 2.55mm 2.55mm no-repeat,
        radial-gradient(circle at center, rgba(45, 52, 54, 0.1) 0 1.02mm, transparent 1.14mm) left 49% top 20% / 2.55mm 2.55mm no-repeat,
        linear-gradient(82deg, transparent 0 20%, var(--portrait-mark-b) 20% 80%, transparent 80% 100%) right 15% top 14% / 5.7mm 1.65mm no-repeat,
        linear-gradient(82deg, transparent 0 20%, rgba(45, 52, 54, 0.11) 20% 80%, transparent 80% 100%) right 14% top 16% / 5.7mm 1.65mm no-repeat,
        linear-gradient(var(--portrait-mark-a), var(--portrait-mark-a)) right 7% top 31% / 2.18mm 2.18mm no-repeat,
        linear-gradient(rgba(45, 52, 54, 0.1), rgba(45, 52, 54, 0.1)) right 6% top 33% / 2.18mm 2.18mm no-repeat,
        radial-gradient(circle at center, var(--portrait-mark-a) 0 0.86mm, transparent 0.98mm) left 13% top 55% / 2.2mm 2.2mm no-repeat,
        linear-gradient(24deg, transparent 0 20%, var(--portrait-band-b) 20% 80%, transparent 80% 100%) left 24% top 72% / 6.4mm 1.7mm no-repeat,
        linear-gradient(24deg, transparent 0 20%, rgba(45, 52, 54, 0.11) 20% 80%, transparent 80% 100%) left 25% top 74% / 6.4mm 1.7mm no-repeat,
        linear-gradient(var(--portrait-mark-b), var(--portrait-mark-b)) left 51% top 67% / 2.05mm 2.05mm no-repeat,
        linear-gradient(140deg, transparent 0 19%, var(--portrait-mark-a) 19% 81%, transparent 81% 100%) right 27% top 57% / 5.6mm 1.62mm no-repeat,
        linear-gradient(140deg, transparent 0 19%, rgba(45, 52, 54, 0.11) 19% 81%, transparent 81% 100%) right 26% top 59% / 5.6mm 1.62mm no-repeat,
        radial-gradient(circle at center, var(--portrait-mark-b) 0 0.96mm, transparent 1.08mm) right 10% top 70% / 2.35mm 2.35mm no-repeat;
    border-radius: 1.1mm;
    opacity: 0.92;
    pointer-events: none;
}

.print-card[data-portrait-pattern="blank-wash"] .portrait-panel::before {
    background:
        linear-gradient(180deg, var(--portrait-base-soft), var(--portrait-base));
}

.portrait-pattern-canvas {
    position: absolute;
    z-index: 0;
    inset: 2.4mm;
    display: block;
    width: calc(100% - 4.8mm);
    height: calc(100% - 4.8mm);
    border: 0.42mm solid var(--portrait-line);
    border-radius: 2.2mm;
}

.portrait-panel::before,
.portrait-panel::after {
    content: none;
}

.champion-canvas {
    position: relative;
    z-index: 1;
    display: block;
    justify-self: center;
    align-self: center;
    width: 38mm;
    height: 38mm;
}

.stat-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6mm;
    margin-top: 0.7mm;
    transform: translateY(0.25mm);
}

.stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.95mm;
    align-items: center;
    min-height: 8.4mm;
    padding: 0.82mm 1.35mm 0.82mm 1.12mm;
    background: var(--paper-card);
    border: 0.58mm solid var(--paper-outline);
    border-radius: 2.4mm;
    box-shadow: none;
}

.stat.is-green,
.stat.is-yellow,
.stat.is-pink {
    background: var(--paper-card);
}

.stat.is-pink {
    padding-right: 1.8mm;
}

.level-chip.is-class-leader,
.stat.is-class-leader {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(145deg,
            rgba(191, 244, 235, 0.96) 0 19%,
            rgba(209, 232, 255, 0.96) 19% 37%,
            rgba(231, 216, 255, 0.96) 37% 55%,
            rgba(255, 214, 229, 0.96) 55% 73%,
            rgba(255, 238, 174, 0.96) 73% 88%,
            rgba(203, 239, 222, 0.96) 88% 100%);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.level-chip.is-class-leader::before,
.stat.is-class-leader::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(35deg, transparent 0 24%, rgba(255, 255, 255, 0.44) 24% 39%, transparent 39% 100%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.32) 0 22%, transparent 22% 61%, rgba(180, 236, 224, 0.32) 61% 100%),
        linear-gradient(68deg, transparent 0 56%, rgba(255, 232, 176, 0.34) 56% 76%, transparent 76% 100%);
    pointer-events: none;
}

.level-chip.is-class-leader::after,
.stat.is-class-leader::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -42%;
    left: 16%;
    width: 20%;
    height: 184%;
    transform: rotate(25deg);
    background: rgba(255, 255, 255, 0.48);
    pointer-events: none;
}

.level-chip.is-class-leader > *,
.stat.is-class-leader > * {
    position: relative;
    z-index: 1;
}

.stat strong {
    min-width: 7mm;
    color: var(--paper-outline);
    font-family: Fredoka, Inter, sans-serif;
    font-size: 5.85mm;
    font-weight: 700;
    line-height: 0.85;
    text-align: right;
}

.stat[data-stat-key="winRate"] strong,
.stat[data-stat-key="podiumRate"] strong {
    min-width: 9.4mm;
    font-size: 4.72mm;
}

.stat span {
    color: var(--paper-text-muted);
    font-size: 1.78mm;
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
}

.stat.is-pink span {
    font-size: 1.58mm;
}

.card-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: 1.8mm;
    align-items: center;
    padding: 0.25mm 1.35mm 0.45mm 1.25mm;
    color: var(--paper-text-muted);
    font-size: 1.92mm;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    transform: translateY(-0.55mm);
}

.footer-mark {
    display: grid;
    place-items: center;
    width: 5mm;
    height: 5mm;
    background: var(--paper-primary);
    border: 0.5mm solid var(--paper-outline);
    border-radius: 1.4mm;
    box-shadow: none;
    color: #fff;
    font-family: Fredoka, Inter, sans-serif;
    font-size: 1.82mm;
    font-weight: 700;
}

.card-footer span:nth-child(2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-number {
    color: var(--paper-primary-dark);
    font-family: Fredoka, Inter, sans-serif;
    white-space: nowrap;
}

.back-frame {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    gap: 0;
    height: 100%;
    padding: 6mm 4.8mm;
    text-align: center;
}

.back-title {
    display: grid;
    grid-row: 2;
    gap: 1.4mm;
    justify-items: center;
}

.back-kicker {
    color: var(--paper-primary-dark);
    font-family: Fredoka, Inter, sans-serif;
    font-size: 3.6mm;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.back-year {
    font-family: Fredoka, Inter, sans-serif;
    font-size: 10.2mm;
    font-weight: 700;
    line-height: 0.95;
}

.back-subtitle {
    color: var(--paper-text-muted);
    font-size: 2.65mm;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

@media (max-width: 920px) {
    .screen-toolbar {
        grid-template-columns: 1fr;
    }

    .toolbar-actions {
        flex-wrap: wrap;
    }

    .setup-panel {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .setup-controls {
        width: min(100%, 360px);
    }

    .preview-panel {
        justify-items: center;
    }

    .book {
        justify-content: start;
        overflow-x: auto;
    }
}

@page {
    size: A4 landscape;
    margin: 0;
}

@media print {
    html,
    body {
        width: var(--page-width);
        min-height: var(--page-height);
        background: #fff;
    }

    .screen-toolbar {
        display: none;
    }

    .setup-panel {
        display: none !important;
    }

    .book {
        display: block;
        padding: 0;
    }

    .book.is-waiting {
        display: none;
    }

    .sheet {
        box-shadow: none;
    }

    .print-card {
        background: var(--paper-card);
    }

    .print-card::before {
        content: none;
    }

    .card-face,
    .safe-frame,
    .back-frame {
        background: transparent;
    }

    .safe-frame,
    .back-frame {
        z-index: 1;
    }

    .card-paper-art {
        position: absolute;
        z-index: 0;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
        pointer-events: none;
    }

    .level-chip.is-class-leader,
    .stat.is-class-leader {
        isolation: auto;
        background: linear-gradient(145deg,
            #BFF4EB 0 19%,
            #D1E8FF 19% 37%,
            #E7D8FF 37% 55%,
            #FFD6E5 55% 73%,
            #FFEEAE 73% 88%,
            #CBEFDE 88% 100%);
    }

    .level-chip.is-class-leader::before,
    .level-chip.is-class-leader::after,
    .stat.is-class-leader::before,
    .stat.is-class-leader::after {
        content: none;
    }
}