:root {
  --ottrora-navy: #07142a;
  --ottrora-navy-soft: #0d2348;
  --ottrora-cyan: #19d6d0;
  --ottrora-violet: #9a45ff;
  --ottrora-blue: #4674ff;
  --ottrora-ink: #142033;
  --ottrora-muted: #6a7890;
  --ottrora-line: #e3e9f2;
  --ottrora-bg: #f5f7fb;
  --ottrora-panel: #fff;
  --ottrora-gradient: linear-gradient(90deg, var(--ottrora-cyan), var(--ottrora-violet));
  --bg: var(--ottrora-bg);
  --text: var(--ottrora-ink);
  --card: var(--ottrora-panel);
  --accent: var(--ottrora-blue);
  --border: var(--ottrora-line);
  --redesign-night: var(--ottrora-navy);
  --redesign-night-soft: var(--ottrora-navy-soft);
  --redesign-blue: var(--ottrora-blue);
  --redesign-cyan: var(--ottrora-cyan);
  --redesign-bg: var(--ottrora-bg);
  --redesign-panel: var(--ottrora-panel);
  --redesign-ink: var(--ottrora-ink);
  --redesign-muted: var(--ottrora-muted);
  --redesign-line: var(--ottrora-line);
}

/* Shared OTTRORA brand elements */
.ottrora-brand-lockup {
  position: relative;
  display: block;
  width: 184px;
  height: 46px;
  overflow: hidden;
  flex: none;
  border-radius: 8px;
}
.ottrora-brand-lockup img {
  position: absolute;
  top: -13px;
  left: 0;
  display: block;
  width: 184px;
  height: auto;
  max-width: none;
}
.ottrora-app-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
}
.ottrora-app-brand img { width: 31px; height: 31px; object-fit: contain; }
.ottrora-app-brand strong { color: #fff; font-size: .78rem; letter-spacing: .14em; }

/* Marketing: dark, emotional and brand-led */
body.marketing-page { background: #fff; color: var(--ottrora-ink); }
.marketing-header {
  width: 100%;
  min-height: 64px;
  padding: 0 4vw;
  border-bottom-color: rgba(255,255,255,.08);
  background: rgba(7,20,42,.98);
}
.marketing-header .marketing-brand { min-width: 184px; color: #fff; }
.marketing-header nav { gap: clamp(.7rem, 1.25vw, 1.35rem); }
.marketing-header nav a { color: #d7e2f1; font-size: .78rem; }
.marketing-header nav a:hover,
.marketing-header nav a.active { color: var(--ottrora-cyan); }
.marketing-actions .marketing-menu-button {
  border-color: rgba(255,255,255,.22);
  background: transparent;
  color: #fff;
}
.marketing-actions .btn-secondary { border-color: rgba(255,255,255,.22); color: #fff; }

/* Documentation uses the same dark OTTRORA surfaces as the marketing pages. */
html[data-theme="dark"] body.docs-page {
  --bg: #081426;
  --text: #eef5ff;
  --muted: #b2c0d4;
  --card: #101f36;
  --accent: var(--ottrora-cyan);
  --accent-strong: #70f1ec;
  --accent-soft: rgba(25,214,208,.11);
  --border: #2a4162;
  background: #081426;
  color: #eef5ff;
}
.docs-page .docs-search,
.docs-page .docs-sidebar,
.docs-page .docs-article {
  border-color: #2a4162;
  background: #101f36;
  box-shadow: 0 16px 42px rgba(0,0,0,.16);
}
.docs-page .docs-search input,
.docs-page .docs-article h2,
.docs-page .docs-article h3,
.docs-page .docs-sidebar strong { color: #eef5ff; }
.docs-page .docs-search input::placeholder,
.docs-page .docs-hero > p,
.docs-page .docs-sidebar a,
.docs-page .docs-article p,
.docs-page .docs-article li { color: #b2c0d4; }
.docs-page .docs-sidebar a:hover {
  color: #70f1ec;
  background: rgba(25,214,208,.1);
}
.docs-page .docs-callout,
.docs-page .docs-tip {
  background: rgba(25,214,208,.09);
  color: #70f1ec;
}
.docs-page .docs-callout span,
.docs-page .docs-tip span { color: #c1cede; }
.docs-beta { display: inline-flex; vertical-align: middle; margin-left: .35rem; padding: .18rem .42rem; border-radius: 999px; background: linear-gradient(135deg,var(--ottrora-cyan),var(--ottrora-violet)); color: #07142a; font-size: .55rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.docs-page .docs-article code { background: #07142a; color: #dffdfb; }
.marketing-page .btn,
.marketing-page button.btn {
  border: 0;
  background: var(--ottrora-gradient);
  color: #fff;
  box-shadow: 0 10px 28px rgba(154,69,255,.2);
}
.marketing-hero {
  min-height: 620px;
  padding: clamp(3.5rem, 7vw, 6rem) 5vw;
  background:
    radial-gradient(circle at 78% 20%, rgba(25,214,208,.18), transparent 25%),
    radial-gradient(circle at 88% 72%, rgba(154,69,255,.2), transparent 30%),
    linear-gradient(135deg, #041020, var(--ottrora-navy) 52%, #0a2446);
}
.marketing-hero h1 { color: #fff; }
.marketing-hero .hero-copy > p { color: #c8d5e6; }
.marketing-pill { border: 1px solid rgba(25,214,208,.18); background: rgba(25,214,208,.08); color: #8df4ef; }
.hero-trust span { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: #c4d2e4; }
.ottrora-hero-visual { margin: 0; }
.ottrora-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  box-shadow: 0 35px 90px rgba(0,0,0,.38);
}
.ottrora-hero-visual figcaption { margin-top: .7rem; color: #a6b8ce; text-align: center; font-size: .76rem; }
.marketing-showcase { padding: 3rem 5vw 1rem; background: #fff; }
.marketing-showcase .product-preview { width: min(1080px, 100%); margin: 0 auto; transform: none; }
.feature-grid article,
.pricing-card,
.explainer-grid article,
.seo-topic-links a { border-color: var(--ottrora-line); box-shadow: 0 7px 22px rgba(7,20,42,.04); }
.pricing-card-highlight { border-color: var(--ottrora-violet) !important; }
.marketing-page .pricing-code {
  border: 1px solid rgba(25,214,208,.32);
  background: #dffbf8;
  color: #0b4050;
  font-weight: 800;
}
.marketing-page .pricing-card-highlight .pricing-code {
  border-color: rgba(154,69,255,.3);
  background: #f0e5ff;
  color: #6320a4;
}

/* Public pricing and trial forms: coherent dark OTTRORA surfaces with accessible contrast. */
.marketing-page .pricing-addons {
  border-color: #2a4162;
  background: #101f36;
  color: #edf4ff;
}
.marketing-page .pricing-addons summary { color: #edf4ff; }
.marketing-page .pricing-addons[open] summary,
.marketing-page .pricing-addons > p,
.marketing-page .pricing-addons-head,
.marketing-page .pricing-addons-row { border-color: #2a4162; }
.marketing-page .pricing-addons-head,
.marketing-page .pricing-addons-row span,
.marketing-page .pricing-addons > p { color: #b9c7da; }
.marketing-page .pricing-addons-row strong { color: #edf4ff; }

.marketing-page .pricing-calculator,
.marketing-page .trial-section {
  border-color: #314b70;
  background:
    radial-gradient(circle at 92% 8%, rgba(154,69,255,.13), transparent 34%),
    radial-gradient(circle at 5% 95%, rgba(25,214,208,.09), transparent 30%),
    #0d1c32;
  color: #edf4ff;
  box-shadow: 0 20px 55px rgba(2,9,22,.24);
}
.marketing-page .pricing-calculator .eyebrow,
.marketing-page .trial-section .eyebrow,
.marketing-page .pricing-result-label { color: #7ce9e4; }
.marketing-page .pricing-calculator-copy h3,
.marketing-page .trial-copy h2 { color: #fff; }
.marketing-page .pricing-calculator-copy p,
.marketing-page .trial-copy p,
.marketing-page .trial-copy li { color: #b9c7da; }
.marketing-page .pricing-calculator-fields label,
.marketing-page .trial-card .form-row label { color: #d7e2f1; }
.marketing-page .pricing-calculator-fields input,
.marketing-page .pricing-calculator-fields select,
.marketing-page .trial-card input,
.marketing-page .trial-card textarea {
  border-color: #ccd6e4;
  background: #fff;
  color: #142033;
  box-shadow: none;
}
.marketing-page .pricing-calculator-fields input:focus,
.marketing-page .pricing-calculator-fields select:focus,
.marketing-page .trial-card input:focus,
.marketing-page .trial-card textarea:focus {
  border-color: var(--ottrora-cyan);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(25,214,208,.18);
}
.marketing-page .pricing-calculator-result,
.marketing-page .trial-card {
  border-color: #2b4263;
  background: #11233d;
  color: #edf4ff;
  box-shadow: 0 16px 40px rgba(2,9,22,.2);
}
.marketing-page .pricing-calculator-result > div strong:first-child { color: #fff; }
.marketing-page .pricing-calculator-result > div strong:last-child { color: #9eacff; }
.marketing-page .pricing-calculator-result p,
.marketing-page .privacy-note { color: #b9c7da; }

/* SEO landing pages and consent stay inside the dark public visual language. */
.marketing-page .seo-landing-hero,
.marketing-page .seo-content-section,
.marketing-page .seo-related { color: #edf4ff; }
.marketing-page .seo-summary-card,
.marketing-page .seo-related {
  border-color: #314b70;
  background:
    radial-gradient(circle at 90% 5%, rgba(154,69,255,.14), transparent 35%),
    radial-gradient(circle at 5% 95%, rgba(25,214,208,.09), transparent 30%),
    #0d1c32;
  box-shadow: 0 20px 55px rgba(2,9,22,.24);
}
.marketing-page .seo-summary-card .eyebrow,
.marketing-page .seo-related .eyebrow { color: #7ce9e4; }
.marketing-page .seo-summary-card li,
.marketing-page .seo-related a span,
.marketing-page .seo-content-section p { color: #b9c7da; }
.marketing-page .seo-summary-card li::before { color: #7ce9e4; }
.marketing-page .seo-content-section article,
.marketing-page .seo-related a {
  border-color: #2b4263;
  background: #10213a;
  color: #edf4ff;
}
.marketing-page .seo-related a:hover { border-color: var(--ottrora-cyan); }
.marketing-page .marketing-section-head {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  padding-inline: 1rem;
}
.marketing-page .marketing-section-head h2 {
  width: auto;
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
}
.marketing-page #funktionen {
  box-sizing: border-box;
  display: block;
  width: min(1100px, calc(100% - 2rem));
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 0;
}
.marketing-page #funktionen .feature-grid {
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.marketing-page #funktionen .feature-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.marketing-page #funktionen .feature-title-row h3 { min-width: 0; margin: 0; }
.marketing-page #funktionen .feature-title-row small { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: linear-gradient(135deg,var(--ottrora-cyan),var(--ottrora-violet)); color: #07142a; font-size: .62rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.marketing-page #funktionen .feature-card-beta { border-color: color-mix(in srgb,var(--ottrora-cyan) 42%,var(--border)) !important; }
@media (max-width: 1000px) {
  .marketing-page #funktionen .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .marketing-page #funktionen { width: calc(100% - 1.5rem); }
  .marketing-page #funktionen .feature-grid { grid-template-columns: minmax(0, 1fr); }
}
.marketing-page .analytics-consent {
  border-color: #365273;
  background: rgba(13,28,50,.97);
  color: #edf4ff;
  box-shadow: 0 24px 70px rgba(2,9,22,.5);
}
.marketing-page .analytics-consent-copy p { color: #b9c7da; }
.marketing-page .analytics-consent-copy a { color: #7ce9e4; }
.marketing-page .analytics-consent .btn-secondary {
  border-color: #49617f;
  background: #142842;
  color: #edf4ff;
}
.marketing-page .analytics-consent-settings {
  border-color: #365273;
  background: rgba(13,28,50,.95);
  color: #b9c7da;
}

/* Password generator: keep the security tool inside the dark marketing language. */
.password-tool-page .password-privacy-badge {
  border-color: rgba(63,220,139,.35);
  background: rgba(24,119,78,.17);
  color: #aebed2;
}
.password-tool-page .password-privacy-badge strong { color: #effff7; }
.password-tool-page .password-generator-card {
  border-color: #314b70;
  background: #0d1c32;
  color: #edf4ff;
  box-shadow: 0 24px 65px rgba(2,9,22,.35);
}
.password-tool-page .password-mode-switch {
  border-color: #2b4263;
  background: #09172a;
}
.password-tool-page .password-mode-switch button { color: #9fb0c7; }
.password-tool-page .password-mode-switch button:hover { color: #fff; background: #122641; }
.password-tool-page .password-mode-switch button.is-active {
  background: #172b49;
  color: #8ef2ed;
  box-shadow: inset 0 0 0 1px #365273;
}
.password-tool-page .password-result-panel {
  border-color: #2b4263;
  background:
    radial-gradient(circle at 12% 0, rgba(154,69,255,.12), transparent 34%),
    #10213a;
}
.password-tool-page .password-result-heading span,
.password-tool-page .password-copy-status { color: #9fb0c7; }
.password-tool-page .password-result-heading strong,
.password-tool-page .password-setting-wide output { color: #8ef2ed; }
.password-tool-page .password-output-row textarea,
.password-tool-page .password-field-grid select {
  border-color: #355071;
  background: #071629;
  color: #f4f8ff;
}
.password-tool-page .password-output-row textarea:focus,
.password-tool-page .password-field-grid select:focus {
  border-color: var(--ottrora-cyan);
  outline: 3px solid rgba(25,214,208,.15);
}
.password-tool-page .password-copy {
  border-color: #3a5577;
  background: #142842;
  color: #edf4ff;
}
.password-tool-page .password-copy:hover { border-color: #5d789b; background: #1b3453; }
.password-tool-page .password-strength-track { background: #2b4263; }
.password-tool-page .password-settings { background: #0d1c32; }
.password-tool-page .password-setting-wide label,
.password-tool-page .password-option strong { color: #edf4ff; }
.password-tool-page .password-settings legend,
.password-tool-page .password-option small,
.password-tool-page .password-field-grid > label { color: #9fb0c7; }
.password-tool-page .password-option {
  border-color: #2b4263;
  background: #11233d;
}
.password-tool-page .password-option:hover { border-color: #456386; background: #162b49; }
.password-tool-page .password-generator-actions {
  border-color: #2b4263;
  background: #09172a;
}
.password-tool-page .password-generator-actions span { color: #9fb0c7; }
.password-tool-page .password-guidance h2,
.password-tool-page .password-guidance article strong { color: #edf4ff; }
.password-tool-page .password-guidance article {
  border-color: #2b4263;
  background: #10213a;
}
.password-tool-page .password-guidance article p { color: #aebed2; }

/* Login: calm two-column presentation; forms and auth flow remain unchanged */
body.login-page,
body.login-body { background: var(--ottrora-bg); color: var(--ottrora-ink); }
.login-shell { border-color: var(--ottrora-line); box-shadow: 0 24px 70px rgba(7,20,42,.13); }
.login-brand {
  background:
    radial-gradient(circle at 70% 18%, rgba(25,214,208,.2), transparent 27%),
    radial-gradient(circle at 14% 88%, rgba(154,69,255,.22), transparent 30%),
    var(--ottrora-navy);
}
.login-brand-copy h1 { color: #fff !important; }
.login-brand-copy p { color: #c2cfe1 !important; }
.login-panel { background: #fff; }
.login-card .btn { border: 0; background: var(--ottrora-gradient); }
.login-card input:focus { border-color: var(--ottrora-cyan); box-shadow: 0 0 0 3px rgba(25,214,208,.14); }
.ottrora-login-signet { display: block; width: 118px; height: 96px; object-fit: contain; }
.ottrora-login-wordmark { display: flex; align-items: center; gap: 10px; margin: 0 0 1.35rem; }
.ottrora-login-wordmark img { width: 42px; height: 42px; object-fit: contain; }
.ottrora-login-wordmark strong { display: block; color: var(--ottrora-navy); font-size: 1.05rem; letter-spacing: .16em; }
.ottrora-login-wordmark span { display: block; margin-top: 2px; color: var(--ottrora-muted); font-size: .72rem; }

/* Application shell: light, compact and information-dense */
body.tenant-portal,
body.msp-layout { --redesign-bg: var(--ottrora-bg); --redesign-panel: #fff; --redesign-ink: var(--ottrora-ink); --redesign-muted: var(--ottrora-muted); --redesign-line: var(--ottrora-line); background: var(--ottrora-bg); color: var(--ottrora-ink); }
.tenant-portal .app,
.msp-layout .app { background: var(--ottrora-bg); }
body.tenant-portal .sidebar,
.msp-layout .sidebar {
  width: 220px;
  flex-basis: 220px;
  padding: 0 10px 14px;
  border-right: 0;
  background: linear-gradient(to bottom, var(--ottrora-navy) 0 58px, #fff 58px 100%);
}
.tenant-portal .redesign-sidebar-brand,
.msp-layout .redesign-sidebar-brand {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: calc(100% + 20px);
  height: 58px;
  margin: 0 -10px;
  padding: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--ottrora-navy) !important;
}
.tenant-portal .redesign-sidebar-brand img,
.msp-layout .redesign-sidebar-brand img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}
body.tenant-portal .redesign-sidebar-brand {
  align-self: start;
  gap: 5px;
  min-height: 58px;
  max-height: 58px;
  margin: 0 -10px;
  padding: 0 8px;
  border-radius: 0;
}
body.tenant-portal .redesign-sidebar-brand img.redesign-sidebar-signet {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  object-fit: contain;
  object-position: center;
}
.redesign-sidebar-brand-copy {
  display: grid;
  min-width: 0;
  color: #fff;
  line-height: 1;
}
.redesign-sidebar-brand-copy strong {
  font-size: .88rem;
  letter-spacing: .18em;
  white-space: nowrap;
}
.redesign-sidebar-brand-copy small {
  margin-top: 4px;
  color: var(--ottrora-cyan);
  font-size: .44rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tenant-portal .redesign-sidebar-brand::after,
.msp-layout .redesign-sidebar-brand::after { content: none; }
.redesign-side-nav { margin-top: 0; }
.redesign-side-nav > .redesign-workspace-sites a.redesign-site-drop-target,
.redesign-side-nav > .redesign-site-drop-list > a.redesign-site-drop-target {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px 5px 10px !important;
}
.redesign-side-nav > .redesign-workspace-sites a.redesign-site-drop-target > span,
.redesign-side-nav > .redesign-site-drop-list > a.redesign-site-drop-target > span {
  min-width: 0;
  margin-left: 10px !important;
  padding-left: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.redesign-side-nav > .redesign-workspace-sites a.redesign-site-drop-target > small,
.redesign-side-nav > .redesign-site-drop-list > a.redesign-site-drop-target > small {
  overflow: visible;
  white-space: nowrap;
}
.redesign-side-nav > .redesign-workspace-sites a.redesign-site-drop-target.active,
.redesign-side-nav > .redesign-site-drop-list > a.redesign-site-drop-target.active {
  border-left: 3px solid var(--ottrora-violet);
  box-shadow: none !important;
}
.redesign-side-nav a { min-height: 34px; color: #4c596f; }
.redesign-side-nav a:hover { background: #f7f9fc; color: #26354b; }
.redesign-side-nav a.active { color: #5749c7; background: linear-gradient(90deg,#eafbf8,#f2efff); box-shadow: inset 3px 0 var(--ottrora-violet); }
.redesign-nav-label { color: #96a2b4; }
.tenant-portal .header-bar,
.msp-layout .header-bar {
  box-sizing: border-box;
  flex: 0 0 58px;
  height: 58px;
  min-height: 58px;
  max-height: 58px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: var(--ottrora-navy);
}
.tenant-portal .header,
.msp-layout .header { box-sizing: border-box; height: 58px; min-height: 58px; padding-left: 500px; color: #fff; }
.tenant-portal .header-right,
.msp-layout .header-right,
.tenant-portal .header-right > span,
.msp-layout .header-right > span { color: #dbe6f3 !important; }
.tenant-portal .header-right .icon-btn,
.msp-layout .header-right .icon-btn,
.msp-layout .header-right .btn-secondary,
.msp-layout .header-right .btn {
  border-color: #31445f;
  background: transparent;
  color: #dbe6f3;
}
.tenant-portal .header-right .icon-btn:hover,
.msp-layout .header-right .icon-btn:hover { border-color: #4b6384; background: #102342; color: #fff; }
.tenant-portal .portal-language-switch summary,
.msp-layout .portal-language-switch summary {
  width: 36px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.tenant-portal .portal-language-switch summary:hover,
.msp-layout .portal-language-switch summary:hover,
.tenant-portal .portal-language-switch[open] summary,
.msp-layout .portal-language-switch[open] summary { background: #102342; }
body.tenant-portal .search-bar,
body.msp-layout .search-bar { top: 13px; left: 16px; width: 450px; }
body.tenant-portal .search-bar input,
body.msp-layout .search-bar input {
  width: 450px;
  height: 32px;
  border-color: #29405f;
  background: #10213b;
  color: #fff;
}
body.tenant-portal .search-bar input::placeholder,
body.msp-layout .search-bar input::placeholder { color: #8ea0b9; }
.tenant-portal .main-area,
.msp-layout .main-area { background: var(--ottrora-bg); }
.tenant-portal .main-area > main,
.msp-layout .main-area > main,
.tenant-portal .main-area > .card,
.msp-layout .main-area > .card { margin: 0 12px 12px; padding: 12px; border-color: var(--ottrora-line); border-radius: 0 0 10px 10px; background: #fff; }
.tenant-portal .page-heading,
.msp-layout .page-heading,
.tenant-portal .card-header,
.msp-layout .card-header { margin-bottom: 9px; padding-bottom: 8px; }
.tenant-portal .dashboard-section,
.msp-layout .dashboard-section,
.tenant-portal .settings-section,
.msp-layout .settings-section { border-color: var(--ottrora-line); border-radius: 10px; box-shadow: none; }
.tenant-portal .kpi-grid,
.msp-layout .kpi-grid,
.tenant-kpi-grid { gap: 7px; }
.tenant-portal .kpi-card,
.msp-layout .kpi-card,
.tenant-kpi-card { padding: 9px 10px; border-color: var(--ottrora-line); border-radius: 9px; box-shadow: none; }
.tenant-portal .table-wrapper,
.msp-layout .table-wrapper { border-color: var(--ottrora-line); border-radius: 9px; }
.tenant-portal table,
.msp-layout table { font-size: .72rem; }
.tenant-portal th,
.tenant-portal td,
.msp-layout th,
.msp-layout td { padding: 7px 9px; }
.tenant-portal th,
.msp-layout th { background: #fafbfe; color: #7b879b; font-size: .61rem; }
.tenant-portal .btn,
.msp-layout .btn { border: 0; background: var(--ottrora-gradient); }
.tenant-portal .badge,
.msp-layout .badge { padding: 2px 6px; font-size: .62rem; }
.tenant-portal .modal-dialog,
.msp-layout .modal-dialog { border-color: var(--ottrora-line); border-radius: 13px; }

/* Network topology beta */
.nav-beta,
.topology-beta {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ottrora-cyan);
  color: #07142a;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
}
.redesign-side-nav .nav-beta { margin-left: 4px; vertical-align: middle; }
.topology-header { align-items: flex-start; }
.topology-intro { max-width: 780px; margin: 4px 0 0; color: var(--muted); }
.topology-empty,
.topology-select-hint { padding: 20px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); }
.topology-empty p { margin: 5px 0 14px; }
.topology-switch-board {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(205px,1fr));
  gap: 12px;
  margin-top: 12px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--bg);
  background-image: radial-gradient(circle,var(--border) 1px,transparent 1px);
  background-size: 18px 18px;
}
.topology-switch-node {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  gap: 8px;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(7,20,42,.08);
}
.topology-switch-node:hover,
.topology-switch-node.selected { border-color: var(--ottrora-violet); box-shadow: 0 0 0 2px rgba(154,69,255,.16); }
.topology-node-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(74,119,255,.12);
  color: #4a77ff;
}
.topology-node-copy { display: grid; min-width: 0; gap: 2px; }
.topology-node-copy strong,
.topology-node-copy span,
.topology-node-copy small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topology-node-copy span,
.topology-node-copy small,
.topology-switch-node time { color: var(--muted); font-size: .72rem; }
.topology-node-state { grid-column: 1 / -1; color: #07826e; font-size: .72rem; font-weight: 700; }
.topology-switch-node time { grid-column: 1 / -1; }
.topology-selected-switch { margin-top: 18px; }
.topology-selected-heading,
.topology-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.topology-selected-heading h3,
.topology-panel h3,
.topology-preview-panel h3,
.topology-history-panel h3 { margin: 2px 0 4px; }
.topology-selected-heading p,
.topology-panel > p { margin: 0; color: var(--muted); }
.topology-connection-board {
  position: relative;
  isolation: isolate;
  margin-top: 14px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background-color: var(--bg);
  background-image: radial-gradient(circle,var(--border) 1px,transparent 1px);
  background-size: 18px 18px;
}
.topology-connector-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
.topology-connector {
  fill: none;
  stroke: #4a77ff;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}
.topology-connector-uplink { stroke: url(#topology-uplink-gradient); stroke-width: 3.2; }
.topology-connector-unknown { stroke: #c27508; stroke-dasharray: 7 6; }
.topology-connector-dot { fill: #4a77ff; stroke: var(--card); stroke-width: 2; }
.topology-connector-dot-uplink { fill: var(--ottrora-cyan); }
.topology-connector-dot-unknown { fill: #c27508; }
.topology-connector-label rect { fill: var(--card); stroke: var(--border); stroke-width: 1; }
.topology-connector-label text { fill: var(--muted); font: 700 10px ui-sans-serif,system-ui,sans-serif; }
.topology-focus-switch {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(230px,100%);
  margin: 0 auto 82px;
  padding: 12px;
  border: 2px solid var(--ottrora-violet);
  border-radius: 10px;
  background: var(--card);
}
.topology-focus-switch small { color: var(--muted); }
.topology-connection-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); gap: 42px 10px; }
.topology-uplink-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,230px)); justify-content: center; gap: 42px 12px; margin: 0 0 72px; }
.topology-uplink-node {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 11px;
  overflow: hidden;
  border: 2px solid var(--ottrora-cyan);
  border-radius: 9px;
  background: var(--card);
  text-align: center;
}
.topology-uplink-node strong,
.topology-uplink-node span,
.topology-uplink-node small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topology-uplink-node span,
.topology-uplink-node small { color: var(--muted); font-size: .7rem; }
.topology-device-node {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
}
.topology-device-node.unknown { border-style: dashed; border-color: #b76a00; }
.topology-device-node strong,
.topology-device-node span,
.topology-device-node small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topology-device-node span,
.topology-device-node small { color: var(--muted); font-size: .7rem; }
.topology-board-note { position: relative; z-index: 2; margin: 12px 0 0; color: var(--muted); text-align: center; }
.topology-detail-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 14px; margin-top: 14px; }
.topology-panel,
.topology-preview-panel,
.topology-history-panel { padding: 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); }
.topology-preview-panel,
.topology-history-panel { margin-top: 14px; }
.topology-ssh-tips { margin: 12px 0; border: 1px solid var(--border); border-radius: 9px; background: var(--accent-soft); }
.topology-ssh-tips summary { padding: 10px 12px; cursor: pointer; font-weight: 700; }
.topology-ssh-tips > div { padding: 0 12px 10px; }
.topology-ssh-tips ol { margin: 4px 0 8px; padding-left: 22px; }
.topology-ssh-tips p { margin: 5px 0; color: var(--muted); font-size: .76rem; }
.topology-page-field { display: grid; gap: 6px; margin-top: 10px; font-weight: 700; }
.topology-page-field textarea { width: 100%; min-height: 145px; resize: vertical; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .75rem; line-height: 1.45; }
.topology-page-field .action-btn { justify-self: end; }
.topology-complete-check { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; color: var(--muted); font-size: .76rem; }
.topology-complete-check input { margin-top: 2px; }
.topology-table-wrapper { max-height: 430px; overflow: auto; }
.topology-status,
.topology-change { display: inline-flex; padding: 2px 6px; border-radius: 999px; font-size: .65rem; font-weight: 700; }
.topology-status.confirmed,
.topology-change.unchanged { background: rgba(16,185,129,.13); color: #07826e; }
.topology-status.suspected,
.topology-change.moved,
.topology-change.vlan_changed,
.topology-change.not_seen { background: rgba(245,158,11,.16); color: #9a5a00; }
.topology-change.new,
.topology-change.reappeared { background: rgba(74,119,255,.14); color: #355ed0; }
.topology-linked-switch { display: block; margin-top: 3px; color: var(--muted); }
.topology-uplink-confirm { margin-top: 10px; }
.topology-uplink-confirm summary { cursor: pointer; font-weight: 700; }
.topology-uplink-confirm form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; margin-top: 9px; }
.topology-uplink-confirm label { display: grid; gap: 4px; color: var(--muted); font-size: .72rem; }
.topology-preview-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.topology-preview-summary span { padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); }
.topology-preview-summary strong { color: var(--text); }
.topology-schema-workspace { margin-top: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--card); }
.topology-schema-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 10px 14px; background: var(--ottrora-navy); color: #fff; }
.topology-schema-titlebar > div { display: flex; align-items: center; min-width: 0; gap: 9px; }
.topology-schema-titlebar .topology-schema-title-actions { justify-content: flex-end; }
.topology-schema-titlebar strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .94rem; }
.topology-schema-titlebar .btn { color: #07142a; }
.topology-schema-titlebar .btn-secondary { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; }
.topology-schema-mark { width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: linear-gradient(135deg,var(--ottrora-cyan),var(--ottrora-violet)); box-shadow: inset 0 0 0 7px #0a1830; }
.topology-schema-body { display: grid; grid-template-columns: 172px minmax(0,1fr) 220px; min-height: 520px; }
.topology-schema-palette,
.topology-schema-inspector { min-width: 0; padding: 14px; background: color-mix(in srgb,var(--card) 88%,var(--bg)); }
.topology-schema-palette { border-right: 1px solid var(--border); }
.topology-schema-inspector { border-left: 1px solid var(--border); }
.topology-schema-palette h4,
.topology-schema-inspector h4 { margin: 0 0 12px; color: var(--muted); font-size: .82rem; }
.topology-schema-palette h4:not(:first-child) { margin-top: 24px; }
.topology-schema-palette ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.topology-schema-palette li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px; overflow: hidden; border: 1px solid var(--border); border-radius: 9px; background: var(--card); font-size: .78rem; font-weight: 700; }
.topology-schema-palette li > span { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.topology-view-buttons { display: grid; gap: 7px; }
.topology-view-buttons button,
.topology-schema-toolbar button { border: 1px solid var(--border); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer; }
.topology-view-buttons button { display: flex; align-items: center; gap: 8px; padding: 9px; text-align: left; }
.topology-view-buttons button.active,
.topology-schema-toolbar button.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.topology-schema-main { min-width: 0; overflow: hidden; background: var(--bg); }
.topology-schema-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--card); }
.topology-schema-toolbar > div { display: flex; align-items: center; gap: 6px; }
.topology-schema-toolbar button { min-height: 32px; padding: 6px 10px; }
.topology-zoom-controls output { display: grid; place-items: center; min-width: 58px; min-height: 32px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: .74rem; font-weight: 700; }
.topology-schema-main .topology-connection-board { min-height: 400px; margin: 0; border: 0; border-radius: 0; }
.topology-schema-main .topology-connection-board.is-compact .topology-focus-switch { width: min(190px,100%); padding: 8px; }
.topology-schema-main .topology-connection-board.is-compact .topology-connection-grid { grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); gap: 32px 8px; }
.topology-schema-main .topology-connection-board.is-compact .topology-device-node,
.topology-schema-main .topology-connection-board.is-compact .topology-uplink-node { padding: 7px; font-size: .84em; }
.topology-schema-main .topology-connection-board.is-large .topology-connection-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 48px 14px; }
.topology-schema-main .topology-connection-board.is-large .topology-device-node,
.topology-schema-main .topology-connection-board.is-large .topology-uplink-node { padding: 13px; font-size: 1.06em; }
.topology-connection-board.hide-port-labels .topology-connector-label { display: none; }
.topology-connection-board.hide-port-labels .topology-device-node > span,
.topology-connection-board.hide-port-labels .topology-uplink-node > span { visibility: hidden; }
.topology-device-node,
.topology-uplink-node,
.topology-focus-switch { cursor: pointer; }
.topology-device-node:focus-visible,
.topology-uplink-node:focus-visible,
.topology-focus-switch:focus-visible,
.topology-device-node.is-selected,
.topology-uplink-node.is-selected,
.topology-port-grid button:focus-visible,
.topology-port-grid button.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.topology-connection-grid[data-topology-current-view="vlan"] .topology-device-node::before { content: "VLAN " attr(data-topology-vlan); color: var(--accent-strong); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.topology-schema-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 12px; border-top: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: .7rem; }
.topology-schema-legend span { display: inline-flex; align-items: center; gap: 6px; }
.topology-schema-legend i { width: 24px; height: 3px; border-radius: 99px; background: #4a77ff; }
.topology-schema-legend i.confirmed { background: linear-gradient(90deg,var(--ottrora-cyan),var(--ottrora-violet)); }
.topology-schema-legend i.suspected { height: 2px; background: repeating-linear-gradient(90deg,#c27508 0 6px,transparent 6px 10px); }
.topology-schema-inspector dl { display: grid; gap: 13px; margin: 0 0 16px; }
.topology-schema-inspector dl > div { min-width: 0; }
.topology-schema-inspector dt { margin-bottom: 3px; color: var(--muted); font-size: .68rem; }
.topology-schema-inspector dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: .79rem; font-weight: 700; }
.topology-inspector-state { color: #07826e; }
.topology-port-overview { display: grid; gap: 6px; margin: 0 0 14px; font-size: .72rem; }
.topology-port-grid { display: grid; grid-template-columns: repeat(8,1fr); gap: 4px; }
.topology-port-grid i,
.topology-port-grid button { display: block; min-width: 0; height: 17px; margin: 0; padding: 0; border: 0; border-radius: 2px; background: var(--border); }
.topology-port-grid button { position: relative; background: #3975dc; cursor: pointer; }
.topology-port-grid button.confirmed { background: linear-gradient(135deg,var(--ottrora-cyan),var(--ottrora-violet)); }
.topology-port-grid button.suspected { background: #c27508; }
.topology-port-grid button:hover { filter: brightness(1.18); transform: translateY(-1px); }
.topology-port-grid button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.topology-port-overview > small { min-height: 30px; color: var(--muted); font-size: .63rem; line-height: 1.35; overflow-wrap: anywhere; }
.topology-schema-inspector .action-btn { display: flex; justify-content: center; margin-top: 7px; text-align: center; }
.topology-schema-inspector [hidden] { display: none !important; }

[data-theme="dark"] body.tenant-portal .topology-switch-board,
[data-theme="dark"] body.tenant-portal .topology-connection-board { background-color: #0d1a2e; }
[data-theme="dark"] body.tenant-portal .topology-switch-node,
[data-theme="dark"] body.tenant-portal .topology-device-node,
[data-theme="dark"] body.tenant-portal .topology-uplink-node,
[data-theme="dark"] body.tenant-portal .topology-focus-switch,
[data-theme="dark"] body.tenant-portal .topology-panel,
[data-theme="dark"] body.tenant-portal .topology-preview-panel,
[data-theme="dark"] body.tenant-portal .topology-history-panel { background: #111f35; color: #edf3fc; }
[data-theme="dark"] body.tenant-portal .topology-node-state,
[data-theme="dark"] body.tenant-portal .topology-status.confirmed,
[data-theme="dark"] body.tenant-portal .topology-change.unchanged { color: #5de3c4; }
[data-theme="dark"] body.tenant-portal .topology-status.suspected,
[data-theme="dark"] body.tenant-portal .topology-change.moved,
[data-theme="dark"] body.tenant-portal .topology-change.vlan_changed,
[data-theme="dark"] body.tenant-portal .topology-change.not_seen { color: #ffc363; }
[data-theme="dark"] body.tenant-portal .topology-change.new,
[data-theme="dark"] body.tenant-portal .topology-change.reappeared { color: #9eb8ff; }
[data-theme="dark"] body.tenant-portal .topology-schema-palette,
[data-theme="dark"] body.tenant-portal .topology-schema-inspector { background: #0f1c30; }
[data-theme="dark"] body.tenant-portal .topology-inspector-state { color: #5de3c4; }

/* App stays light by default; an explicit saved dark preference remains supported. */
[data-theme="dark"] body.tenant-portal,
[data-theme="dark"] body.msp-layout {
  --bg: #0b1424;
  --text: #edf3fc;
  --muted: #9aabc3;
  --card: #111f35;
  --accent: #6f8cff;
  --accent-strong: #aebcff;
  --accent-soft: rgba(111,140,255,.16);
  --border: #263752;
  --ottrora-bg: #0b1424;
  --ottrora-panel: #111f35;
  --ottrora-ink: #edf3fc;
  --ottrora-muted: #9aabc3;
  --ottrora-line: #263752;
  --redesign-bg: #0b1424;
  --redesign-panel: #111f35;
  --redesign-ink: #edf3fc;
  --redesign-muted: #9aabc3;
  --redesign-line: #263752;
}
[data-theme="dark"] body.tenant-portal .sidebar,
[data-theme="dark"] body.msp-layout .sidebar { border-right-color: #263752; background: linear-gradient(to bottom,var(--ottrora-navy) 0 58px,#101d31 58px 100%); }
[data-theme="dark"] body.tenant-portal .redesign-side-nav a,
[data-theme="dark"] body.msp-layout .redesign-side-nav a { color: #b8c5d9; }
[data-theme="dark"] body.tenant-portal .redesign-side-nav a:hover,
[data-theme="dark"] body.msp-layout .redesign-side-nav a:hover { background: #16263d; color: #fff; }
[data-theme="dark"] body.tenant-portal .redesign-side-nav a.active,
[data-theme="dark"] body.msp-layout .redesign-side-nav a.active { background: linear-gradient(90deg,rgba(25,214,208,.14),rgba(154,69,255,.14)); color: #fff; }
[data-theme="dark"] body.tenant-portal .main-area > main,
[data-theme="dark"] body.msp-layout .main-area > main,
[data-theme="dark"] body.tenant-portal .main-area > .card,
[data-theme="dark"] body.msp-layout .main-area > .card,
[data-theme="dark"] body.tenant-portal .dashboard-section,
[data-theme="dark"] body.msp-layout .dashboard-section,
[data-theme="dark"] body.tenant-portal .settings-section,
[data-theme="dark"] body.msp-layout .settings-section,
[data-theme="dark"] body.tenant-portal .kpi-card,
[data-theme="dark"] body.msp-layout .kpi-card { border-color: #263752; background: #111f35; color: #edf3fc; }
[data-theme="dark"] body.tenant-portal th,
[data-theme="dark"] body.msp-layout th { background: #17253a; color: #9eafc6; }

@media (max-width: 1100px) {
  .tenant-portal .header,
  .msp-layout .header { padding-left: 390px; }
  body.tenant-portal .search-bar,
  body.msp-layout .search-bar,
  body.tenant-portal .search-bar input,
  body.msp-layout .search-bar input { width: 350px; }
  .topology-schema-body { grid-template-columns: 138px minmax(0,1fr); }
  .topology-schema-inspector { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(180px,1fr) minmax(220px,2fr) minmax(150px,1fr); align-items: start; gap: 14px; border-top: 1px solid var(--border); border-left: 0; }
  .topology-schema-inspector h4 { grid-column: 1 / -1; margin-bottom: 0; }
  .topology-schema-inspector dl { grid-column: 1 / 3; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .topology-port-overview { grid-column: 3; grid-row: 2; }
}
@media (max-width: 1280px) {
  .marketing-header { grid-template-columns: 1fr auto; }
  .marketing-header nav { display: none; }
  .marketing-menu-button { display: inline-grid; place-items: center; }
  .marketing-header.is-menu-open nav {
    position: absolute;
    top: 100%;
    right: 4vw;
    left: 4vw;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: .6rem;
    border: 1px solid #2a4162;
    border-radius: 0 0 14px 14px;
    background: #101f36;
    box-shadow: 0 22px 50px rgba(0,0,0,.32);
  }
  .marketing-header.is-menu-open nav a { padding: .65rem .8rem; border-radius: 8px; }
  .marketing-header.is-menu-open nav a:hover { background: rgba(25,214,208,.09); }
}
@media (max-width: 820px) {
  .tenant-portal .header,
  .msp-layout .header { padding-left: 12px; }
  .marketing-hero { padding: 3.4rem 1rem; }
  .topology-detail-grid { grid-template-columns: 1fr; }
  .topology-uplink-confirm form { grid-template-columns: 1fr; }
  .topology-selected-heading,
  .topology-panel-heading { align-items: stretch; flex-direction: column; }
  .topology-schema-titlebar { align-items: stretch; flex-direction: column; }
  .topology-schema-titlebar .topology-schema-title-actions { justify-content: flex-start; flex-wrap: wrap; }
  .topology-schema-body { display: block; }
  .topology-schema-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-right: 0; border-bottom: 1px solid var(--border); }
  .topology-schema-palette h4 { grid-column: 1 / -1; margin: 0; }
  .topology-schema-palette h4:not(:first-child) { margin-top: 8px; }
  .topology-schema-palette ul { grid-column: 1 / -1; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .topology-view-buttons { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .topology-schema-toolbar { align-items: stretch; flex-direction: column; }
  .topology-schema-toolbar > div { justify-content: space-between; }
  .topology-schema-inspector { display: block; }
  .topology-schema-inspector dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .ottrora-brand-lockup { width: 145px; height: 42px; }
  .ottrora-brand-lockup img { top: -10px; width: 145px; }
  .topology-schema-palette ul { grid-template-columns: 1fr 1fr; }
  .topology-schema-main .topology-connection-board { padding: 12px; }
  .topology-schema-main .topology-connection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .topology-schema-inspector dl { grid-template-columns: 1fr; }
}