:root {
  --page-bg: #f3f4f7;
  --panel: #ffffff;
  --panel-soft: #f8f8fa;
  --panel-dark: #2f333c;
  --ink: #222631;
  --muted: #747b89;
  --line: #dfe2e8;
  --line-strong: #cbd0d9;
  --sidebar: #252a33;
  --sidebar-deep: #1d2129;
  --topbar: #65445e;
  --topbar-deep: #53364e;
  --brand-900: #7d004b;
  --brand: #d6007f;
  --brand-dark: #ab0066;
  --brand-soft: #fce8f4;
  --accent: #00a8a8;
  --accent-soft: #e5f8f8;
  --success: #2d9c64;
  --success-soft: #e9f7ef;
  --warning: #d58a18;
  --warning-soft: #fff4df;
  --danger: #d34755;
  --danger-soft: #fdebed;
  --info: #3b72c4;
  --info-soft: #eaf1fb;
  --sidebar-width: 248px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(31, 35, 45, .06), 0 5px 16px rgba(31, 35, 45, .05);
  --shadow: 0 18px 45px rgba(31, 35, 45, .12);
  color: var(--ink);
  background: var(--page-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--page-bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(214, 0, 127, .20);
  outline-offset: 2px;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }

.eyebrow {
  margin: 0 0 .3rem;
  color: var(--brand);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}
.eyebrow.light { color: #f6a4d3; }

.brand-logo {
  display: block;
  width: 112px;
  height: 54px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 7px 14px rgba(0, 0, 0, .18));
}
.brand-logo.compact { width: 48px; height: 36px; object-fit: contain; }
.brand-logo.large { width: min(310px, 70vw); height: 126px; object-fit: contain; }
.brand-mark {
  display: grid;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: linear-gradient(145deg, #e51491, #a50062);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px rgba(0,0,0,.20);
  color: #fff;
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
.brand-mark.small { width: 40px; height: 40px; border-radius: 8px; font-size: .78rem; }
.brand-mark-large { width: 68px; height: 68px; border-radius: 14px; font-size: 1.2rem; }

.button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: .52rem .82rem;
  cursor: pointer;
  font-size: .77rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button:disabled { cursor: not-allowed; opacity: .52; }
.button-primary { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: 0 6px 14px rgba(214,0,127,.18); }
.button-primary:hover:not(:disabled) { border-color: var(--brand-dark); background: var(--brand-dark); box-shadow: 0 8px 18px rgba(171,0,102,.24); }
.button-secondary { border-color: var(--line-strong); background: #fff; color: #3f4652; }
.button-secondary:hover:not(:disabled) { border-color: #aaaeb8; background: #f5f5f7; color: var(--ink); }
.button-ghost { border-color: transparent; background: transparent; color: var(--muted); }
.button-ghost:hover:not(:disabled) { background: rgba(0,0,0,.05); color: var(--ink); }
.button-danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.button-danger:hover:not(:disabled) { background: #ba3341; border-color: #ba3341; }
.button-full { width: 100%; }
.button-large { min-height: 47px; border-radius: 8px; font-size: .88rem; }

.icon-button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}
.icon-button:hover { border-color: var(--line-strong); background: var(--panel-soft); }

/* Login */
.login-page { overflow-x: hidden; background: #eceef2; }
.login-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(0, 1.2fr) minmax(390px, .8fr); }
.login-brand {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  padding: clamp(2.5rem, 6vw, 6.5rem);
  background:
    radial-gradient(circle at 16% 15%, rgba(214,0,127,.28), transparent 30%),
    radial-gradient(circle at 87% 84%, rgba(0,168,168,.20), transparent 34%),
    linear-gradient(145deg, #252a33 0%, #403340 52%, #65445e 100%);
  color: #fff;
}
.login-brand::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 52px 52px;
  content: "";
  mask-image: linear-gradient(to bottom right, #000, transparent 84%);
}
.login-brand-content { position: relative; z-index: 2; width: min(780px, 100%); }
.brand-lockup { display: flex; align-items: center; gap: 1rem; }
.brand-lockup-copy strong { display: block; font-size: 1.05rem; letter-spacing: .01em; }
.brand-lockup-copy span { display: block; margin-top: .2rem; color: #d2c5cf; font-size: .72rem; }
.login-copy { margin: clamp(2.8rem, 8vh, 6rem) 0 2.6rem; }
.login-copy h1 { max-width: 780px; margin: 0; color: #fff; font-size: clamp(2.35rem, 4.5vw, 4.8rem); font-weight: 760; letter-spacing: -.052em; line-height: 1.02; }
.login-copy > p:last-child { max-width: 690px; margin: 1.35rem 0 0; color: #ddd4db; font-size: clamp(.96rem, 1.2vw, 1.14rem); line-height: 1.75; }
.login-feature-grid { display: grid; max-width: 760px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.login-feature-grid > div { min-height: 122px; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.055); backdrop-filter: blur(8px); }
.login-feature-grid strong, .login-feature-grid small { display: block; }
.login-feature-grid strong { margin-top: .95rem; font-size: .86rem; }
.login-feature-grid small { margin-top: .3rem; color: #c4b9c2; font-size: .7rem; line-height: 1.45; }
.feature-icon { display: inline-flex; color: #ff80c8; font-size: .66rem; font-weight: 850; letter-spacing: .12em; }
.login-domain { display: flex; align-items: center; gap: .55rem; margin-top: 2.4rem; color: #c7bbc4; font-size: .73rem; }
.login-brand-decoration { position: absolute; z-index: 1; right: -180px; bottom: -220px; width: 540px; height: 540px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.022), 0 0 0 140px rgba(255,255,255,.014); }
.login-card-wrap { display: grid; place-items: center; padding: clamp(1.4rem, 4.5vw, 4.5rem); background: #f5f6f8; }
.login-card { width: min(440px, 100%); padding: clamp(1.8rem, 4vw, 3rem); border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 26px 70px rgba(31,35,45,.13); }
.login-card-header { margin-bottom: 1.7rem; }
.login-card-header h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 1.95rem); letter-spacing: -.035em; }
.login-card-header .muted { margin: .52rem 0 0; font-size: .86rem; }
.mobile-brand { display: none; margin-bottom: 1.1rem; }
.login-card form { display: grid; gap: 1rem; }
.login-card label, .form-grid label, .modal > label, .access-summary label { display: grid; gap: .4rem; color: #4d5360; font-size: .74rem; font-weight: 720; }
.login-card input, .form-grid input, .form-grid select, .form-grid textarea, .toolbar input, .toolbar select, .modal input, .modal select, .modal textarea, .search-input {
  width: 100%; min-height: 40px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; color: var(--ink); padding: .64rem .72rem; font-size: .8rem; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.login-card input { min-height: 48px; padding: .78rem .88rem; }
input::placeholder, textarea::placeholder { color: #9ca2ad; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(214,0,127,.10); }
.login-security-note { display: flex; align-items: flex-start; gap: .68rem; margin-top: 1.25rem; padding: .78rem .88rem; border-radius: 7px; background: var(--panel-soft); color: var(--muted); }
.login-security-note > span { color: var(--success); font-size: .7rem; }
.login-security-note p { margin: 0; font-size: .68rem; line-height: 1.55; }
.login-card footer { margin-top: 1.6rem; color: #969ca6; font-size: .65rem; text-align: center; }

/* Dashboard shell: fixed sidebar is deliberately outside grid flow. */
.app-shell { display: block; min-height: 100vh; width: 100%; }
.sidebar {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-deep) 100%);
  color: #fff;
  transition: transform .22s ease;
}
.sidebar-brand { display: flex; min-height: 84px; align-items: center; gap: .72rem; padding: .9rem 1rem; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.08); }
.sidebar-brand-copy { min-width: 0; }
.sidebar-brand strong, .sidebar-brand span { display: block; min-width: 0; }
.sidebar-brand strong { overflow: hidden; color: #fff; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-brand span { overflow: hidden; margin-top: .17rem; color: #aeb4be; font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar nav { flex: 1; overflow-y: auto; padding: .7rem .62rem 1rem; scrollbar-width: thin; scrollbar-color: #4c5260 transparent; }
.nav-item { position: relative; display: flex; width: 100%; min-height: 37px; align-items: center; border: 0; border-radius: 5px; background: transparent; color: #b8bec8; cursor: pointer; padding: .5rem .68rem; font-size: .72rem; font-weight: 620; text-align: left; transition: background .14s ease, color .14s ease; }
.nav-item::before { width: 4px; height: 4px; flex: 0 0 auto; margin-right: .65rem; border-radius: 50%; background: #69717e; content: ""; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active { background: linear-gradient(90deg, rgba(214,0,127,.28), rgba(214,0,127,.08)); color: #fff; }
.nav-item.active::before { background: #ff7cc8; box-shadow: 0 0 0 4px rgba(255,124,200,.10); }
.sidebar-footer { display: grid; gap: .3rem; padding: .92rem 1rem 1rem; border-top: 1px solid rgba(255,255,255,.07); color: #858c97; font-size: .59rem; }
.sidebar-footer > div { display: flex; align-items: center; gap: .48rem; color: #bcc2ca; }
.sidebar-footer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #35c77d; box-shadow: 0 0 0 3px rgba(53,199,125,.12); }
.sidebar-overlay { display: none; }
.main-content { width: calc(100% - var(--sidebar-width)); min-width: 0; min-height: 100vh; margin-left: var(--sidebar-width); padding: 0 1.25rem 2rem; }
.topbar { position: sticky; z-index: 40; top: 0; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 -1.25rem 1rem; padding: .65rem 1.25rem; border-bottom: 1px solid rgba(0,0,0,.16); background: linear-gradient(90deg, var(--topbar-deep), var(--topbar)); color: #fff; box-shadow: 0 2px 8px rgba(24,20,25,.14); }
.topbar-title { display: flex; min-width: 0; align-items: center; gap: .72rem; }
.topbar h1 { margin: 0; color: #fff; font-size: clamp(1.3rem, 2vw, 1.68rem); letter-spacing: -.035em; line-height: 1.08; }
.topbar .eyebrow { color: #efb8d7; }
.topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: .48rem; }
.topbar .button-secondary { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.10); color: #fff; }
.topbar .button-secondary:hover { background: rgba(255,255,255,.18); }
.topbar .button-ghost { color: #eee6ec; }
.topbar .button-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.system-state { display: inline-flex; align-items: center; gap: .45rem; color: #e2d7df; font-size: .68rem; font-weight: 650; }
.user-chip { display: grid; min-width: 88px; gap: .03rem; border: 1px solid rgba(255,255,255,.20); border-radius: 6px; background: rgba(255,255,255,.10); padding: .4rem .65rem; color: #fff; font-size: .72rem; font-weight: 780; line-height: 1.15; }
.user-chip small { color: #dfcfd9; font-size: .53rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mobile-menu-button { display: none; }

.view { display: none; width: 100%; animation: view-in .18s ease; }
.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }

.metric-grid { display: grid; width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: .9rem; }
.metric-card { position: relative; overflow: hidden; min-width: 0; min-height: 116px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: 1rem; box-shadow: var(--shadow-sm); }
.metric-card::after { position: absolute; right: -26px; bottom: -34px; width: 92px; height: 92px; border-radius: 50%; background: var(--brand-soft); content: ""; }
.metric-card:nth-child(2)::after { background: var(--success-soft); }
.metric-card:nth-child(3)::after { background: var(--accent-soft); }
.metric-card:nth-child(4)::after { background: var(--warning-soft); }
.metric-card span, .metric-card strong, .metric-card small { position: relative; z-index: 1; display: block; }
.metric-card span { color: var(--muted); font-size: .68rem; font-weight: 720; }
.metric-card strong { overflow: hidden; margin-top: .35rem; font-size: clamp(1.45rem, 2.3vw, 1.92rem); letter-spacing: -.045em; line-height: 1.08; text-overflow: ellipsis; }
.metric-card small { margin-top: .52rem; color: #9298a3; font-size: .61rem; }

.content-grid { display: grid; width: 100%; gap: .9rem; }
.content-grid.two-thirds { grid-template-columns: minmax(0, 2fr) minmax(310px, 1fr); }
.content-grid.half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { width: 100%; min-width: 0; margin-bottom: .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); padding: .95rem; box-shadow: var(--shadow-sm); }
.panel-header { display: flex; min-width: 0; min-height: 40px; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; }
.panel-header > div:first-child { min-width: 0; }
.panel-header h2 { margin: 0; font-size: .9rem; letter-spacing: -.014em; }
.panel-header p { margin: .22rem 0 0; color: var(--muted); font-size: .65rem; line-height: 1.45; }
.toolbar { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .5rem; }
.toolbar input, .toolbar select, .search-input { width: auto; min-width: 132px; min-height: 36px; }
.checkbox { display: inline-flex !important; align-items: center; gap: .42rem !important; color: var(--muted) !important; font-size: .69rem !important; font-weight: 650 !important; }
.checkbox input { width: 15px !important; min-width: 15px !important; height: 15px; min-height: 15px !important; margin: 0; accent-color: var(--brand); }

.client-cards { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .72rem; }
.client-card { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(180deg, #fff, #fafafb); padding: .85rem; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.client-card:hover { transform: translateY(-2px); border-color: #bcbfc7; box-shadow: 0 12px 24px rgba(31,35,45,.09); }
.client-card-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.client-card h3 { overflow: hidden; margin: 0; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.client-card p { overflow: hidden; margin: .42rem 0 .65rem; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.client-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.client-quick span { display: block; padding: .42rem .5rem; border: 1px solid #e8e9ed; border-radius: 5px; background: #fff; color: var(--muted); font-size: .61rem; }
.client-quick strong { display: block; margin-top: .12rem; color: var(--ink); font-size: .68rem; }
.client-open { margin-top: .62rem; }

.activity-list { display: grid; min-width: 0; gap: .52rem; }
.activity-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem .76rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.activity-item > div { min-width: 0; }
.activity-item strong, .activity-item span, .activity-item time { display: block; }
.activity-item strong { overflow: hidden; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-item span { overflow: hidden; margin-top: .18rem; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.activity-item time { margin-top: .22rem; color: #9a9fa8; font-size: .57rem; text-align: right; }

.operations-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-bottom: .85rem; }
.operation-summary-card { border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); padding: .72rem .78rem; }
.operation-summary-card span, .operation-summary-card strong { display: block; }
.operation-summary-card span { color: var(--muted); font-size: .61rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.operation-summary-card strong { margin-top: .22rem; font-size: 1.25rem; }

.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { padding: .68rem .7rem; border-bottom: 1px solid #e8e9ed; color: #444a55; font-size: .68rem; text-align: left; vertical-align: middle; }
th { position: sticky; z-index: 1; top: 0; background: #f6f6f8; color: #737985; font-size: .59rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafafb; }
td strong { color: var(--ink); font-size: .71rem; }
td small { color: var(--muted); font-size: .58rem; }
.table-actions { display: flex; flex-wrap: wrap; gap: .34rem; }
.table-actions .button { min-height: 30px; padding: .4rem .58rem; font-size: .64rem; }

.badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px; padding: .26rem .5rem; background: #eef0f3; color: #555c68; font-size: .58rem; font-weight: 800; line-height: 1; text-transform: capitalize; }
.badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; opacity: .75; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-error, .badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warning { background: var(--warning-soft); color: #a96a0c; }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-running { background: var(--info-soft); color: var(--info); }
.badge-queued { background: var(--warning-soft); color: #a96a0c; }
.badge-succeeded, .badge-healthy { background: var(--success-soft); color: var(--success); }
.badge-failed, .badge-interrupted, .badge-unhealthy, .badge-missing { background: var(--danger-soft); color: var(--danger); }

.progress { width: 100%; min-width: 78px; max-width: 150px; height: 6px; overflow: hidden; border-radius: 999px; background: #e8e9ed; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #f05cac); }

.action-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .52rem; margin-bottom: .9rem; }
.detail-tabs { display: flex; overflow-x: auto; gap: 0; border-bottom: 1px solid var(--line); }
.detail-tab { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; padding: .66rem .8rem; font-size: .68rem; font-weight: 740; }
.detail-tab.active { border-bottom-color: var(--brand); color: var(--brand); }
.detail-content { padding-top: .85rem; }
.key-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem; }
.key-value { min-width: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); padding: .66rem .72rem; }
.key-value span, .key-value strong { display: block; }
.key-value span { color: var(--muted); font-size: .59rem; font-weight: 720; text-transform: uppercase; letter-spacing: .055em; }
.key-value strong { overflow-wrap: anywhere; margin-top: .22rem; font-size: .73rem; }

.monitoring-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .65rem; margin-bottom: .85rem; }
.monitor-card { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: linear-gradient(180deg, #fff, #fafafb); padding: .74rem; }
.monitor-card span, .monitor-card strong, .monitor-card small { display: block; }
.monitor-card span { color: var(--muted); font-size: .58rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.monitor-card strong { overflow: hidden; margin-top: .23rem; font-size: .95rem; text-overflow: ellipsis; white-space: nowrap; }
.monitor-card small { margin-top: .22rem; color: #989ea8; font-size: .56rem; }

.terminal { width: 100%; min-height: 150px; max-width: 100%; overflow: auto; margin: 0; border: 1px solid #151a21; border-radius: 7px; background: #1d2128; color: #d8dce3; padding: .9rem; font: .67rem/1.58 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
.terminal.tall { min-height: 380px; max-height: 68vh; }

.form-grid { display: grid; gap: .75rem; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid textarea { min-height: 105px; resize: vertical; }

.alert { margin-bottom: .85rem; border: 1px solid #cbd8ec; border-radius: 7px; background: var(--info-soft); color: #2f5f9f; padding: .72rem .82rem; font-size: .71rem; line-height: 1.45; }
.alert-error { border-color: #f1c8cd; background: var(--danger-soft); color: #a82f3c; }
.alert-success { border-color: #c3e8d3; background: var(--success-soft); color: #247d50; }
.empty-state { display: grid; min-height: 92px; place-items: center; border: 1px dashed #ccd0d8; border-radius: 7px; background: #fafafb; color: #9298a2; padding: 1rem; font-size: .69rem; text-align: center; }

.modal { width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; border: 0; border-radius: 12px; background: #fff; padding: 1.05rem; color: var(--ink); box-shadow: 0 30px 90px rgba(0,0,0,.30); }
.modal::backdrop { background: rgba(20,22,28,.62); backdrop-filter: blur(3px); }
.modal.compact { width: min(480px, calc(100vw - 2rem)); }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.modal-header h2 { margin: 0; font-size: 1.05rem; }
.modal-header p { margin: .26rem 0 0; color: var(--muted); font-size: .67rem; line-height: 1.45; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.access-modal { width: min(980px, calc(100vw - 2rem)); }
.access-summary { margin-bottom: .85rem; }
.access-summary small { color: var(--muted); font-size: .58rem; }
.capability-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .8rem 0 .6rem; }
.capability-toolbar strong { font-size: .78rem; }
.capability-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .55rem; max-height: 46vh; overflow: auto; padding: .15rem; }
.capability-item { display: grid; gap: .48rem; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-soft); padding: .65rem; }
.capability-item strong { font-size: .69rem; }
.capability-default { color: var(--muted); font-size: .57rem; }
.capability-choice { display: flex; flex-wrap: wrap; gap: .42rem; }
.capability-choice label { display: inline-flex; align-items: center; gap: .28rem; color: var(--muted); font-size: .58rem; font-weight: 650; }

.chat-window { display: grid; align-content: start; gap: .65rem; min-height: 360px; max-height: 58vh; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: #fafafb; padding: .8rem; }
.chat-message { max-width: 86%; border-radius: 8px; background: #fff; padding: .68rem .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.07); font-size: .7rem; line-height: 1.55; white-space: pre-wrap; }
.chat-message.user { justify-self: end; background: var(--brand-soft); }
.chat-form { display: grid; gap: .55rem; margin-top: .7rem; }
.chat-form textarea { min-height: 100px; border: 1px solid var(--line-strong); border-radius: 7px; padding: .7rem; resize: vertical; }
.chat-form > div { display: flex; flex-wrap: wrap; gap: .42rem; }
.ai-conversation { cursor: pointer; }

/* JS action hook classes intentionally inherit button styles. */
.restore-backup, .deployment-details, .deployment-rollback, .build-details,
.git-amend, .git-branch, .git-build, .git-cherry, .git-commit, .git-deploy,
.git-diff, .git-history, .git-merge, .git-pull, .git-rebase, .git-release,
.git-remote, .git-revert, .git-secret, .git-signature, .git-status, .git-tag,
.notification-delete, .notification-test, .notification-toggle,
.schedule-delete, .schedule-run, .server-check, .session-revoke,
.user-access, .user-delete, .user-toggle, .infra-action, .task-details {
  white-space: nowrap;
}

@media (max-width: 1280px) {
  :root { --sidebar-width: 226px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid.two-thirds { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); }
}

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }
  .login-brand { display: none; }
  .mobile-brand { display: block; }
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay { position: fixed; z-index: 45; inset: 0; display: block; background: rgba(20,22,28,.48); }
  .main-content { width: 100%; margin-left: 0; padding-inline: .9rem; }
  .topbar { margin-inline: -.9rem; padding-inline: .9rem; }
  .mobile-menu-button { display: inline-grid; }
  .content-grid.two-thirds, .content-grid.half { grid-template-columns: 1fr; }
  .system-state { display: none; }
}

@media (max-width: 720px) {
  .topbar { min-height: 64px; align-items: center; }
  .topbar .eyebrow { display: none; }
  .topbar h1 { font-size: 1.2rem; }
  .topbar-actions { gap: .3rem; }
  .topbar-actions .button { min-height: 34px; padding: .45rem .58rem; font-size: .67rem; }
  .user-chip { min-width: 0; padding: .36rem .5rem; }
  .metric-grid, .operations-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: .78rem; }
  .panel-header { flex-direction: column; align-items: stretch; }
  .panel-header .toolbar { width: 100%; }
  .panel-header .toolbar > * { flex: 1 1 140px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .login-feature-grid { grid-template-columns: 1fr; }
  .modal { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); padding: .85rem; }
}

@media (max-width: 480px) {
  .main-content { padding-inline: .65rem; }
  .topbar { margin-inline: -.65rem; padding-inline: .65rem; }
  .topbar-actions #refresh-button { display: none; }
  .metric-grid, .operations-summary { grid-template-columns: 1fr; }
  .metric-card { min-height: 98px; }
  .toolbar > *, .toolbar input, .toolbar select, .search-input { width: 100%; min-width: 100%; }
  .client-cards { grid-template-columns: 1fr; }
  .login-card-wrap { padding: .8rem; }
  .login-card { padding: 1.35rem; border-radius: 12px; }
}

/* v1.7 client provisioning */
.provision-modal { width: min(920px, calc(100vw - 2rem)); padding: 0; overflow: hidden; }
.provision-modal form { max-height: calc(100vh - 2rem); overflow: auto; padding: 1.15rem; }
.provision-modal .eyebrow { display: block; margin-bottom: .34rem; color: var(--brand); font-size: .6rem; font-weight: 850; letter-spacing: .16em; }
.provision-grid { display: grid; gap: .8rem; }
.provision-section { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, #fff, #fbfbfd); padding: .9rem; }
.provision-step { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; }
.provision-step > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: var(--brand); color: #fff; font-size: .68rem; font-weight: 850; box-shadow: 0 7px 18px rgba(217, 0, 116, .18); }
.provision-step strong { display: block; font-size: .78rem; }
.provision-step small, .provision-section label small { display: block; margin-top: .18rem; color: var(--muted); font-size: .61rem; font-weight: 560; line-height: 1.4; }
.domain-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-bottom: .75rem; }
.choice-card { display: flex !important; grid-template-columns: none !important; align-items: flex-start; gap: .55rem !important; border: 1px solid var(--line); border-radius: 9px; padding: .72rem; cursor: pointer; background: #fff; transition: border-color .18s, box-shadow .18s, transform .18s; }
.choice-card:hover, .choice-card.active { border-color: rgba(217, 0, 116, .48); box-shadow: 0 8px 24px rgba(38, 32, 48, .08); transform: translateY(-1px); }
.choice-card input { min-height: auto !important; width: auto !important; margin-top: .12rem; accent-color: var(--brand); }
.choice-card strong { display: block; color: var(--ink); font-size: .72rem; }
.choice-card small { margin-top: .18rem; }
.domain-preview { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .65rem; border: 1px dashed #d5c8d0; border-radius: 8px; background: #fff7fb; padding: .62rem .72rem; }
.domain-preview span { color: var(--muted); font-size: .63rem; font-weight: 700; }
.domain-preview strong { color: #7c184e; font-size: .7rem; overflow-wrap: anywhere; }
.automation-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.switch-row { display: flex !important; align-items: center; justify-content: space-between; gap: .8rem !important; border: 1px solid var(--line); border-radius: 9px; background: #fff; padding: .65rem .72rem; }
.switch-row span { min-width: 0; }
.switch-row strong { display: block; color: var(--ink); font-size: .7rem; }
.switch-row input { width: 34px !important; min-width: 34px !important; height: 19px !important; min-height: 19px !important; appearance: none; border: 0 !important; border-radius: 999px; background: #cdd2dc; padding: 2px; cursor: pointer; transition: background .18s; }
.switch-row input::before { content: ""; display: block; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .18s; }
.switch-row input:checked { background: var(--brand); }
.switch-row input:checked::before { transform: translateX(15px); }
.preflight-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .8rem; border: 1px solid #d8dce5; border-radius: 10px; background: #f8f9fc; padding: .72rem .82rem; }
.preflight-box strong { display: block; color: var(--ink); font-size: .7rem; }
.preflight-box span { display: block; margin-top: .2rem; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.preflight-box.ready { border-color: #b7dfca; background: #f2fbf6; }
.preflight-box.warning { border-color: #f1d29b; background: #fff9ee; }
.preflight-box.error { border-color: #efbbc3; background: #fff4f6; }
.preflight-checks { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .38rem; }
.preflight-check { border-radius: 999px; background: rgba(20, 25, 35, .06); padding: .2rem .42rem; font-size: .56rem; font-weight: 750; }

@media (max-width: 720px) {
  .domain-mode-grid, .automation-options { grid-template-columns: 1fr; }
  .preflight-box { align-items: stretch; flex-direction: column; }
  .preflight-box .button { width: 100%; }
}

/* v1.8 GitHub App provisioning */
.github-connection-card,
.github-inline-status,
.managed-ssl-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: .78rem .85rem;
}
.github-connection-card { margin-bottom: .75rem; }
.github-connection-card > div,
.github-inline-status > div,
.managed-ssl-note { min-width: 0; }
.github-connection-card strong,
.github-connection-card span,
.github-inline-status strong,
.github-inline-status span,
.managed-ssl-note strong,
.managed-ssl-note small { display: block; }
.github-connection-card strong,
.github-inline-status strong,
.managed-ssl-note strong { color: var(--ink); font-size: .72rem; }
.github-connection-card span,
.github-inline-status span,
.managed-ssl-note small { margin-top: .2rem; color: var(--muted); font-size: .61rem; font-weight: 560; line-height: 1.45; }
.github-connection-card.connected,
.github-inline-status.connected { border-color: #b8dfca; background: linear-gradient(180deg, #f7fcf9, #eff9f3); }
.github-connection-card.disconnected,
.github-inline-status.disconnected { border-color: #efd39f; background: linear-gradient(180deg, #fffcf6, #fff7e8); }
.github-inline-status { grid-column: 1 / -1; }
.github-connect-form { margin-top: .7rem; }
.github-connect-form .toolbar,
.github-source-actions { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
.github-source-actions { grid-column: 1 / -1; justify-content: space-between; padding: .68rem; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); }
.github-source-actions label { flex: 1 1 260px; }
.github-source-actions .button { flex: 0 0 auto; }
.github-repository-fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .68rem; border: 1px solid #ead4e1; border-radius: 10px; background: linear-gradient(180deg, #fff, #fffafd); padding: .78rem; }
.form-span-two { grid-column: 1 / -1; }
.managed-ssl-note { align-items: flex-start; justify-content: flex-start; }
.managed-ssl-note::before { flex: 0 0 auto; color: var(--success); content: "✓"; font-size: .85rem; font-weight: 900; }
.compact-list { display: grid; gap: .45rem; margin-top: .75rem; }
.legacy-git-panel { padding: 0; overflow: hidden; }
.legacy-git-panel > summary { cursor: pointer; padding: .82rem .95rem; color: #555c68; font-size: .72rem; font-weight: 760; list-style-position: inside; }
.legacy-git-panel[open] > summary { border-bottom: 1px solid var(--line); background: var(--panel-soft); }
.legacy-git-form { padding: .9rem; }

@media (max-width: 720px) {
  .github-connection-card,
  .github-inline-status { align-items: flex-start; flex-direction: column; }
  .github-source-actions { align-items: stretch; flex-direction: column; }
  .github-source-actions .button { width: 100%; }
  .github-repository-fields { grid-template-columns: 1fr; }
  .form-span-two { grid-column: auto; }
}

/* v1.9.0 environment delivery pipeline */
.environment-pipeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.environment-pipeline-header h3,
.promotion-history h3 { margin: .15rem 0 .35rem; }
.environment-pipeline-header p { margin: 0; color: var(--muted, #687386); }
.environment-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.environment-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--border, #d8dee8);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(27, 35, 48, .06);
  overflow: hidden;
}
.environment-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: #718096;
}
.environment-production::before { background: #18a058; }
.environment-staging::before { background: #e09f26; }
.environment-development::before { background: #dc0078; }
.environment-card-head,
.environment-actions,
.environment-branch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.environment-card-head h3 { margin: .15rem 0 0; font-size: 1.05rem; }
.environment-type {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .67rem;
  font-weight: 800;
  color: var(--muted, #687386);
}
.environment-branch {
  padding: .7rem .8rem;
  border-radius: 10px;
  background: #f7f8fb;
  border: 1px solid #e5e9f0;
}
.environment-branch span { color: var(--muted, #687386); font-size: .75rem; }
.environment-branch strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; overflow-wrap: anywhere; }
.environment-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin: 0;
}
.environment-meta div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: .6rem;
  align-items: baseline;
}
.environment-meta dt { color: var(--muted, #687386); font-size: .75rem; }
.environment-meta dd { margin: 0; font-size: .8rem; overflow-wrap: anywhere; }
.environment-meta a { color: inherit; text-decoration: none; }
.environment-meta a:hover { text-decoration: underline; }
.environment-actions { margin-top: auto; flex-wrap: wrap; justify-content: flex-start; }
.promotion-history { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border, #d8dee8); }
@media (max-width: 760px) {
  .environment-pipeline-header { flex-direction: column; }
  .environment-pipeline-header .toolbar { width: 100%; }
  .environment-pipeline-header .button { flex: 1; }
  .environment-meta div { grid-template-columns: 76px minmax(0, 1fr); }
}

/* v1.9.3 environment form and live operation console */
.environment-modal {
  width: min(980px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: hidden;
}
.environment-modal form { max-height: calc(100vh - 2rem); overflow: auto; padding: 1.15rem; }
.environment-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.environment-form-section {
  display: grid;
  gap: .8rem;
  padding: .9rem;
  border: 1px solid var(--line, #d8dee8);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff, #fffafd);
}
.environment-options-section { grid-column: 1 / -1; }
.environment-domain-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 52px;
  padding: .72rem .82rem;
  border: 1px dashed #e9afcf;
  border-radius: 10px;
  background: #fff8fc;
}
.environment-domain-preview span { color: var(--muted, #687386); font-size: .72rem; font-weight: 700; }
.environment-domain-preview a { color: var(--brand, #dc0078); font-size: .78rem; font-weight: 780; overflow-wrap: anywhere; text-align: right; }
.environment-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .85rem;
  padding: .75rem;
  border: 1px solid var(--line, #d8dee8);
  border-radius: 12px;
  background: #f7f8fb;
}
.environment-summary div { min-width: 0; }
.environment-summary span { display: block; color: var(--muted, #687386); font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }
.environment-summary strong { display: block; margin-top: .25rem; font-size: .76rem; overflow-wrap: anywhere; }
.task-progress-modal { width: min(860px, calc(100vw - 2rem)); padding: 1.1rem; }
.task-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0; }
.task-progress-bar { height: 10px; margin-bottom: .75rem; }
.task-progress-log { min-height: 300px; max-height: min(52vh, 520px); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .environment-form-grid { grid-template-columns: 1fr; }
  .environment-options-section { grid-column: auto; }
  .environment-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .environment-domain-preview { align-items: flex-start; flex-direction: column; }
  .environment-domain-preview a { text-align: left; }
}
@media (max-width: 520px) {
  .environment-summary { grid-template-columns: 1fr; }
}

/* v1.9.4 project log console */
.client-log-console {
  display: grid;
  gap: 0;
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #303744;
  border-radius: 12px;
  background: #171b22;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.client-log-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, .9fr) minmax(120px, .65fr) minmax(220px, 1.5fr) minmax(90px, .5fr) auto;
  gap: .65rem;
  align-items: end;
  padding: .8rem;
  border-bottom: 1px solid #303744;
  background: #252b35;
}
.client-log-toolbar label { display: grid; gap: .3rem; min-width: 0; }
.client-log-toolbar label > span {
  color: #aeb7c5;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.client-log-toolbar input,
.client-log-toolbar select {
  min-height: 38px;
  width: 100%;
  color: #eef2f7;
  border: 1px solid #46505e;
  border-radius: 7px;
  outline: none;
  background: #181d25;
}
.client-log-toolbar input:focus,
.client-log-toolbar select:focus { border-color: #dc0078; box-shadow: 0 0 0 2px rgba(220,0,120,.18); }
.client-log-actions { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.client-log-actions .button { min-height: 38px; white-space: nowrap; }
.client-log-meta {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  min-height: 38px;
  padding: .45rem .8rem;
  color: #93a0b1;
  border-bottom: 1px solid #303744;
  background: #1d222b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .69rem;
}
.client-log-meta > span:not(:last-child)::after {
  content: "•";
  margin-left: .7rem;
  color: #596475;
}
.log-status { display: inline-flex; align-items: center; gap: .4rem; font-family: inherit; font-weight: 750; }
.log-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8b96a5; }
.log-status-live { color: #62d394; }
.log-status-live::before, .live-dot { background: #36c778; box-shadow: 0 0 0 4px rgba(54,199,120,.13); }
.log-status-paused { color: #f2bd63; }
.log-status-paused::before { background: #f2bd63; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: .3rem; border-radius: 50%; animation: log-live-pulse 1.8s ease-in-out infinite; }
@keyframes log-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.log-terminal {
  height: min(65vh, 720px);
  min-height: 470px;
  overflow: auto;
  background: #11151b;
  color: #d8dee9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.62;
  overscroll-behavior: contain;
  scrollbar-color: #4a5360 #171b22;
}
.log-line { display: grid; grid-template-columns: 56px minmax(0, 1fr); min-height: 20px; border-bottom: 1px solid rgba(255,255,255,.018); }
.log-line:hover { background: rgba(255,255,255,.035); }
.log-line-number {
  padding: 0 .7rem 0 .35rem;
  color: #505967;
  text-align: right;
  user-select: none;
  border-right: 1px solid rgba(255,255,255,.04);
}
.log-line-text { min-width: 0; padding: 0 .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-line.log-error .log-line-text { color: #ff7777; background: rgba(195,52,52,.08); }
.log-line.log-warning .log-line-text { color: #f4bd65; }
.log-line.log-info .log-line-text { color: #8fd1ff; }
.log-line.log-debug .log-line-text { color: #9aa4b4; }
.log-line.log-success .log-line-text { color: #69d59a; }
.log-empty { display: grid; min-height: 100%; place-items: center; padding: 2rem; color: #7e8998; text-align: center; }
.log-empty.log-error { color: #ff7777; }
@media (max-width: 1100px) {
  .client-log-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client-log-search, .client-log-actions { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .client-log-toolbar { grid-template-columns: 1fr; }
  .client-log-search, .client-log-actions { grid-column: auto; }
  .client-log-actions .button { flex: 1; }
  .client-log-meta { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .client-log-meta > span:not(:last-child)::after { display: none; }
  .log-line { grid-template-columns: 42px minmax(0, 1fr); }
  .log-terminal { min-height: 400px; }
}

/* v1.11.0 global CI/CD commit delivery */
.commit-dashboard-panel { min-height: 520px; }
.commit-dashboard { display: grid; gap: 22px; }
.commit-group { border: 1px solid var(--border, #d9dee8); border-radius: 14px; background: #fff; overflow: hidden; }
.commit-group-head, .client-commit-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border, #e1e5ec); }
.commit-group-head h3, .client-commit-header h3 { margin: 2px 0 0; }
.commit-group-head > span { color: var(--muted, #6b7280); font-size: 12px; }
.live-indicator, .commit-live-tag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 12px; color: #0f8a53; font-weight: 700; }
.commit-timeline { padding: 8px 20px 20px; }
.commit-card { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.commit-card + .commit-card { margin-top: 4px; }
.commit-rail { position: relative; }
.commit-rail::before { content: ""; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: #dce2eb; }
.commit-rail span { position: absolute; top: 28px; left: 7px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fff; background: #8792a2; box-shadow: 0 0 0 2px #cbd3df; z-index: 1; }
.commit-succeeded .commit-rail span { background: #1aa867; box-shadow: 0 0 0 2px #bce8d2; }
.commit-running .commit-rail span, .commit-queued .commit-rail span { background: #2f78df; box-shadow: 0 0 0 2px #c9dcfb; }
.commit-failed .commit-rail span { background: #d94654; box-shadow: 0 0 0 2px #f4c7cc; }
.commit-card-body { margin: 10px 0; padding: 16px 18px; border: 1px solid #dfe4ec; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(22, 30, 48, .04); }
.commit-card-head, .commit-message, .commit-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.commit-environment { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.commit-environment > span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #7a486e; font-weight: 800; }
.commit-environment code, .commit-message code { font-size: 11px; padding: 3px 7px; border-radius: 6px; background: #f1f3f7; color: #485166; }
.commit-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.commit-message { margin-top: 12px; align-items: flex-start; }
.commit-message strong { font-size: 14px; line-height: 1.4; }
.commit-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 9px; color: #6c7484; font-size: 11px; }
.commit-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.commit-flow span { position: relative; padding: 5px 9px; border-radius: 999px; background: #f1f3f7; color: #7b8493; font-size: 10px; font-weight: 700; }
.commit-flow span.done { background: #e5f7ee; color: #147a4b; }
.commit-flow span.warning { background: var(--warning-soft); color: #9a6100; }
.commit-flow span:not(:last-child)::after { content: "›"; position: absolute; right: -7px; color: #a7afbc; }
.commit-warning { margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: var(--warning-soft); color: #8a5a08; border: 1px solid #f1d29b; font-size: 12px; line-height: 1.5; }
.commit-error { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #fff0f1; color: #a62f3a; font-size: 12px; white-space: pre-wrap; }
.commit-runtime { margin-top: 13px; padding: 11px 12px; border: 1px solid #dfe5ee; border-radius: 9px; background: #fafbfd; }
.commit-runtime.is-active { border-color: #bfd5f5; background: #f7fbff; }
.commit-runtime-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.commit-runtime-head strong { min-width: 0; overflow-wrap: anywhere; }
.commit-runtime-head > span { font-variant-numeric: tabular-nums; font-weight: 800; color: #345d94; }
.commit-progress-track { width: 100%; height: 8px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #e6eaf0; }
.commit-progress-track > span { display: block; min-width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4386e6, #22a66f); transition: width .35s ease; }
.commit-runtime-meta { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 8px; color: #737c8d; font-size: 10px; }
.commit-wait-reason { margin-top: 8px; padding: 8px 10px; border-radius: 7px; background: #fff8df; color: #805d00; font-size: 11px; line-height: 1.45; }
.commit-live-panel { margin-top: 12px; padding: 12px; border: 1px solid #dce3ed; border-radius: 10px; background: #fbfcfe; }
.commit-live-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.commit-live-stat { min-width: 0; padding: 9px 10px; border: 1px solid #e4e8ef; border-radius: 8px; background: #fff; }
.commit-live-stat span { display: block; margin-bottom: 3px; color: #7a8494; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.commit-live-stat strong { display: block; overflow-wrap: anywhere; color: #2e3746; font-size: 11px; }
.commit-live-section { margin-top: 12px; }
.commit-live-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 11px; }
.commit-live-section-head span { color: #798393; }
.commit-live-step { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 8px; padding: 7px 0; }
.commit-live-step + .commit-live-step { border-top: 1px dashed #e0e5ec; }
.commit-live-step-dot { width: 9px; height: 9px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: #8b95a4; box-shadow: 0 0 0 2px #d7dde6; }
.commit-live-step.step-running .commit-live-step-dot { background: #2f78df; box-shadow: 0 0 0 2px #c9dcfb; }
.commit-live-step.step-succeeded .commit-live-step-dot { background: #1aa867; box-shadow: 0 0 0 2px #bce8d2; }
.commit-live-step.step-failed .commit-live-step-dot { background: #d94654; box-shadow: 0 0 0 2px #f4c7cc; }
.commit-live-step strong { display: block; color: #303949; font-size: 11px; }
.commit-live-step small { display: block; margin-top: 2px; color: #7a8494; font-size: 10px; }
.commit-live-log { max-height: 220px; margin: 0; padding: 10px; overflow: auto; border-radius: 8px; background: #151a22; color: #d9e1ec; font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.commit-live-empty { padding: 10px; color: #7d8695; font-size: 11px; text-align: center; }
.commit-live-error { color: #a62f3a; }
.commit-actions { margin-top: 14px; justify-content: flex-end; flex-wrap: wrap; }
.client-commit-header { margin-bottom: 10px; padding: 4px 0 16px; }
.client-commit-header p { margin: 4px 0 0; color: #737b8b; }
@media (max-width: 760px) {
  .commit-group-head, .client-commit-header, .commit-card-head, .commit-message { align-items: flex-start; flex-direction: column; }
  .commit-state, .commit-actions { justify-content: flex-start; }
  .commit-live-grid { grid-template-columns: 1fr 1fr; }
  .commit-timeline { padding-left: 10px; padding-right: 10px; }
  .commit-card { grid-template-columns: 20px minmax(0, 1fr); }
  .commit-rail::before { left: 9px; }
  .commit-rail span { left: 3px; }
}
.github-permission-ok { color: #15804f; font-weight: 700; }
.github-permission-warning { color: #b56a00; font-weight: 700; }

/* v1.11.0 nightly backup and isolated recovery */
.recovery-modal { width: min(960px, calc(100vw - 2rem)); padding: 0; overflow: hidden; }
.recovery-modal form { max-height: calc(100vh - 2rem); overflow: auto; padding: 1.15rem; }
.recovery-grid { display: grid; gap: .8rem; }
.recovery-grid .provision-section { margin: 0; }
.recovery-modal .domain-preview a { color: var(--brand); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.recovery-modal > form > label { margin-top: .9rem; }
.badge-warning { background: #fff1d6; color: #9a6100; }
.environment-recovery { border-color: #d5b7dc; background: linear-gradient(180deg, #fff, #fbf6fc); }
.environment-recovery .environment-type { color: #7d3d86; }
@media (max-width: 700px) {
  .recovery-modal { width: calc(100vw - 1rem); }
}

/* v1.12 production governance and immutable releases */
.governance-card {
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 18px;
  background: var(--panel-bg, #fff);
}
.governance-state { min-height: 42px; display: flex; align-items: center; }
#view-approvals .badge-warning, #view-releases .badge-warning { white-space: nowrap; }

.badge-critical,.badge-unhealthy,.badge-error{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.badge-warning,.badge-degraded{background:#fef3c7;color:#92400e;border-color:#fde68a}
#monitoring-alerts .activity-item{align-items:flex-start}
#monitoring-alerts .activity-item>div:last-child{display:flex;gap:.5rem;align-items:center}

/* v1.14 GitHub SSO and managed secrets */
.button-github {
  background: #24292f;
  border-color: #24292f;
  color: #fff;
  text-decoration: none;
  justify-content: center;
  gap: .65rem;
}
.button-github:hover { background: #111820; border-color: #111820; color: #fff; }
.github-mark {
  display: inline-grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: rgba(255,255,255,.13);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.login-divider { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; color: var(--muted); font-size: .75rem; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.login-divider span { white-space: nowrap; }
.workspace-chip { display: inline-flex; align-items: center; gap: .45rem; max-width: 260px; }
.workspace-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.secret-mask { letter-spacing: .12em; font-family: monospace; }

/* v1.14.2 project-scoped Odoo.sh-style terminal */
.project-terminal-shell {
  overflow: hidden;
  border: 1px solid #292d33;
  border-radius: 10px;
  background: #050607;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.project-terminal-tabbar {
  min-height: 42px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: #1b1d21;
  border-bottom: 1px solid #30343a;
  color: #d7d9dd;
}
.project-terminal-tab {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 180px;
  padding: 0 1rem;
  border-right: 1px solid #30343a;
  background: #090a0c;
  font: 600 .78rem/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.project-terminal-context {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  font-size: .72rem;
  color: #939aa4;
}
.terminal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #56d364;
  box-shadow: 0 0 0 3px rgba(86,211,100,.12);
}
.project-terminal-screen {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  background: #000;
  color: #e7e7e7;
}
.project-terminal-output {
  flex: 1;
  min-height: 480px;
  max-height: 70vh;
  overflow: auto;
  padding: 1rem 1.15rem .5rem;
  scrollbar-color: #40454d #08090a;
  font: .78rem/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.project-terminal-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0 0 .25rem;
}
.project-terminal-line.terminal-welcome {
  color: #e7e7e7;
}
.project-terminal-line.terminal-welcome::first-line {
  color: #a875b4;
  font-size: 1.25rem;
  font-weight: 800;
}
.project-terminal-line.terminal-command { color: #ff665f; font-weight: 650; }
.project-terminal-line.terminal-output { color: #d8dee9; }
.project-terminal-line.terminal-system { color: #58a6ff; }
.project-terminal-line.terminal-warning { color: #e3b341; }
.project-terminal-line.terminal-error { color: #ff7b72; }
.project-terminal-input-row {
  display: grid;
  grid-template-columns: max-content minmax(120px, 1fr) auto;
  align-items: end;
  gap: .65rem;
  padding: .7rem 1rem .9rem;
  border-top: 1px solid #16181b;
  background: #050607;
}
.project-terminal-prompt {
  padding: .62rem 0;
  color: #ff4f46;
  font: 700 .78rem/1.35 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}
.project-terminal-input-row textarea {
  width: 100%;
  min-height: 40px;
  max-height: 180px;
  resize: vertical;
  border: 0;
  border-bottom: 1px solid #343940;
  border-radius: 0;
  background: transparent;
  color: #f0f2f4;
  outline: 0;
  padding: .55rem .2rem;
  font: .8rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.project-terminal-input-row textarea:focus { border-bottom-color: #a875b4; box-shadow: none; }
.project-terminal-input-row textarea::placeholder { color: #68707a; }
.project-terminal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .65rem .9rem;
  background: #111317;
  border-top: 1px solid #292d33;
  color: #818894;
  font-size: .66rem;
}
.project-terminal-shortcuts { display: flex; flex-wrap: wrap; gap: .35rem; }
.terminal-shortcut {
  border: 1px solid #373c44;
  border-radius: 5px;
  background: #1b1e23;
  color: #c7ccd3;
  padding: .28rem .48rem;
  cursor: pointer;
  font: .64rem/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.terminal-shortcut:hover:not(:disabled) { border-color: #a875b4; color: #fff; }
.terminal-shortcut:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 850px) {
  .project-terminal-context { display: none; }
  .project-terminal-screen { min-height: 470px; }
  .project-terminal-output { min-height: 390px; max-height: 65vh; font-size: .7rem; }
  .project-terminal-input-row { grid-template-columns: 1fr auto; }
  .project-terminal-prompt { grid-column: 1 / -1; padding-bottom: 0; white-space: normal; }
  .project-terminal-footer { align-items: flex-start; flex-direction: column; }
}

/* v1.15 pull-request preview dashboard */
.preview-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
@media (max-width: 1000px) {
  .preview-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .preview-summary-grid { grid-template-columns: 1fr; }
}

/* v1.15.5: tenant users see only their scoped repository panel. */
.content-grid.single-column { grid-template-columns: minmax(0, 1fr); }

/* v1.17.4 governance immediate-save hardening */
.governance-save-state {
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--muted, #64748b);
}
.governance-card label > small {
  display: block;
  margin-top: 6px;
  line-height: 1.45;
  color: var(--muted, #64748b);
}

/* v1.18.0 large database import */
.database-upload-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.database-upload-choice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--border, #d9dee8);
  border-radius: 10px;
  background: var(--surface, #fff);
  cursor: pointer;
}
.database-upload-choice input { margin-top: 3px; }
.database-upload-choice span { display: grid; gap: 3px; }
.database-upload-choice small { color: var(--muted, #64748b); line-height: 1.4; }
.database-upload-panel {
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--border, #d9dee8);
  border-radius: 10px;
  background: var(--surface-subtle, #f8fafc);
}
.database-upload-panel > label { display: grid; gap: 7px; font-weight: 600; }
.database-upload-panel small { color: var(--muted, #64748b); line-height: 1.45; }
.terminal-command-preview {
  overflow-x: auto;
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #101318;
  color: #f2f5f8;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}
.task-progress-track {
  width: 100%;
  height: 8px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e7eb;
}
.task-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: currentColor;
  transition: width .15s linear;
}
.database-import-ready { margin-top: 14px; }
@media (max-width: 760px) {
  .database-upload-mode { grid-template-columns: 1fr; }
}

/* v1.18.0 free demo server + cloud credit catalog */
.trial-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.trial-page-header h2 { margin: 0; font-size: 1.55rem; letter-spacing: -.035em; }
.trial-page-header > div > p:last-child { max-width: 780px; margin: .45rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.trial-launch-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #fff;
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-sm);
}
.trial-fast-badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  padding: .25rem .55rem;
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .045em;
}
.trial-launch-copy h3 { margin: .62rem 0 .35rem; font-size: 1.04rem; letter-spacing: -.02em; }
.trial-launch-copy > p { max-width: 840px; margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.trial-facts { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .75rem; }
.trial-facts span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: #555d69;
  padding: .3rem .55rem;
  font-size: .59rem;
  font-weight: 720;
}
.trial-launch-actions { display: grid; min-width: 185px; gap: .45rem; justify-items: stretch; }
.trial-launch-actions small { max-width: 240px; color: var(--muted); font-size: .59rem; line-height: 1.35; text-align: center; }
.trial-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1rem 0 .7rem; }
.trial-section-heading h3 { margin: 0; font-size: .94rem; }
.trial-section-heading p { margin: .24rem 0 0; color: var(--muted); font-size: .65rem; line-height: 1.45; }
.cloud-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.cloud-offer-card {
  display: flex;
  min-width: 0;
  min-height: 310px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.cloud-offer-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 26px rgba(31,35,45,.08); }
.cloud-offer-header { display: flex; align-items: center; gap: .72rem; }
.cloud-provider-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--panel-soft);
  color: var(--brand-dark);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.cloud-offer-header > div { min-width: 0; flex: 1; }
.cloud-offer-header h3 { display: inline; margin: 0; font-size: .84rem; }
.cloud-recommended {
  float: right;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  padding: .25rem .47rem;
  font-size: .52rem;
  font-weight: 850;
}
.cloud-offer-card h4 { margin: .9rem 0 .14rem; font-size: 1.18rem; letter-spacing: -.03em; }
.cloud-offer-duration { margin: 0 0 .65rem !important; color: #4f5865 !important; font-weight: 720; }
.cloud-offer-card > p { margin: 0 0 .65rem; color: var(--muted); font-size: .67rem; line-height: 1.48; }
.cloud-plan-note { margin-bottom: .72rem; border-left: 3px solid var(--brand); background: var(--brand-soft); padding: .52rem .62rem; color: #70405d; font-size: .62rem; line-height: 1.45; }
.cloud-terms { margin: auto 0 .75rem; border-top: 1px solid var(--line); padding-top: .62rem; }
.cloud-terms summary { cursor: pointer; color: #4c5360; font-size: .61rem; font-weight: 780; }
.cloud-terms p { margin: .48rem 0 0; color: var(--muted); font-size: .58rem; line-height: 1.5; }
.trial-bottom-grid { margin-top: .9rem; align-items: start; }
.trial-rule-list { display: grid; gap: .72rem; margin: 0; padding: 0; list-style: none; }
.trial-rule-list li { display: grid; gap: .18rem; border-bottom: 1px solid var(--line); padding-bottom: .68rem; }
.trial-rule-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.trial-rule-list strong { font-size: .7rem; }
.trial-rule-list span { color: var(--muted); font-size: .62rem; line-height: 1.45; }
.trial-terms-check { border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: .75rem; }

@media (max-width: 1120px) {
  .cloud-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .trial-page-header { align-items: stretch; flex-direction: column; }
  .trial-launch-card { grid-template-columns: 1fr; }
  .trial-launch-actions { min-width: 0; }
  .cloud-offer-grid { grid-template-columns: 1fr; }
}

/* v1.18.0 multi-demo catalog + edition-aware trial provisioning */
.demo-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1rem;
}
.demo-catalog-card {
  display: flex;
  min-width: 0;
  min-height: 220px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
.demo-catalog-card:hover { border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(31,35,45,.07); }
.demo-catalog-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.demo-catalog-category { display: inline-flex; margin-bottom: .35rem; color: var(--brand-dark); font-size: .56rem; font-weight: 850; letter-spacing: .055em; text-transform: uppercase; }
.demo-catalog-card h3 { margin: 0; font-size: .88rem; }
.demo-catalog-card > p { min-height: 44px; margin: .55rem 0 .75rem; color: var(--muted); font-size: .65rem; line-height: 1.5; }
.demo-catalog-badge { border-radius: 999px; background: var(--success-soft); color: var(--success); padding: .25rem .48rem; font-size: .5rem; font-weight: 850; }
.demo-module-list { display: flex; flex-wrap: wrap; gap: .32rem; margin-bottom: .8rem; }
.demo-module-list span { border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); padding: .24rem .44rem; color: #59606c; font-size: .53rem; font-weight: 700; }
.demo-catalog-card .button { margin-top: auto; }
.trial-source-note { display: grid; gap: .16rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-soft); padding: .68rem .75rem; }
.trial-source-note.active { border-color: rgba(226,0,119,.28); background: var(--brand-soft); }
.trial-source-note strong { font-size: .68rem; }
.trial-source-note span { color: var(--muted); font-size: .6rem; line-height: 1.45; }
.trial-request-panel { margin-top: .9rem; }
.trial-launch-modal { max-width: 760px; }

@media (max-width: 1120px) {
  .demo-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .demo-catalog-grid { grid-template-columns: 1fr; }
}

/* v1.18.0 demo automatic SSL convergence */
.trial-ssl-pending {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  color: var(--muted, #667085);
  font-size: .78rem;
  font-weight: 650;
  white-space: nowrap;
}
.trial-ssl-pending::before {
  content: "";
  width: .45rem;
  height: .45rem;
  border-radius: 999px;
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .14);
}

/* v1.18.0 Advanced Odoo Log Explorer */
.log-explorer-toolbar { align-items: end; flex-wrap: wrap; gap: 12px; }
.log-explorer-toolbar label { display: grid; gap: 6px; min-width: 150px; color: var(--text-muted, #6b7280); font-size: 12px; }
.log-explorer-toolbar input, .log-explorer-toolbar select { min-height: 38px; }
.log-explorer-table code { white-space: nowrap; }
.log-analysis-detail { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border, #e5e7eb); }
.log-analysis-detail h4 { margin: 0 0 10px; }
.log-analysis-detail h5 { margin: 16px 0 6px; }
.log-analysis-detail ul, .log-analysis-detail ol { margin: 6px 0 0; padding-left: 22px; }
.log-explorer-sample { max-height: 420px; overflow: auto; white-space: pre; font-size: 12px; }
.log-ai-result { line-height: 1.55; }

/* v1.18.0 hard-resource metering */
.resource-sparkline {
  display: block;
  width: 100%;
  height: 78px;
  margin: 0.35rem 0;
  opacity: 0.9;
}

/* Public prepaid onboarding ------------------------------------------------ */
.signup-page { min-height: 100vh; background: #f5f3f5; }
.signup-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, .9fr) minmax(560px, 1.35fr); }
.signup-hero { position: sticky; top: 0; align-self: start; min-height: 100vh; padding: 64px clamp(32px,5vw,84px); background: linear-gradient(145deg,#4d3148 0%,#65445e 58%,#7b5b72 100%); color: #fff; display:flex; flex-direction:column; justify-content:center; gap:22px; overflow:hidden; }
.signup-hero h1 { font-size: clamp(34px,4vw,58px); line-height:1.04; max-width:780px; margin:0; letter-spacing:-.03em; }
.signup-hero > p:not(.eyebrow) { max-width:700px; font-size:17px; line-height:1.7; color:rgba(255,255,255,.82); }
.signup-flow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; max-width:680px; }
.signup-flow > div { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:16px; display:flex; align-items:center; gap:12px; }
.signup-flow strong { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.14); font-size:12px; }
.signup-flow span { font-weight:700; }
.signup-form-wrap { padding:42px clamp(24px,5vw,76px); display:flex; align-items:flex-start; justify-content:center; }
.signup-card { width:min(900px,100%); background:#fff; border:1px solid #e5dfe4; border-radius:22px; box-shadow:0 24px 70px rgba(55,36,51,.09); padding:32px; }
.signup-card-header { margin-bottom:24px; }
.signup-card-header h2 { margin:4px 0 8px; font-size:30px; }
.signup-card footer { margin-top:24px; color:#83737f; text-align:center; font-size:12px; }
.signup-grid { display:grid; gap:16px; }
.signup-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.signup-grid.three { grid-template-columns:1.4fr .8fr .9fr; }
.signup-section-title { margin:26px 0 12px; padding-top:18px; border-top:1px solid #eee8ed; font-size:12px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; color:#735c6e; }
.signup-card label { display:flex; flex-direction:column; gap:7px; font-size:13px; font-weight:700; color:#4f414c; }
.signup-card input, .signup-card select { min-height:44px; border:1px solid #d8d0d6; border-radius:10px; padding:10px 12px; background:#fff; color:#2f2730; }
.signup-card input:focus, .signup-card select:focus { border-color:#795d72; box-shadow:0 0 0 3px rgba(101,68,94,.12); outline:none; }
.signup-check-row { display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; }
.signup-check-row label, .signup-terms { flex-direction:row; align-items:flex-start; font-weight:600; }
.signup-check-row input, .signup-terms input { min-height:0; width:auto; margin-top:2px; }
.signup-plan-summary { margin-top:12px; padding:14px 16px; background:#f7f4f7; border:1px solid #e6dfe4; border-radius:12px; display:grid; gap:4px; }
.signup-plan-summary strong { font-size:16px; }
.signup-plan-summary span { color:#5f4b59; font-weight:700; }
.signup-plan-summary small { color:#867680; line-height:1.5; }
.signup-provider-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.signup-provider { flex-direction:row !important; align-items:center !important; padding:14px; border:1px solid #ded5dc; border-radius:12px; cursor:pointer; }
.signup-provider:has(input:checked) { border-color:#65445e; background:#f6f1f5; box-shadow:0 0 0 2px rgba(101,68,94,.08); }
.signup-provider input { min-height:0; width:auto; }
.signup-provider span { display:grid; gap:2px; }
.signup-provider small { color:#8a7985; }
.signup-terms { margin:24px 0 16px; padding:14px; background:#faf8fa; border-radius:10px; }
.signup-status-shell { min-height:100vh; display:grid; place-items:center; padding:32px; }
.signup-status-card { width:min(720px,100%); background:#fff; border:1px solid #e3dce1; border-radius:22px; padding:38px; box-shadow:0 24px 70px rgba(55,36,51,.10); }
.signup-status-card h1 { margin:12px 0 8px; font-size:32px; }
.signup-progress-track { height:10px; background:#eee9ed; border-radius:999px; overflow:hidden; margin:24px 0; }
.signup-progress-bar { width:5%; height:100%; background:linear-gradient(90deg,#65445e,#98758e); transition:width .4s ease; }
.signup-status-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.small { font-size:12px; }
@media (max-width: 980px) {
  .signup-shell { grid-template-columns:1fr; }
  .signup-hero { position:relative; min-height:auto; padding:40px 24px; }
  .signup-form-wrap { padding:24px 16px 48px; }
  .signup-grid.two, .signup-grid.three, .signup-provider-options { grid-template-columns:1fr; }
  .signup-card { padding:24px; }
}

/* v1.18 multi-VPS location deployment */
.location-grid,.location-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}.location-card,.location-choice{border:1px solid var(--border-color,#d8dee9);border-radius:14px;background:var(--panel-bg,#fff);padding:14px;text-align:left;display:flex;flex-direction:column;gap:5px;min-height:86px;cursor:pointer;transition:.18s ease}.location-card strong,.location-choice strong{font-size:14px}.location-card small,.location-choice small{opacity:.72;line-height:1.35}.location-choice:hover,.location-choice.active{border-color:var(--accent,#b98621);box-shadow:0 0 0 2px rgba(185,134,33,.12);transform:translateY(-1px)}.location-card .location-meta{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:auto}.quick-action-modal textarea{min-height:110px;resize:vertical}.provision-modal textarea{width:100%;font:inherit;border:1px solid var(--border-color,#d8dee9);border-radius:9px;padding:10px;background:var(--input-bg,#fff);color:inherit}

/* ========================================================================== */
/* v1.18.0 full-system visual refresh                                          */
/* ========================================================================== */
:root {
  --page-bg: #f5f6f8;
  --panel: #ffffff;
  --panel-soft: #f8f9fb;
  --panel-dark: #28212a;
  --ink: #242128;
  --muted: #77727b;
  --line: #e6e2e7;
  --line-strong: #d5d0d7;
  --sidebar: #2b222c;
  --sidebar-deep: #201921;
  --topbar: #ffffff;
  --topbar-deep: #ffffff;
  --brand-900: #3d2938;
  --brand: #714b67;
  --brand-dark: #5d3d55;
  --brand-soft: #f3edf2;
  --accent: #017e84;
  --accent-soft: #e8f5f5;
  --success: #27895b;
  --success-soft: #eaf7f0;
  --warning: #c98216;
  --warning-soft: #fff5e4;
  --danger: #c74655;
  --danger-soft: #fcedef;
  --info: #3c6fae;
  --info-soft: #edf3fb;
  --radius-sm: 8px;
  --radius: 13px;
  --radius-lg: 19px;
  --shadow-sm: 0 1px 2px rgba(39,30,40,.035), 0 8px 24px rgba(39,30,40,.045);
  --shadow: 0 22px 64px rgba(36,27,37,.15);
}

body { letter-spacing: -.004em; }
.main-content { padding: 0 1.55rem 2.5rem; }
.topbar {
  min-height: 76px;
  margin: 0 -1.55rem 1.3rem;
  padding: .78rem 1.55rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.94);
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(47,35,47,.045);
  backdrop-filter: blur(18px);
}
.topbar h1 { color: var(--ink); font-size: clamp(1.28rem, 2vw, 1.58rem); }
.topbar .eyebrow { color: var(--brand); }
.topbar .button-secondary { border-color: var(--line); background: #fff; color: #49434b; }
.topbar .button-secondary:hover { border-color: var(--line-strong); background: var(--panel-soft); color: var(--ink); }
.topbar .button-ghost { color: var(--muted); }
.topbar .button-ghost:hover { background: var(--brand-soft); color: var(--brand-dark); }
.topbar .system-state { border: 1px solid #dcece4; border-radius: 999px; background: #f4fbf7; padding: .42rem .7rem; color: #3e6f55; }
.user-chip { min-width: 105px; border-color: var(--line); border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(40,31,41,.04); }
.user-chip small { color: var(--brand); }

.sidebar { border-right: 0; background: linear-gradient(180deg, #302531 0%, #211a22 72%, #19141a 100%); box-shadow: 12px 0 32px rgba(26,20,27,.08); }
.sidebar-brand { min-height: 88px; border-bottom-color: rgba(255,255,255,.065); background: linear-gradient(145deg, rgba(113,75,103,.28), rgba(0,0,0,.06)); }
.sidebar nav { padding: .8rem .72rem 1.15rem; }
.nav-item { min-height: 40px; margin: 1px 0; border-radius: 8px; padding: .56rem .72rem; color: #bbb2bc; font-size: .72rem; }
.nav-item::before { width: 19px; height: 19px; display: grid; place-items: center; margin-right: .62rem; border-radius: 6px; background: rgba(255,255,255,.065); color: #cfc5d0; content: "·"; font-size: 1rem; line-height: 1; }
.nav-item:hover { background: rgba(255,255,255,.07); }
.nav-item.active { background: linear-gradient(90deg, rgba(113,75,103,.72), rgba(113,75,103,.30)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.055); }
.nav-item.active::before { background: rgba(255,255,255,.15); color: #fff; box-shadow: none; }
.nav-item[data-view="overview"]::before { content: "⌂"; font-size: .72rem; }
.nav-item[data-view="clients"]::before { content: "◇"; font-size: .72rem; }
.nav-item[data-view="monitoring"]::before { content: "⌁"; font-size: .82rem; }
.nav-item[data-view="deployments"]::before { content: "↗"; font-size: .72rem; }
.nav-item[data-view="git"]::before { content: "⑂"; font-size: .72rem; }
.nav-item[data-view="servers"]::before { content: "◎"; font-size: .76rem; }
.nav-item[data-view="kubernetes"]::before { content: "⬡"; font-size: .68rem; }
.nav-item[data-view="billing"]::before { content: "$"; font-size: .68rem; font-weight: 900; }
.nav-item[data-view="settings"]::before { content: "⚙"; font-size: .7rem; }
.sidebar-footer { background: rgba(0,0,0,.08); }

.button { min-height: 38px; border-radius: 9px; padding: .56rem .86rem; font-weight: 730; box-shadow: none; }
.button-primary { border-color: var(--brand); background: linear-gradient(180deg, #79526f, #68445f); box-shadow: 0 7px 16px rgba(113,75,103,.18); }
.button-primary:hover:not(:disabled) { border-color: var(--brand-dark); background: linear-gradient(180deg, #68445f, #59384f); box-shadow: 0 9px 20px rgba(93,61,85,.22); }
.button-secondary { border-color: var(--line); background: #fff; }
.button-danger { box-shadow: 0 7px 16px rgba(199,70,85,.13); }
.icon-button { border-radius: 9px; }

.metric-grid { gap: 1rem; margin-bottom: 1.15rem; }
.metric-card { min-height: 124px; border-color: var(--line); border-radius: 15px; padding: 1.08rem 1.12rem; box-shadow: var(--shadow-sm); }
.metric-card::after { right: -33px; bottom: -43px; width: 116px; height: 116px; opacity: .72; }
.metric-card span { font-size: .67rem; text-transform: uppercase; letter-spacing: .045em; }
.metric-card strong { margin-top: .48rem; color: #2c2830; font-size: clamp(1.55rem,2.3vw,2rem); }

.panel { margin-bottom: 1.05rem; border-color: var(--line); border-radius: 15px; padding: 1.08rem; box-shadow: var(--shadow-sm); }
.panel-header { min-height: 44px; margin-bottom: 1rem; }
.panel-header h2 { color: #302a32; font-size: .98rem; letter-spacing: -.022em; }
.panel-header h3 { color: #302a32; }
.panel-header p { margin-top: .3rem; font-size: .67rem; line-height: 1.55; }

.client-cards { grid-template-columns: repeat(auto-fill,minmax(245px,1fr)); gap: .9rem; }
.client-card { border-radius: 12px; padding: .95rem; background: linear-gradient(180deg,#fff,#fbfafb); }
.client-card:hover { border-color: #cfc5cd; box-shadow: 0 14px 32px rgba(46,35,47,.09); }
.activity-list { gap: .58rem; }
.activity-item { border-radius: 10px; padding: .76rem .82rem; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.activity-item:hover { border-color: #d4cdd4; background: #fdfcfd; }
.activity-item strong { font-size: .75rem; }
.activity-item span { font-size: .63rem; line-height: 1.45; }

.table-wrap { border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
table { border-collapse: separate; border-spacing: 0; }
thead th { position: sticky; z-index: 2; top: 0; background: #f8f7f9; color: #665f68; font-size: .61rem; letter-spacing: .035em; text-transform: uppercase; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: #fbf8fb; }
td { color: #464048; }

.form-grid label, .modal > label, .access-summary label { color: #55505a; font-weight: 720; }
.login-card input, .form-grid input, .form-grid select, .form-grid textarea, .toolbar input, .toolbar select, .modal input, .modal select, .modal textarea, .search-input {
  min-height: 43px; border-radius: 9px; border-color: #d8d3da; background: #fefefe; padding: .68rem .76rem;
}
input:focus, select:focus, textarea:focus { border-color: #95738d; box-shadow: 0 0 0 4px rgba(113,75,103,.10); }

.modal { border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 1.2rem; box-shadow: 0 32px 100px rgba(22,17,23,.38); }
.modal::backdrop { background: rgba(29,23,30,.66); backdrop-filter: blur(7px); }
.modal-header { margin: -.1rem -.1rem 1rem; padding: .2rem .15rem .9rem; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-size: 1.14rem; letter-spacing: -.025em; }
.modal-header p { max-width: 720px; font-size: .69rem; line-height: 1.6; }
.modal-actions { margin-top: 1.15rem; padding-top: 1rem; }
.provision-modal { border-radius: 20px; }
.provision-modal form { padding: 1.35rem; }
.provision-section { border-radius: 13px !important; border-color: var(--line) !important; background: linear-gradient(180deg,#fff,#fbfafc) !important; }
.provision-step > span { background: var(--brand-soft) !important; color: var(--brand-dark) !important; box-shadow: inset 0 0 0 1px rgba(113,75,103,.12); }
.switch-row, .choice-card { border-radius: 11px !important; }
.choice-card.active { border-color: #a987a0 !important; background: var(--brand-soft) !important; }

/* Odoo.sh-inspired deployment fabric */
.deployment-fabric-panel { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(470px,1.22fr); gap: 1.4rem; overflow: hidden; padding: 0; background: linear-gradient(135deg,#312432 0%,#4b3549 48%,#654c62 100%); color: #fff; }
.deployment-fabric-copy { padding: 1.55rem 1.6rem; align-self: center; }
.deployment-fabric-copy .eyebrow { color: #d9bdcf; }
.deployment-fabric-copy h2 { margin: .2rem 0 .65rem; color: #fff; font-size: clamp(1.5rem,2.6vw,2.2rem); letter-spacing: -.045em; }
.deployment-fabric-copy > p:last-of-type { max-width: 650px; margin: 0; color: #e0d7df; font-size: .76rem; line-height: 1.7; }
.fabric-legend { display: flex; flex-wrap: wrap; gap: .65rem 1rem; margin-top: 1.15rem; color: #d7ccd5; font-size: .62rem; font-weight: 700; }
.fabric-legend span { display: inline-flex; align-items: center; gap: .42rem; }
.fabric-dot { width: 8px; height: 8px; border-radius: 50%; background: #7b7280; box-shadow: 0 0 0 4px rgba(255,255,255,.06); }
.fabric-dot.ready { background: #56d18f; }.fabric-dot.warning { background: #f3b24f; }.fabric-dot.control { background: #70d2d5; }
.deployment-world-map { position: relative; min-height: 305px; overflow: hidden; border-left: 1px solid rgba(255,255,255,.09); background:
  radial-gradient(circle at 74% 25%,rgba(1,126,132,.18),transparent 28%),
  radial-gradient(circle at 26% 72%,rgba(113,75,103,.26),transparent 32%),
  linear-gradient(155deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
}
.deployment-world-map::before { position:absolute; inset: 36px 26px; opacity:.22; content:""; background:
  radial-gradient(ellipse at 19% 48%,#fff 0 13%,transparent 14%),
  radial-gradient(ellipse at 34% 62%,#fff 0 9%,transparent 10%),
  radial-gradient(ellipse at 51% 42%,#fff 0 15%,transparent 16%),
  radial-gradient(ellipse at 68% 47%,#fff 0 19%,transparent 20%),
  radial-gradient(ellipse at 82% 73%,#fff 0 7%,transparent 8%);
  filter: blur(4px); transform: rotate(-3deg);
}
.map-grid-lines { position:absolute; inset:0; opacity:.075; background-image: linear-gradient(rgba(255,255,255,.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.8) 1px,transparent 1px); background-size: 48px 48px; }
.deployment-map-pins { position:absolute; inset:0; }
.map-location-pin { position:absolute; z-index:3; display:grid; min-width:110px; gap:.05rem; transform:translate(-10px,-50%); border:0; background:transparent; color:#fff; padding:0 0 0 20px; text-align:left; cursor:default; }
.map-location-pin > span { position:absolute; left:0; top:7px; width:11px; height:11px; border:2px solid #fff; border-radius:50%; background:#f0aa45; box-shadow:0 0 0 5px rgba(240,170,69,.16),0 0 16px rgba(240,170,69,.35); }
.map-location-pin.ready > span { background:#4bcf89; box-shadow:0 0 0 5px rgba(75,207,137,.14),0 0 16px rgba(75,207,137,.34); }
.map-location-pin strong { font-size:.66rem; white-space:nowrap; }.map-location-pin small { color:#cfc4cc; font-size:.54rem; white-space:nowrap; }
.control-plane-pin { position:absolute; z-index:2; left:48%; top:49%; display:grid; padding-left:20px; color:#fff; }
.control-plane-pin > span { position:absolute; left:0; top:6px; width:10px; height:10px; border-radius:2px; background:#6bd0d4; transform:rotate(45deg); box-shadow:0 0 0 5px rgba(107,208,212,.14); }
.control-plane-pin strong { font-size:.62rem; }.control-plane-pin small { color:#cfc4cc; font-size:.5rem; }

.location-grid { grid-template-columns: repeat(auto-fit,minmax(225px,1fr)); gap: .85rem; }
.location-card { min-height: 132px; border-radius: 13px; padding: .9rem; cursor: default; background: linear-gradient(180deg,#fff,#fbfafc); box-shadow: 0 7px 20px rgba(42,31,43,.035); }
.location-card.ready { border-color: #cfe4d8; }.location-card.warning { border-color: #ead7b8; }
.location-card-top { display:flex; align-items:flex-start; gap:.65rem; }
.location-card-top > div { min-width:0; flex:1; }.location-card-top strong,.location-card-top small { display:block; }
.location-symbol { display:grid; width:30px; height:30px; flex:0 0 auto; place-items:center; border-radius:9px; background:var(--accent-soft); color:var(--accent); font-size:.65rem; }
.location-card.warning .location-symbol { background:var(--warning-soft); color:var(--warning); }
.location-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-top:auto; padding-top:.78rem; border-top:1px solid var(--line); }
.location-stats span { display:grid; gap:.12rem; color:var(--muted); font-size:.54rem; }.location-stats b { color:var(--ink); font-size:.7rem; }

.location-choice-grid { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: .72rem; }
.location-choice { position:relative; min-height:116px; border-radius:12px; padding:.88rem; gap:.25rem; background:linear-gradient(180deg,#fff,#faf9fb); }
.location-choice-icon { display:grid; width:30px; height:30px; place-items:center; margin-bottom:.25rem; border-radius:9px; background:var(--panel-soft); color:var(--brand); font-size:.78rem; }
.location-choice em { margin-top:auto; color:#8b828c; font-size:.52rem; font-style:normal; font-weight:750; text-transform:uppercase; letter-spacing:.05em; }
.location-choice:hover,.location-choice.active { border-color:#a985a0; box-shadow:0 0 0 3px rgba(113,75,103,.08),0 10px 26px rgba(61,41,56,.07); }
.location-choice.active { background:linear-gradient(180deg,#faf6f9,#f4edf2); }
.location-choice.active::after { position:absolute; right:10px; top:10px; display:grid; width:20px; height:20px; place-items:center; border-radius:50%; background:var(--brand); color:#fff; content:"✓"; font-size:.56rem; font-weight:900; }

/* Public signup visual polish */
.signup-page { background: #f3f2f4; }
.signup-shell { background: linear-gradient(135deg,#282029 0%,#443144 54%,#634b61 100%); }
.signup-hero { position:relative; overflow:hidden; }
.signup-hero::after { position:absolute; right:-180px; bottom:-180px; width:520px; height:520px; border:1px solid rgba(255,255,255,.08); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.014); content:""; }
.signup-card { border-radius:20px !important; box-shadow:0 30px 80px rgba(31,23,32,.2) !important; }
.signup-section-title { color:#4b3b48 !important; letter-spacing:.02em; }
.signup-plan-summary,.signup-provider,.signup-terms { border-radius:11px !important; }
.signup-provider:has(input:checked) { border-color:#9b7892 !important; background:var(--brand-soft) !important; box-shadow:0 0 0 3px rgba(113,75,103,.07); }

/* Login polish */
.login-brand { background: radial-gradient(circle at 14% 16%,rgba(154,95,139,.30),transparent 31%),radial-gradient(circle at 87% 84%,rgba(1,126,132,.22),transparent 34%),linear-gradient(145deg,#241d25 0%,#413141 52%,#654b62 100%); }
.login-card { border-radius:20px; border-color:var(--line); box-shadow:0 30px 90px rgba(35,26,36,.14); }

@media (max-width: 980px) {
  .deployment-fabric-panel { grid-template-columns: 1fr; }
  .deployment-world-map { min-height: 270px; border-left:0; border-top:1px solid rgba(255,255,255,.09); }
}
@media (max-width: 760px) {
  .main-content { padding-left:.8rem; padding-right:.8rem; }
  .topbar { margin-left:-.8rem; margin-right:-.8rem; padding-left:.8rem; padding-right:.8rem; }
  .system-state { display:none; }
  .deployment-fabric-copy { padding:1.2rem; }
  .deployment-world-map { min-height:235px; }
  .map-location-pin strong { font-size:.58rem; }.map-location-pin small { display:none; }
  .location-grid,.location-choice-grid { grid-template-columns:1fr; }
}

/* v1.18.0 HA K3s topology */
.k3s-ha-panel{overflow:hidden}.k3s-ha-form{margin-top:1rem}.k3s-ha-form select[multiple]{min-height:145px;padding:.45rem}.k3s-ha-topology{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:.75rem}.k3s-ha-diagram{border:1px solid var(--border-color,#d8dee9);border-radius:16px;padding:1rem;background:linear-gradient(180deg,rgba(115,72,111,.06),rgba(50,126,72,.04))}.k3s-ha-api{display:flex;justify-content:center;align-items:center;gap:.65rem;margin:.2rem auto 1rem;max-width:760px;padding:.7rem 1rem;border:1px solid rgba(116,73,113,.3);border-radius:12px;background:var(--panel-bg,#fff)}.k3s-ha-api strong{color:var(--accent,#79506f)}.k3s-ha-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.k3s-ha-row+.k3s-ha-row{margin-top:1rem}.k3s-ha-node{border:1px solid var(--border-color,#d8dee9);border-radius:14px;padding:.85rem;background:var(--panel-bg,#fff);min-height:118px}.k3s-ha-node.control-plane{border-top:4px solid #79506f}.k3s-ha-node.worker{border-top:4px solid #2f8747}.k3s-ha-node strong{display:block;font-size:.92rem}.k3s-ha-node span,.k3s-ha-node small{display:block;margin-top:.25rem;opacity:.76;line-height:1.35}.k3s-ha-node .role-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:1}.k3s-ha-node.ready .role-label{color:#2f8747}.k3s-ha-node.failed .role-label,.k3s-ha-node.degraded .role-label{color:#b66b17}.k3s-ha-lane{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.75rem 0;font-size:.72rem;opacity:.72}.k3s-ha-lane:before,.k3s-ha-lane:after{content:"";height:1px;flex:1;background:var(--border-color,#d8dee9)}.k3s-ha-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-top:.9rem}.k3s-ha-stat{border-radius:12px;background:rgba(255,255,255,.66);border:1px solid var(--border-color,#d8dee9);padding:.65rem}.k3s-ha-stat strong{display:block;font-size:1rem}.k3s-ha-stat span{font-size:.68rem;opacity:.7}@media(max-width:900px){.k3s-ha-row{grid-template-columns:1fr}.k3s-ha-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v1.18.0 Smart HA Kubernetes orchestration */
.k3s-ha-smart-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}.k3s-ha-preflight{margin:.85rem 0}.k3s-preflight-card{display:grid;grid-template-columns:auto minmax(180px,1fr) minmax(260px,2fr);gap:.85rem;align-items:center;border:1px solid var(--border-color,#d8dee9);border-radius:14px;padding:.8rem 1rem;background:var(--panel-bg,#fff)}.k3s-preflight-card.ready{border-left:5px solid #2f8747}.k3s-preflight-card.blocked{border-left:5px solid #b66b17}.k3s-preflight-score{display:grid;grid-template-columns:auto auto;column-gap:.45rem;align-items:baseline;min-width:105px}.k3s-preflight-score strong{font-size:1.7rem;line-height:1;color:var(--accent,#79506f)}.k3s-preflight-score span{font-size:.68rem;opacity:.7}.k3s-preflight-score b{grid-column:1/-1;font-size:.72rem;margin-top:.2rem}.k3s-preflight-copy strong,.k3s-preflight-copy span{display:block}.k3s-preflight-copy span{font-size:.72rem;opacity:.72;margin-top:.2rem}.k3s-preflight-latency{display:flex;flex-wrap:wrap;gap:.4rem}.k3s-preflight-latency span{font-size:.68rem;border:1px solid var(--border-color,#d8dee9);border-radius:999px;padding:.3rem .5rem;background:rgba(255,255,255,.55)}.k3s-preflight-nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;margin-top:.55rem}.k3s-preflight-node{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;border:1px solid var(--border-color,#d8dee9);border-radius:10px;padding:.55rem .65rem;background:rgba(255,255,255,.5)}.k3s-preflight-node strong,.k3s-preflight-node span{display:block}.k3s-preflight-node span{font-size:.66rem;opacity:.72;margin-top:.2rem}.k3s-ha-panel #k3s-ha-cluster-select{max-width:260px;min-width:180px}.k3s-ha-panel .k3s-ha-row{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}@media(max-width:900px){.k3s-preflight-card{grid-template-columns:1fr}.k3s-preflight-nodes{grid-template-columns:1fr}.k3s-ha-smart-actions .button{width:100%}}

/* v1.18 remote CNAME/domain routing hotfix */
.dns-plan-box { margin-top: .65rem; border: 1px solid #d8dce5; border-radius: 10px; background: #f8f9fc; padding: .72rem .82rem; }
.dns-plan-box strong { display: block; color: var(--ink); font-size: .7rem; }
.dns-plan-box span { display: block; margin-top: .25rem; color: var(--muted); font-size: .62rem; line-height: 1.5; }
.dns-plan-box.ready { border-color: #b7dfca; background: #f2fbf6; }
.dns-plan-box.warning { border-color: #f1d29b; background: #fff9ee; }
.dns-record-grid { display: grid; gap: .38rem; margin-top: .55rem; }
.dns-record-row { display: grid; grid-template-columns: minmax(90px,.45fr) minmax(140px,1fr) minmax(160px,1.2fr); gap: .45rem; align-items: start; border-top: 1px solid rgba(120,130,150,.14); padding-top: .4rem; font-size: .61rem; }
.dns-record-row code { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 720px) { .dns-record-row { grid-template-columns: 1fr; } }

/* ========================================================================== */
/* v1.19.0 infrastructure fabric UI                                            */
/* ========================================================================== */
.nav-section-label {
  margin: .78rem .68rem .28rem;
  color: #817784;
  font-size: .52rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.nav-section-label:first-child { margin-top: .2rem; }
.sidebar nav { padding-bottom: 1.6rem; }
.nav-item { border: 1px solid transparent; }
.nav-item.active { border-color: rgba(255,255,255,.08); }

.infra-command-strip {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1rem;
  border: 1px solid #302734;
  border-radius: 18px;
  padding: 1.2rem 1.3rem;
  background:
    radial-gradient(circle at 86% 12%, rgba(1,126,132,.28), transparent 30%),
    radial-gradient(circle at 8% 88%, rgba(113,75,103,.32), transparent 34%),
    linear-gradient(135deg, #241d25 0%, #332835 55%, #26343a 100%);
  color: #fff;
  box-shadow: 0 18px 44px rgba(35,28,36,.13);
}
.infra-command-strip::after {
  position: absolute;
  right: -46px;
  top: -68px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(255,255,255,.025), 0 0 0 96px rgba(255,255,255,.012);
  content: "";
}
.infra-command-strip > * { position: relative; z-index: 1; }
.infra-command-strip .eyebrow { color: #95d9d9; }
.infra-command-strip h2 { margin: 0; color: #fff; font-size: clamp(1.15rem,2vw,1.55rem); letter-spacing: -.035em; }
.infra-command-strip p:last-child { max-width: 760px; margin: .42rem 0 0; color: #ccc4cd; font-size: .7rem; line-height: 1.62; }
.infra-command-badges { display: flex; max-width: 390px; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
.infra-command-badges span { border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.07); padding: .46rem .68rem; color: #eae5eb; font-size: .62rem; font-weight: 740; backdrop-filter: blur(8px); }
.kubernetes-command-strip { background: radial-gradient(circle at 82% 12%,rgba(1,126,132,.34),transparent 31%),linear-gradient(135deg,#1f242a,#26343a 52%,#2f2934); }
.node-fabric-metrics .metric-card { min-height: 108px; }
.node-fabric-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(330px,1fr)); gap: .85rem; }
.node-fabric-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(180deg,#fff,#fbfbfc); padding: .95rem; box-shadow: var(--shadow-sm); transition: transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.node-fabric-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--warning); content: ""; }
.node-fabric-card.runtime-ready::before { background: var(--success); }
.node-fabric-card:hover { transform: translateY(-2px); border-color: #d2cbd2; box-shadow: 0 15px 34px rgba(43,33,44,.08); }
.node-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.node-card-head > div { min-width: 0; }
.node-location { display: block; margin-bottom: .2rem; color: var(--brand); font-size: .58rem; font-weight: 820; letter-spacing: .045em; text-transform: uppercase; }
.node-card-head h3 { overflow: hidden; margin: 0; color: #302a32; font-size: .94rem; text-overflow: ellipsis; white-space: nowrap; }
.node-card-head small { display: block; overflow: hidden; margin-top: .25rem; color: var(--muted); font-size: .59rem; text-overflow: ellipsis; white-space: nowrap; }
.node-chip-row { display: flex; flex-wrap: wrap; gap: .34rem; margin-top: .72rem; }
.node-chip-row span { border: 1px solid #e3dfe4; border-radius: 999px; background: #f8f6f8; padding: .3rem .5rem; color: #625c64; font-size: .56rem; font-weight: 720; }
.node-meter-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; margin-top: .8rem; }
.node-meter { min-width: 0; }
.node-meter > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .35rem; }
.node-meter span { color: var(--muted); font-size: .55rem; }
.node-meter strong { color: #49424a; font-size: .59rem; }
.node-meter-track { overflow: hidden; height: 5px; margin-top: .3rem; border-radius: 999px; background: #ebe8ec; }
.node-meter-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),#69b6b9); }
.node-card-meta { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; margin-top: .8rem; }
.node-card-meta span { overflow: hidden; border: 1px solid #ece8ed; border-radius: 8px; background: #fff; padding: .45rem .5rem; color: var(--muted); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.node-card-meta b { color: #4a444b; font-size: .58rem; }
.node-runtime-line { display: flex; align-items: center; gap: .35rem; overflow: hidden; margin-top: .72rem; color: #77717a; font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
.runtime-led { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px rgba(201,130,22,.1); }
.runtime-led.ok { background: var(--success); box-shadow: 0 0 0 3px rgba(39,137,91,.1); }
.node-card-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .82rem; padding-top: .72rem; border-top: 1px solid var(--line); }
.node-card-actions .button { min-height: 32px; padding: .42rem .62rem; font-size: .61rem; }
@media (max-width: 900px) {
  .infra-command-strip { align-items: flex-start; flex-direction: column; }
  .infra-command-badges { justify-content: flex-start; }
  .node-fabric-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .node-meter-grid,.node-card-meta { grid-template-columns: 1fr; }
  .node-card-actions .button { flex: 1 1 calc(50% - .4rem); }
}


/* ========================================================================== */
/* v1.20.0 operations cockpit                                                  */
/* ========================================================================== */
.monitoring-control-panel .panel-header { align-items: flex-start; }
.monitoring-collection-meta { display: inline-flex; margin-top: .42rem; border: 1px solid #e1dce2; border-radius: 999px; background: #faf8fa; padding: .28rem .5rem; color: #756d77; font-size: .56rem; font-weight: 720; letter-spacing: .012em; }
.monitoring-control-panel .monitoring-metrics { margin-top: .15rem; }
@media (max-width: 700px) {
  .monitoring-control-panel .panel-header { gap: .7rem; }
  .monitoring-control-panel .panel-header .button { width: 100%; }
  .monitoring-collection-meta { border-radius: 8px; line-height: 1.4; }
}

/* ========================================================================== */
/* Customer workspace — Odoo.sh-inspired project experience                   */
/* Admin / super_admin intentionally keep the original Manager cockpit.        */
/* ========================================================================== */
.customer-only { display: none !important; }

body.odoo-sh-user {
  --sh-purple: #65445e;
  --sh-purple-deep: #54364d;
  --sh-charcoal: #333943;
  --sh-charcoal-deep: #272d35;
  --sh-border: #d9dde2;
  --sh-cyan: #00b7b2;
  --sh-green: #28b44a;
  --sh-orange: #ec9300;
  --sh-bg: #f5f6f7;
  background: var(--sh-bg);
}
body.odoo-sh-user .customer-only { display: flex !important; }
body.odoo-sh-user .sidebar,
body.odoo-sh-user > .app-shell > .sidebar-overlay,
body.odoo-sh-user .topbar { display: none !important; }
body.odoo-sh-user .main-content {
  width: 100%;
  min-height: 100vh;
  margin-left: 0;
  padding: 0 0 2rem;
  background: #fff;
}
body.odoo-sh-user #global-alert {
  position: fixed;
  z-index: 200;
  top: 38px;
  left: 50%;
  width: min(700px, calc(100vw - 32px));
  transform: translateX(-50%);
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
}
body.odoo-sh-user .view { padding: 0 1rem 2rem; }
body.odoo-sh-user #view-clients { padding: 0; }
body.odoo-sh-user .legacy-client-list { display: none !important; }
body.odoo-sh-user #view-overview { display: none !important; }

.sh-globalbar {
  position: sticky;
  z-index: 120;
  top: 0;
  min-height: 30px;
  align-items: stretch;
  justify-content: space-between;
  background: var(--sh-purple);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.32);
}
.sh-globalbar-left,
.sh-globalbar-right,
.sh-globalnav { display: flex; align-items: stretch; }
.sh-brand {
  display: inline-flex;
  min-width: 80px;
  align-items: center;
  gap: .35rem;
  border: 0;
  background: rgba(0,0,0,.08);
  color: #fff;
  padding: 0 .7rem;
  cursor: pointer;
  font-size: .65rem;
}
.sh-brand-mark {
  display: inline-grid;
  width: 21px;
  height: 18px;
  place-items: center;
  border-radius: 3px;
  background: #fff;
  color: var(--sh-purple);
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: -.04em;
}
.sh-brand strong { font-size: .72rem; letter-spacing: -.02em; }
.sh-globalnav-item,
.sh-project-switcher,
.sh-user-button,
.sh-signout {
  border: 0;
  border-left: 1px solid rgba(255,255,255,.09);
  background: transparent;
  color: rgba(255,255,255,.92);
  cursor: pointer;
  padding: 0 .72rem;
  font-size: .64rem;
  font-weight: 500;
  line-height: 30px;
  white-space: nowrap;
}
.sh-globalnav-item:hover,
.sh-globalnav-item.active,
.sh-project-switcher:hover,
.sh-user-button:hover,
.sh-signout:hover { background: rgba(0,0,0,.16); color: #fff; }
.sh-globalnav-item.active { box-shadow: inset 0 -2px 0 rgba(255,255,255,.92); }
.sh-globalbar-right { margin-left: auto; }
.sh-project-switcher { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.sh-notification { align-self: center; margin: 0 .45rem; color: #fff; font-size: .43rem; opacity: .9; }
.sh-user-button { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.sh-caret { margin-left: .35rem; opacity: .7; }
.sh-signout { font-size: .9rem; }

.sh-projects-home {
  width: min(1260px, calc(100vw - 44px));
  margin: 0 auto;
  flex-direction: column;
  padding: 46px 0 60px;
}
.sh-projects-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid #d6d9dd;
  padding-bottom: 16px;
}
.sh-projects-heading h2 {
  margin: 0;
  color: #30353d;
  font-size: 1.85rem;
  font-weight: 650;
  letter-spacing: -.035em;
}
.sh-projects-tools { display: flex; align-items: center; gap: .45rem; width: min(610px, 55vw); }
.sh-projects-tools input {
  width: 100%;
  height: 33px;
  border: 1px solid #d7dbe0;
  border-radius: 4px;
  background: #fafafa;
  padding: 0 .75rem;
  color: #444b55;
  font-size: .72rem;
  outline: none;
}
.sh-projects-tools input:focus { border-color: #b7a1b0; box-shadow: 0 0 0 2px rgba(101,68,94,.08); }
.sh-view-toggle {
  width: 34px;
  height: 33px;
  border: 1px solid #d4d8dd;
  border-radius: 3px;
  background: #fff;
  color: #3d4650;
  cursor: pointer;
}
.sh-view-toggle.active { border-color: var(--sh-purple); background: var(--sh-purple); color: #fff; }
.sh-project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 24px 30px;
  padding-top: 24px;
}
.sh-create-project,
.sh-project-card {
  min-height: 222px;
  border: 1px solid #d4d7dc;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.sh-create-project {
  display: grid;
  place-content: center;
  gap: .55rem;
  border-style: dashed;
  color: #7f8792;
  cursor: pointer;
}
.sh-create-project:hover { background: #fafafa; color: var(--sh-purple); }
.sh-create-project span { font-size: 2rem; font-weight: 300; line-height: 1; }
.sh-create-project strong { font-size: .75rem; font-weight: 500; }
.sh-project-card { overflow: hidden; cursor: default; transition: box-shadow .12s ease, transform .12s ease; }
.sh-project-card:hover { box-shadow: 0 5px 18px rgba(32,37,43,.09); transform: translateY(-1px); }
.sh-project-card-head {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #d7dadd;
  padding: 0 .65rem;
}
.sh-project-card-head h3 {
  overflow: hidden;
  margin: 0;
  color: #222c39;
  font-size: .88rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-project-card-head > div { display: flex; gap: .1rem; }
.sh-card-icon { border: 0; background: transparent; color: #52606d; cursor: pointer; font-size: .95rem; }
.sh-project-card-meta { margin: 0; }
.sh-project-card-meta > div {
  display: grid;
  min-height: 38px;
  grid-template-columns: 42% 58%;
  align-items: center;
  border-bottom: 1px solid #d7dadd;
  padding: 0 .65rem;
  font-size: .68rem;
}
.sh-project-card-meta dt { font-weight: 650; color: #28313d; }
.sh-project-card-meta dd { margin: 0; color: #3e4854; }
.sh-project-card-meta .sh-valid { color: #1ea839; }
.sh-project-card-actions {
  display: grid;
  min-height: 36px;
  grid-template-columns: 1fr 1fr 1fr 1.35fr;
  align-items: stretch;
}
.sh-project-card-actions > * {
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid #d7dadd;
  background: #fff;
  color: #253242;
  font-size: .67rem;
}
.sh-project-card-actions button { cursor: pointer; }
.sh-project-card-actions button:hover { background: #f4f4f5; }
.sh-project-card-actions .sh-open-project { border-right: 0; font-weight: 650; }
.sh-health-dot { font-size: .62rem; line-height: 1; }
.sh-health-dot.online { color: var(--sh-green); }
.sh-health-dot.warning { color: var(--sh-orange); }
.sh-health-dot.failed { color: #d6464f; }

body.odoo-sh-user.sh-project-open #sh-projects-home { display: none !important; }
body.odoo-sh-user:not(.sh-project-open) #client-detail-panel { display: none !important; }
body.odoo-sh-user.sh-project-open #client-detail-panel {
  display: grid !important;
  width: 100%;
  min-height: calc(100vh - 30px);
  grid-template-columns: 230px minmax(0, 1fr);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 0;
  box-shadow: none;
}
.sh-project-sidebar {
  position: sticky;
  top: 30px;
  height: calc(100vh - 30px);
  flex-direction: column;
  overflow-y: auto;
  background: var(--sh-charcoal-deep);
  color: #fff;
}
.sh-branch-filter {
  display: flex;
  height: 43px;
  align-items: center;
  gap: .45rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0 .8rem;
  color: #737d89;
}
.sh-branch-filter input {
  width: 100%;
  border: 0;
  background: transparent;
  color: #d4d8dc;
  font-size: .7rem;
  outline: 0;
}
.sh-branch-filter input::placeholder { color: #7f8791; }
.sh-branch-tree { display: block; width: 100%; padding: 8px 0 16px; }
.sh-branch-section { display: block; margin: 0; padding: 0 0 .8rem; }
.sh-branch-section header {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  padding: 0 .8rem;
  color: #f5f5f5;
}
.sh-branch-section header strong { font-size: .7rem; font-weight: 550; }
.sh-add-environment {
  border: 0;
  background: transparent;
  color: #d4d8dd;
  cursor: pointer;
  font-size: 1.1rem;
}
.sh-add-environment:hover { color: #fff; }
.sh-branch-item {
  display: grid;
  width: 100%;
  min-height: 35px;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: .55rem;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: #bdc4cb;
  cursor: pointer;
  padding: 0 .72rem 0 1.35rem;
  text-align: left;
}
.sh-branch-item:hover { background: #323943; color: #fff; }
.sh-branch-item.active { border-left-color: var(--sh-cyan); background: #353c46; color: #fff; }
.sh-branch-name { overflow: hidden; font-size: .7rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sh-branch-version { color: #919aa4; font-size: .62rem; }
.sh-branch-empty,
.sh-branch-loading { padding: .45rem 1.4rem; color: #7f8892; font-size: .62rem; }

.client-detail-main { min-width: 0; background: #fff; }
body.odoo-sh-user .client-detail-admin-head,
body.odoo-sh-user .admin-detail-tabs { display: none !important; }
body.odoo-sh-user #client-detail-actions {
  display: none;
  margin: 0;
  border-bottom: 1px solid #d7dadd;
  background: #f7f7f8;
  padding: .55rem .8rem;
}
body.odoo-sh-user.sh-settings-tab #client-detail-actions { display: flex; flex-wrap: wrap; }
.sh-project-repo {
  min-height: 68px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  background: var(--sh-charcoal);
  color: #fff;
  padding: .55rem 1rem;
}
.sh-project-repo-title { display: flex; align-items: center; gap: .55rem; min-width: 190px; }
.sh-project-repo-title strong { overflow: hidden; max-width: 340px; font-size: .98rem; text-overflow: ellipsis; white-space: nowrap; }
.sh-back-button,
.sh-copy {
  border: 0;
  background: transparent;
  color: #cad0d5;
  cursor: pointer;
  font-size: 1rem;
}
.sh-clone-strip { display: flex; min-width: min(720px, 62vw); align-items: center; }
.sh-clone-strip > * { min-height: 27px; border: 1px solid #555d67; }
.sh-clone-strip button {
  background: #272d35;
  color: #f4f5f6;
  cursor: pointer;
  padding: 0 .58rem;
  font-size: .6rem;
}
.sh-clone-strip code {
  display: flex;
  flex: 1;
  align-items: center;
  overflow: hidden;
  border-left: 0;
  border-right: 0;
  background: #fff;
  color: #4a4f57;
  padding: 0 .6rem;
  font-size: .58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-project-tabs {
  min-height: 48px;
  align-items: stretch;
  background: var(--sh-charcoal);
  padding: 0 .8rem;
}
.sh-project-tab {
  position: relative;
  border: 0;
  background: transparent;
  color: #cbd0d4;
  cursor: pointer;
  padding: 0 .9rem;
  font-size: .66rem;
  font-weight: 600;
}
.sh-project-tab:hover { color: #fff; }
.sh-project-tab.active { color: #fff; }
.sh-project-tab.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--sh-cyan);
  content: "";
}
body.odoo-sh-user .detail-content {
  min-height: calc(100vh - 146px);
  margin: 0;
  background: #fff;
  padding: 38px 1rem 2rem;
}
body.odoo-sh-user .detail-content > .client-commit-header,
body.odoo-sh-user .detail-content > .environment-pipeline-header,
body.odoo-sh-user .detail-content > .governance-card,
body.odoo-sh-user .detail-content > .panel,
body.odoo-sh-user .detail-content > .content-grid,
body.odoo-sh-user .detail-content > .table-wrap,
body.odoo-sh-user .detail-content > .activity-list,
body.odoo-sh-user .detail-content > .key-value-grid,
body.odoo-sh-user .detail-content > .promotion-history {
  width: min(1160px, calc(100% - 36px));
  margin-right: auto;
  margin-left: auto;
}

/* History: compact Odoo.sh-like deployment timeline. */
body.odoo-sh-user[data-sh-detail="commits"] .detail-content { background: #f6f7f8; }
body.odoo-sh-user[data-sh-detail="commits"] .client-commit-header { margin-bottom: 1rem; }
body.odoo-sh-user[data-sh-detail="commits"] .client-commit-header h3 { font-size: 1.05rem; }
body.odoo-sh-user[data-sh-detail="commits"] .commit-history-card,
body.odoo-sh-user[data-sh-detail="commits"] .commit-card,
body.odoo-sh-user[data-sh-detail="commits"] .activity-item { border-radius: 0; box-shadow: none; }

/* Shell / logs reproduce the dark project console treatment. */
body.odoo-sh-user[data-sh-detail="terminal"] .detail-content,
body.odoo-sh-user[data-sh-detail="logs"] .detail-content,
body.odoo-sh-user[data-sh-detail="status"] .detail-content { background: var(--sh-charcoal); padding-top: 0; }
body.odoo-sh-user[data-sh-detail="terminal"] .project-terminal-shell { width: 100%; min-height: calc(100vh - 146px); border: 0; border-radius: 0; box-shadow: none; }
body.odoo-sh-user[data-sh-detail="terminal"] .project-terminal-screen { min-height: calc(100vh - 215px); }
body.odoo-sh-user[data-sh-detail="logs"] .log-console,
body.odoo-sh-user[data-sh-detail="logs"] .log-terminal { width: 100%; border-radius: 0; }
body.odoo-sh-user[data-sh-detail="status"] .key-value-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .8rem;
  padding: 1.1rem 0;
}
body.odoo-sh-user[data-sh-detail="status"] .key-value {
  min-height: 92px;
  border: 1px solid #484f58;
  border-radius: 3px;
  background: #171b20;
  color: #fff;
  padding: .75rem;
}
body.odoo-sh-user[data-sh-detail="status"] .key-value span { color: #9aa4ad; }
body.odoo-sh-user[data-sh-detail="status"] .key-value strong { color: #67c65d; font-size: .95rem; }

/* Backups / settings remain white and table-oriented, matching the reference. */
body.odoo-sh-user[data-sh-detail="backups"] .detail-content,
body.odoo-sh-user[data-sh-detail="resources"] .detail-content,
body.odoo-sh-user[data-sh-detail="governance"] .detail-content { background: #fff; }
body.odoo-sh-user[data-sh-detail="backups"] .panel,
body.odoo-sh-user[data-sh-detail="resources"] .panel,
body.odoo-sh-user[data-sh-detail="governance"] .panel,
body.odoo-sh-user[data-sh-detail="governance"] .governance-card {
  border-radius: 0;
  box-shadow: none;
}

/* Global customer pages inherit the flat Odoo.sh workspace treatment. */
body.odoo-sh-user #view-free-demo,
body.odoo-sh-user #view-builds,
body.odoo-sh-user #view-monitoring,
body.odoo-sh-user #view-audit,
body.odoo-sh-user #view-customer-portal,
body.odoo-sh-user #view-settings,
body.odoo-sh-user #view-upgrade-center {
  width: min(1280px, calc(100vw - 36px));
  margin: 0 auto;
  padding-top: 34px;
}
body.odoo-sh-user #view-free-demo .panel,
body.odoo-sh-user #view-builds .panel,
body.odoo-sh-user #view-monitoring .panel,
body.odoo-sh-user #view-audit .panel,
body.odoo-sh-user #view-customer-portal .panel,
body.odoo-sh-user #view-settings .panel,
body.odoo-sh-user #view-upgrade-center .panel {
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 1100px) {
  .sh-globalnav-item { padding: 0 .45rem; font-size: .58rem; }
  .sh-project-grid { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
  .sh-clone-strip { min-width: min(520px, 56vw); }
}
@media (max-width: 820px) {
  .sh-globalnav { overflow-x: auto; max-width: 62vw; }
  .sh-project-switcher { display: none; }
  .sh-user-button { max-width: 100px; }
  .sh-projects-home { width: calc(100vw - 26px); padding-top: 26px; }
  .sh-projects-heading { align-items: stretch; flex-direction: column; }
  .sh-projects-tools { width: 100%; }
  .sh-project-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 14px; }
  body.odoo-sh-user.sh-project-open #client-detail-panel { grid-template-columns: 180px minmax(0,1fr); }
  .sh-clone-strip { display: none; }
  .sh-project-tab { padding: 0 .55rem; font-size: .58rem; }
}
@media (max-width: 620px) {
  .sh-brand strong { display: none; }
  .sh-globalnav { max-width: calc(100vw - 120px); }
  .sh-globalnav-item { padding: 0 .42rem; }
  .sh-globalbar-right .sh-notification,
  .sh-user-button { display: none; }
  .sh-project-grid { grid-template-columns: 1fr; }
  body.odoo-sh-user.sh-project-open #client-detail-panel { display: block !important; }
  .sh-project-sidebar { position: relative; top: 0; height: auto; max-height: 220px; }
  .sh-project-repo { min-height: 50px; }
  .sh-project-tabs { overflow-x: auto; white-space: nowrap; }
  body.odoo-sh-user .detail-content { min-height: 60vh; padding: 20px .55rem 1rem; }
  body.odoo-sh-user[data-sh-detail="status"] .key-value-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

body.odoo-sh-user:not(.sh-project-open) #view-clients::before {
  display: block;
  width: 100%;
  height: 96px;
  background:
    radial-gradient(circle at 13% 120%, rgba(50,81,105,.75), transparent 26%),
    radial-gradient(circle at 54% 115%, rgba(67,111,130,.55), transparent 24%),
    radial-gradient(circle at 84% 100%, rgba(126,83,115,.5), transparent 23%),
    linear-gradient(105deg, #0a101a 0%, #172332 38%, #312d41 65%, #161927 100%);
  box-shadow: inset 0 -1px rgba(255,255,255,.08);
  content: "";
}

body.odoo-sh-user #create-client-modal.provision-modal {
  width: min(780px, calc(100vw - 40px));
  max-height: calc(100vh - 70px);
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
}
body.odoo-sh-user #create-client-modal::backdrop {
  background:
    radial-gradient(circle at 20% 40%, rgba(31,80,105,.42), transparent 28%),
    radial-gradient(circle at 80% 50%, rgba(133,88,117,.34), transparent 30%),
    rgba(8,14,24,.86);
}
body.odoo-sh-user #create-client-modal .modal-header {
  justify-content: center;
  border: 0;
  background: #fff;
  padding: 1rem 1.5rem .65rem;
  text-align: center;
}
body.odoo-sh-user #create-client-modal .modal-header .eyebrow { display: none; }
body.odoo-sh-user #create-client-modal .modal-header h2 { font-size: 1.72rem; font-weight: 630; }
body.odoo-sh-user #create-client-modal .modal-header p { max-width: 600px; margin-right: auto; margin-left: auto; color: #56616d; }
body.odoo-sh-user #create-client-modal .modal-header .icon-button { position: absolute; top: 10px; right: 10px; }
body.odoo-sh-user #create-client-modal .provision-grid { gap: 0; padding: 0 2rem 1rem; }
body.odoo-sh-user #create-client-modal .provision-section {
  border: 0;
  border-top: 1px solid #e0e2e5;
  border-radius: 0;
  background: #fff;
  padding: 1rem 0;
}
body.odoo-sh-user #create-client-modal .provision-section:first-child { border-top: 0; }
body.odoo-sh-user #create-client-modal .provision-step > span { background: var(--sh-purple); }
body.odoo-sh-user #create-client-modal .choice-card.active,
body.odoo-sh-user #create-client-modal .location-choice.active { border-color: var(--sh-purple); box-shadow: 0 0 0 1px var(--sh-purple); }
body.odoo-sh-user #create-client-modal .modal-actions {
  position: sticky;
  bottom: 0;
  justify-content: center;
  border-top: 1px solid #e0e2e5;
  background: #fff;
  padding: .8rem 1.5rem 1rem;
}
body.odoo-sh-user #create-client-modal .modal-actions .button-primary { min-width: 360px; border-radius: 2px; background: var(--sh-purple); border-color: var(--sh-purple); }

/* v1.20 provisioning VPS catalog: visible to every account, selectable only when safe. */
.location-choice.vps-choice.unavailable,
.location-choice.vps-choice:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  border-style: dashed;
}
.location-choice.vps-choice:disabled:hover { border-color: var(--border-color,#d8dee9); }

.sh-branch-composer {
  display: grid;
  gap: .45rem;
  margin: .2rem .75rem .7rem 1.25rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  padding: .6rem;
}
.sh-branch-composer.hidden { display: none; }
.sh-branch-composer label { display: grid; gap: .22rem; color: #d8dde2; font-size: .63rem; }
.sh-branch-composer input,
.sh-branch-composer select {
  min-height: 30px;
  border: 1px solid #53606d;
  background: #fdfdfd;
  color: #2b3240;
  padding: 0 .45rem;
  font-size: .68rem;
}
.sh-branch-composer-actions { display: flex; justify-content: flex-end; }
.sh-branch-composer .button { min-height: 30px; font-size: .64rem; }

body.odoo-sh-user[data-sh-detail="editor"] .detail-content { background: #2d3138; padding: 0; }
.project-editor-shell {
  display: grid;
  grid-template-columns: 230px minmax(0,1fr);
  min-height: calc(100vh - 146px);
  background: #2d3138;
  color: #edf1f4;
}
.project-editor-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.08);
  background: #22262c;
}
.project-editor-sidebar-top { padding: .8rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.project-editor-sidebar-title { font-weight: 700; margin-bottom: .5rem; }
.project-editor-roots { display: grid; gap: .28rem; margin-bottom: .6rem; }
.project-editor-root,
.project-editor-sidebar-actions button {
  border: 1px solid rgba(255,255,255,.12);
  background: #2f343c;
  color: #edf2f5;
  padding: .35rem .5rem;
  text-align: left;
  cursor: pointer;
}
.project-editor-root.active { border-color: #4aa3ff; }
.project-editor-sidebar-actions { display: flex; gap: .35rem; margin-bottom: .5rem; }
.project-editor-current-path {
  overflow: hidden;
  color: #aab3bb;
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-editor-files { display: flex; flex: 1; flex-direction: column; overflow: auto; padding: .4rem 0; }
.project-editor-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: #dee4ea;
  cursor: pointer;
  padding: .5rem .8rem;
  text-align: left;
}
.project-editor-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-editor-file small { color: #94a0ab; }
.project-editor-file:hover,
.project-editor-file.active { background: #31363f; border-left-color: #47a4ff; }
.project-editor-main { display: flex; flex-direction: column; min-width: 0; }
.project-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: .8rem 1rem;
}
.project-editor-file-meta { color: #9faab5; font-size: .68rem; margin-top: .2rem; }
.project-editor-toolbar-actions { display: flex; gap: .45rem; }
.project-editor-toolbar-actions button,
.project-editor-tile,
.button-disabled {
  border: 1px solid rgba(255,255,255,.14);
  background: #323843;
  color: #f6f8fa;
  padding: .45rem .75rem;
}
.project-editor-main-content { flex: 1; min-height: 0; overflow: auto; }
#project-editor-textarea {
  width: 100%;
  min-height: calc(100vh - 220px);
  border: 0;
  background: #1e1f25;
  color: #eef4fb;
  padding: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .82rem;
  line-height: 1.55;
  resize: vertical;
}
.project-editor-launcher { padding: 1rem 1.2rem 2rem; }
.project-editor-launcher-head { border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: .5rem; margin-bottom: 1rem; }
.project-editor-launcher section { margin-bottom: 1.4rem; }
.project-editor-launcher h4 { margin: 0 0 .8rem; color: #eef2f6; font-size: 1.05rem; font-weight: 600; }
.project-editor-tile-grid { display: flex; flex-wrap: wrap; gap: .95rem; }
.project-editor-tile {
  display: grid;
  min-width: 116px;
  min-height: 96px;
  place-items: center;
  gap: .2rem;
  cursor: pointer;
  text-align: center;
}
.project-editor-tile span { font-size: 2rem; }
.project-editor-tile strong { font-size: .82rem; }
.project-editor-tile small { color: #a5afba; }
.grafana-frame {
  width: 100%;
  min-height: 640px;
  border: 1px solid var(--border-color, #d9dde2);
  background: #fff;
}
.button-disabled { opacity: .6; pointer-events: none; text-decoration: none; }

@media (max-width: 900px) {
  .project-editor-shell { grid-template-columns: 1fr; }
  .project-editor-sidebar { max-height: 260px; }
}

/* OXE.sh v1.20.4 infrastructure-role selector */
.role-checkbox-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; margin-top: .55rem; }
.role-checkbox-grid label { display: flex; align-items: center; gap: .45rem; font-size: .78rem; }
@media (max-width: 900px) { .role-checkbox-grid { grid-template-columns: 1fr; } }