:root{
  --bg:#0b1220;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --line:rgba(255,255,255,.10);
  --good:#22c55e;
  --warn:#f59e0b;
  --bad:#ef4444;
  --accent:#60a5fa;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
}

body{
  margin:0;
  padding:12px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;
  background: var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
}

@media (min-width: 768px) {
  body {
    padding:24px;
    background: radial-gradient(1000px 500px at 10% 10%, rgba(96,165,250,.22), transparent 60%),
                radial-gradient(800px 500px at 90% 40%, rgba(34,197,94,.14), transparent 55%),
                var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
  }
}

.wrap{
  width:100%;
  max-width:980px;
  margin:0 auto;
}

.header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

@media (min-width: 768px) {
  .header {
    gap:16px;
    margin-bottom:16px;
  }
}

h1{
  font-size:20px;
  letter-spacing:.2px;
  line-height:1.2;
}

@media (min-width: 768px) {
  h1 {
    font-size:22px;
  }
}

.sub{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

@media (min-width: 768px) {
  .sub {
    margin-top:6px;
    font-size:13px;
  }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
  width:100%;
}

@media (min-width: 768px) {
  .card {
    border-radius:16px;
  }
}

.grid{
  display:block;
  width:100%;
}

@media (min-width: 900px){ 
  .grid{
    display:grid;
    grid-template-columns: 380px 1fr;
  } 
}

.panel{
  padding:14px;
  border-bottom:1px solid var(--line);
  width:100%;
}

@media (min-width: 768px) {
  .panel {
    padding:16px;
  }
}

@media (min-width: 900px){ 
  .panel{
    padding:18px;
    border-right:1px solid var(--line);
    border-bottom:none;
  } 
}

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:10px 0 5px;
  font-weight:500;
}

@media (min-width: 768px) {
  label {
    margin:12px 0 6px;
  }
}

input{
  display:block;
  width:100%;
  max-width:100%;
  padding:11px;
  border-radius:8px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.25);
  color:var(--text);
  outline:none;
  font-size:16px;
  font-family:inherit;
}

@media (min-width: 768px) {
  input {
    padding:11px 12px;
    border-radius:12px;
    font-size:14px;
  }
}

input:focus{
  border-color: rgba(96,165,250,.6); 
  box-shadow: 0 0 0 3px rgba(96,165,250,.18);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.row{
  display:block;
  width:100%;
}

.row > div{
  width:100%;
  margin-bottom:0;
}

@media (min-width: 640px) {
  .row {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
  }
  
  .row > div{
    margin-bottom:0;
  }
}

.hint{
  margin-top:10px;
  padding:10px;
  border:1px dashed rgba(255,255,255,.18);
  border-radius:8px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

@media (min-width: 768px) {
  .hint {
    padding:10px 12px;
    border-radius:12px;
    font-size:12px;
  }
}

.btns{
  display:flex;
  flex-direction:column;
  width:100%;
  margin-top:12px;
  gap:8px;
}

@media (min-width: 640px) {
  .btns {
    flex-direction:row;
    gap:10px;
  }
}

button{
  appearance:none;
  border:1px solid var(--line);
  border-radius:8px;
  padding:13px 16px;
  font-size:15px;
  font-weight:500;
  color:var(--text);
  background: rgba(96,165,250,.16);
  cursor:pointer;
  transition: transform .06s ease, background .2s ease;
  font-family:inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  width:100%;
}

@media (min-width: 640px) {
  button {
    flex:1;
  }
}

@media (min-width: 768px) {
  button {
    border-radius:12px;
    padding:10px 12px;
    font-size:14px;
  }
}

button:active{
  transform: scale(0.98);
  background: rgba(96,165,250,.25);
}

.secondary{
  background: rgba(255,255,255,.06);
}

.secondary:active{
  background: rgba(255,255,255,.12);
}

.main{
  padding:14px;
  width:100%;
}

@media (min-width: 768px) {
  .main {
    padding:16px;
  }
}

@media (min-width: 900px) {
  .main {
    padding:18px;
  }
}

.kpis{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  width:100%;
}

@media (min-width: 900px){ 
  .kpis{
    grid-template-columns: repeat(4, 1fr);
    gap:12px;
  } 
}

.kpi{
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius:10px;
  padding:10px;
  min-width:0;
}

@media (min-width: 768px) {
  .kpi {
    border-radius:12px;
  }
}

@media (min-width: 900px) {
  .kpi {
    padding:12px;
    border-radius:14px;
  }
}

.kpi .t{
  font-size:11px;
  color:var(--muted);
  line-height:1.3;
}

@media (min-width: 900px) {
  .kpi .t {
    font-size:12px;
  }
}

.kpi .v{
  font-size:16px;
  margin-top:4px;
  word-break:break-all;
}

@media (min-width: 768px) {
  .kpi .v {
    font-size:17px;
  }
}

@media (min-width: 900px) {
  .kpi .v {
    font-size:18px;
    margin-top:6px;
  }
}

.status{
  margin-top:12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius:10px;
  padding:12px;
  width:100%;
}

@media (min-width: 768px) {
  .status {
    border-radius:12px;
  }
}

@media (min-width: 900px) {
  .status {
    margin-top:14px;
    padding:14px;
    border-radius:14px;
  }
}

.statusline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.statusline > div:first-child{
  flex:1;
  min-width:0;
}

.badge{
  flex-shrink:0;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  white-space:nowrap;
}

@media (min-width: 768px) {
  .badge {
    font-size:12px;
  }
}

.badge.good{
  border-color: rgba(34,197,94,.35); 
  background: rgba(34,197,94,.10);
}

.badge.warn{
  border-color: rgba(245,158,11,.40); 
  background: rgba(245,158,11,.10);
}

.badge.bad{
  border-color: rgba(239,68,68,.40); 
  background: rgba(239,68,68,.10);
}

.barwrap{
  margin-top:12px;
  width:100%;
}

.barlabel{
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:11px;
  margin-bottom:6px;
  gap:8px;
}

@media (min-width: 900px) {
  .barlabel {
    font-size:12px;
  }
}

.bar{
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  overflow:hidden;
  width:100%;
}

@media (min-width: 768px) {
  .bar {
    height:12px;
  }
}

.fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(96,165,250,.9), rgba(34,197,94,.9));
  transition: width .25s ease;
}

.fill.bad{
  background: linear-gradient(90deg, rgba(245,158,11,.95), rgba(239,68,68,.95));
}

.foot{
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

@media (min-width: 900px) {
  .foot {
    margin-top:12px;
    font-size:12px;
  }
}

.mono{
  font-variant-numeric: tabular-nums; 
  font-feature-settings:"tnum" 1;
}

.error{
  margin-top:10px;
  padding:10px;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.3);
  border-radius:8px;
  color:#fecaca;
  font-size:12px;
  display:none;
}

.small{
  font-size:11px;
  color:var(--muted);
}

@media (min-width: 768px) {
  .small {
    font-size:12px;
  }
}

/* Table */
.tablecard{
  margin-top:12px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  border-radius:10px;
  padding:12px;
  width:100%;
}

@media (min-width: 768px) {
  .tablecard {
    border-radius:12px;
  }
}

@media (min-width: 900px) {
  .tablecard {
    margin-top:14px;
    padding:14px;
    border-radius:14px;
  }
}

.tablehead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.tablehead .title{
  font-size:14px;
  margin:0;
}

.tablewrap{
  overflow-x:auto;
  overflow-y:hidden;
  border:1px solid var(--line);
  border-radius:8px;
  -webkit-overflow-scrolling: touch;
  width:100%;
  max-width:100%;
}

@media (min-width: 768px) {
  .tablewrap {
    border-radius:12px;
  }
}

table{
  width:100%;
  border-collapse:collapse;
  min-width:100%;
}

th, td{
  padding:10px 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  font-size:13px;
  white-space:nowrap;
}

@media (min-width: 768px) {
  th, td {
    padding:10px 12px;
  }
}

th{
  color:var(--muted);
  font-weight:600;
  background: rgba(255,255,255,.04);
  font-size:12px;
}

@media (min-width: 768px) {
  th {
    font-size:13px;
  }
}

tbody tr{ 
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

tbody tr:active td{ 
  background: rgba(255,255,255,.08); 
}

.right{ 
  text-align:right; 
}

.muted{ 
  color: var(--muted); 
}

.pillbtn{
  width:auto;
  padding:7px 10px;
  font-size:13px;
  flex-shrink:0;
}

@media (min-width: 768px) {
  .pillbtn {
    padding:8px 10px;
  }
}