.formats-page { min-height: 100vh; background: linear-gradient(rgba(8,26,14,.75),rgba(10,15,12,.9)),url("/images/soccerfield.jpg") center/cover fixed; }
.formats-back { font-weight: 700; text-decoration: none; }
.formats-shell { width: min(1240px,calc(100% - 32px)); margin: 0 auto; padding: 54px 0 80px; }
.formats-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; }
.formats-heading h1 { font-size:clamp(2.5rem,6vw,4.5rem); margin-bottom:8px; }
.formats-heading p { color:#d5dfd7; }
.formats-header-leading { display:flex; align-items:center; gap:12px; min-width:0; }.header-import-format { min-height:36px; padding:7px 10px; border:1px solid rgba(255,255,255,.55); border-radius:9px; color:white; background:rgba(0,0,0,.18); font-size:.8rem; font-weight:750; white-space:nowrap; }.header-import-format:hover,.header-import-format:focus-visible { background:rgba(0,0,0,.32); }
.formats-actions,.dialog-actions { display:flex; gap:10px; flex-wrap:wrap; }
button { font:inherit; cursor:pointer; }
.button,.secondary-button,.danger-button { border:0; border-radius:12px; padding:12px 16px; min-height:46px; font-weight:750; }
.button { background:var(--green); color:white; }.secondary-button { background:#e9eee9; color:#142018; }.danger-button { background:#a72b2b; color:white; }
.formats-layout { display:grid; grid-template-columns:640px minmax(0,1fr); gap:22px; align-items:start; }
.format-library,.format-editor { background:rgba(24,31,26,.94); border:1px solid rgba(255,255,255,.13); border-radius:20px; box-shadow:var(--shadow); }
.format-library { position:sticky; top:92px; overflow:hidden; }.library-toolbar { display:flex; justify-content:space-between; padding:18px; border-bottom:1px solid var(--border-dark); }
.format-list { max-height:58vh; overflow:auto; padding:8px; }.format-list-item { display:grid; grid-template-columns:auto 1fr; gap:10px; width:100%; padding:10px; text-align:left; color:white; background:transparent; border:1px solid transparent; border-radius:12px; }
.format-list-item:hover,.format-list-item.active { background:rgba(151,220,115,.12); border-color:rgba(151,220,115,.45); }.format-list-item input { appearance:none; display:grid; width:26px; height:26px; margin-top:3px; place-content:center; border:2px solid rgba(255,255,255,.7); border-radius:6px; background:#0d120f; cursor:pointer; }.format-list-item input:checked { border-color:var(--lime); background:var(--lime); }.format-list-item input:checked::after { color:#000; content:"✓"; font-size:21px; font-weight:900; line-height:1; }.format-list-item strong,.format-list-item small { display:block; }.format-list-item small { color:var(--muted-light); margin-top:3px; }
.package-actions { display:grid; gap:8px; padding:14px; border-top:1px solid var(--border-dark); }.package-handoff { margin:0; color:var(--muted-light); font-size:.83rem; line-height:1.4; }.format-editor { padding:clamp(18px,4vw,34px); }
.editor-title-row,.editor-save { display:flex; justify-content:space-between; align-items:center; gap:15px; }.editor-title-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }.format-editor fieldset { border:0; padding:0; margin:28px 0; }.format-editor legend { width:100%; padding-bottom:8px; border-bottom:1px solid var(--border-dark); font-size:1.08rem; font-weight:800; }
.format-name { margin:5px 0 0; color:var(--lime); font-weight:750; overflow-wrap:anywhere; }
.form-grid,.toggle-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px; }.format-editor label { display:grid; gap:5px; color:#d6ddd8; font-size:.88rem; font-weight:650; }.format-editor input:not([type=checkbox]),.format-editor select { width:100%; min-height:44px; padding:9px 11px; border:1px solid rgba(255,255,255,.2); border-radius:10px; background:#111713; color:white; font:inherit; }.toggle-grid label { display:flex; align-items:center; gap:9px; min-height:38px; }.toggle-grid input { width:20px; height:20px; accent-color:var(--green); }.identity-number-row,.full-row { grid-column:1 / -1; }.identity-number-row { max-width:calc(50% - 7px); }.identity-rule { height:1px; margin:22px 0 0; border:0; background:var(--border-dark); }.match-rules-team-size { margin-bottom:4px; }.match-rules-team-size label { max-width:calc(50% - 7px); }.tie-breaking-toggles { grid-template-columns:1fr; }.extra-time-fields { margin-top:14px; }.editor-save { border-top:1px solid var(--border-dark); padding-top:20px; }.editor-save #save-status { color:var(--lime); }
dialog { max-width:520px; border:1px solid #bbc7bd; border-radius:18px; padding:24px; color:#172019; } dialog::backdrop { background:rgba(0,0,0,.65); }
[hidden] { display:none !important; }
@media(max-width:1000px){.formats-layout{grid-template-columns:1fr}.format-library{position:static}}
@media(max-width:760px){.formats-heading{align-items:stretch;flex-direction:column}.formats-layout{grid-template-columns:1fr}.format-library{position:static}.format-list{max-height:320px}.form-grid,.toggle-grid{grid-template-columns:1fr}.identity-number-row,.match-rules-team-size label{max-width:none}}