@charset "UTF-8";:root{--purple: #8B5CF6;--purple-l: #EDE9FE;--pink: #EC4899;--pink-l: #FCE7F3;--orange: #F97316;--orange-l: #FFF7ED;--yellow: #F59E0B;--yellow-l: #FFFBEB;--green: #10B981;--green-l: #D1FAE5;--cyan: #06B6D4;--cyan-l: #CFFAFE;--red: #EF4444;--red-l: #FEE2E2;--blue: #3B82F6;--blue-l: #DBEAFE;--bg: #F0F4FF;--white: #FFFFFF;--text: #1E1B4B;--text-mid: #4B5563;--text-dim: #9CA3AF;--border: #E5E7EB;--shadow: 0 4px 24px rgba(0,0,0,.08);--shadow-m: 0 8px 36px rgba(0,0,0,.13)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:Nunito,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;background-image:radial-gradient(circle at 10% 15%,rgba(139,92,246,.1) 0%,transparent 35%),radial-gradient(circle at 90% 80%,rgba(236,72,153,.1) 0%,transparent 35%),radial-gradient(circle at 55% 45%,rgba(6,182,212,.06) 0%,transparent 40%)}.btn{border:none;border-radius:30px;cursor:pointer;font-family:Nunito,sans-serif;font-weight:800;letter-spacing:1px;text-transform:uppercase;transition:all .2s;display:inline-flex;align-items:center;gap:8px}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn.btn-primary{background:linear-gradient(135deg,var(--purple),#6D28D9);color:#fff;padding:11px 26px;font-size:14px;box-shadow:0 4px 18px #8b5cf666}.btn.btn-primary:hover{box-shadow:0 6px 24px #8b5cf68c}.btn.btn-green{background:linear-gradient(135deg,var(--green),#059669);color:#fff;padding:11px 26px;font-size:14px;box-shadow:0 4px 18px #10b98159}.btn.btn-green:hover{box-shadow:0 6px 24px #10b98180}.btn.btn-red{background:linear-gradient(135deg,var(--red),#DC2626);color:#fff;padding:9px 18px;font-size:13px;box-shadow:0 3px 12px #ef44444d}.btn.btn-cyan{background:linear-gradient(135deg,var(--cyan),#0891B2);color:#fff;padding:9px 18px;font-size:13px;box-shadow:0 3px 12px #06b6d44d}.btn.btn-yellow{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:9px 18px;font-size:13px;box-shadow:0 3px 12px #f59e0b4d}.btn.btn-purple{background:linear-gradient(135deg,var(--purple),#7C3AED);color:#fff;padding:9px 18px;font-size:13px;box-shadow:0 3px 12px #8b5cf64d}.btn.btn-outline{background:#fff;color:var(--purple);border:2.5px solid var(--purple);padding:9px 18px;font-size:13px}.btn.btn-outline:hover{background:var(--purple-l)}.btn.btn-sm{padding:7px 14px!important;font-size:12px!important}.card{background:#fff;border:2px solid var(--border);border-radius:22px;padding:26px;box-shadow:var(--shadow);position:relative;overflow:hidden}.card.card-rainbow:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--purple),var(--pink),var(--orange),var(--yellow),var(--green),var(--cyan))}.badge{display:inline-block;padding:4px 13px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.badge.badge-active{background:var(--green-l);color:var(--green);border:1.5px solid #6EE7B7}.badge.badge-playing{background:#fff7ed;color:var(--orange);border:1.5px solid #FDBA74;animation:playingPulse 1.8s ease-in-out infinite alternate}.badge.badge-closed{background:#f3f4f6;color:#9ca3af;border:1.5px solid var(--border)}@keyframes playingPulse{0%{box-shadow:0 0 #f9731600}to{box-shadow:0 0 0 5px #f9731626}}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}table thead th{background:#f8f9ff;color:var(--text-dim);font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:13px 16px;text-align:left;border-bottom:2px solid var(--border)}table tbody tr{border-bottom:1px solid #F3F4F6;transition:background .15s}table tbody tr:hover{background:#fafbff}table tbody td{padding:14px 16px;font-size:14px;font-weight:600}.page-title{font-family:Fredoka One,cursive;font-size:44px;letter-spacing:2px;background:linear-gradient(90deg,var(--purple),var(--pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:4px}.page-sub{color:var(--text-dim);font-size:14px;margin-bottom:28px;font-weight:700}.divider{height:2px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:20px 0}.empty-state{text-align:center;padding:60px 20px;color:var(--text-dim)}.empty-state .icon{font-size:52px;margin-bottom:12px}.empty-state p{font-size:15px;font-weight:700}.hint-box{background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1.5px solid #FCD34D;border-radius:12px;padding:10px 14px;font-size:13px;color:#92400e;font-weight:800;margin-bottom:14px}.form-group{margin-bottom:18px}.form-group label{display:block;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}.form-group input,.form-group select{width:100%;background:#f8f9ff;border:2px solid var(--border);border-radius:12px;padding:11px 14px;color:var(--text);font-size:15px;font-family:Nunito,sans-serif;font-weight:700;transition:border-color .2s;outline:none}.form-group input:focus,.form-group select:focus{border-color:var(--purple);box-shadow:0 0 0 3px #8b5cf626}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes logoBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes floatDot{0%{transform:translateY(105vh) rotate(0)}to{transform:translateY(-10vh) rotate(360deg)}}
