/* Shared Ghost foundation. Both applications load this exact file. */
:root {
  --ghost-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --ghost-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --ghost-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --ghost-bg: #0D0E12;
  --ghost-header-bg: rgb(13 14 18 / 94%);
  --ghost-inset: #111217;
  --ghost-surface: #18191F;
  --ghost-raised: #202127;
  --ghost-hover: #2A2B34;
  --ghost-border: #292A33;
  --ghost-line: #383A46;
  --ghost-text: #F5F5F7;
  --ghost-secondary: #D5D5DE;
  --ghost-muted: #A3A4B2;
  --ghost-accent: #D0004A;
  --ghost-accent-hover: #B60041;
  --ghost-link: #FF709E;
  --ghost-tint: #2B1520;
  --ghost-success: #58D49A;
  --ghost-warning: #EDC269;
  --ghost-danger: #FF6B76;
  --ghost-info: #7AA9F4;
  --ghost-focus: 0 0 0 3px rgb(255 112 158 / 22%);
  --ghost-popup-shadow: 0 16px 48px rgb(0 0 0 / 38%), 0 2px 8px rgb(0 0 0 / 24%);
  --ghost-sidebar: 256px;
  --ghost-header: 72px;
  --ghost-content: 1280px;
  --ghost-ease: cubic-bezier(.2,.8,.2,1);
}
:root[data-theme]:not(.dark) {
  color-scheme: light;
  --ghost-bg: #F5F5F7;
  --ghost-header-bg: rgb(245 245 247 / 94%);
  --ghost-inset: #F2F2F6;
  --ghost-surface: #FFFFFF;
  --ghost-raised: #F2F2F6;
  --ghost-hover: #E9E9EF;
  --ghost-border: #E1E1E8;
  --ghost-line: #CCCCD6;
  --ghost-text: #1D1D24;
  --ghost-secondary: #3C3C46;
  --ghost-muted: #626272;
  --ghost-link: #B60041;
  --ghost-tint: #FCE5EF;
  --ghost-success: #137B4D;
  --ghost-warning: #93610D;
  --ghost-danger: #BE2436;
  --ghost-info: #245DBA;
  --ghost-popup-shadow: 0 16px 48px rgb(25 25 35 / 12%), 0 2px 8px rgb(25 25 35 / 8%);
  --accent-lt: #B60041;
  --muted-2: #69697B;
  --muted-3: #8A8B97;
  --success-bg: #E6F5ED;
  --warning-bg: #FCF3DE;
  --danger-bg: #FDEBEF;
  --info-bg: #E9EFFB;
  --violet-bg: #F0EAFB;
}

body { font-family: var(--ghost-font); -webkit-font-smoothing: antialiased; }
.ghost-startup { display: flex; min-height: 100dvh; align-items: center; justify-content: center; gap: 12px; background: var(--ghost-bg); color: var(--ghost-muted); font: 400 14px/1.5 var(--ghost-font); }
.ghost-startup-spinner { width: 18px; height: 18px; border: 2px solid var(--ghost-border); border-top-color: var(--ghost-link); border-radius: 50%; animation: ghost-startup-spin .8s linear infinite; }
@keyframes ghost-startup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ghost-startup-spinner { animation: none; } }
.base-ui-disable-scrollbar { scrollbar-width: none; }
.base-ui-disable-scrollbar::-webkit-scrollbar { display: none; }
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; touch-action: manipulation; }

/* One module selector, one position, one set of labels in either application. */
.ghost-topbar {
  position: sticky; top: 0; inset-inline: auto; z-index: 35;
  display: flex; align-items: center; gap: 16px;
  width: auto; height: var(--ghost-header); margin-left: var(--ghost-sidebar);
  padding: 0 32px; border-bottom: 1px solid var(--ghost-border);
  background: var(--ghost-header-bg); color: var(--ghost-text);
  backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px);
  font: 400 15px/1.5 var(--ghost-font);
}
.ghost-topbar .ghost-header-brand { display: none; }
.ghost-header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.ghost-modules {
  display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px;
  flex: none; width: 264px; padding: 4px; margin: 0;
  border: 1px solid var(--ghost-border); border-radius: 14px; background: var(--ghost-inset);
}
.ghost-module {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; min-height: 36px; padding: 8px 12px; border: 1px solid transparent;
  border-radius: 10px; color: var(--ghost-muted);
  font: 550 14px/1.25 var(--ghost-font); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: color 160ms var(--ghost-ease), background 160ms var(--ghost-ease);
  -webkit-tap-highlight-color: transparent;
}
.ghost-module svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ghost-module:hover { color: var(--ghost-text); background: var(--ghost-raised); text-decoration: none; }
.ghost-module[aria-current="page"] {
  color: var(--ghost-text); background: var(--ghost-raised); border-color: var(--ghost-line);
  box-shadow: 0 1px 3px rgb(0 0 0 / 18%);
}
.ghost-module[aria-current="page"] svg { color: var(--ghost-link); }
.ghost-module:focus-visible { outline: 2px solid var(--ghost-link); outline-offset: 2px; }
.ghost-brand { display: flex; align-items: center; gap: 12px; color: var(--ghost-text); text-decoration: none; }
.ghost-brand:hover { text-decoration: none; }
.ghost-brand img { display: block; width: 38px; height: 38px; flex: none; }
.ghost-brand-name { display: flex; flex-direction: column; font: 700 15px/1.12 var(--ghost-display); letter-spacing: -.015em; }
.ghost-brand-name span:last-child { color: var(--ghost-link); }
.ghost-account-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; background: var(--ghost-tint); color: var(--ghost-link); font: 700 13px/1 var(--ghost-font); letter-spacing: .02em; }
.ghost-account-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Account and notification controls are shared by both modules. */
.ghost-account-control { display: flex; align-items: center; }
button.ghost-header-button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 11px; background: transparent; color: var(--ghost-secondary); cursor: pointer; box-shadow: none; }
button.ghost-header-button:hover, button.ghost-header-button[aria-expanded="true"] { background: var(--ghost-hover); color: var(--ghost-text); }
button.ghost-header-button:focus-visible, .ghost-menu-item:focus-visible { outline: 2px solid var(--ghost-link); outline-offset: 2px; }
.ghost-header-button > svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.ghost-notification-count { position: absolute; top: 0; right: -2px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 10px; background: var(--ghost-accent); color: #fff; font: 650 10px/1 var(--ghost-font); box-shadow: 0 0 0 2px var(--ghost-bg); }
.ghost-notification-count[hidden] { display: none; }
.ghost-account-menu { position: fixed; inset: 60px 32px auto auto; margin: 0; width: 240px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 80px); overflow-y: auto; padding: 6px; border: 1px solid var(--ghost-line); border-radius: 15px; background: var(--ghost-raised); color: var(--ghost-text); box-shadow: var(--ghost-popup-shadow); font: 400 14px/1.4 var(--ghost-font); }
.ghost-menu-heading { padding: 7px 7px 6px; }
.ghost-menu-heading span, .ghost-menu-label { color: var(--ghost-muted); font-size: 12px; }
.ghost-menu-heading strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.ghost-menu-label { display: flex; align-items: center; gap: 8px; padding: 6px 7px; }
.ghost-menu-label svg { width: 14px; height: 14px; }
.ghost-account-menu svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ghost-menu-separator { height: 1px; background: var(--ghost-border); margin: 5px -6px; }
.ghost-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 9px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ghost-text); font: 400 14px/1.4 var(--ghost-font); text-align: left; cursor: pointer; }
.ghost-menu-item:focus-visible { background: var(--ghost-hover); }
@media (hover: hover) and (pointer: fine) { .ghost-menu-item:hover { background: var(--ghost-hover); } }
.ghost-menu-item svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.ghost-menu-item .ghost-menu-check { margin-left: auto; visibility: hidden; }
.ghost-menu-item[aria-checked="true"] .ghost-menu-check { visibility: visible; }
.ghost-menu-danger { color: var(--ghost-danger); }
.ghost-notifications { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(448px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; border: 0; border-left: 1px solid var(--ghost-border); background: var(--ghost-bg); color: var(--ghost-text); box-shadow: var(--ghost-popup-shadow); font: 400 14px/1.5 var(--ghost-font); }
.ghost-notifications[open] { display: flex; flex-direction: column; }
.ghost-notifications::backdrop { background: rgb(0 0 0 / 45%); }
.ghost-notifications-heading { display: flex; align-items: flex-start; gap: 12px; padding: calc(24px + env(safe-area-inset-top,0px)) 24px 20px; }
.ghost-notifications-heading > div { flex: 1; }
.ghost-notifications-heading h2 { margin: 0 0 6px; font: 650 20px/1.3 var(--ghost-display); letter-spacing: -.02em; }
.ghost-notifications-heading p { margin: 0; font-size: 13px; color: var(--ghost-muted); }
.ghost-notifications-list { flex: 1; min-height: 0; padding: 0 12px 12px; overflow-y: auto; overscroll-behavior: contain; }
.ghost-notifications-empty { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 64px 20px; text-align: center; color: var(--ghost-muted); }
.ghost-notifications-empty > svg { width: 28px; height: 28px; }
.ghost-notifications-empty strong { color: var(--ghost-text); }
.ghost-notifications-empty p { margin: 0; font-size: 13px; }
.ghost-notification-item { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 14px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ghost-text); font: inherit; text-align: left; cursor: pointer; }
.ghost-notification-item:hover { background: var(--ghost-raised); }
.ghost-notification-item[data-unread="true"] { background: var(--ghost-tint); }
.ghost-notification-item > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ghost-info); }
.ghost-notification-item[data-tone="warning"] > svg { color: var(--ghost-warning); }
.ghost-notification-item[data-tone="danger"] > svg { color: var(--ghost-danger); }
.ghost-notification-item > span { min-width: 0; }
.ghost-notification-item strong { display: block; font-weight: 550; font-size: 13px; overflow-wrap: anywhere; }
.ghost-notification-item small { display: block; margin-top: 5px; color: var(--ghost-muted); font-size: 11px; }
.ghost-notification-unread { width: 6px; height: 6px; margin: 7px 0 0 auto; border-radius: 50%; background: var(--ghost-link); flex: none; }
.ghost-notifications-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--ghost-border); padding: 16px 20px calc(16px + env(safe-area-inset-bottom,0px)); }
.ghost-notifications-link { border: 0; padding: 6px 0; background: transparent; color: var(--ghost-link); cursor: pointer; font: 500 13px/1.4 var(--ghost-font); }
.ghost-notifications-link:disabled { color: var(--ghost-muted); cursor: default; }
@media (max-width: 1023px) { .ghost-account-menu { top: calc(56px + env(safe-area-inset-top,0px)); right: 20px; } }
@media (max-width: 600px) { .ghost-account-menu { right: 16px; } }
@media (max-width: 359px) { .ghost-account-menu { right: 12px; } }

.ghost-execution-note { margin-bottom: 24px; border: 1px solid var(--ghost-border); border-radius: 12px; background: var(--ghost-surface); }
.ghost-execution-note summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; list-style: none; cursor: pointer; color: var(--ghost-muted); font: 400 13.5px/1.4 var(--ghost-font); }
.ghost-execution-note summary::-webkit-details-marker { display: none; }
.ghost-execution-note summary::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ghost-warning); flex: none; }
.ghost-execution-note summary svg { width: 16px; height: 16px; margin-left: auto; flex: none; }
.ghost-execution-note[open] summary svg { transform: rotate(180deg); }
.ghost-execution-note p { padding: 0 16px 12px 34px; color: var(--ghost-muted); font-size: 14px; }

/* Native form semantics retained; the picker itself belongs to the design system.
   Browsers without customizable selects keep their accessible OS picker. */
select { font-family: var(--ghost-font); }
select option, select optgroup { background: var(--ghost-raised); color: var(--ghost-text); }
body :is(select, [data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"]) {
  min-height: 44px; border-radius: 11px; font-family: var(--ghost-font); font-size: 15px;
}
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select:not([multiple]):not([size]) {
    align-items: center; gap: 12px; min-width: 0; max-width: 100%;
    padding-right: 12px; background-image: none; cursor: pointer;
    text-overflow: ellipsis;
  }
  select::picker-icon { flex: none; color: var(--ghost-muted); transition: rotate 160ms var(--ghost-ease); }
  select:open::picker-icon { rotate: 180deg; }
  select::picker(select) {
    margin-block: 6px; padding: 6px; border: 1px solid var(--ghost-line); border-radius: 14px;
    background: var(--ghost-raised); color: var(--ghost-text); box-shadow: var(--ghost-popup-shadow);
    font: 400 14.5px/1.4 var(--ghost-font);
    min-width: anchor-size(width); max-width: calc(100vw - 24px);
    max-height: min(360px, 55dvh); overflow: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--ghost-line) transparent;
  }
  select option {
    display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 9px 12px;
    border: 0; border-radius: 8px; background: transparent; color: var(--ghost-secondary);
    font: inherit; white-space: normal; overflow-wrap: anywhere;
  }
  select option:hover, select option:focus { background: var(--ghost-hover); color: var(--ghost-text); outline: none; }
  select option:checked { background: var(--ghost-tint); color: var(--ghost-link); font-weight: 550; }
  select option:disabled { opacity: .45; }
  select option::checkmark { order: 1; margin-left: auto; color: var(--ghost-link); }
  select optgroup { padding: 4px; font-size: 12px; font-weight: 600; }
  [data-slot="native-select-icon"] { display: none; }
}

@media (min-width: 1024px) {
  .ghost-header-search { display: none; }
  .ghost-header-status { display: none; }
}
@media (min-width: 1280px) { .ghost-header-search { display: block; } }
@media (min-width: 1440px) { .ghost-header-status { display: block; } }
@media (max-width: 1023px) {
  :root { --ghost-header: 116px; }
  .ghost-topbar {
    display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 40px 44px;
    gap: 8px 12px; height: calc(var(--ghost-header) + env(safe-area-inset-top,0px)); margin-left: 0;
    padding: calc(12px + env(safe-area-inset-top,0px)) 20px 12px;
  }
  .ghost-topbar .ghost-header-brand { display: flex; min-width: 0; }
  .ghost-topbar .ghost-header-brand img { width: 32px; height: 32px; }
  .ghost-topbar .ghost-brand-name { font-size: 13.5px; }
  .ghost-header-actions { grid-column: 2; grid-row: 1; gap: 4px; }
  .ghost-modules { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 44px; padding: 3px; border-radius: 13px; }
  .ghost-module { min-height: 36px; padding: 7px 12px; }
  .ghost-header-search, .ghost-header-status { display: none; }
  select::picker(select) { max-height: min(360px, 50dvh); }
  select option { min-height: 44px; }
}
@media (max-width: 640px) {
  .ghost-topbar { padding-inline: 16px; }
  body :is(select, [data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"]) { font-size: 16px; }
  body .orbit-app [role="tablist"] {
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px;
    width: 100%; max-width: 100%; height: auto; padding: 6px; overflow: visible;
  }
  body .orbit-app [role="tablist"] > [role="tab"] {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-width: 0; min-height: 44px; height: auto; padding: 8px 10px;
    border: 1px solid transparent; border-radius: 9px; white-space: normal; font-size: 13.5px; line-height: 1.3;
  }
  body .orbit-app [role="tablist"] > [role="tab"]:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body .orbit-app [role="tablist"] > [role="tab"][aria-selected="true"] { background: var(--ghost-tint); color: var(--ghost-link); border-color: var(--ghost-border); }
}
@media (max-width: 380px) { .ghost-topbar { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .ghost-module, select::picker-icon { transition: none; }
}
@media (forced-colors: active) {
  .ghost-module[aria-current="page"] { border-color: Highlight; }
  select::picker(select) { border: 1px solid CanvasText; }
}