*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
.model-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:1.5rem;}
.model-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;text-decoration:none;transition:border-color 0.15s,transform 0.1s;}
.model-card:hover{border-color:var(--border-hover);transform:translateY(-1px);text-decoration:none;}
.model-card-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;}
.model-card-years{font-size:12px;color:var(--text3);}
:root{--bg:#0f0f13;--bg2:#1a1a24;--bg3:#22222f;--border:rgba(255,255,255,0.08);--text:#f0f0f0;--text2:#9999aa;--text3:#55556a;--accent:#378ADD;--radius:8px;--radius-lg:12px;--mono:'Courier New',Courier,monospace;--border-hover:rgba(255,255,255,0.18);--accent-dim:rgba(55,138,221,0.12);--green:#1D9E75;--orange:#E07B39;}
[data-theme="light"]{--bg:#f5f5f7;--bg2:#ffffff;--bg3:#eef0f3;--border:rgba(0,0,0,0.1);--border-hover:rgba(0,0,0,0.2);--text:#13131a;--text2:#3f3f4a;--text3:#6b6b78;--accent:#2173c4;--accent-dim:rgba(33,115,196,0.1);--green:#157a56;--orange:#c2620a;}
[data-theme="light"] .logo-text,[data-theme="light"] .nav-link,[data-theme="light"] .mobile-menu-link{color:#13131a;}
[data-theme="light"] .nav-link:hover,[data-theme="light"] .mobile-menu-link:hover{color:#13131a;}
[data-theme="light"] .hamburger span{background:#13131a;}
[data-theme="light"] .swatch-label{text-shadow:0 1px 3px rgba(255,255,255,0.6);}
[data-theme="light"] .picker-cursor{box-shadow:0 0 0 1px rgba(255,255,255,0.6);}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
h1{font-size:28px;font-weight:600;color:var(--text);letter-spacing:-0.5px;margin-bottom:6px;}
h2{font-size:17px;font-weight:600;color:var(--text);margin:1.75rem 0 0.75rem;}
p{font-size:15px;color:var(--text2);line-height:1.8;margin-bottom:1rem;}
ul{font-size:15px;color:var(--text2);line-height:1.8;margin-bottom:1rem;padding-left:1.5rem;}
ul li{margin-bottom:0.4rem;}
header{background:var(--bg2);border-bottom:0.5px solid var(--border);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:0;z-index:10;}
footer{background:var(--bg2);border-top:0.5px solid var(--border);padding:1.5rem;text-align:center;}
main{flex:1;max-width:860px;width:100%;margin:0 auto;padding:2rem 1.5rem;}
#flake-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;border-radius:var(--radius-lg);}
.about-body{font-size:14px;color:var(--text2);line-height:1.8;}
.about-body p{margin-bottom:12px;}
.about-body p:last-child{margin-bottom:0;}
.about-section{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;opacity:0.85;}
.about-title{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:14px;}
.actions{display:flex;gap:8px;margin-bottom:12px;}
.ad-section{text-align:center;padding:1.5rem 0;border-top:0.5px solid var(--border);margin-bottom:1.5rem;min-height:100px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:12px;}
.affiliate-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.affiliate-link{display:flex;flex-direction:column;gap:3px;padding:10px 12px;background:var(--bg3);border:0.5px solid var(--border);border-radius:var(--radius);color:var(--text2);font-size:13px;text-decoration:none;transition:all 0.15s;line-height:1.4;}
.affiliate-link-sub{font-size:11px;color:var(--text3);}
.affiliate-link:hover{border-color:var(--border-hover);color:var(--text);text-decoration:none;}
.affiliate-section{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-top:1.5rem;margin-bottom:12px;}
.affiliate-section.active{display:block;}
.affiliate-title{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:12px;}
.bmc-btn{display:flex;align-items:center;gap:7px;padding:7px 14px;background:var(--bg3);border:0.5px solid var(--border);border-radius:var(--radius);color:var(--text2);font-size:13px;text-decoration:none;transition:all 0.15s;white-space:nowrap;}
.bmc-btn:hover{border-color:var(--border-hover);color:var(--text);text-decoration:none;}
.breadcrumb{font-size:13px;color:var(--text3);margin-bottom:1rem;}
.breadcrumb a{color:var(--text3);}
.breadcrumb a:hover{color:var(--text2);}
.bridge-arrow{font-size:22px;color:var(--text3);}
.bridge-banner{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}
.bridge-game{text-align:center;}
.bridge-game-format{font-size:11px;color:var(--text3);font-family:var(--mono);}
.bridge-game-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:3px;}
.btn-buy{flex:1;padding:11px;font-size:14px;font-weight:700;border-radius:var(--radius);border:none;background:#E8600A;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity 0.15s;cursor:pointer;}
.btn-buy:hover{opacity:0.88;text-decoration:none;color:#fff;}
.btn-close{padding:11px 14px;font-size:13px;border-radius:var(--radius);border:0.5px solid var(--border);background:none;color:var(--text3);cursor:pointer;transition:all 0.15s;}
.btn-close:hover{color:var(--text);border-color:var(--border-hover);}
.btn-convert{flex:1;padding:11px;font-size:14px;font-weight:600;border-radius:var(--radius);border:none;background:var(--accent);color:#fff;cursor:pointer;transition:opacity 0.15s;}
.btn-convert-1,.btn-convert-2{width:100%;margin:10px 0 0;padding:11px;font-size:13px;font-weight:600;border-radius:var(--radius);border:none;background:var(--accent);color:#fff;cursor:pointer;transition:opacity 0.15s;display:block;box-sizing:border-box;}
.btn-convert-1:hover,.btn-convert-2:hover{opacity:0.85;}
.btn-convert:hover{opacity:0.85;}
.btn-converter{flex:1;padding:11px;font-size:14px;font-weight:600;border-radius:var(--radius);border:none;background:var(--accent);color:#fff;cursor:pointer;transition:opacity 0.15s;}
.btn-converter:hover{opacity:0.85;}
.btn-forza{flex:1;padding:11px;font-size:14px;font-weight:600;border-radius:var(--radius);border:none;background:var(--accent);color:#fff;cursor:pointer;transition:opacity 0.15s;}
.btn-forza:hover{opacity:0.85;}
.btn-reset{padding:10px 14px;font-size:13px;border-radius:var(--radius);border:0.5px solid var(--border);background:none;color:var(--text3);cursor:pointer;transition:all 0.15s;min-height:46px;}
.btn-reset:hover{color:var(--text);border-color:var(--border-hover);}
.btn-save{flex:1;padding:10px;font-size:14px;font-weight:500;border-radius:var(--radius);border:0.5px solid var(--border);background:var(--bg2);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.15s;min-height:46px;}
.btn-save:hover{background:var(--bg3);border-color:var(--border-hover);}
.build-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;background:var(--accent);border:none;border-radius:var(--radius-lg);color:#fff;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;transition:opacity 0.15s;margin-bottom:2rem;}
.build-btn:hover{opacity:0.85;text-decoration:none;color:#fff;}
.card-body{padding:11px 12px;}
.card-code{font-size:10px;color:var(--text3);font-family:var(--mono);margin-bottom:2px;}
.card-hex{font-size:11px;color:var(--text2);font-family:var(--mono);}
.card-hsb{font-size:10px;color:var(--text3);font-family:var(--mono);margin-top:3px;}
.card-make{font-size:10px;color:var(--text3);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:2px;}
.card-meta{display:flex;align-items:center;justify-content:space-between;}
.card-name{font-size:13px;font-weight:500;color:var(--text);margin-bottom:5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-swatch{height:68px;width:100%;position:relative;}
.card-swatch-2{position:absolute;right:0;top:0;width:40%;height:100%;opacity:0.85;}
.card-type{font-size:10px;color:var(--text3);padding:2px 6px;border:0.5px solid var(--border);border-radius:4px;white-space:nowrap;}
.cc-copy{background:none;border:none;cursor:pointer;color:var(--text3);font-size:12px;padding:1px 3px;flex-shrink:0;}
.cc-copy.ok{color:var(--green);}
.cc-copy:hover{color:var(--text);}
.chip{width:42px;height:42px;border-radius:var(--radius);border:0.5px solid var(--border);cursor:pointer;position:relative;flex-shrink:0;transition:transform 0.1s;}
.chip .rm{position:absolute;top:-5px;right:-5px;background:var(--bg2);border:0.5px solid var(--border);border-radius:50%;width:15px;height:15px;font-size:9px;display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);}
.chip:hover{transform:scale(1.08);}
.chip:hover .rm{display:flex;}
.color-card{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:border-color 0.15s,transform 0.1s;}
.color-card-body{padding:16px;}
.color-card-hex{font-size:22px;font-weight:600;font-family:var(--mono);color:var(--text);margin-bottom:14px;}
.color-card-name{font-size:13px;color:var(--text3);font-style:italic;margin-bottom:4px;}
.color-card-swatch{height:120px;width:100%;}
.color-card:hover{border-color:var(--border-hover);transform:translateY(-1px);}
.color-code{background:var(--bg3);border-radius:var(--radius);padding:10px 12px;}
.color-code-label{font-size:11px;color:var(--text3);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:5px;}
.color-code-val{font-size:13px;font-weight:500;font-family:var(--mono);color:var(--text2);display:flex;align-items:center;justify-content:space-between;gap:4px;}
.color-code-val span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.color-codes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:1.5rem;}
.color-list{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px;}
.color-list-body{font-size:14px;color:var(--text2);line-height:1.8;}
.color-list-title{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:10px;}
.controls{display:grid;grid-template-columns:1fr auto auto;gap:8px;margin-bottom:1rem;align-items:center;}
.convert-link{font-size:12px;color:var(--accent);cursor:pointer;font-weight:500;background:none;border:none;padding:0;letter-spacing:0;}
.convert-link:hover{text-decoration:underline;}
.db-link{display:flex;align-items:center;gap:5px;padding:6px 12px;background:var(--bg3);border:0.5px solid var(--border);border-radius:var(--radius);color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:all 0.15s;white-space:nowrap;}
.db-link:hover{border-color:var(--border-hover);background:var(--accent-dim);text-decoration:none;color:#fff;}
.db-stat{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 16px;}
.db-stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;}
.db-stat-num{font-size:20px;font-weight:600;color:var(--text);font-family:var(--mono);}
.db-stats{display:flex;gap:16px;margin-bottom:1.5rem;flex-wrap:wrap;}
.disclaimer{font-size:11px;color:var(--text3);margin-bottom:12px;line-height:1.5;}
.empty-palette{font-size:13px;color:var(--text3);padding:4px 0;}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text3);font-size:14px;line-height:1.8;}
.expander-arrow{transition:transform 0.2s;font-style:normal;}
.expander-content{display:none;}
.expander-content.open{display:block;}
.expander-toggle{width:100%;padding:10px 16px;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);color:var(--text3);font-size:12px;font-weight:600;letter-spacing:0.5px;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;transition:all 0.15s;margin-bottom:12px;}
.expander-toggle.open .expander-arrow{transform:rotate(180deg);}
.expander-toggle:hover{color:var(--text);border-color:var(--border-hover);}
.faq-a{font-size:14px;color:var(--text2);line-height:1.7;}
.faq-item{border-bottom:0.5px solid var(--border);padding:14px 0;}
.faq-item:last-child{border-bottom:none;padding-bottom:0;}
.faq-q{font-size:15px;font-weight:500;color:var(--text);margin-bottom:8px;}
.faq-section{margin-bottom:12px;opacity:0.85;}
.faq-title{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:12px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field input{width:100%;padding:9px 10px;font-size:16px;font-weight:500;font-family:var(--mono);background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);color:var(--text);outline:none;transition:border-color 0.15s,background 0.15s;-moz-appearance:textfield;min-height:46px;}
.field input::-webkit-outer-spin-button,.field input::-webkit-inner-spin-button{-webkit-appearance:none;}
.field input:focus{border-color:var(--accent);background:var(--accent-dim);}
.field input:hover{border-color:var(--border-hover);}
.field label{font-size:12px;color:var(--text3);font-weight:500;}
.field-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.field-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;}
.filter-btn{padding:4px 10px;font-size:11px;font-weight:600;border-radius:var(--radius);border:0.5px solid var(--border);background:none;color:var(--text3);cursor:pointer;transition:all 0.15s;}
.filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.filter-btn:hover:not(.active){border-color:var(--border-hover);color:var(--text);}
.filter-select{padding:10px 12px;font-size:13px;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);color:var(--text2);outline:none;cursor:pointer;min-width:130px;}
.filter-select:focus{border-color:var(--accent);}
.finish-bar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem;}
.finish-btn{padding:5px 12px;font-size:12px;font-weight:600;border-radius:20px;border:0.5px solid var(--border);background:var(--bg3);color:var(--text3);cursor:pointer;transition:all 0.15s;}
.finish-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.finish-btn:hover{color:var(--text);border-color:var(--border-hover);}
.finish-note{font-size:11px;color:var(--text3);text-align:center;margin-bottom:1rem;}
.flake-density-wrap{display:none;align-items:center;gap:10px;margin-bottom:8px;font-size:12px;color:var(--text3);}
.flake-density-wrap.visible{display:flex;}
.flake-slider{flex:1;height:4px;accent-color:var(--accent);}
.footer-copy{font-size:11px;color:var(--text3);line-height:1.6;}
.footer-links{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:10px;flex-wrap:wrap;}
.footer-links a{font-size:13px;color:var(--text3);text-decoration:none;transition:color 0.15s;}
.footer-links a:hover{color:var(--text2);}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;background:var(--bg3);border:0.5px solid var(--border);border-radius:var(--radius);cursor:pointer;}
.hamburger span{display:block;height:2px;background:var(--text);border-radius:2px;transition:all 0.2s;}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.header-right{display:flex;align-items:center;gap:8px;}
.load-more-btn{display:block;width:100%;padding:12px;font-size:14px;font-weight:500;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);color:var(--text2);cursor:pointer;transition:all 0.15s;margin-bottom:2rem;text-align:center;}
.load-more-btn:hover{background:var(--bg3);border-color:var(--border-hover);color:var(--text);}
.loading{text-align:center;padding:2rem;color:var(--text3);font-size:14px;}
.loading-msg{text-align:center;padding:2rem;color:var(--text3);font-size:14px;display:none;}
.loading-msg.active{display:block;}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-mark{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;font-family:var(--mono);}
.logo-sub{font-size:11px;color:var(--text3);}
.logo-text{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-0.3px;}
.lookup-btn{padding:10px 20px;font-size:14px;font-weight:600;background:var(--accent);border:none;border-radius:var(--radius);color:#fff;cursor:pointer;transition:opacity 0.15s;min-height:44px;white-space:nowrap;}
.lookup-btn:disabled{opacity:0.4;cursor:not-allowed;}
.lookup-btn:hover{opacity:0.85;}
.mobile-menu{display:none!important;position:fixed;top:56px;left:0;right:0;background:var(--bg2);border-bottom:0.5px solid var(--border);z-index:99;padding:12px 1.5rem;flex-direction:column;gap:8px;}
.mobile-menu-link{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg3);border:0.5px solid var(--border);border-radius:var(--radius);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:all 0.15s;}
.mobile-menu-link .menu-label{display:flex;flex-direction:column;gap:1px;}
.mobile-menu-link .menu-sub{font-size:11px;color:var(--text3);font-weight:400;}
.mobile-menu-link.active{opacity:0.4;pointer-events:none;}
.mobile-menu-link:hover{border-color:var(--border-hover);text-decoration:none;color:#fff;}
.mobile-menu.open{display:flex!important;}
.modal{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);max-width:500px;width:100%;max-height:90vh;overflow-y:auto;}
.modal-actions{display:flex;gap:8px;flex-wrap:wrap;}
.modal-body{padding:18px;}
.modal-c2{border-top:0.5px solid var(--border);padding-top:12px;margin-bottom:14px;margin-top:4px;}
.modal-c2-label{font-size:11px;color:var(--text3);margin-bottom:8px;font-weight:500;}
.modal-code{background:var(--bg3);border-radius:var(--radius);padding:10px 12px;}
.modal-code-block{background:var(--bg3);border-radius:var(--radius);padding:10px 12px;}
.modal-code-label{font-size:10px;color:var(--text3);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:4px;}
.modal-code-val{font-size:12px;font-weight:500;font-family:var(--mono);color:var(--text2);display:flex;align-items:center;justify-content:space-between;gap:4px;}
.modal-code-val span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.modal-codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.modal-footer{padding-top:10px;border-top:0.5px solid var(--border);margin-top:12px;display:flex;justify-content:flex-end;}
.modal-make{font-size:11px;color:var(--text3);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:3px;}
.modal-meta{font-size:13px;color:var(--text3);font-family:var(--mono);margin-bottom:14px;}
.modal-name{font-size:20px;font-weight:600;color:var(--text);margin-bottom:4px;letter-spacing:-0.3px;}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:100;align-items:center;justify-content:center;padding:1rem;}
.modal-overlay.active{display:flex;}
.modal-swatch{height:130px;width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0;position:relative;overflow:hidden;}
.modal-swatch-2{position:absolute;right:0;top:0;width:40%;height:100%;opacity:0.85;}
.modal-type{display:inline-block;font-size:11px;color:var(--text3);padding:3px 8px;border:0.5px solid var(--border);border-radius:4px;margin-bottom:14px;}
.mode-tab{flex:1;padding:10px;font-size:14px;font-weight:600;border-radius:var(--radius);border:0.5px solid var(--border);background:none;color:var(--text3);cursor:pointer;transition:all 0.15s;text-align:center;}
.mode-tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.mode-tab:hover:not(.active){border-color:var(--border-hover);color:var(--text);}
.mode-tabs{display:flex;gap:6px;margin-bottom:16px;}
.model-context{font-size:14px;color:var(--text2);line-height:1.8;padding:14px 16px;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px;}
.nav-link{font-size:13px;color:#fff;font-weight:600;text-decoration:none;padding:6px 12px;border:0.5px solid var(--border);border-radius:var(--radius);transition:all 0.15s;display:flex;align-items:center;gap:5px;background:var(--bg3);white-space:nowrap;}
.nav-link.active{opacity:0.4;pointer-events:none;cursor:default;}
.nav-link:hover{color:#fff;border-color:var(--border-hover);text-decoration:none;background:var(--accent-dim);}
.nav-links{display:flex;align-items:center;gap:8px;}
.no-results{text-align:center;padding:3rem 1rem;color:var(--text3);font-size:14px;}
.note{font-size:12px;color:var(--text3);padding:10px 14px;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);margin-bottom:12px;line-height:1.5;}
.output-block{background:var(--bg3);border-radius:var(--radius);padding:10px 12px;}
.output-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
.output-label{font-size:10px;color:var(--text3);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;margin-bottom:4px;}
.output-val{font-size:13px;font-weight:500;font-family:var(--mono);color:var(--text2);display:flex;align-items:center;justify-content:space-between;gap:4px;}
.output-val span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.page-desc{font-size:15px;color:var(--text2);margin-bottom:2rem;line-height:1.6;}
.page-title{font-size:28px;font-weight:600;color:var(--text);letter-spacing:-0.5px;margin-bottom:6px;}
.palette-grid{display:flex;flex-wrap:wrap;gap:6px;min-height:14px;}
.palette-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.palette-section{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;}
.palette-title{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;}
.picker-canvas{border-radius:var(--radius);cursor:crosshair;display:block;}
.picker-canvas-wrap{position:relative;flex-shrink:0;}
.picker-cursor{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.5);transform:translate(-50%,-50%);pointer-events:none;top:50%;left:50%;}
.picker-hue{width:100%;height:14px;border-radius:7px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);border:none;margin-top:10px;}
.picker-hue::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,0.3);cursor:pointer;border:none;}
.picker-hue::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,0.3);cursor:pointer;}
.picker-preview{flex:1;display:flex;flex-direction:column;gap:8px;}
.picker-section{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;}
.picker-swatch{height:60px;border-radius:var(--radius);border:0.5px solid var(--border);transition:background 0.1s;}
.picker-wrap{display:flex;gap:12px;align-items:flex-start;}
.preset-body{padding:6px 8px;}
.preset-card{background:var(--bg3);border:0.5px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color 0.15s,transform 0.1s;}
.preset-card:hover{border-color:var(--border-hover);transform:translateY(-1px);}
.preset-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
.preset-name{font-size:11px;font-weight:500;color:var(--text);margin-bottom:2px;line-height:1.2;}
.preset-rgb{font-size:10px;color:var(--text3);font-family:var(--mono);}
.preset-section{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;}
.preset-swatch{height:44px;width:100%;}
.preset-title{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:12px;}
.related{margin-bottom:2rem;}
.related-link{font-size:13px;color:var(--text2);padding:5px 10px;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);text-decoration:none;transition:all 0.15s;}
.related-link:hover{color:var(--text);border-color:var(--border-hover);text-decoration:none;}
.related-links{display:flex;flex-wrap:wrap;gap:6px;}
.related-title{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:10px;}
.results-count{font-size:13px;color:var(--text3);}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.results-info{font-size:13px;color:var(--text3);margin-bottom:1rem;}
.results-section{display:none;}
.results-section.active{display:block;}
.results-title{font-size:16px;font-weight:600;color:var(--text);}
.sct-desc{font-size:14px;color:var(--text2);line-height:1.7;margin-bottom:1.5rem;}
.sct-note{font-size:12px;color:var(--text3);margin-bottom:8px;line-height:1.5;}
.sct-section{margin-bottom:1.5rem;}
.sct-section-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;}
.sct-swatch{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:8px;vertical-align:middle;border:0.5px solid var(--border);flex-shrink:0;}
.sct-table{width:100%;border-collapse:collapse;font-size:13px;}
.sct-table td{padding:6px 10px;color:var(--text2);border-bottom:0.5px solid var(--border);}
.sct-table th{text-align:left;padding:6px 10px;font-size:11px;color:var(--text3);font-weight:600;letter-spacing:0.5px;text-transform:uppercase;border-bottom:0.5px solid var(--border);}
.sct-table tr:hover td{background:var(--bg2);color:var(--text);}
.sct-title{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:8px;}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text3);font-size:14px;pointer-events:none;}
.search-input{flex:1;padding:10px 14px 10px 38px;font-size:15px;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);color:var(--text);outline:none;transition:border-color 0.15s;width:100%;}
.search-input:focus{border-color:var(--accent);}
.search-label{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:10px;}
.search-result-info{flex:1;min-width:0;}
.search-result-item{padding:8px 10px;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.1s;}
.search-result-item:hover{background:var(--bg3);}
.search-result-meta{font-size:11px;color:var(--text3);}
.search-result-name{font-size:13px;font-weight:500;color:var(--text);}
.search-results{margin-top:10px;display:none;}
.search-results.active{display:block;}
.search-row{display:flex;gap:8px;}
.search-section{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;}
.search-swatch{width:28px;height:28px;border-radius:4px;flex-shrink:0;border:0.5px solid var(--border);}
.search-wrap{position:relative;}
.section-label{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.section-wrap{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;}
.sel-group{display:flex;flex-direction:column;gap:5px;}
.sel-group label{font-size:12px;color:var(--text3);font-weight:500;}
.sel-group select{padding:10px 12px;font-size:14px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);color:var(--text);outline:none;cursor:pointer;transition:border-color 0.15s;min-height:44px;}
.sel-group select:disabled{opacity:0.4;cursor:not-allowed;}
.sel-group select:focus{border-color:var(--accent);}
.selector-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end;}
.selector-label{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:12px;}
.selector-section{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px;}
.share-btn{font-size:12px;padding:5px 10px;border-radius:var(--radius);border:0.5px solid var(--border);background:none;color:var(--text3);cursor:pointer;display:none;align-items:center;gap:4px;transition:all 0.15s;}
.share-btn:hover{color:var(--text);border-color:var(--border-hover);}
.shared-colors{display:flex;flex-direction:column;gap:16px;margin-bottom:2rem;}
.shared-page{display:none;flex:1;max-width:860px;width:100%;margin:0 auto;padding:2rem 1.5rem;}
.shared-sub{font-size:15px;color:var(--text2);margin-bottom:2rem;}
.shared-title{font-size:24px;font-weight:600;color:var(--text);letter-spacing:-0.5px;margin-bottom:6px;}
.stat{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);padding:8px 14px;}
.stat-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;}
.stat-num{font-size:18px;font-weight:600;color:var(--text);font-family:var(--mono);}
.static-color-table{margin-bottom:2rem;}
.stats-bar{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.swatch-bar{height:88px;border-radius:var(--radius-lg);border:0.5px solid var(--border);margin-bottom:0.5rem;display:flex;align-items:center;justify-content:center;transition:background 0.2s;cursor:pointer;position:relative;overflow:hidden;}
.swatch-bar:hover::after{content:'Click to copy HEX';position:absolute;bottom:8px;right:12px;font-size:11px;color:rgba(255,255,255,0.5);font-family:var(--mono);}
.swatch-disclaimer{font-size:11px;color:var(--text3);text-align:center;margin-bottom:1.5rem;}
.swatch-label{font-family:var(--mono);font-size:18px;font-weight:600;mix-blend-mode:difference;color:white;letter-spacing:2px;}
.swatch-match{font-size:12px;color:var(--text3);}
.swatch-match a{color:var(--accent);font-size:12px;font-style:italic;}
.swatch-meta{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:1.75rem;min-height:20px;flex-wrap:wrap;}
.swatch-name{font-size:13px;color:var(--text3);font-style:italic;}
.updated{font-size:13px;color:var(--text3);margin-bottom:2rem;}
.vin-btn{padding:10px 20px;font-size:14px;font-weight:600;background:var(--accent);border:none;border-radius:var(--radius);color:#fff;cursor:pointer;transition:opacity 0.15s;white-space:nowrap;}
.vin-btn:hover{opacity:0.85;}
.vin-error{color:#E05555;}
.vin-input{flex:1;padding:10px 14px;font-size:15px;font-family:var(--mono);background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);color:var(--text);outline:none;transition:border-color 0.15s;text-transform:uppercase;letter-spacing:1px;}
.vin-input:focus{border-color:var(--accent);}
.vin-label{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.vin-label span{font-size:11px;color:var(--accent);font-weight:400;letter-spacing:0;text-transform:none;}
.vin-result{margin-top:10px;font-size:13px;color:var(--text2);display:none;}
.vin-result.active{display:block;}
.vin-row{display:flex;gap:8px;}
.vin-section{background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:12px;}
@media(max-width:520px){.field-grid-4{grid-template-columns:1fr 1fr;} .field-grid-3{grid-template-columns:1fr 1fr;} .logo-sub,.logo-text{display:none;} .page-title{font-size:22px;} .output-grid{grid-template-columns:1fr;} .nav-link span{display:none;} .bridge-banner{gap:8px;.modal-codes{grid-template-columns:1fr;.controls{grid-template-columns:1fr;} .logo-sub{display:none;} .modal-codes{grid-template-columns:1fr;} .color-grid{grid-template-columns:1fr 1fr;} .db-stats{gap:8px;.affiliate-grid-3{grid-template-columns:1fr!important;} .field-grid-4{grid-template-columns:1fr 1fr;} .affiliate-grid{grid-template-columns:1fr;} .color-codes{grid-template-columns:1fr 1fr;} .header-right{gap:6px;} .nav-links{gap:6px;} .nav-link{padding:6px 10px;} .logo-text{display:none;} .bmc-btn span{display:none;} .bmc-btn{padding:7px 10px;} .db-link span{display:none;} .nav-link{display:flex;align-items:center;gap:5px;padding:6px 12px;background:var(--accent-dim);border:0.5px solid var(--border);border-radius:var(--radius);color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:all 0.15s;white-space:nowrap;}.nav-link:hover{border-color:var(--border-hover);}.db-link{padding:6px 10px;.picker-wrap{flex-direction:column;}.picker-canvas{width:100%!important;height:160px!important;}
@media(max-width:600px){.nav-links{display:none;}.hamburger{display:flex;.logo-sub{display:none;}.logo-text{display:none;}.page-title{font-size:22px;}.modal-codes{grid-template-columns:1fr;}.color-grid{grid-template-columns:1fr 1fr;}.nav-links{display:none;.selector-grid{grid-template-columns:1fr 1fr;} .lookup-btn{grid-column:1/-1;} .logo-sub{display:none;} .page-title{font-size:22px;} .modal-codes{grid-template-columns:1fr;} .color-grid{grid-template-columns:1fr 1fr;} .vin-row{flex-direction:column;} .search-row{flex-direction:column;}
html{font-size:16px;}.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius);border:0.5px solid var(--border);background:var(--bg3);color:var(--text2);cursor:pointer;font-size:16px;transition:all 0.15s;flex-shrink:0;}
.theme-toggle:hover{border-color:var(--border-hover);color:var(--text);}
.mobile-theme-toggle{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg3);border:0.5px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;transition:all 0.15s;width:100%;text-align:left;}
.mobile-theme-toggle:hover{border-color:var(--border-hover);}
.browse-section{margin-top:2rem;padding-top:1.5rem;border-top:0.5px solid var(--border);}
.browse-title{font-size:13px;font-weight:600;color:var(--text3);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:12px;}
.browse-grid{display:flex;flex-wrap:wrap;gap:8px;}
.browse-make-link{padding:6px 12px;background:var(--bg2);border:0.5px solid var(--border);border-radius:var(--radius);color:var(--text2);font-size:13px;text-decoration:none;transition:all 0.15s;}
.browse-make-link:hover{border-color:var(--border-hover);color:var(--text);text-decoration:none;}