/* ===================================================================== THE SHOW — Global Stylesheet Stile basato su arkanimation.it Font: Montserrat (body) + Orbitron (titoli/accent) Sistema temi: variabili CSS controllate da data-theme su ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&family=Orbitron:wght@400;700;900&display=swap'); /* ===================================================================== TEMI — variabili per colore accent ===================================================================== */ /* Default: Cyan */ :root { --accent: #00ccff; --accent-60: rgba(0,204,255,.6); --accent-30: rgba(0,204,255,.3); --accent-15: rgba(0,204,255,.15); --accent-10: rgba(0,204,255,.10); --btn-grad: linear-gradient(135deg, #0088cc, #00ccff); --shadow-color: rgba(0,204,255,.35); --glow-color: rgba(0,204,255,.18); --grid-color: rgba(0,204,255,.06); --border-color: rgba(0,204,255,.18); } [data-theme="orange"] { --accent: #ffaa33; --accent-60: rgba(255,170,51,.6); --accent-30: rgba(255,170,51,.3); --accent-15: rgba(255,170,51,.15); --accent-10: rgba(255,170,51,.10); --btn-grad: linear-gradient(135deg, #e67e00, #ffaa33); --shadow-color: rgba(255,170,51,.35); --glow-color: rgba(255,170,51,.18); --grid-color: rgba(255,170,51,.06); --border-color: rgba(255,170,51,.18); } [data-theme="red"] { --accent: #ff4444; --accent-60: rgba(255,68,68,.6); --accent-30: rgba(255,68,68,.3); --accent-15: rgba(255,68,68,.15); --accent-10: rgba(255,68,68,.10); --btn-grad: linear-gradient(135deg, #cc0000, #ff4444); --shadow-color: rgba(255,68,68,.35); --glow-color: rgba(255,68,68,.18); --grid-color: rgba(255,68,68,.06); --border-color: rgba(255,68,68,.18); } [data-theme="pink"] { --accent: #ff44aa; --accent-60: rgba(255,68,170,.6); --accent-30: rgba(255,68,170,.3); --accent-15: rgba(255,68,170,.15); --accent-10: rgba(255,68,170,.10); --btn-grad: linear-gradient(135deg, #cc0066, #ff44aa); --shadow-color: rgba(255,68,170,.35); --glow-color: rgba(255,68,170,.18); --grid-color: rgba(255,68,170,.06); --border-color: rgba(255,68,170,.18); } [data-theme="green"] { --accent: #00ff41; --accent-60: rgba(0,255,65,.6); --accent-30: rgba(0,255,65,.3); --accent-15: rgba(0,255,65,.15); --accent-10: rgba(0,255,65,.10); --btn-grad: linear-gradient(135deg, #00aa2a, #00ff41); --shadow-color: rgba(0,255,65,.35); --glow-color: rgba(0,255,65,.18); --grid-color: rgba(0,255,65,.06); --border-color: rgba(0,255,65,.18); } [data-theme="yellow"] { --accent: #ffff00; --accent-60: rgba(255,255,0,.6); --accent-30: rgba(255,255,0,.3); --accent-15: rgba(255,255,0,.15); --accent-10: rgba(255,255,0,.10); --btn-grad: linear-gradient(135deg, #ccaa00, #ffff00); --shadow-color: rgba(255,255,0,.35); --glow-color: rgba(255,255,0,.18); --grid-color: rgba(255,255,0,.06); --border-color: rgba(255,255,0,.18); } [data-theme="purple"] { --accent: #cc00ff; --accent-60: rgba(204,0,255,.6); --accent-30: rgba(204,0,255,.3); --accent-15: rgba(204,0,255,.15); --accent-10: rgba(204,0,255,.10); --btn-grad: linear-gradient(135deg, #8800cc, #cc00ff); --shadow-color: rgba(204,0,255,.35); --glow-color: rgba(204,0,255,.18); --grid-color: rgba(204,0,255,.06); --border-color: rgba(204,0,255,.18); } [data-theme="electric"] { --accent: #4477ff; --accent-60: rgba(68,119,255,.6); --accent-30: rgba(68,119,255,.3); --accent-15: rgba(68,119,255,.15); --accent-10: rgba(68,119,255,.10); --btn-grad: linear-gradient(135deg, #0033ff, #4477ff); --shadow-color: rgba(68,119,255,.35); --glow-color: rgba(68,119,255,.18); --grid-color: rgba(68,119,255,.06); --border-color: rgba(68,119,255,.18); } [data-theme="magenta"] { --accent: #ff0099; --accent-60: rgba(255,0,153,.6); --accent-30: rgba(255,0,153,.3); --accent-15: rgba(255,0,153,.15); --accent-10: rgba(255,0,153,.10); --btn-grad: linear-gradient(135deg, #cc0077, #ff0099); --shadow-color: rgba(255,0,153,.35); --glow-color: rgba(255,0,153,.18); --grid-color: rgba(255,0,153,.06); --border-color: rgba(255,0,153,.18); } [data-theme="lime"] { --accent: #aaff00; --accent-60: rgba(170,255,0,.6); --accent-30: rgba(170,255,0,.3); --accent-15: rgba(170,255,0,.15); --accent-10: rgba(170,255,0,.10); --btn-grad: linear-gradient(135deg, #77cc00, #aaff00); --shadow-color: rgba(170,255,0,.35); --glow-color: rgba(170,255,0,.18); --grid-color: rgba(170,255,0,.06); --border-color: rgba(170,255,0,.18); } /* ===================================================================== RESET & BASE ===================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif; background: #0a0a0a; color: #e0e0e0; padding: 24px; position: relative; } /* Griglia di sfondo */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 40px 40px; z-index: 0; } /* Glow radiale in alto */ body::after { content: ''; position: fixed; top: -120px; left: 50%; transform: translateX(-50%); width: 700px; height: 320px; background: radial-gradient(ellipse, var(--glow-color) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ===================================================================== LAYOUT ===================================================================== */ .wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; gap: 16px; } .container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } @media (max-width: 980px) { .container { grid-template-columns: 1fr; } } /* ===================================================================== CARD ===================================================================== */ .card { background: rgba(20, 20, 20, 0.92); border: 1px solid var(--border-color); border-radius: 16px; padding: 18px; box-shadow: 0 8px 32px rgba(0,0,0,.5); position: relative; z-index: 1; transition: border-color .3s; overflow: visible; } /* ===================================================================== TIPOGRAFIA ===================================================================== */ h1 { font-family: 'Orbitron', monospace; font-size: 22px; font-weight: 900; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin: 0 0 10px 0; text-shadow: 0 0 18px var(--glow-color); } h2 { font-family: 'Orbitron', monospace; font-size: 15px; font-weight: 700; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; margin: 0 0 10px 0; } h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; color: #e0e0e0; margin: 0 0 8px 0; } .muted { color: #666; font-size: 13px; } .small { font-size: 12px; } .spacer { height: 8px; } .right { float: right; } /* ===================================================================== GRIGLIE E RIGHE ===================================================================== */ .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } @media (max-width: 900px) { .grid, .grid-2, .grid-3 { grid-template-columns: 1fr; } } /* ===================================================================== FORM ===================================================================== */ .field { margin: 10px 0; } label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #666; margin-bottom: 5px; } input, select, textarea { width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #e0e0e0; padding: 10px 14px; outline: none; font-family: 'Montserrat', sans-serif; font-size: 14px; transition: border-color .2s, box-shadow .2s; } input::placeholder, textarea::placeholder { color: #444; } input:focus, select:focus, textarea:focus { border-color: var(--accent-60); box-shadow: 0 0 0 3px var(--accent-10); } /* ===================================================================== PULSANTI ===================================================================== */ .btn { background: var(--btn-grad); border: none; color: #fff; padding: 10px 16px; border-radius: 10px; cursor: pointer; font-family: 'Orbitron', monospace; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .2s ease; } .btn::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent); animation: shimmer 2.5s infinite; } @keyframes shimmer { 0%{left:-100%} 100%{left:200%} } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--shadow-color); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } .btn.secondary { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.25); color: #ccc; } .btn.secondary:hover { background: rgba(255,255,255,.1); box-shadow: none; } .btn.ghost { background: transparent; border: 1px solid var(--accent-60); color: var(--accent); } .btn.danger { background: linear-gradient(135deg, #aa0000, #ff3333); } .btn.ok { background: linear-gradient(135deg, #006622, #00cc44); color: #fff; } .btn.err { background: linear-gradient(135deg, #aa0000, #ff3333); color: #fff; } .btn.ok:not(.btn):not([class*="btn"]) { color: #00cc44; } .btn.err:not(.btn):not([class*="btn"]) { color: #ff3333; } .ok:not(.btn) { color: #00cc44; } .err:not(.btn) { color: #ff3333; } /* ===================================================================== BADGE / TAG / PILL ===================================================================== */ .tag, .pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--border-color); border-radius: 999px; font-size: 11px; font-family: 'Orbitron', monospace; letter-spacing: 1px; background: rgba(0,0,0,.4); color: var(--accent); } .tag.on { color: #00cc44; border-color: rgba(0,204,68,.4); } .tag.off { color: #ff3333; border-color: rgba(255,51,51,.4); } /* ===================================================================== TABS ===================================================================== */ .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-color); margin-bottom: 14px; } .tabs button { flex: 1; padding: 10px 16px; border: none; background: transparent; color: #555; font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; } .tabs button.active { color: var(--accent); border-bottom: 2px solid var(--accent); } .tabs button:hover:not(.active) { color: #999; } .section { display: none; } .section.active { display: block; } /* ===================================================================== TABELLE ===================================================================== */ table { width: 100%; border-collapse: separate; border-spacing: 0 6px; } thead th { background: rgba(255,255,255,.04); color: var(--accent); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 10px 12px; text-align: left; font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } thead th:first-child { border-left: 1px solid var(--border-color); border-radius: 10px 0 0 10px; } thead th:last-child { border-right: 1px solid var(--border-color); border-radius: 0 10px 10px 0; } tbody td { background: rgba(20,20,20,.7); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); padding: 10px 12px; vertical-align: middle; font-size: 13px; } tbody td:first-child { border-left: 1px solid rgba(255,255,255,.05); border-radius: 10px 0 0 10px; } tbody td:last-child { border-right: 1px solid rgba(255,255,255,.05); border-radius: 0 10px 10px 0; } table td img { max-height: 120px; max-width: 100%; height: auto; width: auto; display: block; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color); } /* ===================================================================== LISTE E CELLE ===================================================================== */ .list { display: grid; gap: 8px; } .item { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(20,20,20,.7); padding: 10px 12px; transition: border-color .2s; } .item:hover { border-color: var(--border-color); } .cell { background: rgba(20,20,20,.7); border: 1px solid rgba(255,255,255,.07); padding: 10px 12px; border-radius: 12px; } /* ===================================================================== TYPEAHEAD ===================================================================== */ .ta-wrap { position: relative; display: inline-block; min-width: 260px; } .ta-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 50; background: #111; border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; max-height: 280px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,.5); } .ta-item { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; transition: background .15s; } .ta-item:hover { background: var(--accent-15); } .ta-item img { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; } /* ===================================================================== MESSAGGI FEEDBACK ===================================================================== */ .msg { font-size: 12px; margin-left: 6px; font-weight: 600; } .okText { color: #00cc44; } .errText { color: #ff3333; } /* ===================================================================== TOAST ===================================================================== */ .toast { position: fixed; right: 16px; bottom: 16px; background: rgba(20,20,20,.95); border: 1px solid var(--accent-60); color: var(--accent); padding: 12px 16px; border-radius: 12px; font-family: 'Orbitron', monospace; font-size: 11px; letter-spacing: 1px; opacity: 0; transform: translateY(10px); transition: .2s; z-index: 10000; box-shadow: 0 8px 24px var(--shadow-color); } .toast.show { opacity: 1; transform: none; } /* ===================================================================== MODALI ===================================================================== */ .modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.7); z-index: 10000; padding: 20px; backdrop-filter: blur(4px); } .modal.show { display: flex; } .modal img { max-width: min(92vw,1000px); max-height: 80vh; border-radius: 14px; border: 1px solid var(--border-color); box-shadow: 0 0 40px var(--shadow-color); } .modal .cap { margin-top: 8px; color: #555; font-size: 11px; text-align: center; letter-spacing: 1px; } .modal .close { position: absolute; top: 16px; right: 16px; background: rgba(20,20,20,.9); border: 1px solid var(--border-color); color: var(--accent); padding: 8px 12px; border-radius: 10px; cursor: pointer; font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; } .edit-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.7); z-index: 10000; padding: 20px; backdrop-filter: blur(4px); } .edit-modal[aria-hidden="false"], .edit-modal.show { display: flex; } .edit-card { width: min(980px, 96vw); max-height: 90vh; overflow-y: auto; background: rgba(15,15,15,.98); border: 1px solid var(--border-color); border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px var(--shadow-color); } /* ===================================================================== AVATAR GRID (teams.html) ===================================================================== */ .avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .avatar-card { background: rgba(20,20,20,.7); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 6px; } .avatar-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color); } /* ===================================================================== PROGRESS BAR ===================================================================== */ .progress { width: 100%; } .progress .pbar { height: 6px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; } .progress .pbar .pfill { height: 100%; width: 0%; background: var(--btn-grad); border-radius: 999px; transition: width .2s; } #uploadBar { height: 6px; width: 0%; background: var(--btn-grad); border-radius: 999px; transition: width .2s; } /* ===================================================================== THUMBNAIL ===================================================================== */ .thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color); background: rgba(0,0,0,.3); } /* ===================================================================== SELETTORE TEMA (dashboard) ===================================================================== */ .theme-selector { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .theme-selector-label { font-size: 10px; font-family: 'Orbitron', monospace; letter-spacing: 2px; text-transform: uppercase; color: #555; } .theme-dots { display: flex; gap: 10px; flex-wrap: wrap; } .theme-dot { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all .2s; position: relative; } .theme-dot:hover { transform: scale(1.15); } .theme-dot.active { border-color: #fff; transform: scale(1.2); box-shadow: 0 0 10px var(--shadow-color); } .theme-dot.active::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); } /* ===================================================================== SIDEBAR padding (gestita da menu.js) ===================================================================== */ body.ts-has-sidebar { padding-left: 260px; transition: padding-left .2s ease; } body.ts-sidebar-collapsed { padding-left: 64px; } @media (max-width: 860px) { body.ts-has-sidebar { padding-left: 64px; } } /* ===================================================================== NOME pagina (hint per navigazione) ===================================================================== */ .name { font-weight: 700; color: #e0e0e0; } .sub { font-size: 12px; color: #555; margin-top: 2px; } .hint { font-size: 11px; color: #555; margin-top: 4px; letter-spacing: .5px; } /* ===================================================================== NOTE MUSICALI FLUTTUANTI (iniettate da menu.js su ogni pagina) ===================================================================== */ .ts-note { position: fixed; font-size: 18px; opacity: 0; pointer-events: none; color: var(--accent); animation: ts-float-note 5s ease-in-out infinite; z-index: 0; } @keyframes ts-float-note { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 15% { opacity: 0.2; } 80% { opacity: 0.08; } 100% { opacity: 0; transform: translateY(-90px) rotate(20deg); } } /* ===================================================================== TIPOLOGIA UTENTE CARD (admin.html) ===================================================================== */ .tipo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; } @media (max-width: 700px) { .tipo-grid { grid-template-columns: 1fr 1fr; } } .tipo-card { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px; cursor: pointer; background: rgba(255,255,255,.03); transition: border-color .2s, background .2s; text-align: center; } .tipo-card:hover { border-color: var(--accent-60); background: var(--accent-10); } .tipo-card.selected { border-color: var(--accent); background: var(--accent-15); box-shadow: 0 0 0 2px var(--accent-30); } .tipo-card .tipo-icon { font-size: 24px; margin-bottom: 6px; } .tipo-card .tipo-label { font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); } .tipo-card .tipo-desc { font-size: 11px; color: #555; margin-top: 3px; } /* Permessi giochi */ .games-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .game-perm-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .15s; } .game-perm-item:hover { border-color: var(--accent-30); } .game-perm-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); } .game-perm-item label { font-size: 12px; cursor: pointer; margin: 0; color: #ccc; font-family: 'Montserrat', sans-serif; text-transform: none; letter-spacing: 0; } /* Pulsante filtro avatar attivo */ .btn.active-filter { background: var(--btn-grad) !important; border-color: var(--accent) !important; color: #fff !important; box-shadow: 0 0 10px var(--shadow-color); } /* ===================================================================== AVVIO SERATA — classi specifiche ===================================================================== */ .stack { display: grid; gap: 14px; } .bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .active-session-info { background: var(--accent-10); border: 1px solid var(--accent-30); border-radius: 12px; padding: 14px; display: grid; gap: 10px; } .active-session-meta { display: flex; gap: 16px; flex-wrap: wrap; } .active-session-meta > div { flex: 1; min-width: 130px; } .info-label { font-family: 'Orbitron', monospace; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; } .info-value { font-size: 15px; font-weight: 700; } .game-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* log box avvio serata */ .log { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; background: rgba(0,0,0,.4); border: 1px solid var(--border-color); border-radius: 12px; padding: 12px; min-height: 120px; color: var(--accent); } /* list dropdown (avvio serata locali) */ .list { position: relative; } .list ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-color); border-radius: 12px; background: rgba(10,10,10,.95); max-height: 220px; overflow: auto; } .list li { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer; font-size: 13px; transition: background .15s; } .list li:last-child { border-bottom: none; } .list li:hover { background: var(--accent-15); color: var(--accent); } /* ===================================================================== SELECT DROPDOWN — override stile nativo ===================================================================== */ select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; cursor: pointer; } /* Opzioni del select — il browser non supporta molto styling qui, ma impostiamo almeno background e color per i browser che lo supportano */ select option { background: #111; color: #e0e0e0; padding: 8px 12px; } select option:hover, select option:focus, select option:checked { background: var(--accent-15); color: var(--accent); } /* Fix: su macOS/Windows il dropdown nativo ignora il background delle option, ma possiamo forzare la scatola del select stesso */ select:focus option:checked { background: var(--accent) linear-gradient(0deg, var(--accent) 0%, var(--accent) 100%); color: #000; } /* ===================================================================== CUSTOM SELECT DROPDOWN Sostituisce il select nativo con un dropdown stilizzato che segue il tema colore ===================================================================== */ .ts-select-wrap { position: relative; width: 100%; } .ts-select-trigger { width: 100%; padding: 10px 36px 10px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); color: #e0e0e0; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 14px; text-align: left; position: relative; transition: border-color .2s, box-shadow .2s; display: flex; align-items: center; justify-content: space-between; gap: 8px; user-select: none; } .ts-select-trigger:after { content: ''; width: 10px; height: 10px; border-right: 2px solid #888; border-bottom: 2px solid #888; transform: rotate(45deg) translateY(-3px); flex-shrink: 0; transition: transform .2s; } .ts-select-wrap.open .ts-select-trigger:after { transform: rotate(-135deg) translateY(-3px); } .ts-select-wrap.open .ts-select-trigger, .ts-select-trigger:hover { border-color: var(--accent-60); box-shadow: 0 0 0 3px var(--accent-10); } .ts-select-wrap.open { z-index: 9999; position: relative; } .ts-select-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #0d0d0d; border: 1px solid var(--accent-30); border-radius: 10px; overflow: hidden; z-index: 1000; display: none; box-shadow: 0 10px 30px rgba(0,0,0,.6); max-height: 260px; overflow-y: auto; } .ts-select-wrap.open .ts-select-dropdown { display: block; } .ts-select-option { padding: 10px 14px; cursor: pointer; font-size: 13px; font-family: 'Montserrat', sans-serif; color: #ccc; border-bottom: 1px solid rgba(255,255,255,.04); transition: background .12s, color .12s; } .ts-select-option:last-child { border-bottom: none; } .ts-select-option:hover { background: var(--accent-15); color: var(--accent); } .ts-select-option.selected { background: var(--accent-15); color: var(--accent); font-weight: 700; } .ts-select-option.placeholder { color: #555; font-style: italic; } /* Nasconde il select nativo quando usa il custom */ .ts-select-wrap select.ts-select-native { display: none; }