/* Strona modelu (3DX) — PLIK GENEROWANY przez gen_model_css.py. Nie edytuj ręcznie.
   Źródło: skills/makiety_3dx/3dx-model.html. Każdy selektor zakresowany pod
   body.model-page => zero wpływu na resztę serwisu. */

/* Kolory hostów — motyw ich NIE MA. Bez nich background:var(--mw) jest nieprawidłowy
   i przycisk Download znika (biały tekst na białym tle). */
body.model-page { --mw:#0d7ef2; --mw-soft:#e9f3fe; --c3:#7b3fe4; --c3-soft:#f1eafe; }

/* Makieta ma układ 2-kolumnowy, szerszy niż wąski .sheet motywu. Chowamy .post-head:
   motyw renderuje tam tytuł + DATĘ + autora, a model ma własny nagłówek i żadnej daty. */
body.model-page .post-head, body.model-page .post-hero { display:none; }
body.model-page .post-layout { max-width:none; padding:0; display:block; }
body.model-page .post-layout .sheet { max-width:none; padding:0; background:none; border:0; }

body.model-page .eyebrow { font-family:var(--mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--molten);font-weight:500 }
body.model-page .viewport .vp-grid { position:absolute;inset:0;
  background-image:linear-gradient(rgba(35,70,120,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,70,120,.07) 1px,transparent 1px);background-size:30px 30px;
  transform:perspective(600px) rotateX(52deg) scale(1.5) translateY(18%);transform-origin:center 70% }
body.model-page .viewport .vp-bot { position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--line);
  background:rgba(255,255,255,.82);padding:11px 14px;display:flex;gap:16px;font-family:var(--mono);font-size:11px;color:var(--mute) }
body.model-page .viewport .vp-bot b { color:var(--ink);font-weight:600 }
body.model-page .model-card .spec { position:absolute;top:10px;left:10px;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:var(--mute);background:rgba(255,255,255,.85);border:1px solid var(--line);border-radius:6px;padding:4px 8px }
body.model-page .callout { background:var(--molten-soft);border:1px solid rgba(239,82,13,.2);border-left:3px solid var(--molten);
  border-radius:10px;padding:18px 22px;margin:26px 0;font-size:16px;line-height:1.6;color:#5a3a2c }
body.model-page .callout .k { font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--molten-d);display:block;margin-bottom:6px;font-weight:600 }
body.model-page .ext { width:13px;height:13px;flex:none;opacity:.8 }
body.model-page .feat-view .vp-grid { position:absolute;inset:0;
  background-image:linear-gradient(rgba(35,70,120,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,70,120,.07) 1px,transparent 1px);background-size:30px 30px;
  transform:perspective(600px) rotateX(52deg) scale(1.5) translateY(20%);transform-origin:center 72% }
body.model-page .feat-view .spec { position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:var(--mute);background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:6px;padding:4px 9px }
body.model-page .feat-view .vp-bot { position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid var(--line);
  background:rgba(255,255,255,.85);padding:10px 14px;display:flex;gap:12px;font-family:var(--mono);font-size:11px;color:var(--mute) }
body.model-page .btn-mw { background:var(--mw);color:#fff;box-shadow:0 8px 22px -10px rgba(13,126,242,.75) }
body.model-page .btn-mw:hover { background:#0a6ad1 }
body.model-page .btn-mw svg { width:16px;height:16px }
body.model-page .btn-c3 { background:var(--c3);color:#fff;box-shadow:0 8px 22px -10px rgba(123,63,228,.7) }
body.model-page .btn-c3:hover { background:#6832c6 }
body.model-page .btn-c3 svg { width:16px;height:16px }
body.model-page .mthumb .spec { position:absolute;top:10px;left:10px;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.08em;color:var(--mute);background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:6px;padding:4px 8px }
body.model-page .dls { display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--faint) }
body.model-page .dls svg { width:13px;height:13px;color:var(--molten) }
body.model-page .freetag { color:var(--mw)!important;background:var(--mw-soft)!important;border-color:rgba(13,126,242,.28)!important;font-weight:600 }
body.model-page .sm-top { padding:34px 0 8px }
body.model-page .sm-grid { display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start }
body.model-page .gal { position:sticky;top:80px }
body.model-page .gal-main { position:relative;aspect-ratio:1/1;border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 6%,#fff,#eef2f6 78%);display:grid;place-items:center;color:var(--molten);
  box-shadow:0 26px 56px -34px rgba(30,45,70,.4) }
body.model-page .gal-main .vp-grid { position:absolute;inset:0;
  background-image:linear-gradient(rgba(35,70,120,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(35,70,120,.07) 1px,transparent 1px);background-size:32px 32px;
  transform:perspective(650px) rotateX(52deg) scale(1.5) translateY(20%);transform-origin:center 72% }
body.model-page .gal-main>svg { width:46%;height:46%;position:relative;z-index:1;filter:drop-shadow(0 18px 26px rgba(239,82,13,.32)) }
body.model-page .gal-main .spec { position:absolute;top:12px;left:12px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--mute);background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:6px;padding:5px 10px }
body.model-page .gal-main .vp-bot { position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid var(--line);
  background:rgba(255,255,255,.88);padding:11px 14px;display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:var(--mute) }
body.model-page .gal-main .vp-bot b { color:var(--ink) }
body.model-page .gal-thumbs { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px }
body.model-page .gal-thumbs button { aspect-ratio:1/1;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  background:radial-gradient(120% 120% at 50% 10%,#fff,#eef2f6);display:grid;place-items:center;color:var(--molten);
  transition:border-color .14s,transform .14s;padding:0 }
body.model-page .gal-thumbs button:hover { transform:translateY(-2px);border-color:var(--line2) }
body.model-page .gal-thumbs button.on { border-color:var(--molten);box-shadow:0 0 0 2px rgba(239,82,13,.15) }
body.model-page .gal-thumbs svg { width:46%;height:46%;opacity:.85 }
body.model-page .sm-info h1 { font-size:clamp(28px,4vw,42px);font-weight:900;letter-spacing:-.03em;line-height:1.08;margin:12px 0 0 }
body.model-page .sm-tagline { color:var(--mute);font-size:17px;line-height:1.6;margin-top:14px;max-width:50ch }
body.model-page .sm-stats { display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--mute);align-items:center }
body.model-page .sm-stats span { display:inline-flex;align-items:center;gap:7px }
body.model-page .sm-stats svg { width:14px;height:14px;color:var(--molten) }
body.model-page .dlpanel { border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:22px;margin-top:26px;
  box-shadow:0 22px 48px -32px rgba(30,45,70,.35) }
body.model-page .dlpanel .k { font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint) }
body.model-page .dlrow { display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line) }
body.model-page .dlrow:last-of-type { border-bottom:none;padding-bottom:4px }
body.model-page .dlrow .ic { width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center }
body.model-page .dlrow .ic.mw { background:var(--mw-soft);color:var(--mw);border:1px solid rgba(13,126,242,.22) }
body.model-page .dlrow .ic.c3 { background:var(--c3-soft);color:var(--c3);border:1px solid rgba(123,63,228,.2) }
body.model-page .dlrow .ic svg { width:19px;height:19px }
body.model-page .dlrow .tx { flex:1;min-width:0 }
body.model-page .dlrow .tx b { display:block;font-size:15px;font-weight:700;color:var(--ink) }
body.model-page .dlrow .tx small { font-family:var(--mono);font-size:11px;color:var(--faint) }
body.model-page .freeflag { display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:600;color:var(--mw);background:var(--mw-soft);border:1px solid rgba(13,126,242,.28);
  border-radius:5px;padding:2px 7px;margin-left:8px;vertical-align:1px }
body.model-page .dlnote { font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.55;margin-top:16px;
  padding-top:14px;border-top:1px dashed var(--line2) }
body.model-page .sm-specs { display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:22px }
body.model-page .sm-specs div { background:var(--surface2);padding:13px 15px }
body.model-page .sm-specs .k { display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint) }
body.model-page .sm-specs b { font-size:15px;font-weight:700;color:var(--ink);display:block;margin-top:3px }
body.model-page .sm-body { max-width:1080px;margin:0 auto;padding:56px 24px 0;display:grid;grid-template-columns:1fr;gap:0 }
body.model-page .sm-sheet { background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:44px clamp(24px,4vw,52px);font-family:var(--serif);font-size:18px;line-height:1.72;position:relative;overflow:hidden;
  box-shadow:0 30px 70px -40px rgba(30,45,70,.35) }
body.model-page .sm-sheet::before { content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--molten),var(--glow)) }
body.model-page .sm-sheet h2 { font-family:var(--sans);font-weight:800;font-size:26px;letter-spacing:-.02em;margin:0 0 16px;line-height:1.2 }
body.model-page .sm-sheet h2+p { margin-top:0 }
body.model-page .sm-sheet h3 { font-family:var(--sans);font-weight:700;font-size:19px;margin:30px 0 10px }
body.model-page .sm-sheet p { margin:0 0 20px }
body.model-page .sm-sheet ul { margin:0 0 20px;padding-left:4px;list-style:none }
body.model-page .sm-sheet li { position:relative;padding-left:26px;margin-bottom:10px }
body.model-page .sm-sheet li::before { content:"";position:absolute;left:4px;top:11px;width:9px;height:9px;border:2px solid var(--molten);border-radius:2px;transform:rotate(45deg) }
body.model-page .sm-sheet strong { font-weight:600;background:linear-gradient(transparent 62%,rgba(239,82,13,.18) 0) }
body.model-page .video { margin:34px 0 6px }
body.model-page .vhead { display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:12px }
body.model-page .vhead svg { width:15px;height:15px;color:#f0281e }
body.model-page .vframe { position:relative;aspect-ratio:16/9;border:1px solid var(--line2);border-radius:14px;overflow:hidden;
  background:#101318;display:grid;place-items:center;cursor:pointer;transition:box-shadow .2s }
body.model-page .vframe:hover { box-shadow:0 22px 50px -26px rgba(30,45,70,.55) }
body.model-page .vframe::before { content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:34px 34px;
  transform:perspective(700px) rotateX(52deg) scale(1.5) translateY(24%);transform-origin:center 78% }
body.model-page .vframe .play { position:relative;z-index:1;width:74px;height:74px;border-radius:50%;background:#f0281e;
  display:grid;place-items:center;box-shadow:0 14px 34px -10px rgba(240,40,30,.7);transition:transform .16s }
body.model-page .vframe:hover .play { transform:scale(1.07) }
body.model-page .vframe .play svg { width:26px;height:26px;color:#fff;margin-left:3px }
body.model-page .vframe .vlabel { position:absolute;z-index:1;bottom:0;left:0;right:0;padding:14px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:14px;font-weight:600;display:flex;
  justify-content:space-between;gap:12px;align-items:center }
body.model-page .vframe .vlabel small { font-family:var(--mono);font-size:11px;opacity:.75;font-weight:400 }
body.model-page .vcap { font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:10px;text-align:center }

@media(max-width:960px) {
  body.model-page .sm-grid { grid-template-columns:1fr;gap:32px }
  body.model-page .gal { position:static }
}

@media(max-width:640px) {
  body.model-page .sm-specs { grid-template-columns:1fr }
  body.model-page .gal-thumbs { grid-template-columns:repeat(4,1fr) }
  body.model-page .sm-sheet { padding:30px 20px }
}

/* --- adaptacja pod prawdziwe zdjęcia (makieta miała ikony SVG) --- */
body.model-page .gal-main { position:relative; overflow:hidden; }
body.model-page .gal-main img { width:100%; height:100%; object-fit:cover; display:block; }
/* liczba zdjec jest ROZNA per model (2-8) — sztywne 6 kolumn zawijalo 7. miniature */
body.model-page .gal-thumbs { grid-template-columns:repeat(auto-fit,minmax(64px,1fr)); }
body.model-page .gal-thumbs button { padding:0; overflow:hidden; aspect-ratio:1/1; }
body.model-page .gal-thumbs button img {
  width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit;
}

/* nieparzysta liczba specyfikacji zostawiala pusta komorke w siatce 2-kolumnowej */
body.model-page .sm-specs > div:last-child:nth-child(odd) { grid-column:1 / -1; }