/* ===== DNAK D1 — Manual styles ===== */
:root{
  --txt:#1a1a1a; --grey:#595959; --soft:#f5f5f5; --line:#e6e6e6;
  --accent:#c45911; --warn:#c00000; --pend:#c45911;
  --boxw:#fbe4d5; --boxp:#fff2cc; --talt:#f8f8f8;
  --maxw:880px; --tocw:240px; --radius:6px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.55 var(--font); color:var(--txt); background:#fff; -webkit-font-smoothing:antialiased;}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; display:block}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;padding:8px 12px;background:#fff;border:2px solid var(--accent);z-index:1000}

/* ----- TOP BAR ----- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 20px;
  background:#fff; border-bottom:1px solid var(--line);
}
.brand img{height:28px; width:auto}
.actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--radius);
  font:600 14px/1 var(--font); cursor:pointer; text-decoration:none;
  border:1px solid var(--line); background:#fff; color:var(--txt);
  transition:all .15s ease;
}
.btn:hover{border-color:var(--accent); color:var(--accent); text-decoration:none}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-primary:hover{background:#a14a0e; color:#fff; border-color:#a14a0e}
.btn-ghost{background:transparent}
.lang-switch{display:flex; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.lang-switch button{
  border:0; background:#fff; padding:7px 12px; cursor:pointer;
  font:600 13px var(--font); color:var(--grey); border-right:1px solid var(--line);
}
.lang-switch button:last-child{border-right:0}
.lang-switch button.active{background:var(--txt); color:#fff}
.btn-toc-mobile{display:none}

/* ----- LAYOUT ----- */
.layout{display:flex; max-width:1200px; margin:0 auto; padding:0 20px;}
.toc{
  position:sticky; top:64px; align-self:flex-start;
  width:var(--tocw); flex:0 0 var(--tocw);
  max-height:calc(100vh - 80px); overflow:auto;
  padding:28px 8px 28px 0; margin-right:24px;
  border-right:1px solid var(--line);
  font-size:14px;
}
.toc h4{margin:0 0 8px; font-size:11px; letter-spacing:.1em; color:var(--grey); text-transform:uppercase}
.toc ol{list-style:none; margin:0; padding:0}
.toc li a{
  display:block; padding:6px 10px; border-radius:4px; color:var(--txt);
  border-left:2px solid transparent;
}
.toc li a:hover{background:var(--soft); text-decoration:none}
.toc li a.active{border-left-color:var(--accent); color:var(--accent); font-weight:600}
.toc .toc-page{display:none; float:right; color:var(--grey)}

.doc{flex:1 1 auto; max-width:var(--maxw); padding:32px 0 60px; min-width:0}

/* ----- COVER ----- */
.cover{
  padding:24px 0 40px; margin-bottom:32px;
  border-bottom:1px solid var(--line);
}
.cover-hero{text-align:center; padding:24px 0}
.cover-hero img{max-width:480px; margin:0 auto}
.cover-title{
  text-align:center; font:800 56px/1.05 var(--font);
  letter-spacing:-.02em; margin:24px 0 4px;
}
.cover-sub{text-align:center; color:var(--grey); font-size:20px; margin:0 0 16px}
.cover-tag{text-align:center; font-weight:700; letter-spacing:.18em; margin:24px 0 6px}
.cover-version{text-align:center; color:var(--grey); font-size:14px; margin:0 0 4px}
.cover-disclaimer{text-align:center; color:var(--grey); font-size:13px; font-style:italic; margin:8px 0 0}

/* ----- HEADINGS & TEXT ----- */
h1.section-title{
  font:800 32px/1.2 var(--font); letter-spacing:-.01em;
  margin:48px 0 16px; padding-bottom:8px;
  border-bottom:3px solid var(--accent);
  scroll-margin-top:80px;
}
h2{font:700 22px/1.3 var(--font); margin:32px 0 12px; scroll-margin-top:80px}
h3{font:700 17px/1.3 var(--font); color:#333; margin:24px 0 8px}
p{margin:0 0 12px}
ul,ol{margin:0 0 14px; padding-left:22px}
li{margin-bottom:4px}
strong{font-weight:700}
.bold-key{font-weight:700; color:var(--txt)}

/* ----- FIGURES ----- */
figure{margin:16px 0 16px; text-align:center}
figure img{margin:0 auto; max-width:100%}
figcaption{font-size:13px; color:var(--grey); font-style:italic; margin-top:6px}

.parts-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:16px 0}
.parts-grid figure{margin:0; padding:12px; border:1px solid var(--line); border-radius:var(--radius)}

.imgrow{display:flex; gap:24px; align-items:center; margin:12px 0}
.imgrow > *{flex:1}

/* ----- TABLES ----- */
table.specs, table.led{
  width:100%; border-collapse:collapse; margin:8px 0 20px;
  font-size:14px;
}
table.specs th, table.specs td, table.led th, table.led td{
  text-align:left; padding:8px 12px; border:1px solid var(--line); vertical-align:top;
}
table.specs th, table.led th{background:var(--soft); font-weight:600; width:34%}
table.specs tr:nth-child(even) td, table.led tr:nth-child(even) td,
table.specs tr:nth-child(even) th, table.led tr:nth-child(even) th{background:var(--talt)}

/* ----- CALLOUT BOXES ----- */
.callout{
  border-left:5px solid var(--warn);
  background:var(--boxw); padding:14px 18px;
  border-radius:0 var(--radius) var(--radius) 0;
  margin:16px 0;
}
.callout-pending{border-left-color:var(--pend); background:var(--boxp)}
.callout-title{font-weight:700; color:var(--warn); margin:0 0 6px; display:flex; align-items:center; gap:8px}
.callout-pending .callout-title{color:var(--pend)}
.callout p, .callout li{margin-bottom:4px}
.callout ul{margin:4px 0 0; padding-left:20px}

.trouble{margin:14px 0; padding:12px 14px; background:var(--soft); border-radius:var(--radius)}
.trouble h3{margin-top:0}
.trouble .lbl{font-weight:700}

.pending-tag{
  display:inline-block; background:var(--pend); color:#fff;
  padding:1px 8px; border-radius:10px; font-size:11px; font-weight:700;
  letter-spacing:.05em; margin-left:6px; vertical-align:middle;
}

.compat-icons{margin:8px 0}

/* ----- FOOTER ----- */
.bottom{border-top:1px solid var(--line); margin-top:40px; padding:18px 20px; font-size:13px; color:var(--grey)}
.bottom-inner{max-width:1200px; margin:0 auto; text-align:center}
.bottom .dot{margin:0 6px}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px){
  .layout{flex-direction:column; padding:0 16px}
  .toc{
    position:fixed; top:60px; right:0; bottom:0; left:0;
    width:auto; max-width:none; flex:none; margin:0;
    background:#fff; border-right:0; border-top:1px solid var(--line);
    padding:20px; z-index:40; transform:translateX(100%);
    transition:transform .2s ease; max-height:none;
  }
  .toc.open{transform:translateX(0)}
  .btn-toc-mobile{
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:36px; border-radius:var(--radius);
    border:1px solid var(--line); background:#fff; font-size:18px; cursor:pointer;
  }
  .btn-quick, .btn-print{display:none}  /* keep top bar uncluttered on phones */
  .cover-title{font-size:38px}
  .cover-hero img{max-width:300px}
  .doc{padding:20px 0 40px}
  h1.section-title{font-size:24px; margin-top:32px}
  .parts-grid{grid-template-columns:1fr}
  .imgrow{flex-direction:column; gap:12px}
  table.specs, table.led{font-size:13px}
  table.specs th, table.specs td{padding:6px 8px}
}
@media (max-width:560px){
  .topbar{padding:10px 14px}
  .btn-pdf-label, #btn-print-label{display:none}  /* icons only */
  .btn{padding:7px 10px}
}

/* ===== PRINT ===== */
@page{ size:A4; margin:18mm 16mm 16mm 16mm; }
@media print{
  .topbar, .toc, .bottom, .skip{display:none !important}
  .layout{display:block; padding:0; max-width:none}
  .doc{padding:0; max-width:none}
  body{font-size:11pt}
  .cover{padding:0; margin-bottom:0; border:0; min-height:80vh;
    display:flex; flex-direction:column; justify-content:center; page-break-after:always}
  .cover-title{font-size:48pt}
  h1.section-title{page-break-before:always; font-size:22pt}
  h1.section-title:first-of-type{page-break-before:auto}
  h2,h3{page-break-after:avoid}
  figure, table, .callout{page-break-inside:avoid}
  a{color:inherit; text-decoration:none}
  table.specs th, table.led th{background:#f0f0f0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .callout{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .toc-print{display:block !important; page-break-after:always}
  .toc-print h1{font:800 28pt/1.2 var(--font); border-bottom:3px solid var(--accent); padding-bottom:6pt}
  .toc-print ol{list-style:none; padding:0}
  .toc-print li{font-size:12pt; padding:4pt 0; border-bottom:1px dotted #bbb}
}
.toc-print{display:none}