:root{--bg-pitch-dark:#080c0e;--bg-surface:#10171b;--bg-surface-elevated:#162026;--bg-glass:#10171bbf;--bg-glass-card:#ffffff0a;--accent-emerald:#00f076;--accent-emerald-glow:#00f07640;--accent-emerald-dark:#059669;--accent-gold:#ffb800;--accent-gold-glow:#ffb80040;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--border-subtle:#ffffff14;--border-active:#00f07666;--font-heading:"Outfit", sans-serif;--font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{background-color:var(--bg-pitch-dark);color:var(--text-primary);font-family:var(--font-body);background-image:radial-gradient(circle at 50% 0,#00f0761f 0%,#0000 60%),radial-gradient(circle at 100% 100%,#ffb8000d 0%,#0000 50%);background-attachment:fixed;min-height:100vh;font-size:15px;line-height:1.5;overflow-x:hidden}button,input,select,textarea{font-family:var(--font-body)}button{cursor:pointer}a{color:inherit;text-decoration:none}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-pitch-dark)}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-emerald)}.app,.auth{background:var(--bg-surface);border-inline:1px solid var(--border-subtle);flex-direction:column;width:min(100%,420px);min-height:100vh;margin:0 auto;display:flex;position:relative;box-shadow:0 0 50px #0009}.content{flex:1;padding:24px 20px 110px}.topbar{background:var(--bg-glass);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border-subtle);z-index:50;justify-content:space-between;align-items:center;height:70px;padding:0 20px;display:flex;position:sticky;top:0}.brand{font-family:var(--font-heading);letter-spacing:-.5px;background:linear-gradient(135deg, #fff 40%, var(--accent-emerald) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:6px;font-size:22px;font-weight:800;display:flex}.brand-icon{font-size:18px;animation:3s infinite alternate pulse-glow;display:inline-block}@keyframes pulse-glow{0%{filter:drop-shadow(0 0 2px #00f07666);transform:scale(1)}to{filter:drop-shadow(0 0 8px #00f076e6);transform:scale(1.1)}}.topbar-actions{align-items:center;gap:12px;display:flex}.install-btn{color:var(--accent-emerald);background:#00f0761a;border:1px solid #00f0764d;border-radius:20px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:700;transition:all .2s;display:flex}.install-btn:hover{box-shadow:0 0 12px var(--accent-emerald-glow);background:#00f07633}.avatar{border:2px solid var(--accent-emerald);width:38px;height:38px;color:var(--accent-emerald);font-family:var(--font-heading);background:linear-gradient(135deg,#00f07633,#0596694d);border-radius:50%;place-items:center;font-size:15px;font-weight:800;transition:transform .2s;display:grid;box-shadow:0 0 10px #00f07633}.avatar:hover{transform:scale(1.05)}.avatar.large{width:72px;height:72px;margin:0 auto 14px;font-size:28px}.bottom-nav{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border-subtle);z-index:50;width:min(100%,420px);height:76px;display:flex;position:fixed;bottom:0}.bottom-nav a{color:var(--text-muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:5px;font-size:11px;font-weight:600;transition:all .2s;display:flex;position:relative}.bottom-nav svg{width:22px;height:22px;transition:transform .2s,color .2s}.bottom-nav a.active{color:var(--accent-emerald)}.bottom-nav a.active svg{filter:drop-shadow(0 0 6px var(--accent-emerald));transform:translateY(-2px)}.bottom-nav a.active:after{content:"";background:var(--accent-emerald);width:28px;height:3px;box-shadow:0 0 10px var(--accent-emerald);border-radius:3px 3px 0 0;position:absolute;bottom:0}h1{font-family:var(--font-heading);letter-spacing:-.8px;color:var(--text-primary);margin-bottom:4px;font-size:28px;font-weight:800}h2{font-family:var(--font-heading);color:var(--text-primary);font-size:18px;font-weight:700}p{color:var(--text-secondary);font-size:14px}.title-row{justify-content:space-between;align-items:flex-end;margin-bottom:20px;display:flex}.tabs{background:var(--bg-pitch-dark);border:1px solid var(--border-subtle);border-radius:12px;gap:6px;margin-bottom:20px;padding:4px;display:flex}.tabs button{color:var(--text-muted);background:0 0;border:0;border-radius:8px;flex:1;padding:10px 14px;font-size:13px;font-weight:700;transition:all .2s}.tabs button.active{background:var(--bg-surface-elevated);color:var(--accent-emerald);box-shadow:0 2px 8px #0006}.stack,.players{gap:12px;display:grid}.match-card,.panel,.player,.rating-card,.empty{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:16px;padding:18px;transition:all .2s}.match-card{grid-template-columns:1fr auto;gap:10px;display:grid;position:relative;overflow:hidden}.match-card:before{content:"";background:var(--accent-emerald);opacity:.6;width:4px;height:100%;position:absolute;top:0;left:0}.match-card:hover{border-color:#00f0764d;transform:translateY(-2px);box-shadow:0 6px 20px #0006}.match-card h2{margin-bottom:4px;font-size:17px}.match-card-meta{color:var(--text-secondary);align-items:center;gap:12px;margin-top:4px;font-size:13px;display:flex}.match-card-meta span{align-items:center;gap:4px;display:flex}.match-card strong{font-family:var(--font-heading);color:var(--accent-emerald);grid-column:2;font-size:20px;font-weight:800}.pill{letter-spacing:.6px;text-transform:uppercase;color:var(--accent-emerald);background:#00f0761f;border:1px solid #00f0764d;border-radius:20px;align-self:start;padding:4px 10px;font-size:10px;font-weight:800}.pill.completed{color:var(--text-secondary);background:#94a3b81a;border-color:#94a3b833}.pill.scheduled{color:var(--accent-gold);background:#ffb8001f;border-color:#ffb8004d}.fab{color:#04120c;z-index:40;background:linear-gradient(135deg,#00f076,#059669);border-radius:50%;place-items:center;width:52px;height:52px;margin-left:334px;transition:transform .2s,box-shadow .2s;display:grid;position:fixed;bottom:92px;box-shadow:0 6px 24px #00f07666}.fab:hover{transform:scale(1.08);box-shadow:0 8px 30px #00f07699}.fab svg{stroke-width:2.5px;width:26px;height:26px}.form{gap:16px;display:grid}.form label{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);gap:6px;font-size:12px;font-weight:700;display:grid}.form input,.form select{border:1px solid var(--border-subtle);background:var(--bg-pitch-dark);width:100%;color:var(--text-primary);border-radius:12px;outline:none;padding:14px 16px;font-size:15px;transition:all .2s}.form input:focus,.form select:focus{border-color:var(--accent-emerald);box-shadow:0 0 14px var(--accent-emerald-glow)}.form button,.button{color:#04120c;font-family:var(--font-heading);letter-spacing:.2px;text-align:center;background:linear-gradient(135deg,#00f076,#059669);border:0;border-radius:12px;width:100%;padding:15px;font-size:16px;font-weight:800;transition:all .2s;box-shadow:0 4px 16px #00f0764d}.form button:hover,.button:hover{opacity:.95;box-shadow:0 6px 22px #00f07680}.button.secondary,.secondary{background:var(--bg-surface-elevated)!important;color:var(--text-primary)!important;border:1px solid var(--border-subtle)!important;box-shadow:none!important}.button.secondary:hover,.secondary:hover{border-color:var(--border-active)!important;color:var(--accent-emerald)!important}.error{color:#ff5252;background:#ff52521a;border:1px solid #ff525233;border-radius:10px;padding:12px;font-size:13px}.auth{text-align:center;justify-content:center;padding:60px 28px}.auth-mark{filter:drop-shadow(0 0 12px var(--accent-emerald));margin-bottom:8px;font-size:48px}.auth h1{margin-bottom:6px;font-size:38px}.auth .form{text-align:left;margin:36px 0 20px}.switch{margin-top:14px}.switch a{color:var(--accent-emerald);font-weight:700}.back{align-items:center;gap:12px;margin-bottom:24px;display:flex}.back>a{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);width:36px;height:36px;color:var(--text-primary);border-radius:10px;place-items:center;transition:all .2s;display:grid}.back>a:hover{border-color:var(--accent-emerald);color:var(--accent-emerald)}.back h1{margin:0;font-size:22px}.choices,.actions{gap:10px;display:flex}.choices button,.segmented button{border:1px solid var(--border-subtle);background:var(--bg-pitch-dark);color:var(--text-secondary);border-radius:10px;flex:1;padding:12px;font-weight:700;transition:all .2s}.choices .selected,.segmented .selected{box-shadow:0 0 14px var(--accent-emerald-glow);background:var(--accent-emerald)!important;color:#04120c!important;border-color:var(--accent-emerald)!important;font-weight:800!important}.edit-btn{border:1px solid var(--border-subtle);background:var(--bg-pitch-dark);color:var(--accent-emerald);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;transition:all .2s}.edit-btn:hover{border-color:var(--accent-emerald);background:#00f0761a}.score{font-family:var(--font-heading);text-align:center;color:var(--accent-emerald);text-shadow:0 0 20px var(--accent-emerald-glow);letter-spacing:2px;margin:12px 0 28px;font-size:52px;font-weight:900}.score span{color:var(--text-muted);margin:0 8px}.score-input{justify-content:center;align-items:center;gap:14px;margin:16px 0 24px;display:flex}.score-input input{text-align:center;width:72px;height:64px;font-family:var(--font-heading);background:var(--bg-pitch-dark);border:1px solid var(--border-subtle);color:var(--accent-emerald);border-radius:14px;font-size:32px;font-weight:800}.player{justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.player>a,.player>span:first-child{color:var(--text-primary);font-weight:700}.player>span:last-child{color:var(--text-secondary);font-size:13px}.stat label{align-items:center;gap:6px;font-size:12px;font-weight:700;display:flex}.stat input{background:var(--bg-pitch-dark);border:1px solid var(--border-subtle);width:50px;color:var(--text-primary);text-align:center;border-radius:8px;padding:8px}.ovr{border:2px solid var(--accent-gold);background:linear-gradient(145deg,#1c272c 0%,#10171b 100%);border-radius:20px 20px 50px 50px;flex-direction:column;justify-content:center;align-items:center;width:155px;height:165px;margin:24px auto;display:flex;position:relative;box-shadow:0 0 30px #ffb80040,inset 0 0 15px #ffb8001a}.ovr small{color:var(--accent-gold);font-family:var(--font-heading);letter-spacing:1.5px;font-size:12px;font-weight:800}.ovr strong{font-family:var(--font-heading);color:#fff;text-shadow:0 0 15px #ffffff4d;font-size:58px;font-weight:900;line-height:1}.ovr p{color:var(--text-muted);margin-top:4px;font-size:11px}.attributes{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:16px;gap:14px;margin-top:20px;padding:18px;display:grid}.attributes>div{grid-template-columns:90px 1fr 36px;align-items:center;gap:10px;font-size:13px;font-weight:600;display:grid}.attributes i{background:var(--bg-pitch-dark);border-radius:10px;height:10px;display:block;overflow:hidden}.attributes b{height:100%;box-shadow:0 0 8px var(--accent-emerald-glow);background:linear-gradient(90deg,#059669,#00f076);border-radius:10px;display:block}.numbers{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px;display:grid}.numbers div{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);text-align:center;color:var(--text-secondary);border-radius:14px;padding:18px;font-size:13px}.numbers strong{font-family:var(--font-heading);color:var(--accent-emerald);font-size:28px;font-weight:800;display:block}.profile{text-align:center;margin:16px 0 32px}.profile h1{margin-top:6px}.toggle{background:var(--bg-surface-elevated);border:1px solid var(--border-subtle);border-radius:14px;justify-content:space-between;align-items:center;gap:12px;margin:20px 0;padding:18px;display:flex}.toggle span{gap:3px;display:grid}.toggle small{color:var(--text-muted);font-size:12px}.toggle button{background:var(--bg-pitch-dark);border:0;border-radius:20px;width:52px;height:28px;padding:3px;transition:all .2s}.toggle button i{background:var(--text-muted);border-radius:50%;width:22px;height:22px;transition:transform .2s,background .2s;display:block}.toggle button.on{border:1px solid var(--accent-emerald);background:#00f07633}.toggle button.on i{background:var(--accent-emerald);box-shadow:0 0 8px var(--accent-emerald);transform:translate(24px)}.logout{color:#ff5252;background:0 0;border:0;margin:24px auto;font-size:14px;font-weight:800;transition:opacity .2s;display:block}.logout:hover{opacity:.8}.empty{text-align:center;color:var(--text-muted);padding:40px 20px}
