:root{--fc-primary:#6366f1;--fc-primary-hover:#4f46e5;--fc-primary-light:#6366f114;--fc-primary-medium:#6366f126;--fc-text:#0f172a;--fc-text-secondary:#475569;--fc-text-muted:#64748b;--fc-text-light:#94a3b8;--fc-bg:#fff;--fc-bg-secondary:#f8fafc;--fc-bg-tertiary:#f1f5f9;--fc-bg-hover:#e2e8f0;--fc-border:#e2e8f0;--fc-border-strong:#cbd5e1;--fc-input-bg:#fff;--fc-input-border:#cbd5e1;--fc-input-border-hover:#94a3b8;--fc-input-border-focus:#6366f1;--fc-result-bg:linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);--fc-result-text:#4338ca;--fc-success:#10b981;--fc-success-bg:#10b9811a;--fc-error:#ef4444;--fc-shadow-sm:0 1px 2px #0000000d;--fc-shadow:0 1px 3px #0000001a, 0 1px 2px #0000000f;--fc-shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--fc-shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--fc-shadow-focus:0 0 0 3px #6366f133;--fc-radius-sm:6px;--fc-radius:10px;--fc-radius-lg:14px;--fc-radius-xl:18px;--fc-transition:.2s ease}._fc-container{flex-direction:column;gap:1.25rem;max-width:850px;margin:0 auto;display:flex}._fc-card{background:var(--fc-bg);border-radius:var(--fc-radius-xl);border-style:solid;border-width:1px;border-color:var(--fc-border);box-shadow:var(--fc-shadow-md);padding:1.75rem}._fc-card-header{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--fc-border);justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}._fc-card-title{color:var(--fc-text);letter-spacing:-.01em;margin:0;font-size:1.125rem;font-weight:700}._fc-toggle{cursor:pointer;-webkit-user-select:none;user-select:none;background:var(--fc-bg-secondary);border-radius:var(--fc-radius);transition:background var(--fc-transition);align-items:center;gap:.625rem;padding:.375rem .75rem;display:inline-flex}._fc-toggle:hover{background:var(--fc-bg-tertiary)}._fc-toggle input{width:1.125rem;height:1.125rem;accent-color:var(--fc-primary);cursor:pointer;margin:0}._fc-toggle-label{color:var(--fc-text-secondary);font-size:.8125rem;font-weight:500}._fc-toggle-sm{gap:.5rem;padding:.25rem .5rem}._fc-toggle-sm ._fc-toggle-label{font-size:.75rem}._fc-hidden{display:none!important}@media (max-width:768px){._fc-container{padding-left:1rem;padding-right:1rem}._fc-card{border-radius:var(--fc-radius-lg);padding:1.25rem}._fc-card-header{flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:1.25rem;padding-bottom:.875rem}._fc-card-title{font-size:1rem}}._fc-calculator{background:var(--fc-bg-secondary);border-style:solid;border-width:1px;border-color:var(--fc-border);border-radius:var(--fc-radius-lg);flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:1.5rem;padding:1.5rem;display:flex}._fc-fraction-box{background:var(--fc-bg);border-style:solid;border-width:2px;border-color:var(--fc-border);border-radius:var(--fc-radius-lg);box-shadow:var(--fc-shadow-sm);transition:border-color var(--fc-transition), box-shadow var(--fc-transition);padding:1rem 1.25rem}._fc-fraction-box:focus-within{border-color:var(--fc-primary);box-shadow:var(--fc-shadow-focus)}._fc-fraction{align-items:center;gap:.625rem;display:flex}._fc-fraction-main{flex-direction:column;align-items:center;gap:.375rem;display:flex;position:relative}._fc-fraction-line{background:linear-gradient(90deg, var(--fc-primary) 0%, var(--fc-primary-hover) 100%);border-radius:2px;width:100%;min-width:3.75rem;height:3px}._fc-whole{align-items:center;display:flex}._fc-whole ._fc-input-whole{width:3.25rem;margin-right:.5rem}._fc-input{text-align:center;width:3.75rem;height:2.5rem;color:var(--fc-text);background:var(--fc-input-bg);border-style:solid;border-width:2px;border-color:var(--fc-input-border);border-radius:var(--fc-radius);transition:border-color var(--fc-transition), box-shadow var(--fc-transition), background var(--fc-transition);outline:none;padding:0 .625rem;font-size:1.25rem;font-weight:600}._fc-input:hover{border-color:var(--fc-input-border-hover)}._fc-input:focus{border-color:var(--fc-input-border-focus);box-shadow:var(--fc-shadow-focus);background:var(--fc-bg)}._fc-input::placeholder{color:var(--fc-text-light);font-weight:500}._fc-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}._fc-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._fc-input[type=number]{-moz-appearance:textfield}._fc-input-num,._fc-input-den{width:3.5rem;height:2.25rem;font-size:1.125rem}._fc-operation{background:var(--fc-bg);border-style:solid;border-width:2px;border-color:var(--fc-border);border-radius:var(--fc-radius-lg);box-shadow:var(--fc-shadow-sm);grid-template-columns:repeat(2,1fr);gap:.375rem;padding:.5rem;display:grid}._fc-op-btn{width:2.75rem;height:2.75rem;color:var(--fc-text-muted);background:var(--fc-bg-tertiary);border-radius:var(--fc-radius);cursor:pointer;transition:all var(--fc-transition);border:none;justify-content:center;align-items:center;font-size:1.375rem;font-weight:600;display:flex}._fc-op-btn:hover{background:var(--fc-bg-hover);color:var(--fc-text)}._fc-op-btn._fc-op-active{background:var(--fc-primary);color:#fff;box-shadow:0 2px 8px #6366f166}._fc-op-btn._fc-op-active:hover{background:var(--fc-primary-hover)}._fc-equals{color:var(--fc-text-muted);padding:0 .375rem;font-size:1.75rem;font-weight:700}._fc-result{align-items:center;gap:.625rem;display:flex}._fc-result-display{background:var(--fc-result-bg);border-radius:var(--fc-radius-lg);border:2px solid #6366f133;flex-direction:column;justify-content:center;align-items:center;min-width:5.5rem;min-height:4.5rem;padding:.875rem 1.125rem;display:flex}._fc-result-placeholder{color:var(--fc-text-light);font-size:1.25rem;font-weight:600}._fc-result-fraction{color:var(--fc-result-text);align-items:center;gap:.375rem;font-weight:700;display:flex}._fc-result-whole{font-size:1.5rem}._fc-result-fraction-main{flex-direction:column;align-items:center;gap:.125rem;display:flex}._fc-result-num,._fc-result-den{font-size:1.0625rem;line-height:1.2}._fc-result-line{background:var(--fc-result-text);border-radius:1px;width:100%;height:2px}._fc-result-decimal{color:var(--fc-text-muted);margin-top:.375rem;font-size:.75rem;font-weight:500}._fc-copy-btn{width:2.5rem;height:2.5rem;color:var(--fc-text-muted);background:var(--fc-bg);border-style:solid;border-width:2px;border-color:var(--fc-border);border-radius:var(--fc-radius);cursor:pointer;transition:all var(--fc-transition);justify-content:center;align-items:center;display:flex}._fc-copy-btn:hover{background:var(--fc-primary-light);border-color:var(--fc-primary);color:var(--fc-primary)}._fc-copy-btn svg{width:18px;height:18px}._fc-actions{justify-content:center;gap:.75rem;margin-bottom:1.25rem;display:flex}._fc-swap-btn,._fc-clear-btn{color:var(--fc-text-secondary);background:var(--fc-bg);border-style:solid;border-width:1.5px;border-color:var(--fc-border);border-radius:var(--fc-radius);cursor:pointer;transition:all var(--fc-transition);align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.8125rem;font-weight:600;display:inline-flex}._fc-swap-btn:hover,._fc-clear-btn:hover{background:var(--fc-bg-tertiary);border-color:var(--fc-border-strong);color:var(--fc-text)}._fc-swap-btn svg,._fc-clear-btn svg{width:16px;height:16px}._fc-steps-wrapper{border-top-style:solid;border-top-width:1px;border-top-color:var(--fc-border);padding-top:1rem}._fc-steps{background:var(--fc-bg-secondary);border-style:solid;border-width:1px;border-color:var(--fc-border);border-radius:var(--fc-radius);color:var(--fc-text);margin-top:1rem;padding:1rem;font-size:.875rem;line-height:1.7}._fc-step{border-bottom-style:dashed;border-bottom-width:1px;border-bottom-color:var(--fc-border);margin-bottom:.75rem;padding-bottom:.75rem}._fc-step:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}._fc-step-title{color:var(--fc-text);margin-bottom:.25rem;font-weight:700}._fc-step-content{color:var(--fc-text-secondary);padding-left:.75rem}._fc-step-highlight{color:var(--fc-primary);background:var(--fc-primary-light);border-radius:4px;padding:.125rem .375rem;font-weight:700}@media (max-width:560px){._fc-calculator{gap:.75rem;padding:1rem}._fc-fraction-box{padding:.75rem 1rem}._fc-input{width:3.25rem;height:2.25rem;font-size:1.125rem}._fc-input-num,._fc-input-den{width:3rem;height:2rem;font-size:1rem}._fc-whole ._fc-input-whole{width:2.75rem}._fc-fraction-line{min-width:3rem}._fc-operation{gap:.25rem;padding:.375rem}._fc-op-btn{width:2.25rem;height:2.25rem;font-size:1.125rem}._fc-equals{font-size:1.5rem}._fc-result-display{min-width:4.5rem;min-height:4rem;padding:.625rem .875rem}._fc-actions{gap:.5rem}._fc-swap-btn,._fc-clear-btn{padding:.5rem .75rem;font-size:.75rem}}@media (max-width:400px){._fc-calculator{gap:.5rem;padding:.75rem}._fc-fraction-box{padding:.625rem .75rem}._fc-input{border-width:1.5px;width:2.75rem;height:2rem;font-size:1rem}._fc-input-num,._fc-input-den{width:2.5rem;height:1.75rem;font-size:.9375rem}._fc-fraction-line{min-width:2.5rem;height:2px}._fc-op-btn{width:2rem;height:2rem;font-size:1rem}}._fc-converters{background:var(--fc-bg);border-style:solid;border-width:1px;border-color:var(--fc-border);border-radius:var(--fc-radius-xl);box-shadow:var(--fc-shadow);overflow:hidden}._fc-converters-toggle{width:100%;color:var(--fc-text);cursor:pointer;transition:background var(--fc-transition);background:0 0;border:none;align-items:center;gap:.625rem;padding:1rem 1.25rem;font-size:.9375rem;font-weight:600;display:flex}._fc-converters-toggle:hover{background:var(--fc-bg-secondary)}._fc-converters-toggle svg{width:18px;height:18px;color:var(--fc-primary)}._fc-converters-icon{color:var(--fc-text-muted);margin-left:auto;transition:transform .25s}._fc-converters._fc-converters-open ._fc-converters-icon{transform:rotate(180deg)}._fc-converters-content{flex-direction:column;gap:1rem;padding:0 1.25rem 1.25rem;display:flex}._fc-converter-item{background:var(--fc-bg-secondary);border-style:solid;border-width:1px;border-color:var(--fc-border);border-radius:var(--fc-radius);padding:1rem}._fc-converter-title{color:var(--fc-text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .75rem;font-size:.75rem;font-weight:700}._fc-converter-row{flex-wrap:wrap;align-items:center;gap:.875rem;display:flex}._fc-converter-arrow{color:var(--fc-text-muted);font-size:1.125rem;font-weight:700}._fc-converter-result{background:var(--fc-result-bg);border-radius:var(--fc-radius);min-width:4rem;color:var(--fc-result-text);text-align:center;border:1px solid #6366f126;padding:.5rem .875rem;font-size:1rem;font-weight:700}._fc-fraction-sm{gap:.5rem}._fc-fraction-sm ._fc-input-num,._fc-fraction-sm ._fc-input-den{width:3rem;height:2rem;font-size:1rem}._fc-fraction-sm ._fc-fraction-line{min-width:2.75rem;height:2.5px}._fc-fraction-sm ._fc-input-whole{width:2.75rem;height:2rem;margin-right:.375rem;font-size:1rem}._fc-fraction-sm ._fc-whole{align-items:center;display:flex}@media (max-width:560px){._fc-converters-content{padding:0 1rem 1rem}._fc-converter-item{padding:.875rem}._fc-converter-row{gap:.625rem}._fc-fraction-sm ._fc-input-num,._fc-fraction-sm ._fc-input-den{width:2.5rem;height:1.75rem;font-size:.9375rem}._fc-fraction-sm ._fc-input-whole{width:2.25rem;height:1.75rem;font-size:.9375rem}._fc-fraction-sm ._fc-fraction-line{min-width:2.25rem}._fc-converter-result{min-width:3.5rem;padding:.375rem .625rem;font-size:.9375rem}}