@import"https://unpkg.com/open-props/easings.min.css";:root{--bg-primary: linear-gradient(135deg, #f5f7fa, #c3cfe2);--bg-secondary: linear-gradient(145deg, #ffffff, #f0f2f5);--bg-overlay: linear-gradient(45deg, rgba(74, 144, 255, .1), rgba(156, 74, 255, .1), rgba(255, 74, 144, .1), rgba(255, 165, 74, .1));--text-primary: #2d3748;--text-secondary: #4a5568;--border-color: #e2e8f0;--input-bg: #ffffff;--shadow-light: rgba(0, 0, 0, .1);--shadow-dark: rgba(0, 0, 0, .2);--accent-color: #4299e1;--accent-hover: #3182ce;--icon-fill: #2d3748;--icon-fill-hover: #4299e1}[data-theme=dark]{--bg-primary: linear-gradient(135deg, #1e1e1e, #2d2d2d);--bg-secondary: linear-gradient(145deg, #2c2c2c, #1a1a1a);--bg-overlay: linear-gradient(45deg, rgba(74, 144, 255, .15), rgba(156, 74, 255, .15), rgba(255, 74, 144, .15), rgba(255, 165, 74, .15));--text-primary: #ffffff;--text-secondary: #e2e8f0;--border-color: #333333;--input-bg: #1f1d1d;--shadow-light: rgba(0, 0, 0, .3);--shadow-dark: rgba(0, 0, 0, .5);--accent-color: #4a90ff;--accent-hover: #5ba0ff;--icon-fill: #ffffff;--icon-fill-hover: #4a90ff}body{margin:0;padding:20px;font-family:IBM Plex Sans Thai,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-primary);min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-primary);transition:background .3s ease,color .3s ease}.theme-toggle{position:fixed;top:20px;right:20px;background:var(--input-bg);border:2px solid var(--border-color);border-radius:50%;padding:12px;cursor:pointer;transition:all .3s ease;z-index:1000;box-shadow:0 4px 12px var(--shadow-light)}.calculator-logo{position:fixed;top:20px;left:20px;display:flex;align-items:center;gap:12px;background:var(--input-bg);border:2px solid var(--border-color);border-radius:12px;padding:8px 12px;box-shadow:0 4px 12px var(--shadow-light);z-index:1000;transition:all .3s ease}.calculator-logo:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-dark);border-color:var(--accent-color)}.logo-icon{transition:all .3s ease}.calculator-logo:hover .logo-icon{transform:scale(1.1)}.logo-text{font-size:12px;font-weight:700;color:var(--text-primary);letter-spacing:.5px;transition:color .3s ease}.calculator-logo:hover .logo-text{color:var(--accent-color)}.theme-toggle:hover{border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-dark)}.sun-and-moon>:is(.moon,.sun,.sun-beams){transform-origin:center}.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill)}.theme-toggle:is(:hover,:focus-visible)>.sun-and-moon>:is(.moon,.sun){fill:var(--icon-fill-hover)}.sun-and-moon>.sun-beams{stroke:var(--icon-fill);stroke-width:2px}.theme-toggle:is(:hover,:focus-visible) .sun-and-moon>.sun-beams{stroke:var(--icon-fill-hover)}[data-theme=dark] .sun-and-moon>.sun{transform:scale(1.75)}[data-theme=dark] .sun-and-moon>.sun-beams{opacity:0}[data-theme=dark] .sun-and-moon>.moon>circle{transform:translate(-7px)}@supports (cx: 1){[data-theme=dark] .sun-and-moon>.moon>circle{cx:17;transform:translate(0)}}@media (prefers-reduced-motion: no-preference){.sun-and-moon>.sun{transition:transform .5s var(--ease-elastic-3)}.sun-and-moon>.sun-beams{transition:transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3)}.sun-and-moon .moon>circle{transition:transform .25s var(--ease-out-5)}@supports (cx: 1){.sun-and-moon .moon>circle{transition:cx .25s var(--ease-out-5)}}[data-theme=dark] .sun-and-moon>.sun{transition-timing-function:var(--ease-3);transition-duration:.25s;transform:scale(1.75)}[data-theme=dark] .sun-and-moon>.sun-beams{transition-duration:.15s;transform:rotate(-25deg)}[data-theme=dark] .sun-and-moon>.moon>circle{transition-duration:.5s;transition-delay:.25s}}.calculator-container{width:350px;margin:auto;padding:30px;background:var(--bg-overlay),var(--bg-secondary);border-radius:20px;box-shadow:0 0 10px var(--shadow-light),0 0 30px var(--shadow-dark),inset 0 0 10px #ffffff0d;border:1px solid var(--border-color);transition:all .3s ease;position:relative}.calculator-container:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(74,144,255,.1),transparent),var(--bg-overlay),var(--bg-secondary);box-shadow:0 2px 15px var(--shadow-light),0 2px 40px var(--shadow-dark),inset 0 0 15px #ffffff14}.input-field{width:100%;padding:15px;margin-bottom:15px;background:var(--input-bg);border:2px solid var(--border-color);border-radius:10px;color:var(--text-primary);font-size:16px;box-sizing:border-box;transition:all .3s ease}.input-field:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 10px #4a90ff4d;transform:translateY(-2px)}.input-field::placeholder{color:var(--text-secondary);opacity:.7}.radio-group{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:20px 0}.radio-label{display:flex;align-items:center;padding:12px 15px;background:var(--input-bg);border:2px solid var(--border-color);border-radius:10px;cursor:pointer;transition:all .3s ease;-webkit-user-select:none;user-select:none}.radio-label:hover{background:var(--input-bg);border-color:var(--accent-color);transform:translateY(-2px);box-shadow:0 5px 15px #4a90ff33}.radio-label input[type=radio]{margin-right:10px;accent-color:var(--accent-color);transform:scale(1.2)}.radio-label input[type=radio]:checked+span{color:var(--accent-color);font-weight:700}.calculate-btn{width:100%;padding:15px;background:linear-gradient(145deg,var(--accent-color),var(--accent-hover));color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 15px #4a90ff4d,inset 0 1px #fff3}.calculate-btn:hover{background:linear-gradient(145deg,var(--accent-hover),var(--accent-color));transform:translateY(-3px);box-shadow:0 12px 25px #4a90ff66,inset 0 1px #ffffff4d}.calculate-btn:active{transform:translateY(-1px);box-shadow:0 5px 10px #4a90ff4d,inset 0 1px #fff3}.result-section{margin-top:25px;text-align:center}.result-title{font-size:20px;font-weight:700;margin-bottom:15px;color:var(--text-primary);text-shadow:0 2px 4px rgba(0,0,0,.2)}.result-display{padding:20px;background:var(--input-bg);border:2px solid var(--border-color);border-radius:12px;font-size:24px;font-weight:700;color:var(--accent-color);min-height:30px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 2px 10px #0000001a;transition:all .3s ease}.result-display:not(:empty){border-color:var(--accent-color);box-shadow:inset 0 2px 10px #0000001a,0 0 10px #4a90ff33}.calculator-container:before{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,#4a90ff,#9c4aff,#ff4a90,#ffa54a);border-radius:22px;z-index:-1;opacity:0;transition:opacity .3s ease}.calculator-container{position:relative}.calculator-container:hover:before{opacity:.1}@media (max-width: 480px){.calculator-container{width:90%;padding:20px}.radio-group{grid-template-columns:1fr}.calculator-logo{position:relative;top:auto;left:auto;margin:0 auto 20px;width:fit-content}.theme-toggle{top:15px;right:15px;padding:10px}}#toast{opacity:0;display:flex;align-items:center;gap:.75rem;position:fixed;top:20px;left:50%;transform:translate(-50%);background:var(--toast-bg, #272727);color:#fff;padding:16px 24px;border-radius:12px;box-shadow:0 4px 20px #0000004d;z-index:1001;font-size:14px;transition:all .5s ease-in-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}#toast.opacity-100{opacity:1}#toast.opacity-0{opacity:0;transform:translate(-50%) translateY(-20px)}#toast.hidden{display:none}.icon{width:24px;height:24px;stroke-width:3;stroke-miterlimit:10;stroke:#fff;fill:none;animation:dash .6s ease forwards;flex-shrink:0}.checkmark{animation:stroke .5s ease forwards}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;animation:dash .6s ease forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:dash .3s .6s ease forwards}.cross__line1,.cross__line2{stroke-dasharray:40;stroke-dashoffset:40;animation:dash .4s ease forwards;stroke-linecap:round}.cross__line2{animation-delay:.4s}.caution__triangle{stroke-dasharray:120;stroke-dashoffset:120;animation:dash .6s ease forwards;stroke-linejoin:round;stroke-width:3}.caution__line{stroke-dasharray:10;stroke-dashoffset:10;animation:dash .3s .3s ease forwards;stroke-linecap:round;stroke-width:3}.caution__dot{transform:scale(0);animation:dotScale .3s .6s ease forwards}@keyframes dash{to{stroke-dashoffset:0}}@keyframes stroke{to{stroke-width:3}}@keyframes dotScale{to{transform:scale(1)}}:root{--toast-success: #10b981;--toast-error: #ef4444;--toast-info: #3b82f6;--toast-warning: #f59e0b}[data-theme=dark]{--toast-success: #059669;--toast-error: #dc2626;--toast-info: #2563eb;--toast-warning: #d97706}#toastMessage{font-weight:500;letter-spacing:.025em}@media (max-width: 480px){#toast{left:20px;right:20px;transform:none;width:auto;max-width:calc(100vw - 40px)}#toast.opacity-0{transform:translateY(-20px)}}