/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/admin/admin.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/* ============================= Admin panel ============================= */
:root {
  --cms-bg: #f3f5f9;
  --cms-panel: #ffffff;
  --cms-border: #e2e6ee;
  --cms-text: #1c2230;
  --cms-muted: #707a8e;
  --cms-primary: #4759e4;
  --cms-primary-dark: #3343c4;
  --cms-danger: #d64545;
  --cms-radius: 10px;
}

.cms-shell {
  display: flex;
  min-height: 100vh;
  background: var(--cms-bg);
  color: var(--cms-text);
}

.cms-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: #181d2b;
  color: #e8eaf2;
  display: flex;
  flex-direction: column;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
}
.cms-sidebar-brand {
  padding: 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cms-sidebar nav {
  flex: 1 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.cms-sidebar nav a,
.cms-sidebar-foot a,
.cms-sidebar-foot button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: #c6cbdc;
  text-decoration: none;
  font-size: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.cms-sidebar nav a:hover,
.cms-sidebar-foot a:hover,
.cms-sidebar-foot button:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.cms-sidebar nav a.is-active {
  background: var(--cms-primary);
  color: #fff;
}
.cms-sidebar-lang {
  display: flex; gap: 4px; padding: 10px 12px 0;
}
.cms-sidebar-lang button {
  flex: 1 1; background: rgba(255, 255, 255, 0.06); color: #c6cbdc;
  border: 1px solid transparent; border-radius: 8px; padding: 6px 4px;
  font-size: 12px; cursor: pointer;
}
.cms-sidebar-lang button.is-active { border-color: var(--cms-primary); color: #fff; background: rgba(71, 89, 228, 0.25); }

.cms-sidebar-foot {
  padding: 10px 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.cms-main {
  flex: 1 1;
  padding: 28px;
  max-width: 1100px;
}

.cms-panel {
  background: var(--cms-panel);
  border: 1px solid var(--cms-border);
  border-radius: var(--cms-radius);
  padding: 24px;
  margin-bottom: 24px;
}
.cms-panel h2 { margin-top: 0; }
.cms-panel h3 { margin-top: 28px; }

.cms-label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 4px; }
.cms-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--cms-border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  background: #fff;
  margin-bottom: 6px;
}
.cms-input:focus { outline: 2px solid var(--cms-primary); outline-offset: -1px; }

.cms-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--cms-border);
  background: #fff;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--cms-text);
}
.cms-btn:hover { border-color: var(--cms-primary); }
.cms-btn:disabled { opacity: 0.5; cursor: default; }
.cms-btn-primary { background: var(--cms-primary); border-color: var(--cms-primary); color: #fff; }
.cms-btn-primary:hover { background: var(--cms-primary-dark); }
.cms-btn-authentik { background: #fd4b2d; border-color: #fd4b2d; color: #fff; justify-content: center; margin-top: 10px; }
.cms-danger { color: var(--cms-danger); }
.cms-btn.cms-danger:hover { border-color: var(--cms-danger); }
.cms-btn-danger-solid { background: var(--cms-danger); border-color: var(--cms-danger); color: #fff; }
.cms-btn-danger-solid:hover { background: #b93535; }

.cms-muted { color: var(--cms-muted); font-size: 13px; }
.cms-error { color: var(--cms-danger); }
.cms-success { color: #1d8b4e; }

.cms-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.cms-row-between { justify-content: space-between; }
.cms-cols-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px; gap: 24px; }
.cms-field-row .cms-input { width: auto; flex: 1 1; margin-bottom: 0; }

.cms-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.cms-table th { text-align: left; font-size: 12px; text-transform: uppercase; color: var(--cms-muted); padding: 8px; border-bottom: 2px solid var(--cms-border); }
.cms-table td { padding: 10px 8px; border-bottom: 1px solid var(--cms-border); vertical-align: middle; }

.cms-pill { display: inline-block; padding: 2px 10px; border-radius: 99px; background: #e8ebf3; font-size: 12px; }
.cms-pill-published { background: #d8f3e3; color: #157347; }
.cms-pill-draft { background: #fdeccc; color: #9a6700; }

.cms-link-btn { background: none; border: 0; cursor: pointer; font: inherit; color: var(--cms-text); padding: 6px 4px; }
.cms-link-btn:hover { color: var(--cms-primary); }
.cms-album-tree { list-style: none; padding-left: 0; }
.cms-album-tree ul { list-style: none; padding-left: 26px; }
.cms-album-row { display: inline-flex; gap: 8px; align-items: center; }

.cms-addon-list { display: flex; flex-direction: column; gap: 12px; }
.cms-addon-card {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border: 1px solid var(--cms-border); border-radius: var(--cms-radius); padding: 14px 18px;
}
.cms-addon-card p { margin: 4px 0 0; }

/* auth/install */
.cms-auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1f30, #2b3354);
  padding: 20px;
}
.cms-auth-card {
  background: #fff; border-radius: 14px; padding: 32px; width: 100%; max-width: 420px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column;
}
.cms-install-card { max-width: 560px; }
.cms-auth-card h1 { margin: 0 0 10px; font-size: 24px; }
.cms-check { display: inline-flex; gap: 6px; align-items: center; margin: 6px 12px 6px 0; font-size: 14px; }

/* ========================= Builder & inline editor ========================= */

.cms-builder { min-height: 100vh; background: #2a2f40; }
.cms-builder-loading { padding: 80px; text-align: center; color: #fff; background: #2a2f40; min-height: 100vh; }

.cms-toolbar {
  position: -webkit-sticky;
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 8px;
  background: #181d2b; color: #e8eaf2;
  padding: 8px 14px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.cms-tb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.08); color: #e8eaf2;
  border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px;
  text-decoration: none;
}
.cms-tb-btn:hover { background: rgba(255, 255, 255, 0.16); }
.cms-tb-btn:disabled { opacity: 0.45; cursor: default; }
.cms-tb-save { background: var(--cms-primary); }
.cms-tb-save:hover { background: var(--cms-primary-dark); }
.cms-tb-publish { background: #1d8b4e; }
.cms-tb-title {
  background: transparent; border: 1px solid transparent; color: #fff;
  font-size: 15px; font-weight: 600; padding: 6px 8px; border-radius: 6px; min-width: 180px;
}
.cms-tb-title:hover, .cms-tb-title:focus { border-color: rgba(255, 255, 255, 0.25); outline: none; }
.cms-tb-slug { color: #8b93ab; font-size: 13px; }
.cms-tb-spacer { flex: 1 1; }
.cms-tb-select {
  background: rgba(255, 255, 255, 0.08); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 10px; font-size: 13px;
}
.cms-tb-select option { color: #111; }

.cms-canvas { background: #fff; margin: 18px auto; max-width: 1400px; box-shadow: 0 8px 50px rgba(0,0,0,.4); }

/* block chrome */
.cms-block-chrome { position: relative; }
.cms-block-chrome:hover { outline: 2px dashed rgba(71, 89, 228, 0.5); outline-offset: -2px; }
.cms-block-controls {
  position: absolute; top: -16px; right: 14px; z-index: 620;
  display: none; align-items: center; gap: 4px;
  background: #181d2b; color: #fff; border-radius: 8px; padding: 4px 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.cms-block-chrome:hover > .cms-block-controls { display: inline-flex; }
.cms-block-controls button {
  background: none; border: 0; color: #cfd4e4; cursor: pointer; padding: 4px; border-radius: 5px;
  display: inline-flex;
}
.cms-block-controls button:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.cms-block-controls .material-symbols-outlined { font-size: 18px; }
.cms-block-label { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; color: #9aa2b8; }
.cms-missing-block { padding: 30px; background: #fff3f3; color: #a33; text-align: center; }
/* Block hidden in the language currently being edited */
.cms-block-hidden > *:not(.cms-block-controls):not(.cms-insert) { opacity: 0.35; filter: grayscale(0.7); }

.cms-insert { position: relative; display: flex; justify-content: center; height: 0; z-index: 610; pointer-events: none; }
.cms-insert .cms-insert-btn, .cms-insert .cms-palette { pointer-events: auto; }
.cms-insert-always { height: auto; padding: 30px 0 60px; }
.cms-insert-btn {
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 99px; background: var(--cms-primary); color: #fff;
  font-size: 14px; padding: 9px 18px; cursor: pointer; opacity: 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: opacity 0.12s;
}
.cms-insert-btn:hover { background: var(--cms-primary-dark); }
.cms-insert-always .cms-insert-btn { opacity: 1; transform: none; }
.cms-block-chrome:hover .cms-insert-btn, .cms-insert-btn:focus { opacity: 1; }
.cms-palette {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 650;
  background: #fff; border: 1px solid var(--cms-border); border-radius: 12px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25);
  display: grid; grid-template-columns: repeat(3, 150px); grid-gap: 6px; gap: 6px; padding: 10px;
}
.cms-palette-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--cms-border); background: #fafbfe; border-radius: 8px;
  padding: 14px 8px; cursor: pointer; font-size: 12px; color: var(--cms-text);
}
.cms-palette-item:hover { border-color: var(--cms-primary); background: #f1f3fe; }
.cms-palette-item .material-symbols-outlined { font-size: 26px; color: var(--cms-primary); }

/* inline editable */
.cms-editable { outline: none; cursor: text; min-width: 10px; }
.cms-editable:hover { box-shadow: 0 0 0 1px rgba(71, 89, 228, 0.45); border-radius: 3px; }
.cms-editable:focus { box-shadow: 0 0 0 2px var(--cms-primary); border-radius: 3px; }
.cms-empty:not(:focus)::before { content: attr(data-placeholder); opacity: 0.4; font-style: italic; }
/* Empty editables collapse to zero size, which misplaces the caret and the
   placeholder. Reserve normal line space — but only force inline-block on
   inline elements, so empty headings/paragraphs keep their block position. */
.cms-editable:empty { min-width: 2ch; min-height: 1.2em; }
span.cms-editable:empty { display: inline-block; vertical-align: baseline; }

.cms-richbar {
  position: absolute; z-index: 3000;
  display: flex; gap: 2px;
  background: #181d2b; border-radius: 8px; padding: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.cms-richbar button {
  background: none; border: 0; color: #e8eaf2; width: 30px; height: 28px;
  border-radius: 5px; cursor: pointer;
}
.cms-richbar button:hover { background: rgba(255, 255, 255, 0.16); }

/* media/icon/link edit affordances */
.cms-media-edit { position: relative; display: block; }
.cms-media-btn {
  position: absolute; bottom: 10px; left: 10px; z-index: 40;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(24, 29, 43, 0.92); color: #fff; border: 0; border-radius: 8px;
  padding: 7px 12px; font-size: 12px; cursor: pointer;
}
/* When an image/video is set, shrink to a small corner icon so small images
   (logos) stay visible. Always rendered — overlays (e.g. the hero gradient)
   can sit above the wrapper, which would break hover-gating. */
.cms-media-btn-compact {
  left: auto; right: 6px; bottom: 6px; padding: 0;
  width: 28px; height: 28px; border-radius: 99px; justify-content: center;
  opacity: 0.65; z-index: 605;
}
.cms-media-btn-compact .material-symbols-outlined { font-size: 16px; }
.cms-media-btn-remove { right: 40px; background: rgba(180, 50, 50, 0.92); }
.cms-media-btn-compact:hover { opacity: 1; }
.cms-media-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #f0f2f7, #f0f2f7 12px, #e7eaf2 12px, #e7eaf2 24px);
  color: #8a90a0; min-height: 160px; border-radius: 6px; font-size: 14px;
}
.cms-icon-btn { background: none; border: 1px dashed rgba(71, 89, 228, 0.6); border-radius: 6px; cursor: pointer; padding: 2px; color: inherit; }
.cms-icon-btn:hover { background: rgba(71, 89, 228, 0.12); }

/* The link badge floats vertically centered on the right edge OUTSIDE the
   text, away from the repeater toolbar, so the text stays fully editable. */
.cms-link-edit { position: relative; display: inline-block; cursor: text; }
.cms-link-unset { opacity: 0.75; }
.cms-link-badge {
  position: absolute; top: 50%; right: -28px; transform: translateY(-50%);
  z-index: 605; cursor: pointer;
  background: var(--cms-primary); color: #fff; border: 0; border-radius: 99px;
  width: 24px; height: 24px; display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.cms-link-badge:hover { background: var(--cms-primary-dark); }
.cms-link-edit:hover .cms-link-badge, .cms-link-edit:focus-within .cms-link-badge { display: inline-flex; }
/* Invisible bridge between the element and the floating badge, so moving the
   mouse towards the badge doesn't lose hover (e.g. header social icons). */
.cms-link-edit:hover::after, .cms-link-edit:focus-within::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -30px; width: 30px;
}
.cms-link-badge .material-symbols-outlined { font-size: 15px; }

.cms-select-attr {
  background: #181d2b; color: #fff; border: 0; border-radius: 6px;
  font-size: 12px; padding: 4px 8px; margin: 4px; cursor: pointer;
}

/* repeater — controls float ABOVE the item, never over its content */
.cms-rep-item { position: relative; }
.cms-rep-item:hover { outline: 1px dashed rgba(71, 89, 228, 0.4); }
.cms-rep-controls {
  position: absolute; top: -24px; right: 0; z-index: 615; display: none; gap: 2px;
  background: #181d2b; border-radius: 6px; padding: 2px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.cms-rep-item:hover > .cms-rep-controls { display: inline-flex; }
.cms-rep-controls button { background: none; border: 0; color: #dfe3ee; cursor: pointer; font-size: 12px; padding: 3px 6px; border-radius: 4px; }
.cms-rep-controls button:hover { background: rgba(255, 255, 255, 0.15); }
.cms-rep-controls button:disabled { opacity: 0.4; }
.cms-rep-add {
  display: inline-flex; margin: 8px; padding: 6px 12px; font-size: 12px;
  border: 1px dashed var(--cms-primary); color: var(--cms-primary); background: rgba(71, 89, 228, 0.06);
  border-radius: 8px; cursor: pointer;
}

/* modals */
.cms-modal-backdrop {
  position: fixed; inset: 0; z-index: 4000; background: rgba(12, 15, 24, 0.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cms-modal {
  background: #fff; border-radius: 14px; width: 100%; max-width: 520px; max-height: 86vh;
  display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  color: var(--cms-text);
}
.cms-modal-wide { max-width: 860px; }
.cms-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--cms-border);
}
.cms-modal-close { background: none; border: 0; font-size: 16px; cursor: pointer; color: var(--cms-muted); }
.cms-modal-body { padding: 18px; overflow-y: auto; }
.cms-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* media library layout */
.cms-media-layout { display: grid; grid-template-columns: 190px 1fr; grid-gap: 18px; gap: 18px; align-items: start; }
.cms-media-layout:has(.cms-media-details) { grid-template-columns: 190px 1fr 280px; }
.cms-media-folders {
  background: var(--cms-panel); border: 1px solid var(--cms-border); border-radius: var(--cms-radius);
  padding: 14px; position: -webkit-sticky; position: sticky; top: 20px;
}
.cms-media-folders h3 { margin: 0 0 8px; font-size: 14px; }
.cms-folder {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 14px;
}
.cms-folder:hover { background: var(--cms-bg); }
.cms-folder.is-active { background: var(--cms-primary); color: #fff; }
.cms-folder-new { color: var(--cms-muted); }
.cms-media-details {
  background: var(--cms-panel); border: 1px solid var(--cms-border); border-radius: var(--cms-radius);
  padding: 16px; position: -webkit-sticky; position: sticky; top: 20px;
}
.cms-media-details h4 { margin: 16px 0 4px; }
.cms-media-preview { border-radius: 8px; overflow: hidden; background: #eef0f6; }
.cms-media-preview img { width: 100%; height: auto; display: block; }
.cms-processing {
  position: absolute; left: 4px; bottom: 4px; right: 4px;
  background: rgba(24, 29, 43, 0.85); color: #ffd479; font-size: 10px; border-radius: 5px; padding: 2px 4px;
}

/* media picker */
.cms-media-toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.cms-media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-gap: 8px; gap: 8px;
}
.cms-media-cell {
  position: relative; aspect-ratio: 1; border: 2px solid transparent; border-radius: 8px;
  overflow: hidden; cursor: pointer; padding: 0; background: #eef0f6;
}
.cms-media-cell img, .cms-media-cell video { width: 100%; height: 100%; object-fit: cover; }
.cms-media-cell.is-selected { border-color: var(--cms-primary); }
.cms-media-file { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 30px; }
.cms-media-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
.cms-picker-footer {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--cms-border);
  display: flex; gap: 14px; align-items: flex-end;
}
.cms-picker-alts { flex: 1 1; display: flex; gap: 10px; flex-wrap: wrap; }
.cms-picker-alt { flex: 1 1; min-width: 180px; font-size: 12px; font-weight: 600; }
.cms-picker-alt .cms-input { margin-bottom: 0; }
.cms-cell-remove {
  position: absolute; top: 4px; right: 4px; background: rgba(20, 22, 30, 0.8); color: #fff;
  border: 0; border-radius: 99px; width: 22px; height: 22px; cursor: pointer; font-size: 11px;
}

/* icon picker */
.cms-picker-heading { margin: 16px 0 8px; font-size: 12px; text-transform: uppercase; color: var(--cms-muted); }
.cms-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); grid-gap: 4px; gap: 4px; }
.cms-icon-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: #f5f6fa; border: 2px solid transparent; border-radius: 8px; cursor: pointer; font-size: 20px;
}
.cms-icon-cell:hover { background: #e9ecf6; }
.cms-icon-cell.is-selected { border-color: var(--cms-primary); }

/* link modal */
.cms-link-results { max-height: 220px; overflow-y: auto; margin: 8px 0; }
.cms-link-result {
  display: flex; justify-content: space-between; gap: 10px; width: 100%;
  background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer;
  font-size: 14px; text-align: left;
}
.cms-link-result:hover { background: #f0f2fb; }
.cms-link-result.is-selected { background: #e4e8fb; }
.cms-link-result code { color: var(--cms-muted); font-size: 12px; }

/* form attr */
.cms-form-attr-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* form builder */
.cms-tabs { display: flex; gap: 4px; margin: 18px 0 16px; border-bottom: 2px solid var(--cms-border); }
.cms-tab {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
  padding: 10px 16px; font-size: 14px; cursor: pointer; color: var(--cms-muted);
}
.cms-tab.is-active { color: var(--cms-primary); border-bottom-color: var(--cms-primary); font-weight: 600; }
.cms-formbuilder { display: grid; grid-template-columns: 1fr 300px; grid-gap: 22px; gap: 22px; align-items: start; }
.cms-fb-canvas { display: flex; flex-direction: column; gap: 8px; }
.cms-fb-row { display: grid; grid-template-columns: 1fr; grid-gap: 8px; gap: 8px; }
.cms-fb-row.cms-fb-cols { grid-template-columns: 1fr 1fr; }
.cms-fb-field {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--cms-border); border-radius: 10px; background: #fafbfe;
  padding: 14px 14px; cursor: -webkit-grab; cursor: grab; -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.cms-fb-field.is-selected { border-color: var(--cms-primary); background: #f0f2fe; }
.cms-fb-field.is-dragging { opacity: 0.4; }
.cms-fb-grip { color: var(--cms-muted); letter-spacing: -2px; }
.cms-fb-label { font-weight: 600; font-size: 14px; flex: 1 1; }
.cms-fb-type { font-size: 12px; color: var(--cms-muted); }
.cms-fb-sidebar {
  border: 1px solid var(--cms-border); border-radius: var(--cms-radius);
  padding: 16px; position: -webkit-sticky; position: sticky; top: 20px; background: #fff;
}
.cms-fb-sidebar h3 { margin-top: 0; }

/* insights */
.insights-totals { display: flex; gap: 20px; margin: 14px 0; }
.insights-kpi {
  background: #f5f6fb; border-radius: 10px; padding: 14px 22px; display: flex; flex-direction: column;
}
.insights-kpi strong { font-size: 26px; }
.insights-kpi span { color: var(--cms-muted); font-size: 13px; }
.insights-chart-wrap { position: relative; }
.insights-chart { width: 100%; height: 280px; background: #fff; border: 1px solid var(--cms-border); border-radius: 10px; }
.insights-legend { display: flex; gap: 18px; font-size: 13px; color: var(--cms-muted); margin: 6px 0; }
.insights-legend .dot, .insights-tooltip .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 99px; margin-right: 5px;
}
.dot-views { background: #506eff; }
.dot-visitors { background: #27b376; }
.insights-tooltip {
  position: absolute; top: 10px; right: 12px;
  background: #181d2b; color: #fff; border-radius: 8px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px; font-size: 13px; pointer-events: none;
}
.insights-bars { display: flex; flex-direction: column; gap: 7px; }
.insights-bar-row { display: grid; grid-template-columns: minmax(70px, 40%) 1fr 36px; grid-gap: 8px; gap: 8px; align-items: center; font-size: 13px; }
.insights-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insights-bar-track { background: #eef0f6; border-radius: 99px; height: 8px; overflow: hidden; }
.insights-bar-fill { display: block; height: 100%; background: #506eff; border-radius: 99px; }
.insights-bar-n { text-align: right; color: var(--cms-muted); }
.insights-cols { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; gap: 20px; margin-top: 18px; }

@media (max-width: 800px) {
  .cms-cols-2, .insights-cols { grid-template-columns: 1fr; }
  .cms-sidebar { width: 64px; }
  .cms-sidebar nav a span, .cms-sidebar-brand { display: none; }
}