:root{--carbon-black:#f5f5f0;--carbon-dark:#eeeee8;--carbon-mid:#e4e4de;--carbon-light:#d8d8d2;--electric-blue:#09c;--electric-blue-glow:#09c3;--electric-cyan:#0088b3;--thermal-orange:#e05a2b;--thermal-orange-glow:#e05a2b33;--chrome-silver:#5a5a68;--chrome-bright:#1a1a2e;--chrome-dim:#5c5c72;--success-green:#00a854;--warning-amber:#e09500;--danger-red:#d43030;--error-red:#d43030;--eco-green:#00a854;--gradient-dark:linear-gradient(180deg, var(--carbon-dark) 0%, var(--carbon-black) 100%);--gradient-card:linear-gradient(145deg, #fff 0%, var(--carbon-dark) 100%);--gradient-electric:linear-gradient(135deg, var(--electric-blue) 0%, var(--electric-cyan) 100%);--gradient-thermal:linear-gradient(135deg, var(--thermal-orange) 0%, #e87a55 100%);--gradient-hybrid:linear-gradient(135deg, var(--warning-amber) 0%, #d4a017 100%);--gradient-chrome:linear-gradient(145deg, var(--chrome-bright) 0%, var(--chrome-silver) 100%);--glass-bg:#ffffffbf;--glass-border:#0000001a;--glass-blur:blur(20px);--font-primary:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";--font-mono:ui-monospace, "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;--radius-full:50%;--shadow-sm:0 2px 8px #00000014;--shadow-md:0 8px 24px #0000001a;--shadow-lg:0 16px 48px #0000001f;--shadow-glow-blue:0 0 30px var(--electric-blue-glow);--shadow-glow-orange:0 0 30px var(--thermal-orange-glow);--transition-fast:.15s ease;--transition-normal:.25s ease;--transition-slow:.4s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:17px}body{font-family:var(--font-primary);background:var(--carbon-black);color:var(--chrome-bright);-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;font-variant-numeric:proportional-nums;font-kerning:normal;min-height:100vh;line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;font-weight:600;line-height:1.2}h1{margin-top:0;font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}.container{max-width:1800px;padding:0 var(--spacing-lg);margin:0 auto}.app{flex-direction:column;min-height:100vh;display:flex}.main{padding:var(--spacing-xs) 0 var(--spacing-2xl) 0;flex:1}.header{padding:var(--spacing-xs) 0;border-bottom:1px solid var(--glass-border);background:#fff;position:relative;box-shadow:0 1px 4px #0000000f}.header-content{justify-content:space-between;align-items:center;display:flex}.logo{align-items:center;gap:var(--spacing-md);display:flex}.logo-img{width:auto;height:50px}.logo-icon{background:var(--gradient-electric);border-radius:var(--radius-md);width:48px;height:48px;box-shadow:var(--shadow-glow-blue);justify-content:center;align-items:center;font-size:1.5rem;display:flex}.logo-text{background:var(--gradient-chrome);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.5rem;font-weight:700}.card{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-xl);transition:all var(--transition-normal)}.card:hover{border-color:#00000026;transform:translateY(-2px)}.card-title{margin-bottom:var(--spacing-sm);align-items:center;gap:var(--spacing-sm);font-size:1.125rem;font-weight:600;display:flex}.btn{justify-content:center;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-xl);font-size:1rem;font-weight:600;font-family:var(--font-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);border:none;display:inline-flex}.btn-primary{background:var(--gradient-electric);color:#fff;box-shadow:var(--shadow-glow-blue)}.btn-primary:hover{box-shadow:0 0 30px var(--electric-blue-glow);transform:translateY(-2px)}.btn-secondary{background:var(--carbon-light);color:var(--chrome-bright);border:1px solid var(--glass-border)}.btn-secondary:hover{background:var(--carbon-mid);border-color:var(--chrome-dim)}.btn-large{padding:var(--spacing-lg) var(--spacing-2xl);border-radius:var(--radius-lg);font-size:1.125rem}.grid-2{gap:var(--spacing-xl);grid-template-columns:repeat(2,1fr);display:grid}.grid-3{gap:var(--spacing-lg);grid-template-columns:repeat(3,1fr);display:grid}.grid-4{gap:var(--spacing-lg);grid-template-columns:repeat(4,1fr);display:grid}.vf-type-btn{background:var(--carbon-dark);border-radius:var(--radius-md);color:var(--chrome-dim);cursor:pointer;border:none;flex:1;padding:.6rem 1rem;font-weight:500;transition:all .2s}.vf-type-btn.active{color:#fff;font-weight:600}.vf-radio-card{background:var(--carbon-dark);border:2px solid var(--glass-border);border-radius:var(--radius-md);cursor:pointer;text-align:center;flex-direction:row;justify-content:center;align-items:center;gap:.35rem;padding:.4rem .25rem;transition:all .2s;display:flex}.vf-radio-card input[type=radio]{display:none}.vf-radio-card-label{color:var(--chrome-dim);font-size:.7rem;font-weight:400}.vf-radio-card.active .vf-radio-card-label{font-weight:700}.vf-toggle-btn{background:var(--carbon-dark);border-radius:var(--radius-md);color:var(--chrome-dim);cursor:pointer;border:none;flex:1;padding:.6rem 1rem;font-weight:500;transition:all .2s}.vf-toggle-btn.active{color:#fff}.vf-toggle-btn:hover{transform:translateY(-1px)}.vf-grid-co2{gap:var(--spacing-md);grid-template-columns:1fr 2fr;display:grid}.vf-radio-grid-4{grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.5rem;display:grid}.vf-radio-grid-2{grid-template-columns:repeat(2,1fr);gap:.5rem;margin-top:.5rem;display:grid}.vf-label-sm{font-size:.7rem}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000;opacity:0;background:#00000040;justify-content:center;align-items:center;animation:.3s forwards fadeIn;display:flex;position:fixed;inset:0}.modal-content{border:1px solid var(--glass-border);border-radius:var(--radius-lg);width:95%;max-width:1000px;max-height:90vh;box-shadow:var(--shadow-lg);opacity:0;background:#fff;animation:.3s .1s forwards slideUpFade;overflow-y:auto;transform:translateY(20px)}.modal-header{padding:var(--spacing-lg);border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;display:flex}.modal-title{color:var(--chrome-bright);font-size:1.25rem;font-weight:600}.modal-close{color:var(--chrome-dim);cursor:pointer;padding:var(--spacing-xs);transition:color var(--transition-fast);background:0 0;border:none;font-size:1.5rem;line-height:1}.modal-close:hover{color:var(--chrome-bright)}.modal-body{padding:var(--spacing-lg);color:var(--chrome-dim);line-height:1.6}.modal-apply-btn{width:100%;font-size:1rem;font-weight:600;font-family:var(--font-primary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-normal);border:none;justify-content:center;align-items:center;gap:.5rem;margin-top:1.5rem;padding:.875rem 1.5rem;display:inline-flex}.modal-apply-btn:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 4px 20px #0000004d}.modal-apply-btn:active{transform:translateY(0)}.modal-close-btn{width:100%;font-size:.9rem;font-weight:500;font-family:var(--font-primary);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--chrome-dim);cursor:pointer;transition:all var(--transition-normal);background:0 0;justify-content:center;align-items:center;margin-top:.5rem;padding:.75rem 1.5rem;display:inline-flex}.modal-close-btn:hover{background:var(--carbon-light);color:var(--chrome-bright);border-color:var(--chrome-dim)}@keyframes fadeIn{to{opacity:1}}@keyframes slideUpFade{to{opacity:1;transform:translateY(0)}}@media (max-width:1024px){.grid-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}h1{font-size:1.75rem}.container{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm);max-width:100%}.card{padding:var(--spacing-sm);word-wrap:break-word;max-width:100%;overflow:hidden visible}}@media (max-width:480px){:root{--spacing-xl:1rem;--spacing-2xl:1.5rem;--spacing-lg:.75rem}h1{font-size:1.3rem}.logo-text{font-size:1rem}.card{padding:var(--spacing-xs);border-radius:var(--radius-md)}}
