:root{
  --brand:#00e387;
  --ink:#0b0f14;
  --muted:#5b6876;
  --card:#ffffff;
  --bg:#f5f7fb;
  --danger:#f04438;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:radial-gradient(1000px 600px at 10% -10%, #ddfff2 0, transparent 60%), var(--bg);
}
  .splash-subtitle{ font-size:16px }
}
.app-shell{
  min-height:100%;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  background:#fff;
  border-bottom:1px solid #e7ecf3;
  position:sticky; top:0; z-index:10;
}
.logo{height:40px; width:auto}
h1{font-size:20px; margin:0 8px 0 0; font-weight:800; letter-spacing:.2px}
main{max-width:980px; width:100%; margin:0 auto; padding:0 16px 40px; display:flex; flex-direction:column; gap:20px}
.card{
  background:var(--card);
  border:1px solid #e7ecf3;
  border-radius:20px;
  padding:18px;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
h2{margin:0 0 12px 0; font-size:18px}
label{font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:6px}
input,select,textarea{
  appearance:none;
  outline:none;
  border:1px solid #d6dde8;
  border-radius:12px;
  padding:12px 12px;
  font-size:16px;
  color:var(--ink);
  background:#fff;
}
textarea{resize:vertical; min-height:90px; font-family:inherit}
input:focus, select:focus, textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px #00e38733}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.full-row{ grid-column: 1 / -1; }
.actions{display:flex; gap:10px; margin-top:12px}
button{
  border:0; padding:12px 16px; border-radius:14px; font-weight:700; cursor:pointer;
}
.primary{background:var(--brand); color:#003a2a}
.secondary{background:#0b0f1410; color:var(--ink)}
.ghost{background:transparent; border:1px solid #d6dde8; color:var(--ink)}
.danger{background:var(--danger); color:white}
.save-msg{height:22px; margin:6px 2px 0; color:#057647; font-size:14px; font-weight:600}
.row{display:flex; align-items:center; gap:10px}
.row .grow{flex:1}
.row-actions{display:flex; gap:8px}
/* Filters */
.filters{ gap:10px; align-items:flex-end; flex-wrap:wrap; margin-bottom:6px}
.filters label{ min-width:180px; }
.filters .grow{ flex:1; min-width:220px; }
.filters input{ width:100%; }
/* Stats */
.stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:6px 0 8px 0;
}
.stat{
  display:flex; align-items:center; gap:8px;
  background:#0b0f1408;
  border:1px solid #e7ecf3;
  border-radius:14px;
  padding:8px 12px;
  font-size:14px;
  cursor:pointer; user-select:none;
}
.stat .name{ color:#333 }
.stat .num{
  font-weight:800;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #d6dde8;
  background:#fff;
}
.stat button.mini{
  cursor:pointer;
  margin-left:6px;
  border:1px solid #d6dde8;
  background:#fff;
  border-radius:10px;
  font-size:12px;
  padding:4px 8px;
}
.stat button.mini:hover{ background:#f3f6fb }
.table-wrap{overflow:auto}
table{width:100%; border-collapse:collapse}
thead th{
  text-align:left; font-size:12px; color:var(--muted); font-weight:700;
  border-bottom:1px solid #eef2f7; padding:10px 6px;
}
tbody td{padding:12px 6px; border-bottom:1px solid #f2f5fa; font-size:15px}
td.notes{white-space:pre-wrap; word-break:break-word; max-width:460px}
tbody tr:hover{background:#f8fafc}
.footer{padding:10px 20px; color:var(--muted); font-size:12px; text-align:center}
@media (max-width:520px){
  .header h1{display:none}
}



/* Insights Metrics */
.insights-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  margin-top:8px;
}
.metric{
  border:1px solid #e7ecf3;
  background:linear-gradient(180deg,#ffffff, #f9fbff);
  border-radius:16px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
.metric .label{ font-size:12px; color:var(--muted) }
.metric .value{ font-size:24px; font-weight:800; letter-spacing:.2px }
.metric .sub{ font-size:12px; color:#3a4a5f }
.bars{ display:flex; flex-direction:column; gap:6px; margin-top:4px }
.bar-row{ display:flex; align-items:center; gap:8px; }
.bar-row .bar{ height:10px; border-radius:8px; background:#eaf2ff; flex:1; position:relative; overflow:hidden; }
.bar-row .bar > span{ display:block; height:100%; width:0%; background:var(--brand); border:1px solid #b7ffe1; }
.bar-row .name{ min-width:110px; font-size:12px; color:#324255 }
.muted{ color:var(--muted) }
.metric .small{ font-size:11px; color:#6b7787 }