:root{--bg: #0a0a1a;--bg-card: #12122a;--bg-card2: #1a1a3a;--gold: #ffd700;--gold-dim: #b8960c;--purple: #7c3aed;--purple-l: #a855f7;--purple-dim:#4c1d95;--text: #f0f0ff;--text-dim: #8888aa;--border: rgba(124,58,237,.3);--border-g: rgba(255,215,0,.25);--red: #ef4444;--green: #22c55e;--radius: 12px;--shadow: 0 4px 24px rgba(0,0,0,.5)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;background-color:var(--bg);color:var(--text);min-height:100vh;background-image:radial-gradient(1.5px 1.5px at 10% 8%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 25% 20%,#fff 0%,transparent 100%),radial-gradient(1.5px 1.5px at 40% 5%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 55% 15%,#fff 0%,transparent 100%),radial-gradient(1.5px 1.5px at 70% 3%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 85% 12%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 5% 30%,#fff 0%,transparent 100%),radial-gradient(1.5px 1.5px at 18% 45%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 32% 38%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 48% 50%,#fff 0%,transparent 100%),radial-gradient(1.5px 1.5px at 63% 33%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 78% 28%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 92% 42%,#fff 0%,transparent 100%),radial-gradient(1.5px 1.5px at 8% 60%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 22% 68%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 37% 75%,#fff 0%,transparent 100%),radial-gradient(1.5px 1.5px at 52% 62%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 67% 80%,#fff 0%,transparent 100%),radial-gradient(1px 1px at 82% 55%,#fff 0%,transparent 100%),radial-gradient(1.5px 1.5px at 96% 70%,#fff 0%,transparent 100%);background-repeat:repeat;background-size:400px 300px;-webkit-font-smoothing:antialiased}a{color:var(--purple-l);text-decoration:none}a:hover{text-decoration:underline}button{cursor:pointer;font-family:inherit}.app-header{background:linear-gradient(135deg,#0d0d28,#1a0a3e,#0d0d28);border-bottom:1px solid var(--border-g);padding:0 1rem;box-shadow:0 2px 20px #7c3aed4d;position:sticky;top:0;z-index:100}.header-inner{max-width:1200px;margin:0 auto;height:56px;display:flex;align-items:center;justify-content:space-between}.header-logo{font-size:1.4rem;font-weight:800;letter-spacing:-.5px;background:linear-gradient(90deg,var(--gold),var(--purple-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none!important}.header-nav{display:flex;gap:.75rem;align-items:center}.header-nav a{color:var(--text-dim);font-size:.85rem;font-weight:500;padding:.3rem .6rem;border-radius:6px;transition:color .2s,background .2s;text-decoration:none}.header-nav a:hover{color:var(--text);background:#ffffff0f}@media (max-width: 480px) and (orientation: portrait){.header-username{display:none}}.page{max-width:1200px;margin:0 auto;padding:2rem 1rem}.page-title{font-size:2rem;font-weight:800;background:linear-gradient(90deg,var(--gold),var(--purple-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1.5rem}.page-sub{color:var(--text-dim);margin-top:-.75rem;margin-bottom:1.5rem;font-size:.95rem}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);transition:border-color .2s,transform .15s}.card:hover{border-color:var(--purple-l)}.card-clickable{cursor:pointer}.card-clickable:hover{transform:translateY(-2px);border-color:var(--gold)}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;border-radius:8px;font-weight:600;font-size:.9rem;border:none;transition:opacity .2s,transform .1s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--purple);color:#fff}.btn-primary:hover:not(:disabled){background:var(--purple-l)}.btn-gold{background:var(--gold);color:#000;font-weight:700}.btn-gold:hover:not(:disabled){background:#ffe033}.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}.btn-outline:hover:not(:disabled){border-color:var(--purple-l);background:#7c3aed1a}.btn-danger{background:var(--red);color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.btn-sm{padding:.35rem .75rem;font-size:.8rem}.form-group{margin-bottom:1rem}.form-label{display:block;margin-bottom:.4rem;font-size:.85rem;color:var(--text-dim);font-weight:500}.form-input{width:100%;padding:.6rem .9rem;background:var(--bg-card2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.95rem;transition:border-color .2s;font-family:inherit}.form-input:focus{outline:none;border-color:var(--purple-l)}.form-input::placeholder{color:var(--text-dim)}.party-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}.country-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.country-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:1rem;transition:border-color .2s}.country-card.has-vote{border-color:var(--purple)}.country-card.has-12{border-color:var(--gold);box-shadow:0 0 20px #ffd70033}.card-top{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:.75rem}.flag{font-size:2.5rem;line-height:1;flex-shrink:0}.card-info{flex:1;min-width:0}.card-country{font-size:1rem;font-weight:700;color:var(--text)}.card-artist{font-size:.85rem;color:var(--text-dim);margin-top:2px}.card-song{display:flex;align-items:center;gap:.4rem;margin-top:3px}.card-song-name{font-size:.8rem;color:var(--text-dim);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#ffffff1a;color:var(--text);font-size:.7rem;transition:background .2s;text-decoration:none!important;border:1px solid rgba(255,255,255,.15)}.play-btn:hover{background:var(--purple);border-color:var(--purple)}.points-row{display:flex;flex-wrap:wrap;gap:.35rem}.point-btn{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.15);background:#ffffff0d;color:var(--text-dim);font-size:.8rem;font-weight:700;transition:all .15s;flex-shrink:0}.point-btn:hover{border-color:var(--purple-l);color:var(--text);background:#7c3aed33}.point-btn.selected{background:var(--purple);border-color:var(--purple-l);color:#fff;box-shadow:0 0 10px #7c3aed80}.point-btn.selected-12{background:var(--gold);border-color:var(--gold);color:#000;box-shadow:0 0 14px #ffd70080}.point-btn.taken{opacity:.35;border-style:dashed}.point-btn.taken:hover{opacity:.6}.progress-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem 1rem;margin-bottom:1.5rem}.progress-label{font-size:.8rem;color:var(--text-dim);margin-bottom:.5rem}.progress-dots{display:flex;gap:.35rem;flex-wrap:wrap}.progress-dot{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-size:.75rem;font-weight:700;border:2px solid rgba(255,255,255,.1);color:var(--text-dim);background:transparent;transition:all .2s}.progress-dot.used{background:var(--purple);border-color:var(--purple-l);color:#fff}.progress-dot.used-12{background:var(--gold);border-color:var(--gold);color:#000}.ranking-list{display:flex;flex-direction:column;gap:.5rem}.ranking-row{display:grid;grid-template-columns:2.5rem 2.5rem 1fr auto auto;align-items:center;gap:.75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:.65rem 1rem;transition:border-color .2s}.ranking-row:hover{border-color:var(--purple)}.rank-pos{font-size:1.1rem;font-weight:800;text-align:center;color:var(--text-dim)}.rank-pos.gold{color:var(--gold)}.rank-pos.silver{color:silver}.rank-pos.bronze{color:#cd7f32}.rank-flag{font-size:1.6rem;text-align:center}.rank-info{min-width:0}.rank-name{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-artist{font-size:.8rem;color:var(--text-dim)}.rank-bar-wrap{width:120px}.rank-bar-bg{height:8px;background:#ffffff14;border-radius:4px;overflow:hidden}.rank-bar{height:100%;border-radius:4px;background:var(--purple);transition:width .4s}.rank-bar.top1{background:linear-gradient(90deg,var(--gold),var(--purple-l))}.rank-points{font-size:1.2rem;font-weight:800;color:var(--gold);min-width:40px;text-align:right}.matrix-wrap{overflow-x:auto;margin-top:2rem;border-radius:var(--radius);border:1px solid var(--border)}.matrix-table{width:100%;border-collapse:collapse;font-size:.78rem;white-space:nowrap;min-width:600px}.matrix-table th,.matrix-table td{padding:.45rem .6rem;border:1px solid rgba(255,255,255,.06);text-align:center}.matrix-table th{background:var(--bg-card2);color:var(--text-dim);font-weight:600;position:sticky;top:0}.matrix-table th.country-th{text-align:left;min-width:130px}.matrix-table td.country-td{text-align:left;background:var(--bg-card2);position:sticky;left:0}.matrix-table tr:nth-child(2n) td{background:#ffffff04}.matrix-table tr:nth-child(2n) td.country-td{background:var(--bg-card)}.matrix-pts-12{color:var(--gold);font-weight:800}.matrix-pts-10{color:#d4a017;font-weight:700}.matrix-pts-8{color:var(--purple-l);font-weight:600}.matrix-pts-low{color:var(--text-dim)}.matrix-pts-0{color:#ffffff1f}.member-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);padding:1.25rem;text-align:center;cursor:pointer;transition:border-color .2s,transform .15s,box-shadow .15s}.member-card:hover{border-color:var(--purple-l);transform:translateY(-3px);box-shadow:0 8px 24px #7c3aed40}.member-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;margin:0 auto .75rem;color:#fff}.member-name{font-weight:700;font-size:1rem}.member-votes{font-size:.8rem;color:var(--text-dim);margin-top:.25rem}.toast{position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%) translateY(0);background:var(--bg-card2);border:1px solid var(--border);border-radius:8px;padding:.65rem 1.25rem;font-size:.9rem;font-weight:600;z-index:9999;animation:slideUp .25s ease;box-shadow:0 8px 32px #0009}.toast.success{border-color:var(--green);color:var(--green)}.toast.error{border-color:var(--red);color:var(--red)}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.spinner{display:flex;align-items:center;justify-content:center;padding:4rem;font-size:1.5rem;color:var(--text-dim);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-msg{background:#ef44441a;border:1px solid var(--red);border-radius:var(--radius);padding:1rem;color:var(--red);text-align:center}.badge{display:inline-block;padding:.2rem .55rem;border-radius:20px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.badge-active{background:#22c55e26;color:var(--green);border:1px solid rgba(34,197,94,.3)}.badge-archived{background:#ffffff0d;color:var(--text-dim);border:1px solid rgba(255,255,255,.1)}.divider{height:1px;background:var(--border);margin:1.5rem 0}@media (max-width: 640px){.page{padding:1rem .75rem}.page-title{font-size:1.5rem}.ranking-row{grid-template-columns:2rem 2rem 1fr auto}.rank-bar-wrap{display:none}.country-grid{grid-template-columns:1fr}.member-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.points-row{gap:.25rem}.point-btn{width:32px;height:32px;font-size:.75rem}}