:root{
  --bg:#07111f;
  --bg2:#0b1730;
  --panel:rgba(10,18,34,.78);
  --panel2:rgba(14,24,46,.94);
  --panel3:rgba(18,32,60,.98);
  --text:#e8eefc;
  --muted:#90a0c0;
  --muted2:#6f82a8;
  --border:rgba(151,173,255,.14);
  --border-strong:rgba(151,173,255,.24);
  --shadow:0 18px 60px rgba(0,0,0,.34);
  --shadow-soft:0 10px 28px rgba(0,0,0,.20);
  --accent:#7c5cff;
  --accent2:#4f8cff;
  --accent3:#19c3ff;
  --success:#19c37d;
  --danger:#ff5d73;
  --warning:#f5b942;
  --radius:18px;
  --radius2:14px;
  --radius3:24px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --gridline:rgba(255,255,255,.02);
}

:root[data-theme="light"]{
  --bg:#eef4ff;
  --bg2:#dfe8ff;
  --panel:rgba(255,255,255,.78);
  --panel2:rgba(255,255,255,.92);
  --panel3:rgba(255,255,255,.98);
  --text:#0f172a;
  --muted:#64748b;
  --muted2:#7c8aa4;
  --border:rgba(99,102,241,.12);
  --border-strong:rgba(99,102,241,.22);
  --shadow:0 18px 60px rgba(41,55,102,.12);
  --shadow-soft:0 10px 28px rgba(41,55,102,.08);
  --gridline:rgba(61,92,185,.025);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(124,92,255,.18), transparent 28%),
    radial-gradient(circle at top right, rgba(25,195,255,.12), transparent 26%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment:fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.35), transparent 85%);
}

a{color:inherit;text-decoration:none}
img{max-width:100%}

.app{
  display:flex;
  min-height:100vh;
  position:relative;
}

.sidebar{
  width:290px;
  background:
    linear-gradient(180deg, rgba(13,22,42,.95), rgba(8,14,28,.88));
  border-right:1px solid var(--border);
  padding:18px 16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;
  backdrop-filter:blur(20px) saturate(1.1);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03);
  z-index:10;
}

:root[data-theme="light"] .sidebar{
  background:
    linear-gradient(180deg, rgba(244,248,255,.92), rgba(232,239,255,.86));
}

.sidebar.collapsed{width:84px}
.sidebar.collapsed .brand__text,
.sidebar.collapsed .nav__title,
.sidebar.collapsed .nav__item span,
.sidebar.collapsed .sidebarFooter{display:none}
.sidebar.collapsed .nav__item{
  justify-content:center;
  padding:12px 8px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  padding:8px 6px 14px;
  position:relative;
}

.brand::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  bottom:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent);
}

.brand__logo{
  width:46px;
  height:46px;
  border-radius:16px;
  background:
    linear-gradient(135deg, var(--accent), var(--accent2) 52%, var(--accent3));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:white;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 16px 30px rgba(79,140,255,.24);
  overflow:hidden;
  flex-shrink:0;
}

.brand__logo img{width:100%;height:100%;object-fit:cover}
.brand__text{min-width:0}
.brand__name{
  font-weight:900;
  letter-spacing:.2px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand__sub{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.sidebar__toggle{
  position:absolute;
  right:0;
  top:8px;
}

.nav{display:flex;flex-direction:column;gap:6px}
.nav__section{margin-top:12px}
.nav__title{
  font-size:11px;
  color:var(--muted2);
  text-transform:uppercase;
  letter-spacing:.16em;
  margin:10px 8px 8px;
  font-weight:800;
}

.nav__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:14px;
  color:var(--text);
  border:1px solid transparent;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
  position:relative;
  overflow:hidden;
}

.nav__item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(124,92,255,.14), rgba(79,140,255,.08));
  opacity:0;
  transition:opacity .16s ease;
}

.nav__item > *{position:relative;z-index:1}
.nav__item:hover{
  transform:translateX(2px);
  background:rgba(124,92,255,.08);
  border-color:rgba(124,92,255,.18);
  box-shadow:var(--shadow-soft);
}
.nav__item:hover::before{opacity:1}

.nav__item.active{
  background:linear-gradient(90deg, rgba(124,92,255,.20), rgba(79,140,255,.12));
  border-color:rgba(124,92,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 12px 28px rgba(37,48,84,.22);
}
.nav__item.active::after{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--accent3), var(--accent));
}

.sidebarFooter{
  margin-top:22px;
  padding:16px 8px 8px;
  border-top:1px solid var(--border);
}

.main{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  position:relative;
}

.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 24px;
  border-bottom:1px solid var(--border);
  background:rgba(8,14,28,.42);
  backdrop-filter:blur(18px) saturate(1.15);
  position:sticky;
  top:0;
  z-index:9;
}

:root[data-theme="light"] .topbar{
  background:rgba(255,255,255,.62);
}

.topbar__title{
  font-size:20px;
  font-weight:900;
  letter-spacing:.01em;
}
.topbar__hint{
  font-size:13px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.45;
}
.topbar__right{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.content{
  padding:24px;
  max-width:1280px;
  width:100%;
}

.card{
  background:
    linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px) saturate(1.05);
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 24%);
}

.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width: 1100px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 980px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .sidebar{
    position:fixed;
    left:0;
    top:0;
    transform:translateX(-102%);
    transition:transform .22s ease;
    z-index:30;
  }
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .sidebar__toggle{display:inline-flex}
  .content{padding:18px}
}

h1,h2,h3,h4{margin:0}
h2{
  margin:0 0 12px 0;
  font-size:17px;
  font-weight:900;
  letter-spacing:.01em;
}
h3{
  font-size:14px;
  font-weight:800;
  color:var(--text);
}

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:12px 0 7px;
  font-weight:700;
  letter-spacing:.02em;
}

input,textarea,select{
  width:100%;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  border-radius:14px;
  padding:11px 13px;
  color:var(--text);
  outline:none;
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select{
  background:rgba(255,255,255,.9);
}

input::placeholder,textarea::placeholder{color:var(--muted2)}
input:focus,textarea:focus,select:focus{
  border-color:rgba(124,92,255,.48);
  box-shadow:0 0 0 4px rgba(124,92,255,.12);
}
textarea{min-height:120px;resize:vertical}

.row{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.row > *{flex:1}

.actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
  flex-wrap:wrap;
}

.btn,
.iconBtn{
  appearance:none;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text);
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.btn{
  padding:10px 14px;
  min-height:42px;
}
.iconBtn{
  padding:8px 11px;
  min-height:40px;
}

.btn:hover,
.iconBtn:hover{
  transform:translateY(-1px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-soft);
}

.btn.primary{
  background:linear-gradient(135deg, var(--accent), var(--accent2) 60%, var(--accent3));
  border-color:transparent;
  color:white;
  box-shadow:0 14px 30px rgba(79,140,255,.24);
}
.btn.primary:hover{
  box-shadow:0 18px 34px rgba(79,140,255,.34);
}

.btn:disabled,
.iconBtn:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.pill{
  font-size:12px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  backdrop-filter:blur(8px);
  font-weight:700;
}
.pill.ok{
  color:#7df7ba;
  border-color:rgba(25,195,125,.24);
  background:rgba(25,195,125,.10);
}
.pill.bad{
  color:#ff9aa6;
  border-color:rgba(255,93,115,.24);
  background:rgba(255,93,115,.10);
}

.kpi{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.kpi__label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.kpi__value{font-size:24px;font-weight:900;letter-spacing:-.02em}
.kpi__sub{font-size:12px;color:var(--muted)}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.table th,.table td{
  padding:12px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  font-size:13px;
  vertical-align:top;
}
.table th{
  font-size:11px;
  color:var(--muted2);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:900;
  position:sticky;
  top:0;
  background:rgba(9,18,33,.96);
  z-index:1;
}
:root[data-theme="light"] .table th{
  background:rgba(255,255,255,.96);
}
.table tr:hover td{
  background:rgba(124,92,255,.04);
}

.mono{font-family:var(--mono)}

.toggle{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  color:var(--muted);
}
.toggle input{
  width:auto;
  accent-color:var(--accent);
}

.notice{
  font-size:13px;
  color:var(--muted);
  margin:8px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(124,92,255,.08), rgba(79,140,255,.04));
  line-height:1.55;
}

.chatBox{display:flex;flex-direction:column;gap:12px}
.chatLog{
  border:1px solid var(--border);
  border-radius:20px;
  background:rgba(255,255,255,.03);
  padding:14px;
  min-height:240px;
  max-height:52vh;
  overflow:auto;
}
.msg{
  padding:10px 12px;
  border-radius:14px;
  margin:8px 0;
  white-space:pre-wrap;
  line-height:1.5;
}
.msg.user{
  background:rgba(124,92,255,.14);
  border:1px solid rgba(124,92,255,.22);
}
.msg.bot{
  background:rgba(25,195,255,.10);
  border:1px solid rgba(25,195,255,.18);
}
.msg .meta{
  font-size:11px;
  color:var(--muted);
  margin-bottom:6px;
}

hr{
  border:0;
  border-top:1px solid var(--border);
  margin:16px 0;
}

#toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
}

#toast .pill{
  display:block;
  margin-top:10px;
  padding:10px 12px;
  color:var(--text);
  background:rgba(15,23,42,.84);
  border-color:rgba(148,163,184,.24);
  box-shadow:var(--shadow-soft);
}

:root[data-theme="light"] #toast .pill{
  background:rgba(255,255,255,.95);
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.22);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.35)}

.nav__sectionToggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:transparent;
  border:none;
  padding:0;
  margin:14px 0 10px 0;
  cursor:pointer;
  text-align:left;
}

.nav__sectionToggle .nav__title{
  margin:0 6px;
}

.nav__chevron{
  font-size:12px;
  color:var(--muted);
  transition:transform .18s ease;
  margin-right:6px;
}

.nav__section[data-expanded="false"] .nav__chevron{
  transform:rotate(-90deg);
}

.nav__sectionBody{
  display:block;
}


.noura-chat-page {
  max-width: 1380px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

.noura-chat-hero {
  margin-bottom: 18px;
  padding: 28px 30px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(110, 86, 207, 0.22), transparent 35%),
    radial-gradient(circle at right, rgba(34, 197, 94, 0.16), transparent 28%),
    linear-gradient(180deg, #111827 0%, #0b1220 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}

.noura-chat-hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #b8c0d4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.noura-chat-hero-title {
  margin: 14px 0 8px;
  color: #f8fafc;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 800;
}

.noura-chat-hero-subtitle {
  margin: 0;
  max-width: 760px;
  color: #97a3b6;
  font-size: 15px;
  line-height: 1.7;
}

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

.noura-main-panel,
.noura-side-card {
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.noura-main-panel {
  min-height: 760px;
  border-radius: 24px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.noura-main-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(99,102,241,0.12), transparent 24%),
    radial-gradient(circle at bottom left, rgba(16,185,129,0.08), transparent 20%);
  pointer-events: none;
}

.noura-chat-header,
.noura-chat-area,
.noura-composer,
.noura-empty-state,
.noura-prompt-row {
  position: relative;
  z-index: 1;
}

.noura-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

.noura-chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.noura-agent-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(135deg, #22c55e 0%, #6366f1 100%);
  box-shadow: 0 10px 25px rgba(34,197,94,0.2);
}

.noura-agent-name {
  color: #f8fafc;
  font-size: 16px;
  font-weight: 700;
}

.noura-agent-status {
  margin-top: 3px;
  color: #94a3b8;
  font-size: 13px;
}

.noura-live-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.25);
  color: #86efac;
  font-size: 12px;
  font-weight: 700;
}

.noura-empty-state {
  margin: 8px 0 16px;
  padding: 34px 24px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  border: 1px dashed rgba(255,255,255,0.08);
}

.noura-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,0.14);
  color: #c7d2fe;
  font-size: 24px;
}

.noura-empty-title {
  margin: 0 0 8px;
  color: #f8fafc;
  font-size: 22px;
  font-weight: 800;
}

.noura-empty-text {
  max-width: 640px;
  margin: 0 auto;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.7;
}

.noura-prompt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.noura-prompt-chip {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #dbe4f0;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition: .2s ease;
}

.noura-prompt-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(99,102,241,0.35);
  background: rgba(99,102,241,0.08);
}

.noura-chat-area {
  flex: 1 1 auto;
  min-height: 340px;
  max-height: 100%;
  overflow-y: auto;
  padding: 12px 4px 12px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.noura-msg-row {
  display: flex;
  width: 100%;
}

.noura-msg-row.is-user {
  justify-content: flex-end;
}

.noura-msg-row.is-assistant {
  justify-content: flex-start;
}

.noura-msg-bubble {
  max-width: min(78%, 760px);
  padding: 14px 16px 10px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.16);
  animation: nouraFadeUp .22s ease;
}

.noura-msg-bubble.is-assistant {
  background: linear-gradient(180deg, #172033 0%, #131c2e 100%);
  color: #e5edf7;
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom-left-radius: 8px;
}

.noura-msg-bubble.is-user {
  background: linear-gradient(135deg, #22c55e 0%, #4f46e5 100%);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom-right-radius: 8px;
}

.noura-msg-bubble.is-pending {
  opacity: 0.92;
}

.noura-msg-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
  font-size: 14px;
}

.noura-msg-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  opacity: 0.82;
}

.noura-msg-status {
  letter-spacing: -1px;
}

.noura-composer {
  margin-top: 14px;
}

.noura-composer-box {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(15,23,42,0.88);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.noura-composer-input {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: #f8fafc;
  min-height: 24px;
  max-height: 140px;
  line-height: 1.6;
  font: inherit;
}

.noura-composer-input::placeholder {
  color: #7f8ea3;
}

.noura-send-btn {
  margin-top: 12px;
  margin-left: auto;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  color: #ffffff;
  font-size: 18px;
  background: linear-gradient(135deg, #22c55e 0%, #6366f1 100%);
  box-shadow: 0 14px 30px rgba(79,70,229,0.28);
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}

.noura-send-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 35px rgba(79,70,229,0.34);
}

.noura-send-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.noura-side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.noura-side-card {
  border-radius: 22px;
  padding: 18px;
}

.noura-side-card-title {
  margin-bottom: 14px;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 800;
}

.noura-field-group + .noura-field-group {
  margin-top: 14px;
}

.noura-label {
  display: block;
  margin-bottom: 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.noura-input,
.noura-select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0b1220;
  color: #e2e8f0;
  padding: 12px 14px;
  outline: none;
}

.noura-input:focus,
.noura-select:focus,
.noura-composer-box:focus-within {
  border-color: rgba(99,102,241,0.45);
  box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}

.noura-insight-list {
  display: grid;
  gap: 10px;
}

.noura-insight-item {
  padding: 12px 14px;
  border-radius: 14px;
  color: #cbd5e1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  line-height: 1.5;
}

.noura-brand-card {
  background:
    radial-gradient(circle at top right, rgba(34,197,94,0.18), transparent 32%),
    radial-gradient(circle at bottom left, rgba(99,102,241,0.18), transparent 30%),
    linear-gradient(180deg, #111827 0%, #0f172a 100%);
}

.noura-brand-block {
  padding: 8px 2px 2px;
}

.noura-brand-name {
  color: #f8fafc;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.noura-brand-tag {
  margin-top: 8px;
  color: #a5b4fc;
  font-size: 13px;
  font-weight: 600;
}

@keyframes nouraFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .noura-workspace {
    grid-template-columns: 1fr;
  }

  .noura-side-panel {
    order: -1;
  }
}

@media (max-width: 768px) {
  .noura-chat-hero {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .noura-chat-hero-title {
    font-size: 24px;
  }

  .noura-main-panel,
  .noura-side-card {
    border-radius: 18px;
  }

  .noura-main-panel {
    padding: 14px;
    min-height: 680px;
  }

  .noura-msg-bubble {
    max-width: 92%;
  }

  .noura-prompt-row {
    gap: 8px;
  }

  .noura-prompt-chip {
    width: 100%;
    text-align: left;
    border-radius: 14px;
  }
}

/* ===== Noura Design System Extensions ===== */

.noura-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.noura-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.noura-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.noura-section-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.noura-section-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* Better cards for forms */
.noura-card {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

/* Field grouping */
.noura-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.noura-field-inline {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Better spacing inside forms */
.noura-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Soft highlight blocks */
.noura-soft-block {
  padding: 14px;
  border-radius: 14px;
  background: rgba(124,92,255,.06);
  border: 1px solid rgba(124,92,255,.18);
}

/* Action bar (top-right buttons) */
.noura-actions-bar {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Divider upgrade */
.noura-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* Better textarea for prompts */
.noura-textarea-lg {
  min-height: 180px;
  font-family: var(--mono);
  line-height: 1.6;
}

/* Status badge */
.noura-badge {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(34,197,94,.12);
  color: #86efac;
  border: 1px solid rgba(34,197,94,.25);
}

/* ===== Sidebar Upgrade ===== */

.noura-sidebar {
  background: linear-gradient(180deg, #0b1220, #0f172a);
  border-right: 1px solid rgba(255,255,255,0.06);
}

.noura-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.noura-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background: linear-gradient(135deg, #22c55e, #6366f1);
  color: white;
}

.noura-brand-name {
  font-weight: 800;
  color: #f8fafc;
}

.noura-brand-sub {
  font-size: 12px;
  color: #94a3b8;
}

/* ===== Nav items ===== */

.nav__item {
  border-radius: 12px;
  transition: 0.18s ease;
}

.nav__item:hover {
  background: rgba(255,255,255,0.06);
}

.nav__item.active {
  background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(99,102,241,.18));
  border: 1px solid rgba(99,102,241,.35);
}

/* ===== Topbar ===== */

.noura-topbar {
  background: rgba(11,18,32,0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.noura-topbar-left {
  display: flex;
  flex-direction: column;
}

.noura-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.noura-status {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(99,102,241,.12);
  color: #c7d2fe;
  font-size: 12px;
}


/* ===== Elite interactions ===== */

.noura-hover-lift,
.card,
.noura-card,
.nav__item,
.btn,
.iconBtn,
.pill {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    opacity .18s ease;
}

.noura-hover-lift:hover,
.noura-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.20);
}

.noura-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
}

.noura-image-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  display: block;
}

.noura-image-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  border-style: dashed;
}

.noura-image-preview {
  max-width: 220px;
  max-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  display: block;
}

.noura-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
  backdrop-filter: blur(8px);
}

.noura-modal-box {
  width: min(1100px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 24px;
}

.noura-explain-block {
  border-radius: 18px;
}

.noura-skeleton-stack {
  display: grid;
  gap: 12px;
}

.noura-skeleton-row {
  display: grid;
  grid-template-columns: 72px 140px 1fr 200px;
  gap: 12px;
  align-items: center;
}

.noura-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}

.noura-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: nouraShimmer 1.2s infinite;
}

.noura-skeleton-thumb {
  width: 72px;
  height: 72px;
}

.noura-skeleton-line {
  height: 16px;
}

.noura-skeleton-line.short {
  width: 90px;
}

.noura-skeleton-line.medium {
  width: 160px;
}

@keyframes nouraShimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ===== Command palette ===== */

.noura-command-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.56);
  backdrop-filter: blur(8px);
  z-index: 10000;
}

.noura-command {
  position: fixed;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 24px));
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
  z-index: 10001;
  overflow: hidden;
}

.noura-command-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 18px 20px;
  background: transparent;
  color: #f8fafc;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.noura-command-list {
  max-height: 420px;
  overflow: auto;
  padding: 8px;
}

.noura-command-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  cursor: pointer;
}

.noura-command-item:hover,
.noura-command-item.is-active {
  background: rgba(99,102,241,.10);
  border-color: rgba(99,102,241,.24);
}

.noura-command-kbd {
  color: var(--muted);
  font-size: 12px;
}

/* ===== Explainability / answer inspector ===== */

.noura-explain-panel {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 14px;
}

.noura-explain-title {
  font-size: 13px;
  font-weight: 800;
  color: #e2e8f0;
  margin-bottom: 10px;
}

.noura-explain-list {
  display: grid;
  gap: 8px;
}

.noura-explain-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .noura-skeleton-row {
    grid-template-columns: 72px 1fr;
  }
}


.noura-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
  backdrop-filter: blur(8px);
}

.noura-modal-box {
  width: min(1100px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 24px;
}

.noura-hover-lift {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.noura-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.20);
}

/* ===== FULL WIDTH FIX ===== */
.noura-page {
  max-width: 100%;
  width: 100%;
}

/* ===== LIST LAYOUT ===== */
.noura-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ROW */
.noura-list-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 2fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
}

/* LEFT */
.noura-list-main {
  display: flex;
  gap: 12px;
  align-items: center;
}

.noura-title {
  font-weight: 700;
  font-size: 14px;
}

/* META */
.noura-list-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

/* TAGS */
.noura-list-tags {
  font-size: 12px;
  opacity: 0.8;
  line-height: 1.4;
  word-break: break-word;
}

/* ACTIONS */
.noura-list-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .noura-list-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .noura-list-actions {
    justify-content: flex-start;
  }
}

.noura-images-page {
  max-width: 100%;
  width: 100%;
}

.noura-images-catalog-card {
  overflow: visible;
}

.noura-images-catalog-wrap {
  width: 100%;
}

.noura-images-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.noura-images-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.5fr) minmax(240px, 1fr) minmax(260px, 1.2fr) minmax(260px, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}

.noura-images-col {
  min-width: 0;
}

.noura-images-col--main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.noura-images-maintext {
  min-width: 0;
}

.noura-images-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
}

.noura-images-filename {
  margin-top: 6px;
  font-size: 12px;
}

.noura-images-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}

.noura-images-strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.noura-images-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.noura-images-tags {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  white-space: normal;
  word-break: break-word;
}

.noura-images-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.noura-images-mobile-meta {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.noura-image-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  display: block;
  flex: 0 0 auto;
}

.noura-image-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  border-style: dashed;
}

.noura-image-preview {
  max-width: 220px;
  max-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  display: block;
}

@media (max-width: 1500px) {
  .noura-images-row {
    grid-template-columns: minmax(280px, 1.6fr) minmax(220px, 1fr) minmax(240px, 1fr);
  }

  .noura-images-col--actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .noura-images-row {
    grid-template-columns: 1fr;
  }

  .noura-images-mobile-meta {
    display: flex;
  }

  .noura-images-col--meta,
  .noura-images-col--product,
  .noura-images-col--actions {
    margin-top: 6px;
  }
}

.noura-aliases-page {
  max-width: 100%;
  width: 100%;
}

.noura-aliases-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.noura-aliases-left,
.noura-aliases-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.noura-aliases-list-card {
  min-height: 720px;
}

.noura-aliases-product-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.noura-alias-product-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  color: var(--text);
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.noura-alias-product-item:hover {
  transform: translateY(-2px);
  border-color: rgba(124,92,255,.24);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}

.noura-alias-product-item.is-active {
  border-color: rgba(124,92,255,.36);
  background: linear-gradient(90deg, rgba(124,92,255,.14), rgba(79,140,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px rgba(37,48,84,.20);
}

.noura-alias-product-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.noura-alias-product-title {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
}

.noura-aliases-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.noura-aliases-tab-content {
  min-width: 0;
}

.noura-aliases-section {
  min-width: 0;
}

.noura-aliases-card-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.noura-alias-card {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}

.noura-alias-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.noura-alias-card-title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.noura-aliases-debug-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 1200px) {
  .noura-aliases-layout {
    grid-template-columns: 1fr;
  }

  .noura-aliases-list-card {
    min-height: auto;
  }
}

.noura-knowledge-page {
  max-width: 100%;
  width: 100%;
}

.noura-knowledge-card {
  overflow: visible;
}

.noura-knowledge-sources-wrap {
  width: 100%;
}

.noura-knowledge-source-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.noura-knowledge-source-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(420px, 1.8fr) minmax(260px, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}

.noura-knowledge-source-main {
  min-width: 0;
}

.noura-knowledge-source-title {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--text);
}

.noura-knowledge-source-sub {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.6;
  word-break: break-word;
}

.noura-knowledge-source-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.noura-knowledge-source-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.noura-knowledge-source-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 1450px) {
  .noura-knowledge-source-row {
    grid-template-columns: minmax(260px, 1.4fr) minmax(360px, 1.8fr);
  }

  .noura-knowledge-source-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 980px) {
  .noura-knowledge-source-row {
    grid-template-columns: 1fr;
  }

  .noura-knowledge-source-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.noura-instructions-page {
  max-width: 100%;
  width: 100%;
}

.noura-instructions-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 420px;
  gap: 18px;
  align-items: start;
}

.noura-instructions-left,
.noura-instructions-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.noura-instructions-main-card {
  min-height: 620px;
}

.noura-instructions-editor {
  min-height: 540px;
  resize: vertical;
  font-family: var(--mono);
  line-height: 1.75;
  font-size: 13px;
}

@media (max-width: 1200px) {
  .noura-instructions-layout {
    grid-template-columns: 1fr;
  }
}

.noura-role-perms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.noura-role-perm-card {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
}

.noura-role-perm-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.noura-role-perm-actions {
  display: flex;
  gap: 12px;
  font-size: 13px;
}

/* =========================================================
   NOURA AI AGENT — FINAL POLISH PHASE
   Stripe / Linear-inspired global system layer
   ========================================================= */

/* ===== Root shell ===== */
:root {
  --noura-radius-xs: 10px;
  --noura-radius-sm: 14px;
  --noura-radius-md: 18px;
  --noura-radius-lg: 24px;

  --noura-shadow-1: 0 8px 24px rgba(0, 0, 0, 0.12);
  --noura-shadow-2: 0 16px 40px rgba(0, 0, 0, 0.18);
  --noura-shadow-3: 0 28px 60px rgba(0, 0, 0, 0.24);

  --noura-border-soft: rgba(255,255,255,0.06);
  --noura-border-strong: rgba(255,255,255,0.10);

  --noura-glass: rgba(255,255,255,0.03);
  --noura-glass-2: rgba(255,255,255,0.05);

  --noura-gradient-accent: linear-gradient(135deg, #22c55e 0%, #6366f1 100%);
  --noura-gradient-surface: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  --noura-gradient-surface-2: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
}

html,
body {
  min-height: 100%;
}

body {
  background:
    radial-gradient(circle at top left, rgba(99,102,241,0.10), transparent 24%),
    radial-gradient(circle at bottom right, rgba(34,197,94,0.08), transparent 20%),
    var(--bg);
}

.app {
  min-height: 100vh;
}

/* ===== Main layout ===== */
.main {
  min-width: 0;
  background:
    radial-gradient(circle at top right, rgba(99,102,241,0.05), transparent 20%),
    transparent;
}

.content {
  width: 100%;
  max-width: none;
  padding: 20px 22px 28px;
  transition: opacity .18s ease, transform .18s ease;
}

/* ===== Sidebar ===== */
.noura-sidebar,
.sidebar {
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  border-right: 1px solid var(--noura-border-soft);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.02);
}

.brand,
.noura-brand {
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.brand__logo,
.noura-logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--noura-gradient-accent);
  color: #fff;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 30px rgba(79,70,229,0.24);
  overflow: hidden;
}

.brand__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand__name,
.noura-brand-name {
  color: #f8fafc;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand__sub,
.noura-brand-sub {
  color: #94a3b8;
  font-size: 12px;
  margin-top: 2px;
}

.nav {
  padding: 14px 10px;
}

.nav__section + .nav__section {
  margin-top: 10px;
}

.nav__sectionToggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  border: none;
  background: transparent;
  color: #b7c2d3;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  transition: background .18s ease, color .18s ease;
}

.nav__sectionToggle:hover {
  background: rgba(255,255,255,0.04);
  color: #e5edf7;
}

.nav__sectionBody {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #d2dbea;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.nav__item:hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.04);
  transform: translateY(-1px);
}

.nav__item.active,
.nav__item[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, rgba(34,197,94,0.16), rgba(99,102,241,0.16));
  border-color: rgba(99,102,241,0.28);
  box-shadow: 0 12px 28px rgba(25, 34, 67, 0.24);
}

.sidebarFooter {
  margin-top: auto;
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(255,255,255,0.04);
}

/* ===== Topbar ===== */
.topbar,
.noura-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: rgba(11,18,32,0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.topbar__title {
  color: #f8fafc;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.topbar__hint {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
  max-width: 720px;
}

.topbar__right,
.noura-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== Shared page scaffolding ===== */
.noura-page {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.noura-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.noura-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.noura-section-title {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.noura-section-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 4px;
}

/* ===== Cards ===== */
.card,
.noura-card,
.noura-side-card,
.kpi {
  border: 1px solid var(--noura-border-soft);
  background: var(--noura-gradient-surface);
  box-shadow: var(--noura-shadow-1);
  border-radius: var(--noura-radius-lg);
}

.card,
.noura-card,
.noura-side-card {
  padding: 18px;
}

.noura-hover-lift,
.card,
.noura-card,
.kpi,
.btn,
.iconBtn,
.nav__item,
.pill {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    opacity .18s ease,
    color .18s ease;
}

.noura-hover-lift:hover,
.card:hover,
.noura-card:hover,
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--noura-shadow-2);
}

.kpi {
  padding: 18px;
}

.kpi__label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.kpi__value {
  margin-top: 8px;
  color: var(--text);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.kpi__sub {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

/* ===== Inputs ===== */
input,
textarea,
select,
.noura-input,
.noura-select {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--noura-border-soft);
  background: rgba(15,23,42,0.82);
  color: var(--text);
  padding: 12px 14px;
  box-sizing: border-box;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: #7f8ea3;
}

input:focus,
textarea:focus,
select:focus,
.noura-input:focus,
.noura-select:focus,
.noura-composer-box:focus-within {
  border-color: rgba(99,102,241,0.42);
  box-shadow:
    0 0 0 4px rgba(99,102,241,0.12),
    inset 0 1px 0 rgba(255,255,255,0.02);
}

/* ===== Buttons ===== */
.btn,
.iconBtn {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #e8eef8;
  border-radius: 14px;
  min-height: 40px;
  padding: 0 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.btn:hover,
.iconBtn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
}

.btn.primary {
  background: var(--noura-gradient-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 16px 32px rgba(79,70,229,0.26);
}

.btn.primary:hover {
  box-shadow: 0 20px 40px rgba(79,70,229,0.32);
}

.btn:disabled,
.iconBtn:disabled {
  opacity: .64;
  cursor: not-allowed;
  transform: none;
}

/* ===== Pills ===== */
.pill,
.badge,
.noura-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #dce5f2;
}

.pill.ok,
.badge.ok {
  background: rgba(34,197,94,0.12);
  color: #86efac;
  border-color: rgba(34,197,94,0.25);
}

.pill.bad,
.badge.bad {
  background: rgba(239,68,68,0.12);
  color: #fca5a5;
  border-color: rgba(239,68,68,0.25);
}

/* ===== Lists / tables ===== */
.table,
table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--noura-border-soft);
  background: rgba(255,255,255,0.02);
}

.table th,
.table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(255,255,255,0.03);
}

.table tr:last-child td {
  border-bottom: none;
}

.noura-table-wrap {
  overflow-x: auto;
  border-radius: 18px;
}

/* ===== Generic helpers ===== */
.noura-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.noura-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.noura-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.noura-actions-bar,
.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.noura-soft-block,
.notice {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  line-height: 1.6;
}

.notice {
  color: var(--muted);
}

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

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}

.grid {
  display: grid;
  gap: 14px;
}

.grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ===== Empty states ===== */
.noura-empty-state {
  padding: 34px 22px;
  border-radius: 22px;
  text-align: center;
  background: var(--noura-gradient-surface-2);
  border: 1px dashed rgba(255,255,255,0.08);
}

.noura-empty-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,0.14);
  color: #c7d2fe;
  font-size: 24px;
}

.noura-empty-title {
  margin: 0 0 8px;
  color: #f8fafc;
  font-size: 22px;
  font-weight: 800;
}

.noura-empty-text {
  max-width: 640px;
  margin: 0 auto;
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.7;
}

/* ===== Modals ===== */
.noura-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
  backdrop-filter: blur(10px);
}

.noura-modal-box {
  width: min(1100px, 100%);
  max-height: 92vh;
  overflow: auto;
  border-radius: 24px;
  box-shadow: var(--noura-shadow-3);
}

/* ===== Skeletons ===== */
.noura-skeleton-stack {
  display: grid;
  gap: 12px;
}

.noura-skeleton-row {
  display: grid;
  grid-template-columns: 72px 140px 1fr 200px;
  gap: 12px;
  align-items: center;
}

.noura-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
}

.noura-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  animation: nouraShimmer 1.2s infinite;
}

.noura-skeleton-thumb {
  width: 72px;
  height: 72px;
}

.noura-skeleton-line {
  height: 16px;
}

.noura-skeleton-line.short {
  width: 90px;
}

.noura-skeleton-line.medium {
  width: 160px;
}

@keyframes nouraShimmer {
  100% {
    transform: translateX(100%);
  }
}

/* ===== Command palette ===== */
.noura-command-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.56);
  backdrop-filter: blur(8px);
  z-index: 10000;
}

.noura-command {
  position: fixed;
  top: 10vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, calc(100vw - 24px));
  background: linear-gradient(180deg, #111827 0%, #0f172a 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
  z-index: 10001;
  overflow: hidden;
}

.noura-command-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 18px 20px;
  background: transparent;
  color: #f8fafc;
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.noura-command-list {
  max-height: 420px;
  overflow: auto;
  padding: 8px;
}

.noura-command-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  cursor: pointer;
}

.noura-command-item:hover,
.noura-command-item.is-active {
  background: rgba(99,102,241,.10);
  border-color: rgba(99,102,241,.24);
}

.noura-command-kbd {
  color: var(--muted);
  font-size: 12px;
}

/* ===== Explainability / debug ===== */
.noura-explain-panel {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 14px;
}

.noura-explain-title {
  font-size: 13px;
  font-weight: 800;
  color: #e2e8f0;
  margin-bottom: 10px;
}

.noura-explain-list {
  display: grid;
  gap: 8px;
}

.noura-explain-item,
.noura-insight-item {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.05);
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.5;
}

.noura-insight-list {
  display: grid;
  gap: 10px;
}

/* ===== Page-specific shell helpers ===== */
.noura-instructions-layout,
.noura-aliases-layout {
  display: grid;
  gap: 18px;
  align-items: start;
}

.noura-instructions-layout {
  grid-template-columns: minmax(0, 1.5fr) 420px;
}

.noura-aliases-layout {
  grid-template-columns: 360px minmax(0, 1fr);
}

.noura-instructions-left,
.noura-instructions-right,
.noura-aliases-left,
.noura-aliases-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1400px) {
  .grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .noura-instructions-layout,
  .noura-aliases-layout {
    grid-template-columns: 1fr;
  }

  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .content {
    padding: 16px 14px 24px;
  }

  .topbar,
  .noura-topbar {
    padding: 14px 14px;
  }

  .topbar__title {
    font-size: 18px;
  }

  .row {
    flex-direction: column;
  }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: 1fr;
  }

  .noura-skeleton-row {
    grid-template-columns: 72px 1fr;
  }
}

.noura-conversations-page {
  max-width: 100%;
  width: 100%;
}

.noura-conversations-layout {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 18px;
  min-height: calc(100vh - 170px);
}

.noura-conversations-list-card,
.noura-conversations-detail-card {
  min-width: 0;
}

.noura-conversations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: auto;
}

.noura-conversation-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  color: var(--text);
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.noura-conversation-item:hover {
  transform: translateY(-2px);
  border-color: rgba(124,92,255,.24);
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}

.noura-conversation-item.is-active {
  border-color: rgba(124,92,255,.36);
  background: linear-gradient(90deg, rgba(124,92,255,.14), rgba(79,140,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 28px rgba(37,48,84,.20);
}

.noura-conversation-item-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.noura-conversation-item-title {
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
}

.noura-conversation-item-meta {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

@media (max-width: 1200px) {
  .noura-conversations-layout {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   GOLD THEME (opt-in only)
   Originally an unconditional override that always applied
   regardless of data-theme, silently clobbering every other
   theme (see docs/CLAUDE_DESIGN_SYSTEM.md). Scoped here under
   html[data-theme="gold"] so it becomes a real, selectable,
   inert-by-default theme instead of a landmine — nothing in
   the app currently sets data-theme="gold", so this entire
   block has no visual effect until something opts in.
   (Claude, Enterprise SaaS UI Redesign)
   ========================================================= */

html[data-theme="gold"]{
  --bg:#a67c2d;
  --bg2:#8d6926;
  --panel:rgba(255, 248, 229, .72);
  --panel2:rgba(255, 252, 241, .88);
  --panel3:rgba(255, 253, 246, .96);
  --text:#21170b;
  --muted:#6d604f;
  --muted2:#8b7b63;
  --border:rgba(70, 48, 20, .12);
  --border-strong:rgba(70, 48, 20, .22);
  --shadow:0 22px 62px rgba(71, 49, 15, .22);
  --shadow-soft:0 12px 28px rgba(71, 49, 15, .14);
  --accent:#2a1b0a;
  --accent2:#b88a37;
  --accent3:#f3d37b;
  --success:#2f7d4d;
  --danger:#b94a4a;
  --warning:#c58b1f;
  --gridline:rgba(255,255,255,.025);

  --noura-gradient-accent:linear-gradient(135deg, #2a1b0a 0%, #6f4f1e 52%, #d8b15d 100%);
  --noura-gradient-surface:linear-gradient(180deg, rgba(255,252,241,.92) 0%, rgba(238,218,166,.78) 100%);
  --noura-gradient-surface-2:linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.18));
  --noura-border-soft:rgba(70, 48, 20, .12);
  --noura-border-strong:rgba(70, 48, 20, .22);
}

html[data-theme="gold"] body{
  color:var(--text);
  background:
    radial-gradient(circle at 12% 10%, rgba(255,238,170,.84), transparent 24%),
    radial-gradient(circle at 78% 0%, rgba(255,252,238,.30), transparent 28%),
    linear-gradient(135deg, #f2d98d 0%, #c79a45 42%, #8e6723 100%) !important;
  background-attachment:fixed;
}

html[data-theme="gold"] body::before{
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  opacity:.45;
}

html[data-theme="gold"] .sidebar,
html[data-theme="gold"] .noura-sidebar{
  background:
    linear-gradient(180deg, rgba(255,248,226,.72), rgba(196,151,64,.38)) !important;
  border-right:1px solid rgba(70,48,20,.12) !important;
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.22),
    16px 0 50px rgba(80,55,16,.08) !important;
}

html[data-theme="gold"] .brand,
html[data-theme="gold"] .noura-brand{
  padding:14px 10px 18px !important;
  border-bottom:1px solid rgba(70,48,20,.10) !important;
}

html[data-theme="gold"] .brand::after{
  background:linear-gradient(90deg, transparent, rgba(70,48,20,.18), transparent) !important;
}

html[data-theme="gold"] .brand__logo,
html[data-theme="gold"] .noura-logo{
  width:54px !important;
  height:54px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg, #efd68b 0%, #b78634 55%, #6e4c1b 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.38),
    0 18px 34px rgba(88,58,15,.22) !important;
}

html[data-theme="gold"] .sidebar.collapsed .brand__logo{
  width:46px !important;
  height:46px !important;
}

html[data-theme="gold"] .brand__logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

html[data-theme="gold"] .brand__name,
html[data-theme="gold"] .noura-brand-name,
html[data-theme="gold"] .topbar__title,
html[data-theme="gold"] .noura-section-title,
html[data-theme="gold"] h1,
html[data-theme="gold"] h2,
html[data-theme="gold"] h3,
html[data-theme="gold"] h4{
  color:#21170b !important;
}

html[data-theme="gold"] .brand__sub,
html[data-theme="gold"] .noura-brand-sub,
html[data-theme="gold"] .topbar__hint,
html[data-theme="gold"] .noura-section-sub,
html[data-theme="gold"] label,
html[data-theme="gold"] .noura-label,
html[data-theme="gold"] .muted{
  color:#6d604f !important;
}

html[data-theme="gold"] .topbar,
html[data-theme="gold"] .noura-topbar{
  background:rgba(255,248,226,.56) !important;
  border-bottom:1px solid rgba(70,48,20,.10) !important;
  box-shadow:0 12px 40px rgba(89,62,18,.08);
  backdrop-filter:blur(18px) saturate(1.05);
}

html[data-theme="gold"] .card,
html[data-theme="gold"] .noura-card,
html[data-theme="gold"] .noura-side-card,
html[data-theme="gold"] .kpi,
html[data-theme="gold"] .noura-main-panel,
html[data-theme="gold"] .noura-images-row,
html[data-theme="gold"] .noura-knowledge-source-row,
html[data-theme="gold"] .noura-alias-card,
html[data-theme="gold"] .noura-alias-product-item,
html[data-theme="gold"] .noura-conversation-item,
html[data-theme="gold"] .noura-soft-block,
html[data-theme="gold"] .notice,
html[data-theme="gold"] .table,
html[data-theme="gold"] table.table{
  background:
    linear-gradient(180deg, rgba(255,252,241,.86), rgba(242,222,170,.62)) !important;
  border:1px solid rgba(70,48,20,.12) !important;
  color:#21170b !important;
  box-shadow:
    0 22px 54px rgba(81,55,15,.14),
    inset 0 1px 0 rgba(255,255,255,.55) !important;
}

html[data-theme="gold"] .card::before{
  background:linear-gradient(180deg, rgba(255,255,255,.40), transparent 28%) !important;
}

html[data-theme="gold"] .card:hover,
html[data-theme="gold"] .noura-card:hover,
html[data-theme="gold"] .kpi:hover,
html[data-theme="gold"] .noura-hover-lift:hover{
  box-shadow:
    0 26px 62px rgba(81,55,15,.20),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

html[data-theme="gold"] .nav__title{
  color:#7d6a4d !important;
}

html[data-theme="gold"] .nav__sectionToggle{
  color:#6d604f !important;
}

html[data-theme="gold"] .nav__sectionToggle:hover{
  color:#21170b !important;
  background:rgba(255,255,255,.24) !important;
}

html[data-theme="gold"] .nav__item{
  color:#2f2618 !important;
  border-color:transparent !important;
}

html[data-theme="gold"] .nav__item::before{
  background:linear-gradient(90deg, rgba(42,27,10,.10), rgba(216,177,93,.12)) !important;
}

html[data-theme="gold"] .nav__item:hover{
  color:#21170b !important;
  background:rgba(255,255,255,.28) !important;
  border-color:rgba(70,48,20,.10) !important;
  box-shadow:0 12px 24px rgba(72,50,15,.10) !important;
}

html[data-theme="gold"] .nav__item.active,
html[data-theme="gold"] .nav__item[aria-current="page"]{
  color:#fff !important;
  background:linear-gradient(135deg, #2a1b0a 0%, #5b3d16 62%, #9d742d 100%) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 14px 28px rgba(42,27,10,.25) !important;
}

html[data-theme="gold"] .nav__item.active::after{
  background:linear-gradient(180deg, #fff4bd, #c79a45) !important;
}

html[data-theme="gold"] input,
html[data-theme="gold"] textarea,
html[data-theme="gold"] select,
html[data-theme="gold"] .noura-input,
html[data-theme="gold"] .noura-select{
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(70,48,20,.14) !important;
  color:#21170b !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55) !important;
}

html[data-theme="gold"] input::placeholder,
html[data-theme="gold"] textarea::placeholder{
  color:#9b8a6e !important;
}

html[data-theme="gold"] input:focus,
html[data-theme="gold"] textarea:focus,
html[data-theme="gold"] select:focus,
html[data-theme="gold"] .noura-input:focus,
html[data-theme="gold"] .noura-select:focus,
html[data-theme="gold"] .noura-composer-box:focus-within{
  border-color:rgba(110,76,27,.40) !important;
  box-shadow:
    0 0 0 4px rgba(199,154,69,.22),
    inset 0 1px 0 rgba(255,255,255,.66) !important;
}

html[data-theme="gold"] .btn,
html[data-theme="gold"] .iconBtn{
  background:rgba(255,255,255,.52) !important;
  border:1px solid rgba(70,48,20,.14) !important;
  color:#21170b !important;
  box-shadow:0 10px 22px rgba(72,50,15,.10) !important;
}

html[data-theme="gold"] .btn:hover,
html[data-theme="gold"] .iconBtn:hover{
  background:rgba(255,255,255,.72) !important;
  border-color:rgba(70,48,20,.22) !important;
}

html[data-theme="gold"] .btn.primary{
  background:linear-gradient(135deg, #2a1b0a 0%, #5b3d16 58%, #b98b38 100%) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 16px 34px rgba(42,27,10,.28) !important;
}

html[data-theme="gold"] .pill,
html[data-theme="gold"] .badge,
html[data-theme="gold"] .noura-badge{
  background:rgba(255,255,255,.55) !important;
  border:1px solid rgba(70,48,20,.12) !important;
  color:#2a1b0a !important;
}

html[data-theme="gold"] .pill.ok,
html[data-theme="gold"] .badge.ok{
  background:rgba(47,125,77,.12) !important;
  color:#1f5f3a !important;
  border-color:rgba(47,125,77,.24) !important;
}

html[data-theme="gold"] .pill.bad,
html[data-theme="gold"] .badge.bad{
  background:rgba(185,74,74,.12) !important;
  color:#8d2d2d !important;
  border-color:rgba(185,74,74,.24) !important;
}

html[data-theme="gold"] .table th,
html[data-theme="gold"] table.table th{
  background:rgba(255,246,217,.90) !important;
  color:#7d6a4d !important;
}

html[data-theme="gold"] .table td,
html[data-theme="gold"] table.table td{
  border-bottom:1px solid rgba(70,48,20,.08) !important;
}

html[data-theme="gold"] .table tr:hover td{
  background:rgba(255,255,255,.28) !important;
}

html[data-theme="gold"] .noura-chat-hero,
html[data-theme="gold"] .noura-main-panel,
html[data-theme="gold"] .noura-brand-card{
  background:
    radial-gradient(circle at top left, rgba(255,238,170,.38), transparent 34%),
    linear-gradient(180deg, rgba(255,252,241,.86), rgba(216,177,93,.50)) !important;
}

html[data-theme="gold"] .noura-agent-avatar,
html[data-theme="gold"] .noura-send-btn{
  background:linear-gradient(135deg, #2a1b0a 0%, #6e4c1b 62%, #d8b15d 100%) !important;
  color:#fff !important;
}

html[data-theme="gold"] .noura-msg-bubble.is-assistant{
  background:rgba(255,252,241,.78) !important;
  border:1px solid rgba(70,48,20,.12) !important;
  color:#21170b !important;
}

html[data-theme="gold"] .noura-msg-bubble.is-user{
  background:linear-gradient(135deg, #2a1b0a 0%, #6e4c1b 70%, #b88a37 100%) !important;
  color:#fff !important;
}

html[data-theme="gold"] .noura-composer-box,
html[data-theme="gold"] .noura-command{
  background:rgba(255,252,241,.82) !important;
  border:1px solid rgba(70,48,20,.12) !important;
}

html[data-theme="gold"] .noura-composer-input,
html[data-theme="gold"] .noura-command-input{
  color:#21170b !important;
}

html[data-theme="gold"] .noura-live-pill{
  background:rgba(47,125,77,.12) !important;
  border-color:rgba(47,125,77,.22) !important;
  color:#1f5f3a !important;
}

html[data-theme="gold"] .noura-modal-overlay,
html[data-theme="gold"] .noura-command-backdrop{
  background:rgba(58,39,12,.45) !important;
}

html[data-theme="gold"] .noura-modal-box{
  background:linear-gradient(180deg, rgba(255,252,241,.96), rgba(238,218,166,.86)) !important;
  border:1px solid rgba(70,48,20,.12) !important;
}

html[data-theme="gold"] ::-webkit-scrollbar-thumb{
  background:rgba(82,56,18,.28) !important;
}
html[data-theme="gold"] ::-webkit-scrollbar-thumb:hover{
  background:rgba(82,56,18,.42) !important;
}

.dashboard-page {
  padding: 20px;
}

/* ===== Dashboard Screen ===== */
.dashboard-page{display:flex;flex-direction:column;gap:18px;width:100%}
.dash-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center}
.dash-filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dash-filters select{min-width:170px}
.dash-filters.compact select{min-width:150px}
.dash-status h2,.dash-card h2,.dash-toolbar h2{margin:0 0 12px}
.dash-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.dash-status-item{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-right:1px solid var(--border)}
.dash-status-item:last-child{border-right:0}
.dash-status-value{font-size:28px;font-weight:900;color:var(--text)}
.dash-status-label{margin-top:6px;color:var(--text);font-size:14px}
.dash-status-icon{width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:900}
.dash-status-icon.cyan{background:rgba(37,190,210,.14);color:#19a9bd}
.dash-status-icon.red{background:rgba(255,90,90,.12);color:#e45656}
.dash-status-icon.purple{background:rgba(180,90,240,.14);color:#a64fde}
.dash-status-icon.yellow{background:rgba(242,190,55,.16);color:#bd8b0e}
.dash-card-head{display:flex;justify-content:space-between;align-items:center}
.dash-info{width:20px;height:20px;border-radius:999px;background:#8b8da0;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.dash-metrics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px;margin-top:18px}
.dash-metric-group{border-right:1px solid var(--border);padding-right:22px;min-height:118px}
.dash-metric-group:nth-child(3),.dash-metric-group:last-child{border-right:0}
.dash-metric-group h3{font-size:16px;margin-bottom:22px}
.dash-metric-group.wide{grid-column:span 2}
.dash-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.dash-pair.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.dash-metric-value{font-size:26px;font-weight:900;color:var(--text)}
.dash-metric-label{margin-top:6px;font-size:14px;color:var(--text)}
.dash-change{font-size:12px;font-weight:900;margin-left:4px}
.dash-change.good{color:#00b86b}
.dash-change.bad{color:#ee3f4d}
.dash-trend-top{display:flex;gap:0;margin:20px 0}
.dash-total{padding:0 22px;border-right:1px solid var(--border);min-width:108px}
.dash-total:first-child{padding-left:0}
.dash-total:last-child{border-right:0}
.dash-total strong{display:block;font-size:28px;color:var(--text)}
.dash-total span{display:block;margin-top:6px;color:var(--text);font-size:14px}
.dash-tabs{display:flex;align-items:center;gap:10px;margin:8px 0 18px}
.dash-chip{padding:7px 12px;border-radius:999px;background:#3e6cf4;color:#fff;font-size:13px;font-weight:800}
.dash-range-tabs{margin-left:auto;background:rgba(0,0,0,.035);border-radius:10px;padding:4px;display:flex;gap:2px}
.dash-range-tabs button{border:0;background:transparent;padding:10px 16px;border-radius:8px;color:var(--muted);font-weight:800}
.dash-range-tabs button.active{background:rgba(60,120,255,.14);color:#3e6cf4}
.dash-chart-wrap{width:100%;overflow:hidden}
.dash-line-chart{width:100%;height:300px;display:block}
.dash-chart-grid{stroke:rgba(120,130,150,.25);stroke-dasharray:2 4}
.dash-chart-label{fill:#747b91;font-size:11px}
.dash-line{fill:none;stroke:#18bff2;stroke-width:2.2}
.dash-dot{fill:#18bff2;opacity:.9}
.dash-legend{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text);margin-top:8px}
.dash-legend span{width:10px;height:10px;border-radius:999px;background:#18bff2}
.dash-heat-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.dash-heatmap{display:grid;grid-template-columns:58px repeat(var(--days), minmax(95px,1fr));gap:2px;margin-top:18px;overflow:auto}
.dash-heat-head{text-align:center;color:var(--muted);font-size:12px;padding:8px}
.dash-heat-hour{color:var(--muted);font-size:12px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;min-height:32px}
.dash-heat-cell{min-height:32px;background:rgba(65,130,225,calc(.08 + (var(--i) * .52)));display:flex;align-items:center;justify-content:center;color:#005dff;font-size:12px;font-weight:900}
@media (max-width:1200px){.dash-status-grid{grid-template-columns:repeat(2,1fr)}.dash-metrics-grid{grid-template-columns:1fr}.dash-metric-group,.dash-metric-group:nth-child(3){border-right:0}.dash-metric-group.wide{grid-column:auto}.dash-pair,.dash-pair.three{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.dash-toolbar,.dash-heat-top{flex-direction:column}.dash-status-grid{grid-template-columns:1fr}.dash-status-item{border-right:0;border-bottom:1px solid var(--border)}.dash-pair,.dash-pair.three{grid-template-columns:1fr}.dash-range-tabs{margin-left:0;overflow:auto}.dash-tabs{flex-wrap:wrap}}

/* ===== Conversation Results ===== */
/*.conv-results-page{display:flex;flex-direction:column;gap:14px;width:100%}
.conv-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}
.conv-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.conv-actions input{min-width:300px}
.conv-actions select{min-width:150px}
.conv-table-wrap{width:100%;overflow:auto}
.conv-table th,.conv-table td{vertical-align:top}
.conv-table .mono{font-size:12px}
.conv-summary{max-width:420px;min-width:260px;line-height:1.5}
.conv-badge{text-transform:capitalize}
.conv-badge.sentiment-positive{background:rgba(25,195,125,.12)!important;color:#087443!important;border-color:rgba(25,195,125,.24)!important}
.conv-badge.sentiment-negative{background:rgba(255,93,115,.12)!important;color:#a1122a!important;border-color:rgba(255,93,115,.24)!important}
.conv-badge.sentiment-mixed{background:rgba(245,185,66,.16)!important;color:#8a5d00!important;border-color:rgba(245,185,66,.28)!important}
.conv-badge.funnel-order{background:rgba(25,195,125,.14)!important;color:#087443!important;border-color:rgba(25,195,125,.26)!important}
.conv-badge.funnel-price{background:rgba(79,140,255,.14)!important;color:#2456b8!important;border-color:rgba(79,140,255,.26)!important}
.conv-badge.funnel-lost{background:rgba(255,93,115,.12)!important;color:#a1122a!important;border-color:rgba(255,93,115,.24)!important}
@media(max-width:900px){.conv-toolbar{flex-direction:column}.conv-actions{justify-content:flex-start}.conv-actions input{min-width:100%}}*/

/* ===== Conversation Results polished layout ===== */
.conv-results-page{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
}

.conv-toolbar{
  position:sticky;
  top:0;
  z-index:40;
  padding:18px!important;
}

.conv-toolbar-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:14px;
}

.conv-toolbar-head h2{
  margin:0 0 6px;
}

.conv-toolbar-buttons{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.conv-filters-grid{
  display:grid;
  grid-template-columns:minmax(260px,1.4fr) 150px 150px 170px 170px;
  gap:10px;
  align-items:center;
}

.conv-filters-grid input,
.conv-filters-grid select{
  height:42px;
  min-width:0!important;
  width:100%;
}

.conv-table-wrap{
  width:100%;
  max-height:calc(100vh - 300px);
  overflow:auto;
}

.conv-table th,
.conv-table td{
  vertical-align:top;
}

.conv-table thead th{
  position:sticky;
  top:0;
  z-index:25;
  background:var(--panel3, #fff8e6);
  box-shadow:0 1px 0 var(--border);
}

.conv-table .mono{
  font-size:12px;
}

.conv-summary{
  max-width:420px;
  min-width:260px;
  line-height:1.5;
}

.conv-badge{
  text-transform:capitalize;
}

.conv-badge.sentiment-positive{
  background:rgba(25,195,125,.12)!important;
  color:#087443!important;
  border-color:rgba(25,195,125,.24)!important;
}

.conv-badge.sentiment-negative{
  background:rgba(255,93,115,.12)!important;
  color:#a1122a!important;
  border-color:rgba(255,93,115,.24)!important;
}

.conv-badge.sentiment-mixed{
  background:rgba(245,185,66,.16)!important;
  color:#8a5d00!important;
  border-color:rgba(245,185,66,.28)!important;
}

.conv-badge.funnel-order{
  background:rgba(25,195,125,.14)!important;
  color:#087443!important;
  border-color:rgba(25,195,125,.26)!important;
}

.conv-badge.funnel-price{
  background:rgba(79,140,255,.14)!important;
  color:#2456b8!important;
  border-color:rgba(79,140,255,.26)!important;
}

.conv-badge.funnel-lost,
.conv-badge.funnel-unqualified{
  background:rgba(255,93,115,.12)!important;
  color:#a1122a!important;
  border-color:rgba(255,93,115,.24)!important;
}

@media(max-width:1100px){
  .conv-filters-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){
  .conv-toolbar-head{
    flex-direction:column;
  }

  .conv-toolbar-buttons{
    justify-content:flex-start;
  }

  .conv-filters-grid{
    grid-template-columns:1fr;
  }
}

/* Sticky Conversation Results filters */
.conv-toolbar {
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Keep table header frozen while scrolling */
.conv-table-wrap {
  max-height: calc(100vh - 260px);
  overflow: auto;
}

.conv-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel3, #fff8e6);
  box-shadow: 0 1px 0 var(--border);
}

/* Better filter layout */
.conv-actions input[type="date"] {
  min-width: 145px;
}

.conv-actions {
  align-items: stretch;
}


/* ===== Follow-Up Automation ===== */
.followup-page{
  display:flex;
  flex-direction:column;
  gap:18px;
  width:100%;
}

.followup-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.followup-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1.2fr 1.2fr auto;
  gap:10px;
  align-items:center;
}

.followup-delay{
  display:flex;
  gap:8px;
  align-items:center;
}

.followup-delay input{
  width:78px;
}

.followup-check{
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
}

.followup-actions,
.followup-head,
.followup-row-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.followup-head{
  justify-content:space-between;
  margin-bottom:12px;
}

.followup-table-wrap{
  width:100%;
  overflow:auto;
}

.followup-message{
  max-width:420px;
  white-space:pre-wrap;
  line-height:1.5;
}

.followup-image-cell{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:220px;
}

.followup-image-cell img{
  width:58px;
  height:58px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid var(--border);
}

@media(max-width:1200px){
  .followup-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){
  .followup-grid{
    grid-template-columns:1fr;
  }

  .followup-delay{
    flex-wrap:wrap;
  }
}


.product-knowledge-modal-box{
  width:min(1180px,96vw);
  max-height:92vh;
  overflow:auto;
}

.product-knowledge-item.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}

.product-knowledge-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:18px;
  height:calc(100vh - 170px);
  min-height:620px;
}

.product-knowledge-left,
.product-knowledge-right{
  min-height:0;
}

.product-knowledge-left{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.product-knowledge-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:12px;
}

.product-knowledge-right{
  min-width:0;
}

.product-knowledge-editor{
  height:100%;
  overflow-y:auto;
  padding:18px;
}

.product-knowledge-item{
  width:100%;
  display:block;
  text-align:left;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  margin-bottom:10px;
  background:rgba(255,255,255,.45);
  cursor:pointer;
}

.product-knowledge-item.is-active{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}

.product-knowledge-item-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.product-knowledge-item-title{
  font-weight:900;
}

@media(max-width:980px){
  .product-knowledge-layout{
    grid-template-columns:1fr;
    height:auto;
  }

  .product-knowledge-list,
  .product-knowledge-editor{
    max-height:none;
    overflow:visible;
  }
}


.promo-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.promo-card{
  padding:16px;
}

.promo-preview{
  white-space:pre-wrap;
  font-family:inherit;
  background:rgba(255,255,255,.45);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  margin:12px 0 0;
  line-height:1.6;
}



/* ================================
   Professional Roles UI
   Add to public/styles/main.css
-------------------------------- */

/*.noura-page{width:100%;max-width:1440px;margin:0 auto;display:grid;gap:18px}
.noura-card{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--border);border-radius:var(--radius3);box-shadow:var(--shadow);padding:20px;position:relative;overflow:hidden;backdrop-filter:blur(10px) saturate(1.05)}
.noura-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 24%)}
.noura-form>*{position:relative;z-index:1}
.noura-section-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.noura-section-title{font-size:18px;font-weight:900;letter-spacing:-.01em;color:var(--text)}
.noura-section-sub{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.55}
.noura-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 11px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);font-size:12px;font-weight:800;white-space:nowrap}
.noura-input{min-height:44px}
.noura-actions-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.noura-hover-lift{transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.noura-hover-lift:hover{transform:translateY(-1px);border-color:var(--border-strong);box-shadow:var(--shadow-soft)}
.noura-roles-page{gap:20px}
.noura-roles-hero{padding:28px 30px;border-radius:28px;border:1px solid var(--border);box-shadow:var(--shadow);background:radial-gradient(circle at top left,rgba(124,92,255,.24),transparent 32%),radial-gradient(circle at top right,rgba(25,195,255,.16),transparent 28%),linear-gradient(180deg,var(--panel3),var(--panel2));overflow:hidden;position:relative}
.noura-roles-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.06) 45%,transparent 70%);opacity:.7}
.noura-roles-hero-badge{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.noura-roles-hero-title{margin-top:14px;font-size:clamp(26px,3vw,40px);line-height:1.05;font-weight:950;letter-spacing:-.04em;position:relative;z-index:1}
.noura-roles-hero-subtitle{margin-top:10px;max-width:820px;color:var(--muted);font-size:14px;line-height:1.7;position:relative;z-index:1}
.noura-roles-stats{margin-top:-4px}
.noura-role-create-card{display:grid;gap:12px}
.noura-roles-list{display:grid;gap:18px}
.noura-role-card{display:grid;gap:14px}
.noura-role-card-top{position:relative;z-index:1;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.noura-role-title-row{display:flex;gap:12px;align-items:flex-start}
.noura-role-avatar{width:46px;height:46px;border-radius:16px;flex:0 0 auto;display:grid;place-items:center;color:white;font-weight:950;background:linear-gradient(135deg,var(--accent),var(--accent2) 65%,var(--accent3));box-shadow:0 14px 30px rgba(79,140,255,.22)}
.noura-role-card-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.noura-role-bulk-actions{justify-content:flex-end}
.noura-role-perms-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.noura-role-permission-card{border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border-radius:18px;padding:14px;min-height:142px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.noura-role-permission-head{display:grid;gap:10px}
.noura-role-permission-title{font-size:14px;font-weight:900;color:var(--text);line-height:1.25}
.noura-role-permission-sub{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.45}
.noura-role-access-select{min-height:38px;padding:8px 10px;border-radius:12px;font-size:12px;font-weight:800}
.noura-role-permission-checks{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid var(--border)}
.noura-role-permission-checks .toggle{margin:0;color:var(--muted);font-weight:800}
@media (max-width:1200px){.noura-role-perms-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.noura-role-perms-grid{grid-template-columns:1fr}.noura-role-card-top,.noura-section-header{flex-direction:column}.noura-role-card-badges,.noura-role-bulk-actions{justify-content:flex-start}}*/



/* ================================
   Analytics UI Upgrade
   Add to public/styles/main.css
-------------------------------- */

.noura-analytics-page{max-width:1440px;margin:0 auto;display:grid;gap:18px}
.noura-analytics-hero{padding:28px 30px;border-radius:28px;border:1px solid var(--border);box-shadow:var(--shadow);background:radial-gradient(circle at top left,rgba(124,92,255,.24),transparent 32%),radial-gradient(circle at top right,rgba(25,195,255,.16),transparent 28%),linear-gradient(180deg,var(--panel3),var(--panel2));overflow:hidden;position:relative}
.noura-analytics-filters{display:grid;gap:12px}
.noura-analytics-refresh-wrap{display:flex;align-items:flex-end}
.noura-analytics-refresh-wrap .btn{width:100%}
.noura-analytics-metric{min-height:130px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.noura-analytics-metric.danger{border-color:rgba(255,93,115,.35);background:linear-gradient(180deg,rgba(255,93,115,.12),rgba(255,255,255,.025))}
.noura-analytics-chart{margin-top:12px;color:var(--accent3);border:1px solid var(--border);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));padding:8px}






/* =========================================================
   TATOUCHE PORTAL CARD MENU OVERRIDE
   Append this block to the END of: Tatouche-AI/public/styles/main.css
   This keeps the old app routes working but replaces the left menu
   with a full-width card portal homepage.
   ========================================================= */

.portal-app{
  display:flex;
  min-height:100vh;
  width:100%;
}

.portal-hidden-sidebar{
  display:none !important;
}

.portal-main,
.main.portal-main{
  flex:1 1 auto;
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.portal-header,
.topbar.portal-header{
  position:sticky !important;
  top:12px !important;
  z-index:5000 !important;
  margin:12px 22px 10px;
  padding:18px !important;
  min-height:154px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.45) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.55), transparent 32%),
    linear-gradient(135deg, rgba(255,252,241,.90), rgba(224,202,147,.78)) !important;
  box-shadow:
    0 26px 62px rgba(81,55,15,.18),
    inset 0 1px 0 rgba(255,255,255,.75) !important;
  backdrop-filter:blur(16px) saturate(1.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.portal-header-left{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.portal-logo-block{
  width:136px;
  height:136px;
  border-radius:14px;
  background:linear-gradient(135deg, #f7dfa1 0%, #c29342 55%, #7c551c 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:
    0 18px 34px rgba(88,58,15,.24),
    inset 0 1px 0 rgba(255,255,255,.62);
  flex:0 0 auto;
}

.portal-logo-block img{
  width:86%;
  height:86%;
  object-fit:contain;
}

.portal-header .topbar__title{
  font-size:22px !important;
  line-height:1.15;
  color:#21170b !important;
  font-weight:950;
  letter-spacing:-.03em;
}

.portal-header .topbar__hint{
  color:#6d604f !important;
  font-size:13px;
  margin-top:4px;
}

.portal-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.portal-home-btn,
.portal-header-actions .btn.primary{
  background:#24180c !important;
  border-color:#24180c !important;
  color:#fff !important;
}

.portal-home{
  width:100%;
  padding:18px 22px 34px;
}

.portal-card-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4, minmax(220px, 1fr));
  gap:18px;
  align-items:stretch;
}

.portal-card{
  min-height:244px;
  border-radius:26px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  color:#21170b !important;
  text-decoration:none;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,255,255,.75), transparent 34%),
    linear-gradient(135deg, rgba(255,252,241,.90), rgba(236,214,160,.78)) !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:
    0 24px 48px rgba(81,55,15,.16),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.portal-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.34), transparent 42%);
  opacity:.9;
}

.portal-card > *{
  position:relative;
  z-index:1;
}

.portal-card:hover{
  transform:translateY(-4px);
  border-color:rgba(42,27,10,.18) !important;
  box-shadow:
    0 32px 66px rgba(81,55,15,.24),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.portal-card-icon{
  width:50px;
  height:50px;
  border-radius:14px;
  background:#24180c;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:900;
  box-shadow:0 14px 24px rgba(42,27,10,.20);
}

.portal-card h2{
  margin:6px 0 0;
  color:#050505 !important;
  font-size:19px;
  font-weight:950;
  letter-spacing:-.03em;
}

.portal-card p{
  margin:0;
  color:#6d604f;
  font-size:14px;
  line-height:1.55;
  max-width:320px;
}

.portal-card-actions{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.portal-card-actions span,
.portal-card-actions strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:23px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
}

.portal-card-actions span{
  background:rgba(255,255,255,.70);
  color:#21170b;
  font-weight:700;
}

.portal-card-actions strong{
  background:#21170b;
  color:#fff;
  font-weight:850;
}

.portal-content,
.content.portal-content{
  width:100%;
  max-width:none !important;
  padding:18px 22px 34px !important;
}

body:has(#portalHome:not([style*="display: none"])) .portal-content{
  display:none;
}

@media (min-width:1600px){
  .portal-card-grid{
    grid-template-columns:repeat(5, minmax(220px, 1fr));
  }
}

@media (max-width:1180px){
  .portal-card-grid{
    grid-template-columns:repeat(3, minmax(220px, 1fr));
  }
}

@media (max-width:860px){
  .portal-header{
    margin:10px 14px;
    min-height:auto;
    align-items:flex-start;
    flex-direction:column;
  }

  .portal-logo-block{
    width:86px;
    height:86px;
  }

  .portal-card-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
  }

  .portal-home,
  .portal-content,
  .content.portal-content{
    padding:14px !important;
  }
}

@media (max-width:560px){
  .portal-card-grid{
    grid-template-columns:1fr;
  }

  .portal-header-left{
    align-items:center;
  }

  .portal-card{
    min-height:210px;
  }
}

/* Full all-menus grid tuning */
.portal-card-grid{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
}
.portal-home{
  width:100% !important;
  max-width:none !important;
}
.portal-card{
  min-height: 210px;
}
@media (min-width:1500px){
  .portal-card-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* ===== Product Rules split view ===== */
.product-rules-page {
  width: 100%;
  max-width: none;
  padding: 0 6px 28px;
}

.product-rules-toolbar {
  margin-bottom: 18px;
}

.product-rules-split-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: 100%;
}

.product-rules-sidebar {
  padding: 18px;
  height: calc(100vh - 245px);
  min-height: 520px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-rules-sidebar-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.35);
  margin-bottom: 12px;
}

.product-rules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
  padding-right: 6px;
}

.product-rule-list-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255,255,255,.52);
  background: rgba(255,255,255,.42);
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(50, 32, 10, .08);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  color: inherit;
}

.product-rule-list-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(50, 32, 10, .14);
}

.product-rule-list-item.is-selected {
  border-color: rgba(102, 73, 255, .95);
  box-shadow: 0 0 0 2px rgba(102, 73, 255, .15), 0 16px 34px rgba(50, 32, 10, .14);
}

.product-rule-list-title {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
  margin-bottom: 6px;
}

.product-rule-list-sub {
  color: var(--muted, #6b6254);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-rule-list-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}

.product-rules-detail {
  min-width: 0;
}

.product-rule-detail-card {
  min-height: calc(100vh - 245px);
  padding: 22px;
}

.product-rule-kpis {
  margin-top: 18px;
}

.product-rule-mini-card {
  padding: 18px;
  min-height: 95px;
}

.product-rule-value {
  margin-top: 8px;
  font-weight: 800;
  font-size: 18px;
  word-break: break-word;
}

.product-rule-content-block {
  margin-top: 18px;
  padding: 18px;
}

.product-rule-readable {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.7;
}

.product-rule-keywords {
  margin: 10px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 340px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.45);
  color: inherit;
  font-size: 14px;
  line-height: 1.6;
}

.product-rule-empty-detail {
  min-height: calc(100vh - 245px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.product-rule-modal-overlay,
.noura-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(31, 20, 6, .42);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.product-rule-modal,
.noura-modal {
  width: min(1120px, 96vw);
  max-height: 92vh;
  overflow: auto;
  border-radius: 28px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(239,218,164,.92));
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 30px 90px rgba(35, 22, 6, .35);
}

.product-rule-modal-head {
  margin-bottom: 14px;
}

@media (max-width: 980px) {
  .product-rules-split-layout {
    grid-template-columns: 1fr;
  }

  .product-rules-sidebar,
  .product-rule-detail-card,
  .product-rule-empty-detail {
    height: auto;
    min-height: auto;
  }

  .product-rules-sidebar {
    max-height: 420px;
  }
}




/* Promo Messages Split View */
.promo-split-page {
  max-width: none !important;
  width: 100%;
}

.promo-split-hero {
  margin-bottom: 18px;
}

.promo-split-workspace {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
}

.promo-split-left {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-radius: 24px;
  padding: 16px;
  min-height: 72vh;
  max-height: 78vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
}

.promo-split-left-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.promo-split-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.promo-split-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 18px;
  padding: 14px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.promo-split-item:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
}

.promo-split-item.active {
  border-color: rgba(124,92,255,.72);
  box-shadow: 0 0 0 2px rgba(124,92,255,.15), var(--shadow-soft);
}

.promo-split-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.promo-split-item-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45;
}

.promo-split-item-preview {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text);
  opacity: .86;
  line-height: 1.45;
}

.promo-split-right {
  min-width: 0;
}

.promo-split-detail-card {
  min-height: 72vh;
}

.promo-split-stats {
  margin: 16px 0;
}

.promo-message-preview-card {
  margin-top: 16px;
  box-shadow: none;
}

.promo-split-message {
  max-height: 50vh;
  overflow: auto;
  white-space: pre-wrap;
  line-height: 1.75;
  font-size: 14px;
  direction: auto;
}

.promo-split-empty {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.promo-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.promo-modal-card {
  position: relative;
  z-index: 1;
  width: min(980px, calc(100vw - 36px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: 24px auto;
}

@media (max-width: 980px) {
  .promo-split-workspace {
    grid-template-columns: 1fr;
  }

  .promo-split-left,
  .promo-split-detail-card,
  .promo-split-empty {
    min-height: auto;
    max-height: none;
  }
}


/* Automation Rules Split View */
.automation-split-page {
  max-width: none !important;
  width: 100%;
}

.automation-split-hero {
  margin-bottom: 18px;
}

.automation-split-workspace {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
}

.automation-split-left {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border-radius: 24px;
  padding: 16px;
  min-height: 72vh;
  max-height: 78vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
}

.automation-split-left-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.automation-split-list {
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.automation-rule-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 18px;
  padding: 14px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.automation-rule-item:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
}

.automation-rule-item.active {
  border-color: rgba(124,92,255,.72);
  box-shadow: 0 0 0 2px rgba(124,92,255,.15), var(--shadow-soft);
}

.automation-rule-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.automation-rule-item-meta,
.automation-rule-item-summary {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.45;
}

.automation-rule-item-trigger {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.45;
}

.automation-split-right {
  min-width: 0;
}

.automation-detail-card {
  min-height: 72vh;
}

.automation-detail-kpis,
.automation-detail-panels {
  margin-top: 16px;
}

.automation-inner-card {
  box-shadow: none;
}

.automation-pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow: auto;
  line-height: 1.65;
  font-size: 13px;
  margin: 12px 0 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
}

.rtl-auto {
  direction: auto;
}

.automation-empty {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.automation-test-panel {
  margin-top: 18px;
}

.automation-test-out {
  white-space: pre-wrap;
  max-height: 260px;
  overflow: auto;
  margin-top: 14px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
}

.automation-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.automation-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.automation-modal-card {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 36px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: 24px auto;
}

.automation-modal-titlebar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--panel3), var(--panel2));
  margin: -20px -20px 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.automation-template-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.automation-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.automation-check-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 11px 12px;
  color: var(--text);
  margin: 0;
}

.automation-check-card input {
  width: auto;
  accent-color: var(--accent);
}

@media (max-width: 1100px) {
  .automation-split-workspace {
    grid-template-columns: 1fr;
  }

  .automation-split-left,
  .automation-detail-card,
  .automation-empty {
    min-height: auto;
    max-height: none;
  }

  .automation-check-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   NOURA / TATOUCHE ENTERPRISE UI 2026
   Professional CRM / ERP visual system override
   Append-safe: placed at the END of main.css
   Goal:
   - Keep Tatouche gold brand
   - Make workspace cleaner, whiter, enterprise-grade
   - Improve readability for dashboard/table-heavy screens
   ========================================================= */

:root {
  --enterprise-bg: #f7f4ed;
  --enterprise-canvas: #ffffff;
  --enterprise-canvas-soft: #fbf8f1;
  --enterprise-header: linear-gradient(135deg, #fff9e8 0%, #ead39c 58%, #cfaa5a 100%);
  --enterprise-gold: #b88a37;
  --enterprise-gold-2: #d9b764;
  --enterprise-brown: #24180c;
  --enterprise-brown-2: #5b3d16;
  --enterprise-text: #17120a;
  --enterprise-muted: #6f6658;
  --enterprise-muted-2: #968874;
  --enterprise-border: rgba(35, 24, 12, .105);
  --enterprise-border-strong: rgba(35, 24, 12, .18);
  --enterprise-shadow-xs: 0 1px 2px rgba(33, 23, 11, .06);
  --enterprise-shadow-sm: 0 8px 22px rgba(33, 23, 11, .08);
  --enterprise-shadow-md: 0 18px 42px rgba(33, 23, 11, .10);
  --enterprise-shadow-lg: 0 28px 70px rgba(33, 23, 11, .14);

  --bg: var(--enterprise-bg);
  --bg2: #efe7d7;
  --panel: #ffffff;
  --panel2: #ffffff;
  --panel3: #ffffff;
  --text: var(--enterprise-text);
  --muted: var(--enterprise-muted);
  --muted2: var(--enterprise-muted-2);
  --border: var(--enterprise-border);
  --border-strong: var(--enterprise-border-strong);
  --shadow: var(--enterprise-shadow-md);
  --shadow-soft: var(--enterprise-shadow-sm);
  --accent: var(--enterprise-brown);
  --accent2: var(--enterprise-gold);
  --accent3: var(--enterprise-gold-2);

  --noura-gradient-accent: linear-gradient(135deg, #24180c 0%, #6a4819 55%, #d9b764 100%);
  --noura-gradient-surface: #ffffff;
  --noura-gradient-surface-2: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%);
  --noura-border-soft: var(--enterprise-border);
  --noura-border-strong: var(--enterprise-border-strong);
}

/* Main application canvas */
html,
body {
  background: var(--enterprise-bg) !important;
}

body {
  color: var(--enterprise-text) !important;
  background:
    radial-gradient(circle at 8% -8%, rgba(217,183,100,.26), transparent 26%),
    radial-gradient(circle at 92% 0%, rgba(255,255,255,.75), transparent 24%),
    linear-gradient(180deg, #f9f6ee 0%, #f3ecd8 100%) !important;
}

body::before {
  opacity: .24 !important;
  background-image:
    linear-gradient(rgba(36,24,12,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,24,12,.035) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* Enterprise shell: white workspace under branded header */
.main,
.portal-main,
.main.portal-main {
  background: transparent !important;
}

.content,
.portal-content,
.content.portal-content {
  background: var(--enterprise-canvas) !important;
  border-radius: 28px !important;
  margin: 0 22px 34px !important;
  padding: 24px !important;
  box-shadow:
    0 28px 70px rgba(33, 23, 11, .10),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  border: 1px solid rgba(35,24,12,.08) !important;
}

/* When portal home is visible, give homepage a clean white enterprise canvas */
.portal-home {
  background: var(--enterprise-canvas) !important;
  border-radius: 28px !important;
  margin: 0 22px 34px !important;
  padding: 24px !important;
  box-shadow:
    0 28px 70px rgba(33, 23, 11, .10),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  border: 1px solid rgba(35,24,12,.08) !important;
}

/* Header remains premium Tatouche gold */
.portal-header,
.topbar.portal-header {
  min-height: 152px !important;
  margin: 16px 22px 18px !important;
  padding: 20px 24px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 11% 0%, rgba(255,255,255,.86), transparent 30%),
    radial-gradient(circle at 78% 5%, rgba(255,245,205,.42), transparent 30%),
    var(--enterprise-header) !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow:
    0 24px 65px rgba(33,23,11,.14),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.portal-logo-block {
  width: 124px !important;
  height: 124px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(135deg, #f8e8b2 0%, #c99b45 58%, #754f19 100%) !important;
  box-shadow:
    0 18px 42px rgba(33,23,11,.18),
    inset 0 1px 0 rgba(255,255,255,.8) !important;
}

/* Enterprise card menu */
.portal-card-grid {
  gap: 18px !important;
}

.portal-card {
  min-height: 218px !important;
  border-radius: 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(35,24,12,.10) !important;
  box-shadow:
    0 14px 34px rgba(33,23,11,.075),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.portal-card::before {
  background:
    linear-gradient(180deg, rgba(217,183,100,.12), transparent 34%) !important;
  opacity: 1 !important;
}

.portal-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(184,138,55,.28) !important;
  box-shadow:
    0 24px 54px rgba(33,23,11,.14),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.portal-card-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, #24180c 0%, #5b3d16 100%) !important;
  box-shadow: 0 14px 26px rgba(33,23,11,.18) !important;
}

.portal-card h2 {
  color: var(--enterprise-text) !important;
  font-size: 20px !important;
  letter-spacing: -.04em !important;
}

.portal-card p {
  color: var(--enterprise-muted) !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
}

.portal-card-actions span {
  background: #f6f1e5 !important;
  border: 1px solid rgba(35,24,12,.08) !important;
}

.portal-card-actions strong {
  background: var(--enterprise-brown) !important;
}

/* Cards and panels */
.card,
.noura-card,
.noura-side-card,
.kpi,
.noura-main-panel,
.noura-images-row,
.noura-knowledge-source-row,
.noura-alias-card,
.noura-alias-product-item,
.noura-conversation-item,
.noura-soft-block,
.notice {
  background: #ffffff !important;
  border: 1px solid var(--enterprise-border) !important;
  color: var(--enterprise-text) !important;
  box-shadow: var(--enterprise-shadow-sm) !important;
}

.card::before {
  background: linear-gradient(180deg, rgba(217,183,100,.075), transparent 26%) !important;
}

.card:hover,
.noura-card:hover,
.kpi:hover,
.noura-hover-lift:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--enterprise-shadow-md) !important;
}

/* Tables: stronger enterprise readability */
.table,
table.table {
  background: #ffffff !important;
  border: 1px solid var(--enterprise-border) !important;
  box-shadow: var(--enterprise-shadow-xs) !important;
}

.table th,
table.table th,
.conv-table thead th {
  background: #fbf8f1 !important;
  color: #746651 !important;
  border-bottom: 1px solid rgba(35,24,12,.11) !important;
}

.table td,
table.table td {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(35,24,12,.07) !important;
  color: var(--enterprise-text) !important;
}

.table tr:hover td {
  background: #fffaf0 !important;
}

/* Forms */
input,
textarea,
select,
.noura-input,
.noura-select {
  background: #ffffff !important;
  border: 1px solid rgba(35,24,12,.13) !important;
  color: var(--enterprise-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(33,23,11,.035) !important;
}

input::placeholder,
textarea::placeholder {
  color: #a39786 !important;
}

input:focus,
textarea:focus,
select:focus,
.noura-input:focus,
.noura-select:focus,
.noura-composer-box:focus-within {
  border-color: rgba(184,138,55,.58) !important;
  box-shadow:
    0 0 0 4px rgba(217,183,100,.22),
    0 8px 20px rgba(33,23,11,.055) !important;
}

/* Buttons */
.btn,
.iconBtn {
  background: #ffffff !important;
  border: 1px solid rgba(35,24,12,.12) !important;
  color: var(--enterprise-text) !important;
  box-shadow: 0 8px 18px rgba(33,23,11,.07) !important;
}

.btn:hover,
.iconBtn:hover {
  background: #fffaf0 !important;
  border-color: rgba(184,138,55,.32) !important;
  box-shadow: 0 12px 24px rgba(33,23,11,.095) !important;
}

.btn.primary,
.portal-home-btn,
.portal-header-actions .btn.primary {
  background:
    linear-gradient(135deg, #24180c 0%, #5b3d16 58%, #b88a37 100%) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 16px 34px rgba(33,23,11,.22) !important;
}

/* Badges and status pills */
.pill,
.badge,
.noura-badge {
  background: #f7f2e8 !important;
  border: 1px solid rgba(35,24,12,.095) !important;
  color: #372819 !important;
}

.pill.ok,
.badge.ok,
.noura-live-pill {
  background: rgba(47,125,77,.10) !important;
  color: #1f6b43 !important;
  border-color: rgba(47,125,77,.22) !important;
}

.pill.bad,
.badge.bad {
  background: rgba(185,74,74,.10) !important;
  color: #933232 !important;
  border-color: rgba(185,74,74,.22) !important;
}

/* Dashboard and result pages: reduce heavy gold panels */
.conv-toolbar,
.followup-v2-card,
.dash-card,
.dash-status,
.product-rules-sidebar,
.product-rule-detail-card,
.promo-split-left,
.promo-split-detail-card,
.automation-split-left,
.automation-detail-card {
  background: #ffffff !important;
  border: 1px solid var(--enterprise-border) !important;
  box-shadow: var(--enterprise-shadow-sm) !important;
}

/* Dashboard statistic cards */
.conv-stat-card,
.followup-stat-card,
.dash-status-item,
.kpi,
.product-rule-mini-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%) !important;
  border: 1px solid rgba(35,24,12,.09) !important;
  box-shadow: 0 10px 22px rgba(33,23,11,.055) !important;
}

/* Conversation Results: sticky toolbar should feel like app control bar */
.conv-toolbar {
  top: 12px !important;
  border-radius: 24px !important;
}

/* Header typography */
.topbar__title,
.portal-header .topbar__title,
h1,
h2,
h3,
h4,
.noura-section-title {
  color: var(--enterprise-text) !important;
}

.topbar__hint,
.portal-header .topbar__hint,
label,
.noura-label,
.muted,
.noura-section-sub {
  color: var(--enterprise-muted) !important;
}

/* Chat */
.noura-chat-hero,
.noura-main-panel,
.noura-brand-card {
  background: #ffffff !important;
  border: 1px solid var(--enterprise-border) !important;
  box-shadow: var(--enterprise-shadow-sm) !important;
}

.noura-msg-bubble.is-assistant {
  background: #ffffff !important;
  color: var(--enterprise-text) !important;
  border: 1px solid rgba(35,24,12,.09) !important;
  box-shadow: 0 10px 22px rgba(33,23,11,.06) !important;
}

.noura-msg-bubble.is-user {
  background: linear-gradient(135deg, #24180c 0%, #6a4819 72%, #b88a37 100%) !important;
  color: #ffffff !important;
}

.noura-composer-box,
.noura-command {
  background: #ffffff !important;
  border: 1px solid var(--enterprise-border) !important;
  box-shadow: var(--enterprise-shadow-sm) !important;
}

.noura-composer-input,
.noura-command-input {
  color: var(--enterprise-text) !important;
}

/* Modal */
.noura-modal-overlay,
.noura-command-backdrop,
.product-rule-modal-overlay {
  background: rgba(35,24,12,.38) !important;
}

.noura-modal-box,
.product-rule-modal,
.noura-modal {
  background: #ffffff !important;
  border: 1px solid var(--enterprise-border) !important;
  box-shadow: var(--enterprise-shadow-lg) !important;
}

/* Focused enterprise separators */
hr,
.noura-divider {
  border: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(35,24,12,.14), transparent) !important;
}

/* Scrollbars */
::-webkit-scrollbar-thumb {
  background: rgba(35,24,12,.20) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(35,24,12,.32) !important;
}

/* Responsive refinements */
@media (max-width: 860px) {
  .portal-header,
  .topbar.portal-header {
    margin: 12px 14px 14px !important;
    border-radius: 24px !important;
  }

  .portal-home,
  .content,
  .portal-content,
  .content.portal-content {
    margin: 0 14px 24px !important;
    border-radius: 22px !important;
    padding: 16px !important;
  }

  .portal-logo-block {
    width: 86px !important;
    height: 86px !important;
  }
}


/* =========================================================
   NOURA ENTERPRISE PORTAL ALIGNMENT FIX
   Fixes:
   - Removes right-side visual misalignment / horizontal overflow
   - Makes portal fit page without bottom left/right scroll
   - Reduces portal card height
   - Supports menu cards without Read / Write chips
   ========================================================= */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.app,
.portal-app,
.main,
.portal-main,
.main.portal-main {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.portal-main {
  align-items: stretch !important;
}

/* Make header and content share the exact same width system */
.portal-header,
.topbar.portal-header,
.portal-home,
.portal-content,
.content.portal-content {
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin-left: 18px !important;
  margin-right: 18px !important;
}

/* Keep header inside viewport and remove the awkward right overflow */
.portal-header,
.topbar.portal-header {
  overflow: hidden !important;
  min-height: 132px !important;
  border-radius: 26px !important;
  padding: 16px 22px !important;
}

.portal-header-left {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.portal-header-actions {
  flex: 0 0 auto !important;
  max-width: 46% !important;
}

/* Smaller cleaner logo block */
.portal-logo-block {
  width: 104px !important;
  height: 104px !important;
  border-radius: 22px !important;
}

/* Same alignment for white workspace */
.portal-home {
  padding: 22px !important;
  border-radius: 26px !important;
}

/* No horizontal scroll from grid/cards */
.portal-card-grid {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 16px !important;
  overflow: visible !important;
}

.portal-card {
  min-width: 0 !important;
  min-height: 174px !important;
  height: auto !important;
  border-radius: 22px !important;
  padding: 20px !important;
  gap: 12px !important;
  justify-content: flex-start !important;
}

.portal-card-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 14px !important;
  font-size: 21px !important;
  margin-bottom: 8px !important;
}

.portal-card h2 {
  font-size: 18px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.portal-card p {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  margin-top: 8px !important;
}

/* Hide action chips even if some old HTML still contains them */
.portal-card-actions {
  display: none !important;
}

/* Better enterprise spacing on very large screens */
@media (min-width: 1500px) {
  .portal-card-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Prevent right-side overflow caused by fixed button/pill widths */
.btn,
.iconBtn,
.pill {
  max-width: 100%;
  white-space: nowrap;
}

/* Make content pages align with portal home */
.content,
.portal-content,
.content.portal-content {
  border-radius: 26px !important;
  overflow-x: hidden !important;
}

/* Responsive alignment */
@media (max-width: 980px) {
  .portal-header,
  .topbar.portal-header,
  .portal-home,
  .portal-content,
  .content.portal-content {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .portal-header,
  .topbar.portal-header {
    min-height: auto !important;
    padding: 14px !important;
  }

  .portal-logo-block {
    width: 82px !important;
    height: 82px !important;
  }

  .portal-header-actions {
    max-width: 100% !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .portal-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .portal-card-grid {
    grid-template-columns: 1fr !important;
  }

  .portal-card {
    min-height: 150px !important;
  }
}


/* vNoura portal sticky header final override */
.portal-header,
.topbar.portal-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

.portal-main,
.main.portal-main{
  overflow: visible !important;
}

.portal-header .topbar__title::after{
  content: "";
}


/* =========================================================
   NOURA ENTERPRISE PORTAL — FINAL HEADER + HOME FIX
   Keeps the global header frozen and prevents app.js/screens from
   visually turning the portal landing page into Chat-Test.
   ========================================================= */

html,
body{
  overflow-x: clip !important;
}

.app,
.portal-app,
.main,
.portal-main,
.main.portal-main{
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.portal-main,
.main.portal-main{
  position: relative !important;
  min-height: 100vh !important;
}

/* Frozen premium header */
.portal-header,
.topbar.portal-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Make sure the sticky header stays above tables/toolbars */
.portal-header + .portal-home,
.portal-header + .portal-home + .portal-content,
.portal-home,
.portal-content,
.content.portal-content{
  position: relative !important;
  z-index: 1 !important;
}

/* Portal home title area */
.portal-enterprise-hero{
  position: relative !important;
  z-index: 1 !important;
}

/* Prevent old screen title from appearing while portal home is active */
body:has(#portalHome:not([style*="display: none"])) .portal-header .topbar__title{
  font-size: 0 !important;
}

body:has(#portalHome:not([style*="display: none"])) .portal-header .topbar__title::before{
  content: "Noura AI";
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
  color: var(--enterprise-text, #17120a) !important;
}

body:has(#portalHome:not([style*="display: none"])) .portal-header .topbar__hint{
  font-size: 0 !important;
}

body:has(#portalHome:not([style*="display: none"])) .portal-header .topbar__hint::before{
  content: "Customer Intelligence & Sales Automation Platform";
  display: block;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  color: var(--enterprise-muted, #6f6658) !important;
}

/* Keep header compact enough while sticky */
@media (min-width: 981px){
  .portal-header,
  .topbar.portal-header{
    min-height: 132px !important;
  }
}

@media (max-width: 980px){
  .portal-header,
  .topbar.portal-header{
    top: 0 !important;
    max-height: none !important;
  }
}

/* Knowledge KPI row 
.noura-knowledge-kpis,
.grid.cols-4 {
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  margin-bottom:18px;
}

@media (max-width:1200px){
  .noura-knowledge-kpis,
  .grid.cols-4{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:768px){
  .noura-knowledge-kpis,
  .grid.cols-4{
    grid-template-columns:1fr !important;
  }
}*/ 

/* =====================================
   GLOBAL ENTERPRISE MODAL FIX
   ===================================== */

.noura-modal-overlay,
.product-modal,
.promo-modal,
.user-modal,
.role-modal,
.library-modal,
.knowledge-modal,
.scenario-modal,
.followup-modal,
.integration-modal,
.scheduled-post-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
}

.noura-modal-backdrop,
.modal-backdrop,
.product-modal-backdrop,
.promo-modal-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(5px);
}

.noura-modal-box,
.modal-card,
.product-modal-card,
.promo-modal-card {
  max-height:calc(100vh - 60px) !important;
  margin:30px auto !important;
}

/* =========================================================
   NOURA PORTAL FINAL STICKY HEADER + MODAL STACK FIX
   Purpose:
   - Keep header frozen without hiding modal popups.
   - Stop #content transform/z-index stacking from trapping modals under header.
   - Keep normal page content below header in normal document flow.
   - Fix Knowledge KPI cards without touching global .grid.cols-4.
   ========================================================= */

/* 1) Header: frozen, but lower than modal layers */
.portal-header,
.topbar.portal-header{
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  overflow: hidden !important;
  isolation: auto !important;
}

/* 2) Prevent app.js animated transform from creating a stacking context that traps modals under header */
#content,
.content,
.portal-content,
.content.portal-content{
  transform: none !important;
}

/* 3) Keep page containers normal; do not create a stacking fight with the sticky header */
.portal-home,
.portal-content,
.content.portal-content{
  position: relative !important;
  z-index: auto !important;
}

/* 4) Modal overlays must always be above the sticky header */
.noura-modal-overlay,
.product-rule-modal-overlay,
.product-modal,
.promo-modal,
.automation-modal,
.user-modal,
.role-modal,
.library-modal,
.knowledge-modal,
.scenario-modal,
.followup-modal,
.integration-modal,
.scheduled-post-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
}

.noura-modal-box,
.noura-modal,
.product-rule-modal,
.product-modal-card,
.promo-modal-card,
.automation-modal-card,
.modal-card{
  position: relative !important;
  z-index: 100001 !important;
  max-height: calc(100vh - 56px) !important;
  margin: 28px auto !important;
  overflow: auto !important;
}

.noura-modal-backdrop,
.modal-backdrop,
.product-modal-backdrop,
.product-rule-modal-overlay,
.promo-modal-backdrop,
.automation-modal-backdrop{
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

/* 5) Knowledge menu KPI row: dedicated selector only, no global grid override */
.noura-knowledge-page .knowledge-kpi-grid,
.noura-knowledge-page .noura-knowledge-kpis,
.noura-knowledge-page .grid.cols-4:first-of-type{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

@media (max-width: 1200px){
  .noura-knowledge-page .knowledge-kpi-grid,
  .noura-knowledge-page .noura-knowledge-kpis,
  .noura-knowledge-page .grid.cols-4:first-of-type{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px){
  .noura-knowledge-page .knowledge-kpi-grid,
  .noura-knowledge-page .noura-knowledge-kpis,
  .noura-knowledge-page .grid.cols-4:first-of-type{
    grid-template-columns: 1fr !important;
  }
}
/* Noura Enterprise Portal v2 foundation */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --font-xs:11px;
  --font-sm:12px;
  --font-md:14px;
  --font-lg:16px;
  --font-xl:20px;
  --font-2xl:28px;
  --font-3xl:38px;
  --noura-gold:#b88a37;
  --noura-gold-soft:rgba(184,138,55,.14);
  --neutral-0:#ffffff;
  --neutral-50:#f8fafc;
  --neutral-100:#eef2f7;
  --neutral-800:#172033;
  --neutral-900:#0a1020;
}

.ds-app-shell,
.enterprise-page{
  width:100%;
  max-width:1680px;
  margin:0 auto;
  display:grid;
  gap:var(--space-6);
}

.ds-page-header,
.enterprise-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-5);
  flex-wrap:wrap;
  padding:var(--space-6);
  border:1px solid var(--border);
  border-radius:28px;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.10), transparent 34%),
    linear-gradient(135deg, var(--panel3), var(--panel2));
  box-shadow:var(--shadow-soft);
}

:root[data-theme="light"] .ds-page-header,
:root[data-theme="light"] .enterprise-hero{
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.95), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(250,244,232,.88));
}

.ds-eyebrow,
.enterprise-eyebrow{
  color:var(--noura-gold);
  font-size:var(--font-xs);
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ds-page-header h1,
.enterprise-hero h1{
  margin:var(--space-2) 0 0;
  font-size:clamp(28px,4vw,var(--font-3xl));
  line-height:1.02;
  letter-spacing:-.055em;
}

.ds-page-header p,
.enterprise-hero p{
  margin:var(--space-2) 0 0;
  max-width:820px;
  color:var(--muted);
  font-weight:650;
  line-height:1.6;
}

.ds-data-card,
.enterprise-card,
.portal-card,
.cic-v1-card{
  border-radius:24px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, color-mix(in srgb, var(--panel3) 84%, transparent), color-mix(in srgb, var(--panel2) 88%, transparent));
  box-shadow:var(--shadow-soft);
}

.ds-data-card{padding:var(--space-5)}
.ds-data-card__head{display:flex;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.ds-data-card__head h2{margin:0;font-size:var(--font-xl)}
.ds-data-card__head p{margin:var(--space-1) 0 0;color:var(--muted);line-height:1.5}
.ds-data-card__footer{margin-top:var(--space-4);color:var(--muted);font-size:var(--font-sm)}

.ds-metric-grid,
.enterprise-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}

.ds-metric-card,
.enterprise-metric{
  border:1px solid var(--border);
  border-radius:20px;
  padding:var(--space-4);
  background:rgba(255,255,255,.045);
  min-height:116px;
}

:root[data-theme="light"] .ds-metric-card,
:root[data-theme="light"] .enterprise-metric{background:rgba(255,255,255,.82)}

.ds-metric-card span,.enterprise-metric span{display:block;color:var(--muted);font-size:var(--font-xs);font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.ds-metric-card strong,.enterprise-metric strong{display:block;margin-top:var(--space-2);font-size:30px;letter-spacing:-.045em}
.ds-metric-card small,.enterprise-metric small{display:block;margin-top:var(--space-1);color:var(--muted);line-height:1.45}

.ds-status-badge,
.enterprise-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;border:1px solid var(--border);padding:6px 10px;color:var(--muted);background:rgba(255,255,255,.05);font-size:var(--font-sm);font-weight:850}
.tone-good{color:var(--success)!important}
.tone-warning{color:var(--warning)!important}
.tone-danger{color:var(--danger)!important}
.tone-gold{color:var(--noura-gold)!important}

.ds-filter-bar,.enterprise-filter-bar{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.ds-search-input,.enterprise-command-input{border-radius:16px;min-height:44px;background:rgba(255,255,255,.08)}
.ds-tab-bar{display:flex;gap:var(--space-2);flex-wrap:wrap}
.ds-tab{border:1px solid var(--border);background:rgba(255,255,255,.06);color:var(--text);border-radius:999px;padding:9px 12px;font-weight:850}
.ds-tab.active{background:var(--noura-gold-soft);border-color:rgba(184,138,55,.36)}

.ds-state{border:1px dashed var(--border);border-radius:20px;padding:var(--space-5);color:var(--muted);background:rgba(255,255,255,.04);display:grid;gap:var(--space-1)}
.ds-state strong{color:var(--text)}
.ds-spinner{width:10px;height:10px;border-radius:999px;background:var(--noura-gold);display:inline-block;margin-right:8px}

.ds-detail-panel{border:1px solid var(--border);border-radius:24px;padding:var(--space-5);background:rgba(255,255,255,.045)}
.ds-detail-panel__head{display:flex;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}

.portal-app{background:radial-gradient(circle at top left, rgba(184,138,55,.16), transparent 28%),radial-gradient(circle at top right, rgba(79,140,255,.12), transparent 28%),linear-gradient(180deg, var(--bg), var(--bg2))}
.portal-header,.topbar.portal-header{min-height:76px;align-items:center}
.portal-home-console,.portal-card-grid{max-width:1680px;margin-left:auto;margin-right:auto}
.portal-home-head{border-radius:32px!important}
.portal-card{border-radius:24px!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.portal-card:hover{transform:translateY(-3px);border-color:rgba(184,138,55,.32)}
.portal-card-icon{color:var(--noura-gold);background:var(--noura-gold-soft)}

.cic-v1-page{max-width:1680px;margin:0 auto}
.cic-v1-grid{align-items:start}
.cic-v1-tabs{position:sticky;top:92px;z-index:3;padding:8px;border:1px solid var(--border);border-radius:999px;background:color-mix(in srgb, var(--panel2) 88%, transparent);backdrop-filter:blur(16px)}

@media (max-width:1100px){
  .ds-metric-grid,.enterprise-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:720px){
  .ds-page-header,.enterprise-hero{padding:var(--space-5)}
  .ds-metric-grid,.enterprise-metric-grid{grid-template-columns:1fr}
  .portal-header-actions{width:100%;justify-content:flex-start}
  .cic-v1-tabs{position:static;border-radius:20px}
}

/* Phase 17.1 shell overrides: restore route-aware left sidebar as enterprise navigation */
.portal-hidden-sidebar.enterprise-sidebar-v2,
.enterprise-sidebar-v2{
  display:block!important;
  width:286px;
  flex:0 0 286px;
  border-right:1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel3) 92%, transparent), color-mix(in srgb, var(--panel2) 96%, transparent));
}

.portal-main,
.main.portal-main{
  min-width:0;
  max-width:calc(100vw - 286px);
}

.portal-header,
.topbar.portal-header{
  top:0!important;
  margin:0!important;
  min-height:82px!important;
  border-radius:0!important;
  border-top:none!important;
  border-left:none!important;
  border-right:none!important;
}

.portal-logo-block{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
}

.portal-header .topbar__title{
  font-size:22px!important;
}

.portal-header-actions{
  align-items:center;
}

.portal-header-actions .enterprise-command-input{
  width:min(360px,34vw);
  min-width:220px;
}

.portal-home{
  padding:var(--space-6)!important;
}

.portal-home-head{
  align-items:center;
}

.portal-home-title::after{
  content:"Enterprise Portal v2";
  display:inline-flex;
  margin-left:10px;
  vertical-align:middle;
  border:1px solid rgba(184,138,55,.32);
  border-radius:999px;
  padding:5px 9px;
  color:var(--noura-gold);
  background:var(--noura-gold-soft);
  font-size:var(--font-xs);
  letter-spacing:.08em;
}

.dashboard-v2-summary{
  margin-bottom:var(--space-4);
}

.dashboard-page.enhanced{
  max-width:1680px;
  margin:0 auto;
}

.cic-v1-hero,
.cic-v1-demo-banner,
.cic-v1-card{
  border-color:rgba(184,138,55,.18)!important;
}

@media (max-width:980px){
  .portal-hidden-sidebar.enterprise-sidebar-v2,
  .enterprise-sidebar-v2{
    display:block!important;
    position:fixed;
    transform:translateX(-102%);
  }

  .enterprise-sidebar-v2.open{
    transform:translateX(0);
  }

  .portal-main,
  .main.portal-main{
    max-width:none;
  }

  .portal-header-actions .enterprise-command-input{
    display:none;
  }
}

/* Phase 17.2 dark enterprise redesign
   Premium AI/CRM SaaS theme. UI-only override; route/API contracts stay untouched. */
:root,
:root[data-theme="light"],
body {
  --portal-dark-bg:#050814;
  --portal-dark-bg-2:#081124;
  --portal-dark-panel:rgba(10,17,35,.78);
  --portal-dark-panel-strong:rgba(13,22,46,.94);
  --portal-dark-panel-soft:rgba(17,29,58,.62);
  --portal-dark-line:rgba(140,151,255,.18);
  --portal-dark-line-strong:rgba(142,104,255,.42);
  --portal-purple:#8b5cf6;
  --portal-purple-2:#c084fc;
  --portal-cyan:#22d3ee;
  --portal-blue:#60a5fa;
  --portal-green:#34d399;
  --portal-gold:#f5c25b;
  --portal-red:#fb7185;
  --portal-text:#f8fbff;
  --portal-text-soft:#d8e1ff;
  --portal-muted:#94a3c7;
  --portal-muted-2:#64748b;
  --portal-shadow:0 28px 90px rgba(0,0,0,.56);
  --portal-glow-purple:0 0 0 1px rgba(139,92,246,.25), 0 0 34px rgba(139,92,246,.16);
  --portal-glow-cyan:0 0 0 1px rgba(34,211,238,.18), 0 0 34px rgba(34,211,238,.12);
  --bg:var(--portal-dark-bg)!important;
  --surface:var(--portal-dark-bg-2)!important;
  --card:var(--portal-dark-panel)!important;
  --text:var(--portal-text)!important;
  --muted:var(--portal-muted)!important;
  --border:var(--portal-dark-line)!important;
  --primary:var(--portal-purple)!important;
  --primary-2:var(--portal-cyan)!important;
  --success:var(--portal-green)!important;
  --warning:var(--portal-gold)!important;
  --danger:var(--portal-red)!important;
  --noura-gold:var(--portal-gold)!important;
  --noura-gold-soft:rgba(245,194,91,.14)!important;
  --shadow:var(--portal-shadow)!important;
}

html,
body {
  background:
    radial-gradient(circle at 14% 10%, rgba(139,92,246,.22), transparent 32%),
    radial-gradient(circle at 88% 6%, rgba(34,211,238,.16), transparent 34%),
    radial-gradient(circle at 72% 88%, rgba(245,194,91,.10), transparent 30%),
    linear-gradient(135deg,#03050d 0%,#071124 43%,#050814 100%)!important;
  color:var(--portal-text)!important;
  overflow-x:hidden;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.75),transparent 85%);
}

.app.portal-app {
  background:transparent!important;
}

.main.portal-main,
.portal-content,
.content {
  min-width:0;
  background:transparent!important;
}

.portal-main {
  padding-left:0!important;
}

.enterprise-sidebar-v2 {
  background:
    linear-gradient(180deg,rgba(8,14,30,.96),rgba(6,10,22,.98)),
    radial-gradient(circle at 20% 0%,rgba(139,92,246,.24),transparent 38%)!important;
  border-right:1px solid rgba(142,104,255,.22)!important;
  box-shadow:22px 0 70px rgba(0,0,0,.42), inset -1px 0 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

.enterprise-sidebar-v2 .brand,
.noura-brand {
  border-bottom:1px solid rgba(148,163,184,.12)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(139,92,246,.08))!important;
}

.enterprise-sidebar-v2 .brand__logo {
  background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(34,211,238,.12))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 16px 38px rgba(139,92,246,.22)!important;
}

.enterprise-sidebar-v2 .brand__name,
.enterprise-sidebar-v2 .nav__title {
  color:var(--portal-text)!important;
}

.enterprise-sidebar-v2 .brand__sub {
  color:var(--portal-muted)!important;
}

.enterprise-sidebar-v2 .nav__sectionToggle {
  color:var(--portal-muted)!important;
  background:transparent!important;
}

.enterprise-sidebar-v2 .nav__sectionToggle:hover {
  color:var(--portal-text)!important;
}

.enterprise-sidebar-v2 .nav__subgroup {
  margin:14px 12px 7px;
  color:rgba(216,225,255,.58);
  font-size:10px;
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.enterprise-sidebar-v2 .nav__item {
  color:rgba(216,225,255,.76)!important;
  border:1px solid transparent!important;
  border-radius:14px!important;
  background:transparent!important;
  position:relative;
}

.enterprise-sidebar-v2 .nav__item:hover {
  color:var(--portal-text)!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(148,163,184,.15)!important;
}

.enterprise-sidebar-v2 .nav__item.active,
.enterprise-sidebar-v2 .nav__item[aria-current="page"] {
  color:#fff!important;
  background:linear-gradient(135deg,rgba(139,92,246,.88),rgba(59,130,246,.58))!important;
  border-color:rgba(192,132,252,.58)!important;
  box-shadow:0 14px 42px rgba(139,92,246,.28), inset 0 1px 0 rgba(255,255,255,.20)!important;
}

.enterprise-sidebar-v2 .nav__item[data-route="customer-intelligence"]::after {
  content:"NEW";
  margin-left:auto;
  border-radius:999px;
  padding:2px 6px;
  color:#06101d;
  background:linear-gradient(135deg,var(--portal-cyan),var(--portal-green));
  font-size:9px;
  font-weight:950;
  letter-spacing:.08em;
}

.enterprise-sidebar-v2 .nav__item[data-route="conversations"]::after {
  content:"12";
  margin-left:auto;
  border-radius:999px;
  padding:2px 7px;
  color:#fff;
  background:rgba(139,92,246,.58);
  font-size:10px;
  font-weight:900;
}

.enterprise-sidebar-v2 .sidebarFooter {
  margin:14px;
  padding:14px!important;
  border:1px solid rgba(148,163,184,.16);
  border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(139,92,246,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}

.enterprise-sidebar-v2 .sidebarFooter::before {
  content:"Noura operator\A Internal workspace";
  display:block;
  white-space:pre-line;
  margin-bottom:10px;
  color:var(--portal-text-soft);
  font-size:12px;
  font-weight:850;
  line-height:1.4;
}

.portal-header {
  margin:16px 22px 0!important;
  border:1px solid rgba(148,163,184,.16)!important;
  border-radius:24px!important;
  background:linear-gradient(135deg,rgba(11,18,38,.82),rgba(8,13,28,.72))!important;
  box-shadow:0 22px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(24px)!important;
  -webkit-backdrop-filter:blur(24px)!important;
}

.portal-header .topbar__title {
  color:var(--portal-text)!important;
}

.portal-header .topbar__hint {
  color:var(--portal-muted)!important;
}

.enterprise-command-input,
.portal-menu-search,
.cic-v1-filters input,
.cic-v1-filters select,
.dash-filter-field select,
select,
input[type="search"],
input[type="text"] {
  color:var(--portal-text)!important;
  background:rgba(5,10,22,.78)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(139,92,246,.05)!important;
}

.enterprise-command-input::placeholder,
.portal-menu-search::placeholder,
.cic-v1-filters input::placeholder {
  color:rgba(148,163,184,.76)!important;
}

.portal-status-dot,
.portal-icon-btn,
.portal-account-btn,
.portal-ai-copilot-btn {
  border:1px solid rgba(148,163,184,.18)!important;
  background:rgba(255,255,255,.055)!important;
  color:var(--portal-text-soft)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}

.portal-status-dot {
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  padding:9px 12px;
  font-size:12px;
  font-weight:900;
}

.portal-status-dot i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--portal-green);
  box-shadow:0 0 0 5px rgba(52,211,153,.14),0 0 18px rgba(52,211,153,.58);
}

.portal-icon-btn {
  width:38px!important;
  height:38px!important;
  border-radius:14px!important;
}

.portal-ai-copilot-btn {
  background:linear-gradient(135deg,rgba(139,92,246,.92),rgba(34,211,238,.58))!important;
  color:#fff!important;
  border-color:rgba(192,132,252,.48)!important;
  box-shadow:0 12px 34px rgba(139,92,246,.26)!important;
}

.portal-home {
  padding:22px!important;
}

.portal-home-head,
.portal-card,
.portal-kpi-card,
.card,
.ds-card,
.ds-page-header,
.dash-card,
.dash-toolbar,
.dash-status,
.cic-v1-card,
.cic-v1-hero,
.cic-v1-demo-banner {
  color:var(--portal-text)!important;
  border:1px solid rgba(148,163,184,.16)!important;
  background:
    linear-gradient(135deg,rgba(13,22,46,.82),rgba(8,14,31,.64)),
    radial-gradient(circle at 0% 0%,rgba(139,92,246,.12),transparent 46%)!important;
  box-shadow:var(--portal-shadow), inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.portal-home-head {
  position:relative;
  overflow:hidden;
  min-height:210px;
}

.portal-home-head::after {
  content:"";
  position:absolute;
  right:-90px;
  top:-100px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.30),rgba(34,211,238,.12) 38%,transparent 70%);
  filter:blur(2px);
  pointer-events:none;
}

.portal-home-eyebrow,
.dashboard-v2-eyebrow {
  display:inline-flex;
  align-items:center;
  width:max-content;
  border:1px solid rgba(34,211,238,.22);
  border-radius:999px;
  padding:6px 10px;
  color:var(--portal-cyan);
  background:rgba(34,211,238,.08);
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.portal-home-title {
  margin:12px 0 0!important;
  max-width:780px;
  color:var(--portal-text)!important;
  text-shadow:0 0 34px rgba(139,92,246,.18);
}

.portal-home-title::after {
  background:rgba(139,92,246,.18)!important;
  border-color:rgba(192,132,252,.34)!important;
  color:var(--portal-purple-2)!important;
}

.portal-home-subtitle,
.portal-kpi-sub,
.portal-card p,
.muted,
.cic-v1-muted,
.dash-mini-note {
  color:var(--portal-muted)!important;
}

.portal-kpi-card,
.portal-card {
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.portal-kpi-card:hover,
.portal-card:hover {
  transform:translateY(-2px);
  border-color:rgba(139,92,246,.34)!important;
  box-shadow:var(--portal-shadow),var(--portal-glow-purple)!important;
}

.portal-kpi-label,
.portal-card-icon {
  color:var(--portal-cyan)!important;
}

.portal-kpi-value,
.portal-card h2,
.dash-card h2,
.cic-v1-card h2,
.cic-v1-hero h1 {
  color:var(--portal-text)!important;
}

.btn,
.pill,
.dash-chip,
.cic-v1-badge,
.cic-v1-chip,
.cic-v1-tab,
.status-badge,
.ds-status-badge {
  border-color:rgba(148,163,184,.18)!important;
  background:rgba(255,255,255,.06)!important;
  color:var(--portal-text-soft)!important;
}

.btn.primary,
.dash-chip.active,
.cic-v1-tab.active,
.ds-status-badge.good,
.ds-status-badge.gold {
  color:#fff!important;
  border-color:rgba(192,132,252,.42)!important;
  background:linear-gradient(135deg,rgba(139,92,246,.92),rgba(59,130,246,.62))!important;
  box-shadow:0 12px 34px rgba(139,92,246,.22)!important;
}

.dashboard-page.enhanced {
  max-width:1720px!important;
}

.dashboard-v2-dark-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

.dashboard-v2-glow-card {
  position:relative;
  overflow:hidden;
  min-height:168px;
  padding:18px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(15,23,48,.92),rgba(8,13,29,.74)),
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.08),transparent 34%);
  box-shadow:var(--portal-shadow), inset 0 1px 0 rgba(255,255,255,.08);
}

.dashboard-v2-glow-card::after {
  content:"";
  position:absolute;
  inset:auto -70px -90px auto;
  width:190px;
  height:190px;
  border-radius:50%;
  background:radial-gradient(circle,var(--card-accent,rgba(139,92,246,.34)),transparent 68%);
  opacity:.88;
}

.dashboard-v2-glow-card span,
.dashboard-v2-widget span {
  color:var(--portal-muted);
  font-size:12px;
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.dashboard-v2-glow-card strong {
  display:block;
  margin-top:12px;
  color:var(--portal-text);
  font-size:clamp(30px,3vw,48px);
  letter-spacing:-.06em;
  line-height:1;
}

.dashboard-v2-glow-card small,
.dashboard-v2-widget p {
  display:block;
  margin-top:10px;
  color:var(--portal-muted);
  line-height:1.45;
  font-weight:700;
}

.dashboard-v2-card-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  color:#fff;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  font-weight:950;
}

.dashboard-v2-glow-card.accent-cyan { --card-accent:rgba(34,211,238,.36); }
.dashboard-v2-glow-card.accent-purple { --card-accent:rgba(139,92,246,.40); }
.dashboard-v2-glow-card.accent-green { --card-accent:rgba(52,211,153,.34); }
.dashboard-v2-glow-card.accent-gold { --card-accent:rgba(245,194,91,.34); }
.dashboard-v2-glow-card.accent-blue { --card-accent:rgba(96,165,250,.34); }

.dashboard-v2-widget-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.dashboard-v2-widget {
  border:1px solid rgba(148,163,184,.16);
  border-radius:26px;
  padding:18px;
  background:linear-gradient(145deg,rgba(13,22,46,.82),rgba(9,15,32,.70));
  box-shadow:var(--portal-shadow), inset 0 1px 0 rgba(255,255,255,.07);
}

.dashboard-v2-widget.wide {
  grid-column:span 2;
}

.dashboard-v2-widget-head {
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}

.dashboard-v2-widget h3 {
  margin:10px 0 0;
  color:var(--portal-text);
  font-size:18px;
  letter-spacing:-.03em;
}

.dashboard-v2-pill {
  display:inline-flex;
  border:1px solid rgba(52,211,153,.22);
  border-radius:999px;
  padding:6px 9px;
  color:var(--portal-green);
  background:rgba(52,211,153,.08);
  font-size:11px;
  font-weight:950;
}

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

.dashboard-v2-orbit div {
  padding:14px;
  border:1px solid rgba(148,163,184,.14);
  border-radius:18px;
  background:rgba(255,255,255,.045);
}

.dashboard-v2-orbit strong {
  display:block;
  color:var(--portal-text);
  font-size:24px;
  letter-spacing:-.05em;
}

.dashboard-v2-orbit span {
  margin-top:4px;
  display:block;
  color:var(--portal-muted);
  font-size:11px;
  text-transform:none;
  letter-spacing:0;
}

.dash-line,
.dash-dot {
  color:var(--portal-cyan)!important;
  stroke:var(--portal-cyan)!important;
}

.dash-area {
  color:var(--portal-cyan)!important;
}

.dash-chart-grid {
  stroke:rgba(148,163,184,.14)!important;
}

.dash-chart-label,
.dash-heat-head,
.dash-heat-hour {
  fill:var(--portal-muted)!important;
  color:var(--portal-muted)!important;
}

.dash-heat-cell {
  background:rgba(34,211,238,calc(.06 + var(--i) * .36))!important;
  border-color:rgba(34,211,238,.14)!important;
}

.cic-v1-page {
  max-width:1720px;
  margin:0 auto;
}

.cic-v1-hero {
  background:
    radial-gradient(circle at 88% 12%,rgba(34,211,238,.16),transparent 30%),
    linear-gradient(135deg,rgba(13,22,46,.92),rgba(9,15,32,.72))!important;
}

.cic-v1-demo-banner {
  color:var(--portal-cyan)!important;
  background:linear-gradient(135deg,rgba(34,211,238,.10),rgba(139,92,246,.10))!important;
}

.cic-v1-summary,
.cic-v1-360-grid,
.cic-v1-insights,
.cic-v1-copilot-grid {
  gap:12px!important;
}

.cic-v1-kpi,
.cic-v1-customer,
.cic-v1-360-section,
.cic-v1-insight,
.cic-v1-action,
.cic-v1-timeline-item,
.cic-v1-source-card,
.cic-v1-score-card {
  border:1px solid rgba(148,163,184,.15)!important;
  background:linear-gradient(145deg,rgba(15,23,48,.72),rgba(7,12,26,.60))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  color:var(--portal-text)!important;
}

.cic-v1-customer.active,
.cic-v1-customer:hover {
  border-color:rgba(139,92,246,.42)!important;
  box-shadow:var(--portal-glow-purple)!important;
}

.cic-v1-table,
.cic-v1-table th,
.cic-v1-table td {
  border-color:rgba(148,163,184,.13)!important;
}

.cic-v1-table th {
  color:var(--portal-muted)!important;
  background:rgba(255,255,255,.035)!important;
}

.cic-v1-table td {
  color:var(--portal-text-soft)!important;
}

.cic-v1-state,
.notice,
.error,
.empty-state,
.loading-state {
  border-color:rgba(148,163,184,.16)!important;
  background:rgba(10,17,35,.68)!important;
  color:var(--portal-text-soft)!important;
}

@media (max-width:1440px) {
  .dashboard-v2-dark-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .dashboard-v2-widget-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:1100px) {
  .portal-header {
    margin:10px!important;
  }

  .portal-status-dot,
  .portal-account-btn {
    display:none!important;
  }

  .dashboard-v2-dark-grid,
  .dashboard-v2-widget-grid {
    grid-template-columns:1fr 1fr;
  }

  .dashboard-v2-widget.wide {
    grid-column:span 2;
  }
}

@media (max-width:720px) {
  .portal-home,
  .content,
  .portal-content {
    padding:12px!important;
  }

  .dashboard-v2-dark-grid,
  .dashboard-v2-widget-grid,
  .dashboard-v2-orbit {
    grid-template-columns:1fr;
  }

  .dashboard-v2-widget.wide {
    grid-column:auto;
  }

  .portal-icon-btn,
  .portal-ai-copilot-btn {
    display:none!important;
  }
}

/* Phase 17.3 full premium dark SaaS dashboard redesign
   Final cascade layer: dark defaults must win over all older beige/cream/gold portal rules.
   Values updated (Claude, Enterprise UI Overhaul Phase 1) to the exact palette approved by
   the user: bg #0B1020, panels #111827, cards #141C2F, purple/blue accent, emerald success,
   amber warning, rose danger, very subtle borders. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"],
body,
.portal-app {
  color-scheme:dark;
  --phase17-dark-void:#0b1020;
  --phase17-dark-navy:#0f1526;
  --phase17-dark-navy-2:#111827;
  --phase17-dark-card:#111827;
  --phase17-dark-card-2:#141c2f;
  --phase17-dark-card-3:#141c2f;
  --phase17-dark-border:rgba(255,255,255,.07);
  --phase17-dark-border-strong:rgba(139,92,246,.40);
  --phase17-text:#f1f5f9;
  --phase17-text-soft:#dbe6ff;
  --phase17-muted:#94a3b8;
  --phase17-muted-2:#596987;
  --phase17-purple:#7c5cff;
  --phase17-purple-2:#a855f7;
  --phase17-cyan:#22d3ee;
  --phase17-blue:#3b82f6;
  --phase17-green:#10b981;
  --phase17-gold:#f59e0b;
  --phase17-pink:#ec4899;
  --phase17-red:#f43f5e;
  --phase17-shadow:0 24px 80px rgba(0,0,0,.52);
  --phase17-glow-purple:0 0 0 1px rgba(124,92,255,.24),0 18px 60px rgba(124,92,255,.18);
  --bg:var(--phase17-dark-void)!important;
  --surface:var(--phase17-dark-navy)!important;
  --panel:var(--phase17-dark-card)!important;
  --panel2:var(--phase17-dark-card-2)!important;
  --panel3:var(--phase17-dark-card-2)!important;
  --card:var(--phase17-dark-card)!important;
  --text:var(--phase17-text)!important;
  --muted:var(--phase17-muted)!important;
  --border:var(--phase17-dark-border)!important;
  --primary:var(--phase17-purple)!important;
  --primary-2:var(--phase17-cyan)!important;
  --success:var(--phase17-green)!important;
  --warning:var(--phase17-gold)!important;
  --danger:var(--phase17-red)!important;
  --accent:var(--phase17-purple)!important;
  --accent2:var(--phase17-cyan)!important;
  --accent3:var(--phase17-blue)!important;
  --noura-gold:var(--phase17-gold)!important;
  --noura-gold-soft:rgba(245,158,11,.12)!important;
  --enterprise-canvas:var(--phase17-dark-void)!important;
  --enterprise-canvas-soft:var(--phase17-dark-navy)!important;
  --enterprise-header:linear-gradient(135deg,rgba(15,21,38,.94),rgba(11,16,32,.9))!important;
  --enterprise-border:var(--phase17-dark-border)!important;
  --enterprise-text:var(--phase17-text)!important;
  --enterprise-muted:var(--phase17-muted)!important;
  --noura-gradient-surface:var(--phase17-dark-card)!important;
  --noura-gradient-surface-2:linear-gradient(180deg,rgba(20,28,47,.92),rgba(11,16,32,.84))!important;
  --shadow:var(--phase17-shadow)!important;
}

html,
body,
.app.portal-app,
.main.portal-main,
.portal-main,
.content,
.portal-content {
  background:
    radial-gradient(circle at 55% 4%,rgba(34,211,238,.10),transparent 28%),
    radial-gradient(circle at 96% 24%,rgba(124,92,255,.12),transparent 32%),
    radial-gradient(circle at 0% 92%,rgba(124,92,255,.16),transparent 26%),
    linear-gradient(135deg,var(--phase17-dark-void) 0%,var(--phase17-dark-navy) 42%,var(--phase17-dark-void) 100%)!important;
  color:var(--phase17-text)!important;
}

body,
.portal-main {
  overflow-x:hidden!important;
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:48px 48px;
  opacity:.72;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.82),transparent 78%);
}

.enterprise-sidebar-v2,
.sidebar.noura-sidebar.enterprise-sidebar-v2 {
  width:218px!important;
  background:
    radial-gradient(circle at 100% 100%,rgba(139,92,246,.28),transparent 34%),
    linear-gradient(180deg,rgba(4,10,23,.98),rgba(3,7,17,.99))!important;
  border-right:1px solid rgba(111,132,255,.18)!important;
  box-shadow:18px 0 70px rgba(0,0,0,.46),inset -1px 0 0 rgba(255,255,255,.035)!important;
}

.enterprise-sidebar-v2 .brand {
  padding:20px 14px 14px!important;
  background:transparent!important;
  border-bottom:1px solid rgba(111,132,255,.14)!important;
}

.enterprise-sidebar-v2 .brand__logo {
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  background:transparent!important;
  box-shadow:none!important;
}

.enterprise-sidebar-v2 .brand__name {
  color:var(--phase17-gold)!important;
  font-size:18px!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

.enterprise-sidebar-v2 .brand__sub {
  color:var(--phase17-gold)!important;
  font-size:9px!important;
  letter-spacing:.24em!important;
  text-transform:uppercase!important;
}

.portal-workspace-card {
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 12px 14px;
  padding:10px;
  border:1px solid rgba(139,92,246,.22);
  border-radius:15px;
  color:var(--phase17-text);
  background:linear-gradient(135deg,rgba(17,24,44,.86),rgba(13,19,36,.72))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.portal-workspace-mark {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--phase17-gold);
  background:rgba(251,191,36,.12);
}

.portal-workspace-card strong,
.portal-workspace-card span {
  display:block;
}

.portal-workspace-card strong {
  font-size:12px;
  text-transform:uppercase;
}

.portal-workspace-card span {
  color:var(--phase17-muted);
  font-size:10px;
}

.portal-workspace-caret {
  margin-left:auto;
  color:var(--phase17-purple)!important;
}

.enterprise-sidebar-v2 .nav {
  padding:0 10px 10px!important;
}

.enterprise-sidebar-v2 .nav__sectionToggle {
  padding:13px 3px 7px!important;
  color:var(--phase17-muted-2)!important;
  background:transparent!important;
  border:0!important;
  pointer-events:none;
}

.enterprise-sidebar-v2 .nav__title,
.enterprise-sidebar-v2 .nav__subgroup {
  color:var(--phase17-muted-2)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
  text-transform:uppercase!important;
}

.enterprise-sidebar-v2 .nav__subgroup {
  margin:13px 3px 7px!important;
}

.enterprise-sidebar-v2 .nav__item {
  min-height:34px!important;
  margin:2px 0!important;
  padding:8px 10px!important;
  color:#c8d4ef!important;
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  box-shadow:none!important;
}

.enterprise-sidebar-v2 .nav__item:hover {
  color:#fff!important;
  background:rgba(255,255,255,.055)!important;
  border-color:rgba(111,132,255,.14)!important;
}

.enterprise-sidebar-v2 .nav__item.active,
.enterprise-sidebar-v2 .nav__item[aria-current="page"],
.enterprise-sidebar-v2 .nav__item[href="#/portal"] {
  color:#fff!important;
  background:linear-gradient(135deg,rgba(139,92,246,.95),rgba(88,28,135,.82))!important;
  border-color:rgba(168,85,247,.55)!important;
  box-shadow:0 12px 34px rgba(139,92,246,.28)!important;
}

.enterprise-sidebar-v2 .nav__item[data-route="customer-intelligence"]::after {
  content:"NEW"!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--phase17-purple),var(--phase17-purple-2))!important;
}

.enterprise-sidebar-v2 .nav__item[data-route="conversations"]::after {
  content:"236"!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--phase17-purple),#6d28d9)!important;
}

.enterprise-sidebar-v2 .sidebarFooter {
  margin:12px!important;
  padding:13px!important;
  border:1px solid rgba(139,92,246,.38)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 100% 100%,rgba(139,92,246,.45),transparent 46%),
    linear-gradient(135deg,rgba(8,18,38,.88),rgba(31,20,70,.86))!important;
  box-shadow:0 18px 42px rgba(139,92,246,.22),inset 0 1px 0 rgba(255,255,255,.10)!important;
}

.enterprise-sidebar-v2 .sidebarFooter::before {
  content:"Noura Pro\A All systems operational"!important;
  color:var(--phase17-text)!important;
}

.enterprise-sidebar-v2 .toggle {
  display:none!important;
}

.portal-header {
  min-height:64px!important;
  margin:0!important;
  padding:12px 22px!important;
  border:0!important;
  border-bottom:1px solid rgba(111,132,255,.12)!important;
  border-radius:0!important;
  background:rgba(2,6,16,.58)!important;
  box-shadow:none!important;
}

.portal-logo-block,
.portal-header-left .noura-topbar-left {
  display:none!important;
}

.portal-header-actions {
  width:100%;
  justify-content:flex-end!important;
  gap:12px!important;
}

.enterprise-command-input {
  margin-right:auto!important;
  width:min(420px,42vw)!important;
  height:38px!important;
  border-radius:16px!important;
  background:rgba(9,17,32,.88)!important;
  border:1px solid rgba(111,132,255,.18)!important;
}

.portal-status-dot,
.portal-date-pill,
.portal-icon-btn,
.portal-account-btn,
.portal-ai-copilot-btn,
.portal-home-btn,
#healthPill,
#userPill {
  height:36px!important;
  color:var(--phase17-text-soft)!important;
  background:rgba(9,17,32,.74)!important;
  border:1px solid rgba(111,132,255,.16)!important;
  border-radius:999px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

.portal-icon-btn {
  width:36px!important;
  color:var(--phase17-muted)!important;
}

.portal-date-pill {
  display:inline-flex;
  align-items:center;
  padding:0 13px;
  font-size:12px;
  font-weight:800;
}

.portal-ai-copilot-btn {
  background:linear-gradient(135deg,var(--phase17-purple),#6d28d9)!important;
  border-color:rgba(168,85,247,.46)!important;
  color:#fff!important;
  box-shadow:0 14px 34px rgba(139,92,246,.28)!important;
}

.portal-home {
  padding:26px 34px 34px!important;
}

.portal-home-console,
.portal-premium-dashboard,
.dashboard-page.enhanced,
.cic-v1-page {
  max-width:1560px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.portal-home-head {
  min-height:auto!important;
  padding:0!important;
  margin:0 0 18px!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

.portal-home-head::after,
.portal-home-title::after,
.portal-home-eyebrow,
.portal-home-subtitle,
.portal-search-wrap,
.portal-kpi-grid {
  display:none!important;
}

.portal-greeting {
  display:block!important;
  margin:0 0 7px;
  color:var(--phase17-muted);
  font-size:17px;
}

.portal-home-title {
  margin:0!important;
  max-width:900px;
  color:var(--phase17-text)!important;
  font-size:clamp(28px,3.1vw,40px)!important;
  line-height:1.12!important;
  letter-spacing:-.055em!important;
}

.portal-premium-dashboard {
  display:grid;
  gap:20px;
}

.portal-premium-kpis {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}

.portal-premium-kpi,
.portal-premium-panel,
.dashboard-v2-glow-card,
.dashboard-v2-widget,
.dash-card,
.dash-toolbar,
.dash-status,
.card,
.ds-card,
.cic-v1-card,
.cic-v1-hero,
.cic-v1-demo-banner,
.notice,
.empty-state,
.loading-state,
.error,
.modal,
.noura-modal,
table.table,
.cic-v1-table {
  color:var(--phase17-text)!important;
  background:
    linear-gradient(180deg,rgba(9,19,38,.86),rgba(5,11,24,.78)),
    radial-gradient(circle at 0 0,rgba(139,92,246,.10),transparent 38%)!important;
  border:1px solid rgba(111,132,255,.16)!important;
  box-shadow:var(--phase17-shadow),inset 0 1px 0 rgba(255,255,255,.06)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
}

.portal-premium-kpi {
  position:relative;
  overflow:hidden;
  min-height:156px;
  padding:19px;
  border-radius:15px;
}

.portal-premium-kpi::after {
  content:"";
  position:absolute;
  inset:auto -60px -70px auto;
  width:160px;
  height:160px;
  border-radius:999px;
  background:radial-gradient(circle,var(--kpi-accent),transparent 66%);
  opacity:.58;
}

.portal-premium-kpi.accent-purple { --kpi-accent:rgba(139,92,246,.52); }
.portal-premium-kpi.accent-cyan { --kpi-accent:rgba(34,211,238,.48); }
.portal-premium-kpi.accent-green { --kpi-accent:rgba(34,197,94,.42); }
.portal-premium-kpi.accent-gold { --kpi-accent:rgba(251,191,36,.45); }
.portal-premium-kpi.accent-pink { --kpi-accent:rgba(236,72,153,.45); }

.portal-premium-icon {
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  color:#fff;
  background:linear-gradient(135deg,var(--kpi-accent),rgba(255,255,255,.05));
  box-shadow:0 12px 30px var(--kpi-accent);
  font-weight:950;
}

.portal-premium-kpi span,
.portal-premium-panel span,
.portal-panel-pill,
.portal-customer-list small,
.portal-channel-row em {
  color:var(--phase17-muted)!important;
}

.portal-premium-kpi strong {
  display:block;
  color:var(--phase17-text);
  font-size:30px;
  line-height:1;
  letter-spacing:-.05em;
}

.portal-premium-kpi em {
  display:block;
  margin-top:8px;
  color:var(--phase17-green);
  font-size:12px;
  font-style:normal;
  font-weight:850;
}

.portal-sparkline {
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  height:26px;
  background:
    linear-gradient(135deg,transparent 0 8%,var(--kpi-accent) 8% 10%,transparent 10% 20%,var(--kpi-accent) 20% 22%,transparent 22% 33%,var(--kpi-accent) 33% 35%,transparent 35% 45%,var(--kpi-accent) 45% 47%,transparent 47% 58%,var(--kpi-accent) 58% 60%,transparent 60% 73%,var(--kpi-accent) 73% 75%,transparent 75%);
  clip-path:polygon(0 74%,10% 55%,19% 68%,29% 42%,40% 62%,50% 34%,61% 48%,72% 25%,84% 46%,100% 18%,100% 100%,0 100%);
  opacity:.95;
}

.portal-dashboard-layout {
  display:grid;
  grid-template-columns:2.05fr 1.25fr 1.25fr;
  gap:16px;
}

.portal-premium-panel {
  border-radius:15px;
  padding:18px;
}

.portal-ci-overview,
.portal-trend-panel {
  grid-column:span 2;
}

.portal-panel-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:15px;
}

.portal-panel-head h2 {
  margin:0;
  color:var(--phase17-text);
  font-size:16px;
  letter-spacing:-.025em;
}

.portal-panel-head a,
.portal-panel-pill {
  color:var(--phase17-purple-2)!important;
  text-decoration:none;
  font-size:12px;
  font-weight:850;
}

.portal-panel-pill {
  padding:7px 10px;
  border:1px solid rgba(111,132,255,.16);
  border-radius:10px;
  background:rgba(5,11,24,.52);
}

.portal-ci-body {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:22px;
  align-items:center;
}

.portal-ai-ring {
  width:178px;
  height:178px;
  display:grid;
  place-items:center;
  align-content:center;
  margin:auto;
  border-radius:50%;
  background:
    radial-gradient(circle at center,#071123 0 52%,transparent 53%),
    conic-gradient(var(--phase17-gold) 0 22%,var(--phase17-purple) 22% 74%,var(--phase17-pink) 74% 88%,rgba(111,132,255,.16) 88%);
  box-shadow:0 0 52px rgba(139,92,246,.28);
}

.portal-ai-ring strong {
  color:#fff;
  font-size:50px;
  letter-spacing:-.08em;
}

.portal-ai-ring span,
.portal-ai-ring em {
  font-size:12px;
  font-style:normal;
  font-weight:850;
}

.portal-ai-ring em {
  color:var(--phase17-green);
}

.portal-ci-stats {
  display:grid;
  gap:10px;
}

.portal-ci-stats div,
.portal-copilot-card,
.portal-health-panel div,
.portal-channel-row {
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(12,24,45,.72);
  border:1px solid rgba(111,132,255,.10);
}

.portal-ci-stats strong,
.portal-health-panel strong,
.portal-channel-row strong {
  color:var(--phase17-text);
}

.portal-ci-stats em,
.portal-data-health em,
.portal-channel-row em {
  color:var(--phase17-green);
  font-style:normal;
  font-weight:850;
}

.portal-ci-stats em.negative,
.portal-channel-row em.negative {
  color:var(--phase17-red);
}

.portal-data-health {
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:12px;
  align-items:center;
  margin-top:17px;
}

.portal-data-health i,
.portal-channel-row i {
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(111,132,255,.12);
}

.portal-data-health b,
.portal-channel-row b {
  display:block;
  height:100%;
  width:78%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--phase17-green),#86efac);
}

.portal-customer-list {
  display:grid;
  gap:10px;
}

.portal-customer-list div {
  display:grid;
  grid-template-columns:34px 1fr auto auto;
  gap:9px;
  align-items:center;
}

.portal-customer-list span {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff!important;
  background:linear-gradient(135deg,#f59e0b,#8b5cf6);
  font-size:11px;
  font-weight:950;
}

.portal-customer-list strong {
  display:block;
  color:#fff;
  font-size:13px;
}

.portal-customer-list em {
  display:block;
  color:var(--phase17-muted);
  font-size:11px;
  font-style:normal;
}

.portal-customer-list b {
  padding:5px 9px;
  border-radius:8px;
  color:#fff;
  background:rgba(139,92,246,.55);
  font-size:11px;
}

.portal-customer-list b.medium {
  background:rgba(251,191,36,.42);
}

.portal-copilot-panel {
  grid-row:span 2;
}

.portal-copilot-card {
  grid-template-columns:38px 1fr;
  align-items:start;
  margin-bottom:11px;
}

.portal-copilot-card span {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff!important;
  background:linear-gradient(135deg,var(--phase17-purple),#6d28d9);
}

.portal-copilot-card.gold span {
  background:linear-gradient(135deg,var(--phase17-gold),#d97706);
}

.portal-copilot-card strong,
.portal-copilot-card p,
.portal-copilot-card em {
  grid-column:2;
  margin:0;
}

.portal-copilot-card strong {
  color:#fff;
  font-size:13px;
}

.portal-copilot-card p {
  color:var(--phase17-muted);
  font-size:12px;
  line-height:1.45;
}

.portal-copilot-card em {
  width:max-content;
  margin-top:8px;
  padding:7px 11px;
  border-radius:9px;
  color:#fff;
  background:linear-gradient(135deg,var(--phase17-purple),#6d28d9);
  font-size:11px;
  font-style:normal;
  font-weight:850;
}

.portal-trend-chart {
  position:relative;
  height:210px;
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(139,92,246,.07),rgba(139,92,246,.22)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 42px);
  overflow:hidden;
}

.portal-trend-chart::before {
  content:"";
  position:absolute;
  inset:20px 20px 36px;
  background:linear-gradient(135deg,transparent 0 8%,#a855f7 8% 9%,transparent 9% 18%,#a855f7 18% 19%,transparent 19% 31%,#a855f7 31% 32%,transparent 32% 46%,#a855f7 46% 47%,transparent 47% 61%,#a855f7 61% 62%,transparent 62% 78%,#a855f7 78% 79%,transparent 79%);
  clip-path:polygon(0 72%,10% 45%,20% 20%,30% 58%,40% 44%,50% 15%,60% 32%,70% 60%,80% 38%,90% 50%,100% 35%,100% 100%,0 100%);
  filter:drop-shadow(0 0 16px rgba(168,85,247,.55));
}

.portal-trend-chart span {
  display:none;
}

.portal-channel-row {
  grid-template-columns:96px 1fr 46px 54px;
  margin-bottom:10px;
}

.portal-channel-row.instagram b { width:34%; background:linear-gradient(90deg,#ec4899,#f97316); }
.portal-channel-row.website b { width:24%; background:linear-gradient(90deg,#3b82f6,#22d3ee); }
.portal-channel-row.facebook b { width:18%; background:#3b82f6; }

.portal-health-panel div {
  grid-template-columns:1fr auto;
  margin-bottom:10px;
}

.portal-health-panel strong {
  padding:5px 9px;
  border-radius:999px;
  color:var(--phase17-green);
  background:rgba(34,197,94,.12);
  font-size:11px;
}

.portal-card-grid {
  margin-top:22px!important;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important;
  opacity:.78;
}

.portal-card-grid::before {
  content:"Module Launcher";
  grid-column:1/-1;
  color:var(--phase17-muted);
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.portal-card,
.portal-kpi-card {
  background:rgba(8,17,34,.72)!important;
  border-color:rgba(111,132,255,.12)!important;
}

.dashboard-v2-dark-grid,
.dashboard-v2-widget-grid {
  gap:16px!important;
}

.dashboard-v2-glow-card,
.dashboard-v2-widget {
  border-radius:15px!important;
}

.cic-v1-page {
  padding:18px!important;
}

.cic-v1-hero,
.cic-v1-card,
.cic-v1-demo-banner,
.cic-v1-kpi,
.cic-v1-customer,
.cic-v1-360-section,
.cic-v1-insight,
.cic-v1-action,
.cic-v1-timeline-item,
.cic-v1-source-card,
.cic-v1-score-card {
  background:
    linear-gradient(180deg,rgba(9,19,38,.88),rgba(5,11,24,.78)),
    radial-gradient(circle at 100% 0,rgba(34,211,238,.07),transparent 36%)!important;
  border-color:rgba(111,132,255,.16)!important;
  box-shadow:var(--phase17-shadow),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

.cic-v1-tab.active,
.cic-v1-customer.active {
  color:#fff!important;
  background:linear-gradient(135deg,var(--phase17-purple),#6d28d9)!important;
  border-color:rgba(168,85,247,.50)!important;
  box-shadow:var(--phase17-glow-purple)!important;
}

.cic-v1-tab,
.cic-v1-chip,
.cic-v1-badge,
.status-badge,
.pill,
.dash-chip,
.btn,
.iconBtn {
  background:rgba(9,17,32,.78)!important;
  color:var(--phase17-text-soft)!important;
  border-color:rgba(111,132,255,.16)!important;
}

table,
table.table,
.cic-v1-table {
  background:rgba(8,17,34,.82)!important;
}

table th,
.cic-v1-table th,
.conv-table thead th {
  color:var(--phase17-muted)!important;
  background:rgba(255,255,255,.035)!important;
  border-color:rgba(111,132,255,.12)!important;
}

table td,
.cic-v1-table td,
table.table td {
  color:var(--phase17-text-soft)!important;
  background:transparent!important;
  border-color:rgba(111,132,255,.10)!important;
}

.table tr:hover td {
  background:rgba(139,92,246,.08)!important;
}

input,
select,
textarea,
.noura-select,
.enterprise-command-input,
.portal-menu-search,
.cic-v1-filters input,
.cic-v1-filters select {
  color:var(--phase17-text)!important;
  background:rgba(5,11,24,.86)!important;
  border-color:rgba(111,132,255,.18)!important;
}

::placeholder {
  color:rgba(142,160,197,.72)!important;
}

.portal-empty-search {
  background:rgba(8,17,34,.72)!important;
  border-color:rgba(111,132,255,.16)!important;
}

@media (max-width:1440px) {
  .portal-premium-kpis {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .portal-dashboard-layout {
    grid-template-columns:1fr 1fr;
  }

  .portal-ci-overview,
  .portal-trend-panel,
  .portal-copilot-panel {
    grid-column:span 1;
  }
}

@media (max-width:980px) {
  .enterprise-sidebar-v2,
  .sidebar.noura-sidebar.enterprise-sidebar-v2 {
    transform:translateX(-102%);
  }

  .enterprise-sidebar-v2.open {
    transform:translateX(0);
  }

  .portal-premium-kpis,
  .portal-dashboard-layout,
  .portal-ci-body {
    grid-template-columns:1fr;
  }

  .portal-header-actions {
    justify-content:flex-start!important;
  }

  .enterprise-command-input {
    display:block!important;
    width:100%!important;
  }

  .portal-date-pill,
  .portal-account-btn,
  .portal-home-btn {
    display:none!important;
  }
}

@media (max-width:640px) {
  .portal-home {
    padding:18px!important;
  }

  .portal-premium-kpis {
    grid-template-columns:1fr;
  }

  .portal-customer-list div,
  .portal-channel-row,
  .portal-data-health {
    grid-template-columns:1fr auto;
  }
}


/* Phase 17.4 full app premium dark SaaS redesign
   Final full-app cascade: every legacy admin/menu surface inherits the same dark AI/CRM shell.
   Values updated (Claude, Enterprise UI Overhaul Phase 1) to match the same exact palette as
   the Phase 17.3 block above — bg #0B1020, panels #111827, cards #141C2F. */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --phase174-void:#0b1020;
  --phase174-bg:#0f1526;
  --phase174-bg-2:#111827;
  --phase174-panel:#111827;
  --phase174-panel-strong:#141c2f;
  --phase174-panel-soft:#141c2f;
  --phase174-border:rgba(255,255,255,.07);
  --phase174-border-hot:rgba(124,92,255,.40);
  --phase174-text:#f1f5f9;
  --phase174-soft:#cbd5e1;
  --phase174-muted:#94a3b8;
  --phase174-purple:#7c5cff;
  --phase174-cyan:#22d3ee;
  --phase174-green:#10b981;
  --phase174-gold:#f59e0b;
  --phase174-pink:#ec4899;
  --phase174-red:#f43f5e;
  --phase174-radius:18px;
  --phase174-radius-lg:24px;
  --phase174-glow:0 24px 70px rgba(0,0,0,.42),0 0 34px rgba(124,92,255,.12);
  color-scheme:dark;
  --bg:var(--phase174-void)!important;
  --surface:var(--phase174-bg)!important;
  --panel:var(--phase174-panel)!important;
  --panel2:var(--phase174-panel-strong)!important;
  --card:var(--phase174-panel)!important;
  --text:var(--phase174-text)!important;
  --muted:var(--phase174-muted)!important;
  --border:var(--phase174-border)!important;
  --accent:var(--phase174-purple)!important;
}

html,
body,
#appRoot,
.app,
.portal-app {
  min-height:100%;
  color:var(--phase174-text)!important;
  background:
    radial-gradient(circle at 74% 8%,rgba(34,211,238,.11),transparent 28%),
    radial-gradient(circle at 24% 4%,rgba(139,92,246,.16),transparent 30%),
    linear-gradient(135deg,var(--phase174-void),var(--phase174-bg) 42%,#030711)!important;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 86%);
}

.main,
.portal-main,
#content,
.ds-app-shell,
.screen,
.page,
.admin-page,
.menu-page,
.settings-page,
.analytics-page,
.knowledge-page,
.integrations-page,
.system-page,
.logs-page,
.accounts-page,
.users-page,
.roles-page,
.webhooks-page {
  color:var(--phase174-text)!important;
  background:transparent!important;
  min-width:0;
}

.enterprise-sidebar-v2,
.sidebar.noura-sidebar.enterprise-sidebar-v2 {
  width:248px!important;
  display:flex!important;
  flex-direction:column!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(139,92,246,.20),transparent 30%),
    radial-gradient(circle at 0% 88%,rgba(34,211,238,.13),transparent 26%),
    linear-gradient(180deg,rgba(2,6,23,.98),rgba(4,9,20,.97))!important;
  border-right:1px solid rgba(125,145,255,.16)!important;
  box-shadow:24px 0 70px rgba(0,0,0,.36), inset -1px 0 0 rgba(255,255,255,.035)!important;
}

.enterprise-sidebar-v2 .brand {
  padding:18px 14px 10px!important;
  gap:10px!important;
  border-bottom:0!important;
}

.enterprise-sidebar-v2 .brand__logo {
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(139,92,246,.16))!important;
  box-shadow:0 0 24px rgba(251,191,36,.16)!important;
}

.enterprise-sidebar-v2 .brand__name {
  color:var(--phase174-gold)!important;
  font-size:17px!important;
  line-height:1!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
}

.enterprise-sidebar-v2 .brand__sub {
  color:rgba(251,191,36,.84)!important;
  font-size:9px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}

.portal-workspace-card {
  margin:8px 12px 12px!important;
  padding:10px 11px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg,rgba(15,23,42,.82),rgba(30,41,59,.42))!important;
  border:1px solid rgba(139,92,246,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.22)!important;
}

.portal-workspace-mark,
.nav__icon {
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  width:25px!important;
  height:25px!important;
  border-radius:9px!important;
  color:#fff!important;
  background:linear-gradient(135deg,rgba(139,92,246,.75),rgba(34,211,238,.28))!important;
  box-shadow:0 0 18px rgba(139,92,246,.20)!important;
  font-size:13px!important;
}

.premium-sidebar-nav {
  flex:1 1 auto!important;
  overflow:auto!important;
  padding:0 10px 10px!important;
  scrollbar-width:thin;
  scrollbar-color:rgba(139,92,246,.45) transparent;
}

.premium-sidebar-nav .nav__section {
  margin:4px 0 8px!important;
  border:0!important;
  background:transparent!important;
}

.premium-sidebar-nav .nav__sectionToggle {
  width:100%!important;
  padding:12px 4px 6px!important;
  border:0!important;
  background:transparent!important;
  color:var(--phase174-muted)!important;
}

.premium-sidebar-nav .nav__title {
  color:rgba(142,160,197,.88)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}

.premium-sidebar-nav .nav__item {
  position:relative!important;
  display:grid!important;
  grid-template-columns:25px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
  min-height:34px!important;
  margin:2px 0!important;
  padding:5px 8px!important;
  border-radius:12px!important;
  color:rgba(226,232,240,.86)!important;
  border:1px solid transparent!important;
  background:transparent!important;
  text-decoration:none!important;
  font-size:12px!important;
  font-weight:750!important;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease!important;
}

.premium-sidebar-nav .nav__item span:not(.nav__icon):not(.nav__badge) {
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

.premium-sidebar-nav .nav__item:hover {
  transform:translateX(2px)!important;
  color:#fff!important;
  background:rgba(139,92,246,.10)!important;
  border-color:rgba(139,92,246,.24)!important;
  box-shadow:0 0 22px rgba(139,92,246,.12)!important;
}

.premium-sidebar-nav .nav__item.active,
.premium-sidebar-nav .nav__item[aria-current="page"] {
  color:#fff!important;
  background:linear-gradient(135deg,rgba(139,92,246,.98),rgba(37,99,235,.74) 55%,rgba(34,211,238,.34))!important;
  border-color:rgba(167,139,250,.58)!important;
  box-shadow:0 10px 26px rgba(88,28,135,.32),0 0 26px rgba(34,211,238,.14)!important;
}

.premium-sidebar-nav .nav__item.active .nav__icon,
.premium-sidebar-nav .nav__item[aria-current="page"] .nav__icon {
  background:rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
}

.nav__badge {
  justify-self:end;
  padding:2px 6px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--phase174-purple),#6d28d9);
  font-size:9px;
  font-weight:950;
  letter-spacing:.04em;
  box-shadow:0 0 16px rgba(139,92,246,.24);
}

.premium-sidebar-footer {
  flex:0 0 auto!important;
  margin:0!important;
  padding:10px 12px 14px!important;
  display:grid!important;
  gap:9px!important;
  border-top:1px solid rgba(125,145,255,.10)!important;
  background:linear-gradient(180deg,rgba(2,6,23,0),rgba(2,6,23,.72))!important;
}

.enterprise-sidebar-v2 .sidebarFooter::before { content:none!important; }
.enterprise-sidebar-v2 .toggle { display:none!important; }

.sidebarStatusCard,
.sidebarUserCard {
  border-radius:16px;
  border:1px solid rgba(139,92,246,.24);
  background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(34,211,238,.08)),rgba(15,23,42,.66);
  box-shadow:0 16px 36px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06);
  padding:10px;
}

.sidebarStatusCard strong,
.sidebarUserCard strong {
  display:block;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.sidebarStatusCard span,
.sidebarUserCard span {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--phase174-muted);
  font-size:11px;
  font-weight:700;
}

.sidebarStatusCard i {
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--phase174-green);
  box-shadow:0 0 12px var(--phase174-green);
}

.sidebarUserCard {
  display:grid;
  grid-template-columns:32px 1fr;
  align-items:center;
  gap:9px;
}

.sidebarUserAvatar {
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  border-radius:999px!important;
  color:#fff!important;
  background:linear-gradient(135deg,var(--phase174-purple),var(--phase174-pink))!important;
  font-size:13px!important;
  font-weight:950!important;
}

.portal-header,
.topbar,
.noura-topbar {
  background:rgba(5,11,24,.72)!important;
  border-bottom:1px solid rgba(125,145,255,.15)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.22)!important;
}

.card,
.panel,
.box,
.section,
.widget,
.stat-card,
.metric-card,
.ds-data-card,
.ds-metric-card,
.ds-detail-panel,
.ds-filter-bar,
.ds-state,
.table-card,
.form-card,
.settings-card,
.integration-card,
.webhook-card,
.knowledge-card,
.product-card,
.reply-template-card,
.media-card,
.log-card,
.health-card,
.user-card,
.account-card,
.role-card,
.analytics-card,
.dashboard-v2-widget,
.dashboard-v2-glow-card,
.portal-premium-panel,
.portal-premium-kpi,
.cic-v1-card,
.cic-v1-hero,
.cic-v1-kpi,
.cic-v1-action,
.cic-v1-timeline-item,
.cic-v1-source-card,
.cic-v1-score-card {
  color:var(--phase174-text)!important;
  background:linear-gradient(180deg,rgba(12,24,48,.88),rgba(5,11,24,.78))!important;
  border:1px solid var(--phase174-border)!important;
  border-radius:var(--phase174-radius)!important;
  box-shadow:var(--phase174-glow)!important;
}

.card::before,
.panel::before,
.ds-data-card::before,
.portal-premium-panel::before,
.cic-v1-card::before {
  border-color:rgba(255,255,255,.08)!important;
}

h1,h2,h3,h4,h5,h6,
.page-title,
.section-title,
.ds-page-header h1,
.ds-data-card h2,
.card h2,
.panel h2 {
  color:var(--phase174-text)!important;
  letter-spacing:-.025em;
}

p,small,em,label,
.help,.hint,.muted,.subtitle,.description,
.ds-page-header p,
.ds-data-card p,
.card p,
.panel p {
  color:var(--phase174-muted)!important;
}

.table,
table,
.table-wrap,
.data-table,
.conv-table,
.cic-v1-table {
  color:var(--phase174-text)!important;
  background:rgba(8,17,34,.84)!important;
  border-color:rgba(125,145,255,.15)!important;
  border-radius:16px!important;
  overflow:hidden!important;
}

table th,
.table th,
.data-table th,
.conv-table thead th,
.cic-v1-table th {
  color:rgba(203,213,225,.92)!important;
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(125,145,255,.13)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}

table td,
.table td,
.data-table td,
.conv-table td,
.cic-v1-table td {
  color:rgba(248,251,255,.90)!important;
  background:transparent!important;
  border-color:rgba(125,145,255,.10)!important;
}

table tr:hover td,
.table tr:hover td,
.data-table tr:hover td {
  background:rgba(139,92,246,.08)!important;
}

input,
select,
textarea,
button,
.btn,
.iconBtn,
.ds-search-input,
.search-input,
.filter-input,
.noura-select,
.portal-menu-search,
.enterprise-command-input {
  border-radius:13px!important;
}

input,
select,
textarea,
.ds-search-input,
.search-input,
.filter-input,
.noura-select,
.portal-menu-search,
.enterprise-command-input {
  color:var(--phase174-text)!important;
  background:rgba(3,7,18,.72)!important;
  border:1px solid rgba(125,145,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}

input:focus,
select:focus,
textarea:focus,
.ds-search-input:focus,
.search-input:focus,
.filter-input:focus {
  outline:0!important;
  border-color:rgba(34,211,238,.52)!important;
  box-shadow:0 0 0 4px rgba(34,211,238,.10),inset 0 1px 0 rgba(255,255,255,.06)!important;
}

.btn,
button,
.ds-tab,
.tab,
.cic-v1-tab,
.portal-panel-pill,
.pill,
.status-badge,
.ds-status-badge {
  color:var(--phase174-text)!important;
  background:rgba(15,23,42,.72)!important;
  border:1px solid rgba(125,145,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}

.btn.primary,
button.primary,
.portal-ai-copilot-btn,
.ds-tab.active,
.tab.active,
.cic-v1-tab.active,
.nav-pill.active {
  color:#fff!important;
  background:linear-gradient(135deg,var(--phase174-purple),#2563eb 58%,rgba(34,211,238,.72))!important;
  border-color:rgba(167,139,250,.50)!important;
  box-shadow:0 12px 30px rgba(139,92,246,.24),0 0 24px rgba(34,211,238,.12)!important;
}

.btn:hover,
button:hover,
.ds-tab:hover,
.tab:hover,
.cic-v1-tab:hover {
  border-color:rgba(139,92,246,.36)!important;
  box-shadow:0 10px 26px rgba(139,92,246,.14)!important;
}

.tabs,
.tabbar,
.ds-tab-bar,
.cic-v1-tabs,
.filter-bar,
.ds-filter-bar,
.toolbar,
.actions,
.controls {
  background:rgba(5,11,24,.58)!important;
  border:1px solid rgba(125,145,255,.13)!important;
  border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.modal,
.dialog,
.drawer,
.popover,
.dropdown-menu,
.noura-command,
.noura-modal {
  color:var(--phase174-text)!important;
  background:linear-gradient(180deg,rgba(12,24,48,.96),rgba(5,11,24,.94))!important;
  border:1px solid rgba(139,92,246,.26)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.50),0 0 38px rgba(139,92,246,.16)!important;
}

.empty,
.empty-state,
.ds-empty-state,
.loading,
.loading-state,
.ds-loading-state,
.error,
.error-state,
.ds-error-state,
.notice,
.alert {
  color:var(--phase174-soft)!important;
  background:rgba(8,17,34,.70)!important;
  border:1px solid rgba(125,145,255,.14)!important;
  border-radius:16px!important;
}

pre,
code,
.mono {
  color:#bae6fd!important;
  background:rgba(2,6,23,.72)!important;
  border-color:rgba(34,211,238,.18)!important;
}

.cic-v1,
.cic-v1-page,
.cic-v1-shell,
.cic-v1-layout,
.cic-v1-main,
.cic-v1-panel,
.cic-v1-list,
.cic-v1-detail {
  color:var(--phase174-text)!important;
  background:transparent!important;
}

.cic-v1 button[class*="send"],
.cic-v1 button[class*="order"],
.cic-v1 button[class*="call"],
.cic-v1 a[class*="send"],
.cic-v1 a[class*="order"],
.cic-v1 a[class*="call"] {
  display:none!important;
}

@media (max-width:1180px) {
  .enterprise-sidebar-v2,
  .sidebar.noura-sidebar.enterprise-sidebar-v2 { width:224px!important; }
  .premium-sidebar-nav .nav__item { grid-template-columns:24px minmax(0,1fr) auto!important; }
}

@media (max-width:980px) {
  .enterprise-sidebar-v2,
  .sidebar.noura-sidebar.enterprise-sidebar-v2 {
    width:min(286px,86vw)!important;
  }

  .main,
  .portal-main {
    width:100%!important;
  }

  .portal-header,
  .topbar {
    position:sticky!important;
    top:0!important;
  }
}


/* Phase 17.5 enterprise UX polish
   Final polish layer: dashboard-only portal, compact topbar, persistent collapsed sidebar, Copilot drawer, denser admin pages. */
:root {
  --phase175-sidebar-expanded:248px;
  --phase175-sidebar-collapsed:76px;
  --phase175-topbar-height:64px;
  --phase175-density-gap:12px;
  --phase175-density-pad:14px;
}

.app.portal-app {
  overflow-x:hidden!important;
}

.main.portal-main {
  min-width:0!important;
  transition:margin .22s ease,width .22s ease!important;
}

.enterprise-sidebar-v2,
.sidebar.noura-sidebar.enterprise-sidebar-v2 {
  flex:0 0 var(--phase175-sidebar-expanded)!important;
  width:var(--phase175-sidebar-expanded)!important;
  min-width:var(--phase175-sidebar-expanded)!important;
  transition:width .22s ease,min-width .22s ease,flex-basis .22s ease,box-shadow .22s ease!important;
  overflow-x:hidden!important;
}

.enterprise-sidebar-v2.collapsed,
.sidebar.noura-sidebar.enterprise-sidebar-v2.collapsed {
  flex-basis:var(--phase175-sidebar-collapsed)!important;
  width:var(--phase175-sidebar-collapsed)!important;
  min-width:var(--phase175-sidebar-collapsed)!important;
}

.enterprise-sidebar-v2.collapsed .brand {
  justify-content:center!important;
  padding:14px 8px 8px!important;
}

.enterprise-sidebar-v2.collapsed .brand__text,
.enterprise-sidebar-v2.collapsed .portal-workspace-card div,
.enterprise-sidebar-v2.collapsed .portal-workspace-caret,
.enterprise-sidebar-v2.collapsed .nav__title,
.enterprise-sidebar-v2.collapsed .nav__chevron,
.enterprise-sidebar-v2.collapsed .nav__badge,
.enterprise-sidebar-v2.collapsed .sidebarStatusCard strong,
.enterprise-sidebar-v2.collapsed .sidebarStatusCard span,
.enterprise-sidebar-v2.collapsed .sidebarUserCard div {
  opacity:0!important;
  width:0!important;
  max-width:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

.enterprise-sidebar-v2.collapsed .portal-workspace-card,
.enterprise-sidebar-v2.collapsed .sidebarStatusCard,
.enterprise-sidebar-v2.collapsed .sidebarUserCard {
  justify-content:center!important;
  grid-template-columns:1fr!important;
  padding:8px!important;
}

.enterprise-sidebar-v2.collapsed .premium-sidebar-nav {
  padding:4px 8px 10px!important;
  overflow:visible!important;
}

.enterprise-sidebar-v2.collapsed .nav__sectionToggle {
  padding:8px 0 4px!important;
  min-height:8px!important;
}

.enterprise-sidebar-v2.collapsed .nav__sectionBody {
  display:grid!important;
  gap:5px!important;
}

.enterprise-sidebar-v2.collapsed .nav__item {
  grid-template-columns:1fr!important;
  justify-items:center!important;
  min-height:42px!important;
  padding:8px!important;
  overflow:visible!important;
}

.enterprise-sidebar-v2.collapsed .nav__item span:not(.nav__icon):not(.nav__badge) {
  position:absolute!important;
  opacity:0!important;
  width:1px!important;
  max-width:1px!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

.enterprise-sidebar-v2.collapsed .nav__item::after {
  content:none!important;
}

.enterprise-sidebar-v2.collapsed .nav__item:hover::before {
  content:attr(data-tooltip);
  position:absolute;
  left:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%);
  z-index:2000;
  width:max-content;
  max-width:220px;
  padding:7px 10px;
  border-radius:10px;
  color:#fff;
  background:rgba(15,23,42,.96);
  border:1px solid rgba(139,92,246,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 20px rgba(139,92,246,.18);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.premium-sidebar-nav .nav__item[data-route="customer-intelligence"]::after,
.premium-sidebar-nav .nav__item[data-route="conversations"]::after {
  content:none!important;
}

.portal-header,
.topbar.noura-topbar.portal-header {
  min-height:var(--phase175-topbar-height)!important;
  padding:10px 18px!important;
}

.portal-header .topbar__title {
  font-size:19px!important;
}

.portal-header .topbar__hint {
  font-size:11px!important;
}

.portal-header-actions {
  gap:8px!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
}

.enterprise-command-input {
  height:34px!important;
  width:min(380px,34vw)!important;
  font-size:12px!important;
}

.portal-status-dot,
.portal-date-pill,
.portal-account-btn,
.portal-ai-copilot-btn,
#userPill,
#logoutBtn {
  height:32px!important;
  min-height:32px!important;
  padding:0 11px!important;
  font-size:11px!important;
  white-space:nowrap!important;
}

.portal-icon-btn,
.portal-home-btn {
  display:none!important;
}

.portal-home {
  padding:14px 18px 20px!important;
}

.portal-home-console,
.portal-premium-dashboard,
.portal-dashboard-layout,
.portal-ops-grid {
  gap:var(--phase175-density-gap)!important;
}

.portal-home-head {
  padding:16px 18px!important;
  border-radius:20px!important;
}

.portal-home-title {
  font-size:clamp(24px,2.4vw,36px)!important;
}

.portal-home-subtitle,
.portal-greeting {
  font-size:13px!important;
}

.portal-dashboard-status {
  min-width:240px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(125,145,255,.16);
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(34,211,238,.08)),rgba(8,17,34,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

.portal-dashboard-status span,
.portal-dashboard-status em {
  display:block;
  color:var(--phase174-muted);
  font-size:11px;
  font-style:normal;
  font-weight:800;
}

.portal-dashboard-status strong {
  display:block;
  margin:4px 0;
  color:#fff;
  font-size:15px;
  font-weight:950;
}

.portal-premium-kpis {
  gap:10px!important;
}

.portal-premium-kpi {
  min-height:118px!important;
  padding:13px!important;
  border-radius:16px!important;
}

.portal-premium-kpi strong {
  font-size:25px!important;
}

.portal-premium-panel,
.portal-widget-card,
.card,
.panel,
.ds-data-card,
.cic-v1-card {
  padding:var(--phase175-density-pad)!important;
  border-radius:16px!important;
}

.portal-ops-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr;
  align-items:stretch;
  margin-top:12px;
}

.portal-widget-card {
  min-height:0!important;
}

.portal-recent-activity {
  grid-column:span 2;
}

.portal-compact-list,
.portal-recommendation-list,
.portal-activity-feed,
.portal-opportunity-stack {
  display:grid;
  gap:8px;
}

.portal-compact-list div,
.portal-recommendation-list div,
.portal-activity-feed div,
.portal-opportunity-stack div {
  display:grid;
  gap:3px;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(125,145,255,.10);
}

.portal-compact-list div {
  grid-template-columns:110px 1fr auto;
  align-items:center;
}

.portal-compact-list strong,
.portal-recommendation-list b,
.portal-activity-feed strong,
.portal-opportunity-stack strong {
  color:#fff;
  font-size:12px;
}

.portal-compact-list span,
.portal-recommendation-list span,
.portal-activity-feed em,
.portal-opportunity-stack span,
.portal-knowledge-health p {
  color:var(--phase174-muted)!important;
  font-size:12px!important;
  font-style:normal;
}

.portal-compact-list em {
  color:var(--phase174-cyan);
  font-size:11px;
  font-style:normal;
  font-weight:900;
}

.portal-health-meter {
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
  border:1px solid rgba(125,145,255,.10);
}

.portal-health-meter i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--phase174-green),var(--phase174-cyan));
  box-shadow:0 0 18px rgba(34,211,238,.22);
}

.portal-chip-row {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.portal-chip-row span {
  padding:5px 8px;
  border-radius:999px;
  color:#dbeafe;
  background:rgba(139,92,246,.12);
  border:1px solid rgba(139,92,246,.18);
  font-size:11px;
  font-weight:800;
}

.portal-activity-feed div {
  grid-template-columns:9px 150px 1fr;
  align-items:center;
}

.portal-activity-feed div > span {
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--phase174-green);
  box-shadow:0 0 12px var(--phase174-green);
}

.portal-card-grid,
.portal-empty-search,
.portal-kpi-grid,
.portal-menu-search,
.portal-menu-meta {
  display:none!important;
}

.content,
.ds-app-shell,
.cic-v1-shell {
  padding:18px!important;
  max-width:1500px!important;
}

.grid,
.ds-grid,
.cic-v1-grid,
.dashboard-v2-widget-grid {
  gap:12px!important;
}

table th,
table td,
.table th,
.table td,
.data-table th,
.data-table td,
.cic-v1-table th,
.cic-v1-table td {
  padding:8px 10px!important;
}

input,
select,
textarea,
.btn,
button {
  min-height:34px;
}

.copilot-drawer-backdrop {
  position:fixed;
  inset:0;
  z-index:2500;
  background:rgba(2,6,23,.42);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}

.copilot-drawer-backdrop.is-open {
  opacity:1;
  pointer-events:auto;
}

.copilot-drawer {
  position:fixed;
  top:0;
  right:0;
  z-index:2501;
  width:min(420px,92vw);
  height:100vh;
  padding:18px;
  color:var(--phase174-text);
  background:linear-gradient(180deg,rgba(12,24,48,.98),rgba(3,7,18,.98));
  border-left:1px solid rgba(139,92,246,.30);
  box-shadow:-28px 0 90px rgba(0,0,0,.48),0 0 42px rgba(139,92,246,.18);
  transform:translateX(105%);
  transition:transform .24s ease;
  display:flex;
  flex-direction:column;
  gap:14px;
}

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

.copilot-drawer__head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.copilot-drawer__head span {
  color:var(--phase174-cyan);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.copilot-drawer__head h2 {
  margin:4px 0 0;
  color:#fff;
  font-size:24px;
}

.copilot-drawer__description,
.copilot-safety-note {
  color:var(--phase174-muted)!important;
  font-size:13px;
  line-height:1.5;
}

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

.copilot-prompt-chips button {
  min-height:30px;
  padding:6px 9px!important;
  border-radius:999px!important;
  color:#dbeafe!important;
  background:rgba(139,92,246,.12)!important;
  border:1px solid rgba(139,92,246,.24)!important;
  font-size:12px!important;
}

.copilot-input-wrap {
  display:grid;
  gap:8px;
  color:#fff!important;
  font-size:12px;
  font-weight:900;
}

.copilot-input-wrap textarea {
  min-height:112px;
  resize:vertical;
}

.copilot-disabled-send:disabled {
  cursor:not-allowed!important;
  opacity:.72!important;
}

@media (max-width:1440px) {
  .portal-ops-grid {
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:980px) {
  .enterprise-sidebar-v2.collapsed,
  .sidebar.noura-sidebar.enterprise-sidebar-v2.collapsed {
    width:min(286px,86vw)!important;
    min-width:min(286px,86vw)!important;
  }

  .portal-header-actions {
    flex-wrap:wrap!important;
  }

  .portal-ops-grid,
  .portal-compact-list div,
  .portal-activity-feed div {
    grid-template-columns:1fr!important;
  }
}


/* Phase 17.5 fix pass layout and remaining page darkening
   Final corrective cascade: fixed sidebar, independent main scroll, drawer layering, and dark legacy page panels. */
:root {
  --phase175-fix-sidebar-expanded:248px;
  --phase175-fix-sidebar-collapsed:76px;
  --phase175-fix-topbar:60px;
  --phase175-fix-panel:rgba(8,17,34,.92);
  --phase175-fix-panel-2:rgba(12,24,48,.86);
  --phase175-fix-border:rgba(125,145,255,.16);
}

html,
body {
  height:100%!important;
  overflow:hidden!important;
}

body {
  color:var(--phase174-text)!important;
  background:
    radial-gradient(circle at 78% 0%,rgba(34,211,238,.10),transparent 28%),
    radial-gradient(circle at 20% 0%,rgba(139,92,246,.14),transparent 30%),
    linear-gradient(135deg,#02040b,#050814 48%,#02040b)!important;
}

.app.portal-app,
#appRoot {
  height:100vh!important;
  min-height:100vh!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:stretch!important;
}

.enterprise-sidebar-v2,
.sidebar.noura-sidebar.enterprise-sidebar-v2 {
  position:sticky!important;
  top:0!important;
  align-self:stretch!important;
  height:100vh!important;
  max-height:100vh!important;
  overflow:hidden!important;
  flex:0 0 var(--phase175-fix-sidebar-expanded)!important;
  width:var(--phase175-fix-sidebar-expanded)!important;
  min-width:var(--phase175-fix-sidebar-expanded)!important;
  z-index:1200!important;
}

.enterprise-sidebar-v2.collapsed,
.sidebar.noura-sidebar.enterprise-sidebar-v2.collapsed {
  flex-basis:var(--phase175-fix-sidebar-collapsed)!important;
  width:var(--phase175-fix-sidebar-collapsed)!important;
  min-width:var(--phase175-fix-sidebar-collapsed)!important;
}

.enterprise-sidebar-v2 .brand,
.enterprise-sidebar-v2 .portal-workspace-card,
.enterprise-sidebar-v2 .premium-sidebar-footer {
  flex:0 0 auto!important;
}

.enterprise-sidebar-v2 .premium-sidebar-nav,
.enterprise-sidebar-v2 .nav.noura-nav {
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:visible!important;
  padding-bottom:10px!important;
}

.enterprise-sidebar-v2 .premium-sidebar-footer {
  position:relative!important;
  z-index:2!important;
  margin-top:auto!important;
}

.main.portal-main,
.portal-main,
.main {
  height:100vh!important;
  max-height:100vh!important;
  min-width:0!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
}

.portal-header,
.topbar.noura-topbar.portal-header {
  position:sticky!important;
  top:0!important;
  z-index:1100!important;
  flex:0 0 var(--phase175-fix-topbar)!important;
  min-height:var(--phase175-fix-topbar)!important;
  max-height:var(--phase175-fix-topbar)!important;
  padding:8px 16px!important;
}

.portal-home,
.content.portal-content,
#content {
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}

.portal-home {
  height:calc(100vh - var(--phase175-fix-topbar))!important;
}

.content.portal-content,
#content {
  height:calc(100vh - var(--phase175-fix-topbar))!important;
  padding:14px 16px 26px!important;
}

.copilot-drawer-backdrop {
  z-index:9000!important;
  backdrop-filter:blur(7px)!important;
}

.copilot-drawer {
  top:0!important;
  right:0!important;
  z-index:9100!important;
  height:100vh!important;
  max-height:100vh!important;
  overflow:hidden!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
}

.copilot-drawer__head {
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  flex:0 0 auto!important;
  padding:18px 18px 14px!important;
  background:linear-gradient(180deg,rgba(12,24,48,.99),rgba(12,24,48,.92))!important;
  border-bottom:1px solid rgba(139,92,246,.24)!important;
  box-shadow:0 18px 34px rgba(0,0,0,.24)!important;
}

.copilot-drawer__close {
  position:relative!important;
  z-index:3!important;
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
}

.copilot-drawer__description,
.copilot-prompt-chips,
.copilot-input-wrap,
.copilot-disabled-send,
.copilot-safety-note {
  margin-left:18px!important;
  margin-right:18px!important;
}

.copilot-drawer__description {
  margin-top:14px!important;
}

.copilot-safety-note {
  margin-bottom:18px!important;
}

.copilot-prompt-chips,
.copilot-input-wrap {
  flex:0 0 auto!important;
}

.copilot-drawer::after {
  content:"";
  flex:1 1 auto;
  min-height:1px;
}

/* Darken stubborn legacy page-specific surfaces and injected menu styles. */
.noura-section,
.noura-card,
.noura-soft-block,
.noura-form,
.noura-modal,
.instruction-side-card,
.instruction-editor-card,
.instruction-template-card,
.instruction-modal-card,
.instruction-kpi,
.product-knowledge-page .pk-hero,
.product-knowledge-page .pk-kpi,
.product-knowledge-page .pk-table-wrap,
.product-knowledge-page .pk-modal-card,
.product-knowledge-page .pk-modal-head,
.product-knowledge-page .pk-preview-block,
.product-knowledge-page .pk-empty,
.product-knowledge-item,
.product-rules-sidebar,
.product-rule-list-item,
.product-rules-editor,
.product-rules-panel,
.noura-alias-card,
.noura-alias-product-item,
.noura-images-card,
.noura-images-panel,
.noura-conversation-item,
.conversation-results-card,
.sales-learning-card,
.automation-rule-card,
.promo-message-card,
.webhook-card,
.integration-card,
.analytics-card,
.system-card,
.log-card,
.debug-card,
.user-card,
.account-card,
.role-card,
.settings-card,
.kpi,
.metric,
.stat,
.notice,
.alert {
  color:var(--phase174-text)!important;
  background:
    linear-gradient(180deg,var(--phase175-fix-panel),rgba(5,11,24,.82)),
    radial-gradient(circle at 100% 0%,rgba(139,92,246,.10),transparent 28%)!important;
  border-color:var(--phase175-fix-border)!important;
  box-shadow:0 18px 48px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.pk-table-wrap,
.pk-modal-head,
.product-knowledge-page .pk-table-wrap,
.product-knowledge-page .pk-modal-head {
  background:rgba(8,17,34,.94)!important;
}

.pk-kpi,
.instruction-kpi,
.kpi,
.metric-card,
.stat-card,
.dashboard-v2-glow-card {
  min-height:0!important;
  padding:11px 12px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(12,24,48,.90),rgba(5,11,24,.82))!important;
  border:1px solid rgba(125,145,255,.16)!important;
}

.pk-kpi *,
.instruction-kpi *,
.kpi *,
.metric-card *,
.stat-card * {
  color:inherit;
}

.pk-kpi strong,
.instruction-kpi .kpi__value,
.kpi__value,
.metric-card strong,
.stat-card strong {
  color:#fff!important;
}

.pk-table,
.pk-table th,
.pk-table td,
.table,
.table th,
.table td,
table,
table th,
table td {
  background-color:transparent!important;
  border-color:rgba(125,145,255,.12)!important;
}

.pk-table th,
table th,
.table th {
  background:rgba(255,255,255,.045)!important;
}

input,
textarea,
select,
.noura-input,
.noura-select,
.noura-textarea-lg,
.noura-instructions-editor,
.instruction-directive-editor,
.instruction-preview-pre,
.instruction-status-strip,
.instruction-tip-item,
.product-knowledge-page input,
.product-knowledge-page textarea,
.product-knowledge-page select,
.instructions-page input,
.instructions-page textarea,
.instructions-page select {
  color:var(--phase174-text)!important;
  background:rgba(2,6,23,.72)!important;
  border:1px solid rgba(125,145,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}

input::placeholder,
textarea::placeholder {
  color:rgba(142,160,197,.82)!important;
}

.noura-instructions-main-card {
  min-height:0!important;
}

.noura-instructions-editor {
  min-height:360px!important;
  max-height:calc(100vh - 280px)!important;
}

.noura-instructions-layout,
.noura-aliases-layout,
.product-knowledge-layout,
.product-rules-split-layout {
  gap:12px!important;
}

.noura-instructions-left,
.noura-instructions-right,
.noura-aliases-left,
.noura-aliases-right,
.product-knowledge-left,
.product-knowledge-right {
  gap:10px!important;
}

.noura-section-header,
.ds-page-header,
.card .noura-section-header {
  gap:10px!important;
  margin-bottom:10px!important;
}

.noura-section-title,
.ds-page-header h1,
.card h2,
.noura-card h2 {
  font-size:clamp(18px,1.5vw,24px)!important;
}

.card,
.noura-card,
.noura-section,
.ds-data-card,
.panel,
.product-knowledge-editor,
.product-rules-sidebar {
  padding:12px!important;
}

table th,
table td,
.table th,
.table td,
.pk-table th,
.pk-table td {
  padding:7px 9px!important;
  line-height:1.35!important;
}

.field,
label.field {
  gap:5px!important;
}

.field span,
label.field span {
  color:var(--phase174-muted)!important;
  font-size:11px!important;
  font-weight:800!important;
}

@media (max-width:980px) {
  html,
  body,
  .app.portal-app,
  #appRoot,
  .main.portal-main,
  .portal-main,
  .main {
    overflow:auto!important;
    height:auto!important;
    max-height:none!important;
  }

  .enterprise-sidebar-v2,
  .sidebar.noura-sidebar.enterprise-sidebar-v2 {
    position:fixed!important;
    height:100vh!important;
  }

  .portal-home,
  .content.portal-content,
  #content {
    height:auto!important;
    overflow:visible!important;
  }
}


/* Phase 17.5 final legacy-light eradication
   Last-mile namespace overrides for menu modules that inject old light CSS after app load. */
:root {
  --phase175-final-bg:#02040b;
  --phase175-final-card:rgba(8,17,34,.94);
  --phase175-final-card-2:rgba(12,24,48,.90);
  --phase175-final-card-3:rgba(15,23,42,.78);
  --phase175-final-border:rgba(125,145,255,.18);
  --phase175-final-border-hot:rgba(139,92,246,.36);
  --phase175-final-text:#f8fbff;
  --phase175-final-muted:#9fb0d0;
  --phase175-final-soft:#cbd5e1;
}

.product-rules-enterprise,
.instructions-enterprise-page,
.product-knowledge-page,
.conversations-enterprise-page {
  color:var(--phase175-final-text)!important;
  background:transparent!important;
}

.product-rules-enterprise .pr-hero,
.product-rules-enterprise .pr-kpi,
.product-rules-enterprise .pr-filter-card,
.product-rules-enterprise .pr-panel,
.product-rules-enterprise .pr-list-panel,
.product-rules-enterprise .pr-detail,
.product-rules-enterprise .pr-detail-hero,
.product-rules-enterprise .pr-mini,
.product-rules-enterprise .pr-keyword-section,
.product-rules-enterprise .pr-item,
.product-rules-enterprise .pr-empty,
.product-rules-enterprise .pr-modal,
.product-rules-enterprise .pr-modal-head,
.product-rules-enterprise .pr-modal-body,
.product-rules-enterprise .pr-modal-foot,
.product-rules-enterprise .pr-danger,
.instructions-enterprise-page .instruction-hero,
.instructions-enterprise-page .instruction-kpi,
.instructions-enterprise-page .instruction-editor-card,
.instructions-enterprise-page .instruction-side-card,
.instructions-enterprise-page .instruction-template-card,
.instructions-enterprise-page .instruction-tip-item,
.instructions-enterprise-page .instruction-status-strip,
.instructions-enterprise-page .instruction-modal-card,
.instructions-enterprise-page .instruction-preview-pre,
.product-knowledge-page .pk-hero,
.product-knowledge-page .pk-kpi,
.product-knowledge-page .pk-table-wrap,
.product-knowledge-page .pk-modal-card,
.product-knowledge-page .pk-modal-head,
.product-knowledge-page .pk-modal-body,
.product-knowledge-page .pk-preview-block,
.product-knowledge-page .pk-empty,
.product-knowledge-page .pk-pagination,
.product-knowledge-page .pk-toolbar,
.product-knowledge-page .pk-view-grid,
.product-knowledge-page .pk-form-grid-2,
.product-knowledge-page .pk-form-grid-3,
.product-knowledge-page .pk-form-grid-4,
.product-knowledge-page .field,
.conversations-enterprise-page .conv-enterprise-hero,
.conversations-enterprise-page .conv-kpi-card,
.conversations-enterprise-page .conv-table-card,
.conversations-enterprise-page .conv-table-wrap,
.conversations-enterprise-page .conv-modal-card,
.conversations-enterprise-page .conv-modal-head,
.conversations-enterprise-page .conv-modal-body,
.conversations-enterprise-page .conv-modal-meta,
.conversations-enterprise-page .conv-chat-panel,
.conversations-enterprise-page .conv-modal-msg-bubble,
.conversations-enterprise-page .conv-empty-state {
  color:var(--phase175-final-text)!important;
  background:
    linear-gradient(180deg,var(--phase175-final-card),rgba(5,11,24,.86)),
    radial-gradient(circle at 100% 0%,rgba(139,92,246,.11),transparent 28%)!important;
  border:1px solid var(--phase175-final-border)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.product-rules-enterprise .pr-kpi,
.instructions-enterprise-page .instruction-kpi,
.product-knowledge-page .pk-kpi,
.conversations-enterprise-page .conv-kpi-card {
  min-height:0!important;
  padding:11px 12px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,var(--phase175-final-card-2),rgba(5,11,24,.84))!important;
}

.product-rules-enterprise .pr-detail-hero,
.product-rules-enterprise .pr-mini,
.product-rules-enterprise .pr-keyword-section,
.product-rules-enterprise .pr-modal-head,
.instructions-enterprise-page .instruction-status-strip,
.instructions-enterprise-page .instruction-tip-item,
.instructions-enterprise-page .instruction-preview-pre,
.product-knowledge-page .pk-preview-block,
.product-knowledge-page .pk-modal-head,
.conversations-enterprise-page .conv-modal-meta,
.conversations-enterprise-page .conv-chat-panel {
  background:linear-gradient(180deg,var(--phase175-final-card-2),rgba(2,6,23,.72))!important;
}

.product-rules-enterprise .pr-title,
.product-rules-enterprise .pr-detail-title,
.product-rules-enterprise .pr-panel-title,
.product-rules-enterprise .pr-kpi-value,
.product-rules-enterprise .pr-mini-value,
.product-rules-enterprise .pr-item-title,
.instructions-enterprise-page .noura-section-title,
.instructions-enterprise-page .kpi__value,
.product-knowledge-page .noura-section-title,
.product-knowledge-page .pk-product-title,
.product-knowledge-page .pk-kpi-value,
.product-knowledge-page .pk-preview-title,
.conversations-enterprise-page h2,
.conversations-enterprise-page h3,
.conversations-enterprise-page .conv-kpi-value,
.conversations-enterprise-page .noura-section-title,
.conversations-enterprise-page .conv-modal-msg-body {
  color:var(--phase175-final-text)!important;
}

.product-rules-enterprise .pr-subtitle,
.product-rules-enterprise .pr-kpi-label,
.product-rules-enterprise .pr-kpi-note,
.product-rules-enterprise .pr-panel-sub,
.product-rules-enterprise .pr-item-sub,
.product-rules-enterprise .pr-mini-label,
.product-rules-enterprise .pr-path,
.instructions-enterprise-page .noura-section-sub,
.instructions-enterprise-page .kpi__label,
.instructions-enterprise-page .kpi__sub,
.instructions-enterprise-page .instruction-side-body,
.product-knowledge-page .noura-section-sub,
.product-knowledge-page .pk-muted-small,
.product-knowledge-page .pk-preview-block,
.conversations-enterprise-page .muted,
.conversations-enterprise-page .conv-kpi-label,
.conversations-enterprise-page .conv-kpi-sub,
.conversations-enterprise-page .conv-modal-msg-meta,
.conversations-enterprise-page .mono-small {
  color:var(--phase175-final-muted)!important;
}

.product-rules-enterprise input,
.product-rules-enterprise textarea,
.product-rules-enterprise select,
.product-rules-enterprise .pr-field input,
.product-rules-enterprise .pr-field textarea,
.product-rules-enterprise .pr-field select,
.instructions-enterprise-page input,
.instructions-enterprise-page textarea,
.instructions-enterprise-page select,
.instructions-enterprise-page .instruction-directive-editor,
.instructions-enterprise-page .instruction-greeting-input,
.product-knowledge-page input,
.product-knowledge-page textarea,
.product-knowledge-page select,
.product-knowledge-page .noura-input,
.product-knowledge-page .noura-select,
.conversations-enterprise-page input,
.conversations-enterprise-page select,
.conversations-enterprise-page textarea,
.conversations-enterprise-page .noura-input,
.conversations-enterprise-page .noura-select {
  color:var(--phase175-final-text)!important;
  background:rgba(2,6,23,.78)!important;
  border:1px solid var(--phase175-final-border)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 0 0 0 rgba(34,211,238,0)!important;
}

.product-rules-enterprise input::placeholder,
.product-rules-enterprise textarea::placeholder,
.instructions-enterprise-page input::placeholder,
.instructions-enterprise-page textarea::placeholder,
.product-knowledge-page input::placeholder,
.product-knowledge-page textarea::placeholder,
.conversations-enterprise-page input::placeholder,
.conversations-enterprise-page textarea::placeholder {
  color:rgba(159,176,208,.78)!important;
}

.product-rules-enterprise input:focus,
.product-rules-enterprise textarea:focus,
.product-rules-enterprise select:focus,
.instructions-enterprise-page input:focus,
.instructions-enterprise-page textarea:focus,
.instructions-enterprise-page select:focus,
.product-knowledge-page input:focus,
.product-knowledge-page textarea:focus,
.product-knowledge-page select:focus,
.conversations-enterprise-page input:focus,
.conversations-enterprise-page select:focus,
.conversations-enterprise-page textarea:focus {
  border-color:rgba(34,211,238,.50)!important;
  box-shadow:0 0 0 4px rgba(34,211,238,.10),inset 0 1px 0 rgba(255,255,255,.045)!important;
}

.product-rules-enterprise .pr-chip,
.product-rules-enterprise .pill,
.instructions-enterprise-page .pill,
.product-knowledge-page .pill,
.product-knowledge-page .pk-chip-wrap span,
.conversations-enterprise-page .pill {
  color:#eaf2ff!important;
  background:rgba(139,92,246,.16)!important;
  border:1px solid rgba(139,92,246,.26)!important;
}

.product-rules-enterprise .btn,
.instructions-enterprise-page .btn,
.product-knowledge-page .btn,
.conversations-enterprise-page .btn {
  color:var(--phase175-final-text)!important;
  background:rgba(15,23,42,.82)!important;
  border:1px solid var(--phase175-final-border)!important;
}

.product-rules-enterprise .btn.primary,
.instructions-enterprise-page .btn.primary,
.product-knowledge-page .btn.primary,
.conversations-enterprise-page .btn.primary {
  color:#fff!important;
  background:linear-gradient(135deg,var(--phase174-purple),#2563eb 62%,rgba(34,211,238,.68))!important;
  border-color:rgba(139,92,246,.44)!important;
}

.product-rules-enterprise table,
.product-rules-enterprise th,
.product-rules-enterprise td,
.product-knowledge-page table,
.product-knowledge-page th,
.product-knowledge-page td,
.conversations-enterprise-page table,
.conversations-enterprise-page th,
.conversations-enterprise-page td {
  color:var(--phase175-final-text)!important;
  background:transparent!important;
  border-color:rgba(125,145,255,.12)!important;
}

.product-rules-enterprise th,
.product-knowledge-page th,
.conversations-enterprise-page th {
  background:rgba(255,255,255,.045)!important;
  color:var(--phase175-final-muted)!important;
}

.conversations-enterprise-page .conv-modal-msg-bubble.is-assistant {
  background:linear-gradient(145deg,rgba(15,23,42,.92),rgba(8,17,34,.86))!important;
  color:var(--phase175-final-text)!important;
  border-color:rgba(125,145,255,.16)!important;
}

.conversations-enterprise-page .conv-modal-msg-bubble.is-user {
  background:linear-gradient(145deg,rgba(139,92,246,.82),rgba(37,99,235,.74))!important;
  color:#fff!important;
  border-color:rgba(167,139,250,.38)!important;
}

.conversations-enterprise-page .conv-modal-card {
  max-height:calc(100vh - 42px)!important;
  overflow:hidden!important;
}

.conversations-enterprise-page .conv-modal-body {
  overflow:auto!important;
}

.product-knowledge-page .pk-modal-card,
.product-rules-enterprise .pr-modal,
.instructions-enterprise-page .instruction-modal-card,
.conversations-enterprise-page .conv-modal-card {
  background:linear-gradient(180deg,rgba(12,24,48,.98),rgba(5,11,24,.96))!important;
  border-color:rgba(139,92,246,.30)!important;
}

.product-knowledge-page .pk-modal-backdrop,
.product-rules-enterprise .pr-modal-overlay,
.instructions-enterprise-page .instruction-modal-overlay,
.conversations-enterprise-page .conv-modal-backdrop {
  background:rgba(2,6,23,.70)!important;
  backdrop-filter:blur(8px)!important;
}

.product-rules-enterprise .pr-hero,
.instructions-enterprise-page .instruction-hero,
.product-knowledge-page .pk-hero,
.conversations-enterprise-page .conv-enterprise-hero {
  padding:14px!important;
  margin-bottom:12px!important;
}

.product-rules-enterprise .pr-kpi-grid,
.instructions-enterprise-page .instruction-kpi-row,
.product-knowledge-page .pk-kpi-grid,
.conversations-enterprise-page .conv-kpi-grid {
  gap:10px!important;
}

.product-rules-enterprise .pr-detail,
.product-rules-enterprise .pr-modal,
.instructions-enterprise-page .instruction-editor-card,
.product-knowledge-page .pk-modal-card,
.conversations-enterprise-page .conv-modal-card {
  border-radius:18px!important;
}


/* Phase 17.5A final visual consistency pass
   UI-only last-mile overrides for remaining legacy light panels on named pages. */
:root {
  --phase175a-bg:#02040b;
  --phase175a-card:rgba(8,17,34,.96);
  --phase175a-card-2:rgba(12,24,48,.92);
  --phase175a-card-3:rgba(15,23,42,.82);
  --phase175a-border:rgba(125,145,255,.20);
  --phase175a-border-hot:rgba(139,92,246,.42);
  --phase175a-text:#f8fbff;
  --phase175a-soft:#d7e2f2;
  --phase175a-muted:#9fb0d0;
  --phase175a-purple:#8b5cf6;
  --phase175a-cyan:#22d3ee;
  --phase175a-gold:#f5c451;
  --phase175a-green:#34d399;
}

/* Product Rules */
.product-rules-enterprise,
.product-rules-enterprise .pr-layout,
.product-rules-enterprise .pr-content-grid {
  color:var(--phase175a-text)!important;
}
.product-rules-enterprise .pr-hero,
.product-rules-enterprise .pr-kpi,
.product-rules-enterprise .pr-filter-card,
.product-rules-enterprise .pr-panel,
.product-rules-enterprise .pr-list-panel,
.product-rules-enterprise .pr-detail,
.product-rules-enterprise .pr-detail-hero,
.product-rules-enterprise .pr-block,
.product-rules-enterprise .pr-mini,
.product-rules-enterprise .pr-keyword-section,
.product-rules-enterprise .pr-list-item,
.product-rules-enterprise .pr-empty,
.product-rules-enterprise .pr-modal,
.product-rules-enterprise .pr-modal-head,
.product-rules-enterprise .pr-modal-body,
.product-rules-enterprise .pr-modal-foot,
.product-rules-enterprise .pr-danger {
  background:linear-gradient(180deg,var(--phase175a-card),rgba(3,7,18,.88))!important;
  border:1px solid var(--phase175a-border)!important;
  color:var(--phase175a-text)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.product-rules-enterprise .pr-kpi,
.product-rules-enterprise .pr-mini,
.product-rules-enterprise .pr-list-item.is-selected,
.product-rules-enterprise .pr-detail-hero {
  background:radial-gradient(circle at 16% 0%,rgba(139,92,246,.20),transparent 42%),linear-gradient(145deg,var(--phase175a-card-2),rgba(2,6,23,.92))!important;
  border-color:var(--phase175a-border-hot)!important;
}
.product-rules-enterprise .pr-title,
.product-rules-enterprise .pr-detail-title,
.product-rules-enterprise .pr-panel-title,
.product-rules-enterprise .pr-block-title,
.product-rules-enterprise .pr-kpi-value,
.product-rules-enterprise .pr-mini-value,
.product-rules-enterprise .pr-item-title,
.product-rules-enterprise .pr-readable {
  color:var(--phase175a-text)!important;
}
.product-rules-enterprise .pr-subtitle,
.product-rules-enterprise .pr-kpi-label,
.product-rules-enterprise .pr-kpi-note,
.product-rules-enterprise .pr-panel-sub,
.product-rules-enterprise .pr-item-sub,
.product-rules-enterprise .pr-mini-label,
.product-rules-enterprise .pr-path,
.product-rules-enterprise .pr-help,
.product-rules-enterprise .pr-group-label {
  color:var(--phase175a-muted)!important;
}

/* AI Chat */
.noura-chat-page,
.noura-chat-page .noura-workspace,
.noura-chat-page .noura-side-panel {
  color:var(--phase175a-text)!important;
}
.noura-chat-page .noura-chat-hero,
.noura-chat-page .noura-main-panel,
.noura-chat-page .noura-side-card,
.noura-chat-page .noura-chat-header,
.noura-chat-page .noura-chat-area,
.noura-chat-page .noura-composer,
.noura-chat-page .noura-empty-state,
.noura-chat-page .noura-insight-item,
.noura-chat-page .noura-brand-block {
  background:linear-gradient(180deg,var(--phase175a-card),rgba(3,7,18,.88))!important;
  border:1px solid var(--phase175a-border)!important;
  color:var(--phase175a-text)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.noura-chat-page .noura-msg-bubble.is-assistant {
  background:linear-gradient(145deg,rgba(15,23,42,.96),rgba(8,17,34,.92))!important;
  border:1px solid rgba(125,145,255,.20)!important;
  color:var(--phase175a-text)!important;
}
.noura-chat-page .noura-msg-bubble.is-user {
  background:linear-gradient(135deg,rgba(124,58,237,.92),rgba(8,145,178,.78))!important;
  border:1px solid rgba(167,139,250,.38)!important;
  color:#fff!important;
}
.noura-chat-page .noura-chat-hero-title,
.noura-chat-page .noura-side-card-title,
.noura-chat-page .noura-agent-name,
.noura-chat-page .noura-empty-title,
.noura-chat-page .noura-msg-body {
  color:var(--phase175a-text)!important;
}
.noura-chat-page .noura-chat-hero-subtitle,
.noura-chat-page .noura-agent-status,
.noura-chat-page .noura-empty-text,
.noura-chat-page .noura-msg-meta {
  color:var(--phase175a-muted)!important;
}

/* Product Knowledge modals and detail/field cards */
.pk-enterprise-page .pk-kpi,
.pk-enterprise-page .pk-table-wrap,
.pk-enterprise-page .pk-toolbar,
.pk-enterprise-page .pk-modal-card,
.pk-enterprise-page .pk-modal-head,
.pk-enterprise-page .pk-modal-body,
.pk-enterprise-page .pk-section,
.pk-enterprise-page .pk-preview-block,
.pk-enterprise-page .pk-empty,
.pk-enterprise-page .pk-pagination,
.pk-enterprise-page .pk-view-grid > *,
.pk-enterprise-page .noura-field,
.product-knowledge-page .pk-kpi,
.product-knowledge-page .pk-table-wrap,
.product-knowledge-page .pk-toolbar,
.product-knowledge-page .pk-modal-card,
.product-knowledge-page .pk-modal-head,
.product-knowledge-page .pk-modal-body,
.product-knowledge-page .pk-section,
.product-knowledge-page .pk-preview-block,
.product-knowledge-page .pk-empty,
.product-knowledge-page .noura-field {
  background:linear-gradient(180deg,var(--phase175a-card),rgba(3,7,18,.88))!important;
  border:1px solid var(--phase175a-border)!important;
  color:var(--phase175a-text)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.pk-enterprise-page .pk-kpi,
.pk-enterprise-page .pk-section,
.pk-enterprise-page .pk-preview-block,
.product-knowledge-page .pk-kpi,
.product-knowledge-page .pk-section,
.product-knowledge-page .pk-preview-block {
  background:radial-gradient(circle at 100% 0%,rgba(34,211,238,.13),transparent 38%),linear-gradient(145deg,var(--phase175a-card-2),rgba(2,6,23,.92))!important;
}
.pk-enterprise-page .pk-section-title,
.pk-enterprise-page .pk-preview-title,
.pk-enterprise-page .pk-kpi-value,
.pk-enterprise-page .pk-product-title,
.product-knowledge-page .pk-section-title,
.product-knowledge-page .pk-preview-title,
.product-knowledge-page .pk-kpi-value,
.product-knowledge-page .pk-product-title {
  color:var(--phase175a-text)!important;
}
.pk-enterprise-page .pk-kpi-label,
.pk-enterprise-page .pk-kpi-sub,
.pk-enterprise-page .pk-muted-small,
.product-knowledge-page .pk-kpi-label,
.product-knowledge-page .pk-kpi-sub,
.product-knowledge-page .pk-muted-small {
  color:var(--phase175a-muted)!important;
}

/* Images catalog, modals, form panels, asset cards */
.images-enterprise-page,
.images-enterprise-page .images-tools-grid,
.images-enterprise-page .images-detail-layout {
  color:var(--phase175a-text)!important;
}
.images-enterprise-page .images-hero,
.images-enterprise-page .images-view-toggle,
.images-enterprise-page .images-asset-card,
.images-enterprise-page .images-asset-preview,
.images-enterprise-page .images-table-wrap,
.images-enterprise-page .images-detail-preview,
.images-enterprise-page .images-dropzone,
.images-enterprise-page .images-pagination,
.images-enterprise-page .images-semantic-results .images-asset-card,
.images-modal-box,
.images-modal-header,
.images-modal-box .images-detail-preview,
.images-modal-box .images-dropzone,
.images-modal-box .noura-field {
  background:linear-gradient(180deg,var(--phase175a-card),rgba(3,7,18,.88))!important;
  border:1px solid var(--phase175a-border)!important;
  color:var(--phase175a-text)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.images-enterprise-page .images-asset-preview,
.images-enterprise-page .images-detail-preview,
.images-modal-box .images-detail-preview {
  background:radial-gradient(circle at 50% 0%,rgba(34,211,238,.10),transparent 44%),rgba(2,6,23,.76)!important;
}
.images-enterprise-page .images-asset-title,
.images-modal-box .noura-section-title {
  color:var(--phase175a-text)!important;
}
.images-enterprise-page .images-asset-meta,
.images-enterprise-page .noura-section-sub,
.images-modal-box .noura-section-sub {
  color:var(--phase175a-muted)!important;
}

/* Operations Dashboard realtime cards */
.dashboard-page.enhanced .dash-toolbar,
.dashboard-page.enhanced .dash-status,
.dashboard-page.enhanced .dash-card,
.dashboard-page.enhanced .dash-status-item,
.dashboard-page.enhanced .dash-metric,
.dashboard-page.enhanced .dash-total,
.dashboard-page.enhanced .dash-metric-group,
.dashboard-page.enhanced .dash-chart-wrap,
.dashboard-page.enhanced .dash-heatmap,
.dashboard-page.enhanced .dashboard-v2-widget,
.dashboard-page.enhanced .dashboard-v2-glow-card {
  background:linear-gradient(180deg,var(--phase175a-card),rgba(3,7,18,.88))!important;
  border:1px solid var(--phase175a-border)!important;
  color:var(--phase175a-text)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.dashboard-page.enhanced .dash-status-item,
.dashboard-page.enhanced .dash-metric,
.dashboard-page.enhanced .dash-total {
  background:radial-gradient(circle at 100% 0%,rgba(139,92,246,.14),transparent 38%),linear-gradient(145deg,var(--phase175a-card-2),rgba(2,6,23,.92))!important;
}
.dashboard-page.enhanced h2,
.dashboard-page.enhanced h3,
.dashboard-page.enhanced .dash-status-value,
.dashboard-page.enhanced .dash-metric-value,
.dashboard-page.enhanced .dash-total strong {
  color:var(--phase175a-text)!important;
}
.dashboard-page.enhanced .muted,
.dashboard-page.enhanced .dash-status-label,
.dashboard-page.enhanced .dash-metric-label,
.dashboard-page.enhanced .dash-total span,
.dashboard-page.enhanced .dash-updated,
.dashboard-page.enhanced .dash-mini-note {
  color:var(--phase175a-muted)!important;
}

/* Conversation detail modal/cards */
.conversations-enterprise-page .conv-modal-card,
.conversations-enterprise-page .conv-modal-head,
.conversations-enterprise-page .conv-modal-body,
.conversations-enterprise-page .conv-modal-meta,
.conversations-enterprise-page .conv-chat-panel,
.conversations-enterprise-page .conv-modal-msg-bubble,
.conversations-enterprise-page .conv-empty-state,
.conversations-enterprise-page .conv-kpi-card,
.conversations-enterprise-page .conv-table-card,
.conversations-enterprise-page .conv-table-wrap {
  background:linear-gradient(180deg,var(--phase175a-card),rgba(3,7,18,.88))!important;
  border:1px solid var(--phase175a-border)!important;
  color:var(--phase175a-text)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.conversations-enterprise-page .conv-modal-msg-bubble.is-assistant {
  background:linear-gradient(145deg,rgba(15,23,42,.97),rgba(8,17,34,.94))!important;
  color:var(--phase175a-text)!important;
}
.conversations-enterprise-page .conv-modal-msg-bubble.is-user {
  background:linear-gradient(135deg,rgba(124,58,237,.95),rgba(8,145,178,.80))!important;
  color:#fff!important;
  border-color:rgba(167,139,250,.38)!important;
}
.conversations-enterprise-page .conv-modal-msg-body,
.conversations-enterprise-page .conv-modal-title,
.conversations-enterprise-page .conv-kpi-value {
  color:var(--phase175a-text)!important;
}
.conversations-enterprise-page .conv-modal-msg-meta,
.conversations-enterprise-page .conv-modal-subtitle,
.conversations-enterprise-page .conv-kpi-label,
.conversations-enterprise-page .conv-kpi-sub {
  color:var(--phase175a-muted)!important;
}

/* Shared controls inside the targeted pages */
.product-rules-enterprise input,
.product-rules-enterprise textarea,
.product-rules-enterprise select,
.noura-chat-page input,
.noura-chat-page textarea,
.noura-chat-page select,
.pk-enterprise-page input,
.pk-enterprise-page textarea,
.pk-enterprise-page select,
.product-knowledge-page input,
.product-knowledge-page textarea,
.product-knowledge-page select,
.images-enterprise-page input,
.images-enterprise-page textarea,
.images-enterprise-page select,
.images-modal-box input,
.images-modal-box textarea,
.images-modal-box select,
.dashboard-page.enhanced input,
.dashboard-page.enhanced textarea,
.dashboard-page.enhanced select,
.conversations-enterprise-page input,
.conversations-enterprise-page textarea,
.conversations-enterprise-page select {
  background:rgba(2,6,23,.82)!important;
  border:1px solid rgba(125,145,255,.24)!important;
  color:var(--phase175a-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.product-rules-enterprise input::placeholder,
.product-rules-enterprise textarea::placeholder,
.noura-chat-page input::placeholder,
.noura-chat-page textarea::placeholder,
.pk-enterprise-page input::placeholder,
.pk-enterprise-page textarea::placeholder,
.product-knowledge-page input::placeholder,
.product-knowledge-page textarea::placeholder,
.images-enterprise-page input::placeholder,
.images-enterprise-page textarea::placeholder,
.images-modal-box input::placeholder,
.images-modal-box textarea::placeholder,
.conversations-enterprise-page input::placeholder,
.conversations-enterprise-page textarea::placeholder {
  color:rgba(159,176,208,.72)!important;
}
.product-rules-enterprise table,
.product-rules-enterprise thead,
.product-rules-enterprise tbody,
.product-rules-enterprise tr,
.product-rules-enterprise th,
.product-rules-enterprise td,
.pk-enterprise-page table,
.pk-enterprise-page thead,
.pk-enterprise-page tbody,
.pk-enterprise-page tr,
.pk-enterprise-page th,
.pk-enterprise-page td,
.images-enterprise-page table,
.images-enterprise-page thead,
.images-enterprise-page tbody,
.images-enterprise-page tr,
.images-enterprise-page th,
.images-enterprise-page td,
.conversations-enterprise-page table,
.conversations-enterprise-page thead,
.conversations-enterprise-page tbody,
.conversations-enterprise-page tr,
.conversations-enterprise-page th,
.conversations-enterprise-page td {
  background:rgba(2,6,23,.34)!important;
  color:var(--phase175a-text)!important;
  border-color:rgba(125,145,255,.14)!important;
}
.product-rules-enterprise th,
.pk-enterprise-page th,
.images-enterprise-page th,
.conversations-enterprise-page th {
  color:var(--phase175a-muted)!important;
  background:rgba(15,23,42,.72)!important;
}

/* Phase 18.2 Real AI Copilot: read-only result rendering */
.copilot-ask-btn {
  width:100%;
  justify-content:center!important;
  box-shadow:0 16px 38px rgba(139,92,246,.22)!important;
}

.copilot-ask-btn:disabled {
  cursor:wait!important;
  opacity:.68!important;
}

.copilot-result {
  display:grid;
  gap:12px;
  min-height:160px;
  overflow:auto;
  padding:2px 4px 20px 0;
}

.copilot-empty-state,
.copilot-loading-state,
.copilot-error-state,
.copilot-answer-card,
.copilot-result-card,
.copilot-result-table {
  border:1px solid rgba(148,163,184,.18)!important;
  background:linear-gradient(180deg,rgba(15,23,42,.82),rgba(2,6,23,.70))!important;
  color:#e5edf8!important;
  border-radius:18px!important;
  box-shadow:0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.copilot-empty-state,
.copilot-loading-state,
.copilot-error-state {
  padding:14px;
  color:#b6c4d8!important;
  font-size:13px;
  line-height:1.55;
}

.copilot-error-state {
  border-color:rgba(248,113,113,.32)!important;
  color:#fecaca!important;
}

.copilot-answer-card {
  padding:14px;
}

.copilot-answer-card p {
  margin:10px 0 0;
  color:#edf4ff!important;
  line-height:1.6;
  font-weight:750;
}

.copilot-answer-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.copilot-answer-meta span,
.copilot-warnings span {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  color:#c4b5fd!important;
  background:rgba(139,92,246,.13)!important;
  border:1px solid rgba(139,92,246,.25)!important;
  font-size:11px;
  font-weight:900;
  letter-spacing:.03em;
}

.copilot-result-cards {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.copilot-result-card {
  display:grid;
  gap:6px;
  padding:12px;
}

.copilot-result-card span,
.copilot-result-card em {
  color:#94a3b8!important;
  font-size:11px;
  font-style:normal;
  line-height:1.35;
}

.copilot-result-card strong {
  color:#fff!important;
  font-size:22px;
  line-height:1;
}

.copilot-result-card.success { border-color:rgba(34,197,94,.28)!important; }
.copilot-result-card.warning { border-color:rgba(251,191,36,.32)!important; }
.copilot-result-card.gold { border-color:rgba(245,158,11,.32)!important; }
.copilot-result-card.info { border-color:rgba(34,211,238,.28)!important; }

.copilot-result-table {
  padding:12px;
}

.copilot-result-table h3 {
  margin:0 0 10px;
  color:#fff!important;
  font-size:13px;
}

.copilot-table-scroll {
  overflow:auto;
  max-height:260px;
}

.copilot-result-table table {
  width:100%;
  border-collapse:collapse;
  min-width:520px;
}

.copilot-result-table th,
.copilot-result-table td {
  padding:8px 9px;
  border-bottom:1px solid rgba(148,163,184,.12)!important;
  color:#dbeafe!important;
  font-size:12px;
  text-align:left;
  vertical-align:top;
}

.copilot-result-table th {
  color:#93c5fd!important;
  background:rgba(59,130,246,.08)!important;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.copilot-warnings {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.copilot-used-tools,
.copilot-citations {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid rgba(148,163,184,.16)!important;
  border-radius:16px!important;
  background:rgba(15,23,42,.58)!important;
}

.copilot-used-tools strong,
.copilot-citations strong {
  width:100%;
  color:#e5edf8!important;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.copilot-used-tools span,
.copilot-citations span {
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  color:#bae6fd!important;
  background:rgba(14,165,233,.12)!important;
  border:1px solid rgba(14,165,233,.24)!important;
  font-size:11px;
  font-weight:900;
}

@media (max-width:620px) {
  .copilot-result-cards { grid-template-columns:1fr; }
  .copilot-result-table table { min-width:420px; }
}

/* =========================================================
   DESIGN SYSTEM FOUNDATION — Phase 1 (Claude Frontend Lead)
   Additive only: Modal, Drawer, LiveRegion, FormField, Timeline,
   DataTable, plus StatusBadge/TabBar/SearchInput/FilterBar support.
   No :root/token changes here — see docs/CLAUDE_DESIGN_SYSTEM.md
   for the separate token-consolidation proposal.
   Not yet wired into any screen — foundation layer only.
   ========================================================= */

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

.ds-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ds-status-badge__icon {
  margin-right: 4px;
  font-size: .85em;
  line-height: 1;
}

.ds-modal-backdrop,
.ds-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  background: rgba(4, 8, 18, .58);
  backdrop-filter: blur(6px);
}

.ds-modal-backdrop[hidden],
.ds-drawer-backdrop[hidden] {
  display: none;
}

.ds-modal-backdrop {
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.ds-modal {
  width: min(640px, 100%);
  max-height: calc(100vh - var(--space-8));
  display: flex;
  flex-direction: column;
  border-radius: var(--radius, 18px);
  overflow: hidden;
}

.ds-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.ds-modal__title {
  margin: 0;
  font-size: var(--font-xl);
}

.ds-modal__body {
  padding: 0 var(--space-5) var(--space-5);
  overflow: auto;
}

.ds-modal__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

.ds-drawer-backdrop {
  align-items: stretch;
  justify-content: flex-end;
}

.ds-drawer-backdrop.side-left,
.ds-drawer.side-left {
  justify-content: flex-start;
}

.ds-drawer {
  width: min(420px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .22s ease;
}

.ds-drawer.side-left {
  transform: translateX(-100%);
}

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

.ds-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-3);
}

.ds-drawer__title {
  margin: 0;
  font-size: var(--font-xl);
}

.ds-drawer__body {
  padding: 0 var(--space-5) var(--space-5);
  overflow: auto;
  flex: 1;
}

.ds-drawer__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

.ds-form-field {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.ds-form-field__label {
  font-size: var(--font-sm);
  font-weight: 850;
  color: var(--muted);
}

.ds-form-field__required {
  color: var(--danger);
}

.ds-form-field__hint {
  font-size: var(--font-xs);
  color: var(--muted);
}

.ds-form-field__error {
  font-size: var(--font-xs);
  color: var(--danger);
  font-weight: 700;
}

.ds-form-field.has-error .ds-form-field__control input,
.ds-form-field.has-error .ds-form-field__control select,
.ds-form-field.has-error .ds-form-field__control textarea {
  border-color: var(--danger) !important;
}

.ds-data-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.ds-data-table {
  width: 100%;
  border-collapse: collapse;
}

.ds-data-table th,
.ds-data-table td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ds-data-table th {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.ds-timeline-wrap {
  width: 100%;
}

.ds-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.ds-timeline__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.ds-timeline__marker {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--muted);
}

.ds-timeline__item.tone-good .ds-timeline__marker,
.ds-timeline__item.tone-success .ds-timeline__marker { background: var(--success); }
.ds-timeline__item.tone-warning .ds-timeline__marker { background: var(--warning); }
.ds-timeline__item.tone-danger .ds-timeline__marker,
.ds-timeline__item.tone-bad .ds-timeline__marker { background: var(--danger); }
.ds-timeline__item.tone-gold .ds-timeline__marker { background: var(--noura-gold, var(--accent)); }

.ds-timeline__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.ds-timeline__time {
  font-size: var(--font-xs);
  color: var(--muted);
}

.ds-timeline__description {
  margin: var(--space-1) 0 0;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 620px) {
  .ds-modal { width: 100%; max-height: 100vh; border-radius: 0; }
  .ds-modal-backdrop { padding: 0; }
  .ds-drawer { width: 100vw; }
}

/* =========================================================
   ENTERPRISE SAAS UI REDESIGN (Claude, Frontend Lead)
   Sidebar, topbar, and dashboard shell rebuilt to match the
   approved enterprise SaaS visual reference. Additive/override
   layer only — no new unconditional :root token block. Reuses
   the dark navy/purple/cyan/green palette already forced by the
   existing "Phase 17.3/17.4" cascade layers above (--bg, --panel,
   --text, --muted, --border, --accent, --success, --warning,
   --danger already resolve to that palette after the gold-theme
   neutralization earlier in this file) plus the already-defined
   --phase17-* tokens for the specific shades used in this section.
   ========================================================= */

:root {
  --ent-radius-sm: 12px;
  --ent-radius-md: 16px;
  --ent-radius-lg: 20px;
  --ent-space-1: 4px;
  --ent-space-2: 8px;
  --ent-space-3: 12px;
  --ent-space-4: 16px;
  --ent-space-5: 20px;
  --ent-space-6: 24px;
  --ent-blue: #3b82f6;
  --ent-transition-fast: 140ms cubic-bezier(.4,0,.2,1);
  --ent-transition-base: 220ms cubic-bezier(.4,0,.2,1);
}

/* ===== Motion primitives ===== */

@keyframes ent-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ent-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ent-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
  50% { opacity: .82; box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

@keyframes ent-shimmer {
  from { background-position: -320px 0; }
  to { background-position: 320px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.ent-kpi-grid > *,
.ent-dashboard-grid > * {
  animation: ent-slide-up var(--ent-transition-base) both;
}

.ent-kpi-grid > *:nth-child(1) { animation-delay: 0ms; }
.ent-kpi-grid > *:nth-child(2) { animation-delay: 40ms; }
.ent-kpi-grid > *:nth-child(3) { animation-delay: 80ms; }
.ent-kpi-grid > *:nth-child(4) { animation-delay: 120ms; }
.ent-kpi-grid > *:nth-child(5) { animation-delay: 160ms; }

.ds-spinner {
  background: linear-gradient(90deg, var(--phase17-purple,#8b5cf6) 0%, var(--phase17-cyan,#22d3ee) 50%, var(--phase17-purple,#8b5cf6) 100%);
  background-size: 200% 100%;
  animation: ent-shimmer 1.4s linear infinite;
}

/* ===== Sidebar ===== */

.ent-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(2,4,11,.62);
  backdrop-filter: blur(2px);
  animation: ent-fade-in var(--ent-transition-fast) both;
}

.ent-sidebar-backdrop[hidden] { display: none; }

.ent-sidebar {
  width: 264px;
  padding: 14px 12px;
  transition: width var(--ent-transition-base), transform var(--ent-transition-base);
}

.ent-brand {
  padding: 8px 6px 14px !important;
}

.ent-workspace-card {
  transition: border-color var(--ent-transition-fast), background var(--ent-transition-fast);
}

.ent-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ent-nav .nav__item--top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 10px;
  border-radius: var(--ent-radius-sm);
  font-weight: 800;
  font-size: 13.5px;
  color: var(--text);
  background: linear-gradient(135deg, rgba(139,92,246,.20), rgba(34,211,238,.10));
  border: 1px solid rgba(139,92,246,.28);
  transition: background var(--ent-transition-fast), border-color var(--ent-transition-fast), transform var(--ent-transition-fast);
}

.ent-nav .nav__item--top:hover {
  transform: translateX(2px);
  border-color: rgba(139,92,246,.5);
}

.ent-nav .nav__item--top.active,
.ent-nav .nav__item--top[aria-current="page"] {
  background: linear-gradient(135deg, var(--phase17-purple,#8b5cf6), var(--phase17-cyan,#22d3ee));
  color: #05070d;
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(139,92,246,.30);
}

.ent-nav .nav__section {
  margin-top: 6px;
}

.ent-nav .nav__sectionToggle {
  padding: 6px 10px;
  font-size: 10.5px;
}

.ent-nav .nav__title {
  letter-spacing: .09em;
  font-weight: 850;
  opacity: .72;
}

.ent-nav .nav__item {
  padding: 7px 10px;
  font-size: 13px;
  gap: 9px;
  border-radius: 10px;
  transition: background var(--ent-transition-fast), color var(--ent-transition-fast), transform var(--ent-transition-fast);
}

.ent-nav .nav__item:hover {
  transform: translateX(2px);
}

.ent-nav .nav__badge {
  font-size: 9.5px;
  padding: 1px 6px;
}

.ent-nav-section--dev {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  opacity: .82;
}

.ent-nav-section--dev .nav__title {
  opacity: .55;
}

/* ===== Topbar ===== */

.ent-topbar {
  display: flex;
  align-items: center;
  gap: var(--ent-space-4);
  min-height: 60px;
  padding: 0 var(--ent-space-5);
}

.ent-mobile-nav-toggle {
  display: none;
}

.ent-topbar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  max-width: 460px;
  margin: 0 auto;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color var(--ent-transition-fast), background var(--ent-transition-fast), box-shadow var(--ent-transition-fast);
}

.ent-topbar-search:hover,
.ent-topbar-search:focus-visible {
  border-color: rgba(139,92,246,.4);
  background: rgba(139,92,246,.08);
  outline: none;
}

.ent-topbar-search span {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ent-topbar-search kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  color: var(--muted);
}

.ent-icon-btn {
  transition: background var(--ent-transition-fast), border-color var(--ent-transition-fast), transform var(--ent-transition-fast);
}

.ent-icon-btn:hover {
  transform: translateY(-1px);
}

.portal-status-dot i {
  animation: ent-pulse 2.2s ease-in-out infinite;
}

/* ===== Buttons, cards, inputs: shared micro-interactions ===== */

.btn,
.iconBtn,
.ds-tab,
.ds-status-badge,
.nav__item {
  transition: background var(--ent-transition-fast), border-color var(--ent-transition-fast), color var(--ent-transition-fast), transform var(--ent-transition-fast), box-shadow var(--ent-transition-fast);
}

.btn:active,
.iconBtn:active {
  transform: scale(.97);
}

.card,
.ds-data-card,
.ent-widget,
.ent-kpi-card {
  transition: transform var(--ent-transition-base), box-shadow var(--ent-transition-base), border-color var(--ent-transition-base);
}

/* ===== Portal dashboard shell ===== */

.ent-portal-home {
  padding: var(--ent-space-5) var(--ent-space-6) 40px;
  max-width: 1760px;
  margin: 0 auto;
}

.ent-home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ent-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--ent-space-5);
  animation: ent-fade-in var(--ent-transition-base) both;
}

.ent-home-head-actions {
  display: flex;
  align-items: center;
  gap: var(--ent-space-3);
}

/* ===== KPI strip ===== */

.ent-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ent-space-4);
  margin-bottom: var(--ent-space-5);
}

.ent-kpi-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--ent-radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  padding: var(--ent-space-4) var(--ent-space-5);
  min-height: 128px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ent-kpi-card::before {
  content: "";
  position: absolute;
  inset: auto -30px -40px auto;
  width: 110px;
  height: 110px;
  border-radius: 999px;
  background: var(--ent-kpi-accent, rgba(139,92,246,.16));
  filter: blur(6px);
  pointer-events: none;
}

.ent-kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139,92,246,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.ent-kpi-card.accent-purple { --ent-kpi-accent: rgba(139,92,246,.20); }
.ent-kpi-card.accent-cyan { --ent-kpi-accent: rgba(34,211,238,.18); }
.ent-kpi-card.accent-green { --ent-kpi-accent: rgba(34,197,94,.18); }
.ent-kpi-card.accent-blue { --ent-kpi-accent: rgba(59,130,246,.18); }
.ent-kpi-card.accent-pink { --ent-kpi-accent: rgba(236,72,153,.18); }

.ent-kpi-top {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.ent-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: var(--ent-kpi-accent, rgba(139,92,246,.16));
  font-size: 13px;
}

.ent-kpi-label {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ent-kpi-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--text);
  position: relative;
  z-index: 1;
}

.ent-kpi-value.is-pending {
  font-size: 14px;
  font-weight: 750;
  color: var(--muted);
  letter-spacing: 0;
}

.ent-kpi-foot {
  margin-top: 8px;
  min-height: 20px;
  position: relative;
  z-index: 1;
}

.ent-kpi-foot em {
  font-style: normal;
  font-size: 12px;
  font-weight: 750;
  color: var(--phase17-green, var(--success));
}

.ent-kpi-foot em.negative {
  color: var(--phase17-red, var(--danger));
}

.ent-kpi-sparkline {
  width: 100%;
  height: 32px;
  overflow: visible;
}

.ent-kpi-sparkline-line {
  fill: none;
  stroke: var(--phase17-cyan, #22d3ee);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===== Dashboard widget grid ===== */

.ent-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ent-space-4);
}

.ent-widget--wide {
  grid-column: span 2;
}

.ent-widget {
  border-radius: var(--ent-radius-lg);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  padding: var(--ent-space-4) var(--ent-space-5) var(--ent-space-5);
}

.ent-widget:hover {
  border-color: rgba(139,92,246,.28);
}

.ent-widget--soft {
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(34,211,238,.05));
}

.ent-widget-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ent-space-3);
  margin-bottom: var(--ent-space-3);
}

.ent-widget-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.ent-widget-head a {
  font-size: 12px;
  font-weight: 750;
  color: var(--phase17-cyan, var(--accent2));
}

.ent-widget-sub {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

.ent-widget-body > div:not([class]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ent-space-3);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.ent-widget-body > div:not([class]):last-child {
  border-bottom: none;
}

.ent-widget-body > div:not([class]) span:first-child {
  color: var(--muted);
}

/* ===== Trend chart ===== */

.ent-trend-chart-wrap {
  height: 220px;
}

.ent-trend-chart {
  width: 100%;
  height: 100%;
}

.ent-trend-area {
  fill: url(#ent-trend-gradient);
  fill: rgba(139,92,246,.16);
  opacity: 1;
}

.ent-trend-line {
  fill: none;
  stroke: var(--phase17-purple, #8b5cf6);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ent-trend-dot {
  fill: var(--phase17-purple, #8b5cf6);
  stroke: var(--bg);
  stroke-width: 1.5;
}

/* ===== Channel rows ===== */

.ent-channel-row {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  align-items: center;
  gap: var(--ent-space-3);
  padding: 8px 0;
}

.ent-channel-name {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ent-channel-bar {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}

.ent-channel-bar b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--phase17-purple,#8b5cf6), var(--phase17-cyan,#22d3ee));
  transition: width var(--ent-transition-base);
}

.ent-channel-count {
  font-size: 13px;
  font-weight: 800;
  text-align: right;
}

/* ===== Generic stat stacks / lists used across widgets ===== */

.ent-ci-stats,
.ent-stat-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ent-space-3);
}

.ent-ci-stats > div,
.ent-stat-stack > div {
  padding: 10px 12px;
  border-radius: var(--ent-radius-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
}

.ent-ci-stats span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
}

.ent-ci-stats strong {
  font-size: 18px;
  font-weight: 850;
}

.ent-stat-stack strong {
  display: block;
  font-size: 20px;
  font-weight: 850;
}

.ent-stat-stack span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
}

.ent-conversation-list {
  display: grid;
  gap: var(--ent-space-3);
}

.ent-conversation-row {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.ent-conversation-row:last-child {
  border-bottom: none;
}

.ent-conversation-row strong {
  font-size: 13px;
}

.ent-conversation-row span {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ent-conversation-row em {
  font-style: normal;
  font-size: 11px;
  color: var(--phase17-cyan, var(--accent2));
}

.ent-copilot-pointer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* ===== Responsive ===== */

@media (max-width: 1400px) {
  .ent-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ent-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent-widget--wide { grid-column: span 2; }
}

@media (max-width: 980px) {
  .ent-mobile-nav-toggle {
    display: inline-flex;
  }

  .ent-sidebar {
    position: fixed;
    z-index: 41;
    transform: translateX(-100%);
    transition: transform var(--ent-transition-base);
  }

  .ent-sidebar.open {
    transform: translateX(0);
  }

  .ent-topbar-search span,
  .ent-topbar-search kbd {
    display: none;
  }

  .ent-topbar-search {
    max-width: 44px;
    padding: 9px;
    justify-content: center;
  }

  .ent-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ent-dashboard-grid { grid-template-columns: 1fr; }
  .ent-widget--wide { grid-column: span 1; }
}

@media (max-width: 620px) {
  .ent-portal-home { padding: var(--ent-space-4); }
  .ent-kpi-grid { grid-template-columns: 1fr; }
  .ent-home-head { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   ENTERPRISE UI OVERHAUL — PHASE 1 (Claude, Frontend Lead)
   Shell refinements on top of the previous dashboard pass:
   N-only logomark (Tatouche branding removed from the shell),
   hover-expand collapsed sidebar, notification/user-menu
   affordances, and the remaining CSS-only micro-interactions
   (metric counter is JS-driven in app.js; ripple/glow and
   skeleton shimmer live here). No new unconditional :root
   block — reuses/retunes the existing forced dark palette.
   ========================================================= */

/* ===== Logomark ===== */

.ent-logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--phase17-purple, #7c5cff), var(--phase17-cyan, #22d3ee));
  color: #0b1020;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.02em;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(124,92,255,.35);
}

.ent-logo-mark img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* ===== Hover-expand collapsed sidebar ===== */

.ent-sidebar.collapsed:hover {
  width: 264px;
}

.ent-sidebar.collapsed:hover .brand__text,
.ent-sidebar.collapsed:hover .nav__title,
.ent-sidebar.collapsed:hover .nav__item span:not(.nav__icon),
.ent-sidebar.collapsed:hover .nav__badge,
.ent-sidebar.collapsed:hover .sidebarFooter {
  display: initial !important;
}

.ent-sidebar.collapsed:hover .nav__item {
  justify-content: flex-start !important;
}

/* ===== Notification bell / icon buttons ===== */

.ent-icon-btn {
  position: relative;
}

.ent-icon-btn .ent-badge-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--phase17-red, #f43f5e);
  border: 2px solid var(--bg);
  display: none;
}

.ent-icon-btn.has-badge .ent-badge-dot {
  display: block;
}

/* ===== User menu ===== */

.ent-user-menu {
  position: relative;
}

.ent-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  transition: background var(--ent-transition-fast), border-color var(--ent-transition-fast);
}

.ent-user-trigger:hover,
.ent-user-trigger[aria-expanded="true"] {
  background: rgba(124,92,255,.10);
  border-color: rgba(124,92,255,.30);
}

.ent-user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--phase17-purple, #7c5cff), var(--phase17-cyan, #22d3ee));
  color: #0b1020;
  font-size: 11.5px;
  font-weight: 900;
}

.ent-user-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: var(--ent-radius-md);
  border: 1px solid var(--border);
  background: var(--panel2, #141c2f);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  z-index: 60;
  animation: ent-slide-up var(--ent-transition-fast) both;
}

.ent-user-menu-panel[hidden] {
  display: none;
}

.ent-user-menu-panel .btn {
  width: 100%;
  justify-content: flex-start;
}

/* ===== Buttons: glow-ripple micro-interaction ===== */

.btn,
.iconBtn {
  position: relative;
  overflow: hidden;
}

.btn::after,
.iconBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(124,92,255,.35), transparent 60%);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--ent-transition-base), transform var(--ent-transition-base);
  pointer-events: none;
}

.btn:active::after,
.iconBtn:active::after {
  opacity: 1;
  transform: scale(1.4);
  transition: none;
}

.btn.primary:focus-visible,
.btn:focus-visible,
.iconBtn:focus-visible {
  outline: 2px solid var(--phase17-cyan, #22d3ee);
  outline-offset: 2px;
}

/* ===== Skeleton shimmer utility ===== */

.ent-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--ent-radius-sm);
  background: rgba(255,255,255,.05);
}

.ent-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  background-size: 200% 100%;
  animation: ent-shimmer 1.5s linear infinite;
}

.ent-kpi-value.is-pending.ent-skeleton {
  height: 22px;
  width: 70%;
}

/* ===== Card hover polish for the design-system primitives ===== */

.ds-modal,
.ds-drawer {
  animation: ent-slide-up var(--ent-transition-base) both;
}

/* =========================================================
   PRODUCT KNOWLEDGE — Enterprise UI Migration (Claude)
   Replaces the screen's previously self-injected inline
   <style> block (hardcoded cream/white backgrounds and
   dark-brown text) with dark-enterprise-themed rules living
   here, and layout-only classes shared across the page,
   toolbar, table, and both modals (view + edit).
   ========================================================= */

.pk-enterprise-page { max-width: none !important; width: 100%; }

.pk-hero { margin-bottom: var(--ent-space-5, 20px); }

.pk-kpi-grid { grid-template-columns: repeat(5, minmax(140px, 1fr)); margin-top: var(--ent-space-4, 16px); }

.pk-knowledge-intelligence-panel { margin-bottom: var(--ent-space-4, 16px); }

.pk-muted-paragraph {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.pk-toolbar-card { margin-bottom: var(--ent-space-4, 16px); }

.pk-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(160px, .7fr) minmax(140px, .55fr) minmax(140px, .55fr);
  gap: var(--ent-space-3, 12px);
  align-items: start;
  margin-top: var(--ent-space-3, 12px);
}

.pk-table-region { min-height: 120px; }

.pk-product-title { font-weight: 800; line-height: 1.3; color: var(--text); }

.pk-muted-small { font-size: 12px; color: var(--muted); margin-top: 4px; }

.pk-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pk-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ent-space-3, 12px);
  flex-wrap: wrap;
  margin-top: var(--ent-space-4, 16px);
}

/* ===== Modal content (both view + edit reuse ds-modal from the Phase 1 foundation) ===== */

.pk-modal-card.ds-modal { width: min(1120px, calc(100vw - 34px)); }

.pk-modal-body {
  display: grid;
  gap: var(--ent-space-4, 16px);
}

.pk-modal-subtitle {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.pk-modal-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pk-modal-key {
  color: var(--muted);
  font-size: 12.5px;
}

.pk-section {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--ent-radius-md, 16px);
  padding: var(--ent-space-4, 16px);
  transition: border-color var(--ent-transition-fast, 140ms);
}

.pk-section:focus-within {
  border-color: rgba(124,92,255,.35);
}

.pk-section-title {
  font-size: 13.5px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .85;
}

.pk-form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ent-space-3, 12px); }
.pk-form-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ent-space-3, 12px); }
.pk-form-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ent-space-3, 12px); }

.pk-view-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ent-space-3, 12px);
}

.pk-preview-block {
  border: 1px solid var(--border);
  border-radius: var(--ent-radius-sm, 12px);
  padding: 14px;
  background: rgba(255,255,255,.025);
  min-height: 80px;
  transition: border-color var(--ent-transition-fast, 140ms), background var(--ent-transition-fast, 140ms);
}

.pk-preview-block:hover {
  border-color: rgba(124,92,255,.24);
  background: rgba(255,255,255,.04);
}

.pk-preview-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 800;
  margin-bottom: 8px;
}

.pk-pre {
  white-space: pre-wrap;
  font-family: inherit;
  line-height: 1.65;
  margin: 0;
  color: var(--text);
  direction: auto;
  unicode-bidi: plaintext;
}

.pk-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

@media (max-width: 1180px) {
  .pk-kpi-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .pk-toolbar { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .pk-kpi-grid,
  .pk-toolbar,
  .pk-form-grid-2,
  .pk-form-grid-3,
  .pk-form-grid-4,
  .pk-view-grid {
    grid-template-columns: 1fr;
  }

  .pk-actions { justify-content: flex-start; }
  .pk-modal-card.ds-modal { width: 100%; }
}

/* =========================================================
   CONVERSATIONS — Enterprise UI Migration (Claude)
   Replaces the screen's previously self-injected inline
   <style> block (hardcoded white/cream KPI cards, brown-tinted
   meta boxes, a dark-brown "user" chat bubble) with dark
   enterprise theming here. Reuses .pk-muted-small/.pk-actions
   etc. from the Product Knowledge migration where identical,
   to keep one shared vocabulary instead of duplicating rules.
   ========================================================= */

.conversations-enterprise-page { max-width: none !important; width: 100%; }

.conv-enterprise-hero { margin-bottom: var(--ent-space-5, 20px); }

.conv-kpi-grid { grid-template-columns: repeat(5, minmax(140px, 1fr)); margin-top: var(--ent-space-4, 16px); }

.conv-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .7fr) minmax(150px, .7fr) minmax(170px, .8fr) minmax(140px, .6fr);
  gap: var(--ent-space-3, 12px);
  align-items: start;
  margin-top: var(--ent-space-4, 16px);
}

.conv-table-card { margin-top: var(--ent-space-4, 16px); }

.conv-table-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--ent-space-3, 12px);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--ent-space-3, 12px);
}

.conv-title-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 240px;
}

.conv-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--phase17-purple, #7c5cff), var(--phase17-cyan, #22d3ee));
  color: #0b1020;
  font-size: 11.5px;
  font-weight: 900;
}

.conv-title-text { min-width: 0; }

.conv-title-name {
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.conv-last-message {
  max-width: 340px;
  line-height: 1.45;
  white-space: normal;
  color: var(--text);
}

.conv-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--ent-space-4, 16px);
}

.mono-small {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--muted);
}

/* ===== Conversation detail modal ===== */

.conv-modal-card.ds-modal { width: min(1100px, calc(100vw - 34px)); }

.conv-modal-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: var(--ent-space-3, 12px);
  margin-bottom: var(--ent-space-4, 16px);
}

.conv-meta-box {
  border: 1px solid var(--border);
  border-radius: var(--ent-radius-sm, 12px);
  background: rgba(255,255,255,.03);
  padding: 12px;
  transition: border-color var(--ent-transition-fast, 140ms);
}

.conv-meta-box:hover {
  border-color: rgba(124,92,255,.24);
}

.conv-meta-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.conv-meta-value {
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
  color: var(--text);
}

.conv-chat-panel {
  border: 1px solid var(--border);
  border-radius: var(--ent-radius-md, 16px);
  background: rgba(255,255,255,.02);
  padding: 16px;
  min-height: 360px;
  max-height: 55vh;
  overflow: auto;
}

.conv-modal-msg-row { display: flex; margin: 10px 0; }
.conv-modal-msg-row.is-assistant { justify-content: flex-start; }
.conv-modal-msg-row.is-user { justify-content: flex-end; }

.conv-modal-msg-bubble {
  max-width: min(640px, 82%);
  border-radius: var(--ent-radius-md, 16px);
  padding: 12px 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.24);
  border: 1px solid var(--border);
}

.conv-modal-msg-bubble.is-assistant {
  background: rgba(255,255,255,.04);
  color: var(--text);
}

.conv-modal-msg-bubble.is-user {
  background: linear-gradient(135deg, var(--phase17-purple, #7c5cff), var(--phase17-cyan, #22d3ee));
  color: #0b1020;
  border-color: transparent;
}

.conv-modal-msg-body {
  white-space: pre-wrap;
  line-height: 1.65;
  direction: auto;
  unicode-bidi: plaintext;
}

.conv-modal-msg-meta {
  margin-top: 8px;
  font-size: 11px;
  opacity: .72;
}

@media (max-width: 1100px) {
  .conv-kpi-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .conv-filter-grid { grid-template-columns: 1fr 1fr; }
  .conv-modal-meta-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .conv-kpi-grid,
  .conv-filter-grid,
  .conv-modal-meta-grid {
    grid-template-columns: 1fr;
  }

  .conv-modal-msg-bubble { max-width: 95%; }
  .conv-modal-card.ds-modal { width: 100%; }
  .conv-title-name { max-width: 160px; }
}

/* DB6-01 CTA Action Sequence foundation */
.cta-actions-workspace {
  align-items: start;
}

.cta-actions-list,
.cta-sequence-list,
.cta-preview-stack {
  display: grid;
  gap: 10px;
}

.cta-action-row,
.cta-message-row {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, .18);
  background: linear-gradient(135deg, rgba(15, 23, 42, .88), rgba(30, 41, 59, .72));
  color: var(--text, #f8fafc);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}

.cta-action-row {
  cursor: pointer;
}

.cta-action-row:hover,
.cta-action-row.active {
  border-color: rgba(168, 85, 247, .55);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, .18), 0 22px 54px rgba(79, 70, 229, .25);
}

.cta-action-row strong,
.cta-message-row strong {
  display: block;
  margin-bottom: 4px;
}

.cta-action-row small {
  display: block;
  color: var(--muted, #94a3b8);
}

/* =========================================================
   UX1-01 admin UI redesign foundation
   Dashboard-first graphite command center. This final cascade
   intentionally overrides earlier Phase 17 purple/gold-heavy
   surfaces while preserving lazy-loaded page modules.
   ========================================================= */

:root {
  --ux1-bg: #0B0F14;
  --ux1-surface: #111820;
  --ux1-surface-raised: #17202A;
  --ux1-surface-soft: #0E151C;
  --ux1-border: #26313D;
  --ux1-border-strong: #344252;
  --ux1-text: #F7FAFC;
  --ux1-muted: #A8B3C2;
  --ux1-muted-2: #748193;
  --ux1-gold: #D6A84F;
  --ux1-cyan: #2FB7D8;
  --ux1-success: #20C997;
  --ux1-warning: #F5B451;
  --ux1-danger: #EF6461;
  --ux1-info: #5AA9FF;
  --ux1-radius: 8px;
  --ux1-radius-lg: 10px;
  --ux1-shadow: 0 20px 48px rgba(0, 0, 0, .34);
  --ux1-shadow-soft: 0 12px 28px rgba(0, 0, 0, .24);
  --bg: var(--ux1-bg);
  --bg2: #090D12;
  --panel: rgba(17, 24, 32, .92);
  --panel2: rgba(23, 32, 42, .96);
  --panel3: #1C2732;
  --text: var(--ux1-text);
  --muted: var(--ux1-muted);
  --muted2: var(--ux1-muted-2);
  --border: var(--ux1-border);
  --border-strong: var(--ux1-border-strong);
  --accent: var(--ux1-gold);
  --accent2: var(--ux1-cyan);
  --accent3: var(--ux1-cyan);
  --success: var(--ux1-success);
  --danger: var(--ux1-danger);
  --warning: var(--ux1-warning);
  --radius: var(--ux1-radius-lg);
  --radius2: var(--ux1-radius);
  --radius3: 12px;
  --phase17-purple: var(--ux1-gold);
  --phase17-cyan: var(--ux1-cyan);
  --phase17-green: var(--ux1-success);
  --phase17-gold: var(--ux1-gold);
  --phase174-purple: var(--ux1-gold);
  --phase174-cyan: var(--ux1-cyan);
  --portal-purple: var(--ux1-gold);
  --portal-cyan: var(--ux1-cyan);
  --portal-gold: var(--ux1-gold);
  --noura-gold: var(--ux1-gold);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body {
  background: var(--ux1-bg) !important;
  color: var(--ux1-text);
  overflow: hidden;
}

body {
  font-family: var(--sans);
  letter-spacing: 0;
  background:
    linear-gradient(180deg, rgba(47, 183, 216, .035), transparent 28%),
    var(--ux1-bg) !important;
}

body::before {
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
}

.portal-app,
.app {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: var(--ux1-bg) !important;
}

.portal-main,
.main.portal-main,
.main {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  background: var(--ux1-bg) !important;
}

.portal-content,
.content.portal-content,
.content {
  display: block;
  width: 100%;
  max-width: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 22px 28px 36px;
  background: var(--ux1-bg) !important;
}

.portal-home {
  display: none !important;
}

.enterprise-sidebar-v2,
.ent-sidebar,
.sidebar {
  width: 264px;
  height: 100vh;
  min-height: 100vh;
  flex: 0 0 264px;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(17, 24, 32, .98), rgba(11, 15, 20, .98)) !important;
  border-right: 1px solid var(--ux1-border) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.025), 16px 0 48px rgba(0,0,0,.22);
  backdrop-filter: none;
}

.brand,
.ent-brand {
  flex: 0 0 auto;
  gap: 10px;
  min-height: 52px;
  margin: 0 0 10px;
  padding: 8px 6px 12px;
}

.brand__logo,
.ent-logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: #0B0F14;
  background: linear-gradient(135deg, var(--ux1-gold), #F1D28A) !important;
  box-shadow: 0 12px 24px rgba(214, 168, 79, .18);
}

.brand__name {
  font-size: 15px;
  font-weight: 850;
}

.nav,
.premium-sidebar-nav,
.ent-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  gap: 4px;
  padding: 4px 2px 10px;
}

.nav__section {
  margin-top: 10px;
}

.nav__sectionToggle {
  margin: 10px 0 6px;
  padding: 0 4px;
}

.nav__title {
  margin: 0;
  color: var(--ux1-muted-2);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .13em;
}

.nav__chevron {
  color: var(--ux1-muted-2);
}

.nav__item {
  min-height: 36px;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--ux1-radius);
  color: var(--ux1-muted);
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

.nav__item::before,
.nav__item::after {
  display: none;
}

.nav__item:hover {
  transform: none;
  color: var(--ux1-text);
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.07);
  box-shadow: none;
}

.nav__item.active,
.premium-sidebar-nav .nav__item.active {
  color: var(--ux1-text);
  border-color: rgba(214, 168, 79, .38);
  background:
    linear-gradient(90deg, rgba(214, 168, 79, .18), rgba(47, 183, 216, .08)) !important;
  box-shadow: inset 3px 0 0 var(--ux1-gold), 0 10px 24px rgba(0,0,0,.18);
}

.nav__icon {
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  color: var(--ux1-cyan);
  font-size: 13px;
}

.nav__badge {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(47,183,216,.28);
  color: var(--ux1-cyan);
  background: rgba(47,183,216,.08);
  font-size: 10px;
  font-weight: 800;
}

.sidebarFooter,
.premium-sidebar-footer {
  flex: 0 0 auto;
  margin-top: 10px;
  padding: 12px 4px 4px;
  border-top: 1px solid var(--ux1-border);
}

.sidebarStatusCard,
.sidebarUserCard {
  border-radius: var(--ux1-radius-lg);
  border: 1px solid rgba(214,168,79,.25);
  background: linear-gradient(180deg, rgba(214,168,79,.10), rgba(255,255,255,.025));
  box-shadow: none;
}

.enterprise-sidebar-v2.collapsed,
.ent-sidebar.collapsed,
.sidebar.collapsed {
  width: 76px;
  flex-basis: 76px;
}

.enterprise-sidebar-v2.collapsed:hover,
.ent-sidebar.collapsed:hover,
.sidebar.collapsed:hover {
  width: 264px;
}

.enterprise-sidebar-v2.collapsed .nav__item,
.ent-sidebar.collapsed .nav__item {
  justify-content: center;
}

.enterprise-sidebar-v2.collapsed:hover .nav__item,
.ent-sidebar.collapsed:hover .nav__item {
  justify-content: flex-start;
}

.topbar,
.noura-topbar,
.portal-header,
.topbar.portal-header,
.ent-topbar {
  min-height: 64px;
  flex: 0 0 auto;
  align-items: center;
  padding: 12px 24px;
  background: rgba(11, 15, 20, .86) !important;
  border-bottom: 1px solid var(--ux1-border) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  backdrop-filter: blur(12px);
}

.topbar__title {
  color: var(--ux1-text);
  font-size: 18px;
  font-weight: 850;
}

.topbar__hint {
  color: var(--ux1-muted);
  font-size: 12px;
}

.ent-topbar-search {
  height: 38px;
  max-width: 460px;
  border-radius: var(--ux1-radius);
  border-color: var(--ux1-border);
  background: var(--ux1-surface) !important;
  color: var(--ux1-muted);
  box-shadow: none;
}

.ent-topbar-search:hover,
.ent-topbar-search:focus-visible {
  border-color: rgba(47,183,216,.42);
  background: var(--ux1-surface-raised) !important;
}

.portal-status-dot,
.pill.ok {
  border-color: rgba(32,201,151,.28);
  background: rgba(32,201,151,.10);
  color: #86F0CB;
}

.portal-ai-copilot-btn,
.btn.primary {
  color: #071015;
  border-color: transparent;
  background: linear-gradient(135deg, var(--ux1-gold), #F1D28A) !important;
  box-shadow: 0 12px 26px rgba(214,168,79,.20);
}

.btn,
.iconBtn,
.ds-button,
.ds-icon-button {
  border-radius: var(--ux1-radius);
  border-color: var(--ux1-border);
  background: rgba(255,255,255,.035);
  color: var(--ux1-text);
  box-shadow: none;
}

.btn:hover,
.iconBtn:hover {
  transform: none;
  border-color: var(--ux1-border-strong);
  background: rgba(255,255,255,.055);
}

input,
textarea,
select,
.ds-search-input,
.ds-select,
.ds-textarea {
  border-radius: var(--ux1-radius);
  border-color: var(--ux1-border);
  background: #0E151C !important;
  color: var(--ux1-text);
}

input:focus,
textarea:focus,
select:focus,
.ds-search-input:focus {
  border-color: rgba(47,183,216,.56);
  box-shadow: 0 0 0 3px rgba(47,183,216,.14);
}

.card,
.panel,
.ds-data-card,
.ds-metric-card,
.dashboard-v2-glow-card,
.dashboard-v2-widget,
.dash-card,
.dash-status,
.ent-widget,
.ent-kpi-card {
  border-radius: var(--ux1-radius-lg) !important;
  border: 1px solid var(--ux1-border) !important;
  background: linear-gradient(180deg, rgba(23,32,42,.96), rgba(17,24,32,.96)) !important;
  color: var(--ux1-text);
  box-shadow: var(--ux1-shadow-soft) !important;
}

.card::before,
.ent-kpi-card::before,
.dashboard-v2-glow-card::before {
  display: none !important;
}

.ds-page-header,
.dash-toolbar,
.dashboard-page .ds-page-header {
  border-radius: var(--ux1-radius-lg);
  border: 1px solid var(--ux1-border);
  background:
    linear-gradient(135deg, rgba(214,168,79,.09), transparent 34%),
    linear-gradient(180deg, rgba(23,32,42,.98), rgba(17,24,32,.96)) !important;
  padding: 18px 20px;
  box-shadow: var(--ux1-shadow-soft);
}

.ds-page-header h1,
.portal-home-title {
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.1;
  letter-spacing: 0;
}

.ds-eyebrow,
.dashboard-v2-eyebrow {
  color: var(--ux1-gold);
  letter-spacing: .08em;
}

.ds-status-badge,
.dash-chip,
.portal-date-pill {
  border-radius: 999px;
  border-color: var(--ux1-border);
  background: rgba(255,255,255,.035);
  color: var(--ux1-muted);
}

.ds-status-badge.tone-good,
.ds-status-badge.tone-success,
.ds-status-badge.tone-ok {
  color: #86F0CB;
  border-color: rgba(32,201,151,.28);
  background: rgba(32,201,151,.10);
}

.ds-status-badge.tone-gold,
.ds-status-badge.tone-warning {
  color: #F1D28A;
  border-color: rgba(214,168,79,.30);
  background: rgba(214,168,79,.10);
}

.ds-status-badge.tone-danger,
.ds-status-badge.tone-bad {
  color: #FFA7A5;
  border-color: rgba(239,100,97,.30);
  background: rgba(239,100,97,.10);
}

.ds-metric-grid,
.dashboard-v2-summary,
.dash-status-grid,
.ent-kpi-grid {
  gap: 12px;
}

.ds-metric-card,
.kpi,
.dashboard-v2-glow-card,
.ent-kpi-card {
  min-height: 118px;
  padding: 14px;
}

.ds-metric-card strong,
.kpi__value,
.dashboard-v2-glow-card strong,
.ent-kpi-value {
  color: var(--ux1-text);
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: 0;
}

.ds-metric-card span,
.kpi__label,
.ent-kpi-label {
  color: var(--ux1-muted);
}

.dashboard-v2-widget-grid,
.ent-dashboard-grid {
  gap: 14px;
}

.ent-widget-head h2,
.dash-card-head h2,
.dashboard-v2-widget h3 {
  color: var(--ux1-text);
  font-size: 15px;
}

.ent-widget-head a,
.dashboard-v2-widget-head a {
  color: var(--ux1-cyan);
}

.ent-trend-line,
.ent-kpi-sparkline-line {
  stroke: var(--ux1-cyan);
}

.ent-trend-area {
  fill: rgba(47,183,216,.12);
}

.ent-trend-dot {
  fill: var(--ux1-gold);
  stroke: var(--ux1-bg);
}

.ent-channel-bar b {
  background: linear-gradient(90deg, var(--ux1-gold), var(--ux1-cyan));
}

.table,
.ds-data-table {
  color: var(--ux1-text);
}

.table th,
.ds-data-table th {
  background: #10171F !important;
  color: var(--ux1-muted);
  border-bottom-color: var(--ux1-border);
}

.table td,
.ds-data-table td {
  border-bottom-color: var(--ux1-border);
}

.table tr:hover td,
.ds-data-table tr:hover td {
  background: rgba(47,183,216,.045);
}

.ds-toolbar,
.ds-filter-bar,
.ds-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ds-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ux1-muted);
}

.ds-toggle input {
  width: auto;
  accent-color: var(--ux1-cyan);
}

.ds-state,
.ds-empty-state,
.ds-loading-state,
.ds-error-state,
.notice {
  border-radius: var(--ux1-radius);
  border: 1px solid var(--ux1-border);
  background: rgba(255,255,255,.03);
  color: var(--ux1-muted);
}

.ds-error-state,
.notice.dash-error {
  border-color: rgba(239,100,97,.28);
  background: rgba(239,100,97,.08);
}

.ds-modal,
.ds-drawer,
.copilot-drawer,
.modal,
.drawer {
  border-radius: var(--ux1-radius-lg);
  border: 1px solid var(--ux1-border);
  background: var(--ux1-surface) !important;
  color: var(--ux1-text);
  box-shadow: var(--ux1-shadow);
}

.copilot-drawer-backdrop,
.ds-modal-backdrop,
.ds-drawer-backdrop {
  background: rgba(0,0,0,.56);
  backdrop-filter: blur(4px);
}

@media (max-width: 980px) {
  html,
  body,
  .portal-app,
  .app {
    overflow: auto;
  }

  .portal-main,
  .main.portal-main,
  .main {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .portal-content,
  .content.portal-content,
  .content {
    overflow: visible;
    padding: 18px;
  }

  .enterprise-sidebar-v2,
  .ent-sidebar,
  .sidebar {
    position: fixed;
    z-index: 41;
    height: 100vh;
    transform: translateX(-104%);
    transition: transform 160ms ease;
  }

  .enterprise-sidebar-v2.open,
  .ent-sidebar.open,
  .sidebar.open {
    transform: translateX(0);
  }

  .topbar,
  .noura-topbar,
  .portal-header,
  .topbar.portal-header {
    padding: 10px 14px;
    gap: 10px;
  }
}

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

/* =========================================================
   UX1-07 Global Responsive, Sidebar, and Form Cleanup
   Appended last so it wins source-order ties against earlier
   "Enterprise UI Overhaul" (.premium-sidebar-nav / .ent-*)
   rules that used higher-specificity or !important selectors
   and were still rendering purple/glow accents despite the
   UX1-01 token pass above. Fixes only — no page rewrites.
   ========================================================= */

/* ---- Root app container: an ID selector (#appRoot) elsewhere in
   this file beats every class-based override regardless of source
   order, so the decorative purple/cyan blob background was still
   showing behind the whole app. Matching ID specificity here to
   guarantee this wins. ---- */
#appRoot {
  background: var(--ux1-bg) !important;
}

/* ---- Sidebar: kill remaining purple/glow leaks that beat the
   UX1-01 pass on specificity or !important ---- */
.enterprise-sidebar-v2,
.sidebar.noura-sidebar.enterprise-sidebar-v2,
.ent-sidebar.enterprise-sidebar-v2 {
  background:
    linear-gradient(180deg, rgba(17, 24, 32, .98), rgba(11, 15, 20, .98)) !important;
  border-right: 1px solid var(--ux1-border) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .025), 16px 0 48px rgba(0, 0, 0, .22) !important;
}

.enterprise-sidebar-v2 .brand__logo,
.ent-sidebar .brand__logo {
  background: linear-gradient(135deg, var(--ux1-gold), #F1D28A) !important;
  box-shadow: 0 12px 24px rgba(214, 168, 79, .18) !important;
}

.nav__icon,
.premium-sidebar-nav .nav__icon {
  background: rgba(47, 183, 216, .10) !important;
  box-shadow: none !important;
  color: var(--ux1-cyan) !important;
}

.premium-sidebar-nav .nav__item:hover {
  background: rgba(255, 255, 255, .045) !important;
  border-color: rgba(255, 255, 255, .09) !important;
  box-shadow: none !important;
  color: var(--ux1-text) !important;
}

.nav__item.active,
.premium-sidebar-nav .nav__item.active,
.premium-sidebar-nav .nav__item[aria-current="page"] {
  background: linear-gradient(90deg, rgba(214, 168, 79, .18), rgba(47, 183, 216, .08)) !important;
  border-color: rgba(214, 168, 79, .38) !important;
  box-shadow: inset 3px 0 0 var(--ux1-gold), 0 10px 24px rgba(0, 0, 0, .18) !important;
  color: var(--ux1-text) !important;
}

.premium-sidebar-nav .nav__item.active .nav__icon,
.premium-sidebar-nav .nav__item[aria-current="page"] .nav__icon {
  background: rgba(255, 255, 255, .14) !important;
  box-shadow: none !important;
  color: var(--ux1-text) !important;
}

.nav__badge {
  background: rgba(47, 183, 216, .10) !important;
  border: 1px solid rgba(47, 183, 216, .28) !important;
  box-shadow: none !important;
  color: var(--ux1-cyan) !important;
}

.ent-nav .nav__item--top,
.ent-nav .nav__item--top:hover {
  background: rgba(255, 255, 255, .035) !important;
  border-color: var(--ux1-border) !important;
}

.ent-nav .nav__item--top.active,
.ent-nav .nav__item--top[aria-current="page"] {
  background: linear-gradient(135deg, var(--ux1-gold), var(--ux1-cyan)) !important;
  color: #071015 !important;
  box-shadow: 0 10px 26px rgba(214, 168, 79, .28) !important;
}

.btn::after,
.iconBtn::after {
  background: radial-gradient(circle, rgba(214, 168, 79, .30), transparent 60%) !important;
}

/* ---- More confirmed leaks found via a full computed-style sweep
   (querying every element's backgroundImage/backgroundColor/
   borderColor/boxShadow/color for the raw purple rgb triplets) —
   these are the ones still actually visible in a running page,
   as opposed to guessing from source alone. ---- */
.sidebarFooter,
.premium-sidebar-footer,
.enterprise-sidebar-v2 .sidebarFooter,
.sidebarStatusCard,
.sidebarUserCard {
  background: linear-gradient(180deg, rgba(214, 168, 79, .10), rgba(255, 255, 255, .025)) !important;
  border-color: rgba(214, 168, 79, .25) !important;
  box-shadow: none !important;
}

.portal-ai-copilot-btn,
#portalAiCopilotBtn,
.btn.primary.copilot-ask-btn,
#portalAiCopilotAsk {
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(214, 168, 79, .20) !important;
}

.noura-command {
  box-shadow: 0 30px 90px rgba(0, 0, 0, .5), 0 0 20px rgba(47, 183, 216, .12) !important;
}

/* ---- Two generic, sitewide-impact selectors from an earlier pass
   ("button.primary" and "input[type=search/text]") carry !important
   purple accents that beat every per-page scoped style (e.g.
   Conversations' own already-correctly-gold .conv-action-btn.primary
   and .conv-search), because those page styles were never marked
   !important. Re-declaring the exact same generic selectors here,
   later in the cascade, fixes every page at once instead of
   patching each page's injected <style> block individually. ---- */
.btn.primary,
button.primary {
  color: #071015 !important;
  background: linear-gradient(135deg, var(--ux1-gold), #F1D28A) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(214, 168, 79, .20) !important;
}

input[type="search"],
input[type="text"] {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px var(--ux1-border) !important;
}

/* ---- Legacy un-migrated pages (CTA Actions, Instructions, Logic,
   Automation Rules, Integrations, Analytics, System, Logs, Users,
   Roles, Accounts, Settings, Webhooks, Sales Learning, Conversation
   Results, Product Aliases/Rules, and the generic .notice/.alert/
   .kpi/.metric/.stat primitives used across many of them) all share
   one blanket rule that bakes in a purple radial-gradient blob.
   Re-declaring the identical selector list, solid this time. ---- */
.noura-section,
.noura-card,
.noura-soft-block,
.noura-form,
.noura-modal,
.instruction-side-card,
.instruction-editor-card,
.instruction-template-card,
.instruction-modal-card,
.instruction-kpi,
.product-knowledge-page .pk-hero,
.product-knowledge-page .pk-kpi,
.product-knowledge-page .pk-table-wrap,
.product-knowledge-page .pk-modal-card,
.product-knowledge-page .pk-modal-head,
.product-knowledge-page .pk-preview-block,
.product-knowledge-page .pk-empty,
.product-knowledge-item,
.product-rules-sidebar,
.product-rule-list-item,
.product-rules-editor,
.product-rules-panel,
.noura-alias-card,
.noura-alias-product-item,
.noura-images-card,
.noura-images-panel,
.noura-conversation-item,
.conversation-results-card,
.sales-learning-card,
.automation-rule-card,
.promo-message-card,
.webhook-card,
.integration-card,
.analytics-card,
.system-card,
.log-card,
.debug-card,
.user-card,
.account-card,
.role-card,
.settings-card,
.kpi,
.metric,
.stat,
.notice,
.alert {
  background: linear-gradient(180deg, rgba(23, 32, 42, .96), rgba(17, 24, 32, .96)) !important;
  border-color: var(--ux1-border) !important;
  box-shadow: var(--ux1-shadow-soft) !important;
}

/* ---- Same purple-blob problem, but scoped one level deeper via a
   "-enterprise"/"-enterprise-page" root class (Product Rules,
   Instructions) — those compound selectors have higher specificity
   than the plain class names above, so they need re-declaring at
   matching specificity to actually win. ---- */
.product-rules-enterprise .pr-hero,
.product-rules-enterprise .pr-kpi,
.product-rules-enterprise .pr-filter-card,
.product-rules-enterprise .pr-panel,
.product-rules-enterprise .pr-list-panel,
.product-rules-enterprise .pr-detail,
.product-rules-enterprise .pr-detail-hero,
.product-rules-enterprise .pr-block,
.product-rules-enterprise .pr-mini,
.product-rules-enterprise .pr-keyword-section,
.product-rules-enterprise .pr-item,
.product-rules-enterprise .pr-list-item,
.product-rules-enterprise .pr-empty,
.product-rules-enterprise .pr-modal,
.product-rules-enterprise .pr-modal-head,
.product-rules-enterprise .pr-modal-body,
.product-rules-enterprise .pr-modal-foot,
.product-rules-enterprise .pr-danger,
.product-rules-enterprise .pill,
.product-rules-enterprise .btn,
.instructions-enterprise-page .instruction-hero,
.instructions-enterprise-page .instruction-kpi,
.instructions-enterprise-page .instruction-editor-card,
.instructions-enterprise-page .instruction-side-card,
.instructions-enterprise-page .instruction-template-card,
.instructions-enterprise-page .instruction-tip-item,
.instructions-enterprise-page .instruction-status-strip,
.instructions-enterprise-page .instruction-modal-card,
.instructions-enterprise-page .instruction-preview-pre,
.instructions-enterprise-page .pill,
.instructions-enterprise-page .btn {
  background: linear-gradient(180deg, rgba(23, 32, 42, .96), rgba(17, 24, 32, .96)) !important;
  border-color: var(--ux1-border) !important;
  box-shadow: var(--ux1-shadow-soft) !important;
}

.product-rules-enterprise .btn.primary,
.instructions-enterprise-page .btn.primary {
  color: #071015 !important;
  background: linear-gradient(135deg, var(--ux1-gold), #F1D28A) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(214, 168, 79, .20) !important;
}

input[type="search"]:focus,
input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(47, 183, 216, .14) !important;
  border-color: rgba(47, 183, 216, .56) !important;
}

.btn:hover,
button:hover {
  border-color: rgba(47, 183, 216, .30) !important;
  box-shadow: none !important;
}

.ent-user-avatar,
#userAvatarInitial {
  background: linear-gradient(135deg, var(--ux1-gold), var(--ux1-cyan)) !important;
  color: #071015 !important;
}

.ent-kpi-icon {
  background: rgba(214, 168, 79, .16) !important;
  color: var(--ux1-gold) !important;
}

.ds-state,
.ds-empty-state,
.ds-loading-state,
.ds-error-state {
  box-shadow: var(--ux1-shadow-soft) !important;
}

.copilot-drawer,
.copilot-drawer__head {
  border-color: var(--ux1-border) !important;
}

.copilot-prompt-chips button,
.copilot-prompt-chips button:hover {
  background: rgba(47, 183, 216, .10) !important;
  border-color: rgba(47, 183, 216, .28) !important;
  color: var(--ux1-text) !important;
}

.noura-command,
.noura-command-input,
.noura-command-item.is-active {
  border-color: var(--ux1-border) !important;
}

/* ---- Collapsed-sidebar tooltip: the CSS mechanism
   (content: attr(data-tooltip) on hover) already existed but the
   data-tooltip attribute was never added to the nav markup, so it
   never actually rendered. index.html now sets data-tooltip (and a
   native title as a redundant fallback) on every nav item. Also add
   :focus-within so keyboard-only users get the same affordance
   mouse users get, and retone the tooltip box away from purple. ---- */
.enterprise-sidebar-v2.collapsed .nav__item:hover::before,
.enterprise-sidebar-v2.collapsed .nav__item:focus-within::before {
  border-color: rgba(47, 183, 216, .34) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34), 0 0 16px rgba(47, 183, 216, .16) !important;
}

.enterprise-sidebar-v2.collapsed .nav__item:focus-within::before {
  content: attr(data-tooltip);
}

.ent-sidebar.collapsed:focus-within,
.enterprise-sidebar-v2.collapsed:focus-within,
.sidebar.collapsed:focus-within {
  width: 264px;
}

.ent-sidebar.collapsed:focus-within .nav__item,
.enterprise-sidebar-v2.collapsed:focus-within .nav__item {
  justify-content: flex-start;
}

/* ---- Keyboard focus visibility (nav items had no explicit
   focus-visible ring against the dark sidebar background) ---- */
.nav__item:focus-visible,
.nav__sectionToggle:focus-visible,
.sidebar__toggle:focus-visible,
.ent-mobile-nav-toggle:focus-visible,
.ent-topbar-search:focus-visible,
.ent-user-trigger:focus-visible {
  outline: 2px solid var(--ux1-cyan) !important;
  outline-offset: 2px;
}

/* ---- Tabs: retone to UX1 gold/cyan (TabBar component had no
   dedicated UX1-pass styling) ---- */
.ds-tab-bar {
  gap: 8px;
}

.ds-tab {
  border-color: var(--ux1-border);
  background: rgba(255, 255, 255, .035);
  color: var(--ux1-muted);
  border-radius: 999px;
}

.ds-tab:hover {
  border-color: var(--ux1-border-strong);
  color: var(--ux1-text);
}

.ds-tab.active,
.ds-tab[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(214, 168, 79, .18), rgba(47, 183, 216, .08)) !important;
  border-color: rgba(214, 168, 79, .38) !important;
  color: var(--ux1-text) !important;
}

/* ---- Global no-horizontal-scroll safety net. Inner split-view
   panes (Conversations/Product Knowledge/Promo Messages/Media
   Library) already manage their own overflow-y; this only clips
   the outer shell, never an inner scrollable pane. ---- */
html, body, .app, .portal-app, .main, .portal-main {
  max-width: 100vw;
  overflow-x: hidden;
}

.content, .portal-content {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---- Narrow-viewport topbar: allow the title/hint block to
   shrink instead of forcing horizontal overflow next to the
   search pill and action icons. ---- */
.noura-topbar-left {
  min-width: 0;
  overflow: hidden;
}

.topbar__title,
.topbar__hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .ent-topbar-search {
    display: none;
  }
}

/* ---- Mobile drawer was actually broken: an earlier ≤980px rule
   sets closed-state transform via a 3-class selector
   (.sidebar.noura-sidebar.enterprise-sidebar-v2), but its own
   "open" counterpart only used a 2-class selector
   (.enterprise-sidebar-v2.open) — lower specificity than the closed
   rule, so clicking the mobile nav toggle added the "open" class but
   the sidebar never actually slid into view. Matching (and
   exceeding) the closed rule's specificity here fixes it. ---- */
@media (max-width: 980px) {
  .sidebar.noura-sidebar.enterprise-sidebar-v2.open,
  .sidebar.noura-sidebar.portal-hidden-sidebar.enterprise-sidebar-v2.open,
  .enterprise-sidebar-v2.open,
  .ent-sidebar.open,
  .sidebar.open {
    transform: translateX(0) !important;
  }
}
@media (min-width: 981px) {
  .app.portal-app.is-sidebar-collapsed {
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }
}

.conv-bubble {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.conv-message.is-empty {
  display: none !important;
}