:root {
  color-scheme: dark;
  --canvas: #1f1f1e;
  --sidebar: #1b1b1a;
  --surface: #262625;
  --surface-2: #2d2d2b;
  --surface-3: #333330;
  --border: #41413d;
  --border-soft: #343431;
  --text: #ffffff;
  --muted: #9b9b95;
  --muted-2: #72726d;
  --heart: #f25074;
  --heart-strong: #ff6788;
  --heart-soft: #3b222a;
  --success: #91c8a3;
  --warning: #d6b278;
  --danger: #e08d9c;
  --radius: 12px;
  --shadow: 0 22px 70px rgba(0, 0, 0, .28);
  --font-display: "Inter Variable", "Segoe UI Variable Display", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter Variable", "Segoe UI Variable Text", "Aptos", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden; background: var(--canvas); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.45; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid rgba(242, 80, 116, .92); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .42; }

.skip-link { position: fixed; z-index: 999; left: 12px; top: 12px; transform: translateY(-160%); padding: 10px 13px; border-radius: 8px; background: white; color: #1f1f1d; font-weight: 750; text-decoration: none; transition: transform .16s ease; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 258px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 14px 12px 12px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--border-soft); background: var(--sidebar); }
.sidebar-top, .sidebar-bottom { display: grid; gap: 10px; }
.sidebar-bottom { margin-top: auto; }

.workspace-switcher, .nav-item, .filter-item, .project-shortcut, .sidebar-promo, .profile-button { width: 100%; border: 0; border-radius: 9px; background: transparent; color: #d8d8d4; text-align: left; cursor: pointer; }
.workspace-switcher { min-height: 48px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 6px 8px; }
.workspace-switcher:hover, .project-shortcut:hover, .profile-button:hover { background: #252524; }
.heart-logo { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #59303b; border-radius: 10px; background: #2a171d; color: var(--heart); box-shadow: inset 0 1px rgba(255,255,255,.03); }
.heart-logo span { font-size: 20px; filter: drop-shadow(0 0 9px rgba(242,80,116,.3)); }
.workspace-copy { min-width: 0; display: grid; gap: 1px; }
.workspace-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 760; }
.workspace-copy small { color: var(--muted-2); font-size: 12px; }
.chevron { color: var(--muted-2); font-size: 13.5px; }

.primary-nav, .project-filters { display: grid; gap: 3px; }
.nav-item, .filter-item { min-height: 38px; display: grid; align-items: center; gap: 9px; padding: 8px 10px; color: #aaa9a4; font-size: 13px; font-weight: 620; }
.nav-item { grid-template-columns: 21px minmax(0,1fr) auto; }
.nav-item[hidden] { display: none !important; }
.filter-item { grid-template-columns: 21px minmax(0,1fr) auto; }
.nav-item:hover, .filter-item:hover { background: #252524; color: #f2f2ef; }
.nav-item.active, .filter-item.active { background: #2a2a28; color: white; box-shadow: inset 0 0 0 1px rgba(255,255,255,.035); }
.nav-icon, .filter-item > span:first-child { width: 20px; text-align: center; color: #8d8d87; font-size: 14px; }
.nav-item.active .nav-icon, .filter-item.active > span:first-child { color: #f0a4b5; }
.workspace-nav-item { position: relative; }
.workspace-nav-state { min-width: 24px; min-height: 22px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.035); color: #85857f; font-size: 12.5px; line-height: 1; }
.workspace-nav-item.workspace-ready .workspace-nav-state { border-color: rgba(111,206,151,.24); background: rgba(64,151,101,.10); color: #8fd7ad; }
.workspace-nav-item.workspace-locked .workspace-nav-state { border-color: rgba(218,174,93,.20); background: rgba(218,174,93,.08); color: #d8b470; }
.workspace-entry-open #workspaceNavBtn { background: #2a2a28; color: #fff; box-shadow: inset 3px 0 0 var(--bh-control-pink, #ef6e9f), inset 0 0 0 1px rgba(255,255,255,.035); }
.workspace-entry-open #workspaceNavBtn .nav-icon { color: #f0a4b5; }
kbd { padding: 2px 5px; border: 1px solid var(--border); border-bottom-color: #51514d; border-radius: 5px; background: #262625; color: #8f8f89; font: 9px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; box-shadow: inset 0 -1px rgba(0,0,0,.2); }
.filter-item b { min-width: 21px; padding: 2px 5px; border-radius: 999px; background: #30302e; color: #8f8f89; font-size: 11.5px; text-align: center; }

.sidebar-section { display: grid; gap: 5px; padding-top: 7px; }
.sidebar-heading { padding: 0 10px 4px; color: #666661; font-size: 12px; font-weight: 760; letter-spacing: .045em; text-transform: uppercase; }

.project-shortcut { min-height: 52px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px 8px; }
.project-shortcut > span:nth-child(2), .sidebar-promo > span:nth-child(2), .profile-button > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.project-shortcut strong, .sidebar-promo strong, .profile-button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.project-shortcut small, .sidebar-promo small, .profile-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #73736d; font-size: 11.5px; }
.project-dot { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(135deg, #3a222b, #28282a); color: #f6b6c4; font-size: 12px; font-weight: 820; }
.sidebar-promo { min-height: 49px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 8px; align-items: center; padding: 7px 8px; border: 1px solid transparent; }
.sidebar-promo:hover { border-color: var(--border-soft); background: #222221; }
.promo-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #282827; color: #d6b278; }
.profile-button { min-height: 52px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-top: 1px solid var(--border-soft); border-radius: 0; }
.avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #ece8df; color: #2a2925; font-size: 12.5px; font-weight: 820; }

.workspace-access-lock { display: grid; gap: 14px; padding: 2px 0 4px; }
.workspace-access-intro { display: grid; gap: 8px; padding: 18px; border: 1px solid rgba(239,110,159,.16); border-radius: 14px; background: linear-gradient(145deg,rgba(239,110,159,.07),rgba(255,255,255,.018)); }
.workspace-access-intro h3 { margin: 0; color: #f5f4ef; font-size: 17px; }
.workspace-access-intro p { margin: 0; color: #aaa9a4; font-size: 13.5px; line-height: 1.55; }
.workspace-access-lock-icon { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(239,110,159,.22); border-radius: 11px; background: rgba(239,110,159,.08); color: #f0a4b5; font-size: 18px; }
.workspace-access-requirement { color: #e9d7a5 !important; font-weight: 700; }
.workspace-access-plans { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.workspace-access-plan { min-height: 42px; display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.025); color: #d9d8d2; }
.workspace-access-plan > span { color: #8fd7ad; font-weight: 800; }
.workspace-access-plan strong { font-size: 13px; }
.workspace-access-help { margin: 0; color: #83837e; font-size: 13px; line-height: 1.5; }
.workspace-exit-button { width: 100%; min-height: 42px; display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 8px; margin: 2px 0 4px; padding: 9px 11px; border: 1px solid rgba(239,110,159,.18); border-radius: 10px; background: rgba(239,110,159,.055); color: #e7e5df; text-align: left; cursor: pointer; }
.workspace-exit-button:hover, .workspace-exit-button:focus-visible { border-color: rgba(239,110,159,.38); background: rgba(239,110,159,.11); color: #fff; outline: none; }
.workspace-exit-button > span { color: #f0a4b5; font-size: 15px; }
.workspace-exit-button strong { font-size: 12.5px; }

/* overflow-x: clip keeps wide decorations (the creator pages' glow) from making
   the page wider than the window, which let it slide sideways under the menu. */
.main-content { position: relative; min-height: 100vh; margin-left: 258px; overflow-x: clip; isolation: isolate; background: #0b090f; }
.heart-field-canvas { position: fixed; inset: 0; z-index: 0; width: 100vw; height: 100vh; pointer-events: none; background: #0b090f; }
.main-content::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(11,9,15,0) 0%, rgba(11,9,15,.12) 55%, rgba(6,6,9,.5) 100%); }
.content-wrap { position: relative; z-index: 2; width: min(1260px, calc(100% - 72px)); margin: 0 auto; padding: 38px 0 80px; }
.main-content .tools-banner { border-color: rgba(255,255,255,.09); background: rgba(22,20,26,.72); backdrop-filter: blur(18px) saturate(125%); }
.main-content .tools-banner:hover { border-color: rgba(255,79,163,.38); background: rgba(29,27,33,.84); }
.main-content .composer { border-color: rgba(255,255,255,.1); background: rgba(18,16,22,.82); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,79,163,.05), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(20px) saturate(120%); }
.main-content .composer:focus-within { border-color: rgba(255,79,163,.42); box-shadow: 0 30px 86px rgba(0,0,0,.5), 0 0 0 4px rgba(255,79,163,.08), inset 0 1px rgba(255,255,255,.06); }
.main-content .projects-section, .main-content .recent-section, .main-content .templates-section { border-top-color: rgba(255,255,255,.07); }
.main-content .project-card, .main-content .recent-card, .main-content .template-card, .main-content .empty-state { border-color: rgba(255,255,255,.08); background: rgba(19,17,23,.8); backdrop-filter: blur(12px); }
.main-content .project-card:hover, .main-content .recent-card:hover, .main-content .template-card:hover { border-color: rgba(255,79,163,.34); background: rgba(26,24,30,.9); }
.main-content .library-search, .main-content .library-toolbar select, .main-content .template-toolbar select, .main-content .view-toggle { border-color: rgba(255,255,255,.09); background: rgba(18,16,22,.76); backdrop-filter: blur(12px); }
.main-content .folder-chip { border-color: rgba(255,255,255,.08); background: rgba(18,16,22,.5); }
.main-content .folder-chip:hover, .main-content .folder-chip.active { border-color: rgba(255,79,163,.34); background: rgba(28,21,32,.82); }
.hero { width: min(930px, 100%); margin: 0 auto; padding: 18px 0 64px; }
.tools-banner { width: min(520px, 100%); min-height: 54px; margin: 0 auto 48px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 8px 11px; border: 1px solid var(--border); border-radius: 12px; background: #242423; color: #d5d5d0; text-align: left; cursor: pointer; box-shadow: none; }
.tools-banner:hover { background: #292928; border-color: #55554f; }
.tools-banner > span:nth-child(2) { display: grid; gap: 2px; }
.tools-banner strong { font-size: 12.5px; }
.tools-banner small { color: var(--muted-2); font-size: 11.5px; }
.tools-orbit { position: relative; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #1b1b1b; overflow: hidden; }
.tools-orbit::before { content: "♥"; position: relative; z-index: 2; color: var(--heart); font-size: 14px; }
.tools-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #808079; }
.tools-orbit i:nth-child(1) { transform: translate(-11px,-10px); }
.tools-orbit i:nth-child(2) { transform: translate(12px,-4px); }
.tools-orbit i:nth-child(3) { transform: translate(3px,12px); }

.hero-heading { margin-bottom: 24px; text-align: center; }
.eyebrow { display: inline-block; color: #777771; font-size: 12px; font-weight: 780; letter-spacing: .075em; text-transform: uppercase; }
h1, h2 { font-family: var(--font-display); }
h1 { margin: 9px 0 8px; font-size: clamp(42px, 5.5vw, 67px); line-height: .96; letter-spacing: -.055em; font-weight: 690; }
.hero-heading p { max-width: 650px; margin: 0 auto; color: #9d9d97; font-size: 14px; line-height: 1.55; }

.composer { position: relative; min-height: 192px; padding: 15px; border: 1px solid #4c4c47; border-radius: 22px; background: #1a1a19; box-shadow: 0 22px 60px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025); transition: border-color .16s ease, box-shadow .16s ease; }
.composer:focus-within { border-color: #73736c; box-shadow: 0 24px 70px rgba(0,0,0,.24), 0 0 0 1px rgba(242,80,116,.08), inset 0 1px rgba(255,255,255,.04); }
.composer textarea { width: 100%; min-height: 118px; max-height: 240px; resize: vertical; padding: 10px 10px 8px; border: 0; outline: 0; background: transparent; color: white; font-size: 15px; line-height: 1.5; }
.composer textarea::placeholder { color: #6f6f69; }
.agent-ai-notice { margin: 8px 5px 0; color: #85857f; font-size: 12px; line-height: 1.45; text-align: left; }
.editor-agent-ai-notice { margin: 7px 12px 12px; }
html[dir="rtl"] .agent-ai-notice { text-align: right; }
.composer-footer { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px 0; }
.composer-left { display: flex; align-items: center; gap: 7px; }
.icon-button, .build-button, .text-button, .secondary-button, .primary-button { border: 1px solid var(--border); background: #242423; color: #d5d5d0; cursor: pointer; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 10px; font-size: 18px; }
.icon-button:hover { border-color: #5a5a54; background: #2b2b29; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--heart); box-shadow: 0 0 0 4px rgba(242,80,116,.08); }
.build-button { min-width: 88px; min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 7px 12px; border-color: #8e3f55; border-radius: 10px; background: var(--heart); color: #fff; font-weight: 760; }
.build-button:not(:disabled):hover { border-color: var(--heart-strong); background: var(--heart-strong); }

.projects-section, .recent-section, .templates-section { padding: 40px 0; border-top: 1px solid var(--border-soft); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.section-heading.compact { margin-bottom: 14px; }
h2 { margin: 5px 0 0; font-size: clamp(24px, 2.5vw, 33px); line-height: 1; letter-spacing: -.035em; font-weight: 660; }
.text-button { min-height: 36px; padding: 7px 10px; border-radius: 9px; background: transparent; color: #aaa9a3; font-size: 12.5px; }
.text-button:hover { background: #252524; color: white; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #1b1b1a; transition: border-color .15s ease, background .15s ease; }
.project-card:hover { border-color: #5b5b55; background: #20201f; }
.project-preview { position: relative; width: 100%; height: 150px; display: block; overflow: hidden; padding: 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: #f5f4ef; cursor: pointer; }
.project-preview::before, .project-preview::after { content: ""; position: absolute; border-radius: 10px; }
.project-preview::before { inset: 18px 16px 18px 16px; border: 1px solid rgba(31,31,30,.12); background: white; box-shadow: 0 12px 28px rgba(31,31,30,.12); }
.project-preview::after { left: 34px; right: 34px; top: 43px; height: 56px; background: linear-gradient(90deg, #f5d2da 0 25%, #ece9e3 25% 55%, #2e2e2d 55%); }
.project-card[data-tone="blue"] .project-preview::after { background: linear-gradient(90deg, #cad9ff 0 28%, #edeae3 28% 60%, #38363c 60%); }
.project-card[data-tone="olive"] .project-preview::after { background: linear-gradient(90deg, #d6ddbd 0 28%, #edeae3 28% 60%, #373a2d 60%); }
.project-preview-icon { position: absolute; z-index: 2; left: 26px; top: 27px; min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 6px; border: 1px solid rgba(31,31,30,.12); border-radius: 8px; background: rgba(255,255,255,.88); color: #30302e; box-shadow: 0 6px 18px rgba(31,31,30,.08); font-size: 12px; font-weight: 800; letter-spacing: -.02em; }
.project-preview-live { isolation:isolate; background:#17151b; cursor:default; }
.project-preview-live::before, .project-preview-live::after { display:none; }
.project-preview-placeholder { position:absolute; inset:0; z-index:0; display:grid; place-items:center; align-content:center; gap:7px; background:radial-gradient(circle at 50% 32%,rgba(242,80,116,.11),transparent 34%),linear-gradient(145deg,#211f25,#17151b 68%); color:#91a8ba; transition:opacity .18s ease; }
.project-preview-placeholder-mark { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(242,80,116,.28); border-radius:10px; background:rgba(242,80,116,.08); color:var(--heart); font-size:15px; box-shadow:0 8px 28px rgba(0,0,0,.18); }
.project-preview-placeholder-label { max-width:80%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:720; letter-spacing:.01em; }
.project-card-preview-canvas { position:absolute; inset:0; z-index:1; overflow:hidden; opacity:0; pointer-events:none; background:#17151b; transition:opacity .18s ease; }
.project-preview-live.has-live-preview .project-card-preview-canvas { opacity:1; }
.project-preview-live.has-live-preview .project-preview-placeholder { opacity:0; }
.project-preview-thumbnail-frame { position:absolute !important; left:0; top:0; max-width:none !important; min-width:0 !important; min-height:0 !important; margin:0; border:0; pointer-events:none !important; }
.project-preview-open { position:absolute; inset:0; z-index:3; width:100%; height:100%; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; }
.project-preview-open:hover { box-shadow:inset 0 0 0 1px rgba(242,80,116,.34); }
.project-preview-open:focus-visible { outline:2px solid rgba(242,80,116,.94); outline-offset:-3px; }
.project-preview-live[data-preview-state="loading"] .project-preview-placeholder-mark { animation:project-preview-card-pulse 1.4s ease-in-out infinite; }
@keyframes project-preview-card-pulse { 50% { transform:scale(1.06); box-shadow:0 8px 32px rgba(242,80,116,.16); } }
@media (prefers-reduced-motion: reduce) { .project-preview-placeholder, .project-card-preview-canvas { transition:none; } .project-preview-live[data-preview-state="loading"] .project-preview-placeholder-mark { animation:none; } }
.project-body { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px 12px 12px; }
.project-meta { min-width: 0; display: grid; gap: 3px; }
.project-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.project-meta span { color: #7d7d77; font-size: 12px; }
.project-actions { display: flex; gap: 5px; }
.project-actions button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #85857f; cursor: pointer; }
.project-actions button:hover { border-color: var(--border); background: #292927; color: white; }
.project-actions button.starred { color: #f2c97a; }
.empty-state[hidden] { display: none; }
.empty-state { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 24px; border: 1px dashed var(--border); border-radius: 12px; color: #8c8c86; text-align: center; }
.empty-state strong { color: #c3c3bd; font-size: 13.5px; }
.empty-state span { font-size: 12.5px; }

.recent-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; }
.recent-card { min-width: 0; min-height: 72px; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 9px; align-items: center; padding: 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: #1b1b1a; cursor: pointer; }
.recent-card:hover { border-color: var(--border); background: #222221; }
.recent-thumb { width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(145deg, #512d38, #29292a); }
.recent-card:nth-child(2) .recent-thumb { background: linear-gradient(145deg, #334156, #29292a); }
.recent-card:nth-child(3) .recent-thumb { background: linear-gradient(145deg, #41472e, #29292a); }
.recent-card:nth-child(4) .recent-thumb { background: linear-gradient(145deg, #57432d, #29292a); }
.recent-card > span:last-child { min-width: 0; display: grid; gap: 3px; }
.recent-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.recent-card small { color: #777771; font-size: 11.5px; }

.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
.template-card { min-width: 0; min-height: 244px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #1b1b1a; cursor: pointer; transition: transform .22s cubic-bezier(.2,.75,.2,1), border-color .2s ease, box-shadow .22s ease; transform-origin: center; }
.template-preview { position: relative; height: 168px; overflow: hidden; background: linear-gradient(145deg,#e8e9ec,#d8dbe1); }
.template-preview .shape { position: absolute; border-radius: 10px; }
.template-preview .shape.one { left: 17px; top: 18px; width: 43%; height: 132px; background: #222220; }
.template-preview .shape.two { right: 18px; top: 18px; width: 45%; height: 64px; background: #fff; border: 1px solid rgba(31,31,30,.1); }
.template-preview .shape.three { right: 18px; bottom: 18px; width: 45%; height: 58px; background: #d0a2ad; }
.template-card[data-accent="blue"] .shape.three { background: #9db3e3; }
.template-card[data-accent="olive"] .shape.three { background: #a8b18d; }
.template-card[data-accent="gold"] .shape.three { background: #c7a36d; }
.template-card[data-accent="violet"] .shape.three { background: #a999cb; }
.template-card[data-accent="coral"] .shape.three { background: #dd8c78; }

/* Read-only template gallery previews. These are lightweight DOM illustrations, never live iframes. */
.template-mini { pointer-events: none; user-select: none; isolation: isolate; }
.template-mini::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 82% 12%,rgba(255,255,255,.58),transparent 34%), linear-gradient(135deg,rgba(255,255,255,.22),transparent 52%); }
.template-mini-frame { position: absolute; z-index: 1; inset: 11px 13px; overflow: hidden; border: 1px solid rgba(29,27,33,.13); border-radius: 11px; background: #f8f8f6; box-shadow: 0 8px 24px rgba(32,30,36,.12); }
.template-mini-frame.is-dark { border-color: rgba(255,255,255,.1); background: #131117; }
.template-mini-topbar { height: 16px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border-bottom: 1px solid rgba(40,38,44,.09); background: rgba(255,255,255,.72); }
.template-mini-frame.is-dark .template-mini-topbar { border-color: rgba(255,255,255,.09); background: #1b191f; }
.template-mini-traffic { display: inline-flex; gap: 2px; }
.template-mini-dot { width: 3px; height: 3px; border-radius: 50%; background: #b8bcc4; }
.template-mini-dot:first-child { background: #e08e93; }
.template-mini-dot:nth-child(2) { background: #deb86e; }
.template-mini-dot:nth-child(3) { background: #83bd93; }
.template-mini-address { width: 30%; height: 4px; margin-left: 3px; border-radius: 999px; background: #d9dce1; }
.template-mini-frame.is-dark .template-mini-address { background: #36343a; }
.template-mini-utility { width: 9px; height: 4px; margin-left: auto; border-radius: 999px; background: #d4d7dc; }
.template-mini-frame.is-dark .template-mini-utility { background: #3a383e; }
.template-mini-line { display: block; height: 4px; border-radius: 999px; background: #c9cdd3; }
.template-mini-line.is-wide { width: 86%; }
.template-mini-line.is-medium { width: 64%; }
.template-mini-line.is-short { width: 42%; }
.template-mini-line.is-tiny { width: 25%; }
.template-mini-line.accent { background: #f06b9e; }
.template-mini-line.brand { background: #353339; }
.template-mini-line.strong { height: 7px; background: #2d2b31; }
.template-mini-line.positive { background: #8bc7a0; }
.template-mini-line.light { background: rgba(255,255,255,.9); }
.template-mini-line.muted-light { background: rgba(255,255,255,.34); }
.template-mini-pill { display: block; width: 24px; height: 8px; border-radius: 999px; background: #d7dae0; }
.template-mini-pill.dark { background: #2d2b31; }
.template-mini-pill.accent-fill { background: #ef6e9f; }
.template-mini-pill.light-fill { background: rgba(255,255,255,.86); }
.template-mini-pill.positive-fill { background: #a5d4b3; }
.template-mini-pill.warning { background: #f0c978; }
.template-mini-inline { display: flex; justify-content: flex-end; gap: 5px; }

/* Moodboard */
.template-mini-moodboard { position: relative; height: calc(100% - 16px); background: #eeeae3; }
.template-mini-photo { position: absolute; overflow: hidden; border-radius: 7px; box-shadow: 0 3px 8px rgba(52,44,41,.12); }
.template-mini-photo::before,.template-mini-photo::after { content: ""; position: absolute; border-radius: 50%; }
.template-mini-photo.photo-a { left: 7px; top: 8px; width: 35%; height: 66%; background: linear-gradient(145deg,#7f6e64,#c7b5a3); }
.template-mini-photo.photo-a::before { width: 30px; height: 30px; left: 8px; top: 14px; background: rgba(245,225,202,.68); }
.template-mini-photo.photo-a::after { width: 48px; height: 22px; right: -8px; bottom: 9px; border-radius: 18px 0 0 18px; background: #596b5d; transform: rotate(-12deg); }
.template-mini-photo.photo-b { right: 8px; bottom: 8px; width: 31%; height: 42%; background: linear-gradient(160deg,#ad7e6d,#e0b8aa 54%,#efe3d6 55%); }
.template-mini-photo.photo-b::before { width: 22px; height: 22px; right: 6px; top: 6px; background: rgba(255,244,220,.7); }
.template-mini-note { position: absolute; left: 39%; top: 9px; width: 28%; height: 46px; display: grid; align-content: center; gap: 6px; padding: 7px; border-radius: 4px; background: #f3cf7d; transform: rotate(-2deg); box-shadow: 0 3px 7px rgba(67,51,30,.1); }
.template-mini-note .template-mini-line { background: rgba(84,62,40,.28); }
.template-mini-swatches { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 3px; }
.template-mini-swatch { width: 11px; height: 11px; border-radius: 50%; background: #b57a7f; }
.template-mini-swatch:nth-child(2) { background: #e0b9a0; }
.template-mini-swatch:nth-child(3) { background: #879b82; }
.template-mini-swatch:nth-child(4) { background: #514a48; }
.template-mini-copy { position: absolute; right: 8px; top: 10px; width: 27%; display: grid; gap: 5px; }

/* Slides */
.template-mini-slides { height: calc(100% - 16px); display: grid; grid-template-columns: 37px 1fr; background: #eceef4; }
.template-mini-slide-rail { display: grid; align-content: start; gap: 5px; padding: 6px 5px; border-right: 1px solid #d7dbe4; background: #f5f6f9; }
.template-mini-slide-thumb { height: 24px; border: 1px solid #d3d7df; border-radius: 3px; background: linear-gradient(135deg,#fff 0 58%,#a3b8e5 59%); }
.template-mini-slide-thumb:first-child { outline: 1px solid #7d96ce; }
.template-mini-main-slide { position: relative; margin: 7px; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 3px 10px rgba(56,54,60,.08); }
.template-mini-slide-copy { position: absolute; left: 10px; top: 13px; width: 48%; display: grid; gap: 5px; }
.template-mini-slide-chart { position: absolute; right: 9px; top: 13px; width: 35%; height: 56px; display: flex; align-items: end; gap: 3px; padding: 7px; border-radius: 5px; background: #eef2fb; }
.template-mini-chart-bar { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: #849dd4; }
.template-mini-chart-bar:nth-child(1) { height: 32%; }
.template-mini-chart-bar:nth-child(2) { height: 58%; }
.template-mini-chart-bar:nth-child(3) { height: 44%; }
.template-mini-chart-bar:nth-child(4) { height: 76%; }
.template-mini-chart-bar:nth-child(5) { height: 61%; }
.template-mini-chart-bar:nth-child(6) { height: 88%; }
.template-mini-chart-bar:nth-child(7) { height: 70%; }
.template-mini-speaker-notes { position: absolute; left: 10px; right: 10px; bottom: 8px; display: grid; gap: 4px; padding-top: 5px; border-top: 1px solid #eceef3; }
.template-mini-speaker-notes .template-mini-line { height: 3px; background: #d9dce3; }

/* Store */
.template-mini-store { height: calc(100% - 16px); padding: 6px 8px 7px; background: #f5f1e8; }
.template-mini-store-nav { height: 13px; display: flex; align-items: center; gap: 6px; }
.template-mini-store-nav .template-mini-pill { margin-left: auto; }
.template-mini-store-hero { height: 57px; display: grid; grid-template-columns: 1.05fr .8fr; gap: 7px; margin-top: 4px; }
.template-mini-store-copy { display: grid; align-content: center; gap: 4px; padding-left: 2px; }
.template-mini-product-hero { position: relative; overflow: hidden; border-radius: 7px; background: #d9ddc8; }
.template-mini-product-object { position: absolute; width: 32px; height: 34px; left: 50%; top: 50%; border-radius: 14px 14px 9px 9px; background: linear-gradient(90deg,#a68e70,#d8c6ac); box-shadow: inset -6px -5px 0 rgba(72,65,55,.1); transform: translate(-50%,-48%); }
.template-mini-product-object::after { content: ""; position: absolute; width: 17px; height: 8px; left: 7px; top: -4px; border: 3px solid #9b8266; border-bottom: 0; border-radius: 8px 8px 0 0; }
.template-mini-products { height: 45px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 5px; }
.template-mini-product-card { display: grid; grid-template-columns: 29px 1fr; grid-template-rows: 1fr 1fr; column-gap: 4px; align-items: center; padding: 3px; border: 1px solid rgba(49,50,45,.08); border-radius: 5px; background: #fffdf8; }
.template-mini-product-art { grid-row: 1 / 3; width: 27px; height: 33px; border-radius: 4px; background: #dfd8c9; }
.template-mini-product-art.art-1 { background: radial-gradient(circle,#8f887b 0 23%,#d8d1c5 25% 45%,#eee9df 47%); }
.template-mini-product-art.art-2 { background: radial-gradient(circle at 50% 38%,#f5dc98 0 25%,#c5aa69 27% 37%,#e7dfd0 39%); }
.template-mini-product-art.art-3 { background: linear-gradient(36deg,#97704d 0 43%,#c6aa86 44% 56%,#e6ded0 57%); }
.template-mini-product-card .template-mini-line { height: 3px; }

/* Dashboard / insights */
.template-mini-dashboard { height: calc(100% - 16px); display: grid; grid-template-columns: 34px 1fr; background: #f3f5f8; }
.template-mini-dashboard-side { display: grid; align-content: start; gap: 7px; padding: 7px 5px; background: #29272d; }
.template-mini-dashboard-logo { width: 17px; height: 6px; margin-bottom: 5px; border-radius: 999px; background: #f07aa6; }
.template-mini-dashboard-nav { width: 22px; height: 5px; border-radius: 999px; background: #4c5360; }
.template-mini-dashboard-nav:first-of-type { background: #e4e7eb; }
.template-mini-dashboard-main { min-width: 0; padding: 7px; }
.template-mini-dashboard-head,.template-mini-campaign-head,.template-mini-budget-head,.template-mini-health-head,.template-mini-inventory-head,.template-mini-sprint-head { display: flex; justify-content: space-between; align-items: center; }
.template-mini-dashboard-head > div,.template-mini-campaign-head > div,.template-mini-budget-head > div,.template-mini-health-head > div,.template-mini-inventory-head > div,.template-mini-sprint-head > div { width: 55%; display: grid; gap: 4px; }
.template-mini-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 7px 0 5px; }
.template-mini-stat { min-width: 0; display: grid; gap: 3px; padding: 5px; border: 1px solid #e1e5ea; border-radius: 5px; background: white; }
.template-mini-stat .template-mini-line { height: 3px; }
.template-mini-stat .strong { height: 6px; }
.template-mini-dashboard-lower { display: grid; grid-template-columns: 1.3fr .7fr; gap: 5px; height: 49px; }
.template-mini-dashboard-chart { display: flex; align-items: end; gap: 3px; padding: 7px 6px 5px; border: 1px solid #e1e5ea; border-radius: 5px; background: white; }
.template-mini-dashboard-chart .template-mini-chart-bar { background: linear-gradient(#9aaae9,#697fcf); }
.template-mini-dashboard-list { display: grid; align-content: center; gap: 4px; padding: 5px; border: 1px solid #e1e5ea; border-radius: 5px; background: white; }
.template-mini-list-row { height: 4px; border-radius: 999px; background: linear-gradient(90deg,#bfc5cf 0 72%,#8fcea7 73%); }

/* Portfolio */
.template-mini-portfolio { height: calc(100% - 16px); padding: 7px 8px; background: #121016; }
.template-mini-portfolio-nav { display: flex; justify-content: space-between; align-items: center; }
.template-mini-portfolio-nav > .template-mini-line { width: 25%; }
.template-mini-portfolio-intro { width: 65%; display: grid; gap: 5px; margin: 8px 0 7px; }
.template-mini-portfolio-intro .is-wide { height: 7px; }
.template-mini-portfolio-grid { height: 60px; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.template-mini-portfolio-project { position: relative; overflow: hidden; border-radius: 5px; }
.template-mini-portfolio-project::before { content: ""; position: absolute; width: 36px; height: 36px; right: -7px; bottom: -9px; border-radius: 50%; background: rgba(255,255,255,.16); }
.template-mini-portfolio-project.project-a { grid-row: 1 / 3; background: linear-gradient(145deg,#5144d8,#28234d); }
.template-mini-portfolio-project.project-b { background: linear-gradient(145deg,#a76078,#4a2936); }
.template-mini-portfolio-project.project-c { background: linear-gradient(145deg,#3d8073,#343238); }

/* Campaign */
.template-mini-campaign { height: calc(100% - 16px); padding: 7px; background: #f5f5f2; }
.template-mini-campaign-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin: 8px 0 6px; }
.template-mini-campaign-metric { height: 24px; border: 1px solid #e2dfd8; border-radius: 5px; background: linear-gradient(180deg,#fff,#faf9f6); }
.template-mini-campaign-metric::before { content: ""; display: block; width: 45%; height: 4px; margin: 5px; border-radius: 999px; background: #d6b77b; box-shadow: 0 8px 0 #444b55; }
.template-mini-campaign-lower { display: grid; grid-template-columns: 1fr .92fr; gap: 6px; height: 62px; }
.template-mini-funnel,.template-mini-checklist { padding: 6px; border: 1px solid #e2dfd8; border-radius: 5px; background: white; }
.template-mini-funnel { display: grid; align-content: center; justify-items: center; gap: 4px; }
.template-mini-funnel-step { height: 7px; border-radius: 2px; background: #d1ad6f; }
.template-mini-funnel-step:nth-child(1) { width: 90%; }
.template-mini-funnel-step:nth-child(2) { width: 72%; }
.template-mini-funnel-step:nth-child(3) { width: 52%; }
.template-mini-funnel-step:nth-child(4) { width: 34%; }
.template-mini-checklist { display: grid; align-content: center; gap: 5px; }
.template-mini-check-row { display: grid; grid-template-columns: 8px 1fr; gap: 4px; align-items: center; }
.template-mini-check { width: 7px; height: 7px; border: 1px solid #cab07f; border-radius: 2px; background: #f8edd8; }
.template-mini-check-row:first-child .template-mini-check { background: #d7b676; }
.template-mini-check-row .template-mini-line { height: 3px; }

/* Event */
.template-mini-event { height: calc(100% - 16px); background: #f7f3ee; }
.template-mini-event-hero { height: 79px; display: grid; grid-template-columns: 42px 1fr; gap: 8px; padding: 9px; background: linear-gradient(135deg,#385170,#7b6b98); }
.template-mini-event-date { width: 38px; height: 42px; display: grid; place-items: center; align-content: center; border-radius: 7px; background: #f8f4ec; color: #39373d; line-height: 1; }
.template-mini-event-date strong { font-size: 16px; letter-spacing: -.04em; }
.template-mini-event-date span { margin-top: 2px; font-size: 5px; letter-spacing: .12em; }
.template-mini-event-copy { display: grid; align-content: center; gap: 5px; }
.template-mini-ticket-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 7px; }
.template-mini-ticket { height: 35px; border: 1px solid #ded7cd; border-radius: 5px; background: #fff; }
.template-mini-ticket::before { content: ""; display: block; width: 45%; height: 4px; margin: 7px 6px 0; border-radius: 999px; background: #6f7d91; box-shadow: 0 9px 0 #d7d0c8; }

/* Budget */
.template-mini-budget,.template-mini-health,.template-mini-inventory,.template-mini-sprint { height: calc(100% - 16px); padding: 7px; background: #f4f6f4; }
.template-mini-budget-content { height: 86px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 6px; margin-top: 8px; }
.template-mini-budget-ring-card,.template-mini-budget-table { border: 1px solid #dfe4df; border-radius: 6px; background: white; }
.template-mini-budget-ring-card { display: grid; place-items: center; align-content: center; gap: 5px; }
.template-mini-budget-ring { width: 36px; height: 36px; border-radius: 50%; background: conic-gradient(#7f9e79 0 62%,#d8dfd4 62%); position: relative; }
.template-mini-budget-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: white; }
.template-mini-budget-ring-card .template-mini-line { height: 3px; }
.template-mini-budget-table { display: grid; align-content: center; gap: 7px; padding: 8px; }
.template-mini-budget-row { display: grid; grid-template-columns: .75fr 1fr; gap: 6px; align-items: center; }
.template-mini-budget-row .template-mini-line { height: 3px; }
.template-mini-budget-bar { height: 5px; border-radius: 999px; background: linear-gradient(90deg,#88a582 0 68%,#e4e7df 69%); }

/* Customer health */
.template-mini-health { background: #f7f3f5; }
.template-mini-health-content { height: 87px; display: grid; grid-template-columns: .64fr 1.36fr; gap: 6px; margin-top: 8px; }
.template-mini-health-score,.template-mini-health-accounts { border: 1px solid #e6dfe3; border-radius: 6px; background: white; }
.template-mini-health-score { display: grid; place-items: center; align-content: center; gap: 5px; }
.template-mini-health-ring { width: 37px; height: 37px; border-radius: 50%; background: conic-gradient(#d66f92 0 78%,#eee3e7 78%); position: relative; }
.template-mini-health-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: white; }
.template-mini-health-score .template-mini-line { height: 3px; }
.template-mini-health-accounts { display: grid; align-content: center; gap: 5px; padding: 7px; }
.template-mini-health-row { display: grid; grid-template-columns: 7px 1fr 18px; gap: 5px; align-items: center; }
.template-mini-health-dot { width: 6px; height: 6px; border-radius: 50%; background: #8dc29b; }
.template-mini-health-dot.tone-2 { background: #e0bd72; }
.template-mini-health-dot.tone-3 { background: #d77e85; }
.template-mini-health-dot.tone-4 { background: #8f9cc8; }
.template-mini-health-lines { display: grid; gap: 3px; }
.template-mini-health-lines .template-mini-line { height: 3px; }
.template-mini-health-row .template-mini-pill { width: 17px; height: 6px; }

/* Inventory */
.template-mini-inventory { background: #f7f6f2; }
.template-mini-inventory-table { display: grid; margin-top: 7px; overflow: hidden; border: 1px solid #e2e0d9; border-radius: 6px; background: white; }
.template-mini-inventory-row { min-height: 20px; display: grid; grid-template-columns: 1.2fr .8fr .5fr; gap: 6px; align-items: center; padding: 3px 6px; border-top: 1px solid #efeee9; }
.template-mini-inventory-row.is-head { min-height: 15px; border-top: 0; background: #f2f1ed; }
.template-mini-inventory-row .template-mini-line { height: 3px; }
.template-mini-item { display: grid; grid-template-columns: 15px 1fr; gap: 4px; align-items: center; }
.template-mini-item-thumb { width: 14px; height: 14px; border-radius: 3px; background: #d8c4a2; }
.template-mini-item-thumb.tone-2 { background: #aec1aa; }
.template-mini-item-thumb.tone-3 { background: #cbb1b9; }
.template-mini-item-thumb.tone-4 { background: #aeb8cc; }
.template-mini-stock-bar { height: 5px; border-radius: 999px; background: linear-gradient(90deg,#7ea87e 0 80%,#e6e8e2 81%); }
.template-mini-stock-bar.level-2 { background: linear-gradient(90deg,#7ea87e 0 62%,#e6e8e2 63%); }
.template-mini-stock-bar.level-3 { background: linear-gradient(90deg,#d7a961 0 28%,#eee9df 29%); }
.template-mini-stock-bar.level-4 { background: linear-gradient(90deg,#7ea87e 0 70%,#e6e8e2 71%); }
.template-mini-inventory-row .template-mini-pill { width: 18px; height: 6px; }

/* Sprint */
.template-mini-sprint { background: #f4f2f8; }
.template-mini-kanban { height: 90px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 7px; }
.template-mini-kanban-col { min-width: 0; padding: 5px; border: 1px solid #dfdbe8; border-radius: 5px; background: rgba(255,255,255,.72); }
.template-mini-kanban-title { display: flex; align-items: center; gap: 4px; margin-bottom: 5px; }
.template-mini-kanban-title .template-mini-line { height: 3px; }
.template-mini-count { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: #bcb3ce; }
.template-mini-task-card { position: relative; display: grid; gap: 3px; margin-top: 4px; padding: 5px; border: 1px solid #e6e3ec; border-radius: 4px; background: white; box-shadow: 0 2px 5px rgba(55,46,74,.05); }
.template-mini-task-card .template-mini-line { height: 3px; }
.template-mini-task-tag { width: 14px; height: 4px; border-radius: 999px; background: #ad9bc9; }
.template-mini-task-tag.tone-2 { background: #82a2d1; }
.template-mini-task-tag.tone-3 { background: #86b69a; }

/* Travel */
.template-mini-travel { height: calc(100% - 16px); display: grid; grid-template-columns: 1.05fr .95fr; background: #eef1ec; }
.template-mini-map { position: relative; overflow: hidden; background: linear-gradient(40deg,#dce7db 0 25%,#f2eee1 26% 56%,#d8e2d6 57%); }
.template-mini-map::before,.template-mini-map::after { content: ""; position: absolute; border: 1px solid rgba(78,111,96,.2); border-radius: 50%; }
.template-mini-map::before { width: 60px; height: 45px; left: -17px; top: 29px; }
.template-mini-map::after { width: 64px; height: 55px; right: -28px; bottom: -13px; }
.template-mini-route { position: absolute; left: 22px; top: 28px; width: 72px; height: 59px; border: 2px dashed #d47d79; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(18deg); }
.template-mini-map-pin { position: absolute; width: 8px; height: 8px; border: 2px solid white; border-radius: 50% 50% 50% 0; background: #c86368; box-shadow: 0 2px 5px rgba(67,72,63,.18); transform: rotate(-45deg); }
.template-mini-map-pin.pin-a { left: 23px; top: 23px; }
.template-mini-map-pin.pin-b { left: 72px; top: 50px; background: #718ca8; }
.template-mini-map-pin.pin-c { left: 94px; top: 92px; background: #748f77; }
.template-mini-itinerary { display: grid; align-content: start; gap: 5px; padding: 9px 7px; background: #faf9f5; }
.template-mini-itinerary > .template-mini-line { height: 3px; }
.template-mini-itinerary-row { display: grid; grid-template-columns: 13px 1fr; gap: 5px; align-items: center; padding: 5px 0; border-top: 1px solid #ebe9e1; }
.template-mini-day { width: 12px; height: 12px; border-radius: 4px; background: #c3cfbe; }
.template-mini-itinerary-copy { display: grid; gap: 3px; }
.template-mini-itinerary-copy .template-mini-line { height: 3px; }

.template-card:focus-visible { outline: 2px solid rgba(240,68,145,.72); outline-offset: 3px; }
.template-card:focus-visible .template-mini-frame { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(32,30,36,.16); }
.template-mini-frame { transition: transform .2s cubic-bezier(.2,.75,.2,1), box-shadow .2s ease; }

.template-body { min-height: 76px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: start; padding: 11px 12px 13px; }
.template-meta { min-width: 0; display: grid; gap: 4px; align-content: start; }
.template-meta strong { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; font-size: 12.5px; line-height: 1.25; }
.template-meta span { min-height: 2.7em; color: #8d8d87; font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }

@media (hover: hover) and (pointer: fine) {
  .template-card:hover { transform: translateY(-3px); border-color: #6a6a64; box-shadow: 0 14px 32px rgba(0,0,0,.24); }
  .template-card:hover .template-mini-frame { transform: translateY(-2px) scale(1.006); box-shadow: 0 12px 30px rgba(32,30,36,.2); }
}

@media (pointer: coarse) {
  .template-card:active { transform: scale(.992); }
}

@media (prefers-reduced-motion: reduce) {
  .template-card,.template-mini-frame { transition: none !important; }
  .template-card:hover,.template-card:active,.template-card:focus-visible .template-mini-frame,.template-card:hover .template-mini-frame { transform: none !important; }
}
.favorite-template { align-self: start; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #85857f; cursor: pointer; }
.favorite-template:hover { background: #292927; color: white; }
.favorite-template.active { color: #f2c97a; }

.mobile-sidebar-toggle { display: none; }
.mobile-backdrop { display: none; }

.responsive-preview-control { position: fixed; z-index: 60; top: 14px; right: 18px; }
.responsive-preview-button { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(31,31,30,.96); color: #d8d8d3; cursor: pointer; backdrop-filter: blur(10px); }
.responsive-preview-button:hover, .responsive-preview-button[aria-expanded="true"] { border-color: #5a5a54; background: #292928; }
.responsive-preview-button > span:nth-child(2) { font-size: 12.5px; font-weight: 730; }
.preview-device-label { padding-left: 8px; border-left: 1px solid var(--border-soft); color: #8e8e88; font-size: 12px; }
.preview-chevron { color: #73736d; font-size: 13px; transition: transform .16s ease; }
.responsive-preview-button[aria-expanded="true"] .preview-chevron { transform: rotate(180deg); }
.responsive-preview-menu { position: absolute; top: calc(100% + 7px); right: 0; width: 238px; display: grid; gap: 3px; padding: 5px; border: 1px solid var(--border); border-radius: 11px; background: #1d1d1c; box-shadow: 0 18px 54px rgba(0,0,0,.34); }
.responsive-preview-menu[hidden] { display: none; }
.preview-layout-option { width: 100%; min-height: 52px; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 9px; align-items: center; padding: 8px 9px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #aaa9a4; text-align: left; cursor: pointer; }
.preview-layout-option:hover { background: #272726; color: #f1f1ee; }
.preview-layout-option.active { border-color: #5b3540; background: #2a1d21; color: white; }
.preview-layout-option.active .device-icon { color: var(--heart); }
.preview-layout-option > span:last-child { min-width: 0; display: grid; gap: 2px; }
.preview-layout-option strong { font-size: 12.5px; }
.preview-layout-option small { color: #73736d; font-size: 11.5px; line-height: 1.3; }
.device-icon { position: relative; display: inline-block; flex: 0 0 auto; border: 1.5px solid currentColor; color: #a8a8a2; }
.device-icon-mobile { width: 9px; height: 15px; border-radius: 3px; }
.device-icon-tablet { width: 13px; height: 17px; border-radius: 3px; }
.device-icon-computer { width: 17px; height: 12px; border-radius: 2px; }
.device-icon-computer::after { content: ""; position: absolute; left: 50%; top: 12px; width: 8px; height: 3px; border-bottom: 1.5px solid currentColor; transform: translateX(-50%); }

.modal { width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid var(--border); border-radius: 14px; background: #1b1b1a; color: var(--text); box-shadow: 0 30px 100px rgba(0,0,0,.58); }
.modal::backdrop { background: rgba(0,0,0,.62); backdrop-filter: blur(5px); }
.command-modal { width: min(680px, calc(100vw - 28px)); transform: translateY(-18vh); }
.dialog-card { padding: 18px; }
.command-card { padding: 8px; }
.command-search-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 8px 10px; border-bottom: 1px solid var(--border-soft); }
.command-search-row > span { color: #8a8a84; font-size: 17px; }
.command-search-row input { width: 100%; min-height: 42px; border: 0; outline: 0; background: transparent; color: white; font-size: 14px; }
.command-results { display: grid; gap: 3px; max-height: 390px; overflow: auto; padding: 7px 2px 2px; }
.command-result { width: 100%; min-height: 44px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #cecec9; text-align: left; cursor: pointer; }
.command-result:hover, .command-result.active { border-color: var(--border-soft); background: #252524; color: white; }
.command-result > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; background: #2d2d2b; color: #a2a29c; }
.command-result > span:nth-child(2) { display: grid; gap: 1px; }
.command-result strong { font-size: 12.5px; }
.command-result small { color: #73736d; font-size: 11.5px; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.dialog-head h2 { margin-top: 5px; font-size: 26px; }
.dialog-copy { color: #969690; font-size: 13px; line-height: 1.55; }
.dialog-list { display: grid; gap: 8px; margin-top: 14px; }
.dialog-list button, .connector-row, .resource-row, .plan-card { width: 100%; min-height: 56px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: #212120; color: #d8d8d3; text-align: left; }
.dialog-list button { cursor: pointer; }
.dialog-list button:hover { border-color: var(--border); background: #272726; }
.dialog-list .row-icon, .connector-row .row-icon, .resource-row .row-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: #2d2d2b; color: #c5c5bf; }
.dialog-list .row-copy, .connector-row .row-copy, .resource-row .row-copy { min-width: 0; display: grid; gap: 2px; }
.row-copy strong { font-size: 12.5px; }
.row-copy small { color: #777771; font-size: 11.5px; }
.status-pill { padding: 4px 6px; border-radius: 999px; background: #2d2d2b; color: #8f8f89; font-size: 11.5px; }
.status-pill.connected { background: #27252b; color: var(--success); }
.status-pill.setup { background: #362b1d; color: var(--warning); }
.status-pill.warning { background: #362522; color: #e2a79e; }
.connector-modal { width: min(680px, calc(100vw - 28px)); }
.connector-shell, .connector-detail { display: grid; gap: 12px; }
.connector-list { display: grid; gap: 8px; }
.connector-row { appearance: none; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.connector-row:hover { border-color: #55554f; background: #272726; }
.connector-row:active { transform: translateY(1px); }
.connector-row .row-copy small { line-height: 1.35; }
.connector-account-label { color: #a6b9c9 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-loading { min-height: 126px; display: grid; place-items: center; border: 1px solid var(--border-soft); border-radius: 12px; background: #20201f; color: var(--muted); font-size: 12.5px; }
.connector-detail-copy, .connector-security-note { margin: 0; color: #969690; font-size: 12.5px; line-height: 1.55; }
.connector-security-note { padding: 10px 11px; border: 1px solid rgba(145,200,163,.2); border-radius: 10px; background: rgba(39,37,43,.42); color: #a8c7b2; }
.connector-meta { display: grid; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 11px; background: #20201f; }
.connector-meta-row { min-width: 0; display: grid; grid-template-columns: minmax(110px,.36fr) minmax(0,1fr); gap: 12px; align-items: start; padding: 10px 11px; border-bottom: 1px solid var(--border-soft); }
.connector-meta-row:last-child { border-bottom: 0; }
.connector-meta-row > span { color: #777771; font-size: 12px; }
.connector-meta-row > strong { min-width: 0; color: #d2d2cc; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
.connector-code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-weight: 600; }
.connector-setup-block { display: grid; gap: 7px; padding: 11px; border: 1px solid #473d2c; border-radius: 11px; background: #262117; }
.connector-setup-label { color: #c9ae7f; font-size: 12px; font-weight: 760; text-transform: uppercase; letter-spacing: .045em; }
.connector-code-list { display: flex; flex-wrap: wrap; gap: 6px; }
.connector-code-list code { padding: 5px 7px; border: 1px solid #4b463d; border-radius: 7px; background: #1b1b19; color: #ded8c7; font-size: 12px; }
.connector-account-card { min-height: 68px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid rgba(145,200,163,.23); border-radius: 11px; background: rgba(39,37,43,.32); }
.connector-account-card .row-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #2b302c; color: #c9d8cd; }
.connector-account-card .row-copy { min-width: 0; display: grid; gap: 2px; }
.connector-account-card .row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.connector-error { display: grid; gap: 8px; padding: 14px; border: 1px solid #51333a; border-radius: 11px; background: #281c20; }
.connector-error strong { color: #e6bbc4; font-size: 13px; }
.connector-error p { margin: 0; color: #aa858e; font-size: 12.5px; line-height: 1.5; }
.connector-error .secondary-button { justify-self: start; }
.connector-danger-button { border-color: #6f3544; background: #3a2028; color: #f0b4c2; }
.connector-danger-button:hover { background: #492630; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.secondary-button, .primary-button { min-height: 38px; padding: 8px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 720; }
.secondary-button { background: transparent; }
.primary-button { border-color: #8e3f55; background: var(--heart); color: #fff; }
.primary-button:hover { background: var(--heart-strong); }
.build-summary { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; background: #20201f; }
.build-summary strong { font-size: 13.5px; }
.build-summary p { margin: 0; color: #969690; font-size: 12.5px; line-height: 1.55; }
.build-summary .summary-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.build-summary .summary-meta span { padding: 4px 6px; border-radius: 999px; background: #2c2c2a; color: #8f8f89; font-size: 11.5px; }

.toast-region { position: fixed; z-index: 200; right: 18px; bottom: 18px; display: grid; gap: 8px; pointer-events: none; }
.toast { min-width: 220px; max-width: 340px; padding: 10px 12px; border: 1px solid #4f4f4a; border-radius: 10px; background: #252524; color: #d8d8d3; box-shadow: 0 14px 44px rgba(0,0,0,.35); font-size: 12.5px; animation: toast-in .18s ease both; }
.toast.success { border-color: #395844; color: #b9ddc4; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }

@media (max-width: 1180px) {
  .content-wrap { width: min(100% - 42px, 1100px); }
  .project-grid, .template-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .recent-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1024px) {
  .sidebar { width: 250px; transform: translateX(-101%); transition: transform .18s ease; box-shadow: 18px 0 50px rgba(0,0,0,.25); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .responsive-preview-control { top: 12px; right: 12px; }
  .responsive-preview-button { min-height: 42px; padding-inline: 11px; }
  .mobile-sidebar-toggle { position: fixed; z-index: 35; left: 12px; top: 12px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: rgba(31,31,30,.94); color: white; cursor: pointer; backdrop-filter: blur(10px); }
  .mobile-backdrop { position: fixed; inset: 0 0 0 250px; z-index: 30; display: block; border: 0; background: rgba(0,0,0,.48); }
  .mobile-backdrop[hidden] { display: none; }
  .content-wrap { width: min(100% - 28px, 780px); padding-top: 70px; }
  .hero { padding-top: 6px; }
  .tools-banner { margin-bottom: 34px; }
  .hero-heading p { font-size: 13.5px; }
}

@media (max-width: 620px) {
  .content-wrap { width: min(100% - 20px, 620px); padding-bottom: 54px; }
  .hero { padding-bottom: 44px; }
  .tools-banner { width: 100%; margin-bottom: 28px; }
  h1 { font-size: clamp(39px, 12vw, 52px); }
  .composer { min-height: 178px; padding: 11px; border-radius: 18px; }
  .composer textarea { min-height: 108px; padding: 8px 6px; font-size: 14px; }
  .project-grid, .template-grid, .recent-row { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; }
  h2 { font-size: 27px; }
  .project-preview { height: 172px; }
  .template-preview { height: 184px; }
  .command-modal { transform: none; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .dialog-actions button { width: 100%; }
  .responsive-preview-button > span:nth-child(2) { display: none; }
  .preview-device-label { border-left: 0; padding-left: 0; }
  .responsive-preview-menu { width: min(238px, calc(100vw - 24px)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Explicit whole-page preview modes. These intentionally override the physical browser breakpoint. */
body[data-preview-device="mobile"] {
  --preview-shell-width: min(390px, 100vw);
  --preview-shell-offset: max(0px, calc(50vw - 195px));
}
body[data-preview-device="tablet"] {
  --preview-shell-width: min(768px, 100vw);
  --preview-shell-offset: max(0px, calc(50vw - 384px));
}
body[data-preview-device="mobile"] .app-shell,
body[data-preview-device="tablet"] .app-shell {
  width: var(--preview-shell-width);
  margin: 0 auto;
  position: relative;
}
body[data-preview-device="mobile"] .heart-field-canvas,
body[data-preview-device="tablet"] .heart-field-canvas {
  left: var(--preview-shell-offset);
  right: auto;
  width: var(--preview-shell-width);
}
body[data-preview-device="mobile"] .main-content::before,
body[data-preview-device="tablet"] .main-content::before {
  left: var(--preview-shell-offset);
  right: auto;
  width: var(--preview-shell-width);
}
body[data-preview-device="mobile"] .sidebar,
body[data-preview-device="tablet"] .sidebar {
  left: var(--preview-shell-offset);
  width: 250px;
  transform: translateX(calc(-101% - var(--preview-shell-offset)));
  transition: transform .18s ease;
  box-shadow: 18px 0 50px rgba(0,0,0,.25);
}
body[data-preview-device="mobile"].sidebar-open .sidebar,
body[data-preview-device="tablet"].sidebar-open .sidebar { transform: translateX(0); }
body[data-preview-device="mobile"] .main-content,
body[data-preview-device="tablet"] .main-content { margin-left: 0; }
body[data-preview-device="mobile"] .mobile-sidebar-toggle,
body[data-preview-device="tablet"] .mobile-sidebar-toggle {
  position: fixed;
  z-index: 35;
  left: calc(var(--preview-shell-offset) + 12px);
  top: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(31,31,30,.96);
  color: white;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
body[data-preview-device="mobile"] .mobile-backdrop,
body[data-preview-device="tablet"] .mobile-backdrop {
  position: fixed;
  inset: 0 var(--preview-shell-offset) 0 calc(var(--preview-shell-offset) + 250px);
  z-index: 30;
  display: block;
  border: 0;
  background: rgba(0,0,0,.48);
}
body[data-preview-device="mobile"] .mobile-backdrop[hidden],
body[data-preview-device="tablet"] .mobile-backdrop[hidden] { display: none; }
body[data-preview-device="mobile"] .responsive-preview-control,
body[data-preview-device="tablet"] .responsive-preview-control { right: calc(var(--preview-shell-offset) + 12px); top: 12px; }

body[data-preview-device="mobile"] .content-wrap { width: calc(100% - 20px); padding: 70px 0 54px; }
body[data-preview-device="mobile"] .hero { padding: 6px 0 44px; }
body[data-preview-device="mobile"] .tools-banner { width: 100%; margin-bottom: 28px; }
body[data-preview-device="mobile"] .hero-heading p { font-size: 13.5px; }
body[data-preview-device="mobile"] h1 { font-size: clamp(39px, 12vw, 52px); }
body[data-preview-device="mobile"] .composer { min-height: 178px; padding: 11px; border-radius: 18px; }
body[data-preview-device="mobile"] .composer textarea { min-height: 108px; padding: 8px 6px; font-size: 14px; }
body[data-preview-device="mobile"] .composer-footer { align-items: stretch; flex-wrap: wrap; }
body[data-preview-device="mobile"] .composer-left { width: 100%; display: grid; grid-template-columns: 36px minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; }
body[data-preview-device="mobile"] .heart-estimate { grid-column: 2 / -1; width: auto; padding-left: 0; white-space: normal; }
body[data-preview-device="mobile"] .build-button { width: 100%; min-height: 40px; }
body[data-preview-device="mobile"] .project-grid,
body[data-preview-device="mobile"] .template-grid,
body[data-preview-device="mobile"] .recent-row { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .section-heading { align-items: flex-start; }
body[data-preview-device="mobile"] h2 { font-size: 27px; }
body[data-preview-device="mobile"] .project-preview { height: 172px; }
body[data-preview-device="mobile"] .template-preview { height: 184px; }
body[data-preview-device="mobile"] .command-modal { transform: none; }
body[data-preview-device="mobile"] .modal { width: min(360px, calc(100vw - 28px)); }
body[data-preview-device="mobile"] .dialog-actions { display: grid; grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .dialog-actions button { width: 100%; }
body[data-preview-device="mobile"] .project-settings-modal .dialog-card { width: 100%; max-width: 100%; }
body[data-preview-device="mobile"] .project-settings-grid,
body[data-preview-device="mobile"] .project-settings-meta { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .project-settings-grid .control-field { grid-column: 1 !important; }
body[data-preview-device="mobile"] .project-settings-danger .control-inline-actions { display: grid; grid-template-columns: 1fr; }

body[data-preview-device="tablet"] .content-wrap { width: calc(100% - 28px); padding: 70px 0 64px; }
body[data-preview-device="tablet"] .hero { padding: 6px 0 54px; }
body[data-preview-device="tablet"] .tools-banner { margin-bottom: 34px; }
body[data-preview-device="tablet"] .hero-heading p { font-size: 13.5px; }
body[data-preview-device="tablet"] h1 { font-size: clamp(42px, 8vw, 58px); }
body[data-preview-device="tablet"] .project-grid,
body[data-preview-device="tablet"] .template-grid,
body[data-preview-device="tablet"] .recent-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
body[data-preview-device="tablet"] .modal { width: min(620px, calc(100vw - 36px)); }

body[data-preview-device="computer"] { overflow-x: auto; }
body[data-preview-device="computer"] .app-shell { width: 100%; min-width: 980px; }
body[data-preview-device="computer"] .sidebar { left: 0; width: 258px; transform: none; box-shadow: none; }
body[data-preview-device="computer"].sidebar-open .sidebar { transform: none; }
body[data-preview-device="computer"] .main-content { margin-left: 258px; }
body[data-preview-device="computer"] .mobile-sidebar-toggle,
body[data-preview-device="computer"] .mobile-backdrop { display: none; }
body[data-preview-device="computer"] .responsive-preview-control { top: 14px; right: 18px; }
body[data-preview-device="computer"] .content-wrap { width: min(1260px, calc(100% - 72px)); padding: 38px 0 80px; }
body[data-preview-device="computer"] .hero { width: min(930px, 100%); padding: 18px 0 64px; }
body[data-preview-device="computer"] .tools-banner { width: min(520px,100%); margin-bottom: 48px; }
body[data-preview-device="computer"] .hero-heading p { font-size: 14px; }
body[data-preview-device="computer"] h1 { font-size: clamp(42px, 5.5vw, 67px); }
body[data-preview-device="computer"] .composer { min-height: 192px; padding: 15px; border-radius: 22px; }
body[data-preview-device="computer"] .composer textarea { min-height: 118px; padding: 10px 10px 8px; font-size: 15px; }
body[data-preview-device="computer"] .project-grid,
body[data-preview-device="computer"] .template-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
body[data-preview-device="computer"] .recent-row { grid-template-columns: repeat(4, minmax(0,1fr)); }
body[data-preview-device="computer"] .section-heading { align-items: end; }
body[data-preview-device="computer"] h2 { font-size: clamp(24px, 2.5vw, 33px); }
body[data-preview-device="computer"] .project-preview { height: 150px; }
body[data-preview-device="computer"] .template-preview { height: 168px; }
body[data-preview-device="computer"] .command-modal { transform: translateY(-18vh); }
body[data-preview-device="computer"] .dialog-actions { display: flex; }
body[data-preview-device="computer"] .dialog-actions button { width: auto; }

/* Professional workspace components derived from the supplied UI reference, expressed in BaseHeart's own system. */
.responsive-preview-control { display: flex; align-items: center; gap: 6px; }
.heart-balance-cluster { display: inline-flex; align-items: center; gap: 6px; }
.legacy-heart-balance-cluster { display:none !important; }
.account-context-control { position:relative; flex:0 0 auto; }
.account-context-button { min-height:40px; max-width:230px; display:grid; grid-template-columns:28px minmax(0,1fr) auto 10px; align-items:center; gap:7px; padding:5px 8px 5px 5px; border:1px solid var(--border); border-radius:11px; background:rgba(31,31,30,.96); color:#d7d7d2; cursor:pointer; text-align:left; }
.account-context-button:hover,.account-context-button[aria-expanded="true"] { border-color:#65404c; background:#292326; }
.account-context-button:focus-visible,.account-context-option:focus-visible,.project-account-scope:focus-visible { outline:2px solid #f25074; outline-offset:2px; }
.account-context-avatar { width:28px; height:28px; display:grid; place-items:center; border:1px solid #4a343b; border-radius:8px; background:#2d2025; color:#f1bac8; font-size:12.5px; font-weight:800; }
.account-context-copy { min-width:0; display:grid; gap:1px; }
.account-context-copy strong,.account-context-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-context-copy strong { font-size:12.5px; font-weight:720; color:#f4f4ef; }
.account-context-copy small { font-size:11.5px; color:#84847f; }
.account-context-hearts { display:inline-flex; align-items:center; gap:3px; color:#e6e6df; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.account-context-hearts > span { color:var(--heart); font-size:12px; }
.account-context-hearts strong { font-size:12px; }
.account-context-chevron { color:#777771; font-size:12px; transition:transform .16s ease; }
.account-context-button[aria-expanded="true"] .account-context-chevron { transform:rotate(180deg); }
.account-context-menu { position:absolute; top:calc(100% + 7px); right:0; width:min(326px,calc(100vw - 24px)); max-height:min(560px,calc(100vh - 72px)); overflow:auto; display:grid; gap:3px; padding:6px; border:1px solid #3b3436; border-radius:13px; background:#1b1b1a; box-shadow:0 22px 64px rgba(0,0,0,.42); overscroll-behavior:contain; }
.account-context-menu[hidden] { display:none; }
.account-context-menu-head { display:grid; gap:2px; padding:8px 9px 7px; border-bottom:1px solid var(--border-soft); margin-bottom:2px; }
.account-context-menu-head strong { font-size:12.5px; color:#f1f1ec; }
.account-context-menu-head small { font-size:11.5px; color:#777771; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-context-option { width:100%; min-height:50px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:7px 8px; border:1px solid transparent; border-radius:9px; background:transparent; color:#b9b9b3; text-align:left; cursor:pointer; }
.account-context-option:hover { background:#252524; color:#fff; }
.account-context-option.active { border-color:#5c3540; background:#2a1d21; color:#fff; }
.account-context-option-avatar { width:34px; height:34px; display:grid; place-items:center; border:1px solid #3e3e39; border-radius:9px; background:#272726; color:#d0d0c9; font-size:13px; font-weight:760; }
.account-context-option.active .account-context-option-avatar { border-color:#70414f; background:#352229; color:#f3b7c7; }
.account-context-option-copy { min-width:0; display:grid; gap:2px; }
.account-context-option-copy strong,.account-context-option-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-context-option-copy strong { font-size:12.5px; font-weight:670; }
.account-context-option-copy small { font-size:11.5px; color:#777771; }
.account-context-option-trailing { display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; color:#8c8c86; font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.account-context-option-trailing b { width:17px; height:17px; display:grid; place-items:center; border-radius:999px; background:#713247; color:#fff; font-size:12px; }
.account-context-divider { height:1px; margin:3px 7px; background:var(--border-soft); }
.account-switcher-dialog-list { display:grid; gap:5px; }
.account-switcher-dialog .account-context-option { border-color:var(--border-soft); background:#20201f; }
.account-switcher-dialog .account-context-option:hover,.account-switcher-dialog .account-context-option.active { border-color:#65404c; background:#2a2225; }
.utility-button { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: rgba(31,31,30,.96); color: #b6b6b0; cursor: pointer; }
.utility-button:hover { border-color: #5a5a54; background: #292928; color: white; }
.heart-balance-button { min-width: 84px; padding: 5px 9px 5px 5px; gap: 5px; }
.heart-balance-button[hidden] { display: none; }
.heart-account-mark { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #3b3b37; border-radius: 8px; background: #2a2a28; color: #d4d4ce; font-size: 12.5px; font-weight: 780; }
.heart-account-mark-company { border-color: rgba(242,80,116,.22); background: #2d2025; color: #e8a2b3; }
.heart-account-mark-personal { background: #292927; color: #d6d6d0; }
.hearts-button .heart-glyph { color: var(--heart); font-size: 12.5px; line-height: 1; }
.hearts-button strong { min-width: 36px; font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: left; }
html[dir="rtl"] .hearts-button strong { text-align: right; }
.notification-button { position: relative; width: 40px; justify-content: center; padding: 0; }
.notification-button b { position: absolute; right: -4px; top: -5px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; border-radius: 999px; background: var(--heart); color: white; font-size: 11.5px; }
.notification-button b[hidden] { display: none; }
.language-control { position: relative; }
.language-button { min-width: 62px; justify-content: center; padding-inline: 9px; }
.language-button > span:first-child { font-size: 14px; line-height: 1; }
.language-button strong { font-size: 12px; letter-spacing: .035em; }
.language-chevron { color: #73736d; font-size: 12.5px; transition: transform .16s ease; }
.language-button[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
.language-menu { position: absolute; top: calc(100% + 7px); right: 0; width: 244px; max-height: min(520px, calc(100vh - 78px)); overflow-y: auto; display: grid; gap: 2px; padding: 5px; border: 1px solid var(--border); border-radius: 12px; background: #1d1d1c; box-shadow: 0 18px 54px rgba(0,0,0,.34); overscroll-behavior: contain; scrollbar-width: thin; }
.language-menu[hidden] { display: none; }
.language-menu-head { display: grid; gap: 1px; padding: 8px 9px 7px; border-bottom: 1px solid var(--border-soft); margin-bottom: 2px; }
.language-menu-head strong { font-size: 12.5px; }
.language-menu-head small { color: #73736d; font-size: 11.5px; }
.language-option { width: 100%; min-height: 39px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #aaa9a4; text-align: left; cursor: pointer; }
.language-option > span { font-size: 15px; text-align: center; }
.language-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.language-option small { color: #6f6f69; font-size: 11px; }
.language-option:hover { background: #272726; color: white; }
.language-option.active { border-color: #5b3540; background: #2a1d21; color: white; }
.language-option.active small { color: #d99aaa; }

.library-toolbar, .template-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) auto auto auto; gap: 8px; margin-bottom: 10px; }
.template-toolbar { grid-template-columns: minmax(220px,1fr) 180px; }
.library-search { min-height: 39px; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; border: 1px solid var(--border-soft); border-radius: 10px; background: #1b1b1a; color: #777771; }
.library-search > span { text-align: center; font-size: 14px; }
.library-search input, .library-toolbar select, .template-toolbar select { min-width: 0; min-height: 39px; border: 1px solid var(--border-soft); border-radius: 10px; background: #1b1b1a; color: #c8c8c2; outline: 0; }
.library-search input { width: 100%; border: 0; border-radius: 0 10px 10px 0; background: transparent; padding: 8px 10px 8px 0; }
.library-toolbar select, .template-toolbar select { padding: 7px 28px 7px 10px; font-size: 12.5px; }
.view-toggle { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border: 1px solid var(--border-soft); border-radius: 10px; background: #1b1b1a; }
.view-toggle button { width: 32px; height: 31px; border: 0; border-radius: 7px; background: transparent; color: #777771; cursor: pointer; }
.view-toggle button:hover, .view-toggle button.active { background: #292927; color: white; }
.folder-bar { display: flex; gap: 6px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: thin; }
.folder-chip { flex: 0 0 auto; min-height: 34px; padding: 6px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: transparent; color: #8f8f89; font-size: 12px; cursor: pointer; }
.folder-chip:hover, .folder-chip.active { border-color: #575751; background: #252524; color: white; }
.folder-add { border-style: dashed; }
.project-status { display: inline-flex; align-items: center; width: fit-content; gap: 5px; padding: 3px 6px; border-radius: 999px; background: #2b2b29; color: #999993; font-size: 11.5px; }
.project-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.project-status[data-status="published"] { background: #27252b; color: #91c8a3; }
.project-status[data-status="ready"] { background: #312f35; color: #9db3e3; }
.project-status[data-status="attention"] { background: #34261d; color: #d6b278; }
.project-status[data-status="draft"] { background: #2d272d; color: #b7a3bd; }
.project-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.project-grid.list-view { grid-template-columns: 1fr !important; }
.project-grid.list-view .project-card { display: grid; grid-template-columns: 180px minmax(0,1fr); }
.project-grid.list-view .project-preview { height: 96px !important; border-bottom: 0; border-right: 1px solid var(--border); }
.project-grid.list-view .project-preview::before { inset: 10px; }
.project-grid.list-view .project-preview::after { left: 25px; right: 25px; top: 34px; height: 30px; }
.deleted-section[hidden] { display: none; }
.deleted-row { display: grid; gap: 7px; }
.deleted-card { min-height: 54px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: #1b1b1a; }
.deleted-card > span { display: grid; gap: 2px; }
.deleted-card strong { font-size: 12.5px; }
.deleted-card small { color: #777771; font-size: 11.5px; }
.deleted-card button { min-height: 32px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: #aaa9a4; font-size: 12px; cursor: pointer; }

.notification-popover { position: fixed; z-index: 190; top: 62px; right: 18px; width: min(340px, calc(100vw - 24px)); overflow: hidden; border: 1px solid var(--border); border-radius: 13px; background: #1b1b1a; box-shadow: 0 24px 70px rgba(0,0,0,.42); }
.notification-popover[hidden] { display: none; }
.popover-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--border-soft); }
.popover-head strong { font-size: 13px; }
.popover-head button { border: 0; background: transparent; color: #8f8f89; font-size: 11.5px; cursor: pointer; }
.notification-item { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; padding: 10px 12px; border-bottom: 1px solid #2d2d2a; }
.notification-item:last-child { border-bottom: 0; }
.notification-item.unread { background: #211c1e; }
.notification-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #2c2c2a; color: #d2d2cc; }
.notification-copy { display: grid; gap: 2px; }
.notification-copy strong { font-size: 12px; }
.notification-copy span { color: #8a8a84; font-size: 11.5px; line-height: 1.35; }
.notification-copy small { color: #60605b; font-size: 11.5px; }

body.editor-open { overflow: hidden; }
body.editor-open #appShell { display: none; }
.editor-shell[hidden] { display: none; }
.editor-shell { min-height: 100vh; height: 100vh; display: grid; grid-template-rows: 58px minmax(0,1fr); background: #171716; }
.editor-header { position: relative; z-index: 20; min-width: 0; display: grid; grid-template-columns: minmax(220px,1fr) auto minmax(280px,1fr); gap: 14px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border-soft); background: #1b1b1a; }
.editor-header-left, .editor-header-center, .editor-header-actions { min-width: 0; display: flex; align-items: center; gap: 8px; }
.editor-header-center { justify-content: center; }
.editor-header-actions { justify-content: flex-end; }
.editor-project-copy { min-width: 0; display: grid; gap: 1px; }
.editor-project-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.editor-project-copy span { color: #777771; font-size: 11.5px; }
.editor-icon-button, .editor-subtle-button, .editor-publish-button, .editor-send-button { border: 1px solid var(--border); background: #242423; color: #d5d5d0; cursor: pointer; }
.editor-icon-button { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 9px; }
.editor-subtle-button { min-height: 34px; padding: 6px 9px; border-radius: 9px; background: transparent; font-size: 12px; }
.editor-publish-button, .editor-send-button { min-height: 34px; padding: 6px 12px; border-color: #8e3f55; border-radius: 9px; background: var(--heart); color: white; font-size: 12px; font-weight: 760; }
.editor-icon-button:hover, .editor-subtle-button:hover { border-color: #5a5a54; background: #292928; color: white; }
.editor-publish-button:hover, .editor-send-button:hover { background: var(--heart-strong); }
.editor-header select, .editor-toolbar select, .editor-composer select { min-height: 34px; border: 1px solid var(--border); border-radius: 9px; background: #222221; color: #b7b7b1; padding: 6px 26px 6px 9px; font-size: 12px; }
.collab-avatars { display: flex; align-items: center; padding-left: 6px; }
.collab-avatars > span, .collab-avatars > button { width: 28px; height: 28px; display: grid; place-items: center; margin-left: -6px; border: 2px solid #1b1b1a; border-radius: 50%; background: #ede9df; color: #292824; font-size: 11.5px; font-weight: 800; }
.collab-avatars > span:nth-child(2) { background: #d9c8e8; }
.collab-avatars > button { border-color: #1b1b1a; background: #333330; color: #b8b8b2; cursor: pointer; }

.editor-workspace { min-width: 0; min-height: 0; display: grid; grid-template-columns: 320px minmax(0,1fr) 270px; }
.editor-chat-panel, .editor-inspector { min-width: 0; min-height: 0; background: #1b1b1a; }
.editor-chat-panel { display: flex; flex-direction:column; min-height:0; border-right: 1px solid var(--border-soft); }
.editor-chat-panel > .editor-panel-tabs,.editor-chat-panel > .suggested-actions,.editor-chat-panel > .editor-composer,.editor-chat-panel > .editor-agent-ai-notice{flex:none}
.editor-chat-panel #editorChatThread{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;overflow-anchor:none}
.chat-message p{white-space:pre-wrap;overflow-wrap:anywhere}
.editor-panel-tabs { display: flex; gap: 3px; padding: 8px; border-bottom: 1px solid var(--border-soft); }
.editor-panel-tabs button, .editor-mode-tabs button, .editor-device-tabs button { min-height: 32px; border: 0; border-radius: 8px; background: transparent; color: #7f7f79; font-size: 12px; cursor: pointer; }
.editor-panel-tabs button { padding: 5px 9px; }
.editor-panel-tabs button.active, .editor-mode-tabs button.active, .editor-device-tabs button.active { background: #2a2a28; color: white; }
.editor-panel-tabs span { padding: 2px 5px; border-radius: 999px; background: #333330; font-size: 11.5px; }
.editor-chat-thread { min-height: 0; overflow-y: auto; padding: 10px; display: grid; align-content: start; gap: 10px; }
.chat-message { position: relative; display: grid; gap: 7px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 11px; background: #20201f; }
.user-message { background: #252220; }
.message-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.message-meta strong { font-size: 12px; }
.message-meta span { color: #656560; font-size: 11.5px; }
.chat-message p { margin: 0; color: #b9b9b3; font-size: 12.5px; line-height: 1.5; }
.message-actions { display: flex; gap: 4px; opacity: .72; }
.chat-message:hover .message-actions { opacity: 1; }
.message-actions button { min-height: 26px; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: #7e7e78; font-size: 11.5px; cursor: pointer; }
.message-actions button:hover { background: #2b2b29; color: white; }
@keyframes agentActivitySweep{0%{transform:translateX(-110%)}50%{transform:translateX(150%)}100%{transform:translateX(320%)}}@keyframes agentActivityPulse{0%,100%{opacity:.45;transform:scale(.88)}50%{opacity:1;transform:scale(1.08)}}@keyframes agentLiveHeartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.15)}28%{transform:scale(.98)}42%{transform:scale(1.1)}58%{transform:scale(1)}}@keyframes agentLiveSignal{0%,100%{opacity:.28;transform:translateY(1px)}50%{opacity:1;transform:translateY(-2px)}}
.change-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 8px; border: 1px solid #3c4b40; border-radius: 9px; background: #222026; }
.change-card > div { min-width: 0; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 7px; align-items: center; }
.change-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #36343a; color: var(--success); font-size: 12.5px; }
.change-card > div > span:last-child { min-width: 0; display: grid; gap: 2px; }
.change-card strong { font-size: 12px; }
.change-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7f9686; font-size: 11px; }
.change-card button { min-height: 28px; padding: 4px 7px; border: 1px solid #3f5c48; border-radius: 7px; background: transparent; color: #a7c7b0; font-size: 11.5px; cursor: pointer; }
.suggested-actions { display: flex; gap: 5px; flex-wrap: wrap; padding: 8px 10px; border-top: 1px solid var(--border-soft); }
.suggested-actions > span { width: 100%; color: #6f6f69; font-size: 11.5px; }
.suggested-actions button { min-height: 28px; padding: 4px 7px; border: 1px solid var(--border-soft); border-radius: 7px; background: #222221; color: #9e9e98; font-size: 11.5px; cursor: pointer; }
.suggested-actions button:hover { border-color: #51514c; color: white; }
.editor-composer { margin: 8px; padding: 8px; border: 1px solid #4a4a45; border-radius: 12px; background: #181817; }
.editor-composer textarea { width: 100%; min-height: 68px; max-height: 180px; resize: vertical; border: 0; outline: 0; background: transparent; color: white; font-size: 12.5px; line-height: 1.5; }
.editor-composer-footer, .editor-composer-footer > div { display: flex; align-items: center; gap: 5px; }
.editor-composer-footer { justify-content: space-between; flex-wrap: wrap; padding-top: 5px; }
.editor-composer-footer > div { min-width: 0; flex: 1 1 100%; flex-wrap: wrap; }
.editor-composer-footer select { min-width: 74px; flex: 1 1 82px; }
.editor-composer-footer .editor-send-button { margin-left: auto; }

.editor-stage-column { min-width: 0; min-height: 0; position: relative; display: grid; grid-template-rows: 46px minmax(0,1fr) auto; background: #121211; }
.editor-toolbar { min-width: 0; display: grid; grid-template-columns: minmax(140px,1fr) auto minmax(120px,1fr); align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border-soft); background: #1d1d1c; }
.editor-mode-tabs, .editor-device-tabs { display: flex; align-items: center; gap: 2px; }
.editor-mode-tabs button { padding: 5px 8px; }
.editor-device-tabs { justify-content: flex-end; }
.editor-device-tabs button { width: 32px; padding: 0; font-size: 14px; }
.editor-toolbar-center { min-width:0; display: flex; align-items: center; justify-content:center; gap: 5px; }
.preview-address-bar { min-width:180px; width:min(360px,34vw); height:32px; display:flex; align-items:center; gap:8px; padding:0 10px; border:1px solid #363633; border-radius:9px; background:#151515; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.preview-address-bar:focus-within { border-color:#6b4853; box-shadow:0 0 0 2px rgba(242,80,116,.08); }
.preview-live-dot { flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#4f514d; box-shadow:0 0 0 3px rgba(255,255,255,.025); }
.editor-stage-column:has(.app-canvas[data-preview-state="ready"]) .preview-live-dot { background:var(--success); box-shadow:0 0 0 3px rgba(70,179,126,.09); }
.editor-stage-column:has(.app-canvas[data-preview-state="loading"]) .preview-live-dot { background:var(--heart); animation:preview-runtime-pulse 1.2s ease-in-out infinite; }
.editor-stage-column:has(.app-canvas[data-preview-state="error"]) .preview-live-dot { background:var(--danger); }
#previewAddress { min-width:0; width:100%; height:100%; padding:0; border:0; outline:0; background:transparent; color:#a8a8a2; font:500 9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace; direction:ltr; text-align:left; text-overflow:ellipsis; }
#previewAddress[readonly] { cursor:default; }
#openPreviewTabBtn:disabled { opacity:.36; cursor:not-allowed; }
@keyframes preview-runtime-pulse { 50% { opacity:.42; transform:scale(.82); } }
.editor-intelligence-tools { display: flex; align-items: center; gap: 3px; padding-left: 5px; border-left: 1px solid #343431; }
.editor-intelligence-button { min-height: 30px; padding: 5px 8px; border: 1px solid #393936; border-radius: 8px; background: #222221; color: #a7a7a1; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.editor-intelligence-button:hover, .editor-intelligence-button:focus-visible { border-color: #6a3c49; background: #2a1f22; color: white; outline: 0; }
html[dir="rtl"] .editor-intelligence-tools { padding-left: 0; padding-right: 5px; border-left: 0; border-right: 1px solid #343431; }
.editor-stage { min-height: 0; overflow: auto; display: grid; place-items: start center; padding: 24px; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0); background-size: 18px 18px; }
.app-canvas { width: min(1040px,100%); min-height: 680px; overflow: hidden; border: 1px solid #30302d; border-radius: 12px; background: #111210; color: var(--text); box-shadow: inset 0 1px rgba(255,255,255,.025); transition: width .18s ease, border-color .18s ease, background .18s ease; }
.app-canvas[data-preview-state="ready"] { border-color:#2e2e2b; background:transparent; box-shadow:0 18px 55px rgba(0,0,0,.18); }
.project-preview-empty { width:100%; min-height:680px; display:grid; place-items:center; padding:32px; background:#111210; color:#9a9a94; }
.project-preview-empty-inner { width:min(320px,100%); display:grid; justify-items:center; gap:7px; text-align:center; }
.project-preview-empty-heart { color:#77404e; font-size:18px; line-height:1; }
.project-preview-empty strong { color:#bdbdb7; font-size:13px; font-weight:720; }
.project-preview-empty span:last-child { max-width:280px; color:#666660; font-size:12px; line-height:1.5; }
.generated-project-preview { display:block; width:100%; min-height:680px; height:clamp(680px,72vh,980px); border:0; background:transparent; }
.app-canvas { position:relative; }
.generated-project-preview.project-preview-pending { position:absolute; inset:0; opacity:0; pointer-events:none; }
.generated-project-preview.project-preview-failed { visibility:hidden; }
.project-preview-status { position:relative; z-index:2; min-height:clamp(680px,72vh,980px); background:radial-gradient(ellipse at 50% 40%,#26242a 0%,#16141a 68%); }
.project-preview-status .project-preview-empty-inner { width:min(440px,100%); gap:16px; }
.project-preview-status strong { color:#eef2f7; font-size:18px; line-height:1.45; }
.project-preview-status span:last-child { max-width:380px; color:#aab4c2; font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.project-preview-status .project-preview-empty-heart { color:#ec4b8e; font-size:34px; }
.project-preview-status button { min-height:40px; padding:10px 18px; }
.project-preview-status-compact { position:absolute; inset:16px 16px auto; min-height:0; width:auto; padding:20px; border-radius:12px; background:#0e141cee; }
.project-preview-build-badge { position:absolute; z-index:3; top:12px; left:12px; right:12px; width:fit-content; max-width:calc(100% - 24px); padding:9px 14px; border-radius:9px; background:#0e141ceb; color:#d3dce8; font-size:13.5px; pointer-events:none; }
.app-canvas[data-preview-build-state="working"] .project-preview-empty-heart { animation:preview-heart-pulse 1.8s ease-in-out infinite; }
@keyframes preview-heart-pulse { 50% { opacity:.45; transform:scale(.9); } }
@media(prefers-reduced-motion:reduce) { .app-canvas .project-preview-empty-heart,.preview-address-bar .preview-live-dot { animation:none!important; } }
.editor-stage[data-editor-device="tablet"] .generated-project-preview { height:900px; }
.editor-stage[data-editor-device="mobile"] .generated-project-preview { height:780px; }
.editor-stage[data-editor-device="tablet"] .app-canvas { width: min(768px,100%); }
.editor-stage[data-editor-device="mobile"] .app-canvas { width: min(390px,100%); }
.canvas-nav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 26px; border-bottom: 1px solid #dbd7ce; background: #faf9f5; }
.canvas-nav > strong { font: 750 16px var(--font-display); letter-spacing: -.03em; }
.canvas-nav nav { display: flex; align-items: center; gap: 5px; }
.canvas-nav button { min-height: 34px; padding: 6px 9px; border: 0; border-radius: 8px; background: transparent; color: #5c5b56; font-size: 12.5px; cursor: pointer; }
.canvas-nav .canvas-cta { background: #20201e; color: white; }
.canvas-hero { padding: 78px 56px 54px; text-align: center; }
.canvas-kicker { color: #8d4155; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.canvas-hero h1 { max-width: 690px; margin: 10px auto 12px; color: #1f1f1d; font-size: clamp(44px,5vw,70px); overflow-wrap: anywhere; text-wrap: balance; }
.canvas-hero p { max-width: 560px; margin: 0 auto; color: #6e6c66; font-size: 14px; line-height: 1.55; }
.canvas-actions { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.canvas-actions button { min-height: 40px; padding: 8px 13px; border: 1px solid #c9c6bd; border-radius: 10px; background: #faf9f5; color: #3f3e39; cursor: pointer; }
.canvas-actions .canvas-primary { border-color: #8e3f55; background: #d84566; color: white; }
.canvas-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 0 32px 42px; }
.canvas-card-grid article { display: grid; gap: 7px; min-height: 170px; padding: 20px; border: 1px solid #d8d4cc; border-radius: 14px; background: #faf9f5; }
.canvas-card-grid article > span { color: #a9a49b; font-size: 12px; }
.canvas-card-grid strong { font-size: 17px; }
.canvas-card-grid p { margin: 0; color: #77746e; font-size: 13px; line-height: 1.5; }
.editor-stage[data-editor-device="mobile"] .canvas-nav { padding-inline: 14px; }
.editor-stage[data-editor-device="mobile"] .canvas-nav nav > button:not(.canvas-cta) { display: none; }
.editor-stage[data-editor-device="mobile"] .canvas-hero { padding: 54px 20px 38px; }
.editor-stage[data-editor-device="mobile"] .canvas-hero h1 { font-size: 43px; }
.editor-stage[data-editor-device="mobile"] .canvas-card-grid { grid-template-columns: 1fr; padding: 0 14px 28px; }
.editor-stage[data-editor-device="tablet"] .canvas-card-grid { grid-template-columns: repeat(2,1fr); }
.editor-stage[data-editor-device="tablet"] .canvas-card-grid article:last-child { grid-column: 1 / -1; }
body.editor-editing [data-editable] { cursor: crosshair; }
body.editor-editing [data-editable]:hover { outline: 1px dashed #d84566; outline-offset: 2px; }
body.editor-editing [data-editable].selected-editable { outline: 2px solid #d84566; outline-offset: 3px; }
.code-workspace[hidden]{display:none!important}
.editor-code-open .editor-stage{display:block;overflow:hidden;padding:0;background:#0e0c12;background-image:none}
.code-workspace{width:100%;height:clamp(620px,72vh,980px);min-height:620px;display:grid;grid-template-columns:minmax(210px,250px) minmax(0,1fr);overflow:hidden;border:1px solid #312f35;border-radius:12px;background:#0e0c12;color:#d8dde5;box-shadow:0 18px 48px rgba(0,0,0,.2)}
.code-workspace-sidebar{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;border-inline-end:1px solid #2f2d33;background:#121016}
.code-workspace-sidebar-head{min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 9px 8px 13px;border-bottom:1px solid #2a282e;background:#16141a}
.code-workspace-sidebar-head>strong{min-width:0;overflow:hidden;color:#aeb8c5;font-size:12.5px;font-weight:800;letter-spacing:.055em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.code-workspace-tools{display:flex;align-items:center;gap:3px}
.code-workspace-icon-button{width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:7px;background:transparent;color:#8e99a8;font:700 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace;cursor:pointer}
.code-workspace-icon-button:hover:not(:disabled),.code-workspace-icon-button:focus-visible{border-color:#49303a;background:#21161c;color:#ff7aaa;outline:0}
.code-workspace-icon-button.danger:hover:not(:disabled),.code-workspace-icon-button.danger:focus-visible{border-color:#6e3344;background:#281319;color:#ff8aa6}
.code-workspace-icon-button:disabled{opacity:.28;cursor:not-allowed}
.code-workspace-tree{min-height:0;overflow:auto;padding:7px 6px 14px;overscroll-behavior:contain;scrollbar-gutter:stable}
.code-tree-row{min-width:0}
.code-tree-item{width:100%;min-height:31px;display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:6px;padding:4px 7px;padding-inline-start:calc(7px + var(--code-tree-depth,0)*14px);border:1px solid transparent;border-radius:7px;background:transparent;color:#aab3bf;text-align:start;cursor:pointer;font:600 11px/1.25 var(--font-body)}
.code-tree-item:hover{background:#1c1a20;color:#eef2f7}
.code-tree-item:focus-visible{border-color:#87405b;outline:2px solid rgba(238,75,139,.22);outline-offset:1px}
.code-tree-item.selected{border-color:#4c2a37;background:#21161c;color:#fff}
.code-tree-row[data-kind="folder"]>.code-tree-item{grid-template-columns:10px 16px minmax(0,1fr);font-weight:700;color:#c0c8d3}
.code-tree-chevron{display:grid;place-items:center;color:#66717e;font-size:14px;transform-origin:center;transition:transform .12s ease}
.code-tree-row.expanded>.code-tree-item>.code-tree-chevron{transform:rotate(90deg)}
.code-tree-folder{position:relative;width:14px;height:10px;border:1px solid #6f7a88;border-radius:2px;background:#1f1d23}
.code-tree-folder::before{content:"";position:absolute;inset:-4px auto auto -1px;width:7px;height:4px;border:1px solid #6f7a88;border-bottom:0;border-radius:2px 2px 0 0;background:#1f1d23}
.code-tree-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-file-badge{width:18px;height:18px;display:grid;place-items:center;border:1px solid #3d3b41;border-radius:4px;background:#17151b;color:#7f8b99;font:800 6px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.03em}
.code-tree-item.selected .code-file-badge{border-color:#71354b;background:#2b1720;color:#ff80ab}
.code-workspace-action,.code-workspace-delete-confirm{display:grid;gap:9px;padding:12px;border-top:1px solid #2f2d33;background:#16141a}
.code-workspace-action-label{display:grid;gap:6px;color:#aeb8c5;font-size:12.5px;font-weight:750}
.code-workspace-action-input{width:100%;min-height:36px;padding:7px 9px;border:1px solid #3d3b41;border-radius:8px;background:#09080d;color:#edf1f6;font:11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace}
.code-workspace-action-input:focus{border-color:#9d365d;outline:2px solid rgba(239,68,122,.24);outline-offset:1px}
.code-workspace-action-error{color:#f49ab1;font-size:12px;line-height:1.4}
.code-workspace-action-buttons{display:flex;justify-content:flex-end;gap:6px}
.code-workspace-action-buttons button{min-height:31px;padding:5px 9px;border:1px solid #3d3b41;border-radius:7px;background:#1e1c22;color:#b5bec9;font-size:12px;font-weight:750;cursor:pointer}
.code-workspace-action-buttons button:focus-visible{outline:2px solid rgba(239,68,122,.3);outline-offset:1px}
.code-workspace-action-confirm{border-color:#7e294b!important;background:#a52e5e!important;color:#fff!important}
.code-workspace-delete-button{border-color:#713244!important;background:#421823!important;color:#ffb0c2!important}
.code-workspace-delete-confirm strong{font-size:12.5px;color:#f0dfe4}
.code-workspace-delete-confirm p{margin:0;color:#87919e;font-size:12px;line-height:1.45}
.code-workspace-editor{min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:#0e0c12}
.code-workspace-editor-head{min-width:0;min-height:46px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:7px 14px;border-bottom:1px solid #2a282e;background:#141218}
.code-workspace-file-info{min-width:0;display:grid;gap:2px}
.code-workspace-file-info strong{min-width:0;overflow:hidden;color:#dce2e9;font:650 11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;text-overflow:ellipsis;white-space:nowrap}
.code-workspace-file-info small{color:#65717e;font-size:11.5px;font-variant-numeric:tabular-nums}
.code-workspace-save-state{flex:0 0 auto;padding:3px 7px;border:1px solid #343238;border-radius:999px;color:#7e8996;font-size:11.5px;font-weight:750}
.code-workspace-source{width:100%;height:100%;min-height:0;resize:none;overflow:auto;padding:18px 20px;border:0;background:#0f0d13;color:#d9e0e8;caret-color:#ff6ca3;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;tab-size:2;white-space:pre;overscroll-behavior:contain;scrollbar-gutter:stable}
.code-workspace-source:focus{outline:0;box-shadow:inset 3px 0 #8f3156}
.code-workspace-source::selection{background:#5a2440;color:#fff}
.code-workspace-source[readonly]{color:#a8b0ba;cursor:default}
.code-workspace-empty{min-height:520px;display:grid;place-content:center;justify-items:center;gap:8px;padding:32px;text-align:center}
.code-workspace-empty-mark{color:#77404e;font:700 22px/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.code-workspace-empty strong{color:#c8d0d9;font-size:13.5px}
.code-workspace-empty p{max-width:330px;margin:0;color:#6f7a86;font-size:12.5px;line-height:1.55}
html[dir="rtl"] .code-tree-chevron{transform:scaleX(-1)}
html[dir="rtl"] .code-tree-row.expanded>.code-tree-item>.code-tree-chevron{transform:scaleX(-1) rotate(90deg)}
html[dir="rtl"] .code-tree-folder::before{inset:-4px -1px auto auto}
html[dir="rtl"] .code-workspace-source:focus{box-shadow:inset -3px 0 #8f3156}
@media(max-width:980px){.code-workspace{grid-template-columns:minmax(190px,220px) minmax(0,1fr);height:clamp(600px,72vh,900px)}}
@media(max-width:720px){.editor-code-open .editor-stage{overflow:auto}.code-workspace{height:auto;min-height:720px;grid-template-columns:1fr;grid-template-rows:minmax(190px,240px) minmax(480px,1fr);border-radius:0;border-inline:0}.code-workspace-sidebar{grid-template-rows:auto minmax(0,1fr) auto;border-inline-end:0;border-bottom:1px solid #2f2d33}.code-workspace-editor{min-height:480px}.code-workspace-editor-head{gap:8px;padding:8px 10px}.code-workspace-source{min-height:480px;padding:15px 14px;font-size:13px}.code-workspace-empty{min-height:480px}.code-workspace-sidebar-head{padding-inline:12px 8px}.code-workspace-icon-button{width:34px;height:34px}.code-tree-item{min-height:36px}.code-workspace-save-state{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.code-tree-chevron{transition:none}}

.editor-secrets-badge { display:inline-grid; min-width:18px; height:18px; padding:0 5px; place-items:center; margin-inline-start:5px; border-radius:999px; background:rgba(239,68,122,.18); color:#ff77a2; font-size:12.5px; font-weight:800; }
.editor-secrets-panel { width:100%; min-height:620px; padding:28px; overflow:auto; }
.editor-secrets-shell { width:min(920px,100%); margin:0 auto; display:grid; gap:20px; }
.editor-secrets-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:22px; border:1px solid #323036; border-radius:16px; background:#1a181e; }
.editor-secrets-head h2 { margin:4px 0 8px; font-size:22px; }
.editor-secrets-head p { max-width:620px; margin:0; color:#9ba6b4; line-height:1.5; }
.editor-secret-environments { display:flex; gap:6px; flex-wrap:wrap; padding:4px; border:1px solid #353339; border-radius:12px; background:#141218; }
.editor-secret-environments button { min-height:34px; padding:0 12px; border:0; border-radius:8px; background:transparent; color:#aab4c0; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700; }
.editor-secret-environments button.active { background:#2c2a30; color:#fff; box-shadow:inset 0 0 0 1px #3a4050; }
.editor-secret-list { display:grid; gap:8px; }
.editor-secret-empty { padding:22px; border:1px dashed #3b393f; border-radius:12px; color:#8f9aa7; text-align:center; }
.editor-secret-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 16px; border:1px solid #343238; border-radius:12px; background:#18161c; }
.editor-secret-row-copy { min-width:0; display:grid; gap:4px; }
.editor-secret-row-copy strong { overflow:hidden; text-overflow:ellipsis; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.editor-secret-status { color:#73d8ad; font-size:13.5px; }
.editor-secret-status.missing { color:#d6b278; }
.editor-secret-required { width:max-content; padding:2px 7px; border:1px solid rgba(214,178,120,.24); border-radius:999px; background:rgba(214,178,120,.08); color:#d6b278; font-size:12px; font-weight:800; letter-spacing:.035em; text-transform:uppercase; }
.editor-secret-connection-status { width:max-content; color:#8f9aa7; font-size:13px; font-weight:650; }
.editor-secret-connection-status.connected { color:#73d8ad; }
.editor-secret-connection-status.rejected,.editor-secret-connection-status.failed { color:#f18aa7; }
.editor-secret-connection-status.unavailable { color:#d6b278; }
.editor-secret-connection-status.testing { color:#aab4c0; }
.editor-secret-row[data-required="true"] { border-color:rgba(214,178,120,.22); }
.editor-secret-row-actions,.editor-secret-form-actions { display:flex; gap:8px; flex-wrap:wrap; }
.editor-secret-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto; align-items:end; gap:12px; padding:18px; border:1px solid #343238; border-radius:14px; background:#17151b; }
.editor-secret-field { display:grid; gap:7px; min-width:0; color:#aeb8c5; font-size:13.5px; font-weight:700; }
.editor-secret-field input { width:100%; min-height:42px; padding:0 12px; border:1px solid #3c3a40; border-radius:10px; background:#110f15; color:#fff; font:inherit; }
.editor-secret-field input:focus { outline:2px solid rgba(239,68,122,.35); outline-offset:1px; border-color:#9d365d; }
.editor-secret-field input[readonly] { opacity:.76; }
.editor-secret-field small { color:#7f8a98; font-weight:500; line-height:1.35; }
.editor-secrets-open .editor-toolbar-center,.editor-secrets-open .editor-device-tabs { display:none; }
.editor-secrets-open .editor-toolbar { justify-content:flex-start; }
@media (max-width:760px) { .editor-secrets-panel{padding:16px}.editor-secrets-head{display:grid;padding:18px}.editor-secret-environments{width:100%}.editor-secret-environments button{flex:1}.editor-secret-form{grid-template-columns:1fr}.editor-secret-row{align-items:flex-start;flex-direction:column}.editor-secret-row-actions{width:100%}.editor-secret-row-actions button{flex:1} }
.build-progress { min-height:44px; display:grid; grid-template-columns:22px minmax(140px,260px) minmax(80px,1fr) 38px; gap:10px; align-items:center; margin:0; padding:0 12px; border-top:1px solid rgba(242,80,116,.28); background:linear-gradient(90deg,#24191d,#191919 42%); box-shadow:0 -8px 24px rgba(0,0,0,.18); }
.build-progress[hidden] { display: none; }
.build-status-heart { width:22px; display:grid; place-items:center; color:var(--heart-strong); font-size:16px; line-height:1; transform-origin:center; }
.build-progress > strong { min-width:0; overflow:hidden; color:#eee8e9; font-size:12.5px; font-weight:760; text-overflow:ellipsis; white-space:nowrap; }
.build-progress > span:last-child { color:#a38d93; font-size:11.5px; font-variant-numeric:tabular-nums; text-align:right; }
.build-progress[data-build-state="working"] .build-status-heart { animation:baseheartBuildHeartbeat 1.05s ease-in-out infinite; filter:drop-shadow(0 0 7px rgba(242,80,116,.4)); }
.build-progress[data-build-state="complete"] .build-status-heart { color:var(--success); }
.build-progress[data-build-state="error"] .build-status-heart { color:var(--danger); }
.build-progress[data-build-state="hearts"]{border-top-color:rgba(214,178,120,.42);background:linear-gradient(90deg,#2b2317,#191919 42%)}.build-progress[data-build-state="hearts"] .build-status-heart{color:#e3c590;filter:none}.build-progress[data-build-state="hearts"] > strong{color:#e8d2a5}
.progress-track { height:5px; overflow:hidden; border-radius:999px; background:#30292b; box-shadow:inset 0 1px 2px rgba(0,0,0,.32); }
.progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#c73f64,var(--heart-strong)); transition:width .22s ease; }
.build-progress[data-build-state="complete"] .progress-track i { background:var(--success); }
.build-progress[data-build-state="error"] .progress-track i { background:var(--danger); }
.build-progress[data-build-state="hearts"] .progress-track i{background:#d6b278}
@keyframes baseheartBuildHeartbeat { 0%,100%{transform:scale(1)} 14%{transform:scale(1.28)} 28%{transform:scale(.96)} 42%{transform:scale(1.2)} 58%{transform:scale(1)} }
@media (max-width:900px) { .build-progress { grid-template-columns:22px minmax(0,1fr) 74px 32px; gap:7px; } }
@media (max-width:620px) { .build-progress { min-height:48px; grid-template-columns:22px minmax(0,1fr) 32px; }.build-progress .progress-track{grid-column:1 / -1;grid-row:2}.build-progress > span:last-child{grid-column:3;grid-row:1} }
@media (prefers-reduced-motion:reduce) { .build-progress[data-build-state="working"] .build-status-heart { animation:none; } }

.editor-inspector { overflow-y: auto; padding: 10px; border-left: 1px solid var(--border-soft); }
.inspector-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.inspector-head > div { display: grid; gap: 3px; }
.inspector-head strong { font-size: 13px; }
.inspector-empty { color: #777771; font-size: 12px; line-height: 1.5; }
.inspector-fields { display: grid; gap: 12px; padding-top: 12px; }
.inspector-fields[hidden] { display: none; }
.inspector-fields label { display: grid; gap: 5px; color: #777771; font-size: 11.5px; }
.inspector-fields textarea, .inspector-fields select { width: 100%; min-height: 36px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: #20201f; color: white; font-size: 12px; }
.inspector-fields input[type="color"] { width: 100%; height: 36px; padding: 3px; border: 1px solid var(--border); border-radius: 8px; background: #20201f; }
.inspector-fields input[type="range"] { width: 100%; }
.inspector-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.inspector-reset { width: 100%; }

.history-drawer { position: fixed; z-index: 80; inset: 58px 0 0 auto; width: min(360px,100vw); overflow-y: auto; padding: 14px; border-left: 1px solid var(--border); background: #1a1a19; box-shadow: -20px 0 60px rgba(0,0,0,.3); }
.history-drawer[hidden] { display: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.drawer-head h2 { font-size: 23px; }
.history-list { display: grid; gap: 8px; padding-top: 12px; }
.history-item { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: #20201f; }
.history-item > div:first-child { display: flex; justify-content: space-between; gap: 8px; }
.history-item strong { font-size: 12px; }
.history-item small { color: #6f6f69; font-size: 11.5px; }
.history-item p { margin: 0; color: #8f8f89; font-size: 11.5px; }
.history-actions { display: flex; gap: 5px; }
.history-actions button { min-height: 28px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: #9a9a94; font-size: 11.5px; cursor: pointer; }
.time-machine-actions { display: flex; justify-content: flex-end; padding-bottom: 4px; }
.time-machine-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.has-visual-comment { outline: 2px solid rgba(242,80,116,.8) !important; outline-offset: 3px; position: relative; }
.has-visual-comment::after { content: "•"; position: absolute; z-index: 8; top: -9px; right: -9px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid #f3f1ec; border-radius: 999px; background: var(--heart); color: white; font-size: 14px; line-height: 1; }
html[dir="rtl"] .has-visual-comment::after { right: auto; left: -9px; }

@media (max-width: 1180px) {
  .editor-workspace { grid-template-columns: 290px minmax(0,1fr) 230px; }
  .editor-header { grid-template-columns: minmax(190px,1fr) auto minmax(220px,1fr); }
}
@media (max-width: 980px) {
  .library-toolbar { grid-template-columns: minmax(180px,1fr) 140px 140px; }
  .view-toggle { grid-column: 1 / -1; width: fit-content; }
  .editor-shell { height: auto; min-height: 100vh; }
  body.editor-open { overflow: auto; }
  .editor-header { position: sticky; top: 0; grid-template-columns: 1fr auto; }
  .editor-header-center { order: 3; grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; }
  .editor-workspace { grid-template-columns: minmax(240px,290px) minmax(0,1fr); min-height: calc(100vh - 100px); }
  .editor-inspector { grid-column: 1 / -1; min-height: 240px; border-left: 0; border-top: 1px solid var(--border-soft); }
}
@media (max-width: 720px) {
  .responsive-preview-control { gap: 4px; }
  .heart-balance-cluster { gap: 4px; }
  .heart-balance-button { min-width: 70px; min-height: 38px; padding: 4px 7px 4px 4px; }
  .heart-account-mark { width: 26px; height: 26px; border-radius: 7px; }
  .hearts-button strong { min-width: 30px; font-size: 12px; }
  .responsive-preview-control .notification-button { display: none; }
  .library-toolbar, .template-toolbar { grid-template-columns: 1fr; }
  .project-grid.list-view .project-card { grid-template-columns: 120px minmax(0,1fr); }
  .editor-header { grid-template-columns: 1fr; gap: 7px; }
  .editor-header-actions, .editor-header-center { justify-content: flex-start; overflow-x: auto; }
  .editor-workspace { display: block; }
  .editor-chat-panel { min-height: 480px; border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .editor-stage-column { min-height: 680px; }
  .editor-toolbar { grid-template-columns: 1fr auto; }
  .editor-toolbar-center { order: 3; grid-column: 1 / -1; justify-content: center; flex-wrap: wrap; }
  .preview-address-bar { width:min(460px,100%); flex:1 1 240px; }
  .editor-intelligence-tools { flex-wrap: wrap; justify-content: center; }
  .editor-stage { padding: 12px; }
  .canvas-hero h1 { font-size: 44px; }
  .canvas-card-grid { grid-template-columns: 1fr; }
  .editor-inspector { min-height: 300px; }
}
.composer-level-select { min-height: 36px; padding: 6px 28px 6px 9px; border: 1px solid var(--border); border-radius: 10px; background: #242423; color: #c1c1bb; font-size: 12px; }
.heart-estimate { color: #7f7f79; font-size: 11.5px; white-space: nowrap; }
.folder-manage { border-style: solid; color: #aaa9a4; }
.project-create-chip { display: inline-flex; align-items: center; gap: 5px; border-color: rgba(242,80,116,.3); background: rgba(56,31,40,.46); color: #e2c4cc; font-weight: 720; }
.project-create-chip:hover { border-color: rgba(242,80,116,.52); background: rgba(70,35,47,.62); color: #fff; }
.project-create-icon { color: var(--heart); font-size: 13px; line-height: 1; }
.folder-manager-list { display: grid; gap: 7px; margin-top: 12px; }
.folder-manager-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: #20201f; }
.folder-manager-row span { display: grid; gap: 2px; }
.folder-manager-row strong { font-size: 12.5px; }
.folder-manager-row small { color: #72726d; font-size: 11.5px; }
.folder-manager-row button { min-height: 30px; padding: 4px 8px; border: 1px solid #55353e; border-radius: 7px; background: transparent; color: #d294a3; font-size: 11.5px; cursor: pointer; }
.editor-chat-panel.show-changes .chat-message:not(:has(.change-card)) { display: none; }

@media (max-width: 520px) {
  .responsive-preview-control .notification-button { display: none; }
  .language-button { min-width: 48px; padding-inline: 7px; }
  .language-button > span:first-child { display: none; }
  .language-menu { width: min(244px, calc(100vw - 24px)); }
  .project-grid.list-view { grid-template-columns: 1fr; }
  .project-grid.list-view .project-card { display: block; }
  .project-grid.list-view .project-preview { height: 125px !important; border-right: 0; border-bottom: 1px solid var(--border); }
  .composer-left { flex-wrap: wrap; }
  .heart-estimate { width: 100%; padding-left: 43px; }
  .editor-header-actions .collab-avatars { display: none; }
  .editor-subtle-button { white-space: nowrap; }
  .editor-chat-panel { min-height: 450px; }
  .editor-stage-column { min-height: 620px; }
  .editor-toolbar { position: sticky; top: 0; z-index: 4; }
  .editor-toolbar-center { justify-content: stretch; }
  .editor-toolbar-center > select { flex: 1 1 110px; min-width: 0; }
  .preview-address-bar { width:auto; min-width:0; flex:1 1 calc(100% - 84px); }
  .editor-intelligence-tools { width: 100%; padding: 5px 0 0; border-left: 0; border-top: 1px solid #343431; }
  html[dir="rtl"] .editor-intelligence-tools { padding: 5px 0 0; border-right: 0; border-top: 1px solid #343431; }
  .editor-intelligence-button { flex: 1 1 0; }
  .editor-device-tabs { justify-self: end; }
  .canvas-nav { min-height: 58px; }
  .canvas-hero { padding: 46px 16px 32px; }
  .canvas-hero h1 { font-size: 38px; }
}

html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .workspace-switcher,
html[dir="rtl"] .nav-item,
html[dir="rtl"] .filter-item,
html[dir="rtl"] .project-shortcut,
html[dir="rtl"] .sidebar-promo,
html[dir="rtl"] .profile-button,
html[dir="rtl"] .tools-banner,
html[dir="rtl"] .language-option,
html[dir="rtl"] .dialog-list button { text-align: right; }
html[dir="rtl"] .sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--border-soft); }
html[dir="rtl"] .main-content { margin-left: 0; margin-right: 258px; }
html[dir="rtl"] .responsive-preview-control { right: auto; left: 18px; }
html[dir="rtl"] .language-menu,
html[dir="rtl"] .responsive-preview-menu { right: auto; left: 0; }
html[dir="rtl"] .notification-popover { right: auto; left: 18px; }
html[dir="rtl"] .editor-chat-panel { border-right: 0; border-left: 1px solid var(--border-soft); }
html[dir="rtl"] .editor-inspector { border-left: 0; border-right: 1px solid var(--border-soft); }
html[dir="rtl"] body[data-preview-device="computer"] .sidebar { left: auto; right: 0; }
html[dir="rtl"] body[data-preview-device="computer"] .main-content { margin-left: 0; margin-right: 258px; }
html[dir="rtl"] body[data-preview-device="computer"] .responsive-preview-control { right: auto; left: 18px; }
html[dir="rtl"] body[data-preview-device="mobile"] .sidebar,
html[dir="rtl"] body[data-preview-device="tablet"] .sidebar { left: auto; right: var(--preview-shell-offset); transform: translateX(calc(101% + var(--preview-shell-offset))); }
html[dir="rtl"] body[data-preview-device="mobile"].sidebar-open .sidebar,
html[dir="rtl"] body[data-preview-device="tablet"].sidebar-open .sidebar { transform: translateX(0); }
html[dir="rtl"] body[data-preview-device="mobile"] .mobile-sidebar-toggle,
html[dir="rtl"] body[data-preview-device="tablet"] .mobile-sidebar-toggle { left: auto; right: calc(var(--preview-shell-offset) + 12px); }
html[dir="rtl"] body[data-preview-device="mobile"] .mobile-backdrop,
html[dir="rtl"] body[data-preview-device="tablet"] .mobile-backdrop { inset: 0 calc(var(--preview-shell-offset) + 250px) 0 var(--preview-shell-offset); }
html[dir="rtl"] body[data-preview-device="mobile"] .responsive-preview-control,
html[dir="rtl"] body[data-preview-device="tablet"] .responsive-preview-control { right: auto; left: calc(var(--preview-shell-offset) + 12px); }

/* BaseHeart Control Center */
.control-center-modal { width: min(980px, calc(100vw - 28px)); }
.control-center-modal .dialog-card { padding: 18px; }
.control-center { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; min-height: 510px; }
.control-tabs { display: grid; align-content: start; gap: 4px; padding-right: 12px; border-right: 1px solid var(--border-soft); }
.control-tab { width: 100%; min-height: 42px; display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px 9px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #9d9d97; text-align: left; cursor: pointer; }
.control-tab > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: #262625; color: #90908a; font-size: 13px; }
.control-tab strong { font-size: 12px; font-weight: 720; }
.control-tab:hover { background: #232322; color: #f2f2ef; }
.control-tab.active { border-color: #54333d; background: #281d21; color: white; }
.control-tab.active > span { background: #351f27; color: var(--heart); }
.control-panel { min-width: 0; display: grid; align-content: start; gap: 10px; }
.control-grid { display: grid; gap: 10px; }
.control-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.control-card { min-width: 0; display: grid; gap: 10px; padding: 13px; border: 1px solid var(--border-soft); border-radius: 11px; background: #1f1f1e; }
.control-card-head { display: flex; align-items: center; gap: 8px; }
.control-card-head strong { font-size: 13px; }
.control-card-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #292928; color: #b6b6b0; font-size: 13.5px; }
.control-card > p { margin: -3px 0 1px; color: #85857f; font-size: 12px; line-height: 1.5; }
.control-stack, .control-test-list { display: grid; gap: 5px; }
.connector-advanced-setup { margin-top: 7px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.connector-advanced-summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; border-radius: 8px; color: #8f8f89; cursor: pointer; list-style: none; }
.connector-advanced-summary::-webkit-details-marker { display: none; }
.connector-advanced-summary:hover { background: #222221; color: #c4c4be; }
.connector-advanced-summary:focus-visible { outline: 2px solid rgba(242,80,116,.62); outline-offset: 2px; }
.connector-advanced-copy { min-width: 0; display: grid; gap: 2px; }
.connector-advanced-copy strong { color: inherit; font-size: 12px; font-weight: 720; }
.connector-advanced-copy small { color: #72726d; font-size: 11px; line-height: 1.35; }
.connector-advanced-chevron { flex: 0 0 auto; color: #73736e; font-size: 12.5px; }
.connector-advanced-setup[open] .connector-advanced-summary { background: #222221; color: #d0d0ca; }
.connector-advanced-setup[open] .connector-advanced-chevron { transform: rotate(180deg); }
.connector-advanced-setup:not([open]) > :not(summary) { display: none !important; }
.connector-advanced-body { margin-top: 7px; padding: 10px; border: 1px solid #343431; border-radius: 9px; background: #1c1c1b; }
.control-status-row { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 1px solid #343431; border-radius: 9px; background: #222221; }
.control-status-row > span:first-child { min-width: 0; display: grid; gap: 2px; }
.control-status-row strong { font-size: 12px; }
.control-status-row small { color: #74746f; font-size: 11.5px; line-height: 1.35; }
.control-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #2d2d2b; color: #999993; font-size: 11px; font-weight: 720; }
.control-status.success { background: #27252b; color: var(--success); }
.control-status.warning { background: #342b1d; color: var(--warning); }
.control-status.clickable { cursor: pointer; user-select: none; }
.control-status.clickable:focus-visible { outline: 2px solid rgba(242,80,116,.75); outline-offset: 2px; }
.control-field { display: grid; gap: 5px; color: #8d8d87; font-size: 11.5px; }
.control-field input, .control-field select, .control-field textarea { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: #191918; color: white; outline: 0; }
.control-field textarea { min-height: 128px; resize: vertical; font: inherit; line-height: 1.5; }
.control-field input:focus-visible, .control-field select:focus-visible, .control-field textarea:focus-visible { border-color: #6e3d4b; box-shadow: 0 0 0 2px rgba(242,80,116,.08); }
.support-request-form { gap: 10px; }
.support-form-status { min-height: 14px; margin: 0; }
.support-form-status:empty { visibility: hidden; }
.control-field input[type="color"] { padding: 4px; }
.control-field input[type="range"] { padding: 0; accent-color: var(--heart); }
.control-inline-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.connector-modal .primary-button, .connector-modal .secondary-button { min-height: 44px; }
.connector-modal .control-field input, .connector-modal .control-field select { min-height: 44px; }
.connector-field-hint { color: #939ca6; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.connector-vercel-project-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.control-primary { justify-self: start; }
.marketplace-grid, .import-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.marketplace-item { display: grid; gap: 5px; padding: 9px; border: 1px solid #343431; border-radius: 9px; background: #222221; }
.marketplace-item strong { font-size: 12px; }
.marketplace-item p { min-height: 28px; margin: 0; color: #777771; font-size: 11.5px; line-height: 1.4; }
.marketplace-item button { justify-self: start; min-height: 30px; padding: 5px 8px; font-size: 11.5px; }
.permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.permission-option { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #343431; border-radius: 8px; background: #222221; color: #aaa9a4; font-size: 11.5px; }
.permission-option input { accent-color: var(--heart); }
.brand-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.seo-score { display: flex; align-items: baseline; gap: 3px; padding: 2px 0 4px; }
.seo-score strong { font-family: var(--font-display); font-size: 34px; letter-spacing: -.04em; }
.seo-score span { color: #72726d; font-size: 12.5px; }
.import-option { min-height: 58px; display: grid; gap: 2px; padding: 9px 10px; border: 1px solid #343431; border-radius: 9px; background: #222221; color: #c8c8c2; text-align: left; cursor: pointer; }
.import-option:hover { border-color: #55554f; background: #282827; }
.import-option strong { font-size: 12px; }
.import-option small { color: #74746f; font-size: 11.5px; }
.app-canvas { --project-accent: #f25074; --project-background: #f6f4ef; --project-radius: 12px; }
.app-canvas .canvas-primary { background: var(--project-accent); border-radius: var(--project-radius); }
.app-canvas .canvas-secondary, .app-canvas .canvas-card-grid article { border-radius: var(--project-radius); }
.app-canvas { background: var(--project-background); }

html[dir="rtl"] .control-tabs { padding-right: 0; padding-left: 12px; border-right: 0; border-left: 1px solid var(--border-soft); }
html[dir="rtl"] .control-tab, html[dir="rtl"] .import-option { text-align: right; }

body[data-preview-device="tablet"] .control-center-modal { width: min(720px, calc(var(--preview-shell-width) - 28px)); }
body[data-preview-device="mobile"] .control-center-modal { width: min(360px, calc(var(--preview-shell-width) - 20px)); }
body[data-preview-device="mobile"] .responsive-preview-control .notification-button { display: inline-flex; width: 36px; min-height: 36px; }
body[data-preview-device="mobile"] .responsive-preview-button > span:nth-child(2) { display: none; }
body[data-preview-device="mobile"] .preview-device-label { display: none; border-left: 0; padding-left: 0; }
body[data-preview-device="mobile"] .control-center-modal .dialog-card { padding: 12px; }
body[data-preview-device="mobile"] .control-center { grid-template-columns: 1fr; min-height: 0; }
body[data-preview-device="mobile"] .control-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 98px; gap: 5px; padding: 0 0 10px; border-right: 0; border-left: 0; border-bottom: 1px solid var(--border-soft); overflow-x: auto; }
body[data-preview-device="mobile"] .control-tab { min-width: 88px; grid-template-columns: 20px minmax(0,1fr); padding: 7px; }
body[data-preview-device="mobile"] .control-tab > span { width: 20px; height: 20px; }
body[data-preview-device="mobile"] .control-grid.two,
body[data-preview-device="mobile"] .brand-grid,
body[data-preview-device="mobile"] .marketplace-grid,
body[data-preview-device="mobile"] .import-grid,
body[data-preview-device="mobile"] .permission-grid { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .control-inline-actions { display: grid; grid-template-columns: 1fr 1fr; }
body[data-preview-device="mobile"] .control-inline-actions button { width: 100%; }
html[dir="rtl"] body[data-preview-device="mobile"] .control-tabs { padding: 0 0 10px; border-left: 0; border-right: 0; }

@media (max-width: 760px) {
  .control-center-modal { width: min(620px, calc(100vw - 18px)); }
  .control-center { grid-template-columns: 1fr; min-height: 0; }
  .control-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 108px; gap: 5px; padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--border-soft); overflow-x: auto; }
  html[dir="rtl"] .control-tabs { padding: 0 0 10px; border-left: 0; border-bottom: 1px solid var(--border-soft); }
  .control-tab { min-width: 88px; grid-template-columns: 20px minmax(0,1fr); padding: 7px; }
  .control-tab > span { width: 20px; height: 20px; }
  .control-grid.two, .brand-grid { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .control-center-modal .dialog-card, .platform-center-modal .dialog-card { padding: 12px; }
  .control-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 98px; }
  .marketplace-grid, .import-grid, .permission-grid { grid-template-columns: 1fr; }
  .control-inline-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .control-inline-actions button { width: 100%; }
  .security-finding.has-fix-action { grid-template-columns: 1fr; }
  .editor-header-actions #editorControlCenterBtn { display: none; }
}

/* BaseHeart Platform Center: operational product controls using the existing BaseHeart visual system. */
.platform-center-modal { width: min(1040px, calc(100vw - 28px)); }
.platform-center-modal .dialog-card { padding: 18px; }
.platform-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.platform-metric { min-width: 0; display: grid; gap: 3px; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: #222221; }
.platform-metric span { color: #74746f; font-size: 11.5px; }
.platform-metric strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.platform-metric strong.success { color: var(--success); }
.platform-metric strong.warning { color: var(--warning); }
.security-center-card { position: relative; overflow: hidden; border-color: rgba(109,125,140,.28); background: linear-gradient(180deg, rgba(32,30,36,.96), rgba(25,25,24,.98)); }
.security-center-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, transparent, rgba(145,200,163,.68), transparent); opacity: .72; pointer-events: none; }
.security-center-hero { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 14px; align-items: center; padding: 13px; border: 1px solid rgba(122,142,158,.18); border-radius: 12px; background: rgba(18,16,22,.68); }
.security-score { width: 76px; height: 76px; display: grid; place-content: center; grid-template-columns: auto auto; align-items: baseline; border: 1px solid rgba(126,143,158,.26); border-radius: 50%; background: rgba(28,26,32,.9); box-shadow: inset 0 0 0 5px rgba(255,255,255,.012); }
.security-score strong { font-family: var(--font-display); font-size: 26px; letter-spacing: -.055em; }
.security-score span { color: #687580; font-size: 11.5px; }
.security-score.secure { border-color: rgba(145,200,163,.5); box-shadow: inset 0 0 0 5px rgba(145,200,163,.05), 0 0 28px rgba(145,200,163,.06); }
.security-score.review { border-color: rgba(214,178,120,.46); }
.security-score.attention { border-color: rgba(242,80,116,.5); }
.security-center-hero-copy { min-width: 0; display: grid; gap: 4px; }
.security-center-hero-copy > strong { font-size: 14px; }
.security-center-hero-copy > span { color: #9ba5ad; font-size: 12px; line-height: 1.45; }
.security-center-hero-copy > small { color: #69757e; font-size: 11.5px; }
.security-center-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.security-check-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.security-check-grid .control-row { margin: 0; }
.security-finding-list { display: grid; gap: 7px; }
.security-finding { min-width: 0; display: grid; grid-template-columns: 68px minmax(0,1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid rgba(126,143,158,.18); border-radius: 10px; background: rgba(24,22,28,.74); }
.security-finding.has-fix-action { grid-template-columns: 68px minmax(0,1fr) auto; }
.control-status-row.has-fix-action { flex-wrap: wrap; }
.security-finding.critical { border-color: rgba(242,80,116,.42); }
.security-finding.high { border-color: rgba(226,126,93,.35); }
.security-finding.medium { border-color: rgba(214,178,120,.3); }
.security-finding-signal { width: fit-content; max-width: 68px; padding: 4px 6px; border-radius: 999px; background: rgba(255,255,255,.055); color: #aeb7be; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.security-finding.critical .security-finding-signal { background: rgba(242,80,116,.12); color: #ff91a9; }
.security-finding.high .security-finding-signal { background: rgba(226,126,93,.12); color: #e9a184; }
.security-finding.medium .security-finding-signal { background: rgba(214,178,120,.1); color: #d6b278; }
.security-finding-copy { min-width: 0; display: grid; gap: 5px; }
.security-finding-copy > strong { overflow-wrap: anywhere; font-size: 12px; }
.security-evidence, .security-remediation { color: #828e97; font-size: 11.5px; line-height: 1.5; overflow-wrap: anywhere; }
.security-evidence b, .security-remediation b { color: #b4bec5; font-weight: 760; }
.security-remediation { display: block; color: #9aa8b1; }
.security-empty { display: grid; gap: 4px; padding: 14px; border: 1px dashed rgba(145,200,163,.25); border-radius: 10px; background: rgba(145,200,163,.035); }
.security-empty strong { color: #b7d4c0; font-size: 12px; }
.security-empty span { color: #74817a; font-size: 11.5px; }
.security-scan-note { margin: 0; color: #68747d; font-size: 11.5px; line-height: 1.45; }
.security-center-summary .security-finding-list { max-height: 220px; overflow: auto; scrollbar-width: thin; }
.database-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.data-table-chip { min-height: 32px; padding: 5px 9px; border: 1px solid var(--border-soft); border-radius: 8px; background: #252524; color: #aaa9a4; font-size: 11.5px; cursor: pointer; }
.data-table-chip:hover { border-color: #55554f; color: white; }
.environment-switch { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.environment-switch button { min-height: 38px; border: 1px solid var(--border-soft); border-radius: 9px; background: #222221; color: #8e8e88; font-size: 12px; cursor: pointer; }
.environment-switch button:hover { border-color: #55554f; color: white; }
.environment-switch button.active { border-color: #633846; background: #2a1d21; color: white; box-shadow: inset 0 0 0 1px rgba(242,80,116,.06); }
.environment-release-lane, .release-lane { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.environment-release-lane::before, .release-lane::before { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 1px; background: linear-gradient(90deg, rgba(145,200,163,.28), rgba(242,80,116,.22)); pointer-events: none; }
.environment-release-node, .release-lane-node { position: relative; z-index: 1; min-width: 0; min-height: 82px; display: grid; align-content: space-between; gap: 10px; padding: 11px 12px; border: 1px solid rgba(126,143,158,.22); border-radius: 11px; background: rgba(23,21,27,.84); color: #d5d7d9; text-align: left; }
button.environment-release-node { cursor: pointer; }
button.environment-release-node:hover, button.environment-release-node:focus-visible { border-color: rgba(166,190,208,.42); background: rgba(31,29,35,.94); }
.environment-release-node.active, .release-lane-node.active { border-color: rgba(242,80,116,.52); box-shadow: inset 3px 0 0 var(--heart), 0 12px 30px rgba(0,0,0,.12); }
.environment-release-node-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.environment-release-node-head strong, .release-lane-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 760; }
.environment-release-revision, .release-lane-revision { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 18px; font-weight: 760; letter-spacing: -.04em; }
.release-lane-status { color: #747f88; font-size: 11.5px; }
.environment-manager-card .control-inline-actions, .release-lane + .control-inline-actions { margin-top: 2px; }

/* Production is a single four-step path: GitHub -> Convex/config -> Vercel -> Live. */
.production-steps { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.production-step { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px 10px; align-items: start; padding: 11px; border: 1px solid rgba(126,143,158,.2); border-radius: 10px; background: rgba(23,21,27,.76); }
.production-step.success { border-color: rgba(145,200,163,.3); box-shadow: inset 3px 0 0 rgba(145,200,163,.55); }
.production-step.warning { border-color: rgba(224,168,91,.22); }
.production-step.loading { border-color: rgba(126,164,198,.25); }
.production-step-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(145,200,163,.2); background: #232127; color: #9baab6; font: 760 9px/1 ui-monospace,SFMono-Regular,Consolas,monospace; }
.production-step.success .production-step-number { background: #26242a; color: #91c8a3; }
.production-step-copy { min-width: 0; display: grid; gap: 4px; }
.production-step-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.production-step-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dce2e7; font-size: 12px; }
.production-step-copy small { color: #7e8b95; font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.production-step-actions { grid-column: 2; margin: 0; }
.production-step-actions button { min-height: 30px; padding: 5px 8px; font-size: 11.5px; }
.production-publish-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid rgba(242,80,116,.2); border-radius: 10px; background: rgba(23,21,27,.88); }
.production-publish-copy { min-width: 0; display: grid; gap: 3px; }
.production-publish-copy strong { color: #eef1f3; font-size: 12.5px; }
.production-publish-copy small { color: #87939d; font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.production-publish-bar .control-inline-actions, .production-post-actions { margin: 0; }
.production-post-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; border-top: 1px solid rgba(126,143,158,.12); }
html[dir="rtl"] .production-step { box-shadow: none; text-align: right; }
html[dir="rtl"] .production-step.success { box-shadow: inset -3px 0 0 rgba(145,200,163,.55); }
html[dir="rtl"] .production-step-head { direction: rtl; }
body[data-preview-device="mobile"] .production-steps { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .production-publish-bar { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .production-publish-bar .control-inline-actions, body[data-preview-device="mobile"] .production-post-actions { display: grid; grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .production-publish-bar button, body[data-preview-device="mobile"] .production-post-actions button { width: 100%; }
@media (max-width: 760px) {
  .production-steps, .production-publish-bar { grid-template-columns: 1fr; }
  .production-publish-bar .control-inline-actions, .production-post-actions { display: grid; grid-template-columns: 1fr; }
  .production-publish-bar button, .production-post-actions button { width: 100%; }
}
.platform-score { display: flex; align-items: baseline; gap: 4px; padding: 2px 0 4px; }
.platform-score strong { font-family: var(--font-display); font-size: 42px; letter-spacing: -.055em; }
.platform-score span { color: #74746f; font-size: 12.5px; }
.platform-role-row { min-height: 46px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; padding: 7px 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: #222221; }
.platform-role-row > span { color: #8f8f89; font-size: 11.5px; text-transform: capitalize; }
.platform-role-row > strong { font-size: 12px; }
.platform-role-row button { min-height: 30px; padding: 5px 8px; font-size: 11.5px; }
.audit-list { display: grid; gap: 5px; }
.audit-item { min-height: 34px; display: flex; align-items: center; padding: 7px 9px; border: 1px solid #32322f; border-radius: 8px; background: #222221; color: #8d8d87; font-size: 11.5px; }

/* BaseHeart operator backoffice: one pulse rail ties billing, runtime and delivery together. */
.admin-operator-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.9fr); gap: 18px; align-items: center; padding: 18px; border: 1px solid rgba(242,80,116,.22); border-radius: 14px; background: radial-gradient(circle at 8% 10%,rgba(242,80,116,.12),transparent 34%),linear-gradient(135deg,rgba(25,23,29,.96),rgba(22,20,26,.94)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 20px 48px rgba(0,0,0,.14); }
.admin-operator-hero::after { content:''; position:absolute; right:-80px; top:-110px; width:230px; height:230px; border:1px solid rgba(242,80,116,.12); border-radius:50%; box-shadow:0 0 0 30px rgba(242,80,116,.025),0 0 0 62px rgba(100,140,255,.018); pointer-events:none; }
.admin-operator-copy { position:relative; z-index:1; min-width:0; }
.admin-operator-copy h3 { margin:5px 0 6px; color:#f4f5f7; font-family:var(--font-display); font-size:25px; letter-spacing:-.035em; }
.admin-operator-copy p { max-width:520px; margin:0; color:#8d99a5; font-size:12px; line-height:1.55; }
.admin-readonly-badge { width:fit-content; display:inline-flex; margin-top:10px; padding:4px 7px; border:1px solid rgba(143,183,214,.18); border-radius:999px; background:rgba(38,36,42,.74); color:#8ea9bc; font-size:11px; }
.admin-pulse-rail { position:relative; z-index:1; display:grid; gap:7px; }
.admin-pulse-rail::before { content:''; position:absolute; left:14px; top:14px; bottom:14px; width:1px; background:linear-gradient(var(--success),rgba(242,80,116,.48)); opacity:.35; }
.admin-pulse-node { position:relative; min-height:42px; display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; align-items:center; padding:7px 9px; border:1px solid rgba(125,145,163,.16); border-radius:9px; background:rgba(22,20,26,.72); }
.admin-pulse-signal { position:relative; z-index:1; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#232127; color:#8fa0ad; font-size:12px; }
.admin-pulse-node.success .admin-pulse-signal { background:#26242a; color:#8fd1a3; }
.admin-pulse-node.warning .admin-pulse-signal { background:#3b2c1c; color:#e8b66d; }
.admin-pulse-node strong { min-width:0; color:#d9e0e5; font-size:11.5px; }
.admin-metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.admin-service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.admin-service-grid .control-status-row { min-height:68px; align-items:start; }
.admin-revenue-grid, .admin-subscription-mix { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.admin-revenue-grid .build-summary, .admin-subscription-mix .build-summary { min-height:70px; }
.admin-two-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.admin-operator-list { display:grid; gap:6px; max-height:300px; overflow:auto; scrollbar-width:thin; }
.admin-operator-row { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:9px 10px; border:1px solid rgba(126,143,158,.16); border-radius:9px; background:rgba(28,26,32,.82); }
.admin-row-copy { min-width:0; display:grid; gap:3px; }
.admin-row-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#dfe4e8; font-size:12px; }
.admin-row-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#76838e; font-size:11px; }
.admin-row-badges { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.admin-user-controls { min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.admin-user-controls > button { flex:0 0 auto; min-height:30px; padding:5px 9px; }
.admin-grant-form { display:grid; gap:10px; }
.admin-grant-form .build-summary { margin-bottom:2px; }
.admin-grant-status { min-height:16px; margin:0; color:#e6a06f; font-size:11.5px; }
.admin-stripe-setup-card .control-inline-actions { margin-top:12px; }
.admin-stripe-setup-url { display:block; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.05); font-size:12px; overflow-wrap:anywhere; user-select:all; }
.admin-generated-at { align-self:center; color:#707c86; font-size:11px; line-height:1.4; }
html[dir="rtl"] .admin-operator-copy, html[dir="rtl"] .admin-operator-row { text-align:right; }
html[dir="rtl"] .admin-pulse-rail::before { left:auto; right:14px; }
body[data-preview-device="tablet"] .admin-operator-hero, body[data-preview-device="mobile"] .admin-operator-hero { grid-template-columns:1fr; }
body[data-preview-device="tablet"] .admin-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-preview-device="mobile"] .admin-metric-grid, body[data-preview-device="mobile"] .admin-service-grid, body[data-preview-device="mobile"] .admin-revenue-grid, body[data-preview-device="mobile"] .admin-subscription-mix, body[data-preview-device="mobile"] .admin-two-column { grid-template-columns:1fr; }
body[data-preview-device="mobile"] .admin-operator-row { grid-template-columns:1fr; }
body[data-preview-device="mobile"] .admin-row-badges { justify-content:flex-start; }
body[data-preview-device="mobile"] .admin-user-controls { align-items:flex-start; flex-direction:column; }
@media (max-width:760px) { .admin-operator-hero { grid-template-columns:1fr; } .admin-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .admin-service-grid, .admin-two-column { grid-template-columns:1fr; } }
@media (max-width:520px) { .admin-metric-grid, .admin-revenue-grid, .admin-subscription-mix { grid-template-columns:1fr; } .admin-operator-row { grid-template-columns:1fr; } .admin-row-badges { justify-content:flex-start; } .admin-user-controls { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .admin-operator-hero *, .admin-pulse-rail * { scroll-behavior:auto; transition:none !important; animation:none !important; } }

.platform-library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.platform-library-item { min-height: 94px; display: grid; align-content: space-between; gap: 10px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: #222221; }
.platform-library-item strong { font-size: 12px; }
.platform-library-item button { justify-self: start; min-height: 30px; padding: 5px 8px; font-size: 11.5px; }
.app-map-grid { position: relative; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; padding: 8px 0; }
.app-map-grid::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: #3b3b37; }
.app-map-node { position: relative; z-index: 1; min-height: 58px; display: grid; place-items: center; gap: 2px; padding: 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: #222221; color: #b5b5af; font-size: 11.5px; text-align: center; cursor: pointer; }
.app-map-node strong { font-size: 11.5px; }
.app-map-node small { color: #72726d; font-size: 11px; }
.app-map-node:hover, .app-map-node:focus-visible { border-color: #633846; background: #2a1d21; color: white; outline: 0; }
.app-map-node:hover small, .app-map-node:focus-visible small { color: #c5aab2; }
.architecture-mini-map { position: relative; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; padding-top: 3px; }
.app-explain-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.app-explain-grid .architecture-mini-map { grid-column: 1 / -1; }
.health-breakdown { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.ask-screen-shell, .visual-comments-shell { display: grid; gap: 9px; }
.ask-screen-shell textarea, .visual-comments-shell textarea { width: 100%; min-height: 74px; resize: vertical; padding: 9px 10px; border: 1px solid var(--border); border-radius: 9px; background: #191918; color: white; outline: 0; font: inherit; }
.ask-screen-shell textarea:focus, .visual-comments-shell textarea:focus { border-color: #6e3d4b; box-shadow: 0 0 0 2px rgba(242,80,116,.08); }
.ask-screen-answer { min-height: 72px; display: grid; gap: 5px; padding: 11px; border: 1px solid #3a3335; border-radius: 10px; background: #211d1f; }
.ask-screen-answer strong { color: #f0d9df; font-size: 12px; }
.ask-screen-answer p { margin: 0; color: #a7a19f; font-size: 12px; line-height: 1.55; }
.visual-comment-list { display: grid; gap: 6px; max-height: 330px; overflow: auto; }
.visual-comment { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: #20201f; }
.visual-comment > div:first-child { min-width: 0; display: grid; gap: 3px; }
.visual-comment strong { overflow-wrap: anywhere; font-size: 12px; }
.visual-comment small { color: #74746f; font-size: 11px; }
.visual-comment.resolved { opacity: .62; }
.canvas-example-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.canvas-example-actions button { width: 100%; min-height: 42px; }
html[dir="rtl"] .platform-role-row { text-align: right; }
body[data-preview-device="tablet"] .platform-center-modal { width: min(720px, calc(var(--preview-shell-width) - 28px)); }
body[data-preview-device="mobile"] .platform-center-modal { width: min(360px, calc(var(--preview-shell-width) - 20px)); }
body[data-preview-device="mobile"] .platform-metrics,
body[data-preview-device="mobile"] .security-center-metrics,
body[data-preview-device="mobile"] .security-check-grid,
body[data-preview-device="mobile"] .platform-library-grid,
body[data-preview-device="mobile"] .environment-switch,
body[data-preview-device="mobile"] .environment-release-lane,
body[data-preview-device="mobile"] .release-lane { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .environment-release-lane::before,
body[data-preview-device="mobile"] .release-lane::before { display: none; }
body[data-preview-device="mobile"] .app-map-grid, body[data-preview-device="mobile"] .architecture-mini-map, body[data-preview-device="mobile"] .app-explain-grid, body[data-preview-device="mobile"] .health-breakdown { grid-template-columns: 1fr 1fr; }
body[data-preview-device="mobile"] .app-explain-grid .architecture-mini-map { grid-column: 1 / -1; }
body[data-preview-device="mobile"] .app-map-grid::before { display: none; }
body[data-preview-device="mobile"] .canvas-example-actions { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .visual-comment { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .visual-comment .control-inline-actions { width: 100%; }
body[data-preview-device="mobile"] .security-center-hero { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .security-score { width: 66px; height: 66px; }
body[data-preview-device="mobile"] .security-finding { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .security-finding-signal { max-width: none; }
body[data-preview-device="mobile"] .platform-role-row { grid-template-columns: minmax(0,1fr) auto; }
body[data-preview-device="mobile"] .platform-role-row button { grid-column: 1 / -1; width: 100%; }
@media (max-width: 760px) {
  .platform-center-modal { width: min(620px, calc(100vw - 18px)); }
  .platform-metrics, .security-center-metrics, .security-check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .platform-library-grid { grid-template-columns: 1fr; }
  .environment-release-lane, .release-lane { grid-template-columns: 1fr; }
  .environment-release-lane::before, .release-lane::before { display: none; }
  .app-map-grid, .architecture-mini-map { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .app-explain-grid, .health-breakdown { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-explain-grid .architecture-mini-map { grid-column: 1 / -1; }
  .app-map-grid::before { display: none; }
  .security-center-hero { grid-template-columns: auto minmax(0,1fr); }
  .security-finding { grid-template-columns: 62px minmax(0,1fr); }
  .security-finding.has-fix-action { grid-template-columns: 62px minmax(0,1fr) auto; }
}

/* Entitlement feature workspaces reuse the same BaseHeart cards, controls and density. */
.platform-record-list { display: grid; gap: 6px; }
.platform-record { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; padding: 8px 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: #222221; }
.platform-record.compact { grid-template-columns: minmax(0,1fr) auto auto; }
.platform-record > span { min-width: 0; display: grid; gap: 2px; }
.platform-record strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.platform-record small { color: #73736d; font-size: 11.5px; }
.platform-record .control-inline-actions { justify-content: flex-end; margin: 0; }
.platform-record .secondary-button, .platform-record .primary-button { min-height: 29px; padding: 5px 8px; font-size: 11.5px; }
.domain-dns-group { display:grid; gap:7px; }
.domain-primary-control { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px 9px; border:1px solid #3a383e; border-radius:9px; background:#1b211d; }
.domain-primary-copy { min-width:0; display:grid; gap:2px; }
.domain-primary-copy strong { font-size:12px; }
.domain-primary-copy small { overflow:hidden; text-overflow:ellipsis; color:#81817b; font-size:11.5px; }
.domain-readiness.ready { color:#91d4a4; }
.domain-readiness.configure_dns,.domain-readiness.needs_verification { color:#d5b36d; }
.domain-readiness.dns_detected,.domain-readiness.securing_https { color:#a8b8e8; }
.domain-status-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; padding:2px 1px 1px; }
.domain-status-step { position:relative; min-width:0; display:grid; justify-items:center; gap:4px; text-align:center; color:#666660; }
.domain-status-step::before { content:''; position:absolute; top:4px; inset-inline-start:calc(-50% + 7px); width:calc(100% - 10px); height:1px; background:#353532; }
.domain-status-step:first-child::before { display:none; }
.domain-status-step i { position:relative; z-index:1; width:9px; height:9px; border:2px solid #454541; border-radius:50%; background:#191919; }
.domain-status-step em { min-width:0; overflow:hidden; text-overflow:ellipsis; font-style:normal; font-size:11px; line-height:1.25; }
.domain-status-step.complete,.domain-status-step.current { color:#c8c8c2; }
.domain-status-step.complete i { border-color:#6b9877; background:#6b9877; }
.domain-status-step.complete::before { background:#4f7059; }
.domain-status-step.current i { border-color:#9caee3; box-shadow:0 0 0 2px rgba(156,174,227,.12); }
.dns-guide { display:grid; gap:7px; padding:9px; border:1px solid var(--border-soft); border-radius:9px; background:#191919; }
.dns-guide-head { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.dns-guide-head strong { font-size:12px; }
.dns-guide-head small { color:#73736d; font-size:11.5px; }
.dns-guide-table { display:grid; grid-template-columns:58px minmax(80px,.8fr) minmax(140px,1.8fr) 72px auto; gap:6px 8px; align-items:center; overflow-x:auto; padding-bottom:2px; }
.dns-guide-table code { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#c6c6c0; font:8px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; }
.dns-guide-label { color:#73736d; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.dns-guide-status { font-size:11.5px; }
.dns-guide-status.detected { color:#91d4a4; }
.dns-guide-status.waiting { color:#d5b36d; }
.dns-guide-table .secondary-button { min-height:27px; padding:4px 7px; font-size:11.5px; }
html[dir="rtl"] .dns-guide { text-align:right; }
.data-table-chip.active { border-color: #673a47; background: #2b1f23; color: #fff; }
.data-table-detail { display: grid; gap: 8px; padding: 9px; border: 1px solid var(--border-soft); border-radius: 10px; background: #1f1f1e; }
.data-field-list { display: flex; flex-wrap: wrap; gap: 5px; }
.data-field-chip { padding: 4px 6px; border: 1px solid #353532; border-radius: 7px; background: #272726; color: #a7a7a1; font-size: 11.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.masked-secret { color: #73736d; font-size: 12px; letter-spacing: .08em; }
.mcp-manifest { max-height: 180px; overflow: auto; margin: 0; padding: 10px; border: 1px solid var(--border-soft); border-radius: 9px; background: #171716; color: #aaa9a4; font: 8.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.platform-center .control-inline-actions > .control-field { flex: 1 1 170px; margin: 0; }
.platform-center .control-inline-actions > select { flex: 1 1 120px; min-height: 36px; border: 1px solid var(--border-soft); border-radius: 9px; background: #222221; color: #c6c6c0; padding: 7px 9px; font-size: 12px; }
html[dir="rtl"] .platform-record { text-align: right; }
body[data-preview-device="mobile"] .platform-record { grid-template-columns: 1fr; align-items: stretch; }
body[data-preview-device="mobile"] .platform-record .control-inline-actions { display: grid; grid-template-columns: 1fr 1fr; }
body[data-preview-device="mobile"] .platform-record .control-inline-actions button { width: 100%; }
@media (max-width: 620px) {
  .domain-primary-control { grid-template-columns:1fr; }
  .platform-record { grid-template-columns: 1fr; align-items: stretch; }
  .platform-record .control-inline-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .platform-record .control-inline-actions button { width: 100%; }
  .platform-center .control-inline-actions > .control-field, .platform-center .control-inline-actions > select { flex-basis: 100%; }
}

/* My subscription: a dedicated account page using the same BaseHeart workspace language. */
.subscription-page[hidden] { display: none; }
.subscription-page { position: relative; z-index: 2; min-height: 100vh; overflow: hidden; isolation: isolate; }
.subscription-page::before, .subscription-page::after { content: '♥'; position: fixed; z-index: -1; pointer-events: none; user-select: none; font-family: Georgia, serif; line-height: 1; filter: blur(.2px) drop-shadow(0 0 34px currentColor); opacity: .1; }
.subscription-page::before { top: 16%; right: 7%; color: #ff5e98; font-size: clamp(130px,18vw,280px); transform: rotate(13deg); animation: subscription-heart-drift 13s ease-in-out infinite alternate; }
.subscription-page::after { bottom: 7%; left: 5%; color: #6f8cff; font-size: clamp(90px,13vw,200px); transform: rotate(-17deg); animation: subscription-heart-drift 17s ease-in-out -5s infinite alternate-reverse; }
.subscription-page-wrap { position: relative; width: min(1120px, calc(100% - 72px)); margin: 0 auto; padding: 78px 0 84px; }
.subscription-page-wrap::before { content: ''; position: absolute; z-index: -1; inset: 4% -14% 12%; pointer-events: none; background: radial-gradient(circle at 18% 18%, rgba(60,156,255,.13), transparent 30%), radial-gradient(circle at 82% 28%, rgba(255,67,143,.14), transparent 32%), radial-gradient(circle at 54% 78%, rgba(147,92,255,.1), transparent 34%); filter: blur(18px); animation: subscription-aurora 16s ease-in-out infinite alternate; }
.subscription-page-heading { max-width: 720px; margin-bottom: 24px; }
.subscription-page-heading h1 { margin: 8px 0 9px; font-size: clamp(40px, 5vw, 62px); }
.subscription-page-heading p { max-width: 620px; margin: 0; color: #a5b5c5; font-size: 13.5px; line-height: 1.6; }
.subscription-profile-switcher { display: flex; align-items: stretch; justify-content: space-between; gap: 10px; margin: 0 0 14px; padding: 8px; border: 1px solid rgba(151,205,246,.18); border-radius: 14px; background: linear-gradient(145deg,rgba(24,22,28,.74),rgba(21,19,25,.68)); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 42px rgba(11,9,15,.18); backdrop-filter: blur(16px) saturate(125%); }
.subscription-profile-tabs { min-width: 0; flex: 1 1 auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.subscription-profile-tab { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 34px minmax(0,1fr) 22px; gap: 9px; align-items: center; padding: 9px 10px; border: 1px solid rgba(214,206,232,.16); border-radius: 11px; background: rgba(31,29,35,.62); color: #dce7ef; text-align: left; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
.subscription-profile-tab:hover { transform: translateY(-1px); border-color: rgba(242,80,116,.36); background: rgba(36,34,40,.78); }
.subscription-profile-tab:focus-visible { outline: 2px solid var(--heart); outline-offset: 2px; }
.subscription-profile-tab.active { border-color: rgba(242,80,116,.5); background: radial-gradient(circle at 10% 20%,rgba(255,85,143,.14),transparent 42%),rgba(33,31,37,.82); box-shadow: inset 3px 0 #f25074, 0 0 26px rgba(242,80,116,.08); }
.subscription-profile-tab-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,111,160,.25); border-radius: 9px; background: rgba(53,31,43,.72); color: #ff83ac; font-size: 14px; font-weight: 800; }
.subscription-profile-tab-copy { min-width: 0; display: grid; gap: 3px; }
.subscription-profile-tab-copy strong { overflow: hidden; text-overflow: ellipsis; color: #f5f7f9; font-size: 12.5px; white-space: nowrap; }
.subscription-profile-tab-copy small { overflow: hidden; text-overflow: ellipsis; color: #8498aa; font-size: 11.5px; white-space: nowrap; }
.subscription-profile-tab-check { color: #91a6b7; font-size: 12.5px; font-weight: 800; text-align: center; }
.subscription-profile-tab.active .subscription-profile-tab-check { color: #8fd4a4; }
.subscription-company-switcher { width: min(220px,32%); flex: 0 0 auto; display: grid; align-content: center; gap: 5px; padding: 4px 7px; }
.subscription-company-switcher > span { color: #71869a; font-size: 11.5px; }
.subscription-company-switcher select { width: 100%; min-height: 36px; padding: 7px 30px 7px 9px; border: 1px solid rgba(214,206,232,.2); border-radius: 9px; background: #201e24; color: #edf3f7; font: inherit; font-size: 12px; outline: 0; }
.subscription-company-switcher select:focus { border-color: rgba(242,80,116,.5); box-shadow: 0 0 0 2px rgba(242,80,116,.09); }
.subscription-current-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr); gap: 14px 20px; align-items: start; padding: 20px; border: 1px solid rgba(151,205,246,.24); border-radius: 16px; background: radial-gradient(circle at 10% 10%, rgba(255,74,135,.13), transparent 30%), radial-gradient(circle at 88% 12%, rgba(89,141,255,.13), transparent 30%), linear-gradient(145deg,rgba(24,22,28,.9),rgba(20,18,24,.84)); box-shadow: 0 28px 82px rgba(11,9,15,.34), 0 0 48px rgba(80,120,255,.06), inset 0 1px rgba(255,255,255,.05); backdrop-filter: blur(20px) saturate(132%); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.subscription-current-card::after { content: ''; position: absolute; inset: -70% -25%; pointer-events: none; background: linear-gradient(115deg,transparent 42%,rgba(255,255,255,.055) 49%,transparent 56%); transform: translateX(-55%) rotate(8deg); animation: subscription-card-sheen 8s ease-in-out infinite; }
.subscription-current-card:hover { transform: translateY(-2px); border-color: rgba(242,80,116,.34); box-shadow: 0 32px 92px rgba(11,9,15,.4), 0 0 58px rgba(242,80,116,.08), inset 0 1px rgba(255,255,255,.06); }
.subscription-current-main { grid-row: 1 / span 2; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 14px; align-items: start; }
.subscription-current-icon { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,97,150,.5); border-radius: 14px; background: radial-gradient(circle at 35% 28%,rgba(255,122,169,.24),transparent 38%), linear-gradient(145deg,#341c2a,#252329); color: #ff78aa; font-size: 22px; box-shadow: 0 0 24px rgba(242,80,116,.16), inset 0 1px rgba(255,255,255,.08); animation: subscription-icon-pulse 3.8s ease-in-out infinite; }
.subscription-current-copy { min-width: 0; }
.subscription-current-title { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 4px; }
.subscription-current-title h2 { margin: 0; font-size: 34px; }
.subscription-active-badge { padding: 4px 7px; border-radius: 999px; background: #2a282e; color: #a9d9b7; font-size: 11.5px; font-weight: 760; }
.subscription-active-badge.signed-out { border: 1px solid rgba(143,154,166,.2); background: rgba(38,36,42,.76); color: #929da8; }
.subscription-current-copy p { max-width: 500px; margin: 8px 0 0; color: #95a5b5; font-size: 12.5px; line-height: 1.55; }
.subscription-current-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.subscription-current-metrics > div { min-width: 0; display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(214,206,232,.16); border-radius: 10px; background: rgba(35,33,39,.72); }
.subscription-current-metrics span { color: #71869a; font-size: 11.5px; }
.subscription-current-metrics strong { overflow: hidden; text-overflow: ellipsis; color: #eef5fa; font-size: 12px; white-space: nowrap; }
#subscriptionAgentAccess { overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.4; }
.subscription-current-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; }
.subscription-cancel-button { border-color: rgba(255,96,122,.34) !important; background: rgba(72,24,34,.28) !important; color: #ff9eaf !important; }
.subscription-cancel-button:hover, .subscription-cancel-button:focus-visible { border-color: rgba(255,96,122,.58) !important; background: rgba(104,31,46,.38) !important; color: #fff !important; outline: 0; }
.subscription-change-notice { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid rgba(242,80,116,.26); border-radius: 11px; background: linear-gradient(90deg,rgba(242,80,116,.10),rgba(76,66,160,.08) 52%,rgba(33,31,37,.52)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.subscription-change-notice-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(242,80,116,.13); color: #ff8eac; font-size: 15px; font-weight: 800; }
.subscription-change-notice-copy { min-width: 0; display: grid; gap: 3px; }
.subscription-change-notice-copy > strong { color: #f5e8ee; font-size: 12px; }
.subscription-change-notice-detail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: #91a1af; font-size: 11.5px; line-height: 1.4; }
.subscription-change-notice-detail b { color: #dfe7ee; font-weight: 720; }
.subscription-undo-change { min-height: 30px; padding: 6px 9px; font-size: 11.5px; }
.subscription-change-confirmation { display: grid; gap: 10px; }
.subscription-change-confirmation-row, .subscription-change-confirmation-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #39373d; border-radius: 10px; background: rgba(23,21,27,.88); }
.subscription-change-confirmation-row span, .subscription-change-confirmation-note span { color: #8998a6; font-size: 12px; }
.subscription-change-confirmation-row strong, .subscription-change-confirmation-note strong { color: #f0f3f6; font-size: 12.5px; }
.subscription-danger-button { border-color: rgba(255,85,112,.62) !important; background: linear-gradient(110deg,#d93c63,#b92e50) !important; }
.subscription-owner-note { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; max-width: 390px; padding: 7px 9px; border: 1px solid rgba(214,178,120,.22); border-radius: 9px; background: rgba(52,38,29,.58); color: #c9af83; font-size: 11.5px; line-height: 1.4; }
.subscription-owner-note > span:first-child { color: #d6b278; font-size: 12.5px; }
.subscription-owner-lock-banner { border-color: #55462f; background: #282318; }
.subscription-owner-lock-banner .subscription-free-icon { color: #d6b278; }
.subscription-benefits-section { margin-top: 34px; padding-top: 32px; border-top: 1px solid rgba(214,206,232,.16); }
.subscription-benefits-section .section-heading { margin-bottom: 7px; }
.subscription-benefits-copy { margin: 0 0 16px; color: #8da0b2; font-size: 12.5px; }
.subscription-benefit-groups { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
.subscription-benefit-group { min-width: 0; overflow: hidden; border: 1px solid rgba(214,206,232,.18); border-radius: 12px; background: rgba(22,20,26,.77); backdrop-filter: blur(12px); }
.subscription-benefit-group-active { border-color: rgba(242,80,116,.26); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.subscription-benefit-group-head { min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(214,206,232,.14); background: rgba(39,37,43,.7); }
.subscription-benefit-plan-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #302129; color: #ed9db0; }
.subscription-benefit-source { min-width: 0; display: grid; gap: 2px; color: #74899d; font-size: 11.5px; }
.subscription-benefit-source strong { color: #f3f5f6; font-size: 13px; }
.subscription-benefit-inheritance { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: #8da0b2; line-height: 1.35; }
.subscription-benefit-inheritance strong { color: #b8c8d5; font-size: inherit; }
.subscription-benefit-group-head > .subscription-active-badge { margin-left: auto; }
.subscription-benefit-row { min-height: 47px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-bottom: 1px solid rgba(214,206,232,.1); }
.subscription-benefit-row:last-child { border-bottom: 0; }
.subscription-benefit-row-copy { min-width: 0; display: flex; align-items: center; gap: 8px; }
.subscription-benefit-row-copy strong { color: #dce6ee; font-size: 12px; font-weight: 650; }
.subscription-benefit-check { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; background: #29272d; color: var(--success); font-size: 12px; }
.subscription-benefit-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex: 0 0 auto; }
.subscription-benefit-status { flex: 0 0 auto; padding: 4px 6px; border-radius: 999px; background: #2f2d33; color: #93a9ba; font-size: 11px; }
.subscription-benefit-action { min-width: 74px; min-height: 30px; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 720; }
.subscription-benefit-action:hover { border-color: #6c4350; background: #2b2527; color: #fff; }
.subscription-benefit-action:focus-visible { outline: 2px solid var(--heart); outline-offset: 2px; }
html[dir="rtl"] .subscription-page-heading, html[dir="rtl"] .subscription-current-card, html[dir="rtl"] .subscription-benefit-group { text-align: right; }
html[dir="rtl"] .subscription-profile-tab { text-align: right; }
html[dir="rtl"] .subscription-profile-tab.active { box-shadow: inset -3px 0 #f25074, 0 0 26px rgba(242,80,116,.08); }
html[dir="rtl"] .subscription-current-actions { justify-content: flex-start; }
body[data-preview-device="tablet"] .subscription-page-wrap { width: calc(100% - 32px); padding-top: 76px; }
body[data-preview-device="tablet"] .subscription-current-card { grid-template-columns: 1fr; }
body[data-preview-device="tablet"] .subscription-current-main { grid-row: auto; }
body[data-preview-device="tablet"] .subscription-current-actions { justify-content: flex-start; }
body[data-preview-device="mobile"] .subscription-page-wrap { width: calc(100% - 20px); padding: 72px 0 54px; }
body[data-preview-device="mobile"] .subscription-page-heading h1 { font-size: 38px; }
body[data-preview-device="mobile"] .subscription-profile-switcher { display: grid; }
body[data-preview-device="mobile"] .subscription-profile-tabs { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .subscription-company-switcher { width: 100%; padding: 4px 2px 2px; }
body[data-preview-device="mobile"] .subscription-current-card { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
body[data-preview-device="mobile"] .subscription-current-main { grid-row: auto; grid-template-columns: 42px minmax(0,1fr); gap: 10px; }
body[data-preview-device="mobile"] .subscription-current-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 18px; }
body[data-preview-device="mobile"] .subscription-current-title h2 { font-size: 28px; }
body[data-preview-device="mobile"] .subscription-current-metrics { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .subscription-current-actions { display: grid; grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .subscription-current-actions button, body[data-preview-device="mobile"] .subscription-owner-note { width: 100%; max-width: none; }
body[data-preview-device="mobile"] .subscription-benefit-groups { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .subscription-benefit-row { align-items: flex-start; flex-direction: column; }
body[data-preview-device="mobile"] .subscription-benefit-row-actions { width: 100%; justify-content: space-between; }
body[data-preview-device="mobile"] .subscription-benefit-action { min-width: 96px; }
@media (max-width: 900px) {
  .subscription-page-wrap { width: min(100% - 28px, 780px); padding-top: 74px; }
  .subscription-current-card { grid-template-columns: 1fr; }
  .subscription-current-main { grid-row: auto; }
  .subscription-current-actions { justify-content: flex-start; }
}
@media (max-width: 620px) {
  .subscription-page-wrap { width: min(100% - 20px, 620px); padding-bottom: 54px; }
  .subscription-page-heading h1 { font-size: 38px; }
  .subscription-profile-switcher { display: grid; }
  .subscription-profile-tabs { grid-template-columns: 1fr; }
  .subscription-company-switcher { width: 100%; padding: 4px 2px 2px; }
  .subscription-current-metrics, .subscription-benefit-groups { grid-template-columns: 1fr; }
  .subscription-benefit-row { align-items: flex-start; flex-direction: column; }
  .subscription-benefit-row-actions { width: 100%; justify-content: space-between; }
  .subscription-benefit-action { min-width: 96px; }
  .subscription-current-actions { display: grid; grid-template-columns: 1fr; }
  .subscription-current-actions button, .subscription-owner-note { width: 100%; max-width: none; }
}

/* BaseHeart subscriptions: five clear product tiers using the existing dark workspace system. */
.subscription-modal { width: min(1160px, calc(100vw - 28px)); }
.subscription-modal .dialog-card { max-height: calc(100vh - 44px); overflow: auto; padding: 18px; }
.subscription-shell { display: grid; gap: 14px; }
.production-auth-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; min-width: min(430px, 72vw); }
.production-auth-form input { grid-column: 1 / -1; min-height: 40px; padding: 8px 10px; border: 1px solid #41413d; border-radius: 9px; background: #191918; color: #f3f2ed; outline: 0; font: inherit; }
.production-auth-form input:focus { border-color: #794755; box-shadow: 0 0 0 2px rgba(242,80,116,.1); }
.production-auth-form input[hidden] { display: none; }
.production-auth-form .production-auth-status { grid-column: 1 / -1; min-height: 18px; color: #d49aa7; font-size: 11.5px; line-height: 1.4; }
.production-auth-form button { width: 100%; }
.production-auth-form button:last-child { grid-column: 1 / -1; }
@media (max-width: 560px) { .production-auth-form { grid-template-columns: 1fr; min-width: 0; } .production-auth-form > * { grid-column: 1 !important; } }
.subscription-free-banner { min-height: 58px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #57313d; border-radius: 11px; background: #261c1f; }
.subscription-free-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; background: #351f26; color: var(--heart); font-size: 15px; }
.subscription-free-banner > div { min-width: 0; display: grid; gap: 2px; }
.subscription-free-banner strong { font-size: 12.5px; }
.subscription-free-banner small { color: #918a8c; font-size: 11.5px; line-height: 1.4; }
.subscription-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; align-items: stretch; }
.subscription-plan-card { position: relative; overflow: hidden; min-width: 0; min-height: 354px; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid rgba(117,130,148,.25); border-radius: 12px; background: linear-gradient(160deg,rgba(37,35,41,.96),rgba(28,26,32,.96)); box-shadow: inset 0 1px rgba(255,255,255,.025); transition: border-color .24s ease, background .24s ease, transform .24s ease, box-shadow .24s ease; }
.subscription-plan-card::before { content: ''; position: absolute; width: 130px; height: 130px; top: -74px; right: -52px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle,rgba(255,255,255,.15),transparent 68%); opacity: .46; transition: transform .35s ease, opacity .35s ease; }
.subscription-plan-card:nth-child(1) { background: radial-gradient(circle at 92% 4%,rgba(53,153,255,.12),transparent 34%),linear-gradient(160deg,#27252b,#1d1b21); }
.subscription-plan-card:nth-child(2) { background: radial-gradient(circle at 92% 4%,rgba(83,200,180,.13),transparent 34%),linear-gradient(160deg,#252329,#1d1b21); }
.subscription-plan-card:nth-child(3) { background: radial-gradient(circle at 92% 4%,rgba(184,93,255,.16),transparent 34%),radial-gradient(circle at 8% 96%,rgba(242,80,116,.1),transparent 38%),linear-gradient(160deg,#28262c,#1d1b21); }
.subscription-plan-card:nth-child(4) { background: radial-gradient(circle at 92% 4%,rgba(255,174,74,.14),transparent 34%),linear-gradient(160deg,#2a251d,#1c1b1b); }
.subscription-plan-card:nth-child(5) { background: radial-gradient(circle at 92% 4%,rgba(255,70,131,.16),transparent 34%),radial-gradient(circle at 9% 96%,rgba(91,124,255,.1),transparent 38%),linear-gradient(160deg,#2a1e28,#1d1b21); }
.subscription-plan-card:hover { border-color: rgba(171,190,215,.45); transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.28),0 0 30px rgba(115,126,255,.06),inset 0 1px rgba(255,255,255,.045); }
.subscription-plan-card:hover::before { transform: scale(1.3) translate(-8px,8px); opacity: .72; }
.subscription-plan-card.featured { border-color: rgba(177,92,255,.36); box-shadow: 0 0 0 1px rgba(177,92,255,.05),0 16px 46px rgba(80,28,130,.12); }
.subscription-plan-card.current { border-color: rgba(242,80,116,.52); box-shadow: 0 0 0 1px rgba(242,80,116,.1),0 16px 44px rgba(242,80,116,.08),inset 0 1px rgba(255,255,255,.04); }
.subscription-plan-card[data-focused="true"] { outline: 1px solid rgba(168,179,191,.16); outline-offset: 2px; }
.subscription-plan-head { min-height: 36px; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.subscription-plan-identity { min-width: 0; display: flex; gap: 8px; align-items: center; }
.subscription-plan-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; background: #2c2c2a; color: #b7b7b0; }
.subscription-plan-card.current .subscription-plan-icon { background: #342027; color: var(--heart); }
.subscription-plan-identity > div { min-width: 0; display: grid; gap: 3px; }
.subscription-plan-identity strong { font-size: 13.5px; }
.subscription-plan-badge, .subscription-current-badge { width: fit-content; padding: 3px 6px; border-radius: 999px; background: #30302e; color: #999993; font-size: 11px; white-space: nowrap; }
.subscription-plan-badge { background: #322229; color: #e4a8b7; }
.subscription-current-badge { background: #253329; color: var(--success); }
.subscription-price { display: grid; gap: 2px; padding-top: 2px; }
.subscription-price strong { color: #f5f4f0; font-family: var(--font-display); font-size: 17px; letter-spacing: -.025em; }
.subscription-price small { color: #73736d; font-size: 11.5px; }
.subscription-pricing-facts { display: grid; gap: 6px; }
.subscription-pricing-facts .build-summary { min-height: 58px; padding: 8px; border-color: #343432; background: #242423; }
.subscription-pricing-facts .build-summary strong { font-size: 12px; }
.subscription-pricing-facts .build-summary p { margin: 2px 0 5px; color: #bdbdb7; font-size: 11.5px; line-height: 1.35; }
.subscription-pricing-facts .status-pill { font-size: 10.5px; }
.subscription-description { min-height: 48px; margin: 0; color: #91918b; font-size: 12px; line-height: 1.5; }
.subscription-project-limit { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 1px solid #333330; border-radius: 8px; background: #242423; }
.subscription-project-limit span { color: #777771; font-size: 11.5px; }
.subscription-project-limit strong { font-size: 12px; }
.subscription-features { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.subscription-features[hidden] { display: none; }
.subscription-features li { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 5px; align-items: start; color: #aaa9a4; font-size: 11.5px; line-height: 1.35; }
.subscription-features li > span:first-child { color: var(--success); font-size: 11.5px; }
.subscription-features-extra { padding-top: 2px; }
.subscription-plan-actions { margin-top: auto; display: grid; gap: 6px; }
.subscription-plan-actions button { width: 100%; }
.subscription-downgrade-select { border-color: rgba(255,174,94,.28); background: rgba(83,55,31,.22); color: #eec49b; }
.subscription-downgrade-select:hover, .subscription-downgrade-select:focus-visible { border-color: rgba(255,174,94,.48); background: rgba(105,66,34,.30); color: #fff; outline: 0; }
.subscription-select.current { border-color: #425146; color: #a9ceb4; cursor: default; }
.subscription-details { min-height: 30px; }
.subscription-compare-toggle { justify-self: center; min-width: 150px; }
.subscription-comparison[hidden] { display: none; }
.subscription-comparison { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: 10px; background: #20201f; }
.subscription-comparison table { width: 100%; min-width: 760px; border-collapse: collapse; }
.subscription-comparison th, .subscription-comparison td { padding: 9px 10px; border-bottom: 1px solid #30302e; text-align: center; color: #aaa9a4; font-size: 11.5px; }
.subscription-comparison thead th { color: #d5d5d0; background: #252524; font-size: 12px; }
.subscription-comparison th:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: #222221; color: #c7c7c1; }
.subscription-comparison tr:last-child th, .subscription-comparison tr:last-child td { border-bottom: 0; }
html[dir="rtl"] .subscription-plan-card, html[dir="rtl"] .subscription-comparison th:first-child { text-align: right; }
html[dir="rtl"] .subscription-comparison th:first-child { left: auto; right: 0; }
body[data-preview-device="tablet"] .subscription-modal { width: min(720px, calc(var(--preview-shell-width) - 28px)); }
body[data-preview-device="tablet"] .subscription-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
body[data-preview-device="mobile"] .subscription-modal { width: min(360px, calc(var(--preview-shell-width) - 20px)); }
body[data-preview-device="mobile"] .subscription-modal .dialog-card { padding: 12px; }
body[data-preview-device="mobile"] .subscription-grid { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .subscription-plan-card { min-height: 0; }
@media (max-width: 920px) {
  .subscription-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .subscription-modal { width: min(100vw - 18px, 430px); }
  .subscription-modal .dialog-card { padding: 12px; }
  .subscription-grid { grid-template-columns: 1fr; }
  .subscription-plan-card { min-height: 0; }
}

.company-seat-picker { display: grid; gap: 12px; width: min(520px, 100%); padding: 2px 0; }
.company-seat-picker-head { display: grid; gap: 3px; }
.company-seat-picker-head strong { color: #f3f2ed; font-size: 14px; }
.company-seat-picker-head small, .company-seat-note, .company-seat-policy { color: #8f8f89; font-size: 12px; line-height: 1.5; }
.company-seat-stepper { display: grid; grid-template-columns: 44px minmax(88px, 1fr) 44px; gap: 8px; align-items: stretch; }
.company-seat-stepper button { min-height: 44px; padding: 0; font-size: 18px; }
.company-seat-stepper input { min-width: 0; min-height: 44px; border: 1px solid #41413d; border-radius: 9px; background: #191918; color: #f3f2ed; text-align: center; font-weight: 780; outline: 0; }
.company-seat-stepper input:focus-visible { border-color: rgba(242,80,116,.72); box-shadow: 0 0 0 2px rgba(242,80,116,.12); }
.company-seat-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.company-seat-metric { min-width: 0; display: grid; gap: 4px; padding: 9px; border: 1px solid #353532; border-radius: 9px; background: #242423; }
.company-seat-metric span { color: #777771; font-size: 11.5px; }
.company-seat-metric strong { overflow-wrap: anywhere; color: #e7e6e1; font-size: 12.5px; }
.company-seat-note { margin: 0; padding: 9px 10px; border-left: 2px solid rgba(242,80,116,.42); background: rgba(242,80,116,.045); }
.company-seat-policy { display: grid; gap: 5px; padding: 9px 10px; border: 1px solid #353532; border-radius: 9px; background: #20201f; }
.company-seat-policy p { margin: 0; }
.subscription-seat-button { border-color: rgba(132,177,224,.28); }
html[dir="rtl"] .company-seat-note { border-left: 0; border-right: 2px solid rgba(242,80,116,.42); }
@media (max-width: 560px) { .company-seat-metrics { grid-template-columns: 1fr; } .company-seat-stepper { grid-template-columns: 42px minmax(72px,1fr) 42px; } }

.company-heart-distribution-entry { min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid rgba(242,80,116,.16); border-radius:10px; background:linear-gradient(135deg,rgba(242,80,116,.065),rgba(255,255,255,.018)); }
.company-heart-distribution-entry-mark { width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(242,80,116,.24); border-radius:9px; background:rgba(242,80,116,.08); color:var(--heart); font-size:14px; }
.company-heart-distribution-entry-copy { min-width:0; display:grid; gap:2px; }
.company-heart-distribution-entry-copy strong { color:#e8e7e2; font-size:12.5px; }
.company-heart-distribution-entry-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#81817b; font-size:11.5px; }
.company-heart-distribution-button { min-height:34px; white-space:nowrap; }
.company-heart-distribution-editor { width:min(650px,100%); display:grid; gap:12px; }
.dialog-card:has(.company-heart-distribution-editor) { max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain; }
.company-heart-distribution-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.company-heart-distribution-metric { min-width:0; display:grid; gap:4px; padding:10px 11px; border:1px solid #353532; border-radius:10px; background:#222221; }
.company-heart-distribution-metric span { color:#777771; font-size:11.5px; }
.company-heart-distribution-metric strong { overflow-wrap:anywhere; color:#e9e8e3; font-size:13px; }
.company-heart-distribution-rail { width:100%; min-height:12px; display:flex; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:999px; background:#191918; box-shadow:inset 0 1px 4px rgba(0,0,0,.35); }
.company-heart-distribution-segment { min-width:0; flex:0 0 0%; border-right:1px solid rgba(20,20,20,.34); background:var(--heart); transition:flex-basis .16s ease; }
.company-heart-distribution-segment:nth-child(2n) { background:#b66f92; }
.company-heart-distribution-segment:nth-child(3n) { background:#789bc1; }
.company-heart-distribution-segment:nth-child(4n) { background:#91b49d; }
.company-heart-distribution-segment:last-child { border-right:0; }
.company-heart-distribution-list { display:grid; gap:7px; }
.company-heart-distribution-row { min-width:0; display:grid; grid-template-columns:minmax(150px,1.35fr) minmax(86px,.65fr) 104px minmax(86px,.65fr); gap:8px; align-items:center; padding:9px; border:1px solid #353532; border-radius:10px; background:#20201f; }
.company-heart-distribution-identity { min-width:0; display:grid; grid-template-columns:32px minmax(0,1fr); gap:8px; align-items:center; }
.company-heart-distribution-avatar { width:32px; height:32px; display:grid; place-items:center; border:1px solid rgba(242,80,116,.18); border-radius:9px; background:#2a2224; color:#e4a4b4; font-size:12.5px; font-weight:800; }
.company-heart-distribution-copy { min-width:0; display:grid; gap:2px; }
.company-heart-distribution-copy strong, .company-heart-distribution-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.company-heart-distribution-copy strong { color:#deddd8; font-size:12px; }
.company-heart-distribution-copy small { color:#72726d; font-size:11px; }
.company-heart-distribution-current, .company-heart-distribution-next { min-width:0; display:grid; gap:3px; }
.company-heart-distribution-current span, .company-heart-distribution-next span, .company-heart-distribution-field > span { color:#73736d; font-size:11px; }
.company-heart-distribution-current strong, .company-heart-distribution-next strong { overflow-wrap:anywhere; color:#d7d6d1; font-size:12px; }
.company-heart-distribution-next strong { color:#f0a4b5; }
.company-heart-distribution-field { min-width:0; display:grid; gap:4px; }
.company-heart-distribution-input-wrap { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 20px; align-items:center; overflow:hidden; border:1px solid #41413d; border-radius:8px; background:#191918; }
.company-heart-distribution-input-wrap:focus-within { border-color:rgba(242,80,116,.7); box-shadow:0 0 0 2px rgba(242,80,116,.1); }
.company-heart-distribution-input-wrap input { width:100%; min-width:0; height:34px; padding:6px 3px 6px 8px; border:0; outline:0; background:transparent; color:#f3f2ed; text-align:right; font-size:12px; font-weight:750; }
.company-heart-distribution-input-wrap b { color:#777771; font-size:11.5px; font-weight:700; }
.company-heart-distribution-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.company-heart-distribution-total { display:flex; align-items:center; gap:8px; margin-left:auto; padding:7px 9px; border:1px solid #373733; border-radius:9px; background:#20201f; }
.company-heart-distribution-total span { color:#777771; font-size:11.5px; }
.company-heart-distribution-total strong { color:#d5b173; font-size:12.5px; }
.company-heart-distribution-total.valid { border-color:rgba(145,200,163,.24); background:rgba(145,200,163,.055); }
.company-heart-distribution-total.valid strong { color:var(--success); }
.company-heart-distribution-total.invalid { border-color:rgba(214,178,120,.22); }
.company-heart-distribution-note { margin:0; padding:9px 10px; border-left:2px solid rgba(242,80,116,.42); background:rgba(242,80,116,.045); color:#8f8f89; font-size:11.5px; line-height:1.5; }
html[dir="rtl"] .company-heart-distribution-note { border-left:0; border-right:2px solid rgba(242,80,116,.42); }
html[dir="rtl"] .company-heart-distribution-input-wrap input { padding:6px 8px 6px 3px; text-align:left; }
@media (prefers-reduced-motion:reduce) { .company-heart-distribution-segment { transition:none; } }
@media (max-width:620px) {
  .dialog-card:has(.company-heart-distribution-editor) { max-height:calc(100vh - 18px); max-height:calc(100dvh - 18px); padding:14px; }
  .dialog-card:has(.company-heart-distribution-editor) .dialog-actions { position:sticky; z-index:2; bottom:0; margin:10px -2px -2px; padding:10px 2px 2px; background:linear-gradient(180deg,rgba(27,27,26,0),#1b1b1a 26%); }
  .company-heart-distribution-entry { grid-template-columns:34px minmax(0,1fr); }
  .company-heart-distribution-entry .company-heart-distribution-button { grid-column:1/-1; width:100%; }
  .company-heart-distribution-summary { grid-template-columns:1fr; }
  .company-heart-distribution-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .company-heart-distribution-identity { grid-column:1/-1; }
  .company-heart-distribution-field { grid-column:1/-1; }
  .company-heart-distribution-footer { align-items:stretch; flex-direction:column; }
  .company-heart-distribution-footer button, .company-heart-distribution-total { width:100%; }
  .company-heart-distribution-total { justify-content:space-between; margin-left:0; }
}
@media (max-width:420px) { .company-heart-distribution-row { grid-template-columns:1fr; } .company-heart-distribution-identity,.company-heart-distribution-field { grid-column:auto; } }

/* Hearts shop: fixed packs, optional cart and separate company/private destinations in BaseHeart's UI system. */
.heart-shop-modal { width: min(760px, calc(100vw - 28px)); }
.heart-shop-main { display: grid; gap: 10px; }
.heart-dropdown-stack { overflow: hidden; border: 1px solid #373733; border-radius: 12px; background: #1f1f1e; box-shadow: inset 0 1px rgba(255,255,255,.018); }
.heart-dropdown-stack + .heart-dropdown-stack { margin-top: 2px; }
.heart-dropdown { position: relative; border-bottom: 1px solid #343431; }
.heart-dropdown:last-child { border-bottom: 0; }
.heart-dropdown-trigger { width: 100%; min-height: 52px; display: grid; grid-template-columns: 3px 34px minmax(0,1fr) 28px; gap: 10px; align-items: center; padding: 8px 10px 8px 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background .16s ease; }
.heart-dropdown-trigger:hover { background: #242423; }
.heart-dropdown-trigger:focus-visible { outline: 2px solid rgba(242,80,116,.38); outline-offset: -2px; }
.heart-dropdown-rail { align-self: stretch; width: 3px; border-radius: 0 999px 999px 0; background: transparent; transition: background .16s ease; }
.heart-dropdown.open .heart-dropdown-rail { background: var(--heart); }
.heart-dropdown-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #3a3637; border-radius: 9px; background: #292526; color: #d695a5; font-size: 13px; font-weight: 800; }
.heart-dropdown-copy { min-width: 0; display: grid; gap: 2px; }
.heart-dropdown-copy strong { color: #deded9; font-size: 12px; font-weight: 720; }
.heart-dropdown-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #74746f; font-size: 11px; line-height: 1.35; }
.heart-dropdown-chevron { width: 28px; height: 28px; display: grid; place-items: center; justify-self: end; color: #787872; font-size: 17px; line-height: 1; transition: transform .18s ease, color .18s ease; }
.heart-dropdown.open { background: #211f20; }
.heart-dropdown.open .heart-dropdown-trigger { background: #242122; }
.heart-dropdown.open .heart-dropdown-icon { border-color: #5a3a43; background: #302329; color: #f0a8ba; }
.heart-dropdown.open .heart-dropdown-copy strong { color: #f1f1ec; }
.heart-dropdown.open .heart-dropdown-chevron { transform: rotate(90deg); color: #f0a7b9; }
.heart-dropdown-panel { border-top: 1px solid #353231; background: #1c1c1b; }
.heart-dropdown-panel[hidden] { display: none; }
.heart-disclosure-content { display: grid; gap: 8px; padding: 10px; }
.heart-pack-disclosure-content { padding-top: 9px; }
.heart-dropdown-panel > .platform-metrics, .heart-dropdown-panel > .dialog-list { margin: 0; padding: 10px; }
.heart-dropdown-stack-primary { border-color: #46363b; }
.heart-dropdown-stack-secondary { border-color: #363635; }
.heart-dropdown-accent .heart-dropdown-icon { color: #e5a0b1; }
.heart-funding-card > .heart-funding-note { margin: 2px 2px 0; }
.heart-economy-metrics { margin-top: 0; }
@keyframes subscription-heart-drift { from { translate: 0 0; scale: .96; opacity: .07; } to { translate: -18px 22px; scale: 1.06; opacity: .13; } }
@keyframes subscription-aurora { from { transform: translate3d(-1%,0,0) scale(.98); opacity: .72; } to { transform: translate3d(2%,-1%,0) scale(1.04); opacity: 1; } }
@keyframes subscription-card-sheen { 0%,38% { transform: translateX(-72%) rotate(8deg); opacity: 0; } 48% { opacity: .7; } 62%,100% { transform: translateX(76%) rotate(8deg); opacity: 0; } }
@keyframes subscription-icon-pulse { 0%,100% { transform: translateY(0) scale(1); box-shadow: 0 0 22px rgba(242,80,116,.14),inset 0 1px rgba(255,255,255,.08); } 50% { transform: translateY(-2px) scale(1.035); box-shadow: 0 0 32px rgba(242,80,116,.24),inset 0 1px rgba(255,255,255,.1); } }
@keyframes heart-vault-float { from { transform: translate3d(0,0,0) rotate(12deg) scale(.96); opacity: .62; } to { transform: translate3d(-18px,18px,0) rotate(8deg) scale(1.05); opacity: 1; } }
@keyframes heart-vault-glow { from { transform: translate3d(-3%,0,0) scale(.92); opacity: .65; } to { transform: translate3d(4%,-4%,0) scale(1.08); opacity: 1; } }
@keyframes heart-vault-beat { 0%,100% { transform: scale(1); } 48% { transform: scale(1.025); } 56% { transform: scale(.99); } 64% { transform: scale(1.045); } }
@media (prefers-reduced-motion: reduce) {
  .heart-dropdown-trigger, .heart-dropdown-rail, .heart-dropdown-chevron, .subscription-current-card, .subscription-plan-card, .heart-shop-modal .heart-pack-card { transition: none; }
  .subscription-page::before, .subscription-page::after, .subscription-page-wrap::before, .subscription-current-card::after, .subscription-current-icon, .heart-shop-modal .dialog-card::before, .heart-shop-modal .dialog-card::after, .heart-vault-gem { animation: none !important; }
}
.heart-shop-modal.heart-shop-has-cart { width: min(1080px, calc(100vw - 28px)); }
.heart-shop-modal .dialog-card { max-height: calc(100vh - 40px); overflow: auto; }
.heart-shop-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; align-items: start; }
.heart-shop-layout.has-cart { grid-template-columns: minmax(0,1.65fr) minmax(290px,.85fr); }
.heart-shop-main { min-width: 0; }
.heart-funding-card { display: grid; gap: 8px; margin: 10px 0; padding: 0; border: 0; background: transparent; }
.heart-funding-head { display: flex; gap: 9px; align-items: center; }
.heart-funding-head > div { min-width: 0; display: grid; gap: 2px; }
.heart-funding-head strong { font-size: 13px; }
.heart-funding-head small { color: #85857f; font-size: 11.5px; }
.heart-account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.heart-account-option { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px; align-items: center; padding: 9px; border: 1px solid #383835; border-radius: 10px; background: #222221; color: #aaa9a4; text-align: left; cursor: pointer; }
.heart-account-option:hover { border-color: #55554f; background: #272726; }
.heart-account-option.active { border-color: #70404e; background: #2a1e22; color: white; box-shadow: inset 0 0 0 1px rgba(242,80,116,.08); }
.heart-account-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #302129; color: var(--heart); font-size: 13px; }
.heart-account-option > span:last-child { min-width: 0; display: grid; gap: 2px; }
.heart-account-option strong { font-size: 12px; }
.heart-account-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #777771; font-size: 11px; }
.heart-account-option b { color: #d7d7d1; font-size: 11.5px; font-weight: 720; }
.heart-account-option:focus-visible { border-color: #8c4d60; box-shadow: 0 0 0 2px rgba(242,80,116,.12),inset 0 0 0 1px rgba(242,80,116,.08); outline: 0; }
.heart-company-picker { display: grid; grid-template-columns: minmax(0,1fr) minmax(190px,.7fr); gap: 10px; align-items: center; padding: 9px; border: 1px solid #3f3d43; border-radius: 10px; background: #1c1a20; }
.heart-company-picker[hidden] { display: none; }
.heart-company-picker-copy { min-width: 0; display: grid; gap: 2px; }
.heart-company-picker-copy strong { color: #e0e3e8; font-size: 12px; }
.heart-company-picker-copy small { color: #818892; font-size: 11px; line-height: 1.35; }
.heart-company-select { width: 100%; min-height: 32px; padding: 6px 28px 6px 9px; border: 1px solid #414957; border-radius: 8px; background: #16141a; color: #e1e4e9; font-size: 11.5px; outline: 0; }
.heart-company-select:focus { border-color: #835063; box-shadow: 0 0 0 2px rgba(242,80,116,.1); }
.heart-company-balance-manager { display: grid; gap: 10px; }
.heart-company-balance-summary { margin: 0; }
.heart-company-member-balances { display: grid; gap: 7px; }
.heart-company-member-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: center; padding: 9px; border: 1px solid #3d3b41; border-radius: 10px; background: #19171d; }
.heart-company-member-identity { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px; align-items: center; }
.heart-company-member-avatar { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(242,80,116,.28); border-radius: 999px; background: #2b1b23; color: #f1a5b7; font-size: 12px; font-weight: 780; }
.heart-company-member-identity > span:last-child { min-width: 0; display: grid; gap: 2px; }
.heart-company-member-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e3e6eb; font-size: 12px; }
.heart-company-member-identity small { color: #7f8791; font-size: 11px; }
.heart-company-member-amount { color: #f0c0cb; font-size: 12px; white-space: nowrap; }
.heart-company-member-controls { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(90px,.7fr) minmax(90px,1fr) minmax(90px,1fr); gap: 6px; }
.heart-company-member-controls button { min-height: 31px; }
.heart-company-member-input { min-width: 0; min-height: 31px; padding: 6px 8px; border: 1px solid #3d4551; border-radius: 8px; background: #131117; color: #e4e7eb; font-size: 11.5px; outline: 0; }
.heart-company-member-input:focus { border-color: #815064; box-shadow: 0 0 0 2px rgba(242,80,116,.09); }
.heart-currency-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; align-items: center; padding: 9px; border: 1px solid #3a3836; border-radius: 10px; background: #222120; box-shadow: inset 0 1px rgba(255,255,255,.015); }
.heart-currency-identity { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 8px; align-items: center; }
.heart-currency-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #2e2427; color: #e397aa; font-size: 13.5px; font-weight: 800; }
.heart-currency-copy { min-width: 0; display: grid; gap: 2px; }
.heart-currency-copy strong { color: #deded9; font-size: 12px; }
.heart-currency-copy small { color: #7c7c76; font-size: 11px; line-height: 1.35; }
.heart-currency-controls { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.heart-currency-select { min-width: 205px; min-height: 32px; padding: 6px 28px 6px 8px; border: 1px solid #41413d; border-radius: 8px; background: #1b1b1a; color: #d8d8d2; font-size: 11.5px; outline: 0; }
.heart-currency-select:focus { border-color: #774553; box-shadow: 0 0 0 2px rgba(242,80,116,.1); }
.heart-currency-status, .heart-currency-code { flex: 0 0 auto; padding: 4px 6px; border-radius: 999px; background: #2a282e; color: #a6d5b4; font-size: 11px; font-weight: 760; white-space: nowrap; }
.heart-currency-status.locked { background: #34222a; color: #efadbd; }
.heart-currency-code { background: #2a2a28; color: #aaa9a4; }
.heart-currency-note { grid-column: 1 / -1; padding-top: 6px; border-top: 1px solid #34322f; color: #6f6f69; font-size: 11px; }
html[dir="rtl"] .heart-currency-card { text-align: right; }
.heart-pack-heading { display: grid; gap: 2px; padding-top: 3px; }
.heart-pack-heading strong { font-size: 12px; color: #d8d8d2; }
.heart-pack-heading small { color: #7f7f79; font-size: 11.5px; }
.heart-pack-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.heart-pack-card { min-width: 0; display: grid; gap: 7px; padding: 8px; border: 1px solid #393936; border-radius: 10px; background: #232322; box-shadow: inset 0 1px rgba(255,255,255,.015); }
.heart-pack-card:hover { border-color: #5d454c; background: #262324; }
.heart-pack-copy { min-width: 0; display: grid; gap: 2px; }
.heart-pack-copy > strong { color: #e1e1dc; font-size: 12px; }
.heart-pack-copy > small { color: #85857f; font-size: 11px; }
.heart-pack-tax-note { color: #9b8a91 !important; }
.heart-pack-bonus { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; padding: 5px 6px; border: 1px solid rgba(242,80,116,.25); border-radius: 7px; background: rgba(242,80,116,.07); }
.heart-pack-bonus-badge { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.heart-pack-bonus-badge b { color: #ffd6df; font-size: 11.5px; }
.heart-pack-bonus-badge em { padding: 2px 4px; border-radius: 999px; background: #5a2432; color: #ffc4d1; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .04em; }
.heart-pack-bonus-copy { min-width: 0; display: grid; justify-items: end; gap: 1px; }
.heart-pack-bonus-copy strong { color: #f4c0cc; font-size: 11.5px; }
.heart-pack-bonus-copy small { color: #a9828c; font-size: 10.5px; }
.heart-pack-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px; }
.heart-pack-actions button { width: 100%; min-width: 0; height: 30px; min-height: 30px; box-sizing: border-box; display: grid; place-items: center; padding: 5px 7px; border-radius: 7px; font-size: 11px; font-weight: 730; line-height: 1; white-space: nowrap; cursor: pointer; }
.heart-pack-add { border: 1px solid #454541; background: #1e1e1d; color: #bebeb8; }
.heart-pack-add:hover, .heart-pack-add:focus-visible { border-color: #6c4a55; background: #282124; color: white; outline: 0; }
.heart-pack-buy { border: 1px solid #b23c59; background: var(--heart); color: white; }
.heart-pack-buy:hover, .heart-pack-buy:focus-visible { filter: brightness(1.06); outline: 0; }
.heart-cart-panel[hidden] { display: none; }
.heart-cart-panel { position: sticky; top: 0; min-width: 0; display: grid; gap: 10px; padding: 12px; border: 1px solid rgba(242,80,116,.27); border-radius: 12px; background: linear-gradient(180deg,#231d20,#1d1c1c); box-shadow: 0 18px 46px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025); }
.heart-cart-head { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; align-items: center; }
.heart-cart-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #342129; color: var(--heart); font-size: 14px; }
.heart-cart-head > div { min-width: 0; display: grid; gap: 2px; }
.heart-cart-head strong { color: #f1f1ed; font-size: 13.5px; }
.heart-cart-head small { color: #85857f; font-size: 11.5px; line-height: 1.35; }
.heart-cart-destination { display: flex; justify-content: space-between; gap: 10px; padding: 8px 9px; border: 1px solid #373532; border-radius: 9px; background: #222120; }
.heart-cart-destination span { color: #7d7d77; font-size: 11.5px; }
.heart-cart-destination strong { color: #d9d9d3; font-size: 11.5px; text-align: right; }
.heart-cart-list { display: grid; gap: 6px; max-height: 330px; overflow: auto; padding-right: 2px; }
.heart-cart-item { min-width: 0; display: grid; gap: 7px; padding: 8px; border: 1px solid #393735; border-radius: 9px; background: #222120; }
.heart-cart-item-copy { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.heart-cart-item-copy > small { color: #81817b; font-size: 11px; }
.heart-cart-title-group { min-width: 0; display: grid; gap: 4px; }
.heart-cart-title-group > strong { color: #e2e2dd; font-size: 12px; }
.heart-cart-bonus { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; color: #b98a96; font-size: 10.5px; }
.heart-cart-bonus b { color: #f2a6b8; font-size: 11px; }
.heart-cart-bonus em { padding: 2px 4px; border-radius: 999px; background: #562432; color: #ffc0cf; font-size: 10.5px; font-style: normal; font-weight: 800; }
.heart-cart-bonus small { color: #c398a2; font-size: 10.5px; }
.heart-cart-bonus span { color: #8b777d; font-size: 10.5px; }
.heart-cart-item-controls { display: grid; grid-template-columns: 26px 28px 26px minmax(0,1fr); gap: 4px; align-items: center; }
.heart-cart-stepper, .heart-cart-remove { min-height: 26px; border: 1px solid #41413d; border-radius: 7px; background: #1c1c1b; color: #bdbdb7; cursor: pointer; }
.heart-cart-stepper:hover, .heart-cart-remove:hover { border-color: #67444e; background: #282124; color: white; }
.heart-cart-quantity { display: grid; place-items: center; min-height: 26px; border: 1px solid #353532; border-radius: 7px; color: #deded8; font-size: 11.5px; }
.heart-cart-remove { padding: 4px 7px; color: #d19aa7; font-size: 11px; }
.heart-cart-totals { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding-top: 2px; }
.heart-cart-actions { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 6px; }
.heart-cart-actions button { min-height: 34px; }
.heart-economy-metrics { margin-top: 0; }
.heart-funding-note { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid #35312f; color: #7f7f79; font-size: 11.5px; line-height: 1.4; }
.heart-context-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 10px 0; }
html[dir="rtl"] .heart-account-option, html[dir="rtl"] .heart-funding-card, html[dir="rtl"] .heart-pack-card, html[dir="rtl"] .heart-cart-panel { text-align: right; }
html[dir="rtl"] .heart-cart-destination strong { text-align: left; }
body[data-preview-device="tablet"] .heart-shop-layout.has-cart { grid-template-columns: minmax(0,1.25fr) minmax(250px,.75fr); }
body[data-preview-device="tablet"] .heart-pack-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-preview-device="tablet"] .heart-pack-actions { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .heart-shop-layout.has-cart { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .heart-cart-panel { position: static; order: -1; }
body[data-preview-device="mobile"] .heart-account-grid,
body[data-preview-device="mobile"] .heart-context-strip,
body[data-preview-device="mobile"] .heart-currency-card,
body[data-preview-device="mobile"] .heart-company-picker { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .heart-company-member-row { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .heart-company-member-amount { justify-self: start; }
body[data-preview-device="mobile"] .heart-company-member-controls { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .heart-currency-controls { display: grid; grid-template-columns: minmax(0,1fr) auto auto; }
body[data-preview-device="mobile"] .heart-currency-select { width: 100%; min-width: 0; }
body[data-preview-device="mobile"] .heart-pack-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-preview-device="mobile"] .heart-pack-actions { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .heart-shop-modal, .heart-shop-modal.heart-shop-has-cart { width: min(620px, calc(100vw - 18px)); }
  .heart-shop-layout.has-cart { grid-template-columns: 1fr; }
  .heart-cart-panel { position: static; order: -1; }
  .heart-account-grid, .heart-context-strip, .heart-currency-card, .heart-company-picker { grid-template-columns: 1fr; }
  .heart-company-member-row { grid-template-columns: 1fr; }
  .heart-company-member-amount { justify-self: start; }
  .heart-company-member-controls { grid-template-columns: 1fr; }
  .heart-currency-controls { display: grid; grid-template-columns: minmax(0,1fr) auto auto; }
  .heart-currency-select { width: 100%; min-width: 0; }
  .heart-pack-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 430px) {
  .heart-shop-modal .dialog-card { padding: 12px; }
  .heart-currency-controls { grid-template-columns: 1fr auto; }
  .heart-currency-select { grid-column: 1 / -1; }
  .heart-pack-actions { grid-template-columns: 1fr; }
  .heart-cart-totals, .heart-cart-actions { grid-template-columns: 1fr; }
  .heart-dropdown-trigger { grid-template-columns: 3px 32px minmax(0,1fr) 28px; gap: 8px; }
  .heart-dropdown-icon { width: 32px; height: 32px; }
  .heart-dropdown-copy small { white-space: normal; }
}

/* Heart Vault: BaseHeart's two-pane wallet treatment, based on the approved Hearts reference. */
.heart-shop-modal, .heart-shop-modal.heart-shop-has-cart { width: min(1240px, calc(100vw - 32px)); }
.heart-shop-modal .dialog-card { position: relative; isolation: isolate; max-height: calc(100vh - 28px); padding: 0; overflow: auto; border: 1px solid #38363c; border-radius: 20px; background: radial-gradient(circle at 12% 8%,rgba(255,65,143,.14),transparent 26%),radial-gradient(circle at 88% 18%,rgba(93,111,255,.12),transparent 30%),radial-gradient(circle at 68% 92%,rgba(93,214,197,.07),transparent 30%),#131117; box-shadow: 0 32px 96px rgba(0,0,0,.48),0 0 58px rgba(242,80,116,.055),inset 0 1px rgba(255,255,255,.03); }
.heart-shop-modal .dialog-card::before, .heart-shop-modal .dialog-card::after { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.heart-shop-modal .dialog-card::before { content: '♥'; top: 9%; right: 7%; color: rgba(255,72,145,.065); font-family: Georgia,serif; font-size: clamp(130px,18vw,260px); line-height: 1; filter: drop-shadow(0 0 36px rgba(255,72,145,.16)); transform: rotate(12deg); animation: heart-vault-float 12s ease-in-out infinite alternate; }
.heart-shop-modal .dialog-card::after { content: ''; width: 360px; height: 360px; left: 36%; bottom: -210px; border-radius: 50%; background: radial-gradient(circle,rgba(111,92,255,.12),rgba(67,185,255,.04) 42%,transparent 72%); filter: blur(4px); animation: heart-vault-glow 9s ease-in-out infinite alternate; }
.heart-shop-modal .heart-vault-shell { position: relative; z-index: 1; }
.heart-shop-modal .heart-vault-dialog-head { position: absolute; z-index: 30; top: 18px; right: 18px; margin: 0; pointer-events: none; }
.heart-shop-modal .heart-vault-dialog-head > div { display: none; }
.heart-shop-modal .heart-vault-dialog-head .icon-button { width: 42px; height: 42px; pointer-events: auto; border: 1px solid #302e34; border-radius: 999px; background: #1c1a20; color: #d9dde3; font-size: 22px; }
.heart-shop-modal .heart-vault-dialog-head .icon-button:hover, .heart-shop-modal .heart-vault-dialog-head .icon-button:focus-visible { border-color: #65404c; background: #221820; color: white; outline: 0; }
.heart-shop-modal .heart-shop-layout { display: block; }
.heart-vault-shell { display: grid; grid-template-columns: 286px minmax(0,1fr); min-height: 690px; }
.heart-vault-sidebar { min-width: 0; display: grid; align-content: start; gap: 14px; padding: 30px 20px 26px; border-right: 1px solid #353339; background: linear-gradient(180deg,rgba(20,18,24,.98),rgba(18,16,22,.96)); }
.heart-vault-brand { display: grid; justify-items: center; gap: 10px; padding: 4px 8px 14px; text-align: center; }
.heart-vault-gem { position: relative; width: 90px; height: 82px; display: grid; place-items: center; color: #ff4d96; font-size: 74px; line-height: 1; filter: drop-shadow(0 0 8px rgba(255,62,143,.72)) drop-shadow(0 0 22px rgba(209,47,154,.28)); animation: heart-vault-beat 3.4s ease-in-out infinite; }
.heart-vault-gem::after { content: ''; position: absolute; inset: 18px -12px; border: 1px solid rgba(245,69,151,.42); border-radius: 50%; transform: rotate(-7deg); box-shadow: 0 0 18px rgba(242,80,116,.18); }
.heart-vault-brand-copy { display: grid; gap: 4px; }
.heart-vault-brand-copy strong { color: #f4f5f7; font-size: 16px; letter-spacing: .18em; }
.heart-vault-brand-copy small { color: #8f97a2; font-size: 12.5px; line-height: 1.4; }
.heart-vault-balance { display: grid; justify-items: center; gap: 5px; padding: 22px 14px; border: 1px solid #353339; border-radius: 13px; background: rgba(20,18,24,.72); text-align: center; }
.heart-vault-balance-label { color: #858d98; font-size: 11.5px; font-weight: 720; letter-spacing: .06em; text-transform: uppercase; }
.heart-vault-balance > strong { color: #f5f7fa; font-size: 31px; font-weight: 760; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.heart-vault-balance > strong::first-letter { color: var(--heart); }
.heart-vault-balance > small { color: #f07ba4; font-size: 12px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.heart-vault-sidebar .platform-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin: 0; }
.heart-vault-sidebar .platform-metric { min-height: 54px; padding: 9px 10px; border-color: #353339; border-radius: 10px; background: #18161c; }
.heart-vault-sidebar .platform-metric span { color: #727b87; font-size: 11px; }
.heart-vault-sidebar .platform-metric strong { color: #dfe3e8; font-size: 12px; }
.heart-vault-sidebar .hearts-profile-metrics > .platform-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
.heart-vault-usage-metrics { padding-top: 1px; }
.heart-vault-shortcut { display: grid; gap: 11px; padding: 13px; border: 1px solid #36343a; border-radius: 12px; background: linear-gradient(180deg,rgba(36,22,31,.74),rgba(22,20,26,.94)); }
.heart-vault-shortcut > div { display: grid; gap: 3px; }
.heart-vault-shortcut strong { color: #edf0f3; font-size: 13px; }
.heart-vault-shortcut small { color: #8c929b; font-size: 11.5px; line-height: 1.45; }
.heart-vault-cta { min-height: 40px; border: 1px solid #e44682; border-radius: 9px; background: linear-gradient(110deg,#f04491,#e43479); color: white; font-size: 12.5px; font-weight: 760; cursor: pointer; box-shadow: 0 8px 24px rgba(231,54,124,.16); }
.heart-vault-cta:hover, .heart-vault-cta:focus-visible { filter: brightness(1.06); outline: 2px solid rgba(242,80,116,.28); outline-offset: 2px; }
.heart-vault-sidebar .heart-context-strip { grid-template-columns: 1fr; gap: 7px; margin: 0; }
.heart-vault-content { min-width: 0; padding: 34px 30px 30px; }
.heart-vault-content-head { display: grid; gap: 7px; padding: 3px 58px 26px 4px; }
.heart-vault-content-head .eyebrow { color: #f178a3; font-size: 12px; letter-spacing: .08em; }
.heart-vault-content-head h2 { margin: 0; color: #f4f6f8; font-size: clamp(26px,3vw,34px); line-height: 1.08; letter-spacing: -.035em; }
.heart-vault-content-head p { margin: 0; color: #9299a3; font-size: 13px; line-height: 1.5; }
.heart-vault-main-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; align-items: start; }
.heart-vault-main-grid.has-cart { grid-template-columns: minmax(0,1.45fr) minmax(280px,.72fr); }
.heart-shop-modal .heart-shop-main { min-width: 0; display: grid; gap: 14px; }
.heart-shop-modal .heart-funding-card { margin: 0; }
.heart-shop-modal .heart-dropdown-stack { display: grid; gap: 12px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.heart-shop-modal .heart-dropdown-stack + .heart-dropdown-stack { margin-top: 0; }
.heart-shop-modal .heart-dropdown { overflow: hidden; border: 1px solid #36343a; border-radius: 12px; background: linear-gradient(180deg,#1b191f,#19171d); box-shadow: inset 0 1px rgba(255,255,255,.015); }
.heart-shop-modal .heart-dropdown:last-child { border-bottom: 1px solid #36343a; }
.heart-shop-modal .heart-dropdown.open { border-color: #39414c; background: #1a181e; box-shadow: inset 0 1px rgba(255,255,255,.02); }
.heart-shop-modal .heart-dropdown-trigger { min-height: 78px; grid-template-columns: 4px 48px minmax(0,1fr) 34px; gap: 14px; padding: 10px 16px 10px 0; background: transparent; }
.heart-shop-modal .heart-dropdown-trigger:hover { background: rgba(255,255,255,.018); }
.heart-shop-modal .heart-dropdown.open .heart-dropdown-trigger { background: rgba(25,23,29,.94); }
.heart-shop-modal .heart-dropdown-rail { width: 4px; border-radius: 0 4px 4px 0; }
.heart-shop-modal .heart-dropdown.open .heart-dropdown-rail { background: linear-gradient(180deg,#ff5ea0,#e83a80); box-shadow: 0 0 14px rgba(242,80,116,.32); }
.heart-shop-modal .heart-dropdown-icon { width: 46px; height: 46px; border-color: #6f2d4b; border-radius: 999px; background: #19171d; color: #f381aa; font-size: 20px; font-weight: 480; }
.heart-shop-modal .heart-dropdown-copy { gap: 4px; }
.heart-shop-modal .heart-dropdown-copy strong { color: #eef1f4; font-size: 14px; font-weight: 680; }
.heart-shop-modal .heart-dropdown-copy small { color: #8a929d; font-size: 12px; line-height: 1.45; white-space: normal; }
.heart-shop-modal .heart-dropdown-chevron { width: 34px; height: 34px; color: #d4d8de; font-size: 20px; transition: transform .18s ease,color .18s ease; }
.heart-shop-modal .heart-dropdown.open .heart-dropdown-chevron { transform: rotate(180deg); color: #f28ab0; }
.heart-shop-modal .heart-dropdown-panel { border-top: 1px solid #333137; background: #16141a; }
.heart-shop-modal .heart-disclosure-content { gap: 13px; padding: 18px 22px 20px; }
.heart-shop-modal .heart-account-grid { gap: 9px; }
.heart-shop-modal .heart-account-option { min-height: 52px; grid-template-columns: 32px minmax(0,1fr); padding: 9px 11px; border-color: #39373d; border-radius: 9px; background: #18161c; }
.heart-shop-modal .heart-account-option:hover { border-color: #55404b; background: #1c1a20; }
.heart-shop-modal .heart-account-option.active { border-color: #a63f6a; background: linear-gradient(180deg,#241721,#1a151c); box-shadow: inset 0 0 0 1px rgba(242,80,116,.08); }
.heart-shop-modal .heart-account-icon { width: 32px; height: 32px; border: 1px solid #513044; border-radius: 999px; background: #21151d; color: #f381aa; }
.heart-shop-modal .heart-account-option strong { color: #e9edf1; font-size: 12.5px; }
.heart-shop-modal .heart-account-option small { color: #737c87; font-size: 11px; }
.heart-shop-modal .heart-account-option b { color: #f1f3f5; font-size: 11.5px; }
.heart-shop-modal .heart-currency-card { gap: 10px 14px; padding: 12px; border-color: #39373d; border-radius: 10px; background: #18161c; }
.heart-shop-modal .heart-currency-icon { border-radius: 999px; background: #21151d; color: #f381aa; }
.heart-shop-modal .heart-currency-copy strong { color: #e9edf1; font-size: 12.5px; }
.heart-shop-modal .heart-currency-copy small { color: #737c87; font-size: 11.5px; }
.heart-shop-modal .heart-currency-select { min-width: 220px; min-height: 38px; border-color: #3e3c42; border-radius: 9px; background: #131117; color: #e7eaee; font-size: 12px; }
.heart-shop-modal .heart-currency-note { border-top-color: #323036; color: #69727d; font-size: 11px; }
.heart-shop-modal .heart-funding-note { gap: 4px; padding: 10px 2px 0; border-top-color: #323036; color: #747d88; font-size: 11.5px; }
.heart-shop-modal .heart-pack-grid { gap: 9px; }
.heart-shop-modal .heart-pack-card { position: relative; overflow: hidden; padding: 10px; border-color: #39373d; border-radius: 10px; background: linear-gradient(150deg,#1a181e,#17151b); transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease; }
.heart-shop-modal .heart-pack-card:nth-child(4n+1) { background: radial-gradient(circle at 100% 0,rgba(255,74,141,.1),transparent 40%),linear-gradient(150deg,#1a181e,#17151b); }
.heart-shop-modal .heart-pack-card:nth-child(4n+2) { background: radial-gradient(circle at 100% 0,rgba(93,121,255,.1),transparent 40%),linear-gradient(150deg,#1b191f,#17151b); }
.heart-shop-modal .heart-pack-card:nth-child(4n+3) { background: radial-gradient(circle at 100% 0,rgba(133,85,255,.11),transparent 40%),linear-gradient(150deg,#1c1a20,#17151b); }
.heart-shop-modal .heart-pack-card:nth-child(4n) { background: radial-gradient(circle at 100% 0,rgba(73,207,180,.09),transparent 40%),linear-gradient(150deg,#1a181e,#17151b); }
.heart-shop-modal .heart-pack-card:hover { transform: translateY(-3px); border-color: rgba(242,80,116,.44); background-color: #1c1a20; box-shadow: 0 14px 30px rgba(0,0,0,.24),0 0 26px rgba(242,80,116,.06); }
.heart-shop-modal .heart-pack-copy > strong { font-size: 12.5px; }
.heart-shop-modal .heart-pack-copy > small { font-size: 11.5px; }
.heart-shop-modal .heart-pack-actions button { height: 34px; min-height: 34px; font-size: 11.5px; }
.heart-shop-modal .heart-cart-panel { top: 18px; border-color: rgba(242,80,116,.28); border-radius: 12px; background: linear-gradient(180deg,#1a151b,#18161c); }
.heart-shop-modal .heart-economy-metrics { padding: 18px 22px 20px; }
.heart-shop-modal .heart-dropdown-panel > .dialog-list { padding: 18px 22px 20px; }
.heart-shop-modal .personal-information-panel { display: grid; gap: 12px; padding: 18px 22px 20px; }
.heart-shop-modal .personal-information-identity { min-height: 68px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 11px 12px; border: 1px solid #39373d; border-radius: 11px; background: linear-gradient(180deg,#1b191f,#17151b); }
.heart-shop-modal .personal-information-avatar { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #6b3550; border-radius: 999px; background: #261722; color: #f18ab0; font-size: 14px; font-weight: 760; }
.heart-shop-modal .personal-information-identity-copy, .heart-shop-modal .personal-information-row-copy { min-width: 0; display: grid; gap: 3px; }
.heart-shop-modal .personal-information-identity-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #edf1f5; font-size: 13px; }
.heart-shop-modal .personal-information-identity-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #818b96; font-size: 11.5px; }
.heart-shop-modal .personal-information-section { display: grid; gap: 11px; padding: 13px; border: 1px solid #36343a; border-radius: 11px; background: #18161c; }
.heart-shop-modal .personal-information-section-title { color: #eef1f4; font-size: 12.5px; font-weight: 760; letter-spacing: .015em; }
.heart-shop-modal .personal-information-note { margin: 0; color: #7d8792; font-size: 11.5px; line-height: 1.5; }
.heart-shop-modal .personal-information-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.heart-shop-modal .personal-information-preferences { grid-template-columns: repeat(3,minmax(0,1fr)); }
.heart-shop-modal .personal-information-field { min-width: 0; display: grid; gap: 6px; color: #9aa3ad; font-size: 11.5px; font-weight: 680; }
.heart-shop-modal .personal-information-field-note { color: #69737e; font-size: 11px; font-weight: 500; line-height: 1.4; }
.heart-shop-modal .personal-information-input { width: 100%; min-width: 0; min-height: 38px; padding: 8px 10px; border: 1px solid #353d48; border-radius: 9px; outline: 0; background: #121016; color: #e8ebef; font-size: 12px; }
.heart-shop-modal .personal-information-input:focus { border-color: #8c405f; box-shadow: 0 0 0 2px rgba(242,80,116,.08); }
.heart-shop-modal .personal-information-input[readonly] { color: #969fa9; background: #151319; cursor: default; }
.heart-shop-modal .personal-information-list { display: grid; overflow: hidden; border: 1px solid #37353b; border-radius: 9px; background: #151319; }
.heart-shop-modal .personal-information-row { min-height: 54px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-bottom: 1px solid #323036; }
.heart-shop-modal .personal-information-row:last-child { border-bottom: 0; }
.heart-shop-modal .personal-information-row-copy b { color: #dce1e6; font-size: 12px; font-weight: 700; }
.heart-shop-modal .personal-information-row-copy small { color: #77818c; font-size: 11px; line-height: 1.4; }
.heart-shop-modal .personal-information-row > strong { color: #cbd1d7; font-size: 11.5px; font-weight: 680; }
.heart-shop-modal .personal-information-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.heart-shop-modal .personal-information-actions-split { justify-content: space-between; }
.heart-shop-modal .personal-information-section .primary-button, .heart-shop-modal .personal-information-section .secondary-button { min-height: 34px; padding: 7px 10px; font-size: 11.5px; }
@media (max-width: 720px) {
  .heart-shop-modal .personal-information-form-grid, .heart-shop-modal .personal-information-preferences { grid-template-columns: 1fr; }
  .heart-shop-modal .personal-information-row { grid-template-columns: 1fr; align-items: stretch; }
  .heart-shop-modal .personal-information-row > .secondary-button, .heart-shop-modal .personal-information-row > .primary-button { width: 100%; }
  .heart-shop-modal .personal-information-actions-split { display: grid; grid-template-columns: 1fr; }
  .heart-shop-modal .personal-information-actions-split button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .heart-shop-modal .heart-dropdown-chevron, .heart-shop-modal .heart-dropdown-trigger { transition: none; }
}
@media (max-width: 1050px) {
  .heart-shop-modal, .heart-shop-modal.heart-shop-has-cart { width: min(960px, calc(100vw - 24px)); }
  .heart-vault-shell { grid-template-columns: 236px minmax(0,1fr); }
  .heart-vault-sidebar { padding: 24px 16px; }
  .heart-vault-content { padding: 28px 22px 24px; }
  .heart-vault-main-grid.has-cart { grid-template-columns: 1fr; }
  .heart-shop-modal .heart-cart-panel { position: static; }
  .heart-shop-modal .heart-pack-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .heart-vault-shell { grid-template-columns: 1fr; }
  .heart-vault-sidebar { grid-template-columns: 150px minmax(0,1fr); align-items: start; border-right: 0; border-bottom: 1px solid #353339; }
  .heart-vault-brand { grid-row: 1 / span 2; }
  .heart-vault-gem { width: 70px; height: 62px; font-size: 58px; }
  .heart-vault-sidebar .platform-metrics, .heart-vault-sidebar .heart-context-strip, .heart-vault-shortcut { grid-column: 1 / -1; }
  .heart-vault-content { padding-top: 24px; }
}
@media (max-width: 560px) {
  .heart-shop-modal, .heart-shop-modal.heart-shop-has-cart { width: min(100vw - 14px, 460px); }
  .heart-shop-modal .dialog-card { border-radius: 15px; }
  .heart-shop-modal .heart-vault-dialog-head { top: 12px; right: 12px; }
  .heart-shop-modal .heart-vault-dialog-head .icon-button { width: 38px; height: 38px; }
  .heart-vault-sidebar { grid-template-columns: 1fr; gap: 11px; padding: 20px 14px 16px; }
  .heart-vault-brand { grid-row: auto; }
  .heart-vault-gem { width: 62px; height: 56px; font-size: 52px; }
  .heart-vault-brand-copy strong { font-size: 14px; }
  .heart-vault-balance > strong { font-size: 28px; }
  .heart-vault-content { padding: 20px 12px 16px; }
  .heart-vault-content-head { padding: 2px 48px 18px 3px; }
  .heart-vault-content-head h2 { font-size: 25px; }
  .heart-shop-modal .heart-dropdown-trigger { min-height: 68px; grid-template-columns: 4px 40px minmax(0,1fr) 28px; gap: 10px; padding-right: 10px; }
  .heart-shop-modal .heart-dropdown-icon { width: 40px; height: 40px; font-size: 17px; }
  .heart-shop-modal .heart-dropdown-copy strong { font-size: 13px; }
  .heart-shop-modal .heart-dropdown-copy small { font-size: 11.5px; }
  .heart-shop-modal .heart-disclosure-content, .heart-shop-modal .heart-economy-metrics, .heart-shop-modal .heart-dropdown-panel > .dialog-list { padding: 14px 12px 16px; }
  .heart-shop-modal .heart-account-grid, .heart-shop-modal .heart-currency-card { grid-template-columns: 1fr; }
  .heart-shop-modal .heart-currency-controls { display: grid; grid-template-columns: minmax(0,1fr) auto auto; }
  .heart-shop-modal .heart-currency-select { width: 100%; min-width: 0; }
  .heart-shop-modal .heart-pack-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
body[data-preview-device="tablet"] .heart-vault-shell { grid-template-columns: 1fr; }
body[data-preview-device="tablet"] .heart-vault-sidebar { grid-template-columns: 156px minmax(0,1fr); align-items: start; border-right: 0; border-bottom: 1px solid #353339; }
body[data-preview-device="tablet"] .heart-vault-brand { grid-row: 1 / span 2; }
body[data-preview-device="tablet"] .heart-vault-sidebar > .platform-metrics,
body[data-preview-device="tablet"] .heart-vault-sidebar > .heart-context-strip { display: none; }
body[data-preview-device="tablet"] .heart-vault-shortcut { grid-column: 1 / -1; }
body[data-preview-device="tablet"] .heart-vault-content { padding: 24px 20px; }
body[data-preview-device="tablet"] .heart-vault-main-grid.has-cart { grid-template-columns: 1fr; }
body[data-preview-device="tablet"] .heart-shop-modal .heart-currency-card { grid-template-columns: minmax(0,1fr) auto; }
body[data-preview-device="tablet"] .heart-shop-modal .heart-currency-controls { min-width: 0; }
body[data-preview-device="tablet"] .heart-shop-modal .heart-currency-select { min-width: 190px; }
body[data-preview-device="mobile"] .heart-vault-shell { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .heart-vault-sidebar { grid-template-columns: 1fr; gap: 10px; padding: 16px 14px 14px; border-right: 0; border-bottom: 1px solid #353339; }
body[data-preview-device="mobile"] .heart-vault-brand { grid-row: auto; grid-template-columns: 50px minmax(0,1fr); justify-items: start; align-items: center; padding: 0 48px 4px 0; text-align: left; }
body[data-preview-device="mobile"] .heart-vault-gem { width: 50px; height: 46px; font-size: 42px; }
body[data-preview-device="mobile"] .heart-vault-brand-copy strong { font-size: 13.5px; }
body[data-preview-device="mobile"] .heart-vault-balance { min-height: 88px; padding: 14px 12px; }
body[data-preview-device="mobile"] .heart-vault-balance > strong { font-size: 26px; }
body[data-preview-device="mobile"] .heart-vault-sidebar > .platform-metrics,
body[data-preview-device="mobile"] .heart-vault-sidebar > .heart-context-strip,
body[data-preview-device="mobile"] .heart-vault-shortcut { display: none; }
body[data-preview-device="mobile"] .heart-vault-content { padding: 16px 12px; }
body[data-preview-device="mobile"] .heart-vault-content-head { padding: 0 46px 14px 2px; }
body[data-preview-device="mobile"] .heart-vault-content-head h2 { font-size: 23px; }
body[data-preview-device="mobile"] .heart-vault-main-grid.has-cart { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .heart-shop-modal .heart-cart-panel { position: static; }
body[data-preview-device="mobile"] .heart-shop-modal .heart-dropdown-trigger { min-height: 64px; }
body[data-preview-device="mobile"] .heart-shop-modal .heart-pack-grid { grid-template-columns: 1fr; }

/* Work/private profiles and Business employee governance use the same BaseHeart surface language. */
.profile-switch-shell { display: grid; gap: 12px; }
.profile-company-switcher { display: grid; gap: 10px; }
.profile-company-switcher .dialog-list { display: grid; gap: 7px; }
.profile-create-company { width: 100%; min-height: 38px; justify-content: center; border-style: dashed; border-color: rgba(240,68,145,.28); background: linear-gradient(180deg,rgba(34,24,31,.68),rgba(23,21,27,.92)); }
.profile-create-company:hover,.profile-create-company:focus-visible { border-color: rgba(240,68,145,.55); background: linear-gradient(180deg,rgba(48,27,39,.88),rgba(27,25,31,.96)); }
.company-create-form,.ownership-transfer-confirmation { display: grid; gap: 12px; }
.company-create-form .control-field { margin: 0; }
.company-create-form input { width: 100%; min-height: 40px; border: 1px solid #3b393f; border-radius: 10px; background: #17151b; color: #e5e9ed; padding: 9px 11px; outline: 0; }
.company-create-form input:focus { border-color: rgba(240,68,145,.58); box-shadow: 0 0 0 2px rgba(240,68,145,.08); }
.profile-privacy-note { display: grid; gap: 3px; padding: 10px 11px; border: 1px solid var(--border-soft); border-radius: 10px; background: #20201f; }
.profile-privacy-note strong { color: #d7d7d1; font-size: 12px; }
.profile-privacy-note span { color: #797973; font-size: 11.5px; line-height: 1.45; }
body[data-profile="work"] #workspaceSwitcher .workspace-mark { border-color: #4e3a52; background: #2a282e; color: #d0b5df; }
body[data-profile="work"] #profileBtn small { color: #a891b4; }
body[data-profile="personal"] #profileBtn small { color: #777771; }

.employee-email-input, .employee-transfer-input { min-width: 0; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border-soft); border-radius: 9px; outline: 0; background: #1d1d1c; color: #d8d8d2; font-size: 12px; }
.employee-email-input { flex: 1 1 260px; }
.employee-transfer-input { width: 110px; }
.employee-email-input:focus, .employee-transfer-input:focus { border-color: #6e3d4b; box-shadow: 0 0 0 2px rgba(242,80,116,.08); }
.employee-list { display: grid; gap: 7px; }
.employee-row { min-width: 0; display: grid; grid-template-columns: minmax(180px,1.1fr) minmax(180px,.8fr) auto; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: #20201f; }
.employee-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.employee-avatar { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #4a3a3f; border-radius: 9px; background: #2d2226; color: #e3a4b3; font-size: 12.5px; font-weight: 760; }
.employee-identity > span:last-child { min-width: 0; display: grid; gap: 2px; }
.employee-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dcdcd6; font-size: 12px; }
.employee-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #72726d; font-size: 11.5px; }
.employee-row-metrics { display: flex; flex-wrap: wrap; gap: 5px; }
.employee-row-metrics > span { padding: 4px 6px; border-radius: 999px; background: #292927; color: #92928c; font-size: 11px; white-space: nowrap; }
.employee-row .control-inline-actions { justify-content: flex-end; margin: 0; }
.employee-row .primary-button, .employee-row .secondary-button { min-height: 30px; padding: 5px 8px; font-size: 11.5px; }

.employee-settings { display: grid; gap: 12px; }
.employee-settings-head { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: #20201f; }
.employee-settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.employee-settings-grid .control-field { margin: 0; }
.employee-settings-grid select { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: #1d1d1c; color: #c8c8c2; font-size: 12px; }
.employee-heart-allocation { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 10px; border: 1px solid #3b3436; border-radius: 10px; background: #211d1f; }
.employee-heart-allocation > .control-inline-actions { grid-column: 1 / -1; margin-top: 2px; }
.employee-permission-groups { display: grid; gap: 10px; }
.employee-permission-group { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--border-soft); border-radius: 10px; background: #20201f; }
.employee-permission-group-title { color: #a7a79f; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.employee-permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.employee-permission-grid .permission-option { min-height: 42px; }
.employee-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; padding-top: 3px; }

.work-audit-list { display: grid; gap: 6px; max-height: 430px; overflow: auto; padding-right: 2px; scrollbar-width: thin; }
.work-audit-row { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; align-items: center; padding: 8px 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: #20201f; }
.work-audit-copy { min-width: 0; display: grid; gap: 2px; }
.work-audit-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cfcfc9; font-size: 12px; }
.work-audit-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #73736d; font-size: 11px; }
.work-audit-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.work-audit-row > button { min-height: 29px; padding: 5px 8px; font-size: 11.5px; }
.work-audit-details { display: grid; gap: 10px; }
.work-audit-diff { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.work-audit-diff article { min-width: 0; display: grid; gap: 5px; padding: 9px; border: 1px solid var(--border-soft); border-radius: 9px; background: #191918; }
.work-audit-diff span { color: #85857f; font-size: 11.5px; font-weight: 700; }
.work-audit-diff pre { max-height: 180px; overflow: auto; margin: 0; color: #b9b9b3; font: 8px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; white-space: pre-wrap; word-break: break-word; }

html[dir="rtl"] .employee-row, html[dir="rtl"] .employee-settings, html[dir="rtl"] .employee-permission-group, html[dir="rtl"] .work-audit-row, html[dir="rtl"] .profile-privacy-note { text-align: right; }
html[dir="rtl"] .employee-dialog-actions { justify-content: flex-start; }

body[data-preview-device="tablet"] .employee-row { grid-template-columns: minmax(0,1fr) auto; }
body[data-preview-device="tablet"] .employee-row-metrics { grid-column: 1 / -1; }
body[data-preview-device="mobile"] .employee-row, body[data-preview-device="mobile"] .work-audit-row { grid-template-columns: 1fr; align-items: stretch; }
body[data-preview-device="mobile"] .employee-row .control-inline-actions { display: grid; grid-template-columns: 1fr 1fr; }
body[data-preview-device="mobile"] .employee-row .control-inline-actions button { width: 100%; }
body[data-preview-device="mobile"] .employee-settings-grid, body[data-preview-device="mobile"] .employee-permission-grid, body[data-preview-device="mobile"] .employee-heart-allocation, body[data-preview-device="mobile"] .work-audit-diff { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .employee-heart-allocation > .control-inline-actions { grid-column: 1; }
body[data-preview-device="mobile"] .employee-dialog-actions { display: grid; grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .employee-dialog-actions button { width: 100%; }
@media (max-width: 700px) {
  .employee-row, .work-audit-row { grid-template-columns: 1fr; align-items: stretch; }
  .employee-row .control-inline-actions { justify-content: stretch; }
  .employee-settings-grid, .employee-permission-grid, .employee-heart-allocation, .work-audit-diff { grid-template-columns: 1fr; }
  .employee-heart-allocation > .control-inline-actions { grid-column: 1; }
  .connector-row { grid-template-columns: 34px minmax(0,1fr); }
  .connector-row > .status-pill { grid-column: 2; justify-self: start; }
  .connector-meta-row { grid-template-columns: 1fr; gap: 4px; }
  .connector-account-card { grid-template-columns: 38px minmax(0,1fr); }
  .connector-account-card > .status-pill { grid-column: 2; justify-self: start; }
  .connector-modal .control-inline-actions { display: grid; grid-template-columns: 1fr; }
  .connector-modal .control-inline-actions button { width: 100%; }
}
body[data-preview-device="mobile"] .connector-row { grid-template-columns: 34px minmax(0,1fr); }
body[data-preview-device="mobile"] .connector-row > .status-pill { grid-column: 2; justify-self: start; }
body[data-preview-device="mobile"] .connector-meta-row { grid-template-columns: 1fr; gap: 4px; }
body[data-preview-device="mobile"] .connector-account-card { grid-template-columns: 38px minmax(0,1fr); }
body[data-preview-device="mobile"] .connector-account-card > .status-pill { grid-column: 2; justify-self: start; }
body[data-preview-device="mobile"] .connector-modal .control-inline-actions { display: grid; grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .connector-modal .control-inline-actions button { width: 100%; }
html[dir="rtl"] .connector-row, html[dir="rtl"] .connector-detail, html[dir="rtl"] .connector-error, html[dir="rtl"] .connector-advanced-summary, html[dir="rtl"] .connector-advanced-body { text-align: right; }
html[dir="rtl"] .connector-row > .status-pill, html[dir="rtl"] .connector-account-card > .status-pill { justify-self: start; }

/* Unified BaseHeart hub system: Hearts visual language across operational menus. */
.baseheart-hub-modal { width: min(1220px, calc(100vw - 30px)); }
.baseheart-hub-modal .dialog-card { position: relative; max-height: calc(100vh - 28px); padding: 0; overflow: auto; border: 1px solid #38363c; border-radius: 20px; background: radial-gradient(circle at 13% 8%, rgba(242,80,116,.07), transparent 24%), #141218; box-shadow: 0 32px 96px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.025); }
.baseheart-hub-modal .baseheart-hub-dialog-head { position: absolute; z-index: 40; top: 18px; right: 18px; margin: 0; pointer-events: none; }
.baseheart-hub-modal .baseheart-hub-dialog-head > div { display: none; }
.baseheart-hub-modal .baseheart-hub-dialog-head .icon-button { width: 42px; height: 42px; pointer-events: auto; border: 1px solid #343238; border-radius: 999px; background: #1c1a20; color: #d9dde3; font-size: 21px; }
.baseheart-hub-modal .baseheart-hub-dialog-head .icon-button:hover, .baseheart-hub-modal .baseheart-hub-dialog-head .icon-button:focus-visible { border-color: #754357; background: #221820; color: #fff; outline: 2px solid rgba(242,80,116,.18); outline-offset: 2px; }
.baseheart-hub-shell { display: grid; grid-template-columns: 282px minmax(0,1fr); min-height: 660px; }
.baseheart-hub-sidebar { min-width: 0; display: grid; align-content: start; gap: 14px; padding: 30px 20px 26px; border-right: 1px solid #353339; background: linear-gradient(180deg,rgba(20,18,24,.985),rgba(18,16,22,.965)); }
.baseheart-hub-brand { display: grid; justify-items: center; gap: 10px; padding: 4px 8px 14px; text-align: center; }
.baseheart-hub-gem { position: relative; width: 76px; height: 68px; display: grid; place-items: center; color: #ff4d96; font-size: 40px; line-height: 1; filter: drop-shadow(0 0 9px rgba(255,62,143,.5)); }
.baseheart-hub-gem::after { content: ''; position: absolute; inset: 15px -10px; border: 1px solid rgba(245,69,151,.42); border-radius: 50%; transform: rotate(-8deg); box-shadow: 0 0 18px rgba(242,80,116,.16); }
.baseheart-logo-mark { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 100%; height: 100%; flex: 0 0 auto; }
.baseheart-logo-mark svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px rgba(255,49,167,.46)) drop-shadow(0 0 10px rgba(121,58,255,.20)); }
.baseheart-hub-logo { width: 78px; height: 72px; }
.baseheart-hub-logo::after { inset: 11px -8px; border-color: rgba(245,69,151,.34); }
.baseheart-logo-hub { width: 58px; height: 58px; }
.row-icon-baseheart { padding: 5px; border-color: rgba(242,80,116,.30); background: rgba(24,22,28,.92); }
.baseheart-logo-row { width: 24px; height: 24px; }
.avatar.baseheart-avatar-logo { padding: 5px; background: #16141a; border-color: rgba(242,80,116,.32); }
.baseheart-logo-avatar { width: 25px; height: 25px; }
.heart-account-mark.baseheart-account-logo { padding: 3px; background: rgba(22,20,26,.92); color: transparent; }
.baseheart-logo-account { width: 18px; height: 18px; }
.baseheart-hub-brand-copy { min-width: 0; display: grid; gap: 4px; }
.baseheart-hub-brand-copy strong { overflow-wrap: anywhere; color: #f4f5f7; font-size: 14px; font-weight: 760; letter-spacing: .11em; text-transform: uppercase; }
.baseheart-hub-brand-copy small { color: #8d95a0; font-size: 12px; line-height: 1.45; }
.baseheart-hub-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.baseheart-hub-metric { min-width: 0; display: grid; gap: 4px; padding: 10px; border: 1px solid #353339; border-radius: 10px; background: #18161c; }
.baseheart-hub-metric:last-child:nth-child(odd) { grid-column: 1 / -1; }
.baseheart-hub-metric span { color: #707a86; font-size: 11px; }
.baseheart-hub-metric strong { overflow: hidden; text-overflow: ellipsis; color: #e1e5ea; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.baseheart-hub-metric strong.success { color: var(--success); }
.baseheart-hub-metric strong.warning { color: var(--warning); }
.baseheart-hub-content { min-width: 0; display: grid; align-content: start; grid-template-rows: auto minmax(0,1fr) auto; padding: 34px 30px 30px; }
.baseheart-hub-content-head { display: grid; gap: 7px; padding: 3px 58px 24px 4px; }
.baseheart-hub-content-head .eyebrow { color: #f178a3; font-size: 12px; letter-spacing: .09em; }
.baseheart-hub-content-head h2 { margin: 0; color: #f4f6f8; font-size: clamp(27px,3vw,35px); line-height: 1.08; letter-spacing: -.035em; }
.baseheart-hub-content-head p { max-width: 760px; margin: 0; color: #9299a3; font-size: 12.5px; line-height: 1.55; }
.baseheart-hub-body { min-width: 0; display: grid; align-content: start; gap: 12px; }
.baseheart-hub-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 18px; margin-top: 18px; border-top: 1px solid #323036; }
.baseheart-hub-actions .primary-button, .baseheart-hub-modal .primary-button { border-color: #e44682; background: linear-gradient(110deg,#f04491,#e43479); color: white; box-shadow: 0 8px 24px rgba(231,54,124,.12); }
.baseheart-hub-actions .secondary-button, .baseheart-hub-modal .secondary-button { border-color: #3d3b41; background: #18161c; color: #c7cdd4; }
.baseheart-hub-modal .primary-button:hover, .baseheart-hub-modal .secondary-button:hover { filter: brightness(1.06); }
.baseheart-hub-modal .primary-button:focus-visible, .baseheart-hub-modal .secondary-button:focus-visible { outline: 2px solid rgba(242,80,116,.34); outline-offset: 2px; }

/* Unified Control + Platform navigation. */
.unified-center-modal .baseheart-hub-sidebar { padding-bottom: 18px; }
.unified-center-modal .baseheart-hub-brand { padding-bottom: 4px; }
.unified-control-tabs { max-height: 480px; overflow-y: auto; display: grid; align-content: start; gap: 5px; padding: 6px 2px 8px; border: 0; scrollbar-width: thin; }
.control-tab-group { padding: 10px 7px 4px; color: #68727e; font-size: 11px; font-weight: 800; letter-spacing: .11em; }
.unified-center-modal .control-tab { min-height: 46px; grid-template-columns: 32px minmax(0,1fr); gap: 9px; padding: 7px 9px; border: 1px solid transparent; border-radius: 10px; color: #9098a2; }
.unified-center-modal .control-tab > span { width: 32px; height: 32px; border: 1px solid #39373d; border-radius: 999px; background: #18161c; color: #9da5af; }
.unified-center-modal .control-tab:hover { border-color: #39373d; background: #1c1a20; }
.unified-center-modal .control-tab.active { border-color: rgba(242,80,116,.42); background: linear-gradient(180deg,#221720,#19171d); color: #f5f6f8; box-shadow: inset 3px 0 #ef3f88; }
.unified-center-modal .control-tab.active > span { border-color: #7a3153; background: #21151d; color: #f381aa; }
.unified-center-modal .control-panel { gap: 12px; }
.unified-center-modal .control-card, .baseheart-hub-modal .control-card { border-color: #36343a; border-radius: 12px; background: linear-gradient(180deg,#1b191f,#18161c); }
.unified-center-modal .control-card-head strong, .baseheart-hub-modal .control-card-head strong { color: #edf0f3; }
.unified-center-modal .control-card-icon, .baseheart-hub-modal .control-card-icon { border: 1px solid #6f2d4b; border-radius: 999px; background: #19171d; color: #f381aa; }
.unified-center-modal .control-card > p, .baseheart-hub-modal .control-card > p { color: #858e99; }
.unified-center-modal .control-status-row, .baseheart-hub-modal .control-status-row { border-color: #36343a; background: #18161c; }
.unified-center-modal .control-field input, .unified-center-modal .control-field select, .baseheart-hub-modal .control-field input, .baseheart-hub-modal .control-field select { border-color: #3d3b41; background: #131117; color: #e6e9ed; }
.unified-center-modal .platform-metric, .baseheart-hub-modal .platform-metric { border-color: #36343a; background: #18161c; }
.unified-center-modal .platform-record, .unified-center-modal .platform-library-item, .unified-center-modal .employee-row, .unified-center-modal .work-audit-row { border-color: #36343a; background: #18161c; }

/* Resource, connector, profile and workspace rows share the Hearts row treatment. */
.baseheart-hub-modal .dialog-list, .baseheart-hub-list { display: grid; gap: 12px; }
.baseheart-hub-modal .dialog-list button, .baseheart-hub-modal .connector-row { min-height: 76px; padding: 12px 16px; border: 1px solid #36343a; border-radius: 12px; background: linear-gradient(180deg,#1b191f,#19171d); color: #e7eaee; }
.baseheart-hub-modal .dialog-list button:hover, .baseheart-hub-modal .dialog-list button:focus-visible, .baseheart-hub-modal .connector-row:hover, .baseheart-hub-modal .connector-row:focus-visible { border-color: rgba(242,80,116,.42); background: #1c1a20; outline: 0; box-shadow: inset 3px 0 #ef3f88; }
.baseheart-hub-modal .dialog-list .row-icon, .baseheart-hub-modal .connector-row .row-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #6f2d4b; border-radius: 999px; background: #19171d; color: #f381aa; }
.baseheart-hub-modal .dialog-list .row-copy strong, .baseheart-hub-modal .connector-row .row-copy strong { color: #eef1f4; font-size: 13px; }
.baseheart-hub-modal .dialog-list .row-copy small, .baseheart-hub-modal .connector-row .row-copy small { color: #818a95; font-size: 11.5px; }
.baseheart-hub-modal .profile-privacy-note { border-color: #36343a; border-radius: 12px; background: #18161c; }
.baseheart-hub-modal .connector-loading { min-height: 150px; border-color: #36343a; background: #18161c; }
.baseheart-hub-modal .connector-meta, .baseheart-hub-modal .connector-account-card, .baseheart-hub-modal .connector-setup-block { border-color: #39373d; background: #18161c; }

/* Plans and Business keep the same layout language without changing plan actions. */
.baseheart-plan-modal { width: min(1280px, calc(100vw - 30px)); }
.baseheart-plan-modal .baseheart-hub-shell { grid-template-columns: 240px minmax(0,1fr); }
.baseheart-plan-modal .subscription-shell { gap: 14px; }
.baseheart-plan-modal .subscription-grid { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.baseheart-plan-modal .subscription-plan-card {
  --plan-art: none;
  --plan-art-opacity: .48;
  --plan-art-glow: rgba(240,68,145,.26);
  --plan-art-duration: 7.4s;
  --plan-art-delay: 0s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: #36343a;
  background: linear-gradient(180deg,#1b191f,#18161c);
}
.baseheart-plan-modal .subscription-plan-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 48%;
  pointer-events: none;
  background-image: var(--plan-art);
  background-repeat: no-repeat;
  background-position: 112% 10px;
  background-size: 84% auto;
  opacity: var(--plan-art-opacity);
  filter: saturate(1.08) contrast(1.04);
  transform: translate3d(0, 1px, 0) scale(1.02);
  transform-origin: 78% 18%;
  animation: baseheart-plan-art-breathe var(--plan-art-duration) ease-in-out var(--plan-art-delay) infinite;
  transition: opacity .18s ease;
  will-change: transform, filter;
}
.baseheart-plan-modal .subscription-plan-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18,16,22,.94) 0%, rgba(18,16,22,.82) 29%, rgba(18,16,22,.38) 64%, rgba(18,16,22,.18) 100%),
    linear-gradient(180deg, rgba(18,16,22,.10) 0%, rgba(18,16,22,.34) 25%, rgba(24,22,28,.90) 48%, #18161c 66%, #18161c 100%);
}
.baseheart-plan-modal .subscription-plan-card > * { position: relative; z-index: 2; }
.baseheart-plan-modal .subscription-plan-card:hover::before { opacity: calc(var(--plan-art-opacity) + .10); }
@keyframes baseheart-plan-art-breathe {
  0%, 100% {
    transform: translate3d(0, 1px, 0) scale(1.02);
    filter: saturate(1.04) contrast(1.03) brightness(.94) drop-shadow(0 0 0 transparent);
  }
  42% {
    transform: translate3d(-2px, -4px, 0) scale(1.055);
    filter: saturate(1.16) contrast(1.06) brightness(1.06) drop-shadow(0 0 11px var(--plan-art-glow));
  }
  68% {
    transform: translate3d(2px, -2px, 0) scale(1.04);
    filter: saturate(1.10) contrast(1.05) brightness(1.01) drop-shadow(0 0 6px var(--plan-art-glow));
  }
}
.baseheart-plan-modal .subscription-plan-card .subscription-plan-head,
.baseheart-plan-modal .subscription-plan-card .subscription-price { text-shadow: 0 2px 10px rgba(0,0,0,.82); }
.baseheart-plan-modal .subscription-plan-purpose {
  min-height: 28px;
  max-width: 72%;
  margin: -1px 0 1px;
  color: #d6dde5;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  text-shadow: 0 2px 10px rgba(0,0,0,.86);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="proPlus"] .subscription-plan-purpose { color: #9ddcff; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="power"] .subscription-plan-purpose { color: #b8c4ff; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="businessPlus"] .subscription-plan-purpose,
.baseheart-plan-modal .subscription-plan-card[data-plan-card="businessPlusPlus"] .subscription-plan-purpose { color: #efc678; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="agency"] .subscription-plan-purpose { color: #d7c0ff; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="starter"] {
  --plan-art: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIj48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9ImciIGN4PSI1MCUiIGN5PSI0NSUiPjxzdG9wIHN0b3AtY29sb3I9IiNmZjZhYWQiLz48c3RvcCBvZmZzZXQ9Ii41NSIgc3RvcC1jb2xvcj0iI2YwNDQ5MSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzhiMTY0ZiIvPjwvcmFkaWFsR3JhZGllbnQ+PGZpbHRlciBpZD0iZ2wiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjgiIHJlc3VsdD0iYiIvPjxmZU1lcmdlPjxmZU1lcmdlTm9kZSBpbj0iYiIvPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmVNZXJnZT48L2ZpbHRlcj48L2RlZnM+PGcgb3BhY2l0eT0iLjk1Ij48ZWxsaXBzZSBjeD0iMjAwIiBjeT0iMjE1IiByeD0iMTEyIiByeT0iMTgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2YwNDQ5MSIgc3Ryb2tlLW9wYWNpdHk9Ii41NSIgc3Ryb2tlLXdpZHRoPSIzIi8+PGVsbGlwc2UgY3g9IjIwMCIgY3k9IjIxNSIgcng9IjcwIiByeT0iMTAiIGZpbGw9IiNmMDQ0OTEiIGZpbGwtb3BhY2l0eT0iLjE2Ii8+PHBhdGggZD0iTTIwMCAxOTBDMTUyIDE1MSA5OCAxMTggOTggNzJjMC0zMSAyNC01MSA1Mi01MSAyMiAwIDQwIDExIDUwIDI5IDEwLTE4IDI4LTI5IDUwLTI5IDI4IDAgNTIgMjAgNTIgNTEgMCA0Ni01NCA3OS0xMDIgMTE4WiIgZmlsbD0idXJsKCNnKSIgc3Ryb2tlPSIjZmY5YmM5IiBzdHJva2Utd2lkdGg9IjMiIGZpbHRlcj0idXJsKCNnbCkiLz48cGF0aCBkPSJNMTI4IDUybDQ1IDExOU0yNzIgNTJsLTQ1IDExOU0xNTEgMjhsNDkgMTYyIDQ5LTE2Mk0xMTIgODRoMTc2IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmQwZTUiIHN0cm9rZS1vcGFjaXR5PSIuMzUiIHN0cm9rZS13aWR0aD0iMiIvPjxnIGZpbGw9IiNmZjdkYjYiPjxjaXJjbGUgY3g9IjgyIiBjeT0iODgiIHI9IjMiLz48Y2lyY2xlIGN4PSIzMTUiIGN5PSI2MiIgcj0iNCIvPjxjaXJjbGUgY3g9IjMzNyIgY3k9IjExOCIgcj0iMi41Ii8+PGNpcmNsZSBjeD0iNzEiIGN5PSIxNDciIHI9IjIiLz48L2c+PC9nPjwvc3ZnPg==");
  border-color: rgba(240,68,145,.38);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="creator"] {
  --plan-art: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIuMTUiIHkxPSIuMSIgeDI9Ii44NSIgeTI9Ii45Ij48c3RvcCBzdG9wLWNvbG9yPSIjZGQ3MmZmIi8+PHN0b3Agb2Zmc2V0PSIuNTUiIHN0b3AtY29sb3I9IiM4YjNjZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM0ZDE2OGMiLz48L2xpbmVhckdyYWRpZW50PjxmaWx0ZXIgaWQ9ImdsIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI3IiByZXN1bHQ9ImIiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49ImIiLz48ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiLz48L2ZlTWVyZ2U+PC9maWx0ZXI+PC9kZWZzPjxlbGxpcHNlIGN4PSIyMDAiIGN5PSIyMTgiIHJ4PSIxMTQiIHJ5PSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOGIzY2ZmIiBzdHJva2Utb3BhY2l0eT0iLjU1IiBzdHJva2Utd2lkdGg9IjMiLz48cGF0aCBkPSJNMjAwIDE5MEMxNTIgMTUxIDk4IDExOCA5OCA3MmMwLTMxIDI0LTUxIDUyLTUxIDIyIDAgNDAgMTEgNTAgMjkgMTAtMTggMjgtMjkgNTAtMjkgMjggMCA1MiAyMCA1MiA1MSAwIDQ2LTU0IDc5LTEwMiAxMThaIiBmaWxsPSJ1cmwoI2cpIiBzdHJva2U9IiNlMWE0ZmYiIHN0cm9rZS13aWR0aD0iMyIgZmlsdGVyPSJ1cmwoI2dsKSIvPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q1OGNmZiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2UtbGluZWNhcD0icm91bmQiPjxwYXRoIGQ9Ik01NSA1NmwxOC0xNCAxMyAxNy0xOCAxNFoiLz48cGF0aCBkPSJNMzE4IDQxbDE0IDktOSAxNC0xNC05WiIvPjxwYXRoIGQ9Ik02MSAxNjRsMTgtMTgiLz48cGF0aCBkPSJNMzIxIDE1NWwtMTgtMTgiLz48L2c+PHBhdGggZD0iTTQ5IDExMGwtMTcgMTMgMTcgMTNNMzUxIDExMGwxNyAxMy0xNyAxMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmY3OWJjIiBzdHJva2Utd2lkdGg9IjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xMjggNTJsNDUgMTE5TTI3MiA1MmwtNDUgMTE5TTE1MSAyOGw0OSAxNjIgNDktMTYyIiBmaWxsPSJub25lIiBzdHJva2U9IiNmM2Q3ZmYiIHN0cm9rZS1vcGFjaXR5PSIuMjgiIHN0cm9rZS13aWR0aD0iMiIvPjwvc3ZnPg==");
  border-color: rgba(139,60,255,.40);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="pro"] {
  --plan-art: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIuMiIgeTE9Ii4wNSIgeDI9Ii44IiB5Mj0iMSI+PHN0b3Agc3RvcC1jb2xvcj0iIzZlZTdmZiIvPjxzdG9wIG9mZnNldD0iLjQ1IiBzdG9wLWNvbG9yPSIjMmY4ZGZmIi8+PHN0b3Agb2Zmc2V0PSIuNzUiIHN0b3AtY29sb3I9IiNhMTRjZmYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmMDQ0OTEiLz48L2xpbmVhckdyYWRpZW50PjxmaWx0ZXIgaWQ9ImdsIj48ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSI4IiByZXN1bHQ9ImIiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49ImIiLz48ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiLz48L2ZlTWVyZ2U+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzRiYTZmZiI+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTEyIiByPSIxMDQiIHN0cm9rZS1vcGFjaXR5PSIuMTgiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIxMTIiIHI9IjgzIiBzdHJva2Utb3BhY2l0eT0iLjMyIiBzdHJva2UtZGFzaGFycmF5PSI4IDkiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIxMTIiIHI9IjYyIiBzdHJva2Utb3BhY2l0eT0iLjUiLz48L2c+PHBhdGggZD0iTTIwMCAxOTRDMTUyIDE1NSA5OCAxMjIgOTggNzZjMC0zMSAyNC01MSA1Mi01MSAyMiAwIDQwIDExIDUwIDI5IDEwLTE4IDI4LTI5IDUwLTI5IDI4IDAgNTIgMjAgNTIgNTEgMCA0Ni01NCA3OS0xMDIgMTE4WiIgZmlsbD0idXJsKCNnKSIgc3Ryb2tlPSIjYTZlOGZmIiBzdHJva2Utd2lkdGg9IjMiIGZpbHRlcj0idXJsKCNnbCkiLz48cGF0aCBkPSJNMjAwIDRsNyAxNSAxNiAzLTEyIDExIDMgMTYtMTQtOC0xNCA4IDMtMTYtMTItMTEgMTYtM1oiIGZpbGw9IiNkOWY2ZmYiIGZpbHRlcj0idXJsKCNnbCkiLz48cGF0aCBkPSJNMTI4IDU2bDQ1IDExOU0yNzIgNTZsLTQ1IDExOU0xNTEgMzJsNDkgMTYyIDQ5LTE2MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWFmOGZmIiBzdHJva2Utb3BhY2l0eT0iLjMiIHN0cm9rZS13aWR0aD0iMiIvPjxlbGxpcHNlIGN4PSIyMDAiIGN5PSIyMjAiIHJ4PSIxMTIiIHJ5PSIxOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMmY4ZGZmIiBzdHJva2Utb3BhY2l0eT0iLjU1IiBzdHJva2Utd2lkdGg9IjMiLz48L3N2Zz4=");
  border-color: rgba(47,141,255,.42);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="proPlus"] {
  --plan-art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'><defs><linearGradient id='g' x1='.2' y1='.05' x2='.8' y2='1'><stop stop-color='%236ee7ff'/><stop offset='.45' stop-color='%232f8dff'/><stop offset='.75' stop-color='%23a14cff'/><stop offset='1' stop-color='%23f04491'/></linearGradient><filter id='gl'><feGaussianBlur stdDeviation='8' result='b'/><feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge></filter></defs><g fill='none' stroke='%234ba6ff'><circle cx='200' cy='112' r='104' stroke-opacity='.18'/><circle cx='200' cy='112' r='83' stroke-opacity='.32' stroke-dasharray='8 9'/><circle cx='200' cy='112' r='62' stroke-opacity='.5'/></g><path d='M200 194C152 155 98 122 98 76c0-31 24-51 52-51 22 0 40 11 50 29 10-18 28-29 50-29 28 0 52 20 52 51 0 46-54 79-102 118Z' fill='url(%23g)' stroke='%23a6e8ff' stroke-width='3' filter='url(%23gl)'/><path d='M200 4l7 15 16 3-12 11 3 16-14-8-14 8 3-16-12-11 16-3Z' fill='%23d9f6ff' filter='url(%23gl)'/><g fill='none' stroke='%23f7fbff' stroke-width='10' stroke-linecap='round' filter='url(%23gl)'><path d='M200 82v56M172 110h56'/></g><g fill='none' stroke='%2376c8ff' stroke-width='4' stroke-linecap='round'><path d='M200 82v56M172 110h56'/></g><path d='M128 56l45 119M272 56l-45 119M151 32l49 162 49-162' fill='none' stroke='%23eaf8ff' stroke-opacity='.3' stroke-width='2'/><ellipse cx='200' cy='220' rx='112' ry='18' fill='none' stroke='%232f8dff' stroke-opacity='.55' stroke-width='3'/></svg>");
  --plan-art-opacity: .68;
  border-color: rgba(70,158,255,.56);
  background: radial-gradient(circle at 84% 12%,rgba(64,137,255,.16),transparent 36%),linear-gradient(180deg,#1b191f,#18161c);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="power"] {
  --plan-art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'><defs><linearGradient id='g' x1='.18' y1='.04' x2='.82' y2='1'><stop stop-color='%2388f4ff'/><stop offset='.38' stop-color='%234c9dff'/><stop offset='.7' stop-color='%23864fff'/><stop offset='1' stop-color='%23ff4f9a'/></linearGradient><filter id='gl'><feGaussianBlur stdDeviation='9' result='b'/><feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge></filter></defs><g fill='none' stroke='%2369c7ff'><circle cx='200' cy='108' r='108' stroke-opacity='.18'/><circle cx='200' cy='108' r='86' stroke-opacity='.34'/><circle cx='200' cy='108' r='66' stroke-opacity='.5' stroke-dasharray='5 8'/></g><path d='M200 196C151 156 96 122 96 74c0-32 25-53 54-53 22 0 40 11 50 29 10-18 28-29 50-29 29 0 54 21 54 53 0 48-55 82-104 122Z' fill='url(%23g)' stroke='%23c8f5ff' stroke-width='3.5' filter='url(%23gl)'/><path d='M214 61l-38 57h27l-17 50 46-66h-29Z' fill='%23f5fdff' stroke='%237cd8ff' stroke-width='3' stroke-linejoin='round' filter='url(%23gl)'/><path d='M128 52l45 124M272 52l-45 124M151 28l49 168 49-168' fill='none' stroke='%23eaf8ff' stroke-opacity='.28' stroke-width='2'/><g fill='%239eeaff'><circle cx='333' cy='48' r='3'/><circle cx='315' cy='74' r='2'/><circle cx='347' cy='112' r='2.5'/><circle cx='64' cy='92' r='2'/></g><ellipse cx='200' cy='222' rx='116' ry='19' fill='none' stroke='%2359b7ff' stroke-opacity='.62' stroke-width='3'/></svg>");
  --plan-art-opacity: .72;
  border-color: rgba(101,123,255,.62);
  background: radial-gradient(circle at 84% 12%,rgba(89,96,255,.18),transparent 38%),linear-gradient(180deg,#1b191f,#18161c);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="business"] {
  --plan-art: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIuMTUiIHkxPSIuMTUiIHgyPSIuODUiIHkyPSIuOSI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZDY2ZSIvPjxzdG9wIG9mZnNldD0iLjQ1IiBzdG9wLWNvbG9yPSIjZmY5ZTJlIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZDIzODc4Ii8+PC9saW5lYXJHcmFkaWVudD48ZmlsdGVyIGlkPSJnbCI+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iNyIgcmVzdWx0PSJiIi8+PGZlTWVyZ2U+PGZlTWVyZ2VOb2RlIGluPSJiIi8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+PC9mZU1lcmdlPjwvZmlsdGVyPjwvZGVmcz48Y2lyY2xlIGN4PSIyMDAiIGN5PSI5NiIgcj0iOTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmYzI0NyIgc3Ryb2tlLW9wYWNpdHk9Ii4zIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTE2IDg0YzI4LTEyIDE0MC0xMiAxNjggME0xMTkgMTEyYzM2IDEzIDEyNiAxMyAxNjIgME0yMDAgN2MtMjcgMzUtMjcgMTQzIDAgMTc4TTIwMCA3YzI3IDM1IDI3IDE0MyAwIDE3OCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZjMjQ3IiBzdHJva2Utb3BhY2l0eT0iLjI4IiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMjAwIDE5MEMxNTIgMTUxIDk4IDExOCA5OCA3MmMwLTMxIDI0LTUxIDUyLTUxIDIyIDAgNDAgMTEgNTAgMjkgMTAtMTggMjgtMjkgNTAtMjkgMjggMCA1MiAyMCA1MiA1MSAwIDQ2LTU0IDc5LTEwMiAxMThaIiBmaWxsPSJ1cmwoI2cpIiBzdHJva2U9IiNmZmUyYTIiIHN0cm9rZS13aWR0aD0iMyIgZmlsdGVyPSJ1cmwoI2dsKSIvPjxnIGZpbGw9IiMxMTE3MjIiIHN0cm9rZT0iI2ZmYzI0NyIgc3Ryb2tlLXdpZHRoPSIzIj48Y2lyY2xlIGN4PSI3OCIgY3k9IjE5MyIgcj0iMTMiLz48cGF0aCBkPSJNNTQgMjI1YzItMTkgMTItMjggMjQtMjhzMjIgOSAyNCAyOCIvPjxjaXJjbGUgY3g9IjMyMiIgY3k9IjE5MyIgcj0iMTMiLz48cGF0aCBkPSJNMjk4IDIyNWMyLTE5IDEyLTI4IDI0LTI4czIyIDkgMjQgMjgiLz48L2c+PGVsbGlwc2UgY3g9IjIwMCIgY3k9IjIyMSIgcng9Ijk2IiByeT0iMTQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmYzI0NyIgc3Ryb2tlLW9wYWNpdHk9Ii41IiBzdHJva2Utd2lkdGg9IjMiLz48L3N2Zz4=");
  border-color: rgba(255,194,71,.40);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="businessPlus"] {
  --plan-art: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIj4KPGRlZnM+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJnIiB4MT0iLjE1IiB5MT0iLjE1IiB4Mj0iLjg1IiB5Mj0iLjkiPgogICAgPHN0b3Agc3RvcC1jb2xvcj0iI2ZmZDY2ZSIvPgogICAgPHN0b3Agb2Zmc2V0PSIuNDUiIHN0b3AtY29sb3I9IiNmZjllMmUiLz4KICAgIDxzdG9wIG9mZnNldD0iLjcyIiBzdG9wLWNvbG9yPSIjZmY1Yjc2Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNkMjM4NzgiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxmaWx0ZXIgaWQ9ImdsIj4KICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjciIHJlc3VsdD0iYiIvPgogICAgPGZlTWVyZ2U+PGZlTWVyZ2VOb2RlIGluPSJiIi8+PGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+PC9mZU1lcmdlPgogIDwvZmlsdGVyPgo8L2RlZnM+CjxjaXJjbGUgY3g9IjIwMCIgY3k9Ijk2IiByPSI5MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZjMjQ3IiBzdHJva2Utb3BhY2l0eT0iLjMwIiBzdHJva2Utd2lkdGg9IjIiLz4KPHBhdGggZD0iTTExNiA4NGMyOC0xMiAxNDAtMTIgMTY4IDBNMTE5IDExMmMzNiAxMyAxMjYgMTMgMTYyIDBNMjAwIDdjLTI3IDM1LTI3IDE0MyAwIDE3OE0yMDAgN2MyNyAzNSAyNyAxNDMgMCAxNzgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmYzI0NyIgc3Ryb2tlLW9wYWNpdHk9Ii4yOCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0yMDAgMTkwQzE1MiAxNTEgOTggMTE4IDk4IDcyYzAtMzEgMjQtNTEgNTItNTEgMjIgMCA0MCAxMSA1MCAyOSAxMC0xOCAyOC0yOSA1MC0yOSAyOCAwIDUyIDIwIDUyIDUxIDAgNDYtNTQgNzktMTAyIDExOFoiIGZpbGw9InVybCgjZykiIHN0cm9rZT0iI2ZmZTJhMiIgc3Ryb2tlLXdpZHRoPSIzIiBmaWx0ZXI9InVybCgjZ2wpIi8+CjxwYXRoIGQ9Ik0yMDAgNzF2NTRNMTczIDk4aDU0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmY2ZGYiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsdGVyPSJ1cmwoI2dsKSIvPgo8cGF0aCBkPSJNMjAwIDcxdjU0TTE3MyA5OGg1NCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZjYzYyIiBzdHJva2Utd2lkdGg9IjQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8ZyBmaWxsPSIjMTExNzIyIiBzdHJva2U9IiNmZmMyNDciIHN0cm9rZS13aWR0aD0iMyI+CiAgPGNpcmNsZSBjeD0iNzgiIGN5PSIxOTMiIHI9IjEzIi8+PHBhdGggZD0iTTU0IDIyNWMyLTE5IDEyLTI4IDI0LTI4czIyIDkgMjQgMjgiLz4KICA8Y2lyY2xlIGN4PSIzMjIiIGN5PSIxOTMiIHI9IjEzIi8+PHBhdGggZD0iTTI5OCAyMjVjMi0xOSAxMi0yOCAyNC0yOHMyMiA5IDI0IDI4Ii8+CjwvZz4KPGVsbGlwc2UgY3g9IjIwMCIgY3k9IjIyMSIgcng9Ijk2IiByeT0iMTQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmYzI0NyIgc3Ryb2tlLW9wYWNpdHk9Ii41IiBzdHJva2Utd2lkdGg9IjMiLz4KPGcgZmlsbD0iI2ZmZDY2ZSI+CiAgPGNpcmNsZSBjeD0iMzM2IiBjeT0iNDgiIHI9IjMiLz48Y2lyY2xlIGN4PSIzMTYiIGN5PSI3MyIgcj0iMiIvPjxjaXJjbGUgY3g9IjM0NiIgY3k9IjExMSIgcj0iMi41Ii8+PGNpcmNsZSBjeD0iNjMiIGN5PSI5MiIgcj0iMiIvPgo8L2c+Cjwvc3ZnPg==");
  --plan-art-opacity: .66;
  border-color: rgba(255,177,73,.48);
  background: radial-gradient(circle at 84% 12%,rgba(255,183,69,.13),transparent 36%),linear-gradient(180deg,#1b191f,#18161c);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="businessPlus"]::before {
  animation-name: baseheart-business-plus-breathe;
}
@keyframes baseheart-business-plus-breathe {
  0%, 100% {
    transform: translate3d(0, 2px, 0) scale(1.02);
    filter: saturate(1.08) contrast(1.04) brightness(.96) drop-shadow(0 0 3px rgba(255,168,71,.12));
  }
  38% {
    transform: translate3d(-4px, -7px, 0) scale(1.085);
    filter: saturate(1.22) contrast(1.08) brightness(1.12) drop-shadow(0 0 18px var(--plan-art-glow));
  }
  64% {
    transform: translate3d(3px, -3px, 0) scale(1.05);
    filter: saturate(1.14) contrast(1.06) brightness(1.04) drop-shadow(0 0 10px var(--plan-art-glow));
  }
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="businessPlusPlus"] {
  --plan-art: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 260'><defs><linearGradient id='g' x1='.15' y1='.15' x2='.85' y2='.9'><stop stop-color='%23ffd66e'/><stop offset='.45' stop-color='%23ff9e2e'/><stop offset='.72' stop-color='%23ff5b76'/><stop offset='1' stop-color='%23d23878'/></linearGradient><filter id='gl'><feGaussianBlur stdDeviation='7' result='b'/><feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge></filter></defs><circle cx='200' cy='96' r='90' fill='none' stroke='%23ffc247' stroke-opacity='.30' stroke-width='2'/><path d='M116 84c28-12 140-12 168 0M119 112c36 13 126 13 162 0M200 7c-27 35-27 143 0 178M200 7c27 35 27 143 0 178' fill='none' stroke='%23ffc247' stroke-opacity='.28' stroke-width='2'/><path d='M200 190C152 151 98 118 98 72c0-31 24-51 52-51 22 0 40 11 50 29 10-18 28-29 50-29 28 0 52 20 52 51 0 46-54 79-102 118Z' fill='url(%23g)' stroke='%23ffe2a2' stroke-width='3' filter='url(%23gl)'/><g fill='none' stroke='%23fff6df' stroke-width='10' stroke-linecap='round' filter='url(%23gl)'><path d='M174 72v52M148 98h52'/><path d='M226 72v52M200 98h52'/></g><g fill='none' stroke='%23ffcc62' stroke-width='4' stroke-linecap='round'><path d='M174 72v52M148 98h52'/><path d='M226 72v52M200 98h52'/></g><g fill='%23ffd66e'><circle cx='336' cy='48' r='3'/><circle cx='316' cy='73' r='2'/><circle cx='346' cy='111' r='2.5'/><circle cx='63' cy='92' r='2'/></g><ellipse cx='200' cy='221' rx='96' ry='14' fill='none' stroke='%23ffc247' stroke-opacity='.5' stroke-width='3'/></svg>");
  --plan-art-opacity: .72;
  border-color: rgba(255,177,73,.60);
  background: radial-gradient(circle at 84% 12%,rgba(255,183,69,.17),transparent 36%),linear-gradient(180deg,#1c1a20,#18161c);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="businessPlusPlus"]::before { animation-name: baseheart-business-plus-breathe; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="agency"] {
  --plan-art: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImciIHgxPSIuMSIgeTE9Ii4wNSIgeDI9Ii45IiB5Mj0iMSI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iLjI4IiBzdG9wLWNvbG9yPSIjZDliOGZmIi8+PHN0b3Agb2Zmc2V0PSIuNiIgc3RvcC1jb2xvcj0iIzljNWNmZiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzViMmJkNiIvPjwvbGluZWFyR3JhZGllbnQ+PGZpbHRlciBpZD0iZ2wiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjgiIHJlc3VsdD0iYiIvPjxmZU1lcmdlPjxmZU1lcmdlTm9kZSBpbj0iYiIvPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmVNZXJnZT48L2ZpbHRlcj48L2RlZnM+PHBhdGggZD0iTTE0NSAzOWwxOCAyMCAzNy0zNyAzNyAzNyAxOC0yMCAxMSA0N0gxMzRaIiBmaWxsPSJub25lIiBzdHJva2U9IiNlZmUxZmYiIHN0cm9rZS13aWR0aD0iNSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZmlsdGVyPSJ1cmwoI2dsKSIvPjxjaXJjbGUgY3g9IjE0NSIgY3k9IjM3IiByPSI1IiBmaWxsPSIjZjdlZWZmIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMTciIHI9IjUiIGZpbGw9IiNmN2VlZmYiLz48Y2lyY2xlIGN4PSIyNTUiIGN5PSIzNyIgcj0iNSIgZmlsbD0iI2Y3ZWVmZiIvPjxwYXRoIGQ9Ik0yMDAgMjAwQzE1MiAxNjEgOTggMTI4IDk4IDgyYzAtMzEgMjQtNTEgNTItNTEgMjIgMCA0MCAxMSA1MCAyOSAxMC0xOCAyOC0yOSA1MC0yOSAyOCAwIDUyIDIwIDUyIDUxIDAgNDYtNTQgNzktMTAyIDExOFoiIGZpbGw9InVybCgjZykiIHN0cm9rZT0iI2YyZTdmZiIgc3Ryb2tlLXdpZHRoPSIzIiBmaWx0ZXI9InVybCgjZ2wpIi8+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjk4YWZmIiBzdHJva2Utb3BhY2l0eT0iLjY1IiBzdHJva2Utd2lkdGg9IjIiPjxyZWN0IHg9IjM1IiB5PSI2NSIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjMwIiByeD0iNSIvPjxyZWN0IHg9IjMxNyIgeT0iNjUiIHdpZHRoPSI0OCIgaGVpZ2h0PSIzMCIgcng9IjUiLz48cmVjdCB4PSIzMSIgeT0iMTM1IiB3aWR0aD0iNTYiIGhlaWdodD0iMzQiIHJ4PSI1Ii8+PHJlY3QgeD0iMzEzIiB5PSIxMzUiIHdpZHRoPSI1NiIgaGVpZ2h0PSIzNCIgcng9IjUiLz48cGF0aCBkPSJNODMgODBoMjhNMjg5IDgwaDI4TTg3IDE1MWgyNk0yODcgMTUxaDI2Ii8+PC9nPjxlbGxpcHNlIGN4PSIyMDAiIGN5PSIyMjQiIHJ4PSIxMTQiIHJ5PSIxOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYTY2YmZmIiBzdHJva2Utb3BhY2l0eT0iLjU1IiBzdHJva2Utd2lkdGg9IjMiLz48ZWxsaXBzZSBjeD0iMjAwIiBjeT0iMjI0IiByeD0iNzAiIHJ5PSIxMCIgZmlsbD0iIzliNjFmZiIgZmlsbC1vcGFjaXR5PSIuMTMiLz48L3N2Zz4=");
  border-color: rgba(166,107,255,.44);
}
.baseheart-plan-modal .subscription-plan-card[data-plan-card="starter"] { --plan-art-glow: rgba(240,68,145,.30); --plan-art-duration: 7.8s; --plan-art-delay: -1.1s; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="creator"] { --plan-art-glow: rgba(139,60,255,.32); --plan-art-duration: 6.9s; --plan-art-delay: -2.4s; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="pro"] { --plan-art-glow: rgba(47,141,255,.34); --plan-art-duration: 6.4s; --plan-art-delay: -.7s; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="proPlus"] { --plan-art-glow: rgba(70,158,255,.48); --plan-art-duration: 5.9s; --plan-art-delay: -1.3s; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="power"] { --plan-art-glow: rgba(104,103,255,.56); --plan-art-duration: 5.5s; --plan-art-delay: -2.1s; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="business"] { --plan-art-glow: rgba(255,194,71,.28); --plan-art-duration: 8.2s; --plan-art-delay: -3.2s; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="businessPlus"] { --plan-art-glow: rgba(255,168,71,.42); --plan-art-duration: 6.2s; --plan-art-delay: -1.7s; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="businessPlusPlus"] { --plan-art-glow: rgba(255,174,65,.50); --plan-art-duration: 5.9s; --plan-art-delay: -1.2s; }
.baseheart-plan-modal .subscription-plan-card[data-plan-card="agency"] { --plan-art-glow: rgba(166,107,255,.36); --plan-art-duration: 6.1s; --plan-art-delay: -1.8s; }
@media (max-width: 720px) {
  .baseheart-plan-modal .subscription-plan-card::before {
    width: 72%;
    height: 40%;
    background-position: 118% 8px;
    background-size: 96% auto;
    opacity: .40;
    animation-duration: 9.5s;
  }
  .baseheart-plan-modal .subscription-plan-card::after {
    background:
      linear-gradient(90deg, rgba(18,16,22,.96) 0%, rgba(18,16,22,.82) 44%, rgba(18,16,22,.30) 100%),
      linear-gradient(180deg, rgba(18,16,22,.08) 0%, rgba(24,22,28,.88) 42%, #18161c 62%);
  }
  .baseheart-plan-modal .subscription-plan-purpose { max-width: 100%; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .baseheart-plan-modal .subscription-plan-card::before {
    animation: none !important;
    transition: none;
    transform: scale(1.02) !important;
    filter: saturate(1.08) contrast(1.04);
  }
}
.baseheart-plan-modal .subscription-plan-card.current { border-color: rgba(242,80,116,.48); box-shadow: inset 3px 0 #ef3f88; }
.baseheart-plan-modal .subscription-free-banner { border-color: #3a3038; background: #18161c; }
.baseheart-plan-modal .subscription-comparison { border-color: #36343a; background: #18161c; }

/* Search is the same BaseHeart hub, but keeps the existing command input and actions alive. */
.baseheart-command-modal { width: min(1080px, calc(100vw - 30px)); transform: none; }
.baseheart-command-modal .command-card { max-height: calc(100vh - 38px); padding: 0; overflow: hidden; border: 1px solid #38363c; border-radius: 20px; background: radial-gradient(circle at 13% 8%, rgba(242,80,116,.07), transparent 24%), #141218; box-shadow: 0 32px 96px rgba(0,0,0,.48); }
.baseheart-command-shell { display: grid; grid-template-columns: 250px minmax(0,1fr); min-height: 620px; }
.baseheart-command-sidebar { min-width: 0; display: grid; align-content: start; gap: 14px; padding: 30px 20px; border-right: 1px solid #353339; background: linear-gradient(180deg,rgba(20,18,24,.985),rgba(18,16,22,.965)); }
.baseheart-command-content { min-width: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 14px; padding: 30px; overflow: hidden; }
.baseheart-command-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.baseheart-command-head > div { display: grid; gap: 6px; }
.baseheart-command-head .eyebrow { color: #f178a3; font-size: 12px; }
.baseheart-command-head h2 { margin: 0; color: #f4f6f8; font-size: 30px; letter-spacing: -.035em; }
.baseheart-command-head p { margin: 0; color: #9299a3; font-size: 12.5px; }
.baseheart-command-head .icon-button { width: 42px; height: 42px; border: 1px solid #343238; border-radius: 999px; background: #1c1a20; color: #d9dde3; font-size: 21px; }
.baseheart-command-modal .command-search-row { min-height: 54px; border: 1px solid #39373d; border-radius: 12px; background: #18161c; }
.baseheart-command-modal .command-search-row:focus-within { border-color: rgba(242,80,116,.48); box-shadow: 0 0 0 2px rgba(242,80,116,.08); }
.baseheart-command-modal .command-search-row input { color: #edf0f3; }
.baseheart-command-modal .command-results { min-height: 0; overflow: auto; display: grid; align-content: start; gap: 9px; padding-right: 3px; }
.baseheart-command-modal .command-result { min-height: 64px; border: 1px solid #36343a; border-radius: 11px; background: linear-gradient(180deg,#1b191f,#18161c); }
.baseheart-command-modal .command-result:hover, .baseheart-command-modal .command-result.active { border-color: rgba(242,80,116,.42); background: #1c1a20; box-shadow: inset 3px 0 #ef3f88; }
.baseheart-command-modal .command-result > span:first-child { border: 1px solid #6f2d4b; border-radius: 999px; background: #19171d; color: #f381aa; }
.baseheart-command-modal .command-results { gap: 16px; }
.command-category { display: grid; gap: 7px; }
.command-category-title { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 5px; color: #8e96a1; }
.command-category-title strong { color: #b8bec7; font-size: 12px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.command-category-title span { min-width: 24px; padding: 2px 6px; border: 1px solid #36343a; border-radius: 999px; background: #18161c; color: #777f89; font-size: 11.5px; text-align: center; }
.baseheart-command-modal .command-result { grid-template-columns: 34px minmax(0,1fr) auto; gap: 10px; }
.command-result-icon { width: 31px !important; height: 31px !important; }
.command-result-copy { min-width: 0; display: grid; gap: 2px; }
.command-result-copy strong, .command-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.command-result-meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 9px; }
.command-status { padding: 3px 7px; border: 1px solid rgba(111,206,151,.20); border-radius: 999px; background: rgba(64,151,101,.07); color: #86cba3; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.command-status.locked { border-color: rgba(218,174,93,.18); background: rgba(218,174,93,.06); color: #d4af6d; }
.command-result-arrow { min-width: 12px; color: #a7adb5; font-size: 13.5px; text-align: center; }
.baseheart-command-modal .command-result:disabled { opacity: 1; cursor: not-allowed; border-color: #2d2b31; background: #16141a; color: #777f88; }
.baseheart-command-modal .command-result:disabled:hover { border-color: #2d2b31; background: #16141a; box-shadow: none; }
.baseheart-command-modal .command-result:disabled .command-result-icon { border-color: #3b393f; background: #19171d; color: #686f78; }
.baseheart-command-modal .command-result:disabled .command-result-copy small { color: #6f7680; }

html[dir="rtl"] .baseheart-hub-sidebar, html[dir="rtl"] .baseheart-command-sidebar { border-right: 0; border-left: 1px solid #353339; }
html[dir="rtl"] .baseheart-hub-modal .baseheart-hub-dialog-head { right: auto; left: 18px; }
html[dir="rtl"] .unified-center-modal .control-tab.active { box-shadow: inset -3px 0 #ef3f88; }

@media (max-width: 900px) {
  .baseheart-hub-shell { grid-template-columns: 220px minmax(0,1fr); }
  .baseheart-hub-sidebar { padding: 24px 15px; }
  .baseheart-hub-content { padding: 28px 20px 22px; }
  .baseheart-plan-modal .baseheart-hub-shell { grid-template-columns: 210px minmax(0,1fr); }
  .baseheart-command-shell { grid-template-columns: 210px minmax(0,1fr); }
  .baseheart-command-content { padding: 24px 20px; }
}

@media (max-width: 720px) {
  .baseheart-hub-modal, .baseheart-plan-modal { width: min(100vw - 16px, 680px); }
  .baseheart-hub-shell, .baseheart-plan-modal .baseheart-hub-shell { grid-template-columns: 1fr; min-height: 0; }
  .baseheart-hub-sidebar { grid-template-columns: 130px minmax(0,1fr); align-items: start; padding: 18px 14px; border-right: 0; border-bottom: 1px solid #353339; }
  .baseheart-hub-brand { grid-row: 1 / span 2; padding: 0; }
  .baseheart-hub-gem { width: 58px; height: 52px; font-size: 31px; }
  .baseheart-hub-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .baseheart-hub-metric:last-child:nth-child(odd) { grid-column: auto; }
  .baseheart-hub-content { padding: 20px 14px 16px; }
  .baseheart-hub-content-head { padding: 0 48px 18px 2px; }
  .baseheart-hub-content-head h2 { font-size: 26px; }
  .unified-center-modal .baseheart-hub-sidebar { grid-template-columns: 1fr; }
  .unified-center-modal .baseheart-hub-brand, .unified-center-modal .baseheart-hub-metrics { display: none; }
  .unified-control-tabs { grid-auto-flow: column; grid-auto-columns: 110px; grid-template-columns: none; max-height: none; overflow-x: auto; overflow-y: hidden; gap: 6px; padding: 0 0 6px; }
  .control-tab-group { display: none; }
  .unified-center-modal .control-tab { min-width: 108px; grid-template-columns: 28px minmax(0,1fr); padding: 6px; }
  .unified-center-modal .control-tab > span { width: 28px; height: 28px; }
  .baseheart-command-modal { width: min(100vw - 16px, 680px); }
  .baseheart-command-shell { grid-template-columns: 1fr; min-height: 0; }
  .baseheart-command-sidebar { grid-template-columns: 120px minmax(0,1fr); padding: 16px 14px; border-right: 0; border-bottom: 1px solid #353339; }
  .baseheart-command-sidebar .baseheart-hub-brand { grid-row: auto; grid-template-columns: 48px minmax(0,1fr); justify-items: start; align-items: center; text-align: left; }
  .baseheart-command-sidebar .baseheart-hub-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .baseheart-command-content { max-height: 70vh; padding: 16px 12px; }
  .baseheart-command-head h2 { font-size: 24px; }
  .command-status { display: none; }
  .baseheart-command-modal .command-result { grid-template-columns: 32px minmax(0,1fr) 18px; }
}

body[data-preview-device="tablet"] .baseheart-hub-shell, body[data-preview-device="tablet"] .baseheart-plan-modal .baseheart-hub-shell { grid-template-columns: 1fr; min-height: 0; }
body[data-preview-device="tablet"] .baseheart-hub-sidebar { grid-template-columns: 145px minmax(0,1fr); align-items: start; padding: 18px 14px; border-right: 0; border-bottom: 1px solid #353339; }
body[data-preview-device="tablet"] .baseheart-hub-brand { grid-row: 1 / span 2; padding: 0; }
body[data-preview-device="tablet"] .baseheart-hub-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
body[data-preview-device="tablet"] .baseheart-hub-metric:last-child:nth-child(odd) { grid-column: auto; }
body[data-preview-device="tablet"] .baseheart-hub-content { padding: 20px 16px; }
body[data-preview-device="tablet"] .unified-center-modal .baseheart-hub-sidebar { grid-template-columns: 1fr; }
body[data-preview-device="tablet"] .unified-center-modal .baseheart-hub-brand, body[data-preview-device="tablet"] .unified-center-modal .baseheart-hub-metrics { display: none; }
body[data-preview-device="tablet"] .unified-control-tabs { grid-auto-flow: column; grid-auto-columns: 110px; grid-template-columns: none; max-height: none; overflow-x: auto; overflow-y: hidden; }
body[data-preview-device="tablet"] .control-tab-group { display: none; }
body[data-preview-device="mobile"] .baseheart-hub-shell, body[data-preview-device="mobile"] .baseheart-plan-modal .baseheart-hub-shell { grid-template-columns: 1fr; min-height: 0; }
body[data-preview-device="mobile"] .baseheart-hub-sidebar { grid-template-columns: 1fr; gap: 10px; padding: 14px 12px; border-right: 0; border-bottom: 1px solid #353339; }
body[data-preview-device="mobile"] .baseheart-hub-brand { grid-template-columns: 48px minmax(0,1fr); justify-items: start; align-items: center; gap: 8px; padding: 0 48px 0 0; text-align: left; }
body[data-preview-device="mobile"] .baseheart-hub-gem { width: 48px; height: 44px; font-size: 28px; }
body[data-preview-device="mobile"] .baseheart-hub-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
body[data-preview-device="mobile"] .baseheart-hub-metric:last-child:nth-child(odd) { grid-column: auto; }
body[data-preview-device="mobile"] .baseheart-hub-content { padding: 16px 11px; }
body[data-preview-device="mobile"] .baseheart-hub-content-head { padding: 0 44px 14px 1px; }
body[data-preview-device="mobile"] .baseheart-hub-content-head h2 { font-size: 23px; }
body[data-preview-device="mobile"] .unified-center-modal .baseheart-hub-brand, body[data-preview-device="mobile"] .unified-center-modal .baseheart-hub-metrics { display: none; }
body[data-preview-device="mobile"] .unified-control-tabs { grid-auto-flow: column; grid-auto-columns: 104px; grid-template-columns: none; max-height: none; overflow-x: auto; overflow-y: hidden; }
body[data-preview-device="mobile"] .control-tab-group { display: none; }
body[data-preview-device="mobile"] .baseheart-hub-actions { display: grid; grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .baseheart-hub-actions button { width: 100%; }
body[data-preview-device="mobile"] .baseheart-command-shell { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .baseheart-command-sidebar { display: none; }
body[data-preview-device="mobile"] .baseheart-command-content { max-height: 76vh; padding: 14px 10px; }
body[data-preview-device="mobile"] .baseheart-command-modal .command-result { grid-template-columns: 32px minmax(0,1fr) 18px; }
body[data-preview-device="mobile"] .command-status { display: none; }
body[data-preview-device="mobile"] .command-category-title { padding-inline: 3px; }

@media (prefers-reduced-motion: reduce) {
  .baseheart-hub-modal *, .baseheart-command-modal * { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* BaseHeart menu-only visual system. The water/island background remains untouched. */
.app-shell {
  --bh-menu-canvas: #131117;
  --bh-menu-surface: #18161c;
  --bh-menu-surface-hover: #1f1d23;
  --bh-menu-border: #36343a;
  --bh-menu-border-strong: #3b4552;
  --bh-menu-text: #edf0f3;
  --bh-menu-muted: #818a95;
  --bh-menu-pink: #f04491;
  --bh-menu-pink-soft: rgba(240,68,145,.12);
}

/* Hide scrollbar chrome without disabling any scrolling behavior. */
html,
body,
.sidebar,
.dialog-card,
.language-menu,
.responsive-preview-menu,
.notification-popover,
.command-results,
.baseheart-command-content,
.baseheart-hub-modal .dialog-card,
.heart-shop-modal .dialog-card,
.unified-control-tabs,
.editor-header-center,
.editor-header-actions,
.editor-chat-thread,
.editor-stage,
.editor-inspector,
.history-drawer,
.visual-comment-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.sidebar::-webkit-scrollbar,
.dialog-card::-webkit-scrollbar,
.language-menu::-webkit-scrollbar,
.responsive-preview-menu::-webkit-scrollbar,
.notification-popover::-webkit-scrollbar,
.command-results::-webkit-scrollbar,
.baseheart-command-content::-webkit-scrollbar,
.baseheart-hub-modal .dialog-card::-webkit-scrollbar,
.heart-shop-modal .dialog-card::-webkit-scrollbar,
.unified-control-tabs::-webkit-scrollbar,
.editor-header-center::-webkit-scrollbar,
.editor-header-actions::-webkit-scrollbar,
.editor-chat-thread::-webkit-scrollbar,
.editor-stage::-webkit-scrollbar,
.editor-inspector::-webkit-scrollbar,
.history-drawer::-webkit-scrollbar,
.visual-comment-list::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Sidebar: Hearts-style navigation while preserving the existing navigation and background scene. */
.sidebar {
  padding: 16px 12px 14px;
  gap: 18px;
  border-right-color: var(--bh-menu-border);
  background: linear-gradient(180deg, rgba(19,17,23,.99), rgba(17,15,21,.99));
  box-shadow: 10px 0 36px rgba(0,0,0,.16);
}
.sidebar-top,
.sidebar-bottom { gap: 9px; }
.workspace-switcher {
  min-height: 58px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
}
.workspace-switcher:hover,
.workspace-switcher:focus-visible {
  border-color: var(--bh-menu-border-strong);
  background: var(--bh-menu-surface);
}
.heart-logo {
  width: 38px;
  height: 38px;
  border-color: #74314f;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(240,68,145,.18), #19171d 68%);
  color: #ff5a9f;
  box-shadow: 0 0 20px rgba(240,68,145,.14);
}
.workspace-copy strong { color: var(--bh-menu-text); font-size: 13.5px; }
.workspace-copy small,
.chevron { color: var(--bh-menu-muted); }
.primary-nav,
.project-filters { gap: 6px; }
.nav-item,
.filter-item {
  position: relative;
  min-height: 43px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #a7afb8;
  background: transparent;
}
.nav-item:hover,
.filter-item:hover {
  border-color: var(--bh-menu-border);
  background: var(--bh-menu-surface);
  color: #f5f6f8;
}
.nav-item.active,
.filter-item.active {
  border-color: rgba(240,68,145,.36);
  background: linear-gradient(90deg, rgba(240,68,145,.13), rgba(24,22,28,.9));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--bh-menu-pink);
}
.nav-icon,
.filter-item > span:first-child { color: #8f98a3; }
.nav-item.active .nav-icon,
.filter-item.active > span:first-child { color: #ff74ac; }
.sidebar-heading {
  padding: 4px 10px 5px;
  color: #68727e;
  font-size: 11.5px;
  letter-spacing: .1em;
}
.sidebar-section {
  margin-top: 3px;
  padding-top: 12px;
  border-top: 1px solid rgba(54,52,58,.78);
}
.filter-item b,
kbd {
  border-color: #3d3b41;
  background: #18161c;
  color: #89929d;
}
.project-shortcut,
.sidebar-promo,
.profile-button {
  min-height: 56px;
  padding: 8px 9px;
  border: 1px solid var(--bh-menu-border);
  border-radius: 12px;
  background: var(--bh-menu-surface);
}
.project-shortcut:hover,
.sidebar-promo:hover,
.profile-button:hover {
  border-color: rgba(240,68,145,.34);
  background: var(--bh-menu-surface-hover);
}
.project-dot,
.promo-icon,
.avatar {
  width: 34px;
  height: 34px;
  border: 1px solid #5c3042;
  border-radius: 10px;
  background: #21151d;
  color: #f685ad;
}
.project-shortcut[hidden] { display: none !important; }
.project-shortcut strong,
.sidebar-promo strong,
.profile-button strong { color: #e8ebef; }
.project-shortcut small,
.sidebar-promo small,
.profile-button small { color: #747e89; }
.profile-button { border-top: 1px solid var(--bh-menu-border); }

/* Compact grouped sidebar navigation. */
.primary-nav { gap: 6px; }
.sidebar-nav-group { display: grid; gap: 4px; }
.nav-group-toggle,
.sidebar-wallet-summary {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 21px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #a7afb8;
  text-align: left;
  cursor: pointer;
}
.nav-group-toggle:has(.nav-group-count) { grid-template-columns: 21px minmax(0,1fr) auto auto; }
.nav-group-toggle:hover,
.nav-group-toggle:focus-visible,
.sidebar-wallet-summary:hover,
.sidebar-wallet-summary:focus-visible {
  border-color: var(--bh-menu-border);
  background: var(--bh-menu-surface);
  color: #f5f6f8;
}
.nav-group-toggle > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 690; }
.nav-group-count { min-width: 22px; padding: 2px 6px; border-radius: 999px; background: #1d1b21; color: #8e99a6; font-size: 11.5px; text-align: center; }
.nav-group-chevron { color: #707b87; font-size: 13px; transition: transform .16s ease; }
.sidebar-nav-group.open > .nav-group-toggle .nav-group-chevron { transform: rotate(180deg); }
.sidebar-nav-group.has-active > .nav-group-toggle { color: #e8ebef; }
.sidebar-nav-group.has-active > .nav-group-toggle .nav-icon { color: #b8c1cb; }
.nav-group-panel { display: grid; gap: 3px; margin: 1px 0 2px 19px; padding: 3px 0 3px 9px; border-left: 1px solid rgba(71,80,92,.56); }
.nav-group-panel[hidden] { display: none; }
.nav-group-panel .nav-item,
.nav-group-panel .filter-item { min-height: 36px; padding: 7px 8px; border-radius: 9px; font-size: 12.5px; }
.nav-group-panel .nav-icon,
.nav-group-panel .filter-item > span:first-child { font-size: 13.5px; }
.sidebar-bottom { gap: 5px; padding-top: 10px; border-top: 1px solid rgba(54,52,58,.72); }
.sidebar-bottom .project-shortcut,
.sidebar-bottom .profile-button,
.sidebar-wallet-summary {
  min-height: 48px;
  border-color: transparent;
  background: transparent;
}
.sidebar-bottom .project-shortcut:hover,
.sidebar-bottom .profile-button:hover,
.sidebar-wallet-summary:hover { border-color: var(--bh-menu-border); background: var(--bh-menu-surface); }
.sidebar-wallet-summary { grid-template-columns: 32px minmax(0,1fr) auto; padding: 6px 8px; }
.sidebar-wallet-summary > span:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.sidebar-wallet-summary strong { color: #e8ebef; font-size: 12.5px; }
.sidebar-wallet-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #818b97; font-size: 11.5px; }
.sidebar-wallet-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #5c3042; border-radius: 9px; background: #21151d; color: #ff73aa; box-shadow: 0 0 18px rgba(240,68,145,.08); }
.sidebar-bottom .profile-button { border-top-color: transparent; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .nav-group-chevron { transition: none; } }

/* Top utility menus: same surface family as the Hearts vault. */
.responsive-preview-control { gap: 7px; }
.utility-button,
.responsive-preview-button {
  min-height: 44px;
  border-color: var(--bh-menu-border);
  border-radius: 12px;
  background: rgba(24,22,28,.96);
  color: #d8dde3;
  box-shadow: none;
}
.utility-button:hover,
.responsive-preview-button:hover,
.responsive-preview-button[aria-expanded="true"] {
  border-color: rgba(240,68,145,.38);
  background: #1f1d23;
  color: #fff;
}
.heart-account-mark {
  border-color: #5d3043;
  border-radius: 9px;
  background: #21151d;
  color: #f486ae;
}
.personal-heart-button .heart-account-mark { border-radius: 999px; }
.language-menu,
.responsive-preview-menu,
.notification-popover {
  border: 1px solid var(--bh-menu-border);
  border-radius: 13px;
  background: #16141a;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
.language-option,
.preview-layout-option {
  border-radius: 10px;
  color: #aab2bc;
}
.language-option:hover,
.preview-layout-option:hover {
  background: #1f1d23;
  color: #fff;
}
.language-option.active,
.preview-layout-option.active {
  border-color: rgba(240,68,145,.4);
  background: var(--bh-menu-pink-soft);
  color: #fff;
}

/* Dashboard interface surfaces only; the canvas/water background is deliberately unchanged. */
.main-content .tools-banner,
.main-content .composer,
.main-content .project-card,
.main-content .recent-card,
.main-content .template-card,
.main-content .empty-state,
.main-content .library-search,
.main-content .library-toolbar select,
.main-content .template-toolbar select,
.main-content .view-toggle,
.main-content .folder-chip {
  border-color: var(--bh-menu-border);
  background: rgba(19,17,23,.88);
  backdrop-filter: blur(18px) saturate(110%);
}
.main-content .tools-banner {
  border-radius: 13px;
  box-shadow: none;
}
.main-content .tools-banner:hover {
  border-color: rgba(240,68,145,.38);
  background: rgba(26,24,30,.94);
}
.main-content .tools-orbit {
  border: 1px solid #5b3042;
  border-radius: 10px;
  background: #19171d;
}
.main-content .composer {
  border-color: rgba(240,68,145,.42);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at center, rgba(255,226,239,.24) 0%, rgba(255,126,181,.15) 24%, rgba(240,68,145,.055) 48%, transparent 72%),
    radial-gradient(ellipse at center, rgba(240,68,145,.2) 0%, rgba(240,68,145,.09) 34%, rgba(240,68,145,.025) 58%, transparent 76%),
    linear-gradient(180deg, rgba(17,15,21,.44) 0%, rgba(18,16,22,.50) 100%);
  background-size: 18% 135%, 50% 175%, 100% 100%;
  background-repeat: no-repeat;
  background-position: -100% 108%, -100% 108%, 0 0;
  backdrop-filter: blur(12px) saturate(112%);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  animation: composerPinkSweep 9.2s linear infinite;
  box-shadow:
    0 24px 70px rgba(0,0,0,.22),
    0 0 0 1px rgba(240,68,145,.08),
    0 0 34px rgba(240,68,145,.08),
    inset 0 1px rgba(255,255,255,.045);
}
.main-content .composer:focus-within {
  border-color: rgba(240,68,145,.58);
  box-shadow:
    0 26px 78px rgba(0,0,0,.25),
    0 0 0 1px rgba(240,68,145,.09),
    -10px 18px 50px rgba(240,68,145,.12),
    inset 0 1px rgba(255,255,255,.04);
}
.main-content .composer textarea {
  color: #fff;
  caret-color: #ff75b4;
}
.main-content .composer textarea::placeholder {
  color: #aeb4bd;
  opacity: .94;
}
@keyframes composerPinkSweep {
  0% { background-position: -100% 108%, -100% 108%, 0 0; }
  100% { background-position: 200% 108%, 200% 108%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .main-content .composer {
    animation: none;
    background-position: 18% 108%, 18% 108%, 0 0;
  }
}
.main-content .composer-level-select,
.main-content .icon-button,
.main-content .build-button,
.main-content .text-button,
.main-content .folder-chip,
.main-content .view-toggle button {
  border-color: #3e3c42;
  background: #18161c;
  color: #c8ced5;
}
.main-content .composer-level-select:hover,
.main-content .icon-button:hover,
.main-content .text-button:hover,
.main-content .folder-chip:hover,
.main-content .folder-chip.active,
.main-content .view-toggle button:hover,
.main-content .view-toggle button.active {
  border-color: rgba(240,68,145,.4);
  background: #1f1d23;
  color: #fff;
}
.main-content .build-button:not(:disabled),
.main-content .project-create-chip {
  border-color: #e44682;
  background: linear-gradient(110deg,#f04491,#e43479);
  color: #fff;
}
.main-content .projects-section,
.main-content .recent-section,
.main-content .templates-section { border-top-color: rgba(54,52,58,.9); }
.main-content .project-card,
.main-content .recent-card,
.main-content .template-card { border-radius: 13px; }
.main-content .project-card:hover,
.main-content .recent-card:hover,
.main-content .template-card:hover {
  border-color: rgba(240,68,145,.34);
  background: rgba(26,24,30,.94);
}
.main-content .project-actions button:hover,
.main-content .favorite-template:hover {
  border-color: rgba(240,68,145,.36);
  background: #21151d;
  color: #f58aad;
}

/* Subscription page panels use the same menu treatment, with all original actions untouched. */
.subscription-current-card,
.subscription-benefit-group,
.subscription-benefit-row,
.subscription-current-metrics > div {
  border-color: var(--bh-menu-border) !important;
  background: rgba(19,17,23,.9) !important;
  box-shadow: none;
}
.subscription-current-card { border-radius: 16px; }
.subscription-current-icon,
.subscription-benefit-icon {
  border-color: #6b304a !important;
  background: #21151d !important;
  color: #f486ae !important;
}
.subscription-benefit-action,
.subscription-current-actions button,
.subscription-compare-toggle {
  border-color: #3e3c42;
  background: #18161c;
  color: #c8ced5;
}
.subscription-benefit-action:hover,
.subscription-current-actions button:hover,
.subscription-compare-toggle:hover {
  border-color: rgba(240,68,145,.4);
  background: #1f1d23;
  color: #fff;
}

/* Generic dialogs and menus. Existing Hearts/Hub layouts remain structurally identical. */
.modal:not(.heart-shop-modal):not(.baseheart-hub-modal):not(.baseheart-command-modal) {
  border-color: var(--bh-menu-border);
  background: #16141a;
  box-shadow: 0 30px 100px rgba(0,0,0,.55);
}
.modal:not(.heart-shop-modal):not(.baseheart-hub-modal):not(.baseheart-command-modal) .dialog-row,
.modal:not(.heart-shop-modal):not(.baseheart-hub-modal):not(.baseheart-command-modal) .summary-card,
.modal:not(.heart-shop-modal):not(.baseheart-hub-modal):not(.baseheart-command-modal) .control-card {
  border-color: var(--bh-menu-border);
  background: var(--bh-menu-surface);
}
.dialog-actions .secondary-button,
.dialog-actions .primary-button,
.baseheart-hub-actions .secondary-button,
.baseheart-hub-actions .primary-button {
  border-radius: 10px;
}

/* Editor chrome adopts the same menu system, but the app canvas itself is unchanged. */
.editor-header,
.editor-chat-panel,
.editor-inspector,
.editor-toolbar,
.history-drawer {
  border-color: var(--bh-menu-border);
  background: #16141a;
}
.editor-subtle-button,
.editor-icon-button,
.editor-header select,
.editor-toolbar select,
.editor-composer select,
.editor-intelligence-button,
.history-actions button {
  border-color: #3e3c42;
  background: #18161c;
  color: #aeb6c0;
}
.editor-subtle-button:hover,
.editor-icon-button:hover,
.editor-intelligence-button:hover,
.history-actions button:hover {
  border-color: rgba(240,68,145,.4);
  background: #1f1d23;
  color: #fff;
}
.editor-publish-button,
.editor-send-button {
  border-color: #e44682;
  background: linear-gradient(110deg,#f04491,#e43479);
  color: #fff;
}
.chat-message,
.change-card,
.inspector-section,
.history-item {
  border-color: var(--bh-menu-border) !important;
  background: #18161c !important;
}

/* Hearts balance label follows the selected destination; typography matches the reference. */
.heart-vault-balance-label {
  color: #87909c;
  font-size: 11.5px;
  font-weight: 760;
  letter-spacing: .06em;
}

@media (max-width: 760px) {
  .sidebar { box-shadow: 24px 0 70px rgba(0,0,0,.42); }
  .responsive-preview-control { gap: 4px; }
  .utility-button,
  .responsive-preview-button { min-height: 40px; }
}

/* Project lifecycle and settings stay in the same restrained BaseHeart surface system. */
.project-status[data-status="archived"] { border-color: #3a424d; background: #1f1d23; color: #9da7b3; }
.project-card.archived-project-card { opacity: .82; }
.project-card.archived-project-card:hover { opacity: 1; }
.project-settings-modal { width: min(720px, calc(100vw - 28px)); }
.project-settings-modal .dialog-card { width: 100%; max-width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden; }
.project-settings-shell { display: grid; gap: 18px; }
.project-settings-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(150px,.6fr); gap: 12px; }
.project-settings-grid .control-field { display: grid; gap: 7px; min-width: 0; color: #909aa6; font-size: 12.5px; }
.project-settings-grid .control-field:first-child,
.project-settings-grid .control-field:nth-child(2) { grid-column: 1 / -1; }
.project-settings-input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--bh-menu-border); border-radius: 10px; background: #18161c; color: #eef1f4; font: inherit; }
.project-settings-description { min-height: 90px; resize: vertical; line-height: 1.5; }
.project-settings-input:focus-visible { outline: 0; border-color: #3a424d; background: #1c1a20; box-shadow: inset 3px 0 0 rgba(240,68,145,.76), inset 16px 0 24px -22px rgba(255,102,165,.72); }
html[dir="rtl"] .project-settings-input:focus-visible { box-shadow: inset -3px 0 0 rgba(240,68,145,.76), inset -16px 0 24px -22px rgba(255,102,165,.72); }
.project-settings-modal .dialog-actions { min-width: 0; flex-wrap: wrap; }
.project-settings-modal .dialog-actions button { max-width: 100%; }
.project-settings-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.project-settings-danger { display: grid; gap: 8px; padding: 14px; border: 1px solid #44313a; border-radius: 12px; background: rgba(35,20,28,.45); }
.project-settings-danger > strong { color: #f0d9e2; }
.project-settings-danger > p { margin: 0; color: #8d929b; font-size: 12.5px; line-height: 1.5; }
.project-danger-action { border-color: #6c3248 !important; color: #f099b9 !important; }
.project-danger-action:hover { border-color: #a13f65 !important; background: #28151e !important; }
@media (max-width: 700px) {
  .project-settings-grid,
  .project-settings-meta { grid-template-columns: 1fr; }
  .project-settings-grid .control-field { grid-column: 1 !important; }
  .project-settings-danger .control-inline-actions { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-item,
  .filter-item,
  .workspace-switcher,
  .project-shortcut,
  .sidebar-promo,
  .profile-button,
  .utility-button,
  .responsive-preview-button,
  .main-content .tools-banner,
  .main-content .composer,
  .main-content .project-card,
  .main-content .recent-card,
  .main-content .template-card { transition: none !important; }
}

/* BaseHeart intentionally keeps every scroll surface usable while hiding native scrollbar chrome. */
html,
body,
body *,
dialog,
dialog * {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
body *::-webkit-scrollbar,
dialog::-webkit-scrollbar,
dialog *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

/* Compact menu chrome for the explicit mobile preview without removing any controls. */
body[data-preview-device="mobile"] .responsive-preview-control {
  max-width: calc(var(--preview-shell-width) - 66px);
  flex-wrap: nowrap;
}
body[data-preview-device="mobile"] .heart-balance-button {
  min-width: 68px;
  padding-inline: 4px 6px;
  gap: 4px;
}
body[data-preview-device="mobile"] .hearts-button .heart-glyph { display: none; }
body[data-preview-device="mobile"] .hearts-button strong {
  min-width: 0;
  font-size: 11.5px;
}
body[data-preview-device="mobile"] .language-button { padding-inline: 6px; }
body[data-preview-device="mobile"] .library-toolbar,
body[data-preview-device="mobile"] .template-toolbar {
  grid-template-columns: 1fr;
}
body[data-preview-device="mobile"] .view-toggle {
  width: fit-content;
  grid-column: auto;
}
body[data-preview-device="mobile"] .folder-bar {
  flex-wrap: wrap;
  overflow-x: visible;
}
body[data-preview-device="mobile"] .project-create-chip {
  max-width: 100%;
}

@media (max-width: 620px) {
  .responsive-preview-control { max-width: calc(100vw - 66px); }
  .responsive-preview-control .notification-button { display: inline-flex; width: 36px; min-height: 36px; }
  .hearts-button .heart-glyph { display: none; }
  .hearts-button strong { min-width: 0; font-size: 11.5px; }
  .folder-bar { flex-wrap: wrap; overflow-x: visible; }
}

/* Agent workspace pass: bring chat, language, notifications and BaseHeart controls into the Heart Vault system. */
.editor-shell {
  --bh-agent-panel: #16141a;
  --bh-agent-surface: #18161c;
  --bh-agent-surface-raised: #1d1b21;
  --bh-agent-border: #36343a;
  --bh-agent-border-hot: rgba(240,68,145,.46);
  --bh-agent-muted: #818a95;
  --bh-agent-ink: #edf0f3;
  --bh-agent-pink: #f04491;
}

/* Shared BaseHeart control behavior. App-canvas buttons are deliberately excluded. */
.app-shell button,
.editor-shell button:not(.app-canvas *) {
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.app-shell button:focus-visible,
.editor-shell button:not(.app-canvas *):focus-visible,
.app-shell select:focus-visible,
.editor-shell select:focus-visible,
.app-shell input:focus-visible,
.editor-shell input:focus-visible,
.editor-shell textarea:focus-visible {
  outline: 2px solid rgba(240,68,145,.48);
  outline-offset: 2px;
}
.app-shell button:disabled,
.editor-shell button:not(.app-canvas *):disabled {
  opacity: .46;
  cursor: not-allowed;
  filter: saturate(.55);
}

/* Agent chat is treated as a BaseHeart control surface, not a generic messenger. */
.editor-chat-panel {
  position: relative;
  border-right-color: var(--bh-agent-border);
  background: linear-gradient(180deg, #16141a, #131117);
  box-shadow: inset -1px 0 rgba(255,255,255,.012);
}
.editor-panel-tabs {
  min-height: 48px;
  gap: 6px;
  padding: 8px 10px;
  border-bottom-color: var(--bh-agent-border);
  background: rgba(18,16,22,.94);
}
.editor-panel-tabs button {
  position: relative;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #8e97a2;
  font-weight: 700;
}
.editor-panel-tabs button:hover {
  border-color: var(--bh-agent-border);
  background: var(--bh-agent-surface);
  color: #fff;
}
.editor-panel-tabs button.active {
  border-color: var(--bh-agent-border-hot);
  background: linear-gradient(180deg, rgba(58,25,42,.78), rgba(25,19,27,.9));
  color: #fff;
  box-shadow: inset 3px 0 0 var(--bh-agent-pink);
}
.editor-panel-tabs span {
  border: 1px solid #3a414b;
  background: #1f1d23;
  color: #aeb6c0;
}
.editor-chat-thread {
  gap: 12px;
  padding: 12px 10px 18px;
  background: radial-gradient(circle at 18% 0%, rgba(240,68,145,.045), transparent 28%);
}
.chat-message {
  overflow: hidden;
  gap: 8px;
  padding: 11px 11px 10px 14px;
  border: 1px solid var(--bh-agent-border) !important;
  border-radius: 12px;
  background: linear-gradient(180deg, #1b191f, #17151b) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.014);
}
.chat-message::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #3a424d;
}
.user-message::before { background: linear-gradient(180deg, #ff68a6, #d93679); }
.assistant-message::before { background: linear-gradient(180deg, #f391b5, #7f3856); }
.user-message { background: linear-gradient(180deg, rgba(38,23,32,.96), #18161c) !important; }
.message-meta strong {
  display: inline-flex;
  align-items: center;
  color: #f2f4f7;
  font-size: 12px;
}
.message-meta span { color: #6f7985; }
.chat-message p { color: #c5cbd2; line-height: 1.58; }
.message-actions { gap: 5px; opacity: 1; }
.message-actions button {
  min-height: 27px;
  padding: 4px 7px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #7d8792;
}
.message-actions button:hover,
.message-actions button:focus-visible {
  border-color: #3a424d;
  background: #1f1d23;
  color: #f2f4f7;
}
.change-card {
  border-color: #3d3b41 !important;
  border-radius: 10px;
  background: linear-gradient(180deg, #1b191f, #16141a) !important;
}
.change-icon {
  border: 1px solid rgba(145,200,163,.24);
  border-radius: 999px;
  background: #26242a;
}
.change-card button {
  border-color: #3c5b48;
  border-radius: 8px;
  background: #1a181e;
  color: #a9cfb4;
}
.change-card button:hover { background: #252329; color: #e6f5ea; }
.suggested-actions {
  gap: 6px;
  padding: 10px;
  border-top-color: var(--bh-agent-border);
  background: #131117;
}
.suggested-actions > span {
  margin-bottom: 1px;
  color: #68727e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.suggested-actions button {
  min-height: 30px;
  padding: 5px 8px;
  border-color: #3a383e;
  border-radius: 9px;
  background: #18161c;
  color: #9fa8b2;
}
.suggested-actions button:hover,
.suggested-actions button:focus-visible {
  border-color: var(--bh-agent-border-hot);
  background: rgba(45,24,35,.72);
  color: #fff;
}
.editor-composer {
  position: relative;
  margin: 9px 10px 10px;
  padding: 10px;
  border-color: #343d48;
  border-radius: 14px;
  background: linear-gradient(180deg, #1a181e, #16141a);
  box-shadow: 0 14px 42px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.018);
}
.editor-composer:focus-within {
  border-color: rgba(240,68,145,.52);
  box-shadow: 0 16px 48px rgba(0,0,0,.24), 0 0 0 2px rgba(240,68,145,.07);
}
.editor-composer textarea {
  color: #edf0f3;
  caret-color: #ff62a2;
}
.editor-composer textarea::placeholder { color: #68727e; }
.editor-composer select,
.editor-composer .editor-icon-button {
  border-color: #343d48;
  background: #18161c;
  color: #acb4be;
}
.editor-composer select:hover,
.editor-composer .editor-icon-button:hover {
  border-color: rgba(240,68,145,.38);
  background: #1f1d23;
  color: #fff;
}
.editor-composer .editor-send-button {
  min-width: 64px;
  border-color: #e44682;
  background: linear-gradient(110deg,#f04491,#e43479);
  box-shadow: 0 8px 22px rgba(231,54,124,.16);
}

/* Editor side panels and top chrome use the same component family. */
.editor-header,
.editor-toolbar,
.editor-inspector,
.history-drawer {
  border-color: var(--bh-agent-border);
  background: #16141a;
}
.editor-header { box-shadow: 0 8px 28px rgba(0,0,0,.16); }
.editor-project-copy strong { color: #f0f2f5; }
.editor-project-copy span { color: #727c87; }
.editor-header select,
.editor-toolbar select,
.editor-subtle-button,
.editor-icon-button,
.editor-intelligence-button {
  border-color: #343d48;
  border-radius: 10px;
  background: #18161c;
  color: #aeb6c0;
}
.editor-subtle-button:hover,
.editor-icon-button:hover,
.editor-intelligence-button:hover,
.editor-header select:hover,
.editor-toolbar select:hover {
  border-color: rgba(240,68,145,.4);
  background: #1f1d23;
  color: #fff;
}
.editor-publish-button,
.editor-send-button {
  border-color: #e44682;
  border-radius: 10px;
  background: linear-gradient(110deg,#f04491,#e43479);
  color: #fff;
  box-shadow: 0 8px 22px rgba(231,54,124,.14);
}
.editor-publish-button:hover,
.editor-send-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.editor-mode-tabs,
.editor-device-tabs {
  padding: 3px;
  border: 1px solid #38363c;
  border-radius: 10px;
  background: #121016;
}
.editor-mode-tabs button,
.editor-device-tabs button {
  border: 1px solid transparent;
  border-radius: 8px;
}
.editor-mode-tabs button:hover,
.editor-device-tabs button:hover { background: #1f1d23; color: #fff; }
.editor-mode-tabs button.active,
.editor-device-tabs button.active {
  border-color: rgba(240,68,145,.34);
  background: rgba(47,24,36,.72);
  color: #fff;
}
.editor-inspector { padding: 12px; }
.inspector-head { border-bottom-color: var(--bh-agent-border); }
.inspector-head strong { color: #eef1f4; }
.inspector-empty { color: #7c8691; }
.inspector-fields label { color: #7f8994; }
.inspector-fields textarea,
.inspector-fields select,
.inspector-fields input[type="color"] {
  border-color: #343d48;
  background: #18161c;
  color: #eef1f4;
}

/* Language menu: same ring-icon + pink active rail language as Hearts. */
.language-menu {
  width: 264px;
  gap: 6px;
  padding: 8px;
  border-color: #3a383e;
  border-radius: 14px;
  background: #16141a;
  box-shadow: 0 26px 80px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.018);
}
.language-menu-head {
  gap: 3px;
  padding: 9px 10px 10px;
  border-bottom-color: #323036;
}
.language-menu-head strong { color: #eef1f4; font-size: 13px; }
.language-menu-head small { color: #77818c; }
.language-option {
  position: relative;
  min-height: 44px;
  grid-template-columns: 32px minmax(0,1fr) auto;
  gap: 9px;
  padding: 7px 9px;
  border-color: transparent;
  border-radius: 10px;
  background: #18161c;
  color: #aeb6c0;
}
.language-option > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #343d48;
  border-radius: 999px;
  background: #131117;
}
.language-option:hover,
.language-option:focus-visible {
  border-color: #3a4350;
  background: #1f1d23;
  color: #fff;
}
.language-option.active {
  border-color: rgba(240,68,145,.45);
  background: linear-gradient(90deg, rgba(240,68,145,.13), #19171d 62%);
  color: #fff;
  box-shadow: inset 3px 0 0 #f04491;
}
.language-option.active > span {
  border-color: #79334f;
  background: #21151d;
}
.language-option.active small { color: #ef95b5; }

/* Notifications: individual event cards, Heart-ring icons and a real action button. */
.notification-popover {
  width: min(360px, calc(100vw - 24px));
  padding: 8px;
  border-color: #3a383e;
  border-radius: 15px;
  background: #16141a;
  box-shadow: 0 28px 86px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.018);
}
.popover-head {
  min-height: 46px;
  padding: 6px 6px 10px;
  border-bottom-color: #323036;
}
.popover-head strong { color: #eef1f4; font-size: 13px; }
.popover-head button {
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #343d48;
  border-radius: 9px;
  background: #18161c;
  color: #aab2bc;
}
.popover-head button:hover,
.popover-head button:focus-visible {
  border-color: rgba(240,68,145,.42);
  background: #21151d;
  color: #fff;
}
#notificationList {
  display: grid;
  gap: 6px;
  padding-top: 7px;
}
.notification-item {
  position: relative;
  min-height: 58px;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 10px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid #36343a;
  border-radius: 10px;
  background: #18161c;
}
.notification-item:last-child { border-bottom: 1px solid #36343a; }
.notification-item.unread {
  border-color: rgba(240,68,145,.35);
  background: linear-gradient(90deg, rgba(240,68,145,.11), #18161c 56%);
  box-shadow: inset 3px 0 0 #f04491;
}
.notification-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #673047;
  border-radius: 999px;
  background: #21151d;
  color: #f587ad;
}
.notification-copy strong { color: #e9edf1; font-size: 12px; }
.notification-copy span { color: #9099a4; }
.notification-copy small { color: #66717d; }

/* Remaining BaseHeart buttons use one family while preserving primary/secondary meaning. */
.app-shell :is(.text-button,.folder-chip,.view-toggle button,.utility-button,.responsive-preview-button,.subscription-benefit-action,.subscription-compare-toggle,.subscription-current-actions button),
.editor-shell :is(.editor-subtle-button,.editor-icon-button,.editor-intelligence-button,.history-actions button,.message-actions button,.suggested-actions button) {
  font-weight: 680;
}
.app-shell :is(.primary-button,.build-button,.project-create-chip),
.editor-shell :is(.editor-publish-button,.editor-send-button) {
  border-color: #e44682;
  background: linear-gradient(110deg,#f04491,#e43479);
  color: #fff;
}
.app-shell :is(.primary-button,.build-button,.project-create-chip):hover,
.editor-shell :is(.editor-publish-button,.editor-send-button):hover {
  filter: brightness(1.07);
  box-shadow: 0 9px 24px rgba(231,54,124,.18);
}

@media (max-width: 720px) {
  .editor-chat-panel { min-height: 500px; }
  .editor-panel-tabs { position: sticky; top: 0; z-index: 5; }
  .editor-composer { margin: 8px; }
  .language-menu { width: min(280px, calc(100vw - 18px)); }
  .notification-popover { right: 9px; width: min(360px, calc(100vw - 18px)); }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell button,
  .editor-shell button:not(.app-canvas *),
  .language-option,
  .notification-item { transition: none !important; }
  .editor-publish-button:hover,
  .editor-send-button:hover { transform: none; }
}

/* Full BaseHeart control-theme pass: all BaseHeart menus, dropdowns, chat chrome and controls share the Heart Vault language. The water/island scene and app preview canvas are intentionally untouched. */
.app-shell,
.editor-shell {
  --bh-control-bg: #17151b;
  --bh-control-bg-hover: #201e24;
  --bh-control-bg-active: #211722;
  --bh-control-border: #3b393f;
  --bh-control-border-hover: rgba(240,68,145,.48);
  --bh-control-pink: #f04491;
  --bh-control-pink-bright: #ff66a5;
  --bh-control-text: #e9edf2;
  --bh-control-muted: #8b95a1;
  --bh-control-shadow: 0 12px 34px rgba(0,0,0,.2);
}

/* Sidebar/navigation: the pink outlined rail from the supplied reference is the signature active state. */
.sidebar :is(.workspace-switcher,.nav-item,.filter-item,.project-shortcut,.sidebar-promo,.profile-button) {
  border-color: transparent;
  color: #aeb7c2;
  box-shadow: none;
}
.sidebar :is(.workspace-switcher,.nav-item,.filter-item,.project-shortcut,.sidebar-promo,.profile-button):hover,
.sidebar :is(.workspace-switcher,.nav-item,.filter-item,.project-shortcut,.sidebar-promo,.profile-button):focus-visible {
  border-color: var(--bh-control-border-hover);
  background: linear-gradient(90deg, rgba(240,68,145,.075), rgba(24,22,28,.96) 44%);
  color: #fff;
  box-shadow: inset 3px 0 0 rgba(240,68,145,.76);
}
.sidebar :is(.nav-item,.filter-item).active {
  border-color: rgba(240,68,145,.58);
  background: linear-gradient(90deg, rgba(240,68,145,.16), rgba(26,24,30,.97) 58%, rgba(24,22,28,.96));
  color: #fff;
  box-shadow: inset 4px 0 0 var(--bh-control-pink), 0 0 0 1px rgba(240,68,145,.025);
}
.sidebar :is(.nav-item,.filter-item).active :is(.nav-icon,span:first-child) { color: #ff86b8; }
.sidebar :is(.project-shortcut,.sidebar-promo,.profile-button) {
  border: 1px solid var(--bh-control-border);
  background: rgba(23,21,27,.86);
}
.sidebar .workspace-switcher { border: 1px solid transparent; }
.sidebar :is(.project-dot,.promo-icon,.avatar) {
  border-color: #683149;
  background: #21151d;
  color: #f58bb1;
}

/* Every dashboard control belongs to the same family, without restyling the water scene itself. */
.app-shell :is(.folder-chip,.view-toggle button).active,
.app-shell .responsive-preview-button[aria-expanded="true"],
.app-shell .language-button[aria-expanded="true"],
.app-shell .notification-button[aria-expanded="true"] {
  border-color: rgba(240,68,145,.52);
  background: linear-gradient(180deg, rgba(49,25,38,.96), rgba(24,22,28,.98));
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(240,68,145,.56);
}
.app-shell :is(.primary-button,.build-button,.project-create-chip):not(:disabled) {
  border-color: #e84887;
  background: linear-gradient(110deg,#f04491,#e43479);
  color: #fff;
  box-shadow: 0 8px 24px rgba(231,54,124,.14);
}
.app-shell :is(.primary-button,.build-button,.project-create-chip):not(:disabled):hover,
.app-shell :is(.primary-button,.build-button,.project-create-chip):not(:disabled):focus-visible {
  border-color: #ff73ad;
  filter: brightness(1.06);
  box-shadow: 0 10px 28px rgba(231,54,124,.2);
}
.main-content :is(.library-toolbar select,.template-toolbar select,.library-search,.view-toggle,.folder-chip) {
  border-color: var(--bh-control-border);
  background: rgba(21,19,25,.94);
  color: #cbd2da;
}
.main-content :is(.library-toolbar select,.template-toolbar select,.folder-chip):hover {
  border-color: var(--bh-control-border-hover);
  background: #201e24;
  color: #fff;
}

/* Native selects and their opened option lists use the same dark/pink language. */
.app-shell select,
.editor-shell select,
.modal select {
  color-scheme: dark;
  border-color: var(--bh-control-border, #3b393f) !important;
  background-color: #17151b !important;
  color: #dce1e7 !important;
}
.app-shell select:hover,
.editor-shell select:hover,
.modal select:hover,
.app-shell select:focus-visible,
.editor-shell select:focus-visible,
.modal select:focus-visible {
  border-color: rgba(240,68,145,.5) !important;
  background-color: #1f1d23 !important;
}
.app-shell select option,
.editor-shell select option,
.modal select option {
  background: #17151b;
  color: #e7ebef;
}

/* All floating dropdowns/popovers use the same bordered shell and active pink rail. */
:is(.language-menu,.responsive-preview-menu,.notification-popover) {
  border-color: #3c3a40;
  background: linear-gradient(180deg,#17151b,#141218);
  box-shadow: 0 26px 84px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.018);
}
.preview-layout-option {
  position: relative;
  border: 1px solid transparent;
  background: #18161c;
}
.preview-layout-option:hover,
.preview-layout-option:focus-visible {
  border-color: #3b4552;
  background: #201e24;
  color: #fff;
}
.preview-layout-option.active {
  border-color: rgba(240,68,145,.48);
  background: linear-gradient(90deg, rgba(240,68,145,.13), #1a181e 62%);
  box-shadow: inset 3px 0 0 var(--bh-control-pink);
}
.preview-layout-option.active .device-icon { color: #ff7db2; }
.language-option {
  border: 1px solid transparent;
  background: #18161c;
}
.language-option:hover,
.language-option:focus-visible {
  border-color: #3b4552;
  background: #201e24;
}
.language-option.active {
  border-color: rgba(240,68,145,.48);
  background: linear-gradient(90deg, rgba(240,68,145,.14), #1a181e 62%);
  box-shadow: inset 3px 0 0 var(--bh-control-pink);
}
.notification-item {
  border-color: #3b393f;
  background: #18161c;
}
.notification-item.unread {
  border-color: rgba(240,68,145,.45);
  background: linear-gradient(90deg, rgba(240,68,145,.12), #18161c 58%);
  box-shadow: inset 3px 0 0 var(--bh-control-pink);
}

/* Search, profile, resources, connectors, Control Center, Platform and every generated dialog/list row. */
.modal:not(.heart-shop-modal) {
  border-color: #3c3a40;
}
.command-result > span:first-child,
.dialog-list .row-icon,
.connector-row .row-icon,
.resource-row .row-icon,
.control-tab > span {
  border: 1px solid #633048;
  background: #21151d;
  color: #f487ad;
}
.command-search-row {
  border-color: #3b393f;
  background: #151319;
}
.command-search-row:focus-within {
  border-color: rgba(240,68,145,.48);
  box-shadow: inset 0 -1px 0 rgba(240,68,145,.38);
}

/* Agent workspace: chat, left rail, toolbars and buttons are one continuous BaseHeart control surface. */
.editor-chat-panel,
.editor-header,
.editor-toolbar,
.editor-inspector,
.history-drawer {
  border-color: #3b393f;
  background: #16141a;
}
.editor-panel-tabs button,
.editor-shell :is(.editor-subtle-button,.editor-icon-button,.editor-intelligence-button,.history-actions button,.message-actions button,.suggested-actions button),
.editor-mode-tabs button,
.editor-device-tabs button,
.collab-avatars button {
  border: 1px solid #3b393f;
  border-radius: 9px;
  background: #18161c;
  color: #aeb8c3;
}
.editor-panel-tabs button:hover,
.editor-shell :is(.editor-subtle-button,.editor-icon-button,.editor-intelligence-button,.history-actions button,.message-actions button,.suggested-actions button):hover,
.editor-mode-tabs button:hover,
.editor-device-tabs button:hover,
.collab-avatars button:hover {
  border-color: rgba(240,68,145,.46);
  background: #201e24;
  color: #fff;
}
.editor-panel-tabs button.active,
.editor-mode-tabs button.active,
.editor-device-tabs button.active {
  border-color: rgba(240,68,145,.52);
  background: linear-gradient(180deg, rgba(50,25,39,.94), #1a181e);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--bh-control-pink);
}
.editor-chat-thread {
  background: radial-gradient(circle at 14% 0%, rgba(240,68,145,.05), transparent 30%), #141218;
}
.chat-message {
  border-color: #3b393f !important;
  background: linear-gradient(180deg,#1b191f,#17151b) !important;
}
.user-message {
  border-color: rgba(240,68,145,.34) !important;
  background: linear-gradient(180deg, rgba(42,24,34,.96), #18161c) !important;
}
.chat-message::before { background: #47515d; }
.user-message::before { background: linear-gradient(180deg,#ff6baa,#e33a80); }
.assistant-message::before { background: linear-gradient(180deg,#f28ab1,#a03e67); }
.change-card {
  border-color: rgba(240,68,145,.32) !important;
  background: linear-gradient(180deg, rgba(39,23,33,.88), #18161c) !important;
}
.change-icon {
  border-color: #673048;
  background: #21151d;
  color: #f58ab0;
}
.change-card button {
  border: 1px solid #633048;
  border-radius: 8px;
  background: #21151d;
  color: #f3a0bd;
}
.change-card button:hover { border-color: #a9436e; background: #2d1925; color: #fff; }
.suggested-actions { border-top-color: #3b393f; background: #151319; }
.editor-composer {
  border-color: #35404c;
  background: linear-gradient(180deg,#1b191f,#16141a);
}
.editor-composer:focus-within {
  border-color: rgba(240,68,145,.56);
  box-shadow: 0 16px 48px rgba(0,0,0,.24), 0 0 0 2px rgba(240,68,145,.08);
}
.editor-publish-button,
.editor-send-button {
  border-color: #e84887;
  border-radius: 10px;
  background: linear-gradient(110deg,#f04491,#e43479);
  color: #fff;
}

/* Small utility surfaces that otherwise looked like remnants of the previous gray theme. */
:is(.build-summary,.summary-card,.control-card,.control-status-row,.platform-metric,.history-item,.profile-privacy-note,.connector-meta,.connector-account-card,.connector-setup-block) {
  border-color: #3b393f !important;
  background: #18161c !important;
}
:is(.build-summary,.summary-card) .summary-meta span,
.status-pill {
  border: 1px solid #343e49;
  background: #201e24;
  color: #9da7b2;
}
.toast {
  border-color: #3a4450;
  background: #18161c;
  color: #d9dfe5;
}
.toast.success { border-color: rgba(240,68,145,.42); color: #f3a2bf; }

/* Keyboard and expanded-state polish shared by every BaseHeart control. */
.app-shell :is(button,select,input,textarea):focus-visible,
.editor-shell :is(button,select,input,textarea):not(.app-canvas *):focus-visible,
.modal :is(button,select,input,textarea):focus-visible {
  outline: 2px solid rgba(240,68,145,.52);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .sidebar :is(.nav-item,.filter-item).active { box-shadow: inset 3px 0 0 var(--bh-control-pink); }
  .editor-panel-tabs button.active,
  .editor-mode-tabs button.active,
  .editor-device-tabs button.active { box-shadow: inset 0 -2px 0 var(--bh-control-pink); }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar :is(.workspace-switcher,.nav-item,.filter-item,.project-shortcut,.sidebar-promo,.profile-button),
  .app-shell :is(button,select),
  .editor-shell :is(button,select):not(.app-canvas *) { transition: none !important; }
}

/* Borderless BaseHeart controls: neutral when idle, Dashboard-style pink light only inside the surface when selected/focused. The app preview canvas is intentionally untouched. */
.app-shell,
.editor-shell {
  --bh-control-border: transparent;
  --bh-control-border-hover: transparent;
}

body button:not(.app-canvas button),
.app-shell :is(select,input,textarea):not(.app-canvas *),
.editor-shell :is(select,input,textarea):not(.app-canvas *),
.modal :is(button,select,input,textarea) {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body button:not(.app-canvas button) {
  background: transparent !important;
  filter: none !important;
}
body button:not(.app-canvas button):hover {
  background: transparent !important;
  color: #fff !important;
}

/* One signature selected state: a pink rail and glow live entirely inside the control, never around it. */
body button:not(.app-canvas button):is(.active,[aria-pressed="true"],[aria-current="true"],:active) {
  border-color: transparent !important;
  outline: 0 !important;
  background: linear-gradient(90deg, rgba(240,68,145,.16) 0%, rgba(240,68,145,.075) 22%, rgba(240,68,145,.025) 58%, transparent 100%) !important;
  color: #fff !important;
  box-shadow:
    inset 4px 0 0 #f04491,
    inset 18px 0 28px -24px rgba(255,102,165,.95),
    inset 0 0 32px rgba(240,68,145,.035) !important;
}

/* Text-entry surfaces never acquire the pink selected treatment. Clicking or tabbing into them keeps the same neutral surface. */
.command-search-row,
.command-search-row:focus-within {
  border-color: transparent !important;
  outline: 0 !important;
  background: #151319 !important;
  box-shadow: none !important;
}
.editor-composer,
.editor-composer:focus-within {
  border-color: transparent !important;
  outline: 0 !important;
  background: linear-gradient(180deg,#1b191f,#16141a) !important;
  box-shadow: none !important;
}
.app-shell :is(input,textarea):not(.app-canvas *):focus-visible,
.editor-shell :is(input,textarea):not(.app-canvas *):focus-visible,
.modal :is(input,textarea):focus-visible {
  border-color: transparent !important;
  outline: 0 !important;
  background: rgba(27,25,31,.98) !important;
  box-shadow: inset 3px 0 0 rgba(240,68,145,.76), inset 16px 0 24px -22px rgba(255,102,165,.72) !important;
}
html[dir="rtl"] .app-shell :is(input,textarea):not(.app-canvas *):focus-visible,
html[dir="rtl"] .editor-shell :is(input,textarea):not(.app-canvas *):focus-visible,
html[dir="rtl"] .modal :is(input,textarea):focus-visible {
  box-shadow: inset -3px 0 0 rgba(240,68,145,.76), inset -16px 0 24px -22px rgba(255,102,165,.72) !important;
}

/* Expanded disclosures are open, not selected. Keep them neutral so only the actual destination owns the pink rail. */
.app-shell :is(.nav-group-toggle,.utility-button,.responsive-preview-button,.language-button,.notification-button)[aria-expanded="true"] {
  background: rgba(255,255,255,.025) !important;
  color: #f1f4f7 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

/* Action hierarchy stays glassy and readable after the global outline reset. */
body :is(.app-shell,.editor-shell,.modal) .primary-button:not(:disabled) {
  background: rgba(255,255,255,.07) !important;
  color: #f7f9fb !important;
  box-shadow: inset 0 1px rgba(255,255,255,.055), 0 8px 22px rgba(0,0,0,.12) !important;
}
body :is(.app-shell,.editor-shell,.modal) .secondary-button:not(:disabled) {
  background: rgba(255,255,255,.028) !important;
  color: #d7dde4 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
body :is(.app-shell,.editor-shell,.modal) :is(.primary-button,.secondary-button):not(:disabled):hover {
  background: rgba(255,255,255,.095) !important;
  color: #fff !important;
}
body :is(.app-shell,.editor-shell,.modal) :is(.subscription-danger-button,.connector-danger-button):not(:disabled) {
  background: rgba(126,40,61,.2) !important;
  color: #ffb1c2 !important;
}

body button:not(.app-canvas button):is(.active,[aria-pressed="true"],[aria-current="true"],:active) :is(.nav-icon,.heart-glyph,.project-create-icon,.row-icon,.device-icon) {
  color: #ff8abb !important;
}

/* Keyboard focus is visible without creating an exterior ring. */
body button:not(.app-canvas button):focus-visible {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: inset 3px 0 0 rgba(240,68,145,.82), inset 16px 0 24px -22px rgba(255,102,165,.8) !important;
}

html[dir="rtl"] body button:not(.app-canvas button):is(.active,[aria-pressed="true"],[aria-current="true"],:active) {
  background: linear-gradient(270deg, rgba(240,68,145,.16) 0%, rgba(240,68,145,.075) 22%, rgba(240,68,145,.025) 58%, transparent 100%) !important;
  box-shadow:
    inset -4px 0 0 #f04491,
    inset -18px 0 28px -24px rgba(255,102,165,.95),
    inset 0 0 32px rgba(240,68,145,.035) !important;
}

/* Final restraint pass: remove the remaining box outlines. Depth comes from surfaces; pink exists only inside selected/focused controls. */
.sidebar :is(.workspace-switcher,.nav-item,.filter-item,.project-shortcut,.sidebar-promo,.profile-button),
.sidebar :is(.workspace-switcher,.nav-item,.filter-item,.project-shortcut,.sidebar-promo,.profile-button):hover,
.sidebar :is(.workspace-switcher,.nav-item,.filter-item,.project-shortcut,.sidebar-promo,.profile-button):focus-visible,
.main-content :is(.tools-banner,.composer,.project-card,.recent-card,.template-card,.empty-state,.library-search,.library-toolbar select,.template-toolbar select,.view-toggle,.folder-chip),
.baseheart-command-modal .command-card,
.baseheart-command-modal .command-search-row,
.baseheart-command-modal .command-result,
.baseheart-hub-modal .dialog-card,
:is(.language-menu,.responsive-preview-menu,.notification-popover) {
  border-color: transparent !important;
  outline: 0 !important;
}

.sidebar :is(.workspace-switcher,.nav-item,.filter-item,.project-shortcut,.sidebar-promo,.profile-button):hover,
.sidebar :is(.workspace-switcher,.nav-item,.filter-item,.project-shortcut,.sidebar-promo,.profile-button):focus-visible {
  background: rgba(255,255,255,.018) !important;
  box-shadow: none !important;
}

.sidebar :is(.nav-item,.filter-item).active {
  border-color: transparent !important;
  background: linear-gradient(90deg, rgba(240,68,145,.16) 0%, rgba(240,68,145,.07) 28%, rgba(240,68,145,.018) 70%, transparent 100%) !important;
  box-shadow: inset 4px 0 0 #f04491, inset 18px 0 28px -24px rgba(255,102,165,.95) !important;
}

/* Keep the animated composer glow fully inside the chat surface: no pink ring or exterior pink shadow. */
.main-content .composer {
  border-color: transparent !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045) !important;
}
.main-content .composer:focus-within {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.045) !important;
}

html[dir="rtl"] .sidebar :is(.nav-item,.filter-item).active {
  background: linear-gradient(270deg, rgba(240,68,145,.16) 0%, rgba(240,68,145,.07) 28%, rgba(240,68,145,.018) 70%, transparent 100%) !important;
  box-shadow: inset -4px 0 0 #f04491, inset -18px 0 28px -24px rgba(255,102,165,.95) !important;
}

/* Project library toolbar: compact Connectors styling with the same ring icons and internal pink selection cue. */
.main-content .library-toolbar {
  grid-template-columns: minmax(280px,1fr) minmax(150px,.34fr) minmax(150px,.34fr) auto;
  gap: 10px;
  align-items: stretch;
}
.main-content .project-toolbar-control,
.main-content .project-toolbar-view {
  min-height: 48px;
  border: 0 !important;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24,22,28,.96), rgba(21,19,25,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.018) !important;
}
.main-content .project-toolbar-control {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 6px 10px;
  color: #aeb7c2;
}
.main-content .project-toolbar-search {
  grid-template-columns: 34px minmax(0,1fr);
}
.main-content .project-toolbar-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #5b3042;
  border-radius: 9px;
  background: #19171d;
  color: #f487ad;
  font-size: 13px;
  line-height: 1;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.main-content .project-toolbar-control input,
.main-content .project-toolbar-control select {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  outline: 0 !important;
  background: transparent !important;
  color: #dce1e7 !important;
  box-shadow: none !important;
  font-size: 12.5px;
  font-weight: 680;
}
.main-content .project-toolbar-control input::placeholder { color: #7f8994; opacity: 1; }
.main-content .project-toolbar-select select {
  appearance: none;
  cursor: pointer;
}
.main-content .project-toolbar-chevron {
  color: #78838f;
  font-size: 13.5px;
  line-height: 1;
  pointer-events: none;
  transition: color .16s ease, transform .16s ease;
}
.main-content .project-toolbar-control:hover,
.main-content .project-toolbar-select:focus-within {
  background: linear-gradient(90deg, rgba(240,68,145,.08), rgba(32,30,36,.97) 34%, rgba(24,22,28,.97)) !important;
  box-shadow: inset 3px 0 0 rgba(240,68,145,.72), inset 0 1px rgba(255,255,255,.018) !important;
}
/* Search stays neutral while typing, matching the established text-field focus rule. */
.main-content .project-toolbar-search:focus-within {
  background: linear-gradient(180deg, rgba(24,22,28,.96), rgba(21,19,25,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.018) !important;
}
.main-content .project-toolbar-control:hover .project-toolbar-icon,
.main-content .project-toolbar-select:focus-within .project-toolbar-icon {
  border-color: #8e3c60;
  color: #ff8abb;
}
.main-content .project-toolbar-select:focus-within .project-toolbar-chevron { color: #f18ab1; transform: rotate(180deg); }
.main-content .project-toolbar-view {
  display: inline-grid;
  grid-template-columns: repeat(2,44px);
  gap: 4px;
  align-items: center;
  padding: 4px;
}
.main-content .project-toolbar-view button {
  width: 44px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 9px;
  background: transparent !important;
  box-shadow: none !important;
}
.main-content .project-toolbar-view button:hover {
  background: rgba(255,255,255,.02) !important;
}
.main-content .project-toolbar-view button:is(.active,[aria-pressed="true"]) {
  background: linear-gradient(90deg, rgba(240,68,145,.16), rgba(240,68,145,.055) 62%, transparent) !important;
  box-shadow: inset 3px 0 0 #f04491, inset 16px 0 24px -22px rgba(255,102,165,.82) !important;
}
.main-content .project-toolbar-view button:is(.active,[aria-pressed="true"]) .project-toolbar-icon {
  border-color: #8e3c60;
  color: #ff8abb;
}
html[dir="rtl"] .main-content .project-toolbar-control:hover,
html[dir="rtl"] .main-content .project-toolbar-select:focus-within {
  background: linear-gradient(270deg, rgba(240,68,145,.08), rgba(32,30,36,.97) 34%, rgba(24,22,28,.97)) !important;
  box-shadow: inset -3px 0 0 rgba(240,68,145,.72), inset 0 1px rgba(255,255,255,.018) !important;
}
html[dir="rtl"] .main-content .project-toolbar-search:focus-within {
  background: linear-gradient(180deg, rgba(24,22,28,.96), rgba(21,19,25,.96)) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.018) !important;
}
html[dir="rtl"] .main-content .project-toolbar-view button:is(.active,[aria-pressed="true"]) {
  background: linear-gradient(270deg, rgba(240,68,145,.16), rgba(240,68,145,.055) 62%, transparent) !important;
  box-shadow: inset -3px 0 0 #f04491, inset -16px 0 24px -22px rgba(255,102,165,.82) !important;
}
@media (max-width: 900px) {
  .main-content .library-toolbar { grid-template-columns: minmax(240px,1fr) minmax(138px,.45fr) minmax(138px,.45fr) auto; gap: 8px; }
}
@media (max-width: 720px) {
  .main-content .library-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .main-content .project-toolbar-search { grid-column: 1 / -1; }
  .main-content .project-toolbar-view { justify-self: start; }
}
@media (max-width: 520px) {
  .main-content .library-toolbar { grid-template-columns: 1fr; }
  .main-content .project-toolbar-search { grid-column: auto; }
  .main-content .project-toolbar-view { width: fit-content; }
}
body[data-preview-device="tablet"] .main-content .library-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-preview-device="tablet"] .main-content .project-toolbar-search { grid-column: 1 / -1; }
body[data-preview-device="mobile"] .main-content .library-toolbar { grid-template-columns: 1fr; }
body[data-preview-device="mobile"] .main-content .project-toolbar-search { grid-column: auto; }
body[data-preview-device="mobile"] .main-content .project-toolbar-view { width: fit-content; }

/* Translucent dashboard controls: match the glass treatment used by the BaseHeart agent composer. */
.main-content .project-toolbar-control,.main-content .project-toolbar-view {
  background: rgba(24,22,28,.46) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  backdrop-filter: blur(14px) saturate(118%);
  box-shadow: inset 0 1px rgba(255,255,255,.028) !important;
}

.main-content .project-toolbar-control:hover,.main-content .project-toolbar-select:focus-within,.main-content .project-toolbar-view:hover {
  background: rgba(30,28,34,.56) !important;
}

.main-content .composer .composer-level-select:focus,.main-content .project-toolbar-select:focus-within {
  background: linear-gradient(90deg, rgba(240,68,145,.10), rgba(24,22,28,.46) 42%, rgba(24,22,28,.40)) !important;
  box-shadow: inset 3px 0 0 rgba(240,68,145,.68), inset 0 1px rgba(255,255,255,.028) !important;
}

.main-content .project-toolbar-search:focus-within {
  background: rgba(24,22,28,.46) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.028) !important;
}

.main-content .project-toolbar-icon {
  background: rgba(30,18,28,.42) !important;
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
}

.main-content .project-toolbar-view button,
.main-content .project-toolbar-view button:hover {
  background: rgba(24,22,28,.18) !important;
}

.main-content .project-toolbar-view button:is(.active,[aria-pressed="true"]) {
  background: linear-gradient(90deg, rgba(240,68,145,.15), rgba(24,22,28,.24) 70%, rgba(24,22,28,.12)) !important;
}

html[dir="rtl"] .main-content .composer .composer-level-select:focus,html[dir="rtl"] .main-content .project-toolbar-select:focus-within {
  background: linear-gradient(270deg, rgba(240,68,145,.10), rgba(24,22,28,.46) 42%, rgba(24,22,28,.40)) !important;
  box-shadow: inset -3px 0 0 rgba(240,68,145,.68), inset 0 1px rgba(255,255,255,.028) !important;
}

/* Project folder dialogs: same dark glass + internal Heart rail language as Dashboard, without changing dialog behavior. */
.project-folder-modal {
  width: min(650px, calc(100vw - 28px));
  border: 0 !important;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(240,68,145,.13), transparent 31%),
    rgba(16,14,20,.86) !important;
  -webkit-backdrop-filter: blur(22px) saturate(122%);
  backdrop-filter: blur(22px) saturate(122%);
  box-shadow: 0 32px 100px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.035) !important;
  overflow: hidden;
}
.project-folder-modal .dialog-card {
  position: relative;
  padding: 20px;
  background: transparent;
}
.project-folder-modal .dialog-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #f04491 0%, rgba(240,68,145,.68) 32%, rgba(240,68,145,.12) 76%, transparent 100%);
  box-shadow: 10px 0 28px rgba(240,68,145,.12);
  pointer-events: none;
}
.project-folder-modal .dialog-head {
  position: relative;
  z-index: 1;
  padding: 2px 2px 15px 6px;
  border-bottom: 1px solid rgba(255,255,255,.045);
}
.project-folder-modal .dialog-head .eyebrow {
  color: #ff7daf;
  letter-spacing: .11em;
}
.project-folder-modal .dialog-head h2 { color: #f4f6f8; }
.project-folder-modal .dialog-copy { color: #929ca8; }
.project-folder-modal .dialog-head .icon-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(24,22,28,.42) !important;
  color: #aeb8c3;
}
.project-folder-modal .dialog-head .icon-button:hover,
.project-folder-modal .dialog-head .icon-button:focus-visible {
  background: rgba(255,255,255,.035) !important;
  color: #fff;
}
.project-folder-modal .build-summary {
  margin-top: 14px;
  padding: 12px;
  border: 0 !important;
  border-radius: 13px;
  background: rgba(24,22,28,.38) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
.project-folder-modal .project-folder-input {
  width: 100%;
  min-height: 42px;
  margin-top: 7px;
  padding: 9px 11px;
  border: 0 !important;
  border-radius: 10px;
  outline: 0 !important;
  background: rgba(255,255,255,.035) !important;
  color: #edf0f3;
  box-shadow: inset 0 1px rgba(255,255,255,.02) !important;
}
.project-folder-modal .project-folder-input::placeholder { color: #6f7a86; opacity: 1; }
.project-folder-modal .project-folder-input:focus,
.project-folder-modal .project-folder-input:focus-visible {
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
.project-folder-modal .folder-manager-list {
  gap: 8px;
  margin-top: 14px;
}
.project-folder-modal .folder-manager-row {
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  border: 0 !important;
  border-radius: 12px;
  background: rgba(24,22,28,.40) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
.project-folder-modal .folder-manager-row::before {
  content: "▦";
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(49,22,38,.62);
  color: #ff82b4;
  box-shadow: inset 0 0 0 1px rgba(240,68,145,.24);
  font-size: 13px;
}
.project-folder-modal .folder-manager-row strong { color: #eef1f4; font-size: 12.5px; }
.project-folder-modal .folder-manager-row small { color: #798490; font-size: 11.5px; }
.project-folder-modal .folder-manager-row button,
.project-folder-modal .dialog-actions button {
  min-height: 36px;
  padding: 7px 11px;
  border: 0 !important;
  border-radius: 10px;
  background: rgba(24,22,28,.26) !important;
  color: #c9d0d8;
  box-shadow: inset 0 1px rgba(255,255,255,.02) !important;
}
.project-folder-modal .folder-manager-row button:hover,
.project-folder-modal .folder-manager-row button:focus-visible,
.project-folder-modal .dialog-actions button:hover,
.project-folder-modal .dialog-actions button:focus-visible {
  background: rgba(255,255,255,.035) !important;
  color: #fff;
}
.project-folder-modal .folder-manager-row button:active,
.project-folder-modal .dialog-actions button:active {
  background: linear-gradient(90deg, rgba(240,68,145,.16), rgba(240,68,145,.055) 65%, transparent) !important;
  box-shadow: inset 3px 0 0 #f04491, inset 16px 0 24px -22px rgba(255,102,165,.85) !important;
}
html[dir="rtl"] .project-folder-modal .dialog-card::before { inset: 0 0 0 auto; }
html[dir="rtl"] .project-folder-modal .folder-manager-row button:active,
html[dir="rtl"] .project-folder-modal .dialog-actions button:active {
  background: linear-gradient(270deg, rgba(240,68,145,.16), rgba(240,68,145,.055) 65%, transparent) !important;
  box-shadow: inset -3px 0 0 #f04491, inset -16px 0 24px -22px rgba(255,102,165,.85) !important;
}
@media (max-width: 620px) {
  .project-folder-modal { width: min(420px, calc(100vw - 18px)); border-radius: 15px; }
  .project-folder-modal .dialog-card { padding: 14px; }
  .project-folder-modal .folder-manager-row { grid-template-columns: 32px minmax(0,1fr); }
  .project-folder-modal .folder-manager-row button { grid-column: 2; justify-self: start; }
}

/* Share BaseHeart: use the same dark glass + internal Heart rail language as Dashboard. */
.share-baseheart-modal .dialog-card {
  border-color: transparent !important;
  background:
    radial-gradient(circle at 10% 5%, rgba(240,68,145,.09), transparent 30%),
    rgba(18,16,22,.62) !important;
  -webkit-backdrop-filter: blur(20px) saturate(118%);
  backdrop-filter: blur(20px) saturate(118%);
  box-shadow: 0 30px 92px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.035) !important;
}
.share-baseheart-modal .baseheart-hub-sidebar {
  border-right-color: rgba(255,255,255,.045);
  background: rgba(24,22,28,.40) !important;
  -webkit-backdrop-filter: blur(16px) saturate(116%);
  backdrop-filter: blur(16px) saturate(116%);
}
.share-baseheart-modal .baseheart-hub-content { background: rgba(24,22,28,.07); }
.share-baseheart-modal .baseheart-hub-metric {
  border-color: transparent !important;
  background: rgba(24,22,28,.28) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.share-baseheart-modal .baseheart-hub-body .build-summary {
  border-color: transparent !important;
  background: linear-gradient(90deg, rgba(240,68,145,.13), rgba(24,22,28,.34) 34%, rgba(24,22,28,.18) 100%) !important;
  box-shadow: inset 4px 0 0 #f04491, inset 20px 0 30px -26px rgba(255,102,165,.82), inset 0 1px rgba(255,255,255,.025) !important;
}
.share-baseheart-modal .baseheart-hub-actions { border-top-color: rgba(255,255,255,.045); }
.share-baseheart-modal .baseheart-hub-actions .primary-button,
.share-baseheart-modal .baseheart-hub-actions .secondary-button {
  border-color: transparent !important;
  background: rgba(24,22,28,.27) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
.share-baseheart-modal .baseheart-hub-actions .primary-button {
  background: linear-gradient(90deg, rgba(240,68,145,.15), rgba(240,68,145,.05) 64%, rgba(24,22,28,.18)) !important;
  box-shadow: inset 3px 0 0 #f04491, inset 16px 0 24px -22px rgba(255,102,165,.78) !important;
}
.share-baseheart-modal .baseheart-hub-actions button:hover,
.share-baseheart-modal .baseheart-hub-actions button:focus-visible {
  outline: 0 !important;
  background-color: rgba(255,255,255,.035) !important;
  filter: none !important;
}
html[dir="rtl"] .share-baseheart-modal .baseheart-hub-sidebar { border-right: 0; border-left-color: rgba(255,255,255,.045); }
html[dir="rtl"] .share-baseheart-modal .baseheart-hub-body .build-summary {
  background: linear-gradient(270deg, rgba(240,68,145,.15), rgba(24,22,28,.43) 34%, rgba(24,22,28,.26) 100%) !important;
  box-shadow: inset -4px 0 0 #f04491, inset -20px 0 30px -26px rgba(255,102,165,.9), inset 0 1px rgba(255,255,255,.025) !important;
}
html[dir="rtl"] .share-baseheart-modal .baseheart-hub-actions .primary-button {
  background: linear-gradient(270deg, rgba(240,68,145,.16), rgba(240,68,145,.055) 64%, rgba(24,22,28,.24)) !important;
  box-shadow: inset -3px 0 0 #f04491, inset -16px 0 24px -22px rgba(255,102,165,.85) !important;
}

/* My subscription: the active plan and included benefits stay translucent for every plan tier. */
.subscription-current-card {
  border-color: transparent !important;
  background: linear-gradient(180deg, rgba(24,22,28,.46), rgba(18,16,22,.36)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(112%);
  backdrop-filter: blur(14px) saturate(112%);
  box-shadow: 0 24px 70px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.04) !important;
}
.subscription-current-metrics > div {
  border-color: transparent !important;
  background: rgba(24,22,28,.34) !important;
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
.subscription-benefit-group,
.subscription-benefit-group-active {
  border-color: transparent !important;
  background: rgba(18,16,22,.26) !important;
  -webkit-backdrop-filter: blur(15px) saturate(114%);
  backdrop-filter: blur(15px) saturate(114%);
  box-shadow: 0 18px 54px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.03) !important;
}
.subscription-benefit-group-head {
  border-bottom-color: rgba(255,255,255,.045) !important;
  background: rgba(24,22,28,.18) !important;
}
.subscription-benefit-row {
  border-bottom-color: rgba(255,255,255,.045) !important;
  background: rgba(24,22,28,.18) !important;
}
.subscription-benefit-status,
.subscription-benefit-action {
  border-color: transparent !important;
  background: rgba(24,22,28,.20) !important;
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  backdrop-filter: blur(10px) saturate(110%);
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
.subscription-benefit-status {
  color: #9eb0bf;
}
.subscription-benefit-action {
  color: #dbe3ea !important;
}
.subscription-benefit-action:hover {
  border-color: transparent !important;
  background: rgba(255,255,255,.045) !important;
  color: #fff !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04) !important;
}
.subscription-benefit-action:focus-visible {
  border-color: transparent !important;
  outline: 0 !important;
  background: rgba(255,255,255,.05) !important;
  box-shadow: inset 3px 0 0 rgba(240,68,145,.72), inset 0 1px rgba(255,255,255,.04) !important;
}
html[dir="rtl"] .subscription-benefit-action:focus-visible {
  box-shadow: inset -3px 0 0 rgba(240,68,145,.72), inset 0 1px rgba(255,255,255,.04) !important;
}

/* Business + Agency employee management: people, work, Hearts, access and approvals in one clear workspace. */
.employee-management-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 15px;
  background:
    radial-gradient(circle at 8% 0%, rgba(240,68,145,.16), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(89,119,255,.12), transparent 36%),
    linear-gradient(145deg,rgba(27,25,31,.94),rgba(19,17,23,.92));
  box-shadow: 0 18px 48px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035);
}
.employee-management-hero::after { content:''; position:absolute; width:220px; height:220px; right:-100px; bottom:-150px; border-radius:50%; background:radial-gradient(circle,rgba(242,80,116,.16),transparent 70%); pointer-events:none; }
.employee-management-hero-copy { position:relative; z-index:1; display:grid; gap:5px; }
.employee-management-hero-copy .eyebrow { color:#f488af; font-size:11.5px; font-weight:800; letter-spacing:.11em; }
.employee-management-hero-copy h3 { margin:0; color:#f3f5f7; font-size:24px; letter-spacing:-.035em; }
.employee-management-hero-copy p { max-width:650px; margin:0; color:#8f9aa6; font-size:12px; line-height:1.55; }
.employee-management-metrics { position:relative; z-index:1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.employee-management-metrics .platform-metric { min-height:61px; background:rgba(24,22,28,.48) !important; backdrop-filter:blur(10px); }
.employee-invite-card { background:linear-gradient(180deg,rgba(25,23,29,.72),rgba(20,18,24,.62)) !important; }
.employee-directory-card { gap:13px; background:rgba(20,18,24,.58) !important; }
.employee-directory-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 180px; gap:8px; }
.employee-search-input,.employee-status-filter,.employee-heart-transfer input,.employee-task-controls select,.employee-task-form input,.employee-task-form select,.employee-task-form textarea,.employee-project-mode button,.employee-workspace-panel .control-field input,.employee-workspace-panel .control-field select,.employee-workspace-panel .control-field textarea { min-width:0; min-height:38px; padding:8px 10px; border-radius:9px; background:rgba(16,14,20,.72) !important; color:#e4e9ee !important; font-size:12px; }
.employee-task-form textarea,.employee-workspace-panel .control-field textarea { width:100%; resize:vertical; font-family:inherit; line-height:1.45; }
.employee-directory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.employee-directory-item { min-width:0; display:grid; gap:11px; padding:12px; border-radius:12px; background:linear-gradient(155deg,rgba(29,27,33,.92),rgba(21,19,25,.92)); box-shadow:inset 0 1px rgba(255,255,255,.025); cursor:pointer; transition:transform .18s ease,background .18s ease,box-shadow .18s ease; }
.employee-directory-item:hover,.employee-directory-item:focus-visible { transform:translateY(-2px); background:linear-gradient(155deg,rgba(36,34,40,.96),rgba(24,22,28,.96)); box-shadow:inset 4px 0 #f04491,0 14px 30px rgba(0,0,0,.16); outline:0; }
.employee-directory-item.disabled { opacity:.62; }
.employee-directory-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.employee-directory-head .employee-avatar { width:38px; height:38px; border-radius:11px; background:linear-gradient(145deg,#3a1b2a,#222026); color:#ff8ab8; box-shadow:0 0 20px rgba(240,68,145,.1); }
.employee-directory-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.employee-directory-summary .platform-metric { padding:8px; background:rgba(15,13,19,.48) !important; }
.employee-directory-summary .platform-metric span { font-size:11px; }
.employee-directory-summary .platform-metric strong { font-size:11.5px; }
.employee-directory-foot { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.employee-directory-foot > span { overflow:hidden; color:#778491; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.employee-directory-foot .control-inline-actions { justify-content:flex-end; }
.employee-company-subscription { display:grid; gap:7px; padding:9px; border:1px solid rgba(126,145,166,.14); border-radius:10px; background:rgba(15,13,19,.46); }
.employee-company-subscription-head { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.employee-company-subscription-head > div { min-width:0; display:grid; gap:2px; }
.employee-company-subscription-head strong { color:#dfe5eb; font-size:11.5px; }
.employee-company-subscription-head small,.employee-company-subscription-note { color:#788592; font-size:11px; line-height:1.4; }
.employee-company-plan-select { width:100%; min-height:36px; padding:7px 9px; border-radius:8px; background:rgba(16,14,20,.78) !important; color:#e7ebef !important; font-size:11.5px; }
.employee-company-plan-select:disabled { opacity:.66; cursor:not-allowed; }
.employee-company-plan-review-host:empty { display:none; }
.employee-company-plan-review { display:grid; gap:8px; padding:9px; border:1px solid rgba(126,145,166,.16); border-radius:9px; background:rgba(21,19,25,.62); }
.employee-company-plan-review-head { display:grid; gap:2px; }
.employee-company-plan-review-head strong { color:#e5e9ed; font-size:11.5px; }
.employee-company-plan-review-head small,.employee-company-plan-review-note { color:#7f8b97; font-size:11px; line-height:1.45; }
.employee-company-plan-review-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.employee-company-plan-review-metric { min-width:0; display:grid; gap:2px; padding:7px; border-radius:8px; background:rgba(14,12,18,.48); }
.employee-company-plan-review-metric span { color:#75828f; font-size:10.5px; }
.employee-company-plan-review-metric strong { overflow:hidden; color:#dfe5eb; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.employee-company-plan-review-actions { display:flex; justify-content:flex-end; gap:6px; flex-wrap:wrap; }
@media(max-width:620px){.employee-company-plan-review-metrics{grid-template-columns:1fr}.employee-company-plan-review-actions>*{flex:1 1 140px}}
.employee-approvals-card { background:linear-gradient(150deg,rgba(37,25,34,.60),rgba(20,18,24,.62)) !important; }
.employee-approval-list { display:grid; gap:7px; }
.employee-approval-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px; border-radius:10px; background:rgba(17,15,21,.56); }
.employee-approval-row > div:first-child { min-width:0; display:grid; gap:3px; }
.employee-approval-row strong { overflow:hidden; color:#dfe5eb; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.employee-approval-row small { color:#747f8b; font-size:11px; }
.status-pill.warning { color:#d9b77d; background:rgba(78,57,25,.46); }

.employee-management-modal { width:min(1280px,calc(100vw - 28px)); }
.employee-management-modal .baseheart-hub-shell { grid-template-columns:250px minmax(0,1fr); min-height:680px; }
.employee-management-modal .baseheart-hub-content { padding-bottom:22px; }
.employee-workspace-shell { min-width:0; display:grid; gap:12px; }
.employee-workspace-tabs { display:flex; gap:5px; overflow-x:auto; padding:4px; border-radius:11px; background:rgba(15,13,19,.62); scrollbar-width:none; }
.employee-workspace-tabs::-webkit-scrollbar { display:none; }
.employee-workspace-tabs button { flex:0 0 auto; min-height:36px; padding:7px 10px; border-radius:8px; color:#8995a1; font-size:11.5px; font-weight:700; white-space:nowrap; }
.employee-workspace-tabs button.active { color:#fff !important; background:linear-gradient(90deg,rgba(240,68,145,.18),rgba(240,68,145,.035)) !important; box-shadow:inset 3px 0 #f04491 !important; }
.employee-workspace-panel { min-width:0; display:grid; gap:11px; }
.employee-detail-section { min-width:0; display:grid; gap:11px; padding:13px; border-radius:12px; background:linear-gradient(160deg,rgba(26,24,30,.74),rgba(18,16,22,.68)); box-shadow:inset 0 1px rgba(255,255,255,.024); }
.employee-section-title,.employee-subsection-title { color:#edf1f5; font-size:12.5px; font-weight:760; }
.employee-subsection-title { padding-top:4px; color:#abb5bf; font-size:11.5px; }
.employee-detail-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.employee-detail-metrics .platform-metric { background:rgba(15,13,19,.52) !important; }
.employee-quick-actions { display:flex; flex-wrap:wrap; gap:7px; }
.employee-task-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:11px; border-radius:10px; background:rgba(14,12,18,.46); }
.employee-task-description { grid-column:span 2; }
.employee-task-form > button { align-self:end; min-height:38px; }
.employee-task-list { display:grid; gap:7px; }
.employee-task-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 11px; border-radius:10px; background:rgba(16,14,20,.58); box-shadow:inset 3px 0 #485361; }
.employee-task-card.employee-task-doing { box-shadow:inset 3px 0 #5680cf; }
.employee-task-card.employee-task-review { box-shadow:inset 3px 0 #d09d54; }
.employee-task-card.employee-task-done { opacity:.72; box-shadow:inset 3px 0 #4d9b6a; }
.employee-task-copy { min-width:0; display:grid; gap:4px; }
.employee-task-copy > strong { overflow:hidden; color:#e4e8ed; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.employee-task-copy > small { overflow:hidden; color:#77828e; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.employee-task-meta { display:flex; flex-wrap:wrap; gap:5px; }
.employee-task-meta > span { padding:3px 6px; border-radius:999px; background:rgba(255,255,255,.035); color:#8f9aa5; font-size:11px; }
.employee-priority.high,.employee-priority.urgent { color:#f1a2b7; background:rgba(111,36,59,.32); }
.employee-priority.medium { color:#c7b58d; background:rgba(84,66,35,.30); }
.employee-task-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.employee-task-controls select { width:132px; }
.employee-project-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.employee-project-mode button { min-height:42px; text-align:center; }
.employee-project-mode button.active { color:#fff !important; background:linear-gradient(90deg,rgba(240,68,145,.16),rgba(240,68,145,.035)) !important; box-shadow:inset 3px 0 #f04491 !important; }
.employee-project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.employee-project-option { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:center; padding:10px; border-radius:9px; background:rgba(16,14,20,.52); color:#cbd2d9; cursor:pointer; }
.employee-project-option input { accent-color:#f04491; }
.employee-project-option > span { min-width:0; display:grid; gap:2px; }
.employee-project-option strong { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.employee-project-option small { overflow:hidden; color:#727e89; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.employee-heart-transfer { display:grid; grid-template-columns:minmax(120px,1fr) auto auto; gap:7px; }
.infrastructure-scope-banner { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:center; width:100%; min-width:0; padding:10px 12px; border:1px solid rgba(126,145,166,.24); border-radius:10px; background:rgba(17,15,21,.62); text-align:left; }
.infrastructure-scope-banner.company { border-color:rgba(143,109,239,.38); background:rgba(52,37,91,.28); }
.infrastructure-scope-banner.private { border-color:rgba(103,147,190,.28); }
.infrastructure-scope-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:9px; background:rgba(255,255,255,.055); color:#cbd5df; font-size:15px; font-weight:760; }
.infrastructure-scope-banner.company .infrastructure-scope-icon { color:#c9b7ff; background:rgba(138,103,229,.16); }
.infrastructure-scope-copy { min-width:0; display:grid; gap:3px; }
.infrastructure-scope-copy strong { color:#edf1f5; font-size:12px; font-weight:760; }
.infrastructure-scope-copy small { color:#8996a3; font-size:11px; line-height:1.45; overflow-wrap:anywhere; }
.employee-role-preset { display:grid; grid-template-columns:minmax(190px,320px); }
.employee-role-context { display:grid; gap:7px; padding:11px 12px; border:1px solid rgba(130,147,165,.18); border-radius:10px; background:rgba(16,14,20,.52); }
.employee-role-state { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.employee-role-state > strong { color:#e9edf2; font-size:12.5px; }
.employee-role-context > p { margin:0; color:#a8b2bc; font-size:11.5px; line-height:1.5; }
.employee-role-context > small,.employee-permission-note { margin:0; color:#77838f; font-size:11px; line-height:1.5; }
.employee-permission-scope { margin-top:1px; }
.employee-workspace-panel .employee-settings-grid { grid-template-columns:repeat(3,minmax(0,1fr)); padding:0; }
.employee-workspace-panel .permission-option { background:rgba(16,14,20,.52); }
html[dir="rtl"] .employee-management-hero,html[dir="rtl"] .employee-directory-item,html[dir="rtl"] .employee-workspace-shell,html[dir="rtl"] .employee-detail-section,html[dir="rtl"] .infrastructure-scope-banner { text-align:right; }
html[dir="rtl"] .employee-directory-item:hover,html[dir="rtl"] .employee-directory-item:focus-visible { box-shadow:inset -4px 0 #f04491,0 14px 30px rgba(0,0,0,.16); }
html[dir="rtl"] .employee-workspace-tabs button.active,html[dir="rtl"] .employee-project-mode button.active { box-shadow:inset -3px 0 #f04491 !important; }
html[dir="rtl"] .employee-task-card { box-shadow:inset -3px 0 #485361; }
html[dir="rtl"] .employee-task-card.employee-task-doing { box-shadow:inset -3px 0 #5680cf; }
html[dir="rtl"] .employee-task-card.employee-task-review { box-shadow:inset -3px 0 #d09d54; }
html[dir="rtl"] .employee-task-card.employee-task-done { box-shadow:inset -3px 0 #4d9b6a; }
@media (max-width:980px) { .employee-management-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } .employee-directory-grid { grid-template-columns:1fr; } .employee-detail-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) { .employee-management-modal .baseheart-hub-shell { grid-template-columns:1fr; min-height:0; } .employee-management-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .employee-directory-toolbar,.employee-task-form,.employee-project-grid,.employee-heart-transfer,.employee-workspace-panel .employee-settings-grid { grid-template-columns:1fr; } .employee-task-description { grid-column:auto; } .employee-task-card,.employee-approval-row { grid-template-columns:1fr; align-items:stretch; } .employee-task-controls,.employee-approval-row .control-inline-actions { justify-content:stretch; } .employee-task-controls > *, .employee-approval-row .control-inline-actions button { width:100%; } .employee-directory-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .employee-directory-foot { grid-template-columns:1fr; } .employee-directory-foot .control-inline-actions { justify-content:stretch; } .infrastructure-scope-banner { grid-template-columns:28px minmax(0,1fr); padding:9px 10px; } .infrastructure-scope-icon { width:28px; height:28px; } .employee-role-state { align-items:flex-start; flex-direction:column; } }
body[data-preview-device="mobile"] .infrastructure-scope-banner { grid-template-columns:28px minmax(0,1fr); padding:9px 10px; }
body[data-preview-device="mobile"] .employee-management-metrics,body[data-preview-device="mobile"] .employee-detail-metrics,body[data-preview-device="mobile"] .employee-directory-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
body[data-preview-device="mobile"] .employee-directory-toolbar,body[data-preview-device="mobile"] .employee-directory-grid,body[data-preview-device="mobile"] .employee-task-form,body[data-preview-device="mobile"] .employee-project-grid,body[data-preview-device="mobile"] .employee-heart-transfer,body[data-preview-device="mobile"] .employee-workspace-panel .employee-settings-grid { grid-template-columns:1fr; }

/* BaseHeart brand lockup in the sidebar. The moving color sweep travels from B to t. */
.sidebar .baseheart-brand-switcher {
  min-height: 64px;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 10px;
  padding: 8px 9px;
}
.baseheart-brand-mark {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.baseheart-brand-mark::before {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  background: radial-gradient(circle,rgba(255,48,166,.20),rgba(113,59,255,.08) 55%,transparent 76%);
  filter: blur(7px);
  animation: baseheart-brand-glow 3.8s ease-in-out infinite;
}
.baseheart-brand-mark svg {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(255,49,167,.48)) drop-shadow(0 0 12px rgba(121,58,255,.20));
}
.baseheart-brand-mark path {
  fill: none;
  stroke: url(#baseheartBrandGradient);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.baseheart-wordmark {
  align-content: center;
  gap: 1px;
  transform-origin: left center;
  animation: baseheart-wordmark-arrive .6s cubic-bezier(.2,.78,.18,1) .08s both;
}
.sidebar .baseheart-wordmark .baseheart-wordmark-text {
  width: max-content;
  max-width: 100%;
  overflow: visible;
  color: transparent;
  background: linear-gradient(90deg,#f7f8fb 0%,#f7f8fb 34%,#ff45ae 44%,#f225d2 50%,#8b43ff 57%,#f7f8fb 68%,#f7f8fb 100%);
  background-size: 260% 100%;
  background-position: 130% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  text-overflow: clip;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 780;
  letter-spacing: -.025em;
  line-height: 1.05;
  filter: drop-shadow(0 0 8px rgba(240,68,145,.08));
  animation: baseheart-wordmark-sweep 4.4s linear infinite;
}
.sidebar .baseheart-wordmark small {
  margin-top: 2px;
  color: #6f7b89;
  font-size: 11.5px;
  letter-spacing: .02em;
}
.sidebar .baseheart-brand-switcher:hover .baseheart-brand-mark svg,
.sidebar .baseheart-brand-switcher:focus-visible .baseheart-brand-mark svg {
  filter: drop-shadow(0 0 7px rgba(255,49,167,.62)) drop-shadow(0 0 16px rgba(121,58,255,.30));
}
@keyframes baseheart-wordmark-sweep {
  0% { background-position: 132% 50%; }
  100% { background-position: -32% 50%; }
}
@keyframes baseheart-brand-glow {
  0%,100% { opacity:.58; transform:scale(.94); }
  50% { opacity:1; transform:scale(1.08); }
}
@keyframes baseheart-wordmark-arrive {
  0% { opacity:0; transform:translateX(-6px); }
  100% { opacity:1; transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .baseheart-brand-mark::before,
  .baseheart-wordmark,
  .sidebar .baseheart-wordmark .baseheart-wordmark-text { animation: none !important; }
  .sidebar .baseheart-wordmark .baseheart-wordmark-text {
    background: linear-gradient(90deg,#f7f8fb 0 38%,#ff43ad 62%,#733cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}
@media (max-width:720px) {
  .sidebar .baseheart-brand-switcher { min-height: 60px; }
  .baseheart-brand-mark { width: 40px; height: 40px; }
  .baseheart-brand-mark svg { width: 38px; height: 38px; }
  .sidebar .baseheart-wordmark .baseheart-wordmark-text { font-size: 14px; }
}
html[dir="rtl"] .sidebar .baseheart-wordmark { text-align: left; }

/* GitHub Sync: repository and branch selection use BaseHeart's compact source-control language. */
.github-sync-card { gap: 14px; }
.github-sync-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
.github-sync-fields { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:10px; }
.github-sync-fields .control-field { margin:0; }
.github-sync-fields select { width:100%; min-height:40px; }
.github-repository-create-field { grid-column:1 / -1; }
.github-field-message { min-height:12px; color:#72808c; font-size:11px; line-height:1.35; }
.github-field-message.error { color:#e59a77; }
.github-repository-create-field input[aria-invalid="true"],.github-branch-create-field input[aria-invalid="true"] { border-color:#87513f; box-shadow:0 0 0 2px rgba(229,154,119,.08); }
.github-sync-note { display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:10px; background:rgba(24,22,28,.34); color:#81909d; font-size:11.5px; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.github-sync-note > span:first-child { width:22px; height:22px; display:grid; place-items:center; border-radius:7px; background:rgba(103,177,132,.1); color:#83c79c; }
.github-source-guidance { display:flex; align-items:center; gap:8px; min-height:34px; padding:8px 10px; border:1px solid rgba(213,166,96,.14); border-radius:10px; background:rgba(213,166,96,.045); color:#9aa6b0; font-size:11.5px; line-height:1.4; }
.github-source-guidance.success { border-color:rgba(103,177,132,.16); background:rgba(103,177,132,.05); color:#a8b8ae; }
.github-sync-actions { align-items:center; }
.github-sync-actions .primary-button:disabled { opacity:.42; cursor:not-allowed; }
.github-repository-policy { display:grid; gap:10px; padding:12px; border-radius:12px; border:1px solid rgba(214,206,232,.13); background:rgba(24,22,28,.3); }
.github-repository-policy > strong { color:#e8eef4; font-size:12px; }
.github-repository-policy > p { margin:0; color:#82909d; font-size:11.5px; line-height:1.5; }
.github-policy-grid { max-height:190px; overflow:auto; padding-inline-end:3px; }
.github-branch-create-field { min-width:0; }
.github-sync-fields > .secondary-button { align-self:end; min-height:40px; }
html[dir="rtl"] .github-repository-policy,html[dir="rtl"] .github-source-guidance { text-align:right; }
@media (max-width:760px) { .github-sync-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .github-sync-fields { grid-template-columns:1fr; } .github-sync-fields > .secondary-button { width:100%; } }
body[data-preview-device="mobile"] .github-sync-metrics { grid-template-columns:1fr 1fr; }
body[data-preview-device="mobile"] .github-sync-fields { grid-template-columns:1fr; }

/* Advanced BaseHeart workflows: Mission Mode, project budgets, Point & Edit, regression QA and client review. */
.point-edit-input,.client-review-input,.regression-form textarea { width:100%; min-height:96px; resize:vertical; padding:10px 11px; border:1px solid rgba(214,206,232,.18); border-radius:10px; background:rgba(15,13,19,.58); color:#e9eef3; font:inherit; font-size:12px; line-height:1.5; outline:0; }
.point-edit-input:focus,.client-review-input:focus,.regression-form textarea:focus { border-color:rgba(240,68,145,.48); box-shadow:0 0 0 2px rgba(240,68,145,.08); }
.project-budget-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(180px,.8fr) auto; gap:8px; align-items:end; }
.project-budget-stop { min-height:38px; align-items:center; border-radius:9px; background:rgba(24,22,28,.32) !important; }
.point-edit-shell { display:grid; gap:12px; }
.selected-editable[data-point-edit-instruction] { box-shadow:0 0 0 2px rgba(240,68,145,.78),0 0 26px rgba(240,68,145,.16) !important; }
.regression-form { display:grid; grid-template-columns:minmax(140px,.7fr) minmax(240px,1.4fr) auto auto; gap:8px; align-items:end; margin-top:10px; }
.regression-form > input { min-width:0; min-height:40px; padding:8px 10px; border:1px solid rgba(214,206,232,.18); border-radius:9px; background:rgba(15,13,19,.58); color:#e6ebf0; font-size:12px; outline:0; }
.regression-form > textarea { min-height:68px; }
.production-ready-status { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 12px; border-radius:10px; background:linear-gradient(90deg,rgba(240,68,145,.11),rgba(68,91,170,.06)),rgba(24,22,28,.38); box-shadow:inset 3px 0 rgba(240,68,145,.74),inset 0 1px rgba(255,255,255,.03); }
.production-ready-status > strong { color:#eef3f7; font-size:12.5px; }
.production-ready-status > small { max-width:70%; color:#82909d; font-size:11.5px; line-height:1.45; text-align:right; }
.client-review-shell { display:grid; gap:12px; }
.client-review-preview { position:relative; overflow:hidden; display:grid; gap:5px; min-height:120px; align-content:end; padding:16px; border-radius:13px; background:radial-gradient(circle at 82% 20%,rgba(105,99,255,.17),transparent 34%),radial-gradient(circle at 16% 18%,rgba(240,68,145,.14),transparent 32%),linear-gradient(145deg,rgba(27,25,31,.94),rgba(18,16,22,.94)); box-shadow:inset 0 1px rgba(255,255,255,.035); }
.client-review-preview::before { content:'♥'; position:absolute; right:18px; top:8px; color:rgba(240,68,145,.12); font-family:Georgia,serif; font-size:84px; line-height:1; filter:drop-shadow(0 0 18px rgba(240,68,145,.14)); }
.client-review-preview > * { position:relative; z-index:1; }
.client-review-preview > strong { color:#f1f4f7; font-size:14px; }
.client-review-preview > p { max-width:70%; margin:0; color:#91a0ae; font-size:11.5px; line-height:1.5; }
.client-review-preview > .status-pill { justify-self:start; }
.client-review-comments { display:grid; gap:7px; }
.client-review-comment { display:grid; gap:4px; padding:10px 11px; border-radius:10px; background:rgba(24,22,28,.38); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.client-review-comment strong { color:#e2e8ee; font-size:12px; }
.client-review-comment p { margin:0; color:#a1adb8; font-size:11.5px; line-height:1.5; }
.client-review-comment small { color:#697682; font-size:11px; }
@media (max-width:900px) { .project-budget-grid,.regression-form { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .project-budget-grid,.regression-form { grid-template-columns:1fr; } .production-ready-status { display:grid; } .production-ready-status > small { max-width:none; text-align:left; } }
body[data-preview-device="mobile"] .project-budget-grid,body[data-preview-device="mobile"] .regression-form { grid-template-columns:1fr; }
html[dir="rtl"] .production-ready-status { box-shadow:inset -3px 0 rgba(240,68,145,.74),inset 0 1px rgba(255,255,255,.03); }
html[dir="rtl"] .production-ready-status > small { text-align:left; }

/* Real-device responsive shell. Preview data attributes remain deliberate QA overrides. */
@media (max-width:1024px) {
  body:not([data-preview-device]) .app-shell { width:100%; min-width:0; }
  body:not([data-preview-device]) .sidebar { padding-top:max(14px,env(safe-area-inset-top)); padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  body:not([data-preview-device]) .mobile-sidebar-toggle { top:max(12px,env(safe-area-inset-top)); left:max(12px,env(safe-area-inset-left)); }
  body:not([data-preview-device]) .responsive-preview-control { top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); max-width:calc(100vw - 72px); }
  body:not([data-preview-device]) .content-wrap { padding-top:calc(70px + env(safe-area-inset-top)); padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  html[dir="rtl"] body:not([data-preview-device]) .sidebar { left:auto; right:0; transform:translateX(101%); }
  html[dir="rtl"] body:not([data-preview-device]).sidebar-open .sidebar { transform:translateX(0); }
  html[dir="rtl"] body:not([data-preview-device]) .main-content { margin-left:0; margin-right:0; }
  html[dir="rtl"] body:not([data-preview-device]) .mobile-sidebar-toggle { left:auto; right:max(12px,env(safe-area-inset-right)); }
  html[dir="rtl"] body:not([data-preview-device]) .mobile-backdrop { inset:0 250px 0 0; }
  html[dir="rtl"] body:not([data-preview-device]) .responsive-preview-control { right:auto; left:max(12px,env(safe-area-inset-left)); }
}

@media (max-width:620px) {
  body:not([data-preview-device]) .composer-footer { align-items:stretch; flex-wrap:wrap; }
  body:not([data-preview-device]) .composer-left { width:100%; display:grid; grid-template-columns:44px minmax(0,.82fr) minmax(0,1.18fr); align-items:center; gap:7px; }
  body:not([data-preview-device]) .composer-left > * { min-width:0; }
  body:not([data-preview-device]) .heart-estimate { grid-column:2 / -1; width:auto; padding-left:0; white-space:normal; }
  body:not([data-preview-device]) .build-button { width:100%; min-height:44px; }
  body:not([data-preview-device]) .icon-button,
  body:not([data-preview-device]) .composer-level-select,
  body:not([data-preview-device]) .utility-button,
  body:not([data-preview-device]) .responsive-preview-button { min-height:44px; }
  body:not([data-preview-device]) .heart-balance-button { min-height:44px; }
  body:not([data-preview-device]) .modal { width:min(360px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; }
  body:not([data-preview-device]) .command-modal { transform:none; }
  body:not([data-preview-device]) .project-settings-modal .dialog-card { width:100%; max-width:100%; }
  body:not([data-preview-device]) .project-settings-grid,
  body:not([data-preview-device]) .project-settings-meta { grid-template-columns:1fr; }
  body:not([data-preview-device]) .project-settings-grid .control-field { grid-column:1 !important; }
  body:not([data-preview-device]) .project-settings-danger .control-inline-actions { display:grid; grid-template-columns:1fr; }
  body:not([data-preview-device]) .toast-region { left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); }
  body:not([data-preview-device]) .toast { min-width:0; max-width:none; width:100%; }
}

@media (max-width:520px) {
  body:not([data-preview-device]) .responsive-preview-control { gap:4px; }
  body:not([data-preview-device]) .responsive-preview-control .notification-button { display:inline-flex; width:36px; min-height:36px; }
  body:not([data-preview-device]) .preview-device-label { display:none; }
  body:not([data-preview-device]) .responsive-preview-menu,
  body:not([data-preview-device]) .language-menu { max-width:calc(100vw - 24px); max-height:calc(100dvh - 76px); }
}

/* Loveable reference integration: persistent chat rail + dedicated live preview. */
.editor-shell { grid-template-rows:48px minmax(0,1fr); background:#242422; }
.editor-skip-link { position:fixed; z-index:220; top:6px; left:8px; transform:translateY(-160%); min-height:34px; display:flex; align-items:center; padding:6px 10px; border-radius:8px; background:#f5f5f1; color:#1d1d1b; font-size:12.5px; font-weight:750; text-decoration:none; transition:transform .14s ease; }
.editor-skip-link:focus { transform:translateY(0); outline:2px solid var(--heart); outline-offset:2px; }
.editor-header { min-height:48px; grid-template-columns:minmax(250px,1fr) auto minmax(290px,1fr); gap:10px; padding:6px 12px 6px 8px; border-bottom:1px solid rgba(255,255,255,.075); background:#242422; }
.editor-header-left,.editor-header-center,.editor-header-actions { gap:6px; }
.editor-header .editor-icon-button { width:30px; height:30px; border-color:transparent; border-radius:999px; background:transparent; }
.editor-header .editor-icon-button:hover,.editor-header .editor-icon-button:focus-visible { border-color:rgba(255,255,255,.14); background:#30302e; outline:0; }
.editor-chat-toggle { flex:0 0 auto; background:#f5f5f1!important; color:#242422!important; box-shadow:0 1px 0 rgba(255,255,255,.45),0 4px 14px rgba(0,0,0,.18); }
.editor-workspace { position:relative; min-height:0; overflow:hidden; display:grid; grid-template-columns:clamp(380px,29.55vw,560px) minmax(0,1fr); background:#242422; transition:grid-template-columns .18s ease; }
body.editor-chat-collapsed .editor-workspace { grid-template-columns:0 minmax(0,1fr); }
.editor-chat-panel { min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column; border-right:1px solid rgba(255,255,255,.075); background:#242422; opacity:1; transform:translateX(0); transition:opacity .14s ease,transform .18s ease; }
body.editor-chat-collapsed .editor-chat-panel { opacity:0; pointer-events:none; transform:translateX(-18px); border-right-color:transparent; }
.editor-panel-tabs { min-height:44px; align-items:center; gap:2px; padding:6px 10px; border-bottom:1px solid rgba(255,255,255,.065); }
.editor-panel-tabs button { min-height:30px; padding:4px 9px; border-radius:7px; font-size:12px; }
.editor-chat-thread { padding:18px 18px 12px; gap:18px; scrollbar-gutter:stable; overscroll-behavior:contain; touch-action:pan-y; -webkit-overflow-scrolling:touch; overflow-anchor:none; }
.editor-chat-thread .empty-state { max-width:360px; margin:14vh auto 0; padding:18px; border:0; background:transparent; text-align:center; }
.editor-chat-thread .chat-message { gap:7px; padding:0 2px 14px; border:0; border-bottom:1px solid rgba(255,255,255,.055); border-radius:0; background:transparent; }
.editor-chat-thread .user-message { padding:11px 12px; border:1px solid rgba(255,255,255,.075); border-radius:12px; background:#2b2b29; }
.editor-chat-thread .message-meta { justify-content:flex-start; gap:7px; }
.editor-chat-thread .chat-message p { color:#b8b8b1; font-size:12.5px; line-height:1.62; white-space:pre-wrap; overflow-wrap:anywhere; }
.editor-chat-latest{position:sticky;z-index:4;bottom:8px;justify-self:center;min-height:34px;max-width:calc(100% - 24px);padding:6px 11px;border:1px solid rgba(242,80,116,.28);border-radius:999px;background:#f3f1ed;color:#242422;box-shadow:0 8px 22px rgba(0,0,0,.28);font-size:12px;font-weight:780;line-height:1.2;cursor:pointer}
.editor-chat-latest[hidden]{display:none}.editor-chat-latest:hover{background:#fff}.editor-chat-latest:focus-visible{outline:2px solid var(--heart);outline-offset:2px}
.suggested-actions { gap:5px; padding:9px 12px; border-top:1px solid rgba(255,255,255,.055); }
.editor-composer { margin:10px 12px 6px; padding:10px; border:1px solid rgba(255,255,255,.16); border-radius:14px; background:#2a2a28; box-shadow:0 10px 30px rgba(0,0,0,.14); }
.editor-composer:focus-within { border-color:rgba(242,80,116,.46); box-shadow:0 0 0 2px rgba(242,80,116,.08),0 10px 30px rgba(0,0,0,.16); }
.editor-composer textarea { min-height:76px; max-height:220px; resize:none; color:#efefeb; font-size:13px; line-height:1.55; }
.editor-composer-footer { padding-top:7px; }
.editor-composer-footer > div { flex:1 1 auto; flex-wrap:nowrap; }
.editor-composer-footer select { flex:0 1 auto; min-width:86px; max-width:160px; background:#242422; }
.editor-agent-ai-notice { margin:0 14px 10px; color:#64645e; font-size:11px; }
.editor-stage-column { min-width:0; min-height:0; position:relative; display:grid; grid-template-rows:44px minmax(0,1fr) auto; background:#1b1b1a; }
.editor-toolbar { min-height:44px; grid-template-columns:minmax(118px,1fr) minmax(0,auto) minmax(104px,1fr); gap:6px; padding:6px 8px; border-bottom:1px solid rgba(255,255,255,.075); background:#242422; }
.preview-address-bar { width:min(390px,31vw); height:30px; border-color:rgba(255,255,255,.105); border-radius:8px; background:#1d1d1c; }
.editor-intelligence-tools { border-left-color:rgba(255,255,255,.08); }
.editor-intelligence-button { min-height:28px; padding:4px 7px; border-color:rgba(255,255,255,.08); background:#292927; }
.editor-stage { min-width:0; min-height:0; overflow:hidden; display:grid; place-items:stretch; padding:0; background:#191918; background-image:none; }
.editor-stage[data-editor-device="computer"] .app-canvas { width:100%; height:100%; min-height:0; border:0; border-radius:0; background:#fff; box-shadow:none; }
.editor-stage[data-editor-device="computer"] .generated-project-preview { width:100%; height:100%; min-height:100%; }
.editor-stage[data-editor-device="computer"] .project-preview-empty,.editor-stage[data-editor-device="computer"] .project-preview-status { min-height:100%; height:100%; }
.editor-stage[data-editor-device="tablet"],.editor-stage[data-editor-device="mobile"] { overflow:auto; place-items:start center; padding:22px; background:#191918; }
.editor-stage[data-editor-device="tablet"] .app-canvas,.editor-stage[data-editor-device="mobile"] .app-canvas { height:auto; border:1px solid #373733; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.28); }
.editor-stage[data-editor-device="tablet"] .app-canvas { width:min(768px,100%); min-height:900px; }
.editor-stage[data-editor-device="mobile"] .app-canvas { width:min(390px,100%); min-height:780px; }
.editor-stage[data-editor-device="tablet"] .generated-project-preview { min-height:900px; height:900px; }
.editor-stage[data-editor-device="mobile"] .generated-project-preview { min-height:780px; height:780px; }
.editor-inspector { display:none; position:absolute; z-index:18; top:56px; right:12px; bottom:12px; width:min(300px,calc(100% - 24px)); overflow-y:auto; padding:12px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:#242422; box-shadow:0 22px 70px rgba(0,0,0,.38); }
body.editor-editing .editor-inspector { display:block; }
.history-drawer { inset:48px 0 0 auto; }
.build-progress { position:relative; z-index:5; min-height:34px; background:#20201f; }
html[dir="rtl"] body.editor-chat-collapsed .editor-chat-panel { transform:translateX(18px); }
html[dir="rtl"] .editor-chat-panel { border-left:1px solid rgba(255,255,255,.075); border-right:0; }
html[dir="rtl"] .editor-inspector { left:12px; right:auto; }
html[dir="rtl"] .editor-skip-link { left:auto; right:8px; }
@media (max-width:1280px) {
  .editor-workspace { grid-template-columns:clamp(350px,34vw,440px) minmax(0,1fr); }
  .editor-header-center .editor-subtle-button { display:none; }
  .editor-intelligence-tools { display:flex; flex:0 0 auto; }
  .editor-intelligence-button { padding:4px 6px; }
  .editor-toolbar { grid-template-columns:auto minmax(0,1fr) auto; }
  .editor-mode-tabs,.editor-device-tabs { min-width:max-content; }
  .editor-mode-tabs { padding-inline-end:10px; }
  .editor-toolbar-center { width:100%; min-width:0; overflow:hidden; }
  .editor-toolbar-center .editor-icon-button { flex:0 0 34px; }
  .preview-address-bar { flex:1 1 auto; min-width:0; width:100%; }
}
@media (max-width:980px) {
  .editor-shell { height:100dvh; min-height:100dvh; }
  body.editor-open { overflow:hidden; }
  .editor-header { position:relative; top:auto; grid-template-columns:minmax(220px,1fr) auto; }
  .editor-header-center { display:none; }
  .editor-header-actions #editorShareBtn { display:none; }
  .editor-workspace { min-height:0; grid-template-columns:360px minmax(0,1fr); }
  .editor-toolbar { grid-template-columns:auto minmax(0,1fr) auto; }
  .preview-address-bar { display:none; }
  .editor-toolbar-center .editor-icon-button { display:none; }
  .editor-intelligence-tools { display:flex; }
}
@media (max-width:760px) {
  .editor-header { grid-template-columns:minmax(0,1fr) auto; padding-inline:8px; }
  .editor-header-actions .collab-avatars,.editor-header-actions #editorShareBtn { display:none; }
  .editor-header-actions #editorControlCenterBtn { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; min-width:36px; padding:0; overflow:hidden; font-size:0; }
  .editor-header-actions #editorControlCenterBtn::after { content:'◆'; font-size:13px; line-height:1; }
  .editor-project-copy span { display:none; }
  .editor-workspace,body.editor-chat-collapsed .editor-workspace { display:grid; grid-template-columns:minmax(0,1fr); }
  .editor-chat-panel { position:absolute; z-index:30; inset:0 auto 0 0; width:min(92vw,430px); border-right:1px solid rgba(255,255,255,.12); box-shadow:18px 0 55px rgba(0,0,0,.38); transform:translateX(0); }
  body.editor-chat-collapsed .editor-chat-panel { opacity:0; pointer-events:none; transform:translateX(-102%); }
  html[dir="rtl"] .editor-chat-panel { inset:0 0 0 auto; box-shadow:-18px 0 55px rgba(0,0,0,.38); }
  html[dir="rtl"] body.editor-chat-collapsed .editor-chat-panel { transform:translateX(102%); }
  .editor-stage-column { min-height:0; }
  .editor-toolbar { grid-template-columns:auto minmax(0,1fr) auto; }
  .editor-toolbar-center { order:initial; grid-column:auto; flex-wrap:nowrap; justify-content:center; }
  .editor-toolbar-center .editor-icon-button { display:none; }
  .preview-address-bar { min-width:0; width:100%; }
  .editor-device-tabs button:not(.active) { display:none; }
  .editor-stage[data-editor-device="computer"] { overflow:auto; }
  .editor-stage[data-editor-device="computer"] .app-canvas,.editor-stage[data-editor-device="computer"] .generated-project-preview { min-width:760px; }
  .editor-inspector { top:54px; right:8px; bottom:8px; width:calc(100% - 16px); }
  html[dir="rtl"] .editor-inspector { left:8px; right:auto; }
}
@media (max-width:520px) {
  .editor-header #publishBtn { min-width:70px; }
  .editor-toolbar { grid-template-columns:auto minmax(0,1fr); }
  .editor-device-tabs { display:none; }
  .editor-mode-tabs button { padding-inline:6px; font-size:11.5px; }
  .editor-chat-panel { width:100%; }
  .editor-chat-thread { padding:14px 12px 10px; }
  .editor-composer-footer > div { flex-wrap:wrap; }
  .editor-composer-footer select { flex:1 1 105px; max-width:none; }
}
.editor-mobile-view-switch { display:none; }
.editor-mobile-view-switch[hidden] { display:none!important; }

@media (max-width:760px) and (orientation:portrait) {
  body.editor-open { overflow:hidden; overscroll-behavior:none; }
  .editor-shell { height:var(--editor-visual-height,100dvh); min-height:0; max-height:var(--editor-visual-height,100dvh); grid-template-rows:48px 42px minmax(0,1fr); overflow:hidden; }
  .editor-header { min-height:48px; grid-template-columns:minmax(0,1fr) auto; gap:6px; padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left)); }
  .editor-header-left { min-width:0; gap:5px; }
  .editor-header-actions { min-width:0; gap:5px; }
  .editor-chat-toggle,.editor-header-actions .collab-avatars,.editor-header-actions #editorShareBtn { display:none; }
  .editor-header #publishBtn { min-width:68px; min-height:36px; padding-inline:10px; }
  .editor-project-copy strong { font-size:12.5px; }
  .editor-mobile-view-switch { min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:4px; align-items:center; padding:5px max(8px,env(safe-area-inset-right)) 5px max(8px,env(safe-area-inset-left)); border-bottom:1px solid rgba(255,255,255,.075); background:#20201f; }
  .editor-mobile-view-switch button { min-width:0; min-height:32px; border:1px solid transparent; border-radius:8px; background:transparent; color:#8c8c86; font:750 9px/1 inherit; cursor:pointer; }
  .editor-mobile-view-switch button.active { border-color:rgba(242,80,116,.34); background:#302229; color:#fff; }
  .editor-mobile-view-switch button:focus-visible { outline:2px solid var(--heart); outline-offset:1px; }
  .editor-workspace,body.editor-chat-collapsed .editor-workspace { position:relative; height:100%; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; }
  .editor-chat-panel,.editor-stage-column { grid-area:1 / 1; position:relative; inset:auto; width:100%; height:100%; min-width:0; min-height:0; transform:none; transition:opacity .12s ease,visibility .12s ease; }
  .editor-chat-panel { z-index:2; grid-template-rows:auto minmax(0,1fr) auto auto; border-right:0; border-bottom:0; box-shadow:none; }
  .editor-stage-column { z-index:1; grid-template-rows:42px minmax(0,1fr) auto; }
  .editor-shell[data-mobile-view="preview"] .editor-chat-panel { visibility:hidden; opacity:0; pointer-events:none; transform:none; }
  .editor-shell[data-mobile-view="chat"] .editor-stage-column { visibility:hidden; opacity:0; pointer-events:none; }
  .editor-shell[data-mobile-view="chat"] .editor-chat-panel,.editor-shell[data-mobile-view="preview"] .editor-stage-column { visibility:visible; opacity:1; pointer-events:auto; }
  .editor-panel-tabs { position:relative; top:auto; min-height:42px; padding:5px 8px; }
  .editor-chat-thread { min-height:0; padding:12px 10px 8px; gap:12px; scrollbar-gutter:auto; overscroll-behavior:contain; }
  .editor-chat-thread .empty-state { max-width:320px; margin:clamp(24px,9vh,76px) auto 0; padding:12px 8px; }
  .suggested-actions { min-width:0; min-height:46px; flex-wrap:nowrap; align-items:center; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; padding:5px 8px; scrollbar-width:none; }
  .suggested-actions::-webkit-scrollbar { display:none; }
  .suggested-actions > span { width:auto; flex:0 0 auto; padding:0 3px; white-space:nowrap; }
  .suggested-actions button { flex:0 0 auto; min-height:36px; padding:6px 9px; white-space:nowrap; }
  .editor-composer { margin:6px 8px 4px; padding:8px; border-radius:12px; }
  .editor-composer textarea { min-height:48px; max-height:92px; resize:none; font-size:12.5px; }
  .editor-composer-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px; align-items:center; padding-top:5px; }
  .editor-composer-footer > div { min-width:0; display:grid; grid-template-columns:36px minmax(66px,.72fr) minmax(120px,1.28fr); gap:4px; align-items:center; flex:none; }
  .editor-composer-footer .editor-icon-button { width:36px; height:38px; }
  .editor-composer-footer select { width:100%; min-width:0; max-width:none; min-height:38px; padding:5px 20px 5px 7px; font-size:11.5px; }
  .editor-composer-footer .editor-send-button { min-width:66px; min-height:38px; margin-left:0; padding:6px 8px; font-size:11.5px; }
  .editor-agent-ai-notice { margin:0 max(10px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .editor-toolbar { min-height:42px; display:flex; align-items:center; gap:5px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; padding:4px 6px; scrollbar-width:none; }
  .editor-toolbar::-webkit-scrollbar { display:none; }
  .editor-mode-tabs,.editor-toolbar-center,.editor-device-tabs { flex:0 0 auto; min-width:0; }
  .editor-toolbar-center { order:initial; grid-column:auto; display:flex; flex-wrap:nowrap; justify-content:flex-start; overflow:visible; }
  .editor-toolbar-center .editor-icon-button { display:grid; flex:0 0 30px; width:30px; height:30px; }
  .preview-address-bar { display:flex; flex:0 0 126px; min-width:126px; width:126px; height:30px; padding-inline:8px; }
  .editor-intelligence-tools { display:flex; flex:0 0 auto; }
  .editor-intelligence-button { min-height:30px; padding:4px 7px; }
  .editor-device-tabs { display:flex; }
  .editor-device-tabs button,.editor-device-tabs button:not(.active) { display:grid; flex:0 0 30px; width:30px; }
  .editor-stage { min-width:0; min-height:0; max-width:100%; }
  .editor-stage[data-editor-device="computer"] { overflow:hidden; }
  .editor-stage[data-editor-device="computer"] .app-canvas,.editor-stage[data-editor-device="computer"] .generated-project-preview { min-width:0; width:100%; max-width:100%; }
  .editor-stage[data-editor-device="computer"] .app-canvas { height:100%; min-height:0; }
  .editor-stage[data-editor-device="computer"] .generated-project-preview,.editor-stage[data-editor-device="computer"] .project-preview-empty,.editor-stage[data-editor-device="computer"] .project-preview-status { height:100%; min-height:100%; }
  .editor-stage[data-editor-device="tablet"],.editor-stage[data-editor-device="mobile"] { padding:12px; }
  .editor-stage[data-editor-device="tablet"] .app-canvas,.editor-stage[data-editor-device="mobile"] .app-canvas { max-width:100%; }
  .build-progress { padding-left:max(10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right)); padding-bottom:env(safe-area-inset-bottom); }
  .history-drawer { inset:90px 0 0 auto; max-height:calc(var(--editor-visual-height,100dvh) - 90px); }
}

@media (orientation:landscape) and (max-width:1024px) and (max-height:560px) {
  .modal { max-height:calc(100dvh - 16px); }
  .modal > .dialog-card { max-height:calc(100dvh - 16px); overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  body.editor-open { overflow:hidden; overscroll-behavior:none; }
  .editor-shell { height:var(--editor-visual-height,100dvh); min-height:0; max-height:var(--editor-visual-height,100dvh); grid-template-rows:46px minmax(0,1fr); overflow:hidden; }
  .editor-mobile-view-switch { display:none!important; }
  .editor-header { min-height:46px; grid-template-columns:minmax(180px,1fr) minmax(160px,.85fr) auto; gap:5px; padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left)); }
  .editor-header-center { order:initial; grid-column:auto; display:flex; justify-content:center; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .editor-header-center::-webkit-scrollbar,.editor-header-actions::-webkit-scrollbar { display:none; }
  .editor-header-actions { min-width:0; overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap; scrollbar-width:none; }
  .editor-header-actions .editor-subtle-button { display:inline-flex; align-items:center; flex:0 0 auto; }
  .editor-header-actions .collab-avatars { display:none; }
  .editor-project-copy span { display:none; }
  .editor-workspace,body.editor-chat-collapsed .editor-workspace { min-height:0; display:grid; grid-template-columns:clamp(270px,38vw,350px) minmax(0,1fr); overflow:hidden; }
  body.editor-chat-collapsed .editor-workspace { grid-template-columns:0 minmax(0,1fr); }
  .editor-chat-panel { position:relative; inset:auto; width:auto; min-width:0; min-height:0; transform:none; box-shadow:none; }
  body.editor-chat-collapsed .editor-chat-panel { transform:translateX(-18px); }
  .editor-chat-thread { padding:8px 10px 6px; gap:9px; scrollbar-gutter:auto; }
  .editor-chat-thread .empty-state { margin:4vh auto 0; padding:8px; }
  .suggested-actions { min-width:0; min-height:40px; flex-wrap:nowrap; align-items:center; overflow-x:auto; overflow-y:hidden; padding:4px 7px; scrollbar-width:none; }
  .suggested-actions::-webkit-scrollbar { display:none; }
  .suggested-actions > span { width:auto; flex:0 0 auto; white-space:nowrap; }
  .suggested-actions button { flex:0 0 auto; min-height:32px; white-space:nowrap; }
  .editor-composer { margin:5px 7px 3px; padding:6px 7px; }
  .editor-composer textarea { min-height:34px; max-height:56px; font-size:12px; }
  .editor-composer-footer { flex-wrap:nowrap; padding-top:3px; }
  .editor-composer-footer > div { flex:1 1 auto; flex-wrap:nowrap; }
  .editor-composer-footer select { min-width:64px; max-width:132px; min-height:32px; padding-block:4px; font-size:11px; }
  .editor-composer-footer .editor-icon-button { width:32px; height:32px; }
  .editor-composer-footer .editor-send-button { min-height:32px; padding:5px 8px; font-size:11.5px; }
  .editor-agent-ai-notice { margin:0 8px max(3px,env(safe-area-inset-bottom)); font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .editor-stage-column { min-height:0; grid-template-rows:40px minmax(0,1fr) auto; }
  .editor-toolbar { min-height:40px; display:flex; align-items:center; gap:4px; overflow-x:auto; overflow-y:hidden; padding:4px 6px; scrollbar-width:none; }
  .editor-toolbar::-webkit-scrollbar { display:none; }
  .editor-mode-tabs,.editor-toolbar-center,.editor-device-tabs { flex:0 0 auto; min-width:0; }
  .editor-toolbar-center { display:flex; order:initial; grid-column:auto; flex-wrap:nowrap; justify-content:flex-start; }
  .preview-address-bar { display:flex; flex:0 0 126px; min-width:126px; width:126px; height:29px; }
  .editor-toolbar-center .editor-icon-button { display:grid; flex:0 0 29px; width:29px; height:29px; }
  .editor-intelligence-tools { display:flex; flex:0 0 auto; }
  .editor-device-tabs { display:flex; }
  .editor-device-tabs button,.editor-device-tabs button:not(.active) { display:grid; flex:0 0 29px; width:29px; }
  .editor-stage[data-editor-device="computer"] { overflow:hidden; }
  .editor-stage[data-editor-device="computer"] .app-canvas,.editor-stage[data-editor-device="computer"] .generated-project-preview { min-width:0; width:100%; max-width:100%; }
  .editor-stage[data-editor-device="computer"] .app-canvas { height:100%; min-height:0; }
  .editor-stage[data-editor-device="computer"] .generated-project-preview,.editor-stage[data-editor-device="computer"] .project-preview-empty,.editor-stage[data-editor-device="computer"] .project-preview-status { height:100%; min-height:100%; }
  .build-progress { min-height:34px; padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); padding-bottom:env(safe-area-inset-bottom); }
  .editor-inspector { top:46px; bottom:6px; }
  .history-drawer { inset:46px 0 0 auto; }
}

@media (prefers-reduced-motion:reduce) {
  .editor-skip-link,.editor-workspace,.editor-chat-panel,.editor-stage-column { transition:none!important; }
}
:root .project-account-scope{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:5px 9px;border:1px solid var(--border-soft);border-radius:999px;background:rgba(27,27,26,.78);color:#aaa9a4;font-size:12px;cursor:pointer;white-space:nowrap}
:root .project-account-scope:hover{border-color:#5c4149;background:#282225;color:#fff}
:root .project-account-scope-chevron{color:#73736d;font-size:11.5px}
@media(max-width:1024px){.account-context-copy{display:none}.account-context-button{max-width:126px;grid-template-columns:28px auto 10px}}
@media(max-width:620px){.account-context-button{min-height:38px;padding:4px 7px 4px 4px}.account-context-menu{position:fixed;top:max(58px,calc(env(safe-area-inset-top) + 48px));right:max(12px,env(safe-area-inset-right));width:min(326px,calc(100vw - 24px));max-height:calc(100dvh - 76px)}:root .projects-section .section-heading{align-items:flex-start;gap:9px}:root .project-account-scope{max-width:100%}:root .project-account-scope #projectAccountScopeLabel{overflow:hidden;text-overflow:ellipsis;max-width:180px}}
html[dir="rtl"] .account-context-button,html[dir="rtl"] .account-context-option{text-align:right}
html[dir="rtl"] .account-context-menu{right:auto;left:0}
@media(max-width:620px){html[dir="rtl"] .account-context-menu{right:auto;left:max(12px,env(safe-area-inset-left))}}
@media(prefers-reduced-motion:reduce){.account-context-chevron{transition:none}}

/* BaseHeart Blueprint */

/* BaseHeart production intelligence */
.visual-comment-target-summary,.project-explain-intro,.live-health-panel{border:1px solid rgba(122,151,173,.2);border-radius:12px;background:rgba(24,22,28,.66)}
.visual-comment-target-summary{display:grid;gap:10px;padding:12px}.visual-comment-target-head,.live-health-head,.live-health-history-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.visual-comment-target-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.visual-comment-target-detail{min-width:0;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.025)}.visual-comment-target-detail span,.visual-comment-target-detail strong{display:block}.visual-comment-target-detail span,.visual-comment-location{color:#8193a0;font-size:12.5px}.visual-comment-target-detail strong{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.visual-comment-copy{min-width:0;display:grid;gap:4px}.visual-comment-location{line-height:1.4;overflow-wrap:anywhere}
.project-explain-shell{display:grid;gap:12px}.project-explain-intro{padding:14px}.project-explain-intro>p{margin:0;color:#9aaab6;line-height:1.55}.project-explain-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.project-explain-stat{padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.025)}.project-explain-stat span,.project-explain-stat strong{display:block}.project-explain-stat span{color:#8193a0;font-size:12px}.project-explain-stat strong{margin-top:3px;font-size:14px}.project-explain-card{display:grid;gap:8px;padding:12px;border:1px solid rgba(122,151,173,.16);border-radius:11px;background:rgba(19,17,23,.5)}.project-explain-card h3{margin:0;font-size:13.5px}.project-explain-list{display:grid;gap:6px}.project-explain-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px 9px;border-radius:8px;background:rgba(255,255,255,.025)}.project-explain-row span:first-child{min-width:0}.project-explain-row small{display:block;margin-top:3px;color:#80919d}.project-explain-empty{margin:0;color:#82939e;font-size:13px}
.live-health-panel{display:grid;gap:12px;margin-top:14px;padding:14px}.live-health-head h3{margin:3px 0 4px;font-size:14px}.live-health-head p{margin:0;color:#8697a3;font-size:12.5px}.live-health-body{display:grid;gap:10px}.live-health-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid rgba(122,151,173,.17);border-radius:9px;background:rgba(255,255,255,.025)}.live-health-hero small{color:#8193a0}.live-health-checks,.live-health-history{display:grid;gap:6px}.live-health-check{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:9px 10px;border-radius:9px;background:rgba(255,255,255,.025)}.live-health-check>span:first-child{min-width:0}.live-health-check strong,.live-health-check small{display:block}.live-health-check small{margin-top:3px;color:#8193a0;line-height:1.35}.live-health-history{padding-top:4px}.live-health-history-row{padding:5px 0;border-top:1px solid rgba(255,255,255,.05);font-size:12.5px;color:#8fa0ac}
@media(max-width:720px){.visual-comment-target-grid,.project-explain-stats{grid-template-columns:1fr}.live-health-hero,.live-health-check,.visual-comment-target-head{align-items:flex-start;flex-direction:column}.live-health-check .control-inline-actions{width:100%;justify-content:flex-start}.project-explain-row{flex-wrap:wrap}.project-explain-row .status-pill{margin-left:0}}
@media(prefers-reduced-motion:reduce){.live-health-panel *,.project-explain-shell *,.visual-comments-shell *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Agent database dependency gate */

/* ==========================================================================
   BaseHeart polish layer
   One cohesive navy palette for the editor, readable controls, no overlaps.
   Kept last so it wins over the earlier graphite and navy layers.
   ========================================================================== */
:root {
  --bh-ink: #f1eff6;
  --bh-ink-2: #bdb8c9;
  --bh-ink-3: #8a8497;
  --bh-shell: #0e0c12;
  --bh-panel: #121016;
  --bh-raised: #18161c;
  --bh-raised-2: #1e1c22;
  --bh-line: rgba(255,255,255,.07);
  --bh-line-strong: rgba(255,255,255,.12);
  --bh-pink: #f04491;
  --bh-pink-soft: rgba(240,68,145,.14);
  --bh-ring: 0 0 0 3px rgba(240,68,145,.32);
  --bh-ease: cubic-bezier(.2,.7,.2,1);
}

/* Shared: visible keyboard focus and calm motion on every interactive control */
:where(button, [role="button"], a, select, input, textarea):focus-visible { outline: 2px solid var(--bh-pink); outline-offset: 2px; }
:where(button, a, select) { transition: background-color .16s var(--bh-ease), border-color .16s var(--bh-ease), color .16s var(--bh-ease), box-shadow .16s var(--bh-ease), transform .16s var(--bh-ease); }
::selection { background: rgba(240,68,145,.34); color: #fff; }
* { scrollbar-color: rgba(255,255,255,.16) transparent; }

/* Dashboard: hide sections that have nothing to show yet */
.recent-section:not(.deleted-section):has(#recentRow:empty) { display: none; }

/* Editor chrome */
.editor-shell,
.editor-header,
.editor-workspace,
.editor-stage-column { background: var(--bh-shell); }
.editor-header { border-bottom: 1px solid var(--bh-line); }
.editor-header .editor-icon-button:hover,
.editor-header .editor-icon-button:focus-visible { border-color: var(--bh-line-strong); background: var(--bh-raised-2); }
.editor-project-copy strong { font-size: 14px; letter-spacing: -.01em; }
.editor-project-copy span { color: var(--bh-ink-3); }
.editor-header .collab-avatars { padding-left: 0; }
.editor-header .collab-avatars > button {
  width: auto; min-width: 0; height: 32px; margin-left: 0; padding: 0 12px;
  border: 1px solid var(--bh-line-strong); border-radius: 999px;
  background: transparent; color: var(--bh-ink-2); font-size: 12.5px; font-weight: 650; white-space: nowrap;
}
.editor-header .collab-avatars > button:hover { border-color: rgba(240,68,145,.4); background: var(--bh-raised-2); color: #fff; }
.editor-header-actions .editor-subtle-button,
.editor-header-center .editor-subtle-button { white-space: nowrap; }

.editor-chat-panel { background: var(--bh-panel); border-right: 1px solid var(--bh-line); }
.editor-panel-tabs { background: var(--bh-panel); border-bottom-color: var(--bh-line); }
.editor-panel-tabs button { white-space: nowrap; }
.editor-chat-thread .empty-state strong { font-size: 16px; color: var(--bh-ink); }
.editor-chat-thread .empty-state span { color: var(--bh-ink-3); line-height: 1.55; }
.editor-chat-thread .user-message { background: var(--bh-raised); border-color: var(--bh-line-strong); }
.editor-chat-thread .chat-message p { color: #c3ccd6; }

/* Suggested next steps read as tappable chips */
.suggested-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 12px; background: var(--bh-panel); border-top: 1px solid var(--bh-line); }
.suggested-actions > span { flex: 1 1 100%; margin-bottom: 2px; color: var(--bh-ink-3); letter-spacing: .08em; }
.editor-shell .suggested-actions button {
  min-height: 30px; padding: 5px 12px; border: 1px solid var(--bh-line-strong); border-radius: 999px;
  background: var(--bh-raised); color: var(--bh-ink-2); font-weight: 600; white-space: nowrap;
}
.editor-shell .suggested-actions button:hover { border-color: rgba(240,68,145,.45); background: var(--bh-pink-soft); color: #fff; }

/* Composer */
.editor-composer { background: var(--bh-raised); border-color: var(--bh-line-strong); box-shadow: 0 12px 32px rgba(0,0,0,.28); }
.editor-composer:focus-within { border-color: rgba(240,68,145,.5); box-shadow: var(--bh-ring), 0 12px 32px rgba(0,0,0,.28); }
.editor-composer textarea { color: var(--bh-ink); font-size: 14px; }
.editor-composer textarea::placeholder { color: var(--bh-ink-3); }
.editor-composer-footer > div { gap: 6px; }
.editor-composer-footer select {
  min-height: 34px; max-width: none; border: 1px solid var(--bh-line-strong); border-radius: 9px;
  background-color: var(--bh-raised-2); color: var(--bh-ink); text-overflow: ellipsis;
}
.editor-composer-footer #editorWorkMode { flex: 0 0 auto; min-width: 84px; }
.editor-composer-footer #buildLevel { flex: 1 1 auto; min-width: 150px; }
.editor-composer-footer .editor-send-button { min-height: 34px; padding: 6px 16px; border-radius: 10px; font-weight: 750; white-space: nowrap; }
.editor-agent-ai-notice { color: var(--bh-ink-3); }

/* Toolbar: tabs never wrap, the address bar flexes instead */
.editor-toolbar { grid-template-columns: auto minmax(0,1fr) auto; background: var(--bh-panel); border-bottom: 1px solid var(--bh-line); }
.editor-toolbar .editor-mode-tabs,
.editor-toolbar .editor-device-tabs { flex-wrap: nowrap; width: max-content; min-width: max-content; border-color: var(--bh-line-strong); background: var(--bh-shell); }
.editor-toolbar .editor-mode-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; white-space: nowrap; }
.editor-secrets-badge { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 999px; background: var(--bh-pink); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.editor-secrets-badge[hidden] { display: none; }
.editor-toolbar-center { min-width: 0; gap: 6px; }
.editor-toolbar .preview-address-bar { width: auto; flex: 1 1 220px; min-width: 110px; max-width: 420px; border-color: var(--bh-line-strong); background: var(--bh-shell); }
.editor-intelligence-tools { flex: 0 0 auto; gap: 4px; border-left-color: var(--bh-line); }
.editor-shell .editor-intelligence-button { white-space: nowrap; border-color: var(--bh-line-strong); background: var(--bh-raised); color: var(--bh-ink-2); }
.editor-shell .editor-intelligence-button:hover { border-color: rgba(240,68,145,.45); background: var(--bh-pink-soft); color: #fff; }

/* Device switcher: drawn icons instead of text glyphs */
.editor-device-tabs button[data-editor-device] { position: relative; color: transparent; font-size: 0; }
.editor-device-tabs button[data-editor-device]::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; background: var(--bh-ink-3);
  -webkit-mask: var(--bh-device-icon) center / contain no-repeat; mask: var(--bh-device-icon) center / contain no-repeat;
}
.editor-device-tabs button[data-editor-device]:hover::before,
.editor-device-tabs button[data-editor-device].active::before { background: #fff; }
.editor-device-tabs button[data-editor-device="mobile"] { --bh-device-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.editor-device-tabs button[data-editor-device="tablet"] { --bh-device-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='3' width='17' height='18' rx='2.5'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.editor-device-tabs button[data-editor-device="computer"] { --bh-device-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }

/* Stage and preview status */
.editor-stage,
.editor-stage[data-editor-device="tablet"],
.editor-stage[data-editor-device="mobile"] { background: #09080d; }
.editor-stage[data-editor-device="tablet"] .app-canvas,
.editor-stage[data-editor-device="mobile"] .app-canvas { border-color: var(--bh-line-strong); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.project-preview-build-badge { border: 1px solid var(--bh-line-strong); background: rgba(16,14,20,.92); color: var(--bh-ink-2); box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.build-progress { background: var(--bh-panel); border-top: 1px solid var(--bh-line); }
.editor-inspector { background: var(--bh-raised); border-color: var(--bh-line-strong); }

@media (prefers-reduced-motion: reduce) {
  :where(button, a, select) { transition: none; }
}

/* Primary actions stand out. The borderless system keeps secondary controls quiet,
   but the one action a screen exists for (Build, Publish, Continue) is filled. */
body button:not(.app-canvas button):is(.primary-button,.build-button,.editor-publish-button,.editor-send-button):not([class*="danger"]) {
  background: linear-gradient(135deg,#f45aa0 0%,#f04491 45%,#dc2f7c 100%) !important;
  color: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px rgba(240,68,145,.28) !important;
  font-weight: 750;
}
body button:not(.app-canvas button):is(.primary-button,.build-button,.editor-publish-button,.editor-send-button):not([class*="danger"]):not(:disabled):hover {
  background: linear-gradient(135deg,#ff6aae 0%,#f4509a 45%,#e3398a 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 12px 28px rgba(240,68,145,.36) !important;
  transform: translateY(-1px);
}
body button:not(.app-canvas button):is(.primary-button,.build-button,.editor-publish-button,.editor-send-button):not([class*="danger"]):active { transform: translateY(0); }
body button:not(.app-canvas button):is(.primary-button,.build-button,.editor-publish-button,.editor-send-button):disabled {
  background: #211f25 !important; color: #807a8e !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important; transform: none; cursor: not-allowed;
}
body button:not(.app-canvas button).primary-button[class*="danger"] {
  background: linear-gradient(135deg,#d8455e,#b8304a) !important; color: #fff !important;
}

/* Keyboard focus must stay visible; it lives inside the control like the selected state. */
body button:not(.app-canvas button):focus-visible,
.app-shell :is(select):not(.app-canvas *):focus-visible,
.editor-shell :is(select):not(.app-canvas *):focus-visible {
  box-shadow: inset 0 0 0 2px rgba(240,68,145,.8) !important;
}

/* Composer: controls stay on one row; the Agent picker flexes, Build never wraps */
.editor-composer-footer { flex-wrap: nowrap; gap: 8px; }
.editor-composer-footer > div { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
.editor-composer-footer #buildLevel { flex: 1 1 120px; min-width: 0; }
.editor-composer-footer .editor-send-button { flex: 0 0 auto; margin-left: 0; }
.editor-shell .editor-composer-footer select,
.app-shell .composer-footer select { background-color: rgba(255,255,255,.055) !important; border-radius: 9px; }
.editor-shell .editor-composer-footer select:hover,
.app-shell .composer-footer select:hover { background-color: rgba(255,255,255,.085) !important; }

/* Suggested next steps: quiet chips with a surface so they read as actions */
body .editor-shell .suggested-actions button:not(.app-canvas button) { background: rgba(255,255,255,.05) !important; border-radius: 999px; }
body .editor-shell .suggested-actions button:not(.app-canvas button):hover { background: rgba(240,68,145,.14) !important; }

/* Dashboard: anchored "Connect all your tools" card and balanced hero copy */
body .main-content button.tools-banner:not(.app-canvas button) { background: rgba(22,20,26,.7) !important; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; }
body .main-content button.tools-banner:not(.app-canvas button):hover { background: rgba(30,28,34,.84) !important; box-shadow: inset 0 0 0 1px rgba(255,79,163,.34) !important; }
.hero h1, .hero p, .section-heading h2 { text-wrap: balance; }
.editor-mobile-view-switch { background: var(--bh-panel); border-bottom-color: var(--bh-line); }
.editor-mobile-view-switch button { font-size: 13px; font-weight: 700; }

/* Agent live status: calm while working, colour only signals states that need the user */

/* ==========================================================================
   Agent work log in the conversation
   ========================================================================== */

/* Step timeline */

/* Question with options, answered in the conversation */
/* A new project's questions, answered before the first build */
/* The questions panel takes the preview's place while the Agent waits on the answers */
@keyframes agentQuestionsHighlight { 0% { box-shadow: 0 0 0 0 rgba(240,68,145,.7), 0 18px 60px rgba(0,0,0,.35); } 100% { box-shadow: 0 0 0 16px rgba(240,68,145,0), 0 18px 60px rgba(0,0,0,.35); } }

/* Cost line and details */

/* Finished work stays in the conversation, quieter */

/* Messages queued while the Agent works */
body .editor-shell button.editor-send-button.is-queue:not(.app-canvas button) { background: rgba(255,255,255,.1) !important; box-shadow: none !important; }

@keyframes agentStepSpin { to { transform: rotate(360deg); } }
@keyframes agentWritePulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
/* The work log grows with its content inside the conversation */
/* Conversation rows always take their content height; the thread scrolls
   instead of squeezing messages or the work log together. */
.editor-chat-thread { grid-auto-rows: max-content; }

/* Conversation messages: the customer's messages as right-aligned bubbles,
   BaseHeart's answers with an avatar, like a modern AI chat. */
.editor-chat-thread .chat-message.user-message {
  justify-self: end; max-width: 88%; gap: 3px; padding: 10px 14px; border: 1px solid rgba(240,68,145,.26) !important; border-radius: 16px 16px 4px 16px;
  background: linear-gradient(180deg, rgba(240,68,145,.16), rgba(240,68,145,.09)) !important; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.editor-chat-thread .chat-message.user-message::before { display: none; }
.editor-chat-thread .chat-message.user-message .message-meta { justify-content: flex-end; }
.editor-chat-thread .chat-message.user-message .message-meta strong { color: #ffb3d3; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.editor-chat-thread .chat-message.user-message p { color: #fff; font-size: 14px; line-height: 1.55; }
.editor-chat-thread .chat-message.assistant-message {
  position: relative; gap: 4px; padding: 12px 14px 13px 50px; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 16px;
  background: rgba(255,255,255,.03) !important; box-shadow: none;
}
.editor-chat-thread .chat-message.assistant-message::before {
  content: "♥"; position: absolute; top: 12px; left: 13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg,#f45aa0,#dc2f7c); color: #fff; font-size: 12px; line-height: 1; box-shadow: 0 0 0 3px rgba(240,68,145,.14);
}
.editor-chat-thread .chat-message.assistant-message .message-meta strong { color: #fff; font-size: 13px; }
.editor-chat-thread .chat-message.assistant-message p { color: #d5dce4; font-size: 14px; line-height: 1.62; }

/* Next-step suggestions under the Agent's newest reply */
body .chat-message .chat-notice { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(245,166,35,.08); box-shadow: inset 0 0 0 1px rgba(245,166,35,.28); color: #f3d9a6; font-size: 12.5px; line-height: 1.45; }

/* Dashboard hero over the 3D heart field: keep copy crisp above the particles */
.main-content .hero-heading { position: relative; }
.main-content .hero-heading h1, .main-content .hero-heading p, .main-content .hero-heading .eyebrow { text-shadow: 0 2px 24px rgba(11,9,15,.92), 0 0 3px rgba(11,9,15,.7); }
.main-content .hero-heading p { color: #b9b5c4; }
.main-content .hero-heading .eyebrow { color: #ff8cc6; letter-spacing: .16em; }
.main-content .hero-emblem { height: 210px; margin: 4px auto 6px; pointer-events: none; }
.main-content .hero .tools-banner { margin: 22px auto 0; }
@media (max-width: 760px) {
  .main-content .hero-emblem { height: 150px; margin: 0 auto 2px; }
}
.main-content .hero { padding-top: 58px; }
@media (max-width: 760px) { .main-content .hero { padding-top: 26px; } }

/* Graphite dashboard controls (replaces the navy water tint) */
.main-content .project-toolbar-control,.main-content .project-toolbar-view {
  background: rgba(26,24,30,.62) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px rgba(255,255,255,.04) !important;
}
.main-content .project-toolbar-control:hover,.main-content .project-toolbar-select:focus-within,.main-content .project-toolbar-view:hover {
  background: rgba(36,34,40,.74) !important;
}
.main-content .composer .composer-level-select:focus,.main-content .project-toolbar-select:focus-within {
  background: linear-gradient(90deg, rgba(255,79,163,.12), rgba(26,24,30,.62) 45%) !important;
  box-shadow: inset 3px 0 0 rgba(255,79,163,.7), inset 0 0 0 1px rgba(255,79,163,.22) !important;
}
.main-content .project-toolbar-search:focus-within { background: rgba(26,24,30,.62) !important; box-shadow: inset 0 0 0 1px rgba(255,79,163,.3) !important; }
.main-content .composer .composer-level-select {
  -webkit-appearance: none; appearance: none; color: #ddd9e6; font-weight: 600; border: 0; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b9b3c7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important;
}
.main-content .composer .composer-level-select option { background: #19171d; color: #eeeaf5; }

/* Phone composer: every control readable, nothing collapses to an empty box */
@media (max-width:620px) {
  body:not([data-preview-device]) .main-content .composer-left { grid-template-columns: 44px minmax(0,1fr) minmax(0,1fr); }
  body:not([data-preview-device]) .main-content .composer-left > #dashboardBuildLevel { grid-column: 1 / -1; }
  body:not([data-preview-device]) .main-content .composer-left > .heart-estimate { grid-column: 1 / -1; text-align: center; }
}
/* Inter needs a little less negative tracking than the old system fonts */
.main-content .hero-heading h1 { letter-spacing: -.038em; font-weight: 760; }
.main-content .section-heading h2 { letter-spacing: -.028em; }

/* Floating top-right toolbar: a quiet glass pill so it never sits bare on top of content while scrolling */
body:not(.editor-open) .responsive-preview-control {
  padding: 5px 6px; border-radius: 14px;
  background: rgba(16,14,20,.74);
  -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 12px 32px rgba(0,0,0,.35);
}

/* Agent file activity: files read while planning, clickable changed files, and the changed-files list under a reply */

/* Project category picker (Auto, Game, Website, App). On the start page the
   controls wrap onto a second row instead of squeezing the Build button, and
   on phones the picker gets its own full-width row above the Agent level. */
@media (min-width:621px) {
  body:not([data-preview-device="mobile"]) .main-content .composer-footer { align-items: flex-end; }
  body:not([data-preview-device="mobile"]) .main-content .composer-left { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 7px; }
}
@media (max-width:620px) {
  body:not([data-preview-device]) .main-content .composer-left > #dashboardCategory { grid-column: 1 / -1; order: 1; }
  body:not([data-preview-device]) .main-content .composer-left > #dashboardBuildLevel { order: 2; }
  body:not([data-preview-device]) .main-content .composer-left > .heart-estimate { order: 3; }
}
body[data-preview-device="mobile"] .composer-left > #dashboardCategory { grid-column: 1 / -1; order: 1; }
body[data-preview-device="mobile"] .composer-left > #dashboardBuildLevel { grid-column: 1 / -1; order: 2; }
body[data-preview-device="mobile"] .composer-left > .heart-estimate { order: 3; }
/* Chat composer: attach, the category picker and work mode share the first
   row; the Agent level and Build share the second. The chat panel is narrow,
   so four controls on one row would crush the Agent level picker. */
.editor-shell .editor-composer-footer { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 6px; }
.editor-shell .editor-composer-footer > div { display: contents; }
.editor-shell .editor-composer-footer select { width: 100%; min-width: 0; max-width: none; }
.editor-shell .editor-composer-footer #editorAttachBtn { grid-column: 1; grid-row: 1; }
.editor-shell .editor-composer-footer #editorCategory { grid-column: 2; grid-row: 1; }
.editor-shell .editor-composer-footer #editorWorkMode { grid-column: 3; grid-row: 1; }
.editor-shell .editor-composer-footer #buildLevel { grid-column: 1 / 3; grid-row: 2; }
.editor-shell .editor-composer-footer #editorSendBtn { grid-column: 3; grid-row: 2; margin-left: 0; }
/* Until a category is chosen, Build waits: the menu is outlined and a short
   hint under the composer says why. */

/* Dashboard "My work": the heading is a menu of the Agent's projects and each Studio tool's library (studio-work-ui.mjs). */
.work-source { position:relative; min-width:0; }
.work-source h2 { margin-top:5px; }
.work-source-trigger { display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:2px 10px 4px 2px; margin-left:-2px; border:1px solid transparent; border-radius:12px; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; cursor:pointer; text-align:left; }
.work-source-trigger:hover { border-color:rgba(240,68,145,.28); background:rgba(36,33,40,.72); }
.work-source-trigger:focus-visible { outline:2px solid #f25074; outline-offset:2px; }
.work-source-icon { width:34px; height:34px; flex:0 0 auto; display:grid; place-items:center; border:1px solid rgba(242,80,116,.28); border-radius:10px; background:rgba(242,80,116,.09); color:#f47ba0; font-size:16px; letter-spacing:0; }
.work-source-chevron { color:#8d8a93; font-size:.62em; transition:transform .15s ease; }
.work-source-trigger[aria-expanded="true"] .work-source-chevron { transform:rotate(180deg); }
.work-source-hint { margin:8px 0 0; color:#8a8891; font-size:13px; line-height:1.45; }
.work-source-kept { color:#6f6d76; }
.work-source-menu { position:absolute; z-index:40; top:calc(100% + 8px); left:0; width:min(360px,calc(100vw - 32px)); display:grid; gap:3px; padding:6px; border:1px solid #3b3436; border-radius:13px; background:#1b1b1a; box-shadow:0 22px 64px rgba(0,0,0,.45); }
.work-source-menu[hidden] { display:none; }
.work-source-option { width:100%; min-height:52px; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:7px 8px; border:1px solid transparent; border-radius:9px; background:transparent; color:#bdbcb6; text-align:left; cursor:pointer; }
.work-source-option:hover, .work-source-option:focus-visible { background:#252524; color:#fff; outline:none; }
.work-source-option.active { border-color:#5c3540; background:#2a1d21; color:#fff; }
.work-source-option-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid #3e3e39; border-radius:9px; background:#272726; color:#e3a2b6; font-size:15px; }
.work-source-option-copy { min-width:0; display:grid; gap:2px; }
.work-source-option-copy strong, .work-source-option-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.work-source-option-copy strong { font-size:13px; font-weight:680; }
.work-source-option-copy small { color:#7d7c85; font-size:11.5px; }
.work-source-option-count { color:#8c8c86; font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#projectsSection:not([data-work-source="agent"]) .project-toolbar-select,
#projectsSection:not([data-work-source="agent"]) .project-toolbar-view,
#projectsSection:not([data-work-source="agent"]) .folder-bar,
#projectsSection:not([data-work-source="agent"]) #projectGrid,
#projectsSection:not([data-work-source="agent"]) #projectEmpty { display:none; }
.work-bar { display:flex; justify-content:flex-end; margin:-4px 0 12px; }
.work-bar[hidden] { display:none; }
.work-bar-open { min-height:34px; padding:6px 12px; border:1px solid rgba(240,68,145,.34); border-radius:999px; background:rgba(242,80,116,.1); color:#f6b5c8; font-size:12.5px; font-weight:680; cursor:pointer; }
.work-bar-open:hover { background:rgba(242,80,116,.18); color:#fff; }
.work-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; }
.work-grid[hidden] { display:none; }
.work-grid[aria-busy="true"]:empty { min-height:120px; border:1px dashed rgba(255,255,255,.08); border-radius:13px; }
.work-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:13px; background:#1b1b1a; transition:border-color .15s ease, background .15s ease; }
.work-card:hover { border-color:rgba(240,68,145,.34); background:rgba(26,24,30,.94); }
.work-card-open { width:100%; display:grid; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.work-card-open:focus-visible { outline:2px solid #f25074; outline-offset:-2px; }
.work-card-picture { aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--border); background:radial-gradient(circle at 50% 35%,rgba(242,80,116,.12),transparent 40%),linear-gradient(145deg,#211f25,#17151b); }
.work-card[data-tool="thumbnail"] .work-card-picture { aspect-ratio:16/9; }
.work-card-picture img { width:100%; height:100%; object-fit:cover; }
.work-card-glyph { width:40px; height:40px; display:grid; place-items:center; border:1px solid rgba(242,80,116,.28); border-radius:12px; background:rgba(242,80,116,.08); color:#f47ba0; font-size:18px; }
.work-card-body { min-width:0; display:grid; gap:4px; padding:10px 12px 12px; }
.work-card-body strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:660; color:#ecebe6; }
.work-card-meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#7f7e87; font-size:11.5px; }
.work-empty { display:grid; justify-items:start; gap:6px; }
.work-empty[hidden] { display:none; }
.work-empty button { margin-top:6px; }
.studio-storage-note { margin:8px 0 0; color:#8a8891; font-size:12px; line-height:1.45; }
.studio-local-badge { justify-self:start; margin:6px 8px 0; padding:2px 7px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(0,0,0,.35); color:#a9a8b0; font-size:10.5px; }
@media (max-width: 1100px) { .work-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width: 760px) { .work-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .work-bar { justify-content:flex-start; } }
@media (max-width: 420px) { .work-grid { grid-template-columns:minmax(0,1fr); } }

/* Project tools: choose the project they work on */
.project-tools-picker { display:grid; gap:8px; max-height:min(58vh, 520px); overflow:auto; margin:4px 0 8px; }
.project-tools-picker-item { width:100%; min-width:0; display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--border); border-radius:13px; background:#1b1b1a; color:inherit; text-align:start; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
.project-tools-picker-item:hover, .project-tools-picker-item:focus-visible { border-color:rgba(240,68,145,.34); background:rgba(26,24,30,.94); }
.project-tools-picker-copy { min-width:0; display:grid; gap:2px; }
.project-tools-picker-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-tools-picker-copy small, .project-tools-picker-empty { color:var(--muted); }
.project-tools-picker-go { color:var(--muted); }
.project-tools-picker-empty { margin:0; line-height:1.5; }

/* Projects whose saved sandbox has not been used for 30 days */
.sandbox-idle-notice { margin:0 0 18px; padding:16px 18px; border:1px solid rgba(240,68,145,.28); border-radius:14px; background:rgba(40,22,32,.55); display:grid; gap:10px; }
.sandbox-idle-notice[hidden] { display:none; }
.sandbox-idle-head { display:flex; align-items:center; gap:10px; }
.sandbox-idle-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:rgba(240,68,145,.16); color:#f6b6c4; }
.sandbox-idle-note { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.sandbox-idle-list { display:grid; gap:8px; }
.sandbox-idle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:11px; background:#1b1b1a; }
.sandbox-idle-copy { min-width:0; display:grid; gap:2px; }
.sandbox-idle-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sandbox-idle-copy small { color:var(--muted); }
.sandbox-idle-actions { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
@media (max-width: 640px) { .sandbox-idle-row { flex-direction:column; align-items:stretch; } .sandbox-idle-actions { justify-content:flex-start; } }

/* GitHub actions stay adjacent to Publish, including the scrollable mobile bar. */
.editor-header-actions .editor-github-button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; gap:5px; white-space:nowrap; }
.editor-github-button::before { content:'↑'; font-size:15px; }
#editorGithubPullBtn::before { content:'↓'; }
.editor-github-button:disabled { opacity:.45; cursor:not-allowed; }
.editor-github-button[aria-busy="true"] { opacity:.8; cursor:progress; }

/* Sidebar hover feedback complements the existing pointer-following 3D lift. */
#sidebar {
  --sidebar-hover-angle: 90deg;
  --sidebar-selected-rail: inset 4px 0 0 #f04491;
}
html[dir="rtl"] #sidebar {
  --sidebar-hover-angle: 270deg;
  --sidebar-selected-rail: inset -4px 0 0 #f04491;
}
#sidebar :is(.nav-icon,.filter-item > span:first-child) { transition: color .18s ease; }

body #sidebar :is(.nav-item,.filter-item,.nav-group-toggle,.workspace-switcher,.project-shortcut,.sidebar-promo,.sidebar-wallet-summary,.profile-button):not(:disabled):not([aria-disabled="true"]):focus-visible {
  background: linear-gradient(var(--sidebar-hover-angle),rgba(240,68,145,.16),rgba(240,68,145,.045)) !important;
  box-shadow: var(--sidebar-selected-rail), inset 0 0 0 1px rgba(255,116,172,.2), inset 0 0 24px rgba(240,68,145,.07) !important;
}
@media (hover: hover) and (pointer: fine) {
  body #sidebar :is(.nav-item,.filter-item,.nav-group-toggle,.workspace-switcher,.project-shortcut,.sidebar-promo,.sidebar-wallet-summary,.profile-button):not(:disabled):not([aria-disabled="true"]):hover {
    background: linear-gradient(var(--sidebar-hover-angle),rgba(240,68,145,.16),rgba(240,68,145,.045)) !important;
    box-shadow: inset 0 0 0 1px rgba(255,116,172,.2), inset 0 0 24px rgba(240,68,145,.07), 0 4px 18px rgba(240,68,145,.1) !important;
    color: #fff !important;
  }
  body #sidebar :is(.nav-item,.filter-item,.nav-group-toggle,.workspace-switcher,.project-shortcut,.sidebar-promo,.sidebar-wallet-summary,.profile-button):not(:disabled):not([aria-disabled="true"]):hover:is(.active,[aria-current="page"],[aria-pressed="true"],:focus-visible) {
    box-shadow: var(--sidebar-selected-rail), inset 0 0 0 1px rgba(255,116,172,.2), inset 0 0 24px rgba(240,68,145,.07), 0 4px 18px rgba(240,68,145,.1) !important;
  }
  body #sidebar :is(.nav-item,.filter-item,.nav-group-toggle):not(:disabled):not([aria-disabled="true"]):hover :is(.nav-icon,.filter-item > span:first-child) { color: #ff8abb !important; }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar :is(.nav-icon,.filter-item > span:first-child) { transition: none !important; }
}


/* BASEHEART_UI_UPLIFT_2026_10_04_START */
:root {
  color-scheme: dark;

  /* BaseHeart Creation OS — semantic visual tokens. */
  --bh-canvas: #0b090f;
  --bh-sidebar: #100e14;
  --bh-surface: #151219;
  --bh-surface-2: #1b1820;
  --bh-surface-3: #23202a;
  --bh-surface-glass: rgba(21,18,25,.82);
  --bh-surface-glass-hover: rgba(30,26,35,.92);
  --bh-border: rgba(255,255,255,.10);
  --bh-border-soft: rgba(255,255,255,.065);
  --bh-text: #f7f4fa;
  --bh-muted: #aaa4b3;
  --bh-muted-2: #777181;
  --bh-action: #f04491;
  --bh-action-strong: #ff63ad;
  --bh-action-soft: #321525;
  --bh-success: #7fc89b;
  --bh-warning: #ddb36a;
  --bh-danger: #e97f97;

  /* Backwards-compatible aliases used throughout existing BaseHeart surfaces. */
  --canvas: var(--bh-canvas);
  --sidebar: var(--bh-sidebar);
  --surface: var(--bh-surface);
  --surface-2: var(--bh-surface-2);
  --surface-3: var(--bh-surface-3);
  --border: var(--bh-border);
  --border-soft: var(--bh-border-soft);
  --text: var(--bh-text);
  --muted: var(--bh-muted);
  --muted-2: var(--bh-muted-2);
  --heart: var(--bh-action);
  --heart-strong: var(--bh-action-strong);
  --heart-soft: var(--bh-action-soft);
  --success: var(--bh-success);
  --warning: var(--bh-warning);
  --danger: var(--bh-danger);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius: var(--radius-md);

  --shadow-1: 0 10px 30px rgba(0,0,0,.24);
  --shadow-2: 0 28px 80px rgba(0,0,0,.42);
  --shadow: var(--shadow-2);
  --focus-ring: 0 0 0 3px rgba(240,68,145,.18);
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --ease-standard: cubic-bezier(.2,.75,.2,1);

  --font-display: "Segoe UI Variable Display", "Inter Variable", "Aptos Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter Variable", "Segoe UI Variable Text", "Aptos", "Segoe UI", system-ui, sans-serif;
}
/* Dashboard hero over the 3D heart field: keep copy crisp above the particles */
.main-content .hero-heading { position: relative; }
.main-content .hero-heading h1, .main-content .hero-heading p, .main-content .hero-heading .eyebrow { text-shadow: 0 2px 24px rgba(11,9,15,.92), 0 0 3px rgba(11,9,15,.7); }
.main-content .hero-heading p { color: #b9b5c4; }
.main-content .hero-heading .eyebrow { color: #ff8cc6; letter-spacing: .16em; }
.main-content .hero {
  width: min(980px,100%);
  padding: 34px 0 52px;
}
.main-content .hero-emblem {
  height: 154px;
  margin: 0 auto 2px;
  pointer-events: none;
}
.main-content .hero-heading {
  margin-bottom: 20px;
}
.main-content .hero-heading h1 {
  margin: 7px 0 7px;
  font-size: clamp(42px,4.6vw,54px);
  line-height: .98;
}
.main-content .hero-heading p {
  max-width: 620px;
  font-size: 13.5px;
}
.main-content .hero .composer {
  margin-top: 0;
}
.main-content .hero .tools-banner { margin: 18px auto 0; }
@media (max-width: 760px) {
  .main-content .hero { padding: 22px 0 42px; }
  .main-content .hero-emblem { height: 118px; margin: 0 auto; }
  .main-content .hero-heading { margin-bottom: 16px; }
  .main-content .hero-heading h1 { font-size: clamp(38px,10.5vw,48px); }
  .main-content .hero-heading p { max-width: 520px; font-size: 13px; }
}


/* BaseHeart topbar: compact account context first, quiet utilities second. */
body:not(.editor-open) .responsive-preview-control {
  min-height: 46px;
  padding: 4px;
  gap: 3px;
  border: 1px solid var(--bh-border-soft);
  border-radius: 13px;
  background: rgba(15,13,19,.82);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 12px 32px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.025);
}
body:not(.editor-open) .account-context-button {
  min-height: 38px;
  max-width: 214px;
  padding: 4px 7px 4px 4px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
}
body:not(.editor-open) .account-context-button:hover,
body:not(.editor-open) .account-context-button[aria-expanded="true"] {
  border-color: rgba(240,68,145,.24);
  background: rgba(240,68,145,.07);
}
body:not(.editor-open) .account-context-avatar { width: 27px; height: 27px; }
body:not(.editor-open) .account-context-copy strong { font-size: 12px; }
body:not(.editor-open) .account-context-copy small { font-size: 10.5px; }
body:not(.editor-open) .account-context-hearts {
  min-height: 25px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: rgba(240,68,145,.07);
}
body:not(.editor-open) .utility-button,
body:not(.editor-open) .responsive-preview-button {
  min-height: 38px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
}
body:not(.editor-open) .utility-button:hover,
body:not(.editor-open) .responsive-preview-button:hover,
body:not(.editor-open) .responsive-preview-button[aria-expanded="true"] {
  border-color: var(--bh-border);
  background: rgba(255,255,255,.045);
}
body:not(.editor-open) .notification-button { width: 36px; }
body:not(.editor-open) .language-button { min-width: 56px; padding-inline: 7px; }
body:not(.editor-open) .responsive-preview-button {
  color: var(--bh-muted);
}
body:not(.editor-open) .responsive-preview-button > span:nth-child(2) { color: #d8d4df; }
body:not(.editor-open) .preview-device-label { color: var(--bh-muted-2); }
@media (max-width: 1180px) {
  body:not(.editor-open) .responsive-preview-button .preview-device-label { display:none; }
}
@media (max-width: 760px) {
  body:not(.editor-open) .responsive-preview-control { max-width: calc(100vw - 70px); }
  body:not(.editor-open) .account-context-copy,
  body:not(.editor-open) .account-context-hearts,
  body:not(.editor-open) .rewards-topbar-label { display:none; }
  body:not(.editor-open) .account-context-button { grid-template-columns: 28px 10px; width: 48px; padding-inline: 5px; }
}


/* Keep BaseHeart's primary navigation anchored to the left in every locale.
   RTL languages still keep RTL text/content flow; only the app chrome stays spatially stable. */
html[dir="rtl"] #sidebar {
  left: 0;
  right: auto;
  border-left: 0;
  border-right: 1px solid var(--border-soft);
  --sidebar-hover-angle: 90deg;
  --sidebar-selected-rail: inset 4px 0 0 #f04491;
}
html[dir="rtl"] .main-content {
  margin-left: 258px;
  margin-right: 0;
}
html[dir="rtl"] .responsive-preview-control {
  left: auto;
  right: 18px;
}
html[dir="rtl"] .language-menu,
html[dir="rtl"] .responsive-preview-menu {
  left: auto;
  right: 0;
}
html[dir="rtl"] .notification-popover {
  left: auto;
  right: 18px;
}
html[dir="rtl"] body[data-preview-device="computer"] .sidebar {
  left: 0;
  right: auto;
}
html[dir="rtl"] body[data-preview-device="computer"] .main-content {
  margin-left: 258px;
  margin-right: 0;
}
html[dir="rtl"] body[data-preview-device="computer"] .responsive-preview-control {
  left: auto;
  right: 18px;
}
html[dir="rtl"] body[data-preview-device="mobile"] .sidebar,
html[dir="rtl"] body[data-preview-device="tablet"] .sidebar {
  left: var(--preview-shell-offset);
  right: auto;
  transform: translateX(calc(-101% - var(--preview-shell-offset)));
}
html[dir="rtl"] body[data-preview-device="mobile"].sidebar-open .sidebar,
html[dir="rtl"] body[data-preview-device="tablet"].sidebar-open .sidebar {
  transform: translateX(0);
}
html[dir="rtl"] body[data-preview-device="mobile"] .mobile-sidebar-toggle,
html[dir="rtl"] body[data-preview-device="tablet"] .mobile-sidebar-toggle {
  left: calc(var(--preview-shell-offset) + 12px);
  right: auto;
}
html[dir="rtl"] body[data-preview-device="mobile"] .mobile-backdrop,
html[dir="rtl"] body[data-preview-device="tablet"] .mobile-backdrop {
  inset: 0 var(--preview-shell-offset) 0 calc(var(--preview-shell-offset) + 250px);
}
html[dir="rtl"] body[data-preview-device="mobile"] .responsive-preview-control,
html[dir="rtl"] body[data-preview-device="tablet"] .responsive-preview-control {
  left: auto;
  right: calc(var(--preview-shell-offset) + 12px);
}
@media (max-width: 1024px) {
  html[dir="rtl"] body:not([data-preview-device]) .sidebar {
    left: 0;
    right: auto;
    transform: translateX(-101%);
  }
  html[dir="rtl"] body:not([data-preview-device]).sidebar-open .sidebar {
    transform: translateX(0);
  }
  html[dir="rtl"] body:not([data-preview-device]) .main-content {
    margin-left: 0;
    margin-right: 0;
  }
  html[dir="rtl"] body:not([data-preview-device]) .mobile-sidebar-toggle {
    left: max(12px,env(safe-area-inset-left));
    right: auto;
  }
  html[dir="rtl"] body:not([data-preview-device]) .mobile-backdrop {
    inset: 0 0 0 250px;
  }
  html[dir="rtl"] body:not([data-preview-device]) .responsive-preview-control {
    left: auto;
    right: max(12px,env(safe-area-inset-right));
  }
}

/* M6 — Build composer: one clear work surface with a quiet control dock. */
.main-content .composer {
  padding: 12px;
  border-radius: var(--radius-xl);
}
.main-content .composer textarea {
  min-height: 112px;
  padding: 12px 12px 14px;
  font-size: 15px;
  line-height: 1.55;
}
.main-content .composer-footer {
  min-height: 48px;
  margin-top: 2px;
  padding: 6px;
  border: 1px solid var(--bh-border-soft);
  border-radius: var(--radius-md);
  background: rgba(8,7,11,.34);
}
.main-content .composer-left {
  min-width: 0;
  gap: 6px;
}
.main-content .composer :is(.composer-level-select,#dashboardCategory,.icon-button) {
  min-height: 36px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background-color: rgba(255,255,255,.035);
}
.main-content .composer :is(.composer-level-select,#dashboardCategory,.icon-button):hover {
  border-color: var(--bh-border);
  background-color: rgba(255,255,255,.055);
}
.main-content .heart-estimate {
  padding-inline: 5px;
  color: var(--bh-muted);
  font-variant-numeric: tabular-nums;
}
.main-content .build-button {
  min-width: 96px;
  min-height: 38px;
  border: 1px solid rgba(255,119,177,.34);
  border-radius: 10px;
  background: var(--bh-action);
  box-shadow: 0 8px 24px rgba(240,68,145,.17), inset 0 1px rgba(255,255,255,.12);
  transition: transform var(--duration-fast) ease, background var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.main-content .build-button:not(:disabled):hover {
  transform: translateY(-1px);
  background: var(--bh-action-strong);
  box-shadow: 0 10px 28px rgba(240,68,145,.24), inset 0 1px rgba(255,255,255,.14);
}
.main-content .build-button:disabled {
  border-color: transparent;
  background: rgba(255,255,255,.045);
  box-shadow: none;
  color: #68636f;
}
@media (max-width:620px) {
  body:not([data-preview-device]) .main-content .composer-footer {
    padding: 7px;
    gap: 8px;
  }
  body:not([data-preview-device]) .main-content .build-button {
    min-height: 44px;
  }
}

/* M7 — My Work: project cards read like live work, not generic tiles. */
.main-content .projects-section {
  padding-top: 34px;
}
.main-content .projects-section .section-heading {
  margin-bottom: 14px;
}
.main-content .project-grid {
  gap: 14px;
}
.main-content .project-card {
  border-color: var(--bh-border-soft);
  background: rgba(19,17,23,.88);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.main-content .project-card:hover {
  transform: translateY(-2px);
  border-color: rgba(240,68,145,.30);
  background: rgba(25,22,30,.94);
  box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
}
.main-content .project-preview {
  height: 164px;
  border-bottom-color: var(--bh-border-soft);
}
.main-content .project-body {
  min-height: 64px;
  padding: 12px 13px 13px;
}
.main-content .project-meta {
  gap: 5px;
}
.main-content .project-meta strong {
  color: var(--bh-text);
  font-size: 13.5px;
}
.main-content .project-meta span {
  color: var(--bh-muted-2);
}
.main-content .project-status {
  padding: 4px 7px;
  border: 1px solid var(--bh-border-soft);
  background: rgba(255,255,255,.035);
  font-size: 11px;
  font-weight: 650;
}
.main-content .project-status[data-status="published"] { color: var(--bh-success); background: rgba(127,200,155,.07); }
.main-content .project-status[data-status="ready"] { color: #aebff0; background: rgba(129,158,224,.08); }
.main-content .project-status[data-status="attention"] { color: var(--bh-warning); background: rgba(221,179,106,.08); }
.main-content .project-status[data-status="draft"] { color: #c4adc9; background: rgba(196,173,201,.06); }
.main-content .empty-state {
  min-height: 180px;
  gap: 7px;
  border-color: rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  background: rgba(18,16,22,.50);
}
.main-content .empty-state strong { color: var(--bh-text); font-size: 14px; }
.main-content .empty-state span { color: var(--bh-muted); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
  .main-content .project-card { transition: none; }
  .main-content .project-card:hover { transform: none; }
}

/* M8 — Connector readiness is visible as infrastructure status, not a promo. */
.main-content .tools-banner {
  width: min(660px,100%);
  grid-template-columns: 36px minmax(160px,1fr) auto auto;
  gap: 10px;
  padding: 7px 9px;
}
.main-content .tools-status-list {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.main-content .tools-status-chip {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid var(--bh-border-soft);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.025);
  color: var(--bh-muted-2);
  white-space: nowrap;
}
.main-content .tools-status-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #68636f;
  box-shadow: 0 0 0 3px rgba(104,99,111,.08);
}
.main-content .tools-status-chip b {
  font-size: 10.5px;
  font-weight: 650;
}
.main-content .tools-status-chip.is-connected {
  border-color: rgba(127,200,155,.18);
  color: #9fd6b3;
  background: rgba(127,200,155,.055);
}
.main-content .tools-status-chip.is-connected i {
  background: var(--bh-success);
  box-shadow: 0 0 0 3px rgba(127,200,155,.10);
}
.main-content .tools-status-chip.is-disconnected {
  color: var(--bh-muted-2);
  background: rgba(255,255,255,.025);
}
.main-content .tools-status-chip.is-disconnected i {
  background: #68636f;
  box-shadow: 0 0 0 3px rgba(104,99,111,.08);
}
.main-content .tools-status-chip.is-checking {
  color: var(--bh-muted);
  background: rgba(255,255,255,.03);
}
.main-content .tools-status-chip.is-checking i {
  background: #9b94a3;
  box-shadow: 0 0 0 3px rgba(155,148,163,.10);
  animation: connector-status-checking 1.1s ease-in-out infinite;
}
@keyframes connector-status-checking {
  0%,100% { opacity:.45; transform:scale(.82); }
  50% { opacity:1; transform:scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .main-content .tools-status-chip.is-checking i { animation:none; }
}
.main-content .tools-banner-arrow { color: var(--bh-muted-2); }
@media (max-width:760px) {
  .main-content .tools-banner { grid-template-columns: 34px minmax(0,1fr) auto; }
  .main-content .tools-status-list { grid-column: 2 / -1; justify-self: start; flex-wrap: wrap; }
  .main-content .tools-banner-arrow { grid-column: 3; grid-row: 1; }
}

/* M9 — Secondary surfaces share one quiet BaseHeart material system. */
body .dialog-card,
body .language-menu,
body .responsive-preview-menu,
body .notification-popover,
body .account-context-menu {
  border-color: var(--bh-border);
  border-radius: var(--radius-lg);
  background: rgba(20,17,24,.96);
  box-shadow: var(--shadow-2), inset 0 1px rgba(255,255,255,.035);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  backdrop-filter: blur(20px) saturate(125%);
}
body .dialog-card {
  color: var(--bh-text);
}
body .dialog-card :is(input,textarea,select),
body .language-option,
body .responsive-preview-option,
body .account-context-option {
  border-color: var(--bh-border-soft);
  border-radius: var(--radius-sm);
}
body .language-option:hover,
body .responsive-preview-option:hover,
body .account-context-option:hover,
body .dialog-list button:hover {
  background: rgba(255,255,255,.045);
}
body .language-option[aria-checked="true"],
body .responsive-preview-option.active,
body .account-context-option.active {
  border-color: rgba(240,68,145,.28);
  background: rgba(240,68,145,.075);
}
.main-content .project-toolbar-control,
.main-content .project-toolbar-view,
.main-content .folder-chip {
  border-radius: var(--radius-sm);
}
.main-content .template-card,
.main-content .recent-card {
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px rgba(255,255,255,.02);
}
.main-content .template-card:hover,
.main-content .recent-card:hover {
  border-color: rgba(240,68,145,.28);
  box-shadow: 0 12px 30px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.03);
}
body :is(.dialog-card,.language-menu,.responsive-preview-menu,.notification-popover,.account-context-menu) button:focus-visible {
  outline-color: var(--bh-action);
  box-shadow: var(--focus-ring);
}

/* M10 — Motion is short and functional; Heart Core owns continuous movement. */
body #sidebar :is(.nav-item,.filter-item,.nav-group-toggle),
body:not(.editor-open) :is(.utility-button,.responsive-preview-button,.account-context-button),
.main-content :is(.tools-banner,.folder-chip,.project-toolbar-control,.project-toolbar-view),
body :is(.language-option,.responsive-preview-option,.account-context-option,.dialog-list button) {
  transition:
    background-color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    box-shadow var(--duration-fast) ease,
    transform var(--duration-fast) var(--ease-standard);
}
body #sidebar :is(.nav-item,.filter-item,.nav-group-toggle):active,
body:not(.editor-open) :is(.utility-button,.responsive-preview-button,.account-context-button):active,
.main-content :is(.tools-banner,.folder-chip,.project-toolbar-control,.project-toolbar-view):active {
  transform: translateY(1px);
}
.main-content .tools-status-chip i {
  transition: background-color var(--duration-normal) ease, box-shadow var(--duration-normal) ease;
}
@media (prefers-reduced-motion: reduce) {
  body #sidebar :is(.nav-item,.filter-item,.nav-group-toggle),
  body:not(.editor-open) :is(.utility-button,.responsive-preview-button,.account-context-button),
  .main-content :is(.tools-banner,.folder-chip,.project-toolbar-control,.project-toolbar-view,.build-button,.project-card),
  body :is(.language-option,.responsive-preview-option,.account-context-option,.dialog-list button),
  .main-content .tools-status-chip i {
    transition: none !important;
    animation: none !important;
  }
  body #sidebar :is(.nav-item,.filter-item,.nav-group-toggle):active,
  body:not(.editor-open) :is(.utility-button,.responsive-preview-button,.account-context-button):active,
  .main-content :is(.tools-banner,.folder-chip,.project-toolbar-control,.project-toolbar-view,.build-button):active {
    transform: none !important;
  }
}

/* M11 — Responsive compositions and stable left-side app chrome in every locale. */
@media (max-width:1024px) {
  body:not([data-preview-device]) .content-wrap {
    width: min(100% - 32px, 900px);
  }
}
@media (max-width:760px) {
  .main-content .content-wrap {
    width: calc(100% - 24px);
  }
  .main-content .hero {
    width: 100%;
  }
  .main-content .tools-banner {
    width: 100%;
    grid-template-columns: 34px minmax(0,1fr) auto;
  }
  .main-content .tools-status-list {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
    padding: 2px 0 0 44px;
  }
  .main-content .tools-banner-arrow {
    display: none;
  }
  .main-content .project-toolbar-control,
  .main-content .project-toolbar-view {
    min-height: 44px;
  }
}
@media (max-width:520px) {
  .main-content .hero-heading h1 {
    font-size: clamp(34px,10vw,42px);
    overflow-wrap: anywhere;
  }
  .main-content .composer {
    padding: 9px;
  }
  .main-content .tools-banner {
    grid-template-columns: 32px minmax(0,1fr);
  }
  .main-content .tools-status-list {
    padding-left: 0;
    gap: 4px;
  }
  .main-content .tools-status-chip {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding-inline: 6px;
  }
  .main-content .tools-status-chip b {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .main-content .section-heading {
    gap: 10px;
  }
}
html[dir="rtl"] #sidebar {
  left: 0;
  right: auto;
}
html[dir="rtl"] .main-content {
  margin-left: 258px;
  margin-right: 0;
}
@media (max-width:1024px) {
  html[dir="rtl"] body:not([data-preview-device]) .main-content {
    margin-left: 0;
    margin-right: 0;
  }
}
html[dir="rtl"] body[data-preview-device="mobile"] .main-content,
html[dir="rtl"] body[data-preview-device="tablet"] .main-content {
  margin-left: 0;
  margin-right: 0;
}

/* Explicit preview devices mirror the real responsive compositions even in a desktop browser. */
body[data-preview-device="mobile"] .main-content .hero-heading h1 {
  font-size: clamp(34px,10vw,42px);
  overflow-wrap: anywhere;
}
body[data-preview-device="mobile"] .main-content .composer {
  padding: 9px;
}
body[data-preview-device="mobile"] .main-content .tools-banner {
  width: 100%;
  grid-template-columns: 32px minmax(0,1fr);
}
body[data-preview-device="mobile"] .main-content .tools-status-list {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 0;
  gap: 4px;
}
body[data-preview-device="mobile"] .main-content .tools-status-chip {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  padding-inline: 6px;
}
body[data-preview-device="mobile"] .main-content .tools-banner-arrow {
  display: none;
}
body[data-preview-device="mobile"] .main-content .project-toolbar-control,
body[data-preview-device="mobile"] .main-content .project-toolbar-view,
body[data-preview-device="tablet"] .main-content .project-toolbar-control,
body[data-preview-device="tablet"] .main-content .project-toolbar-view {
  min-height: 44px;
}
body[data-preview-device="mobile"]:not(.editor-open) .responsive-preview-control {
  max-width: calc(var(--preview-shell-width) - 76px);
}
body[data-preview-device="mobile"]:not(.editor-open) .account-context-copy,
body[data-preview-device="mobile"]:not(.editor-open) .account-context-hearts,
body[data-preview-device="mobile"]:not(.editor-open) .rewards-topbar-label {
  display: none;
}
body[data-preview-device="mobile"]:not(.editor-open) .account-context-button {
  width: 48px;
  grid-template-columns: 28px 10px;
  padding-inline: 5px;
}
body[data-preview-device="mobile"]:not(.editor-open) .language-button > span:first-child {
  display: none;
}
html[dir="rtl"] body[data-preview-device="mobile"] .mobile-sidebar-toggle {
  left: calc(var(--preview-shell-offset) + 12px);
  right: auto;
  z-index: 45;
}
html[dir="rtl"] body[data-preview-device="mobile"] .responsive-preview-control {
  left: auto;
  right: calc(var(--preview-shell-offset) + 12px);
}

/* BASEHEART_UI_UPLIFT_2026_10_04_END */