body { padding-top: 34px; overflow: hidden; }
.admin-shell { height: calc(100vh - 34px); display: grid; grid-template-columns: 236px 1fr; }
.sidebar { display: flex; flex-direction: column; padding: 24px 15px 18px; color: #eaf1f6; background: #12324a; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 24px; }
.sidebar .brand-mark { width: 38px; height: 38px; color: var(--navy); background: white; }
.sidebar .brand-sub { color: rgba(255,255,255,.48); }
.sidebar-nav { display: grid; gap: 5px; }
.sidebar-nav button { display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 0 13px; border: 0; border-radius: 10px; color: rgba(255,255,255,.66); background: transparent; font-size: 13px; text-align: left; }
.sidebar-nav button span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #8ab7d4; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 800; }
.sidebar-nav button:hover { color: white; background: rgba(255,255,255,.06); }
.sidebar-nav button.active { color: white; background: #245e85; box-shadow: inset 3px 0 #76b4dc; }
.sidebar-nav button.active span { color: white; background: rgba(255,255,255,.1); }
.sidebar-foot { margin-top: auto; display: grid; gap: 15px; padding: 0 5px; }
.mode-card { display: grid; gap: 4px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.04); }
.mode-card span, .mode-card small { color: rgba(255,255,255,.48); font-size: 10px; }
.mode-card strong { color: #f5c66e; font-size: 12px; letter-spacing: .12em; }
.sidebar-foot a { color: rgba(255,255,255,.55); font-size: 11px; text-decoration: none; }

.admin-main { min-width: 0; overflow: auto; background: #f4f8fb; }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 86px; padding: 16px 32px; background: rgba(244,248,251,.95); border-bottom: 1px solid #dce6ed; backdrop-filter: blur(10px); }
.crumb { color: #82919c; font-size: 10px; }.crumb b { color: #4b6070; }
.topbar h1 { margin: 5px 0 0; font-size: 23px; letter-spacing: -.02em; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.server-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #d2e2dc; border-radius: 999px; color: #32745c; background: #f2faf6; font-size: 10px; font-weight: 700; }
.server-chip i { width: 7px; height: 7px; border-radius: 50%; background: #22a06b; box-shadow: 0 0 0 3px rgba(34,160,107,.13); }
.avatar { width: 35px; height: 35px; border: 0; border-radius: 10px; color: white; background: var(--navy-2); font-weight: 800; }
.account-button { min-height: 35px; padding: 0 12px; border: 1px solid #cbdbe5; border-radius: 9px; color: #315b73; background: #fff; font-size: 10px; font-weight: 700; }
.account-button:hover { border-color: #8bb7d2; background: #f7fbfd; }

.page { display: none; padding: 27px 32px 48px; }.page.active { display: block; }
.section-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.section-intro h2 { margin: 0 0 6px; font-size: 18px; }.section-intro p { margin: 0; color: var(--muted); font-size: 11px; }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(135px,1fr)); gap: 13px; }
.metric-card { position: relative; overflow: hidden; min-height: 126px; padding: 17px; border: 1px solid #dce6ed; border-radius: 14px; background: white; }
.metric-card::after { content: ""; position: absolute; right: -25px; bottom: -36px; width: 90px; height: 90px; border-radius: 50%; background: var(--blue-soft); }
.metric-card small { color: var(--muted); font-size: 10px; font-weight: 700; }.metric-card strong { display: block; margin: 13px 0 8px; font-size: 27px; }.metric-card span { position: relative; z-index: 1; color: #75909f; font-size: 9px; }
.dashboard-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 15px; margin-top: 15px; }
.card { border: 1px solid #dce6ed; border-radius: 15px; background: white; box-shadow: 0 5px 16px rgba(18,50,74,.035); }
.card-head { display: flex; justify-content: space-between; padding: 17px 18px 12px; border-bottom: 1px solid #eef2f4; }.card h3 { margin: 0 0 5px; font-size: 14px; }.card-head p { margin: 0; color: var(--muted); font-size: 10px; }
.status-bars { display: grid; gap: 13px; padding: 19px; }.status-bar { display: grid; grid-template-columns: 80px 1fr 25px; align-items: center; gap: 10px; font-size: 10px; }.status-bar > span { color: #4b6170; }.bar-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e9eff3; }.bar-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2c769f,#63a9ce); }
.timeline { max-height: 270px; overflow: auto; padding: 10px 18px 15px; }.timeline-item { position: relative; display: grid; grid-template-columns: 10px 1fr auto; gap: 11px; padding: 10px 0; border-bottom: 1px solid #f0f3f5; }.timeline-item > i { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #58a1ca; }.timeline-item strong { display: block; font-size: 11px; }.timeline-item p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.timeline-item time { color: #8b9aa4; font-size: 8px; }
.safety-strip { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding: 15px 17px; border: 1px solid #efd6a5; border-radius: 13px; background: #fff9ed; }.safety-strip strong, .safety-strip span { display: block; }.safety-strip strong { margin-bottom: 4px; font-size: 12px; }.safety-strip div span { color: #7d705d; font-size: 10px; }

.table-card { overflow: hidden; }.table-tools, .module-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; border-bottom: 1px solid #e8eef2; }.module-toolbar { margin-bottom: 13px; padding: 12px; border: 1px solid #dce6ed; border-radius: 13px; background: white; }.compact { min-height: 37px; width: auto; min-width: 210px; padding-top: 7px; padding-bottom: 7px; font-size: 11px; }
.tool-group { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.selection-count { min-width: 60px; color: var(--muted); font-size: 10px; }
.check-column { width: 42px; text-align: center; }
.check-column input, td > input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--navy-2); }
.legacy-code { color: #9a6b22; }
.code-cell { display: flex; align-items: center; gap: 8px; min-width: 210px; }
.code-cell strong { white-space: nowrap; }
.code-cell .btn { flex: 0 0 auto; }
.table-scroll { overflow: auto; } table { width: 100%; border-collapse: collapse; } th { padding: 11px 14px; color: #607583; background: #f7fafc; border-bottom: 1px solid #dce6ed; font-size: 10px; text-align: left; white-space: nowrap; } td { padding: 12px 14px; border-bottom: 1px solid #edf1f4; color: #334957; font-size: 10px; line-height: 1.55; vertical-align: middle; } tr:last-child td { border-bottom: 0; } tbody tr:hover { background: #fbfdfe; } td strong { display: block; color: var(--ink); font-size: 11px; } td small { color: var(--muted); font-size: 9px; }.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.code-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 14px; }.mini-stat { padding: 13px 15px; border: 1px solid #dce6ed; border-radius: 12px; background: white; }.mini-stat span { color: var(--muted); font-size: 9px; }.mini-stat strong { display: block; margin-top: 6px; font-size: 19px; }
.plan-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.plan-card { padding: 20px; border: 1px solid #dce6ed; border-radius: 15px; background: white; }.plan-card header { display: flex; justify-content: space-between; align-items: flex-start; }.plan-card h3 { margin: 0; }.plan-key { color: #7d8d98; font: 9px Consolas, monospace; }.plan-specs { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 18px 0; }.plan-specs div { padding: 10px; border-radius: 9px; background: #f5f8fa; text-align: center; }.plan-specs strong, .plan-specs small { display: block; }.plan-specs strong { font-size: 14px; }.plan-specs small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.design-note { margin-top: 15px; padding: 21px; }.design-note p { margin: 14px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }.design-flow { display: flex; align-items: center; gap: 12px; margin-top: 16px; }.design-flow span { padding: 9px 13px; border: 1px solid #cddde7; border-radius: 9px; color: #315b73; background: #f3f8fb; font-size: 10px; font-weight: 700; }.design-flow i { color: #8fa2ae; font-style: normal; }

.module-list { display: grid; grid-template-columns: repeat(2,minmax(300px,1fr)); gap: 12px; }.module-item { display: grid; grid-template-columns: 44px 1fr auto; gap: 13px; padding: 16px; border: 1px solid #dce6ed; border-radius: 14px; background: white; }.module-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #226186; background: var(--blue-soft); font-weight: 800; }.module-info h3 { margin: 1px 0 5px; font-size: 13px; }.module-info code { color: #768995; font-size: 9px; }.module-info p { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.module-side { min-width: 112px; display: grid; justify-items: end; align-content: space-between; gap: 12px; }.module-side small { color: var(--muted); font-size: 8px; }
.release-pipeline { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; align-items: center; gap: 8px; margin-bottom: 15px; }.release-pipeline div { display: grid; justify-items: center; gap: 3px; padding: 15px 8px; border: 1px solid #dce6ed; border-radius: 12px; background: white; }.release-pipeline span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy-2); font-size: 9px; font-weight: 800; }.release-pipeline strong { font-size: 11px; }.release-pipeline small { color: var(--muted); font-size: 8px; }.release-pipeline i { height: 2px; background: #c9d8e1; }

.login-overlay { position: fixed; z-index: 80; inset: 34px 0 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 15% 15%, #2a6e97 0, #12324a 38%, #0b2232 100%); }.login-card { width: min(420px,100%); display: grid; gap: 16px; padding: 30px; border-radius: 20px; background: white; box-shadow: 0 30px 80px rgba(0,0,0,.3); }.login-brand { display: flex; align-items: center; gap: 12px; }.login-brand strong, .login-brand span { display: block; }.login-brand span { margin-top: 3px; color: var(--muted); font-size: 10px; }.login-card h2 { margin: 10px 0 -10px; }.login-card > p { margin: 0 0 3px; color: var(--muted); font-size: 11px; }.login-card > a { color: var(--blue); font-size: 10px; text-align: center; text-decoration: none; }.wide { width: 100%; }

.modal-backdrop { position: fixed; z-index: 70; inset: 34px 0 0; display: grid; place-items: center; padding: 20px; background: rgba(9,27,40,.58); backdrop-filter: blur(3px); }.modal { width: min(540px,100%); max-height: calc(100vh - 80px); overflow: auto; padding: 22px; border-radius: 17px; background: white; box-shadow: 0 25px 70px rgba(0,0,0,.25); }.modal-wide { width: min(680px,100%); }.modal-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }.modal-head h3 { margin: 0 0 5px; }.modal-head p { margin: 0; color: var(--muted); font-size: 10px; }.modal-head > button { width: 31px; height: 31px; border: 0; border-radius: 8px; color: #657985; background: #edf2f5; font-size: 18px; }.modal form { display: grid; gap: 15px; }.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 5px; }.codes-result { min-height: 260px; font: 12px/1.8 Consolas, monospace; }

@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(3,1fr)}.module-list{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.plan-grid{grid-template-columns:1fr}}
@media(max-width:760px){body{overflow:auto}.admin-shell{height:auto;display:block}.sidebar{position:static}.sidebar-nav{grid-template-columns:repeat(2,1fr)}.sidebar-foot{display:none}.admin-main{overflow:visible}.topbar{top:34px;padding:14px 18px}.page{padding:20px 16px}.metric-grid{grid-template-columns:repeat(2,1fr)}.section-intro{align-items:flex-start}.server-chip{display:none}.release-pipeline{grid-template-columns:1fr 1fr}.release-pipeline i{display:none}.table-tools{align-items:flex-start;flex-direction:column}.tool-group{width:100%}}