/* THEME TOKENS */
:root{
  --c-bg:#0e1216; --c-card:#141a21; --c-elev:#0b0f14;
  --c-text:#e9eef5; --c-muted:#9aa9b7;
  --c-accent:#4cc38a; --c-accent-weak:#2b9b69; --c-danger:#e66a6a;
  --c-border:#1f2730; --c-focus:#87d6b5;
  --r:14px; --shadow:0 10px 30px rgba(0,0,0,.28);
  --glass:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));
  --tr:180ms cubic-bezier(.2,.7,.2,1);
  --moist-high:#4cc38a; --moist-mid:#e6b84a; --moist-low:#e66a6a;
}
body:not(.theme-dark){
  --c-bg:#f6f9fc; --c-card:#ffffff; --c-elev:#f2f6fb;
  --c-text:#0e1116; --c-muted:#5b6b7a;
  --c-accent:#2b9b69; --c-accent-weak:#227e56; --c-danger:#c63d3d;
  --c-border:#e7eef4; --c-focus:#2b9b69;
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --glass:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.9));
}

/* BASE */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--c-text);
  background:radial-gradient(900px 450px at 10% -10%,rgba(76,195,138,.15),transparent),
             radial-gradient(800px 400px at 110% -20%,rgba(80,110,255,.10),transparent),
             var(--c-bg);
  background-attachment:fixed;
  -webkit-tap-highlight-color: transparent;
}
:focus{outline:none}
:focus-visible{box-shadow:0 0 0 3px var(--c-focus) inset, 0 0 0 3px var(--c-focus); border-radius:10px}

.container{max-width:1200px;margin:0 auto;padding:16px}

/* TOPBAR */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;min-width:220px}
.brand-center{justify-content:center;margin-bottom:12px}
.logo-dot{width:14px;height:14px;border-radius:4px;background:var(--c-accent);display:inline-block;box-shadow:0 0 0 4px color-mix(in srgb,var(--c-accent),transparent 80%)}
.brand-title{font-weight:800;letter-spacing:.2px}
.brand-sub{font-size:12px;color:var(--c-muted)}
.action-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.badge{display:inline-flex;gap:6px;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--c-border);background:var(--glass);backdrop-filter:saturate(1.1) blur(6px)}
.badgelike{display:inline-flex;gap:6px;align-items:center;border-radius:12px}
@media (max-width:540px){
  .action-row{width:100%;justify-content:space-between}
  .action-row > *{margin-top:6px}
}

/* BUTTONS */
button,[type="button"],[type="submit"]{font:inherit}
.btn{
  --btn-bg: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  --btn-border: var(--c-border); --btn-text: var(--c-text);
  appearance:none; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-text);
  padding:11px 14px; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition: transform 160ms var(--tr), box-shadow 160ms var(--tr), background 160ms var(--tr), border-color 160ms var(--tr), color 160ms var(--tr);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset; text-decoration:none;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.15) }
.btn:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,.12) }
.btn:disabled{ opacity:.6; cursor:not-allowed }
.btn-primary{ --btn-bg:linear-gradient(180deg, color-mix(in srgb,var(--c-accent),transparent 0%), color-mix(in srgb,var(--c-accent),transparent 10%)); --btn-border:var(--c-accent); --btn-text:#06110b; box-shadow:0 6px 16px color-mix(in srgb,var(--c-accent),transparent 70%) }
.btn-primary:hover{ --btn-bg:linear-gradient(180deg, color-mix(in srgb,var(--c-accent-weak),transparent 0%), color-mix(in srgb,var(--c-accent-weak),transparent 10%)); --btn-border:var(--c-accent-weak); --btn-text:#fff }
.btn-light{ --btn-bg:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); --btn-border:color-mix(in srgb, var(--c-text), transparent 85%); --btn-text:var(--c-text) }
body:not(.theme-dark) .btn-light{ --btn-bg:linear-gradient(180deg, #f3f6fa, #eef3f9); --btn-border:#d8e3ee; --btn-text:#0e1116; box-shadow:0 1px 0 #fff inset, 0 4px 10px rgba(16,24,40,.06) }
.btn-danger{ --btn-bg:linear-gradient(180deg, color-mix(in srgb,var(--c-danger),transparent 0%), color-mix(in srgb,var(--c-danger),transparent 12%)); --btn-border:var(--c-danger); --btn-text:#fff; box-shadow:0 6px 16px color-mix(in srgb,var(--c-danger),transparent 72%) }
.btn-ghost{ --btn-bg:transparent; --btn-border:transparent; --btn-text:var(--c-text) }
.btn-ghost:hover{ --btn-bg:rgba(255,255,255,.06); --btn-border:var(--c-border) }

/* Hover-Highlight für große Schalter */
.hover-green:hover{ border-color: var(--c-accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb,var(--c-accent),transparent 70%) }

/* INPUTS & SELECT */
.input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--c-border);background:transparent;color:var(--c-text)}
.input::placeholder{color:color-mix(in srgb,var(--c-muted),transparent 20%)}
.select{appearance:none;background:
  linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23aab6c3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center / 18px 18px;
  padding-right:36px;
}
.select:focus{border-color:var(--c-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--c-accent),transparent 70%) inset}
select.input option{background-color:var(--c-card); color:var(--c-text)}

/* UTILITIES */
.w100{width:100%} .big{padding:14px 16px; font-size:15px; font-weight:700} .mt12{margin-top:12px}
.cardlike{display:flex;flex-direction:column}

/* SEGMENT-TOGGLE */
.seg-toggle{display:grid; grid-template-columns:1fr 1fr; gap:8px; background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); padding:6px; border:1px solid var(--c-border); border-radius:14px}
.seg-item{margin:0}
.seg-btn{width:100%; border:1px solid var(--c-border); background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); color:var(--c-text); padding:10px 12px; border-radius:10px; cursor:pointer}
.seg-item.active .seg-btn{background:linear-gradient(180deg, color-mix(in srgb,var(--c-accent),transparent 0%), color-mix(in srgb,var(--c-accent),transparent 12%)); border-color:var(--c-accent); color:#06110b}
@media (max-width:640px){ .seg-toggle{grid-template-columns:1fr} }

/* CARDS */
.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r);padding:16px;margin:14px 0;box-shadow:var(--shadow)}
.card:hover{border-color:color-mix(in srgb,var(--c-accent),var(--c-border) 75%)}
h1,h2,h3{margin:0 0 10px}
h2,h3{display:flex;gap:8px;align-items:center}
.mono{font-family:ui-monospace,Consolas,monospace}
.muted{color:var(--c-muted)} .sm{font-size:12px}

/* OVERVIEW GRID */
.overview-grid{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px}
@media (max-width:1100px){.overview-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.overview-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.overview-grid{grid-template-columns:1fr}}

.overview-card{position:relative;display:grid;grid-template-columns:18px 1fr;gap:12px;padding:12px;border:1px solid var(--c-border);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);transition:border-color var(--tr), transform var(--tr)}
.overview-card:hover{border-color:var(--c-accent);transform:translateY(-2px)}
.card-overlay-link{position:absolute;inset:0;z-index:1}
.bar-vert{width:14px;border-radius:10px;background:#0c301f;position:relative;align-self:stretch;overflow:hidden;border:1px solid rgba(0,0,0,.2)}
.bar-vert::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:var(--h,0%);background:linear-gradient(180deg,#2fcd8b,#1a8a5c)}
.ov-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.status-dot{font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--c-border)}
.status-dot.online{background:rgba(54,179,126,.15)} .status-dot.idle{background:rgba(255,180,0,.12)} .status-dot.offline{background:rgba(230,106,106,.12)}
.auto-dot{font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--c-border)}
.auto-dot.on{background:rgba(54,179,126,.15)} .auto-dot.off{background:rgba(150,160,170,.12)}
.moist-row{margin-top:6px}
.moist-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--c-border);background:linear-gradient(180deg,rgba(76,195,138,.12),transparent);font-weight:700}
.moist-chip.high{border-color:color-mix(in srgb,var(--moist-high),transparent 50%);background:linear-gradient(180deg,color-mix(in srgb,var(--moist-high),transparent 85%),transparent)}
.moist-chip.mid{border-color:color-mix(in srgb,var(--moist-mid),transparent 50%);background:linear-gradient(180deg,color-mix(in srgb,var(--moist-mid),transparent 85%),transparent)}
.moist-chip.low{border-color:color-mix(in srgb,var(--moist-low),transparent 50%);background:linear-gradient(180deg,color-mix(in srgb,var(--moist-low),transparent 85%),transparent)}
.moist-chip.na{opacity:.7}
.spark{width:100%;height:46px;margin-top:10px}

/* Add-Kachel */
.add-card{display:flex;align-items:center;justify-content:center;border-style:dashed;border-color:color-mix(in srgb,var(--c-accent),transparent 60%)}
.add-card:hover{border-color:var(--c-accent)}
.add-card .add-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
.add-card .add-icon{font-size:24px}

/* Entfernen-Button */
.card-remove-form{margin-left:auto;z-index:2}
.rm-btn{border:1px solid var(--c-border);background:transparent;color:var(--c-muted);border-radius:8px;padding:4px 6px;cursor:pointer}
.rm-btn:hover{border-color:var(--c-danger);color:var(--c-danger)}

/* EDIT */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.grid-2{display:grid;grid-template-columns:1fr}}
.pane{border:1px solid var(--c-border);border-radius:14px;padding:12px;background:var(--c-card)}
.edit-header{margin-bottom:6px}
.inline-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-ghost-icon{border:none;background:transparent;padding:0 6px;cursor:pointer;border-radius:8px}
.btn-ghost-icon:hover{background:rgba(255,255,255,.06)}
.inline-name .name-input{display:none;max-width:280px}
.inline-name .name-save{display:none}
.inline-name.editing .name-text{display:none}
.inline-name.editing .name-input{display:inline-flex}
.inline-name.editing .name-save{display:inline-flex}
.meta-line{margin:6px 0 2px}

.split-2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:640px){.split-2{grid-template-columns:1fr}}

/* CHART */
.chart-toolbar{display:flex;gap:6px;justify-content:flex-end;margin-bottom:6px;flex-wrap:wrap}
.chart-toolbar .btn.active{border-color:var(--c-accent); background:linear-gradient(180deg, color-mix(in srgb,var(--c-accent),transparent 0%), color-mix(in srgb,var(--c-accent),transparent 12%)); color:#06110b}
.chart-canvas{width:100%;display:block}

/* TABLE / LOG */
.table{width:100%;border:1px solid var(--c-border);border-radius:12px;overflow:hidden}
.tr{display:grid;grid-template-columns:120px 220px 1fr;gap:10px;padding:10px;border-top:1px solid var(--c-border);align-items:center}
.tr:first-child{border-top:0}
.tr.th{background:rgba(255,255,255,.03);font-weight:700}
@media (max-width:760px){.tr{grid-template-columns:100px 1fr}}
@media (max-width:560px){.tr{grid-template-columns:1fr;row-gap:6px}}

/* ALERTS & LOGIN */
.alert{border:1px solid var(--c-border);background:rgba(76,195,138,.08);color:var(--c-text);border-radius:12px;padding:10px 12px;margin:10px 0;display:flex;gap:8px;align-items:center}
.auth-card{max-width:420px;margin:12vh auto;background:var(--c-card);border:1px solid var(--c-border);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.auth-title{display:flex;gap:8px;align-items:center;justify-content:center;margin:6px 0 10px}
.auth-form label{display:block;margin:10px 0 6px}
.auth-form input{width:100%}
.text-error{color:var(--c-danger);margin-top:8px;display:flex;gap:6px;align-items:center}

/* QUEUE POPOVER */
.queue-pop{position:relative;outline:none}
.queue-badge{transition:transform 200ms var(--tr), box-shadow 200ms var(--tr)}
.queue-pop:hover .queue-badge,
.queue-pop:focus .queue-badge,
.queue-pop:focus-within .queue-badge{transform:scale(1.04); box-shadow:0 6px 20px rgba(0,0,0,.25)}
.queue-panel{
  position:absolute; right:0; top:calc(100% + 8px); width:min(560px,92vw);
  border:1px solid var(--c-border); background:var(--c-card); border-radius:12px; box-shadow:var(--shadow);
  padding:10px; opacity:0; transform:translateY(-6px) scale(0.98); pointer-events:none;
  transition:opacity 140ms var(--tr), transform 160ms var(--tr); z-index:40;
}
.queue-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.queue-head{font-weight:700;margin-bottom:6px}
.queue-list{max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:6px}
.queue-item{display:flex; gap:6px; align-items:center; padding:6px 8px; border:1px solid var(--c-border); border-radius:10px; background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.queue-clear{display:flex; justify-content:flex-end; margin-top:8px}
@media (max-width:540px){
  .queue-panel{ position:fixed; left:12px; right:12px; top:72px; width:auto }
}

/* BUSY HUD */
#busyHud{ position:fixed; left:50%; bottom:24px; translate:-50% 20px; opacity:0; pointer-events:none; z-index:2000; transition:opacity .18s var(--tr), translate .18s var(--tr) }
#busyHud .busy-inner{ display:flex; gap:10px; align-items:center; background:var(--c-card); color:var(--c-text); border:1px solid var(--c-border); border-radius:12px; padding:10px 14px; box-shadow:var(--shadow) }
.hg{display:inline-block; font-size:18px; animation:hourglass 1.2s linear infinite}
@keyframes hourglass{ 0%{ transform:rotate(0) } 50%{ transform:rotate(180deg) } 100%{ transform:rotate(360deg) } }
body.busy #busyHud{ opacity:1; translate:-50% 0 }

/* MODAL */
.modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:3000 }
.modal.open{ display:flex }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.4) }
.modal-card{ position:relative; background:var(--c-card); border:1px solid var(--c-border); border-radius:14px; padding:16px; width:min(420px,94vw); box-shadow:var(--shadow) }
.modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:12px }
.lbl{ display:block; margin:6px 0 4px }