/* Website Editor (#/editor) + editable content blocks + edit-mode outlines in the preview frame */

/* announcement bar & submenu */
.announce { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 8px 16px; color: #fff; font-weight: 600; font-size: 14.5px; text-align: center;
  background: linear-gradient(90deg, #1f6bff, #19b6ff); box-shadow: 0 0 18px rgba(47, 139, 255, .6); position: relative; z-index: 2; }
.announce.gold { background: linear-gradient(90deg, #ffc21a, #ff8a1f); color: #2a1600; }
.announce.red { background: linear-gradient(90deg, #ff3651, #c40f2b); }
.announce.green { background: linear-gradient(90deg, #18c964, #0b8a43); }
.announce.purple { background: linear-gradient(90deg, #8b3dff, #d63cff); }
.announce a { text-decoration: underline; font-weight: 700; }
.nav-sub { z-index: 120; }

/* content blocks (home page + custom pages) */
.lc-sections { display: grid; gap: 16px; }
.lc-block .lc-bt { font-size: 28px; margin-bottom: 8px; }
.lc-block .lc-bp { line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; margin: 0 0 12px; }
.lc-it { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: center; }
.lc-it.right .lc-img { order: 2; }
.lc-img { border-radius: 14px; overflow: hidden; min-height: 220px; display: grid; place-items: center; background: linear-gradient(140deg, #1f6bff, #8b3dff); color: rgba(255, 255, 255, .7); font-size: 60px; box-shadow: 0 10px 24px rgba(6, 13, 43, .2); }
.lc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.lc-card { display: grid; gap: 6px; padding: 16px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 8px 18px rgba(6, 13, 43, .18), 0 0 16px color-mix(in srgb, var(--c1) 40%, transparent); }
.lc-card > i { font-size: 28px; }
.lc-card b { font: 700 19px var(--font-d); }
.lc-card span { font-size: 14px; opacity: .92; }
.lc-cta { text-align: center; padding: 34px 20px; border-radius: 20px; color: #fff; background: radial-gradient(ellipse at 30% 0%, #3047c4, #11206a 55%, #2a1a80); box-shadow: 0 0 30px rgba(47, 139, 255, .35); }
.lc-cta h2 { font-size: clamp(26px, 3vw, 40px); }
.lc-cta p { font-size: 18px; opacity: .92; }
.lc-cta .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lc-faq { border-bottom: 1px solid var(--line); padding: 12px 4px; }
.lc-faq summary { cursor: pointer; font-weight: 700; font-size: 16px; }
.lc-faq p { color: var(--ink-2); margin: 8px 0 0; }

/* outlines inside the editor's preview frame */
.lc-editing [data-edit] { outline: 2px dashed rgba(25, 211, 255, .55); outline-offset: 2px; cursor: pointer !important; transition: outline-color .15s, background .15s; }
.lc-editing [data-edit]:hover { outline: 2px solid #19d3ff; background-color: rgba(25, 211, 255, .1); }
.lc-editing [data-kind="section"] { outline-style: dotted; outline-color: rgba(214, 60, 255, .5); }
.lc-editing [data-kind="section"]:hover { outline-color: #d63cff; }
.lc-editing #ai-fab { display: none; }

/* editor layout */
.lce { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: 330px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "top top top" "left stage right";
  color: #e8f0ff; background: radial-gradient(ellipse at 50% 0%, rgba(47, 90, 230, .35), transparent 60%), #040a26; }
.lce-top { grid-area: top; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 14px; background: linear-gradient(90deg, #071242, #0e1d6b 50%, #3a2a8a); border-bottom: 2px solid rgba(80, 160, 255, .6); box-shadow: 0 0 22px rgba(47, 139, 255, .4); }
.lce-brand { display: flex; gap: 8px; align-items: center; font: 800 20px var(--font-d); }
.lce-brand img { width: 40px; height: 28px; }
.lce-page { display: flex; gap: 8px; align-items: center; background: rgba(6, 13, 43, .6); border: 1px solid rgba(120, 160, 255, .45); border-radius: 10px; padding: 4px 8px; }
.lce-page select { background: transparent; color: #fff; border: 0; outline: 0; max-width: 260px; font-weight: 600; }
.lce-page option, .lce-page optgroup { background: #0a1650; }
.lce-dev { display: flex; background: rgba(6, 13, 43, .6); border: 1px solid rgba(120, 160, 255, .45); border-radius: 10px; overflow: hidden; }
.lce-dev button { border: 0; background: transparent; color: #cfdcff; padding: 7px 11px; cursor: pointer; display: flex; gap: 6px; align-items: center; font-weight: 600; }
.lce-dev button.on { background: linear-gradient(135deg, #1a47c4, #2f8bff); color: #fff; }
.lce-status { font-size: 13px; color: #cfdcff; margin-left: auto; }
.lce-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.lce-left { grid-area: left; display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 0; border-right: 1px solid rgba(80, 150, 255, .3); background: rgba(6, 13, 43, .55); }
.lce-tabs { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; overflow-y: auto; border-right: 1px solid rgba(80, 150, 255, .2); }
.lce-tabs button { border: 0; background: transparent; color: #a9bbea; padding: 8px 2px; border-radius: 10px; cursor: pointer; display: grid; justify-items: center; gap: 3px; font-size: 10.5px; line-height: 1.1; text-align: center; }
.lce-tabs button i { font-size: 17px; }
.lce-tabs button.on, .lce-tabs button:hover { background: rgba(47, 139, 255, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(120, 180, 255, .5); }
.lce-tabs button.on i { color: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }
.lce-panel { overflow-y: auto; padding: 12px 12px 30px; min-width: 0; }
.lce-panel h3, .lce-insp h3 { font-size: 20px; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.lce-panel details { border: 1px solid rgba(120, 160, 255, .25); border-radius: 12px; padding: 8px 10px; margin: 8px 0; background: rgba(8, 20, 70, .5); }
.lce-panel summary { cursor: pointer; font-weight: 700; }
.lce-stage { grid-area: stage; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding: 12px; gap: 8px; justify-items: center; overflow: auto; }
.lce-frame-wrap { width: 100%; height: 100%; min-height: 0; border-radius: 14px; overflow: hidden; transition: width .35s ease; box-shadow: 0 0 0 2px rgba(80, 160, 255, .55), 0 0 30px rgba(47, 139, 255, .35); background: #040a26; }
.lce-frame { width: 100%; height: 100%; border: 0; display: block; background: #040a26; }
.lce-hint { font-size: 12.5px; color: #a9bbea; text-align: center; }
.lce-hint i { color: var(--cyan); margin-right: 6px; }
.lce-right { grid-area: right; overflow-y: auto; border-left: 1px solid rgba(80, 150, 255, .3); background: rgba(6, 13, 43, .55); }
.lce-insp { padding: 14px; display: grid; gap: 10px; align-content: start; }
.lce-tips { padding-left: 18px; margin: 0; display: grid; gap: 6px; font-size: 13.5px; color: #cfdcff; }
.lce-path { font-size: 11.5px; color: #8fb2ff; background: rgba(6, 13, 43, .7); padding: 3px 6px; border-radius: 6px; word-break: break-all; }
.lce .input, .lce select.input, .lce textarea.input { width: 100%; padding: 8px 10px; border-radius: 10px; background: rgba(6, 13, 43, .7); color: #fff; border: 1px solid rgba(120, 160, 255, .4); font: inherit; font-size: 14px; }
.lce .input.bad { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255, 54, 81, .25); }
.lce-f { display: grid; gap: 4px; margin: 6px 0; }
.lce-f label, .lce-inline { font-size: 12.5px; color: #a9bbea; font-weight: 600; }
.lce-inline { display: inline-flex; gap: 6px; align-items: center; }
.lce-inline select { width: auto; }
.lce-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.lce-sub { display: block; margin: 12px 0 4px; font: 700 15px var(--font-d); color: #9fd2ff; }
.lce .check { color: #dfe9ff; font-size: 13.5px; margin: 6px 0; }
.lce-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 4px; max-height: 120px; overflow-y: auto; padding: 4px; background: rgba(6, 13, 43, .5); border-radius: 10px; }
.lce-icons button { border: 1px solid transparent; background: rgba(255, 255, 255, .05); color: #dfe9ff; border-radius: 8px; height: 30px; cursor: pointer; }
.lce-icons button.on { border-color: var(--cyan); background: rgba(25, 211, 255, .2); box-shadow: 0 0 8px rgba(25, 211, 255, .6); }
.lce-list { display: grid; gap: 6px; }
.lce-item { border-radius: 12px; background: rgba(8, 20, 70, .75); border: 1px solid rgba(120, 160, 255, .35); }
.lce-item.is-hidden { opacity: .55; }
.lce-item.dragging { opacity: .4; }
.lce-item.over { box-shadow: 0 -3px 0 var(--cyan); }
.lce-item.flash { animation: flash 1.2s ease 2; }
@keyframes flash { 50% { box-shadow: 0 0 0 2px #d63cff, 0 0 18px #d63cff; } }
.lce-item-h { display: flex; gap: 8px; align-items: center; padding: 7px 8px; font-size: 13.5px; min-width: 0; }
.lce-item-h b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.lce-grip { cursor: grab; color: #6f86c7; }
.lce-item-acts { display: flex; gap: 2px; flex-shrink: 0; }
.lce-item-acts button { border: 0; background: transparent; color: #a9bbea; width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.lce-item-acts button:hover { background: rgba(47, 139, 255, .3); color: #fff; }
.lce-item-b { padding: 4px 10px 10px; border-top: 1px solid rgba(120, 160, 255, .2); }
.lce-add { margin-top: 8px; }
.lce-addblock { margin-top: 12px; padding: 10px; border-radius: 12px; border: 1px dashed rgba(25, 211, 255, .55); background: rgba(25, 211, 255, .06); }
.lce-addblock div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.lce-imgprev { height: 150px; border-radius: 12px; overflow: hidden; background: rgba(6, 13, 43, .7); display: grid; place-items: center; color: #5a6a9a; font-size: 30px; text-align: center; border: 1px solid rgba(120, 160, 255, .35); }
.lce-imgprev span { font-size: 12px; display: block; }
.lce-imgprev img { width: 100%; height: 100%; object-fit: cover; }
.lce-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.lce-thumb { margin: 0; border-radius: 12px; overflow: hidden; background: rgba(8, 20, 70, .8); border: 1px solid rgba(120, 160, 255, .35); display: grid; }
.modal .lce-thumb { background: #f4f7ff; border-color: var(--line); color: var(--ink); }
.lce-thumb img { width: 100%; height: 100px; object-fit: cover; cursor: pointer; display: block; }
.lce-thumb figcaption { padding: 6px 8px 0; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lce-thumb figcaption small { display: block; opacity: .7; }
.lce-thumb-acts { display: flex; gap: 4px; padding: 6px 8px 8px; }
.lce-crop { width: 100%; height: auto; border-radius: 12px; background: #050b26; touch-action: none; cursor: grab; margin: 8px 0; }
.lce-ver { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: rgba(8, 20, 70, .7); border: 1px solid rgba(120, 160, 255, .3); margin-bottom: 6px; }
.lce-ver small { display: block; color: #a9bbea; font-size: 12px; }
@media (max-width: 1180px) {
  .lce { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "top top" "left stage" "right right"; grid-template-rows: auto minmax(0, 1fr) auto; }
  .lce-right { max-height: 32vh; border-left: 0; border-top: 1px solid rgba(80, 150, 255, .3); }
}
@media (max-width: 760px) {
  .lce { position: static; display: flex; flex-direction: column; min-height: 100vh; }
  .lce-left { grid-template-columns: minmax(0, 1fr); }
  .lce-tabs { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(80, 150, 255, .2); }
  .lce-tabs button { min-width: 64px; }
  .lce-panel { max-height: 50vh; }
  .lce-stage { height: 70vh; }
  .lce-dev span, .lce-acts .btn span { display: none; }
  .lc-it { grid-template-columns: minmax(0, 1fr); }
  .lc-it.right .lc-img { order: 0; }
}