*{box-sizing:border-box}
html,body{margin:0}
body{font-family:'Inter','Prompt',system-ui,sans-serif;background:#f8fafc;color:#0f172a;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.wrap{max-width:72rem;margin:0 auto;padding:0 1rem;width:100%}
@media(min-width:640px){.wrap{padding:0 1.5rem}}

/* header */
.top{background:linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#1e3a8a 100%);color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);border-bottom:1px solid rgba(51,65,85,.5);position:sticky;top:0;z-index:30}
.top-in{display:flex;align-items:center;gap:.75rem;padding-top:1rem;padding-bottom:1rem}
.logo{background:rgba(59,130,246,.2);border:1px solid rgba(96,165,250,.3);border-radius:.75rem;width:2.75rem;height:2.75rem;display:grid;place-items:center;color:#60a5fa;font-size:1.25rem;flex:none}
h1{font-size:1.125rem;font-weight:700;margin:0;letter-spacing:-.01em}
.tagline{margin:.1rem 0 0;font-size:.8rem;color:#94a3b8}
@media(min-width:640px){h1{font-size:1.25rem}}

/* layout */
.grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:start;padding-top:1.5rem;padding-bottom:1.5rem;flex:1}
.col-main{display:grid;gap:1.5rem;min-width:0}
.col-side{display:grid;gap:1rem;min-width:0}
@media(min-width:640px){.grid{padding-top:2rem;padding-bottom:2rem}}
@media(min-width:1024px){.grid{grid-template-columns:7fr 5fr}.col-side{position:sticky;top:6rem}}

/* cards */
.card{background:#fff;border:1px solid rgba(226,232,240,.8);border-radius:1rem;padding:1.5rem;box-shadow:0 10px 25px -5px rgba(0,0,0,.05),0 8px 10px -6px rgba(0,0,0,.03)}
.card h2{font-size:1rem;font-weight:600;margin:0 0 1rem;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid #f1f5f9;padding-bottom:.75rem}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem;border-bottom:1px solid #f1f5f9;padding-bottom:.75rem}
.card-head h2{margin:0;border:0;padding:0}
.step{width:1.5rem;height:1.5rem;border-radius:.5rem;font-size:.75rem;font-weight:700;display:grid;place-items:center;flex:none}
.step.blue{background:#dbeafe;color:#2563eb}
.step.green{background:#d1fae5;color:#059669}
.pill{font-size:.75rem;background:#ecfdf5;color:#047857;font-weight:600;padding:.25rem .65rem;border-radius:999px;border:1px solid #a7f3d0;display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}

/* fields */
.fields{display:grid;gap:1rem}
.lab{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:#334155;margin-bottom:.4rem}
.lab-sm{font-size:.8rem;color:#64748b;font-weight:500;margin:0 0 .5rem}
.req{color:#ef4444}
.field{position:relative}
.ico{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.8rem;pointer-events:none}
.ico.ico-lg{font-size:1rem}
.caret{position:absolute;right:.85rem;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.7rem;pointer-events:none}
.inp{width:100%;padding:.65rem .75rem .65rem 2.4rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem;font:inherit;font-size:.9rem;font-weight:500;color:#1e293b;transition:background .15s,box-shadow .15s}
.inp::placeholder{color:#94a3b8}
.inp:focus,.big-inp:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;background:#fff}
.sel{appearance:none;-webkit-appearance:none;padding-right:2rem;font-weight:600;cursor:pointer}

/* presets */
.presets{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.presets button{font:inherit;font-size:.8rem;font-weight:500;padding:.4rem .75rem;border-radius:.5rem;border:1px solid #e2e8f0;background:#f8fafc;color:#334155;cursor:pointer;transition:background .15s}
.presets button:hover{background:#f1f5f9}
.presets button[aria-pressed="true"]{background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.presets button:focus-visible,.copy:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}

/* calculator */
.calc{display:grid;gap:1rem}
.box{padding:1rem;border-radius:.75rem;border:1px solid #e2e8f0;background:#f8fafc;transition:all .15s}
.box.active-b{background:rgba(239,246,255,.6);border-color:#93c5fd;box-shadow:0 0 0 2px #dbeafe}
.box.active-r{background:rgba(236,253,245,.6);border-color:#6ee7b7;box-shadow:0 0 0 2px #d1fae5}
.box .lab{font-weight:700;font-size:.8rem}
.c-blue{color:#2563eb}.c-green{color:#059669}
.baht{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:#64748b;font-weight:700}
.big-inp{width:100%;padding:.75rem 1rem .75rem 2rem;background:#fff;border:1px solid #cbd5e1;border-radius:.75rem;font-family:'Inter','Prompt',sans-serif;font-size:1.125rem;font-weight:700;color:#0f172a;box-shadow:0 1px 2px rgba(0,0,0,.04);font-variant-numeric:tabular-nums}
.big-inp.no-pre{padding-left:1rem;padding-right:6.5rem}
.big-inp::placeholder{font-weight:500;font-size:.9rem;color:#94a3b8}
#result:focus{box-shadow:0 0 0 2px #10b981}
.unit{position:absolute;right:.9rem;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.75rem;font-weight:500;pointer-events:none;max-width:6rem;text-align:right}
.swap{display:flex;justify-content:center;margin:-.5rem 0;position:relative;z-index:1}
.swap i{width:2rem;height:2rem;border-radius:50%;background:#0f172a;color:#fff;display:grid;place-items:center;font-size:.75rem;border:2px solid #fff;box-shadow:0 4px 6px rgba(0,0,0,.1)}

/* summary */
.summary{background:linear-gradient(to bottom,#0f172a,#1e293b);color:#fff;border-radius:1.5rem;padding:1.5rem;border:1px solid #334155;box-shadow:0 20px 25px -5px rgba(0,0,0,.15);position:relative;overflow:hidden}
.glow{position:absolute;width:10rem;height:10rem;border-radius:50%;filter:blur(48px);pointer-events:none}
.g1{top:-3rem;right:-3rem;background:rgba(59,130,246,.12)}
.g2{bottom:-3rem;left:-3rem;background:rgba(16,185,129,.12)}
.sum-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(51,65,85,.8);padding-bottom:1rem;margin-bottom:1.25rem;position:relative}
.sum-head>div:first-child{min-width:0}
.eyebrow{font-size:.7rem;letter-spacing:.08em;font-weight:700;color:#60a5fa;display:block;margin-bottom:.15rem}
.sum-head h3{margin:0;font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sum-ico{width:2.5rem;height:2.5rem;border-radius:1rem;background:#1e293b;border:1px solid #334155;display:grid;place-items:center;font-size:1.25rem;flex:none}
.sum-row{background:rgba(30,41,59,.8);padding:1rem;border-radius:1rem;border:1px solid rgba(51,65,85,.6);margin-bottom:1.5rem;display:flex;justify-content:space-between;gap:1rem;position:relative}
.sum-row>div{min-width:0}
.sum-row .r{text-align:right}
.k{font-size:.72rem;color:#94a3b8;display:block;font-weight:500}
.v{font-size:.9rem;font-weight:700;display:block;margin-top:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-blue-l{color:#60a5fa}.c-green-l{color:#34d399}
.sum-nums{background:rgba(30,41,59,.9);border-radius:1rem;padding:1.25rem;border:1px solid #334155;display:grid;gap:1rem;margin-bottom:1.5rem;position:relative}
.sum-nums .sep{border-top:1px solid rgba(51,65,85,.8);padding-top:.75rem}
.num{font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:900;letter-spacing:-.02em;margin-top:.15rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.num small{font-family:'Prompt','Inter',sans-serif;font-size:.75rem;font-weight:600;color:#cbd5e1;letter-spacing:0}
@media(min-width:640px){.num{font-size:1.875rem}}
.copy{width:100%;padding:.9rem 1rem;background:#2563eb;color:#fff;font:inherit;font-weight:700;font-size:.9rem;border:0;border-radius:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 10px 15px -3px rgba(37,99,235,.3);transition:background .15s;position:relative}
.copy:hover{background:#3b82f6}.copy:active{background:#1d4ed8}
.toast{background:#0f172a;color:#fff;font-size:.8rem;font-weight:600;padding:.75rem 1rem;border-radius:.75rem;border:1px solid #334155;box-shadow:0 20px 25px -5px rgba(0,0,0,.2);display:flex;align-items:center;gap:.5rem}
.toast[hidden]{display:none}
.toast i{color:#34d399;font-size:1rem}

/* brand icon colors */
.i-fb{color:#2563eb}.i-ig{color:#db2777}.i-tt{color:#0f172a}.i-yt{color:#dc2626}.i-web{color:#4f46e5}.i-dark{color:#9333ea}.i-def{color:#2563eb}
.sum-ico .i-tt{color:#fff}

.foot{background:#fff;border-top:1px solid #e2e8f0;margin-top:3rem;padding:1rem;text-align:center;font-size:.75rem;color:#64748b;line-height:1.6}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}