@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f4f4f5;font-synthesis:none;text-rendering:geometricprecision;-webkit-font-smoothing:antialiased;background:#050507;font-family:Noto Sans Thai,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.44}.page{background:linear-gradient(#ffffff08,#0000 260px),radial-gradient(circle at 38% 0,#f43f5e1f,#0000 34rem),#050507;min-height:100vh;position:relative}.aurora{filter:blur(110px);opacity:.16;pointer-events:none;border-radius:0;width:34rem;height:34rem;position:fixed}.aurora.one{background:#ef4444;top:-14rem;left:8%}.aurora.two{background:#991b1b;bottom:-16rem;right:-14rem}.shell{z-index:1;width:min(1120px,100vw - 32px);margin:0 auto;padding:44px 0 32px;position:relative}.hero{margin-bottom:28px}.hero-panel{background:linear-gradient(135deg,#18181bf5,#09090bc7);border:1px solid #ffffff21;padding:clamp(22px,4vw,42px);position:relative;overflow:hidden;box-shadow:0 28px 90px #00000047,inset 0 1px #ffffff0f}.hero-panel:before{content:"";pointer-events:none;background:radial-gradient(circle at 16% 18%,#f43f5e3d,#0000 18rem),linear-gradient(90deg,#f43f5e2e,#0000 34%);border-left:2px solid #f43f5e;position:absolute;inset:0}.hero-copy{z-index:1;flex-direction:column;justify-content:center;align-items:flex-start;display:flex;position:relative}.brand-mark{color:#f4f4f5;letter-spacing:.12em;text-transform:uppercase;background:#00000047;border:1px solid #ffffff21;align-items:center;gap:10px;margin-bottom:16px;padding:6px 10px 6px 6px;font-size:13px;font-weight:900;line-height:1;display:inline-flex}.brand-mark img{object-fit:cover;background:#050507;border:1px solid #fb71855c;width:42px;height:42px}.report-brand{margin-bottom:14px}.eyebrow{color:#fb7185;letter-spacing:.06em;text-transform:uppercase;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:800;display:inline-flex}h1{letter-spacing:-.065em;max-width:830px;margin:0;font-size:clamp(38px,6vw,78px);line-height:.9}.lead{color:#c7c7d1;max-width:760px;margin:18px 0 0;line-height:1.8}.hero-actions{flex-wrap:wrap;gap:10px;margin-top:24px;display:flex}.primary-link{color:#fff;background:#e11d48;border:1px solid #fb7185;justify-content:center;align-items:center;min-height:42px;padding:0 16px;font-weight:900;text-decoration:none;display:inline-flex;box-shadow:0 16px 38px #e11d4833}.primary-link:hover{background:#f43f5e}.report-link{min-height:42px}kbd{color:#fff;background:#18181b;border:1px solid #ffffff24;border-radius:0;padding:1px 7px}.grid{grid-template-columns:1.05fr .95fr;gap:16px;display:grid}.card{background:#0c0c0fdb;border:1px solid #ffffff1f;border-radius:0;padding:20px;box-shadow:0 24px 70px #00000038,inset 0 1px #ffffff0f}.input-card,.output-card{grid-column:span 1}.control-card{flex-direction:column;gap:16px;display:flex}.output-card{grid-column:1/-1}.section-head{justify-content:space-between;align-items:start;gap:16px;margin-bottom:16px;display:flex}.step{color:#fb7185;text-transform:uppercase;letter-spacing:.1em;margin:0 0 4px;font-size:12px;font-weight:800}h2{letter-spacing:-.03em;margin:0;font-size:22px}.ghost{color:#e4e4e7;background:#18181b;border:1px solid #ffffff24;border-radius:0;justify-content:center;align-items:center;gap:8px;min-height:38px;padding:0 12px;text-decoration:none;display:inline-flex}.ghost:hover{background:#27272a;border-color:#ffffff38}.drop-zone{text-align:center;color:#a1a1aa;background:#0000003d;border:1px dashed #ffffff42;border-radius:0;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:292px;padding:24px;transition:all .18s;display:flex}.drop-zone:hover,.drop-zone.has-data{background:#f43f5e0d;border-color:#f43f5e}.drop-zone strong{color:#fff;font-size:18px}.drop-zone span{word-break:break-all;max-width:460px;font-size:13px}.drop-zone img{background:#fff;border-radius:0;max-width:210px;max-height:210px;padding:8px}.hero-select{z-index:10;position:relative}.select-trigger{color:#fff;text-align:left;background:#09090b;border:1px solid #ffffff29;border-radius:0;align-items:center;gap:14px;width:100%;min-height:86px;padding:10px;display:flex}.select-trigger:hover{border-color:#f43f5e8c}.select-text{flex:1;display:grid}.select-text small,.select-option small{color:#a1a1aa;font-size:12px}.chevron{color:#a1a1aa;transition:transform .16s}.chevron.open{transform:rotate(180deg)}.hero-badge{letter-spacing:-.03em;border:1px solid #ffffff29;border-radius:0;flex:none;place-items:center;width:54px;height:68px;font-size:12px;font-weight:900;display:grid;overflow:hidden}.hero-badge.female{color:#ffe4e6;background:#be123c}.hero-badge.male{color:#dbeafe;background:#1d4ed8}.hero-badge.with-image{background:#111113}.hero-badge img{object-fit:contain;object-position:bottom center;width:100%;height:100%;display:block}.select-popover{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#09090b;border:1px solid #ffffff29;border-radius:0;padding:10px;position:absolute;top:calc(100% + 8px);left:0;right:0;box-shadow:0 24px 90px #0000008c}.select-search{color:#fff;background:#18181b;border:1px solid #ffffff29;border-radius:0;outline:none;width:100%;margin-bottom:8px;padding:11px 12px}.select-search:focus{border-color:#f43f5e}.select-list{gap:6px;max-height:420px;padding-right:4px;display:grid;overflow:auto}.select-option{text-align:left;color:#f4f4f5;background:0 0;border:1px solid #0000;border-radius:0;align-items:center;gap:12px;width:100%;min-height:76px;padding:6px;display:flex}.select-option>span:not(.hero-badge){flex:1;display:grid}.select-option:hover,.select-option.active{background:#18181b;border-color:#ffffff24}.toggle-row{color:#f4f4f5;cursor:pointer;background:#09090bb8;border:1px solid #ffffff24;align-items:center;gap:12px;padding:12px;display:flex}.toggle-row input{opacity:0;pointer-events:none;position:absolute}.toggle-box{background:#09090b;border:1px solid #ffffff47;flex:none;place-items:center;width:22px;height:22px;display:grid}.toggle-box:after{content:"";background:#f43f5e;width:10px;height:10px;transition:transform .14s;transform:scale(0)}.toggle-row:has(input:checked) .toggle-box{background:#f43f5e1f;border-color:#f43f5e}.toggle-row:has(input:checked) .toggle-box:after{transform:scale(1)}.toggle-row:hover{border-color:#f43f5e8c}.toggle-copy{gap:2px;display:grid}.toggle-copy small{color:#a1a1aa;font-size:12px;line-height:1.45}.convert{color:#fff;background:#e11d48;border:1px solid #f43f5e;border-radius:0;justify-content:center;align-items:center;gap:10px;min-height:52px;font-weight:900;display:inline-flex;box-shadow:0 16px 40px #e11d482e}.convert:not(:disabled):hover{background:#f43f5e}.spin{animation:.85s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hint{color:#a1a1aa;margin:0;font-size:13px;line-height:1.7}.actions{flex-wrap:wrap;gap:8px;display:flex}.qr-output{background:#00000042;border:1px solid #ffffff1a;border-radius:0;place-items:center;min-height:280px;display:grid}.qr-output img{background:#fff;border-radius:0;width:min(360px,90%);padding:10px}.empty{color:#71717a;align-items:center;gap:10px;display:inline-flex}textarea{resize:vertical;color:#d4d4d8;background:#0000004d;border:1px solid #ffffff1f;border-radius:0;outline:none;width:100%;min-height:112px;margin-top:14px;padding:12px;font-size:12px;line-height:1.6}.status{color:#d4d4d8;background:#0c0c0fdb;border:1px solid #ffffff1f;border-radius:0;margin-top:18px;padding:13px 16px}.status.error{color:#fecdd3;background:#f43f5e1a;border-color:#f43f5e73}@media (width<=980px){.shell{width:min(100% - 24px,760px);padding:26px 0}.hero{padding-left:14px}.grid{grid-template-columns:1fr}}.report-hero{background:linear-gradient(135deg,#18181bf0,#09090bc7);border:1px solid #ffffff21;margin-bottom:24px;padding:clamp(20px,4vw,34px);box-shadow:0 28px 90px #0000003d,inset 0 1px #ffffff0f}.report-hero .ghost{margin-bottom:22px}.report-layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start;gap:16px;display:grid}.report-form{gap:18px;display:grid}.report-field{gap:12px;display:grid}.report-field-head{justify-content:space-between;align-items:center;gap:14px;display:flex}.report-drop{text-align:center;color:#a1a1aa;background:#00000038;border:1px dashed #ffffff38;justify-content:center;align-items:center;gap:14px;min-height:118px;padding:14px;display:flex}.report-drop.has-data{background:#f43f5e0f;border-color:#f43f5ea6}.report-drop img{object-fit:contain;background:#fff;width:88px;height:88px;padding:6px}.report-textarea{min-height:96px;margin-top:0}.report-textarea.note{min-height:86px}.report-submit{width:100%}.report-summary{gap:14px;display:grid;position:sticky;top:18px}.report-summary ul{gap:8px;margin:0;padding:0;list-style:none;display:grid}.report-summary li{color:#a1a1aa;background:#00000038;border:1px solid #ffffff1a;padding:10px 12px}.report-summary li.ok{color:#bbf7d0;background:#22c55e14;border-color:#22c55e59}.report-success{color:#bbf7d0;align-items:center;gap:8px;margin:0;font-weight:800;display:inline-flex}@media (width<=980px){.report-layout{grid-template-columns:1fr}.report-summary{position:static}}@media (width<=640px){.hero-actions,.report-field-head{flex-direction:column;align-items:stretch}.primary-link,.report-link,.report-field-head .ghost{width:100%}}