/* daveai.cz — Synthra skin for the /znalosti/ pages.
   Loaded AFTER each page's own <style>, so it re-themes the page components
   (variables, glass cards, filters, search, code blocks) without touching markup or JS. */
:root{
  --bg:#0b071a;--surface:rgba(255,255,255,.04);--surface-solid:#120b2b;
  --text:#e9e6ff;--muted:rgba(233,230,255,.72);--accent:#00f0ff;--accent2:#bf00ff;
  --green:#3dffb0;--amber:#ffb347;
  --border:rgba(233,230,255,.12);--glass-border:rgba(191,0,255,.38);
  --heading:Unbounded,system-ui,sans-serif;--body:Manrope,system-ui,sans-serif;
  --radius:22px;--radius-sm:14px;
}
body{background:var(--bg);font-size:15.5px;line-height:1.7}
/* no .page wrapper here: pin the background so the off-screen glows never widen the page */
.orb,.grid-bg{position:fixed}
.grid-bg{height:100vh}
main{position:relative;z-index:1;max-width:1520px;margin:0 auto}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #00f0ff;outline-offset:3px}

/* things that should stay "code" after the body font switch */
.breadcrumb,.badge,.sec-label,.search-count,.tag,.copy-btn,.template-label,.template-code,.prompt-example,.prompt-example-label,
.prompt-ex,.prompt-ex-label,.tech-prompt,.tech-badge,.tool-url,.tool-tag,.anatomy-num,.prompt-step-num,code,pre{font-family:var(--mono)}

/* breadcrumb + hero */
.breadcrumb{padding:clamp(28px,4vw,48px) var(--px) 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.breadcrumb a{color:#9ff8ff}
.breadcrumb a:hover{color:#fff}
#hero{text-align:left;padding-top:clamp(20px,3vw,36px)}
#hero h1{font-family:var(--heading);font-weight:500;font-size:clamp(38px,5.2vw,84px);line-height:1.04;letter-spacing:-.035em;color:#fbfaff;text-wrap:balance}
#hero h1 .gradient{background:linear-gradient(95deg,#00f0ff 10%,#9b6bff 55%,#bf00ff 90%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#hero .sub{margin:0;max-width:640px;font-family:var(--body);font-size:clamp(16px,1.35vw,20px);color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin-bottom:22px;padding:7px 14px;border-radius:999px;border:1px solid rgba(0,240,255,.3);background:rgba(0,240,255,.05);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9ff8ff}
.kviz{height:clamp(170px,18vw,230px);margin:32px 0 0}

/* section headings */
.sec-label{font-size:12px;letter-spacing:.2em;color:var(--dim)}
.sec-label::before{color:#bf00ff}
.section h2{font-family:var(--heading);font-weight:400;letter-spacing:-.03em;color:#fbfaff}

/* glass cards (Synthra module look) */
.glass{background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012) 45%,rgba(191,0,255,.04));border:1px solid rgba(191,0,255,.38);border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 40px rgba(191,0,255,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.card:hover,.tool-card:hover,.use-card:hover,.warn-card:hover,.tech-card:hover,.anatomy-card:hover{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 45%,rgba(191,0,255,.07));
  border-color:rgba(191,0,255,.85);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 60px rgba(191,0,255,.16),0 0 40px rgba(191,0,255,.25)}
.card h3,.tool-card h3,.use-card h3,.warn-card h3,.tech-card h3,.anatomy-card h3{font-family:var(--heading);font-weight:500;letter-spacing:-.02em;color:#fbfaff}
.card p,.tool-card p,.use-card p,.warn-card p,.tech-card p,.anatomy-card p{font-size:14.5px}

/* filters + search */
.flt{font-family:var(--body);font-size:13.5px;font-weight:600;min-height:44px;border-color:rgba(233,230,255,.16);color:var(--muted)}
.flt:hover{color:#fff;border-color:rgba(0,240,255,.5)}
.flt.active{background:rgba(0,240,255,.1);color:#eaffff;border-color:#00f0ff;box-shadow:0 0 22px rgba(0,240,255,.35),inset 0 0 12px rgba(0,240,255,.15)}
.search-input{min-height:52px;background:rgba(8,5,22,.7);border:1px solid rgba(0,240,255,.3);border-radius:14px;font-family:var(--body);font-size:15.5px}
.search-input:focus{border-color:#00f0ff;box-shadow:0 0 0 3px rgba(0,240,255,.15),0 0 20px rgba(0,240,255,.2)}

/* code / template blocks */
.template-code,.prompt-example,.prompt-ex,.tech-prompt{background:rgba(4,2,12,.78);border-color:rgba(0,240,255,.2);color:#e9e6ff;box-shadow:inset 0 0 24px rgba(0,240,255,.05)}
.copy-btn{border-radius:10px;border:1px solid rgba(0,240,255,.4);background:rgba(0,240,255,.06);color:#9ff8ff}
.copy-btn:hover{background:rgba(0,240,255,.16);box-shadow:0 0 18px rgba(0,240,255,.4);color:#fff}

/* footer */
footer{border-top:1px solid rgba(0,240,255,.12);background:linear-gradient(180deg,rgba(11,7,26,0),rgba(11,7,26,.8))}
.footer-about-title{font-family:var(--heading);font-weight:500;color:#fbfaff}

/* left-aligned like the hero */
.search-wrap{margin-left:0;margin-right:0;max-width:calc(560px + 2 * var(--px))}
.search-count{text-align:left}
.filter-row{justify-content:flex-start}