:root{--primary:#007BFF;--primary-dark:#0056b3;--primary-light:#93c5fd;--secondary:#6366f1;--neutral-50:#f8fafc;--neutral-100:#f1f5f9;--neutral-200:#e2e8f0;--neutral-300:#cbd5e1;--neutral-400:#94a3b8;--neutral-500:#64748b;--neutral-600:#475569;--neutral-700:#334155;--neutral-800:#1e293b;--neutral-900:#0f172a;--success:#10b981;--success-light:#dcfce7;--error:#ef4444;--error-light:#fee2e2;--warning:#f59e0b;--warning-light:#fef3c7;--info:#0ea5e9;--info-light:#dbeafe;--font-sans:'Inter',system-ui,-apple-system,sans-serif;--font-mono:'JetBrains Mono',monospace;--base-font-size:16px;--line-height:1.5;--line-height-tight:1.25;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-7:1.75rem;--spacing-8:2rem;--spacing-9:2.25rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--border-radius-sm:0.375rem;--border-radius:0.5rem;--border-radius-lg:0.75rem;--border-radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);--shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);--transition-fast:150ms cubic-bezier(0.4,0,0.2,1);--transition-normal:200ms cubic-bezier(0.4,0,0.2,1);--transition-slow:300ms cubic-bezier(0.4,0,0.2,1);}*{margin:0;padding:0;box-sizing:border-box;}html{font-size:var(--base-font-size);scroll-behavior:smooth;}body{font-family:var(--font-sans);font-size:1rem;line-height:var(--line-height);color:var(--neutral-800);background-color:var(--neutral-50);min-height:100vh;}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-4);}.header{background-color:transparent;position:fixed;top:0;left:0;right:0;z-index:100;transition:background-color var(--transition-normal),box-shadow var(--transition-normal),padding var(--transition-normal);padding:var(--spacing-4) 0;}.header.scrolled{background-color:rgba(255,255,255,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);border-bottom:1px solid rgba(255,255,255,0.1);padding:var(--spacing-3) 0;}.header-content{display:flex;justify-content:space-between;align-items:center;width:100%;}.logo a{text-decoration:none;color:var(--neutral-900);font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;display:flex;align-items:center;gap:var(--spacing-2);transition:color var(--transition-normal);text-shadow:0 1px 2px rgba(255,255,255,0.5);}.header.scrolled .logo a{color:var(--neutral-800);text-shadow:none;}.logo a:hover{color:var(--primary);}.logo-icon{font-size:1.5em;color:var(--primary);transition:transform var(--transition-normal);}.logo a:hover .logo-icon{transform:scale(1.1);}.language-switcher{white-space:nowrap;}.language-switcher select{padding:var(--spacing-2) var(--spacing-10) var(--spacing-2) var(--spacing-3);min-height:2.5rem;border:1px solid rgba(100,116,139,0.25);border-radius:var(--border-radius);background-color:rgba(255,255,255,0.85);color:var(--neutral-800);font-size:0.875rem;font-family:var(--font-sans);cursor:pointer;appearance:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:all var(--transition-normal);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-3) center;background-size:1rem;padding-right:var(--spacing-10);}.header.scrolled .language-switcher select{border-color:var(--neutral-300);}.language-switcher select:hover{border-color:var(--neutral-400);}.language-switcher select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,0.2);}.main-content{min-height:calc(100vh - 180px);padding:var(--spacing-16) 0;padding-top:calc(var(--spacing-16) + 20px);}.hero-section{text-align:center;padding:var(--spacing-20) var(--spacing-4);background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);color:white;margin-bottom:var(--spacing-16);border-radius:var(--border-radius-lg);position:relative;overflow:hidden;box-shadow:var(--shadow-md);}.hero-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(circle at 25% 25%,rgba(255,255,255,0.1) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(255,255,255,0.1) 0%,transparent 50%);}.hero-title{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:var(--spacing-4);font-weight:800;line-height:var(--line-height-tight);position:relative;}.hero-subtitle{font-size:clamp(1rem,2vw,1.25rem);opacity:0.9;max-width:600px;margin:0 auto;position:relative;}.section-title{font-size:clamp(1.5rem,3vw,2.25rem);margin-bottom:var(--spacing-8);text-align:center;color:var(--neutral-900);font-weight:700;position:relative;padding-bottom:var(--spacing-3);}.section-title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:48px;height:3px;background:var(--primary);border-radius:3px;}.categories-grid{margin-bottom:var(--spacing-20);}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-6);}.category-card{background:white;border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--transition-normal),box-shadow var(--transition-normal);border:1px solid var(--neutral-200);}.category-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--neutral-300);}.category-link{display:block;padding:var(--spacing-6);text-decoration:none;color:inherit;height:100%;}.category-icon{font-size:2.5rem;margin-bottom:var(--spacing-4);color:var(--primary);transition:color var(--transition-normal);}.category-card:hover .category-icon{color:var(--primary-dark);}.category-title{font-size:1.25rem;margin-bottom:var(--spacing-3);color:var(--neutral-900);font-weight:600;}.category-description{color:var(--neutral-600);margin-bottom:var(--spacing-4);line-height:var(--line-height);}.category-units{display:flex;flex-wrap:wrap;gap:var(--spacing-2);}.unit-tag{background:var(--neutral-100);color:var(--neutral-700);padding:var(--spacing-1) var(--spacing-3);border-radius:var(--border-radius-full);font-size:0.875rem;transition:all var(--transition-fast);border:1px solid var(--neutral-200);}.category-card:hover .unit-tag{background:var(--primary-light);color:var(--neutral-900);border-color:var(--primary);}.unit-tag.more{background:var(--info-light);color:var(--neutral-800);border-color:var(--info);}.category-card:hover .unit-tag.more{background:var(--info);color:white;}.features-section{background:white;padding:var(--spacing-16) var(--spacing-4);border-radius:var(--border-radius);margin-bottom:var(--spacing-16);box-shadow:var(--shadow);position:relative;overflow:hidden;border:1px solid var(--neutral-200);}.features-section::before{content:'';position:absolute;top:0;right:0;width:300px;height:300px;background:rgba(59,130,246,0.03);border-radius:50%;transform:translate(50%,-50%);z-index:0;}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-6);position:relative;z-index:1;}.feature-item{text-align:center;padding:var(--spacing-6);border-radius:var(--border-radius);transition:background-color var(--transition-normal);}.feature-item:hover{background-color:var(--neutral-50);}.feature-icon{font-size:2rem;margin-bottom:var(--spacing-3);color:var(--primary);height:50px;display:flex;align-items:center;justify-content:center;}.feature-item h3{font-size:1.125rem;margin-bottom:var(--spacing-3);color:var(--neutral-900);font-weight:600;}.feature-item p{color:var(--neutral-600);line-height:var(--line-height);}.converter-header{text-align:center;margin-bottom:var(--spacing-10);}.page-title{font-size:clamp(1.75rem,4vw,2.5rem);margin-bottom:var(--spacing-4);color:var(--neutral-900);font-weight:700;line-height:var(--line-height-tight);}.page-description{font-size:1.125rem;color:var(--neutral-600);max-width:600px;margin:0 auto;}.converter-section{background:white;padding:var(--spacing-8);border-radius:var(--border-radius);box-shadow:var(--shadow);margin-bottom:var(--spacing-10);transition:box-shadow var(--transition-normal);position:relative;border:1px solid var(--neutral-200);}.converter-section::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px 3px 0 0;}.converter-section:hover{box-shadow:var(--shadow-md);}.conversion-form{max-width:800px;margin:0 auto;}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-4);align-items:end;}@media (min-width:768px){.form-row{grid-template-columns:2fr 2fr 2fr 1fr;}}.form-group{display:flex;flex-direction:column;position:relative;}.form-group label{margin-bottom:var(--spacing-2);font-weight:500;color:var(--neutral-700);font-size:0.875rem;}.form-group input,.form-group select{padding:var(--spacing-3);border:1px solid var(--neutral-300);border-radius:var(--border-radius-sm);font-size:1rem;font-family:var(--font-sans);transition:all var(--transition-normal);}.form-group input:focus,.form-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,0.2);}.convert-btn{background:var(--primary-dark);color:white;border:none;padding:var(--spacing-3) var(--spacing-6);border-radius:var(--border-radius-sm);font-size:1rem;font-weight:500;font-family:var(--font-sans);cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;gap:var(--spacing-2);}.convert-btn:hover{background:var(--primary);transform:translateY(-1px);box-shadow:0 4px 6px -1px rgba(59,130,246,0.2);}.convert-btn:active{transform:translateY(0);}.conversion-result{margin-top:var(--spacing-6);padding:var(--spacing-6);background:var(--info-light);border-radius:var(--border-radius);text-align:center;border:1px solid var(--info);transition:all var(--transition-normal);transform-origin:top;animation:fadeIn 0.3s ease forwards;}@keyframes fadeIn{from{opacity:0;transform:scale(0.98);}to{opacity:1;transform:scale(1);}}.conversion-result h3{margin-bottom:var(--spacing-3);color:var(--neutral-800);font-weight:600;font-size:1.125rem;}.result-display{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;color:var(--primary-dark);}.recent-conversions{background:white;padding:var(--spacing-6);border-radius:var(--border-radius);box-shadow:var(--shadow);border:1px solid var(--neutral-200);}.conversions-list{display:grid;gap:var(--spacing-3);}.conversion-item{border:1px solid var(--neutral-200);border-radius:var(--border-radius-sm);overflow:hidden;transition:all var(--transition-normal);}.conversion-item:hover{border-color:var(--primary);background-color:var(--neutral-50);box-shadow:var(--shadow-sm);}.conversion-link{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-4);text-decoration:none;color:inherit;transition:background-color var(--transition-normal);}.conversion-text{font-weight:500;display:flex;align-items:center;gap:var(--spacing-2);color:var(--neutral-800);}.conversion-text .icon{color:var(--primary);opacity:0;transition:opacity var(--transition-normal);}.conversion-item:hover .conversion-text .icon{opacity:1;}.conversion-date{font-size:0.875rem;color:var(--neutral-500);white-space:nowrap;}.conversion-history-header{margin-bottom:var(--spacing-8);}.breadcrumb{margin-bottom:var(--spacing-4);font-size:0.875rem;display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-2);padding:var(--spacing-2) 0;line-height:1.4;}.breadcrumb .separator{margin:0;color:var(--neutral-400);font-size:0.75rem;flex-shrink:0;align-self:center;}.breadcrumb a,.breadcrumb .current{display:inline-block;white-space:nowrap;transition:color var(--transition-normal);}.breadcrumb a{color:var(--neutral-600);text-decoration:none;}.breadcrumb a:hover{color:var(--primary-dark);text-decoration:underline;text-underline-offset:2px;}.breadcrumb .current{color:var(--neutral-500);}@media (max-width:768px){.breadcrumb{font-size:0.8125rem;gap:var(--spacing-1);}.breadcrumb a:first-child{max-width:50%;overflow:hidden;text-overflow:ellipsis;}}@media (max-width:360px){.breadcrumb{font-size:0.75rem;}.breadcrumb a:first-child{max-width:40%;}}.conversion-details{margin-bottom:var(--spacing-16);padding:0 var(--spacing-2);}.conversion-card{background:white;padding:var(--spacing-8);border-radius:var(--border-radius);box-shadow:var(--shadow);text-align:center;position:relative;overflow:hidden;border:1px solid var(--neutral-200);}.conversion-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px 3px 0 0;}.conversion-main{display:flex;align-items:center;justify-content:center;gap:var(--spacing-6);margin-bottom:var(--spacing-8);flex-wrap:wrap;}.conversion-from,.conversion-to{display:flex;flex-direction:column;align-items:center;min-width:120px;padding:0 var(--spacing-2);}.conversion-from .value,.conversion-to .value{font-size:clamp(1.8rem,8vw,3rem);font-weight:700;color:var(--primary-dark);line-height:var(--line-height-tight);margin-bottom:var(--spacing-2);}.conversion-from .unit,.conversion-to .unit{font-size:clamp(1rem,3vw,1.25rem);color:var(--neutral-600);margin-top:var(--spacing-2);background:var(--neutral-100);padding:var(--spacing-2) var(--spacing-4);border-radius:var(--border-radius-full);white-space:nowrap;border:1px solid var(--neutral-200);}.conversion-arrow{font-size:clamp(1.5rem,5vw,2rem);color:var(--primary);opacity:0.8;animation:bounce 2s infinite;padding:var(--spacing-2);}.conversion-info{border-top:1px solid var(--neutral-200);padding-top:var(--spacing-6);max-width:100%;margin:0 auto;}.conversion-description{font-size:clamp(1rem,3vw,1.125rem);margin-bottom:var(--spacing-4);color:var(--neutral-800);line-height:1.6;padding:0 var(--spacing-2);word-wrap:break-word;}.conversion-date{color:var(--neutral-500);font-size:0.875rem;padding:0 var(--spacing-2);}@media (max-width:768px){.conversion-card{padding:var(--spacing-6) var(--spacing-4);}.conversion-main{flex-direction:column;gap:var(--spacing-4);}.conversion-arrow{transform:rotate(90deg);margin:var(--spacing-1) 0;animation:bounceVertical 2s infinite;}.conversion-description{font-size:0.95rem;}}@media (max-width:360px){.conversion-card{padding:var(--spacing-4);}.conversion-from .value,.conversion-to .value{font-size:1.8rem;}.conversion-description{font-size:0.9rem;}}@keyframes bounceVertical{0%,20%,50%,80%,100%{transform:rotate(90deg) translateY(0);}40%{transform:rotate(90deg) translateY(-8px);}60%{transform:rotate(90deg) translateY(-4px);}}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0);}40%{transform:translateY(-10px);}60%{transform:translateY(-5px);}}.quick-converter{background:white;padding:var(--spacing-6);border-radius:var(--border-radius);box-shadow:var(--shadow);margin-bottom:var(--spacing-16);border:1px solid var(--neutral-200);}.inline-converter{max-width:800px;margin:0 auto;}.converter-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-3);align-items:center;}@media (min-width:768px){.converter-row{grid-template-columns:2fr 2fr auto 2fr 1fr;}}.to-text{font-weight:500;color:var(--neutral-500);text-align:center;}.related-conversions{background:white;padding:var(--spacing-6);border-radius:var(--border-radius);box-shadow:var(--shadow);border:1px solid var(--neutral-200);}.conversions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--spacing-4);}.conversion-card-small{border:1px solid var(--neutral-200);border-radius:var(--border-radius-sm);overflow:hidden;transition:all var(--transition-normal);}.conversion-card-small:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow);}.conversion-card-small .conversion-link{display:block;padding:var(--spacing-4);text-decoration:none;color:inherit;}.conversion-summary{font-weight:500;margin-bottom:var(--spacing-2);display:flex;align-items:center;color:var(--neutral-800);}.conversion-summary .arrow{color:var(--primary);margin:0 var(--spacing-2);font-size:0.875rem;}.conversion-date-small{font-size:0.875rem;color:var(--neutral-500);}.footer{background:var(--neutral-900);color:var(--neutral-400);padding:var(--spacing-16) 0 var(--spacing-8);margin-top:var(--spacing-20);position:relative;}.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary));}.footer-content{display:grid;grid-template-columns:1fr;gap:var(--spacing-10);}@media (min-width:768px){.footer-content{grid-template-columns:1fr 2fr;}}.footer-info{display:flex;flex-direction:column;gap:var(--spacing-4);}.footer-logo{font-size:1.5rem;font-weight:700;color:white;margin-bottom:var(--spacing-4);display:flex;align-items:center;gap:var(--spacing-2);}.footer-logo .icon{font-size:1.2em;color:var(--primary);}.footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-8);}.footer-links h3{margin-bottom:var(--spacing-4);color:white;font-size:1rem;font-weight:600;position:relative;padding-bottom:var(--spacing-2);}.footer-links h3::after{content:'';position:absolute;bottom:0;left:0;width:24px;height:2px;background:var(--primary);border-radius:2px;}.footer-links ul{list-style:none;}.footer-links ul li{margin-bottom:var(--spacing-3);}.footer-links ul li a{color:var(--neutral-400);text-decoration:none;transition:all var(--transition-normal);display:flex;align-items:center;gap:var(--spacing-2);}.footer-links ul li a:hover{color:var(--primary);padding-left:var(--spacing-1);}.footer-bottom{margin-top:var(--spacing-12);padding-top:var(--spacing-6);border-top:1px solid var(--neutral-800);text-align:center;font-size:0.875rem;color:var(--neutral-500);}@media (max-width:768px){.hero-title{font-size:2.5rem;}.header-content{flex-direction:row;gap:var(--spacing-2);}.logo{margin-right:auto;flex-shrink:0;}.language-switcher{margin-left:auto;flex-shrink:0;}.language-switcher select{padding:var(--spacing-2) var(--spacing-3);font-size:0.85rem;}.features-section{padding:var(--spacing-8) var(--spacing-4);}.converter-section{padding:var(--spacing-6) var(--spacing-4);}}@media (max-width:480px){.container{padding:0 var(--spacing-3);}.hero-section{padding:var(--spacing-16) var(--spacing-3);}.grid{gap:var(--spacing-4);}.category-link{padding:var(--spacing-4);}.category-icon{font-size:2rem;}.section-title{font-size:1.5rem;padding-bottom:var(--spacing-2);}}.loading{display:inline-block;width:20px;height:20px;border:2px solid rgba(255,255,255,0.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite;}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.message{padding:var(--spacing-4);border-radius:var(--border-radius-sm);margin-bottom:var(--spacing-4);transition:all var(--transition-normal);animation:slideIn 0.2s ease forwards;border:1px solid transparent;}@keyframes slideIn{from{transform:translateY(-10px);opacity:0;}to{transform:translateY(0);opacity:1;}}.message.success{background:var(--success-light);color:#059669;border-color:var(--success);}.message.error{background:var(--error-light);color:#dc2626;border-color:var(--error);}.message.warning{background:var(--warning-light);color:#d97706;border-color:var(--warning);}.message.info{background:var(--info-light);color:#0284c7;border-color:var(--info);}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}@media print{.header,.footer,.language-switcher{display:none;}.main-content{padding:0;}.conversion-card{box-shadow:none;border:1px solid #ddd;}}@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}