:root {
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #17202a;
  background: #eef2f5;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; }
body.authMode { grid-template-columns: 1fr; }
body.authMode .sidebar, body.authMode .topbar { display: none; }
body.authMode .app { padding: 0; min-height: 100vh; display: grid; }
body.controlCenterBody { display: block; min-height: 100vh; background: #eef2f5; }
body.controlCenterBody .sidebar, body.controlCenterBody .topbar { display: none; }
body.controlLoggedOut .controlShell { width: 100%; min-height: 100vh; padding: 0; display: block; }
body.controlLoggedOut .controlHero { display: none; }
button, input, textarea, select { font: inherit; }
.sidebar { background: #112f3a; color: #fff; padding: 20px 14px; min-height: 100vh; position: sticky; top: 0; }
.brand { display: grid; gap: 7px; align-items: center; padding: 6px 6px 18px; }
.brandLogo { width: 100%; max-width: 190px; display: block; border-radius: 6px; background: #fff; padding: 8px; object-fit: contain; aspect-ratio: 16 / 9; }
.brand small { display: block; color: #9fc0c8; margin-left: 7px; }
.mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: #1f8a7a; font-weight: 900; }
nav { display: grid; gap: 4px; }
nav button { width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 10px 11px; background: transparent; color: #d9e8eb; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
nav button.active, nav button:hover { background: #1d4652; color: #fff; }
.navBadge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #ffd23f; color: #17202a; font-size: 12px; font-weight: 900; box-shadow: 0 0 0 2px rgba(255, 210, 63, .22); }
.app { min-width: 0; padding: 24px; }
.topbar { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; letter-spacing: 0; }
.topbar p { margin-top: 5px; color: #5a6875; }
.globalPersonFilter { margin-top: 10px; }
.personFilterBar { display: grid; grid-template-columns: minmax(210px, 300px) minmax(220px, 320px) auto auto; gap: 8px; align-items: end; }
.personFilterBar label { min-width: 0; }
.personFilterBar button { white-space: nowrap; }
.personFilterStatus { align-self: center; color: #1f736b; font-size: 13px; font-weight: 850; white-space: nowrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.userMenu { display: flex; align-items: center; gap: 8px; border: 1px solid #d7e0e8; border-radius: 7px; background: #fff; padding: 5px 6px 5px 10px; }
.userMenu span { font-weight: 850; color: #17202a; }
.userMenu small { color: #667582; font-weight: 800; }
.userMenu button { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.loginPage { min-height: 100vh; display: grid; align-content: center; justify-items: center; gap: 28px; padding: 32px 24px; background: linear-gradient(135deg, #eef2f5 0%, #f7fbfa 52%, #e8f3f1 100%); }
.loginCard { width: min(430px, calc(100vw - 36px)); display: grid; gap: 14px; border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; box-shadow: 0 22px 70px rgba(18, 38, 50, .18); padding: 22px; }
.loginCard h1 { font-size: 26px; }
.loginCard button.primary { min-height: 42px; }
.loginBrand { display: grid; justify-items: center; gap: 10px; color: #112f3a; font-weight: 900; font-size: 24px; }
.loginBrand img { width: min(620px, calc(100vw - 36px)); border-radius: 8px; background: #fff; padding: 22px; box-shadow: 0 24px 72px rgba(18, 38, 50, .14); }
.passwordChangePage { min-height: 100vh; align-content: center; gap: 20px; padding-top: 24px; padding-bottom: 24px; }
.passwordChangePage .loginBrand img { width: min(460px, calc(100vw - 36px)); padding: 16px; }
.passwordChangePage .loginCard { margin-bottom: 24px; }
.controlLogin { width: 100%; }
.controlLoginStack { width: min(680px, calc(100vw - 32px)); display: grid; justify-items: center; gap: 34px; }
.controlLoginLogoCard { width: min(640px, calc(100vw - 32px)); border: 1px solid #e4ebf0; border-radius: 8px; background: #fff; box-shadow: 0 24px 72px rgba(18, 38, 50, .12); padding: 30px 34px; }
.controlLoginLogoCard img { display: block; width: 100%; height: auto; }
.controlLoginCard { width: min(430px, calc(100vw - 32px)); }
.landingBody { display: block; min-height: 100vh; background: #eef2f5; color: #17202a; }
.landingBody .sidebar, .landingBody .topbar { display: none; }
.landingNav { min-height: 96px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 10px clamp(18px, 5vw, 72px); background: #fff; border-bottom: 1px solid #d7e0e8; position: sticky; top: 0; z-index: 5; }
.landingLogo { display: flex; align-items: center; flex: 0 0 auto; }
.landingLogo img { width: clamp(220px, 18vw, 320px); height: 76px; object-fit: contain; object-position: left center; display: block; }
.landingNav nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.landingNav a { color: #17202a; text-decoration: none; font-weight: 850; padding: 9px 11px; border-radius: 6px; }
.landingNav a:hover { background: #e8f3f1; color: #1f736b; }
.landingLogin { border: 1px solid #1f736b; color: #1f736b !important; }
.landingHero { min-height: calc(100vh - 96px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: clamp(28px, 5vw, 70px); align-items: center; padding: clamp(36px, 7vw, 88px) clamp(18px, 5vw, 72px); }
.landingPageMain { min-height: calc(100vh - 150px); }
.landingHeroText { display: grid; gap: 18px; max-width: 760px; }
.landingEyebrow { color: #1f736b; font-weight: 950; text-transform: uppercase; font-size: 13px; letter-spacing: 0; }
.landingHero h1 { font-size: clamp(54px, 8vw, 112px); line-height: .95; color: #112f3a; }
.landingLead { font-size: clamp(18px, 2vw, 24px); line-height: 1.42; color: #34444f; max-width: 760px; }
.landingActions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.landingButton { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border: 1px solid #b8c5d2; border-radius: 6px; background: #fff; color: #17202a; text-decoration: none; font-weight: 900; }
.landingButton.primary { background: #1f736b; border-color: #1f736b; color: #fff; }
.landingProductPanel { border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; box-shadow: 0 24px 80px rgba(18, 38, 50, .16); padding: 16px; display: grid; gap: 12px; }
.landingPanelTop { display: flex; justify-content: space-between; gap: 12px; color: #667582; font-weight: 900; }
.landingMetrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.landingMetrics div, .landingTask { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; display: grid; gap: 5px; }
.landingMetrics span, .landingTask span { color: #667582; font-size: 13px; font-weight: 750; }
.landingMetrics strong { color: #1f736b; font-size: 30px; }
.landingTask strong { font-size: 16px; }
.landingSection { padding: clamp(36px, 6vw, 78px) clamp(18px, 5vw, 72px); display: grid; gap: 22px; scroll-margin-top: 126px; }
.landingSectionHead { max-width: 820px; display: grid; gap: 8px; }
.landingSection h2, .landingBand h2 { font-size: clamp(30px, 4vw, 48px); color: #112f3a; }
.landingSectionHead p, .landingBand p { color: #4d5e68; font-size: 17px; line-height: 1.5; }
.landingFeatureGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.landingFeatureGrid article { border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 18px; display: grid; gap: 9px; }
.landingFeatureGrid p { color: #4d5e68; line-height: 1.45; }
.landingEditionGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.landingEditionGrid.compact .landingEditionCard { min-height: 0; }
.landingEditionCard { position: relative; border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 18px; display: grid; gap: 10px; min-height: 250px; align-content: start; }
.landingEditionCard.recommended { border-color: #1f736b; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .18), 0 16px 44px rgba(18, 38, 50, .08); }
.landingEditionCard h3 { padding-right: 94px; }
.landingEditionCard p { color: #4d5e68; line-height: 1.45; }
.landingEditionCard ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: #34444f; }
.recommendedBadge { position: absolute; right: 12px; top: 12px; border-radius: 999px; background: #ffd23f; color: #17202a; font-size: 12px; font-weight: 950; padding: 5px 9px; text-transform: uppercase; letter-spacing: 0; }
.landingBand { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 24px; align-items: start; margin: 0 clamp(18px, 5vw, 72px); padding: clamp(28px, 5vw, 52px); border-radius: 8px; background: #112f3a; color: #fff; scroll-margin-top: 126px; }
.landingBand h2, .landingBand p { color: #fff; }
.landingBand ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-weight: 850; }
.landingBackupGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.landingBackupGrid div { border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 18px; display: grid; gap: 8px; }
.landingBackupGrid span { color: #667582; }
.landingInquirySection { background: #fff; border-top: 1px solid #d7e0e8; border-bottom: 1px solid #d7e0e8; }
.landingInquiryForm { display: grid; gap: 14px; border: 1px solid #d7e0e8; border-radius: 8px; background: #fbfcfd; padding: clamp(16px, 3vw, 28px); max-width: 1120px; }
.landingInquiryGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.landingInquiryForm label { display: grid; gap: 6px; color: #17202a; font-weight: 900; }
.landingInquiryForm input, .landingInquiryForm textarea, .landingInquiryForm select { width: 100%; border: 1px solid #cbd6df; border-radius: 7px; background: #fff; padding: 10px; color: #17202a; }
.landingInquiryForm textarea { min-height: 120px; resize: vertical; }
.landingFormActions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.landingOptionNote { border: 1px solid #cbe3df; border-radius: 7px; background: #eff8f6; color: #184f49; padding: 10px 12px; font-weight: 800; line-height: 1.45; }
.landingContactGrid { display: grid; grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr); gap: 16px; align-items: start; max-width: 1180px; }
.landingContactCard { border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 20px; display: grid; gap: 12px; }
.landingContactCard p { color: #34444f; line-height: 1.5; }
.legalPageMain { padding: 34px clamp(18px, 5vw, 72px) 46px; }
.legalTextPage { max-width: 1040px; margin: 0 auto; }
.landingSection.legalTextPage { padding-top: 34px; padding-bottom: 46px; }
.legalSingleBlock { width: min(1040px, 100%); margin: 0 auto; border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 28px 32px; display: grid; gap: 18px; }
.legalTextPage article { border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 22px 26px; display: grid; gap: 10px; }
.legalBlockSection { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid #e2e9ee; }
.legalBlockSection:first-of-type { border-top: 0; padding-top: 0; }
.legalTextPage h1, .legalSingleBlock h1 { font-size: 30px; line-height: 1.15; color: #112f3a; margin: 0 0 4px; }
.legalTextPage h2, .legalSingleBlock h2 { font-size: 19px; line-height: 1.25; color: #112f3a; margin: 0; }
.legalTextPage h3, .legalSingleBlock h3 { font-size: 15px; line-height: 1.35; color: #17202a; margin: 10px 0 0; }
.legalTextPage p, .legalSingleBlock p { font-size: 14px; line-height: 1.62; color: #34444f; margin: 0; }
.legalTextPage a, .legalSingleBlock a, .landingContactCard a { color: #1f736b; font-weight: 900; }
.landingInquiryStatus { font-weight: 900; color: #667582; }
.landingInquiryStatus.ok { color: #1f736b; }
.landingInquiryStatus.error { color: #b3261e; }
.landingFooter { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 24px clamp(18px, 5vw, 72px); border-top: 1px solid #d7e0e8; background: #fff; color: #667582; }
.landingFooter a { color: #1f736b; font-weight: 900; text-decoration: none; }
.cookieNotice[hidden] { display: none !important; }
.cookieNotice { position: fixed; inset: 0; z-index: 500; display: grid; align-content: center; justify-items: center; gap: 12px; padding: 20px; background: rgba(17, 47, 58, .38); }
.cookieNotice > div { width: min(560px, calc(100vw - 32px)); display: grid; gap: 8px; border: 1px solid #cbd6df; border-radius: 8px; background: #fff; color: #17202a; box-shadow: 0 24px 80px rgba(18, 38, 50, .24); padding: 20px; text-align: left; }
.cookieNotice strong { font-size: 22px; color: #112f3a; }
.cookieNotice span { color: #4d5e68; line-height: 1.45; }
.cookieNotice button { width: min(560px, calc(100vw - 32px)); min-height: 44px; border-color: #1f736b; background: #1f736b; color: #fff; font-weight: 950; }
.loginError { border: 1px solid #e2b7b2; border-radius: 7px; background: #fff2f1; color: #8b1d17; padding: 10px; font-weight: 800; }
.loginSuccess { border: 1px solid #9fd8c9; border-radius: 7px; background: #edf9f5; color: #0f6f62; padding: 10px; font-weight: 800; }
.maintenanceBanner { width: min(920px, 100%); margin: 0 auto 14px; border: 1px solid #d84b4b; border-left: 6px solid #b3261e; border-radius: 8px; background: #fff0f0; color: #8f1111; padding: 12px 16px; text-align: center; font-weight: 950; box-shadow: 0 14px 36px rgba(143, 17, 17, .12); }
.maintenanceBanner small { display: block; margin-top: 4px; color: #a33a34; font-weight: 800; }
.saveToast { position: fixed; right: 22px; bottom: 22px; z-index: 260; max-width: min(440px, calc(100vw - 32px)); border: 1px solid #badbd3; border-left: 6px solid #1f736b; border-radius: 8px; background: #f4fbf9; color: #0f4e48; box-shadow: 0 18px 50px rgba(18, 38, 50, .18); padding: 12px 14px; font-weight: 900; transform: translateY(20px); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.saveToast.visible { opacity: 1; transform: translateY(0); }
.adminSubNav { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.adminSubNav button { min-width: 120px; background: #fbfcfd; }
.adminSubNav button.active { background: #1f736b; border-color: #1f736b; color: #fff; }
.controlShell { width: min(1500px, calc(100vw - 32px)); margin: 0 auto; padding: 18px 0 28px; display: grid; gap: 14px; }
.controlHero { display: flex; justify-content: space-between; gap: 16px; align-items: center; border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 14px; }
.controlHero img { width: 220px; max-width: 42vw; display: block; border-radius: 6px; background: #fff; }
.controlHero p { color: #5a6875; margin-top: 6px; }
.controlUserBox { display: flex; gap: 8px; align-items: center; border: 1px solid #d7e0e8; border-radius: 7px; background: #fbfcfd; padding: 8px; }
.controlUserBox span { color: #667582; font-weight: 800; }
.controlStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.controlStat { border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 12px; display: grid; gap: 4px; }
.controlStat span { color: #667582; font-size: 12px; font-weight: 850; }
.controlStat strong { color: #1f736b; font-size: 24px; }
.controlSectionNav { display: flex; gap: 8px; align-items: center; padding: 8px; }
.controlSectionNav button { min-width: 170px; background: #fbfcfd; }
.controlSectionNav button.active { background: #1f736b; border-color: #1f736b; color: #fff; }
.controlActionBar { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.controlActionBar h1 { margin: 0; }
.controlAddButton { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-width: 180px; }
.controlAddButton span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: #ffd23f; color: #17202a; font-size: 20px; line-height: 1; font-weight: 900; }
.controlCustomerDirectory { display: grid; gap: 12px; }
.controlCustomerTable { display: grid; gap: 8px; }
.controlCustomerTableHead, .controlCustomerTableRow { display: grid; grid-template-columns: minmax(280px, 1.45fr) .55fr .55fr minmax(220px, auto) minmax(180px, auto); gap: 10px; align-items: center; }
.controlCustomerTableHead { color: #667582; font-size: 12px; font-weight: 900; padding: 0 10px; }
.controlCustomerTableRow { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 10px; }
.controlCustomerTableRow.active { border-color: #1f736b; background: #e8f3f1; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .14); }
.statusButtonGroup { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.statusButtonGroup .statusButton { min-height: 29px; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 900; background: #fff; border: 1px solid #cfd9e2; color: #24323f; }
.statusButtonGroup .statusButton.active { background: #1f736b; border-color: #1f736b; color: #fff; }
.statusButtonGroup .statusButton[data-customer-status="gesperrt"].active { background: #9f2f24; border-color: #9f2f24; }
.statusButtonGroup .statusButton[data-customer-status="geplant"].active { background: #8a6500; border-color: #8a6500; }
.billingCustomerGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
.billingCustomerCard { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; display: grid; gap: 10px; }
.billingCustomerCard strong { display: block; font-size: 16px; }
.billingCustomerCard small { display: block; color: #667582; margin-top: 3px; }
.billingCustomerCard dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.billingCustomerCard dt { color: #667582; font-size: 12px; font-weight: 800; }
.billingCustomerCard dd { margin: 0; font-weight: 900; }
.billingWorkspace { display: grid; grid-template-columns: minmax(320px, .9fr) minmax(460px, 1.1fr); gap: 10px; align-items: start; }
.billingInvoiceList { display: grid; gap: 8px; }
.billingInvoiceRow { width: 100%; border: 1px solid #dbe3ea; background: #fff; border-radius: 7px; padding: 10px; display: grid; grid-template-columns: minmax(180px, 1fr) 110px 100px 90px; gap: 8px; align-items: center; text-align: left; }
.billingInvoiceRow.active { border-color: #1f736b; background: #e8f3f1; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .14); }
.billingInvoiceRow strong, .billingInvoiceRow small { display: block; }
.billingInvoiceRow small { color: #667582; margin-top: 3px; }
.billingDetailGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.billingDetailGrid div { border: 1px solid #dbe3ea; background: #fbfcfd; border-radius: 7px; padding: 10px; }
.billingDetailGrid strong, .billingDetailGrid span { display: block; }
.billingDetailGrid strong { color: #667582; font-size: 12px; }
.billingDetailGrid span { font-weight: 900; margin-top: 4px; }
.billingPositions, .billingManualPositions { display: grid; gap: 6px; margin-top: 10px; }
.billingPositionsHead, .billingPositionRow { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(140px, .8fr) 80px 100px 100px; gap: 8px; align-items: center; }
.billingPositionsHead, .billingManualHead { color: #667582; font-size: 12px; font-weight: 900; padding: 0 6px; }
.billingPositionRow { border: 1px solid #dbe3ea; background: #fff; border-radius: 7px; padding: 8px; }
.billingManualHead, .billingManualRow { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .8fr) 110px 140px; gap: 8px; align-items: end; }
.billingManualRow input { min-width: 0; }
@media (max-width: 980px) {
  .billingWorkspace, .billingDetailGrid, .billingManualHead, .billingManualRow, .billingPositionsHead, .billingPositionRow, .billingInvoiceRow { grid-template-columns: 1fr; }
}
.controlCustomerName { display: grid; gap: 3px; min-width: 0; }
.controlCustomerName strong { font-size: 16px; }
.controlCustomerName span, .controlCustomerName small { color: #667582; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.controlMailPanel { display: grid; gap: 12px; }
.supportMailboxPanel { display: grid; gap: 12px; }
.supportMailboxWorkspace { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.supportMailList, .supportMailDetail, .supportComposeForm { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; min-width: 0; }
.supportMailList { display: grid; gap: 8px; max-height: 620px; overflow: auto; }
.supportMailRow { width: 100%; text-align: left; display: grid; gap: 4px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fff; padding: 10px; }
.supportMailRow.active { border-color: #1f736b; background: #e8f3f1; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .12); }
.supportMailRow.unread { border-color: #e2b64a; background: #fff9e8; box-shadow: inset 4px 0 0 #ffd23f; }
.supportMailRow span, .supportMailRow small { color: #667582; font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.supportMailPreview { display: grid; gap: 10px; }
.supportMailFacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.supportMailFacts div { border: 1px solid #dbe3ea; border-radius: 7px; background: #fff; padding: 9px; display: grid; gap: 3px; }
.supportMailFacts span { color: #667582; font-size: 12px; font-weight: 850; }
.supportMailFacts strong { overflow-wrap: anywhere; }
.supportMailBody { margin: 0; max-height: 360px; overflow: auto; white-space: pre-wrap; border: 1px solid #dbe3ea; border-radius: 7px; background: #fff; padding: 12px; font-family: inherit; line-height: 1.45; }
.supportComposeForm { grid-column: 1 / -1; }
.supportComposeForm textarea { min-height: 170px; }
.customerInboxList { margin-top: 12px; }
.customerMailRow { text-align: left; }
.controlCustomerMailPanel { margin-bottom: 14px; }
.controlMailWorkspace { display: grid; grid-template-columns: minmax(340px, .7fr) minmax(0, 1.3fr); gap: 14px; align-items: start; }
.mailQuickAddForm { border: 1px solid #c9d7ea; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(241,247,255,.94)); padding: 12px; box-shadow: 0 12px 28px rgba(45, 69, 120, .10); }
.mailQuickAddForm[hidden] { display: none !important; }
.mailQuickAddForm[hidden] + .controlMailList { grid-column: 1 / -1; }
.controlMailList { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; display: grid; gap: 10px; }
.controlMailTable { display: grid; gap: 8px; }
.controlMailTableHead, .controlMailTableRow { display: grid; grid-template-columns: minmax(280px, 1.3fr) .65fr .55fr minmax(160px, auto); gap: 10px; align-items: center; }
.controlMailTableHead { color: #667582; font-size: 12px; font-weight: 900; padding: 0 10px; }
.controlMailTableRow { border: 1px solid #dbe3ea; border-radius: 7px; background: #fff; padding: 10px; }
.controlInquiryWorkspace { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.controlInquiryList { display: grid; gap: 8px; }
.controlInquiryRow { width: 100%; text-align: left; display: grid; gap: 3px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 10px; }
.controlInquiryRow.active { border-color: #1f736b; background: #e8f3f1; }
.controlInquiryRow span, .controlInquiryRow small { color: #667582; font-size: 12px; font-weight: 750; }
.controlInquiryDetail { display: grid; gap: 12px; }
.controlInquiryFacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.controlInquiryFacts div { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 9px; display: grid; gap: 3px; }
.controlInquiryFacts span { color: #667582; font-size: 12px; font-weight: 850; }
.controlInquiryFacts strong { overflow-wrap: anywhere; }
.officialFormsControlPanel { display: grid; gap: 12px; }
.officialFormsControlGrid { display: grid; grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr); gap: 14px; align-items: start; }
.officialFormsControlList { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; display: grid; gap: 10px; }
.officialFormsTable { display: grid; gap: 8px; }
.officialFormsTableHead, .officialFormsTableRow { display: grid; grid-template-columns: minmax(260px, 1.2fr) .6fr .7fr minmax(160px, auto); gap: 10px; align-items: center; }
.officialFormsTableHead { color: #667582; font-size: 12px; font-weight: 900; padding: 0 10px; }
.officialFormsTableRow { border: 1px solid #dbe3ea; border-radius: 7px; background: #fff; padding: 10px; }
.officialFormsTableRow small { display: block; color: #667582; font-weight: 750; margin-top: 3px; overflow-wrap: anywhere; }
.statusMark { display: inline-flex; align-items: center; min-height: 25px; border-radius: 999px; padding: 2px 9px; background: #e8f3f1; color: #1f736b; font-weight: 900; }
.controlRowActions { display: flex; gap: 7px; justify-content: flex-end; flex-wrap: wrap; }
.controlCustomerEditor { display: grid; gap: 14px; }
.controlWizardForm { gap: 16px; }
.controlWizardTabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.controlWizardPill { display: grid; gap: 3px; text-align: left; min-height: 62px; background: #fbfcfd; }
.controlWizardPill strong { color: #17202a; font-size: 13px; }
.controlWizardPill span { color: #667582; font-size: 11px; line-height: 1.25; }
.controlWizardPill.active { background: #1f736b; border-color: #1f736b; }
.controlWizardPill.active strong, .controlWizardPill.active span { color: #fff; }
.controlWizard { display: grid; gap: 12px; }
.controlWizardStep { display: none; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; border: 1px solid #dbe3ea; border-radius: 8px; background: #fbfcfd; padding: 12px; }
.controlWizardStep.active { display: grid; }
.controlStepNo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: #1f736b; color: #fff; font-weight: 950; }
.controlStepBody { display: grid; gap: 10px; min-width: 0; }
.controlStepBody h3 { font-size: 18px; }
.controlStepBody h4 { margin: 0; font-size: 15px; }
.controlFormBand { display: grid; gap: 12px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; }
.controlFormBand h3 { margin: 0; }
.externalBackupBox, .setupMailboxBox { background: #fff; }
.wizardActions { justify-content: space-between; }
.controlChoiceGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.controlChoiceCard { border: 1px solid #dbe3ea; border-radius: 8px; background: #fff; padding: 12px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.controlChoiceCard strong { color: #17202a; font-size: 14px; line-height: 1.25; }
.controlChoiceCard span:not(.controlChoiceIcon) { color: #667582; font-size: 12px; font-weight: 750; line-height: 1.35; grid-column: 2; }
.controlChoiceIcon { width: 38px; min-height: 34px; border-radius: 8px; display: grid; place-items: center; background: #e8f3f1; color: #1f736b; font-size: 12px; font-weight: 950; overflow-wrap: anywhere; text-align: center; }
.controlTechDetails { border: 1px solid #dbe3ea; border-radius: 7px; background: #fff; padding: 10px; }
.controlTechDetails summary { cursor: pointer; color: #1f736b; font-weight: 900; }
.controlTechDetails[open] summary { margin-bottom: 12px; }
.checkLine { display: grid; grid-template-columns: 22px 1fr; align-items: center; border: 1px solid #dbe3ea; border-radius: 7px; background: #fff; padding: 10px; }
.checkLine input { width: auto; margin: 0; }
.formActions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.controlCustomerInfra { margin-top: 4px; }
.controlInfraColumns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.controlInfraColumns h4 { margin: 0 0 8px; }
.controlAdminGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.controlFoldGrid { display: grid; gap: 12px; }
.controlFold { border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 12px; }
.controlFold summary { cursor: pointer; color: #1f736b; font-weight: 900; font-size: 16px; }
.controlFold[open] summary { margin-bottom: 12px; }
.autoTenantPreview { border: 1px solid #dbe3ea; border-radius: 7px; background: #f4fbf9; color: #1f736b; padding: 9px 11px; font-size: 13px; font-weight: 800; }
.controlInfoBox { border: 1px solid #c8dbe3; border-radius: 7px; background: #f7fbfc; color: #34444f; padding: 10px 11px; line-height: 1.45; font-weight: 750; }
.storageModeHelp { border-left: 5px solid #1f736b; }
.successBox { border-color: #badbd3; background: #f4fbf9; color: #1f736b; }
.mirrorStatusPanel { display: grid; gap: 12px; border-left: 6px solid #b8c5d2; }
.mirrorStatusPanel.ok { border-left-color: #1f736b; background: #f7fbfa; }
.mirrorStatusPanel.warn { border-left-color: #d08b00; background: #fffaf0; }
.mirrorStatusPanel.loading { border-left-color: #8aa3b1; }
.mirrorStatusHeader { display: flex; justify-content: space-between; gap: 14px; align-items: start; }
.mirrorStatusHeader h2 { margin-bottom: 4px; }
.mirrorStatusHeader p { color: #4d5e68; font-weight: 750; }
.mirrorStatusGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mirrorStatusGrid div { border: 1px solid #dbe3ea; border-radius: 7px; background: #fff; padding: 10px; display: grid; gap: 4px; min-width: 0; }
.mirrorStatusGrid span { color: #667582; font-size: 12px; font-weight: 850; }
.mirrorStatusGrid strong { color: #17202a; overflow-wrap: anywhere; }
.mirrorStatusPanel.ok .mirrorStatusGrid strong { color: #1f736b; }
.mirrorStatusError { margin: 0; max-height: 140px; overflow: auto; border: 1px solid #e2b7b2; border-radius: 7px; background: #fff2f1; color: #8b1d17; padding: 10px; white-space: pre-wrap; }
.backupRunPanel { display: grid; gap: 12px; border-left: 6px solid #1f736b; }
.backupRunPanel.running { background: #f4fbf9; }
.backupRunHeader { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.backupRunHeader h2 { margin-bottom: 4px; }
.backupRunMeta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: #4d5e68; font-weight: 800; }
.backupProgress { height: 11px; border-radius: 999px; background: #dbe3ea; overflow: hidden; }
.backupProgress span { display: block; height: 100%; min-width: 2px; background: #1f736b; transition: width .25s ease; }
.backupTerminal { margin: 0; max-height: 260px; overflow: auto; border: 1px solid #0f2f39; border-radius: 7px; background: #102027; color: #d7fff8; padding: 11px; white-space: pre-wrap; font-family: Consolas, "Courier New", monospace; font-size: 12px; line-height: 1.45; }
.backupRunHistory { display: grid; gap: 6px; color: #667582; font-size: 12px; }
.maintenancePreview { display: grid; gap: 5px; border: 1px solid #e2b7b2; border-left: 5px solid #b3261e; border-radius: 7px; background: #fff2f1; color: #8b1d17; padding: 10px 11px; font-weight: 850; }
.maintenancePreview span { color: #8b1d17; overflow-wrap: anywhere; }
.syncScheduleControls { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-top: 8px; }
.syncScheduleControls label { min-width: 230px; }
.syncScheduleControls button { min-height: 34px; padding: 5px 9px; }
.controlNotice { display: flex; gap: 10px; align-items: center; border-left: 5px solid #1f736b; }
.controlNotice span { color: #34444f; line-height: 1.45; }
.controlLayout { display: grid; grid-template-columns: minmax(270px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.controlLayoutClean { grid-template-columns: minmax(310px, 380px) minmax(0, 1fr); }
.controlCustomerPanel, .controlMainPanel { min-width: 0; }
.controlCustomerList { max-height: 560px; overflow: auto; padding-right: 4px; }
.controlCustomerItem { width: 100%; display: grid; gap: 4px; text-align: left; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; color: #17202a; padding: 10px; }
.controlCustomerItem.active { border-color: #1f736b; background: #e8f3f1; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .16); }
.controlCustomerItem span { color: #667582; font-size: 12px; line-height: 1.35; }
.controlCustomerRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 8px; }
.controlCustomerRow.active { border-color: #1f736b; background: #e8f3f1; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .15); }
.controlOperatorRow { grid-template-columns: 1fr; background: #f4fbf9; }
.controlCustomerSelect { display: grid; gap: 3px; min-width: 0; padding: 0; border: 0; background: transparent; color: #17202a; text-align: left; font-weight: 850; }
.controlCustomerSelect span, .controlCustomerSelect small { color: #667582; font-size: 12px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.controlTinyDanger { align-self: center; min-height: 32px; padding: 6px 9px; border-color: #d8b6b1; color: #9a241c; background: #fff; }
.controlCreateBox { margin-top: 12px; border: 1px solid #dbe3ea; border-radius: 8px; background: #fbfcfd; padding: 10px; }
.controlCreateBox summary { cursor: pointer; font-weight: 900; color: #1f736b; }
.controlCreateBox form { margin-top: 12px; }
.controlCustomerHeader { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.controlHeaderActions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.controlOperatorPanel { margin-bottom: 14px; }
.controlAccessGrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 14px; align-items: start; }
.controlAccessList { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; display: grid; gap: 10px; }
.controlUserItem { background: #fff; }
.controlTwo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.controlInfraGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; align-items: start; }
.controlRoomsPanel { margin-bottom: 14px; }
.controlRoomGrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 14px; align-items: start; }
.controlRoomList { max-height: 560px; overflow: auto; padding-right: 4px; }
.controlRoomItem .itemMain { gap: 8px; }
.controlRoomItem label { margin-top: 4px; }
.controlRoomForm { align-self: start; border: 1px solid #dbe3ea; border-radius: 8px; background: #fbfcfd; padding: 12px; }
button { min-height: 36px; border: 1px solid #b8c5d2; border-radius: 6px; background: #fff; color: #17202a; padding: 7px 10px; cursor: pointer; font-weight: 700; }
button.primary { background: #1f736b; border-color: #1f736b; color: #fff; }
button.danger { color: #9a241c; border-color: #d8b6b1; }
button:disabled { opacity: .45; cursor: not-allowed; }
.grid { display: grid; gap: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 16px; }
.card, .panel { background: #fff; border: 1px solid #d7e0e8; border-radius: 8px; padding: 14px; }
.metricCard { display: block; text-align: left; min-height: 86px; }
button.metricCard { width: 100%; cursor: pointer; }
button.metricCard:hover { border-color: #1f736b; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .14); background: #f8fcfb; }
.metric { font-size: 28px; font-weight: 850; color: #1f736b; margin-top: 4px; }
.muted { color: #667582; font-size: 13px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
label { display: grid; gap: 5px; font-weight: 750; font-size: 13px; color: #34444f; }
input, textarea, select { width: 100%; border: 1px solid #c9d3dd; border-radius: 6px; padding: 9px 10px; background: #fff; color: #17202a; }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.datePicker { position: absolute; z-index: 120; width: 292px; border: 1px solid #b8c5d2; border-radius: 8px; background: #fff; box-shadow: 0 16px 40px rgba(18, 38, 50, .22); padding: 10px; }
.datePickerHeader { display: grid; grid-template-columns: 34px 1fr 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.datePickerHeader strong { text-align: center; text-transform: capitalize; }
.datePickerHeader button, .datePickerFooter button { min-height: 32px; padding: 4px 8px; }
.datePickerWeek, .datePickerGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.datePickerWeek { color: #667582; font-size: 12px; text-align: center; margin-bottom: 4px; }
.datePickerGrid button, .datePickerEmpty { min-height: 34px; border-radius: 6px; display: grid; place-items: center; }
.datePickerGrid button { border: 1px solid transparent; background: #fbfcfd; padding: 0; font-weight: 750; }
.datePickerGrid button:hover { border-color: #1f736b; background: #e8f3f1; }
.datePickerGrid button.today { border-color: #b8c5d2; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .12); }
.datePickerGrid button.selected { background: #1f736b; border-color: #1f736b; color: #fff; }
.datePickerGrid button.disabled,
.datePickerGrid button:disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
}
.datePickerFooter { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.fieldHead { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.dictationControls { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.dictate { min-height: 28px; padding: 4px 8px; font-size: 12px; }
.secondaryDictate { background: #f7fafb; color: #34444f; }
button.recording, .dictate.recording { background: #b3261e; border-color: #b3261e; color: #fff; }
button.processing, .dictate.processing { background: #7a5a12; border-color: #7a5a12; color: #fff; }
.dictatingField { border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179, 38, 30, .14); background: #fffdfc; }
.list { display: grid; gap: 9px; }
.item { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 11px; border: 1px solid #e0e7ee; border-radius: 7px; background: #fbfcfd; }
.item.vertical { flex-direction: column; }
.item.vertical > * { width: 100%; }
.item.vertical .formActions { justify-content: flex-start; }
.item strong { display: block; }
.timeline { display: grid; gap: 8px; margin-top: 10px; }
.timelineItem { border-left: 3px solid #2d6cdf; background: #f7faff; padding: 8px 10px; border-radius: 6px; }
.timelineItem span { display: block; color: #64748b; font-size: 12px; margin-top: 2px; }
.notice.warning { margin-top: 8px; border: 1px solid #e4c56a; background: #fff8df; color: #4c3800; border-radius: 6px; padding: 8px 10px; }
.actionItem { align-items: stretch; }
.itemMain { display: grid; gap: 4px; flex: 1; min-height: 0; padding: 0; border: 0; background: transparent; text-align: left; font-weight: 700; }
.itemActions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.itemActions button { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.itemActions .buttonLink { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.detailPanel { margin-bottom: 14px; }
.detailGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.detailGrid div { display: grid; gap: 4px; border: 1px solid #e0e7ee; border-radius: 7px; background: #fbfcfd; padding: 10px; }
.detailGrid small { color: #667582; font-weight: 800; }
.detailGrid strong { white-space: pre-wrap; font-size: 13px; line-height: 1.4; }
.workflowPanel { margin-bottom: 14px; }
.workflowGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.workflowStep { display: grid; gap: 6px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 11px; }
.workflowStep span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 999px; background: #e8f3f1; color: #1f736b; font-weight: 900; }
.workflowStep p { color: #5a6875; font-size: 13px; line-height: 1.4; }
.personsLayout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(150px, 1fr); gap: 14px; align-items: start; }
.personListPanel .editorHeader { align-items: center; }
.addPersonButton { display: inline-flex; align-items: center; gap: 8px; background: #147e72; border-color: #147e72; white-space: nowrap; }
.addPersonButton span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #ffd23f; color: #17202a; font-size: 20px; line-height: 1; font-weight: 900; }
.personContextPanel { min-height: 0; padding: 12px; }
.personContextPanel h2 { font-size: 18px; margin-bottom: 6px; }
.personContextPanel p { color: #5a6875; font-size: 13px; line-height: 1.4; }
.compactInfoList { margin: 10px 0 0; padding-left: 18px; color: #34444f; font-size: 13px; line-height: 1.45; }
.compactInfoList li + li { margin-top: 6px; }
.personListPanel .item { align-items: stretch; }
.personListPanel .itemMain { gap: 8px; }
.personListPanel .itemMain strong { font-size: 16px; }
#content .personListPanel > .list {
  display: grid;
  gap: 12px;
}
#content .personListPanel > .list > .item.actionItem {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 96px !important;
  padding: 10px !important;
}
#content .personListPanel > .list > .item.actionItem > .itemMain {
  min-width: 0 !important;
  width: 100% !important;
  align-self: center !important;
  height: auto !important;
  align-content: start !important;
  padding: 10px 12px !important;
}
#content .personListPanel > .list > .item.actionItem > .itemActions {
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 260px !important;
  max-width: 420px !important;
  justify-content: flex-end !important;
  align-content: center !important;
}
#content .personListPanel > .list > .item.actionItem > .itemActions :where(button, .buttonLink, .pill) {
  flex: 0 0 auto !important;
  min-height: 30px !important;
  white-space: nowrap !important;
}
@media (max-width: 1200px) {
  #content .personListPanel > .list > .item.actionItem {
    grid-template-columns: 1fr !important;
  }
  #content .personListPanel > .list > .item.actionItem > .itemActions {
    justify-self: stretch !important;
    justify-content: flex-start !important;
    max-width: none !important;
  }
}
.personContactMeta { display: grid; gap: 3px; color: #34444f; font-size: 13px; line-height: 1.35; font-weight: 650; }
.personContactMeta span { overflow-wrap: anywhere; }
.personFileMeta { display: flex; flex-wrap: wrap; gap: 6px; color: #667582; font-size: 12px; line-height: 1.35; font-weight: 800; }
.personFileMeta span { display: inline-flex; align-items: center; border-radius: 999px; background: #edf3f6; padding: 2px 7px; }
.initialDocumentsBox { display: grid; gap: 10px; border: 1px solid #dbe3ea; border-left: 5px solid #1f736b; border-radius: 7px; background: #fbfcfd; padding: 12px; }
.initialDocumentsBox h3 { margin: 0; font-size: 16px; }
.initialDocumentsBox textarea { min-height: 70px; }
.modalBackdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 22px; background: rgba(17, 47, 58, .42); }
.modalSheet { width: min(1120px, calc(100vw - 44px)); max-height: calc(100vh - 44px); overflow: auto; border: 1px solid #c9d3dd; border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(18, 38, 50, .34); padding: 16px; }
.modalHeader { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid #dbe3ea; }
.personModal { display: grid; gap: 14px; }
.personModal {
  width: min(1180px, calc(100vw - 64px));
  max-height: calc(100vh - 52px);
  overflow: auto;
}
.personCreateWizard {
  gap: 10px !important;
}
.personCreateWizard .inlineSubPanel {
  padding: 12px !important;
  gap: 8px !important;
}
.personCreateWizard .detailsSummary {
  min-height: 42px;
}
.personCreateWizard :where(textarea) {
  min-height: 66px;
}
.personCreateWizard .initialDocumentsBox {
  padding: 12px !important;
}
.personCreateWizard :where(.two, .three) {
  align-items: stretch;
}
.personCreateWizard :where(label, .field) {
  display: grid;
  align-content: start;
}
.personCreateWizard :where(input, select) {
  min-height: 36px;
}
.wizardSectionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: stretch;
}
.wizardSectionGrid > .wide,
.wizardSectionGrid > label.wide {
  grid-column: 1 / -1;
}
.wizardSectionGrid label,
.initialDocumentsBox label {
  display: grid;
  align-content: start;
  gap: 4px;
}
.personCreateWizard .personCreateStepGrid {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start;
  overflow: hidden;
}
.personCreateWizard .personCreateStepGrid > label,
.personCreateWizard .personCreateStepGrid > div {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.personCreateWizard .personCreateStepGrid > .wide,
.personCreateWizard .personCreateStepGrid > .wide > label {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.personCreateWizard .personCreateStepGrid input,
.personCreateWizard .personCreateStepGrid select,
.personCreateWizard .personCreateStepGrid textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.personCreateWizard .personCreateStepGrid textarea {
  width: 100%;
  box-sizing: border-box;
}
.personCreateWizard .personCreateStepGrid .fieldHead {
  align-items: center;
  min-height: 28px;
}

#content .personCreateWizard .personCreateSection3 {
  box-sizing: border-box;
  overflow: hidden;
}

#content .personCreateWizard .personCreateSection3 > .personCreateStepGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 8px 8px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#content .personCreateWizard .personCreateSection3 > .personCreateStepGrid > label {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-content: start !important;
}

#content .personCreateWizard .personCreateSection3 > .personCreateStepGrid > .wide {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#content .personCreateWizard .personCreateSection3 :where(input, textarea, select) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.comfortSearchRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  padding: 8px;
  border: 1px solid #d7e0e8;
  border-radius: 7px;
  background: #f8fbff;
}
.comfortSearchRow .buttonLink {
  margin: 0;
}
.initialDocumentsBox .three {
  align-items: stretch;
}
.onboardingDoctorModal .onlineSearchBox,
.onboardingAuthorityModal .onlineSearchBox {
  display: grid;
  gap: 8px;
  border: 1px solid #d7e0e8;
  border-radius: 7px;
  background: #f8fbff;
  padding: 10px;
  margin-bottom: 10px;
}
.personModal form,
.personModal .grid,
.personModal .modalSubsection,
.personModal .personFieldBlock,
.personModal .addressEditor,
.personModal .scopeEditor,
.personModal .consentReservationBox,
.personModal .authorityStack,
.personModal .authorityInlineItem { width: 100%; min-width: 0; box-sizing: border-box; }
.personModal :where(.two, .three) { align-items: stretch; }
.personModal label { min-width: 0; }
.personModal input,
.personModal select,
.personModal textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.personFieldBlock,
.addressEditor,
.scopeEditor { display: grid; gap: 12px; border: 1px solid #cddaf0; border-radius: 7px; background: #fbfcfd; padding: 12px; }
.personFieldBlock h3,
.addressEditor h3,
.scopeEditor h3 { margin: 0; font-size: 16px; }
.personFieldBlock label,
.addressEditor label,
.scopeEditor label { display: grid; gap: 4px; align-content: start; }
.addressGrid { display: grid; grid-template-columns: 120px minmax(150px, 1fr) minmax(240px, 1.8fr) 110px; gap: 10px; align-items: end; }
.streetSuggestionList { display: none; gap: 6px; flex-wrap: wrap; align-items: center; border: 1px solid #cfe2df; border-radius: 7px; background: #fff; padding: 8px; box-shadow: 0 8px 24px rgba(18, 38, 50, .08); }
.streetSuggestionList.active { display: flex; }
.streetSuggestionList button { padding: 6px 10px; font-size: 12px; border-radius: 999px; background: #e8f3f1; color: #1f736b; border-color: #b9d8d3; }
.streetSuggestionList button:hover { background: #d6ebe7; border-color: #1f736b; }
.streetSuggestionHint { color: #667786; font-size: 12px; font-weight: 650; }
.scopeChecklist { display: grid; gap: 8px; }
.scopeChecklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scopeRow { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(220px, 1.1fr); gap: 10px; align-items: end; border: 1px solid #d7e0e8; border-radius: 7px; background: #fff; padding: 10px; min-width: 0; }
.scopeCheck { display: flex !important; flex-direction: row !important; gap: 8px !important; align-items: center !important; min-height: 36px; font-weight: 850; }
.scopeCheck input { width: auto !important; min-width: auto !important; }
.scopeNote input { min-height: 34px; }
.scopeCheck { display: flex; grid-auto-flow: column; grid-template-columns: auto 1fr; align-items: flex-start; gap: 8px; font-size: 13px; color: #17202a; }
.scopeCheck input { width: auto; margin-top: 2px; }
.scopeNote input { min-height: 36px; }
.modalSubsection { border-top: 1px solid #dbe3ea; padding-top: 16px; display: grid; gap: 12px; }
.authorityStack { display: grid; gap: 16px; }
.authorityStack > div { min-width: 0; }
.authorityStack h3 { margin: 0 0 8px; font-size: 16px; }
.authorityList { margin-bottom: 2px; }
.authorityInlineItem { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; overflow: hidden; }
.authorityInlineItem summary { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 11px; cursor: pointer; list-style: none; }
.authorityInlineItem summary::-webkit-details-marker { display: none; }
.authorityInlineItem summary strong,
.authorityInlineItem summary small { display: block; }
.authorityInlineItem summary small { color: #667582; margin-top: 3px; line-height: 1.3; }
.authorityInlineItem form { padding: 0 11px 11px; }
.authorityInlineItem > .formActions { justify-content: flex-start; padding: 0 11px 11px; margin-top: 0; }
.formsPanel { margin-bottom: 14px; }
.officialFormUploadPanel { margin-bottom: 14px; border-left: 5px solid #1f736b; }
.formLibraryGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; max-height: 360px; overflow: auto; padding-right: 4px; }
.formCard { display: grid; gap: 5px; min-height: 104px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 10px; color: inherit; text-decoration: none; }
.formCard small { color: #1f736b; font-weight: 850; }
.formCard strong { font-size: 16px; }
.formCard span { color: #5a6875; font-size: 13px; line-height: 1.35; }
.formCardActions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.applicationCatalog { display: grid; gap: 8px; margin-top: 12px; }
.catalogGroup { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; overflow: hidden; }
.catalogGroup summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px; cursor: pointer; list-style: none; }
.catalogGroup summary::-webkit-details-marker { display: none; }
.catalogGroup summary strong { display: block; }
.catalogGroup summary small { color: #667582; display: block; margin-top: 2px; }
.catalogRows { display: grid; gap: 6px; border-top: 1px solid #dbe3ea; padding: 8px; max-height: 330px; overflow: auto; }
.catalogRow { display: grid; grid-template-columns: minmax(260px, 1fr) 190px 110px minmax(190px, auto); gap: 10px; align-items: center; border: 1px solid #e0e7ee; border-radius: 6px; background: #fff; padding: 10px; }
.catalogRow span { min-width: 0; }
.catalogRow strong { display: block; overflow-wrap: anywhere; }
.catalogRow small { display: block; color: #667582; margin-top: 2px; line-height: 1.25; }
.catalogActions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.catalogActions button, .catalogActions .buttonLink { min-height: 32px; padding: 5px 8px; font-size: 12px; }
.sourceInline { color: #1f736b; font-weight: 850; text-decoration: none; }
.sourceInline:hover { text-decoration: underline; }
.buttonLink { min-height: 36px; border: 1px solid #b8c5d2; border-radius: 6px; background: #fff; color: #17202a; padding: 7px 10px; cursor: pointer; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; }
.buttonLink:hover { border-color: #1f736b; background: #f8fcfb; }
.navButton { border-color: #1f736b; color: #1f736b; background: #f8fcfb; }
.callButton { border-color: #1f6f9f; color: #14577d; background: #f3f9fd; }
.emailButton { border-color: #7a5a12; color: #59400f; background: #fff8e8; }
.detailsSummary { display: flex; justify-content: space-between; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.detailsSummary::-webkit-details-marker { display: none; }
.detailsSummary strong,
.detailsSummary small { display: block; }
.detailsSummary small { color: #667582; margin-top: 2px; line-height: 1.35; }
details.panel > form,
details.panel > .sourceGrid { margin-top: 12px; }
.compensationOverviewPanel { margin-bottom: 14px; }
.compensationStats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.compensationStat { display: grid; gap: 3px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 10px; min-height: 68px; }
.compensationStat span { color: #667582; font-size: 12px; font-weight: 850; }
.compensationStat strong { color: #1f736b; font-size: 21px; overflow-wrap: anywhere; }
.compensationBoard { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr); gap: 14px; align-items: start; }
.compensationMainStack, .compensationSideStack { display: grid; gap: 14px; min-width: 0; }
.compensationListPanel, .compensationFormPanel, .compensationPackagesPanel, .compensationToolsPanel { min-width: 0; }
.compensationBatchPanel { margin-bottom: 0; }
.compensationList { max-height: 520px; overflow: auto; padding-right: 4px; }
.compensationListItem .itemMain strong { font-size: 16px; }
.compensationToolsPanel { display: grid; gap: 10px; }
.toolList { display: grid; gap: 8px; }
.toolList button { width: 100%; justify-content: flex-start; text-align: left; }
.compensationVordruckPanel { margin-top: 14px; }
.compensationVordruckInner { display: grid; gap: 14px; margin-top: 12px; }
.simpleOverviewPanel { margin-bottom: 14px; }
.simpleBoard { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(300px, .62fr); gap: 14px; align-items: start; }
.simpleMainStack, .simpleSideStack { display: grid; gap: 14px; min-width: 0; }
.simpleListPanel, .simpleToolsPanel, .simpleDetailsPanel, .simpleVordruckPanel { min-width: 0; }
.simpleToolsPanel { display: grid; gap: 10px; }
.simpleVordruckPanel { margin-top: 14px; border-left: 5px solid #1f736b; }
.simpleVordruckInner { display: grid; gap: 14px; margin-top: 12px; }
.protocolTemplateGrid { grid-template-columns: 1fr; }
.protocolModal { width: min(1060px, calc(100vw - 44px)); }
.protocolForm .compensationDetails { margin: 0; }
.deadlineWork, .calendarWork { margin-top: 14px; }
.deadlineWork .list, .calendarWork .list { max-height: 440px; overflow: auto; padding-right: 4px; }
.calendarPlanningPanel {
  margin-top: 14px;
  margin-bottom: 104px;
}
.calendarPlanningPanel .calendarPlanningSummary {
  min-height: 58px;
  padding-right: 112px;
}
.calendarPlanningPanel .calendarPlanningSummary strong {
  font-size: 18px;
}
.calendarPlanningPanel .calendarPlanningSummary small {
  color: #34444f;
  font-size: 14px;
  font-weight: 750;
}
.calendarPlanningPanel .calendarPlanningSummary .pill {
  background: #e8f3f1;
  border-color: #8fc7bd;
  color: #145b55;
  font-size: 13px;
  font-weight: 900;
  min-height: 30px;
  padding: 5px 11px;
}
.calendarPlanningPanel :where(label, input, select, textarea, button, .muted, .empty) {
  font-size: 14px;
}
.calendarPlanningGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 12px; align-items: stretch; }
.calendarPlanningGrid .inlineSubPanel { min-width: 0; height: 100%; }
.compactWorkflow { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.compactLongForm { gap: 12px; }
.compactLongForm textarea { min-height: 82px; }
.reportModal { width: min(1040px, calc(100vw - 44px)); }
.compensationModal { width: min(980px, calc(100vw - 44px)); }
.compensationForm { gap: 12px; }
.compensationMainFields { align-items: end; }
.compensationResultBox { display: grid; grid-template-columns: 1.1fr .55fr .75fr .9fr; gap: 10px; border: 1px solid #b9d8d3; border-left: 5px solid #1f736b; border-radius: 7px; background: #f4fbf9; padding: 12px; }
.compensationResultBox div { display: grid; gap: 4px; }
.compensationResultBox span { color: #5a6875; font-size: 12px; font-weight: 850; }
.compensationResultBox strong { color: #1f736b; font-size: 24px; }
.compactBreakdown textarea { min-height: 86px; max-height: 150px; font-size: 12px; background: #fbfcfd; }
.compensationDetails { padding: 0; border-left: 0; background: #fff; gap: 0; }
.compensationDetails summary { padding: 8px 10px; min-height: 0; }
.compensationDetails .detailsSummary small { margin-top: 1px; }
.compensationDetails > .three,
.compensationDetails > label { padding: 0 10px 10px; }
.stickyFormActions { position: sticky; bottom: -16px; background: #fff; border-top: 1px solid #dbe3ea; padding-top: 12px; margin-top: 0; }
.batchGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.batchCard { display: grid; gap: 10px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; }
.batchCard strong, .batchCard span { display: block; }
.miniList { display: grid; gap: 4px; font-size: 12px; color: #34444f; line-height: 1.35; }
.courtPackageWorkspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr); gap: 14px; align-items: start; }
.courtPackageListPanel, .courtPackageFormPanel { min-width: 0; }
.courtManagementGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.courtSearchPanel, .courtFormPanel, .courtListPanel { min-width: 0; }
.courtSearchPanel { display: flex; flex-direction: column; }
.courtSearchBar { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 10px; align-items: end; margin-top: 10px; }
.courtResultList { display: grid; gap: 8px; margin-top: 12px; }
.courtSearchPanel .courtResultList { max-height: 315px; overflow: auto; padding-right: 6px; }
.courtResult { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 11px; }
.courtResult strong, .courtResult span, .courtResult small { display: block; }
.courtResult .inlineBadge { display: inline-flex; vertical-align: middle; margin-left: 6px; }
.courtResult small { margin-top: 4px; color: #667582; line-height: 1.35; font-weight: 700; }
.courtResultMeta { border: 1px solid #dbe3ea; border-radius: 7px; background: #eef7f5; color: #1f736b; padding: 8px 10px; font-weight: 850; font-size: 13px; }
.courtEmpty { display: grid; gap: 4px; border: 1px dashed #c9d3dd; border-radius: 7px; background: #fbfcfd; color: #34444f; padding: 12px; }
.courtEmpty span { color: #667582; line-height: 1.4; }
.inlineBadge { display: inline-flex; align-items: center; border-radius: 999px; background: #e8f3f1; color: #1f736b; padding: 2px 7px; font-size: 11px; font-weight: 900; }
.bbbWorkspace { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr); gap: 14px; align-items: start; }
.bbbRoomsPanel, .bbbCreatePanel, .bbbServerPanel, .bbbServerFormPanel, .bbbToolsPanel { min-width: 0; }
.bbbBoard { grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); }
.bbbRoomList, .bbbServerList { max-height: 520px; overflow: auto; padding-right: 4px; }
.bbbRoomItem .itemMain { gap: 5px; }
.bbbRoomItem .itemMain strong { font-size: 16px; }
.bbbMiniFlow { display: grid; gap: 8px; margin-top: 10px; }
.bbbMiniFlow span { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: center; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 9px; color: #34444f; font-size: 13px; line-height: 1.35; }
.bbbMiniFlow strong { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: #e8f3f1; color: #1f736b; font-weight: 900; }
.bbbServerManagementGrid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); gap: 14px; margin-top: 12px; align-items: start; }
.bbbRoomModal { width: min(1040px, calc(100vw - 44px)); }
.bbbMeetingPanel { margin-bottom: 14px; }
.bbbMeetingGrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr); gap: 14px; align-items: start; }
.bbbFrameWrap { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; overflow: hidden; min-height: 520px; }
.bbbFrameToolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px; border-bottom: 1px solid #dbe3ea; background: #fff; }
.bbbFrame { width: 100%; min-height: 520px; border: 0; background: #fff; display: block; }
.bbbFramePlaceholder { min-height: 520px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; color: #667582; padding: 20px; }
.bbbFramePlaceholder strong { color: #17202a; }
.bbbInviteBox { display: grid; gap: 12px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; }
.bbbQr { width: 180px; height: 180px; border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 8px; justify-self: start; }
.bbbInviteActions { justify-content: flex-start; margin-top: 0; }
.meetingsBoard { grid-template-columns: minmax(0, 2.05fr) minmax(340px, .38fr); }
.meetingRoomShell {
  display: grid;
  gap: 16px;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, var(--bw-line, #dbe3ea));
  border-radius: 8px;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--bw-accent, #1f6feb) 20%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-surface-2, #ffffff) 92%, var(--bw-accent, #1f6feb) 8%), var(--bw-surface, #ffffff));
  box-shadow: 0 22px 58px rgba(17, 31, 43, .08);
  padding: clamp(18px, 2vw, 28px);
  min-height: 520px;
}
.meetingRoomHero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  max-width: 980px;
}
.meetingRoomHero strong {
  display: block;
  color: var(--bw-ink);
  font-size: clamp(24px, 2vw, 38px);
  line-height: 1.05;
}
.meetingRoomHero p {
  margin-top: 8px;
  color: var(--bw-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 820px;
}
.meetingRoomOrb {
  width: 88px;
  height: 88px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.9), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 82%, #ffffff 18%), var(--bw-accent-dark, #174ea6));
  color: #fff;
  box-shadow:
    0 20px 44px color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.meetingRoomOrb span {
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 22px;
}
.meetingRoomActionGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.meetingRoomFacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.meetingRoomFacts span {
  display: grid;
  gap: 6px;
  min-height: 104px;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, var(--bw-line, #dbe3ea));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bw-surface-3, #f7fafc) 84%, transparent);
  padding: 14px;
}
.meetingRoomFacts b {
  color: var(--bw-ink);
  font-size: 14px;
}
.meetingRoomFacts em {
  color: var(--bw-muted);
  font-style: normal;
  line-height: 1.4;
}
.meetingPreviewDetails {
  border: 1px dashed color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, var(--bw-line, #dbe3ea));
  border-radius: 8px;
  background: color-mix(in srgb, var(--bw-surface-2, #ffffff) 84%, transparent);
  padding: 12px;
}
.meetingPreviewDetails > summary {
  cursor: pointer;
  color: var(--bw-accent);
  font-weight: 900;
  list-style: none;
}
.meetingPreviewDetails > summary::-webkit-details-marker { display: none; }
.meetingPreviewDetails[open] > summary { margin-bottom: 10px; }
.meetingFrameWrap { margin-top: 12px; min-height: clamp(680px, 74vh, 920px); }
.meetingFrameWrap .bbbFrame,
.meetingFrameWrap .bbbFramePlaceholder { height: clamp(680px, 74vh, 920px); min-height: clamp(680px, 74vh, 920px); }
.meetingSidePanel { align-self: start; }
.meetingDisplayNameBox {
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 26%, var(--bw-line, #dbe3ea));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 8%, var(--bw-surface, #fff)), var(--bw-surface, #fff));
  padding: 12px;
  display: grid;
  gap: 8px;
}
.meetingDisplayNameBox .grid { gap: 9px; }
.meetingDisplayNameBox .formActions { justify-content: flex-start; margin-top: 0; }
.meetingAppointmentList { max-height: 360px; overflow: auto; padding-right: 4px; }
.compactMeetingForm textarea { min-height: 96px !important; }
.customerWorkspace { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(430px, .9fr); gap: 14px; align-items: start; }
.customerListPanel, .customerFormPanel, .provisionPanel { min-width: 0; }
.emailWorkspace { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(460px, .95fr); gap: 14px; align-items: start; }
.emailListPanel, .emailComposePanel, .emailServerPanel { min-width: 0; }
.emailList { max-height: 620px; overflow: auto; padding-right: 4px; }
.emailItem .itemMain { gap: 6px; }
.emailItem .itemMain strong { font-size: 16px; }
.emailItem.unread { border-color: #e2b64a; background: #fff9e8; box-shadow: inset 4px 0 0 #ffd23f; }
.mailUnreadDot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 999px; background: #ffd23f; box-shadow: 0 0 0 3px rgba(255, 210, 63, .24); vertical-align: middle; }
.mailReadPanel { display: grid; gap: 12px; }
.emailForm textarea { min-height: 180px; }
.emailAttachmentList { max-height: 260px; }
.emailServerGrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(460px, 1.1fr); gap: 14px; margin-top: 12px; align-items: start; }
.warningBox { display: grid; gap: 4px; border: 1px solid #e4c56a; border-left: 5px solid #d49a00; border-radius: 7px; background: #fff8df; padding: 11px; margin-top: 12px; color: #4c3800; }
.warningBox strong { color: #17202a; }
.warningBox span { line-height: 1.4; }
.inlineSubPanel { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; display: grid; gap: 10px; }
.inlineSubPanel h3 { margin: 0; font-size: 16px; }
.inlineSubPanel p { white-space: pre-wrap; color: #34444f; line-height: 1.45; }
.easyBackupPage { display: grid; gap: 14px; }
.easyBackupPage form { gap: 14px; }
.backupDecisionGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.backupDecisionCard { height: 100%; }
.easyStep { border: 1px solid #dbe3ea; border-radius: 8px; background: #fbfcfd; padding: 14px; display: grid; gap: 12px; }
.easyStepHead { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.easyStepHead > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #1f736b; color: #fff; font-weight: 950; }
.easyStepHead h3 { font-size: 18px; }
.easyStepHead p { color: #667582; font-size: 13px; margin-top: 2px; }
.easyChoiceGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.easyChoice { position: relative; min-height: 116px; border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 12px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 10px; align-items: start; cursor: pointer; }
.easyChoice input { position: absolute; opacity: 0; pointer-events: none; }
.easyChoice:has(input:checked) { border-color: #1f736b; background: #eef8f6; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .16); }
.easyChoiceIcon { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: #e8f3f1; color: #1f736b; font-size: 10px; font-weight: 950; }
.easyChoice strong { align-self: end; font-size: 15px; }
.easyChoice small { color: #667582; font-size: 12px; line-height: 1.35; }
.easyLocalAction { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border: 1px dashed #b8c5d2; border-radius: 8px; background: #fff; padding: 10px; }
.easyLocalAction span { color: #667582; font-size: 13px; font-weight: 700; }
.easyAdvanced { border: 1px solid #dbe3ea; border-radius: 8px; background: #fff; padding: 12px; }
.easyAdvanced summary { cursor: pointer; color: #1f736b; font-weight: 900; }
.easyAdvanced[open] summary { margin-bottom: 12px; }
.simpleLockNote { border: 1px solid #f1d69b; border-left: 5px solid #d08b00; border-radius: 8px; background: #fff9e8; color: #684600; padding: 10px; font-weight: 800; line-height: 1.4; }
.easyStep { border: 1px solid #dbe3ea; border-radius: 8px; background: #fbfcfd; padding: 14px; display: grid; gap: 12px; }
.easyStepHead { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: start; }
.easyStepHead > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: #1f736b; color: #fff; font-weight: 950; }
.easyStepHead h3 { font-size: 18px; }
.easyStepHead p { color: #667582; font-size: 13px; margin-top: 2px; line-height: 1.35; }
.easyChoiceGrid { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 12px; }
.easyChoice { position: relative; min-height: 142px; display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-content: start; align-items: start; gap: 7px 12px; border: 1px solid #d7e0e8; border-radius: 8px; background: #fff; padding: 14px; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; }
.easyChoice input { position: absolute; opacity: 0; pointer-events: none; }
.easyChoice:has(input:checked) { border-color: #1f736b; background: #f4fbf9; box-shadow: inset 0 0 0 2px rgba(31, 115, 107, .18); }
.easyChoice strong { grid-column: 2; grid-row: 1; align-self: start; min-width: 0; font-size: 16px; line-height: 1.16; color: #17202a; }
.easyChoice small { grid-column: 2; grid-row: 2; min-width: 0; color: #667582; line-height: 1.35; font-weight: 750; }
.easyChoiceIcon { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 52px; height: 42px; border-radius: 8px; border: 1px solid #cbd8e2; background: linear-gradient(180deg, #fff, #eef4f7); display: grid; place-items: center; color: #1f736b; font-size: 11px; font-weight: 950; letter-spacing: .04em; }
.easyChoiceIcon.server { color: #112f3a; }
.easyChoiceIcon.hdd { color: #1f736b; }
.easyChoiceIcon.nas { color: #7a5a00; }
.easyLocalAction { border: 1px dashed #b8c5d2; border-radius: 8px; background: #fff; padding: 11px; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.easyLocalAction span { color: #667582; font-size: 13px; font-weight: 750; line-height: 1.35; flex: 1; min-width: 260px; }
.simpleLockNote { border: 1px solid #dbe3ea; border-left: 5px solid #9aacb8; border-radius: 7px; background: #fff; color: #4d5e68; padding: 10px; font-weight: 800; }
.easyAdvanced { border: 1px solid #dbe3ea; border-radius: 8px; background: #fff; padding: 12px; }
.easyAdvanced summary { cursor: pointer; color: #1f736b; font-weight: 950; }
.easyAdvanced[open] summary { margin-bottom: 12px; }
.controlDnsBox { display: grid; gap: 7px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 10px; color: #34444f; font-size: 13px; font-weight: 750; line-height: 1.35; }
.compactControlForm { gap: 10px; }
.attachmentPickList { display: grid; gap: 8px; max-height: 280px; overflow: auto; padding-right: 4px; }
.attachmentChoice { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; border: 1px solid #e0e7ee; border-radius: 7px; background: #fff; padding: 10px; cursor: pointer; }
.attachmentChoice input { width: auto; margin-top: 2px; }
.attachmentChoice strong, .attachmentChoice small { display: block; }
.attachmentChoice small { margin-top: 3px; color: #667582; line-height: 1.3; }
.sourcePanel { margin-bottom: 14px; }
.journalSwitchPanel { margin-bottom: 14px; }
.journalTabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.journalTabs button { min-height: 44px; background: #fbfcfd; text-align: center; }
.journalTabs button.active { background: #1f736b; border-color: #1f736b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.journalWorkspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .75fr); gap: 14px; align-items: start; }
.journalListPanel, .journalFormPanel { min-width: 0; }
.journalStats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.journalStat { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 10px; display: grid; gap: 4px; }
.journalStat span { color: #667582; font-size: 12px; font-weight: 800; }
.journalStat strong { color: #1f736b; font-size: 20px; overflow-wrap: anywhere; }
.journalEntryList .itemMain strong { font-size: 16px; }
.journalForm .three { align-items: end; }
.wealthSwitchPanel { margin-bottom: 14px; }
.wealthTabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wealthTabs button { min-height: 44px; background: #fbfcfd; text-align: center; }
.wealthTabs button.active { background: #1f736b; border-color: #1f736b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.wealthWorkspace { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(360px, .72fr); gap: 14px; align-items: start; }
.statementSummaryGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.statementImportForm textarea { min-height: 160px; }
.courtUseControls { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.courtUseControls select { min-width: 230px; max-width: 320px; }
.wealthListPanel, .wealthFormPanel { min-width: 0; }
.wealthTableWrap { overflow: auto; border: 1px solid #d7e0e8; border-radius: 7px; background: #fff; }
.wealthTable { width: 100%; min-width: 920px; border-collapse: collapse; font-size: 13px; }
.wealthTable th, .wealthTable td { padding: 9px 10px; border-bottom: 1px solid #e0e7ee; text-align: left; vertical-align: top; }
.wealthTable th { position: sticky; top: 0; z-index: 1; background: #fbfcfd; color: #34444f; font-size: 12px; text-transform: uppercase; letter-spacing: 0; }
.wealthTable tbody tr:hover { background: #f8fcfb; }
.moneyCell { white-space: nowrap; font-weight: 850; color: #1f736b; text-align: right; }
.tableActions { display: flex; gap: 6px; flex-wrap: wrap; }
.tableActions button { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.templateGrid, .sourceGrid, .checkGrid { display: grid; gap: 9px; }
.lawSearch { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 14px 0; }
.lawAnswerBox { display: grid; gap: 8px; border: 1px solid #b9d8d3; border-left: 5px solid #1f736b; border-radius: 7px; background: #f4fbf9; padding: 13px; margin-top: 12px; }
.lawAnswerBox p { white-space: pre-wrap; line-height: 1.45; color: #23313a; }
.lawAnswerBox small { color: #5a6875; font-weight: 750; }
.sourceGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.templateGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.templateCard, .sourceCard { display: grid; gap: 5px; text-align: left; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 11px; color: inherit; text-decoration: none; min-height: 92px; }
.templateCard span, .sourceCard span { color: #5a6875; font-size: 13px; line-height: 1.35; font-weight: 500; }
.templateCard.active { border-color: #1f736b; background: #e8f3f1; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .18); }
.sourceCard small { color: #1f736b; font-weight: 850; }
.sourceCard em { color: #667582; font-size: 12px; font-style: normal; line-height: 1.35; }
.lawWatchNotice { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid #d7e5e2; border-left: 5px solid var(--bw-teal); border-radius: 8px; background: #f4fbf9; padding: 12px; margin: 12px 0; }
.lawWatchNotice span { color: #34444f; line-height: 1.4; }
.lawImportActions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 8px; }
.lawImportStatus { border: 1px dashed #c8d6de; border-radius: 8px; background: #fbfcfd; padding: 10px 12px; white-space: pre-wrap; }
.lawLibrary { display: grid; gap: 10px; margin-top: 10px; }
.lawBook { border: 1px solid #dbe3ea; border-radius: 9px; background: #fff; overflow: hidden; }
.lawBook > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 58px; padding: 12px 14px; }
.lawBook > summary::-webkit-details-marker, .lawLibraryLaw > summary::-webkit-details-marker, .lawNormEntry > summary::-webkit-details-marker, .lawNormCard > summary::-webkit-details-marker, .lawIndexCard > summary::-webkit-details-marker { display: none; }
.lawBook > summary span { display: grid; gap: 2px; min-width: 0; }
.lawBook > summary strong { font-size: 18px; }
.lawBook > summary small { color: #5f6f7c; line-height: 1.35; }
.lawBook > summary b { min-width: 34px; height: 30px; border-radius: 999px; background: var(--bw-accent-soft); color: var(--bw-teal); display: grid; place-items: center; font-size: 13px; }
.lawBook[open] { border-color: color-mix(in srgb, var(--bw-teal) 45%, #dbe3ea); box-shadow: 0 12px 28px rgba(17,31,43,.06); }
.lawBookBody { display: grid; gap: 9px; padding: 0 12px 12px; }
.lawSubBooks { display: grid; gap: 9px; }
.lawSubBook { background: #fbfcfd; }
.lawSubBook > summary strong { font-size: 15px; }
.lawLibraryLaw { border: 1px solid #dbe3ea; border-radius: 8px; background: #fff; overflow: hidden; }
.lawLibraryLaw > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; }
.lawLibraryLaw > summary span { display: grid; gap: 2px; min-width: 0; }
.lawLibraryLaw > summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lawLibraryLaw > summary small { color: #65727e; }
.lawLibraryLaw > summary em { border-radius: 999px; background: #edf2f5; color: #64727d; padding: 4px 8px; font-style: normal; font-size: 12px; font-weight: 850; white-space: nowrap; }
.lawLibraryLaw > summary em.ready { background: var(--bw-accent-soft); color: var(--bw-teal); }
.lawLibraryText { border-top: 1px solid #edf1f4; padding: 12px; }
.lawOfficialLinks { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
.lawOfficialLinks.compact { margin: 8px 0; }
.lawOfficialLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 42%, #cbd7e3);
  border-radius: 999px;
  padding: 7px 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 12%, #ffffff), #ffffff);
  color: var(--bw-accent-dark, #174ea6) !important;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent);
}
.lawOfficialLink:hover { transform: translateY(-1px); box-shadow: 0 14px 28px color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, transparent); }
.lawLocalLoadButton { margin-top: 6px; width: fit-content; }
html[data-theme="dark"] .lawOfficialLink,
html[data-theme="office"] .lawOfficialLink {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-accent, #6ea6ff) 28%, var(--bw-surface-2, #17232d)), var(--bw-surface, #101820)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #6ea6ff) 58%, var(--bw-line, #314354)) !important;
  color: #ffffff !important;
}
.lawFullText { display: grid; gap: 10px; }
.lawFullTextHead { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--bw-accent-soft); color: #183037; }
.lawFullTextHead span { color: #50616d; font-size: 12px; }
.lawNormListHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #dbe3ea; border-radius: 8px; background: #fff; }
.lawNormListHead span { border-radius: 999px; background: var(--bw-accent-soft); color: var(--bw-teal); padding: 4px 9px; font-size: 12px; font-weight: 850; white-space: nowrap; }
.lawNormList { display: grid; gap: 6px; }
.lawNormSection { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 10px; border-radius: 8px; background: #eef5f7; color: #304451; font-size: 13px; font-weight: 850; }
.lawNormSection span { color: var(--bw-teal); min-width: 96px; }
.lawNormEntry { border: 1px solid #dbe3ea; border-radius: 8px; background: #fff; overflow: hidden; }
.lawNormEntry > summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: minmax(74px, 98px) minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; }
.lawNormEntry > summary b { color: var(--bw-teal); font-size: 15px; line-height: 1.35; white-space: nowrap; }
.lawNormEntry > summary span { display: grid; gap: 3px; min-width: 0; }
.lawNormEntry > summary strong { color: #0d1d28; line-height: 1.35; }
.lawNormEntry > summary small { color: #65727e; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lawNormEntry[open] { border-color: color-mix(in srgb, var(--bw-teal) 42%, #dbe3ea); box-shadow: 0 10px 24px rgba(17,31,43,.06); }
.lawNormBody { border-top: 1px solid #edf1f4; padding: 12px 14px 14px 110px; background: #fbfcfd; }
.lawNormBody p { margin: 0; white-space: pre-wrap; line-height: 1.6; color: #23313a; }
.lawNormFull { display: grid; gap: 6px; border: 1px solid #dbe3ea; border-radius: 8px; background: #fbfcfd; padding: 12px; }
.lawNormFull h4 { margin: 0; color: #0d1d28; }
.lawNormFull p { margin: 0; white-space: pre-wrap; line-height: 1.5; color: #23313a; }
.lawSourceLine { color: #65727e; font-size: 12px; }
.lawNormCard, .lawIndexCard { min-height: 0; }
.lawNormCard summary, .lawIndexCard summary { display: grid; gap: 5px; cursor: pointer; }
.lawNormCard p, .lawIndexCard p { margin: 7px 0 0; color: #34444f; line-height: 1.45; }
.lawNormCard a { color: var(--bw-teal); font-weight: 850; text-decoration: none; }
.protocolPreviewText { margin-top: 14px; display: grid; gap: 10px; }
.protocolPreviewText h3 { margin: 0; font-size: 14px; color: #1f736b; }
.protocolPreviewText p { margin: 0; white-space: pre-wrap; line-height: 1.5; }
.checkGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; }
.checkGrid span { display: flex; gap: 8px; align-items: flex-start; font-weight: 650; color: #34444f; }
.checkGrid input { width: auto; margin-top: 2px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 8px; background: #e8f3f1; color: #1f736b; font-size: 12px; font-weight: 800; }
.pill.warn { background: #fff4db; color: #7a5200; }
.formActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.wide { grid-column: 1 / -1; }
.signatureCanvas { width: 100%; height: 140px; border: 1px solid #aebccc; border-radius: 6px; background: #fff; touch-action: none; }
.docEditor { min-height: 260px; background: #fff; }
.documentViewerPanel { margin-bottom: 14px; }
.documentViewerFrame { width: 100%; height: min(78vh, 900px); min-height: 560px; border: 1px solid #d7e0e8; border-radius: 7px; background: #fff; }
.documentTextFrame { background: #fbfcfd; }
.documentImageStage { display: grid; place-items: center; min-height: 420px; max-height: 78vh; overflow: auto; border: 1px solid #d7e0e8; border-radius: 7px; background: #f6f8fa; padding: 12px; }
.documentImageStage img { max-width: 100%; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 8px 24px rgba(18, 38, 50, .12); background: #fff; }
.documentFileCard { display: grid; gap: 8px; border: 1px dashed #b8c5d2; border-radius: 7px; background: #fbfcfd; padding: 16px; }
.documentPdfPreview { width: 100%; min-height: 70vh; border: 1px solid #d7e0e8; border-radius: 7px; background: #fff; margin-top: 12px; }
.documentArchivePanel { margin-bottom: 14px; }
.documentArchiveTop { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.documentArchiveActions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; min-width: 0; }
.documentActionCard { display: grid; gap: 8px; align-content: start; height: 100%; border: 1px solid #d7e0e8; border-radius: 7px; background: #fbfcfd; padding: 10px; min-width: 0; box-sizing: border-box; }
.documentActionCard h2 { margin: 0; font-size: 16px; }
.compactDocumentForm { gap: 8px; }
.compactDocumentForm :where(label, input, select, button) { font-size: 12px; }
.compactDocumentForm input,
.compactDocumentForm select { min-height: 34px; }
.compactDocumentForm .formActions { margin-top: 2px; }
.digitalFileLayout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px; align-items: start; }
.fileAreaNav { display: grid; gap: 7px; border: 1px solid #d7e0e8; border-radius: 7px; background: #fbfcfd; padding: 8px; }
.fileAreaNav button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; }
.fileAreaNav button.active { border-color: #1f736b; background: #e8f3f1; color: #123f3a; box-shadow: inset 0 0 0 1px rgba(31, 115, 107, .16); }
.fileAreaNav strong { min-width: 28px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; background: #edf3f6; color: #34444f; font-size: 12px; }
.fileAreaNav button.active strong { background: #1f736b; color: #fff; }
.fileAreaContent { min-width: 0; border: 1px solid #d7e0e8; border-radius: 7px; background: #fff; padding: 10px; }
.fileAreaHeader { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 10px; border-bottom: 1px solid #dbe3ea; margin-bottom: 10px; }
.archiveFolderList { display: grid; gap: 9px; }
.scrollableDocumentList { max-height: 430px; overflow: auto; padding-right: 5px; }
.archiveFolder { border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; overflow: hidden; }
.archiveFolder summary { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 11px; cursor: pointer; list-style: none; font-weight: 850; }
.archiveFolder summary::-webkit-details-marker { display: none; }
.archiveFolder summary small { color: #667582; font-weight: 750; }
.archiveFolder > .list { padding: 0 10px 10px; }
.archiveFolder > .list .itemActions { justify-content: flex-end; }
.documentRow .itemMain { cursor: pointer; }
.documentRow.unreadDocument { border-left: 4px solid #d08b00; background: #fffaf0; }
.documentPreviewSheet { width: min(1280px, calc(100vw - 44px)); }
.documentModalFrame { height: min(76vh, 820px); min-height: 620px; }
.documentModalImageStage { min-height: 620px; max-height: 76vh; }
.documentModalNote { margin-top: 12px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; }
.documentModalNote h3 { margin: 0 0 6px; }
.documentModalNote p { white-space: pre-wrap; line-height: 1.45; }
.inboxTokenGrid { display: grid; gap: 10px; margin-top: 12px; }
.inboxTokenCard { display: grid; gap: 10px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 12px; }
.inboxTokenCard strong { display: block; }
.qrImage { width: 180px; height: 180px; border: 1px solid #d7e0e8; border-radius: 6px; background: #fff; padding: 8px; }
.pdfEditorPanel { padding: 12px; }
.editorHeader { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.compactLabel { min-width: 190px; max-width: 240px; }
.vordruckWork { display: grid; grid-template-columns: minmax(480px, 1fr) minmax(370px, 420px); gap: 12px; align-items: start; }
.pdfPreview { display: grid; gap: 10px; min-width: 0; }
.pdfToolbar { position: sticky; top: 0; z-index: 8; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border: 1px solid #d7e0e8; border-radius: 7px; background: #fbfcfd; padding: 8px; }
.pdfToolbar [data-pdf-zoom-label] { min-width: 48px; text-align: center; color: #34444f; font-weight: 850; }
.sideFillPanel { max-height: 86vh; overflow: auto; padding: 10px; border: 1px solid #d7e0e8; border-radius: 7px; background: #fbfcfd; }
.sideFillPanel textarea { min-height: 74px; }
.sideFillPanel label.wide { grid-column: auto; }
.pdfStub { border: 1px solid #d7e0e8; border-radius: 7px; background: #fbfcfd; padding: 12px; display: grid; gap: 6px; }
.pdfStub h3 { margin: 0; }
.pdfPages { display: grid; justify-items: center; gap: 12px; max-height: 86vh; overflow: auto; padding: 10px; border: 1px solid #d7e0e8; border-radius: 7px; background: #eef2f5; }
.pdfNoFile { border: 1px dashed #b8c5d2; border-radius: 7px; background: #fbfcfd; padding: 18px; color: #34444f; display: grid; gap: 6px; }
.pdfPage { position: relative; background: #fff; border: 1px solid #d7e0e8; border-radius: 7px; overflow: hidden; box-shadow: 0 6px 16px rgba(18, 38, 50, .08); }
.pdfPage canvas { display: block; }
.pdfField { position: absolute; z-index: 2; border: 1px solid rgba(31, 115, 107, .7); border-radius: 3px; background: rgba(255, 255, 255, .88); color: #111820; padding: 2px 4px; resize: none; font-size: 12px; line-height: 1.2; }
.pdfField:focus { outline: 2px solid #1f736b; background: #fff; }
.pdfField.active { border-color: #0f5f58; box-shadow: 0 0 0 2px rgba(31, 115, 107, .2); background: #fff; }
.pdfFreeText { min-width: 120px; min-height: 48px; border-color: #b27613; background: rgba(255, 252, 234, .96); resize: both; overflow: auto; }
.pdfFreeText.active, .pdfFreeText:focus { border-color: #8a5a00; box-shadow: 0 0 0 2px rgba(178, 118, 19, .24); background: #fffbea; }
.pdfPresetField { min-width: 36px; min-height: 20px; border-color: rgba(31, 115, 107, .86); background: rgba(232, 243, 241, .72); resize: none; overflow: hidden; font-size: 10px; line-height: 1.15; }
.pdfPresetField:focus, .pdfPresetField.active { border-color: #0f5f58; box-shadow: 0 0 0 2px rgba(31, 115, 107, .24); background: #fff; }
.pdfAutoField { border-color: rgba(37, 99, 235, .72); background: rgba(239, 246, 255, .78); }
.controlPdfAssistantBox { border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 26%, var(--bw-line, #dbe3ea)); border-radius: 8px; background: color-mix(in srgb, var(--bw-accent, #1f6feb) 8%, var(--bw-surface-3, #ffffff)); color: var(--bw-ink, #111827); padding: 10px 12px; font-weight: 800; line-height: 1.35; }
.pdfPresetCheck { min-width: 18px; min-height: 18px; padding: 0; text-align: center; font-weight: 900; line-height: 1; resize: none; overflow: hidden; }
.pdfCheckbox { padding: 0; accent-color: #1f736b; }
.calendarWeek, .calendarGrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.calendarToolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 10px 12px; margin: 8px 0 12px; }
.calendarToolbar small { display: block; color: #667582; font-size: 12px; font-weight: 750; }
.calendarToolbar strong { display: block; color: #17202a; font-size: 22px; line-height: 1.15; text-transform: capitalize; }
.calendarToolbarActions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.calendarWeek { margin-top: 12px; color: #667582; font-size: 12px; text-align: center; }
.calendarCell { position: relative; min-height: 104px; border: 1px solid #dbe3ea; border-radius: 7px; background: #fbfcfd; padding: 8px; display: grid; align-content: start; gap: 5px; }
.calendarCellOpenButton { position: absolute; inset: 0; z-index: 1; min-height: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: transparent; font-size: 0; box-shadow: none; appearance: none; }
.calendarCellOpenButton:hover,
.calendarCellOpenButton:focus-visible { outline: none; box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .24); }
.calendarCell strong { color: #1f736b; }
.calendarCell.todayCell { border-color: #1f736b; box-shadow: inset 0 0 0 2px rgba(31, 115, 107, .16); background: #f4fbf9; }
.calendarCell.todayCell strong::after { content: " Heute"; color: #1f736b; font-size: 11px; font-weight: 800; }
.calendarCell.holidayCell { background: #fffaf0; border-color: #efd69a; }
.calendarCell span { display: block; border-left: 3px solid #1f736b; background: #e8f3f1; border-radius: 4px; padding: 4px 6px; font-size: 12px; line-height: 1.25; }
.calendarCell .holidayCalendar { border-left-color: #d08b00; background: #fff4db; color: #6a4700; font-weight: 850; }
.calendarCell .navButton { display: inline-flex; min-height: 24px; padding: 2px 6px; margin-top: 4px; font-size: 11px; background: #fff; }
.calendarCell .blockCalendar { border-left-color: #9a241c; background: #fdeceb; color: #7a1d17; }
.calendarCell .requestCalendar { border-left-color: #7a5a12; background: #fff4db; color: #59400f; }
.interactiveCalendarCell { cursor: pointer; outline: none; touch-action: manipulation; }
.interactiveCalendarCell:hover,
.interactiveCalendarCell:focus-visible { border-color: #2563eb; box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .2), 0 12px 28px rgba(15, 38, 70, .12); }
.calendarCell .calendarEntryRow,
.calendarCell .deadlineEntryRow { display: flex; align-items: center; gap: 6px; border-left-color: #2563eb; background: #edf4ff; }
.calendarCell .deadlineEntryRow.preDeadline { border-left-color: #7c3aed; background: #f3efff; }
.calendarCell .deadlineEntryRow.mainDeadline { border-left-color: #dc2626; background: #fff1f2; }
.calendarEntryButton { position: relative; z-index: 2; flex: 1; min-height: 24px; justify-content: flex-start; padding: 2px 4px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 850; text-align: left; box-shadow: none; }
.calendarEntryButton:hover,
.calendarEntryButton:focus-visible { color: #1d4ed8; text-decoration: underline; outline: none; }
.calendarAppointmentModal { max-width: 760px; }
.calendarAppointmentForm textarea { min-height: 110px; }
.deadlineCell .preDeadline { border-left-color: #9b6b1b; background: #fff4db; color: #59400f; }
.deadlineCell .mainDeadline { border-left-color: #b3261e; background: #fdeceb; color: #7a1d17; font-weight: 800; }
.availabilityList, .bookingLinkGrid {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  min-height: 66px;
  align-content: start;
}
.availabilityList > .empty,
.bookingLinkGrid > .empty {
  display: flex;
  align-items: center;
  min-height: 58px;
  border: 1px solid #9bbcf8;
  border-radius: 7px;
  background: #f7fbff;
  color: #4c5c6d;
  padding: 10px 12px;
  font-weight: 750;
}
.calendarPlanningGrid .bookingLinkGrid {
  min-height: 0;
}
.printSheetPanel { overflow: auto; }
.printSheet { width: 210mm; max-width: none; min-height: 297mm; margin: 10px auto 0; padding: 0; border: 1px solid #d7e0e8; border-radius: 4px; background: #fff; color: #111820; box-shadow: 0 10px 30px rgba(18, 38, 50, .08); overflow: hidden; }
.printSheet > .empty { margin: 54px 62px; }
.dinLetter { position: relative; box-sizing: border-box; width: 210mm; max-width: none; min-height: 297mm; padding: 45mm 20mm 25mm 20mm; font-size: 11pt; line-height: 1.45; }
.officeWriter { display: grid; gap: 0; border: 1px solid #c9d8ef; border-radius: 8px; overflow: hidden; background: #f8fbff; }
.officeWriterToolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px; border-bottom: 1px solid #d7e3f5; background: #edf4ff; }
.officeWriterToolbar button { min-height: 30px; padding: 4px 9px; font-size: 12px; font-weight: 850; }
.officeWriter textarea { border: 0 !important; border-radius: 0 !important; min-height: 190px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.5; background: #fff !important; }
.officeWordShell { padding: 0 !important; overflow: hidden; background: #f2f6fb; }
.officeWordTop { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; padding: 14px 16px; border-bottom: 1px solid #c6d8f4; background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%); }
.officeWordTop h2 { margin: 0; font-size: 24px; }
.officeWordStatus { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.officeEditNotice { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid #d8e4f4; background: #fff8df; color: #172033; }
.officeEditNotice strong { display: block; font-size: 14px; }
.officeEditNotice span { display: block; color: #526273; font-size: 12px; font-weight: 750; }
.officeWordForm { display: grid; gap: 0; }
.officeWordRibbon { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: minmax(620px, max-content) minmax(120px, max-content) minmax(520px, 1fr); gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #b9cdea; background: #f8fbff; box-shadow: 0 8px 18px rgba(29, 78, 216, .08); }
.officeRibbonGroup { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; min-height: 42px; padding: 5px 8px; border: 1px solid #d3e0f2; border-radius: 8px; background: #fff; overflow: hidden; }
.officeRibbonGroup small { flex: 0 0 auto; display: inline-flex; align-items: center; height: 30px; padding: 0 8px 0 0; border-right: 1px solid #e3ebf7; color: #526273; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.officeRibbonGroup button { min-height: 32px; height: 32px; padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 850; white-space: nowrap; }
.officeFontBox { display: flex; gap: 5px; align-items: center; min-width: 0; }
.officeFontBox select,
.officeFontBox input[type="color"] { min-height: 34px; height: 34px; margin: 0; font-size: 13px; line-height: 1.25; }
.officeFontBox select:first-child { width: 210px; padding: 4px 34px 4px 10px; }
.officeFontBox select:nth-child(2) { width: 72px; padding: 4px 28px 4px 10px; }
.officeFontBox input[type="color"] { width: 42px; padding: 2px; }
.officeRibbonActions { justify-content: center; min-width: 0; }
.officeWordWorkspace { display: grid; grid-template-columns: var(--office-inspector-width, 340px) 10px minmax(720px, 1fr) minmax(260px, 320px); align-items: stretch; min-height: 0; background: #dfe8f5; }
.officeInspector { display: grid; align-content: start; gap: 10px; min-height: 100%; overflow: auto; padding: 12px; border-right: 1px solid #bfd0ea; background: #fff; }
.officeInspectorResizer { cursor: col-resize; background: linear-gradient(90deg, #bfd0ea, #eef5ff, #bfd0ea); border-left: 1px solid #aec2df; border-right: 1px solid #aec2df; }
.officeInspector details { border: 1px solid #d0dff2; border-radius: 8px; background: #f8fbff; padding: 9px; }
.officeInspector summary { cursor: pointer; font-size: 14px; font-weight: 950; color: #172033; }
.officeInspector details > label,
.officeInspector details > .field { margin-top: 8px; }
.officeInspector label { font-size: 12px; font-weight: 850; color: #263246; }
.officeInspector input,
.officeInspector select,
.officeInspector textarea { margin-top: 4px; }
.officeInspector textarea { min-height: 78px; }
.officeFallbackText textarea[name="body"] { min-height: 135px; font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.officeDocumentStage { display: grid; justify-items: center; align-content: start; overflow: auto; padding: 24px 28px 36px; background: linear-gradient(135deg, #dce6f3 0%, #eef3f9 52%, #d9e4f2 100%); }
.officePageHint { margin-bottom: 10px; padding: 6px 10px; border: 1px solid #bed2ee; border-radius: 999px; background: rgba(255, 255, 255, .8); color: #526273; font-size: 12px; font-weight: 850; }
.officePageArea { display: grid; grid-template-columns: minmax(0, max-content) 150px; gap: 54px; align-items: start; justify-content: center; width: 100%; }
.officeSheetWrap { position: relative; display: grid; justify-items: center; width: max-content; max-width: 100%; }
.officeDocumentStage .printSheet { margin: 0 auto 32px; transform: scale(var(--office-zoom, 1)); transform-origin: top center; box-shadow: 0 18px 44px rgba(15, 23, 42, .18); }
.officeMicRail { position: sticky; top: 45vh; display: grid; place-items: center; min-height: 78px; z-index: 5; pointer-events: none; }
.officeFloatingMic,
.officeFloatingMic:hover,
.officeFloatingMic:focus,
.officeFloatingMic:focus-visible,
.officeFloatingMic:active {
  display: grid !important;
  place-items: center;
  width: 112px;
  min-height: 76px;
  padding: 8px 10px !important;
  border-radius: 10px;
  background: #1f6fe5 !important;
  border-color: #1659bd !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  box-shadow: 0 12px 28px rgba(29, 78, 216, .25);
  pointer-events: auto;
  outline: none;
}
.officePageStackHint { min-height: 20px; color: #526273; font-size: 12px; font-weight: 850; }
.officeLibrary { display: grid; align-content: start; gap: 10px; min-height: 100%; overflow: auto; padding: 12px; border-left: 1px solid #bfd0ea; background: #fff; }
.officeLibrary h3 { margin: 0; font-size: 18px; }
.officeLibrary details { border: 1px solid #d0dff2; border-radius: 8px; background: #f8fbff; padding: 9px; }
.officeLibrary summary { cursor: pointer; font-size: 14px; font-weight: 950; color: #172033; }
.officeLibraryList { display: grid; gap: 7px; margin-top: 8px; }
.officeLibraryList button { display: grid; gap: 3px; width: 100%; min-height: 54px; justify-items: start; text-align: left; border: 1px solid #c7d8ef; border-radius: 7px; background: #fff; color: #172033; }
.officeLibraryList button span { color: #526273; font-size: 12px; font-weight: 700; }
.officeLibraryRow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: stretch; }
.officeLibraryRow > button:first-child { min-width: 0; }
.officeLibraryRow > button.danger { min-height: 54px; align-content: center; justify-content: center; text-align: center; }
.officeMicButton { font-weight: 950 !important; }
.officeWordShell .dinLetter { cursor: text; }
@media (max-width: 1180px) {
  .officeWordWorkspace { grid-template-columns: 1fr; }
  .officeWordRibbon { grid-template-columns: 1fr; }
  .officeFontBox { grid-template-columns: minmax(150px, 1fr) 70px 40px repeat(3, auto); }
  .officeInspector { max-height: none; border-right: 0; border-bottom: 1px solid #bfd0ea; }
  .officeInspectorResizer { display: none; }
  .officeDocumentStage { padding: 18px 8px 28px; }
  .officePageArea { grid-template-columns: minmax(0, max-content) 98px; gap: 16px; }
  .officeDocumentStage .printSheet { transform: scale(.82); transform-origin: top center; margin-bottom: -35mm; }
  .officeFloatingMic { width: 90px; min-height: 66px; font-size: 12px; }
}
@media (max-width: 980px) {
  .documentArchiveTop,
  .documentArchiveActions { grid-template-columns: 1fr; }
}
.letterLogo { position: absolute; top: 16mm; max-width: 48mm; max-height: 20mm; object-fit: contain; transform: translate(var(--letter-logo-x, 0), var(--letter-logo-y, 0)) scale(var(--letter-logo-scale, 1)); }
.letterLogoRight { right: 20mm; transform-origin: top right; }
.letterLogoLeft { left: 20mm; right: auto; transform-origin: top left; }
.windowAddress { box-sizing: border-box; width: 85mm; min-height: 45mm; margin-bottom: 10mm; display: grid; align-content: start; gap: 4mm; }
.senderWindowLine { min-height: 5mm; padding-bottom: 1.4mm; border-bottom: 1px solid #cbd4de; color: #4d5d68; font-size: 7pt; line-height: 1.15; white-space: normal; overflow: visible; text-overflow: clip; }
.recipientAddress { margin: 0; white-space: pre-wrap; font-family: inherit; font-size: 10.5pt; line-height: 1.35; }
.letterMeta { position: absolute; top: 50mm; right: 20mm; width: 58mm; display: grid; gap: 3.5mm; color: #111820; font-size: 10pt; }
.letterMeta span { display: block; color: #5d6f7c; font-size: 8.5pt; font-weight: 700; letter-spacing: 0; }
.letterMeta strong { display: block; margin-top: 1mm; font-size: 10pt; font-weight: 700; }
.letterContent { clear: both; }
.letterSubject { margin: 0 0 8mm; font-size: 11pt; display: grid; gap: 2mm; }
.letterSubject span { font-weight: 400; color: #111820; }
.letterSubject [contenteditable="true"],
.letterBody[contenteditable="true"],
.recipientAddress[contenteditable="true"],
.senderWindowLine[contenteditable="true"],
.letterFooter[contenteditable="true"] { outline: 1px dashed transparent; border-radius: 3px; padding: 1mm; margin-left: -1mm; }
.letterSubject [contenteditable="true"]:focus,
.letterBody[contenteditable="true"]:focus,
.recipientAddress[contenteditable="true"]:focus,
.senderWindowLine[contenteditable="true"]:focus,
.letterFooter[contenteditable="true"]:focus { outline-color: #8bb8ff; background: rgba(139, 184, 255, .08) !important; }
.letterSubject [contenteditable="true"].letterEditableActive,
.letterBody[contenteditable="true"].letterEditableActive,
.recipientAddress[contenteditable="true"].letterEditableActive,
.senderWindowLine[contenteditable="true"].letterEditableActive,
.letterFooter[contenteditable="true"].letterEditableActive { outline-color: #1f6fe5; background: rgba(31, 111, 229, .08) !important; }
.letterBody { white-space: pre-wrap; font-family: inherit; line-height: 1.5; margin: 0; min-height: 140mm; }
.letterBody p,
.letterBody div { margin: 0; padding: 0; line-height: inherit; min-height: 0; }
.letterBody br { line-height: inherit; }
.letterBody table,
.letterTable { width: 100%; border-collapse: collapse; margin: 5mm 0; white-space: normal; }
.letterBody td,
.letterBody th,
.letterTable td,
.letterTable th { border: var(--letter-table-border, 1px) solid #8fa9c9; min-width: 28mm; min-height: 8mm; padding: var(--letter-table-padding, 3mm); vertical-align: top; }
.letterBody th,
.letterTable th { background: #eef5ff; font-weight: 900; }
.letterSignatureImage { max-width: 58mm; max-height: 22mm; object-fit: contain; cursor: move; display: block; margin-top: 4mm; }
.officeSignatureDialog { max-width: 860px; }
.officeSignatureCanvas { width: 100%; height: 230px; border: 1px solid #b8cbea; border-radius: 8px; background: #fff; touch-action: none; }
.officeTableDialog { max-width: 780px; }
.officeTablePreview { min-height: 120px; border: 1px solid #c9d8ef; border-radius: 8px; background: #fff; padding: 12px; overflow: auto; }
.officeTablePreview table { width: 100%; border-collapse: collapse; }
.letterFooter { position: absolute; left: 20mm; right: 20mm; bottom: 14mm; padding-top: 3mm; border-top: 1px solid #d7e0e8; color: #5d6f7c; font-size: 7.5pt; line-height: 1.25; }
.officeLogoPreview { display: flex; align-items: center; gap: 10px; border: 1px solid #cbdaf0; border-radius: 8px; background: #f7fbff; padding: 10px; color: #42526b; font-size: 13px; font-weight: 750; }
.officeLogoPreview img { max-width: 130px; max-height: 54px; object-fit: contain; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px; }
.knowledgeLayout { display: grid; gap: 14px; }
.knowledgeHero { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; background: #f7c95f; border: 1px solid #e8b443; border-radius: 10px; padding: 20px; color: #17202a; }
.knowledgeHero h2 { margin: 0; font-size: 32px; line-height: 1.1; }
.knowledgeHero p { margin: 8px 0 0; max-width: 760px; color: #34444f; }
.knowledgeHeroStats { display: flex; gap: 8px; flex-wrap: wrap; }
.knowledgeHeroStats span { border-radius: 999px; background: #fff; padding: 7px 10px; font-weight: 850; }
.knowledgeForumLayout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 14px; align-items: start; }
.knowledgeMain, .knowledgeEntries, .knowledgeSide { display: grid; gap: 12px; }
.knowledgeSide { border: 1px solid #d7e0e8; border-radius: 10px; background: #fbfcfd; padding: 12px; min-width: 0; position: sticky; top: 12px; }
.knowledgeSearchBar input { width: 100%; }
.knowledgeCategoryList { border: 1px solid #dbe3ea; border-radius: 10px; overflow: hidden; background: #fff; }
.knowledgeCategoryCard { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid #dbe3ea; border-radius: 0; background: #fff; text-align: left; padding: 12px; }
.knowledgeCategoryCard:last-child { border-bottom: 0; }
.knowledgeCategoryCard.active { background: var(--bw-accent-soft); }
.knowledgeCategoryCard small { display: block; color: #667582; margin-top: 2px; line-height: 1.35; }
.knowledgeCatIcon { width: 34px; height: 34px; border-radius: 8px; background: var(--bw-accent-soft); color: var(--bw-teal); display: grid; place-items: center; font-weight: 900; }
.knowledgeCatCount { background: var(--bw-accent-soft, #edf4f7); border-radius: 999px; padding: 4px 8px; font-weight: 850; }
.knowledgePost { border: 1px solid #dbe3ea; border-radius: 10px; background: #fff; padding: 12px; display: grid; gap: 8px; min-width: 0; }
.knowledgePost.newsPost { border-left: 5px solid #f2b84b; }
.knowledgePost.forumPost { border-left: 5px solid var(--bw-teal); }
.knowledgePostHeader { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.knowledgePost h3 { margin: 6px 0 0; font-size: 18px; }
.knowledgePost p { margin: 0; white-space: pre-wrap; line-height: 1.45; color: #34444f; }
.knowledgePostMeta { color: #667582; font-size: 12px; }
.knowledgePill { display: inline-flex; align-items: center; border-radius: 999px; background: var(--bw-accent-soft); color: var(--bw-teal); padding: 3px 8px; font-size: 12px; font-weight: 850; }
.knowledgePill.news { background: #fff1cf; color: #7a560f; }
.knowledgePill.forum { background: var(--bw-accent-soft); color: var(--bw-teal); }
.forumAnswer { border-radius: 8px; background: #f6f8fa; padding: 9px; border: 1px solid #dbe3ea; }
.knowledgeCompose { display: grid; gap: 10px; border: 1px solid #dbe3ea; border-radius: 10px; background: #fff; padding: 12px; }
.aiChatWidget { position: fixed; right: 20px; bottom: 20px; z-index: 80; }
.aiChatLauncher { width: 68px; height: 68px; border-radius: 50%; border: 2px solid #fff; background: #1f736b; color: #fff; font-size: 13px; font-weight: 950; box-shadow: 0 12px 32px rgba(18, 38, 50, .28); display: grid; place-items: center; padding: 8px; overflow: hidden; }
.aiChatLauncher img { width: 46px; height: 28px; object-fit: contain; display: block; }
.aiChatLauncher span { font-size: 11px; line-height: 1; margin-top: -4px; }
.aiChatPanel { width: min(450px, calc(100vw - 28px)); height: min(720px, calc(100vh - 36px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; border: 1px solid #b8c5d2; border-radius: 16px; background: #fff; box-shadow: 0 18px 60px rgba(18, 38, 50, .26); overflow: hidden; }
.aiChatWidget.expanded .aiChatPanel { width: min(860px, calc(100vw - 28px)); height: min(760px, calc(100vh - 36px)); }
.aiChatHeader { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; background: #123f3a; color: #fff; padding: 16px; }
.aiChatHeaderBrand { display: flex; gap: 10px; align-items: center; }
.aiChatMark { width: 38px; height: 38px; border-radius: 12px; background: #fff; color: #1f736b; display: grid; place-items: center; font-weight: 950; }
.aiChatHeader span { display: block; color: #d7ebe8; font-size: 12px; margin-top: 3px; }
.aiChatHeaderActions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; max-width: 235px; }
.aiChatHeaderActions button { background: #fff; color: #123f3a; border-color: #d7e0e8; min-height: 30px; padding: 4px 8px; font-size: 12px; }
.aiChatHeaderActions button:disabled { opacity: .55; cursor: not-allowed; }
.aiChatBody { overflow: auto; background: #f5f7f9; padding: 14px; display: grid; align-content: start; gap: 10px; }
.aiChatPanel.dragging .aiChatBody { outline: 2px dashed #1f736b; outline-offset: -8px; background: #eef8f6; }
.aiWelcomeCard { background: #fff; border: 1px solid #dbe3ea; border-radius: 14px; padding: 12px; box-shadow: none; }
.aiWelcomeCard p { margin: 7px 0 0; color: #34444f; line-height: 1.45; font-size: 13px; }
.aiHomePanel, .aiHelpPanel { display: grid; gap: 10px; }
.aiSupportCard, .aiNewsCard, .aiDecisionCard { background: #fff; border: 1px solid #dbe3ea; border-radius: 14px; padding: 12px; display: grid; gap: 10px; }
.aiSectionTitle { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.aiSectionTitle span { color: #667582; font-size: 12px; }
.aiSupportForm { display: grid; gap: 8px; }
.aiSupportForm textarea { min-height: 76px; resize: vertical; }
.aiSupportList, .aiNewsList, .aiHelpList { display: grid; gap: 8px; }
.aiSupportItem, .aiNewsList article, .aiHelpList article { border: 1px solid #dbe3ea; border-radius: 10px; background: #f8fafb; padding: 10px; display: grid; gap: 5px; }
.aiSupportItem span, .aiNewsList p, .aiHelpList p { margin: 0; color: #34444f; line-height: 1.4; }
.aiSupportItem small, .aiNewsList span, .aiHelpList span { color: #667582; font-size: 12px; font-weight: 800; }
.aiHelpSearch { display: grid; gap: 6px; color: #34444f; font-weight: 850; }
.aiDecisionCard > div:first-child span { display: block; margin-top: 3px; color: #667582; font-size: 12px; overflow-wrap: anywhere; }
.aiDecisionGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.aiDecisionGrid button { min-height: 54px; border-radius: 10px; border: 1px solid #c6d5dc; background: #f8fafb; color: #17202a; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; padding: 8px; }
.aiDecisionGrid button b { width: 26px; height: 26px; border-radius: 50%; background: #e8f3f1; color: #1f736b; display: grid; place-items: center; }
.aiDecisionGrid button span { overflow-wrap: anywhere; line-height: 1.2; }
.aiDecisionGrid button.active { border-color: #1f736b; background: #e8f3f1; }
.aiConversation { display: grid; gap: 10px; min-height: 0; }
.aiBubblePair { display: grid; gap: 8px; }
.aiBubbleRow { display: flex; }
.aiBubbleRow.user { justify-content: flex-end; }
.aiBubble { max-width: 90%; border-radius: 16px; padding: 11px 12px; line-height: 1.45; white-space: pre-wrap; }
.aiBubbleUser { background: #1f736b; color: #fff; border-bottom-right-radius: 4px; }
.aiBubbleBot { max-width: 94%; background: #fff; color: #17202a; border: 1px solid #dbe3ea; border-bottom-left-radius: 4px; white-space: normal; }
.aiAnswerText { display: grid; gap: 8px; }
.aiAnswerText h4 { margin: 8px 0 0; font-size: 13px; color: #123f3a; }
.aiAnswerText h4:first-child { margin-top: 0; }
.aiAnswerText p { margin: 0; color: #26343d; }
.aiAnswerText ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.aiAnswerText li { margin: 0; }
.aiBubbleMeta { margin: 8px 0 0; color: #667582; font-size: 12px; }
.aiQuickPrompts { display: flex; gap: 7px; flex-wrap: wrap; }
.aiQuickPrompts button { border: 1px solid #c6d5dc; background: #fff; color: #123f3a; border-radius: 999px; padding: 7px 10px; font-size: 12px; font-weight: 850; }
.aiQuickPrompts button:hover { background: #e8f3f1; }
.aiSourceBox { margin-top: 9px; padding-top: 8px; border-top: 1px solid #dbe3ea; }
.aiSourceBox summary { cursor: pointer; color: #34444f; font-size: 12px; font-weight: 850; }
.aiSourceBox[open] summary { margin-bottom: 6px; }
.aiSourceList { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.aiSource { display: inline-flex; align-items: center; border-radius: 999px; background: #edf4f7; color: #34444f; padding: 3px 8px; font-size: 12px; font-weight: 850; max-width: 100%; overflow-wrap: anywhere; }
.aiComposer { border-top: 1px solid #dbe3ea; background: #fff; padding: 12px; display: grid; gap: 9px; }
.aiModeSwitch { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.aiModeSwitch button { min-height: 34px; border-radius: 10px; border: 1px solid #c6d5dc; background: #f7fafb; color: #34444f; font-size: 12px; font-weight: 850; padding: 6px 8px; }
.aiModeSwitch button.active { background: #1f736b; border-color: #1f736b; color: #fff; }
.aiModeSwitch button:disabled { background: #eef1f4; color: #8a98a4; cursor: not-allowed; }
.aiComposerTop { display: flex; gap: 8px; align-items: center; min-height: 36px; }
.aiComposerShell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.aiComposerInputStack { display: grid; gap: 6px; min-width: 0; }
.aiComposerInlineActions { display: flex; gap: 6px; align-items: center; }
.aiPlusWrap { position: relative; display: inline-flex; }
.aiPlusButton { width: 36px; height: 36px; border-radius: 999px; border: 1px solid #b8c5d2; background: #fff; color: #123f3a; font-size: 24px; line-height: 1; font-weight: 950; display: grid; place-items: center; padding: 0; }
.aiPlusButton:hover { background: #e8f3f1; }
.aiActionMenu { position: absolute; left: 0; bottom: 44px; width: min(280px, calc(100vw - 54px)); background: #fff; border: 1px solid #b8c5d2; border-radius: 14px; box-shadow: 0 14px 40px rgba(18, 38, 50, .2); padding: 8px; display: grid; gap: 6px; z-index: 4; }
.aiActionMenu[hidden] { display: none; }
.aiActionMenu button { text-align: left; border: 0; border-radius: 10px; background: #f5f7f9; padding: 10px; color: #17202a; }
.aiActionMenu button:hover { background: #e8f3f1; }
.aiActionMenu span { display: block; margin-top: 3px; color: #667582; font-size: 12px; }
.aiComposer label { display: grid; gap: 5px; }
.aiComposer textarea { min-height: 68px; max-height: 150px; resize: vertical; }
.aiComposerActions { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.aiIconButton, .aiSendButton { border-radius: 10px; }
.aiSendButton { background: #1f736b; color: #fff; border-color: #1f736b; font-weight: 900; padding-inline: 18px; }
.aiFileChip { border-radius: 999px; background: #fff1cf; color: #7a560f; padding: 4px 8px; font-size: 12px; font-weight: 800; max-width: calc(100% - 46px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiPrivacy { font-size: 12px; color: #667582; margin: 0; }
.aiChatTabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #dbe3ea; background: #fff; }
.aiChatTabs button { min-height: 50px; border: 0; border-right: 1px solid #edf1f4; border-radius: 0; background: #fff; color: #34444f; font-weight: 850; }
.aiChatTabs button:last-child { border-right: 0; }
.aiChatTabs button.active { color: #1f736b; background: #e8f3f1; }
.supportAdminItem { align-items: stretch; }
.supportMessageList { display: grid; gap: 7px; width: 100%; }
.supportMessage { border-radius: 10px; border: 1px solid #dbe3ea; background: #f8fafb; padding: 8px; display: grid; gap: 4px; }
.supportMessage.admin { background: #e8f3f1; border-color: #b7d5cf; }
.supportMessage span { white-space: pre-wrap; }
.supportMessage small { color: #667582; }
.supportReplyForm { display: grid; gap: 8px; width: 100%; }
.notice.success { border-color: #b7d5cf; background: #e8f3f1; color: #123f3a; }
.aiChatWidget { right: 22px; bottom: 22px; z-index: 120; }
.aiChatLauncher { width: 72px; height: 72px; border: 0; background: linear-gradient(145deg, #ff4d61, #0f756e); box-shadow: 0 20px 46px rgba(20, 35, 45, .24); }
.aiChatLauncher img { width: 54px; height: 38px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.24)); }
.aiChatPanel { width: min(400px, calc(100vw - 28px)); height: min(704px, calc(100vh - 34px)); border: 0; border-radius: 26px; box-shadow: 0 28px 70px rgba(17, 31, 43, .25); background: #fff; }
.aiChatWidget.expanded .aiChatPanel { width: min(460px, calc(100vw - 28px)); height: min(780px, calc(100vh - 34px)); }
.aiChatHeader { background: #fff; color: #0d1d28; padding: 12px 14px; align-items: center; border-bottom: 1px solid #eef1f3; }
.aiChatHeader span { color: #65717b; }
.aiChatMark { width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg, #fff, #eef6f5); box-shadow: 0 10px 22px rgba(15, 117, 110, .14); overflow: hidden; }
.aiChatMark img { width: 34px; height: 24px; object-fit: contain; display: block; }
.aiChatHeaderActions button { border: 0; border-radius: 999px; background: #f3f6f7; color: #193840; min-height: 34px; padding: 6px 10px; }
.aiChatHeaderActions button:hover { background: #e6f2f0; }
.aiChatBody { padding: 0; background: #f4f6f7; }
.aiHomePanel, .aiHelpPanel, .aiConversation { padding: 0 14px 14px; }
.aiHeroCard { position: relative; min-height: 210px; margin: 0 -14px 12px; padding: 26px 22px; overflow: hidden; border-radius: 0 0 30px 30px; background: radial-gradient(circle at 88% 8%, rgba(255,255,255,.26), transparent 30%), linear-gradient(145deg, #ff4b63 0%, #e9365b 46%, #0d756f 150%); color: #fff; box-shadow: 0 16px 34px rgba(255, 76, 97, .25); }
.aiHeroLogoGhost { position: absolute; right: -70px; bottom: -64px; width: 250px; max-width: none; opacity: .22; filter: blur(.1px) drop-shadow(0 24px 38px rgba(0,0,0,.25)); transform: rotate(-10deg) perspective(500px) rotateY(-18deg); pointer-events: none; }
.aiHeroTop { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.aiHeroLogo { width: 132px; height: 62px; object-fit: contain; padding: 8px 10px; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 18px 38px rgba(0,0,0,.18); }
.aiAgentStack { display: flex; align-items: center; padding-top: 4px; }
.aiAgentStack span { width: 34px; height: 34px; margin-left: -8px; border: 2px solid rgba(255,255,255,.82); border-radius: 50%; display: grid; place-items: center; background: #143c45; color: #fff; font-size: 11px; font-weight: 900; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.aiAgentStack span:nth-child(2) { background: #fff; color: #ff4b63; }
.aiAgentStack span:nth-child(3) { background: #0f756e; }
.aiHeroText { position: relative; z-index: 1; display: grid; gap: 4px; margin-top: 34px; font-size: 28px; line-height: 1.12; letter-spacing: 0; font-weight: 900; max-width: 280px; }
.aiHeroText span { display: block; color: #fff; }
.aiSupportCard { margin-top: -38px; position: relative; z-index: 2; border: 0; border-radius: 16px; box-shadow: 0 14px 28px rgba(17,31,43,.14); }
.aiSectionTitle { align-items: flex-start; }
.aiSectionTitle div { display: grid; gap: 3px; }
.aiSectionTitle button { border: 0; background: #ffe8ec; color: #e9365b; border-radius: 999px; font-weight: 850; padding: 6px 10px; }
.aiSupportForm textarea, .aiHelpSearch input, .aiComposer textarea { border-radius: 14px; border-color: #d8e0e6; background: #fbfcfd; }
.aiSupportForm button.primary { justify-self: start; border-radius: 999px; background: #0f756e; border-color: #0f756e; box-shadow: 0 10px 20px rgba(15,117,110,.18); }
.aiFeatureStrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.aiFeatureStrip button { min-height: 116px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(17,31,43,.09); color: #0d1d28; display: grid; align-content: center; justify-items: center; gap: 5px; padding: 10px 6px; text-align: center; }
.aiFeatureStrip button span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #eef6f5, #fff0f3); color: #e9365b; font-weight: 950; font-size: 18px; box-shadow: inset 0 -8px 18px rgba(15,117,110,.08); }
.aiFeatureStrip button strong { font-size: 13px; }
.aiFeatureStrip button small { color: #667582; font-size: 11px; }
.aiNewsCard, .aiDecisionCard { border: 0; border-radius: 18px; box-shadow: 0 10px 24px rgba(17,31,43,.09); }
.aiNewsList article, .aiHelpList article, .aiSupportItem { border: 0; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(17,31,43,.08); }
.aiNewsList article span, .aiHelpList article span { justify-self: start; border-radius: 999px; background: #ffe8ec; color: #e9365b; padding: 4px 9px; font-weight: 850; }
.aiHelpHero, .aiMessageHero { margin: 14px 0 12px; border-radius: 22px; background: linear-gradient(145deg, #103f3a, #0f756e); color: #fff; padding: 18px; display: grid; gap: 10px; box-shadow: 0 16px 34px rgba(15,117,110,.2); }
.aiNewsHero { background: linear-gradient(145deg, #ff4b63, #e9365b); }
.aiHelpHero strong, .aiMessageHero strong { font-size: 24px; line-height: 1.16; }
.aiHelpHero span, .aiMessageHero span { color: rgba(255,255,255,.86); line-height: 1.35; }
.aiHelpHero .aiHelpSearch { color: #fff; }
.aiHelpHero .aiHelpSearch input { margin-top: 2px; background: #fff; border: 0; }
.aiHelpCategories { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.aiHelpCategories button { white-space: nowrap; border: 0; border-radius: 999px; background: #fff; color: #0f756e; box-shadow: 0 7px 18px rgba(17,31,43,.07); font-weight: 850; padding: 8px 11px; }
.aiMessageHero { text-align: center; justify-items: center; background: #fff; color: #0d1d28; }
.aiMessageHero img { width: 136px; height: 64px; object-fit: contain; padding: 8px 12px; border-radius: 18px; background: #f7fafb; box-shadow: 0 12px 26px rgba(17,31,43,.09); }
.aiMessageHero span { color: #667582; }
.aiQuickPrompts { gap: 8px; }
.aiQuickPrompts button { border: 0; background: #fff; box-shadow: 0 8px 18px rgba(17,31,43,.07); color: #0f756e; }
.aiBubbleUser { background: #0f756e; }
.aiBubbleBot { border: 0; box-shadow: 0 10px 24px rgba(17,31,43,.08); }
.aiComposer { border-top: 1px solid #eef1f3; padding: 11px 12px; }
.aiPlusButton { border: 0; box-shadow: 0 8px 18px rgba(17,31,43,.1); color: #0f756e; }
.aiSendButton { width: 38px; height: 38px; border-radius: 50%; padding: 0; background: #0f756e; box-shadow: 0 10px 20px rgba(15,117,110,.22); }
.aiPrivacy { display: none; }
.aiChatTabs { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #eef1f3; }
.aiChatTabs button { min-height: 58px; font-size: 12px; color: #6a747d; }
.aiChatTabs button.active { color: #ff4b63; background: #fff; box-shadow: inset 0 3px 0 #ff4b63; }
.aiChatPanel .aiComposer { padding: 12px; gap: 10px; }
.aiChatPanel .aiComposerShell { grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 10px; }
.aiChatPanel .aiComposerInputStack { min-width: 0; }
.aiChatPanel .aiComposer textarea { width: 100%; min-height: 108px; max-height: 210px; resize: vertical; font-size: 15px; line-height: 1.45; padding: 12px 14px; }
.aiChatPanel .aiComposerInlineActions { grid-column: 1 / -1; justify-content: flex-end; gap: 8px; }
.aiChatPanel .aiComposerInlineActions button:not(.aiSendButton) { min-height: 34px; border-radius: 999px; padding: 6px 10px; }
.aiChatPanel .aiSendButton { width: 42px; height: 42px; min-width: 42px; }
.aiChatPanel { width: min(402px, calc(100vw - 28px)); height: min(706px, calc(100vh - 34px)); border-radius: 24px; box-shadow: 0 28px 74px rgba(17, 31, 43, .23); }
.aiChatWidget.expanded .aiChatPanel { width: min(560px, calc(100vw - 28px)); height: min(820px, calc(100vh - 34px)); }
.aiChatHeader { min-height: 56px; padding: 12px 16px; background: #fff; border-bottom: 1px solid #eef1f3; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.aiChatHeaderBrand { min-width: 0; }
.aiChatHeaderBrand strong { font-size: 14px; line-height: 1.15; }
.aiChatHeaderBrand span { font-size: 12px; line-height: 1.2; }
.aiChatResizeButton { justify-self: center; min-height: 32px; border: 0; border-radius: 999px; background: #f3f6f7; color: #0f756e; box-shadow: inset 0 0 0 1px #e4ecef; padding: 5px 13px; font-size: 12px; font-weight: 900; }
.aiChatResizeButton:hover { background: #e7f2f0; color: #0b5f59; }
.aiChatHeaderActions { max-width: none; align-items: center; justify-self: end; }
.aiChatHeaderActions button { min-height: 30px; padding: 4px 8px; color: #6f7780; background: transparent; }
.aiChatHeaderActions button[data-ai-new-chat],
.aiChatHeaderActions button[data-ai-clear-chat] { display: none; }
.aiChatBody { background: #fff; padding: 0; }
.aiConversation { padding: 22px 16px 16px; gap: 10px; align-content: start; }
.aiBotIntro { display: grid; gap: 8px; margin-bottom: 4px; }
.aiBotBubble { max-width: 86%; border-radius: 18px; background: #f2f3f4; color: #20262c; padding: 13px 14px; line-height: 1.42; }
.aiBotBubble strong { display: block; margin-bottom: 7px; font-size: 14px; }
.aiBotBubble p { margin: 0 0 8px; color: #20262c; }
.aiBotBubble p:last-child { margin-bottom: 0; }
.aiBotBubble.compact { padding: 11px 14px; }
.aiBotIntro small { color: #707981; font-size: 11px; padding-left: 14px; }
.aiQuickPrompts { margin: 6px 0 2px; gap: 8px; }
.aiQuickPrompts button { box-shadow: none; background: #fff; border: 1px solid #e4e8ec; color: #0f756e; min-height: 34px; }
.aiBubblePair { gap: 7px; }
.aiBubble { font-size: 14px; line-height: 1.44; }
.aiBubbleUser { max-width: 84%; border-radius: 18px 18px 5px 18px; background: #0f756e; box-shadow: 0 9px 18px rgba(15,117,110,.15); }
.aiBubbleBot { max-width: 88%; border-radius: 18px 18px 18px 5px; background: #f2f3f4; box-shadow: none; padding: 13px 14px; }
.aiBubbleBot.thinking { width: fit-content; min-width: 142px; background: color-mix(in srgb, var(--bw-accent, #1f73ff) 12%, #f2f3f4); border: 1px solid color-mix(in srgb, var(--bw-accent, #1f73ff) 28%, transparent); }
.aiThinkingText { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 800; }
.aiAnswerText { gap: 6px; }
.aiAnswerText h4 { margin: 9px 0 2px; color: #20262c; font-size: 13px; }
.aiAnswerText p, .aiAnswerText li { color: #20262c; }
.aiBubbleMeta { color: #77818a; font-size: 11px; }
.aiSourceBox { border-top-color: #e4e8ec; }
.aiComposer { border-top: 0; padding: 10px 16px 10px; background: #fff; }
.aiComposerBox { border: 1px solid #dfe5ea; border-radius: 16px; background: #fff; padding: 12px 12px 9px; box-shadow: 0 3px 12px rgba(17,31,43,.05); display: grid; gap: 8px; }
.aiComposerBox textarea { border: 0 !important; background: transparent !important; border-radius: 0 !important; min-height: 112px !important; max-height: 220px; padding: 0 !important; resize: vertical; font-size: 14px; line-height: 1.45; color: #20262c; outline: 0; }
.aiComposerToolbar { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.aiComposerToolbar .aiComposerInlineActions { display: flex; align-items: center; gap: 7px; }
.aiPlusButton { width: 30px; height: 30px; font-size: 20px; color: #77818a; background: transparent; box-shadow: none; }
.aiComposerToolbar .aiIconButton,
.aiComposerToolbar button:not(.aiSendButton):not(.aiPlusButton) { min-height: 30px; border: 0; background: transparent; color: #77818a; padding: 4px 6px; }
.aiSendButton,
.aiChatPanel .aiSendButton { width: 34px; height: 34px; min-width: 34px; background: #e9ecef; color: #9aa2aa; border: 0; box-shadow: none; }
.aiComposer:focus-within .aiSendButton { background: #0f756e; color: #fff; box-shadow: 0 8px 16px rgba(15,117,110,.22); }
.aiActionMenu { bottom: 38px; border: 1px solid #e0e6eb; border-radius: 16px; box-shadow: 0 16px 46px rgba(17,31,43,.17); }
.aiPrivacy { display: block; border-radius: 12px; background: #f2f3f4; color: #69727b; padding: 11px 36px 11px 12px; font-size: 12px; line-height: 1.35; }
.aiChatTabs { border-top: 1px solid #eef1f3; background: #fff; }
.aiChatTabs button { min-height: 50px; font-size: 12px; color: #707981; }
.aiChatTabs button.active { color: #0f756e; box-shadow: inset 0 3px 0 #0f756e; }
.aiMessagesPanel { display: grid; gap: 12px; padding: 0 0 12px; }
.aiMessagesHeader { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #eef1f3; background: #fff; position: sticky; top: 0; z-index: 2; }
.aiMessagesHeader > strong { font-size: 18px; color: #0d1d28; }
.aiConversationEmpty { min-height: 220px; }
.aiMessagesHeader div { display: flex; gap: 6px; align-items: center; }
.aiMessagesHeader button { min-height: 30px; border: 0; border-radius: 999px; background: #f3f6f7; color: #59636d; font-size: 12px; padding: 5px 9px; }
.aiMessagesHeader button:hover { background: #e7f2f0; color: #0f756e; }
.aiMessagesHeader button:disabled { opacity: .45; cursor: not-allowed; }
.aiMessageList { display: grid; padding: 0 16px; background: #fff; }
.aiMessageRow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; min-height: 74px; border-bottom: 1px solid #eef1f3; }
.aiMessageRow:last-child { border-bottom: 0; }
.aiMessageOpen { width: 100%; min-height: 72px; border: 0; border-radius: 0; background: transparent; color: #17202a; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 10px; gap: 10px; align-items: center; text-align: left; padding: 8px 4px; }
.aiMessageOpen:hover { background: #f7fafa; }
.aiMessageRow.active .aiMessageOpen { background: #fbfcfd; }
.aiMessageLogo { width: 34px; height: 34px; border-radius: 10px; background: #fff0f3; color: #ff4b63; display: grid; place-items: center; overflow: hidden; font-weight: 950; }
.aiMessageLogo img { width: 28px; height: 20px; object-fit: contain; display: block; }
.aiMessageText { min-width: 0; display: grid; gap: 4px; }
.aiMessageText strong { font-size: 14px; color: #111820; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiMessageText small { color: #5f6b76; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aiMessageAge { color: #66717b; font-size: 13px; white-space: nowrap; align-self: start; padding-top: 9px; }
.aiUnreadDot { width: 7px; height: 7px; border-radius: 50%; background: #e2333f; justify-self: center; }
.aiMessageDelete { width: 26px; height: 26px; min-height: 26px; border: 0; border-radius: 50%; background: transparent; color: #8b949e; font-size: 17px; line-height: 1; padding: 0; }
.aiMessageDelete:hover { background: #ffe8ec; color: #c72d3d; }
.aiSelectedChat { display: grid; gap: 8px; padding: 0 16px 4px; }
.aiSelectedChat .aiBubblePair { border-top: 1px solid #eef1f3; padding-top: 12px; }
.aiEmptyMessages { margin: 14px 16px 4px; border-radius: 18px; background: #f2f3f4; padding: 18px; display: grid; gap: 6px; text-align: center; color: #66717b; }
.aiEmptyMessages strong { color: #17202a; font-size: 16px; }
@media (max-width: 980px) { body { grid-template-columns: 1fr; } .sidebar { position: static; min-height: auto; } .cards, .two, .three, .sourceGrid, .templateGrid, .checkGrid, .detailGrid, .workflowGrid, .formLibraryGrid, .lawSearch, .personFilterBar, .addressGrid, .scopeRow, .digitalFileLayout, .controlLayout, .controlLayoutClean, .controlInfraGrid, .controlRoomGrid, .controlAccessGrid, .controlAdminGrid, .controlInfraColumns, .controlMailWorkspace, .supportMailboxWorkspace, .supportMailFacts, .mirrorStatusGrid, .backupDecisionGrid, .compensationWorkspace, .compensationSteps, .compensationBoard, .compensationStats, .compensationResultBox, .simpleBoard, .bbbBoard, .bbbWorkspace, .bbbMeetingGrid, .bbbServerManagementGrid, .calendarPlanningGrid, .journalWorkspace, .journalTabs, .journalStats, .wealthWorkspace, .wealthTabs, .statementSummaryGrid { grid-template-columns: 1fr; } .controlActionBar, .mirrorStatusHeader { display: grid; } .controlCustomerTableHead, .controlMailTableHead { display: none; } .controlCustomerTableRow, .controlMailTableRow { grid-template-columns: 1fr; align-items: stretch; } .controlRowActions { justify-content: flex-start; } .catalogRow { grid-template-columns: 1fr; align-items: stretch; } .editorHeader, .modalHeader, .fileAreaHeader { display: grid; } .topbar { display: grid; } .pdfPreview { position: static; } .personFilterStatus { white-space: normal; } .modalBackdrop { padding: 10px; align-items: start; } .modalSheet { width: calc(100vw - 20px); max-height: calc(100vh - 20px); } }
@media (max-width: 760px) { .calendarToolbar { display: grid; } .calendarToolbarActions { justify-content: stretch; } .calendarToolbarActions button { width: 100%; } }

@media (max-width: 520px) {
  .aiChatHeader { display: grid; }
  .aiChatHeaderActions { max-width: none; justify-content: flex-start; }
  .aiBubble { max-width: 94%; }
  .aiBubbleBot { max-width: 98%; }
  .aiDecisionGrid { grid-template-columns: 1fr; }
  .aiComposerShell { grid-template-columns: auto minmax(0, 1fr); }
  .aiComposerInlineActions { grid-column: 1 / -1; justify-content: flex-end; }
  .aiHeroText { font-size: 24px; max-width: 250px; }
  .aiHeroLogo { width: 118px; }
  .aiFeatureStrip { grid-template-columns: 1fr; }
  .aiFeatureStrip button { min-height: 78px; grid-template-columns: 54px 1fr; justify-items: start; text-align: left; align-content: center; }
  .aiFeatureStrip button small { grid-column: 2; }
  .aiChatTabs button { font-size: 11px; padding: 6px 3px; }
}

@media (max-width: 980px) {
  .knowledgeForumLayout { grid-template-columns: 1fr; }
  .knowledgeSide { position: static; }
  .aiChatWidget { right: 16px; bottom: 16px; }
  .aiChatLauncher { width: 64px; height: 64px; }
  .aiChatPanel { width: calc(100vw - 24px); height: min(720px, calc(100vh - 24px)); border-radius: 16px; }
  .aiChatWidget.expanded .aiChatPanel { width: calc(100vw - 24px); height: calc(100vh - 24px); }
  .aiModeSwitch { grid-template-columns: 1fr; }
  .landingNav { position: static; display: grid; }
  .landingNav nav { display: grid; grid-template-columns: 1fr 1fr; }
  .landingHero, .landingBand, .landingFeatureGrid, .landingEditionGrid, .landingBackupGrid, .landingMetrics, .landingInquiryGrid, .landingContactGrid, .controlInquiryWorkspace, .officialFormsControlGrid { grid-template-columns: 1fr; }
  .landingHero { min-height: auto; }
  .landingLogo img { width: min(330px, 82vw); }
  .loginBrand img { width: min(520px, calc(100vw - 30px)); padding: 16px; }
  .controlWizardStep { grid-template-columns: 1fr; }
  .controlStepNo { width: 32px; height: 32px; }
}
@media (max-width: 980px) { .compensationModal .three, .compensationModal .compensationResultBox { grid-template-columns: repeat(3, minmax(0, 1fr)); } .compensationModal .modalHeader { grid-template-columns: 1fr auto; } }
@media (max-width: 760px) { .vordruckWork { grid-template-columns: 1fr; } .pdfPages, .sideFillPanel { max-height: none; } }
@media (max-width: 640px) { .compensationModal .three, .compensationModal .compensationResultBox, .compensationModal .modalHeader { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .reportModal .three, .reportModal .two, .reportModal .modalHeader { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .personsLayout { grid-template-columns: 1fr; } }

/* Modern surface polish */
:root {
  --bw-ink: #101820;
  --bw-muted: #60717d;
  --bw-line: #dfe7ec;
  --bw-soft-line: #edf2f5;
  --bw-bg: #f3f6f8;
  --bw-surface: #ffffff;
  --bw-teal: #0f756e;
  --bw-teal-dark: #0b4f4a;
  --bw-coral: #ff4b63;
  --bw-amber: #f0b429;
  --bw-accent: var(--bw-teal);
  --bw-accent-dark: var(--bw-teal-dark);
  --bw-accent-soft: #e8f3f1;
  --bw-shadow: 0 16px 42px rgba(17, 31, 43, .09);
  --bw-shadow-soft: 0 8px 24px rgba(17, 31, 43, .06);
}

body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background: linear-gradient(180deg, #f8fafb 0%, var(--bw-bg) 100%);
  color: var(--bw-ink);
}

.sidebar {
  background: linear-gradient(180deg, #0b3438 0%, #0f4045 54%, #102c35 100%);
  border-right: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 14px 0 34px rgba(17, 31, 43, .12);
}

.brand { padding-bottom: 24px; }
.brandLogo {
  border-radius: 8px;
  padding: 14px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .16);
}

.sidebar nav { gap: 6px; }
.sidebar nav button {
  min-height: 40px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .86);
  font-weight: 850;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.sidebar nav button:hover {
  background: rgba(255, 255, 255, .09);
  color: #fff;
  transform: translateX(2px);
}
.sidebar nav button.active {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: inset 4px 0 0 var(--bw-coral), 0 10px 24px rgba(0, 0, 0, .12);
}

.app { padding: 28px clamp(22px, 3vw, 38px); }
.topbar {
  align-items: center;
  margin-bottom: 22px;
  border: 1px solid var(--bw-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--bw-shadow-soft);
  padding: 18px 20px;
}
.topbar h1 {
  font-size: clamp(28px, 2.4vw, 38px);
  line-height: 1.08;
  color: var(--bw-ink);
}
.topbar p { color: var(--bw-muted); font-weight: 700; }

.userMenu {
  border-color: var(--bw-line);
  border-radius: 8px;
  box-shadow: var(--bw-shadow-soft);
}

button,
.buttonLink {
  border-color: #cbd7df;
  border-radius: 8px;
  background: #fff;
  color: var(--bw-ink);
  box-shadow: 0 1px 0 rgba(17, 31, 43, .03);
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
button:hover,
.buttonLink:hover {
  border-color: var(--bw-teal);
  background: #f7fbfa;
  box-shadow: 0 8px 22px rgba(17, 31, 43, .08);
}
button.primary {
  border-color: var(--bw-teal);
  background: linear-gradient(135deg, var(--bw-teal) 0%, #11877d 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(15, 117, 110, .22);
}
button.primary:hover {
  border-color: var(--bw-teal-dark);
  background: linear-gradient(135deg, var(--bw-teal-dark) 0%, var(--bw-teal) 100%);
}
button.danger {
  border-color: #efc6c4;
  background: #fff7f7;
  color: #9a241c;
}

input,
textarea,
select {
  min-height: 40px;
  border-color: #cfd9e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(17, 31, 43, .03);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus,
textarea:focus,
select:focus {
  outline: 0;
  border-color: var(--bw-teal);
  box-shadow: 0 0 0 3px rgba(15, 117, 110, .13);
}

.cards { gap: 16px; margin-bottom: 18px; }
.card,
.panel,
.modalSheet,
.loginCard,
.controlHero,
.controlStat,
.controlFold,
.controlChoiceCard {
  border-color: var(--bw-line);
  border-radius: 8px;
  background: var(--bw-surface);
  box-shadow: var(--bw-shadow-soft);
}
.card,
.panel { padding: 16px; }
.metricCard {
  position: relative;
  min-height: 96px;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
}
.metricCard::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--bw-teal), var(--bw-coral), var(--bw-amber));
}
button.metricCard:hover {
  border-color: rgba(15, 117, 110, .45);
  box-shadow: 0 14px 34px rgba(17, 31, 43, .1);
  background: #fff;
}
.metric {
  color: var(--bw-teal);
  font-size: 32px;
  line-height: 1;
  margin-top: 8px;
}
.muted { color: var(--bw-muted); }
.two,
.three,
.grid,
.list,
.detailGrid,
.workflowGrid { gap: 16px; }

.item,
.detailGrid div,
.workflowStep,
.catalogGroup,
.catalogRow,
.formCard,
.controlCustomerTableRow,
.controlMailTableRow,
.supportMailList,
.supportMailDetail,
.supportComposeForm,
.controlMailList,
.controlInquiryRow,
.officialFormsControlList,
.officialFormsTableRow,
.compensationStat {
  border-color: var(--bw-soft-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(17, 31, 43, .045);
}

.notice.warning {
  border-color: #efd37c;
  border-radius: 8px;
  background: #fff9e8;
}
.navBadge {
  background: var(--bw-amber);
  color: #1d2430;
}

.datePicker {
  border-color: var(--bw-line);
  border-radius: 8px;
  box-shadow: 0 20px 54px rgba(17, 31, 43, .18);
}

.compensationSteps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.compensationSteps span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  border: 1px solid var(--bw-soft-line);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(17, 31, 43, .045);
  padding: 5px 14px 5px 7px;
  color: var(--bw-ink);
  font-weight: 850;
  line-height: 1.25;
}
.compensationSteps strong {
  display: inline-grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #e8f3f1;
  color: var(--bw-teal);
  font-size: 13px;
  line-height: 1;
  text-align: center;
}

/* Premium UI pass */
.app {
  position: relative;
}

.topbar {
  position: relative;
  overflow: hidden;
  border-color: #e5edf2;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)),
    linear-gradient(135deg, rgba(15,117,110,.08), rgba(255,75,99,.05));
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--bw-teal), var(--bw-coral), var(--bw-amber));
}
.topbar > * {
  position: relative;
  z-index: 1;
}

.panel,
.card {
  position: relative;
}
.panel h2,
.card h2,
.panel h3,
.card h3 {
  color: var(--bw-ink);
  letter-spacing: 0;
}
.panel > h2:first-child,
.card > h2:first-child {
  font-size: 25px;
  line-height: 1.12;
}
.panel > .muted,
.card > .muted {
  margin-top: 4px;
  max-width: 980px;
  line-height: 1.45;
}

.compensationGuidePanel {
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(135deg, rgba(12, 66, 64, .97) 0%, rgba(15, 117, 110, .92) 55%, rgba(255, 75, 99, .88) 140%);
  color: #fff;
  box-shadow: 0 22px 54px rgba(15, 55, 61, .18);
}
.compensationGuidePanel h2,
.compensationGuidePanel .muted {
  color: #fff;
}
.compensationGuidePanel h2 {
  font-size: 28px;
}
.compensationGuidePanel .muted {
  max-width: 1160px;
  opacity: .9;
  font-weight: 750;
}
.compensationGuidePanel .compensationSteps span {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.14);
  color: #fff;
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.compensationGuidePanel .compensationSteps strong {
  background: #fff;
  color: var(--bw-teal);
}

.courtManagementGrid {
  gap: 18px;
  margin-top: 18px;
}
.courtSearchPanel,
.courtFormPanel,
.courtListPanel {
  border: 0;
  background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
  box-shadow: 0 18px 48px rgba(17, 31, 43, .08);
}
.courtSearchPanel::before,
.courtFormPanel::before,
.courtListPanel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--bw-teal), rgba(15,117,110,.12));
}
.courtSearchPanel h2,
.courtFormPanel h2,
.courtListPanel h2 {
  font-size: 25px;
  line-height: 1.12;
}
.courtSearchPanel .muted,
.courtFormPanel .muted,
.courtListPanel .muted {
  line-height: 1.45;
}

.courtSearchBar {
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 12px;
  margin-top: 16px;
  align-items: end;
}
.courtSearchBar input {
  min-height: 46px;
  font-weight: 800;
}
.courtSearchBar .buttonLink {
  min-height: 46px;
  border-color: color-mix(in srgb, var(--bw-accent, var(--bw-teal)) 28%, transparent);
  background: color-mix(in srgb, var(--bw-accent-soft, #f4fbf9) 82%, #ffffff);
  color: var(--bw-teal);
}

.courtResultList {
  gap: 10px;
  margin-top: 14px;
}
.courtResult {
  border: 1px solid var(--bw-soft-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(17, 31, 43, .055);
  padding: 13px;
}
.courtResult:hover {
  border-color: color-mix(in srgb, var(--bw-accent, var(--bw-teal)) 40%, transparent);
  box-shadow: 0 14px 30px rgba(17, 31, 43, .085);
}
.courtResult > div:first-child {
  min-width: 0;
}
.courtResult strong {
  font-size: 15px;
  color: var(--bw-ink);
}
.courtResultMeta,
.courtEmpty {
  border-radius: 8px;
}
.courtResultMeta {
  border-color: rgba(15,117,110,.18);
  background: linear-gradient(180deg, #f2fbf9, #eaf6f3);
  color: var(--bw-teal);
}
.courtEmpty {
  min-height: 94px;
  align-content: center;
  border-color: #d7e2e9;
  background:
    linear-gradient(180deg, #fff, #fbfcfd);
  padding: 16px;
}
.courtEmpty strong {
  font-size: 15px;
}

.courtFormPanel form {
  gap: 14px;
  margin-top: 8px;
}
.courtFormPanel label,
.courtSearchPanel label,
.courtListPanel label {
  color: #15252d;
  font-size: 13px;
  font-weight: 900;
}
.courtFormPanel textarea {
  min-height: 64px;
}
.courtFormPanel .formActions {
  margin-top: 8px;
}
.courtFormPanel .formActions .primary {
  min-height: 44px;
  padding-inline: 18px;
}

.courtListPanel {
  margin-top: 18px !important;
}
.courtListPanel .editorHeader {
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--bw-soft-line);
}

.item {
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.item:hover {
  border-color: rgba(15,117,110,.3);
  box-shadow: 0 10px 26px rgba(17, 31, 43, .07);
}

@media (max-width: 980px) {
  .courtManagementGrid,
  .courtSearchBar {
    grid-template-columns: 1fr;
  }
}

/* Phase 11 design system */
:root {
  color-scheme: light;
}

html[data-accent="teal"] { --bw-teal: #0f756e; --bw-teal-dark: #0b4f4a; --bw-accent: #0f756e; --bw-accent-dark: #0b4f4a; --bw-accent-soft: #e8f3f1; }
html[data-accent="blue"] { --bw-teal: #1f6feb; --bw-teal-dark: #174ea6; --bw-accent: #1f6feb; --bw-accent-dark: #174ea6; --bw-accent-soft: #eaf2ff; }
html[data-accent="red"] { --bw-teal: #d83b4c; --bw-teal-dark: #9f2432; --bw-accent: #d83b4c; --bw-accent-dark: #9f2432; --bw-accent-soft: #fff0f2; }
html[data-accent="purple"] { --bw-teal: #7c3aed; --bw-teal-dark: #5b21b6; --bw-accent: #7c3aed; --bw-accent-dark: #5b21b6; --bw-accent-soft: #f2ecff; }
html[data-accent="gold"] { --bw-teal: #a86c00; --bw-teal-dark: #7a4d00; --bw-accent: #a86c00; --bw-accent-dark: #7a4d00; --bw-accent-soft: #fff5db; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bw-ink: #edf6f5;
  --bw-muted: #9fb3ba;
  --bw-line: #263b41;
  --bw-soft-line: #1d3035;
  --bw-bg: #091315;
  --bw-surface: #111d20;
  --bw-teal: #3ed6c5;
  --bw-teal-dark: #18a99a;
  --bw-coral: #ff5b72;
  --bw-amber: #f2c14e;
  --bw-shadow: 0 20px 60px rgba(0, 0, 0, .34);
  --bw-shadow-soft: 0 10px 28px rgba(0, 0, 0, .26);
}

body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  font-size: 14px;
}

.app {
  background:
    linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0) 260px);
}

.topbar {
  min-height: 124px;
  align-items: center;
}
.topbar h1 {
  font-weight: 950;
}
.actions {
  align-items: center;
}
.themeToggle {
  border: 0;
  background: #111820;
  color: #fff;
  min-height: 30px;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  box-shadow: 0 8px 20px rgba(17,31,43,.14);
}
.themeToggle:hover {
  background: var(--bw-teal);
  color: #fff;
}

.adminSubNav {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--bw-soft-line);
  border-radius: 8px;
  background: #f7fafb;
  padding: 7px;
}
.adminSubNav button {
  min-width: 0;
  min-height: 36px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--bw-muted);
  padding: 7px 12px;
}
.adminSubNav button.active {
  background: #fff;
  color: var(--bw-teal);
  box-shadow: 0 8px 20px rgba(17,31,43,.08);
}

.panel,
.card {
  overflow: hidden;
}
.panel::after,
.card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,117,110,.16), transparent);
  pointer-events: none;
}
.panel .editorHeader,
.card .editorHeader {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bw-soft-line);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}
.stats span {
  display: grid;
  gap: 4px;
  min-height: 74px;
  border: 1px solid var(--bw-soft-line);
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #fbfcfd);
  padding: 12px;
  box-shadow: 0 8px 20px rgba(17,31,43,.05);
}
.stats strong {
  color: var(--bw-teal);
  font-size: 24px;
  line-height: 1;
}
.stats small {
  color: var(--bw-muted);
  font-weight: 850;
}

.item {
  align-items: center;
}
.itemMain {
  gap: 6px;
}
.itemMain strong {
  font-size: 15px;
}
.pill,
.inlineBadge,
.statusMark {
  border-radius: 999px;
  font-weight: 900;
}

.designSettingsPanel {
  background:
    linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
}
.designPreviewGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.designPreview {
  display: grid;
  gap: 6px;
  min-height: 138px;
  border: 1px solid var(--bw-soft-line);
  border-radius: 8px;
  padding: 14px;
  align-content: end;
  position: relative;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(17,31,43,.06);
}
.designPreview span {
  position: absolute;
  inset: 12px 12px auto;
  height: 38px;
  border-radius: 8px;
}
.designPreview.selected {
  border-color: var(--bw-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-teal) 18%, transparent), 0 14px 30px rgba(17,31,43,.12);
}
.designPreview.light {
  background: #fff;
  color: #101820;
}
.designPreview.light span {
  background: linear-gradient(90deg, #0f756e, #ff4b63);
}
.designPreview.dark {
  background: #0d171a;
  color: #edf6f5;
}
.designPreview.dark span {
  background: linear-gradient(90deg, #3ed6c5, #ff5b72);
}
.designPreview.office {
  background: #30343a;
  color: #f3f6f8;
}
.designPreview.office span {
  background: linear-gradient(90deg, #69727b, #b8c2cc);
}
.designPreview.colorful {
  background: linear-gradient(145deg, #fff 0%, #fff7f1 48%, #eef4ff 100%);
  color: #101820;
}
.designPreview.colorful span {
  background: linear-gradient(90deg, #1f6feb, #ff4b63, #f0b429);
}
.designPreview strong {
  font-size: 16px;
}
.designPreview small {
  color: inherit;
  opacity: .72;
  font-weight: 800;
}
.designPalette {
  display: grid;
  gap: 10px;
  border: 1px solid var(--bw-soft-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bw-accent-soft) 52%, #fff);
  padding: 13px;
}
.designPalette > div:first-child {
  display: grid;
  gap: 3px;
}
.designPalette strong {
  color: var(--bw-ink);
}
.designPalette small {
  color: var(--bw-muted);
  font-weight: 750;
}
.designColorGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.designColor {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  border-radius: 999px;
  padding: 6px 11px 6px 7px;
}
.designColor span {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.designColor.teal span { background: #0f756e; }
.designColor.blue span { background: #1f6feb; }
.designColor.red span { background: #d83b4c; }
.designColor.purple span { background: #7c3aed; }
.designColor.gold span { background: #a86c00; }
.designColor.selected {
  border-color: var(--bw-teal);
  background: var(--bw-accent-soft);
  color: var(--bw-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-teal) 14%, transparent);
}

.knowledgeHero,
.controlHero {
  border-radius: 8px;
  box-shadow: var(--bw-shadow-soft);
}
.knowledgeCategoryCard,
.toolList button,
.fileAreaNav button {
  border-radius: 8px;
}

.aiChatPanel {
  box-shadow: 0 34px 90px rgba(17,31,43,.28);
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    linear-gradient(180deg, #0d181b 0%, #071113 100%);
  color: var(--bw-ink);
}
html[data-theme="dark"] .app {
  background:
    linear-gradient(180deg, rgba(62,216,197,.06), rgba(255,255,255,0) 260px);
}
html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #071113 0%, #0b2327 54%, #081013 100%);
  border-right-color: #1c3439;
  box-shadow: 14px 0 40px rgba(0,0,0,.34);
}
html[data-theme="dark"] .brandLogo {
  background: #f7fafb;
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modalSheet,
html[data-theme="dark"] .userMenu,
html[data-theme="dark"] .loginCard,
html[data-theme="dark"] .controlHero,
html[data-theme="dark"] .controlStat,
html[data-theme="dark"] .controlFold,
html[data-theme="dark"] .controlChoiceCard,
html[data-theme="dark"] .courtSearchPanel,
html[data-theme="dark"] .courtFormPanel,
html[data-theme="dark"] .courtListPanel,
html[data-theme="dark"] .designSettingsPanel {
  border-color: var(--bw-line);
  background:
    linear-gradient(180deg, rgba(20, 34, 38, .96), rgba(14, 25, 28, .98));
  color: var(--bw-ink);
  box-shadow: var(--bw-shadow-soft);
}
html[data-theme="dark"] .topbar {
  background:
    linear-gradient(180deg, rgba(19, 33, 37, .98), rgba(14, 24, 27, .94)),
    linear-gradient(135deg, rgba(62,216,197,.1), rgba(255,91,114,.08));
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .itemMain strong,
html[data-theme="dark"] .userMenu span {
  color: var(--bw-ink);
}
html[data-theme="dark"] .muted,
html[data-theme="dark"] .topbar p,
html[data-theme="dark"] .userMenu small,
html[data-theme="dark"] label,
html[data-theme="dark"] .itemMain span,
html[data-theme="dark"] .courtResult small,
html[data-theme="dark"] .courtEmpty span {
  color: var(--bw-muted);
}
html[data-theme="dark"] button,
html[data-theme="dark"] .buttonLink {
  border-color: #31494f;
  background: #132226;
  color: var(--bw-ink);
  box-shadow: none;
}
html[data-theme="dark"] button:hover,
html[data-theme="dark"] .buttonLink:hover {
  border-color: var(--bw-teal);
  background: #172d31;
}
html[data-theme="dark"] button.primary {
  border-color: var(--bw-teal-dark);
  background: linear-gradient(135deg, var(--bw-teal-dark), #106f68);
  color: #fff;
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  border-color: #31494f;
  background: #0d181b;
  color: var(--bw-ink);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #718990;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--bw-teal);
  box-shadow: 0 0 0 3px rgba(62,216,197,.16);
}
html[data-theme="dark"] .item,
html[data-theme="dark"] .detailGrid div,
html[data-theme="dark"] .workflowStep,
html[data-theme="dark"] .catalogGroup,
html[data-theme="dark"] .catalogRow,
html[data-theme="dark"] .formCard,
html[data-theme="dark"] .courtResult,
html[data-theme="dark"] .courtEmpty,
html[data-theme="dark"] .stats span {
  border-color: var(--bw-line);
  background: #101d20;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
html[data-theme="dark"] .adminSubNav {
  border-color: var(--bw-line);
  background: #0c171a;
}
html[data-theme="dark"] .adminSubNav button.active {
  background: #14262a;
  color: var(--bw-teal);
  box-shadow: 0 8px 20px rgba(0,0,0,.28);
}
html[data-theme="dark"] .themeToggle {
  background: #e8f7f5;
  color: #0b3438;
}
html[data-theme="dark"] .compensationGuidePanel {
  background: linear-gradient(135deg, #0b2b2f 0%, #0f5f59 62%, #983849 150%);
}
html[data-theme="dark"] .compensationGuidePanel .compensationSteps span {
  background: rgba(255,255,255,.1);
}
html[data-theme="dark"] .aiChatPanel,
html[data-theme="dark"] .aiChatHeader,
html[data-theme="dark"] .aiChatBody,
html[data-theme="dark"] .aiComposer,
html[data-theme="dark"] .aiChatTabs,
html[data-theme="dark"] .aiMessagesHeader {
  background: #101b1f;
  color: var(--bw-ink);
}
html[data-theme="dark"] .aiChatHeader,
html[data-theme="dark"] .aiChatTabs,
html[data-theme="dark"] .aiComposer {
  border-color: var(--bw-line);
}
html[data-theme="dark"] .aiBubbleBot,
html[data-theme="dark"] .aiBotBubble,
html[data-theme="dark"] .aiEmptyMessages,
html[data-theme="dark"] .aiPrivacy,
html[data-theme="dark"] .aiMessageOpen:hover,
html[data-theme="dark"] .aiMessageRow.active .aiMessageOpen {
  background: #16262a;
  color: var(--bw-ink);
}
html[data-theme="dark"] .aiChatTabs button {
  background: #101b1f;
  color: var(--bw-muted);
}
html[data-theme="dark"] .aiChatTabs button.active {
  color: var(--bw-teal);
  background: #14262a;
  box-shadow: inset 0 3px 0 var(--bw-teal);
}

html[data-theme="office"] {
  color-scheme: dark;
  --bw-ink: #f4f7f8;
  --bw-muted: #b9c4ca;
  --bw-line: #46515a;
  --bw-soft-line: #39434a;
  --bw-bg: #252a30;
  --bw-surface: #30363d;
  --bw-shadow: 0 18px 48px rgba(0, 0, 0, .24);
  --bw-shadow-soft: 0 8px 22px rgba(0, 0, 0, .18);
}

html[data-theme="colorful"] {
  --bw-bg: #f7f4ff;
  --bw-surface: #ffffff;
  --bw-line: #e4e8f4;
  --bw-soft-line: #edf0f8;
}

html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background: linear-gradient(180deg, #30363d 0%, #23282d 100%);
  color: var(--bw-ink);
}
html[data-theme="office"] .app {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 260px);
}
html[data-theme="office"] .sidebar {
  background: linear-gradient(180deg, #20262b 0%, #262d33 58%, #1d2227 100%);
  border-right-color: #3a444b;
}
html[data-theme="office"] .brandLogo {
  background: #f7fafb;
}
html[data-theme="office"] .topbar,
html[data-theme="office"] .panel,
html[data-theme="office"] .card,
html[data-theme="office"] .modalSheet,
html[data-theme="office"] .userMenu,
html[data-theme="office"] .controlHero,
html[data-theme="office"] .controlStat,
html[data-theme="office"] .controlFold,
html[data-theme="office"] .controlChoiceCard,
html[data-theme="office"] .courtSearchPanel,
html[data-theme="office"] .courtFormPanel,
html[data-theme="office"] .courtListPanel,
html[data-theme="office"] .designSettingsPanel {
  border-color: var(--bw-line);
  background: linear-gradient(180deg, #343b42, #2b3137);
  color: var(--bw-ink);
  box-shadow: var(--bw-shadow-soft);
}
html[data-theme="office"] h1,
html[data-theme="office"] h2,
html[data-theme="office"] h3,
html[data-theme="office"] .panel h2,
html[data-theme="office"] .card h2,
html[data-theme="office"] .itemMain strong,
html[data-theme="office"] .userMenu span {
  color: var(--bw-ink);
}
html[data-theme="office"] .muted,
html[data-theme="office"] .topbar p,
html[data-theme="office"] .userMenu small,
html[data-theme="office"] label,
html[data-theme="office"] .itemMain span {
  color: var(--bw-muted);
}
html[data-theme="office"] button,
html[data-theme="office"] .buttonLink,
html[data-theme="office"] input,
html[data-theme="office"] textarea,
html[data-theme="office"] select,
html[data-theme="office"] .item,
html[data-theme="office"] .stats span,
html[data-theme="office"] .courtResult,
html[data-theme="office"] .courtEmpty {
  border-color: var(--bw-line);
  background: #252b31;
  color: var(--bw-ink);
}
html[data-theme="office"] button.primary {
  background: linear-gradient(135deg, var(--bw-teal-dark), var(--bw-teal));
  color: #fff;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--bw-accent-soft) 90%, #fff) 0, transparent 32%),
    radial-gradient(circle at 88% 12%, #fff0f4 0, transparent 30%),
    linear-gradient(180deg, #fff 0%, var(--bw-bg) 100%);
}
html[data-theme="colorful"] .sidebar {
  background: linear-gradient(180deg, #0b3438 0%, color-mix(in srgb, var(--bw-teal-dark) 76%, #18202a) 58%, #181f2a 100%);
}
html[data-theme="colorful"] .topbar,
html[data-theme="colorful"] .compensationGuidePanel {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bw-teal) 94%, #fff) 0%, #ff4b63 74%, #f0b429 135%);
  color: #fff;
}
html[data-theme="colorful"] .topbar h1,
html[data-theme="colorful"] .topbar p,
html[data-theme="colorful"] .compensationGuidePanel h2,
html[data-theme="colorful"] .compensationGuidePanel .muted {
  color: #fff;
}

html[data-theme="dark"] .aiHelpList article,
html[data-theme="dark"] .aiNewsList article,
html[data-theme="dark"] .aiSupportItem,
html[data-theme="office"] .aiHelpList article,
html[data-theme="office"] .aiNewsList article,
html[data-theme="office"] .aiSupportItem {
  background: #16262a;
  color: var(--bw-ink);
  border: 1px solid var(--bw-line);
  box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
html[data-theme="dark"] .aiHelpList strong,
html[data-theme="dark"] .aiNewsList strong,
html[data-theme="dark"] .aiHelpList p,
html[data-theme="dark"] .aiNewsList p,
html[data-theme="dark"] .aiHelpList details,
html[data-theme="dark"] .aiHelpList summary,
html[data-theme="office"] .aiHelpList strong,
html[data-theme="office"] .aiNewsList strong,
html[data-theme="office"] .aiHelpList p,
html[data-theme="office"] .aiNewsList p,
html[data-theme="office"] .aiHelpList details,
html[data-theme="office"] .aiHelpList summary {
  color: var(--bw-ink);
}
html[data-theme="dark"] .aiHelpList article > span,
html[data-theme="dark"] .aiNewsList article > span,
html[data-theme="office"] .aiHelpList article > span,
html[data-theme="office"] .aiNewsList article > span {
  background: color-mix(in srgb, var(--bw-teal) 22%, #101b1f);
  color: #f5fffd;
}
html[data-theme="dark"] .aiHelpList summary,
html[data-theme="office"] .aiHelpList summary {
  cursor: pointer;
  font-weight: 900;
  margin-top: 8px;
}
html[data-theme="dark"] .aiHelpList summary::marker,
html[data-theme="dark"] .aiSourceBox summary::marker,
html[data-theme="office"] .aiHelpList summary::marker,
html[data-theme="office"] .aiSourceBox summary::marker {
  color: var(--bw-teal);
}
html[data-theme="dark"] .aiChatResizeButton,
html[data-theme="dark"] .aiChatHeaderActions button,
html[data-theme="dark"] .aiPlusButton,
html[data-theme="dark"] .aiComposerToolbar button:not(.aiSendButton):not(.aiPlusButton),
html[data-theme="office"] .aiChatResizeButton,
html[data-theme="office"] .aiChatHeaderActions button,
html[data-theme="office"] .aiPlusButton,
html[data-theme="office"] .aiComposerToolbar button:not(.aiSendButton):not(.aiPlusButton) {
  background: #20353a;
  color: var(--bw-ink);
  border: 1px solid var(--bw-line);
}
html[data-theme="dark"] .aiSendButton,
html[data-theme="dark"] .aiChatPanel .aiSendButton,
html[data-theme="office"] .aiSendButton,
html[data-theme="office"] .aiChatPanel .aiSendButton {
  background: var(--bw-teal);
  color: #061214;
}
html[data-theme="dark"] .aiComposerBox,
html[data-theme="office"] .aiComposerBox {
  border-color: var(--bw-line);
  background: #0d181b;
}
html[data-theme="dark"] .aiComposerBox textarea,
html[data-theme="office"] .aiComposerBox textarea {
  color: var(--bw-ink);
}
html[data-theme="dark"] .designPalette,
html[data-theme="office"] .designPalette {
  border-color: var(--bw-line);
  background: #101d20;
}
html[data-theme="dark"] .designPalette strong,
html[data-theme="office"] .designPalette strong {
  color: var(--bw-ink);
}
html[data-theme="dark"] .designColor,
html[data-theme="office"] .designColor {
  border-color: var(--bw-line);
  background: #16262a;
  color: var(--bw-ink);
}
html[data-theme="dark"] .designColor.selected,
html[data-theme="office"] .designColor.selected {
  background: var(--bw-accent-soft);
  color: var(--bw-teal);
}

html[data-theme][data-accent="teal"] { --bw-teal: #0f756e; --bw-teal-dark: #0b4f4a; --bw-accent: #0f756e; --bw-accent-dark: #0b4f4a; --bw-accent-soft: #e8f3f1; }
html[data-theme][data-accent="blue"] { --bw-teal: #1f6feb; --bw-teal-dark: #174ea6; --bw-accent: #1f6feb; --bw-accent-dark: #174ea6; --bw-accent-soft: #eaf2ff; }
html[data-theme][data-accent="red"] { --bw-teal: #d83b4c; --bw-teal-dark: #9f2432; --bw-accent: #d83b4c; --bw-accent-dark: #9f2432; --bw-accent-soft: #fff0f2; }
html[data-theme][data-accent="purple"] { --bw-teal: #7c3aed; --bw-teal-dark: #5b21b6; --bw-accent: #7c3aed; --bw-accent-dark: #5b21b6; --bw-accent-soft: #f2ecff; }
html[data-theme][data-accent="gold"] { --bw-teal: #a86c00; --bw-teal-dark: #7a4d00; --bw-accent: #a86c00; --bw-accent-dark: #7a4d00; --bw-accent-soft: #fff5db; }
html[data-theme="dark"][data-accent="teal"], html[data-theme="office"][data-accent="teal"] { --bw-teal: #3ed6c5; --bw-teal-dark: #18a99a; --bw-accent: #3ed6c5; --bw-accent-dark: #18a99a; --bw-accent-soft: #153935; }
html[data-theme="dark"][data-accent="blue"], html[data-theme="office"][data-accent="blue"] { --bw-teal: #74a7ff; --bw-teal-dark: #2f75d6; --bw-accent: #74a7ff; --bw-accent-dark: #2f75d6; --bw-accent-soft: #172c4d; }
html[data-theme="dark"][data-accent="red"], html[data-theme="office"][data-accent="red"] { --bw-teal: #ff6b7f; --bw-teal-dark: #d83b4c; --bw-accent: #ff6b7f; --bw-accent-dark: #d83b4c; --bw-accent-soft: #4a1821; }
html[data-theme="dark"][data-accent="purple"], html[data-theme="office"][data-accent="purple"] { --bw-teal: #b08cff; --bw-teal-dark: #7c3aed; --bw-accent: #b08cff; --bw-accent-dark: #7c3aed; --bw-accent-soft: #2e1f4c; }
html[data-theme="dark"][data-accent="gold"], html[data-theme="office"][data-accent="gold"] { --bw-teal: #ffd166; --bw-teal-dark: #c88a10; --bw-accent: #ffd166; --bw-accent-dark: #c88a10; --bw-accent-soft: #453514; }

/* Phase 11 accent propagation and dark/office cleanup */
html[data-theme="dark"] .adminSubNav,
html[data-theme="office"] .adminSubNav {
  background: #20282d;
  border-color: var(--bw-line);
}
html[data-theme="dark"] .adminSubNav button,
html[data-theme="office"] .adminSubNav button {
  background: #263139;
  color: var(--bw-ink);
}
html[data-theme="dark"] .adminSubNav button.active,
html[data-theme="office"] .adminSubNav button.active {
  background: color-mix(in srgb, var(--bw-teal) 18%, #263139);
  color: var(--bw-teal);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bw-teal) 35%, transparent);
}
.aiChatLauncher {
  background: linear-gradient(145deg, var(--bw-coral), var(--bw-teal));
}
.aiHelpHero {
  background: linear-gradient(145deg, var(--bw-teal-dark), var(--bw-teal));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--bw-teal) 26%, transparent);
}
.aiNewsHero,
.aiHeroCard {
  background:
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.26), transparent 30%),
    linear-gradient(145deg, var(--bw-coral) 0%, var(--bw-teal) 130%);
}
.aiAgentStack span:nth-child(3),
.aiBubbleUser,
.aiSupportForm button.primary {
  background: var(--bw-teal);
  border-color: var(--bw-teal);
}
.aiSendButton,
.aiChatPanel .aiSendButton,
.aiComposer:focus-within .aiSendButton {
  background: var(--bw-teal);
  border-color: var(--bw-teal);
  color: #fff;
  box-shadow: 0 8px 16px color-mix(in srgb, var(--bw-teal) 24%, transparent);
}
.aiChatTabs button.active {
  color: var(--bw-teal);
  box-shadow: inset 0 3px 0 var(--bw-teal);
}
.aiHelpCategories button,
.aiQuickPrompts button,
.aiPlusButton,
.aiChatResizeButton {
  color: var(--bw-teal);
}
.aiHelpCategories button:hover,
.aiQuickPrompts button:hover,
.aiChatResizeButton:hover {
  background: var(--bw-accent-soft);
}
.aiHelpCategories {
  scrollbar-color: var(--bw-teal) transparent;
}
.aiHelpCategories::-webkit-scrollbar {
  height: 8px;
}
.aiHelpCategories::-webkit-scrollbar-thumb {
  background: var(--bw-teal);
  border-radius: 999px;
}
.personFilterStatus,
.metric,
.stats strong,
.compensationStat strong,
.compensationResultBox strong,
.journalStat strong,
.moneyCell,
.sourceInline,
.formCard small,
.knowledgeCatIcon,
.knowledgePill,
.inlineBadge,
.pill,
.statusMark,
.courtResultMeta,
.calendarCell strong,
.calendarCell.todayCell strong::after,
.aiChatMark,
.aiDecisionGrid button b,
.aiMessagesHeader button:hover {
  color: var(--bw-teal);
}
button.primary,
.themeToggle:hover,
.adminSubNav button.active,
.controlSectionNav button.active,
.statusButtonGroup .statusButton.active,
.controlWizardPill.active,
.datePickerGrid button.selected,
.easyStepHead > span,
.journalTabs button.active,
.wealthTabs button.active,
.fileAreaNav button.active strong,
.aiModeSwitch button.active {
  background: var(--bw-teal);
  border-color: var(--bw-teal);
  color: #fff;
}
.statusMark,
.inlineBadge,
.pill,
.knowledgePill,
.knowledgeCatIcon,
.courtResultMeta,
.calendarCell span,
.aiDecisionGrid button b,
.aiDecisionGrid button.active,
.aiModeSwitch button:not(.active):hover,
.aiQuickPrompts button:hover,
.aiActionMenu button:hover,
.aiMessagesHeader button:hover,
.datePickerGrid button:hover {
  background: var(--bw-accent-soft);
  border-color: color-mix(in srgb, var(--bw-teal) 32%, transparent);
}
.calendarCell span {
  border-left-color: var(--bw-teal);
}
.calendarCell.todayCell,
.templateCard.active,
.easyChoice:has(input:checked),
.fileAreaNav button.active,
.controlCustomerItem.active,
.controlCustomerRow.active,
.supportMailRow.active,
.billingInvoiceRow.active {
  border-color: var(--bw-teal);
  background: var(--bw-accent-soft);
}
.lawAnswerBox,
.initialDocumentsBox,
.officialFormUploadPanel,
.simpleVordruckPanel,
.compensationResultBox,
.backupRunPanel,
.controlNotice {
  border-left-color: var(--bw-teal);
}
.aiChatPanel.dragging .aiChatBody {
  outline-color: var(--bw-teal);
  background: var(--bw-accent-soft);
}
.aiFeatureStrip button span {
  color: var(--bw-teal);
  box-shadow: inset 0 -8px 18px color-mix(in srgb, var(--bw-teal) 12%, transparent);
}
html[data-theme="dark"] .aiSendButton,
html[data-theme="dark"] .aiChatPanel .aiSendButton,
html[data-theme="office"] .aiSendButton,
html[data-theme="office"] .aiChatPanel .aiSendButton {
  color: #061214;
}

/* Phase 11 office chat rerender */
html[data-theme="office"] .aiChatPanel {
  border: 1px solid #59646d;
  background: #2e353c;
  color: var(--bw-ink);
  box-shadow: 0 30px 78px rgba(0, 0, 0, .34);
}
html[data-theme="office"] .aiChatHeader,
html[data-theme="office"] .aiMessagesHeader,
html[data-theme="office"] .aiComposer,
html[data-theme="office"] .aiChatTabs {
  background: #313941;
  color: var(--bw-ink);
  border-color: #4b5660;
}
html[data-theme="office"] .aiChatHeader {
  border-bottom: 1px solid #4b5660;
}
html[data-theme="office"] .aiChatHeaderBrand strong,
html[data-theme="office"] .aiMessagesHeader > strong,
html[data-theme="office"] .aiEmptyMessages strong,
html[data-theme="office"] .aiBotBubble strong,
html[data-theme="office"] .aiMessageText strong,
html[data-theme="office"] .aiAnswerText h4 {
  color: #f7fbfc;
}
html[data-theme="office"] .aiChatHeader span,
html[data-theme="office"] .aiMessageText small,
html[data-theme="office"] .aiBotIntro small,
html[data-theme="office"] .aiBubbleMeta,
html[data-theme="office"] .aiPrivacy,
html[data-theme="office"] .aiSectionTitle span,
html[data-theme="office"] .aiFeatureStrip button small {
  color: #c4cdd3;
}
html[data-theme="office"] .aiChatBody,
html[data-theme="office"] .aiMessageList,
html[data-theme="office"] .aiMessagesPanel {
  background: #2b3239;
  color: var(--bw-ink);
}
html[data-theme="office"] .aiHomePanel,
html[data-theme="office"] .aiHelpPanel,
html[data-theme="office"] .aiConversation {
  background: transparent;
}
html[data-theme="office"] .aiWelcomeCard,
html[data-theme="office"] .aiSupportCard,
html[data-theme="office"] .aiNewsCard,
html[data-theme="office"] .aiDecisionCard,
html[data-theme="office"] .aiBotBubble,
html[data-theme="office"] .aiBubbleBot,
html[data-theme="office"] .aiEmptyMessages,
html[data-theme="office"] .aiPrivacy,
html[data-theme="office"] .aiActionMenu,
html[data-theme="office"] .aiSource,
html[data-theme="office"] .aiMessageRow.active .aiMessageOpen,
html[data-theme="office"] .aiMessageOpen:hover {
  background: #3a434b;
  color: var(--bw-ink);
  border-color: #55616b;
  box-shadow: none;
}
html[data-theme="office"] .aiWelcomeCard p,
html[data-theme="office"] .aiBotBubble p,
html[data-theme="office"] .aiAnswerText p,
html[data-theme="office"] .aiAnswerText li,
html[data-theme="office"] .aiSourceBox summary,
html[data-theme="office"] .aiSupportItem span,
html[data-theme="office"] .aiNewsList p,
html[data-theme="office"] .aiHelpList p {
  color: #eef4f5;
}
html[data-theme="office"] .aiMessageRow {
  border-bottom-color: #46515a;
}
html[data-theme="office"] .aiMessageOpen {
  color: var(--bw-ink);
}
html[data-theme="office"] .aiMessageLogo,
html[data-theme="office"] .aiChatMark {
  background: #eef3f5;
  color: var(--bw-teal);
}
html[data-theme="office"] .aiHelpHero,
html[data-theme="office"] .aiMessageHero,
html[data-theme="office"] .aiNewsHero,
html[data-theme="office"] .aiHeroCard {
  background:
    linear-gradient(90deg, var(--bw-teal), var(--bw-accent-dark)) top left / 100% 4px no-repeat,
    linear-gradient(145deg, #404a53, #303841);
  color: #f8fbfc;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
}
html[data-theme="office"] .aiMessageHero span,
html[data-theme="office"] .aiHelpHero span {
  color: #d7e0e4;
}
html[data-theme="office"] .aiHelpHero .aiHelpSearch input,
html[data-theme="office"] .aiSupportForm textarea,
html[data-theme="office"] .aiHelpSearch input {
  background: #252c32;
  border-color: #56626c;
  color: var(--bw-ink);
}
html[data-theme="office"] .aiComposerBox {
  background: #3a434b;
  border-color: #61707a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 22px rgba(0,0,0,.18);
}
html[data-theme="office"] .aiComposerBox textarea {
  color: #f7fbfc;
}
html[data-theme="office"] .aiComposerBox textarea::placeholder,
html[data-theme="office"] .aiHelpSearch input::placeholder,
html[data-theme="office"] .aiSupportForm textarea::placeholder {
  color: #aeb9c0;
  opacity: 1;
}
html[data-theme="office"] .aiChatTabs button {
  background: #313941;
  color: #c4cdd3;
  border-color: #46515a;
}
html[data-theme="office"] .aiChatTabs button.active {
  background: #39444d;
  color: var(--bw-teal);
  box-shadow: inset 0 3px 0 var(--bw-teal);
}
html[data-theme="office"] .aiChatHeaderActions button,
html[data-theme="office"] .aiMessagesHeader button,
html[data-theme="office"] .aiHelpCategories button,
html[data-theme="office"] .aiQuickPrompts button,
html[data-theme="office"] .aiActionMenu button,
html[data-theme="office"] .aiPlusButton,
html[data-theme="office"] .aiChatResizeButton,
html[data-theme="office"] .aiComposerToolbar button:not(.aiSendButton):not(.aiPlusButton) {
  background: #3f4951;
  color: #f5fafb;
  border: 1px solid #58656f;
  box-shadow: none;
}
html[data-theme="office"] .aiChatHeaderActions button:hover,
html[data-theme="office"] .aiMessagesHeader button:hover,
html[data-theme="office"] .aiHelpCategories button:hover,
html[data-theme="office"] .aiQuickPrompts button:hover,
html[data-theme="office"] .aiActionMenu button:hover,
html[data-theme="office"] .aiChatResizeButton:hover {
  background: color-mix(in srgb, var(--bw-teal) 20%, #3f4951);
  color: #ffffff;
}
html[data-theme="office"] .aiFeatureStrip button {
  background: #3a434b;
  color: #f7fbfc;
}
html[data-theme="office"] .aiFeatureStrip button span {
  background: #46525c;
  color: var(--bw-teal);
}

/* Phase 11 readable chat surfaces for dark designs */
html[data-theme="dark"] {
  --bw-chat-panel: #0d181b;
  --bw-chat-header: #111f23;
  --bw-chat-body: #0b1518;
  --bw-chat-surface: #15262a;
  --bw-chat-surface-strong: #1c3035;
  --bw-chat-line: #2f464c;
  --bw-chat-text: #f6fbfc;
  --bw-chat-muted: #b7c9ce;
  --bw-chat-control: #1d3035;
}
html[data-theme="office"] {
  --bw-chat-panel: #2e353c;
  --bw-chat-header: #333b43;
  --bw-chat-body: #293037;
  --bw-chat-surface: #3a434b;
  --bw-chat-surface-strong: #424c55;
  --bw-chat-line: #5a6670;
  --bw-chat-text: #f7fbfc;
  --bw-chat-muted: #c7d1d6;
  --bw-chat-control: #414b53;
}
html[data-theme="dark"] .aiChatPanel,
html[data-theme="office"] .aiChatPanel {
  border: 1px solid var(--bw-chat-line);
  background: var(--bw-chat-panel);
  color: var(--bw-chat-text);
}
html[data-theme="dark"] .aiChatHeader,
html[data-theme="dark"] .aiMessagesHeader,
html[data-theme="dark"] .aiComposer,
html[data-theme="dark"] .aiChatTabs,
html[data-theme="office"] .aiChatHeader,
html[data-theme="office"] .aiMessagesHeader,
html[data-theme="office"] .aiComposer,
html[data-theme="office"] .aiChatTabs {
  background: var(--bw-chat-header);
  color: var(--bw-chat-text);
  border-color: var(--bw-chat-line);
}
html[data-theme="dark"] .aiChatBody,
html[data-theme="dark"] .aiMessageList,
html[data-theme="dark"] .aiMessagesPanel,
html[data-theme="office"] .aiChatBody,
html[data-theme="office"] .aiMessageList,
html[data-theme="office"] .aiMessagesPanel {
  background: var(--bw-chat-body);
  color: var(--bw-chat-text);
}
html[data-theme="dark"] .aiChatPanel strong,
html[data-theme="dark"] .aiChatPanel h3,
html[data-theme="dark"] .aiChatPanel h4,
html[data-theme="dark"] .aiChatPanel p,
html[data-theme="dark"] .aiChatPanel li,
html[data-theme="dark"] .aiChatPanel summary,
html[data-theme="dark"] .aiMessageText strong,
html[data-theme="office"] .aiChatPanel strong,
html[data-theme="office"] .aiChatPanel h3,
html[data-theme="office"] .aiChatPanel h4,
html[data-theme="office"] .aiChatPanel p,
html[data-theme="office"] .aiChatPanel li,
html[data-theme="office"] .aiChatPanel summary,
html[data-theme="office"] .aiMessageText strong {
  color: var(--bw-chat-text);
}
html[data-theme="dark"] .aiChatHeader span,
html[data-theme="dark"] .aiChatPanel small,
html[data-theme="dark"] .aiChatPanel .aiBubbleMeta,
html[data-theme="dark"] .aiMessageText small,
html[data-theme="dark"] .aiPrivacy,
html[data-theme="dark"] .aiBotIntro small,
html[data-theme="office"] .aiChatHeader span,
html[data-theme="office"] .aiChatPanel small,
html[data-theme="office"] .aiChatPanel .aiBubbleMeta,
html[data-theme="office"] .aiMessageText small,
html[data-theme="office"] .aiPrivacy,
html[data-theme="office"] .aiBotIntro small {
  color: var(--bw-chat-muted);
}
html[data-theme="dark"] .aiWelcomeCard,
html[data-theme="dark"] .aiSupportCard,
html[data-theme="dark"] .aiNewsCard,
html[data-theme="dark"] .aiDecisionCard,
html[data-theme="dark"] .aiSupportItem,
html[data-theme="dark"] .aiNewsList article,
html[data-theme="dark"] .aiHelpList article,
html[data-theme="dark"] .aiBotBubble,
html[data-theme="dark"] .aiBubbleBot,
html[data-theme="dark"] .aiEmptyMessages,
html[data-theme="dark"] .aiSource,
html[data-theme="dark"] .aiActionMenu,
html[data-theme="dark"] .aiMessageOpen:hover,
html[data-theme="dark"] .aiMessageRow.active .aiMessageOpen,
html[data-theme="office"] .aiWelcomeCard,
html[data-theme="office"] .aiSupportCard,
html[data-theme="office"] .aiNewsCard,
html[data-theme="office"] .aiDecisionCard,
html[data-theme="office"] .aiSupportItem,
html[data-theme="office"] .aiNewsList article,
html[data-theme="office"] .aiHelpList article,
html[data-theme="office"] .aiBotBubble,
html[data-theme="office"] .aiBubbleBot,
html[data-theme="office"] .aiEmptyMessages,
html[data-theme="office"] .aiSource,
html[data-theme="office"] .aiActionMenu,
html[data-theme="office"] .aiMessageOpen:hover,
html[data-theme="office"] .aiMessageRow.active .aiMessageOpen {
  background: var(--bw-chat-surface);
  color: var(--bw-chat-text);
  border: 1px solid var(--bw-chat-line);
  box-shadow: none;
}
html[data-theme="dark"] .aiMessageOpen,
html[data-theme="office"] .aiMessageOpen {
  color: var(--bw-chat-text);
}
html[data-theme="dark"] .aiMessageRow,
html[data-theme="office"] .aiMessageRow {
  border-bottom-color: var(--bw-chat-line);
}
html[data-theme="dark"] .aiHelpHero,
html[data-theme="dark"] .aiMessageHero,
html[data-theme="dark"] .aiNewsHero,
html[data-theme="dark"] .aiHeroCard,
html[data-theme="office"] .aiHelpHero,
html[data-theme="office"] .aiMessageHero,
html[data-theme="office"] .aiNewsHero,
html[data-theme="office"] .aiHeroCard {
  background:
    linear-gradient(90deg, var(--bw-teal), var(--bw-accent-dark)) top left / 100% 4px no-repeat,
    linear-gradient(145deg, var(--bw-chat-surface-strong), var(--bw-chat-header));
  color: var(--bw-chat-text);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
}
html[data-theme="dark"] .aiMessageHero span,
html[data-theme="dark"] .aiHelpHero span,
html[data-theme="office"] .aiMessageHero span,
html[data-theme="office"] .aiHelpHero span {
  color: var(--bw-chat-muted);
}
html[data-theme="dark"] .aiComposerBox,
html[data-theme="office"] .aiComposerBox {
  background: var(--bw-chat-surface);
  border-color: var(--bw-chat-line);
  color: var(--bw-chat-text);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 10px 24px rgba(0,0,0,.18);
}
html[data-theme="dark"] .aiComposerBox textarea,
html[data-theme="office"] .aiComposerBox textarea {
  color: var(--bw-chat-text);
  caret-color: var(--bw-teal);
}
html[data-theme="dark"] .aiComposerBox textarea::placeholder,
html[data-theme="dark"] .aiHelpSearch input::placeholder,
html[data-theme="dark"] .aiSupportForm textarea::placeholder,
html[data-theme="office"] .aiComposerBox textarea::placeholder,
html[data-theme="office"] .aiHelpSearch input::placeholder,
html[data-theme="office"] .aiSupportForm textarea::placeholder {
  color: var(--bw-chat-muted);
  opacity: 1;
}
html[data-theme="dark"] .aiHelpSearch input,
html[data-theme="dark"] .aiSupportForm textarea,
html[data-theme="dark"] .aiComposer textarea,
html[data-theme="office"] .aiHelpSearch input,
html[data-theme="office"] .aiSupportForm textarea,
html[data-theme="office"] .aiComposer textarea {
  background: var(--bw-chat-surface) !important;
  border-color: var(--bw-chat-line);
  color: var(--bw-chat-text);
}
html[data-theme="dark"] .aiChatTabs button,
html[data-theme="office"] .aiChatTabs button {
  background: var(--bw-chat-header);
  color: var(--bw-chat-muted);
  border-color: var(--bw-chat-line);
}
html[data-theme="dark"] .aiChatTabs button.active,
html[data-theme="office"] .aiChatTabs button.active {
  background: var(--bw-chat-surface-strong);
  color: var(--bw-teal);
  box-shadow: inset 0 3px 0 var(--bw-teal);
}
html[data-theme="dark"] .aiChatHeaderActions button,
html[data-theme="dark"] .aiMessagesHeader button,
html[data-theme="dark"] .aiHelpCategories button,
html[data-theme="dark"] .aiQuickPrompts button,
html[data-theme="dark"] .aiActionMenu button,
html[data-theme="dark"] .aiPlusButton,
html[data-theme="dark"] .aiChatResizeButton,
html[data-theme="dark"] .aiComposerToolbar button:not(.aiSendButton):not(.aiPlusButton),
html[data-theme="office"] .aiChatHeaderActions button,
html[data-theme="office"] .aiMessagesHeader button,
html[data-theme="office"] .aiHelpCategories button,
html[data-theme="office"] .aiQuickPrompts button,
html[data-theme="office"] .aiActionMenu button,
html[data-theme="office"] .aiPlusButton,
html[data-theme="office"] .aiChatResizeButton,
html[data-theme="office"] .aiComposerToolbar button:not(.aiSendButton):not(.aiPlusButton) {
  background: var(--bw-chat-control);
  color: var(--bw-chat-text);
  border: 1px solid var(--bw-chat-line);
  box-shadow: none;
}
html[data-theme="dark"] .aiChatHeaderActions button:hover,
html[data-theme="dark"] .aiMessagesHeader button:hover,
html[data-theme="dark"] .aiHelpCategories button:hover,
html[data-theme="dark"] .aiQuickPrompts button:hover,
html[data-theme="dark"] .aiActionMenu button:hover,
html[data-theme="dark"] .aiChatResizeButton:hover,
html[data-theme="office"] .aiChatHeaderActions button:hover,
html[data-theme="office"] .aiMessagesHeader button:hover,
html[data-theme="office"] .aiHelpCategories button:hover,
html[data-theme="office"] .aiQuickPrompts button:hover,
html[data-theme="office"] .aiActionMenu button:hover,
html[data-theme="office"] .aiChatResizeButton:hover {
  background: color-mix(in srgb, var(--bw-teal) 22%, var(--bw-chat-control));
  color: #ffffff;
}
html[data-theme="dark"] .aiMessagesHeader button:disabled,
html[data-theme="office"] .aiMessagesHeader button:disabled {
  color: color-mix(in srgb, var(--bw-chat-muted) 70%, transparent);
  opacity: .75;
}
html[data-theme="dark"] .aiFileChip,
html[data-theme="office"] .aiFileChip {
  background: color-mix(in srgb, var(--bw-amber) 20%, var(--bw-chat-control));
  color: #fff4d6;
}
html[data-theme="dark"] .aiSourceBox,
html[data-theme="office"] .aiSourceBox {
  border-top-color: var(--bw-chat-line);
}
html[data-theme="dark"] .aiBubbleUser,
html[data-theme="office"] .aiBubbleUser {
  color: #ffffff;
}
html[data-theme="dark"] .aiFeatureStrip button,
html[data-theme="office"] .aiFeatureStrip button {
  background: var(--bw-chat-surface);
  color: var(--bw-chat-text);
}
html[data-theme="dark"] .aiFeatureStrip button span,
html[data-theme="office"] .aiFeatureStrip button span {
  background: var(--bw-chat-surface-strong);
  color: var(--bw-teal);
}

/* Phase 12 community knowledge feed and chat inbox */
.knowledgeCommunityShell {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.knowledgeCommunityNav {
  display: grid;
  gap: 12px;
  position: sticky;
  top: 14px;
}
.knowledgeFeed {
  width: min(100%, 980px);
  justify-self: center;
  display: grid;
  gap: 14px;
}
.knowledgeFeedList {
  display: grid;
  gap: 14px;
}
.knowledgeThreadOverview {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.knowledgeThreadOverviewHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.knowledgeThreadOverviewHead span,
.knowledgeThreadMiniBadge {
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--bw-teal);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bw-teal) 24%, transparent);
}
.knowledgeThreadMiniList {
  display: grid;
  gap: 8px;
}
.knowledgeThreadMiniItem {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  padding: 9px;
  text-decoration: none;
}
.knowledgeThreadMiniItem:hover,
.knowledgeThreadMiniItem.unread {
  border-color: color-mix(in srgb, var(--bw-teal) 42%, #dbe3ea);
  background: var(--bw-accent-soft);
}
.knowledgeThreadMiniItem strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledgeThreadMiniItem small {
  display: block;
  color: #667582;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.knowledgeThreadComposer {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
}
.knowledgeComposerAvatar,
.knowledgeReplyAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bw-teal) 16%, #fff);
  color: var(--bw-teal-dark);
  font-weight: 950;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bw-teal) 28%, transparent);
}
.knowledgeThreadForm,
.knowledgeArticleForm {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.knowledgeThreadForm textarea,
.knowledgeArticleForm textarea,
.knowledgeReplyForm textarea {
  min-height: 94px;
}
.knowledgeInlineComposer {
  padding: 0;
  overflow: hidden;
}
.knowledgeInlineComposer summary {
  cursor: pointer;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px;
  font-weight: 900;
}
.knowledgeInlineComposer summary::after {
  content: "+";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bw-teal);
  color: #fff;
}
.knowledgeInlineComposer[open] summary::after {
  content: "-";
}
.knowledgeInlineComposer form {
  padding: 0 16px 16px;
}
.knowledgeFeedCard {
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 12px 32px rgba(17,31,43,.08);
}
.knowledgeFeedCard.focusPulse {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-teal) 38%, transparent), 0 18px 42px rgba(17,31,43,.12);
}
.knowledgePostHeader {
  align-items: center;
}
.knowledgePost h3 {
  font-size: 22px;
  line-height: 1.2;
}
.knowledgeReplies {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}
.knowledgeReply {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.knowledgeReply > div {
  border-radius: 8px;
  background: #f4f7f8;
  border: 1px solid #dce5ea;
  padding: 10px 12px;
  min-width: 0;
}
.knowledgeReplyHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 5px;
}
.knowledgeReplyHead small {
  color: #667582;
  white-space: nowrap;
}
.knowledgeReply p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.knowledgeReplyForm {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding-left: 52px;
}
.knowledgeReplyForm .formActions {
  justify-content: flex-end;
}
.knowledgeThreadEdit {
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #f8fafb;
  padding: 10px 12px;
}
.knowledgeThreadEdit summary {
  cursor: pointer;
  font-weight: 900;
}
.knowledgeThreadEditForm {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.knowledgeThreadEditForm textarea {
  min-height: 96px;
}
.knowledgeThreadActions {
  align-items: center;
}
.adminSupportWorkspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}
.compactStats {
  display: flex;
  gap: 8px;
}
.compactStats span {
  min-width: 84px;
}
.adminSupportList {
  display: grid;
  gap: 12px;
}
.supportAdminChat {
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  display: grid;
  gap: 12px;
  box-shadow: 0 10px 26px rgba(17,31,43,.07);
}
.supportAdminChat.unread {
  border-color: color-mix(in srgb, var(--bw-accent) 55%, #dbe3ea);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-accent) 14%, transparent), 0 10px 26px rgba(17,31,43,.08);
}
.supportAdminChatHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.supportAdminChatHead > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.supportAdminChatHead span,
.supportAdminChatHead small {
  color: #667582;
}
.supportAdminMessages {
  max-height: 280px;
  overflow: auto;
  padding-right: 3px;
}
.supportReplyForm textarea {
  min-height: 92px;
}
.aiFreshChatPanel {
  min-height: 100%;
  align-content: start;
}
.aiContinueActions {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
}
.aiContinueActions button {
  border-radius: 999px;
  background: #f3f6f7;
  color: var(--bw-teal-dark);
  border: 1px solid #dbe3ea;
  font-weight: 900;
}
.aiLauncherBadge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e2333f;
  color: #fff;
  border: 2px solid #fff;
  font-size: 11px;
}
.aiChatLauncher {
  position: relative;
}
.pill.danger {
  background: #ffe8ec;
  color: #c72d3d;
}
.aiChatTabs button {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.15;
}
.aiTabBadge {
  position: absolute;
  top: 7px;
  right: 18%;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #e2333f;
  color: #fff;
  font-size: 10px;
  box-shadow: 0 0 0 2px #fff;
}
.aiMessageRow.unread .aiMessageText strong {
  font-weight: 950;
}
.aiSupportThreadPanel {
  gap: 12px;
}
.aiSupportThreadHead {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.aiSupportThreadHead div {
  display: grid;
  gap: 3px;
}
.aiSupportThreadHead span {
  color: #667582;
  font-size: 12px;
}
.aiSupportUnread {
  border-radius: 999px;
  background: #ffe8ec;
  color: #c72d3d;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
}
.aiSupportThreadMessages {
  display: grid;
  gap: 8px;
}
.aiSupportBubbleRow {
  display: flex;
}
.aiSupportBubbleRow.admin {
  justify-content: flex-start;
}
.aiSupportBubbleRow.customer {
  justify-content: flex-end;
}
.aiSupportBubble {
  max-width: 88%;
  border-radius: 16px;
  background: #f2f3f4;
  color: #20262c;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
  line-height: 1.4;
}
.aiSupportBubbleRow.customer .aiSupportBubble {
  background: var(--bw-teal);
  color: #fff;
}
.aiSupportBubble span {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.aiSupportBubble small {
  color: inherit;
  opacity: .72;
}
.aiSupportReplyForm {
  display: grid;
  gap: 8px;
}
.aiSupportReplyForm textarea {
  min-height: 96px;
}
html[data-theme="dark"] .knowledgeThreadComposer,
html[data-theme="dark"] .knowledgeThreadOverview,
html[data-theme="dark"] .knowledgeThreadMiniItem,
html[data-theme="dark"] .knowledgeThreadEdit,
html[data-theme="dark"] .knowledgeInlineComposer,
html[data-theme="dark"] .knowledgeFeedCard,
html[data-theme="dark"] .knowledgeCategoryList,
html[data-theme="dark"] .knowledgeCategoryCard,
html[data-theme="dark"] .knowledgeReply > div,
html[data-theme="dark"] .supportAdminChat,
html[data-theme="office"] .knowledgeThreadComposer,
html[data-theme="office"] .knowledgeThreadOverview,
html[data-theme="office"] .knowledgeThreadMiniItem,
html[data-theme="office"] .knowledgeThreadEdit,
html[data-theme="office"] .knowledgeInlineComposer,
html[data-theme="office"] .knowledgeFeedCard,
html[data-theme="office"] .knowledgeCategoryList,
html[data-theme="office"] .knowledgeCategoryCard,
html[data-theme="office"] .knowledgeReply > div,
html[data-theme="office"] .supportAdminChat {
  background: var(--bw-surface);
  border-color: var(--bw-line);
  color: var(--bw-ink);
  box-shadow: var(--bw-shadow-soft);
}
html[data-theme="dark"] .knowledgePost p,
html[data-theme="dark"] .knowledgeReply p,
html[data-theme="dark"] .supportMessage span,
html[data-theme="office"] .knowledgePost p,
html[data-theme="office"] .knowledgeReply p,
html[data-theme="office"] .supportMessage span {
  color: var(--bw-ink);
}
html[data-theme="dark"] .knowledgeCategoryCard small,
html[data-theme="dark"] .knowledgeThreadMiniItem small,
html[data-theme="dark"] .knowledgePostMeta,
html[data-theme="dark"] .knowledgeReplyHead small,
html[data-theme="dark"] .supportAdminChatHead span,
html[data-theme="dark"] .supportAdminChatHead small,
html[data-theme="office"] .knowledgeCategoryCard small,
html[data-theme="office"] .knowledgeThreadMiniItem small,
html[data-theme="office"] .knowledgePostMeta,
html[data-theme="office"] .knowledgeReplyHead small,
html[data-theme="office"] .supportAdminChatHead span,
html[data-theme="office"] .supportAdminChatHead small {
  color: var(--bw-muted);
}
html[data-theme="dark"] .knowledgeCategoryCard.active,
html[data-theme="office"] .knowledgeCategoryCard.active {
  background: color-mix(in srgb, var(--bw-teal) 15%, var(--bw-surface));
}
html[data-theme="dark"] .lawWatchNotice,
html[data-theme="dark"] .lawBook,
html[data-theme="dark"] .lawSubBook,
html[data-theme="dark"] .lawLibraryLaw,
html[data-theme="dark"] .lawNormListHead,
html[data-theme="dark"] .lawNormEntry,
html[data-theme="dark"] .lawNormFull,
html[data-theme="dark"] .lawFullTextHead,
html[data-theme="dark"] .lawImportStatus,
html[data-theme="dark"] .lawNormCard,
html[data-theme="dark"] .lawIndexCard,
html[data-theme="office"] .lawWatchNotice,
html[data-theme="office"] .lawBook,
html[data-theme="office"] .lawSubBook,
html[data-theme="office"] .lawLibraryLaw,
html[data-theme="office"] .lawNormListHead,
html[data-theme="office"] .lawNormEntry,
html[data-theme="office"] .lawNormFull,
html[data-theme="office"] .lawFullTextHead,
html[data-theme="office"] .lawImportStatus,
html[data-theme="office"] .lawNormCard,
html[data-theme="office"] .lawIndexCard {
  background: var(--bw-surface);
  color: var(--bw-ink);
  border-color: var(--bw-line);
  box-shadow: var(--bw-shadow-soft);
}
html[data-theme="dark"] .lawWatchNotice span,
html[data-theme="dark"] .lawBook > summary small,
html[data-theme="dark"] .lawLibraryLaw > summary small,
html[data-theme="dark"] .lawFullTextHead span,
html[data-theme="dark"] .lawNormEntry > summary small,
html[data-theme="dark"] .lawSourceLine,
html[data-theme="dark"] .lawNormCard p,
html[data-theme="dark"] .lawIndexCard p,
html[data-theme="office"] .lawWatchNotice span,
html[data-theme="office"] .lawBook > summary small,
html[data-theme="office"] .lawLibraryLaw > summary small,
html[data-theme="office"] .lawFullTextHead span,
html[data-theme="office"] .lawNormEntry > summary small,
html[data-theme="office"] .lawSourceLine,
html[data-theme="office"] .lawNormCard p,
html[data-theme="office"] .lawIndexCard p {
  color: var(--bw-muted);
}
html[data-theme="dark"] .lawNormSection,
html[data-theme="dark"] .lawNormBody,
html[data-theme="office"] .lawNormSection,
html[data-theme="office"] .lawNormBody {
  background: color-mix(in srgb, var(--bw-surface) 90%, var(--bw-line));
  border-color: var(--bw-line);
}
html[data-theme="dark"] .lawNormEntry > summary strong,
html[data-theme="dark"] .lawNormBody p,
html[data-theme="office"] .lawNormEntry > summary strong,
html[data-theme="office"] .lawNormBody p {
  color: var(--bw-ink);
}
html[data-theme="dark"] .lawNormFull h4,
html[data-theme="dark"] .lawNormFull p,
html[data-theme="office"] .lawNormFull h4,
html[data-theme="office"] .lawNormFull p {
  color: var(--bw-ink);
}
html[data-theme="dark"] .lawLibraryText,
html[data-theme="office"] .lawLibraryText {
  border-color: var(--bw-line);
}
html[data-theme="dark"] .aiSupportThreadPanel,
html[data-theme="dark"] .aiSupportBubble,
html[data-theme="dark"] .aiSupportReplyForm textarea,
html[data-theme="dark"] .aiContinueActions button,
html[data-theme="office"] .aiSupportThreadPanel,
html[data-theme="office"] .aiSupportBubble,
html[data-theme="office"] .aiSupportReplyForm textarea,
html[data-theme="office"] .aiContinueActions button {
  background: var(--bw-chat-surface);
  color: var(--bw-chat-text);
  border-color: var(--bw-chat-line);
}
html[data-theme="dark"] .aiSupportThreadHead span,
html[data-theme="office"] .aiSupportThreadHead span {
  color: var(--bw-chat-muted);
}
html[data-theme="dark"] .aiSupportBubbleRow.customer .aiSupportBubble,
html[data-theme="office"] .aiSupportBubbleRow.customer .aiSupportBubble {
  background: var(--bw-teal);
  color: #fff;
}
html[data-theme="dark"] .aiTabBadge,
html[data-theme="office"] .aiTabBadge {
  box-shadow: 0 0 0 2px var(--bw-chat-header);
}
@media (max-width: 980px) {
  .knowledgeCommunityShell,
  .adminSupportWorkspace {
    grid-template-columns: 1fr;
  }
  .knowledgeCommunityNav {
    position: static;
  }
}
@media (max-width: 560px) {
  .knowledgeThreadComposer {
    grid-template-columns: 1fr;
  }
  .knowledgeReplyForm {
    padding-left: 0;
  }
  .supportAdminChatHead {
    display: grid;
  }
  .compactStats {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .topbar {
    min-height: 0;
  }
  .designPreviewGrid {
    grid-template-columns: 1fr;
  }
}

body.pdf-focus { overflow: hidden; }
body.pdf-focus .pdfEditorPanel { position: fixed; inset: 10px; z-index: 50; overflow: auto; background: #eef2f5; border: 1px solid #b8c5d2; box-shadow: 0 18px 60px rgba(18, 38, 50, .28); }
body.pdf-focus .vordruckWork { grid-template-columns: minmax(0, 1fr) minmax(380px, 430px); }
body.pdf-focus .pdfPages { max-height: calc(100vh - 208px); }
body.pdf-focus .sideFillPanel { max-height: calc(100vh - 208px); }

/* Phase 14: final chat visibility, consent reservation workflow and launcher lift */
.aiChatLauncher {
  position: relative;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.78);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bw-teal) 88%, #ffffff 8%), var(--bw-coral, #ff4b63));
  box-shadow:
    0 24px 58px rgba(10, 24, 32, .38),
    0 8px 18px color-mix(in srgb, var(--bw-teal) 36%, transparent),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.aiChatLauncher::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--bw-teal) 32%, transparent), transparent 68%);
  filter: blur(8px);
  z-index: -1;
}
.aiChatLauncher img,
.aiChatLauncher span,
.aiChatLauncher b {
  position: relative;
  z-index: 1;
}
html[data-theme="dark"] .aiChatLauncher,
html[data-theme="office"] .aiChatLauncher {
  border-color: rgba(255,255,255,.62);
  box-shadow:
    0 28px 70px rgba(0,0,0,.62),
    0 0 0 8px rgba(255,255,255,.04),
    0 10px 24px color-mix(in srgb, var(--bw-teal) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,.32);
}
.consentReservationBox,
.journalConsentAlert {
  border: 1px solid var(--bw-soft-line, #dbe3ea);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bw-accent-soft, #e8f3f1) 72%, #fff), #fff);
  padding: 14px;
  display: grid;
  gap: 12px;
}
.consentReservationHead,
.journalConsentAlert {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.consentReservationHead h3 {
  margin: 0 0 4px;
}
.toggleLine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-weight: 900;
}
.journalConsentAlert {
  margin-top: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bw-teal) 12%, #fff), #fff);
}
.journalConsentAlert span {
  display: block;
  color: #667582;
  font-weight: 750;
  margin-top: 3px;
}
.riskHigh {
  background: #fff0d6;
  color: #8a5100;
}
.consentReviewItem strong {
  overflow-wrap: anywhere;
}
html[data-theme="dark"] .consentReservationBox,
html[data-theme="dark"] .journalConsentAlert,
html[data-theme="office"] .consentReservationBox,
html[data-theme="office"] .journalConsentAlert {
  background: color-mix(in srgb, var(--bw-teal) 10%, var(--bw-surface, #20282d));
  border-color: var(--bw-line);
  color: var(--bw-ink);
}
html[data-theme="dark"] .journalConsentAlert span,
html[data-theme="office"] .journalConsentAlert span {
  color: var(--bw-muted);
}
html[data-theme="dark"] .aiChatPanel,
html[data-theme="dark"] .aiChatPanel strong,
html[data-theme="dark"] .aiChatPanel h3,
html[data-theme="dark"] .aiChatPanel h4,
html[data-theme="dark"] .aiChatPanel p,
html[data-theme="dark"] .aiChatPanel li,
html[data-theme="dark"] .aiChatPanel summary,
html[data-theme="dark"] .aiAnswerText p,
html[data-theme="dark"] .aiAnswerText li,
html[data-theme="dark"] .aiAnswerText h4 {
  color: var(--bw-chat-text, var(--bw-ink));
}
html[data-theme="dark"] .aiBubbleUser,
html[data-theme="office"] .aiBubbleUser {
  color: #fff;
}
html[data-theme="dark"] .aiComposerBox textarea,
html[data-theme="office"] .aiComposerBox textarea {
  color: var(--bw-chat-text, var(--bw-ink));
  caret-color: var(--bw-teal);
}
html[data-theme="dark"] .aiComposerBox textarea::placeholder,
html[data-theme="office"] .aiComposerBox textarea::placeholder {
  color: var(--bw-chat-muted, #9fb0b7);
}

/* Phase 14.1: launcher lift must stay visible on dark and grey surfaces */
.aiChatWidget .aiChatLauncher {
  width: 76px;
  height: 76px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 7px 9px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.72), transparent 24%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-teal) 84%, #ffffff 8%) 0%, var(--bw-coral, #ff4b63) 100%);
  box-shadow:
    0 30px 76px rgba(4, 14, 20, .48),
    0 14px 30px color-mix(in srgb, var(--bw-teal) 40%, transparent),
    0 0 0 8px rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.68),
    inset 0 -12px 22px rgba(0,0,0,.18);
  transform: translateY(-3px);
}
.aiChatWidget .aiChatLauncher::before {
  inset: -14px;
  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.32), transparent 58%),
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--bw-teal) 34%, transparent), transparent 72%);
  filter: blur(10px);
}
.aiChatWidget .aiChatLauncher::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -12px;
  height: 18px;
  border-radius: 999px;
  background: rgba(0,0,0,.42);
  filter: blur(12px);
  z-index: -2;
}
.aiChatWidget .aiChatLauncher img {
  width: 49px;
  height: 30px;
  padding: 3px 4px;
  border-radius: 7px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 20px rgba(0,0,0,.22);
}
.aiChatWidget .aiChatLauncher span {
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.42);
}
.aiChatWidget .aiChatLauncher:hover,
.aiChatWidget .aiChatLauncher:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 36px 86px rgba(4, 14, 20, .54),
    0 16px 34px color-mix(in srgb, var(--bw-teal) 46%, transparent),
    0 0 0 9px rgba(255,255,255,.2),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -12px 22px rgba(0,0,0,.18);
}
html[data-theme="dark"] .aiChatWidget .aiChatLauncher,
html[data-theme="office"] .aiChatWidget .aiChatLauncher {
  border-color: rgba(244,248,250,.9);
  box-shadow:
    0 34px 90px rgba(0,0,0,.76),
    0 16px 38px color-mix(in srgb, var(--bw-teal) 42%, transparent),
    0 0 0 9px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -14px 24px rgba(0,0,0,.32);
}

/* Phase 17: chat sessions, law search and HD launcher polish */
.aiMessageList {
  gap: 10px;
  padding: 12px 16px;
}
.aiMessageRow {
  border: 1px solid rgba(203, 214, 223, .74);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 34px rgba(17,31,43,.08);
}
.aiMessageOpen {
  min-height: 70px;
  padding: 12px 14px;
}
.aiBubblePair + .aiBubblePair {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--bw-line, #d7e0e8) 72%, transparent);
}
.aiChatWidget .aiChatLauncher {
  isolation: isolate;
  backdrop-filter: blur(8px) saturate(1.15);
  box-shadow:
    0 34px 90px rgba(4, 14, 20, .54),
    0 18px 42px color-mix(in srgb, var(--bw-teal) 44%, transparent),
    0 0 0 10px rgba(255,255,255,.16),
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -14px 26px rgba(0,0,0,.22);
}
html[data-theme="dark"] .aiChatWidget .aiChatLauncher,
html[data-theme="office"] .aiChatWidget .aiChatLauncher {
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.82), transparent 23%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-teal) 78%, #ffffff 4%) 0%, var(--bw-coral, #ff4b63) 100%);
  box-shadow:
    0 42px 112px rgba(0,0,0,.84),
    0 20px 52px color-mix(in srgb, var(--bw-teal) 48%, transparent),
    0 0 0 10px rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.68),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -16px 28px rgba(0,0,0,.36);
}
html[data-theme="dark"] .aiChatPanel,
html[data-theme="office"] .aiChatPanel,
html[data-theme="dark"] .aiBubbleBot,
html[data-theme="office"] .aiBubbleBot {
  color: var(--bw-chat-text, #f7fbfc) !important;
}
html[data-theme="dark"] .aiBubbleBot *,
html[data-theme="office"] .aiBubbleBot *,
html[data-theme="dark"] .aiAnswerText *,
html[data-theme="office"] .aiAnswerText * {
  color: inherit;
}
html[data-theme="dark"] .aiBubbleMeta,
html[data-theme="office"] .aiBubbleMeta,
html[data-theme="dark"] .aiSourceBox summary,
html[data-theme="office"] .aiSourceBox summary {
  color: var(--bw-chat-muted, #c7d1d6) !important;
}
html[data-theme="dark"] .aiComposerBox,
html[data-theme="office"] .aiComposerBox {
  background: color-mix(in srgb, var(--bw-chat-surface, #1d3035) 86%, #000);
  border-color: var(--bw-chat-line, #4b5f66);
}
html[data-theme="dark"] .aiComposerBox textarea,
html[data-theme="office"] .aiComposerBox textarea {
  color: var(--bw-chat-text, #fff) !important;
  background: transparent;
}
.lawDeepResults {
  margin-top: 12px;
  border: 1px solid var(--bw-soft-line, #d7e0e8);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bw-accent-soft, #e8f3f1) 34%, #fff);
  padding: 12px;
  display: grid;
  gap: 10px;
}
.lawDeepResultList {
  display: grid;
  gap: 9px;
}
.lawDeepResult {
  display: grid;
  gap: 7px;
  border: 1px solid var(--bw-soft-line, #d7e0e8);
  border-radius: 8px;
  background: var(--bw-surface, #fff);
  padding: 12px;
}
.lawDeepResult div {
  display: grid;
  grid-template-columns: minmax(66px, auto) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.lawDeepResult b {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  border-radius: 999px;
  background: var(--bw-accent-soft, #e8f3f1);
  color: var(--bw-teal, #0f756e);
  padding: 4px 9px;
  font-weight: 950;
}
.lawDeepResult strong,
.lawDeepResult p {
  overflow-wrap: anywhere;
}
.lawDeepResult span {
  color: var(--bw-muted, #667582);
  font-weight: 850;
}
.lawDirectResults {
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--bw-teal, #0f756e) 42%, #d7e0e8);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bw-accent-soft, #e8f3f1) 74%, #fff), var(--bw-surface, #fff));
  padding: 14px;
  display: grid;
  gap: 12px;
  box-shadow: 0 18px 42px rgba(17,31,43,.08);
}
.lawDirectResultList {
  display: grid;
  gap: 12px;
}
.lawDirectResult {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--bw-teal, #0f756e) 34%, #d7e0e8);
  border-radius: 12px;
  background: var(--bw-surface, #fff);
  padding: 14px;
}
.lawDirectResult > div {
  display: grid;
  grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.lawDirectResult b {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  border-radius: 999px;
  background: var(--bw-accent, var(--bw-teal, #0f756e));
  color: #fff;
  padding: 6px 11px;
  font-weight: 950;
  white-space: nowrap;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bw-accent, #0f756e) 28%, transparent);
}
.lawDirectResult span {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.lawDirectResult strong {
  color: var(--bw-text, #111820);
  font-size: 16px;
  line-height: 1.35;
}
.lawDirectResult small {
  color: var(--bw-muted, #667582);
  font-weight: 850;
}
.lawDirectResult p {
  margin: 0;
  border-top: 1px solid var(--bw-soft-line, #d7e0e8);
  padding-top: 12px;
  color: var(--bw-text, #23313a);
  white-space: pre-wrap;
  line-height: 1.62;
}
.lawNormList {
  display: grid;
  gap: 8px;
}
.lawNormEntry > summary {
  display: grid;
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.lawNormEntry > summary b {
  color: var(--bw-teal, #0f756e);
}
html[data-theme="dark"] .lawDeepResults,
html[data-theme="office"] .lawDeepResults,
html[data-theme="dark"] .lawDeepResult,
html[data-theme="office"] .lawDeepResult,
html[data-theme="dark"] .lawDirectResults,
html[data-theme="office"] .lawDirectResults,
html[data-theme="dark"] .lawDirectResult,
html[data-theme="office"] .lawDirectResult {
  background: color-mix(in srgb, var(--bw-surface, #111d20) 86%, #000);
  border-color: var(--bw-line, #263b41);
  color: var(--bw-ink, #edf6f5);
}
html[data-theme="dark"] .lawDeepResult span,
html[data-theme="office"] .lawDeepResult span,
html[data-theme="dark"] .lawDirectResult small,
html[data-theme="office"] .lawDirectResult small {
  color: var(--bw-muted, #aeb9c0);
}
html[data-theme="dark"] .lawDirectResult strong,
html[data-theme="office"] .lawDirectResult strong,
html[data-theme="dark"] .lawDirectResult p,
html[data-theme="office"] .lawDirectResult p {
  color: var(--bw-ink, #edf6f5);
}

/* Phase 18: global surface polish */
body:not(.authMode) {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bw-bg, #eef4f7) 92%, #ffffff) 0%, var(--bw-bg, #eef4f7) 48%, color-mix(in srgb, var(--bw-accent-soft, #e8f3f1) 38%, #f7f9fb) 100%);
}
.app {
  gap: 0;
}
.sidebar {
  border-right: 1px solid color-mix(in srgb, var(--bw-line, #d7e0e8) 72%, transparent);
  box-shadow: 14px 0 44px rgba(17, 31, 43, .08);
}
.sidebar .logoCard,
.topbar,
.panel,
.card,
.detailPanel,
.modalSheet,
.lawBook,
.lawLibraryLaw,
.lawNormEntry {
  border-color: color-mix(in srgb, var(--bw-line, #d7e0e8) 82%, transparent);
  box-shadow: 0 18px 44px rgba(17, 31, 43, .075);
}
.panel,
.card,
.detailPanel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface, #fff) 96%, #ffffff), var(--bw-surface, #fff));
}
.topbar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface, #fff) 96%, #f8fbfc), var(--bw-surface, #fff));
}
.sidebar nav button,
.tabButton,
.adminTabs button {
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.sidebar nav button:hover,
.tabButton:hover,
.adminTabs button:hover {
  transform: translateY(-1px);
}
.sidebar nav button.active,
.tabButton.active,
.adminTabs button.active {
  box-shadow: inset 4px 0 0 var(--bw-coral, #ff4b63), 0 12px 28px rgba(17,31,43,.08);
}
input,
select,
textarea {
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--bw-accent, var(--bw-teal, #0f756e)) 64%, #9fb4c0);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-accent, var(--bw-teal, #0f756e)) 18%, transparent);
  outline: 0;
}
button.primary,
.primary,
button[type="submit"] {
  box-shadow: 0 14px 30px color-mix(in srgb, var(--bw-accent, var(--bw-teal, #0f756e)) 22%, transparent);
}
button.primary:hover,
.primary:hover,
button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--bw-accent, var(--bw-teal, #0f756e)) 28%, transparent);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .detailPanel,
html[data-theme="office"] .topbar,
html[data-theme="office"] .panel,
html[data-theme="office"] .card,
html[data-theme="office"] .detailPanel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface, #1f2a30) 94%, #ffffff 2%), var(--bw-surface, #1f2a30));
  border-color: var(--bw-line, #40515a);
  box-shadow: 0 22px 54px rgba(0,0,0,.22);
}
html[data-theme="dark"] .sidebar,
html[data-theme="office"] .sidebar {
  box-shadow: 18px 0 54px rgba(0,0,0,.28);
}

/* Phase 19: final black/grey premium pass and fast law search surfaces */
html[data-theme="dark"] {
  --bw-ink: #f6f8fb;
  --bw-text: #f6f8fb;
  --bw-muted: #aeb8c4;
  --bw-line: #2d3844;
  --bw-soft-line: #1c2630;
  --bw-bg: #05070a;
  --bw-surface: #0d1319;
  --bw-surface-2: #111922;
  --bw-panel: #0a1016;
  --bw-chat-panel: #0a1016;
  --bw-chat-header: #101821;
  --bw-chat-body: #070b10;
  --bw-chat-surface: #131d27;
  --bw-chat-surface-strong: #192532;
  --bw-chat-line: #344250;
  --bw-chat-text: #f7f9fc;
  --bw-chat-muted: #b6c0ca;
  --bw-chat-control: #192532;
  --bw-shadow: 0 26px 72px rgba(0, 0, 0, .54);
  --bw-shadow-soft: 0 16px 42px rgba(0, 0, 0, .34);
}

html[data-theme="office"] {
  --bw-ink: #f4f6f8;
  --bw-text: #f4f6f8;
  --bw-muted: #c2c9d1;
  --bw-line: #46505b;
  --bw-soft-line: #343d47;
  --bw-bg: #20252b;
  --bw-surface: #2b3138;
  --bw-surface-2: #333a43;
  --bw-panel: #252b31;
  --bw-chat-panel: #252b31;
  --bw-chat-header: #303741;
  --bw-chat-body: #23292f;
  --bw-chat-surface: #343c45;
  --bw-chat-surface-strong: #3c4650;
  --bw-chat-line: #5c6873;
  --bw-chat-text: #f8fafc;
  --bw-chat-muted: #c9d1d8;
  --bw-chat-control: #3a444e;
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 78% 100%, color-mix(in srgb, var(--bw-accent) 16%, transparent) 0, transparent 28%),
    linear-gradient(180deg, #080b0f 0%, #05070a 44%, #030507 100%) !important;
  color: var(--bw-ink);
}

html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 78% 100%, color-mix(in srgb, var(--bw-accent) 11%, transparent) 0, transparent 30%),
    linear-gradient(180deg, #303640 0%, #242a31 45%, #1d2228 100%) !important;
  color: var(--bw-ink);
}

html[data-theme="dark"] .app,
html[data-theme="office"] .app {
  background: none !important;
}

html[data-theme="dark"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 220px),
    linear-gradient(180deg, #05080b 0%, #070b10 58%, #030507 100%) !important;
  border-right-color: #171f28;
}

html[data-theme="office"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 220px),
    linear-gradient(180deg, #20252b 0%, #242b32 58%, #1a1f25 100%) !important;
  border-right-color: #343d47;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .detailPanel,
html[data-theme="dark"] .modalSheet,
html[data-theme="dark"] .userMenu,
html[data-theme="dark"] .controlHero,
html[data-theme="dark"] .controlStat,
html[data-theme="dark"] .controlFold,
html[data-theme="dark"] .controlChoiceCard,
html[data-theme="dark"] .courtSearchPanel,
html[data-theme="dark"] .courtFormPanel,
html[data-theme="dark"] .courtListPanel,
html[data-theme="dark"] .designSettingsPanel,
html[data-theme="dark"] .compensationOverviewPanel,
html[data-theme="dark"] .compensationListPanel,
html[data-theme="dark"] .compensationFormPanel,
html[data-theme="dark"] .compensationPackagesPanel,
html[data-theme="dark"] .compensationToolsPanel,
html[data-theme="dark"] .compensationBatchPanel,
html[data-theme="dark"] .wealthListPanel,
html[data-theme="dark"] .wealthFormPanel,
html[data-theme="dark"] .journalListPanel,
html[data-theme="dark"] .journalFormPanel,
html[data-theme="office"] .topbar,
html[data-theme="office"] .panel,
html[data-theme="office"] .card,
html[data-theme="office"] .detailPanel,
html[data-theme="office"] .modalSheet,
html[data-theme="office"] .userMenu,
html[data-theme="office"] .controlHero,
html[data-theme="office"] .controlStat,
html[data-theme="office"] .controlFold,
html[data-theme="office"] .controlChoiceCard,
html[data-theme="office"] .courtSearchPanel,
html[data-theme="office"] .courtFormPanel,
html[data-theme="office"] .courtListPanel,
html[data-theme="office"] .designSettingsPanel,
html[data-theme="office"] .compensationOverviewPanel,
html[data-theme="office"] .compensationListPanel,
html[data-theme="office"] .compensationFormPanel,
html[data-theme="office"] .compensationPackagesPanel,
html[data-theme="office"] .compensationToolsPanel,
html[data-theme="office"] .compensationBatchPanel,
html[data-theme="office"] .wealthListPanel,
html[data-theme="office"] .wealthFormPanel,
html[data-theme="office"] .journalListPanel,
html[data-theme="office"] .journalFormPanel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface) 92%, #ffffff 3%), var(--bw-panel, var(--bw-surface))) !important;
  border-color: var(--bw-line) !important;
  color: var(--bw-ink) !important;
  box-shadow: var(--bw-shadow-soft) !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="office"] .topbar {
  min-height: 116px;
}

html[data-theme="dark"] .topbar::before,
html[data-theme="office"] .topbar::before,
html[data-theme="dark"] .metricCard::before,
html[data-theme="office"] .metricCard::before {
  background: linear-gradient(90deg, var(--bw-accent), color-mix(in srgb, var(--bw-accent) 52%, var(--bw-coral)), var(--bw-amber)) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] .userMenu span,
html[data-theme="office"] h1,
html[data-theme="office"] h2,
html[data-theme="office"] h3,
html[data-theme="office"] h4,
html[data-theme="office"] strong,
html[data-theme="office"] .userMenu span {
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .muted,
html[data-theme="dark"] .topbar p,
html[data-theme="dark"] .userMenu small,
html[data-theme="dark"] label,
html[data-theme="dark"] small,
html[data-theme="dark"] .itemMain span,
html[data-theme="office"] .muted,
html[data-theme="office"] .topbar p,
html[data-theme="office"] .userMenu small,
html[data-theme="office"] label,
html[data-theme="office"] small,
html[data-theme="office"] .itemMain span {
  color: var(--bw-muted) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .item,
html[data-theme="dark"] .detailGrid div,
html[data-theme="dark"] .workflowStep,
html[data-theme="dark"] .catalogGroup,
html[data-theme="dark"] .catalogRow,
html[data-theme="dark"] .formCard,
html[data-theme="dark"] .compensationStat,
html[data-theme="dark"] .journalStat,
html[data-theme="dark"] .calendarCell,
html[data-theme="dark"] .calendarToolbar,
html[data-theme="dark"] .calendarWeek,
html[data-theme="dark"] .wealthTableWrap,
html[data-theme="dark"] .wealthTable th,
html[data-theme="dark"] .wealthTable td,
html[data-theme="dark"] .fileAreaNav button,
html[data-theme="dark"] .fileAreaContent,
html[data-theme="dark"] .scopeRow,
html[data-theme="dark"] .authorityInlineItem,
html[data-theme="dark"] .supportMailRow,
html[data-theme="dark"] .supportMailBody,
html[data-theme="dark"] .controlMailTableRow,
html[data-theme="dark"] .officialFormsTableRow,
html[data-theme="dark"] .mirrorStatusGrid div,
html[data-theme="office"] input,
html[data-theme="office"] textarea,
html[data-theme="office"] select,
html[data-theme="office"] .item,
html[data-theme="office"] .detailGrid div,
html[data-theme="office"] .workflowStep,
html[data-theme="office"] .catalogGroup,
html[data-theme="office"] .catalogRow,
html[data-theme="office"] .formCard,
html[data-theme="office"] .compensationStat,
html[data-theme="office"] .journalStat,
html[data-theme="office"] .calendarCell,
html[data-theme="office"] .calendarToolbar,
html[data-theme="office"] .calendarWeek,
html[data-theme="office"] .wealthTableWrap,
html[data-theme="office"] .wealthTable th,
html[data-theme="office"] .wealthTable td,
html[data-theme="office"] .fileAreaNav button,
html[data-theme="office"] .fileAreaContent,
html[data-theme="office"] .scopeRow,
html[data-theme="office"] .authorityInlineItem,
html[data-theme="office"] .supportMailRow,
html[data-theme="office"] .supportMailBody,
html[data-theme="office"] .controlMailTableRow,
html[data-theme="office"] .officialFormsTableRow,
html[data-theme="office"] .mirrorStatusGrid div {
  background: var(--bw-surface-2, var(--bw-surface)) !important;
  border-color: var(--bw-line) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .calendarCell.muted,
html[data-theme="office"] .calendarCell.muted {
  background: color-mix(in srgb, var(--bw-panel) 76%, #000) !important;
  opacity: .64;
}

html[data-theme="dark"] .calendarCell.todayCell,
html[data-theme="dark"] .calendarCell:hover,
html[data-theme="office"] .calendarCell.todayCell,
html[data-theme="office"] .calendarCell:hover {
  border-color: color-mix(in srgb, var(--bw-accent) 74%, var(--bw-line)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bw-accent) 42%, transparent), 0 16px 34px rgba(0,0,0,.22);
}

html[data-theme="dark"] .metricCard,
html[data-theme="office"] .metricCard {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2) 92%, #ffffff 3%), var(--bw-panel)) !important;
  border-color: var(--bw-line) !important;
}

html[data-theme="dark"] .metric,
html[data-theme="dark"] .moneyCell,
html[data-theme="dark"] .lawBook > summary b,
html[data-theme="dark"] .lawNormEntry > summary b,
html[data-theme="office"] .metric,
html[data-theme="office"] .moneyCell,
html[data-theme="office"] .lawBook > summary b,
html[data-theme="office"] .lawNormEntry > summary b {
  color: var(--bw-accent) !important;
}

html[data-theme="dark"] button,
html[data-theme="dark"] .buttonLink,
html[data-theme="office"] button,
html[data-theme="office"] .buttonLink {
  background: color-mix(in srgb, var(--bw-surface-2) 90%, #000) !important;
  border-color: var(--bw-line) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] button:hover,
html[data-theme="dark"] .buttonLink:hover,
html[data-theme="office"] button:hover,
html[data-theme="office"] .buttonLink:hover {
  border-color: color-mix(in srgb, var(--bw-accent) 72%, var(--bw-line)) !important;
  background: color-mix(in srgb, var(--bw-accent) 13%, var(--bw-surface-2)) !important;
}

html[data-theme="dark"] button.primary,
html[data-theme="dark"] .primary,
html[data-theme="dark"] button[type="submit"],
html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="dark"] .tabButton.active,
html[data-theme="dark"] .adminTabs button.active,
html[data-theme="dark"] .wealthTabs button.active,
html[data-theme="dark"] .journalTabs button.active,
html[data-theme="office"] button.primary,
html[data-theme="office"] .primary,
html[data-theme="office"] button[type="submit"],
html[data-theme="office"] .sidebar nav button.active,
html[data-theme="office"] .tabButton.active,
html[data-theme="office"] .adminTabs button.active,
html[data-theme="office"] .wealthTabs button.active,
html[data-theme="office"] .journalTabs button.active {
  background:
    linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 78%, #ffffff 8%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--bw-accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="office"] .sidebar nav button.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bw-accent) 28%, transparent), rgba(255,255,255,.055)) !important;
  box-shadow: inset 4px 0 0 var(--bw-coral), 0 16px 36px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .wealthTable tbody tr:hover,
html[data-theme="office"] .wealthTable tbody tr:hover {
  background: color-mix(in srgb, var(--bw-accent) 10%, var(--bw-surface-2)) !important;
}

html[data-theme="dark"] .modalBackdrop,
html[data-theme="office"] .modalBackdrop {
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(5px);
}

html[data-theme="dark"] .aiChatPanel,
html[data-theme="office"] .aiChatPanel {
  background: var(--bw-chat-panel) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
  box-shadow: 0 34px 92px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .aiChatHeader,
html[data-theme="dark"] .aiMessagesHeader,
html[data-theme="dark"] .aiComposer,
html[data-theme="dark"] .aiChatTabs,
html[data-theme="office"] .aiChatHeader,
html[data-theme="office"] .aiMessagesHeader,
html[data-theme="office"] .aiComposer,
html[data-theme="office"] .aiChatTabs {
  background: var(--bw-chat-header) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatBody,
html[data-theme="dark"] .aiMessageList,
html[data-theme="dark"] .aiMessagesPanel,
html[data-theme="office"] .aiChatBody,
html[data-theme="office"] .aiMessageList,
html[data-theme="office"] .aiMessagesPanel {
  background: var(--bw-chat-body) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiWelcomeCard,
html[data-theme="dark"] .aiSupportCard,
html[data-theme="dark"] .aiNewsCard,
html[data-theme="dark"] .aiDecisionCard,
html[data-theme="dark"] .aiBotBubble,
html[data-theme="dark"] .aiBubbleBot,
html[data-theme="dark"] .aiEmptyMessages,
html[data-theme="dark"] .aiPrivacy,
html[data-theme="dark"] .aiMessageRow,
html[data-theme="dark"] .aiMessageOpen:hover,
html[data-theme="dark"] .aiMessageRow.active .aiMessageOpen,
html[data-theme="office"] .aiWelcomeCard,
html[data-theme="office"] .aiSupportCard,
html[data-theme="office"] .aiNewsCard,
html[data-theme="office"] .aiDecisionCard,
html[data-theme="office"] .aiBotBubble,
html[data-theme="office"] .aiBubbleBot,
html[data-theme="office"] .aiEmptyMessages,
html[data-theme="office"] .aiPrivacy,
html[data-theme="office"] .aiMessageRow,
html[data-theme="office"] .aiMessageOpen:hover,
html[data-theme="office"] .aiMessageRow.active .aiMessageOpen {
  background: var(--bw-chat-surface) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatTabs button.active,
html[data-theme="office"] .aiChatTabs button.active {
  color: #fff !important;
  background: color-mix(in srgb, var(--bw-accent) 22%, var(--bw-chat-surface-strong)) !important;
  box-shadow: inset 0 3px 0 var(--bw-accent) !important;
}

html[data-theme="dark"] .aiSendButton,
html[data-theme="dark"] .aiChatPanel .aiSendButton,
html[data-theme="office"] .aiSendButton,
html[data-theme="office"] .aiChatPanel .aiSendButton {
  background: linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  color: #fff !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatLauncher,
html[data-theme="office"] .aiChatWidget .aiChatLauncher {
  background:
    radial-gradient(circle at 33% 22%, rgba(255,255,255,.78), transparent 24%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent) 82%, #ffffff 5%) 0%, color-mix(in srgb, var(--bw-coral) 88%, var(--bw-accent)) 100%) !important;
  box-shadow:
    0 46px 120px rgba(0,0,0,.86),
    0 22px 58px color-mix(in srgb, var(--bw-accent) 48%, transparent),
    0 0 0 12px rgba(255,255,255,.11),
    0 0 0 1px rgba(255,255,255,.76),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -16px 30px rgba(0,0,0,.38) !important;
}

html[data-theme="dark"] .lawFastSearchPanel,
html[data-theme="office"] .lawFastSearchPanel {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bw-accent) 16%, var(--bw-surface-2)), var(--bw-panel));
  border-color: color-mix(in srgb, var(--bw-accent) 50%, var(--bw-line));
}

.lawFastSearchPanel {
  display: grid;
  gap: 5px;
  border: 1px solid var(--bw-soft-line);
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bw-accent-soft) 72%, #fff), #fff);
  padding: 14px;
}
.lawFastSearchPanel span {
  color: var(--bw-accent);
  font-weight: 950;
}
.lawFastSearchPanel p {
  color: var(--bw-muted);
  line-height: 1.45;
}
.lawLibraryFast {
  grid-template-columns: 1fr;
}

/* Phase 19b: force premium dark surfaces across every module */
html[data-theme="dark"] #content :where(section, article, fieldset, table, thead, tbody, tr, th, td, .panel, .card, .item, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .knowledgeThreadCard, .knowledgeCategoryCard, .threadCard, .supportMailRow, .supportMailBody, .calendarCell, .calendarToolbar, .calendarWeek, .fileAreaContent, .fileAreaNav, .scopeRow, .formCard, .workflowStep, .catalogGroup, .catalogRow),
html[data-theme="office"] #content :where(section, article, fieldset, table, thead, tbody, tr, th, td, .panel, .card, .item, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .knowledgeThreadCard, .knowledgeCategoryCard, .threadCard, .supportMailRow, .supportMailBody, .calendarCell, .calendarToolbar, .calendarWeek, .fileAreaContent, .fileAreaNav, .scopeRow, .formCard, .workflowStep, .catalogGroup, .catalogRow) {
  background-color: var(--bw-surface, #0d1319) !important;
  border-color: var(--bw-line, #2d3844) !important;
  color: var(--bw-ink, #f6f8fb) !important;
}

html[data-theme="dark"] #content :where(.metricCard, .statCard, .summaryCard, .miniStat, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat),
html[data-theme="office"] #content :where(.metricCard, .statCard, .summaryCard, .miniStat, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2) 96%, #fff 3%), var(--bw-panel)) !important;
  border: 1px solid var(--bw-line) !important;
  color: var(--bw-ink) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.32) !important;
}

html[data-theme="dark"] #content :where(p, span, small, label, li, td, th, summary, .muted),
html[data-theme="office"] #content :where(p, span, small, label, li, td, th, summary, .muted) {
  color: inherit;
}

html[data-theme="dark"] #content :where(.muted, small, .hint, .subtle),
html[data-theme="office"] #content :where(.muted, small, .hint, .subtle) {
  color: var(--bw-muted) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select),
html[data-theme="office"] #content :where(input, textarea, select) {
  background: color-mix(in srgb, var(--bw-panel) 82%, #000) !important;
  border: 1px solid var(--bw-line) !important;
  color: var(--bw-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select)::placeholder,
html[data-theme="office"] #content :where(input, textarea, select)::placeholder {
  color: color-mix(in srgb, var(--bw-muted) 82%, transparent) !important;
}

html[data-theme="dark"] .aiChatPanel :where(.aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiBotBubble, .aiBubbleBot, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerShell, textarea),
html[data-theme="office"] .aiChatPanel :where(.aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiBotBubble, .aiBubbleBot, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerShell, textarea) {
  background: var(--bw-chat-surface) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatPanel :where(p, span, small, strong, h3, h4, li, summary, textarea),
html[data-theme="office"] .aiChatPanel :where(p, span, small, strong, h3, h4, li, summary, textarea) {
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatPanel :where(.muted, .aiBubbleMeta, .aiChatHeader span),
html[data-theme="office"] .aiChatPanel :where(.muted, .aiBubbleMeta, .aiChatHeader span) {
  color: var(--bw-chat-muted) !important;
}

html[data-theme="dark"] .aiUserBubble,
html[data-theme="office"] .aiUserBubble {
  background: linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--bw-accent) 34%, transparent) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatLauncher,
html[data-theme="office"] .aiChatWidget .aiChatLauncher,
.aiChatWidget .aiChatLauncher {
  box-shadow:
    0 34px 92px rgba(0,0,0,.46),
    0 18px 54px color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, transparent),
    0 0 0 10px color-mix(in srgb, var(--bw-accent, #1f6feb) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -18px 34px rgba(0,0,0,.32) !important;
}

html[data-theme="dark"] .sidebar nav button,
html[data-theme="office"] .sidebar nav button {
  background: color-mix(in srgb, var(--bw-surface-2) 92%, #000) !important;
  border: 1px solid color-mix(in srgb, var(--bw-line) 54%, transparent) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="office"] .sidebar nav button.active {
  color: #fff !important;
  border-color: color-mix(in srgb, var(--bw-accent) 72%, var(--bw-line)) !important;
  box-shadow:
    inset 4px 0 0 var(--bw-accent),
    0 16px 38px color-mix(in srgb, var(--bw-accent) 22%, transparent) !important;
}

/* Phase 23: stable, roomier live chat surface */
.aiChatWidget .aiChatPanel {
  width: min(500px, calc(100vw - 30px)) !important;
  height: min(790px, calc(100vh - 30px)) !important;
  border-radius: 24px !important;
  box-shadow:
    0 34px 92px rgba(15, 25, 34, .30),
    0 14px 42px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent) !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(720px, calc(100vw - 30px)) !important;
  height: min(880px, calc(100vh - 30px)) !important;
}

.aiChatWidget .aiChatBody {
  min-height: 0 !important;
}

.aiChatWidget .aiConversation {
  padding-bottom: 16px !important;
}

.aiChatWidget .aiComposer textarea {
  min-height: 128px !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  box-shadow:
    0 36px 96px rgba(0,0,0,.62),
    0 16px 52px color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, transparent),
    0 0 0 1px rgba(255,255,255,.07) !important;
}

/* Phase 24: high-contrast readability pass for dark and grey themes */
html[data-theme="dark"] {
  --bw-ink: #ffffff;
  --bw-muted: #d4dee7;
  --bw-line: #536575;
  --bw-soft-line: #435461;
  --bw-surface: #121b24;
  --bw-surface-2: #18242f;
  --bw-panel: #0d141c;
  --bw-chat-panel: #0f1720;
  --bw-chat-header: #151f2a;
  --bw-chat-body: #0c1219;
  --bw-chat-surface: #1a2632;
  --bw-chat-surface-strong: #223141;
  --bw-chat-line: #5b6b7b;
  --bw-chat-text: #ffffff;
  --bw-chat-muted: #d8e1ea;
  --bw-chat-control: #223141;
}

html[data-theme="office"] {
  --bw-ink: #ffffff;
  --bw-muted: #e0e6ec;
  --bw-line: #687684;
  --bw-soft-line: #596774;
  --bw-surface: #333a42;
  --bw-surface-2: #3c454f;
  --bw-panel: #293039;
  --bw-chat-panel: #303842;
  --bw-chat-header: #3b4651;
  --bw-chat-body: #2b333c;
  --bw-chat-surface: #424c57;
  --bw-chat-surface-strong: #4b5662;
  --bw-chat-line: #73808d;
  --bw-chat-text: #ffffff;
  --bw-chat-muted: #e3e9ef;
  --bw-chat-control: #4b5662;
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody),
html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content,
html[data-theme="office"] #content {
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content :where(h1, h2, h3, h4, h5, strong, b, label, th),
html[data-theme="office"] #content :where(h1, h2, h3, h4, h5, strong, b, label, th),
html[data-theme="dark"] .aiChatPanel :where(h1, h2, h3, h4, strong, b, label),
html[data-theme="office"] .aiChatPanel :where(h1, h2, h3, h4, strong, b, label) {
  color: #ffffff !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #content :where(p, span, li, td, summary, div),
html[data-theme="office"] #content :where(p, span, li, td, summary, div) {
  color: inherit;
}

html[data-theme="dark"] #content :where(.muted, small, .hint, .subtle, .topbar p, .itemMain span, .personFilterStatus),
html[data-theme="office"] #content :where(.muted, small, .hint, .subtle, .topbar p, .itemMain span, .personFilterStatus) {
  color: var(--bw-muted) !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .item, .metricCard, .statCard, .summaryCard, .miniStat, .calendarCell, .formCard, .scopeRow, .catalogRow, .catalogGroup, .workflowStep, .fileAreaContent, .fileAreaNav, .lawBook, .lawLibraryLaw, .lawNormEntry, .knowledgeThreadCard, .knowledgeCategoryCard),
html[data-theme="office"] #content :where(.panel, .card, .item, .metricCard, .statCard, .summaryCard, .miniStat, .calendarCell, .formCard, .scopeRow, .catalogRow, .catalogGroup, .workflowStep, .fileAreaContent, .fileAreaNav, .lawBook, .lawLibraryLaw, .lawNormEntry, .knowledgeThreadCard, .knowledgeCategoryCard) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2) 92%, #ffffff 4%), var(--bw-panel)) !important;
  border-color: var(--bw-line) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select),
html[data-theme="office"] #content :where(input, textarea, select),
html[data-theme="dark"] .aiChatPanel :where(input, textarea, select),
html[data-theme="office"] .aiChatPanel :where(input, textarea, select) {
  background: color-mix(in srgb, var(--bw-panel) 78%, #000 22%) !important;
  border: 1px solid var(--bw-line) !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

html[data-theme="dark"] #content :where(input, textarea, select)::placeholder,
html[data-theme="office"] #content :where(input, textarea, select)::placeholder,
html[data-theme="dark"] .aiChatPanel :where(input, textarea, select)::placeholder,
html[data-theme="office"] .aiChatPanel :where(input, textarea, select)::placeholder {
  color: color-mix(in srgb, var(--bw-muted) 88%, transparent) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .aiChatPanel,
html[data-theme="office"] .aiChatPanel {
  background: var(--bw-chat-panel) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatPanel :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs),
html[data-theme="office"] .aiChatPanel :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs) {
  background: var(--bw-chat-header) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatPanel :where(.aiChatBody, .aiMessageList, .aiMessagesPanel, .aiHelpPanel),
html[data-theme="office"] .aiChatPanel :where(.aiChatBody, .aiMessageList, .aiMessagesPanel, .aiHelpPanel) {
  background: var(--bw-chat-body) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatPanel :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiComposerShell, .aiHelpList article, .aiNewsList article, .aiSourceBox),
html[data-theme="office"] .aiChatPanel :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiComposerShell, .aiHelpList article, .aiNewsList article, .aiSourceBox) {
  background: var(--bw-chat-surface) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatPanel .aiBubbleBot.thinking,
html[data-theme="office"] .aiChatPanel .aiBubbleBot.thinking {
  background: color-mix(in srgb, var(--bw-accent, #1f73ff) 18%, var(--bw-chat-surface)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f73ff) 38%, var(--bw-chat-line)) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatPanel :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article) :where(p, span, small, strong, b, h3, h4, li, summary),
html[data-theme="office"] .aiChatPanel :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article) :where(p, span, small, strong, b, h3, h4, li, summary) {
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatPanel :where(.muted, small, .aiBubbleMeta, .aiMessageText small, .aiMessageAge, .aiChatHeader span),
html[data-theme="office"] .aiChatPanel :where(.muted, small, .aiBubbleMeta, .aiMessageText small, .aiMessageAge, .aiChatHeader span) {
  color: var(--bw-chat-muted) !important;
}

html[data-theme="dark"] .aiChatPanel :where(button:not(.aiSendButton), .aiChatTabs button),
html[data-theme="office"] .aiChatPanel :where(button:not(.aiSendButton), .aiChatTabs button) {
  background: var(--bw-chat-control) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatPanel :where(button:disabled, .aiChatTabs button:disabled),
html[data-theme="office"] .aiChatPanel :where(button:disabled, .aiChatTabs button:disabled) {
  color: color-mix(in srgb, var(--bw-chat-muted) 75%, transparent) !important;
  opacity: .72 !important;
}

html[data-theme="dark"] #content :where(button:disabled, input:disabled, textarea:disabled, select:disabled),
html[data-theme="office"] #content :where(button:disabled, input:disabled, textarea:disabled, select:disabled) {
  opacity: .72 !important;
}

@media (max-width: 680px) {
  .aiChatWidget .aiChatPanel,
  .aiChatWidget.expanded .aiChatPanel {
    width: calc(100vw - 18px) !important;
    height: calc(100vh - 18px) !important;
    border-radius: 18px !important;
  }
}

/* Phase 40: final chat polish, session readability and premium launcher */
.aiChatWidget .aiChatLauncher {
  width: 82px !important;
  height: 82px !important;
  border-radius: 28px !important;
  border: 1px solid color-mix(in srgb, #fff 72%, var(--bw-accent, #1f6feb)) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.92), rgba(255,255,255,.18) 34%, transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 62%, #ffffff), color-mix(in srgb, var(--bw-accent-dark, #154fbd) 74%, #111827)) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.48),
    0 18px 54px color-mix(in srgb, var(--bw-accent, #1f6feb) 42%, transparent),
    0 0 0 10px color-mix(in srgb, var(--bw-accent, #1f6feb) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -22px 34px rgba(0,0,0,.28) !important;
  transform: translateZ(0);
}

.aiChatWidget .aiChatLauncher img {
  width: 56px !important;
  height: 32px !important;
  padding: 5px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.24)) !important;
}

.aiChatWidget .aiChatLauncher span {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.38) !important;
}

.aiChatWidget .aiChatPanel {
  width: min(560px, calc(100vw - 28px)) !important;
  height: min(820px, calc(100vh - 28px)) !important;
  border-radius: 24px !important;
  border: 1px solid color-mix(in srgb, var(--bw-line, #cbd5df) 72%, transparent) !important;
  box-shadow:
    0 36px 92px rgba(15, 25, 34, .34),
    0 18px 54px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent) !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(820px, calc(100vw - 28px)) !important;
  height: min(900px, calc(100vh - 28px)) !important;
}

.aiChatWidget .aiChatBody {
  scrollbar-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 62%, #7b8794) transparent;
}

.aiChatWidget .aiBubbleBot {
  max-width: 88% !important;
  padding: 16px 18px !important;
  border-radius: 18px !important;
  line-height: 1.52 !important;
}

.aiChatWidget .aiBubbleUser {
  max-width: 82% !important;
  background: linear-gradient(135deg, var(--bw-accent, #1f6feb), color-mix(in srgb, var(--bw-accent, #1f6feb) 72%, #76a7ff)) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--bw-accent, #1f6feb) 30%, transparent) !important;
}

.aiChatWidget .aiAnswerText {
  gap: 10px !important;
}

.aiChatWidget .aiAnswerText h4 {
  margin: 10px 0 0 !important;
  font-size: 14px !important;
}

.aiChatWidget .aiAnswerText p,
.aiChatWidget .aiAnswerText li {
  font-size: 15px !important;
  line-height: 1.52 !important;
}

.aiChatWidget .aiBubbleMeta {
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent) !important;
}

.aiChatWidget .aiComposerBox {
  border-radius: 18px !important;
  border-color: color-mix(in srgb, var(--bw-line, #cbd5df) 82%, var(--bw-accent, #1f6feb)) !important;
  box-shadow:
    0 10px 28px rgba(15,25,34,.08),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

.aiChatWidget .aiComposer textarea {
  min-height: 138px !important;
  font-size: 15px !important;
}

.aiChatWidget .aiSendButton,
.aiComposer:focus-within .aiSendButton {
  background: linear-gradient(135deg, var(--bw-accent, #1f6feb), color-mix(in srgb, var(--bw-accent, #1f6feb) 72%, #5ea2ff)) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, transparent) !important;
}

.aiChatWidget .aiChatTabs button.active {
  color: var(--bw-accent, #1f6feb) !important;
  box-shadow: inset 0 3px 0 var(--bw-accent, #1f6feb) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  box-shadow:
    0 42px 110px rgba(0,0,0,.72),
    0 18px 62px color-mix(in srgb, var(--bw-accent, #1f6feb) 26%, transparent),
    0 0 0 1px rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .aiChatWidget .aiAnswerText :where(p, li, h4, strong, b),
html[data-theme="office"] .aiChatWidget .aiAnswerText :where(p, li, h4, strong, b),
html[data-theme="dark"] .aiChatWidget .aiBubbleBot,
html[data-theme="office"] .aiChatWidget .aiBubbleBot {
  color: #fff !important;
}

html[data-theme="dark"] .aiChatWidget .aiBubbleMeta,
html[data-theme="office"] .aiChatWidget .aiBubbleMeta {
  color: var(--bw-chat-muted, #d8e1ea) !important;
}

html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background: #303842 !important;
}

html[data-theme="office"] .aiChatWidget .aiChatBody {
  background: #2b333c !important;
}

@media (max-width: 680px) {
  .aiChatWidget .aiChatPanel,
  .aiChatWidget.expanded .aiChatPanel {
    width: calc(100vw - 14px) !important;
    height: calc(100vh - 14px) !important;
  }
  .aiChatWidget .aiChatLauncher {
    width: 70px !important;
    height: 70px !important;
    border-radius: 24px !important;
  }
}

/* Phase 43: neutral dark/grau theme pass and stronger premium surfaces */
html[data-theme="dark"] {
  --bw-bg: #070b0f;
  --bw-surface: #111820;
  --bw-line: #26313c;
  --bw-soft-line: #1d2730;
  --bw-ink: #f5f8fb;
  --bw-muted: #aab7c3;
  --bw-chat-panel: #101722;
  --bw-chat-header: #141d29;
  --bw-chat-body: #090f16;
  --bw-chat-surface: #172230;
  --bw-chat-surface-strong: #202d3c;
  --bw-chat-line: #334253;
  --bw-chat-control: #202b38;
}

html[data-theme="office"] {
  --bw-bg: #272c32;
  --bw-surface: #333941;
  --bw-line: #4d5964;
  --bw-soft-line: #3f4953;
  --bw-ink: #f7fafc;
  --bw-muted: #c4ced7;
  --bw-chat-panel: #323942;
  --bw-chat-header: #38414b;
  --bw-chat-body: #2a3139;
  --bw-chat-surface: #3d4650;
  --bw-chat-surface-strong: #46505b;
  --bw-chat-line: #64717d;
  --bw-chat-control: #46505b;
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--bw-accent) 14%, transparent) 0, transparent 28%),
    linear-gradient(180deg, #0b1118 0%, #070b0f 100%) !important;
}

html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--bw-accent) 12%, transparent) 0, transparent 30%),
    linear-gradient(180deg, #343a42 0%, #252a30 100%) !important;
}

html[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #080d12 0%, #0d141b 58%, #070b0f 100%) !important;
  border-right-color: #1e2934 !important;
}

html[data-theme="office"] .sidebar {
  background: linear-gradient(180deg, #222830 0%, #2b323a 58%, #20262d 100%) !important;
  border-right-color: #3e4852 !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modalSheet,
html[data-theme="dark"] .userMenu,
html[data-theme="dark"] .designSettingsPanel,
html[data-theme="office"] .topbar,
html[data-theme="office"] .panel,
html[data-theme="office"] .card,
html[data-theme="office"] .modalSheet,
html[data-theme="office"] .userMenu,
html[data-theme="office"] .designSettingsPanel {
  background:
    linear-gradient(90deg, var(--bw-accent), color-mix(in srgb, var(--bw-accent) 30%, #f0b429)) top left / 100% 3px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface) 92%, #fff 3%), var(--bw-surface)) !important;
  border-color: var(--bw-line) !important;
  color: var(--bw-ink) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] :where(.metricCard, .stats span, .compactStats span, .journalStat, .compensationStat, .calendarCell, .wealthTableWrap, .lawAnswerBox, .lawDirectResults, .lawDeepResults, .lawLibraryLaw, .lawBook, .item, .catalogRow, .formCard),
html[data-theme="office"] :where(.metricCard, .stats span, .compactStats span, .journalStat, .compensationStat, .calendarCell, .wealthTableWrap, .lawAnswerBox, .lawDirectResults, .lawDeepResults, .lawLibraryLaw, .lawBook, .item, .catalogRow, .formCard) {
  background: color-mix(in srgb, var(--bw-surface) 88%, #000 6%) !important;
  border-color: var(--bw-line) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] :where(.metric, .stats strong, .compactStats strong, .journalStat strong, .compensationStat strong, .moneyCell, .calendarCell strong, .sourceCard small, .lawNormListHead span, .inlineBadge, .pill, .statusMark),
html[data-theme="office"] :where(.metric, .stats strong, .compactStats strong, .journalStat strong, .compensationStat strong, .moneyCell, .calendarCell strong, .sourceCard small, .lawNormListHead span, .inlineBadge, .pill, .statusMark) {
  color: var(--bw-accent) !important;
}

html[data-theme="dark"] :where(button.primary, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active strong, .statusButton.active),
html[data-theme="office"] :where(button.primary, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active strong, .statusButton.active) {
  background: linear-gradient(135deg, var(--bw-accent), color-mix(in srgb, var(--bw-accent) 72%, #ffffff)) !important;
  border-color: var(--bw-accent) !important;
  color: #fff !important;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--bw-accent) 28%, transparent) !important;
}

html[data-theme="dark"] .wealthTable th,
html[data-theme="dark"] .wealthTable td,
html[data-theme="office"] .wealthTable th,
html[data-theme="office"] .wealthTable td {
  background: transparent !important;
  border-bottom-color: var(--bw-soft-line) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .wealthTable th,
html[data-theme="office"] .wealthTable th {
  background: color-mix(in srgb, var(--bw-surface) 80%, #000 12%) !important;
}

.aiChatWidget .aiChatLauncher {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

.aiChatWidget .aiChatLauncher::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--bw-accent) 52%, transparent), transparent 66%);
  filter: blur(10px);
  opacity: .92;
  z-index: -1;
}

html[data-theme="dark"] .aiChatWidget .aiChatLauncher,
html[data-theme="office"] .aiChatWidget .aiChatLauncher {
  border-color: rgba(255,255,255,.34) !important;
  box-shadow:
    0 34px 95px rgba(0,0,0,.72),
    0 20px 62px color-mix(in srgb, var(--bw-accent) 42%, transparent),
    0 0 0 9px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -24px 34px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background: var(--bw-chat-panel) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatBody,
html[data-theme="office"] .aiChatWidget .aiChatBody {
  background: var(--bw-chat-body) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatHeader,
html[data-theme="dark"] .aiChatWidget .aiComposer,
html[data-theme="dark"] .aiChatWidget .aiChatTabs,
html[data-theme="dark"] .aiChatWidget .aiMessagesHeader,
html[data-theme="office"] .aiChatWidget .aiChatHeader,
html[data-theme="office"] .aiChatWidget .aiComposer,
html[data-theme="office"] .aiChatWidget .aiChatTabs,
html[data-theme="office"] .aiChatWidget .aiMessagesHeader {
  background: var(--bw-chat-header) !important;
  border-color: var(--bw-chat-line) !important;
}

/* Phase 44: final dark/grau consistency and premium contrast polish */
html[data-theme="dark"],
html[data-theme="office"] {
  color-scheme: dark;
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody),
html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--bw-accent) 12%, transparent) 0, transparent 26%),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-bg) 88%, #111827) 0%, var(--bw-bg) 100%) !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .metricCard, .item, .listCard, .calendarCell, .calendarToolbar, .calendarWeek, .wealthTableWrap, .fileAreaContent, .fileAreaNav, .lawAnswerBox, .lawDirectResults, .lawDeepResults, .lawBook, .lawLibraryLaw, .lawNormEntry, .sourceCard, .knowledgeThreadCard, .knowledgeCategoryCard, .threadCard, .formCard, .scopeRow, .workflowStep, .catalogGroup, .catalogRow),
html[data-theme="office"] #content :where(.panel, .card, .metricCard, .item, .listCard, .calendarCell, .calendarToolbar, .calendarWeek, .wealthTableWrap, .fileAreaContent, .fileAreaNav, .lawAnswerBox, .lawDirectResults, .lawDeepResults, .lawBook, .lawLibraryLaw, .lawNormEntry, .sourceCard, .knowledgeThreadCard, .knowledgeCategoryCard, .threadCard, .formCard, .scopeRow, .workflowStep, .catalogGroup, .catalogRow) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2, #18242f) 86%, #ffffff 3%), var(--bw-panel, #0d141c)) !important;
  border-color: color-mix(in srgb, var(--bw-line, #536575) 82%, #ffffff 4%) !important;
  color: var(--bw-ink, #fff) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select),
html[data-theme="office"] #content :where(input, textarea, select) {
  background: color-mix(in srgb, var(--bw-bg, #070b0f) 72%, #ffffff 2%) !important;
  border-color: color-mix(in srgb, var(--bw-line, #536575) 82%, var(--bw-accent, #74a7ff) 18%) !important;
  color: var(--bw-ink, #fff) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select):focus,
html[data-theme="office"] #content :where(input, textarea, select):focus {
  border-color: var(--bw-accent, #74a7ff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-accent, #74a7ff) 22%, transparent) !important;
}

html[data-theme="dark"] #content :where(button:not(.primary):not(.danger), .buttonLink, .navButton),
html[data-theme="office"] #content :where(button:not(.primary):not(.danger), .buttonLink, .navButton) {
  background: color-mix(in srgb, var(--bw-surface-2, #18242f) 88%, #000 6%) !important;
  border-color: color-mix(in srgb, var(--bw-line, #536575) 84%, transparent) !important;
  color: var(--bw-ink, #fff) !important;
}

html[data-theme="dark"] #content :where(button.primary, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .knowledgeCategoryCard.active),
html[data-theme="office"] #content :where(button.primary, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .knowledgeCategoryCard.active) {
  background: linear-gradient(135deg, var(--bw-accent-dark, #2f75d6), var(--bw-accent, #74a7ff)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #74a7ff) 88%, #ffffff 8%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 38px color-mix(in srgb, var(--bw-accent, #74a7ff) 32%, transparent) !important;
}

html[data-theme="dark"] #content :where(.metric, .moneyCell, .calendarCell strong, .knowledgeCatIcon, .knowledgeCatCount, .knowledgePill, .lawBook > summary b, .lawLibraryLaw > summary em.ready, .lawNormListHead span, .inlineBadge, .pill),
html[data-theme="office"] #content :where(.metric, .moneyCell, .calendarCell strong, .knowledgeCatIcon, .knowledgeCatCount, .knowledgePill, .lawBook > summary b, .lawLibraryLaw > summary em.ready, .lawNormListHead span, .inlineBadge, .pill) {
  color: var(--bw-accent, #74a7ff) !important;
}

html[data-theme="dark"] #content :where(.knowledgeCatIcon, .knowledgeCatCount, .knowledgePill, .lawBook > summary b, .lawLibraryLaw > summary em.ready, .lawNormListHead span),
html[data-theme="office"] #content :where(.knowledgeCatIcon, .knowledgeCatCount, .knowledgePill, .lawBook > summary b, .lawLibraryLaw > summary em.ready, .lawNormListHead span) {
  background: color-mix(in srgb, var(--bw-accent, #74a7ff) 17%, var(--bw-surface-2, #18242f)) !important;
}

html[data-theme="dark"] #content .calendarCell.todayCell,
html[data-theme="office"] #content .calendarCell.todayCell {
  border-color: var(--bw-accent, #74a7ff) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bw-accent, #74a7ff) 42%, transparent), 0 16px 34px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] #content .calendarCell span,
html[data-theme="office"] #content .calendarCell span {
  background: color-mix(in srgb, var(--bw-accent, #74a7ff) 14%, var(--bw-surface-2, #18242f)) !important;
  border-left-color: var(--bw-accent, #74a7ff) !important;
  color: var(--bw-ink, #fff) !important;
}

html[data-theme="dark"] #content :where(table, thead, tbody, tr, th, td),
html[data-theme="office"] #content :where(table, thead, tbody, tr, th, td) {
  background: transparent !important;
  color: var(--bw-ink, #fff) !important;
  border-color: var(--bw-soft-line, #435461) !important;
}

html[data-theme="dark"] #content :where(thead th, .wealthTable th),
html[data-theme="office"] #content :where(thead th, .wealthTable th) {
  background: color-mix(in srgb, var(--bw-surface-2, #18242f) 88%, #000 8%) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-chat-header, #151f2a) 78%, #ffffff 3%) 0, var(--bw-chat-panel, #0f1720) 72%) !important;
  border-color: color-mix(in srgb, var(--bw-chat-line, #5b6b7b) 84%, var(--bw-accent, #74a7ff) 16%) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatLauncher,
html[data-theme="office"] .aiChatWidget .aiChatLauncher,
.aiChatWidget .aiChatLauncher {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 54%, #ffffff 20%), color-mix(in srgb, var(--bw-accent-dark, #154fbd) 78%, #111827)) !important;
  border: 1px solid color-mix(in srgb, #ffffff 74%, var(--bw-accent, #1f6feb)) !important;
  box-shadow:
    0 34px 84px rgba(0,0,0,.55),
    0 20px 56px color-mix(in srgb, var(--bw-accent, #1f6feb) 46%, transparent),
    0 0 0 10px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -22px 34px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatLauncher span,
html[data-theme="office"] .aiChatWidget .aiChatLauncher span,
.aiChatWidget .aiChatLauncher span {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.38);
}

html[data-theme="dark"] .aiChatPanel :where(.aiChatTabs button.active, .aiSendButton),
html[data-theme="office"] .aiChatPanel :where(.aiChatTabs button.active, .aiSendButton) {
  background: linear-gradient(135deg, var(--bw-accent-dark, #2f75d6), var(--bw-accent, #74a7ff)) !important;
  border-color: var(--bw-accent, #74a7ff) !important;
  color: #ffffff !important;
}

/* Phase 45: visible Meetings nav, stable sidebar and selected accent everywhere */
body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  min-height: 100vh;
  overflow-x: hidden;
}

.sidebar {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar .brand {
  flex: 0 0 auto;
}

.sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 3px;
  scrollbar-width: thin;
}

.sidebar nav button {
  flex-shrink: 0;
}

.sidebar nav button.active,
.tabButton.active,
.adminTabs button.active {
  box-shadow: inset 4px 0 0 var(--bw-accent, #1f6feb), 0 14px 34px color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, transparent) !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="office"] .sidebar nav button.active {
  background: color-mix(in srgb, var(--bw-accent, #74a7ff) 24%, #ffffff 4%) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .sidebar nav button:hover,
html[data-theme="office"] .sidebar nav button:hover {
  background: color-mix(in srgb, var(--bw-accent, #74a7ff) 16%, #ffffff 3%) !important;
}

html[data-theme="dark"] .aiSupportForm textarea,
html[data-theme="office"] .aiSupportForm textarea,
html[data-theme="dark"] .aiComposer textarea,
html[data-theme="office"] .aiComposer textarea {
  color: #f8fbff !important;
  caret-color: var(--bw-accent, #74a7ff) !important;
}

html[data-theme="dark"] .aiSupportForm textarea::placeholder,
html[data-theme="office"] .aiSupportForm textarea::placeholder,
html[data-theme="dark"] .aiComposer textarea::placeholder,
html[data-theme="office"] .aiComposer textarea::placeholder {
  color: rgba(235, 244, 255, .72) !important;
}

/* Phase 46: larger readable chat, fast law-search shell and stronger launcher depth */
.aiChatWidget .aiChatPanel {
  width: min(520px, calc(100vw - 28px)) !important;
  height: min(790px, calc(100vh - 28px)) !important;
  border-radius: 26px !important;
  box-shadow:
    0 42px 110px rgba(10, 20, 30, .34),
    0 18px 44px rgba(10, 20, 30, .18) !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(760px, calc(100vw - 32px)) !important;
  height: min(870px, calc(100vh - 28px)) !important;
}

.aiChatWidget .aiChatBody {
  scroll-behavior: auto;
  padding: 16px !important;
}

.aiChatWidget .aiConversation {
  gap: 18px;
}

.aiChatWidget .aiBubblePair {
  gap: 10px;
}

.aiChatWidget .aiBubble {
  font-size: 15px !important;
  line-height: 1.52 !important;
}

.aiChatWidget .aiBubbleBot {
  max-width: min(92%, 620px) !important;
  padding: 16px 18px !important;
  border-radius: 20px 20px 20px 7px !important;
}

.aiChatWidget .aiBubbleUser {
  max-width: min(88%, 600px) !important;
  padding: 12px 16px !important;
  border-radius: 20px 20px 7px 20px !important;
}

.aiChatWidget .aiAnswerText h4 {
  margin: 12px 0 7px;
  font-size: 15px;
}

.aiChatWidget .aiAnswerText p,
.aiChatWidget .aiAnswerText li {
  overflow-wrap: anywhere;
}

.aiChatWidget .aiComposer {
  padding: 12px 16px 14px !important;
}

.aiChatWidget .aiComposerBox {
  border-radius: 20px !important;
  padding: 14px 14px 10px !important;
  box-shadow:
    0 16px 36px rgba(10, 20, 30, .09),
    inset 0 1px 0 rgba(255,255,255,.6) !important;
}

.aiChatWidget .aiComposer textarea {
  min-height: 128px !important;
  font-size: 15px !important;
}

.aiChatWidget .aiChatLauncher {
  width: 78px !important;
  height: 78px !important;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.96), rgba(255,255,255,.35) 28%, transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 58%, #ffffff 18%), color-mix(in srgb, var(--bw-accent-dark, #154fbd) 76%, #111827)) !important;
  box-shadow:
    0 38px 92px rgba(0,0,0,.56),
    0 22px 62px color-mix(in srgb, var(--bw-accent, #1f6feb) 44%, transparent),
    0 0 0 11px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -22px 38px rgba(0,0,0,.22) !important;
}

.aiChatWidget .aiChatLauncher::before {
  inset: -20px !important;
  opacity: .98 !important;
  filter: blur(14px) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  box-shadow:
    0 52px 120px rgba(0,0,0,.72),
    0 28px 72px color-mix(in srgb, var(--bw-accent, #74a7ff) 28%, transparent),
    0 0 0 1px color-mix(in srgb, #ffffff 8%, transparent) !important;
}

html[data-theme="dark"] .aiChatWidget .aiBubbleBot,
html[data-theme="office"] .aiChatWidget .aiBubbleBot,
html[data-theme="dark"] .aiChatWidget .aiComposerBox,
html[data-theme="office"] .aiChatWidget .aiComposerBox {
  background: color-mix(in srgb, var(--bw-chat-card, #152230) 88%, #ffffff 4%) !important;
  border-color: color-mix(in srgb, var(--bw-chat-line, #657789) 82%, var(--bw-accent, #74a7ff) 18%) !important;
  color: #f8fbff !important;
}

html[data-theme="dark"] .aiChatWidget .aiBubbleBot *,
html[data-theme="office"] .aiChatWidget .aiBubbleBot *,
html[data-theme="dark"] .aiChatWidget .aiComposerBox textarea,
html[data-theme="office"] .aiChatWidget .aiComposerBox textarea {
  color: #f8fbff !important;
}

.lawLibrarySearchMode {
  display: grid;
  gap: 12px;
}

.lawLibrarySearchMode .lawDirectResultList.compact {
  display: grid;
  gap: 8px;
}

.lawLibrarySearchMode .lawDirectResult {
  padding: 10px 12px;
}

/* Phase 48: final accent, contrast and chat depth pass */
:where(button.primary, .buttonLink.primary, .tabButton.active, .adminTabs button.active, .aiChatTabs button.active, .aiSendButton, .aiBubbleUser) {
  background: linear-gradient(135deg, var(--bw-accent-dark, #174ea6), var(--bw-accent, #1f6feb)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 78%, #ffffff 12%) !important;
  color: #ffffff !important;
}

.aiChatWidget .aiChatPanel {
  width: min(580px, calc(100vw - 32px)) !important;
  height: min(830px, calc(100vh - 26px)) !important;
  border-radius: 28px !important;
  box-shadow:
    0 54px 140px rgba(8, 18, 28, .40),
    0 24px 70px color-mix(in srgb, var(--bw-accent, #1f6feb) 20%, transparent),
    0 0 0 1px rgba(255,255,255,.56) !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(940px, calc(100vw - 34px)) !important;
  height: min(910px, calc(100vh - 24px)) !important;
}

.aiChatWidget .aiChatBody {
  background:
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--bw-accent, #1f6feb) 8%, transparent), transparent 36%),
    var(--bw-chat-body, #ffffff) !important;
}

.aiChatWidget .aiChatHeader {
  min-height: 78px;
}

.aiChatWidget .aiBubbleBot {
  box-shadow:
    0 18px 46px rgba(12, 22, 34, .10),
    inset 0 1px 0 rgba(255,255,255,.64) !important;
}

.aiChatWidget .aiBubbleUser {
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--bw-accent, #1f6feb) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}

.aiChatWidget .aiChatLauncher {
  width: 84px !important;
  height: 84px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  box-shadow:
    0 42px 96px rgba(0,0,0,.62),
    0 24px 72px color-mix(in srgb, var(--bw-accent, #1f6feb) 48%, transparent),
    0 0 0 12px color-mix(in srgb, var(--bw-accent, #1f6feb) 20%, transparent),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -26px 44px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .item, .stats span, .metricCard, .workflowStep, .catalogGroup, .catalogRow, .formCard, .courtResult, .courtEmpty, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult),
html[data-theme="office"] #content :where(.panel, .card, .item, .stats span, .metricCard, .workflowStep, .catalogGroup, .catalogRow, .formCard, .courtResult, .courtEmpty, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2, #1e2933) 94%, #ffffff 3%), color-mix(in srgb, var(--bw-surface, #151f28) 96%, #000000 4%)) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line, #40515e) 84%, var(--bw-accent, #74a7ff) 16%) !important;
  color: var(--bw-ink, #f8fbff) !important;
}

html[data-theme="dark"] #content :where(.panel *, .card *, .item *, .sourceCard *, .lawBook *, .lawLibraryLaw *, .lawNormEntry *),
html[data-theme="office"] #content :where(.panel *, .card *, .item *, .sourceCard *, .lawBook *, .lawLibraryLaw *, .lawNormEntry *) {
  color: inherit;
}

html[data-theme="dark"] #content :where(input, textarea, select),
html[data-theme="office"] #content :where(input, textarea, select) {
  background: color-mix(in srgb, var(--bw-surface, #111820) 92%, #000000 8%) !important;
  color: var(--bw-ink, #f8fbff) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line, #40515e) 86%, var(--bw-accent, #74a7ff) 14%) !important;
}

html[data-theme="dark"] #content :where(input::placeholder, textarea::placeholder),
html[data-theme="office"] #content :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--bw-ink, #f8fbff) 62%, transparent) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatBody,
html[data-theme="office"] .aiChatWidget .aiChatBody {
  --bw-chat-body: #0d141d;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background: linear-gradient(180deg, #162230 0%, #0d141d 100%) !important;
  color: #f8fbff !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatHeader,
html[data-theme="office"] .aiChatWidget .aiChatHeader,
html[data-theme="dark"] .aiChatWidget .aiComposer,
html[data-theme="office"] .aiChatWidget .aiComposer,
html[data-theme="dark"] .aiChatWidget .aiChatTabs,
html[data-theme="office"] .aiChatWidget .aiChatTabs {
  background: color-mix(in srgb, #121d29 92%, var(--bw-accent, #74a7ff) 8%) !important;
  border-color: color-mix(in srgb, #ffffff 12%, var(--bw-accent, #74a7ff) 16%) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader *, .aiChatBody *, .aiComposer *, .aiChatTabs *),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader *, .aiChatBody *, .aiComposer *, .aiChatTabs *) {
  color: #f8fbff;
}

html[data-theme="dark"] .aiChatWidget .aiBubbleBot,
html[data-theme="office"] .aiChatWidget .aiBubbleBot,
html[data-theme="dark"] .aiChatWidget .aiEmptyMessages,
html[data-theme="office"] .aiChatWidget .aiEmptyMessages {
  background: #172433 !important;
  color: #f8fbff !important;
}

html[data-theme="dark"] .aiChatWidget .aiComposerBox,
html[data-theme="office"] .aiChatWidget .aiComposerBox {
  background: #172433 !important;
  border-color: #526578 !important;
}

html[data-theme="dark"] .aiChatWidget .aiComposer textarea,
html[data-theme="office"] .aiChatWidget .aiComposer textarea {
  color: #f8fbff !important;
  caret-color: var(--bw-accent, #74a7ff) !important;
}

html[data-theme="dark"] .aiChatWidget .aiPrivacy,
html[data-theme="office"] .aiChatWidget .aiPrivacy {
  background: #172433 !important;
  color: #f8fbff !important;
}

/* Phase 49: deep contrast pass, fast-law shell and premium chat launcher */
html[data-theme="dark"],
html[data-theme="office"] {
  --bw-ink: #f7fbff;
  --bw-muted: #b6c5d2;
  --bw-page: #081016;
  --bw-surface: #111b24;
  --bw-surface-2: #17232d;
  --bw-surface-3: #1e2a35;
  --bw-soft-line: #405261;
  --bw-input: #0b141c;
  --bw-chat-body: #0b121a;
  --bw-chat-card: #162331;
  --bw-chat-line: #5c7182;
}

html[data-theme="office"] {
  --bw-page: #20272d;
  --bw-surface: #293139;
  --bw-surface-2: #323b44;
  --bw-surface-3: #3c4650;
  --bw-soft-line: #566675;
  --bw-input: #202932;
  --bw-chat-body: #242c34;
  --bw-chat-card: #303a44;
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody),
html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--bw-accent, #1f6feb) 13%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-page) 92%, var(--bw-accent, #1f6feb) 8%), var(--bw-page)) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .app,
html[data-theme="office"] .app {
  background: transparent !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="office"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 22%),
    linear-gradient(180deg, #071116 0%, color-mix(in srgb, var(--bw-page) 82%, #000 18%) 100%) !important;
  border-right: 1px solid color-mix(in srgb, var(--bw-soft-line) 62%, transparent) !important;
  box-shadow: 18px 0 55px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .sidebar nav button,
html[data-theme="office"] .sidebar nav button {
  background: color-mix(in srgb, var(--bw-surface-2) 70%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--bw-soft-line) 26%, transparent) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="office"] .sidebar nav button.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bw-accent) 30%, var(--bw-surface-3)), color-mix(in srgb, var(--bw-surface-3) 82%, #fff 2%)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 72%, #fff 4%) !important;
}

html[data-theme="dark"] #content :where(.topbar, .panel, .card, .modalSheet, .detailPanel, .item, .stats span, .metricCard, .workflowStep, .catalogGroup, .catalogRow, .formCard, .courtResult, .courtEmpty, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .calendarCell, .calendarGrid > div, .digitalFileArea, .knowledgeCategoryCard, .knowledgeThreadCard),
html[data-theme="office"] #content :where(.topbar, .panel, .card, .modalSheet, .detailPanel, .item, .stats span, .metricCard, .workflowStep, .catalogGroup, .catalogRow, .formCard, .courtResult, .courtEmpty, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .calendarCell, .calendarGrid > div, .digitalFileArea, .knowledgeCategoryCard, .knowledgeThreadCard) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2) 92%, #ffffff 3%), color-mix(in srgb, var(--bw-surface) 96%, #000 4%)) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line) 82%, var(--bw-accent) 18%) !important;
  color: var(--bw-ink) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.16) !important;
}

html[data-theme="dark"] #content :where(.topbar *, .panel *, .card *, .modalSheet *, .detailPanel *, .item *, .stats span *, .calendarCell *, table *, .lawBook *, .lawLibraryLaw *, .lawNormEntry *, .knowledgeThreadCard *),
html[data-theme="office"] #content :where(.topbar *, .panel *, .card *, .modalSheet *, .detailPanel *, .item *, .stats span *, .calendarCell *, table *, .lawBook *, .lawLibraryLaw *, .lawNormEntry *, .knowledgeThreadCard *) {
  color: inherit;
}

html[data-theme="dark"] #content :where(.muted, small, label, .topbar p, .itemMain span),
html[data-theme="office"] #content :where(.muted, small, label, .topbar p, .itemMain span) {
  color: var(--bw-muted) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select),
html[data-theme="office"] #content :where(input, textarea, select) {
  background: var(--bw-input) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line) 84%, var(--bw-accent) 16%) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .calendarGrid, .fileAreaNav, .journalTabs, .wealthTabs),
html[data-theme="office"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .calendarGrid, .fileAreaNav, .journalTabs, .wealthTabs) {
  background: color-mix(in srgb, var(--bw-surface) 96%, #000 4%) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line) 76%, transparent) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active strong),
html[data-theme="office"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active strong) {
  background: linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 80%, #fff 10%) !important;
  color: #fff !important;
}

.lawFastSearchPanel {
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 30%, var(--bw-soft-line, #dbe3ea)) !important;
  background:
    radial-gradient(circle at 96% 0%, color-mix(in srgb, var(--bw-accent, #1f6feb) 14%, transparent), transparent 40%),
    color-mix(in srgb, var(--bw-surface-2, #fff) 92%, #ffffff 8%) !important;
}

.aiChatWidget .aiChatPanel {
  width: min(640px, calc(100vw - 30px)) !important;
  height: min(880px, calc(100vh - 24px)) !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(1080px, calc(100vw - 34px)) !important;
  height: min(940px, calc(100vh - 22px)) !important;
}

.aiChatWidget .aiBubbleBot {
  max-width: min(86%, 620px) !important;
  line-height: 1.52 !important;
}

.aiChatWidget .aiComposer textarea {
  min-height: 150px !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bw-chat-card) 90%, #fff 2%), var(--bw-chat-body)) !important;
  border-color: color-mix(in srgb, var(--bw-chat-line) 76%, var(--bw-accent) 24%) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader, .aiChatTabs, .aiComposer),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader, .aiChatTabs, .aiComposer) {
  background: color-mix(in srgb, var(--bw-chat-card) 92%, #000 8%) !important;
  border-color: color-mix(in srgb, var(--bw-chat-line) 80%, var(--bw-accent) 20%) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatBody, .aiMessagesPanel, .aiFreshChatPanel),
html[data-theme="office"] .aiChatWidget :where(.aiChatBody, .aiMessagesPanel, .aiFreshChatPanel) {
  background: var(--bw-chat-body) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiEmptyMessages, .aiMessageOpen, .aiPrivacy, .aiComposerBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiEmptyMessages, .aiMessageOpen, .aiPrivacy, .aiComposerBox) {
  background: var(--bw-chat-card) !important;
  border-color: color-mix(in srgb, var(--bw-chat-line) 82%, var(--bw-accent) 18%) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button.active,
html[data-theme="office"] .aiChatWidget .aiChatTabs button.active {
  background: color-mix(in srgb, var(--bw-accent) 28%, var(--bw-chat-card)) !important;
  box-shadow: inset 0 3px 0 var(--bw-accent), 0 -1px 0 color-mix(in srgb, var(--bw-accent) 50%, transparent) !important;
}

.aiChatWidget .aiChatLauncher {
  width: 90px !important;
  height: 90px !important;
  transform: translateZ(0);
  box-shadow:
    0 48px 110px rgba(0,0,0,.66),
    0 26px 82px color-mix(in srgb, var(--bw-accent, #1f6feb) 58%, transparent),
    0 0 0 14px color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, transparent),
    0 0 0 1px rgba(255,255,255,.85),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -28px 46px rgba(0,0,0,.28) !important;
}

nav button[data-view="bbb"] {
  display: flex !important;
}

/* Phase 50: final protected-chat contrast and accent consistency */
:root {
  --bw-shadow-deep: 0 28px 90px rgba(15, 23, 42, .28);
}

#content :where(button.primary, .buttonLink.primary),
.aiChatWidget :where(.aiSendButton, .aiSupportForm button.primary),
.aiBubbleUser {
  background: linear-gradient(135deg, var(--bw-accent-dark, #174ea6), var(--bw-accent, #1f6feb)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 78%, #fff 10%) !important;
  color: #fff !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--bw-accent, #1f6feb) 30%, transparent) !important;
}

.aiChatWidget .aiChatPanel {
  border-radius: 28px !important;
  box-shadow:
    0 34px 110px rgba(10, 18, 28, .34),
    0 10px 38px color-mix(in srgb, var(--bw-accent, #1f6feb) 16%, transparent) !important;
}

.aiChatWidget .aiChatHeader {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  min-height: 72px !important;
}

.aiChatWidget .aiChatResizeButton {
  justify-self: center !important;
  border-radius: 999px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, var(--bw-line, #d8e2eb)) !important;
  background: color-mix(in srgb, var(--bw-accent-soft, #eaf2ff) 48%, #fff) !important;
  color: var(--bw-accent-dark, #174ea6) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--bw-accent, #1f6feb) 14%, transparent) !important;
}

.aiChatWidget .aiChatBody {
  padding: 18px !important;
  scroll-behavior: auto !important;
}

.aiChatWidget .aiBubbleBot {
  max-width: min(90%, 760px) !important;
  border-radius: 20px 20px 20px 6px !important;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .08) !important;
}

.aiChatWidget .aiBubbleUser {
  max-width: min(84%, 660px) !important;
  border-radius: 20px 20px 6px 20px !important;
  padding: 13px 16px !important;
}

.aiChatWidget .aiAnswerText h4 {
  color: var(--bw-accent-dark, #174ea6) !important;
  letter-spacing: 0 !important;
}

.aiChatWidget .aiComposerBox {
  border-radius: 20px !important;
  border-color: color-mix(in srgb, var(--bw-line, #d6e0ea) 82%, var(--bw-accent, #1f6feb) 18%) !important;
}

.aiChatWidget .aiComposer textarea,
.aiChatWidget .aiSupportForm textarea,
.aiChatWidget .aiSupportReplyForm textarea {
  min-height: 150px !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.aiChatWidget .aiChatTabs button.active {
  color: var(--bw-accent-dark, #174ea6) !important;
  box-shadow: inset 0 4px 0 var(--bw-accent, #1f6feb) !important;
}

html[data-theme="dark"] .aiChatWidget,
html[data-theme="office"] .aiChatWidget {
  --bw-chat-body: color-mix(in srgb, var(--bw-page, #081016) 74%, #000 26%);
  --bw-chat-card: color-mix(in srgb, var(--bw-surface-2, #17232d) 90%, #fff 2%);
  --bw-chat-line: color-mix(in srgb, var(--bw-soft-line, #526577) 82%, var(--bw-accent, #74a7ff) 18%);
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--bw-accent, #74a7ff) 12%, transparent), transparent 38%),
    linear-gradient(180deg, var(--bw-chat-card), var(--bw-chat-body)) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-ink, #f8fbff) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs) {
  background: color-mix(in srgb, var(--bw-chat-card) 88%, #000 12%) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) {
  background: var(--bw-chat-card) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-ink, #f8fbff) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) :where(p, span, small, strong, b, h3, h4, li, summary),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) :where(p, span, small, strong, b, h3, h4, li, summary) {
  color: var(--bw-ink, #f8fbff) !important;
}

html[data-theme="dark"] .aiChatWidget .aiAnswerText h4,
html[data-theme="office"] .aiChatWidget .aiAnswerText h4 {
  color: color-mix(in srgb, var(--bw-accent, #74a7ff) 78%, #fff 22%) !important;
}

html[data-theme="dark"] .aiChatWidget :where(textarea, input),
html[data-theme="office"] .aiChatWidget :where(textarea, input) {
  background: color-mix(in srgb, var(--bw-input, #0b141c) 88%, #000 12%) !important;
  color: var(--bw-ink, #f8fbff) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget :where(textarea::placeholder, input::placeholder),
html[data-theme="office"] .aiChatWidget :where(textarea::placeholder, input::placeholder) {
  color: color-mix(in srgb, var(--bw-ink, #f8fbff) 60%, transparent) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button,
html[data-theme="office"] .aiChatWidget .aiChatTabs button {
  background: transparent !important;
  color: color-mix(in srgb, var(--bw-ink, #f8fbff) 78%, transparent) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button.active,
html[data-theme="office"] .aiChatWidget .aiChatTabs button.active {
  background: color-mix(in srgb, var(--bw-accent, #74a7ff) 24%, var(--bw-chat-card)) !important;
  color: #fff !important;
  box-shadow: inset 0 4px 0 var(--bw-accent, #74a7ff) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatResizeButton,
html[data-theme="office"] .aiChatWidget .aiChatResizeButton,
html[data-theme="dark"] .aiChatWidget .aiChatHeaderActions button,
html[data-theme="office"] .aiChatWidget .aiChatHeaderActions button {
  background: color-mix(in srgb, var(--bw-accent, #74a7ff) 18%, var(--bw-chat-card)) !important;
  color: #fff !important;
  border-color: var(--bw-chat-line) !important;
}

.aiChatWidget .aiChatLauncher {
  border: 1px solid color-mix(in srgb, #fff 72%, var(--bw-accent, #1f6feb)) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.75), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 58%, #fff 20%), color-mix(in srgb, var(--bw-accent-dark, #174ea6) 80%, #111827)) !important;
  box-shadow:
    0 34px 86px rgba(2, 6, 23, .54),
    0 18px 58px color-mix(in srgb, var(--bw-accent, #1f6feb) 48%, transparent),
    0 0 0 12px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -28px 48px rgba(15,23,42,.34) !important;
}

/* Phase 51: coherent accent rendering, darker premium surfaces and readable chat/legal cards */
#content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminTabs button.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .fileAreaNav button.active strong, .statusButton.active),
.aiChatWidget :where(.aiSendButton, .aiSupportForm button.primary),
.aiBubbleUser {
  background: linear-gradient(135deg, var(--bw-accent-dark, #174ea6), var(--bw-accent, #1f6feb)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 82%, #ffffff 10%) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--bw-accent, #1f6feb) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

.sidebar nav button.active {
  box-shadow:
    inset 4px 0 0 var(--bw-accent, #1f6feb),
    0 14px 34px color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, transparent) !important;
}

.metric,
.stats strong,
.compactStats strong,
.journalStat strong,
.compensationStat strong,
.moneyCell,
.calendarCell strong,
.sourceCard small,
.lawBook > summary b,
.lawLibraryLaw > summary em.ready,
.lawNormListHead span,
.lawNormEntry > summary b,
.knowledgeCatIcon,
.knowledgeCatCount,
.knowledgePill,
.inlineBadge,
.pill,
.statusMark {
  color: var(--bw-accent, #1f6feb) !important;
}

.lawBook > summary b,
.lawLibraryLaw > summary em.ready,
.lawNormListHead span,
.knowledgeCatIcon,
.knowledgeCatCount,
.knowledgePill,
.inlineBadge,
.pill,
.statusMark {
  background: color-mix(in srgb, var(--bw-accent-soft, #eaf2ff) 78%, var(--bw-surface, #fff) 22%) !important;
}

.stats span,
.metricCard,
.journalStat,
.compensationStat,
.wealthStat,
.calendarStat,
.documentStat,
.deadlineStat,
.protocolStat,
.courtStat,
.applicationStat {
  gap: 10px !important;
  align-content: center !important;
  padding: 16px 18px !important;
}

.stats strong,
.metric,
.journalStat strong,
.compensationStat strong,
.wealthStat strong {
  display: block;
  margin-top: 4px;
  line-height: 1.08 !important;
}

.lawFastSearchPanel,
.lawDirectResults,
.lawDirectResult,
.lawNormEntry,
.lawLibraryLaw,
.knowledgeThreadCard,
.knowledgeCategoryCard {
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 30%, var(--bw-line, #d7e0e8)) !important;
}

.lawDirectResultList.compact {
  gap: 8px !important;
}

.lawDirectBookShelf {
  display: grid;
  gap: 8px;
}

.lawDirectResult {
  box-shadow:
    0 16px 34px rgba(15, 23, 42, .07),
    inset 4px 0 0 var(--bw-accent, #1f6feb) !important;
}

.lawDirectResult b {
  background: linear-gradient(135deg, var(--bw-accent-dark, #174ea6), var(--bw-accent, #1f6feb)) !important;
  color: #fff !important;
}

.aiChatWidget .aiChatPanel {
  width: min(660px, calc(100vw - 30px)) !important;
  height: min(900px, calc(100vh - 22px)) !important;
  border-radius: 30px !important;
  box-shadow:
    0 58px 150px rgba(8, 18, 28, .46),
    0 24px 76px color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, transparent),
    0 0 0 1px rgba(255,255,255,.62) !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(1120px, calc(100vw - 34px)) !important;
  height: min(950px, calc(100vh - 22px)) !important;
}

.aiChatWidget .aiChatBody {
  padding: 20px !important;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--bw-accent, #1f6feb) 9%, transparent), transparent 38%),
    var(--bw-chat-body, #ffffff) !important;
}

.aiChatWidget .aiBubble {
  font-size: 15px !important;
  line-height: 1.56 !important;
}

.aiChatWidget .aiBubbleBot {
  max-width: min(90%, 820px) !important;
  padding: 17px 19px !important;
  border-radius: 22px 22px 22px 7px !important;
}

.aiChatWidget .aiBubbleUser {
  max-width: min(86%, 720px) !important;
  padding: 13px 17px !important;
  border-radius: 22px 22px 7px 22px !important;
}

.aiChatWidget .aiComposer {
  padding: 14px 18px 16px !important;
}

.aiChatWidget .aiComposerBox {
  border-radius: 22px !important;
  padding: 16px 16px 12px !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.62) !important;
}

.aiChatWidget .aiComposer textarea,
.aiChatWidget .aiSupportForm textarea,
.aiChatWidget .aiSupportReplyForm textarea {
  min-height: 160px !important;
  font-size: 15.5px !important;
  line-height: 1.52 !important;
}

.aiChatWidget .aiChatLauncher {
  width: 88px !important;
  height: 88px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 31% 20%, rgba(255,255,255,.95), rgba(255,255,255,.30) 30%, transparent 45%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 60%, #ffffff 18%), color-mix(in srgb, var(--bw-accent-dark, #174ea6) 82%, #111827)) !important;
  box-shadow:
    0 48px 118px rgba(2, 6, 23, .64),
    0 26px 82px color-mix(in srgb, var(--bw-accent, #1f6feb) 50%, transparent),
    0 0 0 13px color-mix(in srgb, var(--bw-accent, #1f6feb) 19%, transparent),
    0 0 0 1px rgba(255,255,255,.86),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -28px 48px rgba(15,23,42,.34) !important;
}

html[data-theme="dark"] #content :where(.topbar, .panel, .card, .modalSheet, .detailPanel, .item, .stats span, .metricCard, .workflowStep, .catalogGroup, .catalogRow, .formCard, .courtResult, .courtEmpty, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .calendarCell, .calendarGrid > div, .digitalFileArea, .knowledgeCategoryCard, .knowledgeThreadCard, .wealthTableWrap),
html[data-theme="office"] #content :where(.topbar, .panel, .card, .modalSheet, .detailPanel, .item, .stats span, .metricCard, .workflowStep, .catalogGroup, .catalogRow, .formCard, .courtResult, .courtEmpty, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .calendarCell, .calendarGrid > div, .digitalFileArea, .knowledgeCategoryCard, .knowledgeThreadCard, .wealthTableWrap) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2, #17232d) 92%, #ffffff 4%), color-mix(in srgb, var(--bw-surface, #111b24) 96%, #000000 4%)) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line, #405261) 82%, var(--bw-accent, #74a7ff) 18%) !important;
  color: var(--bw-ink, #f7fbff) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .calendarGrid, .fileAreaNav, .journalTabs, .wealthTabs),
html[data-theme="office"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .calendarGrid, .fileAreaNav, .journalTabs, .wealthTabs) {
  background: color-mix(in srgb, var(--bw-surface, #111b24) 96%, #000 4%) !important;
  color: var(--bw-ink, #f7fbff) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line, #405261) 76%, transparent) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select),
html[data-theme="office"] #content :where(input, textarea, select) {
  background: color-mix(in srgb, var(--bw-input, #0b141c) 90%, #000 10%) !important;
  color: var(--bw-ink, #f7fbff) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line, #405261) 84%, var(--bw-accent, #74a7ff) 16%) !important;
}

html[data-theme="dark"] .aiChatWidget,
html[data-theme="office"] .aiChatWidget {
  --bw-chat-body: color-mix(in srgb, var(--bw-page, #081016) 82%, #000 18%);
  --bw-chat-card: color-mix(in srgb, var(--bw-surface-2, #17232d) 92%, #ffffff 4%);
  --bw-chat-line: color-mix(in srgb, var(--bw-soft-line, #405261) 76%, var(--bw-accent, #74a7ff) 24%);
}

html[data-theme="office"] .aiChatWidget {
  --bw-chat-body: #252e37;
  --bw-chat-card: #333d47;
  --bw-chat-line: color-mix(in srgb, #697a89 78%, var(--bw-accent, #74a7ff) 22%);
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--bw-accent, #74a7ff) 13%, transparent), transparent 38%),
    linear-gradient(180deg, var(--bw-chat-card), var(--bw-chat-body)) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-ink, #f7fbff) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs) {
  background: color-mix(in srgb, var(--bw-chat-card) 88%, #000 12%) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) {
  background: var(--bw-chat-card) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-ink, #f7fbff) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) :where(p, span, small, strong, b, h3, h4, li, summary),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) :where(p, span, small, strong, b, h3, h4, li, summary) {
  color: var(--bw-ink, #f7fbff) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button,
html[data-theme="office"] .aiChatWidget .aiChatTabs button {
  color: color-mix(in srgb, var(--bw-ink, #f7fbff) 82%, transparent) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button.active,
html[data-theme="office"] .aiChatWidget .aiChatTabs button.active {
  background: color-mix(in srgb, var(--bw-accent, #74a7ff) 28%, var(--bw-chat-card)) !important;
  color: #fff !important;
  box-shadow: inset 0 4px 0 var(--bw-accent, #74a7ff) !important;
}

/* Phase 52: stable dark UI, visible meetings and livechat focus polish */
html[data-theme="dark"] {
  --bw-page: #070b10;
  --bw-surface: #101820;
  --bw-surface-2: #16212b;
  --bw-surface-3: #1d2a35;
  --bw-input: #0c1219;
  --bw-soft-line: #415263;
  --bw-chat-body: #080d13;
  --bw-chat-card: #14202b;
  --bw-chat-line: #566b7f;
}

html[data-theme="office"] {
  --bw-page: #242a31;
  --bw-surface: #303841;
  --bw-surface-2: #38424c;
  --bw-surface-3: #46515c;
  --bw-input: #252d36;
  --bw-soft-line: #667482;
  --bw-chat-body: #262d35;
  --bw-chat-card: #38424c;
  --bw-chat-line: #738291;
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody),
html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 45% -12%, color-mix(in srgb, var(--bw-accent, #1f6feb) 12%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-page) 94%, #000 6%), var(--bw-page)) !important;
}

nav button[data-view="bbb"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

nav button[data-view="bbb"] span:first-child::after {
  content: "Online";
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent);
  color: color-mix(in srgb, var(--bw-accent, #1f6feb) 74%, #fff 26%);
  font-size: 10px;
  font-weight: 900;
}

html[data-theme="dark"] #content :where(.topbar, .panel, .card, .modalSheet, .detailPanel, .item, .stats span, .metricCard, .workflowStep, .catalogGroup, .catalogRow, .formCard, .courtResult, .courtEmpty, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .calendarCell, .calendarGrid > div, .digitalFileArea, .knowledgeCategoryCard, .knowledgeThreadCard, .wealthTableWrap),
html[data-theme="office"] #content :where(.topbar, .panel, .card, .modalSheet, .detailPanel, .item, .stats span, .metricCard, .workflowStep, .catalogGroup, .catalogRow, .formCard, .courtResult, .courtEmpty, .sourceCard, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .calendarCell, .calendarGrid > div, .digitalFileArea, .knowledgeCategoryCard, .knowledgeThreadCard, .wealthTableWrap) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2) 92%, #fff 3%), color-mix(in srgb, var(--bw-surface) 94%, #000 6%)) !important;
  color: var(--bw-ink, #f7fbff) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line) 78%, var(--bw-accent, #1f6feb) 22%) !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .item, .metricCard, .stats span) :where(p, span, small, strong, b, label, li, h2, h3, h4),
html[data-theme="office"] #content :where(.panel, .card, .item, .metricCard, .stats span) :where(p, span, small, strong, b, label, li, h2, h3, h4) {
  color: inherit;
}

html[data-theme="dark"] #content :where(.muted, small, label, .itemMain span),
html[data-theme="office"] #content :where(.muted, small, label, .itemMain span) {
  color: color-mix(in srgb, var(--bw-ink, #f7fbff) 72%, transparent) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select),
html[data-theme="office"] #content :where(input, textarea, select) {
  background: color-mix(in srgb, var(--bw-input) 93%, #000 7%) !important;
  color: var(--bw-ink, #f7fbff) !important;
}

.aiChatWidget .aiChatPanel {
  width: min(700px, calc(100vw - 28px)) !important;
  height: min(930px, calc(100vh - 18px)) !important;
  border-radius: 28px !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(1180px, calc(100vw - 28px)) !important;
  height: min(970px, calc(100vh - 18px)) !important;
}

.aiChatWidget .aiChatBody {
  scroll-behavior: auto !important;
}

.aiChatWidget .aiSupportForm textarea,
.aiChatWidget .aiComposer textarea {
  min-height: 168px !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-chat-card) 94%, #fff 2%), var(--bw-chat-body)) !important;
  border-color: color-mix(in srgb, var(--bw-chat-line) 80%, var(--bw-accent, #1f6feb) 20%) !important;
  box-shadow:
    0 52px 140px rgba(0,0,0,.58),
    0 22px 70px color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, transparent),
    0 0 0 1px rgba(255,255,255,.52) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs) {
  background: color-mix(in srgb, var(--bw-chat-card) 86%, #000 14%) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) {
  background: var(--bw-chat-card) !important;
  color: var(--bw-ink, #f7fbff) !important;
  border-color: color-mix(in srgb, var(--bw-chat-line) 80%, var(--bw-accent, #1f6feb) 20%) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatLauncher,
html[data-theme="office"] .aiChatWidget .aiChatLauncher,
.aiChatWidget .aiChatLauncher {
  box-shadow:
    0 56px 132px rgba(2,6,23,.72),
    0 28px 90px color-mix(in srgb, var(--bw-accent, #1f6feb) 54%, transparent),
    0 0 0 14px color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, transparent),
    0 0 0 1px rgba(255,255,255,.92),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -30px 50px rgba(15,23,42,.36) !important;
}

.aiChatWidget .aiChatLauncher img {
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.26));
}

.aiChatWidget .aiThinkingText,
.aiChatWidget .aiBubbleBot.thinking {
  animation: aiThinkingPulse 1.2s ease-in-out infinite;
}

@keyframes aiThinkingPulse {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

/* Phase 53: accent-consistent dark/gray surfaces and stronger launcher */
html[data-theme="dark"] #content :where(.topbar, .panel, .card, .metricCard, .stats span, .journalStat, .compensationStat, .calendarCell, .calendarToolbar, .calendarWeek, .wealthTableWrap, .lawAnswerBox, .lawDirectResults, .lawDeepResults, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .item, .catalogRow, .formCard),
html[data-theme="office"] #content :where(.topbar, .panel, .card, .metricCard, .stats span, .journalStat, .compensationStat, .calendarCell, .calendarToolbar, .calendarWeek, .wealthTableWrap, .lawAnswerBox, .lawDirectResults, .lawDeepResults, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .item, .catalogRow, .formCard) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2, #16212b) 92%, #ffffff 3%), color-mix(in srgb, var(--bw-surface, #101820) 94%, #000000 6%)) !important;
  color: var(--bw-ink, #f7fbff) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line, #566b7f) 76%, var(--bw-accent, #1f6feb) 24%) !important;
}

html[data-theme="dark"] #content :where(button.primary, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .tabButton.active, .adminSubNav button.active),
html[data-theme="office"] #content :where(button.primary, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .tabButton.active, .adminSubNav button.active) {
  background: linear-gradient(135deg, var(--bw-accent-dark, #174ea6), var(--bw-accent, #1f6feb)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 82%, #ffffff 10%) !important;
  color: #ffffff !important;
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--bw-accent, #1f6feb) 32%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}

html[data-theme="dark"] #content :where(.metric, .stats strong, .journalStat strong, .compensationStat strong, .moneyCell, .calendarCell strong, .lawBook > summary b, .lawLibraryLaw > summary em.ready, .lawNormListHead span, .inlineBadge, .pill),
html[data-theme="office"] #content :where(.metric, .stats strong, .journalStat strong, .compensationStat strong, .moneyCell, .calendarCell strong, .lawBook > summary b, .lawLibraryLaw > summary em.ready, .lawNormListHead span, .inlineBadge, .pill) {
  color: color-mix(in srgb, var(--bw-accent, #1f6feb) 78%, #ffffff 22%) !important;
}

html[data-theme="dark"] #content :where(.calendarCell.todayCell, .calendarCell:hover),
html[data-theme="office"] #content :where(.calendarCell.todayCell, .calendarCell:hover) {
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-surface-2, #16212b)) !important;
  border-color: var(--bw-accent, #1f6feb) !important;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, transparent) !important;
}

html[data-theme="dark"] #content .calendarCell span,
html[data-theme="office"] #content .calendarCell span {
  border-left-color: var(--bw-accent, #1f6feb) !important;
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-surface-3, #1d2a35)) !important;
  color: var(--bw-ink, #f7fbff) !important;
}

.aiChatWidget .aiChatLauncher {
  width: 74px !important;
  height: 74px !important;
  transform: translateZ(0);
  backdrop-filter: blur(18px) saturate(1.2);
}

.aiChatWidget .aiChatLauncher span {
  text-shadow: 0 2px 8px rgba(0,0,0,.34);
}

html[data-theme="dark"] .aiChatWidget .aiBubbleUser,
html[data-theme="office"] .aiChatWidget .aiBubbleUser,
.aiChatWidget .aiBubbleUser {
  background: linear-gradient(135deg, var(--bw-accent-dark, #174ea6), var(--bw-accent, #1f6feb)) !important;
  color: #ffffff !important;
  box-shadow:
    0 18px 38px color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatBody,
html[data-theme="office"] .aiChatWidget .aiChatBody {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bw-chat-body, #080d13) 96%, #ffffff 2%), var(--bw-chat-body, #080d13)) !important;
}

/* Phase 54: final polish for readable dark/gray UI, larger chat and accent fidelity */
html[data-theme="dark"],
html[data-theme="office"] {
  color-scheme: dark;
}

html[data-theme="dark"] #content,
html[data-theme="office"] #content {
  color: var(--bw-ink, #f7fbff);
}

html[data-theme="dark"] #content :where(.topbar, .panel, .card, .stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat, .formCard, .item, .catalogRow, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .knowledgeThreadCard, .knowledgeCategoryCard),
html[data-theme="office"] #content :where(.topbar, .panel, .card, .stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat, .formCard, .item, .catalogRow, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .knowledgeThreadCard, .knowledgeCategoryCard) {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--bw-accent, #1f6feb) 7%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2, #18242d) 95%, #ffffff 3%), color-mix(in srgb, var(--bw-surface, #101820) 96%, #000000 4%)) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line, #526578) 70%, var(--bw-accent, #1f6feb) 30%) !important;
  color: var(--bw-ink, #f7fbff) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select),
html[data-theme="office"] #content :where(input, textarea, select) {
  background: color-mix(in srgb, var(--bw-input, #0c1219) 92%, #000000 8%) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line, #526578) 82%, var(--bw-accent, #1f6feb) 18%) !important;
  color: var(--bw-ink, #f7fbff) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] #content :where(input::placeholder, textarea::placeholder),
html[data-theme="office"] #content :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--bw-ink, #f7fbff) 56%, transparent) !important;
}

html[data-theme="dark"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active),
html[data-theme="office"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active) {
  background: linear-gradient(135deg, var(--bw-accent-dark, #174ea6), var(--bw-accent, #1f6feb)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 88%, #ffffff 10%) !important;
  color: #ffffff !important;
  box-shadow:
    0 16px 38px color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

html[data-theme="dark"] #content :where(.metricCard, .stats span, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat),
html[data-theme="office"] #content :where(.metricCard, .stats span, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat) {
  display: grid !important;
  align-content: center !important;
  gap: 10px !important;
  min-height: 98px !important;
  padding: 18px 22px !important;
}

html[data-theme="dark"] #content :where(.metric, .stats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong),
html[data-theme="office"] #content :where(.metric, .stats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong) {
  display: block !important;
  margin-top: 6px !important;
  color: color-mix(in srgb, var(--bw-accent, #1f6feb) 76%, #ffffff 24%) !important;
  font-size: clamp(24px, 1.9vw, 34px) !important;
  line-height: 1.05 !important;
}

html[data-theme="dark"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .calendarGrid, .calendarWeek, .calendarToolbar),
html[data-theme="office"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .calendarGrid, .calendarWeek, .calendarToolbar) {
  background: color-mix(in srgb, var(--bw-surface, #101820) 95%, #000000 5%) !important;
  color: var(--bw-ink, #f7fbff) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line, #526578) 72%, transparent) !important;
}

html[data-theme="dark"] #content .calendarCell,
html[data-theme="office"] #content .calendarCell {
  min-height: 116px !important;
}

html[data-theme="dark"] #content .calendarCell span,
html[data-theme="office"] #content .calendarCell span {
  border-left-color: var(--bw-accent, #1f6feb) !important;
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 20%, var(--bw-surface-3, #1d2a35)) !important;
  color: var(--bw-ink, #f7fbff) !important;
}

.aiChatWidget .aiChatPanel {
  width: min(760px, calc(100vw - 28px)) !important;
  height: min(940px, calc(100vh - 18px)) !important;
  border-radius: 30px !important;
  border: 1px solid color-mix(in srgb, var(--bw-chat-line, #b8c5d2) 78%, var(--bw-accent, #1f6feb) 22%) !important;
  box-shadow:
    0 44px 120px rgba(4,10,18,.34),
    0 22px 70px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(1180px, calc(100vw - 28px)) !important;
  height: min(970px, calc(100vh - 18px)) !important;
}

.aiChatWidget .aiChatBody {
  padding: 18px 20px !important;
}

.aiChatWidget .aiBubbleBot {
  max-width: min(86%, 760px) !important;
  padding: 16px 18px !important;
  font-size: 15px !important;
  line-height: 1.56 !important;
}

.aiChatWidget .aiAnswerText {
  gap: 7px !important;
}

.aiChatWidget .aiAnswerText h4 {
  font-size: 13px !important;
  margin: 8px 0 2px !important;
}

.aiChatWidget .aiAnswerText ul {
  margin: 0 !important;
  padding-left: 18px !important;
}

.aiChatWidget .aiComposer {
  padding: 14px 18px 16px !important;
}

.aiChatWidget .aiComposerBox {
  border-radius: 22px !important;
  padding: 16px 16px 12px !important;
}

.aiChatWidget .aiComposer textarea,
.aiChatWidget .aiSupportForm textarea,
.aiChatWidget .aiSupportReplyForm textarea {
  min-height: 172px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.aiChatWidget .aiChatLauncher {
  width: 86px !important;
  height: 86px !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow:
    0 46px 110px rgba(0,0,0,.52),
    0 24px 70px color-mix(in srgb, var(--bw-accent, #1f6feb) 48%, transparent),
    0 0 0 12px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -28px 48px rgba(15,23,42,.30) !important;
}

html[data-theme="dark"] .aiChatWidget,
html[data-theme="office"] .aiChatWidget {
  --bw-chat-body: color-mix(in srgb, var(--bw-page, #070b10) 86%, #000000 14%);
  --bw-chat-card: color-mix(in srgb, var(--bw-surface-2, #16212b) 92%, #ffffff 4%);
  --bw-chat-line: color-mix(in srgb, var(--bw-soft-line, #526578) 82%, var(--bw-accent, #1f6feb) 18%);
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatPanel, .aiChatBody),
html[data-theme="office"] .aiChatWidget :where(.aiChatPanel, .aiChatBody) {
  color: var(--bw-ink, #f7fbff) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs) {
  background: color-mix(in srgb, var(--bw-chat-card) 88%, #000000 12%) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-ink, #f7fbff) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) {
  background: var(--bw-chat-card) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-ink, #f7fbff) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) :where(p, span, small, strong, b, h3, h4, li, summary),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) :where(p, span, small, strong, b, h3, h4, li, summary) {
  color: var(--bw-ink, #f7fbff) !important;
}

html[data-theme="dark"] .aiChatWidget :where(textarea, input),
html[data-theme="office"] .aiChatWidget :where(textarea, input) {
  color: var(--bw-ink, #f7fbff) !important;
  caret-color: var(--bw-accent, #1f6feb) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button.active,
html[data-theme="office"] .aiChatWidget .aiChatTabs button.active {
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 28%, var(--bw-chat-card)) !important;
  color: #ffffff !important;
  box-shadow: inset 0 3px 0 var(--bw-accent, #1f6feb) !important;
}

/* Phase 56: premium surface consolidation. This is intentionally late in the file
   so old phase-specific color rules cannot leak green or low-contrast panels back in. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bw-page: #050910;
  --bw-surface: #0d1721;
  --bw-surface-2: #121e2a;
  --bw-surface-3: #182838;
  --bw-ink: #f7fbff;
  --bw-muted: #b5c3d1;
  --bw-line: #2d4358;
  --bw-soft-line: #42596f;
  --bw-input: #08111b;
  --bw-chat-panel: #0d1722;
  --bw-chat-header: #101b27;
  --bw-chat-body: #070c13;
  --bw-chat-card: #111e2b;
  --bw-chat-line: #3d5872;
}

html[data-theme="office"] {
  color-scheme: dark;
  --bw-page: #20262d;
  --bw-surface: #2a3139;
  --bw-surface-2: #333b45;
  --bw-surface-3: #3d4651;
  --bw-ink: #f8fafc;
  --bw-muted: #c7d0da;
  --bw-line: #4b5968;
  --bw-soft-line: #637282;
  --bw-input: #242b33;
  --bw-chat-panel: #2d3540;
  --bw-chat-header: #303945;
  --bw-chat-body: #232a33;
  --bw-chat-card: #343e49;
  --bw-chat-line: #708090;
}

html[data-theme="dark"][data-accent="teal"],
html[data-theme="office"][data-accent="teal"] {
  --bw-teal: #138a7e;
  --bw-teal-dark: #0b5f58;
  --bw-accent: #138a7e;
  --bw-accent-dark: #0b5f58;
  --bw-accent-soft: rgba(19,138,126,.16);
}

html[data-theme="dark"][data-accent="blue"],
html[data-theme="office"][data-accent="blue"] {
  --bw-teal: #1f6feb;
  --bw-teal-dark: #174ea6;
  --bw-accent: #1f6feb;
  --bw-accent-dark: #174ea6;
  --bw-accent-soft: rgba(31,111,235,.18);
}

html[data-theme="dark"][data-accent="red"],
html[data-theme="office"][data-accent="red"] {
  --bw-teal: #e43f5a;
  --bw-teal-dark: #a61f35;
  --bw-accent: #e43f5a;
  --bw-accent-dark: #a61f35;
  --bw-accent-soft: rgba(228,63,90,.18);
}

html[data-theme="dark"][data-accent="purple"],
html[data-theme="office"][data-accent="purple"] {
  --bw-teal: #8b5cf6;
  --bw-teal-dark: #5b35b1;
  --bw-accent: #8b5cf6;
  --bw-accent-dark: #5b35b1;
  --bw-accent-soft: rgba(139,92,246,.18);
}

html[data-theme="dark"][data-accent="gold"],
html[data-theme="office"][data-accent="gold"] {
  --bw-teal: #c27b08;
  --bw-teal-dark: #815205;
  --bw-accent: #c27b08;
  --bw-accent-dark: #815205;
  --bw-accent-soft: rgba(194,123,8,.18);
}

html[data-theme="dark"] body,
html[data-theme="office"] body {
  background:
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--bw-accent, #1f6feb) 13%, transparent), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(255,80,120,.08), transparent 36%),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-page) 92%, #ffffff 3%), var(--bw-page)) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .app,
html[data-theme="office"] .app {
  background: transparent !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="office"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 36%),
    color-mix(in srgb, var(--bw-page) 86%, #000000 14%) !important;
  border-right: 1px solid color-mix(in srgb, var(--bw-line) 72%, transparent) !important;
  box-shadow: 18px 0 80px rgba(0,0,0,.20) !important;
}

html[data-theme="dark"] .sidebar nav button,
html[data-theme="office"] .sidebar nav button {
  background: color-mix(in srgb, var(--bw-surface-2) 78%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--bw-line) 46%, transparent) !important;
  color: var(--bw-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="office"] .sidebar nav button.active {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bw-accent) 34%, var(--bw-surface-3)), color-mix(in srgb, var(--bw-surface-3) 94%, var(--bw-accent) 6%)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 58%, var(--bw-line) 42%) !important;
  box-shadow:
    inset 4px 0 0 var(--bw-accent),
    0 18px 34px rgba(0,0,0,.16) !important;
}

html[data-theme="dark"] #content :where(.topbar, .panel, .card, .formCard, .item, .stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat, .catalogRow, .detailPanel, .modalSheet, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .knowledgeThreadCard, .knowledgeCategoryCard, .knowledgeReply, .knowledgeComposerCard),
html[data-theme="office"] #content :where(.topbar, .panel, .card, .formCard, .item, .stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat, .catalogRow, .detailPanel, .modalSheet, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .knowledgeThreadCard, .knowledgeCategoryCard, .knowledgeReply, .knowledgeComposerCard) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    color-mix(in srgb, var(--bw-surface) 94%, #000000 6%) !important;
  border-color: color-mix(in srgb, var(--bw-line) 74%, var(--bw-accent) 12%) !important;
  color: var(--bw-ink) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

html[data-theme="dark"] #content .topbar,
html[data-theme="office"] #content .topbar {
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg, var(--bw-accent), #e74c78, #f4b73f) 1 !important;
}

html[data-theme="dark"] #content :where(input, textarea, select, .fileInputLabel),
html[data-theme="office"] #content :where(input, textarea, select, .fileInputLabel) {
  background: var(--bw-input) !important;
  color: var(--bw-ink) !important;
  border-color: color-mix(in srgb, var(--bw-soft-line) 80%, var(--bw-accent) 20%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 1px 0 rgba(255,255,255,.02) !important;
}

html[data-theme="dark"] #content :where(input::placeholder, textarea::placeholder),
html[data-theme="office"] #content :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--bw-ink) 52%, transparent) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .knowledgeCategoryCard.active),
html[data-theme="office"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .knowledgeCategoryCard.active) {
  background: linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 82%, #ffffff 18%) !important;
  color: #ffffff !important;
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--bw-accent) 32%, transparent),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}

html[data-theme="dark"] #content :where(.stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat),
html[data-theme="office"] #content :where(.stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat) {
  display: grid !important;
  align-content: center !important;
  min-height: 104px !important;
  gap: 12px !important;
  padding: 20px 24px !important;
}

html[data-theme="dark"] #content :where(.metric, .stats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong),
html[data-theme="office"] #content :where(.metric, .stats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong) {
  display: block !important;
  margin-top: 8px !important;
  color: color-mix(in srgb, var(--bw-accent) 78%, #ffffff 22%) !important;
  font-size: clamp(25px, 1.9vw, 34px) !important;
  line-height: 1.05 !important;
}

html[data-theme="dark"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .calendarGrid, .calendarToolbar),
html[data-theme="office"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .calendarGrid, .calendarToolbar) {
  background: color-mix(in srgb, var(--bw-surface-2) 82%, #000000 18%) !important;
  color: var(--bw-ink) !important;
  border-color: color-mix(in srgb, var(--bw-line) 74%, transparent) !important;
}

html[data-theme="dark"] #content .calendarCell,
html[data-theme="office"] #content .calendarCell {
  min-height: 118px !important;
  background: color-mix(in srgb, var(--bw-surface-2) 88%, #000000 12%) !important;
  color: var(--bw-ink) !important;
  border-color: color-mix(in srgb, var(--bw-line) 72%, transparent) !important;
}

html[data-theme="dark"] #content .calendarCell.todayCell,
html[data-theme="office"] #content .calendarCell.todayCell {
  background: color-mix(in srgb, var(--bw-accent) 24%, var(--bw-surface-2)) !important;
  border-color: var(--bw-accent) !important;
}

html[data-theme="dark"] #content .calendarCell span,
html[data-theme="office"] #content .calendarCell span,
html[data-theme="dark"] #content .inlineBadge,
html[data-theme="office"] #content .inlineBadge,
html[data-theme="dark"] #content .pill,
html[data-theme="office"] #content .pill {
  background: color-mix(in srgb, var(--bw-accent) 22%, var(--bw-surface-3)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 54%, transparent) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .aiChatWidget,
html[data-theme="office"] .aiChatWidget {
  color: var(--bw-ink) !important;
}

.aiChatWidget .aiChatPanel {
  width: min(820px, calc(100vw - 28px)) !important;
  height: min(950px, calc(100vh - 18px)) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(1220px, calc(100vw - 28px)) !important;
  height: min(980px, calc(100vh - 18px)) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background: var(--bw-chat-panel) !important;
  border-color: color-mix(in srgb, var(--bw-chat-line) 84%, var(--bw-accent) 16%) !important;
  color: var(--bw-ink) !important;
  box-shadow:
    0 48px 130px rgba(0,0,0,.54),
    0 24px 80px color-mix(in srgb, var(--bw-accent) 16%, transparent),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs) {
  background: var(--bw-chat-header) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatBody,
html[data-theme="office"] .aiChatWidget .aiChatBody {
  background:
    radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--bw-accent) 10%, transparent), transparent 32%),
    var(--bw-chat-body) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) {
  background: var(--bw-chat-card) !important;
  border-color: var(--bw-chat-line) !important;
  color: var(--bw-ink) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox, .aiAnswerText) :where(p, span, small, strong, b, h2, h3, h4, li, summary, label),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox, .aiAnswerText) :where(p, span, small, strong, b, h2, h3, h4, li, summary, label) {
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .aiChatWidget :where(textarea, input),
html[data-theme="office"] .aiChatWidget :where(textarea, input) {
  background: color-mix(in srgb, var(--bw-chat-body) 82%, #ffffff 4%) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-chat-line) !important;
  caret-color: var(--bw-accent) !important;
}

html[data-theme="dark"] .aiChatWidget :where(textarea::placeholder, input::placeholder),
html[data-theme="office"] .aiChatWidget :where(textarea::placeholder, input::placeholder) {
  color: color-mix(in srgb, var(--bw-ink) 58%, transparent) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .aiChatWidget .aiBubbleUser,
html[data-theme="office"] .aiChatWidget .aiBubbleUser,
.aiChatWidget .aiBubbleUser {
  background: linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  color: #ffffff !important;
  box-shadow:
    0 20px 48px color-mix(in srgb, var(--bw-accent) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,.26) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button,
html[data-theme="office"] .aiChatWidget .aiChatTabs button {
  background: color-mix(in srgb, var(--bw-chat-header) 92%, #ffffff 3%) !important;
  color: color-mix(in srgb, var(--bw-ink) 82%, transparent) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button.active,
html[data-theme="office"] .aiChatWidget .aiChatTabs button.active {
  background: color-mix(in srgb, var(--bw-accent) 30%, var(--bw-chat-header)) !important;
  color: #ffffff !important;
  box-shadow: inset 0 4px 0 var(--bw-accent) !important;
}

.aiChatWidget .aiComposerBox {
  border-radius: 24px !important;
}

.aiChatWidget .aiComposer textarea,
.aiChatWidget .aiSupportForm textarea,
.aiChatWidget .aiSupportReplyForm textarea {
  min-height: 184px !important;
  font-size: 16px !important;
}

.aiChatWidget .aiChatLauncher {
  width: 92px !important;
  height: 92px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.76)),
    linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow:
    0 42px 105px rgba(0,0,0,.52),
    0 0 0 13px color-mix(in srgb, var(--bw-accent) 18%, transparent),
    0 0 42px color-mix(in srgb, var(--bw-accent) 56%, transparent),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -30px 52px rgba(15,23,42,.28) !important;
}

.aiChatWidget .aiChatLauncher::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--bw-accent) 20%, transparent), transparent 66%);
  z-index: -1;
}

.aiChatWidget .aiChatLauncher:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 52px 120px rgba(0,0,0,.56),
    0 0 0 15px color-mix(in srgb, var(--bw-accent) 20%, transparent),
    0 0 56px color-mix(in srgb, var(--bw-accent) 64%, transparent),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -30px 52px rgba(15,23,42,.24) !important;
}

/* Phase 58: final shared premium layer for dark/gray themes, chat and dense work pages. */
html[data-theme="dark"],
html[data-theme="office"] {
  color-scheme: dark;
}

html[data-theme="dark"] {
  --bw-surface: #071113;
  --bw-surface-2: #0c191d;
  --bw-surface-3: #13242a;
  --bw-panel-glass: rgba(17, 31, 37, .92);
  --bw-input: #071316;
  --bw-line: rgba(151, 185, 198, .24);
  --bw-soft-line: rgba(151, 185, 198, .16);
  --bw-ink: #f7fbff;
  --bw-muted: #b8c9d3;
  --bw-chat-panel: #0a1218;
  --bw-chat-header: #121e2a;
  --bw-chat-body: #071018;
  --bw-chat-card: #162532;
  --bw-chat-line: rgba(167, 190, 207, .28);
}

html[data-theme="office"] {
  --bw-surface: #22282e;
  --bw-surface-2: #2b3239;
  --bw-surface-3: #363e47;
  --bw-panel-glass: rgba(43, 50, 57, .94);
  --bw-input: #1d2329;
  --bw-line: rgba(198, 209, 219, .24);
  --bw-soft-line: rgba(198, 209, 219, .16);
  --bw-ink: #f7fafc;
  --bw-muted: #c4ced8;
  --bw-chat-panel: #272e36;
  --bw-chat-header: #303843;
  --bw-chat-body: #222a32;
  --bw-chat-card: #323b45;
  --bw-chat-line: rgba(209, 219, 229, .30);
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody),
html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 72% 8%, color-mix(in srgb, var(--bw-accent) 12%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface) 92%, #ffffff 2%), var(--bw-surface)) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content,
html[data-theme="office"] #content {
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content :where(.topbar, .panel, .card, .formCard, .item, .stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat, .catalogRow, .catalogGroup, .formLibraryCard, .detailPanel, .inlineSubPanel, .simpleToolsPanel, .modalSheet, .modalCard, .userMenu, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .lawFastSearchPanel, .knowledgePost, .knowledgeFeedCard, .knowledgeThreadCard, .knowledgeCategoryCard, .knowledgeReply, .knowledgeComposerCard, .digitalFileArea, .wealthTableWrap, .statementSummaryCard, .bbbMeetingPanel, .bbbInviteBox, .bbbFrameWrap),
html[data-theme="office"] #content :where(.topbar, .panel, .card, .formCard, .item, .stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat, .catalogRow, .catalogGroup, .formLibraryCard, .detailPanel, .inlineSubPanel, .simpleToolsPanel, .modalSheet, .modalCard, .userMenu, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .lawFastSearchPanel, .knowledgePost, .knowledgeFeedCard, .knowledgeThreadCard, .knowledgeCategoryCard, .knowledgeReply, .knowledgeComposerCard, .digitalFileArea, .wealthTableWrap, .statementSummaryCard, .bbbMeetingPanel, .bbbInviteBox, .bbbFrameWrap) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015) 42%, transparent),
    var(--bw-panel-glass) !important;
  border: 1px solid color-mix(in srgb, var(--bw-line) 84%, var(--bw-accent) 16%) !important;
  color: var(--bw-ink) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] #content :where(h1, h2, h3, h4, strong, b, th, label),
html[data-theme="office"] #content :where(h1, h2, h3, h4, strong, b, th, label) {
  color: #ffffff !important;
}

html[data-theme="dark"] #content :where(p, span, small, li, td, .muted, .itemMain span),
html[data-theme="office"] #content :where(p, span, small, li, td, .muted, .itemMain span) {
  color: var(--bw-muted) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select, .fileInputLabel),
html[data-theme="office"] #content :where(input, textarea, select, .fileInputLabel) {
  background: var(--bw-input) !important;
  color: var(--bw-ink) !important;
  border-color: color-mix(in srgb, var(--bw-line) 84%, var(--bw-accent) 16%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 1px rgba(0,0,0,.10) !important;
}

html[data-theme="dark"] #content :where(input:focus, textarea:focus, select:focus),
html[data-theme="office"] #content :where(input:focus, textarea:focus, select:focus) {
  border-color: var(--bw-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bw-accent) 22%, transparent) !important;
  outline: 0 !important;
}

html[data-theme="dark"] #content :where(button, .buttonLink),
html[data-theme="office"] #content :where(button, .buttonLink) {
  background: color-mix(in srgb, var(--bw-surface-3) 90%, #ffffff 4%) !important;
  border-color: color-mix(in srgb, var(--bw-line) 82%, transparent) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .knowledgeCategoryCard.active),
html[data-theme="office"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .knowledgeCategoryCard.active) {
  background: linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 82%, #ffffff 18%) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #content :where(.stats, .cards, .three, .two, .journalStats, .wealthStats, .statementSummaryGrid),
html[data-theme="office"] #content :where(.stats, .cards, .three, .two, .journalStats, .wealthStats, .statementSummaryGrid) {
  gap: 18px !important;
}

html[data-theme="dark"] #content :where(.stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat),
html[data-theme="office"] #content :where(.stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat) {
  display: grid !important;
  align-content: center !important;
  justify-items: start !important;
  gap: 14px !important;
  min-height: 112px !important;
  padding: 22px 26px !important;
}

html[data-theme="dark"] #content :where(.metric, .stats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong),
html[data-theme="office"] #content :where(.metric, .stats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong) {
  color: color-mix(in srgb, var(--bw-accent) 78%, #ffffff 22%) !important;
  font-size: clamp(27px, 2vw, 36px) !important;
  line-height: 1 !important;
  margin-top: 0 !important;
}

html[data-theme="dark"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .tableWrap, .wealthTableWrap),
html[data-theme="office"] #content :where(table, thead, tbody, tr, th, td, .dataTable, .tableWrap, .wealthTableWrap) {
  background: color-mix(in srgb, var(--bw-surface-2) 90%, #000000 10%) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-soft-line) !important;
}

html[data-theme="dark"] #content :where(.calendarToolbar, .calendarWeek, .calendarGrid),
html[data-theme="office"] #content :where(.calendarToolbar, .calendarWeek, .calendarGrid) {
  background: transparent !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-soft-line) !important;
}

html[data-theme="dark"] #content .calendarCell,
html[data-theme="office"] #content .calendarCell {
  min-height: 120px !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2) 86%, #ffffff 5%), var(--bw-surface-2)) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-soft-line) !important;
}

html[data-theme="dark"] #content .calendarCell.todayCell,
html[data-theme="office"] #content .calendarCell.todayCell {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bw-accent) 34%, var(--bw-surface-2)), var(--bw-surface-2)) !important;
  border-color: var(--bw-accent) !important;
}

html[data-theme="dark"] #content .calendarCell span,
html[data-theme="office"] #content .calendarCell span {
  background: color-mix(in srgb, var(--bw-accent) 20%, var(--bw-surface-3)) !important;
  border-left-color: var(--bw-accent) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] .modalBackdrop,
html[data-theme="office"] .modalBackdrop {
  background: rgba(0,0,0,.66) !important;
  backdrop-filter: blur(7px) !important;
}

html[data-theme="dark"] .aiChatWidget,
html[data-theme="office"] .aiChatWidget {
  --bw-chat-text-strong: #ffffff;
  --bw-chat-text: var(--bw-ink);
  --bw-chat-muted: var(--bw-muted);
  color: var(--bw-chat-text) !important;
}

.aiChatWidget .aiChatPanel {
  width: min(860px, calc(100vw - 28px)) !important;
  height: min(940px, calc(100vh - 18px)) !important;
  border-radius: 30px !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(1240px, calc(100vw - 28px)) !important;
  height: min(980px, calc(100vh - 18px)) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background: var(--bw-chat-panel) !important;
  color: var(--bw-chat-text) !important;
  border: 1px solid color-mix(in srgb, var(--bw-chat-line) 82%, var(--bw-accent) 18%) !important;
  box-shadow:
    0 54px 140px rgba(0,0,0,.58),
    0 24px 84px color-mix(in srgb, var(--bw-accent) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs) {
  background: var(--bw-chat-header) !important;
  color: var(--bw-chat-text) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatBody,
html[data-theme="office"] .aiChatWidget .aiChatBody {
  background:
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--bw-accent) 12%, transparent), transparent 32%),
    var(--bw-chat-body) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) {
  background: var(--bw-chat-card) !important;
  color: var(--bw-chat-text) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox, .aiAnswerText) :where(p, span, small, strong, b, h2, h3, h4, li, summary, label),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiBotBubble, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox, .aiAnswerText) :where(p, span, small, strong, b, h2, h3, h4, li, summary, label) {
  color: inherit !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot strong, .aiBotBubble strong, .aiAnswerText h4),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot strong, .aiBotBubble strong, .aiAnswerText h4) {
  color: #ffffff !important;
}

html[data-theme="dark"] .aiChatWidget :where(textarea, input),
html[data-theme="office"] .aiChatWidget :where(textarea, input) {
  background: color-mix(in srgb, var(--bw-chat-body) 82%, #ffffff 5%) !important;
  color: #ffffff !important;
  border-color: var(--bw-chat-line) !important;
}

.aiChatWidget .aiComposer textarea,
.aiChatWidget .aiSupportForm textarea,
.aiChatWidget .aiSupportReplyForm textarea {
  min-height: 196px !important;
  line-height: 1.48 !important;
  font-size: 16px !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button,
html[data-theme="office"] .aiChatWidget .aiChatTabs button {
  background: var(--bw-chat-header) !important;
  color: color-mix(in srgb, var(--bw-chat-text) 78%, transparent) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatTabs button.active,
html[data-theme="office"] .aiChatWidget .aiChatTabs button.active {
  background: color-mix(in srgb, var(--bw-accent) 30%, var(--bw-chat-header)) !important;
  color: #ffffff !important;
  box-shadow: inset 0 4px 0 var(--bw-accent) !important;
}

.aiChatWidget .aiSendButton,
.aiChatWidget .aiComposer button.primary {
  background: linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  color: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent) 74%, #ffffff 26%) !important;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--bw-accent) 38%, transparent) !important;
}

.aiChatWidget .aiChatLauncher {
  isolation: isolate !important;
  box-shadow:
    0 42px 105px rgba(0,0,0,.58),
    0 0 0 13px color-mix(in srgb, var(--bw-accent) 22%, transparent),
    0 0 58px color-mix(in srgb, var(--bw-accent) 62%, transparent),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -30px 52px rgba(15,23,42,.28) !important;
}

.aiChatWidget .aiChatLauncher img {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 4px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.24) !important;
}

/* Phase 59: hard visual unification for dark/gray work surfaces. */
html[data-theme="dark"] .sidebar,
html[data-theme="office"] .sidebar {
  background:
    radial-gradient(circle at 40% 0%, color-mix(in srgb, var(--bw-accent) 18%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface) 88%, #000000 12%), #05090c 92%) !important;
  border-right: 1px solid color-mix(in srgb, var(--bw-line) 72%, transparent) !important;
  box-shadow: 18px 0 60px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .sidebar nav button,
html[data-theme="office"] .sidebar nav button {
  background: color-mix(in srgb, var(--bw-surface-2) 82%, transparent) !important;
  color: color-mix(in srgb, var(--bw-ink) 88%, transparent) !important;
  border: 1px solid transparent !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="dark"] .sidebar nav button:hover,
html[data-theme="office"] .sidebar nav button.active,
html[data-theme="office"] .sidebar nav button:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bw-accent) 24%, var(--bw-surface-3)), var(--bw-surface-3)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 48%, transparent) !important;
  color: #ffffff !important;
  box-shadow: inset 4px 0 0 var(--bw-accent), 0 16px 34px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] #content :where(.topbar, .panel, .card, .item, .metricCard, .stats span, .compactStats span, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat, .formCard, .catalogRow, .catalogGroup, .inlineSubPanel, .simpleToolsPanel, .compensationOverviewPanel, .compensationListPanel, .compensationFormPanel, .compensationPackagesPanel, .compensationToolsPanel, .compensationBatchPanel, .wealthListPanel, .wealthFormPanel, .journalListPanel, .journalFormPanel, .documentViewerFrame, .documentImageStage, .documentFileCard, .documentPdfPreview, .documentModalNote, .digitalFileArea, .fileAreaContent, .fileAreaNav, .calendarToolbar, .calendarCell, .calendarWeek, .wealthTableWrap, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .lawFastSearchPanel, .knowledgePost, .knowledgeFeedCard, .knowledgeThreadCard, .knowledgeCategoryCard, .knowledgeReply, .knowledgeComposerCard, .supportMailRow, .supportMailBody, .supportMailList, .supportMailDetail, .supportComposeForm, .bbbMeetingPanel, .bbbInviteBox, .bbbFrameWrap),
html[data-theme="office"] #content :where(.topbar, .panel, .card, .item, .metricCard, .stats span, .compactStats span, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat, .formCard, .catalogRow, .catalogGroup, .inlineSubPanel, .simpleToolsPanel, .compensationOverviewPanel, .compensationListPanel, .compensationFormPanel, .compensationPackagesPanel, .compensationToolsPanel, .compensationBatchPanel, .wealthListPanel, .wealthFormPanel, .journalListPanel, .journalFormPanel, .documentViewerFrame, .documentImageStage, .documentFileCard, .documentPdfPreview, .documentModalNote, .digitalFileArea, .fileAreaContent, .fileAreaNav, .calendarToolbar, .calendarCell, .calendarWeek, .wealthTableWrap, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .lawFastSearchPanel, .knowledgePost, .knowledgeFeedCard, .knowledgeThreadCard, .knowledgeCategoryCard, .knowledgeReply, .knowledgeComposerCard, .supportMailRow, .supportMailBody, .supportMailList, .supportMailDetail, .supportComposeForm, .bbbMeetingPanel, .bbbInviteBox, .bbbFrameWrap) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018) 42%, rgba(0,0,0,.08)),
    color-mix(in srgb, var(--bw-surface-2) 92%, #000000 8%) !important;
  border-color: color-mix(in srgb, var(--bw-line) 76%, var(--bw-accent) 24%) !important;
  color: var(--bw-ink) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .item, .metricCard, .stats span, .calendarCell, .wealthTableWrap, .formCard) :where(h1, h2, h3, h4, strong, b, label, th),
html[data-theme="office"] #content :where(.panel, .card, .item, .metricCard, .stats span, .calendarCell, .wealthTableWrap, .formCard) :where(h1, h2, h3, h4, strong, b, label, th) {
  color: #ffffff !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .item, .metricCard, .stats span, .calendarCell, .wealthTableWrap, .formCard) :where(p, span, small, li, td, .muted, .itemMain span),
html[data-theme="office"] #content :where(.panel, .card, .item, .metricCard, .stats span, .calendarCell, .wealthTableWrap, .formCard) :where(p, span, small, li, td, .muted, .itemMain span) {
  color: var(--bw-muted) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select, .fileInputLabel),
html[data-theme="office"] #content :where(input, textarea, select, .fileInputLabel) {
  background: color-mix(in srgb, var(--bw-input) 92%, #000000 8%) !important;
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--bw-line) 78%, var(--bw-accent) 22%) !important;
}

html[data-theme="dark"] #content :where(input::placeholder, textarea::placeholder),
html[data-theme="office"] #content :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--bw-muted) 74%, transparent) !important;
}

html[data-theme="dark"] #content :where(.stats, .cards, .three, .two, .journalStats, .compensationStats, .statementSummaryGrid),
html[data-theme="office"] #content :where(.stats, .cards, .three, .two, .journalStats, .compensationStats, .statementSummaryGrid) {
  gap: 20px !important;
}

html[data-theme="dark"] #content :where(.stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat),
html[data-theme="office"] #content :where(.stats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat) {
  min-height: 118px !important;
  padding: 24px 28px !important;
  align-content: center !important;
  gap: 16px !important;
}

html[data-theme="dark"] #content :where(.metric, .stats strong, .compactStats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong, .moneyCell),
html[data-theme="office"] #content :where(.metric, .stats strong, .compactStats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong, .moneyCell) {
  color: color-mix(in srgb, var(--bw-accent) 72%, #ffffff 28%) !important;
  text-shadow: 0 12px 34px color-mix(in srgb, var(--bw-accent) 24%, transparent) !important;
}

html[data-theme="dark"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .knowledgeCategoryCard.active),
html[data-theme="office"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active, .knowledgeCategoryCard.active) {
  background: linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 76%, #ffffff 24%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 46px color-mix(in srgb, var(--bw-accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

html[data-theme="dark"] #content :where(table, thead, tbody, tr, th, td, .wealthTable),
html[data-theme="office"] #content :where(table, thead, tbody, tr, th, td, .wealthTable) {
  background: color-mix(in srgb, var(--bw-surface-2) 94%, #000000 6%) !important;
  border-color: var(--bw-soft-line) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatLauncher,
html[data-theme="office"] .aiChatWidget .aiChatLauncher,
.aiChatWidget .aiChatLauncher {
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.95), rgba(255,255,255,.72) 18%, transparent 19%),
    linear-gradient(145deg, var(--bw-accent-dark), var(--bw-accent) 52%, color-mix(in srgb, var(--bw-accent) 48%, #101827)) !important;
  box-shadow:
    0 34px 86px rgba(0,0,0,.46),
    0 0 0 10px color-mix(in srgb, var(--bw-accent) 20%, transparent),
    0 0 42px color-mix(in srgb, var(--bw-accent) 54%, transparent),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -22px 34px rgba(0,0,0,.26) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader *, .aiChatBody *, .aiComposer *, .aiChatTabs *),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader *, .aiChatBody *, .aiComposer *, .aiChatTabs *) {
  text-shadow: none !important;
}

/* Phase 61: stable sidebar, readable dark surfaces, cleaner livechat. */
.sidebar {
  height: 100vh !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

.sidebar nav {
  max-height: calc(100vh - 170px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  scrollbar-width: thin;
}

.sidebar nav button[data-view="bbb"] {
  display: flex !important;
}

html[data-theme="dark"] #content,
html[data-theme="office"] #content {
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content :where(.stats span, .compactStats span, .calendarCell, .wealthTable th, .wealthTable td, table th, table td, .fileAreaNav button, .statusButton, .tabButton, .adminSubNav button),
html[data-theme="office"] #content :where(.stats span, .compactStats span, .calendarCell, .wealthTable th, .wealthTable td, table th, table td, .fileAreaNav button, .statusButton, .tabButton, .adminSubNav button) {
  background: color-mix(in srgb, var(--bw-surface-2) 88%, #000000 12%) !important;
  border-color: color-mix(in srgb, var(--bw-line) 72%, var(--bw-accent) 28%) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content :where(.stats span, .compactStats span, .calendarCell, .wealthTable th, .wealthTable td, table th, table td, .fileAreaNav button, .statusButton, .tabButton, .adminSubNav button) :where(strong, b, span, small, p),
html[data-theme="office"] #content :where(.stats span, .compactStats span, .calendarCell, .wealthTable th, .wealthTable td, table th, table td, .fileAreaNav button, .statusButton, .tabButton, .adminSubNav button) :where(strong, b, span, small, p) {
  color: inherit !important;
}

html[data-theme="dark"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active),
html[data-theme="office"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active) {
  background: linear-gradient(135deg, var(--bw-accent-dark), var(--bw-accent)) !important;
  color: #ffffff !important;
}

.aiChatWidget .aiChatBody {
  scroll-behavior: auto !important;
}

.aiChatWidget .aiChatPanel {
  width: min(910px, calc(100vw - 24px)) !important;
  height: min(960px, calc(100vh - 18px)) !important;
  border-radius: 30px !important;
  box-shadow:
    0 42px 110px rgba(5, 13, 22, .42),
    0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.aiChatWidget.expanded .aiChatPanel {
  width: min(1240px, calc(100vw - 24px)) !important;
  height: min(980px, calc(100vh - 18px)) !important;
}

.aiChatWidget .aiBubbleBot {
  max-width: min(720px, 88%) !important;
  padding: 20px 22px !important;
  line-height: 1.56 !important;
  font-size: 16px !important;
}

.aiChatWidget .aiBubbleUser {
  max-width: min(650px, 84%) !important;
  padding: 14px 18px !important;
  line-height: 1.45 !important;
}

.aiChatWidget .aiAnswerText h4 {
  margin-top: 14px !important;
}

.aiChatWidget .aiAnswerText h4:first-child {
  margin-top: 0 !important;
}

.aiChatWidget .aiComposer {
  padding: 16px 18px 18px !important;
}

.aiChatWidget .aiComposer textarea,
.aiChatWidget .aiSupportForm textarea,
.aiChatWidget .aiSupportReplyForm textarea {
  min-height: 214px !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 42%, rgba(0,0,0,.18)),
    var(--bw-chat-bg) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs) {
  background: color-mix(in srgb, var(--bw-chat-header) 94%, #000000 6%) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) {
  background: var(--bw-chat-card) !important;
  border: 1px solid var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) *,
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) * {
  color: inherit !important;
}

html[data-theme="dark"] .aiChatWidget .aiBubbleMeta,
html[data-theme="office"] .aiChatWidget .aiBubbleMeta,
html[data-theme="dark"] .aiChatWidget .muted,
html[data-theme="office"] .aiChatWidget .muted {
  color: color-mix(in srgb, var(--bw-chat-text) 72%, transparent) !important;
}

/* Phase 62: deeper premium dark/gray polish and stronger floating chat affordance. */
html[data-theme="dark"] {
  --bw-bg: #050a0f;
  --bw-surface: #0d171f;
  --bw-surface-2: #121f29;
  --bw-line: #2c4050;
  --bw-soft-line: rgba(130, 160, 184, .28);
  --bw-ink: #f6fbff;
  --bw-muted: #b7c6d4;
  --bw-chat-bg: #071019;
  --bw-chat-header: #101d28;
  --bw-chat-card: #152434;
  --bw-chat-line: rgba(150, 180, 205, .36);
  --bw-chat-text: #ffffff;
}

html[data-theme="office"] {
  --bw-bg: #14191f;
  --bw-surface: #222a33;
  --bw-surface-2: #2b343f;
  --bw-line: #50606d;
  --bw-soft-line: rgba(180, 195, 210, .25);
  --bw-ink: #f7fafc;
  --bw-muted: #c9d3dc;
  --bw-chat-bg: #1c242d;
  --bw-chat-header: #252e38;
  --bw-chat-card: #2f3a46;
  --bw-chat-line: rgba(202, 215, 226, .34);
  --bw-chat-text: #ffffff;
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody),
html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 280px),
    linear-gradient(125deg, var(--bw-bg), color-mix(in srgb, var(--bw-bg) 84%, var(--bw-accent) 16%)) !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="office"] .topbar {
  background:
    linear-gradient(90deg, var(--bw-accent), #ff4d72, #f6b73c) top left / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    color-mix(in srgb, var(--bw-surface) 94%, #000000 6%) !important;
  border: 1px solid var(--bw-soft-line) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .item, .metricCard, .stats span, .compactStats span, .calendarCell, .formCard, .catalogRow, .catalogGroup, .digitalFileArea, .wealthTableWrap, .lawBook, .lawLibraryLaw, .lawNormEntry, .knowledgePost, .knowledgeFeedCard, .knowledgeThreadCard),
html[data-theme="office"] #content :where(.panel, .card, .item, .metricCard, .stats span, .compactStats span, .calendarCell, .formCard, .catalogRow, .catalogGroup, .digitalFileArea, .wealthTableWrap, .lawBook, .lawLibraryLaw, .lawNormEntry, .knowledgePost, .knowledgeFeedCard, .knowledgeThreadCard) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)),
    color-mix(in srgb, var(--bw-surface) 92%, #000000 8%) !important;
  border: 1px solid var(--bw-soft-line) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] #content :where(.stats span, .compactStats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat),
html[data-theme="office"] #content :where(.stats span, .compactStats span, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat) {
  display: grid !important;
  align-content: center !important;
  gap: 12px !important;
  min-height: 98px !important;
  padding: 20px 22px !important;
}

html[data-theme="dark"] #content :where(.metric, .stats strong, .compactStats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong),
html[data-theme="office"] #content :where(.metric, .stats strong, .compactStats strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong) {
  display: block !important;
  margin-top: 2px !important;
  font-size: clamp(24px, 2vw, 34px) !important;
  line-height: 1 !important;
  color: var(--bw-accent) !important;
  text-shadow: 0 10px 32px color-mix(in srgb, var(--bw-accent) 26%, transparent) !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="office"] .sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 30%),
    linear-gradient(180deg, #061017 0%, #071218 52%, #05090d 100%) !important;
  border-right: 1px solid rgba(160,180,200,.16) !important;
  box-shadow: 18px 0 55px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .sidebar nav button,
html[data-theme="office"] .sidebar nav button {
  min-height: 42px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="office"] .sidebar nav button.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bw-accent) 32%, #111b24), color-mix(in srgb, var(--bw-accent-dark) 18%, #182431)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 58%, transparent) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.28), inset 4px 0 0 #ff4d72 !important;
}

.aiChatWidget .aiChatLauncher {
  width: 78px !important;
  height: 78px !important;
  transform: translateZ(0);
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 30px 80px rgba(0,0,0,.46),
    0 10px 24px color-mix(in srgb, var(--bw-accent) 28%, transparent),
    0 0 0 9px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -18px 28px rgba(0,0,0,.24) !important;
}

.aiChatWidget .aiChatLauncher:hover {
  transform: translateY(-2px) scale(1.02);
}

.aiChatWidget .aiChatPanel {
  border-radius: 32px !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  box-shadow:
    0 45px 120px rgba(0,0,0,.62),
    0 0 0 1px rgba(255,255,255,.10),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .aiChatWidget .aiComposerBox textarea,
html[data-theme="office"] .aiChatWidget .aiComposerBox textarea,
html[data-theme="dark"] .aiChatWidget .aiSupportForm textarea,
html[data-theme="office"] .aiChatWidget .aiSupportForm textarea {
  color: #ffffff !important;
  background: color-mix(in srgb, var(--bw-chat-bg) 78%, #ffffff 6%) !important;
  border-color: color-mix(in srgb, var(--bw-chat-line) 78%, var(--bw-accent) 22%) !important;
}

html[data-theme="dark"] .aiChatWidget .aiComposerBox textarea::placeholder,
html[data-theme="office"] .aiChatWidget .aiComposerBox textarea::placeholder,
html[data-theme="dark"] .aiChatWidget .aiSupportForm textarea::placeholder,
html[data-theme="office"] .aiChatWidget .aiSupportForm textarea::placeholder {
  color: rgba(255,255,255,.70) !important;
}

/* Phase 62.1: late accent lock, premium surfaces and consistent dark/gray contrast. */
html[data-theme="dark"],
html[data-theme="office"] {
  color-scheme: dark;
}

html[data-theme="dark"] #content :where(a, .buttonLink, .personFilterStatus, .lawDirectResult b, .lawDeepResult b, .moneyCell),
html[data-theme="office"] #content :where(a, .buttonLink, .personFilterStatus, .lawDirectResult b, .lawDeepResult b, .moneyCell),
html[data-theme="dark"] .aiChatWidget :where(.aiChatTabs button.active, .aiMessageUnreadDot, .aiBubbleMeta),
html[data-theme="office"] .aiChatWidget :where(.aiChatTabs button.active, .aiMessageUnreadDot, .aiBubbleMeta) {
  color: var(--bw-accent) !important;
}

html[data-theme="dark"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active),
html[data-theme="office"] #content :where(button.primary, .buttonLink.primary, .tabButton.active, .adminSubNav button.active, .journalTabs button.active, .wealthTabs button.active, .fileAreaNav button.active, .statusButton.active),
html[data-theme="dark"] .aiChatWidget :where(.aiBubbleUser, .aiSendButton, .aiSupportForm button.primary),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleUser, .aiSendButton, .aiSupportForm button.primary) {
  background: linear-gradient(135deg, var(--bw-accent), var(--bw-accent-dark)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 72%, #ffffff 8%) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--bw-accent) 28%, transparent) !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="office"] .sidebar nav button.active {
  box-shadow: 0 16px 38px rgba(0,0,0,.34), inset 4px 0 0 var(--bw-accent) !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .item, .metricCard, .stats span, .compactStats span, .calendarCell, .formCard, .catalogRow, .catalogGroup, .digitalFileArea, .wealthTableWrap, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .lawFastSearchPanel, .knowledgePost, .knowledgeFeedCard, .knowledgeThreadCard, .supportMailRow, .bbbMeetingPanel, .bbbInviteBox, .bbbFrameWrap),
html[data-theme="office"] #content :where(.panel, .card, .item, .metricCard, .stats span, .compactStats span, .calendarCell, .formCard, .catalogRow, .catalogGroup, .digitalFileArea, .wealthTableWrap, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult, .lawAnswerBox, .lawFastSearchPanel, .knowledgePost, .knowledgeFeedCard, .knowledgeThreadCard, .supportMailRow, .bbbMeetingPanel, .bbbInviteBox, .bbbFrameWrap) {
  border-top-color: color-mix(in srgb, var(--bw-accent) 36%, var(--bw-soft-line)) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select),
html[data-theme="office"] #content :where(input, textarea, select) {
  background: color-mix(in srgb, var(--bw-bg) 68%, #ffffff 5%) !important;
  color: var(--bw-ink) !important;
  border-color: color-mix(in srgb, var(--bw-line) 80%, var(--bw-accent) 20%) !important;
}

html[data-theme="dark"] #content :where(table, thead, tbody, tr, th, td, .wealthTable, .dataTable),
html[data-theme="office"] #content :where(table, thead, tbody, tr, th, td, .wealthTable, .dataTable) {
  background: color-mix(in srgb, var(--bw-surface) 88%, #000000 12%) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-soft-line) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatLauncher,
html[data-theme="office"] .aiChatWidget .aiChatLauncher {
  box-shadow:
    0 46px 120px rgba(0,0,0,.86),
    0 22px 58px color-mix(in srgb, var(--bw-accent) 52%, transparent),
    0 0 0 12px rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.70),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -18px 30px rgba(0,0,0,.38) !important;
}

/* Phase 62.2: final accent lock and stronger premium affordance. */
html[data-theme="dark"] .topbar,
html[data-theme="office"] .topbar {
  background:
    linear-gradient(90deg, var(--bw-accent), color-mix(in srgb, var(--bw-accent) 48%, #f59e0b)) top left / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.018)),
    color-mix(in srgb, var(--bw-surface) 94%, #000000 6%) !important;
}

html[data-theme="dark"] .sidebar nav button.active,
html[data-theme="office"] .sidebar nav button.active {
  box-shadow: 0 16px 38px rgba(0,0,0,.34), inset 4px 0 0 var(--bw-accent) !important;
}

.sidebar nav button[data-view="bbb"] {
  display: flex !important;
}

.aiChatWidget .aiChatLauncher {
  background:
    radial-gradient(circle at 35% 21%, rgba(255,255,255,.96), rgba(255,255,255,.74) 18%, transparent 19%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent) 92%, #ffffff 4%) 0%, var(--bw-accent-dark) 58%, #101827 132%) !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  box-shadow:
    0 54px 140px rgba(0,0,0,.76),
    0 28px 74px color-mix(in srgb, var(--bw-accent) 58%, transparent),
    0 0 0 12px color-mix(in srgb, var(--bw-accent) 20%, transparent),
    0 0 0 1px rgba(255,255,255,.70),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -20px 34px rgba(0,0,0,.38) !important;
}

.aiChatWidget :where(.aiBubbleUser, .aiSendButton, .aiSupportForm button.primary, .aiChatTabs button.active) {
  background: linear-gradient(135deg, var(--bw-accent), var(--bw-accent-dark)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 72%, #ffffff 14%) !important;
  color: #ffffff !important;
}

.aiChatWidget :where(.aiPlusButton, .aiChatResizeButton, .aiQuickPrompts button, .aiHelpCategories button) {
  color: var(--bw-accent) !important;
}

.aiChatWidget :where(.aiHelpHero, .aiMessageHero, .aiNewsHero) {
  background:
    radial-gradient(circle at 82% 8%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, var(--bw-accent), var(--bw-accent-dark)) !important;
  color: #ffffff !important;
  box-shadow: 0 22px 52px color-mix(in srgb, var(--bw-accent) 32%, transparent) !important;
}

/* Phase 62.3: hardened contrast pass for gray/dark mode and HD-style launcher. */
html[data-theme="dark"] #content,
html[data-theme="office"] #content {
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] #content :where(.two, .three, .cards, .journalWorkspace, .wealthWorkspace, .compensationBoard, .digitalFileLayout, .calendarGrid),
html[data-theme="office"] #content :where(.two, .three, .cards, .journalWorkspace, .wealthWorkspace, .compensationBoard, .digitalFileLayout, .calendarGrid) {
  gap: 18px !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .item, .catalogRow, .formCard, .calendarWeek, .calendarCell, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult),
html[data-theme="office"] #content :where(.panel, .card, .item, .catalogRow, .formCard, .calendarWeek, .calendarCell, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult) {
  background:
    linear-gradient(180deg, rgba(255,255,255,.070), rgba(255,255,255,.022)),
    color-mix(in srgb, var(--bw-surface) 88%, #000 12%) !important;
  border-color: color-mix(in srgb, var(--bw-line) 66%, var(--bw-accent) 16%) !important;
}

html[data-theme="dark"] #content :where(.panel, .card, .item, .catalogRow, .formCard, .calendarCell, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult) :where(h1,h2,h3,h4,strong,b,label,summary),
html[data-theme="office"] #content :where(.panel, .card, .item, .catalogRow, .formCard, .calendarCell, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawDirectResult, .lawDeepResult) :where(h1,h2,h3,h4,strong,b,label,summary) {
  color: #ffffff !important;
}

html[data-theme="dark"] #content :where(.muted, small, p, li, td, span),
html[data-theme="office"] #content :where(.muted, small, p, li, td, span) {
  color: color-mix(in srgb, var(--bw-ink) 78%, var(--bw-muted) 22%) !important;
}

html[data-theme="dark"] #content :where(input, textarea, select, .fileInputLabel),
html[data-theme="office"] #content :where(input, textarea, select, .fileInputLabel) {
  background: color-mix(in srgb, var(--bw-bg) 76%, #ffffff 7%) !important;
  border: 1px solid color-mix(in srgb, var(--bw-line) 76%, var(--bw-accent) 24%) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 8px 22px rgba(0,0,0,.12) !important;
}

html[data-theme="dark"] #content :where(input:focus, textarea:focus, select:focus),
html[data-theme="office"] #content :where(input:focus, textarea:focus, select:focus) {
  border-color: var(--bw-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.08) !important;
  outline: none !important;
}

html[data-theme="dark"] #content :where(table, .wealthTable, .dataTable),
html[data-theme="office"] #content :where(table, .wealthTable, .dataTable) {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border-radius: 12px !important;
}

html[data-theme="dark"] #content :where(th, td),
html[data-theme="office"] #content :where(th, td) {
  background: color-mix(in srgb, var(--bw-surface-2) 78%, #000 12%) !important;
  border-bottom: 1px solid var(--bw-soft-line) !important;
  color: #ffffff !important;
  padding: 12px 14px !important;
}

html[data-theme="dark"] #content :where(th),
html[data-theme="office"] #content :where(th) {
  color: color-mix(in srgb, #ffffff 86%, var(--bw-accent) 14%) !important;
  background: color-mix(in srgb, var(--bw-surface-2) 62%, var(--bw-accent) 12%) !important;
}

.aiChatWidget .aiChatLauncher img {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.35)) saturate(1.08) !important;
}

.aiChatWidget .aiChatLauncher {
  position: relative !important;
  overflow: hidden !important;
}

.aiChatWidget .aiChatLauncher::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: inherit;
  background: linear-gradient(145deg, rgba(255,255,255,.28), transparent 42%, rgba(255,255,255,.12));
  pointer-events: none;
}

.lawLibrarySearchHint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--bw-accent) 32%, var(--bw-line));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bw-accent-soft) 58%, #ffffff 20%), rgba(255,255,255,.72));
  color: var(--bw-ink);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.lawLibrarySearchHint strong {
  color: var(--bw-accent-dark);
}

.lawLibrarySearchHint span {
  color: var(--bw-muted);
  text-align: right;
}

html[data-theme="dark"] .lawLibrarySearchHint,
html[data-theme="office"] .lawLibrarySearchHint {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bw-accent) 24%, #101820), color-mix(in srgb, var(--bw-surface-2) 86%, #000 14%)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 42%, var(--bw-line)) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.30) !important;
}

html[data-theme="dark"] .lawLibrarySearchHint strong,
html[data-theme="office"] .lawLibrarySearchHint strong,
html[data-theme="dark"] .lawLibrarySearchHint span,
html[data-theme="office"] .lawLibrarySearchHint span {
  color: #ffffff !important;
}

/* Phase 62.4: final contrast and affordance lock for the livechat shell. */
.aiChatWidget.collapsed {
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, .34));
}

.aiChatWidget .aiChatLauncher {
  isolation: isolate;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.98) 0 15%, rgba(255,255,255,.45) 16%, transparent 28%),
    linear-gradient(150deg, color-mix(in srgb, var(--bw-accent) 96%, #ffffff 4%) 0%, var(--bw-accent-dark) 58%, #0b1220 140%) !important;
  border: 1px solid rgba(255,255,255,.86) !important;
  box-shadow:
    0 42px 110px rgba(0,0,0,.62),
    0 22px 60px color-mix(in srgb, var(--bw-accent) 44%, transparent),
    0 0 0 10px rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.78),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -22px 32px rgba(0,0,0,.34) !important;
}

.aiChatWidget .aiChatLauncher::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--bw-accent) 38%, transparent), transparent 64%);
  filter: blur(12px);
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bw-chat-bg) 94%, #ffffff 6%), var(--bw-chat-bg)) !important;
  border: 1px solid color-mix(in srgb, var(--bw-chat-line) 72%, #ffffff 10%) !important;
  color: var(--bw-chat-text) !important;
  box-shadow:
    0 52px 140px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,255,255,.12),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs),
html[data-theme="office"] .aiChatWidget :where(.aiChatHeader, .aiMessagesHeader, .aiComposer, .aiChatTabs) {
  background: color-mix(in srgb, var(--bw-chat-header) 92%, #000 8%) !important;
  border-color: var(--bw-chat-line) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox) {
  background: color-mix(in srgb, var(--bw-chat-card) 94%, #000 6%) !important;
  border: 1px solid var(--bw-chat-line) !important;
  color: var(--bw-chat-text) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox, .aiAnswerText) :where(p, span, small, strong, b, h3, h4, li, summary, label),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiWelcomeCard, .aiSupportCard, .aiNewsCard, .aiDecisionCard, .aiEmptyMessages, .aiPrivacy, .aiMessageRow, .aiMessageOpen, .aiComposerBox, .aiHelpList article, .aiNewsList article, .aiSupportThreadPanel, .aiSupportBubble, .aiSourceBox, .aiAnswerText) :where(p, span, small, strong, b, h3, h4, li, summary, label) {
  color: #ffffff !important;
}

html[data-theme="dark"] .aiChatWidget .aiComposerBox textarea,
html[data-theme="office"] .aiChatWidget .aiComposerBox textarea,
html[data-theme="dark"] .aiChatWidget .aiSupportForm textarea,
html[data-theme="office"] .aiChatWidget .aiSupportForm textarea {
  min-height: 132px !important;
  color: #ffffff !important;
  caret-color: #ffffff !important;
}

.aiChatWidget .aiComposerBox {
  border: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(95, 119, 139, .16),
    0 18px 42px rgba(15, 35, 45, .08) !important;
}

.aiChatWidget .aiComposerBox:focus-within {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bw-accent, #0f756e) 24%, transparent),
    0 20px 50px color-mix(in srgb, var(--bw-accent, #0f756e) 12%, transparent) !important;
}

.aiChatWidget .aiComposerBox textarea {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

html[data-theme="dark"] .aiChatWidget .aiComposerBox,
html[data-theme="office"] .aiChatWidget .aiComposerBox {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-chat-card, #111e2b) 92%, #ffffff 4%), color-mix(in srgb, var(--bw-chat-card, #111e2b) 82%, #000 18%)) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bw-chat-line, #3d5872) 52%, transparent),
    0 18px 46px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] .aiChatWidget .aiComposerBox:focus-within,
html[data-theme="office"] .aiChatWidget .aiComposerBox:focus-within {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--bw-accent, #1f6feb) 42%, var(--bw-chat-line, #3d5872) 58%),
    0 18px 48px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent) !important;
}

.aiDeleteConfirm {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 0 8px 12px 52px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fff7f8, #fff);
  border: 1px solid #ffd7dd;
  box-shadow: 0 16px 34px rgba(130, 28, 48, .10);
}

.aiDeleteConfirm strong,
.aiDeleteConfirm span {
  display: block;
}

.aiDeleteConfirm strong {
  color: #7c1d2b;
  font-size: 13px;
}

.aiDeleteConfirm span {
  color: #65717b;
  font-size: 12px;
  margin-top: 2px;
}

.aiDeleteConfirmActions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.aiDeleteConfirmActions button {
  min-height: 32px;
  border-radius: 999px;
  padding: 6px 11px;
  font-size: 12px;
}

.aiDeleteConfirmActions .danger {
  background: #e43f5a;
  border-color: #e43f5a;
  color: #fff;
}

html[data-theme="dark"] .aiDeleteConfirm,
html[data-theme="office"] .aiDeleteConfirm {
  background: linear-gradient(180deg, color-mix(in srgb, #4a1723 54%, var(--bw-chat-card, #111e2b) 46%), color-mix(in srgb, var(--bw-chat-card, #111e2b) 88%, #000 12%));
  border-color: color-mix(in srgb, #ff6b82 42%, var(--bw-chat-line, #3d5872) 58%);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

html[data-theme="dark"] .aiDeleteConfirm strong,
html[data-theme="office"] .aiDeleteConfirm strong {
  color: #ffdce2;
}

html[data-theme="dark"] .aiDeleteConfirm span,
html[data-theme="office"] .aiDeleteConfirm span {
  color: color-mix(in srgb, var(--bw-chat-text, #fff) 76%, transparent);
}

/* Phase 63: final design system lock for all app themes and modules. */
:root,
html[data-accent="teal"] {
  --bw-accent: #147c72;
  --bw-accent-strong: #0e625c;
  --bw-accent-soft: rgba(20, 124, 114, 0.14);
  --bw-accent-glow: rgba(20, 124, 114, 0.24);
  --bw-accent-text: #ffffff;
}

html[data-accent="blue"] {
  --bw-accent: #2473e8;
  --bw-accent-strong: #1559c7;
  --bw-accent-soft: rgba(36, 115, 232, 0.15);
  --bw-accent-glow: rgba(36, 115, 232, 0.3);
  --bw-accent-text: #ffffff;
}

html[data-accent="red"] {
  --bw-accent: #e6435d;
  --bw-accent-strong: #c62d46;
  --bw-accent-soft: rgba(230, 67, 93, 0.16);
  --bw-accent-glow: rgba(230, 67, 93, 0.28);
  --bw-accent-text: #ffffff;
}

html[data-accent="purple"] {
  --bw-accent: #8655e8;
  --bw-accent-strong: #6c3fd0;
  --bw-accent-soft: rgba(134, 85, 232, 0.16);
  --bw-accent-glow: rgba(134, 85, 232, 0.3);
  --bw-accent-text: #ffffff;
}

html[data-accent="gold"] {
  --bw-accent: #c48712;
  --bw-accent-strong: #9a6808;
  --bw-accent-soft: rgba(196, 135, 18, 0.18);
  --bw-accent-glow: rgba(196, 135, 18, 0.28);
  --bw-accent-text: #101820;
}

html[data-theme="light"] {
  --bw-page: #eef4f7;
  --bw-page-rgb: 238, 244, 247;
  --bw-surface: rgba(255, 255, 255, 0.96);
  --bw-surface-2: rgba(248, 251, 253, 0.98);
  --bw-surface-3: #ffffff;
  --bw-input: #ffffff;
  --bw-ink: #101923;
  --bw-muted: #526274;
  --bw-faint: #728195;
  --bw-line: rgba(88, 113, 135, 0.26);
  --bw-soft-line: rgba(88, 113, 135, 0.16);
  --bw-sidebar: linear-gradient(180deg, #08383d 0%, #0b3f43 48%, #082d32 100%);
  --bw-sidebar-item: rgba(255, 255, 255, 0.08);
  --bw-shadow: 0 22px 55px rgba(30, 45, 60, 0.13);
  --bw-soft-shadow: 0 12px 30px rgba(30, 45, 60, 0.1);
  --bw-chat-bg: #ffffff;
  --bw-chat-surface: #ffffff;
  --bw-chat-card: #f2f6f8;
  --bw-chat-text: #101923;
}

html[data-theme="dark"] {
  --bw-page: #060d11;
  --bw-page-rgb: 6, 13, 17;
  --bw-surface: rgba(15, 25, 32, 0.95);
  --bw-surface-2: rgba(20, 31, 40, 0.96);
  --bw-surface-3: #192633;
  --bw-input: #101a22;
  --bw-ink: #f5f8fb;
  --bw-muted: #c6d1dc;
  --bw-faint: #98a7b6;
  --bw-line: rgba(143, 166, 187, 0.32);
  --bw-soft-line: rgba(143, 166, 187, 0.17);
  --bw-sidebar: linear-gradient(180deg, #050b0f 0%, #071219 52%, #050b0f 100%);
  --bw-sidebar-item: rgba(255, 255, 255, 0.055);
  --bw-shadow: 0 28px 72px rgba(0, 0, 0, 0.42);
  --bw-soft-shadow: 0 16px 38px rgba(0, 0, 0, 0.32);
  --bw-chat-bg: #081018;
  --bw-chat-surface: #111d29;
  --bw-chat-card: #182532;
  --bw-chat-text: #f7fbff;
}

html[data-theme="office"] {
  --bw-page: #20262d;
  --bw-page-rgb: 32, 38, 45;
  --bw-surface: rgba(43, 50, 59, 0.95);
  --bw-surface-2: rgba(51, 59, 68, 0.96);
  --bw-surface-3: #38424d;
  --bw-input: #252d35;
  --bw-ink: #f4f7fa;
  --bw-muted: #c8d0d8;
  --bw-faint: #9ca8b4;
  --bw-line: rgba(177, 190, 203, 0.34);
  --bw-soft-line: rgba(177, 190, 203, 0.18);
  --bw-sidebar: linear-gradient(180deg, #161c22 0%, #1d242c 52%, #151b20 100%);
  --bw-sidebar-item: rgba(255, 255, 255, 0.06);
  --bw-shadow: 0 28px 68px rgba(0, 0, 0, 0.34);
  --bw-soft-shadow: 0 15px 36px rgba(0, 0, 0, 0.24);
  --bw-chat-bg: #222a33;
  --bw-chat-surface: #303943;
  --bw-chat-card: #3a4652;
  --bw-chat-text: #f8fbff;
}

html[data-theme="colorful"] {
  --bw-page: #f7f3ff;
  --bw-page-rgb: 247, 243, 255;
  --bw-surface: rgba(255, 255, 255, 0.96);
  --bw-surface-2: rgba(255, 250, 252, 0.96);
  --bw-surface-3: #ffffff;
  --bw-input: #ffffff;
  --bw-ink: #141723;
  --bw-muted: #556170;
  --bw-faint: #748094;
  --bw-line: rgba(107, 113, 145, 0.25);
  --bw-soft-line: rgba(107, 113, 145, 0.15);
  --bw-sidebar: linear-gradient(180deg, #10213d 0%, #28315f 48%, #172441 100%);
  --bw-sidebar-item: rgba(255, 255, 255, 0.08);
  --bw-shadow: 0 24px 62px rgba(51, 46, 91, 0.14);
  --bw-soft-shadow: 0 14px 36px rgba(51, 46, 91, 0.11);
  --bw-chat-bg: #ffffff;
  --bw-chat-surface: #ffffff;
  --bw-chat-card: #f5f2ff;
  --bw-chat-text: #141723;
}

body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 90% 12%, var(--bw-accent-soft), transparent 30rem),
    linear-gradient(135deg, rgba(var(--bw-page-rgb), 1), color-mix(in srgb, var(--bw-page) 88%, var(--bw-accent) 12%)) !important;
  color: var(--bw-ink) !important;
}

html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.controlCenterBody),
html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 88% 10%, var(--bw-accent-glow), transparent 28rem),
    linear-gradient(135deg, var(--bw-page), color-mix(in srgb, var(--bw-page) 86%, var(--bw-accent) 14%)) !important;
}

.sidebar,
body .sidebar {
  background: var(--bw-sidebar) !important;
  border-right: 1px solid var(--bw-soft-line) !important;
  box-shadow: 18px 0 44px rgba(0, 0, 0, 0.12) !important;
}

.sidebar nav a,
.sidebar .navButton,
.sidebar button,
.sidebarLink {
  background: var(--bw-sidebar-item) !important;
  border: 1px solid transparent !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
}

.sidebar nav a.active,
.sidebar nav a:hover,
.sidebar .navButton.active,
.sidebar .navButton:hover,
.sidebarLink.active,
.sidebarLink:hover {
  background: color-mix(in srgb, var(--bw-accent) 26%, rgba(255, 255, 255, 0.1)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 72%, transparent) !important;
  box-shadow: inset 4px 0 0 var(--bw-accent), 0 12px 26px rgba(0, 0, 0, 0.14) !important;
}

body .topbar,
#content .topbar,
#content > section:first-child,
.appHeader,
.pageHeader {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bw-surface) 94%, var(--bw-accent) 6%), var(--bw-surface)) !important;
  color: var(--bw-ink) !important;
  border: 1px solid var(--bw-line) !important;
  border-top: 4px solid var(--bw-accent) !important;
  box-shadow: var(--bw-soft-shadow) !important;
}

#content :where(.panel, .card, .item, .metricCard, .stats span, .compactStats span, .inlineSubPanel, .modalSheet, .addressEditor, .scopeEditor, .scopeRow, .streetSuggestionList, .initialDocumentsBox, .fileAreaNav, .fileAreaContent, .archiveFolder, .documentFileCard, .documentModalNote, .digitalFileArea, .calendarToolbar, .calendarWeek, .calendarCell, .wealthTableWrap, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat, .formCard, .catalogGroup, .catalogRow, .courtResult, .courtEmpty, .courtResultMeta, .bbbMeetingPanel, .bbbInviteBox, .bbbFrameWrap, .bbbFrameToolbar, .meetingSidePanel, .emailListPanel, .emailComposePanel, .emailServerPanel, .emailItem, .emailAttachmentList, .attachmentChoice, .warningBox, .knowledgeSide, .knowledgeCategoryList, .knowledgeCategoryCard, .knowledgePost, .knowledgeCompose, .forumAnswer, .lawBook, .lawLibraryLaw, .lawNormEntry, .lawAnswerBox, .lawWatchNotice, .lawImportStatus, .lawNormBody, .lawNormFull, .lawFullTextHead, .lawNormListHead, .lawNormSection) {
  background: var(--bw-surface) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-line) !important;
  box-shadow: var(--bw-soft-shadow) !important;
}

#content :where(.card, .panel, .metricCard, .stats span, .compactStats span, .formCard, .catalogGroup, .courtResult, .emailListPanel, .emailComposePanel, .emailServerPanel, .knowledgePost, .knowledgeCompose, .lawBook, .lawLibraryLaw, .lawNormEntry) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface) 94%, var(--bw-accent) 6%), var(--bw-surface)) !important;
}

html[data-theme="dark"] #content :where(.card, .panel, .metricCard, .stats span, .compactStats span, .formCard, .catalogGroup, .courtResult, .emailListPanel, .emailComposePanel, .emailServerPanel, .knowledgePost, .knowledgeCompose, .lawBook, .lawLibraryLaw, .lawNormEntry),
html[data-theme="office"] #content :where(.card, .panel, .metricCard, .stats span, .compactStats span, .formCard, .catalogGroup, .courtResult, .emailListPanel, .emailComposePanel, .emailServerPanel, .knowledgePost, .knowledgeCompose, .lawBook, .lawLibraryLaw, .lawNormEntry) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface) 88%, #ffffff 4%), var(--bw-surface)) !important;
}

#content :where(h1, h2, h3, h4, h5, label, legend, strong, b, th, summary, .title, .sectionTitle) {
  color: var(--bw-ink) !important;
}

#content :where(p, small, li, td, dd, .muted, .subtle, .helperText, .hint, .meta, .subtitle, .description) {
  color: var(--bw-muted) !important;
}

#content :where(input, textarea, select, .fileInputLabel, .searchBox input, .filterBox input) {
  background: var(--bw-input) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-line) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 0 rgba(0, 0, 0, 0.02) !important;
}

#content :where(input, textarea, select):focus {
  border-color: var(--bw-accent) !important;
  box-shadow: 0 0 0 3px var(--bw-accent-soft) !important;
  outline: none !important;
}

#content :where(input::placeholder, textarea::placeholder) {
  color: var(--bw-faint) !important;
  opacity: 1 !important;
}

#content input[type="checkbox"],
#content input[type="radio"] {
  accent-color: var(--bw-accent) !important;
  background: var(--bw-input) !important;
}

#content :where(table, thead, tbody, tr, th, td, .dataTable, .wealthTable, .legalTable) {
  border-color: var(--bw-soft-line) !important;
}

#content :where(thead, th, .tableHead, .calendarWeek) {
  background: color-mix(in srgb, var(--bw-surface-3) 84%, var(--bw-accent) 16%) !important;
  color: var(--bw-ink) !important;
}

#content :where(td, .calendarCell, .lawNormBody, .lawNormFull, .lawNormSection, .emailAttachmentList, .attachmentChoice, .scopeRow, .initialDocumentsBox) {
  background: var(--bw-surface-3) !important;
  color: var(--bw-ink) !important;
}

#content :where(.calendarCell.today, .active, .selected, .tab.active, .segmented button.active, .moduleTabs button.active, .settingsTab.active) {
  background: color-mix(in srgb, var(--bw-accent) 26%, var(--bw-surface-3)) !important;
  border-color: var(--bw-accent) !important;
  color: var(--bw-ink) !important;
}

#content :where(button, .button, .btn, .smallBtn, .miniBtn, .pillBtn, .tab, .moduleTabs button, .segmented button) {
  background: color-mix(in srgb, var(--bw-surface-3) 86%, var(--bw-accent) 14%) !important;
  color: var(--bw-ink) !important;
  border: 1px solid var(--bw-line) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}

#content :where(button:hover, .button:hover, .btn:hover, .smallBtn:hover, .miniBtn:hover, .pillBtn:hover, .tab:hover, .moduleTabs button:hover) {
  border-color: var(--bw-accent) !important;
  box-shadow: 0 12px 24px var(--bw-accent-soft) !important;
  transform: translateY(-1px);
}

#content :where(button.primary, .primary, .primaryBtn, .saveBtn, .cta, .activeAction, .actionPrimary),
.topbar :where(button.primary, .primary, .primaryBtn) {
  background: linear-gradient(135deg, var(--bw-accent), var(--bw-accent-strong)) !important;
  color: var(--bw-accent-text) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 76%, #ffffff 24%) !important;
  box-shadow: 0 14px 34px var(--bw-accent-glow) !important;
}

#content :where(.metricCard strong, .stats span strong, .compactStats span strong, .statValue, .bigNumber) {
  color: color-mix(in srgb, var(--bw-accent) 78%, var(--bw-ink) 22%) !important;
  display: inline-block;
  margin-top: 0.25rem;
}

#content :where(.emailAttachmentList, .attachmentChoice, .documentChoice, .mailAttachmentChoice) {
  background: var(--bw-surface-3) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-line) !important;
}

#content :where(.emailAttachmentList *, .attachmentChoice *, .documentChoice *, .mailAttachmentChoice *) {
  color: inherit !important;
}

#content :where(.bbbQr, .qrBox, .qrImage, .meetingQr) {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(20, 30, 40, 0.16) !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16) !important;
}

#content :where(.bbbFrameToolbar) {
  background: var(--bw-surface-3) !important;
}

#content :where(.bbbFrameWrap iframe, iframe.bbbFrame) {
  background: #ffffff !important;
}

.aiChatWidget,
.aiChatWidget * {
  scrollbar-color: var(--bw-accent) color-mix(in srgb, var(--bw-chat-surface) 82%, #000000 18%) !important;
}

.aiChatWidget .aiChatLauncher {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.16) 38%, transparent 62%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent) 38%, #ffffff 62%), var(--bw-accent)) !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent) 52%, #ffffff 48%) !important;
  box-shadow:
    0 22px 52px var(--bw-accent-glow),
    0 10px 24px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

.aiChatWidget .aiChatPanel {
  background:
    radial-gradient(circle at 82% 9%, var(--bw-accent-soft), transparent 18rem),
    var(--bw-chat-bg) !important;
  color: var(--bw-chat-text) !important;
  border: 0 !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.34),
    0 0 0 1px color-mix(in srgb, var(--bw-accent) 32%, transparent) !important;
}

.aiChatWidget :where(.aiChatHeader, .aiChatFooter, .aiChatTabs) {
  background: var(--bw-chat-surface) !important;
  color: var(--bw-chat-text) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 24%, var(--bw-line)) !important;
}

.aiChatWidget :where(.aiChatMessages, .aiChatHome, .aiChatHelp, .aiChatThreads) {
  background: var(--bw-chat-bg) !important;
  color: var(--bw-chat-text) !important;
}

.aiChatWidget :where(.aiChatWelcome, .aiBubbleAssistant, .aiHelpCard, .aiThreadItem, .aiSupportNotice, .aiPrivacyNotice, .aiThinkingBubble, .aiDeleteConfirm) {
  background: var(--bw-chat-card) !important;
  color: var(--bw-chat-text) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 28%, var(--bw-line)) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.16) !important;
}

.aiChatWidget :where(.aiBubbleUser, .aiSendButton, .aiChatTabs button.active) {
  background: linear-gradient(135deg, var(--bw-accent), var(--bw-accent-strong)) !important;
  color: var(--bw-accent-text) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 70%, #ffffff 30%) !important;
}

.aiChatWidget :where(.aiChatInputWrap, .aiChatComposer, .aiChatInput) {
  background: color-mix(in srgb, var(--bw-chat-card) 84%, #000000 6%) !important;
  color: var(--bw-chat-text) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 32%, var(--bw-line)) !important;
}

.aiChatWidget :where(.aiChatInput::placeholder, .aiChatMeta, .aiChatSub, .aiHelpTeaser, .aiThreadPreview) {
  color: color-mix(in srgb, var(--bw-chat-text) 68%, transparent) !important;
}

.aiChatWidget :where(.aiHelpCategory, .aiQuickChip, .aiChatGhostBtn, .aiChatIconBtn, .aiThreadDelete) {
  background: color-mix(in srgb, var(--bw-chat-card) 78%, var(--bw-accent) 12%) !important;
  color: var(--bw-chat-text) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 30%, var(--bw-line)) !important;
}

html[data-theme="light"] .aiChatWidget .aiChatPanel,
html[data-theme="colorful"] .aiChatWidget .aiChatPanel {
  box-shadow:
    0 34px 90px rgba(38, 47, 68, 0.22),
    0 0 0 1px rgba(48, 66, 84, 0.1) !important;
}

#content :where(.sideFillPanel, .pdfToolbar, .pdfStub, .controlWizardStep, .controlFormBand, .workflowStep, .easyStep, .easyChoice, .compensationSteps span) {
  background: var(--bw-surface) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-line) !important;
  box-shadow: var(--bw-soft-shadow) !important;
}

html[data-theme="dark"] #content :where(.sideFillPanel, .pdfToolbar, .pdfStub, .controlWizardStep, .controlFormBand, .workflowStep, .easyStep, .easyChoice, .compensationSteps span),
html[data-theme="office"] #content :where(.sideFillPanel, .pdfToolbar, .pdfStub, .controlWizardStep, .controlFormBand, .workflowStep, .easyStep, .easyChoice, .compensationSteps span) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2) 90%, #ffffff 4%), var(--bw-surface)) !important;
}

#content :where(.workflowStep span, .easyStepHead > span, .controlStepNo, .compensationSteps strong) {
  background: linear-gradient(135deg, var(--bw-accent), var(--bw-accent-strong)) !important;
  color: var(--bw-accent-text) !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent) 76%, #ffffff 24%) !important;
  box-shadow: 0 8px 18px var(--bw-accent-soft) !important;
  display: inline-grid !important;
  place-items: center !important;
  min-width: 1.85rem;
  min-height: 1.85rem;
  margin-right: 0.5rem;
}

#content :where(.compensationSteps span) {
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.55rem 0.8rem !important;
}

#content :where(.compensationSteps span strong) {
  margin-right: 0 !important;
  flex: 0 0 auto;
}

html[data-theme="dark"] #content .printSheetPanel,
html[data-theme="office"] #content .printSheetPanel {
  background: var(--bw-surface) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-line) !important;
}

#content .printSheet {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: rgba(20, 30, 40, 0.18) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18) !important;
}

#content .printSheet .empty {
  color: #4b5563 !important;
}

/* Phase 64: deep theme coverage for secondary module surfaces and nested detail panes. */
#content :where(
  .inboxTokenCard,
  .inboxTokenGrid,
  .supportMailBody,
  .supportMailFacts,
  .supportMailFacts div,
  .supportMailList,
  .supportMailDetail,
  .supportComposeForm,
  .customerMailRow,
  .emailThread,
  .mailAttachmentChoice,
  .documentChoice,
  .documentRow,
  .documentFile,
  .documentDropZone,
  .documentViewerPanel,
  .documentViewerFrame,
  .documentImageStage,
  .documentPdfPreview,
  .documentTextFrame,
  .documentModalFrame,
  .documentModalToolbar,
  .tableWrap,
  .dataTableWrap,
  .summaryCard,
  .statCard,
  .miniStat,
  .listCard,
  .sourceCard,
  .templateCard,
  .formLibraryCard,
  .threadCard,
  .modalCard,
  .simpleToolsPanel,
  .simplePanel,
  .detailPanel,
  .userMenu,
  .datePicker,
  .datePickerGrid,
  .datePickerGrid button,
  .stickyFormActions,
  .wealthListPanel,
  .wealthFormPanel,
  .wealthTable,
  .statementSummaryCard,
  .statementUploadPanel,
  .statementResultPanel,
  .consentPanel,
  .journalListPanel,
  .journalFormPanel,
  .compensationOverviewPanel,
  .compensationListPanel,
  .compensationFormPanel,
  .compensationPackagesPanel,
  .compensationToolsPanel,
  .compensationBatchPanel,
  .compactBreakdown,
  .pdfPages,
  .pdfNoFile,
  .officialFormsPanel,
  .officialFormsList,
  .officialFormsCard,
  .meetingAppointmentList,
  .meetingSidePanel,
  .meetingForm,
  .bookingLinkGrid,
  .availabilityList,
  .lawFastSearchPanel,
  .lawDirectResult,
  .lawDeepResult,
  .lawDirectResults,
  .lawDeepResults,
  .lawNormCard,
  .lawIndexCard,
  .lawNormList,
  .lawNormListItem,
  .knowledgeFeedCard,
  .knowledgeThreadCard,
  .knowledgeReply,
  .knowledgeComposerCard,
  .knowledgeComposer,
  .knowledgeThread,
  .knowledgeThreadList,
  .adminDesignPreview,
  .adminDesignCard,
  .settingsPanel,
  .settingsGroup,
  .tenantCard,
  .roleCard,
  .backupCard,
  .packageCard,
  .securityCard
) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface) 94%, var(--bw-accent) 6%), var(--bw-surface)) !important;
  color: var(--bw-ink) !important;
  border-color: var(--bw-line) !important;
  box-shadow: var(--bw-soft-shadow) !important;
}

html[data-theme="dark"] #content :where(
  .inboxTokenCard,
  .supportMailBody,
  .supportMailFacts div,
  .customerMailRow,
  .mailAttachmentChoice,
  .documentChoice,
  .documentRow,
  .documentFile,
  .documentDropZone,
  .documentViewerPanel,
  .documentViewerFrame,
  .documentImageStage,
  .documentPdfPreview,
  .documentTextFrame,
  .documentModalFrame,
  .tableWrap,
  .dataTableWrap,
  .summaryCard,
  .statCard,
  .miniStat,
  .listCard,
  .sourceCard,
  .templateCard,
  .formLibraryCard,
  .threadCard,
  .modalCard,
  .simpleToolsPanel,
  .detailPanel,
  .datePicker,
  .stickyFormActions,
  .wealthListPanel,
  .wealthFormPanel,
  .statementSummaryCard,
  .statementUploadPanel,
  .statementResultPanel,
  .consentPanel,
  .journalListPanel,
  .journalFormPanel,
  .compensationOverviewPanel,
  .compensationListPanel,
  .compensationFormPanel,
  .compensationPackagesPanel,
  .compensationToolsPanel,
  .compensationBatchPanel,
  .pdfPages,
  .pdfNoFile,
  .officialFormsPanel,
  .officialFormsList,
  .officialFormsCard,
  .meetingAppointmentList,
  .bookingLinkGrid,
  .availabilityList,
  .lawFastSearchPanel,
  .lawDirectResult,
  .lawDeepResult,
  .lawDirectResults,
  .lawDeepResults,
  .lawNormCard,
  .lawIndexCard,
  .lawNormList,
  .lawNormListItem,
  .knowledgeFeedCard,
  .knowledgeThreadCard,
  .knowledgeReply,
  .knowledgeComposerCard,
  .knowledgeComposer,
  .knowledgeThread,
  .knowledgeThreadList,
  .settingsPanel,
  .settingsGroup,
  .tenantCard,
  .roleCard,
  .backupCard,
  .packageCard,
  .securityCard
),
html[data-theme="office"] #content :where(
  .inboxTokenCard,
  .supportMailBody,
  .supportMailFacts div,
  .customerMailRow,
  .mailAttachmentChoice,
  .documentChoice,
  .documentRow,
  .documentFile,
  .documentDropZone,
  .documentViewerPanel,
  .documentViewerFrame,
  .documentImageStage,
  .documentPdfPreview,
  .documentTextFrame,
  .documentModalFrame,
  .tableWrap,
  .dataTableWrap,
  .summaryCard,
  .statCard,
  .miniStat,
  .listCard,
  .sourceCard,
  .templateCard,
  .formLibraryCard,
  .threadCard,
  .modalCard,
  .simpleToolsPanel,
  .detailPanel,
  .datePicker,
  .stickyFormActions,
  .wealthListPanel,
  .wealthFormPanel,
  .statementSummaryCard,
  .statementUploadPanel,
  .statementResultPanel,
  .consentPanel,
  .journalListPanel,
  .journalFormPanel,
  .compensationOverviewPanel,
  .compensationListPanel,
  .compensationFormPanel,
  .compensationPackagesPanel,
  .compensationToolsPanel,
  .compensationBatchPanel,
  .pdfPages,
  .pdfNoFile,
  .officialFormsPanel,
  .officialFormsList,
  .officialFormsCard,
  .meetingAppointmentList,
  .bookingLinkGrid,
  .availabilityList,
  .lawFastSearchPanel,
  .lawDirectResult,
  .lawDeepResult,
  .lawDirectResults,
  .lawDeepResults,
  .lawNormCard,
  .lawIndexCard,
  .lawNormList,
  .lawNormListItem,
  .knowledgeFeedCard,
  .knowledgeThreadCard,
  .knowledgeReply,
  .knowledgeComposerCard,
  .knowledgeComposer,
  .knowledgeThread,
  .knowledgeThreadList,
  .settingsPanel,
  .settingsGroup,
  .tenantCard,
  .roleCard,
  .backupCard,
  .packageCard,
  .securityCard
) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2) 91%, #ffffff 5%), var(--bw-surface)) !important;
}

#content :where(
  .inboxTokenCard *,
  .supportMailBody *,
  .supportMailFacts *,
  .customerMailRow *,
  .documentRow *,
  .documentChoice *,
  .mailAttachmentChoice *,
  .tableWrap *,
  .summaryCard *,
  .statCard *,
  .miniStat *,
  .sourceCard *,
  .templateCard *,
  .formLibraryCard *,
  .threadCard *,
  .modalCard *,
  .simpleToolsPanel *,
  .detailPanel *,
  .wealthListPanel *,
  .wealthFormPanel *,
  .journalListPanel *,
  .journalFormPanel *,
  .compensationOverviewPanel *,
  .compensationListPanel *,
  .compensationFormPanel *,
  .compensationPackagesPanel *,
  .compensationToolsPanel *,
  .meetingAppointmentList *,
  .bookingLinkGrid *,
  .availabilityList *,
  .lawFastSearchPanel *,
  .lawDirectResult *,
  .lawDeepResult *,
  .lawNormCard *,
  .lawIndexCard *,
  .lawNormListItem *,
  .knowledgeFeedCard *,
  .knowledgeThreadCard *,
  .knowledgeReply *,
  .knowledgeComposerCard *,
  .settingsPanel *,
  .settingsGroup *,
  .tenantCard *,
  .roleCard *,
  .backupCard *,
  .packageCard *,
  .securityCard *
) {
  color: inherit !important;
}

#content :where(.calendarCell.today, .calendarCell.todayCell) {
  background: color-mix(in srgb, var(--bw-accent) 26%, var(--bw-surface-3)) !important;
  border-color: var(--bw-accent) !important;
  color: var(--bw-ink) !important;
}

#content :where(.calendarCell.todayCell strong::after) {
  color: color-mix(in srgb, var(--bw-accent) 86%, var(--bw-ink) 14%) !important;
}

#content :where(.pdfPage, .printSheet, .dinLetter, .letterBody, .bbbFrameWrap iframe, iframe.bbbFrame) {
  color: #111827 !important;
}

html[data-theme="dark"] #content .printSheet,
html[data-theme="office"] #content .printSheet {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-3) 88%, #ffffff 4%), var(--bw-surface-2)) !important;
  color: var(--bw-ink) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 34%, var(--bw-line)) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] #content .printSheet .empty,
html[data-theme="office"] #content .printSheet .empty {
  color: var(--bw-muted) !important;
}

html[data-theme="dark"] #content .notice.success,
html[data-theme="office"] #content .notice.success {
  background: color-mix(in srgb, var(--bw-accent-soft) 58%, var(--bw-surface-2)) !important;
  border-color: color-mix(in srgb, var(--bw-accent) 38%, var(--bw-line)) !important;
  color: var(--bw-ink) !important;
}

/* BetreuWerk 2.0 theme hardening: all modules, chat and embedded tools stay readable. */
:root {
  --bw-on-accent: #ffffff;
  --bw-input-bg: #ffffff;
  --bw-input-ink: var(--bw-ink);
  --bw-panel-glow: 0 24px 80px color-mix(in srgb, var(--bw-accent, #1f6feb) 14%, transparent);
}

html[data-accent="gold"] {
  --bw-on-accent: #111827;
}

html[data-theme="dark"],
html[data-theme="office"] {
  --bw-input-bg: color-mix(in srgb, var(--bw-surface-3, #24313a) 84%, #0b1117 16%);
  --bw-input-ink: #f6fbff;
}

body:not(.authMode) {
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--bw-accent, #1f6feb) 14%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--bw-bg, #f3f6f8) 88%, #ffffff 12%), var(--bw-bg, #f3f6f8)) !important;
}

html[data-theme="dark"] body:not(.authMode),
html[data-theme="office"] body:not(.authMode) {
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent), transparent 34%),
    linear-gradient(145deg, #070e12 0%, color-mix(in srgb, var(--bw-bg, #0b1418) 82%, #142338 18%) 100%) !important;
}

#content :where(.topbar, .panel, .card, .statCard, .summaryCard, .miniStat, .metricCard, .tableWrap, .list, .item, .detailPanel, .simpleToolsPanel, .formPanel, .sectionPanel, .modalCard, .settingsPanel, .settingsGroup, .mailPanel, .mailComposePanel, .documentPanel, .documentChoice, .meetingPanel, .meetingCard, .bbbFrameWrap, .lawFastSearchPanel, .lawDirectResult, .lawDeepResult, .lawNormCard, .lawBook, .lawLibraryLaw, .knowledgeFeedCard, .knowledgeThreadCard, .knowledgeComposerCard, .knowledgeReply) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2, #ffffff) 94%, var(--bw-accent, #1f6feb) 6%), var(--bw-surface, #ffffff)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, var(--bw-line, #dbe3ea)) !important;
  color: var(--bw-ink, #111827) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, .06) !important;
}

html[data-theme="dark"] #content :where(.topbar, .panel, .card, .statCard, .summaryCard, .miniStat, .metricCard, .tableWrap, .list, .item, .detailPanel, .simpleToolsPanel, .formPanel, .sectionPanel, .modalCard, .settingsPanel, .settingsGroup, .mailPanel, .mailComposePanel, .documentPanel, .documentChoice, .meetingPanel, .meetingCard, .bbbFrameWrap, .lawFastSearchPanel, .lawDirectResult, .lawDeepResult, .lawNormCard, .lawBook, .lawLibraryLaw, .knowledgeFeedCard, .knowledgeThreadCard, .knowledgeComposerCard, .knowledgeReply),
html[data-theme="office"] #content :where(.topbar, .panel, .card, .statCard, .summaryCard, .miniStat, .metricCard, .tableWrap, .list, .item, .detailPanel, .simpleToolsPanel, .formPanel, .sectionPanel, .modalCard, .settingsPanel, .settingsGroup, .mailPanel, .mailComposePanel, .documentPanel, .documentChoice, .meetingPanel, .meetingCard, .bbbFrameWrap, .lawFastSearchPanel, .lawDirectResult, .lawDeepResult, .lawNormCard, .lawBook, .lawLibraryLaw, .knowledgeFeedCard, .knowledgeThreadCard, .knowledgeComposerCard, .knowledgeReply) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-3, #25313a) 88%, #ffffff 4%), var(--bw-surface-2, #17252b)) !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .22) !important;
}

#content :where(input, textarea, select, .inputLike, .fakeInput, .calendarCell, .documentChoice, .mailAttachmentChoice, .knowledgeReply, .lawNormEntry, .lawNormSection, .lawNormListHead, .customerMailRow, .supportMailBody, .supportMailFacts, .inboxTokenCard) {
  background: var(--bw-input-bg, #ffffff) !important;
  color: var(--bw-input-ink, var(--bw-ink, #111827)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 25%, var(--bw-line, #dbe3ea)) !important;
}

#content :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--bw-muted, #60717d) 82%, var(--bw-ink, #111827) 18%) !important;
  opacity: .9 !important;
}

html[data-theme="dark"] #content :where(input::placeholder, textarea::placeholder),
html[data-theme="office"] #content :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--bw-muted, #a7b3bd) 80%, #ffffff 20%) !important;
}

#content :where(button.primary, .primaryBtn, .btnPrimary, .buttonPrimary, .tabs button.active, .tabButton.active, .resourceTab.active, .journalTab.active, .wealthTab.active, .activePill, .selected, .navPill.active) {
  background: linear-gradient(135deg, var(--bw-accent, #1f6feb), color-mix(in srgb, var(--bw-accent, #1f6feb) 74%, #111827 26%)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 70%, #ffffff 12%) !important;
  color: var(--bw-on-accent, #ffffff) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--bw-accent, #1f6feb) 30%, transparent) !important;
}

#content :where(button, .btn, .pill, .chip, .tag, .badge) {
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, var(--bw-line, #dbe3ea)) !important;
}

#content :where(.statCard strong, .summaryCard strong, .miniStat strong, .metricCard strong, .statNumber, .metricValue, .dashboardMetric strong) {
  display: block !important;
  margin-top: 9px !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

#content :where(.statCard span, .summaryCard span, .miniStat span, .metricCard span) {
  display: block !important;
  margin-bottom: 4px !important;
}

#content :where(.bbbFrameWrap) {
  background: #0d2236 !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 36%, #0d2236) !important;
  overflow: hidden !important;
}

#content :where(.bbbFrameWrap iframe, iframe.bbbFrame) {
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: none !important;
}

.aiChatWidget .aiChatLauncher,
.aiChatLauncher {
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, #ffffff) !important;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, .94), rgba(255, 255, 255, .08) 28%, transparent 36%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 80%, #ffffff 20%), color-mix(in srgb, var(--bw-accent, #1f6feb) 55%, #111827 45%)) !important;
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--bw-accent, #1f6feb) 10%, transparent),
    0 24px 64px color-mix(in srgb, var(--bw-accent, #1f6feb) 28%, rgba(0, 0, 0, .22)),
    0 10px 22px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] .aiChatLauncher,
html[data-theme="office"] .aiChatLauncher {
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent),
    0 0 42px color-mix(in srgb, var(--bw-accent, #1f6feb) 42%, transparent),
    0 28px 76px rgba(0, 0, 0, .58) !important;
}

.aiChatWidget .aiChatPanel {
  border: 0 !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2, #ffffff) 96%, var(--bw-accent, #1f6feb) 4%), var(--bw-surface, #ffffff)) !important;
  color: var(--bw-ink, #111827) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .28),
    0 0 0 1px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-3, #26343c) 88%, var(--bw-accent, #1f6feb) 5%), var(--bw-surface, #101b22)) !important;
  color: #f6fbff !important;
  box-shadow:
    0 34px 100px rgba(0, 0, 0, .58),
    0 0 0 1px color-mix(in srgb, var(--bw-accent, #1f6feb) 28%, transparent) !important;
}

.aiChatWidget .aiChatBody {
  border: 0 !important;
  background:
    radial-gradient(circle at 74% 8%, color-mix(in srgb, var(--bw-accent, #1f6feb) 10%, transparent), transparent 30%),
    color-mix(in srgb, var(--bw-surface, #ffffff) 92%, var(--bw-accent, #1f6feb) 2%) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatBody,
html[data-theme="office"] .aiChatWidget .aiChatBody {
  background:
    radial-gradient(circle at 76% 8%, color-mix(in srgb, var(--bw-accent, #1f6feb) 16%, transparent), transparent 34%),
    #0b1219 !important;
}

.aiChatWidget :where(.aiBubbleBot, .aiHelpCard, .aiSupportCard, .aiMessageCard, .aiDeleteConfirmBox) {
  background: color-mix(in srgb, var(--bw-surface-3, #f2f5f7) 84%, #ffffff 16%) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, var(--bw-line, #dbe3ea)) !important;
  color: var(--bw-ink, #111827) !important;
}

html[data-theme="dark"] .aiChatWidget :where(.aiBubbleBot, .aiHelpCard, .aiSupportCard, .aiMessageCard, .aiDeleteConfirmBox),
html[data-theme="office"] .aiChatWidget :where(.aiBubbleBot, .aiHelpCard, .aiSupportCard, .aiMessageCard, .aiDeleteConfirmBox) {
  background: color-mix(in srgb, var(--bw-surface-3, #2d3942) 92%, #ffffff 3%) !important;
  color: #f8fbff !important;
}

.aiChatWidget .aiBubbleUser {
  background: linear-gradient(135deg, var(--bw-accent, #1f6feb), color-mix(in srgb, var(--bw-accent, #1f6feb) 78%, #111827 22%)) !important;
  color: var(--bw-on-accent, #ffffff) !important;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--bw-accent, #1f6feb) 28%, transparent) !important;
}

.aiChatWidget .aiComposer {
  background: color-mix(in srgb, var(--bw-surface, #ffffff) 94%, var(--bw-accent, #1f6feb) 3%) !important;
  border-top: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-line, #dbe3ea)) !important;
}

.aiChatWidget .aiComposerBox,
.aiChatWidget .aiComposer textarea,
.aiChatWidget .aiSupportForm textarea {
  background: var(--bw-input-bg, #ffffff) !important;
  color: var(--bw-input-ink, #111827) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 28%, var(--bw-line, #dbe3ea)) !important;
}

.aiChatWidget .aiChatTabs button.active {
  border-top-color: var(--bw-accent, #1f6feb) !important;
  color: var(--bw-accent, #1f6feb) !important;
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 10%, transparent) !important;
}

.aiChatWidget .aiSendButton,
.aiChatWidget .aiPlusButton {
  background: linear-gradient(135deg, var(--bw-accent, #1f6feb), color-mix(in srgb, var(--bw-accent, #1f6feb) 72%, #111827 28%)) !important;
  color: var(--bw-on-accent, #ffffff) !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--bw-accent, #1f6feb) 30%, transparent) !important;
}

@media print { .sidebar, .topbar .actions, nav, button { display: none !important; } body { display: block; background: #fff; } .app { padding: 0; } .panel, .card { border: 0; } }
@media print {
  @page { size: A4; margin: 0; }
  body.print-letter .sidebar,
  body.print-letter .topbar,
  body.print-letter #content > :not(.printSheetPanel):not(.officeWordShell) { display: none !important; }
  html,
  body.print-letter { width: 210mm; height: 297mm; overflow: hidden; }
  body.print-letter .app { padding: 0; }
  body.print-letter .officeWordShell { display: block !important; border: 0 !important; padding: 0 !important; margin: 0 !important; background: #fff !important; box-shadow: none !important; }
  body.print-letter .officeWordTop,
  body.print-letter .officeWordRibbon,
  body.print-letter .officeInspector,
  body.print-letter .officeInspectorResizer,
  body.print-letter .officeLibrary,
  body.print-letter .officePageStackHint,
  body.print-letter .officePageHint { display: none !important; }
  body.print-letter .officeWordWorkspace,
  body.print-letter .officeDocumentStage { display: block !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; }
  body.print-letter .printSheetPanel { border: 0; padding: 0; }
  body.print-letter .printSheetPanel h2 { display: none; }
  body.print-letter .printSheet { width: 210mm !important; max-width: none !important; height: 297mm !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; overflow: hidden !important; break-after: avoid; page-break-after: avoid; }
body.print-letter .dinLetter { width: 210mm !important; max-width: none !important; height: 297mm !important; min-height: 0 !important; margin: 0 !important; padding: 45mm 20mm 25mm 20mm; overflow: hidden !important; break-after: avoid; page-break-after: avoid; }
  body.print-letter .letterBody { min-height: 0; }
}

/* Phase 65: finaler UI- und Theme-Durchlauf fuer alle Module, Reiter und Chatflaechen. */
:root {
  --bw-radius-sm: 8px;
  --bw-radius-md: 12px;
  --bw-radius-lg: 18px;
  --bw-shadow-soft: 0 18px 55px rgba(15, 23, 42, .08);
  --bw-shadow-deep: 0 30px 90px rgba(15, 23, 42, .18);
  --bw-field-bg: var(--bw-input-bg, #ffffff);
  --bw-field-ink: var(--bw-input-ink, var(--bw-ink, #111827));
  --bw-soft-border: color-mix(in srgb, var(--bw-accent, #1f6feb) 26%, var(--bw-line, #dbe3ea));
}

html[data-theme="dark"],
html[data-theme="office"] {
  --bw-shadow-soft: 0 18px 55px rgba(0, 0, 0, .30);
  --bw-shadow-deep: 0 34px 110px rgba(0, 0, 0, .54);
  --bw-field-bg: color-mix(in srgb, var(--bw-surface-3, #2e3a43) 90%, #050a0d 10%);
  --bw-field-ink: #f7fbff;
}

body:not(.authMode) {
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: 0;
}

#content :where(h1, h2, h3, h4, h5, strong, b, label, summary, th, .sectionTitle, .cardTitle) {
  color: var(--bw-ink, #111827) !important;
}

#content :where(p, li, span, small, td, .muted, .hint, .description, .subtle, .meta, .helperText) {
  color: color-mix(in srgb, var(--bw-muted, #60717d) 86%, var(--bw-ink, #111827) 14%) !important;
}

html[data-theme="dark"] #content :where(h1, h2, h3, h4, h5, strong, b, label, summary, th, .sectionTitle, .cardTitle),
html[data-theme="office"] #content :where(h1, h2, h3, h4, h5, strong, b, label, summary, th, .sectionTitle, .cardTitle) {
  color: #f8fbff !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #content :where(p, li, span, small, td, .muted, .hint, .description, .subtle, .meta, .helperText),
html[data-theme="office"] #content :where(p, li, span, small, td, .muted, .hint, .description, .subtle, .meta, .helperText) {
  color: color-mix(in srgb, #dbe7f1 84%, var(--bw-muted, #a7b3bd) 16%) !important;
}

#content :where(
  .topbar,
  .panel,
  .card,
  .statCard,
  .summaryCard,
  .miniStat,
  .metricCard,
  .tableWrap,
  .list,
  .item,
  .detailPanel,
  .simpleToolsPanel,
  .formPanel,
  .sectionPanel,
  .modalCard,
  .modalSheet,
  .settingsPanel,
  .settingsGroup,
  .tenantCard,
  .roleCard,
  .backupCard,
  .packageCard,
  .securityCard,
  .mailPanel,
  .mailComposePanel,
  .emailListPanel,
  .emailComposePanel,
  .emailServerPanel,
  .emailItem,
  .documentPanel,
  .digitalFileArea,
  .fileAreaContent,
  .documentModalNote,
  .meetingPanel,
  .meetingCard,
  .meetingSidePanel,
  .bbbInviteBox,
  .calendarToolbar,
  .calendarWeek,
  .wealthTableWrap,
  .journalStat,
  .compensationStat,
  .wealthStat,
  .courtStat,
  .applicationStat,
  .documentStat,
  .deadlineStat,
  .calendarStat,
  .protocolStat,
  .formCard,
  .catalogGroup,
  .catalogRow,
  .courtResult,
  .courtEmpty,
  .inlineSubPanel,
  .knowledgeSide,
  .knowledgeCategoryList,
  .knowledgeCategoryCard,
  .knowledgePost,
  .knowledgeCompose,
  .knowledgeFeedCard,
  .knowledgeThreadCard,
  .knowledgeComposerCard,
  .knowledgeReply,
  .forumAnswer,
  .lawBook,
  .lawLibraryLaw,
  .lawNormEntry,
  .lawNormCard,
  .lawNormSection,
  .lawNormListHead,
  .lawAnswerBox,
  .lawWatchNotice,
  .lawImportStatus,
  .lawFastSearchPanel,
  .lawDirectResult,
  .lawDeepResult,
  .supportMailBody,
  .supportMailFacts,
  .customerMailRow,
  .inboxTokenCard
) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2, #ffffff) 94%, var(--bw-accent, #1f6feb) 6%), var(--bw-surface, #ffffff)) !important;
  border: 1px solid var(--bw-soft-border) !important;
  border-radius: var(--bw-radius-sm) !important;
  color: var(--bw-ink, #111827) !important;
  box-shadow: var(--bw-shadow-soft) !important;
}

html[data-theme="dark"] #content :where(
  .topbar,
  .panel,
  .card,
  .statCard,
  .summaryCard,
  .miniStat,
  .metricCard,
  .tableWrap,
  .list,
  .item,
  .detailPanel,
  .simpleToolsPanel,
  .formPanel,
  .sectionPanel,
  .modalCard,
  .modalSheet,
  .settingsPanel,
  .settingsGroup,
  .tenantCard,
  .roleCard,
  .backupCard,
  .packageCard,
  .securityCard,
  .mailPanel,
  .mailComposePanel,
  .emailListPanel,
  .emailComposePanel,
  .emailServerPanel,
  .emailItem,
  .documentPanel,
  .digitalFileArea,
  .fileAreaContent,
  .documentModalNote,
  .meetingPanel,
  .meetingCard,
  .meetingSidePanel,
  .bbbInviteBox,
  .calendarToolbar,
  .calendarWeek,
  .wealthTableWrap,
  .journalStat,
  .compensationStat,
  .wealthStat,
  .courtStat,
  .applicationStat,
  .documentStat,
  .deadlineStat,
  .calendarStat,
  .protocolStat,
  .formCard,
  .catalogGroup,
  .catalogRow,
  .courtResult,
  .courtEmpty,
  .inlineSubPanel,
  .knowledgeSide,
  .knowledgeCategoryList,
  .knowledgeCategoryCard,
  .knowledgePost,
  .knowledgeCompose,
  .knowledgeFeedCard,
  .knowledgeThreadCard,
  .knowledgeComposerCard,
  .knowledgeReply,
  .forumAnswer,
  .lawBook,
  .lawLibraryLaw,
  .lawNormEntry,
  .lawNormCard,
  .lawNormSection,
  .lawNormListHead,
  .lawAnswerBox,
  .lawWatchNotice,
  .lawImportStatus,
  .lawFastSearchPanel,
  .lawDirectResult,
  .lawDeepResult,
  .supportMailBody,
  .supportMailFacts,
  .customerMailRow,
  .inboxTokenCard
),
html[data-theme="office"] #content :where(
  .topbar,
  .panel,
  .card,
  .statCard,
  .summaryCard,
  .miniStat,
  .metricCard,
  .tableWrap,
  .list,
  .item,
  .detailPanel,
  .simpleToolsPanel,
  .formPanel,
  .sectionPanel,
  .modalCard,
  .modalSheet,
  .settingsPanel,
  .settingsGroup,
  .tenantCard,
  .roleCard,
  .backupCard,
  .packageCard,
  .securityCard,
  .mailPanel,
  .mailComposePanel,
  .emailListPanel,
  .emailComposePanel,
  .emailServerPanel,
  .emailItem,
  .documentPanel,
  .digitalFileArea,
  .fileAreaContent,
  .documentModalNote,
  .meetingPanel,
  .meetingCard,
  .meetingSidePanel,
  .bbbInviteBox,
  .calendarToolbar,
  .calendarWeek,
  .wealthTableWrap,
  .journalStat,
  .compensationStat,
  .wealthStat,
  .courtStat,
  .applicationStat,
  .documentStat,
  .deadlineStat,
  .calendarStat,
  .protocolStat,
  .formCard,
  .catalogGroup,
  .catalogRow,
  .courtResult,
  .courtEmpty,
  .inlineSubPanel,
  .knowledgeSide,
  .knowledgeCategoryList,
  .knowledgeCategoryCard,
  .knowledgePost,
  .knowledgeCompose,
  .knowledgeFeedCard,
  .knowledgeThreadCard,
  .knowledgeComposerCard,
  .knowledgeReply,
  .forumAnswer,
  .lawBook,
  .lawLibraryLaw,
  .lawNormEntry,
  .lawNormCard,
  .lawNormSection,
  .lawNormListHead,
  .lawAnswerBox,
  .lawWatchNotice,
  .lawImportStatus,
  .lawFastSearchPanel,
  .lawDirectResult,
  .lawDeepResult,
  .supportMailBody,
  .supportMailFacts,
  .customerMailRow,
  .inboxTokenCard
) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-3, #2d3740) 90%, #ffffff 3%), var(--bw-surface-2, #1b252d)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, rgba(255, 255, 255, .18)) !important;
  color: #f8fbff !important;
  box-shadow: var(--bw-shadow-soft) !important;
}

#content :where(.two, .three, .grid, .cards, .formGrid, .resourceGrid, .stats, .compactStats, .toolbar, .actions, .formActions) {
  gap: 14px !important;
}

#content :where(input, textarea, select, .inputLike, .fakeInput, .searchInput, .dateInput, .selectLike) {
  background: var(--bw-field-bg) !important;
  color: var(--bw-field-ink) !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 30%, var(--bw-line, #dbe3ea)) !important;
  border-radius: var(--bw-radius-sm) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04) !important;
}

#content :where(input, textarea, select):focus {
  border-color: var(--bw-accent, #1f6feb) !important;
  outline: 3px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent) !important;
}

#content :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--bw-muted, #60717d) 78%, var(--bw-ink, #111827) 22%) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #content :where(input::placeholder, textarea::placeholder),
html[data-theme="office"] #content :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, #dbe7f1 72%, transparent) !important;
}

#content input[type="file"] {
  background: var(--bw-field-bg) !important;
  color: var(--bw-field-ink) !important;
}

#content input[type="file"]::file-selector-button {
  border: 1px solid var(--bw-soft-border) !important;
  border-radius: var(--bw-radius-sm) !important;
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 16%, var(--bw-surface-2, #ffffff)) !important;
  color: var(--bw-ink, #111827) !important;
  font-weight: 800 !important;
}

html[data-theme="dark"] #content input[type="file"]::file-selector-button,
html[data-theme="office"] #content input[type="file"]::file-selector-button {
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 26%, #111827) !important;
  color: #ffffff !important;
}

#content :where(
  .attachmentChoice,
  .mailAttachmentChoice,
  .emailAttachmentList,
  .documentChoice,
  .documentFileCard,
  .archiveFolder,
  .fileInputRow,
  .streetSuggestionList,
  .scopeEditor,
  .scopeRow,
  .initialDocumentsBox,
  .courtWorkflowStep,
  .choiceRow,
  .checkRow,
  .checkboxRow,
  .listRow,
  .resultRow,
  .calendarCell,
  .lawNormBody,
  .lawNormFull,
  .lawFullTextHead,
  .lawIndexCard,
  .knowledgeComposer,
  .knowledgeThread,
  .knowledgeThreadList
) {
  background: color-mix(in srgb, var(--bw-field-bg) 92%, var(--bw-accent, #1f6feb) 4%) !important;
  color: var(--bw-field-ink) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, var(--bw-line, #dbe3ea)) !important;
}

#content :where(.statCard, .summaryCard, .miniStat, .metricCard, .journalStat, .compensationStat, .wealthStat, .courtStat, .applicationStat, .documentStat, .deadlineStat, .calendarStat, .protocolStat) {
  min-height: 92px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding: 18px 20px !important;
}

#content :where(.statCard strong, .summaryCard strong, .miniStat strong, .metricCard strong, .journalStat strong, .compensationStat strong, .wealthStat strong, .courtStat strong, .applicationStat strong, .documentStat strong, .deadlineStat strong, .calendarStat strong, .protocolStat strong, .statNumber, .metricValue, .dashboardMetric strong) {
  display: block !important;
  margin-top: 12px !important;
  line-height: 1 !important;
  font-size: clamp(1.55rem, 1.8vw, 2.15rem) !important;
  color: var(--bw-accent, #1f6feb) !important;
}

#content :where(.statCard span, .summaryCard span, .miniStat span, .metricCard span, .journalStat span, .compensationStat span, .wealthStat span, .courtStat span, .applicationStat span, .documentStat span, .deadlineStat span, .calendarStat span, .protocolStat span) {
  display: block !important;
  margin-bottom: 6px !important;
}

#content :where(button.primary, .primaryBtn, .btnPrimary, .buttonPrimary, .tabs button.active, .tabButton.active, .resourceTab.active, .journalTab.active, .wealthTab.active, .activePill, .selected, .navPill.active) {
  background:
    linear-gradient(135deg, var(--bw-accent, #1f6feb), color-mix(in srgb, var(--bw-accent, #1f6feb) 72%, #111827 28%)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 70%, #ffffff 12%) !important;
  color: var(--bw-on-accent, #ffffff) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, transparent) !important;
}

#content :where(button:not(.primary), .btn, .pill, .chip, .tag, .badge) {
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, var(--bw-line, #dbe3ea)) !important;
}

.sidebar nav button,
.sidebar nav a {
  border-radius: var(--bw-radius-sm) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.sidebar nav button.active,
.sidebar nav a.active {
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 26%, var(--bw-surface-3, #102027)) !important;
  border-color: var(--bw-accent, #1f6feb) !important;
  color: #ffffff !important;
  box-shadow:
    inset 4px 0 0 var(--bw-accent, #1f6feb),
    0 12px 30px color-mix(in srgb, var(--bw-accent, #1f6feb) 20%, transparent) !important;
}

#content :where(.bbbFrameWrap) {
  background: #0d2236 !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 42%, #0d2236) !important;
  overflow: hidden !important;
}

#content :where(.bbbFrameWrap iframe, iframe.bbbFrame, .bbbQr, .qrBox, .pdfPage, .printSheet, .dinLetter, .letterBody) {
  background: #ffffff !important;
  color: #111827 !important;
}

#content :where(.bbbFrameToolbar) {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #dbe3ea !important;
}

.aiChatLauncher,
.aiChatWidget .aiChatLauncher {
  width: 78px !important;
  height: 78px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 42%, #ffffff 30%) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .16) 30%, transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 74%, #ffffff 26%), color-mix(in srgb, var(--bw-accent, #1f6feb) 56%, #111827 44%)) !important;
  box-shadow:
    0 0 0 12px color-mix(in srgb, var(--bw-accent, #1f6feb) 11%, transparent),
    0 0 48px color-mix(in srgb, var(--bw-accent, #1f6feb) 38%, transparent),
    0 28px 76px rgba(0, 0, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .45) !important;
}

html[data-theme="dark"] .aiChatLauncher,
html[data-theme="office"] .aiChatLauncher {
  box-shadow:
    0 0 0 13px color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent),
    0 0 58px color-mix(in srgb, var(--bw-accent, #1f6feb) 50%, transparent),
    0 30px 86px rgba(0, 0, 0, .70),
    inset 0 1px 0 rgba(255, 255, 255, .44) !important;
}

.aiChatWidget .aiChatPanel {
  border: 0 !important;
  outline: 0 !important;
  background:
    radial-gradient(circle at 52% 0%, color-mix(in srgb, var(--bw-accent, #1f6feb) 9%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-2, #ffffff) 96%, var(--bw-accent, #1f6feb) 4%), var(--bw-surface, #ffffff)) !important;
  color: var(--bw-ink, #111827) !important;
  box-shadow:
    0 34px 110px rgba(15, 23, 42, .28),
    0 0 0 1px color-mix(in srgb, var(--bw-accent, #1f6feb) 16%, transparent) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatPanel,
html[data-theme="office"] .aiChatWidget .aiChatPanel {
  background:
    radial-gradient(circle at 60% 0%, color-mix(in srgb, var(--bw-accent, #1f6feb) 20%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-3, #26323c) 88%, var(--bw-accent, #1f6feb) 5%), #0a1118) !important;
  color: #f8fbff !important;
  box-shadow:
    0 36px 120px rgba(0, 0, 0, .66),
    0 0 0 1px color-mix(in srgb, var(--bw-accent, #1f6feb) 28%, transparent) !important;
}

.aiChatWidget :where(.aiChatHeader, .aiChatBody, .aiChatMessages, .aiChatFooter, .aiComposer) {
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 20%, var(--bw-line, #dbe3ea)) !important;
}

.aiChatWidget .aiChatBody {
  border: 0 !important;
  background:
    radial-gradient(circle at 74% 10%, color-mix(in srgb, var(--bw-accent, #1f6feb) 12%, transparent), transparent 32%),
    color-mix(in srgb, var(--bw-surface, #ffffff) 94%, var(--bw-accent, #1f6feb) 2%) !important;
}

html[data-theme="dark"] .aiChatWidget .aiChatBody,
html[data-theme="office"] .aiChatWidget .aiChatBody {
  background:
    radial-gradient(circle at 76% 8%, color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, transparent), transparent 36%),
    #081018 !important;
}

.aiChatWidget :where(
  .aiBubbleBot,
  .aiWelcomeCard,
  .aiSupportCard,
  .aiNewsCard,
  .aiDecisionCard,
  .aiFeatureCard,
  .aiEmptyMessages,
  .aiPrivacy,
  .aiMessageRow,
  .aiMessageOpen,
  .aiComposerBox,
  .aiSourceBox,
  .aiSourceList,
  .aiDeleteConfirm,
  .aiActionMenu,
  .aiHelpHero,
  .aiHelpList article,
  .aiNewsList article,
  .aiSupportThreadPanel,
  .aiSupportBubble,
  .aiSelectedChat,
  .aiContinueActions
) {
  background: color-mix(in srgb, var(--bw-surface-3, #f1f5f8) 84%, #ffffff 16%) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, var(--bw-line, #dbe3ea)) !important;
  color: var(--bw-ink, #111827) !important;
}

html[data-theme="dark"] .aiChatWidget :where(
  .aiBubbleBot,
  .aiWelcomeCard,
  .aiSupportCard,
  .aiNewsCard,
  .aiDecisionCard,
  .aiFeatureCard,
  .aiEmptyMessages,
  .aiPrivacy,
  .aiMessageRow,
  .aiMessageOpen,
  .aiComposerBox,
  .aiSourceBox,
  .aiSourceList,
  .aiDeleteConfirm,
  .aiActionMenu,
  .aiHelpHero,
  .aiHelpList article,
  .aiNewsList article,
  .aiSupportThreadPanel,
  .aiSupportBubble,
  .aiSelectedChat,
  .aiContinueActions
),
html[data-theme="office"] .aiChatWidget :where(
  .aiBubbleBot,
  .aiWelcomeCard,
  .aiSupportCard,
  .aiNewsCard,
  .aiDecisionCard,
  .aiFeatureCard,
  .aiEmptyMessages,
  .aiPrivacy,
  .aiMessageRow,
  .aiMessageOpen,
  .aiComposerBox,
  .aiSourceBox,
  .aiSourceList,
  .aiDeleteConfirm,
  .aiActionMenu,
  .aiHelpHero,
  .aiHelpList article,
  .aiNewsList article,
  .aiSupportThreadPanel,
  .aiSupportBubble,
  .aiSelectedChat,
  .aiContinueActions
) {
  background: color-mix(in srgb, var(--bw-surface-3, #2f3b45) 92%, #ffffff 3%) !important;
  color: #f8fbff !important;
}

.aiChatWidget :where(.aiBubbleBot *, .aiWelcomeCard *, .aiSupportCard *, .aiNewsCard *, .aiDecisionCard *, .aiFeatureCard *, .aiHelpList article *, .aiMessageRow *, .aiMessageOpen *, .aiDeleteConfirm *) {
  color: inherit !important;
}

.aiChatWidget .aiBubbleUser {
  background: linear-gradient(135deg, var(--bw-accent, #1f6feb), color-mix(in srgb, var(--bw-accent, #1f6feb) 76%, #111827 24%)) !important;
  color: var(--bw-on-accent, #ffffff) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--bw-accent, #1f6feb) 32%, transparent) !important;
}

.aiChatWidget .aiComposerBox,
.aiChatWidget .aiComposer textarea,
.aiChatWidget .aiSupportForm textarea {
  background: color-mix(in srgb, var(--bw-field-bg) 92%, transparent) !important;
  color: var(--bw-field-ink) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 30%, var(--bw-line, #dbe3ea)) !important;
}

.aiChatWidget .aiComposer textarea::placeholder,
.aiChatWidget .aiSupportForm textarea::placeholder {
  color: color-mix(in srgb, var(--bw-field-ink) 58%, transparent) !important;
}

.aiChatWidget :where(.aiSendButton, .aiPlusButton, .aiQuickPills button, .aiChatTabs button.active, .aiFeatureStrip button.active) {
  background: linear-gradient(135deg, var(--bw-accent, #1f6feb), color-mix(in srgb, var(--bw-accent, #1f6feb) 72%, #111827 28%)) !important;
  color: var(--bw-on-accent, #ffffff) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 70%, #ffffff 12%) !important;
}

.aiChatWidget .aiDeleteConfirm {
  margin: 10px 0 0 !important;
  padding: 12px !important;
  border-radius: var(--bw-radius-md) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .18) !important;
}

.aiChatWidget .aiDeleteConfirm .danger,
.aiChatWidget [data-ai-confirm-delete-chat],
.aiChatWidget [data-ai-confirm-delete-support] {
  background: linear-gradient(135deg, #dc2626, #991b1b) !important;
  color: #ffffff !important;
  border-color: #ef4444 !important;
}

/* Control Center 2.0: operator surface follows the BetreuWerk app themes. */
html[data-control-center="true"] {
  --cc-accent: var(--bw-accent, #1f6feb);
  --cc-accent-strong: var(--bw-accent-strong, #1557c0);
  --cc-on-accent: var(--bw-on-accent, #ffffff);
  --cc-ink: #172033;
  --cc-muted: #637188;
  --cc-soft: #eef5ff;
  --cc-surface: rgba(255, 255, 255, .88);
  --cc-surface-strong: rgba(255, 255, 255, .96);
  --cc-surface-2: rgba(245, 249, 255, .86);
  --cc-field: rgba(255, 255, 255, .94);
  --cc-field-ink: #132033;
  --cc-line: rgba(91, 125, 183, .28);
  --cc-line-strong: rgba(31, 111, 235, .42);
  --cc-shadow: 0 28px 80px rgba(31, 51, 98, .16);
  --cc-shadow-soft: 0 16px 42px rgba(31, 51, 98, .11);
  --cc-radius: 10px;
  --cc-radius-sm: 8px;
}

html[data-theme="colorful"][data-control-center="true"] {
  --cc-page-bg:
    radial-gradient(circle at 18% 8%, rgba(47, 111, 235, .20), transparent 32rem),
    radial-gradient(circle at 78% 4%, rgba(255, 74, 104, .16), transparent 34rem),
    radial-gradient(circle at 94% 82%, rgba(255, 197, 61, .20), transparent 26rem),
    linear-gradient(135deg, #edf4ff 0%, #f5f2ff 46%, #fff7f0 100%);
}

html[data-theme="light"][data-control-center="true"] {
  --cc-page-bg:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--cc-accent) 16%, transparent), transparent 30rem),
    linear-gradient(135deg, #f3f7fb 0%, #ffffff 52%, #eef5ff 100%);
}

html[data-theme="dark"][data-control-center="true"],
html[data-theme="office"][data-control-center="true"] {
  --cc-ink: #f6f9ff;
  --cc-muted: #b9c6d9;
  --cc-soft: rgba(96, 165, 250, .14);
  --cc-surface: rgba(31, 41, 52, .88);
  --cc-surface-strong: rgba(38, 48, 60, .96);
  --cc-surface-2: rgba(24, 34, 44, .9);
  --cc-field: rgba(18, 27, 36, .92);
  --cc-field-ink: #f7fbff;
  --cc-line: rgba(130, 156, 190, .28);
  --cc-line-strong: rgba(96, 165, 250, .46);
  --cc-shadow: 0 28px 86px rgba(0, 0, 0, .32);
  --cc-shadow-soft: 0 16px 46px rgba(0, 0, 0, .24);
  --cc-page-bg:
    radial-gradient(circle at 12% 2%, color-mix(in srgb, var(--cc-accent) 24%, transparent), transparent 34rem),
    radial-gradient(circle at 86% 2%, rgba(255, 197, 61, .12), transparent 28rem),
    linear-gradient(145deg, #0a151d 0%, #122335 54%, #111827 100%);
}

body.controlCenterBody {
  display: block !important;
  min-height: 100vh;
  color: var(--cc-ink);
  background: var(--cc-page-bg, linear-gradient(135deg, #edf4ff, #fff7f0)) !important;
  letter-spacing: 0;
}

body.controlCenterBody::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .42), transparent 28%, rgba(255, 255, 255, .26)),
    radial-gradient(circle at 50% 105%, color-mix(in srgb, var(--cc-accent) 10%, transparent), transparent 44rem);
}

html[data-theme="dark"] body.controlCenterBody::before,
html[data-theme="office"] body.controlCenterBody::before {
  background:
    radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--cc-accent) 18%, transparent), transparent 42rem),
    linear-gradient(90deg, rgba(255, 255, 255, .03), transparent 28%, rgba(255, 255, 255, .04));
}

body.controlCenterBody .controlShell {
  width: min(1840px, calc(100vw - 44px));
  margin: 0 auto;
  padding: 24px 0 42px;
  display: grid;
  gap: 18px;
}

body.controlCenterBody .controlHero,
body.controlCenterBody :where(.panel, .loginCard, .controlLoginLogoCard, .inlineSubPanel, .controlStat, .controlFold, .controlChoiceCard, .controlCustomerTableRow, .billingCustomerCard, .billingInvoiceRow, .billingDetailGrid div, .billingPositionRow, .supportMailList, .supportMailDetail, .supportComposeForm, .supportMailRow, .supportMailFacts div, .supportMailBody, .controlMailList, .controlMailTableRow, .controlInquiryRow, .controlInquiryFacts div, .officialFormsControlList, .officialFormsTableRow, .controlWizardStep, .controlCustomerItem, .controlCustomerRow, .supportMessage, .mirrorStatusPanel) {
  color: var(--cc-ink);
  border: 1px solid var(--cc-line) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cc-surface-strong) 94%, var(--cc-accent) 6%), var(--cc-surface)) !important;
  box-shadow: var(--cc-shadow-soft);
  backdrop-filter: blur(18px);
}

body.controlCenterBody .controlHero {
  position: relative;
  overflow: hidden;
  min-height: 142px;
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: center;
  border-radius: var(--cc-radius);
  padding: 22px 24px;
  box-shadow: var(--cc-shadow);
}

body.controlCenterBody .controlHero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cc-accent), #7c5cff 38%, #ff4b63 68%, #ffc53d);
}

body.controlCenterBody .controlHero::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: min(520px, 42vw);
  height: 240px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-accent) 14%, transparent);
  filter: blur(32px);
  pointer-events: none;
}

body.controlCenterBody .controlHero > div {
  position: relative;
  z-index: 1;
}

body.controlCenterBody .controlHero img {
  width: clamp(180px, 18vw, 260px);
  max-width: 100%;
  border-radius: 10px;
  background: rgba(255, 255, 255, .9);
  padding: 12px;
  box-shadow: 0 18px 46px rgba(31, 51, 98, .12);
}

body.controlCenterBody .controlHero p {
  max-width: 820px;
  margin-top: 10px;
  color: var(--cc-muted) !important;
  font-weight: 760;
  line-height: 1.45;
}

body.controlCenterBody .controlUserBox {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  padding: 7px 8px 7px 14px;
  border: 1px solid var(--cc-line) !important;
  background: color-mix(in srgb, var(--cc-surface-strong) 92%, var(--cc-accent) 8%) !important;
  box-shadow: 0 18px 38px rgba(31, 51, 98, .12);
}

body.controlCenterBody .controlUserBox strong,
body.controlCenterBody :where(h1, h2, h3, h4, label, strong, b, th, summary) {
  color: var(--cc-ink) !important;
}

body.controlCenterBody .controlUserBox span,
body.controlCenterBody :where(.muted, small, p, li, td, dt, .controlCustomerName span, .controlCustomerName small, .supportMailRow span, .supportMailRow small, .controlInquiryRow span, .controlInquiryRow small, .officialFormsTableRow small, .controlWizardPill span) {
  color: var(--cc-muted) !important;
}

body.controlCenterBody h1 {
  font-size: clamp(34px, 3.4vw, 54px);
  line-height: 1;
  letter-spacing: 0;
}

body.controlCenterBody h2 {
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.12;
}

body.controlCenterBody .panel {
  border-radius: var(--cc-radius);
  padding: 18px;
}

body.controlCenterBody .controlSectionNav {
  position: sticky;
  top: 14px;
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}

body.controlCenterBody .controlSectionNav button {
  flex: 0 0 auto;
  min-width: 126px;
  min-height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc-surface-2) 86%, var(--cc-accent) 8%) !important;
  border-color: var(--cc-line) !important;
  color: var(--cc-ink) !important;
  box-shadow: none;
}

body.controlCenterBody .controlSectionNav button.active,
body.controlCenterBody :where(button.primary, .buttonLink.primary, .controlSectionNav button.active, .controlWizardPill.active, .statusButtonGroup .statusButton.active, .controlCustomerTableRow.active button[data-open-customer], .controlCustomerItem.active, .controlCustomerRow.active .controlCustomerSelect, .supportMailRow.active, .billingInvoiceRow.active, .controlInquiryRow.active) {
  background: linear-gradient(135deg, var(--cc-accent), color-mix(in srgb, var(--cc-accent) 70%, #132033 30%)) !important;
  border-color: color-mix(in srgb, var(--cc-accent) 72%, #ffffff 18%) !important;
  color: var(--cc-on-accent) !important;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--cc-accent) 28%, transparent);
}

body.controlCenterBody :where(.controlSectionNav button.active *, .controlWizardPill.active *, .statusButtonGroup .statusButton.active *, .supportMailRow.active *, .billingInvoiceRow.active *, .controlInquiryRow.active *) {
  color: var(--cc-on-accent) !important;
}

body.controlCenterBody .controlActionBar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

body.controlCenterBody .controlStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

body.controlCenterBody .controlStat {
  min-height: 104px;
  border-radius: var(--cc-radius);
  padding: 16px 18px;
  align-content: center;
  box-shadow: var(--cc-shadow-soft);
}

body.controlCenterBody .controlStat span {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

body.controlCenterBody .controlStat strong {
  color: color-mix(in srgb, var(--cc-accent) 84%, var(--cc-ink) 16%) !important;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1;
  margin-top: 4px;
}

body.controlCenterBody :where(button, .buttonLink, input, textarea, select) {
  border-radius: var(--cc-radius-sm);
  border-color: var(--cc-line) !important;
}

body.controlCenterBody :where(input, textarea, select) {
  width: 100%;
  background: var(--cc-field) !important;
  color: var(--cc-field-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .48);
}

body.controlCenterBody :where(input::placeholder, textarea::placeholder) {
  color: color-mix(in srgb, var(--cc-field-ink) 56%, transparent) !important;
}

body.controlCenterBody :where(input:focus, textarea:focus, select:focus) {
  outline: 3px solid color-mix(in srgb, var(--cc-accent) 20%, transparent) !important;
  border-color: var(--cc-accent) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc-accent) 24%, transparent), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
}

body.controlCenterBody :where(button, .buttonLink) {
  min-height: 36px;
  font-weight: 900;
  color: var(--cc-ink);
  background: color-mix(in srgb, var(--cc-surface-2) 88%, #ffffff 8%) !important;
  border: 1px solid var(--cc-line) !important;
  box-shadow: 0 10px 24px rgba(31, 51, 98, .08);
}

body.controlCenterBody :where(button:hover, .buttonLink:hover) {
  transform: translateY(-1px);
  border-color: var(--cc-line-strong) !important;
  box-shadow: 0 16px 34px rgba(31, 51, 98, .13);
}

body.controlCenterBody :where(button.primary, .buttonLink.primary, button[data-create-betreuwerk], button[data-add-customer], button[data-create-customer], button[data-save], button[data-create], .buttonLink[data-create], button[data-refresh-mirror-status]) {
  background: linear-gradient(135deg, var(--cc-accent), color-mix(in srgb, var(--cc-accent) 72%, #111827 28%)) !important;
  border-color: color-mix(in srgb, var(--cc-accent) 74%, #ffffff 20%) !important;
  color: var(--cc-on-accent) !important;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--cc-accent) 30%, transparent);
}

body.controlCenterBody input[type="checkbox"],
body.controlCenterBody input[type="radio"] {
  width: auto;
  accent-color: var(--cc-accent);
}

body.controlCenterBody :where(.controlCustomerTableHead, .controlCustomerTableRow, .controlMailTableHead, .controlMailTableRow, .officialFormsTableHead, .officialFormsTableRow, .billingPositionsHead, .billingPositionRow, .billingManualHead, .billingManualRow) {
  gap: 12px;
}

body.controlCenterBody :where(.controlCustomerTableRow, .billingCustomerCard, .billingInvoiceRow, .billingDetailGrid div, .billingPositionRow, .supportMailRow, .controlMailTableRow, .controlInquiryRow, .officialFormsTableRow, .controlCustomerItem, .controlCustomerRow) {
  border-radius: var(--cc-radius-sm);
}

body.controlCenterBody :where(.controlCustomerTableRow.active, .billingInvoiceRow.active, .supportMailRow.active, .controlInquiryRow.active, .controlCustomerItem.active, .controlCustomerRow.active) {
  box-shadow:
    inset 4px 0 0 var(--cc-accent),
    0 18px 42px color-mix(in srgb, var(--cc-accent) 16%, transparent);
}

body.controlCenterBody .supportMailRow.unread {
  border-color: #f6c646 !important;
  background: linear-gradient(180deg, #fff8df, #fffdf4) !important;
  box-shadow: inset 4px 0 0 #ffc53d, 0 18px 42px rgba(167, 113, 0, .12);
}

html[data-theme="dark"] body.controlCenterBody .supportMailRow.unread,
html[data-theme="office"] body.controlCenterBody .supportMailRow.unread {
  background: linear-gradient(180deg, rgba(104, 79, 20, .38), rgba(42, 36, 24, .92)) !important;
}

body.controlCenterBody .statusMark,
body.controlCenterBody .navBadge,
body.controlCenterBody .controlAddButton span {
  background: color-mix(in srgb, var(--cc-accent) 16%, #ffffff) !important;
  color: color-mix(in srgb, var(--cc-accent) 76%, var(--cc-ink) 24%) !important;
  border: 1px solid color-mix(in srgb, var(--cc-accent) 28%, transparent);
}

body.controlCenterBody :where(.controlCustomerTableHead, .controlMailTableHead, .officialFormsTableHead, .billingPositionsHead, .billingManualHead) {
  color: var(--cc-muted) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
}

body.controlCenterBody .controlWizardTabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

body.controlCenterBody .controlWizardPill {
  min-height: 72px;
  border-radius: var(--cc-radius-sm);
  background: color-mix(in srgb, var(--cc-surface-2) 86%, var(--cc-accent) 7%) !important;
  box-shadow: none;
}

body.controlCenterBody .controlWizardStep {
  grid-template-columns: 46px minmax(0, 1fr);
  padding: 16px;
}

body.controlCenterBody .controlStepNo {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--cc-accent), color-mix(in srgb, var(--cc-accent) 70%, #111827 30%));
  color: var(--cc-on-accent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--cc-accent) 28%, transparent);
}

body.controlCenterBody :where(.supportMailBody, pre, code) {
  color: var(--cc-field-ink);
  background: var(--cc-field) !important;
  border-color: var(--cc-line) !important;
}

body.controlCenterBody .empty,
body.controlCenterBody .notice,
body.controlCenterBody .loginError,
body.controlCenterBody .loginSuccess {
  border-radius: var(--cc-radius-sm);
  border-color: var(--cc-line) !important;
  background: color-mix(in srgb, var(--cc-surface-2) 88%, #ffffff 6%) !important;
  color: var(--cc-ink) !important;
}

body.controlCenterBody :where(.controlMailWorkspace, .supportMailboxWorkspace, .controlInquiryWorkspace, .officialFormsControlGrid, .billingWorkspace) {
  gap: 18px;
}

body.controlCenterBody :where(.supportMailList, .controlCustomerList) {
  scrollbar-width: thin;
  scrollbar-color: var(--cc-accent) color-mix(in srgb, var(--cc-surface-2) 70%, transparent);
}

body.controlCenterBody ::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

body.controlCenterBody ::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--cc-surface-2) 86%, transparent);
  border-radius: 999px;
}

body.controlCenterBody ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cc-accent), color-mix(in srgb, var(--cc-accent) 60%, #111827 40%));
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--cc-surface-2) 82%, transparent);
}

body.controlLoggedOut.controlCenterBody {
  display: grid !important;
  grid-template-columns: 1fr !important;
  overflow-x: hidden;
}

body.controlLoggedOut.controlCenterBody .controlShell {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  min-height: 100vh;
  padding: 0;
  margin: 0 !important;
  display: block;
}

body.controlLoggedOut.controlCenterBody .controlHero {
  display: none !important;
}

body.controlLoggedOut.controlCenterBody #controlRoot {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 !important;
}

body.controlLoggedOut.controlCenterBody .controlLogin {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  min-height: 100vh;
  background: var(--cc-page-bg, linear-gradient(135deg, #edf4ff, #fff7f0)) !important;
}

body.controlLoggedOut.controlCenterBody .controlLoginStack {
  width: min(760px, calc(100vw - 36px));
}

body.controlLoggedOut.controlCenterBody .controlLoginLogoCard,
body.controlLoggedOut.controlCenterBody .controlLoginCard {
  border-radius: 14px;
  border-color: var(--cc-line) !important;
  background: var(--cc-surface-strong) !important;
  box-shadow: var(--cc-shadow);
}

body.controlLoggedOut.controlCenterBody .controlLoginCard {
  padding: 28px;
}

/* Login screens are intentionally isolated: no app/control-center content may flash before auth. */
body.authMode {
  grid-template-columns: 1fr !important;
  color: #12213a;
  background:
    radial-gradient(circle at 18% 10%, rgba(31, 111, 235, .22), transparent 31rem),
    radial-gradient(circle at 82% 8%, rgba(255, 74, 104, .18), transparent 34rem),
    radial-gradient(circle at 90% 84%, rgba(255, 197, 61, .22), transparent 28rem),
    linear-gradient(135deg, #edf4ff 0%, #f5f2ff 48%, #fff7f0 100%) !important;
}

body.authMode .sidebar,
body.authMode .topbar {
  display: none !important;
}

body.authMode .app {
  min-height: 100vh;
  padding: 0 !important;
  display: grid;
}

body.authMode .loginPage,
body.controlLoggedOut.controlCenterBody .controlLogin {
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 24px;
  padding: clamp(22px, 4vw, 46px);
  color: #12213a;
  background:
    radial-gradient(circle at 18% 10%, rgba(31, 111, 235, .24), transparent 31rem),
    radial-gradient(circle at 82% 8%, rgba(255, 74, 104, .20), transparent 34rem),
    radial-gradient(circle at 90% 84%, rgba(255, 197, 61, .24), transparent 28rem),
    linear-gradient(135deg, #edf4ff 0%, #f5f2ff 48%, #fff7f0 100%) !important;
}

body.authMode .loginBrand img,
body.controlLoggedOut.controlCenterBody .controlLoginLogoCard {
  width: min(520px, calc(100vw - 42px));
  border: 1px solid rgba(75, 111, 175, .24) !important;
  border-radius: 18px;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 32px 90px rgba(31, 51, 98, .20);
  padding: clamp(18px, 3vw, 30px);
  backdrop-filter: blur(18px);
}

body.controlLoggedOut.controlCenterBody .controlLoginLogoCard img {
  display: block;
  width: 100%;
  height: auto;
}

body.authMode .loginCard,
body.controlLoggedOut.controlCenterBody .controlLoginCard {
  width: min(440px, calc(100vw - 42px));
  border: 1px solid rgba(75, 111, 175, .28) !important;
  border-radius: 18px;
  background: rgba(255, 255, 255, .95) !important;
  color: #12213a !important;
  box-shadow: 0 30px 84px rgba(31, 51, 98, .18);
  padding: 28px;
  backdrop-filter: blur(18px);
}

body.authMode .loginCard h1,
body.controlLoggedOut.controlCenterBody .controlLoginCard h1 {
  margin: 0 0 2px;
  color: #12213a !important;
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1;
  text-align: center;
}

body.authMode .loginCard label,
body.controlLoggedOut.controlCenterBody .controlLoginCard label {
  color: #263852 !important;
}

body.authMode .loginCard input,
body.controlLoggedOut.controlCenterBody .controlLoginCard input {
  min-height: 46px;
  border-color: rgba(75, 111, 175, .34) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #12213a !important;
}

body.authMode .loginCard button.primary,
body.controlLoggedOut.controlCenterBody .controlLoginCard button.primary {
  min-height: 46px;
  border: 0 !important;
  border-radius: 12px;
  background: linear-gradient(135deg, #1f6feb, #7c5cff 52%, #ff4b63) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 38px rgba(31, 111, 235, .30);
}

body.controlLoggedOut.controlCenterBody .controlLoginStack {
  width: min(620px, calc(100vw - 42px));
  display: grid;
  justify-items: center;
  gap: 24px;
}

@media (max-width: 1180px) {
  body.controlCenterBody .controlStats,
  body.controlCenterBody .billingDetailGrid,
  body.controlCenterBody .controlWizardTabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.controlCenterBody :where(.controlMailWorkspace, .supportMailboxWorkspace, .controlInquiryWorkspace, .officialFormsControlGrid, .billingWorkspace) {
    grid-template-columns: 1fr;
  }

  body.controlCenterBody :where(.controlCustomerTableHead, .controlCustomerTableRow, .controlMailTableHead, .controlMailTableRow, .officialFormsTableHead, .officialFormsTableRow) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body.controlCenterBody .controlShell {
    width: min(100% - 22px, 100%);
    padding: 12px 0 28px;
  }

  body.controlCenterBody .controlHero,
  body.controlCenterBody .controlActionBar {
    display: grid;
    justify-items: start;
  }

  body.controlCenterBody .controlStats,
  body.controlCenterBody .billingCustomerGrid,
  body.controlCenterBody .billingDetailGrid,
  body.controlCenterBody .controlWizardTabs {
    grid-template-columns: 1fr;
  }

  body.controlCenterBody h1 {
    font-size: 34px;
  }
}

/* Control Center: final bunte operator surface with fixed contrast. */
html[data-control-center="true"] {
  --cc-accent: #1f6feb;
  --cc-accent-strong: #1557c0;
  --cc-on-accent: #ffffff;
  --cc-ink: #f7fbff;
  --cc-muted: #c7d5e8;
  --cc-subtle: #9fb1c9;
  --cc-surface: rgba(21, 33, 47, .92);
  --cc-surface-strong: rgba(31, 43, 58, .96);
  --cc-surface-2: rgba(15, 27, 41, .88);
  --cc-field: rgba(43, 56, 70, .96);
  --cc-field-ink: #f8fbff;
  --cc-line: rgba(126, 158, 203, .36);
  --cc-line-strong: rgba(96, 165, 250, .68);
  --cc-shadow: 0 30px 90px rgba(0, 0, 0, .34);
  --cc-shadow-soft: 0 18px 48px rgba(0, 0, 0, .24);
  --cc-page-bg:
    radial-gradient(circle at 16% 3%, rgba(31, 111, 235, .34), transparent 32rem),
    radial-gradient(circle at 68% 1%, rgba(255, 74, 104, .18), transparent 34rem),
    radial-gradient(circle at 94% 76%, rgba(255, 197, 61, .15), transparent 32rem),
    linear-gradient(145deg, #071119 0%, #0b1b2c 42%, #10294a 100%);
}

body.controlCenterBody {
  background: var(--cc-page-bg) !important;
}

body.controlCenterBody::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), transparent 30%, rgba(255,255,255,.035)),
    linear-gradient(135deg, rgba(31,111,235,.12), rgba(124,92,255,.08) 36%, rgba(255,74,104,.06) 66%, rgba(255,197,61,.08));
}

body.controlCenterBody .controlHero,
body.controlCenterBody :where(
  .panel,
  .loginCard,
  .controlLoginLogoCard,
  .inlineSubPanel,
  .controlStat,
  .controlFold,
  .controlChoiceCard,
  .controlCustomerTableRow,
  .billingCustomerCard,
  .billingInvoiceRow,
  .billingDetailGrid div,
  .billingPositionRow,
  .supportMailList,
  .supportMailDetail,
  .supportComposeForm,
  .supportMailRow,
  .supportMailFacts div,
  .supportMailBody,
  .controlMailList,
  .controlMailTableRow,
  .controlInquiryRow,
  .controlInquiryFacts div,
  .officialFormsControlList,
  .officialFormsTableRow,
  .controlWizardStep,
  .controlCustomerItem,
  .controlCustomerRow,
  .supportMessage,
  .mirrorStatusPanel,
  .controlTechDetails,
  .controlFormBand,
  .controlInfoBox,
  .maintenancePreview,
  .officialFormsControlPanel,
  .controlOperatorPanel,
  .controlAuditItem,
  .controlDnsBox
) {
  color: var(--cc-ink) !important;
  border-color: var(--cc-line) !important;
  background:
    linear-gradient(180deg, rgba(51, 64, 80, .88), rgba(21, 33, 47, .94)) !important;
  box-shadow: var(--cc-shadow-soft) !important;
}

body.controlCenterBody .controlHero,
body.controlCenterBody .controlActionBar {
  background:
    linear-gradient(180deg, rgba(43, 56, 70, .94), rgba(17, 29, 44, .94)) !important;
}

body.controlCenterBody .controlHero::before,
body.controlCenterBody .panel::before {
  background: linear-gradient(90deg, #1f6feb, #7c5cff 36%, #ff4b63 68%, #ffc53d) !important;
}

body.controlCenterBody :where(h1, h2, h3, h4, label, strong, b, th, summary, legend) {
  color: #ffffff !important;
  text-shadow: none !important;
}

body.controlCenterBody :where(.muted, small, p, li, td, dt, dd, span, em) {
  color: var(--cc-muted) !important;
}

body.controlCenterBody :where(a, .buttonLink) {
  color: #8fc2ff !important;
}

body.controlCenterBody .controlSectionNav {
  background:
    linear-gradient(180deg, rgba(43, 56, 70, .96), rgba(21, 33, 47, .96)) !important;
  border: 1px solid var(--cc-line) !important;
  border-radius: 14px;
  box-shadow: var(--cc-shadow-soft);
}

body.controlCenterBody .controlSectionNav button {
  color: #eef6ff !important;
  border-color: rgba(126, 158, 203, .34) !important;
  background: linear-gradient(180deg, rgba(35, 50, 68, .96), rgba(21, 35, 53, .96)) !important;
}

body.controlCenterBody .controlSectionNav button.active,
body.controlCenterBody :where(button.primary, .buttonLink.primary, .controlWizardPill.active, .statusButtonGroup .statusButton.active) {
  color: #ffffff !important;
  border-color: rgba(147, 197, 253, .74) !important;
  background: linear-gradient(135deg, #1f6feb, #3b82f6 55%, #0f8b7d) !important;
  box-shadow: 0 16px 36px rgba(31, 111, 235, .34) !important;
}

body.controlCenterBody :where(input, textarea, select) {
  color: var(--cc-field-ink) !important;
  background: var(--cc-field) !important;
  border-color: rgba(126, 158, 203, .42) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

body.controlCenterBody :where(input::placeholder, textarea::placeholder) {
  color: #98a8bd !important;
  opacity: 1;
}

body.controlCenterBody :where(input:disabled, textarea:disabled, select:disabled, button:disabled),
body.controlCenterBody :where(input[readonly], textarea[readonly], select[readonly]) {
  opacity: 1 !important;
  color: #c7d5e8 !important;
  background: rgba(46, 58, 72, .78) !important;
  border-color: rgba(126, 158, 203, .30) !important;
}

body.controlCenterBody input[type="file"]::file-selector-button {
  margin-right: 10px;
  border: 1px solid rgba(147, 197, 253, .42);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(31, 111, 235, .95), rgba(15, 139, 125, .92));
  color: #ffffff;
  font-weight: 900;
  padding: 7px 10px;
}

body.controlCenterBody .controlTechDetails {
  padding: 12px;
  overflow: hidden;
}

body.controlCenterBody .controlTechDetails summary {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dbeafe !important;
}

body.controlCenterBody .controlTechDetails summary::marker {
  color: #60a5fa;
}

body.controlCenterBody .controlTechDetails[open] {
  background:
    linear-gradient(180deg, rgba(39, 55, 72, .96), rgba(26, 39, 54, .96)) !important;
}

body.controlCenterBody .controlFormBand,
body.controlCenterBody .externalBackupBox,
body.controlCenterBody .setupMailboxBox,
body.controlCenterBody .controlInfoBox,
body.controlCenterBody .controlDnsBox {
  color: #eef6ff !important;
  background: rgba(13, 26, 40, .58) !important;
  border-color: rgba(126, 158, 203, .32) !important;
}

body.controlCenterBody .controlInfoBox {
  border-left: 4px solid #60a5fa !important;
}

body.controlCenterBody .controlChoiceCard {
  align-items: center;
  min-height: 74px;
}

body.controlCenterBody .controlChoiceCard span:not(.controlChoiceIcon) {
  color: var(--cc-muted) !important;
}

body.controlCenterBody .controlChoiceIcon,
body.controlCenterBody .controlStepNo,
body.controlCenterBody .pill,
body.controlCenterBody .statusMark,
body.controlCenterBody .navBadge {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1f6feb, #0f8b7d) !important;
  border: 1px solid rgba(147, 197, 253, .40) !important;
}

body.controlCenterBody :where(.officialFormsTableHead, .controlCustomerTableHead, .controlMailTableHead, .billingPositionsHead, .billingManualHead) {
  color: #dbeafe !important;
  background: rgba(14, 26, 40, .72) !important;
  border-radius: 8px;
  padding: 9px 10px;
}

body.controlCenterBody :where(.officialFormsTableHead *, .controlCustomerTableHead *, .controlMailTableHead *, .billingPositionsHead *, .billingManualHead *) {
  color: #dbeafe !important;
}

body.controlCenterBody .officialFormsControlGrid {
  align-items: stretch;
}

body.controlCenterBody .officialFormsControlList,
body.controlCenterBody .officialFormsTableRow,
body.controlCenterBody .controlCustomerTableRow,
body.controlCenterBody .controlMailTableRow,
body.controlCenterBody .supportMailRow,
body.controlCenterBody .billingInvoiceRow,
body.controlCenterBody .controlInquiryRow {
  background: rgba(18, 32, 49, .72) !important;
}

body.controlCenterBody .maintenancePreview {
  border-left: 5px solid #ff5b6f !important;
  background: linear-gradient(180deg, rgba(92, 35, 42, .82), rgba(57, 32, 41, .86)) !important;
}

body.controlCenterBody .maintenancePreview strong,
body.controlCenterBody .maintenancePreview span {
  color: #fff7f7 !important;
}

body.controlCenterBody .empty,
body.controlCenterBody .notice,
body.controlCenterBody .loginError,
body.controlCenterBody .loginSuccess,
body.controlCenterBody .warningBox,
body.controlCenterBody .simpleLockNote {
  color: #f7fbff !important;
  border-color: rgba(126, 158, 203, .36) !important;
  background: rgba(18, 32, 49, .76) !important;
}

body.controlCenterBody :where(.empty *, .notice *, .warningBox *, .simpleLockNote *) {
  color: inherit !important;
}

body.controlCenterBody :where(.grid, .two, .three, .formActions, .editorHeader, .controlChoiceGrid, .officialFormsTable) {
  min-width: 0;
}

body.controlCenterBody .controlWizardStep[hidden],
body.controlCenterBody [hidden] {
  display: none !important;
}

/* BetreuWerk 2.0 public website */
body.landingBodyV2 {
  --public-ink: #101b31;
  --public-muted: #506076;
  --public-blue: #1f6feb;
  --public-teal: #0f8b7d;
  --public-pink: #ff4568;
  --public-gold: #ffbd28;
  --public-card: rgba(255, 255, 255, .92);
  display: block;
  min-height: 100vh;
  color: var(--public-ink);
  background:
    linear-gradient(135deg, rgba(31, 111, 235, .18) 0%, rgba(124, 92, 255, .12) 34%, rgba(255, 69, 104, .12) 64%, rgba(255, 189, 40, .16) 100%),
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 48%, #fff8f0 100%);
  overflow-x: hidden;
}

.landingBodyV2::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(31, 111, 235, .05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(16, 27, 49, .04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), transparent 86%);
}

.landingNavV2 {
  min-height: 88px;
  margin: 18px auto 0;
  width: min(1500px, calc(100% - 36px));
  border: 1px solid rgba(72, 103, 155, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 24px 70px rgba(31, 51, 98, .15);
  backdrop-filter: blur(18px);
}

.landingNavV2::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg, var(--public-blue), #7c5cff 32%, var(--public-pink) 62%, var(--public-gold));
}

.landingNavV2 .landingLogo img {
  width: clamp(180px, 14vw, 260px);
  height: 66px;
  padding: 8px 12px;
  border: 1px solid rgba(72, 103, 155, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 16px 34px rgba(31, 51, 98, .10);
}

.landingNavV2 a {
  color: #21314d;
  border: 1px solid transparent;
}

.landingNavV2 a:hover {
  color: var(--public-blue);
  background: rgba(31, 111, 235, .08);
  border-color: rgba(31, 111, 235, .16);
}

.landingNavV2 .landingLogin {
  border-color: rgba(31, 111, 235, .28);
  background: #0d1728;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(16, 27, 49, .18);
}

.landingHeroV2,
.publicPageHero {
  width: min(1500px, calc(100% - 36px));
  margin: 18px auto 0;
  border: 1px solid rgba(72, 103, 155, .22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86) 0%, rgba(242,247,255,.82) 48%, rgba(255,248,242,.86) 100%);
  box-shadow: 0 28px 90px rgba(31, 51, 98, .16);
}

.landingHeroV2 {
  min-height: calc(100vh - 132px);
  padding: clamp(44px, 7vw, 96px);
}

.landingHeroV2 .landingHeroText {
  max-width: 820px;
}

.landingReleasePill,
.landingPlanLabel,
.landingEyebrow {
  width: fit-content;
  border: 1px solid rgba(31, 111, 235, .20);
  border-radius: 999px;
  background: rgba(31, 111, 235, .10);
  color: #1557c7;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.landingHeroV2 h1,
.publicPageHero h1 {
  max-width: 980px;
  color: var(--public-ink);
  text-wrap: balance;
}

.landingHeroV2 h1 {
  font-size: clamp(44px, 7vw, 96px);
  line-height: .98;
}

.landingHeroV2 .landingLead {
  color: #2e3f5f;
  font-size: clamp(18px, 2.2vw, 27px);
  line-height: 1.38;
}

.landingHeroPoints {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.landingHeroPoints span {
  border: 1px solid rgba(31, 111, 235, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #263852;
  padding: 8px 11px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(31, 51, 98, .08);
}

.landingProductStage {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
}

.landingProductWindow {
  border: 1px solid rgba(31, 111, 235, .24);
  border-radius: 8px;
  background: #0c1628;
  box-shadow: 0 34px 95px rgba(16, 27, 49, .30);
  overflow: hidden;
}

.landingWindowTop {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  color: #d9e7ff;
  background: linear-gradient(90deg, #12213a, #1c3156);
}

.landingWindowTop span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5b6f;
}

.landingWindowTop span:nth-child(2) { background: #ffbd28; }
.landingWindowTop span:nth-child(3) { background: #2bd9a3; }
.landingWindowTop strong { margin-left: auto; font-size: 13px; }

.landingWindowBody {
  display: grid;
  grid-template-columns: 96px 1fr;
  min-height: 420px;
}

.landingWindowBody aside {
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 18px;
  background: #081223;
}

.landingWindowBody aside span {
  display: block;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
}

.landingWindowBody aside span.active {
  background: linear-gradient(90deg, var(--public-blue), var(--public-teal));
}

.landingWindowBody section {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(145deg, #11213a, #0f1a2d);
}

.landingMockHeader,
.landingMockStats,
.landingMockGrid {
  display: grid;
  gap: 12px;
}

.landingMockHeader {
  grid-template-columns: 1fr auto;
  align-items: center;
  color: #fff;
}

.landingMockHeader strong { font-size: 28px; }
.landingMockHeader span { color: #98acd0; font-weight: 900; }

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

.landingMockStats div,
.landingMockGrid div {
  border: 1px solid rgba(130, 164, 219, .20);
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.landingMockStats div {
  padding: 16px;
  display: grid;
  gap: 8px;
}

.landingMockStats span { color: #aebfe0; font-weight: 850; }
.landingMockStats strong { color: #74a8ff; font-size: 36px; }

.landingMockGrid {
  grid-template-columns: 1fr 1fr;
}

.landingMockGrid div { min-height: 82px; }
.landingMockGrid .wide { grid-column: 1 / -1; }

.landingAiBubble {
  position: absolute;
  right: -12px;
  bottom: 28px;
  width: min(320px, 72%);
  display: grid;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,246,255,.92));
  color: var(--public-ink);
  box-shadow: 0 26px 70px rgba(31, 51, 98, .24);
  padding: 16px;
}

.landingAiBubble strong { color: #1557c7; }
.landingAiBubble span { color: var(--public-muted); line-height: 1.35; }

.landingButton {
  min-height: 48px;
  border-color: rgba(31, 111, 235, .22);
  background: rgba(255,255,255,.88);
  color: #15243d;
  box-shadow: 0 14px 30px rgba(31, 51, 98, .10);
}

.landingButton.primary {
  border: 0;
  background: linear-gradient(135deg, var(--public-blue), #7c5cff 54%, var(--public-pink));
  color: #fff;
  box-shadow: 0 20px 46px rgba(31, 111, 235, .30);
}

.landingReleaseBand,
.landingTrust,
.landingFinalCta,
.landingSectionV2,
.publicPageSection {
  width: min(1500px, calc(100% - 36px));
  margin: 18px auto 0;
  border: 1px solid rgba(72, 103, 155, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 22px 70px rgba(31, 51, 98, .12);
  backdrop-filter: blur(16px);
}

.landingReleaseBand {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: 24px;
  align-items: center;
  padding: clamp(28px, 5vw, 58px);
  background: linear-gradient(135deg, #1f6feb 0%, #7658ff 42%, #ff4568 72%, #ffbd28 100%);
  color: #fff;
}

.landingReleaseBand h2,
.landingReleaseBand p {
  color: #fff;
}

.landingReleaseBand .landingEyebrow {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

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

.landingReleaseGrid article {
  min-height: 118px;
  display: grid;
  gap: 8px;
  align-content: center;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 8px;
  background: rgba(255,255,255,.16);
  padding: 18px;
}

.landingReleaseGrid strong {
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1;
}

.landingReleaseGrid span { font-weight: 850; line-height: 1.35; }

.landingSectionV2 {
  padding: clamp(34px, 5vw, 68px);
}

.landingSectionV2 .landingSectionHead h2,
.landingTrust h2,
.landingFinalCta h2 {
  color: var(--public-ink);
  text-wrap: balance;
}

.landingFeatureGridV2 article {
  min-height: 172px;
  border: 1px solid rgba(72, 103, 155, .18);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.94));
  box-shadow: 0 16px 34px rgba(31, 51, 98, .08);
}

.landingFeatureGridV2 article:nth-child(3n + 1) { border-top: 4px solid var(--public-blue); }
.landingFeatureGridV2 article:nth-child(3n + 2) { border-top: 4px solid var(--public-pink); }
.landingFeatureGridV2 article:nth-child(3n) { border-top: 4px solid var(--public-gold); }

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

.landingEditionGridV2 .landingEditionCard {
  min-height: 360px;
  border-color: rgba(72, 103, 155, .20);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.92));
  box-shadow: 0 18px 42px rgba(31, 51, 98, .10);
}

.landingEditionGridV2 .landingEditionCard.recommended {
  border-color: rgba(31, 111, 235, .48);
  background: linear-gradient(180deg, #ffffff, #eef5ff);
  box-shadow: 0 24px 64px rgba(31, 111, 235, .18);
}

.landingEditionCard h3 { color: var(--public-ink); }
.landingEditionCard a {
  align-self: end;
  width: fit-content;
  border: 1px solid rgba(31, 111, 235, .20);
  border-radius: 6px;
  background: rgba(31, 111, 235, .08);
  color: #1557c7;
  padding: 9px 11px;
  text-decoration: none;
  font-weight: 950;
}

.landingTrust {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(320px, 1.08fr);
  gap: 24px;
  padding: clamp(28px, 5vw, 58px);
}

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

.landingTrustList span {
  border: 1px solid rgba(72, 103, 155, .20);
  border-radius: 8px;
  background: rgba(255,255,255,.82);
  padding: 14px;
  font-weight: 900;
  color: #263852;
}

.landingFinalCta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: clamp(28px, 5vw, 58px);
  background:
    linear-gradient(135deg, rgba(15,139,125,.12), rgba(31,111,235,.12) 44%, rgba(255,69,104,.10));
}

.landingFooterV2 {
  width: min(1500px, calc(100% - 36px));
  margin: 18px auto;
  border: 1px solid rgba(72, 103, 155, .18);
  border-radius: 8px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 18px 44px rgba(31, 51, 98, .10);
}

.publicPageMain {
  padding-bottom: 18px;
}

.publicPageHero {
  display: grid;
  gap: 14px;
  padding: clamp(34px, 5vw, 62px);
}

.publicPageHero h1 {
  font-size: clamp(42px, 6vw, 74px);
  line-height: 1;
}

.publicPageHero p:not(.landingReleasePill) {
  max-width: 840px;
  color: #2e3f5f;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.45;
}

.publicLegalHero {
  background:
    linear-gradient(135deg, rgba(31, 111, 235, .92), rgba(124, 92, 255, .82) 52%, rgba(255, 69, 104, .78)),
    #1f6feb;
  color: #fff;
}

.publicLegalHero h1,
.publicLegalHero p:not(.landingReleasePill) {
  color: #fff;
}

.publicLegalHero .landingReleasePill {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}

.landingBodyV2 .landingInquirySection {
  border: 1px solid rgba(72, 103, 155, .22);
  background: rgba(255,255,255,.86);
}

.landingBodyV2 .landingInquiryForm,
.landingBodyV2 .landingContactCard,
.landingBodyV2 .legalSingleBlock,
.landingBodyV2 .legalTextPage article {
  border-color: rgba(72, 103, 155, .20);
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 42px rgba(31, 51, 98, .08);
}

.landingBodyV2 .landingInquiryForm input,
.landingBodyV2 .landingInquiryForm textarea,
.landingBodyV2 .landingInquiryForm select {
  border-color: rgba(72, 103, 155, .28);
  background: rgba(255,255,255,.95);
}

.landingBodyV2 .landingInquiryForm input:focus,
.landingBodyV2 .landingInquiryForm textarea:focus,
.landingBodyV2 .landingInquiryForm select:focus {
  outline: 3px solid rgba(31, 111, 235, .14);
  border-color: rgba(31, 111, 235, .72);
}

.landingBodyV2 .legalTextPage {
  max-width: 1120px;
}

.landingBodyV2 .legalTextPage h1,
.landingBodyV2 .legalSingleBlock h1 {
  font-size: clamp(32px, 4vw, 48px);
  color: var(--public-ink);
}

.landingBodyV2 .legalTextPage h2,
.landingBodyV2 .legalSingleBlock h2 {
  color: #1557c7;
}

.landingBodyV2 .legalTextPage p,
.landingBodyV2 .legalSingleBlock p,
.landingBodyV2 .landingContactCard p,
.landingBodyV2 .landingSectionHead p {
  color: var(--public-muted);
}

.landingBodyV2 .cookieNotice {
  background: rgba(16, 27, 49, .42);
  backdrop-filter: blur(10px);
}

.landingBodyV2 .cookieNotice > div {
  border-color: rgba(72, 103, 155, .24);
  background: rgba(255,255,255,.96);
}

.landingBodyV2 .cookieNotice button {
  border: 0;
  background: linear-gradient(135deg, var(--public-blue), #7c5cff 52%, var(--public-pink));
}

@media (max-width: 1120px) {
  .landingHeroV2,
  .landingReleaseBand,
  .landingTrust {
    grid-template-columns: 1fr;
  }

  .landingProductStage {
    min-height: 420px;
  }

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

@media (max-width: 760px) {
  .landingNavV2 {
    width: min(100% - 20px, 100%);
    margin-top: 10px;
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 12px;
  }

  .landingNavV2 nav {
    width: 100%;
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .landingNavV2 .landingLogo img {
    width: 180px;
    height: 58px;
  }

  .landingHeroV2,
  .publicPageHero,
  .landingReleaseBand,
  .landingTrust,
  .landingFinalCta,
  .landingSectionV2,
  .publicPageSection,
  .landingFooterV2 {
    width: min(100% - 20px, 100%);
  }

  .landingHeroV2 {
    padding: 28px 18px;
  }

  .landingProductStage {
    min-height: 0;
  }

  .landingWindowBody {
    grid-template-columns: 58px 1fr;
  }

  .landingWindowBody aside {
    padding: 12px 10px;
  }

  .landingMockStats,
  .landingMockGrid,
  .landingReleaseGrid,
  .landingEditionGridV2,
  .landingFeatureGridV2,
  .landingTrustList,
  .landingInquiryGrid,
  .landingContactGrid {
    grid-template-columns: 1fr;
  }

  .landingAiBubble {
    position: static;
    width: 100%;
    margin-top: 12px;
  }

  .landingFinalCta {
    display: grid;
    align-items: start;
  }
}

/* BetreuWerk 2.0 public polish: compact, provider-style pages */
body.landingBodyV2 {
  font-size: 16px;
  line-height: 1.5;
  background:
    radial-gradient(circle at 12% 8%, rgba(31,111,235,.13), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(15,139,125,.12), transparent 32%),
    linear-gradient(135deg, rgba(31,111,235,.10), rgba(124,92,255,.07) 42%, rgba(255,69,104,.06) 70%, rgba(255,189,40,.08)),
    #f7fbff;
}

.landingBodyV2 main {
  width: min(1320px, calc(100% - 44px));
  margin: 0 auto;
}

.landingNavV2,
.landingHeroV2,
.publicPageHero,
.landingReleaseBand,
.landingTrust,
.landingFinalCta,
.landingSectionV2,
.publicPageSection,
.landingFooterV2 {
  width: min(1320px, calc(100% - 44px));
}

.landingNavV2 {
  min-height: 74px;
  padding: 12px 24px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.landingNavV2 .landingLogo img {
  width: 214px;
  height: 56px;
  padding: 7px 11px;
}

.landingNavV2 nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.landingNavV2 a {
  font-size: 15px;
  line-height: 1;
  padding: 10px 12px;
  white-space: nowrap;
}

.landingNavV2 .landingLogin {
  padding: 12px 16px;
}

.landingHeroV2 {
  min-height: auto;
  padding: clamp(34px, 4vw, 58px);
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(420px, .82fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
}

.landingHeroV2 .landingHeroText {
  max-width: 680px;
}

.landingHeroV2 h1 {
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: 1.04;
  margin: 18px 0 18px;
}

.landingHeroV2 .landingLead {
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.45;
  max-width: 660px;
}

.landingReleasePill,
.landingPlanLabel,
.landingEyebrow {
  font-size: 11px;
  padding: 6px 10px;
}

.landingHeroPoints {
  margin-top: 18px;
}

.landingHeroPoints span {
  font-size: 14px;
  padding: 7px 10px;
}

.landingActions {
  margin-top: 22px;
  gap: 10px;
}

.landingButton {
  min-height: 42px;
  padding: 10px 14px;
  font-size: 15px;
}

.landingProductStage {
  min-height: 0;
  align-items: stretch;
}

.landingProductWindow {
  min-height: 360px;
}

.landingWindowTop {
  min-height: 36px;
}

.landingWindowBody {
  grid-template-columns: 74px 1fr;
  min-height: 322px;
}

.landingWindowBody aside {
  gap: 10px;
  padding: 14px;
}

.landingWindowBody aside span {
  height: 23px;
}

.landingWindowBody section {
  gap: 13px;
  padding: 18px;
}

.landingMockHeader strong {
  font-size: 22px;
}

.landingMockStats strong {
  font-size: 28px;
}

.landingMockStats div {
  padding: 13px;
}

.landingMockGrid div {
  min-height: 62px;
}

.landingAiBubble {
  right: 18px;
  bottom: 18px;
  width: min(280px, 80%);
  padding: 14px;
}

.landingReleaseBand {
  grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
  padding: clamp(30px, 4vw, 48px);
  gap: 22px;
}

.landingReleaseBand h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  max-width: 660px;
}

.landingReleaseBand p {
  font-size: 16px;
  max-width: 700px;
}

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

.landingReleaseGrid article {
  min-width: 0;
  min-height: 118px;
  overflow: hidden;
  align-content: start;
  padding: 16px;
}

.landingReleaseGrid strong {
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.landingReleaseGrid span {
  font-size: 15px;
  line-height: 1.34;
}

.landingSectionV2,
.publicPageSection {
  padding: clamp(30px, 4vw, 52px);
}

.landingSectionV2 .landingSectionHead,
.publicPageSection .landingSectionHead {
  max-width: 860px;
}

.landingSectionV2 .landingSectionHead h2,
.landingTrust h2,
.landingFinalCta h2 {
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.12;
}

.landingBodyV2 .landingSectionHead p {
  font-size: 16px;
}

.landingFeatureGridV2 {
  gap: 14px;
}

.landingFeatureGridV2 article {
  min-height: 150px;
  padding: 18px;
}

.landingFeatureGridV2 article h3 {
  font-size: 20px;
}

.landingFeatureGridV2 article p {
  font-size: 15px;
}

.landingEditionGridV2 {
  gap: 14px;
}

.landingEditionGridV2 .landingEditionCard {
  min-height: 320px;
  padding: 18px;
}

.landingEditionGridV2 .landingEditionCard h3 {
  font-size: 22px;
}

.landingEditionGridV2 .landingEditionCard p,
.landingEditionGridV2 .landingEditionCard li {
  font-size: 15px;
}

.publicPageHero {
  min-height: auto;
  padding: clamp(30px, 4vw, 50px);
  margin-top: 18px;
}

.publicPageHero h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  margin: 8px 0 6px;
}

.publicPageHero p:not(.landingReleasePill) {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
  max-width: 760px;
}

.publicLegalHero {
  background:
    linear-gradient(135deg, #1f6feb 0%, #7658ff 52%, #ff4568 100%),
    #1f6feb;
}

.landingBodyV2 .legalSingleBlock,
.landingBodyV2 .legalTextPage {
  width: min(940px, calc(100% - 44px));
  margin: 0 auto;
}

.landingBodyV2 .legalSingleBlock,
.landingBodyV2 .legalTextPage article {
  padding: clamp(28px, 4vw, 44px);
}

.landingBodyV2 .legalTextPage h1,
.landingBodyV2 .legalSingleBlock h1 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
}

.landingBodyV2 .legalTextPage h2,
.landingBodyV2 .legalSingleBlock h2 {
  font-size: 22px;
}

.landingBodyV2 .legalTextPage p,
.landingBodyV2 .legalSingleBlock p {
  font-size: 15px;
  line-height: 1.6;
}

.landingInquirySection.publicPageSection {
  max-width: 1060px;
}

.landingInquirySection .landingEditionGrid.compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.landingInquirySection .landingEditionGrid.compact .landingEditionCard {
  min-height: 108px;
  padding: 16px;
}

.landingInquirySection .landingEditionGrid.compact .landingEditionCard h3 {
  font-size: 18px;
}

.landingInquirySection .landingEditionGrid.compact .landingEditionCard p {
  font-size: 14px;
  line-height: 1.42;
}

.landingBodyV2 .landingInquiryForm {
  padding: 22px;
}

.landingInquiryGrid {
  gap: 12px;
}

.landingBodyV2 .landingInquiryForm label {
  font-size: 13px;
}

.landingBodyV2 .landingInquiryForm input,
.landingBodyV2 .landingInquiryForm textarea,
.landingBodyV2 .landingInquiryForm select {
  min-height: 38px;
  font-size: 14px;
  padding: 9px 10px;
}

.landingBodyV2 .landingInquiryForm textarea {
  min-height: 112px;
}

.landingContactGrid {
  display: grid;
  grid-template-columns: minmax(260px, .55fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.landingBodyV2 .landingContactCard {
  padding: 24px;
}

.landingBodyV2 .landingContactCard h2 {
  font-size: 34px;
  margin: 0 0 16px;
}

.landingTrust,
.landingFinalCta {
  padding: clamp(28px, 4vw, 48px);
}

.landingFooterV2 {
  padding: 18px 26px;
  font-size: 14px;
}

@media (max-width: 1120px) {
  .landingHeroV2,
  .landingReleaseBand,
  .landingTrust,
  .landingContactGrid {
    grid-template-columns: 1fr;
  }

  .landingHeroV2 h1 {
    font-size: clamp(38px, 5vw, 56px);
  }

  .landingInquirySection .landingEditionGrid.compact,
  .landingEditionGridV2,
  .landingFeatureGridV2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .landingBodyV2 main,
  .landingNavV2,
  .landingHeroV2,
  .publicPageHero,
  .landingReleaseBand,
  .landingTrust,
  .landingFinalCta,
  .landingSectionV2,
  .publicPageSection,
  .landingFooterV2,
  .landingBodyV2 .legalSingleBlock,
  .landingBodyV2 .legalTextPage {
    width: min(100% - 20px, 100%);
  }

  .landingNavV2 {
    min-height: auto;
    padding: 12px;
  }

  .landingNavV2 nav {
    flex-wrap: nowrap;
  }

  .landingHeroV2 {
    grid-template-columns: 1fr;
    padding: 24px 18px;
  }

  .landingHeroV2 h1 {
    font-size: clamp(34px, 11vw, 44px);
  }

  .landingHeroV2 .landingLead,
  .publicPageHero p:not(.landingReleasePill) {
    font-size: 16px;
  }

  .landingProductWindow {
    min-height: 260px;
  }

  .landingWindowBody {
    min-height: 224px;
    grid-template-columns: 52px 1fr;
  }

  .landingReleaseBand,
  .landingSectionV2,
  .publicPageSection,
  .landingTrust,
  .landingFinalCta {
    padding: 24px 18px;
  }

  .landingReleaseGrid,
  .landingInquirySection .landingEditionGrid.compact,
  .landingEditionGridV2,
  .landingFeatureGridV2,
  .landingTrustList,
  .landingInquiryGrid {
    grid-template-columns: 1fr;
  }

  .publicPageHero h1 {
    font-size: clamp(32px, 10vw, 42px);
  }
}

/* BetreuWerk 2.0 public polish v2: tighter typography and cleaner provider pages */
body.landingBodyV2 {
  background:
    radial-gradient(circle at 14% 8%, rgba(28, 116, 255, .12), transparent 30%),
    radial-gradient(circle at 92% 5%, rgba(28, 180, 170, .16), transparent 26%),
    linear-gradient(115deg, #f6f9fc 0%, #eef5f8 48%, #f5f8fb 100%);
  color: #102032;
}

.landingBodyV2 main,
.landingBodyV2 .landingNavV2 {
  width: min(1260px, calc(100% - 56px));
}

.landingNavV2 {
  min-height: 68px;
  padding: 10px 22px;
  margin-top: 22px;
  border-radius: 8px;
}

.landingNavV2 img {
  width: 194px;
  height: 50px;
}

.landingNavV2 nav {
  gap: 10px;
}

.landingNavV2 nav a {
  font-size: 14px;
  padding: 8px 10px;
}

.landingNavV2 nav a.landingLogin,
.landingNavV2 nav a.landingLoginLink {
  padding: 10px 14px;
  border-radius: 7px;
}

.landingHeroV2 {
  min-height: 0;
  padding: clamp(34px, 5vw, 58px);
  grid-template-columns: minmax(0, .94fr) minmax(300px, .72fr);
  gap: clamp(28px, 4vw, 54px);
  border-radius: 10px;
}

.landingHeroV2 h1 {
  max-width: 680px;
  font-size: clamp(38px, 4vw, 58px);
  line-height: .98;
  letter-spacing: 0;
}

.landingHeroV2 .landingLead,
.landingHeroLead {
  max-width: 720px;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.42;
}

.landingHeroV2 .landingActions {
  margin-top: 8px;
}

.landingHeroV2 .landingButton,
.landingHeroV2 .landingButtonGhost,
.landingButton,
.landingButtonGhost {
  min-height: 42px;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 7px;
}

.landingHeroPoints {
  gap: 8px;
  margin-top: 10px;
}

.landingHeroPoints span,
.landingPillRow span {
  padding: 7px 11px;
  font-size: 13px;
}

.landingProductStage {
  min-height: 300px;
}

.landingProductWindow {
  min-height: 300px;
  transform: none;
}

.landingProductWindow::before {
  inset: 18px 20px;
}

.landingReleaseBand {
  min-height: 0;
  padding: clamp(34px, 5vw, 58px);
  grid-template-columns: minmax(0, .9fr) minmax(340px, .95fr);
  border-radius: 9px;
}

.landingReleaseBand h2,
.landingSectionHead h2,
.landingLegalHero h1,
.publicPageHero h1 {
  font-size: clamp(32px, 3.35vw, 48px);
  line-height: 1.05;
  letter-spacing: 0;
}

.landingReleaseBand p,
.landingSectionHead p {
  font-size: 16px;
  line-height: 1.45;
}

.landingReleaseGrid {
  gap: 12px;
}

.landingReleaseGrid article {
  min-height: 132px;
  padding: 18px;
  border-radius: 8px;
}

.landingReleaseGrid strong {
  font-size: clamp(24px, 2.7vw, 36px);
  line-height: 1.02;
}

.landingSectionV2,
.landingInquirySection,
.legalSingleBlock,
.legalTextPage,
.publicPageSection {
  padding: clamp(34px, 4.8vw, 56px);
  border-radius: 10px;
}

.landingFeatureGrid {
  gap: 12px;
}

.landingFeatureGrid article,
.landingEditionGridV2 .landingEditionCard,
.landingBackupCard,
.landingContactCard,
.landingInquiryForm,
.legalTextPage article,
.legalSingleBlock {
  border-radius: 8px;
}

.landingFeatureGrid article {
  min-height: 150px;
  padding: 18px;
}

.landingFeatureGrid h3,
.landingEditionGridV2 .landingEditionCard h3,
.landingContactCard h2 {
  font-size: 18px;
  line-height: 1.2;
}

.landingFeatureGrid p,
.landingEditionGridV2 .landingEditionCard p,
.landingEditionGridV2 .landingEditionCard li,
.landingContactCard p,
.landingContactCard li,
.legalTextPage p,
.legalSingleBlock p {
  font-size: 14px;
  line-height: 1.5;
}

.landingEditionGridV2 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.landingEditionGridV2 .landingEditionCard {
  min-height: 230px;
  padding: 18px;
}

.landingLegalHero,
.publicPageHero {
  min-height: 0;
  padding: clamp(34px, 5vw, 58px);
  border-radius: 9px;
}

.landingLegalHero p,
.publicPageHero p:not(.landingReleasePill) {
  max-width: 780px;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.45;
}

.landingBodyV2 .legalSingleBlock,
.landingBodyV2 .legalTextPage {
  width: min(980px, calc(100% - 56px));
}

.landingBodyV2 .legalSingleBlock,
.landingBodyV2 .legalTextPage article {
  padding: clamp(26px, 4vw, 42px);
}

.landingBodyV2 .legalTextPage h1,
.landingBodyV2 .legalSingleBlock h1 {
  font-size: clamp(30px, 3.1vw, 42px);
  line-height: 1.08;
}

.landingBodyV2 .legalTextPage h2,
.landingBodyV2 .legalSingleBlock h2 {
  margin-top: 20px;
  font-size: 20px;
}

.landingInquirySection {
  width: min(1160px, calc(100% - 56px));
}

.landingInquirySection > div:first-child {
  gap: 18px;
}

.landingInquirySection .landingEditionGrid.compact {
  gap: 10px;
}

.landingInquirySection .landingEditionGrid.compact .landingEditionCard {
  padding: 16px;
  min-height: 104px;
}

.landingBodyV2 .landingInquiryForm,
.landingInquiryForm {
  padding: 20px;
}

.landingBodyV2 .landingInquiryForm input,
.landingBodyV2 .landingInquiryForm textarea,
.landingBodyV2 .landingInquiryForm select {
  min-height: 42px;
  font-size: 14px;
}

.landingBodyV2 .landingInquiryForm textarea {
  min-height: 112px;
}

.landingContactGrid {
  width: min(980px, calc(100% - 56px));
  gap: 16px;
}

.landingBodyV2 .landingContactCard,
.landingContactCard {
  padding: 22px;
}

.landingBodyV2 .landingContactCard h2 {
  font-size: 30px;
  line-height: 1.08;
}

.landingFooterV2 {
  width: min(1260px, calc(100% - 56px));
  min-height: 54px;
  padding: 14px 24px;
  border-radius: 8px 8px 0 0;
}

@media (max-width: 1100px) {
  .landingHeroV2,
  .landingReleaseBand,
  .landingContactGrid {
    grid-template-columns: 1fr;
  }

  .landingEditionGridV2,
  .landingInquirySection .landingEditionGrid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .landingBodyV2 main,
  .landingBodyV2 .landingNavV2,
  .landingFooterV2,
  .landingInquirySection,
  .landingBodyV2 .legalSingleBlock,
  .landingBodyV2 .legalTextPage,
  .landingContactGrid,
  .publicPageHero {
    width: calc(100% - 24px);
  }

  .landingNavV2 {
    align-items: flex-start;
    gap: 12px;
  }

  .landingNavV2 nav {
    width: 100%;
    justify-content: flex-start;
  }

  .landingHeroV2 h1 {
    font-size: 38px;
  }

  .landingEditionGridV2,
  .landingInquirySection .landingEditionGrid.compact {
    grid-template-columns: 1fr;
  }
}

/* BetreuWerk 2.0 public polish v3: final compact scale */
.landingNavV2 {
  min-height: 64px;
}

.landingNavV2 img {
  width: 180px;
  height: 46px;
}

.landingHeroV2 {
  padding: clamp(30px, 4.2vw, 48px);
  gap: clamp(22px, 3.2vw, 42px);
}

.landingHeroV2 h1 {
  font-size: clamp(34px, 3.45vw, 48px);
  line-height: 1.04;
  max-width: 640px;
}

.landingHeroV2 .landingLead,
.landingHeroLead {
  font-size: clamp(16px, 1.28vw, 19px);
  max-width: 660px;
}

.landingProductStage,
.landingProductWindow {
  min-height: 270px;
}

.landingReleaseBand,
.landingLegalHero,
.publicPageHero {
  padding: clamp(30px, 4.2vw, 48px);
}

.landingReleaseBand h2,
.landingSectionHead h2,
.landingLegalHero h1,
.publicPageHero h1 {
  font-size: clamp(28px, 2.85vw, 40px);
  line-height: 1.08;
}

.landingReleaseGrid strong {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.08;
}

.landingReleaseGrid article {
  min-height: 112px;
  padding: 16px;
}

.landingSectionV2,
.landingInquirySection,
.legalSingleBlock,
.legalTextPage,
.publicPageSection {
  padding: clamp(28px, 4vw, 46px);
}

.landingBodyV2 .legalTextPage h1,
.landingBodyV2 .legalSingleBlock h1 {
  font-size: clamp(28px, 2.7vw, 36px);
}

.landingBodyV2 .legalTextPage h2,
.landingBodyV2 .legalSingleBlock h2 {
  font-size: 18px;
}

/* BetreuWerk 2.0 public polish v4: consistent readable text scale */
.landingBodyV2 .landingLead,
.landingBodyV2 .landingHeroLead,
.landingBodyV2 .publicPageHero p:not(.landingReleasePill),
.landingBodyV2 .landingLegalHero p:not(.landingReleasePill) {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.48;
}

.landingBodyV2 .landingSectionHead p,
.landingBodyV2 .landingFeatureGrid p,
.landingBodyV2 .landingEditionCard p,
.landingBodyV2 .landingEditionCard li,
.landingBodyV2 .landingReleaseBand p,
.landingBodyV2 .landingReleaseGrid span,
.landingBodyV2 .landingContactCard p,
.landingBodyV2 .landingContactCard li,
.landingBodyV2 .landingInquiryForm label,
.landingBodyV2 .landingInquiryForm input,
.landingBodyV2 .landingInquiryForm textarea,
.landingBodyV2 .landingInquiryForm select,
.landingBodyV2 .legalTextPage p,
.landingBodyV2 .legalSingleBlock p {
  font-size: 14px;
  line-height: 1.55;
}

.landingBodyV2 .legalTextPage > .muted {
  font-size: 13px;
}

.landingBodyV2 .landingFeatureGrid h3,
.landingBodyV2 .landingEditionCard h3,
.landingBodyV2 .landingContactCard h2 {
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.18;
}

/* Bank-Demo-Kontrastfix: buntes App-Theme und Control Center muessen auf allen Seiten lesbar bleiben. */
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) #content :where(.topbar, .appHeader, .pageHeader) :where(h1, h2, h3, h4, label, strong),
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) #content > section:first-child :where(h1, h2, h3, h4, label, strong) {
  color: #101923 !important;
  text-shadow: none !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) #content :where(.topbar, .appHeader, .pageHeader) :where(p, small, .muted, .subtitle, .description),
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) #content > section:first-child :where(p, small, .muted, .subtitle, .description) {
  color: #445064 !important;
  text-shadow: none !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .18), transparent 19rem),
    linear-gradient(180deg, rgba(16, 33, 61, .96), rgba(40, 49, 95, .92) 52%, rgba(23, 36, 65, .96)) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) .sidebar :where(nav a, .navButton, button, .sidebarLink) {
  color: #f8fbff !important;
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .10) !important;
  backdrop-filter: blur(16px) saturate(145%);
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.controlCenterBody) .sidebar :where(nav a.active, nav a:hover, .navButton.active, .navButton:hover, .sidebarLink.active, .sidebarLink:hover) {
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, .16)) !important;
  border-color: rgba(255, 255, 255, .42) !important;
  box-shadow: inset 4px 0 0 #ffffff, 0 18px 36px rgba(31, 111, 235, .24) !important;
}

#content :where(.workflowStep span, .easyStepHead > span, .controlStepNo, .stepNo, .setupStepNo, .compensationSteps strong, .wizardStepNumber) {
  min-width: 2rem !important;
  min-height: 2rem !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45) !important;
  background: linear-gradient(135deg, var(--bw-accent), var(--bw-accent-strong)) !important;
  border: 1px solid rgba(255, 255, 255, .55) !important;
  box-shadow: 0 10px 24px var(--bw-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .38) !important;
}

body.controlCenterBody :where(.controlFormBand, .externalBackupBox, .setupMailboxBox, .controlInfoBox, .controlDnsBox, .officialFormsControlPanel, .officialFormsControlList, .officialFormsTableRow, .controlWizardStep, .controlFold, .controlTechDetails, .inlineSubPanel, .supportMailDetail, .supportComposeForm, .controlMailList, .controlInquiryWorkspace, .billingWorkspace, .billingDetailGrid div, .mirrorStatusPanel, .maintenancePreview, .panel) {
  color: var(--cc-ink) !important;
  background: linear-gradient(180deg, rgba(42, 55, 70, .96), rgba(22, 34, 49, .96)) !important;
  border-color: var(--cc-line) !important;
}

body.controlCenterBody :where(.controlFormBand *, .externalBackupBox *, .setupMailboxBox *, .controlInfoBox *, .controlDnsBox *, .officialFormsControlPanel *, .officialFormsControlList *, .officialFormsTableRow *, .controlWizardStep *, .controlFold *, .controlTechDetails *, .inlineSubPanel *, .supportMailDetail *, .supportComposeForm *, .controlMailList *, .controlInquiryWorkspace *, .billingWorkspace *, .billingDetailGrid div *, .mirrorStatusPanel *, .maintenancePreview *, .panel *) {
  color: inherit !important;
}

body.controlCenterBody :where(h1, h2, h3, h4, label, strong, b, th, summary, legend) {
  color: #f8fbff !important;
}

body.controlCenterBody :where(.muted, small, p, li, td, dt, dd, span, em) {
  color: #d5e1ef !important;
}

body.controlCenterBody :where(input, textarea, select) {
  color: #ffffff !important;
  background: rgba(23, 35, 49, .98) !important;
  border-color: rgba(164, 190, 221, .52) !important;
}

body.controlCenterBody :where(input::placeholder, textarea::placeholder) {
  color: #b7c8dc !important;
  opacity: 1 !important;
}

body.controlCenterBody :where(input:disabled, textarea:disabled, select:disabled, button:disabled),
body.controlCenterBody :where(input[readonly], textarea[readonly], select[readonly]) {
  color: #e3edf8 !important;
  -webkit-text-fill-color: #e3edf8 !important;
  background: rgba(48, 62, 78, .92) !important;
  border-color: rgba(164, 190, 221, .38) !important;
  opacity: 1 !important;
}

body.controlCenterBody :where(button.primary, .buttonLink.primary, .controlSectionNav button.active, .controlWizardPill.active, .statusButtonGroup .statusButton.active),
body.controlCenterBody :where(button.primary *, .buttonLink.primary *, .controlSectionNav button.active *, .controlWizardPill.active *, .statusButtonGroup .statusButton.active *) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Bank-Demo-Finale: harte Lesbarkeit fuer buntes App-Theme und Control Center. */
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) {
  background:
    radial-gradient(circle at 16% 4%, rgba(31, 111, 235, .16), transparent 32rem),
    radial-gradient(circle at 88% 9%, rgba(255, 74, 104, .12), transparent 30rem),
    linear-gradient(180deg, #f8fbff 0%, #eef3ff 48%, #f5f2ff 100%) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .topbar,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .appHeader,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .pageHeader,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content > section:first-child {
  color: #101923 !important;
  background:
    linear-gradient(90deg, #1f6feb 0, #7c5cff 33%, #ff4b63 67%, #ffc53d 100%) top / 100% 4px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(243, 247, 255, .88)) !important;
  border-color: rgba(105, 143, 207, .34) !important;
  box-shadow: 0 24px 60px rgba(40, 68, 120, .12) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .topbar h1,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .topbar h2,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .topbar h3,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .topbar label,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .topbar strong,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .appHeader h1,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .appHeader h2,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .pageHeader h1,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .pageHeader h2,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content > section:first-child h1,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content > section:first-child h2,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content > section:first-child h3,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content > section:first-child label,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content > section:first-child strong {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  text-shadow: none !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .topbar p,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .topbar small,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .topbar .muted,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .appHeader p,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .appHeader small,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .appHeader .muted,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .pageHeader p,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .pageHeader small,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content .pageHeader .muted,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content > section:first-child p,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content > section:first-child small,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) #content > section:first-child .muted {
  color: #425068 !important;
  -webkit-text-fill-color: #425068 !important;
  text-shadow: none !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, .20), transparent 18rem),
    linear-gradient(180deg, rgba(14, 35, 66, .98), rgba(42, 54, 105, .94) 56%, rgba(22, 34, 63, .98)) !important;
  border-right: 1px solid rgba(255, 255, 255, .13) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar button,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .navButton,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .sidebarLink,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar a {
  color: #f8fbff !important;
  -webkit-text-fill-color: #f8fbff !important;
  background: rgba(255, 255, 255, .11) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .10) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar button.active,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar button:hover,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .navButton.active,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .navButton:hover,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .sidebarLink.active,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .sidebarLink:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .16)) !important;
  border-color: rgba(255, 255, 255, .48) !important;
  box-shadow: inset 4px 0 0 #ffffff, 0 18px 36px rgba(31, 111, 235, .24) !important;
}

html[data-theme="colorful"] #content .workflowStep span,
html[data-theme="colorful"] #content .easyStepHead > span,
html[data-theme="colorful"] #content .controlStepNo,
html[data-theme="colorful"] #content .stepNo,
html[data-theme="colorful"] #content .setupStepNo,
html[data-theme="colorful"] #content .wizardStepNumber {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #1f6feb, #0f8b7d) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55) !important;
  box-shadow: 0 12px 24px rgba(31, 111, 235, .28), inset 0 1px 0 rgba(255, 255, 255, .48) !important;
}

html[data-control-center="true"],
body.controlCenterBody {
  --cc-accent: #1f6feb;
  --cc-accent-strong: #1557c0;
  --cc-ink: #101923;
  --cc-muted: #48576f;
  --cc-subtle: #68778f;
  --cc-line: rgba(103, 142, 207, .32);
  --cc-line-strong: rgba(31, 111, 235, .64);
  --cc-surface: rgba(255, 255, 255, .86);
  --cc-surface-strong: rgba(255, 255, 255, .94);
  --cc-field: rgba(255, 255, 255, .96);
  --cc-field-ink: #101923;
  --cc-shadow-soft: 0 22px 58px rgba(45, 69, 120, .14);
  --cc-page-bg:
    radial-gradient(circle at 15% 2%, rgba(31, 111, 235, .16), transparent 34rem),
    radial-gradient(circle at 82% 10%, rgba(255, 74, 104, .12), transparent 32rem),
    linear-gradient(135deg, #f7fbff 0%, #eef3ff 48%, #f7f2ff 100%);
}

body.controlCenterBody {
  color: #101923 !important;
  background: var(--cc-page-bg) !important;
}

body.controlCenterBody::before {
  background:
    linear-gradient(90deg, rgba(31, 111, 235, .10), transparent 34%, rgba(255, 189, 40, .08)),
    radial-gradient(circle at 84% 18%, rgba(124, 92, 255, .10), transparent 30rem) !important;
}

body.controlCenterBody .controlHero,
body.controlCenterBody .controlActionBar,
body.controlCenterBody .panel,
body.controlCenterBody .controlStat,
body.controlCenterBody .inlineSubPanel,
body.controlCenterBody .controlFold,
body.controlCenterBody .controlChoiceCard,
body.controlCenterBody .controlWizardStep,
body.controlCenterBody .controlCustomerTableRow,
body.controlCenterBody .controlCustomerItem,
body.controlCenterBody .controlCustomerRow,
body.controlCenterBody .billingCustomerCard,
body.controlCenterBody .billingInvoiceRow,
body.controlCenterBody .billingDetailGrid div,
body.controlCenterBody .billingPositionRow,
body.controlCenterBody .supportMailList,
body.controlCenterBody .supportMailDetail,
body.controlCenterBody .supportComposeForm,
body.controlCenterBody .supportMailRow,
body.controlCenterBody .supportMailFacts div,
body.controlCenterBody .supportMailBody,
body.controlCenterBody .controlMailList,
body.controlCenterBody .controlMailTableRow,
body.controlCenterBody .controlInquiryWorkspace,
body.controlCenterBody .controlInquiryRow,
body.controlCenterBody .controlInquiryFacts div,
body.controlCenterBody .officialFormsControlPanel,
body.controlCenterBody .officialFormsControlList,
body.controlCenterBody .officialFormsTableRow,
body.controlCenterBody .controlFormBand,
body.controlCenterBody .externalBackupBox,
body.controlCenterBody .setupMailboxBox,
body.controlCenterBody .controlInfoBox,
body.controlCenterBody .controlDnsBox,
body.controlCenterBody .controlTechDetails,
body.controlCenterBody .mirrorStatusPanel,
body.controlCenterBody .maintenancePreview {
  color: #101923 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(247, 250, 255, .86)) !important;
  border-color: rgba(103, 142, 207, .34) !important;
  box-shadow: var(--cc-shadow-soft) !important;
}

body.controlCenterBody .controlHero,
body.controlCenterBody .panel {
  background:
    linear-gradient(90deg, #1f6feb 0, #7c5cff 33%, #ff4b63 67%, #ffc53d 100%) top / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .88)) !important;
}

body.controlCenterBody h1,
body.controlCenterBody h2,
body.controlCenterBody h3,
body.controlCenterBody h4,
body.controlCenterBody label,
body.controlCenterBody strong,
body.controlCenterBody b,
body.controlCenterBody th,
body.controlCenterBody summary,
body.controlCenterBody legend {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  text-shadow: none !important;
}

body.controlCenterBody p,
body.controlCenterBody li,
body.controlCenterBody td,
body.controlCenterBody dt,
body.controlCenterBody dd,
body.controlCenterBody span,
body.controlCenterBody small,
body.controlCenterBody em,
body.controlCenterBody .muted {
  color: #445064 !important;
  -webkit-text-fill-color: #445064 !important;
  text-shadow: none !important;
}

body.controlCenterBody a,
body.controlCenterBody .buttonLink:not(.primary) {
  color: #1557c0 !important;
}

body.controlCenterBody .controlSectionNav {
  background: rgba(255, 255, 255, .78) !important;
  border: 1px solid rgba(103, 142, 207, .28) !important;
  box-shadow: 0 20px 50px rgba(45, 69, 120, .12) !important;
}

body.controlCenterBody .controlSectionNav button,
body.controlCenterBody button:not(.primary),
body.controlCenterBody .buttonLink:not(.primary) {
  color: #1b2c48 !important;
  -webkit-text-fill-color: #1b2c48 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(237, 243, 255, .90)) !important;
  border-color: rgba(103, 142, 207, .34) !important;
}

body.controlCenterBody button.primary,
body.controlCenterBody .buttonLink.primary,
body.controlCenterBody .controlSectionNav button.active,
body.controlCenterBody .controlWizardPill.active,
body.controlCenterBody .statusButtonGroup .statusButton.active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #1f6feb, #7c5cff 48%, #ff4b63) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(31, 111, 235, .28) !important;
}

body.controlCenterBody button.primary *,
body.controlCenterBody .buttonLink.primary *,
body.controlCenterBody .controlSectionNav button.active *,
body.controlCenterBody .controlWizardPill.active *,
body.controlCenterBody .statusButtonGroup .statusButton.active * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.controlCenterBody input,
body.controlCenterBody textarea,
body.controlCenterBody select {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background: rgba(255, 255, 255, .98) !important;
  border-color: rgba(103, 142, 207, .38) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78) !important;
}

body.controlCenterBody input::placeholder,
body.controlCenterBody textarea::placeholder {
  color: #6c7890 !important;
  -webkit-text-fill-color: #6c7890 !important;
  opacity: 1 !important;
}

body.controlCenterBody input:disabled,
body.controlCenterBody textarea:disabled,
body.controlCenterBody select:disabled,
body.controlCenterBody button:disabled,
body.controlCenterBody input[readonly],
body.controlCenterBody textarea[readonly],
body.controlCenterBody select[readonly] {
  color: #526174 !important;
  -webkit-text-fill-color: #526174 !important;
  background: rgba(238, 244, 255, .96) !important;
  border-color: rgba(103, 142, 207, .26) !important;
  opacity: 1 !important;
}

body.controlCenterBody .controlChoiceIcon,
body.controlCenterBody .controlStepNo,
body.controlCenterBody .pill,
body.controlCenterBody .statusMark,
body.controlCenterBody .navBadge {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #1f6feb, #0f8b7d) !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42) !important;
}

body.controlCenterBody .maintenancePreview {
  border-left: 5px solid #ff4b63 !important;
  background: linear-gradient(180deg, #fff2f4, #fff9f9) !important;
}

body.controlCenterBody .maintenancePreview strong,
body.controlCenterBody .maintenancePreview span {
  color: #8d1f2e !important;
  -webkit-text-fill-color: #8d1f2e !important;
}

/* Bank-Demo-Releasefix: App-Kopfzeile, Sidebar, Schrittzahlen und Control Center lesbar halten. */
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .app > .topbar {
  color: #101923 !important;
  background:
    linear-gradient(90deg, #1f6feb 0, #7c5cff 34%, #ff4b63 68%, #ffc53d 100%) top / 100% 4px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(245, 249, 255, .90)) !important;
  border: 1px solid rgba(103, 142, 207, .34) !important;
  border-top: 0 !important;
  box-shadow: 0 22px 58px rgba(40, 63, 112, .16) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .app > .topbar :where(h1, h2, h3, h4, label, strong, b, #viewTitle) {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  text-shadow: none !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .app > .topbar :where(p, small, .muted, #viewSubtitle, .globalPersonFilter, .globalPersonFilter *) {
  color: #425068 !important;
  -webkit-text-fill-color: #425068 !important;
  text-shadow: none !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .app > .topbar :where(input, select, textarea) {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background: rgba(255, 255, 255, .98) !important;
  border-color: rgba(103, 142, 207, .42) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(94, 209, 255, .22), transparent 17rem),
    linear-gradient(180deg, rgba(13, 36, 72, .98), rgba(44, 59, 116, .95) 54%, rgba(18, 31, 66, .98)) !important;
  border-right: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .07), 18px 0 48px rgba(8, 21, 48, .18) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .brand {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 44px rgba(11, 28, 60, .22) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .brand img {
  filter: none !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar :where(button, .navButton, .sidebarLink, a) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 8px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .36) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar :where(button.active, button:hover, .navButton.active, .navButton:hover, .sidebarLink.active, .sidebarLink:hover, a.active, a:hover) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #1f6feb, #315fe8 55%, #7c5cff) !important;
  border-color: rgba(255, 255, 255, .42) !important;
  box-shadow: inset 4px 0 0 #ffffff, 0 18px 36px rgba(31, 111, 235, .32) !important;
}

html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar :where(.navBadge, .badge, .countBadge) {
  color: #10213d !important;
  -webkit-text-fill-color: #10213d !important;
  background: linear-gradient(135deg, #ffd34d, #ffb000) !important;
  border: 1px solid rgba(255, 255, 255, .70) !important;
  text-shadow: none !important;
  box-shadow: 0 10px 20px rgba(255, 176, 0, .32) !important;
}

html[data-theme="colorful"] #content .workflowStep span:not(:first-child) {
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  text-shadow: none !important;
  display: inline !important;
  place-items: normal !important;
}

html[data-theme="colorful"] #content .workflowStep > span:first-child,
html[data-theme="colorful"] #content .easyStepHead > span:first-child,
html[data-theme="colorful"] #content :where(.controlStepNo, .stepNo, .setupStepNo, .wizardStepNumber) {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 2rem !important;
  width: 2rem !important;
  min-height: 2rem !important;
  height: 2rem !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #1f6feb, #315fe8 58%, #7c5cff) !important;
  border: 2px solid rgba(255, 255, 255, .86) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55) !important;
  box-shadow: 0 12px 24px rgba(31, 111, 235, .30), inset 0 1px 0 rgba(255, 255, 255, .58) !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

body.controlCenterBody:not(.controlLoggedOut) {
  color: #101923 !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(31, 111, 235, .18), transparent 30rem),
    radial-gradient(circle at 86% 8%, rgba(255, 75, 99, .13), transparent 32rem),
    linear-gradient(135deg, #f6fbff 0%, #eef3ff 52%, #f6f2ff 100%) !important;
}

body.controlCenterBody:not(.controlLoggedOut) .controlShell {
  max-width: min(1760px, calc(100vw - 48px)) !important;
}

body.controlCenterBody:not(.controlLoggedOut) :where(.controlHero, .controlActionBar, .panel, .controlStat, .inlineSubPanel, .controlFold, .controlChoiceCard, .controlWizardStep, .controlCustomerTableRow, .controlCustomerItem, .controlCustomerRow, .billingCustomerCard, .billingInvoiceRow, .billingDetailGrid div, .billingPositionRow, .supportMailList, .supportMailDetail, .supportComposeForm, .supportMailRow, .supportMailFacts div, .supportMailBody, .controlMailList, .controlMailTableRow, .controlInquiryWorkspace, .controlInquiryRow, .controlInquiryFacts div, .officialFormsControlPanel, .officialFormsControlList, .officialFormsTableRow, .controlFormBand, .externalBackupBox, .setupMailboxBox, .controlInfoBox, .controlDnsBox, .controlTechDetails, .mirrorStatusPanel, .maintenancePreview) {
  color: #101923 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .88)) !important;
  border-color: rgba(103, 142, 207, .34) !important;
  box-shadow: 0 22px 58px rgba(45, 69, 120, .14) !important;
}

body.controlCenterBody:not(.controlLoggedOut) :where(.controlHero, .panel) {
  background:
    linear-gradient(90deg, #1f6feb 0, #7c5cff 33%, #ff4b63 67%, #ffc53d 100%) top / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(247, 250, 255, .88)) !important;
}

body.controlCenterBody:not(.controlLoggedOut) :where(h1, h2, h3, h4, label, strong, b, th, summary, legend) {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  text-shadow: none !important;
}

body.controlCenterBody:not(.controlLoggedOut) :where(p, li, td, dt, dd, span, small, em, .muted) {
  color: #425068 !important;
  -webkit-text-fill-color: #425068 !important;
  text-shadow: none !important;
}

body.controlCenterBody:not(.controlLoggedOut) :where(input, textarea, select) {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background: #ffffff !important;
  border-color: rgba(103, 142, 207, .40) !important;
  opacity: 1 !important;
}

body.controlCenterBody:not(.controlLoggedOut) :where(input::placeholder, textarea::placeholder) {
  color: #6c7890 !important;
  -webkit-text-fill-color: #6c7890 !important;
  opacity: 1 !important;
}

body.controlCenterBody:not(.controlLoggedOut) :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [readonly]) {
  color: #526174 !important;
  -webkit-text-fill-color: #526174 !important;
  background: #eef4ff !important;
  border-color: rgba(103, 142, 207, .28) !important;
  opacity: 1 !important;
}

body.controlCenterBody:not(.controlLoggedOut) :where(.controlSectionNav button.active, button.primary, .buttonLink.primary, .controlWizardPill.active, .statusButtonGroup .statusButton.active) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #1f6feb, #7c5cff 50%, #ff4b63) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(31, 111, 235, .28) !important;
}

body.controlCenterBody:not(.controlLoggedOut) :where(.controlSectionNav button.active, button.primary, .buttonLink.primary, .controlWizardPill.active, .statusButtonGroup .statusButton.active) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.authMode {
  grid-template-columns: 1fr !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

body.authMode .sidebar,
body.authMode .topbar {
  display: none !important;
  visibility: hidden !important;
}

body.authMode .app {
  min-height: 100vh !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

body.authMode #content > :not(.loginPage):not(.passwordChangePage) {
  display: none !important;
}

body.controlLoggedOut.controlCenterBody .controlHero {
  display: none !important;
}

body.controlLoggedOut.controlCenterBody .controlShell,
body.controlLoggedOut.controlCenterBody #controlRoot,
body.controlLoggedOut.controlCenterBody .controlLogin {
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}

/* Targeted readability repairs kept separate from the restored VPS HD theme. */
#content .personFileMeta {
  gap: 7px !important;
  color: #dce8f6 !important;
  line-height: 1.45 !important;
}

#content .personFileMeta span {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-height: 22px !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid #b9cde4 !important;
  background: #f4f8ff !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

html[data-theme="dark"] #content .personFileMeta span,
html[data-theme="office"] #content .personFileMeta span,
html[data-theme="colorful"] #content .personFileMeta span {
  border-color: #bdd2eb !important;
  background: #f5f9ff !important;
  color: #102033 !important;
  -webkit-text-fill-color: #102033 !important;
}

html[data-theme="dark"] #content .timeline,
html[data-theme="office"] #content .timeline {
  gap: 10px !important;
}

html[data-theme="dark"] #content .timelineItem,
html[data-theme="office"] #content .timelineItem {
  border: 1px solid #456a9d !important;
  border-left: 5px solid #4f9bff !important;
  background: linear-gradient(180deg, #142638, #0f1d2b) !important;
  color: #f6fbff !important;
  -webkit-text-fill-color: #f6fbff !important;
  text-shadow: none !important;
  overflow-wrap: anywhere !important;
}

html[data-theme="dark"] #content .timelineItem :where(strong, b),
html[data-theme="office"] #content .timelineItem :where(strong, b) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] #content .timelineItem :where(p, span, small, .muted),
html[data-theme="office"] #content .timelineItem :where(p, span, small, .muted) {
  color: #dce9f8 !important;
  -webkit-text-fill-color: #dce9f8 !important;
}

html[data-theme="dark"] #content .printSheet,
html[data-theme="office"] #content .printSheet {
  background: #ffffff !important;
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #content .printSheet :where(article, section, aside, div, pre, p, span, strong, b),
html[data-theme="office"] #content .printSheet :where(article, section, aside, div, pre, p, span, strong, b) {
  background: transparent !important;
  color: #111820 !important;
  -webkit-text-fill-color: #111820 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #content .printSheet :where(.senderWindowLine, .letterMeta span, .letterFooter),
html[data-theme="office"] #content .printSheet :where(.senderWindowLine, .letterMeta span, .letterFooter) {
  color: #536273 !important;
  -webkit-text-fill-color: #536273 !important;
}

#content .stats {
  align-items: stretch !important;
}

#content .stats span {
  min-width: 0 !important;
  overflow: hidden !important;
}

#content .stats span strong,
#content .stats span small {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

#content .stats span strong {
  line-height: 1.08 !important;
}

#content .stats .longStat strong,
#content .fachlogikButtonStats .longStat strong {
  font-size: clamp(17px, 1.35vw, 22px) !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  letter-spacing: 0 !important;
}

#content .fachlogikButtonStats {
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(118px, .8fr)) !important;
}

/* Phase 67: BetreuWerk-Webmail im bestehenden HD-Theme. */
#content .emailToolbarPanel {
  margin-bottom: 14px !important;
}

#content .emailToolbarPanel .editorHeader {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

#content .emailTopActions {
  display: flex !important;
  align-items: end !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  min-width: min(620px, 100%) !important;
}

#content .emailTopActions label {
  display: grid !important;
  gap: 6px !important;
  min-width: min(360px, 100%) !important;
}

#content .emailWebmailShell {
  display: grid !important;
  grid-template-columns: minmax(230px, 270px) minmax(360px, var(--email-list-width, 720px)) 10px minmax(520px, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
  min-height: clamp(660px, calc(100vh - 238px), 940px) !important;
}

#content .emailWebmailShell > :not(.emailReaderResizer) {
  margin-right: 14px !important;
}

#content .emailReaderResizer {
  cursor: col-resize !important;
  align-self: stretch !important;
  margin-right: 14px !important;
  border-left: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, var(--bw-line, #dbe3ea)) !important;
  border-right: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, var(--bw-line, #dbe3ea)) !important;
  background: linear-gradient(90deg, rgba(31,111,235,.16), rgba(255,255,255,.8), rgba(31,111,235,.16)) !important;
  border-radius: 8px !important;
}

#content .emailMailboxPane,
#content .webmailListPanel,
#content .emailReaderPane {
  min-width: 0 !important;
  overflow: hidden !important;
}

#content .emailMailboxPane {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  padding: 14px !important;
}

#content .emailNewButton {
  width: 100% !important;
  min-height: 46px !important;
  font-size: 15px !important;
}

#content .emailMailboxGroup {
  display: grid !important;
  gap: 8px !important;
  padding-top: 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, var(--bw-line, #dbe3ea)) !important;
}

#content .emailMailboxGroup > strong {
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
  color: color-mix(in srgb, var(--bw-muted, #60717d) 74%, var(--bw-ink, #111827) 26%) !important;
}

#content .emailMailboxGroup button {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  padding: 9px 10px !important;
  text-align: left !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#content .emailMailboxGroup button span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#content .emailMailboxGroup button b {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 26px !important;
  height: 24px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-surface-3, #ffffff)) !important;
  color: var(--bw-ink, #111827) !important;
  font-size: 12px !important;
}

#content .emailMailboxGroup button.active {
  background: linear-gradient(135deg, var(--bw-accent, #1f6feb), color-mix(in srgb, var(--bw-accent, #1f6feb) 78%, #101923 22%)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 62%, #ffffff 16%) !important;
  color: var(--bw-on-accent, #ffffff) !important;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, transparent) !important;
}

#content .emailMailboxGroup button.active :where(span, b) {
  color: var(--bw-on-accent, #ffffff) !important;
  -webkit-text-fill-color: var(--bw-on-accent, #ffffff) !important;
}

#content .emailMailboxGroup button.active b {
  background: rgba(255, 255, 255, .18) !important;
  border: 1px solid rgba(255, 255, 255, .28) !important;
}

#content .webmailListPanel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px !important;
}

#content .emailListHead {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 300px) !important;
  gap: 12px !important;
  align-items: end !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 20%, var(--bw-line, #dbe3ea)) !important;
}

#content .emailListHead input {
  min-height: 40px !important;
}

#content .emailFolderTabs {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding-bottom: 2px !important;
  scrollbar-width: thin !important;
}

#content .emailFolderTabs button {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

#content .emailFolderTabs button.active {
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, var(--bw-surface-3, #ffffff)) !important;
  border-color: var(--bw-accent, #1f6feb) !important;
  color: var(--bw-ink, #111827) !important;
}

#content .webmailMessageList {
  display: grid !important;
  align-content: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  padding-right: 4px !important;
}

#content .emailItem {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 10px !important;
  min-height: 86px !important;
  padding: 11px !important;
  border-radius: 8px !important;
  border-left: 4px solid transparent !important;
  box-shadow: none !important;
}

#content .emailItem .itemMain {
  min-width: 0 !important;
  width: 100% !important;
  cursor: pointer !important;
}

#content .emailItem .itemMain strong,
#content .emailItem .itemMain span {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#content .emailItem .itemMain strong {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

#content .emailItem .itemActions {
  justify-content: end !important;
  align-items: start !important;
}

#content .emailItemActions {
  display: grid !important;
  justify-items: end !important;
  gap: 8px !important;
  min-width: 178px !important;
}

#content .emailRowActions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: 230px !important;
}

#content .emailRowAction {
  min-height: 28px !important;
  padding: 5px 8px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

#content .emailItem.selected {
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 62%, var(--bw-line, #dbe3ea)) !important;
  border-left-color: var(--bw-accent, #1f6feb) !important;
  background: color-mix(in srgb, var(--bw-accent, #1f6feb) 14%, var(--bw-surface-3, #ffffff)) !important;
}

#content .emailItem.unread {
  border-left-color: #ffd23f !important;
  background: color-mix(in srgb, #ffd23f 13%, var(--bw-surface-3, #ffffff)) !important;
}

#content .emailItem.spam {
  border-left-color: #f97316 !important;
  background: color-mix(in srgb, #f97316 10%, var(--bw-surface-3, #ffffff)) !important;
}

#content .emailItem.trash {
  border-left-color: #94a3b8 !important;
  opacity: 0.92 !important;
}

#content .emailFolderTools {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid color-mix(in srgb, var(--bw-line, #dbe3ea) 78%, transparent) !important;
}

#content .emailFolderTools button {
  width: 100% !important;
  min-height: 34px !important;
}

#content .emailFolderTools button:disabled {
  cursor: not-allowed !important;
  opacity: 0.46 !important;
}

.emailContextMenu {
  position: fixed !important;
  z-index: 9999 !important;
  min-width: 210px !important;
  padding: 8px !important;
  border-radius: 8px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, var(--bw-line, #dbe3ea)) !important;
  background: linear-gradient(180deg, var(--bw-surface-3, #ffffff), var(--bw-surface, #f8fbff)) !important;
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.22) !important;
}

.emailContextMenu button {
  width: 100% !important;
  justify-content: flex-start !important;
  min-height: 36px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.emailContextMenu button + button {
  margin-top: 4px !important;
}

.emailConfirmBackdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background: rgba(6, 12, 20, 0.46) !important;
  backdrop-filter: blur(6px) !important;
}

.emailConfirmBox {
  width: min(460px, 100%) !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 32%, var(--bw-line, #dbe3ea)) !important;
  background: linear-gradient(180deg, var(--bw-surface-3, #ffffff), var(--bw-surface, #f8fbff)) !important;
  box-shadow: 0 28px 72px rgba(15, 23, 42, 0.28) !important;
  padding: 18px !important;
}

.emailConfirmBox h3 {
  margin: 0 0 8px !important;
  font-size: 20px !important;
}

.emailConfirmBox p {
  margin: 0 !important;
  color: var(--bw-muted, #536171) !important;
  line-height: 1.45 !important;
}

.emailConfirmActions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

#content .mailUnreadDot {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  margin-right: 7px !important;
  border-radius: 999px !important;
  background: #ffd23f !important;
  box-shadow: 0 0 0 3px rgba(255, 210, 63, .20) !important;
  vertical-align: 1px !important;
}

#content .emailReaderPane {
  display: grid !important;
  grid-template-rows: none !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 14px !important;
  padding: 16px !important;
}

#content .emailReaderToolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 20%, var(--bw-line, #dbe3ea)) !important;
}

#content .emailReaderToolbar button {
  min-height: 36px !important;
}

#content .emailReaderHeader {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
}

#content .emailReaderHeader h2 {
  font-size: clamp(22px, 2.2vw, 34px) !important;
  line-height: 1.12 !important;
  overflow-wrap: anywhere !important;
}

#content .emailReaderHeader span {
  color: color-mix(in srgb, var(--bw-muted, #60717d) 88%, var(--bw-ink, #111827) 12%) !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
}

#content .emailReaderMeta {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#content .emailReaderMeta div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-line, #dbe3ea)) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bw-surface-3, #ffffff) 90%, var(--bw-accent, #1f6feb) 10%) !important;
}

#content .emailReaderMeta small {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0 !important;
}

#content .emailReaderMeta strong {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  line-height: 1.28 !important;
}

#content .emailArchiveLine {
  display: grid !important;
  grid-template-columns: minmax(240px, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, var(--bw-line, #dbe3ea)) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bw-accent-soft, rgba(31, 111, 235, .12)) 58%, var(--bw-surface-2, #ffffff)) !important;
}

#content .emailArchiveLine label {
  display: grid !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#content .emailArchiveLine select {
  width: 100% !important;
}

#content .emailIncomingAttachments {
  display: grid !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-line, #dbe3ea)) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bw-surface-2, #ffffff) 92%, var(--bw-accent, #1f6feb) 8%) !important;
}

#content .emailIncomingAttachments h3 {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

#content .emailAttachmentDownloadList {
  display: grid !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#content .emailAttachmentDownloadList li {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
  padding: 2px 0 !important;
  line-height: 1.25 !important;
}

#content .emailAttachmentDownloadList a {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--bw-accent, #1f6feb) !important;
  -webkit-text-fill-color: var(--bw-accent, #1f6feb) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

#content .emailAttachmentDownloadList a:hover {
  text-decoration: underline !important;
}

#content .emailAttachmentDownloadList small {
  flex: 0 0 auto !important;
  color: var(--bw-muted, #667582) !important;
  -webkit-text-fill-color: var(--bw-muted, #667582) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

#content .emailBodyReader {
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-line, #dbe3ea)) !important;
  border-radius: 8px !important;
  background: var(--bw-input-bg, var(--bw-input, #ffffff)) !important;
  color: var(--bw-input-ink, var(--bw-ink, #111827)) !important;
  font: 500 15px/1.55 Inter, Arial, Helvetica, sans-serif !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

#content .emailBodyHtml {
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-line, #dbe3ea)) !important;
  border-radius: 8px !important;
  background: var(--bw-input-bg, var(--bw-input, #ffffff)) !important;
  color: var(--bw-input-ink, var(--bw-ink, #111827)) !important;
  font: 500 15px/1.55 Inter, Arial, Helvetica, sans-serif !important;
  overflow-wrap: anywhere !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

#content .emailBodyHtml img {
  max-width: min(100%, 720px) !important;
  height: auto !important;
  display: block !important;
  margin: 10px 0 !important;
}

#content .emailSecurityNotice {
  margin: 0 !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #f59e0b !important;
  background: #fffbeb !important;
  color: #78350f !important;
  -webkit-text-fill-color: #78350f !important;
  font-weight: 700 !important;
}

#content .emailSecurityNotice ul {
  margin: 6px 0 0 18px !important;
  padding: 0 !important;
}

#content .emailSecurityNotice.ok {
  border-color: #86efac !important;
  background: #f0fdf4 !important;
  color: #14532d !important;
  -webkit-text-fill-color: #14532d !important;
}

#content .emailSecurityNotice.danger {
  border-color: #ef4444 !important;
  background: #fef2f2 !important;
  color: #7f1d1d !important;
  -webkit-text-fill-color: #7f1d1d !important;
}

#content .emailReaderPane > .emailSecurityNotice {
  min-height: 0 !important;
  height: auto !important;
  max-height: 40px !important;
  align-self: start !important;
  justify-self: stretch !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
}

#content .emailReaderPane > .emailSecurityNotice.ok {
  height: 36px !important;
  max-height: 36px !important;
  padding: 7px 12px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#content .emailReaderPane > .emailSecurityNotice:not(.ok) {
  display: block !important;
  max-height: 160px !important;
  overflow: auto !important;
}

#content .emailReaderPane > .emailSecurityNotice ul {
  margin: 4px 0 0 18px !important;
}

#content .emailReaderPane > .emailBodyHtml,
#content .emailReaderPane > .emailBodyReader {
  align-self: stretch !important;
  min-height: 280px !important;
}

.emailComposerBackdrop {
  z-index: 120 !important;
  background: rgba(4, 9, 14, .56) !important;
  backdrop-filter: blur(5px) !important;
  align-items: center !important;
}

#content .emailComposerModal {
  width: min(760px, calc(100vw - 36px)) !important;
  max-height: min(860px, calc(100vh - 36px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  box-shadow: var(--bw-shadow-deep, 0 30px 90px rgba(0, 0, 0, .28)) !important;
}

#content .emailComposerModal .modalHeader {
  margin: 0 !important;
  padding: 14px 16px !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-surface-2, #ffffff)), var(--bw-surface, #ffffff)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, var(--bw-line, #dbe3ea)) !important;
}

#content .webmailComposerForm {
  max-height: calc(100vh - 154px) !important;
  overflow: auto !important;
  padding: 16px !important;
  gap: 12px !important;
  background: var(--bw-surface, #ffffff) !important;
}

#content .webmailComposerForm textarea[name="body"] {
  min-height: 260px !important;
}

#content .webmailComposerForm .stickyFormActions {
  position: sticky !important;
  bottom: 0 !important;
  margin: 4px -16px -16px !important;
  padding: 12px 16px !important;
  background: color-mix(in srgb, var(--bw-surface, #ffffff) 94%, var(--bw-accent, #1f6feb) 6%) !important;
  border-top: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, var(--bw-line, #dbe3ea)) !important;
}

html[data-theme="dark"] #content .emailWebmailShell,
html[data-theme="office"] #content .emailWebmailShell {
  color-scheme: dark !important;
}

html[data-theme="dark"] #content :where(.emailMailboxPane, .webmailListPanel, .emailReaderPane, .emailComposerModal),
html[data-theme="office"] #content :where(.emailMailboxPane, .webmailListPanel, .emailReaderPane, .emailComposerModal) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-3, #24313c) 92%, #ffffff 4%), var(--bw-surface, #101923)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #74a7ff) 42%, var(--bw-line, #4b5c6c)) !important;
}

html[data-theme="dark"] #content .emailReaderMeta div,
html[data-theme="office"] #content .emailReaderMeta div,
html[data-theme="dark"] #content .emailArchiveLine,
html[data-theme="office"] #content .emailArchiveLine,
html[data-theme="dark"] #content .emailBodyReader,
html[data-theme="office"] #content .emailBodyReader {
  background: color-mix(in srgb, var(--bw-surface-3, #24313c) 88%, #050a0d 12%) !important;
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
}

html[data-theme="dark"] #content .emailIncomingAttachments,
html[data-theme="office"] #content .emailIncomingAttachments {
  background: color-mix(in srgb, var(--bw-surface-3, #24313c) 82%, #050a0d 18%) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #74a7ff) 32%, var(--bw-line, #4b5c6c)) !important;
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
}

html[data-theme="dark"] #content .emailAttachmentDownloadList a,
html[data-theme="office"] #content .emailAttachmentDownloadList a {
  color: #58a6ff !important;
  -webkit-text-fill-color: #58a6ff !important;
}

html[data-theme="dark"] #content .emailAttachmentDownloadList small,
html[data-theme="office"] #content .emailAttachmentDownloadList small {
  color: #bfd0e0 !important;
  -webkit-text-fill-color: #bfd0e0 !important;
}

html[data-theme="dark"] #content .emailItem,
html[data-theme="office"] #content .emailItem {
  background: color-mix(in srgb, var(--bw-surface-3, #24313c) 88%, #050a0d 12%) !important;
}

html[data-theme="dark"] #content .emailRowAction,
html[data-theme="office"] #content .emailRowAction {
  background: color-mix(in srgb, var(--bw-surface-3, #24313c) 70%, #ffffff 8%) !important;
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
  border-color: color-mix(in srgb, var(--bw-accent, #74a7ff) 35%, #ffffff 5%) !important;
}

html[data-theme="dark"] #content .emailRowAction.danger,
html[data-theme="office"] #content .emailRowAction.danger {
  background: color-mix(in srgb, #ef4444 20%, var(--bw-surface-3, #24313c)) !important;
  border-color: color-mix(in srgb, #ef4444 50%, #ffffff 8%) !important;
}

html[data-theme="dark"] #content .emailItem.selected,
html[data-theme="office"] #content .emailItem.selected {
  background: color-mix(in srgb, var(--bw-accent, #74a7ff) 18%, var(--bw-surface-3, #24313c)) !important;
}

html[data-theme="dark"] #content .emailItem.unread,
html[data-theme="office"] #content .emailItem.unread {
  background: color-mix(in srgb, #ffd23f 12%, var(--bw-surface-3, #24313c)) !important;
}

html[data-theme="dark"] #content .emailComposerModal .modalHeader,
html[data-theme="office"] #content .emailComposerModal .modalHeader,
html[data-theme="dark"] #content .webmailComposerForm .stickyFormActions,
html[data-theme="office"] #content .webmailComposerForm .stickyFormActions {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bw-surface-3, #24313c) 88%, var(--bw-accent, #74a7ff) 8%), var(--bw-surface, #101923)) !important;
}

@media (max-width: 1320px) {
  #content .emailWebmailShell {
    grid-template-columns: minmax(210px, 250px) minmax(300px, .9fr) minmax(430px, 1.1fr) !important;
  }

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

@media (max-width: 980px) {
  #content .emailToolbarPanel .editorHeader,
  #content .emailTopActions,
  #content .emailListHead,
  #content .emailReaderHeader,
  #content .emailArchiveLine {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  #content .emailWebmailShell {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  #content .emailReaderMeta {
    grid-template-columns: 1fr !important;
  }

  #content .emailMailboxPane,
  #content .webmailListPanel,
  #content .emailReaderPane {
    min-height: 0 !important;
  }
}

/* Phase 68: Mail-Signatur und echte Akzentfarbe in der Hauptnavigation. */
body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar {
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--bw-accent, #1f6feb) 30%, transparent), transparent 15rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bw-accent-dark, #174ea6) 55%, #07131d 45%) 0%, color-mix(in srgb, var(--bw-accent, #1f6feb) 42%, #122033 58%) 56%, #07131d 100%) !important;
  border-right: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 24%, rgba(255, 255, 255, .10)) !important;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .08), 18px 0 48px color-mix(in srgb, var(--bw-accent, #1f6feb) 14%, transparent) !important;
}

body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .brand,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .brand {
  margin: 0 0 16px !important;
  padding: 8px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .86) !important;
  box-shadow: 0 16px 34px rgba(5, 13, 25, .20) !important;
}

body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .brandLogo,
html[data-theme="dark"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .brandLogo,
html[data-theme="office"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .brandLogo,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar .brand img {
  width: 100% !important;
  max-width: 214px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  display: block !important;
  padding: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: none !important;
}

body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar nav button,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar :where(button, .navButton, .sidebarLink, a) {
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar nav button.active,
body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar nav button:hover,
html[data-theme="colorful"] body:not(.authMode):not(.landingBody):not(.landingBodyV2):not(.controlCenterBody) .sidebar :where(button.active, button:hover, .navButton.active, .navButton:hover, .sidebarLink.active, .sidebarLink:hover, a.active, a:hover) {
  background: linear-gradient(135deg, var(--bw-accent-dark, #174ea6), var(--bw-accent, #1f6feb)) !important;
  border-color: color-mix(in srgb, var(--bw-accent, #1f6feb) 64%, #ffffff 24%) !important;
  box-shadow: inset 4px 0 0 #ffffff, 0 16px 34px color-mix(in srgb, var(--bw-accent, #1f6feb) 34%, transparent) !important;
}

#content .mailSignatureAdminPanel textarea[name="mailSignature"] {
  min-height: 150px !important;
}

#content .signatureAdminCurrent,
#content .signatureAssetRow {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#content .signatureAsset {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 10px !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 22%, var(--bw-line, #dbe3ea)) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bw-surface-3, #ffffff) 92%, var(--bw-accent, #1f6feb) 8%) !important;
  color: var(--bw-ink, #111827) !important;
  text-decoration: none !important;
}

#content .signatureAsset img {
  width: 112px !important;
  max-width: 28vw !important;
  height: 54px !important;
  object-fit: contain !important;
  padding: 5px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
}

#content .signatureAsset span {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  font-weight: 850 !important;
}

#content .signatureAsset label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  font-size: 12px !important;
}

#content .signatureAsset.pdf strong {
  display: inline-grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 54px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, var(--bw-accent-dark, #174ea6), var(--bw-accent, #1f6feb)) !important;
  color: var(--bw-on-accent, #ffffff) !important;
}

#content .emailSignaturePreview pre {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  margin: 0 !important;
  padding: 10px !important;
  border-radius: 8px !important;
  background: var(--bw-input-bg, var(--bw-input, #ffffff)) !important;
  color: var(--bw-input-ink, var(--bw-ink, #111827)) !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #1f6feb) 18%, var(--bw-line, #dbe3ea)) !important;
}

html[data-theme="dark"] #content .signatureAsset,
html[data-theme="office"] #content .signatureAsset,
html[data-theme="dark"] #content .emailSignaturePreview pre,
html[data-theme="office"] #content .emailSignaturePreview pre {
  background: color-mix(in srgb, var(--bw-surface-3, #24313c) 88%, #050a0d 12%) !important;
  color: #f7fbff !important;
  -webkit-text-fill-color: #f7fbff !important;
}

@media (max-width: 760px) {
  #content .signatureAdminCurrent,
  #content .signatureAssetRow {
    grid-template-columns: 1fr !important;
  }
}

/* Phase 69: Control Center darf nie in dunkle App-Listenfarben zurueckfallen. */
html[data-control-center="true"],
html[data-control-center="true"] body.controlCenterBody {
  min-height: 100% !important;
  color-scheme: light !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(31, 111, 235, .20), transparent 33rem),
    radial-gradient(circle at 83% 7%, rgba(255, 75, 99, .15), transparent 32rem),
    radial-gradient(circle at 92% 86%, rgba(255, 197, 61, .18), transparent 30rem),
    linear-gradient(135deg, #f7fbff 0%, #eef4ff 50%, #f8f2ff 100%) fixed !important;
}

html[data-control-center="true"] body.controlCenterBody {
  isolation: isolate !important;
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
}

html[data-control-center="true"] body.controlCenterBody::before {
  z-index: 0 !important;
  background:
    linear-gradient(90deg, rgba(31, 111, 235, .10), transparent 34%, rgba(255, 189, 40, .08)),
    radial-gradient(circle at 84% 18%, rgba(124, 92, 255, .11), transparent 30rem) !important;
  pointer-events: none !important;
}

html[data-control-center="true"] body.controlCenterBody .controlShell {
  position: relative !important;
  z-index: 1 !important;
}

html[data-control-center="true"] body.controlCenterBody .controlHero,
html[data-control-center="true"] body.controlCenterBody .controlActionBar,
html[data-control-center="true"] body.controlCenterBody .panel,
html[data-control-center="true"] body.controlCenterBody .controlSectionNav,
html[data-control-center="true"] body.controlCenterBody .controlAccessList,
html[data-control-center="true"] body.controlCenterBody .controlMailList,
html[data-control-center="true"] body.controlCenterBody .supportMailList,
html[data-control-center="true"] body.controlCenterBody .officialFormsControlList,
html[data-control-center="true"] body.controlCenterBody .controlInquiryWorkspace,
html[data-control-center="true"] body.controlCenterBody .inlineSubPanel,
html[data-control-center="true"] body.controlCenterBody .controlFold,
html[data-control-center="true"] body.controlCenterBody .controlChoiceCard,
html[data-control-center="true"] body.controlCenterBody .controlWizardStep,
html[data-control-center="true"] body.controlCenterBody .controlFormBand,
html[data-control-center="true"] body.controlCenterBody .externalBackupBox,
html[data-control-center="true"] body.controlCenterBody .setupMailboxBox,
html[data-control-center="true"] body.controlCenterBody .controlInfoBox,
html[data-control-center="true"] body.controlCenterBody .controlDnsBox,
html[data-control-center="true"] body.controlCenterBody .controlTechDetails,
html[data-control-center="true"] body.controlCenterBody .mirrorStatusPanel,
html[data-control-center="true"] body.controlCenterBody .maintenancePreview {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background:
    linear-gradient(90deg, #1f6feb 0, #7c5cff 33%, #ff4b63 67%, #ffc53d 100%) top / 100% 3px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(247, 250, 255, .89)) !important;
  border-color: rgba(103, 142, 207, .34) !important;
  box-shadow: 0 22px 58px rgba(45, 69, 120, .14) !important;
}

html[data-control-center="true"] body.controlCenterBody .controlStat,
html[data-control-center="true"] body.controlCenterBody .item,
html[data-control-center="true"] body.controlCenterBody .controlAuditItem,
html[data-control-center="true"] body.controlCenterBody .controlUserItem,
html[data-control-center="true"] body.controlCenterBody .controlCustomerTableRow,
html[data-control-center="true"] body.controlCenterBody .controlCustomerItem,
html[data-control-center="true"] body.controlCenterBody .controlCustomerRow,
html[data-control-center="true"] body.controlCenterBody .billingCustomerCard,
html[data-control-center="true"] body.controlCenterBody .billingInvoiceRow,
html[data-control-center="true"] body.controlCenterBody .billingDetailGrid div,
html[data-control-center="true"] body.controlCenterBody .billingPositionRow,
html[data-control-center="true"] body.controlCenterBody .billingManualRow,
html[data-control-center="true"] body.controlCenterBody .supportMailRow,
html[data-control-center="true"] body.controlCenterBody .supportMailFacts div,
html[data-control-center="true"] body.controlCenterBody .supportMailBody,
html[data-control-center="true"] body.controlCenterBody .controlMailTableRow,
html[data-control-center="true"] body.controlCenterBody .controlInquiryRow,
html[data-control-center="true"] body.controlCenterBody .controlInquiryFacts div,
html[data-control-center="true"] body.controlCenterBody .officialFormsTableRow {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(244, 248, 255, .93)) !important;
  border: 1px solid rgba(103, 142, 207, .36) !important;
  box-shadow: 0 12px 30px rgba(45, 69, 120, .10) !important;
}

html[data-control-center="true"] body.controlCenterBody .itemMain,
html[data-control-center="true"] body.controlCenterBody .controlCustomerName,
html[data-control-center="true"] body.controlCenterBody .statusCell,
html[data-control-center="true"] body.controlCenterBody .controlRowActions {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background: transparent !important;
}

html[data-control-center="true"] body.controlCenterBody :where(h1, h2, h3, h4, label, strong, b, th, summary, legend),
html[data-control-center="true"] body.controlCenterBody .item :where(strong, b),
html[data-control-center="true"] body.controlCenterBody .controlAuditItem :where(strong, b),
html[data-control-center="true"] body.controlCenterBody .controlUserItem :where(strong, b) {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody :where(p, li, td, dt, dd, span, small, em, .muted),
html[data-control-center="true"] body.controlCenterBody .item :where(span, small, p, em),
html[data-control-center="true"] body.controlCenterBody .controlAuditItem :where(span, small, p, em),
html[data-control-center="true"] body.controlCenterBody .controlUserItem :where(span, small, p, em) {
  color: #425068 !important;
  -webkit-text-fill-color: #425068 !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody :where(input, textarea, select) {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background: #ffffff !important;
  border-color: rgba(103, 142, 207, .42) !important;
  opacity: 1 !important;
}

html[data-control-center="true"] body.controlCenterBody :where(input::placeholder, textarea::placeholder) {
  color: #6c7890 !important;
  -webkit-text-fill-color: #6c7890 !important;
  opacity: 1 !important;
}

html[data-control-center="true"] body.controlCenterBody :where(button:not(.primary), .buttonLink:not(.primary)) {
  color: #1b2c48 !important;
  -webkit-text-fill-color: #1b2c48 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(237, 243, 255, .92)) !important;
  border-color: rgba(103, 142, 207, .36) !important;
}

html[data-control-center="true"] body.controlCenterBody :where(button.primary, .buttonLink.primary, .controlSectionNav button.active, .controlWizardPill.active, .statusButtonGroup .statusButton.active) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #1f6feb, #7c5cff 50%, #ff4b63) !important;
  border-color: transparent !important;
  box-shadow: 0 16px 34px rgba(31, 111, 235, .28) !important;
}

html[data-control-center="true"] body.controlCenterBody :where(button.primary, .buttonLink.primary, .controlSectionNav button.active, .controlWizardPill.active, .statusButtonGroup .statusButton.active) * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Phase 69b: Tabellenkoepfe und Leerzustaende im Control Center hell halten. */
html[data-control-center="true"] body.controlCenterBody .controlCustomerTableHead,
html[data-control-center="true"] body.controlCenterBody .controlMailTableHead,
html[data-control-center="true"] body.controlCenterBody .officialFormsTableHead,
html[data-control-center="true"] body.controlCenterBody .billingPositionsHead,
html[data-control-center="true"] body.controlCenterBody .billingManualHead {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  background: linear-gradient(180deg, rgba(241, 247, 255, .98), rgba(226, 236, 255, .94)) !important;
  border: 1px solid rgba(103, 142, 207, .34) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84) !important;
}

html[data-control-center="true"] body.controlCenterBody .controlCustomerTableHead *,
html[data-control-center="true"] body.controlCenterBody .controlMailTableHead *,
html[data-control-center="true"] body.controlCenterBody .officialFormsTableHead *,
html[data-control-center="true"] body.controlCenterBody .billingPositionsHead *,
html[data-control-center="true"] body.controlCenterBody .billingManualHead * {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody .empty {
  color: #425068 !important;
  -webkit-text-fill-color: #425068 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(241, 247, 255, .92)) !important;
  border: 1px solid rgba(103, 142, 207, .32) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody .empty * {
  color: #425068 !important;
  -webkit-text-fill-color: #425068 !important;
  text-shadow: none !important;
}

/* Phase 69c: alle Control-Center-Seiten gegen dunkle Listenreste absichern. */
html[data-control-center="true"] body.controlCenterBody .billingCustomerGrid,
html[data-control-center="true"] body.controlCenterBody .billingWorkspace,
html[data-control-center="true"] body.controlCenterBody .billingInvoiceList,
html[data-control-center="true"] body.controlCenterBody .billingDetailGrid,
html[data-control-center="true"] body.controlCenterBody .billingPositions,
html[data-control-center="true"] body.controlCenterBody .billingManualPositions,
html[data-control-center="true"] body.controlCenterBody .supportMailboxWorkspace,
html[data-control-center="true"] body.controlCenterBody .supportMailPreview,
html[data-control-center="true"] body.controlCenterBody .controlInquiryList,
html[data-control-center="true"] body.controlCenterBody .controlInquiryDetail,
html[data-control-center="true"] body.controlCenterBody .controlAuditList,
html[data-control-center="true"] body.controlCenterBody .backupRunHeader,
html[data-control-center="true"] body.controlCenterBody .backupRunMeta,
html[data-control-center="true"] body.controlCenterBody .backupRunHistory,
html[data-control-center="true"] body.controlCenterBody .mirrorStatusGrid,
html[data-control-center="true"] body.controlCenterBody .controlMailTable,
html[data-control-center="true"] body.controlCenterBody .controlCustomerTable,
html[data-control-center="true"] body.controlCenterBody .officialFormsTable,
html[data-control-center="true"] body.controlCenterBody .list {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background: transparent !important;
}

html[data-control-center="true"] body.controlCenterBody .billingManualRow,
html[data-control-center="true"] body.controlCenterBody .billingPositionRow,
html[data-control-center="true"] body.controlCenterBody .billingDetailGrid > div,
html[data-control-center="true"] body.controlCenterBody .supportMailRow,
html[data-control-center="true"] body.controlCenterBody .customerMailRow,
html[data-control-center="true"] body.controlCenterBody .supportMailFacts > div,
html[data-control-center="true"] body.controlCenterBody .controlInquiryRow,
html[data-control-center="true"] body.controlCenterBody .controlInquiryFacts > div,
html[data-control-center="true"] body.controlCenterBody .mirrorStatusGrid > div,
html[data-control-center="true"] body.controlCenterBody .backupRunHistory > span,
html[data-control-center="true"] body.controlCenterBody .successBox,
html[data-control-center="true"] body.controlCenterBody .notice,
html[data-control-center="true"] body.controlCenterBody .warningBox,
html[data-control-center="true"] body.controlCenterBody .simpleLockNote {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(244, 248, 255, .93)) !important;
  border: 1px solid rgba(103, 142, 207, .34) !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 26px rgba(45, 69, 120, .08) !important;
}

html[data-control-center="true"] body.controlCenterBody .backupTerminal,
html[data-control-center="true"] body.controlCenterBody .mirrorStatusError,
html[data-control-center="true"] body.controlCenterBody pre {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  background: linear-gradient(180deg, #ffffff, #f3f7ff) !important;
  border: 1px solid rgba(103, 142, 207, .36) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .84) !important;
}

html[data-control-center="true"] body.controlCenterBody .supportMailBody {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
  background: linear-gradient(180deg, #ffffff, #f5f8ff) !important;
  border-color: rgba(103, 142, 207, .36) !important;
}

html[data-control-center="true"] body.controlCenterBody .successBox *,
html[data-control-center="true"] body.controlCenterBody .notice *,
html[data-control-center="true"] body.controlCenterBody .warningBox *,
html[data-control-center="true"] body.controlCenterBody .simpleLockNote *,
html[data-control-center="true"] body.controlCenterBody .billingManualRow *,
html[data-control-center="true"] body.controlCenterBody .billingPositionRow *,
html[data-control-center="true"] body.controlCenterBody .supportMailRow *,
html[data-control-center="true"] body.controlCenterBody .controlInquiryRow *,
html[data-control-center="true"] body.controlCenterBody .backupRunMeta *,
html[data-control-center="true"] body.controlCenterBody .backupRunHistory *,
html[data-control-center="true"] body.controlCenterBody .mirrorStatusGrid * {
  text-shadow: none !important;
}

/* Phase 69d: Control-Center-Tabellen responsiv halten, leere Koepfe ausblenden. */
html[data-control-center="true"] body.controlCenterBody .controlCustomerTable:has(.empty) .controlCustomerTableHead,
html[data-control-center="true"] body.controlCenterBody .controlMailTable:has(.empty) .controlMailTableHead,
html[data-control-center="true"] body.controlCenterBody .officialFormsTable:has(.empty) .officialFormsTableHead,
html[data-control-center="true"] body.controlCenterBody .billingPositions:has(.empty) .billingPositionsHead,
html[data-control-center="true"] body.controlCenterBody .billingManualPositions:has(.empty) .billingManualHead {
  display: none !important;
}

html[data-control-center="true"] body.controlCenterBody .controlCustomerTableHead,
html[data-control-center="true"] body.controlCenterBody .controlCustomerTableRow {
  grid-template-columns:
    minmax(180px, 1.4fr)
    minmax(88px, .55fr)
    minmax(88px, .55fr)
    minmax(150px, auto)
    minmax(150px, auto) !important;
}

html[data-control-center="true"] body.controlCenterBody .controlMailTableHead,
html[data-control-center="true"] body.controlCenterBody .controlMailTableRow {
  grid-template-columns:
    minmax(220px, 1.25fr)
    minmax(160px, .85fr)
    minmax(120px, .55fr)
    minmax(150px, auto) !important;
}

html[data-control-center="true"] body.controlCenterBody .officialFormsTableHead,
html[data-control-center="true"] body.controlCenterBody .officialFormsTableRow {
  grid-template-columns:
    minmax(220px, 1.3fr)
    minmax(140px, .7fr)
    minmax(150px, .8fr)
    minmax(150px, auto) !important;
}

@media (max-width: 980px) {
  html[data-control-center="true"] body.controlCenterBody .controlCustomerTableHead,
  html[data-control-center="true"] body.controlCenterBody .controlMailTableHead,
  html[data-control-center="true"] body.controlCenterBody .officialFormsTableHead,
  html[data-control-center="true"] body.controlCenterBody .billingPositionsHead,
  html[data-control-center="true"] body.controlCenterBody .billingManualHead {
    display: none !important;
  }

  html[data-control-center="true"] body.controlCenterBody .controlCustomerTableRow,
  html[data-control-center="true"] body.controlCenterBody .controlMailTableRow,
  html[data-control-center="true"] body.controlCenterBody .officialFormsTableRow,
  html[data-control-center="true"] body.controlCenterBody .billingPositionRow,
  html[data-control-center="true"] body.controlCenterBody .billingManualRow {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }
}

/* Phase 69e: letzte dunkle/transparent erbende Control-Center-Zeilen hart neutralisieren. */
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) :where(
  .controlHero,
  .controlActionBar,
  .controlSectionNav,
  .panel,
  .controlCustomerTable,
  .controlMailTable,
  .officialFormsTable,
  .billingCustomerGrid,
  .billingWorkspace,
  .billingInvoiceList,
  .billingDetailGrid,
  .billingPositions,
  .billingManualPositions,
  .supportMailboxWorkspace,
  .supportMailPreview,
  .controlInquiryWorkspace,
  .controlInquiryList,
  .controlInquiryDetail,
  .controlAuditList,
  .controlAccessList,
  .list,
  .backupRunHistory,
  .mirrorStatusGrid
) {
  background-color: rgba(255, 255, 255, .76) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(242, 247, 255, .84)) !important;
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) :where(
  .controlCustomerTableHead,
  .controlMailTableHead,
  .officialFormsTableHead,
  .billingPositionsHead,
  .billingManualHead
) {
  background-color: #eaf2ff !important;
  background-image: linear-gradient(180deg, #f7fbff, #e6efff) !important;
  color: #24324a !important;
  -webkit-text-fill-color: #24324a !important;
  border: 1px solid rgba(103, 142, 207, .42) !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  padding: 10px 12px !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) :where(
  .controlCustomerTableRow,
  .controlMailTableRow,
  .officialFormsTableRow,
  .billingCustomerCard,
  .billingInvoiceRow,
  .billingDetailGrid > div,
  .billingPositionRow,
  .billingManualRow,
  .supportMailRow,
  .supportMailFacts > div,
  .supportMailBody,
  .controlInquiryRow,
  .controlInquiryFacts > div,
  .controlAuditItem,
  .controlAccessList .item,
  .list .item,
  .backupRunHeader,
  .backupRunMeta,
  .backupRunHistory > span,
  .empty
) {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff, #f4f8ff) !important;
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  border: 1px solid rgba(103, 142, 207, .36) !important;
  box-shadow: 0 12px 30px rgba(45, 69, 120, .08) !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) :where(
  .controlCustomerTableHead *,
  .controlMailTableHead *,
  .officialFormsTableHead *,
  .billingPositionsHead *,
  .billingManualHead *,
  .controlCustomerTableRow *,
  .controlMailTableRow *,
  .officialFormsTableRow *,
  .billingCustomerCard *,
  .billingInvoiceRow *,
  .billingDetailGrid > div *,
  .billingPositionRow *,
  .billingManualRow *,
  .supportMailRow *,
  .supportMailFacts > div *,
  .supportMailBody *,
  .controlInquiryRow *,
  .controlInquiryFacts > div *,
  .controlAuditItem *,
  .controlAccessList .item *,
  .list .item *,
  .backupRunHeader *,
  .backupRunMeta *,
  .backupRunHistory > span *,
  .empty *
) {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  text-shadow: none !important;
}

/* Phase 70: finale Control-Center-Kontrastkorrektur fuer alle Listen-/Tabellenreste. */
html[data-control-center="true"] body.controlCenterBody,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background:
    radial-gradient(circle at 14% 2%, rgba(31, 111, 235, .22), transparent 34rem),
    radial-gradient(circle at 78% 0%, rgba(255, 75, 99, .15), transparent 32rem),
    radial-gradient(circle at 92% 88%, rgba(255, 197, 61, .20), transparent 32rem),
    linear-gradient(135deg, #eef5ff 0%, #f8f4ff 52%, #fff6eb 100%) fixed !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTable,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlMailTable,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .officialFormsTable,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingPositions,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingManualPositions,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingCustomerGrid,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingInvoiceList,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlAuditList,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlAccessList,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlInquiryList,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .supportMailList,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .list {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background: rgba(255, 255, 255, .58) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(244, 248, 255, .72)) !important;
  border-color: rgba(103, 142, 207, .26) !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableHead,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlMailTableHead,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .officialFormsTableHead,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingPositionsHead,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingManualHead {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  background: #eaf2ff !important;
  background-image: linear-gradient(180deg, #f9fbff, #e8f0ff) !important;
  border: 1px solid rgba(103, 142, 207, .36) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableHead *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlMailTableHead *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .officialFormsTableHead *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingPositionsHead *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingManualHead * {
  color: #334155 !important;
  -webkit-text-fill-color: #334155 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableRow,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlMailTableRow,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .officialFormsTableRow,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingCustomerCard,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingInvoiceRow,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingDetailGrid > div,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingPositionRow,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingManualRow,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .supportMailRow,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .supportMailFacts > div,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .supportMailBody,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .customerMailRow,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlInquiryRow,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlInquiryFacts > div,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlAuditItem,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlUserItem,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlAccessList .item,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .list .item,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .empty,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .notice,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .warningBox,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .successBox {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  background: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff, #f5f8ff) !important;
  border: 1px solid rgba(103, 142, 207, .36) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 28px rgba(45, 69, 120, .09) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableRow *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlMailTableRow *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .officialFormsTableRow *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingCustomerCard *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingInvoiceRow *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingDetailGrid > div *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingPositionRow *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingManualRow *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .supportMailRow *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .supportMailFacts > div *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .supportMailBody *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .customerMailRow *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlInquiryRow *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlInquiryFacts > div *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlAuditItem *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlUserItem *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlAccessList .item *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .list .item *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .empty *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .notice *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .warningBox *,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .successBox * {
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTable:has(.empty) .controlCustomerTableHead,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlMailTable:has(.empty) .controlMailTableHead,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .officialFormsTable:has(.empty) .officialFormsTableHead,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingPositions:has(.empty) .billingPositionsHead,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .billingManualPositions:has(.empty) .billingManualHead {
  display: none !important;
}

/* Phase 71: Control Center wieder als kompakte Full-HD-Arbeitsoberflaeche. */
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlShell {
  width: min(1700px, calc(100vw - 64px)) !important;
  padding: 18px 0 30px !important;
  gap: 10px !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlHero {
  min-height: 86px !important;
  padding: 12px 18px !important;
  align-items: center !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlHero > div:first-child {
  flex: 0 0 auto !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlHero img {
  width: clamp(168px, 10vw, 190px) !important;
  height: 82px !important;
  object-fit: contain !important;
  padding: 8px !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) h1 {
  font-size: clamp(38px, 2.65vw, 50px) !important;
  line-height: .98 !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) h2 {
  font-size: clamp(22px, 1.35vw, 28px) !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .panel,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlActionBar,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlSectionNav {
  padding: 14px 16px !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlSectionNav {
  gap: 8px !important;
  padding: 8px 10px !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlSectionNav button {
  min-width: 112px !important;
  min-height: 34px !important;
  padding: 7px 14px !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableHead,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableRow {
  grid-template-columns:
    minmax(260px, 1fr)
    minmax(120px, .45fr)
    minmax(110px, .42fr)
    minmax(330px, .72fr)
    minmax(178px, max-content) !important;
  gap: 10px !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableHead {
  min-height: 34px !important;
  padding: 8px 10px !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableRow {
  min-height: 58px !important;
  padding: 8px 10px !important;
  align-items: center !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .statusCell {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .statusQuickActions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .statusMark {
  min-height: 24px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .statusActionButton,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlRowActions button {
  min-height: 30px !important;
  padding: 6px 9px !important;
  font-size: 12.5px !important;
  line-height: 1.05 !important;
  box-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlRowActions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
}

@media (max-width: 1120px) {
  html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableHead {
    display: none !important;
  }

  html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerTableRow {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .statusCell,
  html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlRowActions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
}

/* Phase 71: amtliche PDF-Felder flach, buendig und feldlistenfaehig. */
#content .pdfField {
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  padding: 1px 4px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(37, 99, 235, .46) !important;
  background: rgba(255, 255, 255, .76) !important;
  color: #0f172a !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  resize: none !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .36) !important;
}

#content .pdfField:focus,
#content .pdfField.active {
  border-color: #1f6feb !important;
  background: rgba(255, 255, 255, .96) !important;
  outline: 1px solid rgba(31, 111, 235, .40) !important;
  box-shadow: 0 0 0 2px rgba(31, 111, 235, .14) !important;
}

#content .pdfFreeText {
  min-width: 96px !important;
  min-height: 28px !important;
  border-color: rgba(178, 118, 19, .72) !important;
  background: rgba(255, 252, 234, .92) !important;
  resize: both !important;
  overflow: auto !important;
}

#content .pdfPresetField {
  min-width: 0 !important;
  min-height: 0 !important;
  background: rgba(255, 255, 255, .48) !important;
  border-color: rgba(37, 99, 235, .34) !important;
  font-size: 9.5px !important;
  line-height: 1.05 !important;
  resize: none !important;
  overflow: hidden !important;
}

#content .pdfAutoField {
  background: rgba(241, 247, 255, .58) !important;
  border-color: rgba(37, 99, 235, .36) !important;
}

#content .pdfPresetCheck {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#content .pdfFieldNavigator {
  display: grid;
  gap: 8px;
  border: 1px solid #d7e0e8;
  border-radius: 7px;
  background: #f8fbff;
  padding: 10px;
}

#content .pdfFieldNavigator > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}

#content .pdfFieldNavigator small {
  color: #667582;
  font-weight: 750;
}

#content .pdfFieldListBody {
  display: grid;
  gap: 6px;
  max-height: 238px;
  overflow: auto;
  padding-right: 2px;
}

#content .pdfFieldListItem {
  display: grid;
  gap: 2px;
  text-align: left;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  background: #fff;
  color: #17202a;
  box-shadow: none;
}

#content .pdfFieldListItem span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#content .pdfFieldListItem.active {
  border-color: #1f6feb;
  background: #eaf2ff;
}

/* Phase 72: Hinweise, Update-News und Warnboxen im dunklen Modus lesbar halten. */
html[data-theme="dark"] #content :where(.notice, .notice.warning, .warningBox, .maintenancePreview, .lawWatchNotice),
html[data-theme="office"] #content :where(.notice, .notice.warning, .warningBox, .maintenancePreview, .lawWatchNotice),
html[data-theme="dark"] .aiChatWidget :where(.aiNewsCard, .aiNewsList article, .aiNewsEmpty),
html[data-theme="office"] .aiChatWidget :where(.aiNewsCard, .aiNewsList article, .aiNewsEmpty) {
  color: #f8fbff !important;
  -webkit-text-fill-color: #f8fbff !important;
  background:
    linear-gradient(180deg, rgba(28, 42, 58, .98), rgba(13, 24, 34, .98)) !important;
  border-color: rgba(125, 167, 226, .52) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .26) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #content :where(.notice, .notice.warning, .warningBox, .maintenancePreview, .lawWatchNotice) :where(*),
html[data-theme="office"] #content :where(.notice, .notice.warning, .warningBox, .maintenancePreview, .lawWatchNotice) :where(*),
html[data-theme="dark"] .aiChatWidget :where(.aiNewsCard, .aiNewsList article, .aiNewsEmpty) :where(*),
html[data-theme="office"] .aiChatWidget :where(.aiNewsCard, .aiNewsList article, .aiNewsEmpty) :where(*) {
  color: #f8fbff !important;
  -webkit-text-fill-color: #f8fbff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #content :where(.notice.warning, .warningBox, .maintenancePreview),
html[data-theme="office"] #content :where(.notice.warning, .warningBox, .maintenancePreview) {
  border-left-color: #ffc53d !important;
}

html[data-theme="dark"] #content .notice.success,
html[data-theme="office"] #content .notice.success {
  color: #dcfce7 !important;
  -webkit-text-fill-color: #dcfce7 !important;
  background:
    linear-gradient(180deg, rgba(20, 76, 63, .94), rgba(13, 44, 38, .96)) !important;
  border-color: rgba(74, 222, 128, .52) !important;
}

html[data-control-center="true"] body.controlCenterBody :where(.notice, .notice.warning, .warningBox, .maintenancePreview, .lawWatchNotice) {
  color: var(--cc-ink, #101923) !important;
  -webkit-text-fill-color: var(--cc-ink, #101923) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(242, 247, 255, .95)) !important;
  border-color: color-mix(in srgb, var(--cc-accent, #1f6feb) 34%, #b8c9e7) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-control-center="true"] body.controlCenterBody :where(.notice, .notice.warning, .warningBox, .maintenancePreview, .lawWatchNotice) :where(*) {
  color: var(--cc-ink, #101923) !important;
  -webkit-text-fill-color: var(--cc-ink, #101923) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Phase 73: Start einer Betreuung als echte Mandanten-Checkliste. */
#content .checklistWorkflowGrid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  align-items: start;
}

#content .checklistWorkflowStep {
  padding: 0 !important;
  overflow: hidden;
  align-content: start;
  min-height: 0 !important;
}

#content .checklistWorkflowStep > summary {
  list-style: none;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
}

#content .checklistWorkflowStep > summary::-webkit-details-marker {
  display: none;
}

#content .checklistWorkflowStep[open] > summary {
  border-bottom: 1px solid color-mix(in srgb, var(--bw-line, #dbe3ea) 82%, transparent);
}

#content .checklistWorkflowStep .workflowNumber {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: grid !important;
  place-items: center !important;
}

#content .checklistSummaryText {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#content .checklistSummaryText p {
  margin: 0;
}

#content .checklistProgress {
  justify-self: end;
  white-space: nowrap;
  font-style: normal;
  font-weight: 900;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bw-teal, #1f736b) 35%, #dbe3ea);
  background: color-mix(in srgb, var(--bw-teal, #1f736b) 10%, #fff);
  color: var(--bw-teal, #1f736b);
  padding: 5px 9px;
}

#content .checklistBody {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
}

#content .checklistItem {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--bw-line, #dbe3ea) 88%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--bw-panel, #fff) 92%, var(--bw-teal, #1f736b) 8%);
  cursor: pointer;
}

#content .checklistItem input {
  width: 18px;
  height: 18px;
  accent-color: var(--bw-teal, #1f736b);
}

#content .checklistItem b {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

#content .checklistItem.done b {
  text-decoration: line-through;
  opacity: .72;
}

#content .checklistItem button {
  min-height: 28px;
  padding: 4px 8px;
}

#content .checklistCustomForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 2px;
}

#content .checklistCustomForm input {
  min-width: 0;
}

html[data-theme="dark"] #content .checklistProgress,
html[data-theme="office"] #content .checklistProgress {
  background: color-mix(in srgb, var(--bw-teal, #3ed6c5) 18%, #111c22);
  color: var(--bw-teal, #3ed6c5);
}

html[data-theme="dark"] #content .checklistItem,
html[data-theme="office"] #content .checklistItem {
  background: rgba(10, 22, 30, .55);
  border-color: rgba(125, 167, 226, .36);
}

@media (max-width: 980px) {
  #content .checklistWorkflowStep > summary,
  #content .checklistItem,
  #content .checklistCustomForm {
    grid-template-columns: 1fr;
  }

  #content .checklistWorkflowStep .workflowNumber,
  #content .checklistProgress {
    justify-self: start;
  }
}

/* Phase 74: Control-Center-Kunden als klare Liste statt gequetschter Tabelle. */
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList {
  display: grid !important;
  gap: 10px !important;
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListRow {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.05fr) minmax(330px, 1fr) minmax(360px, auto) !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 12px !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListMain {
  display: grid !important;
  gap: 3px !important;
  min-width: 0 !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListMain strong,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListMain span,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListMain small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListFacts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  min-width: 0 !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListFacts > div {
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(103, 142, 207, .28) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .72) !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListFacts > div > span {
  font-size: 11px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  color: #59697f !important;
  -webkit-text-fill-color: #59697f !important;
  text-transform: uppercase !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListFacts strong {
  font-size: 15px !important;
  line-height: 1.15 !important;
  color: #101923 !important;
  -webkit-text-fill-color: #101923 !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .statusCell {
  display: grid !important;
  align-items: center !important;
  justify-content: stretch !important;
  gap: 4px !important;
  white-space: normal !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListControls {
  display: grid !important;
  gap: 8px !important;
  justify-items: end !important;
  min-width: 0 !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .statusQuickActions,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListActions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .statusActionButton,
html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListActions button {
  min-width: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 1240px) {
  html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListRow {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListControls,
  html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .statusQuickActions,
  html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListActions {
    justify-items: start !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 720px) {
  html[data-control-center="true"] body.controlCenterBody:not(.controlLoggedOut) .controlCustomerList .customerListFacts {
    grid-template-columns: 1fr !important;
  }
}

/* Phase 75: Public website polish after text rewrite. */
body.landingBodyV2 {
  --public-width: min(1320px, calc(100% - 44px));
}

body.landingBodyV2 main {
  width: var(--public-width);
  max-width: none;
  margin-inline: auto;
}

body.landingBodyV2 :where(.landingNavV2, .landingFooterV2) {
  box-sizing: border-box !important;
  width: var(--public-width) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

body.landingBodyV2 :where(.landingHeroV2, .publicPageHero, .landingReleaseBand, .landingTrust, .landingFinalCta, .landingSectionV2, .publicPageSection) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.landingBodyV2 .landingInquirySection.publicPageSection {
  width: 100% !important;
  max-width: none !important;
}

body.landingBodyV2 .landingInquiryForm {
  width: 100% !important;
  max-width: none !important;
}

body.landingBodyV2 .landingContactGrid {
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: minmax(300px, .48fr) minmax(0, 1.12fr) !important;
}

body.landingBodyV2 .landingReleaseGrid article {
  min-height: 132px !important;
  align-content: start !important;
  gap: 8px !important;
}

body.landingBodyV2 .landingReleaseGrid strong {
  font-size: clamp(20px, 1.7vw, 28px) !important;
  line-height: 1.12 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

body.landingBodyV2 .landingReleaseGrid span {
  font-size: 15px !important;
  line-height: 1.38 !important;
}

body.landingBodyV2 .landingEditionGridV2 .landingEditionCard.recommended,
body.landingBodyV2 .landingInquirySection .landingEditionGrid.compact .landingEditionCard.recommended {
  border-color: rgba(255, 69, 104, .46) !important;
  background: linear-gradient(180deg, #fff, #f2f7ff 46%, #fff3f6) !important;
  box-shadow: 0 24px 64px rgba(31, 111, 235, .16), inset 0 4px 0 #ff4568 !important;
}

body.landingBodyV2 .landingEditionGridV2 {
  align-items: stretch !important;
}

body.landingBodyV2 .landingEditionGridV2 .landingEditionCard {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 390px !important;
  align-content: stretch !important;
}

body.landingBodyV2 .landingEditionGridV2 .landingEditionCard > p {
  min-height: 104px !important;
}

body.landingBodyV2 .landingEditionGridV2 .landingEditionCard > ul {
  margin-bottom: 16px !important;
}

body.landingBodyV2 .landingEditionGridV2 .landingEditionCard > a {
  margin-top: auto !important;
  align-self: start !important;
}

body.landingBodyV2 .landingButton.primary,
body.landingBodyV2 button.landingButton.primary,
body.landingBodyV2 .landingInquiryForm button.primary {
  border-color: rgba(31, 111, 235, .80) !important;
  background: linear-gradient(135deg, #1f6feb 0%, #3b82f6 58%, #1557c7 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(31, 111, 235, .26) !important;
}

body.landingBodyV2 .landingOptionNote {
  border-color: rgba(31, 111, 235, .22) !important;
  background: linear-gradient(180deg, rgba(234, 242, 255, .95), rgba(247, 250, 255, .95)) !important;
  color: #21314d !important;
  box-shadow: inset 4px 0 0 rgba(31, 111, 235, .78) !important;
}

body.landingBodyV2 :where(.landingContactCard a, .landingFooterV2 a, .legalTextPage a, .legalSingleBlock a) {
  color: #1557c7 !important;
  text-decoration-color: rgba(31, 111, 235, .34) !important;
}

body.landingBodyV2 .landingInquiryStatus.ok {
  color: #1557c7 !important;
}

body.landingBodyV2 .legalPageMain {
  padding: 0 0 46px !important;
  display: grid !important;
  gap: 18px !important;
}

body.landingBodyV2 .legalPageSection {
  display: grid !important;
  gap: 22px !important;
  padding: clamp(32px, 4.5vw, 58px) !important;
}

body.landingBodyV2 .legalCardGrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

body.landingBodyV2 .legalCard {
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  min-height: 206px !important;
  border: 1px solid rgba(72, 103, 155, .20) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(246, 249, 255, .94)) !important;
  box-shadow: 0 18px 42px rgba(31, 51, 98, .08) !important;
  padding: 18px !important;
}

body.landingBodyV2 .legalCardGridTop .legalCard {
  min-height: 206px !important;
}

body.landingBodyV2 .legalCard h3 {
  margin: 0 !important;
  color: #101b31 !important;
  font-size: 21px !important;
  line-height: 1.18 !important;
}

body.landingBodyV2 .legalCard p {
  margin: 0 !important;
  color: #506076 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body.landingBodyV2 .legalCard a {
  color: #1557c7 !important;
  font-weight: 900 !important;
}

body.landingBodyV2 .legalContactImageCard {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

body.landingBodyV2 .legalContactImageCard img {
  display: block !important;
  width: 100% !important;
  min-height: 206px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

body.landingBodyV2 .landingInquirySection .landingEditionGrid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.landingBodyV2 .landingInquirySection .landingEditionGrid.compact .landingEditionCard {
  min-height: 132px !important;
  padding: 16px !important;
}

body.landingBodyV2 .publicContactSection .landingSectionHead,
body.landingBodyV2 .landingInquirySection .landingSectionHead {
  max-width: 980px !important;
}

@media (max-width: 1120px) {
  body.landingBodyV2 .landingContactGrid,
  body.landingBodyV2 .landingHeroV2,
  body.landingBodyV2 .landingReleaseBand,
  body.landingBodyV2 .landingTrust {
    grid-template-columns: 1fr !important;
  }

  body.landingBodyV2 .landingInquirySection .landingEditionGrid.compact,
  body.landingBodyV2 .landingEditionGridV2,
  body.landingBodyV2 .landingFeatureGridV2,
  body.landingBodyV2 .landingInquiryGrid,
  body.landingBodyV2 .legalCardGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.landingBodyV2 {
    --public-width: calc(100% - 20px);
  }

  body.landingBodyV2 .landingInquirySection .landingEditionGrid.compact,
  body.landingBodyV2 .landingEditionGridV2,
  body.landingBodyV2 .landingFeatureGridV2,
  body.landingBodyV2 .landingInquiryGrid,
  body.landingBodyV2 .landingContactGrid,
  body.landingBodyV2 .landingTrustList,
  body.landingBodyV2 .legalCardGrid {
    grid-template-columns: 1fr !important;
  }
}

/* Phase 76: Designbrick-Kontrast fuer Dark/Grau in Akte und Backup. */
html[data-theme="dark"] #content,
html[data-theme="office"] #content {
  --bw-readable-panel: linear-gradient(180deg, rgba(44, 56, 68, .96), rgba(31, 43, 55, .96));
  --bw-readable-panel-soft: linear-gradient(180deg, rgba(35, 48, 60, .96), rgba(23, 35, 47, .96));
  --bw-readable-panel-strong: linear-gradient(180deg, rgba(19, 35, 52, .98), rgba(12, 24, 36, .98));
  --bw-readable-border: rgba(125, 167, 226, .58);
  --bw-readable-border-soft: rgba(154, 180, 213, .38);
  --bw-readable-text: #f7fbff;
  --bw-readable-muted: #d7e2ee;
  --bw-readable-pill: rgba(239, 245, 252, .96);
  --bw-readable-pill-text: #1f2d3c;
}

html[data-theme="dark"] #content :where(
  .documentArchivePanel,
  .documentActionCard,
  .digitalFileArea,
  .fileAreaNav,
  .archiveFolder,
  .archiveFolder > .list,
  .documentRow,
  .documentChoice,
  .documentFile,
  .documentFileCard,
  .documentModalNote,
  .backupPanel,
  .easyBackupPage,
  .backupDecisionCard,
  .easyStep,
  .easyChoice,
  .easyAdvanced,
  .easyLocalAction,
  .simpleLockNote,
  .backupList
),
html[data-theme="office"] #content :where(
  .documentArchivePanel,
  .documentActionCard,
  .digitalFileArea,
  .fileAreaNav,
  .archiveFolder,
  .archiveFolder > .list,
  .documentRow,
  .documentChoice,
  .documentFile,
  .documentFileCard,
  .documentModalNote,
  .backupPanel,
  .easyBackupPage,
  .backupDecisionCard,
  .easyStep,
  .easyChoice,
  .easyAdvanced,
  .easyLocalAction,
  .simpleLockNote,
  .backupList
) {
  background: var(--bw-readable-panel-soft) !important;
  border-color: var(--bw-readable-border-soft) !important;
  color: var(--bw-readable-text) !important;
  -webkit-text-fill-color: var(--bw-readable-text) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #content :where(
  .documentArchivePanel,
  .documentActionCard,
  .digitalFileArea,
  .fileAreaNav,
  .archiveFolder,
  .documentRow,
  .documentChoice,
  .documentFile,
  .documentFileCard,
  .documentModalNote,
  .backupPanel,
  .backupDecisionCard,
  .easyStep,
  .easyChoice,
  .easyAdvanced,
  .easyLocalAction,
  .simpleLockNote,
  .backupList
) :where(h1, h2, h3, h4, h5, h6, label, legend, summary, strong, b, span, p, li, dt, dd, em),
html[data-theme="office"] #content :where(
  .documentArchivePanel,
  .documentActionCard,
  .digitalFileArea,
  .fileAreaNav,
  .archiveFolder,
  .documentRow,
  .documentChoice,
  .documentFile,
  .documentFileCard,
  .documentModalNote,
  .backupPanel,
  .backupDecisionCard,
  .easyStep,
  .easyChoice,
  .easyAdvanced,
  .easyLocalAction,
  .simpleLockNote,
  .backupList
) :where(h1, h2, h3, h4, h5, h6, label, legend, summary, strong, b, span, p, li, dt, dd, em) {
  color: var(--bw-readable-text) !important;
  -webkit-text-fill-color: var(--bw-readable-text) !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #content :where(.documentArchivePanel, .digitalFileArea, .fileAreaNav, .archiveFolder, .documentRow, .backupPanel, .easyStep, .easyChoice, .simpleLockNote) :where(small, .muted, .hint, .description),
html[data-theme="office"] #content :where(.documentArchivePanel, .digitalFileArea, .fileAreaNav, .archiveFolder, .documentRow, .backupPanel, .easyStep, .easyChoice, .simpleLockNote) :where(small, .muted, .hint, .description) {
  color: var(--bw-readable-muted) !important;
  -webkit-text-fill-color: var(--bw-readable-muted) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #content :where(.documentArchivePanel, .backupPanel) :where(input, textarea, select, .inputLike, .fakeInput),
html[data-theme="office"] #content :where(.documentArchivePanel, .backupPanel) :where(input, textarea, select, .inputLike, .fakeInput) {
  background: rgba(12, 24, 36, .86) !important;
  border-color: var(--bw-readable-border) !important;
  color: var(--bw-readable-text) !important;
  -webkit-text-fill-color: var(--bw-readable-text) !important;
}

html[data-theme="dark"] #content :where(.documentArchivePanel, .backupPanel) :where(input::placeholder, textarea::placeholder),
html[data-theme="office"] #content :where(.documentArchivePanel, .backupPanel) :where(input::placeholder, textarea::placeholder) {
  color: #b8c8d9 !important;
  -webkit-text-fill-color: #b8c8d9 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #content .fileAreaNav button,
html[data-theme="office"] #content .fileAreaNav button {
  min-height: 42px !important;
  background: var(--bw-readable-panel-strong) !important;
  border-color: var(--bw-readable-border) !important;
  color: var(--bw-readable-text) !important;
  -webkit-text-fill-color: var(--bw-readable-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] #content .fileAreaNav button:hover,
html[data-theme="office"] #content .fileAreaNav button:hover {
  border-color: rgba(147, 187, 244, .78) !important;
  background: linear-gradient(180deg, rgba(32, 49, 67, .98), rgba(16, 31, 48, .98)) !important;
}

html[data-theme="dark"] #content .fileAreaNav button.active,
html[data-theme="office"] #content .fileAreaNav button.active {
  background: linear-gradient(135deg, #1f6feb 0%, #2f7df4 62%, #175fcf 100%) !important;
  border-color: rgba(148, 190, 255, .92) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 10px 22px rgba(31, 111, 235, .24) !important;
}

html[data-theme="dark"] #content .fileAreaNav strong,
html[data-theme="office"] #content .fileAreaNav strong {
  min-width: 28px !important;
  background: var(--bw-readable-pill) !important;
  color: var(--bw-readable-pill-text) !important;
  -webkit-text-fill-color: var(--bw-readable-pill-text) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
}

html[data-theme="dark"] #content .fileAreaNav button.active strong,
html[data-theme="office"] #content .fileAreaNav button.active strong {
  background: rgba(255, 255, 255, .24) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(255, 255, 255, .34) !important;
}

html[data-theme="dark"] #content .archiveFolder summary,
html[data-theme="office"] #content .archiveFolder summary {
  background: rgba(12, 24, 36, .52) !important;
  border-bottom: 1px solid var(--bw-readable-border-soft) !important;
}

html[data-theme="dark"] #content .documentRow,
html[data-theme="office"] #content .documentRow {
  background: linear-gradient(180deg, rgba(45, 60, 74, .98), rgba(33, 48, 62, .98)) !important;
  border-color: var(--bw-readable-border) !important;
}

html[data-theme="dark"] #content .documentRow .itemMain,
html[data-theme="office"] #content .documentRow .itemMain {
  background: rgba(18, 34, 50, .62) !important;
  border: 1px solid rgba(141, 175, 219, .46) !important;
  border-radius: 7px !important;
  padding: 7px 9px !important;
}

html[data-theme="dark"] #content .documentRow.unreadDocument,
html[data-theme="office"] #content .documentRow.unreadDocument {
  border-left-color: #ffd23f !important;
  box-shadow: inset 4px 0 0 #ffd23f !important;
}

html[data-theme="dark"] #content .backupPanel :where(.simpleLockNote, .easyLocalAction, .easyAdvanced),
html[data-theme="office"] #content .backupPanel :where(.simpleLockNote, .easyLocalAction, .easyAdvanced) {
  background: linear-gradient(180deg, rgba(31, 45, 58, .98), rgba(18, 31, 44, .98)) !important;
  border-color: var(--bw-readable-border) !important;
  color: var(--bw-readable-text) !important;
  -webkit-text-fill-color: var(--bw-readable-text) !important;
}

html[data-theme="dark"] #content .backupPanel .simpleLockNote,
html[data-theme="office"] #content .backupPanel .simpleLockNote {
  border-left-color: #ffd23f !important;
}

html[data-theme="dark"] #content .easyChoiceIcon,
html[data-theme="office"] #content .easyChoiceIcon {
  background: linear-gradient(135deg, #123c6d 0%, #1f6feb 100%) !important;
  border-color: rgba(158, 198, 255, .88) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 18px rgba(31, 111, 235, .22) !important;
}

html[data-theme="dark"] #content .easyChoiceIcon *,
html[data-theme="office"] #content .easyChoiceIcon * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
}

html[data-theme="dark"] #content .easyChoice,
html[data-theme="office"] #content .easyChoice {
  grid-template-columns: 58px minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 7px 12px !important;
  min-height: 132px !important;
}

html[data-theme="dark"] #content .easyChoice strong,
html[data-theme="office"] #content .easyChoice strong,
html[data-theme="dark"] #content .easyChoice small,
html[data-theme="office"] #content .easyChoice small {
  grid-column: 2 !important;
  min-width: 0 !important;
}

html[data-theme="dark"] #content .easyChoice strong,
html[data-theme="office"] #content .easyChoice strong {
  grid-row: 1 !important;
  line-height: 1.16 !important;
}

html[data-theme="dark"] #content .easyChoice small,
html[data-theme="office"] #content .easyChoice small {
  grid-row: 2 !important;
  line-height: 1.35 !important;
}

html[data-theme="dark"] #content .easyChoiceIcon,
html[data-theme="office"] #content .easyChoiceIcon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
}

html[data-theme="dark"] #content .easyChoice:has(input:checked),
html[data-theme="office"] #content .easyChoice:has(input:checked) {
  background: linear-gradient(180deg, rgba(29, 67, 108, .96), rgba(19, 47, 82, .96)) !important;
  border-color: rgba(130, 184, 255, .92) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important;
}

html[data-theme="dark"] #content :where(.documentArchivePanel, .backupPanel) .empty,
html[data-theme="office"] #content :where(.documentArchivePanel, .backupPanel) .empty {
  background: rgba(12, 24, 36, .86) !important;
  border-color: var(--bw-readable-border) !important;
  color: var(--bw-readable-text) !important;
  -webkit-text-fill-color: var(--bw-readable-text) !important;
}

html[data-theme="dark"] #content :where(.documentArchivePanel, .backupPanel) button:not(.primary):not(.danger),
html[data-theme="office"] #content :where(.documentArchivePanel, .backupPanel) button:not(.primary):not(.danger) {
  background: linear-gradient(180deg, rgba(34, 48, 62, .98), rgba(22, 36, 50, .98)) !important;
  border-color: rgba(141, 175, 219, .56) !important;
  color: var(--bw-readable-text) !important;
  -webkit-text-fill-color: var(--bw-readable-text) !important;
}

html[data-theme="dark"] #content :where(.documentArchivePanel, .backupPanel) button.primary,
html[data-theme="office"] #content :where(.documentArchivePanel, .backupPanel) button.primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] #content .documentArchivePanel .fileAreaNav button.active,
html[data-theme="office"] #content .documentArchivePanel .fileAreaNav button.active {
  background: linear-gradient(135deg, #1f6feb 0%, #2f7df4 62%, #175fcf 100%) !important;
  border-color: rgba(148, 190, 255, .92) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="dark"] #content .documentArchivePanel .fileAreaNav button.active *,
html[data-theme="office"] #content .documentArchivePanel .fileAreaNav button.active * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Kalender: leere Listenbereiche sichtbar als echte Eingabeboxen darstellen. */
#content .calendarPlanningPanel :where(.availabilityList, .bookingLinkGrid) > .empty {
  display: flex !important;
  align-items: center !important;
  min-height: 58px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #9bbcf8 !important;
  border-radius: 7px !important;
  background: #f7fbff !important;
  color: #4c5c6d !important;
  -webkit-text-fill-color: #4c5c6d !important;
  padding: 10px 12px !important;
  font-weight: 750 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5) !important;
}

html[data-theme="dark"] #content .calendarPlanningPanel :where(.availabilityList, .bookingLinkGrid) > .empty,
html[data-theme="office"] #content .calendarPlanningPanel :where(.availabilityList, .bookingLinkGrid) > .empty {
  background: rgba(19, 35, 52, .82) !important;
  border-color: rgba(141, 175, 219, .72) !important;
  color: #dce8f5 !important;
  -webkit-text-fill-color: #dce8f5 !important;
}

#content .calendarPlanningPanel .availabilityList {
  min-height: 66px !important;
  box-sizing: border-box !important;
  border: 1px solid #9bbcf8 !important;
  border-radius: 7px !important;
  background: #f7fbff !important;
  padding: 10px 12px !important;
  align-content: start !important;
}

#content .calendarPlanningPanel .availabilityList > .muted {
  margin: 0 !important;
  color: #4c5c6d !important;
  -webkit-text-fill-color: #4c5c6d !important;
  font-weight: 750 !important;
}

html[data-theme="dark"] #content .calendarPlanningPanel .availabilityList,
html[data-theme="office"] #content .calendarPlanningPanel .availabilityList {
  background: rgba(19, 35, 52, .82) !important;
  border-color: rgba(141, 175, 219, .72) !important;
}

html[data-theme="dark"] #content .calendarPlanningPanel .availabilityList > .muted,
html[data-theme="office"] #content .calendarPlanningPanel .availabilityList > .muted {
  color: #dce8f5 !important;
  -webkit-text-fill-color: #dce8f5 !important;
}

/* Kalender: der unsichtbare Zell-Öffner darf die Tageszahlen nicht überdecken. */
#content .calendarCell .calendarCellOpenButton {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  opacity: 1 !important;
}

#content .calendarCell .calendarDayNumber {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 28px;
  min-height: 28px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bw-surface-3, #ffffff) 86%, var(--bw-accent, #2563eb) 14%) !important;
  color: var(--bw-ink, #111827) !important;
  -webkit-text-fill-color: var(--bw-ink, #111827) !important;
  border: 1px solid color-mix(in srgb, var(--bw-accent, #2563eb) 35%, var(--bw-line, #dbe3ea)) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#content .calendarCell.todayCell {
  border-color: var(--bw-accent, #2563eb) !important;
  box-shadow: inset 0 0 0 3px var(--bw-accent, #2563eb), 0 0 0 2px color-mix(in srgb, var(--bw-accent, #2563eb) 18%, transparent) !important;
}

#content .calendarCell.todayCell .calendarDayNumber {
  background: var(--bw-accent, #2563eb) !important;
  border-color: var(--bw-accent, #2563eb) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

#content .calendarCell.todayCell .calendarDayNumber::after {
  content: "Heute" !important;
  margin-left: 6px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

#content .inlineDeleteConfirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #f0b4b4;
  background: #fff5f5;
  color: #7f1d1d;
  -webkit-text-fill-color: #7f1d1d;
  border-radius: 7px;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

#content .inlineDeleteConfirm button {
  min-height: 28px;
  padding: 3px 8px;
}

#content .officeLogoCropBox {
  display: grid;
  gap: 10px;
  border: 1px solid #d0dff2;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

#content .officeLogoCropPreview {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: 1px dashed #9bbcf8;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

#content .officeLogoCropPreview[data-position="links"] {
  place-items: center start;
  padding-left: 24px;
}

#content .officeLogoCropPreview[data-position="rechts"] {
  place-items: center end;
  padding-right: 24px;
}

#content .officeLogoCropPreview img {
  max-width: min(420px, 90%);
  max-height: 140px;
  object-fit: contain;
  transform: translate(var(--office-logo-preview-x, 0), var(--office-logo-preview-y, 0)) scale(var(--office-logo-preview-scale, 1));
  transform-origin: center;
}

#content .officeDocumentStage .printSheet.officeMultiPage {
  position: relative !important;
  height: auto !important;
  min-height: var(--office-pages-height, 297mm) !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  background:
    repeating-linear-gradient(
      to bottom,
      #ffffff 0,
      #ffffff 297mm,
      transparent 297mm,
      transparent 309mm
    ) !important;
}

#content .officeDocumentStage .printSheet:not(.officeMultiPage) {
  min-height: 297mm !important;
  background: #ffffff !important;
}

#content .officeDocumentStage .printSheet:not(.officeMultiPage) .dinLetter {
  min-height: 297mm !important;
  background: #ffffff !important;
}

#content .officeDocumentStage .printSheet.officeMultiPage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(15, 23, 42, .18) 0,
      rgba(15, 23, 42, .18) 1px,
      transparent 1px,
      transparent 297mm,
      rgba(15, 23, 42, .18) 297mm,
      rgba(15, 23, 42, .18) calc(297mm + 1px),
      transparent calc(297mm + 1px),
      transparent 309mm
    );
}

#content .officeDocumentStage .printSheet.officeMultiPage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18);
}

#content .officeDocumentStage .printSheet.officeMultiPage .dinLetter {
  min-height: var(--office-pages-height, 297mm) !important;
  background: transparent !important;
}

#content .officeWordShell .letterSubject [contenteditable="true"].letterEditableActive,
#content .officeWordShell .letterBody[contenteditable="true"].letterEditableActive,
#content .officeWordShell .recipientAddress[contenteditable="true"].letterEditableActive,
#content .officeWordShell .senderWindowLine[contenteditable="true"].letterEditableActive,
#content .officeWordShell .letterFooter[contenteditable="true"].letterEditableActive {
  outline: 2px dashed #1f6fe5 !important;
  background: rgba(31, 111, 229, .08) !important;
}

#content .officeFloatingMic,
#content .officeFloatingMic:hover,
#content .officeFloatingMic:focus,
#content .officeFloatingMic:focus-visible,
#content .officeFloatingMic:active {
  box-sizing: border-box !important;
  width: 116px !important;
  min-width: 116px !important;
  max-width: 116px !important;
  min-height: 74px !important;
  padding: 10px 12px !important;
  display: grid !important;
  grid-template-rows: auto auto;
  place-items: center !important;
  gap: 2px !important;
  overflow: visible !important;
  border: 1px solid #1659bd !important;
  border-radius: 10px !important;
  background: #1f6fe5 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(31, 111, 229, .28) !important;
  transform: none !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

#content .officeFloatingMic span {
  display: block;
  width: 100%;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 13px;
  font-weight: 950;
}

#content .officeWordShell .letterSubject [contenteditable="true"]:focus,
#content .officeWordShell .letterBody[contenteditable="true"]:focus,
#content .officeWordShell .recipientAddress[contenteditable="true"]:focus,
#content .officeWordShell .senderWindowLine[contenteditable="true"]:focus,
#content .officeWordShell .letterFooter[contenteditable="true"]:focus,
#content .officeWordShell .letterSubject [contenteditable="true"].letterEditableActive,
#content .officeWordShell .letterBody[contenteditable="true"].letterEditableActive,
#content .officeWordShell .recipientAddress[contenteditable="true"].letterEditableActive,
#content .officeWordShell .senderWindowLine[contenteditable="true"].letterEditableActive,
#content .officeWordShell .letterFooter[contenteditable="true"].letterEditableActive {
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#content .officeWordShell .letterBody[contenteditable="true"] {
  caret-color: #111827 !important;
  cursor: text !important;
  min-height: 0 !important;
  height: auto !important;
}

#content .officeWordShell .letterContent {
  cursor: text !important;
}

#content .officeWordShell .letterContent::after {
  content: none !important;
  display: none !important;
  min-height: 0 !important;
}

#content .officeWordShell .letterContent:has(.letterBody:focus)::after {
  pointer-events: none !important;
}

#content .officeWordShell .officePageFlowSpacer {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: none !important;
  user-select: none !important;
}

#content .officeWordShell .officeCaretProbe {
  display: inline-block !important;
  width: 0 !important;
  overflow: hidden !important;
}

#content .officePageArea {
  grid-template-columns: minmax(0, max-content) 132px !important;
  gap: 34px !important;
  overflow: visible !important;
}

#content .officeMicRail {
  position: sticky !important;
  top: calc(50vh - 48px) !important;
  width: 132px !important;
  min-width: 132px !important;
  height: 96px !important;
  min-height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 20 !important;
}

#content .officeFloatingMic,
#content .officeFloatingMic:hover,
#content .officeFloatingMic:focus,
#content .officeFloatingMic:focus-visible,
#content .officeFloatingMic:active,
#content .officeFloatingMic.recording,
#content .officeFloatingMic.processing {
  appearance: none !important;
  box-sizing: border-box !important;
  width: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  height: 86px !important;
  min-height: 86px !important;
  max-height: 86px !important;
  padding: 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  overflow: visible !important;
  white-space: normal !important;
  border: 1px solid #1557bb !important;
  border-radius: 10px !important;
  background: #1f6fe5 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 14px 30px rgba(31, 111, 229, .28) !important;
  transform: none !important;
  line-height: 1.08 !important;
  text-align: center !important;
  pointer-events: auto !important;
}

#content .officeFloatingMic.recording {
  background: #b91c1c !important;
  border-color: #7f1d1d !important;
  box-shadow: 0 14px 30px rgba(185, 28, 28, .28) !important;
}

#content .officeFloatingMic.processing {
  background: #7c3aed !important;
  border-color: #5b21b6 !important;
}

#content .officeFloatingMic span,
#content .officeFloatingMic:hover span,
#content .officeFloatingMic:focus span,
#content .officeFloatingMic:active span {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
  line-height: 1.08 !important;
  text-align: center !important;
}

/* Final Office render guard: Diktat sitzt in eigener Schiene rechts neben dem Blatt, nie auf dem Blatt. */
#content .officeDocumentStage {
  overflow: auto !important;
  padding: 28px 34px 42px !important;
}

#content .officePageArea {
  display: grid !important;
  grid-template-columns: minmax(210mm, max-content) 148px !important;
  column-gap: 44px !important;
  align-items: start !important;
  justify-content: center !important;
  width: 100% !important;
  overflow: visible !important;
}

#content .officeSheetWrap {
  position: relative !important;
  justify-self: center !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

#content .officeMicRail {
  position: sticky !important;
  top: calc(50vh - 44px) !important;
  justify-self: start !important;
  align-self: start !important;
  width: 148px !important;
  min-width: 148px !important;
  min-height: 96px !important;
  display: grid !important;
  place-items: center start !important;
  pointer-events: none !important;
  z-index: 40 !important;
}

#content .officeFloatingMic,
#content .officeFloatingMic:hover,
#content .officeFloatingMic:focus,
#content .officeFloatingMic:focus-visible,
#content .officeFloatingMic:active,
#content .officeFloatingMic.recording,
#content .officeFloatingMic.processing {
  pointer-events: auto !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  width: 106px !important;
  min-width: 106px !important;
  max-width: 106px !important;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: #1f6fe5 !important;
  border: 1px solid #1659bd !important;
  box-shadow: 0 14px 28px rgba(31, 111, 229, .24) !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

#content .officeFloatingMic.recording {
  background: #b91c1c !important;
  border-color: #7f1d1d !important;
}

#content .officeFloatingMic.processing {
  background: #6d28d9 !important;
  border-color: #5b21b6 !important;
}

#content .officeFloatingMic span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  line-height: 1.12 !important;
  text-align: center !important;
}

#content .letterTable {
  border-collapse: collapse;
  margin: 4mm 0;
}

#content .letterTable :where(th, td) {
  border: var(--letter-table-border, 1px) solid #1f2937;
  padding: var(--letter-table-padding, 3mm);
  min-width: 24mm;
  min-height: 8mm;
}

#content .letterTable:hover {
  outline: 2px solid rgba(31, 111, 229, .45);
  outline-offset: 2px;
  cursor: pointer;
}

#content .knowledgeLayout,
#content .knowledgeCommunityShell {
  margin-top: 16px !important;
}


.twoFactorCard {
  width: min(520px, calc(100vw - 36px));
}

.twoFactorResetButton {
  width: 100%;
  min-height: 40px;
  font-weight: 800;
  border-color: #f59e0b;
  color: #7c2d12;
  background: #fff7ed;
}

.twoFactorManualBox {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 14px;
  align-items: center;
  border: 1px solid var(--line, #bfd3ef);
  border-radius: 8px;
  background: rgba(227, 239, 255, .55);
  padding: 12px;
}

.twoFactorManualBox span {
  color: var(--muted, #526173);
  font-weight: 800;
}

.twoFactorManualBox code,
.backupCodeGrid code {
  display: inline-block;
  border: 1px solid var(--line, #bfd3ef);
  border-radius: 7px;
  background: #fff;
  color: #0f172a;
  padding: 7px 9px;
  font-weight: 900;
  letter-spacing: .04em;
  user-select: all;
}

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

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


.twoFactorQrBox {
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 1px solid var(--line, #bfd3ef);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.twoFactorQrBox img {
  width: 232px;
  height: 232px;
  image-rendering: pixelated;
}

.twoFactorQrBox p {
  margin: 0;
  color: var(--muted, #526173);
  font-weight: 800;
}

.twoFactorManualDetails {
  border: 1px solid var(--line, #bfd3ef);
  border-radius: 8px;
  background: rgba(227, 239, 255, .45);
  padding: 10px;
}

.twoFactorManualDetails summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--ink, #132235);
}

.twoFactorManualDetails .twoFactorManualBox {
  margin-top: 10px;
}

.initialInstitutionList {
  display: grid;
  gap: 10px;
}

.institutionEntry {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line, #bfd3ef);
  border-radius: 8px;
  background: rgba(255, 255, 255, .62);
  padding: 10px;
}

.institutionEntryHeader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.institutionLookupResults {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.institutionResult {
  align-items: flex-start;
}

[data-honor-field][hidden],
[data-compensation-field][hidden] {
  display: none !important;
}

.adminUserSecurityItem {
  gap: 8px;
}

.itemHeaderLine,
.twoFactorAdminLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.twoFactorAdminLine {
  border-top: 1px solid var(--line, #bfd3ef);
  padding-top: 8px;
}

/* Final mail and mandant rendering guards: keep notices compact and lists aligned. */
#content .emailReaderPane {
  grid-template-rows: none !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
}

#content .emailReaderPane > .emailSecurityNotice.ok {
  display: flex !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  align-items: center !important;
  padding: 7px 12px !important;
}

#content .emailReaderPane > .emailBodyHtml,
#content .emailReaderPane > .emailBodyReader {
  min-height: 340px !important;
}

#content .emailInlineImageGallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px)) !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--bw-line, #bcd3f8) !important;
}

#content .emailInlineImageGallery figure {
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--bw-line, #bcd3f8) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--bw-surface, #fff) 88%, #eef4ff 12%) !important;
}

#content .emailInlineImageGallery img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 140px !important;
  object-fit: contain !important;
}

#content .emailInlineImageGallery figcaption {
  margin-top: 6px !important;
  font-size: 11px !important;
  color: var(--bw-muted, #52616f) !important;
  overflow-wrap: anywhere !important;
}

#content .personListPanel > .list > .item.actionItem {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions {
  width: auto !important;
  min-width: 260px !important;
}

/* E-Mail: OK-Hinweis klein, Bilder sichtbar, Mandantenliste kompakt. */
#content .emailReaderPane > .emailSecurityNotice.ok {
  justify-self: start !important;
  width: auto !important;
  max-width: 100% !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

#content .emailReaderPane > .emailSecurityNotice.ok strong {
  margin-right: 4px !important;
}

#content .emailInlineImageGallery {
  grid-template-columns: repeat(auto-fit, minmax(120px, 180px)) !important;
  margin-top: 12px !important;
  gap: 10px !important;
}

#content .emailInlineImageGallery figure {
  padding: 8px !important;
}

#content .emailInlineImageGallery img {
  max-height: 96px !important;
}

#content .emailBodyHtml img.emailInlineImage {
  display: block !important;
  max-width: 240px !important;
  max-height: 160px !important;
  object-fit: contain !important;
  margin: 8px 0 !important;
}

#content .personListPanel > .list {
  gap: 8px !important;
}

#content .personListPanel > .list > .item.actionItem {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, auto) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 76px !important;
  padding: 8px 10px !important;
}

#content .personListPanel > .list > .item.actionItem > .itemMain {
  align-self: center !important;
  min-height: 0 !important;
  padding: 4px 2px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#content .personListPanel > .list > .item.actionItem > .itemMain strong {
  font-size: 16px !important;
  line-height: 1.2 !important;
}

#content .personContactMeta {
  gap: 1px !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

#content .personFileMeta {
  gap: 5px !important;
  margin-top: 3px !important;
  line-height: 1.2 !important;
}

#content .personFileMeta span {
  min-height: 19px !important;
  padding: 2px 7px !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions {
  justify-content: flex-end !important;
  align-content: center !important;
  min-width: 300px !important;
  max-width: 420px !important;
  gap: 6px !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions :where(button, .buttonLink, .pill) {
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
}

@media (max-width: 1100px) {
  #content .personListPanel > .list > .item.actionItem {
    grid-template-columns: 1fr !important;
  }

  #content .personListPanel > .list > .item.actionItem > .itemActions {
    min-width: 0 !important;
    justify-content: flex-start !important;
  }
}

/* codex-20260708: Mandantenliste als saubere kompakte Zeilen, ohne abgerissene Infobox. */
#content .personsLayout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
  align-items: start !important;
  gap: 14px !important;
}

#content .personListPanel > .list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#content .personListPanel > .list > .item.actionItem {
  display: grid !important;
  grid-template-columns: minmax(420px, 1fr) minmax(300px, max-content) !important;
  align-items: center !important;
  column-gap: 12px !important;
  row-gap: 8px !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(59, 130, 246, 0.36) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
}

#content .personListPanel > .list > .item.actionItem > button.itemMain {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  justify-content: stretch !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--text, #0f172a) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

#content .personListPanel > .list > .item.actionItem > button.itemMain:hover {
  background: transparent !important;
  box-shadow: none !important;
}

#content .personListPanel > .list > .item.actionItem > button.itemMain strong {
  display: block !important;
  margin: 0 0 2px !important;
  color: var(--text, #0f172a) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  overflow-wrap: anywhere !important;
}

#content .personListPanel .personContactMeta {
  display: grid !important;
  gap: 2px !important;
  width: 100% !important;
  color: var(--muted, #475569) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

#content .personListPanel .personContactMeta span {
  display: block !important;
  overflow-wrap: anywhere !important;
}

#content .personListPanel .personFileMeta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  width: 100% !important;
  margin-top: 4px !important;
}

#content .personListPanel .personFileMeta span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 21px !important;
  padding: 2px 8px !important;
  border: 1px solid rgba(59, 130, 246, 0.28) !important;
  border-radius: 999px !important;
  background: rgba(248, 251, 255, 0.98) !important;
  color: #172033 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 300px !important;
  max-width: 390px !important;
  justify-self: end !important;
  align-self: center !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions :where(button, .buttonLink, .pill) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 29px !important;
  height: 29px !important;
  padding: 4px 9px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 1300px) {
  #content .personListPanel > .list > .item.actionItem {
    grid-template-columns: 1fr !important;
  }

  #content .personListPanel > .list > .item.actionItem > .itemActions {
    min-width: 0 !important;
    max-width: none !important;
    justify-self: start !important;
    justify-content: flex-start !important;
  }
}

/* codex-20260708: Inline-Bilder aus E-Mails sicher und kompakt sichtbar machen. */
#content .emailInlineAttachmentStrip {
  padding: 10px 12px !important;
}

#content .emailInlineAttachmentStrip h3 {
  margin: 0 0 8px !important;
  font-size: 14px !important;
}

#content .emailInlineAttachmentStrip .emailInlineImageGallery {
  margin: 0 !important;
}

/* codex-20260708-ui-final: letzte harte Korrektur fuer E-Mail-Hinweis und Mandantenliste. */
#content .emailReaderPane .emailSecurityNotice.ok {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: start !important;
  justify-self: start !important;
  width: fit-content !important;
  max-width: calc(100% - 2px) !important;
  min-width: 0 !important;
  min-height: 30px !important;
  height: auto !important;
  flex: 0 0 auto !important;
  margin: 0 0 8px !important;
  padding: 6px 11px !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
}

#content .emailReaderPane .emailSecurityNotice.ok strong {
  margin-right: 4px !important;
}

#content .personsLayout {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 320px) !important;
}

#content .personListPanel > .list > .item.actionItem {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 8px !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(59, 130, 246, 0.32) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
}

#content .personListPanel > .list > .item.actionItem > .itemMain,
#content .personListPanel > .list > .item.actionItem > button.itemMain,
#content .personListPanel .item.actionItem .itemMain {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text, #0f172a) !important;
  text-align: left !important;
}

#content .personListPanel > .list > .item.actionItem > .itemMain:hover,
#content .personListPanel > .list > .item.actionItem > button.itemMain:hover {
  background: transparent !important;
  box-shadow: none !important;
}

#content .personListPanel .personContactMeta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 2px 14px !important;
  width: 100% !important;
  margin-top: 2px !important;
}

#content .personListPanel .personFileMeta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 3px !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  justify-self: start !important;
  align-self: start !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-top: 7px !important;
  border-top: 1px solid rgba(148, 163, 184, 0.22) !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions :where(button, .buttonLink, .pill) {
  min-height: 28px !important;
  height: auto !important;
  padding: 4px 9px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

/* codex-20260708-emailfix2: E-Mail-Hinweis und Inline-Bilder kompakt erzwingen. */
#content .emailReaderPane {
  align-items: start !important;
}

#content .emailReaderPane > .emailSecurityNotice.ok,
#content .emailReaderPane .emailSecurityNotice.ok {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  align-self: start !important;
  justify-self: start !important;
  place-self: start !important;
  inline-size: max-content !important;
  width: auto !important;
  max-inline-size: min(620px, 100%) !important;
  max-width: min(620px, 100%) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
  margin: 0 0 10px !important;
  padding: 7px 11px !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow: visible !important;
}

#content .emailReaderPane .emailIncomingAttachments,
#content .emailReaderPane .emailInlineAttachmentStrip {
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  min-height: 0 !important;
}

#content .emailReaderPane .emailInlineImageGallery,
#content .emailBodyHtml .emailInlineImageGallery {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 220px)) !important;
  gap: 8px !important;
  align-items: start !important;
  margin: 8px 0 0 !important;
}

#content .emailReaderPane .emailInlineImageGallery figure,
#content .emailBodyHtml .emailInlineImageGallery figure {
  display: grid !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 6px !important;
  border: 1px solid rgba(148, 163, 184, 0.28) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.82) !important;
}

#content .emailReaderPane .emailInlineImageGallery img,
#content .emailBodyHtml .emailInlineImageGallery img,
#content .emailBodyHtml img.emailInlineImage {
  display: block !important;
  max-width: 220px !important;
  max-height: 150px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

#content .emailReaderPane .emailInlineImageGallery figcaption,
#content .emailBodyHtml .emailInlineImageGallery figcaption {
  color: var(--muted, #475569) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

/* codex-20260708-emailfix3: E-Mail-Hinweis darf nie als Inhaltsflaeche wachsen. */
#content .emailReaderPane > .emailSecurityNotice,
#content .emailReaderPane .emailSecurityNotice {
  box-sizing: border-box !important;
  grid-column: 1 / -1 !important;
  align-self: start !important;
  justify-self: start !important;
  flex: 0 0 auto !important;
}

#content .emailReaderPane > .emailSecurityNotice.ok,
#content .emailReaderPane .emailSecurityNotice.ok {
  width: fit-content !important;
  inline-size: fit-content !important;
  max-width: min(640px, 100%) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 7px 12px !important;
  margin: 0 0 8px !important;
}

#content .emailReaderPane > .emailBodyHtml,
#content .emailReaderPane > .emailBodyText,
#content .emailReaderPane > .emailHtmlBody,
#content .emailReaderPane > .emailPlainBody {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* codex-20260708-personlist-final: Mandantenliste als ruhige zweispaltige Zeile. */
#content .personListPanel > .list > .item.actionItem {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, max-content) !important;
  gap: 12px !important;
  align-items: center !important;
}

#content .personListPanel > .list > .item.actionItem > .itemMain,
#content .personListPanel > .list > .item.actionItem > button.itemMain {
  background: rgba(219, 234, 254, 0.72) !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions {
  justify-self: end !important;
  align-self: center !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: 240px !important;
  max-width: 430px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

@media (max-width: 1250px) {
  #content .personListPanel > .list > .item.actionItem {
    grid-template-columns: 1fr !important;
  }

  #content .personListPanel > .list > .item.actionItem > .itemActions {
    justify-self: start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* codex-20260708-pfuschfix4: Mandantenliste und E-Mail-Hinweise sauber verdichten. */
#content .personsLayout {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px) !important;
  gap: 14px !important;
  align-items: start !important;
}

#content .personListPanel > .list {
  gap: 8px !important;
}

#content .personListPanel > .list > .item.actionItem {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(37, 99, 235, 0.24) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: none !important;
}

#content .personListPanel > .list > .item.actionItem > .itemMain,
#content .personListPanel > .list > .item.actionItem > button.itemMain,
#content .personListPanel .item.actionItem .itemMain {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  gap: 3px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text, #0f172a) !important;
  text-align: left !important;
}

#content .personListPanel .personContactMeta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 1px 12px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

#content .personListPanel .personFileMeta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 3px !important;
}

#content .personListPanel .personFileMeta span {
  min-height: 20px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  align-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 520px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

#content .personListPanel > .list > .item.actionItem > .itemActions :where(button, .buttonLink, .pill) {
  min-height: 26px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

#content .emailReaderPane {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  align-content: start !important;
  gap: 10px !important;
}

#content .emailReaderPane > .emailSecurityNotice,
#content .emailReaderPane .emailSecurityNotice {
  grid-column: 1 / -1 !important;
  align-self: start !important;
  justify-self: start !important;
  width: fit-content !important;
  inline-size: fit-content !important;
  max-width: min(640px, 100%) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 8px !important;
  padding: 7px 12px !important;
}

@media (max-width: 1250px) {
  #content .personsLayout {
    grid-template-columns: 1fr !important;
  }

  #content .personListPanel > .list > .item.actionItem {
    grid-template-columns: 1fr !important;
  }

  #content .personListPanel > .list > .item.actionItem > .itemActions {
    justify-self: start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* codex-20260708-pfuschfix6: finale sichtbare Reparatur fuer Mandantenliste und E-Mail. */
body #content .personsLayout {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 330px) !important;
  gap: 12px !important;
  align-items: start !important;
}

body #content .personListPanel > .list {
  display: grid !important;
  gap: 8px !important;
}

body #content .personListPanel > .list > .item.actionItem {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(37, 99, 235, .24) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: none !important;
}

body #content .personListPanel > .list > .item.actionItem > .itemMain,
body #content .personListPanel > .list > .item.actionItem > button.itemMain,
body #content .personListPanel .item.actionItem .itemMain {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2px !important;
  align-content: start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  color: var(--text,#0f172a) !important;
  text-align: left !important;
}

body #content .personListPanel .itemTitle,
body #content .personListPanel .itemMain strong {
  font-size: 15px !important;
  line-height: 1.2 !important;
  margin: 0 0 3px !important;
}

body #content .personListPanel .personContactMeta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 2px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

body #content .personListPanel .personFileMeta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-top: 4px !important;
}

body #content .personListPanel .personFileMeta span {
  min-height: 18px !important;
  padding: 2px 7px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

body #content .personListPanel > .list > .item.actionItem > .itemActions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  justify-content: flex-end !important;
  align-items: center !important;
  align-self: center !important;
  justify-self: end !important;
  width: auto !important;
  max-width: 520px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body #content .personListPanel > .list > .item.actionItem > .itemActions :where(button,.buttonLink,.pill) {
  min-height: 26px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  line-height: 1.1 !important;
}

body #content .emailReaderPane {
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-content: start !important;
  align-items: start !important;
  gap: 8px !important;
}

body #content .emailReaderPane > .emailSecurityNotice,
body #content .emailReaderPane .emailSecurityNotice {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  inline-size: max-content !important;
  max-width: min(680px,100%) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 7px 11px !important;
  margin: 0 0 6px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
  justify-self: start !important;
  align-self: start !important;
  grid-column: 1 / -1 !important;
}

body #content .emailReaderPane > .emailSecurityNotice.ok,
body #content .emailReaderPane .emailSecurityNotice.ok {
  background: #ecfdf5 !important;
  border: 1px solid #86efac !important;
  color: #166534 !important;
}

body #content .emailReaderPane .emailIncomingAttachments,
body #content .emailReaderPane .emailInlineAttachmentStrip {
  grid-column: 1 / -1 !important;
  padding: 8px 10px !important;
  margin: 0 0 8px !important;
  min-height: 0 !important;
  height: auto !important;
}

body #content .emailBodyHtml img.emailInlineImage,
body #content .emailBodyHtml .emailInlineImageGallery img,
body #content .emailReaderPane .emailInlineImageGallery img {
  display: block !important;
  max-width: 260px !important;
  max-height: 170px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

@media (max-width: 1250px) {
  body #content .personsLayout { grid-template-columns: 1fr !important; }
  body #content .personListPanel > .list > .item.actionItem { grid-template-columns: 1fr !important; }
  body #content .personListPanel > .list > .item.actionItem > .itemActions {
    justify-self: start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
  }
}

/* codex-20260708-pfuschfix7: E-Mail-HTML darf Signaturen und Telefonnummern nicht zeichenweise umbrechen. */
body #content .emailBodyHtml {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body #content .emailBodyHtml :where(p, div, span, a, li, td, th, strong, em) {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

body #content .emailBodyHtml table {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
  border-collapse: collapse !important;
}

body #content .emailBodyHtml :where(td, th) {
  min-width: 72px !important;
  max-width: 100% !important;
  vertical-align: top !important;
}

body #content .emailBodyHtml img.emailInlineImage,
body #content .emailBodyHtml .emailInlineImageGallery img,
body #content .emailReaderPane .emailInlineImageGallery img {
  display: block !important;
  max-width: 260px !important;
  max-height: 170px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

body #content .pageHeaderCard {
  margin-bottom: 12px !important;
}

body #content .pageHeaderCard h1 {
  margin: 0 !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
}

body #content .pageHeaderCard p {
  margin: 4px 0 0 !important;
  color: var(--muted, #475569) !important;
}

/* codex-20260709-wealthclean1: Vermögensverwaltung in klare Arbeitsbereiche getrennt. */
body #content .wealthCleanPage {
  display: grid;
  gap: 12px;
}

body #content .wealthCleanSummary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: stretch;
}

body #content .wealthCleanMetric {
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .08);
  display: grid;
  align-content: center;
  gap: 4px;
}

body #content .wealthCleanMetric span,
body #content .wealthCleanMetric small {
  color: #475569;
}

body #content .wealthCleanMetric strong {
  font-size: 22px;
  line-height: 1.15;
  color: #1d4ed8;
}

body #content .wealthCleanTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
}

body #content .wealthCleanTabs button {
  border: 1px solid #93c5fd;
  border-radius: 8px;
  background: #eaf3ff;
  color: #0f172a;
  min-height: 34px;
  padding: 7px 11px;
  font-weight: 700;
}

body #content .wealthCleanTabs button.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
}

body #content .wealthCleanWorkspace {
  display: grid;
  gap: 12px;
}

body #content .wealthCleanWorkspaceHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid #dbeafe;
  padding-bottom: 10px;
}

body #content .wealthCleanWorkspaceHeader h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}

body #content .wealthCleanWorkspaceHeader p {
  margin: 4px 0 0;
  color: #475569;
}

body #content .wealthCleanHeaderActions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: max-content;
}

body #content .wealthCleanMetricRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 8px;
}

body #content .wealthCleanMetricRow .wealthCleanMetric {
  min-height: 72px;
  padding: 10px 12px;
}

body #content .wealthCleanGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 12px;
  align-items: start;
}

body #content .wealthCleanMain,
body #content .wealthCleanSide {
  min-width: 0;
}

body #content .wealthCleanMain h3,
body #content .wealthCleanSide h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

body #content .wealthCleanMain h3:not(:first-child) {
  margin-top: 14px;
}

body #content .wealthCleanSide > .panel,
body #content .wealthCleanSide .wealthFormPanel {
  width: 100%;
  margin: 0;
}

body #content .wealthCleanScroll {
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

body #content .wealthCleanTableWrap {
  max-height: 440px;
  overflow: auto;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  background: #fff;
}

body #content .wealthCleanTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

body #content .wealthCleanTable th,
body #content .wealthCleanTable td {
  padding: 8px;
  border-bottom: 1px solid #dbeafe;
  text-align: left;
  vertical-align: top;
}

body #content .wealthCleanTable td span {
  display: block;
  margin-top: 2px;
  color: #64748b;
}

body #content .wealthCleanTable .moneyCell {
  white-space: nowrap;
  text-align: right;
  font-weight: 800;
}

body #content .wealthCleanTable .tableActions {
  white-space: nowrap;
  text-align: right;
}

body #content .wealthCleanList {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow: auto;
}

body #content .wealthCleanImport textarea {
  min-height: 150px;
}

body #content .wealthCleanNotice {
  border: 1px solid #bfdbfe;
  background: #f8fbff;
  border-radius: 8px;
  padding: 10px;
  color: #334155;
}

body #content .wealthCleanDebt > .card,
body #content .wealthCleanDebt > .panel {
  margin: 0;
}

@media (max-width: 1180px) {
  body #content .wealthCleanGrid {
    grid-template-columns: 1fr;
  }

  body #content .wealthCleanHeaderActions {
    justify-content: flex-start;
  }

  body #content .wealthCleanWorkspaceHeader {
    display: grid;
  }
}

/* codex-20260709-wealthclean2: kompakte Vermoegensverwaltung ohne leere Riesenflaechen. */
body #content .wealthV4Page {
  display: grid;
  gap: 10px;
}

body #content .wealthV4Topline {
  padding: 10px 12px;
  margin: 0;
}

body #content .wealthV4Page .panel {
  margin: 0;
}

body #content .wealthV4Kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 8px;
}

body #content .wealthV4Kpi {
  min-height: 58px;
  padding: 8px 10px;
  border: 1px solid var(--border, #b7cdf4);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body #content .wealthV4Kpi span {
  font-size: 12px;
  color: var(--muted, #526173);
  font-weight: 700;
}

body #content .wealthV4Kpi strong {
  font-size: 20px;
  line-height: 1.15;
  color: #1f6fe5;
}

body #content .wealthV4Kpi small {
  font-size: 11px;
  color: var(--muted, #526173);
}

body #content .wealthV4Tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  margin: 0;
}

body #content .wealthV4Tabs button {
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid #a8c4f2;
  border-radius: 8px;
  background: #eaf2ff;
  font-weight: 700;
}

body #content .wealthV4Tabs button.active {
  background: #1f6fe5;
  color: #fff;
  box-shadow: 0 6px 18px rgba(31, 111, 229, .22);
}

body #content .wealthV4Workspace {
  padding: 12px;
  display: grid;
  gap: 10px;
  margin: 0;
}

body #content .wealthV4WorkspaceHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(90, 130, 190, .25);
}

body #content .wealthV4WorkspaceHeader h2 {
  margin: 0;
  font-size: 20px;
}

body #content .wealthV4WorkspaceHeader p {
  margin: 2px 0 0;
  color: var(--muted, #526173);
}

body #content .wealthV4MiniStats {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

body #content .wealthV4Layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 10px;
  align-items: start;
}

body #content .wealthV4Main {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body #content .wealthV4MainCard,
body #content .wealthV4SideCard {
  border: 1px solid #b7cdf4;
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  padding: 10px;
  min-width: 0;
  box-shadow: none;
}

body #content .wealthV4MainCard h3,
body #content .wealthV4SideCard h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

body #content .wealthV4TableWrap {
  max-height: 360px;
  overflow: auto;
  border: 1px solid rgba(90, 130, 190, .22);
  border-radius: 8px;
  background: #fff;
}

body #content .wealthV4Table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

body #content .wealthV4Table th,
body #content .wealthV4Table td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(90, 130, 190, .18);
  vertical-align: top;
  text-align: left;
}

body #content .wealthV4Table th {
  position: sticky;
  top: 0;
  background: #eef5ff;
  z-index: 1;
}

body #content .wealthV4Table td span {
  display: block;
  color: var(--muted, #526173);
  margin-top: 2px;
}

body #content .wealthV4Table .moneyCell {
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
}

body #content .wealthV4Table .tableActions {
  text-align: right;
  white-space: nowrap;
}

body #content .wealthV4List {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

body #content .wealthV4Side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

body #content .wealthV4Side .panel,
body #content .wealthV4Side .subcard,
body #content .wealthV4Side .wealthFormPanel {
  margin: 0;
  width: 100%;
  box-shadow: none;
}

body #content .wealthV4Side .grid,
body #content .wealthV4Side form.grid {
  gap: 8px;
}

body #content .wealthV4Side .two,
body #content .wealthV4Side .three {
  grid-template-columns: 1fr;
}

body #content .wealthV4Notice {
  padding: 8px 10px;
  border: 1px solid #f0d69a;
  border-radius: 8px;
  background: #fff8e6;
  color: #6d4b00;
  font-weight: 700;
}

body #content .wealthV4Status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}

body #content .wealthV4Status.ok {
  background: #e8fff0;
  color: #12642d;
  border: 1px solid #a8e7bc;
}

body #content .wealthV4Status.warning {
  background: #fff4d9;
  color: #7a4d00;
  border: 1px solid #f0c977;
}

@media (max-width: 1180px) {
  body #content .wealthV4Kpis,
  body #content .wealthV4MiniStats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body #content .wealthV4Layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body #content .wealthV4Kpis,
  body #content .wealthV4MiniStats {
    grid-template-columns: 1fr;
  }
}

/* codex-20260710-wealth-v5: Vermoegensverwaltung als vollwertiger Arbeitsbereich. */
body #content .wealthV5Page {
  display: grid;
  gap: 10px;
}

body #content .wealthV5Top,
body #content .wealthV5Tabs,
body #content .wealthV5Workspace {
  border: 1px solid #b8c8dc;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: none;
}

body #content .wealthV5Top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

body #content .wealthV5Top h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  color: #102033;
}

body #content .wealthV5Top p {
  margin: 2px 0 0;
  color: #526173;
}

body #content .wealthV5TopActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body #content .wealthV5TopActions button,
body #content .wealthV5QuickNav button {
  min-height: 32px;
  border-radius: 8px;
  border: 1px solid #9db5d1;
  background: #ffffff;
  color: #102033;
  font-weight: 700;
  padding: 6px 10px;
}

body #content .wealthV5Tabs {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
}

body #content .wealthV5Tabs button {
  min-height: 58px;
  border: 0;
  border-right: 1px solid #d2dbe8;
  border-radius: 0;
  background: #f8fafc;
  color: #102033;
  padding: 8px 9px;
  text-align: left;
}

body #content .wealthV5Tabs button:last-child {
  border-right: 0;
}

body #content .wealthV5Tabs button strong,
body #content .wealthV5Tabs button span {
  display: block;
}

body #content .wealthV5Tabs button strong {
  font-size: 13px;
  line-height: 1.15;
}

body #content .wealthV5Tabs button span {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.2;
  color: #526173;
  font-weight: 600;
}

body #content .wealthV5Tabs button.active {
  background: #123c69;
  color: #ffffff;
}

body #content .wealthV5Tabs button.active span {
  color: #dbeafe;
}

body #content .wealthV5Workspace {
  display: grid;
  gap: 10px;
  padding: 12px;
}

body #content .wealthV5WorkspaceHeader {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d2dbe8;
}

body #content .wealthV5WorkspaceHeader h2 {
  margin: 0;
  font-size: 20px;
  color: #102033;
}

body #content .wealthV5WorkspaceHeader p {
  margin: 2px 0 0;
  color: #526173;
}

body #content .wealthV5Split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 10px;
  align-items: start;
}

body #content .wealthV5Single,
body #content .wealthV5Main,
body #content .wealthV5Aside {
  min-width: 0;
}

body #content .wealthV5Main {
  display: grid;
  gap: 10px;
}

body #content .wealthV5Aside {
  display: grid;
  gap: 10px;
}

body #content .wealthV5KpiGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 8px;
}

body #content .wealthV5KpiGrid.four {
  grid-template-columns: repeat(4, minmax(130px, 1fr));
}

body #content .wealthV5Kpi {
  min-height: 68px;
  border: 1px solid #c7d3e2;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 10px;
  display: grid;
  align-content: center;
  gap: 3px;
}

body #content .wealthV5Kpi span,
body #content .wealthV5Kpi small {
  color: #526173;
  font-weight: 700;
}

body #content .wealthV5Kpi span {
  font-size: 12px;
}

body #content .wealthV5Kpi strong {
  color: #123c69;
  font-size: 20px;
  line-height: 1.15;
}

body #content .wealthV5Kpi.income strong,
body #content .wealthV5Kpi.asset strong,
body #content .amountPlus {
  color: #126b43;
}

body #content .wealthV5Kpi.expense strong,
body #content .wealthV5Kpi.debt strong,
body #content .amountMinus {
  color: #a33636;
}

body #content .wealthV5Kpi.warn strong {
  color: #8a5a00;
}

body #content .wealthV5Two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body #content .wealthV5Block,
body #content .wealthV5SideBox,
body #content .wealthV5QuickNav,
body #content .wealthV5Aside .wealthFormPanel {
  border: 1px solid #c7d3e2;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
  margin: 0;
  box-shadow: none;
}

body #content .wealthV5Block h3,
body #content .wealthV5SideBox h3,
body #content .wealthV5QuickNav h3 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.25;
  color: #102033;
}

body #content .wealthV5QuickNav {
  display: grid;
  gap: 7px;
}

body #content .wealthV5TableWrap {
  max-height: 430px;
  overflow: auto;
  border: 1px solid #d2dbe8;
  border-radius: 8px;
  background: #ffffff;
}

body #content .wealthV5Table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

body #content .wealthV5Table th,
body #content .wealthV5Table td {
  padding: 7px 8px;
  border-bottom: 1px solid #e3e9f1;
  text-align: left;
  vertical-align: top;
}

body #content .wealthV5Table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef3f8;
  color: #102033;
  font-size: 12px;
}

body #content .wealthV5Table td strong,
body #content .wealthV5Table td small {
  display: block;
}

body #content .wealthV5Table td small {
  margin-top: 2px;
  color: #526173;
}

body #content .wealthV5Table .moneyCell {
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
}

body #content .wealthV5Table .tableActions {
  text-align: right;
  white-space: nowrap;
}

body #content .wealthV5Status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid #c7d3e2;
  background: #f8fafc;
  color: #334155;
}

body #content .wealthV5Status.ok {
  border-color: #a9d8bf;
  background: #eefaf3;
  color: #126b43;
}

body #content .wealthV5Status.warn {
  border-color: #e6c980;
  background: #fff8e6;
  color: #7a5200;
}

body #content .wealthV5List {
  display: grid;
  gap: 7px;
  max-height: 340px;
  overflow: auto;
}

body #content .wealthV5ListRow {
  width: 100%;
  border: 1px solid #d2dbe8;
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px;
  display: grid;
  gap: 4px;
  text-align: left;
}

body #content button.wealthV5ListRow {
  cursor: pointer;
}

body #content .wealthV5ListRow strong,
body #content .wealthV5ListRow span {
  display: block;
}

body #content .wealthV5ListRow span {
  color: #526173;
}

body #content .wealthV5Checklist {
  display: grid;
  gap: 7px;
}

body #content .wealthV5Checklist span {
  border: 1px solid #d2dbe8;
  border-radius: 8px;
  padding: 8px 10px;
  background: #f8fafc;
  font-weight: 700;
}

body #content .wealthV5Checklist span.done {
  border-color: #a9d8bf;
  background: #eefaf3;
  color: #126b43;
}

body #content .wealthV5Checklist span.open {
  border-color: #e6c980;
  background: #fff8e6;
  color: #7a5200;
}

body #content .wealthV5Aside .grid,
body #content .wealthV5Aside form.grid {
  gap: 8px;
}

body #content .wealthV5Aside .two,
body #content .wealthV5Aside .three {
  grid-template-columns: 1fr;
}

body #content .wealthV5Aside textarea,
body #content .wealthV5SideBox textarea {
  min-height: 110px;
}

body #content .wealthV5Notice {
  border: 1px solid #e6c980;
  border-radius: 8px;
  background: #fff8e6;
  color: #674500;
  padding: 8px 10px;
  font-weight: 700;
}

body #content .wealthV5Letter {
  width: 100%;
  min-height: 170px;
  resize: vertical;
}

@media (max-width: 1320px) {
  body #content .wealthV5Tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body #content .wealthV5KpiGrid,
  body #content .wealthV5KpiGrid.four {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  body #content .wealthV5Split,
  body #content .wealthV5Two {
    grid-template-columns: 1fr;
  }

  body #content .wealthV5Top {
    align-items: stretch;
    flex-direction: column;
  }

  body #content .wealthV5TopActions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  body #content .wealthV5Tabs,
  body #content .wealthV5KpiGrid,
  body #content .wealthV5KpiGrid.four {
    grid-template-columns: 1fr;
  }

  body #content .wealthV5Tabs button {
    min-height: 46px;
    border-right: 0;
    border-bottom: 1px solid #d2dbe8;
  }
}

/* codex-20260710-wealth-v5-hd-fix: HD-Layout, lesbare Tabs, keine Textueberlagerung. */
body #content .wealthV5Page {
  gap: 16px !important;
  font-size: 15px !important;
}

body #content .wealthV5Top {
  padding: 18px 20px !important;
}

body #content .wealthV5Top h2 {
  font-size: 24px !important;
}

body #content .wealthV5Top p {
  margin-top: 5px !important;
  font-size: 15px !important;
}

body #content .wealthV5TopActions button,
body #content .wealthV5QuickNav button {
  min-height: 42px !important;
  padding: 9px 14px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

body #content .wealthV5Tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
  gap: 10px !important;
  padding: 10px !important;
  overflow: visible !important;
}

body #content .wealthV5Tabs button {
  min-height: 88px !important;
  height: auto !important;
  border: 1px solid #c7d3e2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 13px 15px !important;
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
}

body #content .wealthV5Tabs button.active {
  background: #123c69 !important;
  color: #ffffff !important;
}

body #content .wealthV5Tabs button strong,
body #content .wealthV5Tabs button span {
  display: block !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  white-space: normal !important;
  position: static !important;
}

body #content .wealthV5Tabs button strong {
  font-size: 15px !important;
  line-height: 1.18 !important;
}

body #content .wealthV5Tabs button span {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  color: #526173 !important;
}

body #content .wealthV5Tabs button.active span {
  color: #dbeafe !important;
}

body #content .wealthV5Workspace {
  gap: 18px !important;
  padding: 20px !important;
}

body #content .wealthV5WorkspaceHeader h2 {
  font-size: 26px !important;
}

body #content .wealthV5WorkspaceHeader p {
  margin-top: 6px !important;
  font-size: 15px !important;
}

body #content .wealthV5Split {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px) !important;
  gap: 16px !important;
}

body #content .wealthV5Main,
body #content .wealthV5Aside {
  gap: 16px !important;
}

body #content .wealthV5KpiGrid {
  grid-template-columns: repeat(3, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

body #content .wealthV5KpiGrid.four {
  grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
}

body #content .wealthV5Kpi {
  min-height: 96px !important;
  padding: 16px 18px !important;
  gap: 6px !important;
}

body #content .wealthV5Kpi span {
  font-size: 14px !important;
}

body #content .wealthV5Kpi strong {
  font-size: 28px !important;
}

body #content .wealthV5Kpi small {
  font-size: 13px !important;
}

body #content .wealthV5Two {
  gap: 16px !important;
}

body #content .wealthV5Block,
body #content .wealthV5SideBox,
body #content .wealthV5QuickNav,
body #content .wealthV5Aside .wealthFormPanel {
  padding: 16px !important;
}

body #content .wealthV5Block h3,
body #content .wealthV5SideBox h3,
body #content .wealthV5QuickNav h3 {
  margin-bottom: 12px !important;
  font-size: 18px !important;
}

body #content .wealthV5Table {
  font-size: 15px !important;
}

body #content .wealthV5Table th,
body #content .wealthV5Table td {
  padding: 11px 12px !important;
}

body #content .wealthV5ListRow,
body #content .wealthV5Checklist span {
  padding: 12px 14px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

body #content .wealthV5ListRow span {
  font-size: 14px !important;
}

@media (max-width: 1320px) {
  body #content .wealthV5Tabs,
  body #content .wealthV5KpiGrid,
  body #content .wealthV5KpiGrid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1050px) {
  body #content .wealthV5Split,
  body #content .wealthV5Two {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  body #content .wealthV5Tabs,
  body #content .wealthV5KpiGrid,
  body #content .wealthV5KpiGrid.four {
    grid-template-columns: 1fr !important;
  }

  body #content .wealthV5Tabs button {
    min-height: 76px !important;
  }
}

/* codex-20260710-wealth-v5-workflow: keine schmale rechte Erfassungsspalte mehr. */
body #content .wealthV5Workflow {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

body #content .wealthV5Workflow span {
  min-height: 54px !important;
  border: 1px solid #c7d3e2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #102033 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
}

body #content .wealthV5Workflow strong {
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #123c69 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

body #content .wealthV5Flow {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  min-width: 0 !important;
}

body #content .wealthV5FormLane {
  border: 1px solid #c7d3e2 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 16px !important;
  display: grid !important;
  gap: 14px !important;
}

body #content .wealthV5FormLane > header {
  border-bottom: 1px solid #e3e9f1 !important;
  padding-bottom: 10px !important;
}

body #content .wealthV5FormLane > header h3 {
  margin: 0 !important;
  color: #102033 !important;
  font-size: 20px !important;
}

body #content .wealthV5FormLane > header p {
  margin: 4px 0 0 !important;
  color: #526173 !important;
  font-size: 15px !important;
}

body #content .wealthV5FormLane .wealthV5Aside,
body #content .wealthV5FormLane .wealthFormPanel,
body #content .wealthV5FormLane .wealthV5SideBox,
body #content .wealthV5FormLane .wealthV5QuickNav {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-shadow: none !important;
}

body #content .wealthV5FormLane .wealthForm,
body #content .wealthV5FormLane form.grid {
  max-width: none !important;
}

body #content .wealthV5FormLane .three,
body #content .wealthV5FormLane .two {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body #content .wealthV5FormLane label.wide,
body #content .wealthV5FormLane .wide {
  grid-column: 1 / -1 !important;
}

body #content .wealthV5Split {
  grid-template-columns: 1fr !important;
}

@media (max-width: 1180px) {
  body #content .wealthV5Workflow,
  body #content .wealthV5FormLane .three,
  body #content .wealthV5FormLane .two {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  body #content .wealthV5Workflow,
  body #content .wealthV5FormLane .three,
  body #content .wealthV5FormLane .two {
    grid-template-columns: 1fr !important;
  }
}

/* codex-20260710-wealth-v6-compact: ruhiger Workflow statt aufgeblasener HD-Kacheln. */
body #content .wealthV6Page {
  display: grid;
  gap: 10px;
  color: #102033;
  font-size: 14px;
}

body #content .wealthV6Tabs,
body #content .wealthV6Toolbar,
body #content .wealthV6Workspace {
  border: 1px solid #c7d3e2;
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: none;
}

body #content .wealthV6Tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 6px;
  padding: 8px;
}

body #content .wealthV6Tabs button {
  min-height: 42px;
  height: auto;
  border: 1px solid #c7d3e2;
  border-radius: 8px;
  background: #ffffff;
  color: #102033;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 800;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

body #content .wealthV6Tabs button.active {
  background: #123c69;
  border-color: #123c69;
  color: #ffffff;
}

body #content .wealthV6Toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

body #content .wealthV6Toolbar h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
}

body #content .wealthV6Toolbar p {
  margin: 2px 0 0;
  color: #526173;
  font-size: 13px;
}

body #content .wealthV6ToolbarActions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

body #content .wealthV6ToolbarActions button {
  min-height: 32px;
  border: 1px solid #9db5d1;
  border-radius: 8px;
  background: #ffffff;
  color: #102033;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 800;
}

body #content .wealthV6Workspace {
  display: grid;
  gap: 10px;
  padding: 12px;
}

body #content .wealthV6Workflow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body #content .wealthV6Workflow span {
  min-height: 30px;
  border: 1px solid #d2dbe8;
  border-radius: 8px;
  background: #ffffff;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
}

body #content .wealthV6Metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

body #content .wealthV6Metrics.compact {
  grid-template-columns: repeat(auto-fit, minmax(180px, 260px));
}

body #content .wealthV6Metric {
  min-height: 58px;
  border: 1px solid #d2dbe8;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 10px;
  display: grid;
  align-content: center;
  gap: 2px;
}

body #content .wealthV6Metric span,
body #content .wealthV6Metric small {
  color: #526173;
  font-size: 12px;
  font-weight: 700;
}

body #content .wealthV6Metric strong {
  color: #123c69;
  font-size: 19px;
  line-height: 1.15;
}

body #content .wealthV6Metric.asset strong,
body #content .wealthV6Metric.income strong {
  color: #126b43;
}

body #content .wealthV6Metric.debt strong,
body #content .wealthV6Metric.expense strong {
  color: #9f3434;
}

body #content .wealthV6Grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body #content .wealthV6Panel,
body #content .wealthV6FormBlock {
  border: 1px solid #d2dbe8;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

body #content .wealthV6Panel h3,
body #content .wealthV6FormBlock h3 {
  margin: 0 0 8px;
  color: #102033;
  font-size: 15px;
  line-height: 1.25;
}

body #content .wealthV6Empty {
  border: 1px dashed #c7d3e2;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px;
  color: #526173;
}

body #content .wealthV6TableWrap {
  max-height: 330px;
  overflow: auto;
  border: 1px solid #e3e9f1;
  border-radius: 8px;
}

body #content .wealthV6Table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

body #content .wealthV6Table th,
body #content .wealthV6Table td {
  padding: 7px 8px;
  border-bottom: 1px solid #e3e9f1;
  text-align: left;
  vertical-align: top;
}

body #content .wealthV6Table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #eef3f8;
  font-size: 12px;
}

body #content .wealthV6Table td strong,
body #content .wealthV6Table td small {
  display: block;
}

body #content .wealthV6Table td small {
  color: #526173;
  margin-top: 2px;
}

body #content .wealthV6Table .moneyCell {
  text-align: right;
  white-space: nowrap;
  font-weight: 800;
}

body #content .wealthV6RowButton {
  width: 100%;
  border: 1px solid #d2dbe8;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 10px;
  display: grid;
  gap: 3px;
  text-align: left;
}

body #content .wealthV6RowButton + .wealthV6RowButton {
  margin-top: 6px;
}

body #content .wealthV6RowButton strong,
body #content .wealthV6RowButton span {
  display: block;
}

body #content .wealthV6RowButton span {
  color: #526173;
  font-size: 12px;
}

body #content .wealthV6FormBlock .wealthFormPanel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body #content .wealthV6FormBlock .wealthFormPanel > .editorHeader {
  display: none;
}

body #content .wealthV6FormBlock form.grid,
body #content .wealthV6FormBlock .wealthForm {
  gap: 8px;
}

body #content .wealthV6FormBlock .three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body #content .wealthV6FormBlock .two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body #content .wealthV6FormBlock label.wide,
body #content .wealthV6FormBlock .wide {
  grid-column: 1 / -1;
}

body #content .wealthV6FormBlock textarea {
  min-height: 90px;
}

@media (max-width: 1100px) {
  body #content .wealthV6Grid2,
  body #content .wealthV6FormBlock .three,
  body #content .wealthV6FormBlock .two {
    grid-template-columns: 1fr;
  }

  body #content .wealthV6Toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  body #content .wealthV6ToolbarActions {
    justify-content: flex-start;
  }
}