:root{--primary-bg:#0c1428;--secondary-bg:#1f2c47;--tertiary-bg:#2a3a5c;--form-bg:#16213e;--input-bg:#2a3a5c;--home-color:#2563eb;--away-color:#dc2626;--text-primary:#fff;--text-secondary:#d1d5db;--accent-color:#f59e0b;--success-color:#10b981;--button-color:#3b82f6;--button-hover:#2563eb;--border-radius:12px;--input-radius:8px;--shadow:0 10px 15px -3px #0000004d;--card-shadow:0 4px 6px -1px #0003;--glow:0 0 15px #ffffff1a}*,:before,:after{box-sizing:border-box}html,body{height:100%;overflow-y:auto}.basketball-match-creator{width:100%;max-width:1000px;background-color:var(--primary-bg);color:var(--text-primary);border-radius:var(--border-radius);box-shadow:var(--shadow);min-height:min-content;flex-direction:column;margin:0 auto;font-family:Inter,Roboto,Arial,sans-serif;display:flex;overflow:visible}.creator-header{background:linear-gradient(to right,var(--secondary-bg),var(--primary-bg));text-align:center;padding:24px}.creator-header h2{background:linear-gradient(90deg,#f59e0b,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 4px #0000004d;margin:0;font-size:2rem;font-weight:700}.header-subtitle{color:var(--text-secondary);margin:8px 0 0;font-size:1rem}.creator-form{max-height:none;padding:24px;overflow:visible}.form-section{background-color:var(--form-bg);border-radius:var(--border-radius);box-shadow:var(--card-shadow);width:100%;margin-bottom:24px;padding:24px;overflow:visible}.section-title{color:var(--accent-color);border-bottom:1px solid #ffffff1a;margin:0 0 20px;padding-bottom:12px;font-size:1.25rem;font-weight:600}.form-group{width:100%;margin-bottom:20px}.form-row{width:100%;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;display:grid}label{color:var(--text-secondary);margin-bottom:8px;font-size:.9rem;font-weight:500;display:block}input[type=text],input[type=number]{width:100%;background-color:var(--input-bg);border-radius:var(--input-radius);color:var(--text-primary);border:1px solid #ffffff1a;outline:none;padding:12px 16px;font-family:inherit;font-size:1rem;transition:all .2s}input:focus{border-color:var(--accent-color);box-shadow:0 0 0 2px #f59e0b4d}.input-with-suffix{width:100%;align-items:center;display:flex;position:relative}.input-with-suffix input{width:100%;padding-right:40px}.input-suffix{color:var(--text-secondary);pointer-events:none;font-size:.85rem;position:absolute;right:16px}.teams-container{width:100%;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;display:grid}.team-form{background:var(--secondary-bg);border-radius:var(--border-radius);width:100%;min-width:0;padding:20px;transition:transform .2s}.team-form:hover{transform:translateY(-4px)}.team-header{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px;display:flex}.team-color{width:16px;height:16px;border-radius:50%;flex-shrink:0}.team-color.home{background-color:var(--home-color);box-shadow:0 0 10px #2563eb99}.team-color.away{background-color:var(--away-color);box-shadow:0 0 10px #dc262699}.team-header h4{word-break:break-word;margin:0;font-size:1.1rem;font-weight:600}.versus-divider{color:var(--accent-color);text-align:center;font-size:1.5rem;font-weight:700}.creator-actions{width:100%;justify-content:center;padding:0 24px 24px;display:flex}.create-match-button{background:linear-gradient(to right,var(--button-color),var(--button-hover));color:#fff;border-radius:var(--input-radius);cursor:pointer;min-width:200px;border:none;justify-content:center;align-items:center;gap:10px;padding:14px 32px;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex}.create-match-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.create-match-button:disabled{opacity:.7;cursor:not-allowed}.spinner{width:20px;height:20px;border:3px solid #ffffff4d;border-top-color:#fff;border-radius:50%;animation:1s infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:768px){.creator-header{padding:20px}.creator-header h2{font-size:1.75rem}.creator-form{width:100%;padding:16px}.form-section{margin-bottom:16px;padding:16px}.form-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}.team-form{padding:16px}}@media (max-width:640px){.teams-container{width:100%;grid-template-columns:1fr;grid-template-areas:"home""versus""away";gap:12px}.team-form.home-team{width:100%;grid-area:home;margin:0 0 8px}.versus-divider{height:auto;grid-area:versus;margin:8px 0}.team-form.away-team{width:100%;grid-area:away;margin:8px 0 0}.creator-header h2{font-size:1.5rem}.form-group{margin-bottom:16px}.input-with-suffix input{padding-right:36px}.input-suffix{font-size:.8rem;right:12px}}@media (max-width:480px){.form-row{grid-template-columns:1fr;gap:12px}.form-group{margin-bottom:16px}.form-section{margin-bottom:12px;padding:12px}.section-title{margin-bottom:16px;font-size:1.1rem}input[type=text],input[type=number]{padding:10px 14px;font-size:.95rem}.create-match-button{width:100%;min-width:0;padding:12px;font-size:1rem}.team-form{padding:12px}.team-header h4{font-size:1rem}.creator-form>:last-child{margin-bottom:0}}@media (max-width:320px){.creator-header{padding:16px 12px}.creator-header h2{font-size:1.25rem}.header-subtitle{font-size:.85rem}.creator-form{padding:12px 8px}.form-section,.team-form{padding:10px}.team-header h4{font-size:.9rem}label{font-size:.85rem}input[type=text],input[type=number]{padding:8px 12px;font-size:.9rem}.create-match-button{padding:10px;font-size:.9rem}}@media (max-height:800px){.creator-header{padding:16px}.creator-header h2{font-size:1.75rem}.header-subtitle{margin-top:4px}.form-section{margin-bottom:18px;padding:18px}.section-title{margin-bottom:16px;padding-bottom:8px}.form-group{margin-bottom:16px}}@media (max-height:700px){.creator-header{padding:12px}.creator-header h2{font-size:1.5rem}.form-section{margin-bottom:14px;padding:14px}.section-title{margin-bottom:12px;padding-bottom:6px;font-size:1.1rem}.form-group{margin-bottom:12px}.team-form{padding:16px}.team-header{margin-bottom:12px}.teams-container{gap:15px}}@media (max-height:600px){.creator-header{padding:10px}.creator-header h2{font-size:1.25rem}.header-subtitle{margin-top:2px;font-size:.9rem}.creator-form{padding:12px}.form-section{margin-bottom:12px;padding:12px}.section-title{margin-bottom:10px;padding-bottom:5px;font-size:1rem}.form-group{margin-bottom:10px}.team-form{padding:12px}.team-header{margin-bottom:8px}.team-header h4{font-size:1rem}.versus-divider{font-size:1.25rem}label{margin-bottom:4px;font-size:.85rem}input[type=text],input[type=number]{padding:8px 12px;font-size:.9rem}.create-match-button{padding:10px 24px;font-size:1rem}.creator-actions{padding:0 12px 12px}}@media (max-height:500px){.teams-container{grid-template-columns:1fr 1fr;grid-template-areas:"home away";gap:10px}.team-form.home-team{grid-area:home}.team-form.away-team{grid-area:away}.versus-divider{display:none}.creator-header{padding:8px}.creator-header h2{font-size:1.1rem}.header-subtitle{margin-top:2px;font-size:.8rem}.creator-form{padding:8px}.form-section{margin-bottom:10px;padding:10px}.section-title{margin-bottom:8px;padding-bottom:4px;font-size:.9rem}.create-match-button{min-width:160px;padding:8px 20px;font-size:.9rem}.creator-actions{padding:0 8px 8px}.form-row{gap:8px}.form-group{margin-bottom:8px}input[type=text],input[type=number]{padding:6px 10px;font-size:.85rem}.team-form{padding:10px}.team-header{margin-bottom:6px}.team-color{width:12px;height:12px}}@media (max-width:480px) and (max-height:600px){.teams-container{grid-template-columns:1fr;grid-template-areas:"home""away";gap:8px}.versus-divider{display:none}.team-form{padding:8px}.form-section{margin-bottom:8px;padding:8px}.section-title{margin-bottom:6px}.basketball-match-creator{padding-bottom:8px}}.creator-actions{z-index:2;margin-top:auto;position:relative}