:root{--mint:#72f2b9;--mint-deep:#1faf74;--pink:#f983e2;--pink-deep:#d6229e;--fairway:#16321a;--fairway-2:#1f4527;--ink:#14171a;--ink-soft:#4b5259;--ink-faint:#8b929a;--paper:#fff;--surface:#fbf8f2;--line:#eae3d3;--font-display:"Fraunces", serif;--font-body:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius:12px;--radius-sm:9px;--shadow-card:0 1px 2px #14171a0a, 0 4px 16px #14171a0f;--safe-top:env(safe-area-inset-top,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}#root{padding-top:var(--safe-top)}body:before{content:"";height:var(--safe-top);background:var(--surface);z-index:150;pointer-events:none;position:fixed;top:0;left:0;right:0}body{font-family:var(--font-body);background:var(--surface);color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;margin:0}button,input,textarea,select{font-family:inherit}a{color:inherit;text-decoration:none}.app-shell{max-width:560px;min-height:calc(100vh - var(--safe-top));background:var(--surface);margin:0 auto;padding-bottom:76px;position:relative}@media (width>=1025px){.app-shell{border-left:1px solid var(--line);border-right:1px solid var(--line);max-width:720px;margin:0 0 0 260px;padding-bottom:32px}}@media (width>=1180px){.app-shell{margin-left:calc(50% - 230px)}.main-nav{left:calc(50% - 490px)}}.main-nav{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--line);max-width:560px;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:50;background:#ffffffeb;margin:0 auto;display:flex;position:fixed;bottom:0;left:0;right:0}@media (width>=1025px){.main-nav{border-top:none;border-right:1px solid var(--line);background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:2px;width:260px;max-width:none;padding:0 12px;inset:0 auto 0 0}}.sidebar-brand{display:none}@media (width>=1025px){.sidebar-brand{border-bottom:1px solid var(--line);align-items:center;gap:9px;margin-bottom:6px;padding:22px 10px 18px;display:flex}}.home-title-desktop{display:none}@media (width>=1025px){.home-brand-mobile{display:none!important}.home-title-desktop{display:block}}.bottom-nav-item{border-radius:var(--radius-sm);color:var(--ink-faint);letter-spacing:.02em;cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;align-items:center;gap:2px;padding:6px 0;font-size:10.5px;font-weight:600;display:flex}.bottom-nav-item.active{color:var(--fairway)}.bottom-nav-item .icon{font-size:21px;line-height:1}@media (width>=1025px){.bottom-nav-item{letter-spacing:0;flex-direction:row;justify-content:flex-start;gap:12px;padding:10px 12px;font-size:14px}.bottom-nav-item.active{background:var(--surface)}.bottom-nav-item .icon{font-size:22px}}.top-bar{top:var(--safe-top);z-index:40;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);background:#fbf8f2eb;justify-content:space-between;align-items:center;padding:14px 16px;display:flex;position:sticky}.top-bar h1{letter-spacing:-.01em;margin:0;font-size:20px;font-weight:700}.page-body{padding:14px 16px 24px}.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-card);border:1px solid var(--line);padding:14px}.round-card{cursor:pointer;margin-bottom:12px}.round-card .badge-row{align-items:center;gap:6px;margin-bottom:8px;display:flex}.round-card .course-name{letter-spacing:-.01em;margin:0 0 2px;font-size:16px;font-weight:700}.round-card .meta{color:var(--ink-soft);margin:0 0 10px;font-size:13px}.round-card .players-row{justify-content:space-between;align-items:center;display:flex}.round-card .players-count{color:var(--ink);font-size:13px;font-weight:700}.badge{letter-spacing:.02em;border-radius:6px;align-items:center;gap:4px;padding:3px 8px;font-size:10.5px;font-weight:700;display:inline-flex}.badge-official{background:var(--fairway);color:#fff}.badge-night{color:var(--ink-soft);border:1px solid var(--line);background:0 0}.badge-community{background:var(--surface);color:var(--ink-soft);border:1px solid var(--line)}.badge-mint{color:var(--mint-deep);background:#1faf741f}.badge-pink{color:var(--pink-deep);background:0 0;padding-left:0}.badge-closed{color:var(--ink-faint);background:#f3f1ea}.badge-sponsored{color:var(--pink-deep);background:0 0;padding-left:0}.btn{font-family:var(--font-body);cursor:pointer;border:none;border-radius:9px;justify-content:center;align-items:center;padding:11px 18px;font-size:14.5px;font-weight:600;transition:transform 50ms;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--ink);color:#fff}.btn-mint{background:var(--mint);color:#063823}.btn-outline{color:var(--ink);border:1.5px solid var(--line);background:0 0}.btn-block{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed}.input,textarea.input,select.input{border-radius:var(--radius-sm);border:1.5px solid var(--line);width:100%;font-size:15px;font-family:var(--font-body);background:var(--paper);color:var(--ink);padding:11px 13px}.input:focus,textarea.input:focus,select.input:focus{border-color:var(--fairway);outline:none}.section-title{color:var(--ink);margin:24px 0 10px;font-size:15px;font-weight:700}.section-title:first-child{margin-top:0}.empty-state{text-align:center;color:var(--ink-faint);padding:40px 20px;font-size:14px}.avatar{background:var(--mint);color:#063823;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:14px;font-weight:700;display:flex;overflow:hidden}.avatar img{object-fit:cover;width:100%;height:100%}.filter-pills{-webkit-overflow-scrolling:touch;gap:7px;padding-bottom:4px;display:flex;overflow-x:auto}.filter-pills::-webkit-scrollbar{display:none}.filter-pill{white-space:nowrap;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);cursor:pointer;border-radius:8px;flex-shrink:0;padding:7px 13px;font-size:12.5px;font-weight:600}.filter-pill.active{background:var(--fairway);color:#fff;border-color:var(--fairway)}.filter-pill.night-pill.active{background:var(--ink-soft);border-color:var(--ink-soft)}.admin-table{border-collapse:collapse;width:100%;font-size:13px}.admin-table th{text-align:left;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);border-bottom:1px solid var(--line);padding:10px 12px;font-size:11px}.admin-table td{border-bottom:1px solid var(--line);vertical-align:middle;padding:10px 12px}.admin-table tr:hover td{background:var(--surface);cursor:pointer}.admin-member-cards{display:none}@media (width<=860px){.admin-table-wrap{display:none}.admin-member-cards{display:block}}.round-card{padding:0;overflow:hidden}.round-card .course-image-banner{object-fit:cover;background:var(--surface);width:100%;height:120px;display:block}.round-card .course-image-placeholder{background:linear-gradient(135deg, var(--surface), #ece5d2);justify-content:center;align-items:center;width:100%;height:64px;font-size:22px;display:flex}.round-card .round-card-body{padding:14px}.round-card .price-line{color:var(--ink);margin:4px 0 0;font-size:13.5px;font-weight:700}.round-card .price-line .package{color:var(--ink-soft);margin-left:6px;font-size:12px;font-weight:500}.course-indicators{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.course-indicator{background:var(--surface);color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;align-items:center;gap:3px;padding:3px 8px;font-size:10.5px;font-weight:600;display:inline-flex}.card-clickable{cursor:pointer;transition:transform 80ms,box-shadow 80ms}.card-clickable:active{transform:scale(.98)}@media (hover:hover){.card-clickable:hover{box-shadow:0 2px 4px #14171a0f,0 8px 20px #14171a17}}.hero-fairway{background:linear-gradient(180deg, #16321a40 0%, #16321af0 70%, var(--fairway) 100%);color:#fff;border-radius:var(--radius);background-position:50%;background-size:cover;padding:22px 18px 20px;position:relative;overflow:hidden}.hero-fairway .hero-label{color:var(--mint);margin:0 0 6px;font-size:12px;font-weight:600}.hero-fairway h2{color:#fff;margin:0 0 6px;font-size:24px;line-height:1.15}.hero-fairway .hero-meta{color:#ffffffb8;margin:0 0 16px;font-size:13px}.toggle-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:12px 0;display:flex}.toggle-row:last-child{border-bottom:none}.toggle-row-label{font-size:14px;font-weight:500}.toggle-switch{flex-shrink:0;width:42px;height:24px;display:inline-block;position:relative}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{background:var(--line);cursor:pointer;border-radius:999px;transition:background .15s;position:absolute;inset:0}.toggle-slider:before{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #14171a40}.toggle-switch input:checked+.toggle-slider{background:var(--mint-deep)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(18px)}.toggle-switch input:disabled+.toggle-slider{opacity:.5;cursor:not-allowed}.settings-group{margin-bottom:26px}.settings-group-title{letter-spacing:.02em;color:var(--ink-faint);text-transform:uppercase;margin:0 0 4px;font-size:12px;font-weight:700}
/* ===== Clubhouse desktop layout (20 Oct) — only for screens 1025px and wider; phones and the installed app are unchanged ===== */
@media (min-width:1025px){
  :root{--sb:248px;--content:1040px;--group:calc(var(--sb) + var(--content));--offset:max(0px, calc((100vw - var(--group)) / 2))}
  body{background:var(--surface)}
  /* sidebar + content sit together as one centred block */
  .main-nav{left:var(--offset)!important;width:var(--sb)!important;padding:0 14px 18px!important;gap:4px!important;background:var(--paper)!important;border-right:1px solid var(--line)!important;border-left:1px solid var(--line)}
  .sidebar-brand{padding:26px 10px 22px!important;margin-bottom:10px!important}
  .sidebar-brand img{width:40px!important;height:40px!important;border-radius:10px!important}
  .sidebar-brand div div:first-child{font-size:19px!important}
  .sidebar-brand div div:last-child{font-size:11.5px!important}
  .bottom-nav-item{flex:0 0 auto!important;padding:11px 14px!important;font-size:15px!important;font-weight:600!important;color:var(--ink-soft)!important;border-radius:10px!important;position:relative;transition:background .12s,color .12s}
  .bottom-nav-item:hover{background:var(--surface)!important;color:var(--ink)!important}
  .bottom-nav-item.active{background:#1faf741a!important;color:var(--fairway)!important}
  .bottom-nav-item.active:before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--mint-deep)}
  .bottom-nav-item svg{width:22px;height:22px}
  .main-nav > .bottom-nav-item:last-of-type{margin-top:auto}
  .main-nav:after{content:"Golf trips in Thailand · faranggolf.com";display:block;padding:14px 12px 0;margin-top:10px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.5;color:var(--ink-faint)}

  .app-shell{margin:0 0 0 calc(var(--offset) + var(--sb))!important;max-width:var(--content)!important;width:auto!important;border:none!important;border-right:1px solid var(--line)!important;padding-bottom:56px!important;min-height:100vh}
  .top-bar{padding:22px 40px 18px!important;background:#fbf8f2f2!important}
  .top-bar h1{font-family:var(--font-display);font-size:30px!important;font-weight:700;letter-spacing:-.015em}
  .page-body{padding:26px 40px 48px!important}
  .section-title{font-family:var(--font-display);font-size:21px!important}
  .page-body > .section-title{margin:34px 0 14px!important}
  .btn{font-size:14.5px}
  .filter-pills{flex-wrap:wrap;overflow:visible!important}
  .filter-pill{padding:8px 15px!important;font-size:13.5px!important}
  .empty-state{padding:90px 20px!important;font-size:15.5px!important}

  /* list pages (Home, Play, Community, Promotions): items flow into a grid */
  .page-body:has(> div[style*="cursor: pointer"]){display:flex;flex-wrap:wrap;column-gap:20px;align-content:flex-start}
  .page-body:has(> div[style*="cursor: pointer"]) > *{flex:1 1 100%;min-width:0}

  /* picture cards: rounds on Play and offers on Promotions, two per row */
  .page-body > div[style*="cursor: pointer"]:has(> img[style*="height: 150px"]){flex:0 1 calc(50% - 10px)!important;background:var(--paper);border:1px solid var(--line)!important;border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden;padding:0 0 18px!important;margin:0 0 20px!important;transition:box-shadow .15s,transform .15s}
  .page-body > div[style*="cursor: pointer"]:has(> img[style*="height: 150px"]):hover{box-shadow:0 4px 10px #14171a14,0 14px 34px #14171a1f;transform:translateY(-2px)}
  .page-body > div[style*="cursor: pointer"]:has(> img[style*="height: 150px"]) > img{height:210px!important;border-radius:0!important;margin:0 0 14px!important}
  .page-body > div[style*="cursor: pointer"]:has(> img[style*="height: 150px"]) > *:not(img){margin-left:20px!important;margin-right:20px!important}

  /* text rows (posts on Home and Community): small cards, two per row */
  .page-body > div[style*="cursor: pointer"][style*="border-bottom: 1px solid var(--line)"]:not(:has(> img)){flex:0 1 calc(50% - 10px)!important;background:var(--paper);border:1px solid var(--line)!important;border-radius:12px;padding:15px 18px!important;margin-bottom:14px;transition:box-shadow .12s}
  .page-body > div[style*="cursor: pointer"][style*="border-bottom: 1px solid var(--line)"]:not(:has(> img)):hover{border-color:#d9cfb8!important;box-shadow:var(--shadow-card)}
  .page-body > div[style*="cursor: pointer"][style*="border-bottom: 1px solid var(--line)"]:not(:has(> img)) > p:first-child{font-size:15.5px!important}

  /* the featured (green) post on Community */
  .page-body > div[style*="background: var(--fairway)"]{padding:28px 30px!important;border-radius:18px!important;margin-bottom:24px!important}
  .page-body > div[style*="background: var(--fairway)"] > p[style*="font-size: 18px"]{font-size:26px!important}
  .page-body > div[style*="background: var(--fairway)"] > p[style*="line-height: 1.5"]{font-size:14.5px!important;max-width:760px}

  /* Home */
  .page-body > .hero-fairway{margin:0 0 6px!important;border-radius:20px!important;min-height:300px;padding:40px 40px 34px!important;display:flex;flex-direction:column;justify-content:flex-end}
  .page-body > .hero-fairway h2{font-size:42px!important;margin-bottom:10px!important}
  .page-body > .hero-fairway .hero-label{font-size:13.5px!important}
  .page-body > .hero-fairway .hero-meta{font-size:15px!important;margin-bottom:22px!important}
  .page-body > .hero-fairway .btn{padding:13px 26px!important;font-size:15.5px!important}
  .page-body > div[style*="border-bottom: 1px solid var(--line)"][style*="align-items: baseline"]{padding:14px 18px!important;margin-bottom:22px!important;border:1px solid var(--line)!important;border-radius:12px;background:var(--paper);font-size:14px}
  .page-body > div[style*="overflow-x: auto"]{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px!important;margin:0!important;padding:0!important;overflow:visible!important}
  .page-body > div[style*="overflow-x: auto"] > div{width:auto!important;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;padding-bottom:14px;transition:box-shadow .15s,transform .15s}
  .page-body > div[style*="overflow-x: auto"] > div:hover{box-shadow:0 4px 10px #14171a14,0 14px 34px #14171a1f;transform:translateY(-2px)}
  .page-body > div[style*="overflow-x: auto"] > div > img{height:150px!important;border-radius:0!important;margin-bottom:12px!important;background:#fff}
  .page-body > div[style*="overflow-x: auto"] > div > p{padding:0 14px}
  .page-body > div[style*="overflow-x: auto"] > div > p[style*="font-size: 13px"]{font-size:15px!important}

  /* Play: the round card text, and the List / Calendar switch */
  .page-body > div[style*="cursor: pointer"]:has(> img[style*="height: 150px"]) > p.meta{font-size:14px!important;color:var(--ink-soft);margin-top:2px!important;margin-bottom:6px!important}
  .page-body > div[style*="cursor: pointer"]:has(> img[style*="height: 150px"]) > p[style*="font-size: 16px"]{font-family:var(--font-display);font-size:21px!important;margin-top:4px!important}
  .page-body > div[style*="cursor: pointer"]:has(> img[style*="height: 150px"]) > .price-line{font-size:15px!important;margin:8px 20px 4px!important}
  .page-body > div[style*="cursor: pointer"]:has(> img[style*="height: 150px"]) .price-line .package{display:block;margin:2px 0 0!important;font-size:13px!important;font-weight:500;color:var(--ink-soft)}
  .page-body > div[style*="cursor: pointer"]:has(> img[style*="height: 150px"]) > .players-row{display:flex!important;justify-content:space-between!important;align-items:center;margin-top:14px!important;padding-top:14px;border-top:1px solid var(--line)}
  .page-body > div:first-child:has(> .btn + .btn) > .btn{flex:0 0 auto!important;padding:10px 22px!important}

  /* detail pages: comfortable line length for long text */
  .page-body:not(:has(> div[style*="cursor: pointer"])) > p{max-width:780px}

  /* forms: sign-in in a neat centred column, other forms not wider than 760px */
  .page-body[style*="padding-top: 60px"]{max-width:500px;margin:0 auto;padding-top:64px!important}
  .page-body:has(.input):not([style*="padding-top: 60px"]):not(:has(> div[style*="cursor: pointer"])){max-width:840px}

  /* Chat: no bottom bar on desktop, so use the full height */
  .app-shell:has(> div[style*="height: calc(100vh - 76px"]){padding-bottom:0!important}
  .app-shell > div[style*="height: calc(100vh - 76px"]{height:calc(100vh - var(--safe-top))!important}
  .app-shell > div[style*="height: calc(100vh - 76px"] > div[style*="overflow-y: auto"]{padding:20px 40px!important}
}
@media (min-width:1025px) and (max-width:1180px){
  :root{--sb:220px}
  .page-body,.top-bar{padding-left:28px!important;padding-right:28px!important}
}
