@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-outline-style:solid;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}.pointer-events-none{pointer-events:none}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.z-20{z-index:20}.z-50{z-index:50}.line-clamp-4{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.flex{display:flex}.hidden{display:none}.inline-flex{display:inline-flex}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-full{width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-\[\#9EDAFF\]{border-color:#9edaff}.border-t-transparent{border-top-color:#0000}.text-center{text-align:center}.text-left{text-align:left}.italic{font-style:italic}.underline{text-decoration-line:underline}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.select-none{-webkit-user-select:none;user-select:none}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.disabled\:opacity-40:disabled{opacity:.4}@media (prefers-color-scheme:dark){.dark\:bg-\[\#1E1E1E\]{background-color:#1e1e1e}.dark\:bg-\[\#2D2D2D\]{background-color:#2d2d2d}}:root{--color-boy:#9edaff;--color-boy-dark:#5bb8f5;--color-boy-light:#e8f6ff;--color-boy-text:#1a6fa8;--color-girl:#ffb2cb;--color-girl-dark:#ff7da0;--color-girl-light:#fff0f5;--color-girl-text:#b0325a;--color-primary:#9edaff;--color-bg:#fff;--color-surface:#f7fafe;--color-surface-2:#eef6fd;--color-border:#e2eef8;--color-text:#1a2a3a;--color-text-muted:#7a94aa;--color-text-hint:#b0c4d4;--radius-sm:10px;--radius-md:16px;--radius-lg:20px;--radius-full:999px;--shadow-card:0 2px 12px 0 #9edaff2e, 0 1px 4px 0 #0000000f;--shadow-fab:0 4px 24px 0 #9edaff73}*{box-sizing:border-box;margin:0;padding:0}html,body{background-color:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;font-family:Sarabun,Noto Sans Thai,Noto Sans Arabic,sans-serif;font-size:16px;line-height:1.6}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}.card{background:var(--color-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}.card-surface{background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border)}.chip{border-radius:var(--radius-full);align-items:center;padding:4px 12px;font-size:13px;font-weight:600;display:inline-flex}.chip-boy{background:var(--color-boy-light);color:var(--color-boy-text)}.chip-girl{background:var(--color-girl-light);color:var(--color-girl-text)}.letter-btn{border-radius:var(--radius-sm);background:var(--color-surface);width:36px;height:36px;color:var(--color-text-muted);cursor:pointer;border:none;flex-shrink:0;font-size:14px;font-weight:600;transition:all .15s}.letter-btn:hover{background:var(--color-boy-light);color:var(--color-boy-text)}.letter-btn.active-boy{background:var(--color-boy);color:var(--color-boy-text);transform:scale(1.1);box-shadow:0 2px 8px #9edaff80}.letter-btn.active-girl{background:var(--color-girl);color:var(--color-girl-text);transform:scale(1.1);box-shadow:0 2px 8px #ffb2cb80}.list-tile{cursor:pointer;border-bottom:1px solid var(--color-border);align-items:center;gap:14px;padding:12px 16px;transition:background .12s;display:flex}.list-tile:last-child{border-bottom:none}.list-tile:hover{background:var(--color-surface)}.list-tile:active{background:var(--color-surface-2)}.avatar{border-radius:var(--radius-full);flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:16px;font-weight:700;display:flex}.avatar-boy{background:var(--color-boy-light);color:var(--color-boy-text)}.avatar-girl{background:var(--color-girl-light);color:var(--color-girl-text)}.fab{z-index:20;border-radius:var(--radius-full);background:var(--color-boy);width:56px;height:56px;color:var(--color-boy-text);cursor:pointer;box-shadow:var(--shadow-fab);border:none;justify-content:center;align-items:center;transition:transform .15s,box-shadow .15s;display:flex;position:fixed;bottom:24px;right:24px}.fab:hover{transform:scale(1.06)}.fab:active{transform:scale(.93)}.tab-btn{border-radius:var(--radius-md);cursor:pointer;color:var(--color-text-hint);background:0 0;border:2px solid #0000;flex-direction:column;align-items:center;gap:4px;padding:8px 12px;font-size:12px;font-weight:600;transition:all .15s;display:flex}.tab-btn.active-boy{border-color:var(--color-boy-dark);color:var(--color-boy-text)}.tab-btn.active-girl{border-color:var(--color-girl-dark);color:var(--color-girl-text)}.tab-btn.active-hot{color:#c2410c;border-color:#f97316}.tab-btn.active-fav{color:#be123c;border-color:#f43f5e}.input{border-radius:var(--radius-full);border:1.5px solid var(--color-border);background:var(--color-surface);width:100%;color:var(--color-text);outline:none;padding:10px 16px;font-size:15px;transition:border-color .15s}.input:focus{border-color:var(--color-boy)}[dir=rtl],.arabic{direction:rtl;font-family:Noto Sans Arabic,Amiri,sans-serif}.divider{background:var(--color-border);height:1px;margin:0}.bottom-sheet{background:var(--color-bg);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:16px}.bottom-sheet-handle{background:var(--color-border);border-radius:var(--radius-full);width:40px;height:4px;margin:0 auto 16px}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}