/* Piffipiffo — design system condiviso (home, login, portal) */
:root{
  --bg:#0b0d12;
  --bg-alt:#12151c;
  --surface:#171a22;
  --surface-hover:#1e222c;
  --border:#252a35;
  --border-strong:#333a4a;
  --text:#e6e9ef;
  --text-dim:#9aa3b2;
  --text-faint:#6b7280;
  --accent:#6ea8fe;
  --accent-dim:rgba(110,168,254,.12);
  --success:#7cd992;
  --warn:#f0b429;
  --danger:#ff6b6b;
  --danger-bg:#2a1414;
  --danger-border:#5a2a2a;
  --radius-lg:16px;
  --radius-md:14px;
  --radius-sm:8px;
  --transition:.2s ease;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(circle at 20% -10%, rgba(110,168,254,.12), transparent 40%),
    radial-gradient(circle at 90% 0%, rgba(167,139,250,.10), transparent 45%),
    var(--bg);
  color:var(--text);
  display:flex;flex-direction:column;
}
a{color:inherit}
::selection{background:var(--accent-dim);color:var(--text)}

.brand{
  font-weight:700;letter-spacing:-0.02em;
  background:linear-gradient(135deg,var(--text) 30%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* buttons / pills */
.btn, a.pill{
  text-decoration:none;font-size:.85rem;font-weight:600;
  padding:.55rem 1.1rem;border-radius:var(--radius-sm);
  color:var(--text);background:var(--bg-alt);border:1px solid var(--border);
  transition:border-color var(--transition), color var(--transition), background var(--transition), transform var(--transition);
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:.4rem;
}
.btn:hover, a.pill:hover{border-color:var(--accent);color:var(--accent)}
.btn:active, a.pill:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.btn.confirm{background:var(--danger-bg);border-color:var(--danger-border);color:#ffb4b4}
.btn.confirm:hover{border-color:var(--danger);color:var(--danger)}
span.soon{
  display:inline-block;font-size:.82rem;font-weight:600;padding:.45rem .9rem;
  border-radius:var(--radius-sm);color:var(--text-dim);background:var(--bg-alt);
  border:1px dashed var(--border);
}

/* live-status dot, driven by status.js */
.status-dot{
  width:.5rem;height:.5rem;border-radius:50%;flex:0 0 auto;
  background:var(--text-faint);
  box-shadow:0 0 0 3px transparent;
  transition:background var(--transition), box-shadow var(--transition);
}
.status-dot.live{background:var(--success);box-shadow:0 0 0 3px rgba(124,217,146,.15)}
.status-dot.warn{background:var(--warn);box-shadow:0 0 0 3px rgba(240,180,41,.18)}
.status-dot.down{background:var(--danger);box-shadow:0 0 0 3px rgba(255,107,107,.15)}
.status-dot.pending{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* small category tags */
.tag{
  font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:.2rem .5rem;border-radius:99px;display:inline-block;line-height:1.4;
}
.tag-demo{color:#f3c988;background:rgba(243,201,136,.12);border:1px solid rgba(243,201,136,.25)}
.tag-beta{color:#a78bfa;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.25)}

/* entrance animation, staggered via inline --d */
.fade-in{
  opacity:0;animation:fadeInUp .5s ease forwards;
  animation-delay:var(--d,0s);
}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){
  .fade-in{animation:none;opacity:1}
  .status-dot.pending{animation:none}
}

footer{
  text-align:center;padding:1.5rem;color:var(--text-dim);font-size:.85rem;
  border-top:1px solid var(--border);
}
a.back{display:inline-block;color:var(--text-dim);font-size:.85rem;text-decoration:none}
a.back:hover{color:var(--accent)}