/* =========================================================
   CIF AUCTION UI v2 — /new
   Layout riprogettato per:
   - aste.php (stanze + live)
   - crea_asta.php
   - gestione_asta.php

   Tutto è limitato a .auction-app per non alterare navbar/footer.
   ========================================================= */

body.auction-page {
  min-height: 100vh;
  overflow-x: hidden;
}

.auction-app {
  --auction-bg: #06101c;
  --auction-bg-2: #081827;
  --auction-panel: rgba(12, 29, 48, .86);
  --auction-panel-2: rgba(16, 39, 63, .78);
  --auction-panel-soft: rgba(255, 255, 255, .035);
  --auction-line: rgba(151, 181, 216, .15);
  --auction-line-strong: rgba(151, 181, 216, .25);
  --auction-text: var(--text, #f5f8fc);
  --auction-muted: var(--muted, #9fb1c4);
  --auction-muted-2: var(--muted-2, #71849a);
  --auction-cyan: var(--cyan, #38d8ff);
  --auction-green: var(--green, #57e6a5);
  --auction-violet: var(--violet, #ad8cff);
  --auction-yellow: var(--yellow, #ffd45d);
  --auction-red: var(--red, #ff6b7f);
  --auction-orange: #ffab61;
  --auction-radius: 22px;
  --auction-shadow: 0 24px 72px rgba(0, 0, 0, .28);
  position: relative;
  min-height: 100vh;
  color: var(--auction-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.auction-app::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 74px;
  right: -16vw;
  width: min(780px, 64vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 45% 38%,
      rgba(56, 216, 255, .105),
      rgba(91, 124, 255, .045) 40%,
      transparent 70%);
}

.auction-app *,
.auction-app *::before,
.auction-app *::after {
  box-sizing: border-box;
}

.auction-app h1,
.auction-app h2,
.auction-app h3,
.auction-app .tit,
.auction-app .current-name {
  font-family: "Space Grotesk", Inter, system-ui, sans-serif;
}

.auction-app a {
  text-decoration: none;
}

.auction-app .app-shell,
.auction-app .wrap {
  width: min(1440px, calc(100% - 40px));
  margin-inline: auto;
}

.auction-app .app-shell {
  padding: 18px 0 70px;
}

/* =========================================================
   COMMON
   ========================================================= */

.auction-app .eyebrow {
  margin: 0 0 7px;
  color: var(--auction-cyan);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.auction-app .panel,
.auction-app .box,
.auction-app .room-card,
.auction-app .sidebar,
.auction-app .main {
  border: 1px solid var(--auction-line);
  background:
    radial-gradient(circle at 100% 0%, rgba(56,216,255,.035), transparent 18rem),
    linear-gradient(155deg, rgba(16,39,63,.86), rgba(7,19,33,.93));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    var(--auction-shadow);
  backdrop-filter: blur(18px) saturate(120%);
}

.auction-app .panel,
.auction-app .box {
  border-radius: var(--auction-radius);
}

.auction-app .panel-body {
  padding: clamp(18px, 2.6vw, 30px);
}

.auction-app .section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.auction-app .section-title h2,
.auction-app .tit {
  margin: 0;
  color: var(--auction-text);
  letter-spacing: -.035em;
}

.auction-app .section-title p,
.auction-app .sub,
.auction-app .hint,
.auction-app .footer-note,
.auction-app .waiting-copy {
  color: var(--auction-muted);
}

.auction-app .section-title p {
  margin: 5px 0 0;
  line-height: 1.55;
}

.auction-app .btn,
.auction-app button,
.auction-app input,
.auction-app select {
  font-family: inherit;
}

.auction-app .btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--auction-line);
  border-radius: 12px;
  color: var(--auction-text);
  background: rgba(255,255,255,.04);
  font-size: .78rem;
  font-weight: 850;
  line-height: 1;
  cursor: pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.auction-app .btn:hover,
.auction-app .btn:focus-visible {
  color: var(--auction-text);
  transform: translateY(-2px);
  border-color: rgba(56,216,255,.35);
  background: rgba(56,216,255,.065);
}

.auction-app .btn:disabled,
.auction-app button:disabled {
  cursor: not-allowed;
  opacity: .42;
  transform: none;
}

.auction-app .btn-primary,
.auction-app .btn-brand {
  color: #03141c;
  border-color: transparent;
  background: linear-gradient(135deg, var(--auction-cyan), var(--auction-green));
  box-shadow: 0 12px 30px rgba(56,216,255,.13);
}

.auction-app .btn-danger {
  color: #ffdbe1;
  border-color: rgba(255,107,127,.25);
  background: rgba(255,107,127,.08);
}

.auction-app .btn-secondary,
.auction-app .btn-quiet,
.auction-app .btn-ghost {
  color: var(--auction-text);
  background: rgba(255,255,255,.035);
}

.auction-app .btn-compact {
  min-height: 34px;
  padding: 6px 10px;
  font-size: .68rem;
}

.auction-app .field,
.auction-app .control-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.auction-app label {
  color: #c7d4e2;
  font-size: .73rem;
  font-weight: 820;
}

.auction-app .input,
.auction-app input[type="text"],
.auction-app input[type="number"],
.auction-app input[type="search"],
.auction-app input[type="password"],
.auction-app select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 13px;
  border: 1px solid var(--auction-line) !important;
  border-radius: 12px !important;
  color: var(--auction-text) !important;
  background: rgba(255,255,255,.04) !important;
  outline: none;
}

.auction-app select {
  appearance: none;
  padding-right: 38px;
  background-image:
    linear-gradient(45deg, transparent 50%, #7f94aa 50%),
    linear-gradient(135deg, #7f94aa 50%, transparent 50%) !important;
  background-position:
    calc(100% - 17px) 21px,
    calc(100% - 12px) 21px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}

.auction-app select option {
  color: #f5f8fc;
  background: #0b1d30;
}

.auction-app input:focus,
.auction-app select:focus {
  border-color: rgba(56,216,255,.50) !important;
  box-shadow: 0 0 0 4px rgba(56,216,255,.075) !important;
}

.auction-app .status-pill,
.auction-app .counter-pill,
.auction-app .room-code,
.auction-app .room-state,
.auction-app .room-mine,
.auction-app .room-count,
.auction-app .version-badge,
.auction-app .auction-state,
.auction-app .nav-badge,
.auction-app .tag {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border: 1px solid var(--auction-line);
  border-radius: 999px;
  color: #d8e5f1;
  background: rgba(255,255,255,.035);
  font-size: .66rem;
  font-weight: 850;
  white-space: nowrap;
}

.auction-app .status-dot {
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #71849a;
}

.auction-app .status-dot.online {
  background: var(--auction-green);
  box-shadow: 0 0 14px rgba(87,230,165,.75);
}

.auction-app .alert,
.auction-app .notice {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(255,107,127,.24);
  border-radius: 14px;
  color: #ffdce2;
  background: rgba(255,107,127,.075);
}

.auction-app .empty,
.auction-app .empty-state,
.auction-app .team-empty,
.auction-app .personal-empty {
  padding: 26px;
  border: 1px dashed rgba(151,181,216,.20);
  border-radius: 16px;
  color: var(--auction-muted);
  background: rgba(255,255,255,.018);
  text-align: center;
}

.auction-app .footer-note {
  margin: 20px 0 0;
  text-align: center;
  font-size: .7rem;
}

/* role badges */
.auction-app .chip,
.auction-app .role-badge {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 900;
}

.auction-app .portiere,
.auction-app .role-portiere {
  color: #ffd9af !important;
  border-color: rgba(255,171,97,.22) !important;
  background: rgba(255,171,97,.085) !important;
}

.auction-app .difensore,
.auction-app .role-difensore {
  color: #ffe89a !important;
  border-color: rgba(255,212,93,.22) !important;
  background: rgba(255,212,93,.085) !important;
}

.auction-app .centrocampista,
.auction-app .role-centrocampista {
  color: #aef3cf !important;
  border-color: rgba(87,230,165,.22) !important;
  background: rgba(87,230,165,.085) !important;
}

.auction-app .attaccante,
.auction-app .role-attaccante {
  color: #afeaff !important;
  border-color: rgba(56,216,255,.22) !important;
  background: rgba(56,216,255,.085) !important;
}

/* =========================================================
   HERO
   ========================================================= */

.auction-app .hero {
  position: relative;
  display: flex;
  min-height: 270px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  margin: 14px 0 18px;
  padding: clamp(26px, 4.5vw, 50px);
  border: 1px solid var(--auction-line);
  border-radius: 27px;
  background:
    radial-gradient(circle at 86% 8%, rgba(56,216,255,.13), transparent 25rem),
    radial-gradient(circle at 8% 100%, rgba(173,140,255,.055), transparent 20rem),
    linear-gradient(145deg, rgba(17,45,73,.91), rgba(6,18,31,.96));
  box-shadow: var(--auction-shadow);
}

.auction-app .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, #000 20%, transparent 85%);
}

.auction-app .hero > * {
  position: relative;
  z-index: 1;
}

.auction-app .hero-copy {
  min-width: 0;
}

.auction-app .hero h1,
.auction-app .room-picker-head h1 {
  max-width: 980px;
  margin: 0;
  color: var(--auction-text);
  font-size: clamp(2.7rem, 6vw, 5.7rem);
  line-height: .9;
  letter-spacing: -.07em;
  text-wrap: balance;
}

.auction-app .hero p:not(.eyebrow) {
  max-width: 62ch;
  margin: 15px 0 0;
  color: var(--auction-muted);
  line-height: 1.65;
}

.auction-app .hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.auction-app .hero-facts {
  display: grid;
  min-width: min(100%, 360px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--auction-line);
  border-radius: 18px;
  background: rgba(5,15,27,.42);
  backdrop-filter: blur(12px);
}

.auction-app .hero-facts > span {
  display: grid;
  min-height: 92px;
  align-content: center;
  gap: 3px;
  padding: 12px;
  border-right: 1px solid var(--auction-line);
}

.auction-app .hero-facts > span:last-child {
  border-right: 0;
}

.auction-app .hero-facts strong {
  color: var(--auction-cyan);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.35rem;
}

.auction-app .hero-facts small {
  color: var(--auction-muted-2);
  font-size: .6rem;
  line-height: 1.3;
}

/* =========================================================
   ROOM PICKER — aste.php senza room
   ========================================================= */

.auction-app .room-picker-main {
  padding: 22px 0 30px;
}

.auction-app .room-picker-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin: clamp(26px, 5vw, 64px) 0 24px;
}

.auction-app .room-picker-head p {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--auction-muted);
  line-height: 1.65;
}

.auction-app .room-picker-actions,
.auction-app .button-row,
.auction-app .action-row,
.auction-app .toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.auction-app .room-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.auction-app .room-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 220px;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  padding: 21px;
  border-radius: 20px;
  color: var(--auction-text);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.auction-app .room-card::after {
  content: "";
  position: absolute;
  top: -95px;
  right: -90px;
  width: 215px;
  height: 215px;
  border: 1px solid rgba(56,216,255,.10);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(56,216,255,.018),
    0 0 0 62px rgba(56,216,255,.008);
  pointer-events: none;
}

.auction-app .room-card:hover,
.auction-app .room-card:focus-visible {
  color: var(--auction-text);
  transform: translateY(-5px);
  border-color: rgba(56,216,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 28px 70px rgba(0,0,0,.30);
}

.auction-app .room-card.is-mine {
  border-color: rgba(87,230,165,.28);
}

.auction-app .room-card-top,
.auction-app .room-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auction-app .room-card-copy {
  position: relative;
  z-index: 1;
}

.auction-app .room-card h2 {
  margin: 0 0 7px;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: -.035em;
}

.auction-app .room-card-copy p {
  margin: 0;
  color: var(--auction-muted);
}

.auction-app .room-mine {
  color: #a8f1cf !important;
  border-color: rgba(87,230,165,.25) !important;
  background: rgba(87,230,165,.075) !important;
}

.auction-app .room-enter {
  color: var(--auction-cyan);
  font-size: .72rem;
  font-weight: 900;
}

.auction-app .room-empty {
  padding: clamp(34px, 7vw, 70px);
  border: 1px dashed var(--auction-line-strong);
  border-radius: 22px;
  text-align: center;
  background: rgba(255,255,255,.02);
}

/* =========================================================
   CREATE AUCTION
   ========================================================= */

.auction-app--create .form-grid {
  display: grid;
  grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 60px;
}

.auction-app--create .settings-panel {
  position: sticky;
  top: 96px;
  align-self: start;
}

.auction-app--create .selection-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 10px;
  padding: 16px;
  border: 1px solid rgba(87,230,165,.16);
  border-radius: 15px;
  background:
    linear-gradient(145deg, rgba(87,230,165,.07), rgba(56,216,255,.025));
}

.auction-app--create .selection-number {
  min-width: 48px;
  color: var(--auction-green);
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.15rem;
  font-weight: 800;
  line-height: 1;
}

.auction-app--create .button-row--submit {
  margin-top: 20px;
}

.auction-app--create .toolbar {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
}

.auction-app--create .search-input {
  flex: 1 1 260px;
}

.auction-app--create .participant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.auction-app--create .participant-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 102px;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  overflow: hidden;
  padding: 14px 42px 14px 14px;
  border: 1px solid var(--auction-line);
  border-radius: 15px;
  background: rgba(255,255,255,.024);
  cursor: pointer;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.auction-app--create .participant-option::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  border: 1px solid var(--auction-line-strong);
  border-radius: 6px;
  background: rgba(255,255,255,.025);
}

.auction-app--create .participant-option:has(input:checked)::after {
  content: "✓";
  display: grid;
  place-items: center;
  color: #061b14;
  border-color: transparent;
  background: var(--auction-green);
  font-size: .7rem;
  font-weight: 950;
}

.auction-app--create .participant-option:hover {
  transform: translateY(-2px);
  border-color: rgba(56,216,255,.27);
  background: rgba(56,216,255,.035);
}

.auction-app--create .participant-option:has(input:checked) {
  border-color: rgba(87,230,165,.30);
  background:
    linear-gradient(145deg, rgba(87,230,165,.075), rgba(56,216,255,.018));
  box-shadow: inset 3px 0 var(--auction-green);
}

.auction-app--create .participant-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auction-app--create .participant-avatar {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 13px;
  color: #03141c;
  background: linear-gradient(135deg, var(--auction-cyan), var(--auction-green));
  font-size: .72rem;
  font-weight: 950;
}

.auction-app--create .participant-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.auction-app--create .participant-name {
  overflow: hidden;
  color: var(--auction-text);
  font-size: .8rem;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auction-app--create .participant-team,
.auction-app--create .participant-meta {
  color: var(--auction-muted);
  font-size: .67rem;
  line-height: 1.4;
}

.auction-app--create .participant-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  align-items: center;
}

.auction-app--create .account-badge {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: .58rem;
  font-weight: 900;
}

.auction-app--create .account-badge.linked {
  color: #aaf1d0;
  background: rgba(87,230,165,.075);
}

.auction-app--create .account-badge.unlinked {
  color: #ffc1ca;
  background: rgba(255,107,127,.075);
}

.auction-app--create .locked-shell {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  border-radius: 24px;
}

.auction-app--create .locked-preview {
  filter: blur(10px);
  opacity: .20;
  pointer-events: none;
  user-select: none;
}

.auction-app--create .locked-gate {
  position: absolute;
  z-index: 5;
  top: clamp(34px, 8vw, 86px);
  left: 50%;
  width: min(92%, 560px);
  padding: clamp(24px, 5vw, 38px);
  transform: translateX(-50%);
  border: 1px solid rgba(56,216,255,.20);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(56,216,255,.08), transparent 18rem),
    rgba(7,20,35,.96);
  box-shadow: 0 38px 100px rgba(0,0,0,.48);
  text-align: center;
  backdrop-filter: blur(20px);
}

.auction-app--create .lock-icon {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 17px;
  place-items: center;
  border: 1px solid rgba(255,212,93,.18);
  border-radius: 18px;
  background: rgba(255,212,93,.07);
  font-size: 1.7rem;
}

/* =========================================================
   LIVE AUCTION
   ========================================================= */

.auction-app--live .live-utility-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 0 0 8px;
}

.auction-app--live .status-pill {
  color: #b5f4d6;
  border-color: rgba(87,230,165,.17);
  background: rgba(87,230,165,.055);
}

.auction-app--live .live-nav {
  position: sticky;
  z-index: 60;
  top: 82px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 13px 0 15px;
  padding: 6px;
  border: 1px solid var(--auction-line);
  border-radius: 15px;
  background: rgba(5,15,27,.80);
  box-shadow: 0 14px 38px rgba(0,0,0,.22);
  backdrop-filter: blur(18px) saturate(125%);
}

.auction-app--live .live-nav-link {
  display: flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 10px;
  color: var(--auction-muted);
  font-size: .75rem;
  font-weight: 850;
  white-space: nowrap;
  transition: .18s ease;
}

.auction-app--live .live-nav-link:hover {
  color: var(--auction-text);
  background: rgba(255,255,255,.035);
}

.auction-app--live .live-nav-link.is-active {
  color: #03141c;
  background: linear-gradient(135deg, var(--auction-cyan), var(--auction-green));
}

.auction-app--live .nav-badge {
  min-width: 24px;
  min-height: 24px;
  padding-inline: 6px;
  font-size: .6rem;
}

.auction-app--live .view-panel {
  display: block;
}

.auction-app--live .view-panel[hidden] {
  display: none !important;
}

.auction-app--live .guest-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 13px;
  padding: 14px 16px;
  border: 1px solid rgba(56,216,255,.14);
  border-radius: 14px;
  background: rgba(56,216,255,.04);
}

.auction-app--live .guest-banner > div {
  display: grid;
  gap: 3px;
}

.auction-app--live .guest-banner strong {
  font-size: .76rem;
}

.auction-app--live .guest-banner span {
  color: var(--auction-muted);
  font-size: .68rem;
}

.auction-app--live .live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 13px;
}

.auction-app--live .current-card {
  position: relative;
  display: grid;
  min-height: 390px;
  align-items: end;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 12%, rgba(87,230,165,.15), transparent 24rem),
    radial-gradient(circle at 18% 100%, rgba(56,216,255,.07), transparent 20rem),
    linear-gradient(145deg, rgba(10,44,47,.84), rgba(5,18,29,.96));
}

.auction-app--live .current-card::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(87,230,165,.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 34px rgba(87,230,165,.018),
    0 0 0 72px rgba(87,230,165,.008);
}

.auction-app--live .current-content {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: end;
  min-height: 390px;
  padding: clamp(24px, 4.5vw, 46px);
}

.auction-app--live .current-kicker {
  color: var(--auction-green);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.auction-app--live .current-name {
  max-width: 13ch;
  margin: 8px 0 0;
  color: var(--auction-text);
  font-size: clamp(2.8rem, 6vw, 6.4rem);
  line-height: .88;
  letter-spacing: -.075em;
}

.auction-app--live .waiting-copy {
  max-width: 500px;
  margin: 12px 0 0;
}

.auction-app--live .current-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.auction-app--live .meta-pill {
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--auction-line);
  border-radius: 999px;
  color: var(--auction-muted);
  background: rgba(255,255,255,.03);
  font-size: .65rem;
  font-weight: 800;
}

.auction-app--live .metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.auction-app--live .metric {
  display: grid;
  min-height: 124px;
  align-content: end;
  padding: 15px;
  border: 1px solid var(--auction-line);
  border-radius: 14px;
  background: rgba(255,255,255,.024);
}

.auction-app--live .metric strong {
  color: var(--auction-text);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 2.2rem;
  line-height: 1;
}

.auction-app--live .metric span {
  margin-top: 6px;
  color: var(--auction-muted);
  font-size: .68rem;
}

.auction-app--live .section-panel,
.auction-app--live .my-team-panel,
.auction-app--live .teams-browser-panel {
  margin-top: 13px;
}

.auction-app--live .activity-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auction-app--live .activity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 13px;
  border: 1px solid var(--auction-line);
  border-radius: 12px;
  background: rgba(255,255,255,.022);
}

.auction-app--live .activity-copy {
  display: grid;
  gap: 2px;
}

.auction-app--live .activity-copy strong {
  font-size: .76rem;
}

.auction-app--live .activity-copy span,
.auction-app--live .activity-item time {
  color: var(--auction-muted);
  font-size: .66rem;
}

.auction-app--live .activity-assegnato {
  border-left: 3px solid var(--auction-green);
}

.auction-app--live .activity-scartato {
  border-left: 3px solid var(--auction-red);
}

/* personal / team dashboard */

.auction-app--live .personal-team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px;
  border: 1px solid var(--auction-line);
  border-radius: 16px;
  background: rgba(255,255,255,.024);
}

.auction-app--live .personal-team-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.auction-app--live .personal-team-mark {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  color: #03141c;
  background: linear-gradient(135deg, var(--auction-cyan), var(--auction-green));
  font-weight: 950;
}

.auction-app--live .personal-team-identity h3,
.auction-app--live .personal-team-identity p {
  margin: 0;
}

.auction-app--live .personal-team-identity h3 {
  overflow: hidden;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auction-app--live .personal-team-identity p {
  margin-top: 3px;
  color: var(--auction-muted);
  font-size: .68rem;
}

.auction-app--live .credit-hero {
  color: var(--auction-green);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.15rem;
  font-weight: 850;
  white-space: nowrap;
}

.auction-app--live .personal-summary-grid,
.auction-app--live .personal-role-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.auction-app--live .personal-metric,
.auction-app--live .personal-role {
  display: grid;
  min-height: 102px;
  align-content: end;
  padding: 13px;
  border: 1px solid var(--auction-line);
  border-radius: 13px;
  background: rgba(255,255,255,.022);
}

.auction-app--live .personal-metric strong,
.auction-app--live .personal-role strong {
  color: var(--auction-text);
  font-size: 1.4rem;
}

.auction-app--live .personal-metric span,
.auction-app--live .personal-metric small,
.auction-app--live .personal-role span {
  color: var(--auction-muted);
  font-size: .63rem;
}

.auction-app--live .personal-roster-wrap {
  margin-top: 16px;
}

.auction-app--live .personal-roster-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.auction-app--live .personal-roster-title h4 {
  margin: 0;
  font-size: .8rem;
}

.auction-app--live .personal-roster {
  display: grid;
  gap: 6px;
  margin-top: 9px;
}

.auction-app--live .personal-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px solid var(--auction-line);
  border-radius: 12px;
  background: rgba(255,255,255,.019);
}

.auction-app--live .personal-player-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.auction-app--live .personal-player-copy strong,
.auction-app--live .personal-player-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auction-app--live .personal-player-copy strong {
  font-size: .74rem;
}

.auction-app--live .personal-player-copy small {
  color: var(--auction-muted);
  font-size: .61rem;
}

.auction-app--live .personal-player-price {
  font-size: .7rem;
  white-space: nowrap;
}

.auction-app--live .team-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 12px 0 14px;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.auction-app--live .team-tab {
  display: flex;
  min-width: 180px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid var(--auction-line);
  border-radius: 12px;
  color: var(--auction-text);
  background: rgba(255,255,255,.022);
  cursor: pointer;
}

.auction-app--live .team-tab.is-active,
.auction-app--live .team-tab.is-mine {
  border-color: rgba(87,230,165,.25);
  background: rgba(87,230,165,.055);
}

.auction-app--live .team-tab-copy {
  display: grid;
  min-width: 0;
  text-align: left;
}

.auction-app--live .team-tab-copy strong,
.auction-app--live .team-tab-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auction-app--live .team-tab-copy strong {
  font-size: .72rem;
}

.auction-app--live .team-tab-copy small,
.auction-app--live .mine-label {
  color: var(--auction-muted);
  font-size: .6rem;
}

.auction-app--live .team-select-label {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.auction-app--live .team-select {
  margin-top: 0;
}

.auction-app--live .team-viewer {
  min-width: 0;
}

/* =========================================================
   MANAGE AUCTION
   ========================================================= */

.auction-app--manage .wrap {
  display: grid;
  grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0 70px;
  align-items: start;
}

.auction-app--manage .sidebar {
  position: sticky;
  top: 94px;
  max-height: calc(100vh - 112px);
  min-width: 0;
  overflow: auto;
  padding: 16px;
  border-radius: 20px;
  scrollbar-width: thin;
}

.auction-app--manage .sidebar-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.auction-app--manage .sidebar-heading .sub {
  margin: 5px 0 0;
  font-size: .68rem;
  line-height: 1.45;
}

.auction-app--manage .search-wrap {
  margin: 14px 0 10px;
}

.auction-app--manage .sidebar table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.auction-app--manage th,
.auction-app--manage td {
  padding: 9px 7px;
  border-bottom: 1px solid rgba(151,181,216,.09);
  text-align: left;
  vertical-align: middle;
}

.auction-app--manage th {
  color: var(--auction-muted-2);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.auction-app--manage td {
  overflow: hidden;
  color: #dce6f0;
  font-size: .67rem;
  text-overflow: ellipsis;
}

.auction-app--manage th:nth-child(1),
.auction-app--manage td:nth-child(1) { width: 44%; }

.auction-app--manage th:nth-child(2),
.auction-app--manage td:nth-child(2) { width: 33%; }

.auction-app--manage th:nth-child(3),
.auction-app--manage td:nth-child(3) { width: 23%; }

.auction-app--manage tbody tr {
  cursor: pointer;
  transition: background .15s ease;
}

.auction-app--manage tbody tr:hover {
  background: rgba(56,216,255,.035);
}

.auction-app--manage tbody tr.active {
  background: rgba(56,216,255,.07);
  box-shadow: inset 2px 0 var(--auction-cyan);
}

.auction-app--manage .role-remaining-list {
  display: grid;
  gap: 6px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.auction-app--manage .role-remaining-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 !important;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.022);
}

.auction-app--manage .role-remaining-count {
  color: var(--auction-text);
}

.auction-app--manage .player-info {
  display: grid;
  gap: 8px;
}

.auction-app--manage .player-info .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.auction-app--manage .player-info .label {
  color: var(--auction-muted);
  font-size: .65rem;
}

.auction-app--manage .player-info .value {
  font-size: .68rem;
  font-weight: 800;
}

.auction-app--manage .main {
  min-width: 0;
  padding: 15px;
  border-radius: 20px;
}

.auction-app--manage .main > .box {
  margin-bottom: 12px;
}

.auction-app--manage .box {
  padding: 16px;
}

.auction-app--manage .manage-header {
  position: relative;
  overflow: hidden;
}

.auction-app--manage .manage-header::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -90px;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(56,216,255,.09);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(56,216,255,.014);
}

.auction-app--manage .manage-header__copy {
  position: relative;
  z-index: 1;
}

.auction-app--manage .manage-header h1 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}

.auction-app--manage .manage-lead {
  position: relative;
  z-index: 1;
  margin: 5px 0 0;
}

.auction-app--manage .room-data {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-top: 14px;
}

.auction-app--manage .copy-status {
  min-height: 18px;
  margin-top: 7px;
  color: var(--auction-green);
  font-size: .64rem;
}

.auction-app--manage .controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.auction-app--manage .controls--assign {
  grid-template-columns: minmax(220px, 1.2fr) minmax(110px, .45fr) auto;
  margin-top: 13px;
}

.auction-app--manage .control-field--grow {
  min-width: 0;
}

.auction-app--manage .control-field--price {
  min-width: 110px;
}

.auction-app--manage .control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: end;
}

.auction-app--manage .control-actions .btn {
  min-width: 96px;
}

.auction-app--manage .current-player {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.5vw, 30px);
  background:
    radial-gradient(circle at 90% 0%, rgba(87,230,165,.11), transparent 21rem),
    linear-gradient(145deg, rgba(13,48,50,.80), rgba(7,20,34,.96));
}

.auction-app--manage .current-player-title {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.auction-app--manage .current-player-title .sub {
  font-family: Inter, sans-serif;
  font-size: .68rem;
  font-weight: 600;
}

.auction-app--manage .list > .tit {
  margin-bottom: 12px;
}

.auction-app--manage .team-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 17px 0 8px;
  padding: 13px 14px;
  border: 1px solid var(--auction-line);
  border-radius: 13px;
  background: rgba(255,255,255,.026);
  font-size: .9rem;
}

.auction-app--manage .tag--count {
  color: #b1efff;
  border-color: rgba(56,216,255,.18);
  background: rgba(56,216,255,.055);
}

.auction-app--manage .tag--credits {
  color: #b4f3d6;
  border-color: rgba(87,230,165,.17);
  background: rgba(87,230,165,.05);
}

.auction-app--manage .tag--caps {
  color: var(--auction-muted);
}

.auction-app--manage .list ul:not(.role-remaining-list) {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auction-app--manage .list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px 11px;
  border: 1px solid rgba(151,181,216,.10);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
  font-size: .7rem;
}

.auction-app--manage .transfer-form {
  display: flex !important;
  flex: 1 1 100%;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 4px 0 0 !important;
  padding-top: 7px;
  border-top: 1px solid rgba(151,181,216,.08);
}

.auction-app--manage .transfer-label {
  margin: 0 !important;
  font-size: .62rem;
}

.auction-app--manage .transfer-select {
  width: auto !important;
  min-width: 150px !important;
  min-height: 34px !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  font-size: .65rem !important;
}

.auction-app--manage .transfer-price {
  width: 92px !important;
  min-height: 34px !important;
  padding: 5px 8px !important;
  font-size: .65rem !important;
}

/* =========================================================
   LOGIN MODAL
   ========================================================= */

.auction-app .login-modal {
  position: fixed;
  z-index: 2500;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.auction-app .modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(8px);
}

.auction-app .login-dialog {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  padding: clamp(22px, 4vw, 30px);
  border: 1px solid var(--auction-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(56,216,255,.08), transparent 18rem),
    #0a1b2d;
  box-shadow: 0 34px 100px rgba(0,0,0,.52);
}

.auction-app .modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  border: 1px solid var(--auction-line);
  border-radius: 10px;
  color: var(--auction-muted);
  background: rgba(255,255,255,.035);
  font-size: 1rem;
}

.auction-app .login-dialog-copy h2 {
  margin: 0;
  padding-right: 40px;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.auction-app .login-dialog-copy p:not(.eyebrow) {
  color: var(--auction-muted);
  line-height: 1.55;
}

.auction-app .login-form {
  display: grid;
  gap: 13px;
  margin-top: 18px;
}

.auction-app .password-field {
  position: relative;
}

.auction-app .password-field .input {
  padding-right: 84px;
}

.auction-app .password-toggle {
  position: absolute;
  top: 50%;
  right: 7px;
  min-height: 34px;
  padding: 0 10px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  color: var(--auction-cyan);
  background: rgba(56,216,255,.06);
  font-size: .65rem;
  font-weight: 900;
  cursor: pointer;
}

.auction-app .login-help {
  margin-bottom: 0;
  color: var(--auction-muted);
  font-size: .7rem;
}

/* =========================================================
   REVEAL / TOAST
   ========================================================= */

.auction-js .auction-app [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .45s ease var(--reveal-delay, 0ms),
    transform .45s ease var(--reveal-delay, 0ms);
}

.auction-js .auction-app [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.auction-app .toast {
  position: fixed;
  z-index: 2200;
  right: 18px;
  bottom: 18px;
  max-width: min(400px, calc(100% - 36px));
  padding: 12px 14px;
  border: 1px solid rgba(87,230,165,.25);
  border-radius: 12px;
  color: #dfffee;
  background: rgba(7,27,24,.96);
  box-shadow: var(--auction-shadow);
  opacity: 0;
  transform: translateY(10px);
  transition: .2s ease;
}

.auction-app .toast.show {
  opacity: 1;
  transform: none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1120px) {
  .auction-app .room-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auction-app--create .form-grid,
  .auction-app--manage .wrap {
    grid-template-columns: 1fr;
  }

  .auction-app--create .settings-panel,
  .auction-app--manage .sidebar {
    position: static;
    max-height: none;
  }

  .auction-app--manage .sidebar table {
    table-layout: auto;
  }

  .auction-app--manage .controls--assign {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .auction-app--manage .control-actions--assign {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .auction-app--live .live-grid {
    grid-template-columns: 1fr;
  }

  .auction-app--live .current-card,
  .auction-app--live .current-content {
    min-height: 340px;
  }

  .auction-app--live .personal-summary-grid,
  .auction-app--live .personal-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .auction-app .app-shell,
  .auction-app .wrap {
    width: min(100% - 18px, 1440px);
  }

  .auction-app .hero,
  .auction-app .room-picker-head,
  .auction-app .guest-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .auction-app .hero {
    min-height: 0;
    padding: 25px 19px;
    border-radius: 20px;
  }

  .auction-app .hero h1,
  .auction-app .room-picker-head h1 {
    font-size: clamp(2.45rem, 12vw, 4.2rem);
  }

  .auction-app .hero-meta {
    justify-content: flex-start;
  }

  .auction-app .hero-facts {
    width: 100%;
  }

  .auction-app .room-picker-head {
    align-items: flex-start;
  }

  .auction-app .room-list {
    grid-template-columns: 1fr;
  }

  .auction-app--create .participant-grid {
    grid-template-columns: 1fr;
  }

  .auction-app--live .live-nav {
    top: 70px;
  }

  .auction-app--live .guest-banner .btn {
    width: 100%;
  }

  .auction-app--manage .main,
  .auction-app--manage .sidebar {
    padding: 12px;
  }

  .auction-app--manage .controls,
  .auction-app--manage .controls--assign {
    grid-template-columns: 1fr;
  }

  .auction-app--manage .control-actions {
    width: 100%;
  }

  .auction-app--manage .control-actions .btn {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .auction-app .panel,
  .auction-app .box,
  .auction-app .room-card,
  .auction-app--manage .sidebar,
  .auction-app--manage .main {
    border-radius: 15px;
  }

  .auction-app .panel-body {
    padding: 16px;
  }

  .auction-app .section-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }

  .auction-app .room-card {
    min-height: 190px;
    padding: 17px;
  }

  .auction-app .hero-facts {
    grid-template-columns: 1fr;
  }

  .auction-app .hero-facts > span {
    min-height: 62px;
    border-right: 0;
    border-bottom: 1px solid var(--auction-line);
  }

  .auction-app .hero-facts > span:last-child {
    border-bottom: 0;
  }

  .auction-app--live .live-utility-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .auction-app--live .live-nav {
    grid-template-columns: 1fr;
    position: static;
  }

  .auction-app--live .current-name {
    font-size: clamp(2.5rem, 15vw, 4.3rem);
  }

  .auction-app--live .metric-grid,
  .auction-app--live .personal-summary-grid,
  .auction-app--live .personal-role-grid {
    grid-template-columns: 1fr 1fr;
  }

  .auction-app--live .personal-team-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .auction-app--live .personal-player {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .auction-app--live .personal-player-price {
    grid-column: 2;
  }

  .auction-app--manage .room-data {
    align-items: stretch;
    flex-direction: column;
  }

  .auction-app--manage .room-data .btn {
    width: 100%;
  }

  .auction-app--manage .team-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .auction-app--manage .transfer-form {
    align-items: stretch !important;
    flex-direction: column;
  }

  .auction-app--manage .transfer-select,
  .auction-app--manage .transfer-price {
    width: 100% !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auction-app *,
  .auction-app *::before,
  .auction-app *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .auction-js .auction-app [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* Preview oscurata della pagina crea asta */
.auction-app--create .mock-line {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
}

.auction-app--create .mock-line.medium {
  width: 70%;
}

.auction-app--create .mock-line.short {
  width: 42%;
}

.auction-app--create .mock-participant {
  pointer-events: none;
}

.auction-app--live .my-team-title {
  align-items: center;
}

.auction-app .login-submit {
  width: 100%;
}

.auction-app .room-alert {
  margin-bottom: 14px;
}