#hap-admin-app {
  --hap-red: #e63946;
  --hap-yellow: #ffb703;
  --hap-dark: #111;
  --hap-white: #fff;
  --hap-green: #125e34;
  --hap-red-bg: #4f1e1e;
  --hap-grey-bg: #4a4a4a;
  font-family: "Poppins", sans-serif;
  color: #fff;
}

#hap-admin-app .hap-wrap {
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(180deg, #1b1b1b 0%, #0d0d0d 100%);
  border: 2px solid var(--hap-yellow);
  border-radius: 16px;
  padding: 16px;
}

#hap-admin-app .hap-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

#hap-admin-app .hap-logo-box {
  background: #fff;
  border-radius: 10px;
  padding: 8px;
  display: inline-block;
}

#hap-admin-app .hap-logo { width: 140px; display: block; }
#hap-admin-app .hap-title { color: #fff; font-family: "Krona One", sans-serif; font-size: 20px; margin: 0; }

#hap-admin-app .hap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#hap-admin-app .hap-card {
  background: #141414;
  border: 1px solid #323232;
  border-radius: 10px;
  padding: 12px;
}

#hap-admin-app .hap-card h3,
#hap-admin-app .hap-card h4 {
  color: #fff;
  margin: 0 0 8px;
}

#hap-admin-app input,
#hap-admin-app select,
#hap-admin-app textarea,
#hap-admin-app button {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 9px 11px;
  font-family: inherit;
  margin-bottom: 8px;
}

#hap-admin-app input,
#hap-admin-app select,
#hap-admin-app textarea {
  background: #252525;
  color: #fff;
}

#hap-admin-app button {
  cursor: pointer;
  font-weight: 600;
}

#hap-admin-app .hap-btn-primary { background: var(--hap-red); color: #fff; }
#hap-admin-app .hap-btn-light { background: #fff; color: #111; }
#hap-admin-app .hap-btn-dark { background: #222; color: #fff; }

#hap-admin-app .hap-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

#hap-admin-app .hap-kpi {
  background: #0f0f0f;
  border: 1px solid #323232;
  border-radius: 8px;
  padding: 8px;
}

#hap-admin-app .hap-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--hap-yellow);
}

#hap-admin-app .hap-table-wrap {
  overflow: auto;
  border: 1px solid #333;
  border-radius: 8px;
}

#hap-admin-app table {
  width: 100%;
  border-collapse: collapse;
}

#hap-admin-app th,
#hap-admin-app td {
  border-bottom: 1px solid #333;
  border-right: 1px solid #333;
  padding: 6px;
  font-size: 12px;
  white-space: nowrap;
}

#hap-admin-app th { background: #1e1e1e; position: sticky; top: 0; }
#hap-admin-app td[contenteditable="true"] { background: #191919; }

#hap-admin-app .hap-row-green { background: var(--hap-green); }
#hap-admin-app .hap-row-red { background: var(--hap-red-bg); }
#hap-admin-app .hap-row-grey { background: var(--hap-grey-bg); }

#hap-admin-app .hap-note { color: #c9c9c9; font-size: 12px; }

#hap-admin-app .hap-hidden { display: none; }

#hap-admin-app .hap-row-inline {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

#hap-admin-app canvas { background: #0f0f0f; border: 1px solid #333; border-radius: 8px; }

@media (max-width: 980px) {
  #hap-admin-app .hap-grid { grid-template-columns: 1fr; }
  #hap-admin-app .hap-kpis { grid-template-columns: 1fr 1fr; }
}