:root {
  --kf-black: #000000;
  --kf-anthracite: #1A1A1A;
  --kf-darkgray: #2D2D2D;
  --kf-lightgray: #B8B8B8;
  --kf-white: #FFFFFF;
  --kf-yellow: #E7DF00;
  --kf-border: #3A3A3A;
  --kf-danger: #D86666;
  --kf-ok: #73A982;
  --admin-content: 1480px;
}
* { box-sizing: border-box; }
html { background: var(--kf-black); color-scheme: dark; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100svh;
  background: var(--kf-black);
  color: var(--kf-white);
  font-family: "MADE Evolve Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--kf-yellow); outline-offset: 3px; }

.admin-login-shell {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 24px;
}
.admin-login-card {
  width: min(100%, 470px);
  padding: 30px;
  border: 1px solid var(--kf-border);
  border-left: 3px solid var(--kf-yellow);
  border-radius: 8px;
  background: var(--kf-anthracite);
}
.admin-kicker {
  color: var(--kf-yellow);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.admin-login-card h1 { margin: 9px 0 8px; font-size: 34px; line-height: 1; }
.admin-login-card p { margin: 0 0 22px; color: var(--kf-lightgray); }

.admin-app { min-height: 100svh; }
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 max(22px, calc((100vw - var(--admin-content)) / 2));
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.admin-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-brand img { width: 46px; height: 34px; object-fit: contain; }
.admin-brand-copy { min-width: 0; }
.admin-brand-copy strong { display:block; font-size: 13px; letter-spacing: .4px; }
.admin-brand-copy span { color: var(--kf-lightgray); font-size: 10px; letter-spacing: 1px; }
.admin-top-actions { display:flex; align-items:center; gap:8px; }

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 28px;
  width: min(var(--admin-content), calc(100% - 44px));
  margin: 0 auto;
  padding: 30px 0 70px;
}
.admin-editor { min-width: 0; }
.admin-preview-column { min-width: 0; }
.preview-sticky { position: sticky; top: 94px; }
.preview-frame-shell {
  overflow: hidden;
  border: 1px solid var(--kf-border);
  border-radius: 12px;
  background: #080808;
}
.preview-frame-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:46px;
  padding:0 14px;
  border-bottom:1px solid var(--kf-border);
  color:var(--kf-lightgray);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
}
.preview-viewport {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: hidden;
  background: #000;
}
.preview-frame-shell iframe {
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  width: 800px;
  height: 1400px;
  border: 0;
  background: #000;
  transform-origin: 0 0;
  transform: scale(var(--preview-scale, .52));
}


.admin-section {
  margin: 0 0 20px;
  border: 1px solid var(--kf-border);
  border-radius: 8px;
  background: var(--kf-anthracite);
}
.admin-section-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px 16px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.admin-section-head h2 { margin:4px 0 0; font-size:21px; line-height:1.1; }
.admin-section-head p { max-width:700px; margin:5px 0 0; color:var(--kf-lightgray); font-size:12px; }
.admin-section-body { padding: 20px 22px 22px; }

.status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.status-item { min-height:72px; padding:12px; border:1px solid rgba(255,255,255,.11); border-radius:6px; background:#151515; }
.status-item span { display:block; color:var(--kf-lightgray); font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.status-item strong { display:block; margin-top:7px; font-size:13px; overflow-wrap:anywhere; }
.status-item strong.ok { color:var(--kf-ok); }
.status-item strong.warn { color:var(--kf-yellow); }
.status-item strong.bad { color:var(--kf-danger); }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.field { display:grid; gap:7px; min-width:0; }
.field.is-wide { grid-column:1 / -1; }
.field label,
.field-label {
  color:var(--kf-white);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
}
.field small { color:var(--kf-lightgray); font-size:11px; line-height:1.4; }
input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  width:100%;
  min-height:48px;
  padding:11px 13px;
  border:1px solid var(--kf-border);
  border-radius:5px;
  outline:none;
  background:var(--kf-darkgray);
  color:var(--kf-white);
}
textarea { min-height:92px; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--kf-yellow); }
input::placeholder, textarea::placeholder { color:#7d7d7d; }
input[type="file"] { width:100%; color:var(--kf-lightgray); font-size:12px; }

.switch-row { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:18px; padding:10px 12px; border:1px solid var(--kf-border); border-radius:5px; background:var(--kf-darkgray); }
.switch-row span { min-width:0; font-size:13px; }
.switch { position:relative; width:42px; height:24px; flex:0 0 auto; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch-track { position:absolute; inset:0; border:1px solid #555; border-radius:999px; background:#222; transition:.18s ease; }
.switch-track::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#8c8c8c; transition:.18s ease; }
.switch input:checked + .switch-track { border-color:var(--kf-yellow); }
.switch input:checked + .switch-track::after { transform:translateX(18px); background:var(--kf-yellow); }

.btn {
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 14px;
  border:1px solid var(--kf-border);
  border-radius:5px;
  background:#1a1a1a;
  color:var(--kf-white);
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  text-decoration:none;
  text-transform:uppercase;
}
.btn:hover { border-color:#777; }
.btn.primary { border-color:var(--kf-yellow); background:var(--kf-yellow); color:#000; }
.btn.primary:hover { background:#f0e800; }
.btn.danger { color:#f0b0b0; }
.btn.danger:hover { border-color:var(--kf-danger); color:#fff; }
.btn.ghost { background:transparent; }
.btn.small { min-height:34px; padding:0 10px; font-size:9px; }
.btn:disabled { cursor:not-allowed; opacity:.45; }
.button-row { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.button-row.end { justify-content:flex-end; }


.layout-control-card {
  margin: 0 0 22px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--kf-yellow);
  border-radius: 6px;
  background: #141414;
}
.range-control {
  display: grid;
  grid-template-columns: minmax(0,1fr) 66px;
  gap: 12px;
  align-items: center;
}
.range-control input[type="range"] {
  width: 100%;
  accent-color: var(--kf-yellow);
}
.range-control output {
  min-width: 60px;
  color: var(--kf-white);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-align: right;
}
.image-adjuster {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px;
  background: #121212;
}
.image-adjuster.compact { max-width: 620px; }
.image-adjuster-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}
.image-adjuster-head > span,
.crop-control > label {
  color: var(--kf-lightgray);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.crop-control { display: grid; gap: 5px; }
.link-crop-controls { margin-top: 12px; }

.asset-editor {
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:18px;
  align-items:start;
}
.asset-preview {
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:16/7;
  overflow:hidden;
  border:1px solid var(--kf-border);
  border-radius:6px;
  background:#0d0d0d;
}
.asset-preview.is-bg { aspect-ratio:16/10; }
.asset-preview img { width:100%; height:100%; object-fit:cover; transform:scale(1); transform-origin:center; }
.asset-preview.is-contain img { object-fit:contain; }
.asset-empty { color:#707070; font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.asset-actions { display:grid; gap:10px; }
.asset-meta { color:var(--kf-lightgray); font-size:11px; line-height:1.45; }

.link-list { display:grid; gap:12px; }
.link-editor {
  border:1px solid rgba(255,255,255,.13);
  border-left:3px solid #444;
  border-radius:7px;
  background:#151515;
}
.link-editor.is-dragging { opacity:.55; }
.link-editor-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
.link-handle { display:flex; align-items:center; gap:10px; min-width:0; }
.drag-grip { display:grid; place-items:center; width:28px; height:28px; color:#888; cursor:grab; user-select:none; }
.link-number { color:var(--kf-yellow); font-size:10px; font-weight:700; letter-spacing:1px; }
.link-name-preview { overflow:hidden; font-size:12px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.link-editor-actions { display:flex; gap:6px; }
.link-editor-body { padding:14px; }
.link-image-row { margin-top:14px; }

.youtube-result-list { display:grid; gap:8px; margin-top:14px; }
.youtube-result { display:grid; grid-template-columns:126px minmax(0,1fr); gap:12px; min-height:76px; border:1px solid rgba(255,255,255,.1); border-radius:5px; overflow:hidden; background:#111; }
.youtube-result img { width:126px; height:76px; object-fit:cover; }
.youtube-result div { align-self:center; min-width:0; padding-right:10px; }
.youtube-result strong { display:block; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.youtube-result span { display:block; margin-top:4px; color:var(--kf-lightgray); font-size:10px; }

.notice { margin:12px 0 0; padding:12px 13px; border-left:2px solid var(--kf-yellow); background:#111; color:var(--kf-lightgray); font-size:11px; line-height:1.5; }
.notice.error { border-left-color:var(--kf-danger); color:#f2caca; }
.notice.success { border-left-color:var(--kf-ok); color:#c8e3d0; }

.sticky-savebar {
  position:sticky;
  bottom:14px;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:22px;
  padding:12px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  background:rgba(17,17,17,.96);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.save-state { color:var(--kf-lightgray); font-size:11px; }
.save-state.dirty { color:var(--kf-yellow); }

.audit-list { display:grid; gap:7px; }
.audit-row { display:grid; grid-template-columns:150px 130px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.07); color:var(--kf-lightgray); font-size:10px; }
.audit-row strong { color:var(--kf-white); }

.toast-stack { position:fixed; right:18px; top:82px; z-index:90; display:grid; gap:8px; width:min(360px,calc(100vw - 36px)); }
.toast { padding:12px 14px; border:1px solid var(--kf-border); border-left:3px solid var(--kf-yellow); border-radius:6px; background:#171717; color:#fff; font-size:12px; box-shadow:0 12px 30px rgba(0,0,0,.32); }
.toast.error { border-left-color:var(--kf-danger); }
.toast.success { border-left-color:var(--kf-ok); }

.modal-backdrop { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:18px; background:rgba(0,0,0,.76); }
.modal-card { width:min(100%,540px); max-height:calc(100dvh - 36px); overflow:auto; border:1px solid var(--kf-border); border-radius:8px; background:#171717; }
.modal-head { padding:18px 20px 12px; border-bottom:1px solid rgba(255,255,255,.08); }
.modal-head h3 { margin:4px 0 0; font-size:20px; }
.modal-body { padding:18px 20px; color:var(--kf-lightgray); }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; padding:0 20px 20px; }

@media (max-width: 1180px) {
  .admin-layout { grid-template-columns:1fr; }
  .preview-sticky { position:static; }
  .preview-viewport { height:680px; }
}
@media (max-width: 760px) {
  body { font-size:16px; }
  .admin-topbar { min-height:62px; padding:0 14px; }
  .admin-brand-copy span { display:none; }
  .admin-brand img { width:38px; }
  .admin-top-actions .mobile-hide { display:none; }
  .admin-hub-link { display:inline-flex; }
  .admin-layout { width:calc(100% - 24px); padding-top:18px; }
  .admin-section-head { padding:17px 16px 14px; }
  .admin-section-body { padding:16px; }
  .form-grid, .form-grid.three { grid-template-columns:1fr; }
  .status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .asset-editor { grid-template-columns:1fr; }
  .asset-preview { max-width:260px; }
  .link-editor-head { align-items:flex-start; }
  .link-editor-actions { flex-wrap:wrap; justify-content:flex-end; }
  .youtube-result { grid-template-columns:92px minmax(0,1fr); }
  .youtube-result img { width:92px; }
  .sticky-savebar { align-items:stretch; flex-direction:column; bottom:8px; }
  .sticky-savebar .button-row { display:grid; grid-template-columns:1fr 1fr; }
  .sticky-savebar .btn { width:100%; }
  .audit-row { grid-template-columns:1fr; gap:2px; }
  input[type="text"], input[type="url"], input[type="email"], input[type="password"], input[type="number"], select, textarea { font-size:16px; }
}

/* V1.6 · Crop editor + per-card height */
.size-stepper {
  display: grid;
  grid-template-columns: 42px minmax(96px, 1fr) 42px;
  align-items: center;
  gap: 8px;
  width: min(100%, 320px);
}
.size-stepper.with-reset { grid-template-columns: 42px minmax(112px,1fr) 42px auto; }
.stepper-button,
.crop-zoom-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--kf-border);
  border-radius: 5px;
  background: #1a1a1a;
  color: var(--kf-white);
  font-size: 24px;
  line-height: 1;
}
.stepper-button:hover,
.crop-zoom-button:hover { border-color: var(--kf-yellow); color: var(--kf-yellow); }
.size-stepper output {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--kf-border);
  border-radius: 5px;
  background: var(--kf-darkgray);
  color: var(--kf-white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .7px;
  text-align: center;
}

.asset-editor {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.asset-editor.separated {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.crop-editor {
  display: grid;
  gap: 10px;
  width: min(100%, 760px);
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 6px;
  background: #101010;
}
.card-crop-editor { width: min(100%, 760px); }
.crop-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--kf-border);
  border-radius: 6px;
  background: #090909;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.crop-viewport:active { cursor: grabbing; }
.crop-viewport.crop-header { aspect-ratio: 760 / 190; }
.crop-viewport.crop-background { aspect-ratio: 16 / 10; }
.crop-viewport.crop-card { aspect-ratio: 760 / 96;  /* Fallback = Standard-Boxhöhe; der echte Wert wird je Vorschaumodus inline gesetzt. */ }
.crop-viewport.is-booking-target { border-left: 3px solid var(--kf-yellow); }
.crop-viewport img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1);
  transform-origin: 50% 50%;
  pointer-events: none;
  -webkit-user-drag: none;
}
.crop-viewport.is-contain img { object-fit: contain; }
.crop-viewport .asset-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.crop-toolbar {
  display: grid;
  grid-template-columns: 42px 76px 42px minmax(0,1fr);
  gap: 8px;
  align-items: center;
}
.crop-toolbar output {
  color: var(--kf-white);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.crop-toolbar > span,
.crop-note {
  color: var(--kf-lightgray);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.crop-note { font-weight: 400; letter-spacing: .5px; text-transform: none; }
.youtube-custom-image-panel {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.link-card-height { margin-top: 12px; }
.link-image-row .crop-editor { margin-top: 12px; }

@media (max-width: 760px) {
  .crop-toolbar { grid-template-columns: 42px 70px 42px; }
  .crop-toolbar > span { grid-column: 1 / -1; }
  .size-stepper.with-reset { grid-template-columns: 42px minmax(98px,1fr) 42px; }
  .size-stepper.with-reset .btn { grid-column: 1 / -1; }
}


/* V1.8 · YouTube framing + exact desktop preview. */
.range-control { width: 100%; accent-color: var(--kf-yellow); }
.range-output-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.range-output-row output { color:var(--kf-white); font-size:12px; font-weight:700; letter-spacing:.6px; }
.field > output { display:block; margin-top:6px; color:var(--kf-white); font-size:12px; font-weight:700; letter-spacing:.6px; }


/* V1.9 · interne standortübergreifende Team-Notiz */
.team-note-card {
  display:grid; grid-template-columns:46px minmax(0,1fr); gap:14px; margin:0 0 20px; padding:16px 18px;
  border:1px solid rgba(231,223,0,.30); border-left:3px solid var(--kf-yellow); border-radius:8px;
  background:linear-gradient(100deg,#4b2475 0%,#32194f 28%,#23172f 58%,#1a1a1a 100%) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.team-note-icon { display:grid; place-items:center; width:38px; height:38px; margin-top:1px; border:1px solid rgba(231,223,0,.62); border-radius:50%; color:var(--kf-yellow); font-size:22px; font-weight:800; line-height:1; }
.team-note-card.has-note .team-note-icon { animation:team-note-pulse 2.2s ease-in-out infinite; }
@keyframes team-note-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(231,223,0,0);transform:scale(1)} 45%{box-shadow:0 0 0 7px rgba(231,223,0,.08);transform:scale(1.035)} }
.team-note-main { min-width:0; display:grid; gap:9px; }
.team-note-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.team-note-kicker { color:var(--kf-yellow); font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.team-note-heading h2 { margin:3px 0 0; font-size:18px; line-height:1.08; }
.team-note-meta { color:var(--kf-lightgray); font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; white-space:nowrap; }
.team-note-list { display:grid; gap:8px; }
.team-note-empty { min-height:34px; padding:9px 11px; border-left:2px solid rgba(231,223,0,.55); background:rgba(0,0,0,.24); color:var(--kf-lightgray); font-size:12px; line-height:1.42; }
.team-note-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; padding:10px 11px; border-left:2px solid rgba(231,223,0,.55); background:rgba(0,0,0,.24); }
.team-note-text { color:var(--kf-white); font-size:13px; font-weight:600; line-height:1.42; white-space:pre-wrap; overflow-wrap:anywhere; }
.team-note-item-meta { margin-top:5px; color:var(--kf-lightgray); font-size:8px; font-weight:700; letter-spacing:.65px; text-transform:uppercase; }
.team-note-delete { min-height:30px; padding:0 9px; }
.team-note-edit { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:end; }
.team-note-edit textarea { min-height:58px; max-height:130px; resize:vertical; border-color:rgba(231,223,0,.26); background:#232323; }
.team-note-edit textarea:focus { border-color:var(--kf-yellow); }
.team-note-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.btn.note-primary { border-color:rgba(231,223,0,.62); background:rgba(231,223,0,.08); color:var(--kf-white); }
.btn.note-primary:hover { background:rgba(231,223,0,.14); border-color:var(--kf-yellow); }
@media (prefers-reduced-motion:reduce) { .team-note-card.has-note .team-note-icon { animation:none; } }
@media (max-width:760px) { .team-note-card{grid-template-columns:38px minmax(0,1fr);padding:14px;background:linear-gradient(100deg,#4b2475 0%,#32194f 34%,#241832 65%,#1a1a1a 100%) !important}.team-note-heading{display:grid;gap:6px}.team-note-meta{white-space:normal}.team-note-edit{grid-template-columns:1fr}.team-note-actions{justify-content:flex-start}.team-note-item{grid-template-columns:1fr}.team-note-delete{justify-self:start} }

/* V2.1 · System Diagnostics + Vorschau-Modusumschalter.
   Bewusst nur bestehende KREATIVFABRIK-Tokens: schwarz/anthrazit/grau/weiß + Gelb. */
.diag-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.diag-item {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-left: 2px solid rgba(255,255,255,.18);
  border-radius: 6px;
  background: #131313;
  min-width: 0;
}
.diag-item span {
  color: var(--kf-lightgray);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.diag-item strong {
  overflow-wrap: anywhere;
  color: var(--kf-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.diag-item.ok { border-left-color: var(--kf-ok); }
.diag-item.warn { border-left-color: var(--kf-yellow); }
.diag-item.bad { border-left-color: var(--kf-danger); }
.diag-item.ok strong { color: var(--kf-ok); }
.diag-item.warn strong { color: var(--kf-yellow); }
.diag-item.bad strong { color: var(--kf-danger); }
.diag-note {
  margin: 12px 0 0;
  color: var(--kf-lightgray);
  font-size: 11px;
  line-height: 1.5;
}

.preview-mode-switch { display: flex; gap: 4px; }
.preview-mode-button {
  min-height: 26px;
  padding: 0 11px;
  border: 1px solid var(--kf-border);
  border-radius: 4px;
  background: #101010;
  color: var(--kf-lightgray);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
}
.preview-mode-button:hover { border-color: rgba(231,223,0,.55); color: var(--kf-white); }
.preview-mode-button.is-active {
  border-color: var(--kf-yellow);
  background: rgba(231,223,0,.10);
  color: var(--kf-yellow);
}
.preview-frame-meta {
  padding: 7px 14px;
  border-bottom: 1px solid var(--kf-border);
  color: var(--kf-lightgray);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.1px;
}
/* Mobile preview: centre a true phone-width viewport on the black stage. */
.preview-viewport.is-mobile-preview { display: grid; place-items: start center; }
.preview-viewport.is-mobile-preview iframe { position: relative; inset: auto; }

@media (max-width: 1180px) { .diag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .diag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-frame-head { flex-wrap: wrap; gap: 8px; padding: 9px 14px; }
  .admin-section-head { flex-wrap: wrap; gap: 10px; }
}