@font-face{font-family:Noto;src:url('/okmai/assets/NotoSansThai.ttf') format('truetype');font-display:swap}*{box-sizing:border-box}html{color-scheme:dark;background:#091e28}body{margin:0;color:#e7f5f2;font:15px/1.6 Noto,system-ui,sans-serif;background:radial-gradient(ellipse at 85% 0,rgba(63,209,176,.07),transparent 48%),#091e28}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:#61dbba;text-decoration:none}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #b7f1df;outline-offset:3px}button{color:inherit}h1,h2,h3,p{margin:0}h1{font-size:26px;line-height:1.35;letter-spacing:-.5px}h2{font-size:19px;line-height:1.45}h3{font-size:16px}.member-shell{max-width:850px;margin:auto;padding:18px 20px 112px}.member-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.wordmark{display:flex;gap:12px;align-items:center;color:#ecf8f6;font-family:system-ui,sans-serif;font-size:19px;font-weight:800;letter-spacing:2px}.wordmark img{border-radius:13px}.wordmark small{display:block;font-family:Noto,sans-serif;font-size:10px;color:#92b1ba;letter-spacing:0;font-weight:400}.icon-btn{border:1px solid #29454e;border-radius:13px;background:#102b35;width:44px;height:44px;font-size:24px;display:grid;place-items:center;flex-shrink:0}.eyebrow{color:#65d9b9;font:600 10px/1.6 system-ui,sans-serif;letter-spacing:2px;margin-bottom:7px}.muted{color:#9cb8c0;font-size:13px}.card{background:linear-gradient(145deg,#15343e,#102c35);border:1px solid #27474f;border-radius:22px;padding:22px;margin:18px 0;overflow:hidden}.card p+p{margin-top:12px}.card .primary{margin-top:18px}.primary,.secondary,.danger,.google-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:13px;padding:10px 18px;border:0;font-weight:650;text-align:center;font-size:14px}.primary{background:#62dbb9;color:#082c2b}.secondary{background:#1b3943;color:#d8efea;border:1px solid #36545c}.danger{background:#412c33;color:#ffb4b6;border:1px solid #69444b}.google-btn{background:#f6faf9;color:#18373a;border:1px solid #c7d9d4;width:100%;margin-top:14px}.google-g{font:bold 22px/1 system-ui;color:#4285f4}.full{width:100%}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.hero{position:relative;display:flex;gap:18px;align-items:center;padding:26px 22px;background:linear-gradient(115deg,#144d48,#12343d);border-color:#326258}.avatar{width:74px;height:74px;object-fit:cover;border-radius:24px;background:#264f53;display:grid;place-items:center;color:#82e7c8;font-size:24px;font-weight:700;flex-shrink:0}.hero .avatar{border:2px solid #6adaaf}.hero p{margin-top:6px}.hero .badge{display:inline-block;margin-top:9px}.badge{color:#a5e9d4;background:#1e4843;border:1px solid #326159;border-radius:7px;padding:2px 8px;font-size:10px}.badge.neutral{background:#25373d;border-color:#3d5258;color:#bdd1d4}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.stat{background:#102b35;border:1px solid #25454e;border-radius:17px;padding:15px 8px;text-align:center}.stat strong{display:block;font:600 27px/1.3 system-ui;color:#dcf8ec}.stat span{font-size:11px;color:#9cb9c0}.section-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 14px}.section-title .primary{min-height:43px;padding:8px 14px}.menu-list{border:1px solid #29464e;border-radius:20px;overflow:hidden;margin:16px 0}.menu-row{width:100%;display:flex;align-items:center;gap:14px;padding:17px 18px;background:#102b35;border:0;border-bottom:1px solid #23414a;text-align:left;color:#deeeeb}.menu-row:last-child{border-bottom:0}.menu-row>span:first-child{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:#1c413f;color:#7fe3c1;font-size:20px}.menu-row>div{flex:1}.menu-row strong{font-size:14px}.menu-row small{display:block;font-size:11px;color:#93b3bc}.menu-row b{color:#6c999d;font-size:20px;font-weight:400}.entry-grid{display:grid;grid-template-columns:1fr;gap:14px}.entry{margin:0}.entry-photo{width:calc(100% + 44px);height:190px;object-fit:cover;margin:-22px -22px 18px;display:block}.entry h3{font-size:18px;margin:9px 0 5px}.entry p{overflow-wrap:anywhere}.entry .actions{margin-top:14px}.entry .actions button,.entry .actions a{min-height:40px;font-size:12px;padding:8px 12px}.empty{text-align:center;padding:40px 22px;border:1px dashed #36535c;border-radius:22px;margin:20px 0}.empty .empty-symbol{display:block;font-size:44px;color:#74bea9;margin-bottom:12px}.empty h2{margin-bottom:7px}.empty p{font-size:13px;color:#97b6bf}.empty .primary{margin-top:20px}.notice{padding:13px 15px;background:#243c3f;border:1px solid #456267;border-radius:13px;font-size:12px;color:#d2e7e0;margin:14px 0}.notice.warn{background:#403921;border-color:#686043;color:#eadbaa}.form-stack{display:grid;gap:15px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}label{display:grid;gap:6px;color:#bad1d4;font-size:12px}input,textarea,select{display:block;width:100%;min-height:48px;background:#091f29;border:1px solid #35515b;border-radius:11px;color:#eaf6f3;padding:11px 13px;font-size:15px}input::placeholder,textarea::placeholder{color:#6f949d}textarea{resize:vertical;min-height:92px}input[type=file]{font-size:12px;padding:10px}input[type=checkbox]{width:20px;min-height:20px}.check-label{display:flex;align-items:center;gap:10px}.form-error{color:#ffc1bc;font-size:13px;white-space:pre-wrap}.form-note{font-size:11px;color:#94b4be}.auth-head{text-align:center;padding:18px 0 10px}.auth-head img{width:86px;height:86px;border-radius:24px;margin-bottom:18px}.auth-head h1{font-size:27px}.auth-head p{margin-top:7px}.auth-card{max-width:460px;margin:20px auto}.auth-links{display:flex;justify-content:space-between;gap:14px;margin-top:19px;font-size:12px}.divider{display:flex;align-items:center;gap:12px;color:#74979e;font-size:11px;margin:18px 0 0}.divider:before,.divider:after{content:'';height:1px;background:#2b4b53;flex:1}.editor{width:min(640px,100%);max-height:92dvh;margin:auto auto 0;padding:22px 22px max(28px,env(safe-area-inset-bottom));border:1px solid #35515b;border-bottom:0;border-radius:25px 25px 0 0;background:#102b35;color:#e7f5f2;overflow:auto}.editor::backdrop{background:#04141cc9;backdrop-filter:blur(3px)}.editor-header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:20px}.editor-header h2{font-size:21px}.editor-header .icon-btn{font-size:26px}.photo-preview{width:100px;height:100px;object-fit:cover;border-radius:17px}.member-nav{position:fixed;bottom:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);gap:3px;max-width:850px;margin:auto;background:#0b232deb;border-top:1px solid #25464e;padding:9px 9px max(10px,env(safe-area-inset-bottom));backdrop-filter:blur(16px)}.member-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0;border-radius:12px;color:#87aab5;font-size:10px;white-space:nowrap}.member-nav a span{font:27px/1.2 system-ui}.member-nav a[aria-current]{background:#143d3b;color:#77e4be}.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);z-index:200;background:#ddf9ef;color:#113f35;border-radius:13px;box-shadow:0 8px 30px #0006;padding:12px 19px;font-size:13px;max-width:90vw;width:max-content}.loading{text-align:center;padding:90px 20px;color:#a4c2c9}.spinner{display:inline-block;width:26px;height:26px;border:3px solid #254f51;border-top-color:#67ddba;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}.sync-note{color:#6e979f;font-size:10px;text-align:center;margin:22px 0}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:12px}th,td{padding:11px 8px;text-align:left;border-bottom:1px solid #2b4850}th{color:#8fb4bb;font-weight:500}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.media-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px}.media-grid button{width:100%;min-height:36px;font-size:11px}.inline-link{border:0;background:none;color:#71dbbc;padding:8px;font-size:12px}.checkin-placeholder{display:none}[hidden]{display:none!important}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:680px){.member-shell{padding-top:26px}.entry-grid{grid-template-columns:1fr 1fr}.hero{padding:32px}.hero .avatar{width:90px;height:90px}.hero h1{font-size:30px}.editor{margin:auto;border-radius:24px;border:1px solid #35515b}.member-nav{border-radius:20px 20px 0 0}.stats .stat{padding:22px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
svg{width:23px;height:23px;vertical-align:middle}.empty-symbol svg{width:44px;height:44px}.member-nav a span{height:30px}.menu-row>span svg{width:22px;height:22px}

.hero>div{min-width:0}.hero h1{overflow-wrap:anywhere}.menu-row>div{min-width:0}.menu-row small{overflow-wrap:anywhere}

.profile-details{padding:0 4px;margin:0 0 18px;color:#a4c5c8;font-size:12px;overflow-wrap:anywhere}.profile-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.profile-tags span{border:1px solid #2c5158;border-radius:8px;padding:3px 8px;font-size:10px}

.wordmark img,.auth-head img{background:#c8f2e2;padding:4px}

/* UI 1.4.2: profile photo selection and local crop sheet. */
.profile-photo-field{display:grid;gap:10px}
.profile-photo-selection{display:flex;align-items:center;gap:14px}
.profile-photo-selection .photo-preview{flex-shrink:0;border:2px solid #61daba}
.profile-photo-selection .actions{margin:0;gap:7px}
.profile-photo-selection .secondary{min-height:44px;font-size:12px;padding:8px 12px}
.profile-photo-selection .inline-link{min-height:44px;text-align:left}
.crop-dialog{width:min(480px,100%);padding:20px 20px max(22px,env(safe-area-inset-bottom));overscroll-behavior:contain}
.crop-dialog .editor-header{margin-bottom:8px}
.crop-dialog .editor-header .eyebrow{margin-bottom:3px}
.crop-dialog .muted{font-size:12px}
.crop-frame{position:relative;width:min(100%,320px);aspect-ratio:1;margin:18px auto 14px;background:#061a23;border:2px solid #69dfc0;border-radius:18px;overflow:hidden}
#crop-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#crop-canvas:active{cursor:grabbing}
.crop-frame:focus-within{outline:3px solid #b7f1df;outline-offset:3px}
.crop-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,transparent 33.1%,#fff5 33.1%,#fff5 33.5%,transparent 33.5%,transparent 66.4%,#fff5 66.4%,#fff5 66.8%,transparent 66.8%),linear-gradient(to bottom,transparent 33.1%,#fff5 33.1%,#fff5 33.5%,transparent 33.5%,transparent 66.4%,#fff5 66.4%,#fff5 66.8%,transparent 66.8%)}
#crop-loading{position:absolute;inset:0;display:grid;place-items:center;font-size:13px;background:#0b2530}
.crop-zoom-heading{display:flex;justify-content:space-between;align-items:center;color:#a9c8cd;font-size:12px}
#crop-zoom-value{font:600 12px system-ui;color:#7de4c4}
.crop-zoom-row{display:flex;gap:12px;align-items:center;margin:2px 0 14px}
#crop-zoom{min-width:0;flex:1;padding:0;border:0;background:transparent;accent-color:#62dbb9;min-height:44px}
.crop-preview-row{display:flex;align-items:center;gap:12px;margin:14px 0}
.crop-preview-row .avatar{width:58px;height:58px;border-radius:18px;border:1px solid #4ba78e}
.crop-preview-row strong{font-size:12px}
.crop-tools,.crop-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.crop-tools .secondary{min-height:44px;font-size:12px}
#crop-status:not(:empty){margin-top:12px}
.crop-actions{margin-top:18px}
@media(max-height:720px){.crop-frame{width:min(100%,240px);margin:12px auto}.crop-preview-row{margin:10px 0}.crop-dialog{padding-top:15px}}