:root {
  --ec-bg: #fcfcfb;
  --ec-bg-soft: #f5f5f3;
  --ec-bg-card: #ffffff;
  --ec-ink: #0b1220;
  --ec-ink-soft: #1f2937;
  --ec-slate: #475569;
  --ec-slate-2: #64748b;
  --ec-slate-3: #94a3b8;
  --ec-line: #e6e7e3;
  --ec-line-soft: #eeefea;
  --ec-brand: #1e40af;
  --ec-brand-deep: #1a3796;
  --ec-brand-light: #3b5cd9;
  --ec-brand-soft: #eef2fb;
  --ec-brand-tint: #dbe3f5;
  --ec-success: #10b981;
  --ec-success-soft: #ecfdf5;
  --ec-danger: #b42318;
  --ec-warn: #9a6700;
  --ec-radius: 10px;
  --ec-radius-lg: 14px;
  --ec-shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.03);
  --ec-shadow: 0 4px 14px -4px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.05);
  --ec-nav-bg: rgba(252,252,251,0.88);
  --ec-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ec-font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --ec-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ec-max-w: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ec-bg);
  color: var(--ec-ink);
  font: 14px/1.5 var(--ec-font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ec-ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

h1 {
  font-family: var(--ec-font-display);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 400;
  letter-spacing: -0.035em;
}

h2 {
  font-size: 18px;
}

p {
  margin: 6px 0 0;
  color: var(--ec-slate);
  line-height: 1.65;
}

code,
pre {
  font-family: var(--ec-font-mono);
}

pre {
  white-space: pre-wrap;
  background: #0f172a;
  color: #e5e7eb;
  padding: 18px 20px;
  border-radius: var(--ec-radius-lg);
  overflow-x: auto;
}

.ec-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 60px;
  background: var(--ec-nav-bg);
  border-bottom: 1px solid var(--ec-line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ec-nav-inner {
  max-width: var(--ec-max-w);
  height: 100%;
  margin-inline: auto;
  padding-inline: clamp(24px, 5vw, 56px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.7vw, 24px);
}

.ec-nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.ec-logo-img {
  max-height: 36px;
  width: auto;
  object-fit: contain;
}

.ec-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.ec-nav-toggle {
  display: none;
  width: 38px;
  height: 34px;
  margin-left: auto;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 8px;
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  box-shadow: var(--ec-shadow-sm);
  cursor: pointer;
}

.ec-nav-toggle span {
  display: block;
  width: 16px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.ec-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.ec-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.ec-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.ec-nav-links a,
.ec-nav-actions a:not(.ec-btn) {
  color: var(--ec-slate);
  font-size: 14px;
  font-weight: 450;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}

.ec-nav-links a:hover,
.ec-nav-actions a:not(.ec-btn):hover {
  color: var(--ec-ink);
  background: var(--ec-bg-soft);
}

.ec-nav-links a.ec-nav-active,
.ec-nav-actions a.ec-nav-active {
  border: 1px solid var(--ec-brand-tint);
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  font-weight: 650;
  box-shadow: var(--ec-shadow-sm);
}

.ec-nav-links a.ec-nav-active:hover,
.ec-nav-actions a.ec-nav-active:hover {
  background: #e8eefb;
  color: var(--ec-brand-deep);
}

.ec-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ec-admin-main {
  max-width: var(--ec-max-w);
  margin-inline: auto;
  padding: 14px clamp(24px, 5vw, 56px) 56px;
}

.super-admin-main {
  width: 99%;
  max-width: none;
  padding-inline: clamp(10px, 1vw, 18px);
}

.ec-admin-main:focus,
.guide-drawer-content:focus {
  outline: none;
}

.hero {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(390px, 1.25fr);
  align-items: center;
  gap: clamp(44px, 8vw, 120px);
  min-height: 320px;
  margin-bottom: 24px;
  padding: clamp(32px, 5vw, 52px);
  background: linear-gradient(180deg, #ffffff, var(--ec-bg-soft));
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius-lg);
  box-shadow: var(--ec-shadow-sm);
}

.hero h1::before {
  content: "Admin portal";
  display: table;
  margin-bottom: 14px;
  height: 26px;
  padding: 5px 10px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 999px;
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  font: 500 12px/1.2 var(--ec-font);
  letter-spacing: 0;
}

.hero p {
  max-width: 620px;
  margin-top: 16px;
  font-size: 17px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grant-flow {
  display: grid;
  gap: 12px;
  width: min(390px, 100%);
  margin: 0;
  justify-self: end;
  padding: 0;
  list-style: none;
}

.grant-flow li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: #fff;
  box-shadow: var(--ec-shadow-sm);
}

.grant-flow h2 {
  margin: 0;
  font-size: 16px;
}

.grant-flow p {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ec-slate);
}

.grant-flow .button {
  min-height: 34px;
  padding-inline: 14px;
  font-size: 13px;
}

.step-number {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 999px;
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  font-weight: 700;
  font-size: 13px;
}

.brand-visual {
  display: none;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 18px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: var(--ec-radius-lg);
  background:
    linear-gradient(135deg, rgba(238,242,251,0.94), rgba(255,255,255,0.92) 52%, rgba(245,245,243,0.96)),
    #fff;
  box-shadow: var(--ec-shadow-sm);
}

.brand-visual::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -52px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(30,64,175,0.16);
  border-radius: 999px;
}

.brand-visual-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand-visual-top img {
  width: 34px;
  height: auto;
}

.brand-visual-top span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 999px;
  background: rgba(255,255,255,0.72);
  color: var(--ec-brand);
  font-size: 11px;
  font-weight: 650;
}

.brand-visual-name {
  margin-top: 18px;
  color: var(--ec-ink);
  font: 400 44px/0.92 var(--ec-font-display);
  letter-spacing: -0.035em;
}

.brand-visual p {
  margin-top: 12px;
  color: var(--ec-brand);
  font-size: 14px;
  font-weight: 650;
}

.brand-visual-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}

.brand-visual-promo {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  border: 1px solid rgba(219,227,245,0.9);
  border-radius: 10px;
  background:
    radial-gradient(circle at 82% 28%, rgba(16,185,129,0.18), transparent 28%),
    radial-gradient(circle at 20% 18%, rgba(30,64,175,0.16), transparent 26%),
    linear-gradient(135deg, #ffffff, #eef2fb);
  box-shadow: 0 12px 26px -18px rgba(15,23,42,0.36);
}

.brand-visual-ring,
.brand-visual-card,
.brand-visual-badge {
  position: absolute;
  display: block;
}

.brand-visual-ring {
  right: 18px;
  top: 18px;
  width: 72px;
  height: 72px;
  border: 16px solid rgba(30,64,175,0.14);
  border-radius: 999px;
}

.brand-visual-badge {
  z-index: 2;
  right: 18px;
  bottom: 16px;
  min-width: 48px;
  padding: 5px 8px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  color: var(--ec-brand);
  font: 700 10px/1 var(--ec-font-mono);
  text-align: center;
}

.brand-visual-card {
  left: 18px;
  width: 112px;
  height: 24px;
  border: 1px solid rgba(219,227,245,0.88);
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
}

.brand-visual-card::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--ec-brand);
}

.brand-visual-card::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 12px;
  top: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(71,85,105,0.18);
}

.brand-visual-card.one {
  top: 18px;
}

.brand-visual-card.two {
  top: 48px;
  left: 34px;
  width: 128px;
}

.brand-visual-card.three {
  top: 78px;
  width: 96px;
}

.brand-visual-phone {
  position: relative;
  display: block;
  width: 54px;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--ec-brand);
  box-shadow: inset 0 -10px 18px rgba(11,18,32,0.12), 0 10px 20px rgba(30,64,175,0.14);
  left: calc(50% - 6px);
  top: 30px;
}

.brand-visual-phone::before,
.brand-visual-phone::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: #fff;
}

.brand-visual-phone::before {
  width: 22px;
  height: 8px;
  left: 16px;
  top: 16px;
  transform: rotate(-28deg);
}

.brand-visual-phone::after {
  width: 26px;
  height: 8px;
  left: 15px;
  top: 30px;
  transform: rotate(28deg);
}

.brand-visual-lines {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.brand-visual-lines span {
  display: block;
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid rgba(219,227,245,0.82);
  border-radius: 8px;
  background: rgba(255,255,255,0.78);
  color: var(--ec-slate);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-visual-sources .brand-visual-phone,
.brand-visual-sources .brand-visual-card::before {
  background: var(--ec-success);
}

.brand-visual-directory .brand-visual-phone,
.brand-visual-directory .brand-visual-card::before {
  background: #334155;
}

.band,
.panel,
.notice,
.group-row {
  background: var(--ec-bg-card);
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius-lg);
  box-shadow: var(--ec-shadow-sm);
}

.band,
.panel {
  padding: 24px;
  margin-bottom: 18px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.guide-drawer {
  position: fixed;
  top: 72px;
  left: 0;
  z-index: 80;
  width: min(420px, calc(100vw - 48px));
  max-height: calc(100vh - 88px);
  transform: translateX(-100%);
  transition: transform 0.24s ease;
}

.guide-drawer.open {
  transform: translateX(0);
}

.guide-drawer-toggle {
  position: absolute;
  top: 18px;
  right: -42px;
  width: 42px;
  height: 148px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ec-brand-tint);
  border-left: 0;
  border-radius: 0 var(--ec-radius) var(--ec-radius) 0;
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  cursor: pointer;
  font: 800 12px/1 var(--ec-font-mono);
  box-shadow: var(--ec-shadow-sm);
}

.guide-tab-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.08em;
}

.guide-tab-chevron {
  font: 900 18px/1 var(--ec-font);
}

.guide-tab-shortcut {
  position: absolute;
  right: -64px;
  top: 58px;
  writing-mode: horizontal-tb;
  transform: none;
  background: var(--ec-bg-card);
}

.guide-drawer.open .guide-drawer-toggle {
  height: 46px;
  top: 10px;
  right: 10px;
  width: 34px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: var(--ec-radius);
  background: var(--ec-bg-card);
}

.guide-drawer.open .guide-tab-text {
  display: none;
}

.guide-drawer.open .guide-tab-shortcut {
  display: none;
}

.guide-drawer-content {
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--ec-line);
  border-left: 0;
  border-radius: 0 var(--ec-radius-lg) var(--ec-radius-lg) 0;
  background: var(--ec-bg-card);
  box-shadow: var(--ec-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--ec-slate-3) transparent;
}

.guide-drawer .panel-head {
  padding-right: 48px;
}

.guide-drawer-head {
  justify-content: flex-end;
  min-height: 28px;
}

.guide-drawer-content::-webkit-scrollbar {
  width: 8px;
}

.guide-drawer-content::-webkit-scrollbar-thumb {
  background: var(--ec-slate-3);
  border-radius: 999px;
}

.guide-drawer-content::-webkit-scrollbar-track {
  background: transparent;
}

.guide-content {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.guide-content h1 {
  font-size: 34px;
}

.guide-content h2 {
  margin-top: 8px;
}

.guide-content ul {
  display: grid;
  gap: 6px;
  padding-left: 18px;
  list-style: disc;
}

.guide-content li,
.guide-content p {
  color: var(--ec-slate);
}

.guide-content a {
  color: var(--ec-brand);
  font-weight: 650;
}

.guide-grid article {
  padding: 18px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius-lg);
  background: var(--ec-bg-soft);
}

.guide-grid h2 {
  margin-bottom: 8px;
}

.grid3 > div {
  padding: 4px;
}

.grid3 h2::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--ec-success);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ec-success) 15%, transparent);
}

.topbar,
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.panel-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.inline-action-form {
  display: inline-flex;
  margin: 0;
}

.panel-actions > .button,
.panel-actions .inline-action-form > .button {
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
}

.panel[data-panel] > .panel-head {
  cursor: pointer;
}

.setup-screen {
  min-height: calc(100vh - 130px);
  display: grid;
  place-items: center;
  padding: 24px 0 48px;
}

.setup-card {
  width: min(760px, 100%);
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: #fff;
  box-shadow: var(--ec-shadow);
  padding: clamp(24px, 4vw, 42px);
}

.setup-card h1 {
  margin: 12px 0 10px;
}

.setup-card p {
  color: var(--ec-slate);
  max-width: 62ch;
}

.setup-form {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.setup-form > .button {
  justify-self: start;
}

[data-panel-title] {
  cursor: pointer;
  border-radius: 6px;
}

[data-panel-title]:focus-visible {
  outline: 3px solid var(--ec-brand-soft);
  outline-offset: 4px;
}

.panel-toggle {
  position: relative;
  width: 36px;
  height: 30px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 999px;
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  cursor: pointer;
  box-shadow: var(--ec-shadow-sm);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.panel-toggle:hover {
  background: #e8eefb;
  border-color: var(--ec-brand-tint);
  box-shadow: 0 4px 12px -8px rgba(30,64,175,0.22);
}

.panel-toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--ec-brand);
  border-right: 2px solid var(--ec-brand);
  transform: translate(-50%, -35%) rotate(-45deg);
  transition: transform 0.2s ease, border-color 0.15s;
}

.panel-toggle:hover::before {
  border-color: var(--ec-brand-deep);
}

.panel.collapsed .panel-toggle::before {
  transform: translate(-50%, -65%) rotate(135deg);
}

.panel-body {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: hidden;
  transition: grid-template-rows 0.24s ease, opacity 0.18s ease, margin-top 0.24s ease;
}

.panel-body > * {
  min-height: 0;
}

.panel.collapsed .panel-body {
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

.topbar {
  position: relative;
  margin-bottom: 22px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--ec-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "title config"
    "intro tenant";
  column-gap: 24px;
  row-gap: 2px;
  align-items: end;
}

.dashboard-title {
  grid-area: title;
}

.topbar h1 {
  max-width: 560px;
}

.topbar-config {
  grid-area: config;
  align-self: start;
  justify-self: end;
}

.topbar-tenant {
  grid-area: tenant;
  align-self: center;
  justify-self: end;
}

.topbar-brand {
  display: none;
  grid-area: brand;
}

.dashboard-intro {
  grid-area: intro;
  margin: 0;
  max-width: none;
  color: var(--ec-slate);
  font-size: 13.5px;
  white-space: nowrap;
}

.tenant-card {
  position: relative;
  margin-top: 0;
  width: fit-content;
  max-width: min(720px, 100%);
}

.tenant-card summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 999px;
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  list-style: none;
  box-shadow: var(--ec-shadow-sm);
}

.tenant-card summary::-webkit-details-marker {
  display: none;
}

.tenant-card div {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 14;
  width: min(420px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-bg-card);
  color: var(--ec-slate);
  font-size: 13px;
  box-shadow: var(--ec-shadow-sm);
}

.config-popover {
  position: relative;
  justify-self: end;
  margin-top: 4px;
}

.config-popover summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-bg-card);
  cursor: pointer;
  box-shadow: var(--ec-shadow-sm);
  list-style: none;
}

.config-popover summary::-webkit-details-marker {
  display: none;
}

.config-prefix {
  max-width: 220px;
  overflow: hidden;
  color: var(--ec-brand);
  font-family: var(--ec-font-mono);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.config-popover-body {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  z-index: 15;
  width: min(860px, calc(100vw - 48px));
  padding: 18px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius-lg);
  background: var(--ec-bg-card);
  box-shadow: var(--ec-shadow);
}

.config-form {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 380px);
  gap: 14px;
  align-items: end;
  margin-top: 18px;
}

.config-prefix-field {
  min-width: 0;
}

.config-prefix-check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.config-prefix-check-row .button {
  min-height: 44px;
  padding-inline: 14px;
}

.default-reminder-fields {
  display: grid;
  grid-template-columns: 150px minmax(150px, 1fr);
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.default-reminder-fields legend {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  color: var(--ec-ink);
  font-weight: 700;
}

.time-selects {
  display: grid;
  grid-template-columns: 68px 68px;
  gap: 8px;
}

.config-form > .button {
  grid-column: 2;
  justify-self: end;
  width: min(190px, 100%);
}

.config-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.button,
.ec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 999px;
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  cursor: pointer;
  box-shadow: var(--ec-shadow-sm);
  font: 650 14px/1 var(--ec-font);
  letter-spacing: 0;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}

.button:hover,
.ec-btn:hover {
  background: #e8eefb;
  border-color: var(--ec-brand-tint);
  color: var(--ec-brand-deep);
  box-shadow: 0 4px 12px -8px rgba(30,64,175,0.22);
}

.button:active,
.ec-btn:active {
  transform: translateY(0.5px);
}

.button.primary,
.ec-btn-primary {
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  border-color: var(--ec-brand-tint);
}

.button.primary:hover,
.ec-btn-primary:hover {
  background: #e8eefb;
  border-color: var(--ec-brand-tint);
  box-shadow: 0 4px 12px -8px rgba(30,64,175,0.18);
}

.ec-btn-sm {
  min-height: 34px;
  padding-inline: 14px;
  font-size: 13px;
}

.button.danger {
  border-color: #fecdca;
  background: #fef3f2;
  color: var(--ec-danger);
}

.button.danger:hover {
  background: #fee4e2;
  border-color: #fda29b;
}

.button.warn {
  border-color: #fedf89;
  background: #fffaeb;
  color: var(--ec-warn);
}

.button.warn:hover {
  background: #fef0c7;
  border-color: #fec84b;
}

.notice {
  padding: 14px 18px;
  margin-bottom: 16px;
}

.notice.ok {
  background: var(--ec-success-soft);
  border-color: #c5ead8;
  color: #047857;
}

.notice.error {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.notice p,
.notice strong {
  color: inherit;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 999px;
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  font-size: 12px;
  font-weight: 500;
}

.muted-pill {
  border-color: var(--ec-line);
  background: var(--ec-bg-soft);
  color: var(--ec-slate);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  align-items: end;
}

.group-form {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.lookup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.lookup-grid > div {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius-lg);
  background: var(--ec-bg-soft);
}

label {
  display: grid;
  gap: 7px;
  color: var(--ec-ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.char-count {
  justify-self: end;
  margin-top: -2px;
  color: var(--ec-slate-2);
  font-size: 11px;
  font-weight: 700;
}

.char-count.near-limit {
  color: var(--ec-warn);
}

.char-count-placeholder {
  visibility: hidden;
}

.label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.info-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 50%;
  background: var(--ec-brand-soft);
  color: var(--ec-brand);
  cursor: help;
  flex: 0 0 auto;
  font: 700 12px/1 var(--ec-font);
  letter-spacing: 0;
}

.tip-popover {
  position: fixed;
  z-index: 20;
  width: min(320px, 82vw);
  padding: 10px 12px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-ink);
  color: #fff;
  box-shadow: var(--ec-shadow);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  white-space: normal;
  font: 500 12px/1.45 var(--ec-font);
}

.info-tip.active {
  background: var(--ec-brand);
  color: #fff;
}

.shortcut-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 6px;
  border: 1px solid var(--ec-line);
  border-radius: 6px;
  background: var(--ec-bg-soft);
  color: var(--ec-slate);
  font: 600 11px/1 var(--ec-font-mono);
  letter-spacing: 0;
}

input,
select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-bg-card);
  color: var(--ec-ink);
  padding: 0 14px;
  font: 15px/1.2 var(--ec-font);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

select {
  cursor: pointer;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--ec-brand-light);
  box-shadow: 0 0 0 3px rgba(59,92,217,0.12);
}

input::placeholder {
  color: var(--ec-slate-3);
}

input[readonly] {
  background: var(--ec-bg-soft);
}

input:disabled,
select:disabled {
  background: #f1f3f5;
  color: var(--ec-slate-3);
  border-color: var(--ec-line-soft);
  cursor: not-allowed;
}

.button:disabled,
button:disabled {
  background: #f1f3f5;
  color: var(--ec-slate-3);
  border-color: var(--ec-line-soft);
  cursor: not-allowed;
  box-shadow: none;
}

.check {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  min-height: 44px;
}

.check input {
  width: auto;
  min-height: auto;
}

.source-name-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(280px, 1.1fr);
  gap: 12px;
  align-items: end;
  max-width: 560px;
}

.source-meta-row,
.source-id-row,
.source-reminder-row,
.source-actions-row {
  display: grid;
  gap: 14px;
  align-items: start;
}

.source-meta-row {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) 180px;
}

.source-id-row {
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  max-width: 840px;
}

.source-reminder-row {
  grid-template-columns: 180px 180px;
  max-width: 840px;
}

.source-actions-row {
  grid-template-columns: minmax(220px, 1fr) auto;
  max-width: none;
}

.source-flags {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  min-height: 44px;
}

.source-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.source-action-buttons .button {
  min-width: 150px;
}

.source-name-check {
  display: grid;
  gap: 7px;
  align-self: end;
}

.source-check-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.source-preview {
  color: var(--ec-slate);
  font-size: 12px;
}

.source-preview code {
  color: var(--ec-brand);
  overflow-wrap: anywhere;
}

.check-status {
  min-height: 18px;
  color: var(--ec-slate-2);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.check-status.ok {
  color: #047857;
}

.check-status.error {
  color: #991b1b;
}

.hidden {
  display: none !important;
}

.lookup-results {
  display: grid;
  gap: 7px;
  max-height: 320px;
  min-height: 36px;
  overflow-y: auto;
  padding-right: 4px;
  color: var(--ec-slate-2);
  scrollbar-width: thin;
  scrollbar-color: var(--ec-slate-3) transparent;
}

.lookup-results::-webkit-scrollbar {
  width: 8px;
}

.lookup-results::-webkit-scrollbar-thumb {
  background: var(--ec-slate-3);
  border-radius: 999px;
}

.lookup-results::-webkit-scrollbar-track {
  background: transparent;
}

.lookup-item {
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-bg-soft);
  padding: 10px 12px;
  overflow-wrap: anywhere;
}

.lookup-mailbox-head {
  padding: 10px 12px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: var(--ec-radius);
  background: var(--ec-brand-soft);
}

.lookup-mailbox-head strong {
  display: block;
  color: var(--ec-brand);
}

.lookup-mailbox-head span {
  color: var(--ec-slate);
  font-size: 12px;
}

.lookup-item-warning {
  border-color: #fedf89;
  background: #fffaeb;
}

.lookup-item strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ec-ink);
}

.lookup-description-tip {
  flex: 0 0 auto;
}

.lookup-item span {
  color: var(--ec-slate);
  font-size: 13px;
}

.lookup-item .lookup-group-kind {
  display: block;
  margin-top: 2px;
  color: var(--ec-slate-2);
  font-size: 12px;
  font-weight: 700;
}

.lookup-item small {
  display: block;
  margin-top: 6px;
  color: var(--ec-slate-2);
  font-size: 11px;
  font-weight: 700;
}

.lookup-item .lookup-warning {
  color: var(--ec-warn);
}

.lookup-item code {
  color: var(--ec-brand);
  font-size: 12px;
}

.copy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 7px;
}

.copy-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.copy-row code {
  overflow-wrap: anywhere;
}

.copy-button {
  min-height: 28px;
  border: 1px solid var(--ec-brand-tint);
  border-radius: 8px;
  background: var(--ec-bg-card);
  color: var(--ec-brand);
  cursor: pointer;
  padding: 0 10px;
  font: 600 12px/1 var(--ec-font);
}

.copy-button:hover {
  background: var(--ec-brand-soft);
}

.lookup-limit-note {
  padding: 8px 10px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-bg-card);
  color: var(--ec-slate-2);
  font-size: 12px;
  font-weight: 600;
}

.group-table {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.source-list-header {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(240px, 1.4fr) 170px;
  gap: 16px;
  align-items: center;
  padding: 0 16px 2px;
}

.source-list-header button {
  min-height: 28px;
  border: 0;
  background: transparent;
  color: var(--ec-slate);
  cursor: pointer;
  padding: 0;
  text-align: left;
  font: 800 11px/1 var(--ec-font-mono);
  text-transform: uppercase;
}

.source-list-header button:hover,
.source-list-header button[data-sort-active="true"] {
  color: var(--ec-brand);
}

.source-list-header button[data-sort-active="true"]::after {
  content: " ↑";
}

.source-list-header button[data-sort-active="true"][aria-sort="descending"]::after {
  content: " ↓";
}

.source-list-header button:last-child {
  justify-self: end;
  width: 170px;
}

.source-list-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}

.source-list-search {
  min-width: 0;
}

.source-list-search > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.source-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.source-search-row .copy-button {
  min-height: 44px;
  padding-inline: 14px;
}

.source-filters {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-bg-soft);
}

.source-filters .check {
  min-height: 30px;
  color: var(--ec-slate);
  font-size: 12px;
  font-weight: 700;
}

.source-filter-total {
  display: grid;
  gap: 3px;
  align-self: start;
  color: var(--ec-slate);
  font-size: 12px;
  font-weight: 700;
}

.source-filter-total small,
.source-filter-option small {
  color: var(--ec-brand);
  font: 700 11px/1 var(--ec-font-mono);
}

.source-filter-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
}

.source-filter-option > span {
  display: grid;
  gap: 3px;
}

.group-row {
  padding: 0;
  overflow: hidden;
}

.group-row summary {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(240px, 1.4fr) 170px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  color: var(--ec-ink-soft);
  font-weight: 600;
}

.source-list-description {
  min-width: 0;
  color: var(--ec-slate);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-list-type {
  justify-self: end;
  width: 170px;
  color: var(--ec-brand);
  font-family: var(--ec-font-mono);
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

.source-list-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-row[open] {
  padding-bottom: 14px;
}

.source-group-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px 12px;
}

.source-group-meta > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-bg-soft);
}

.source-group-meta span {
  color: var(--ec-slate);
  font-size: 12px;
  font-weight: 700;
}

.source-group-meta code {
  min-width: 0;
  color: var(--ec-brand);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-row form {
  padding: 0 14px;
}

.inline-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.muted {
  color: var(--ec-slate);
}

.table-wrap {
  overflow-x: auto;
}

.super-table-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin: 12px 0;
}

.super-table-tools label {
  display: grid;
  gap: 4px;
  min-width: min(340px, 100%);
}

.super-table-tools span {
  font-size: 12px;
  font-weight: 700;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  font-size: 12px;
}

.admin-table th,
.admin-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--ec-line-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.admin-table th {
  color: var(--ec-brand);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.admin-table th button {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-transform: inherit;
}

.admin-table th button::after {
  content: "↕";
  margin-left: 5px;
  color: var(--ec-slate-3);
  font-size: 10px;
}

.admin-table th button[aria-sort="ascending"]::after {
  content: "↑";
  color: var(--ec-brand);
}

.admin-table th button[aria-sort="descending"]::after {
  content: "↓";
  color: var(--ec-brand);
}

.admin-filter-row th {
  padding-top: 0;
}

.admin-filter-row input {
  min-height: 34px;
  font-size: 12px;
}

.admin-table tr.file-row-directory {
  background: #f6f7f9;
}

.admin-table tr.file-row-directory td {
  font-weight: 750;
}

.file-root-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--ec-line);
  border-radius: 999px;
  background: #f6f7f9;
  color: var(--ec-brand);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--ec-shadow-sm);
}

.file-root-tab.active {
  border-color: var(--ec-brand-tint);
  background: var(--ec-brand-soft);
  font-weight: 750;
}

.log-grid {
  display: grid;
  gap: 16px;
}

.log-block h3 {
  margin: 0;
  font-size: 14px;
}

.log-block pre {
  max-height: 420px;
  margin-top: 10px;
  font-size: 11px;
}

.super-config-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.super-config-form > .panel {
  padding: 14px;
  box-shadow: var(--ec-shadow-sm);
}

.super-config-form > .panel .panel-head h2 {
  font-size: 15px;
}

.super-config-form h3 {
  margin-top: 12px;
  font-size: 14px;
}

.super-config-form > .muted {
  margin: -6px 0 4px;
  font-size: 12px;
}

.super-config-grid {
  display: grid;
  gap: 8px;
  align-items: center;
}

.super-config-table-head,
.super-config-table-row {
  grid-template-columns: 52px minmax(130px, 1fr) minmax(150px, 1fr) minmax(220px, 1.45fr) 84px minmax(120px, 0.8fr) 86px 78px;
}

.super-config-log-head,
.super-config-log-row {
  grid-template-columns: 52px minmax(130px, 1fr) minmax(220px, 1.8fr) 130px 110px 84px 78px;
}

.super-config-root-head,
.super-config-root-row {
  grid-template-columns: 52px minmax(130px, 1fr) minmax(220px, 2fr) 78px;
}

.super-config-ai-head,
.super-config-ai-row {
  grid-template-columns: 52px minmax(130px, 0.8fr) minmax(220px, 1fr) minmax(160px, 0.8fr) minmax(280px, 1.6fr) 78px;
}

.super-config-table-head,
.super-config-log-head,
.super-config-root-head,
.super-config-ai-head {
  color: var(--ec-brand);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.super-config-ai-row textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--ec-line);
  border-radius: var(--ec-radius);
  background: var(--ec-bg-card);
  color: var(--ec-ink);
  padding: 10px 12px;
  font: 13px/1.35 var(--ec-font-mono);
}

.checkline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ec-slate);
  font-size: 12px;
}

.checkline input[type="checkbox"],
.super-config-form input[type="checkbox"],
.super-column-dialog input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  accent-color: var(--ec-brand);
  flex: 0 0 auto;
}

.super-column-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 6px;
}

.super-column-field input[readonly] {
  background: #fff;
  color: var(--ec-ink);
  cursor: default;
}

.super-column-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15,23,42,0.3);
}

.super-column-dialog {
  width: min(520px, 100%);
  max-height: min(680px, calc(100vh - 36px));
  overflow: auto;
  border: 1px solid var(--ec-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--ec-shadow);
  padding: 18px;
}

.super-column-dialog-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.super-column-dialog-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--ec-line-soft);
  border-radius: 8px;
  background: var(--ec-bg-soft);
}

.super-column-dialog-row > div {
  display: flex;
  gap: 6px;
}

.super-column-dialog-row .checkline {
  color: var(--ec-ink);
  font-weight: 650;
}

.super-column-dialog-row .copy-button {
  min-height: 30px;
  padding: 0 10px;
}

/* Right-rail promotional image. It stays out of the admin workflow and only
   appears when the viewport has a real spare gutter. */
.brand-visual {
  display: none;
}

.brand-visual::after,
.brand-visual-top,
.brand-visual-name,
.brand-visual-scene {
  display: none;
}

.brand-visual-picture {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 360px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(7,20,42,0.98) 0%, rgba(7,20,42,0.86) 38%, rgba(7,20,42,0.36) 76%, rgba(7,20,42,0.1) 100%),
    var(--brand-image),
    linear-gradient(155deg, #13284c 0%, #08172f 54%, #061123 100%);
  background-position: center;
  background-size: cover;
  box-shadow: 0 18px 34px -26px rgba(15,23,42,0.58);
}

.brand-visual-picture::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, transparent 0 62%, rgba(3,7,18,0.72) 62% 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 38px);
  opacity: 0.75;
}

.brand-visual-sky,
.brand-visual-building,
.brand-visual-person {
  position: absolute;
  display: none;
}

.brand-visual-sky {
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 38%, rgba(148,163,184,0.22), transparent 34%),
    radial-gradient(ellipse at 58% 18%, rgba(96,165,250,0.18), transparent 28%);
  mix-blend-mode: screen;
  opacity: 0.74;
}

.brand-visual-building {
  bottom: 0;
  border: 1px solid rgba(148,163,184,0.16);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.11) 0 7px, transparent 7px 20px),
    linear-gradient(180deg, rgba(30,41,59,0.72), rgba(15,23,42,0.92));
}

.brand-visual-building.one {
  right: 0;
  width: 42%;
  height: 92%;
}

.brand-visual-building.two {
  right: 38%;
  width: 22%;
  height: 58%;
  opacity: 0.72;
}

.brand-visual-building.three {
  right: 58%;
  width: 24%;
  height: 42%;
  opacity: 0.45;
}

.brand-visual-person {
  bottom: 8%;
  width: 40px;
  height: 116px;
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(180deg, #101827, #020617);
  box-shadow: 0 18px 28px rgba(0,0,0,0.22);
}

.brand-visual-person::before {
  content: "";
  position: absolute;
  left: 10px;
  top: -24px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #1f2937;
}

.brand-visual-person::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 20px;
  width: 26px;
  height: 7px;
  border-radius: 999px;
  background: #020617;
  transform: rotate(-38deg);
}

.brand-visual-person.primary {
  right: 18%;
  transform: scale(1.22);
}

.brand-visual-person.secondary {
  right: 50%;
  bottom: 7%;
  transform: scale(0.74);
  opacity: 0.68;
}

.brand-visual-person.tertiary {
  right: 8%;
  bottom: 6%;
  transform: scale(0.58);
  opacity: 0.52;
}

.brand-visual-copy {
  position: absolute;
  left: 26px;
  top: 26px;
  z-index: 2;
  width: min(72%, 300px);
  color: #fff;
}

.brand-visual-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 32px;
}

.brand-visual-mark span {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 7px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}

.brand-visual-mark img {
  width: 22px;
  height: auto;
}

.brand-visual-mark strong {
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}

.brand-visual-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #b9c9ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-visual-headline {
  color: #fff;
  font: 400 clamp(30px, 2.45vw, 46px)/0.96 var(--ec-font-display);
  letter-spacing: -0.035em;
}

.brand-visual-copy p {
  max-width: 27ch;
  margin-top: 18px;
  color: rgba(255,255,255,0.82);
  font-size: 14px;
  line-height: 1.5;
}

.brand-visual-sources .brand-visual-picture {
  background:
    linear-gradient(90deg, rgba(7,20,42,0.97) 0%, rgba(7,20,42,0.84) 42%, rgba(7,20,42,0.3) 80%),
    var(--brand-image),
    linear-gradient(155deg, #102a3d 0%, #071a2f 54%, #061123 100%);
  background-position: center;
  background-size: cover;
}

.brand-visual-directory .brand-visual-picture {
  background:
    linear-gradient(90deg, rgba(7,20,42,0.97) 0%, rgba(7,20,42,0.84) 43%, rgba(7,20,42,0.3) 78%),
    var(--brand-image),
    linear-gradient(155deg, #172554 0%, #0f172a 56%, #061123 100%);
  background-position: center;
  background-size: cover;
}

@media (min-width: 1260px) {
  .hero {
    grid-template-columns: minmax(240px, 0.75fr) minmax(370px, 390px);
    gap: clamp(28px, 4vw, 58px);
  }
}

@media (min-width: 1700px) {
  .brand-visual {
    display: block;
    position: fixed;
    top: 82px;
    right: 24px;
    z-index: 2;
    width: min(393px, calc((100vw - var(--ec-max-w)) / 2 - 34px));
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    pointer-events: none;
  }

  .brand-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .brand-visual-home {
    top: 86px;
  }
}

@media (min-width: 1340px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas:
      "title config"
      "intro tenant";
  }
}

@media (max-width: 980px) {
  .ec-nav {
    height: 60px;
  }

  .ec-nav-inner {
    position: relative;
  }

  .ec-nav-toggle {
    display: inline-block;
    flex-shrink: 0;
  }

  .ec-nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: clamp(18px, 5vw, 56px);
    right: clamp(18px, 5vw, 56px);
    z-index: 120;
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--ec-line);
    border-radius: 8px;
    background: rgba(255,255,255,0.98);
    box-shadow: var(--ec-shadow);
    transform-origin: top;
    transform: scaleY(0.96);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
  }

  .ec-nav-links.open {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }

  .ec-nav-links a {
    display: block;
    padding: 10px 12px;
  }

  .hero,
  .topbar,
  .panel-head {
    align-items: flex-start;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "intro"
      "config"
      "tenant";
    flex-direction: column;
  }

  .grant-flow {
    justify-self: stretch;
    width: 100%;
  }

  .config-popover {
    justify-self: stretch;
    width: 100%;
  }

  .topbar-config,
  .topbar-tenant {
    justify-self: stretch;
    width: 100%;
  }

  .dashboard-intro {
    white-space: normal;
  }

  .tenant-card {
    margin-top: 0;
  }

  .tenant-card div {
    position: static;
    width: 100%;
    margin-top: 8px;
  }

  .config-popover-body {
    position: static;
    width: 100%;
    margin-top: 10px;
  }

  .config-form,
  .default-reminder-fields {
    grid-template-columns: 1fr;
  }

  .grid3,
  .guide-grid,
  .form-grid,
  .group-form,
  .lookup-grid,
  .source-name-row,
  .source-check-row,
  .source-meta-row,
  .source-id-row,
  .source-reminder-row,
  .source-actions-row,
  .source-list-tools {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .super-config-table-head,
  .super-config-table-row,
  .super-config-log-head,
  .super-config-log-row,
  .super-config-root-head,
  .super-config-root-row,
  .super-config-ai-head,
  .super-config-ai-row {
    grid-template-columns: 1fr;
  }

  .source-group-meta {
    grid-template-columns: 1fr;
  }

  .group-row summary {
    grid-template-columns: 1fr;
  }

  .source-list-header {
    display: none;
  }

  .source-list-type {
    justify-self: start;
    width: auto;
  }
}

@media (max-width: 560px) {
  .ec-nav-actions a:not(.ec-btn) {
    display: none;
  }

  .ec-admin-main {
    padding-inline: 18px;
  }

  .hero,
  .band,
  .panel {
    padding: 20px;
  }
}