:root {
  color-scheme: dark;
  --bg: #101014;
  --surface: #17171d;
  --surface-2: #1d1d25;
  --surface-3: #24242e;
  --line: #30303b;
  --line-soft: #272731;
  --text: #f2f1f5;
  --muted: #a2a0ad;
  --muted-2: #777582;
  --accent: #df4d91;
  --accent-strong: #f066a7;
  --accent-soft: rgba(223, 77, 145, .13);
  --green: #58c69c;
  --green-soft: rgba(88, 198, 156, .12);
  --yellow: #e6b85c;
  --yellow-soft: rgba(230, 184, 92, .12);
  --red: #e57878;
  --red-soft: rgba(229, 120, 120, .12);
  --blue: #83a9e8;
  --blue-soft: rgba(131, 169, 232, .12);
  --shadow: 0 18px 60px rgba(0,0,0,.38);
  --radius: 13px;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-width: 320px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
.boot-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 13px; color: var(--muted); }
.boot-mark { width: 48px; height: 48px; border-radius: 14px; display:grid; place-items:center; background: var(--accent); color:white; font-weight:800; font-size:23px; box-shadow: 0 8px 28px rgba(223,77,145,.22); }
.boot-label { font-size: 13px; letter-spacing: .04em; }
.boot-loader { width: 68px; height: 2px; background: var(--line); overflow:hidden; position:relative; border-radius:8px; }
.boot-loader:after { content:""; position:absolute; inset:0 auto 0 0; width:35%; background:var(--accent); animation:load 1s ease-in-out infinite; }
@keyframes load { from { transform:translateX(-110%); } to { transform:translateX(300%); } }
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; background:#131318; border-right:1px solid var(--line-soft); display:flex; flex-direction:column; padding:21px 14px 15px; z-index:20; }
.brand { display:flex; align-items:center; gap:11px; padding:0 9px 22px; border-bottom:1px solid var(--line-soft); }
.brand-mark { width:35px; height:35px; border-radius:11px; display:grid; place-items:center; background:linear-gradient(145deg,#ef66a5,#b92e70); color:#fff; font-size:18px; font-weight:800; box-shadow:0 7px 18px rgba(223,77,145,.17); }
.brand-title { font-size:15px; font-weight:700; letter-spacing:.01em; }
.brand-subtitle { font-size:10px; color:var(--muted-2); margin-top:3px; letter-spacing:.13em; text-transform:uppercase; }
.nav-scroll { padding:20px 0 12px; overflow:auto; flex:1; }
.nav-group { margin-bottom:20px; }
.nav-label { color:#6f6d79; font-size:9px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; padding:0 11px 8px; }
.nav-item { border:0; color:#a7a5b0; background:transparent; width:100%; display:flex; align-items:center; gap:11px; padding:10px 11px; margin:2px 0; border-radius:9px; text-align:left; font-size:12px; font-weight:550; transition:background .15s,color .15s; }
.nav-item:hover { background:#202027; color:#eee; }
.nav-item.active { color:#fff; background:var(--accent-soft); box-shadow:inset 2px 0 var(--accent); }
.nav-item.active .nav-icon { color:var(--accent-strong); }
.nav-icon { width:17px; height:17px; display:inline-flex; color:#777582; flex:0 0 auto; }
.nav-icon svg { width:17px; height:17px; stroke:currentColor; }
.sidebar-footer { border-top:1px solid var(--line-soft); padding:14px 6px 0; }
.environment { display:flex; align-items:center; justify-content:space-between; padding:7px 8px; background:#1b1b22; border-radius:8px; color:var(--muted); font-size:10px; }
.env-dot { width:6px; height:6px; background:var(--yellow); border-radius:50%; display:inline-block; margin-right:7px; }
.main-area { min-width:0; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 34px; border-bottom:1px solid var(--line-soft); background:rgba(16,16,20,.92); position:sticky; top:0; z-index:15; backdrop-filter:blur(16px); }
.breadcrumb { color:var(--muted-2); font-size:11px; display:flex; gap:8px; align-items:center; }
.breadcrumb strong { color:#dcdbe2; font-weight:600; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.api-status { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }
.api-status .dot { width:7px; height:7px; background:var(--green); border-radius:50%; box-shadow:0 0 0 3px rgba(88,198,156,.1); }
.admin-chip { display:flex; align-items:center; gap:9px; border-left:1px solid var(--line); padding-left:15px; }
.avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#29232c; color:#f39ac1; font-size:11px; font-weight:700; border:1px solid #483144; }
.admin-name { font-size:11px; font-weight:600; }
.admin-role { color:var(--muted-2); font-size:9px; margin-top:2px; }
.content { max-width:1600px; margin:0 auto; padding:31px 34px 50px; }
.page-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:25px; }
.eyebrow { color:var(--accent-strong); text-transform:uppercase; letter-spacing:.15em; font-size:9px; font-weight:750; margin-bottom:8px; }
h1 { margin:0; font-size:25px; letter-spacing:-.035em; font-weight:680; }
.page-desc { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.55; max-width:690px; }
.head-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:35px; padding:0 13px; border:1px solid var(--line); border-radius:8px; background:#22222a; color:#e9e8ed; font-size:11px; font-weight:650; transition:.15s; white-space:nowrap; }
.btn:hover { background:#2b2b35; border-color:#474653; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); }
.btn.ghost { background:transparent; }
.btn.danger { border-color:rgba(229,120,120,.35); color:#efaaaa; background:var(--red-soft); }
.btn.danger:hover { background:rgba(229,120,120,.2); }
.btn.small { min-height:28px; padding:0 9px; font-size:10px; border-radius:7px; }
.btn.icon-btn { min-width:34px; padding:0; }
.btn svg { width:14px; height:14px; stroke:currentColor; }
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; margin-bottom:19px; }
.stat-card { background:linear-gradient(145deg,#1b1b22,#17171d); border:1px solid var(--line-soft); border-radius:var(--radius); padding:17px 18px; min-height:113px; position:relative; overflow:hidden; }
.stat-card:after { content:""; width:90px; height:90px; border-radius:50%; position:absolute; right:-35px; top:-43px; background:var(--accent-soft); filter:blur(2px); }
.stat-label { color:var(--muted); font-size:10px; font-weight:600; }
.stat-value { font-size:26px; letter-spacing:-.04em; font-weight:700; margin-top:12px; font-variant-numeric:tabular-nums; }
.stat-meta { color:var(--muted-2); font-size:9px; margin-top:5px; }
.panel { background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.panel + .panel { margin-top:16px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:55px; padding:0 17px; border-bottom:1px solid var(--line-soft); }
.panel-title { font-size:12px; font-weight:650; }
.panel-note { color:var(--muted-2); font-size:9px; margin-top:3px; }
.panel-body { padding:16px 17px; }
.panel-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.8fr); gap:15px; }
.toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:13px 15px; border-bottom:1px solid var(--line-soft); }
.searchbox { position:relative; min-width:210px; flex:1; max-width:330px; }
.searchbox input { padding-left:32px; }
.search-icon { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--muted-2); font-size:13px; }
.field, .select, .textarea { width:100%; color:var(--text); background:#111116; border:1px solid #373742; outline:none; border-radius:8px; min-height:36px; padding:8px 10px; font-size:11px; transition:border .15s,box-shadow .15s; }
.field:focus, .select:focus, .textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(223,77,145,.12); }
.field::placeholder, .textarea::placeholder { color:#666572; }
.select { padding-right:28px; }
.textarea { min-height:92px; resize:vertical; line-height:1.5; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.form-grid .full { grid-column:1/-1; }
.field-wrap { display:flex; flex-direction:column; gap:6px; }
.field-label { color:#c4c2cc; font-size:10px; font-weight:650; }
.field-help { color:var(--muted-2); font-size:9px; line-height:1.5; }
.checkbox-row { display:flex; align-items:flex-start; gap:9px; color:#c8c6d0; font-size:10px; line-height:1.5; }
.checkbox-row input { accent-color:var(--accent); margin-top:1px; }
.table-wrap { width:100%; overflow:auto; }
table { border-collapse:collapse; width:100%; min-width:720px; }
th { color:#84828f; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; text-align:left; padding:12px 15px; background:#191920; white-space:nowrap; }
td { color:#d4d2db; font-size:10px; padding:13px 15px; border-top:1px solid #272731; vertical-align:middle; }
tbody tr:hover { background:#1c1c24; }
.cell-title { color:#eeedf2; font-weight:650; font-size:10px; }
.cell-sub { color:var(--muted-2); font-size:9px; margin-top:4px; max-width:280px; overflow-wrap:anywhere; }
.mono { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:9px; color:#aaa8b4; overflow-wrap:anywhere; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:30px; font-size:9px; font-weight:700; text-transform:capitalize; white-space:nowrap; background:#2a2a33; color:#b9b7c1; }
.pill:before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.pill.active,.pill.online,.pill.completed { color:var(--green); background:var(--green-soft); }
.pill.suspended,.pill.pending,.pill.previewed,.pill.approved { color:var(--yellow); background:var(--yellow-soft); }
.pill.revoked,.pill.disabled,.pill.retired,.pill.failed { color:var(--red); background:var(--red-soft); }
.pill.offline,.pill.closed,.pill.archived,.pill.expired,.pill.rolled_back { color:#aaa8b4; background:#292932; }
.pill.blocked,.pill.running { color:var(--blue); background:var(--blue-soft); }
.row-actions { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
.action-select { min-height:28px; max-width:145px; background:#15151b; border:1px solid var(--line); color:#d7d5dd; border-radius:7px; font-size:9px; padding:4px 8px; }
.empty-state { padding:44px 18px; text-align:center; color:var(--muted); }
.empty-icon { width:38px; height:38px; border-radius:12px; background:#25232b; display:grid; place-items:center; margin:0 auto 12px; color:#d67aa7; font-size:17px; }
.empty-title { color:#e4e2ea; font-size:12px; font-weight:650; }
.empty-copy { font-size:10px; margin:6px auto 0; max-width:330px; line-height:1.55; color:var(--muted-2); }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px solid var(--line-soft); padding:11px 15px; color:var(--muted-2); font-size:9px; }
.pagination-actions { display:flex; gap:6px; }
.notice { border:1px solid rgba(230,184,92,.22); background:var(--yellow-soft); color:#d6c08e; border-radius:9px; padding:11px 13px; font-size:10px; line-height:1.55; }
.notice.info { border-color:rgba(131,169,232,.23); background:var(--blue-soft); color:#b6c9ed; }
.notice.success { border-color:rgba(88,198,156,.23); background:var(--green-soft); color:#a3dfc6; }
.notice.danger { border-color:rgba(229,120,120,.23); background:var(--red-soft); color:#e6aaaa; }
.split-list { display:grid; gap:9px; }
.split-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.split-row:last-child { border-bottom:0; }
.split-row-label { color:var(--muted); font-size:10px; }
.split-row-value { color:#eeedf2; font-size:11px; font-weight:650; font-variant-numeric:tabular-nums; }
.settings-list { display:grid; gap:0; }
.setting-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(180px,250px); align-items:center; gap:20px; padding:15px 0; border-bottom:1px solid var(--line-soft); }
.setting-item:last-child { border-bottom:0; }
.setting-title { color:#e4e2e9; font-size:11px; font-weight:650; }
.setting-desc { color:var(--muted-2); font-size:9px; margin-top:5px; line-height:1.5; }
.setting-control { display:flex; gap:8px; align-items:center; }
.modal-backdrop { position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.68); display:grid; place-items:center; padding:20px; backdrop-filter:blur(5px); }
.modal { width:min(630px,100%); max-height:min(88vh,850px); display:flex; flex-direction:column; background:#1b1b22; border:1px solid #3a3944; border-radius:15px; box-shadow:var(--shadow); overflow:hidden; }
.modal.wide { width:min(840px,100%); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 20px; border-bottom:1px solid var(--line); }
.modal-title { font-size:14px; font-weight:700; }
.modal-close { width:30px; height:30px; border:0; background:#2a2a33; border-radius:8px; color:#aaa8b3; font-size:18px; }
.modal-body { padding:19px 20px; overflow:auto; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line); background:#18181e; }
.key-box { background:#111116; border:1px solid rgba(223,77,145,.4); border-radius:10px; padding:13px; margin:12px 0; }
.key-value { color:#f4a8ca; font:600 13px ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; letter-spacing:.03em; }
.key-note { color:var(--muted-2); font-size:9px; line-height:1.5; margin-top:8px; }
.toast { min-width:250px; max-width:370px; padding:12px 14px; background:#23232b; border:1px solid #41404b; color:#f1eff4; border-radius:10px; box-shadow:var(--shadow); font-size:10px; display:flex; gap:9px; align-items:flex-start; animation:toastIn .18s ease-out; }
.toast.success { border-left:3px solid var(--green); }
.toast.error { border-left:3px solid var(--red); }
.toast.info { border-left:3px solid var(--accent); }
#toast-stack { position:fixed; z-index:200; right:22px; bottom:22px; display:grid; gap:8px; }
@keyframes toastIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
.skeleton { background:linear-gradient(90deg,#22222a,#2b2b35,#22222a); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:7px; height:13px; }
@keyframes shimmer { to { background-position:-200% 0; } }
.access-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(ellipse at 50% 15%,rgba(223,77,145,.1),transparent 42%),var(--bg); }
.access-card { width:min(540px,100%); background:var(--surface); border:1px solid var(--line); border-radius:17px; padding:30px; box-shadow:var(--shadow); }
.access-card h1 { font-size:21px; }
.access-card p { color:var(--muted); font-size:11px; line-height:1.65; }
.access-card .brand { padding:0 0 18px; border-bottom:0; }
.access-card .field-wrap { margin:15px 0; }
.access-card .btn { margin-top:10px; }
.permission-note { padding:8px 10px; border-radius:8px; background:#202027; color:#9b99a5; font-size:9px; line-height:1.5; }
.json-preview { max-height:280px; overflow:auto; background:#101015; border:1px solid var(--line-soft); padding:12px; border-radius:8px; color:#b8b5c2; font:9px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre-wrap; overflow-wrap:anywhere; }
.mobile-menu { display:none; }
@media (max-width:1050px) {
  .app-shell { grid-template-columns:218px minmax(0,1fr); }
  .content { padding:25px 23px 40px; }
  .topbar { padding:0 23px; }
  .panel-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .app-shell { display:block; }
  .sidebar { position:fixed; left:-265px; width:248px; transition:left .2s; box-shadow:var(--shadow); }
  .sidebar.open { left:0; }
  .main-area { width:100%; }
  .topbar { min-height:62px; padding:0 15px; }
  .content { padding:23px 15px 35px; }
  .mobile-menu { display:inline-flex; }
  .breadcrumb { display:none; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-head { flex-direction:column; }
  .head-actions { width:100%; }
  .setting-item { grid-template-columns:1fr; gap:10px; }
  .admin-name-wrap { display:none; }
  .form-grid { grid-template-columns:1fr; }
  .form-grid .full { grid-column:auto; }
}