:root{
  --bg:#0b0b0c; --card:#151518; --muted:#a3a3ad; --txt:#e8eaed;
  --accent:#4f7cff; --accent-2:#22c55e; --warn:#f59e0b; --danger:#ef4444;
  --bd:#26262b; --radius:14px; --gap:12px; --pad:14px; --tap:48px; --shadow:0 6px 24px rgba(0,0,0,.25);
  --font: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:var(--font);-webkit-text-size-adjust:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

header.app{
  position:sticky; top:0; z-index:20; border-bottom:1px solid var(--bd);
  backdrop-filter:saturate(1.1) blur(8px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
}
.header-inner{max-width:1040px;margin:0 auto;display:flex;align-items:baseline;gap:12px;justify-content:space-between;padding:10px clamp(12px,2.8vw,24px)}
h1,h2,h3{margin:0 0 8px}
h2{font-size:clamp(18px,4.8vw,26px)}
small.range{color:var(--muted);font-weight:500}

.container{max-width:1040px;margin:0 auto;padding: clamp(12px,2.8vw,24px)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);padding:var(--pad);box-shadow:var(--shadow)}

.grid{display:grid;gap:var(--gap)}
.cols-1{grid-template-columns:1fr}
@media (min-width:760px){ .cols-2{grid-template-columns:1fr 1fr} }

.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}

label{display:inline-flex;align-items:center;gap:6px}
input,select,button,textarea{
  font:inherit;color:var(--txt);background:#101014;border:1px solid var(--bd);border-radius:12px;
  height:var(--tap); padding:0 12px; outline:none; width:100%;
}
input[type="datetime-local"]{min-width:220px}
textarea{min-height:120px;padding:10px}
button{
  cursor:pointer; border:1px solid transparent; background:var(--accent);
  font-weight:600; height:var(--tap); padding:0 16px; border-radius:12px;
}
button:hover{filter:brightness(1.06)}
.btn-ok{background:var(--accent-2)}
.btn-warn{background:var(--warn)}
.btn-danger{background:var(--danger)}
.btn-ghost{background:transparent;border-color:var(--bd)}

.list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.item{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;background:#101014;border:1px solid var(--bd);border-radius:12px;padding:10px 12px}
.item .meta{color:var(--muted);font-size:.95em}

.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{position:sticky;top:0;background:#131318;border-bottom:1px solid var(--bd);text-align:left;padding:10px}
.table tbody td{border-bottom:1px solid var(--bd);padding:10px;vertical-align:top}
.table tbody tr:hover{background:#121216}

.nav{display:flex;flex-wrap:wrap;gap:8px}
.nav a,.nav button{height:36px;padding:0 12px;border-radius:10px}

.notice{color:var(--muted);padding:8px 0}
footer{color:var(--muted);font-size:.9em;margin-top:18px}


/* Akkordeon */
details.accordion { border:1px solid var(--bd); border-radius:var(--radius); background:var(--card); overflow:hidden }
details.accordion + details.accordion { margin-top:12px }
summary.accordion-summary {
  list-style:none; cursor:pointer; user-select:none; padding:14px clamp(12px,2.8vw,20px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#131318; border-bottom:1px solid var(--bd); font-weight:600;
}
summary.accordion-summary::-webkit-details-marker { display:none }
.accordion-title { display:flex; align-items:center; gap:10px }
.accordion-caret { transition:transform .18s ease; font-size:18px }
details[open] .accordion-caret { transform:rotate(90deg) }
.accordion-count { background:#101014; border:1px solid var(--bd); padding:2px 8px; border-radius:999px; font-weight:600; font-size:.92em }
.accordion-body { padding:12px clamp(12px,2.8vw,20px) }