@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --ink:#233e32; --muted:#788277; --green:#285e43; --deep:#244c39; --mint:#dce7d5; --cream:#f5f4ec; --line:#e4e7dc; --orange:#d98658; --white:#fffefa; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; background:var(--cream); color:var(--ink); font:14px 'DM Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; color:inherit; }
button { border:0; cursor:pointer; touch-action:manipulation; }
button:disabled { opacity:.45; cursor:default; }
button,a { -webkit-tap-highlight-color:transparent; }
button svg { pointer-events:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #d98658; outline-offset:4px; }
a { color:inherit; }
svg { vertical-align:middle; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-family:'Manrope',system-ui,sans-serif; }
h1 { font-size:32px; line-height:1.2; letter-spacing:-1.4px; font-weight:800; }
h2 { font-size:21px; line-height:1.3; letter-spacing:-.6px; }
h3 { font-size:16px; line-height:1.4; letter-spacing:-.3px; }
p { line-height:1.65; }
small { line-height:1.5; }
.app-shell { max-width:600px; margin:auto; min-height:100dvh; }
.page { padding:24px 22px 115px; animation:enter .2s ease; }
.sidebar { display:none; }
.topbar,.row,.section-title,.page-head,.total-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.topbar { margin-bottom:29px; }
.club-brand { display:flex; align-items:center; gap:11px; }
.club-brand > span:last-child { min-width:0; }
.page,#dialog-content { overflow-wrap:break-word; }
.brand-logo { width:68px; height:48px; object-fit:contain; flex-shrink:0; }
.brand-name { font-weight:700; font-size:13px; display:block; }
.caption,.muted { color:var(--muted); }
.caption { display:block; font-size:11px; margin-top:3px; }
.eyebrow { font-size:10px; font-weight:600; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
.avatar { background:#e8ddd0; color:#806548; border-radius:50%; width:42px; height:42px; font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.profile-button { padding:0; background:none; border-radius:50%; }
.icon-button { width:42px; min-width:42px; height:42px; border-radius:50%; background:#fffefa; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:12px 20px; border-radius:25px; background:var(--green); color:white; font-weight:600; font-size:12px; }
.btn.light { background:#e8eddf; color:var(--green); }
.btn.white { background:var(--white); color:var(--deep); }
.btn.danger { background:#f7e8df; color:#a45338; }
.btn.small { min-height:39px; padding:9px 15px; font-size:11px; }
.btn.full { width:100%; }
.text-button { background:none; padding:9px 0; color:var(--green); font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:6px; min-height:40px; }
.section-title { margin:27px 0 15px; }
.section-title h2 { font-size:18px; }
.page-head { align-items:flex-start; margin-bottom:23px; }
.page-head h1 { margin-top:8px; }
.page-intro { font-size:13px; margin:11px 0 23px; color:var(--muted); max-width:560px; }
.hello { font-size:13px; color:var(--muted); margin-bottom:9px; }
.home-title { margin-bottom:22px; }
.home-title h1 { font-size:35px; }
.home-title h1 span { color:var(--green); }
.hero { min-height:267px; position:relative; overflow:hidden; border-radius:25px; padding:24px; display:flex; flex-direction:column; color:white; background:#254739; }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.hero::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,41,32,.82),rgba(14,41,32,.12)),linear-gradient(0deg,rgba(14,41,32,.35),transparent); }
.hero > :not(img) { position:relative; z-index:1; }
.tag { width:fit-content; font-size:9px; font-weight:600; letter-spacing:1px; padding:7px 11px; border-radius:20px; background:#ffffff1f; border:1px solid #ffffff35; text-transform:uppercase; }
.hero h2 { font-size:29px; letter-spacing:-1px; line-height:1.18; margin-top:24px; }
.hero p { color:#e2e6dd; font-size:11px; margin-top:9px; max-width:175px; }
.hero .btn { align-self:flex-start; margin-top:21px; }
.member-card { background:var(--deep); color:#f4f5db; border-radius:24px; padding:22px; margin-top:16px; position:relative; overflow:hidden; }
.member-card::after { content:''; position:absolute; width:260px; height:260px; border:1px solid #ffffff16; border-radius:50%; top:-90px; right:-120px; box-shadow:0 0 0 28px #ffffff06,0 0 0 55px #ffffff04; pointer-events:none; }
.member-card .eyebrow { color:#d4ddc2; font-size:9px; }
.member-card .tag { color:#e3edb2; font-size:9px; }
.member-points { display:flex; align-items:flex-end; gap:8px; margin:15px 0; }
.member-points strong { font:600 38px 'Manrope',sans-serif; letter-spacing:-1.5px; }
.member-points span { font-size:12px; padding-bottom:7px; color:#d0dabe; }
.member-footer { display:flex; justify-content:space-between; align-items:center; padding-top:13px; border-top:1px solid #ffffff24; font-size:12px; }
.member-footer small { color:#c2d0b4; font-size:10px; display:block; margin-top:3px; }
.member-card .text-button { color:#f1f3cf; }
.quick-links { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:22px 0; }
.quick-link { background:none; padding:0; display:flex; align-items:center; flex-direction:column; gap:9px; font-size:11px; font-weight:500; }
.quick-link .quick-icon { width:54px; height:54px; border-radius:18px; background:#e4e8d9; display:grid; place-items:center; color:var(--green); }
.quick-link:nth-child(2) .quick-icon { background:#ede1d2; color:#946346; }
.quick-link:nth-child(3) .quick-icon { background:#e4deec; color:#7d688d; }
.quick-link:nth-child(4) .quick-icon { background:#e9e8cb; color:#7e7b3c; }
.court-list { display:grid; gap:14px; }
.court-card { background:var(--white); border:1px solid var(--line); border-radius:21px; overflow:hidden; }
.court-visual { background:#dfe6d8; height:150px; padding:25px 29px; position:relative; display:flex; align-items:center; justify-content:center; }
.court-visual.clay { background:#eee0d2; }
.court-visual.lavender { background:#e3deed; }
.court-visual .court-label { position:absolute; right:15px; top:13px; color:#526c55; background:#ffffff8a; font-size:9px; padding:5px 9px; border-radius:14px; }
.court-drawing { position:relative; width:185px; height:94px; border:2px solid #ffffffd9; background:#74937b; transform:perspective(400px) rotateX(18deg) rotateZ(-12deg); box-shadow:8px 8px 0 #5169561a; }
.clay .court-drawing { background:#bc896b; }
.lavender .court-drawing { background:#9583ac; }
.court-drawing::before { content:''; position:absolute; left:0; right:0; top:50%; border-top:2px solid #ffffffd9; }
.court-drawing::after { content:''; position:absolute; top:0; bottom:0; left:50%; border-left:2px solid #ffffffd9; }
.court-drawing i { position:absolute; inset:0 25%; border-left:1px solid #ffffffd9; border-right:1px solid #ffffffd9; }
.court-drawing b { position:absolute; width:7px; height:7px; border-radius:50%; background:#e7ec9c; right:24px; top:14px; box-shadow:1px 2px 2px #0002; }
.court-copy { padding:18px; }
.court-copy .eyebrow { font-size:9px; letter-spacing:.8px; }
.court-copy h3 { margin:7px 0; font-size:18px; }
.court-copy p { font-size:12px; color:var(--muted); }
.court-bottom { margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.price { font-size:14px; font-weight:700; }
.price small { font-weight:400; font-size:10px; color:var(--muted); }
.compact-court { display:flex; align-items:center; width:100%; border-radius:18px; background:var(--white); border:1px solid var(--line); padding:12px; gap:13px; text-align:left; }
.compact-court .court-visual { width:85px; height:72px; padding:8px; border-radius:12px; flex-shrink:0; }
.compact-court .court-drawing { width:62px; height:36px; border-width:1px; }
.compact-court .court-drawing::before,.compact-court .court-drawing::after { border-width:1px; }
.compact-court .court-drawing b { right:8px; top:6px; width:4px; height:4px; }
.compact-court .copy { flex:1; min-width:0; }
.compact-court h3 { font-size:13px; }
.compact-court p { font-size:11px; color:var(--muted); margin-top:3px; }
.coffee-banner { background:#e9ddcd; border-radius:22px; padding:23px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.coffee-banner h2 { font-size:23px; margin:9px 0; }
.coffee-banner p { font-size:12px; color:#8a7564; }
.coffee-banner .product-art { background:none; width:110px; height:130px; flex-shrink:0; }
.demo-note { font-size:10px; color:#8c9386; margin-top:30px; text-align:center; line-height:1.7; }
.tabs { display:flex; gap:5px; background:#e9eddf; padding:5px; border-radius:25px; margin:18px 0 22px; }
.tabs button { flex:1; min-height:39px; border-radius:22px; background:none; font-size:12px; font-weight:500; white-space:nowrap; padding:7px 10px; }
.tabs button.active { background:var(--white); box-shadow:0 2px 5px #34492608; color:var(--green); }
.shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.product-card { border:1px solid var(--line); background:var(--white); border-radius:19px; overflow:hidden; min-width:0; }
.product-art { background:#eee5d8; height:135px; display:flex; align-items:center; justify-content:center; position:relative; }
.product-art svg { width:90px; height:90px; }
.product-art.latte { background:#e8dfce; }
.product-art.matcha { background:#e3e9d5; }
.product-art.sandwich { background:#efe0c6; }
.product-art.shirt { background:#e5e9df; }
.product-art.cap { background:#e0e6d5; }
.product-art.balls { background:#e8e9d2; }
.product-art.racket { background:#e2e5dc; }
.product-copy { padding:13px; }
.product-copy .eyebrow { font-size:8px; letter-spacing:.8px; }
.product-copy h3 { font-size:12px; margin:6px 0 8px; min-height:34px; }
.product-copy .price { font-size:12px; }
.product-copy .row { align-items:flex-end; gap:4px; }
.add-button { min-width:44px; height:44px; display:grid; place-items:center; background:#e7eddf; color:var(--green); border-radius:50%; }
.stock-label { font-size:9px; color:var(--muted); margin-top:7px; }
.cart-button { display:flex; gap:7px; align-items:center; padding:9px 13px; border-radius:23px; background:var(--green); color:white; min-height:42px; font-size:12px; font-weight:600; }
.cart-count { background:#dfe8c4; border-radius:50%; color:var(--green); font-size:10px; width:20px; height:20px; display:grid; place-items:center; }
.floating-cart { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); width:calc(100% - 44px); max-width:556px; background:var(--deep); color:white; border-radius:24px; padding:15px 19px; display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:0 6px 20px #203a3526; z-index:5; font-size:12px; }
.floating-cart small { color:#ccd7ba; font-size:10px; }
.rental-card { display:flex; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:20px; padding:16px; gap:17px; margin-bottom:14px; }
.rental-card .product-art { width:88px; height:100px; border-radius:16px; flex-shrink:0; }
.rental-card .product-art svg { width:65px; }
.rental-card h3 { font-size:15px; }
.rental-card p { font-size:11px; color:var(--muted); margin:5px 0 8px; }
.notice { padding:14px 16px; background:#eef0e5; border:1px solid #e2e6d5; color:#6b765e; border-radius:14px; font-size:11px; line-height:1.7; margin:18px 0; }
.rewards-overview { padding:25px; border-radius:24px; background:#e2e8d5; }
.rewards-overview strong { font:700 44px 'Manrope',sans-serif; letter-spacing:-1.5px; display:block; margin-top:11px; }
.rewards-overview p { font-size:12px; color:#6b765e; }
.progress { height:6px; border-radius:8px; background:#cbd4bb; margin:15px 0 9px; overflow:hidden; }
.progress i { display:block; height:100%; background:var(--green); border-radius:8px; }
.reward-card { display:flex; align-items:center; gap:15px; padding:18px; border:1px solid var(--line); border-radius:19px; background:var(--white); margin-bottom:12px; }
.reward-icon { width:54px; height:54px; border-radius:17px; background:#ede4d6; display:grid; place-items:center; color:#927150; flex-shrink:0; }
.reward-card:nth-child(2) .reward-icon { background:#e5e9d7; color:#688342; }
.reward-card .copy { flex:1; min-width:0; }
.reward-card h3 { font-size:14px; }
.reward-card p { font-size:11px; color:var(--muted); margin:4px 0 6px; }
.reward-cost { font-size:11px; font-weight:700; color:var(--green); }
.voucher { background:#fffefa; border:1px dashed #98ac7e; padding:15px; border-radius:15px; margin:10px 0; }
.voucher h3 { font-size:13px; }
.voucher p { font-size:11px; color:var(--muted); margin:5px 0; }
.transaction { background:var(--white); border:1px solid var(--line); border-radius:19px; padding:18px; margin-bottom:12px; }
.transaction h3 { font-size:15px; margin:11px 0 5px; }
.transaction p { font-size:12px; color:var(--muted); }
.status { background:#e5edde; color:#648049; font-size:9px; padding:5px 9px; border-radius:15px; font-weight:600; display:inline-block; white-space:nowrap; }
.status.cancelled { background:#f2e4dc; color:#a77a61; }
.status.completed { background:#e7ece5; color:#727d6f; }
.transaction-actions { display:flex; gap:8px; margin-top:15px; }
.transaction-actions .btn { flex:1; font-size:10px; }
.empty { padding:34px 16px; text-align:center; background:#eeefe7; border-radius:20px; color:var(--muted); }
.empty h3 { color:var(--ink); margin:12px 0 7px; }
.empty p { font-size:12px; margin-bottom:18px; }
.profile-head { display:flex; align-items:center; gap:15px; margin:10px 0 23px; }
.profile-head .avatar { width:59px; height:59px; font-size:18px; }
.profile-head h1 { font-size:23px; letter-spacing:-.7px; }
.profile-head p { font-size:11px; color:var(--muted); margin-top:5px; }
.profile-head .icon-button { margin-left:auto; }
.member-id { margin-top:18px; font:500 13px 'Manrope',sans-serif; letter-spacing:3px; }
.account-menu { background:var(--white); border:1px solid var(--line); border-radius:19px; padding:4px 15px; }
.menu-row { display:flex; align-items:center; gap:13px; background:none; width:100%; text-align:left; min-height:60px; border-bottom:1px solid var(--line); }
.menu-row:last-child { border-bottom:0; }
.menu-row .copy { flex:1; font-size:12px; }
.menu-row .copy small { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.history-row { display:flex; justify-content:space-between; gap:15px; padding:15px 0; border-bottom:1px solid var(--line); font-size:12px; }
.history-row small { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
.history-row strong { white-space:nowrap; color:var(--green); }
.history-row strong.negative { color:#a37850; }
.admin-stats { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:22px; }
.stat { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:17px; }
.stat small { color:var(--muted); font-size:11px; }
.stat strong { display:block; font:700 23px 'Manrope',sans-serif; margin-top:9px; letter-spacing:-.7px; }
.settings-card { background:var(--white); border:1px solid var(--line); padding:18px; border-radius:18px; margin:14px 0; }
.settings-card h3 { margin-bottom:15px; }
.inventory-row { display:flex; align-items:center; gap:10px; padding:13px 0; border-bottom:1px solid var(--line); }
.inventory-row .copy { flex:1; font-size:12px; }
.inventory-row small { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.inventory-row input { width:74px; }
nav#nav { position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:600px; border-top:1px solid var(--line); background:#f5f4ecf2; backdrop-filter:blur(16px); display:grid; grid-template-columns:repeat(5,1fr); padding:11px 9px calc(10px + env(safe-area-inset-bottom)); z-index:8; }
.nav-btn { display:flex; flex-direction:column; align-items:center; gap:6px; min-height:44px; border-radius:14px; font-size:9px; background:none; color:#8b9587; }
.nav-btn.active { color:var(--green); font-weight:700; }
.nav-btn.active svg { stroke-width:2; }
dialog { border:0; border-radius:25px; padding:30px 24px 25px; width:calc(100% - 24px); max-width:520px; max-height:88dvh; color:var(--ink); background:var(--cream); box-shadow:0 25px 100px #14271f25; }
dialog::backdrop { background:#17312770; backdrop-filter:blur(3px); }
.close-sheet { position:absolute; top:13px; right:13px; width:33px; min-width:33px; height:33px; font-size:23px; }
.sheet-heading { padding-right:22px; margin-bottom:21px; }
.sheet-heading .eyebrow { margin-bottom:9px; }
.sheet-heading h2 { font-size:25px; letter-spacing:-.9px; }
.sheet-heading p { font-size:12px; color:var(--muted); margin-top:9px; }
.form-field { margin:14px 0; }
.form-field label { display:block; font-size:11px; font-weight:600; margin-bottom:7px; }
input,select,textarea { border:1px solid #dce1d4; background:var(--white); padding:11px 12px; border-radius:12px; width:100%; min-height:43px; font-size:12px; }
textarea { resize:vertical; }
.form-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.slot-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 18px; }
.slot { min-height:42px; border-radius:12px; background:var(--white); border:1px solid var(--line); font-size:11px; }
.slot.selected { background:var(--green); color:white; border-color:var(--green); }
.slot:disabled { text-decoration:line-through; opacity:.35; }
.rental-option { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:13px 0; border-bottom:1px solid var(--line); }
.rental-option h3 { font-size:12px; }
.rental-option p { font-size:10px; color:var(--muted); margin-top:4px; }
.rental-option select { width:76px; }
.summary { padding:15px 0; margin:12px 0 17px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.total-row { font-size:12px; margin:9px 0; }
.total-row span { color:var(--muted); }
.total-row.total { border-top:1px solid var(--line); padding-top:14px; margin-top:14px; font-size:16px; }
.total-row.total span { color:var(--ink); }
.total-row.discount strong { color:var(--green); }
.points-hint { color:var(--green); background:#e7eddb; padding:11px 13px; border-radius:12px; font-size:11px; margin-bottom:16px; }
.validation-error { color:#a94d35; font-size:12px; padding:8px 0; }
.checkout-note { font-size:10px; color:var(--muted); margin:10px 0 16px; text-align:center; }
.cart-line { display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid var(--line); }
.cart-line .copy { flex:1; }
.cart-line h3 { font-size:12px; }
.cart-line p { font-size:11px; color:var(--muted); margin-top:5px; }
.quantity { display:flex; align-items:center; gap:8px; font-size:12px; }
.quantity button { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#e6eadc; }
.receipt-code { font-size:10px; letter-spacing:1px; color:var(--muted); margin-bottom:15px; }
.success-icon { width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:#e1ead4; color:var(--green); margin-bottom:18px; }
.action-row { display:flex; gap:9px; margin-top:20px; }
.action-row .btn { flex:1; }
#toast { position:fixed; bottom:100px; left:50%; transform:translate(-50%,12px); background:#244c39; color:white; padding:13px 19px; border-radius:16px; max-width:calc(100vw - 40px); width:max-content; font-size:12px; line-height:1.6; box-shadow:0 8px 30px #203a351f; z-index:100; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
#toast.show { opacity:1; transform:translate(-50%,0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@keyframes enter { from { opacity:.6; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (min-width:1000px) {
  .sidebar { display:flex; position:fixed; top:0; bottom:0; left:0; width:225px; padding:34px 24px; background:#eeeee3; border-right:1px solid var(--line); flex-direction:column; }
  .sidebar .club-brand { margin-bottom:44px; gap:10px; }
  .sidebar .brand-name { font-size:12px; }
  .sidebar-nav { display:flex; flex-direction:column; gap:7px; }
  .sidebar-nav .nav-btn { flex-direction:row; justify-content:flex-start; gap:13px; min-height:49px; font-size:12px; padding:0 14px; }
  .sidebar-nav .nav-btn.active { background:#dde5d2; }
  .sidebar-bottom { margin-top:auto; border-top:1px solid #dfe3d5; padding-top:23px; }
  .sidebar-bottom .eyebrow { font-size:9px; }
  .sidebar-bottom p { font-size:12px; color:var(--muted); margin:10px 0; }
  .sidebar-bottom .caption { font-size:10px; }
  .app-shell { max-width:1140px; margin-left:225px; }
  .page { padding:34px 42px 60px; }
  .topbar { margin-bottom:35px; }
  .topbar .club-brand .brandmark { display:none; }
  .topbar .club-brand .brand-name { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
  h1 { font-size:35px; }
  .home-title h1 { font-size:40px; }
  .home-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:23px; align-items:stretch; }
  .hero { min-height:303px; }
  .hero h2 { font-size:34px; }
  .member-card { margin-top:0; padding:27px; display:flex; flex-direction:column; justify-content:space-between; }
  .member-points strong { font-size:48px; }
  .quick-links { display:flex; justify-content:flex-start; gap:39px; margin:28px 0 34px; }
  .quick-link { flex-direction:row; gap:11px; font-size:12px; }
  .quick-link .quick-icon { width:45px; height:45px; border-radius:15px; }
  .home-lower { display:grid; grid-template-columns:1.15fr 1fr; gap:23px; }
  .home-lower .section-title { margin-top:6px; }
  .coffee-banner { min-height:226px; margin-top:6px; }
  .court-list { grid-template-columns:repeat(2,1fr); }
  .court-visual { height:150px; padding:20px; }
  .court-drawing { width:150px; height:85px; }
  .court-copy { padding:17px; }
  .court-copy h3 { font-size:16px; }
  .court-copy p { min-height:40px; }
  .court-bottom { align-items:flex-start; flex-direction:column; gap:13px; }
  .shop-grid { grid-template-columns:repeat(4,1fr); gap:17px; }
  .product-art { height:155px; }
  .product-copy { padding:16px; }
  .product-copy h3 { font-size:13px; }
  .tabs { max-width:570px; }
  .rewards-layout,.member-layout { display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; }
  .rewards-layout > div > .section-title:first-child { margin-top:0; }
  .rewards-overview { min-height:242px; }
  .member-layout .member-card { min-height:245px; }
  .member-layout .section-title:first-child { margin-top:0; }
  .admin-stats { grid-template-columns:repeat(4,1fr); }
  nav#nav { display:none; }
  .floating-cart { left:calc(50% + 112px); bottom:24px; max-width:600px; }
  #toast { bottom:35px; left:calc(50% + 112px); }
  .demo-note { text-align:left; }
}
@media (min-width:1450px) { .app-shell { margin-left:auto; margin-right:auto; padding-left:100px; } }
@media (max-width:370px) {
  .page { padding:20px 16px 110px; }
  .home-title h1 { font-size:30px; }
  .brand-name { font-size:12px; }
  .shop-grid { gap:9px; }
  .product-copy { padding:11px; }
  .product-copy .price { font-size:11px; }
  .reward-card { padding:14px; gap:10px; }
  .reward-icon { width:43px; height:43px; }
  .reward-card h3 { font-size:12px; }
  .reward-card .btn { padding:8px 11px; }
  dialog { padding:27px 18px 20px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.member-skill { display:flex; align-items:center; gap:8px; width:100%; padding:12px 0; background:none; border-top:1px solid #ffffff24; color:#e3ebcd; font-size:11px; text-align:left; }
.member-skill span { flex:1; }
.member-skill strong { margin-left:4px; font-size:14px; color:#f6f7e7; }
.member-skill small { font-size:9px; color:#c6d3b8; }
.image-credit { margin-top:auto; padding-top:13px; font-size:8px; color:#f5f5e0c9; }
.court-photo { padding:0!important; overflow:hidden; height:205px; }
.court-photo img { width:100%; height:100%; object-fit:cover; }
.court-photo.clay img { object-position:50% 58%; }
.court-photo .court-label { background:#fffefae6; z-index:1; }
.product-art img { width:100%; height:100%; object-fit:cover; }
.coffee-banner .product-art { border-radius:60px 60px 20px 20px; overflow:hidden; }
.community-invite { margin-top:25px; padding:20px; border-radius:21px; background:#e4e9dd; display:flex; align-items:center; gap:15px; }
.community-invite > div { flex:1; }
.community-invite h3 { font-size:14px; margin-top:4px; }
.community-invite p { font-size:11px; color:var(--muted); }
.community-invite > .quick-icon { color:var(--green); }
.area-picker { display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--line); padding:16px 18px; border-radius:18px; }
.area-picker > div { flex:1; }
.area-picker label { font-size:10px; color:var(--muted); display:block; margin-bottom:4px; }
.area-picker select { border:0; background:none; width:100%; padding:0; font-size:15px; font-weight:600; min-height:25px; }
.area-picker > small { font-size:10px; color:var(--muted); }
.area-caption { margin:10px 0 23px; font-size:10px; }
.community-grid,.competition-grid { display:grid; gap:17px; }
.community-card,.competition-card { border:1px solid var(--line); background:var(--white); border-radius:22px; overflow:hidden; }
.community-photo,.competition-image { position:relative; height:175px; overflow:hidden; }
.community-photo .court-photo { height:100%; }
.community-photo .court-label { display:none; }
.community-photo > .tag,.competition-image > .tag { position:absolute; top:14px; left:14px; background:#fffefae8; color:var(--ink); border:none; }
.community-copy,.competition-copy { padding:20px; }
.community-copy h3,.competition-copy h3 { margin:7px 0; font-size:19px; }
.community-copy p { color:var(--muted); font-size:12px; }
.group-meta { font-size:10px; color:var(--muted); margin:14px 0 17px; line-height:1.7; }
.my-groups { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.my-groups .eyebrow { width:100%; margin-bottom:2px; }
.group-chip { background:#e1e8d9; border:1px solid #d1ddc7; border-radius:20px; padding:10px 13px; font-size:11px; }
.play-welcome { display:flex; align-items:center; gap:13px; border-radius:19px; background:#e6eadc; padding:20px 17px; }
.play-welcome > div { flex:1; }
.play-welcome h3 { font-size:14px; }
.play-welcome p { font-size:11px; color:var(--muted); margin-top:4px; }
.elo-pill { background:#e3e9d8; border:1px solid #d2ddc6; color:var(--green); padding:10px 13px; border-radius:25px; font-size:12px; display:flex; align-items:center; gap:7px; }
.skill-card { padding:24px; border-radius:23px; background:var(--deep); color:#f3f5df; }
.skill-card .eyebrow { color:#d1ddbd; }
.skill-card .status { background:#ffffff16; color:#d2dfbf; border:1px solid #ffffff24; }
.skill-score { display:flex; align-items:center; gap:15px; margin:20px 0; }
.skill-score > strong { font:600 47px 'Manrope',sans-serif; letter-spacing:-2px; }
.skill-score > div { flex:1; }
.skill-score span { font-size:11px; color:#cbd7b8; }
.skill-score p { font-size:15px; font-weight:600; }
.skill-score .icon-button { width:33px; height:33px; min-width:33px; color:#e4ecd1; background:#ffffff0c; border-color:#ffffff25; }
.skill-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:17px 0; border-top:1px solid #ffffff25; border-bottom:1px solid #ffffff25; }
.skill-stats > div + div { border-left:1px solid #ffffff25; padding-left:20px; }
.skill-stats strong { font-size:20px; display:block; }
.skill-stats small { color:#c2d0b4; font-size:10px; }
.skill-change { margin-top:13px; font-size:10px; color:#d4e1bb; }
.skill-change svg { transform:rotate(-35deg); }
.rating-trend { margin-top:16px; border:1px solid var(--line); background:var(--white); border-radius:23px; padding:23px; }
.rating-trend h3 { font-size:15px; }
.rating-trend svg { width:100%; display:block; margin:15px 0 0; }
.rating-trend .row .caption { font-size:9px; }
.form-results { display:flex; gap:7px; margin-bottom:17px; }
.result-mark { width:36px; height:36px; display:grid; place-items:center; flex-shrink:0; border-radius:11px; font-size:12px; font-weight:700; color:var(--green); background:#e4ecd9; }
.result-mark.loss { color:#a46f49; background:#f0e0d5; }
.match-record { background:var(--white); border:1px solid var(--line); padding:16px; border-radius:16px; display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.match-record .copy { flex:1; min-width:0; }
.match-record h3 { font-size:12px; }
.match-record p { font-size:10px; color:var(--muted); margin-top:3px; }
.elo-delta { text-align:right; font-size:15px; color:var(--green); }
.elo-delta.negative { color:#a37850; }
.elo-delta small { display:block; font-size:9px; margin-top:3px; color:var(--muted); }
.competition-image img { width:100%; height:100%; object-fit:cover; }
.competition-copy p:not(.eyebrow) { font-size:11px; color:var(--muted); margin-bottom:17px; }
.competition-copy p.entry-team { background:#eaf0e1; padding:9px 12px; border-radius:12px; color:var(--green); margin:13px 0; }
.sheet-photo { border-radius:15px; overflow:hidden; margin:17px 0; }
.sheet-photo .court-photo { height:155px; }
.detail-facts { display:grid; gap:12px; font-size:12px; color:var(--muted); margin:22px 0; }
.detail-facts span { display:flex; align-items:center; gap:9px; }
.settings-note { margin-top:18px; }
@media (max-width:999px) {
  #nav { overflow:visible; }
  #nav .nav-btn { min-width:0; flex:1; gap:6px; padding:7px 2px; font-size:10px; }
  #nav .nav-btn.active { background:none; }
  #nav .nav-play { position:relative; padding-top:0; }
  #nav .nav-play .nav-icon { display:grid; place-items:center; width:55px; height:55px; border:5px solid var(--cream); border-radius:50%; background:var(--deep); color:#e7edcb; margin-top:-22px; box-shadow:0 3px 8px #23453115; }
  #nav .nav-play.active .nav-icon { background:var(--green); color:white; }
  #nav .nav-play .nav-label { font-size:9px; font-weight:700; letter-spacing:1px; color:var(--green); }
  .community-invite { flex-wrap:wrap; }
  .community-invite .text-button { margin-left:40px; padding:0; min-height:30px; }
}
@media (min-width:1000px) {
  .community-grid,.competition-grid,.elo-layout { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
  .court-photo { height:225px; }
  .community-photo .court-photo { height:175px; }
  .rating-trend { margin:0; display:flex; flex-direction:column; justify-content:center; }
  .competition-image { height:210px; }
  .booking-records { display:grid; grid-template-columns:1fr 1fr; gap:17px; }
}

.community-header { border:1px solid var(--line); background:var(--white); border-radius:23px; overflow:hidden; margin-top:12px; }
.group-cover { position:relative; height:175px; }
.group-cover img { width:100%; height:100%; object-fit:cover; object-position:50% 57%; }
.group-cover .tag { position:absolute; top:16px; left:18px; background:#fffefae6; color:var(--ink); border:none; }
.group-heading { padding:22px; }
.group-heading h1 { font-size:26px; margin:7px 0 12px; }
.group-heading > p:not(.eyebrow) { font-size:12px; color:var(--muted); margin-bottom:18px; max-width:640px; }
.community-chat { background:var(--white); border:1px solid var(--line); border-radius:21px; padding:18px; }
.chat-pinned { display:flex; align-items:flex-start; gap:10px; padding:13px; background:#eaf0e2; border-radius:12px; font-size:10px; color:var(--green); line-height:1.6; }
.chat-pinned svg { flex-shrink:0; }
.chat-pinned small { display:block; color:var(--muted); margin-top:3px; }
.chat-date { text-align:center; font-size:8px; color:var(--muted); letter-spacing:1px; margin:22px 0; }
.chat-message { display:flex; align-items:flex-start; gap:10px; margin-bottom:17px; }
.chat-message .avatar { width:30px; height:30px; font-size:9px; }
.chat-message > div { max-width:85%; background:#f0f2e9; border-radius:3px 15px 15px; padding:11px 13px; }
.chat-message small { color:var(--green); font-size:9px; font-weight:600; }
.chat-message p { font-size:12px; margin:5px 0; white-space:pre-wrap; }
.chat-message time { font-size:8px; color:var(--muted); display:block; text-align:right; }
.chat-message.own { justify-content:flex-end; }
.chat-message.own > div { background:#e3edd8; border-radius:15px 3px 15px 15px; }
.chat-composer { display:flex; align-items:flex-end; gap:9px; padding-top:16px; border-top:1px solid var(--line); margin-bottom:11px; }
.chat-composer textarea { flex:1; min-width:0; font-size:12px; min-height:54px; resize:vertical; }
.chat-composer .btn { width:48px; height:48px; min-width:48px; padding:0; }
.community-session { display:flex; align-items:center; gap:12px; padding:17px; margin-bottom:14px; border:1px solid var(--line); border-radius:19px; background:var(--white); }
.session-date { display:grid; place-items:center; background:#e6ecdb; color:var(--green); border-radius:14px; padding:11px; width:52px; flex-shrink:0; }
.session-date strong { font-size:20px; }
.session-date small { font-size:9px; text-transform:uppercase; }
.community-session .copy { flex:1; min-width:0; }
.community-session h3 { font-size:12px; margin:4px 0; }
.community-session p { font-size:10px; color:var(--muted); }
.community-session .btn { flex-shrink:0; font-size:9px; padding:8px 10px; }
.roster-list { background:var(--white); border:1px solid var(--line); border-radius:20px; padding:4px 18px; }
.roster-row { display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding:15px 0; }
.roster-row:last-child { border:0; }
.roster-row .avatar { width:37px; height:37px; font-size:10px; }
.roster-row .copy { flex:1; font-size:12px; }
.roster-row small { font-size:9px; color:var(--muted); display:block; margin-top:4px; }
.roster-elo { font-weight:700; text-align:right; color:var(--green); }
.elo-range { display:flex; align-items:center; gap:6px; width:fit-content; background:#eaf0e1; color:var(--green); border-radius:20px; padding:7px 10px; font-size:11px; font-weight:600; margin:9px 0 14px; }
.elo-range small { font-size:9px; font-weight:400; opacity:.8; }
.team-roster { border:1px solid var(--line); background:#fffefa; border-radius:16px; padding:15px; margin-bottom:12px; }
.team-roster h3 { font-size:13px; }
.team-community { font-size:10px; color:var(--muted); margin:8px 0 12px; }
.team-player { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:11px; }
.team-player .avatar { width:28px; height:28px; font-size:8px; }
.team-player > span:nth-child(2) { flex:1; }
.team-player strong { font-size:11px; color:var(--green); }
.team-player small { font-weight:400; font-size:8px; }
.participant-self { display:flex; justify-content:space-between; background:#eaf0e1; padding:13px; border-radius:13px; font-size:11px; margin-bottom:17px; }
.mex-intro { display:flex; align-items:center; gap:16px; padding:23px; border-radius:22px; background:#e4eadb; margin-bottom:18px; }
.mex-intro > span { color:var(--green); }
.mex-intro h2 { margin:5px 0; font-size:23px; }
.mex-intro p:not(.eyebrow) { color:var(--muted); font-size:11px; }
.mex-import { background:#eaf0e1; padding:13px; border-radius:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:16px 0; }
.mex-import label { width:100%; font-size:10px; color:var(--muted); }
.mex-import select { flex:1; min-width:0; font-size:11px; width:auto; }
.mex-import .btn { font-size:10px; padding:9px 12px; }
.mex-session-head { display:flex; align-items:center; gap:15px; justify-content:space-between; background:#e7ebde; padding:20px; border-radius:21px; }
.mex-session-head h2 { margin:5px 0; font-size:21px; }
.mex-session-head p:not(.eyebrow) { font-size:10px; color:var(--muted); }
.mex-session-head .text-button { font-size:10px; white-space:nowrap; }
.mex-matches { display:grid; gap:14px; margin-bottom:18px; }
.mex-match { background:var(--white); border:1px solid var(--line); border-radius:19px; padding:18px; }
.mex-pairing { display:grid; grid-template-columns:1fr 20px 1fr; gap:8px; text-align:center; align-items:center; padding:20px 0; }
.mex-pairing small { color:var(--muted); font-size:8px; display:block; letter-spacing:1px; margin-bottom:7px; }
.mex-pairing strong { font-size:13px; line-height:1.8; }
.mex-pairing > span { font-size:9px; color:var(--muted); }
.mex-score-form { display:flex; align-items:flex-end; justify-content:center; gap:10px; padding-top:13px; border-top:1px solid var(--line); }
.mex-score-form label { display:block; color:var(--muted); font-size:9px; margin-bottom:6px; }
.mex-score-form input,.mex-score-form output { width:60px; height:43px; display:grid; place-items:center; text-align:center; padding:8px; border:1px solid var(--line); border-radius:12px; font-size:17px; background:#f4f5ed; }
.mex-score-form > span { margin-bottom:11px; }
.mex-score-form .btn { min-height:43px; font-size:10px; padding:9px 12px; }
.mex-final-score { font:700 24px 'Manrope',sans-serif; text-align:center; color:var(--green); }
.mex-table-wrap { overflow:auto; background:var(--white); border:1px solid var(--line); border-radius:18px; padding:0 12px; }
.mex-table { border-collapse:collapse; width:100%; text-align:left; font-size:11px; }
.mex-table th,.mex-table td { padding:13px 7px; border-bottom:1px solid var(--line); }
.mex-table thead th { color:var(--muted); font-size:9px; font-weight:500; }
.mex-table tbody tr:last-child > * { border:0; }
.mex-table tbody th { font-weight:500; }
.mex-table tbody th small { display:block; font-size:8px; color:var(--muted); margin-top:3px; }
.mex-table tbody tr:first-child { color:var(--green); }
.mex-round-history details { background:#eef0e5; border-radius:15px; padding:14px; margin-bottom:12px; }
.mex-round-history summary { cursor:pointer; font-size:12px; }
.mex-round-history .mex-match { margin-top:15px; }
.mex-podium { text-align:center; padding:24px; background:var(--deep); color:#f3f4d8; border-radius:22px; margin-top:17px; }
.mex-podium .eyebrow { color:#cbd7b6; margin:12px 0 6px; }
.mex-podium p:last-child { color:#d5dfc0; font-size:11px; margin-top:7px; }
.play-tabs { overflow-x:auto; border-radius:17px; }
.play-tabs button { font-size:10px; padding:7px 8px; }
.rating-tracks { margin-bottom:17px; }
.elo-chart-card { background:#263a30; color:#f6f6e9; border-radius:23px; padding:23px 20px 18px; overflow:hidden; }
.elo-chart-card .eyebrow { color:#becdbb; font-size:9px; }
.chart-rating { display:flex; align-items:center; gap:13px; margin-top:6px; }
.chart-rating > strong { font:800 44px 'Manrope',sans-serif; letter-spacing:-2px; }
.chart-rating strong small { font-size:22px; vertical-align:top; color:#b8c6b1; }
.chart-rating > span { color:#a6d690; font-size:17px; font-weight:700; }
.chart-status { color:#d7e1c9; font-size:9px; background:#ffffff10; padding:7px 10px; border-radius:9px; white-space:nowrap; }
.rating-ranges { display:flex; gap:5px; justify-content:space-between; margin:24px 0 8px; }
.rating-ranges button { color:#cdd5c7; background:none; border-radius:9px; padding:12px; font-size:11px; font-weight:600; min-height:42px; }
.rating-ranges button.active { background:#ffffff12; color:white; }
.elo-chart { display:block; width:100%; height:auto; margin:0; }
.elo-chart text { font-size:18px; }
.chart-dates { display:flex; justify-content:space-between; color:#abbda8; font-size:9px; padding-left:26px; }
.rating-highlights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; text-align:center; padding:22px 0 0; margin-top:20px; border-top:1px solid #ffffff17; }
.rating-highlights strong { display:block; font:800 19px 'Manrope',sans-serif; }
.rating-highlights em { font:400 11px 'DM Sans',sans-serif; color:#bfcdb5; }
.rating-highlights small { font-size:8px; color:#bbcbb4; display:block; margin-top:6px; }
.rating-calibration { display:flex; align-items:center; gap:13px; padding:18px; border:1px solid #d5dac8; border-radius:18px; margin-top:17px; background:#e9eddf; }
.rating-calibration > span { color:#61834e; }
.rating-calibration > div { flex:1; min-width:0; }
.rating-calibration h3 { font-size:13px; }
.rating-calibration p { font-size:10px; color:#65735f; margin-top:4px; }
.rating-calibration > strong { font:800 20px 'Manrope',sans-serif; color:#527343; }
.calibration-steps { display:flex; gap:5px; margin-top:10px; }
.calibration-steps i { width:24px; height:24px; display:grid; place-items:center; border:1px solid #b5c0a9; border-radius:50%; font-style:normal; font-size:9px; }
.calibration-steps i.done { background:#436b43; color:white; border-color:#436b43; }
.rating-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.rating-stat-grid article { padding:18px 16px; border:1px solid var(--line); border-radius:17px; background:var(--white); }
.rating-stat-grid strong { font:800 31px 'Manrope',sans-serif; letter-spacing:-1px; }
.rating-stat-grid p { color:#6f7c6b; font-size:10px; margin-top:7px; }
.rating-stat-grid p span { margin-left:5px; color:#839277; }
.rating-filters { display:flex; gap:7px; overflow:auto; padding:2px 0 14px; }
.rating-filters button { flex-shrink:0; font-size:10px; padding:10px 14px; border-radius:20px; background:#e8edde; }
.rating-filters button.active { background:var(--deep); color:white; }
.rating-match { background:var(--white); border:1px solid var(--line); border-radius:18px; padding:18px; margin-bottom:12px; }
.rating-match h3 { margin-top:14px; font-size:14px; }
.rating-match .eyebrow { font-size:8px; letter-spacing:.8px; }
.rating-match-date { font-size:9px; color:var(--muted); margin-top:5px; }
.match-versus { display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:10px; align-items:center; margin:19px 0; }
.match-versus strong { font-size:12px; line-height:1.5; display:block; }
.match-versus small { display:block; color:var(--muted); font-size:9px; margin-top:4px; }
.match-versus > span { font-size:10px; color:var(--muted); }
.match-versus > div:last-child { text-align:right; }
.match-record-bottom { display:flex; align-items:center; gap:13px; border-top:1px solid var(--line); padding-top:14px; }
.match-score { font-weight:700; font-size:12px; flex:1; }
.match-record-bottom .elo-delta { text-align:right; }
.match-record-bottom .elo-delta small { font-size:8px; white-space:nowrap; }
.match-record-bottom .btn { font-size:9px; min-height:36px; padding:8px 11px; }
.negative { color:#b46049!important; }
.result-mark.draw { background:#e3e4dc; color:#747c69; }
.status.pending { color:#916a30; background:#f5ead2; }
.status.verified { color:#436b43; background:#e6eedb; }
.trophy-grid { display:grid; gap:13px; }
.trophy-card { display:flex; align-items:center; gap:12px; padding:19px 16px; border:1px solid #ddd4b8; border-radius:20px; background:linear-gradient(120deg,#f3edde,#fffdf1); }
.trophy-medal { color:#a58040; width:44px; height:52px; display:grid; place-items:center; background:#eadebc; border-radius:22px 22px 8px 8px; flex-shrink:0; }
.trophy-card > div { flex:1; min-width:0; }
.trophy-card .eyebrow { color:#9e7e3e; font-size:8px; }
.trophy-card h3 { font-size:13px; margin:5px 0; }
.trophy-card p:not(.eyebrow) { color:#8b816e; font-size:9px; }
.trophy-rating { display:block; color:#7d713c; font-size:9px; font-weight:600; margin-top:7px; }
.rating-sandbox { display:flex; align-items:center; justify-content:space-between; gap:10px; background:#f0e3ca; border-radius:13px; padding:12px; margin-bottom:16px; font-size:10px; }
.rating-sandbox .text-button { font-size:9px; }
.rating-player-fields,.rating-score-fields,.rating-event-fields { border:1px solid var(--line); padding:16px; border-radius:16px; margin:17px 0; background:#fbfbf4; }
.rating-player-fields h3,.rating-score-fields h3,.rating-event-fields h3 { font-size:13px; margin-bottom:16px; }
.rating-player-fields .form-field:last-child,.rating-event-fields .form-field:last-child { margin-bottom:0; }
.rating-self { display:flex; align-items:center; gap:12px; padding:15px; background:#e8eedf; border-radius:16px; margin-top:22px; }
.rating-self strong { font-size:12px; }
.rating-self p,.rating-self small { font-size:10px; color:#708269; }
.rating-player-fields input[readonly] { background:#e8ecdf; color:#7b876f; }
.rating-detail-context p { color:var(--muted); font-size:10px; margin-top:7px; }
.detail-versus { display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr); gap:12px; align-items:center; margin:25px 0; }
.detail-versus > span { font-size:10px; color:var(--muted); text-align:center; }
.detail-versus .eyebrow { font-size:8px; letter-spacing:.7px; }
.detail-player { margin-top:13px; }
.detail-player strong { display:block; font-size:12px; }
.detail-player small { display:block; font-size:9px; color:var(--muted); margin-top:4px; }
.rating-score-summary { padding:18px; background:#e9eede; border-radius:15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rating-score-summary strong { font:700 19px 'Manrope',sans-serif; }
.rating-score-summary span { font-size:11px; }
.rating-table-wrap { overflow:auto; margin:19px 0; border:1px solid var(--line); border-radius:14px; }
.rating-change-table { border-collapse:collapse; width:100%; font-size:10px; }
.rating-change-table caption { text-align:left; padding:14px; background:#f1f2e9; font-weight:700; font-size:11px; }
.rating-change-table th,.rating-change-table td { padding:11px 10px; border-top:1px solid var(--line); text-align:right; }
.rating-change-table th:first-child { text-align:left; font-weight:500; }
.rating-change-table thead { color:var(--muted); font-size:9px; }
.rating-change-table small { font-size:8px; }
.rating-change-table .self { background:#eef2e6; font-weight:700; }
.rating-change-table td:nth-child(3) { color:var(--green); font-weight:700; }
.rating-explained { padding:17px; background:#edf0e5; border-radius:16px; margin-bottom:20px; }
.rating-explained p:not(.eyebrow) { font-size:11px; margin-top:8px; }
.final-title { display:flex; align-items:center; gap:12px; border-radius:16px; padding:18px; background:#eee2c4; color:#887036; margin:20px 0; }
.final-title strong { font-size:13px; }
.final-title p { font-size:10px; }
.rating-rules article { margin-bottom:18px; }
.rating-rules h3 { font-size:14px; margin-bottom:7px; }
.rating-rules p { font-size:12px; color:#71806c; }
.rating-formula { padding:20px; background:var(--deep); color:#e7edd8; border-radius:17px; }
.rating-formula p { font-size:12px; font-weight:600; margin-bottom:10px; }
.rating-formula small { color:#c8d3bc; font-size:10px; }
.rating-example { border-collapse:collapse; width:100%; margin-bottom:15px; font-size:12px; }
.rating-example th,.rating-example td { text-align:left; padding:12px 8px; border-bottom:1px solid var(--line); }
.rating-example th { font-size:10px; color:var(--muted); }
@media (max-width:380px) {
  .elo-chart-card { padding:20px 15px 16px; }
  .chart-rating > strong { font-size:37px; }
  .chart-rating > span { font-size:14px; }
  .chart-status { font-size:8px; padding:6px; }
  .match-record-bottom { flex-wrap:wrap; gap:9px; }
  .rating-calibration > span { display:none; }
  .rating-score-summary strong { font-size:16px; }
}
@media (min-width:1000px) {
  .rating-stat-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .elo-chart-card { padding:28px 30px; }
  .chart-rating > strong { font-size:55px; }
  .elo-chart { max-height:320px; }
  .elo-chart text { font-size:11px; }
  .rating-highlights strong { font-size:24px; }
  .rating-highlights small { font-size:10px; }
  .rating-match { padding:22px; }
  .match-versus strong { font-size:14px; }
  .trophy-grid { grid-template-columns:1fr 1fr; }
}
@media (min-width:1000px) {
  .community-header { display:grid; grid-template-columns:1fr 1.1fr; }
  .group-cover { height:100%; min-height:240px; }
  .group-heading { padding:28px; }
  .community-chat { max-width:760px; padding:25px; }
  .mex-matches { grid-template-columns:1fr 1fr; }
  .mex-intro { padding:30px; }
  #mex-setup-form { max-width:680px; }
  .mex-table { font-size:12px; }
  .play-tabs button { font-size:12px; }
}