/* ---------------------------------------------------------------- *
 * Client-Steuerung (LCU) — Verbindung, Automatik, Account-Wechsel   *
 * Neumorphik wie der Rest der Seite (Tokens aus tokens.css).        *
 * ---------------------------------------------------------------- */
#view-client{display:flex;flex-direction:column;gap:16px}
.cl-card{display:flex;flex-direction:column}
.cl-body{padding:14px 18px;display:flex;flex-direction:column;gap:12px}
.cl-sub{font-size:12px;color:var(--ink3);line-height:1.5;margin:0}
.cl-note{font-size:11.5px;color:var(--loss)}
.cl-msg{font-size:12px;color:var(--win)}
.cl-err{font-size:12px;color:var(--loss)}

/* Eingaben — dieselbe eingelassene Form wie im Admin-Key-Feld */
.cl-in{border:0;outline:none;background:var(--canvas);color:var(--ink);
  font:inherit;font-size:12.5px;padding:9px 14px;border-radius:12px;
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.cl-in::placeholder{color:var(--ink3)}
.cl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cl-row .cl-in{flex:1;min-width:200px}

.btn.cl-ghost{color:var(--ink3)}
.btn.cl-ghost:hover{color:var(--ink2)}
.btn.cl-danger{color:var(--loss)}

/* Verbindungszeile + Punkt */
.cl-connrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cl-connline{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink2);font-weight:600}
.cl-dot{width:9px;height:9px;border-radius:50%;background:var(--ink3);opacity:.55;flex:none}
.cl-dot.on{background:var(--win);opacity:1;box-shadow:0 0 8px 1px rgba(70,192,122,.5)}
.cl-lockrow{margin-top:2px}

/* Automatik-Zeilen */
.cl-featrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cl-lbl{min-width:120px;font-size:12.5px;font-weight:700;color:var(--ink2)}
.cl-champ{min-width:180px}

/* An/Aus-Schalter — die etablierte .seg-Optik (zwei Knoepfe, .on markiert) */
.cl-seg{display:inline-flex;border-radius:12px;overflow:hidden;
  box-shadow:inset 2px 2px 6px var(--lo),inset -2px -2px 6px var(--hi)}
.cl-segbtn{border:0;background:transparent;color:var(--ink3);cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;padding:7px 16px;transition:color .15s,background .15s}
.cl-segbtn:disabled{opacity:.4;cursor:not-allowed}
.cl-segbtn.on{color:var(--bg,#0F1115);background:var(--ink2)}
.cl-seg [data-clset="on"].on{background:var(--win);color:#0b140e}
.cl-seg [data-clset="off"].on{background:var(--ink3);color:#0b0d12}

/* Accounts */
.cl-acclist{display:flex;flex-direction:column;gap:10px}
.cl-empty{font-size:12px;color:var(--ink3);padding:8px 0}
.cl-stage{font-size:12px;color:var(--cyan);min-height:0}
.cl-stage:empty{display:none}
.cl-accrow{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--r);background:var(--canvas);
  box-shadow:6px 6px 13px var(--lo),-5px -5px 12px var(--hi)}
.cl-accmain{display:flex;flex-direction:column;gap:4px;min-width:200px}
.cl-accname{font-size:13.5px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.cl-accreg{font-size:10px;font-weight:700;color:var(--ink3);letter-spacing:.6px}
.cl-accmeta{font-size:11px;color:var(--ink3)}
.cl-pwok{color:var(--win)} .cl-pwno{color:var(--loss)}
.cl-pool{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.cl-chip{font-size:10.5px;color:var(--ink2);padding:2px 8px;border-radius:8px;
  box-shadow:inset 1px 1px 3px var(--lo),inset -1px -1px 3px var(--hi)}
.cl-accbtnrow{display:flex;gap:8px;flex-wrap:wrap}

/* Account-Formular */
.cl-form{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:var(--r);
  background:var(--canvas);box-shadow:inset 4px 4px 10px var(--lo),inset -4px -4px 10px var(--hi)}
.cl-frow{display:flex;align-items:center;gap:12px}
.cl-frow label{min-width:130px;font-size:12px;font-weight:600;color:var(--ink2)}
.cl-frow .cl-in{flex:1}
.cl-accbtns{margin-top:2px}