:root{
  --hawaii:#00A5C9;
  --hawaii-dark:#0077A0;
  --hawaii-deep:#005A7A;
  --hawaii-bg:#E8F7FB;
  --hawaii-bg2:#F4FBFD;
  --ink:#2B2B2B;
  --muted:#5A6A6F;
  --line:#C9E9F1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
.wrap{max-width:900px;margin:0 auto;padding:0 22px}

.hero{background:var(--hawaii-dark);color:#fff;padding:44px 0 40px;
  box-shadow:0 4px 0 rgba(0,0,0,.06)}
.hero .kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:#bfeaf5;font-weight:700;margin:0 0 10px}
.hero h1{margin:0 0 10px;font-size:2.1rem;font-weight:800;line-height:1.12}
.hero h1 span{color:#7fdcef}
.hero .lead{margin:0 0 14px;max-width:60ch;color:#e6f7fb}
.hero .author{margin:0;font-size:.86rem;color:#bfeaf5}

main{padding:34px 0 20px}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:20px 22px 24px;margin:0 0 22px;box-shadow:0 1px 0 rgba(0,0,0,.03)}
.card h2{display:flex;align-items:center;gap:12px;margin:0 0 8px;
  font-size:1.28rem;color:var(--hawaii-deep);font-weight:800}
.card h2 .num{flex:0 0 auto;width:34px;height:34px;border-radius:9px;
  background:var(--hawaii);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:800}
.card p{margin:0 0 14px;color:var(--ink)}
.card p b{color:var(--hawaii-dark)}

.widget{border:1px solid var(--line);border-radius:10px;background:var(--hawaii-bg2);
  padding:16px;margin-top:6px}

/* kontrole */
.controls{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:flex-end;margin-bottom:12px}
.control{display:flex;flex-direction:column;gap:5px;min-width:150px}
.control label{font-size:.78rem;font-weight:700;color:var(--hawaii-dark)}
.control .val{font-variant-numeric:tabular-nums;color:var(--hawaii-deep);font-weight:700}
input[type=range]{width:180px;accent-color:var(--hawaii)}
input[type=number]{width:120px;padding:6px 8px;border:1px solid var(--line);border-radius:7px;
  font:inherit;color:var(--ink)}
select{padding:6px 8px;border:1px solid var(--line);border-radius:7px;font:inherit;background:#fff}
button{cursor:pointer;border:none;background:var(--hawaii);color:#fff;font:inherit;font-weight:700;
  padding:9px 16px;border-radius:8px}
button:hover{background:var(--hawaii-dark)}
button.ghost{background:#fff;color:var(--hawaii-dark);border:1px solid var(--line)}
button.ghost:hover{background:var(--hawaii-bg)}

.readout{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;
  font-size:.9rem;font-weight:600;color:var(--hawaii-deep)}
.pill b{color:var(--hawaii-dark)}
.pill.big{font-size:1rem}

svg{display:block;max-width:100%;height:auto;overflow:visible}
.hint{font-size:.82rem;color:var(--muted);margin-top:10px}

/* protokolni stog */
.stack-layer{cursor:pointer;transition:opacity .15s}
.stack-detail{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;min-height:64px}
.stack-detail h4{margin:0 0 4px;color:var(--hawaii-dark)}
.stack-detail p{margin:0;color:var(--ink);font-size:.92rem}
.stack-detail code{background:var(--hawaii-bg);padding:1px 6px;border-radius:4px;color:var(--hawaii-deep)}

.foot{border-top:1px solid var(--line);padding:22px 0 34px;color:var(--muted);font-size:.85rem}

@media (max-width:560px){
  .hero h1{font-size:1.6rem}
  input[type=range]{width:150px}
}

/* --- L2 dodatne komponente --- */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
@media(max-width:560px){.panels{grid-template-columns:1fr}}
.panel{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.panel h5{margin:0;padding:8px 12px;background:var(--hawaii-bg);color:var(--hawaii-dark);
  font-size:.8rem;letter-spacing:.03em;text-transform:uppercase}
.panel pre{margin:0;padding:12px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;white-space:pre-wrap;word-break:break-word;color:var(--ink);line-height:1.5}
.tok-method{color:var(--hawaii-dark);font-weight:700}
.tok-status-ok{color:#0a7d3c;font-weight:700}
.tok-status-err{color:#b03030;font-weight:700}
textarea{width:100%;min-height:76px;padding:8px;border:1px solid var(--line);border-radius:7px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:var(--ink);resize:vertical}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.code-cell{border:1px solid var(--line);border-radius:8px;padding:8px 6px;text-align:center;cursor:pointer;
  background:#fff;font-weight:700;color:var(--hawaii-deep);transition:.12s}
.code-cell:hover{background:var(--hawaii-bg)}
.code-cell.c2{border-color:#0a7d3c}.code-cell.c3{border-color:#0077A0}
.code-cell.c4{border-color:#c98a00}.code-cell.c5{border-color:#b03030}
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.filterbar button.active{background:var(--hawaii-dark)}
.jar{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;min-height:32px}
.cookie{background:var(--hawaii-bg);border:1px solid var(--hawaii);border-radius:999px;
  padding:5px 12px;font-size:.82rem;color:var(--hawaii-deep);font-weight:600}