:root {
  color-scheme: light;
  --nav: #111d2d;
  --nav-soft: #192a40;
  --ink: #172033;
  --muted: #66758a;
  --subtle: #8c99a9;
  --line: #e2e8f0;
  --line-soft: #edf1f5;
  --canvas: #f4f7fa;
  --surface: #ffffff;
  --blue: #176dd1;
  --blue-soft: #e9f3ff;
  --cyan: #0d8f9c;
  --green: #0d8a61;
  --amber: #b66b0d;
  --red: #c8444e;
  --violet: #7258c7;
  --shadow: 0 8px 28px rgba(26, 43, 68, .06);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 254px minmax(0, 1fr); }
.sidebar { position: sticky; z-index: 30; top: 0; height: 100vh; padding: 22px 16px 16px; display: flex; flex-direction: column; overflow-y: auto; color: #aebed1; background: linear-gradient(180deg, #101c2b 0%, #14253a 100%); }
.brand { padding: 2px 8px 20px; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #fff; font-size: 18px; font-weight: 900; background: linear-gradient(145deg, #1676dd, #55a9f6); box-shadow: 0 10px 24px rgba(24, 113, 208, .28); }
.brand strong, .brand small { display: block; }
.brand strong { color: #fff; font-size: 15px; letter-spacing: .02em; }
.brand small { margin-top: 4px; color: #748aa4; font-size: 10px; }
.environment-badge { margin: 0 5px 14px; padding: 11px 12px; display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; background: rgba(255,255,255,.035); }
.environment-badge > span { width: 8px; height: 8px; border-radius: 50%; background: #35d39a; box-shadow: 0 0 0 4px rgba(53, 211, 154, .1); }
.environment-badge strong, .environment-badge small { display: block; }
.environment-badge strong { color: #d9e4ef; font-size: 11px; }
.environment-badge small { margin-top: 3px; color: #6d839e; font-size: 9px; }
.sidebar-nav section { margin-top: 14px; }
.sidebar-nav.access-loading { visibility: hidden; }
.sidebar-nav a[hidden], .sidebar-nav section[hidden] { display: none; }
.sidebar-nav section > p { margin: 0 12px 7px; color: #5d7189; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.sidebar-nav a { min-height: 42px; padding: 0 12px; position: relative; display: flex; align-items: center; gap: 11px; border-radius: 9px; color: #91a5bb; font-size: 13px; font-weight: 500; text-decoration: none; transition: .16s ease; }
.sidebar-nav a .icon { width: 18px; height: 18px; color: #70869e; }
.sidebar-nav a:hover { color: #eaf3fc; background: rgba(255,255,255,.04); }
.sidebar-nav a.active { color: #fff; font-weight: 700; background: linear-gradient(90deg, rgba(41, 135, 231, .22), rgba(41, 135, 231, .06)); }
.sidebar-nav a.active .icon { color: #67b5ff; }
.sidebar-nav a.active i { position: absolute; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: #58abf8; box-shadow: 0 0 0 4px rgba(88, 171, 248, .1); }
.sidebar-footer { margin-top: auto; padding: 14px 6px 2px; }
.sidebar-footer > a { padding: 11px 12px; display: block; border: 1px solid rgba(255,255,255,.07); border-radius: 9px; color: #cad7e4; text-decoration: none; }
.sidebar-footer > a span, .sidebar-footer > a small { display: block; }
.sidebar-footer > a span { font-size: 11px; }
.sidebar-footer > a small { margin-top: 4px; color: #6f839a; font-size: 9px; }
.gateway-state { margin-top: 11px; display: flex; align-items: center; gap: 7px; color: #6f839a; font-size: 9px; }
.gateway-state span { width: 6px; height: 6px; border-radius: 50%; background: #35d39a; }
.sidebar-backdrop { display: none; }
.sidebar-collapse { align-self:flex-end; background:transparent; border:0; color:#b9c9dc; cursor:pointer; font:inherit; padding:3px 6px 10px; }
@media(min-width:981px){
  .sidebar-toggle { display:grid !important; }
  .sidebar-collapsed .app-shell { grid-template-columns:minmax(0,1fr); }
  .sidebar-collapsed .sidebar { display:none; }
}

.main-area { min-width: 0; }
.topbar { min-height: 96px; padding: 17px 30px; position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.topbar-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-heading p { margin: 0 0 4px; color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.topbar-heading h1 { margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; }
.topbar-heading small { margin-top: 5px; display: block; color: var(--muted); font-size: 11px; }
.sidebar-toggle { width: 40px; height: 40px; display: none; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.identity-switch { height: 40px; padding: 0 9px 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.identity-switch[hidden] { display: none !important; }
.identity-switch > span { color: var(--subtle); font-size: 10px; }
.identity-switch select { max-width: 120px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; font-weight: 700; }
.refresh-button { height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; color: #42546a; background: #fff; font-size: 11px; font-weight: 700; cursor: pointer; }
.refresh-button .icon { width: 15px; height: 15px; }
.refresh-button:disabled { opacity: .55; cursor: wait; }
.logout-button { color: #6d7d8e; }
.user-chip { padding-left: 3px; display: flex; align-items: center; gap: 9px; }
.user-chip > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #294c73; font-size: 12px; font-weight: 800; }
.user-chip strong, .user-chip small { display: block; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip strong { font-size: 11px; }
.user-chip small { margin-top: 3px; color: var(--subtle); font-size: 9px; }

.page-content { max-width: 1540px; margin: 0 auto; padding: 26px 30px 50px; }
.page-root { display: grid; gap: 16px; }
.page-loading { min-height: 400px; display: grid; place-items: center; align-content: center; gap: 10px; color: var(--subtle); }
.page-loading.small { min-height: 230px; }
.page-loading i { width: 26px; height: 26px; border: 2px solid #d9e5f1; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.page-loading p { margin: 0; font-size: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

.welcome-card { min-height: 218px; padding: 31px 34px; display: flex; align-items: center; justify-content: space-between; gap: 40px; overflow: hidden; border-radius: 17px; color: #fff; background: radial-gradient(circle at 80% 0%, rgba(70,171,255,.26), transparent 34%), linear-gradient(125deg, #163857 0%, #155f9c 66%, #1977c3 100%); box-shadow: 0 16px 34px rgba(16, 74, 125, .16); }
.welcome-copy { max-width: 720px; }
.eyebrow-pill { padding: 5px 9px; display: inline-block; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #c8e5ff; background: rgba(255,255,255,.06); font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.welcome-card h2 { margin: 15px 0 10px; font-size: 27px; letter-spacing: -.025em; }
.welcome-card p { margin: 0; max-width: 680px; color: #c4d9eb; font-size: 13px; line-height: 1.8; }
.welcome-status { margin-top: 21px; display: flex; flex-wrap: wrap; gap: 18px; color: #adc8df; font-size: 10px; }
.welcome-status span { display: flex; align-items: center; gap: 7px; }
.welcome-status i { width: 7px; height: 7px; border-radius: 50%; background: #7f9bb5; }
.welcome-status i.online { background: #40d7a2; box-shadow: 0 0 0 4px rgba(64, 215, 162, .12); }
.architecture-card { width: 275px; display: flex; align-items: center; flex-direction: column; flex: 0 0 auto; }
.architecture-card > span, .architecture-card > strong { min-width: 140px; padding: 11px 17px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: rgba(255,255,255,.07); text-align: center; font-size: 11px; }
.architecture-card > strong { background: rgba(255,255,255,.15); font-size: 12px; }
.architecture-card > i { width: 1px; height: 14px; background: rgba(255,255,255,.28); }
.architecture-card > div { display: flex; gap: 6px; }
.architecture-card em { padding: 8px 10px; border-radius: 7px; background: rgba(5,35,62,.3); font-size: 9px; font-style: normal; }

.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(135px, 1fr)); gap: 12px; }
.metric-grid.compact-metrics { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.metric-card { min-height: 120px; padding: 18px 18px 16px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 3px 14px rgba(32, 47, 69, .035); }
.metric-card > span, .metric-card > small { display: block; color: var(--muted); font-size: 10px; }
.metric-card > strong { margin: 12px 0 8px; display: block; font-size: 27px; line-height: 1; letter-spacing: -.04em; }
.metric-card > i { width: 48px; height: 48px; position: absolute; right: -16px; bottom: -17px; border: 9px solid currentColor; border-radius: 50%; opacity: .07; }
.metric-card.blue { color: var(--blue); }.metric-card.cyan { color: var(--cyan); }.metric-card.green { color: var(--green); }.metric-card.violet { color: var(--violet); }.metric-card.amber { color: var(--amber); }.metric-card.red { color: var(--red); }
.metric-card > span, .metric-card > small { color: var(--muted); }

.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.content-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid .span-2 { grid-column: span 2; }
.overview-grid { grid-template-columns: 1.45fr .8fr; }
.overview-grid > .span-2 { grid-column: 1 / -1; }
.data-layout, .system-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.connector-panel { margin-bottom: 0; }
.connector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.connector-card { min-height: 190px; padding: 15px; display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 11px; background: #fbfcfe; }
.connector-card.featured { border-color: #b9d9f5; background: linear-gradient(145deg,#f7fbff,#eef7ff); }
.connector-card > div:first-child { display:flex; justify-content:space-between; align-items:center; }.connector-card > div:first-child > span { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:#fff; background:#263748; font-size:10px; font-weight:800; }.connector-card.featured > div:first-child > span { background:#111; }
.connector-card h3 { margin:14px 0 5px; font-size:12px; }.connector-card p { margin:0; color:var(--muted); font-size:8px; }
.connector-capabilities { margin:12px 0; display:flex; flex-wrap:wrap; gap:5px; }.connector-capabilities i { padding:4px 6px; border-radius:5px; color:#617487; background:#edf2f6; font-size:7px; font-style:normal; }
.connector-card > a,.connector-waiting,.connector-action { margin-top:auto; padding-top:10px; border-top:1px solid #e3eaf0; color:var(--blue); font-size:8px; font-weight:700; text-decoration:none; }.connector-waiting { color:#8b98a5; }
.connector-action { width:100%; padding-right:0; padding-bottom:0; padding-left:0; border-right:0; border-bottom:0; border-left:0; text-align:left; background:transparent; cursor:pointer; }.connector-action:hover { color:#0d5eb9; }.connector-action-note { margin-top:4px; color:#8b98a5; font-size:7px; }
.connector-config-help { margin-top:14px; padding:14px; display:grid; grid-template-columns:1fr auto; gap:8px 20px; border:1px solid #f0d7a8; border-radius:10px; background:#fffbf2; }.connector-config-help[hidden] { display:none; }.connector-config-help strong { font-size:10px; }.connector-config-help p { margin:5px 0 0; color:var(--muted); font-size:8px; line-height:1.65; }.connector-config-help code { grid-row:span 2; padding:9px 11px; border-radius:7px; color:#6f4b0c; background:#fff3d7; font-size:7px; line-height:1.65; }.connector-config-help small { color:#8d6e36; font-size:7px; }
.connection-list { display:grid; gap:8px; }.connection-list article { padding:11px; display:flex; align-items:center; gap:10px; border:1px solid var(--line-soft); border-radius:9px; }.connection-list article > span { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:9px; color:#fff; background:#182a3d; font-size:9px; font-weight:800; }.connection-list article > div:not(.connection-actions) { min-width:0; flex:1; }.connection-list strong,.connection-list small { display:block; }.connection-list strong { font-size:10px; }.connection-list small { margin-top:4px; overflow:hidden; color:var(--muted); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.connection-list button { padding:7px 9px; border:1px solid #bdd8ef; border-radius:7px; color:var(--blue); background:#f2f8fd; font-size:8px; cursor:pointer; }.connection-list button:disabled { opacity:.6; }.connection-list button.danger { color:#b64040; border-color:#eccaca; background:#fff7f7; }.connection-actions { display:flex; flex:0 0 auto; gap:5px; }
.connection-empty { min-height:150px; display:grid; place-items:center; align-content:center; padding:24px; border:1px dashed #d6e1eb; border-radius:10px; text-align:center; }.connection-empty strong { font-size:11px; }.connection-empty p { max-width:520px; margin:8px 0 0; color:var(--muted); font-size:9px; line-height:1.7; }
.connection-editor { scroll-margin-top:112px; }.connection-editor[hidden] { display:none; }.editor-close { width:31px; height:31px; display:grid; place-items:center; border:1px solid #d9e2ea; border-radius:8px; color:#627589; background:#fff; font-size:20px; line-height:1; cursor:pointer; }.connection-editor-notice { margin-bottom:18px; padding:12px 14px; border:1px solid #cfe2f3; border-radius:9px; background:#f4f9fd; }.connection-editor-notice strong { color:#235c8d; font-size:9px; }.connection-editor-notice p { margin:4px 0 0; color:#5e7388; font-size:8px; line-height:1.6; }.connection-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.connection-form > label { display:grid; gap:6px; }.connection-form > label > span { color:#4e6377; font-size:8px; font-weight:800; }.connection-form input:not([type="checkbox"]),.connection-form textarea,.connection-form select { width:100%; min-height:40px; padding:9px 11px; border:1px solid #d6e0e9; border-radius:8px; color:var(--ink); background:#fff; font:inherit; font-size:9px; outline:none; }.connection-form input:focus,.connection-form textarea:focus,.connection-form select:focus { border-color:#7bb5e6; box-shadow:0 0 0 3px rgba(38,132,207,.1); }.connection-form textarea { min-height:76px; resize:vertical; }.connection-notes { grid-column:1/-1; }.connection-enabled { display:flex!important; align-items:center; gap:8px!important; }.connection-enabled input { width:15px; height:15px; }.connection-form-actions { grid-column:1/-1; display:flex; justify-content:flex-end; gap:8px; }.connection-form-actions button { min-height:38px; padding:0 14px; border:1px solid #d5dfe8; border-radius:8px; color:#53677b; background:#fff; font-size:9px; font-weight:800; cursor:pointer; }.connection-form-actions button.primary { color:#fff; border-color:var(--blue); background:var(--blue); }.connection-form-actions button:disabled { opacity:.6; cursor:wait; }
.data-center-nav { min-height: 48px; padding: 5px; display: flex; gap: 4px; align-items: center; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(28, 44, 66, .035); }
.data-center-nav a { min-width: 112px; min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: #687a8e; font-size: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.data-center-nav a:hover { color: var(--blue); background: #f2f7fc; }.data-center-nav a.active { color: #fff; background: #1b6fc9; box-shadow: 0 5px 12px rgba(23, 109, 209, .18); }
.data-hub-hero { min-height: 210px; padding: 28px 31px; display: flex; align-items: center; justify-content: space-between; gap: 30px; overflow: hidden; border-radius: 16px; color: #fff; background: radial-gradient(circle at 83% 0%, rgba(54,170,255,.27), transparent 34%), linear-gradient(125deg,#15344f,#155c91); box-shadow: 0 15px 30px rgba(17, 72, 118, .14); }
.data-hub-hero > div:first-child { max-width: 715px; }.data-hub-hero > div:first-child > span, .data-page-head > div > span { color: #80c5ff; font-size: 9px; font-weight: 900; letter-spacing: .12em; }.data-hub-hero h2, .data-page-head h2 { margin: 10px 0 8px; font-size: 23px; letter-spacing: -.025em; }.data-hub-hero p { margin: 0; color: #c3d8ea; font-size: 11px; line-height: 1.75; }.data-hub-hero > div:first-child > div { margin-top: 18px; display: flex; align-items: center; gap: 13px; }.data-hub-hero > div:first-child > div > a:not(.primary-link) { color: #c8e5fa; font-size: 10px; font-weight: 700; text-decoration: none; }
.data-layer-map { min-width: 315px; padding: 18px; display: grid; grid-template-columns: 1fr 18px 1fr; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(5,31,54,.25); }.data-layer-map span { min-height: 42px; padding: 7px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: #d8ebf9; background: rgba(255,255,255,.07); font-size: 9px; font-weight: 700; text-align: center; }.data-layer-map i { height: 1px; background: #5c96c0; }.data-layer-map i:nth-of-type(2) { display: none; }.data-layer-map span:last-child { grid-column: 1 / -1; }
.data-overview-grid { grid-template-columns: 1.45fr .75fr; }.source-landscape { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }.source-landscape article { padding: 13px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fbfcfe; }.source-landscape article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.source-landscape strong { font-size: 10px; }.source-landscape small, .source-landscape em { color: var(--subtle); font-size: 8px; font-style: normal; }.source-landscape p { min-height: 30px; margin: 8px 0; color: var(--muted); font-size: 8px; line-height: 1.55; }.source-landscape em { color: var(--blue); font-weight: 700; }.domain-mini-list { display: grid; gap: 5px; }.domain-mini-list > span { padding: 8px 9px; display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 8px; border-radius: 8px; background: #f7f9fb; color: #334960; font-size: 9px; font-weight: 700; }.domain-mini-list > span > i { width: 6px; height: 6px; border-radius: 50%; background: #59a8ea; }.domain-mini-list small { color: var(--subtle); font-size: 7px; font-weight: 500; }
.data-page-head { min-height: 142px; padding: 24px 27px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid #dce7f1; border-radius: 14px; background: linear-gradient(125deg,#f8fbfe,#edf6ff); }.data-page-head > div > span { color: var(--blue); }.data-page-head h2 { color: var(--ink); }.data-page-head p { max-width: 680px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.7; }.primary-action { min-height: 44px; padding: 0 17px; display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; border: 0; border-radius: 9px; color: #fff; background: var(--blue); box-shadow: 0 9px 20px rgba(23,109,209,.2); font-size: 11px; font-weight: 800; cursor: pointer; }.primary-action .icon { width: 16px; height: 16px; }
.source-catalog-panel { scroll-margin-top: 112px; }.source-filter-row { margin: -2px 0 14px; display: flex; gap: 6px; overflow-x: auto; }.source-filter-row button { min-height: 31px; padding: 0 10px; flex: 0 0 auto; border: 1px solid #dce4ec; border-radius: 7px; color: #65768a; background: #fff; font-size: 8px; font-weight: 700; cursor: pointer; }.source-filter-row button.active { color: var(--blue); border-color: #a9cdef; background: #eaf5ff; }.source-catalog-list { display: grid; gap: 8px; }.source-catalog-row { min-height: 118px; padding: 14px; display: grid; grid-template-columns: 42px minmax(0,1fr) 110px 125px; align-items: center; gap: 13px; border: 1px solid var(--line-soft); border-radius: 11px; background: #fbfcfe; }.source-catalog-row[hidden] { display: none; }.source-catalog-row.featured { border-color: #a9cfee; background: linear-gradient(125deg,#f8fcff,#edf7ff); box-shadow: inset 3px 0 0 var(--blue); }.source-logo { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: #213b56; font-size: 10px; font-weight: 900; }.source-catalog-row.featured .source-logo { color: #fff; background: #111; }.source-main { min-width: 0; }.source-main > div:first-child { display: flex; align-items: center; gap: 7px; }.source-main strong { font-size: 11px; }.source-main em { padding: 3px 6px; border-radius: 999px; color: var(--blue); background: #dbeeff; font-size: 7px; font-style: normal; font-weight: 800; }.source-main > small { margin-top: 4px; display: block; color: var(--subtle); font-size: 8px; }.source-main p { margin: 7px 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.source-main > div:last-child { display: flex; flex-wrap: wrap; gap: 4px; }.source-main i { padding: 3px 5px; border-radius: 4px; color: #566b80; background: #edf2f6; font-size: 7px; font-style: normal; }.source-meta { display: grid; gap: 6px; }.source-meta span, .source-meta small { color: #53687d; font-size: 8px; }.source-meta small { color: var(--subtle); }.source-action { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 8px; font-weight: 800; text-align: center; text-decoration: none; }.source-action.primary { border: 0; color: #fff; background: var(--blue); box-shadow: 0 5px 12px rgba(23,109,209,.16); cursor: pointer; }.source-action.secondary { border: 1px solid #b9d7ef; color: var(--blue); background: #f2f8fd; cursor: pointer; }.source-action.waiting { color: #7b8998; background: #edf1f4; }
.source-market-actions { display:grid; gap:4px; }.source-market-actions .source-action { min-height:28px; }.connector-market-actions { margin-top:auto; padding-top:10px; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; border-top:1px solid #e3eaf0; }.connector-market-actions a { color:var(--blue); font-size:8px; font-weight:700; text-align:center; text-decoration:none; }
@media (max-width:620px) { .source-market-actions { grid-column:1 / -1; } }
.domain-catalog { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.domain-catalog article { min-height: 90px; padding: 12px; display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid var(--line-soft); border-radius: 9px; background: #fbfcfe; }.domain-catalog article > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font-size: 8px; font-weight: 900; }.domain-catalog strong { font-size: 10px; }.domain-catalog p { margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.domain-catalog em { color: var(--subtle); font-size: 7px; font-style: normal; white-space: nowrap; }.sync-policy-list { display: grid; gap: 7px; }.sync-policy-list article { min-height: 66px; padding: 10px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-soft); border-radius: 9px; }.sync-policy-list article > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #fff; background: #315c87; font-size: 8px; font-weight: 900; }.sync-policy-list article > div { min-width: 0; flex: 1; }.sync-policy-list strong, .sync-policy-list small { display: block; }.sync-policy-list strong { font-size: 10px; }.sync-policy-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }.sync-policy-list em { margin-left: auto; }
.panel { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.panel-heading { min-height: 39px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.panel-heading > div > span, .run-detail-head > div > span { margin-bottom: 5px; display: block; color: var(--blue); font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.panel-heading h2, .run-detail-head h2 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.panel-heading > small { color: var(--subtle); font-size: 9px; }
.panel-heading > a:not(.primary-link) { color: var(--blue); font-size: 10px; font-weight: 700; text-decoration: none; }
.page-panel-heading { margin-bottom: 20px; }
.primary-link { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; color: #fff; background: var(--blue); font-size: 10px; font-weight: 800; text-decoration: none; box-shadow: 0 6px 15px rgba(23, 109, 209, .15); }
.primary-link .icon { width: 14px; height: 14px; }
.primary-link.light { border: 1px solid rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.12); box-shadow: none; }
.panel-note { margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.7; }

.module-shortcuts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.module-shortcuts a { min-height: 108px; padding: 14px 13px; position: relative; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line-soft); border-radius: 11px; color: inherit; background: #fbfcfe; text-decoration: none; transition: .16s ease; }
.module-shortcuts a:hover { border-color: #a9cbea; background: #f7fbff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(25, 96, 167, .07); }
.module-shortcuts b { color: #9aaabc; font-size: 10px; }
.module-shortcuts strong, .module-shortcuts small { display: block; }
.module-shortcuts strong { margin-bottom: 6px; font-size: 11px; }
.module-shortcuts small { color: var(--muted); font-size: 9px; line-height: 1.55; }
.module-shortcuts .icon { width: 14px; height: 14px; position: absolute; right: 10px; bottom: 10px; color: #a5b6c8; }

.platform-links, .run-list, .catalog-list, .integration-list, .audit-list { display: grid; gap: 7px; }
.platform-links a, .run-row, .catalog-list article, .integration-list article, .audit-list article { min-width: 0; min-height: 60px; padding: 10px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-soft); border-radius: 9px; color: inherit; background: #fff; text-decoration: none; }
.platform-links > a > span, .catalog-icon, .audit-list article > span { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: #2d72b7; background: var(--blue-soft); font-size: 10px; font-weight: 800; }
.platform-links strong, .platform-links small, .run-row strong, .run-row small, .catalog-list strong, .catalog-list small, .integration-list strong, .integration-list small, .audit-list strong, .audit-list small { display: block; }
.platform-links strong, .run-row strong, .catalog-list strong, .integration-list strong, .audit-list strong { font-size: 10px; }
.platform-links small, .run-row small, .catalog-list small, .integration-list small, .audit-list small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.platform-links em { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; }
.platform-links em.online, .integration-list i.online { background: #24b983; }
.platform-links em.pending, .integration-list i.pending { background: #d9a244; }
.platform-links .icon, .run-row > .icon { width: 13px; height: 13px; color: #a3b1c0; }
.managed-platform-note { min-height: 205px; display: grid; place-items: center; align-content: center; padding: 26px; border: 1px dashed #d5e0ea; border-radius: 11px; background: #f8fafc; text-align: center; }.managed-platform-note strong { font-size: 11px; }.managed-platform-note small { max-width: 250px; margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.7; }
.run-row { width: 100%; color: inherit; text-align: left; }
button.run-row { cursor: pointer; }
button.run-row:hover, button.run-row.selected { border-color: #b5d1eb; background: #f7fbff; }
.run-row > div, .catalog-list article > div, .integration-list article > div, .audit-list article > div, .platform-links a > div { min-width: 0; }
.run-row > em, .catalog-list article > em { margin-left: auto; }
.run-status { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #a8b4c0; }
.run-status.running { background: var(--blue); box-shadow: 0 0 0 4px rgba(23,109,209,.09); }
.run-status.succeeded { background: var(--green); }.run-status.failed { background: var(--red); }.run-status.queued { background: #d29a39; }

.toolbar { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.search-box { width: min(420px, 100%); height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 9px; background: #fbfcfd; }
.search-box .icon { width: 16px; height: 16px; color: #8ea0b2; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.search-box input::placeholder { color: #9cabb9; }
.filter-select { height: 40px; padding: 0 9px 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.filter-select span { color: var(--subtle); font-size: 10px; }
.filter-select select { border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.result-count { margin-left: auto; color: var(--subtle); font-size: 10px; }

.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 10px; }
thead { background: #f7f9fb; }
th { padding: 11px 13px; color: #738197; font-size: 9px; font-weight: 800; text-align: left; white-space: nowrap; }
td { padding: 12px 13px; border-top: 1px solid var(--line-soft); color: #485a6f; vertical-align: middle; }
td strong, td small { display: block; }
td strong { color: var(--ink); font-size: 10px; }
td small { margin-top: 4px; color: var(--subtle); font-size: 8px; }
tbody tr:hover { background: #fbfdff; }
.status-pill { padding: 4px 7px; display: inline-block; border-radius: 999px; color: #65758a; background: #eef2f6; font-size: 8px; font-style: normal; white-space: nowrap; }
.status-pill.success { color: #087957; background: #e0f7ee; }.status-pill.warning { color: #9c620e; background: #fff3dc; }.status-pill.danger { color: #ad3c46; background: #ffedef; }.status-pill.info { color: #1a68aa; background: #e5f2ff; }.status-pill.neutral { color: #65758a; background: #eef2f6; }
.table-action { padding: 5px 9px; border: 1px solid #c7ddef; border-radius: 6px; color: var(--blue); background: #f4f9fe; font-size: 9px; font-weight: 700; cursor: pointer; }

.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.tool-card { min-height: 230px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #fff, #fbfcfe); }
.tool-card-top { display: flex; align-items: center; justify-content: space-between; }
.tool-card-top > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 9px; color: #1b6db9; background: var(--blue-soft); font-size: 9px; font-weight: 900; }
.tool-card h3 { margin: 15px 0 8px; font-size: 13px; }
.tool-card > p { min-height: 48px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.tool-card dl { margin: 15px 0 0; padding-top: 11px; display: grid; gap: 7px; border-top: 1px solid var(--line-soft); }
.tool-card dl div { display: flex; justify-content: space-between; gap: 10px; }
.tool-card dt, .tool-card dd { margin: 0; font-size: 9px; }
.tool-card dt { color: var(--subtle); }.tool-card dd { color: #42546a; font-weight: 600; text-align: right; }

.split-hero, .storage-hero, .dashboard-hero, .ai-notice { min-height: 180px; padding: 27px 30px; display: flex; align-items: center; justify-content: space-between; gap: 28px; overflow: hidden; border-radius: 15px; color: #fff; background: linear-gradient(125deg, #183a5b, #1768aa); box-shadow: 0 12px 28px rgba(26, 83, 139, .13); }
.split-hero > div { max-width: 760px; }
.split-hero span, .storage-hero > div > span, .dashboard-hero > div > span, .ai-notice > div > span { color: #8dc4f1; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.split-hero h2, .storage-hero h2, .dashboard-hero h2, .ai-notice h2 { margin: 9px 0 8px; font-size: 23px; }
.split-hero p, .storage-hero p, .dashboard-hero p, .ai-notice p { margin: 0; color: #bfd4e6; font-size: 11px; line-height: 1.75; }
.process-line { padding: 18px 10px; display: flex; align-items: center; justify-content: center; }
.process-line > span { min-width: 112px; padding: 11px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; color: #53677d; background: #fbfcfe; font-size: 9px; }
.process-line b { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-soft); font-size: 8px; }
.process-line > i { width: 34px; height: 1px; background: #cfdae5; }

.runs-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 16px; align-items: start; }
.run-detail-panel { position: sticky; top: 113px; min-height: 410px; }
.detail-placeholder { min-height: 350px; display: grid; place-items: center; align-content: center; color: var(--subtle); text-align: center; }
.detail-placeholder .icon { width: 36px; height: 36px; color: #afbfce; }
.detail-placeholder h3 { margin: 14px 0 6px; color: #53677c; font-size: 13px; }
.detail-placeholder p { margin: 0; font-size: 10px; }
.run-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.run-facts { margin: 20px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.run-facts div { padding: 10px; border-radius: 8px; background: #f7f9fb; }
.run-facts dt, .run-facts dd { margin: 0; }
.run-facts dt { color: var(--subtle); font-size: 8px; }.run-facts dd { margin-top: 5px; color: #43556a; font-size: 9px; word-break: break-all; }
.run-summary { margin-top: 17px; padding: 13px; border: 1px solid #dce9f4; border-radius: 9px; background: #f7fbff; }
.run-summary span, .event-timeline > span { color: var(--blue); font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.run-summary p { margin: 7px 0 0; color: #4b6075; font-size: 10px; line-height: 1.65; }
.event-timeline { margin-top: 18px; }
.event-timeline article { min-height: 53px; padding: 9px 0 9px 17px; position: relative; display: flex; gap: 10px; border-left: 1px solid #dce4ec; }
.event-timeline article > i { width: 8px; height: 8px; position: absolute; left: -5px; top: 13px; border: 2px solid #fff; border-radius: 50%; background: #6d9bc5; box-shadow: 0 0 0 1px #c7d8e7; }
.event-timeline article strong, .event-timeline article small { display: block; }.event-timeline article strong { font-size: 9px; }.event-timeline article small { margin-top: 5px; color: var(--subtle); font-size: 8px; }

.storage-hero { justify-content: flex-start; background: linear-gradient(125deg, #183855, #235f8e); }
.storage-graphic { width: 74px; height: 74px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.08); }
.storage-graphic .icon { width: 35px; height: 35px; color: #8cc7f5; }
.storage-hero > div:nth-child(2) { max-width: 570px; }
.storage-hero dl { margin: 0 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.storage-hero dl div { min-width: 95px; padding: 10px 18px; border-left: 1px solid rgba(255,255,255,.13); }
.storage-hero dt { color: #97bad7; font-size: 9px; }.storage-hero dd { margin: 7px 0 0; font-size: 19px; font-weight: 800; }

.dashboard-hero { min-height: 226px; background: radial-gradient(circle at 83% 5%, rgba(84, 179, 255, .3), transparent 32%), linear-gradient(125deg, #102b46, #134f81); }
.dashboard-hero > div:first-child { max-width: 690px; }
.dashboard-actions { margin-top: 19px; display: flex; align-items: center; gap: 13px; }
.dashboard-actions small { color: #93b8d6; font-size: 9px; }
.mini-dashboard { width: 300px; height: 150px; padding: 20px; display: flex; align-items: flex-end; justify-content: space-between; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(3, 28, 50, .28); }
.mini-number span, .mini-number strong { display: block; }.mini-number span { color: #8fb8d8; font-size: 9px; }.mini-number strong { margin-top: 9px; font-size: 26px; }
.mini-bars { height: 86px; display: flex; align-items: flex-end; gap: 6px; }.mini-bars i { width: 10px; height: 31%; border-radius: 2px 2px 0 0; background: #50a6ed; }.mini-bars i:nth-child(2) { height: 46%; }.mini-bars i:nth-child(3) { height: 64%; }.mini-bars i:nth-child(4) { height: 52%; }.mini-bars i:nth-child(5) { height: 78%; }.mini-bars i:nth-child(6) { height: 90%; }
.display-themes { display: grid; gap: 8px; }.display-themes article { padding: 12px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line-soft); border-radius: 9px; }.display-themes b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font-size: 9px; }.display-themes strong, .display-themes small { display: block; }.display-themes strong { font-size: 10px; }.display-themes small { margin-top: 4px; color: var(--muted); font-size: 9px; }

.ai-notice { justify-content: flex-start; color: var(--ink); border: 1px solid #ded9f2; background: linear-gradient(125deg, #faf9ff, #f0edff); box-shadow: none; }
.ai-notice > .icon { width: 62px; height: 62px; padding: 15px; border-radius: 16px; color: var(--violet); background: #e5e0fb; }
.ai-notice > div { max-width: 720px; }.ai-notice > div > span { color: var(--violet); }.ai-notice p { color: var(--muted); }.ai-notice > em { margin-left: auto; padding: 7px 10px; border-radius: 999px; color: #745fb6; background: #e6e0fa; font-size: 9px; font-weight: 800; font-style: normal; letter-spacing: .08em; }
.catalog-icon.ai { color: var(--violet); background: #eeeafb; }

.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.service-grid article { min-height: 67px; padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-soft); border-radius: 9px; }
.service-grid article > span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font-size: 10px; font-weight: 800; }
.service-grid strong, .service-grid small { display: block; }.service-grid strong { font-size: 10px; }.service-grid small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.service-grid article > a { margin-left: auto; color: var(--blue); font-size: 9px; font-weight: 700; text-decoration: none; }.service-grid article > em { margin-left: 0; }
.identity-detail { padding: 14px; display: flex; align-items: center; gap: 11px; border-radius: 10px; background: #f6f8fb; }.identity-detail > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #294e74; font-size: 13px; font-weight: 800; }.identity-detail strong, .identity-detail small { display: block; }.identity-detail strong { font-size: 11px; }.identity-detail small { margin-top: 5px; color: var(--muted); font-size: 9px; }
.permission-grid { margin-top: 11px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.permission-grid > span { padding: 9px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--line-soft); border-radius: 8px; color: #566a7f; font-size: 9px; }.permission-grid i { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; font-size: 8px; font-style: normal; }.permission-grid .allowed i { color: var(--green); background: #ddf6ec; }.permission-grid .denied i { color: #8996a5; background: #edf1f4; }
.feature-grant-list { display: grid; gap: 10px; }
.feature-grant-card { padding: 14px; display: grid; grid-template-columns: 190px minmax(0, 1fr) 125px; align-items: center; gap: 16px; border: 1px solid var(--line-soft); border-radius: 11px; background: #fbfcfe; }
.feature-user { display: flex; align-items: center; gap: 10px; }.feature-user > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #fff; background: #315c87; font-size: 10px; font-weight: 800; }.feature-user strong, .feature-user small { display: block; }.feature-user strong { font-size: 10px; }.feature-user small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.feature-options { display: flex; flex-wrap: wrap; gap: 7px; }.feature-options label { cursor: pointer; }.feature-options input { position: absolute; opacity: 0; pointer-events: none; }.feature-options span { min-height: 27px; padding: 0 9px; display: inline-flex; align-items: center; border: 1px solid #d8e2ec; border-radius: 7px; color: #64778b; background: #fff; font-size: 8px; transition: .15s ease; }.feature-options input:checked + span { color: #1765ad; border-color: #a9cff1; background: #eaf5ff; box-shadow: inset 0 0 0 1px #c9e4fb; }.feature-options label.inherited { cursor: default; }.feature-options label.inherited span, .feature-options label.inherited input:checked + span { color: #8b98a6; border-color: #e2e7ec; background: #f0f3f6; box-shadow: none; }
.feature-actions { display: grid; justify-items: end; gap: 7px; }.feature-actions small { color: var(--subtle); font-size: 7px; text-align: right; }.feature-actions button { padding: 8px 11px; border: 0; border-radius: 8px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 700; cursor: pointer; }.feature-actions button:disabled { cursor: wait; opacity: .65; }
.integration-list i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }.integration-list i.error { background: var(--red); }.integration-list article > em, .audit-list article > em { margin-left: auto; color: var(--subtle); font-size: 8px; font-style: normal; }.audit-list { grid-template-columns: repeat(2, 1fr); }

.empty-state { min-height: 170px; display: grid; place-items: center; align-content: center; border: 1px dashed #d8e1e9; border-radius: 10px; color: var(--subtle); text-align: center; }
.empty-state .icon { width: 28px; height: 28px; color: #afbdca; }.empty-state p { margin: 10px 0 0; font-size: 10px; }
.error-state { min-height: 430px; display: grid; place-items: center; align-content: center; color: var(--muted); text-align: center; }.error-state .icon { width: 40px; height: 40px; color: var(--red); }.error-state h2 { margin: 15px 0 7px; color: var(--ink); font-size: 16px; }.error-state p { margin: 0; font-size: 11px; }.error-state button { margin-top: 15px; padding: 8px 12px; border: 0; border-radius: 8px; color: #fff; background: var(--blue); font-size: 10px; cursor: pointer; }
.access-denied .icon { color: #7a8da1; }.access-denied a { margin-top: 16px; padding: 9px 13px; border-radius: 8px; color: #fff; background: var(--blue); font-size: 10px; font-weight: 700; text-decoration: none; }
.toast { max-width: 360px; padding: 12px 15px; position: fixed; z-index: 100; right: 24px; bottom: 24px; border-radius: 9px; color: #fff; background: #172a40; box-shadow: 0 15px 35px rgba(20,37,57,.25); font-size: 11px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; }.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1250px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
  .metric-grid.compact-metrics { grid-template-columns: repeat(4, 1fr); }
  .module-shortcuts { grid-template-columns: repeat(3, 1fr); }
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .connector-grid { grid-template-columns: repeat(2, 1fr); }
  .user-chip > div { display: none; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { width: 270px; position: fixed; left: 0; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 18px 0 40px rgba(12,24,40,.2); }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-backdrop { width: 100%; height: 100%; position: fixed; z-index: 25; inset: 0; border: 0; background: rgba(7,18,31,.38); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidebar-open .sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; }
  .sidebar-toggle { display: grid; }
  .topbar { padding: 14px 20px; }
  .page-content { padding: 22px 20px 42px; }
  .architecture-card, .mini-dashboard { display: none; }
  .welcome-copy, .dashboard-hero > div:first-child { max-width: none; }
  .content-grid, .overview-grid, .content-grid.two, .data-layout, .system-layout { grid-template-columns: 1fr; }
  .data-overview-grid { grid-template-columns: 1fr; }.data-overview-grid > .span-2 { grid-column: auto; }.data-layer-map { display: none; }
  .source-catalog-row { grid-template-columns: 42px minmax(0,1fr) 115px; }.source-meta { display: none; }
  .connection-list article { align-items:flex-start; flex-wrap:wrap; }.connection-actions { width:100%; justify-content:flex-end; }
  .feature-grant-card { grid-template-columns: 1fr; }.feature-actions { justify-items: start; }.feature-actions small { text-align: left; }
  .content-grid .span-2, .overview-grid > .span-2 { grid-column: auto; }
  .runs-layout { grid-template-columns: 1fr; }
  .run-detail-panel { position: static; }
  .storage-hero dl { display: none; }
}

@media (max-width: 720px) {
  .topbar { align-items: flex-start; }
  .topbar-heading small, .identity-switch > span, .refresh-button > span { display: none; }
  .topbar-actions { gap: 6px; }
  .identity-switch { padding: 0 7px; }
  .identity-switch select { max-width: 94px; }
  .user-chip { display: none; }
  .page-content { padding: 16px 13px 36px; }
  .welcome-card, .split-hero, .storage-hero, .dashboard-hero, .ai-notice { padding: 24px 21px; }
  .welcome-card h2, .split-hero h2, .storage-hero h2, .dashboard-hero h2, .ai-notice h2 { font-size: 21px; }
  .metric-grid, .metric-grid.compact-metrics { grid-template-columns: repeat(2, 1fr); }
  .metric-card { min-height: 108px; }
  .module-shortcuts, .tool-grid { grid-template-columns: 1fr; }
  .connector-grid { grid-template-columns: 1fr; }
  .data-center-nav { justify-content: flex-start; }.data-center-nav a { min-width: 102px; }
  .data-hub-hero, .data-page-head { padding: 23px 20px; }.data-hub-hero h2, .data-page-head h2 { font-size: 20px; }.data-page-head { align-items: flex-start; flex-direction: column; }.primary-action { width: 100%; justify-content: center; }
  .source-landscape, .domain-catalog { grid-template-columns: 1fr; }.source-catalog-row { grid-template-columns: 38px minmax(0,1fr); }.source-logo { width: 38px; height: 38px; }.source-action { grid-column: 1 / -1; }.source-meta { display: none; }
  .connector-config-help { grid-template-columns:1fr; }.connector-config-help code { grid-row:auto; }
  .connection-form { grid-template-columns:1fr; }.connection-notes,.connection-form-actions { grid-column:auto; }.connection-form-actions button { flex:1; }
  .module-shortcuts a { min-height: 86px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .result-count { margin-left: 0; }
  .process-line { align-items: stretch; flex-direction: column; }
  .process-line > span { width: 100%; }.process-line > i { width: 1px; height: 11px; margin-left: 20px; }
  .service-grid, .audit-list { grid-template-columns: 1fr; }
  .storage-graphic, .ai-notice > .icon { display: none; }
  .ai-notice > em { display: none; }
}
.launch-readiness { margin-bottom: 20px; }
.deployment-hero { margin-bottom: 18px; padding: 24px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-radius:15px; color:#fff; background:linear-gradient(125deg,#123a5c,#176cab); box-shadow:0 12px 28px rgba(20,78,126,.15); }
.deployment-hero span:first-child { color:#8fc9f5; font-size:9px; font-weight:850; letter-spacing:.1em; }
.deployment-hero h2 { margin:8px 0; font-size:21px; }.deployment-hero p { max-width:760px; margin:0; color:#d3e6f5; font-size:10px; line-height:1.7; }
.deployment-facts { margin:0; display:grid; gap:0; }.deployment-facts div { padding:11px 0; display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; border-bottom:1px solid var(--line-soft); }
.deployment-facts dt,.deployment-facts dd { margin:0; font-size:9px; }.deployment-facts dt { color:var(--subtle); }.deployment-facts dd { overflow-wrap:anywhere; color:#3d536a; font-weight:650; }
.pilot-grant-form { margin-bottom:14px; padding:13px; display:grid; grid-template-columns:1fr .7fr auto; align-items:end; gap:10px; border-radius:11px; background:#f6f9fc; }
.pilot-grant-form label { display:grid; gap:5px; color:var(--muted); font-size:9px; }.pilot-grant-form select { min-height:36px; padding:0 9px; border:1px solid #d7e1eb; border-radius:8px; background:#fff; }.pilot-grant-form button { min-height:36px; padding:0 15px; border:0; border-radius:8px; color:#fff; background:var(--blue); cursor:pointer; }
.trial-timeline { display:grid; gap:12px; }.trial-timeline article { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--line-soft); border-radius:11px; }.trial-timeline i { width:12px; height:12px; border-radius:50%; background:#c3ccd5; box-shadow:0 0 0 5px #f0f3f6; }.trial-timeline .done i { background:#19a273; box-shadow:0 0 0 5px #e2f7ef; }.trial-timeline .active i { background:#2d82cf; box-shadow:0 0 0 5px #e4f2ff; }.trial-timeline strong,.trial-timeline small { display:block; }.trial-timeline small { margin-top:4px; color:var(--subtle); font-size:8px; }
.readiness-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.database-status-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.database-status-grid article { padding: 13px; border-radius: 10px; background: #f5f8fb; }
.database-status-grid strong, .database-status-grid small { display: block; }
.database-status-grid strong { color: #214a73; font-size: 18px; }
.database-status-grid small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.database-version-row { margin-top: 12px; padding: 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line-soft); border-radius: 10px; }
.database-version-row strong, .database-version-row small { display: block; }
.database-version-row small { margin-top: 4px; color: var(--subtle); font-size: 8px; }
.database-version-row > div:last-child { display: flex; align-items: center; gap: 8px; }
.readiness-check { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #e6ebf3; border-radius: 12px; background: #f8fafc; }
.readiness-check > i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-weight: 800; }
.readiness-check.ok > i { color: #087a55; background: #dff7ec; }
.readiness-check.pending > i { color: #a85b06; background: #fff0d7; }
.readiness-check strong, .readiness-check small { display: block; }
.readiness-check small { margin-top: 3px; color: #738096; }
.dingtalk-readiness { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dingtalk-readiness > div { padding: 14px; border-radius: 12px; background: #f7f9fc; }
.dingtalk-readiness strong, .dingtalk-readiness small { display: block; }
.dingtalk-readiness small { margin-top: 6px; color: #6f7b8d; line-height: 1.55; }
.dingtalk-readiness .dingtalk-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.dingtalk-readiness button[disabled] { opacity: .55; cursor: not-allowed; }
.sync-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding: 14px; border-radius: 12px; background: #eef8f4; border: 1px solid #ccebdd; }
.sync-preview.blocked { background: #fff7e8; border-color: #f2d59e; }
.sync-preview strong, .sync-preview small { display: block; }
.sync-preview small, .sync-preview p { margin-top: 5px; color: #6f7b8d; }
.sync-preview button { border: 0; border-radius: 9px; padding: 10px 14px; color: white; background: #146bdf; cursor: pointer; }
.organization-tree { display: contents; }
.organization-tree article { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 10px calc(var(--depth) * 16px); border-bottom: 1px solid #eef1f5; }
.organization-tree strong, .organization-tree small { display: block; }
.organization-tree small { margin-top: 3px; color: #758196; }
.organization-tree em { color: #66758b; font-size: 12px; font-style: normal; }
.event-receipts article { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #eef1f5; }
.event-receipts article > i { width: 9px; height: 9px; border-radius: 50%; background: #96a2b4; }
.event-receipts article > i.processed { background: #1aaa78; }
.event-receipts article > i.failed { background: #d85656; }
.event-receipts article div { min-width: 0; flex: 1; }
.event-receipts strong, .event-receipts small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-receipts small { margin-top: 3px; color: #7a879a; }
.event-receipts em { color: #66758b; font-size: 12px; font-style: normal; }
@media (max-width: 900px) {
  .readiness-grid, .dingtalk-readiness, .database-status-grid { grid-template-columns: 1fr; }
  .database-version-row { align-items: flex-start; flex-direction: column; }
  .dingtalk-readiness .dingtalk-actions { grid-column: auto; align-items: flex-start; flex-direction: column; }
  .sync-preview { align-items: flex-start; flex-direction: column; }
  .deployment-hero { align-items:flex-start; flex-direction:column; }.pilot-grant-form { grid-template-columns:1fr; }
}

/* v0.12 desktop agent */
.assigned-automation-grid, .agent-device-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.assigned-automation-card, .agent-device-card, .adapter-list article { padding: 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: #fbfcfe; }
.assigned-automation-card h3 { margin: 14px 0 8px; font-size: 13px; }
.assigned-automation-card > p { min-height: 42px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.assigned-automation-card dl, .agent-device-card dl, .execution-card dl { margin: 14px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.assigned-automation-card dl div, .agent-device-card dl div, .execution-card dl div { min-width: 0; padding: 9px; border-radius: 8px; background: #f2f6fa; }
.assigned-automation-card dt, .assigned-automation-card dd, .agent-device-card dt, .agent-device-card dd, .execution-card dt, .execution-card dd { margin: 0; }
.assigned-automation-card dt, .agent-device-card dt, .execution-card dt { color: var(--subtle); font-size: 8px; }
.assigned-automation-card dd, .agent-device-card dd, .execution-card dd { margin-top: 4px; overflow: hidden; color: #42566d; font-size: 9px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.automation-run-controls { margin-top: 15px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.automation-run-controls select, .stack-form select, .stack-form input, .grant-form select { width: 100%; min-height: 36px; padding: 0 10px; border: 1px solid #d7e1eb; border-radius: 8px; color: #40556d; background: #fff; font-size: 9px; }
.automation-run-controls button, .stack-form button, .grant-form button { padding: 0 14px; border: 0; border-radius: 8px; color: #fff; background: var(--blue); font-size: 9px; font-weight: 750; cursor: pointer; }
.automation-run-controls button:disabled, .stack-form button:disabled, .grant-form button:disabled { cursor: wait; opacity: .6; }
.tool-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tool-card-head > span { color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.stack-form { display: grid; gap: 12px; }
.stack-form label, .grant-form label { display: grid; gap: 6px; color: #52677d; font-size: 9px; font-weight: 650; }
.stack-form button, .grant-form button { min-height: 38px; }
.grant-form { display: grid; grid-template-columns: 1.2fr .8fr 1.2fr auto auto; align-items: end; gap: 10px; }
.grant-form .check-label { min-height: 38px; padding: 0 11px; display: flex; align-items: center; border: 1px solid #dce5ed; border-radius: 8px; background: #f8fafc; }
.check-label input { margin: 0 7px 0 0; accent-color: var(--blue); }
.pairing-code-card { margin: 14px 0; padding: 17px 20px; display: flex; align-items: center; gap: 16px; border: 1px solid #b8dbf7; border-radius: 12px; background: #eff8ff; }
.pairing-code-card span, .pairing-code-card small { color: #58738d; font-size: 9px; }
.pairing-code-card strong { color: #0b5fa9; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; letter-spacing: .12em; }
.pairing-code-card small { margin-left: auto; }
.adapter-list { display: grid; gap: 9px; }
.adapter-list article > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.adapter-list strong, .adapter-list small { display: block; }
.adapter-list strong { font-size: 10px; }
.adapter-list small { margin-top: 6px; color: var(--subtle); font-size: 8px; word-break: break-all; }
.adapter-list p { margin: 8px 0 0; color: var(--muted); font-size: 9px; }
.agent-device-card > div:first-child { display: flex; align-items: center; gap: 9px; }
.agent-device-card > div:first-child > div { min-width: 0; flex: 1; }
.agent-device-card strong, .agent-device-card small { display: block; }
.agent-device-card strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.agent-device-card small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.device-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #a1adba; box-shadow: 0 0 0 4px #eef1f4; }
.device-dot.online { background: #16a170; box-shadow: 0 0 0 4px #e3f7ef; }
.actions, .run-actions { margin-top: 16px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.actions a, .actions button, .run-actions a, .run-actions button, button.secondary, button.danger-action { min-height: 34px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d7e1eb; border-radius: 8px; color: #4f647a; background: #fff; font-size: 9px; font-weight: 700; text-decoration: none; cursor: pointer; }
.actions .primary-link { color: #fff; border-color: var(--blue); background: var(--blue); }
.actions button.small { min-height: 28px; padding: 0 9px; font-size: 8px; }
.actions button.danger-action, .run-actions button.danger-action, button.danger-action { color: #b92f3c; border-color: #efcbd0; background: #fff7f8; }
.actions button:disabled, .run-actions button:disabled { cursor: wait; opacity: .55; }
.agent-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.standalone-run-detail { max-width: 1120px; margin: 0 auto; }
.execution-card { margin-top: 17px; padding: 15px; border: 1px solid #dbe7f2; border-radius: 11px; background: #f8fbfe; }
.execution-title, .progress-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.execution-title span, .execution-title strong { display: block; }
.execution-title span { color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.execution-title strong { margin-top: 5px; font-size: 10px; }
.execution-title small, .progress-caption { color: var(--subtle); font-size: 8px; }
.progress-track { height: 7px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: #e4ebf2; }
.progress-track i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #1874d1, #42a6e8); transition: width .2s ease; }
.progress-caption { margin-top: 7px; }
.attention-reason { margin: 11px 0 0; padding: 10px; border-radius: 8px; color: #76500f; background: #fff4df; font-size: 9px; }
.attention-reason strong { margin-right: 8px; }
.run-actions { justify-content: space-between; }
.run-actions a { margin-left: auto; color: var(--blue); border: 0; background: transparent; }
.run-status.needs_attention { background: var(--amber); box-shadow: 0 0 0 4px #fff1db; }
.agent-readiness { display: grid; grid-template-columns: repeat(3, 120px) minmax(0, 1fr); align-items: center; gap: 12px; }
.agent-readiness article { padding: 13px; border-radius: 10px; background: #f5f8fb; }
.agent-readiness strong, .agent-readiness small { display: block; }
.agent-readiness strong { color: #214a73; font-size: 20px; }
.agent-readiness small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.agent-readiness p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.7; }

@media (max-width: 1100px) {
  .assigned-automation-grid, .agent-device-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grant-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-readiness { grid-template-columns: repeat(3, 1fr); }
  .agent-readiness p { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .assigned-automation-grid, .agent-device-grid, .agent-facts { grid-template-columns: 1fr; }
  .grant-form, .automation-run-controls { grid-template-columns: 1fr; }
  .pairing-code-card { align-items: flex-start; flex-direction: column; }
  .pairing-code-card small { margin-left: 0; }
  .agent-readiness { grid-template-columns: 1fr; }
  .agent-readiness p { grid-column: auto; }
}

/* Role-based CRM navigation shares one layout across all CRM pages. */
.sidebar-nav [data-crm-flow-navigation] a{min-height:36px}
.sidebar-nav [data-crm-flow-navigation]{margin-top:12px}
.sidebar-footer a[hidden]{display:none}