body { font-family: Arial, sans-serif; display: flex; justify-content: center; padding: 40px; margin: 0; background-color: #f4f4f4; color: #222; }
#content, .container { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.1); }
#content { max-width: 70%; line-height: 1.5em; }
.container { text-align: center; }
pre { white-space: pre-wrap; word-break: break-all; background: #f7f7f7; padding: 10px; border-radius: 4px; }
#success { color: green; } #failure { color: red; }
button, input[type=submit], .btn { background: #4CAF50; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; text-decoration: none; display: inline-block; }
button:hover, input[type=submit]:hover, .btn:hover { background: #45a049; }
button.secondary, .btn.secondary { background: #607d8b; }
button.danger { background: #c62828; }
.impressum { margin-top: 20px; font-size: .9em; }
.impressum a, a { color: #0000EE; text-decoration: none; }
.impressum a:hover, a:hover { text-decoration: underline; }
.notice { background: #e8f5e9; border: 1px solid #a5d6a7; padding: 15px; border-radius: 6px; margin: 15px 0; }
.appname { color: #666; font-size: .9em; margin-bottom: 10px; }

/* Admin */
body.admin { display: block; padding: 0; }
.admin nav { background: #263238; padding: 12px 24px; display: flex; gap: 20px; align-items: center; }
.admin nav a { color: #fff; } .admin nav .nav-toggle { margin-left: auto; } .admin nav form { margin-left: 0; }
.admin main { padding: 24px; max-width: 1300px; margin: 0 auto; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; font-size: .92em; vertical-align: top; }
th { background: #eceff1; }
.flash { background: #e8f5e9; padding: 10px; margin-bottom: 15px; border-radius: 4px; }
.err { color: #c62828; }
form.stack label { display: block; margin-top: 12px; font-weight: bold; }
form.stack input[type=text], form.stack input[type=password], form.stack input[type=email], form.stack input[type=number], form.stack select, form.stack textarea { width: 100%; max-width: 700px; padding: 8px; box-sizing: border-box; }
.bar { background: #eee; border-radius: 3px; width: 120px; height: 10px; display: inline-block; }
.bar > i { display: block; height: 10px; background: #4CAF50; border-radius: 3px; }
.bar.hot > i { background: #c62828; }
.badge { padding: 2px 8px; border-radius: 10px; font-size: .8em; background: #cfd8dc; }
.badge.ok { background: #c8e6c9; } .badge.bad { background: #ffcdd2; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.filterbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 16px 0; }
.filterbar input[type=search] { padding: 10px 12px; min-width: 260px; border: 1px solid #bbb; border-radius: 4px; font-size: 1em; }
.filterbar label { margin: 0; font-weight: normal; }
.filterbar .stand { color: #666; font-size: .9em; }
.lim-row[hidden], .lim-none[hidden] { display: none; }
.actionrow { display: flex; align-items: center; gap: 16px; }
.actionrow .stand { color: #666; font-size: .9em; }

/* Admin-Login */
body.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; box-sizing: border-box; padding: 24px;
    background: linear-gradient(135deg, #263238 0%, #37474f 55%, #455a64 100%); }
body.login main { padding: 0; width: 100%; max-width: 400px; }
.login-card { background: #fff; border-radius: 12px; padding: 36px 32px 28px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.login-brand { text-align: center; margin-bottom: 26px; }
.login-logo { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px; background: #4CAF50; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 6px 16px rgba(76,175,80,.4); }
.login-brand h1 { margin: 0; font-size: 1.5em; color: #263238; }
.login-brand p { margin: 4px 0 0; color: #78909c; font-size: .9em; }
.login-card label { display: block; margin-top: 16px; font-size: .85em; font-weight: bold; color: #455a64; }
.login-card input[type=email], .login-card input[type=password] { display: block; width: 100%; box-sizing: border-box; margin-top: 6px;
    padding: 11px 12px; font-size: 1em; border: 1px solid #cfd8dc; border-radius: 6px; background: #fafafa; }
.login-card input:focus { outline: none; border-color: #4CAF50; background: #fff; box-shadow: 0 0 0 3px rgba(76,175,80,.2); }
.login-card button { width: 100%; margin-top: 24px; padding: 12px; font-size: 1em; font-weight: bold; }
.login-error { margin-top: 16px; padding: 10px 12px; background: #ffebee; color: #c62828; border-radius: 6px; font-size: .9em; }
.login-foot { text-align: center; margin-top: 18px; font-size: .8em; color: #90a4ae; }

/* Admin-Formulare */
.form-page { max-width: 760px; margin: 0 auto; }
.form-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.form-head h2 { margin: 0; }
.form-card { background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 8px 28px 24px; }
.form-card fieldset { border: 0; border-bottom: 1px solid #eceff1; margin: 0; padding: 18px 0 22px; min-width: 0; }
.form-card fieldset:last-of-type { border-bottom: 0; }
.form-card legend { padding: 0; margin-bottom: 14px; font-size: .75em; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; color: #78909c; }
.form-card .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-card .span2 { grid-column: 1 / -1; }
.form-card .field[hidden] { display: none; }
.form-card label { display: block; margin: 0 0 6px; font-size: .88em; font-weight: bold; color: #455a64; }
.form-card label.check { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: normal; color: #263238; cursor: pointer; }
.form-card input[type=text], .form-card input[type=email], .form-card input[type=password], .form-card input[type=number], .form-card select, .form-card textarea {
    display: block; width: 100%; max-width: none; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: .95em;
    border: 1px solid #cfd8dc; border-radius: 6px; background: #fafafa; }
.form-card textarea { resize: vertical; font-family: Consolas, monospace; font-size: .85em; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: #4CAF50; background: #fff; box-shadow: 0 0 0 3px rgba(76,175,80,.18); }
.form-card .hint { margin-top: 5px; font-size: .8em; color: #78909c; }
.form-card code { background: #eceff1; padding: 1px 5px; border-radius: 3px; }
.form-errors { margin-top: 18px; padding: 12px 14px; background: #ffebee; color: #c62828; border-radius: 6px; font-size: .9em; }
.form-actions { display: flex; align-items: center; gap: 18px; padding-top: 6px; }
@media (max-width: 600px) { .form-card .grid { grid-template-columns: 1fr; } .form-card .span2 { grid-column: auto; } }
.form-card legend { float: left; width: 100%; }
.form-card legend + .grid { clear: both; }

/* eBay Limit Viewer: Kopfkarte */
.limit-card { max-width: 900px; padding-top: 22px; margin-bottom: 8px; }
.limit-card .limit-selects { margin-bottom: 18px; }
.limit-card .optional { font-weight: normal; color: #90a4ae; }
.limit-card .actionrow { gap: 16px; }
.limit-card .filterbar { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid #eceff1; }
.limit-card .filterbar input[type=search] { flex: 1 1 260px; min-width: 0; }

.form-card .plzort { display: grid; grid-template-columns: 70px 120px 1fr; gap: 16px 20px; }
.form-danger { margin-top: 18px; text-align: right; }
@media (max-width: 600px) { .form-card .plzort { grid-template-columns: 1fr; } }

/* Admin: Volle Breite */
.nav-toggle { background: transparent; color: #cfd8dc; border: 1px solid #546e7a; padding: 6px 12px; border-radius: 4px; font-size: .85em; cursor: pointer; }
.nav-toggle:hover { background: #37474f; color: #fff; }
.nav-toggle[aria-pressed=true] { background: #4CAF50; border-color: #4CAF50; color: #fff; }
html.fullwidth body.admin:not(.login) main { max-width: none; }

/* Admin: Grid-Tabellen */
.admin table.grid, .admin table.limits, .admin main > table { border: 0; background: #fff; }
.table-wrap { overflow-x: auto; background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.table-wrap table { border-collapse: separate; border-spacing: 0; width: 100%; background: transparent; }
.table-wrap th, .table-wrap td { border: 0; border-bottom: 1px solid #eceff1; padding: 9px 12px; vertical-align: middle; font-size: .9em; }
.table-wrap thead th { position: sticky; top: 0; background: #f5f7f8; color: #546e7a; font-size: .75em; font-weight: bold; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; border-bottom: 2px solid #e0e6e9; }
.table-wrap thead th a { color: inherit; text-decoration: none; }
.table-wrap thead th a:hover { color: #263238; }
.table-wrap tbody tr:nth-child(even) { background: #fafbfc; }
.table-wrap tbody tr:hover { background: #eef6ee; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap .nowrap { white-space: nowrap; }
.table-wrap .mono { font-family: Consolas, monospace; font-size: .85em; white-space: nowrap; }
.table-wrap .note { min-width: 180px; max-width: 360px; }
.table-wrap .empty { text-align: center; color: #78909c; padding: 28px; }
.muted { color: #90a4ae; }
.muted small, small.muted { color: #90a4ae; }
.table-wrap td.actions { white-space: nowrap; text-align: right; }
.table-wrap td.actions form { display: inline; }
.btn-sm { display: inline-block; padding: 5px 11px; font-size: .82em; border-radius: 4px; border: 0; cursor: pointer; background: #4CAF50; color: #fff; text-decoration: none; margin-left: 4px; }
.btn-sm:hover { filter: brightness(.93); text-decoration: none; }
.btn-sm.secondary { background: #607d8b; } .btn-sm.danger { background: #c62828; }
td.actions a.btn-sm:first-child { background: #eceff1; color: #37474f; }

/* Admin: Werkzeugleiste und Chips */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 14px; }
.toolbar input[type=search] { padding: 9px 12px; min-width: 260px; border: 1px solid #cfd8dc; border-radius: 6px; font-size: .95em; background: #fff; }
.toolbar select { padding: 8px 10px; border: 1px solid #cfd8dc; border-radius: 6px; background: #fff; }
.toolbar label.inline { display: flex; align-items: center; gap: 8px; font-size: .88em; color: #546e7a; }
.toolbar button { padding: 9px 16px; }
.toolbar .count { margin-left: auto; color: #78909c; font-size: .88em; }
.chips { display: flex; gap: 6px; }
.chip { padding: 6px 14px; border-radius: 16px; background: #eceff1; color: #455a64; font-size: .85em; text-decoration: none; }
.chip:hover { background: #dfe6ea; text-decoration: none; }
.chip.on { background: #263238; color: #fff; }

/* Admin: Seitennavigation */
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 14px 0 6px; flex-wrap: wrap; }
.pager ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pager li a, .pager li span { display: block; min-width: 34px; box-sizing: border-box; text-align: center; padding: 7px 11px; border-radius: 6px; font-size: .88em; text-decoration: none; background: #fff; color: #37474f; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pager li a:hover { background: #eceff1; text-decoration: none; }
.pager li.active span { background: #263238; color: #fff; }
.pager li.disabled span, .pager li.gap span { color: #b0bec5; background: transparent; box-shadow: none; }
/* Admin: Menue Extra, weitere Badges */
.dd { position: relative; }
.dd-btn { background: transparent; border: 0; color: #fff; font: inherit; padding: 0; cursor: pointer; }
.dd-btn.active { text-decoration: underline; }
.dd-menu { display: none; position: absolute; top: 100%; left: -12px; min-width: 170px; padding-top: 10px; z-index: 20; }
.dd-menu a { display: block; background: #263238; color: #fff; padding: 10px 16px; border-bottom: 1px solid #37474f; }
.dd-menu a:first-child { border-radius: 6px 6px 0 0; } .dd-menu a:last-child { border-radius: 0 0 6px 6px; border-bottom: 0; }
.dd-menu a:hover { background: #37474f; text-decoration: none; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu { display: block; }
.badge.warn { background: #ffe0b2; color: #8a4b00; }
.badge.dark { background: #455a64; color: #fff; }
.badge.muted { background: #eceff1; color: #78909c; }
td.params { max-width: 320px; font-size: .78em; word-break: break-all; line-height: 1.6; }
td.params b { color: #78909c; font-weight: normal; }

/* Formular in einer Zeile innerhalb einer Karte (z. B. IP manuell sperren) */
.form-card .toolbar input[type=text], .form-card .toolbar select { display: inline-block; width: auto; flex: 1 1 200px; margin: 0; }
.form-card .toolbar select { flex: 0 0 auto; }

/* Aktualisieren-Gruppe im Log: Knopf, Checkbox und Stand brechen nur gemeinsam um */
.refresh-group { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; white-space: nowrap; }
.refresh-group .stand { color: #78909c; font-size: .88em; }
@media (max-width: 480px) { .refresh-group { flex-wrap: wrap; white-space: normal; } }

/* Autorisierungsseiten: Sprachumschaltung DE/EN (beide Texte stehen in der Seite) */
html[lang="de"] .l-en, html[lang="en"] .l-de { display: none; }
.langswitch { text-align: right; font-size: .85em; margin-bottom: 8px; color: #90a4ae; }
.langswitch button { background: none; border: 0; padding: 2px 6px; color: #607d8b; font: inherit; cursor: pointer; border-radius: 3px; }
.langswitch button:hover { background: #eceff1; }
html[lang="de"] .langswitch [data-lang="de"], html[lang="en"] .langswitch [data-lang="en"] { font-weight: bold; color: #263238; text-decoration: underline; }
.field-row { margin: 18px 0; }
.field-label { color: #546e7a; font-size: .9em; margin-bottom: 4px; }
.field-row pre { margin: 0 0 8px; }
/* Geheime Werte sind am Bildschirm nicht markierbar, kopiert wird nur ueber den Knopf */
pre.secret { -webkit-user-select: none; user-select: none; cursor: default; }
.btn-done { display: none; }
button.done .btn-done { display: inline; }
button.done .btn-label { display: none; }