/* Ergänzungen fürs Kundenportal; Grundlayout kommt aus /styles.css der Website */
.muted { color: var(--muted); }
.login-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 48px; align-items: start; }
.login-grid > * { min-width: 0; }
@media (max-width: 860px) { .login-grid { grid-template-columns: minmax(0, 1fr); } }
.portal-hero { padding-block: 48px 40px; }
.logout-form { order: 4; margin: 0; }
@media (max-width: 760px) { .logout-form { order: 1; } }
.portal-warn { margin-top: 16px; padding: 10px 14px; border: 1px solid #f0b429; color: #f0b429; border-radius: 4px; font-size: 0.9rem; max-width: none; }
.flash-wrap { display: grid; gap: 8px; padding-top: 16px; }
.flash { padding: 12px 16px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); max-width: none; }
.flash-error { border-color: var(--block); color: var(--block); }
.flash-ok { border-color: var(--ok); color: var(--ok); }
.flash-secret { border-color: var(--accent); color: var(--ink); font-family: var(--f-mono); font-size: 0.9rem; }
.release { border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); padding: 24px; display: grid; gap: 16px; justify-items: start; }
.release-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.release-name { font-family: var(--f-mono); font-size: 1.05rem; overflow-wrap: anywhere; }
.release-notes { white-space: pre-wrap; color: var(--muted); max-width: 70ch; font-size: 0.95rem; }
.sha { display: grid; gap: 4px; max-width: 100%; }
.sha span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); }
.sha code { background: var(--code-bg); padding: 6px 10px; border-radius: 3px; overflow-wrap: anywhere; user-select: all; font-size: 0.8rem; }
.sha-short { font-size: 0.78rem; }
details summary { cursor: pointer; color: var(--accent); font-size: 0.85rem; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: start; }
.row-actions form { margin: 0; }
details.confirm { display: inline-block; }
details.confirm summary { list-style: none; }
details.confirm summary::-webkit-details-marker { display: none; }
details.confirm[open] summary { display: none; }
.danger { background: var(--block); border-color: var(--block); color: #fff; }
.check-field { align-content: end; }
.check-field input { width: auto; margin-right: 6px; }
progress { width: 100%; height: 8px; accent-color: var(--accent); }
table.data td { white-space: normal; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .field-row.three { grid-template-columns: minmax(0, 1fr); } }
.chip.warn { color: #f0b429; }
.lic-key { white-space: nowrap; user-select: all; font-size: 0.82rem; }
.lic-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lic-tools input { width: auto; flex: 1 1 16rem; max-width: 26rem; }
tr.lic-expired td, tr.lic-inactive td { opacity: 0.7; }
details.edit[open] { flex-basis: 100%; }
.edit-form { display: grid; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); min-width: 16rem; }
.edit-form label { display: grid; gap: 4px; font-size: 0.85rem; }
[hidden] { display: none !important; }
.badge { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--accent-deep); color: #fff; font-size: 0.72rem; font-weight: 600; text-align: center; line-height: 1.5; vertical-align: middle; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 0.9rem; color: var(--muted); }
.consent input { width: auto; margin-top: 4px; }
.lic-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 16px; }
.lic-card { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 20px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.lic-card.lic-active { border-color: var(--accent); }
.lic-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.lic-card dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.lic-card dt { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.lic-card dd { margin: 4px 0 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .lic-card dl { grid-template-columns: minmax(0, 1fr); } }
pre.code { background: var(--code-bg); border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px; overflow-x: auto; font-family: var(--f-mono); font-size: 0.82rem; line-height: 1.5; margin: 0; max-width: 100%; white-space: pre; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stat { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 16px; display: grid; gap: 4px; }
.stat span { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; }
.stat strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }