/* ════════════════════════════════════════════════════════════════════════
   studio.css — sdílené styly pro Studio (doplňkové nástroje Nunoi).
   Použij na tools.php a jednotlivých nástrojích (bg-remove.php, ...).
   NEpoužívat na index.php (ten má vlastní inline styly).
   Vyžaduje _header_css.php v <head> a _header.php po <body>.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --terra: #B85C2E;
  --terra-light: #C46A3A;
  --terra-dim: #7A3D1E;
  --terra-glow: rgba(184,92,46,0.10);
  --terra-bg: rgba(184,92,46,0.05);
  --bg: #FBF8F4;
  --bg2: #F5EFE8;
  --surface: #FFFFFF;
  --surface2: #F8F3EE;
  --border: #EAE0D6;
  --border2: #D8CFC4;
  --text: #18100A;
  --text-dim: #7A6A58;
  --text-muted: #B8A898;
  --green: #5A8A5A;
  --red: #C45050;
  --r: 18px;
  --r-sm: 12px;
  --header-h: 64px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  background: var(--bg); color: var(--text);
  font-family: 'Inter', system-ui, sans-serif; line-height: 1.5;
}
body { padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }

/* ── Header (jako index/home — fixed, blur, spodní linka) ── */
.hdr {
  position: fixed; top:0; left:0; right:0;
  background: rgba(250,247,244,0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top); z-index: 100;
}

/* ── Layout ── */
.studio-wrap { max-width: 560px; margin: 0 auto; padding: 28px 22px 100px; }
@media(min-width:900px){
  .studio-wrap { max-width: 1040px; padding: 56px 40px 120px; }
}
.studio-head { margin-bottom: 26px; }
.studio-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
  margin-bottom: 8px;
}
.studio-sub { color: var(--text-dim); font-size: 15px; }
@media(min-width:900px){
  .studio-title { font-size: 42px; margin-bottom: 12px; }
  .studio-sub { font-size: 17px; }
  .studio-head { margin-bottom: 40px; }
}
.studio-back {
  display:inline-flex; align-items:center; gap:6px;
  color: var(--text-muted); text-decoration:none; font-size:13px; font-weight:600;
  margin-bottom:16px; transition: color .15s;
}
.studio-back:hover { color: var(--terra); }

/* ── Rozcestník: karty služeb ── */
.tool-grid { display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:560px){ .tool-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:900px){ .tool-grid{ grid-template-columns:1fr 1fr 1fr; gap:22px; } }

/* ── Seskupené sekce nástrojů (rámeček + nadpis) ── */
.tool-section { border:1px solid var(--border); border-radius: var(--r); background: var(--surface2); padding:18px; margin-bottom:18px; }
@media(min-width:900px){ .tool-section { padding:26px; border-radius:24px; margin-bottom:26px; } }
.tool-section-title { font-family:'Playfair Display', Georgia, serif; font-size:18px; font-weight:600; letter-spacing:-.01em; margin-bottom:14px; }
@media(min-width:900px){ .tool-section-title { font-size:22px; margin-bottom:20px; } }
/* karty uvnitř sekce mají světlejší okraj, ať odsazují od šedého podkladu */
.tool-section .tool-card { background: var(--surface); }
/* samostatná „soon“ karta dole — bez sekce, na šířku jednoho sloupce */
.tool-loose { display:grid; grid-template-columns:1fr; gap:14px; }
@media(min-width:560px){ .tool-loose{ grid-template-columns:1fr 1fr; } }
@media(min-width:900px){ .tool-loose{ grid-template-columns:1fr 1fr 1fr; gap:22px; } }
.tool-card {
  display:flex; align-items:flex-start; gap:14px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r);
  padding:18px; text-decoration:none; color:inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position:relative;
}
.tool-card:hover { border-color: var(--terra); transform: translateY(-2px); box-shadow:0 8px 28px rgba(26,18,8,.08); }
@media(min-width:900px){
  .tool-card { padding:26px; gap:18px; border-radius:22px; }
  .tool-card-name { font-size:18px; margin-bottom:5px; }
  .tool-card-desc { font-size:14px; }
}
.tool-card.soon { opacity:.55; pointer-events:none; }
.tool-card-ico {
  width:44px; height:44px; flex-shrink:0; border-radius:12px;
  background: var(--terra-bg); color: var(--terra);
  display:flex; align-items:center; justify-content:center;
}
.tool-card-ico svg { width:22px; height:22px; }
/* Foto-varianta ikony — obrázek vyplní celý 44×44 rámeček s kulatými rohy */
.tool-card-ico.tool-card-ico-img { background:none; overflow:hidden; padding:0; }
.tool-card-ico.tool-card-ico-img img { width:100%; height:100%; object-fit:cover; display:block; border-radius:12px; }
.tool-card-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.tool-card-name { display:block; width:100%; font-size:15.5px; font-weight:700; margin-bottom:3px; }
.tool-card-desc { display:block; width:100%; font-size:13px; color:var(--text-dim); line-height:1.45; }
/* Karta s "Soon" badge: popis nesmí podtéct pod badge vpravo nahoře */
.tool-card.soon .tool-card-name,
.tool-card.soon .tool-card-desc { padding-right:78px; }
.tool-card-cost {
  display:inline-block; margin-top:8px;
  font-family:'DM Mono',monospace; font-size:11.5px; font-weight:500;
  color: var(--terra); background: var(--terra-bg);
  padding:2px 9px; border-radius:20px;
}
.tool-card-soon-badge {
  position:absolute; top:14px; right:14px;
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: var(--text-muted); background: var(--surface2);
  padding:3px 8px; border-radius:20px;
}

/* ── Dropzone (1:1 z indexu) ── */
.dropzone {
  border:2px dashed var(--border2); border-radius: var(--r);
  background: linear-gradient(135deg,#FFFCF9 0%,#FBF5EE 100%);
  padding:52px 24px; text-align:center;
  cursor:pointer; transition:all .2s; position:relative; margin-bottom:8px;
}
.dropzone input[type=file] {
  position:absolute; inset:0; opacity:0; cursor:pointer;
  width:100%; height:100%; font-size:16px;
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--terra); background: var(--terra-bg); }
.dz-icon { width:40px; height:40px; margin:0 auto 16px; color:var(--terra); opacity:.45; pointer-events:none; }
.dz-title { font-size:16px; font-weight:600; color:var(--text-dim); margin-bottom:5px; letter-spacing:-.01em; pointer-events:none; }
.dz-tip { font-size:12px; color:var(--text-muted); margin-top:2px; line-height:1.4; pointer-events:none; }

/* ── Preview ── */
.preview-card {
  border-radius: var(--r); overflow:hidden; border:1px solid var(--border);
  position:relative; margin-bottom:0; display:none; background: var(--surface2);
}
.preview-card img { width:100%; max-height:320px; object-fit:contain; display:block; }
.preview-remove {
  position:absolute; top:10px; left:10px;
  background:rgba(250,247,244,.88); border:1px solid var(--border);
  color:var(--text-dim); border-radius: var(--r-sm);
  padding:5px 12px; font-size:12px; font-weight:600; cursor:pointer; transition:all .15s;
}
.preview-remove:hover { color: var(--terra); }

/* ── Primární akční tlačítko (jako index) ── */
.studio-cta {
  width:100%; margin-top:14px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 22px; border:none; border-radius: var(--r);
  background: var(--terra); color:#fff;
  font-family:inherit; font-size:16px; font-weight:700; cursor:pointer;
  transition: background .15s, transform .1s;
}
.studio-cta:hover { background: var(--terra-dim); }
.studio-cta:active { transform: scale(.99); }
.studio-cta:disabled { opacity:.5; cursor:not-allowed; }
.studio-cta-sub { font-size:12.5px; font-weight:500; opacity:.85; }

/* ── Výsledek ── */
.studio-result { display:none; margin-top:8px; }
.studio-result.show { display:block; }
.result-img-wrap {
  border-radius: var(--r); overflow:hidden; border:1px solid var(--border);
  background: repeating-conic-gradient(#EEE6DC 0% 25%, #F8F3EE 0% 50%) 50% / 22px 22px; /* checker = průhlednost */
  position:relative; margin-bottom:14px;
}
.result-img-wrap img { width:100%; max-height:420px; object-fit:contain; display:block; }
.studio-msg { padding:12px 15px; border-radius:11px; font-size:13.5px; margin-top:12px; display:none; }
.studio-msg.err { background:#F6E3DE; color:#B0402A; display:block; }
.studio-msg.ok { background:#E8F3E8; color:#2E6B33; display:block; }

/* ── Spinner ── */
.studio-spin {
  width:18px; height:18px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%;
  animation: studioSpin .7s linear infinite; display:none;
}
@keyframes studioSpin { to { transform: rotate(360deg); } }

/* ── Result header s křížkem do home (jako index) ── */
.studio-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.studio-topbar .studio-back { margin-bottom:0; }
.studio-topbar .studio-title { margin-bottom:0; }
.result-close-btn {
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background: var(--surface2); border:1px solid var(--border); color: var(--text-dim);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .15s; text-decoration:none;
}
.result-close-btn:hover { background: var(--surface); border-color: var(--border2); color: var(--text); }

/* ── Floating toast (chips info) — jako index ── */
.toast {
  position:fixed; top:calc(var(--header-h) + 12px); left:50%;
  transform:translateX(-50%) translateY(-12px); z-index:99999;
  min-width:280px; max-width:calc(100vw - 32px); border-radius:14px;
  font-size:13.5px; font-weight:500; font-family:'Inter',sans-serif; line-height:1.45;
  pointer-events:none; opacity:0;
  transition:opacity .25s ease, transform .25s cubic-bezier(0.22,1,0.36,1);
  background:#FFFFFF; border:1px solid var(--border);
  box-shadow:0 8px 28px rgba(26,18,8,0.12);
  display:flex; align-items:stretch; overflow:hidden; touch-action:pan-x; cursor:pointer;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.toast.dragging { transition:none; }
.toast::before { content:''; flex-shrink:0; width:4px; background:var(--terra); }
.toast.error::before { background:var(--red); }
.toast.warn::before { background:var(--terra); }
.toast.ok::before { background:#6FA86A; }
.toast-text { flex:1; min-width:0; padding:13px 14px; color:var(--text); text-align:left; word-break:break-word; }
.toast-x { flex-shrink:0; width:40px; background:transparent; border:none; cursor:pointer; color:var(--text-muted); font-size:18px; line-height:1; font-family:inherit; display:flex; align-items:center; justify-content:center; transition:color .15s; align-self:stretch; }
.toast-x:hover { color:var(--text); }