/* ─────────────────────────────────────────────────────────────────────
 * _shared.css — Unified design system for ALL public LUKAS OS pages.
 *
 * Imported by zenoye-home, skills-public, ebooks-public, testtest,
 * audit-pilot, fotovoltaika-pilot, library/* — wherever a buyer lands.
 *
 * Operator 2026-05-27: "celé sjednocení designu na všech URL +
 * top design pro mobil top top".
 *
 * Design pillars:
 *   1. Mobile-first (375px tested baseline, scales to 4K)
 *   2. System fonts only (zero CSP issues, native crispness)
 *   3. Touch targets ≥ 44px (Apple HIG)
 *   4. Fluid typography via clamp()
 *   5. Safe-area-inset support (iOS notch + Android nav bar)
 *   6. Dark theme default, indigo→purple brand gradient
 *   7. Glass nav with backdrop-filter
 *   8. Reduced-motion respected
 *   9. <2 KB JS, no framework, no build step
 * ─────────────────────────────────────────────────────────────────── */

/* ── DESIGN TOKENS ──────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --los-bg:        #0a0a0a;
  --los-bg-2:      #111;
  --los-bg-3:      #161616;
  --los-bg-soft:   #1a1f2e;
  --los-card:      rgba(255,255,255,0.02);
  --los-line:      #222;
  --los-line-2:    #2e2e2e;
  --los-line-3:    #3a3a44;

  /* Ink */
  --los-ink:       #e8e8ea;
  --los-ink-2:     #a1a1a8;
  --los-ink-3:     #71717a;
  --los-ink-strong:#fafafa;

  /* Brand */
  --los-brand:     #5b8def;
  --los-brand-2:   #9b5bf0;
  --los-gold:      #fbe46a;
  --los-grad:      linear-gradient(135deg,#5b8def 0%,#9b5bf0 60%,#fbe46a 100%);
  --los-grad-cool: linear-gradient(135deg,#5b8def 0%,#9b5bf0 100%);
  --los-grad-warm: linear-gradient(135deg,#fbe46a 0%,#f59e0b 100%);

  /* Semantic */
  --los-good: #4ade80;
  --los-warn: #facc15;
  --los-bad:  #f87171;
  --los-info: #5b8def;

  /* Type */
  --los-font-sans: -apple-system, BlinkMacSystemFont,
                   'Segoe UI Variable Display', 'Segoe UI',
                   'SF Pro Display', 'Helvetica Neue', sans-serif;
  --los-font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Radii */
  --los-r-sm: 6px;
  --los-r-md: 10px;
  --los-r-lg: 14px;
  --los-r-xl: 20px;
  --los-r-pill: 999px;

  /* Shadows */
  --los-sh-1: 0 1px 2px rgba(0,0,0,.30);
  --los-sh-2: 0 4px 14px rgba(0,0,0,.30);
  --los-sh-3: 0 12px 30px rgba(0,0,0,.35);
  --los-sh-brand: 0 10px 30px rgba(91,141,239,.30);

  /* Spacing scale (use multiples of 4) */
  --los-sp-1: 4px;
  --los-sp-2: 8px;
  --los-sp-3: 12px;
  --los-sp-4: 16px;
  --los-sp-5: 24px;
  --los-sp-6: 32px;
  --los-sp-7: 48px;
  --los-sp-8: 64px;
  --los-sp-9: 96px;

  /* Layout */
  --los-container: 1180px;
  --los-container-narrow: 720px;
  --los-nav-h: 64px;

  /* Motion */
  --los-trans-fast: .12s;
  --los-trans-mid:  .25s cubic-bezier(.22,.61,.36,1);
  --los-trans-slow: .7s cubic-bezier(.22,.61,.36,1);
}

/* ── RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  background: var(--los-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font: 16px/1.55 var(--los-font-sans);
  color: var(--los-ink);
  background: var(--los-bg);
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
  overflow-x: hidden;
  /* hard cap viewport width so nothing can push horizontal scroll */
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  /* iOS safe areas */
  padding-bottom: env(safe-area-inset-bottom);
}
/* hard wrap long strings (URLs, monospace) on mobile so they don't
   widen the viewport — operator 2026-05-27 "furt ujíždí" */
.los-mono, code, pre, .qr-box .addr {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
img, video, iframe, table { max-width: 100%; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--los-line); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── LAYOUT PRIMITIVES ──────────────────────────────────────────────── */
.los-container {
  width: 100%;
  max-width: var(--los-container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}
.los-narrow { max-width: var(--los-container-narrow); }
.los-stack > * + * { margin-top: var(--los-sp-4); }

/* ── NAV (solid + blur fallback, sticky) ────────────────────────────
 * Operator 2026-05-27: "horní HUD je průhledný když scrolluju" —
 * fix: use SOLID dark background, not translucent. Blur is enhancement,
 * not the load-bearing layer. Some Android browsers don't support
 * backdrop-filter so we need opaque base. */
.los-nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--los-nav-h);
  background: #0a0a0a;                /* solid base — always visible */
  /* enhancement when supported: still readable but a touch lighter */
  border-bottom: 1px solid var(--los-line);
  display: flex;
  align-items: center;
  /* iOS notch */
  padding-top: env(safe-area-inset-top);
  /* prevent layout shift on iOS rubber-band */
  -webkit-transform: translateZ(0);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .los-nav {
    background: rgba(10,10,10,.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}
.los-nav > .los-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--los-sp-4);
  width: 100%;
}
.los-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 16px; letter-spacing: -.02em;
  color: var(--los-ink-strong);
  white-space: nowrap;
  min-height: 44px; /* touch target */
}
.los-brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--los-grad);
  display: flex; align-items: center; justify-content: center;
  color: #0a0a0a; font-size: 13px; font-weight: 900;
  box-shadow: var(--los-sh-brand);
  flex-shrink: 0;
}
.los-brand .sub {
  color: var(--los-ink-3); font-weight: 500; margin-left: 4px;
}
.los-nav-links {
  display: flex; align-items: center; gap: var(--los-sp-5);
}
.los-nav-links a {
  color: var(--los-ink-2); font-size: 14px; font-weight: 600;
  transition: color var(--los-trans-fast);
  min-height: 44px; /* touch target */
  display: flex; align-items: center;
}
.los-nav-links a:hover { color: var(--los-ink-strong); }
@media (max-width: 720px) {
  .los-nav-links a:not(.los-btn) { display: none; }
}

/* ── BUTTONS (44px touch target enforced) ───────────────────────────── */
.los-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 14.5px;
  border: 0;
  border-radius: var(--los-r-md);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -.005em;
  transition: transform var(--los-trans-fast), box-shadow var(--los-trans-fast),
              background var(--los-trans-fast), color var(--los-trans-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
}
.los-btn:hover { transform: translateY(-1px); }
.los-btn:active { transform: translateY(0); }
.los-btn:focus-visible {
  outline: 2px solid var(--los-brand);
  outline-offset: 2px;
}
.los-btn svg { width: 16px; height: 16px; }

.los-btn--primary {
  background: var(--los-grad-cool);
  color: #fff;
  box-shadow: var(--los-sh-brand);
}
.los-btn--primary:hover {
  box-shadow: 0 14px 36px rgba(91,141,239,.40);
}
.los-btn--grad {
  background: var(--los-grad);
  color: #0a0a0a;
  box-shadow: var(--los-sh-brand);
}
.los-btn--ghost {
  background: transparent;
  color: var(--los-ink-strong);
  border: 1px solid var(--los-line-2);
}
.los-btn--ghost:hover { background: var(--los-bg-2); border-color: var(--los-brand); }
.los-btn--lg { padding: 14px 28px; font-size: 15.5px; min-height: 52px; }
.los-btn--full { width: 100%; }

/* ── HERO (used by every storefront landing) ────────────────────────── */
.los-hero {
  padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 7vw, 80px);
  position: relative;
  overflow: hidden;
}
.los-hero::before {
  content: '';
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 110vw);
  height: 700px;
  background: radial-gradient(ellipse at center,
              rgba(91,141,239,.15) 0%,
              rgba(155,91,240,.08) 30%,
              transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.los-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(74,222,128,.10);
  border: 1px solid rgba(74,222,128,.30);
  color: var(--los-good);
  padding: 6px 14px;
  border-radius: var(--los-r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: var(--los-sp-5);
  font-family: var(--los-font-mono);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.los-eyebrow .pulse {
  width: 7px; height: 7px;
  background: var(--los-good);
  border-radius: 50%;
  animation: losPulse 2s infinite;
  flex-shrink: 0;
}
@keyframes losPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}
.los-h1 {
  font-size: clamp(34px, 6.5vw, 64px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--los-ink-strong);
  margin-bottom: var(--los-sp-5);
}
.los-h1 .grad {
  background: var(--los-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.los-lead {
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--los-ink-2);
  max-width: 580px;
  line-height: 1.55;
  margin-bottom: var(--los-sp-6);
}
.los-lead b { color: var(--los-ink-strong); font-weight: 600; }
.los-hero-cta {
  display: flex;
  gap: var(--los-sp-3);
  flex-wrap: wrap;
  align-items: center;
}

/* ── SECTION HEADERS ────────────────────────────────────────────────── */
.los-section { padding: clamp(56px, 9vw, 90px) 0; }
.los-section-head {
  margin-bottom: clamp(32px, 5vw, 50px);
}
.los-section-eyebrow {
  font-size: 12px;
  color: var(--los-brand);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--los-font-mono);
  margin-bottom: 12px;
}
.los-h2 {
  font-size: clamp(26px, 4.5vw, 42px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--los-ink-strong);
  max-width: 760px;
}
.los-h2 em {
  font-style: normal;
  background: var(--los-grad-warm);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.los-section-head p {
  color: var(--los-ink-2);
  font-size: clamp(15px, 1.8vw, 17px);
  margin-top: var(--los-sp-4);
  max-width: 600px;
  line-height: 1.6;
}

/* ── CARDS (used by every grid: skills, offers, books) ──────────────── */
.los-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--los-sp-4);
}
.los-card-grid--narrow {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 520px) {
  .los-card-grid, .los-card-grid--narrow { grid-template-columns: 1fr; }
}

.los-card {
  background: var(--los-bg-2);
  border: 1px solid var(--los-line);
  border-radius: var(--los-r-lg);
  padding: var(--los-sp-5);
  position: relative;
  overflow: hidden;
  transition: transform var(--los-trans-mid), border-color var(--los-trans-fast),
              box-shadow var(--los-trans-mid);
  display: flex; flex-direction: column; gap: var(--los-sp-3);
  color: inherit;
}
.los-card:hover {
  border-color: var(--los-brand);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(91,141,239,.10);
}
.los-card[role="link"], a.los-card { cursor: pointer; }
.los-card-stripe {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--los-grad-cool);
}
.los-card-stripe--warm  { background: var(--los-grad-warm); }
.los-card-stripe--good  { background: linear-gradient(90deg,#4ade80,#22c55e); }
.los-card-stripe--bad   { background: linear-gradient(90deg,#f87171,#ef4444); }
.los-card-ico {
  width: 42px; height: 42px;
  border-radius: var(--los-r-md);
  background: rgba(91,141,239,.10);
  border: 1px solid rgba(91,141,239,.20);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.los-card h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--los-ink-strong);
  line-height: 1.3;
}
.los-card p {
  color: var(--los-ink-2);
  font-size: 14px;
  line-height: 1.55;
  flex: 1;
}
.los-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--los-sp-3);
  border-top: 1px solid var(--los-line);
  font-family: var(--los-font-mono);
  font-size: 12px;
  color: var(--los-ink-3);
}
.los-card-meta .open {
  color: var(--los-brand);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}
.los-card-meta .open svg {
  width: 12px; height: 12px;
  transition: transform var(--los-trans-fast);
}
.los-card:hover .los-card-meta .open svg { transform: translateX(4px); }

/* ── BADGES (skill tier, status, category, price) ───────────────────── */
.los-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  padding: 3px 8px;
  border-radius: var(--los-r-sm);
  font-weight: 700;
  letter-spacing: .04em;
  font-family: var(--los-font-mono);
  text-transform: uppercase;
}
.los-badge--free  { background: rgba(74,222,128,.10); color: var(--los-good); border: 1px solid rgba(74,222,128,.30); }
.los-badge--paid  { background: rgba(91,141,239,.10); color: var(--los-brand); border: 1px solid rgba(91,141,239,.20); }
.los-badge--info  { background: var(--los-bg-3); color: var(--los-ink-2); border: 1px solid var(--los-line); }
.los-badge--s     { background: var(--los-grad-warm); color: #fff; }
.los-badge--a     { background: var(--los-grad-cool); color: #fff; }
.los-badge--b     { background: #94a3b8; color: #fff; }
.los-badge--c     { background: linear-gradient(135deg,#7f1d1d,#450a0a); color: #fafafa; }

/* ── FILTER CHIPS (search/category) ─────────────────────────────────── */
.los-filters {
  display: flex;
  gap: var(--los-sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--los-sp-3);
  -webkit-overflow-scrolling: touch;
}
.los-filters::-webkit-scrollbar { display: none; }
.los-filter {
  flex: 0 0 auto;
  background: var(--los-bg-2);
  border: 1px solid var(--los-line);
  color: var(--los-ink-2);
  border-radius: var(--los-r-pill);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--los-trans-fast);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.los-filter:hover {
  background: var(--los-bg-3);
  border-color: var(--los-line-2);
  color: var(--los-ink-strong);
}
.los-filter.on {
  background: var(--los-grad-cool);
  color: #fff;
  border-color: transparent;
}
.los-filter .count {
  font-family: var(--los-font-mono);
  font-size: 11px;
  opacity: .7;
}

/* ── METRICS ROW ────────────────────────────────────────────────────── */
.los-metrics {
  padding: var(--los-sp-6) 0;
  border-top: 1px solid var(--los-line);
  border-bottom: 1px solid var(--los-line);
  background: #080808;
}
.los-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--los-sp-6);
  text-align: center;
}
.los-metric .v {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-family: var(--los-font-mono);
  background: var(--los-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.los-metric .l {
  font-size: 11.5px;
  color: var(--los-ink-3);
  margin-top: var(--los-sp-2);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 600;
}

/* ── FORMS ──────────────────────────────────────────────────────────── */
.los-input {
  width: 100%;
  background: #0a0a0a;
  border: 1.5px solid var(--los-line-2);
  color: var(--los-ink-strong);
  border-radius: var(--los-r-md);
  padding: 13px 14px;
  font-size: 15.5px;
  min-height: 48px;
  letter-spacing: -.005em;
  transition: border-color var(--los-trans-fast), box-shadow var(--los-trans-fast);
}
.los-input:focus {
  outline: none;
  border-color: var(--los-brand);
  box-shadow: 0 0 0 4px rgba(91,141,239,.15);
}
.los-label {
  display: block;
  font-size: 11.5px;
  color: var(--los-ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: var(--los-font-mono);
}

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.los-footer {
  padding: clamp(40px, 6vw, 60px) 0 30px;
  border-top: 1px solid var(--los-line);
  background: #050505;
  /* iOS safe area at bottom */
  padding-bottom: calc(30px + env(safe-area-inset-bottom));
}
.los-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--los-sp-6);
}
.los-footer-col h5 {
  font-size: 11.5px;
  color: var(--los-ink-3);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-weight: 700;
  margin-bottom: var(--los-sp-4);
  font-family: var(--los-font-mono);
}
.los-footer-col a {
  display: block;
  color: var(--los-ink-2);
  font-size: 13.5px;
  padding: 6px 0;
  min-height: 36px;
  display: flex;
  align-items: center;
}
.los-footer-col a:hover { color: var(--los-ink-strong); }
.los-footer-legal {
  margin-top: var(--los-sp-7);
  padding-top: var(--los-sp-5);
  border-top: 1px solid var(--los-line);
  display: flex;
  justify-content: space-between;
  color: var(--los-ink-3);
  font-size: 12px;
  flex-wrap: wrap;
  gap: var(--los-sp-3);
}
@media (max-width: 880px) {
  .los-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .los-footer-grid { grid-template-columns: 1fr; }
}

/* ── MOBILE STICKY CTA (bottom bar) ─────────────────────────────────── */
.los-mobile-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: #0a0a0a;           /* solid base */
  border-top: 1px solid var(--los-line-2);
  z-index: 60;
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .los-mobile-cta {
    background: rgba(10,10,10,.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}
.los-mobile-cta .los-btn { width: 100%; min-height: 50px; }
@media (max-width: 720px) {
  .los-mobile-cta { display: block; }
  body { padding-bottom: 80px; }
}

/* ── SCROLL REVEAL (used by _shared.js IntersectionObserver) ────────── */
.los-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--los-trans-slow), transform var(--los-trans-slow);
}
.los-reveal.on { opacity: 1; transform: translateY(0); }

/* ── UTILITIES ──────────────────────────────────────────────────────── */
.los-text-grad {
  background: var(--los-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.los-mono { font-family: var(--los-font-mono); }
.los-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── SUCCESS / ERROR BOXES ──────────────────────────────────────────── */
.los-success {
  background: rgba(74,222,128,.08);
  border: 1px solid var(--los-good);
  color: var(--los-good);
  padding: var(--los-sp-5);
  border-radius: var(--los-r-lg);
  text-align: center;
}
.los-success h3 { font-size: 18px; margin-bottom: 8px; color: var(--los-good); }
.los-success p  { color: var(--los-ink); opacity: .9; font-size: 14px; }
.los-error {
  background: rgba(248,113,113,.08);
  border: 1px solid var(--los-bad);
  color: var(--los-bad);
  padding: var(--los-sp-4);
  border-radius: var(--los-r-md);
  font-size: 14px;
}