/* Verbrauch — minimal, server-rendered styling. Light/dark via prefers-color-scheme, overridable by .theme-light/.theme-dark on (set from the verbrauch_theme cookie). */ :root { --bg: #f4f5f7; --surface: #ffffff; --text: #1c1f26; --text-muted: #5d6470; --border: #e2e5ea; --primary: #1f6f54; --primary-text: #ffffff; --danger: #b1463f; --warning: #c08323; --success: #2f7d57; --radius: 12px; --shadow: 0 1px 3px rgba(0,0,0,.08); } .theme-dark { --bg: #14161f; --surface: #1d212e; --text: #e8eaf0; --text-muted: #9aa3b2; --border: #2c3142; --primary: #2f9d76; --shadow: 0 1px 3px rgba(0,0,0,.4); } @media (prefers-color-scheme: dark) { :root:not(.theme-light) { --bg: #14161f; --surface: #1d212e; --text: #e8eaf0; --text-muted: #9aa3b2; --border: #2c3142; --primary: #2f9d76; --shadow: 0 1px 3px rgba(0,0,0,.4); } } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } nav { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--border); } .brand { font-weight: 700; font-size: 1.15rem; color: var(--primary); text-decoration: none; } .nav-right { display: flex; align-items: center; gap: 1rem; } .nav-link { color: var(--text-muted); text-decoration: none; } .nav-link:hover { color: var(--text); } .inline { display: inline; margin: 0; } .link-button { background: none; border: 0; color: var(--text-muted); cursor: pointer; font: inherit; } .link-button:hover { color: var(--text); } .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 8px; width: 2rem; height: 2rem; cursor: pointer; color: var(--text); } main { max-width: 880px; margin: 1.5rem auto; padding: 0 1.25rem; } h1 { font-size: 1.5rem; margin: 0 0 .75rem; } h2 { font-size: 1.15rem; margin: 0 0 .5rem; } .subtitle { color: var(--text-muted); margin: .25rem 0 0; } .hint { color: var(--text-muted); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; } .card.narrow { max-width: 420px; margin: 2rem auto; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .stack { display: flex; flex-direction: column; gap: .85rem; } label { display: flex; flex-direction: column; gap: .3rem; font-weight: 500; } label small { color: var(--text-muted); font-weight: 400; } label.checkbox { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; } input, textarea, select { font: inherit; padding: .6rem .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); width: 100%; } input[type=checkbox] { width: auto; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .btn { display: inline-block; padding: .6rem 1rem; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font: inherit; text-align: center; } .btn:hover { border-color: var(--text-muted); } .btn-primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); } .btn-primary:hover { filter: brightness(1.05); } .btn-block { width: 100%; } .form-actions { display: flex; justify-content: flex-end; gap: .5rem; } .btn-lg { padding: .85rem 1rem; font-size: 1.05rem; } .login-card { text-align: center; } .hint.center { text-align: center; } .admin-link { text-align: center; margin-top: 1.25rem; } .admin-link a { color: var(--text-muted); font-size: .9rem; } .admin-link a:hover { color: var(--text); } .divider { display: flex; align-items: center; text-align: center; color: var(--text-muted); margin: 1rem 0; } .divider::before, .divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--border); } .divider span { padding: 0 .75rem; font-size: .85rem; } .flash { max-width: 880px; margin: .75rem auto 0; padding: .7rem 1rem; border-radius: 8px; } .flash-info { background: #e7eef6; color: #25527d; } .flash-success { background: #e3f3ea; color: #1f6b46; } .flash-warning { background: #fbf0d9; color: #8a5e16; } .flash-error { background: #f6e1df; color: #8a322c; } .card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .card-list-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; box-shadow: var(--shadow); } .card-list-link { text-decoration: none; color: var(--text); display: flex; flex-direction: column; } .card-list-title { font-weight: 600; } .card-list-sub { color: var(--text-muted); font-size: .9rem; } .badge { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; padding: .2rem .5rem; border-radius: 999px; background: var(--bg); color: var(--text-muted); } .badge-owner { background: #e3f3ea; color: #1f6b46; } .badge-editor { background: #e7eef6; color: #25527d; } .badge-viewer { background: var(--bg); color: var(--text-muted); } h3 { font-size: 1rem; margin: 1.25rem 0 .5rem; } .member-list { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-direction: column; gap: .4rem; } .member-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .25rem; border-bottom: 1px solid var(--border); } .member-info { display: flex; flex-direction: column; } .member-sub { color: var(--text-muted); font-size: .85rem; } .member-actions { display: flex; align-items: center; gap: .5rem; } .member-actions select { width: auto; padding: .35rem .5rem; } .row-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; } .row-form input[type=text], .row-form input[type=date] { flex: 1 1 10rem; } .row-form select { width: auto; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; } .head-actions { display: flex; gap: .5rem; } .badge-kind { background: #ece4f5; color: #5d3a86; } .theme-dark .badge-kind { background: #3a3354; color: #c9b8e6; } .badge-change { background: #fbf0d9; color: #8a5e16; white-space: nowrap; } .theme-dark .badge-change { background: #4a3a1a; color: #e6c48a; } .meter-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; } .meter-item { border: 1px solid var(--border); border-radius: var(--radius); } .meter-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; text-decoration: none; color: var(--text); } .meter-link:hover { background: var(--bg); } .meter-main { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .meter-latest { text-align: right; display: flex; flex-direction: column; } .meter-sub { color: var(--text-muted); font-size: .85rem; } .table-wrap { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--border); text-align: left; } .data-table th { font-size: .8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; } .row-actions { white-space: nowrap; text-align: right; } .row-actions a { text-decoration: none; margin-right: .4rem; } .danger-form { margin-top: 1rem; } .link-button.danger, a.danger { color: var(--danger); } .back-link { margin: 0 0 .5rem; } .back-link a { color: var(--text-muted); text-decoration: none; } .back-link a:hover { color: var(--text); } .modal-dialog { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; max-width: 460px; width: calc(100% - 2rem); background: var(--surface); color: var(--text); box-shadow: 0 8px 30px rgba(0,0,0,.3); } .modal-dialog::backdrop { background: rgba(0,0,0,.5); } .modal-dialog h2 { margin-top: 0; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; } .stat { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; } .stat-label { display: block; color: var(--text-muted); font-size: .82rem; } .stat-value { display: block; font-size: 1.2rem; font-weight: 600; margin-top: .2rem; } .stat-value small { font-weight: 400; color: var(--text-muted); font-size: .8rem; display: block; } .setup-steps { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .6rem; } .secret-box { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 1.15rem; letter-spacing: .08em; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: .6rem .8rem; margin: .4rem 0; word-break: break-all; } .backup-codes { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; font-family: ui-monospace, Menlo, monospace; } .backup-codes li { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: .5rem .6rem; text-align: center; letter-spacing: .05em; } .field-row { display: flex; gap: .75rem; } .field-row .grow { flex: 1 1 auto; } .field-row .shrink { flex: 0 0 7rem; } .advanced { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .75rem; } .advanced summary { cursor: pointer; color: var(--text-muted); } .advanced .field-row { margin-top: .5rem; } .map { height: 460px; border-radius: var(--radius); margin-top: .5rem; } .map-legend { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--text-muted); font-size: .9rem; } .map-legend .dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 1px solid #222; vertical-align: middle; margin-right: .25rem; } .dot-up { background: #c0392b; } .dot-same { background: #d9a13a; } .dot-down { background: #2f7d57; } .dot-unknown { background: #9aa3b2; } .status-pie-wrap { display: inline-flex; flex: 0 0 auto; align-items: center; } .statuspie { display: block; } .card-list-link.grow { flex: 1 1 auto; } .status-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; margin-right: .45rem; border: 1px solid rgba(0,0,0,.25); } .chart-wrap { width: 100%; overflow-x: auto; } .barchart { width: 100%; height: auto; display: block; } .chart-grid { stroke: var(--border); stroke-width: 1; } .chart-ylabel { fill: var(--text-muted); font-size: 10px; text-anchor: end; } .chart-xlabel { fill: var(--text-muted); font-size: 10px; text-anchor: middle; } .chart-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .4rem; color: var(--text-muted); font-size: .85rem; } .chart-legend .swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: middle; margin-right: .3rem; }