:root {
  --navy: #0a1930;
  --navy-2: #102442;
  --ink: #172033;
  --muted: #687386;
  --line: #e7ebf1;
  --bg: #f5f7fa;
  --cyan: #1dc9c5;
  --cyan-dark: #087d80;
  --purple: #8068d9;
  --coral: #ef7d68;
  --green: #35ae7b;
  --shadow: 0 12px 40px rgba(19, 36, 65, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: "DM Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.auth-pending .app-shell { display: none; }
.authenticated .login-screen { display: none; }
.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(420px, .95fr) 1.05fr;
  background: white;
}
.login-brand-panel {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 54px 62px 42px;
  color: white;
  background: radial-gradient(circle at 72% 32%, rgba(29,201,197,.18), transparent 28%), linear-gradient(145deg,#102f49,#07172b 70%);
}
.login-brand-panel::before, .login-brand-panel::after {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -220px;
  top: 10%;
  border: 1px solid rgba(29,201,197,.14);
  border-radius: 50%;
}
.login-brand-panel::after { width: 360px; height: 360px; right: -100px; top: 29%; }
.login-brand-panel img { position: relative; z-index: 1; width: 250px; height: 100px; object-fit: contain; object-position: left center; }
.login-brand-panel > div { position: relative; z-index: 1; max-width: 540px; }
.login-brand-panel > div > span { color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.login-brand-panel h1 { margin: 14px 0 18px; font: 800 48px/1.08 "Manrope"; letter-spacing: -.05em; }
.login-brand-panel p { max-width: 490px; margin: 0; color: #aebdce; font-size: 13px; line-height: 1.7; }
.login-brand-panel > small { position: relative; z-index: 1; color: #71839a; font-size: 9px; letter-spacing: .08em; }
.login-form-panel { display: grid; place-items: center; padding: 40px; background: #f7f9fb; }
.login-card { width: min(390px,100%); padding: 38px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 22px 70px rgba(16,39,70,.1); }
.login-kicker { color: #168884; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.login-card h2 { margin: 9px 0 7px; color: #15243a; font: 800 29px "Manrope"; letter-spacing: -.04em; }
.login-card > p { margin: 0 0 27px; color: #7d8898; font-size: 11px; line-height: 1.55; }
.login-card label { display: block; margin-top: 16px; }
.login-card label > span { display: block; margin-bottom: 7px; color: #485569; font-size: 10px; font-weight: 700; }
.login-card input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid #dce2e8; border-radius: 9px; outline: 0; color: #26354a; background: #fbfcfd; font-size: 11px; }
.login-card input:focus { border-color: #70cecb; box-shadow: 0 0 0 3px rgba(29,201,197,.1); }
.password-field { position: relative; }
.password-field input { padding-right: 68px; }
.password-field button { position: absolute; right: 10px; top: 50%; border: 0; color: #168884; background: transparent; transform: translateY(-50%); cursor: pointer; font-size: 9px; font-weight: 700; }
.login-error { min-height: 19px; padding-top: 7px; color: #c44d40; font-size: 9px; }
.login-submit { width: 100%; height: 45px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 9px; color: white; background: var(--navy); cursor: pointer; font-size: 11px; font-weight: 700; box-shadow: 0 8px 22px rgba(10,25,48,.18); }
.login-submit:hover { background: #123255; }
.login-submit svg { width: 15px; }
.login-note { display: block; margin-top: 17px; color: #9aa3af; font-size: 8px; text-align: center; }
.password-help { margin: 13px 0 0 !important; color: #748195 !important; font-size: 9px !important; text-align: center; }
.back-to-site { display: block; margin-top: 13px; color: #168884; font-size: 9px; font-weight: 700; text-align: center; text-decoration: none; }
.back-to-site:hover { text-decoration: underline; }

.app-shell { min-height: 100vh; display: flex; }
.mobile-app-nav { display: none; }
.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: 252px;
  padding: 28px 18px 20px;
  display: flex;
  flex-direction: column;
  color: #dce6f5;
  background: var(--navy);
}
.brand { display: flex; align-items: center; justify-content: center; padding: 0 2px 22px; }
.brand img { display: block; width: 100%; max-width: 220px; height: 82px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(29,201,197,.16)); }
.brand-mark { position: relative; width: 33px; height: 33px; border: 2px solid var(--cyan); border-radius: 50%; }
.brand-mark::before, .brand-mark::after, .brand-mark span { content: ""; position: absolute; border: 1.5px solid var(--cyan); border-radius: 50%; }
.brand-mark::before { inset: 5px -5px; transform: rotate(60deg); }
.brand-mark::after { inset: 5px -5px; transform: rotate(-60deg); }
.brand-mark span { inset: 8px; background: var(--cyan); border: 0; }
.workspace-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: rgba(255,255,255,.045);
}
.workspace-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--navy); background: var(--cyan); font-weight: 800; font-size: 12px; }
.workspace-picker div:nth-child(2) { min-width: 0; flex: 1; }
.workspace-picker small { display: block; color: #7e8da4; font-size: 9px; }
.workspace-picker strong { display: block; margin-top: 2px; color: white; font-size: 12px; }
.workspace-picker select { width: 100%; margin-top: 2px; border: 0; outline: 0; color: white; background: #172b47; cursor: pointer; font-size: 11px; font-weight: 700; }
.workspace-picker svg { width: 15px; color: #8190a5; }
.main-nav { flex: 1; overflow-y: auto; scrollbar-width: none; }
.nav-label { margin: 22px 12px 8px; color: #63738d; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.nav-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px;
  margin: 2px 0;
  border: 0;
  border-radius: 9px;
  color: #9cabc0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  transition: .2s ease;
}
.nav-item:hover { color: white; background: rgba(255,255,255,.05); }
.nav-item.active { color: white; background: rgba(29,201,197,.12); box-shadow: inset 3px 0 var(--cyan); }
.nav-item.active .nav-icon { color: var(--cyan); }
.nav-icon { display: grid; place-items: center; color: #718198; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-badge { margin-left: auto; min-width: 21px; padding: 2px 6px; border-radius: 10px; color: var(--cyan); background: rgba(29,201,197,.13); text-align: center; font-size: 10px; }
.nav-dot { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }
.new-pill { margin-left: auto; padding: 3px 6px; border-radius: 4px; color: var(--navy); background: var(--cyan); font-size: 8px; font-weight: 800; }
.sidebar-footer { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.help-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 0;
  border-radius: 9px;
  color: #9baabe;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  text-align: left;
}
.help-card > span:nth-child(2) { flex: 1; }
.help-card strong, .help-card small { display: block; }
.help-card strong { color: #d7e1ed; font-size: 11px; }
.help-card small { margin-top: 2px; font-size: 9px; }
.help-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #65768e; border-radius: 50%; }
.help-card svg { width: 14px; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 15px 7px 0; }
.user-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: white; background: #4b5f7c; font-size: 10px; font-weight: 700; }
.user-card div:nth-child(2) { flex: 1; }
.user-card strong, .user-card small { display: block; }
.user-card strong { color: white; font-size: 11px; }
.user-card small { margin-top: 2px; color: #77879d; font-size: 9px; }
.user-card .logout-button { min-height: 31px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; color: #a8b5c7; background: rgba(255,255,255,.045); cursor: pointer; font-size: 9px; font-weight: 700; }
.user-card .logout-button:hover { color: white; border-color: rgba(239,125,104,.35); background: rgba(239,125,104,.12); }
.user-card .logout-button svg { width: 14px; height: 14px; }
.admin-portal-link { text-decoration: none; }
.admin-portal-link[hidden] { display: none; }

.user-access-intro { align-items: flex-end; }
.user-access-stats { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.user-access-stats article { min-height: 104px; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: var(--shadow); }
.user-access-stats span { display: block; margin-bottom: 12px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.user-access-stats strong { color: var(--ink); font: 800 27px/1 Manrope, sans-serif; }
.user-access-stats strong small { color: var(--muted); font: 600 9px DM Sans, sans-serif; }
.user-access-stats article > i { display: block; height: 5px; margin-top: 15px; overflow: hidden; border-radius: 10px; background: #e8edf1; }
.user-access-stats article > i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #16aaa5, #29d2cc); }
.access-profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.access-profile-grid article { display: flex; gap: 13px; min-height: 90px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.access-profile-grid article > b { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 10px; color: white; font: 800 13px Manrope, sans-serif; }
.access-profile-icon.full { background: #112744; }
.access-profile-icon.hybrid { background: #0a9f9a; }
.access-profile-icon.view { background: #78889c; }
.access-profile-grid strong { color: var(--ink); font-size: 11px; }
.access-profile-grid p { margin: 5px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.user-access-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow); }
.user-access-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 15px; border-bottom: 1px solid var(--line); }
.user-access-toolbar label { width: min(380px, 100%); display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: #f9fbfc; }
.user-access-toolbar svg { width: 16px; color: var(--muted); }
.user-access-toolbar input { width: 100%; height: 41px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 11px DM Sans, sans-serif; }
.user-access-toolbar select, .user-access-row select { border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--ink); font: 700 10px DM Sans, sans-serif; }
.user-access-toolbar select { min-width: 170px; padding: 0 11px; }
.user-access-row { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(120px, .75fr) minmax(105px, .65fr) minmax(120px, .7fr) minmax(95px, .55fr); align-items: center; gap: 12px; min-height: 68px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.user-access-row:last-child { border-bottom: 0; }
.user-access-head { min-height: 38px; color: var(--muted); background: #fafbfc; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.tenant-user { display: flex; align-items: center; gap: 10px; }
.tenant-user > b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #087e7b; background: #dff6f4; font-size: 10px; }
.tenant-user strong, .tenant-user small { display: block; }
.tenant-user strong { color: var(--ink); font-size: 10px; }
.tenant-user small, .tenant-last-access { margin-top: 2px; color: var(--muted); font-size: 9px; }
.user-access-row select { min-height: 34px; padding: 0 8px; }
.tenant-user-status { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 700; }
.tenant-user-status i { width: 7px; height: 7px; border-radius: 50%; background: #a0aab7; }
.tenant-user-status.active i { background: #19b8a4; box-shadow: 0 0 0 3px rgba(25,184,164,.12); }
.tenant-user-status.invited i { background: #e9a942; }
.tenant-user-action { justify-self: start; min-height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; color: #52647a; background: white; cursor: pointer; font-size: 8px; font-weight: 800; }
.tenant-user-action:hover { color: #087e7b; border-color: #8edbd7; background: #eefbf9; }
.user-access-empty { padding: 35px; color: var(--muted); text-align: center; font-size: 11px; }
.tenant-user-modal .modal { width: min(460px, 100%); }
.tenant-user-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.password-security-modal { z-index: 220; }
.password-security-modal .modal { width: min(480px, 100%); }
.password-rules { display: block; margin-top: 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.password-reset-result { margin-top: 15px; color: var(--muted); font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
.password-reset-result .tenant-user-action { margin-top: 8px; }
.tenant-modal-field { display: block; margin-top: 14px; }
.tenant-modal-field > span { display: block; margin-bottom: 6px; color: var(--ink); font-size: 9px; font-weight: 800; }
.tenant-modal-field input, .tenant-modal-field select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: white; font: 500 12px DM Sans, sans-serif; }
.tenant-modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.tenant-modal-actions > button:not(.primary-button) { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: white; cursor: pointer; font-weight: 700; }

.main-content { width: calc(100% - 252px); min-height: 100vh; margin-left: 252px; }
.topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
}
.breadcrumb { display: flex; align-items: center; gap: 9px; color: #9aa4b2; font-size: 11px; }
.breadcrumb b { color: #c8ced7; }
.breadcrumb strong { color: #4e596b; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.language-picker, .theme-picker {
  height: 37px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 1px solid #dfe4eb;
  border-radius: 9px;
  color: #687487;
  background: white;
}
.language-picker svg, .theme-picker svg { width: 15px; height: 15px; }
.language-picker select, .theme-picker select { max-width: 92px; border: 0; outline: 0; color: #566276; background: transparent; cursor: pointer; font-size: 9px; font-weight: 600; }
.theme-picker select { max-width: 58px; }
.search-trigger {
  width: 222px;
  height: 37px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid #dfe4eb;
  border-radius: 9px;
  color: #8791a0;
  background: #f8f9fb;
  cursor: pointer;
  font-size: 10px;
}
.search-trigger svg { width: 15px; }
.search-trigger span { flex: 1; text-align: left; }
kbd { padding: 3px 5px; border: 1px solid #dfe3e9; border-radius: 4px; color: #8c95a2; background: white; font: 500 9px "DM Sans"; box-shadow: 0 1px 1px rgba(0,0,0,.04); }
.icon-button { position: relative; display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #e0e5eb; border-radius: 9px; background: white; cursor: pointer; }
.icon-button svg { width: 17px; color: #657184; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1.5px solid white; border-radius: 50%; background: var(--coral); }
.primary-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  color: white;
  background: var(--navy);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(10,25,48,.16);
}
.primary-button:hover { background: #142b4d; transform: translateY(-1px); }
.primary-button svg { width: 15px; }
.mobile-menu { display: none; border: 0; background: transparent; cursor: pointer; }

.page { display: none; max-width: 1440px; padding: 34px 34px 48px; margin: auto; animation: pageIn .35s ease; }
.page.active { display: block; }
@keyframes pageIn { from { opacity: 0; transform: translateY(5px); } }
.page-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
.eyebrow, .section-kicker { color: #8a94a3; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.page-intro h1 { margin: 7px 0 5px; color: #152035; font: 700 29px/1.2 "Manrope", sans-serif; letter-spacing: -.035em; }
.page-intro p { margin: 0; color: #768092; font-size: 12px; }
.page-intro p strong { color: var(--coral); font-weight: 600; }
.ghost-button { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #dfe4ea; border-radius: 9px; color: #556174; background: white; cursor: pointer; font-size: 10px; font-weight: 600; }
.ghost-button svg { width: 16px; }
.overview-framework-panel { margin-bottom: 17px; padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg,#fff,#f7fbfb); box-shadow: 0 3px 12px rgba(19,36,65,.025); }
.overview-framework-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.overview-framework-heading h2 { margin: 5px 0 4px; font: 700 16px "Manrope"; }
.overview-framework-heading p { margin: 0; color: #7d8897; font-size: 9px; }
.framework-multiselect { position: relative; z-index: 20; flex: 0 0 235px; }
.framework-multiselect summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border: 1px solid #d9e2e7; border-radius: 9px; color: #425267; background: white; cursor: pointer; font-size: 9px; font-weight: 800; list-style: none; }
.framework-multiselect summary::-webkit-details-marker { display: none; }
.framework-multiselect summary span { padding: 4px 6px; border-radius: 5px; color: #167d78; background: #e4f6f4; font-size: 7px; }
.framework-select-popover { position: absolute; right: 0; top: 49px; width: min(520px,90vw); max-height: 500px; overflow: hidden; border: 1px solid #dce3e8; border-radius: 12px; background: white; box-shadow: 0 20px 55px rgba(13,32,55,.2); }
.framework-select-top { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid #e8edf0; }
.framework-select-top strong { font-size: 10px; }
.framework-select-actions { display: flex; align-items: center; gap: 7px; }
.framework-select-top button { border: 0; color: #16837f; background: transparent; cursor: pointer; font-size: 8px; font-weight: 800; }
.framework-select-top .framework-select-close { padding: 7px 10px; border-radius: 6px; color: white; background: #18344f; }
.framework-select-list { max-height: 430px; display: grid; grid-template-columns: repeat(2,1fr); gap: 15px; overflow-y: auto; padding: 15px; }
.framework-select-list section > span { display: block; margin-bottom: 6px; color: #8793a1; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.framework-select-list label { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; cursor: pointer; }
.framework-select-list label:hover { background: #f4f8f8; }
.framework-select-list input { width: 14px; height: 14px; accent-color: #168984; }
.framework-select-list label i { width: 25px; height: 25px; flex: 0 0 25px; display: grid; place-items: center; border-radius: 6px; }
.framework-select-list label i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.framework-select-list label b { color: #4c5a6e; font-size: 8px; }
.overview-framework-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.overview-framework-card { min-width: 0; padding: 14px; border: 1px solid #e1e7eb; border-radius: 11px; background: white; }
.overview-framework-card-head { display: flex; align-items: center; gap: 9px; }
.overview-framework-card-head .framework-brand { width: 74px; height: 47px; flex: 0 0 74px; border-radius: 8px; }
.overview-framework-card-head .framework-brand svg { width: 74px; height: 47px; }
.overview-framework-card-head > div:nth-child(2) { min-width: 0; flex: 1; }
.overview-framework-card-head span { color: #8b95a3; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.overview-framework-card-head h3 { margin: 3px 0 0; overflow: hidden; font: 800 10px "Manrope"; text-overflow: ellipsis; white-space: nowrap; }
.overview-framework-card-head > strong { font: 800 16px "Manrope"; }
.overview-framework-card-head > strong.good, .overview-framework-card > small.good { color: #25825f; }
.overview-framework-card-head > strong.warn, .overview-framework-card > small.warn { color: #ae6f20; }
.framework-readiness { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin: 13px 0 11px; }
.framework-readiness i { height: 5px; overflow: hidden; border-radius: 4px; background: #e8edf0; }
.framework-readiness b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#17918b,#55d0ca); }
.framework-readiness span { color: #8994a2; font-size: 7px; }
.overview-framework-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.overview-framework-stats div { padding: 7px 4px; border-radius: 7px; background: #f5f8f9; text-align: center; }
.overview-framework-stats strong, .overview-framework-stats span { display: block; }
.overview-framework-stats strong { color: #344258; font: 800 13px "Manrope"; }
.overview-framework-stats span { margin-top: 2px; color: #8994a2; font-size: 6px; }
.overview-framework-card > small { display: block; margin-top: 9px; font-size: 7px; font-weight: 800; }
.overview-framework-empty { margin-top: 15px; padding: 25px; border: 1px dashed #d8e0e5; border-radius: 9px; color: #8792a0; text-align: center; font-size: 9px; }

.hero-grid { display: grid; grid-template-columns: 1.5fr .85fr; gap: 17px; }
.posture-card, .iris-card, .metric-card, .panel, .orchestrator-card, .agent-card, .integration-hero, .integration-grid article {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  box-shadow: 0 3px 12px rgba(19,36,65,.025);
}
.posture-card { padding: 21px 23px 18px; }
.card-heading, .panel-header { display: flex; align-items: flex-start; justify-content: space-between; }
.card-heading h2, .panel-header h2 { margin: 4px 0 0; font: 700 16px "Manrope", sans-serif; letter-spacing: -.02em; }
.more-button { border: 0; color: #9ba3af; background: transparent; cursor: pointer; }
.posture-content { display: flex; align-items: center; gap: 25px; padding: 19px 0 16px; }
.score-ring {
  --size: 122px;
  width: var(--size);
  height: var(--size);
  flex: 0 0 var(--size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) calc(var(--score) * 1%), #e9eff2 0);
  transform: rotate(-25deg);
}
.score-ring::before { content: ""; position: absolute; width: 96px; height: 96px; border-radius: 50%; background: white; }
.score-ring div { position: relative; z-index: 1; display: flex; align-items: baseline; transform: rotate(25deg); }
.score-ring strong { font: 700 34px "Manrope"; }
.score-ring span { color: #8d97a5; font-size: 12px; }
.trend { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 5px; font-size: 9px; font-weight: 600; }
.trend.positive { color: #17835e; background: #e9f8f1; }
.trend svg { width: 12px; height: 12px; }
.score-copy h3 { margin: 9px 0 5px; font: 700 15px "Manrope"; }
.score-copy p { max-width: 410px; margin: 0; color: #818b9a; font-size: 10px; line-height: 1.55; }
.score-factors { display: grid; grid-template-columns: repeat(4,1fr); gap: 17px; padding-top: 14px; border-top: 1px solid #edf0f4; }
.score-factors div { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.score-factors span, .score-factors strong { font-size: 9px; }
.score-factors span { color: #7d8795; }
.score-factors strong { color: #455166; }
.score-factors i { grid-column: 1/-1; height: 4px; overflow: hidden; border-radius: 3px; background: #e9edf2; }
.score-factors b { display: block; height: 100%; border-radius: 3px; background: var(--cyan); }

.iris-card { position: relative; overflow: hidden; padding: 22px 23px; color: white; border: 0; background: linear-gradient(140deg,#102c49,#0a1930 75%); }
.iris-card::before { content: ""; position: absolute; width: 280px; height: 280px; right: -120px; top: -125px; border: 1px solid rgba(29,201,197,.15); border-radius: 50%; box-shadow: 0 0 55px rgba(29,201,197,.08); }
.iris-orb { position: relative; width: 75px; height: 75px; margin-bottom: 18px; display: grid; place-items: center; }
.iris-orb span { position: absolute; inset: 10px 0; border: 1px solid rgba(29,201,197,.62); border-radius: 50%; }
.iris-orb span:nth-child(1) { transform: rotate(60deg); }
.iris-orb span:nth-child(2) { transform: rotate(-60deg); }
.iris-orb span:nth-child(3) { inset: 0 10px; }
.iris-core { width: 19px; height: 19px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 23px var(--cyan); }
.iris-copy, .iris-action, .iris-orb { position: relative; z-index: 1; }
.agent-label { display: flex; align-items: center; gap: 6px; color: #8de0dd; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.agent-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.iris-copy h2 { margin: 9px 0 6px; font: 700 18px "Manrope"; letter-spacing: -.02em; }
.iris-copy p { margin: 0; color: #9fb0c5; font-size: 10px; line-height: 1.55; }
.iris-action { width: 100%; height: 37px; display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding: 0 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: white; background: rgba(255,255,255,.06); cursor: pointer; font-size: 10px; }
.iris-action:hover { background: rgba(29,201,197,.12); }
.iris-action svg { width: 14px; }

.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-top: 14px; }
.metric-card { min-height: 118px; position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 17px; }
.metric-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; }
.metric-icon svg { width: 17px; }
.metric-icon.cyan { color: #078784; background: #dff7f5; }
.metric-icon.purple { color: #735bc8; background: #efebfd; }
.metric-icon.coral { color: #d66553; background: #ffede8; }
.metric-icon.green { color: #228c62; background: #e3f7ee; }
.metric-card > div:nth-child(2) span, .metric-card > div:nth-child(2) strong, .metric-card > div:nth-child(2) small { display: block; }
.metric-card > div:nth-child(2) span { color: #7e8896; font-size: 9px; }
.metric-card > div:nth-child(2) strong { margin: 2px 0; font: 700 24px "Manrope"; }
.metric-card > div:nth-child(2) small { color: #929ba8; font-size: 8px; }
.metric-card small.up { color: #29936c; }
.metric-card small.down { color: #d56a59; }
.mini-chart { position: absolute; right: 14px; bottom: 16px; width: 49px; height: 33px; display: flex; align-items: end; gap: 3px; }
.mini-chart i { width: 5px; border-radius: 2px; background: #bdece9; }
.mini-chart i:nth-last-child(-n+2) { background: var(--cyan); }
.status-pill { position: absolute; right: 13px; bottom: 13px; padding: 4px 6px; border-radius: 5px; font-size: 8px; font-weight: 700; }
.status-pill.warning { color: #a96918; background: #fff4d8; }
.status-pill.danger { color: #b55144; background: #ffebe6; }
.status-pill.success { color: #247d5d; background: #e5f6ee; }

.dashboard-grid { display: grid; grid-template-columns: 1.45fr .85fr; gap: 14px; margin-top: 14px; }
.panel { padding: 19px; }
.text-button { display: inline-flex; align-items: center; gap: 4px; border: 0; color: #687487; background: transparent; cursor: pointer; font-size: 9px; font-weight: 600; }
.text-button svg { width: 13px; }
.task-list { margin-top: 12px; }
.task-item { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 5px; border: 0; border-top: 1px solid #edf0f4; background: transparent; cursor: pointer; text-align: left; }
.task-item:first-child { border-top: 0; }
.task-item:hover { background: #fafbfc; }
.task-severity { width: 4px; height: 31px; border-radius: 3px; }
.task-severity.high { background: var(--coral); }
.task-severity.medium { background: #f0b957; }
.task-severity.low { background: var(--purple); }
.task-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid #e6eaf0; border-radius: 8px; color: #758094; }
.task-icon svg { width: 15px; }
.task-copy { flex: 1; }
.task-copy strong, .task-copy small { display: block; }
.task-copy strong { color: #343f51; font-size: 10px; }
.task-copy small { margin-top: 4px; color: #929ba8; font-size: 8px; }
.task-owner { min-width: 28px; height: 28px; display: grid; place-items: center; padding: 0 6px; border-radius: 50%; color: #316c6e; background: #dff3f1; font-size: 8px; font-weight: 700; }
.task-owner.navy { color: white; background: #2f4564; }
.task-owner.purple-bg { color: #6850b6; background: #ece7fa; border-radius: 12px; }
.chevron { width: 14px; color: #b1b8c2; }
.live-pill { display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 5px; color: #318366; background: #e8f6f0; font-size: 7px; font-weight: 800; }
.live-pill i { width: 5px; height: 5px; border-radius: 50%; background: #36b47f; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.agent-log { padding: 7px 0 2px; }
.agent-log-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.agent-log-item:last-child { border-bottom: 0; }
.agent-avatar { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border-radius: 9px; font-size: 8px; font-weight: 800; }
.evidence-agent { color: #6952ba; background: #ece8fa; }
.control-agent { color: #168580; background: #def5f3; }
.risk-agent { color: #c25e4f; background: #ffebe7; }
.audit-agent { color: #376bb1; background: #e5effc; }
.cyber-agent { color: #8e651e; background: #fff2cf; }
.api-agent { color: #637086; background: #e9edf2; }
.agent-log-item strong { display: block; color: #3d485b; font-size: 9px; }
.agent-log-item p { margin: 3px 0; color: #808a99; font-size: 8px; }
.agent-log-item small { color: #a5adb7; font-size: 7px; }
.full-button { width: 100%; height: 34px; border: 1px solid #e3e7ec; border-radius: 8px; color: #566276; background: #fafbfc; cursor: pointer; font-size: 9px; font-weight: 600; }

.academy-banner { min-height: 142px; display: grid; grid-template-columns: 230px 1fr auto; align-items: center; gap: 25px; overflow: hidden; margin-top: 14px; border-radius: 14px; color: white; background: #17233a; box-shadow: var(--shadow); }
.episode-art { align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg,#dc725f,#633f6e); }
.episode-art::before { content: ""; position: absolute; inset: -20%; opacity: .35; background: repeating-linear-gradient(45deg,transparent 0 12px,rgba(255,255,255,.09) 12px 14px); transform: rotate(-10deg); }
.episode-art > span { position: absolute; left: 14px; top: 12px; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.episode-number { position: absolute; left: 22px; bottom: 15px; color: rgba(255,255,255,.75); font: 700 9px "Manrope"; }
.episode-number strong { color: white; font-size: 24px; }
.play-button { position: relative; z-index: 1; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: rgba(9,22,40,.25); backdrop-filter: blur(8px); }
.play-button svg { width: 20px; fill: white; stroke: white; }
.episode-copy h2 { margin: 7px 0 4px; font: 700 18px "Manrope"; }
.episode-copy p { margin: 0 0 12px; color: #aab5c7; font-size: 9px; }
.episode-copy p b { padding: 0 4px; }
.watch-progress { width: 210px; height: 3px; overflow: hidden; border-radius: 2px; background: #39465a; }
.watch-progress i { display: block; height: 100%; background: var(--coral); }
.episode-copy small { display: block; margin-top: 4px; color: #7e8ba0; font-size: 7px; }
.episode-action { display: flex; align-items: center; gap: 8px; margin-right: 24px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.17); border-radius: 8px; color: white; background: rgba(255,255,255,.05); cursor: pointer; font-size: 9px; }
.episode-action svg { width: 15px; fill: white; }

.orchestrator-card { position: relative; display: grid; grid-template-columns: 105px 1fr auto; align-items: center; gap: 20px; overflow: hidden; padding: 25px; color: white; border: 0; background: linear-gradient(120deg,#0d213d,#123a50); }
.orchestrator-card::after { content: ""; position: absolute; width: 320px; height: 320px; right: -150px; border: 1px solid rgba(29,201,197,.18); border-radius: 50%; }
.orchestrator-visual .iris-orb { margin: 0; }
.orchestrator-card h2 { margin: 8px 0 6px; font: 700 20px "Manrope"; }
.orchestrator-card p { max-width: 650px; margin: 0; color: #a8b7c9; font-size: 10px; line-height: 1.55; }
.orchestrator-stats { position: relative; z-index: 1; display: flex; gap: 28px; padding-right: 20px; }
.orchestrator-stats div { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.13); }
.orchestrator-stats strong, .orchestrator-stats span { display: block; }
.orchestrator-stats strong { color: var(--cyan); font: 700 23px "Manrope"; }
.orchestrator-stats span { margin-top: 3px; color: #8495aa; font-size: 8px; }
.agent-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 17px; }
.agent-card { min-height: 242px; padding: 20px; }
.agent-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.agent-avatar.large { width: 42px; height: 42px; flex-basis: 42px; font-size: 10px; }
.agent-status { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 5px; color: #28825f; background: #e6f6ef; font-size: 7px; font-weight: 700; }
.agent-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.agent-status.resting { color: #687487; background: #edf0f3; }
.agent-card h3 { margin: 16px 0 1px; font: 700 18px "Manrope"; }
.agent-card > strong { color: #697487; font-size: 9px; }
.agent-card > p { min-height: 46px; margin: 9px 0 15px; color: #838c99; font-size: 9px; line-height: 1.6; }
.agent-progress span { display: block; margin-bottom: 7px; color: #647084; font-size: 8px; }
.agent-progress i { display: block; height: 4px; overflow: hidden; border-radius: 3px; background: #edf0f4; }
.agent-progress b { display: block; height: 100%; border-radius: 3px; background: var(--cyan); }
.agent-result { padding: 9px 10px; border-radius: 7px; color: #687386; background: #f6f8fa; font-size: 8px; }
.agent-card.planned { border-style: dashed; background: #fafbfc; }
.planned-pill, .roadmap-badge { padding: 5px 8px; border-radius: 5px; color: #697487; background: #e9edf2; font-size: 7px; font-weight: 800; letter-spacing: .08em; }

.module-shell { display: grid; grid-template-columns: 1fr 310px; gap: 16px; }
.cobit-source-badge { padding: 7px 10px; border-radius: 6px; color: #087d80; background: #def5f3; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.cobit-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 15px; }
.cobit-stats div { padding: 15px 17px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.cobit-stats strong, .cobit-stats span { display: block; }
.cobit-stats strong { color: #153b55; font: 700 22px "Manrope"; }
.cobit-stats span { margin-top: 2px; color: #84909f; font-size: 8px; text-transform: uppercase; }
.cobit-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.cobit-search { width: min(380px,100%); height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #dfe4ea; border-radius: 9px; background: white; }
.cobit-search svg { width: 15px; color: #8792a1; }
.cobit-search input { flex: 1; border: 0; outline: 0; color: #3e4a5e; background: transparent; font-size: 9px; }
.domain-filters { display: flex; gap: 5px; }
.domain-filters button { height: 31px; padding: 0 9px; border: 1px solid #dfe4ea; border-radius: 7px; color: #687487; background: white; cursor: pointer; font-size: 8px; font-weight: 700; }
.domain-filters button span { margin-left: 3px; color: #99a3af; }
.domain-filters button.active { color: white; border-color: var(--navy); background: var(--navy); }
.domain-filters button.active span { color: #9fdedb; }
.cobit-table { width: 100%; }
.cobit-columns { grid-template-columns: 1.8fr 1.1fr .35fr 20px; }
.grc-library-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 15px; }
.grc-coverage-note { display: inline-flex; margin-top: 9px; padding: 6px 8px; border-radius: 6px; color: #8a6424; background: #fff5df; font-size: 8px; font-weight: 700; }
.grc-library-stats > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.grc-library-stats strong, .grc-library-stats span { display: block; }
.grc-library-stats strong { color: #213047; font: 800 21px "Manrope"; }
.grc-library-stats span { margin-top: 3px; color: #85909e; font-size: 8px; }
.grc-library-toolbar .cobit-search { flex: 1; }
.grc-framework-filter { min-width: 230px; height: 42px; padding: 0 12px; border: 1px solid #dfe5e9; border-radius: 9px; outline: 0; color: #4e5d70; background: white; font-size: 9px; }
.grc-library-columns { align-items: start; }
.grc-library-controls { grid-template-columns: 1.15fr 1.4fr 1fr; }
.grc-library-risks { grid-template-columns: 1.05fr 1.35fr .55fr 1fr; }
.grc-library-evidence { grid-template-columns: 1.05fr 1.2fr .48fr .85fr 1.05fr .9fr; }
.grc-library-table .module-row { min-height: 88px; }
.grc-description { color: #657286; font-size: 8px; line-height: 1.55; }
.grc-framework-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.grc-framework-pills span, .grc-framework-pills b, .grc-control-link { display: inline-flex; padding: 4px 6px; border-radius: 5px; font-size: 7px; font-weight: 700; }
.grc-framework-pills span { color: #3a6571; background: #e9f5f5; }
.grc-framework-pills b { color: #69778a; background: #edf1f4; }
.grc-control-links { display: flex; flex-wrap: wrap; gap: 4px; }
.grc-control-link { color: #725b93; background: #f0ebf7; }
.evidence-status-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; margin: -2px 0 13px; }
.evidence-status-summary > div { min-height: 56px; display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.evidence-status-summary i { width: 7px; height: 7px; border-radius: 50%; background: #9ba5b2; }
.evidence-status-summary span { color: var(--muted); font-size: 8px; font-weight: 700; }
.evidence-status-summary strong { color: var(--ink); font: 800 15px Manrope, sans-serif; }
.evidence-summary-partial i { background: #efad44; }
.evidence-summary-not-applicable i { background: #8b73b2; }
.evidence-summary-received i { background: #398cc0; }
.evidence-summary-reviewed i { background: #1cae83; }
.evidence-file-list { display: flex; flex-direction: column; gap: 5px; }
.evidence-file-chip { min-width: 0; display: flex; align-items: stretch; overflow: hidden; border: 1px solid #dce4e9; border-radius: 7px; background: #f7fafb; }
.evidence-file-chip > button:first-child { min-width: 0; flex: 1; display: block; overflow: hidden; padding: 7px 8px; border: 0; color: #41536a; background: transparent; cursor: pointer; font-size: 8px; font-weight: 700; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.evidence-file-chip small { display: block; margin-top: 2px; color: #8a96a5; font-size: 6px; }
.evidence-file-remove { width: 27px; flex: 0 0 27px; border: 0; border-left: 1px solid #dce4e9; color: #9a6670; background: #fff; cursor: pointer; font-size: 15px; }
.evidence-no-file { color: #9aa4b1; font-size: 8px; font-style: italic; }
.evidence-operation { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.evidence-upload-button { min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid #8ed7d3; border-radius: 7px; color: #087f7b; background: #effbf9; cursor: pointer; font-size: 8px; font-weight: 800; }
.evidence-upload-button:hover { background: #e2f7f4; }
.evidence-upload-button input { display: none; }
.evidence-upload-button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.evidence-status-select { width: 100%; min-height: 31px; padding: 0 7px; border: 1px solid #dce3e8; border-radius: 7px; color: #59687b; background: #fff; font-size: 8px; font-weight: 800; }
.evidence-status-select.status-partial { color: #9d6817; border-color: #ead09b; background: #fff8e9; }
.evidence-status-select.status-not-applicable { color: #72558e; border-color: #d8c8e7; background: #f7f1fb; }
.evidence-status-select.status-received { color: #276f9a; border-color: #acd3e9; background: #edf7fc; }
.evidence-status-select.status-reviewed { color: #187b61; border-color: #9fd9c7; background: #ebf8f4; }
.evidence-reviewer { color: #718094; font-size: 7px; line-height: 1.35; }
.evidence-reviewer strong { color: #187b61; }
.evidence-received-audit { color: #718094; font-size: 7px; line-height: 1.4; }
.evidence-received-audit strong { color: #276f9a; }
.evidence-received-audit time { display: block; margin-top: 2px; color: #8794a5; font-weight: 700; }
.cobit-control-row { width: 100%; color: inherit; background: white; cursor: pointer; text-align: left; }
.cobit-control-row > span:nth-child(2) b { color: #167e7a; font-size: 9px; }
.cobit-control-row > span:last-child { color: #a5aeba; font-size: 18px; }
.domain-chip { display: inline-flex; width: max-content; align-items: center; justify-content: center; min-width: 39px; padding: 5px 7px; border-radius: 5px; font-size: 8px; font-weight: 800; }
.domain-edm { color: #6a4eb2; background: #eee9fb; }
.domain-apo { color: #187b78; background: #def4f2; }
.domain-bai { color: #2f6eaf; background: #e4effb; }
.domain-dss { color: #b35d48; background: #ffebe6; }
.domain-mea { color: #8d671e; background: #fff2d5; }
.cobit-empty { padding: 50px 20px; color: #8a95a3; font-size: 10px; text-align: center; }
.cobit-pagination { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; color: #7d8998; font-size: 8px; }
.cobit-pagination div { display: flex; gap: 6px; }
.cobit-pagination button { padding: 7px 10px; border: 1px solid #dfe4ea; border-radius: 7px; color: #59667a; background: white; cursor: pointer; font-size: 8px; }
.cobit-pagination button:disabled { opacity: .4; cursor: default; }
.cobit-detail { width: min(690px,100%); max-height: 88vh; overflow-y: auto; }
.cobit-detail-title { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cobit-detail-title h2 { margin: 0; font: 700 24px "Manrope"; }
.cobit-detail-title p { margin: 2px 0 0; color: #59667a; font-size: 11px; }
.cobit-detail-objective { display: flex; gap: 8px; margin: 14px 0; padding: 10px; border-radius: 7px; background: #f2f6f8; font-size: 9px; }
.cobit-detail-objective b { color: #087d80; }
.cobit-detail section { padding: 13px 0; border-top: 1px solid #e9edf1; }
.cobit-detail section > span { color: #7e8998; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.cobit-detail section p, .cobit-detail li { color: #566276; font-size: 9px; line-height: 1.55; }
.cobit-detail ol { padding-left: 20px; }
.cobit-detail li { margin: 5px 0; }
.cobit-detail section small { color: #939ca9; font-size: 7px; }
.framework-count-badge { padding: 8px 11px; border: 1px solid #cce3e1; border-radius: 7px; color: #137d78; background: #eef9f8; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.framework-summary-strip { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; margin-bottom: 17px; }
.framework-summary-strip button { min-width: 0; min-height: 88px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px 5px; border: 1px solid var(--line); border-radius: 11px; color: #627084; background: white; cursor: pointer; }
.framework-summary-strip button:hover, .framework-summary-strip button.active { border-color: #73cbc7; background: #f1fbfa; box-shadow: 0 6px 18px rgba(19,125,120,.08); }
.framework-summary-strip button > span { max-width: 100%; overflow: hidden; font-size: 7px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.framework-summary-strip button > strong { color: #17283e; font: 800 13px "Manrope"; }
.framework-mini-mark { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; }
.framework-mini-mark svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.framework-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.framework-search { height: 40px; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #dfe4e9; border-radius: 9px; background: white; }
.framework-search svg { width: 15px; color: #8692a0; }
.framework-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #3f4d61; background: transparent; font-size: 9px; }
.framework-all { height: 40px; padding: 0 13px; border: 1px solid #dfe4e9; border-radius: 9px; color: #617085; background: white; cursor: pointer; font-size: 8px; font-weight: 800; }
.framework-all span { margin-left: 4px; color: #94a0ad; }
.framework-all.active { color: white; border-color: #142a44; background: #142a44; }
.framework-all.active span { color: #70d8d3; }
.framework-results { display: flex; flex-direction: column; gap: 27px; }
.framework-category-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.framework-category-heading h2 { margin: 0; font: 800 15px "Manrope"; }
.framework-category-heading span { display: block; margin-top: 2px; color: #8b96a4; font-size: 7px; }
.framework-category-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; }
.framework-category-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.framework-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.framework-card { min-height: 190px; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 3px 13px rgba(17,35,59,.025); cursor: pointer; }
.framework-card:hover { border-color: #b7dcd9; box-shadow: 0 10px 26px rgba(17,70,79,.07); transform: translateY(-2px); transition: .2s ease; }
.framework-card:focus-visible { outline: 3px solid rgba(29,201,197,.24); outline-offset: 3px; }
.framework-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.framework-card-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; }
.framework-card-mark svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.framework-brand { width: 116px; height: 64px; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; border: 1px solid color-mix(in srgb,var(--framework-brand,#426887) 25%,white); border-radius: 12px; color: var(--framework-brand,#426887); background: color-mix(in srgb,var(--framework-brand,#426887) 7%,white); box-shadow: 0 5px 14px rgba(22,42,68,.06); }
.framework-brand strong { font: 900 17px/1 "Manrope"; letter-spacing: -.04em; }
.framework-brand span { max-width: 60px; margin-top: 4px; overflow: hidden; font-size: 7px; font-weight: 900; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.framework-brand-original { border: 0; background: white; }
.framework-brand-original svg { width: 78px; height: 64px; display: block; }
.framework-brand-institutional { border: 0; background: white; }
.framework-brand-institutional svg { width: 116px; height: 64px; display: block; }
.framework-brand-image { padding: 4px; border-color: #e2e7eb; background: white; }
.framework-brand-image img { width: 100%; height: 100%; display: block; object-fit: contain; image-rendering: auto; }
.framework-brand-iso { position: relative; color: #fff; border-color: #d1272f; background: #d1272f; }
.framework-brand-iso::before { content: ""; position: absolute; width: 51px; height: 51px; border: 1px solid rgba(255,255,255,.36); border-radius: 50%; }
.framework-brand-iso strong, .framework-brand-iso span { position: relative; z-index: 1; }
.framework-brand-nist { color: #fff; border-color: #1d5b82; background: linear-gradient(145deg,#1d5b82,#153f61); }
.framework-brand-custom { color: #168984; border: 1px dashed #6fc7c3; background: white; }
.framework-brand-custom svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.framework-card h3 { margin: 15px 0 7px; color: #263449; font: 800 13px "Manrope"; }
.framework-card p { margin: 0; color: #738093; font-size: 8px; line-height: 1.58; }
.framework-type { padding: 4px 6px; border-radius: 5px; font-size: 6px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.type-audit { color: #7d4fa0; background: #f1eafa; }
.type-standard { color: #167b77; background: #def4f2; }
.type-regulation { color: #a25c42; background: #ffebe4; }
.type-framework { color: #386eab; background: #e6f0fb; }
.type-program { color: #88671e; background: #fff2d5; }
.framework-detail-modal { width: min(620px, 100%); }
.framework-detail-title { display: flex; align-items: center; gap: 15px; margin: 18px 0 15px; }
.framework-detail-title .framework-brand { width: 132px; height: 74px; flex: 0 0 132px; }
.framework-detail-title .framework-brand svg { width: 132px; height: 74px; }
.framework-detail-title .framework-brand img { width: 100%; height: 100%; object-fit: contain; }
.framework-detail-title span { display: block; color: #15908b; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.framework-detail-title h2 { margin: 5px 0 0; color: var(--ink); font: 800 25px/1.1 Manrope, sans-serif; }
.framework-detail-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 15px; }
.framework-detail-meta span { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; color: #516176; background: #f8fafb; font-size: 10px; font-weight: 700; }
.framework-detail-meta b { display: block; margin-bottom: 4px; color: #8a95a4; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.framework-detail-modal section { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.framework-detail-modal section > span { display: block; margin-bottom: 6px; color: #8a95a4; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.framework-detail-modal section p { margin: 0; color: #56657a; font-size: 11px; line-height: 1.65; }
.framework-source-link { width: fit-content; display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px; border: 1px solid #9edbd8; border-radius: 9px; color: #087e7b; background: #eefbf9; text-decoration: none; font-size: 10px; font-weight: 800; }
.framework-source-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.framework-financial { color: #167e7a; background: #dff4f2; }
.framework-security { color: #356dac; background: #e5effa; }
.framework-privacy { color: #7b55a3; background: #f0eafb; }
.framework-ai { color: #b25d47; background: #ffebe5; }
.framework-operational { color: #9a711d; background: #fff1d2; }
.framework-government { color: #526781; background: #eaf0f5; }
.framework-healthcare { color: #be4f6a; background: #fde8ed; }
.framework-custom { color: #168984; background: #e4f7f5; }
.framework-custom-card { align-items: center; justify-content: center; border-style: dashed; border-color: #86d0cc; background: linear-gradient(145deg,#f8fdfc,#edf9f8); text-align: center; }
.framework-custom-card > span { margin-top: 10px; color: #168984; font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.framework-custom-card h3 { margin: 7px 0; }
.framework-custom-card button { margin-top: 13px; padding: 8px 11px; border: 0; border-radius: 7px; color: white; background: #168984; cursor: pointer; font-size: 7px; font-weight: 800; }
.framework-empty { padding: 50px 20px; border: 1px dashed #d9e0e5; border-radius: 12px; color: #8792a0; text-align: center; font-size: 9px; }
.module-main, .module-side { display: flex; flex-direction: column; gap: 14px; }
.module-table { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: white; }
.module-table-header, .module-row { display: grid; align-items: center; gap: 12px; padding: 13px 17px; }
.module-table-header { color: #919aa7; background: #fafbfc; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.module-row { min-height: 61px; border-top: 1px solid #edf0f3; font-size: 9px; }
.module-row:hover { background: #fafcfd; }
.module-row strong { font-size: 10px; }
.module-row small { display: block; margin-top: 3px; color: #929ba8; font-size: 8px; }
.table-controls { grid-template-columns: 1.2fr .7fr .55fr .55fr 20px; }
.table-evidence { grid-template-columns: 1.4fr .6fr .6fr .55fr 20px; }
.table-risks { grid-template-columns: 1.3fr .55fr .6fr .55fr 20px; }
.table-audits { grid-template-columns: 1.2fr .65fr .6fr .6fr 20px; }
.table-repository { grid-template-columns: .65fr 1.45fr 1fr .5fr .55fr .55fr 20px; }
.repository-row { width: 100%; color: inherit; background: white; cursor: pointer; text-align: left; }
.repository-row > span:last-child { color: #9ba6b3; font-size: 18px; }
.repository-row > span:nth-child(2) small { max-width: 390px; display: -webkit-box; margin-top: 4px; overflow: hidden; color: #7c8999; font-size: 7px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.workpaper-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 13px; }
.workpaper-kpis > div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.workpaper-kpis strong, .workpaper-kpis span { display: block; }
.workpaper-kpis strong { color: var(--ink); font: 800 21px Manrope, sans-serif; }
.workpaper-kpis span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.workpaper-catalog-toolbar { display: flex; gap: 10px; margin-bottom: 13px; }
.workpaper-catalog-toolbar label { min-height: 42px; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.workpaper-catalog-toolbar svg { width: 16px; color: var(--muted); }
.workpaper-catalog-toolbar input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 9px; }
.workpaper-catalog-toolbar select { min-width: 230px; padding: 0 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; font-size: 9px; }
.workpaper-catalog-shell .module-main { min-width: 0; }
.workpaper-catalog-shell .module-table { overflow-x: auto; }
.workpaper-catalog-shell .table-repository { min-width: 1050px; }
.workpaper-evidence-count strong, .workpaper-evidence-count small { display: block; }
.workpaper-evidence-count strong { color: #147f7b; font-size: 11px; }
.workpaper-evidence-count small { margin-top: 2px; color: var(--muted); font-size: 7px; }
.workpaper-status { display: inline-flex; width: max-content; padding: 5px 7px; border-radius: 6px; font-size: 7px; font-weight: 800; }
.workpaper-status.status-planned { color: #637286; background: #edf1f5; }
.workpaper-status.status-in-progress { color: #99631b; background: #fff3d9; }
.workpaper-status.status-completed { color: #237a5c; background: #e3f5ed; }
.workpaper-topbar { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 18px; margin: -8px 0 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.workpaper-back { border: 0; color: #187e7a; background: transparent; cursor: pointer; font-size: 9px; font-weight: 800; text-align: left; }
.workpaper-topbar > div:nth-child(2) > span { color: #16837f; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.workpaper-topbar h1 { margin: 4px 0 2px; font: 700 20px "Manrope"; }
.workpaper-topbar p { margin: 0; color: #87919e; font-size: 8px; }
.workpaper-save { display: flex; align-items: center; gap: 12px; }
.workpaper-save small { color: #87929f; font-size: 8px; }
.workpaper-save .primary-button { white-space: nowrap; }
.workpaper-export { min-height: 38px; padding: 0 12px; border: 1px solid #9edbd8; border-radius: 8px; color: #087e7b; background: #eefbf9; cursor: pointer; font-size: 8px; font-weight: 800; white-space: nowrap; }
.workpaper-export:disabled { cursor: progress; opacity: .65; }
.workpaper-form { display: flex; flex-direction: column; gap: 14px; padding-bottom: 30px; }
.workpaper-section { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.workpaper-section h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 17px; font: 700 13px "Manrope"; }
.workpaper-section h2 > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #117c78; background: #def4f2; font-size: 8px; }
.workpaper-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.workpaper-section-heading button { padding: 7px 10px; border: 1px solid #b8dcda; border-radius: 7px; color: #117c78; background: #f2fbfa; cursor: pointer; font-size: 8px; font-weight: 800; }
.workpaper-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.workpaper-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.workpaper-field.wide { grid-column: 1 / -1; }
.workpaper-field > span { color: #6f7b8c; font-size: 8px; font-weight: 800; line-height: 1.4; }
.workpaper-field input, .workpaper-field textarea, .workpaper-field select, .attribute-row input, .attribute-row textarea, .sample-table input { width: 100%; box-sizing: border-box; border: 1px solid #dce3e8; border-radius: 8px; outline: 0; color: #344156; background: #fbfcfd; font: 9px/1.5 "Inter",sans-serif; transition: border-color .2s,box-shadow .2s; }
.workpaper-field input, .workpaper-field select { height: 38px; padding: 0 10px; }
.workpaper-field textarea { padding: 10px; resize: vertical; }
.workpaper-field input:focus, .workpaper-field textarea:focus, .workpaper-field select:focus, .attribute-row input:focus, .attribute-row textarea:focus, .sample-table input:focus { border-color: #68c9c5; box-shadow: 0 0 0 3px rgba(29,201,197,.09); background: white; }
.workpaper-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.workpaper-checks label { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 11px; border: 1px solid #e0e6eb; border-radius: 8px; color: #59667a; background: #fafbfc; cursor: pointer; font-size: 8px; }
.workpaper-checks input { width: 15px; height: 15px; accent-color: #16837f; }
.sample-table-wrap { overflow-x: auto; border: 1px solid #e0e6eb; border-radius: 10px; }
.sample-table { width: 100%; min-width: 1500px; border-collapse: collapse; }
.sample-table th { padding: 9px 7px; color: #7f8a98; background: #f6f8fa; font-size: 7px; letter-spacing: .05em; text-align: left; }
.sample-table td { padding: 6px; border-top: 1px solid #e8ecf0; }
.sample-table th:first-child, .sample-table td:first-child { width: 45px; }
.sample-table th:nth-child(n+8):nth-child(-n+11), .sample-table td:nth-child(n+8):nth-child(-n+11) { width: 52px; }
.sample-table input { height: 34px; padding: 0 7px; border-radius: 6px; }
.sample-remove { width: 27px; height: 27px; border: 0; border-radius: 6px; color: #b45a50; background: #ffebe7; cursor: pointer; }
.attribute-list { display: flex; flex-direction: column; gap: 8px; }
.attribute-row { display: grid; grid-template-columns: 45px 1fr; gap: 8px; }
.attribute-row input { padding: 0 10px; color: #117c78; font-weight: 800; text-align: center; }
.attribute-row textarea { padding: 9px 10px; resize: vertical; }
.workpaper-section-heading > div > p { margin: -8px 0 16px 34px; color: var(--muted); font-size: 8px; }
.workpaper-evidence-table { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }
.workpaper-evidence-row { display: grid; grid-template-columns: 1.45fr .45fr 1fr; align-items: start; gap: 12px; min-height: 62px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.workpaper-evidence-row:last-child { border-bottom: 0; }
.workpaper-evidence-head { min-height: 35px; align-items: center; color: #8994a2; background: #f7f9fa; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.workpaper-evidence-row strong, .workpaper-evidence-row small { display: block; }
.workpaper-evidence-row > span:first-child strong { color: var(--ink); font-size: 9px; }
.workpaper-evidence-row > span:first-child small { margin-top: 4px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.workpaper-evidence-row > span:nth-child(2) small { margin-top: 5px; color: var(--muted); font-size: 7px; }
.workpaper-evidence-row em { color: #929daa; font-size: 8px; font-style: italic; }
.workpaper-evidence-status { display: inline-flex; padding: 5px 7px; border-radius: 6px; color: #667487; background: #edf1f5; font-size: 7px; font-weight: 800; }
.workpaper-evidence-status.status-partial { color: #99631b; background: #fff3d9; }
.workpaper-evidence-status.status-not-applicable { color: #72558e; background: #f3eefa; }
.workpaper-evidence-status.status-received { color: #276f9a; background: #eaf5fb; }
.workpaper-evidence-status.status-reviewed { color: #187b61; background: #e4f6ef; }
.workpaper-attachment-list { display: flex; flex-direction: column; gap: 5px; }
.workpaper-attachment-list button { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid #dce5ea; border-radius: 7px; color: #42546a; background: #f8fafb; cursor: pointer; text-align: left; }
.workpaper-attachment-list svg { width: 14px; flex: 0 0 14px; fill: none; stroke: #16837f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.workpaper-attachment-list button > span { min-width: 0; overflow: hidden; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.workpaper-attachment-list small { margin-top: 2px; color: #8995a4; font-size: 6px; }
.status { display: inline-flex; width: max-content; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 5px; font-size: 8px; font-weight: 700; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.status.good { color: #287f60; background: #e5f6ee; }
.status.good::before { background: #32aa7a; }
.status.warn { color: #a46a1e; background: #fff4dc; }
.status.warn::before { background: #e8ad49; }
.status.bad { color: #b55749; background: #ffebe7; }
.status.bad::before { background: #e97865; }
.status.neutral { color: #607087; background: #edf1f5; }
.status.neutral::before { background: #8090a6; }
.mini-panel { padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.mini-panel h3 { margin: 0 0 13px; font: 700 13px "Manrope"; }
.mini-panel p { color: #828c9a; font-size: 9px; line-height: 1.5; }
.donut { width: 130px; height: 130px; display: grid; place-items: center; margin: 10px auto 16px; border-radius: 50%; background: conic-gradient(var(--cyan) 0 72%,#f1b65a 72% 87%,#ef7d68 87%); }
.donut::before { content: ""; width: 93px; height: 93px; border-radius: 50%; background: white; }
.donut div { position: absolute; text-align: center; }
.donut strong, .donut span { display: block; }
.donut strong { font: 700 24px "Manrope"; }
.donut span { color: #8c96a4; font-size: 8px; }
.legend { display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 8px; }
.legend span { color: #7e8998; }
.legend i { width: 6px; height: 6px; display: inline-block; margin-right: 6px; border-radius: 50%; }
.legend strong { color: #4b576a; }

.academy-intro { margin: -34px -34px 0; padding: 48px 43px 34px; color: white; background: #131c30; }
.academy-intro .eyebrow { color: #ef9c8e; }
.academy-intro h1 { color: white; font-size: 32px; }
.academy-intro p { color: #aab4c5; }
.season-tag { padding: 9px 13px; border: 1px solid rgba(255,255,255,.18); color: #9da9ba; font-size: 8px; letter-spacing: .1em; }
.season-tag strong { display: block; margin-top: 3px; color: white; font-size: 9px; }
.featured-show { position: relative; min-height: 400px; margin: 0 -34px; overflow: hidden; color: white; background: radial-gradient(circle at 78% 48%,rgba(35,209,195,.24),transparent 24%),radial-gradient(circle at 82% 48%,transparent 0 18%,rgba(255,255,255,.12) 18.4% 18.8%,transparent 19.2% 24%,rgba(255,255,255,.08) 24.4% 24.8%,transparent 25.2%),linear-gradient(135deg,#142238,#0a4c5c); }
.featured-show::before { content: "01"; position: absolute; right: 8%; top: -28px; z-index: 1; color: rgba(255,255,255,.06); font: 800 330px/1 "Manrope"; }
.featured-show::after { content: ""; position: absolute; width: 460px; height: 460px; right: 9%; top: -45px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: inset 0 0 100px rgba(239,125,104,.15),0 0 100px rgba(239,125,104,.1); }
.show-overlay { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg,rgba(7,16,30,.96) 0%,rgba(8,19,35,.82) 38%,rgba(8,19,35,.15) 78%); }
.show-content { position: relative; z-index: 2; max-width: 470px; padding: 68px 0 0 44px; }
.show-content > span { color: #f1a496; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.show-content h2 { margin: 12px 0; font: 800 48px/1.03 "Manrope"; letter-spacing: -.05em; }
.show-content p { max-width: 410px; color: #bdc3ce; font-size: 11px; line-height: 1.6; }
.watch-button { display: inline-flex; align-items: center; gap: 7px; margin-top: 13px; padding: 11px 16px; border: 0; border-radius: 8px; color: #1a2232; background: white; cursor: pointer; font-size: 9px; font-weight: 700; }
.watch-button svg { width: 15px; fill: #1a2232; }
.show-meta { position: absolute; z-index: 2; right: 35px; bottom: 25px; display: flex; gap: 8px; }
.show-meta span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.18); border-radius: 4px; color: #bcc5d3; font-size: 7px; }
.academy-section { padding-top: 28px; }
.academy-section .panel-header > span { color: #8791a0; font-size: 9px; }
.episode-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 16px; }
.episode-card { position: relative; cursor: pointer; }
.episode-card.upcoming { cursor: default; opacity: .68; }
.episode-thumb { position: relative; height: 140px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; color: white; }
.episode-thumb::after { content: ""; position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(-45deg,transparent 0 15px,rgba(255,255,255,.08) 15px 17px); }
.thumb-1 { background: linear-gradient(135deg,#1f6672,#153445); }
.thumb-2 { background: linear-gradient(135deg,#745391,#292b54); }
.thumb-3 { background: linear-gradient(135deg,#aa684c,#433345); }
.thumb-4 { background: linear-gradient(135deg,#d2715e,#5b3b68); }
.episode-thumb > span { position: absolute; left: 13px; top: 9px; font: 800 17px "Manrope"; opacity: .75; }
.episode-thumb > i { position: relative; z-index: 1; width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: white; background: rgba(8,19,35,.55); font-style: normal; font-size: 12px; }
.episode-thumb i svg { width: 16px; fill: white; }
.episode-card h3 { margin: 9px 0 3px; font: 700 11px "Manrope"; }
.episode-card p { margin: 0; color: #8993a1; font-size: 8px; }
.episode-card > b { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: #dfe4ea; }
.episode-card > b em { display: block; height: 100%; background: var(--coral); }

.episode-player-backdrop { position: fixed; z-index: 130; inset: 0; display: none; align-items: center; justify-content: center; padding: 25px; background: rgba(2,10,20,.88); backdrop-filter: blur(10px); }
.episode-player-backdrop.open { display: flex; animation: fadeIn .22s ease; }
.episode-player-shell { position: relative; width: min(1050px,100%); overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: #071323; box-shadow: 0 30px 100px rgba(0,0,0,.55); }
.episode-close { position: absolute; z-index: 8; top: 12px; right: 14px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: white; background: rgba(4,13,26,.58); cursor: pointer; font-size: 22px; }
.episode-stage { position: relative; aspect-ratio: 16/9; overflow: hidden; color: white; background: linear-gradient(#5fbbca 0 64%,#d9b584 64%); }
.episode-animation { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; display: block; }
.cinematic-frame { position: absolute; z-index: 1; inset: -3%; width: 106%; height: 106%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity 1.15s ease; }
.cinematic-frame.active { opacity: 1; animation: cinematicCamera 18s ease-out forwards; }
.cinematic-scene-1 .cinematic-frame.active, .cinematic-scene-4 .cinematic-frame.active { transform-origin: 64% 48%; }
.cinematic-scene-2 .cinematic-frame.active, .cinematic-scene-3 .cinematic-frame.active { transform-origin: 57% 51%; }
.cinematic-scene-5 .cinematic-frame.active { transform-origin: 72% 44%; }
@keyframes cinematicCamera { from { transform: scale(1.03); } to { transform: scale(1.12) translate3d(-.7%,-.3%,0); } }
.cinematic-grain { position: absolute; z-index: 3; inset: -30%; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: filmGrain .3s steps(2) infinite; }
@keyframes filmGrain { 0% { transform: translate(0); } 25% { transform: translate(2%,-3%); } 50% { transform: translate(-3%,2%); } 75% { transform: translate(3%,3%); } }
.cinematic-bars::before, .cinematic-bars::after { content: ""; position: absolute; z-index: 18; left: 0; right: 0; height: 3.5%; background: #02070d; }
.cinematic-bars::before { top: 0; }
.cinematic-bars::after { bottom: 0; }
.cartoon-sky { position: absolute; inset: 0 0 35%; overflow: hidden; background: linear-gradient(#48a7c5,#f7bb83 80%); }
.cartoon-sky::after { content: ""; position: absolute; right: 8%; bottom: -35px; width: 105px; height: 105px; border-radius: 50%; background: #ffe398; box-shadow: 0 0 55px #ffd17c; }
.cartoon-sky i { position: absolute; width: 120px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.45); animation: cloudFloat 16s linear infinite; }
.cartoon-sky i:nth-child(1) { top: 13%; left: -14%; }
.cartoon-sky i:nth-child(2) { top: 28%; left: 43%; animation-delay: -8s; transform: scale(.7); }
.cartoon-sky i:nth-child(3) { top: 9%; left: 76%; animation-delay: -13s; transform: scale(.45); }
@keyframes cloudFloat { to { translate: 1100px 0; } }
.cartoon-office { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(15,46,72,.92) 0 5%,transparent 5% 95%,rgba(15,46,72,.9) 95%),linear-gradient(0deg,#c99166 0 7%,transparent 7%); }
.office-window { position: absolute; inset: 7% 5% 35%; border: 13px solid #183b58; border-bottom-width: 19px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); }
.office-window::before, .office-window::after { content: ""; position: absolute; background: #183b58; }
.office-window::before { width: 10px; height: 100%; left: 50%; }
.office-window::after { width: 100%; height: 8px; top: 53%; }
.office-window span { position: absolute; inset: 0; opacity: .35; background: repeating-linear-gradient(90deg,transparent 0 80px,#204b68 80px 102px); }
.office-desk { position: absolute; left: 8%; right: 7%; bottom: 4%; height: 24%; border-radius: 12px 12px 0 0; background: linear-gradient(#9c6546,#71462f); box-shadow: 0 -7px #bb805a,0 18px 30px rgba(24,36,47,.28); }
.office-clock { position: absolute; right: 8%; top: 9%; width: 52px; height: 52px; z-index: 2; border: 5px solid #f3e5ca; border-radius: 50%; background: #173750; box-shadow: 0 5px 12px rgba(0,0,0,.18); }
.office-clock::before, .office-clock b { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 15px; border-radius: 3px; background: #f3e5ca; transform-origin: 50% 0; transform: rotate(180deg); }
.office-clock b { height: 11px; transform: rotate(-55deg); }
.office-plant { position: absolute; left: 7%; bottom: 26%; z-index: 2; width: 75px; height: 95px; }
.office-plant::after { content: ""; position: absolute; left: 18px; bottom: 0; width: 42px; height: 37px; border-radius: 5px 5px 16px 16px; background: #d96f5d; }
.office-plant i { position: absolute; left: 31px; bottom: 28px; width: 25px; height: 55px; border-radius: 100% 0 100% 0; background: #2f9978; transform-origin: bottom; }
.office-plant i:nth-child(1) { transform: rotate(-35deg); }
.office-plant i:nth-child(2) { transform: rotate(17deg); }
.office-plant i:nth-child(3) { transform: rotate(55deg) scale(.8); }
.cartoon-email { position: absolute; z-index: 4; left: 43%; top: 32%; width: 145px; color: #ffde68; filter: drop-shadow(0 0 15px rgba(255,210,64,.62)); opacity: 0; transform: translateY(-90px) rotate(-10deg) scale(.5); }
.cartoon-email svg { width: 100%; height: auto; fill: #b66c2d; stroke: #ffdd6d; stroke-width: 6px; }
.cartoon-email > span { position: absolute; right: -18px; top: -17px; padding: 7px 8px; border: 3px solid white; border-radius: 20px; color: white; background: #df5f58; font: 800 10px "Manrope"; }
.email-shine { position: absolute; inset: -25px; border: 3px solid rgba(255,225,103,.38); border-radius: 50%; animation: emailPulse 1.5s infinite; }
@keyframes emailPulse { 50% { transform: scale(1.16); opacity: .15; } }
.cartoon-nina { position: absolute; z-index: 5; left: 17%; bottom: 18%; width: 130px; height: 250px; transform-origin: bottom; }
.nina-body { position: absolute; left: 35px; bottom: 0; width: 78px; height: 135px; border: 5px solid #17334b; border-radius: 40px 40px 12px 12px; background: #20a9a2; }
.nina-head { position: absolute; left: 37px; top: 31px; width: 75px; height: 84px; border: 5px solid #17334b; border-radius: 47% 47% 43% 43%; background: #bd754e; }
.nina-hair { position: absolute; z-index: 2; left: 28px; top: 14px; width: 95px; height: 63px; border: 5px solid #17334b; border-radius: 60% 60% 42% 36%; background: #352640; }
.nina-hair::before, .nina-hair::after { content: ""; position: absolute; width: 28px; height: 34px; border-radius: 50%; background: #352640; }
.nina-hair::before { left: -10px; top: 29px; }
.nina-hair::after { right: -8px; top: 25px; }
.nina-head i { position: absolute; z-index: 3; top: 35px; width: 8px; height: 11px; border-radius: 50%; background: #17283b; animation: cartoonBlink 4s infinite; }
.nina-head i:first-child { left: 18px; }
.nina-head i:nth-child(2) { right: 18px; }
.nina-head b { position: absolute; left: 29px; bottom: 16px; width: 19px; height: 8px; border-bottom: 4px solid #71382f; border-radius: 50%; }
@keyframes cartoonBlink { 48%,52% { transform: scaleY(.08); } }
.nina-arm { position: absolute; z-index: 4; right: 2px; bottom: 63px; width: 20px; height: 85px; border: 5px solid #17334b; border-radius: 18px; background: #bd754e; transform-origin: bottom; transform: rotate(-22deg); }
.nina-magnifier { position: absolute; z-index: 6; right: -38px; top: 62px; width: 45px; height: 45px; border: 7px solid #f6d166; border-radius: 50%; opacity: 0; }
.nina-magnifier::after { content: ""; position: absolute; left: -28px; bottom: -34px; width: 44px; height: 8px; border-radius: 8px; background: #f6d166; transform: rotate(48deg); }
.cartoon-iris { position: absolute; z-index: 7; left: 33%; top: 23%; width: 74px; height: 74px; border: 3px solid #7ff3e7; border-radius: 50%; background: rgba(20,103,116,.8); box-shadow: 0 0 28px #35d7cf; opacity: 0; transform: scale(.2); }
.cartoon-iris::before, .cartoon-iris::after { content: ""; position: absolute; inset: 9px -9px; border: 2px solid #7ff3e7; border-radius: 50%; transform: rotate(60deg); }
.cartoon-iris::after { transform: rotate(-60deg); }
.cartoon-iris i, .cartoon-iris b { position: absolute; z-index: 2; top: 28px; width: 7px; height: 10px; border-radius: 50%; background: white; }
.cartoon-iris i { left: 22px; }
.cartoon-iris b { right: 22px; }
.cartoon-iris span { position: absolute; z-index: 2; left: 29px; bottom: 17px; width: 16px; height: 7px; border-bottom: 3px solid white; border-radius: 50%; }
.cartoon-villain { position: absolute; z-index: 6; right: 10%; bottom: 20%; width: 125px; height: 205px; opacity: 0; transform: translateX(190px) rotate(14deg); }
.villain-body { position: absolute; left: 26px; bottom: 0; width: 77px; height: 105px; border: 5px solid #351b47; border-radius: 43px 43px 16px 16px; background: #8a4d9f; }
.villain-head { position: absolute; left: 28px; top: 42px; width: 72px; height: 70px; border: 5px solid #351b47; border-radius: 47%; background: #d86a5d; }
.villain-hat { position: absolute; z-index: 3; left: 15px; top: 9px; width: 98px; height: 46px; border: 5px solid #351b47; border-radius: 55% 55% 10px 10px; background: #633576; transform: rotate(-6deg); }
.villain-hat::after { content: ""; position: absolute; left: -15px; right: -15px; bottom: -7px; height: 12px; border: 4px solid #351b47; border-radius: 50%; background: #633576; }
.villain-head i { position: absolute; top: 25px; width: 7px; height: 9px; border-radius: 50%; background: #351b47; }
.villain-head i:first-child { left: 17px; }
.villain-head i:nth-child(2) { right: 17px; }
.villain-head b { position: absolute; left: 22px; bottom: 11px; width: 29px; height: 13px; border-top: 5px solid #351b47; border-radius: 50%; }
.villain-hook { position: absolute; right: -29px; bottom: 28px; width: 48px; height: 112px; border-right: 8px solid #f2b74c; border-bottom: 8px solid #f2b74c; border-radius: 0 0 40px; transform: rotate(-12deg); }
.cartoon-speech { position: absolute; z-index: 10; right: 21%; top: 14%; max-width: 280px; padding: 12px 15px; border: 4px solid #17334b; border-radius: 18px; color: #273a50; background: white; font: 700 13px/1.35 "Manrope"; opacity: 0; transform: scale(.5); }
.cartoon-speech::after { content: ""; position: absolute; right: 25px; bottom: -18px; width: 21px; height: 21px; border-right: 4px solid #17334b; border-bottom: 4px solid #17334b; background: white; transform: rotate(45deg); }
.cartoon-clues { position: absolute; z-index: 8; left: 39%; top: 20%; display: flex; gap: 12px; }
.cartoon-clue { width: 100px; padding: 10px; border: 4px solid #17334b; border-radius: 12px; color: #20364c; background: #fff5d9; box-shadow: 0 7px 0 rgba(23,51,75,.35); text-align: center; opacity: 0; transform: translateY(-35px) rotate(-8deg); }
.cartoon-clue strong { width: 27px; height: 27px; display: grid; place-items: center; margin: auto auto 5px; border-radius: 50%; color: white; background: #e46559; font: 800 15px "Manrope"; }
.cartoon-clue span { font-size: 9px; font-weight: 800; }
.cartoon-net { position: absolute; z-index: 9; right: 6%; bottom: 12%; width: 180px; height: 180px; border: 7px dashed #75e3da; border-radius: 50% 50% 10% 50%; opacity: 0; transform: translateY(-330px) rotate(20deg); }
.cartoon-confetti { position: absolute; z-index: 12; inset: 0; pointer-events: none; opacity: 0; }
.cartoon-confetti i { position: absolute; top: -10%; width: 12px; height: 24px; background: #f2c84f; animation: confettiFall 2.5s linear infinite; }
.cartoon-confetti i:nth-child(2) { left: 20%; background: #ee6d61; animation-delay: -.4s; }
.cartoon-confetti i:nth-child(3) { left: 38%; background: #45c8bd; animation-delay: -1.1s; }
.cartoon-confetti i:nth-child(4) { left: 57%; background: #9664b5; animation-delay: -.8s; }
.cartoon-confetti i:nth-child(5) { left: 76%; background: #ef7d68; animation-delay: -1.6s; }
.cartoon-confetti i:nth-child(6) { left: 91%; background: #7ae1d9; animation-delay: -.2s; }
@keyframes confettiFall { to { translate: 40px 660px; rotate: 520deg; } }
.episode-vignette { position: absolute; z-index: 13; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(3,13,26,.82),rgba(3,13,26,.25) 40%,transparent 66%),linear-gradient(0deg,rgba(2,8,16,.82),transparent 44%); }
.episode-stage.scene-0 .cartoon-email { animation: emailArrival 1.1s .5s forwards, emailHover 2s 1.6s ease-in-out infinite alternate; }
.episode-stage.scene-1 .cartoon-email, .episode-stage.scene-2 .cartoon-email, .episode-stage.scene-3 .cartoon-email { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }
.episode-stage.scene-1 .cartoon-villain, .episode-stage.scene-2 .cartoon-villain { animation: villainEntrance .8s forwards, villainBounce 1.3s .8s infinite alternate; }
.episode-stage.scene-1 .cartoon-speech, .episode-stage.scene-2 .cartoon-speech { animation: speechPop .45s .7s forwards; }
.episode-stage.scene-2 .nina-magnifier { animation: magnifierIn .45s forwards, inspectMove 2.6s .45s infinite alternate; }
.episode-stage.scene-2 .cartoon-clue { animation: cluePop .45s forwards; }
.episode-stage.scene-2 .clue-two { animation-delay: .35s; }
.episode-stage.scene-2 .clue-three { animation-delay: .7s; }
.episode-stage.scene-3 .cartoon-clue, .episode-stage.scene-4 .cartoon-clue, .episode-stage.scene-5 .cartoon-clue { animation: cluePop .45s forwards; }
.episode-stage.scene-3 .clue-two, .episode-stage.scene-4 .clue-two, .episode-stage.scene-5 .clue-two { animation-delay: .25s; }
.episode-stage.scene-3 .clue-three, .episode-stage.scene-4 .clue-three, .episode-stage.scene-5 .clue-three { animation-delay: .5s; }
.episode-stage.scene-3 .cartoon-iris, .episode-stage.scene-4 .cartoon-iris, .episode-stage.scene-5 .cartoon-iris { animation: irisPop .5s forwards, irisFloat 1.4s .5s ease-in-out infinite alternate; }
.episode-stage.scene-3 .cartoon-speech, .episode-stage.scene-4 .cartoon-speech, .episode-stage.scene-5 .cartoon-speech { animation: speechPop .45s .5s forwards; }
.episode-stage.scene-3 .cartoon-villain { opacity: 1; transform: translateX(0); animation: villainWobble .45s infinite alternate; }
.episode-stage.scene-4 .cartoon-villain { opacity: 1; transform: translateX(0); animation: villainWobble .35s infinite alternate; }
.episode-stage.scene-4 .cartoon-net { animation: netDrop .8s forwards; }
.episode-stage.scene-5 .cartoon-villain { opacity: 1; transform: translateX(0); animation: villainExit .7s forwards; }
.episode-stage.scene-5 .cartoon-iris { opacity: 1; transform: scale(1); }
.episode-stage.scene-5 .cartoon-confetti { opacity: 1; }
.episode-stage.scene-5 .cartoon-nina { animation: ninaCelebrate .55s infinite alternate; }
@keyframes emailArrival { to { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); } }
@keyframes emailHover { to { translate: 0 -9px; rotate: 2deg; } }
@keyframes villainEntrance { to { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes villainBounce { to { translate: 0 -10px; rotate: -3deg; } }
@keyframes villainWobble { to { rotate: 5deg; translate: 3px 0; } }
@keyframes villainExit { to { opacity: 0; translate: 260px 80px; rotate: 35deg; } }
@keyframes speechPop { to { opacity: 1; transform: scale(1); } }
@keyframes magnifierIn { to { opacity: 1; } }
@keyframes inspectMove { to { translate: 130px 28px; rotate: -15deg; } }
@keyframes cluePop { to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes irisPop { to { opacity: 1; transform: scale(1); } }
@keyframes irisFloat { to { translate: 0 -10px; } }
@keyframes netDrop { to { opacity: .9; transform: translateY(0) rotate(-8deg); } }
@keyframes ninaCelebrate { to { rotate: -3deg; translate: 0 -8px; } }
.episode-scene-number { position: absolute; z-index: 15; top: 22px; left: 28px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; color: #d7e2ee; background: rgba(7,19,35,.64); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.episode-scene-copy { position: absolute; z-index: 15; left: 4%; top: 17%; width: min(325px,34%); }
.episode-scene-copy > span { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.episode-scene-copy h2 { margin: 9px 0 8px; font: 800 clamp(23px,3.2vw,38px)/1.04 "Manrope"; letter-spacing: -.05em; text-shadow: 0 3px 25px rgba(0,0,0,.45); }
.episode-scene-copy p { margin: 0; color: #d1dbe7; font-size: clamp(9px,1.05vw,12px); line-height: 1.55; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.episode-caption { position: absolute; z-index: 16; left: 50%; bottom: 4.5%; width: min(780px,82%); padding: 9px 13px; border-radius: 6px; color: white; background: rgba(2,9,18,.82); transform: translateX(-50%); font-size: 11px; line-height: 1.5; text-align: center; }
.episode-learning { position: absolute; z-index: 16; right: 3%; bottom: 15%; width: 245px; padding: 13px; border: 2px solid rgba(29,201,197,.48); border-radius: 10px; color: #d4e5e9; background: rgba(5,29,39,.9); box-shadow: 0 12px 35px rgba(0,0,0,.18); font-size: 9px; line-height: 1.5; opacity: 0; transform: translateX(15px); transition: .45s ease; }
.episode-learning.visible { opacity: 1; transform: translateX(0); }
.episode-learning strong { display: block; margin-bottom: 5px; color: #68ddd7; font-size: 8px; letter-spacing: .1em; }
.episode-controls { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 0 18px; color: white; background: #081629; }
.episode-controls > button { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; color: white; background: rgba(255,255,255,.06); cursor: pointer; }
.episode-controls > button:hover, .episode-controls > button.active { color: var(--cyan); border-color: rgba(29,201,197,.4); background: rgba(29,201,197,.1); }
.episode-controls svg { width: 16px; }
.episode-progress-track { position: relative; height: 5px; flex: 1; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.14); cursor: pointer; }
.episode-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),#70e0dc); }
.episode-controls > span { width: 74px; color: #a9b5c4; font-size: 9px; text-align: center; }

.training-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; }
.training-summary article { padding: 20px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.training-summary span { color: #8a94a3; font-size: 8px; font-weight: 800; letter-spacing: .11em; }
.training-summary strong { display: block; margin: 7px 0 3px; color: #15243a; font: 800 27px "Manrope"; }
.training-summary p { margin: 0; color: #858f9e; font-size: 9px; line-height: 1.5; }
.training-summary > article > i, .training-body > i { display: block; height: 4px; margin-top: 14px; overflow: hidden; border-radius: 4px; background: #e7ebef; }
.training-summary i b, .training-body > i b { display: block; height: 100%; border-radius: 4px; background: var(--cyan); }
.training-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.training-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: 0 3px 12px rgba(19,36,65,.025); }
.training-art { position: relative; height: 135px; display: grid; place-items: center; color: white; }
.training-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,transparent,rgba(255,255,255,.1)); }
.training-art > span { font: 800 35px "Manrope"; letter-spacing: -.05em; opacity: .92; }
.training-art > i { position: absolute; z-index: 1; top: 12px; right: 12px; padding: 5px 7px; border-radius: 4px; color: white; background: rgba(7,20,38,.55); font-size: 6px; font-style: normal; font-weight: 800; letter-spacing: .08em; }
.training-ai { background: linear-gradient(135deg,#146a78,#162d4a); }
.training-cyber { background: linear-gradient(135deg,#6b4e8d,#28304d); }
.training-grc { background: linear-gradient(135deg,#1c6472,#193d57); }
.training-body { padding: 17px; }
.training-body > span { color: #168884; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.training-body h3 { min-height: 32px; margin: 6px 0; font: 700 13px/1.3 "Manrope"; }
.training-body p { min-height: 31px; margin: 0; color: #87919f; font-size: 9px; line-height: 1.5; }
.training-body > div { display: flex; justify-content: space-between; margin-top: 14px; color: #798494; font-size: 8px; }
.training-body > div b { color: #3f4d61; }

.roadmap-badge { color: #8c661d; background: #fff1ce; }
.integration-hero { min-height: 230px; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 30px; padding: 30px; color: white; border: 0; background: linear-gradient(135deg,#102440,#0e3144); }
.integration-hero h2 { margin: 8px 0; font: 700 24px "Manrope"; }
.integration-hero p { max-width: 500px; color: #a7b5c6; font-size: 10px; line-height: 1.6; }
.integration-flow { display: flex; align-items: center; justify-content: center; }
.integration-flow > i { width: 55px; height: 1px; background: linear-gradient(90deg,#476078,var(--cyan)); }
.source-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.source-stack span { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; color: #c4d0dd; background: rgba(255,255,255,.05); font-size: 8px; font-weight: 700; }
.flow-core { width: 80px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(29,201,197,.4); border-radius: 50%; background: rgba(29,201,197,.08); box-shadow: 0 0 28px rgba(29,201,197,.1); }
.flow-core .brand-mark { transform: scale(.65); }
.flow-core small { color: var(--cyan); font-size: 7px; font-weight: 800; letter-spacing: .15em; }
.flow-output { display: flex; align-items: center; gap: 7px; padding: 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 9px; background: rgba(255,255,255,.05); }
.flow-output strong { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #10253d; background: var(--cyan); font-size: 12px; }
.flow-output span { color: #ced8e4; font-size: 8px; }
.catalog-header { display: flex; align-items: end; justify-content: space-between; margin: 28px 0 14px; }
.catalog-header h2 { margin: 4px 0 0; font: 700 16px "Manrope"; }
.catalog-search { width: 220px; height: 35px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: #929aa6; background: white; font-size: 9px; }
.catalog-search svg { width: 14px; }
.integration-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.integration-grid article { display: flex; align-items: center; gap: 12px; padding: 15px; }
.integration-logo { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 9px; color: white; font-size: 9px; font-weight: 800; }
.integration-logo.aws { background: #243145; }
.integration-logo.azure { background: #1789d4; }
.integration-logo.github { background: #1f2732; }
.integration-logo.okta { background: #3362d8; }
.integration-logo.jira { background: #2c6ae4; }
.integration-logo.sentinel { background: #8a55bd; }
.integration-grid article > div:nth-child(2) { flex: 1; }
.integration-grid h3 { margin: 0; font: 700 10px "Manrope"; }
.integration-grid p { margin: 3px 0 0; color: #939ca9; font-size: 8px; }
.integration-grid article > span { padding: 4px 6px; border-radius: 4px; color: #737f91; background: #edf0f3; font-size: 7px; }
.integration-hero-live { margin-bottom: 14px; }
.integration-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.integration-kpis > div { min-height: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.05); text-align: center; }
.integration-kpis strong { color: #6de0da; font: 800 29px "Manrope"; }
.integration-kpis span { margin-top: 4px; color: #aebdca; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.integration-cost-guide { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 24px; }
.integration-cost-guide > div { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: white; }
.integration-cost-guide i { width: 10px; height: 10px; flex: 0 0 10px; margin-top: 2px; border-radius: 50%; }
.cost-guide-free i { background: #2bad7b; box-shadow: 0 0 0 4px #e4f7ef; }
.cost-guide-usage i { background: #e2a63e; box-shadow: 0 0 0 4px #fff4dc; }
.cost-guide-licensed i { background: #77879d; box-shadow: 0 0 0 4px #edf1f5; }
.integration-cost-guide strong { color: #3d4a5e; font-size: 9px; }
.integration-cost-guide p { margin: 4px 0 0; color: #86909d; font-size: 8px; line-height: 1.45; }
.integration-catalog-header { align-items: flex-end; }
.integration-search { width: min(350px,100%); height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #dfe4ea; border-radius: 8px; background: white; }
.integration-search svg { width: 15px; color: #84909f; }
.integration-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #3f4d61; background: transparent; font-size: 9px; }
.integration-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 15px; }
.integration-filters button { min-height: 32px; padding: 0 10px; border: 1px solid #dfe4e9; border-radius: 7px; color: #667387; background: white; cursor: pointer; font-size: 8px; font-weight: 700; }
.integration-filters button span { margin-left: 4px; color: #9aa4b0; }
.integration-filters button.active { color: white; border-color: #132a45; background: #132a45; }
.integration-filters button.active span { color: #74dcd7; }
.integration-grid-rich { align-items: stretch; }
.integration-grid-rich .integration-card { min-width: 0; display: flex; align-items: stretch; flex-direction: column; gap: 13px; padding: 17px; }
.integration-card-head { display: flex; align-items: center; gap: 10px; }
.integration-card-head .integration-logo { width: 64px; height: 64px; flex: 0 0 64px; border: 1px solid #e2e7ec; border-radius: 14px; box-shadow: 0 5px 15px rgba(18,37,61,.06); }
.brand-logo { position: relative; overflow: hidden; color: #536176 !important; background: white !important; }
.brand-logo svg { width: 49px; height: 49px; display: block; overflow: visible; }
.generic-logo { color: white; }
.generic-logo svg { width: 38px; height: 38px; }
.wordmark-logo { display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--brand-color) !important; background: white !important; }
.wordmark-logo strong { font: 900 18px/1 "Manrope"; letter-spacing: -.05em; }
.wordmark-logo small { max-width: 56px; margin-top: 4px; overflow: hidden; color: var(--brand-color); font-size: 7px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.integration-card-head > div:nth-child(2) { min-width: 0; flex: 1; }
.integration-card-head > div:nth-child(2) > span { color: #8c96a4; font-size: 6px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.integration-card-head h3 { margin-top: 4px; font-size: 12px; }
.integration-cost { width: max-content; padding: 5px 7px; border-radius: 5px; font-size: 6px; white-space: nowrap; }
.cost-free { color: #24795b; background: #e3f6ed; }
.cost-usage { color: #9b681e; background: #fff1d2; }
.cost-licensed { color: #627187; background: #edf1f5; }
.integration-data, .integration-automation { padding-top: 11px; border-top: 1px solid #edf0f3; }
.integration-data > span, .integration-automation > span { display: block; margin-bottom: 7px; color: #8b95a2; font-size: 6px; font-weight: 800; letter-spacing: .1em; }
.integration-data > div { display: flex; flex-wrap: wrap; gap: 5px; }
.integration-data em { padding: 4px 6px; border-radius: 5px; color: #4e6074; background: #f2f5f7; font-size: 7px; font-style: normal; }
.integration-automation p { min-height: 38px; margin: 0; color: #687589; font-size: 8px; line-height: 1.5; }
.integration-card > a { margin-top: auto; color: #117f7b; font-size: 7px; font-weight: 800; text-decoration: none; }
.integration-card > a:hover { text-decoration: underline; }
.integration-empty { grid-column: 1 / -1; padding: 45px; border: 1px dashed #d8dfe5; border-radius: 12px; color: #87919f; text-align: center; font-size: 9px; }
.integration-disclaimer { margin: 16px 0 0; padding: 11px 13px; border-left: 3px solid #e5aa43; color: #7b6950; background: #fff8ea; font-size: 8px; line-height: 1.5; }
.custom-integration-card { min-height: 310px; align-items: center !important; justify-content: center; padding: 25px !important; border: 1px dashed rgba(24,139,134,.48) !important; background: radial-gradient(circle at 50% 22%,rgba(29,201,197,.13),transparent 30%),linear-gradient(145deg,#f8fdfc,#eef8f7) !important; text-align: center; }
.custom-integration-mark { position: relative; width: 76px; height: 76px; display: grid; place-items: center; margin-bottom: 4px; border: 1px solid rgba(24,139,134,.28); border-radius: 50%; background: white; box-shadow: 0 10px 30px rgba(20,118,115,.12); }
.custom-integration-mark span { position: relative; z-index: 2; color: #168984; font: 300 40px/1 "Manrope"; }
.custom-integration-mark i { position: absolute; inset: 10px -5px; border: 1px solid rgba(29,201,197,.38); border-radius: 50%; transform: rotate(55deg); }
.custom-integration-mark i:last-child { transform: rotate(-55deg); }
.custom-integration-card > span { color: #188781; font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.custom-integration-card h3 { margin: 0; color: #17364b; font: 800 19px "Manrope"; }
.custom-integration-card p { max-width: 270px; margin: 0; color: #617387; font-size: 9px; line-height: 1.6; }
.custom-integration-button { min-height: 37px; padding: 0 14px; border: 0; border-radius: 8px; color: white; background: #168984; cursor: pointer; font-size: 8px; font-weight: 800; }
.custom-integration-button:hover { background: #0e716d; }
.integration-logo.gitlab { background: #e96d42; }
.integration-logo.slack { background: #6d3f77; }
.integration-logo.webhook { background: #168781; }
.integration-logo.files { background: #507089; }
.integration-logo.gcp { background: #3976d7; }
.integration-logo.datadog { background: #7048a8; }
.integration-logo.crowdstrike { background: #cf3434; }
.integration-logo.snowflake { color: #174766; background: #82d7f7; }
.integration-logo.m365 { background: #d65d32; }
.integration-logo.workspace { background: #3b83d6; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(6,17,33,.58); backdrop-filter: blur(6px); }
.modal-backdrop.open { display: flex; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { position: relative; width: min(520px,100%); padding: 31px; border-radius: 17px; background: white; box-shadow: 0 25px 80px rgba(4,15,30,.3); }
.modal .agent-label { color: #168783; }
.modal-close { position: absolute; right: 17px; top: 14px; border: 0; color: #87919f; background: transparent; cursor: pointer; font-size: 24px; }
.modal h2 { margin: 12px 0 6px; font: 700 23px "Manrope"; }
.modal-lead { margin: 0 0 20px; color: #7d8796; font-size: 10px; }
.briefing-list > div { display: flex; gap: 12px; padding: 13px 0; border-top: 1px solid #edf0f3; }
.briefing-list > div > span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #137e7a; background: #def4f2; font-size: 9px; font-weight: 800; }
.briefing-list strong { font-size: 10px; }
.briefing-list p { margin: 3px 0 0; color: #929aa6; font-size: 8px; }
.modal-primary { width: 100%; margin-top: 18px; }
.search-modal { width: min(570px,100%); overflow: hidden; border-radius: 14px; background: white; box-shadow: 0 25px 80px rgba(4,15,30,.3); }
.search-input { height: 58px; display: flex; align-items: center; gap: 10px; padding: 0 17px; border-bottom: 1px solid var(--line); }
.search-input svg { width: 18px; color: #7d8795; }
.search-input input { flex: 1; border: 0; outline: 0; color: #334055; font-size: 12px; }
.search-modal > p { margin: 14px 17px 7px; color: #9aa2ae; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.search-modal > button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 17px; border: 0; background: white; cursor: pointer; text-align: left; }
.search-modal > button:hover { background: #f6f8fa; }
.search-modal > button > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: #167e7a; background: #dff4f2; font-size: 8px; font-weight: 800; }
.search-modal strong, .search-modal small { display: block; }
.search-modal strong { font-size: 10px; }
.search-modal small { margin-top: 2px; color: #929aa6; font-size: 8px; }
.toast { position: fixed; z-index: 110; right: 25px; bottom: 25px; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 10px; color: white; background: #12233d; box-shadow: 0 12px 40px rgba(4,15,30,.25); transform: translateY(100px); opacity: 0; transition: .3s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #0c2a33; background: var(--cyan); font-weight: 800; }
.toast strong, .toast small { display: block; }
.toast strong { font-size: 9px; }
.toast small { margin-top: 2px; color: #9eacbf; font-size: 8px; }

.iris-chat {
  position: fixed;
  z-index: 105;
  top: 0;
  right: 0;
  width: min(455px,100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: #f6f8fa;
  box-shadow: -20px 0 60px rgba(5,18,35,.22);
  transform: translateX(105%);
  transition: transform .28s ease;
}
.iris-chat.open { transform: translateX(0); }
.chat-backdrop { position: fixed; z-index: 104; inset: 0; visibility: hidden; opacity: 0; background: rgba(6,17,33,.42); backdrop-filter: blur(3px); transition: .25s ease; }
.chat-backdrop.open { visibility: visible; opacity: 1; }
.iris-chat-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; color: white; background: linear-gradient(135deg,#0a1930,#123b50); }
.iris-chat-header > button { width: 32px; height: 32px; border: 0; border-radius: 8px; color: #afbdcd; background: rgba(255,255,255,.07); cursor: pointer; font-size: 21px; }
.iris-chat-identity { display: flex; align-items: center; gap: 11px; }
.iris-mini-orb { position: relative; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(29,201,197,.4); border-radius: 50%; box-shadow: 0 0 18px rgba(29,201,197,.15); }
.iris-mini-orb::before, .iris-mini-orb::after { content: ""; position: absolute; inset: 7px -3px; border: 1px solid rgba(29,201,197,.45); border-radius: 50%; transform: rotate(60deg); }
.iris-mini-orb::after { transform: rotate(-60deg); }
.iris-mini-orb i { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px var(--cyan); }
.iris-chat-identity span, .iris-chat-identity strong, .iris-chat-identity small { display: block; }
.iris-chat-identity span { color: #75d7d3; font-size: 7px; font-weight: 800; letter-spacing: .13em; }
.iris-chat-identity strong { margin: 2px 0; font: 700 17px "Manrope"; }
.iris-chat-identity small { color: #9fb0c4; font-size: 8px; }
.iris-chat-identity small i { width: 5px; height: 5px; display: inline-block; margin-right: 4px; border-radius: 50%; background: #48c38e; }
.iris-kb-status { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 10px 17px; border-bottom: 1px solid #e1e6ec; background: white; }
.iris-kb-status > div { flex: 1; }
.iris-kb-status span, .iris-kb-status strong { display: block; }
.iris-kb-status span { color: #228c70; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.iris-kb-status strong { margin-top: 3px; color: #4d596c; font-size: 9px; }
.iris-kb-status button { padding: 5px 7px; border: 1px solid #dfe4e9; border-radius: 6px; color: #687487; background: #fafbfc; cursor: pointer; font-size: 7px; }
.iris-messages { flex: 1; overflow-y: auto; padding: 18px 17px 25px; scroll-behavior: smooth; }
.chat-message { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; animation: messageIn .24s ease; }
@keyframes messageIn { from { opacity: 0; transform: translateY(5px); } }
.chat-message.user-message { justify-content: flex-end; }
.chat-avatar { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 8px; color: #082539; background: var(--cyan); font: 800 10px "Manrope"; }
.message-bubble { max-width: 355px; padding: 11px 12px; border: 1px solid #e2e7ec; border-radius: 4px 12px 12px 12px; color: #4d596a; background: white; box-shadow: 0 3px 10px rgba(17,35,60,.035); }
.user-message .message-bubble { color: white; border: 0; border-radius: 12px 4px 12px 12px; background: #18304e; }
.message-bubble p { margin: 0 0 7px; font-size: 10px; line-height: 1.55; }
.message-bubble p:last-child { margin-bottom: 0; }
.message-bubble strong { color: #253247; }
.user-message .message-bubble strong { color: white; }
.answer-intro { margin-bottom: 10px !important; }
.control-result { margin-top: 9px; padding-top: 9px; border-top: 1px solid #e9edf1; }
.control-result:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.control-result-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.control-result-header b { color: #087e7b; font-size: 8px; }
.control-result-header em { padding: 3px 5px; border-radius: 4px; color: #a55547; background: #ffebe7; font-size: 6px; font-style: normal; font-weight: 800; }
.control-result-header em.cobit-result-tag { color: #087d80; background: #def5f3; }
.control-result h4 { margin: 0 0 4px; color: #28364b; font: 700 10px "Manrope"; }
.control-result p { color: #647084; font-size: 9px; }
.answer-detail { margin-top: 7px; padding: 7px 8px; border-radius: 6px; background: #f5f8fa; }
.answer-detail span { display: block; margin-bottom: 3px; color: #7b8796; font-size: 7px; font-weight: 800; letter-spacing: .06em; }
.answer-detail p { margin: 0; font-size: 8px; }
.source-chip { display: inline-flex; margin-top: 8px; padding: 4px 6px; border-radius: 4px; color: #58687d; background: #eaf0f4; font-size: 7px; }
.suggested-questions { margin: 5px 0 15px 35px; }
.suggested-questions > span { display: block; margin-bottom: 7px; color: #8c96a4; font-size: 7px; font-weight: 800; letter-spacing: .1em; }
.suggested-questions button { display: block; width: 100%; margin: 5px 0; padding: 8px 10px; border: 1px solid #dce3e9; border-radius: 8px; color: #536074; background: white; cursor: pointer; font-size: 8px; text-align: left; }
.suggested-questions button:hover { color: #0b7776; border-color: #9edbd8; background: #f1fbfa; }
.typing-bubble { width: 52px; display: flex; gap: 4px; padding: 12px; }
.typing-bubble i { width: 5px; height: 5px; border-radius: 50%; background: #9aa5b4; animation: typing 1s infinite; }
.typing-bubble i:nth-child(2) { animation-delay: .15s; }
.typing-bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-3px); opacity: .55; } }
.iris-chat-form { padding: 12px 14px 14px; border-top: 1px solid #e0e5eb; background: white; }
.chat-input-wrap { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 11px; border: 1px solid #dce2e8; border-radius: 11px; background: #f9fafb; }
.chat-input-wrap:focus-within { border-color: #75cfcc; box-shadow: 0 0 0 3px rgba(29,201,197,.09); }
.chat-input-wrap textarea { max-height: 100px; flex: 1; resize: none; border: 0; outline: 0; color: #354257; background: transparent; font-size: 10px; line-height: 1.45; }
.chat-input-wrap button { width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 8px; color: #08253b; background: var(--cyan); cursor: pointer; }
.chat-input-wrap button svg { width: 15px; }
.iris-chat-form > small { display: block; margin-top: 6px; color: #9ba4b0; font-size: 7px; text-align: center; }
.kb-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin: 8px 0; }
.kb-summary div { padding: 8px 5px; border-radius: 6px; background: #f3f6f8; text-align: center; }
.kb-summary strong, .kb-summary span { display: block; }
.kb-summary strong { color: #16847f; font: 700 15px "Manrope"; }
.kb-summary span { margin-top: 2px; color: #7e8998; font-size: 6px; text-transform: uppercase; }

/* Dark theme */
body.theme-dark {
  --ink: #e7edf6;
  --muted: #9ba8ba;
  --line: #29384b;
  --bg: #0b1320;
  --navy: #07111f;
  --navy-2: #101d30;
  --shadow: 0 15px 45px rgba(0,0,0,.28);
  color: var(--ink);
  background: var(--bg);
}
.theme-dark .sidebar { background: #07111f; box-shadow: 10px 0 35px rgba(0,0,0,.2); }
.theme-dark .main-content { background: #0b1320; }
.theme-dark .topbar { border-color: #273548; background: rgba(11,19,32,.92); }
.theme-dark .breadcrumb { color: #78879a; }
.theme-dark .breadcrumb b { color: #526176; }
.theme-dark .breadcrumb strong { color: #d8e1ec; }
.theme-dark .language-picker, .theme-dark .theme-picker, .theme-dark .search-trigger, .theme-dark .icon-button,
.theme-dark kbd { border-color: #334258; color: #aab6c6; background: #121e2e; }
.theme-dark .language-picker select, .theme-dark .theme-picker select { color: #dce5ef; }
.theme-dark .primary-button { color: #071521; background: #31d2cd; }
.theme-dark .user-access-stats article, .theme-dark .access-profile-grid article, .theme-dark .user-access-panel { border-color: #263447; background: #111d2c; box-shadow: none; }
.theme-dark .user-access-toolbar, .theme-dark .user-access-row { border-color: #263447; }
.theme-dark .user-access-toolbar label, .theme-dark .user-access-head { border-color: #263447; background: #0e1928; }
.theme-dark .user-access-toolbar select, .theme-dark .user-access-row select, .theme-dark .tenant-user-action,
.theme-dark .tenant-modal-field input, .theme-dark .tenant-modal-field select, .theme-dark .tenant-modal-actions > button:not(.primary-button) { border-color: #33445a; color: #dce6f2; background: #111d2c; }
.theme-dark .tenant-user-action:hover { color: #4addd7; background: #15283a; }
.theme-dark .page-intro h1, .theme-dark .card-heading h2, .theme-dark .panel-header h2,
.theme-dark .overview-framework-heading h2, .theme-dark .framework-category-heading h2,
.theme-dark .framework-card h3, .theme-dark .training-summary strong, .theme-dark .workpaper-topbar h1,
.theme-dark .workpaper-section h2, .theme-dark .mini-panel h3, .theme-dark .control-result h4 {
  color: #edf3fa;
}
.theme-dark .page-intro p, .theme-dark .overview-framework-heading p, .theme-dark .framework-card p,
.theme-dark .grc-description, .theme-dark .mini-panel p, .theme-dark .score-copy p {
  color: #97a5b8;
}
.theme-dark .overview-framework-panel {
  border-color: #2b3a4e;
  background: linear-gradient(145deg,#111d2d,#0d1827);
  box-shadow: 0 8px 25px rgba(0,0,0,.18);
}
.theme-dark .posture-card, .theme-dark .iris-card, .theme-dark .metric-card, .theme-dark .panel,
.theme-dark .orchestrator-card, .theme-dark .agent-card, .theme-dark .integration-hero,
.theme-dark .integration-grid article, .theme-dark .overview-framework-card, .theme-dark .cobit-stats div,
.theme-dark .grc-library-stats > div, .theme-dark .framework-card, .theme-dark .module-table,
.theme-dark .workpaper-topbar, .theme-dark .workpaper-section, .theme-dark .mini-panel,
.theme-dark .training-summary article, .theme-dark .training-card, .theme-dark .integration-cost-guide > div {
  border-color: #29394e;
  background: #111d2d;
  box-shadow: 0 7px 22px rgba(0,0,0,.16);
}
.theme-dark .score-ring::before, .theme-dark .donut::before { background: #111d2d; }
.theme-dark .score-ring strong, .theme-dark .donut strong, .theme-dark .score-factors strong,
.theme-dark .overview-framework-stats strong, .theme-dark .legend strong { color: #e2eaf4; }
.theme-dark .overview-framework-stats div, .theme-dark .answer-detail, .theme-dark .kb-summary div {
  background: #172538;
}
.theme-dark .framework-detail-meta span { border-color: #2d3e54; color: #c6d2e0; background: #0e1928; }
.theme-dark .framework-detail-modal section p { color: #aebacc; }
.theme-dark .framework-source-link { color: #6ce0dc; border-color: #286b71; background: #102c37; }
.theme-dark .evidence-status-summary > div { border-color: #29394e; background: #111d2d; }
.theme-dark .evidence-file-chip { border-color: #32445a; background: #152235; }
.theme-dark .evidence-file-chip > button:first-child { color: #c6d2e0; }
.theme-dark .evidence-file-remove { color: #d49ba5; border-color: #32445a; background: #111d2d; }
.theme-dark .evidence-upload-button { color: #62dcd7; border-color: #286f73; background: #102d36; }
.theme-dark .evidence-status-select { color: #d3deea; border-color: #35465b; background: #142133; }
.theme-dark .workpaper-kpis > div, .theme-dark .workpaper-catalog-toolbar label,
.theme-dark .workpaper-catalog-toolbar select { border-color: #29394e; background: #111d2d; }
.theme-dark .workpaper-export { color: #65ddd8; border-color: #286f73; background: #102d36; }
.theme-dark .workpaper-evidence-table, .theme-dark .workpaper-evidence-row { border-color: #2d3c50; }
.theme-dark .workpaper-evidence-head { color: #8f9daf; background: #0e1928; }
.theme-dark .workpaper-attachment-list button { color: #c6d2e0; border-color: #34465b; background: #152235; }
.theme-dark .framework-multiselect summary, .theme-dark .framework-select-popover,
.theme-dark .ghost-button, .theme-dark .cobit-search, .theme-dark .domain-filters button,
.theme-dark .grc-framework-filter, .theme-dark .cobit-control-row, .theme-dark .cobit-pagination button,
.theme-dark .framework-summary-strip button, .theme-dark .framework-search, .theme-dark .framework-all,
.theme-dark .repository-row, .theme-dark .catalog-search, .theme-dark .integration-search,
.theme-dark .integration-filters button, .theme-dark .modal, .theme-dark .search-modal,
.theme-dark .search-modal > button, .theme-dark .iris-kb-status, .theme-dark .message-bubble,
.theme-dark .suggested-questions button, .theme-dark .iris-chat-form {
  border-color: #314156;
  color: #c9d4e2;
  background: #121f30;
}
.theme-dark .framework-select-top { border-color: #2d3c50; }
.theme-dark .framework-select-list label:hover, .theme-dark .module-row:hover,
.theme-dark .search-modal > button:hover { background: #18273a; }
.theme-dark .module-table-header, .theme-dark .sample-table th { color: #8f9daf; background: #0e1928; }
.theme-dark .module-row, .theme-dark .sample-table td { border-color: #26364a; }
.theme-dark .workpaper-field input, .theme-dark .workpaper-field textarea, .theme-dark .workpaper-field select,
.theme-dark .attribute-row input, .theme-dark .attribute-row textarea, .theme-dark .sample-table input,
.theme-dark .chat-input-wrap, .theme-dark .chat-input-wrap textarea {
  border-color: #33445a;
  color: #d9e2ec;
  background: #0d1928;
}
.theme-dark .workpaper-field input:focus, .theme-dark .workpaper-field textarea:focus,
.theme-dark .workpaper-field select:focus, .theme-dark .attribute-row input:focus,
.theme-dark .attribute-row textarea:focus, .theme-dark .sample-table input:focus {
  background: #101e2e;
}
.theme-dark .framework-brand-image, .theme-dark .framework-brand-institutional,
.theme-dark .brand-logo, .theme-dark .wordmark-logo { background: white !important; }
.theme-dark .framework-custom-card { border-color: #337a78; background: linear-gradient(145deg,#102524,#12201f); }
.theme-dark .integration-data em, .theme-dark .source-chip { color: #afbdd0; background: #1b2a3e; }
.theme-dark .integration-disclaimer { color: #d2b77b; background: #292315; }
.theme-dark .grc-coverage-note { color: #e0bd70; background: #2a2417; }
.theme-dark .iris-chat { color: #dce5ef; background: #0e1928; }
.theme-dark .iris-messages { background: #0b1522; }
.theme-dark .user-message .message-bubble { color: #071521; background: #31c8c3; }
.theme-dark .modal-backdrop, .theme-dark .chat-backdrop { background: rgba(1,6,13,.78); }
.theme-dark .login-form-panel { background: #0b1320; }
.theme-dark .login-card { border-color: #2a394d; background: #111d2d; box-shadow: 0 22px 70px rgba(0,0,0,.35); }
.theme-dark .login-card h2, .theme-dark .login-card label > span { color: #e4ecf5; }
.theme-dark .login-card > p { color: #98a6b8; }
.theme-dark .login-card input { border-color: #34445a; color: #e1e8f1; background: #0d1928; }
.theme-dark .login-submit { color: #071521; background: #31d2cd; }

@media (max-width: 1120px) {
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .agent-grid { grid-template-columns: repeat(2,1fr); }
  .integration-grid { grid-template-columns: repeat(2,1fr); }
  .framework-summary-strip { grid-template-columns: repeat(4,1fr); }
  .framework-card-grid { grid-template-columns: repeat(3,1fr); }
  .overview-framework-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .training-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 860px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-brand-panel { min-height: 290px; padding: 30px; }
  .login-brand-panel h1 { font-size: 36px; }
  .login-brand-panel > small { display: none; }
  .sidebar { transform: translateX(-100%); transition: .25s ease; box-shadow: 20px 0 50px rgba(0,0,0,.2); }
  .sidebar.open { transform: translateX(0); }
  .main-content { width: 100%; margin-left: 0; }
  .mobile-menu { display: grid; place-items: center; }
  .breadcrumb { display: none; }
  .topbar { padding: 0 18px; }
  .page { padding: 25px 18px 40px; }
  .hero-grid, .module-shell, .integration-hero { grid-template-columns: 1fr; }
  .academy-intro { margin: -25px -18px 0; }
  .featured-show { margin: 0 -18px; }
  .episode-grid { grid-template-columns: repeat(2,1fr); }
  .academy-banner { grid-template-columns: 180px 1fr; }
  .episode-action { display: none; }
  .orchestrator-card { grid-template-columns: 80px 1fr; }
  .orchestrator-stats { grid-column: 1/-1; }
  .cobit-toolbar { align-items: stretch; flex-direction: column; }
  .grc-library-stats { grid-template-columns: repeat(2,1fr); }
  .grc-framework-filter { width: 100%; min-width: 0; height: 46px; font-size: 12px; }
  .training-summary { grid-template-columns: 1fr; }
  .domain-filters { overflow-x: auto; padding-bottom: 3px; }
  .framework-card-grid { grid-template-columns: repeat(2,1fr); }
  .overview-framework-heading { flex-direction: column; }
  .framework-multiselect { width: 100%; flex-basis: auto; }
  .framework-select-popover { left: 0; right: auto; width: min(600px,calc(100vw - 36px)); }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 68px; }
  body.authenticated { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  button, a, select, input, textarea { touch-action: manipulation; }
  .login-brand-panel { min-height: 250px; }
  .login-brand-panel img { width: 190px; height: 70px; }
  .login-brand-panel h1 { font-size: 29px; }
  .login-brand-panel p { font-size: 12px; }
  .login-form-panel { padding: 20px 16px calc(24px + env(safe-area-inset-bottom)); }
  .login-card { padding: 27px 22px; }
  .login-card > p { font-size: 13px; }
  .login-card label > span { font-size: 12px; }
  .login-card input { height: 50px; font-size: 16px; }
  .password-field button { min-width: 58px; height: 42px; font-size: 11px; }
  .login-submit { height: 50px; font-size: 13px; }
  .login-note, .back-to-site { font-size: 10px; }
  .language-picker, .theme-picker { padding: 0 6px; }
  .language-picker select { width: 42px; }
  .theme-picker select { width: 50px; }
  .theme-picker svg { display: none; }
  .search-trigger { width: 38px; }
  .search-trigger span, .search-trigger kbd, .topbar .primary-button { display: none; }
  .topbar { height: 62px; padding: 0 12px; }
  .topbar-actions { gap: 6px; }
  .icon-button { display: none; }
  .mobile-menu { width: 42px; height: 42px; border-radius: 9px; }
  .page { padding: 22px 14px 35px; }
  .grc-library-stats { gap: 7px; }
  .grc-library-stats > div { padding: 11px 12px; }
  .grc-library-stats strong { font-size: 18px; }
  .grc-library-table { margin-left: -14px; margin-right: -14px; border-right: 0; border-left: 0; border-radius: 0; }
  .grc-library-table .module-table-header, .grc-library-table .module-row { min-width: 780px; }
  .grc-library-table .module-row { min-height: 100px; }
  .grc-description { font-size: 9px; }
  .page-intro { align-items: flex-start; flex-direction: column; }
  .page-intro { margin-bottom: 20px; }
  .page-intro h1 { font-size: 27px; }
  .page-intro p { font-size: 13px; line-height: 1.5; }
  .overview-framework-panel { padding: 15px 13px; }
  .overview-framework-heading p { font-size: 11px; line-height: 1.45; }
  .framework-multiselect summary { min-height: 46px; font-size: 11px; }
  .framework-select-popover { position: fixed; z-index: 140; left: 10px; right: 10px; top: 80px; width: auto; max-height: calc(100dvh - 160px); }
  .framework-select-list { max-height: calc(100dvh - 220px); grid-template-columns: 1fr; }
  .framework-select-list label { min-height: 43px; }
  .framework-select-list label b { font-size: 10px; }
  .overview-framework-grid { grid-template-columns: 1fr; }
  .overview-framework-card { padding: 15px; }
  .overview-framework-card-head h3 { font-size: 12px; }
  .overview-framework-stats span { font-size: 8px; }
  .framework-summary-strip { display: flex; overflow-x: auto; padding-bottom: 5px; }
  .framework-summary-strip button { min-width: 104px; flex: 0 0 104px; }
  .framework-toolbar { align-items: stretch; flex-direction: column; }
  .framework-search { min-height: 46px; }
  .framework-search input { font-size: 14px; }
  .framework-all { min-height: 42px; }
  .framework-card-grid { grid-template-columns: 1fr; }
  .framework-card { min-height: 0; padding: 18px; }
  .framework-card p { font-size: 10px; }
  .framework-detail-title { align-items: flex-start; flex-direction: column; }
  .framework-detail-meta { grid-template-columns: 1fr; }
  .metric-grid, .agent-grid, .integration-grid, .episode-grid { grid-template-columns: 1fr; }
  .integration-cost-guide, .integration-kpis { grid-template-columns: 1fr; }
  .integration-kpis > div { min-height: 76px; }
  .integration-catalog-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .integration-search { min-height: 46px; width: 100%; }
  .integration-search input { font-size: 14px; }
  .integration-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 5px; }
  .integration-filters button { min-height: 40px; flex: 0 0 auto; padding: 0 13px; }
  .integration-grid-rich .integration-card { padding: 18px; }
  .integration-card-head { align-items: flex-start; }
  .integration-cost { white-space: normal; text-align: center; }
  .integration-data em, .integration-card > a { font-size: 9px; }
  .integration-automation p { min-height: 0; font-size: 10px; }
  .training-grid { grid-template-columns: 1fr; }
  .posture-card, .iris-card, .metric-card, .panel { border-radius: 12px; }
  .posture-card { padding: 18px; }
  .score-copy p { font-size: 11px; }
  .metric-card { min-height: 105px; }
  .task-item { min-height: 67px; }
  .task-copy strong { font-size: 11px; }
  .task-copy small { font-size: 9px; }
  .episode-player-backdrop { padding: 0; }
  .episode-player-shell { border-radius: 0; }
  .episode-stage { aspect-ratio: auto; height: calc(100dvh - 70px); }
  .episode-scene-copy { left: 6%; top: auto; bottom: 20%; width: 88%; }
  .episode-scene-copy h2 { font-size: 27px; }
  .episode-scene-copy p { font-size: 12px; }
  .episode-learning { display: none; }
  .episode-caption { bottom: 7%; font-size: 10px; }
  .episode-controls { min-height: 70px; padding: 0 10px calc(env(safe-area-inset-bottom)/2); }
  .episode-controls > span { width: 65px; }
  .score-factors { grid-template-columns: repeat(2,1fr); }
  .posture-content { align-items: flex-start; flex-direction: column; }
  .academy-banner { grid-template-columns: 1fr; }
  .episode-art { min-height: 140px; }
  .episode-copy { padding: 0 20px 20px; }
  .orchestrator-card { grid-template-columns: 1fr; }
  .orchestrator-stats { display: grid; grid-template-columns: 1fr 1fr; }
  .academy-intro { padding: 35px 18px 25px; }
  .academy-intro h1 { font-size: 28px; }
  .featured-show { min-height: 470px; }
  .show-content { padding: 55px 18px; }
  .show-content h2 { font-size: 39px; }
  .show-content p { font-size: 12px; }
  .watch-button { min-height: 45px; padding: 0 16px; font-size: 11px; }
  .show-meta { display: none; }
  .episode-thumb { height: 175px; }
  .module-table { overflow-x: auto; }
  .module-table-header, .module-row { min-width: 700px; }
  .grc-library-evidence { min-width: 1120px; }
  .evidence-status-summary { grid-template-columns: repeat(2, 1fr); }
  .workpaper-topbar { grid-template-columns: 1fr; gap: 12px; margin-top: 0; padding: 16px; }
  .workpaper-topbar h1 { font-size: 19px; }
  .workpaper-save { align-items: stretch; flex-direction: column; }
  .workpaper-save .primary-button { min-height: 44px; justify-content: center; }
  .workpaper-export { min-height: 44px; }
  .workpaper-kpis { grid-template-columns: repeat(2, 1fr); }
  .workpaper-catalog-toolbar { align-items: stretch; flex-direction: column; }
  .workpaper-catalog-toolbar label, .workpaper-catalog-toolbar select { min-height: 44px; width: 100%; }
  .workpaper-section { padding: 16px 14px; }
  .workpaper-grid, .workpaper-checks { grid-template-columns: 1fr; }
  .workpaper-field.wide { grid-column: auto; }
  .workpaper-field > span { font-size: 10px; }
  .workpaper-field input, .workpaper-field select { height: 44px; font-size: 14px; }
  .workpaper-field textarea { font-size: 14px; }
  .workpaper-checks label { min-height: 48px; font-size: 11px; }
  .workpaper-evidence-table { overflow-x: auto; }
  .workpaper-evidence-row { min-width: 760px; }
  .user-access-stats { grid-template-columns: repeat(2, 1fr); }
  .access-profile-grid { grid-template-columns: 1fr; }
  .user-access-panel { overflow-x: auto; }
  .user-access-toolbar { min-width: 760px; }
  .user-access-table { min-width: 760px; }
  .user-access-intro { align-items: stretch; flex-direction: column; }
  .user-access-intro .primary-button { justify-content: center; }
  .attribute-row { grid-template-columns: 40px 1fr; }
  .attribute-row input, .attribute-row textarea, .sample-table input { font-size: 12px; }
  .cobit-stats { grid-template-columns: repeat(2,1fr); }
  .cobit-search { min-height: 46px; }
  .cobit-search input { font-size: 14px; }
  .domain-filters button { min-height: 40px; padding: 0 13px; }
  .cobit-table { margin-left: -14px; margin-right: -14px; border-left: 0; border-right: 0; border-radius: 0; }
  .cobit-detail-backdrop { padding: 0; align-items: flex-end; }
  .cobit-detail { max-height: 90dvh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 27px 20px calc(25px + env(safe-area-inset-bottom)); }
  .iris-chat { width: 100%; height: 100dvh; }
  .iris-chat-header { padding-top: calc(15px + env(safe-area-inset-top)); }
  .iris-chat-form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .chat-input-wrap textarea { font-size: 16px; }
  .message-bubble p { font-size: 12px; }
  .suggested-questions button { min-height: 43px; font-size: 10px; }
  .mobile-app-nav {
    position: fixed;
    z-index: 90;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: calc(62px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4,1fr);
    align-items: start;
    padding: 5px 5px calc(5px + env(safe-area-inset-bottom));
    border-top: 1px solid #dde3e9;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(16px);
    box-shadow: 0 -8px 28px rgba(12,31,54,.1);
  }
  .mobile-app-nav button {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 9px;
    color: #7c8898;
    background: transparent;
    font-size: 9px;
    font-weight: 700;
  }
  .mobile-app-nav button.active { color: #087e7b; background: #e9f8f6; }
  .mobile-app-nav svg { width: 19px; height: 19px; }
}