/* ---------------------------------------------------------------- *
 * 4 · Sync-Panel + API-Key                                         *
 * ---------------------------------------------------------------- */
.w-syncbox{padding:14px 18px;border-radius:var(--r);background:var(--canvas);
  box-shadow:8px 8px 16px var(--lo),-6px -6px 14px var(--hi);
  display:flex;flex-direction:column;gap:11px}
.w-syncbox[hidden]{display:none!important}
.w-syncrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.w-synctitle{font-size:11.5px;font-weight:700;color:var(--ink2);letter-spacing:.2px}
.w-syncdetail{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.w-syncdetail.err{color:var(--loss)}
.w-progwrap{flex:1;min-width:160px;height:8px;border-radius:6px;position:relative;
  box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.w-prog{position:absolute;left:0;top:0;height:8px;border-radius:4px;background:var(--cyan);
  transition:width .25s ease}
.w-prog.done{background:var(--win)} .w-prog.err{background:var(--loss)}
.w-progwrap.idle .w-prog{width:35%;opacity:.55;animation:w-slide 1.2s ease-in-out infinite alternate}
@keyframes w-slide{from{transform:translateX(0)}to{transform:translateX(180%)}}
.w-syncbox .btn.w-ghost{color:var(--ink3)}
.w-syncbox .btn.w-ghost:hover{color:var(--ink2)}
/* Gesperrter Sync-Knopf: ohne Admin-Anmeldung wuerde ein Klick nur 401
   einbringen. Er bleibt anklickbar (der Klick nennt den Grund und oeffnet das
   Schloss), sieht aber nicht mehr wie ein einsatzbereiter Knopf aus. */
#syncbtn.w-locked{opacity:.55}
#syncbtn.w-locked::after{content:"🔒";font-size:10px;margin-left:6px;opacity:.9}

/* Key-Formular — erscheint nur, wenn Riot den Key ablehnt. */
.w-keyform{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.w-keyform input{
  flex:1;min-width:260px;border:0;outline:none;background:var(--canvas);color:var(--ink);
  font:inherit;font-size:12.5px;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  padding:9px 14px;border-radius:12px;
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.w-keyform input::placeholder{color:var(--ink3);font-family:inherit}
.w-keyform input.ok{color:var(--win)}
.w-keyform input.bad{color:var(--loss)}
.w-keyhint{font-size:11px;color:var(--ink3);line-height:1.5;flex-basis:100%}
.w-keyhint.ok{color:var(--win)} .w-keyhint.bad{color:var(--loss)}
.w-keyhint code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--ink2)}

/* ---------------------------------------------------------------- *
 * 4b · Admin — Account-Verwaltung (nur nach Anmeldung sichtbar)     *
 * ---------------------------------------------------------------- */
/* Ein Reiter mit hidden-Attribut braucht diese Zeile, sonst bliebe er
   sichtbar: `.seg button` setzt display:inline-flex und schlaegt damit die
   display:none-Regel des Browsers fuer [hidden]. Der Verwaltungs-Reiter
   selbst traegt seit dem 28.07.2026 KEIN hidden mehr (er steht dauerhaft in
   der Leiste); die Regel bleibt fuer jeden kuenftigen Fall stehen. */
.seg button[hidden]{display:none!important}

/* Das frühere Schloss-Symbol (.w-lockbtn) rechts aussen ist am 28.07.2026
   entfallen — der Weg in die Verwaltung ist jetzt ein normaler Reiter.
   Die Passwortmaske dahinter ist unveraendert. */

.w-admwrap{display:flex;flex-direction:column;gap:var(--gap)}
.w-admlogin{max-width:470px;margin:0 auto}
.w-admform{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.w-admin,.w-admsel{
  border:0;outline:none;background:var(--canvas);color:var(--ink);font:inherit;font-size:12.5px;
  padding:9px 14px;border-radius:12px;min-width:0;
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.w-admin{flex:1;min-width:200px}
.w-admin.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px}
.w-admin::placeholder{color:var(--ink3);font-family:"Segoe UI",system-ui,sans-serif}
.w-admin.ok{color:var(--win)} .w-admin.bad{color:var(--loss)}
.w-admsel{cursor:pointer}
.w-admsel option{background:var(--canvas);color:var(--ink)}

.w-admnote{font-size:11.5px;color:var(--ink3);line-height:1.55}
.w-admnote.ok{color:var(--win)} .w-admnote.bad{color:var(--loss)} .w-admnote.warn{color:var(--amber)}
.w-admnote code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--ink2)}
.w-admnote b{color:var(--ink2)}
.w-admhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.w-admhead .w-admspacer{margin-left:auto}

/* ---------- Key-Auslastung ----------
   Je Key eine Karte statt einer Tabellenzeile: „keine Messung" ist ein SATZ
   und keine Zahl, und die Herkunft gehoert an jede Zahl. In einer Tabelle
   waere beides nur als Fussnote unterzubringen gewesen.
   Alle Flaechen kommen aus den Variablen, damit der zweite Skin sie erbt. */
.w-kunote{margin-bottom:8px}
.w-kusrcs{display:flex;flex-direction:column;gap:6px;margin:10px 0 12px;padding:10px 13px;
  border-radius:var(--rw);box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
.w-kusrcrow{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;
  font-size:11px;line-height:1.5;color:var(--ink3)}
/* Der erklärende Satz bildet eine eigene Spalte. Sonst rutscht er unter das
   Etikett und die Zuordnung Etikett ↔ Erklärung geht verloren. */
.w-kusrcrow>span:last-child{flex:1 1 300px;min-width:0}
.w-kutag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;
  color:var(--ink3);box-shadow:inset 3px 3px 6px var(--lo),inset -3px -3px 6px var(--hi)}
.w-kutag.live{color:var(--cyan)}
.w-kucards{display:flex;flex-direction:column;gap:10px}
.w-kucard{padding:12px 14px;border-radius:var(--rw);
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.w-kuhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.w-kufp{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:12.5px;font-weight:700;color:var(--ink)}
.w-kustate{font-size:9.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;white-space:nowrap;color:var(--ink3);
  box-shadow:inset 3px 3px 6px var(--lo),inset -3px -3px 6px var(--hi)}
.w-kustate.active{color:var(--win)} .w-kustate.idle{color:var(--ink2)}
.w-kustate.unknown{color:var(--amber)}
.w-kutags{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.w-kustatetxt{margin-top:7px;font-size:11.5px;line-height:1.55;color:var(--ink2)}
/* min() deckelt die Mindestspalte: auf 320 px waere 170 px + Innenabstand
   breiter als der Behaelter. */
.w-kugrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));
  gap:9px;margin-top:11px}
.w-kucell{padding:9px 11px;border-radius:10px;
  box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
.w-kucell .l{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}
.w-kucell .v{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.w-kucell .s{margin-top:4px;font-size:10px;color:var(--ink3)}
.w-kupv{font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
.w-kuna{font-size:11px;line-height:1.4;color:var(--ink3);font-style:italic}
.w-kudet{margin-top:10px}
.w-kudet>summary{cursor:pointer;font-size:10.5px;font-weight:700;color:var(--ink2);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.w-kudet>summary::-webkit-details-marker{display:none}
.w-kudet>summary::before{content:"▸";font-size:9px}
.w-kudet[open]>summary::before{content:"▾"}
.w-kubody{margin-top:8px}
.w-kuh4{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink3);margin:12px 0 6px}
.w-kuh4:first-child{margin-top:0}

/* Account-Tabelle — schmale Fenster scrollen sie waagerecht, statt die
   Seite zu sprengen. */
.w-admtblwrap{overflow-x:auto}
.w-admtbl{width:100%;border-collapse:collapse;font-size:12px}
.w-admtbl th{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--ink3);text-align:left;padding:7px 10px;white-space:nowrap}
.w-admtbl td{padding:9px 10px;border-top:1px solid rgba(0,0,0,.32);vertical-align:middle}
.w-admtbl td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.w-admtbl td.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:11px;color:var(--ink2);white-space:nowrap}
.w-admtbl tr.off td .w-admrid,.w-admtbl tr.off td.num{opacity:.55}
.w-admrid{font-weight:700;color:var(--ink);white-space:nowrap}
.w-admsub{display:block;font-size:10px;color:var(--ink3);font-weight:500}
.w-admpill{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.7px;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;white-space:nowrap;
  box-shadow:inset 3px 3px 6px var(--lo),inset -3px -3px 6px var(--hi)}
.w-admpill.on{color:var(--win)} .w-admpill.off{color:var(--ink3)}
.w-admacts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.w-admtbl .btn{padding:6px 12px;font-size:11px;border-radius:9px}
.w-admtbl .btn.w-ghost{color:var(--ink3)}
.w-admtbl .btn.w-ghost:hover{color:var(--ink2)}
.w-admtbl .btn.w-danger{color:var(--loss)}
.w-admedit td{padding:0 10px 12px}
.w-admeditbox{padding:12px 14px;border-radius:var(--rw);display:flex;flex-direction:column;gap:10px;
  box-shadow:inset 4px 4px 9px var(--lo),inset -4px -4px 9px var(--hi)}
.w-admrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.w-admlbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--ink3);white-space:nowrap}
.w-admbar{height:8px;border-radius:6px;position:relative;flex:1;min-width:160px;
  box-shadow:inset 2px 2px 5px var(--lo),inset -2px -2px 5px var(--hi)}
.w-admbar>i{position:absolute;left:0;top:0;height:8px;border-radius:4px;background:var(--cyan);
  transition:width .25s ease}
.w-admbar>i.done{background:var(--win)} .w-admbar>i.err{background:var(--loss)}


/* --- Bereich „API-Keys" (js/wiring/admin-pool.js) ----------------------
   Die Tabelle teilt sich das Aussehen mit der Account-Tabelle (.w-admtbl);
   neu sind nur die Zustandsfarben und die schmale Auslastungszelle. */
.w-admpoolpct{font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}
.w-admtbl td .w-admbar{min-width:70px;max-width:120px;margin-left:8px}
/* „Prüfung fällig" ist eine Warnung, „ungültig" ein Fehler, „stillgelegt"
   nur ein Zustand — die drei duerfen nicht gleich aussehen. */
.w-admpill.kp-active{color:var(--win)}
.w-admpill.kp-stale{color:var(--amber)}
.w-admpill.kp-invalid{color:var(--loss)}
.w-admpill.kp-disabled{color:var(--ink3)}
.w-admpill.kp-unknown{color:var(--ink3)}
/* Die Begruendungszeile haengt optisch an ihrer Zeile, nicht an der naechsten. */
.w-admpoolhint td{border-top:0;padding-top:0}
/* Auslastung je Routing: eine Zeile je Topf (europe / euw1), weil Riot fuer
   beide getrennt zaehlt. Eine gemeinsame Zahl gaebe es nicht. */
.w-admpoolrt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.w-admpoolrt:last-child{margin-bottom:0}
.w-admpoolrtn{font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ink3);min-width:52px}

/* --- Datenqualitaet je Account (js/wiring/admin-quality.js) ------------- */
/* Eine Zeile mit Auffaelligkeiten bekommt einen leisen Warnton - die
   Begruendung steht als eigene Zeile direkt darunter und haengt optisch an
   ihrer Zeile (dasselbe Muster wie .w-admpoolhint). */
.w-admtbl tr.w-dqwarn td{background:rgba(214,145,61,.06)}
.w-admtbl tr.w-dqwarnrow td{border-top:0;padding-top:0;background:rgba(214,145,61,.06)}