:root{
  --bg:#f3f1ea;
  --card:#ffffffcc;
  --card-solid:#ffffff;
  --text:#1e1e1e;
  --muted:#6b6b6b;
  --line:#e7e3d8;
  --shadow:0 12px 30px rgba(0,0,0,.08);
  --radius:22px;

  --green:#7BE18C;
  --blue:#79C7FF;
  --purple:#C58BFF;
  --orange:#FFB65C;
  --teal:#79E0D3;
  --pink:#FF7CC8;

  --btn:#111;
  --btnText:#fff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 20% 0%, #ffffff 0%, var(--bg) 60%),
              radial-gradient(900px 500px at 90% 30%, #ffffff 0%, var(--bg) 55%);
  color:var(--text);
}

a{color:#1d5eff; text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1200px;margin:28px auto;padding:0 18px}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-radius:18px;
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  margin-bottom:18px;
}
.brand{font-weight:700;letter-spacing:.2px}
.nav a{margin-left:16px;color:#262626;font-weight:600}
.nav a:hover{color:#000}

.card{
  background:var(--card);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:22px;
  backdrop-filter: blur(10px);
}

.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
@media (max-width: 980px){ .grid2{grid-template-columns:1fr} }

.h1{font-size:44px;line-height:1.1;margin:0}
.sub{margin:10px 0 0;color:var(--muted);font-weight:500}
.row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.right{display:flex;gap:10px;align-items:center}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:700;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}
.pill .dot{width:8px;height:8px;border-radius:999px;background:#bbb}
.pill.ok .dot{background:var(--green)}
.pill.warn .dot{background:var(--orange)}
.pill.blue .dot{background:var(--blue)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
@media (max-width: 900px){ .kpis{grid-template-columns:repeat(2,1fr)} }
.kpi{
  border-radius:18px;padding:14px 16px;
  display:flex;gap:12px;align-items:center;
  border:1px solid rgba(0,0,0,.06);
  background:linear-gradient(135deg,#fff,rgba(255,255,255,.55));
}
.kpi .bubble{width:16px;height:16px;border-radius:999px;background:#ddd;flex:0 0 auto}
.kpi .num{font-size:22px;font-weight:800;margin:0}
.kpi .lab{font-size:12px;color:var(--muted);font-weight:700;margin:0}

.kpi.green{background:linear-gradient(135deg, rgba(123,225,140,.35), rgba(255,255,255,.8))}
.kpi.blue{background:linear-gradient(135deg, rgba(121,199,255,.35), rgba(255,255,255,.8))}
.kpi.purple{background:linear-gradient(135deg, rgba(197,139,255,.35), rgba(255,255,255,.8))}
.kpi.orange{background:linear-gradient(135deg, rgba(255,182,92,.35), rgba(255,255,255,.8))}
.kpi.green .bubble{background:var(--green)}
.kpi.blue .bubble{background:var(--blue)}
.kpi.purple .bubble{background:var(--purple)}
.kpi.orange .bubble{background:var(--orange)}

.sectionTitle{font-size:22px;margin:0 0 12px;font-weight:800}
.muted{color:var(--muted)}
.small{font-size:12px}

.tableWrap{overflow:auto;border-radius:18px;border:1px solid rgba(0,0,0,.06);background:#fff}
table{width:100%;border-collapse:collapse;table-layout:fixed;min-width:820px}
th,td{padding:12px 12px;border-bottom:1px solid #eee;vertical-align:middle}
th{font-size:12px;color:var(--muted);text-transform:none;letter-spacing:.2px;font-weight:800}
tbody tr:hover{background:#faf9f6}
td strong{font-weight:800}

.colThumb{width:74px}
.thumb{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,#f2f2f2,#dedede);
  border:1px solid rgba(0,0,0,.06);
}
.colStatus{width:120px}
.colNums{width:140px}
.colBtns{width:160px}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:800;
  border:1px solid rgba(0,0,0,.08);
}
.badge.online{background:rgba(123,225,140,.35)}
.badge.finished{background:rgba(121,199,255,.35)}

.btn{
  border:0;border-radius:999px;
  padding:10px 14px;
  background:var(--btn);color:var(--btnText);
  font-weight:800;cursor:pointer;
}
.btn:hover{filter:brightness(.95)}
.btn.light{background:#fff;color:#111;border:1px solid rgba(0,0,0,.1)}
.btn.ghost{background:transparent;color:#111;border:1px solid rgba(0,0,0,.1)}
.btn.small{padding:8px 12px;font-size:12px}
.btn.tiny{padding:6px 10px;font-size:12px}

.input, select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.1);
  background:rgba(255,255,255,.85);
  font-weight:600;
}
.formRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 760px){ .formRow{grid-template-columns:1fr} }

.panel{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  padding:18px;
}

.chartsGrid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-top:18px}
@media (max-width: 980px){ .chartsGrid{grid-template-columns:1fr} }

.chartCard{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--radius);
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  padding:16px;
}
.chartCard canvas{width:100% !important;height:260px !important}

.miniCharts{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width: 980px){ .miniCharts{grid-template-columns:1fr} }
.chartCard.small canvas{height:220px !important}

.footer{margin:22px 0;color:var(--muted);text-align:center;font-size:12px}

.backRow{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.backRow .title{font-size:26px;font-weight:900;margin:0}