/* =========================================================
   09 EDITOR LAYOUT – FINAL CLEAN VERSION
========================================================= */

/* =========================
   BASE
========================= */

:root{
  --cp-dark-cyan:#096f7e;
  --cp-dark-magenta:#8b145e;
  --cp-gray:#737373;
  --editor-font-size:20px;
}

html,
body{
  height:100%;
}

body.view-editor{
  overflow:hidden;
}

.image-upload-progress-layer{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,3,20,.82);
}

.image-upload-progress-layer.is-visible{
  display:flex;
}

.image-upload-progress-box{
  width:min(560px, 100%);
  border:2px solid var(--accent-magenta);
  background:var(--bg);
  box-shadow:0 0 0 4px rgba(22,242,255,.16);
  color:var(--white);
  padding:18px;
}

.image-upload-progress-title{
  color:var(--brand-yellow);
  font-size:1.1rem;
  margin-bottom:6px;
}

.image-upload-progress-file{
  color:var(--link-cyan);
  font-size:.78rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:14px;
}

.image-upload-progress-main{
  margin-bottom:12px;
}

.image-upload-progress-label,
.image-upload-render-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.image-upload-progress-label{
  color:var(--brand-yellow);
  font-size:.75rem;
  margin-bottom:6px;
}

.image-upload-progress-upload-text,
.image-upload-render-detail{
  color:var(--white);
  text-align:right;
}

.image-upload-progress-bar{
  width:100%;
  height:14px;
  border:1px solid var(--link-cyan);
  background:#000;
  overflow:hidden;
}

.image-upload-progress-fill{
  width:0;
  height:100%;
  background:var(--link-cyan);
  transition:width .12s linear;
}

.image-upload-progress-status{
  color:var(--accent-magenta);
  font-size:.82rem;
  margin:10px 0;
}

.image-upload-progress-error-hu{
  color:var(--accent-magenta);
  font-size:.78rem;
  line-height:1.35;
  margin:0 0 12px;
}

.image-upload-progress-render-list{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.image-upload-render-row{
  min-height:24px;
  padding:3px 0;
  color:#888;
  font-size:.76rem;
  border-top:1px solid rgba(22,242,255,.18);
}

.image-upload-render-row.is-active{
  color:var(--brand-yellow);
}

.image-upload-render-row.is-done{
  color:var(--link-cyan);
}

.image-upload-render-row.is-error{
  color:var(--accent-magenta);
}

.block-variant:disabled{
  color:#8f8f8f;
  border-color:#505050;
  opacity:.65;
  cursor:not-allowed;
}

/* =========================
   SHELL (MAIN GRID)
========================= */

.editor-meta {
  margin-top: 0!important;
}

.meta-lang-inactive .block-frame{
  opacity:.48;
  filter:saturate(.55) brightness(.82);
}

.meta-lang-inactive .block-title,
.meta-lang-inactive .meta-body{
  color:#737373;
}

.meta-lang-inactive .block-variant{
  color:#9f9f9f;
  background:#1f1f1f;
}

.editor-shell{
  --editor-left: 900px;
  --editor-middle: 520px;
  --editor-right: 340px;

  display:grid;
  grid-template-columns:
    minmax(0, var(--editor-left))
    8px
    minmax(0, var(--editor-middle))
    8px
    minmax(260px, var(--editor-right));

  width:100%;
  max-width:100%;

  /* HEADER miatt levonunk */
  height:calc(100vh - 96px);

  overflow:hidden;
}

/* =========================
   PANELS
========================= */

.editor-panel{
  min-width:0;
  min-height:0;

  display:flex;
  flex-direction:column;

  overflow:auto;

  padding:20px;

  scrollbar-gutter: stable;
}

/* middle vizuális elválasztás */

.editor-panel-middle{
  border-left:1px solid var(--link-cyan);
  border-right:1px solid var(--link-cyan);
  background:rgba(255,255,255,0.01);
}

/* =========================
   RESIZER
========================= */

.editor-divider{
  width:8px;
  cursor:col-resize;

  background:
    linear-gradient(
      to right,
      transparent 0,
      transparent 2px,
      var(--accent-magenta) 2px,
      var(--accent-magenta) 6px,
      transparent 6px,
      transparent 100%
    );

  opacity:.55;
  user-select:none;
}

.editor-divider:hover{
  opacity:1;
}

.is-resizing,
.is-resizing *{
  cursor:col-resize !important;
  user-select:none !important;
}

@media (max-width: 768px){
  body.view-editor{
    overflow:auto;
  }

  .editor-shell{
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:calc(100vh - 96px);
    overflow:visible;
  }

  .editor-panel{
    width:100%;
    overflow:visible;
    scrollbar-gutter:auto;
  }

  .editor-panel-middle{
    order:1;
    border-left:0;
    border-right:0;
    border-bottom:1px solid var(--link-cyan);
  }

  .editor-panel-left{
    order:2;
  }

  .editor-panel-right{
    order:3;
  }

  .editor-divider{
    display:none;
  }
}

/* =========================
   HERO FIX (EDITOR MODE)
========================= */

.view-editor .hero{
  width:100%;
  margin:0;
}

/* =========================
   TOOLBAR
========================= */

.editor-tools{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.editor-tools button{
  background:transparent;
  color:var(--accent-magenta);
  cursor:pointer;
  font-family:inherit;
}

/* =========================
   CONTENTEDITABLE
========================= */

[contenteditable="true"]:focus{
  outline:none;
}

/* =========================
   BUTTON
========================= */

.cp-btn{
  display:inline-block;
  padding:4px 7px;
  margin-top:8px;
  color:black;
  cursor:pointer;
  user-select:none;
  font-weight:700;
  letter-spacing:0.04em;
  background:var(--brand-yellow);
  text-align:center;
  transition:all 0.15s ease;
}

.cp-btn:hover{
  background:var(--accent-magenta);
  color:#000;
}

.cp-btn:active{
  transform:translateY(1px);
}

/* =========================
   BLOCK SYSTEM
========================= */

.block-item{
  margin:20px 0;
  font-family:inherit;
}

.block-frame{
  position:relative;
  border:1px solid var(--link-cyan);
  border-radius:2px;
  background:var(--bg);
  font-size:var(--editor-font-size);
  padding:14px 10px 10px;
  transition:border-color .12s ease, box-shadow .12s ease;
}

.block-frame::before{
  content:"";
  position:absolute;
  top:3px;
  left:0;
  right:0;
  height:1px;
  background:var(--link-cyan);
  box-shadow:
    0 4px 0 var(--link-cyan),
    0 8px 0 var(--link-cyan);
}

/* =========================
   BLOCK HEADER
========================= */

.block-header{
  position:absolute;
  top:-5px;
  left:10px;
  right:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.block-title{
  padding:0 8px;
  background:var(--bg);
  color:var(--accent-magenta);
  letter-spacing:1px;
  font-size:var(--editor-font-size);
}

.meta-title-block .block-frame{
  border-color:var(--accent-magenta);
}

.meta-title-block .block-frame::before{
  background:var(--accent-magenta);
  box-shadow:
    0 4px 0 var(--accent-magenta),
    0 8px 0 var(--accent-magenta);
}

.meta-hero-image-editor{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.meta-hero-image-preview{
  display:block;
  width:100%;
  height:auto;
  margin-top:4px;
  image-rendering:auto;
}

.meta-hero-image-delete{
  color:red;
  cursor:pointer;
}

/* =========================
   ACTIONS
========================= */

.block-actions{
  display:flex;
  gap:10px;
  padding:0 8px;
  background:#070b12;
  user-select:none;
  font-size:var(--editor-font-size);
}

.block-active-toggle{
  color:var(--brand-yellow);
  cursor:pointer;
  font-weight:500;
}

.block-item.is-inactive .block-frame{
  opacity:.55;
}

.block-item.is-inactive .block-active-toggle{
  color:var(--brand-yellow);
}

.block-item--moved .block-frame{
  border-color:var(--brand-yellow);
  box-shadow:
    0 0 0 1px var(--brand-yellow),
    0 0 18px rgba(255, 198, 44, .45);
}

.cp-render-block{
  transition:box-shadow .12s ease;
}

.cp-render-block--moved{
  box-shadow:
    inset 4px 0 0 var(--brand-yellow),
    0 0 18px rgba(255, 198, 44, .28);
}

.block-help{
  color:var(--link-cyan);
  cursor:pointer;
}

.block-help-box{
  background:#505050;
  border-left:3px solid var(--brand-yellow);
  color:var(--white);
  font-size:var(--editor-font-size);
  line-height:1.35;
  margin:0 0 10px;
  padding:8px 10px;
}

.block-help-box[hidden]{
  display:none;
}

.block-help-box code{
  color:var(--brand-yellow);
  font:inherit;
}

.block-action{
  cursor:pointer;
  color:var(--brand-yellow);
  font-weight:700;
}

.slug-get-btn{
  cursor:pointer;
  color:var(--brand-yellow);
  font-size:var(--editor-font-size);
  font-weight:500;
  letter-spacing:1px;
  user-select:none;
}

/* =========================
   CREATE BUTTON
========================= */

.block-create{
  cursor:pointer;
  margin-bottom:0;
  color:var(--brand-yellow);
}

.block-create.is-disabled{
  cursor:not-allowed;
  opacity:.45;
}

.block-insert-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  margin:6px 0 12px;
}

.block-insert-btn{
  height:26px;
  min-width:0;
  padding:0 8px;
  line-height:22px;
}

.block-insert-select{
  max-width:260px;
  flex:0 1 260px;
}

.block-insert-select[hidden]{
  display:none;
}

/* =========================
   SYSTEM SETTINGS / FONT / LOGO EDITOR
========================= */

.system-settings-block,
.font-editor-block{
  margin-bottom:14px;
}

.system-settings-body,
.font-editor-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.system-settings-body[hidden],
.font-editor-body[hidden]{
  display:none;
}

.system-settings-row{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:8px;
  align-items:center;
}

.system-settings-label{
  color:#737373;
  font-size:var(--editor-font-size);
  line-height:1.1;
}

.system-settings-select{
  width:100%;
  min-width:0;
  max-width:none;
}

.font-editor-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:4px 0 10px;
  border-bottom:1px solid rgba(22,242,255,.16);
}

.font-editor-name{
  color:var(--brand-yellow);
}

.font-editor-label,
.font-editor-note{
  color:#737373;
  font-size:var(--editor-font-size);
  line-height:1.1;
}

.font-editor-control-row{
  display:grid;
  grid-template-columns:150px minmax(0,72px);
  gap:8px;
  align-items:center;
}

.font-editor-number{
  width:72px;
}

.font-editor-sample{
  align-self:flex-start;
  color:var(--white);
}

.logo-editor-block{
  margin-bottom:14px;
}

.logo-editor-body{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.logo-editor-body[hidden]{
  display:none;
}

.logo-editor-label,
.logo-editor-mini-label{
  color:var(--brand-yellow);
  font-size:var(--editor-font-size);
  line-height:1;
}

.logo-editor-text{
  width:100%;
}

.brand--has-cursor .brand__cursor{
  animation:logo-editor-cursor-blink .52s steps(1,end) 6 forwards;
}

@keyframes logo-editor-cursor-blink{
  0%, 49%{ opacity:1; }
  50%, 100%{ opacity:0; }
}

.logo-editor-control-row{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  align-items:center;
  gap:8px;
}

.logo-editor-chars{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.logo-editor-char-card{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:8px;
  padding:8px 0;
  border-bottom:1px solid rgba(22,242,255,.18);
}

.logo-editor-char-lines{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

.logo-editor-char-line{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  align-items:center;
  gap:8px;
}

.logo-editor-char{
  width:34px;
  min-width:34px;
  text-align:center;
  align-self:start;
}

.logo-editor-y-offset{
  width:72px;
}

.logo-size-input{
  width:72px;
}

.logo-color-select,
.logo-font-select,
.logo-weight-select{
  width:100%;
  min-width:0;
  max-width:none;
}

/* =========================
   INPUTS
========================= */

.block-input,
.block-variant,
.block-textarea,
.block-body input,
.block-body select{
  background:#15151d !important;
  border:none;
  outline:none;
  box-shadow:none;
  color:var(--brand-yellow);
  font:inherit;
  font-size:var(--editor-font-size);
  line-height:1;
  min-height:26px;
  padding:2px 6px;
}

.block-variant option,
.block-body select option{
  background:#111119 !important;
  color:var(--brand-yellow);
  font-size:var(--editor-font-size);
  line-height:1.1;
  min-height:0;
  padding:2px 8px;
}

.block-variant option:checked,
.block-body select option:checked{
  background:#050508 !important;
  box-shadow:
    inset 3px 0 0 var(--brand-yellow),
    inset 0 0 0 999px #050508;
  color:var(--brand-yellow);
}

.block-variant option:hover,
.block-body select option:hover{
  background:#221526 !important;
  box-shadow:
    inset 3px 0 0 var(--accent-magenta),
    inset 0 0 0 999px #221526;
  color:var(--accent-magenta);
}


/* =========================
   TEXTAREA
========================= */

.block-quote-textarea{
  width:100%;
  min-height:34px;
  resize:none;
  overflow:hidden;
  background:transparent;
  border:none;
  outline:none;
  color:var(--white);
  font:inherit;
  padding:0;
  line-height:1.3;
  white-space:pre-wrap;
}

.cp-geos-editor-input{
  background:#505050 !important;
  border:none !important;
  box-shadow:none !important;
  color:#fff !important;
  font:inherit;
  font-size:var(--editor-font-size);
  line-height:1.35;
  margin-top:3px;
  min-height:30px;
  outline:none !important;
  padding:4px 7px;
  width:min(100%, 560px);
}

.cp-geos-editor-input:focus{
  background:#505050 !important;
  border:none !important;
  box-shadow:none !important;
  color:#fff !important;
}

.cp-geos-editor-input::placeholder{
  color:#bdbdbd;
}

textarea.cp-geos-editor-input{
  min-height:30px;
  overflow:hidden;
  resize:none;
}

.text-color-picker{
  align-items:flex-start;
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin:6px 0 8px;
}

.text-color-toggle{
  align-items:center;
  background:rgba(255,255,255,.10);
  border:0;
  color:var(--brand-yellow);
  cursor:pointer;
  display:inline-flex;
  font:inherit;
  font-size:var(--editor-font-size);
  gap:7px;
  min-height:28px;
  padding:2px 7px;
}

.text-color-toggle.is-open{
  background:rgba(255,255,255,.16);
  color:var(--accent-magenta);
}

.text-color-toggle-swatch{
  border:1px solid rgba(255,255,255,.35);
  display:inline-block;
  height:14px;
  width:14px;
}

.text-color-panel{
  align-items:flex-start;
  border-left:3px solid var(--brand-yellow);
  display:flex;
  flex-basis:100%;
  flex-wrap:wrap;
  gap:6px 8px;
  padding:4px 0 4px 9px;
}

.text-color-panel[hidden]{
  display:none;
}

.text-color-select{
  min-width:180px;
}

.text-color-default{
  align-items:center;
  background:transparent;
  border:0;
  color:var(--white);
  cursor:pointer;
  display:inline-flex;
  font:inherit;
  font-size:var(--editor-font-size);
  gap:3px;
  min-height:28px;
  padding:0;
}

.text-color-default-box{
  border:2px solid var(--white);
  display:inline-block;
  height:18px;
  width:18px;
}

.text-color-default.is-active .text-color-default-box{
  background:var(--white);
}

.text-color-palettes{
  align-items:flex-start;
  display:flex;
  flex-basis:100%;
  flex-wrap:wrap;
  gap:12px;
  margin-top:2px;
}

.text-color-palette-group{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.text-color-palette-title{
  color:var(--white);
  font-size:var(--editor-font-size);
  line-height:1;
  text-align:center;
}

.text-color-swatch-grid{
  display:grid;
  gap:4px;
  grid-auto-flow:column;
  grid-auto-columns:max-content;
  grid-template-rows:repeat(2, 18px);
}

.text-color-palette-group--cp .text-color-swatch-grid{
  grid-template-rows:repeat(2, 18px);
}

.text-color-swatch{
  border:1px solid #505050;
  cursor:pointer;
  font:inherit;
  height:18px;
  margin:0;
  padding:0;
  position:relative;
  width:18px;
}

.text-color-swatch.is-active{
  border-color:var(--brand-yellow);
  box-shadow:0 0 0 1px var(--brand-yellow);
}

.text-color-swatch.is-custom{
  border-style:dashed;
}

.text-color-swatch.is-custom.is-undefined{
  background:transparent !important;
}

.text-color-swatch.is-custom.is-undefined::after{
  color:var(--brand-yellow);
  content:"+";
  font-size:var(--editor-font-size);
  left:50%;
  line-height:1;
  position:absolute;
  top:50%;
  transform:translate(-50%, -50%);
}

.text-color-custom-control{
  align-items:center;
  display:flex;
  gap:4px;
  min-height:26px;
}

.text-color-custom-input{
  background:#505050;
  border:1px solid #737373;
  color:var(--white);
  font:inherit;
  font-size:var(--editor-font-size);
  height:26px;
  line-height:1;
  margin:0;
  padding:0 3px;
  text-transform:lowercase;
  width:64px;
}

.text-color-custom-input:focus{
  border-color:var(--brand-yellow);
  outline:none;
}

.text-color-custom-input.is-invalid{
  border-color:var(--accent-magenta);
  color:var(--accent-magenta);
}

.json-array-row{
  display:block;
}

.json-array-textarea{
  min-height:78px !important;
  max-height:160px;
  overflow:auto !important;
  resize:vertical;
  white-space:pre;
}

.json-array-status{
  color:#787878;
  font-size:var(--editor-font-size);
  margin-top:6px;
}

.json-array-status.is-error{
  color:var(--accent-magenta);
}

.extra-translations-block .block-header{
  align-items:center;
  display:flex;
  gap:8px;
}

.extra-translations-toggle{
  background:transparent;
  border:0;
  color:var(--brand-yellow);
  cursor:pointer;
  font:inherit;
  margin-left:auto;
  padding:0;
}

.extra-translations-json-textarea{
  min-height:118px !important;
}

.extra-translations-languages{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

.extra-translations-language-chip{
  background:var(--accent-magenta);
  color:var(--C64_fekete);
  display:inline-block;
  font-size:var(--editor-font-size);
  line-height:1;
  padding:3px 5px;
}

.platform-picker{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:3px;
}

.platform-chip{
  align-items:center;
  border:1px solid var(--brand-yellow);
  color:var(--brand-yellow);
  cursor:pointer;
  display:inline-flex;
  font-size:var(--editor-font-size);
  gap:5px;
  line-height:1;
  padding:4px 6px;
  user-select:none;
}

.platform-chip input{
  accent-color:var(--accent-magenta);
  margin:0;
}

.platform-chip:has(input:checked){
  border-color:var(--link-cyan);
  color:var(--link-cyan);
}

.platform-empty{
  color:#787878;
  font-size:var(--editor-font-size);
}

#editor-platform-badges,
#preview-platform-badges{
  display:inline-flex;
  flex-wrap:wrap;
  gap:8px;
}

/* =========================
   IMAGE
========================= */

.image-preview-container{
  display:flex;
  gap:10px;
  margin-top:6px;
}

.image-gallery{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:6px;
  margin-top:6px;
}

.image-action-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
}

.image-thumb{
  position:relative;
  width:90px;
  height:60px;
  overflow:hidden;
  border:1px solid var(--link-cyan);
  cursor:grab;
  transition:border-color .12s ease, opacity .12s ease, transform .12s ease;
}

.image-thumb:active{
  cursor:grabbing;
}

.image-thumb.is-dragging{
  opacity:.45;
  border-color:var(--brand-yellow);
  transform:scale(.96);
}

.image-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
}

.image-delete{
  position:absolute;
  top:2px;
  right:4px;
  color:red;
  font-weight:bold;
  cursor:pointer;
  pointer-events:auto;
}

/* =========================
   TERMINAL LOG
========================= */

.cursor-terminal-log{
  margin-top:12px;
  font-size:var(--editor-font-size);
  color:var(--C64_vilagos_kek);
  white-space:pre-wrap;
}

/* =========================
   ACTION
========================= */

.cursor-action{
  margin-top:10px;
  cursor:pointer;
  color:var(--accent-magenta);
  letter-spacing:1px;
}

.cursor-action:hover{
  color:#fff;
  text-shadow:0 0 8px var(--accent-magenta);
}

.view-editor .single-main .hero {
  display: flex;
  align-items: flex-end;
}

.view-editor .single-main .hero > .inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}

/* =========================================================
   EDITOR HERO – ugyanaz a viselkedés, mint régen a single-main alatt
========================================================= */

.editor-panel-left .hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 60vh;
}

.editor-hero-upload-btn,
.image-add-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--brand-yellow);
  border-radius:2px;
  background:rgba(0,0,0,.62);
  color:var(--brand-yellow);
  font:inherit;
  line-height:1;
  cursor:pointer;
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 18px rgba(255,224,102,.22);
  padding:0;
}

.editor-hero-upload-btn{
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;
  width:44px;
  height:44px;
  font-size:30px;
}

.image-add-btn{
  width:26px;
  height:26px;
  font-size:20px;
  margin-top:6px;
}

.image-action-row .image-add-btn{
  margin-top:0;
}

.image-library-btn{
  width:38px;
  font-size:15px;
}

.block-insert-btn{
  width:auto;
  min-width:max-content;
  white-space:nowrap;
  padding:0 8px;
  font-size:var(--editor-font-size);
  background:transparent;
  border:1px solid var(--brand-yellow);
  box-shadow:none;
  color:var(--brand-yellow);
  margin-top:0;
}

.editor-hero-upload-btn:hover,
.image-add-btn:hover{
  color:#000;
  background:var(--brand-yellow);
  box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 0 22px rgba(255,224,102,.45);
}

.block-insert-btn:hover{
  color:var(--brand-yellow);
  background:rgba(255,198,38,.08);
  box-shadow:none;
}

/* =========================
   MEDIA PICKER
========================= */

.cp-media-picker{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,3,20,.82);
}

.cp-media-picker__panel{
  width:min(760px, 100%);
  max-height:calc(100vh - 48px);
  border:2px solid var(--accent-magenta);
  background:var(--bg);
  color:var(--white);
  box-shadow:0 0 32px rgba(255,42,181,.28);
  outline:none;
}

.cp-media-picker__header,
.cp-media-picker__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
}

.cp-media-picker__title{
  color:var(--brand-yellow);
  font-size:var(--editor-font-size);
}

.cp-media-picker__close,
.cp-media-picker__confirm{
  border:1px solid var(--brand-yellow);
  background:rgba(255,198,38,.08);
  color:var(--brand-yellow);
  font:inherit;
  cursor:pointer;
  padding:4px 8px;
}

.cp-media-picker__confirm:disabled{
  opacity:.42;
  cursor:default;
}

.cp-media-picker__close:hover,
.cp-media-picker__confirm:not(:disabled):hover{
  background:var(--brand-yellow);
  color:#000;
}

.cp-media-picker__grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
  max-height:min(560px, calc(100vh - 190px));
  overflow-y:auto;
  padding:0 14px 14px;
  scrollbar-color:var(--accent-magenta) var(--bg);
}

.cp-media-picker__item{
  position:relative;
  aspect-ratio:1 / 1;
  min-width:0;
  border:1px solid var(--link-cyan);
  background:#050517;
  color:var(--white);
  cursor:pointer;
  overflow:hidden;
  padding:0;
}

.cp-media-picker__item.is-deleting{
  opacity:.42;
  pointer-events:none;
}

.cp-media-picker__item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.cp-media-picker__item span{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  overflow:hidden;
  padding:4px;
  background:rgba(0,3,20,.76);
  color:var(--brand-yellow);
  font-size:12px;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cp-media-picker__delete{
  position:absolute;
  top:3px;
  right:3px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border:1px solid #ff003c;
  background:rgba(0,3,20,.82);
  color:#ff003c;
  font:inherit;
  line-height:1;
  cursor:pointer;
  padding:0;
}

.cp-media-picker__delete:hover{
  background:#ff003c;
  color:#000;
}

.cp-media-picker__item:hover,
.cp-media-picker__item.is-selected{
  border-color:var(--accent-magenta);
  box-shadow:0 0 0 2px var(--accent-magenta);
}

.cp-media-picker__hint,
.cp-media-picker__empty{
  color:#737373;
}

.cp-media-picker__empty{
  grid-column:1 / -1;
  padding:28px 0;
  text-align:center;
}

.editor-panel-left .hero > .inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  padding-bottom: 18px;
}

/* EDITORBAN finomabb shadow */
#editor-hero.hero-text-shadow_30::before {
  background: linear-gradient(
      to bottom,
      rgba(0, 3, 20, 0.0) 0%,
      rgba(0, 3, 20, 0.3) 90%,
      rgba(0, 3, 20, 0.5) 94%,
      rgba(0, 3, 20, 0.6) 100%
  );
}

.gallery-block-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.gallery-block-options > .block-variant { width: auto; max-width: 100%; min-width: 0; margin: 0; flex: 0 1 auto; }
.gallery-block-options > [hidden] { display: none; }