@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
}



:root {
  
  --accent:       #4F46E5;
  --accent-2:     #4338CA;
  --accent-ink:   #3730A3;
  --accent-soft:  rgba(79, 70, 229, .12);
  --accent-glow:  rgba(79, 70, 229, .35);

  
  --ok-ink:       #065F46;
  --warn-ink:     #92400E;
  --bad-ink:      #B91C1C;
  --deep:         var(--side-bg);
  --deep-2:       var(--side-bg-2);

  
  --ok:           #10B981;
  --ok-soft:      rgba(16, 185, 129, .14);
  --warn:         #F59E0B;
  --warn-soft:    rgba(245, 158, 11, .14);
  --bad:          #EF4444;
  --bad-soft:     rgba(239, 68, 68, .12);
  --violet:       #8B5CF6;
  --violet-soft:  rgba(139, 92, 246, .14);
  --cool:         #64748B;
  --cool-soft:    rgba(100, 116, 139, .14);

  
  --bg-0:         #F3F6FB;          
  --bg-1:         #F8FAFC;
  --ink:          #0F172A;          
  --muted:        #475569;
  --faint:        #94A3B8;
  --line:         #E2E8F0;
  --line-strong:  #CBD5E1;
  --surface:      #FFFFFF;
  --surface-soft: #F4F7FB;
  --surface-subtle: #F8FAFD;
  --surface-section: #EEF3F9;
  --surface-header: #F7F9FC;
  --surface-raised: #FFFFFF;

  
  --glass:        rgba(255, 255, 255, .85);
  --glass-strong: rgba(255, 255, 255, .96);
  --glass-line:   rgba(255, 255, 255, .80);

  
  --side-bg:      #0F172A;
  --side-bg-2:    #1E293B;
  --side-border:  rgba(255, 255, 255, .1);
  --side-ink:     rgba(255, 255, 255, .96);
  --side-muted:   rgba(255, 255, 255, .6);
  --side-hover:   rgba(255, 255, 255, .08);
  --side-active:  rgba(79, 70, 229, .28);
  

  
  --side-accent:      #4F46E5;
  --side-accent-mid:  #6366F1;
  --side-accent-soft: #818CF8;
  --side-accent-ink:  #A5B4FC;

  
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 18px;

  
  --shadow-sm:  0 1px 3px rgba(15, 20, 45, .06), 0 4px 10px rgba(15, 20, 45, .08);
  --shadow-md:  0 3px 10px rgba(15, 20, 45, .08), 0 14px 28px rgba(15, 20, 45, .12);
  --shadow-lg:  0 6px 20px rgba(15, 20, 45, .10), 0 26px 52px rgba(15, 20, 45, .16);

  
  --font:      Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  
  --nav-full:  248px;
  --nav-rail:  68px;
  --nav-w:     var(--nav-full);
  --header-h:  72px;
  --ctl:       2.65rem;
  
  --gutter:    1.5rem;
}


[data-tone="accent"] { --tone: var(--accent); --tone-ink: var(--accent-ink); --tone-soft: var(--accent-soft); }
[data-tone="violet"] { --tone: var(--violet); --tone-ink: #6D28D9;          --tone-soft: var(--violet-soft); }
[data-tone="ok"]     { --tone: var(--ok);     --tone-ink: var(--ok-ink);    --tone-soft: var(--ok-soft); }
[data-tone="cool"]   { --tone: var(--cool);   --tone-ink: #475569;          --tone-soft: var(--cool-soft); }
[data-tone="warn"]   { --tone: var(--warn);   --tone-ink: var(--warn-ink);  --tone-soft: var(--warn-soft); }
[data-tone="bad"]    { --tone: var(--bad);    --tone-ink: var(--bad-ink);   --tone-soft: var(--bad-soft); }



* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 14px/1.65 var(--font);
  font-feature-settings: "cv11", "ss01";
  color: var(--ink);
  background:
    radial-gradient(900px 600px at 90% -5%, rgba(79, 70, 229, .12), transparent 60%),
    radial-gradient(700px 500px at 5% 105%, rgba(139, 92, 246, .08), transparent 55%),
    linear-gradient(178deg, #FFFFFF 0%, var(--bg-0) 40%, #F1F5F9 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.noscript { margin: 2rem auto; max-width: 36rem; }

h1, h2, h3 { margin: 0; letter-spacing: -.018em; }
h1 { font-size: 1.7rem; line-height: 1.25; font-weight: 700; }
h2 { font-size: 1.4rem; line-height: 1.3; font-weight: 700; }
h3 { font-size: .98rem; font-weight: 600; letter-spacing: -.01em; }
h4 {
  margin: 1.35rem 0 .6rem;
  font-family: var(--font-mono);
  font-size: .67rem;
  font-weight: 600;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .1em;
}
h4:first-child { margin-top: 0; }

p { margin: 0 0 .7rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

code, .mono { font-family: var(--font-mono); font-size: .84em; }
code {
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .06rem .3rem;
}

.muted   { color: var(--muted); }
.faint   { color: var(--faint); }
.mono    { color: inherit; }
.empty   { color: var(--faint); font-size: .88rem; margin: 0; padding: .4rem 0; }
.err-text { color: var(--bad); font-size: .84rem; margin: .5rem 0 0; }
.result-note { font-size: .84rem; margin: 0 0 .75rem; }
.save-note { font-size: .84rem; }

.icon { flex: none; display: block; }

::selection { background: var(--accent-glow); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}



.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-sm);
}

.glass-strong {
  background: var(--glass-strong);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}




.stage {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);  grid-template-rows: var(--header-h) minmax(0, 1fr);
  grid-template-areas:
    "side head"
    "side main";
  height: 100vh;
  transition: grid-template-columns .18s ease;
}

.boot {
  display: grid;
  place-items: center;
  min-height: 100vh;
  color: var(--muted);
}



.sidebar {
  grid-area: side;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  color: var(--side-ink);
  background:
    radial-gradient(400px 400px at 50% -100%, rgba(79, 70, 229, .18), transparent 60%),
    linear-gradient(184deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  border-right: 1px solid var(--side-border);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, .05);
  transition: width .16s ease, box-shadow .16s ease;
}

.side-brand {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  align-items: center;
  column-gap: .6rem;
  padding: 0 .85rem;
  height: var(--header-h);
  flex: none;
  border-bottom: 1px solid var(--side-border);
  background:
    linear-gradient(180deg, rgba(79, 70, 229, .08) 0%, transparent 100%);
}

.side-toggle {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0;
  flex: none;
  border: 1px solid var(--side-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .66);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.side-toggle:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); color: #fff; }
.side-toggle:active { transform: scale(.94); }
.side-toggle:focus-visible { outline: 2px solid var(--side-accent-soft); outline-offset: 2px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 255, 255, .18),
    0 0 16px -4px rgba(79, 70, 229, .5);
}

.brand-mark img { width: 22px; height: 22px; display: block; }

.brand-lockup {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  line-height: 1.25;
}

.brand-lockup b {
  font-size: .89rem;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

.brand-lockup > span {
  font-size: .68rem;
  color: var(--side-muted);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: .85rem .55rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .07); }
.nav-group-toggle {
  width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 .55rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.nav-group-toggle:hover { background: rgba(255, 255, 255, .06); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--side-accent-soft); outline-offset: 2px; }
.nav-group-toggle .nav-group-label {
  flex: 1;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .52);
  padding-right: 0;
}
.nav-group-chevron {
  flex: none;
  margin-left: 8px;
  color: rgba(255, 255, 255, .36);
  transition: transform .2s cubic-bezier(.22, .8, .3, 1), color .16s ease;
}
.nav-group-toggle:hover .nav-group-label { color: rgba(255, 255, 255, .72); }
.nav-group-toggle:hover .nav-group-chevron { color: rgba(255, 255, 255, .78); }
.nav-group.group-collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group.group-collapsed { gap: 0; }
.nav-group.group-collapsed + .nav-group { margin-top: 8px; }

.nav-group-items {
  display: grid;
  gap: 3px;
  max-height: 620px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .24s cubic-bezier(.22, .8, .3, 1), opacity .16s ease, transform .2s cubic-bezier(.22, .8, .3, 1);
  transform: translateY(0);
}
.nav-group.group-collapsed .nav-group-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}


.sidebar-collapsed .nav-group-toggle { display: none; }
.sidebar-collapsed .nav-group-items {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 4px;
  max-height: none;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transform: none;
}
.sidebar-collapsed .nav-group.group-collapsed { gap: 4px; }


@media (prefers-reduced-motion: reduce) {
  .nav-group-items,
  .nav-group-chevron { transition-duration: .01ms !important; }
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--side-muted);
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .13s ease, color .13s ease, box-shadow .13s ease;
}
.nav-icon-wrap {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.nav-item .icon { opacity: .85; transition: opacity .13s ease, transform .14s ease; }


.nav-item:hover {
  background: var(--side-hover);
  color: var(--side-ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.nav-item:hover .icon { opacity: 1; }
.nav-item:hover .nav-icon-wrap {
  transform: translateX(2px) scale(1.04);
  background: rgba(255, 255, 255, .07);
}
.nav-item:active .nav-icon-wrap { transform: scale(.93); }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }


.nav-item.nav-on {
  background: linear-gradient(94deg, var(--side-active), var(--side-accent-mid));
  color: #fff;
  font-weight: 600;
  box-shadow:
    inset 0 0 0 1px var(--side-accent-soft),
    0 4px 16px rgba(79, 70, 229, .28);
}
.nav-item.nav-on::before {
  content: "";
  position: absolute;
  left: -.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--side-accent-soft);
  box-shadow: 0 0 12px 2px var(--accent-glow);
}
.nav-item.nav-on .icon { opacity: 1; color: #fff; }
.nav-item.nav-on .nav-icon-wrap {
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}


.nav-item[data-tone] .icon { color: var(--tone-lift, rgba(255, 255, 255, .72)); }

.nav-item[data-tone="accent"] { --tone-lift: var(--side-accent-ink); }
.nav-item[data-tone="violet"] { --tone-lift: #A78BFA; }
.nav-item[data-tone="ok"]     { --tone-lift: #6EE7B7; }
.nav-item[data-tone="cool"]   { --tone-lift: #94A3B8; }
.nav-item[data-tone="warn"]   { --tone-lift: #FCD34D; }
.nav-item[data-tone="bad"]    { --tone-lift: #FDA4AF; }


.nav-item.nav-on[data-tone] .icon { color: #fff; }


.nav-group-toggle[data-tone="accent"] .nav-group-label { color: var(--side-accent-ink); }
.nav-group-toggle[data-tone="violet"] .nav-group-label { color: #C4B5FD; }
.nav-group-toggle[data-tone="ok"]     .nav-group-label { color: #6EE7B7; }
.nav-group-toggle[data-tone="cool"]   .nav-group-label { color: #94A3B8; }
.nav-group-toggle[data-tone="warn"]   .nav-group-label { color: #FCD34D; }
.nav-group-toggle[data-tone="bad"]    .nav-group-label { color: #FDA4AF; }

.nav-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem .9rem;
  margin: .5rem .6rem 0;
  border-top: 1px solid var(--side-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .035);
}

.side-who { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1; }

.side-who-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.side-who-text b {
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}
.side-who-text > span { font-size: .68rem; color: var(--side-muted); }

.avatar-side {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.side-out {
  flex: none;
  color: var(--side-muted);
  background: transparent;
  border-color: transparent;
}
.side-out:hover { background: var(--side-hover); color: #fff; border-color: var(--side-border); }


.stage.sidebar-collapsed { --nav-w: var(--nav-rail); }
.sidebar-collapsed .side-brand { display: flex; justify-content: center; padding-inline: 0; }
.sidebar-collapsed .brand-mark, .sidebar-collapsed .brand-lockup { display: none; }
.sidebar-collapsed .side-toggle {
  width: 40px;
  height: 40px;
  margin: 0;
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
}
.sidebar-collapsed .side-toggle .icon { transform: rotate(180deg); }
.sidebar-collapsed .side-nav { padding-inline: 10px; overflow-x: visible; }
.sidebar-collapsed .nav-group { align-items: center; }
.sidebar-collapsed .nav-group + .nav-group {
  width: 100%;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.sidebar-collapsed .nav-group + .nav-group::before { display: none; }
.sidebar-collapsed .nav-group-label { max-height: 0; overflow: hidden; opacity: 0; padding-block: 0; transform: translateX(-6px); }
.sidebar-collapsed .nav-text { width: 0; max-width: 0; opacity: 0; transform: translateX(-6px); pointer-events: none; }
.sidebar-collapsed .nav-item {
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 8px;
  gap: 0;
  transform: none;
}
.sidebar-collapsed .nav-item.nav-on::before { left: -12px; height: 26px; }
.sidebar-collapsed .nav-icon-wrap { width: 32px; height: 32px; }
.sidebar-collapsed .nav-item:hover { transform: none; }
.sidebar-collapsed .nav-item:hover .nav-icon-wrap { transform: scale(1.09); }
.sidebar-collapsed .side-foot {
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  margin: .5rem 8px;
  padding: 8px 0;
}
.sidebar-collapsed .side-who { flex: none; }
.sidebar-collapsed .side-who-text { width: 0; max-width: 0; overflow: hidden; opacity: 0; transform: translateX(-6px); }
.sidebar-collapsed .side-out { width: 38px; height: 38px; }





.topbar {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 var(--gutter);
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}

.crumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  overflow: hidden;
  font-size: .85rem;
  color: var(--faint);
  white-space: nowrap;
}


.crumb b { color: var(--tone-ink, var(--ink)); font-weight: 600; }
.crumb-sep { color: var(--line-strong); }

.topsearch {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  max-width: 26rem;
  margin-left: auto;
  height: var(--ctl);
  padding: 0 .7rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface-soft);
  color: var(--faint);
  transition: border-color .13s ease, box-shadow .13s ease, background .13s ease;
}

.topsearch:focus-within {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.topsearch input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: .86rem;
  color: var(--ink);
}

.topsearch input:focus { outline: none; }
.topsearch input::placeholder { color: var(--faint); }


.topbar-right { display: flex; align-items: center; gap: .5rem; flex: none; }



.pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 1.65rem;
  padding: 0 .6rem;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill-ok    { color: var(--ok);     background: var(--ok-soft);   border-color: rgba(18, 183, 106, .22); }
.pill-warn  { color: var(--warn);   background: var(--warn-soft); border-color: rgba(245, 158, 11, .26); }
.pill-down  { color: var(--bad);    background: var(--bad-soft);  border-color: rgba(240, 56, 79, .22); }



.avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--violet));
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
}

.role-badge {
  align-self: flex-start;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .04rem .34rem;
  border-radius: 4px;
  background: var(--cool-soft);
  color: var(--cool);
}

.role-viewer  { background: var(--cool-soft);   color: var(--cool); }
.role-analyst { background: var(--accent-soft); color: var(--accent-ink); }
.role-functional { background: #d1fae5; color: #065f46; }
.role-developer { background: #ffedd5; color: #9a3412; }
.role-admin   { background: var(--violet-soft); color: var(--violet); }



.dropdown { position: relative; }

.has-badge { position: relative; }

.badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 99px;
  background: var(--bad);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
}

.svc-btn {
  gap: .45rem;
  height: var(--ctl);
  padding: 0 .6rem;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
}

.svc-btn-text { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-btn.svc-on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.chev { transition: transform .15s ease; color: var(--faint); }
.chev-up { transform: rotate(180deg); }

.svc-panel {
  position: absolute;
  top: calc(100% + .55rem);
  right: 0;
  z-index: 60;
  width: 20rem;
  max-height: 26rem;
  overflow-y: auto;
  padding: .35rem;
  border-radius: var(--radius);
  background: var(--glass-strong);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
}

.svc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .25rem;
  font-size: .72rem;
  color: var(--faint);
}

.svc-status {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .1rem .4rem;
  border-radius: 5px;
}

.svc-status.svc-ok       { background: var(--ok-soft);     color: var(--ok); }
.svc-status.svc-degraded { background: var(--warn-soft);   color: var(--warn); }
.svc-status.svc-down     { background: var(--bad-soft);    color: var(--bad); }
.svc-status.svc-idle     { background: var(--cool-soft);   color: var(--cool); }

.svc {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .6rem;
  border-radius: var(--radius-sm);
}

.svc:hover { background: var(--surface-soft); }

.svc-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.svc-info b { font-size: .82rem; font-weight: 600; }
.svc-info > span {
  font-size: .74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-up, .svc-down, .svc-idle {
  font-size: .66rem;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .05em;
  flex: none;
}

.svc-up   { color: var(--ok); }
.svc-down { color: var(--bad); }
.svc-idle { color: var(--faint); }
.svc-service-link { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.svc-service-link:hover, .svc-service-link:focus-visible { background: var(--surface-soft); outline: none; }
.svc-link-arrow { flex: none; color: var(--faint); transition: transform .14s ease, color .14s ease; }
.svc-service-link:hover .svc-link-arrow, .svc-service-link:focus-visible .svc-link-arrow { color: var(--accent); transform: translateX(2px); }

.svc-foot {
  padding: .6rem;
  margin-top: .25rem;
  border-top: 1px solid var(--line);
  font-size: .74rem;
  color: var(--faint);
}


.svc-models {
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px solid var(--line);
}

.svc-models-label {
  display: block;
  padding: .15rem .6rem .3rem;
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
}

.svc-models .svc-info b { font-family: var(--font-mono); font-size: .78rem; }



.dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--cool);
  box-shadow: 0 0 0 3px var(--cool-soft);
}

.dot-ok       { background: var(--ok);     box-shadow: 0 0 0 3px var(--ok-soft); }
.dot-bad      { background: var(--bad);    box-shadow: 0 0 0 3px var(--bad-soft); }
.dot-down     { background: var(--bad);    box-shadow: 0 0 0 3px var(--bad-soft); }
.dot-degraded { background: var(--warn);   box-shadow: 0 0 0 3px var(--warn-soft); }
.dot-idle     { background: var(--faint);  box-shadow: 0 0 0 3px rgba(145, 157, 174, .16); }



.workspace {
  grid-area: main;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  background:
    radial-gradient(760px 430px at 92% 4%, rgba(79, 70, 229, .055), transparent 62%),
    linear-gradient(180deg, #F8FAFD 0%, var(--bg-0) 100%);
}


.persona-admin  { --gutter: 1.5rem; }
.persona-functional { --gutter: 1.75rem; }
.persona-developer { --gutter: 1.75rem; }
.persona-employee { --gutter: 1.75rem; }

.view { min-height: 100%; }


.view[data-tone] .lead-eyebrow { color: var(--tone-ink, var(--accent-ink)); }

.screen {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 1500px;
  padding: var(--gutter) var(--gutter) 3rem;
  margin: 0 auto;
}

.screen-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.screen-head > div { min-width: 0; }
.screen-head h2 { margin-bottom: .3rem; }

.lede {
  max-width: 62ch;
  margin: 0;
  font-size: .875rem;
  color: var(--muted);
}

.center-pad { display: grid; place-items: center; padding: 5rem 1rem; color: var(--muted); }



.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: var(--ctl);
  padding: 0 .8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: -.008em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}

.btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}

.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(55, 48, 163, .2), 0 6px 18px var(--accent-glow);
}

.btn-primary:hover:not(:disabled) {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(55, 48, 163, .24), 0 10px 26px var(--accent-glow);
}

.btn-ghost {
  border-color: var(--line);
  background: rgba(255, 255, 255, .6);
  color: var(--muted);
}

.btn-ghost:hover:not(:disabled) { background: #fff; color: var(--accent-ink); }


.btn-dark {
  border-color: transparent;
  background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .24), 0 6px 18px rgba(15, 23, 42, .26);
}

.btn-dark:hover:not(:disabled) {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(15, 23, 42, .28), 0 10px 26px rgba(15, 23, 42, .32);
}


.btn-danger {
  border-color: rgba(240, 56, 79, .4);
  background: var(--bad-soft);
  color: var(--bad);
}

.btn-danger:hover:not(:disabled) {
  border-color: var(--bad);
  background: rgba(240, 56, 79, .16);
  color: var(--bad);
  box-shadow: var(--shadow-sm);
}

.btn-sm { height: 1.7rem; padding: 0 .55rem; font-size: .76rem; gap: .3rem; }
.btn-lg { height: 2.7rem; padding: 0 1.2rem; font-size: .92rem; }

.icon-btn { width: var(--ctl); padding: 0; flex: none; }

.link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: var(--accent-ink);
  text-align: left;
  cursor: pointer;
}

.link:hover { text-decoration: underline; }
.link.strong { font-weight: 600; color: var(--ink); }
.link.strong:hover { color: var(--accent-ink); }



input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-width: 0;
  padding: .45rem .6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: .86rem;
  color: var(--ink);
  transition: border-color .13s ease, box-shadow .13s ease;
}

input[type="text"],
input[type="search"],
input[type="password"],
select { height: var(--ctl); }

select { cursor: pointer; }
textarea { resize: vertical; line-height: 1.55; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--surface-soft);
  color: var(--faint);
  cursor: not-allowed;
}

input::placeholder, textarea::placeholder { color: var(--faint); }

input[type="file"] {
  width: 100%;
  font-size: .82rem;
  color: var(--muted);
}

input[type="file"]::file-selector-button {
  margin-right: .6rem;
  padding: .3rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  font-size: .8rem;
  color: var(--ink);
  cursor: pointer;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1rem; height: 1rem; }

.field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .9rem;
  min-width: 0;
}

.field:last-child { margin-bottom: 0; }

.field > span {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
}

.field > span em { font-weight: 400; color: var(--faint); font-style: normal; }

.field small, .field .hint {
  font-size: .74rem;
  color: var(--faint);
  line-height: 1.45;
}

.field .hint { order: 3; }
.field small { order: 4; }

.req { color: var(--bad); margin-left: .15rem; font-weight: 700; }

fieldset.field { border: 0; padding: 0; margin-inline: 0; }
fieldset.field legend { font-size: .8rem; font-weight: 600; padding: 0 0 .35rem; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .84rem;
  color: var(--muted);
  cursor: pointer;
}

.check input { margin-top: .18rem; flex: none; }

.drop {
  padding: .85rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.drop:hover { border-color: var(--accent); background: var(--accent-soft); }

.uploader { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.uploader .check, .uploader .actions { grid-column: 1 / -1; }

.inline-form { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.inline-form .field { margin-bottom: 0; }
.inline-form .btn { margin-bottom: .05rem; }


.idea-form { display: flex; flex-direction: column; gap: .85rem; }
.idea-form .field { margin-bottom: 0; }
.idea-form textarea { min-height: 3.4rem; }
.idea-form-actions { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; }
.idea-form-actions .muted { font-size: .78rem; color: var(--faint); }


.kb-search { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.kb-search select { width: auto; min-width: 11rem; }

.kb-search-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 12rem;
  height: var(--ctl);
  padding: 0 .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--faint);
  transition: border-color .13s ease, box-shadow .13s ease;
}

.kb-search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.kb-search-field input {
  flex: 1;
  height: 100%;
  border: 0;
  padding: 0;
  background: none;
  font-size: .86rem;
}

.kb-search-field input:focus { outline: none; box-shadow: none; }

.search-row { align-items: center; }
.search-row input[type="text"] { max-width: 12rem; }



.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.col { flex-direction: column; align-items: stretch; }
.grow { flex: 1; min-width: 0; }

.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.actions.col { flex-direction: column; align-items: stretch; }


.dash {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21.5rem;
  gap: 1.1rem;
  align-items: start;
}

.dash-main, .dash-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.kb-auto-sync-status { display: grid; gap: 10px; margin-bottom: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }
.kb-auto-sync-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kb-auto-sync-head > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.kb-auto-sync-head b { font-size: .8rem; }
.kb-auto-sync-pill { padding: 3px 8px; border-radius: 999px; font-size: .66rem; font-weight: 700; }
.kb-auto-sync-pill.on { background: var(--ok-soft); color: var(--ok-ink); }
.kb-auto-sync-pill.off { background: var(--surface); color: var(--muted); }
.kb-auto-sync-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.kb-auto-sync-meta > div { min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.kb-auto-sync-meta small { display: block; margin-bottom: 3px; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.kb-auto-sync-meta strong { display: block; overflow-wrap: anywhere; font-size: .72rem; font-weight: 650; }
.kb-auto-sync-error { margin: 0; color: var(--bad-ink); font-size: .72rem; }
.side-stack { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }



.panel {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
  transition: box-shadow .16s ease, border-color .16s ease;
}

.panel:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-header);
}

.panel-title { min-width: 0; }
.panel-title h3 { font-size: .93rem; font-weight: 650; }

.panel-sub {
  margin: .15rem 0 0;
  font-size: .78rem;
  color: var(--faint);
  line-height: 1.45;
}

.panel-acts { display: flex; align-items: center; gap: .45rem; flex: none; }
.panel-body { padding: 1.1rem; }
.panel-body.panel-flush { padding: 0; }

.ai-setup-form { display: grid; gap: 1rem; max-width: 52rem; }
.ai-model-row { display: flex; align-items: end; gap: .7rem; }
.ai-model-row .field { flex: 1; min-width: 0; }
.ai-fetch { flex: none; margin-bottom: .02rem; }
.ai-setup-form .actions { padding-top: .2rem; }
.ai-provider-list { display: grid; gap: .55rem; }
.ai-provider-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .38);
}
.ai-provider-row > span:nth-child(2) { display: grid; gap: .12rem; min-width: 0; }
.ai-provider-row b { font-family: var(--font-mono); font-size: .84rem; text-transform: capitalize; }
.ai-provider-row small { color: var(--faint); font-size: .75rem; overflow-wrap: anywhere; }
.ai-provider-row em { margin-left: auto; color: var(--ok); font-size: .75rem; font-style: normal; font-weight: 650; }
.ai-provider-status { display: grid; place-items: center; color: var(--faint); flex: none; }
.ai-provider-active { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); background: color-mix(in srgb, var(--ok) 7%, white); }
.ai-provider-active .ai-provider-status { color: var(--ok); }


.panel-flush > .toolbar,
.panel-flush > .chips,
.panel-flush > .busy-row,
.panel-flush > .notice,
.panel-flush > .empty-state,
.panel-flush > .pager,
.panel-flush > .explorer > .result-note { padding-inline: 1.1rem; }

.panel-flush > .toolbar { padding-top: 1rem; }
.panel-flush > .chips { padding-bottom: .9rem; }
.panel-flush > form.search-row { padding: 0 1.1rem .9rem; }
.panel-flush > .empty-state { padding-block: 2rem; }

.panel-ok { border-color: rgba(18, 183, 106, .3); }
.panel-ok .panel-head { background: var(--ok-soft); border-bottom-color: rgba(18, 183, 106, .22); }
.panel-ok .panel-title h3 { color: var(--ok-ink); }

.toolbar {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  margin-bottom: .9rem;
}

.toolbar:last-child { margin-bottom: 0; }
.toolbar select { width: auto; min-width: 9.5rem; }
.toolbar.filters { gap: .4rem; }



.kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-sm { gap: .75rem; margin-bottom: 1rem; }
.kpis-sm:last-child { margin-bottom: 0; }

.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .95rem 1.05rem 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}

.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }


.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--tone, var(--accent));
}



.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.kpi-label {
  font-size: .74rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.kpi-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--tone-soft, var(--accent-soft));
  color: var(--tone, var(--accent));
}

.kpi-value {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.kpi-hint { font-size: .76rem; color: var(--faint); line-height: 1.4; }



.tag {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  padding: .12rem .5rem;
  border-radius: 99px;
  letter-spacing: .02em;
  white-space: nowrap;
  text-transform: capitalize;
}

.tag-ok     { background: var(--ok-soft);     color: var(--ok); }
.tag-warn   { background: var(--warn-soft);   color: var(--warn); }
.tag-bad    { background: var(--bad-soft);    color: var(--bad); }
.tag-violet { background: var(--violet-soft); color: var(--violet); }
.tag-cool   { background: var(--cool-soft);   color: var(--cool); }
.tag-dim    { background: rgba(86, 96, 112, .1); color: var(--muted); }

.verdict {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 650;
  padding: .14rem .5rem;
  border-radius: 6px;
  white-space: nowrap;
}

.v-implemented { background: var(--ok-soft);      color: var(--ok); }
.v-partially   { background: var(--warn-soft);    color: var(--warn); }
.v-progress    { background: var(--accent-soft);  color: var(--accent-ink); }
.v-blocked     { background: var(--bad-soft);     color: var(--bad); }
.v-not         { background: rgba(86, 96, 112, .1); color: var(--muted); }
.v-unknown     { background: var(--violet-soft);  color: var(--violet); }



.chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1rem 0 0; }
.chips:first-child { padding-top: 0; }
.chips-sm { padding: 0; gap: .25rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  height: 1.85rem;
  padding: 0 .65rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: rgba(255, 255, 255, .7);
  font: inherit;
  font-size: .78rem;
  font-weight: 550;
  color: var(--muted);
  cursor: pointer;
  text-transform: capitalize;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.chip b {
  font-size: .7rem;
  font-weight: 700;
  padding: 0 .28rem;
  border-radius: 99px;
  background: rgba(86, 96, 112, .1);
  font-variant-numeric: tabular-nums;
}

.chip:hover { border-color: var(--line-strong); color: var(--ink); background: #fff; }

.chip.chip-on {
  border-color: transparent;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #fff;
  font-weight: 600;
  box-shadow: 0 3px 10px var(--accent-glow);
}

.chip.chip-on b { background: rgba(255, 255, 255, .24); color: #fff; }


.chip-draft::before,
.chip-in_review::before,
.chip-approved::before,
.chip-rejected::before,
.chip-superseded::before,
.chip-archived::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.chip-draft      { color: var(--muted); }
.chip-in_review  { color: var(--warn); }
.chip-approved   { color: var(--ok); }
.chip-rejected   { color: var(--bad); }
.chip-superseded { color: var(--violet); }
.chip-archived   { color: var(--cool); }
.chip-on::before { background: #fff; }



.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 2.4rem 1.5rem;
  text-align: center;
}

.empty-state b { font-size: .95rem; font-weight: 650; }
.empty-state p { max-width: 46ch; margin: 0; font-size: .84rem; color: var(--muted); }

.empty-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: .2rem;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem .95rem;
  margin-bottom: 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.notice:last-child { margin-bottom: 0; }
.notice-icon { flex: none; margin-top: .1rem; color: var(--muted); }
.notice-body { min-width: 0; flex: 1; }
.notice-body b { display: block; font-size: .85rem; font-weight: 650; margin-bottom: .1rem; }
.notice-body p { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.notice-body .btn { margin: .35rem .25rem 0 0; vertical-align: middle; }

.notice[data-kind="info"]  { border-left-color: var(--accent); background: var(--accent-soft); }
.notice[data-kind="info"] .notice-icon, .notice[data-kind="info"] .notice-body b { color: var(--accent-ink); }
.notice[data-kind="ok"]    { border-left-color: var(--ok); background: var(--ok-soft); }
.notice[data-kind="ok"] .notice-icon, .notice[data-kind="ok"] .notice-body b { color: var(--ok-ink); }
.notice[data-kind="warn"]  { border-left-color: var(--warn); background: var(--warn-soft); }
.notice[data-kind="warn"] .notice-icon, .notice[data-kind="warn"] .notice-body b { color: var(--warn-ink); }
.notice[data-kind="error"] { border-left-color: var(--bad); background: var(--bad-soft); }
.notice[data-kind="error"] .notice-icon, .notice[data-kind="error"] .notice-body b { color: var(--bad-ink); }

.callout {
  padding: .7rem .85rem;
  margin-bottom: .9rem;
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  font-size: .82rem;
  color: var(--warn-ink);
}

.callout:last-child { margin-bottom: 0; }



.meter { display: flex; flex-direction: column; gap: .5rem; }

.meter-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 2.5rem 2.75rem;
  align-items: center;
  gap: .6rem;
}

.meter-label { font-size: .82rem; color: var(--muted); text-transform: capitalize; }

.meter-track {
  height: 8px;
  border-radius: 99px;
  background: rgba(86, 96, 112, .1);
  overflow: hidden;
}

.meter-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  transition: width .3s ease;
}

.fill-draft      { background: var(--faint); }
.fill-in_review  { background: var(--warn); }
.fill-approved   { background: var(--ok); }
.fill-rejected   { background: var(--bad); }
.fill-superseded { background: var(--violet); }
.fill-archived   { background: var(--cool); }

.meter-value { font-size: .85rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.meter-share { font-size: .76rem; color: var(--faint); text-align: right; font-variant-numeric: tabular-nums; }

.stats { display: flex; flex-wrap: wrap; gap: .5rem; }

.stat {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  min-width: 4.75rem;
  flex: 1;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.stat b { font-size: 1.1rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat > span { font-size: .72rem; color: var(--faint); }


.check-notes {
  margin: .85rem 0 0;
  padding: .6rem .7rem .6rem 1.6rem;
  border: 1px solid rgba(245, 158, 11, .26);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: .78rem;
  line-height: 1.45;
}

.check-notes li + li { margin-top: .35rem; }

.progress-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(71, 85, 105, .1);
  overflow: hidden;
}

.progress-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  transition: width .3s ease;
}



.meta { display: flex; flex-direction: column; gap: 0; margin: 0; }

.meta > div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: .75rem;
  padding: .42rem 0;
  border-bottom: 1px dashed var(--line);
}

.meta > div:last-child { border-bottom: 0; }
.meta dt { font-size: .78rem; color: var(--faint); }
.meta dd {
  margin: 0;
  font-size: .82rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.meta-inline { margin-bottom: .5rem; }
.meta-inline > div { grid-template-columns: 7rem minmax(0, 1fr); }

.tips { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.tips li { font-size: .82rem; color: var(--muted); line-height: 1.55; }
.tips b { color: var(--ink); }



.spinner-wrap { display: inline-flex; align-items: center; gap: .55rem; font-size: .85rem; color: var(--muted); }

.spinner {
  width: 15px;
  height: 15px;
  flex: none;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

.spinner.big { width: 34px; height: 34px; border-width: 3px; }

@keyframes spin { to { transform: rotate(360deg); } }

.busy-row { padding: .8rem 0; }

.sync-log {
  margin: 0;
  max-height: 24rem;
  overflow: auto;
  padding: .7rem .8rem;
  border-radius: var(--radius);
  background: rgba(16, 24, 48, .92);
  color: #d7e3ff;
  font: .78rem/1.55 var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}



.table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

table { width: 100%; border-collapse: collapse; font-size: .84rem; }

thead { background: var(--surface-header); }

th {
  text-align: left;
  vertical-align: middle;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  background: rgba(255, 255, 255, .68);
}


.col-check { width: 1%; text-align: center; }
.col-check input[type="checkbox"] { margin: 0; cursor: pointer; vertical-align: middle; }

tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) td { background: var(--surface-subtle); }
tbody tr:hover td { background: rgba(79, 70, 229, .06); }

.data-table th:first-child, .data-table td:first-child { padding-left: 1.1rem; }
.data-table th:last-child,  .data-table td:last-child  { padding-right: 1.1rem; }

.sticky-head thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(247, 249, 252, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

button.sort-btn:hover { color: var(--accent-ink); }
.sort-btn i { font-style: normal; font-size: .6rem; color: var(--accent); }

.title-cell { max-width: 22rem; }
.title-cell button { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-cell { white-space: nowrap; }

.you-chip {
  display: inline-block;
  margin-left: .35rem;
  padding: .02rem .32rem;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.lib-table td { vertical-align: middle; }
.lib-acts { display: flex; gap: .3rem; flex-wrap: nowrap; }
.row-busy { opacity: .5; }


.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .6rem 1.1rem;
  background: var(--accent-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .82rem;
  color: var(--accent-ink);
}
.bulk-bar b { font-weight: 700; }

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .8rem;
}

.mini-table td { vertical-align: middle; }
.mini-table th:first-child, .mini-table td:first-child { padding-left: 0; }
.mini-table th:last-child, .mini-table td:last-child { padding-right: 0; }

.matrix-table td { font-size: .82rem; }
.matrix-table td:nth-child(2) { min-width: 18rem; }

.lib-detail { border-color: var(--accent); box-shadow: var(--shadow-md); }
.lib-detail .panel-head { background: var(--accent-soft); border-bottom-color: rgba(79, 91, 255, .2); }



.implementation-screen { gap: 1.25rem; }
.implementation-head { align-items: center; }
.implementation-head .lede { max-width: 76ch; }

.implementation-create {
  border-color: rgba(79, 91, 255, .2);
  box-shadow: var(--shadow-sm);
}

.implementation-create .panel-head {
  background: linear-gradient(90deg, rgba(79, 70, 229, .075), var(--surface-header) 58%);
}

.implementation-create-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 1.65fr) minmax(13rem, .85fr) auto;
  gap: .9rem;
  align-items: end;
}

.implementation-create-action {
  display: flex;
  align-items: flex-end;
  padding-bottom: 1.24rem;
}

.implementation-cost-note {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .79rem;
}
.implementation-cost-note svg { color: var(--ok); flex: none; }

.implementation-plan-table td { vertical-align: middle; }
.implementation-plan-table .title-cell { min-width: 15rem; }
.implementation-plan-active { background: var(--accent-soft); }
.implementation-plan-active:hover { background: var(--accent-soft); }

.implementation-delete-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  padding: .75rem 1.1rem 1rem;
  border-top: 1px solid var(--line);
}
.implementation-delete-confirm .callout { margin: 0; flex: 1 1 28rem; }

.implementation-detail {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface-section);
}

.implementation-plan-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.05rem 1.15rem;
  border: 1px solid rgba(79, 91, 255, .2);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(79, 91, 255, .08), rgba(255, 255, 255, .88));
  box-shadow: var(--shadow-sm);
}
.implementation-plan-hero h3 { margin: .45rem 0 .15rem; font-size: 1.12rem; }
.implementation-plan-hero p { margin: 0; color: var(--muted); font-size: .82rem; }

.implementation-kpis { margin: 0; }
.implementation-readiness { display: grid; gap: .55rem; }

.implementation-workbench { overflow: hidden; }
.implementation-meta-strip {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: .85rem;
  padding: .65rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: .78rem;
}
.implementation-meta-strip span { display: inline-flex; gap: .35rem; align-items: baseline; min-width: 0; }
.implementation-meta-strip b { color: var(--faint); font-size: .67rem; text-transform: uppercase; letter-spacing: .05em; }
.implementation-meta-strip code { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.implementation-item-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.implementation-item-toolbar .chips { margin: 0; }
.implementation-items-wrap { max-height: 38rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-raised); }
.implementation-items-table { min-width: 1040px; }
.implementation-items-table td { vertical-align: middle; }
.implementation-items-table .title-cell { min-width: 20rem; }
.implementation-item-description { margin: .2rem 0; line-height: 1.4; }
.implementation-executor { max-width: 18rem; margin-top: .25rem; line-height: 1.35; }
.implementation-blocker { margin-top: .35rem; color: var(--warn-ink); font-size: .76rem; font-weight: 600; }
.implementation-review-actions { flex-wrap: nowrap; }

.implementation-gate-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-bottom: .85rem;
}
.implementation-gate-row > div {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding: .7rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: .81rem;
}
.implementation-gate-actions { margin-bottom: .75rem; }

.implementation-danger {
  border-color: rgba(240, 56, 79, .24);
}
.implementation-danger .panel-head { background: rgba(240, 56, 79, .04); }

@media (max-width: 980px) {
  .implementation-create-grid { grid-template-columns: 1fr 1fr; }
  .implementation-create-action { grid-column: 1 / -1; padding-bottom: 0; }
  .implementation-create-action .btn { width: 100%; }
  .implementation-gate-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .implementation-create-grid { grid-template-columns: 1fr; }
  .implementation-plan-hero { align-items: flex-start; }
  .implementation-plan-hero > .actions { width: 100%; }
  .implementation-plan-hero > .actions .btn { flex: 1 1 auto; }
}



.sections { display: grid; gap: 10px; }

.sections details {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.sections details[open] { border-color: var(--line-strong); background: var(--surface-section); box-shadow: var(--shadow-sm); }

.sections summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  padding: .65rem .85rem;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  background: var(--surface-raised);
}

.sections summary::-webkit-details-marker { display: none; }
.sections summary:hover { background: var(--surface-soft); }
.sections summary::after { content: "›"; color: var(--faint); font-size: 1.25rem; line-height: 1; transition: transform .15s ease; }
.sections details[open] > summary::after { transform: rotate(90deg); color: var(--accent-ink); }
.sections summary .tag { margin-left: auto; }

.section-index {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font: 700 .7rem var(--font-mono);
}
.sections details[open] .section-index { border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); }
.section-summary-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
.section-summary-copy b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: .88rem; }
.section-summary-copy small { color: var(--faint); font-size: .68rem; font-weight: 500; }

.sections .body {
  padding: 0 .85rem .85rem;
  font-size: .84rem;
  color: var(--ink);
  line-height: 1.65;
  background: var(--surface-section);
}

.section-content { padding: 18px 20px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); box-shadow: 0 1px 2px rgba(15, 23, 42, .025); }
.section-blocks { display: grid; gap: 20px; }
.section-block + .section-block { padding-top: 18px; border-top: 1px solid var(--line); }
.section-block h5 { margin: 0 0 9px; color: var(--ink); font-size: .88rem; font-weight: 700; letter-spacing: -.01em; }
.section-block p, .section-prose p { margin: 0; color: var(--muted); }
.section-block p + p, .section-prose p + p { margin-top: 9px; }
.section-block ul, .section-list-content { display: grid; gap: 9px; margin: 10px 0 0; padding-left: 1.15rem; }
.section-point { padding-left: 2px; color: var(--muted); }
.section-point strong { color: var(--ink); font-weight: 650; }
.section-subpoints { gap: 5px !important; margin-top: 6px !important; color: var(--muted); }
.section-list-content { margin: 0; }
.section-list-content li { padding-left: 2px; color: var(--muted); }
.section-table-wrap { overflow-x: auto; }
.section-table-wrap .data-table { margin: 0; min-width: 620px; }
/* The flowchart is drawn on white in both themes, as it prints. */
.section-diagram { margin: 20px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: center; }
.section-diagram img { display: block; width: 100%; height: auto; margin: 0 auto; }
.section-diagram-note { margin: 0; color: #55607a; font-size: .85rem; }
.section-diagram-missing { margin-top: 16px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); }
.section-table-wrap .data-table th { background: var(--surface-soft); }
.section-empty-note { padding: 12px 14px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); }


details.advanced, details.signin-advanced {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 0;
  margin-top: .5rem;
}

details.advanced > summary, details.signin-advanced > summary {
  padding: .5rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}

details.advanced[open] > summary, details.signin-advanced[open] > summary { border-bottom: 1px solid var(--line); }
details.advanced > .field, details.signin-advanced > .field { padding: .8rem .7rem; margin-bottom: 0; }

summary { cursor: pointer; }





.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.feed-item {
  position: relative;
  display: flex;
  gap: .75rem;
  padding: .6rem 0;
}

.feed-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.5rem;
  bottom: -.1rem;
  width: 1px;
  background: var(--line);
}

.feed-dot {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  flex: none;
  margin-top: .45rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
}

.feed-body { min-width: 0; flex: 1; }
.feed-body p { margin: 0; font-size: .84rem; line-height: 1.45; }
.feed-body b { font-weight: 650; }
.feed-doc { color: var(--accent-ink); font-weight: 550; }
.feed-ver { color: var(--faint); font-family: var(--font-mono); font-size: .78rem; }
.feed-meta { font-size: .75rem; color: var(--faint); }

.quicks { display: flex; flex-direction: column; gap: .45rem; }

.quick {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}

.quick:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateX(2px); }
.quick:disabled { opacity: .55; cursor: not-allowed; }

.quick-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
}

.quick-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.quick-text b { font-size: .84rem; font-weight: 600; }
.quick-text > span { font-size: .75rem; color: var(--faint); }
.quick-go { color: var(--line-strong); flex: none; }
.quick:hover .quick-go { color: var(--accent); }

/* One-line health summary, on both dashboards. The header services menu is intentionally
   compact; setup and integration management live in Administration > Configuration. */
.health-line {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .84rem;
  color: var(--ink);
}

.welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-line);
  background:
    radial-gradient(500px 220px at 92% 0%, rgba(79, 70, 229, .15), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7));
  box-shadow: var(--shadow-md);
}

.welcome h2 { margin-bottom: .35rem; color: var(--ink); }
.cta { flex: none; box-shadow: 0 2px 6px rgba(20, 40, 100, .18), 0 12px 30px var(--accent-glow); }



.dep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; }

.dep-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.dep-card p { margin: 0; font-size: .8rem; color: var(--muted); }
.dep-card-head { display: flex; align-items: center; gap: .5rem; }
.dep-card-head b { font-family: var(--font-mono); font-size: .84rem; }
.dep-card-head em { margin-left: auto; }
.dep-ok  { border-left-color: var(--ok); }
.dep-idle { border-left-color: var(--faint); background: var(--surface-soft); }
.dep-bad { border-left-color: var(--bad); background: var(--bad-soft); }

.dep-endpoint {
  font-size: .72rem;
  color: var(--faint);
  overflow-wrap: anywhere;
}


.dep-more {
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 4.5rem;
  border: 1px dashed var(--line-strong);
  border-left: 3px dashed var(--accent);
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.dep-more:hover,
.dep-more:focus-visible {
  border-color: var(--accent);
  background: var(--surface-soft);
  color: var(--ink);
  outline: none;
}

.dep-more .dep-card-head { justify-content: center; }
.dep-more .dep-more-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
}
.dep-more p { color: inherit; opacity: .85; }



.signin {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem 1.25rem;
}

.signin-card {
  display: grid;
  grid-template-columns: 24rem minmax(0, 25rem);
  width: 100%;
  max-width: 54rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
}

.signin-rail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.6rem;
  color: var(--side-ink);
  background:
    radial-gradient(420px 260px at 12% 8%, rgba(79, 70, 229, .35), transparent 68%),
    linear-gradient(170deg, var(--side-bg), var(--side-bg-2));
}

.signin-rail .side-brand { padding: 0; height: auto; border-bottom: 0; }

.signin-brand { display: flex; }
.signin-logo {
  height: 46px;
  width: auto;
  background: #fff;
  border-radius: 12px;
  padding: 8px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

.signin-pitch { flex: 1; }
.signin-pitch h1 { font-size: 1.5rem; margin-bottom: .7rem; color: #fff; }
.signin-pitch p { font-size: .85rem; color: var(--side-muted); line-height: 1.6; margin: 0; }

.signin-services {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .75rem .85rem;
  border-radius: var(--radius);
  border: 1px solid var(--side-border);
  background: rgba(0, 0, 0, .22);
}

.signin-services-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .5rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--side-border);
  font-size: .76rem;
}

.signin-service {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .22rem 0;
  font-size: .74rem;
  color: var(--side-muted);
  min-width: 0;
}

.signin-service b { font-family: var(--font-mono); color: rgba(255, 255, 255, .8); flex: none; }
.signin-service > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.signin-foot { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--side-muted); }
.signin-foot a { color: rgba(255, 255, 255, .9); text-decoration: underline; text-underline-offset: 2px; }
.signin-foot a:hover { color: #fff; }

.signin-form { padding: 1.75rem 1.85rem; background: rgba(255, 255, 255, .55); }
.signin-form h2 { margin-bottom: .35rem; }
.signin-form .lede { margin-bottom: 1.25rem; font-size: .82rem; }
.signin-form .actions { margin-top: 1.25rem; }
.signin-form .actions .btn { width: 100%; }
.signin-form .btn-primary .spinner { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
.signin-form .btn-primary .spinner-wrap { color: #fff; }

.role-pick {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .6rem .7rem;
  margin-bottom: .4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease;
}

.role-pick:last-child { margin-bottom: 0; }
.role-pick:hover { border-color: var(--line-strong); }
.role-pick input { margin-top: .2rem; flex: none; }
.role-pick-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.role-pick-text b { font-size: .84rem; font-weight: 600; }
.role-pick-text > span { font-size: .75rem; color: var(--faint); }

.role-picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.role-tick { color: var(--accent); flex: none; margin-top: .25rem; }



.matrix-wrap { overflow-x: auto; margin: -.25rem -.35rem; padding: .25rem .35rem; }

.matrix td, .matrix th { border-bottom: 1px solid var(--line); }
.matrix td:first-child { font-size: .83rem; min-width: 16rem; }
.matrix-role { text-align: center; }
.matrix-cell { text-align: center; vertical-align: middle; }

.matrix-you { background: var(--accent-soft); }
th.matrix-you { color: var(--accent-ink); }

.matrix-tag {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--accent);
}

.matrix-cell .yes { color: var(--ok); display: inline-grid; place-items: center; }
.matrix-cell .no { color: var(--line-strong); }
.matrix-route { font-size: .72rem; color: var(--faint); white-space: nowrap; }

.role-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }

.role-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .85rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.role-card p { margin: 0; font-size: .8rem; color: var(--muted); flex: 1; }
.role-card > span { font-size: .74rem; }
.role-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.role-card-head .muted { font-size: .7rem; }
.role-card-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-sm); }



.steps-rail {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
}

.steps-rail-bar { display: flex; align-items: center; gap: .85rem; font-size: .82rem; color: var(--muted); }
.steps-rail-bar > span { flex: none; }
.steps-rail-bar b { color: var(--ink); font-variant-numeric: tabular-nums; }
.steps-rail-bar .progress-bar { flex: 1; }
.steps-rail-pct { font-size: .9rem; font-weight: 700; color: var(--accent-ink); flex: none; }

.steps-rail-list {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  list-style: none;
  margin: 0;
  padding: 0 0 .2rem;
  scrollbar-width: thin;
}

.steps-rail-list li { flex: none; }

.step-pip {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  font: inherit;
  font-size: .78rem;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .13s ease, color .13s ease;
}

.step-pip:hover { border-color: var(--accent); color: var(--accent-ink); }

.step-pip i {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 50%;
  background: rgba(86, 96, 112, .12);
  color: var(--muted);
  font-size: .68rem;
  font-style: normal;
  font-weight: 700;
}

.step-pip em { font-style: normal; font-size: .7rem; color: var(--faint); font-variant-numeric: tabular-nums; }

.step-done { border-color: rgba(18, 183, 106, .35); background: var(--ok-soft); color: var(--ok-ink); }
.step-done i { background: var(--ok); color: #fff; }
.step-done em { color: rgba(8, 116, 67, .75); }
.step-todo i { background: var(--accent-soft); color: var(--accent-ink); }

.gen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: 1.1rem;
  align-items: start;
}

.gen-main { min-width: 0; }

.gen-side {
  position: sticky;
  top: 1rem;
  min-width: 0;
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: .15rem;
}

.interview { display: flex; flex-direction: column; gap: 1.1rem; }
.interview .panel { scroll-margin-top: 1rem; }

.interview .panel-title h3 { display: flex; align-items: center; gap: .55rem; }


.interview-mode {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.interview-mode > span { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.interview-mode b { font-size: .82rem; font-weight: 650; color: var(--ink); }
.interview-mode small { font-size: .74rem; color: var(--faint); line-height: 1.4; }
.interview-mode .check { flex: none; font-size: .8rem; }


.interview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.1rem;
}

.interview-grid .field { margin-bottom: 0; }
.interview-grid .field-wide { grid-column: 1 / -1; }

@media (max-width: 1280px) {
  .interview-grid { grid-template-columns: minmax(0, 1fr); }
}

.step-no {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .72rem;
  font-weight: 700;
}

.ready-num { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .45rem; }
.ready-num b { font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--accent-ink); }
.ready-num > span { font-size: .76rem; color: var(--faint); line-height: 1.35; }
.ready-num-sm { margin-top: 1.1rem; }
.ready-num-sm b { font-size: 1.35rem; color: var(--violet); }
.ready-num + .progress-bar + .actions { margin-top: 1.1rem; }
.ready-num ~ .actions .muted { font-size: .76rem; text-align: center; margin: 0; }

.gap-block { margin-bottom: 1.1rem; }
.gap-block:last-child { margin-bottom: 0; }

.gap-block > b {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 650;
  margin-bottom: .45rem;
  color: var(--muted);
}

.gap-required > b { color: var(--bad); }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }

.checklist li {
  position: relative;
  padding-left: 1rem;
  font-size: .8rem;
  line-height: 1.45;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--line-strong);
}

.gap-required .checklist li::before { background: var(--bad); }

.tag-list { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }

.tag-list li {
  padding: .12rem .5rem;
  border-radius: 99px;
  background: var(--violet-soft);
  color: var(--violet);
  font-size: .72rem;
  font-weight: 600;
}



.gen-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(21, 32, 43, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gen-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 1.5rem;
  width: 100%;
  max-width: 44rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--glass-strong);
  box-shadow: var(--shadow-lg);
}

.gen-left { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.gen-left h3 { font-size: 1.05rem; margin-top: .35rem; }
.gen-left .muted { font-size: .82rem; }
.gen-progress { width: 100%; margin-top: .75rem; }
.gen-percent { font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--accent-ink); }
.gen-percent span { font-size: 1.1rem; font-weight: 600; margin-left: .1rem; }
.gen-progress .progress-bar { margin: .6rem 0 .5rem; height: 9px; }
.gen-phase { font-size: .82rem; color: var(--muted); min-height: 2.4em; }

.gen-steps-col {
  min-width: 0;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
  max-height: 17rem;
  overflow-y: auto;
}

.gen-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }

.gen-steps li { display: flex; align-items: flex-start; gap: .45rem; font-size: .8rem; }

.st-ok, .st-err {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  font-size: .64rem;
  font-weight: 700;
}

.st-ok  { background: var(--ok-soft);  color: var(--ok); }
.st-err { background: var(--bad-soft); color: var(--bad); }
.st-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tag { font-style: normal; font-size: .68rem; color: var(--faint); flex: none; }

.st-why {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  font-style: normal;
  font-size: .68rem;
  line-height: 1.35;
  color: var(--bad);
  margin-top: .1rem;
}



.search-results { display: flex; flex-direction: column; gap: .75rem; }

.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; }
.results-list { display: flex; flex-direction: column; gap: .6rem; }

.passage {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .85rem .95rem;
  border-radius: var(--radius);
  transition: box-shadow .16s ease, transform .16s ease;
}

.passage:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.passage header { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }

.passage-src {
  font-size: .74rem;
  font-weight: 650;
  color: var(--accent-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.passage-score {
  flex: none;
  font-size: .7rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: .06rem .35rem;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-ink);
}

.passage p {
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.58;
  
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.results-list .passage p { -webkit-line-clamp: 4; }

.passage-foot {
  font-size: .72rem;
  color: var(--faint);
  padding-top: .35rem;
  border-top: 1px dashed var(--line);
}



.ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); gap: 1rem; }

.idea {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1.1rem 1.15rem;
  border-radius: var(--radius);
  transition: box-shadow .16s ease, transform .16s ease;
}

.idea:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.idea header { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.idea header h3 { font-size: 1rem; line-height: 1.35; }

.idea-target {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent-ink);
}

.idea-body { margin: 0; font-size: .85rem; color: var(--muted); line-height: 1.6; flex: 1; }

.idea-next {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
  padding: .6rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  font-size: .82rem;
  color: var(--ink);
}

.idea-next b {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent-ink);
}

.idea-evidence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--line);
}

.idea-evidence > span:first-child {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--faint);
  margin-right: .15rem;
}

.ref {
  padding: .08rem .38rem;
  border-radius: 5px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  font-size: .7rem;
  color: var(--muted);
}



.explorer-page { max-width: 1480px; margin-inline: auto; }

.explorer-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}

.explorer-stat {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--surface), var(--surface-soft));
}

.explorer-stat-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}

.explorer-stat > div { min-width: 0; }
.explorer-stat small { display: block; margin-bottom: 3px; color: var(--muted); font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.explorer-stat strong { display: block; overflow: hidden; text-overflow: ellipsis; font-size: .95rem; white-space: nowrap; }

.explorer { display: flex; flex-direction: column; }
.explorer-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.1rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.explorer-results-head .result-note { margin: 0; padding: 0; }

.explorer-page-size { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .75rem; }
.explorer-page-size select { min-height: 32px; padding: .28rem 1.7rem .28rem .55rem; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: .78rem; }

.explorer-table { min-width: 940px; }
.explorer-id { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }

.explorer-title-button {
  display: grid;
  gap: 3px;
  max-width: 24rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.explorer-title-button b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.explorer-title-button small { color: var(--accent); font-size: .68rem; }
.explorer-title-button:hover b,
.explorer-title-button:focus-visible b { color: var(--accent-ink); }
.explorer-title-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.explorer-detail-row td { padding: 0 !important; background: var(--surface-soft); }
.explorer-record-detail { display: grid; gap: .8rem; padding: 1rem 1.1rem 1.1rem; border-top: 1px dashed var(--line-strong); }
.explorer-detail-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.explorer-detail-facts span { min-width: 0; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.explorer-detail-facts small { display: block; margin-bottom: 3px; color: var(--faint); font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; }
.explorer-detail-facts b { display: block; overflow-wrap: anywhere; font-size: .78rem; font-weight: 600; }
.explorer-record-detail pre { max-height: 260px; margin: 0; padding: .8rem .9rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); font: .74rem/1.65 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.explorer-pager { margin: 0; }

@media (max-width: 900px) {
  .explorer-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .explorer-stats { grid-template-columns: minmax(0, 1fr); }
  .explorer-results-head { align-items: flex-start; flex-direction: column; }
  .explorer-detail-facts { grid-template-columns: minmax(0, 1fr); }
}



.doc-list { display: flex; flex-direction: column; gap: .4rem; }

.doc-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  transition: border-color .13s ease;
}

.doc-item:hover { border-color: var(--line-strong); background: #fff; }

.doc-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--violet-soft);
  color: var(--violet);
}

.doc-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.doc-name { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.doc-name b {
  font-size: .84rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-main > .muted { font-size: .74rem; }

.doc-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
  font-size: .76rem;
  font-family: var(--font-mono);
  line-height: 1.35;
}



@media (max-width: 1240px) {
  .dash, .gen { grid-template-columns: minmax(0, 1fr); }
  .gen-side { position: static; max-height: none; overflow: visible; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1060px) {
  
  .svc-btn-text { display: none; }
  .uploader { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  
  :root, .persona-admin, .persona-employee { --gutter: 1rem; }
  .topsearch { display: none; }
  .crumb { margin-right: auto; }
  .kpis, .kpis-3 { grid-template-columns: minmax(0, 1fr); }
  .signin-card { grid-template-columns: minmax(0, 1fr); max-width: 27rem; }
  .signin-rail { gap: 1.1rem; }
  .signin-pitch h1 { font-size: 1.2rem; }
  .gen-card { grid-template-columns: minmax(0, 1fr); }
  .gen-steps-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
  .meter-row { grid-template-columns: 6rem minmax(0, 1fr) 2.25rem 2.5rem; gap: .4rem; }
  .meta > div, .meta-inline > div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .welcome { padding: 1.1rem; }
  .cta { width: 100%; }
}

@media (max-width: 620px) {
  .pill-warn { display: none; }
  .results-grid, .ideas, .dep-cards, .role-cards { grid-template-columns: minmax(0, 1fr); }
}


.stage { height: 100dvh; transition: grid-template-columns .26s cubic-bezier(.22,.8,.3,1); }
.sidebar {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 28% -8%, rgba(111, 118, 255, .16), transparent 30%),
    linear-gradient(184deg, var(--side-bg) 0%, var(--side-bg-2) 100%);
  box-shadow: 10px 0 28px rgba(7, 12, 30, .08);
  transition: box-shadow .24s ease;
}
.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.025) 32%, rgba(255,255,255,.07));
}
.side-brand {
  height: 88px;
  padding-inline: 14px 12px;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  column-gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  transition: transform .22s cubic-bezier(.22,.8,.3,1), box-shadow .22s ease;
}
.side-brand:hover .brand-mark { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.2); }
.brand-lockup { transition: opacity .18s ease, transform .24s cubic-bezier(.22,.8,.3,1); }
.brand-lockup b { font-size: .9rem; font-weight: 680; letter-spacing: -.015em; }
.brand-lockup > span { margin-top: 1px; font-size: .65rem; opacity: .8; }
.side-toggle {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .22s cubic-bezier(.22,.8,.3,1), box-shadow .16s ease;
}
.side-toggle:hover { transform: translateX(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.16); }
.side-toggle:active { transform: scale(.93); }
.side-toggle .icon { transition: transform .26s cubic-bezier(.22,.8,.3,1); }
.side-nav { padding: 14px 11px 16px; }
.nav-group { gap: 4px; }
.nav-group + .nav-group { border-top: 0; padding-top: 13px; margin-top: 11px; position: relative; }
.nav-group + .nav-group::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.09) 12%, rgba(255,255,255,.09) 88%, transparent);
}
.nav-group-label {
  color: rgba(255,255,255,.42);
  font-size: .59rem;
  letter-spacing: .13em;
  padding: 0 11px 6px;
  transition: opacity .16s ease, transform .22s cubic-bezier(.22,.8,.3,1), max-height .22s ease, padding .22s ease;
}
.nav-item {
  min-height: 44px;
  border-radius: 10px;
  padding: 8px 10px;
  gap: 9px;
  font-weight: 520;
  font-size: .81rem;
  overflow: hidden;
  transition: background .16s ease, color .16s ease, box-shadow .2s ease, transform .16s ease;
}
.nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.07), transparent 42%);
  transition: opacity .18s ease;
}
.nav-item:hover { transform: translateX(2px); background: rgba(255,255,255,.065); }
.nav-item:hover::after { opacity: 1; }
.nav-item:active { transform: translateX(1px) scale(.985); }
.nav-icon-wrap {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
  transition: transform .2s cubic-bezier(.22,.8,.3,1), background .18s ease, box-shadow .18s ease;
}
.nav-item:hover .nav-icon-wrap { transform: scale(1.06); background: rgba(255,255,255,.075); box-shadow: inset 0 0 0 1px rgba(255,255,255,.055); }
.nav-item .icon { transition: opacity .16s ease, transform .2s cubic-bezier(.22,.8,.3,1), color .16s ease; }
.nav-item:hover .icon { transform: scale(1.04); }
.nav-text { display: block; min-width: 0; flex: 1; transition: opacity .16s ease, transform .22s cubic-bezier(.22,.8,.3,1), max-width .22s cubic-bezier(.22,.8,.3,1); }
.nav-item.nav-on {
  background: linear-gradient(96deg, var(--side-active), var(--side-accent-mid));
  box-shadow: inset 0 0 0 1px var(--side-accent-soft), 0 7px 18px rgba(17,23,60,.18);
  transform: translateX(2px);
  animation: nav-activate .24s cubic-bezier(.22,.8,.3,1);
}
.nav-item.nav-on::after { opacity: 1; background: linear-gradient(110deg, rgba(255,255,255,.09), transparent 50%); }
.nav-item.nav-on::before {
  left: -11px;
  width: 3px;
  height: 22px;
  border-radius: 0 99px 99px 0;
  background: var(--side-accent-soft);
  box-shadow: 0 0 14px rgba(99, 102, 241, .55);
}
.nav-item.nav-on .nav-icon-wrap { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 4px 12px rgba(0,0,0,.10); }
.side-foot {
  margin: 0 9px 9px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  backdrop-filter: blur(8px);
  transition: background .18s ease, border-color .18s ease, padding .22s ease, margin .22s ease;
}
.side-foot:hover { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.11); }
.avatar-side { width: 31px; height: 31px; transition: transform .18s ease, background .18s ease; }
.side-foot:hover .avatar-side { transform: scale(1.04); background: rgba(255,255,255,.16); }
.side-who-text { transition: opacity .16s ease, transform .22s cubic-bezier(.22,.8,.3,1); }
.side-out { border-radius: 8px; transition: background .16s ease, color .16s ease, transform .16s ease; }
.side-out:hover { transform: translateX(1px); }
.stage.sidebar-collapsed { --nav-w: var(--nav-rail); }
.sidebar-collapsed .side-brand { display: flex; justify-content: center; padding-inline: 0; }
.sidebar-collapsed .brand-mark, .sidebar-collapsed .brand-lockup { display: none; }
.sidebar-collapsed .side-toggle { width: 38px; height: 38px; margin: 0; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #fff; }
.sidebar-collapsed .side-toggle .icon { transform: rotate(180deg); }
.sidebar-collapsed .side-nav { padding-inline: 12px; overflow-x: visible; }
.sidebar-collapsed .nav-group { align-items: center; }
.sidebar-collapsed .nav-group + .nav-group { width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-collapsed .nav-group + .nav-group::before { display: none; }
.sidebar-collapsed .nav-group-label { max-height: 0; overflow: hidden; opacity: 0; padding-block: 0; transform: translateX(-6px); }
.sidebar-collapsed .nav-text { width: 0; max-width: 0; opacity: 0; transform: translateX(-6px); pointer-events: none; }
.sidebar-collapsed .nav-item { justify-content: center; width: 44px; min-height: 44px; padding: 7px; gap: 0; transform: none; }
.sidebar-collapsed .nav-item.nav-on::before { left: -12px; }
.sidebar-collapsed .nav-icon-wrap { width: 31px; height: 31px; }
.sidebar-collapsed .nav-item:hover { transform: none; }
.sidebar-collapsed .nav-item:hover .nav-icon-wrap { transform: scale(1.09); }
.sidebar-collapsed .side-foot { flex-direction: column; justify-content: center; gap: 7px; margin: 0 8px 9px; padding: 9px 0; }
.sidebar-collapsed .side-who { flex: none; }
.sidebar-collapsed .side-who-text { width: 0; max-width: 0; overflow: hidden; opacity: 0; transform: translateX(-6px); }
.sidebar-collapsed .side-out { width: 34px; height: 34px; }
@keyframes nav-activate {
  from { opacity: .72; transform: translateX(-2px) scale(.985); }
  to { opacity: 1; transform: translateX(2px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .stage, .sidebar, .brand-mark, .brand-lockup, .side-toggle, .side-toggle .icon,
  .nav-group-label, .nav-item, .nav-item::after, .nav-icon-wrap, .nav-item .icon,
  .nav-text, .side-foot, .avatar-side, .side-who-text, .side-out {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
.topsearch { max-width: 360px; background: var(--surface-soft); border-color: var(--line); box-shadow: none; }
.screen { max-width: 1380px; padding: 34px clamp(20px, 3vw, 46px) 48px; gap: 24px; }
.screen-head { align-items: center; }
.screen-head h2 { font-size: clamp(1.4rem, 2vw, 1.7rem); letter-spacing: -.02em; line-height: 1.28; font-weight: 700; }
.lede { font-size: .88rem; line-height: 1.65; color: var(--muted); }
.panel:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.panel-head { padding: 20px 24px; background: var(--surface-header); }
.panel-title h3 { font-size: .94rem; }
.panel-sub { font-size: .78rem; color: var(--muted); line-height: 1.6; }
.panel-body { padding: 24px; }
.btn { border-radius: 8px; min-height: 38px; }
.field > span { font-size: .8rem; }
.field input, .field select, .field textarea { background: #fff; border-color: #dce1e9; border-radius: 8px; box-shadow: none; }
.field textarea { min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.start-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.start-card { display: flex; align-items: flex-start; gap: 14px; padding: 24px 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.start-card:hover { border-color: #b3b8ff; box-shadow: var(--shadow-md); }
.start-card > .icon { margin-top: 9px; color: var(--faint); flex: none; }
.start-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; }
.start-copy { flex: 1; min-width: 0; display: grid; gap: 7px; padding-top: 5px; }
.start-copy b { font-size: .94rem; font-weight: 650; letter-spacing: -.02em; }
.start-copy > span { font-size: .76rem; line-height: 1.65; color: var(--muted); }
.start-primary { background: linear-gradient(155deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; box-shadow: 0 6px 18px var(--accent-glow); }
.start-primary:hover { background: linear-gradient(155deg, var(--accent), var(--accent-2)); border-color: transparent; box-shadow: 0 8px 22px var(--accent-glow); }
.start-primary .start-icon { background: rgba(255,255,255,.13); color: #fff; }
.start-primary .start-copy > span, .start-primary > .icon { color: #dbe2ff; }
.home-metrics { gap: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); overflow: hidden; }
.home-metrics .kpi { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 22px 24px; }
.home-metrics .kpi + .kpi { border-left: 1px solid var(--line); }
.kpi:hover { transform: none; box-shadow: none; }
.kpi::before { display: none; }
.kpi-label { text-transform: none; font-size: .79rem; letter-spacing: 0; color: var(--muted); }
.kpi-value { font-size: 2rem; letter-spacing: -.05em; }
.kpi-icon { width: 30px; height: 30px; border-radius: 8px; }
.kpi-hint { color: var(--muted); }
.recent-table th { background: var(--surface-header); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .74rem; }
.recent-table td { padding-block: 15px; font-size: .78rem; }
.document-link { display: flex; align-items: center; gap: 12px; padding: 0; color: var(--ink); background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.document-link:hover b { color: var(--accent); }
.document-link b { font-weight: 550; }
.document-link small { display: block; color: var(--muted); font-size: .69rem; margin-top: 2px; }
.document-icon { display: grid; place-items: center; width: 34px; height: 40px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; flex: none; }
.optional-details { border: 1px solid var(--line); border-radius: 10px; background: var(--surface-subtle); min-width: 0; }
.optional-details > summary { padding: 16px 18px; color: var(--muted); font-size: .81rem; font-weight: 550; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.optional-details > summary::-webkit-details-marker { display: none; }
.optional-details > summary::before { content: "+"; color: var(--accent-ink); font-size: 18px; width: 14px; flex: none; }
.optional-details[open] > summary::before { content: "−"; }
.optional-details[open] > summary { border-bottom: 1px solid var(--line); color: var(--ink); }
.optional-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.optional-label { margin-left: auto; font-weight: 400; font-size: .67rem; color: var(--muted); }
.optional-body { padding: 20px; background: var(--surface-raised); border-radius: 0 0 10px 10px; }
.panel-body > .optional-details { margin-top: 18px; }
.history-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.interview-mode { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; background: var(--accent-soft); border-radius: 10px; }
.interview-mode b { font-size: .86rem; }
.interview-mode small { display: block; color: var(--muted); margin-top: 3px; font-size: .75rem; }
.interview-mode .check { margin: 0; flex: none; }
.steps-rail { box-shadow: none; }
.uploader { display: flex; flex-direction: column; gap: 22px; }
.uploader .drop { min-height: 175px; justify-content: center; padding: 28px; background: #fafbff; border: 1px dashed #b8c3de; border-radius: 10px; }
.uploader .actions { justify-content: flex-end; }
.uploader .optional-details { max-width: 100%; }
@media (max-width: 1150px) {
  .start-actions { grid-template-columns: 1fr; }
  .start-card { padding: 18px 20px; align-items: center; }
  .start-copy { gap: 3px; padding-top: 0; }
  .start-card > .icon { margin-top: 0; }
}
@media (max-width: 760px) {
  .topbar { padding: 0 16px; gap: 8px; }
  .screen { padding: 24px 16px 36px; gap: 18px; }
  .screen-head h2 { font-size: 1.55rem; }
  .home-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-metrics .kpi { padding: 15px 12px; }
  .home-metrics .kpi-icon { display: none; }
  .kpi-label { font-size: .67rem; }
  .kpi-value { font-size: 1.6rem; }
  .kpi-hint { font-size: .65rem; }
  .panel-head, .panel-body { padding: 18px; }
  .panel-head { flex-wrap: wrap; gap: 12px; }
  .interview-mode { flex-direction: column; align-items: flex-start; padding: 16px; gap: 12px; }
  .recent-table { min-width: 600px; }
  .table-wrap { max-width: 100%; overflow-x: auto; }
  .optional-body { padding: 16px; }
}
.topsearch input { background: transparent; border: 0; border-radius: 0; box-shadow: none; min-height: 36px; }
.field input[type="file"] { border: 0; background: transparent; padding: 0; font-size: .8rem; }
.field input[type="file"]::file-selector-button { border: 1px solid #cbd4ee; border-radius: 7px; background: #fff; color: var(--accent-ink); padding: 10px 16px; font: inherit; font-weight: 550; margin-right: 12px; cursor: pointer; }
.field input[type="file"]::file-selector-button:hover { background: var(--accent-soft); }




.lead-page {
  --lead-ink: var(--ink);
  width: 100%;
  min-width: 0;
}

.lead-eyebrow {
  color: var(--accent-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lead-page .screen-head h2 { margin: 6px 0; }
.lead-page .lede { max-width: 65ch; }



.lead-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 0 22px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  margin-bottom: 4px;
}

.lead-hero-text { flex: 1; min-width: 0; }
.lead-hero .lede { max-width: 60ch; margin: 0; }




.lead-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
  margin-top: 0;
}

.lead-work { min-width: 0; width: 100%; max-width: 1000px; }
.lead-form-lock { padding: 0; margin: 0; border: 0; min-width: 0; display: grid; gap: 14px; }
.lead-page .panel { border: 1px solid var(--line); }




.lead-steps {
  position: relative;
  display: flex;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.lead-steps::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--line);
}

.lead-step { position: relative; flex: 1; display: flex; justify-content: center; min-width: 0; }
.lead-step:first-child { flex: none; justify-content: flex-start; }
.lead-step:last-child { flex: none; justify-content: flex-end; }
.lead-step-line { display: none; }

.lead-step-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 150px;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.lead-step-dot {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  transition: background .13s ease, color .13s ease, border-color .13s ease, box-shadow .13s ease;
}

.lead-step:hover .lead-step-dot { border-color: var(--accent); }

.lead-step.current .lead-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.lead-step.done .lead-step-dot { background: var(--ok-soft); border-color: transparent; color: var(--ok-ink); }

.lead-step-label b { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-step-label small { display: block; font-size: 10.5px; color: var(--faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-step.current .lead-step-label b { color: var(--ink); }
.lead-step.current .lead-step-label small { color: var(--accent-ink); }
.lead-step.done .lead-step-label small { color: var(--ok-ink); }



.lead-step-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.lead-step-panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}

.lead-step-panel-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
}

.lead-step-panel-title { flex: 1; min-width: 0; }
.lead-step-panel-title b { display: block; font-size: 15px; color: var(--ink); }
.lead-step-panel-title small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

.lead-section-badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--bad-ink);
  background: var(--bad-soft);
  border-radius: 20px;
  padding: 4px 9px;
}

.lead-step-panel-body {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.lead-step-panel-body .optional-details { margin-top: 0; }



.lead-step-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.lead-step-nav .btn { display: inline-flex; align-items: center; gap: 6px; }
.lead-step-nav-back { transform: scaleX(-1); }
.lead-step-count { font-size: 12px; font-weight: 600; color: var(--faint); }
.lead-step-done-hint { font-size: 12.5px; }


.lead-nav-cta { display: none; }



.lead-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lead-grid .field { min-width: 0; margin-bottom: 0; }
.lead-wide { grid-column: 1 / -1; }

.lead-page .field > span { font-size: 13px; font-weight: 600; color: var(--ink); }

.lead-page .field input,
.lead-page .field select,
.lead-page .field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--surface-soft);
  border: 1.5px solid var(--line-strong);
  border-radius: 9px;
  padding: 10px 11px;
  color: var(--lead-ink);
  font: inherit;
  font-size: 14px;
  transition: border-color .13s ease, box-shadow .13s ease;
}

.lead-page .field textarea { resize: vertical; }

.lead-page .field input,
.lead-page .field select { height: 44px; }

.lead-page input:hover:not(:disabled, :focus),
.lead-page select:hover:not(:disabled, :focus),
.lead-page textarea:hover:not(:disabled, :focus) { border-color: var(--accent); }

.lead-page input:focus,
.lead-page select:focus,
.lead-page textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.lead-page .field.invalid input,
.lead-page .field.invalid select,
.lead-page .field.invalid textarea {
  border-color: var(--bad);
  box-shadow: 0 0 0 3px var(--bad-soft);
}

.lead-page button:focus-visible,
.lead-chips label:focus-within,
.lead-levels label:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.lead-source {
  display: inline-block;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 5px;
  padding: 2px 5px;
  margin-left: 7px;
  font-size: 9px;
  font-weight: 400;
}



.lead-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; }

.lead-input-icon {
  position: absolute;
  left: 11px;
  color: var(--faint);
  pointer-events: none;
}

.lead-page .lead-input-wrap input,
.lead-page .lead-input-wrap select { padding-left: 34px; }
.lead-page .lead-input-wrap input { padding-right: 34px; }

.lead-clear {
  position: absolute;
  right: 7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}

.lead-clear:hover { background: var(--accent-soft); color: var(--accent-ink); }

.lead-searching {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 12px 0 4px;
  font-size: 13px;
  color: var(--muted);
}

.lead-page .lead-error {
  display: block;
  margin: 6px 0 0;
  color: var(--bad);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}




.lead-gaps {
  border: 1px solid var(--bad);
  border-radius: 12px;
  background: var(--bad-soft);
  color: var(--bad-ink);
  padding: 14px 16px;
  margin: 0 0 16px;
}

.lead-gaps-head { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.lead-gaps ul { display: grid; gap: 6px; list-style: none; margin: 10px 0 0; padding: 0; }
.lead-gaps li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
}


.lead-gaps li > span {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}

.lead-gap-jump {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.lead-gaps .lead-gap-jump:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.lead-gap-jump:hover { color: var(--ink); }

.lead-results { max-height: 270px; overflow: auto; margin: 16px 0 8px; display: grid; gap: 7px; }

.lead-result {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  text-align: left;
  color: var(--lead-ink);
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease, color .13s ease;
}

.lead-result:hover { border-color: var(--deep); background: var(--surface-soft); }

.lead-result > span:first-child { min-width: 0; }
.lead-result b, .lead-result small { display: block; overflow-wrap: anywhere; }
.lead-result b { font-size: 14px; }
.lead-result small { font-size: 12px; color: var(--faint); margin-top: 4px; }

.lead-avatar {
  flex: none;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}


.tone-accent { background: var(--accent-soft); color: var(--accent-ink); }
.tone-info   { background: var(--accent-soft); color: var(--accent-ink); }
.tone-ok     { background: var(--ok-soft);     color: var(--ok-ink); }
.tone-warn   { background: var(--warn-soft);   color: var(--warn-ink); }
.tone-bad    { background: var(--bad-soft);    color: var(--bad-ink); }
.tone-violet { background: var(--violet-soft); color: var(--violet); }
.tone-cool   { background: var(--cool-soft);   color: var(--cool); }

.lead-result-main { flex: 1; min-width: 0; }

.lead-result.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.lead-status {
  flex-shrink: 0;
  align-self: center;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 20px;
}



.lead-choices { padding: 0; border: 0; margin: 0 0 20px; min-width: 0; }
.lead-choices:last-child { margin-bottom: 0; }
.lead-choices legend { color: var(--ink); font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.lead-choices.invalid legend { color: var(--bad); }
.lead-choices.invalid .lead-chips label { border-color: var(--bad); }
.lead-choices .lead-error { margin-top: 9px; }

.lead-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.lead-chips label {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 22px;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease, color .13s ease;
}

.lead-chips label:hover { border-color: var(--accent); color: var(--ink); }

.lead-chips input { accent-color: var(--accent); width: 14px; height: 14px; margin: 0; }

.lead-chips label.picked { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }




.lead-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }

.lead-levels label {
  min-width: 0;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .13s ease, background .13s ease;
}

.lead-levels label:hover { border-color: var(--tone, var(--deep)); }

.lead-levels label.chosen {
  background: var(--tone-soft, var(--accent-soft));
  border: 2px solid var(--tone, var(--accent));
  padding: 15px 11px;
}

.lead-levels label.tone-cool    { --tone: var(--cool);   --tone-ink: var(--cool);      --tone-soft: var(--cool-soft); }
.lead-levels label.tone-accent  { --tone: var(--accent); --tone-ink: var(--accent-ink); --tone-soft: var(--accent-soft); }
.lead-levels label.tone-violet  { --tone: var(--violet); --tone-ink: var(--violet);     --tone-soft: var(--violet-soft); }

.lead-levels input { accent-color: var(--tone, var(--accent)); margin-right: 7px; }
.lead-levels b { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; font-size: 15px; }
.lead-levels b::before { content: ""; width: 9px; height: 9px; flex: none; border-radius: 3px; background: var(--tone, var(--accent)); }
.lead-levels b small { display: block; font-size: 11px; color: var(--tone-ink, var(--accent-ink)); margin: 6px 0; }
.lead-levels strong { display: block; margin-top: 12px; font-size: 14px; color: var(--ink); }
.lead-levels p { font-size: 12px; color: var(--muted); line-height: 1.65; margin-bottom: 0; }



.lead-summary {
  position: sticky;
  top: 90px;
  background: var(--surface-soft);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-wrap: anywhere;
}

.lead-summary h3 { color: var(--lead-ink); font-size: 19px; margin: 12px 0; }
.lead-summary p { font-size: 13px; line-height: 1.7; color: var(--muted); }
.lead-summary dt { color: var(--faint); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin-top: 20px; }
.lead-summary dd { margin: 5px 0 0; color: var(--ink); font-size: 13px; line-height: 1.6; }

.lead-side-actions { display: grid; gap: 10px; margin-top: 22px; }
.lead-side-actions .btn { width: 100%; }
.lead-side-template { margin-top: 18px; }
.lead-summary .muted { font-size: 12px; margin-top: 14px; }

.lead-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lead-progress-pill {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: 20px;
  padding: 4px 10px;
}
.lead-progress-pill.complete { color: var(--ok-ink); background: var(--ok-soft); }

.lead-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 14px 0 2px;
}
.lead-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--violet));
  transition: width .3s ease;
}




.lead-page .field select,
.lead-summary .field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
}


.lead-page .btn,
.lead-summary .btn {
  transition: transform .12s ease, box-shadow .12s ease, background .13s ease, border-color .13s ease, color .13s ease;
}
.lead-page .btn:not(:disabled):hover,
.lead-summary .btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.lead-page .btn:not(:disabled):active,
.lead-summary .btn:not(:disabled):active { transform: translateY(0); box-shadow: none; }
.lead-page .btn:disabled,
.lead-summary .btn:disabled { opacity: .55; cursor: not-allowed; }

.lead-summary .lead-cta { justify-content: center; box-shadow: 0 6px 16px rgba(79, 91, 255, .25); }
.lead-summary .lead-cta:not(:disabled):hover { box-shadow: 0 10px 22px rgba(79, 91, 255, .32); }

.lead-hero-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.lead-hero-drafts {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 320px;
}

.lead-hero-drafts-label {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
}

.lead-hero-drafts select {
  width: 100%;
  min-width: 0;
  height: var(--ctl);
  max-width: 260px;
  text-overflow: ellipsis;
}

.lead-save { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }


.lead-chips label { transition: transform .12s ease, border-color .13s ease, background .13s ease, color .13s ease, box-shadow .12s ease; }
.lead-chips label:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.lead-chips label:active { transform: translateY(0); }
.lead-chips label.picked { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }


.lead-levels label { transition: transform .12s ease, border-color .13s ease, background .13s ease, box-shadow .12s ease; }
.lead-levels label:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.lead-levels label.chosen { box-shadow: var(--shadow-md); }


.lead-result { transition: transform .12s ease, border-color .13s ease, background .13s ease, box-shadow .12s ease; }
.lead-result:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.lead-result.selected { box-shadow: 0 0 0 1px var(--accent) inset; }



.lead-footer { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); gap: 12px; }
.lead-footer > span { font-size: 12px; color: var(--faint); }

.lead-busy {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--accent-soft);
  margin: 20px 0;
}

.brd-generation-locked { overflow: hidden; }
.lead-generation-overlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, .58);
  backdrop-filter: blur(5px);
}
.lead-generation-modal {
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 30px 32px 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .24);
  text-align: center;
}
.lead-generation-spinner {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--accent-soft);
}
.lead-generation-spinner .spinner-wrap > span:last-child { display: none; }
.lead-generation-spinner .spinner { width: 28px; height: 28px; border-width: 3px; }
.lead-generation-eyebrow { color: var(--accent-ink); font-size: .68rem; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.lead-generation-modal h2 { margin: 0; font-size: 1.35rem; line-height: 1.25; }
.lead-generation-section { min-height: 1.4em; margin: 0; color: var(--muted); font-size: .88rem; font-weight: 600; }
.lead-generation-percent { margin: 2px 0 -2px; color: var(--ink); font: 750 2rem/1 var(--font-mono); }
.lead-generation-modal > .progress-bar { width: 100%; height: 9px; margin: 2px 0 0; }
.lead-generation-meta { width: 100%; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .7rem; }
.lead-generation-steps { width: 100%; display: grid; gap: 6px; margin-top: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); text-align: left; }
.lead-generation-steps > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.lead-generation-steps svg { color: var(--ok-ink); }
.lead-generation-steps span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.lead-generation-steps small { color: var(--muted); font-size: .65rem; text-transform: capitalize; }
.lead-generation-help { margin: 3px 0 0; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.lead-result-anchor { scroll-margin-top: 18px; }



.lead-edit { display: grid; gap: 14px; }

.doc-editor {
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 12px 36px rgba(15, 23, 42, .08);
}

.doc-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.doc-editor-heading { display: grid; gap: 2px; min-width: 0; }
.doc-editor-title-row { display: flex; align-items: center; gap: 8px; }
.doc-editor-heading b { font-size: .9rem; }
.doc-editor-heading span { color: var(--muted); font-size: .72rem; }
.doc-editor-mode { display: inline-flex; align-items: center; width: fit-content; padding: 3px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink) !important; font-size: .62rem !important; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.doc-editor-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.doc-editor-state { padding: 4px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .68rem; font-weight: 650; white-space: nowrap; }
.doc-editor-state.is-dirty { background: var(--warn-soft); color: var(--warn-ink); }
.doc-editor-count { color: var(--muted); font: 600 .7rem var(--font-mono); white-space: nowrap; }

.doc-editor-canvas {
  max-height: min(68vh, 760px);
  overflow: auto;
  padding: 18px clamp(12px, 3vw, 30px) 32px;
  background: linear-gradient(180deg, var(--surface-soft), var(--bg-0));
}

.doc-paper-label { width: min(100%, 920px); margin: 0 auto 8px; color: var(--faint); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.doc-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.doc-tool-group { display: inline-flex; align-items: center; gap: 3px; padding-right: 8px; border-right: 1px solid var(--line); }
.doc-tool-group:last-child { padding-right: 0; border-right: 0; }
.doc-block-select { height: 30px; min-width: 112px; padding: 0 28px 0 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: 600 .72rem var(--font); }

.doc-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 28px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}

.doc-tool:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-ink); }

.doc-tool.on { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.doc-tool:disabled { opacity: .4; cursor: not-allowed; }

.doc-sep { width: 1px; height: 20px; background: var(--line); margin: 0 5px; flex: none; }

.doc-bubble-menu { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--ink); box-shadow: var(--shadow-md); }
.doc-bubble-menu .doc-tool { color: #fff; }
.doc-bubble-menu .doc-tool:hover, .doc-bubble-menu .doc-tool.on { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }

.doc-editor .tiptap {
  width: min(100%, 920px);
  min-height: 620px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 58px) clamp(28px, 6vw, 70px);
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  font-size: 14.5px;
  line-height: 1.76;
  color: var(--ink);
}

.doc-editor .tiptap:focus { border-color: rgba(79, 70, 229, .38); box-shadow: 0 10px 30px rgba(15, 23, 42, .08), 0 0 0 3px var(--accent-glow); }

.doc-editor .tiptap > * + * { margin-top: .7em; }
.doc-editor .tiptap h1 { font-size: 1.7rem; line-height: 1.25; margin: .85em 0 .42em; letter-spacing: -.025em; }
.doc-editor .tiptap h2 { font-size: 1.38rem; line-height: 1.3; margin: 1.15em 0 .42em; letter-spacing: -.018em; }
.doc-editor .tiptap h3 { font-size: 1.08rem; margin: 1em 0 .38em; }
.doc-editor .tiptap ul, .doc-editor .tiptap ol { padding-left: 1.5rem; margin: .5em 0; }
.doc-editor .tiptap li + li { margin-top: .25em; }
.doc-editor .tiptap blockquote { border-left: 3px solid var(--accent); margin: .75em 0; padding: .2em 0 .2em 1rem; color: var(--muted); }
.doc-editor .tiptap code { background: var(--surface-soft); border: 1px solid var(--line); border-radius: 5px; padding: .1em .35em; font-size: .9em; }
.doc-editor .tiptap pre { background: var(--surface-soft); border-radius: 8px; padding: .9rem 1rem; overflow-x: auto; }
.doc-editor .tiptap pre code { background: none; border: 0; padding: 0; }

.doc-editor .tiptap table { border-collapse: collapse; width: 100%; margin: 1rem 0; table-layout: fixed; }
.doc-editor .tiptap th, .doc-editor .tiptap td { border: 1px solid var(--line-strong); padding: .5rem .7rem; vertical-align: top; position: relative; }
.doc-editor .tiptap th { background: var(--surface-soft); font-weight: 600; text-align: left; }
.doc-editor .tiptap .selectedCell::after { content: ""; position: absolute; inset: 0; background: var(--accent-soft); pointer-events: none; }
.doc-editor .tiptap .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: var(--accent); cursor: col-resize; }
.doc-editor .tableWrapper { overflow-x: auto; }

.doc-editor-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 13px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .68rem;
}
.doc-editor-foot kbd { padding: 1px 4px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); color: var(--ink); font: 600 .65rem var(--font-mono); }

.lead-edit-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lead-edit-bar .muted { font-size: 12px; }



.lead-review { margin: 0 0 20px; }
.lead-review > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; border-bottom: 1px solid var(--line); padding: 11px 0; }
.lead-review dt { font-size: 12px; color: var(--faint); }
.lead-review dd { margin: 0; white-space: pre-wrap; font-size: 13px; overflow-wrap: anywhere; color: var(--ink); }




@media (max-width: 900px) {
  .lead-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lead-summary { position: static; }
  .lead-side-actions { grid-template-columns: 1fr 1fr; }
  
  .lead-form-lock { display: block; }
  .lead-step-panel { margin-bottom: 12px; }
  .lead-step-nav {
    position: sticky;
    bottom: 8px;
    z-index: 3;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    box-shadow: var(--shadow-md);
  }
  .lead-nav-cta { display: inline-flex; align-items: center; gap: 6px; }
  .lead-step-done-hint { display: none; }
}

@media (max-width: 800px) {
  .lead-levels { grid-template-columns: 1fr; }
  .lead-page .screen-head { flex-wrap: wrap; gap: 10px; }
  
  .lead-hero { flex-wrap: wrap; gap: 12px 16px; }
  .lead-hero-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .lead-hero-drafts { flex: 1 1 220px; }
  .lead-hero-drafts select { max-width: none; }
  .lead-save { margin-left: auto; }
}

@media (max-width: 620px) {
  .lead-step-label { display: none; }
  
  .lead-step-btn { max-width: none; min-width: 44px; min-height: 44px; padding: 4px; }
  .lead-grid { grid-template-columns: 1fr; }
  .lead-review > div { grid-template-columns: 1fr; gap: 5px; }
  
  .lead-page .field input,
  .lead-page .field select,
  .lead-page .field textarea,
  .lead-page .lead-input-wrap input,
  .lead-summary .field select { font-size: 16px; }
  .lead-page .field input,
  .lead-page .field select { height: 46px; }
}

@media (max-width: 520px) {
  .lead-hero-drafts { flex-basis: 100%; }
  .lead-hero-drafts-label { display: none; }
  .lead-save { margin-left: 0; width: 100%; justify-content: center; }
  .lead-step-panel-head { padding: 13px 14px; }
  .lead-step-panel-body { padding: 14px; }
  
  .lead-chips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lead-chips label { align-items: flex-start; min-height: 44px; padding: 11px 12px; border-radius: 10px; }
  .lead-chips input { margin-top: 3px; }
}

@media (max-width: 480px) {
  .lead-step-nav { flex-wrap: wrap; }
  .lead-step-count { order: 3; width: 100%; text-align: center; }
  .lead-side-actions { grid-template-columns: 1fr; }
}

.frd-stack { display: grid; gap: 18px; }
.frd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.frd-actions h3 { margin-right: auto; }
.frd-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; border: 0; padding: 20px 0; min-width: 0; }
.frd-wide { grid-column: 1 / -1; }
.frd-readable { line-height: 1.7; padding-top: 12px; }
.frd-readable h4 { margin: 0 0 8px; text-transform: capitalize; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.5; color: inherit; letter-spacing: normal; }
.frd-readable ul, .frd-readable ol { margin: 0; padding-left: 24px; }
.frd-readable li { margin: 0 0 8px; white-space: pre-wrap; }
.frd-readable > ul strong { text-transform: capitalize; }
.frd-fields .field, .frd-stack .field { min-width: 0; }
.frd-stack textarea { width: 100%; resize: vertical; }
.frd-requirement, .frd-finding { padding: 16px; border: 1px solid var(--line); border-radius: 10px; overflow-wrap: anywhere; }
.frd-requirement summary { cursor: pointer; line-height: 1.6; }
.frd-source { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 400px; overflow: auto; }
.frd-table { overflow-x: auto; }
.frd-table table { width: 100%; border-collapse: collapse; min-width: 650px; }
.frd-table th, .frd-table td { padding: 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.frd-table td:first-child { width: 35%; }
.frd-stack progress { width: 100%; margin-top: 12px; }
@media (max-width: 760px) { .frd-fields { grid-template-columns: minmax(0, 1fr); } }


.meeting-form { display: grid; gap: 16px; }
.meeting-form .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field-label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.field-hint { font-size: .75rem; color: var(--faint); }
@media (max-width: 640px) { .meeting-form .field-row { grid-template-columns: minmax(0, 1fr); } }

.meeting-detail { display: grid; gap: 18px; }
.proposals-list { display: grid; gap: 14px; }
.proposal-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); display: grid; gap: 10px; }
.proposal-card.approved { border-left: 3px solid var(--ok); }
.proposal-card.rejected { border-left: 3px solid var(--bad); opacity: .8; }
.proposal-card.merged { border-left: 3px solid var(--violet); }
.proposal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.proposal-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.proposal-type { font-weight: 600; color: var(--ink); text-transform: capitalize; }
.proposal-target { font-family: ui-monospace, monospace; font-size: .75rem; background: var(--surface-soft); padding: 2px 6px; border-radius: 6px; }
.proposal-conf { font-variant-numeric: tabular-nums; }
.proposal-body { display: grid; gap: 6px; }
.proposal-content { margin: 0; line-height: 1.55; }
.proposal-rationale { margin: 0; font-size: .85rem; color: var(--muted); }
.proposal-evidence { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .82rem; color: var(--muted); }
.proposal-decide { display: grid; gap: 8px; }
.proposal-note { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.proposal-decided { font-size: .8rem; color: var(--muted); font-style: italic; text-transform: capitalize; }


.review-panel { display: grid; gap: 18px; }
.review-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.review-metric { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); display: grid; gap: 3px; }
.review-metric > span { color: var(--muted); font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.review-metric > strong { font-size: 1.35rem; line-height: 1.2; }
.review-metric > small { color: var(--muted); font-size: .7rem; }
.review-metric.attention { border-color: rgba(217, 119, 6, .28); background: var(--warn-soft); }
.review-metric.ready { border-color: rgba(22, 163, 74, .25); background: var(--ok-soft); }

.review-guidance { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.review-guidance > div { display: flex; align-items: flex-start; gap: 10px; }
.review-guidance svg { flex: 0 0 auto; margin-top: 1px; color: var(--ok-ink); }
.review-guidance div > div { display: grid; gap: 2px; }
.review-guidance b { font-size: .82rem; }
.review-guidance span { color: var(--muted); font-size: .74rem; line-height: 1.5; }

.review-workspace { display: block; }
.review-document { min-width: 0; display: grid; gap: 10px; }
.review-document .toolbar { margin: 0; }
.review-toolbar-copy { display: grid; gap: 2px; }
.review-toolbar-copy b { font-size: .84rem; }
.review-toolbar-copy span { color: var(--muted); font-size: .7rem; }
.section-review-block { display: grid; gap: 10px; padding: 0 14px 14px; }
.section-review-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.section-review-actions .btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.review-inline-tools { display: grid; gap: 12px; margin-top: 2px; padding: 14px; border: 1px solid rgba(79, 70, 229, .2); border-radius: 10px; background: linear-gradient(180deg, var(--surface), var(--surface-soft)); box-shadow: var(--shadow-sm); }
.review-inline-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.review-inline-head > div { display: grid; gap: 2px; min-width: 0; }
.review-inline-head .eyebrow { color: var(--accent-ink); font-size: .64rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; }
.review-inline-head b { font-size: .82rem; line-height: 1.35; }
.review-inline-form { display: grid; gap: 10px; padding-top: 2px; }
.review-inline-form .field { gap: 6px; }
.review-inline-form textarea { width: 100%; min-height: 104px; resize: vertical; }
.review-inline-form .callout { margin: 0; }

.review-section-activity { display: grid; gap: 10px; padding: 14px 16px 16px; }
.review-section-activity.inline { padding: 4px 0 0; border-top: 1px solid var(--line); }
.review-section-activity.inline > h4 { margin-top: 8px; }
.review-section-activity > h4 { margin: 0 0 2px; font-size: .78rem; }
.review-activity-item { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.review-activity-item.resolved { opacity: .68; }
.review-activity-item > div:first-child { display: flex; align-items: center; gap: 6px; min-width: 0; }
.review-activity-item > div:first-child small { margin-left: auto; color: var(--muted); font-size: .64rem; }
.review-activity-item > p { margin: 0; color: var(--ink); font-size: .74rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-proposal-preview { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; align-items: stretch !important; }
.review-proposal-preview > div { min-width: 0; display: grid; gap: 4px; }
.review-proposal-preview small { color: var(--muted); font-size: .65rem; font-weight: 650; text-transform: uppercase; }
.review-proposal-preview pre { max-height: 190px; margin: 0; padding: 8px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: .64rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

.review-history { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.review-history summary { cursor: pointer; padding: 11px 13px; color: var(--muted); font-size: .74rem; font-weight: 650; background: var(--surface-soft); }
.review-history-list { display: grid; }
.review-history-list > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 10px 13px; border-top: 1px solid var(--line); font-size: .72rem; }
.review-history-list span { min-width: 0; overflow-wrap: anywhere; }
.review-history-list small { color: var(--muted); text-transform: capitalize; }

@media (max-width: 1080px) {
  .review-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .review-overview { grid-template-columns: minmax(0, 1fr); }
  .review-proposal-preview { grid-template-columns: minmax(0, 1fr); }
  .review-history-list > div { grid-template-columns: auto minmax(0, 1fr); }
  .review-history-list small { grid-column: 2; }
  .section-review-block { padding: 0 10px 10px; }
  .review-inline-tools { padding: 12px; }
}

.analysis-group { display: grid; gap: 8px; margin-bottom: 16px; }
.analysis-group h4 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.analysis-items { margin: 0; padding-left: 18px; display: grid; gap: 6px; line-height: 1.5; }

.impact-report { display: grid; gap: 16px; }
.impact-groups { display: grid; gap: 14px; }
.impact-input { flex: 1; min-width: 240px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-family: ui-monospace, monospace; }
.icon.flip { transform: rotate(180deg); }



.meeting-cred-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.meeting-cred-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.meeting-cred-tab:hover { border-color: var(--accent); background: var(--accent-soft); }
.meeting-cred-tab.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.meeting-cred-tab:disabled { opacity: .6; cursor: not-allowed; }

.meeting-cred-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--surface-soft);
  color: var(--muted);
}

.meeting-cred-badge.configured { background: var(--ok-soft); color: var(--ok); }

.meeting-cred-form { display: grid; gap: 1rem; padding-top: .5rem; }

.meeting-cred-help {
  margin: 0;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--muted);
}

.meeting-cred-form .field { display: grid; gap: .35rem; }
.meeting-cred-form .field > span { display: flex; align-items: center; gap: .5rem; }
.meeting-cred-form .field > span em { font-size: .7rem; color: var(--faint); font-style: normal; }
.meeting-cred-form .field small.cred-source {
  font-size: .68rem;
  color: var(--faint);
  font-weight: 500;
}
.meeting-cred-form .field input[disabled],
.meeting-cred-form .field select[disabled] {
  opacity: .6;
  cursor: not-allowed;
}





.mtg-page { gap: 22px; }


/*
 * Two columns: the promise on the left, the artefacts on the right. The yields card is the
 * structural answer to "what do I get out of this screen" — a tinted panel with hairline-separated
 * rows rather than a row of floating pills, so the four outcomes read as one list with equal
 * weight. The violet hairline on top keeps the header identifiable as this section's.
 */
.mtg-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 348px;
  align-items: start;
  gap: 30px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff, var(--surface-subtle));
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}


.mtg-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--violet), var(--accent));
}

.mtg-hero-main {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
  padding-top: 4px;
}

.mtg-hero-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(150deg, var(--violet), var(--accent));
  box-shadow: 0 10px 22px -8px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, .32);
}

.mtg-hero-copy { min-width: 0; display: grid; gap: 8px; }

.mtg-eyebrow {
  margin: 0;
  font-size: .66rem;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6D28D9;
}

.mtg-hero-title {
  margin: 0;
  font-size: clamp(1.28rem, 1.8vw, 1.58rem);
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1.24;
  color: var(--ink);
}

.mtg-hero-copy .lede { max-width: 72ch; font-size: .86rem; }

.mtg-hero-actions { align-items: center; gap: 10px; margin-top: 4px; }

/* ------------------------------------------------------- yields card ---- */

/*
 * One transcript in, four things out. Rows rather than chips because each line carries a label and
 * a sentence of substance — a chip can only hold a noun, and a noun ("Decisions") promises nothing
 * about what the screen actually hands over. The tint and the hairlines are the section's violet,
 * used as structure rather than decoration.
 */
.mtg-yields {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(139, 92, 246, .22);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(139, 92, 246, .10), rgba(139, 92, 246, .035));
  overflow: hidden;
}

.mtg-yields-head {
  padding: 9px 16px;
  border-bottom: 1px solid rgba(139, 92, 246, .18);
  background: rgba(255, 255, 255, .62);
  color: #6D28D9;
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mtg-yield {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(139, 92, 246, .14);
}

.mtg-yield:last-child { border-bottom: 0; }

.mtg-yield-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: #fff;
  color: #6D28D9;
  box-shadow: 0 1px 3px rgba(15, 20, 45, .10);
}

.mtg-yield-copy { min-width: 0; display: grid; gap: 2px; }
.mtg-yield-copy b { font-size: .78rem; font-weight: 680; letter-spacing: -.005em; }
.mtg-yield-copy span { font-size: .72rem; line-height: 1.5; color: var(--muted); }


.mtg-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
  box-shadow: var(--shadow-sm);
}

.mtg-stat {
  position: relative;
  display: grid;
  gap: 2px;
  align-content: start;
  padding: 18px 20px;
  background: var(--surface);
}

.mtg-stat-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 9px;
  background: var(--tone-soft, var(--accent-soft));
  color: var(--tone-ink, var(--accent-ink));
}

.mtg-stat-value { font-size: 1.9rem; line-height: 1.08; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.mtg-stat-label { font-size: .78rem; font-weight: 650; color: var(--ink); }
.mtg-stat-hint { font-size: .71rem; line-height: 1.45; color: var(--muted); }


.mtg-stat[data-attention] { background: linear-gradient(180deg, var(--warn-soft), rgba(245, 158, 11, 0) 74%), var(--surface); }




.mtg-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .22rem .6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.mtg-pill i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.mtg-pill-on   { color: var(--ok);         background: var(--ok-soft);      border-color: rgba(18, 183, 106, .22); }
.mtg-pill-run  { color: var(--accent-ink); background: var(--accent-soft);  border-color: rgba(79, 91, 255, .22); }
.mtg-pill-off  { color: var(--muted);      background: var(--surface-soft); border-color: var(--line); }
.mtg-pill-wait { color: var(--faint);      background: var(--surface-soft); border-color: var(--line); }



.sync-body { display: grid; gap: 14px; }
.sync-note { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--muted); }
.sync-jobs { display: grid; gap: 10px; }
.sync-jobs h4 { margin: 4px 0 0; }
.meeting-sync-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); gap: 1px; }
.meeting-sync-summary > div { min-width: 0; padding: 11px 12px; background: var(--surface); }
.meeting-sync-summary small, .meeting-sync-summary strong { display: block; }
.meeting-sync-summary small { color: var(--muted); font-size: .67rem; }
.meeting-sync-summary strong { margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; }
.meeting-knowledge-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.meeting-knowledge-action > span { min-width: 0; }

@media (max-width: 640px) {
  .meeting-knowledge-action { align-items: flex-start; flex-direction: column; }
}



.mtg-guide { display: grid; gap: 22px; padding: 6px 0 2px; }

.mtg-guide-head { display: flex; align-items: center; gap: 14px; }

.mtg-guide-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: linear-gradient(150deg, var(--violet-soft), var(--accent-soft));
  color: #6D28D9;
  box-shadow: inset 0 0 0 1px var(--line);
}

.mtg-guide-head b { display: block; font-size: 1rem; font-weight: 680; letter-spacing: -.012em; }
.mtg-guide-head p { margin: 3px 0 0; font-size: .82rem; color: var(--muted); }


.mtg-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mtg-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.mtg-step + .mtg-step::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 33px;
  border-left: 6px solid var(--line-strong);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.mtg-step-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.mtg-step-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--violet-soft);
  color: #6D28D9;
}

.mtg-step-n {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--violet), var(--accent));
  color: #fff;
  font-size: .72rem;
  font-weight: 750;
  box-shadow: 0 4px 10px -4px var(--accent-glow);
}

.mtg-step b { font-size: .88rem; font-weight: 650; letter-spacing: -.01em; }
.mtg-step p { margin: 0; font-size: .8rem; line-height: 1.6; color: var(--muted); }

.mtg-step-detail { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.mtg-step-detail li {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .68rem;
}

/*
 * Each step's output, pinned to the card bottom and set in mono: the three cards then read as one
 * pipeline (transcript → cited items → reviewed decision) rather than as three paragraphs. The
 * arrow in front is the same glyph the app uses for "hands on to".
 */
.mtg-step-out {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px dashed var(--line-strong);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.45;
}
.mtg-step-out .icon { flex: none; }

.mtg-guide-actions { align-items: center; gap: 12px; padding-top: 2px; }
.mtg-guide-alt { color: var(--muted); font-size: .76rem; }



.mtg-table tbody tr { transition: background .12s; }
.mtg-table tbody tr:hover td { background: rgba(139, 92, 246, .07); }
.mtg-table td { vertical-align: middle; }


.mtg-meeting { width: 100%; }
.mtg-meeting-copy { min-width: 0; display: grid; gap: 2px; }
.mtg-meeting-copy b { font-size: .84rem; }
.mtg-meeting-copy small {
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .71rem;
}

.mtg-date { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }

.mtg-scope { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.mtg-scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .68rem;
}
.mtg-scope-chip .icon { color: var(--faint); }

.mtg-changes { display: inline-flex; align-items: baseline; gap: 6px; }
.mtg-changes b { font-variant-numeric: tabular-nums; font-weight: 650; }
.mtg-changes em { font-style: normal; font-size: .68rem; color: var(--warn-ink); }
.mtg-changes em.mtg-changes-done { color: var(--faint); }

.mtg-open { text-align: right; white-space: nowrap; }
.mtg-open .btn { gap: .35rem; }



.cr-panel .panel-body { display: grid; gap: 14px; }
.cr-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.cr-summary > div { padding: 11px 12px; background: var(--surface); }
.cr-summary small, .cr-summary strong { display: block; }
.cr-summary small { color: var(--muted); font-size: .68rem; }
.cr-summary strong { margin-top: 2px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.cr-items { display: grid; gap: 10px; }
.cr-item { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.cr-item.ready { border-left: 3px solid var(--ok); }
.cr-item > summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 13px; cursor: pointer; list-style: none; }
.cr-item > summary::-webkit-details-marker { display: none; }
.cr-item-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--tone-soft,var(--violet-soft)); color: var(--tone-ink,var(--violet)); }
.cr-item-copy { min-width: 0; }
.cr-item-copy b, .cr-item-copy small { display: block; }
.cr-item-copy b { font-size: .8rem; }
.cr-item-copy small { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .72rem; }
.cr-item-body { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 0 12px 12px 50px; }
.cr-suggestion-block { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); }
.cr-suggestion-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cr-suggestion-head > span { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 650; }
.cr-suggestion-head > small { color: var(--muted); font-size: .68rem; }
.cr-suggestion-block > p, .cr-frd p { margin: 8px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.cr-doc-ref { min-width: 0; text-align: right; }
.cr-doc-ref b, .cr-doc-ref small { display: block; }
.cr-doc-ref b { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; }
.cr-doc-ref small { margin-top: 2px; color: var(--muted); font-size: .65rem; }
.cr-rule { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; color: var(--accent-ink); font-size: .66rem; }
.cr-candidates { display: grid; gap: 6px; margin-top: 9px; }
.cr-candidates > small { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; }
.cr-candidates .cr-doc-ref { text-align: left; }
.cr-frd-list { display: grid; gap: 8px; margin-top: 9px; }
.cr-frd { padding-top: 8px; border-top: 1px dashed var(--line); }
.cr-frd:first-child { padding-top: 0; border-top: 0; }
.cr-frd .cr-doc-ref { text-align: left; }
.cr-frd > small { display: block; margin-top: 5px; color: var(--muted); font-size: .65rem; }
.cr-workflow { border-top: 1px solid var(--line); padding-top: 10px; }
.cr-workflow summary { cursor: pointer; color: var(--muted); font-size: .72rem; font-weight: 650; }
.cr-workflow ol { display: grid; gap: 6px; margin: 9px 0 0; padding-left: 20px; color: var(--muted); font-size: .72rem; line-height: 1.5; }

@media (max-width: 1080px) {
  .mtg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The hero drops to one column: promise, controls, then the yields list at full width. */
  .mtg-hero { grid-template-columns: minmax(0, 1fr); }
  .mtg-yield { padding: 10px 16px; }
}

@media (max-width: 900px) {
  .mtg-steps { grid-template-columns: minmax(0, 1fr); }
  .mtg-step + .mtg-step::after { display: none; }
  .cr-item-body { grid-template-columns: minmax(0,1fr); padding-left: 12px; }
}

@media (max-width: 700px) {
  .doc-editor-head { align-items: flex-start; flex-direction: column; }
  .doc-editor-actions { width: 100%; justify-content: flex-start; }
  .doc-editor-state { margin-right: auto; }
  .doc-editor-canvas { padding: 10px; max-height: 70vh; }
  .doc-editor .tiptap { min-height: 520px; padding: 24px 18px; }
  .doc-editor-foot { align-items: flex-start; flex-direction: column; }
  .lead-generation-overlay { padding: 14px; }
  .lead-generation-modal { padding: 24px 18px 20px; border-radius: 14px; }
  .lead-generation-meta { align-items: center; flex-direction: column; gap: 4px; }
}

@media (max-width: 640px) {
  .mtg-hero { padding: 20px; gap: 16px; }
  .mtg-hero-main { gap: 12px; }
  .mtg-hero-icon { width: 40px; height: 40px; border-radius: 11px; }
  .mtg-hero-actions { width: 100%; padding-left: 0; }
  .mtg-metrics { grid-template-columns: minmax(0, 1fr); }
  .mtg-stat { padding: 14px 16px; }
  .mtg-stat-icon { margin-bottom: 5px; }
  .mtg-guide-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .cr-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cr-item > summary { grid-template-columns: auto minmax(0,1fr); }
  .cr-item > summary .tag { grid-column: 2; justify-self: start; }
  .cr-suggestion-head { align-items: flex-start; flex-direction: column; }
  .cr-doc-ref { text-align: left; }
}


.configuration-page { max-width: 1320px; margin-inline: auto; gap: 16px; }

/*
 * No page heading, and no local rule for one. The topbar breadcrumb reads "Administration >
 * Configuration" and the sidebar item is already selected, so the page used to say "Configuration"
 * three times before any setting appeared. The switcher names the four areas and the panel head
 * names the open one, which is all the labelling a settings page needs.
 */
.config-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); align-items: start; gap: 28px; }

/* The sidebar rides along as a single card so the four areas read as one control, and it stays
   scrollable when the viewport is shorter than the switcher. */
.config-sidebar { position: sticky; top: 20px; display: grid; gap: 12px; align-content: start; max-height: calc(100vh - 40px); overflow-y: auto; padding-right: 2px; }
.config-sidebar-title { margin: 0; padding: 0 4px; color: var(--faint); font: 700 .66rem var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.config-nav { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 4px 18px rgba(15,23,42,.035); }

.config-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); align-items: start; gap: 28px; }


.config-sidebar { position: sticky; top: 20px; display: grid; gap: 12px; align-content: start; max-height: calc(100vh - 40px); overflow-y: auto; padding-right: 2px; }
.config-sidebar-title { margin: 0; padding: 0 4px; color: var(--faint); font: 700 .66rem var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.config-nav { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 4px 18px rgba(15,23,42,.035); }


.config-nav-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.config-nav-item:hover { background: var(--surface-section); border-color: var(--line); color: var(--accent-ink); }
.config-nav-item:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 2px; }
.config-nav-item[aria-selected="true"] { background: linear-gradient(140deg, var(--accent-soft), var(--surface) 72%); border-color: rgba(79, 70, 229, .32); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent), 0 8px 18px -12px rgba(79, 70, 229, .5); }
.config-nav-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); transition: background .15s, color .15s, border-color .15s, box-shadow .15s; }
.config-nav-item:hover .config-nav-icon { color: var(--accent); }
.config-nav-item[aria-selected="true"] .config-nav-icon { border-color: transparent; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 6px 14px rgba(79, 70, 229, .26); }
.config-nav-copy { display: grid; gap: 2px; min-width: 0; }
.config-nav-copy strong { font-size: .84rem; font-weight: 650; letter-spacing: -.01em; }
.config-nav-copy small { font-size: .72rem; line-height: 1.45; color: var(--muted); }
.config-nav-item[aria-selected="true"] .config-nav-copy small { color: var(--accent-ink); }
.config-nav-num { font: 600 .68rem var(--font-mono); letter-spacing: .04em; color: var(--faint); }
.config-nav-item[aria-selected="true"] .config-nav-num { color: var(--accent); }

.config-side-note { margin-top: 0; padding: 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-0); color: var(--muted); font-size: .76rem; line-height: 1.65; }
.config-side-note > svg { color: var(--accent); margin-bottom: 9px; }
.config-side-note strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: .8rem; }
.config-side-note p { margin: 0; }
.config-content { min-width: 0; display: grid; gap: 18px; align-content: start; }
.config-panel { min-width: 0; animation: config-swap .22s ease-out; }
.config-panel:focus { outline: none; }


@keyframes config-swap {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.config-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 2px; }
.config-pager-count { font-size: .76rem; color: var(--muted); }
.config-pager .icon-back { transform: rotate(180deg); }
.config-card { scroll-margin-top: 24px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 18px 40px -28px rgba(15,23,42,.22); overflow: clip; min-width: 0; }
.config-card-head { display: flex; align-items: center; gap: 15px; padding: 24px 28px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(79, 70, 229, .04), rgba(79, 70, 229, 0)); }
.config-card-head > div:nth-child(2) { flex: 1; min-width: 0; }
.config-section-icon { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid rgba(79,70,229,.14); background: var(--accent-soft); color: var(--accent); border-radius: var(--radius); }
.config-section-number { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .62rem; font-weight: 750; letter-spacing: .12em; }
.config-card-head h3 { font-size: 1.05rem; margin: 4px 0 5px; letter-spacing: -.015em; }
.config-card-head p { font-size: .82rem; color: var(--muted); line-height: 1.65; margin: 0; }
.config-badge { border-radius: 24px; border: 1px solid var(--line); background: var(--bg-0); color: var(--muted); font-size: .74rem; font-weight: 600; padding: 7px 10px; white-space: nowrap; }
.config-body { padding: 20px 24px; display: grid; gap: 16px; }
.config-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px 22px; }
.config-fields-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.config-fields .field { min-width: 0; margin: 0; gap: 8px; }
.config-fields .field > label, .config-fields .field > span { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .8rem; font-weight: 650; }
.config-fields input, .config-fields select { width: 100%; min-width: 0; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 12px; font-size: .84rem; min-height: 40px; }
.config-fields input:focus, .config-fields select:focus { border-color: var(--accent); outline: 3px solid var(--accent-soft); background: var(--surface); }
.config-fields small { font-size: .75rem; color: var(--muted); line-height: 1.6; }
.config-current { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; font-size: .78rem; background: linear-gradient(135deg, var(--bg-0), var(--surface)); border: 1px solid var(--line); padding: 13px 14px; border-radius: var(--radius); color: var(--muted); }
.config-current-copy { display: grid; gap: 2px; min-width: 120px; }
.config-current-copy small { font-size: .67rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.config-current strong { color: var(--ink); font-size: .82rem; }
.config-current code { overflow-wrap: anywhere; font-size: .75rem; margin-left: auto; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--muted); }
.config-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }
.config-dot.is-empty { background: var(--faint); }
.config-hint { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.7; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; }
.config-hint svg { flex-shrink: 0; margin-top: 2px; }
/* The Save row rides the bottom of the card while a long section scrolls, so the primary action is
   never scrolled out of reach. `overflow: clip` on the card keeps the rounded corners without the
   scroll container that `overflow: hidden` would create and that would defeat position: sticky. */
.config-footer { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 24px; background: var(--bg-0); border-top: 1px solid var(--line); }
.config-footer > span { font-size: .76rem; color: var(--muted); }
.config-footer .btn { font-size: .8rem; min-height: 40px; }
.config-footer code, .config-hint code { font: .95em var(--font-mono); color: var(--accent-ink); }
.config-badge.is-ready { color: var(--ok); border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.07); }

.meeting-account-body { gap: 14px; }
.meeting-setup-guide { padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-0); }
.meeting-setup-title { display: flex; gap: 9px; align-items: flex-start; }
.meeting-setup-title > svg { flex: none; margin-top: 1px; color: var(--accent); }
.meeting-setup-title strong, .meeting-setup-title span { display: block; }
.meeting-setup-title strong { font-size: .8rem; }
.meeting-setup-title span { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.meeting-setup-guide ol { display: grid; gap: 6px; margin: 11px 0 0; padding-left: 22px; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.meeting-setup-guide > summary { cursor: pointer; list-style: none; }
.meeting-setup-guide > summary::-webkit-details-marker { display: none; }
.meeting-setup-guide > summary::after { content: ""; width: 7px; height: 7px; margin: 6px 2px 0 auto; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform .15s; flex: none; }
.meeting-setup-guide[open] > summary::after { transform: rotate(225deg); margin-top: 9px; }
.meeting-setup-title .meeting-setup-toggle { display: inline; margin: 0 0 0 8px; color: var(--accent); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.meeting-callback { display: grid; gap: 5px; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--line); }
.meeting-callback > span { color: var(--muted); font-size: .68rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.meeting-callback code { display: block; overflow-wrap: anywhere; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font: .72rem/1.45 var(--font-mono); color: var(--accent-ink); }
.meeting-callback small { color: var(--muted); font-size: .69rem; }
.meeting-token-details > p { margin: 10px 0 14px; color: var(--muted); font-size: .73rem; line-height: 1.55; }
.meeting-connect-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: linear-gradient(135deg,var(--surface),var(--bg-0)); }
.meeting-connect-actions > div:first-child { min-width: 0; }
.meeting-connect-actions strong, .meeting-connect-actions span { display: block; }
.meeting-connect-actions strong { font-size: .79rem; }
.meeting-connect-actions span { margin-top: 3px; max-width: 620px; color: var(--muted); font-size: .71rem; line-height: 1.5; }
.meeting-connect-actions .actions { flex: none; }
.meeting-test-result { padding: 13px 14px; border: 1px solid rgba(16,185,129,.22); border-radius: var(--radius-sm); background: rgba(16,185,129,.05); }
.meeting-test-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: .74rem; }
.meeting-test-head > span { display: inline-flex; gap: 6px; align-items: center; color: var(--ok); font-weight: 650; }
.meeting-test-head strong { font-size: .72rem; }
.meeting-test-sample { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(16,185,129,.16); }
.meeting-test-sample > div strong, .meeting-test-sample > div span { display: block; }
.meeting-test-sample > div strong { font-size: .79rem; }
.meeting-test-sample > div span { margin-top: 2px; color: var(--muted); font-size: .69rem; }
.meeting-test-sample p { margin: 9px 0 0; padding: 8px 9px; border-radius: 7px; background: var(--surface); font-size: .71rem; line-height: 1.45; }
.meeting-test-sample p b { margin-right: 4px; }
.meeting-test-sample p span { display: block; margin-top: 2px; color: var(--muted); }

.zoho-simple-body { gap: 16px; }
.zoho-simple-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.zoho-simple-title { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 11px; min-width: 0; }
.zoho-simple-title h4 { margin: 0 0 3px; font-family: var(--font); font-size: .9rem; font-weight: 650; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.zoho-simple-title p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.zoho-simple-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.zoho-simple-warning { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 9px; align-items: start; padding: 11px 12px; border: 1px solid rgba(217,119,6,.2); border-radius: var(--radius-sm); background: var(--warn-soft); }
.zoho-simple-warning > svg { color: var(--warn); margin-top: 1px; }
.zoho-simple-warning strong { display: block; font-size: .8rem; }
.zoho-simple-warning span { display: block; margin-top: 2px; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.zoho-simple-warning code { color: var(--ink); font: .95em var(--font-mono); }
.zoho-simple-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); gap: 1px; }
.zoho-simple-stats > div { min-width: 0; padding: 12px 13px; background: var(--surface); }
.zoho-simple-stats span { display: block; color: var(--muted); font-size: .72rem; }
.zoho-simple-stats strong { display: block; margin-top: 4px; overflow: hidden; color: var(--ink); font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.zoho-simple-stats strong.is-ok { color: var(--ok); }
.zoho-simple-last { padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-0); }
.zoho-simple-last-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zoho-simple-last-head h5 { margin: 0 0 2px; font-size: .84rem; }
.zoho-simple-last-head > div > span { color: var(--muted); font-size: .72rem; }
.zoho-empty-result { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 9px 10px; border-radius: var(--radius-xs); background: rgba(16,185,129,.06); color: var(--muted); font-size: .75rem; }
.zoho-empty-result svg { flex: none; color: var(--ok); }
.zoho-search-panel { padding: 15px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.zoho-search-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.zoho-search-head h5 { margin: 0 0 3px; font-size: .84rem; }
.zoho-search-head p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.zoho-local-count { flex: none; padding: 5px 8px; border-radius: 999px; background: var(--bg-0); color: var(--muted); font-size: .7rem; }
.zoho-local-count strong { color: var(--ink); }
.zoho-search-controls { display: grid; grid-template-columns: minmax(0,1fr) 150px auto; gap: 9px; align-items: end; margin-top: 13px; }
.zoho-search-controls label { display: grid; gap: 5px; }
.zoho-search-controls label > span { color: var(--muted); font-size: .69rem; font-weight: 600; }
.zoho-search-controls input, .zoho-search-controls select { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--bg-0); color: var(--ink); font: inherit; font-size: .76rem; }
.zoho-search-results { margin-top: 13px; border-top: 1px solid var(--line); padding-top: 12px; }
.zoho-search-results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .74rem; }
.zoho-search-results-head strong { color: var(--ink); }
.zoho-search-list { display: grid; gap: 1px; max-height: 300px; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--line); }
.zoho-search-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; background: var(--surface); }
.zoho-search-subject { min-width: 0; }
.zoho-search-subject strong, .zoho-search-subject span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoho-search-subject strong { font-size: .76rem; font-weight: 620; }
.zoho-search-subject span, .zoho-search-row time { margin-top: 2px; color: var(--muted); font-size: .68rem; }
.zoho-search-empty { margin-top: 8px; padding: 10px; border-radius: var(--radius-xs); background: var(--bg-0); color: var(--muted); font-size: .74rem; }
.zoho-fetch-all { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--line); }
.zoho-fetch-all > div { min-width: 0; }
.zoho-fetch-all strong { display: block; font-size: .78rem; }
.zoho-fetch-all span { display: block; margin-top: 3px; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.zoho-simple-run-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.zoho-simple-run-stats > div { min-width: 0; padding-top: 9px; border-top: 1px solid var(--line); }
.zoho-simple-run-stats strong { display: block; font-size: 1rem; }
.zoho-simple-run-stats span { display: block; margin-top: 2px; color: var(--muted); font-size: .72rem; }
.zoho-simple-advanced { margin-top: 2px; }
.zoho-simple-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; padding-top: 12px; }
.zoho-simple-details > div, .zoho-simple-tools > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-width: 0; padding: 9px 0; border-bottom: 1px dashed var(--line); }
.zoho-simple-details span, .zoho-simple-tools span { color: var(--muted); font-size: .76rem; }
.zoho-simple-details strong { font-size: .76rem; font-weight: 650; text-align: right; }
.zoho-simple-tools { display: grid; grid-template-columns: minmax(0,1fr); margin-top: 8px; }
.zoho-simple-tools code { max-width: 62%; overflow-wrap: anywhere; color: var(--ink); font: .72rem/1.5 var(--font-mono); text-align: right; }

.zoho-kb-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.zoho-kb-status-grid article { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-0); }
.zoho-kb-status-grid .config-dot { margin-top: 5px; }
.zoho-kb-status-grid small, .zoho-kb-policy small, .zoho-kb-capabilities small, .zoho-kb-last-run small { display: block; color: var(--muted); font-size: 10px; line-height: 1.4; text-transform: uppercase; letter-spacing: .06em; }
.zoho-kb-status-grid strong { display: block; margin: 3px 0; font-size: 13px; }
.zoho-kb-status-grid p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.zoho-kb-policy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--line); }
.zoho-kb-policy > div { min-width: 0; padding: 12px 13px; background: var(--surface); }
.zoho-kb-policy strong { display: block; margin-top: 4px; overflow-wrap: anywhere; font-size: 11px; font-weight: 650; }
.zoho-kb-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
.zoho-kb-capabilities > div { min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-0); }
.zoho-kb-capabilities code { display: block; margin-top: 5px; overflow-wrap: anywhere; color: var(--ink); font: 11px/1.55 var(--font-mono); }
.zoho-kb-log { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #101827; }
.zoho-kb-log-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.1); color: #dbe4f5; font-size: .76rem; }
.zoho-kb-log-head > span { display: inline-flex; align-items: center; gap: 7px; }
.zoho-kb-log-head small { color: #91a0b8; }
.zoho-kb-log pre { max-height: 230px; margin: 0; padding: 12px; overflow: auto; color: #dbe4f5; font: .74rem/1.7 var(--font-mono); white-space: pre-wrap; }
.zoho-kb-last-run { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.zoho-kb-last-run-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zoho-kb-last-run-head strong { display: block; margin-top: 3px; font-size: 12px; }
.zoho-kb-run-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.zoho-kb-run-stats > div { min-width: 0; padding: 9px 7px; border-radius: 8px; background: var(--bg-0); text-align: center; }
.zoho-kb-run-stats strong { display: block; font-size: 15px; }
.zoho-kb-run-stats small { margin-top: 2px; text-transform: none; letter-spacing: 0; }
.config-provider-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px 24px 0; }
.config-provider { position: relative; text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, var(--surface), var(--bg-0)); color: var(--ink); cursor: pointer; min-width: 0; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.config-provider:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(15,23,42,.07); transform: translateY(-1px); }
.config-provider.is-selected { border-color: var(--accent); background: linear-gradient(145deg, rgba(79,70,229,.065), var(--surface) 70%); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(79,70,229,.08); }
.config-provider strong { font-size: .82rem; font-weight: 680; }
.config-provider small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .74rem; }
.config-provider-mark { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 15px; font-weight: 750; background: var(--surface-soft); }
.provider-google-meet { background: #E8F5EE; color: #187444; }
.provider-zoho-meeting { background: #FFF1E9; color: #B84B1C; }
.provider-zoom { background: #EAF2FF; color: #2463CF; }
.provider-microsoft-teams { background: #EFEDFC; color: #6054B5; }
.config-provider-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-0); }
.config-provider-intro h4 { margin: 0 0 4px; font-family: var(--font); font-size: .86rem; font-weight: 650; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.config-provider-intro p { margin: 0; font-size: .76rem; line-height: 1.65; color: var(--muted); overflow-wrap: anywhere; }
.config-field-state { font-size: .72rem; font-weight: 400; color: var(--muted); white-space: nowrap; }
.config-field-help { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: start; min-height: 18px; }
.config-text-button { background: none; border: 0; padding: 0; color: var(--accent); font-size: .76rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-align: left; }
.config-text-button:hover { text-decoration: underline; }
.config-text-button:disabled { opacity: .5; cursor: default; }
.config-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 18px; background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.config-toggle strong { display: block; font-size: .84rem; }
.config-toggle small { display: block; font-size: .76rem; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.config-toggle input { position: absolute; right: 18px; width: 40px; height: 24px; opacity: 0; }
.config-switch { width: 40px; height: 24px; border-radius: 20px; background: var(--faint); padding: 3px; flex-shrink: 0; pointer-events: none; }
.config-switch::before { content: ""; display: block; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px #0002; }
.config-toggle input:checked + .config-switch { background: var(--accent); }
.config-toggle input:checked + .config-switch::before { transform: translateX(16px); }
.config-toggle input:focus-visible + .config-switch { outline: 3px solid var(--accent-glow); outline-offset: 3px; }
.config-advanced { border-top: 1px solid var(--line); padding-top: 18px; }
.config-advanced summary { font-size: .82rem; font-weight: 650; cursor: pointer; }
.config-advanced summary span { color: var(--muted); font-size: .74rem; font-weight: 400; margin-left: 10px; }
.config-advanced > p { font-size: .78rem; line-height: 1.7; color: var(--muted); margin: 16px 0; }

.zoho-assistant-accounts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zoho-assistant-accounts li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.zoho-assistant-account-state { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--warn); background: var(--warn-soft); }
.zoho-assistant-accounts li.is-ready .zoho-assistant-account-state { color: var(--ok); background: rgba(16,185,129,.1); }
.zoho-assistant-account-copy { display: grid; gap: 2px; min-width: 0; }
.zoho-assistant-account-copy strong { display: flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 650; overflow-wrap: anywhere; }
.zoho-assistant-account-copy > span { color: var(--muted); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zoho-assistant-account-status { font-size: .74rem; font-weight: 600; color: var(--warn); white-space: nowrap; }
.zoho-assistant-account-status.is-ok { color: var(--ok); }
.zoho-assistant-empty { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); }
.zoho-assistant-empty strong { display: block; color: var(--ink); font-size: .82rem; }
.zoho-assistant-empty span { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.6; }
@media (max-width: 650px) {
  .zoho-assistant-accounts li { grid-template-columns: auto minmax(0, 1fr); }
  .zoho-assistant-account-status, .zoho-assistant-accounts li .btn { grid-column: 2; justify-self: start; }
}
@media (max-width: 1100px) {
  .config-layout { grid-template-columns: 1fr; gap: 18px; }
  .config-sidebar { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .config-sidebar-title { display: none; }
  .config-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .config-nav-item { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 7px; padding: 12px 10px; text-align: center; }
  .config-nav-item[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--accent); }
  .config-nav-copy small, .config-nav-num { display: none; }
  .config-side-note { display: none; }
  .zoho-simple-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {


  .config-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .config-card-head { padding: 20px 18px; flex-wrap: wrap; }
  .config-card-head .config-badge { margin-left: 59px; }
  .config-body { padding: 22px 18px; }
  .config-fields, .config-fields-three { grid-template-columns: 1fr; }
  .config-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px 18px 0; }
  .config-footer { padding: 16px 18px; flex-wrap: wrap; }
  .config-footer .actions { width: 100%; }
  .config-footer .btn { width: 100%; justify-content: center; }
  .zoho-simple-head { align-items: stretch; flex-direction: column; }
  .zoho-simple-actions { width: 100%; }
  .zoho-simple-actions .btn { flex: 1; justify-content: center; }
  .zoho-simple-stats, .zoho-simple-details { grid-template-columns: minmax(0, 1fr); }
  .zoho-simple-run-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 651px) and (max-width: 900px) {
  .config-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.service-logo { --service-tint: rgba(79,70,229,.12); position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 46px; height: 46px; flex: 0 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 3px 9px rgba(15,23,42,.05); overflow: hidden; }
.service-logo-glow { position: absolute; z-index: -1; width: 32px; height: 32px; border-radius: 50%; background: var(--service-tint); filter: blur(7px); opacity: .7; }
.service-logo img { position: relative; display: block; width: 28px; height: 28px; object-fit: contain; }
.service-logo.is-prominent { width: 50px; height: 50px; border-radius: 14px; }
.service-logo.is-prominent img { width: 30px; height: 30px; }
.service-logo.is-compact { width: 26px; height: 26px; border-radius: 6px; }
.service-logo.is-compact img { width: 17px; height: 17px; }
.service-google-meet { --service-tint: rgba(52,168,83,.24); background: #F0FAF4; border-color: #D9EEDF; }
.service-zoho-meeting { --service-tint: rgba(230,71,59,.22); background: #FFF5F3; border-color: #F5E1DC; }
.service-zoho-mail { --service-tint: rgba(230,71,59,.22); background: #FFF5F3; border-color: #F5E1DC; }
.service-zoom { --service-tint: rgba(45,140,255,.25); background: #F0F6FF; border-color: #DDE9FD; }
.service-microsoft-teams { --service-tint: rgba(98,100,167,.26); background: #F4F2FF; border-color: #E5E0FA; }
.service-ollama { --service-tint: rgba(31,41,55,.16); background: #F8FAFC; border-color: #E5E7EB; }
.service-openai { --service-tint: rgba(16,163,127,.22); background: #F2FBF8; border-color: #D9EEE8; }
.service-anthropic { --service-tint: rgba(204,120,92,.22); background: #FAF2EA; border-color: #EFE0D2; }
.service-gemini { --service-tint: rgba(66,133,244,.23); background: #F2F5FF; border-color: #E2E8FC; }
.service-deepseek { --service-tint: rgba(77,126,255,.25); background: #F1F6FF; border-color: #DFE9FC; }
.service-openrouter { --service-tint: rgba(126,87,194,.22); background: #F7F4FF; border-color: #E8E0F8; }
.config-ai-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.config-ai-provider { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, var(--surface), var(--bg-0)); text-align: left; cursor: pointer; color: var(--ink); overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s, background .15s; }
.config-ai-provider strong { display: block; font-size: .84rem; overflow-wrap: anywhere; }
.config-ai-provider small { display: block; margin-top: 4px; font-size: .74rem; color: var(--muted); }
.config-ai-provider.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(79,70,229,.08); background: linear-gradient(145deg, rgba(79,70,229,.065), var(--surface) 70%); }
.config-ai-provider:hover { border-color: var(--accent); box-shadow: 0 8px 22px rgba(15,23,42,.07); transform: translateY(-1px); }
.config-provider-copy { min-width: 0; }
.config-selection-mark { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--accent); color: #fff; opacity: 0; transform: scale(.78); transition: opacity .15s, transform .15s; box-shadow: 0 3px 9px var(--accent-glow); }
.is-selected > .config-selection-mark { opacity: 1; transform: scale(1); }
.config-model-fields { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1250px) { .config-ai-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) {
  .config-ai-provider { column-gap: 9px; padding: 12px 9px; }
  .config-ai-provider .service-logo { width: 34px; height: 34px; border-radius: 9px; }
  .config-ai-provider .service-logo img { width: 22px; height: 22px; }
  .config-ai-provider strong { font-size: 11px; }
  .config-ai-provider small { font-size: 9px; }
  .config-provider { padding: 12px 9px; gap: 9px; }
  .config-provider .service-logo { width: 38px; height: 38px; border-radius: 10px; }
  .config-provider .service-logo img { width: 24px; height: 24px; }
  .config-provider-intro { grid-template-columns: auto minmax(0, 1fr); }
  .config-current code { width: 100%; margin-left: 0; }
}

.workflow-next { padding: 14px 0; }


.erp-picker { position: relative; min-width: 0; }
.erp-picker-label { margin: 0 0 .38rem; font-size: .82rem; font-weight: 650; color: var(--ink); }
.erp-picker-input { min-height: var(--ctl); display: flex; align-items: center; gap: .5rem; padding: 0 .7rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.erp-picker-input:focus-within, .erp-picker-input.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.erp-picker-input input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; padding: .62rem 0; }
.erp-picker-menu { position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0; right: 0; max-height: 17rem; overflow: auto; padding: .35rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-raised); box-shadow: var(--shadow-md); }
.erp-picker-option { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .62rem .68rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.erp-picker-option:hover { background: var(--surface-soft); }
.erp-picker-option > span:first-child { min-width: 0; display: grid; gap: .05rem; }
.erp-picker-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-picker-option small, .erp-picker-meta { color: var(--muted); font-size: .75rem; }
.erp-picker-meta { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-picker-message { margin: 0; padding: .7rem; color: var(--muted); font-size: .82rem; }
.erp-picker-message.error { color: var(--bad-ink); }
.erp-picker-selected { min-height: var(--ctl); display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .62rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.erp-picker-selected > div { min-width: 0; display: grid; gap: .05rem; }
.erp-picker-selected strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-picker-selected span, .erp-picker-selected small { color: var(--muted); font-size: .76rem; }


.accounts-page { display: grid; gap: 1rem; }
.individual-accounts-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; padding: .95rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.individual-accounts-icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); }
.individual-accounts-intro strong { display: block; font-size: .9rem; }
.individual-accounts-intro p { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.access-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.access-summary > div { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.access-summary span { display: block; color: var(--muted); font-size: .75rem; }
.access-summary strong { display: block; margin-top: .15rem; font-size: 1.25rem; }
.accounts-workspace { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr); gap: 1rem; align-items: start; }
.account-editor { display: grid; gap: 1rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.account-type-field { display: grid; gap: .45rem; }
.account-field-label { font-size: .82rem; font-weight: 650; color: var(--ink); }
.account-type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.account-type-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; min-height: 4.4rem; padding: .72rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s, box-shadow .15s; }
.account-type-option:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-soft); }
.account-type-option.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.account-type-option > span:last-child { min-width: 0; display: grid; gap: .12rem; }
.account-type-option strong { font-size: .82rem; }
.account-type-option small { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.account-type-icon { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 8px; background: var(--surface-soft); color: var(--muted); }
.account-type-option.selected .account-type-icon { background: var(--surface); color: var(--accent-ink); }
.admin-access-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; padding: .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.admin-access-note strong { display: block; font-size: .82rem; }
.admin-access-note p { margin: .2rem 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.account-access-builder { display: grid; gap: .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.account-access-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.account-access-head > div { display: grid; gap: .1rem; }
.account-access-head small { color: var(--muted); }
.access-source { display: inline-flex; align-items: center; gap: .3rem; color: var(--ok-ink); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.access-grant-list { display: grid; gap: .55rem; }
.access-grant-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .68rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.access-grant-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); }
.access-grant-copy { min-width: 0; display: grid; gap: .03rem; }
.access-grant-copy strong, .access-grant-copy span, .access-grant-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-grant-copy span, .access-grant-copy small { color: var(--muted); font-size: .75rem; }
.access-empty { margin: 0; padding: .8rem; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); text-align: center; }
.account-editor-actions { margin-top: .2rem; }
.account-list { display: grid; }
.account-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.account-row:last-child { border-bottom: 0; }
.account-row.selected { background: var(--accent-soft); }
.account-avatar { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); font-weight: 700; }
.account-copy { min-width: 0; display: grid; gap: .06rem; }
.account-copy span { color: var(--muted); font-size: .78rem; }
.account-name-line { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.account-name-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-role-badge { flex: none; display: inline-flex; align-items: center; min-height: 1.25rem; padding: 0 .42rem; border-radius: 999px; font-size: .65rem !important; font-weight: 700; line-height: 1; }
.account-role-badge.admin { background: var(--accent-soft); color: var(--accent-ink); }
.account-role-badge.employee { background: var(--surface-soft); color: var(--muted); border: 1px solid var(--line); }
.account-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.explorer-project-filter { min-width: min(24rem, 100%); flex: 1 1 18rem; }


.access-page { gap: 18px; }
.accounts-page { gap: 14px; }
.individual-accounts-intro {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding: 14px 16px;
  border-color: #dfe4ee;
  background:
    radial-gradient(380px 120px at 0% 0%, rgba(245, 158, 11, .09), transparent 74%),
    linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  box-shadow: 0 4px 16px rgba(32, 41, 68, .045);
}
.individual-accounts-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff5dd;
  color: #9a6200;
  box-shadow: inset 0 0 0 1px rgba(217, 152, 35, .15);
}
.individual-accounts-intro > div:nth-child(2) strong { font-size: .92rem; }
.individual-accounts-intro > div:nth-child(2) p { max-width: 760px; }
.individual-accounts-intro > .btn { white-space: nowrap; }

.access-summary { gap: 10px; }
.access-summary > div {
  padding: 12px 14px;
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(32,41,68,.035);
}
.access-summary strong { font-size: 1.12rem; }

.accounts-workspace {
  grid-template-columns: minmax(380px, 1fr) minmax(430px, 1.05fr);
  gap: 14px;
}
.account-editor { gap: 12px; }
.account-form-section {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid #e0e5ee;
  border-radius: 12px;
  background: #fbfcfe;
}
.account-form-section-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.account-form-section-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1;
}
.account-form-section-head strong {
  font-size: .82rem;
  font-weight: 720;
  color: var(--ink);
}
.account-form-section-head small {
  color: var(--muted);
  font-size: .71rem;
  line-height: 1.4;
}
.account-section-icon {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #59657a;
  background: #eef2f7;
  box-shadow: inset 0 0 0 1px rgba(123, 136, 160, .08);
}
.account-section-icon.is-admin {
  color: #6d28d9;
  background: #f2ecff;
}
.account-section-icon.is-developer {
  color: #b8430e;
  background: #ffe8d9;
}
.account-section-icon.is-project {
  color: #3730a3;
  background: #eeefff;
}
.account-name-field { margin: 0; }
.account-name-field input { min-height: 42px; }

.account-type-field { gap: 0; }
.account-type-options { gap: 8px; }
.account-type-option {
  min-height: 72px;
  padding: 11px;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}
.account-type-option:hover:not(:disabled) {
  border-color: #cfd6e3;
  background: #fff;
}
.account-type-option.selected {
  border-color: #8f82ee;
  background: #f5f2ff;
  box-shadow: 0 0 0 2px rgba(124, 92, 240, .08);
}
.account-type-option.selected .account-type-icon {
  color: #5b43d6;
  background: #fff;
}

.account-admin-section { border-color: #e2dbf7; background: #fbf9ff; }
.account-developer-section { border-color: #fde2cf; background: #fffaf5; }
.admin-access-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 10px 11px;
  border-color: #e7e1f4;
  background: #fff;
  color: #5b43d6;
}
.admin-access-note > .icon { margin-top: 2px; }
.admin-access-note p { color: var(--muted); }

.account-project-section {
  border-color: #d9def4;
  background: linear-gradient(180deg, #fafaff 0%, #f8faff 100%);
}
.account-access-head { align-items: center; }
.access-source {
  padding: 5px 8px;
  border: 1px solid #d8e9df;
  border-radius: 999px;
  background: #f2fbf6;
  font-size: .66rem;
}
.account-access-builder {
  gap: 10px;
  padding: 11px;
  border-color: #dde2ed;
  border-radius: 10px;
  background: #fff;
}
.access-grant-action {
  width: 100%;
  justify-content: center;
  min-height: 40px;
}
.access-assigned-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #edf0f5;
}
.access-assigned-head > div { display: grid; gap: 2px; }
.access-assigned-head strong { font-size: .78rem; }
.access-assigned-head small { color: var(--muted); font-size: .68rem; }
.access-count {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding-inline: 7px;
  border-radius: 999px;
  background: #eeefff;
  color: #4b3fc4;
  font-size: .7rem;
  font-weight: 750;
}
.access-grant-list { gap: 7px; }
.access-grant-card {
  padding: 9px 10px;
  border-color: #e1e5ed;
  border-radius: 10px;
  background: #fbfcfe;
}
.access-grant-icon { background: #eeefff; color: #4b3fc4; }
.access-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 54px;
  padding: 10px;
  background: #fafbfc;
  font-size: .72rem;
}
.account-editor-actions {
  padding-top: 3px;
  justify-content: flex-end;
}

.account-list { background: #fff; }
.account-row {
  padding: 12px 14px;
  gap: 10px;
  transition: background .14s ease;
}
.account-row:hover { background: #fafbfe; }
.account-row.selected { background: #f4f1ff; }
.account-avatar {
  width: 36px;
  height: 36px;
  background: #eef1f6;
  color: #566176;
}
.account-copy { gap: 3px; }
.account-project-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 3px;
}
.account-project-preview span {
  max-width: 150px;
  padding: 3px 6px;
  border: 1px solid #e0e4ec;
  border-radius: 999px;
  background: #f7f8fb;
  color: #59657a !important;
  font-size: .63rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-row-actions .btn:first-child {
  border-color: #d7dcec;
  background: #f8f7ff;
  color: #5145c6;
}

@media (max-width: 980px) {
  .accounts-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .individual-accounts-intro { grid-template-columns: auto minmax(0, 1fr); }
  .individual-accounts-intro > .btn { grid-column: 1 / -1; width: 100%; }
  .account-form-section { padding: 11px; }
  .account-access-head { align-items: flex-start; }
  .access-source { margin-left: 39px; }
}




.quick,
.passage,
.idea,
.explorer-stat,
.doc-item,
.proposal-card,
.review-history,
.individual-accounts-intro,
.access-summary > div,
.account-type-option,
.access-grant-card {
  background: var(--surface-raised);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.quick:hover:not(:disabled),
.passage:hover,
.idea:hover,
.doc-item:hover,
.account-type-option:hover:not(:disabled) {
  background: #fff;
  border-color: var(--line-strong);
}


.dep-card,
.role-card,
.kb-auto-sync-status,
.account-access-builder,
.admin-access-note,
.explorer-record-detail,
.config-side-note,
.config-provider-intro,
.config-toggle,
.zoho-simple-last,
.zoho-kb-status-grid article,
.zoho-kb-capabilities > div,
.zoho-kb-run-stats > div {
  background: var(--surface-section);
}


.lead-step-panel {
  background: var(--surface-raised);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}

.lead-step-panel-head {
  background: var(--surface-header);
}

.lead-step-panel-body {
  background: var(--surface-raised);
}

.lead-results {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-section);
}

.lead-result {
  background: var(--surface-raised);
}


.config-card {
  background: var(--surface-raised);
  border-color: var(--line-strong);
}

.config-card-head {
  background: linear-gradient(180deg, rgba(79, 70, 229, .055), var(--surface-header));
}

.config-body {
  background: var(--surface-raised);
}

.config-footer {
  background: var(--surface-section);
}

.config-current,
.config-provider,
.config-ai-provider {
  background: linear-gradient(145deg, var(--surface-raised), var(--surface-subtle));
}

.zoho-simple-stats > div,
.zoho-kb-policy > div,
.zoho-kb-last-run {
  background: var(--surface-raised);
}


.explorer-detail-row td {
  background: var(--surface-section) !important;
}

.explorer-detail-facts span,
.explorer-record-detail pre {
  background: var(--surface-raised);
}

.explorer-results-head {
  background: var(--surface-section);
}


.review-guidance,
.review-proposal-preview pre,
.analysis-group,
.impact-report,
.implementation-meta-strip,
.implementation-gate-row > div {
  background: var(--surface-subtle);
}

.proposal-card,
.review-history {
  border-color: var(--line-strong);
}


.mtg-step {
  background: var(--surface-subtle);
  border-color: var(--line);
}

.mtg-step:hover {
  background: var(--surface-raised);
  border-color: var(--line-strong);
}

.meeting-cred-tab {
  background: var(--surface-raised);
}


.panel-flush > .table-wrap,
.section-table-wrap,
.matrix-wrap {
  background: var(--surface-raised);
}


.panel-body > .empty-state,
.panel-flush > .empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-subtle);
}
@media (max-width: 980px) { .accounts-workspace { grid-template-columns: 1fr; } }
@media (max-width: 680px) { .access-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-type-options { grid-template-columns: 1fr; } .account-row { grid-template-columns: auto minmax(0, 1fr); } .account-row-actions { grid-column: 1 / -1; justify-content: flex-start; } .account-access-head { grid-template-columns: 1fr; } }

.ask-scope-label { color: var(--muted); font-size: .68rem; font-weight: 650; }


.ask-model-dot { width: 9px; height: 9px; flex: none; border-radius: 999px; background: var(--cool); box-shadow: 0 0 0 3px var(--cool-soft); }
.ask-model-dot.tone-teal   { background: #0F766E; box-shadow: 0 0 0 3px rgba(15,118,110,.14); }
.ask-model-dot.tone-blue   { background: #1D4ED8; box-shadow: 0 0 0 3px rgba(29,78,216,.14); }
.ask-model-dot.tone-green  { background: #047857; box-shadow: 0 0 0 3px rgba(4,120,87,.14); }
.ask-model-dot.tone-clay   { background: #C2410C; box-shadow: 0 0 0 3px rgba(194,65,12,.14); }
.ask-model-dot.tone-sky    { background: #0369A1; box-shadow: 0 0 0 3px rgba(3,105,161,.14); }
.ask-model-dot.tone-violet { background: #6D28D9; box-shadow: 0 0 0 3px rgba(109,40,217,.14); }

.ask-model-pick { display: grid; gap: 5px; min-width: 0; flex: 1 1 240px; max-width: 340px; }

.ask-model-trigger { display: flex; align-items: center; gap: 9px; min-width: 0; width: 100%; height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--ink); font: 600 .79rem var(--font); text-align: left; cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.ask-model-trigger:hover:not(:disabled) { background: var(--surface); border-color: var(--line-strong); }
.ask-model-trigger.is-open { background: var(--surface); border-color: color-mix(in srgb, var(--tone, var(--accent)) 55%, var(--line)); box-shadow: 0 0 0 3px var(--tone-soft, var(--accent-soft)); }
.ask-model-trigger:focus-visible { outline: 2px solid var(--tone, var(--accent)); outline-offset: 2px; }
.ask-model-trigger:disabled { opacity: .6; cursor: not-allowed; }
.ask-model-trigger-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-model-trigger > .icon { flex: none; color: var(--faint); transition: transform .18s ease; }
.ask-model-trigger.is-open > .icon { transform: rotate(180deg); }


.ask-model-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 288px; overflow-y: auto; overscroll-behavior: contain; padding: 5px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: ask-model-in .14s ease; }
@keyframes ask-model-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ask-model-group { display: flex; align-items: center; gap: 7px; padding: 8px 9px 5px; color: var(--faint); font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.ask-model-group .ask-model-dot { width: 7px; height: 7px; box-shadow: none; }
.ask-model-option { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 9px; border-radius: 7px; color: var(--ink); font: .76rem var(--font); cursor: pointer; }
.ask-model-option > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-model-option > .icon { flex: none; color: var(--ok); }
.ask-model-option.is-active { background: var(--surface-section); }
.ask-model-option.is-selected { color: var(--accent-ink); font-weight: 650; }
.ask-model-pick { position: relative; }

.ask-model-note { overflow: hidden; color: var(--faint); font-size: .61rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }

.ask-client-chip { min-height: 44px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: center; gap: 0 10px; padding: 8px 12px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.ask-client-chip strong { font-size: .79rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-client-chip small { color: var(--faint); font: .64rem var(--font-mono); }



.ask-thinking { flex: 1; display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 250px; padding: 36px; }
.ask-thinking-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--tone-soft, var(--accent-soft)); }
.ask-thinking > div { display: grid; gap: 1px; }
.ask-thinking strong { font-size: .82rem; }
.ask-thinking small { color: var(--muted); font-size: .72rem; }

.ask-thread { padding: 22px 2px 14px; display: grid; gap: 22px; }


.ask-question-row { display: flex; justify-content: flex-end; }
.ask-question-row > p { margin: 0; max-width: min(78%, 620px); padding: 11px 15px; border-radius: 16px 16px 4px 16px; color: var(--ink); background: var(--tone-soft, var(--accent-soft)); border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 22%, transparent); font-size: .87rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

.ask-answer { --ask-hue: var(--tone, var(--accent)); --ask-hue-ink: var(--tone-ink, var(--accent-ink)); --ask-hue-soft: var(--tone-soft, var(--accent-soft)); max-width: 880px; }
.ask-answer.provider-teal   { --ask-hue: #0F766E; --ask-hue-ink: #115E59; --ask-hue-soft: rgba(15,118,110,.12); }
.ask-answer.provider-blue   { --ask-hue: #1D4ED8; --ask-hue-ink: #1E40AF; --ask-hue-soft: rgba(29,78,216,.12); }
.ask-answer.provider-green  { --ask-hue: #047857; --ask-hue-ink: #065F46; --ask-hue-soft: rgba(4,120,87,.12); }
.ask-answer.provider-clay   { --ask-hue: #C2410C; --ask-hue-ink: #9A3412; --ask-hue-soft: rgba(194,65,12,.12); }
.ask-answer.provider-sky    { --ask-hue: #0369A1; --ask-hue-ink: #075985; --ask-hue-soft: rgba(3,105,161,.12); }
.ask-answer.provider-violet { --ask-hue: #6D28D9; --ask-hue-ink: #5B21B6; --ask-hue-soft: rgba(109,40,217,.12); }
.ask-answer-head { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ask-avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; color: var(--ask-hue-ink); background: var(--ask-hue-soft); border-radius: 10px; }
.ask-answer-head > div { min-width: 0; display: grid; gap: 1px; }
.ask-answer-head strong { font-size: .8rem; }
.ask-answer-head small { color: var(--muted); font-size: .67rem; }
.ask-answer-model { margin-left: auto; flex: none; padding: 3px 9px; color: var(--ask-hue-ink); background: var(--ask-hue-soft); border: 1px solid color-mix(in srgb, var(--ask-hue) 24%, transparent); border-radius: 999px; font: .64rem var(--font-mono); max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-answer-state { flex: none; padding: 4px 8px; border-radius: 999px; background: var(--cool-soft); color: var(--cool); font-size: .64rem; font-weight: 700; }
.ask-answer-state.is-ok { background: var(--ok-soft); color: var(--ok-ink); }
.ask-answer-state.is-warn { background: var(--warn-soft); color: var(--warn-ink); }
.ask-answer-body { padding: 18px 0 4px; white-space: pre-wrap; color: var(--ink); font-size: .9rem; line-height: 1.72; }
.ask-model-warning { display: flex; gap: 8px; align-items: flex-start; margin-top: 13px; padding: 9px 10px; color: var(--warn-ink); background: var(--warn-soft); border-radius: 8px; font-size: .7rem; }
.ask-model-warning > .icon { margin-top: 1px; flex: none; }
.ask-model-warning span { display: grid; gap: 1px; }
.ask-model-warning strong { font-size: .7rem; }
.ask-model-warning small { color: var(--muted); font-size: .62rem; }
.ask-requirement-row { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-top: 13px; }
.ask-requirement-row > span { color: var(--muted); font-size: .68rem; }
.ask-requirement-row code { font-size: .65rem; }
.ask-conflicts { margin-top: 15px; padding: 11px 12px; border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; background: var(--warn-soft); }
.ask-conflicts strong { color: var(--warn-ink); font-size: .72rem; }
.ask-conflicts p { margin: 5px 0 0; color: var(--muted); font-size: .73rem; }
.ask-error { display: flex; gap: 8px; align-items: flex-start; margin: 0 24px 12px; padding: 10px 12px; border-radius: 9px; color: var(--bad-ink); background: var(--bad-soft); font-size: .75rem; }

.ask-composer { margin: auto 0 0; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: 0 4px 14px rgba(15,23,42,.05), 0 14px 34px rgba(15,23,42,.07); transition: border-color .16s ease, box-shadow .16s ease; }
.ask-composer:focus-within { border-color: color-mix(in srgb, var(--tone, var(--accent)) 62%, var(--line)); box-shadow: 0 0 0 3px var(--tone-soft, var(--accent-soft)), 0 8px 24px rgba(15,23,42,.06); }
.ask-composer textarea { width: 100%; min-height: 82px; max-height: 220px; resize: vertical; border: 0; outline: 0; padding: 14px 15px 8px; color: var(--ink); background: transparent; font: .86rem/1.55 var(--font); }
.ask-composer textarea::placeholder { color: var(--faint); }
.ask-composer textarea:disabled { cursor: not-allowed; }

.ask-composer-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 7px 9px 9px 14px; }
.ask-composer-tools { display: flex; align-items: center; gap: 8px; flex: none; }


.ask-model-pick.is-compact { position: relative; max-width: 210px; }
.ask-model-pick.is-compact .ask-model-trigger { height: 32px; padding: 0 8px 0 9px; border-radius: 999px; background: var(--surface-subtle); font-size: .72rem; font-weight: 600; }
.ask-model-pick.is-compact .ask-model-trigger:hover:not(:disabled) { background: var(--surface-section); }
.ask-model-pick.is-compact .ask-model-dot { width: 7px; height: 7px; box-shadow: none; }


.ask-model-menu.drop-up { top: auto; bottom: calc(100% + 6px); animation: ask-model-in-up .14s ease; }
@keyframes ask-model-in-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }


.ask-model-pick.is-compact .ask-model-menu { right: auto; width: 268px; max-width: min(78vw, 268px); }

.ask-composer-scope { min-width: 0; flex: 1; display: inline-flex; gap: 5px; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .66rem; }
.ask-composer-scope .icon { color: var(--ok); flex: none; }
.ask-send { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; color: #fff; background: var(--tone, var(--accent)); cursor: pointer; transition: transform .14s ease, filter .14s ease, opacity .14s ease; }
.ask-send:hover:not(:disabled) { filter: brightness(1.08); }
.ask-send:active:not(:disabled) { transform: scale(.94); }
.ask-send:disabled { opacity: .45; cursor: not-allowed; }
.ask-send .spinner { border-top-color: #fff; }
.ask-evidence-panel { position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100vh - var(--header-h) - 34px); overflow: auto; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.ask-evidence-title { display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.ask-evidence-title h2 { margin-top: 1px; font-size: 1rem; }
.ask-evidence-title > span { color: var(--muted); font-size: .68rem; }
.ask-evidence-note { margin: 6px 0 13px; color: var(--muted); font-size: .69rem; line-height: 1.5; }
.ask-source-list { display: grid; gap: 7px; }
.ask-source-item { background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.ask-source-item.is-cited { background: #fff; border-color: color-mix(in srgb, var(--tone, var(--accent)) 28%, var(--line)); }
.ask-source-item > summary { list-style: none; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 10px; cursor: pointer; }
.ask-source-item > summary::-webkit-details-marker { display: none; }
.ask-source-item > summary > .icon { color: var(--faint); transition: transform .15s ease; }
.ask-source-item[open] > summary > .icon { transform: rotate(90deg); }
.ask-source-icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.ask-source-copy { min-width: 0; display: grid; gap: 1px; }
.ask-source-kind { display: flex; gap: 6px; align-items: center; color: var(--faint); font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.ask-source-kind em { padding: 1px 5px; color: var(--ok-ink); background: var(--ok-soft); border-radius: 999px; font-style: normal; letter-spacing: 0; text-transform: none; }
.ask-source-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .71rem; }
.ask-source-copy small { color: var(--muted); font-size: .62rem; }
.ask-source-detail { padding: 0 10px 10px 47px; }
.ask-source-detail p { max-height: 140px; overflow: auto; margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.55; white-space: pre-wrap; }
.ask-source-meta { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.ask-source-meta span { padding: 2px 5px; color: var(--faint); border: 1px solid var(--line); border-radius: 999px; font: .57rem var(--font-mono); }
.ask-no-source { padding: 12px; color: var(--muted); background: var(--surface-subtle); border-radius: 8px; font-size: .7rem; }
.ask-more-evidence, .ask-warning-list { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 11px; }
.ask-more-evidence > summary, .ask-warning-list > summary { cursor: pointer; color: var(--muted); font-size: .68rem; font-weight: 650; }
.ask-more-evidence[open] > .ask-source-list { margin-top: 8px; }
.ask-warning-list p { margin: 7px 0 0; color: var(--muted); font-size: .65rem; }







.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ask-page {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px clamp(10px, 1.6vw, 22px) 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}



.ask-toolbar {
  
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--shadow-sm);
}
.ask-toolbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
}
.ask-toolbar-lockup { min-width: 0; display: grid; gap: 0; }
.ask-toolbar-lockup strong { font-size: .86rem; letter-spacing: -.015em; }
.ask-toolbar-lockup small { color: var(--muted); font-size: .64rem; }
.ask-toolbar-icon {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--tone, var(--accent)), var(--accent-2));
  box-shadow: 0 8px 18px -10px var(--accent-glow);
}
.ask-toolbar-scope {
  min-width: 0;
  width: min(640px, 100%);
  display: grid;
  grid-template-columns: minmax(210px, 1.15fr) minmax(170px, .85fr);
  gap: 8px;
}
.ask-toolbar-field {
  min-width: 0;
}
.ask-toolbar-field .erp-picker-label {
  display: none;
}
.ask-toolbar-field .erp-picker-input,
.ask-toolbar-field .erp-picker-selected,
.ask-client-chip--toolbar {
  min-height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.ask-toolbar-field .erp-picker-input:hover,
.ask-toolbar-field .erp-picker-selected:hover,
.ask-toolbar-field .erp-picker-input:focus-within {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 45%, var(--line-strong));
  box-shadow: 0 0 0 3px var(--tone-soft, var(--accent-soft));
}
.ask-toolbar-field .erp-picker-input {
  padding: 0 10px;
}
.ask-toolbar-field .erp-picker-input input {
  font-size: .74rem;
}
.ask-toolbar-field .erp-picker-selected {
  padding: 5px 9px;
}
.ask-client-chip--toolbar {
  display: flex;
  align-items: center;
  padding: 0 11px;
}
.ask-client-chip--toolbar strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .74rem;
}
.ask-toolbar-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--ok-ink);
  background: var(--ok-soft);
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .18);
  font-size: .61rem;
  font-weight: 700;
  white-space: nowrap;
}

.ask-toolbar-status.is-idle {
  color: var(--muted);
  background: var(--surface-subtle);
  box-shadow: inset 0 0 0 1px var(--line);
}



.ask-project-select,
.ask-client-chip--toolbar {
  height: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: none;
}
.ask-project-select {
  min-width: 0;
}
.ask-project-select:hover {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 42%, var(--line-strong));
}
.ask-project-select-icon {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
}
.ask-project-select > strong,
.ask-client-chip--toolbar > strong {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  line-height: 1;
}
.ask-project-change {
  flex: none;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--tone-ink, var(--accent-ink));
  font: 700 .63rem var(--font);
  cursor: pointer;
}
.ask-project-change:hover {
  background: var(--tone-soft, var(--accent-soft));
}
.ask-project-change:focus-visible {
  outline: 2px solid var(--tone, var(--accent));
  outline-offset: 1px;
}



.ask-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.ask-workspace.has-result {
  grid-template-columns: minmax(0, 1fr) 330px;
}


.ask-chat {
  min-width: 0;
  display: flex;
  flex-direction: column;
  
  height: calc(100vh - var(--header-h) - 104px);
  height: calc(100dvh - var(--header-h) - 104px);
  min-height: 420px;
  max-height: 1040px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 26px 50px -34px rgba(15, 23, 42, .38);
}
.ask-chat-head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: linear-gradient(180deg, var(--surface-header), var(--surface));
}

.ask-chat-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: linear-gradient(90deg, var(--accent), var(--tone, var(--accent)));
}
.ask-chat-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--tone, var(--accent)), var(--accent-2));
  box-shadow: 0 10px 20px -12px var(--accent-glow);
}

.ask-chat-avatar::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--ok);
  border: 2px solid var(--surface);
}
.ask-chat-title { flex: 1; min-width: 0; display: grid; gap: 0; }
.ask-chat-title strong { font-size: .83rem; letter-spacing: -.012em; }
.ask-chat-title small { overflow: hidden; color: var(--muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.ask-chat-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.ask-chat-note,
.ask-chip-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font: 650 .66rem var(--font);
  white-space: nowrap;
}
.ask-chat-note { color: var(--faint); background: var(--surface-subtle); border: 1px solid var(--line); }
.ask-chip-button {
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
  border: 1px solid color-mix(in srgb, var(--tone, var(--accent)) 30%, var(--line));
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease;
}
.ask-chip-button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--tone, var(--accent)) 55%, var(--line)); }
.ask-chip-button:focus-visible { outline: 2px solid var(--tone, var(--accent)); outline-offset: 2px; }

.ask-chat-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 18px;
  background:
    radial-gradient(720px 260px at 96% -12%, var(--violet-soft), transparent 70%),
    linear-gradient(180deg, var(--surface-subtle), var(--surface) 58%);
  scrollbar-width: thin;
}
.ask-chat-body::-webkit-scrollbar { width: 8px; }
.ask-chat-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }


.ask-empty {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 24px 18px 30px;
  text-align: center;
}
.ask-empty-hero {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--tone, var(--accent)), var(--accent-2));
  box-shadow: 0 20px 34px -20px var(--accent-glow);
}
.ask-empty h2 { font-size: 1.16rem; letter-spacing: -.02em; }
.ask-empty > p { max-width: 560px; margin: 8px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.62; }

.ask-empty--inactive .ask-empty-hero { color: var(--faint); background: var(--surface); border: 1px dashed var(--line-strong); box-shadow: none; }
.ask-empty--inactive strong { font-size: .86rem; letter-spacing: -.01em; }
.ask-suggest-grid {
  width: min(720px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
  text-align: left;
}
.ask-suggest-grid button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ask-suggest-grid button:hover {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 38%, var(--line));
  box-shadow: 0 14px 26px -18px var(--accent-glow);
  transform: translateY(-1px);
}
.ask-suggest-grid button:focus-visible { outline: 2px solid var(--tone, var(--accent)); outline-offset: 2px; }
.ask-suggest-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
}
.ask-suggest-copy { min-width: 0; display: grid; gap: 1px; }
.ask-suggest-copy strong { font-size: .76rem; }
.ask-suggest-copy small { overflow: hidden; color: var(--muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.ask-suggest-grid button > .icon { color: var(--faint); transition: color .16s ease, transform .16s ease; }
.ask-suggest-grid button:hover > .icon { color: var(--tone-ink, var(--accent-ink)); transform: translateX(2px); }



.ask-thinking {
  min-height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 30px 18px;
}
.ask-thinking-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.ask-thinking-icon {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
}
.ask-thinking-card > div { display: grid; gap: 1px; }
.ask-thinking strong { font-size: .8rem; }
.ask-thinking small { color: var(--muted); font-size: .7rem; }
.ask-typing { display: inline-flex; align-items: center; gap: 4px; }
.ask-typing i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tone, var(--accent));
  animation: ask-typing 1.15s ease-in-out infinite;
}
.ask-typing i:nth-child(2) { animation-delay: .14s; }
.ask-typing i:nth-child(3) { animation-delay: .28s; }
@keyframes ask-typing {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}



.ask-thread {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}
.ask-question-row { display: flex; justify-content: flex-end; align-items: flex-end; gap: 9px; }

.ask-question-row > p {
  margin: 0;
  max-width: min(78%, 620px);
  padding: 11px 15px;
  border-radius: 16px 16px 5px 16px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--tone-ink, var(--accent-ink)));
  box-shadow: 0 14px 26px -18px var(--accent-glow);
  font-size: .86rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ask-question-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--accent-ink);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .22);
  font: 700 .64rem var(--font);
  text-transform: uppercase;
}

.ask-answer {
  max-width: 100%;
  padding: 15px 17px 13px;
  border: 1px solid var(--line);
  border-radius: 5px 16px 16px 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 22px 40px -34px rgba(15, 23, 42, .4);
}
.ask-answer-head { padding-bottom: 11px; }

.ask-avatar {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(135deg, var(--ask-hue-ink, var(--accent-ink)), var(--ask-hue, var(--accent)));
  box-shadow: 0 10px 18px -12px color-mix(in srgb, var(--ask-hue, var(--accent)) 70%, transparent);
}
.ask-answer-body { padding: 14px 0 2px; font-size: .87rem; line-height: 1.72; }
.ask-answer-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.ask-answer-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--muted);
  font: 650 .64rem var(--font);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.ask-answer-action:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.ask-answer-action:focus-visible { outline: 2px solid var(--tone, var(--accent)); outline-offset: 2px; }
.ask-answer-action.is-done { color: var(--ok-ink); background: var(--ok-soft); border-color: rgba(16, 185, 129, .24); }



.ask-chat-foot {
  flex: none;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
  background: linear-gradient(180deg, var(--surface), var(--surface-header));
}

.ask-composer {
  width: 100%;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ask-composer:focus-within {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 55%, var(--line-strong));
  box-shadow: 0 0 0 4px var(--tone-soft, var(--accent-soft)), 0 14px 30px -24px var(--accent-glow);
}
.ask-composer textarea {
  width: 100%;
  min-height: 54px;
  max-height: 172px;
  resize: none;
  border: 0;
  outline: 0;
  padding: 12px 14px 4px;
  background: transparent;
  color: var(--ink);
  font: .84rem/1.55 var(--font);
}
.ask-error { margin: 0 0 10px; border: 1px solid rgba(239, 68, 68, .22); }
.ask-composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px 6px 12px;
}
.ask-composer-scope { gap: 5px; font-size: .62rem; }

.ask-send {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--tone-ink, var(--accent-ink)), var(--accent));
  box-shadow: 0 12px 22px -14px var(--accent-glow);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.ask-send:hover:not(:disabled) { filter: none; transform: translateY(-1px); box-shadow: 0 16px 26px -14px var(--accent-glow); }
.ask-send:active:not(:disabled) { transform: scale(.95); }



.ask-evidence-panel {
  position: sticky;
  top: calc(var(--header-h) + 14px);
  max-height: calc(100vh - var(--header-h) - 104px);
  max-height: calc(100dvh - var(--header-h) - 104px);
  overflow: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 26px 50px -38px rgba(15, 23, 42, .34);
  scrollbar-width: thin;
}

.ask-evidence-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 13px 14px 11px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-header), var(--surface));
}
.ask-evidence-title { align-items: center; }
.ask-evidence-title h2 { font-size: .95rem; }
.ask-evidence-note { margin: 5px 0 0; }
.ask-evidence-title .ask-evidence-count {
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
  font-size: .62rem;
  font-weight: 700;
}
.ask-evidence-body { padding: 12px 14px 14px; }
.ask-source-item { border-radius: 11px; transition: border-color .16s ease, background .16s ease; }
.ask-source-item > summary:hover { background: var(--surface); }
.ask-no-source { border: 1px dashed var(--line-strong); }

@media (max-width: 960px) {
  
  .ask-workspace.has-result {
    grid-template-columns: minmax(0, 1fr);
  }
  .ask-evidence-panel {
    position: static;
    max-height: none;
  }
  .ask-chat {
    max-height: none;
  }
}

@media (max-width: 820px) {
  .ask-page {
    padding-inline: 10px;
  }
  .ask-toolbar {
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 10px;
  }
  .ask-toolbar-brand {
    grid-column: 1;
  }
  .ask-toolbar-status {
    grid-column: 2;
  }
  .ask-toolbar-scope {
    grid-column: 1 / -1;
    width: 100%;
  }
  .ask-chat-note {
    display: none;
  }
  .ask-chat-body {
    padding: 16px 13px;
  }
  .ask-suggest-grid {
    grid-template-columns: 1fr;
  }
  
  .ask-chat {
    height: calc(100vh - var(--header-h) - 152px);
    height: calc(100dvh - var(--header-h) - 152px);
  }
}

@media (max-width: 560px) {
  .ask-toolbar {
    grid-template-columns: 1fr;
  }
  .ask-toolbar-status {
    display: none;
  }
  .ask-toolbar-scope {
    grid-template-columns: 1fr;
  }
  .ask-toolbar-lockup small {
    display: none;
  }
  
  .ask-chat {
    height: calc(100vh - var(--header-h) - 206px);
    height: calc(100dvh - var(--header-h) - 206px);
    min-height: 430px;
  }
  .ask-question-row > p {
    max-width: 88%;
  }
  
  .ask-answer-head {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .ask-answer-head > div {
    flex: 1 1 150px;
  }
  .ask-answer-model {
    margin-left: 0;
    max-width: 100%;
  }
  .ask-suggest-copy small {
    display: none;
  }
  .ask-composer-scope {
    display: none;
  }
  .ask-composer-tools {
    width: 100%;
    justify-content: flex-end;
  }
  .ask-model-pick.is-compact {
    max-width: min(230px, calc(100vw - 92px));
  }
}




.ask-toolbar {
  min-height: 76px;
  padding: 10px 14px;
  border: 1px solid #e6e9f2;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(42, 54, 84, .08);
}
.ask-toolbar-brand { gap: 11px; }
.ask-toolbar-lockup strong { font-size: .9rem; font-weight: 760; }
.ask-toolbar-lockup small { margin-top: 2px; font-size: .65rem; }

.ask-toolbar-icon,
.ask-chat-avatar,
.ask-empty-hero,
.ask-answer .ask-avatar {
  color: #fff;
  background: linear-gradient(145deg, #8b5cf6 0%, #6d4df2 48%, #4f46e5 100%);
  box-shadow: 0 12px 24px -14px rgba(91, 70, 229, .85);
}
.ask-toolbar-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}
.ask-toolbar-icon .icon { width: 21px; height: 21px; }

.ask-toolbar-scope { width: min(690px, 100%); }
.ask-project-select,
.ask-client-chip--toolbar,
.ask-toolbar-field .erp-picker-input,
.ask-toolbar-field .erp-picker-selected {
  height: 42px;
  min-height: 42px;
  border-radius: 10px;
  border-color: #dce2ee;
  background: #fff;
}
.ask-project-select-icon {
  color: #6d4df2;
  background: #f1edff;
}
.ask-project-change {
  height: 28px;
  border: 1px solid #e1e5ef;
  background: #fff;
  color: #526078;
}
.ask-project-change:hover {
  border-color: #cfc8ff;
  background: #f6f3ff;
  color: #5d45dc;
}
.ask-toolbar-status {
  height: 30px;
  padding-inline: 11px;
}

.ask-chat {
  border: 1px solid #dfe4ee;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(42, 54, 84, .07);
}
.ask-chat-head {
  min-height: 68px;
  padding: 12px 14px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #fff 0%, #fbfbfe 100%);
}
.ask-chat-head::before {
  height: 3px;
  background: linear-gradient(90deg, #5b55ef 0%, #8b5cf6 55%, #6d4df2 100%);
}
.ask-chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.ask-chat-avatar .icon { width: 19px; height: 19px; }
.ask-chat-title strong { font-size: .88rem; }
.ask-chat-title small { margin-top: 2px; font-size: .67rem; }
.ask-chat-note {
  color: #8a94aa;
  background: #fafbfe;
  border-color: #e4e8f1;
}
.ask-chat-body {
  background:
    radial-gradient(700px 280px at 82% 0%, rgba(139, 92, 246, .09), transparent 68%),
    linear-gradient(180deg, #fbfcff 0%, #fff 62%);
}

.ask-empty { padding: 28px 18px 34px; }
.ask-empty-hero {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  border-radius: 18px;
  box-shadow: 0 18px 30px -16px rgba(91, 70, 229, .75);
}
.ask-empty-hero .icon { width: 30px; height: 30px; }
.ask-empty h2 {
  font-size: 1.2rem;
  font-weight: 780;
  letter-spacing: -.025em;
}
.ask-empty > p {
  max-width: 610px;
  margin-top: 7px;
  color: #64708a;
  font-size: .8rem;
}
.ask-suggest-grid {
  width: min(760px, 100%);
  gap: 10px;
  margin-top: 22px;
}
.ask-suggest-grid button {
  min-height: 64px;
  padding: 12px 13px;
  border-color: #e0e5ef;
  border-radius: 13px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 2px 7px rgba(42, 54, 84, .035);
}
.ask-suggest-grid button:hover {
  border-color: #cfc8ff;
  background: #fdfcff;
  box-shadow: 0 10px 22px -16px rgba(91, 70, 229, .6);
}
.ask-suggest-icon {
  color: #704ee8;
  background: #f2edff;
}

.ask-composer {
  border-color: #dbe1ec;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(42,54,84,.05);
}
.ask-composer:focus-within {
  border-color: #a99cf7;
  box-shadow: 0 0 0 3px rgba(139,92,246,.09), 0 8px 20px rgba(42,54,84,.06);
}
.ask-send {
  background: linear-gradient(145deg, #7c5cf0, #5a46e5);
  box-shadow: 0 8px 18px -10px rgba(79,70,229,.9);
}

.ask-answer .ask-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
}


.nav-item[data-view="ask"] .nav-icon-wrap {
  color: #b8a5ff;
  background: rgba(139, 92, 246, .11);
}
.nav-item[data-view="ask"].nav-on .nav-icon-wrap {
  color: #fff;
  background: linear-gradient(145deg, #8b5cf6, #5a46e5);
  box-shadow: 0 8px 18px -10px rgba(139,92,246,.9), inset 0 0 0 1px rgba(255,255,255,.18);
}
.nav-item[data-view="ask"].nav-on .icon { color: #fff; }

@media (max-width: 760px) {
  .ask-toolbar { min-height: 0; padding: 9px 10px; }
  .ask-toolbar-icon { width: 36px; height: 36px; border-radius: 11px; }
  .ask-toolbar-icon .icon { width: 18px; height: 18px; }
  .ask-empty-hero { width: 56px; height: 56px; }
  .ask-empty-hero .icon { width: 27px; height: 27px; }
}


.ask-empty--inactive {
  position: relative;
  isolation: isolate;
  min-height: 100%;
  overflow: hidden;
  padding: 34px 20px;
  border-radius: 15px;
  background:
    radial-gradient(520px 240px at 50% 38%, rgba(124, 92, 240, .12), transparent 72%),
    radial-gradient(360px 180px at 76% 24%, rgba(99, 102, 241, .07), transparent 72%),
    linear-gradient(180deg, #fbfcff 0%, #ffffff 70%);
}
.ask-empty--inactive::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 300px;
  height: 300px;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, .10), rgba(139, 92, 246, 0) 68%);
  filter: blur(8px);
  pointer-events: none;
}
.ask-empty--inactive::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .32;
  background-image: radial-gradient(circle at center, rgba(93, 78, 225, .13) 0 1px, transparent 1.2px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, transparent 2%, #000 24%, #000 58%, transparent 88%);
  pointer-events: none;
}
.ask-empty--inactive .ask-empty-hero {
  width: 58px;
  height: 58px;
  margin-bottom: 15px;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(145deg, #9b6cf6 0%, #7354ee 48%, #5046e5 100%);
  box-shadow: 0 18px 36px -20px rgba(91, 70, 229, .85), inset 0 1px 0 rgba(255,255,255,.28);
}
.ask-empty--inactive h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 780;
  letter-spacing: -.022em;
}
.ask-empty--inactive > p {
  max-width: 510px;
  margin-top: 7px;
  color: #69758d;
  font-size: .79rem;
  line-height: 1.58;
}
@media (max-width: 760px) {
  .ask-empty--inactive { padding: 28px 14px; }
  .ask-empty--inactive > p { max-width: 420px; }
}


/* === Topbar visual polish === */
/* Refined upper navigation only. Sidebar intentionally unchanged. */
.topbar {
  position: relative;
  min-height: var(--header-h);
  padding-inline: clamp(18px, 2.1vw, 32px);
  border-bottom: 1px solid rgba(199, 205, 224, .92);
  background:
    radial-gradient(560px 150px at 24% -70%, rgba(99, 102, 241, .16), transparent 72%),
    linear-gradient(180deg, #f6f5ff 0%, #f1f4fb 100%);
  box-shadow: 0 5px 20px rgba(50, 56, 98, .06);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(99,102,241,.20) 28%, rgba(139,92,246,.16) 62%, transparent 100%);
}

.crumb {
  gap: 7px;
  padding: 5px 7px 5px 8px;
  border: 1px solid rgba(216,221,233,.88);
  border-radius: 11px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 2px rgba(22,30,55,.035);
  font-size: .78rem;
}
.crumb > span:first-child {
  padding: 4px 7px;
  border-radius: 7px;
  color: #7a859d;
  background: #f3f5f9;
  font-weight: 600;
}
.crumb-sep {
  width: 12px;
  height: 12px;
  color: #b0b8c8;
}
.crumb b {
  padding: 4px 8px 4px 2px;
  color: var(--tone-ink, var(--ink));
  font-size: .8rem;
  font-weight: 720;
  letter-spacing: -.012em;
}

.topsearch {
  height: 38px;
  max-width: 350px;
  border-color: #dde2ec;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.topsearch:hover {
  border-color: #cfd5e2;
  background: #fff;
}
.topsearch:focus-within {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 52%, #cfd5e2);
  background: #fff;
  box-shadow: 0 0 0 3px var(--tone-soft, var(--accent-soft));
}

.topbar-right { gap: 7px; }
.topbar-right .icon-btn {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border-color: #dde2ec;
  background: rgba(255,255,255,.76);
  color: #6d7890;
  box-shadow: 0 1px 2px rgba(22,30,55,.025);
}
.topbar-right .icon-btn:hover {
  color: var(--tone-ink, var(--accent-ink));
  border-color: #cbcfe0;
  background: #fff;
}

.svc-btn {
  height: 36px;
  padding: 0 10px;
  gap: 7px;
  border: 1px solid #dde2ec;
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  color: #69758c;
  box-shadow: 0 1px 2px rgba(22,30,55,.03);
  transition: border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.svc-btn:hover {
  transform: translateY(-1px);
  border-color: #ccd3e0;
  background: #fff;
  box-shadow: 0 6px 14px -10px rgba(22,30,55,.35);
}
.svc-btn[data-kind="idle"] {
  color: #9a6200;
  border-color: rgba(217, 152, 35, .24);
  background: linear-gradient(180deg, #fffaf0 0%, #fff6e5 100%);
}
.svc-btn[data-kind="idle"] .dot {
  background: #e6a52d;
  box-shadow: 0 0 0 3px rgba(230,165,45,.12);
}
.svc-btn[data-kind="idle"] .chev { color: #b17a1b; }
.svc-btn[data-kind="ok"] {
  color: #16785b;
  border-color: rgba(33, 154, 112, .20);
  background: linear-gradient(180deg, #f5fffb 0%, #effbf7 100%);
}
.svc-btn[data-kind="degraded"] {
  color: #9a6200;
  border-color: rgba(217, 152, 35, .24);
  background: #fff8ea;
}
.svc-btn[data-kind="down"] {
  color: #b13b4d;
  border-color: rgba(215, 69, 91, .20);
  background: #fff4f5;
}
.svc-btn.svc-on {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 42%, #d7dce6);
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-soft, var(--accent-soft)) 75%, transparent);
}
.svc-btn-text {
  max-width: 11rem;
  font-size: .72rem;
  font-weight: 680;
  letter-spacing: -.005em;
}

@media (max-width: 760px) {
  .topbar { padding-inline: 12px; }
  .crumb { border-color: transparent; background: transparent; box-shadow: none; padding-left: 0; }
  .crumb > span:first-child { display: none; }
  .crumb-sep { display: none; }
  .crumb b { padding-left: 0; }
}

/* Stronger component separation while keeping the header lightweight. */
.topbar {
  background:
    radial-gradient(620px 170px at 22% -80%, color-mix(in srgb, var(--tone, #6366f1) 18%, transparent), transparent 72%),
    linear-gradient(180deg, #f4f4fd 0%, #edf1f9 100%);
}
.topbar::after {
  opacity: .9;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--tone, #6366f1) 34%, transparent) 24%,
    color-mix(in srgb, var(--tone, #6366f1) 22%, transparent) 66%,
    transparent 100%);
}

.crumb {
  min-height: 40px;
  padding: 5px 8px 5px 7px;
  border-color: rgba(205,212,229,.95);
  background: rgba(255,255,255,.84);
  box-shadow: 0 2px 7px rgba(45,53,82,.045), inset 0 1px 0 rgba(255,255,255,.9);
}
.crumb-group {
  padding: 4px 7px;
  border-radius: 7px;
  color: #7d879b;
  background: #f1f3f8;
  font-weight: 620;
}
.crumb-current-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--accent)) 18%, transparent);
}
.crumb-current-icon .icon { width: 14px; height: 14px; }
.crumb b {
  padding-left: 0;
  padding-right: 7px;
  font-size: .82rem;
}

.topsearch {
  border-radius: 11px;
  border-color: #d4dae7;
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 7px rgba(45,53,82,.035), inset 0 1px 0 rgba(255,255,255,.9);
}
.topsearch > .icon { color: #8b95a8; }

.topbar-right {
  padding: 4px;
  border: 1px solid rgba(207,214,229,.9);
  border-radius: 13px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 2px 8px rgba(45,53,82,.035), inset 0 1px 0 rgba(255,255,255,.72);
}
.topbar-right .icon-btn,
.topbar-right .svc-btn {
  box-shadow: none;
}
.topbar-right .icon-btn {
  border-color: transparent;
  background: transparent;
}
.topbar-right .icon-btn:hover {
  border-color: rgba(204,211,225,.9);
  background: #fff;
}
.topbar-right .svc-btn {
  border-color: transparent;
}
.topbar-right .svc-btn[data-kind="idle"] {
  border-color: rgba(217,152,35,.18);
}
.topbar-right .svc-btn[data-kind="ok"] {
  border-color: rgba(33,154,112,.16);
}
.topbar-right .svc-btn[data-kind="degraded"] {
  border-color: rgba(217,152,35,.18);
}
.topbar-right .svc-btn[data-kind="down"] {
  border-color: rgba(215,69,91,.18);
}

@media (max-width: 760px) {
  .crumb-group { display: none; }
  .crumb-current-icon { width: 28px; height: 28px; }
  .topbar-right { padding: 2px; border-color: transparent; background: transparent; box-shadow: none; }
}


.topbar {
  background:
    radial-gradient(620px 170px at 22% -80%, color-mix(in srgb, var(--tone, #6366f1) 18%, transparent), transparent 72%),
    linear-gradient(180deg, #f4f4fd 0%, #edf1f9 100%);
}
.topbar::after {
  opacity: .9;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--tone, #6366f1) 34%, transparent) 24%,
    color-mix(in srgb, var(--tone, #6366f1) 22%, transparent) 66%,
    transparent 100%);
}

.crumb {
  min-height: 40px;
  padding: 5px 8px 5px 7px;
  border-color: rgba(205,212,229,.95);
  background: rgba(255,255,255,.84);
  box-shadow: 0 2px 7px rgba(45,53,82,.045), inset 0 1px 0 rgba(255,255,255,.9);
}
.crumb-group {
  padding: 4px 7px;
  border-radius: 7px;
  color: #7d879b;
  background: #f1f3f8;
  font-weight: 620;
}
.crumb-current-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--accent)) 18%, transparent);
}
.crumb-current-icon .icon { width: 14px; height: 14px; }
.crumb b {
  padding-left: 0;
  padding-right: 7px;
  font-size: .82rem;
}

.topsearch {
  border-radius: 11px;
  border-color: #d4dae7;
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 7px rgba(45,53,82,.035), inset 0 1px 0 rgba(255,255,255,.9);
}
.topsearch > .icon { color: #8b95a8; }

.topbar-right {
  padding: 4px;
  border: 1px solid rgba(207,214,229,.9);
  border-radius: 13px;
  background: rgba(255,255,255,.55);
  box-shadow: 0 2px 8px rgba(45,53,82,.035), inset 0 1px 0 rgba(255,255,255,.72);
}
.topbar-right .icon-btn,
.topbar-right .svc-btn {
  box-shadow: none;
}
.topbar-right .icon-btn {
  border-color: transparent;
  background: transparent;
}
.topbar-right .icon-btn:hover {
  border-color: rgba(204,211,225,.9);
  background: #fff;
}
.topbar-right .svc-btn {
  border-color: transparent;
}
.topbar-right .svc-btn[data-kind="idle"] {
  border-color: rgba(217,152,35,.18);
}
.topbar-right .svc-btn[data-kind="ok"] {
  border-color: rgba(33,154,112,.16);
}
.topbar-right .svc-btn[data-kind="degraded"] {
  border-color: rgba(217,152,35,.18);
}
.topbar-right .svc-btn[data-kind="down"] {
  border-color: rgba(215,69,91,.18);
}

@media (max-width: 760px) {
  .crumb-group { display: none; }
  .crumb-current-icon { width: 28px; height: 28px; }
  .topbar-right { padding: 2px; border-color: transparent; background: transparent; box-shadow: none; }
}



/* === Sidebar category folding === */
.nav-group-toggle {
  width: 100%;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nav-group-toggle .nav-group-label {
  flex: 1;
  padding-right: 0;
}
.nav-group-chevron {
  flex: none;
  margin-right: 10px;
  color: rgba(255,255,255,.36);
  transition: transform .2s cubic-bezier(.22,.8,.3,1), color .16s ease;
}
.nav-group-toggle:hover .nav-group-label { color: rgba(255,255,255,.62); }
.nav-group-toggle:hover .nav-group-chevron { color: rgba(255,255,255,.68); }
.nav-group-toggle:focus-visible {
  outline: 2px solid rgba(129,140,248,.72);
  outline-offset: 2px;
  border-radius: 6px;
}
.nav-group-items {
  display: grid;
  gap: 4px;
  max-height: 620px;
  opacity: 1;
  overflow: hidden;
  transition: max-height .24s cubic-bezier(.22,.8,.3,1), opacity .16s ease, transform .2s cubic-bezier(.22,.8,.3,1);
  transform: translateY(0);
}
.nav-group.group-collapsed .nav-group-items {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
.nav-group.group-collapsed .nav-group-chevron { transform: rotate(-90deg); }
.nav-group.group-collapsed { gap: 0; }
.nav-group.group-collapsed + .nav-group { margin-top: 9px; }


.sidebar-collapsed .nav-group-toggle { display: none; }
.sidebar-collapsed .nav-group-items {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 4px;
  max-height: none;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transform: none;
}
.sidebar-collapsed .nav-group.group-collapsed { gap: 4px; }


@media (prefers-reduced-motion: reduce) {
  .nav-group-items,
  .nav-group-chevron { transition-duration: .01ms !important; }
}





.ask-help { position: relative; flex: none; }

.ask-chip-button.is-on {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 48%, var(--line-strong));
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
}

.ask-help-panel {
  position: absolute;
  z-index: 45;
  top: calc(100% + 8px);
  right: 0;
  width: min(24rem, calc(100vw - 32px));
  max-height: min(30rem, calc(100vh - var(--header-h) - 40px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: ask-help-in .16s cubic-bezier(.22, .8, .3, 1);
  text-align: left;
}

@keyframes ask-help-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: none; }
}


.ask-help-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 9px 10px 10px;
  border-bottom: 1px solid var(--line);
}
.ask-help-head strong {
  flex: 1;
  font-size: .82rem;
  letter-spacing: -.01em;
}
.ask-help-head-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 8px;
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone, var(--accent)) 16%, transparent);
}
.ask-help-close {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.ask-help-close:hover { background: var(--surface-soft); color: var(--ink); }
.ask-help-close:focus-visible { outline: 2px solid var(--tone, var(--accent)); outline-offset: 1px; }

.ask-help-list { display: grid; gap: 2px; padding: 6px 0; }

.ask-help-topic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-sm);
  transition: background .13s ease;
}
.ask-help-topic:hover { background: var(--surface-soft); }

.ask-help-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 9px;
  color: var(--tone-ink, var(--accent-ink));
  background: var(--tone-soft, var(--accent-soft));
}

.ask-help-topic > div { min-width: 0; display: grid; gap: 3px; }
.ask-help-topic strong {
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--ink);
}
.ask-help-topic p {
  margin: 0;
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.55;
}


.ask-help-foot {
  margin: 0;
  padding: 10px 11px 9px;
  border-top: 1px solid var(--line);
  background: var(--surface-subtle);
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--faint);
  font-size: .65rem;
  line-height: 1.5;
}





.ask-toolbar {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 22%, var(--line));
  background:
    radial-gradient(560px 150px at 8% -120%, color-mix(in srgb, var(--tone, var(--accent)) 16%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--tone, var(--accent)) 5%, #fff) 0%, color-mix(in srgb, var(--tone, var(--accent)) 9%, #fbfcff) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 10px 24px -18px rgba(35, 28, 74, .5);
}

.ask-toolbar-field .erp-picker-input,
.ask-toolbar-field .erp-picker-selected,
.ask-client-chip--toolbar {
  background: #fff;
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 14%, var(--line-strong));
  box-shadow: 0 1px 2px rgba(22, 30, 55, .05);
}


.ask-chat {
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 18px 38px -28px rgba(28, 22, 66, .55);
}


.ask-empty-hero {
  box-shadow:
    0 20px 34px -20px var(--accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}

.ask-suggest-grid button {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 16%, var(--line));
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}


.ask-suggest-grid button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--tone, var(--accent)), color-mix(in srgb, var(--tone, var(--accent)) 40%, #8b5cf6));
  opacity: 0;
  transition: opacity .16s ease;
}
.ask-suggest-grid button:hover::before,
.ask-suggest-grid button:focus-visible::before { opacity: 1; }
.ask-suggest-grid button:hover {
  background: color-mix(in srgb, var(--tone, var(--accent)) 4%, #fff);
  box-shadow: 0 16px 28px -20px var(--accent-glow);
  transform: translateY(-2px);
}



.ask-question-row > p {
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.ask-answer {
  position: relative;
  overflow: hidden;
  padding: 16px 18px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 26px -22px rgba(28, 22, 66, .5);
}


.ask-answer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--ask-hue), color-mix(in srgb, var(--ask-hue) 45%, #8b5cf6));
}
.ask-answer > * { position: relative; }

.ask-answer-head { border-bottom-color: color-mix(in srgb, var(--ask-hue) 14%, var(--line)); }


.ask-evidence-panel {
  border-color: var(--line-strong);
  box-shadow: 0 14px 30px -24px rgba(28, 22, 66, .5);
}

.ask-evidence-title {
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.ask-evidence-count {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tone-soft, var(--accent-soft));
  color: var(--tone-ink, var(--accent-ink));
  font-weight: 700;
}


.ask-source-item.is-cited {
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.ask-source-item > summary { transition: background .13s ease; }
.ask-source-item > summary:hover { background: color-mix(in srgb, var(--tone, var(--accent)) 5%, transparent); }


.ask-composer {
  border-color: var(--line-strong);
  box-shadow:
    0 4px 14px rgba(15, 23, 42, .05),
    0 18px 38px -26px rgba(28, 22, 66, .55);
}
.ask-composer:focus-within {
  border-color: color-mix(in srgb, var(--tone, var(--accent)) 62%, var(--line));
  box-shadow:
    0 0 0 3px var(--tone-soft, var(--accent-soft)),
    0 10px 26px rgba(15, 23, 42, .07);
}

.ask-error {
  border-color: rgba(215, 69, 91, .28);
  background: #fff4f5;
  color: var(--bad-ink);
}


@media (max-width: 760px) {
  .ask-help-panel {
    position: fixed;
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 10px;
    width: auto;
    max-height: 70vh;
  }
  .ask-answer { padding: 14px 14px 16px; }
  .ask-suggest-grid button::before { width: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .ask-help-panel { animation-duration: .01ms !important; }
}


.ask-source-filters { display: grid; gap: 7px; margin-bottom: 12px; }
.ask-source-filters input, .ask-source-filters select { width: 100%; min-width: 0; padding: 8px 9px; font: inherit; font-size: .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.ask-source-filters small { color: var(--muted); font-size: .65rem; }
.ask-source-filters input:focus-visible, .ask-source-filters select:focus-visible, .ask-diagnostics summary:focus-visible { outline: 2px solid var(--tone, var(--accent)); outline-offset: 2px; }
.ask-diagnostics { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; color: var(--muted); font-size: .7rem; }
.ask-diagnostics summary { cursor: pointer; font-weight: 600; }
.ask-diagnostics dl { display: grid; gap: 6px; margin: 10px 0; }
.ask-diagnostics dl > div { display: flex; justify-content: space-between; gap: 12px; }
.ask-diagnostics dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.ask-performance { margin-top: 10px; }
.ask-performance p { margin-top: 8px; font-size: .65rem; line-height: 1.5; }
.ask-answer-actions { flex-wrap: wrap; }
.nav-item[href] { text-decoration: none; }



/* ── Lead to BRD: brief workspace ──────────────────────────────────────────
   One flat card per step, a vertical step rail that also carries the brief's
   status and the single Generate action, and provenance tags on every value
   auto-fill touched: ERPNext (slate), AI from a source (indigo), AI guess to
   check (amber), confirmed (green). */

.brief-page { --brief-surface: #fff; --brief-line: #E3E8F0; --brief-field-bg: #fff; --brief-ai-tint: #F6F6FF; --brief-check-tint: #FFFAEB; width: 100%; min-width: 0; }

.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--brief-line); }
.brief-head h2 { font-size: 1.45rem; letter-spacing: -.02em; }
.brief-head p { margin: 0; color: var(--muted); max-width: 62ch; font-size: 14.5px; }
.brief-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.brief-drafts { position: relative; display: flex; align-items: center; color: var(--faint); }
.brief-drafts .icon { position: absolute; left: 11px; pointer-events: none; }
.brief-head .brief-drafts select { height: 38px; min-width: 220px; max-width: 320px; padding: 0 30px 0 34px; border-radius: 9px; }

.brief-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 28px; align-items: start; }
.brief-main { min-width: 0; max-width: 940px; display: grid; gap: 16px; }
.brief-lock { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Rail */
.brief-rail { position: sticky; top: calc(var(--header-h) + 18px); display: grid; gap: 18px; }
.brief-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; }
.brief-step button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; color: var(--ink); text-align: left; cursor: pointer; position: relative; }
.brief-step button:hover { background: rgba(79, 70, 229, .06); }
.brief-step:not(:last-child) button::after { content: ""; position: absolute; left: 23px; top: 38px; height: 14px; width: 2px; border-radius: 2px; background: var(--brief-line); }
.brief-step.done:not(:last-child) button::after { background: rgba(16, 185, 129, .45); }
.brief-step.current button::after { display: none; }
.brief-step-mark { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--muted); background: #fff; border: 1.5px solid var(--line-strong); }
.brief-step.done .brief-step-mark { background: var(--ok-soft); border-color: transparent; color: var(--ok-ink); }
.brief-step.current .brief-step-mark { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.brief-step.current button { background: #fff; box-shadow: 0 0 0 1px var(--brief-line), var(--shadow-sm); }
.brief-step-text { min-width: 0; display: grid; }
.brief-step-text b { font-size: 13.5px; font-weight: 600; }
.brief-step-text small { font-size: 12px; color: var(--faint); }
.brief-step.missing .brief-step-text small { color: var(--bad-ink); }
.brief-step.check .brief-step-text small { color: var(--warn-ink); }
.brief-step.done .brief-step-text small { color: var(--ok-ink); }

.brief-status { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--brief-line); border-radius: 14px; background: var(--brief-surface); box-shadow: var(--shadow-sm); }
.brief-status-title b { display: block; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.brief-status-title small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; overflow-wrap: anywhere; }
.brief-meter { height: 6px; border-radius: 6px; background: var(--surface-section); overflow: hidden; }
.brief-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--violet)); transition: width .3s ease; }
.brief-status-line { margin: -4px 0 0; font-size: 12px; color: var(--muted); }
.brief-generate { width: 100%; height: 42px; }
.brief-quick { width: 100%; height: 34px; font-size: .78rem; }
.brief-status .erp-picker, .brief-status .brief-field { margin: 0; }

/* Step card */
.brief-card { background: var(--brief-surface); border: 1px solid var(--brief-line); border-radius: 16px; box-shadow: var(--shadow-sm); min-width: 0; }
.brief-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 26px 18px; border-bottom: 1px solid var(--brief-line); }
.brief-card-step { display: block; font-size: 12px; font-weight: 600; color: var(--accent-ink); margin-bottom: 2px; }
.brief-card-head h3 { font-size: 1.12rem; letter-spacing: -.015em; }
.brief-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.brief-card-body { padding: 4px 26px 8px; display: grid; }
.brief-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 26px; border-top: 1px solid var(--brief-line); background: var(--surface-subtle); border-radius: 0 0 16px 16px; }

.brief-group { padding: 22px 0; }
.brief-group + .brief-group, .brief-collapse + .brief-group, .autofill + .brief-group { border-top: 1px solid var(--brief-line); }
.brief-group > header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.brief-group h4 { margin: 0; font-family: inherit; font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); text-transform: none; }
.brief-group > header p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.brief-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.brief-grid > .wide, .brief-field.wide { grid-column: 1 / -1; }

/* Fields */
.brief-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.brief-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.brief-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.brief-label em { color: var(--bad); font-style: normal; }
.brief-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.brief-card select,
.brief-card textarea,
.brief-status > .brief-field select,
.brief-drafts select,
.recording-upload input:not([type="file"]),
.recording-upload select {
  width: 100%; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--brief-field-bg); color: var(--ink); font: inherit; font-size: 14px; box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.brief-card textarea { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.brief-card input:focus, .brief-card select:focus, .brief-card textarea:focus, .brief-drafts select:focus, .recording-upload input:focus, .recording-upload select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.brief-field.from-ai input, .brief-field.from-ai select, .brief-field.from-ai textarea { background: var(--brief-ai-tint); border-color: #C9CBF6; }
.brief-field.needs-check input, .brief-field.needs-check select, .brief-field.needs-check textarea { background: var(--brief-check-tint); border-color: #F2C97D; }
.brief-field.invalid input, .brief-field.invalid select, .brief-field.invalid textarea { border-color: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.brief-hint { font-size: 12px; color: var(--faint); margin: 0; }
.brief-error { font-size: 12px; color: var(--bad-ink); font-weight: 500; }
.brief-inline-link { font-size: 12px; justify-self: start; }
.brief-static { margin: 0; min-height: 40px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); }
.brief-empty { margin: 0; color: var(--faint); font-size: 13px; }

.brief-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 60%; height: 20px; padding: 0 8px; border: 0; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; }
button.brief-tag { cursor: pointer; }
button.brief-tag:hover { filter: brightness(.96); }
.brief-tag[data-origin="erpnext"] { background: var(--cool-soft); color: #475569; }
.brief-tag[data-origin="ai"] { background: var(--accent-soft); color: var(--accent-ink); }
.brief-tag[data-origin="check"] { background: var(--warn-soft); color: var(--warn-ink); }
.brief-tag[data-origin="confirmed"] { background: var(--ok-soft); color: var(--ok-ink); }

.brief-evidence { padding: 10px 12px; border: 1px solid var(--brief-line); border-radius: 10px; background: var(--surface-subtle); display: grid; gap: 8px; }
.brief-evidence-why { margin: 0; font-size: 12.5px; color: var(--muted); }
.brief-evidence ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.brief-evidence li { display: grid; gap: 1px; font-size: 12.5px; }
.brief-evidence li b { font-weight: 600; }
.brief-evidence li span { color: var(--muted); overflow-wrap: anywhere; }
.brief-evidence .btn { justify-self: start; }

.brief-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-chips label { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 13px; color: var(--ink); cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.brief-chips label:hover { border-color: var(--accent); }
.brief-chips label.picked { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.brief-chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.brief-chips label:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.brief-choices.needs-check .brief-chips label.picked { border-color: #F2C97D; background: var(--brief-check-tint); color: var(--warn-ink); }

.brief-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.brief-levels label { position: relative; display: grid; gap: 3px; align-content: start; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: #fff; cursor: pointer; }
.brief-levels label.chosen { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.brief-levels input { position: absolute; opacity: 0; }
.brief-levels label:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.brief-levels b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.brief-levels b small { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.brief-levels span { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.brief-levels p { margin: 4px 0 0; font-size: 12px; color: var(--faint); line-height: 1.5; }

.brief-collapse { padding: 16px 0 20px; border-top: 1px solid var(--brief-line); }
.brief-collapse > summary { cursor: pointer; font-size: 14px; font-weight: 650; list-style: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brief-collapse > summary::-webkit-details-marker { display: none; }
.brief-collapse > summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--surface-section); color: var(--muted); font-weight: 700; }
.brief-collapse[open] > summary::before { content: "–"; }
.brief-collapse > summary small { font-weight: 400; color: var(--faint); font-size: 12.5px; }
.brief-collapse > .brief-grid { margin-top: 16px; }

/* Lead search and selected Lead */
.brief-search { display: grid; gap: 10px; padding: 22px 0; }
.brief-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px 140px; gap: 10px; }
.brief-search-input { position: relative; display: flex; align-items: center; color: var(--faint); }
.brief-search-input .icon { position: absolute; left: 12px; pointer-events: none; }
.brief-card .brief-search-input input { padding-left: 38px; padding-right: 34px; height: 44px; font-size: 15px; }
.brief-clear { position: absolute; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--faint); cursor: pointer; }
.brief-clear:hover { background: var(--surface-section); color: var(--ink); }
.brief-card .brief-search-row select { height: 44px; }
.brief-results { display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.brief-results .lead-result { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--brief-line); border-radius: 10px; background: #fff; text-align: left; color: var(--ink); transform: none; box-shadow: none; }
.brief-results .lead-result:hover { border-color: var(--accent); background: #fff; box-shadow: var(--shadow-sm); transform: none; }
.brief-results .lead-result.selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.brief-result-main { flex: 1; min-width: 0; display: grid; }
.brief-result-main b { font-size: 14px; overflow-wrap: anywhere; }
.brief-result-main small { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
.brief-avatar { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; }
.brief-avatar.large { width: 46px; height: 46px; border-radius: 12px; font-size: 15px; background: var(--side-bg); color: #fff; }
.brief-pill { flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); }
.brief-pill[data-tone="ok"] { background: var(--ok-soft); color: var(--ok-ink); }
.brief-pill[data-tone="warn"] { background: var(--warn-soft); color: var(--warn-ink); }
.brief-pill[data-tone="bad"] { background: var(--bad-soft); color: var(--bad-ink); }
.brief-searching { padding: 4px 0; }

.brief-lead { display: flex; align-items: center; gap: 14px; padding: 22px 0 16px; }
.brief-lead-main { flex: 1; min-width: 0; display: grid; }
.brief-lead-main b { font-size: 17px; letter-spacing: -.015em; overflow-wrap: anywhere; }
.brief-lead-main small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }

/* Auto-fill */
.autofill { margin-bottom: 22px; padding: 18px; border-radius: 14px; border: 1px solid #DCDDFB; background: linear-gradient(180deg, #F7F7FF, #FBFBFF); display: grid; gap: 16px; }
.autofill-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.autofill-head h4 { margin: 0; font-family: inherit; font-size: 15px; font-weight: 650; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.autofill-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; max-width: 60ch; }
.autofill-actions { display: grid; gap: 8px; justify-items: end; flex: none; }
.autofill-pref { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.autofill-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.autofill-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); animation: autofill-in .25s ease both; }
.autofill-steps li[data-state="done"] { color: var(--muted); }
.autofill-steps li[data-state="failed"] { color: var(--bad-ink); }
.autofill-steps li small { margin-left: auto; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; }
.autofill-mark { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 1px solid #DCDDFB; color: var(--ok-ink); font-size: 12px; }
.autofill-steps li[data-state="failed"] .autofill-mark { color: var(--bad); }
.autofill-mark .spinner { width: 12px; height: 12px; border-width: 2px; }
@keyframes autofill-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.autofill-result { display: grid; gap: 12px; }
.autofill-summary { margin: 0; font-size: 14px; color: var(--ink); line-height: 1.6; }
.autofill-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0; border: 1px solid #DCDDFB; border-radius: 12px; overflow: hidden; background: #DCDDFB; }
.autofill-stats div { background: #fff; padding: 10px 14px; }
.autofill-stats dt { font-size: 12px; color: var(--muted); }
.autofill-stats dd { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.autofill-warnings { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.autofill-warnings li { display: flex; gap: 6px; font-size: 12.5px; color: var(--warn-ink); }
.autofill-warnings .icon { flex: none; margin-top: 3px; }
.autofill-more { border-top: 1px solid #E4E5FB; padding-top: 10px; }
.autofill-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.autofill-more ol { margin: 10px 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13.5px; }
.autofill-sources { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.autofill-sources li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; font-size: 12.5px; }
.autofill-source-id { grid-row: span 2; align-self: start; font-weight: 700; font-size: 11px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; }
.autofill-sources span:last-child { color: var(--muted); overflow-wrap: anywhere; }

.autofill-meetings { display: grid; gap: 10px; border-top: 1px solid #E4E5FB; padding-top: 14px; }
.autofill-meetings-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.autofill-meetings h5 { margin: 0; font-size: 13.5px; font-weight: 650; }
.meeting-picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.meeting-picks label { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--brief-line); border-radius: 10px; background: #fff; cursor: pointer; }
.meeting-picks label.on { border-color: #C9CBF6; }
.meeting-picks input { margin-top: 4px; accent-color: var(--accent); }
.meeting-picks span { display: grid; min-width: 0; }
.meeting-picks b { font-size: 13.5px; overflow-wrap: anywhere; }
.meeting-picks small { font-size: 12px; color: var(--faint); }

/* Recording upload (Lead page and Meetings) */
.recording-upload { display: grid; gap: 10px; }
.recording-pick { display: grid; gap: 10px; }
.recording-drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px dashed var(--line-strong); border-radius: 12px; background: #fff; color: var(--accent-ink); cursor: pointer; }
.recording-drop:hover, .recording-drop:focus-within { border-color: var(--accent); background: var(--brief-ai-tint, #F6F6FF); }
.recording-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.recording-drop span { display: grid; min-width: 0; color: var(--ink); }
.recording-drop b { font-size: 13.5px; overflow-wrap: anywhere; }
.recording-drop small { font-size: 12px; color: var(--faint); }
.recording-options { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 10px; align-items: end; }
.recording-upload .brief-field { display: grid; gap: 6px; }
.recording-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.recording-jobs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--brief-line, #E3E8F0); border-radius: 10px; background: #fff; }
.recording-jobs li .progress-bar { grid-column: 1 / -1; }
.recording-job-title { display: grid; min-width: 0; }
.recording-job-title b { font-size: 13.5px; overflow-wrap: anywhere; }
.recording-job-title small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.recording-jobs li[data-state="failed"] small { color: var(--bad-ink); }
.recording-upload .brief-hint { font-size: 12px; color: var(--faint); margin: 0; }
.recording-upload .brief-error { font-size: 12.5px; color: var(--bad-ink); margin: 0; }
.recording-upload .brief-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ok-soft); color: var(--ok-ink); }

.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-section); margin-bottom: 14px; }
.segmented button { border: 0; background: transparent; padding: 6px 14px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }

/* Review step */
.brief-review { display: grid; gap: 12px; padding: 22px 0 6px; }
.brief-review section { padding: 14px 16px; border: 1px solid var(--brief-line); border-left: 3px solid var(--accent); border-radius: 10px; background: #fff; }
.brief-review section[data-tone="ok"] { border-left-color: var(--ok); }
.brief-review section[data-tone="warn"] { border-left-color: var(--warn); }
.brief-review section[data-tone="bad"] { border-left-color: var(--bad); }
.brief-review h4 { margin: 0; font-family: inherit; font-size: 14px; font-weight: 650; text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.brief-review ul, .brief-review ol { margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.brief-review ul { list-style: none; }
.brief-review ol { padding-left: 20px; font-size: 13.5px; }
.brief-review li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13.5px; }
.brief-review li small { color: var(--faint); font-size: 12px; }
.brief-review .btn { margin-top: 10px; }
.brief-review .brief-hint { margin-top: 8px; }

.brief-gaps { padding: 14px 16px; border: 1px solid rgba(239, 68, 68, .3); border-radius: 12px; background: #FFF7F7; }
.brief-gaps p { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--bad-ink); }
.brief-gaps ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.brief-gaps li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; }
.brief-gaps li span { color: var(--faint); font-size: 12px; }

@media (max-width: 1100px) {
  .brief-layout { grid-template-columns: 228px minmax(0, 1fr); gap: 20px; }
  .recording-options { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .recording-options .btn { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .brief-head { flex-direction: column; align-items: stretch; }
  .brief-head-actions { justify-content: flex-start; }
  .brief-drafts { flex: 1; }
  .brief-head .brief-drafts select { min-width: 0; max-width: none; width: 100%; }
  .brief-layout { grid-template-columns: minmax(0, 1fr); }
  .brief-rail { display: contents; }
  .brief-steps { order: 0; }
  .brief-steps { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .brief-step { flex: none; }
  .brief-step button { padding: 7px 10px 7px 7px; border: 1px solid var(--brief-line); background: #fff; }
  .brief-step:not(:last-child) button::after { display: none; }
  .brief-step-text small { display: none; }
  .brief-status { order: 2; }
  .brief-main { order: 1; }
  .brief-card-head, .brief-card-body, .brief-nav { padding-left: 16px; padding-right: 16px; }
  .brief-levels { grid-template-columns: minmax(0, 1fr); }
  .autofill-head { flex-direction: column; }
  .autofill-actions { justify-items: start; }
  .autofill-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .brief-grid { grid-template-columns: minmax(0, 1fr); }
  .brief-search-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .brief-search-input { grid-column: 1 / -1; }
  .brief-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .brief-card select, .brief-card textarea, .brief-head select { font-size: 16px; }
  .brief-nav { flex-wrap: wrap; }
  .brief-nav .btn { flex: 1; }
  .recording-options { grid-template-columns: minmax(0, 1fr); }
  .brief-card-head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .autofill-steps li { animation: none; }
  .brief-meter i { transition: none; }
}

/* Lead to BRD — compact auto-fill strip, drafts row and toast */
.brief-card-head { padding: 18px 24px 14px; }
.brief-card-head h3 { font-size: 1.05rem; }
.brief-card-body { padding-top: 0; }
.brief-group > header { margin-bottom: 12px; }
.brief-tag[data-origin="history"] { background: #EEF2F7; color: #334155; }

.autofill { padding: 12px 14px; gap: 10px; margin-bottom: 18px; border-radius: 12px; }
.autofill-bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.autofill-icon { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: #fff; border: 1px solid #DCDDFB; color: var(--accent); }
.autofill-icon .spinner { width: 13px; height: 13px; }
.autofill-line { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; color: var(--ink); }
.autofill-line b { color: var(--warn-ink); font-weight: 600; }
.autofill[data-state="failed"] .autofill-line { color: var(--bad-ink); }
.autofill-note { margin: 0; font-size: 12px; color: var(--muted); }
.meeting-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.meeting-chips label { position: relative; display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.meeting-chips label.on { border-color: #C9CBF6; background: #fff; color: var(--accent-ink); font-weight: 600; }
.meeting-chips label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.meeting-chips label small { font-weight: 400; color: var(--faint); }
.meeting-chips input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.meeting-chips label:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); }
.meeting-add { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 1px dashed var(--line-strong); border-radius: 999px; background: transparent; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.meeting-add:hover { border-color: var(--accent); color: var(--accent-ink); }

.brief-drafts-row { display: flex; align-items: center; gap: 6px; }
.brief-drafts-row .brief-drafts { flex: 1; min-width: 0; }
.brief-rail .brief-drafts select { height: 32px; min-width: 0; max-width: none; width: 100%; padding: 0 28px 0 10px; font-size: 12.5px; }
.brief-toast { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--ok-soft); color: var(--ok-ink); font-size: 12.5px; }

@media (max-width: 900px) {
  .brief-drafts-row { order: 3; }
  .brief-toast { order: 3; }
}
.brief-tag[data-origin="derived"] { background: #F1F5F9; color: #64748B; }
.brief-collapse > summary small { margin-left: 4px; }
.brief-levels label { padding: 12px 14px; }

/* Lead to BRD — refreshed palette: indigo = guided, teal = grounded, amber = check, slate = ERPNext */
.brief-page { --brief-line: #E2E8F4; --brief-ai-tint: #F4F5FF; --brief-check-tint: #FFF9E8; --teal: #0D9488; --teal-soft: rgba(13, 148, 136, .12); --teal-ink: #0F766E; }
.brief-card { border-color: var(--brief-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(79, 70, 229, .14); overflow: hidden; }
.brief-card-head { align-items: center; justify-content: flex-start; gap: 14px; padding: 18px 24px; background: linear-gradient(120deg, #EEF0FF 0%, #F7F8FF 55%, #FFFFFF 100%); border-bottom: 1px solid #DCE0F8; }
.brief-card-head > div { flex: 1; min-width: 0; }
.brief-card-head h3 { font-size: 1.08rem; color: var(--accent-ink); }
.brief-card-num { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 4px 10px -2px var(--accent-glow); }
.brief-legend { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.brief-legend i { font-style: normal; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.brief-legend i[data-origin="erpnext"] { background: var(--cool-soft); color: #475569; }
.brief-legend i[data-origin="ai"] { background: var(--accent-soft); color: var(--accent-ink); }
.brief-legend i[data-origin="check"] { background: var(--warn-soft); color: var(--warn-ink); }
.brief-legend i[data-origin="confirmed"] { background: var(--ok-soft); color: var(--ok-ink); }
.brief-tag[data-origin="confirmed"] { background: var(--ok-soft); color: var(--ok-ink); }
.brief-tag[data-origin="derived"], .brief-tag[data-origin="history"] { background: var(--teal-soft); color: var(--teal-ink); }
.brief-field.from-ai input, .brief-field.from-ai select, .brief-field.from-ai textarea { border-left: 3px solid var(--accent); }
.brief-field.needs-check input, .brief-field.needs-check select, .brief-field.needs-check textarea { border-left: 3px solid var(--warn); }
.brief-group h4 { display: flex; align-items: center; gap: 8px; }
.brief-group h4::before { content: ""; width: 4px; height: 14px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--violet)); }

.brief-step.current button { background: linear-gradient(120deg, #EEF0FF, #fff); box-shadow: 0 0 0 1px #C9CBF6, var(--shadow-sm); }
.brief-step.missing .brief-step-mark { border-color: var(--bad); color: var(--bad-ink); }
.brief-step.check .brief-step-mark { border-color: var(--warn); color: var(--warn-ink); }
.brief-status { border-color: #DCE0F8; background: linear-gradient(180deg, #FAFAFF, #fff); }
.brief-meter { height: 8px; }
.brief-generate { background: linear-gradient(135deg, var(--accent), var(--violet)); border: 0; box-shadow: 0 8px 18px -6px var(--accent-glow); }

.autofill { border-color: #D3D6F8; background: linear-gradient(135deg, #F1F2FF, #F8FAFF 60%, #F0FBF9); }
.autofill[data-state="running"] .autofill-icon { border-color: var(--accent); }
.autofill-steps { padding: 4px 2px 2px; }
.autofill-steps li { font-size: 12.5px; }
.autofill-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.autofill-chips span { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; background: #fff; border: 1px solid var(--brief-line); color: var(--muted); }
.autofill-chips b { font-size: 13px; font-variant-numeric: tabular-nums; }
.autofill-chips [data-tone="info"] { border-color: #C9CBF6; color: var(--accent-ink); }
.autofill-chips [data-tone="ok"] { border-color: rgba(13, 148, 136, .35); color: var(--teal-ink); background: #F2FBF9; }
.autofill-chips [data-tone="warn"] { border-color: #F2C97D; color: var(--warn-ink); background: var(--brief-check-tint); }
.autofill-summary { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0; }

.brief-ready { display: flex; align-items: center; gap: 16px; margin: 22px 0 4px; padding: 16px 18px; border-radius: 14px; border: 1px solid; }
.brief-ready > div:nth-child(2) { flex: 1; min-width: 0; }
.brief-ready h4 { margin: 0; font-family: inherit; font-size: 15px; font-weight: 650; text-transform: none; letter-spacing: -.01em; }
.brief-ready h4::before { display: none; }
.brief-ready p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.brief-ready[data-tone="ok"] { background: #F0FBF8; border-color: rgba(13, 148, 136, .35); --ring: var(--teal); }
.brief-ready[data-tone="warn"] { background: var(--brief-check-tint); border-color: #F2C97D; --ring: var(--warn); }
.brief-ready[data-tone="bad"] { background: #FFF6F6; border-color: rgba(239, 68, 68, .3); --ring: var(--bad); }
.brief-ready-ring { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ring) var(--pct), rgba(15, 23, 42, .08) 0); position: relative; }
.brief-ready-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.brief-ready-ring b { position: relative; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.brief-review section[data-tone="ok"] { border-left-color: var(--teal); }

@media (max-width: 640px) {
  .brief-legend { display: none; }
  .brief-ready { flex-wrap: wrap; }
}

/* Lead to BRD — hero, calmer rail, empty state */

.brief-step.current .brief-step-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.brief-steps.quiet .brief-step-text small, .brief-steps.quiet .brief-step.missing .brief-step-text small { color: var(--faint); }
.brief-steps.quiet .brief-step.missing .brief-step-mark { border-color: var(--line-strong); color: var(--muted); }
.brief-steps.quiet .brief-step.current .brief-step-mark { border-color: var(--accent); color: #fff; }
.brief-rail { top: calc(var(--header-h) + 14px); }
.brief-layout { gap: 26px; }

.brief-empty-state { display: grid; justify-items: center; gap: 4px; padding: 26px 18px; border: 1.5px dashed #C9CBF6; border-radius: 14px; background: linear-gradient(180deg, #F7F7FF, #fff); text-align: center; color: var(--accent); }
.brief-empty-state b { color: var(--ink); font-size: 14.5px; margin-top: 4px; }
.brief-empty-state span { color: var(--muted); font-size: 13px; max-width: 46ch; }
.brief-search { padding-bottom: 14px; }


/* Level of detail cards */
.brief-levels label { --lv: var(--cool); --lv-soft: #F1F5F9; --lv-edge: #CBD5E1; padding: 16px 16px 16px 18px; overflow: hidden; border: 1px solid var(--lv-edge); background: linear-gradient(160deg, var(--lv-soft) 0%, #fff 85%); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.brief-levels label::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--lv); }
.brief-levels label[data-level="low"] { --lv: #0D9488; --lv-soft: #E6F7F4; --lv-edge: #A7E3DA; }
.brief-levels label[data-level="moderate"] { --lv: var(--accent); --lv-soft: #EDEEFF; --lv-edge: #C9CBF6; }
.brief-levels label[data-level="high"] { --lv: var(--violet); --lv-soft: #F3EDFF; --lv-edge: #D9C9F8; }
.brief-levels label:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px var(--lv); border-color: var(--lv); }
.brief-levels label.chosen { border-color: var(--lv); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv) 22%, transparent), 0 10px 22px -12px var(--lv); background: linear-gradient(160deg, var(--lv-soft) 0%, #fff 100%); }
.brief-levels label.chosen::after { content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-radius: 50%; background: var(--lv) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.brief-levels b { color: var(--ink); font-size: 15px; }
.brief-levels b small { background: var(--lv); color: #fff; }
.brief-levels span { color: var(--lv); }
.brief-levels label[data-level="low"] span { color: #0F766E; }
.brief-levels label[data-level="high"] span { color: #6D28D9; }
.brief-levels label[data-level="moderate"] span { color: var(--accent-ink); }

/* Meeting Intelligence — cleaner layout */
.mtg-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mtg-bar h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.mtg-bar p { margin: 0; color: var(--muted); font-size: 14px; }
.mtg-page .mtg-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border: 0; background: transparent; box-shadow: none; }
.mtg-page .mtg-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: none; }
.mtg-page .mtg-stat-icon { flex: none; width: 30px; height: 30px; margin: 0; }
.mtg-page .mtg-stat-value { font-size: 1.25rem; font-variant-numeric: tabular-nums; margin: 0; }
.mtg-page .mtg-stat-label { color: var(--muted); font-size: 12.5px; }
.mtg-page .mtg-stat-hint { flex: 1 0 100%; min-width: 0; overflow-wrap: anywhere; }
.mtg-page .mtg-stat[data-attention] { border-color: #F2C97D; background: #FFFBF0; }
.mtg-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 20px; text-align: center; }
.mtg-empty-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.mtg-empty b { font-size: 15px; margin-top: 4px; }
.mtg-empty p { margin: 0 0 8px; max-width: 46ch; color: var(--muted); font-size: 13.5px; }
@media (max-width: 760px) { .mtg-page .mtg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lead to BRD — backdrop and colour refresh
   A layered indigo / violet / teal backdrop with a faint dot grid replaces the flat grey, the layout is centred
   on wide screens, and the rail, cards and fields get more contrast so the page reads as depth, not wash. */
.brief-page { --brief-line: #D9DFF3; --brief-ai-tint: #F1F2FF; }
.brief-layout { width: 100%; max-width: 1280px; margin-inline: auto; }
.brief-main { max-width: none; }

/* Rail: steps sit on a frosted panel so they stay legible over the backdrop */
.brief-steps { padding: 8px; border: 1px solid rgba(255, 255, 255, .85); border-radius: 16px; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 26px -14px rgba(79, 70, 229, .28); }
.brief-step button:hover { background: rgba(79, 70, 229, .08); }
.brief-step.current button { background: #fff; box-shadow: 0 0 0 1px #BFC4F5, 0 6px 16px -8px rgba(79, 70, 229, .45); }
.brief-step.current .brief-step-mark { background: linear-gradient(135deg, var(--accent), var(--violet)); box-shadow: 0 0 0 4px rgba(79, 70, 229, .16); }
.brief-step.done .brief-step-mark { background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff; }
.brief-step.done:not(:last-child) button::after { background: rgba(13, 148, 136, .5); }
.brief-step.done .brief-step-text small { color: var(--teal-ink); }

.brief-status { border: 1px solid rgba(255, 255, 255, .9); background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 247, 255, .92)); box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 30px -16px rgba(79, 70, 229, .38); }
.brief-meter { background: rgba(79, 70, 229, .12); }
.brief-meter i { background: linear-gradient(90deg, var(--accent), var(--violet) 55%, #14B8A6); }
.brief-generate { box-shadow: 0 10px 22px -8px rgba(79, 70, 229, .55); }
.brief-generate:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Step card: crisp white surface, a coloured top edge, and a head that fades indigo → violet → teal */
.brief-card { position: relative; border: 1px solid rgba(255, 255, 255, .9); background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 22px 48px -22px rgba(55, 48, 163, .38); }
.brief-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--violet) 55%, #14B8A6); }
.brief-card-head { padding-top: 21px; background: linear-gradient(115deg, #E6E9FF 0%, #F0EDFF 52%, #E7F9F6 100%); border-bottom-color: #D5DAF6; }
.brief-nav { background: linear-gradient(180deg, #F7F8FE, #F1F4FC); border-top-color: var(--brief-line); }

/* Fields: stronger edge so they read against white, clear focus */
.brief-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.brief-card select,
.brief-card textarea { border-color: #C5CDE3; background: #FDFDFF; }
.brief-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.brief-card select:hover,
.brief-card textarea:hover { border-color: #A5B0D6; }
.brief-card input::placeholder, .brief-card textarea::placeholder { color: #9AA6C4; }
.brief-group h4::before { background: linear-gradient(180deg, var(--accent), #14B8A6); }

/* Lead search, results and the empty state */
.brief-empty-state { border-color: #B9BEF2; background: linear-gradient(160deg, #F4F5FF 0%, #F5FBFA 100%); }
.brief-results .lead-result { background: #fff; border-color: var(--brief-line); }
.brief-results .lead-result:hover { border-color: var(--accent); box-shadow: 0 8px 18px -12px rgba(79, 70, 229, .5); background: #FAFAFF; }
.brief-avatar { background: linear-gradient(135deg, #E3E6FF, #EFEAFF); color: var(--accent-ink); }
.brief-avatar.large { background: linear-gradient(135deg, #312E81, #4F46E5); color: #fff; box-shadow: 0 8px 16px -8px rgba(79, 70, 229, .6); }

/* Auto-fill strip and review cards */
.autofill { border-color: #CDD1F7; background: linear-gradient(120deg, #EEF0FF 0%, #F6F4FF 50%, #ECFAF7 100%); }
.brief-review section { box-shadow: 0 6px 16px -12px rgba(15, 23, 42, .25); }

.brief-chips label { border-color: #C5CDE3; }
.brief-chips label.picked { background: linear-gradient(135deg, rgba(79, 70, 229, .14), rgba(139, 92, 246, .12)); border-color: var(--accent); }
.brief-collapse > summary::before { background: rgba(79, 70, 229, .12); color: var(--accent-ink); }

@media (max-width: 900px) {
  .brief-steps { padding: 6px; border-radius: 14px; }
  .brief-step button { background: rgba(255, 255, 255, .9); }
}
@media (prefers-reduced-motion: reduce) {
  .brief-generate:not(:disabled):hover { transform: none; }
}

/* Lead to BRD — selected states carry a tinted background, not just a border */
.brief-step.current button { background: linear-gradient(120deg, #E4E7FF 0%, #F0ECFF 60%, #E6F8F5 100%); box-shadow: 0 0 0 1px #AEB4F2, 0 8px 18px -10px rgba(79, 70, 229, .55); }
.brief-step.current .brief-step-text b { color: var(--accent-ink); }
.brief-step.done button { background: rgba(13, 148, 136, .07); }
.brief-step.done button:hover { background: rgba(13, 148, 136, .12); }

.brief-results .lead-result.selected { background: linear-gradient(120deg, #E4E7FF 0%, #EFEBFF 60%, #E6F8F5 100%); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 8px 18px -12px rgba(79, 70, 229, .5); }
.brief-lead { margin-top: 18px; padding: 16px 18px; border: 1px solid #BFC4F5; border-radius: 14px; background: linear-gradient(120deg, #E8EAFF 0%, #F2EEFF 60%, #E8F9F6 100%); }

.brief-chips label.picked { background: linear-gradient(135deg, rgba(79, 70, 229, .20), rgba(139, 92, 246, .16)); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 14px -10px rgba(79, 70, 229, .6); }
.brief-choices.needs-check .brief-chips label.picked { background: #FFF1CC; border-color: #E8B94F; color: var(--warn-ink); box-shadow: none; }

.brief-levels label.chosen { background: linear-gradient(160deg, color-mix(in srgb, var(--lv) 22%, #fff) 0%, color-mix(in srgb, var(--lv) 8%, #fff) 100%); }

.meeting-chips label.on { background: linear-gradient(120deg, #E4E7FF, #EFEBFF); border-color: var(--accent); color: var(--accent-ink); }
.meeting-picks label.on { background: linear-gradient(120deg, #EEF0FF, #F6F3FF); border-color: #AEB4F2; }
.segmented button.active { background: linear-gradient(135deg, var(--accent), var(--violet)); color: #fff; box-shadow: 0 6px 14px -8px rgba(79, 70, 229, .7); }
.brief-field.from-ai input, .brief-field.from-ai select, .brief-field.from-ai textarea { background: #EDEFFF; }
.brief-field.needs-check input, .brief-field.needs-check select, .brief-field.needs-check textarea { background: #FFF4D6; }

/* ───────────────────────────────────────────────────────────────────────────
   Project-wide design refresh
   Every view gets the layered backdrop (tinted by its tone), gradient-edged panels, one button / field language
   and tinted selected states; the sidebar gets the same indigo / violet / teal palette and per-tone navigation.
   ─────────────────────────────────────────────────────────────────────────── */

/* Backdrop for every view, tinted by the view's tone */
.view:not([hidden]) {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1100px 560px at 104% -12%, color-mix(in srgb, var(--tone, var(--accent)) 24%, transparent), transparent 62%),
    radial-gradient(900px 540px at -10% 14%, rgba(13, 148, 136, .13), transparent 60%),
    radial-gradient(900px 620px at 72% 118%, rgba(139, 92, 246, .17), transparent 62%),
    linear-gradient(180deg, #EFF1FF 0%, #EAEFFB 46%, #E9F3F6 100%);
}
.view:not([hidden])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(79, 70, 229, .2) 1px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .3) 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .3) 45%, transparent 85%);
}

/* Top bar */
.topbar { background: linear-gradient(90deg, rgba(255, 255, 255, .86), rgba(245, 246, 255, .84)); border-bottom-color: #D9DFF3; box-shadow: 0 8px 24px -20px rgba(55, 48, 163, .5); }

/* Panels: crisp white, coloured top edge, head that fades indigo → violet → teal */
.panel { position: relative; border-color: #DCE1F4; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 40px -26px rgba(55, 48, 163, .38); }
.panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 1; background: linear-gradient(90deg, var(--tone, var(--accent)), var(--violet) 55%, #14B8A6); }
.panel .panel::before { display: none; }
.panel:hover { border-color: #C4CBEC; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 22px 46px -24px rgba(55, 48, 163, .5); }
.panel-head { background: linear-gradient(115deg, color-mix(in srgb, var(--tone, var(--accent)) 12%, #fff) 0%, #F3F0FF 55%, #E9F9F6 100%); border-bottom-color: #D8DDF5; }
.panel .panel .panel-head { background: var(--surface-header); }
.stat { border-color: #DCE1F4; box-shadow: 0 10px 24px -18px rgba(55, 48, 163, .4); }

/* Buttons */
.btn { border-color: #C9D0E6; }
.btn:not(.btn-primary):not(:disabled):hover { background: #F2F3FF; border-color: #A9B1E6; color: var(--accent-ink); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--violet)); box-shadow: 0 10px 22px -8px rgba(79, 70, 229, .55); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); box-shadow: 0 14px 26px -8px rgba(79, 70, 229, .6); }

/* Fields */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea { border-color: #C5CDE3; background: #FDFDFF; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover, .field select:hover, .field textarea:hover { border-color: #A5B0D6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* Selected states carry a tinted background everywhere */
.chip-on, .is-selected, .selected:not(.lead-result), .meeting-cred-tab.active, .section-review-actions .btn.active,
[aria-pressed="true"]:not(.btn-primary):not(.side-toggle), [aria-selected="true"]:not(.config-nav-item) {
  background: linear-gradient(120deg, #E4E7FF 0%, #EFEBFF 60%, #E6F8F5 100%);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
  background:
    radial-gradient(420px 320px at 0% 0%, rgba(99, 102, 241, .36), transparent 62%),
    radial-gradient(360px 300px at 104% 52%, rgba(20, 184, 166, .15), transparent 65%),
    radial-gradient(420px 360px at 18% 106%, rgba(139, 92, 246, .28), transparent 60%),
    linear-gradient(184deg, #171E52 0%, #101640 48%, #0B1030 100%);
  box-shadow: 12px 0 34px -10px rgba(15, 21, 64, .35);
}
.sidebar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%); mask-image: linear-gradient(180deg, #000, transparent 75%); }
.side-brand { border-bottom: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent); position: relative; }
.side-brand::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(165, 180, 252, .45), rgba(45, 212, 191, .35), transparent); }
.brand-mark { box-shadow: 0 6px 16px -4px rgba(99, 102, 241, .65), 0 0 0 1px rgba(255, 255, 255, .22); }

/* Group labels: coloured dot in the group's tone */
.nav-group-toggle .nav-group-label { color: rgba(255, 255, 255, .5); font-weight: 700; }
.nav-group-toggle .nav-group-label::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; vertical-align: 1px; }

/* Items: every icon tile is tinted in its own tone, the active item is filled with that tone */
.nav-item { --nav-c: var(--tone-lift, #A5B4FC); }
.nav-item[data-tone] .nav-icon-wrap { background: color-mix(in srgb, var(--nav-c) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-c) 24%, transparent); }
.nav-item:hover { background: rgba(255, 255, 255, .075); }
.nav-item:hover .nav-icon-wrap { background: color-mix(in srgb, var(--nav-c) 24%, transparent); }
.nav-item.nav-on {
  background: linear-gradient(96deg, color-mix(in srgb, var(--nav-c) 40%, transparent), color-mix(in srgb, var(--nav-c) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-c) 55%, transparent), 0 10px 22px -12px color-mix(in srgb, var(--nav-c) 80%, transparent);
}
.nav-item.nav-on::before { background: var(--nav-c); box-shadow: 0 0 14px color-mix(in srgb, var(--nav-c) 75%, transparent); }
.nav-item.nav-on .nav-icon-wrap { background: linear-gradient(135deg, var(--nav-c), color-mix(in srgb, var(--nav-c) 55%, #4F46E5)); box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--nav-c) 80%, transparent); }
.nav-item.nav-on .icon { color: #0F1538; }
.nav-item.nav-on .nav-text { color: #fff; }

/* Footer user card */
.side-foot { border-color: rgba(255, 255, 255, .1); background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); }
.avatar-side { background: linear-gradient(135deg, #6366F1, #8B5CF6); box-shadow: 0 0 0 2px rgba(255, 255, 255, .16); }

@media (prefers-reduced-motion: reduce) { .btn-primary:hover:not(:disabled) { filter: none; } }

/* ───────────────────────────────────────────────────────────────────────────
   Navbar in the Zoho Mail style
   A flat, compact dark bar; the current page is a tab whose fill is the page backdrop, so it flows straight
   into the content below. Search is removed. The stacked mobile layout keeps its plain bar.
   ─────────────────────────────────────────────────────────────────────────── */
.topsearch { display: none !important; }

@media (min-width: 761px) {
  .stage { --header-h: 60px; }
  .side-brand { height: var(--header-h); }

  /* the page backdrop is fixed to the viewport so the tab and the content beneath it are the same pixels */
  .view:not([hidden]), .topbar .crumb, .topbar .crumb::after { background-attachment: fixed; }
  .topbar .crumb, .topbar .crumb::after {
    background-image:
      radial-gradient(1100px 560px at 104% -12%, color-mix(in srgb, var(--tone, var(--accent)) 24%, transparent), transparent 62%),
      radial-gradient(900px 540px at -10% 14%, rgba(13, 148, 136, .13), transparent 60%),
      radial-gradient(900px 620px at 72% 118%, rgba(139, 92, 246, .17), transparent 62%),
      linear-gradient(180deg, #EFF1FF 0%, #EAEFFB 46%, #E9F3F6 100%);
  }

  .topbar {
    align-items: flex-end;
    padding: 0 16px 0 0;
    background: linear-gradient(90deg, #1A2160 0%, #171E55 100%);
    border-bottom: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* the tab */
  .topbar .crumb {
    position: relative;
    overflow: visible;
    height: calc(var(--header-h) - 9px);
    margin-bottom: -1px;
    z-index: 2;
    padding: 0 26px 0 20px;
    gap: 8px;
    border: 0;
    border-radius: 0 18px 0 0;
    box-shadow: none;
    color: var(--ink);
    font-size: .8125rem;
    font-weight: 600;
    align-items: center;
  }
  .topbar .crumb::after { content: ""; position: absolute; right: -22px; bottom: 0; width: 22px; height: 22px; -webkit-mask: radial-gradient(circle at 100% 0, transparent 22px, #000 22.5px); mask: radial-gradient(circle at 100% 0, transparent 22px, #000 22.5px); }
  .topbar .crumb-group, .topbar .crumb-sep { display: none; }
  .topbar .crumb-current-icon { width: 20px; height: 20px; border-radius: 6px; background: var(--tone-soft, var(--accent-soft)); color: var(--tone-ink, var(--accent-ink)); }
  .topbar .crumb b { color: var(--ink); font-size: .8125rem; font-weight: 600; letter-spacing: 0; }

  /* actions: quiet icon buttons, like the reference */
  .topbar .topbar-right { margin-left: auto; align-self: center; padding: 0; border: 0; background: transparent; box-shadow: none; gap: 6px; }
  .topbar .topbar-right .icon-btn, .topbar .topbar-right .svc-btn { height: 34px; min-height: 34px; border-radius: 9px; border: 0; background: transparent; color: rgba(255, 255, 255, .85); box-shadow: none; }
  .topbar .topbar-right .icon-btn { width: 34px; padding: 0; }
  .topbar .topbar-right .icon-btn:hover, .topbar .topbar-right .svc-btn:hover { background: rgba(255, 255, 255, .12); color: #fff; }
  .topbar .topbar-right .svc-btn { padding: 0 10px; gap: 7px; font-size: .75rem; background: rgba(255, 255, 255, .08); }
  .topbar .topbar-right .svc-btn .svc-btn-text { color: rgba(255, 255, 255, .92); font-weight: 500; font-size: .75rem; }
  .topbar .topbar-right .svc-btn .chev { color: rgba(255, 255, 255, .6); }
  .topbar .topbar-right .svc-btn[data-kind="degraded"], .topbar .topbar-right .svc-btn[data-kind="idle"] { background: rgba(245, 158, 11, .18); }
  .topbar .topbar-right .svc-btn[data-kind="down"] { background: rgba(244, 63, 94, .2); }
}

/* Navbar tab: straight diagonal right edge (replaces the concave curve) */
@media (min-width: 761px) {
  .topbar .crumb {
    padding: 0 46px 0 20px;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 44px) 0, calc(100% - 36px) 2px, calc(100% - 31px) 8px, 100% 100%, 0 100%);
  }
  .topbar .crumb::after { display: none; }
}

/* Requirements Intelligence on the home dashboard: review queue + Ask ETPL meeting knowledge */
.home-metrics-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panel-flush > .home-metrics { border-width: 0 0 1px; border-radius: 0; }
.ri-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.ri-block { padding: 18px 22px 20px; min-width: 0; }
.ri-block + .ri-block { border-left: 1px solid var(--line); }
.ri-block h4 { margin: 0 0 14px; font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ri-note { margin: 14px 0 0; font-size: .78rem; line-height: 1.55; color: var(--muted); }
.ri-note b { color: var(--ink); }
.ri-waiting { list-style: none; margin: 0 -10px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ri-waiting button { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: var(--radius-sm, 8px); cursor: pointer; }
.ri-waiting button:hover { background: var(--surface-soft); }
.ri-waiting button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ri-waiting-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ri-waiting-copy b { font-size: .86rem; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ri-waiting-copy small { font-size: .72rem; color: var(--muted); }
.ri-waiting .tag { flex: none; }
@media (max-width: 980px) {
  .home-metrics-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-metrics-4 .kpi:nth-child(3) { border-left: 0; }
  .home-metrics-4 .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ri-grid { grid-template-columns: minmax(0, 1fr); }
  .ri-block + .ri-block { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .home-metrics.home-metrics-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ri-block { padding: 16px 18px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Phone navigation: the sidebar becomes a slide-in drawer opened from a menu
   button in the top bar, instead of a scrolling strip under the header.
   ─────────────────────────────────────────────────────────────────────────── */
.nav-menu-btn, .side-close, .nav-scrim { display: none; }

@media (max-width: 760px) {
  .stage, .stage.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--header-h) minmax(0, 1fr);
    grid-template-areas: "head" "main";
    height: 100dvh;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(300px, 86vw);
    max-width: none;
    border-right: 1px solid var(--side-border);
    border-bottom: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform .26s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .26s, box-shadow .26s ease;
  }
  .nav-open .sidebar {
    transform: none;
    visibility: visible;
    box-shadow: 18px 0 48px -12px rgba(10, 14, 40, .45);
    transition: transform .26s cubic-bezier(.22, .8, .3, 1), visibility 0s, box-shadow .26s ease;
  }
  .side-brand { display: grid; height: 60px; }
  .side-toggle { display: none; }
  .side-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
  }
  .side-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }
  .side-nav { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .nav-item { min-height: 44px; }
  .side-foot { margin-bottom: .6rem; }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    border: 0;
    padding: 0;
    background: rgba(12, 16, 40, .48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  .topbar { padding-top: env(safe-area-inset-top); padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .nav-menu-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    margin-right: 2px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--ink);
    cursor: pointer;
  }
  .nav-menu-btn:focus-visible, .side-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .topbar .crumb { min-width: 0; flex: 1 1 auto; }
  .topbar .crumb b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-right { flex: none; }
  .topbar .svc-btn-text { display: none; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .sidebar, .nav-open .sidebar, .nav-scrim { transition: none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Dashboard: greeting, pipeline strip, what needs attention, quick actions
   ─────────────────────────────────────────────────────────────────────────── */
.home-dash { gap: 18px; }
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-head h2 { margin: 0; font-size: 1.6rem; letter-spacing: -.025em; }
.dash-head .lede { margin: 4px 0 0; }

.dash-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dash-stage {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dash-stage:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px -14px rgba(15, 23, 42, .5); }
.dash-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-stage b { font-size: 1.55rem; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.dash-stage span { font-size: .78rem; color: var(--muted); font-weight: 550; }
.dash-stage::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--faint); }
.dash-stage[data-tone="warn"]::before { background: var(--warn); }
.dash-stage[data-tone="ok"]::before { background: var(--ok); }
.dash-stage[data-tone="cool"]::before { background: var(--accent); }
.dash-stage-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: var(--faint); z-index: 1; background: var(--surface-soft); border-radius: 50%; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 18px; align-items: start; }

.dash-todo { list-style: none; margin: 0; padding: 4px 0; }
.dash-todo li { display: flex; align-items: center; gap: 12px; padding: 11px 20px; }
.dash-todo li + li { border-top: 1px solid var(--line); }
.dash-todo-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-ink); }
.dash-todo-icon[data-tone="bad"] { background: var(--bad-soft); color: var(--bad-ink); }
.dash-todo-icon[data-tone="warn"] { background: var(--warn-soft); color: var(--warn-ink); }
.dash-todo-icon[data-tone="ok"] { background: var(--ok-soft); color: var(--ok-ink); }
.dash-todo-icon[data-tone="violet"] { background: var(--violet-soft); color: #6D28D9; }
.dash-todo-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dash-todo-copy b { font-size: .88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-todo-copy small { font-size: .76rem; color: var(--muted); }
.dash-todo .btn { flex: none; }
.dash-todo-more { justify-content: center; font-size: .78rem; color: var(--muted); }

.dash-quick { list-style: none; margin: 0; padding: 6px; }
.dash-quick button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink); font: inherit; font-size: .88rem; font-weight: 550; text-align: left; cursor: pointer;
}
.dash-quick button:hover:not(:disabled) { background: var(--surface-soft); }
.dash-quick button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dash-quick button:disabled { opacity: .5; cursor: not-allowed; }
.dash-quick-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); }
.dash-quick-label { flex: 1; min-width: 0; }
.dash-quick-arrow { color: var(--faint); }

@media (max-width: 980px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dash-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-stage-arrow { display: none; }
  .dash-head h2 { font-size: 1.35rem; }
  .dash-todo li { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dash-stage { transition: none; }
}