| |
| :root{ |
| --bg:#0a0c0f; |
| --bg-2:#101317; |
| --panel:#161a20; |
| --panel-2:#1c2129; |
| --line:#262c36; |
| --text:#f4f5f7; |
| --muted:#9aa3b2; |
| --gold:#d4af37; |
| --gold-soft:rgba(212,175,55,.14); |
| --green:#1f8a4c; |
| --green-bright:#22c55e; |
| --red:#ef4444; |
| --grey:#6b7280; |
| --radius:16px; |
| --shadow:0 10px 30px rgba(0,0,0,.35); |
| } |
| *{box-sizing:border-box} |
| [hidden]{display:none!important} |
| html,body{margin:0;min-height:100%;background:radial-gradient(1200px 600px at 50% -200px,#1a2030 0%,var(--bg) 60%) fixed;color:var(--text);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased} |
| a{color:var(--gold);text-decoration:none;transition:opacity .2s} |
| a:hover{opacity:.8} |
|
|
| |
| header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.85rem 1.1rem;background:rgba(10,12,15,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} |
| .brand{font-weight:900;font-size:1.05rem;letter-spacing:.8px;color:var(--gold);margin-right:auto;line-height:1.1} |
| .brand small{display:block;margin-top:2px;color:var(--muted);font-size:.62rem;font-weight:600;letter-spacing:2.5px} |
| nav{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap} |
| nav a{color:var(--muted);padding:.4rem .75rem;border-radius:10px;font-weight:600;font-size:.92rem} |
| nav a:hover{color:var(--text);background:var(--panel);opacity:1} |
| nav a.on{color:#111;background:var(--gold);} |
| nav a.on:hover{background:var(--gold);color:#111} |
|
|
| main{max-width:900px;margin:0 auto;padding:1.25rem 1rem 3rem} |
|
|
| |
| .card{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.15rem;margin:.9rem 0;box-shadow:var(--shadow);animation:rise .35s ease both} |
| @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} |
|
|
| h1{font-size:1.35rem;font-weight:800;letter-spacing:.2px;margin:.2rem 0 1rem} |
|
|
| |
| label{display:block;color:var(--muted);font-size:.8rem;font-weight:600;letter-spacing:.3px;margin:.85rem 0 .35rem;text-transform:uppercase} |
| input,select,textarea{width:100%;background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:.72rem .85rem;font:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s} |
| input::placeholder,textarea::placeholder{color:#5b6372} |
| input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)} |
| input[type=checkbox]{width:auto;accent-color:var(--gold)} |
| select option{background:var(--panel)} |
|
|
| |
| button{background:linear-gradient(180deg,#23a35a,var(--green));color:#fff;border:0;border-radius:12px;padding:.7rem 1.1rem;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;transition:transform .08s ease,filter .2s;box-shadow:0 4px 14px rgba(31,138,76,.25)} |
| button:hover{filter:brightness(1.08)} |
| button:active{transform:scale(.98)} |
| button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none} |
| button.gold{background:linear-gradient(180deg,#e4c04d,var(--gold));color:#141006;box-shadow:0 4px 14px rgba(212,175,55,.25)} |
| button.ghost{background:transparent;border:1px solid var(--line);color:var(--text);box-shadow:none} |
| button.ghost:hover{border-color:var(--gold);color:var(--gold)} |
|
|
| .row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center} |
| .grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} |
| @media(max-width:640px){.grid2{grid-template-columns:1fr}} |
|
|
| |
| .meta{color:var(--muted);font-size:.85rem} |
| .disclaimer{color:var(--muted);font-size:.8rem;margin-top:1.75rem;text-align:center;opacity:.85} |
|
|
| |
| .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;text-align:center;padding:1rem} |
| .stats>div{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:.8rem .4rem} |
| .stats b{display:block;font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;margin-top:.15rem;color:var(--gold)} |
| .stats .meta{font-size:.75rem;text-transform:uppercase;letter-spacing:.6px} |
| @media(max-width:520px){.stats{grid-template-columns:1fr}} |
|
|
| |
| .pick{position:relative;overflow:hidden;padding-left:1.35rem} |
| .pick::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grey)} |
| .pick:has(.s-won)::before{background:var(--green-bright)} |
| .pick:has(.s-lost)::before{background:var(--red)} |
| .pick:has(.s-pending)::before{background:var(--gold)} |
| .teams{font-size:1.1rem;font-weight:800;margin:.35rem 0 .15rem;letter-spacing:.2px} |
| .sel{color:var(--gold);font-weight:800} |
|
|
| |
| .badge{display:inline-block;padding:.25rem .7rem;border-radius:999px;font-size:.75rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase} |
| .s-pending{background:var(--gold-soft);color:var(--gold);border:1px solid rgba(212,175,55,.35)} |
| .s-won{background:var(--green-bright);color:#04220e} |
| .s-lost{background:var(--red);color:#fff} |
| .s-void{background:var(--grey);color:#fff} |
|
|
| |
| .msg{min-height:1.2rem;font-size:.9rem;margin-top:.65rem;font-weight:500} |
| .err{color:#ff7b7b} |
| .ok{color:var(--green-bright)} |
|
|
| |
| table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem} |
| th,td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle} |
| th{color:var(--muted);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;background:var(--bg-2)} |
| th:first-child{border-top-left-radius:10px} |
| th:last-child{border-top-right-radius:10px} |
| tbody tr{transition:background .15s} |
| tbody tr:hover{background:rgba(255,255,255,.025)} |
| td select{padding:.45rem .6rem;border-radius:10px} |
|
|
| |
| .auth{max-width:420px;margin:2.5rem auto} |
| .auth h1{text-align:center} |
| .auth .card{padding:1.4rem 1.3rem} |
| .links{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;font-size:.9rem;flex-wrap:wrap} |
|
|
| |
| @media(max-width:480px){ |
| header{padding:.7rem .8rem} |
| nav a{padding:.35rem .55rem;font-size:.85rem} |
| h1{font-size:1.2rem} |
| table{font-size:.82rem} |
| th,td{padding:.55rem .4rem} |
| } |
|
|
