/* ════════════════════════════════════════════════════════════════════
   station-editor.css — Project frame, editor, media players, menus.
   Values transcribed from the real .svelte <style> blocks. Icons are
   sized up to DS proportions (glyphs ≈ 60% of their hit-area).
   ════════════════════════════════════════════════════════════════════ */
:root {
  --flow-node-white: #e8e8e8; --flow-node-blue: #898989; --flow-node-green: #969696; --flow-node-red: #757575;
}

/* editor-menu + media buttons — canonical Button bg icon-only (36px, radius 6,
   bg --2, hover --4). Single source: orbit-primitives.css `.btn.bg`. */
.fmb, .cmb {
  width: 36px; height: 36px; min-width: 36px; border: none; border-radius: 6px; cursor: pointer;
  background: var(--2); color: var(--60); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.fmb:hover, .cmb:hover { background: var(--4); color: var(--100); }
.fmb.active, .cmb.active { background: var(--5); color: var(--100); }
.fmb [data-orbit], .cmb [data-orbit] { width: 18px; height: 18px; }
.vc-btn {
  width: 36px; height: 36px; min-width: 36px; border: none; border-radius: 6px; cursor: pointer;
  background: var(--2); color: var(--100); display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.vc-btn:hover { background: var(--4); }
.vc-btn [data-orbit] { width: 18px; height: 18px; }

/* ── ProjectFrame spine ──────────────────────────────────────────── */
#project-wrapper { width: 100%; position: relative; z-index: 5; }
.project-container { display: flex; flex-direction: column; width: 100%; }
.project-header { position: relative; width: 100%; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.project-header .scroll-indicator { position: absolute; bottom: 28px; left: calc(50% - 22px); z-index: 20; animation: pf-bounce 2s infinite; }
.project-header .scroll-indicator button { width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; background: transparent; color: var(--80); display: flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; }
.project-header .scroll-indicator button:hover { background: var(--2); color: var(--100); }
.project-header .scroll-indicator [data-orbit] { width: 26px; height: 26px; }
@keyframes pf-bounce { 0%,20%,50%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-18px); } 60% { transform: translateY(-9px); } }

/* ── GalleryProject 3-panel carousel ─────────────────────────────── */
#project-gallery-container { display: flex; align-items: center; justify-content: center; position: relative; gap: 1rem; height: calc(100% - 110px); width: 100%; z-index: 20; }
.project-gallery-backlayer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.project-gallery-backlayer img, .project-gallery-backlayer video { width: 100%; height: 100%; object-fit: cover; filter: blur(80px) brightness(0.3); transform: scale(1.05); }
#project-gallery-container .panel { position: absolute; border-radius: 24px; height: 100%; overflow: hidden; box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25); backdrop-filter: blur(3px); transition: transform 300ms ease, opacity 300ms ease; }
#project-gallery-container .panel.mid { width: calc(100% - 96px); left: 50%; transform: translateX(-50%); z-index: 2; }
#project-gallery-container .panel.left { left: -24px; z-index: 1; width: 120px; cursor: pointer; }
#project-gallery-container .panel.right { right: -24px; z-index: 3; width: 120px; cursor: pointer; }
#project-gallery-container .panel.left:hover, #project-gallery-container .panel.right:hover { transform: scale(1.04); }
#project-gallery-container .panel .video-container, #project-gallery-container .panel .image-container { position: relative; width: 100%; height: 100%; }
#project-gallery-container .panel .image-holder, #project-gallery-container .panel .video-container-holder { width: 100%; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
#project-gallery-container .panel img, #project-gallery-container .panel video { width: 100%; height: 100%; object-fit: cover; }
/* logged-in "accurate" → object-fit: contain on the mid panel */
#project-gallery-container.accurate .panel.mid { background: var(--inv-100); }
#project-gallery-container.accurate .panel.mid img.accurate, #project-gallery-container.accurate .panel.mid video.accurate { object-fit: contain; }
/* gallery all-comments toggle (bottom-right) */
.all-comments-toggle { position: absolute; right: 24px; bottom: 24px; z-index: 40; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; background: var(--inv-40); backdrop-filter: blur(8px); color: var(--100); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.all-comments-toggle:hover { background: var(--inv-20); }
.all-comments-toggle [data-orbit] { width: 24px; height: 24px; }

/* ── video overlay + controls (VideoOverlay / VideoControls) ─────── */
.play-overlay { position: absolute; inset: 0; z-index: 5; cursor: pointer; display: grid; place-items: center; background: transparent; transition: background .3s ease; }
.play-overlay:hover { background: color-mix(in oklab, var(--inv-100) 10%, transparent); }
.play-overlay.playing .icon-center { display: none; }
.play-overlay .icon-center { display: inline-flex; border: none; background: transparent; padding: 0; cursor: pointer; color: var(--100); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); opacity: 0.5; transition: transform .2s ease, opacity .2s ease; }
.play-overlay:hover .icon-center { transform: scale(1.1); opacity: 1; }
.play-overlay .icon-center [data-orbit] { width: 80px; height: 80px; }
.play-overlay.mini .icon-center [data-orbit] { width: 48px; height: 48px; }

.video-controls-container { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: 80%; max-width: 80%; box-sizing: border-box; height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--inv-40); backdrop-filter: blur(8px); border-radius: 26px; z-index: 10; }
.video-controls-container .vc-btn { width: 36px; height: 36px; }
.volume-spacer { display: flex; align-items: center; }
.volume-sub-container { display: flex; align-items: center; }
.volume-slot { display: inline-flex; align-items: center; height: 44px; width: 0; padding: 0; overflow: hidden; transition: width .2s ease, padding .2s ease; }
.volume-sub-container:hover .volume-slot { width: 92px; padding: 0 6px; }
.timeline-container { flex: 1; position: relative; display: flex; align-items: center; height: 44px; min-width: 0; }
.timeline-markers { position: absolute; inset: 0; pointer-events: none; }
.video-timeline-marker { position: absolute; top: 50%; transform: translate(-50%, -100%) translateY(-10px); pointer-events: auto; cursor: pointer; display: flex; padding: 2px; background: var(--10); border-radius: 50%; box-shadow: 0 2px 6px color-mix(in oklab, var(--inv-100) 30%, transparent); backdrop-filter: blur(6px) saturate(160%); transition: transform .2s var(--ease-out), box-shadow .2s ease; z-index: 12; }
.video-timeline-marker:hover { transform: translate(-50%, -100%) translateY(-12px) scale(1.1); z-index: 14; }
.video-timeline-marker.resolved { opacity: .5; filter: grayscale(.6); }
.video-timeline-marker .pin-subcontainer { display: flex; align-items: center; }
/* player sliders — canonical Station `.video-slider` (VideoControls.svelte):
   4px track, 12px white thumb w/ soft drop; the white value-fill is painted
   inline by JS (linear-gradient to value) exactly like the source trackStyle. */
.vc-range { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; outline: none; margin: 0;
  background-repeat: no-repeat; background-position: center; background-size: 100% 4px; border-radius: 2px; }
.vc-seek { width: 100%; }
.vc-vol { width: 80px; }
.vc-range::-webkit-slider-runnable-track { width: 100%; height: 4px; background: transparent; border-radius: 2px; }
.vc-range::-moz-range-track { height: 4px; background: transparent; border-radius: 2px; }
.vc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--100); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.vc-range::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--100); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.video-controls-container .time { color: var(--80); min-width: 42px; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: center; }
/* CSS fullscreen fallback (iframe blocks the Fullscreen API) */
.vc-fs-fake { position: fixed !important; inset: 0 !important; z-index: 99999 !important; width: 100vw !important; height: 100vh !important; max-width: none !important; transform: none !important; border-radius: 0 !important; background: #000; }
.vc-fs-fake .video-container-holder { width: 100%; height: 100%; border-radius: 0; }
.vc-fs-fake video { object-fit: contain !important; }

/* image-player version pill (logged-in only) — version icon ONLY */
.version-toggle { position: absolute; display: flex; bottom: 16px; left: 50%; transform: translateX(-50%); width: max-content; z-index: 9; gap: 2px; align-items: center; padding: 6px 10px; background: var(--inv-40); border-radius: 48px; box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25); backdrop-filter: blur(3px); }
.version-toggle .vc-btn { width: 40px; height: 40px; }

/* media pins */
.pin-markers, .video-pin-markers { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
/* shared astranaut avatar (OrbitAvatar / @orbit/ui Avatar) */
.ob-avatar { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; border: 1px solid var(--10); background: var(--5); vertical-align: middle; flex: 0 0 auto; }
.ob-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-avatar.ring-soft { box-shadow: 0 0 0 1px var(--10); }
.ob-avatar.ring-active { box-shadow: 0 0 0 2px var(--100); }
.image-holder.pin-active { cursor: crosshair; }
.media-pin { position: absolute; display: inline-flex; align-items: center; padding: 3px; border: none; border-radius: 18px 18px 18px 0; background: var(--10); box-shadow: 0 6px 16px var(--inv-40); backdrop-filter: blur(6px) saturate(160%); cursor: pointer; pointer-events: auto; transform: translateX(0); transition: transform .15s ease, background .15s ease; z-index: 8; }
.media-pin:hover { background: var(--2); transform: scale(1.1); }
.media-pin .ob-avatar + .ob-avatar { margin-left: -6px; }
.media-pin-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--inv-100); color: var(--100); }
.media-pin-icon [data-orbit] { width: 15px; height: 15px; }
.media-pin.resolved { opacity: .55; filter: grayscale(.6); }
.media-pin.resolved:hover { opacity: 1; filter: none; }
.media-pin-av { width: 24px; height: 24px; border-radius: 50%; background: var(--inv-100); color: var(--100); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 480; }
.media-pin-av.sm { width: 22px; height: 22px; font-size: 10px; }

/* version dropdown (VersionDropdown) */
.version-dropdown-overlay { position: absolute; bottom: 64px; left: 50%; transform: translateX(-50%); width: 320px; padding: 6px; display: flex; flex-direction: column; gap: 4px; background: var(--inv-80); border: 1px solid var(--5); backdrop-filter: blur(16px) saturate(180%); border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 30; }
.version-dropdown-overlay .vd-create, .version-dropdown-overlay .vd-deleteall { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: 8px; cursor: pointer; background: transparent; color: var(--100); font-family: var(--f-sans); font-size: 14px; text-align: left; }
.version-dropdown-overlay .vd-create:hover, .version-dropdown-overlay .vd-deleteall:hover { background: var(--2); }
.version-dropdown-overlay .vd-create [data-orbit], .version-dropdown-overlay .vd-deleteall [data-orbit] { width: 18px; height: 18px; }
.version-dropdown-overlay .vd-list { display: flex; flex-direction: column; }
.version-dropdown-overlay .vd-row { display: flex; align-items: center; border-radius: 8px; }
.version-dropdown-overlay .vd-row:hover, .version-dropdown-overlay .vd-row.active { background: var(--2); }
.version-dropdown-overlay .vd-pick { flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: none; background: transparent; color: var(--100); font-family: var(--f-sans); font-size: 14px; text-align: left; cursor: pointer; }
.version-dropdown-overlay .vd-num { min-width: 22px; }
.version-dropdown-overlay .vd-feat [data-orbit] { width: 16px; height: 16px; color: var(--100); }
.version-dropdown-overlay .vd-kind { margin-left: auto; }
.version-dropdown-overlay .vd-kind [data-orbit] { width: 16px; height: 16px; color: var(--40); }
.version-dropdown-overlay .vd-second, .version-dropdown-overlay .vd-del, .version-dropdown-overlay .vd-slide, .version-dropdown-overlay .vd-comment, .version-dropdown-overlay .vd-deleteall.icon { width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer; background: transparent; color: var(--60); display: inline-flex; align-items: center; justify-content: center; }
.version-dropdown-overlay .vd-second:hover, .version-dropdown-overlay .vd-del:hover, .version-dropdown-overlay .vd-slide:hover, .version-dropdown-overlay .vd-comment:hover { background: var(--5); color: var(--100); }
.version-dropdown-overlay .vd-second [data-orbit], .version-dropdown-overlay .vd-del [data-orbit] { width: 18px; height: 18px; }
.version-dropdown-overlay .vd-bottom { display: flex; gap: 4px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--5); }
.version-dropdown-overlay .vd-bottom button { flex: 1; height: 40px; border: none; border-radius: 8px; cursor: pointer; background: transparent; color: var(--80); display: inline-flex; align-items: center; justify-content: center; }
.version-dropdown-overlay .vd-bottom button:hover { background: var(--2); color: var(--100); }
.version-dropdown-overlay .vd-bottom [data-orbit] { width: 20px; height: 20px; }

/* ── ProjectMenu pill ───────────────────────────────────────────── */
.project-menu-holder { position: relative; z-index: 5; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.project-menu-container { display: flex; justify-content: center; min-width: 240px; width: 90%; max-width: calc(976px - 48px); min-height: 84px; padding: 0 24px; position: relative; align-items: center; gap: 12px; z-index: 1000; border-radius: 96px; background: var(--inv-100, #000); box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25); backdrop-filter: blur(3px); }
.project-menu-container .subcontainer { display: flex; align-items: center; width: 100%; gap: 12px; }
.project-menu-container .avatar-holder { display: flex; }
.project-menu-container .avatar-holder .pm-av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-left: -10px; border: 1.5px solid var(--inv-100); background: var(--5); transition: transform .2s ease; }
.project-menu-container .avatar-holder .pm-av:first-child { margin-left: 0; }
.project-menu-container .avatar-holder .pm-av:hover { transform: translateY(-3px); }
.project-menu-container .featured-text { width: 100%; }
.project-menu-container .button-tribute { width: 100%; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--60); transition: color .2s ease; padding: 8px 0; }
.project-menu-container .button-tribute:hover { color: var(--100); }
.project-menu-container .button-tribute .title-text { text-align: center; line-height: 24px; font-size: 15px; }
.project-menu-container .button-tribute .title-text .bold { font-weight: 480; color: var(--100); }
.project-menu-container .button-tribute [data-orbit] { width: 18px; height: 18px; color: var(--40); transform: rotate(90deg); }
.project-menu-container .button-holder { display: flex; gap: 8px; align-items: center; }
/* project-menu actions now use the canonical .btn (orbit-primitives.css):
   titled buttons reveal their trailing icon on hover; icon-only are 40px. */
.project-menu-container .btn-wrap { height: 40px; }
.project-menu-container .btn-wrap.icon-only { width: 40px; }
.project-menu-container .btn { border-radius: 8px; }
.project-menu-container .btn .title-text { font-size: 13px; letter-spacing: .2px; }
.project-menu-container .settings-anchor { display: flex; gap: 8px; align-items: center; position: relative; }
/* the config dropdown extends BELOW the menu bar — containers must not clip it */
.project-menu-holder, .project-menu-container, .project-menu-container .button-holder, .project-menu-container .settings-anchor { overflow: visible; }
.pm-picker { z-index: 6000; }
.pm-picker:not(.open) { display: none; }
.pm-picker { position: absolute; top: 48px; right: 0; z-index: 2000; width: 290px; border-radius: 16px; background: var(--inv-80); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--10); box-shadow: 0 30px 80px var(--inv-40); padding: 8px; display: none; }
.pm-picker.open { display: block; }
.pm-picker .pm-pick-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: var(--80); cursor: pointer; font-size: 14px; transition: background .15s ease; }
.pm-picker .pm-pick-row:hover { background: var(--5); color: var(--100); }
.pm-picker .pm-pick-row.current { color: var(--100); font-weight: 480; }
.pm-picker .pm-pick-row [data-orbit] { width: 17px; height: 17px; color: var(--60); }
.pm-picker .pm-pick-row.del [data-orbit] { color: var(--40); }
.pm-picker .pm-pick-row .pm-ico-blank { width: 17px; height: 17px; display: inline-block; flex: 0 0 17px; }
.pm-picker .pm-pick-sep { height: 1px; background: var(--5); margin: 6px 4px; }
.pm-picker .pm-foot { display: flex; gap: 8px; padding: 6px 8px 2px; }
.pm-picker .pm-foot-btn { width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer; background: var(--2); color: var(--80); display: inline-flex; align-items: center; justify-content: center; }
.pm-picker .pm-foot-btn:hover { background: var(--4); color: var(--100); }
.pm-picker .pm-foot-btn [data-orbit] { width: 18px; height: 18px; }

/* ProjectMenu avatar cluster (dynamic team) */
.project-menu-container .avatar-holder .pm-av-btn { border: none; background: none; padding: 0; margin-left: -10px; cursor: pointer; transition: transform .2s var(--ease-out); }
.project-menu-container .avatar-holder .pm-av-btn:first-child { margin-left: 0; }
.project-menu-container .avatar-holder .pm-av-btn:hover { transform: translateY(-3px); }
.project-menu-container .avatar-holder .pm-av-btn .ob-avatar { border: 1.5px solid var(--inv-100); }
.project-menu-container .avatar-holder .pm-av-add { margin-left: 6px; width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--20); background: transparent; color: var(--40); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; }
.project-menu-container .avatar-holder .pm-av-add:hover { background: var(--2); color: var(--100); }
.project-menu-container .avatar-holder .pm-av-add [data-orbit] { width: 16px; height: 16px; }

/* Team-Konstellation flyout (managerRoleFlyout) */
.pm-team-flyout { position: fixed; z-index: 6000; width: 304px; padding: 12px; border-radius: 18px; background: var(--inv-80); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--10); box-shadow: 0 12px 40px rgba(0,0,0,0.45); display: flex; flex-direction: column; gap: 6px; }
.pm-team-flyout .pm-fly-head { font-size: 12px; font-weight: 480; color: var(--60); text-transform: uppercase; letter-spacing: .2px; padding: 2px 4px 8px; }
.pm-role-slot { display: flex; align-items: center; gap: 10px; }
.pm-role-slot .pm-role-label { flex: 0 0 92px; font-size: 13px; color: var(--60); }
.pm-role-pick { flex: 1; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: none; border-radius: 999px; background: var(--2); color: var(--100); cursor: pointer; font-family: var(--f-sans); font-size: 13px; transition: background .15s ease; }
.pm-role-pick:hover { background: var(--5); }
.pm-role-pick .pm-role-name { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-role-pick .pm-role-name.muted { color: var(--40); }
.pm-role-pick [data-orbit] { width: 14px; height: 14px; color: var(--40); }
.pm-role-slot.team { align-items: flex-start; }
.pm-team-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.pm-team-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border: none; border-radius: 999px; background: var(--2); color: var(--80); cursor: pointer; font-family: var(--f-sans); font-size: 12px; }
.pm-team-chip:hover { background: var(--5); color: var(--100); }
.pm-team-add { width: 28px; height: 28px; border: 1px dashed var(--20); border-radius: 50%; background: transparent; color: var(--40); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pm-team-add:hover { background: var(--2); color: var(--100); }
.pm-team-add [data-orbit] { width: 14px; height: 14px; }

/* user picker (role assignment) */
.pm-user-picker { position: fixed; z-index: 6100; width: 264px; padding: 8px; border-radius: 16px; background: var(--inv-80); backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--10); box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.pm-up-search { width: 100%; box-sizing: border-box; padding: 9px 12px; margin-bottom: 6px; border: none; border-radius: 999px; background: var(--2); color: var(--100); font-family: var(--f-sans); font-size: 13px; outline: none; }
.pm-up-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; }
.pm-up-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: none; border-radius: 10px; background: transparent; color: var(--100); cursor: pointer; transition: background .15s ease; }
.pm-up-row:hover { background: var(--5); }
.pm-up-meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pm-up-name { font-size: 13px; }
.pm-up-title { font-size: 11px; color: var(--40); }

/* ── .background-project gradient ────────────────────────────────── */
.background-project { background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0.04) 80px, rgba(0,0,0,0.15) 180px, rgba(0,0,0,0.42) 320px, rgba(0,0,0,0.72) 460px, rgba(0,0,0,0.92) 560px, var(--inv-100) 640px, var(--inv-100) calc(100% - 640px), rgba(0,0,0,0.92) calc(100% - 560px), rgba(0,0,0,0.72) calc(100% - 460px), rgba(0,0,0,0.42) calc(100% - 320px), rgba(0,0,0,0.15) calc(100% - 180px), rgba(0,0,0,0.04) calc(100% - 80px), rgba(0,0,0,0) 100%); z-index: 3; position: relative; margin-top: -4px; }
.project-container .editor-container { background: none; padding-top: 48px; }
.project-container #gallery.gallery-container { margin-top: 240px; background: none; min-height: 100dvh; }
.project-container .footer-container { position: relative; z-index: 4; }

/* ════ EDITOR (editing mode) ════ */
#editor-wrapper { width: 100%; }
.editor-inner { position: relative; }
.editor-inner a { color: var(--100) !important; text-decoration: underline; text-underline-offset: 3px; }
.editor-inner .blocks-container { width: 100%; max-width: none; box-sizing: border-box; display: flex; flex-direction: column; padding: 24px 0 0; }
.editor-inner .blocks-container > section { display: flex; flex-direction: column; }
.editor-inner .block-wrapper { position: relative; width: 100%; }

/* TEXT block — ONE .text-container holds bg + padding + off-l/off-r width */
.editor-inner .text-container {
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; height: max-content;
  min-height: 124px; box-sizing: border-box; margin: 0; width: 100%;
  padding: 12px var(--off-r,24px) 48px var(--off-l,24px);
  transition: background .2s ease;
}
.editor-inner.is-admin .text-container.admin:hover { background: var(--2); }
.editor-inner .text-subcontainer { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; width: 100%; }
.editor-inner .text-container h1, .editor-inner .text-container [contenteditable] h1 { font-weight: 180; font-size: 36px; line-height: 1.3; letter-spacing: -0.6px; margin: 0; width: 100%; }
.editor-inner .text-container h2 { font-weight: 180; font-size: 24px; line-height: 1.5; margin: 0; width: 100%; }
.editor-inner .text-container h3 { font-weight: 180; font-size: 18px; line-height: 1.7; margin: 0; width: 100%; }
.editor-inner .text-container .p { font-weight: 200; font-size: 16px; line-height: 1.9; color: var(--80); width: 100%; }
.editor-inner .text-container[data-element="code"] { min-height: 112px; }
.editor-inner .text-container [contenteditable] { outline: none; }
.editor-inner .text-container [contenteditable][data-placeholder]:empty:before { content: attr(data-placeholder); color: var(--inv-10); pointer-events: none; }
.editor-inner .text-container [contenteditable][data-placeholder]:focus:before { content: ""; }
.editor-inner .bold, .editor-inner .cell-content .bold { font-weight: 480; color: var(--100); }
.editor-inner .italic { font-style: italic; }
.editor-inner .align-center { display: block; text-align: center; }
.editor-inner span.code { display: inline-block; color: var(--40); background: var(--5); border-radius: 4px; padding: 0 8px; font-family: "Lexend", var(--f-sans); font-weight: 240; }
.editor-inner [data-element="code"] [contenteditable], .editor-inner pre.language-text code { display: block; font-family: "Lexend", var(--f-sans); font-weight: 240; font-size: 16px; line-height: 2.25; padding: 12px 24px; border-radius: 6px; background: var(--inv-100); }
.editor-inner .comment-highlight { background: var(--10); border-radius: 3px; cursor: pointer; transition: background .2s ease; }
.editor-inner .comment-highlight.flash { background: var(--20); }

/* widget-holders + resize handles */
.editor-inner .text-subcontainer .widget-holder { width: 24px; min-width: 24px; min-height: 72px; display: flex; justify-content: center; align-items: center; mix-blend-mode: exclusion; opacity: 0; transition: opacity .2s ease; }
.editor-inner.is-admin .block-wrapper:hover .text-subcontainer .widget-holder { opacity: 1; }
.editor-inner .resize-handle.w { width: 8px; height: 72px; background: var(--10); border-radius: 6px; transition: background .2s ease; cursor: ew-resize; }
.editor-inner .resize-handle.w:hover { background: var(--20); }
.editor-inner .resize-handle-bottom { position: absolute; bottom: 4px; left: calc(50% + (var(--off-l,0px) - var(--off-r,0px)) / 2); transform: translateX(-50%); width: 72px; height: 8px; background: var(--10); border-radius: 6px; cursor: ns-resize; z-index: 20; opacity: 0; transition: opacity .2s ease, background .2s ease; }
.editor-inner.is-admin .block-wrapper:hover .resize-handle-bottom { opacity: 1; }
.editor-inner .resize-handle-bottom:hover { background: var(--20); }

/* CreationMenu (per-block bottom bar) */
.editor-inner .creation-menu-container { position: absolute; z-index: 14; bottom: 0; left: 0; width: calc(100% - 24px); padding: 0 12px; min-height: 48px; max-height: 48px; display: flex; align-items: center; gap: 4px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.editor-inner.is-admin .block-wrapper:hover .creation-menu-container { opacity: 1; pointer-events: auto; }
.editor-inner .creation-menu-container .cmb.create { background: var(--inv-40); }
.editor-inner .creation-menu-container .cmb.create:hover { background: var(--2); }
.editor-inner .creation-menu-container .cmb.remove:hover { color: var(--100); }
.editor-inner .cm-menu { display: none; align-items: center; gap: 6px; flex: 1; }
.editor-inner .cm-menu.open { display: flex; }
.editor-inner .input-area { display: flex; align-items: center; flex: 1; min-width: 0; gap: 12px; margin-left: 8px; max-height: 48px; }
.editor-inner .input-area.hide { display: none; }
.editor-inner .cm-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--80); font-family: var(--f-sans); font-weight: 200; font-size: 14px; height: 40px; }
.editor-inner .cm-input::placeholder { color: var(--40); }
.editor-inner .cm-textgroup { position: relative; display: flex; align-items: center; }
.editor-inner .cm-textopts { display: none; align-items: center; gap: 2px; padding: 0 4px; border-radius: 24px; background: var(--inv-60); box-shadow: 0 4px 4px rgba(0,0,0,0.25); backdrop-filter: blur(3px); }
.editor-inner .cm-textopts.open { display: flex; }
.editor-inner .cm-modify { display: flex; align-items: center; gap: 4px; }
.editor-inner .edit-buttons { display: flex; align-items: center; margin-left: auto; }
.editor-inner .cm-slash { position: absolute; bottom: 52px; left: 56px; z-index: 30; width: 280px; box-sizing: border-box; border-radius: 12px; background: var(--inv-80); backdrop-filter: blur(16px) saturate(180%); border: 1px solid var(--5); box-shadow: 0 8px 32px rgba(0,0,0,0.3); padding: 6px; display: none; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.editor-inner .cm-slash.open { display: flex; }
.editor-inner .cm-slash .cm-cmd { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--80); transition: background .15s ease; }
.editor-inner .cm-slash .cm-cmd:hover, .editor-inner .cm-slash .cm-cmd.selected { background: var(--5); color: var(--100); }
.editor-inner .cm-slash .cm-cmd [data-orbit] { width: 18px; height: 18px; flex: 0 0 18px; color: var(--60); }
.editor-inner .cm-slash .cm-cmd-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.editor-inner .cm-slash .cm-cmd-lbl { font-size: 13px; font-weight: 480; color: var(--100); }
.editor-inner .cm-slash .cm-cmd-desc { font-size: 12px; color: var(--20); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-inner .cm-slash .cm-cmd-empty { margin: 0; padding: 12px; text-align: center; color: var(--40); font-size: 13px; }

/* Astra inline thinking (AstraThinking chrome — animated orb + streaming) */
.editor-inner .astra-inline-thinking { position: absolute; bottom: 52px; left: 56px; right: 56px; z-index: 31; border-left: 2px solid var(--inv-20); padding-left: 6px; }
.editor-inner .ait-head { display: flex; align-items: center; gap: 8px; }
.editor-inner .ait-orb { width: 20px; height: 20px; flex: 0 0 20px; }
.editor-inner .ait-orb canvas { display: block; border-radius: 50%; }
.editor-inner .ait-title { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--60); font-weight: 500; }
.editor-inner .ait-stop { margin-left: auto; width: 24px; height: 24px; border: none; border-radius: 50%; background: var(--5); color: var(--60); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.editor-inner .ait-stop:hover { background: var(--10); color: var(--100); }
.editor-inner .ait-stop [data-orbit] { width: 12px; height: 12px; }
.editor-inner .ait-stream { margin-top: 6px; padding: 10px 12px; max-height: 120px; overflow-y: auto; background: var(--inv-2); border: 1px solid var(--inv-10); border-radius: 0 0 8px 8px; backdrop-filter: blur(10px); color: var(--100); font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.editor-inner .ait-cursor { font-weight: 900; color: var(--100); animation: aitblink .8s steps(2, start) infinite; }
@keyframes aitblink { to { visibility: hidden; } }

/* full-bleed block background layer (colour OR Cloud media) */
.editor-inner .block-wrapper.has-bg-media { overflow: hidden; }
.editor-inner .block-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
.editor-inner .block-bg img, .editor-inner .block-bg video { width: 100%; height: 100%; object-fit: cover; }
.editor-inner .block-bg.media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--inv-40), var(--inv-60)); }
.editor-inner .block-wrapper.has-bg-media > *:not(.block-bg) { position: relative; z-index: 1; }
.editor-inner .creation-menu-container .cm-bg-media { color: var(--60); }

/* ════ DetailMenu (selection toolbar) ════ */
.format-menu { position: absolute; z-index: 40; display: none; align-items: center; padding: 6px; gap: 4px; border-radius: 24px; background: var(--inv-40); box-shadow: 0 4px 4px rgba(0,0,0,0.25); backdrop-filter: blur(3px); transform: translate(-50%, -100%); }
.format-menu.open { display: flex; }
.format-menu .text-group-spacer { width: 40px; height: 36px; }
.format-menu .text-group { display: flex; align-items: center; position: absolute; left: 6px; border-radius: 24px; padding: 0 4px; gap: 2px; z-index: 10; background: var(--2); box-shadow: 0 4px 4px rgba(0,0,0,0.25); backdrop-filter: blur(3px); }
.format-menu .text-group:not(.open) { background: transparent; box-shadow: none; padding: 0; }
.format-menu .modify-group, .format-menu .color-group { display: flex; align-items: center; width: max-content; transition: filter .2s ease; }
.format-menu .modify-group.filter { filter: blur(3px); }

/* ════ colour WHEEL ════ */
.picker-container { position: absolute; z-index: 1100; display: none; width: 180px; padding: 8px; flex-direction: column; align-items: center; gap: 12px; border-radius: 24px; background: var(--inv-80); box-shadow: 6px 12px 48px 0 rgba(0,0,0,0.35); backdrop-filter: blur(12px); }
.picker-container.open { display: flex; }
.picker-container .color-picker { display: flex; justify-content: center; border-radius: 50%; overflow: hidden; }
.picker-container .wheel-holder { position: relative; display: inline-block; }
.picker-container canvas { border-radius: 50%; filter: blur(3px); display: block; cursor: crosshair; }
.picker-container .picker-dot { position: absolute; width: 6px; height: 6px; border: 1.5px solid var(--100); border-radius: 50%; box-shadow: 0 0 6px rgba(0,0,0,0.4); transform: translate(-50%,-50%); pointer-events: none; }
.picker-container .inputs-container { width: 100%; }
.picker-container .cp-field { display: flex; align-items: center; gap: 6px; width: 100%; background: var(--inv-40); border-radius: 24px; padding: 6px 6px 6px 14px; box-sizing: border-box; }
.picker-container .cp-hex { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--80); font-family: var(--f-mono); font-size: 12px; }
.picker-container .cp-clear { width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer; background: var(--5); color: var(--80); display: inline-flex; align-items: center; justify-content: center; }
.picker-container .cp-clear:hover { background: var(--10); color: var(--100); }
.picker-container .cp-clear [data-orbit] { width: 14px; height: 14px; }

/* ════ link picker ════ */
.picker-popup { position: absolute; z-index: 1100; width: 284px; display: none; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: var(--inv-80); backdrop-filter: blur(24px); border: 1px solid var(--10); box-shadow: 0 24px 64px var(--inv-40); }
.picker-popup.open { display: flex; }
.picker-popup .lp-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; background: var(--inv-40); }
.picker-popup .lp-head .lp-ico [data-orbit] { width: 18px; height: 18px; color: var(--60); }
.picker-popup .lp-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--90, var(--80)); font-family: var(--f-sans); font-size: 13px; }
.picker-popup .lp-remove { width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer; background: transparent; color: var(--40); display: inline-flex; align-items: center; justify-content: center; }
.picker-popup .lp-remove:hover { background: var(--5); color: var(--100); }
.picker-popup .lp-remove [data-orbit] { width: 16px; height: 16px; }
.picker-popup .lp-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.picker-popup .lp-section { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px; color: var(--40); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; }
.picker-popup .lp-section [data-orbit] { width: 15px; height: 15px; }
.picker-popup .lp-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; cursor: pointer; color: var(--80); }
.picker-popup .lp-row:hover { background: var(--5); color: var(--100); }
.picker-popup .lp-row [data-orbit] { width: 16px; height: 16px; color: var(--60); }
.picker-popup .lp-row.url { color: var(--100); }
.picker-popup .lp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* ════ comment surfaces ════ */
.pin-comment { position: absolute; z-index: 5200; width: 280px; display: none; }
.pin-comment.open { display: block; }
.pin-input { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 16px; border-radius: 24px; background: var(--inv-60); border: 1px solid var(--10); backdrop-filter: blur(8px); }
.pin-input input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--90, var(--80)); font-family: var(--f-sans); font-size: 14px; }
.pin-input input::placeholder { color: var(--40); }
.pin-input .pin-go, .pin-input .cmt-reply-go { width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer; background: var(--5); color: var(--100); display: inline-flex; align-items: center; justify-content: center; }
.pin-input .pin-go:hover, .pin-input .cmt-reply-go:hover { background: var(--10); }
.pin-input [data-orbit] { width: 16px; height: 16px; }
.full-comment-window { position: absolute; z-index: 5300; display: none; width: 352px; padding: 4px; flex-direction: column; justify-content: flex-end; gap: 12px; border-radius: 18px 24px 24px 6px; transform: translateY(24px); background: var(--inv-40); box-shadow: 0 4px 4px rgba(0,0,0,0.25); backdrop-filter: blur(8px); }
.full-comment-window.open { display: flex; }
.full-comment-window .comment-content { display: flex; padding: 6px 12px; flex-direction: column; align-items: flex-start; align-self: stretch; gap: 6px; }
.full-comment-window .comment-header { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; min-height: 36px; }
.full-comment-window .comment-author-container { display: flex; align-items: center; gap: 12px; }
.full-comment-window .cmt-av { width: 24px; height: 24px; border-radius: 50%; background: var(--5); color: var(--100); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 480; }
.full-comment-window .comment-meta { display: flex; gap: 6px; }
.full-comment-window .pin-time { all: unset; cursor: pointer; color: var(--40); font-size: 12px; font-family: var(--f-sans); transition: color .2s ease; }
.full-comment-window .pin-time:hover { color: var(--100); }
.full-comment-window .comment-resolve-container { display: flex; align-items: center; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.full-comment-window .comment-header:hover .comment-resolve-container, .full-comment-window .comment-resolve-container.show-actions { opacity: 1; pointer-events: auto; }
.full-comment-window .cmt-task, .full-comment-window .cmt-resolve, .full-comment-window .cmt-del { width: 36px; height: 36px; border: none; border-radius: 50%; cursor: pointer; background: var(--2); color: var(--60); display: inline-flex; align-items: center; justify-content: center; }
.full-comment-window .cmt-task:hover { background: var(--5); color: var(--100); }
.full-comment-window .cmt-resolve:hover, .full-comment-window .cmt-del:hover { background: var(--5); color: var(--100); }
.full-comment-window .cmt-task [data-orbit], .full-comment-window .cmt-resolve [data-orbit], .full-comment-window .cmt-del [data-orbit] { width: 18px; height: 18px; }
.full-comment-window .comment-body { width: 100%; }
.full-comment-window .comment-body p { margin: 0; color: var(--100); word-break: break-word; font-size: 14px; line-height: 1.5; padding-left: 36px; }
.full-comment-window .pin-input.reply { width: calc(100% - 8px); margin: 0 4px 4px; }

/* comments sidebar (ProjectCommentsSidebar) */
.comments-sidebar { position: fixed; top: 0; right: 0; width: 380px; max-width: 92vw; height: 100dvh; z-index: 5000; background: var(--inv-80); backdrop-filter: blur(24px) saturate(160%); border-left: 1px solid var(--10); box-shadow: -16px 0 60px var(--inv-40); transform: translateX(100%); transition: transform .35s cubic-bezier(0.16,0.84,0.44,1); display: flex; flex-direction: column; }
.comments-sidebar.open { transform: translateX(0); }
.comments-sidebar .cs-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 20px 12px; }
.comments-sidebar .cs-title { font-size: 20px; font-weight: 180; color: var(--100); }
.comments-sidebar .cs-head-actions { display: flex; gap: 6px; }
.comments-sidebar .cs-filter, .comments-sidebar .cs-close { width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer; background: var(--2); color: var(--80); display: inline-flex; align-items: center; justify-content: center; }
.comments-sidebar .cs-filter.on { background: var(--5); color: var(--100); }
.comments-sidebar .cs-filter:hover, .comments-sidebar .cs-close:hover { background: var(--4); color: var(--100); }
.comments-sidebar .cs-filter [data-orbit], .comments-sidebar .cs-close [data-orbit] { width: 18px; height: 18px; }
.comments-sidebar .cs-tabs { display: flex; gap: 6px; padding: 0 20px 12px; }
.comments-sidebar .cs-tab { flex: 1; padding: 10px; border: none; border-radius: 10px; cursor: pointer; background: var(--2); color: var(--60); font-family: var(--f-sans); font-size: 13px; transition: background .2s ease, color .2s ease; }
.comments-sidebar .cs-tab.active { background: var(--5); color: var(--100); }
.comments-sidebar .cs-list { flex: 1; overflow-y: auto; padding: 0 16px 24px; display: flex; flex-direction: column; gap: 8px; }
.comments-sidebar .cs-item { padding: 14px; border-radius: 14px; background: var(--2); cursor: pointer; transition: background .15s ease; }
.comments-sidebar .cs-item:hover { background: var(--4); }
.comments-sidebar .cs-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comments-sidebar .cs-av { width: 30px; height: 30px; border-radius: 50%; background: var(--5); color: var(--100); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 480; }
.comments-sidebar .cs-meta { display: flex; flex-direction: column; min-width: 0; }
.comments-sidebar .cs-who { font-size: 13px; color: var(--100); font-weight: 480; }
.comments-sidebar .cs-src { font-size: 11px; color: var(--40); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comments-sidebar .cs-time { margin-left: auto; font-size: 11px; color: var(--40); font-family: var(--f-mono); white-space: nowrap; }
.comments-sidebar .cs-body { font-size: 14px; line-height: 1.5; color: var(--80); }
.comments-sidebar .cs-replies { margin-top: 6px; font-size: 12px; color: var(--100); }
.comments-sidebar .cs-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.comments-sidebar .cs-task { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: none; border-radius: 999px; background: var(--5); color: var(--80); font-family: var(--f-sans); font-size: 12px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.comments-sidebar .cs-task:hover { background: var(--10); color: var(--100); }
.comments-sidebar .cs-task [data-orbit] { width: 14px; height: 14px; }
.comments-sidebar .cs-empty { padding: 40px 12px; text-align: center; color: var(--40); font-size: 13px; }

/* legacy confirmation toast — aligned to the canon .orb-toast pill
   (StationToast now emits .orb-toast in the rail; kept for any stray callers) */
.orbit-toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(12px); z-index: 99999; padding: 10px 18px; border-radius: var(--r-cap); background: rgba(10,10,14,0.85); border: 1px solid var(--20); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: var(--100); font-family: var(--f-sans); font-size: 12px; line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity .24s var(--ease-out), transform .24s var(--ease-out); }
.orbit-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* flag → task context popover (TaskFlagPopover) */
.flag-menu { position: fixed; z-index: 99998; min-width: 200px; padding: 6px; border-radius: 14px; background: var(--inv-80); border: 1px solid var(--10); backdrop-filter: blur(20px) saturate(160%); box-shadow: 0 12px 40px rgba(0,0,0,0.45); display: none; flex-direction: column; gap: 2px; }
.flag-menu.open { display: flex; }
.flag-menu .flag-head { font-size: 11px; color: var(--40); padding: 6px 10px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flag-menu .flag-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none; border-radius: 9px; background: transparent; color: var(--80); cursor: pointer; font-family: var(--f-sans); font-size: 13px; text-align: left; }
.flag-menu .flag-item:hover { background: var(--5); color: var(--100); }
.flag-menu .flag-item [data-orbit] { width: 16px; height: 16px; flex: 0 0 16px; color: var(--60); }

/* ════ TABLE block (EditorTable) ════ */
.editor-inner .table-container { position: relative; display: flex; width: 100%; align-items: flex-start; box-sizing: border-box; padding: 24px var(--off-r,24px) 24px var(--off-l,24px); margin: 0; transition: background .2s ease; }
.editor-inner.is-admin .table-container:hover { background: var(--2); }
.editor-inner .table-container .widget-holder { width: 12px; min-width: 12px; flex: 0 0 12px; display: flex; align-items: center; justify-content: center; opacity: 0; }
.editor-inner .table-core { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.editor-inner .table-head { display: flex; justify-content: space-between; align-items: center; }
.editor-inner .table-head .tabs { display: flex; align-items: center; gap: 2px; }
.editor-inner .table-head .tab { display: flex; align-items: center; border-radius: 0 0 6px 6px; }
.editor-inner .page-button { border: none; cursor: pointer; background: transparent; color: var(--60); border-radius: 0 0 6px 6px; padding: 7px 16px; font-family: var(--f-sans); font-size: 13px; transition: background .2s ease, color .2s ease; }
.editor-inner .page-button.active { color: var(--100); background: var(--2); }
.editor-inner .page-button:hover { background: var(--2); color: var(--100); }
.editor-inner .table-head .tab-add { width: 36px; height: 36px; }
.editor-inner .table-head .tab-add [data-orbit] { width: 18px; height: 18px; }
.editor-inner .table-content { display: flex; flex-direction: column; }
.editor-inner .table-row { display: flex; align-items: stretch; position: relative; padding: 0 12px; transition: background .2s ease; border-bottom: 1px solid var(--5); }
.editor-inner.is-admin .table-row:hover { background: var(--2); }
.editor-inner .table-cell { flex: 1 1 0; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; gap: 8px; padding: 6px 14px 36px; min-height: 72px; min-width: 0; position: relative; }
.editor-inner .cell-content { display: block; width: 100%; min-width: 0; align-content: center; margin: 0; font-family: "Lexend", var(--f-sans); font-size: 16px; font-weight: 240; line-height: 2.25; letter-spacing: .16px; white-space: pre-wrap; outline: none; }
.editor-inner .cell-content p { margin: 0; display: inline; line-height: inherit; }
.editor-inner .cell-content .right, .editor-inner .cell-content.right { text-align: right; }
.editor-inner .cell-content.centered { text-align: center; }
.editor-inner .table-row.total-row { border-top: 1px solid var(--20); border-bottom: 1px solid var(--20); }
.editor-inner .table-row.total-row .cell-content { color: var(--100); }
.editor-inner .table-row.sla-row .cell-content { color: var(--60); }
/* generalized column SUM button (EditorTable sum-btn) */
.editor-inner .table-cell.has-sum { position: relative; }
.editor-inner .table-cell .cell-sum { position: absolute; right: 8px; bottom: 6px; width: 22px; height: 22px; border: none; border-radius: 6px; background: var(--5); color: var(--60); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; }
.editor-inner.is-admin .table-cell:hover .cell-sum { opacity: 1; }
.editor-inner .table-cell .cell-sum:hover { background: var(--100); color: var(--inv-100); }
.editor-inner .table-cell .cell-sum .sum-glyph { font-size: 14px; line-height: 1; font-weight: 480; }

/* ════ IMAGE block (EditorImage) ════ */
.editor-inner .image-container { display: flex; position: relative; overflow: hidden; align-items: center; justify-content: center; box-sizing: border-box; transition: background .2s ease; padding: 12px var(--off-r,24px) 48px var(--off-l,24px); width: 100%; margin: 0; height: calc(var(--max-h,400px) - 12px - 48px); }
.editor-inner.is-admin .image-container:hover { background: var(--2); }
.editor-inner .image-container .widget-holder { width: 24px; min-width: 24px; flex: 0 0 24px; min-height: 72px; display: flex; justify-content: center; align-items: center; mix-blend-mode: exclusion; opacity: 0; }
.editor-inner.is-admin .image-block:hover .image-container .widget-holder { opacity: 1; }
.editor-inner .img-subcontainer { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; gap: 0; }
.editor-inner .img-subcontainer .iwidget { width: 24px; flex: 0 0 24px; }
.editor-inner .panel-wrapper { position: relative; height: 100%; flex: 1 1 0; min-width: 0; }
.editor-inner .image-panel { position: relative; overflow: hidden; height: 100%; border-radius: 24px; display: flex; align-items: center; justify-content: center; background: var(--inv-100); }
.editor-inner .image-panel img, .editor-inner .image-panel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.editor-inner .panel-wrapper.contain .image-panel img, .editor-inner .panel-wrapper.contain .image-panel video { object-fit: contain; }
.editor-inner .img-ctrl { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 10; display: flex; gap: 4px; opacity: 0; mix-blend-mode: exclusion; transition: opacity .2s ease; }
.editor-inner.is-admin .panel-wrapper:hover .img-ctrl { opacity: 1; }
.editor-inner .resize-handle-bottom.height { width: 150px; }

/* ════ DOC embed block (live surface preview) ════ */
.editor-inner .embed-block { width: 100%; }
.editor-inner .embed-container { padding: 0 48px; box-sizing: border-box; }
.editor-inner .embed-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; border: 1px solid var(--10); background: var(--inv-60); }
.editor-inner .embed-frame iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--inv-100); }
.editor-inner .embed-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.editor-inner .embed-orbit { width: 40px; height: 40px; }
.editor-inner .embed-orbit canvas { display: block; border-radius: 50%; }
.editor-inner .embed-label { font-size: 14px; color: var(--80); font-weight: 480; }
.editor-inner .embed-actions { display: flex; gap: 10px; align-items: center; }
.editor-inner .embed-load { padding: 9px 18px; border: none; border-radius: 999px; background: var(--100); color: var(--inv-100); font-family: var(--f-sans); font-size: 13px; font-weight: 480; cursor: pointer; }
.editor-inner .embed-load:hover { background: var(--80); }
.editor-inner .embed-open { padding: 9px 16px; border: 1px solid var(--10); border-radius: 999px; color: var(--80); font-family: var(--f-sans); font-size: 13px; text-decoration: none; }
.editor-inner .embed-open:hover { color: var(--100); border-color: var(--40); }
.editor-inner .flowchart-container { display: flex; position: relative; overflow: hidden; align-items: center; background: var(--inv-100); transition: background .2s ease; box-sizing: border-box; padding: 12px var(--off-r,24px) 48px var(--off-l,24px); width: 100%; margin: 0; height: calc(var(--max-h,420px) - 12px - 48px); min-height: 300px; }
.editor-inner .flowchart-container .widget-holder { width: 24px; flex: 0 0 24px; min-height: 72px; display: flex; align-items: center; justify-content: center; opacity: 0; }
.editor-inner.is-admin .flowchart-block:hover .flowchart-container .widget-holder { opacity: 1; }
.editor-inner .flow-subcontainer { flex: 1; position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: var(--2); }
.flow-mounted { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
.flow-grid { position: absolute; inset: 0; background-image: radial-gradient(var(--10) 0.5px, transparent 0.5px); background-size: 16px 16px; }
.flow-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.flow-edges .flow-edge { pointer-events: stroke; cursor: pointer; transform-origin: 0 0; }
.flow-edges .flow-edge.sel { stroke-width: 3 !important; }
.flow-world { position: absolute; inset: 0; transform-origin: 0 0; }
.flow-node { position: absolute; display: flex; align-items: center; justify-content: center; cursor: grab; user-select: none; }
.flow-node.sel { outline: 2px solid var(--80); outline-offset: 3px; border-radius: 8px; }
.flow-node .flow-shape { position: absolute; inset: 0; }
.flow-node.shape-circle .flow-shape { border-radius: 50%; }
.flow-node .flow-label { position: relative; z-index: 2; font-family: var(--f-sans); font-size: 13px; color: var(--inv-100); padding: 2px 6px; text-align: center; outline: none; pointer-events: none; }
.flow-node.shape-text .flow-label { color: var(--100); }
.flow-node .flow-label.editing { pointer-events: auto; background: rgba(0,0,0,.2); border-radius: 4px; }
.flow-node .flow-handle { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--inv-40); border: 1.5px solid var(--60); opacity: 0; transition: opacity .15s ease; cursor: crosshair; z-index: 3; }
.flow-node:hover .flow-handle { opacity: 1; }
.flow-node .h-top { top: -5px; left: calc(50% - 5px); }
.flow-node .h-bottom { bottom: -5px; left: calc(50% - 5px); }
.flow-node .h-left { left: -5px; top: calc(50% - 5px); }
.flow-node .h-right { right: -5px; top: calc(50% - 5px); }
.flow-toolbar { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; z-index: 20; padding: 4px 8px; background: var(--inv-40); border-radius: 48px; backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.flow-toolbar .cmb { color: var(--100); }
.flow-toolbar .cmb [data-orbit] { width: 20px; height: 20px; }
.flow-toolbar [data-shape="triangle"] [data-orbit] { transform: rotate(-90deg); }
.flow-toolbar .flow-dash.on { background: var(--100); color: var(--inv-100); }
/* portal-fake fullscreen (sandbox blocks the Fullscreen API) */
.flow-fs-fake { position: fixed !important; inset: 0 !important; z-index: 99999 !important; width: 100vw !important; height: 100vh !important; background: var(--inv-100); }

.flow-colors { display: flex; gap: 4px; margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--20); }
.flow-color { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 5px; cursor: pointer; padding: 0; }
.flow-color.active { border-color: var(--100); }
.flow-minimap { position: absolute; right: 12px; bottom: 12px; width: 120px; height: 80px; background: var(--2); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 4px rgba(0,0,0,0.25); z-index: 15; }
.flow-minimap svg { width: 100%; height: 100%; }

/* ════ SIGNATURE block ════ */
.editor-inner .file-container { margin: 0 auto; display: flex; position: relative; align-items: flex-start; justify-content: center; transition: background .2s ease; z-index: 5; padding: 12px 24px 48px; width: calc(100% - 48px); box-sizing: border-box; }
.editor-inner.is-admin .file-container:hover { background: var(--2); }
.editor-inner .panel-row { display: flex; width: 100%; min-height: 200px; position: relative; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 12px 0; }
.editor-inner .signature-block .panel-wrapper { position: relative; min-height: 200px; flex: 0 0 auto; max-width: 480px; width: 100%; margin: 0 auto; }
.editor-inner .file-panel { position: relative; overflow: hidden; height: 100%; min-height: 168px; display: flex; gap: 18px; padding: 18px; align-items: center; justify-content: flex-start; border-radius: 6px; background: var(--2); }
.editor-inner .file-panel.done { background: transparent; }
.editor-inner .canvas-subcontainer { display: flex; flex-direction: column; width: 100%; }
.editor-inner .signer-name { color: var(--20); display: flex; pointer-events: none; gap: 6px; font-size: 14px; }
.editor-inner .signer-name .signed-time { color: var(--40); }
.editor-inner .signer-name .signed-time .bold { font-weight: 480; }
.editor-inner .signature-canvas { border-radius: 6px; background: var(--inv-20); touch-action: none; user-select: none; height: 168px; width: 100%; border: 1px solid var(--100); }
.editor-inner .signed-img { height: 168px; object-fit: contain; width: auto; align-self: flex-start; }
.editor-inner .restore-btn { position: absolute; bottom: 12px; left: 12px; }
.editor-inner .sig-icon-btn { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: var(--2); color: var(--80); display: inline-flex; align-items: center; justify-content: center; }
.editor-inner .sig-icon-btn:hover { background: var(--4); color: var(--100); }
.editor-inner .sig-icon-btn [data-orbit] { width: 18px; height: 18px; }
.editor-inner .sig-sign-cta { position: absolute; bottom: 18px; right: 6px; background: var(--100); color: var(--inv-80); border: none; cursor: pointer; padding: 12px 28px; border-radius: 48px; font-family: var(--f-sans); font-weight: 480; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; transition: color .2s ease; }
.editor-inner .sig-sign-cta:hover { color: var(--inv-100); }
.editor-inner .sig-sign-cta [data-orbit] { width: 16px; height: 16px; }
.editor-inner .qr-wrapper { width: 120px; min-width: 120px; display: flex; flex-direction: column; position: relative; }
.editor-inner .qr { width: 120px; height: 120px; opacity: 0.2; border-radius: 8px; display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr); gap: 1px; overflow: hidden; }
.editor-inner .qr i { background: var(--100); border-radius: 1px; }
.editor-inner .qr i.off { background: transparent; }
body.picking-color ::selection { background: transparent !important; }

/* ════ GlobalNav NavPageTree ════ */
.nav-tree-container { display: flex; flex-direction: column; width: 100%; margin-bottom: 8px; max-width: 240px; }
#st-globalnav .dock-mid.tree-hidden .nav-tree-container { display: none; }
.nav-tree-container .tree-nodes { display: flex; flex-direction: column; gap: 4px; }
.nav-tree-container .tree-node-wrapper { display: flex; flex-direction: column; gap: 2px; }
.nav-tree-container .tree-node-wrapper.dragging { opacity: .4; }
.nav-tree-container .tree-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: none; border-radius: 8px; cursor: pointer; background: transparent; color: var(--60); font-family: var(--f-sans); font-size: 13px; text-align: left; transition: background .2s ease, color .2s ease; }
.nav-tree-container .tree-btn:hover { background: var(--2); color: var(--100); }
.nav-tree-container .tree-btn.active { background: var(--2); color: var(--100); }
.nav-tree-container .tree-btn [data-orbit] { width: 18px; height: 18px; flex: 0 0 18px; }
.nav-tree-container .tree-btn .gn-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-tree-container .tree-del { margin-left: auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; opacity: 0; color: var(--40); }
.nav-tree-container .tree-btn:hover .tree-del { opacity: 1; }
.nav-tree-container .tree-del:hover { background: var(--5); color: var(--100); }
.nav-tree-container .tree-del [data-orbit] { width: 14px; height: 14px; }
.nav-tree-container .tree-anchors { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; margin: 2px 0 4px; }
.nav-tree-container .tree-anchor { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: none; border-radius: 6px; cursor: pointer; background: transparent; color: var(--40); font-family: var(--f-sans); font-size: 12px; text-align: left; }
.nav-tree-container .tree-anchor:hover { background: var(--2); color: var(--80); }
.nav-tree-container .tree-anchor [data-orbit] { width: 14px; height: 14px; }
.nav-tree-container .contracts-section { margin-top: 12px; padding-top: 12px; position: relative; }
.nav-tree-container .contracts-section::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--5); }
.nav-tree-container .tree-acc-head { display: flex; align-items: center; gap: 2px; padding: 0; color: var(--80); }
.nav-tree-container .tree-acc-head .tree-btn { flex: 1; min-width: 0; }
.nav-tree-container .tree-acc-chev { flex: 0 0 22px; width: 22px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--40); cursor: pointer; border-radius: 6px; }
.nav-tree-container .tree-acc-chev:hover { background: var(--2); color: var(--80); }
.nav-tree-container .tree-acc-chev [data-orbit] { width: 13px; height: 13px; transition: transform .18s var(--ease-out); transform: rotate(90deg); }
.nav-tree-container .tree-acc.collapsed .tree-acc-chev [data-orbit] { transform: rotate(0deg); }
.nav-tree-container .tree-acc.collapsed .tree-children { display: none; }
.nav-tree-container .tree-acc-title { flex: 1; display: flex; align-items: center; gap: 12px; padding: 7px 4px; font-size: 12px; font-weight: 480; min-width: 0; }
.nav-tree-container .tree-acc-title [data-orbit] { width: 17px; height: 17px; flex: 0 0 17px; }
.nav-tree-container .tree-acc-title .gn-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-tree-container .tree-children { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.nav-tree-container .tree-node-wrapper.drop-into > .tree-btn, .nav-tree-container .tree-node-wrapper.drop-into > .tree-acc > .tree-acc-head { outline: 1px dashed var(--40); outline-offset: -1px; border-radius: 8px; background: var(--2); }
.nav-tree-container .tree-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; padding: 0 4px; }
.nav-tree-container .tree-add { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: none; border-radius: 8px; cursor: pointer; background: transparent; color: var(--80); font-family: var(--f-sans); font-size: 13px; text-align: left; transition: background .2s ease, color .2s ease; }
.nav-tree-container .tree-add:hover { background: var(--2); color: var(--100); }
.nav-tree-container .tree-add [data-orbit] { width: 18px; height: 18px; }

/* ════ payment overlay ════ */
.payment-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; background: var(--inv-60); backdrop-filter: blur(6px); }
.payment-overlay .pay-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; border: none; border-radius: 50%; cursor: pointer; background: var(--2); color: var(--100); display: inline-flex; align-items: center; justify-content: center; }
.payment-overlay .pay-close:hover { background: var(--4); }
.payment-overlay .pay-close [data-orbit] { width: 18px; height: 18px; }
.payment-content { position: relative; width: 440px; max-width: calc(100% - 32px); display: flex; flex-direction: column; }
.payment-content .pay-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; color: var(--60); font-size: 15px; }
.payment-content .pay-amount { color: var(--100); font-variant-numeric: tabular-nums; }
.payment-content .pay-amount .small { font-size: 12px; }
.payment-content .pay-types { display: flex; gap: 8px; margin-bottom: 8px; }
.payment-content .pay-type { flex: 1; padding: 12px; border: none; border-radius: 12px; cursor: pointer; background: var(--2); color: var(--60); font-family: var(--f-sans); font-size: 14px; transition: background .2s ease, color .2s ease; }
.payment-content .pay-type.active { background: var(--5); color: var(--100); }
.payment-content .provider-card { background: rgba(255,255,255,0.03); border-radius: 20px; backdrop-filter: blur(20px); overflow: hidden; display: flex; flex-direction: column; }
.payment-content .payment-row { padding: 22px 24px; border-bottom: 1px solid var(--5); cursor: pointer; transition: background .2s ease; }
.payment-content .payment-row:last-child { border-bottom: none; }
.payment-content .payment-row.active { background: rgba(255,255,255,0.03); }
.payment-content .row-header { display: flex; align-items: center; gap: 16px; }
.payment-content .pay-check { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--40); position: relative; }
.payment-content .payment-row.active .pay-check { border-color: var(--100); }
.payment-content .payment-row.active .pay-check::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--100); }
.payment-content .row-header [data-orbit] { width: 24px; height: 24px; color: var(--100); }
.payment-content .label { color: var(--80); font-size: 15px; }
.payment-content .fee-tag { margin-left: auto; color: var(--40); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payment-content .pay-details { padding-top: 20px; }
.payment-content .pay-cc { display: flex; flex-direction: column; gap: 12px; }
.payment-content .pay-cc .cc-row { display: flex; gap: 12px; }
.payment-content .pay-cc input { width: 100%; box-sizing: border-box; padding: 14px 18px; border-radius: 24px; border: none; background: var(--2); color: var(--100); font-family: var(--f-sans); font-size: 14px; outline: none; }
.payment-content .pay-cc input::placeholder { color: var(--40); }
.payment-content .pay-twint { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.payment-content .pay-qr { width: 160px; }
.payment-content .pay-qr .qr { width: 160px; height: 160px; opacity: 0.85; border-radius: 8px; display: grid; grid-template-columns: repeat(11,1fr); grid-template-rows: repeat(11,1fr); gap: 1px; overflow: hidden; }
.payment-content .pay-qr .qr i { background: var(--100); } .payment-content .pay-qr .qr i.off { background: transparent; }
.payment-content .pay-hint { color: var(--40); font-size: 11px; text-align: center; max-width: 220px; }
.payment-content .pay-submit { display: flex; justify-content: center; margin-top: 24px; }
.payment-content .pay-go { width: 100%; padding: 18px; border: none; border-radius: 28px; cursor: pointer; background: var(--2); color: var(--100); font-family: var(--f-sans); font-weight: 480; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background .2s ease; }
.payment-content .pay-go:hover { background: var(--5); }
.payment-content .pay-go.disabled { opacity: 0.4; pointer-events: none; }
.payment-content .pay-go [data-orbit] { width: 16px; height: 16px; }

@media (max-width: 760px) {
  .editor-inner .text-subcontainer .widget-holder { display: none; }
  .editor-inner .qr-wrapper { display: none; }
  .comments-sidebar { width: 100vw; }
}

/* ════ image block: cloud add + empty state ════ */
.editor-inner .img-subcontainer.empty { display: flex; align-items: center; justify-content: center; }
.editor-inner .image-empty-add { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 56px; border: 1px dashed var(--10); border-radius: 16px; background: transparent; color: var(--60); cursor: pointer; font-family: var(--f-sans); font-size: 14px; }
.editor-inner .image-empty-add:hover { background: var(--2); color: var(--100); border-color: var(--20); }
.editor-inner .image-empty-add [data-orbit] { width: 30px; height: 30px; }
.editor-inner .img-subcontainer .iwidget { width: 36px; flex: 0 0 36px; display: flex; align-items: center; justify-content: center; }
.editor-inner .iadd { width: 30px; height: 30px; min-width: 30px; opacity: 0; transition: opacity .2s ease, background .2s ease; }
.editor-inner .iadd [data-orbit] { width: 18px; height: 18px; }
.editor-inner.is-admin .image-block:hover .iadd { opacity: 1; }
.editor-inner .image-container .widget-holder { flex-direction: column; gap: 8px; width: 30px; min-width: 30px; flex: 0 0 30px; }

/* ════ Cloud picker modal (StationCloud) ════ */
.cloud-modal-overlay { position: fixed; inset: 0; z-index: 6000; display: flex; align-items: center; justify-content: center; background: var(--inv-60); backdrop-filter: blur(6px); }
.cloud-modal { width: 820px; max-width: calc(100vw - 48px); height: 600px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--inv-80); border: 1px solid var(--10); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 120px var(--inv-40); }
.cloud-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--5); }
.cloud-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 180; color: var(--100); }
.cloud-title [data-orbit] { width: 22px; height: 22px; color: var(--80); }
.cloud-search { flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 24px; background: var(--2); max-width: 360px; }
.cloud-search-ico [data-orbit] { width: 16px; height: 16px; color: var(--40); }
.cloud-q { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--90, var(--80)); font-family: var(--f-sans); font-size: 14px; }
.cloud-close { width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer; background: var(--2); color: var(--80); display: inline-flex; align-items: center; justify-content: center; }
.cloud-close:hover { background: var(--4); color: var(--100); }
.cloud-close [data-orbit] { width: 18px; height: 18px; }
.cloud-body { flex: 1; display: flex; min-height: 0; }
.cloud-rail { width: 180px; flex: 0 0 180px; padding: 12px; border-right: 1px solid var(--5); display: flex; flex-direction: column; gap: 4px; }
.cloud-cat { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: none; border-radius: 10px; cursor: pointer; background: transparent; color: var(--60); font-family: var(--f-sans); font-size: 14px; text-align: left; transition: background .2s ease, color .2s ease; }
.cloud-cat:hover { background: var(--2); color: var(--100); }
.cloud-cat.active { background: var(--2); color: var(--100); }
.cloud-cat [data-orbit] { width: 18px; height: 18px; }
.cloud-grid { flex: 1; overflow-y: auto; padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; align-content: start; }
.cloud-tile { position: relative; aspect-ratio: 1; border: 2px solid transparent; border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--2); padding: 0; }
.cloud-tile img, .cloud-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cloud-tile .cloud-badge { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--inv-40); backdrop-filter: blur(4px); display: inline-flex; align-items: center; justify-content: center; }
.cloud-tile .cloud-badge [data-orbit] { width: 15px; height: 15px; color: var(--100); }
.cloud-tile .cloud-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--100); display: none; align-items: center; justify-content: center; }
.cloud-tile .cloud-check [data-orbit] { width: 15px; height: 15px; color: #fff; }
.cloud-tile.picked { border-color: var(--100); }
.cloud-tile.picked .cloud-check { display: inline-flex; }
.cloud-tile .cloud-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 10px 8px; font-size: 11px; color: #fff; text-align: left; background: linear-gradient(to top, rgba(0,0,0,0.65), transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-foot { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-top: 1px solid var(--5); }
.cloud-upload { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 24px; background: var(--2); color: var(--80); cursor: pointer; font-family: var(--f-sans); font-size: 14px; }
.cloud-upload:hover { background: var(--4); color: var(--100); }
.cloud-upload [data-orbit] { width: 17px; height: 17px; }
.cloud-confirm { padding: 12px 28px; border: none; border-radius: 24px; cursor: pointer; background: var(--100); color: var(--inv-100); font-family: var(--f-sans); font-weight: 480; font-size: 14px; }
.cloud-confirm:disabled { opacity: 0.4; pointer-events: none; }