*,::after,::before{box-sizing:border-box}:root{--primary-color:#4a90e2;--primary-dark:#357ABD;--secondary-color:#f5f7fa;--text-color:#333;--light-text-color:#fff;--border-color:#e0e6ed;--shadow-color:rgba(0, 0, 0, 0.1);--success-color:#4CAF50;--danger-color:#c0392b;--background-body:linear-gradient(135deg, #f3f5f7 0%, #ffffff 100%);--background-container:var(--light-text-color);--input-bg:var(--light-text-color);--history-swatch-border:var(--border-color);--ad-placeholder-bg:#e9ecef;--ad-placeholder-border:#ced4da;--ad-placeholder-text:#6c757d;--dropdown-bg:var(--light-text-color);--dropdown-shadow:0 4px 12px rgba(0,0,0,0.1);--dropdown-item-hover-bg:#f0f3f7;--info-section-bg:#f9f9f9;--main-content-max-width:520px;--sidebar-width:200px;--page-max-width:1400px;--gap-width:20px}body.dark-mode{--primary-color:#58a6ff;--primary-dark:#388bfd;--secondary-color:#2c313a;--text-color:#c9d1d9;--light-text-color:#0a0c10;--border-color:#373e47;--shadow-color:rgba(0, 0, 0, 0.4);--success-color:#56d364;--danger-color:#f85149;--background-body:#0d1117;--background-container:#161b22;--input-bg:#22272e;--history-swatch-border:#444c56;--ad-placeholder-bg:#21262d;--ad-placeholder-border:#30363d;--ad-placeholder-text:#768390;--dropdown-bg:#22272e;--dropdown-shadow:0 6px 18px rgba(0,0,0,0.3);--dropdown-item-hover-bg:#2b313a;--info-section-bg:#1c2128}html{scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";display:flex;flex-direction:column;align-items:center;min-height:100vh;margin:0;background:var(--background-body);color:var(--text-color);padding:0;transition:background-color .3s ease,color .3s ease;font-size:16px;overflow-x:hidden}.page-wrapper{display:flex;justify-content:center;width:100%;max-width:var(--page-max-width);margin:0 auto;padding:20px var(--gap-width)}.sidebar-ad{width:var(--sidebar-width);flex-shrink:0;display:none}.sidebar-ad-left{margin-right:var(--gap-width)}.sidebar-ad-right{margin-left:var(--gap-width)}.sidebar-ad .ad-placeholder{height:600px;position:sticky;top:20px;display:flex;flex-direction:column;justify-content:space-between;padding:15px}.main-container-wrapper{width:100%;max-width:var(--main-content-max-width);flex-grow:1}@media (min-width:992px){.sidebar-ad-right{display:block}}@media (min-width:1200px){.sidebar-ad-left{display:block}}.container{background-color:var(--background-container);padding:25px 30px;border-radius:12px;box-shadow:0 8px 25px var(--shadow-color);text-align:center;width:100%;transition:background-color .3s ease}.marketing-tagline{font-size:.85em;color:#667;margin-bottom:15px;display:flex;justify-content:center;gap:15px}body.dark-mode .marketing-tagline{color:#889}.marketing-tagline span{display:flex;align-items:center;gap:5px}.marketing-tagline svg{width:14px;height:14px;fill:currentColor}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid var(--border-color)}.app-header-title h1{font-size:1.8em;color:var(--primary-color);margin:0;font-weight:600}.app-header-controls{display:flex;align-items:center;gap:10px}.language-dropdown{position:relative}.language-toggle-btn,.theme-toggle-btn{background:0 0;border:1px solid var(--border-color);color:var(--text-color);padding:7px 10px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.85em;transition:background-color .2s,border-color .2s}.language-toggle-btn:hover,.theme-toggle-btn:hover{background-color:var(--secondary-color)}.language-toggle-btn svg.dropdown-arrow{width:14px;height:14px;fill:currentColor;transition:transform .2s ease}.language-dropdown.open .language-toggle-btn svg.dropdown-arrow{transform:rotate(180deg)}.language-list{position:absolute;top:calc(100% + 5px);right:0;background-color:var(--dropdown-bg);border:1px solid var(--border-color);border-radius:6px;box-shadow:var(--dropdown-shadow);z-index:1000;width:max-content;overflow:hidden;display:none}.language-dropdown.open .language-list{display:block}.lang-btn-dropdown{display:block;width:100%;padding:8px 12px;background:0 0;border:none;color:var(--text-color);text-align:left;cursor:pointer;font-size:.85em}.lang-btn-dropdown.active,.lang-btn-dropdown:hover{background-color:var(--dropdown-item-hover-bg);color:var(--primary-color)}.theme-toggle-btn svg{width:16px;height:16px;fill:currentColor}.main-content h2#mainSubtitle{font-size:1.05em;color:#555;margin:0 0 20px 0;font-weight:400}body.dark-mode .main-content h2#mainSubtitle{color:#aab}.picker-button{background-color:var(--primary-color);color:var(--light-text-color);border:none;padding:12px 25px;font-size:1.05em;font-weight:500;border-radius:8px;cursor:pointer;transition:background-color .2s ease,transform .1s ease;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 25px auto;box-shadow:0 4px 12px rgba(74,144,226,.35)}body.dark-mode .picker-button{color:#0d1117;box-shadow:0 4px 12px rgba(88,166,255,.25)}.picker-button svg{width:18px;height:18px;fill:currentColor}.picker-button:hover{background-color:var(--primary-dark)}.picker-button:active{transform:scale(.98)}.color-display-area{display:flex;gap:15px;align-items:flex-start;margin-bottom:25px}#colorBox{width:90px;height:90px;border-radius:8px;background-color:#eee;border:3px solid var(--border-color);transition:background-color .3s ease,border-color .3s ease;flex-shrink:0}.color-codes-wrapper{flex-grow:1;text-align:left}.format-selector{margin-bottom:8px;display:flex;align-items:center;gap:8px}.format-selector label{font-size:.9em;color:#444}body.dark-mode .format-selector label{color:#bbb}#colorFormatSelect{padding:7px 10px;border-radius:6px;border:1px solid var(--border-color);font-size:.95em;background-color:var(--input-bg);color:var(--text-color);flex-grow:1;transition:background-color .3s,border-color .3s,color .3s}#colorCodeDisplay{background-color:var(--secondary-color);padding:10px 12px;border-radius:6px;font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;font-size:1.05em;color:var(--text-color);word-break:break-all;min-height:22px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border-color);transition:background-color .3s,border-color .3s,color .3s}#copyBtn{background:0 0;border:none;cursor:pointer;padding:4px;margin-left:8px;opacity:.7;transition:opacity .2s}#copyBtn:hover{opacity:1}#copyBtn svg{width:16px;height:16px;fill:var(--primary-color)}#copyFeedback{font-size:.8em;color:var(--success-color);margin-top:5px;height:14px;text-align:right}.history-section{text-align:left;margin-top:25px}.history-section h3{font-size:1.15em;color:var(--primary-color);margin-bottom:12px;border-bottom:1px solid var(--border-color);padding-bottom:7px;font-weight:500}#colorHistoryList{list-style:none;padding:5px 0;margin:0;display:flex;flex-wrap:wrap;gap:8px;min-height:30px}#colorHistoryList li{cursor:pointer;transition:transform .1s ease;border-radius:5px;overflow:hidden}#colorHistoryList li:hover{transform:scale(1.1)}.history-color-swatch{width:30px;height:30px;border-radius:5px;border:2px solid var(--history-swatch-border);transition:border-color .3s}.no-history{color:#777;font-style:italic;width:100%;text-align:center;padding:8px 0;font-size:.9em}body.dark-mode .no-history{color:#889}.unsupported-message{color:var(--primary-color);border-color:var(--primary-color);background-color:rgba(74,144,226,.08);font-weight:500;margin-top:20px;padding:12px 15px;border-radius:6px;text-align:left;font-size:.95em;line-height:1.5}body.dark-mode .unsupported-message{background-color:rgba(88,166,255,.1)}.ad-placeholder{background-color:var(--ad-placeholder-bg);border:1px dashed var(--ad-placeholder-border);text-align:center;margin:0;padding:10px;display:flex;align-items:center;justify-content:center;color:var(--ad-placeholder-text);transition:background-color .3s,border-color .3s,color .3s;font-size:.9em}.ad-label{font-size:.95em;font-weight:500}.ad-banner-content-top{width:100%;max-width:100%;min-height:60px;margin-bottom:25px;margin-top:5px}.ad-banner-content-bottom{width:100%;max-width:100%;min-height:90px;margin-top:25px}.info-sections{margin-top:30px;text-align:left}.info-section{background-color:var(--info-section-bg);padding:20px 25px;border-radius:8px;margin-bottom:20px;border:1px solid var(--border-color);transition:background-color .3s,border-color .3s}.info-section h3{color:var(--primary-color);margin-top:0;margin-bottom:12px;font-size:1.3em;font-weight:500}.info-section ol,.info-section p,.info-section ul{font-size:.95em;line-height:1.65;margin-bottom:12px;color:#454545}body.dark-mode .info-section ol,body.dark-mode .info-section p,body.dark-mode .info-section ul{color:#b0b8c0}.info-section ol,.info-section ul{padding-left:25px}.info-section li{margin-bottom:6px}.info-section strong{color:var(--primary-color);font-weight:600}body.dark-mode .info-section strong{color:var(--primary-dark)}.page-footer{width:100%;text-align:center;padding:25px 20px;margin-top:30px;font-size:.9em;color:#666;border-top:1px solid var(--border-color);background-color:var(--secondary-color)}body.dark-mode .page-footer{color:#99a;background-color:#1e2228}.page-footer p{margin:5px 0}.page-footer a{color:var(--primary-color);text-decoration:none;font-weight:500}.page-footer a:hover{text-decoration:underline}.tool-hidden{display:none!important}