* { box-sizing: border-box; }
html, body, #root { min-height: 100%; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--gc-bg);
  color: var(--gc-text);
  transition: background-color 180ms ease, color 180ms ease;
}
button, input, select { font: inherit; }
button { color: inherit; }
a { color: inherit; }
::selection { background: var(--gc-brand-soft); }

:focus-visible {
  outline: 3px solid var(--gc-focus);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-width, 252px) minmax(0, 1fr);
  grid-template-rows: 72px minmax(0, 1fr);
  background: var(--gc-bg);
}
.app-shell.sidebar-compact { --sidebar-width: 82px; }

.sidebar {
  grid-row: 1 / -1;
  grid-column: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--gc-sidebar);
  color: var(--gc-sidebar-text);
  border-right: 1px solid color-mix(in srgb, var(--gc-sidebar-text) 8%, transparent);
  padding: 16px 12px 18px;
  z-index: 40;
  transition: width 180ms ease, transform 180ms ease;
}
.brand-lockup {
  height: 58px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 12px;
  margin-bottom: 6px;
}
.brand-mark { width: 42px; height: 42px; flex: 0 0 auto; }
.brand-copy { min-width: 0; line-height: 1.02; }
.brand-name {
  display: block;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  font-weight: 760;
  white-space: nowrap;
}
.brand-central {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  margin-top: 4px;
  opacity: 0.86;
  text-transform: uppercase;
}
.sidebar-compact .brand-copy,
.sidebar-compact .nav-label,
.sidebar-compact .nav-group-title,
.sidebar-compact .sidebar-foot-copy,
.sidebar-compact .nav-count { display: none; }
.sidebar-compact .brand-lockup { justify-content: center; padding-inline: 0; }
.sidebar-compact .nav-item { justify-content: center; padding-inline: 0; }
.sidebar-compact .nav-icon { margin: 0; }

.nav-group { margin-top: 14px; }
.nav-group-title {
  color: var(--gc-sidebar-muted);
  font-size: 0.67rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 10px 7px;
}
.nav-item {
  width: 100%;
  height: var(--gc-nav-h);
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--gc-sidebar-text);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  cursor: pointer;
  text-align: left;
  opacity: 0.88;
  transition: background 150ms ease, opacity 150ms ease, transform 150ms ease;
}
.nav-item:hover { background: color-mix(in srgb, var(--gc-sidebar-text) 7%, transparent); opacity: 1; }
.nav-item.active {
  background: color-mix(in srgb, var(--gc-brand) 76%, var(--gc-sidebar));
  color: #fff;
  opacity: 1;
  box-shadow: inset 3px 0 0 color-mix(in srgb, #fff 75%, var(--gc-brand));
}
.nav-icon { width: 19px; height: 19px; flex: 0 0 auto; opacity: 0.94; }
.nav-label { flex: 1; min-width: 0; font-size: var(--gc-font-sm); font-weight: 590; }
.nav-count {
  min-width: 22px; height: 20px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--gc-danger); color: white;
  font-size: 0.68rem; font-weight: 750; padding: 0 6px;
}
.sidebar-footer {
  margin-top: 24px;
  padding: 13px 10px 2px;
  border-top: 1px solid color-mix(in srgb, var(--gc-sidebar-text) 10%, transparent);
  color: var(--gc-sidebar-muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.topbar {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  background: color-mix(in srgb, var(--gc-surface) 94%, transparent);
  border-bottom: 1px solid var(--gc-border);
  backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 35;
}
.mobile-menu-btn { display: none; }
.context-switchers { display: flex; align-items: center; gap: 8px; min-width: 0; }
.context-button,
.icon-button,
.profile-button,
.search-button,
.menu-row,
.segment-button,
.theme-card,
.action-button {
  border: 1px solid var(--gc-border);
  background: var(--gc-surface);
  color: var(--gc-text);
  border-radius: 10px;
}
.context-button {
  height: var(--gc-control-h);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  cursor: pointer;
  min-width: 0;
}
.context-button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 155px; }
.context-button .context-kicker {
  display: none;
}
.search-button {
  height: var(--gc-control-h);
  flex: 1;
  max-width: 540px;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gc-muted);
  padding: 0 12px;
  cursor: pointer;
  text-align: left;
  margin-left: 2px;
}
.search-button kbd {
  margin-left: auto;
  border: 1px solid var(--gc-border);
  border-radius: 6px;
  padding: 2px 6px;
  background: var(--gc-surface-subtle);
  color: var(--gc-muted);
  font-size: 0.68rem;
}
.topbar-spacer { flex: 1; }
.icon-button {
  width: var(--gc-control-h); height: var(--gc-control-h);
  display: grid; place-items: center;
  cursor: pointer; position: relative;
}
.icon-button:hover, .context-button:hover, .profile-button:hover, .search-button:hover { background: var(--gc-hover); }
.notification-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gc-danger);
  position: absolute; top: 7px; right: 8px; border: 2px solid var(--gc-surface);
}
.profile-button {
  height: var(--gc-control-h);
  display: flex; align-items: center; gap: 9px;
  padding: 0 9px 0 6px;
  cursor: pointer;
}
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--gc-brand), var(--gc-brand-strong));
  color: #fff; font-size: 0.7rem; font-weight: 800;
}
.profile-copy { text-align: left; line-height: 1.15; }
.profile-name { font-size: var(--gc-font-sm); font-weight: 700; display: block; }
.profile-role { font-size: 0.68rem; color: var(--gc-muted); display: block; margin-top: 3px; }

.main-canvas {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 24px;
}
.content-wrap { max-width: 1480px; margin: 0 auto; }
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  margin-bottom: 20px;
}
.page-eyebrow { color: var(--gc-brand-strong); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; }
.page-title { margin: 0; font-size: var(--gc-font-2xl); letter-spacing: -0.035em; color: var(--gc-text-strong); }
.page-subtitle { margin: 6px 0 0; color: var(--gc-muted); font-size: var(--gc-font-md); max-width: 760px; line-height: 1.55; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.action-button {
  min-height: var(--gc-control-h); padding: 0 13px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-weight: 650; font-size: var(--gc-font-sm);
}
.action-button.primary { background: var(--gc-brand); color: var(--gc-brand-contrast); border-color: var(--gc-brand); }
.action-button.primary:hover { background: var(--gc-brand-strong); }
.action-button.ghost:hover { background: var(--gc-hover); }

.demo-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--gc-info);
  background: var(--gc-info-soft); color: var(--gc-text);
  border-radius: 12px; margin-bottom: 16px;
  font-size: var(--gc-font-sm);
}
.demo-banner strong { color: var(--gc-text-strong); }
.demo-banner .banner-copy { flex: 1; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.card {
  background: var(--gc-surface);
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius-lg);
  box-shadow: var(--gc-shadow-sm);
}
.kpi-card { padding: var(--gc-card-pad); min-width: 0; }
.kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kpi-label { font-size: var(--gc-font-sm); color: var(--gc-muted); font-weight: 600; }
.kpi-value { font-size: 1.9rem; letter-spacing: -0.04em; color: var(--gc-text-strong); font-weight: 800; margin-top: 8px; }
.kpi-unit { font-size: 0.72rem; color: var(--gc-muted); font-weight: 620; margin-left: 4px; }
.kpi-meta { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 0.72rem; color: var(--gc-muted); }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 8px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 760; white-space: nowrap;
}
.badge.success { background: var(--gc-success-soft); color: var(--gc-success); }
.badge.warning { background: var(--gc-warning-soft); color: var(--gc-warning); }
.badge.danger { background: var(--gc-danger-soft); color: var(--gc-danger); }
.badge.info { background: var(--gc-info-soft); color: var(--gc-info); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kpi-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--gc-brand-soft); color: var(--gc-brand-strong);
}

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 14px; }
.panel { padding: var(--gc-card-pad); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-title { margin: 0; font-size: var(--gc-font-lg); color: var(--gc-text-strong); letter-spacing: -0.015em; }
.panel-link { border: 0; background: transparent; color: var(--gc-brand-strong); cursor: pointer; font-size: var(--gc-font-sm); font-weight: 700; }
.site-list { display: grid; gap: 10px; }
.site-row {
  display: grid; grid-template-columns: minmax(160px, 1.35fr) repeat(3, minmax(70px, 0.55fr)) auto;
  align-items: center; gap: 12px;
  min-height: 68px; padding: 10px 12px;
  border: 1px solid var(--gc-border); border-radius: 12px;
  background: var(--gc-bg-elevated);
}
.site-name { font-weight: 760; color: var(--gc-text-strong); }
.site-sub { display: flex; gap: 7px; align-items: center; margin-top: 5px; color: var(--gc-muted); font-size: 0.72rem; }
.metric-mini span { display: block; }
.metric-mini .label { color: var(--gc-muted); font-size: 0.67rem; }
.metric-mini .value { color: var(--gc-text-strong); font-size: var(--gc-font-sm); font-weight: 740; margin-top: 4px; }
.row-chevron { color: var(--gc-muted); }
.attention-list { display: grid; gap: 8px; }
.attention-row {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px; align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--gc-border);
}
.attention-row:last-child { border-bottom: 0; }
.attention-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.attention-icon.danger { background: var(--gc-danger-soft); color: var(--gc-danger); }
.attention-icon.warning { background: var(--gc-warning-soft); color: var(--gc-warning); }
.attention-icon.info { background: var(--gc-info-soft); color: var(--gc-info); }
.attention-title { font-size: var(--gc-font-sm); font-weight: 700; color: var(--gc-text-strong); }
.attention-sub { margin-top: 3px; color: var(--gc-muted); font-size: 0.7rem; }
.attention-time { color: var(--gc-muted); font-size: 0.68rem; white-space: nowrap; }
.lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.schedule-row { display: grid; grid-template-columns: 58px 10px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; }
.schedule-time { font-weight: 760; color: var(--gc-text-strong); font-size: var(--gc-font-sm); }
.schedule-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gc-info); margin-top: 5px; }
.schedule-title { font-size: var(--gc-font-sm); font-weight: 700; }
.schedule-sub { margin-top: 3px; font-size: 0.7rem; color: var(--gc-muted); }
.decision-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 118px;
}
.decision-number { font-size: 2.7rem; line-height: 1; font-weight: 830; color: var(--gc-text-strong); letter-spacing: -0.05em; }
.decision-label { margin-top: 7px; color: var(--gc-muted); font-size: var(--gc-font-sm); }
.decision-arrow { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--gc-border); background: var(--gc-bg-elevated); }

.placeholder-page {
  min-height: 540px;
  display: grid; place-items: center;
  padding: 40px;
  text-align: center;
}
.placeholder-inner { max-width: 520px; }
.placeholder-icon { width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 18px; display: grid; place-items: center; background: var(--gc-brand-soft); color: var(--gc-brand-strong); }
.placeholder-inner h2 { margin: 0; font-size: var(--gc-font-xl); color: var(--gc-text-strong); }
.placeholder-inner p { color: var(--gc-muted); line-height: 1.6; margin: 10px 0 0; }

.popover {
  position: fixed;
  z-index: 80;
  min-width: 250px;
  max-width: min(360px, calc(100vw - 24px));
  background: var(--gc-surface);
  border: 1px solid var(--gc-border);
  border-radius: 14px;
  box-shadow: var(--gc-shadow-md);
  padding: 8px;
}
.popover.profile-popover { top: 64px; right: 16px; width: 320px; }
.popover.context-popover { top: 64px; left: calc(var(--sidebar-width, 252px) + 22px); width: 320px; }
.popover.site-popover { top: 64px; left: calc(var(--sidebar-width, 252px) + 240px); width: 280px; }
.popover-head { padding: 10px 10px 8px; }
.popover-title { font-size: var(--gc-font-sm); font-weight: 780; color: var(--gc-text-strong); }
.popover-sub { font-size: 0.7rem; color: var(--gc-muted); margin-top: 4px; line-height: 1.45; }
.menu-row {
  width: 100%; min-height: 40px; border-color: transparent;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; cursor: pointer; text-align: left;
  background: transparent;
}
.menu-row:hover { background: var(--gc-hover); }
.menu-row.active { background: var(--gc-brand-soft); color: var(--gc-brand-strong); }
.menu-row-main { flex: 1; min-width: 0; }
.menu-row-title { display: block; font-size: var(--gc-font-sm); font-weight: 680; color: var(--gc-text-strong); }
.menu-row-sub { display: block; font-size: 0.68rem; color: var(--gc-muted); margin-top: 2px; }
.menu-divider { height: 1px; background: var(--gc-border); margin: 7px 4px; }
.menu-section-label { padding: 9px 10px 6px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gc-muted); }

.scrim { position: fixed; inset: 0; background: var(--gc-overlay); z-index: 60; }
.drawer {
  position: fixed; z-index: 75; top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw); background: var(--gc-surface);
  border-left: 1px solid var(--gc-border); box-shadow: var(--gc-shadow-md);
  display: flex; flex-direction: column;
}
.drawer-head { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--gc-border); }
.drawer-title { font-weight: 800; color: var(--gc-text-strong); }
.drawer-body { overflow-y: auto; padding: 18px; }
.setting-block { margin-bottom: 24px; }
.setting-label { font-size: var(--gc-font-sm); font-weight: 760; color: var(--gc-text-strong); }
.setting-help { margin-top: 5px; color: var(--gc-muted); font-size: 0.72rem; line-height: 1.45; }
.theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.theme-card {
  padding: 9px; cursor: pointer; text-align: left; position: relative;
}
.theme-card.active { border-color: var(--gc-brand); box-shadow: 0 0 0 2px var(--gc-focus); }
.theme-preview { height: 74px; border-radius: 8px; border: 1px solid rgba(30,30,30,.08); overflow: hidden; display: grid; grid-template-columns: 22px 1fr; margin-bottom: 8px; }
.theme-preview .mini-side { background: var(--preview-side); }
.theme-preview .mini-main { background: var(--preview-bg); padding: 8px 6px; }
.theme-preview .mini-bar { height: 7px; border-radius: 4px; background: var(--preview-card); margin-bottom: 6px; }
.theme-preview .mini-card { height: 34px; border-radius: 5px; background: var(--preview-card); border: 1px solid var(--preview-border); position: relative; }
.theme-preview .mini-card::after { content: ''; position: absolute; left: 5px; top: 6px; width: 18px; height: 5px; border-radius: 4px; background: var(--preview-brand); }
.theme-name { font-size: 0.72rem; font-weight: 760; color: var(--gc-text-strong); }
.theme-natural { --preview-side:#10262a; --preview-bg:#f4f7f5; --preview-card:#fff; --preview-border:#dbe5df; --preview-brand:#15964d; }
.theme-dark { --preview-side:#071114; --preview-bg:#091316; --preview-card:#172a2f; --preview-border:#273a3e; --preview-brand:#35c96d; }
.theme-earth { --preview-side:#394334; --preview-bg:#f5f0e7; --preview-card:#fffdf8; --preview-border:#dfd6c6; --preview-brand:#5d7e3b; }
.segment { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border-radius: 10px; background: var(--gc-surface-subtle); margin-top: 10px; }
.segment-button { border-color: transparent; background: transparent; height: 34px; cursor: pointer; font-size: 0.72rem; font-weight: 700; }
.segment-button.active { background: var(--gc-surface); border-color: var(--gc-border); box-shadow: var(--gc-shadow-sm); }

.search-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding-top: 10vh; background: var(--gc-overlay); }
.command-palette { width: min(680px, calc(100vw - 28px)); background: var(--gc-surface); border: 1px solid var(--gc-border); border-radius: 16px; box-shadow: var(--gc-shadow-md); overflow: hidden; }
.command-input-wrap { height: 60px; display: flex; align-items: center; gap: 11px; padding: 0 16px; border-bottom: 1px solid var(--gc-border); }
.command-input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--gc-text-strong); font-size: 1rem; }
.command-input::placeholder { color: var(--gc-muted); }
.command-body { padding: 9px; max-height: 430px; overflow-y: auto; }
.command-section { padding: 8px 9px 5px; color: var(--gc-muted); font-size: 0.65rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.command-row { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--gc-text); padding: 8px 10px; cursor: pointer; text-align: left; }
.command-row:hover { background: var(--gc-hover); }
.command-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--gc-surface-subtle); color: var(--gc-brand-strong); }
.command-copy { flex: 1; min-width: 0; }
.command-title { display: block; color: var(--gc-text-strong); font-size: var(--gc-font-sm); font-weight: 690; }
.command-sub { display: block; margin-top: 3px; color: var(--gc-muted); font-size: 0.7rem; }
.command-key { color: var(--gc-muted); font-size: 0.67rem; }

.mobile-context-bar { display: none; }
.mobile-nav { display: none; }

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .profile-role { display: none; }
  .context-button.entity span { max-width: 120px; }
}

@media (max-width: 940px) {
  .app-shell,
  .app-shell.sidebar-compact {
    grid-template-columns: 1fr;
    grid-template-rows: 64px minmax(0, 1fr);
    --sidebar-width: 252px;
  }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 270px;
    transform: translateX(-105%); box-shadow: var(--gc-shadow-md); z-index: 90;
  }
  .app-shell.mobile-sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-compact .brand-copy,
  .sidebar-compact .nav-label,
  .sidebar-compact .nav-group-title,
  .sidebar-compact .sidebar-foot-copy,
  .sidebar-compact .nav-count { display: initial; }
  .sidebar-compact .nav-item { justify-content: flex-start; padding: 0 11px; }
  .topbar { grid-column: 1; height: 64px; padding: 0 14px; }
  .main-canvas { grid-column: 1; grid-row: 2; padding: 18px 14px 86px; }
  .mobile-menu-btn { display: grid; }
  .context-switchers { display: none; }
  .search-button { max-width: none; }
  .profile-copy { display: none; }
  .profile-button { padding: 0 5px; width: var(--gc-control-h); justify-content: center; }
  .mobile-context-bar { display: flex; gap: 8px; margin-bottom: 14px; }
  .mobile-context-bar .context-button { flex: 1; justify-content: space-between; }
  .popover.context-popover, .popover.site-popover { left: 12px; top: 62px; }
}

@media (max-width: 680px) {
  .search-button { min-width: 42px; width: 42px; flex: 0 0 42px; padding: 0; justify-content: center; }
  .search-button .search-copy, .search-button kbd { display: none; }
  .page-header { display: block; }
  .page-actions { margin-top: 14px; }
  .page-title { font-size: 1.55rem; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi-card { padding: 14px; }
  .kpi-value { font-size: 1.55rem; }
  .lower-grid { grid-template-columns: 1fr; }
  .site-row { grid-template-columns: 1fr auto; gap: 8px; }
  .site-row .metric-mini { display: none; }
  .theme-grid { grid-template-columns: 1fr; }
  .theme-card { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px; }
  .theme-preview { margin-bottom: 0; }
}

@media (max-width: 420px) {
  .topbar { gap: 7px; padding-inline: 10px; }
  .icon-button.notifications { display: none; }
  .main-canvas { padding-inline: 10px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .mobile-context-bar { flex-direction: column; }
}

.document-preview-demo {
  margin-top: 12px;
  border: 1px solid var(--gc-border);
  background: var(--gc-bg-elevated);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gc-muted);
  font-size: 0.72rem;
}
.doc-paper {
  width: 72px;
  height: 92px;
  flex: 0 0 auto;
  border-radius: 5px;
  border: 1px solid #d6d6d6;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  padding: 12px 9px;
  position: relative;
  isolation: isolate;
  filter: none !important;
}
.doc-line { height: 4px; width: 72%; background: #cbd5e1; border-radius: 2px; margin-bottom: 7px; }
.doc-line.wide { width: 90%; background: #334155; }
.doc-line.short { width: 48%; }
.doc-stamp { position: absolute; right: 7px; bottom: 7px; border: 1px solid #d64a4a; color: #b52e2e; padding: 2px 4px; border-radius: 3px; font: 700 8px/1 sans-serif; }

/* Beta 1 Section 2 — authentication, role scope and authority */
.boot-screen {
  min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 10px;
  background: var(--gc-bg); color: var(--gc-text-strong); text-align: center;
}
.boot-screen img { width: 72px; height: 72px; }
.boot-screen strong { font-size: 1.25rem; }
.boot-screen span { color: var(--gc-muted); font-size: var(--gc-font-sm); }

.login-shell {
  min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
  background: var(--gc-bg);
}
.login-brand-panel {
  background:
    radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--gc-brand) 35%, transparent), transparent 35%),
    linear-gradient(145deg, #0b2927, #10262a 56%, #071114);
  color: #fff; display: flex; align-items: center; justify-content: center; padding: 64px;
  position: relative; overflow: hidden;
}
.login-brand-panel::after {
  content: ''; position: absolute; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%;
  right: -240px; bottom: -220px; box-shadow: 0 0 0 90px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.018);
}
.login-brand-wrap { max-width: 560px; position: relative; z-index: 1; }
.login-brand-wrap .brand-lockup { padding: 0; margin: 0 0 36px; height: auto; gap: 14px; }
.login-brand-wrap .brand-mark { width: 70px; height: 70px; object-fit: contain; }
.login-brand-wrap .approved-brand-lockup .brand-copy { line-height: .94; }
.login-brand-wrap .approved-brand-lockup .brand-name,
.login-brand-wrap .approved-brand-lockup .brand-central {
  font-size: 1.52rem;
  font-weight: 800;
  letter-spacing: -.045em;
  text-transform: none;
  opacity: 1;
}
.login-brand-wrap .approved-brand-lockup .brand-central { margin-top: 2px; color: #ffffff; }
.login-kicker { color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
.login-brand-panel h1 { margin: 0; font-size: clamp(2.4rem, 4vw, 4.5rem); line-height: .98; letter-spacing: -.055em; max-width: 620px; }
.login-brand-panel p { max-width: 560px; font-size: 1.06rem; line-height: 1.65; color: rgba(255,255,255,.75); margin: 22px 0; }
.login-security-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; color: rgba(255,255,255,.82); font-size: .86rem; }
.login-main { display: grid; place-items: center; padding: 44px; }
.login-card { width: min(470px, 100%); padding: 34px; }
.login-card h2 { margin: 5px 0 8px; font-size: 2rem; letter-spacing: -.035em; color: var(--gc-text-strong); }
.login-card > p { margin: 0 0 24px; color: var(--gc-muted); }
.login-mark-mobile { display: none; align-items: center; gap: 10px; font-weight: 760; margin-bottom: 24px; }
.login-mark-mobile img { width: 36px; height: 36px; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 7px; color: var(--gc-text); font-size: var(--gc-font-sm); font-weight: 650; }
.auth-form input {
  width: 100%; height: 44px; border: 1px solid var(--gc-border); border-radius: 10px; background: var(--gc-surface);
  color: var(--gc-text-strong); padding: 0 12px; outline: none;
}
.auth-form input:focus { border-color: var(--gc-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-brand) 15%, transparent); }
.login-submit { justify-content: center; margin-top: 2px; }
.login-submit:disabled { opacity: .65; cursor: wait; }
.auth-form-actions { display: flex; justify-content: flex-end; margin-top: -6px; }
.auth-link { border: 0; background: transparent; color: var(--gc-brand); padding: 0; font: inherit; font-size: .8rem; font-weight: 750; cursor: pointer; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-link-back { display: inline-flex; align-items: center; gap: 4px; margin-top: 16px; }
.auth-link-back svg { transform: rotate(180deg); }
.form-success { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 11px 12px; border-radius: 10px; background: var(--gc-success-soft); color: var(--gc-success); font-size: .82rem; }
.login-help { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--gc-surface-subtle); color: var(--gc-muted); font-size: .78rem; line-height: 1.55; }
.form-alert { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 11px 12px; border-radius: 10px; background: var(--gc-danger-soft); color: var(--gc-danger); font-size: .82rem; }

.scope-summary { display: grid; gap: 2px; }
.scope-line { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gc-border); align-items: baseline; }
.scope-line:last-child { border-bottom: 0; }
.scope-label { color: var(--gc-muted); font-size: .76rem; font-weight: 650; }
.scope-line strong { font-size: .86rem; color: var(--gc-text-strong); font-weight: 650; }
.authority-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--gc-border); color: var(--gc-text); font-size: .84rem; line-height: 1.45; }
.authority-row:last-child { border-bottom: 0; }
.authority-row svg { color: var(--gc-brand); flex: 0 0 auto; margin-top: 2px; }
.access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.guardrail { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--gc-border); font-size: .82rem; }
.guardrail:last-child { border-bottom: 0; }
.guardrail span { font-size: .75rem; font-weight: 700; }
.guardrail.allowed span { color: var(--gc-success); }
.guardrail.restricted span { color: var(--gc-muted); }
.permission-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.permission-chip { border: 1px solid var(--gc-border); background: var(--gc-surface-subtle); border-radius: 999px; padding: 6px 9px; color: var(--gc-muted); font-size: .69rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.danger-row { color: var(--gc-danger); }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 90; background: var(--gc-text-strong); color: var(--gc-bg); padding: 11px 14px; border-radius: 10px; box-shadow: var(--gc-shadow-lg); font-size: .82rem; max-width: 360px; }
.context-button:disabled { cursor: default; opacity: .85; }

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand-panel { display: none; }
  .login-main { min-height: 100vh; padding: 24px; }
  .login-mark-mobile { display: flex; }
  .access-grid { grid-template-columns: 1fr; }
}

/* Beta 1 Section 3 — Organisation, Sites & Operational Master Data */
.master-live-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--gc-brand) 24%, var(--gc-border));
  border-radius: var(--gc-radius-md);
  background: color-mix(in srgb, var(--gc-brand-soft) 64%, var(--gc-surface));
  color: var(--gc-brand-strong);
}
.master-live-banner svg { flex: 0 0 auto; margin-top: 1px; }
.master-live-banner div { display: grid; gap: 3px; }
.master-live-banner strong { font-size: .8rem; color: var(--gc-text-strong); }
.master-live-banner span { font-size: .73rem; line-height: 1.45; color: var(--gc-muted); }

.master-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius-md);
  background: var(--gc-surface-subtle);
}
.master-tab {
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 11px;
  background: transparent;
  color: var(--gc-muted);
  cursor: pointer;
  font-size: .73rem;
  font-weight: 720;
  white-space: nowrap;
}
.master-tab:hover { color: var(--gc-text-strong); background: var(--gc-hover); }
.master-tab.active {
  border-color: var(--gc-border);
  background: var(--gc-surface);
  color: var(--gc-brand-strong);
  box-shadow: var(--gc-shadow-sm);
}

.master-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.master-kpi { padding: 15px 16px; display: grid; gap: 5px; }
.master-kpi > span { color: var(--gc-muted); font-size: .7rem; font-weight: 700; }
.master-kpi > strong { color: var(--gc-text-strong); font-size: 1.75rem; letter-spacing: -.045em; line-height: 1.05; }
.master-kpi > small { color: var(--gc-muted); font-size: .68rem; }

.master-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 22px 0 11px;
}
.master-section-head:first-child { margin-top: 0; }
.master-section-head h2 { margin: 0; color: var(--gc-text-strong); font-size: 1.02rem; letter-spacing: -.02em; }
.master-section-head p { margin: 5px 0 0; color: var(--gc-muted); font-size: .73rem; line-height: 1.45; max-width: 760px; }
.master-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.master-site-grid,
.master-material-grid,
.entity-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.master-site-card,
.master-material-card,
.entity-node { padding: 16px; min-width: 0; }
.master-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.master-card-head > div { min-width: 0; }
.master-card-head h3 { margin: 4px 0 3px; color: var(--gc-text-strong); font-size: .98rem; letter-spacing: -.02em; overflow-wrap: anywhere; }
.master-card-head p { margin: 0; color: var(--gc-muted); font-size: .7rem; line-height: 1.4; }
.master-code {
  display: inline-block;
  color: var(--gc-muted);
  font: 700 .64rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.master-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--gc-border);
}
.master-detail-grid > div { min-width: 0; }
.master-detail-grid span { display: block; color: var(--gc-muted); font-size: .64rem; font-weight: 700; margin-bottom: 3px; }
.master-detail-grid strong { display: block; color: var(--gc-text); font-size: .75rem; font-weight: 650; overflow-wrap: anywhere; }
.master-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gc-border);
  color: var(--gc-muted);
  font-size: .69rem;
  line-height: 1.4;
}
.master-card-foot > span { min-width: 0; overflow-wrap: anywhere; }

.master-control-note,
.master-info-strip {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 14px;
  padding: 13px 15px;
  color: var(--gc-muted);
  font-size: .74rem;
  line-height: 1.5;
}
.master-control-note svg { flex: 0 0 auto; color: var(--gc-brand); margin-top: 1px; }
.master-control-note strong,
.master-info-strip strong { color: var(--gc-text-strong); }
.master-control-note p { margin: 3px 0 0; }
.master-info-strip {
  border: 1px solid var(--gc-border);
  border-radius: var(--gc-radius-md);
  background: var(--gc-surface-subtle);
}

.master-table-wrap { overflow-x: auto; padding: 0; }
.master-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.master-table th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gc-border);
  background: var(--gc-surface-subtle);
  color: var(--gc-muted);
  font-size: .63rem;
  font-weight: 780;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.master-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--gc-border);
  color: var(--gc-text);
  font-size: .74rem;
  vertical-align: middle;
}
.master-table tbody tr:last-child td { border-bottom: 0; }
.master-table tbody tr:hover { background: var(--gc-table-row); }
.master-table td strong { color: var(--gc-text-strong); font-weight: 680; }
.master-table td small { display: block; margin-top: 3px; color: var(--gc-muted); font-size: .64rem; }
.table-action {
  border: 0;
  background: transparent;
  color: var(--gc-brand-strong);
  cursor: pointer;
  padding: 5px 3px;
  font-size: .7rem;
  font-weight: 760;
  white-space: nowrap;
}
.table-action:hover { text-decoration: underline; }

.classification-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px 10px;
  align-items: baseline;
  margin: 14px 0 5px;
  padding: 10px 0;
  border-top: 1px solid var(--gc-border);
  border-bottom: 1px solid var(--gc-border);
}
.classification-line span { color: var(--gc-muted); font-size: .63rem; font-weight: 720; }
.classification-line strong { color: var(--gc-text); font: 650 .7rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.site-rule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gc-border);
}
.site-rule-row > div { min-width: 0; }
.site-rule-row > div:last-child { display: flex; align-items: center; gap: 10px; text-align: right; }
.site-rule-row strong { display: block; color: var(--gc-text-strong); font-size: .73rem; }
.site-rule-row span { display: block; margin-top: 2px; color: var(--gc-muted); font-size: .65rem; line-height: 1.4; }
.empty-inline { padding: 14px 2px; color: var(--gc-muted); font-size: .72rem; }
.role-chip-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.role-chip-wrap .permission-chip { padding: 4px 7px; }

.entity-parent {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: 4px 10px;
  margin: 14px 0 12px;
  padding: 11px 0;
  border-top: 1px solid var(--gc-border);
  border-bottom: 1px solid var(--gc-border);
}
.entity-parent > span { color: var(--gc-muted); font-size: .66rem; }
.entity-parent > strong { color: var(--gc-text); font-size: .73rem; }
.entity-parent > small { grid-column: 2; color: var(--gc-muted); font-size: .64rem; }

.audit-list { padding: 4px 16px; }
.audit-row {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--gc-border);
}
.audit-row:last-child { border-bottom: 0; }
.audit-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gc-brand); box-shadow: 0 0 0 4px var(--gc-brand-soft); }
.audit-row strong { color: var(--gc-text-strong); font-size: .74rem; }
.audit-row p { margin: 3px 0 0; color: var(--gc-muted); font-size: .65rem; }
.master-loading { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--gc-muted); font-size: .78rem; }
.master-loading svg { color: var(--gc-brand); }

.master-editor { width: min(520px, 100vw); }
.master-editor .drawer-head { min-height: 74px; height: auto; padding-block: 12px; }
.master-editor .auth-form { gap: 13px; }
.master-editor .auth-form label { font-size: .72rem; }
.master-editor .auth-form input,
.master-editor .auth-form select,
.master-editor .auth-form textarea {
  width: 100%;
  border: 1px solid var(--gc-border);
  border-radius: 9px;
  background: var(--gc-surface);
  color: var(--gc-text-strong);
  padding: 9px 10px;
  outline: none;
}
.master-editor .auth-form input,
.master-editor .auth-form select { min-height: 40px; }
.master-editor .auth-form textarea { resize: vertical; min-height: 90px; line-height: 1.45; }
.master-editor .auth-form input:focus,
.master-editor .auth-form select:focus,
.master-editor .auth-form textarea:focus { border-color: var(--gc-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc-brand) 14%, transparent); }
.form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.checkbox-field { display: flex !important; grid-template-columns: none !important; flex-direction: row !important; align-items: center; gap: 9px !important; min-height: 38px; padding: 8px 10px; border: 1px solid var(--gc-border); border-radius: 9px; background: var(--gc-surface-subtle); }
.checkbox-field input { width: 16px !important; min-height: 0 !important; height: 16px !important; margin: 0; accent-color: var(--gc-brand); }
.field-hint { color: var(--gc-muted); font-weight: 500; font-size: .64rem; }
.readonly-context { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--gc-border); border-radius: 9px; background: var(--gc-surface-subtle); }
.readonly-context strong { color: var(--gc-text-strong); font-size: .76rem; }
.readonly-context span { color: var(--gc-muted); font-size: .68rem; }

@media (max-width: 1180px) {
  .master-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .master-site-grid,
  .master-material-grid,
  .entity-tree { grid-template-columns: 1fr; }
  .master-section-head { align-items: flex-start; flex-direction: column; }
  .master-head-actions { width: 100%; }
  .master-head-actions .action-button { flex: 1; justify-content: center; }
  .master-detail-grid { grid-template-columns: 1fr; }
  .site-rule-row { align-items: flex-start; flex-direction: column; }
  .site-rule-row > div:last-child { width: 100%; justify-content: space-between; text-align: left; }
  .classification-line { grid-template-columns: auto minmax(0, 1fr); }
  .form-grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .master-kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .master-kpi { padding: 12px; }
  .master-kpi > strong { font-size: 1.45rem; }
  .master-site-card,
  .master-material-card,
  .entity-node { padding: 13px; }
  .master-card-head { flex-direction: column; }
  .master-card-foot { align-items: flex-start; flex-direction: column; }
  .audit-row { grid-template-columns: 10px minmax(0, 1fr); }
  .audit-row > .master-code { grid-column: 2; }
}

.master-advanced {
  border: 1px solid var(--gc-border);
  border-radius: 12px;
  padding: 0 14px;
  background: var(--gc-surface-subtle);
}
.master-advanced > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  font-weight: 650;
  color: var(--gc-text-strong);
}
.master-advanced > summary::-webkit-details-marker { display: none; }
.master-advanced > summary::after { content: '+'; float: right; color: var(--gc-text-muted); }
.master-advanced[open] > summary::after { content: '−'; }
.master-advanced[open] { padding-bottom: 12px; }
.master-advanced label { margin-top: 10px; }

.master-check-group { border: 1px solid var(--gc-border); border-radius: 10px; padding: 10px; display: grid; gap: 8px; }
.master-check-group legend { padding: 0 6px; font-size: 12px; font-weight: 700; color: var(--gc-text-muted); }

/* Sites task entry reuses shell controls and tokens; no domain data or new visual system. */
.site-work-entry { margin-bottom: 18px; }
.site-work-entry p { color: var(--gc-text); font-size: .875rem; line-height: 1.5; }
.site-work-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.site-work-link { min-height: 44px; white-space: normal; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 6px; padding: 14px; }
.site-work-link span { color: var(--gc-text); font-weight: 400; line-height: 1.5; }
.site-setup > summary { min-height: 44px; }
@media (max-width: 1100px) { .site-work-links { grid-template-columns: 1fr; } }