/* Shared settings/guide modal — copied from Metro (index.html) */
:root, .modal {
  --sys: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "IBM Plex Sans Thai", "Noto Sans Thai", sans-serif;
  --tint: #C5391F;
}
/* Metro accent inside settings/auth sheets (even on Khet) */
.modal { --verm: #C5391F; --tint: #C5391F; }
.setpanel { display: none; }
.setpanel.on { display: block; }

/* index.html L435-443 */
.modal{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center}
.modal.on{display:flex}
.sheet{background:var(--bg);width:calc(100% - 32px);max-width:560px;border-radius:20px;padding:24px 24px 30px;max-height:86vh;overflow:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;position:relative}
.sheet::-webkit-scrollbar{display:none;width:0;height:0}
.sheet h3{font-family:var(--sys);font-size:18px;margin-bottom:4px;padding-right:36px}
.sheet .row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--sep);font-family:var(--sys);font-size:15px;color:var(--txt)}
.sheet .row:last-child{border-bottom:0}
.sheet p{font-family:var(--sys);font-size:14px;color:var(--txt2);line-height:1.6}
.sheet .closex{position:absolute;top:14px;right:16px;float:none;border:0;background:transparent;border-radius:0;padding:8px;font-family:var(--sys);font-weight:500;font-size:18px;line-height:1;letter-spacing:0;color:inherit;opacity:.45;cursor:pointer}
.sheet .closex:hover{opacity:1;background:transparent}


/* index.html L478-482 */
.modal .sheet{background:rgba(20,22,28,.92);backdrop-filter:blur(24px) saturate(160%);color:#f3f3f6}
.modal .sheet h3{color:#fff}
.modal .sheet p{color:rgba(235,235,240,.68)}
.modal .sheet .closex{background:transparent;color:#f3f3f6}

/* index.html L579-584 */
.volrange{-webkit-appearance:none;appearance:none;width:140px;height:5px;border-radius:3px;
  background:rgba(255,255,255,.16);outline:none;cursor:pointer;flex:0 0 auto}
.volrange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;
  background:var(--tint);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.volrange::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--tint);border:2px solid #fff}


/* index.html L875-900 */
.setrow{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.10)}
.setrow:last-child{border-bottom:0}
.settabs{display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:12px;margin:2px 0 8px}
.settab{flex:1;border:0;background:transparent;color:rgba(235,235,240,.6);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.03em;padding:9px 6px;border-radius:9px;cursor:pointer}
.settab[aria-selected="true"]{background:#fff;color:#111}
.setpanel{display:none}
.setpanel.on{display:block}
.setrow .sk{flex:1;min-width:0}
.setrow .sk b{display:block;font-family:var(--th);font-weight:700;font-size:15px;color:#fff}
.setrow .sk small{display:block;font-family:var(--th);font-size:12px;color:rgba(235,235,240,.55);margin-top:2px}
.segsm{display:flex;background:rgba(255,255,255,.10);border-radius:10px;padding:2px;flex:0 0 auto}
.segsm button{border:0;background:transparent;color:rgba(255,255,255,.75);border-radius:8px;cursor:pointer;
  font-family:var(--th);font-weight:600;font-size:13px;padding:8px 14px}
.segsm button[aria-pressed=true]{background:#fff;color:#111}
.sw{width:50px;height:29px;border-radius:99px;background:rgba(255,255,255,.18);border:0;cursor:pointer;
  position:relative;flex:0 0 auto;transition:.2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;transition:.2s}
.sw[aria-pressed=true]{background:var(--tint)}
.sw[aria-pressed=true]::after{transform:translateX(21px)}
.dangerbtn{border:1px solid rgba(255,120,100,.4);background:transparent;color:#ff8f7a;border-radius:10px;
  font-family:var(--th);font-weight:600;font-size:13px;padding:9px 16px;cursor:pointer;flex:0 0 auto}
.legalrow{display:flex;gap:18px;flex-wrap:wrap;padding:16px 0;margin:4px 0 0;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.legalrow a{color:rgba(235,235,240,.6);font-family:var(--th);font-size:13px;text-decoration:none;font-weight:600}
.legalrow a:hover{color:#fff}
.setver{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(235,235,240,.35);margin-top:14px;text-align:center}
.aboutacts .setrow{border-bottom:0;padding:12px 0}
.aboutacts .setrow+.setrow{padding-top:10px}
.setpanel[data-panel="about"] .aboutacts{padding-bottom:4px}


/* index.html L1091-1095 */
.savebtn{width:100%;margin-top:16px;border:0;border-radius:13px;background:var(--tint);color:#fff;
  font-family:var(--th);font-weight:700;font-size:15px;padding:14px;cursor:pointer;transition:.15s}
.savebtn:hover{filter:brightness(1.08)}
.savebtn.done{background:#1f9d55}
.rulesheet table{width:100%;border-collapse:collapse;margin-top:8px}

/* index.html L1465-1488 */
body:not(.theme-dark) .modal .sheet{background:#FAFAFA;color:#111}
body:not(.theme-dark) .modal .sheet h3{color:#111}
body:not(.theme-dark) .modal .sheet p{color:#44433d}
body:not(.theme-dark) .modal .sheet .closex{background:transparent;color:#111}
body:not(.theme-dark) .modal .sheet .setrow{border-bottom:1px solid #e6e4de}
body:not(.theme-dark) .modal .sheet .setrow .sk b{color:#111}
body:not(.theme-dark) .modal .sheet .setrow .sk small{color:#8a8a82}
body:not(.theme-dark) .modal .sheet .settabs{background:#f0efe9;border-color:#e6e4de}
body:not(.theme-dark) .modal .sheet .settab{color:#8a8a82}
body:not(.theme-dark) .modal .sheet .settab[aria-selected="true"]{background:#111;color:#fff}
body:not(.theme-dark) .modal .sheet .segsm{background:rgba(120,120,128,.14)}
body:not(.theme-dark) .modal .sheet .segsm button{color:#54534c}
body:not(.theme-dark) .modal .sheet .segsm button[aria-pressed=true]{background:#fff;color:#111;box-shadow:0 1px 3px rgba(0,0,0,.12)}
body:not(.theme-dark) .modal .sheet .sw{background:rgba(120,120,128,.28)}
body:not(.theme-dark) .modal .sheet .sw::after{box-shadow:0 1px 3px rgba(0,0,0,.25)}
body:not(.theme-dark) .modal .sheet .sw[aria-pressed=true]{background:var(--tint,#C5391F)}
body:not(.theme-dark) .modal .sheet .volrange{background:rgba(120,120,128,.22)}
body:not(.theme-dark) .modal .sheet .dangerbtn{border:1px solid rgba(197,57,31,.4);color:var(--tint,#C5391F)}
body:not(.theme-dark) .modal .sheet #setPatch{border-color:#d8d6cd !important;color:#54534c !important}
body:not(.theme-dark) .modal .sheet .legalrow{border-top:1px solid #e6e4de;border-bottom:1px solid #e6e4de}
body:not(.theme-dark) .modal .sheet .legalrow a{color:#6a6a62}
body:not(.theme-dark) .modal .sheet .legalrow a:hover{color:#111}
body:not(.theme-dark) .modal .sheet .setver{color:#a7a59c}


/* index.html L1617-1637 */
.au-sub{font-family:var(--sys);font-size:13px;color:var(--txt2,#8a8a86);margin:2px 0 18px;line-height:1.5}
.aubtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px;border-radius:13px;
  border:1px solid var(--sep,rgba(255,255,255,.14));background:transparent;color:inherit;font-family:var(--sys);
  font-size:15px;font-weight:600;cursor:pointer;margin-bottom:11px;transition:.15s}
.aubtn:hover{border-color:var(--verm,#C5391F)}
.aubtn.google{background:#fff;color:#1f1f1f;border-color:#dadce0;font-weight:600}
.aubtn.google:hover{background:#f7f8f8;border-color:#dadce0}
.aubtn .gic{width:18px;height:18px;flex:0 0 auto}
.au-or{text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt2,#8a8a86);margin:6px 0 12px;position:relative}
.au-mail{display:flex;gap:8px;margin-bottom:12px}
.au-mail input{flex:1;min-width:0;padding:12px 13px;border-radius:12px;border:1px solid var(--sep,rgba(255,255,255,.14));
  background:rgba(255,255,255,.05);color:inherit;font-family:var(--sys);font-size:15px}
.au-mail input:focus{outline:none;border-color:var(--verm,#C5391F)}
.au-mail button{padding:0 18px;border-radius:12px;border:0;background:var(--verm,#C5391F);color:#fff;
  font-family:var(--sys);font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.au-guest{display:block;width:100%;text-align:center;background:0;border:0;color:var(--txt2,#8a8a86);
  font-family:var(--sys);font-size:13px;padding:10px;cursor:pointer;text-decoration:underline}
.au-legal{text-align:center;margin-top:8px;font-family:var(--mono);font-size:10px}
.au-legal a{color:var(--txt2,#8a8a86);margin:0 7px;text-decoration:none}


/* index.html L1644-1672 */
/* dark toggle contrast fix (off = muted slate, on = brighter vermillion) */
.sw{background:#3a3d46}
body.theme-dark .modal .sheet .sw[aria-pressed=true]{background:#e6492c}
/* account "why sign in" callout */
.au-why{display:flex;gap:10px;margin:2px 0 16px;padding:12px 14px;border-radius:12px;background:rgba(197,57,31,.10);border:1px solid rgba(197,57,31,.22)}
.au-why .ic{font-family:var(--mono);color:var(--verm);font-weight:700}
.au-why span{font-family:var(--th);font-size:12.5px;line-height:1.5;color:rgba(235,235,240,.72)}
body:not(.theme-dark) .modal .sheet .au-why{background:rgba(197,57,31,.06);border-color:rgba(197,57,31,.14)}
body:not(.theme-dark) .modal .sheet .au-why span{color:#54534c}
/* member profile header */
.profhead{display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;background:linear-gradient(120deg,rgba(197,57,31,.16),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.profhead .pfav{width:56px;height:56px;border-radius:50%;flex:0 0 auto;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.2);background:var(--track,#333)}
.profhead .pfav svg,.profhead .pfav img{display:block;width:100%;height:100%;object-fit:cover}
.profhead .pfi{min-width:0;flex:1}
.profhead .pfi b{display:block;font-family:var(--th);font-weight:800;font-size:18px;color:#fff;line-height:1.2}
.profhead .pfi .hdl{font-family:var(--mono);font-size:12px;color:#ff8f7a;font-weight:600;margin-top:2px}
.profhead .pfi .mid{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:rgba(235,235,240,.4);margin-top:3px}
.provtag{font-family:var(--mono);font-size:9px;letter-spacing:.08em;padding:3px 7px;border-radius:99px;background:rgba(255,255,255,.10);color:rgba(235,235,240,.6);align-self:flex-start}
body:not(.theme-dark) .modal .sheet .profhead{background:linear-gradient(120deg,rgba(197,57,31,.08),rgba(17,17,17,.03));border-color:#e6e4de}
body:not(.theme-dark) .modal .sheet .profhead .pfi b{color:#111}
body:not(.theme-dark) .modal .sheet .profhead .pfi .hdl{color:var(--verm)}
body:not(.theme-dark) .modal .sheet .profhead .pfi .mid{color:#a7a59c}
body:not(.theme-dark) .modal .sheet .provtag{background:rgba(120,120,128,.16);color:#6a6a62}
.linkrow{display:flex;gap:10px;margin:10px 0 2px}
.linkrow a{flex:1;text-align:center;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);font-family:var(--th);font-weight:700;font-size:13px;color:#f0f0f2;text-decoration:none;cursor:pointer}
.linkrow a small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;color:rgba(235,235,240,.4);margin-top:3px;font-weight:400}
body:not(.theme-dark) .modal .sheet .linkrow a{background:#fff;border-color:#e6e4de;color:#111}
body:not(.theme-dark) .modal .sheet .linkrow a small{color:#a7a59c}
/* create profile */