@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800;900&display=swap");
:root{
  --bg:#0b1220;
  --card: rgba(15,23,42,.78);
  --border: rgba(148,163,184,.18);
  --muted: rgba(226,232,240,.72);
  --text:#eef5ff;
  --good:#22c55e;
  --bad:#ef4444;
  --blue: rgba(59,130,246,.20);
}
.etd-root, .etd-root *{box-sizing:border-box}
.etd-root{
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
}
.etd-page{
  min-height:92vh;
  padding: 26px 14px 60px;
  background:
    radial-gradient(1000px 700px at 10% 0%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(900px 650px at 90% 10%, rgba(34,197,94,.18), transparent 55%),
    radial-gradient(900px 600px at 50% 100%, rgba(168,85,247,.12), transparent 55%),
    var(--bg);
}
.etd-wrap{max-width:1200px;margin:0 auto}
.etd-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.etd-title{margin:0;font-size:30px;font-weight:950;letter-spacing:-.02em;color:#f4f7ff}
.etd-sub{margin:8px 0 0;color:var(--muted);font-weight:650;line-height:1.5}
.etd-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.etd-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;border:1px solid var(--border);background:rgba(2,6,23,.28);color:rgba(226,232,240,.78);font-size:12px;font-weight:900;white-space:nowrap}
.etd-card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.28)}
.etd-section{padding:18px}
.etd-hr{height:1px;background:rgba(148,163,184,.16);margin:14px 0}
.etd-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}
.etd-row{display:flex;gap:12px;flex-wrap:wrap}
.etd-col{flex:1;min-width:220px}
.etd-label{display:block;margin:0 0 6px;font-size:12px;color:rgba(226,232,240,.74);font-weight:900;letter-spacing:.02em}
.etd-input,.etd-select,.etd-textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(2,6,23,.35);
  color:var(--text);
  outline:none;
  font-weight:750;
}
.etd-textarea{min-height:92px;resize:vertical}
.etd-btn{
  border:1px solid var(--border);
  background:rgba(148,163,184,.08);
  color:var(--text);
  padding:10px 14px;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
  user-select:none;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.etd-btn:hover{transform:translateY(-1px);background:rgba(148,163,184,.12);}
.etd-btn.primary{background:var(--blue);border-color:rgba(59,130,246,.45);}
.etd-btn.primary:hover{background:rgba(59,130,246,.26);}
.etd-btn.danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.44);}
.etd-btn.danger:hover{background:rgba(239,68,68,.20);}
.etd-alert{margin:0 0 12px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);font-weight:850}
.etd-alert.good{border-color:rgba(34,197,94,.44);background:rgba(34,197,94,.10);color:#bbf7d0}
.etd-alert.bad{border-color:rgba(239,68,68,.44);background:rgba(239,68,68,.10);color:#fecaca}
.etd-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.etd-kpi{padding:14px;border-radius:16px;border:1px solid var(--border);background:rgba(2,6,23,.25)}
.etd-kpi .t{font-size:12px;color:rgba(226,232,240,.72);font-weight:900;letter-spacing:.02em}
.etd-kpi .v{margin-top:6px;font-size:22px;font-weight:950}
.good{color:var(--good)}
.bad{color:var(--bad)}
.muted{color:rgba(226,232,240,.65)}
.bold{font-weight:900;color:#f4f7ff}
.etd-pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(2,6,23,.22);font-size:12px;font-weight:900;color:rgba(226,232,240,.78)}
.etd-tablewrap{overflow:auto;max-height:560px}
.etd-table{width:100%;border-collapse:collapse}
.etd-table th,.etd-table td{padding:10px 8px;border-bottom:1px solid rgba(148,163,184,.16);text-align:left;vertical-align:top}
.etd-table th{font-size:12px;color:rgba(226,232,240,.65);font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.right{text-align:right}
@media (max-width:980px){.etd-grid{grid-template-columns:1fr}}
@media (max-width:760px){.etd-kpis{grid-template-columns:1fr}.etd-actions{justify-content:flex-start}}


/* Mobile tweaks */
@media (max-width: 520px){
  .etd-page{padding:18px 10px 44px}
  .etd-title{font-size:24px}
  .etd-sub{font-size:13px}
  .etd-section{padding:14px}
  .etd-col{min-width:100%}
  .etd-actions{justify-content:flex-start}
  .etd-actions .etd-btn, .etd-actions a.etd-btn{width:100%}
  .etd-row{gap:10px}
  .etd-kpi .v{font-size:20px}
  .etd-btn{width:100%}
  .etd-tablewrap{max-height:460px}
  .etd-table th,.etd-table td{padding:9px 7px}
  canvas{max-width:100% !important}
}

/* Better tablet handling */
@media (max-width: 900px){
  .etd-grid{grid-template-columns:1fr}
}

/* Make tables always scroll nicely on small screens */
.etd-tablewrap{
  -webkit-overflow-scrolling: touch;
}


/* Responsive table -> cards */
@media (max-width: 680px){
  .etd-table thead{display:none}
  .etd-table, .etd-table tbody, .etd-table tr, .etd-table td{display:block;width:100%}
  .etd-table tr{
    border:1px solid rgba(148,163,184,.16);
    border-radius:16px;
    padding:10px 10px 2px;
    margin:10px 0;
    background:rgba(2,6,23,.18);
  }
  .etd-table td{
    border:none;
    padding:8px 6px;
    display:flex;
    justify-content:space-between;
    gap:12px;
  }
  .etd-table td:before{
    content: attr(data-label);
    color: rgba(226,232,240,.72);
    font-weight:900;
    font-size:12px;
    letter-spacing:.02em;
    flex: 0 0 40%;
  }
  .etd-table td.right{justify-content:space-between;text-align:left}
  .etd-table td .etd-btn{width:auto}
  .etd-table td[data-label="Action"] .etd-btn{width:100%}
  .etd-table td[data-label="Category"]{display:block}
  .etd-table td[data-label="Category"]:before{display:none}
  .etd-table td[data-label="Category"] .bold{font-size:14px}
}

/* Make charts fit container */
canvas{width:100% !important;height:auto !important}