.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.app-shell { min-height: 100vh; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-height);
  padding: 0 25px;
  border-bottom: 1px solid rgba(225, 227, 238, 0.9);
  background: var(--surface-glass);
  box-shadow: 0 4px 20px rgba(36, 40, 70, 0.035);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.brand-cluster, .brand, .topbar-actions, .brand-caption, .runtime-status { display: flex; align-items: center; }
.brand { gap: 11px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #fff; background: var(--purple); box-shadow: 0 5px 12px rgba(109, 98, 233, 0.24); }
.brand-mark .icon { width: 17px; height: 17px; }
.brand-name { font-size: 15px; font-weight: 700; }
.brand-divider { width: 1px; height: 19px; margin: 0 2px; background: var(--line-strong); }
.brand-caption { color: var(--muted); font-size: 12px; }
.topbar-actions { gap: 12px; }
.runtime-status { gap: 8px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); background: rgba(255,255,255,.64); font-size: 12px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.runtime-status[data-state="ready"] .status-dot, .overview-item-status strong .status-dot { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-soft); }
.runtime-status[data-state="error"] .status-dot { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.icon-button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.icon-button:hover { color: var(--purple-deep); border-color: var(--line); background: var(--surface); }
.icon-button:active, .text-button:active, .nav-item:active, .module-tile:active { transform: scale(.96); }
.mobile-menu-button { display: none; }

.app-body { display: flex; min-height: calc(100vh - var(--topbar-height)); }
.sidebar {
  position: sticky;
  top: var(--topbar-height);
  display: flex;
  flex: 0 0 var(--sidebar-width);
  flex-direction: column;
  width: var(--sidebar-width);
  height: calc(100vh - var(--topbar-height));
  padding: 24px 15px 16px;
  border-right: 1px solid var(--line);
  background: rgba(250, 250, 253, 0.8);
  transition: width var(--motion-base) var(--ease-out), flex-basis var(--motion-base) var(--ease-out), padding var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}
.sidebar-heading, .module-nav-heading { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 0 9px; }
.eyebrow { color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1.4; }
.sidebar-collapse-button { width: 30px; height: 30px; }
.sidebar-collapse-button .icon { width: 16px; height: 16px; }
.primary-nav { display: grid; gap: 5px; margin-top: 12px; }
.nav-item, .module-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  gap: 11px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.nav-item:hover, .module-link:hover { color: var(--purple-deep); background: rgba(255, 255, 255, .76); }
.nav-item.is-active, .module-link.is-active { border-color: #e4e1ff; color: var(--purple-deep); background: var(--purple-soft); }
.nav-icon, .module-link-icon { display: grid; flex: 0 0 20px; place-items: center; color: currentColor; }
.nav-icon .icon, .module-link-icon .icon { width: 17px; height: 17px; }
.nav-label, .module-link-name { overflow: hidden; color: inherit; font-size: 13px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.module-nav-heading { margin-top: 28px; }
.module-count { display: inline-grid; min-width: 23px; height: 21px; padding: 0 6px; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 650; }
.module-menu { display: grid; align-content: start; gap: 4px; min-height: 0; margin-top: 7px; overflow: auto; }
.module-link { min-height: 40px; }
.module-link-icon { color: var(--blue); }
.module-link-description { display: none; }
.sidebar-bottom { display: flex; align-items: center; gap: 10px; min-height: 42px; margin-top: auto; padding: 0 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.sidebar-bottom-mark { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 6px; background: var(--blue-soft); }
.sidebar-bottom-mark span { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

.main-content { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 0 27px 24px; }
.workspace-topline { display: flex; align-items: center; justify-content: space-between; min-height: 57px; border-bottom: 1px solid var(--line); }
.tab-strip { display: flex; align-items: center; align-self: stretch; min-width: 0; gap: 5px; overflow: auto hidden; }
.module-tab-shell { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; min-width: 112px; max-width: 210px; height: 38px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out); }
.module-tab-shell:hover { color: var(--ink); background: rgba(255,255,255,.75); }
.module-tab-shell.is-active { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.88); box-shadow: 0 3px 10px rgba(44, 47, 77, .045); }
.module-tab-shell.is-active::after { position: absolute; right: 14px; bottom: -1px; left: 14px; height: 2px; border-radius: 2px; background: var(--purple); content: ""; }
.home-tab, .module-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 112px;
  max-width: 210px;
  height: 38px;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.home-tab:hover, .module-tab:hover { color: var(--ink); background: rgba(255,255,255,.75); }
.home-tab.is-active, .module-tab.is-active { border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.88); box-shadow: 0 3px 10px rgba(44, 47, 77, .045); }
.home-tab.is-active::after, .module-tab.is-active::after { position: absolute; right: 14px; bottom: -10px; left: 14px; height: 2px; border-radius: 2px; background: var(--purple); content: ""; }
.module-tab { flex: 1 1 auto; min-width: 0; max-width: none; height: 36px; border-color: transparent; border-radius: 7px; background: transparent; box-shadow: none; }
.module-tab:hover { background: transparent; }
.module-tab.is-active { border-color: transparent; background: transparent; box-shadow: none; }
.module-tab.is-active::after { display: none; }
.module-tab-shell .tab-close { flex: 0 0 25px; width: 25px; height: 25px; margin: 0 5px 0 1px; }
.home-tab .icon, .module-tab .icon { width: 15px; height: 15px; }
.module-tab-name { overflow: hidden; font-size: 12px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.tab-close { display: inline-grid; width: 22px; height: 22px; margin-left: auto; place-items: center; border: 0; border-radius: 6px; color: var(--muted); background: transparent; cursor: pointer; }
.tab-close .icon { width: 13px; height: 13px; }
.tab-close:hover { color: var(--red); background: var(--red-soft); }
.workspace-tools { display: flex; align-items: center; padding-left: 12px; }
.workspace-indicator { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.workspace-indicator span { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

.workspace { position: relative; display: flex; flex: 1 1 auto; min-height: 450px; flex-direction: column; padding-top: 18px; outline: none; }
.home-surface { flex: 1 1 auto; min-height: 0; padding: 18px 1px 12px; }
.home-heading-row { display: flex; align-items: flex-start; justify-content: space-between; padding: 7px 0 22px; }
.home-eyebrow { margin: 0 0 8px; color: var(--purple); letter-spacing: 1.1px; }
.home-heading-row h1 { margin: 0; font-size: 23px; font-weight: 650; line-height: 1.3; }
.home-summary { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.home-mark { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #e5e3fb; border-radius: 12px; color: var(--purple); background: var(--purple-soft); }
.overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); background: rgba(255,255,255,.72); box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); }
.overview-item { display: flex; min-height: 116px; flex-direction: column; justify-content: center; padding: 16px 22px; }
.overview-item + .overview-item { border-left: 1px solid var(--line); }
.overview-label { color: var(--muted); font-size: 11px; }
.overview-item strong { display: flex; align-items: center; min-height: 36px; gap: 9px; margin-top: 2px; color: var(--ink); font-size: 25px; font-weight: 620; }
.overview-item-status strong { font-size: 16px; }
.overview-footnote { color: #a0a2b0; font-size: 10px; }
.module-overview-section { margin-top: 34px; }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.section-heading-row h2 { margin: 0; font-size: 14px; font-weight: 650; }
.section-heading-row p { margin: 4px 0 0; color: #a1a3b0; font-size: 9px; }
.text-button { display: inline-flex; align-items: center; min-height: 34px; gap: 7px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; color: var(--blue); background: transparent; font-size: 11px; cursor: pointer; transition: background var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.text-button:hover { background: var(--blue-soft); }
.text-button .icon { width: 14px; height: 14px; }
.module-overview-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 11px; padding-top: 14px; }
.module-tile { display: flex; align-items: center; min-width: 0; min-height: 76px; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; color: inherit; background: rgba(255,255,255,.78); text-align: left; cursor: pointer; box-shadow: 0 5px 18px rgba(39,43,76,.035); transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out); }
.module-tile:hover { border-color: #c8c2ff; box-shadow: var(--shadow-soft); }
.module-tile-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 10px; color: var(--purple); background: var(--purple-soft); }
.module-tile-copy { display: grid; min-width: 0; gap: 4px; }
.module-tile-name { overflow: hidden; font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.module-tile-description { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.module-empty-state { display: flex; align-items: center; min-height: 88px; gap: 11px; color: var(--muted); font-size: 12px; }
.module-empty-state[hidden] { display: none; }
.empty-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: var(--blue); background: var(--blue-soft); }
.empty-icon .icon { width: 16px; height: 16px; }

.module-windows { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
.module-window { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid rgba(223,225,237,.9); border-radius: 8px; background: var(--surface-glass); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px) saturate(135%); }
.module-window[hidden] { display: none; }
.module-window-header { display: flex; align-items: center; min-height: 48px; gap: 12px; padding: 0 10px 0 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.64); }
.window-module-mark { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: var(--purple); background: var(--purple-soft); }
.window-title { overflow: hidden; flex: 1 1 auto; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.window-controls { display: flex; align-items: center; gap: 3px; }
.window-controls .icon-button { width: 31px; height: 31px; }
.window-controls .icon { width: 15px; height: 15px; }
.window-controls .close-window:hover { color: var(--red); border-color: #f3dbe0; background: var(--red-soft); }
.module-frame-wrap { position: relative; display: flex; flex: 1 1 auto; min-height: 0; background: #fbfbfe; }
.module-frame-wrap[hidden] { display: none; }
.module-frame { display: block; width: 100%; height: 100%; flex: 1 1 auto; border: 0; background: transparent; }
.module-frame-message { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 28px; color: var(--muted); background: #fbfbfe; text-align: center; }
.module-frame-message[hidden] { display: none; }
.module-frame-message .icon { width: 24px; height: 24px; color: var(--amber); }
.module-frame-message strong { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.module-frame-message span { max-width: 480px; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.collapsed-window { min-height: 48px; flex: 0 0 48px; }
.collapsed-window .module-frame-wrap { display: none; }

.minimized-dock { display: flex; align-items: center; min-height: 47px; gap: 12px; margin-top: 12px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-glass); box-shadow: 0 6px 18px rgba(40,44,75,.045); backdrop-filter: blur(14px); }
.minimized-dock[hidden] { display: none; }
.dock-caption { flex: 0 0 auto; padding: 0 8px; color: var(--muted); font-size: 10px; }
.dock-items { display: flex; min-width: 0; gap: 7px; overflow: auto hidden; }
.dock-item { display: inline-flex; align-items: center; min-width: 80px; max-width: 190px; height: 32px; gap: 7px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink-soft); background: #fff; font-size: 10px; cursor: pointer; }
.dock-item:hover { border-color: #c9c5f6; color: var(--purple-deep); background: var(--purple-soft); }
.dock-item .icon { width: 13px; height: 13px; }
.dock-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.toast-region { position: fixed; z-index: 50; top: calc(var(--topbar-height) + 12px); right: 20px; display: grid; width: min(360px, calc(100vw - 32px)); gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 9px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-soft); background: rgba(255,255,255,.92); box-shadow: var(--shadow-pop); font-size: 11px; line-height: 1.6; opacity: 0; transform: translateY(-6px); animation: toast-in 180ms var(--ease-out) forwards; backdrop-filter: blur(16px); }
.toast .icon { width: 16px; height: 16px; color: var(--blue); }
.toast[data-kind="error"] .icon { color: var(--red); }
@keyframes toast-in { to { opacity: 1; transform: translateY(0); } }

.sidebar-collapsed .sidebar { flex-basis: var(--sidebar-compact-width); width: var(--sidebar-compact-width); padding-right: 12px; padding-left: 12px; }
.sidebar-collapsed .sidebar .eyebrow, .sidebar-collapsed .sidebar .module-count, .sidebar-collapsed .sidebar .nav-label, .sidebar-collapsed .sidebar .module-link-name, .sidebar-collapsed .sidebar .sidebar-bottom-text { display: none; }
.sidebar-collapsed .sidebar-heading, .sidebar-collapsed .module-nav-heading { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-collapse-button { transform: rotate(180deg); }
.sidebar-collapsed .nav-item, .sidebar-collapsed .module-link { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-bottom { justify-content: center; padding: 0; }
.sidebar-collapsed .sidebar-collapse-button { display: inline-grid; }

@media (max-width: 1000px) {
  :root { --sidebar-width: 218px; }
  .main-content { padding-right: 20px; padding-left: 20px; }
}
@media (max-width: 700px) {
  .topbar { height: 58px; padding: 0 13px; }
  :root { --topbar-height: 58px; }
  .mobile-menu-button { display: inline-grid; margin-right: 8px; }
  .brand-caption, .brand-divider { display: none; }
  .brand-cluster { gap: 0; }
  .brand { gap: 8px; }
  .brand-mark { width: 31px; height: 31px; }
  .runtime-status { min-height: 30px; gap: 6px; padding: 0 8px; font-size: 10px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-button { width: 33px; height: 33px; }
  .app-body { min-height: calc(100vh - var(--topbar-height)); }
  .sidebar { position: fixed; z-index: 30; top: var(--topbar-height); bottom: 0; left: 0; width: min(286px, calc(100vw - 46px)); height: calc(100dvh - var(--topbar-height)); flex-basis: auto; box-shadow: var(--shadow-pop); transform: translateX(-105%); }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-collapse-button { display: none; }
  .sidebar-backdrop { position: fixed; z-index: 25; top: var(--topbar-height); right: 0; bottom: 0; left: min(286px, calc(100vw - 46px)); border: 0; background: rgba(35,37,53,.24); backdrop-filter: blur(2px); }
  .sidebar-backdrop[hidden] { display: none; }
  .main-content { padding: 0 13px 16px; }
  .workspace-topline { min-height: 52px; }
  .workspace-tools { display: none; }
  .home-tab, .module-tab-shell { min-width: 102px; max-width: 165px; }
  .module-tab { min-width: 0; }
  .workspace { min-height: 470px; padding-top: 12px; }
  .home-surface { padding-top: 13px; }
  .home-heading-row { padding-bottom: 17px; }
  .home-heading-row h1 { font-size: 20px; }
  .home-mark { width: 40px; height: 40px; }
  .overview-grid { grid-template-columns: 1fr 1fr; }
  .overview-item { min-height: 98px; padding: 13px 15px; }
  .overview-item:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }
  .overview-item strong { font-size: 22px; }
  .overview-item-status strong { font-size: 15px; }
  .module-overview-section { margin-top: 25px; }
  .module-overview-list { grid-template-columns: 1fr; }
  .module-window-header { min-height: 45px; padding: 0 7px 0 10px; }
  .window-controls { gap: 0; }
  .window-controls .icon-button { width: 29px; height: 29px; }
  .minimized-dock { min-height: 43px; gap: 4px; margin-top: 8px; }
  .dock-caption { padding: 0 5px; }
}
@media (max-width: 390px) {
  .brand-name { font-size: 13px; }
  .runtime-status { max-width: 116px; overflow: hidden; }
  #runtime-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .home-heading-row h1 { font-size: 19px; }
}