.membership-dialog{width:min(900px,calc(100vw - 16px));max-height:calc(100dvh - 16px);padding:14px;border:1px solid #a6c0a8;border-radius:12px;background:#f8f5e6;color:#19424a;box-sizing:border-box}
.membership-dialog[open]{display:flex;flex-direction:column;gap:10px}
.membership-dialog::backdrop{background:#102f3bdc;backdrop-filter:blur(5px)}
.membership-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}.membership-heading h2{margin:5px 0;font-size:25px}.membership-heading small{font-size:10px;letter-spacing:2px}
.membership-heading button{min-width:44px;min-height:44px;font-size:24px}
.membership-body{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
.membership-body h3{font-size:18px;margin:14px 0 8px}.membership-body p{font-size:12px;line-height:1.6;margin:8px 0}.membership-body small{font-size:10px;line-height:1.5}
.membership-status{padding:8px 10px;border-radius:6px;background:#e4ead8}
.membership-wallet{display:flex;flex-wrap:wrap;gap:14px;padding:10px;border-bottom:1px solid #bac9ac}.membership-wallet b{font-size:22px;color:#8b6327}
.attendance-card{padding:12px;border:1px solid #b7c8a5;border-radius:8px;margin-top:12px}
.attendance-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;margin:12px 0}.attendance-days>div{display:grid;text-align:center;padding:7px 3px;background:#e8e9db;border:1px solid #bac4a9;border-radius:5px}.attendance-days strong{font-size:20px}.attendance-days span{font-size:10px}.attendance-days [data-checked=true]{background:#d3e6d5}.attendance-days [data-played=true]{border-color:#48877a}
.membership-actions,.repair-row,.membership-footer{display:flex;gap:7px}.membership-dialog button,.membership-dialog select{min-height:44px;border:1px solid #9bb198;border-radius:6px;padding:7px 10px;font:650 12px system-ui;background:#e6eddb;color:#24534f;touch-action:manipulation}.membership-dialog button:disabled{opacity:.55}.membership-actions>*{flex:1}.repair-row{margin:8px 0}.repair-row select{flex:1;min-width:0}.membership-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.membership-products article{padding:12px;background:#edf0df;border:1px solid #bcc8ac;border-radius:7px}.membership-products button{width:100%}
.membership-catalog{display:grid;grid-template-columns:1fr 1fr;gap:8px}.membership-catalog article{display:grid;grid-template-columns:90px 1fr;gap:10px;border:1px solid #b4c5a6;border-radius:7px;padding:9px}.membership-catalog article[data-selected=true]{outline:3px solid #cda447;outline-offset:-3px}.membership-catalog img{width:90px;height:100px;object-fit:contain;background:#183c47;border-radius:5px}.membership-catalog p{font-size:11px}.membership-footer{flex:none;padding-top:9px;border-top:1px solid #b6c6aa}.membership-footer>*{flex:1}.membership-footer #membership-back{background:#23675e;color:#fff3c9}
.membership-open{min-height:44px;padding:8px 12px;border-radius:6px;border:1px solid #9ab3a0;background:#e7ecda;color:#24534f;font:650 12px system-ui}
@media(max-width:520px){.membership-products{grid-template-columns:1fr}.membership-catalog{grid-template-columns:1fr}.membership-heading h2{font-size:21px}.membership-dialog{padding:10px}.attendance-card{padding:8px}.attendance-days{gap:3px}.attendance-days span{font-size:8px}.attendance-days small{font-size:8px}}
@media(max-height:550px) and (orientation:landscape){.membership-dialog{padding:9px 14px}.membership-heading h2{font-size:21px}.membership-heading small{display:none}.membership-body h3{margin:8px 0}.membership-catalog img{height:85px}}

#open-membership{display:block;margin:20px auto 0;background:#e5cc8c;color:#173f45}
.home-new-hero-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.home-new-hero-grid article{display:grid;background:#193c47;border:1px solid #72958a55;border-radius:9px;overflow:hidden}.home-new-hero-grid img{width:100%;height:280px;object-fit:contain;background:radial-gradient(ellipse,#43616c66,#122f3b)}.home-new-hero-grid article>div{padding:18px}.home-new-hero-grid h3{font-size:21px;color:#e5d9af;margin:0 0 8px}.home-new-hero-grid p{font-size:12px;line-height:1.7;color:#bfd3ca}
@media(max-width:700px){.home-new-hero-grid{grid-template-columns:1fr}.home-new-hero-grid article{grid-template-columns:110px minmax(0,1fr);align-items:center}.home-new-hero-grid img{height:180px}.home-new-hero-grid article>div{padding:12px}.home-new-hero-grid h3{font-size:18px}}