/* ILUZ — site-level styles layered on top of the Creativeans design system. */

/* ---------- Brand overrides ---------- */
body { margin: 0; background: #010108; color: #F3F6FD; }
:root {
  --cv-gradient-hero:
    radial-gradient(30% 40% at 12% 20%, #07BDF4 0%, transparent 70%),
    radial-gradient(30% 40% at 90% 30%, #9030EF 0%, transparent 70%),
    radial-gradient(40% 30% at 55% 100%, #2F77FF 0%, transparent 70%);
  --cv-aqua-soft: #07BDF4;
}
[data-iluz] { position: relative; min-height: 100dvh; overflow-x: clip; background: #010108; }
[data-iluz] h1 em, [data-iluz] h2 em { color: #9FE6FF; }
[data-iluz] h1 { font-family: "Syne", var(--cv-font-body), sans-serif !important; font-weight: 600 !important; letter-spacing: -0.03em !important; line-height: 1.02 !important; }
[data-iluz] h1 em { font-style: normal; }
[data-iluz] h1 span { top: 0 !important; }
[data-iluz] figure { box-shadow: 0 0 0 1px rgb(47 119 255 / 0.18), 0 20px 60px -20px rgb(117 68 253 / 0.35); }

/* Memogram has no Romanian diacritics: route those code points to a serif fallback. */
@font-face { font-family: "memogram-ro"; src: local("Georgia"), local("Times New Roman"), local("Liberation Serif"), local("Didot"); unicode-range: U+0102-0103, U+00C2, U+00E2, U+00CE, U+00EE, U+0218-021B, U+015E-015F, U+0162-0163; size-adjust: 110%; }
@font-face { font-family: "memogram-ro"; font-style: italic; src: local("Georgia Italic"), local("Times New Roman Italic"), local("Liberation Serif Italic"), local("Didot Italic"); unicode-range: U+0102-0103, U+00C2, U+00E2, U+00CE, U+00EE, U+0218-021B, U+015E-015F, U+0162-0163; size-adjust: 110%; }
:root { --cv-font-display: "memogram-ro", "memogram", "memogram Fallback", "Didot", "Bodoni MT", Georgia, serif; }
/* rich() marks those letters .dia; only Memogram text needs them lowered to its baseline. */
.dia { position: relative; }
:is(.title, .cv-display, .cv-hero-title, .cv-wonder-title, .cv-section-title, .cv-cta-title, .cv-page-title, .cv-quote, .cv-benefit-text, .cv-card__title, .cv-accordion__summary, .cv-stat__value, .cv-testimonial__heading, .cv-footer__heading, .cv-prose h2, .cv-prose h3, .cv-prose h4) .dia { top: 0.2em; }
[data-iluz] h1 .dia { top: 0; }

/* Cards in a row stretch to the tallest one; the inner panel must stretch too, or the
   spinning gradient border shows through underneath as a bar (dark on hover). */
.cv-gradient-card { display: flex; flex-direction: column; }
.cv-gradient-card__inner { flex: 1 1 auto; }
.edit-item > .cv-gradient-card { height: 100%; }

a { color: var(--cv-fg); text-decoration: none; }
a:hover { color: #07BDF4; }

/* ---------- Page transitions ---------- */
@keyframes mv-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
[data-pagebody] { animation: mv-enter 800ms var(--cv-ease-out) both; transition: opacity 420ms var(--cv-ease), transform 420ms var(--cv-ease); }
[data-fading="true"] [data-pagebody] { opacity: 0; transform: translateY(10px); }

/* ---------- Layout helpers ---------- */
.stack { display: grid; gap: 1.5rem; }
.stack--sm { gap: 1rem; }
.stack--md { gap: 1.25rem; }
.stack--lg { gap: 2.5rem; }
.stack--xl { gap: 3rem; }
.page-head { display: grid; gap: 1.25rem; max-width: 46rem; }
.page-top { padding-top: 3.5rem; }
.measure { max-width: 40rem; }

[data-split] { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem 4rem; align-items: start; }
[data-bento] { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
[data-bento] > * { min-width: 0; }
@media (max-width: 60rem) {
  [data-bento] > * { grid-column: span 12 !important; }
  [data-split] { grid-template-columns: minmax(0, 1fr) !important; }
}

.auto-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 14rem)), 1fr)); }
.auto-grid--stretch { align-items: stretch; }
.narrow-60 { width: min(100%, 60rem); margin-inline: auto; }
.narrow-64 { width: min(100%, 64rem); margin-inline: auto; }

.row-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; }
.row-center { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.list-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--cv-line-soft); padding-bottom: 1rem; }

/* ---------- Home hero ---------- */
.hero { position: relative; background: radial-gradient(120% 80% at 50% 0%, #070826 0%, #010108 70%); padding: 9rem clamp(1.5rem, 5vw, 5rem) 5rem; overflow: hidden; }
.hero__glow { position: absolute; inset: -20%; background: var(--cv-gradient-hero); filter: blur(90px); opacity: 0.45; pointer-events: none; }
.hero__grid[data-split] { position: relative; max-width: 80rem; margin: 0 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }

.band { border-top: 1px solid rgb(7 189 244 / 0.35); border-bottom: 1px solid rgb(144 48 239 / 0.35); box-shadow: 0 0 24px -6px rgb(47 119 255 / 0.5); padding: 1.25rem 0; }

/* Laptop + phone device mockup (apps / sites hero) */
.devices { position: relative; padding: 0 14% 16% 0; }
.devices__laptop { border-radius: 1.25rem; padding: 0.375rem; background: #05061A; border: 1px solid var(--cv-line); }
.devices__screen { position: relative; aspect-ratio: 16 / 10; border-radius: 0.875rem; overflow: hidden; background: #010108; }
.devices__base { height: 0.75rem; margin: 0 5%; background: #07081A; border: 1px solid var(--cv-line-soft); border-top: 0; border-radius: 0 0 0.875rem 0.875rem; }
.devices__phone { position: absolute; right: 0; bottom: 0; width: 31%; }
.devices__phone-shell { border-radius: 2rem; padding: 0.375rem; background: #05061A; border: 1px solid var(--cv-line); box-shadow: var(--cv-shadow-card); }
.devices__phone-screen { position: relative; aspect-ratio: 9 / 19.5; border-radius: 1.625rem; overflow: hidden; background: #010108; }

/* Screenshot slot: real image, or an empty placeholder until one exists */
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.shot--empty { display: grid; place-items: center; align-content: center; gap: 0.5rem; background: rgba(127, 127, 127, 0.08); color: var(--cv-fg); font: 13px/1.3 system-ui, -apple-system, sans-serif; text-align: center; padding: 1rem; box-sizing: border-box; }
.shot--empty::before { content: ""; position: absolute; inset: 0.5rem; border: 1.5px dashed currentColor; border-radius: inherit; opacity: 0.3; pointer-events: none; }
.shot--empty span { opacity: 0.75; }

/* ---------- Media cards (video / project figures) ---------- */
.media-card { margin: 0; display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; background: #07081A; border: 1px solid var(--cv-line-soft); cursor: pointer; }
.media-card--xl { border-radius: 2rem; }
.media-card--intro { display: block; border-radius: 2rem; background: #010108; border-color: var(--cv-line); }
.media-card__frame { position: relative; background: #010108; aspect-ratio: var(--ratio, 16 / 9); }
.media-card__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card__overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1rem; background: linear-gradient(to top, rgb(5 5 5 / 0.7), transparent 45%); }
.media-card__overlay--lg { padding: 1.5rem; }
.media-card--intro .media-card__overlay { background: linear-gradient(to top, rgb(5 5 5 / 0.72), transparent 55%); }

.media-card__caption { padding: 1rem 1.25rem 1.25rem; display: grid; gap: 0.375rem; }
.media-card__caption--split { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.375rem 1rem; }
.media-card__caption--lead { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; }
.media-card__caption--lead > :last-child { margin-left: auto; }

.sound-tag { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--cv-font-body); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: #EBEBE6; }
.sound-tag--lg { gap: 0.625rem; }
.sound-tag__ring { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid #EBEBE6; }

/* ---------- Display type ---------- */
.title { margin: 0; font-family: var(--cv-font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.25; }
.title--md { font-size: 1.5rem; }
.title--lg { font-size: 1.75rem; line-height: 1.2; }
.title--balance { text-wrap: balance; }
.highlight-title { margin: 0.75rem 0 0.5rem; }

/* ---------- Page-specific blocks ---------- */
.home-work { padding-bottom: 6rem; }
.home-cta { padding-bottom: 4rem; }
.home-cta h3 { max-width: 24ch; margin: 0; }

.lookbook { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: 1rem; border: 1px solid var(--cv-line-soft); background: #05061A; }

.service-cell { display: flex; min-width: 0; }
.service-cell > * { width: 100%; height: 100%; }
.tag-row { margin-top: 1.5rem; }

.tier { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.tier__features { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.tier .tier__features { margin-top: 0.5rem; }
.tier__features li { display: flex; gap: 0.75rem; align-items: flex-start; font-family: var(--cv-font-body); font-size: 0.9375rem; line-height: 1.5; }
.tier__features li > svg { flex: none; margin-top: 0.2rem; }
.tier__cta { margin-top: auto; padding-top: 1rem; }
.tier__cta--plain { margin-top: 1.5rem; padding-top: 0; }
.full-height { height: 100%; }

.channels { display: grid; gap: 0.25rem; }
.channel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--cv-sand-light); color: var(--cv-warm-dark); }
.channel > span { display: grid; gap: 0.25rem; min-width: 0; }
.channel > svg { flex: none; }
.channel__label { font-family: var(--cv-font-body); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cv-bronze); }
.channel__value { font-family: var(--cv-font-body); font-size: 1rem; line-height: 1.5; color: var(--cv-warm-dark); }
.channels__response { display: grid; gap: 0.25rem; padding-top: 1rem; }

.fact { display: grid; gap: 0.375rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--cv-line-soft); }

.site-footer { padding: 0 clamp(1.5rem, 5vw, 5rem) 7rem; }

/* ---------- Animated backdrops (all three sides) ---------- */
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
/* The canvas carries the page colour (same #010108 as Video), since the wrappers above it are transparent. */
.side-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #010108; animation: backdrop-in 900ms var(--cv-ease-out) both; }
/* Let the canvas show through the page wrappers; cards stay opaque for legibility. */
[data-iluz][data-side] { background: transparent; z-index: 1; }
/* The original Video hero tint, made see-through so the backdrop still shows. */
[data-side] .hero { background: radial-gradient(120% 80% at 50% 0%, rgb(7 8 38 / 0.8) 0%, rgb(1 1 8 / 0) 70%); }

/* Apps: a dark halo around every glyph of page text, so it never merges with the letter field. */
[data-side="apps"] [data-pagebody] { text-shadow: 0 0 2px #010108, 0 0 8px #010108, 0 0 16px rgb(1 1 8 / 0.9); }
[data-side="apps"] .hero__grid > :first-child { position: relative; isolation: isolate; }
[data-side="apps"] .hero__grid > :first-child::before { content: ""; position: absolute; inset: -2rem -3rem; z-index: -1; background: radial-gradient(closest-side, rgb(1 1 8 / 0.78), transparent); pointer-events: none; }
/* On phones the text column fills the screen, so a full scrim would hide the whole backdrop. */
@media (max-width: 40rem) {
  [data-side="apps"] .hero__grid > :first-child::before { opacity: 0.45; }
  [data-side] .hero { background: radial-gradient(120% 60% at 50% 0%, rgb(7 8 38 / 0.6) 0%, rgb(1 1 8 / 0) 70%); }
  [data-side="apps"] [data-pagebody] { text-shadow: 0 0 2px #010108, 0 0 8px #010108; }
}

/* Sites: same colours as Video; only a light halo so text stays crisp over the grid. */
[data-side="sites"] [data-pagebody] { text-shadow: 0 0 6px #010108; }

/* ---------- Sign-in button (header) ---------- */
.account-btn { position: relative; font-size: 1.125rem; }
.account-btn.is-signed-in::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #07BDF4; box-shadow: 0 0 0 2px #010108, 0 0 10px #07BDF4; }

/* ---------- Side toggle (Video / Apps / Sites) ---------- */
.side-toggle { position: fixed; left: 0; right: 0; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 9990; display: flex; justify-content: center; pointer-events: none; padding-inline: 1rem; }
.side-toggle > * { pointer-events: auto; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 10050; background: rgb(5 5 5 / 0.85); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3.5rem); }
.lightbox__panel { width: min(68rem, 100%); display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: 1rem; background: #05061A; border: 1px solid var(--cv-line); box-sizing: border-box; }
.lightbox__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.lightbox__head > div { display: grid; gap: 0.375rem; }
.lightbox video { width: auto; max-width: 100%; max-height: 72vh; margin-inline: auto; border-radius: 0.625rem; background: #010108; display: block; }

@media (prefers-reduced-motion: reduce) {
  [data-pagebody] { animation: none !important; transition: none !important; }
}

/* ---------- Account menu (signed-in admin) ---------- */
.account-menu { position: fixed; z-index: 10020; top: 4.75rem; right: clamp(1rem, 4vw, 4rem); min-width: 13.5rem; padding: 0.375rem; border-radius: 1rem; background: #05061A; border: 1px solid rgb(47 119 255 / 0.35); box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.8), 0 0 30px -10px rgb(7 189 244 / 0.35); display: grid; animation: backdrop-in 160ms ease-out both; }
.account-menu > * { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border: 0; border-radius: 0.625rem; background: none; color: #F3F6FD; font: 500 0.9375rem/1.2 var(--cv-font-body), system-ui, sans-serif; text-align: left; cursor: pointer; }
.account-menu > *:hover, .account-menu > *:focus-visible { background: rgb(7 189 244 / 0.12); color: #9FE6FF; outline: none; }
.account-menu > *:disabled { opacity: 0.45; cursor: default; background: none; }
.account-menu__icon { width: 1.25rem; text-align: center; color: #07BDF4; }

/* ---------- Edit mode ---------- */
/* Editable text: a faint dashed outline on hover, a solid aqua one while typing. */
[data-edit] { cursor: text; border-radius: 4px; outline: 1px dashed transparent; outline-offset: 3px; transition: outline-color 120ms, background-color 120ms; min-width: 1ch; }
[data-edit]:hover { outline-color: rgb(7 189 244 / 0.55); }
[data-edit]:focus { outline: 2px solid #07BDF4; background: rgb(7 189 244 / 0.08); }
[data-edit]:empty::before { content: attr(data-placeholder); opacity: 0.4; font-style: italic; }
[data-editing] [data-pagebody] { animation: none; }

/* List items get move / delete buttons in the top-right corner. */
.edit-item { position: relative; min-width: 0; }
.edit-item--fill { display: flex; flex-direction: column; }
.edit-item--fill > :first-child { flex: 1; }
.edit-item--inline { display: inline-flex; align-items: center; gap: 0.5rem; }
li.edit-item--inline { display: flex; align-items: flex-start; gap: 0.75rem; }
.edit-tools { position: absolute; z-index: 5; top: -0.75rem; right: -0.5rem; display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: #05061A; border: 1px solid rgb(7 189 244 / 0.5); box-shadow: 0 6px 18px -6px rgb(0 0 0 / 0.8); opacity: 0; pointer-events: none; transition: opacity 120ms; }
.edit-item:hover > .edit-tools, .edit-item:focus-within > .edit-tools, .edit-para:hover > .edit-tools, .edit-para:focus-within > .edit-tools { opacity: 1; pointer-events: auto; }
.edit-tools button { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; color: #9FE6FF; font: 600 0.9rem/1 system-ui, sans-serif; cursor: pointer; }
.edit-tools button:hover { background: rgb(7 189 244 / 0.18); color: #fff; }
.edit-item--inline > .edit-tools { top: -1.6rem; right: auto; left: 0; }
/* Touch screens have no hover, so the buttons stay visible. */
@media (hover: none) { .edit-tools { opacity: 0.9; pointer-events: auto; } }

.edit-para { position: relative; }
.edit-tools--para { top: 0; right: auto; left: calc(100% + 0.5rem); flex-direction: column; }
@media (max-width: 60rem) { .edit-tools--para { left: auto; right: 0; top: -1.9rem; flex-direction: row; } }

/* "+ Add" buttons at the end of lists. */
.edit-add { justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 1rem; border-radius: 999px; border: 1px dashed rgb(7 189 244 / 0.6); background: rgb(7 189 244 / 0.06); color: #9FE6FF; font: 500 0.875rem/1 var(--cv-font-body), system-ui, sans-serif; cursor: pointer; }
.edit-add:hover { background: rgb(7 189 244 / 0.16); color: #fff; }
.edit-add--small { padding: 0.4rem 0.75rem; font-size: 0.8125rem; }
.edit-add--tile { justify-self: stretch; align-self: stretch; justify-content: center; min-height: 10rem; border-radius: 1rem; font-size: 1rem; }

/* The ticker stands still while editing. */
.edit-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 3.25rem; padding: 0.75rem clamp(1rem, 4vw, 3rem) 0.25rem; color: #EBEBE6; }
.edit-band__term > .edit-tools { font-size: 1rem; }

/* Media toolbar over videos and screenshots. */
.edit-media { position: absolute; z-index: 4; top: 0.75rem; left: 0.75rem; right: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.375rem; pointer-events: none; }
.edit-media > * { pointer-events: auto; }
.edit-media--second { top: 3.5rem; }
.edit-media--compact { top: 0.5rem; left: 0.375rem; right: 0.375rem; }
.edit-media--compact .edit-media__main { padding: 0.375rem 0.5rem; font-size: 0.6875rem; }
.edit-media__main, .edit-flag { padding: 0.5rem 0.75rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.25); background: rgb(1 1 8 / 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #F3F6FD; font: 600 0.75rem/1 var(--cv-font-body), system-ui, sans-serif; letter-spacing: 0.02em; cursor: pointer; }
.edit-media__main { background: #07BDF4; border-color: #07BDF4; color: #010108; }
.edit-media__main:hover { background: #9FE6FF; }
.edit-flag { opacity: 0.75; text-decoration: line-through; }
.edit-flag.is-on { opacity: 1; text-decoration: none; border-color: rgb(7 189 244 / 0.7); color: #9FE6FF; }
.edit-flag--danger { text-decoration: none; color: #FFB4B4; }
[data-editing] .media-card { cursor: default; }
[data-editing] .media-card.is-hidden .media-card__frame > :not(.edit-media) { opacity: 0.35; }
[data-editing] .media-card__frame:not(:has(video, img)) { background: repeating-linear-gradient(135deg, #05061A 0 12px, #07081F 12px 24px); }

/* Bottom bar: mode, status, Save / Discard / Exit. */
.edit-bar { position: fixed; z-index: 10010; left: 50%; transform: translateX(-50%); bottom: max(1rem, env(safe-area-inset-bottom)); width: min(60rem, calc(100% - 2rem)); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.625rem 0.625rem 0.625rem 1.125rem; border-radius: 1.25rem; background: rgb(5 6 26 / 0.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgb(7 189 244 / 0.45); box-shadow: 0 20px 60px -20px rgb(0 0 0 / 0.9), 0 0 40px -12px rgb(7 189 244 / 0.4); font: 500 0.875rem/1.3 var(--cv-font-body), system-ui, sans-serif; color: #F3F6FD; }
.edit-bar--note { justify-content: center; }
.edit-bar__mode { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; color: #9FE6FF; }
.edit-bar__mode i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #07BDF4; box-shadow: 0 0 10px #07BDF4; animation: edit-pulse 1.6s ease-in-out infinite; }
@keyframes edit-pulse { 50% { opacity: 0.35; } }
.edit-bar__status { flex: 1 1 12rem; min-width: 0; color: rgb(243 246 253 / 0.72); }
.edit-bar__status.is-error { color: #FFB4B4; }
.edit-bar__actions { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-left: auto; }
.edit-btn { padding: 0.625rem 1rem; border-radius: 999px; border: 1px solid rgb(7 189 244 / 0.5); background: rgb(7 189 244 / 0.08); color: #F3F6FD; font: 600 0.8125rem/1 var(--cv-font-body), system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.edit-btn:hover:not(:disabled) { background: rgb(7 189 244 / 0.2); }
.edit-btn:disabled { opacity: 0.45; cursor: default; }
.edit-btn--primary { background: #07BDF4; border-color: #07BDF4; color: #010108; }
.edit-btn--primary:hover:not(:disabled) { background: #9FE6FF; }
.edit-btn--ghost { background: none; border-color: rgb(255 255 255 / 0.2); }
.edit-bar-progress { display: block; width: min(16rem, 80%); height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.12); overflow: hidden; }
.edit-bar-progress i { display: block; height: 100%; background: #07BDF4; transition: width 120ms; }
/* Make room for the bar: the side switch moves up, the footer gets more bottom space. */
body.is-editing .side-toggle { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.75rem); }
body.is-editing .site-footer { padding-bottom: 12rem; }
@media (max-width: 40rem) {
  .edit-bar { padding: 0.625rem; gap: 0.5rem; border-radius: 1rem; }
  .edit-bar__status { flex-basis: 100%; order: 3; font-size: 0.8125rem; }
  .edit-btn { padding: 0.5625rem 0.75rem; }
  body.is-editing .side-toggle { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 7.25rem); }
}

/* Media picker. */
.edit-modal { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgb(1 1 8 / 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.edit-modal__panel { width: min(40rem, 100%); max-height: calc(100dvh - 2rem); overflow: auto; box-sizing: border-box; display: grid; gap: 1rem; padding: 1.25rem; border-radius: 1.25rem; background: #05061A; border: 1px solid rgb(47 119 255 / 0.35); color: #F3F6FD; font: 400 0.9375rem/1.4 var(--cv-font-body), system-ui, sans-serif; }
.edit-modal__head { display: flex; align-items: center; justify-content: space-between; font-size: 1.0625rem; }
.edit-x { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.2); background: none; color: #F3F6FD; font-size: 1.25rem; cursor: pointer; }
.edit-tabs { display: flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: rgb(255 255 255 / 0.05); }
.edit-tabs button { flex: 1; padding: 0.5rem; border: 0; border-radius: 999px; background: none; color: rgb(243 246 253 / 0.7); font: 600 0.8125rem/1 var(--cv-font-body), system-ui, sans-serif; cursor: pointer; }
.edit-tabs button.is-on { background: #07BDF4; color: #010108; }
.edit-drop { display: grid; place-items: center; gap: 0.5rem; min-height: 11rem; padding: 1.5rem; border-radius: 1rem; border: 1.5px dashed rgb(7 189 244 / 0.55); background: rgb(7 189 244 / 0.05); text-align: center; cursor: pointer; }
.edit-drop.is-over, .edit-drop:hover { background: rgb(7 189 244 / 0.12); }
.edit-drop small, .edit-muted { color: rgb(243 246 253 / 0.55); font-size: 0.8125rem; margin: 0; }
.edit-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.625rem; max-height: 22rem; overflow: auto; }
.edit-thumb { display: grid; gap: 0.375rem; padding: 0.375rem; border-radius: 0.75rem; border: 1px solid rgb(255 255 255 / 0.12); background: #010108; color: rgb(243 246 253 / 0.75); font: 400 0.6875rem/1.2 var(--cv-font-body), system-ui, sans-serif; text-align: left; cursor: pointer; }
.edit-thumb:hover, .edit-thumb.is-current { border-color: #07BDF4; }
.edit-thumb img, .edit-thumb video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0.5rem; background: #05061A; display: block; }
.edit-thumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-link { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.edit-link input { flex: 1 1 14rem; min-width: 0; padding: 0.75rem 1rem; border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.2); background: #010108; color: #F3F6FD; font: inherit; }
.edit-link input:focus { outline: 2px solid #07BDF4; outline-offset: 1px; }
.edit-link small { flex-basis: 100%; }
.edit-error { margin: 0; color: #FFB4B4; }