:root {
  --bg: #30363d;
  --panel: #373e45;
  --panel-2: #3d454d;
  --panel-3: #444d56;
  --line: #4a535d;
  --text: #f3f5f7;
  --muted: #c3c9cf;
  --muted-2: #969fa8;
  --sidebar-bg: #3b4249;
  --topbar-bg: #3d444b;
  --info: #2caed5;
  --info-dark: #1995bc;
  --green: #4fc17a;
  --red: #ff6f73;
  --yellow: #ffbf22;
  --purple: #9575cd;
  --sidebar: 210px;
  --topbar: 50px;
  --radius: 3px;
  --shadow: none;
}

html[data-theme="light"] {
  --bg: #edf1f5;
  --panel: #ffffff;
  --panel-2: #f5f7f9;
  --panel-3: #e8edf1;
  --line: #d5dde4;
  --text: #2e3842;
  --muted: #65727e;
  --muted-2: #84919c;
  --sidebar-bg: #39434d;
  --topbar-bg: #34404a;
}
html[data-theme="light"] a:hover { color: #117fa4 }
html[data-theme="blue"] { --bg:#23384c;--panel:#29445c;--panel-2:#31516c;--panel-3:#39607e;--line:#456983;--sidebar-bg:#243b4f;--topbar-bg:#203649 }
html[data-theme="green"] { --bg:#263d38;--panel:#2f4943;--panel-2:#37564e;--panel-3:#40635a;--line:#4c7268;--sidebar-bg:#263f39;--topbar-bg:#213833;--info:#31ba9a;--info-dark:#20987d }
html[data-theme="pink"] { --bg:#44353e;--panel:#50404a;--panel-2:#5d4955;--panel-3:#69535f;--line:#775f6d;--sidebar-bg:#473640;--topbar-bg:#3f3039;--info:#e86c9e;--info-dark:#c95181 }
html[data-theme="techno-dark"] { --bg:#172229;--panel:#202d35;--panel-2:#283944;--panel-3:#314650;--line:#3b5661;--sidebar-bg:#1b282f;--topbar-bg:#152127;--info:#00c9d7;--info-dark:#00a7b3 }
html[data-theme="elegant"] { --bg:#2a2927;--panel:#373532;--panel-2:#403e3a;--panel-3:#494640;--line:#5a554d;--sidebar-bg:#302e2b;--topbar-bg:#292724;--info:#c8a15a;--info-dark:#aa8240 }

* { box-sizing: border-box }
html { font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); font-size: 14px }
body { margin: 0; min-height: 100vh; background: var(--bg) }
a { color: var(--info); text-decoration: none }
a:hover { color: #fff }
button, input, select, textarea { font: inherit }
button { cursor: pointer }
code { color: #d8f6ff; background: rgba(44,174,213,.15); padding: 2px 5px; border-radius: 2px }
.muted { color: var(--muted) }
.eyebrow { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 700; color: var(--info) }

.reference-topbar {
  height: var(--topbar);
  display: grid;
  grid-template-columns: var(--sidebar) 46px minmax(180px, 1fr) auto;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--topbar-bg);
  border-bottom: 1px solid #252b30;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.brand { color: #fff; font-weight: 700 }
.brand-top { display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px; border-right: 1px solid rgba(0,0,0,.18); font-size: 16px }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; color: #fff; background: linear-gradient(135deg, var(--info), #1777ca); border-radius: 7px; font-size: 10px; font-weight: 800 }
.topbar-menu { height: 100%; border: 0; color: #e8edf1; background: transparent; font-size: 17px }
.topbar-menu:hover { background: rgba(0,0,0,.12) }
.topbar-title { padding-left: 2px; color: #f7f8fa; font-size: 15px }
.topbar-controls { display: flex; align-items: center; height: 100%; gap: 0 }
.top-select { width: auto; min-width: 98px; height: 100%; margin: 0; padding: 0 28px 0 11px; border: 0; border-left: 1px solid rgba(0,0,0,.18); border-radius: 0; color: #f1f4f6; background: var(--topbar-bg) }
.top-router-select { max-width: 260px }
.top-user { display: flex; align-items: center; height: 100%; padding: 0 14px; border-left: 1px solid rgba(0,0,0,.18); color: #f1f4f6; white-space: nowrap }

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: calc(100vh - var(--topbar)) }
.sidebar { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); display: flex; flex-direction: column; overflow: auto; background: var(--sidebar-bg); border-right: 1px solid #242a2f; z-index: 60 }
.sidebar-router-name { padding: 10px 12px; text-align: center; border-bottom: 1px solid #262d32; background: rgba(0,0,0,.07) }
.sidebar-router-name strong { display: block; color: #fff; font-size: 16px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sidebar-router-name small { display: block; color: #b9c2ca; margin-top: 3px; font-size: 9px; letter-spacing: .12em }
.nav { flex: 1; padding: 5px 5px 14px }
.nav a, .nav summary { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 7px 10px; color: #edf0f2; border-radius: 2px; font-size: 13px; list-style: none; cursor: pointer }
.nav summary::-webkit-details-marker { display: none }
.nav a:hover, .nav summary:hover, .nav a.active { background: rgba(0,0,0,.13); color: #fff }
.nav a.active { box-shadow: inset 3px 0 var(--info); background: rgba(0,0,0,.17) }
.nav .mi { display: inline-grid; place-items: center; width: 18px; color: #e7ebee; font-size: 14px; flex: 0 0 18px }
.nav summary b { margin-left: auto; color: #d8dde1; font-size: 10px; transition: transform .18s }
.nav details[open] > summary b { transform: rotate(180deg) }
.nav details > a { padding-left: 31px; font-size: 12px }
.nav .nav-nested > summary { padding-left: 16px; background: rgba(0,0,0,.06) }
.nav .nav-nested > a { padding-left: 43px; min-height: 34px }
.nav details[open] > summary { background: rgba(0,0,0,.1) }
.sidebar-user { position: sticky; bottom: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 10px; background: #30363c; border-top: 1px solid #252b30 }
.sidebar-user strong, .sidebar-user small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sidebar-user strong { font-size: 11px }
.sidebar-user small { margin-top: 2px; color: #aab4bd; font-size: 8px }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, var(--purple), #407de8); color: #fff; font-weight: 700 }
.avatar.large { width: 46px; height: 46px; font-size: 18px }
.sidebar-online { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(79,193,122,.12) }

.main { min-width: 0 }
.content { padding: 12px; max-width: 1800px; margin: 0 auto }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 33px; padding: 7px 12px; border: 1px solid transparent; border-radius: 3px; font-weight: 600; font-size: 12px; white-space: nowrap; color: #fff }
.btn:hover { filter: brightness(1.07); color: #fff }
.btn-primary, .btn-info { background: var(--info); border-color: var(--info-dark) }
.btn-secondary { background: var(--panel-3); border-color: var(--line); color: var(--text) }
.btn-success { background: var(--green); border-color: #39a965 }
.btn-warning { background: var(--yellow); border-color: #e1a814; color: #273039 }
.btn-danger { background: var(--red); border-color: #e35b60; color: #fff }
.btn-xs { min-height: 25px; padding: 4px 7px; font-size: 10px }
.btn-block { width: 100% }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--panel-3); color: var(--text); border-radius: 3px }

.alert { padding: 11px 13px; margin: 0 0 12px; border: 1px solid; border-radius: 3px; font-size: 12px }
.alert-danger { color: #ffd2d5; background: rgba(255,111,115,.15); border-color: rgba(255,111,115,.55) }
.alert-warning { color: #fff1bd; background: rgba(255,191,34,.14); border-color: rgba(255,191,34,.5) }
.alert-success { color: #ccf7da; background: rgba(79,193,122,.14); border-color: rgba(79,193,122,.5) }
.alert-info { color: #d2f5ff; background: rgba(44,174,213,.14); border-color: rgba(44,174,213,.48) }

.classic-panel, .panel, .info-panel, .router-card, .admin-card {
  margin-bottom: 12px;
  border: 1px solid #252c31;
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.classic-panel-title, .panel-head { display: flex; align-items: center; min-height: 42px; padding: 9px 12px; border-bottom: 1px solid #282f34; background: rgba(0,0,0,.045); color: #fff; font-weight: 700 }
.classic-panel-title a { color: #fff }
.page-titlebar { margin-bottom: 0; border: 1px solid #252c31; border-radius: 3px 3px 0 0; font-size: 15px }
.title-links { margin-left: 8px; color: var(--muted); font-weight: 400 }
.title-links a { color: #fff }
.panel-head { justify-content: space-between }
.panel-head h3 { margin: 0; font-size: 14px }
.panel-head a { font-size: 11px }

.system-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 10px }
.system-card { display: flex; align-items: center; gap: 16px; min-height: 106px; padding: 17px 20px; border: 1px solid #252c31; background: var(--panel); color: var(--text) }
.system-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--info); font-size: 25px; flex: 0 0 auto }
.system-card strong, .system-card b, .system-card small { display: block; margin: 4px 0; color: var(--text); font-size: 13px; font-weight: 400 }
.dashboard-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 1.15fr); gap: 10px }
.panel-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 0 }
.action-card-grid { display: grid; gap: 9px; padding: 12px }
.action-card-grid.four { grid-template-columns: repeat(4,minmax(0,1fr)) }
.action-card { display: block; min-height: 94px; padding: 14px 12px; color: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 2px; transition: transform .12s, filter .12s }
.action-card:hover { transform: translateY(-1px); filter: brightness(1.05); color: #fff }
.action-card strong { display: inline-block; margin-right: 4px; font-size: 25px; line-height: 1.2 }
.action-card small { font-size: 11px; font-weight: 700 }
.action-card span { display: block; margin-top: 8px; font-size: 13px }
.action-card.blue { background: #29abd1 }
.action-card.green { background: #4fc17a }
.action-card.yellow { background: #ffbf22; color: #fff }
.action-card.red { background: #ff7074 }
.voucher-check-button { width: calc(100% - 190px); margin: 0 auto 14px }
.income-panel { min-height: 96px; display: flex; align-items: center; justify-content: center; gap: 17px; padding: 15px }
.income-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--muted); border-radius: 50%; font-size: 13px; font-weight: 700 }
.income-panel strong { display: block; margin-bottom: 7px }
.income-panel p { margin: 4px 0; font-size: 12px }
.traffic-head { padding: 10px; text-align: center; font-weight: 700 }
.traffic-canvas { position: relative; height: 205px; margin: 0 16px 12px; overflow: hidden; border: 1px solid #283038; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 40px 40px }
.traffic-line { position: absolute; left: -5%; right: -5%; height: 2px; opacity: .9; transform-origin: left }
.traffic-line.tx { top: 53%; background: #36badf; transform: skewY(-3deg) }
.traffic-line.rx { top: 61%; background: #f06a78; transform: skewY(2deg) }
.traffic-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted-2); font-size: 11px }
.traffic-legend { padding: 0 16px 12px; text-align: center; color: var(--muted); font-size: 10px }
.traffic-legend a { float: right }
.tx-dot, .rx-dot { display: inline-block; width: 8px; height: 8px; margin: 0 3px 0 10px; border-radius: 50% }
.tx-dot { background:#36badf }.rx-dot { background:#f06a78 }
.log-panel { min-height: 310px }
.router-session-panel { padding-bottom: 12px }
.session-summary { display: flex; align-items: center; gap: 12px; padding: 16px }
.session-summary strong { font-size: 30px; color: var(--info) }
.session-summary span { color: var(--muted); font-size: 11px }
.session-actions { display: flex; gap: 8px; padding: 0 16px }

.toolbar, .section-heading, .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.classic-toolbar { padding: 12px 10px; margin-bottom: 0; border: 1px solid #252c31; border-top: 0; background: var(--panel) }
.toolbar-actions, .filter-row, .search-form, .generator-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap }
.generator-actions { padding: 10px; border: 1px solid #252c31; border-top: 0; background: var(--panel) }
.count-badge, .tag, .access-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); background: var(--panel-2); font-size: 10px; font-weight: 700 }
.status-pill { display: inline-flex; align-items: center; border-radius: 12px; padding: 4px 8px; font-size: 9px; text-transform: uppercase; font-weight: 700 }
.status-pill.online { color: #baf2cc; background: rgba(79,193,122,.15); border: 1px solid rgba(79,193,122,.45) }
.status-pill.offline { color: #ffd0d2; background: rgba(255,111,115,.15); border: 1px solid rgba(255,111,115,.45) }
.status-pill.loading { color: #fff0bb; background: rgba(255,191,34,.13); border: 1px solid rgba(255,191,34,.42) }

.table-wrap { overflow: auto }
.table-wrap.wide { max-height: calc(100vh - 180px) }
table { width: 100%; border-collapse: collapse; font-size: 11px }
th { position: sticky; top: 0; z-index: 2; text-align: left; color: #f2f4f5; background: var(--panel-2); font-size: 10px }
th, td { padding: 9px 10px; border-right: 1px solid #30373d; border-bottom: 1px solid #2c3338; white-space: nowrap }
th:last-child, td:last-child { border-right: 0 }
tbody tr:nth-child(even) { background: rgba(0,0,0,.025) }
tbody tr:hover { background: rgba(44,174,213,.08) }
td.detail-cell { min-width: 210px; white-space: normal }
.empty-cell { padding: 30px; text-align: center; color: var(--muted) }
.action-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap }
.action-row form { margin: 0 }

label { display: block; color: var(--text); font-size: 11px; font-weight: 600 }
input, select, textarea { width: 100%; min-height: 34px; margin-top: 5px; padding: 7px 9px; border: 1px solid #222a30; border-radius: 2px; outline: none; color: var(--text); background: var(--panel-2) }
input:focus, select:focus, textarea:focus { border-color: var(--info); box-shadow: 0 0 0 2px rgba(44,174,213,.13) }
input[type="checkbox"] { width: auto; min-height: 0; margin: 0 }
.search-form input { width: 190px; margin: 0 }
.search-form select { width: 160px; margin: 0 }
.form-panel { max-width: 1050px; margin-left: auto; margin-right: auto }
.form-panel form { padding: 16px }
.form-grid { display: grid; gap: 12px }
.form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)) }
.span-2 { grid-column: span 2 }
.form-section { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line) }
.form-section h4 { margin: 0 0 12px; color: var(--info); font-size: 12px; text-transform: uppercase }
.check-label { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px; border: 1px solid var(--line); background: var(--panel-2) }
.input-group { display: grid; grid-template-columns: 1fr 80px }
.input-group input, .input-group select { border-radius: 0; margin-top: 5px }
.split-layout { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(260px,.75fr); gap: 10px }
.info-panel { height: max-content; padding: 17px }
.info-panel h3 { margin: 0 0 6px; font-size: 15px }
.info-panel p:not(.eyebrow) { color: var(--muted); font-size: 11px; line-height: 1.55 }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 }

.router-grid, .router-admin-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-bottom: 12px }
.router-card, .admin-card { padding: 16px }
.router-card-head, .admin-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 9px }
.router-card h3, .admin-card h3 { margin: 10px 0 3px; font-size: 15px }
.router-card small, .admin-card p { color: var(--muted); font-size: 10px }
.router-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; color: var(--info); background: rgba(44,174,213,.12); font-size: 19px }
.admin-card dl { margin: 13px 0 }
.admin-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 10px }
.admin-card dt { color: var(--muted) }.admin-card dd { margin:0 }
.health-main { padding: 14px 0 }.health-main strong,.health-main span { display:block }.health-main span { color:var(--muted);font-size:10px }
.health-metrics { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line) }
.health-metrics span { padding:7px;border-right:1px solid var(--line);min-width:0 }
.health-metrics span:last-child { border:0 }
.health-metrics small,.health-metrics b { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.health-metrics small { color:var(--muted);font-size:8px }.health-metrics b { margin-top:3px;font-size:10px }
.health-counts { display:flex;justify-content:space-between;margin-top:10px;color:var(--muted);font-size:9px }
.hero-strip { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px;margin-bottom:12px;border:1px solid var(--line);background:var(--panel) }
.hero-strip h2 { margin:0 0 4px;font-size:22px }.hero-strip p:last-child { margin:0;color:var(--muted) }
.stat-grid { display:grid;gap:10px;margin-bottom:12px }.stat-grid.four { grid-template-columns:repeat(4,1fr) }.stat-grid.three { grid-template-columns:repeat(3,1fr) }
.stat-card { padding:14px;border:1px solid #252c31;background:var(--panel) }.stat-card span,.stat-card small { display:block;color:var(--muted);font-size:10px }.stat-card strong { display:block;margin:7px 0;font-size:22px }
.access-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px }
.access-card { display:grid;grid-template-columns:1fr 180px;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);background:var(--panel-2) }
.access-card>div { display:flex;align-items:center;gap:9px }.access-card select { margin:0 }
.check-list { margin:0;padding:15px 35px;color:var(--muted);font-size:11px }.check-list li { margin:8px }

.empty-state { padding: 50px; text-align: center; border: 1px dashed var(--line); color: var(--muted); background: var(--panel) }
.empty-state > span { display:block;margin-bottom:8px;color:var(--info);font-size:35px }.empty-state h3 { margin:5px;color:var(--text) }.empty-state p { font-size:12px }
.classic-empty { min-height: 360px; display:grid;place-content:center }
.module-page { min-height: 520px }
.module-intro { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:20px }
.module-icon { display:grid;place-items:center;width:55px;height:55px;border-radius:50%;background:rgba(44,174,213,.14);color:var(--info);font-weight:800 }
.module-intro h2 { margin:0 0 5px }.module-intro p { margin:0;color:var(--muted) }
.module-placeholder { display:grid;place-items:center;align-content:center;min-height:330px;text-align:center;color:var(--muted) }.module-placeholder>span { font-size:40px;color:var(--info) }.module-placeholder h3 { margin:12px 0 5px;color:var(--text) }.module-placeholder p { max-width:520px }
.network-map-preview { display:grid;place-items:center;padding:35px 20px }
.map-node { display:grid;place-items:center;min-width:190px;padding:18px;border:1px solid var(--info);background:var(--panel-2) }.map-node span { color:var(--info);font-size:28px }.map-node b,.map-node small { margin-top:5px }.map-node small { color:var(--muted) }
.map-branch { display:flex;width:390px;height:60px;border-top:0;position:relative }.map-branch:before { content:"";position:absolute;left:50%;top:0;height:30px;border-left:1px solid var(--info) }.map-branch:after { content:"";position:absolute;left:10%;right:10%;top:30px;border-top:1px solid var(--info) }
.map-clients { display:grid;grid-template-columns:repeat(3,120px);gap:36px }.map-clients span { padding:12px;text-align:center;border:1px solid var(--line);background:var(--panel-2) }
.module-note { text-align:center;color:var(--muted) }
.about-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:20px }.about-grid div { padding:20px;border:1px solid var(--line);background:var(--panel-2) }.about-grid small,.about-grid strong { display:block }.about-grid small { color:var(--muted) }.about-grid strong { margin-top:6px;font-size:18px }

.modal { width:min(760px,calc(100% - 30px));padding:0;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--text) }
.modal::backdrop { background:rgba(0,0,0,.7) }.modal form { padding:16px }.modal-head { display:flex;justify-content:space-between;align-items:center;margin-bottom:14px }.modal-head h3 { margin:0 }.modal-head button { border:0;background:none;color:var(--muted);font-size:24px }

.voucher-sheet { display:grid;grid-template-columns:repeat(4,1fr);gap:7px }.print-toolbar { display:flex;justify-content:space-between;margin-bottom:12px }
.voucher-card { break-inside:avoid;padding:8px;border:1px dashed #259dc2;border-radius:3px;background:#fff;color:#18242d }
.voucher-brand { display:flex;justify-content:space-between;border-bottom:1px solid #d9e2e8;padding-bottom:5px }.voucher-brand strong { font-size:10px }.voucher-brand span { padding:2px 4px;border-radius:2px;background:#e6f6fb;color:#177896;font-size:8px }
.voucher-credentials { display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:7px 0 }.voucher-credentials div:only-child { grid-column:1/-1;text-align:center }.voucher-credentials small,.voucher-credentials b { display:block }.voucher-credentials small { color:#60717e;font-size:6px }.voucher-credentials b { font-size:12px;letter-spacing:.08em }
.voucher-foot { display:flex;justify-content:space-between;border-top:1px solid #d9e2e8;padding-top:5px;font-size:7px }

.install-body,.login-body { display:grid;place-items:center;min-height:100vh;padding:24px;background:#eef1f4 }
.install-card { width:min(820px,100%);padding:28px;border:1px solid #cfd6dc;border-radius:3px;background:#fff;color:#26333e;box-shadow:0 16px 45px rgba(0,0,0,.14) }
.install-card input,.install-card select { color:#25323c;background:#f5f7f9;border-color:#ccd5dc }.install-card h1 { margin:24px 0 4px }.install-card form { margin-top:18px }
.brand-large { display:flex;align-items:center;gap:10px;font-size:21px;color:#26333e }.brand-large .brand-mark { width:44px;height:44px;font-size:14px }
.success-panel { text-align:center;padding:30px }
.login-shell { width:min(900px,100%);display:grid;grid-template-columns:1fr 390px;overflow:hidden;border-radius:3px;background:#fff;box-shadow:0 20px 60px rgba(0,0,0,.22) }
.login-hero { min-height:520px;padding:46px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#333b42,#252b30);color:#fff }
.login-hero .brand { color:#fff }.login-hero h1 { margin:70px 0 14px;font-size:42px;line-height:1.08 }.login-hero p { color:#cbd2d8;line-height:1.6 }
.feature-pills { display:flex;gap:7px;flex-wrap:wrap;margin-top:16px }.feature-pills span { padding:5px 9px;border:1px solid rgba(255,255,255,.2);font-size:10px }
.login-card { display:flex;flex-direction:column;justify-content:center;padding:38px;color:#25313b }.login-card h2 { margin:0;font-size:25px }.login-card label { margin-bottom:12px;color:#384550 }.login-card input { color:#27343e;background:#f4f6f8;border-color:#ccd5dc }.login-card small { color:#7b8791;text-align:center }
.result-status { display:flex;align-items:center;gap:13px;padding:20px;border-bottom:1px solid var(--line) }.result-status>span { display:grid;place-items:center;width:48px;height:48px;font-size:22px }.result-status h2 { margin:0 }.result-status.success>span { color:var(--green) }.result-status.warning>span { color:var(--yellow) }.result-status.danger>span { color:var(--red) }
.detail-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line) }.detail-grid>div { padding:14px;background:var(--panel) }.detail-grid small,.detail-grid b { display:block }.detail-grid small { color:var(--muted);font-size:9px }.detail-grid b { margin-top:4px }
.result-local { display:flex;justify-content:space-between;padding:13px;color:var(--muted) }

@media (max-width: 1180px) {
  .dashboard-columns { grid-template-columns: 1fr }
  .dashboard-secondary { display:grid;grid-template-columns:repeat(2,1fr);gap:10px }
  .dashboard-secondary .log-panel { grid-column:1/-1 }
  .router-grid,.router-admin-grid { grid-template-columns:repeat(2,1fr) }
  .action-card-grid.four { grid-template-columns:repeat(2,1fr) }
  .voucher-sheet { grid-template-columns:repeat(3,1fr) }
}
@media (max-width: 850px) {
  :root { --sidebar: 235px }
  .reference-topbar { grid-template-columns:46px minmax(130px,1fr) auto }
  .brand-top { display:none }
  .topbar-controls .top-user,.topbar-controls [data-theme-select] { display:none }
  .top-router-select { max-width:190px }
  .app-shell { display:block }
  .sidebar { position:fixed;left:0;top:var(--topbar);width:min(280px,88vw);transform:translateX(-100%);transition:.2s }
  .sidebar.open { transform:translateX(0);box-shadow:20px 0 45px rgba(0,0,0,.38) }
  .system-grid { grid-template-columns:1fr }
  .content { padding:9px }
  .split-layout { grid-template-columns:1fr }
  .voucher-sheet { grid-template-columns:repeat(2,1fr) }
  .login-shell { grid-template-columns:1fr }.login-hero { display:none }.login-card { min-height:500px }
}
@media (max-width: 560px) {
  .top-router-select { max-width:150px;font-size:10px }
  .topbar-title { font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
  .action-card-grid.four,.stat-grid.four,.stat-grid.three,.form-grid.two,.router-grid,.router-admin-grid,.access-grid,.dashboard-secondary,.about-grid { grid-template-columns:1fr }
  .dashboard-secondary .log-panel { grid-column:auto }
  .voucher-check-button { width:calc(100% - 24px) }
  .classic-toolbar,.toolbar,.section-heading { align-items:stretch;flex-direction:column }
  .search-form,.toolbar-actions { width:100% }.search-form input,.search-form select { flex:1;width:auto;min-width:120px }
  .span-2 { grid-column:auto }
  .access-card { grid-template-columns:1fr }
  .module-intro { grid-template-columns:auto 1fr }.module-intro .status-pill { grid-column:1/-1 }
  .map-branch { width:270px }.map-clients { grid-template-columns:repeat(3,75px);gap:22px }
  .voucher-sheet { grid-template-columns:1fr }
  .detail-grid { grid-template-columns:1fr 1fr }
}
@media print {
  body { background:#fff }
  .reference-topbar,.sidebar,.print-toolbar,.toolbar,.generator-actions,.btn,.alert { display:none!important }
  .app-shell { display:block }.content { padding:0 }.main { width:100% }
  .voucher-sheet { grid-template-columns:repeat(5,1fr);gap:4px }
  .panel,.classic-panel { box-shadow:none;border-color:#bbb;color:#000;background:#fff }
  table { color:#000 } th { color:#000;background:#eee }
}