/* Minimal, elegant, readable. No dependencies. */
:root{
  --bg:#0b0f14;
  --text:#e9eef5;
  --muted:#a9b4c2;
  --line:rgba(255,255,255,0.08);
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --radius:14px;
  /* E.ON brand */
  --accent:#E2001A;
  --accent-soft:rgba(226,0,26,0.14);
  --accent-line:rgba(226,0,26,0.40);
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  font-size:clamp(15px, 1.1vw, 18px);
  line-height:1.6;
  background:radial-gradient(1200px 700px at 20% 10%, rgba(226,0,26,0.10), transparent 50%),
             radial-gradient(900px 600px at 80% 20%, rgba(226,0,26,0.06), transparent 50%),var(--bg);
}

.app{display:flex;min-height:100%;}

/* Sidebar */
.sidebar{
  width:300px;
  padding:20px 16px;
  border-right:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent 30%);
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
}
.brand{
  padding:20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,0.02));
  box-shadow:var(--shadow);
  border-left:4px solid var(--accent);
}
.brand-title{font-weight:800;font-size:clamp(15px, 1.1vw, 18px);letter-spacing:-0.01em;}
.brand-sub{margin-top:6px;font-size:clamp(13px, 0.95vw, 15px);color:var(--muted);}

.search{margin:16px 4px 12px;}
.search input{
  width:100%;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  outline:none;
  font-size:clamp(13px, 0.95vw, 15px);
}
.search input::placeholder{color:rgba(233,238,245,0.45);}

.nav{display:flex;flex-direction:column;gap:6px;padding:8px 4px 20px;}
.nav .group{
  margin-top:18px;
  color:var(--text);
  font-size:clamp(13px, 1vw, 16px);
  font-weight:800;
  letter-spacing:-0.01em;
  padding:8px 12px 4px;
  border-top:2px solid var(--accent);
  text-transform:none;
}
.nav .group:first-child{margin-top:4px;}
.nav .section{
  margin-top:8px;
  color:var(--muted);
  font-size:clamp(10px, 0.75vw, 12px);
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:4px 12px;
}
.nav a{
  display:block;
  text-decoration:none;
  color:var(--text);
  padding:8px 12px;
  border-radius:10px;
  border:1px solid transparent;
}
.nav a:hover{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.06);}
.nav a.active{background:var(--accent-soft);border-color:var(--accent-line);}
.nav a .knum{color:var(--muted);font-size:clamp(11px, 0.8vw, 13px);margin-right:8px;font-weight:500;}
.nav a .ktitle{font-size:clamp(13px, 0.95vw, 15px);font-weight:600;}
.nav a .kdesc{font-size:clamp(11px, 0.8vw, 13px);color:rgba(233,238,245,0.55);margin-top:3px;line-height:1.4;}

.sidebar-footer{border-top:1px solid var(--line);padding:16px 12px 10px;}

/* Content */
.content{flex:1;padding:24px 32px 40px;max-width:900px;}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,0.03);
  box-shadow:var(--shadow);
  position:sticky;
  top:12px;
  z-index:5;
  backdrop-filter:blur(10px);
}
.breadcrumbs{
  font-size:clamp(13px, 1vw, 16px);
  color:rgba(233,238,245,0.70);
  max-width:70%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.actions{display:flex;gap:8px;align-items:center;}
.btn{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
  color:var(--text);
  border-radius:10px;
  padding:7px 12px;
  cursor:pointer;
  font-size:clamp(12px, 0.9vw, 14px);
}
.btn:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);}
.btn:disabled{opacity:0.4;cursor:not-allowed;}

/* Article - main content */
.article{
  margin-top:20px;
  padding:36px 40px 24px;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,0.02);
  box-shadow:var(--shadow);
}
.article h1{
  font-size:clamp(26px, 2.4vw, 36px);
  margin:0 0 14px;
  font-weight:700;
  line-height:1.2;
}
.article h2{
  font-size:clamp(20px, 1.7vw, 26px);
  margin:28px 0 10px;
  font-weight:600;
  line-height:1.3;
}
.article h3{
  font-size:clamp(17px, 1.3vw, 20px);
  margin:22px 0 8px;
  font-weight:600;
  line-height:1.3;
}
.article p,.article li{
  color:rgba(233,238,245,0.9);
  line-height:1.65;
  font-size:clamp(15px, 1.1vw, 18px);
}
.article ul{padding-left:24px;}
.article code{
  font-family:var(--mono);
  font-size:clamp(13px, 0.95vw, 15px);
  background:rgba(255,255,255,0.06);
  padding:2px 6px;
  border-radius:6px;
}
.article pre{
  font-family:var(--mono);
  font-size:clamp(13px, 0.95vw, 15px);
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.10);
  padding:16px 18px;
  border-radius:12px;
  overflow:auto;
  margin:14px 0 18px;
  line-height:1.55;
}
.article pre code{background:transparent;padding:0;}

.kicker{
  font-size:clamp(15px, 1.15vw, 19px);
  color:rgba(233,238,245,0.72);
  margin-bottom:14px;
  line-height:1.55;
}
.callout{
  border-left:4px solid var(--accent);
  padding:12px 16px;
  border-radius:10px;
  background:var(--accent-soft);
  margin:16px 0;
  font-size:clamp(14px, 1.05vw, 17px);
  line-height:1.6;
}
/* Badges pro licence / novinky */
.badge{
  display:inline-block;
  font-size:clamp(10px, 0.75vw, 12px);
  font-weight:700;
  padding:3px 8px;
  border-radius:999px;
  margin-right:6px;
  letter-spacing:0.02em;
  vertical-align:middle;
}
.badge-free{background:rgba(80,200,120,0.15);color:#7be3a3;border:1px solid rgba(80,200,120,0.35);}
.badge-licence{background:var(--accent-soft);color:#ff8a9a;border:1px solid var(--accent-line);}
.badge-new{background:rgba(255,190,80,0.15);color:#ffce80;border:1px solid rgba(255,190,80,0.35);}
.badges{margin:0 0 20px;display:flex;flex-wrap:wrap;gap:8px;}
hr{border:none;border-top:1px solid var(--line);margin:24px 0;}

.footer{padding:16px 8px;color:rgba(233,238,245,0.55);}
.tiny{font-size:clamp(11px, 0.8vw, 13px);color:rgba(233,238,245,0.55);line-height:1.5;}

/* Mobile menu toggle */
.menu-toggle{
  display:none;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 16px;
  border-radius:12px;
  cursor:pointer;
  font-size:clamp(16px, 1.8vw, 22px);
}

/* Tabulky */
.article table{
  width:100%;
  border-collapse:collapse;
  margin:14px 0 18px;
  font-size:clamp(13px, 0.95vw, 15px);
}
.article th,.article td{
  text-align:left;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.article th{
  font-weight:700;
  color:var(--text);
  border-bottom:2px solid var(--accent);
  background:rgba(255,255,255,0.02);
}
.article tr:hover td{background:rgba(255,255,255,0.02);}

/* Print */
@media print{
  body{background:#fff;color:#000;}
  .sidebar,.topbar,.footer,.menu-toggle{display:none !important;}
  .content{max-width:100%;padding:0;}
  .article{border:none;box-shadow:none;background:#fff;color:#000;}
  .article p,.article li{color:#000;}
  .article pre{background:#f6f6f6;border:1px solid #ddd;}
}

/* Tablet */
@media (max-width:1100px){
  .sidebar{width:360px;}
  .content{padding:20px 24px 32px;}
}

/* Mobile */
@media (max-width:768px){
  .app{flex-direction:column;}
  .sidebar{
    width:100%;
    height:auto;
    position:relative;
    display:none;
    border-right:none;
    border-bottom:1px solid var(--line);
    padding:20px;
  }
  .sidebar.open{display:block;}
  .menu-toggle{display:block;}
  .content{padding:16px;}
  .topbar{flex-wrap:wrap;top:0;padding:12px 16px;}
  .breadcrumbs{max-width:100%;order:2;flex-basis:100%;margin-top:10px;}
  .actions{order:1;}
  .article{padding:24px 20px;}
}