@import url('/tokens.css');
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,.button{border:0;border-radius:9px;background:var(--green);color:white;padding:11px 17px;cursor:pointer;display:inline-block;font-weight:600}button:hover,.button:hover{filter:brightness(.94)}button:disabled{opacity:.45;cursor:wait}.secondary{background:#e8eee7;color:var(--green)}.danger{background:#f8e6df;color:#903f2b}.small{font-size:12px;padding:7px 10px}input,select,textarea{width:100%;padding:10px 12px;background:white;color:var(--ink);border:1px solid #d6ddd4;border-radius:7px;min-width:0}input[type=color]{height:43px;padding:5px}input[type=checkbox]{width:auto}label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:10px 0 5px}textarea{min-height:80px}h1,h2,h3,p{margin-top:0}h1{font-size:38px;line-height:1.15;font-weight:600;letter-spacing:-1.4px}h2{font-size:21px;font-weight:600}h3{font-size:17px}p{color:var(--muted)}.eyebrow{font:600 11px/1.4 system-ui;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}.sidebar{padding:35px 22px;background:#e9ede4;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:7px}.brand{font-size:24px;font-weight:800;letter-spacing:-1px;margin:0 0 45px}.brand span{color:#699347}.sidebar a{padding:12px;border-radius:8px;color:#496050}.sidebar a.active{background:var(--green);color:white}.sidebar footer{margin-top:auto;font-size:12px;color:var(--muted);padding-top:50px}.main{padding:42px clamp(20px,4vw,64px);max-width:1800px;min-width:0;width:100%}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:35px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.between{justify-content:space-between}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:24px;box-shadow:0 3px 12px #182d2103}.card+.card{margin-top:20px}.grid>.card+.card{margin-top:0}.muted{color:var(--muted)}.pill{font-size:11px;font-weight:700;border-radius:20px;padding:5px 10px;background:#e6eedf;color:#3e6943;white-space:nowrap}.pill.live{background:#cde5b7}.pill.offline{background:#f6d7ce;color:#873b26}.stats{display:flex;gap:40px;border-block:1px solid var(--line);padding:20px 0;margin:25px 0 32px}.stat strong{font-size:28px;display:block;font-weight:600}.stat small{color:var(--muted)}.match-team{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid #edf0e9;font-weight:600}.match-score{font-variant-numeric:tabular-nums;letter-spacing:4px;color:var(--green)}.card footer{margin-top:20px}.section{margin:35px 0 18px}.empty{padding:40px;color:var(--muted);text-align:center;border:1px dashed #c3cdbd;border-radius:12px}.hidden{display:none!important}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.full{grid-column:1/-1}.login{max-width:430px;margin:10vh auto;padding:30px}.login .brand{margin-bottom:25px}dialog{width:min(650px,95vw);border:1px solid var(--line);border-radius:16px;padding:28px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#10271d80}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:90vw;background:#183e2c;color:white;border-radius:10px;padding:14px 22px;z-index:20;box-shadow:0 8px 30px #0002}.hero{background:var(--green);color:#f7f9ef;border-radius:16px;padding:35px;margin-bottom:30px;position:relative;overflow:hidden}.hero p{color:#b8ccba;max-width:550px}.hero h1{max-width:650px}.hero:after{content:'';position:absolute;width:240px;height:240px;border:1px solid #a7ce7b44;transform:rotate(-24deg);right:30px;top:-100px;border-radius:60px;pointer-events:none}.ref-score{font-size:70px;font-weight:650;line-height:1.3;color:var(--green)}.point-button{width:100%;padding:25px;font-size:22px;margin:15px 0}.ref-tools button{flex:1}.history{font-variant-numeric:tabular-nums}.designer-layout{display:grid;grid-template-columns:200px minmax(280px,1fr) 235px;gap:15px;align-items:start}.designer-layout .card{padding:15px}.canvas-wrap{background:#dce3d7;background-image:linear-gradient(45deg,#cbd5c9 25%,transparent 25%,transparent 75%,#cbd5c9 75%),linear-gradient(45deg,#cbd5c9 25%,transparent 25%,transparent 75%,#cbd5c9 75%);background-size:24px 24px;background-position:0 0,12px 12px;padding:15px;border-radius:12px;overflow:hidden}canvas{display:block;width:100%;height:auto;touch-action:none}.layer{display:block;width:100%;text-align:left;border-radius:6px;padding:8px;margin-bottom:5px;background:#edf1e8;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer.selected{background:var(--green);color:white}.inspector .form-grid{gap:0 7px}.inspector input,.inspector select{padding:6px}.help{font-size:12px;color:var(--muted)}.preview-box{aspect-ratio:16/9;background:#172c23;border-radius:10px;overflow:hidden}.preview-box iframe{width:100%;height:100%;border:0}.public-header{padding:25px 6vw;border-bottom:1px solid var(--line)}.public-main{max-width:1250px;margin:auto;padding:45px 25px}.public-header .brand{margin:0}.output-body{background:transparent;overflow:hidden}.output-body canvas{width:100vw;height:100vh;object-fit:contain}.output-offline{position:fixed;right:10px;top:10px;color:white;background:#903f2b;padding:5px 10px;font-size:12px}.note{padding:15px;background:#eef2e6;border-radius:9px;font-size:13px;color:#54664c}code{font-size:12px;word-break:break-all}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7db15a;outline-offset:3px}@media(max-width:1100px){.designer-layout{grid-template-columns:150px 1fr}.inspector{grid-column:1/-1}.inspector .form-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:760px){.shell{grid-template-columns:1fr}.sidebar{padding:15px;flex-direction:row;align-items:center;flex-wrap:wrap}.sidebar .brand{margin:0 10px 0 0;font-size:20px}.sidebar a{padding:8px;font-size:13px}.sidebar footer{display:none}.main{padding:25px 16px}.topbar{align-items:flex-start}h1{font-size:29px}.designer-layout{grid-template-columns:1fr}.designer-layout>aside{order:2}.inspector .form-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.stats{gap:25px}.ref-score{font-size:56px}}
