/* Basic shared styles (kept minimal) */
:root{ --bg:#0b1220; --surface:#0f172a; --surface-2:#111a31; --text:#e5e7eb; --muted:#97a3b6; --brand:#6ee7b7; --brand2:#22d3ee; --r:14px; }
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Inter,Roboto,Arial;line-height:1.5}
a{color:inherit;text-decoration:none}
.container{width:min(1160px,92vw);margin-inline:auto}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:var(--r)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.16);font-weight:800;cursor:pointer;user-select:none;background:transparent;color:var(--text)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#041014;border-color:transparent}
.input,.select,.textarea{width:100%;background:var(--surface-2);border:1px solid rgba(255,255,255,.18);border-radius:10px;color:var(--text);padding:.7rem .8rem}
.textarea{min-height:90px;resize:vertical}
.muted{color:var(--muted)}
.success{border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.12);color:#bbf7d0;border-radius:10px;padding:8px 10px}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid rgba(255,255,255,.10);text-align:left}



/* ===== Topbar (SaaS style) ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11,18,32,.72);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 0;
}

.topbar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--text, #e5e7eb);
  min-width: 220px;
}

.brand-badge{
  width:40px;
  height:40px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.5px;
  color:#041014;
  background: linear-gradient(135deg, var(--brand, #6ee7b7), var(--brand2, #22d3ee));
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.brand-txt{display:flex;flex-direction:column;line-height:1.05}
.brand-name{font-weight:900}
.brand-sub{font-size:.85rem;color: var(--muted, #97a3b6);margin-top:2px}

.topbar-nav{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.03);
}

.topbar-nav a{
  color: var(--muted, #97a3b6);
  padding: .5rem .75rem;
  border-radius: 999px;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
}
.topbar-nav a:hover{
  color: var(--text, #e5e7eb);
  background: rgba(255,255,255,.06);
}

.topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* User chip */
.userchip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.userchip-dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--brand, #6ee7b7), var(--brand2, #22d3ee));
  box-shadow: 0 0 0 4px rgba(34,211,238,.14);
}

.userchip-txt{display:flex;flex-direction:column;line-height:1.05;max-width:220px}
.userchip-name{font-weight:900;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userchip-sub{font-size:.82rem;color: var(--muted, #97a3b6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Buttons small */
.btn-sm{
  padding: .65rem .9rem;
  border-radius: 999px;
  font-weight: 900;
}

/* Make sure your existing .btn / .btn-ghost / .btn-primary exist.
   If not, add minimal fallbacks below. */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn-ghost{background:transparent;border-color: rgba(255,255,255,.16);color: var(--text, #e5e7eb)}
.btn-ghost:hover{background: rgba(255,255,255,.06)}
.btn-primary{background: linear-gradient(135deg, var(--brand, #6ee7b7), var(--brand2, #22d3ee)); color:#041014}


.stars {
  display: flex;
  gap: 6px;
}

.star {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #444;           /* colore stelle NON selezionate */
  transition: transform .15s ease, color .15s ease;
}

.star.active {
  color: #ffd700;        /* giallo oro */
}

.star:hover {
  transform: scale(1.15);
}