/* =========================================================
   CredBrain Liquid Glass Visual V2
   Deep Glass + Neural Atmosphere
   Visual-only layer. No workflow tracker. No backend changes.
   ========================================================= */

:root{
  --cbv2-navy:#071a42;
  --cbv2-navy-2:#0d2f78;
  --cbv2-blue:#2e76ff;
  --cbv2-cyan:#36d9ff;
  --cbv2-violet:#8f67ff;
  --cbv2-glass:rgba(255,255,255,.54);
  --cbv2-glass-strong:rgba(255,255,255,.72);
  --cbv2-border:rgba(255,255,255,.58);
  --cbv2-shadow:0 24px 60px rgba(18,61,132,.16);
  --cbv2-glow:0 0 0 1px rgba(103,190,255,.16),0 14px 36px rgba(31,93,203,.18);
}

/* Never show any old workflow / neural panel */
#cbOperationalFlow,
#cbNeuralEngine,
.cb-flow-shell,
.cb-neural-shell,
[class*="operational-transparency"],
[class*="neural-engine"]{
  display:none!important;
}

/* Neural atmosphere behind the app */
html,body{
  background:
    radial-gradient(circle at 8% 7%,rgba(70,153,255,.22),transparent 26%),
    radial-gradient(circle at 88% 9%,rgba(111,84,255,.18),transparent 28%),
    radial-gradient(circle at 72% 82%,rgba(41,210,255,.14),transparent 24%),
    linear-gradient(145deg,#e9f2ff 0%,#eef5ff 48%,#e6effc 100%)!important;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.46;
  background-image:
    radial-gradient(circle,rgba(74,148,255,.24) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(126,98,255,.18) 0 1px,transparent 1.5px);
  background-size:120px 120px,170px 170px;
  background-position:10px 10px,65px 45px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.58),transparent 78%);
}

.app-shell{position:relative;z-index:1;background:transparent!important}

/* ---------- Left rail ---------- */
body:not(.dark-mode) .sidebar{
  background:
    linear-gradient(180deg,rgba(250,253,255,.68),rgba(231,242,255,.52))!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-right-color:rgba(126,176,255,.18)!important;
  box-shadow:
    12px 0 42px rgba(24,69,140,.10),
    inset 0 1px 0 rgba(255,255,255,.95)!important;
  backdrop-filter:blur(28px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(28px) saturate(155%)!important;
}

body:not(.dark-mode) .brand{
  background:
    radial-gradient(circle at 22% 20%,rgba(80,227,255,.20),transparent 24%),
    linear-gradient(145deg,rgba(17,67,159,.96),rgba(34,95,213,.91))!important;
  border:1px solid rgba(255,255,255,.26)!important;
  box-shadow:
    0 18px 42px rgba(18,68,166,.24),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 28px rgba(47,149,255,.10)!important;
}

body:not(.dark-mode) .brand::after{
  content:"";
  position:absolute;
  inset:auto -8% -42% 28%;
  height:90px;
  transform:rotate(-10deg);
  background:radial-gradient(ellipse at center,rgba(84,218,255,.16),transparent 66%);
  pointer-events:none;
}

body:not(.dark-mode) .nav-item{
  border:1px solid transparent!important;
  background:rgba(255,255,255,.18)!important;
  color:#183d6c!important;
  border-radius:15px!important;
}

body:not(.dark-mode) .nav-item:hover{
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(255,255,255,.80)!important;
  box-shadow:0 10px 24px rgba(34,89,169,.10),inset 0 1px 0 rgba(255,255,255,.9)!important;
}

body:not(.dark-mode) .nav-item.active{
  background:
    linear-gradient(135deg,rgba(255,255,255,.90),rgba(213,235,255,.70))!important;
  border-color:rgba(95,174,255,.46)!important;
  box-shadow:
    0 14px 30px rgba(46,110,210,.14),
    0 0 0 1px rgba(255,255,255,.86) inset,
    0 0 22px rgba(54,217,255,.10)!important;
}

body:not(.dark-mode) .nav-icon{
  color:#387ee9!important;
  filter:drop-shadow(0 0 8px rgba(54,217,255,.18));
}

/* ---------- Header ---------- */
body:not(.dark-mode) .topbar{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 22%,rgba(64,216,255,.16),transparent 24%),
    linear-gradient(135deg,rgba(4,37,96,.96),rgba(10,54,135,.92) 52%,rgba(15,68,165,.88))!important;
  border:1px solid rgba(108,195,255,.26)!important;
  border-radius:0 0 24px 24px!important;
  box-shadow:
    0 18px 44px rgba(8,43,111,.24),
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 24px rgba(54,217,255,.08)!important;
  backdrop-filter:blur(24px) saturate(155%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(155%)!important;
}

body:not(.dark-mode) .topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 70% 28%,rgba(54,217,255,.18) 0 1px,transparent 1.5px),
    radial-gradient(circle at 86% 52%,rgba(143,103,255,.18) 0 1px,transparent 1.5px),
    linear-gradient(110deg,transparent 0 46%,rgba(255,255,255,.10) 50%,transparent 54%);
  background-size:92px 92px,140px 140px,220% 100%;
  animation:cbv2HeaderSweep 12s ease-in-out infinite;
}

body:not(.dark-mode) .topbar h2,
body:not(.dark-mode) .topbar-heading-row h2{
  color:#fff!important;
  text-shadow:0 2px 18px rgba(62,176,255,.12);
}

body:not(.dark-mode) .topbar-title>p{
  color:rgba(226,239,255,.82)!important;
}

body:not(.dark-mode) .topbar button,
body:not(.dark-mode) .connection-pill{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 24px rgba(3,30,84,.14)!important;
  backdrop-filter:blur(14px) saturate(145%);
}

body:not(.dark-mode) .connection-pill{
  background:rgba(255,255,255,.82)!important;
  color:#284a6d!important;
  border-color:rgba(255,255,255,.78)!important;
}

/* ---------- AI workspace strip ---------- */
body:not(.dark-mode) .premium-dashboard-preview,
body:not(.dark-mode) .dashboard-preview,
body:not(.dark-mode) .dashboard-ai-entry,
body:not(.dark-mode) .ai-workspace-entry,
body:not(.dark-mode) .ai-workspace-panel{
  background:
    linear-gradient(145deg,rgba(255,255,255,.66),rgba(228,240,255,.50))!important;
  border:1px solid rgba(255,255,255,.74)!important;
  box-shadow:
    0 16px 38px rgba(30,78,151,.10),
    inset 0 1px 0 rgba(255,255,255,.94)!important;
  backdrop-filter:blur(22px) saturate(150%);
}

/* ---------- Main hero: deep neural glass ---------- */
body:not(.dark-mode) .premium-hero{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 78% 46%,rgba(35,202,255,.18),transparent 22%),
    radial-gradient(circle at 66% 70%,rgba(121,83,255,.18),transparent 28%),
    radial-gradient(circle at 24% 12%,rgba(67,128,255,.11),transparent 30%),
    linear-gradient(145deg,rgba(5,29,77,.97),rgba(10,50,125,.94) 55%,rgba(15,61,150,.90))!important;
  border:1px solid rgba(93,190,255,.28)!important;
  box-shadow:
    0 24px 58px rgba(7,39,102,.28),
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 34px rgba(46,118,255,.10)!important;
  backdrop-filter:blur(26px) saturate(165%);
}

body:not(.dark-mode) .premium-hero::before{
  content:"";
  position:absolute;
  width:390px;
  height:390px;
  right:3%;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle,transparent 0 19%,rgba(58,201,255,.16) 20% 20.5%,transparent 21% 31%,rgba(91,126,255,.12) 32% 32.5%,transparent 33% 44%,rgba(143,103,255,.10) 45% 45.5%,transparent 46%),
    radial-gradient(circle at 50% 50%,rgba(50,191,255,.08),transparent 58%);
  filter:drop-shadow(0 0 16px rgba(66,178,255,.10));
  animation:cbv2Orbit 8s ease-in-out infinite;
}

body:not(.dark-mode) .premium-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background-image:
    radial-gradient(circle,rgba(75,198,255,.28) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(145,105,255,.20) 0 1px,transparent 1.5px);
  background-size:88px 88px,130px 130px;
  mask-image:linear-gradient(90deg,transparent 20%,#000 100%);
}

body:not(.dark-mode) .premium-hero .welcome-logo{
  background:
    radial-gradient(circle at 24% 20%,rgba(81,235,255,.26),transparent 30%),
    linear-gradient(145deg,rgba(8,56,135,.94),rgba(28,92,194,.84))!important;
  border:1px solid rgba(110,205,255,.28)!important;
  box-shadow:
    0 18px 44px rgba(8,48,126,.26),
    0 0 34px rgba(54,217,255,.16),
    inset 0 1px 0 rgba(255,255,255,.14)!important;
}

body:not(.dark-mode) .premium-hero h3{
  color:#fff!important;
  text-shadow:0 2px 24px rgba(43,132,255,.08);
}

body:not(.dark-mode) .premium-hero .welcome-description{
  color:rgba(230,240,255,.87)!important;
}

/* ---------- Right rail ---------- */
body:not(.dark-mode) .provider-panel{
  background:
    radial-gradient(circle at 88% 3%,rgba(74,185,255,.10),transparent 22%),
    linear-gradient(180deg,rgba(246,251,255,.72),rgba(229,240,255,.56))!important;
  border-left:1px solid rgba(255,255,255,.66)!important;
  box-shadow:
    -12px 0 38px rgba(30,76,145,.08),
    inset 1px 0 0 rgba(255,255,255,.82)!important;
  backdrop-filter:blur(26px) saturate(150%);
}

body:not(.dark-mode) .provider-panel-header{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 82% 72%,rgba(57,207,255,.14),transparent 24%),
    linear-gradient(145deg,rgba(11,58,147,.96),rgba(31,95,210,.91))!important;
  border:1px solid rgba(96,194,255,.26)!important;
  box-shadow:
    0 18px 38px rgba(17,65,157,.20),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 26px rgba(54,217,255,.08)!important;
}

body:not(.dark-mode) .provider-panel-header::before{
  content:"";
  position:absolute;
  width:180px;
  height:80px;
  right:-24px;
  bottom:-22px;
  border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 32%,rgba(61,211,255,.16) 33% 34%,transparent 35% 48%,rgba(137,103,255,.12) 49% 50%,transparent 51%);
  transform:rotate(-8deg);
  pointer-events:none;
}

body:not(.dark-mode) .provider-panel-header h3,
body:not(.dark-mode) .provider-panel-header .panel-label{
  color:#fff!important;
}

body:not(.dark-mode) .provider-panel-header .active-status{
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.20)!important;
}

/* ---------- Glass cards throughout ---------- */
body:not(.dark-mode) .provider-profile-card,
body:not(.dark-mode) .provider-metric-card,
body:not(.dark-mode) .priority-item,
body:not(.dark-mode) .quick-action-card,
body:not(.dark-mode) .provider-profile-section,
body:not(.dark-mode) .provider-enrollment-card,
body:not(.dark-mode) .enrollment-card,
body:not(.dark-mode) .provider-note-card,
body:not(.dark-mode) .document-card,
body:not(.dark-mode) .verification-card,
body:not(.dark-mode) .credential-alert-summary-card,
body:not(.dark-mode) .credential-alert-card,
body:not(.dark-mode) .settings-card,
body:not(.dark-mode) .settings-section,
body:not(.dark-mode) .audit-summary-card,
body:not(.dark-mode) .report-card,
body:not(.dark-mode) .sync-modal,
body:not(.dark-mode) .onboarding-modal,
body:not(.dark-mode) .modal-panel{
  background:
    linear-gradient(145deg,rgba(255,255,255,.72),rgba(235,244,255,.54))!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:
    0 18px 42px rgba(31,77,146,.10),
    inset 0 1px 0 rgba(255,255,255,.96)!important;
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}

/* Glassy controls */
body:not(.dark-mode) input,
body:not(.dark-mode) select,
body:not(.dark-mode) textarea{
  background:rgba(255,255,255,.70)!important;
  border:1px solid rgba(143,183,234,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82)!important;
}

body:not(.dark-mode) input:focus,
body:not(.dark-mode) select:focus,
body:not(.dark-mode) textarea:focus{
  border-color:rgba(65,160,255,.58)!important;
  box-shadow:
    0 0 0 4px rgba(59,154,255,.10),
    0 0 18px rgba(54,217,255,.08),
    inset 0 1px 0 rgba(255,255,255,.84)!important;
}

/* Interactive lift */
body:not(.dark-mode) .quick-action-card:hover,
body:not(.dark-mode) .provider-profile-card:hover,
body:not(.dark-mode) .provider-metric-card:hover,
body:not(.dark-mode) .priority-item:hover,
body:not(.dark-mode) .provider-enrollment-card:hover,
body:not(.dark-mode) .enrollment-card:hover,
body:not(.dark-mode) .document-card:hover,
body:not(.dark-mode) .verification-card:hover,
body:not(.dark-mode) .credential-alert-card:hover,
body:not(.dark-mode) .report-card:hover{
  transform:translateY(-2px);
  box-shadow:
    0 22px 52px rgba(31,77,146,.14),
    0 0 0 1px rgba(81,187,255,.08),
    inset 0 1px 0 rgba(255,255,255,.98)!important;
}

@keyframes cbv2HeaderSweep{
  0%,20%{background-position:center,center,120% 0}
  58%{background-position:center,center,-20% 0}
  100%{background-position:center,center,-20% 0}
}
@keyframes cbv2Orbit{
  0%,100%{transform:translateY(-50%) scale(.97);opacity:.72}
  50%{transform:translateY(-50%) scale(1.04);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  body:not(.dark-mode) .topbar::before,
  body:not(.dark-mode) .premium-hero::before{animation:none!important}
}