.converter-container{max-width:1200px;margin:0 auto;padding:0 10px}.converter-card{background:var(--surf, #ffffff);backdrop-filter:blur(10px);border-radius:32px;box-shadow:var(--sh-md, 0 8px 32px rgba(0,0,0,.1));border:1px solid var(--brd, #e9eef3);overflow:hidden}.converter-header{background:linear-gradient(135deg,#2c7be5,#0ea5e9);padding:26px 24px;color:#fff;display:flex;justify-content:center;align-items:center;gap:12px;text-align:center}.converter-header i{font-size:1.6rem;opacity:.9}.converter-header h1{font-size:clamp(1.2rem,4vw,1.55rem);font-weight:800;margin:0;line-height:1.3}.converter-tabs{display:flex;flex-wrap:wrap;background:var(--nav-soft, #f8fafc);border-bottom:1px solid var(--brd, #e9eef3);padding:8px 8px 0;gap:4px}.tab-btn{background:#00000005;border:1px solid var(--brd, #e9eef3);border-bottom:none;padding:12px 20px;font-family:inherit;font-size:.9rem;font-weight:700;color:var(--txt-2, #64748b);cursor:pointer;border-radius:12px 12px 0 0;transition:all .2s ease;display:flex;align-items:center;gap:8px;margin-bottom:-1px}.tab-btn:hover{color:var(--c-primary, #2c7be5);background:#2c7be50f;border-color:var(--c-primary, #2c7be5)}.tab-btn.active{color:var(--c-primary, #2c7be5);background:var(--surf, #ffffff);border:1px solid var(--brd, #e9eef3);border-bottom:1px solid var(--surf, #ffffff);margin-bottom:-1px}.tab-panel{display:none;padding:30px 24px}.tab-panel.active{display:block}.converter-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:24px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:.88rem;font-weight:700;color:var(--txt, #0f172a)}.form-input,.form-select{padding:12px 16px;border-radius:12px;border:1px solid var(--brd, #e9eef3);background:var(--surf, #ffffff);color:var(--txt, #0f172a);font-family:inherit;font-size:.95rem;outline:none;transition:border-color .2s ease;width:100%;box-sizing:border-box}.form-input:focus,.form-select:focus{border-color:var(--c-primary, #2c7be5)}.result-card{background:#2c7be50f;border:1px dashed var(--c-primary, #2c7be5);border-radius:20px;padding:20px 24px;text-align:center;box-sizing:border-box}.result-card h3{margin:0 0 8px;font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-primary, #2c7be5)}.result-value{font-size:1.8rem;font-weight:800;color:var(--txt, #0f172a);word-break:break-all}.converter-info-section{width:100%;margin:30px 0 0;padding:0}.converter-info-panel{background:var(--surf,#fff);border:1px solid var(--brd,#e9eef3);border-radius:18px;padding:24px;margin-bottom:18px}.converter-info-panel h2{display:flex;align-items:center;gap:8px;font-size:1.15rem;font-weight:700;margin-bottom:16px;color:var(--c-primary,#2c7be5)}.converter-info-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.info-card{background:var(--nav-soft, #f8fafc);border:1px solid var(--brd, #e9eef3);border-radius:14px;padding:16px 20px}.info-card h3{margin:0 0 10px;font-size:1rem;font-weight:700;color:var(--txt, #0f172a);display:flex;align-items:center;gap:8px}.info-card p{margin:0;font-size:.88rem;line-height:1.6;color:var(--txt-2, #64748b);white-space:pre-line}[data-theme=dark] .converter-card{background:var(--surf, #111f3a);border-color:var(--brd, rgba(255,255,255,.07))}[data-theme=dark] .converter-header{background:linear-gradient(135deg,#1e3a5f,#0c2d4a)}[data-theme=dark] .converter-tabs{background:#0003;border-bottom-color:#ffffff12}[data-theme=dark] .tab-btn{background:#ffffff05;border-color:#ffffff12}[data-theme=dark] .tab-btn:hover{background:#2c7be51a;border-color:var(--c-primary, #2c7be5)}[data-theme=dark] .tab-btn.active{background:var(--surf, #111f3a);border-color:#ffffff12;border-bottom-color:var(--surf, #111f3a)}[data-theme=dark] .form-input,[data-theme=dark] .form-select{background:#0003;border-color:#ffffff1a}[data-theme=dark] .result-card{background:#2c7be51f}[data-theme=dark] .result-value{color:#fff}[data-theme=dark] .converter-info-panel{background:var(--surf,#111f3a);border-color:#ffffff12}[data-theme=dark] .info-card{background:#00000026;border-color:#ffffff0d}[data-theme=dark] .info-card h3{color:#fff}html[dir=rtl] .tab-btn{border-radius:12px 12px 0 0}html[dir=rtl] .tab-btn.active{border-bottom-color:var(--surf)}