:root {
  color-scheme: light;
  --ink: #172338;
  --ink-soft: #344158;
  --muted: #7a869a;
  --subtle: #a4adbc;
  --line: #e7ebf2;
  --line-strong: #d6dde8;
  --canvas: #f5f7fa;
  --blue: #2f6cf3;
  --blue-strong: #2459d2;
  --blue-soft: #edf3ff;
  --green: #199468;
  --green-soft: #eaf8f2;
  --purple: #7b61d9;
  --purple-soft: #f2efff;
  --orange: #c87921;
  --orange-soft: #fff5e8;
  --red: #d25a68;
  --red-soft: #fff0f2;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--canvas);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 1080px; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.icon { display: block; flex: 0 0 auto; }
.app-shell { min-height: 100vh; }

/* Login */
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 48px; background: radial-gradient(circle at 12% 15%, #eaf1ff 0, transparent 33%), linear-gradient(135deg, #f5f8fc 0%, #eef3fb 100%); }
.login-layout { display: grid; grid-template-columns: minmax(440px, 1fr) 430px; width: min(1100px, 100%); min-height: 600px; overflow: hidden; border: 1px solid #dfe6f0; border-radius: 24px; background: #fff; box-shadow: 0 28px 80px #29416b14; }
.login-intro { display: flex; flex-direction: column; justify-content: space-between; padding: 44px 52px; background: linear-gradient(145deg, #f8fbff 0%, #eef5ff 100%); }
.intro-brand { display: flex; align-items: center; gap: 12px; color: #2d4878; font-size: 14px; font-weight: 650; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #4b82f7, #2f5ed6); font-size: 13px; font-weight: 750; letter-spacing: -.08em; box-shadow: 0 8px 20px #356ae62b; }
.intro-copy { margin-top: auto; margin-bottom: auto; padding: 70px 0 60px; }
.eyebrow { display: block; color: #8190a7; font-size: 10px; font-weight: 750; letter-spacing: .14em; line-height: 1.3; }
.intro-copy h1 { margin: 17px 0 19px; color: #1b2f50; font-size: clamp(32px, 4vw, 47px); font-weight: 720; letter-spacing: -.055em; line-height: 1.17; }
.intro-copy h1 em { color: var(--blue); font-style: normal; }
.intro-copy p { max-width: 410px; margin: 0; color: #6b7a92; font-size: 14px; line-height: 1.8; }
.intro-foot { display: flex; gap: 22px; color: #74849e; font-size: 11px; }
.intro-foot span { display: inline-flex; align-items: center; gap: 6px; }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: 54px 54px 46px; background: #fff; }
.login-card-head h2 { margin: 12px 0 7px; font-size: 26px; font-weight: 720; letter-spacing: -.04em; }
.login-card-head p { margin: 0 0 30px; color: var(--muted); font-size: 13px; }
.field { display: grid; gap: 8px; margin: 16px 0; }
.field label { color: #526079; font-size: 12px; font-weight: 650; }
.field label small { color: var(--subtle); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; padding: 12px 13px; border: 1px solid var(--line-strong); border-radius: 9px; outline: 0; color: var(--ink); background: #fff; transition: border-color .16s, box-shadow .16s, background .16s; }
.field textarea { min-height: 82px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: #b2bac7; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #84a7f7; box-shadow: 0 0 0 3px #2f6cf31a; background: #fcfdff; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .icon { position: absolute; left: 12px; color: #a3aec0; }
.input-wrap input { padding-left: 37px; }
.form-error { min-height: 18px; margin: 7px 0 11px; color: var(--red); font-size: 12px; line-height: 1.5; }
.login-hint { margin: 25px 0 0; color: #9aa5b5; font-size: 11px; line-height: 1.7; }

/* Shell */
.console { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #fff; }
.sidebar-brand { display: flex; align-items: center; gap: 11px; height: 82px; padding: 0 25px; border-bottom: 1px solid var(--line); }
.sidebar-brand .brand-mark { width: 33px; height: 33px; border-radius: 9px; font-size: 11px; box-shadow: none; }
.sidebar-brand strong { display: block; color: #20304b; font-size: 14px; font-weight: 720; letter-spacing: -.02em; }
.sidebar-brand small { display: block; margin-top: 4px; color: #98a3b4; font-size: 10px; }
.tenant-card { display: flex; align-items: center; gap: 10px; margin: 21px 17px 16px; padding: 11px 12px; border: 1px solid #e5eaf2; border-radius: 11px; background: #f9fbfd; }
.tenant-card > .icon { margin-left: auto; color: #9ba8ba; }
.tenant-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #2e61cc; background: #eaf1ff; font-size: 12px; font-weight: 700; }
.tenant-copy { min-width: 0; }
.tenant-copy span { display: block; color: #9aa5b4; font-size: 10px; }
.tenant-copy strong { display: block; max-width: 145px; margin-top: 3px; overflow: hidden; color: #34435b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.nav { display: grid; gap: 23px; padding: 4px 13px; }
.nav { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #dfe5ef transparent; }
.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-thumb { border-radius: 5px; background: #dfe5ef; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav-group { display: grid; gap: 3px; }
.nav-label { padding: 0 12px 7px; color: #a3adbc; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.nav-label-button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; }
.nav-label-button .icon { color: #b6bfcc; transition: transform .16s ease; }
.nav-group.is-collapsed .nav-group-items { display: none; }
.nav-group.is-collapsed .nav-label-button .icon { transform: rotate(-90deg); }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border: 0; border-radius: 9px; color: #6e7b90; background: transparent; text-align: left; transition: color .15s, background .15s; }
.nav-item:hover { color: #253a61; background: #f5f8fc; }
.nav-item.is-active { color: #275ed7; background: #eff4ff; font-weight: 650; }
.nav-item .icon { color: currentColor; }
.active-line { position: absolute; top: 9px; right: -13px; bottom: 9px; width: 3px; border-radius: 3px 0 0 3px; background: var(--blue); }
.sidebar-bottom { margin-top: auto; padding: 16px 17px 20px; border-top: 1px solid var(--line); }
.secure-note { display: flex; align-items: center; gap: 8px; margin: 0 5px 19px; color: #7b8a9f; font-size: 10px; line-height: 1.35; }
.secure-note .icon { color: #86a3d8; }
.secure-note small { color: #acb5c2; font-size: 9px; }
.user-row { display: flex; align-items: center; gap: 9px; }
.avatar, .mini-avatar { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #315ebd; background: #ebf1ff; font-size: 11px; font-weight: 700; }
.user-copy { min-width: 0; }
.user-copy strong { display: block; overflow: hidden; color: #35435a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-copy small { display: block; margin-top: 3px; color: #9ba5b5; font-size: 10px; }
.icon-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; color: #8995a8; background: transparent; transition: color .15s, border .15s, background .15s; }
.icon-button:hover { border-color: var(--line); color: #315bbd; background: #f5f8fd; }
.user-row .icon-button { margin-left: auto; }
.main { min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 38px; border-bottom: 1px solid var(--line); background: #fff; }
.crumbs { display: flex; align-items: center; gap: 8px; color: #a2abb9; font-size: 12px; }
.crumbs .icon { color: #c2c9d4; }
.crumbs strong { color: #32415a; font-size: 13px; font-weight: 650; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.environment, .service-state { display: inline-flex; align-items: center; gap: 7px; color: #78869a; font-size: 11px; }
.environment { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; color: #6b7890; background: #fbfcfe; }
.environment i, .service-state i { width: 6px; height: 6px; border-radius: 50%; background: #80a0d8; }
.service-state i { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.top-divider { width: 1px; height: 17px; background: var(--line); }
.refresh-button { width: 32px; height: 32px; }
.content { width: 100%; max-width: 1600px; margin: 0 auto; padding: 38px 42px 56px; }

/* Shared components */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.page-head h1 { margin: 10px 0 0; color: #1d2c44; font-size: 28px; font-weight: 720; letter-spacing: -.05em; }
.page-head p { margin: 8px 0 0; color: #7d899b; line-height: 1.55; }
.page-actions { display: flex; align-items: center; gap: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 650; transition: background .15s, border .15s, box-shadow .15s, transform .15s; }
.button:active { transform: translateY(1px); }
.button:disabled { cursor: wait; opacity: .65; }
.button-primary { color: #fff; background: var(--blue); box-shadow: 0 5px 12px #2f6cf326; }
.button-primary:hover { background: var(--blue-strong); box-shadow: 0 7px 16px #2f6cf33b; }
.button-secondary { color: #5b6a80; border-color: var(--line-strong); background: #fff; }
.button-secondary:hover { color: #315ab9; border-color: #bdcbea; background: #f8faff; }
.block { width: 100%; min-height: 44px; }
.panel, .metric-card { border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 3px 10px #23375806; }
.panel-head { display: flex; align-items: center; justify-content: space-between; min-height: 70px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 5px 0 0; color: #283850; font-size: 15px; letter-spacing: -.02em; }
.panel-kicker { display: block; color: #a0aaba; font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.panel-period { color: #9ba5b4; font-size: 11px; }
.panel-body { padding: 22px; }
.substats { display: flex; align-items: center; gap: 25px; margin: -4px 0 19px; color: #8a96a8; font-size: 11px; }
.substats b { margin-right: 4px; color: #43526a; font-size: 15px; }
.role-pill { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 6px; color: #6656a8; background: #f3f0ff; font-size: 10px; }
.current-dot { display: inline-block; margin-left: 7px; padding: 3px 5px; border-radius: 4px; color: var(--green); background: var(--green-soft); font-size: 9px; }
.compatibility { display: inline-flex; align-items: center; gap: 6px; color: #6d829e; font-size: 10px; }
.compatibility i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.green-text { color: var(--green) !important; }
.purple-text { color: var(--purple) !important; }
.orange-text { color: var(--orange) !important; }
.blue-text { color: var(--blue) !important; }

/* Overview */
.overview-head { margin-bottom: 24px; }
.welcome-banner { position: relative; display: flex; justify-content: space-between; min-height: 194px; overflow: hidden; margin-bottom: 17px; padding: 30px 38px; border: 1px solid #d9e6ff; border-radius: 14px; background: linear-gradient(110deg, #f3f7ff 0%, #f8fbff 60%, #eef4ff 100%); }
.welcome-banner::after { position: absolute; top: -95px; right: 140px; width: 270px; height: 270px; border: 1px solid #d7e5ff; border-radius: 50%; content: ''; }
.welcome-kicker { color: #6f8fcf; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.welcome-banner h2 { position: relative; z-index: 1; margin: 13px 0 8px; color: #243b65; font-size: 23px; font-weight: 680; letter-spacing: -.045em; line-height: 1.32; }
.welcome-banner h2 span { color: #3970e8; }
.welcome-banner p { position: relative; z-index: 1; margin: 0; color: #7c8fab; font-size: 12px; }
.banner-orbit { position: relative; width: 190px; margin-right: 47px; }
.orbit-ring { position: absolute; border: 1px solid #cfe0ff; border-radius: 50%; transform: rotate(-25deg); }
.ring-a { top: -24px; right: -30px; width: 185px; height: 185px; border-style: dashed; }
.ring-b { top: 7px; right: 5px; width: 119px; height: 119px; }
.orbit-core { position: absolute; top: 46px; right: 47px; display: grid; place-items: center; width: 74px; height: 74px; border: 1px solid #cddfff; border-radius: 50%; color: #3670e8; background: #fff; box-shadow: 0 10px 28px #356ae61c; }
.orbit-core small { margin-top: -2px; color: #7b99d4; font-size: 8px; font-weight: 750; letter-spacing: .12em; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.metric-card { min-height: 135px; padding: 18px 19px 16px; }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-label { color: #7f8b9d; font-size: 12px; }
.metric-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.metric-icon.blue { color: var(--blue); background: var(--blue-soft); }
.metric-icon.green { color: var(--green); background: var(--green-soft); }
.metric-icon.purple { color: var(--purple); background: var(--purple-soft); }
.metric-icon.orange { color: var(--orange); background: var(--orange-soft); }
.metric-value { margin-top: 11px; color: #21324d; font-size: 25px; font-weight: 720; letter-spacing: -.045em; }
.metric-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 8px; color: #a0aaba; font-size: 10px; }
.trend { color: var(--green); font-size: 10px; font-weight: 650; }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.44fr) minmax(300px, .86fr); gap: 15px; margin-top: 15px; }
.health-content { display: flex; align-items: center; gap: 48px; padding: 27px 28px 18px; }
.health-score { display: grid; justify-items: center; gap: 7px; min-width: 138px; color: #40516b; font-size: 11px; }
.health-score > small { color: #a3adba; font-size: 10px; }
.score-ring { position: relative; display: grid; place-items: center; width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(var(--blue) var(--score), #eaf0fb 0); }
.score-ring::after { position: absolute; inset: 9px; border-radius: 50%; background: #fff; content: ''; }
.score-ring strong { position: relative; z-index: 1; color: #2b5ed2; font-size: 29px; letter-spacing: -.06em; }
.score-ring strong small { margin-left: 2px; font-size: 13px; }
.health-stats { display: grid; grid-template-columns: repeat(3, minmax(95px, 1fr)); flex: 1; gap: 25px; }
.health-stats > div { display: grid; gap: 7px; padding-left: 20px; border-left: 1px solid var(--line); }
.health-stats span { color: #7b8798; font-size: 11px; }
.health-stats strong { color: #283850; font-size: 22px; letter-spacing: -.04em; }
.health-stats small { color: #a8b0bc; font-size: 10px; }
.mini-chart { display: flex; align-items: flex-end; gap: 8px; height: 65px; margin: 3px 28px 0; padding: 0 2px; border-bottom: 1px solid var(--line); }
.mini-chart span { flex: 1; min-width: 5px; border-radius: 4px 4px 0 0; background: linear-gradient(to top, #bcd2ff, #5a88f5); opacity: .88; }
.mini-chart span:nth-child(-n+3) { background: #d8e5ff; }
.chart-caption { display: flex; justify-content: space-between; margin: 10px 28px 18px; color: #a0aaba; font-size: 10px; }
.quick-list { padding: 6px 18px 13px; }
.quick-list button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 61px; padding: 0 4px; border: 0; border-bottom: 1px solid #f0f2f6; color: #95a0b0; background: transparent; text-align: left; }
.quick-list button:last-child { border-bottom: 0; }
.quick-list button:hover strong { color: var(--blue); }
.quick-list button > .icon { margin-left: auto; color: #c0c8d3; }
.quick-list strong { display: block; color: #45536a; font-size: 12px; font-weight: 650; transition: color .15s; }
.quick-list small { display: block; margin-top: 4px; color: #a1abb9; font-size: 10px; }
.quick-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; }
.quick-icon.blue { color: var(--blue); background: var(--blue-soft); }
.quick-icon.purple { color: var(--purple); background: var(--purple-soft); }
.quick-icon.green { color: var(--green); background: var(--green-soft); }
.quick-icon.orange { color: var(--orange); background: var(--orange-soft); }
.boundary-panel { margin-top: 15px; }
.boundary-panel .panel-head { min-height: 65px; }
.principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 22px 0; }
.system-flow-panel { margin-top: 15px; }
.system-flow-panel .panel-head { min-height: 82px; }
.system-flow-panel .panel-subtitle { margin: 7px 0 0; color: #8d99aa; font-size: 11px; }
.system-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0 18px 20px; }
.system-flow-step { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 88px; padding: 18px 17px 13px; border-right: 1px solid #edf1f6; }
.system-flow-step:last-child { border-right: 0; }
.system-flow-index { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border: 1px solid #d7e3f6; border-radius: 8px; color: #5179ce; background: #f2f6ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; }
.system-flow-copy { display: grid; gap: 4px; min-width: 0; }
.system-flow-copy strong { color: #465a78; font-size: 11px; font-weight: 700; }
.system-flow-copy b { overflow: hidden; color: #253d62; font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.system-flow-copy small { color: #9aa7b9; font-size: 10px; line-height: 1.45; }
.system-flow-arrow { position: absolute; top: 24px; right: -9px; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid #e0e8f3; border-radius: 50%; color: #7b99d7; background: #fff; font-size: 11px; }
.principle { display: flex; gap: 13px; padding: 2px 25px; border-right: 1px solid var(--line); }
.principle:last-child { border-right: 0; }
.principle-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; color: #6f89bc; background: #f0f4fb; }
.principle strong { display: block; color: #47566d; font-size: 12px; }
.principle p { margin: 6px 0 0; color: #9aa5b4; font-size: 10px; line-height: 1.65; }

/* Governance pages */
.usage-banner { display: flex; align-items: center; justify-content: space-between; min-height: 126px; margin-bottom: 17px; padding: 25px 29px; border: 1px solid #dfe7fb; border-radius: 13px; background: linear-gradient(110deg, #f5f8ff, #fbfcff); }
.usage-kicker { color: #7995ce; font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.usage-banner h2 { margin: 9px 0 6px; color: #2d4267; font-size: 17px; letter-spacing: -.03em; }
.usage-banner p { margin: 0; color: #8a99af; font-size: 11px; }
.team-account-banner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 112px; margin-bottom: 17px; padding: 23px 29px; border: 1px solid #dfe7fb; border-radius: 13px; background: linear-gradient(110deg, #f5f8ff, #fbfcff); }
.team-account-banner h2 { margin: 8px 0 6px; color: #2d4267; font-size: 17px; letter-spacing: -.03em; }
.team-account-banner p { max-width: 620px; margin: 0; color: #8a99af; font-size: 11px; line-height: 1.7; }
.seat-summary { display: flex; align-items: stretch; gap: 1px; min-width: 270px; overflow: hidden; border: 1px solid #e4e9f5; border-radius: 10px; background: #fff; }
.seat-summary div { display: grid; gap: 5px; min-width: 82px; padding: 12px 13px; background: #fff; }
.seat-summary div + div { border-left: 1px solid #edf0f6; }
.seat-summary span { color: #99a4b6; font-size: 9px; }
.seat-summary strong { color: #34496d; font-size: 18px; line-height: 1; }
.seat-summary-wrap { min-width: 270px; }
.seat-progress { height: 5px; margin: 9px 3px 0; overflow: hidden; border-radius: 999px; background: #e8edf8; }
.seat-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5b8def, #7b6de6); transition: width .2s ease; }
.seat-progress-note { display: block; margin: 6px 3px 0; color: #94a0b5; font-size: 9px; text-align: right; }
.usage-summary { display: grid; justify-items: end; padding-right: 11px; color: #8290a6; }
.usage-summary strong { color: var(--blue); font-size: 29px; letter-spacing: -.05em; }
.usage-summary span { margin-top: 3px; font-size: 10px; }
.settings-grid-cms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.cms-settings-card { overflow: hidden; }
.cms-settings-card > .icon { color: #9aabc5; }
.cms-settings-wide { grid-column: 1 / -1; }

/* Schema-driven enterprise configuration */
.config-org-picker { display: inline-flex; align-items: center; gap: 9px; color: #6b7b93; font-size: 11px; font-weight: 600; }
.config-org-picker select { min-width: 205px; height: 34px; padding: 0 30px 0 11px; border: 1px solid #dce5f1; border-radius: 8px; background: #fff; color: #273853; font: inherit; }
.config-intro { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; padding: 15px 17px; border: 1px solid #dce8f8; border-radius: 12px; background: linear-gradient(100deg, #f7faff, #fff); }
.config-intro-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; color: #557ed8; background: #eaf1ff; }
.config-intro div { flex: 1; min-width: 0; }
.config-intro strong { display: block; color: #263853; font-size: 13px; }
.config-intro p { margin: 4px 0 0; color: #7b8ba2; font-size: 11px; line-height: 1.6; }
.config-field { display: grid; gap: 7px; }
.config-field > label { color: #50627e; font-size: 11px; font-weight: 700; }
.config-field > label em { color: #e07858; font-size: 10px; font-style: normal; font-weight: 600; }
.config-field > label small { margin-left: 4px; padding: 2px 5px; border-radius: 4px; color: #8667c8; background: #f1ecff; font-size: 9px; font-weight: 600; }
.config-field input:not([type="checkbox"]), .config-field textarea, .config-field select { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #dce5f1; border-radius: 8px; outline: none; background: #fff; color: #263853; font: inherit; font-size: 12px; transition: border-color .15s, box-shadow .15s; }
.config-field textarea { resize: vertical; line-height: 1.55; }
.config-field select[multiple] { min-height: 76px; }
.config-field input:focus, .config-field textarea:focus, .config-field select:focus { border-color: #84a6e9; box-shadow: 0 0 0 3px #eaf1ff; }
.config-switch { display: inline-flex; align-items: center; gap: 8px; width: max-content; color: #425572; font-size: 12px; }
.config-switch input { width: 16px; height: 16px; accent-color: #557ed8; }
.config-form-grid { display: grid; gap: 14px; }
.config-form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.config-form-actions .button-danger { color: #bc5e5e; border-color: #f0d5d5; background: #fff8f8; }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.detail-section-head h3 { margin: 0; }
.delivery-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid #eef2f7; }
.delivery-row:last-child { border-bottom: 0; }
.delivery-row > span:nth-child(2) { flex: 1; min-width: 0; }
.delivery-row strong, .delivery-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delivery-row strong { color: #30415d; font-size: 11px; }
.delivery-row small { margin-top: 2px; color: #97a5b8; font-size: 9px; }
.delivery-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding: 10px 11px; border-radius: 8px; color: #71829a; background: #f7f9fc; font-size: 10px; line-height: 1.55; }
.delivery-note svg { flex: 0 0 auto; color: #718fd5; }
.cms-setting-list { padding: 5px 22px 11px; }
.cms-setting-list > div, .governance-list > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 65px; border-bottom: 1px solid #f0f2f5; }
.cms-setting-list > div:last-child, .governance-list > div:last-child { border-bottom: 0; }
.cms-setting-list span { display: grid; gap: 5px; }
.cms-setting-list strong { color: #526078; font-size: 12px; }
.cms-setting-list small { color: #a0aaba; font-size: 10px; }
.switch { position: relative; display: inline-block; width: 34px; height: 19px; flex: 0 0 auto; border-radius: 99px; background: #d9dfe8; }
.switch::after { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #1f355422; content: ''; transition: transform .15s; }
.switch.is-on { background: #79a0f4; }
.switch.is-on::after { transform: translateX(15px); }
.governance-list { padding: 6px 22px 11px; }
.governance-list span { color: #8e9bad; font-size: 11px; }
.governance-list strong { color: #526078; font-size: 11px; font-weight: 600; }
.roadmap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 22px; }
.roadmap-item { display: flex; gap: 10px; padding-right: 18px; border-right: 1px solid var(--line); }
.roadmap-item:not(:first-child) { padding-left: 18px; }
.roadmap-item:last-child { border-right: 0; }
.roadmap-item > i { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%; color: #8997aa; background: #f3f5f8; font-size: 10px; font-style: normal; font-weight: 700; }
.roadmap-item.done > i { color: var(--green); background: var(--green-soft); }
.roadmap-item span { display: grid; gap: 4px; }
.roadmap-item strong { color: #536179; font-size: 11px; }
.roadmap-item small { color: #a0aaba; font-size: 9px; line-height: 1.5; }

/* Data tables */
.data-panel { overflow: hidden; }
.telemetry-summary { margin-bottom: 22px; padding: 23px 25px 24px; border: 1px solid #dfe8f6; border-radius: 15px; background: linear-gradient(120deg, #f7fbff 0%, #eef5ff 100%); }
.telemetry-summary.has-attention { border-color: #f2d7b7; background: linear-gradient(120deg, #fffaf4 0%, #fff4e8 100%); }
.telemetry-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.telemetry-summary-head h2 { margin: 7px 0 5px; color: #243756; font-size: 19px; letter-spacing: -.03em; }
.telemetry-summary-head p { margin: 0; color: #7788a2; font-size: 12px; line-height: 1.55; }
.telemetry-health { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.telemetry-health i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.telemetry-health.is-good { color: #188b63; background: #e7f7ef; }
.telemetry-health.is-warning { color: #b96d1c; background: #fff0d9; }
.telemetry-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.telemetry-summary-grid > div { min-width: 0; padding: 13px 14px; border: 1px solid #e1e9f4; border-radius: 10px; background: rgba(255,255,255,.72); }
.telemetry-summary-grid small, .telemetry-summary-grid span { display: block; color: #8a98ac; font-size: 10px; }
.telemetry-summary-grid strong { display: block; min-width: 0; margin: 7px 0 4px; overflow: hidden; color: #263958; font-size: 20px; font-weight: 720; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.telemetry-summary-grid strong.is-success { color: #188b63; }
.telemetry-summary-grid strong.is-danger { color: #c96536; }
@media (max-width: 900px) { .telemetry-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.catalog-sync-note { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 13px 16px; border: 1px solid #dfe9fb; border-radius: 11px; color: #647797; background: linear-gradient(100deg, #f5f8ff, #fbfdff); }
.catalog-sync-icon { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 8px; color: var(--blue); background: var(--blue-soft); }
.catalog-sync-note > div { min-width: 0; }
.catalog-sync-note strong { display: block; color: #3b5686; font-size: 12px; }
.catalog-sync-note p { margin: 4px 0 0; color: #8795ad; font-size: 10px; line-height: 1.5; }
.catalog-sync-note > .status { margin-left: auto; white-space: nowrap; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 68px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.search-wrap { position: relative; display: flex; align-items: center; width: min(340px, 42%); }
.search-wrap .icon { position: absolute; left: 11px; color: #aab4c2; }
.search { width: 100%; padding: 9px 12px 9px 34px; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; transition: border .15s, box-shadow .15s; }
.search::placeholder { color: #a9b2bf; }
.search:focus { border-color: #88a9f3; box-shadow: 0 0 0 3px #2f6cf316; }
.toolbar-right { display: flex; align-items: center; gap: 14px; }
.filter-button { display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; color: #77859a; background: #fff; font-size: 11px; }
.filter-button:hover { border-color: #c4d1e8; color: var(--blue); background: #f9fbff; }
.result-count { color: #a0aaba; font-size: 11px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th { height: 44px; padding: 0 20px; color: #98a3b2; background: #fbfcfe; font-size: 10px; font-weight: 650; text-align: left; }
td { height: 69px; padding: 0 20px; border-top: 1px solid #eef1f5; color: #47566c; font-size: 12px; }
tbody tr { cursor: pointer; transition: background .13s; }
tbody tr:hover td { background: #f9fbff; }
tbody tr:hover .row-actions > .icon { color: var(--blue); transform: translateX(2px); }
.entity, .task-id, .actor-cell, .member-row { display: flex; align-items: center; gap: 10px; }
.entity > span:last-child, .task-id > span:last-child { display: grid; gap: 5px; }
.entity strong, .task-id strong { color: #35445c; font-size: 12px; font-weight: 650; }
.entity small, .task-id small { color: #a2acb9; font-size: 10px; }
.catalog-row-meta { color: #9aabc5 !important; font-size: 9px !important; }
.entity-avatar, .module-avatar, .template-avatar { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 auto; border-radius: 8px; }
.entity-avatar { color: #416bbd; background: #edf3ff; font-size: 11px; font-weight: 700; }
.module-avatar { color: #795fd1; background: #f2efff; }
.template-avatar { color: #218b67; background: #eaf8f2; }
.plan-pill, .scope-pill, .module-ref, .version { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 6px; color: #61718a; background: #f5f7fb; font-size: 10px; }
.scope-pill { color: #3d68c8; background: var(--blue-soft); }
.scope-pill.private { color: #765bc7; background: var(--purple-soft); }
.module-ref { color: #596b88; background: #f5f7fa; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.version { color: #3f69c3; background: #f1f5ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cell-muted { color: #9da8b6; }
.tag-list { display: flex; gap: 5px; }
.tag { display: inline-block; max-width: 128px; overflow: hidden; padding: 4px 6px; border: 1px solid #e8edf3; border-radius: 5px; color: #748197; background: #fbfcfd; font-size: 9px; text-overflow: ellipsis; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #c2cad4; }
.row-action { padding: 5px 8px; border: 1px solid #dce6fa; border-radius: 6px; color: var(--blue); background: #f4f7ff; font-size: 10px; }
.row-action:hover { border-color: #b7ccf9; background: #eaf1ff; }
.row-action-secondary { color: #738095; border-color: var(--line); background: #fff; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font-size: 10px; }
.status i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-active, .status-available, .status-completed, .status-published { color: var(--green); background: var(--green-soft); }
.status-review, .status-queued, .status-running, .status-draft { color: #3b6dcc; background: var(--blue-soft); }
.status-maintenance, .status-paused, .status-needs_action { color: var(--orange); background: var(--orange-soft); }
.status-planned { color: var(--orange); background: var(--orange-soft); }
.status-retired, .status-frozen, .status-suspended, .status-failed, .status-stopped, .status-archived { color: var(--red); background: var(--red-soft); }
.progress-line { display: flex; align-items: center; gap: 9px; color: #8c99aa; font-size: 10px; }
.progress { width: 105px; height: 6px; overflow: hidden; border-radius: 999px; background: #edf0f5; }
.progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #86aaf8, var(--blue)); }
.task-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #b4bdc9; }
.task-status-dot.running, .task-status-dot.queued { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.task-status-dot.completed { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.task-status-dot.failed, .task-status-dot.needs_action { background: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.version-note { margin-left: 6px; color: #a3adba; font-size: 10px; }
.action-name { color: #50627e; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.metadata-preview { display: inline-block; max-width: 220px; overflow: hidden; padding: 4px 7px; border-radius: 5px; color: #8794a7; background: #f7f8fa; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-overflow: ellipsis; vertical-align: middle; }
.empty { padding: 65px 20px; color: var(--muted); text-align: center; }
.empty-icon { display: grid; place-items: center; width: 47px; height: 47px; margin: 0 auto 15px; border-radius: 13px; color: #8da9df; background: #f0f5ff; }
.empty strong { display: block; margin-bottom: 7px; color: #516078; font-size: 13px; }
.empty p { margin: 0; color: #a1abb9; font-size: 11px; }

/* Modal and drawer */
.modal-backdrop, .drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: #2031514a; }
.modal-backdrop { display: grid; place-items: center; padding: 25px; }
.modal { width: min(520px, 100%); max-height: calc(100vh - 50px); overflow: auto; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 25px 80px #1f335733; }
.modal-wide { width: min(640px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 21px 23px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 7px 0 0; color: #293950; font-size: 16px; letter-spacing: -.025em; }
.modal-close { display: inline-grid; place-items: center; width: 29px; height: 29px; padding: 0; border: 0; border-radius: 7px; color: #929eaf; background: transparent; }
.modal-close:hover { color: #3f5f9e; background: #f3f6fb; }
.modal-body { padding: 22px 23px 24px; }
.form-intro { display: flex; align-items: center; gap: 11px; margin-bottom: 21px; padding: 11px 12px; border: 1px solid #e5ecf8; border-radius: 8px; color: #8090a6; background: #f8faff; font-size: 11px; line-height: 1.55; }
.form-intro p { margin: 0; }
.form-icon { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 9px; }
.form-icon.blue { color: var(--blue); background: var(--blue-soft); }
.form-icon.purple { color: var(--purple); background: var(--purple-soft); }
.form-icon.green { color: var(--green); background: var(--green-soft); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 17px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.drawer-backdrop { display: flex; justify-content: flex-end; background: #20315132; }
.drawer { width: min(430px, 100%); height: 100%; overflow: auto; border-left: 1px solid var(--line); background: #fff; box-shadow: -18px 0 50px #233c6814; animation: slide-in .2s ease-out; }
@keyframes slide-in { from { transform: translateX(28px); opacity: .2; } to { transform: translateX(0); opacity: 1; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 28px 27px 22px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { max-width: 320px; margin: 8px 0 0; overflow: hidden; color: #263750; font-size: 19px; font-weight: 700; letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
.drawer-body { padding: 24px 27px 36px; }
.detail-status { display: flex; align-items: center; gap: 10px; color: #a0aab8; font-size: 11px; }
.detail-description { margin: 20px 0 25px; color: #718097; font-size: 12px; line-height: 1.75; }
.detail-fields { display: grid; gap: 0; border-top: 1px solid var(--line); }
.detail-fields > div { display: grid; grid-template-columns: 100px 1fr; gap: 15px; padding: 13px 0; border-bottom: 1px solid #f0f2f5; }
.detail-fields span { color: #98a4b3; font-size: 11px; }
.detail-fields strong { overflow-wrap: anywhere; color: #43526a; font-size: 11px; font-weight: 600; text-align: right; }
.detail-section { margin-top: 27px; }
.detail-section h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; color: #53627a; font-size: 12px; }
.detail-section h3 small { color: #a2acb9; font-size: 10px; font-weight: 500; }
.member-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.member-action-grid .row-action { width: 100%; min-height: 34px; padding: 0 8px; }
.member-action-note { margin: 10px 0 0; font-size: 10px; line-height: 1.55; }
.detail-action-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 8px 0; border-bottom: 1px solid #f1f3f6; color: #718097; font-size: 11px; }
.detail-action-row:last-of-type { border-bottom: 0; }
.detail-action-row .row-action { flex: 0 0 auto; }
.field-readonly { min-height: 36px; display: flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: #718097; background: #f8f9fb; font-size: 11px; }
.field-help { display: block; margin-top: 6px; color: #9da8b6; font-size: 10px; }
.provision-summary { display: grid; gap: 3px; margin-top: 16px; padding: 11px 12px; border: 1px solid #dfe9f8; border-radius: 8px; background: #f7faff; color: #5d6e86; font-size: 11px; }
.provision-summary span { display: inline-flex; align-items: center; gap: 6px; color: #5477ac; font-weight: 600; }
.provision-summary svg { width: 14px; height: 14px; }
.provision-summary strong { color: #263852; font-size: 12px; }
.provision-summary small { color: #8c9bb0; }
.credential-result { display: grid; gap: 0; border: 1px solid #e5ecf8; border-radius: 8px; overflow: hidden; background: #fbfcff; }
.credential-result > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 12px; border-bottom: 1px solid #edf1f7; }
.credential-result > div:last-child { border-bottom: 0; }
.credential-result span { color: #8b98aa; font-size: 11px; }
.credential-result code, .credential-result strong { color: #263852; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; word-break: break-all; }
.credential-result strong { font-family: inherit; }
.version-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 9px; min-height: 39px; border-bottom: 1px solid #f2f3f6; color: #53637a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.version-row small { color: #a3adba; font-family: inherit; }
.member-row { min-height: 47px; border-bottom: 1px solid #f1f3f6; }
.member-row > span:nth-child(2) { display: grid; gap: 3px; flex: 1; }
.member-row strong { color: #53627a; font-size: 11px; }
.member-row small { color: #a1abb9; font-size: 10px; }
.member-row em { color: #8d99aa; font-size: 10px; font-style: normal; }
.detail-divider { margin-top: 27px; border-top: 1px solid var(--line); }
.detail-meta { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; color: #a3adba; font-size: 10px; }
.detail-meta code { color: #718099; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.json-block { max-height: 220px; overflow: auto; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; color: #687791; background: #f8f9fb; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
.toast { position: fixed; right: 28px; bottom: 26px; z-index: 30; display: flex; align-items: center; gap: 9px; min-width: 210px; max-width: 360px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 9px; color: #42536e; background: #fff; box-shadow: 0 13px 34px #21365a20; font-size: 12px; animation: toast-in .2s ease-out; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; color: var(--green); background: var(--green-soft); }
.loading-state, .error-state { display: grid; justify-items: center; place-content: center; min-height: 520px; color: #65748b; text-align: center; }
.loading-state strong, .error-state h2 { margin: 15px 0 6px; color: #45546c; font-size: 14px; }
.loading-state p, .error-state p { margin: 0 0 17px; color: #a0aaba; font-size: 11px; }
.spinner { display: inline-block; width: 22px; height: 22px; border: 2px solid #dce7fb; border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }
.spinner-light { width: 14px; height: 14px; border-color: #ffffff66; border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--red); background: var(--red-soft); font-size: 19px; font-weight: 700; }

@media (max-width: 1240px) {
  .content { padding: 31px 30px 46px; }
  .topbar { padding: 0 30px; }
  .welcome-banner { padding-left: 29px; }
  .banner-orbit { margin-right: 10px; }
  .overview-grid { grid-template-columns: minmax(0, 1.3fr) minmax(280px, .9fr); }
}
@media (max-width: 1120px) {
  body { min-width: 980px; }
  .console { grid-template-columns: 224px minmax(0, 1fr); }
  .sidebar-brand { padding: 0 19px; }
  .tenant-card { margin-left: 13px; margin-right: 13px; }
  .content { padding: 28px 24px 42px; }
  .overview-grid { grid-template-columns: 1fr; }
  .banner-orbit { display: none; }
  .roadmap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .roadmap-item:nth-child(2) { border-right: 0; }
}

/* Extended commercial CMS modules */
.sidebar { position: sticky; top: 0; height: 100vh; }
.sidebar-header { flex: 0 0 auto; padding: 16px 15px 15px; border-bottom: 1px solid #edf0f5; background: #fff; }
.sidebar-header .sidebar-brand { height: auto; padding: 0 5px; border-bottom: 0; }
.sidebar-header .sidebar-brand .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.sidebar-header .sidebar-brand strong { line-height: 1.25; }
.sidebar-header .sidebar-brand small { margin-top: 3px; }
.workspace-switcher { display: flex; align-items: center; gap: 10px; min-height: 51px; margin: 15px 0 0; padding: 9px 10px; border: 1px solid #e4eaf3; border-radius: 11px; background: #f9fbfe; box-shadow: 0 3px 10px #23375808; }
.workspace-switcher > .icon { margin-left: auto; color: #9aa8ba; }
.topbar { position: sticky; top: 0; z-index: 8; height: 64px; padding: 0 34px; box-shadow: 0 1px 0 #eef1f5; }
.topbar-left { display: flex; align-items: center; min-width: 0; gap: 13px; }
.topbar-app { color: #52617a; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.topbar-separator { width: 1px; height: 18px; background: #e4e9f1; }
.topbar-left .crumbs { min-width: 0; }
.topbar-left .crumbs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content { max-width: 1760px; padding-top: 30px; }
.page-head { align-items: center; margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid #edf0f5; }
.page-head h1 { font-size: 26px; }
.page-actions { flex-wrap: wrap; justify-content: flex-end; }
.data-panel { overflow: visible; }
.data-panel .toolbar { position: sticky; top: 70px; z-index: 5; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
.table-wrap { overflow-x: auto; }
.table-wrap thead th { position: static; background: #fbfcfe; box-shadow: inset 0 -1px 0 var(--line); }
.table-wrap tbody tr { transition: background .14s ease, box-shadow .14s ease; }
.table-wrap tbody tr:hover { background: #f8faff; box-shadow: inset 3px 0 0 #c9d9ff; }
.table-wrap tbody tr[data-detail] { cursor: pointer; }
.nav-group { gap: 1px; }
.nav-group-items { display: grid; gap: 2px; }

/* Module center uses one stable entry with lightweight internal tabs. */
.module-center-shell { display: grid; gap: 22px; }
.module-center-tabs { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 5px 18px #314a7210; }
.module-center-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 13px; border: 0; border-radius: 8px; color: #718099; background: transparent; font-size: 12px; font-weight: 650; transition: color .15s, background .15s, box-shadow .15s; }
.module-center-tab:hover { color: var(--blue); background: var(--blue-soft); }
.module-center-tab.is-active { color: var(--blue-strong); background: var(--blue-soft); box-shadow: inset 0 0 0 1px #d7e3ff; }
.module-center-tab .icon { width: 15px; height: 15px; }
.extension-release-banner { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 0 0 22px; padding: 24px 26px; border: 1px solid #dce7fb; border-radius: 15px; background: linear-gradient(120deg, #f3f7ff, #fff 68%); }
.extension-release-banner h2 { margin: 8px 0 5px; color: #26385a; font-size: 18px; letter-spacing: -.03em; }
.extension-release-banner p { max-width: 720px; margin: 0; color: #71809a; font-size: 12px; line-height: 1.7; }
.extension-update-state { display: grid; justify-items: end; gap: 8px; min-width: 220px; }
.extension-update-state small { color: #8b97a9; font-size: 11px; text-align: right; }
.nav-label-button { min-height: 25px; padding-top: 3px; padding-bottom: 4px; }
.nav-item { min-height: 39px; }
.tenant-card { box-shadow: 0 3px 12px #23375808; }
.sidebar-bottom { flex: 0 0 auto; padding: 13px 15px 15px; border-top: 1px solid #edf0f5; background: #fff; }
.security-chip { display: flex; align-items: center; gap: 8px; min-height: 35px; margin: 0 4px 10px; color: #718199; }
.security-chip-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; color: #7697d2; background: #f0f4fb; }
.security-chip strong, .security-chip small { display: block; }
.security-chip strong { color: #708098; font-size: 10px; font-weight: 650; }
.security-chip small { margin-top: 3px; color: #a6afbc; font-size: 9px; }
.account-card { display: flex; align-items: center; gap: 9px; min-height: 49px; padding: 7px 8px; border: 1px solid #e9edf3; border-radius: 10px; background: #fbfcfe; }
.account-card .icon-button { width: 28px; height: 28px; }
.metric-card, .panel { box-shadow: 0 5px 18px #23375808; }
.panel-head { min-height: 64px; }
.toolbar { min-height: 62px; }
.toolbar .search-wrap { max-width: 360px; }
.substats { margin-top: -1px; }
.quick-list button:focus-visible, .nav-item:focus-visible, .nav-label-button:focus-visible, .button:focus-visible, .icon-button:focus-visible { outline: 2px solid #95b4fa; outline-offset: 2px; }
.metric-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 15px; }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .75fr); gap: 15px; margin-bottom: 15px; }
.chart-panel, .insight-panel { min-height: 300px; }
.bar-chart { display: flex; align-items: flex-end; gap: 13px; height: 205px; padding: 30px 28px 0; }
.bar-column { display: grid; align-items: end; justify-items: center; flex: 1; height: 100%; gap: 8px; }
.bar-column > span { color: #7e8ba0; font-size: 10px; }
.bar-column > i { display: block; width: min(28px, 68%); min-height: 8px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #78a0ff, #d2e0ff); }
.bar-column > small { color: #a3adba; font-size: 9px; white-space: nowrap; }
.insight-list { padding: 8px 22px 18px; }
.insight-list > div { display: flex; align-items: center; gap: 11px; min-height: 70px; border-bottom: 1px solid #f0f2f6; }
.insight-list > div:last-child { border-bottom: 0; }
.insight-list strong, .insight-list small { display: block; }
.insight-list strong { color: #4b5a71; font-size: 12px; }
.insight-list small { margin-top: 4px; color: #9aa6b7; font-size: 10px; }
.insight-icon, .billing-rule-icon, .policy-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; }
.insight-icon.blue, .billing-rule-icon.blue, .policy-icon.blue { color: var(--blue); background: var(--blue-soft); }
.insight-icon.purple, .billing-rule-icon.purple, .policy-icon.purple { color: var(--purple); background: var(--purple-soft); }
.insight-icon.orange { color: var(--orange); background: var(--orange-soft); }
.billing-rule-icon.green, .policy-icon.green { color: var(--green); background: var(--green-soft); }
.alert-summary, .billing-notice, .connection-banner, .key-boundary, .gate-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 17px; padding: 20px 24px; border: 1px solid #e1e8f5; border-radius: 13px; background: linear-gradient(110deg, #f7faff, #fff); }
.alert-summary-icon, .notice-icon, .connection-logo, .key-boundary-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; color: var(--blue); background: var(--blue-soft); }
.alert-summary strong, .billing-notice strong, .connection-banner strong, .key-boundary strong { display: block; color: #334663; font-size: 13px; }
.alert-summary small, .billing-notice p, .connection-banner p, .key-boundary p { display: block; margin: 5px 0 0; color: #8c99ab; font-size: 11px; line-height: 1.55; }
.alert-summary > .status, .billing-notice > .tag, .connection-banner > .tag { margin-left: auto; white-space: nowrap; }
.incident-panel { margin-top: 15px; }
.timeline-list { padding: 11px 24px 17px; }
.timeline-item { position: relative; display: flex; gap: 12px; min-height: 46px; padding: 9px 0 8px 16px; border-left: 1px solid #e0e7f1; }
.timeline-item > i { position: absolute; top: 16px; left: -4px; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #9eb8ef; }
.timeline-item strong, .timeline-item small { display: block; }
.timeline-item strong { color: #516077; font-size: 11px; }
.timeline-item small { margin-top: 3px; color: #a1abba; font-size: 10px; }
.priority-high { display: inline-flex; padding: 4px 7px; border-radius: 5px; color: #bd6670; background: var(--red-soft); font-size: 10px; }
.billing-notice > div, .connection-banner > div, .key-boundary > div { min-width: 0; flex: 1; }
.rollout-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-bottom: 17px; padding: 21px 24px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.rollout-step { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 19px; border-right: 1px solid var(--line); }
.rollout-step:last-child { border-right: 0; }
.rollout-step b { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #8190a4; background: #f0f3f8; font-size: 11px; }
.rollout-step.is-done b { color: #fff; background: var(--blue); }
.rollout-step strong, .rollout-step small { display: block; }
.rollout-step strong { color: #53627a; font-size: 11px; }
.rollout-step small { margin-top: 4px; color: #a0aaba; font-size: 9px; }
.rollout-stage { display: inline-flex; padding: 5px 8px; border-radius: 6px; color: #8c789d; background: #f4f0fa; font-size: 10px; }
.rollout-stage.complete { color: var(--green); background: var(--green-soft); }
.gate-banner { justify-content: space-between; }
.gate-banner h2 { margin: 6px 0 4px; color: #354866; font-size: 16px; }
.gate-banner p { margin: 0; color: #8f9bad; font-size: 11px; }
.gate-list { display: flex; flex-wrap: wrap; gap: 8px; max-width: 360px; justify-content: flex-end; }
.gate-list span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid #e5ebf4; border-radius: 6px; color: #728198; background: #fff; font-size: 10px; }
.gate-list i, .source-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.source-pill { display: inline-flex; align-items: center; gap: 7px; color: #5573a7; font-size: 11px; }
.policy-grid, .security-grid, .billing-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 15px; }
.security-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.policy-card { display: flex; align-items: flex-start; gap: 13px; padding: 23px; min-height: 155px; }
.policy-card h2 { margin: 0; color: #44546c; font-size: 14px; }
.policy-card p { margin: 8px 0 13px; color: #8e9bad; font-size: 11px; line-height: 1.6; }
.policy-card strong { color: var(--blue); font-size: 11px; }
.policy-note-body { display: flex; gap: 11px; padding: 20px 23px; color: #728198; font-size: 11px; line-height: 1.7; }
.policy-note-body > .icon { color: var(--green); margin-top: 2px; }
.billing-rule-grid { padding: 0; }
.billing-rule-grid > div { display: flex; flex-direction: column; gap: 8px; padding: 21px 22px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.billing-rule-grid strong { color: #4e5d74; font-size: 12px; }
.billing-rule-grid small { color: #98a4b4; font-size: 10px; line-height: 1.5; }
.membership-current { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 18px; padding: 24px 27px; border-color: #dfe5f4; background: linear-gradient(110deg, #f7f9ff, #fff); }
.membership-current h2 { margin: 9px 0 6px; color: #263a5c; font-size: 21px; letter-spacing: -.04em; }
.membership-current p { max-width: 520px; margin: 0; color: #8390a5; font-size: 11px; line-height: 1.65; }
.membership-current-meta { display: grid; grid-template-columns: repeat(3, minmax(96px, 1fr)); gap: 18px; min-width: min(480px, 48%); }
.membership-current-meta > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.membership-current-meta small, .membership-stat small { color: #98a3b6; font-size: 10px; }
.membership-current-meta strong, .membership-stat strong { color: #425474; font-size: 15px; }
.membership-current-meta em, .membership-stat em { color: #a5afbf; font-size: 10px; font-style: normal; font-weight: 500; }
.membership-current-meta i { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: #e9edf5; }
.membership-current-meta i i { height: 100%; background: var(--blue); }
.membership-stat { justify-content: center; padding-left: 16px; border-left: 1px solid #e9edf4; }
.section-intro { display: flex; align-items: flex-end; justify-content: space-between; margin: 24px 0 12px; }
.section-intro h2 { margin: 6px 0 4px; color: #2e3f5d; font-size: 16px; letter-spacing: -.03em; }
.section-intro p { margin: 0; color: #9aa5b5; font-size: 10px; }
.membership-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.membership-plan-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 178px; padding: 21px 23px; border: 1px solid #e3e8f1; border-radius: 13px; background: #fff; box-shadow: 0 4px 14px rgba(38, 59, 92, .035); }
.membership-plan-card.is-featured { border-color: #cfd9fb; background: linear-gradient(135deg, #f7f8ff, #fff); box-shadow: 0 8px 22px rgba(92, 92, 210, .08); }
.plan-card-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.membership-plan-card > strong { color: #34476b; font-size: 23px; letter-spacing: -.04em; }
.membership-plan-card > strong small { color: #9aa5b6; font-size: 10px; font-weight: 500; letter-spacing: 0; }
.membership-plan-card p { flex: 1; margin: 0; color: #8995a9; font-size: 10px; line-height: 1.55; }
.membership-plan-card .button { min-height: 32px; padding: 0 13px; font-size: 10px; }
.membership-orders { margin-top: 5px; }
.security-card { overflow: hidden; }
.security-list { padding: 4px 22px 13px; }
.security-list > div { display: flex; justify-content: space-between; gap: 15px; min-height: 46px; align-items: center; border-bottom: 1px solid #f0f2f5; }
.security-list > div:last-child { border-bottom: 0; }
.security-list span { color: #8895a7; font-size: 11px; }
.security-list strong { color: #52617a; font-size: 11px; font-weight: 650; }
.key-boundary { border-color: #e6e4f6; background: linear-gradient(110deg, #fbfaff, #fff); }
.key-boundary-icon { color: var(--purple); background: var(--purple-soft); }
.empty-panel { min-height: 200px; display: grid; place-items: center; }
.workbench-grid { display: grid; grid-template-columns: minmax(330px, .76fr) minmax(0, 1.34fr); gap: 15px; align-items: start; }
.workbench-list-panel, .workbench-detail-panel { min-height: 520px; overflow: hidden; }
.workbench-list { max-height: 632px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #e1e6ef transparent; }
.workbench-list::-webkit-scrollbar { width: 5px; }
.workbench-list::-webkit-scrollbar-thumb { border-radius: 5px; background: #e1e6ef; }
.workbench-list-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 11px; width: 100%; min-height: 70px; padding: 0 19px; border: 0; border-bottom: 1px solid #f0f2f6; color: inherit; background: transparent; text-align: left; transition: background .14s ease, box-shadow .14s ease; }
.workbench-list-item:hover { background: #f8faff; }
.workbench-list-item.is-selected { background: #f0f5ff; box-shadow: inset 3px 0 0 var(--blue); }
.workbench-list-copy, .workbench-list-meta { min-width: 0; }
.workbench-list-copy strong, .workbench-list-copy small, .workbench-list-meta b, .workbench-list-meta small { display: block; }
.workbench-list-copy strong { overflow: hidden; color: #4a5971; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.workbench-list-copy small { margin-top: 5px; overflow: hidden; color: #9aa6b6; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workbench-list-meta { text-align: right; }
.workbench-list-meta b { color: #5279cb; font-size: 11px; }
.workbench-list-meta small { margin-top: 5px; color: #a6afbd; font-size: 9px; white-space: nowrap; }
.task-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #bdc6d3; box-shadow: 0 0 0 3px #f0f2f5; }
.task-status-dot.running, .task-status-dot.queued { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.task-status-dot.completed { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.task-status-dot.failed, .task-status-dot.needs_action { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.workbench-detail-panel { padding: 0 27px 28px; }
.preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 17px; padding: 27px 0 21px; border-bottom: 1px solid var(--line); }
.preview-head h2 { margin: 7px 0 0; overflow-wrap: anywhere; color: #2e405e; font-size: 18px; letter-spacing: -.035em; }
.preview-head p { margin: 6px 0 0; color: #8b98ab; font-size: 11px; }
.preview-head > .status { margin-top: 3px; white-space: nowrap; }
.preview-progress { padding: 22px 0 21px; border-bottom: 1px solid #f0f2f5; }
.preview-progress-top { display: flex; justify-content: space-between; align-items: center; color: #6f7e93; font-size: 11px; }
.preview-progress-top strong { color: #3e5680; font-size: 13px; }
.progress-large { height: 8px; margin: 11px 0 8px; }
.preview-progress > small { color: #a0aaba; font-size: 10px; }
.preview-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 6px 0 13px; }
.preview-field-grid > div { min-height: 65px; padding: 13px 13px 8px 0; border-bottom: 1px solid #f3f4f7; }
.preview-field-grid span, .preview-field-grid strong { display: block; }
.preview-field-grid span { color: #9aa6b6; font-size: 10px; }
.preview-field-grid strong { margin-top: 6px; overflow: hidden; color: #53627a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.preview-section { padding: 18px 0 3px; }
.preview-section-head { display: flex; align-items: center; justify-content: space-between; color: #63738b; font-size: 11px; font-weight: 650; }
.preview-section p { margin: 10px 0 0; color: #8d99aa; font-size: 11px; line-height: 1.7; }
.preview-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 19px; padding-top: 17px; border-top: 1px solid var(--line); }
.workbench-empty { display: grid; justify-items: center; align-content: center; min-height: 430px; padding: 26px; color: #8c99ab; text-align: center; }
.workbench-empty .empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 14px; color: #8da7dd; background: #f0f4fc; }
.workbench-empty strong { color: #56657c; font-size: 13px; }
.workbench-empty p { max-width: 220px; margin: 7px 0 0; color: #a1abba; font-size: 10px; line-height: 1.6; }
.workbench-empty.compact { min-height: 300px; }
.release-list-mark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #8c99ad; background: #f1f3f7; }
.release-list-mark.is-published { color: var(--green); background: var(--green-soft); }
.release-state { display: flex; align-items: center; gap: 11px; padding: 20px 0; border-bottom: 1px solid #f0f2f5; }
.release-state-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #8a99ac; background: #f1f3f8; }
.release-state-icon.done { color: var(--green); background: var(--green-soft); }
.release-state strong, .release-state small { display: block; }
.release-state strong { color: #51617a; font-size: 11px; }
.release-state small { margin-top: 4px; color: #99a5b5; font-size: 10px; }
.gate-check-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.gate-check-list span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #e7ebf2; border-radius: 6px; color: #758399; font-size: 10px; }
.gate-check-list i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.announcement-governance { display: flex; align-items: center; gap: 14px; margin-bottom: 17px; padding: 20px 24px; border: 1px solid #e1e8f5; border-radius: 13px; background: linear-gradient(110deg, #f7faff, #fff); }
.announcement-governance-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; color: var(--blue); background: var(--blue-soft); }
.announcement-governance > div { min-width: 0; flex: 1; }
.announcement-governance strong { display: block; color: #334663; font-size: 13px; }
.announcement-governance p { display: block; margin: 5px 0 0; color: #8c99ab; font-size: 11px; line-height: 1.55; }
.announcement-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; color: #fff; background: #6c82d9; }
.announcement-avatar.warning { background: #d9953f; }
.announcement-avatar.important { background: #dd6875; }
.announcement-avatar .icon { width: 16px; height: 16px; }
.announcement-content-preview { display: block; max-width: 360px; overflow: hidden; color: #8b97a9; text-overflow: ellipsis; white-space: nowrap; }
.announcement-level { display: inline-flex; padding: 4px 7px; border-radius: 5px; color: #655fd0; background: #f0efff; font-size: 10px; }
.announcement-level.warning { color: #9b6b26; background: #fff4df; }
.announcement-level.important { color: #b14f5d; background: #fff0f2; }
@media (max-width: 760px) { .announcement-governance { align-items: flex-start; flex-wrap: wrap; } .announcement-governance > .status { margin-left: 54px; } .announcement-content-preview { max-width: 200px; } }

@media (max-width: 1180px) {
  .analytics-grid { grid-template-columns: 1fr; }
  .policy-grid, .billing-rule-grid { grid-template-columns: 1fr; }
  .membership-current { align-items: stretch; flex-direction: column; gap: 20px; }
  .membership-current-meta { min-width: 0; width: 100%; }
  .membership-plan-grid { grid-template-columns: 1fr; }
  .rollout-steps { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .rollout-step:nth-child(2) { border-right: 0; }
  .workbench-grid { grid-template-columns: 1fr; }
  .workbench-list-panel { min-height: auto; }
  .workbench-list { max-height: 360px; }
}

/* Admin login follows the approved split control-plane reference. */
body:has(.login-page) { min-width: 0; }
.login-page.login-page-admin { min-height: 100vh; padding: clamp(24px, 5vw, 72px); background: #edf3fc; }
.login-page-admin .login-layout { width: min(1050px, calc(100vw - 80px)); min-height: 542px; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); border: 1px solid #d8e1ef; border-radius: 19px; box-shadow: 0 24px 70px rgba(36, 62, 102, .16); }
  .login-page-admin .login-intro { position: relative; isolation: isolate; overflow: hidden; padding: 31px 32px 23px; color: #f5f8ff; background: #02091c url('/admin/login-starmap.jpg') center / cover no-repeat; justify-content: flex-start; }
.login-page-admin .login-intro::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(1, 8, 24, .72) 0%, rgba(3, 13, 36, .17) 72%, rgba(1, 8, 22, .08) 100%); content: ''; }
.login-page-admin .login-intro::after { position: absolute; z-index: -1; right: -100px; bottom: -120px; width: 390px; height: 270px; border: 1px solid rgba(113, 184, 255, .18); border-radius: 50%; transform: rotate(-21deg); box-shadow: 0 0 45px rgba(42, 137, 255, .1); content: ''; }
.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 31px; }
.login-brand-logo { width: 28px; height: 28px; object-fit: contain; }
.login-brand-name { display: grid; gap: 2px; }
.login-brand-name strong { color: #f5f8ff; font-size: 13px; font-weight: 680; letter-spacing: -.02em; }
.login-brand-name small { color: #9db8df; font-size: 8px; letter-spacing: .08em; }
.login-local-badge { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(137, 184, 244, .35); border-radius: 5px; color: #a8c6ef; font-size: 8px; letter-spacing: .07em; }
  .login-page-admin .intro-copy { position: relative; z-index: 1; margin: 84px 0 0; padding: 0; }
.login-page-admin .intro-copy .eyebrow { color: #7db4ff; font-size: 8px; letter-spacing: .18em; }
  .login-page-admin .intro-copy h1 { margin: 14px 0 14px; color: #f5f8ff; font-size: clamp(34px, 4vw, 46px); font-weight: 680; letter-spacing: -.07em; line-height: 1.14; }
  .login-page-admin .intro-copy h1 span, .login-page-admin .intro-copy h1 em { display: block; }
.login-page-admin .intro-copy h1 em { color: #77b4ff; font-style: normal; }
.login-page-admin .intro-copy p { max-width: 410px; color: #b7c9e5; font-size: 11px; line-height: 1.75; }
  .login-feature-strip { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); margin: auto 0 17px; border-top: 1px solid rgba(161, 196, 239, .28); border-bottom: 1px solid rgba(161, 196, 239, .28); }
.login-feature-strip > div { min-height: 61px; padding: 14px 13px 11px 0; border-right: 1px solid rgba(161, 196, 239, .2); }
.login-feature-strip > div + div { padding-left: 17px; }
.login-feature-strip > div:last-child { border-right: 0; }
.login-feature-strip strong, .login-feature-strip small { display: block; }
.login-feature-strip strong { color: #f1f6ff; font-size: 15px; font-weight: 650; }
.login-feature-strip small { margin-top: 5px; color: #91b3dd; font-size: 9px; }
.login-status-line { position: relative; z-index: 1; display: flex; gap: 15px; color: #89a7cc; font-size: 8px; }
.login-status-line span { display: inline-flex; align-items: center; gap: 6px; }
.login-status-line i { width: 5px; height: 5px; border-radius: 50%; background: #3bd6a0; box-shadow: 0 0 0 3px rgba(59, 214, 160, .12); }
.login-page-admin .login-card { justify-content: center; padding: 66px 70px 48px; }
.login-page-admin .login-card-head .eyebrow { color: #416cff; font-size: 8px; letter-spacing: .2em; }
.login-page-admin .login-card-head h2 { margin: 13px 0 7px; color: #17243b; font-size: 26px; font-weight: 720; letter-spacing: -.06em; }
.login-page-admin .login-card-head h2 { margin-bottom: 28px; }
.login-page-admin .login-card-head p { margin: 0 0 29px; color: #8691a4; font-size: 10px; }
.login-page-admin .field { gap: 7px; margin: 15px 0; }
.login-page-admin .field label { color: #53617a; font-size: 10px; font-weight: 620; }
.login-page-admin .input-wrap input { min-height: 38px; padding-top: 10px; padding-bottom: 10px; border-color: #cfd7e5; border-radius: 8px; font-size: 11px; }
.login-page-admin .input-wrap .icon { left: 12px; color: #9aa8bc; }
.login-page-admin .input-wrap input:focus { border-color: #4c72f5; box-shadow: 0 0 0 3px rgba(76, 114, 245, .13); }
.login-form-row { display: flex; align-items: center; justify-content: space-between; margin: 1px 0 8px; }
.login-remember { display: inline-flex; align-items: center; gap: 6px; color: #6e7b91; font-size: 9px; }
.login-remember input { width: 12px; height: 12px; margin: 0; accent-color: #3d66ef; }
.login-forgot { padding: 0; border: 0; color: #5073dd; background: transparent; font-size: 9px; }
.login-forgot:hover { color: #274ec7; text-decoration: underline; }
.login-error { min-height: 18px; margin: 4px 0 0; color: var(--red); font-size: 10px; line-height: 1.45; }
.login-error[aria-hidden='true'] { visibility: hidden; }
.login-local-note { display: flex; align-items: flex-start; gap: 8px; margin: 1px 0 8px; padding: 9px 10px; border: 1px solid #b9ccff; border-radius: 7px; color: #5670a4; background: #f4f7ff; font-size: 9px; line-height: 1.45; }
.login-note-icon { display: grid; place-items: center; width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; color: #fff; background: #5e82f6; font-size: 9px; font-weight: 700; }
.login-local-note strong, .login-local-note small, .login-local-note em { display: block; font-style: normal; }
.login-local-note strong { color: #526da5; font-size: 9px; font-weight: 650; }
.login-local-note small { margin-top: 2px; color: #5470a7; font-size: 9px; }
.login-local-note em { margin-top: 2px; color: #879bc2; font-size: 8px; }
.login-page-admin .login-submit { min-height: 39px; justify-content: space-between; padding: 0 13px; border-radius: 8px; font-size: 10px; }
.login-page-admin .login-submit { margin-top: 18px; }
.login-submit-arrow { font-size: 17px; font-weight: 400; line-height: 1; }
.login-security { display: flex; align-items: center; gap: 8px; margin-top: 19px; padding: 11px 10px; border: 1px solid #e0e6ef; border-radius: 8px; color: #6581a9; background: #fbfcfe; }
.login-security > .icon { color: #42ba96; }
.login-security strong, .login-security small { display: block; }
.login-security strong { color: #5b6f8d; font-size: 9px; font-weight: 650; }
.login-security small { margin-top: 3px; color: #9aa7b9; font-size: 8px; }
.login-footnote { margin: 20px 0 0; color: #a1acbc; font-size: 8px; text-align: center; }

@media (max-width: 820px) {
  .login-page-admin .login-layout { width: min(520px, calc(100vw - 32px)); max-height: none; grid-template-columns: 1fr; }
  .login-page-admin .login-intro { min-height: 340px; }
  .login-page-admin .login-card { padding: 44px 34px 36px; }
}

/* The console is desktop-first, but it must remain usable when embedded in a
 * narrow browser window or an in-app preview.  Keep the sidebar visible at
 * tablet widths, then turn it into a compact horizontal rail on phones so the
 * content itself never forces a page-level horizontal scroll. */
@media (max-width: 960px) {
  body { min-width: 0; }
  .console { grid-template-columns: 190px minmax(0, 1fr); }
  .sidebar-brand { padding-left: 15px; padding-right: 15px; }
  .sidebar-brand strong { font-size: 13px; }
  .sidebar-brand small { font-size: 9px; }
  .tenant-card { margin-left: 11px; margin-right: 11px; }
  .topbar { padding-left: 20px; padding-right: 20px; }
  .topbar-app { display: none; }
  .topbar-separator { display: none; }
  .content { padding: 25px 20px 42px; }
  .page-head { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 20px; padding-bottom: 17px; }
  .page-actions { justify-content: flex-start; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid, .analytics-grid, .policy-grid, .security-grid, .billing-rule-grid { grid-template-columns: 1fr; }
  .welcome-banner { min-height: 180px; padding: 27px 29px; }
  .banner-orbit { display: none; }
  .membership-current { align-items: stretch; flex-direction: column; }
  .membership-current-meta { min-width: 0; width: 100%; }
  .membership-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rollout-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rollout-step:nth-child(2) { border-right: 0; }
  .workbench-grid { grid-template-columns: 1fr; }
  .workbench-list-panel { min-height: auto; }
  .workbench-list { max-height: 360px; }
  .extension-release-banner { gap: 20px; }
  .extension-update-state { min-width: 180px; }
  .table-wrap { max-width: 100%; overflow-x: auto; }
}

/* Public console shell v2 -------------------------------------------------
 * A calmer control-plane frame: a dark identity rail anchors navigation while
 * the work area stays bright and content-first.  Page modules keep their
 * existing semantics; these tokens only change the shared shell and surface
 * hierarchy so every section feels like one product. */
.console {
  --shell-navy: #111d36;
  --shell-navy-2: #172746;
  --shell-blue: #5c8cff;
  --shell-cyan: #55c8df;
  grid-template-columns: 264px minmax(0, 1fr);
  background: #f3f6fb;
}
.console .sidebar {
  border-right: 0;
  color: #dce7fb;
  background: linear-gradient(180deg, var(--shell-navy) 0%, #15233f 58%, #101b31 100%);
  box-shadow: 9px 0 28px rgba(20, 38, 70, .08);
}
.console .sidebar-header {
  padding: 22px 18px 18px;
  border-bottom: 1px solid rgba(187, 211, 255, .12);
  background: transparent;
}
.console .sidebar-header .sidebar-brand { padding: 0 5px; }
.console .sidebar-brand .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #6a9bff, #4d66db 68%, #684ed5);
  box-shadow: 0 9px 22px rgba(63, 104, 228, .28);
}
.console .sidebar-brand strong { color: #f5f8ff; font-size: 14px; }
.console .sidebar-brand small { color: #8ca4cc; letter-spacing: .08em; }
.console .workspace-switcher {
  margin-top: 20px;
  border-color: rgba(177, 203, 247, .18);
  background: rgba(255, 255, 255, .065);
  box-shadow: none;
}
.console .workspace-switcher > .icon { color: #93a9ce; }
.console .tenant-avatar { color: #c6d9ff; background: rgba(112, 157, 255, .18); }
.console .tenant-copy span { color: #8198bd; }
.console .tenant-copy strong { color: #eef4ff; }
.console .nav { gap: 19px; padding: 18px 12px; scrollbar-color: rgba(184, 207, 249, .25) transparent; }
.console .nav-group { gap: 4px; }
.console .nav-label-button { color: #7288ad; }
.console .nav-label-button .icon { color: #7187ad; }
.console .nav-item {
  min-height: 43px;
  gap: 12px;
  border: 1px solid transparent;
  color: #a9bbda;
}
.console .nav-item:hover { color: #f2f6ff; background: rgba(255, 255, 255, .075); }
.console .nav-item.is-active {
  color: #fff;
  border-color: rgba(126, 166, 255, .22);
  background: linear-gradient(100deg, rgba(84, 132, 255, .36), rgba(93, 104, 216, .20));
  box-shadow: inset 0 0 0 1px rgba(168, 196, 255, .07), 0 8px 18px rgba(5, 13, 35, .16);
}
.console .active-line { right: auto; left: -12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--shell-cyan); box-shadow: 0 0 10px rgba(85, 200, 223, .75); }
.console .sidebar-bottom { padding: 16px 18px 18px; border-top-color: rgba(187, 211, 255, .12); background: rgba(8, 15, 30, .2); }
.console .security-chip { color: #92a8cc; }
.console .security-chip-icon { color: #9ec2ff; background: rgba(112, 157, 255, .16); }
.console .security-chip strong { color: #c6d6ef; }
.console .security-chip small { color: #748cb3; }
.console .account-card { border-color: rgba(177, 203, 247, .16); background: rgba(255, 255, 255, .065); }
.console .account-card .avatar { color: #d6e3ff; background: rgba(112, 157, 255, .2); }
.console .account-card .user-copy strong { color: #f0f5ff; }
.console .account-card .user-copy small { color: #8ca2c5; }
.console .account-card .icon-button { color: #9cb1d2; }
.console .account-card .icon-button:hover { border-color: rgba(178, 205, 255, .22); color: #fff; background: rgba(255, 255, 255, .08); }
.console .topbar {
  height: 72px;
  padding: 0 42px;
  border-bottom-color: #e5eaf3;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(30, 52, 92, .025);
}
.console .topbar-app { color: #304a78; font-size: 12px; letter-spacing: .01em; }
.console .topbar-separator { height: 20px; background: #dbe3ef; }
.console .crumbs { color: #a3aec0; }
.console .crumbs strong { color: #253a61; }
.console .environment { color: #647693; border-color: #dfe7f2; background: #f8faff; }
.console .service-state { color: #708099; }
.console .refresh-button { color: #7587a3; }
.console .content { max-width: 1700px; padding: 40px 46px 68px; }
.console .page-head { margin-bottom: 27px; padding-bottom: 22px; border-bottom: 1px solid #e4eaf3; }
.console .page-head h1 { color: #1c2f51; font-size: 29px; letter-spacing: -.055em; }
.console .page-head p { color: #71809a; }
.console .eyebrow { color: #7c91b3; letter-spacing: .16em; }
.console .button-primary { background: linear-gradient(135deg, #4f7df4, #5c63df); box-shadow: 0 8px 17px rgba(76, 108, 224, .22); }
.console .button-primary:hover { background: linear-gradient(135deg, #416fe7, #5056d1); }
.console .button-secondary { border-color: #d8e1ee; color: #536783; background: #fff; }
.console .button-secondary:hover { border-color: #b9c9e7; background: #f7faff; }
.console .panel, .console .metric-card {
  border-color: #e1e8f2;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(31, 54, 93, .055);
}
.console .panel-head { min-height: 68px; }
.console .metric-card { position: relative; overflow: hidden; }
.console .metric-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, #6c91f8, #9c8ff3); content: ''; opacity: .82; }
.console .welcome-banner { border-color: #d7e2fa; border-radius: 16px; background: linear-gradient(115deg, #edf4ff 0%, #f6f5ff 55%, #eaf9fc 100%); box-shadow: 0 10px 26px rgba(70, 105, 190, .06); }
.console .welcome-banner h2 { color: #20385f; }
.console .welcome-banner h2 span { color: #4a69d8; }
.console .overview-grid { gap: 18px; margin-top: 18px; }
.console .quick-list button:hover { background: #f5f8ff; }
.console .table-wrap { border-radius: 0 0 15px 15px; }
.console table thead th { color: #8b99ad; background: #f9fbfe; }
.console table tbody tr:hover { background: #f6f9ff; box-shadow: inset 3px 0 0 #8caefc; }
.console .module-center-tabs { border-color: #e0e7f2; box-shadow: 0 8px 22px rgba(31, 54, 93, .055); }
.console .module-center-tab.is-active { color: #415ed1; background: #eef3ff; box-shadow: inset 0 0 0 1px #d3dfff; }

@media (max-width: 1120px) {
  .console { grid-template-columns: 224px minmax(0, 1fr); }
  .console .content { padding-left: 30px; padding-right: 30px; }
  .console .topbar { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 960px) {
  .console { grid-template-columns: 190px minmax(0, 1fr); }
  .console .sidebar-header { padding-left: 14px; padding-right: 14px; }
  .console .content { padding: 28px 20px 46px; }
  .console .topbar { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 680px) {
  .console .sidebar { border-bottom: 1px solid #dbe3ef; box-shadow: none; background: #111d36; }
  .console .sidebar-header { padding: 14px 16px 11px; }
  .console .nav { border-top-color: rgba(187, 211, 255, .12); background: #142440; }
  .console .nav-item { color: #a9bbda; }
  .console .nav-item.is-active { color: #fff; }
  .console .sidebar-bottom { background: #101b31; }
  .console .topbar { background: #fff; }
  .console .content { padding: 22px 16px 38px; }
}

/* Two-backend role handoff -------------------------------------------------
 * The login surface is shared, but the destination is explicit.  The small
 * chip and accent treatment make it obvious whether the user is in the
 * platform control plane or the shared customer workspace. */
.portal-chip {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 10px;
  border: 1px solid #dce5f3;
  border-radius: 999px;
  color: #5b6f91;
  background: #f7faff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .03em;
  white-space: nowrap;
}
.portal-chip-platform {
  border-color: #c8d8ff;
  color: #4167c9;
  background: #eef3ff;
}
.portal-chip-workspace {
  border-color: #c7e6e9;
  color: #277c88;
  background: #effbfc;
}
.console-platform .sidebar-brand .brand-mark { background: linear-gradient(145deg, #6a9bff, #4d66db 68%, #684ed5); }
.console-workspace .sidebar-brand .brand-mark { background: linear-gradient(145deg, #45c5cf, #3f81d8 68%, #5365d6); }
.console-workspace .welcome-banner { border-color: #cde8ee; background: linear-gradient(115deg, #edfafd 0%, #f4f7ff 58%, #effaf8 100%); }
.console-workspace .welcome-banner h2 span { color: #277c88; }
.console-workspace .metric-card::before { background: linear-gradient(90deg, #55c8df, #7e91ef); }
.console-workspace .nav-item.is-active { border-color: rgba(112, 205, 222, .3); background: linear-gradient(100deg, rgba(67, 174, 190, .32), rgba(83, 111, 215, .2)); }
.console-workspace .active-line { background: #55d2d2; box-shadow: 0 0 10px rgba(85, 210, 210, .75); }

/* Console shell v3 --------------------------------------------------------
 * Full shell refresh based on the approved login language.  The console now
 * reads as one product: a dark identity rail, a quiet work canvas, and a
 * single high-contrast command surface for every page.  Page-specific markup
 * stays intact so the information architecture and permissions do not move.
 */
:root {
  --shell-ink: #15213a;
  --shell-ink-soft: #52627e;
  --shell-muted: #8290a8;
  --shell-line: #e2e8f2;
  --shell-canvas: #eef2f8;
  --shell-navy: #071329;
  --shell-navy-mid: #0c1d3b;
  --shell-blue: #4e7cf4;
  --shell-cyan: #56d1df;
  --shell-violet: #8b7cf6;
}

body:has(.console) {
  min-width: 0;
  color: var(--shell-ink);
  background: var(--shell-canvas);
}

.console {
  position: relative;
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% -10%, rgba(94, 130, 233, .12), transparent 34%),
    linear-gradient(145deg, #f4f7fb 0%, #edf2f8 58%, #e8eef7 100%);
}

.console .sidebar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  border-right: 1px solid rgba(167, 192, 232, .14);
  color: #d7e5ff;
  background:
    radial-gradient(circle at 18% 0%, rgba(65, 118, 228, .27), transparent 28%),
    linear-gradient(180deg, var(--shell-navy) 0%, #0a1a35 52%, #071126 100%);
  box-shadow: 14px 0 34px rgba(15, 33, 67, .11);
}

.console .sidebar::after {
  position: absolute;
  right: -80px;
  bottom: 90px;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(107, 175, 255, .1);
  border-radius: 50%;
  content: '';
  pointer-events: none;
}

.console .sidebar-header {
  position: relative;
  z-index: 1;
  padding: 25px 20px 20px;
  border-bottom: 1px solid rgba(190, 215, 255, .13);
  background: transparent;
}

.console .sidebar-header .sidebar-brand {
  height: auto;
  gap: 12px;
  padding: 0 4px;
  border-bottom: 0;
}

.console .sidebar-brand .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #6d9dff 0%, #4e6ee3 62%, #7054d8 100%);
  box-shadow: 0 10px 24px rgba(55, 105, 225, .34);
  font-size: 11px;
  letter-spacing: -.08em;
}

.console .sidebar-brand > div { min-width: 0; }
.console .sidebar-brand strong { color: #f7faff; font-size: 14px; letter-spacing: -.025em; }
.console .sidebar-brand small { margin-top: 5px; color: #8ca7d0; font-size: 9px; letter-spacing: .13em; }

.console .workspace-switcher {
  position: relative;
  min-height: 58px;
  margin: 22px 0 0;
  padding: 11px 12px;
  border: 1px solid rgba(183, 210, 255, .2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.console .workspace-switcher::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--shell-cyan);
  box-shadow: 0 0 0 4px rgba(86, 209, 223, .12);
  content: '';
}

.console .workspace-switcher > .icon { color: #88a1c7; }
.console .tenant-avatar { width: 31px; height: 31px; color: #d9e7ff; background: rgba(105, 157, 255, .2); }
.console .tenant-copy span { color: #829bc2; font-size: 9px; letter-spacing: .04em; }
.console .tenant-copy strong { max-width: 155px; margin-top: 4px; color: #f1f6ff; font-size: 12px; }

.console .nav {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 1;
  gap: 22px;
  min-height: 0;
  padding: 23px 14px 18px;
  overflow-y: auto;
  scrollbar-color: rgba(160, 193, 244, .24) transparent;
}

.console .nav-group { gap: 5px; }
.console .nav-label-button { min-height: 23px; padding: 0 12px 5px; color: #7087b0; font-size: 9px; letter-spacing: .16em; }
.console .nav-label-button .icon { color: #6e87b1; }
.console .nav-item {
  min-height: 42px;
  gap: 12px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #9fb4d7;
  font-size: 12px;
  font-weight: 520;
}

.console .nav-item .icon { width: 17px; height: 17px; opacity: .86; }
.console .nav-item:hover { color: #fff; background: rgba(255, 255, 255, .075); }
.console .nav-item.is-active {
  color: #fff;
  border-color: rgba(133, 173, 255, .24);
  background: linear-gradient(105deg, rgba(76, 127, 246, .42), rgba(113, 100, 224, .22));
  box-shadow: inset 0 0 0 1px rgba(184, 211, 255, .06), 0 8px 18px rgba(0, 8, 25, .17);
  font-weight: 680;
}

.console .nav-item.is-active .icon { color: #a9d7ff; opacity: 1; }
.console .active-line { top: 9px; bottom: 9px; left: -14px; width: 3px; border-radius: 0 4px 4px 0; background: var(--shell-cyan); box-shadow: 0 0 12px rgba(86, 209, 223, .8); }

.console .sidebar-bottom {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin: 0;
  padding: 17px 18px 20px;
  border-top: 1px solid rgba(190, 215, 255, .13);
  background: rgba(3, 10, 25, .32);
}

.console .security-chip { min-height: 33px; margin: 0 3px 13px; color: #8fa7cc; }
.console .security-chip-icon { width: 25px; height: 25px; color: #a8d7ff; background: rgba(89, 153, 255, .16); }
.console .security-chip strong { color: #c9d9f2; font-size: 10px; }
.console .security-chip small { color: #7189ae; font-size: 9px; }
.console .account-card { min-height: 50px; padding: 8px 9px; border-color: rgba(186, 214, 255, .17); border-radius: 12px; background: rgba(255, 255, 255, .075); }
.console .account-card .avatar { width: 30px; height: 30px; color: #d9e8ff; background: rgba(106, 157, 255, .24); }
.console .account-card .user-copy strong { color: #f1f6ff; font-size: 11px; }
.console .account-card .user-copy small { color: #89a1c5; font-size: 9px; }
.console .account-card .icon-button { color: #9bb2d3; }

.console .main { min-width: 0; min-height: 100vh; background: transparent; }
.console .topbar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  min-height: 78px;
  height: 78px;
  padding: 0 clamp(24px, 3.4vw, 56px);
  border-bottom: 1px solid rgba(211, 221, 236, .9);
  background: rgba(250, 252, 255, .86);
  box-shadow: 0 8px 24px rgba(31, 53, 91, .035);
  backdrop-filter: blur(18px);
}

.console .topbar-left { gap: 15px; }
.console .topbar-app { color: #425d8c; font-size: 11px; font-weight: 750; letter-spacing: .025em; }
.console .topbar-separator { height: 22px; background: #d8e1ef; }
.console .crumbs { gap: 9px; color: #a4afc0; font-size: 11px; }
.console .crumbs strong { color: #263d65; font-size: 13px; font-weight: 720; }
.console .topbar-actions { gap: 11px; }
.console .portal-chip { min-height: 30px; padding: 0 12px; border-radius: 9px; font-size: 10px; letter-spacing: .04em; box-shadow: 0 4px 10px rgba(58, 87, 148, .05); }
.console .portal-chip-platform { border-color: #c9d7ff; color: #3f62c5; background: #eef3ff; }
.console .portal-chip-workspace { border-color: #c4e8ea; color: #277c88; background: #effbfc; }
.console .environment { min-height: 30px; padding: 0 10px; border-radius: 8px; border-color: #dce5f1; color: #667895; background: rgba(255,255,255,.76); }
.console .service-state { color: #70819a; font-size: 10px; }
.console .service-state i { width: 6px; height: 6px; box-shadow: 0 0 0 4px #e5f8f0; }
.console .refresh-button { width: 34px; height: 34px; border-color: #dfe6f1; color: #657996; background: #fff; }
.console .refresh-button:hover { border-color: #bfcff0; color: #416bd0; background: #f5f8ff; }

.console .content {
  width: min(100%, 1660px);
  max-width: none;
  margin: 0 auto;
  padding: clamp(30px, 4vw, 54px) clamp(24px, 4vw, 58px) 76px;
}

.console .page-head {
  position: relative;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 26px;
  padding: 0 0 24px 19px;
  border-bottom: 1px solid #dbe3ef;
}

.console .page-head::before {
  position: absolute;
  top: 3px;
  bottom: 24px;
  left: 0;
  width: 3px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--shell-blue), var(--shell-violet));
  content: '';
}

.console-workspace .page-head::before { background: linear-gradient(180deg, #50c9d5, #5688ef); }
.console .page-head h1 { margin-top: 9px; color: #182b4a; font-size: clamp(27px, 2.35vw, 34px); font-weight: 760; letter-spacing: -.065em; }
.console .page-head p { max-width: 680px; margin-top: 9px; color: #74839b; font-size: 12px; line-height: 1.65; }
.console .page-actions { gap: 9px; }
.console .button { min-height: 39px; border-radius: 10px; font-size: 11px; }
.console .button-primary { background: linear-gradient(135deg, #4f7df4 0%, #625cdb 100%); box-shadow: 0 9px 18px rgba(75, 104, 218, .2); }
.console .button-primary:hover { background: linear-gradient(135deg, #416fe9 0%, #514fcf 100%); }
.console .button-secondary { border-color: #d6e0ee; color: #536783; background: rgba(255,255,255,.86); }

.console .panel, .console .metric-card {
  border: 1px solid rgba(216, 226, 239, .98);
  border-radius: 17px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 30px rgba(35, 57, 95, .06), 0 2px 5px rgba(35, 57, 95, .025);
}

.console .panel-head { min-height: 74px; padding: 0 25px; border-bottom-color: #e8edf4; }
.console .panel-head h2 { color: #213553; font-size: 15px; font-weight: 730; }
.console .panel-kicker { color: #8aa0c3; font-size: 9px; letter-spacing: .18em; }
.console .panel-period { color: #8e9bb0; font-size: 10px; }
.console .panel-body { padding: 25px; }

.console .welcome-banner {
  min-height: 224px;
  margin-bottom: 18px;
  padding: 34px 40px;
  border: 1px solid rgba(121, 166, 241, .26);
  border-radius: 18px;
  color: #eff6ff;
  background:
    linear-gradient(105deg, rgba(4, 14, 36, .97) 0%, rgba(9, 30, 67, .92) 56%, rgba(28, 46, 91, .87) 100%),
    url('/admin/login-starmap.jpg') center / cover;
  box-shadow: 0 18px 34px rgba(18, 48, 103, .16);
}

.console .welcome-banner::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 83% 38%, rgba(85, 182, 255, .16), transparent 25%), linear-gradient(90deg, transparent 0 60%, rgba(95, 154, 255, .08));
  content: '';
}

.console .welcome-banner::after { top: -123px; right: 118px; width: 330px; height: 330px; border-color: rgba(119, 185, 255, .16); }
.console .welcome-banner > div:first-child { position: relative; z-index: 1; }
.console .welcome-kicker { color: #7db8ff; font-size: 9px; letter-spacing: .2em; }
.console .welcome-banner h2 { margin-top: 15px; color: #f4f8ff; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.06em; }
.console .welcome-banner h2 span { color: #7fc6ff; }
.console-workspace .welcome-banner { border-color: rgba(91, 209, 215, .3); background: linear-gradient(105deg, rgba(4, 23, 40, .97), rgba(10, 53, 72, .91) 60%, rgba(28, 70, 97, .88)), url('/admin/login-starmap.jpg') center / cover; }
.console-workspace .welcome-banner h2 span { color: #75e1dc; }
.console .welcome-banner p { color: #a9c1e3; font-size: 11px; }
.console .banner-orbit { width: 220px; margin-right: 46px; }
.console .orbit-ring { border-color: rgba(117, 190, 255, .26); }
.console .orbit-core { border-color: rgba(127, 191, 255, .34); color: #86c6ff; background: rgba(255, 255, 255, .08); box-shadow: 0 10px 30px rgba(57, 151, 255, .18); backdrop-filter: blur(6px); }
.console .orbit-core small { color: #91bce5; }

.console .metric-grid { gap: 15px; }
.console .metric-card { min-height: 146px; padding: 21px 21px 18px; overflow: hidden; }
.console .metric-card::before { height: 3px; opacity: 1; background: linear-gradient(90deg, #5f8bf4, #9a88ee); }
.console-workspace .metric-card::before { background: linear-gradient(90deg, #57cbd5, #6289ed); }
.console .metric-label { color: #7d8da7; font-size: 11px; font-weight: 650; }
.console .metric-icon { width: 34px; height: 34px; border-radius: 11px; }
.console .metric-value { margin-top: 15px; color: #192e50; font-size: 28px; font-weight: 760; }
.console .metric-foot { margin-top: 9px; color: #96a3b7; font-size: 10px; }
.console .trend { color: #1b9a73; font-size: 10px; }

.console .overview-grid { gap: 18px; margin-top: 18px; }
.console .health-content { gap: 58px; padding: 30px 30px 19px; }
.console .health-score { min-width: 142px; color: #405675; }
.console .score-ring { width: 116px; height: 116px; background: conic-gradient(#557ff2 var(--score), #e7edf8 0); }
.console .score-ring::after { inset: 10px; background: #fff; }
.console .score-ring strong { color: #3d67cf; font-size: 31px; }
.console .health-stats { gap: 30px; }
.console .health-stats > div { padding-left: 23px; }
.console .health-stats strong { color: #213653; font-size: 23px; }
.console .mini-chart { height: 74px; margin: 3px 30px 0; }
.console .mini-chart span { background: linear-gradient(to top, #b8d0ff, #5f89f2); }
.console .chart-caption { margin: 10px 30px 20px; }
.console .quick-list { padding: 7px 21px 15px; }
.console .quick-list button { min-height: 66px; padding: 0 3px; }
.console .quick-list button:hover { padding-left: 7px; border-radius: 9px; background: #f4f7fd; }
.console .quick-icon { width: 36px; height: 36px; border-radius: 11px; }
.console .quick-list strong { color: #334968; font-size: 12px; }
.console .quick-list small { color: #8d9bb1; font-size: 10px; }
.console .boundary-panel { margin-top: 18px; }
.console .boundary-panel .panel-head { min-height: 72px; }
.console .principle-grid { padding: 25px 0 27px; }
.console .principle { min-height: 67px; padding: 2px 28px; }
.console .principle-icon { width: 36px; height: 36px; border-radius: 11px; color: #5c80d2; background: #edf3ff; }
.console .principle strong { color: #3b4f6d; font-size: 12px; }
.console .principle p { color: #8795aa; font-size: 10px; line-height: 1.7; }
.console .system-flow-panel { margin-top: 18px; }
.console .system-flow-panel .panel-head { min-height: 78px; }
.console .system-flow-panel .panel-subtitle { color: #8392a8; }
.console .system-flow { padding: 0 20px 22px; }
.console .system-flow-step { min-height: 92px; padding: 20px 18px 14px; border-right-color: #e8eef5; }
.console .system-flow-index { border-color: #d2e0f5; color: #4d72c8; background: #eff4ff; }
.console .system-flow-copy strong { color: #4a5e7b; }
.console .system-flow-copy b { color: #203b62; }
.console .system-flow-copy small { color: #8d9bb0; }
.console .system-flow-arrow { border-color: #dce6f2; color: #6c8bd0; }

.console .data-panel { overflow: hidden; }
.console .data-panel .toolbar { min-height: 76px; padding: 0 22px; border-bottom-color: #e7edf4; background: rgba(255, 255, 255, .96); }
.console .search-wrap { width: min(360px, 44%); }
.console .search { min-height: 38px; padding-top: 0; padding-bottom: 0; border-color: #d9e3f0; border-radius: 10px; color: #273c5d; background: #fbfdff; }
.console .search:focus { border-color: #86a8f2; box-shadow: 0 0 0 3px rgba(76, 124, 242, .12); }
.console .filter-button { min-height: 36px; padding: 0 11px; border-color: #dce5f0; border-radius: 9px; color: #647590; }
.console .result-count { color: #8d9bb0; font-size: 10px; }
.console table { font-size: 12px; }
.console th { height: 46px; padding: 0 22px; color: #8796ac; background: #f8faff; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.console td { height: 72px; padding: 0 22px; border-top-color: #edf1f6; color: #4b5e7b; }
.console tbody tr:hover td { background: #f6f9ff; }
.console .entity strong, .console .task-id strong { color: #304666; font-size: 12px; }
.console .entity small, .console .task-id small { color: #8e9db1; font-size: 10px; }
.console .entity-avatar, .console .module-avatar, .console .template-avatar { width: 35px; height: 35px; border-radius: 10px; }
.console .status { padding: 6px 9px; font-size: 9px; font-weight: 650; }
.console .row-action { min-height: 29px; padding: 0 9px; border-radius: 7px; font-size: 9px; }

.console .usage-banner, .console .team-account-banner, .console .alert-summary, .console .billing-notice, .console .connection-banner, .console .key-boundary, .console .gate-banner, .console .announcement-governance, .console .extension-release-banner {
  border-color: #d6e2f1;
  border-radius: 16px;
  background: linear-gradient(110deg, #f4f8ff, #fff 72%);
  box-shadow: 0 9px 24px rgba(42, 65, 104, .045);
}

.console .usage-banner h2, .console .team-account-banner h2, .console .extension-release-banner h2 { color: #213a60; font-weight: 740; }
.console .usage-banner p, .console .team-account-banner p, .console .extension-release-banner p { color: #798aa3; }
.console .module-center-tabs { gap: 5px; padding: 7px; border-color: #dbe4f0; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 9px 24px rgba(37, 62, 101, .05); }
.console .module-center-tab { min-height: 38px; padding: 0 14px; border-radius: 9px; font-size: 11px; }
.console .module-center-tab.is-active { color: #3f63cf; background: #edf3ff; box-shadow: inset 0 0 0 1px #d3dfff; }

.console .modal-backdrop, .console .drawer-backdrop { background: rgba(10, 25, 52, .48); backdrop-filter: blur(3px); }
.console .modal, .console .drawer { border-color: #d8e3f0; border-radius: 17px; box-shadow: 0 25px 80px rgba(14, 34, 70, .22); }
.console .modal-head, .console .drawer-head { padding: 23px 25px 20px; border-bottom-color: #e6ecf4; }
.console .modal-head h2, .console .drawer-head h2 { color: #203655; font-weight: 740; }
.console .modal-body, .console .drawer-body { padding: 25px; }
.console .form-intro { border-color: #dce7f5; border-radius: 11px; background: #f5f8ff; }
.console .field input, .console .field select, .console .field textarea { border-color: #d6e1ee; border-radius: 10px; }

@media (max-width: 1180px) {
  .console { grid-template-columns: 238px minmax(0, 1fr); }
  .console .content { padding-right: 32px; padding-left: 32px; }
  .console .topbar { padding-right: 32px; padding-left: 32px; }
  .console .sidebar-header { padding-right: 16px; padding-left: 16px; }
  .console .banner-orbit { margin-right: 10px; }
}

@media (max-width: 860px) {
  .console { grid-template-columns: 205px minmax(0, 1fr); }
  .console .sidebar-brand strong { font-size: 13px; }
  .console .sidebar-brand small { font-size: 8px; }
  .console .nav-item { padding-right: 10px; padding-left: 10px; }
  .console .content { padding-right: 22px; padding-left: 22px; }
  .console .topbar { padding-right: 22px; padding-left: 22px; }
  .console .topbar-app, .console .topbar-separator { display: none; }
  .console .welcome-banner { padding-right: 28px; padding-left: 28px; }
  .console .banner-orbit { display: none; }
  .console .overview-grid { grid-template-columns: 1fr; }
  .console .system-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console .system-flow-step:nth-child(2) { border-right: 0; }
  .console .system-flow-step:nth-child(2) .system-flow-arrow { display: none; }
}

@media (max-width: 680px) {
  .console { display: block; overflow: visible; }
  .console .sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid rgba(190, 215, 255, .14); box-shadow: none; }
  .console .sidebar::after { display: none; }
  .console .sidebar-header { padding: 16px 16px 14px; }
  .console .workspace-switcher { margin-top: 15px; }
  .console .nav { display: flex; gap: 5px; padding: 9px 12px 11px; border-top: 1px solid rgba(190, 215, 255, .12); background: rgba(4, 14, 31, .42); overflow-x: auto; }
  .console .nav-group { display: contents; }
  .console .nav-label-button { display: none; }
  .console .nav-group-items { display: flex; flex: 0 0 auto; gap: 5px; }
  .console .nav-item { min-height: 35px; border-radius: 8px; white-space: nowrap; }
  .console .active-line { top: auto; right: 9px; bottom: 3px; left: 9px; width: auto; height: 2px; border-radius: 2px; }
  .console .sidebar-bottom { display: flex; align-items: center; gap: 10px; padding: 10px 16px; }
  .console .security-chip { display: none; }
  .console .account-card { width: min(310px, 100%); }
  .console .topbar { position: static; min-height: 62px; height: auto; padding: 11px 16px; }
  .console .topbar-actions { gap: 7px; }
  .console .environment, .console .top-divider { display: none; }
  .console .content { padding: 24px 16px 40px; }
  .console .page-head { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; padding-bottom: 19px; }
  .console .page-head::before { bottom: 19px; }
  .console .page-actions { width: 100%; justify-content: flex-start; }
  .console .page-actions .button { flex: 1 1 auto; }
  .console .welcome-banner { min-height: 0; padding: 27px 24px; }
  .console .welcome-banner h2 { font-size: 23px; }
  .console .metric-grid { grid-template-columns: 1fr; }
  .console .system-flow { grid-template-columns: 1fr; padding-right: 16px; padding-left: 16px; }
  .console .system-flow-step { min-height: 70px; border-right: 0; border-bottom: 1px solid #e8eef5; }
  .console .system-flow-step:last-child { border-bottom: 0; }
  .console .system-flow-arrow { display: none; }
  .console .health-content { align-items: stretch; flex-direction: column; gap: 21px; padding: 22px; }
  .console .health-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .console .health-stats > div { padding-left: 9px; }
  .console .health-stats strong { font-size: 18px; }
  .console .panel-head { padding-right: 18px; padding-left: 18px; }
  .console .panel-body { padding: 18px; }
  .console .data-panel .toolbar { height: auto; padding: 12px 15px; flex-wrap: wrap; }
  .console .search-wrap { width: 100%; max-width: none; }
  .console .table-wrap { max-width: 100%; overflow-x: auto; }
}

/* CMS shell v4 ------------------------------------------------------------
 * The shared frame is intentionally quiet and information-first.  Identity,
 * tenant scope and page context are separated so the console reads like an
 * operating product instead of a marketing landing page.
 */
:root {
  --cms-ink: #172438;
  --cms-ink-soft: #50617a;
  --cms-muted: #8794a8;
  --cms-line: #e3e8ef;
  --cms-canvas: #f4f6f9;
  --cms-blue: #2f69d9;
  --cms-blue-soft: #edf3ff;
}

body:has(.login-page), body:has(.console) { min-width: 0; }

/* Login: a compact enterprise access surface, not a promotional hero. */
.login-page.login-page-admin {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 42px;
  background: #eef1f5;
}
.login-frame {
  display: grid;
  grid-template-columns: minmax(340px, .86fr) minmax(430px, 1fr);
  width: min(1020px, 100%);
  min-height: 612px;
  overflow: hidden;
  border: 1px solid #dce3eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(31, 47, 71, .12);
}
.login-context {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 36px 29px;
  color: #e7eef9;
  background: #18263b;
}
.login-brand { gap: 10px; }
.login-brand-logo { width: 30px; height: 30px; border-radius: 8px; }
.login-brand-name { gap: 3px; }
.login-brand-name strong { color: #f8fbff; font-size: 14px; }
.login-brand-name small { color: #9fb2cf; font-size: 8px; letter-spacing: .14em; }
.login-local-badge { margin-left: auto; padding: 5px 8px; border: 1px solid rgba(166, 190, 226, .22); border-radius: 5px; color: #a9bddd; background: rgba(255,255,255,.04); font-size: 9px; }
.login-context-copy { margin: auto 0; padding: 52px 0 42px; }
.login-context-copy .eyebrow { color: #91a8c9; letter-spacing: .17em; }
.login-context-copy h1 { margin: 16px 0 16px; color: #fff; font-size: clamp(28px, 3.2vw, 39px); font-weight: 700; letter-spacing: -.055em; line-height: 1.18; }
.login-context-copy h1 strong { color: #9ec2ff; font-weight: 700; }
.login-context-copy p { max-width: 360px; margin: 0; color: #afbdd3; font-size: 12px; line-height: 1.8; }
.login-context-model { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(178, 201, 232, .18); border-bottom: 1px solid rgba(178, 201, 232, .18); }
.login-context-model > div { display: grid; gap: 4px; min-width: 0; padding: 17px 12px 16px 0; }
.login-context-model > div + div { padding-left: 14px; border-left: 1px solid rgba(178, 201, 232, .18); }
.model-index { color: #78a8f5; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; }
.login-context-model strong { color: #f0f5ff; font-size: 11px; }
.login-context-model small { color: #91a6c5; font-size: 9px; white-space: nowrap; }
.login-context-footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 20px; color: #90a3c0; font-size: 10px; }
.login-context-footer span { display: inline-flex; align-items: center; gap: 7px; }
.login-context-footer i { width: 6px; height: 6px; border-radius: 50%; background: #4fc3a0; box-shadow: 0 0 0 3px rgba(79,195,160,.14); }
.login-card { justify-content: flex-start; padding: 61px 66px 36px; }
.login-card-head h2 { margin-top: 12px; color: #1d2c42; font-size: 27px; }
.login-card-head p { margin-bottom: 22px; color: #7b899d; line-height: 1.6; }
.login-identity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 23px; }
.login-identity-item { display: flex; align-items: flex-start; gap: 7px; min-width: 0; padding: 10px 8px; border: 1px solid #e4e9f0; border-radius: 8px; background: #fafbfd; }
.login-identity-item.is-platform { border-color: #d5e1fb; background: #f5f8ff; }
.login-identity-item .identity-dot { width: 6px; height: 6px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #6b8fe2; }
.login-identity-item.is-enterprise .identity-dot { background: #44a9a5; }
.login-identity-item.is-personal .identity-dot { background: #9b82db; }
.login-identity-item strong, .login-identity-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-identity-item strong { color: #43546d; font-size: 10px; }
.login-identity-item small { margin-top: 3px; color: #94a0b1; font-size: 9px; }
.login-form-row { margin-top: 5px; }
.login-local-note { margin-top: 15px; border-color: #e1e7ef; background: #f8fafc; }
.login-local-note strong { color: #4c5d73; }
.login-local-note small { color: #74849b; }
.login-local-note em { color: #9aa6b6; }
.login-submit { margin-top: 18px; min-height: 45px; border-radius: 9px; background: #2f69d9; box-shadow: 0 8px 16px rgba(47, 105, 217, .18); }
.login-submit:hover { background: #275bbf; }
.login-security { margin-top: 29px; padding-top: 17px; border-top: 1px solid #edf0f4; }
.login-security .icon { color: #6c91d3; }
.login-security strong { color: #64748a; }
.login-security small { color: #98a4b4; }
.login-footnote { margin-top: auto; color: #a0aabb; }

/* Shared shell: white navigation rail, clear scope, low-noise top bar. */
.console {
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--cms-canvas);
}
.console .sidebar {
  border-right: 1px solid #dfe5ec;
  color: var(--cms-ink);
  background: #fff;
  box-shadow: 3px 0 16px rgba(28, 47, 73, .035);
}
.console .sidebar::after { display: none; }
.console .sidebar-header { padding: 22px 18px 16px; border-bottom: 1px solid #e7ebf1; background: #fff; }
.console .sidebar-header .sidebar-brand { gap: 10px; padding: 0 3px; }
.console .sidebar-brand .brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #dbe5f5; border-radius: 9px; background: #f1f5fc; box-shadow: none; }
.console .sidebar-brand .brand-mark img { width: 26px; height: 26px; object-fit: contain; }
.console .sidebar-brand strong { color: #1e2e45; font-size: 14px; }
.console .sidebar-brand small { margin-top: 4px; color: #8b98aa; font-size: 8px; letter-spacing: .15em; }
.console .workspace-switcher { min-height: 64px; margin-top: 18px; padding: 10px; border: 1px solid #dfe6ee; border-radius: 10px; background: #f8fafc; box-shadow: none; }
.console .workspace-switcher::before { display: none; }
.console .workspace-switcher > .icon { color: #9aa6b5; }
.console .tenant-avatar { width: 31px; height: 31px; color: #3a68ba; background: #e8f0ff; }
.console .tenant-copy span { color: #8a98aa; font-size: 9px; }
.console .tenant-copy strong { max-width: 145px; margin-top: 3px; color: #2b3b54; font-size: 12px; }
.console .tenant-copy small { display: block; margin-top: 3px; overflow: hidden; color: #9ba7b5; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.console .nav { gap: 15px; padding: 19px 12px; scrollbar-color: #d4dce7 transparent; }
.console .nav-overline { padding: 0 12px 2px; color: #a1adbd; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.console .nav-group { gap: 3px; }
.console .nav-label { min-height: 24px; padding: 0 11px 4px; color: #8997aa; font-size: 9px; font-weight: 700; letter-spacing: .12em; line-height: 24px; }
.console .nav-label-button { min-height: 24px; padding: 0 11px 4px; color: #8997aa; font-size: 9px; letter-spacing: .12em; }
.console .nav-label-button .icon { color: #a6b0bd; }
.console .nav-item { min-height: 38px; gap: 11px; padding: 0 11px; border: 1px solid transparent; border-radius: 8px; color: #64738a; font-size: 12px; }
.console .nav-item .icon { color: #8290a3; opacity: 1; }
.console .nav-item:hover { color: #2d5fb8; background: #f5f8fc; }
.console .nav-item.is-active { color: #235bb8; border-color: #d6e3fb; background: #edf4ff; box-shadow: none; font-weight: 680; }
.console .nav-item.is-active .icon { color: #2f69d9; }
.console .active-line { top: 8px; bottom: 8px; left: -12px; width: 2px; background: #2f69d9; box-shadow: none; }
.console .sidebar-bottom { padding: 14px 15px 16px; border-top: 1px solid #e7ebf1; background: #fff; }
.console .security-chip { min-height: 30px; margin: 0 3px 11px; color: #75849a; }
.console .security-chip-icon { width: 23px; height: 23px; color: #547bc1; background: #eef4ff; }
.console .security-chip strong { color: #62738b; }
.console .security-chip small { color: #a0acba; }
.console .security-chip { position: relative; }
.console .security-state-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: #38a57c; box-shadow: 0 0 0 3px #e7f6ef; }
.console .account-card { min-height: 49px; padding: 7px 8px; border-color: #e1e7ee; border-radius: 9px; background: #fafbfd; }
.console .account-card .avatar { width: 29px; height: 29px; color: #315fae; background: #e7efff; }
.console .account-card .user-copy strong { color: #324259; }
.console .account-card .user-copy small { color: #8d9aaa; }
.console .account-card .icon-button { color: #8d9aaa; }
.console .main { background: var(--cms-canvas); }
.console .topbar { min-height: 68px; height: 68px; padding: 0 36px; border-bottom: 1px solid #dfe5ec; background: rgba(255,255,255,.96); box-shadow: none; backdrop-filter: none; }
.console .topbar-left { gap: 14px; }
.topbar-product { display: grid; gap: 3px; min-width: 124px; }
.topbar-product strong { color: #293b55; font-size: 12px; letter-spacing: -.01em; }
.topbar-product span { color: #98a4b3; font-size: 9px; }
.console .topbar-separator { height: 22px; background: #e2e7ed; }
.console .crumbs { color: #96a2b1; font-size: 11px; }
.console .crumbs strong { color: #2e405b; font-size: 12px; }
.console .topbar-actions { gap: 12px; }
.topbar-scope { display: grid; gap: 3px; min-width: 118px; padding-right: 13px; border-right: 1px solid #e5e9ef; }
.topbar-scope span { color: #98a4b2; font-size: 9px; }
.topbar-scope strong { overflow: hidden; color: #405169; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.console .environment { min-height: 28px; padding: 0 9px; border: 1px solid #e1e7ed; border-radius: 7px; color: #708095; background: #fafbfd; }
.console .service-state { color: #76859a; font-size: 10px; }
.topbar-account { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 2px 3px 2px 5px; border: 0; border-radius: 7px; color: #78879b; background: transparent; text-align: left; }
.topbar-account:hover { background: #f3f6fa; }
.topbar-account-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #315fae; background: #e7efff; font-size: 10px; font-weight: 700; }
.topbar-account strong, .topbar-account small { display: block; }
.topbar-account strong { color: #43536a; font-size: 10px; font-weight: 700; }
.topbar-account small { margin-top: 2px; color: #99a5b3; font-size: 9px; }
.topbar-account > .icon { color: #9da8b6; }
.topbar-account-wrap { position: relative; }
.topbar-account-menu { position: absolute; top: calc(100% + 9px); right: 0; z-index: 30; width: 205px; padding: 9px; border: 1px solid #dce4ed; border-radius: 10px; background: #fff; box-shadow: 0 16px 35px rgba(25, 43, 70, .14); }
.topbar-account-menu[hidden] { display: none; }
.topbar-account-menu > div { display: grid; gap: 3px; padding: 7px 8px 10px; border-bottom: 1px solid #edf0f4; }
.topbar-account-menu > div strong { overflow: hidden; color: #3c4d65; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-account-menu > div small { overflow: hidden; color: #98a4b3; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-account-menu > button { display: inline-flex; align-items: center; gap: 7px; width: 100%; margin-top: 6px; padding: 8px; border: 0; border-radius: 6px; color: #7c5860; background: transparent; font-size: 10px; text-align: left; }
.topbar-account-menu > button:hover { background: #fff4f4; }
.console .refresh-button { width: 31px; height: 31px; border-color: #e0e6ed; color: #71839b; background: #fff; }
.console .content { width: min(100%, 1680px); padding: 34px 42px 62px; }
.console .page-head { margin-bottom: 23px; padding: 0 0 19px 15px; border-bottom: 1px solid #dfe5ec; }
.console .page-head::before { top: 2px; bottom: 19px; left: 0; width: 2px; border-radius: 2px; background: #2f69d9; }
.console-workspace .page-head::before { background: #36a5a5; }
.console .page-head h1 { margin-top: 8px; color: #1e2f47; font-size: 27px; letter-spacing: -.05em; }
.console .page-head p { color: #78879a; font-size: 12px; }
.console .panel, .console .metric-card { border-color: #dfe5ec; border-radius: 12px; box-shadow: 0 3px 12px rgba(29, 48, 76, .035); }
.console .panel-head { min-height: 64px; padding: 0 21px; }
.console .panel-head h2 { color: #283a53; font-size: 14px; }
.console .panel-kicker { color: #95a1b0; font-size: 9px; letter-spacing: .15em; }
.console .welcome-banner { min-height: 176px; padding: 28px 31px; border-color: #d5e2f7; border-radius: 12px; background: #f2f6fd; box-shadow: none; }
.console .welcome-banner::before, .console .welcome-banner::after { display: none; }
.console .welcome-banner h2 { color: #263b5a; font-size: 23px; }
.console .welcome-banner h2 span { color: #2f69d9; }
.console .welcome-banner p { color: #7a899c; }
.console .banner-orbit { display: none; }
.console .metric-card { min-height: 128px; padding: 17px 18px 15px; }
.console .metric-card::before { height: 2px; opacity: .9; background: #6b94e9; }
.console .metric-value { color: #203552; font-size: 25px; }
.console .module-center-tabs { gap: 2px; padding: 4px; border-color: #dfe5ec; border-radius: 10px; background: #fff; box-shadow: none; }
.console .module-center-tab { min-height: 36px; padding: 0 13px; border-radius: 7px; color: #718096; font-size: 11px; }
.console .module-center-tab:hover { color: #2f69d9; background: #f4f7fb; }
.console .module-center-tab.is-active { color: #235bb8; background: #edf3ff; box-shadow: none; }

/* Module center: the catalog is an object workspace, with scope and handoff
 * visible before the management table. */
.module-center-hero { display: grid; grid-template-columns: minmax(0, 1fr) 235px; gap: 28px; margin-bottom: 14px; padding: 25px 27px; border: 1px solid #dce5f0; border-radius: 12px; background: #fff; }
.module-center-hero-copy h2 { margin: 8px 0 7px; color: #243a58; font-size: 19px; letter-spacing: -.035em; }
.module-center-hero-copy p { max-width: 700px; margin: 0; color: #78879a; font-size: 11px; line-height: 1.65; }
.module-center-hero-flow { display: flex; align-items: center; gap: 11px; margin-top: 20px; }
.module-center-hero-flow span { display: grid; gap: 3px; min-width: 88px; padding: 8px 11px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fafbfd; }
.module-center-hero-flow b { color: #42556f; font-size: 11px; }
.module-center-hero-flow small { color: #96a2b2; font-size: 9px; }
.module-center-hero-flow i { color: #94a3b7; font-size: 13px; font-style: normal; }
.module-center-hero-aside { display: grid; align-content: center; gap: 6px; padding-left: 24px; border-left: 1px solid #e7ebf0; }
.module-hero-label { color: #8e9bab; font-size: 10px; }
.module-center-hero-aside strong { color: #2f69d9; font-size: 29px; line-height: 1; }
.module-center-hero-aside strong small { color: #8d9bad; font-size: 14px; font-weight: 500; }
.module-center-hero-aside > span:not(.module-hero-label) { color: #7d8da1; font-size: 10px; }
.module-center-hero-aside > small { color: #97a3b1; font-size: 9px; }
.module-hero-progress { height: 5px; overflow: hidden; margin: 5px 0 1px; border-radius: 999px; background: #e8edf4; }
.module-hero-progress i { display: block; height: 100%; border-radius: inherit; background: #4a7ddd; }
.module-center-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.module-center-metrics article { display: grid; gap: 5px; min-height: 95px; padding: 15px 16px; border: 1px solid #e1e7ee; border-radius: 10px; background: #fff; }
.module-metric-label { color: #8290a2; font-size: 10px; }
.module-center-metrics strong { color: #2c405e; font-size: 22px; line-height: 1; }
.module-center-metrics strong.is-warning { color: #bd7b31; }
.module-center-metrics strong.is-ok { color: #268b67; }
.module-center-metrics small { color: #9ba6b5; font-size: 9px; }
.module-center-board { margin-bottom: 14px; padding: 20px 21px 21px; border: 1px solid #dfe5ec; border-radius: 12px; background: #fff; }
.module-board-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.module-board-heading h2 { margin: 6px 0 0; color: #2b3e59; font-size: 15px; }
.module-board-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.module-board-column { min-width: 0; padding: 15px; border: 1px solid #e5eaf0; border-radius: 9px; background: #fbfcfd; }
.module-board-column-head { display: flex; align-items: center; justify-content: space-between; color: #41536c; font-size: 11px; font-weight: 700; }
.module-board-column-head > span { display: inline-flex; align-items: center; gap: 7px; }
.module-board-column-head b { color: #7e8da2; font-size: 12px; }
.module-board-column > p { min-height: 31px; margin: 8px 0 12px; color: #95a0af; font-size: 10px; line-height: 1.5; }
.module-board-dot { width: 7px; height: 7px; border-radius: 50%; background: #5d87df; }
.module-board-dot.is-private { background: #42a79e; }
.module-board-dot.is-attention { background: #c68b40; }
.module-object-card { display: grid; gap: 4px; margin-top: 7px; padding: 10px; border: 1px solid #e4e9ef; border-radius: 8px; background: #fff; }
.module-object-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.module-object-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: #4d76c8; background: #eef3ff; }
.module-object-icon.is-private { color: #318d87; background: #edf8f7; }
.module-object-card > strong { overflow: hidden; color: #3c4e67; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.module-object-card > small { overflow: hidden; color: #9aa5b3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.module-object-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; color: #8896a7; font-size: 9px; }
.module-board-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 13px; padding: 0; border: 0; color: #3c70c9; background: transparent; font-size: 10px; font-weight: 650; }
.module-board-link:hover { color: #244f9f; }
.module-board-empty { display: grid; place-items: center; min-height: 96px; border: 1px dashed #dfe5ec; border-radius: 8px; color: #a0aab8; font-size: 10px; }
.module-attention-list { display: grid; gap: 7px; }
.module-attention-row { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 7px 8px; border: 1px solid #e6ebf0; border-radius: 8px; background: #fff; }
.module-attention-dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #c68b40; }
.module-attention-row > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1; }
.module-attention-row strong { overflow: hidden; color: #485971; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.module-attention-row small { color: #9aa5b3; font-size: 9px; }
.module-attention-row .row-action { min-height: 24px; padding: 0 7px; }
.module-attention-empty { display: grid; gap: 7px; min-height: 96px; align-content: center; }
.module-attention-empty p { margin: 0; color: #9ba6b5; font-size: 10px; }
.module-catalog-table { margin-top: 0; }

@media (max-width: 980px) {
  .login-page.login-page-admin { padding: 22px; }
  .login-frame { grid-template-columns: 1fr; max-width: 520px; }
  .login-context { min-height: 310px; padding: 26px 28px 23px; }
  .login-context-copy { margin: 0; padding: 36px 0 27px; }
  .login-context-copy h1 { font-size: 29px; }
  .login-card { padding: 38px 34px 31px; }
  .console { grid-template-columns: 220px minmax(0, 1fr); }
  .console .content { padding-right: 26px; padding-left: 26px; }
  .console .topbar { padding-right: 24px; padding-left: 24px; }
  .topbar-scope { display: none; }
  .module-center-hero { grid-template-columns: 1fr; }
  .module-center-hero-aside { padding-top: 16px; padding-left: 0; border-top: 1px solid #e7ebf0; border-left: 0; }
}
@media (max-width: 760px) {
  .login-identity-grid { grid-template-columns: 1fr; }
  .login-identity-item { align-items: center; }
  .login-context-model > div { padding-right: 7px; }
  .login-context-model > div + div { padding-left: 8px; }
  .login-context-model small { white-space: normal; }
  .console { display: block; }
  .console .sidebar { position: relative; height: auto; }
  .console .nav-overline { display: none; }
  .console .nav { padding: 9px 12px 10px; border-top: 1px solid #e7ebf1; background: #fafbfd; }
  .console .nav-group { display: contents; }
  .console .nav-label-button { display: none; }
  .console .nav-group-items { display: flex; gap: 5px; }
  .console .nav-item { min-height: 34px; white-space: nowrap; }
  .console .active-line { top: auto; right: 8px; bottom: 2px; left: 8px; width: auto; height: 2px; }
  .console .sidebar-bottom { display: flex; align-items: center; padding: 9px 14px; }
  .console .security-chip { width: 100%; margin: 0 3px; }
  .console .topbar { position: static; min-height: 62px; height: auto; padding: 10px 15px; }
  .console .topbar-actions { gap: 7px; }
  .console .environment, .console .top-divider, .topbar-account small, .topbar-account > .icon { display: none; }
  .topbar-account { min-width: 27px; padding: 0; }
  .topbar-account > span:nth-child(2) { display: none; }
  .console .content { padding: 22px 15px 38px; }
  .console .page-head { align-items: flex-start; flex-direction: column; gap: 15px; }
  .console .page-actions { width: 100%; justify-content: flex-start; }
  .console .page-actions .button { flex: 1 1 auto; }
  .module-center-hero { padding: 20px; }
  .module-center-hero-flow { gap: 5px; }
  .module-center-hero-flow span { min-width: 0; flex: 1; padding: 7px; }
  .module-center-metrics { grid-template-columns: repeat(2, 1fr); }
  .module-board-grid { grid-template-columns: 1fr; }
}
.dataset-overview { display: grid; grid-template-columns: minmax(280px, 1.15fr) minmax(460px, 1.85fr); gap: 26px; margin-bottom: 18px; padding: 24px 26px; border: 1px solid #dce7f5; border-radius: 16px; background: linear-gradient(120deg, #f6f9ff 0%, #fff 55%, #f8fbff 100%); box-shadow: 0 10px 26px rgba(37, 78, 142, .06); }
.dataset-overview-copy h2 { margin: 7px 0 6px; color: #21314f; font-size: 21px; letter-spacing: -.02em; }
.dataset-overview-copy p { max-width: 560px; margin: 0; color: #71809a; font-size: 12px; line-height: 1.7; }
.dataset-overview-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.dataset-scope-note { color: #8794a8; font-size: 11px; }
.dataset-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; align-items: stretch; }
.dataset-overview-grid > div { display: flex; min-height: 104px; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 13px; border: 1px solid #e6edf7; border-radius: 11px; background: rgba(255, 255, 255, .78); }
.dataset-overview-grid small { color: #8a98ad; font-size: 10px; }
.dataset-overview-grid strong { color: #263957; font-size: 23px; line-height: 1.1; }
.dataset-overview-grid strong.is-success { color: #25845e; }
.dataset-overview-grid strong.is-warning { color: #b17628; }
.dataset-overview-grid span { color: #9aa6b7; font-size: 10px; line-height: 1.4; }
@media (max-width: 980px) { .dataset-overview { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .dataset-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dataset-overview-actions { align-items: flex-start; flex-direction: column; gap: 8px; } }