/* BOSS Dashboard — styling. Matcht Panel's admin.css (palet + typografie). Dark default + light via [data-theme-legacy="light"] op . */ /* [hidden] hard afdwingen — meerdere classes hebben display-overrides die de browser-default van [hidden] anders negeren. */ [hidden] { display: none !important; } /* Palet — identiek aan Panel's admin.css dark-theme. Eigen BOSS-prefix (geen admin-*); light-variant onder [data-theme-legacy="light"]. */ :root { --bg: #0e0e11; --bg-2: #16161a; --bg-card: #1c1c22; --bg-hover: #22222a; --border: rgba(255,255,255,0.06); --border-gold: rgba(124,154,166,0.2); --text: #c8c8d0; --text-dim: #6e6e80; --white: #f0f0f5; --gold: #7c9aa6; --gold-light: #9dbbc8; --gold-dk: #567078; --gold-rgb: 124,154,166; --green: #34d399; --red: #f87171; --blue: #60a5fa; --radius: 10px; --radius-sm:6px; --shadow: 0 4px 24px rgba(0,0,0,0.4); --ff-serif: 'Playfair Display', Georgia, serif; --ff-sans: 'Raleway', sans-serif; } /* Licht thema (macOS-stijl, matcht Panel). */ [data-theme-legacy="light"] { --bg: #f5f3f0; --bg-2: #ffffff; --bg-card: #ffffff; --bg-hover: #edeae6; --border: rgba(0,0,0,0.10); --border-gold: rgba(154,133,112,0.25); --text: #3a3a3c; --text-dim: #8e8e93; --white: #1d1d1f; --gold: #9a8570; --gold-light: #b8a48e; --gold-dk: #70604e; --gold-rgb: 154,133,112; --green: #28a745; --red: #dc3545; --blue: #007aff; --shadow: 0 2px 12px rgba(0,0,0,0.08); } * { margin:0; padding:0; box-sizing:border-box; } body { font-family: var(--ff-sans); background:var(--bg); color:var(--text); min-height:100vh; transition: background .2s, color .2s; } a { color:var(--gold); text-decoration:none; } a:hover { text-decoration:underline; } /* Brand-logo — beide PNG's altijd in DOM; CSS switcht per [data-theme]. Hoogte = ankerpunt, breedte schaalt mee. */ .brand-logo { height: 26px; width: auto; display: inline-block; vertical-align: middle; } .brand-logo.brand-logo-lg { height: 32px; } .brand-logo.logo-dark { display: inline-block; } .brand-logo.logo-light { display: none; } [data-theme-legacy="light"] .brand-logo.logo-dark { display: none; } [data-theme-legacy="light"] .brand-logo.logo-light { display: inline-block; } /* Brand-icon FontAwesome shield met navy→hemelblauwe gradient via background-clip:text op de (FA-icons zijn web-font glyphs). */ .topbar h1 .brand-icon, .login-box h1 .brand-icon { background: linear-gradient(135deg, #1e3a5f 0%, #7fa0d0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-size: 1.2em; } /* Login. */ .login-wrap { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; } /* .login-wrap display:flex overschrijft anders [hidden] — beide login-views moeten hun hidden-attribute respecteren. */ .login-wrap[hidden] { display: none; } .login-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:40px; max-width:400px; width:100%; } .login-box h1 { font-family: var(--ff-serif); font-size:22px; font-weight:700; color:var(--white); margin-bottom:6px; display:flex; align-items:center; gap:12px; letter-spacing:0.2px; } .login-box h1 em { font-style:italic; color:var(--gold); } .login-box p { font-size:13px; color:var(--text-dim); margin-bottom:24px; } .form-group { margin-bottom:16px; } .form-group label { display:block; font-size:13px; font-weight:500; margin-bottom:6px; color:var(--text); } .form-group input, .form-group select, .form-group textarea { width:100%; padding:10px 14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--white); font-size:14px; outline:none; transition:border .2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); } .form-group small { display:block; margin-top:4px; font-size:11px; color:var(--text-dim); line-height:1.4; } /* #117 — SMTP-modal: form-groups naast elkaar, wraps op smal scherm. */ .form-row { display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; } .form-row .form-group { flex:1 1 200px; min-width:0; } .form-row .form-group input, .form-row .form-group select { width:100%; } .toggle-inline input[type="checkbox"] { width:auto; } .login-error { color:var(--red); font-size:13px; min-height:20px; margin-bottom:8px; } .btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border:0; border-radius:var(--radius-sm); font-size:14px; font-weight:600; cursor:pointer; transition:all .2s; } .btn-gold { background: linear-gradient(135deg, var(--gold-dk), var(--gold)); color:#0e0e11; box-shadow: 0 4px 14px rgba(var(--gold-rgb), 0.25); } .btn-gold:hover { background: linear-gradient(135deg, var(--gold), var(--gold-light)); box-shadow: 0 6px 18px rgba(var(--gold-rgb), 0.35); } [data-theme-legacy="light"] .btn-gold { color:#fff; } .btn-outline { background:transparent; border:1px solid var(--border); color:var(--text); } .btn-outline:hover { border-color:var(--gold); color:var(--gold); } .btn-sm { padding:6px 12px; font-size:12px; } .btn-danger { background:rgba(248,113,113,.15); color:var(--red); border:1px solid rgba(248,113,113,.25); } .btn-danger:hover { background:rgba(248,113,113,.25); } .btn-green { background:rgba(52,211,153,.15); color:var(--green); border:1px solid rgba(52,211,153,.25); } .btn-green:hover { background:rgba(52,211,153,.25); } .btn-block { width:100%; justify-content:center; } /* Dashboard. */ .dashboard { display:none; } .dashboard.active { display:block; } .topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--border); background:var(--bg-card); } .topbar h1 { font-family: var(--ff-serif); font-size:20px; font-weight:700; color:var(--white); letter-spacing:0.2px; display:flex; align-items:center; gap:12px; } .topbar h1 em { font-style:italic; color:var(--gold); } .topbar-actions { display:flex; align-items:center; gap:12px; } .topbar-user { font-size:13px; color:var(--text-dim); } /* Theme-toggle in topbar — 36x36 cirkel met sun/moon swap. */ .theme-toggle { display:inline-flex; align-items:center; justify-content:center; position:relative; /* anker voor auto-indicator-dot */ width:36px; height:36px; border-radius:50%; background:transparent; border:1px solid var(--border); color:var(--text-dim); cursor:pointer; font-size:14px; transition: all .2s; } .theme-toggle:hover { color:var(--gold); border-color:var(--gold); } .theme-toggle .icon-dark { display:none; } .theme-toggle .icon-light { display:inline; } [data-theme-legacy="light"] .theme-toggle .icon-dark { display:inline; } [data-theme-legacy="light"] .theme-toggle .icon-light { display:none; } /* #5a — auto-modus indicator: gouden dot rechtsboven theme-toggle. */ [data-theme-mode="auto"] .theme-toggle::after { content:""; position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow: 0 0 0 2px var(--bg-2); } .main { max-width:1200px; margin:0 auto; padding:24px; } .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:24px; } .stat { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; } .stat-value { font-family: var(--ff-serif); font-size:32px; font-weight:700; color:var(--white); letter-spacing:0.2px; } .stat-label { font-size:13px; color:var(--text-dim); margin-top:4px; } .card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .card-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); } .card-header h2 { font-family: var(--ff-serif); font-size:18px; font-weight:700; color:var(--white); letter-spacing:0.2px; display:inline-flex; align-items:center; gap:10px; } table { width:100%; border-collapse:collapse; } th { text-align:left; font-size:12px; font-weight:600; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; padding:12px 16px; border-bottom:1px solid var(--border); } td { padding:12px 16px; border-bottom:1px solid var(--border); font-size:14px; } tr:hover { background:var(--bg-hover); } tr:last-child td { border-bottom:0; } .badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; text-transform:uppercase; } .badge-active { background:rgba(52,211,153,.15); color:var(--green); } .badge-inactive { background:rgba(248,113,113,.15); color:var(--red); } .badge-on { background:rgba(52,211,153,.15); color:var(--green); } .badge-off { background:rgba(110,110,128,.15); color:var(--text-dim); } .toggle { position:relative; display:inline-block; width:40px; height:22px; } .toggle input { opacity:0; width:0; height:0; } .toggle .slider { position:absolute; inset:0; background:var(--border); border-radius:22px; cursor:pointer; transition:.3s; } .toggle .slider::before { content:''; position:absolute; left:3px; bottom:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:.3s; } .toggle input:checked + .slider { background:var(--gold); } .toggle input:checked + .slider::before { transform:translateX(18px); } .modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:1000; align-items:center; justify-content:center; padding:20px; } .modal-overlay.active { display:flex; } .modal { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); max-width:520px; width:100%; max-height:90vh; overflow-y:auto; } .modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); } .modal-header h3 { font-family: var(--ff-serif); font-size:17px; font-weight:700; color:var(--white); letter-spacing:0.2px; } .modal-close { background:0; border:0; color:var(--text-dim); font-size:20px; cursor:pointer; } .modal-close:hover { color:var(--white); } .modal-body { padding:20px; } .modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--border); } .cred-box { background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; font-family:monospace; font-size:13px; color:var(--gold); word-break:break-all; position:relative; margin-bottom:8px; } .cred-box .copy-btn { position:absolute; top:8px; right:8px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim); padding:4px 8px; border-radius:4px; font-size:11px; cursor:pointer; } .cred-box .copy-btn:hover { color:var(--gold); border-color:var(--gold); } .cred-label { font-size:12px; color:var(--text-dim); margin-bottom:4px; } .action-btns { display:flex; gap:4px; } /* E-mail queue widget. */ .queue-health-dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--text-dim); margin-left:8px; vertical-align:middle; transition:background .2s, box-shadow .2s; } .queue-health-dot.healthy { background:var(--green); box-shadow:0 0 8px rgba(52,211,153,.4); } .queue-health-dot.unhealthy { background:var(--red); box-shadow:0 0 8px rgba(248,113,113,.4); } .queue-health-dot.loading { background:var(--blue); animation:queuePulse 1.2s ease-in-out infinite; } @keyframes queuePulse { 0%,100% { opacity:1 } 50% { opacity:.4 } } .queue-header-meta { display:flex; align-items:center; gap:12px; } .queue-updated { font-size:12px; color:var(--text-dim); white-space:nowrap; } .queue-alert { padding:12px 20px; background:rgba(248,113,113,.08); border-bottom:1px solid rgba(248,113,113,.25); color:var(--red); font-size:13px; } .queue-alert ul { margin:6px 0 0 18px; padding:0; } .queue-alert li { margin:2px 0; } /* Mails-vandaag teller met progressbar (Brevo 300/dag-limiet). */ .quota-card { padding:16px 20px; border-bottom:1px solid var(--border); } .quota-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:12px; } .quota-label { font-size:13px; color:var(--text-dim); display:inline-flex; align-items:center; gap:8px; } .quota-label i { color:var(--gold); } .quota-numbers { font-family: var(--ff-serif); font-size:18px; color:var(--white); } .quota-numbers strong { font-weight:700; transition: color .2s; } .quota-bar { height:8px; background:var(--bg-2); border-radius:4px; overflow:hidden; border:1px solid var(--border); } .quota-bar-fill { height:100%; background:var(--gold); transition: width .4s ease-out, background-color .2s; border-radius:4px; } .quota-card.warn .quota-bar-fill { background:#fbbf24; } .quota-card.warn .quota-numbers strong { color:#fbbf24; } .quota-card.danger .quota-bar-fill { background:var(--red); } .quota-card.danger .quota-numbers strong { color:var(--red); } .quota-hint { font-size:11px; color:var(--text-dim); margin-top:8px; } .queue-stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); padding:20px; gap:16px; border-bottom:1px solid var(--border); } .queue-mini-stat { text-align:center; } .queue-stat-value { font-family: var(--ff-serif); font-size:26px; font-weight:700; color:var(--white); transition:color .2s; letter-spacing:0.2px; } .queue-stat-value.alert { color:var(--red); } .queue-stat-label { font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.5px; margin-top:4px; } @media (max-width:600px) { .queue-stats-grid { grid-template-columns:repeat(2, 1fr); } } .queue-count-alert { color:var(--red); font-weight:600; } .queue-count-zero { color:var(--text-dim); } /* Footer "Powered by PROJEXT" — sans-serif, brede letter-spacing, X italic-gold (font-weight 700). Matcht Barber-Amsterdam footer. */ .footer { text-align:center; padding:24px 24px 32px; font-size:12px; color:var(--text-dim); } .footer .brand-text { letter-spacing:0.08em; font-weight:600; color:var(--text-dim); } .footer .brand-text em { font-style:italic; font-weight:700; color:var(--gold); } .footer .footer-sep { margin:0 8px; color:var(--text-dim); opacity:.5; } /* PROJEXT-link inherit kleur (cursief-X-in-goud is de merk-hint), hover-opacity ipv underline. */ .footer a.footer-brand-link { color: inherit; text-decoration: none; cursor: pointer; transition: opacity .2s; } .footer a.footer-brand-link:hover { opacity: .75; } /* Light-theme overrides voor leesbaarheid (wit-op-wit cases). */ [data-theme-legacy="light"] .form-group input { background:#f9f9fb; color:var(--text); } [data-theme-legacy="light"] .form-group input:focus { border-color:var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.15); } [data-theme-legacy="light"] .cred-box { background:#f9f9fb; color:var(--gold-dk); } [data-theme-legacy="light"] .cred-box .copy-btn { background:var(--bg-card); } [data-theme-legacy="light"] .toggle .slider { background:#d0d0d5; } [data-theme-legacy="light"] .btn-outline { background:#f9f9fb; } [data-theme-legacy="light"] .btn-outline:hover { background:#f0f0f2; } [data-theme-legacy="light"] .modal-overlay { background:rgba(0,0,0,0.35); } [data-theme-legacy="light"] th { background:#f9f9fb; } [data-theme-legacy="light"] .queue-alert { background:rgba(220,53,69,.06); border-bottom-color:rgba(220,53,69,.2); } [data-theme-legacy="light"] body { background:var(--bg); } /* Smooth transitions tussen thema's */ .topbar, .card, .stat, .login-box, .modal, .btn, .btn-outline, .form-group input, .cred-box, th, td { transition: background .2s, color .2s, border-color .2s; } /* Decouple-modal (M12.6) — 3 steps in één DOM via [hidden] op .decouple-step. Geen transitions: voorkomt flash bij generate-call. */ .modal.modal-lg { max-width:640px; } .decouple-warning, .decouple-success, .decouple-error { display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-sm); font-size:13px; line-height:1.55; margin-bottom:18px; } .decouple-warning { background:rgba(251, 191, 36, 0.08); border:1px solid rgba(251, 191, 36, 0.25); color:#fcd34d; } .decouple-warning i { color:#fbbf24; font-size:18px; margin-top:2px; } .decouple-warning strong { color:#fef3c7; } [data-theme-legacy="light"] .decouple-warning { background:rgba(217, 119, 6, 0.06); border-color:rgba(217, 119, 6, 0.25); color:#92400e; } [data-theme-legacy="light"] .decouple-warning strong { color:#78350f; } .decouple-success { background:rgba(52, 211, 153, 0.08); border:1px solid rgba(52, 211, 153, 0.25); color:#6ee7b7; } .decouple-success i { color:#34d399; font-size:18px; margin-top:2px; } .decouple-success strong { color:#a7f3d0; } [data-theme-legacy="light"] .decouple-success { background:rgba(5, 150, 105, 0.06); border-color:rgba(5, 150, 105, 0.25); color:#065f46; } [data-theme-legacy="light"] .decouple-success strong { color:#064e3b; } .decouple-error { background:rgba(248, 113, 113, 0.08); border:1px solid rgba(248, 113, 113, 0.25); color:var(--red); } .decouple-error::before { content:"\f06a"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:18px; margin-top:2px; } /* Token-display (URL en token-string) */ .token-display { display:flex; align-items:stretch; gap:8px; } .token-display code { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 12px; font-family:monospace; font-size:13px; color:var(--gold); word-break:break-all; line-height:1.45; overflow-wrap:anywhere; } .token-display .btn { white-space:nowrap; flex-shrink:0; } .token-display .btn.copied { background:rgba(52, 211, 153, 0.15); border-color:rgba(52, 211, 153, 0.4); color:#6ee7b7; } [data-theme-legacy="light"] .token-display code { background:#f9f9fb; color:var(--gold-dk); } .decouple-instructions { margin-top:18px; padding:14px 16px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; color:var(--text); line-height:1.6; } .decouple-instructions strong { display:block; color:var(--gold); margin-bottom:6px; font-family:var(--ff-serif); font-weight:700; letter-spacing:0.2px; } .decouple-instructions ol { margin:0; padding-left:22px; color:var(--text-dim); } .decouple-instructions ol li { margin:4px 0; } .decouple-instructions em { font-style:normal; color:var(--gold); font-weight:600; } [data-theme-legacy="light"] .decouple-instructions { background:#f9f9fb; } .form-group small { display:block; margin-top:6px; font-size:12px; color:var(--text-dim); line-height:1.5; } .form-group select { width:100%; padding:10px 12px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; cursor:pointer; transition:border-color .15s; } .form-group select:focus { border-color:var(--gold); outline:0; } [data-theme-legacy="light"] .form-group select { background:#f9f9fb; color:var(--text); } .badge-decoupled { background:rgba(251, 191, 36, 0.15); color:#fbbf24; border:1px solid rgba(251, 191, 36, 0.3); } [data-theme-legacy="light"] .badge-decoupled { background:rgba(217, 119, 6, 0.1); color:#92400e; border-color:rgba(217, 119, 6, 0.3); } /* Decouple-actie-knop: gele tint signaleert irreversible-action. */ .btn-decouple { background:rgba(251, 191, 36, 0.08); border:1px solid rgba(251, 191, 36, 0.3); color:#fbbf24; } .btn-decouple:hover { background:rgba(251, 191, 36, 0.18); border-color:rgba(251, 191, 36, 0.5); color:#fcd34d; } [data-theme-legacy="light"] .btn-decouple { background:rgba(217, 119, 6, 0.06); border-color:rgba(217, 119, 6, 0.25); color:#92400e; } [data-theme-legacy="light"] .btn-decouple:hover { background:rgba(217, 119, 6, 0.14); color:#78350f; } /* DB-backup tag-badges — PROJEXT-palet uit brand-spec */ .badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.6; } .badge-mint { background: rgba(200, 240, 216, 0.18); color: #2f7d4f; } .badge-blue { background: rgba(188, 220, 251, 0.18); color: #2563a8; } .badge-lavender { background: rgba(216, 212, 245, 0.20); color: #5b4dc4; } [data-theme-legacy="light"] .badge-mint { background: rgba(200,240,216,0.55); color: #1f5b39; } [data-theme-legacy="light"] .badge-blue { background: rgba(188,220,251,0.55); color: #1d4e8a; } [data-theme-legacy="light"] .badge-lavender { background: rgba(216,212,245,0.55); color: #4338a8; } /* M14 — Per-tenant feature-flags. */ /* Expand-knop in eerste tabel-kolom; roteert bij open rij. */ .expand-btn { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 14px; padding: 4px 8px; transition: transform .15s ease, color .15s ease; } .expand-btn:hover { color: var(--white); } .expand-btn[aria-expanded="true"] { transform: rotate(90deg); color: var(--white); } /* "12 van 18 modules" + dot-indicator in tabel-cel. */ .module-summary { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); } .module-summary .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); } .module-summary.active .dot { background: #2f7d4f; } /* Detail-rij (uitklap). Geen border-top zodat 'ie bij de hoofd-rij hoort. */ tr.client-details { display: none; } tr.client-details.open { display: table-row; } tr.client-details > td { background: rgba(255,255,255,0.02); padding: 16px 20px; border-top: 1px dashed rgba(255,255,255,0.06); } [data-theme-legacy="light"] tr.client-details > td { background: rgba(0,0,0,0.02); border-top: 1px dashed rgba(0,0,0,0.08); } /* Feature-paneel: header (preset-dropdown + save), grid van checkboxes per sectie. */ .features-panel { display: flex; flex-direction: column; gap: 16px; } .features-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .features-panel-header label { font-size: 12px; color: var(--text-dim); } .features-panel-header select { padding: 6px 10px; font-size: 13px; background: var(--surface); color: var(--white); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; } .features-section h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); margin: 0 0 8px; } .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; } .feature-check { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; color: var(--white); transition: background .12s ease; } .feature-check:hover { background: rgba(255,255,255,0.04); } [data-theme-legacy="light"] .feature-check:hover { background: rgba(0,0,0,0.04); } .feature-check input[type="checkbox"] { margin: 0; cursor: pointer; } .feature-check .feature-note { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; } /* M14.10 — save-confirm op feature-checkbox via korte groen-pulse (vervangt expliciete save-knop). */ .feature-check.feature-saved { background: rgba(47, 125, 79, 0.18); transition: background .4s ease; } [data-theme-legacy="light"] .feature-check.feature-saved { background: rgba(47, 125, 79, 0.20); } /* Panel-API failure banner — toont structurele Panel↔BOSS-fout ipv silent fail. */ .panel-api-banner { margin: 0 0 16px; padding: 12px 16px; background: rgba(220, 80, 80, 0.12); border: 1px solid rgba(220, 80, 80, 0.4); border-radius: 6px; color: #c83030; font-size: 13px; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .panel-api-banner strong { color: #a02020; } .panel-api-banner .muted { color: var(--text-dim, #6b6b6b); font-size: 12px; } .panel-api-banner button { margin-left: auto; }