.components-module{background:var(--ru-bg)}
.component-main{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:28px 0 64px}
.component-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(310px,.8fr);gap:36px;align-items:center;padding:42px;border:1px solid var(--ru-border);border-radius:26px;background:linear-gradient(135deg,#072f57 0%,#075f96 58%,#08a5c7 100%);box-shadow:var(--ru-shadow-md);color:#fff}
.component-hero:after{content:"";position:absolute;width:360px;height:360px;right:-160px;top:-190px;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 0 0 54px rgba(255,255,255,.05),0 0 0 108px rgba(255,255,255,.035)}
.component-hero>div{position:relative;z-index:1}.component-hero h1{max-width:760px;margin:10px 0 14px;font-size:clamp(36px,5vw,62px);line-height:1.02;letter-spacing:-.045em}.component-hero p{max-width:700px;margin:0;color:rgba(255,255,255,.88);font-size:17px;line-height:1.65}
.component-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.component-hero .button.ghost{border-color:rgba(255,255,255,.35);color:#fff;background:rgba(255,255,255,.08)}
.component-hero-board{min-height:260px;border:1px solid rgba(255,255,255,.2);border-radius:22px;background:rgba(4,30,55,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.13);display:grid;place-content:center;gap:24px;padding:28px;transform:rotate(1.5deg)}
.hero-resistor{display:flex;align-items:center}.hero-resistor>i{width:45px;height:3px;background:#b9d7ea}.hero-resistor>i:last-child{flex:1}.hero-resistor>b{height:54px;width:10px;background:#78441f}.hero-resistor>b:nth-of-type(2){background:#111827}.hero-resistor>b:nth-of-type(3){background:#dc2626}.hero-resistor>b:nth-of-type(4){margin-left:22px;background:#d6a514}.hero-resistor:before,.hero-resistor:after{content:"";height:72px;width:58px;background:#efd39d}.hero-resistor:before{border-radius:32px 8px 8px 32px}.hero-resistor:after{border-radius:8px 32px 32px 8px}
.hero-capacitor{justify-self:center;display:grid;place-items:center;width:76px;height:88px;border-radius:10px;background:#f2c14e;color:#18324a;font-weight:900;box-shadow:0 12px 24px rgba(0,0,0,.2)}.hero-capacitor:after{content:"";width:3px;height:28px;background:#b9d7ea;box-shadow:32px 0 #b9d7ea;position:absolute;transform:translate(-16px,56px)}
.hero-diode{display:flex;align-items:center;justify-content:center}.hero-diode i{width:70px;height:3px;background:#b9d7ea}.hero-diode b{width:92px;height:32px;border-radius:16px;background:#cf4b3f;border-right:12px solid #e9eef2;box-shadow:0 9px 18px rgba(0,0,0,.18)}
.component-jump{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0 40px}.component-jump a{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--ru-border);border-radius:14px;background:var(--ru-surface);box-shadow:var(--ru-shadow-sm);text-decoration:none;font-weight:800}.component-jump a:hover{border-color:var(--ru-primary);color:var(--ru-primary)}.component-jump span{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ru-primary-soft);color:var(--ru-primary);font-size:12px}
.component-section{scroll-margin-top:90px;margin-top:42px}.component-section-head{display:grid;grid-template-columns:1fr minmax(280px,520px);gap:28px;align-items:end;margin-bottom:18px}.component-section-head h2,.identifier-card h2{margin:6px 0 0;font-size:clamp(26px,3vw,36px);letter-spacing:-.03em}.component-section-head>p{margin:0;color:var(--ru-muted);line-height:1.65}
.identifier-grid,.split-section{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}.identifier-card{min-width:0;padding:24px;border:1px solid var(--ru-border);border-radius:20px;background:var(--ru-surface);box-shadow:var(--ru-shadow-sm)}.identifier-card>p{color:var(--ru-muted);line-height:1.65}.visual-card{background:linear-gradient(145deg,var(--ru-surface),color-mix(in srgb,var(--ru-primary-soft) 38%,var(--ru-surface)))}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.compact-field{display:block;width:min(240px,100%);margin:0}.field-row label,.band-controls label{display:grid;gap:7px;color:var(--ru-muted);font-size:12px;font-weight:800}.field-row input,.field-row select,.band-controls select,.catalog-search input{width:100%;min-height:44px;border:1px solid var(--ru-border);border-radius:10px;background:var(--ru-surface);color:var(--ru-text);padding:9px 11px;font:inherit}.field-row input:focus,.field-row select:focus,.band-controls select:focus,.catalog-search input:focus{outline:3px solid var(--ru-primary-soft);border-color:var(--ru-primary)}
.resistor-stage{min-height:190px;display:flex;align-items:center;justify-content:center;padding:28px 6px}.resistor-wire{height:4px;background:#a9b8c5;flex:1;min-width:30px}.resistor-body{position:relative;width:min(330px,72%);height:96px;border-radius:48px 18px 18px 48px;background:linear-gradient(#efdcae,#d8bb79);display:flex;align-items:stretch;gap:13px;padding:0 34px;box-shadow:inset 0 4px 7px rgba(255,255,255,.48),inset 0 -5px 8px rgba(95,57,18,.2),0 14px 25px rgba(15,38,68,.12)}.resistor-body:before,.resistor-body:after{content:"";position:absolute;top:14px;width:34px;height:68px;background:linear-gradient(#f2dfb1,#d4b575)}.resistor-body:before{left:-15px;border-radius:34px 7px 7px 34px}.resistor-body:after{right:-15px;border-radius:7px 34px 34px 7px}.resistor-body i{position:relative;z-index:1;width:15px;background:var(--band,#111827);box-shadow:inset 2px 0 rgba(255,255,255,.22),inset -2px 0 rgba(0,0,0,.16)}.resistor-body i[data-res-visual=tolerance]{margin-left:auto}.resistor-body i[hidden]{display:none}
.identifier-result{min-height:82px;display:grid;align-content:center;margin-top:6px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--ru-primary) 25%,var(--ru-border));border-radius:14px;background:var(--ru-primary-soft);color:var(--ru-text)}.identifier-result strong{font-size:clamp(25px,3vw,36px);letter-spacing:-.035em;color:var(--ru-primary)}.identifier-result span{margin-top:4px;color:var(--ru-muted);font-size:13px}.identifier-result.error{border-color:#ef4444;background:color-mix(in srgb,#ef4444 10%,var(--ru-surface));color:#b91c1c}.formula-note{min-height:20px;margin:10px 2px 0!important;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px}
.band-controls{display:grid;grid-template-columns:1fr 1fr;gap:14px}.four-controls{margin-top:12px}.band-controls label[hidden]{display:none}.band-controls option{background:var(--ru-surface);color:var(--ru-text)}
.reading-tip,.warning-note{margin-top:20px;padding:16px;border-left:4px solid var(--ru-primary);border-radius:5px 12px 12px 5px;background:var(--ru-primary-soft)}.reading-tip p,.warning-note p{margin:6px 0 0;color:var(--ru-muted);font-size:13px;line-height:1.55}.warning-note{border-color:#f59e0b;background:color-mix(in srgb,#f59e0b 11%,var(--ru-surface))}
.reference-table{margin-top:14px;border:1px solid var(--ru-border);border-radius:14px;background:var(--ru-surface);overflow:hidden}.reference-table summary{cursor:pointer;padding:15px 18px;font-weight:800}.reference-table[open] summary{border-bottom:1px solid var(--ru-border)}.table-scroll{overflow:auto}.reference-table table{width:100%;border-collapse:collapse;font-size:13px}.reference-table th,.reference-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--ru-border);white-space:nowrap}.color-name{display:flex;align-items:center;gap:9px;font-weight:700}.color-swatch{width:18px;height:18px;border-radius:50%;background:var(--swatch);border:1px solid rgba(15,23,42,.18)}
.split-section{scroll-margin-top:90px}.code-decoder,.explanation-card{align-self:stretch}.component-shape{margin:20px auto;display:grid;place-items:center}.capacitor-shape{width:100px;height:118px;border-radius:13px;background:linear-gradient(145deg,#f2cc54,#c99719);color:#18293a;box-shadow:inset 0 3px rgba(255,255,255,.35),0 15px 30px rgba(15,38,68,.13);font:900 22px ui-monospace,SFMono-Regular,Consolas,monospace}.capacitor-shape:after{content:"";position:absolute;width:3px;height:38px;background:#a9b8c5;box-shadow:42px 0 #a9b8c5;transform:translate(-21px,76px)}.example-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.example-chips button,.catalog-filters button{border:1px solid var(--ru-border);border-radius:999px;background:var(--ru-surface);color:var(--ru-text);padding:8px 11px;cursor:pointer;font:700 12px inherit}.example-chips button:hover,.catalog-filters button:hover,.catalog-filters button.active{border-color:var(--ru-primary);background:var(--ru-primary-soft);color:var(--ru-primary)}.check-list{display:grid;gap:12px;padding:0;list-style:none}.check-list li{position:relative;padding:13px 14px 13px 42px;border:1px solid var(--ru-border);border-radius:12px;line-height:1.55}.check-list li:before{content:"✓";position:absolute;left:14px;top:13px;color:var(--ru-primary);font-weight:900}
.inductor-body{border-radius:18px;background:linear-gradient(#95cdeb,#5b9ec7);width:min(310px,70%);padding-inline:48px;gap:17px}.inductor-body i[data-ind-visual=tolerance]{margin-left:auto}
.catalog-heading{margin-top:4px}.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px;border:1px solid var(--ru-border);border-radius:16px;background:var(--ru-surface)}.catalog-search{min-width:min(390px,100%);display:flex;align-items:center;gap:8px}.catalog-search span{color:var(--ru-muted);font-size:22px}.catalog-search input{border:0;background:var(--ru-surface-soft)}.catalog-filters{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.catalog-count{margin:14px 2px;color:var(--ru-muted);font-size:13px}.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.catalog-card{display:flex;flex-direction:column;min-width:0;padding:19px;border:1px solid var(--ru-border);border-radius:17px;background:var(--ru-surface);box-shadow:var(--ru-shadow-sm)}.catalog-card:hover{border-color:color-mix(in srgb,var(--ru-primary) 40%,var(--ru-border));box-shadow:var(--ru-shadow-md)}.catalog-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.catalog-card h3{margin:3px 0 0;font-size:22px;letter-spacing:-.025em}.catalog-type{padding:5px 8px;border-radius:999px;background:var(--ru-primary-soft);color:var(--ru-primary);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}.catalog-description{min-height:46px;color:var(--ru-muted);font-size:13px;line-height:1.55}.catalog-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.catalog-specs div{padding:9px;border-radius:10px;background:var(--ru-surface-soft)}.catalog-specs span{display:block;color:var(--ru-muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.catalog-specs b{display:block;margin-top:3px;font-size:13px}.pinout{padding:10px 12px;border-left:3px solid var(--ru-primary);background:var(--ru-primary-soft);font-size:12px;line-height:1.5}.catalog-card footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:15px}.catalog-card footer span{color:var(--ru-muted);font-size:11px}.catalog-card footer a{color:var(--ru-primary);font-size:12px;font-weight:800;text-decoration:none}.catalog-empty{grid-column:1/-1;padding:36px;text-align:center;border:1px dashed var(--ru-border);border-radius:16px;color:var(--ru-muted)}
.safety-panel{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:18px;padding:20px;border:1px solid color-mix(in srgb,#f59e0b 42%,var(--ru-border));border-radius:16px;background:color-mix(in srgb,#f59e0b 10%,var(--ru-surface))}.safety-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#f59e0b;color:#18212c;font-size:24px;font-weight:900}.safety-panel h3{margin:0 0 5px}.safety-panel p{margin:0;color:var(--ru-muted);line-height:1.55}
html[data-theme=dark] .component-hero{background:linear-gradient(135deg,#071d34,#073f63 58%,#08728c)}html[data-theme=dark] .resistor-body{filter:saturate(.9) brightness(.86)}
@media(max-width:960px){.component-hero{grid-template-columns:1fr}.component-hero-board{display:none}.component-jump{grid-template-columns:1fr 1fr}.identifier-grid,.split-section{grid-template-columns:1fr}.catalog-grid{grid-template-columns:1fr 1fr}.component-section-head{grid-template-columns:1fr}.catalog-toolbar{align-items:stretch;flex-direction:column}.catalog-filters{justify-content:flex-start}}
@media(max-width:620px){.component-main{width:min(100% - 20px,1180px);padding-top:12px}.component-hero{padding:27px 22px;border-radius:19px}.component-hero h1{font-size:37px}.component-jump{grid-template-columns:1fr;margin-bottom:28px}.identifier-card{padding:18px}.band-controls,.field-row{grid-template-columns:1fr}.resistor-stage{min-height:150px;padding-inline:0}.resistor-body{width:72%;height:78px;padding-inline:21px;gap:9px}.resistor-body:before,.resistor-body:after{height:56px;top:11px}.resistor-body i{width:11px}.catalog-grid{grid-template-columns:1fr}.catalog-specs{grid-template-columns:1fr 1fr}.catalog-filters{display:grid;grid-template-columns:repeat(3,1fr)}.catalog-filters button{padding-inline:6px}.safety-panel{align-items:start}.component-section-head h2,.identifier-card h2{font-size:27px}}