:root{
  --white:#fff;--black:#0A0A0A;--orange-500:#FF6B1A;--orange-600:#E85A0C;--orange-100:#FFF1E8;
  --gray-50:#FAFAFA;--gray-100:#F4F4F5;--gray-200:#E7E7EA;--gray-500:#71717A;--gray-700:#3F3F46;
  --success:#16A34A;--error:#DC2626;
  --radius-sm:12px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-full:999px;
  --shadow-sm:0 1px 2px rgba(10,10,10,.04),0 4px 12px rgba(10,10,10,.04);
  --shadow-md:0 8px 24px rgba(10,10,10,.08);
  --shadow-orange:0 8px 24px rgba(255,107,26,.32);
  --font:'Poppins','Noto Sans Thai',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:20px;
}
@media (min-width:768px){:root{--gutter:32px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--white);color:var(--black);
  font:400 16px/1.7 var(--font);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid rgba(255,107,26,.4);outline-offset:2px}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1120px;margin:0 auto;padding:20px var(--gutter)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--black);min-height:44px}
.wordmark{font-weight:600;font-size:22px;letter-spacing:-.04em}
.wordmark i{font-style:normal;color:var(--orange-500)}
.lang{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 18px;border-radius:var(--radius-full);
  background:var(--gray-100);font-size:14px;font-weight:500;color:var(--gray-500);transition:background .2s var(--ease)}
.lang:hover{background:var(--gray-200)}
.lang .on{color:var(--black)}

/* Layout */
.main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:clamp(24px,6vw,72px) var(--gutter) 64px}
.hero{max-width:720px;margin:0 auto 48px;text-align:center;animation:rise .5s var(--ease) both}
.badge{display:inline-block;margin:0 0 20px;padding:6px 14px;border-radius:var(--radius-full);background:var(--orange-100);
  color:var(--orange-600);font-size:12px;font-weight:500;line-height:1.4}
h1{margin:0;font-size:clamp(40px,7vw,56px);font-weight:600;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
:lang(th) h1{line-height:1.3}
.sub{margin:20px 0 0;color:var(--gray-500);font-size:clamp(16px,2.4vw,18px)}
.main:not([data-state=empty]) .hero{margin-bottom:32px}
.main:not([data-state=empty]) h1{font-size:clamp(28px,5vw,40px)}
.main:not([data-state=empty]) .badge,.main:not([data-state=empty]) .sub{display:none}
.panel{max-width:720px;margin:0 auto;animation:rise .35s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* Dropzone */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:16px;padding:clamp(48px,9vw,88px) 24px;text-align:center;
  border-radius:var(--radius-xl);background:var(--gray-50);border:1.5px dashed var(--gray-200);cursor:pointer;
  transition:transform .25s var(--ease),background .2s,border-color .2s}
.dropzone:hover{border-color:#d4d4d8}
.dropzone.over{border:1.5px solid var(--orange-500);background:var(--orange-100);transform:scale(1.01)}
.dz-icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--orange-100);color:var(--orange-500)}
.dz-icon svg{width:28px;height:28px}
.dz-text{font-size:18px;font-weight:500}
.dz-text u{color:var(--orange-600);text-decoration:none;font-weight:600}
.dropzone:hover .dz-text u{text-decoration:underline}
.dz-hint{font-size:14px;color:var(--gray-500);line-height:1.5;max-width:42ch}

/* Preview */
.preview{margin:0;border-radius:var(--radius-xl);overflow:hidden;background:var(--gray-100);box-shadow:var(--shadow-md);position:relative}
.preview img{width:100%;max-height:min(60vh,520px);object-fit:contain;margin:0 auto}
.preview figcaption{position:absolute;left:16px;bottom:16px;padding:6px 14px;border-radius:var(--radius-full);
  background:rgba(10,10,10,.6);color:#fff;font-size:12px;font-weight:500;line-height:1.4;backdrop-filter:blur(8px)}
.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:24px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--radius-full);
  font-weight:600;font-size:16px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;position:relative}
.btn svg{width:20px;height:20px}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn.primary{background:var(--orange-500);color:var(--black);box-shadow:var(--shadow-orange)}
.btn.primary:hover:not(:disabled){background:var(--orange-600);box-shadow:0 10px 28px rgba(255,107,26,.4)}
.btn.secondary{background:var(--black);color:#fff}
.btn.secondary:hover{background:#27272a}
.btn.ghost{box-shadow:inset 0 0 0 1px var(--gray-200)}
.btn.ghost:hover:not(:disabled){background:var(--gray-100)}
.btn:disabled{background:var(--gray-100);color:var(--gray-500);box-shadow:none;cursor:not-allowed}
.spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(10,10,10,.2);border-top-color:var(--black);animation:spin .7s linear infinite}
.btn.loading .spin{display:block}
@keyframes spin{to{rotate:360deg}}

/* Segmented */
.seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--radius-full);background:var(--gray-100)}
.seg button{position:relative;z-index:1;min-width:64px;min-height:44px;padding:0 20px;border-radius:var(--radius-full);font-weight:600;color:var(--gray-500);transition:color .2s}
.seg button[aria-checked=true]{color:#fff}
.seg .thumb{position:absolute;inset:4px auto 4px 4px;width:calc(50% - 4px);border-radius:var(--radius-full);background:var(--black);box-shadow:var(--shadow-sm);
  transition:translate .25s var(--ease)}
.seg:has(button:last-of-type[aria-checked=true]) .thumb{translate:100% 0}

/* Progress */
.progress{margin-top:28px}
.bar{height:8px;border-radius:var(--radius-full);background:var(--gray-100);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--orange-500);transition:width .2s var(--ease)}
.progress p{margin:12px 0 0;text-align:center;color:var(--gray-700);font-size:14px}
.warn{margin:20px 0 0;text-align:center;color:var(--gray-700);font-size:14px;padding:12px 16px;border-radius:var(--radius-md);background:var(--orange-100)}

/* Result */
.result{max-width:960px;background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:24px}
.compare{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--gray-100);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.compare img{width:100%;height:auto;max-height:70vh;object-fit:contain;margin:0 auto;pointer-events:none}
.compare #before{position:absolute;inset:0;height:100%;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.chip{position:absolute;top:16px;padding:6px 14px;border-radius:var(--radius-full);background:rgba(10,10,10,.6);color:#fff;
  font-size:12px;font-weight:500;line-height:1.4;backdrop-filter:blur(8px)}
.chip.l{left:16px}.chip.r{right:16px}
.line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;translate:-50% 0;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.35);pointer-events:none}
.knob{position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-md);color:var(--black)}
.knob svg{width:20px;height:20px}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.compare:has(input:focus-visible) .knob{outline:3px solid rgba(255,107,26,.4);outline-offset:2px}
.info{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:24px 0}
.dims{margin:0;font-weight:600;font-size:18px}
.size{margin:0;color:var(--gray-500);font-size:14px}
.fmt{display:inline-flex;padding:4px;border-radius:var(--radius-full);background:var(--gray-100)}
.fmt button{min-height:40px;min-width:56px;padding:0 14px;border-radius:var(--radius-full);font-size:14px;font-weight:500;color:var(--gray-500);transition:background .2s,color .2s}
.fmt button[aria-checked=true]{background:var(--white);color:var(--black);box-shadow:var(--shadow-sm)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.actions .primary{flex:1 1 220px}

/* Footer & toast */
.footer{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px var(--gutter) 32px;color:var(--gray-500);font-size:14px}
.footer svg{width:16px;height:16px}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 24px;max-width:calc(100vw - 40px);padding:12px 22px;border-radius:var(--radius-full);
  background:var(--black);color:#fff;font-size:14px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),translate .25s var(--ease);z-index:10}
.toast.show{opacity:1;translate:-50% 0}

@media (max-width:540px){
  .btn{width:100%}.controls{flex-direction:column;align-items:stretch}.seg{justify-self:center;align-self:center}
  .result{padding:12px;border-radius:var(--radius-lg)}.info{margin:16px 4px}.actions{padding:0 4px 4px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}