:root{--clr-primary: #0d6efd;--clr-danger: #dc3545;--clr-bg: #f8f9fa;--clr-card: white;--clr-text: #333;--clr-muted: #6c757d;--clr-heading: #1a3c5e;--clr-border: #e2e8f0;--clr-guide-bg: #f8fafc;--clr-day: #f59e0b;--clr-night: #1f2937;--radius: .75rem;--shadow: 0 4px 20px rgba(0,0,0,.08);--spacing-sm: clamp(.75rem, 3vw, 1rem);--spacing-md: clamp(1rem, 4vw, 1.5rem);--spacing-lg: clamp(1.5rem, 5vw, 2rem);--font-base: clamp(15px, 2.4vw + .3rem, 17px);--font-heading: clamp(1.8rem, 5vw, 2.4rem);color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--clr-bg: #0f172a;--clr-card: #1e293b;--clr-text: #e2e8f0;--clr-muted: #94a3b8;--clr-heading: #cbd5e1;--clr-border: #334155;--clr-primary: #60a5fa;--clr-danger: #f87171;--clr-guide-bg: #1e293b;--shadow: 0 4px 20px rgba(0,0,0,.5);color-scheme:dark}}:root[data-theme=dark]{--clr-bg: #0f172a;--clr-card: #1e293b;--clr-text: #e2e8f0;--clr-muted: #94a3b8;--clr-heading: #cbd5e1;--clr-border: #334155;--clr-primary: #60a5fa;--clr-danger: #f87171;--clr-guide-bg: #1e293b;--shadow: 0 4px 20px rgba(0,0,0,.5);color-scheme:dark}:root[data-theme=light]{--clr-bg: #f8f9fa;--clr-card: white;--clr-text: #333;--clr-muted: #6c757d;--clr-heading: #1a3c5e;--clr-border: #e2e8f0;--clr-primary: #0d6efd;--clr-danger: #dc3545;--clr-guide-bg: #f8fafc;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;background:var(--clr-bg);color:var(--clr-text);min-height:100dvh;padding:var(--spacing-md);font-size:var(--font-base);line-height:1.5}.container{max-width:960px;margin:0 auto;background:var(--clr-card);padding:var(--spacing-lg);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--clr-border)}h1{text-align:center;color:var(--clr-heading);margin-bottom:var(--spacing-lg);font-size:var(--font-heading)}.theme-section{display:flex;align-items:center;justify-content:center;gap:.75rem;background:color-mix(in srgb,var(--clr-card) 90%,var(--clr-border));padding:.5rem 1rem;border-radius:9999px;margin:0 auto var(--spacing-md) auto;width:fit-content}.theme-label{font-weight:600;padding:.375rem .75rem;border-radius:9999px;transition:all .3s;font-size:.95rem;cursor:pointer;user-select:none}.theme-label:hover{opacity:.9;transform:scale(1.03)}.theme-label.day{background:var(--clr-day);color:#fff}.theme-label.night{background:var(--clr-night);color:#fff;border:1px solid white}.theme-switch{position:relative;width:3.5rem;height:1.875rem;flex-shrink:0}.theme-switch input{opacity:0;width:0;height:0}.theme-slider{position:absolute;inset:0;cursor:pointer;background-color:#ccc;transition:.4s;border-radius:9999px;border:2px solid transparent}.theme-slider:before{position:absolute;content:"☀️";height:1.375rem;width:1.375rem;left:.25rem;bottom:.25rem;background-color:#fff;color:#111;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:.4s;border-radius:50%}input:not(:checked)+.theme-slider{background:var(--clr-day)}input:checked+.theme-slider{background:var(--clr-night);border:2px solid var(--clr-day)}input:checked+.theme-slider:before{transform:translate(1.75rem);content:"🌙"}.main-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}.inputs-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.form-row{display:flex;flex-direction:column;gap:var(--spacing-sm)}.form-row label{font-weight:600;color:var(--clr-muted)}.form-row input{padding:.75rem 1rem;font-size:1.05rem;border:1px solid var(--clr-border);border-radius:var(--radius);width:100%;background:var(--clr-card);color:var(--clr-text)}.settings-row{display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:center;justify-content:space-between}.afa-gombok{display:flex;flex-wrap:wrap;gap:.5rem}.afa-gombok button{padding:.5rem 1rem;border:1px solid var(--clr-primary);background:var(--clr-card);color:var(--clr-primary);border-radius:var(--radius);cursor:pointer;min-width:4rem;font-size:clamp(.9rem,2.5vw,1rem);transition:all .15s}.afa-gombok button.active,.afa-gombok button:hover{background:var(--clr-primary);color:#fff}.decimal-section{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.toggle-container{display:inline-flex;align-items:center;gap:.75rem;background:color-mix(in srgb,var(--clr-card) 90%,var(--clr-border));padding:.5rem 1rem;border-radius:9999px}.toggle-label{font-weight:600;padding:.375rem .75rem;border-radius:9999px;transition:all .3s;font-size:.9rem;cursor:pointer;user-select:none}.toggle-label:hover{opacity:.9;transform:scale(1.03)}.toggle-label.left.active{background:var(--clr-primary);color:#fff}.toggle-label.right.active{background:#ef4444;color:#fff}.toggle-switch{position:relative;width:3.5rem;height:1.875rem;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;cursor:pointer;background-color:#ccc;transition:.4s;border-radius:9999px}.slider:before{position:absolute;content:attr(data-char);height:1.375rem;width:1.375rem;left:.25rem;bottom:.25rem;background-color:#fff;color:#111;font-weight:700;font-size:.875rem;display:flex;align-items:center;justify-content:center;transition:.4s;border-radius:50%}input:not(:checked)+.slider{background-color:var(--clr-primary)}input:checked+.slider{background-color:#ef4444}input:checked+.slider:before{transform:translate(1.75rem)}.results{margin:var(--spacing-md) 0}.result-table{width:100%;border-collapse:collapse;font-size:1rem}.result-table th,.result-table td{padding:.875rem 1rem;text-align:right;border-bottom:1px solid var(--clr-border)}.result-table th{text-align:left;background:color-mix(in srgb,var(--clr-primary) 10%,var(--clr-card));font-weight:600;color:var(--clr-muted);white-space:nowrap}.result-table .rounded{font-weight:700;color:var(--clr-heading)}@media(max-width:640px){.result-table{border:0}.result-table thead{display:none}.result-table tbody{display:block}.result-table tr{display:block;margin-bottom:1.25rem;border:1px solid var(--clr-border);border-radius:var(--radius);background:var(--clr-card);box-shadow:0 1px 3px #0000001a;padding:1rem}.result-table td{display:flex;justify-content:space-between;text-align:right;border:none;padding:.5rem 0;font-size:1rem}.result-table td:before{content:attr(data-label);font-weight:600;color:var(--clr-muted);text-align:left;flex:1}}.clear-wrapper{text-align:center;margin:var(--spacing-md) 0}#clearBtn{padding:.75rem 2rem;font-size:1.05rem;background:var(--clr-danger);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;transition:background .2s}#clearBtn:hover{background:#c82333}.status{text-align:center;color:var(--clr-muted);font-style:italic;margin:var(--spacing-sm) 0}.guide{background:var(--clr-guide-bg);padding:var(--spacing-md);border-radius:var(--radius);border:1px solid var(--clr-border);font-size:.95rem;line-height:1.6}.guide h3{margin-bottom:1rem;color:var(--clr-heading)}.guide ul{list-style:none;padding-left:0}.guide li{margin-bottom:.75rem;position:relative;padding-left:1.5rem}.guide li:before{content:"–";position:absolute;left:0;color:var(--clr-primary);font-weight:700}@media(min-width:480px){.form-row{flex-direction:row;align-items:center}.form-row label{flex:0 0 9rem}.form-row input{flex:1}}@media(min-width:640px){.settings-row{justify-content:flex-start;gap:3rem}.decimal-section{margin-left:auto}}@media(min-width:768px){.main-content{flex-direction:row}.inputs-section{flex:3}.guide{flex:2}.container{padding:var(--spacing-lg) var(--spacing-lg)}}@media(min-width:1024px){.container{max-width:1100px}}