:root {
  --bg: #14161c;
  --card: #1e222b;
  --card2: #262b36;
  --txt: #eef1f6;
  --muted: #9aa3b2;
  --accent: #7c8cff;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #1c2130 0%, var(--bg) 60%);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 60px;
}

header.top { text-align: center; margin-bottom: 18px; }
header.top h1 { font-size: 1.35rem; font-weight: 700; margin: 0; letter-spacing: .3px; }
header.top .sub { color: var(--muted); font-size: .85rem; margin-top: 4px; }

.gauge-wrap {
  background: var(--card);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 30px 34px 26px;
  text-align: center;
  max-width: 480px;
  width: 100%;
}

.gauge { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.gauge svg { transform: rotate(-90deg); }
.gauge .center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.gauge .emoji { font-size: 4.4rem; line-height: 1; }
.gauge .pct { font-size: 1.4rem; font-weight: 700; margin-top: 6px; }
.gauge .pct small { color: var(--muted); font-weight: 500; font-size: .8rem; }

.mood-word { font-size: 1.6rem; font-weight: 800; margin: 16px 0 4px; }
.mood-msg { color: var(--muted); font-size: .98rem; min-height: 2.6em; }

.status-line {
  margin-top: 14px; font-size: .82rem; color: var(--muted);
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.status-line b { color: var(--txt); font-weight: 600; }

.details {
  max-width: 620px; width: 100%; margin-top: 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.detail {
  background: var(--card2); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.detail .label { font-size: .72rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.detail .value { font-size: 1.05rem; font-weight: 700; }
.detail .impact { font-size: .74rem; }
.impact.bad { color: #e57373; }
.impact.good { color: #81c784; }
.impact.neutral { color: var(--muted); }

footer.foot {
  margin-top: 34px; color: var(--muted); font-size: .78rem; text-align: center;
}
footer.foot a { color: var(--accent); text-decoration: none; }
footer.foot a:hover { text-decoration: underline; }

/* Admin */
.admin { max-width: 480px; width: 100%; }
.admin form { background: var(--card); border-radius: 20px; padding: 24px; box-shadow: var(--shadow); }
.admin label { display: block; margin: 14px 0 4px; font-size: .85rem; color: var(--muted); }
.admin input, .admin select, .admin textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #333a47;
  background: var(--card2); color: var(--txt); font-size: 1rem;
}
.admin .row { display: flex; gap: 12px; }
.admin .row > div { flex: 1; }
.admin button {
  margin-top: 20px; width: 100%; padding: 13px; border: 0; border-radius: 12px;
  background: var(--accent); color: #fff; font-size: 1.02rem; font-weight: 700; cursor: pointer;
}
.admin button:hover { filter: brightness(1.08); }
.admin .msg { margin-top: 14px; text-align: center; font-size: .9rem; min-height: 1.2em; }
.admin .msg.ok { color: #81c784; }
.admin .msg.err { color: #e57373; }
.admin .rng { display: flex; align-items: center; gap: 10px; }
.admin .rng output { min-width: 2ch; font-weight: 700; color: var(--txt); }