.system-cms-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 9000; display: inline-flex; align-items: center; gap: 9px;
  min-height: 48px; padding: 0 18px; border: 1px solid rgba(173,235,223,.25); border-radius: 999px;
  color: #effaf8; background: rgba(7,20,20,.72); box-shadow: 0 20px 60px rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(20px) saturate(130%); backdrop-filter: blur(20px) saturate(130%); cursor: pointer;
}
.system-cms-launcher span { color: #8ef2dc; font-size: 20px; }
.system-cms-open { overflow: hidden; }
.system-cms {
  --cms-line: rgba(196,235,227,.12); --cms-ink: #eff8f6; --cms-muted: rgba(215,233,229,.54); --cms-aqua: #8ef2dc;
  position: fixed; inset: 0; z-index: 9500; display: none; color: var(--cms-ink);
  background: radial-gradient(circle at 82% 6%,rgba(75,160,148,.16),transparent 27%),linear-gradient(145deg,#050a0b,#081112 48%,#030707);
}
.system-cms.is-open { display: grid; grid-template-rows: auto 1fr; }
.system-cms > header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; padding: 20px 28px;
  border-bottom: 1px solid var(--cms-line); background: rgba(5,12,13,.64); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.system-cms > header p { margin: 0 0 5px; color: rgba(142,242,220,.46); font: 500 9px/1 ui-monospace,monospace; letter-spacing: .18em; }
.system-cms > header h1 { margin: 0; font-size: clamp(24px,3vw,40px); line-height: 1; font-weight: 520; letter-spacing: -.04em; }
.system-cms-header-actions { display: flex; align-items: center; gap: 10px; }
.system-cms-header-actions button, .system-cms button {
  min-height: 38px; padding: 0 13px; border: 1px solid var(--cms-line); border-radius: 10px;
  color: rgba(235,247,244,.78); background: rgba(17,31,31,.52); cursor: pointer;
}
.system-cms-header-actions [data-save] { color: #04110e; border-color: var(--cms-aqua); background: var(--cms-aqua); font-weight: 650; }
.system-cms-header-actions [data-save][data-dirty="true"] { box-shadow: 0 0 0 4px rgba(142,242,220,.09),0 0 30px rgba(142,242,220,.16); }
.system-cms-header-actions [data-close] { width: 42px; padding: 0; border-radius: 50%; font-size: 24px; }
.system-cms-message { max-width: 340px; color: var(--cms-muted); font-size: 11px; }
.system-cms-message[data-kind="error"] { color: #ffadad; }
.system-cms-message[data-kind="warning"] { color: #ffd18a; }
.system-cms-message[data-kind="success"] { color: var(--cms-aqua); }
.system-cms-layout { display: grid; grid-template-columns: 320px minmax(0,1fr); min-height: 0; }
.system-cms-layout > aside { min-height: 0; overflow: auto; padding: 18px; border-right: 1px solid var(--cms-line); }
.system-cms-list-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.system-cms-list { display: grid; gap: 3px; }
.system-cms-list > button {
  display: grid; grid-template-columns: 30px minmax(0,1fr) 8px; gap: 10px; align-items: center;
  width: 100%; min-height: 68px; padding: 10px; border-color: transparent; text-align: left; background: transparent;
}
.system-cms-list > button:is(:hover,.is-active) { border-color: rgba(142,242,220,.15); background: rgba(142,242,220,.055); }
.system-cms-order { color: rgba(142,242,220,.4); font: 500 10px/1 ui-monospace,monospace; }
.system-cms-item-copy { display: grid; gap: 5px; min-width: 0; }
.system-cms-item-copy b, .system-cms-item-copy small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.system-cms-item-copy b { color: rgba(240,249,247,.88); font-size: 13px; }
.system-cms-item-copy small { color: var(--cms-muted); font-size: 10px; }
.system-cms-list i { width: 7px; height: 7px; border-radius: 50%; background: #8c9895; }
.system-cms-list i[data-status="published"] { background: var(--cms-aqua); box-shadow: 0 0 12px rgba(142,242,220,.56); }
.system-cms-layout > main { min-height: 0; overflow: auto; padding: 18px clamp(18px,4vw,64px) 80px; }
.system-cms-toolbar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.system-cms-toolbar [data-delete] { color: #ffb4b4; }
.system-cms-form { display: grid; gap: 20px; max-width: 1180px; margin: 0 auto; }
.system-cms-media { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(220px,.6fr); gap: 18px; padding: 16px; border: 1px solid var(--cms-line); border-radius: 22px; background: rgba(13,25,25,.4); }
.system-cms-preview { grid-row: span 2; display: grid; place-items: center; min-height: 320px; overflow: hidden; border-radius: 15px; color: var(--cms-muted); background: #030708; }
.system-cms-preview img, .system-cms-preview video { width: 100%; height: 100%; max-height: 520px; object-fit: cover; }
.system-cms-upload-grid { display: grid; gap: 10px; align-content: start; }
.system-cms-upload-grid label { display: grid; gap: 7px; padding: 14px; border: 1px dashed rgba(142,242,220,.2); border-radius: 13px; color: rgba(227,240,237,.74); font-size: 12px; }
.system-cms-upload-grid input { max-width: 100%; color: var(--cms-muted); font-size: 10px; }
.system-cms-media > p { margin: 0; color: var(--cms-muted); font-size: 10px; line-height: 1.6; }
.system-cms-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.sys-field { display: grid; gap: 7px; }
.sys-field-wide { grid-column: 1 / -1; }
.sys-field > span { color: var(--cms-muted); font-size: 10px; }
.sys-field input, .sys-field textarea, .system-cms-switches select, .system-link-row input {
  width: 100%; box-sizing: border-box; border: 1px solid var(--cms-line); border-radius: 11px; color: var(--cms-ink); background: rgba(11,22,22,.58); outline: 0;
}
.sys-field input, .system-cms-switches select, .system-link-row input { min-height: 42px; padding: 0 12px; }
.sys-field textarea { padding: 12px; resize: vertical; line-height: 1.6; }
.sys-field :is(input,textarea):focus, .system-link-row input:focus { border-color: rgba(142,242,220,.48); box-shadow: 0 0 0 3px rgba(142,242,220,.05); }
.system-cms-switches { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; padding: 14px 0; }
.system-cms-switches label { display: inline-flex; align-items: center; gap: 9px; color: rgba(232,244,241,.72); font-size: 12px; }
.system-cms-switches select { width: auto; }
.system-cms-links { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--cms-line); border-radius: 18px; background: rgba(12,23,23,.34); }
.system-cms-links > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 6px; }
.system-cms-links > div:first-child > div { display: grid; gap: 4px; }
.system-cms-links small { color: var(--cms-muted); font-size: 10px; }
.system-link-row { display: grid; grid-template-columns: minmax(140px,.38fr) minmax(240px,1fr) auto; gap: 8px; }
.system-link-row button { color: #ffb4b4; }
@media (max-width: 850px) {
  .system-cms > header { align-items: flex-start; flex-direction: column; }
  .system-cms-header-actions { width: 100%; flex-wrap: wrap; }
  .system-cms-message { order: 3; width: 100%; max-width: none; }
  .system-cms-layout { grid-template-columns: 1fr; overflow: auto; }
  .system-cms-layout > aside { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--cms-line); }
  .system-cms-layout > main { overflow: visible; }
  .system-cms-media { grid-template-columns: 1fr; }
  .system-cms-preview { grid-row: auto; min-height: 240px; }
}
@media (max-width: 560px) {
  .system-cms-launcher { right: 12px; bottom: 12px; }
  .system-cms > header { padding: 16px; }
  .system-cms-fields { grid-template-columns: 1fr; }
  .sys-field-wide { grid-column: 1; }
  .system-cms-switches { align-items: flex-start; flex-direction: column; }
  .system-link-row { grid-template-columns: 1fr; }
}