:root { --modra: #1d4ed8; --modra-sv: #dbeafe; --text: #0f172a; --sedy: #64748b; --okraj: #e2e8f0; --pozadi: #f1f5f9; --bila: #fff; --cervena: #dc2626; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--pozadi); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
h1 { font-size: 1.35rem; margin: 0; } h2 { font-size: 1rem; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }
p { margin: .3rem 0; }
.hlavicka { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: var(--bila); border-bottom: 1px solid var(--okraj); }
.hlavicka p { color: var(--sedy); font-size: .85rem; }
.logo { font-size: 2rem; }
.odznak { margin-left: auto; font-size: .75rem; padding: 3px 10px; border-radius: 999px; background: var(--modra-sv); color: var(--modra); white-space: nowrap; }
.rozlozeni { display: grid; grid-template-columns: 380px 1fr; gap: 16px; padding: 16px; max-width: 1700px; margin: 0 auto; }
.panel { display: flex; flex-direction: column; gap: 12px; }
.blok { background: var(--bila); border: 1px solid var(--okraj); border-radius: 10px; padding: 14px; }
.dropzona { border: 2px dashed #94a3b8; border-radius: 10px; padding: 16px; text-align: center; cursor: pointer; color: var(--sedy); font-size: .9rem; background: #f8fafc; }
.dropzona.aktivni, .dropzona:hover { border-color: var(--modra); background: var(--modra-sv); color: var(--modra); }
.dz-ikona { font-size: 2rem; }
.radek { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; font-size: .9rem; }
.radek label { display: flex; align-items: center; gap: 6px; }
.mezera { margin-top: 12px; }
.tlacitka { gap: 8px; }
select, input[type=number] { font: inherit; padding: 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: var(--bila); }
.tl { font: inherit; font-size: .9rem; padding: 7px 12px; border-radius: 7px; border: 1px solid #cbd5e1; background: var(--bila); cursor: pointer; }
.tl:hover { background: #f8fafc; } .tl:disabled { opacity: .5; cursor: not-allowed; }
.tl.primarni { background: var(--modra); color: var(--bila); border-color: var(--modra); font-weight: 600; } .tl.primarni:hover:not(:disabled) { background: #1e40af; }
.tl.sekundarni { color: var(--modra); border-color: #93c5fd; }
.tl.ikonka { padding: 5px 10px; font-size: 1.05rem; line-height: 1; }
.tl.odkaz { border: 0; background: none; color: var(--modra); text-decoration: underline; padding: 0; font-size: .85rem; margin-left: auto; font-weight: normal; }
input[type=range] { width: 100%; accent-color: var(--modra); }
.hodnota { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--modra); }
.skala { display: flex; justify-content: space-between; font-size: .68rem; color: var(--sedy); margin-top: -2px; }
.predvolby { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.predvolby button { font-size: .78rem; padding: 4px 9px; }
.predvolby button.aktivni { background: var(--modra); color: var(--bila); border-color: var(--modra); }
.pozn { font-size: .8rem; color: var(--sedy); }
.prepinac { display: flex; gap: 14px; font-size: .9rem; } .prepinac label { display: flex; gap: 5px; align-items: center; }
.vady { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow: auto; }
.vady li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 8px; align-items: center; padding: 6px 8px; border-radius: 7px; border: 1px solid transparent; font-size: .85rem; }
.vady li.vybrana { background: #eff6ff; border-color: #bfdbfe; }
.vady li.neaktivni { opacity: .45; }
.vady .typ { font-size: .9rem; }
.vady .nazev { font-weight: 500; }
.vady .pct { font-variant-numeric: tabular-nums; color: var(--modra); font-size: .8rem; min-width: 3.2em; text-align: right; }
.vady input[type=range] { grid-column: 2 / 4; height: 14px; }
.vady .skupina { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sedy); margin: 8px 0 2px; padding-left: 4px; }
.nahled { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.listovani { display: flex; align-items: center; gap: 8px; background: var(--bila); border: 1px solid var(--okraj); border-radius: 10px; padding: 8px 12px; font-size: .9rem; }
.odsazeni { flex: 1; }
.prepinac-male { display: flex; gap: 5px; align-items: center; font-size: .85rem; }
.platna { position: relative; display: flex; gap: 12px; justify-content: center; align-items: flex-start; background: #cbd5e1; border-radius: 10px; padding: 16px; min-height: 420px; }
.plátno { margin: 0; flex: 1 1 0; min-width: 0; text-align: center; }
.plátno canvas { width: 100%; height: auto; max-height: 82vh; object-fit: contain; background: var(--bila); box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.plátno figcaption { font-size: .8rem; color: #334155; margin-top: 6px; }
.prazdno { text-align: center; color: #475569; padding: 60px 20px; }
.spinner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(241,245,249,.7); border-radius: 10px; font-weight: 600; color: var(--modra); }
.spinner div { width: 34px; height: 34px; border: 4px solid var(--modra-sv); border-top-color: var(--modra); border-radius: 50%; animation: toc .8s linear infinite; }
@keyframes toc { to { transform: rotate(360deg); } }
.vysvetleni { background: var(--bila); border: 1px solid var(--okraj); border-radius: 10px; padding: 14px; }
.karta { border: 1px solid var(--okraj); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.karta h3 { margin: 0; font-size: .95rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.karta .stitek { font-size: .7rem; padding: 2px 7px; border-radius: 999px; background: var(--pozadi); color: var(--sedy); }
.karta .stitek.inkjet { background: #e0f2fe; color: #0369a1; } .karta .stitek.laser { background: #fef3c7; color: #b45309; } .karta .stitek.mech { background: #e2e8f0; color: #334155; }
.karta .detail { font-size: .8rem; color: var(--sedy); margin: 2px 0 6px; }
.karta dl { margin: 0; display: grid; grid-template-columns: 7.5em 1fr; gap: 3px 10px; font-size: .85rem; }
.karta dt { font-weight: 600; color: #334155; } .karta dd { margin: 0; }
dialog { border: 0; border-radius: 12px; padding: 0; width: min(900px, 94vw); max-height: 90vh; }
dialog::backdrop { background: rgba(15,23,42,.5); }
.dlg-hlava { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--okraj); position: sticky; top: 0; background: var(--bila); }
.dlg-hlava h2 { margin: 0; }
#katalog-obsah { padding: 14px 16px; }
@media (max-width: 980px) { .rozlozeni { grid-template-columns: 1fr; } .vady { max-height: none; } .platna { flex-direction: column; } }