/* ============================================================
   MedhyaShield to Stylesheet (Bootstrap 5 theme, shell, motion)
   ============================================================ */

/* Plus Jakarta Sans (SIL OFL 1.1), self-hosted so CSP font-src stays 'self'. Same typeface as medhyashield.com. */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/pjs-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/pjs-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("../fonts/pjs-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ms-navy: #0f2a4d;
  --ms-navy-2: #143a6b;
  --ms-navy-dark: #0b2040;
  --ms-green: #22c55e;
  --ms-blue: #2563eb;
  --ms-cyan: #22d3ee;
  --ms-bg: #f4f6fa;
  --ms-border: #e6e9f0;
  --ms-muted: #6b7280;
  --ms-sidebar-w: 264px;
  --ms-sidebar-rail: 76px;
  --ms-topbar-h: 68px;
  --ms-radius: 16px;
  --ms-shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --ms-shadow-md: 0 8px 24px -8px rgba(16,24,40,.14), 0 2px 6px rgba(16,24,40,.05);
  --ms-shadow-lg: 0 24px 48px -16px rgba(16,24,40,.22);
  --ms-ease: cubic-bezier(.22,.61,.36,1);
}

html, body { height: 100%; }
body {
  background: var(--ms-bg);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; transition: color .15s; }
::selection { background: rgba(37,99,235,.18); }

/* ---------- Brand ---------- */
.ms-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; letter-spacing: -0.3px; color: #fff; white-space: nowrap; }
.ms-brand b { font-weight: 800; }
.ms-brand span { color: var(--ms-green); }
.ms-brand-mark {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 38px;
  box-shadow: 0 8px 20px -6px rgba(34,211,238,.6);
}
.ms-brand-mark img { width: 100%; height: 100%; display: block; border-radius: 11px; }
.ms-brand small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7dd3fc; line-height: 1; margin-top: 3px; }
.ms-brand b { line-height: 1; }
/* larger lockup (login aside) and dark-on-light variant (modals, white cards) */
.ms-brand-lg { font-size: 1.55rem; gap: 12px; }
.ms-brand-lg .ms-brand-mark { width: 50px; height: 50px; flex-basis: 50px; border-radius: 14px; }
.ms-brand-lg .ms-brand-mark img { border-radius: 14px; }
.ms-brand-lg small { font-size: .68rem; margin-top: 5px; }
.ms-brand-dark { color: var(--ms-navy, #0b1a33); }
.ms-brand-dark b { color: var(--ms-navy, #0b1a33); }
.ms-brand-dark small { color: #0e7490; }
.ms-brand-dark .ms-brand-mark { box-shadow: 0 8px 20px -8px rgba(37,99,235,.55); }

/* ---------- Login page (split layout) ---------- */
.ms-login-body { height: auto; min-height: 100vh; background: #f4f6fa; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: stretch; overflow-x: hidden; }
.ms-login-side { position: relative; overflow: hidden; color: #fff; padding: clamp(28px, 4vh, 48px) clamp(24px, 4.5vw, 64px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 100vh;
  background: radial-gradient(1200px 600px at 10% -10%, #1e3a8a 0%, transparent 60%), radial-gradient(900px 500px at 100% 100%, #065f46 0%, transparent 60%), #071a33; }
.ms-login-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14;
  background-image: linear-gradient(rgba(148,163,184,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.5) 1px, transparent 1px); background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%); }
.ms-login-side > * { position: relative; z-index: 1; }
.ms-login-side .ms-brand b { color: #fff; }
/* header row: homepage logo lockup + back link, glowing demarcation line underneath */
.ms-side-head { position: relative; padding-bottom: 18px; }
.ms-side-head .ms-brand { font-size: 1.3rem; gap: 10px; letter-spacing: -.02em; }
.ms-side-head .ms-brand-mark { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(29,78,216,.6); }
.ms-side-head .ms-brand-mark img { border-radius: 12px; }
.ms-side-head .ms-brand small { font-size: .58rem; margin-top: 4px; }
.ms-side-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, transparent 0%, #60a5fa 14%, #a78bfa 50%, #4ade80 86%, transparent 100%);
  box-shadow: 0 0 10px rgba(96,165,250,.9), 0 3px 22px rgba(96,165,250,.65), 0 8px 36px -4px rgba(167,139,250,.6), 0 0 28px rgba(74,222,128,.3);
  animation: ms-head-glow 6s ease-in-out infinite alternate; }
.ms-side-head::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 28px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(96,165,250,.35) 20%, rgba(167,139,250,.35) 50%, rgba(74,222,128,.3) 80%, transparent 100%);
  filter: blur(14px); opacity: .7; animation: ms-head-glow 6s ease-in-out infinite alternate; }
@keyframes ms-head-glow { from { filter: brightness(1) saturate(1); opacity: .85; } to { filter: brightness(1.3) saturate(1.35); opacity: 1; } }
.ms-side-head .btn-outline-light { border-color: rgba(255,255,255,.35); }
.ms-side-head .btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); color: #fff; }
.ms-badge-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); border-radius: 999px; padding: 6px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; letter-spacing: .06em; color: #86efac; text-transform: uppercase; line-height: 1.3; }
.ms-badge-pill i { flex-shrink: 0; }
.ms-login-tag { font-size: clamp(1.9rem, 2.4vw + .6rem, 2.9rem); font-weight: 900; letter-spacing: -1px; line-height: 1.08; color: #fff; margin: 18px 0 14px; text-wrap: balance; }
.ms-login-tag .ai { background: linear-gradient(90deg, #c4b5fd, #67e8f9 50%, #86efac); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-login-lead { color: #cbd5e1; font-size: clamp(.95rem, .3vw + .8rem, 1.05rem); max-width: 540px; }
.ms-login-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0; max-width: 580px; }
.ms-login-feats div { --c: #7dd3fc; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 16px 14px 14px; font-size: .8rem; font-weight: 500; color: #cbd5e1; line-height: 1.35;
  transition: transform .3s var(--ms-ease), background .3s, border-color .3s, box-shadow .3s; animation: ms-rise .7s var(--ms-ease) both; animation-delay: calc(.15s + var(--i, 0) * .12s); }
.ms-login-feats div::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, transparent 30%, var(--c) 50%, transparent 70%); background-size: 250% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; animation: ms-sheen 4.5s linear infinite; animation-delay: calc(var(--i, 0) * 1.5s); pointer-events: none; }
.ms-login-feats div b { display: block; color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: -.2px; margin-bottom: 1px; }
.ms-login-feats div:hover { transform: translateY(-5px); background: rgba(255,255,255,.12); border-color: var(--c); box-shadow: 0 18px 40px -22px var(--c); }
.ms-login-feats .ic { display: inline-flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 10px; color: var(--c); font-size: 1.3rem; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 60%, transparent)); animation: ms-float 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .5s); }
.ms-login-feats .ic i:nth-child(2) { font-size: .95rem; opacity: .85; position: relative; top: -2px; }
.ms-login-feats .f1 { --c: #7dd3fc; } .ms-login-feats .f2 { --c: #c4b5fd; } .ms-login-feats .f3 { --c: #86efac; }
@keyframes ms-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ms-sheen { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.ms-ticker { background: rgba(3,12,28,.55); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 14px 16px; max-width: 580px; backdrop-filter: blur(8px); }
.ms-ticker .h { display: flex; align-items: center; gap: 8px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin-bottom: 8px; }
.ms-ticker .h .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.25); animation: ms-pulse 1.6s infinite; }
.ms-ticker .row-t { display: flex; gap: 10px; align-items: center; font-size: .84rem; color: #e2e8f0; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.06); animation: ms-rise .5s var(--ms-ease) backwards; }
.ms-ticker .row-t:first-of-type { border-top: 0; }
.ms-ticker .row-t > span:first-of-type { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-ticker .row-t i { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.ms-ticker .row-t .st { margin-left: auto; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(34,197,94,.18); color: #86efac; white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) { .ms-ticker .row-t { font-size: .78rem; gap: 8px; } }
.ms-login-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 580px; color: #cbd5e1; font-size: .76rem; line-height: 1.3; }
.ms-login-stats > div { position: relative; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 12px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; backdrop-filter: blur(6px); animation: ms-rise .6s var(--ms-ease) both; animation-delay: calc(.35s + var(--i, 0) * .1s); transition: transform .25s var(--ms-ease), background .25s, border-color .25s; }
.ms-login-stats > div::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #22d3ee, #7c3aed); opacity: .8; }
.ms-login-stats > div:hover { transform: translateY(-3px); background: rgba(255,255,255,.1); border-color: rgba(125,211,252,.45); }
.ms-login-stats i { font-size: 1.15rem; color: #7dd3fc; }
.ms-login-stats b { display: block; color: #fff; font-size: 1.3rem; font-weight: 800; letter-spacing: -.5px; }
@media (max-width: 1199.98px) { .ms-login-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ms-orbit { position: absolute; right: -120px; top: 50%; width: 520px; height: 520px; margin-top: -260px; pointer-events: none; opacity: .5; z-index: 0; }
.ms-orbit i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(125,211,252,.35); animation: ms-spin 40s linear infinite; }
.ms-orbit i:nth-child(2) { inset: 70px; border-color: rgba(196,181,253,.35); animation-duration: 28s; animation-direction: reverse; }
.ms-orbit i:nth-child(3) { inset: 140px; border-color: rgba(134,239,172,.35); animation-duration: 18s; }
.ms-orbit i::before { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: #7dd3fc; box-shadow: 0 0 16px #7dd3fc; }
.ms-orbit i:nth-child(2)::before { background: #c4b5fd; box-shadow: 0 0 16px #c4b5fd; } .ms-orbit i:nth-child(3)::before { background: #86efac; box-shadow: 0 0 16px #86efac; }
@keyframes ms-spin { to { transform: rotate(360deg); } }

/* right column: stays centred in the viewport even when the left column is taller */
.ms-login-form { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 24px;
  background: radial-gradient(700px 400px at 80% 0%, rgba(37,99,235,.08), transparent 60%), radial-gradient(600px 400px at 10% 100%, rgba(16,185,129,.08), transparent 60%), #f4f6fa; }
@property --ms-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ms-login-card { --pc: #2563eb; --pc-2: #22d3ee; --pc-3: #7c3aed; --pc-soft: rgba(37,99,235,.14); position: relative; isolation: isolate; width: 100%; max-width: 420px; background: #fff; border: 0; border-radius: 22px; padding: 22px 28px 22px; font-size: .92rem; box-shadow: 0 30px 70px -30px rgba(15,23,42,.45); color: #1f2937; animation: ms-rise .7s var(--ms-ease) both; transition: box-shadow .4s; }
.ms-login-card::before { content: ""; position: absolute; inset: -2.5px; border-radius: 24px; z-index: -1; background: conic-gradient(from var(--ms-ang), var(--pc), var(--pc-2), var(--pc-3), var(--pc-2), var(--pc)); animation: ms-spin-border 6s linear infinite; }
.ms-login-card::after { content: ""; position: absolute; inset: -2px; border-radius: 24px; z-index: -2; background: conic-gradient(from var(--ms-ang), var(--pc), var(--pc-2), var(--pc-3), var(--pc-2), var(--pc)); filter: blur(30px); opacity: .55; animation: ms-spin-border 6s linear infinite; }
.ms-login-card > * { position: relative; }
.ms-login-card > .ms-card-bg { position: absolute; inset: 0; border-radius: 22px; background: #fff; z-index: 0; }
@keyframes ms-spin-border { to { --ms-ang: 360deg; } }
.ms-login-card[data-portal="platform"] { --pc: #b45309; --pc-2: #fbbf24; --pc-3: #f97316; --pc-soft: rgba(180,83,9,.14); }
.ms-portal-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 12px; padding: 3px; margin-bottom: 16px; }
.ms-portal-switch .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px; background: linear-gradient(120deg, var(--pc), color-mix(in srgb, var(--pc) 55%, var(--pc-2))); box-shadow: 0 8px 18px -8px var(--pc); transition: transform .35s var(--ms-ease), background .35s, box-shadow .35s; }
.ms-login-card[data-portal="platform"] .ms-portal-switch .thumb { transform: translateX(100%); }
.ms-portal-switch [role=tab] { position: relative; z-index: 1; border: 0; background: transparent; border-radius: 9px; padding: 8px 8px; font-size: .8rem; font-weight: 700; color: #64748b; display: inline-flex; align-items: center; justify-content: center; gap: 7px; transition: color .25s; white-space: nowrap; }
.ms-portal-switch [role=tab] i { font-size: .95rem; }
.ms-portal-switch [role=tab].active { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ms-portal-switch [role=tab]:focus-visible { outline: 2px solid var(--pc); outline-offset: 2px; }
.ms-login-head { text-align: center; margin-bottom: 14px; }
.ms-login-avatar { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: 10px; font-size: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 55%, #22d3ee)); box-shadow: 0 14px 30px -14px var(--pc); position: relative; transition: background .4s, box-shadow .4s; }
.ms-login-avatar::after { content: ""; position: absolute; inset: -5px; border-radius: 18px; border: 2px solid var(--pc); opacity: .25; animation: ms-halo 2.6s ease-out infinite; }
@keyframes ms-halo { 0% { transform: scale(.92); opacity: .45; } 100% { transform: scale(1.18); opacity: 0; } }
.ms-login-card .mb-4 { margin-bottom: 1rem !important; }
.ms-login-card .mt-4 { margin-top: .9rem !important; }
.ms-login-card hr.my-4 { margin: .9rem 0 !important; }
.ms-login-card > p.text-center { font-size: .84rem; }
.ms-login-card .btn-ms-gradient.fs-6 { font-size: .95rem !important; padding: .7rem 1rem; }
.ms-login-card h2 { font-weight: 800; letter-spacing: -.5px; color: #0f172a; font-size: 1.4rem; }
.ms-login-card .ms-login-head p { font-size: .88rem; }
.ms-portal-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; color: var(--pc); background: var(--pc-soft); transition: background .3s, color .3s; }
.ms-field { margin-bottom: 12px; }
.ms-login-card .form-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; color: #0f172a; font-size: .8rem; letter-spacing: -.1px; margin-bottom: 4px; }
.ms-login-card .form-label::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: linear-gradient(180deg, var(--pc), var(--pc-2)); box-shadow: 0 0 8px var(--pc-soft); }
.ms-login-card .form-control { font-size: .9rem; border-radius: 10px; padding: .55rem 2.4rem .55rem 2.5rem; border: 1.5px solid #cfd6e2; background: #f8fafc; color: #0f172a; font-weight: 500; transition: border-color .25s, box-shadow .25s, background .25s, transform .25s; }
.ms-login-card .form-control::placeholder { color: #94a3b8; font-weight: 400; }
.ms-login-card .form-control:hover { border-color: #a5b4cc; background: #fff; }
.ms-login-card .form-control:focus { border-color: var(--pc); background: #fff; box-shadow: 0 0 0 4px var(--pc-soft), 0 0 24px -6px var(--pc), 0 12px 28px -18px var(--pc); transform: translateY(-1px); }
.ms-login-card .form-control:not(:placeholder-shown):valid { border-color: #86efac; }
.ms-input-icon { position: relative; }
.ms-input-icon > i { position: absolute; left: 12px; font-size: .9rem; top: 50%; transform: translateY(-50%); color: #94a3b8; transition: color .25s, transform .25s; pointer-events: none; }
.ms-input-icon:focus-within > i { color: var(--pc); transform: translateY(-50%) scale(1.15); }
.ms-input-icon .bar { position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pc), #22d3ee); transform: scaleX(0); transform-origin: center; transition: transform .35s var(--ms-ease); pointer-events: none; }
.ms-input-icon:focus-within .bar { transform: scaleX(1); }
.ms-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: #64748b; padding: 2px 6px; }
.ms-eye:hover { color: var(--pc); }
.ms-login-card .form-check { display: flex; align-items: center; gap: 9px; padding: 0; margin: 0; min-height: 0; }
.ms-login-card .form-check-input { float: none; margin: 0; width: 19px; height: 19px; flex: 0 0 19px; border: 2px solid #94a3b8; border-radius: 6px; background-color: #fff; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s, transform .15s; }
.ms-login-card .form-check-input:hover { border-color: var(--pc); box-shadow: 0 0 0 4px var(--pc-soft); }
.ms-login-card .form-check-input:focus { border-color: var(--pc); box-shadow: 0 0 0 4px var(--pc-soft); }
.ms-login-card .form-check-input:checked { background-color: var(--pc); border-color: var(--pc); background-image: linear-gradient(135deg, var(--pc), var(--pc-2)); box-shadow: 0 6px 14px -6px var(--pc); transform: scale(1.05); }
.ms-login-card .form-check-input:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ms-login-card .form-check-input { position: relative; -webkit-appearance: none; appearance: none; }
.ms-login-card .form-check-label { cursor: pointer; color: #334155; font-weight: 600; font-size: .84rem; }
.ms-login-card a { color: var(--pc); }
.ms-forgot { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; color: var(--pc) !important; padding: 5px 11px; border-radius: 999px; background: var(--pc-soft); text-decoration: none; transition: background .2s, transform .15s, box-shadow .2s; }
.ms-forgot i { font-size: .85rem; }
.ms-forgot:hover { background: var(--pc); color: #fff !important; transform: translateY(-1px); box-shadow: 0 10px 20px -10px var(--pc); }
.ms-gradient-text { background: linear-gradient(90deg, #38bdf8, #22c55e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-ms-gradient { position: relative; overflow: hidden; background: linear-gradient(90deg, #2563eb, #7c3aed 55%, #22d3ee); background-size: 200% 100%; color: #fff; font-weight: 800; letter-spacing: .1px; border: 0; border-radius: 13px; padding: .9rem 1.25rem; box-shadow: 0 14px 30px -14px rgba(37,99,235,.7); transition: background-position .5s, transform .15s, box-shadow .2s; }
.btn-ms-gradient:focus-visible { outline: 3px solid var(--pc-soft, rgba(37,99,235,.3)); }
.btn-ms-gradient::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s; }
.btn-ms-gradient:hover { color: #fff; background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(37,99,235,.6); }
.btn-ms-gradient:hover::after { left: 120%; }
.ms-login-card[data-portal="platform"] .btn-ms-gradient { background-image: linear-gradient(90deg, #b45309, #f59e0b 55%, #fbbf24); }
.ms-login-card[data-portal="platform"] .btn-ms-gradient:hover { box-shadow: 0 12px 30px -10px rgba(180,83,9,.6); }
.ms-demo-box { background: #f0fdf4; border: 1px dashed #86efac; border-radius: 10px; padding: 10px 12px; font-size: .8rem; color: #1f2937; animation: ms-rise .4s var(--ms-ease) both; }
.ms-demo-box code { color: #047857; font-weight: 600; word-break: break-all; }
.ms-demo-super { background: #fffbeb; border-color: #fcd34d; }
.ms-demo-super code { color: #92400e; }
/* Registration page (shares the login shell) */
.ms-register-body .ms-login-side { position: sticky; top: 0; height: 100vh; min-height: 0; max-height: 100vh; justify-content: space-between; gap: 22px; overflow-y: auto; scrollbar-width: none; }
.ms-register-body .ms-login-side::-webkit-scrollbar { display: none; }
.ms-register-body .ms-login-side .ms-login-stats { margin-top: 0; }
.ms-register-body .ms-side-head + * { margin-top: 22px; }
.ms-register-body .ms-login-feats { margin: 20px 0; }
@media (min-width: 992px) and (max-height: 960px) {
  .ms-register-body .ms-login-side { padding-top: 24px; padding-bottom: 24px; gap: 16px; }
  .ms-register-body .ms-login-tag { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: 10px; }
  .ms-register-body .ms-login-lead { font-size: .95rem; }
  .ms-register-body .ms-login-feats { margin: 14px 0; } .ms-register-body .ms-login-feats div { padding: 12px 8px 10px; }
  .ms-register-body .ms-reg-steps > div { padding: 11px 14px 11px 16px; }
}
@media (min-width: 992px) and (max-height: 840px) {
  .ms-register-body .ms-login-side { gap: 12px; }
  .ms-register-body .ms-login-feats { margin: 10px 0; gap: 10px; }
  .ms-register-body .ms-login-feats div { flex-direction: row; justify-content: flex-start; text-align: left; gap: 10px; padding: 9px 12px; border-radius: 12px; }
  .ms-register-body .ms-login-feats .ic { margin: 0; font-size: 1.1rem; }
  .ms-register-body .ms-login-feats div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; font-size: .74rem; }
  .ms-register-body .ms-login-feats .ic { grid-row: 1 / span 2; }
  .ms-register-body .ms-login-feats div b { font-size: .84rem; margin: 0; }
  .ms-register-body .ms-login-lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .ms-register-body .ms-login-stats > div { padding: 10px 10px 9px; }
  .ms-register-body .ms-login-stats b { font-size: 1.15rem; }
}
@media (min-width: 992px) and (max-height: 700px) {
  .ms-register-body .ms-login-stats { display: none; }
}
/* register: stronger contrast + required-field emphasis */
.ms-reg-card .text-muted { color: #475569 !important; }
.ms-reg-card .form-control::placeholder, .ms-reg-card .form-select:invalid { color: #7a889f; }
.ms-reg-card .form-control, .ms-reg-card .form-select { background-color: #fff; border-color: #b9c4d6; }
.ms-reg-card .form-select { color: #0f172a; }
.ms-reg-card .ms-field:has([required]) .form-label::after { content: "*"; color: #dc2626; font-weight: 900; margin-left: -3px; }
.ms-reg-card .ms-field:has([required]) .form-control, .ms-reg-card .ms-field:has([required]) .form-select { border-color: #93a5c4; box-shadow: inset 0 0 0 1px rgba(37,99,235,.06); }
.ms-reg-card .ms-field:has([required]) .form-control:not(:placeholder-shown):valid, .ms-reg-card .ms-field:has([required]) .form-select:valid { border-color: #22c55e; box-shadow: inset 0 0 0 1px rgba(34,197,94,.15); }
.ms-reg-card .form-control.is-invalid, .ms-reg-card .form-select.is-invalid { border-color: #dc2626 !important; box-shadow: 0 0 0 4px rgba(220,38,38,.12) !important; }
.ms-reg-legend { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: #475569; margin: 12px 0 2px; }
.ms-reg-legend b { color: #dc2626; font-size: 1rem; line-height: 1; }
.ms-reg-group .ms-reg-legend { order: 2; margin: 0; text-transform: none; letter-spacing: 0; background: #fef2f2; border: 1px solid #fecaca; border-radius: 999px; padding: 2px 10px; }
.ms-reg-card .form-check-label { color: #1e293b; font-weight: 500; }
.ms-reg-card .form-check-input { width: 1.2em; height: 1.2em; border: 2px solid #64748b; }
.ms-reg-card .form-check-input:checked { background-color: var(--pc); border-color: var(--pc); }
.ms-reg-card .ms-reg-group { color: #1e293b; }
.ms-reg-card .ms-plan .box > span, .ms-reg-card .ms-plan .box em small { color: #475569; }
.ms-reg-card .ms-pw-hint { color: #475569; }
.ms-reg-card .ms-login-head p { color: #334155 !important; font-weight: 500; }
.ms-register-body .ms-login-form { align-items: flex-start; padding: 24px 24px 32px; }
.ms-reg-card { max-width: 600px; }
.ms-reg-card .row.g-3 { --bs-gutter-x: .9rem; --bs-gutter-y: .7rem; }
.ms-reg-card .ms-reg-group { margin: 16px 0 8px; font-size: .74rem; gap: 7px; }
.ms-reg-card .ms-reg-group i { width: 22px; height: 22px; border-radius: 7px; font-size: .7rem; }
.ms-reg-card .ms-reg-group small { font-size: .7rem; }
.ms-reg-card .ms-plans { gap: 10px; }
.ms-reg-card .ms-plan .box { padding: 12px 8px 10px; border-radius: 13px; }
.ms-reg-card .ms-plan .box > i { width: 32px; height: 32px; border-radius: 10px; font-size: .9rem; margin-bottom: 5px; }
.ms-reg-card .ms-plan .box b { font-size: .84rem; }
.ms-reg-card .ms-plan .box > span { font-size: .68rem; }
.ms-reg-card .ms-plan .box em { font-size: 1.05rem; margin-top: 5px; }
.ms-reg-card .ms-plan .tag { font-size: .58rem; padding: 2px 8px; }
.ms-reg-card .ms-plan input:checked + .box::after { top: 6px; right: 8px; font-size: .9rem; }
.ms-reg-card .ms-pw-meter { margin-top: 6px; gap: 4px; }
.ms-reg-card .ms-pw-meter i { height: 4px; }
.ms-reg-card .ms-pw-hint { font-size: .7rem; margin-top: 4px; }
.ms-reg-card .ms-login-avatar i { animation: ms-rocket 2.4s ease-in-out infinite; }
@keyframes ms-rocket { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }
.ms-reg-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 580px; margin: 4px 0 8px; counter-reset: step; }
.ms-reg-steps > div { --c: #7dd3fc; position: relative; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 14px 16px 14px 18px; color: #cbd5e1; font-size: .8rem; line-height: 1.4; transition: transform .3s var(--ms-ease), background .3s, border-color .3s, box-shadow .3s; animation: ms-rise .7s var(--ms-ease) both; animation-delay: calc(.35s + var(--i) * .12s); }
.ms-reg-steps > div::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--c), transparent); }
.ms-reg-steps > div:nth-child(2) { --c: #c4b5fd; } .ms-reg-steps > div:nth-child(3) { --c: #67e8f9; } .ms-reg-steps > div:nth-child(4) { --c: #86efac; }
.ms-reg-steps > div:hover { transform: translateY(-4px); background: rgba(255,255,255,.11); border-color: var(--c); box-shadow: 0 18px 30px -20px var(--c); }
.ms-reg-steps .n { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 999px; padding: 2px 9px; margin-bottom: 6px; }
.ms-reg-steps b { display: block; color: #fff; font-weight: 800; font-size: .9rem; margin-bottom: 2px; }
.ms-reg-group { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #475569; margin: 22px 0 12px; }
.ms-reg-group:first-child { margin-top: 0; }
.ms-reg-group i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: linear-gradient(135deg, var(--pc), var(--pc-3)); font-size: .8rem; box-shadow: 0 6px 12px -6px var(--pc); }
.ms-reg-group::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #dbe3ee, transparent); }
.ms-reg-group small { text-transform: none; letter-spacing: 0; font-size: .74rem; }
.ms-login-card .form-select { font-size: .9rem; border-radius: 10px; padding: .55rem 2.4rem .55rem 2.5rem; border: 1.5px solid #cfd6e2; background-color: #f8fafc; color: #0f172a; font-weight: 500; transition: border-color .25s, box-shadow .25s, background .25s, transform .25s; }
.ms-login-card .form-select:hover { border-color: #a5b4cc; background-color: #fff; }
.ms-login-card .form-select:focus { border-color: var(--pc); background-color: #fff; box-shadow: 0 0 0 4px var(--pc-soft), 0 0 24px -6px var(--pc); transform: translateY(-1px); }
.ms-login-card .form-label small { margin-left: 4px; }
.ms-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ms-plan { --c: #2563eb; --c2: #60a5fa; position: relative; margin: 0; cursor: pointer; }
.ms-plan input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ms-plan .box { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 18px 10px 14px; border-radius: 16px; border: 1.5px solid #dbe3ee; background: linear-gradient(170deg, color-mix(in srgb, var(--c) 7%, #fff), #fff 60%); transition: transform .3s var(--ms-ease), border-color .3s, box-shadow .3s, background .3s; }
.ms-plan .box > i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--c), var(--c2)); font-size: 1.1rem; margin-bottom: 8px; box-shadow: 0 10px 18px -10px var(--c); transition: transform .35s var(--ms-ease); }
.ms-plan .box b { color: #0f172a; font-weight: 800; font-size: .92rem; letter-spacing: -.2px; }
.ms-plan .box > span { color: #64748b; font-size: .72rem; font-weight: 600; line-height: 1.3; }
.ms-plan .box em { font-style: normal; margin-top: 8px; font-weight: 900; font-size: 1.2rem; letter-spacing: -.5px; color: var(--c); }
.ms-plan .box em small { font-size: .68rem; font-weight: 700; color: #64748b; margin-left: 2px; }
.ms-plan .tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, var(--c), var(--c2)); border-radius: 999px; padding: 3px 10px; box-shadow: 0 6px 14px -6px var(--c); z-index: 1; }
.ms-plan:hover .box { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 55%, #fff); box-shadow: 0 18px 30px -20px var(--c); }
.ms-plan:hover .box > i { transform: rotate(-6deg) scale(1.08); }
.ms-plan input:checked + .box { border-color: var(--c); background: linear-gradient(170deg, color-mix(in srgb, var(--c) 14%, #fff), #fff 70%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 16%, transparent), 0 20px 34px -22px var(--c); }
.ms-plan input:checked + .box::after { content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; top: 8px; right: 10px; color: var(--c); font-size: 1rem; }
.ms-plan input:focus-visible + .box { outline: 3px solid color-mix(in srgb, var(--c) 40%, transparent); outline-offset: 2px; }
.ms-plan.c-blue { --c: #1d4ed8; --c2: #60a5fa; } .ms-plan.c-violet { --c: #6d28d9; --c2: #a78bfa; } .ms-plan.c-green { --c: #15803d; --c2: #4ade80; }
.ms-pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
.ms-pw-meter i { height: 5px; border-radius: 3px; background: #e2e8f0; transition: background .3s, box-shadow .3s; }
.ms-pw-meter[data-level="1"] i:nth-child(-n+1) { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.5); }
.ms-pw-meter[data-level="2"] i:nth-child(-n+2) { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,.5); }
.ms-pw-meter[data-level="3"] i:nth-child(-n+3) { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.5); }
.ms-pw-meter[data-level="4"] i { background: #16a34a; box-shadow: 0 0 8px rgba(22,163,74,.5); }
.ms-pw-hint { font-size: .74rem; color: #64748b; font-weight: 600; margin-top: 5px; }
.ms-reg-done { text-align: center; animation: ms-rise .6s var(--ms-ease) both; }
.ms-reg-done .ok { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 24px; color: #fff; font-size: 2rem; background: linear-gradient(135deg, #16a34a, #22d3ee); box-shadow: 0 20px 40px -18px rgba(22,163,74,.7); animation: ms-pop .6s var(--ms-ease) both; }
@keyframes ms-pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
.ms-reg-done h3 { font-weight: 800; letter-spacing: -.5px; color: #0f172a; font-size: 1.5rem; }
.ms-reg-done p { color: #475569; }
@media (max-width: 767.98px) {
  .ms-plans { grid-template-columns: 1fr; }
  .ms-plan .box { flex-direction: row; text-align: left; gap: 0 12px; flex-wrap: wrap; padding: 14px 16px; }
  .ms-plan .box > i { margin-bottom: 0; }
  .ms-plan .box b { flex: 1; }
  .ms-plan .box > span { flex-basis: 100%; padding-left: 54px; margin-top: -6px; }
  .ms-plan .box em { margin-top: 0; margin-left: auto; }
  .ms-plan .tag { left: auto; right: 12px; transform: none; }
  .ms-reg-steps { grid-template-columns: 1fr; }
  .ms-reg-card { padding: 20px 18px 20px; }
}
.ms-shake { animation: ms-shake .45s; }
@keyframes ms-shake { 10%,90% { transform: translateX(-2px);} 20%,80% { transform: translateX(4px);} 30%,50%,70% { transform: translateX(-6px);} 40%,60% { transform: translateX(6px);} }
@media (max-width: 1199.98px) {
  .ms-login-card { padding: 22px 24px 22px; }
  .ms-login-side { padding: 32px 32px; }
}
@media (max-width: 991.98px) {
  .ms-login-body { grid-template-columns: minmax(0, 1fr); }
  .ms-login-side { padding: 28px 20px 24px; min-height: 0; gap: 20px; }
  .ms-register-body .ms-login-side { position: static; height: auto; max-height: none; overflow: hidden; }
  .ms-login-tag { font-size: 1.75rem; }
  .ms-login-feats { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; } .ms-login-feats div { font-size: .68rem; padding: 12px 8px 10px; } .ms-login-feats div b { font-size: .78rem; } .ms-login-feats .ic { font-size: 1.1rem; margin-bottom: 6px; }
  .ms-ticker, .ms-orbit, .ms-login-side .ms-login-stats { display: none; }
  .ms-login-head { padding-bottom: 14px; }
  .ms-login-form { position: static; min-height: 0; padding: 24px 16px 40px; }
  .ms-login-card { padding: 20px 18px 20px; }
  .ms-portal-switch [role=tab] { font-size: .78rem; padding: 9px 6px; }
}
@media (max-width: 575.98px) {
  .ms-login-feats { grid-template-columns: 1fr 1fr 1fr; }
  .ms-portal-switch [role=tab] i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-login-feats div, .ms-login-feats div::before, .ms-login-feats .ic, .ms-login-avatar::after, .ms-orbit i, .ms-login-head::after { animation: none; }
}

/* ---------- App shell ---------- */
.ms-shell { display: flex; min-height: 100vh; }
.ms-sidebar {
  width: var(--ms-sidebar-w);
  background: linear-gradient(180deg, #102d52 0%, var(--ms-navy) 45%, #0c2140 100%); color: #dbe4f0;
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 1030;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ms-ease), width .25s var(--ms-ease);
  box-shadow: 1px 0 0 rgba(255,255,255,.04), 12px 0 40px -24px rgba(0,0,0,.6);
}
.ms-sidebar-head {
  height: var(--ms-topbar-h); padding: 0 12px 0 14px; gap: 8px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.07);
}
.ms-sidebar-collapse {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #cbd5e1;
  display: grid; place-items: center; transition: background .15s, color .15s;
}
.ms-sidebar-collapse:hover { background: rgba(255,255,255,.1); color: #fff; }
.ms-sidebar-head .ms-brand { font-size: 1.05rem; gap: 8px; min-width: 0; }
.ms-sidebar-head .ms-brand-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.ms-sidebar-head .ms-brand-mark img { border-radius: 10px; }
.ms-sidebar-head .ms-brand small { font-size: .5rem; letter-spacing: .12em; margin-top: 3px; }
.ms-sidebar-collapse { flex: 0 0 32px; }
.ms-sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.ms-sidebar-nav::-webkit-scrollbar { width: 6px; }
.ms-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.ms-sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.3); }
.ms-nav-section { display: flex; align-items: center; gap: 10px; font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: 14px 10px 6px; background: linear-gradient(90deg, #7dd3fc, #a5f3fc 60%, #86efac); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ms-nav-section::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(125,211,252,.45), rgba(125,211,252,0)); }
/* colour-filled icon tiles: one accent per module */
.ms-ni { --c: #2563eb; --c2: #38bdf8; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: .82rem;
  background: linear-gradient(135deg, var(--c), var(--c2)); box-shadow: 0 6px 14px -6px var(--c), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s var(--ms-ease), box-shadow .2s; }
.ms-ni i { color: #fff !important; width: auto !important; flex-basis: auto !important; font-size: inherit !important; transition: none !important; }
.ms-ni.c-blue { --c: #2563eb; --c2: #60a5fa; } .ms-ni.c-sky { --c: #0284c7; --c2: #38bdf8; } .ms-ni.c-cyan { --c: #0891b2; --c2: #22d3ee; }
.ms-ni.c-teal { --c: #0d9488; --c2: #2dd4bf; } .ms-ni.c-green { --c: #16a34a; --c2: #4ade80; } .ms-ni.c-emerald { --c: #059669; --c2: #34d399; }
.ms-ni.c-lime { --c: #65a30d; --c2: #a3e635; } .ms-ni.c-amber { --c: #d97706; --c2: #fbbf24; } .ms-ni.c-orange { --c: #ea580c; --c2: #fb923c; }
.ms-ni.c-red { --c: #dc2626; --c2: #f87171; } .ms-ni.c-rose { --c: #e11d48; --c2: #fb7185; } .ms-ni.c-pink { --c: #db2777; --c2: #f472b6; }
.ms-ni.c-violet { --c: #7c3aed; --c2: #a78bfa; } .ms-ni.c-indigo { --c: #4f46e5; --c2: #818cf8; } .ms-ni.c-slate { --c: #475569; --c2: #94a3b8; }
.ms-nav-link > .ms-ni, .ms-nav-group > .ms-ni, .ms-search-menu a > .ms-ni { flex: 0 0 26px; overflow: visible; text-overflow: clip; }
.ms-nav-link:hover .ms-ni, .ms-nav-group:hover .ms-ni { transform: scale(1.1) rotate(-4deg); box-shadow: 0 10px 20px -6px var(--c); }
.ms-nav-link.active .ms-ni { box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 10px 22px -6px var(--c); }
.ms-nav-group.has-active .ms-ni, .ms-nav-link.sub-active .ms-ni { box-shadow: 0 0 0 2px rgba(125,211,252,.45), 0 10px 22px -6px var(--c); }
.ms-sidebar-nav .ms-nav-link.ms-nav-top, .ms-sidebar-nav .ms-nav-group { font-weight: 600; color: #eef3fa; font-size: .82rem; letter-spacing: -.005em; }
.ms-sidebar-nav .ms-nav-group .ms-chev { color: #9fb3d1; }
.ms-nav-sub .ms-nav-link { font-weight: 500; color: #b8c6dc; }
.ms-nav-sub .ms-nav-link > .ms-ni { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 7px; font-size: .72rem; }

.ms-nav-link {
  position: relative; display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 10px; margin: 1px 0; border-radius: 9px;
  color: #c7d3e6; font-size: .82rem; font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s, transform .15s;
}
.ms-nav-link > span { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.ms-nav-link i { width: 22px; flex: 0 0 22px; text-align: center; font-size: 1.05rem; color: #93a8c7; transition: color .15s, transform .2s; }
.ms-nav-link:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.ms-nav-link:hover i { color: var(--ms-cyan); transform: scale(1.1); }
.ms-nav-link.active {
  background: linear-gradient(90deg, rgba(37,99,235,.55), rgba(37,99,235,.18)); color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.35);
}
.ms-nav-link.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--ms-cyan), var(--ms-green)); box-shadow: 0 0 12px rgba(34,211,238,.8);
}
.ms-nav-link.active i { color: #fff; filter: drop-shadow(0 0 6px rgba(125,211,252,.7)); }
.ms-nav-link.active:hover { transform: none; }
.ms-nav-link.active:hover i { color: #fff; }
.ms-nav-badge { font-size: .58rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.12); color: #e2e8f0; flex: 0 0 auto; }
.ms-nav-badge.red { background: #ef4444; color: #fff; }
.ms-nav-badge.green { background: rgba(34,197,94,.25); color: #86efac; }
.ms-nav-badge.ai { background: linear-gradient(135deg, #7c3aed, #2563eb); color: #fff; letter-spacing: .06em; }

.ms-nav-group {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 36px; padding: 0 10px; margin: 1px 0; border-radius: 9px;
  background: transparent; color: #c7d3e6; border: 0; font-size: .82rem; font-weight: 500; text-align: left;
  transition: background .15s, color .15s;
}
.ms-nav-group i.ms-gi { width: 22px; flex: 0 0 22px; text-align: center; font-size: 1.05rem; color: #93a8c7; }
.ms-nav-group > span { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-nav-group .ms-chev { font-size: .68rem; color: #7f95b4; transition: transform .25s var(--ms-ease); flex: 0 0 auto; }
.ms-nav-group:hover { background: rgba(255,255,255,.08); color: #fff; }
.ms-nav-group:hover i.ms-gi { color: var(--ms-cyan); transform: scale(1.1); }
.ms-nav-group i.ms-gi { transition: color .15s, transform .2s; }
.ms-nav-group[aria-expanded="true"] { color: #fff; }
.ms-nav-group[aria-expanded="true"] .ms-chev { transform: rotate(90deg); }
.ms-nav-group.has-active i.ms-gi { color: var(--ms-cyan); }
.ms-nav-group.has-active[aria-expanded="false"] { background: rgba(255,255,255,.05); }
.ms-nav-sub { position: relative; margin: 0 0 3px 14px; padding-left: 9px; }
.ms-nav-sub::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 6px; width: 1px; background: rgba(255,255,255,.12); }
.ms-nav-sub .ms-nav-link { height: 32px; font-size: .78rem; padding: 0 8px; gap: 9px; }
.ms-nav-sub .ms-nav-link i { font-size: .95rem; width: 20px; flex-basis: 20px; }
.ms-nav-sub .ms-nav-link.active::before { left: -9px; }
.ms-nav-link.sub-active { color: #fff; }
.ms-nav-link.sub-active i { color: var(--ms-cyan); }
.ms-nav-sub .ms-nav-link.ms-nav-sub2 { height: 28px; font-size: .75rem; padding-left: 30px; color: #a9b8d0; }
.ms-nav-sub .ms-nav-link.ms-nav-sub2::after { content: ""; position: absolute; left: 17px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .5; transform: translateY(-50%); }
.ms-nav-sub .ms-nav-link.ms-nav-sub2.active { background: rgba(255,255,255,.08); box-shadow: none; color: #fff; }
.ms-nav-sub .ms-nav-link.ms-nav-sub2.active::after { opacity: 1; background: var(--ms-cyan); }
.ms-nav-sub .ms-nav-link.ms-nav-sub2.active::before { display: none; }

.ms-sidebar-foot { border-top: 1px solid rgba(255,255,255,.07); padding: 10px 12px 12px; flex: 0 0 auto; }
.ms-side-user {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; width: 100%; text-align: left; color: inherit;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); cursor: pointer; transition: background .2s, border-color .2s;
}
.ms-side-user:hover, .ms-side-user[aria-expanded="true"] { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.12); }
.ms-side-user .ms-chev { font-size: .75rem; color: #7f95b4; flex: 0 0 auto; transition: transform .25s var(--ms-ease); }
.ms-side-user[aria-expanded="true"] .ms-chev { transform: rotate(180deg); }
.ms-side-user:focus-visible { outline: 2px solid var(--ms-cyan); outline-offset: 2px; }
.ms-acct { padding-top: 6px; }
.ms-side-user .ms-avatar { width: 32px; height: 32px; font-size: .78rem; background: linear-gradient(135deg, var(--ms-blue), var(--ms-cyan)); }
.ms-side-user .n { font-weight: 600; color: #fff; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-side-user .r { font-size: .68rem; color: #93a8c7; white-space: nowrap; }
.ms-side-user > div { min-width: 0; flex: 1; }
.ms-sidebar-foot .ms-nav-link { height: 34px; }

/* Collapsed rail (desktop) */
@media (min-width: 992px) {
  body.ms-rail { --ms-sidebar-w: var(--ms-sidebar-rail); }
  body.ms-rail .ms-sidebar { width: var(--ms-sidebar-rail); }
  body.ms-rail .ms-brand > b, body.ms-rail .ms-nav-section, body.ms-rail .ms-nav-link > span:not(.ms-ni),
  body.ms-rail .ms-nav-group > span:not(.ms-ni), body.ms-rail .ms-nav-group .ms-chev, body.ms-rail .ms-nav-badge,
  body.ms-rail .ms-side-user > div, body.ms-rail .ms-side-user .ms-chev, body.ms-rail .ms-nav-sub2 { display: none; }
  body.ms-rail .ms-sidebar-head { justify-content: center; flex-direction: column; height: auto; padding: 14px 0 10px; gap: 10px; }
  body.ms-rail .ms-brand { gap: 0; }
  body.ms-rail .ms-brand-mark { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; transition: transform .25s var(--ms-ease), box-shadow .25s; }
  body.ms-rail .ms-brand-mark img { border-radius: 13px; }
  body.ms-rail .ms-brand:hover .ms-brand-mark { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 26px -8px rgba(34,211,238,.8); }
  body.ms-rail .ms-sidebar-nav { padding: 8px 14px 14px; }
  body.ms-rail .ms-nav-link, body.ms-rail .ms-nav-group { justify-content: center; padding: 0; width: 48px; height: 44px; margin: 4px auto; border-radius: 12px; }
  body.ms-rail .ms-nav-link > .ms-ni, body.ms-rail .ms-nav-group > .ms-ni, body.ms-rail .ms-nav-sub .ms-nav-link > .ms-ni { width: 34px; height: 34px; flex: 0 0 34px; font-size: 1.05rem; border-radius: 10px; }
  body.ms-rail .ms-nav-link:hover > .ms-ni, body.ms-rail .ms-nav-group:hover > .ms-ni { transform: scale(1.1); }
  body.ms-rail .ms-nav-link.active::before, body.ms-rail .ms-nav-sub .ms-nav-link.active::before { display: none; }
  body.ms-rail .ms-nav-link.active { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
  body.ms-rail .ms-nav-link.active > .ms-ni { box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 10px 22px -8px var(--c); }
  body.ms-rail .ms-nav-group.has-active { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(34,211,238,.35); }
  body.ms-rail .ms-nav-section { display: block; height: 1px; padding: 0; margin: 8px 6px; background: rgba(255,255,255,.08); font-size: 0; color: transparent; overflow: hidden; }
  body.ms-rail .ms-sidebar-foot { padding: 10px 14px 14px; }
  body.ms-rail .ms-sidebar-foot .ms-nav-link { width: 48px; height: 40px; }
  body.ms-rail .ms-nav-sub { margin-left: 0; padding-left: 0; }
  body.ms-rail .ms-nav-sub::before { display: none; }
  body.ms-rail .ms-nav-sub .ms-nav-link.active::before { left: -10px; }
  body.ms-rail .ms-side-user { justify-content: center; padding: 6px; background: none; border: 0; }
  body.ms-rail .ms-side-user[aria-expanded="true"] { background: rgba(255,255,255,.1); }
  body.ms-rail .ms-nav-link[data-tip]:hover::after, body.ms-rail .ms-nav-group[data-tip]:hover::after {
    content: attr(data-tip); position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%);
    background: #0b1a33; color: #fff; font-size: .78rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; white-space: nowrap; z-index: 2000;
    box-shadow: var(--ms-shadow-md); animation: ms-fade .15s both;
  }
  body.ms-rail .ms-nav-group { position: relative; }
}

.ms-main { flex: 1 1 auto; margin-left: var(--ms-sidebar-w); min-width: 0; display: flex; flex-direction: column; transition: margin-left .25s var(--ms-ease); }
.ms-topbar {
  height: var(--ms-topbar-h);
  background: rgba(255,255,255,.85); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--ms-border);
  padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: sticky; top: 0; z-index: 1020;
}
.ms-topbar h1 { font-size: 1.15rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-topbar h1 .ms-title-ic {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 1.05rem;
  background: linear-gradient(135deg, #e0ecff, #cffafe); color: var(--ms-blue); flex: 0 0 36px;
}
.ms-topbar .ms-subtitle { color: var(--ms-muted); font-size: .78rem; margin: 1px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-topbar h1 .ms-title-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-topbar > .ms-tb-left { flex: 1 1 auto; min-width: 0; }
.ms-topbar > .ms-tb-left > .min-w-0 { flex: 1 1 auto; min-width: 0; }
.ms-topbar > .ms-tb-right { flex: 0 0 auto; }
.ms-search { position: relative; width: 320px; max-width: 30vw; }
.ms-icon-btn.ms-search-btn { display: none; }
@media (max-width: 1399.98px) { .ms-search { width: 240px; } }
@media (max-width: 1499.98px) { .ms-status-pill { display: none !important; } }
.ms-search::before { content: ""; position: absolute; inset: -2px; border-radius: 999px; background: linear-gradient(120deg, #2563eb, #22d3ee, #7c3aed, #2563eb); background-size: 300% 300%; opacity: 0; transition: opacity .25s; z-index: 0; }
.ms-search:focus-within::before { opacity: 1; animation: ms-search-glow 4s linear infinite; }
@keyframes ms-search-glow { to { background-position: 300% 0; } }
.ms-search input {
  position: relative; z-index: 1; width: 100%; height: 42px; border-radius: 999px; border: 1px solid var(--ms-border); background: #f4f7fb; padding: 0 92px 0 48px; font-size: .86rem; font-weight: 500; color: var(--ms-ink);
  transition: box-shadow .2s, border-color .2s, background .2s;
}
.ms-search input::placeholder { color: #8a9bb5; transition: color .2s; }
.ms-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ms-search:hover input { background: #fff; border-color: #c7d5ea; box-shadow: 0 6px 18px -10px rgba(11,26,51,.35); }
.ms-search input:focus { outline: 0; border-color: transparent; background: #fff; box-shadow: 0 10px 28px -12px rgba(37,99,235,.45); }
.ms-search input:focus::placeholder { color: #b6c2d6; }
.ms-search-ic { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .82rem;
  background: linear-gradient(135deg, var(--ms-blue), var(--ms-cyan)); box-shadow: 0 6px 14px -6px rgba(37,99,235,.8); transition: transform .3s var(--ms-ease); }
.ms-search:focus-within .ms-search-ic { transform: translateY(-50%) rotate(-12deg) scale(1.08); }
.ms-search-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; gap: 4px; pointer-events: none; transition: opacity .2s; }
.ms-search:focus-within .ms-search-kbd { opacity: 0; }
.ms-search-kbd kbd, .ms-search-hd kbd { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .64rem; font-weight: 700; color: #475569; background: linear-gradient(180deg, #fff, #eef2f7); border: 1px solid #d5deea; border-bottom-width: 2px; border-radius: 6px; padding: 2px 6px; line-height: 1.2; }
.ms-search-menu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 460px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--ms-border); border-radius: 18px;
  box-shadow: 0 30px 60px -24px rgba(11,26,51,.45), 0 0 0 1px rgba(37,99,235,.06); padding: 8px; max-height: 400px; overflow: auto; display: none; z-index: 1050; animation: ms-pop .18s var(--ms-ease) both;
}
.ms-search-menu.show { display: block; }
.ms-search-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8a9bb5; }
.ms-search-hd span { display: flex; gap: 4px; align-items: center; font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .7rem; }
.ms-search-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: #1f2937; font-size: .86rem; font-weight: 600; transition: background .15s, transform .15s; }
.ms-search-menu a .lbl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-search-menu a:hover, .ms-search-menu a.sel { background: linear-gradient(90deg, #eff6ff, #f5f3ff); color: var(--ms-blue); transform: translateX(2px); }
.ms-search-menu a:hover .ms-ni, .ms-search-menu a.sel .ms-ni { transform: scale(1.08); }
.ms-search-menu a small { color: #94a3b8; font-weight: 500; white-space: nowrap; }
.ms-search-menu a .go { color: #c3cedf; font-size: .8rem; opacity: 0; transition: opacity .15s; }
.ms-search-menu a:hover .go, .ms-search-menu a.sel .go { opacity: 1; color: var(--ms-blue); }
.ms-search-menu .empty { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 14px; color: var(--ms-muted); font-size: .85rem; }

.ms-icon-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--ms-border); background: #fff; color: #374151; display: grid; place-items: center;
  position: relative; font-size: 1.05rem; transition: background .15s, transform .15s, box-shadow .15s;
}
.ms-icon-btn:hover { background: #f8fafc; transform: translateY(-1px); box-shadow: var(--ms-shadow-sm); }
.ms-icon-btn .badge { position: absolute; top: -5px; right: -5px; font-size: .6rem; box-shadow: 0 0 0 2px #fff; animation: ms-pulse 2.4s infinite; }
.ms-status-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid #bbf7d0; background: #f0fdf4;
  color: #166534; font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.ms-scope-pill { border-color: #fcd34d; background: #fffbeb; color: #92400e; text-decoration: none; }
.ms-scope-pill:hover { background: #fef3c7; color: #78350f; }
.ms-status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: ms-ping 1.8s infinite; }
@keyframes ms-ping { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55);} 70% { box-shadow: 0 0 0 7px rgba(34,197,94,0);} 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0);} }
@keyframes ms-pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.12);} }
.ms-user-btn {
  height: 40px; background: #fff; color: #1f2937; border-radius: 12px; padding: 0 12px 0 4px; border: 1px solid var(--ms-border);
  display: inline-flex; align-items: center; gap: 10px; font-weight: 600; transition: background .15s, box-shadow .15s, transform .15s;
}
.ms-user-btn:hover { background: #f8fafc; transform: translateY(-1px); box-shadow: var(--ms-shadow-sm); }
.ms-user-btn .ms-user-meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; white-space: nowrap; }
.ms-user-btn .ms-user-meta small { color: var(--ms-muted); font-weight: 500; font-size: .7rem; }
.ms-user-btn .ms-avatar { width: 32px; height: 32px; background: linear-gradient(135deg, var(--ms-blue), var(--ms-cyan)); color: #fff; font-size: .8rem; }
.ms-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ms-blue); color: #fff; display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; flex: 0 0 auto; }
.ms-bell { color: #374151; font-size: 1.2rem; position: relative; background: none; border: 0; }
.ms-bell .badge { position: absolute; top: -2px; right: -4px; font-size: .6rem; }
.dropdown-menu { border: 1px solid var(--ms-border); border-radius: 14px; box-shadow: var(--ms-shadow-lg); padding: 6px; animation: ms-pop .18s var(--ms-ease) both; }
.dropdown-item { border-radius: 9px; padding: 8px 12px; font-size: .88rem; }
.dropdown-item:hover { background: #f1f5f9; }
.ms-notif-menu { width: min(360px, calc(100vw - 24px)); }
@media (max-width: 575.98px) {
  .ms-notif-menu { position: fixed !important; inset: var(--ms-topbar-h) 12px auto 12px !important; width: auto !important; transform: none !important; }
}
.ms-notif { display: flex; gap: 10px; align-items: flex-start; white-space: normal; }
.ms-notif .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 32px; font-size: .95rem; }
.ms-notif .t { font-weight: 600; font-size: .84rem; line-height: 1.25; }
.ms-notif .s { color: var(--ms-muted); font-size: .74rem; margin-top: 2px; }

.ms-content { padding: 28px 32px 72px; animation: ms-fade .45s var(--ms-ease) backwards; position: relative; }
.ms-content .row.g-3 { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
.ms-content .mb-3 { margin-bottom: 1.25rem !important; }
@media (max-width: 767.98px) { .ms-content { padding: 18px 16px 90px; } }

/* ---------- Ambient wow layer ---------- */
.ms-aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.ms-aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .32; mix-blend-mode: multiply; animation: ms-aurora 26s ease-in-out infinite alternate; }
.ms-aurora i:nth-child(1) { width: 720px; height: 720px; left: 22%; top: -320px; background: radial-gradient(circle, #93c5fd, transparent 65%); }
.ms-aurora i:nth-child(2) { width: 640px; height: 640px; right: -220px; top: 30%; background: radial-gradient(circle, #c4b5fd, transparent 65%); animation-delay: -9s; animation-duration: 32s; }
.ms-aurora i:nth-child(3) { width: 560px; height: 560px; left: 30%; bottom: -300px; background: radial-gradient(circle, #a7f3d0, transparent 65%); animation-delay: -18s; animation-duration: 38s; }
@keyframes ms-aurora { from { transform: translate(0, 0) scale(1); } to { transform: translate(-90px, 70px) scale(1.18); } }
.ms-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .9; }

/* glass cards + gradient edge on hover */
.ms-content .card { position: relative; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ms-content .card:not(.ms-stat)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s var(--ms-ease);
  background: linear-gradient(135deg, rgba(37,99,235,.55), rgba(34,211,238,.45) 50%, rgba(34,197,94,.45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ms-content .card:not(.ms-stat):hover::after { opacity: 1; }
.ms-content .card.ms-stat:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 22px 40px -18px rgba(37,99,235,.35); }

/* billboard light sweep + float */
.ms-billboard .bb-shine { position: absolute; top: -50%; bottom: -50%; width: 120px; left: -200px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent); transform: skewX(-18deg); animation: ms-sweep 7s var(--ms-ease) infinite; pointer-events: none; }
@keyframes ms-sweep { 0%, 55% { left: -200px; } 85%, 100% { left: 120%; } }
.ms-billboard .bb-mark { animation: ms-float 6s ease-in-out infinite; }
@keyframes ms-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
.ms-billboard .bb-kpi { backdrop-filter: blur(8px); transition: transform .25s var(--ms-ease), background .25s; }
.ms-billboard .bb-kpi:hover { transform: translateY(-4px); background: rgba(255,255,255,.14); }

/* topbar AI pill */
.ms-ai-pill { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px; border: 0; color: #fff; font-size: .78rem; font-weight: 700; white-space: nowrap;
  background: linear-gradient(135deg, #7c3aed, #2563eb 60%, #22d3ee); background-size: 200% 100%; box-shadow: 0 10px 22px -10px rgba(124,58,237,.7); transition: background-position .5s, transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.ms-ai-pill::after { content: ""; position: absolute; top: -60%; bottom: -60%; width: 40px; left: -60px; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: ms-sweep 4s var(--ms-ease) infinite; }
.ms-ai-pill:hover { background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(124,58,237,.8); }
.ms-ai-pill i { font-size: .95rem; animation: ms-twinkle 2.2s ease-in-out infinite; }
@keyframes ms-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.25) rotate(15deg); opacity: .8; } }
@media (max-width: 575.98px) { .ms-ai-pill span { display: none; } .ms-ai-pill { padding: 0 11px; } }

/* table row + badge life */
.ms-content .table tbody tr { transition: background .15s, transform .15s; }
.ms-content .table-hover tbody tr:hover { background: #f4f7ff; }
.ms-content .badge, .ms-content .badge-soft { transition: transform .15s; }
.ms-content .badge:hover, .ms-content .badge-soft:hover { transform: scale(1.06); }
.ms-content .ms-stat-icon { position: relative; }
.ms-content .ms-stat:hover .ms-stat-icon::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid currentColor; opacity: .35; animation: ms-ring 1s ease-out; }
.ms-role-bar { text-align: right; color: var(--ms-muted); font-size: .85rem; margin-bottom: 14px; }
.ms-role-bar a { margin-left: 10px; }

/* page-load progress line */
.ms-loadbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; background: linear-gradient(90deg, var(--ms-blue), var(--ms-cyan), var(--ms-green)); animation: ms-loadbar 1s var(--ms-ease) forwards; pointer-events: none; }
@keyframes ms-loadbar { 0% { width: 0; opacity: 1;} 70% { width: 100%; opacity: 1;} 100% { width: 100%; opacity: 0;} }

/* ---------- Motion primitives ---------- */
@keyframes ms-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ms-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ms-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ms-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.ms-content > :not(.modal):not(.toast-container):not(.offcanvas) { animation: ms-rise .5s var(--ms-ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
.ms-content .row > [class*="col"] > .card, .ms-content .row > [class*="col"] > .ms-int-card { animation: ms-rise .55s var(--ms-ease) backwards; animation-delay: calc(var(--i, 0) * 55ms + 80ms); }
.card, .ms-int-card { transition: transform .22s var(--ms-ease), box-shadow .22s var(--ms-ease), border-color .2s; }
.ms-content .card:hover, .ms-content .ms-int-card:hover { transform: translateY(-3px); box-shadow: var(--ms-shadow-md); }
.ms-content .card.no-lift:hover { transform: none; box-shadow: var(--ms-shadow-sm); }
.btn { transition: transform .15s, box-shadow .15s, background-color .15s, border-color .15s, color .15s; border-radius: 10px; font-weight: 600; }
.btn:not(.btn-link):hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(16,24,40,.35); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-primary { background: linear-gradient(135deg, #2563eb, #1d4ed8); border-color: #1d4ed8; }
.btn-primary:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); border-color: #1e40af; }
.form-control, .form-select { border-radius: 10px; border-color: var(--ms-border); transition: border-color .15s, box-shadow .15s; }
.form-control:focus, .form-select:focus { border-color: #93c5fd; box-shadow: 0 0 0 4px rgba(37,99,235,.10); }
.form-check-input:checked { background-color: var(--ms-blue); border-color: var(--ms-blue); }
.progress { background: #eef2f7; border-radius: 999px; overflow: hidden; }
.progress-bar { transition: width 1.1s var(--ms-ease); border-radius: 999px; }
.progress-bar.ms-glow { background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%); background-size: 200% 100%; animation: ms-shimmer 2.2s linear infinite; }
.ms-skeleton { background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 50%, #eef2f7 75%); background-size: 200% 100%; animation: ms-shimmer 1.4s linear infinite; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Cards / widgets ---------- */
.card { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); box-shadow: var(--ms-shadow-sm); background: #fff; }
.card-title { font-weight: 700; font-size: 1rem; letter-spacing: -.1px; }
.card-header { background: transparent; border-bottom: 1px solid var(--ms-border); font-weight: 700; padding: 14px 20px; border-radius: var(--ms-radius) var(--ms-radius) 0 0 !important; }
.ms-stat { position: relative; overflow: hidden; height: 100%; }
.ms-stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--stat-color, var(--ms-blue)); }
.ms-stat::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%;
  background: color-mix(in srgb, var(--stat-color, var(--ms-blue)) 8%, transparent); transition: transform .35s var(--ms-ease);
}
.ms-stat:hover::after { transform: scale(1.5); }
.ms-stat .card-body { position: relative; z-index: 1; }
.ms-stat-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem;
  background: color-mix(in srgb, var(--stat-color, var(--ms-blue)) 14%, #fff); color: var(--stat-color, var(--ms-blue));
  transition: transform .25s var(--ms-ease);
}
.ms-stat:hover .ms-stat-icon { transform: scale(1.08) rotate(-4deg); }
.ms-stat .ms-stat-value { font-size: 1.75rem; font-weight: 800; margin-top: 14px; line-height: 1.1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.ms-stat .ms-stat-label { font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ms-muted); margin-top: 5px; font-weight: 600; }
.ms-stat .ms-stat-trend { font-size: .74rem; font-weight: 600; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; }
.ms-stat-plain::before { display: none; }

.ms-hero-dark {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0b1b33 0%, #14305a 60%, #0f3d4a 100%); color: #e5e7eb; border-radius: 20px; padding: 32px 36px;
}
.ms-hero-dark::before { content: ""; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(34,211,238,.28), transparent 65%); }
.ms-hero-dark::after { content: ""; position: absolute; left: 30%; bottom: -160px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(34,197,94,.22), transparent 65%); }
.ms-hero-dark > * { position: relative; z-index: 1; }
.ms-hero-dark .form-control { background: #16223a; border-color: rgba(255,255,255,.12); color: #fff; }
.ms-hero-dark .form-control::placeholder { color: #8b96ad; }

/* ---------- Page billboard ---------- */
.ms-billboard {
  position: relative; overflow: hidden; color: #fff; border-radius: 22px; margin-bottom: 22px;
  background: linear-gradient(120deg, #0b1b33 0%, #12315e 55%, color-mix(in srgb, var(--bb-color, #0e7490) 55%, #0b1b33) 100%);
  box-shadow: 0 24px 50px -24px rgba(11,27,51,.6);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; padding: 28px 32px; align-items: center;
}
.ms-billboard::before { content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bb-color, #22d3ee) 45%, transparent), transparent 66%); }
.ms-billboard::after { content: ""; position: absolute; left: 38%; bottom: -220px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(34,197,94,.18), transparent 66%); }
.ms-billboard > * { position: relative; z-index: 1; }
.ms-billboard .bb-mark {
  position: absolute; right: 26px; bottom: -28px; font-size: 11rem; line-height: 1; color: #fff; opacity: .05; z-index: 0; pointer-events: none;
  transform: rotate(-8deg);
}
.ms-billboard .bb-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a5f3fc; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 5px 12px; }
.ms-billboard .bb-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ms-green); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: ms-ping 1.8s infinite; }
.ms-billboard h2 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.4px; margin: 12px 0 8px; line-height: 1.2; }
.ms-billboard p { color: #d3dcea; margin: 0 0 18px; max-width: 58ch; font-size: .92rem; line-height: 1.6; }
.ms-billboard .bb-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ms-billboard .btn-bb { background: #fff; color: #0b1b33; border: 0; font-weight: 700; padding: .6rem 1.1rem; }
.ms-billboard .btn-bb:hover { background: #e0f2fe; }
.ms-billboard .btn-bb-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); font-weight: 600; padding: .6rem 1.1rem; }
.ms-billboard .btn-bb-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.ms-billboard .bb-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ms-billboard .bb-kpi {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 16px 16px 14px; backdrop-filter: blur(8px);
  transition: transform .25s var(--ms-ease), background .2s, border-color .2s; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between;
}
.ms-billboard .bb-kpi:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.ms-billboard .bb-kpi i { font-size: 1.1rem; color: #7dd3fc; }
.ms-billboard .bb-kpi .v { font-size: 1.55rem; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 8px; }
.ms-billboard .bb-kpi { min-width: 0; }
.ms-billboard .bb-kpi .l { font-size: .68rem; overflow-wrap: normal; word-break: keep-all; hyphens: manual; text-transform: uppercase; letter-spacing: .07em; color: #94a3b8; margin-top: 4px; font-weight: 600; }
.ms-billboard .bb-kpi .t { font-size: .72rem; font-weight: 600; margin-top: 6px; }
.ms-billboard .bb-kpi .t.up { color: #86efac; } .ms-billboard .bb-kpi .t.down { color: #fca5a5; } .ms-billboard .bb-kpi .t.flat { color: #cbd5e1; }
@media (max-width: 1199.98px) { .ms-billboard { grid-template-columns: 1fr; padding: 24px; } .ms-billboard .bb-mark { display: none; } }
@media (max-width: 1399.98px) { .ms-billboard { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .ms-billboard .bb-kpis { grid-template-columns: 1fr 1fr; } .ms-billboard h2 { font-size: 1.3rem; } }
@media (max-width: 575.98px) {
  .ms-content .ms-filters > .form-control, .ms-content .ms-filters > .form-select { width: 100% !important; max-width: 100% !important; }
}

.ms-tabs .nav-link { color: #4b5563; font-weight: 500; border-radius: 10px; padding: .6rem 1rem; transition: background .15s, color .15s; }
.ms-tabs .nav-link:hover { color: var(--ms-blue); }
.ms-tabs .nav-link.active { background: #fff; color: var(--ms-blue); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-weight: 600; }
.ms-tabs { background: #eef2f7; border: 1px solid var(--ms-border); border-radius: 12px; padding: 5px; display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ms-tabs-underline .nav-link { color: #4b5563; border-bottom: 2px solid transparent; border-radius: 0; padding: .7rem 1.1rem; transition: color .15s, border-color .15s; }
.ms-tabs-underline .nav-link:hover { color: var(--ms-blue); }
.ms-tabs-underline .nav-link.active { color: var(--ms-blue); border-bottom-color: var(--ms-blue); background: none; font-weight: 600; }
.tab-pane.active { animation: ms-fade .3s backwards; }

.table { --bs-table-hover-bg: #f8fafc; }
.table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ms-muted); font-weight: 700; background: #f8fafc; border-bottom: 1px solid var(--ms-border); padding-top: 12px; padding-bottom: 12px; }
.table td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }
.table > :not(caption) > * > * { border-bottom-color: #f0f2f6; }
.table tbody tr { transition: background .12s; }
.badge-soft { display: inline-block; font-weight: 600; font-size: .7rem; letter-spacing: .03em; padding: .38em .7em; border-radius: 999px; line-height: 1.2; white-space: nowrap; }
.badge-soft.blue { background: #e0ecff; color: #1d4ed8; }
.badge-soft.green { background: #dcfce7; color: #15803d; }
.badge-soft.red { background: #fee2e2; color: #b91c1c; }
.badge-soft.orange { background: #ffedd5; color: #c2410c; }
.badge-soft.yellow { background: #fef3c7; color: #b45309; }
.badge-soft.purple { background: #ede9fe; color: #6d28d9; }
.badge-soft.gray { background: #f1f5f9; color: #475569; }
.badge-soft.cyan { background: #cffafe; color: #0e7490; }

.ms-risk-circle { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); }
.ms-mini-bar { height: 6px; border-radius: 3px; background: #e5e7eb; width: 110px; display: inline-block; overflow: hidden; vertical-align: middle; }
.ms-mini-bar > span { display: block; height: 100%; border-radius: 3px; transition: width 1s var(--ms-ease); }
.ms-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

.ms-section-title { font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 8px; margin: 26px 0 12px; letter-spacing: -.1px; }
.ms-section-title i { color: var(--ms-blue); }

.ms-notice { border-left: 4px solid; border-radius: 14px; padding: 16px 20px; }
.ms-notice.info { background: #e0f2fe; border-color: #0ea5e9; }
.ms-notice.warn { background: #fff4e5; border-color: #f59e0b; }
.ms-notice.purple { background: #f3f0ff; border-color: #7c3aed; }
.ms-notice.success { background: #ecfdf5; border-color: #10b981; }

.ms-int-card { border: 2px solid var(--ms-border); border-radius: var(--ms-radius); padding: 22px; background: #fff; height: 100%; }
.ms-int-card.connected { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, #fff); }
.ms-int-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.4rem; box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); }

.ms-service-card { border-top: 4px solid var(--stat-color, var(--ms-blue)); }
.ms-service-icon { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; font-size: 1.7rem; background: color-mix(in srgb, var(--stat-color, var(--ms-blue)) 14%, #fff); color: var(--stat-color, var(--ms-blue)); }

.ms-dark-panel { position: relative; overflow: hidden; background: linear-gradient(135deg, #0f172a, #1e293b); border-radius: 20px; padding: 22px; color: #fff; }
.ms-dark-panel::before { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(37,99,235,.35), transparent 65%); }
.ms-dark-panel > * { position: relative; z-index: 1; }
.ms-dark-panel .ms-kpi { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 16px; text-align: center; transition: background .2s; }
.ms-dark-panel .ms-kpi:hover { background: rgba(255,255,255,.1); }
.ms-dark-panel .ms-kpi .v { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ms-dark-panel .ms-kpi .l { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-top: 4px; }

.ms-step { display: flex; gap: 14px; align-items: flex-start; }
.ms-step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; flex: 0 0 34px; }
.ms-step-num.done { background: #dcfce7; color: #15803d; }
.ms-step-num.current { background: var(--ms-blue); color: #fff; box-shadow: 0 0 0 5px rgba(37,99,235,.15); }
.ms-step-num.todo { background: #f1f5f9; color: #64748b; }

.ms-footer-tag { text-align: center; font-weight: 800; font-size: 1.5rem; margin: 40px 0 0; background: linear-gradient(90deg, var(--ms-navy-2), var(--ms-blue), #0e7490); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -.3px; }
/* ---------- AI insight strip (per module) ---------- */
.ms-ai-strip {
  position: relative; overflow: hidden; border-radius: var(--ms-radius); margin-bottom: 20px;
  background: linear-gradient(135deg, #f5f3ff 0%, #eef2ff 45%, #ecfeff 100%);
  border: 1px solid #ddd6fe; box-shadow: var(--ms-shadow-sm);
}
.ms-ai-strip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #7c3aed, #2563eb, #22d3ee); }
.ms-ai-strip .ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 10px 22px; flex-wrap: wrap; }
.ms-ai-strip .ai-title { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #3b2fa3; font-size: .95rem; }
.ms-ai-strip .ai-title .ai-logo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 8px 18px -8px rgba(124,58,237,.7); font-size: 1rem; }
.ms-ai-strip .ai-title .ai-live { font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #059669; background: #d1fae5; border-radius: 999px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 5px; }
.ms-ai-strip .ai-live .dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; animation: ms-pulse 1.6s infinite; }
.ms-ai-strip .ai-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0 20px 18px 22px; }
.ms-ai-item { background: rgba(255,255,255,.85); border: 1px solid rgba(124,58,237,.12); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; transition: transform .2s var(--ms-ease), box-shadow .2s; }
.ms-ai-item:hover { transform: translateY(-2px); box-shadow: var(--ms-shadow-md); }
.ms-ai-item .t { display: flex; align-items: flex-start; gap: 8px; font-weight: 700; font-size: .84rem; color: #1e1b4b; line-height: 1.3; }
.ms-ai-item .t i { flex: 0 0 auto; margin-top: 1px; }
.ms-ai-item .d { font-size: .78rem; color: #4b5563; line-height: 1.45; flex: 1; }
.ms-ai-item .a { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ms-ai-item .conf { font-size: .68rem; font-weight: 700; color: #6d28d9; }
.btn-ai { --bs-btn-color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); border: 0; color: #fff; font-weight: 600; font-size: .76rem; padding: 5px 11px; border-radius: 8px; box-shadow: 0 6px 14px -6px rgba(124,58,237,.7); }
.btn-ai:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.ms-ai-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.ms-ai-switch .form-check-input:checked { background-color: #7c3aed; border-color: #7c3aed; }
.ms-ai-switch label { font-size: .78rem; font-weight: 600; color: #3b2fa3; }
@media (max-width: 991.98px) { .ms-ai-strip .ai-items { grid-template-columns: 1fr; } }

/* ---------- AI Copilot drawer ---------- */
.ms-copilot {
  position: fixed; right: 28px; bottom: 98px; width: 400px; max-width: calc(100vw - 24px); height: 600px; max-height: calc(100vh - 130px);
  background: #fff; border-radius: 20px; box-shadow: 0 30px 70px -20px rgba(16,24,40,.45), 0 0 0 1px rgba(16,24,40,.06); z-index: 1045;
  display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right;
  opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none; transition: opacity .25s var(--ms-ease), transform .25s var(--ms-ease);
}
body.ms-copilot-open .ms-copilot { opacity: 1; transform: none; pointer-events: auto; }
.ms-copilot-head { padding: 14px 16px; background: linear-gradient(135deg, #1e1b4b, #312e81 55%, #1e3a8a); color: #fff; display: flex; align-items: center; gap: 12px; }
.ms-copilot-head .ai-logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #7c3aed, #22d3ee); font-size: 1.25rem; box-shadow: 0 10px 20px -8px rgba(34,211,238,.7); }
.ms-copilot-head .n { font-weight: 800; font-size: .98rem; line-height: 1.2; }
.ms-copilot-head .s { font-size: .72rem; color: #c7d2fe; display: flex; align-items: center; gap: 6px; }
.ms-copilot-head .s .dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.3); animation: ms-pulse 1.6s infinite; }
.ms-copilot-head .btn { color: #fff; opacity: .8; } .ms-copilot-head .btn:hover { opacity: 1; }
.ms-copilot-body { flex: 1; overflow-y: auto; padding: 16px; background: #f6f7fb; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }
.ms-msg { display: flex; gap: 10px; max-width: 92%; animation: ms-rise .35s var(--ms-ease) backwards; }
.ms-msg .av { width: 30px; height: 30px; border-radius: 10px; flex: 0 0 30px; display: grid; place-items: center; font-size: .9rem; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); }
.ms-msg .bub { background: #fff; border: 1px solid var(--ms-border); border-radius: 4px 14px 14px 14px; padding: 10px 13px; font-size: .84rem; line-height: 1.5; color: #1f2937; box-shadow: var(--ms-shadow-sm); }
.ms-msg .bub ul { margin: 6px 0 0; padding-left: 18px; } .ms-msg .bub li { margin-bottom: 3px; }
.ms-msg .bub b { color: #3b2fa3; }
.ms-msg .bub .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ms-msg .bub .acts .btn { font-size: .72rem; padding: 4px 10px; border-radius: 8px; }
.ms-msg.me { align-self: flex-end; flex-direction: row-reverse; }
.ms-msg.me .av { background: linear-gradient(135deg, var(--ms-navy), var(--ms-navy-2)); font-size: .7rem; font-weight: 700; }
.ms-msg.me .bub { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border: 0; border-radius: 14px 4px 14px 14px; }
.ms-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.ms-typing span { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; animation: ms-tp 1.1s infinite; }
.ms-typing span:nth-child(2) { animation-delay: .18s; } .ms-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes ms-tp { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
.ms-copilot-sugg { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 10px 14px 0; }
.ms-copilot-sugg button { flex: 0 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; font-weight: 600; color: #4c1d95; background: #f3efff; border: 1px solid #e0d7fb; border-radius: 999px; padding: 6px 12px; white-space: nowrap; transition: all .15s; }
.ms-copilot-sugg button:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }
.ms-copilot-foot { padding: 10px 14px 14px; background: #fff; border-top: 1px solid var(--ms-border); }
.ms-copilot-foot form { display: flex; gap: 8px; align-items: center; background: #f4f6fa; border: 1px solid var(--ms-border); border-radius: 14px; padding: 6px 6px 6px 14px; }
.ms-copilot-foot form:focus-within { border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }
.ms-copilot-foot input { flex: 1; border: 0; background: transparent; font-size: .86rem; outline: none; min-width: 0; }
.ms-copilot-foot .send { width: 38px; height: 38px; border-radius: 11px; border: 0; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); display: grid; place-items: center; }
.ms-copilot-foot .hint { font-size: .66rem; color: var(--ms-muted); text-align: center; margin-top: 8px; }
@media (max-width: 575.98px) { .ms-copilot { right: 12px; left: 12px; width: auto; bottom: 88px; height: calc(100vh - 110px); } }

/* ---------- AI SOC page ---------- */
.ms-soc-feed { max-height: 520px; overflow-y: auto; }
.ms-soc-alert { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-bottom: 1px solid var(--ms-border); animation: ms-rise .4s var(--ms-ease) backwards; }
.ms-soc-alert:last-child { border-bottom: 0; }
.ms-soc-alert .sev { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; color: #fff; }
.ms-soc-alert .sev.crit { background: linear-gradient(135deg, #ef4444, #b91c1c); } .ms-soc-alert .sev.high { background: linear-gradient(135deg, #f97316, #c2410c); }
.ms-soc-alert .sev.med { background: linear-gradient(135deg, #f59e0b, #b45309); } .ms-soc-alert .sev.low { background: linear-gradient(135deg, #0ea5e9, #0369a1); }
.ms-soc-alert .ti { font-weight: 700; font-size: .86rem; color: #111827; }
.ms-soc-alert .me { font-size: .76rem; color: var(--ms-muted); }
.ms-soc-alert .verdict { font-size: .74rem; margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: #f5f3ff; color: #4c1d95; border-left: 3px solid #7c3aed; display: inline-block; }
.ms-soc-alert .verdict b { color: #3b2fa3; }
.ms-soc-alert .st { font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.ms-soc-alert .st.auto { background: #d1fae5; color: #047857; } .ms-soc-alert .st.review { background: #fef3c7; color: #b45309; } .ms-soc-alert .st.run { background: #dbeafe; color: #1d4ed8; }
.ms-model-bar { height: 8px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.ms-model-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #22d3ee); }
.ms-playbook-row td { vertical-align: middle; }

.ms-chat-fab {
  position: fixed; right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 50%; z-index: 1046;
  background: linear-gradient(135deg, #7c6cf0, #5b6cf5); color: #fff; display: grid; place-items: center; font-size: 1.3rem;
  box-shadow: 0 14px 30px rgba(124,108,240,.45); border: 0; transition: transform .2s var(--ms-ease), box-shadow .2s;
}
.ms-chat-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 36px rgba(124,108,240,.55); }
.ms-chat-fab i { transition: transform .3s var(--ms-ease); }
.ms-chat-fab.is-open i { transform: rotate(90deg) scale(.9); }
.ms-chat-fab.is-open::after { display: none; }
.ms-chat-fab::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(124,108,240,.5); animation: ms-ring 2.4s ease-out infinite; }
.ms-wa-fab { position: fixed; right: 24px; bottom: 84px; width: 48px; height: 48px; border-radius: 50%; z-index: 1046; display: grid; place-items: center; font-size: 1.3rem; color: #fff; background: radial-gradient(circle at 30% 30%, #5cf08f, #25d366 45%, #128c7e); box-shadow: 0 14px 30px rgba(37,211,102,.4); text-decoration: none; touch-action: none; transition: transform .2s var(--ms-ease), box-shadow .2s; }
.ms-wa-fab:hover { color: #fff; transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 36px rgba(37,211,102,.55); }
.ms-wa-fab::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37,211,102,.5); animation: ms-ring 2.4s ease-out infinite; animation-delay: -1.2s; }
.ms-chat-fab, .ms-wa-fab { cursor: grab; }
.ms-chat-fab.dragging, .ms-wa-fab.dragging { cursor: grabbing; transform: scale(1.08); transition: none; }
.ms-chat-fab.dragging::after, .ms-wa-fab.dragging::after { display: none; }
.ms-chat-fab { touch-action: none; }
@media (max-width: 575.98px) { .ms-wa-fab { right: 14px; bottom: 76px; width: 44px; height: 44px; } .ms-chat-fab { right: 14px; bottom: 18px; width: 44px; height: 44px; } }
@keyframes ms-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

.ms-video-thumb { width: 84px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, #f97316, #dc2626); display: grid; place-items: center; color: #fff; font-size: 1.3rem; flex: 0 0 84px; }

.ms-progress-ring { --p: 60; --c: #2563eb; width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #e5e7eb 0); display: grid; place-items: center; transition: --p 1s; }
.ms-progress-ring > div { width: 88px; height: 88px; border-radius: 50%; background: #fff; display: grid; place-items: center; text-align: center; }
.ms-progress-ring b { font-size: 1.6rem; display: block; line-height: 1; }
.ms-progress-ring small { color: var(--ms-muted); }

.ms-org-banner {
  position: relative; overflow: hidden; border-radius: 20px; padding: 24px 28px; color: #fff;
  background: radial-gradient(900px 300px at 100% 0%, rgba(34,211,238,.28), transparent 60%), linear-gradient(120deg, #0b1b33, #14305a 55%, #0f2a4d);
}
.ms-org-banner .ms-org-logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; background: linear-gradient(135deg, var(--ms-blue), var(--ms-cyan)); box-shadow: 0 10px 24px -8px rgba(34,211,238,.6); }
.ms-org-banner .ms-plan { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 16px; text-align: center; min-width: 120px; }
.ms-org-banner .ms-plan .l { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; }
.ms-org-banner .ms-plan .v { font-weight: 700; font-size: .95rem; }

.toast { border-radius: 12px; box-shadow: var(--ms-shadow-lg); animation: ms-pop .2s var(--ms-ease) both; }
.modal-content { border-radius: 18px; border: 0; box-shadow: var(--ms-shadow-lg); }
.modal-header { border-bottom-color: var(--ms-border); }
.modal-footer { border-top-color: var(--ms-border); }
.accordion-item { border-color: var(--ms-border); }
.accordion-button { font-weight: 600; }
.accordion-button:not(.collapsed) { background: #eff6ff; color: var(--ms-blue); box-shadow: none; }
.list-group-item { border-color: #f0f2f6; }
hr { border-color: var(--ms-border); opacity: 1; }
.text-muted { color: var(--ms-muted) !important; }

/* ---------- Responsive ---------- */
.ms-sidebar-toggle { display: none; }
.ms-backdrop { position: fixed; inset: 0; background: rgba(2,6,23,.55); z-index: 1029; opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(2px); }
@media (max-width: 991.98px) {
  .ms-sidebar { transform: translateX(-100%); box-shadow: none; }
  body.ms-sidebar-open .ms-sidebar { transform: translateX(0); box-shadow: 24px 0 60px rgba(0,0,0,.45); }
  body.ms-sidebar-open .ms-backdrop { opacity: 1; pointer-events: auto; }
  .ms-main { margin-left: 0; overflow-x: hidden; }
  .ms-sidebar-toggle { display: grid; }
  .ms-sidebar-collapse { display: none; }
  .ms-content { padding: 18px 16px 48px; }
  .ms-topbar { padding: 0 14px; }
  .ms-topbar .ms-subtitle, .ms-search, .ms-status-pill, .ms-user-btn .ms-user-meta { display: none; }
  .ms-icon-btn.ms-search-btn { display: grid; }
  body.ms-search-open .ms-search { display: block; position: fixed; left: 10px; right: 10px; top: calc(var(--ms-topbar-h) + 8px); width: auto; max-width: none; z-index: 1030; }
  body.ms-search-open .ms-search-kbd { display: none; }
  body.ms-search-open .ms-search-menu { left: 0; right: 0; width: auto; }
  .ms-user-btn { padding: 0 4px; }
}
@media (max-width: 575.98px) {
  .ms-topbar { padding: 0 10px; }
  .ms-topbar h1 { font-size: 1rem; }
  .ms-topbar h1 .ms-title-ic { display: none; }
  .ms-topbar .ms-ai-pill { display: none; }
  .ms-topbar .ms-tb-left { gap: 8px !important; }
  .ms-topbar .ms-tb-right { gap: 4px !important; }
  .ms-topbar h1 { font-size: .92rem; }
  .ms-topbar .ms-icon-btn { width: 34px; height: 34px; }
}

/* Super Admin: attention queue + fleet health */
.ms-attn-list { display: flex; flex-direction: column; gap: 10px; }
.ms-attn { --c: #2563eb; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--ms-border); border-left: 4px solid var(--c); background: #fff; transition: transform .2s var(--ms-ease), box-shadow .2s; }
.ms-attn:hover { transform: translateX(3px); box-shadow: var(--ms-shadow-md); }
.ms-attn .ms-avatar { flex: 0 0 auto; }
.ms-attn .min-w-0 { flex: 1 1 auto; }
.ms-fleet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ms-fleet > div { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px; border-radius: 12px; background: #f8fafc; border: 1px solid var(--ms-border); transition: background .2s, transform .2s var(--ms-ease); }
.ms-fleet > div:hover { background: #fff; transform: translateY(-2px); box-shadow: var(--ms-shadow-md); }
.ms-fleet i { --c: #2563eb; grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 1.05rem; }
.ms-fleet b { font-size: 1.1rem; letter-spacing: -.3px; color: #0f172a; line-height: 1.1; }
.ms-fleet span { font-size: .74rem; color: var(--ms-muted); }
@media (max-width: 575.98px) { .ms-attn { flex-wrap: wrap; } .ms-fleet { grid-template-columns: 1fr; } }
.ms-login-feats > div:nth-child(2), .ms-login-stats > div:nth-child(2), .ms-reg-steps > div:nth-child(2) { --i: 1; }
.ms-login-feats > div:nth-child(3), .ms-login-stats > div:nth-child(3), .ms-reg-steps > div:nth-child(3) { --i: 2; }
.ms-login-stats > div:nth-child(4), .ms-reg-steps > div:nth-child(4) { --i: 3; }

.ms-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ---------- Charts: bounded size so wide monitors / TVs do not inflate them ---------- */
.ms-chart { position: relative; width: 100%; max-width: 680px; margin: 0 auto; }
.ms-chart-donut { max-width: 340px; }

/* ---------- Ultra-wide monitors and TVs: cap content width, scale type ---------- */
@media (min-width: 2200px) {
  .ms-content { width: 100%; max-width: 1900px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }
  .ms-topbar { padding-left: 40px; padding-right: 40px; }
}
@media (min-width: 3000px) {
  html { font-size: 18px; }
  body { font-size: 16px; }
  :root { --ms-sidebar-w: 320px; }
  .ms-content { max-width: 2400px; }
}