:root {
    color-scheme: light;
    --navy: #071526;
    --navy-soft: #10243c;
    --cyan: #18b9d5;
    --ink: #152033;
    --muted: #69778b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --canvas: #f5f7fb;
    --success: #087a55;
    --danger: #b42318;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 84% 0%, rgb(24 185 213 / 5%), transparent 27rem), var(--canvas); }
a { color: inherit; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { display: grid; min-height: 100vh; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex-direction: column; padding: 26px 18px; color: #aebbd0; background: radial-gradient(circle at 30% 0%, rgb(24 185 213 / 12%), transparent 18rem), linear-gradient(180deg, #0a1a2e 0%, var(--navy) 70%); box-shadow: 18px 0 50px rgb(7 21 38 / 4%); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; color: white; text-decoration: none; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgb(103 232 249 / 25%); border-radius: 14px; color: #87ecf8; background: linear-gradient(145deg, rgb(34 211 238 / 17%), rgb(34 211 238 / 5%)); box-shadow: inset 0 1px rgb(255 255 255 / 8%), 0 10px 28px rgb(0 0 0 / 12%); font-size: 14px; font-weight: 800; }
.brand strong, .brand small, .auth-brand strong, .auth-brand small { display: block; }
.brand strong { font-size: 15px; letter-spacing: -.01em; }
.brand small { margin-top: 3px; color: #708097; font-size: 11px; }
.sidebar nav { display: grid; gap: 6px; margin-top: 44px; }
.nav-link { display: flex; min-height: 46px; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid transparent; border-radius: 12px; color: #91a1b8; font-size: 13px; font-weight: 600; text-decoration: none; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }
.nav-link:hover { color: white; background: rgb(255 255 255 / 5%); }
.nav-link:hover { transform: translateX(2px); }
.nav-link.is-active { border-color: rgb(121 226 243 / 12%); color: white; background: linear-gradient(90deg, rgb(24 185 213 / 15%), rgb(255 255 255 / 5%)); box-shadow: inset 3px 0 #41d1e7, 0 7px 18px rgb(0 0 0 / 8%); }
.nav-icon { display: grid; width: 20px; height: 20px; place-items: center; color: #67d9ea; }
.nav-icon svg { width: 18px; height: 18px; }
.security-note { display: grid; gap: 8px; margin-top: auto; padding: 16px; border: 1px solid rgb(110 231 183 / 14%); border-radius: 14px; color: #c9f7e5; background: linear-gradient(145deg, rgb(52 211 153 / 8%), rgb(52 211 153 / 3%)); font-size: 12px; }
.security-note span { color: #7f90a7; line-height: 1.5; }
.workspace { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; display: flex; min-height: 76px; align-items: center; justify-content: space-between; padding: 0 36px; border-bottom: 1px solid rgb(226 232 240 / 85%); background: rgb(255 255 255 / 84%); box-shadow: 0 8px 30px rgb(31 41 55 / 3%); backdrop-filter: blur(18px); }
.topbar > div:first-child { display: grid; gap: 5px; }
.topbar small { color: #7a8798; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.topbar strong { font-size: 14px; }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.language-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #f5f7fa; }
.language-switch a { display: grid; min-width: 30px; height: 25px; place-items: center; border-radius: 6px; color: #7b8798; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-decoration: none; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.language-switch a:hover { color: var(--navy); }
.language-switch a.is-active { color: var(--navy); background: white; box-shadow: 0 2px 7px rgb(15 23 42 / 9%); }
.status-dot { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #f1d399; border-radius: 999px; color: #805b10; background: #fffaf0; font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.status-dot i { width: 6px; height: 6px; border-radius: 50%; background: #e8a51b; box-shadow: 0 0 0 3px rgb(232 165 27 / 12%); }
.operator-pill { display: flex; align-items: center; gap: 9px; padding-left: 15px; border-left: 1px solid var(--line); }
.operator-pill > b { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #c4f4fa; background: var(--navy); font-size: 10px; }
.operator-pill > span { display: grid; gap: 2px; }
.operator-pill strong { font-size: 11px; }
.operator-pill small { color: #8793a4; font-size: 9px; letter-spacing: 0; }
.text-button { padding: 4px; border: 0; color: #58677b; background: none; font-size: 13px; }
.text-button:hover { color: var(--navy); }
.content { width: 100%; max-width: 1500px; margin: 0 auto; padding: 42px 38px 56px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.help-strip { display: flex; align-items: flex-start; gap: 14px; margin: -8px 0 24px; padding: 15px 17px; border: 1px solid #d7ebf0; border-radius: 14px; color: #31546a; background: linear-gradient(100deg, #f0fafc, rgb(255 255 255 / 75%)); }
.help-icon { display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; border: 1px solid #bce8ef; border-radius: 8px; color: #087f96; background: white; font-family: ui-serif, Georgia, serif; font-size: 13px; font-weight: 800; }
.help-strip strong { display: block; color: #153c51; font-size: 12px; }
.help-strip p { max-width: 1000px; margin: 4px 0 0; color: #5f7686; font-size: 12px; line-height: 1.55; }
.eyebrow { color: #07839e; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 6px 0 0; color: var(--navy); font-size: clamp(30px, 3vw, 40px); font-weight: 750; line-height: 1.1; letter-spacing: -.045em; }
.page-heading p, .auth-heading p, .panel-heading p, .form-panel > p { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.healthy { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #ccecdf; border-radius: 999px; color: var(--success); background: rgb(238 251 245 / 80%); font-size: 11px; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.metric-card { display: grid; min-height: 148px; align-content: center; padding: 22px 23px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #fff, #fbfdff); box-shadow: 0 8px 30px rgb(22 34 52 / 5%); transition: transform .18s ease, box-shadow .18s ease; }
.metric-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgb(22 34 52 / 8%); }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #c9edf3; border-radius: 12px; color: #0787a0; background: #eefafd; }
.metric-icon svg { width: 18px; height: 18px; }
.metric-card span { color: var(--muted); font-size: 13px; font-weight: 600; }
.metric-card strong { margin-top: 13px; color: var(--navy); font-size: 29px; letter-spacing: -.04em; }
.metric-card small { margin-top: 4px; color: #8491a3; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, .75fr); gap: 20px; margin-top: 20px; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, .8fr); align-items: start; gap: 20px; }
.panel { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: rgb(255 255 255 / 96%); box-shadow: 0 8px 30px rgb(22 34 52 / 4%); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-heading h2, .form-panel h2, .integrity-panel h2 { margin: 0; font-size: 16px; letter-spacing: -.015em; }
.panel-heading p { margin-top: 4px; font-size: 12px; }
.panel-heading a { color: #07839e; font-size: 12px; font-weight: 700; text-decoration: none; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { height: 44px; padding: 0 16px; color: #718096; background: #f8fafc; font-size: 10px; font-weight: 800; letter-spacing: .055em; text-align: left; text-transform: uppercase; white-space: nowrap; }
td { padding: 15px 16px; border-top: 1px solid #edf1f5; vertical-align: middle; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: #f9fcfd; }
td code { color: #34445a; font-size: 11px; }
.cell-subtext { display: block; max-width: 170px; margin-top: 4px; overflow: hidden; color: #8995a7; font-family: ui-monospace, monospace; font-size: 9px; text-overflow: ellipsis; }
.cell-description { display: block; max-width: 430px; margin-top: 5px; color: #7b8798; font-size: 11px; font-weight: 400; line-height: 1.45; }
.row-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.empty-row { height: 110px; color: #8491a3; text-align: center; }
.pill { display: inline-flex; padding: 4px 8px; border: 1px solid #dce3eb; border-radius: 999px; color: #667085; background: #f8fafc; font-size: 10px; font-weight: 700; }
.pill-ok { border-color: #b8e6d4; color: #087a55; background: #eefbf5; }
.pill-off { border-color: #f5c6c2; color: var(--danger); background: #fff4f3; }
.integrity-panel { position: relative; min-height: 100%; overflow: hidden; padding: 26px; border: 1px solid rgb(109 225 242 / 9%); border-radius: 18px; color: white; background: radial-gradient(circle at 100% 0%, rgb(24 185 213 / 18%), transparent 16rem), linear-gradient(145deg, #0c2037, var(--navy)); box-shadow: 0 18px 44px rgb(10 23 41 / 14%); }
.integrity-panel > p { color: #8d9bb0; font-size: 13px; }
.shield { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 20px; border: 1px solid rgb(103 232 249 / 23%); border-radius: 13px; color: #78e4f2; background: rgb(34 211 238 / 9%); box-shadow: inset 0 1px rgb(255 255 255 / 6%); }
.shield svg { width: 21px; height: 21px; }
.integrity-panel ul { display: grid; gap: 18px; margin: 24px 0; padding: 0; list-style: none; }
.integrity-panel li { display: grid; gap: 4px; padding-left: 22px; position: relative; }
.integrity-panel li::before { position: absolute; left: 0; color: #55d6a4; content: "✓"; }
.integrity-panel li strong { font-size: 13px; }
.integrity-panel li span, .integrity-panel > small { color: #8291a7; font-size: 11px; line-height: 1.5; }
.form-panel { padding: 22px; }
.form-stack { display: grid; gap: 15px; margin-top: 22px; }
label { display: grid; gap: 7px; color: #344054; font-size: 12px; font-weight: 700; }
label small { color: #7b8798; font-weight: 400; line-height: 1.4; }
input, textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #d2dbe6; border-radius: 11px; outline: none; color: var(--ink); background: #fcfdff; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
textarea { resize: vertical; line-height: 1.5; }
input:hover, textarea:hover { border-color: #b7c5d4; background: white; }
input:focus, textarea:focus { border-color: #35b9d5; box-shadow: 0 0 0 3px rgb(32 184 216 / 12%); }
.primary-button, .danger-button, .button-link, .secondary-button { display: inline-flex; min-height: 43px; align-items: center; justify-content: center; padding: 10px 15px; border: 0; border-radius: 11px; font-weight: 750; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.primary-button { color: white; background: linear-gradient(135deg, #102942, var(--navy)); box-shadow: 0 8px 20px rgb(10 23 41 / 17%); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 11px 25px rgb(10 23 41 / 21%); }
.primary-button:hover { background: var(--navy-soft); }
.danger-button { min-height: 30px; padding: 5px 9px; color: var(--danger); background: #fff0ef; font-size: 11px; }
.secondary-button { min-height: 32px; padding: 6px 10px; border: 1px solid #d7e0ea; color: #42526a; background: white; font-size: 11px; }
.secondary-button:hover { border-color: #b8c7d7; background: #f7fafc; }
.danger-link { color: #b42318; font-size: 11px; font-weight: 700; text-decoration: none; }
.danger-link:hover { text-decoration: underline; }
.narrow-panel { width: min(100%, 720px); }
.checkbox-label { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #dce4ed; border-radius: 12px; background: #f9fbfd; }
.checkbox-label input { width: 18px; min-height: 18px; flex: 0 0 18px; accent-color: #07839e; }
.checkbox-label span { display: grid; gap: 3px; }
.checkbox-label small { display: block; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 5px; }
.confirm-panel { width: min(100%, 650px); padding: 28px; }
.confirm-panel h2 { margin: 14px 0 8px; color: var(--navy); }
.confirm-panel > p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.confirm-icon { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #f1b7b1; border-radius: 13px; color: var(--danger); background: #fff2f1; font-size: 22px; font-weight: 800; }
.confirm-panel dl { display: grid; gap: 10px; margin: 22px 0; padding: 16px; border-radius: 12px; background: #f7f9fc; }
.confirm-panel dl div { display: flex; justify-content: space-between; gap: 20px; }
.confirm-panel dt { color: var(--muted); font-size: 12px; }
.confirm-panel dd { margin: 0; color: var(--navy); font-size: 13px; font-weight: 700; }
.danger-button-lg { min-height: 43px; padding: 10px 15px; color: white; background: #b42318; font-size: 12px; }
.danger-button-lg:hover { background: #912018; }
.flash, .form-error, .secret-reveal { margin-bottom: 20px; padding: 13px 15px; border-radius: 10px; font-size: 13px; }
.flash-success { border: 1px solid #afe1cd; color: #086846; background: #eefbf5; }
.form-error { border: 1px solid #f4c0bb; color: #9f1c13; background: #fff2f1; }
.secret-reveal { display: grid; gap: 10px; border: 1px solid #f0d18b; color: #725108; background: #fff9e9; }
.secret-reveal code { overflow-wrap: anywhere; padding: 10px; border-radius: 7px; background: rgb(255 255 255 / 65%); }

.auth-shell { background: radial-gradient(circle at 72% 10%, rgb(30 202 229 / 18%), transparent 24rem), radial-gradient(circle at 18% 90%, rgb(52 211 153 / 8%), transparent 22rem), linear-gradient(145deg, #0a1e35, var(--navy)); }
.auth-page { position: relative; display: grid; min-height: 100vh; place-items: center; padding: 36px 28px; }
.auth-language { position: fixed; z-index: 2; top: 24px; right: 24px; border-color: rgb(255 255 255 / 12%); background: rgb(255 255 255 / 8%); backdrop-filter: blur(12px); }
.auth-language a { color: #8ba3ba; }
.auth-language a:hover { color: white; }
.auth-language a.is-active { color: white; background: rgb(255 255 255 / 13%); box-shadow: none; }
.auth-page::before { position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px); background-size: 54px 54px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.auth-card { position: relative; width: min(100%, 460px); padding: 38px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 24px; background: rgb(255 255 255 / 97%); box-shadow: 0 35px 100px rgb(0 0 0 / 32%), inset 0 1px white; }
.setup-card { width: min(100%, 600px); }
.auth-brand { display: flex; align-items: center; gap: 12px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.auth-brand .brand-mark { color: #07839e; background: #e9f9fc; border-color: #c1edf4; }
.auth-brand strong { color: var(--navy); }
.auth-brand small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.auth-heading { margin-top: 26px; }
.auth-heading h1 { font-size: 34px; }
.fine-print { margin: 20px 0 0; color: #8491a3; font-size: 11px; line-height: 1.5; text-align: center; }
.auth-card code { font-size: 11px; }
.auth-card > p { color: var(--muted); line-height: 1.6; }
.button-link { margin-top: 16px; }

@media (max-width: 1000px) {
    .app-shell { grid-template-columns: 78px minmax(0, 1fr); }
    .sidebar { padding-inline: 11px; }
    .brand { justify-content: center; padding: 0; }
    .brand > span:last-child, .nav-label { display: none; }
    .nav-link { justify-content: center; }
    .nav-icon { width: 20px; }
    .security-note { display: none; }
    .dashboard-grid, .split-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .app-shell { display: block; }
    .sidebar { position: static; width: 100%; height: auto; padding: 13px 16px; flex-direction: row; align-items: center; overflow-x: auto; }
    .brand { margin-right: 10px; }
    .brand-mark { width: 36px; height: 36px; flex: 0 0 auto; }
    .sidebar nav { display: flex; margin: 0; }
    .nav-link { min-width: 40px; padding: 9px; }
    .topbar { min-height: 64px; padding: 0 18px; }
    .topbar > div:first-child { display: none; }
    .topbar-actions { width: 100%; justify-content: space-between; }
    .operator-pill { display: none; }
    .topbar-actions { gap: 8px; }
    .status-dot { display: none; }
    .content { padding: 25px 17px 38px; }
    .page-heading { align-items: start; flex-direction: column; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-height: 110px; }
    .auth-page { padding: 16px; }
    .auth-card { padding: 25px; }
    .auth-language { top: 14px; right: 14px; }
}