:root{
  --bg:#050816;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.10);
  --text:#e8eefc;
  --muted:rgba(232,238,252,.65);
  --accent:#7c3aed;
  --accent2:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --shadow: 0 20px 80px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%; width:100%; overflow-x:hidden}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 700px at 20% 10%, rgba(124,58,237,.35), transparent 60%),
              radial-gradient(1000px 600px at 80% 40%, rgba(34,197,94,.18), transparent 55%),
              radial-gradient(800px 500px at 60% 90%, rgba(59,130,246,.15), transparent 55%),
              var(--bg);
  color:var(--text);
}

a{color:inherit}

.container{max-width:1100px;margin:0 auto;padding:18px 16px 44px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:40px;height:40px;border-radius:14px;
  background: linear-gradient(135deg, rgba(124,58,237,.9), rgba(34,197,94,.85));
  box-shadow: var(--shadow);
  position:relative;
  overflow:hidden;
}
.logoImg{width:100%;height:100%;object-fit:contain;display:block;position:relative;z-index:2;padding:4px}
.logo:before{content:"";position:absolute;inset:-40px;transform:rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation: shine 4s linear infinite;
  z-index:3;
  pointer-events:none;
}
@keyframes shine{0%{left:-60%}100%{left:140%}}

.brand-title{display:flex;flex-direction:column;line-height:1.1}
.brand-title .t{font-weight:800;font-size:18px;letter-spacing:.2px}
.brand-title .s{color:var(--muted);font-size:12px}

.topbarActions{flex-wrap:nowrap;white-space:nowrap}

.btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.iconBtn{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.iconBtn svg{display:block}
.btnWithIcon{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btnWithIcon svg{flex:0 0 auto}
.btnWithIcon span{line-height:1;white-space:nowrap}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn:hover{background: rgba(255,255,255,.10)}
.btn:active{transform:translateY(1px)}
.btnActive{background: rgba(124,58,237,.28); border-color: rgba(124,58,237,.55)}

.btnPrimary{background: rgba(124,58,237,.25);border-color: rgba(124,58,237,.35)}
.btnPrimary:hover{background: rgba(124,58,237,.35)}
.btnSuccess{background: rgba(34,197,94,.22);border-color: rgba(34,197,94,.35)}
.btnSuccess:hover{background: rgba(34,197,94,.34)}
.btnDanger{background: rgba(239,68,68,.20);border-color: rgba(239,68,68,.32)}
.btnDanger:hover{background: rgba(239,68,68,.32)}

.card{
  border:1px solid var(--stroke);
  background: var(--panel);
  border-radius:18px;
  box-shadow: var(--shadow);
}
.cardHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px 16px 14px}
.cardTitle{font-weight:800;font-size:14px;letter-spacing:.2px;display:flex;align-items:center;gap:8px}
.cardTitle > span{min-width:0}
.cardTitleValue{color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.3px;white-space:nowrap;margin-left:auto;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.cardSub{color:var(--muted);font-size:12px}
.ico{display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.cardBody{padding:14px}

.statusLine{display:inline-flex;align-items:center;gap:8px}
.statusLine{white-space:nowrap}
.statusOn{color:rgba(34,197,94,.95)}
.statusOff{color:rgba(232,238,252,.75)}
.statusIcon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}
.statusIcon svg{display:block}

.detailMeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}

.grid3{display:grid;grid-template-columns:1fr;gap:12px}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}

/* Allow children to shrink in CSS grid (prevents overflow on mobile) */
.grid2 > *, .grid3 > *{min-width:0}

@media (min-width: 820px){
  .container{padding:28px 18px 60px}
  .grid3{grid-template-columns:repeat(3,1fr)}
  .grid2{grid-template-columns:repeat(2,1fr)}
}

.pills{display:flex;gap:8px;flex-wrap:wrap}
.pillsNoWrap{flex-wrap:nowrap}
.pill{
  border:1px solid var(--stroke);
  background: var(--panel2);
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--muted);
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.detailMeta .pill{font-size:11px;padding:6px 10px}

.kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;color:var(--muted);min-width:0;align-items:flex-start}
.kv b{color:var(--text)}
.kv span{min-width:0;flex:1;overflow-wrap:anywhere;word-break:break-word;text-align:right}

.list{display:flex;flex-direction:column;gap:10px}
.item{
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
}
.itemLink{cursor:pointer;transition: transform .12s ease, background .12s ease, border-color .12s ease}
.itemLink:hover{background: rgba(0,0,0,.24)}
.itemLink:active{transform: translateY(1px)}
.itemLink:focus{outline: none; border-color: rgba(124,58,237,.5)}
.itemTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.itemTop > div:first-child{flex:1;min-width:0}
.itemTitle{font-weight:800;font-size:13px}
.badge{font-size:11px;font-weight:800;border-radius:999px;padding:6px 10px;border:1px solid var(--stroke);background:rgba(255,255,255,.06);flex:0 0 auto}
.badgeLong{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.14)}
.badgeShort{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.14)}

.pnlPlus{color: rgba(34,197,94,.95)}
.pnlMinus{color: rgba(239,68,68,.95)}

.rows{display:flex;flex-direction:column;gap:10px}
.row{border:1px solid var(--stroke);background:rgba(255,255,255,.04);border-radius:16px;padding:12px}
.rowTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rowTop > div:first-child{flex:1;min-width:0}
.rowTitle{font-weight:800;font-size:13px;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.rowSub{color:var(--muted);font-size:12px;overflow-wrap:anywhere;word-break:break-word}
.rowGrid{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
@media (min-width: 820px){.rowGrid{grid-template-columns:repeat(2,1fr)}}

.rowGrid > *{min-width:0}
.rowTop .pills{flex:0 0 auto;min-width:0}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;overflow-wrap:anywhere;word-break:break-word;}
.pre{
  max-height:260px;overflow:auto;
  background: rgba(0,0,0,.35);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
  font-size:11px;
  color: rgba(232,238,252,.88);
  max-width:100%;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.notice{color:var(--muted);font-size:12px}

.controlRow{border:1px solid var(--stroke);background:rgba(0,0,0,.14);border-radius:16px;padding:12px}
.controlRowTop{display:flex;align-items:center;justify-content:space-between;gap:10px}
.controlRowTop > *{min-width:0}

.cardStats{background: linear-gradient(135deg, rgba(124,58,237,.20), rgba(34,197,94,.10))}
.statsGrid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width: 520px){.statsGrid{grid-template-columns:repeat(2,1fr)}}
.statCard{border:1px solid var(--stroke);background:rgba(0,0,0,.18);border-radius:16px;padding:12px;min-width:0}
.statLabel{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.2px}
.statValue{font-size:16px;font-weight:900;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statNeutral{border-color: rgba(232,238,252,.14)}
.statGood{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10)}
.statWarn{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10)}
.statBad{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10)}

.field{border:1px solid var(--stroke);background:rgba(255,255,255,.04);border-radius:16px;padding:12px}
.fieldTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fieldTitle{font-weight:800;font-size:13px}
.fieldDesc{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.35}
.fieldMeta{margin-top:10px}
.fieldControls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.input,.textarea,.select{width:100%;max-width:100%;border:1px solid var(--stroke);background:rgba(0,0,0,.25);color:var(--text);border-radius:14px;padding:10px 12px;font-size:13px;outline:none}
.textarea{min-height:110px;resize:vertical}
.input:focus,.textarea:focus,.select:focus{border-color:rgba(124,58,237,.65)}

.hidden{display:none !important}