:root {
  --w3ml-blue: #0b1f4d;
  --w3ml-blue-2: #173f8a;
  --w3ml-purple: #6c3ec7;
  --w3ml-surface: #f5f7fb;
  --w3ml-border: #dfe5ef;
  --w3ml-sidebar-width: 16.5rem;
}

body { background: var(--w3ml-surface); color: #172033; min-height: 100vh; }
.app-sidebar { width: var(--w3ml-sidebar-width) !important; color: white; background: linear-gradient(165deg, #0a1b43 0%, #172f70 58%, #5530a8 100%); border: 0; }
.app-sidebar-header { min-height: 4.35rem; padding: .8rem 1rem; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; color: white; text-decoration: none; }
.sidebar-brand:hover { color: white; }
.sidebar-brand-mark { display: grid; place-items: center; flex: 0 0 2.35rem; height: 2.35rem; border: 1px solid rgb(255 255 255 / 30%); border-radius: .7rem; color: white; background: linear-gradient(145deg, rgb(0 190 255 / 45%), rgb(236 28 255 / 48%)); font-size: .9rem; font-weight: 900; letter-spacing: -.08em; box-shadow: inset 0 1px rgb(255 255 255 / 22%); }
.sidebar-brand strong, .sidebar-brand small { display: block; line-height: 1.15; }
.sidebar-brand strong { font-size: .92rem; letter-spacing: .01em; }
.sidebar-brand small { margin-top: .18rem; color: rgb(255 255 255 / 62%); font-size: .69rem; letter-spacing: .08em; text-transform: uppercase; }
.app-sidebar-body { display: flex; flex-direction: column; padding: .6rem .7rem .8rem; }
.sidebar-nav { flex: 1; overflow-y: auto; }
.sidebar-section-label { margin: 1rem .65rem .35rem; color: rgb(255 255 255 / 46%); font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-link { display: flex; align-items: center; gap: .7rem; min-height: 2.35rem; margin: .08rem 0; padding: .5rem .7rem; border-radius: .55rem; color: rgb(255 255 255 / 76%); font-size: .86rem; font-weight: 600; text-decoration: none; transition: background .12s ease, color .12s ease; }
.sidebar-link i { width: 1.05rem; color: rgb(255 255 255 / 55%); text-align: center; }
.sidebar-link:hover { color: white; background: rgb(255 255 255 / 8%); }
.sidebar-link.active { color: white; background: rgb(255 255 255 / 14%); box-shadow: inset 3px 0 #a6e8ff; }
.sidebar-link.active i { color: #a6e8ff; }
.sidebar-account { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .7rem; padding: .75rem .65rem 0; border-top: 1px solid rgb(255 255 255 / 12%); }
.account-avatar { display: grid; place-items: center; flex: 0 0 2rem; height: 2rem; border-radius: 50%; color: var(--w3ml-blue); background: #c8efff; font-size: .78rem; font-weight: 800; }
.account-copy { min-width: 0; }
.account-copy strong, .account-copy small { display: block; overflow: hidden; max-width: 9.8rem; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: white; font-size: .78rem; }
.account-copy small { color: rgb(255 255 255 / 53%); font-size: .66rem; }
.sidebar-signout { color: rgb(255 255 255 / 68%); }
.sidebar-signout:hover { color: white; background: rgb(255 255 255 / 10%); }
.app-header { display: flex; align-items: center; gap: .8rem; min-height: 4.35rem; padding: .65rem 1.4rem; color: white; background: linear-gradient(105deg, var(--w3ml-blue-2), var(--w3ml-purple)); box-shadow: 0 2px 14px rgb(11 31 77 / 15%); }
.app-header-title { display: flex; flex: 1; align-items: center; gap: .4rem; font-size: .82rem; }
.app-header-title span { color: rgb(255 255 255 / 68%); }
.app-menu-button { color: white; border-color: rgb(255 255 255 / 22%); }
.mode-indicator { display: inline-flex; align-items: center; color: rgb(255 255 255 / 74%); font-size: .72rem; }
.mode-indicator .status-dot { margin-right: .4rem; }
.min-w-0 { min-width: 0; }
.content-width { max-width: 1500px; }
.brand-lockup { display: flex; align-items: center; gap: .7rem; }
.brand-mark { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .8rem; color: white; font-weight: 800; letter-spacing: -.08em; background: linear-gradient(145deg, var(--w3ml-blue-2), var(--w3ml-purple)); box-shadow: 0 8px 24px rgb(48 42 125 / 24%); }
.brand-mark-sm { width: 2rem; height: 2rem; border-radius: .55rem; font-size: .8rem; border: 1px solid rgb(255 255 255 / 35%); box-shadow: none; }
.brand-name { font-weight: 800; letter-spacing: .08em; color: var(--w3ml-blue); }
.login-logo-wrap { text-align: center; }
.login-logo { display: block; width: min(100%, 300px); height: auto; margin-inline: auto; }
.mode-badge { color: #172033; background: #a9e7ff; }
.eyebrow { color: var(--w3ml-purple); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at 20% 10%, #e9e4ff, transparent 28%), linear-gradient(135deg, #f8faff, #eef2f9); }
.auth-card { width: min(100%, 420px); padding: 2rem; background: white; border: 1px solid var(--w3ml-border); border-radius: 1rem; box-shadow: 0 22px 70px rgb(17 35 78 / 14%); }
.btn-primary { --bs-btn-bg: var(--w3ml-blue-2); --bs-btn-border-color: var(--w3ml-blue-2); --bs-btn-hover-bg: var(--w3ml-blue); --bs-btn-hover-border-color: var(--w3ml-blue); }
.card { border-color: var(--w3ml-border); box-shadow: 0 3px 12px rgb(28 45 80 / 5%); }
.metric-card { transition: transform .15s ease, box-shadow .15s ease; }
.metric-card:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgb(28 45 80 / 9%); }
.metric-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; color: var(--w3ml-purple); background: #f0ebff; font-size: 1.1rem; }
.status-dot { display: inline-block; width: .62rem; height: .62rem; border-radius: 50%; margin-right: .45rem; background: #98a2b3; }
.status-ok { background: #16855b; box-shadow: 0 0 0 3px rgb(22 133 91 / 12%); }
.status-configured { background: #16855b; box-shadow: 0 0 0 3px rgb(22 133 91 / 12%); }
.status-unavailable, .status-failed { background: #c43b4d; }
.status-warning, .status-not_run { background: #d58b08; }
.status-not_configured, .status-unknown { background: #7d8799; }
.dirty-action-bar { position: sticky; bottom: 1rem; z-index: 1020; }
.dirty-indicator { color: #8a5200; font-weight: 700; }
[data-dirty-form]:not(.is-dirty) [data-dirty-only] { display: none !important; }
[data-save-status] { min-height: 1.5rem; }
.rate-input { width: 9rem; }
.reason-input { width: min(20rem, 100%); }
.compact-select { width: auto; min-width: 8rem; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: .6rem 1rem; }
.result-count { margin-left: auto; color: #667085; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.record-primary { font-weight: 700; line-height: 1.25; }
.record-meta { overflow: hidden; margin-top: .18rem; color: #667085; font-size: .76rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.domain-card .card-body { padding: .72rem .78rem; }
.domain-card-title { overflow: hidden; color: #26334d; font-size: .88rem; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.domain-review-state { margin-top: .12rem; color: #8a5200; font-size: .68rem; font-weight: 650; line-height: 1.2; }
.renewal-badge { flex: 0 0 auto; padding: .38rem .48rem; font-size: .68rem; font-weight: 750; letter-spacing: .01em; white-space: nowrap; }
.domain-card .form-label, .domain-card .form-check-label { color: #526078; font-weight: 650; }
.table-compact > :not(caption) > * > * { padding: .58rem .75rem; vertical-align: middle; }
.action-menu .dropdown-toggle { width: 2rem; height: 2rem; padding: 0; border-color: transparent; }
.action-menu .dropdown-toggle::after { display: none; }
.action-menu .dropdown-menu { min-width: 12rem; padding: .35rem; box-shadow: 0 12px 35px rgb(17 35 78 / 14%); }
.action-menu .dropdown-item { border-radius: .35rem; font-size: .82rem; }
.confirm-modal-content { border: 0; border-radius: 1rem; box-shadow: 0 24px 80px rgb(11 31 77 / 24%); }
.confirm-modal-heading { display: flex; align-items: flex-start; gap: .9rem; }
.confirm-modal-icon { display: grid; place-items: center; flex: 0 0 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--w3ml-blue-2); background: #eaf1ff; }
.confirm-modal-icon.is-danger { color: #a61e2d; background: #fdebed; }
.confirm-record { padding: .7rem .8rem; border: 1px solid var(--w3ml-border); border-radius: .55rem; background: #f8f9fc; color: #344054; font-size: .84rem; font-weight: 700; }
.app-subtabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.app-subtabs .nav-link { color: #526078; font-size: .86rem; font-weight: 700; white-space: nowrap; }
.app-subtabs .nav-link.active { color: var(--w3ml-blue-2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media (min-width: 992px) {
  .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; height: 100vh; visibility: visible !important; transform: none !important; }
  .app-header, body:has(.app-sidebar) > main, body:has(.app-sidebar) > footer { margin-left: var(--w3ml-sidebar-width); }
  .app-header { position: sticky; top: 0; z-index: 1030; }
  body:has(.app-sidebar) > main { width: calc(100% - var(--w3ml-sidebar-width)); }
}
@media (max-width: 991.98px) {
  .app-sidebar { max-width: min(88vw, 18rem); }
  .app-header { position: sticky; top: 0; z-index: 1025; min-height: 3.7rem; padding-inline: .9rem; }
  body:has(.app-sidebar) > main { padding-inline: 1rem !important; }
  .content-width { max-width: 100%; }
}