*{margin:0;padding:0;box-sizing:border-box}:root{--bg:#0a1628;--bg2:#0d1f3c;--bg3:#132744;--gold:#FFD700;--green:#4CAF50;--red:#e53935;--yellow:#FFC107;--text:#e8e8e8;--text2:#9aa8c0;--card:#111d33;--card-border:#1a2d4d;--glow:rgba(255,215,0,.15)}body{font-family:Fira Sans,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}h1,h2,h3,h4{font-family:Montserrat,sans-serif}#loginScreen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#0a1628,#1a2a4a,#0a1628);position:relative;overflow:hidden}#loginScreen:before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,215,0,.06),transparent 70%);top:-200px;right:-100px}.login-box{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:48px 40px;width:380px;max-width:90vw;text-align:center;box-shadow:0 20px 60px #00000080;position:relative}.login-box:before{content:"";position:absolute;top:-1px;left:20%;right:20%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.login-logo{font-family:Montserrat,sans-serif;font-weight:900;font-size:28px;color:var(--gold);letter-spacing:2px;margin-bottom:6px}.login-sub{color:var(--text2);font-size:13px;margin-bottom:32px;letter-spacing:1px}.login-box input{width:100%;padding:14px 16px;margin-bottom:14px;background:#0a1628;border:1px solid var(--card-border);border-radius:8px;color:var(--text);font-size:15px;font-family:Fira Sans,sans-serif;transition:border-color .3s}.login-box input:focus{outline:none;border-color:var(--gold)}.login-box input::placeholder{color:#4a5a7a}.btn{width:100%;padding:14px;border:none;border-radius:8px;font-family:Montserrat,sans-serif;font-weight:700;font-size:15px;cursor:pointer;transition:all .3s;letter-spacing:1px}.btn-primary{background:linear-gradient(135deg,#4caf50,#2d8a33);color:#fff;margin-bottom:10px}.btn-primary:hover{box-shadow:0 4px 20px #4caf5066;transform:translateY(-1px)}.btn-demo{background:linear-gradient(135deg,var(--gold),#e6c200);color:#0a1628;margin-bottom:10px}.btn-demo:hover{box-shadow:0 4px 20px #ffd70066;transform:translateY(-1px)}.btn-outline{background:transparent;border:1px solid var(--card-border);color:var(--text2)}.btn-outline:hover{border-color:var(--gold);color:var(--gold)}.staff-toggle{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;color:var(--text2);font-size:13px;cursor:pointer;-webkit-user-select:none;user-select:none}.staff-toggle .toggle{width:36px;height:20px;background:#1a2d4d;border-radius:10px;position:relative;transition:background .3s}.staff-toggle .toggle:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#4a5a7a;border-radius:50%;transition:all .3s}.staff-toggle.active .toggle{background:var(--gold)}.staff-toggle.active .toggle:after{left:18px;background:#0a1628}#dashboard{display:none;max-width:1000px;margin:0 auto;padding-bottom:60px}.header{position:relative;margin-bottom:30px}.cover{width:100%;height:280px;object-fit:cover;border-radius:0 0 16px 16px;display:block;filter:brightness(.8)}.cover-fallback{width:100%;height:280px;background:linear-gradient(135deg,#1a2a4a,#0d1f3c);border-radius:0 0 16px 16px}.header-info{position:relative;padding:0 24px;margin-top:-60px;display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}.profile-pic{width:120px;height:120px;border-radius:50%;border:4px solid var(--gold);object-fit:cover;background:var(--card);box-shadow:0 4px 20px #00000080;flex-shrink:0}.profile-pic-fallback{width:120px;height:120px;border-radius:50%;border:4px solid var(--gold);background:linear-gradient(135deg,var(--bg2),var(--bg3));display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;color:var(--gold);font-family:Montserrat,sans-serif;flex-shrink:0}.header-text{flex:1;min-width:200px;padding-bottom:8px}.header-text h1{font-size:28px;font-weight:800;margin-bottom:2px}.header-text .meta{color:var(--text2);font-size:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}.meta-dot{width:8px;height:8px;background:var(--green);border-radius:50%;display:inline-block;box-shadow:0 0 8px var(--green)}.overall-badge{width:80px;height:80px;position:relative;flex-shrink:0;margin-left:auto}.overall-badge canvas{width:80px;height:80px}.overall-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:Montserrat,sans-serif;font-weight:900;font-size:28px;color:#fff;text-shadow:0 0 20px rgba(255,215,0,.5)}.header-stats{display:flex;gap:20px;padding:16px 24px;flex-wrap:wrap}.header-stat{text-align:center}.header-stat .val{font-family:Montserrat,sans-serif;font-weight:800;font-size:40px;color:var(--gold)}.header-stat .lbl{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:1px}.card{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:24px;margin:0 12px 20px;position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--card-border),transparent)}.card h2{font-size:18px;font-weight:700;margin-bottom:16px;color:var(--gold);letter-spacing:1px;text-transform:uppercase;font-size:14px}.card h2 .edit-btn{float:right;background:var(--bg);border:1px solid var(--card-border);color:var(--text2);padding:4px 12px;border-radius:6px;font-size:11px;cursor:pointer;font-family:Fira Sans,sans-serif;display:none}.staff-mode .card h2 .edit-btn{display:inline-block}.card h2 .edit-btn:hover{border-color:var(--gold);color:var(--gold)}.hex-container{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:center}.hex-chart{width:200px;height:200px;flex-shrink:0}.hex-chart canvas{width:100%;height:100%}.skill-bars{flex:1;min-width:300px}.skill-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}.skill-bar-label{width:120px;font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;color:var(--gold);text-align:right}.skill-bar-track{flex:1;height:36px;background:#1a2d4d80;border-radius:8px;overflow:hidden;position:relative}.skill-bar-fill{height:100%;background:linear-gradient(90deg,#4caf50,gold);border-radius:8px;transition:width 1s ease}.skill-bar-val{width:50px;font-family:Montserrat,sans-serif;font-weight:800;font-size:22px;color:var(--text)}.sub-skills{flex:1;min-width:260px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.sub-skill-group h4{font-size:12px;color:var(--gold);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}.sub-skill-item{display:flex;justify-content:space-between;font-size:16px;color:var(--text2);padding:2px 0}.sub-skill-item span:last-child{color:var(--text);font-weight:600}.skill-edit{display:none;gap:4px;align-items:center}.staff-mode .skill-edit{display:inline-flex}.skill-edit button{width:22px;height:22px;border:1px solid var(--card-border);background:var(--bg);color:var(--text);border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}.skill-edit button:hover{border-color:var(--gold);color:var(--gold)}.match-table{width:100%;border-collapse:collapse;font-size:13px}.match-table th{text-align:left;padding:8px 10px;color:var(--text2);font-weight:500;border-bottom:1px solid var(--card-border);font-size:11px;text-transform:uppercase;letter-spacing:1px}.match-table td{padding:8px 10px;border-bottom:1px solid rgba(26,45,77,.5)}.match-table tr.win{border-left:3px solid var(--green)}.match-table tr.draw{border-left:3px solid var(--yellow)}.match-table tr.loss{border-left:3px solid var(--red)}.match-summary{display:flex;gap:24px;margin-top:16px;flex-wrap:wrap}.match-summary .stat{text-align:center;padding:12px 20px;background:var(--bg);border-radius:8px;min-width:100px}.match-summary .stat .val{font-family:Montserrat,sans-serif;font-weight:800;font-size:48px}.match-summary .stat .lbl{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-top:2px}.table-wrap{overflow-x:auto}.progress-chart{width:100%;height:200px}.progress-chart svg{width:100%;height:100%}.att-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:400px}.att-cell{width:100%;aspect-ratio:1;border-radius:3px;position:relative}.att-cell.present{background:var(--green)}.att-cell.late{background:var(--yellow)}.att-cell.absent{background:var(--red)}.att-cell.none{background:#1a2d4d}.att-cell.empty{background:transparent}.att-legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--text2)}.att-legend span{display:flex;align-items:center;gap:4px}.att-legend span:before{content:"";width:10px;height:10px;border-radius:2px}.att-legend .l-present:before{background:var(--green)}.att-legend .l-late:before{background:var(--yellow)}.att-legend .l-absent:before{background:var(--red)}.att-legend .l-none:before{background:#1a2d4d}.att-stats{display:flex;gap:20px;margin-top:12px;font-size:14px}.att-stats strong{color:var(--gold)}.med-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.med-item{background:var(--bg);border-radius:8px;padding:14px}.med-item .lbl{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}.med-item .val{font-size:18px;font-weight:500}.med-item.warn .val{color:var(--yellow)}.med-item.good .val{color:var(--green)}.note{background:var(--bg);border-radius:8px;padding:16px;margin-bottom:10px;border-left:3px solid var(--gold)}.note .note-text{font-style:italic;line-height:1.6;margin-bottom:8px;font-size:16px}.note .note-author{font-size:12px;color:var(--text2)}.add-note{display:none;margin-top:12px}.staff-mode .add-note{display:block}.add-note textarea{width:100%;padding:12px;background:var(--bg);border:1px solid var(--card-border);border-radius:8px;color:var(--text);font-family:Fira Sans,sans-serif;font-size:14px;resize:vertical;min-height:80px}.add-note textarea:focus{outline:none;border-color:var(--gold)}.add-note button{margin-top:8px;padding:8px 20px;background:var(--gold);color:#0a1628;border:none;border-radius:6px;font-weight:600;cursor:pointer}.suggestion{background:var(--bg);border-radius:8px;padding:14px;margin-bottom:10px}.suggestion .sug-title{font-weight:600;margin-bottom:8px;font-size:14px}.suggestion .sug-desc{font-size:13px;color:var(--text2);margin-bottom:10px}.progress-bar{height:6px;background:#1a2d4d;border-radius:3px;overflow:hidden}.progress-bar .fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--gold));transition:width 1.5s ease}.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}.badge-item{text-align:center;padding:20px 10px;background:var(--bg);border-radius:10px;border:1px solid var(--card-border);transition:all .3s}.badge-item:hover{border-color:var(--gold);box-shadow:0 0 20px var(--glow)}.badge-item.locked{opacity:.35;filter:grayscale(1)}.badge-icon{width:48px;height:48px;margin:0 auto 8px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;font-family:Montserrat,sans-serif}.badge-icon.gold{background:linear-gradient(135deg,gold,#e6a800);color:#0a1628}.badge-icon.green{background:linear-gradient(135deg,#4caf50,#2d8a33);color:#fff}.badge-icon.blue{background:linear-gradient(135deg,#2196f3,#1565c0);color:#fff}.badge-icon.white{background:linear-gradient(135deg,#e0e0e0,#bdbdbd);color:#333}.badge-icon.gray{background:#2a3a5a;color:#4a5a7a}.badge-name{font-size:11px;color:var(--text2);line-height:1.3}.logout-bar{text-align:center;padding:20px 12px}.logout-bar button{padding:10px 30px;background:transparent;border:1px solid var(--card-border);color:var(--text2);border-radius:8px;cursor:pointer;font-family:Montserrat,sans-serif;font-weight:600;letter-spacing:1px}.logout-bar button:hover{border-color:var(--red);color:var(--red)}.match-table thead th{position:sticky;top:0;background:var(--card);z-index:2}.match-table tr.totals td{font-weight:700;border-top:2px solid var(--gold);color:var(--gold)}.nota-green{color:#4caf50;font-weight:700}.nota-yellow{color:#ffc107;font-weight:700}.nota-red{color:#e53935;font-weight:700}.perf-item{background:var(--bg);border-radius:8px;padding:16px;margin-bottom:10px;border-left:4px solid var(--gold);display:flex;align-items:center;gap:16px;flex-wrap:wrap}.perf-info{flex:1;min-width:200px}.perf-date{font-size:12px;color:var(--text2);margin-bottom:4px}.perf-event{font-size:15px;font-weight:500;line-height:1.4}.perf-type{display:inline-block;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;background:#ffd70026;color:var(--gold);margin-top:6px}.perf-rating{font-family:Montserrat,sans-serif;font-weight:900;font-size:36px;color:var(--gold);flex-shrink:0}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card{animation:fadeUp .5s ease both}.card:nth-child(2){animation-delay:.1s}.card:nth-child(3){animation-delay:.15s}.card:nth-child(4){animation-delay:.2s}.card:nth-child(5){animation-delay:.25s}.card:nth-child(6){animation-delay:.3s}.card:nth-child(7){animation-delay:.35s}.card:nth-child(8){animation-delay:.4s}.card:nth-child(9){animation-delay:.45s}@media(max-width:600px){.header-info{padding:0 12px;margin-top:-40px;gap:12px}.profile-pic,.profile-pic-fallback{width:80px;height:80px;font-size:28px}.header-text h1{font-size:20px}.cover,.cover-fallback{height:180px}.hex-chart{width:160px;height:160px}.sub-skills{grid-template-columns:1fr}.card{margin:0 8px 16px;padding:16px}.overall-badge{width:60px;height:60px}.overall-num{font-size:22px}.match-table{font-size:11px}.match-table th,.match-table td{padding:6px}}