:root{
  --idb-ink:#16002f;
  --idb-ink-2:#21143f;
  --idb-text:#4f5873;
  --idb-muted:#7b849c;
  --idb-faint:#a9b0c4;

  --idb-line:#e6dcff;
  --idb-line-2:#d9c9ff;
  --idb-card:#ffffff;
  --idb-card-soft:rgba(255,255,255,.78);
  --idb-glass:rgba(255,255,255,.68);
  --idb-soft:#f8f4ff;
  --idb-soft-2:#f3efff;
  --idb-deep:#10021f;
  --idb-deep-2:#171032;

  --idb-purple:#6d21e8;
  --idb-purple-2:#8d5cff;
  --idb-blue:#2f5df4;
  --idb-cyan:#28c7ff;
  --idb-green:#14a26b;
  --idb-green-soft:#eafff6;
  --idb-red:#d93f55;
  --idb-red-soft:#fff0f2;
  --idb-gold:#b77900;
  --idb-gold-soft:#fff7df;
  --idb-orange:#f97316;

  --idb-shadow:0 28px 90px rgba(36,6,76,.14);
  --idb-shadow-soft:0 16px 44px rgba(35,5,77,.08);
  --idb-shadow-hover:0 22px 58px rgba(35,5,77,.14);
  --idb-ring:0 0 0 4px rgba(109,33,232,.13);

  --idb-radius-xl:34px;
  --idb-radius-lg:26px;
  --idb-radius-md:20px;
  --idb-radius-sm:14px;

  --idb-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --idb-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

*{box-sizing:border-box}

html{
  scroll-behavior:smooth;
}

.idb-body,
body:has(.idb-main){
  background:
    radial-gradient(circle at 8% 8%,rgba(141,92,255,.18),transparent 34%),
    radial-gradient(circle at 88% 2%,rgba(40,199,255,.16),transparent 32%),
    linear-gradient(135deg,#fbf8ff 0%,#f3efff 45%,#eef8ff 100%);
  color:var(--idb-ink);
}

.idb-main{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  font-family:var(--idb-font);
  color:var(--idb-ink);
}

.idb-main::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(109,33,232,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,33,232,.045) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.88),transparent 88%);
  z-index:-2;
}

.idb-main::after{
  content:"";
  position:fixed;
  inset:auto -20% -40% -20%;
  height:460px;
  pointer-events:none;
  background:radial-gradient(circle,rgba(109,33,232,.12),transparent 64%);
  filter:blur(22px);
  z-index:-1;
}

.idb-shell{
  width:min(100% - 36px,1440px);
  margin:0 auto;
}

.idb-shell-wide{
  width:min(100% - 48px,1820px);
  margin:0 auto;
}

.is-hidden{
  display:none!important;
}

/* =========================
   HERO / LOGIN
========================= */

.idb-hero{
  position:relative;
  padding:74px 0 34px;
  isolation:isolate;
}

.idb-hero-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
}

.idb-glow{
  position:absolute;
  border-radius:999px;
  filter:blur(18px);
  opacity:.62;
}

.idb-glow-one{
  width:440px;
  height:440px;
  left:-110px;
  top:16px;
  background:linear-gradient(135deg,#d9c8ff,#f3e8ff);
}

.idb-glow-two{
  width:560px;
  height:560px;
  right:-140px;
  top:-86px;
  background:linear-gradient(135deg,#dff6ff,#dbeafe);
}

.idb-grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(109,33,232,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(109,33,232,.055) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}

.idb-hero-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.38fr) minmax(360px,.62fr);
  gap:32px;
  align-items:stretch;
  padding:38px;
  border:1px solid rgba(230,220,255,.92);
  border-radius:38px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96) 0%,rgba(251,248,255,.91) 54%,rgba(238,248,255,.94) 100%);
  box-shadow:var(--idb-shadow);
  overflow:hidden;
}

.idb-hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%,rgba(109,33,232,.12),transparent 28%),
    radial-gradient(circle at 88% 10%,rgba(47,93,244,.10),transparent 30%);
}

.idb-hero-copy,
.idb-login-card{
  position:relative;
  z-index:1;
}

.idb-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 13px;
  color:var(--idb-purple);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.idb-kicker i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,rgba(109,33,232,.13),rgba(47,93,244,.11));
  color:var(--idb-purple);
}

.idb-hero-copy h1{
  margin:0;
  max-width:1060px;
  font-size:clamp(42px,5.1vw,86px);
  line-height:.96;
  letter-spacing:-.072em;
  color:var(--idb-ink);
}

.idb-hero-copy p{
  max-width:900px;
  margin:22px 0 0;
  color:#5f6582;
  font-size:18px;
  line-height:1.82;
}

.idb-hero-actions,
.idb-toolbar-actions,
.idb-login-actions,
.idb-support-actions,
.idb-card-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:24px;
}

.idb-card-actions{
  margin:0 0 12px;
}

.idb-btn{
  position:relative;
  border:1px solid var(--idb-line);
  border-radius:999px;
  padding:13px 20px;
  min-height:46px;
  background:#fff;
  color:var(--idb-ink);
  font-weight:950;
  line-height:1;
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-shadow:0 12px 30px rgba(45,20,80,.08);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease;
  user-select:none;
}

.idb-btn:hover{
  transform:translateY(-1px);
  box-shadow:var(--idb-shadow-hover);
  border-color:var(--idb-line-2);
}

.idb-btn:active{
  transform:translateY(0);
}

.idb-btn:focus-visible,
.idb-nav-btn:focus-visible,
.idb-list-item:focus-visible,
.idb-topup-grid button:focus-visible,
.idb-field input:focus-visible{
  outline:none;
  box-shadow:var(--idb-ring);
}

.idb-btn-primary{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(135deg,var(--idb-purple),var(--idb-blue));
}

.idb-btn-soft{
  background:linear-gradient(180deg,#fff,#fbf8ff);
  color:#4b17ad;
}

.idb-btn-full{
  width:100%;
  border-radius:18px;
}

.idb-login-card{
  align-self:center;
  padding:25px;
  border:1px solid rgba(230,220,255,.95);
  border-radius:30px;
  background:rgba(255,255,255,.88);
  box-shadow:0 24px 68px rgba(35,5,77,.13);
  backdrop-filter:blur(16px);
}

.idb-login-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  color:var(--idb-muted);
  font-size:13px;
  font-weight:850;
}

.idb-login-head strong{
  color:var(--idb-ink);
}

.idb-field{
  display:grid;
  gap:8px;
  margin-bottom:14px;
  color:var(--idb-ink);
  font-size:13px;
  font-weight:950;
}

.idb-field input{
  width:100%;
  border:1px solid #e1d4ff;
  border-radius:17px;
  padding:15px 16px;
  background:#fff;
  color:var(--idb-ink);
  font:inherit;
  font-weight:800;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.idb-field input::placeholder{
  color:#a9a0bf;
}

.idb-field input:focus{
  border-color:#8f55ff;
  background:#fff;
  box-shadow:var(--idb-ring);
}

.idb-status{
  min-height:22px;
  margin:12px 0 0;
  color:var(--idb-muted);
  font-size:13px;
  font-weight:850;
}

.idb-status.is-error{
  color:var(--idb-red);
}

.idb-status.is-ok{
  color:var(--idb-green);
}

/* =========================
   DASHBOARD SHELL
========================= */

.idb-dashboard{
  padding:28px 0 84px;
}

.idb-toolbar{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  margin-bottom:22px;
  padding:27px;
  border:1px solid rgba(230,220,255,.94);
  border-radius:32px;
  background:rgba(255,255,255,.76);
  box-shadow:var(--idb-shadow);
  backdrop-filter:blur(18px);
}

.idb-toolbar h2{
  margin:0;
  font-size:38px;
  line-height:1.05;
  letter-spacing:-.048em;
}

.idb-toolbar p{
  margin:8px 0 0;
  color:var(--idb-text);
  line-height:1.7;
}

/* =========================
   TOP STATS
========================= */

.idb-stat-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-bottom:24px;
}

.idb-stat{
  position:relative;
  min-width:0;
  padding:18px;
  border:1px solid rgba(230,220,255,.92);
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(252,250,255,.82));
  box-shadow:var(--idb-shadow-soft);
  overflow:hidden;
}

.idb-stat::after{
  content:"";
  position:absolute;
  inset:auto 14px 0 14px;
  height:3px;
  border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,var(--idb-purple),var(--idb-blue),var(--idb-cyan));
  opacity:.55;
}

.idb-stat span{
  display:block;
  color:var(--idb-muted);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.idb-stat strong{
  display:block;
  margin-top:8px;
  color:var(--idb-ink);
  font-size:20px;
  line-height:1.15;
  word-break:break-word;
}

.idb-stat small{
  display:block;
  margin-top:7px;
  color:var(--idb-muted);
  font-weight:780;
}

/* =========================
   LEFT NAV + RIGHT PANEL
========================= */

.idb-slider-shell{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:24px;
  align-items:start;
}

.idb-left-panel{
  position:sticky;
  top:92px;
  display:grid;
  gap:18px;
}

.idb-panel-card{
  position:relative;
  padding:20px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  background:
    radial-gradient(circle at 20% 0%,rgba(141,92,255,.28),transparent 36%),
    linear-gradient(180deg,#1d0a38,#0d1024 72%);
  box-shadow:0 28px 70px rgba(12,7,34,.22);
  color:#fff;
  overflow:hidden;
}

.idb-panel-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom,black,transparent 86%);
}

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

.idb-panel-label{
  margin:0 0 14px;
  color:#cbbcff;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:11px;
  font-weight:950;
}

.idb-nav-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:19px;
  background:rgba(255,255,255,.07);
  color:#fff;
  padding:13px 14px;
  margin:8px 0;
  font:inherit;
  font-weight:950;
  cursor:pointer;
  text-align:left;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.idb-nav-btn:hover{
  transform:translateX(2px);
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.105);
}

.idb-nav-btn span{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.09);
  color:#d7caff;
  font-size:12px;
}

.idb-nav-btn.is-active{
  border-color:transparent;
  background:linear-gradient(135deg,var(--idb-purple),var(--idb-blue));
  box-shadow:0 16px 34px rgba(74,45,240,.30);
}

.idb-nav-btn.is-active span{
  background:rgba(255,255,255,.20);
  color:#fff;
}

.idb-left-panel .idb-btn{
  box-shadow:none;
}

.idb-right-panel{
  min-height:740px;
  border:1px solid rgba(230,220,255,.94);
  border-radius:34px;
  background:rgba(255,255,255,.74);
  box-shadow:var(--idb-shadow);
  backdrop-filter:blur(16px);
  overflow:hidden;
}

.idb-view{
  display:none;
  animation:idbSlide .25s ease;
  padding:31px;
}

.idb-view.is-active{
  display:block;
}

@keyframes idbSlide{
  from{opacity:0;transform:translateX(18px)}
  to{opacity:1;transform:translateX(0)}
}

.idb-view-head{
  position:relative;
  margin-bottom:24px;
  padding-bottom:18px;
}

.idb-view-head::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:86px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--idb-purple),var(--idb-blue));
}

.idb-view-head h3{
  margin:0;
  color:var(--idb-ink);
  font-size:34px;
  line-height:1.08;
  letter-spacing:-.046em;
}

.idb-view-head p{
  max-width:960px;
  color:var(--idb-text);
  line-height:1.75;
}

/* =========================
   CARDS / GRIDS
========================= */

.idb-card-grid{
  display:grid;
  gap:18px;
  margin-bottom:18px;
}

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

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

.idb-card,
.idb-guide{
  position:relative;
  min-width:0;
  border:1px solid rgba(230,220,255,.92);
  border-radius:26px;
  background:linear-gradient(180deg,#fff,#fdfbff);
  padding:22px;
  box-shadow:var(--idb-shadow-soft);
  overflow:hidden;
}

.idb-card::before,
.idb-guide::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(109,33,232,.34),transparent);
}

.idb-card h4{
  margin:0 0 16px;
  color:var(--idb-ink);
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.024em;
}

.idb-guide strong{
  display:block;
  color:var(--idb-ink);
  font-size:18px;
  letter-spacing:-.018em;
}

.idb-guide p,
.idb-note p{
  margin-bottom:0;
  color:var(--idb-text);
  line-height:1.72;
}

.idb-note{
  border:1px solid #e9ddff;
  border-radius:22px;
  padding:18px;
  background:linear-gradient(180deg,#fbf8ff,#fff);
}

.idb-muted{
  margin:0 0 12px;
  color:var(--idb-muted);
  font-size:13px;
  line-height:1.65;
}

/* =========================
   DETAIL FIELDS
========================= */

.idb-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.idb-detail-item{
  min-width:0;
  border:1px solid #efe7ff;
  border-radius:19px;
  padding:14px;
  background:linear-gradient(180deg,#fff,#fcfaff);
}

.idb-detail-item span{
  display:block;
  color:var(--idb-muted);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.075em;
}

.idb-detail-item strong{
  display:block;
  margin-top:7px;
  color:var(--idb-ink);
  line-height:1.35;
  word-break:break-word;
}

.idb-detail-item small{
  display:block;
  margin-top:6px;
  color:var(--idb-muted);
  line-height:1.55;
}

/* =========================
   LISTS / ROWS
========================= */

.idb-list{
  display:grid;
  gap:11px;
}

.idb-list-item{
  width:100%;
  min-width:0;
  border:1px solid #efe7ff;
  border-radius:19px;
  padding:14px;
  background:linear-gradient(180deg,#fff,#fcfaff);
  color:var(--idb-ink);
  text-align:left;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}

button.idb-list-item{
  cursor:pointer;
  font:inherit;
}

button.idb-list-item:hover,
a.idb-list-item:hover{
  transform:translateY(-1px);
  border-color:#d7c4ff;
  box-shadow:0 14px 32px rgba(35,5,77,.10);
}

.idb-list-item strong{
  display:block;
  margin-bottom:5px;
  color:var(--idb-ink);
  line-height:1.35;
}

.idb-list-item p{
  margin:0;
  color:var(--idb-text);
  line-height:1.58;
}

.idb-list-item small{
  display:block;
  margin-top:7px;
  color:var(--idb-muted);
  font-weight:760;
}

.idb-empty{
  border:1px dashed #d8c8ff;
  border-radius:20px;
  padding:21px;
  background:linear-gradient(180deg,#fbf8ff,#fff);
  color:var(--idb-muted);
  font-weight:760;
  line-height:1.6;
}

/* =========================
   HUMAN REVIEW / HANDOFF
========================= */

#idbView-handoffs .idb-view-head h3{
  background:linear-gradient(135deg,var(--idb-ink),#5720ad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

#idbView-handoffs .idb-stat:nth-child(1)::after{
  background:linear-gradient(90deg,var(--idb-purple),var(--idb-blue));
}

#idbView-handoffs .idb-stat:nth-child(2)::after{
  background:linear-gradient(90deg,var(--idb-orange),var(--idb-red));
}

#idbView-handoffs .idb-stat:nth-child(3)::after{
  background:linear-gradient(90deg,var(--idb-green),var(--idb-cyan));
}

.idb-handoff-row{
  position:relative;
  padding-left:18px;
}

.idb-handoff-row::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--idb-purple),var(--idb-blue));
}

.idb-handoff-row p{
  font-weight:760;
}

.idb-handoff-row p:has(+ small){
  color:#4f5873;
}

.idb-handoff-row:has(p){
  background:
    linear-gradient(180deg,#fff,#fffbff);
}

.idb-handoff-row strong{
  padding-right:70px;
}

.idb-handoff-row strong::after{
  content:"Review";
  float:right;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:4px 9px;
  border-radius:999px;
  background:#efe7ff;
  color:#5b21b6;
  font-size:11px;
  font-weight:950;
  letter-spacing:.03em;
}

#handoffDetails .idb-detail-item:nth-child(7) strong,
#handoffDetails .idb-detail-item:nth-child(8) strong,
#handoffDetails .idb-detail-item:nth-child(10) strong{
  color:#4c1d95;
}

#handoffSummary .idb-list-item{
  background:linear-gradient(180deg,#fff,#f8f4ff);
}

/* =========================
   TAGS
========================= */

.idb-tag-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.idb-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--idb-line);
  border-radius:999px;
  padding:10px 12px;
  background:#fff;
  color:#4d18b2;
  font-weight:950;
  box-shadow:0 8px 20px rgba(35,5,77,.06);
}

.idb-tag::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--idb-purple),var(--idb-blue));
}

/* =========================
   INSTALL / CODE
========================= */

#idbView-install .idb-card{
  background:
    linear-gradient(180deg,#fff,#fbf8ff);
}

.idb-code{
  width:100%;
  min-height:160px;
  border:1px solid #2d2442;
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(109,33,232,.18),transparent 30%),
    linear-gradient(180deg,#100820,#0b0716);
  color:#f4ecff;
  padding:17px;
  font:13px/1.58 var(--idb-mono);
  resize:vertical;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 18px 40px rgba(13,7,28,.16);
}

.idb-code:focus{
  border-color:#8f55ff;
  box-shadow:var(--idb-ring),inset 0 0 0 1px rgba(255,255,255,.03),0 18px 40px rgba(13,7,28,.16);
}

#setupPackageText{
  min-height:260px;
}

/* =========================
   TIMELINE / MESSAGES
========================= */

.idb-timeline{
  display:grid;
  gap:14px;
}

.idb-message{
  border:1px solid #efe7ff;
  border-radius:22px;
  padding:16px;
  background:#fff;
  box-shadow:0 10px 26px rgba(35,5,77,.05);
}

.idb-message[data-role="assistant"],
.idb-message[data-role="agent"]{
  background:linear-gradient(180deg,#f8f4ff,#fff);
  border-color:#e5d8ff;
}

.idb-message[data-role="user"],
.idb-message[data-role="visitor"]{
  background:linear-gradient(180deg,#eef8ff,#fff);
  border-color:#d8f0ff;
}

.idb-message-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:var(--idb-muted);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.075em;
}

.idb-message p{
  margin:12px 0 0;
  white-space:pre-wrap;
  color:var(--idb-text);
  line-height:1.72;
}

.idb-transcript{
  margin-top:12px;
  border-left:4px solid var(--idb-purple);
  padding:11px 13px;
  border-radius:14px;
  background:#fbf8ff;
  color:var(--idb-ink);
}

/* =========================
   USAGE / CAPACITY
========================= */

.idb-meter{
  position:relative;
  height:15px;
  margin:7px 0 18px;
  border-radius:999px;
  background:#eee6ff;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(35,5,77,.08);
}

.idb-meter span{
  display:block;
  height:100%;
  width:0;
  border-radius:999px;
  background:linear-gradient(90deg,var(--idb-purple),var(--idb-blue),var(--idb-cyan));
  transition:width .35s ease;
}

.idb-meter span::after{
  content:"";
  display:block;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:idbMeterShine 2.8s infinite;
}

@keyframes idbMeterShine{
  from{transform:translateX(-100%)}
  to{transform:translateX(100%)}
}

.idb-topup-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.idb-topup-grid button{
  border:1px solid var(--idb-line);
  border-radius:20px;
  padding:16px;
  background:linear-gradient(180deg,#fff,#fbf8ff);
  color:var(--idb-ink);
  cursor:pointer;
  text-align:left;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}

.idb-topup-grid button:hover{
  transform:translateY(-2px);
  border-color:#d4c1ff;
  box-shadow:var(--idb-shadow-soft);
}

.idb-topup-grid span,
.idb-topup-grid strong,
.idb-topup-grid small{
  display:block;
}

.idb-topup-grid span{
  color:var(--idb-purple);
  font-weight:950;
}

.idb-topup-grid strong{
  margin:5px 0;
  font-size:20px;
}

.idb-topup-grid small{
  color:var(--idb-muted);
  font-weight:780;
}

/* =========================
   FEATURES
========================= */

.idb-access-scale{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.idb-access-scale div{
  border:1px solid var(--idb-line);
  border-radius:19px;
  padding:14px;
  background:linear-gradient(180deg,#fff,#fbf8ff);
}

.idb-access-scale span{
  display:block;
  color:var(--idb-muted);
  font-weight:950;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.idb-access-scale strong{
  display:block;
  margin-top:6px;
}

.idb-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.idb-feature{
  min-width:0;
  border:1px solid var(--idb-line);
  border-radius:20px;
  padding:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(35,5,77,.045);
}

.idb-feature.is-locked{
  opacity:.72;
  background:#fbf8ff;
}

.idb-feature span{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:5px 9px;
  background:#efe7ff;
  color:#5518bd;
  font-size:11px;
  font-weight:950;
}

.idb-feature.is-locked span{
  background:var(--idb-red-soft);
  color:#b91c1c;
}

.idb-feature strong{
  display:block;
  margin:10px 0 4px;
  color:var(--idb-ink);
  line-height:1.25;
}

.idb-feature p{
  margin:0;
  color:var(--idb-text);
  font-size:13px;
  line-height:1.58;
}

/* =========================
   SUPPORT
========================= */

.idb-support-actions{
  margin-top:18px;
}

.idb-main-status{
  padding:2px 0 22px;
  text-align:center;
}

/* =========================
   SMALL ENHANCEMENTS
========================= */

a{
  color:#4b17ad;
}

.idb-list-item a{
  color:#4b17ad;
  font-weight:850;
  word-break:break-all;
}

::selection{
  background:rgba(109,33,232,.18);
}

@supports not selector(:has(*)){
  .idb-handoff-row strong::after{
    display:none;
  }
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:1280px){
  .idb-shell-wide{
    width:min(100% - 34px,1820px);
  }

  .idb-slider-shell{
    grid-template-columns:320px minmax(0,1fr);
  }

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

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

@media (max-width:1180px){
  .idb-hero-card,
  .idb-slider-shell{
    grid-template-columns:1fr;
  }

  .idb-left-panel{
    position:relative;
    top:auto;
  }

  .idb-panel-card:first-child{
    display:block;
  }

  .idb-grid-two,
  .idb-grid-three{
    grid-template-columns:1fr;
  }

  .idb-toolbar{
    align-items:flex-start;
  }
}

@media (max-width:820px){
  .idb-shell,
  .idb-shell-wide{
    width:min(100% - 24px,1820px);
  }

  .idb-hero{
    padding-top:44px;
  }

  .idb-hero-card{
    padding:22px;
    border-radius:30px;
  }

  .idb-hero-copy h1{
    font-size:42px;
    letter-spacing:-.055em;
  }

  .idb-hero-copy p{
    font-size:16px;
  }

  .idb-toolbar{
    display:block;
    padding:22px;
  }

  .idb-toolbar h2{
    font-size:30px;
  }

  .idb-toolbar-actions{
    margin-top:18px;
  }

  .idb-stat-grid,
  .idb-detail-grid,
  .idb-topup-grid,
  .idb-feature-grid,
  .idb-access-scale{
    grid-template-columns:1fr;
  }

  .idb-view{
    padding:20px;
  }

  .idb-view-head h3{
    font-size:28px;
  }

  .idb-card,
  .idb-guide{
    padding:18px;
  }

  .idb-btn{
    width:100%;
  }

  .idb-hero-actions .idb-btn,
  .idb-login-actions .idb-btn,
  .idb-toolbar-actions .idb-btn,
  .idb-support-actions .idb-btn{
    width:100%;
  }
}

@media (max-width:520px){
  .idb-main{
    overflow:visible;
  }

  .idb-hero-card,
  .idb-toolbar,
  .idb-right-panel,
  .idb-panel-card{
    border-radius:24px;
  }

  .idb-login-card{
    padding:18px;
    border-radius:24px;
  }

  .idb-hero-copy h1{
    font-size:36px;
  }

  .idb-nav-btn{
    padding:12px;
  }

  .idb-nav-btn span{
    width:30px;
    height:30px;
  }

  .idb-message-head{
    display:grid;
    gap:4px;
  }
}

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



/* =========================================================
   INDUSTRY DASHBOARD — OVERVIEW / USAGE GRAPH UPGRADE
   Paste after the existing industry-dashboard.css
   Works with overview/usage/session upgrade HTML + JS
   ========================================================= */

/* ---------- Period selector ---------- */

.idb-period-strip,
.idb-overview-periods,
.idb-period-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,248,255,.78));
  box-shadow: var(--idb-shadow-soft);
}

.idb-period-btn,
button.idb-period-btn {
  min-height: 40px;
  padding: 10px 15px;
  border: 1px solid #e5d8ff;
  border-radius: 999px;
  background: #fff;
  color: #4b17ad;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(35,5,77,.055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.idb-period-btn:hover {
  transform: translateY(-1px);
  border-color: #d2bfff;
  box-shadow: 0 12px 28px rgba(35,5,77,.09);
}

.idb-period-btn.is-active,
.idb-period-btn[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--idb-purple), var(--idb-blue));
  color: #fff;
  box-shadow: 0 14px 34px rgba(74,45,240,.24);
}

/* ---------- Overview CRM summary ---------- */

.idb-overview-summary-grid,
.idb-exec-summary-grid,
.idb-crm-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.idb-summary-tile,
.idb-crm-tile {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(109,33,232,.08), transparent 34%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
  overflow: hidden;
}

.idb-summary-tile::after,
.idb-crm-tile::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
  opacity: .58;
}

.idb-summary-tile span,
.idb-crm-tile span {
  display: block;
  color: var(--idb-muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .085em;
}

.idb-summary-tile strong,
.idb-crm-tile strong {
  display: block;
  margin-top: 8px;
  color: var(--idb-ink);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -.035em;
  word-break: break-word;
}

.idb-summary-tile small,
.idb-crm-tile small {
  display: block;
  margin-top: 7px;
  color: var(--idb-muted);
  font-weight: 780;
  line-height: 1.5;
}

/* ---------- Workflow overview cards ---------- */

.idb-workflow-grid,
.idb-overview-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.idb-workflow-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(47,93,244,.08), transparent 32%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
  overflow: hidden;
}

.idb-workflow-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,33,232,.34), transparent);
}

.idb-workflow-card.is-disabled,
.idb-workflow-card[data-enabled="false"] {
  opacity: .72;
  background: linear-gradient(180deg, #fff, #f7f3ff);
}

.idb-workflow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.idb-workflow-head strong {
  display: block;
  color: var(--idb-ink);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.018em;
}

.idb-workflow-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--idb-green-soft);
  color: var(--idb-green);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.idb-workflow-card.is-disabled .idb-workflow-status,
.idb-workflow-card[data-enabled="false"] .idb-workflow-status {
  background: #f2effa;
  color: #7b849c;
}

.idb-workflow-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.idb-workflow-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #efe7ff;
  border-radius: 15px;
  background: rgba(255,255,255,.78);
}

.idb-workflow-metrics span {
  display: block;
  color: var(--idb-muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.idb-workflow-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--idb-ink);
  font-size: 15px;
}

.idb-workflow-latest {
  margin: 12px 0 0;
  color: var(--idb-text);
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- Usage category cards + low-to-high graph ---------- */

.idb-usage-category-grid,
.idb-usage-graph-grid,
.idb-category-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.idb-usage-category-card,
.idb-usage-graph-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(109,33,232,.075), transparent 34%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
  overflow: hidden;
}

.idb-usage-category-card h5,
.idb-usage-graph-card h5 {
  margin: 0;
  color: var(--idb-ink);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.018em;
}

.idb-usage-category-card p,
.idb-usage-graph-card p {
  margin: 7px 0 0;
  color: var(--idb-muted);
  font-size: 12px;
  line-height: 1.55;
}

.idb-usage-graph-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.idb-usage-graph-value strong {
  color: var(--idb-ink);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.035em;
}

.idb-usage-graph-value small {
  color: var(--idb-muted);
  font-weight: 850;
}

/* Graph track */
.idb-usage-graph,
.idb-usage-bar,
.idb-risk-bar {
  position: relative;
  height: 13px;
  margin-top: 13px;
  border-radius: 999px;
  background: #eee6ff;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(35,5,77,.08);
}

/* Default fill uses low-to-high color ramp: green → blue → orange → red */
.idb-usage-graph span,
.idb-usage-bar span,
.idb-risk-bar span {
  display: block;
  height: 100%;
  width: var(--usage-width, 0%);
  min-width: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--idb-green) 0%, var(--idb-blue) 44%, var(--idb-orange) 72%, var(--idb-red) 100%);
  transition: width .35s ease;
}

/* Optional severity states if JS adds them */
.idb-usage-category-card.is-low .idb-usage-graph span,
.idb-usage-graph-card.is-low .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #20c987);
}

.idb-usage-category-card.is-medium .idb-usage-graph span,
.idb-usage-graph-card.is-medium .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #2f5df4);
}

.idb-usage-category-card.is-high .idb-usage-graph span,
.idb-usage-graph-card.is-high .idb-usage-graph span {
  background: linear-gradient(90deg, #2f5df4, #f97316);
}

.idb-usage-category-card.is-critical .idb-usage-graph span,
.idb-usage-graph-card.is-critical .idb-usage-graph span {
  background: linear-gradient(90deg, #f97316, #d93f55);
}

/* Color dot by category */
.idb-usage-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--idb-blue);
  box-shadow: 0 0 0 5px rgba(47,93,244,.11);
}

.idb-usage-category-card[data-category="system"] .idb-usage-dot { background: var(--idb-green); box-shadow: 0 0 0 5px rgba(20,162,107,.12); }
.idb-usage-category-card[data-category="chat"] .idb-usage-dot { background: var(--idb-blue); box-shadow: 0 0 0 5px rgba(47,93,244,.12); }
.idb-usage-category-card[data-category="rag"] .idb-usage-dot { background: var(--idb-orange); box-shadow: 0 0 0 5px rgba(249,115,22,.12); }
.idb-usage-category-card[data-category="voice"] .idb-usage-dot { background: var(--idb-red); box-shadow: 0 0 0 5px rgba(217,63,85,.12); }
.idb-usage-category-card[data-category="handoff"] .idb-usage-dot { background: var(--idb-purple); box-shadow: 0 0 0 5px rgba(109,33,232,.12); }

.idb-usage-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.idb-usage-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Voice minute panel ---------- */

.idb-voice-summary-card {
  border-color: rgba(217,63,85,.18);
  background:
    radial-gradient(circle at top right, rgba(217,63,85,.10), transparent 34%),
    linear-gradient(180deg, #fff, #fff8fa);
}

.idb-voice-summary-card .idb-usage-graph span {
  background: linear-gradient(90deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
}

/* ---------- Session/login CRM panel ---------- */

.idb-session-crm-grid,
.idb-login-audit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.idb-session-crm-item {
  min-width: 0;
  border: 1px solid #efe7ff;
  border-radius: 19px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #fcfaff);
}

.idb-session-crm-item span {
  display: block;
  color: var(--idb-muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.idb-session-crm-item strong {
  display: block;
  margin-top: 6px;
  color: var(--idb-ink);
  line-height: 1.35;
  word-break: break-word;
}

.idb-session-crm-item small {
  display: block;
  margin-top: 5px;
  color: var(--idb-muted);
  line-height: 1.45;
}

/* ---------- Upgrade existing usage list rows ---------- */

#usageBreakdown .idb-list-item,
#ledgerList .idb-list-item {
  position: relative;
  padding-left: 18px;
}

#usageBreakdown .idb-list-item::before,
#ledgerList .idb-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
}

/* ---------- Responsive ---------- */

@media (max-width: 1380px) {
  .idb-overview-summary-grid,
  .idb-exec-summary-grid,
  .idb-crm-summary-grid,
  .idb-usage-category-grid,
  .idb-usage-graph-grid,
  .idb-category-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .idb-session-crm-grid,
  .idb-login-audit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .idb-period-strip,
  .idb-overview-periods,
  .idb-period-selector {
    padding: 10px;
  }

  .idb-period-btn,
  button.idb-period-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }

  .idb-overview-summary-grid,
  .idb-exec-summary-grid,
  .idb-crm-summary-grid,
  .idb-workflow-grid,
  .idb-overview-workflow-grid,
  .idb-usage-category-grid,
  .idb-usage-graph-grid,
  .idb-category-usage-grid,
  .idb-session-crm-grid,
  .idb-login-audit-grid {
    grid-template-columns: 1fr;
  }

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



/* =========================================================
   INDUSTRY DASHBOARD — OVERVIEW / USAGE GRAPH UPGRADE
   Paste after the existing industry-dashboard.css
   Works with overview/usage/session upgrade HTML + JS
   ========================================================= */

/* ---------- Period selector ---------- */

.idb-period-strip,
.idb-overview-periods,
.idb-period-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,248,255,.78));
  box-shadow: var(--idb-shadow-soft);
}

.idb-period-btn,
button.idb-period-btn {
  min-height: 40px;
  padding: 10px 15px;
  border: 1px solid #e5d8ff;
  border-radius: 999px;
  background: #fff;
  color: #4b17ad;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(35,5,77,.055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.idb-period-btn:hover {
  transform: translateY(-1px);
  border-color: #d2bfff;
  box-shadow: 0 12px 28px rgba(35,5,77,.09);
}

.idb-period-btn.is-active,
.idb-period-btn[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--idb-purple), var(--idb-blue));
  color: #fff;
  box-shadow: 0 14px 34px rgba(74,45,240,.24);
}

/* ---------- Overview CRM summary ---------- */

.idb-overview-summary-grid,
.idb-exec-summary-grid,
.idb-crm-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.idb-summary-tile,
.idb-crm-tile {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(109,33,232,.08), transparent 34%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
  overflow: hidden;
}

.idb-summary-tile::after,
.idb-crm-tile::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
  opacity: .58;
}

.idb-summary-tile span,
.idb-crm-tile span {
  display: block;
  color: var(--idb-muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .085em;
}

.idb-summary-tile strong,
.idb-crm-tile strong {
  display: block;
  margin-top: 8px;
  color: var(--idb-ink);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -.035em;
  word-break: break-word;
}

.idb-summary-tile small,
.idb-crm-tile small {
  display: block;
  margin-top: 7px;
  color: var(--idb-muted);
  font-weight: 780;
  line-height: 1.5;
}

/* ---------- Workflow overview cards ---------- */

.idb-workflow-grid,
.idb-overview-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.idb-workflow-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(47,93,244,.08), transparent 32%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
  overflow: hidden;
}

.idb-workflow-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,33,232,.34), transparent);
}

.idb-workflow-card.is-disabled,
.idb-workflow-card[data-enabled="false"] {
  opacity: .72;
  background: linear-gradient(180deg, #fff, #f7f3ff);
}

.idb-workflow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.idb-workflow-head strong {
  display: block;
  color: var(--idb-ink);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.018em;
}

.idb-workflow-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--idb-green-soft);
  color: var(--idb-green);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.idb-workflow-card.is-disabled .idb-workflow-status,
.idb-workflow-card[data-enabled="false"] .idb-workflow-status {
  background: #f2effa;
  color: #7b849c;
}

.idb-workflow-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.idb-workflow-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #efe7ff;
  border-radius: 15px;
  background: rgba(255,255,255,.78);
}

.idb-workflow-metrics span {
  display: block;
  color: var(--idb-muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.idb-workflow-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--idb-ink);
  font-size: 15px;
}

.idb-workflow-latest {
  margin: 12px 0 0;
  color: var(--idb-text);
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- Usage category cards + low-to-high graph ---------- */

.idb-usage-category-grid,
.idb-usage-graph-grid,
.idb-category-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.idb-usage-category-card,
.idb-usage-graph-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(109,33,232,.075), transparent 34%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
  overflow: hidden;
}

.idb-usage-category-card h5,
.idb-usage-graph-card h5 {
  margin: 0;
  color: var(--idb-ink);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.018em;
}

.idb-usage-category-card p,
.idb-usage-graph-card p {
  margin: 7px 0 0;
  color: var(--idb-muted);
  font-size: 12px;
  line-height: 1.55;
}

.idb-usage-graph-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.idb-usage-graph-value strong {
  color: var(--idb-ink);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.035em;
}

.idb-usage-graph-value small {
  color: var(--idb-muted);
  font-weight: 850;
}

/* Graph track */
.idb-usage-graph,
.idb-usage-bar,
.idb-risk-bar {
  position: relative;
  height: 13px;
  margin-top: 13px;
  border-radius: 999px;
  background: #eee6ff;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(35,5,77,.08);
}

/* Default fill uses low-to-high color ramp: green → blue → orange → red */
.idb-usage-graph span,
.idb-usage-bar span,
.idb-risk-bar span {
  display: block;
  height: 100%;
  width: var(--usage-width, 0%);
  min-width: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--idb-green) 0%, var(--idb-blue) 44%, var(--idb-orange) 72%, var(--idb-red) 100%);
  transition: width .35s ease;
}

/* Optional severity states if JS adds them */
.idb-usage-category-card.is-low .idb-usage-graph span,
.idb-usage-graph-card.is-low .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #20c987);
}

.idb-usage-category-card.is-medium .idb-usage-graph span,
.idb-usage-graph-card.is-medium .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #2f5df4);
}

.idb-usage-category-card.is-high .idb-usage-graph span,
.idb-usage-graph-card.is-high .idb-usage-graph span {
  background: linear-gradient(90deg, #2f5df4, #f97316);
}

.idb-usage-category-card.is-critical .idb-usage-graph span,
.idb-usage-graph-card.is-critical .idb-usage-graph span {
  background: linear-gradient(90deg, #f97316, #d93f55);
}

/* Color dot by category */
.idb-usage-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--idb-blue);
  box-shadow: 0 0 0 5px rgba(47,93,244,.11);
}

.idb-usage-category-card[data-category="system"] .idb-usage-dot { background: var(--idb-green); box-shadow: 0 0 0 5px rgba(20,162,107,.12); }
.idb-usage-category-card[data-category="chat"] .idb-usage-dot { background: var(--idb-blue); box-shadow: 0 0 0 5px rgba(47,93,244,.12); }
.idb-usage-category-card[data-category="rag"] .idb-usage-dot { background: var(--idb-orange); box-shadow: 0 0 0 5px rgba(249,115,22,.12); }
.idb-usage-category-card[data-category="voice"] .idb-usage-dot { background: var(--idb-red); box-shadow: 0 0 0 5px rgba(217,63,85,.12); }
.idb-usage-category-card[data-category="handoff"] .idb-usage-dot { background: var(--idb-purple); box-shadow: 0 0 0 5px rgba(109,33,232,.12); }

.idb-usage-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.idb-usage-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Voice minute panel ---------- */

.idb-voice-summary-card {
  border-color: rgba(217,63,85,.18);
  background:
    radial-gradient(circle at top right, rgba(217,63,85,.10), transparent 34%),
    linear-gradient(180deg, #fff, #fff8fa);
}

.idb-voice-summary-card .idb-usage-graph span {
  background: linear-gradient(90deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
}

/* ---------- Session/login CRM panel ---------- */

.idb-session-crm-grid,
.idb-login-audit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.idb-session-crm-item {
  min-width: 0;
  border: 1px solid #efe7ff;
  border-radius: 19px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #fcfaff);
}

.idb-session-crm-item span {
  display: block;
  color: var(--idb-muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.idb-session-crm-item strong {
  display: block;
  margin-top: 6px;
  color: var(--idb-ink);
  line-height: 1.35;
  word-break: break-word;
}

.idb-session-crm-item small {
  display: block;
  margin-top: 5px;
  color: var(--idb-muted);
  line-height: 1.45;
}

/* ---------- Upgrade existing usage list rows ---------- */

#usageBreakdown .idb-list-item,
#ledgerList .idb-list-item {
  position: relative;
  padding-left: 18px;
}

#usageBreakdown .idb-list-item::before,
#ledgerList .idb-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
}

/* ---------- Responsive ---------- */

@media (max-width: 1380px) {
  .idb-overview-summary-grid,
  .idb-exec-summary-grid,
  .idb-crm-summary-grid,
  .idb-usage-category-grid,
  .idb-usage-graph-grid,
  .idb-category-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .idb-session-crm-grid,
  .idb-login-audit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .idb-period-strip,
  .idb-overview-periods,
  .idb-period-selector {
    padding: 10px;
  }

  .idb-period-btn,
  button.idb-period-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }

  .idb-overview-summary-grid,
  .idb-exec-summary-grid,
  .idb-crm-summary-grid,
  .idb-workflow-grid,
  .idb-overview-workflow-grid,
  .idb-usage-category-grid,
  .idb-usage-graph-grid,
  .idb-category-usage-grid,
  .idb-session-crm-grid,
  .idb-login-audit-grid {
    grid-template-columns: 1fr;
  }

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


/* =========================================================
   INDUSTRY DASHBOARD — V2 RATIONALISED PANELS
   Overview becomes small-card snapshot.
   Workflows, usage categories, and billing graphs get their own breathing space.
   ========================================================= */

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

.idb-overview-kpi-row {
  align-items: stretch;
}

.idb-overview-kpi-row .idb-stat {
  min-height: 104px;
}

.idb-overview-main-grid {
  align-items: stretch;
}

.idb-executive-card {
  min-height: 360px;
}

.idb-detail-grid-breath {
  gap: 16px;
}

.idb-detail-grid-breath .idb-detail-item {
  min-height: 84px;
  padding: 16px;
}

.idb-card-headline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.idb-card-actions-tight {
  margin-top: 0;
  flex: 0 0 auto;
}

.idb-card-actions-tight .idb-btn {
  min-height: 38px;
  padding: 10px 14px;
  font-size: 12px;
}

.idb-workflow-scroll,
.idb-usage-category-scroll,
.idb-scroll-list {
  max-height: 620px;
  overflow: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(109,33,232,.42) rgba(230,220,255,.45);
}

.idb-ledger-scroll {
  max-height: 560px;
}

.idb-usage-event-scroll {
  max-height: 520px;
}

.idb-workflow-scroll::-webkit-scrollbar,
.idb-usage-category-scroll::-webkit-scrollbar,
.idb-scroll-list::-webkit-scrollbar {
  width: 8px;
}

.idb-workflow-scroll::-webkit-scrollbar-track,
.idb-usage-category-scroll::-webkit-scrollbar-track,
.idb-scroll-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(230,220,255,.45);
}

.idb-workflow-scroll::-webkit-scrollbar-thumb,
.idb-usage-category-scroll::-webkit-scrollbar-thumb,
.idb-scroll-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-purple), var(--idb-blue));
}

.idb-workflow-overview-grid,
.idb-workflow-billing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.idb-workflow-billing-grid .idb-workflow-card {
  min-height: 190px;
}

.idb-workflow-graph {
  position: relative;
  height: 12px;
  margin: 12px 0 13px;
  border-radius: 999px;
  background: #eee6ff;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(35,5,77,.08);
}

.idb-workflow-graph span {
  display: block;
  width: var(--usage-width, 0%);
  min-width: 3px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--idb-green) 0%, var(--idb-blue) 44%, var(--idb-orange) 72%, var(--idb-red) 100%);
}

.idb-workflow-card.is-low .idb-workflow-graph span,
.idb-usage-row.is-low .idb-usage-graph span,
.idb-billing-graph-card.is-low .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #20c987);
}

.idb-workflow-card.is-medium .idb-workflow-graph span,
.idb-usage-row.is-medium .idb-usage-graph span,
.idb-billing-graph-card.is-medium .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #2f5df4);
}

.idb-workflow-card.is-high .idb-workflow-graph span,
.idb-usage-row.is-high .idb-usage-graph span,
.idb-billing-graph-card.is-high .idb-usage-graph span {
  background: linear-gradient(90deg, #2f5df4, #f97316);
}

.idb-workflow-card.is-critical .idb-workflow-graph span,
.idb-usage-row.is-critical .idb-usage-graph span,
.idb-billing-graph-card.is-critical .idb-usage-graph span {
  background: linear-gradient(90deg, #f97316, #d93f55);
}

.idb-workflow-card.is-muted {
  opacity: .7;
}

.idb-category-usage-grid {
  align-items: stretch;
}

.idb-usage-category-card strong {
  display: block;
  color: var(--idb-ink);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.03em;
}

.idb-usage-category-card small,
.idb-billing-graph-card small {
  display: block;
  margin-top: 9px;
  color: var(--idb-muted);
  font-weight: 780;
  line-height: 1.45;
}

.idb-billing-graph-card {
  min-height: 160px;
  border: 1px solid #efe7ff;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, #fff, #fcfaff);
}

.idb-billing-graph-card h5 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.018em;
}

.idb-billing-graph-card p {
  margin: 7px 0 0;
  color: var(--idb-muted);
  line-height: 1.55;
}

@media (max-width: 1380px) {
  .idb-grid-four,
  .idb-workflow-overview-grid,
  .idb-workflow-billing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .idb-grid-four,
  .idb-workflow-overview-grid,
  .idb-workflow-billing-grid {
    grid-template-columns: 1fr;
  }

  .idb-card-headline {
    display: block;
  }

  .idb-card-actions-tight {
    margin-top: 12px;
  }
}



/* =========================================================
   INDUSTRY DASHBOARD — OVERVIEW / USAGE GRAPH UPGRADE
   Paste after the existing industry-dashboard.css
   Works with overview/usage/session upgrade HTML + JS
   ========================================================= */

/* ---------- Period selector ---------- */

.idb-period-strip,
.idb-overview-periods,
.idb-period-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(251,248,255,.78));
  box-shadow: var(--idb-shadow-soft);
}

.idb-period-btn,
button.idb-period-btn {
  min-height: 40px;
  padding: 10px 15px;
  border: 1px solid #e5d8ff;
  border-radius: 999px;
  background: #fff;
  color: #4b17ad;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(35,5,77,.055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.idb-period-btn:hover {
  transform: translateY(-1px);
  border-color: #d2bfff;
  box-shadow: 0 12px 28px rgba(35,5,77,.09);
}

.idb-period-btn.is-active,
.idb-period-btn[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--idb-purple), var(--idb-blue));
  color: #fff;
  box-shadow: 0 14px 34px rgba(74,45,240,.24);
}

/* ---------- Overview CRM summary ---------- */

.idb-overview-summary-grid,
.idb-exec-summary-grid,
.idb-crm-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.idb-summary-tile,
.idb-crm-tile {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(109,33,232,.08), transparent 34%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
  overflow: hidden;
}

.idb-summary-tile::after,
.idb-crm-tile::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
  opacity: .58;
}

.idb-summary-tile span,
.idb-crm-tile span {
  display: block;
  color: var(--idb-muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .085em;
}

.idb-summary-tile strong,
.idb-crm-tile strong {
  display: block;
  margin-top: 8px;
  color: var(--idb-ink);
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: -.035em;
  word-break: break-word;
}

.idb-summary-tile small,
.idb-crm-tile small {
  display: block;
  margin-top: 7px;
  color: var(--idb-muted);
  font-weight: 780;
  line-height: 1.5;
}

/* ---------- Workflow overview cards ---------- */

.idb-workflow-grid,
.idb-overview-workflow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.idb-workflow-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(47,93,244,.08), transparent 32%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
  overflow: hidden;
}

.idb-workflow-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(109,33,232,.34), transparent);
}

.idb-workflow-card.is-disabled,
.idb-workflow-card[data-enabled="false"] {
  opacity: .72;
  background: linear-gradient(180deg, #fff, #f7f3ff);
}

.idb-workflow-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.idb-workflow-head strong {
  display: block;
  color: var(--idb-ink);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.018em;
}

.idb-workflow-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--idb-green-soft);
  color: var(--idb-green);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.idb-workflow-card.is-disabled .idb-workflow-status,
.idb-workflow-card[data-enabled="false"] .idb-workflow-status {
  background: #f2effa;
  color: #7b849c;
}

.idb-workflow-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.idb-workflow-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #efe7ff;
  border-radius: 15px;
  background: rgba(255,255,255,.78);
}

.idb-workflow-metrics span {
  display: block;
  color: var(--idb-muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.idb-workflow-metrics strong {
  display: block;
  margin-top: 4px;
  color: var(--idb-ink);
  font-size: 15px;
}

.idb-workflow-latest {
  margin: 12px 0 0;
  color: var(--idb-text);
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- Usage category cards + low-to-high graph ---------- */

.idb-usage-category-grid,
.idb-usage-graph-grid,
.idb-category-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.idb-usage-category-card,
.idb-usage-graph-card {
  position: relative;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(109,33,232,.075), transparent 34%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
  overflow: hidden;
}

.idb-usage-category-card h5,
.idb-usage-graph-card h5 {
  margin: 0;
  color: var(--idb-ink);
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.018em;
}

.idb-usage-category-card p,
.idb-usage-graph-card p {
  margin: 7px 0 0;
  color: var(--idb-muted);
  font-size: 12px;
  line-height: 1.55;
}

.idb-usage-graph-value {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.idb-usage-graph-value strong {
  color: var(--idb-ink);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.035em;
}

.idb-usage-graph-value small {
  color: var(--idb-muted);
  font-weight: 850;
}

/* Graph track */
.idb-usage-graph,
.idb-usage-bar,
.idb-risk-bar {
  position: relative;
  height: 13px;
  margin-top: 13px;
  border-radius: 999px;
  background: #eee6ff;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(35,5,77,.08);
}

/* Default fill uses low-to-high color ramp: green → blue → orange → red */
.idb-usage-graph span,
.idb-usage-bar span,
.idb-risk-bar span {
  display: block;
  height: 100%;
  width: var(--usage-width, 0%);
  min-width: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--idb-green) 0%, var(--idb-blue) 44%, var(--idb-orange) 72%, var(--idb-red) 100%);
  transition: width .35s ease;
}

/* Optional severity states if JS adds them */
.idb-usage-category-card.is-low .idb-usage-graph span,
.idb-usage-graph-card.is-low .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #20c987);
}

.idb-usage-category-card.is-medium .idb-usage-graph span,
.idb-usage-graph-card.is-medium .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #2f5df4);
}

.idb-usage-category-card.is-high .idb-usage-graph span,
.idb-usage-graph-card.is-high .idb-usage-graph span {
  background: linear-gradient(90deg, #2f5df4, #f97316);
}

.idb-usage-category-card.is-critical .idb-usage-graph span,
.idb-usage-graph-card.is-critical .idb-usage-graph span {
  background: linear-gradient(90deg, #f97316, #d93f55);
}

/* Color dot by category */
.idb-usage-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--idb-blue);
  box-shadow: 0 0 0 5px rgba(47,93,244,.11);
}

.idb-usage-category-card[data-category="system"] .idb-usage-dot { background: var(--idb-green); box-shadow: 0 0 0 5px rgba(20,162,107,.12); }
.idb-usage-category-card[data-category="chat"] .idb-usage-dot { background: var(--idb-blue); box-shadow: 0 0 0 5px rgba(47,93,244,.12); }
.idb-usage-category-card[data-category="rag"] .idb-usage-dot { background: var(--idb-orange); box-shadow: 0 0 0 5px rgba(249,115,22,.12); }
.idb-usage-category-card[data-category="voice"] .idb-usage-dot { background: var(--idb-red); box-shadow: 0 0 0 5px rgba(217,63,85,.12); }
.idb-usage-category-card[data-category="handoff"] .idb-usage-dot { background: var(--idb-purple); box-shadow: 0 0 0 5px rgba(109,33,232,.12); }

.idb-usage-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.idb-usage-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------- Voice minute panel ---------- */

.idb-voice-summary-card {
  border-color: rgba(217,63,85,.18);
  background:
    radial-gradient(circle at top right, rgba(217,63,85,.10), transparent 34%),
    linear-gradient(180deg, #fff, #fff8fa);
}

.idb-voice-summary-card .idb-usage-graph span {
  background: linear-gradient(90deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
}

/* ---------- Session/login CRM panel ---------- */

.idb-session-crm-grid,
.idb-login-audit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.idb-session-crm-item {
  min-width: 0;
  border: 1px solid #efe7ff;
  border-radius: 19px;
  padding: 14px;
  background: linear-gradient(180deg, #fff, #fcfaff);
}

.idb-session-crm-item span {
  display: block;
  color: var(--idb-muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.idb-session-crm-item strong {
  display: block;
  margin-top: 6px;
  color: var(--idb-ink);
  line-height: 1.35;
  word-break: break-word;
}

.idb-session-crm-item small {
  display: block;
  margin-top: 5px;
  color: var(--idb-muted);
  line-height: 1.45;
}

/* ---------- Upgrade existing usage list rows ---------- */

#usageBreakdown .idb-list-item,
#ledgerList .idb-list-item {
  position: relative;
  padding-left: 18px;
}

#usageBreakdown .idb-list-item::before,
#ledgerList .idb-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
}

/* ---------- Responsive ---------- */

@media (max-width: 1380px) {
  .idb-overview-summary-grid,
  .idb-exec-summary-grid,
  .idb-crm-summary-grid,
  .idb-usage-category-grid,
  .idb-usage-graph-grid,
  .idb-category-usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .idb-session-crm-grid,
  .idb-login-audit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .idb-period-strip,
  .idb-overview-periods,
  .idb-period-selector {
    padding: 10px;
  }

  .idb-period-btn,
  button.idb-period-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }

  .idb-overview-summary-grid,
  .idb-exec-summary-grid,
  .idb-crm-summary-grid,
  .idb-workflow-grid,
  .idb-overview-workflow-grid,
  .idb-usage-category-grid,
  .idb-usage-graph-grid,
  .idb-category-usage-grid,
  .idb-session-crm-grid,
  .idb-login-audit-grid {
    grid-template-columns: 1fr;
  }

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


/* =========================================================
   INDUSTRY DASHBOARD — V2 RATIONALISED PANELS
   Overview becomes small-card snapshot.
   Workflows, usage categories, and billing graphs get their own breathing space.
   ========================================================= */

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

.idb-overview-kpi-row {
  align-items: stretch;
}

.idb-overview-kpi-row .idb-stat {
  min-height: 104px;
}

.idb-overview-main-grid {
  align-items: stretch;
}

.idb-executive-card {
  min-height: 360px;
}

.idb-detail-grid-breath {
  gap: 16px;
}

.idb-detail-grid-breath .idb-detail-item {
  min-height: 84px;
  padding: 16px;
}

.idb-card-headline {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 16px;
}

.idb-card-actions-tight {
  margin-top: 0;
  flex: 0 0 auto;
}

.idb-card-actions-tight .idb-btn {
  min-height: 38px;
  padding: 10px 14px;
  font-size: 12px;
}

.idb-workflow-scroll,
.idb-usage-category-scroll,
.idb-scroll-list {
  max-height: 620px;
  overflow: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(109,33,232,.42) rgba(230,220,255,.45);
}

.idb-ledger-scroll {
  max-height: 560px;
}

.idb-usage-event-scroll {
  max-height: 520px;
}

.idb-workflow-scroll::-webkit-scrollbar,
.idb-usage-category-scroll::-webkit-scrollbar,
.idb-scroll-list::-webkit-scrollbar {
  width: 8px;
}

.idb-workflow-scroll::-webkit-scrollbar-track,
.idb-usage-category-scroll::-webkit-scrollbar-track,
.idb-scroll-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(230,220,255,.45);
}

.idb-workflow-scroll::-webkit-scrollbar-thumb,
.idb-usage-category-scroll::-webkit-scrollbar-thumb,
.idb-scroll-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-purple), var(--idb-blue));
}

.idb-workflow-overview-grid,
.idb-workflow-billing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.idb-workflow-billing-grid .idb-workflow-card {
  min-height: 190px;
}

.idb-workflow-graph {
  position: relative;
  height: 12px;
  margin: 12px 0 13px;
  border-radius: 999px;
  background: #eee6ff;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(35,5,77,.08);
}

.idb-workflow-graph span {
  display: block;
  width: var(--usage-width, 0%);
  min-width: 3px;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--idb-green) 0%, var(--idb-blue) 44%, var(--idb-orange) 72%, var(--idb-red) 100%);
}

.idb-workflow-card.is-low .idb-workflow-graph span,
.idb-usage-row.is-low .idb-usage-graph span,
.idb-billing-graph-card.is-low .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #20c987);
}

.idb-workflow-card.is-medium .idb-workflow-graph span,
.idb-usage-row.is-medium .idb-usage-graph span,
.idb-billing-graph-card.is-medium .idb-usage-graph span {
  background: linear-gradient(90deg, #14a26b, #2f5df4);
}

.idb-workflow-card.is-high .idb-workflow-graph span,
.idb-usage-row.is-high .idb-usage-graph span,
.idb-billing-graph-card.is-high .idb-usage-graph span {
  background: linear-gradient(90deg, #2f5df4, #f97316);
}

.idb-workflow-card.is-critical .idb-workflow-graph span,
.idb-usage-row.is-critical .idb-usage-graph span,
.idb-billing-graph-card.is-critical .idb-usage-graph span {
  background: linear-gradient(90deg, #f97316, #d93f55);
}

.idb-workflow-card.is-muted {
  opacity: .7;
}

.idb-category-usage-grid {
  align-items: stretch;
}

.idb-usage-category-card strong {
  display: block;
  color: var(--idb-ink);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.03em;
}

.idb-usage-category-card small,
.idb-billing-graph-card small {
  display: block;
  margin-top: 9px;
  color: var(--idb-muted);
  font-weight: 780;
  line-height: 1.45;
}

.idb-billing-graph-card {
  min-height: 160px;
  border: 1px solid #efe7ff;
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, #fff, #fcfaff);
}

.idb-billing-graph-card h5 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.018em;
}

.idb-billing-graph-card p {
  margin: 7px 0 0;
  color: var(--idb-muted);
  line-height: 1.55;
}

@media (max-width: 1380px) {
  .idb-grid-four,
  .idb-workflow-overview-grid,
  .idb-workflow-billing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .idb-grid-four,
  .idb-workflow-overview-grid,
  .idb-workflow-billing-grid {
    grid-template-columns: 1fr;
  }

  .idb-card-headline {
    display: block;
  }

  .idb-card-actions-tight {
    margin-top: 12px;
  }
}



/* =========================================================
   HOTFIX — Workflow Coverage scroll containment
   Paste at the very bottom of dashboard CSS.
   Keeps Workflow Coverage and Billing workflow cards inside scroll areas.
   ========================================================= */

/* Keep the right content panel from stretching forever on workflow-heavy views */
#idbView-workflows,
#idbView-billing {
  min-height: 0;
}

/* Workflow Coverage slide: card becomes a fixed-height workspace */
#idbView-workflows .idb-card:has(#overviewWorkflowGrid) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 260px);
}

/* The workflow grid itself scrolls */
#overviewWorkflowGrid,
#billingWorkflowGrid {
  min-height: 0;
  max-height: 560px;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-right: 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(109,33,232,.52) rgba(230,220,255,.55);
}

/* Use a tighter card height so six workflows do not turn into a long wall */
#overviewWorkflowGrid .idb-workflow-card,
#billingWorkflowGrid .idb-workflow-card {
  min-height: 0;
}

/* Billing section: workflow usage shape should also stay contained */
#idbView-billing .idb-card:has(#billingWorkflowGrid) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 560px;
}

/* WebKit scroll polish */
#overviewWorkflowGrid::-webkit-scrollbar,
#billingWorkflowGrid::-webkit-scrollbar {
  width: 8px;
}

#overviewWorkflowGrid::-webkit-scrollbar-track,
#billingWorkflowGrid::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(230,220,255,.55);
}

#overviewWorkflowGrid::-webkit-scrollbar-thumb,
#billingWorkflowGrid::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-purple), var(--idb-blue));
}

/* If browser does not support :has(), still force the scroll area */
@supports not selector(:has(*)) {
  #idbView-workflows .idb-card,
  #idbView-billing .idb-card {
    min-height: 0;
  }

  #overviewWorkflowGrid,
  #billingWorkflowGrid {
    max-height: 560px;
    overflow-y: auto !important;
  }
}

/* Smaller screens: give more vertical room but still contain the panel */
@media (max-width: 1180px) {
  #idbView-workflows .idb-card:has(#overviewWorkflowGrid),
  #idbView-billing .idb-card:has(#billingWorkflowGrid) {
    max-height: 680px;
  }

  #overviewWorkflowGrid,
  #billingWorkflowGrid {
    max-height: 620px;
  }
}

@media (max-width: 760px) {
  #idbView-workflows .idb-card:has(#overviewWorkflowGrid),
  #idbView-billing .idb-card:has(#billingWorkflowGrid) {
    max-height: 720px;
  }

  #overviewWorkflowGrid,
  #billingWorkflowGrid {
    max-height: 660px;
    padding-right: 4px;
  }
}


/* =========================================================
   V3B — Workflow operations center
   Left production feed scrolls. Right summary remains compact.
   ========================================================= */

.idb-workflow-ops-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.idb-workflow-feed-card {
  min-height: 0;
}

.idb-workflow-recent-list {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

.idb-workflow-summary-rail {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 92px;
  min-height: 0;
}

.idb-workflow-selected-card {
  min-height: 260px;
}

.idb-workflow-pressure-list {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 8px;
}

.idb-workflow-card-scroll {
  max-height: 430px;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-right: 8px;
}

.idb-workflow-card-button {
  width: 100%;
  border: 1px solid rgba(230,220,255,.92);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.idb-workflow-card-button:hover,
.idb-workflow-card-button.is-selected {
  transform: translateY(-1px);
  border-color: #cbbcff;
  box-shadow: 0 18px 42px rgba(35,5,77,.11);
}

.idb-workflow-card-button.is-selected::after {
  opacity: 1;
  background: linear-gradient(90deg, var(--idb-green), var(--idb-blue), var(--idb-orange));
}

.idb-workflow-pressure-row {
  cursor: pointer;
}

.idb-workflow-pressure-row.is-selected {
  border-color: #cbbcff;
  background: linear-gradient(180deg, #fff, #f6f1ff);
}

.idb-workflow-feed-row {
  border-left: 4px solid var(--idb-blue);
}

.idb-workflow-feed-row[data-group="booking"] { border-left-color: var(--idb-green); }
.idb-workflow-feed-row[data-group="technical"] { border-left-color: var(--idb-blue); }
.idb-workflow-feed-row[data-group="billing_payment"] { border-left-color: var(--idb-orange); }
.idb-workflow-feed-row[data-group="sales_quote"] { border-left-color: var(--idb-purple); }
.idb-workflow-feed-row[data-group="ecommerce"] { border-left-color: var(--idb-cyan); }
.idb-workflow-feed-row[data-group="escalation"] { border-left-color: var(--idb-red); }

@media (max-width: 1180px) {
  .idb-workflow-ops-layout {
    grid-template-columns: 1fr;
  }

  .idb-workflow-summary-rail {
    position: relative;
    top: auto;
  }

  .idb-workflow-recent-list,
  .idb-workflow-pressure-list,
  .idb-workflow-card-scroll {
    max-height: 520px;
  }
}

@media (max-width: 760px) {
  .idb-workflow-recent-list,
  .idb-workflow-pressure-list,
  .idb-workflow-card-scroll {
    max-height: 620px;
  }
}


/* =========================================================
   V3D — Correct building: Workflow Cases operations filters
   Workflow Coverage stays compact. Cases becomes the daily CRM area.
   ========================================================= */

/* Coverage compact again */
#idbView-workflows .idb-workflow-card-scroll {
  max-height: 520px;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-right: 8px;
}

/* Case operations layout */
.idb-case-ops-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: 18px;
  align-items: start;
}

.idb-case-feed-card {
  min-height: 0;
}

.idb-case-summary-rail {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 92px;
  min-height: 0;
}

.idb-case-scroll {
  max-height: 620px;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-right: 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(109,33,232,.52) rgba(230,220,255,.55);
}

.idb-case-detail-scroll {
  max-height: 380px;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-right: 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(109,33,232,.52) rgba(230,220,255,.55);
}

.idb-case-scroll .idb-list-item {
  position: relative;
  padding-left: 18px;
}

.idb-case-scroll .idb-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
}

.idb-case-scroll::-webkit-scrollbar,
.idb-case-detail-scroll::-webkit-scrollbar,
#idbView-workflows .idb-workflow-card-scroll::-webkit-scrollbar {
  width: 8px;
}

.idb-case-scroll::-webkit-scrollbar-track,
.idb-case-detail-scroll::-webkit-scrollbar-track,
#idbView-workflows .idb-workflow-card-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(230,220,255,.55);
}

.idb-case-scroll::-webkit-scrollbar-thumb,
.idb-case-detail-scroll::-webkit-scrollbar-thumb,
#idbView-workflows .idb-workflow-card-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-purple), var(--idb-blue));
}

@media (max-width: 1180px) {
  .idb-case-ops-layout {
    grid-template-columns: 1fr;
  }

  .idb-case-summary-rail {
    position: relative;
    top: auto;
  }

  .idb-case-scroll,
  .idb-case-detail-scroll {
    max-height: 560px;
  }
}

@media (max-width: 760px) {
  .idb-case-scroll,
  .idb-case-detail-scroll {
    max-height: 620px;
    padding-right: 4px;
  }
}

#usageCategoryGrid,
#billingUsageCategoryGrid,
.idb-usage-category-grid,
.idb-usage-graph-grid,
.idb-category-usage-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
align-items: stretch !important;
width: 100% !important;
min-width: 0 !important;
}

#usageCategoryGrid > *,
#billingUsageCategoryGrid > *,
.idb-usage-category-grid > *,
.idb-usage-graph-grid > *,
.idb-category-usage-grid > * {
min-width: 0 !important;
width: 100% !important;
overflow: hidden !important;
}

.idb-usage-category-card,
.idb-usage-graph-card {
min-width: 0 !important;
overflow: hidden !important;
}

.idb-usage-card-head {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 14px !important;
align-items: start !important;
}

.idb-usage-card-title {
min-width: 0 !important;
}

.idb-usage-category-card h5,
.idb-usage-graph-card h5 {
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
}

.idb-usage-category-card strong,
.idb-usage-graph-card strong {
max-width: 76px !important;
text-align: right !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
font-size: clamp(24px, 2.4vw, 34px) !important;
line-height: 1 !important;
}

@media (max-width: 760px) {
#usageCategoryGrid,
#billingUsageCategoryGrid,
.idb-usage-category-grid,
.idb-usage-graph-grid,
.idb-category-usage-grid {
grid-template-columns: 1fr !important;
}
}

/* =========================================================
   INDUSTRY CLIENT DASHBOARD — Knowledge & RAG panel CSS
   Paste at the bottom of industry-dashboard.css
   ========================================================= */

#idbView-rag {
  min-height: 0;
}

.idb-rag-kpi-row {
  align-items: stretch;
}

.idb-rag-kpi-row .idb-stat {
  min-height: 112px;
}

.idb-rag-kpi-row .idb-stat strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.idb-rag-knowledge-list {
  max-height: 520px;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding-right: 8px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(109,33,232,.52) rgba(230,220,255,.55);
}

.idb-rag-knowledge-list .idb-list-item {
  position: relative;
  padding-left: 18px;
}

.idb-rag-knowledge-list .idb-list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
}

.idb-rag-knowledge-list .idb-list-item strong,
#ragUsageDetails .idb-detail-item strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#ragUsageDetails {
  align-items: stretch;
}

#ragUsageDetails .idb-detail-item {
  min-height: 86px;
}

#idbView-rag .idb-note {
  border: 1px solid rgba(230,220,255,.92);
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(109,33,232,.08), transparent 34%),
    linear-gradient(180deg, #fff, #fdfbff);
  box-shadow: var(--idb-shadow-soft);
}

#idbView-rag .idb-note strong {
  display: block;
  color: var(--idb-ink);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.018em;
}

#idbView-rag .idb-note p {
  margin: 8px 0 0;
  color: var(--idb-text);
  line-height: 1.65;
}

#idbView-rag .idb-card:has(#ragKnowledgeList) {
  min-height: 0;
}

#idbView-rag .idb-card:has(#ragKnowledgeList),
#idbView-rag .idb-card:has(#ragUsageDetails) {
  height: 100%;
}

.idb-rag-knowledge-list::-webkit-scrollbar {
  width: 8px;
}

.idb-rag-knowledge-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(230,220,255,.55);
}

.idb-rag-knowledge-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--idb-purple), var(--idb-blue));
}

/* Keep RAG top cards readable in the same rhythm as other dashboard areas */
@media (max-width: 1380px) {
  #idbView-rag .idb-grid-four,
  .idb-rag-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  #idbView-rag .idb-grid-four,
  .idb-rag-kpi-row {
    grid-template-columns: 1fr;
  }

  .idb-rag-knowledge-list {
    max-height: 620px;
    padding-right: 4px;
  }

  #ragUsageDetails .idb-detail-item {
    min-height: 0;
  }
}

/* =========================================================
INDUSTRY DASHBOARD — Top-up capacity packs
========================================================= */

.idb-topup-grid-six {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
}

.idb-topup-grid-six button {
position: relative;
min-width: 0;
min-height: 124px;
padding: 18px;
border: 1px solid rgba(230, 220, 255, 0.95);
border-radius: 22px;
background:
radial-gradient(circle at top left, rgba(109, 33, 232, 0.08), transparent 34%),
linear-gradient(180deg, #ffffff, #fdfbff);
color: var(--idb-ink);
text-align: left;
font: inherit;
cursor: pointer;
box-shadow: var(--idb-shadow-soft);
overflow: hidden;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease,
background 0.18s ease;
}

.idb-topup-grid-six button::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 0;
height: 3px;
border-radius: 999px 999px 0 0;
background: linear-gradient(90deg, var(--idb-green), var(--idb-blue), var(--idb-orange), var(--idb-red));
opacity: 0.58;
}

.idb-topup-grid-six button:hover {
transform: translateY(-2px);
border-color: #cbbcff;
background:
radial-gradient(circle at top left, rgba(109, 33, 232, 0.12), transparent 36%),
linear-gradient(180deg, #ffffff, #f7f2ff);
box-shadow: 0 18px 42px rgba(35, 5, 77, 0.11);
}

.idb-topup-grid-six button:active {
transform: translateY(0);
}

.idb-topup-grid-six button span {
display: block;
color: var(--idb-purple);
font-size: 17px;
font-weight: 950;
line-height: 1;
letter-spacing: -0.02em;
}

.idb-topup-grid-six button strong {
display: block;
margin-top: 13px;
color: var(--idb-ink);
font-size: clamp(22px, 2.1vw, 30px);
line-height: 1;
letter-spacing: -0.04em;
overflow-wrap: anywhere;
}

.idb-topup-grid-six button small {
display: block;
margin-top: 12px;
color: var(--idb-muted);
font-size: 12px;
font-weight: 850;
line-height: 1.45;
}

.idb-topup-grid-six button[data-topup-amount="500"],
.idb-topup-grid-six button[data-topup-amount="1000"] {
border-color: rgba(109, 33, 232, 0.26);
background:
radial-gradient(circle at top right, rgba(47, 93, 244, 0.10), transparent 34%),
linear-gradient(180deg, #ffffff, #f8f5ff);
}

.idb-topup-grid-six button[data-topup-amount="1000"]::before {
content: "Best value";
position: absolute;
top: 12px;
right: 12px;
min-height: 22px;
padding: 5px 9px;
border-radius: 999px;
background: linear-gradient(135deg, var(--idb-purple), var(--idb-blue));
color: #ffffff;
font-size: 10px;
font-weight: 950;
letter-spacing: 0.04em;
text-transform: uppercase;
box-shadow: 0 10px 24px rgba(47, 93, 244, 0.18);
}

.idb-topup-grid-six button[data-topup-amount="1000"] span {
padding-right: 92px;
}

@media (max-width: 1180px) {
.idb-topup-grid-six {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px) {
.idb-topup-grid-six {
grid-template-columns: 1fr;
}

.idb-topup-grid-six button {
min-height: 112px;
}
}