*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#fff;--surface:#f4f6f8;--surface-2:#eaecef;--border:#d1d5db;--border-dark:#9ca3af;--text-main:#111827;--text-sub:#6b7280;--text-light:#9ca3af;--primary:#2563eb;--primary-mid:#1d4ed8;--primary-light:#dbeafe;--green-field:#2d6a4f;--red:#dc2626;--red-light:#fef2f2;--white:#fff;--radius:12px;--radius-sm:8px;--shadow:0 1px 4px #00000014, 0 4px 16px #0000000f;--transition:.18s ease}html{scroll-behavior:smooth;font-size:16px}body{background-color:var(--bg);color:var(--text-main);-webkit-font-smoothing:antialiased;flex-direction:column;min-height:100dvh;font-family:Inter,sans-serif;display:flex;overflow-x:hidden}.app-header{z-index:100;background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;max-width:640px;margin:0 auto;padding:14px 20px;display:flex}.header-logo{align-items:center;gap:10px;display:flex}.logo-icon{width:32px;height:32px;color:var(--primary);flex-shrink:0}.logo-text{letter-spacing:.06em;color:var(--text-main);font-family:Bebas Neue,sans-serif;font-size:1.5rem;line-height:1}.main-content{flex-direction:column;flex:1;align-items:center;gap:20px;width:100%;max-width:640px;margin:0 auto;padding:28px 16px 56px;display:flex}.card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);width:100%;padding:24px 20px}.card-header{align-items:center;gap:12px;margin-bottom:22px;display:flex}.card-header h2{color:var(--text-main);flex:1;font-size:1rem;font-weight:700}.step-badge{background:var(--primary);width:26px;height:26px;color:var(--white);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.78rem;font-weight:800;display:flex}.teams-grid{grid-template-columns:1fr 44px 1fr;align-items:start;gap:10px;display:grid}.team-column{flex-direction:column;min-width:0;display:flex}.teams-divider{color:var(--text-sub);text-align:center;letter-spacing:.08em;padding-top:38px;font-family:Bebas Neue,sans-serif;font-size:1.3rem}.team-name-input{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-main);transition:var(--transition);text-align:center;outline:none;padding:10px 12px;font-family:Inter,sans-serif;font-size:.92rem;font-weight:700}.team-name-input::placeholder{color:var(--text-light);font-weight:400}.team-name-input:focus{border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px #2563eb1f}.players-list{flex-direction:column;gap:6px;margin:10px 0 8px;list-style:none;display:flex}.player-item{align-items:center;gap:5px;animation:.16s slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.player-number{color:var(--text-light);text-align:right;flex-shrink:0;width:16px;font-size:.7rem;font-weight:700}.player-input{background:var(--surface);border:1.5px solid var(--border);color:var(--text-main);transition:var(--transition);border-radius:6px;outline:none;flex:1;min-width:0;padding:7px 9px;font-family:Inter,sans-serif;font-size:.83rem}.player-input::placeholder{color:var(--text-light);font-size:.78rem}.player-input:focus{border-color:var(--primary);background:var(--white);box-shadow:0 0 0 2px #2563eb1a}.player-remove{color:var(--text-light);cursor:pointer;width:24px;height:24px;transition:var(--transition);background:0 0;border:none;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.player-remove:hover{color:var(--red);background:var(--red-light)}.player-remove svg{pointer-events:none}.btn-add-player{color:var(--primary);background:var(--primary-light);border-radius:var(--radius-sm);cursor:pointer;width:100%;transition:var(--transition);border:1.5px solid #bfdbfe;justify-content:center;align-items:center;gap:5px;padding:7px 10px;font-family:Inter,sans-serif;font-size:.78rem;font-weight:600;display:flex}.btn-add-player:hover{background:#bfdbfe;border-color:#93c5fd}.score-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}.score-team-label{color:var(--text-sub);text-align:center;word-break:break-word;text-transform:uppercase;letter-spacing:.05em;max-width:100px;font-size:.78rem;font-weight:700}.score-inputs{align-items:center;gap:12px;display:flex}.score-input{text-align:center;background:var(--surface);border:2px solid var(--border);border-radius:var(--radius-sm);width:66px;height:66px;color:var(--text-main);transition:var(--transition);-moz-appearance:textfield;outline:none;font-family:Bebas Neue,sans-serif;font-size:2.4rem}.score-input::-webkit-inner-spin-button{-webkit-appearance:none}.score-input::-webkit-outer-spin-button{-webkit-appearance:none}.score-input:focus{border-color:var(--primary);background:var(--white);box-shadow:0 0 0 3px #2563eb1f}.score-dash{color:var(--text-light);font-size:1.6rem;font-weight:300}.generate-wrap{justify-content:center;width:100%;display:flex}.btn-generate{letter-spacing:.02em;color:var(--white);background:var(--primary);cursor:pointer;transition:var(--transition);border:none;border-radius:50px;padding:14px 44px;font-family:Inter,sans-serif;font-size:.95rem;font-weight:700}.btn-generate:hover{background:var(--primary-mid);transform:translateY(-1px)}.btn-generate:active{transform:translateY(0)}.card-preview .card-header{justify-content:space-between}.btn-share{color:var(--white);background:var(--primary);cursor:pointer;transition:var(--transition);border:none;border-radius:50px;align-items:center;gap:7px;padding:9px 18px;font-family:Inter,sans-serif;font-size:.85rem;font-weight:700;display:flex}.btn-share:hover{background:var(--primary-mid);transform:translateY(-1px)}.canvas-wrap{border-radius:var(--radius-sm);border:1.5px solid var(--border);box-sizing:border-box;width:100%;overflow:hidden}#result-canvas{max-width:100%;display:block}.share-actions{justify-content:center;margin-top:14px;display:flex}.btn-download{color:var(--text-sub);background:var(--surface);border:1.5px solid var(--border);cursor:pointer;transition:var(--transition);border-radius:50px;align-items:center;gap:6px;padding:9px 22px;font-family:Inter,sans-serif;font-size:.85rem;font-weight:600;display:flex}.btn-download:hover{color:var(--text-main);border-color:var(--border-dark);background:var(--surface-2)}.app-footer{text-align:center;color:var(--text-light);border-top:1px solid var(--border);padding:20px 16px;font-size:.78rem}.hidden{display:none!important}@media (width<=520px){.header-inner{padding:12px 14px}.logo-text{font-size:1.2rem}.card{padding:18px 14px}.score-input{width:58px;height:58px;font-size:2rem}.btn-generate{width:100%;padding:13px 32px}.teams-grid{grid-template-columns:1fr;gap:12px}.teams-divider{padding:6px 0;font-size:1.1rem}}