.wrap{max-width:1200px;margin:20px auto;padding:0 14px 60px}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow)}
.title{font-weight:800;font-size:16px;margin:0 0 4px}
.sub{color:var(--muted);font-size:12px;line-height:1.4;margin:0}
.btn{border:1px solid var(--darkborder);background:#44467b57;color:var(--white);padding:10px 12px;font-weight:700;font-size:16px;cursor:pointer;white-space:nowrap}
.btn.primary{border-color:#ffffff59;background:var(--accent-10);color:var(--white);}
.btn:active{transform:translateY(1px)}
.layout{margin-top:14px;display:grid;grid-template-columns:1.3fr .9fr;gap:14px;align-items:start}
/*.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}*/
.panel h3{margin:0 0 10px;font-size:14px;font-weight:800}
.calendar-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.month{background:#96969621;padding:10px;box-shadow:0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.03), 0 8px 10px rgba(0, 0, 0, 0.07), 0 6px 15px rgba(0, 0, 0, 0.07), 0 12px 20px rgba(0, 0, 0, 0.03)}
.month-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.month-title{font-weight:900;font-size:13px}
.tz{font-size:12px;color:var(--muted)}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;font-size:11px;color:var(--muted);text-align:center}
.grid-days{display:grid;grid-template-columns:repeat(7,1fr);gap:0px}
.day{padding:5px 0;text-align:center;font-weight:700;font-size:12px;cursor:pointer;user-select:none;background:#403d7a;position:relative}
.day.is-out{opacity:.35;cursor:default;pointer-events:none;}
.day.is-disable{opacity:.35;cursor:not-allowed;pointer-events:none;color:var(--white);}
.day.is-start,.day.is-end{background:var(--accent);color:var(--white);}
.day.is-inrange{border-color:#2563eb29;background:var(--continuous)}
.selected-bar{margin-top:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--border);font-size:16px;border-radius: var(--radius);}
.selected-bar .muted{color:var(--muted);font-size:16px;font-weight:400}
.groups{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.results{margin-top:14px;position:relative;column-count:2;}
.empty{border:1px dashed var(--border);border-radius:var(--radius);padding:18px;color:var(--muted);text-align:center}
.empty{border:1px dashed var(--border);border-radius:var(--radius);padding:18px;color:var(--muted);text-align:center}
.grid{margin-top:10px}
.grid-item{width:calc(33.333% - 12px);margin:6px;border-radius:var(--radius);background:var(--bgDarkMenu);padding:12px}
.badge{display:inline-block;border:1px solid var(--border);border-radius:999px;padding:4px 8px;font-size:12px;margin-right:6px;background:#fff}
.match-title{margin-top:6px;font-weight:900;font-size:14px}
.match-meta{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.4}
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#11182714;border-radius:var(--radius-0);backdrop-filter:blur(5px);z-index:5;width:101%}
.spinner{width:34px;height:34px;border:3px solid #1118272e;border-top-color:#1118278c;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin {
to{transform:rotate(360deg)}
}
.mobile-only{display:none}
.desktop-only{display:block}
.picker-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;background:var(--gradient);cursor:pointer;box-shadow: 0 4px 3px rgba(0, 0, 0, .2);border-radius:var(--radius);}
.picker-trigger .label{font-weight:900;font-size:13px;color:var(--white);}
.picker-trigger .value{color:var(--white);font-size:16px}
.modal-backdrop{position:fixed;inset:0;background:#11182773;display:none;z-index:50}
.modal{position:fixed;left:0;right:0;bottom:0;background:var(--body);padding:12px 12px 18px;transform:translateY(100%);transition:transform .25s ease;z-index:101;max-height:100vh;overflow:auto;display:flex
;flex-direction: column;}
.modal.open{transform:translateY(0)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 10px;border-bottom:1px solid var(--border)}
.modal-head .mh-title{font-weight:900;font-size:14px}
.xbtn{color:var(--white);padding:8px 18px;cursor:pointer;font-weight:900}
.modal-actions{position:sticky;bottom:0;padding-top:10px;margin-top:10px}
.confirm{width:100%;padding:12px;border:1px solid var(--border);justify-content:center;background:#f1f5ff;font-weight:900;cursor:pointer;line-height:2.56 !important}
.confirm:disabled{background:#f3f4f612;color:#ffffff59;cursor:not-allowed}
.confirm:disabled:before{display:none!important;}
.confirm:disabled:hover{background:#f3f4f6;box-shadow:0 0 0 0 inset rgba(5, 5, 5, 0.1), -0.05em -0.05em 0.05em 0 inset var(--shadow-dark), 0 0 0.05em 0.2em inset var(--shadow-light), 0.025em 0.05em 0.1em 0 inset var(--white), 0.12em 0.12em 0.12em inset var(--shadow-light), -0.075em -0.25em 0.25em 0.1em inset var(--shadow-dark);color: #11182759;}
.btn:disabled{opacity:.4;cursor: not-allowed;background: #f3f4f638;}
.gamesNotice{display:none;transition:transform 280ms ease, opacity 280ms ease;will-change:transform;padding:10px;background:rgb(243 245 249 / 77%);z-index:10;}
#gamesNoticeSpacer{
  width: 100%;
  display: block;
}
@media (max-width: 980px) {
.layout{grid-template-columns:1fr}
.grid-item{width:calc(50% - 12px)}
}
@media (max-width: 640px) {
.desktop-only{display:none}
.mobile-only{display:block}
.calendar-wrap{grid-template-columns:1fr}
.grid-item{width:calc(100% - 12px)}
	.day{padding:12px 0;}
	.modal-head .mh-title{font-weight:700;font-size:20px}
	.grid-item{padding:5px;}
	.grid-item{margin:0}
	.picker-trigger .label {font-size: 18px;}
	.panel h3{font-size:18px;margin:10px 0;text-align: center}
	.results{column-count:1;}
}