.unit-toggle-container{display:flex;align-items:center}.unit-toggle-wrapper{position:relative;display:flex;background:var(--surface, #ffffff);border:2px solid var(--border-color, #e2e8f0);border-radius:10px;padding:4px;box-shadow:var(--shadow, 0 1px 3px 0 rgb(0 0 0 / .1));gap:4px;overflow:hidden}.unit-toggle-option{position:relative;display:flex;align-items:center;gap:6px;padding:8px 16px;background:transparent;border:none;border-radius:8px;font-size:13px;font-weight:600;color:var(--text-secondary, #64748b);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:2;white-space:nowrap;-webkit-user-select:none;user-select:none;outline:none}.unit-toggle-option:hover{color:var(--text-primary, #1e293b)}.unit-toggle-option:focus-visible{outline:2px solid var(--primary-color, #2563eb);outline-offset:2px}.unit-toggle-option.active{color:var(--text-primary, #1e293b)}.unit-toggle-icon{font-size:16px;line-height:1;transition:transform .3s cubic-bezier(.4,0,.2,1)}.unit-toggle-option.active .unit-toggle-icon{transform:scale(1.1)}.unit-toggle-text{font-size:13px;letter-spacing:.3px}.unit-toggle-indicator{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);background:linear-gradient(135deg,var(--primary-color, #2563eb) 0%,var(--primary-dark, #1e40af) 100%);border-radius:8px;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1;box-shadow:0 2px 8px #2563eb4d}.unit-toggle-indicator.metric{transform:translate(calc(100% + 4px));background:linear-gradient(135deg,var(--secondary-color, #10b981) 0%,#059669 100%);box-shadow:0 2px 8px #10b9814d}@media(max-width:640px){.unit-toggle-wrapper{padding:3px}.unit-toggle-option{padding:6px 12px;gap:4px}.unit-toggle-text{font-size:12px}.unit-toggle-icon{font-size:14px}}.layout{min-height:100vh;display:flex;flex-direction:column;background-color:var(--md-sys-color-background)}.app-bar{background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);box-shadow:var(--md-sys-elevation-2);position:sticky;top:0;z-index:1100;height:64px;display:flex;align-items:center}.app-bar-content{display:flex;align-items:center;width:100%;padding:0 16px;gap:16px}.menu-button{background:none;border:none;color:var(--md-sys-color-on-surface);cursor:pointer;padding:8px;border-radius:50%;display:none;align-items:center;justify-content:center}.menu-button:hover{background-color:#0000000a}.material-icon{font-size:24px;line-height:1}.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--md-sys-color-on-surface);font:var(--md-sys-typescale-title-large);margin-right:auto}.logo-icon{width:24px;height:24px;display:block}.logo-text{font-weight:700;background:linear-gradient(135deg,var(--md-sys-color-primary) 0%,var(--md-sys-color-tertiary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-bar-actions{display:flex;align-items:center;gap:24px}.desktop-nav{display:flex;gap:8px}.nav-link{text-decoration:none;color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-label-large);padding:8px 16px;border-radius:20px;transition:all .2s}.nav-link:hover{background-color:#0000000a;color:var(--md-sys-color-on-surface)}.nav-link.active{background-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.drawer-overlay{position:fixed;inset:0;background-color:#00000080;z-index:1200;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}.sidebar-open .drawer-overlay{opacity:1;visibility:visible}.drawer{position:fixed;top:0;left:0;bottom:0;width:300px;background-color:var(--md-sys-color-surface);z-index:1300;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:var(--md-sys-elevation-3);display:flex;flex-direction:column}.drawer.open{transform:translate(0)}.drawer-header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--md-sys-color-outline)}.drawer-title{font:var(--md-sys-typescale-title-medium);color:var(--md-sys-color-on-surface)}.close-button{background:none;border:none;font-size:24px;cursor:pointer;color:var(--md-sys-color-on-surface-variant);padding:8px}.drawer-nav{padding:16px 12px;overflow-y:auto}.drawer-link{display:flex;align-items:center;gap:12px;padding:12px 16px;text-decoration:none;color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-label-large);border-radius:28px;margin-bottom:4px;transition:background-color .2s}.drawer-link:hover{background-color:#0000000a;color:var(--md-sys-color-on-surface)}.drawer-link.active{background-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.drawer-icon{font-size:20px}.layout-container{display:flex;gap:24px;flex:1;padding:32px 16px;position:relative}.layout-main{flex:1;min-width:0}.main-content{max-width:900px;margin:0 auto}.footer{background:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);padding:32px 0;margin-top:auto;text-align:center}.footer-links{margin-top:16px;display:flex;justify-content:center;gap:24px;flex-wrap:wrap}.footer a{color:inherit;text-decoration:none;font:var(--md-sys-typescale-body-small)}.footer a:hover{text-decoration:underline}@media(max-width:968px){.menu-button{display:flex}.desktop-nav{display:none}.layout-container{flex-direction:column}}@media(min-width:969px){.drawer{display:none}.drawer.open{display:flex}.drawer-overlay{display:none}}.home{padding:0}.hero{text-align:center;padding:64px 16px;margin-bottom:32px;background:linear-gradient(180deg,var(--md-sys-color-surface) 0%,var(--md-sys-color-surface-variant) 100%);border-bottom-left-radius:32px;border-bottom-right-radius:32px}.hero h1{font:var(--md-sys-typescale-display-medium);color:var(--md-sys-color-on-surface);margin-bottom:16px}.hero-subtitle{font:var(--md-sys-typescale-body-large);color:var(--md-sys-color-on-surface-variant);max-width:700px;margin:0 auto}.calculators-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:32px 0;padding:0 16px}.calculator-card{background:var(--md-sys-color-surface);border-radius:16px;padding:24px;text-decoration:none;color:inherit;box-shadow:var(--md-sys-elevation-1);transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;border:1px solid var(--md-sys-color-outline);position:relative;overflow:hidden}.calculator-card:before{content:"";position:absolute;inset:0;background-color:var(--md-sys-color-primary);opacity:0;transition:opacity .2s;pointer-events:none}.calculator-card:hover{transform:translateY(-4px);box-shadow:var(--md-sys-elevation-3);border-color:transparent}.calculator-card:hover:before{opacity:.05}.calculator-icon{font-size:40px;margin-bottom:16px}.calculator-card h2{font:var(--md-sys-typescale-title-large);margin-bottom:8px;color:var(--md-sys-color-on-surface)}.calculator-card p{color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-medium);margin-bottom:16px;flex:1}.calculator-link{color:var(--md-sys-color-primary);font:var(--md-sys-typescale-label-large);margin-top:auto;display:flex;align-items:center;gap:8px}.content-section{background-color:var(--md-sys-color-surface);padding:32px;border-radius:24px;margin:48px auto;box-shadow:var(--md-sys-elevation-1)}.content-section h2{font:var(--md-sys-typescale-headline-small);color:var(--md-sys-color-on-surface);margin-bottom:16px}.content-section h3{font:var(--md-sys-typescale-title-large);color:var(--md-sys-color-on-surface);margin-top:24px;margin-bottom:8px}.content-section p,.content-section li{font:var(--md-sys-typescale-body-large);color:var(--md-sys-color-on-surface-variant);margin-bottom:12px}.content-section ul,.content-section ol{padding-left:24px;margin-bottom:16px}@media(max-width:640px){.hero{padding:32px 16px;border-radius:0 0 24px 24px}.hero h1{font:var(--md-sys-typescale-headline-large)}.hero-subtitle{font:var(--md-sys-typescale-body-medium)}.calculators-grid{grid-template-columns:1fr;padding:0 16px}.content-section{padding:24px 16px;border-radius:16px;margin:32px 16px}}.calculator-page{padding:0}.calculator-header{margin-bottom:32px}.calculator-header h1{font-size:36px;margin-bottom:12px;color:var(--text-primary)}.calculator-header p{color:var(--text-secondary);margin-bottom:8px;font-size:16px}.formula{font-family:Courier New,monospace;background:#f1f5f9;padding:12px;border-radius:6px;color:var(--primary-color);font-weight:600;margin-top:12px!important}.input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:24px}.button-group{display:flex;gap:12px;margin-top:24px}.btn-secondary{background-color:#64748b}.btn-secondary:hover{background-color:#475569}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.info-box{margin-top:32px;padding:20px;background:#f8fafc;border-radius:8px;border-left:4px solid var(--primary-color)}.info-box h3{font-size:18px;margin-bottom:12px;color:var(--text-primary)}.info-box p{color:var(--text-secondary);margin-bottom:8px;line-height:1.6}.color-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}.color-box{display:inline-block;width:24px;height:24px;border-radius:4px;margin-right:8px;vertical-align:middle;border:1px solid #cbd5e1}.color-box.black{background-color:#000}.color-box.brown{background-color:#8b4513}.color-box.red{background-color:red}.color-box.orange{background-color:orange}.color-box.yellow{background-color:#ff0}.color-box.green{background-color:green}.color-box.blue{background-color:#00f}.color-box.violet{background-color:#8b00ff}.color-box.grey{background-color:gray}.color-box.white{background-color:#fff}.resistors-list{margin:24px 0}.resistors-list h3{font-size:18px;margin-bottom:16px;color:var(--text-primary)}.resistor-input-row{display:flex;gap:12px;align-items:flex-end;margin-bottom:16px}.btn-remove{width:40px;height:40px;border-radius:8px;border:2px solid #ef4444;background:#fff;color:#ef4444;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.btn-remove:hover{background:#ef4444;color:#fff}@media(max-width:640px){.calculator-header h1{font-size:28px}.input-grid{grid-template-columns:1fr}.button-group{flex-direction:column}.btn{width:100%}.content-section{padding:1rem!important}}*{margin:0;padding:0;box-sizing:border-box}:root{--md-sys-color-primary: #0061a4;--md-sys-color-on-primary: #ffffff;--md-sys-color-primary-container: #d1e4ff;--md-sys-color-on-primary-container: #001d36;--md-sys-color-secondary: #535f70;--md-sys-color-on-secondary: #ffffff;--md-sys-color-secondary-container: #d7e3f7;--md-sys-color-on-secondary-container: #101c2b;--md-sys-color-tertiary: #6b5778;--md-sys-color-on-tertiary: #ffffff;--md-sys-color-tertiary-container: #f2daff;--md-sys-color-on-tertiary-container: #251431;--md-sys-color-error: #ba1a1a;--md-sys-color-on-error: #ffffff;--md-sys-color-error-container: #ffdad6;--md-sys-color-on-error-container: #410002;--md-sys-color-background: #fdfcff;--md-sys-color-on-background: #1a1c1e;--md-sys-color-surface: #fdfcff;--md-sys-color-on-surface: #1a1c1e;--md-sys-color-surface-variant: #dfe2eb;--md-sys-color-on-surface-variant: #43474e;--md-sys-color-outline: #73777f;--md-sys-elevation-0: none;--md-sys-elevation-1: 0px 1px 2px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);--md-sys-elevation-2: 0px 1px 2px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15);--md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, .15), 0px 1px 3px rgba(0, 0, 0, .3);--md-sys-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, .15), 0px 2px 3px rgba(0, 0, 0, .3);--md-sys-typescale-display-large: 400 57px/64px "Roboto", sans-serif;--md-sys-typescale-display-medium: 400 45px/52px "Roboto", sans-serif;--md-sys-typescale-display-small: 400 36px/44px "Roboto", sans-serif;--md-sys-typescale-headline-large: 400 32px/40px "Roboto", sans-serif;--md-sys-typescale-headline-medium: 400 28px/36px "Roboto", sans-serif;--md-sys-typescale-headline-small: 400 24px/32px "Roboto", sans-serif;--md-sys-typescale-title-large: 400 22px/28px "Roboto", sans-serif;--md-sys-typescale-title-medium: 500 16px/24px "Roboto", sans-serif;--md-sys-typescale-title-small: 500 14px/20px "Roboto", sans-serif;--md-sys-typescale-body-large: 400 16px/24px "Roboto", sans-serif;--md-sys-typescale-body-medium: 400 14px/20px "Roboto", sans-serif;--md-sys-typescale-body-small: 400 12px/16px "Roboto", sans-serif;--md-sys-typescale-label-large: 500 14px/20px "Roboto", sans-serif;--md-sys-typescale-label-medium: 500 12px/16px "Roboto", sans-serif;--md-sys-typescale-label-small: 500 11px/16px "Roboto", sans-serif;--primary-color: var(--md-sys-color-primary);--primary-dark: #004a7f;--secondary-color: var(--md-sys-color-secondary);--background: var(--md-sys-color-background);--surface: var(--md-sys-color-surface);--text-primary: var(--md-sys-color-on-background);--text-secondary: var(--md-sys-color-on-surface-variant);--border-color: var(--md-sys-color-outline);--shadow: var(--md-sys-elevation-1);--shadow-lg: var(--md-sys-elevation-3)}body{font-family:Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-background);line-height:1.5;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.container{max-width:1200px;margin:0 auto;padding:0 16px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary);border:none;border-radius:20px;font:var(--md-sys-typescale-label-large);cursor:pointer;transition:box-shadow .2s,background-color .2s,transform .1s;text-decoration:none;box-shadow:var(--md-sys-elevation-1);position:relative;overflow:hidden}.btn:hover{background-color:#005691;box-shadow:var(--md-sys-elevation-2)}.btn:active{box-shadow:var(--md-sys-elevation-1);transform:scale(.98)}.input-group{margin-bottom:24px;position:relative}.input-group label{display:block;margin-bottom:8px;font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-on-surface-variant)}.input-group input,.input-group select{width:100%;padding:12px 16px;background-color:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline);border-radius:4px;font:var(--md-sys-typescale-body-large);color:var(--md-sys-color-on-surface);transition:border-color .2s,box-shadow .2s}.input-group input:focus,.input-group select:focus{outline:none;border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary-container)}.result-box{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);padding:24px;border-radius:16px;margin-top:24px;text-align:center;box-shadow:var(--md-sys-elevation-1);animation:slideUp .3s ease-out}.result-box h3{font:var(--md-sys-typescale-title-medium);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;opacity:.8}.result-box .result-value{font:var(--md-sys-typescale-display-small);margin:8px 0}.result-box .result-unit{font:var(--md-sys-typescale-title-large);opacity:.9}.card{background:var(--md-sys-color-surface);border-radius:12px;padding:24px;box-shadow:var(--md-sys-elevation-1);margin-bottom:24px;border:1px solid #f0f0f0;transition:box-shadow .2s}.card:hover{box-shadow:var(--md-sys-elevation-2)}.card h2{color:var(--md-sys-color-on-surface);margin-bottom:16px;font:var(--md-sys-typescale-headline-small)}.card p{color:var(--md-sys-color-on-surface-variant);margin-bottom:20px;font:var(--md-sys-typescale-body-medium)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.fade-in{animation:fadeIn .5s ease-out}.slide-up{animation:slideUp .5s ease-out}.ad-container{background:var(--md-sys-color-surface-variant);border:1px dashed var(--md-sys-color-outline);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--md-sys-color-on-surface-variant);font:var(--md-sys-typescale-body-small);margin:20px 0;min-height:100px}.ad-banner{width:100%;min-height:90px}.ad-square{width:100%;min-height:250px}.ad-skyscraper{width:100%;min-height:600px}@media(max-width:768px){.container{padding:0 16px}body{font-size:16px}.btn,button,a{min-height:48px;min-width:48px}h1{font:var(--md-sys-typescale-headline-medium)}h2{font:var(--md-sys-typescale-title-large)}h3{font:var(--md-sys-typescale-title-medium)}.card{padding:16px}}@media(min-width:728px){.ad-banner{min-height:90px}}@media(min-width:300px){.ad-square{min-height:250px}}.lazy-image{opacity:0;transition:opacity .3s}.lazy-image.loaded{opacity:1}.lazy-image.loading{background:var(--md-sys-color-surface-variant)}