/* netzw3rk Bewertungs-Widget · Backend (Kundenbereich, Tarife, Login, Admin)
   Baut auf design.css auf (Tokens, Schriften, Buttons). Die alten Variablen der Seiten
   (--accent, --border, --muted, --bg, --good) zeigen hier auf die Tokens aus DESIGN.md,
   damit auch Inline-Styles im JavaScript automatisch Hell/Dunkel folgen. */

:root, :root[data-theme="light"]{
  --accent:var(--primary); --border:var(--hairline); --muted:var(--ink-subtle); --bg:var(--surface-2);
}
:root{--star:#F5B82E}
:root[data-theme="light"]{--star:#B98100}

body{font-size:15px}
.wrap{max-width:var(--page-max);margin:0 auto;padding:40px var(--gutter) 80px;width:100%}
h1{font-size:28px;line-height:1.15;letter-spacing:-.6px}
h2{font-size:16px;font-weight:600;letter-spacing:-.2px;margin:0 0 10px}
h3{font-weight:600}
.sub,.hint,.empty{color:var(--ink-subtle)}
.sub{font-size:15px;margin-top:6px}
.hint{font-size:13.5px;margin:0 0 12px}
.empty{font-size:14px}
label{color:var(--ink-muted)}
code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);border:1px solid var(--hairline);padding:1px 6px;border-radius:var(--r-xs)}

/* Karten: Stufe 1 */
.card{background:var(--surface-1);border:1px solid var(--hairline);border-radius:var(--r-lg);box-shadow:var(--edge);padding:24px;margin-bottom:12px}

/* Felder */
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  background:var(--canvas);color:var(--ink);border:1px solid var(--hairline);border-radius:var(--r-md);font-family:inherit;font-size:14px}
input[type=text],input[type=email],input[type=password]{width:100%;min-height:44px;padding:10px 12px}
input[type=number],select{min-height:36px;padding:6px 10px}
input[type=color]{width:44px;height:36px;padding:3px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);cursor:pointer}
textarea{width:100%;padding:12px;font-family:var(--mono);font-size:12.5px;line-height:1.6;resize:vertical;color:var(--ink-muted)}
input::placeholder,textarea::placeholder{color:var(--ink-tertiary)}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--primary-focus) 50%,transparent);outline-offset:2px;border-color:var(--hairline-strong)}
.opts label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px}

/* Buttons: neutral = Stufe 2, primär = Lavendel, 8 px Radius */
button,a.btn{font-family:inherit;font-size:14px;font-weight:500;border-radius:var(--r-md);border:1px solid var(--hairline);
  background:var(--surface-2);color:var(--ink);padding:9px 14px;min-height:40px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,border-color .15s}
button:hover,a.btn:hover{background:var(--surface-3);border-color:var(--hairline-strong);color:var(--ink)}
button.primary,a.btn.primary,a.primary{background:var(--primary);border-color:transparent;color:var(--on-primary)}
button.primary:hover,a.btn.primary:hover,a.primary:hover{background:var(--primary-hover);color:var(--on-primary);border-color:transparent;opacity:1}
button.danger:hover{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,var(--hairline))}
button:disabled{opacity:.55;cursor:default}
/* Hell/Dunkel-Schalter behält seine kompakte Form aus design.css */
button.theme{min-height:32px;height:32px;padding:0 10px;font-size:13px;color:var(--ink-muted);background:var(--surface-1)}

/* Etiketten: Pille, Statusfarbe nur als Text auf leichter Tönung */
.pill{display:inline-block;font-size:12px;font-weight:500;letter-spacing:0;padding:2px 10px;border-radius:99px;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--hairline);color:var(--ink-muted)}
.pill.ok{color:var(--good);background:color-mix(in srgb,var(--good) 12%,transparent);border-color:transparent}
.pill.warn,.pill.stale{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);border-color:transparent}
.pill.none,.pill.reconnect,.pill.role-super{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border-color:transparent}
.pill.pro,.pill.tier-komplett{color:var(--link);background:var(--surface-2);border-color:var(--hairline-strong)}

/* Sterne (Produkt-UI, wie im Widget) */
.stars,.stars2,.stars3{color:var(--star)}

/* Listen */
.result,.place,.user-row,.embed-item,.review-item{border-top:1px solid var(--hairline)}
.result:hover{background:var(--surface-2)}
.name{color:var(--ink)}
.meta{color:var(--ink-subtle)}

/* Hinweis-Meldungen */
.error{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);border-radius:var(--r-md);padding:10px 14px;font-size:13.5px;margin-bottom:16px}

/* Toast: invertiert, damit er auf jeder Fläche lesbar ist */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--canvas);padding:10px 18px;border-radius:var(--r-md);
  font-size:14px;font-weight:500;opacity:0;transition:opacity .25s;pointer-events:none;z-index:50}
.toast.show{opacity:1}

/* Widget-Vorschau in iframes: Rahmen passend zur Fläche */
iframe{border:1px solid var(--hairline)!important;border-radius:var(--r-md)!important}