[hidden]{display:none!important}
/* Printshop – len to, čo je špecifické pre túto appku; komponenty sú v kit.css */
body{margin:0;min-height:100vh}
.ms-topbar{border-bottom:1px solid var(--ms-line);flex-wrap:nowrap;overflow:hidden}
.top-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top-spacer{flex:1}

.layout{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:22px;
  padding:22px;align-items:start}
.panel{display:flex;flex-direction:column;gap:16px;position:sticky;top:22px}

.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:120px;padding:18px;border:1px dashed var(--ms-line-strong);border-radius:var(--ms-radius);
  cursor:pointer;text-align:center;transition:.14s}
.drop:hover,.drop.is-over{border-color:var(--ms-accent);background:var(--ms-raised)}
.drop.has-files{border-style:solid;border-color:var(--ms-fg)}
.drop__title{font-weight:640}

.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.unit{position:relative}
.unit .ms-input{padding-right:40px}
.unit span{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font:12px var(--ms-mono);color:var(--ms-faint);pointer-events:none}

.group{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.group legend{padding:0;margin-bottom:8px}
.presets{display:flex;flex-direction:column;gap:6px}
.preset{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:10px 12px;
  border:1px solid var(--ms-line);border-radius:var(--ms-radius);cursor:pointer;transition:.14s}
.preset:hover{border-color:var(--ms-line-strong)}
.preset:has(input:checked){border-color:var(--ms-fg)}
.preset input{grid-row:span 2;margin-top:3px;accent-color:var(--ms-accent);width:15px;height:15px}
.preset b{font-size:13.5px;font-weight:600}
.preset small{color:var(--ms-mut);font-size:12px;line-height:1.4}

.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ms-line-strong);
  border-radius:var(--ms-radius);overflow:visible}
.seg label{display:block;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;text-align:center;padding:8px 6px;font-size:13px;font-weight:600;
  color:var(--ms-mut);border-radius:calc(var(--ms-radius) - 1px);transition:.14s}
.seg input:checked+span{background:var(--ms-fg);color:var(--ms-bg)}
.seg input:focus-visible+span{outline:2px solid var(--ms-accent);outline-offset:1px}
.submit{width:100%;justify-content:center}

.results{min-width:0;display:flex;flex-direction:column;gap:14px}
.results__head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.list{display:flex;flex-direction:column;gap:16px}

.batch{border:1px solid var(--ms-line);border-radius:var(--ms-radius-lg);background:var(--ms-surface);
  padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.batch.is-running{border-color:var(--ms-accent)}
.batch__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.batch__name{font-weight:640;font-size:15px;min-width:0;overflow-wrap:anywhere}
.batch__meta{color:var(--ms-mut);font-size:12.5px;flex:1 1 220px;min-width:0}
.batch__log{font:12px/1.5 var(--ms-mono);color:var(--ms-mut);overflow-wrap:anywhere}
.badge-run{color:var(--ms-accent);border-color:var(--ms-accent)}
.badge-err{color:#d93a3a;border-color:#d93a3a}

.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.shot{display:flex;flex-direction:column;gap:6px;min-width:0}
.shot__img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--ms-radius);
  border:1px solid var(--ms-line);background:var(--ms-raised);cursor:zoom-in}
.shot__img.is-wait{display:grid;place-items:center;cursor:default;color:var(--ms-faint);font-size:12px}
.shot__row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.shot__name{font-size:12.5px;font-weight:600;flex:1;min-width:0}
.shot a{font:12px var(--ms-mono);color:var(--ms-mut);text-decoration:none;border:1px solid var(--ms-line);
  border-radius:999px;padding:2px 8px}
.shot a:hover{color:var(--ms-fg);border-color:var(--ms-fg)}

.viewer{position:fixed;inset:0;background:rgba(0,0,0,.97);display:grid;place-items:center;z-index:50;padding:24px}
.viewer[hidden]{display:none}
.viewer img{max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);object-fit:contain;cursor:zoom-out}
.viewer__close{position:absolute;top:16px;right:16px;background:var(--ms-surface)}
.viewer__close[data-tip]::after,.viewer__close[data-tip]::before{bottom:auto;top:calc(100% + 9px)}

@media (max-width:940px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .panel{position:static}
}
@media (max-width:520px){
  .layout{padding:14px;gap:14px}
  .top-sub{display:none}
  .pair{grid-template-columns:1fr}
}
/* skryté tooltipy nesmú rozširovať stránku (kit ich drží len cez opacity) */
[data-tip]:not(:hover):not(:focus-visible)::after,
[data-tip]:not(:hover):not(:focus-visible)::before{display:none}

/* ---------- mobil a sťahovanie ---------- */
.batch__head .ms-btn{margin-left:auto}
.viewer{grid-template-rows:1fr auto;gap:14px}
.viewer img{max-height:calc(100vh - 110px)}
.viewer__dl{justify-self:center}
.viewer[hidden]{display:none}
@media (max-width:940px){
  .results{order:2}
}
@media (max-width:520px){
  .ms-topbar{padding:0 12px;gap:10px}
  .panel{padding:14px;gap:14px}
  .drop{min-height:96px;border-style:solid;border-color:var(--ms-line-strong)}
  .drop__title{font-size:16px}
  .preset{padding:9px 10px}
  .preset small{display:none}          /* na telefóne ustupuje popis, nie voľba */
  .presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .preset input{grid-row:auto;margin-top:1px}
  .preset b{font-size:12.5px;line-height:1.3}
  .shots{grid-template-columns:1fr 1fr;gap:10px}
  .shot__row{gap:6px}
  .shot__name{flex-basis:100%;font-size:12px}
  .batch{padding:12px}
  .batch__meta{flex-basis:100%;order:3}
  .submit{position:sticky;bottom:10px;z-index:5;box-shadow:0 6px 24px rgba(0,0,0,.45)}
  .viewer{padding:12px}
}
a.ms-btn{text-decoration:none}