/** Vanilla.css **/
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}
html[dir="ltr"] {
    direction: ltr;
    text-align: left;
}
:root{--accent-color:#dce4e6;--accent-hover:#b8c5c8;--success-color:#0f0;--error-color:red;--dark-bg:#202124;--dark-surface:#303134;--dark-input:#2b2c2f;--light-bg:#fff;--light-surface:#f1f3f4;--text-dark:#000;--text-light:#e8eaed;--border-dark:#444;--border-light:#ccc;--shadow-light:#0000001a;--shadow-dark:#0003}
*{box-sizing:border-box;margin:0;padding:0}
body{background-color:var(--dark-bg);color:var(--text-light);height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background-size:cover;background-repeat:no-repeat;background-position:center;transition:background-color .5s ease,color .5s ease,opacity .3s ease;overflow:hidden}
body.no-animations *{animation-duration:0s!important;animation-play-state:paused!important}
body.no-animations :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *){transition-duration:0s!important}
body.no-animations :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *):hover,body.no-animations :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *):focus,body.no-animations :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *):active,body.no-animations :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *):visited{transition-duration:0s!important;animation-duration:0s!important;transform:none!important;box-shadow:none!important}
body.no-animations #menuPanel *,body.no-animations #weatherPopup *,body.no-animations #addFavoriteModal *,body.no-animations #voiceSearchModal *,body.no-animations #accountModal *,body.no-animations #multiSearchMenu *,body.no-animations #favoriteContextMenu *{animation-duration:0s!important;transition-duration:.1s!important;animation-play-state:paused!important}
body.no-animations .tools-panel,body.no-animations .tools-panel *{transition-duration:0s!important;animation-duration:0s!important}
body.no-animations .icon-left,body.no-animations .icon-right,body.no-animations #multiSearchIcon,body.no-animations #voiceIcon,body.no-animations #lensIcon,body.no-animations .icon-left img,body.no-animations .icon-right img{display:block!important;visibility:visible!important;opacity:1!important;transition:none!important}
body.no-animations .search-bar input:hover,body.no-animations .search-bar input:focus{transform:none!important}
@media (prefers-reduced-motion: reduce) {
body :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *){transition-duration:0s!important}
body :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *):hover,body :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *):focus,body :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *):active,body :not(.menu,.popup,.modal,.dropdown,#menuPanel,#weatherPopup,#addFavoriteModal,#voiceSearchModal,#accountModal,#multiSearchMenu,#favoriteContextMenu,.search-bar,.search-bar *,.tools-panel,.tools-panel *):visited{transition-duration:0s!important;animation-duration:0s!important;transform:none!important;box-shadow:none!important}
body .icon-left,body .icon-right,body #multiSearchIcon,body #voiceIcon,body #lensIcon,body .icon-left img,body .icon-right img{display:block!important;visibility:visible!important;opacity:1!important;transition:none!important}
}
body.light{background-color:var(--light-bg);color:var(--text-dark)}
body.dark{background-color:var(--dark-bg);color:var(--text-light)}
body.light .search-bar input,body.light .buttons button,body.light .favorite-item,body.light #menuPanel,body.light #accountModalInner,body.light .weather-widget,body.light #voiceTranscript,body.light #addFavoriteModal,body.light #feedbackForm input[type="text"],body.light #feedbackForm textarea,body.light #feedbackForm input[type="file"]{background-color:var(--light-surface);color:var(--text-dark);transition:background-color .5s ease,color .5s ease}
body.light .favorite-item a{color:var(--text-dark)}
body.light .favorite-item img{background:transparent}
body.light #suggestions{background-color:var(--light-surface);color:var(--text-dark)}
body.light #suggestions li:hover{background-color:#e0e0e0}
body.light #suggestions li.selected{background-color:#d1d1d1}
body.light .logo .logo-name{color:var(--text-dark)!important}
body.light .info-left{background-color:#f1f3f4e6;color:var(--text-dark)}
body.light .info-right{background-color:#f1f3f4e6;color:var(--text-dark); display: none; }
body.light #menuPanel input,body.light #menuPanel select{background-color:#e0e0e0;color:var(--text-dark)}
body.light #menuPanel h3{border-bottom:2px solid var(--border-light)}
body.light #addFavoriteModal input{background-color:#e0e0e0;color:var(--text-dark)}
body.light #addFavoriteModal button{background-color:#e0e0e0;color:var(--text-dark)}
body.light #addFavoriteModal .close{color:#050505}
body.light #addFavoriteModal button:hover{color:var(--accent-color);border:1px solid var(--accent-color)}
body.light #accountModal .accent{background-color:#e0e0e0;color:var(--text-dark)}
body.light #accountModalInner{background-color:var(--light-surface);color:var(--text-dark)}
body.light #accountModalInner .close{color:#050505}
body.light #accountForm input[type="text"],body.light #accountForm input[type="password"]{background:#fff;color:#222}
body.light .error-message{color:#c00}
body.light .weather-error{background-color:#f440;color:#c00}
body.light .history-item{background-color:#e0e0e0}
body.light .history-item:hover{background-color:#d1d1d1}
body.light .history-engine{color:#555}
body.light .history-remove-btn{color:#363333}
body.light .recent-bg-item{background-color:#e0e0e0;color:var(--text-dark)}
body.light #recentBgList{background-color:var(--light-surface);color:var(--text-dark)}
body.light #recentBgList .recent-bg-item span{color:var(--text-dark)}
body.light #bgFileInput{background-color:var(--light-surface);color:var(--text-dark)}
body.light #bgFileInput::-webkit-file-upload-button{background-color:#e0e0e0;color:var(--text-dark);border:1px solid var(--accent-color)}
body.light #feedbackForm label{color:var(--text-dark)}
body.light #feedbackForm input[type="text"],body.light #feedbackForm textarea{background-color:#e0e0e0;color:var(--text-dark)}
body.light #feedbackForm input[type="file"]{background-color:#e0e0e0;color:var(--text-dark)}
body.light #feedbackStatus.success{color:#090}
body.light .social-links h4{color:var(--text-dark)}
body.light .contact-area{background-color:#e0e0e0;color:var(--text-dark)}
body.light .social-link{background-color:#e0e0e0}
body.light .social-link:hover{background-color:var(--accent-color)}
body.light #resetBrowserBtn{background-color:#e0e0e0;color:var(--accent-color);border:1px solid var(--accent-color)}
body.light .weather-popup{background-color:var(--light-surface);color:var(--text-dark);border:1px solid var(--border-light);box-shadow:0 4px 12px var(--shadow-light)}
body.light .close-popup{color:var(--text-dark)}
body.light #popupLocation{color:var(--text-dark)}
body.light .forecast-day{color:var(--text-dark)}
body.light .forecast-day:hover{background-color:#e0e0e0}
.weather-widget{position:fixed;top:20px;left:20px;background-color:var(--dark-surface);color:var(--text-light);padding:15px 16px;border-radius:30px;border:1px solid transparent;font-size:clamp(9px,3vw,13px);max-width:280px;height:50px;z-index:1001;white-space:normal;word-wrap:break-word;cursor:pointer;box-shadow:0 2px 6px var(--shadow-dark);transition:background-color 0.2s,border-color .2s}
body.light .weather-widget{box-shadow:0 2px 6px var(--shadow-light);color:var(--text-dark)}
.weather-widget:hover{border:1px solid var(--accent-color)}
.weather-widget.hidden{display:none}
.weather-error{font-size:12px;color:#f44;text-align:center;padding:5px 10px;background-color:transparent;border-radius:5px;display:inline-block}
#voiceSearchModal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.95);background-color:var(--dark-surface);padding:20px;border-radius:20px;box-shadow:0 4px 12px var(--shadow-dark);z-index:10010;color:var(--text-light);width:320px;text-align:center;animation:scaleIn .18s ease-out forwards}
body.light #voiceSearchModal{background-color:var(--light-bg);color:var(--text-dark)}
#voiceSearchModal.show{display:block;transform:translate(-50%,-50%) scale(1);opacity:1}
#voiceTranscript{width:100%;min-height:0;max-height:200px;padding:.75rem;border-radius:20px;background:var(--dark-surface);color:var(--text-light);margin-bottom:5px;font-size:1rem}
body.light #voiceTranscript{color:var(--text-dark);background:#f1f3f4e6;border-color:var(--border-light)}
#voiceSearchModal .accent{color:#fff;background-color:var(--dark-bg);padding:.5rem 2rem;border:1px solid transparent;border-radius:30px;cursor:pointer;font-size:.875rem;font-weight:500;margin:.5rem}
#voiceSearchModal .accent:hover{transform:scale(1.08);background-color:var(--dark-bg);border:1px solid var(--accent-color);box-shadow:0 2px 8px #00000040}
body.light #voiceSearchModal .accent:hover{background-color:#e0e0e0;border:1px solid var(--accent-color)}
#voiceIcon{color:#fff;transition:color .3s ease}
body.light #voiceIcon{color:var(--text-dark)}
#voiceIcon.active,.voice-icon.active{color:red}
body.light #voiceSearchModal .accent{background-color:var(--light-surface);color:var(--accent-color)}
.accent{background-color:var(--accent-color);color:#fff;padding:8px 16px;border:1px solid transparent;border-radius:30px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,background-color 0.2s,color 0.2s,border-color .2s;font-weight:500;display:inline-flex;align-items:center;justify-content:center}
.accent:hover{transform:scale(1.05);box-shadow:0 2px 8px var(--shadow-dark);border-color:var(--accent-color)}
body.light .accent{color:#fff}
body.light .accent:hover{box-shadow:0 2px 8px var(--shadow-light)}
.small-accent{padding:6px 12px;font-size:13px;min-width:80px}
.danger{background-color:#ef4444}
body.light .danger{background-color:#ef4444}
.danger:hover{background-color:#dc2626;transform:scale(1.02)}
.info-wrapper{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:5px;z-index:1000;width:auto}
.info-left{background-color:var(--dark-surface);color:var(--text-light);padding:10px 15px;border-radius:20px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;order:1}
.info-right{background-color:var(--dark-surface);color:var(--text-light);padding:10px 15px;border-radius:20px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:0;order:2}
#infoRight {display: none;}
.info-bar.hidden{display:none}
.url-sidebar{position:fixed;width:200px;height:calc(100vh - 40px);background-color:#303134e6;color:var(--text-light);padding:10px;border-radius:10px;z-index:1000;display:none;overflow-y:auto}
.container{text-align:center;width:100%;max-width:600px;position:relative;z-index:1000}
.logo{margin-bottom:30px;display:flex;align-items:center;gap:20px}
.logo.hidden{display:none}
.logo img{max-height:80px;cursor:pointer}
.logo .logo-name{font-size:36px;font-weight:700;color:var(--text-light)}
.search-bar{width:100%;max-width:580px;margin:0 auto 20px;position:relative;z-index:1002;flex-shrink:0}
.search-bar input{width:100%;padding:14px 75px 14px 45px;border-radius:30px;border:1px solid var(--border-dark);background-color:var(--dark-input);color:var(--text-light);font-size:16px;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease,transform .2s ease;box-shadow:0 1px 3px var(--shadow-light)}
.search-bar input:focus{transform:scale(1.02);box-shadow:0 4px 12px var(--shadow-dark);border-color:var(--accent-color)}
body.light .search-bar input{box-shadow:0 2px 6px var(--shadow-light);border-color:var(--border-light)}
body.light .search-bar input:focus{box-shadow:0 4px 12px var(--shadow-light)}
.icon-left,.icon-right{position:absolute;top:50%;transform:translateY(-50%);cursor:pointer;user-select:none}
.icon-left{left:12px;z-index:1002}
.icon-right{right:12px}
#lensSearchBtn{right:12px}
#voiceSearchBtn{right:45px}
#voiceSearchBtn.no-lens{right:12px!important}
.icon-left img,.icon-right img{width:24px;height:24px}
.buttons{margin-bottom:0;z-index:1001;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:10px;width:auto;position:relative;flex-shrink:0}
.buttons button{background-color:var(--dark-surface);color:var(--text-light);border:1px solid transparent;height:40px;padding:0 10px;border-radius:50px;font-size:14px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,filter 0.2s,background-color 0.2s,color 0.2s,border-color .2s;will-change:transform,box-shadow;flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-width:auto;min-height:43px}
.buttons button:active{transform:scale(0.95);filter:brightness(0.9)}
.buttons button:hover{transform:scale(1.08);background-color:var(--dark-surface);color:var(--accent-color);border:1px solid var(--accent-color);box-shadow:0 2px 8px var(--shadow-dark)}
body.light .buttons button:hover{background-color:var(--light-surface);color:var(--accent-color);border:1px solid var(--accent-color)}
.button-icon{width:clamp(12px,2vw,16px);height:clamp(12px,2vw,16px);flex-shrink:0;margin-right:0}
.buttons .accent{display:inline-flex;align-items:center;gap:clamp(3px,0.8vw,5px);white-space:nowrap;flex-shrink:0;min-width:auto}
.button-text{font-size:14px}
.buttons.text-only button{padding:0 16px;min-width:auto}
.buttons.text-only .button-icon{display:none}
.buttons.text-only .button-text{display:inline}
.buttons.icons-only{gap:8px}
.buttons.icons-only button{padding:0;border-radius:50px;min-width:43px;width:73px;height:43px;justify-content:center}
.buttons.icons-only .button-icon{width:20px;height:20px;margin:0}
.buttons.icons-only .button-text{display:none}
.favorites{display:flex;justify-content:center;gap:25px 10px;flex-wrap:wrap;z-index:1000;max-width:550px;position:relative;margin:20px auto 0}
.favorites.hidden{display:none}
.favorite-item{width:60px;height:60px;padding:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;background-color:var(--dark-input);border-radius:30px;transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;position:relative;box-shadow:0 2px 4px var(--shadow-light)}
.favorite-item:hover{background-color:#3a3b3f;transform:translateY(-2px);box-shadow:0 4px 8px var(--shadow-dark)}
.favorite-item:hover a,#addFavoriteBtn:hover{color:#fff!important}
body.light .favorite-item:hover a,body.light #addFavoriteBtn:hover{color:var(--text-dark)!important}
.favorite-item:active,#addFavoriteBtn:active{transform:scale(0.96);filter:brightness(0.95)}
.favorite-item img{width:32px;height:32px;background:transparent;margin-top:20px}
.favorite-item a{display:flex;flex-direction:column;align-items:center;text-decoration:none;justify-content:center;font-weight:600;font-size:12px;color:var(--text-light);text-align:center;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;gap:6px;position:relative;top:12px}
.favorite-item a img{margin-bottom:6px}
#addFavoriteBtn{background-color:var(--dark-input);color:var(--accent-color);border:2px solid var(--accent-color);border-radius:50%;width:60px;height:60px;font-weight:700;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform 0.2s,box-shadow 0.2s,border-color .2s;will-change:transform,box-shadow;margin:0 8px}
body.light #addFavoriteBtn{background-color:var(--light-surface)}
#addFavoriteBtn:hover{color:#fff!important;transform:scale(1.08);box-shadow:0 2px 8px var(--shadow-dark)}
#addFavoriteBtn:active{transform:scale(0.96);filter:brightness(0.95)}
#menuButton{position:fixed;top:20px;right:20px;background-color:var(--dark-surface);color:#fff;border:none;border-radius:40px;padding:15px;cursor:pointer;font-size:16px;z-index:1001;transition:transform 0.2s,box-shadow .2s;will-change:transform,box-shadow;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:50px;height:50px}
#menuButton:hover{transform:scale(1.08);box-shadow:0 2px 8px var(--shadow-dark)}
#menuButton:active{transform:scale(0.96);filter:brightness(0.95)}
#menuButton img{width:20px;height:20px;vertical-align:middle}
body.light #menuButton{background-color:var(--light-surface);color:var(--text-dark)}
#accountButton{position:fixed;top:20px;right:80px;background:var(--dark-surface);color:#fff;border-radius:50%;width:50px;height:50px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000014;border:none;padding:0;transition:box-shadow 0.2s,background 0.2s,color 0.2s,transform .2s;z-index:1001}
#accountButton:hover{transform:scale(1.08);box-shadow:0 2px 8px var(--shadow-dark)}
body.light #accountButton{background:var(--light-surface);color:var(--text-dark)}
body.light #accountButton:hover{background:#e0e0e0;color:var(--text-dark)}
#accountButton img{width:20px;height:20px;display:block;margin:auto}
#menuPanel{display:none;position:fixed;padding:0 20px 20px;top:85px;right:20px;background-color:var(--dark-surface);color:#fff;border-radius:20px;width:350px;text-align:left;z-index:1005;box-shadow:0 4px 12px var(--shadow-dark);max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5c5e60 transparent;animation:modalFadeIn .18s;contain:content}
#menuPanel::-webkit-scrollbar{width:8px}
#menuPanel::-webkit-scrollbar-track{background:var(--dark-surface)}
#menuPanel::-webkit-scrollbar-thumb{background:#5c5e60}
#menuPanel::-webkit-scrollbar-thumb:hover{background:#7a7c80}
body.light #menuPanel{background-color:var(--light-surface);color:var(--text-dark);scrollbar-color:#d1d1d1 transparent}
body.light #menuPanel::-webkit-scrollbar-track{background:var(--light-surface)}
body.light #menuPanel::-webkit-scrollbar-thumb{background:#d1d1d1}
body.light #menuPanel::-webkit-scrollbar-thumb:hover{background:#b0b0b0}
.tab-menu{position:sticky;top:0;left:0;right:0;width:100%;display:flex;justify-content:center;align-items:center;background-color:var(--dark-surface);z-index:99999;gap:20px;padding:15px 0;box-sizing:border-box;border-bottom:2px solid var(--border-dark)}
body.light .tab-menu{border-bottom:2px solid var(--border-light);background-color:var(--light-surface)}
.tab-menu-settings{position:sticky;top:80px;left:0;right:0;width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:99998;gap:20px;padding:15px 0;box-sizing:border-box;background-color:var(--dark-surface)}
.status-message{font-size:14px;font-weight:500;width:100%;padding:8px 12px;transition:all .3s ease;opacity:1;border-left:3px solid var(--accent-color);margin-top:4px}
.status-message.success{color:var(--accent-color);border-left:3px solid var(--accent-color);padding-left:8px}
.status-message.error{color:#ef4444;border-left:3px solid #ef4444;padding-left:8px}
.status-message.hidden{display:none;opacity:0}
body.light .tab-menu-settings{background-color:var(--light-surface)}
.tab-button{background:none;border:none;padding:8px 12px;font-size:16px;font-weight:600;color:var(--text-light);cursor:pointer;transition:color 0.2s,background .2s;position:relative;display:flex;align-items:center;justify-content:center}
body.light .tab-button{color:var(--text-dark)}
.tab-icon{width:20px;height:20px;filter:brightness(0.8);transition:filter .2s}
.tab-button:hover .tab-icon{filter:brightness(1.2)}
body.light .tab-icon{filter:brightness(1.2)}
body.light .tab-button:hover .tab-icon{filter:brightness(0.8)}
.tab-button.active{color:var(--dark-surface);border:1px solid var(--accent-color);border-bottom:2px solid var(--accent-color)}
body.light .tab-button.active{color:var(--text-dark);background-color:#e0e0e0;border:1px solid var(--accent-color);border-bottom:2px solid var(--accent-color)}
.tab-button.active::after{content:'';position:absolute;bottom:-15px;left:0;width:100%;height:2px;background-color:var(--accent-color)}
.tab-button:hover{background:#ffffff1a}
body.light .tab-button:hover{background:#e0e0e0}
.tab-content{display:none}
.tab-content.active{display:block}
#menuPanel h3{font-size:18px;margin-bottom:15px;margin-top:20px;border-bottom:2px solid var(--border-dark);padding-bottom:8px;font-weight:600}
#menuPanel label{display:block;margin-top:15px;font-weight:700;font-size:14px}
#menuPanel input,#menuPanel select{width:100%;padding:10px;margin-top:5px;border-radius:10px;border:none;background-color:var(--dark-bg);color:#fff;font-size:14px}
#menuPanel button{margin-top:10px;padding:12px;width:100%;border:none;border-radius:50px;background-color:var(--dark-bg);color:var(--accent-color);border:1px solid var(--accent-color);font-weight:700;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,filter .2s;will-change:transform,box-shadow;pointer-events:auto}
body.light #menuPanel button{background-color:#e0e0e0;color:var(--accent-color);border:1px solid var(--accent-color)}
#menuPanel button:hover{transform:scale(1.05);box-shadow:0 2px 6px var(--shadow-dark);filter:brightness(1.1)}
#menuPanel button:active{transform:scale(0.95);filter:brightness(0.9)}
#colorPalette .color-option,.color-option{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:border .2s}
.color-option:hover{border:2px solid #fff}
body.light .color-option:hover{border:2px solid var(--text-dark)}
#menuPanel input[type="color"]{height:40px;padding:4px;cursor:pointer;margin-top:10px}
#recentBgList{margin-top:10px;display:flex;flex-direction:column;gap:8px;background-color:var(--dark-surface);color:#fff;padding:10px;border-radius:13px;width:300px;text-align:left;z-index:1005;box-shadow:0 4px 12px var(--shadow-dark);max-height:60%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5c5e60 var(--dark-surface)}
.recent-bg-item,#recentBgList .bg-preview{display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px;border-radius:10px;background-color:var(--dark-bg);transition:background-color 0.2s,box-shadow .2s;max-height:50px}
#recentBgList .bg-preview:hover,.recent-bg-item:hover{background-color:#3c4043;box-shadow:0 2px 8px var(--shadow-dark)}
body.light #recentBgList .bg-preview,body.light .recent-bg-item{background-color:#e0e0e0}
body.light #recentBgList .bg-preview:hover,body.light .recent-bg-item:hover{background-color:#d1d1d1}
#recentBgList .bg-preview img,#recentBgList .recent-bg-item img{width:50px;height:50px;object-fit:cover;border-radius:10px}
#recentBgList .recent-bg-item img{width:40px!important;height:30px!important}
#recentBgList .bg-preview span,#recentBgList .recent-bg-item span{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;color:var(--text-light);max-height:40px;word-break:break-word}
body.light #recentBgList .bg-preview span,body.light #recentBgList .recent-bg-item span{color:var(--text-dark)}
.recent-bg-preview{display:flex;gap:10px;cursor:pointer;padding:5px;border-radius:15px;background-color:var(--dark-bg);transition:background-color .2s}
.recentBgList .remove-bg-btn{margin-left:auto;color:var(--accent-color)}
.recentBgList .remove-bg-btn.hover{color:var(--accent-color)}
#bgFileInput{background-color:var(--dark-surface);color:var(--text-light);border:1px solid #5c5e60;border-radius:12px;padding:10px 16px;font-size:14px;width:100%;cursor:pointer;transition:background-color 0.2s,border-color 0.2s,box-shadow .2s}
#bgFileInput::-webkit-file-upload-button{background-color:var(--dark-surface);color:var(--text-light);border:1px solid var(--accent-color);border-radius:12px;padding:5px 10px;cursor:pointer}
#bgFileInput:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 6px var(--accent-color)}
.remove-bg-btn{cursor:pointer;color:var(--accent-color);font-weight:700;font-size:16px;padding:0 8px;transition:color .2s}
.remove-bg-btn:hover{color:var(--accent-color)}
.hidden{display:none!important}
#historyList{margin-top:10px;display:flex;flex-direction:column;gap:8px;max-height:60vh;scrollbar-width:thin;scrollbar-color:#5c5e60 transparent}
#historyList::-webkit-scrollbar{width:8px}
#historyList::-webkit-scrollbar-track{background:var(--dark-surface);border-radius:10px}
#historyList::-webkit-scrollbar-thumb{background:#5c5e60;border-radius:10px}
#historyList::-webkit-scrollbar-thumb:hover{background:#7a7c80}
body.light #historyList{scrollbar-color:#d1d1d1 var(--light-surface)}
body.light #historyList::-webkit-scrollbar-track{background:var(--light-surface)}
body.light #historyList::-webkit-scrollbar-thumb{background:#d1d1d1}
body.light #historyList::-webkit-scrollbar-thumb:hover{background:#b0b0b0}
.history-item{padding:10px;background-color:var(--dark-bg);border-radius:15px;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:space-between}
#historyList .history-item:hover{background-color:#3c4043}
.history-engine{font-size:12px;color:#888;margin-left:10px}
body.light .history-engine{color:#555}
.history-remove-btn{font-size:16px;color:#fff;cursor:pointer;padding:5px}
body.light .history-remove-btn{color:#363333}
.history-remove-btn:hover{color:var(--accent-color)}
#suggestions{position:absolute;top:calc(100% + 5px);left:0;right:0;width:100%;background-color:var(--dark-surface);color:var(--text-light);list-style:none;padding:8px 0;margin:0;border-radius:15px;box-shadow:0 2px 8px var(--shadow-light);overflow-x:hidden;display:none;max-height:200px;overflow-y:auto;z-index:1003;opacity:0;transition:opacity .3s ease;scrollbar-color:#ffffff40 transparent;scrollbar-width:thin}
#suggestions[style*="block"]{opacity:1}
#suggestions::-webkit-scrollbar{width:8px}
#suggestions::-webkit-scrollbar-track{background:var(--dark-surface);border-radius:10px}
#suggestions::-webkit-scrollbar-thumb{background:#5c5e60;border-radius:10px}
#suggestions::-webkit-scrollbar-thumb:hover{background:#7a7c80}
body.light #suggestions{scrollbar-color:#d1d1d1 var(--light-surface)}
body.light #suggestions::-webkit-scrollbar-track{background:var(--light-surface)}
body.light #suggestions::-webkit-scrollbar-thumb{background:#d1d1d1}
body.light #suggestions::-webkit-scrollbar-thumb:hover{background:#b0b0b0}
#suggestions li{padding:12px 16px;font-size:15px;cursor:pointer;transition:all .2s ease;position:relative;display:flex;align-items:center}
#suggestions li:hover{background-color:#3c4043;transform:scale(1.02)}
#suggestions li.selected{background-color:#4a4e52;font-weight:500}
#addFavoriteModal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--dark-surface);padding:20px;border:1px solid transparent;border-radius:20px;box-shadow:0 4px 12px var(--shadow-dark);z-index:10000;color:var(--text-light);width:320px;text-align:center;animation:scaleIn .18s ease-out forwards}
#addFavoriteModal label{display:block;margin-bottom:8px;font-weight:700}
#addFavoriteModal input{width:100%;padding:10px;margin-bottom:12px;border-radius:20px;border:1px solid transparent;background-color:var(--dark-bg);color:#fff}
#folderDropdown{width:100%;padding:10px;border-radius:20px;border:1px solid transparent;background-color:var(--dark-bg);color:#fff;margin-bottom:12px}
body.light #folderDropdown{background-color:var(--light-surface);color:var(--text-dark)}
#addFavoriteModal .button-group{display:flex;gap:10px;justify-content:center;margin-top:12px}
#addFavoriteModal button{width:50px;height:50px;border:1px solid var(--border-dark);border-radius:50%;background-color:var(--dark-bg);color:var(--text-light);cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s,background-color .2s;display:flex;align-items:center;justify-content:center}
body.light #addFavoriteModal button{background-color:var(--light-surface);color:var(--text-dark);border:1px solid var(--border-light)}
#addFavoriteModal button:hover{transform:scale(1.1);border-color:var(--accent-color);box-shadow:0 2px 6px var(--shadow-dark)}
.button-icon-favorite{width:25px;height:25px}
body.light #addFavoriteModal button:hover{box-shadow:0 2px 6px var(--shadow-light)}
#addFavoriteModal .close{position:absolute;top:12px;right:15px;font-size:22px;cursor:pointer;color:var(--text-light)}
#addFavoriteModal .close:hover{color:var(--accent-color)}
#accountModal{display:none;position:fixed;top:78px;right:20px;z-index:1005;width:320px;max-width:95vw;background:none;transition:none}
#accountModal .accent{background-color:var(--dark-bg);border-radius:20px}
#accountModal .accent:hover{transform:scale(1.08);background-color:var(--dark-bg);color:var(--accent-color);border:1px solid var(--accent-color);box-shadow:0 2px 8px var(--shadow-dark)}
body.light #accountModal .accent{background-color:#e0e0e0;color:var(--text-dark)}
body.light #accountModal .accent:hover{background-color:#e0e0e0;color:var(--accent-color)}
#accountModal.active{display:block}
#accountModalTitle{font-size:1.2rem;font-weight:700}
#accountModalInner{background-color:var(--dark-surface);color:var(--text-light);padding:20px;border-radius:20px;width:100%;text-align:left;box-shadow:0 4px 12px var(--shadow-dark);max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5c5e60 var(--dark-surface);display:flex;flex-direction:column;gap:16px;position:relative;min-width:0;max-width:100%;animation:modalFadeIn .18s;border:1px solid var(--border-dark)}
body.light #accountModalInner{background-color:var(--light-surface);color:var(--text-dark);box-shadow:0 4px 12px var(--shadow-light);border:1px solid var(--border-light)}
#accountModalInner::-webkit-scrollbar{width:8px}
#accountModalInner::-webkit-scrollbar-track{background:var(--dark-surface);border-radius:10px}
#accountModalInner::-webkit-scrollbar-thumb{background:#5c5e60;border-radius:10px}
#accountModalInner::-webkit-scrollbar-thumb:hover{background:#7a7c80}
body.light #accountModalInner::-webkit-scrollbar-track{background:var(--light-surface)}
body.light #accountModalInner::-webkit-scrollbar-thumb{background:#d1d1d1}
body.light #accountModalInner::-webkit-scrollbar-thumb:hover{background:#b0b0b0}
#accountModalInner .close{position:absolute;top:10px;right:14px;font-size:1.7rem;color:var(--text-light);cursor:pointer;transition:color .15s;z-index:2}
body.light #accountModalInner .close{color:var(--text-dark)}
#accountModalInner .close:hover{color:var(--accent-color)}
#accountForm{display:flex;flex-direction:column;gap:8px}
#accountForm input[type="text"],#accountForm input[type="password"]{padding:8px 12px;border-radius:17px;font-size:1rem;outline:none;background:var(--dark-bg);color:var(--text-light);transition:border 0.15s,box-shadow .15s;border:1px solid transparent}
body.light #accountForm input[type="text"],body.light #accountForm input[type="password"]{background:#fff;color:#222;border:1px solid var(--border-light)}
#accountForm input[type="text"]:focus,#accountForm input[type="password"]:focus{border-color:var(--accent-color);box-shadow:0 0 6px var(--accent-color)}
body.light #accountForm input[type="text"]:focus,body.light #accountForm input[type="password"]:focus{box-shadow:0 0 6px var(--shadow-light)}
#accountForm > div{display:flex;gap:8px;justify-content:center}
#accountForm .accent{max-height:60px;margin-top:10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px 16px}
#accountForm .text{color:var(--text-light)}
#accountLoggedIn{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%}
#accountLoggedIn .accent{min-width:90px;margin-top:10px}
#accountWelcome{font-size:1.2rem;font-weight:600;color:var(--text-light);margin-bottom:10px}
body.light #accountWelcome{color:var(--text-dark)}
.error-message{color:#f44;font-size:.98rem;margin-top:2px;display:none;text-align:center}
.welcome-section{font-size:1.2rem;font-weight:600;color:var(--text-light);text-align:center;margin-bottom:8px;padding:10px 0}
body.light .welcome-section{color:var(--text-dark)}
.profile-edit{background:var(--dark-bg);border-radius:15px;padding:20px;border:1px solid var(--border-dark);margin-bottom:0;width:100%;display:flex;flex-direction:column;gap:20px}
body.light .profile-edit{background:var(--light-surface);border:1px solid var(--border-light)}
.edit-section{display:flex;flex-direction:column;gap:8px}
.section-label{font-weight:600;color:var(--text-light);font-size:14px;margin-bottom:4px}
body.light .section-label{color:var(--text-dark)}
.input-group{display:flex;flex-direction:column;gap:8px}
.button-group{display:flex;gap:8px;justify-content:flex-start}
.preview-container{display:flex;justify-content:center;align-items:center;min-height:80px;border:2px dashed var(--border-dark);border-radius:10px;background-color:#ffffff0d}
body.light .preview-container{border-color:var(--border-light);background-color:#0000000d}
#picPreview img{max-width:100px;max-height:100px;border-radius:50%;box-shadow:0 2px 8px var(--shadow-dark);transition:transform .2s}
body.light #picPreview img{box-shadow:0 2px 8px var(--shadow-light)}
#picPreview img:hover{transform:scale(1.05)}
.logout-btn{width:100%;padding:12px;font-size:14px;font-weight:500;margin-top:8px}
.profile-edit input{background:var(--dark-input);border:1px solid var(--border-dark);color:var(--text-light);border-radius:10px;padding:10px;transition:border-color 0.2s,box-shadow .2s;width:100%}
body.light .profile-edit input{background:var(--light-surface);border:1px solid var(--border-light);color:var(--text-dark)}
.profile-edit input:focus{border-color:var(--accent-color);box-shadow:0 0 6px var(--shadow-dark)}
body.light .profile-edit input:focus{box-shadow:0 0 6px var(--shadow-light)}
.profile-edit label{font-weight:600;color:var(--text-light);margin-bottom:5px;display:block}
body.light .profile-edit label{color:var(--text-dark)}
@media (max-width: 480px) {
#accountModalInner{min-width:0;width:98vw;padding:18px 6vw}
#accountModal{right:1vw;width:98vw;max-width:98vw;top:60px}
}
@media (max-width: 600px) {
.tab-menu{padding:10px 0;gap:10px;width:100%}
}
#backgroundVideo{position:fixed;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}
#backgroundYouTube{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1}
@keyframes modalFadeIn {
0%{opacity:0;transform:translateX(100%)}
100%{opacity:1;transform:translateX(0)}
}
@keyframes scaleIn {
0%{opacity:0;transform:translate(-50%,-50%) scale(0.5)}
100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent-color)}
input#bgUrlInput:focus,input#searchInput:focus,input#accountUsername:focus,input#accountPassword:focus,input#modalName:focus,input#modalUrl:focus,div#voiceTranscript.transcript:focus{outline:none;border:1px solid var(--accent-color);box-shadow:0 0 6px var(--accent-color)}
#feedbackForm{display:flex;flex-direction:column;gap:12px;margin-top:10px}
#feedbackForm label{font-weight:700;font-size:14px;color:var(--text-light)}
body.light #feedbackForm label{color:var(--text-dark)}
#feedbackForm input[type="text"],#feedbackForm textarea{width:100%;padding:10px;border-radius:10px;border:1px solid transparent;background-color:var(--dark-bg);color:var(--text-light);font-size:14px;resize:vertical;transition:border-color 0.2s,box-shadow .2s}
#feedbackForm input[type="text"]:focus,#feedbackForm textarea:focus{outline:none;border:1px solid var(--accent-color);box-shadow:0 0 6px var(--accent-color)}
body.light #feedbackForm input[type="text"],body.light #feedbackForm textarea{background-color:#e0e0e0;color:var(--text-dark)}
#feedbackForm input[type="file"]{padding:8px;background-color:var(--dark-bg);color:var(--text-light);border-radius:10px;font-size:14px;cursor:pointer}
body.light #feedbackForm input[type="file"]{background-color:#e0e0e0;color:var(--text-dark)}
#feedbackForm button.accent{background-color:var(--dark-bg);color:var(--accent-color);border:1px solid var(--accent-color);padding:12px;border-radius:30px;font-weight:700;margin-bottom:20px;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,filter .2s}
body.light #feedbackForm button.accent{background-color:#e0e0e0;color:var(--accent-color);border:1px solid var(--accent-color)}
#feedbackForm button.accent:hover{transform:scale(1.05);box-shadow:0 2px 6px var(--shadow-dark);filter:brightness(1.1)}
body.light #feedbackForm button.accent:hover{box-shadow:0 2px 6px var(--shadow-light)}
#feedbackForm button.accent:active{transform:scale(0.95);filter:brightness(0.9)}
#feedbackStatus.success{color:#0c0}
.feedback-success{color:var(--accent-color)!important;padding:8px;margin-top:10px}
.feedback-error{color:#f44336!important;padding:8px;margin-top:10px}
#feedbackStatus{font-size:14px;text-align:center;margin-top:10px;display:none}
.social-links h4{font-size:16px;margin-bottom:10px;color:var(--text-light)}
.contact-area{background-color:var(--dark-bg);color:var(--text-light);border:none;margin-top:25px;padding:15px;border-radius:15px;text-align:left;text-decoration:none}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:60px;height:43px;background-color:var(--dark-bg);border-radius:50px;transition:transform 0.2s,background-color .2s;text-decoration:none}
.social-link:hover{transform:scale(1.1);background-color:var(--accent-color)}
.social-icon{width:20px;height:20px;filter:brightness(1);transition:filter .2s}
.social-link:hover .social-icon{filter:brightness(0.8)}
#accentColor::-webkit-color-swatch-wrapper{padding:0}
#accentColor::-webkit-color-swatch{border-radius:6px;color:var(--accent-color);border:1px solid var(--accent-color)}
#resetBrowserBtn{background-color:var(--dark-bg);color:var(--accent-color);border:1px solid var(--accent-color);border-radius:30px;padding:10px 20px;font-weight:700;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s,filter .2s}
body.light #resetBrowserBtn{background-color:#e0e0e0;color:var(--accent-color);border:1px solid var(--accent-color)}
#resetBrowserBtn:hover{transform:scale(1.05);box-shadow:0 2px 6px var(--shadow-dark);filter:brightness(1.1)}
body.light #resetBrowserBtn:hover{box-shadow:0 2px 6px var(--shadow-light)}
#resetBrowserBtn:active{transform:scale(0.95);filter:brightness(0.9)}
#favoriteContextMenu{display:none;position:absolute;background-color:var(--dark-surface);color:var(--text-light);border-radius:20px;box-shadow:0 4px 12px var(--shadow-dark);z-index:10000;min-width:150px;overflow:hidden}
body.light #favoriteContextMenu{background-color:var(--light-surface);color:var(--text-dark)}
.multi-search-menu{position:absolute;background-color:var(--dark-surface);color:var(--text-light);border:1px solid var(--border-dark);border-radius:20px;padding:8px;box-shadow:0 4px 12px var(--shadow-dark);z-index:10000;min-width:200px;display:none;opacity:0;transition:opacity .3s ease,transform .18s ease-out;transform:translateY(-10px) scale(0.95);flex-direction:column}
body.light .multi-search-menu{background-color:var(--light-surface);color:var(--text-dark);border:1px solid var(--border-light);box-shadow:0 4px 12px var(--shadow-light)}
.multi-search-list{max-height:250px;overflow-y:auto;overflow-x:hidden}
.multi-search-list::-webkit-scrollbar{width:6px}
.multi-search-list::-webkit-scrollbar-thumb{background-color:var(--border-dark);border-radius:3px}
.multi-search-list::-webkit-scrollbar-track{background:transparent}
body.light .multi-search-list::-webkit-scrollbar-thumb{background-color:var(--border-light)}
.multi-search-menu[style*="block"]{animation:scaleIn-multi .18s ease-out forwards}
.multi-search-item{padding:10px 15px;cursor:pointer;display:flex;align-items:center;gap:8px;border-radius:50px;font-size:14px;color:var(--text-light);transition:background-color .2s ease,transform .2s ease}
.multi-search-item:hover{background-color:var(--dark-bg);transform:scale(1.02)}
.multi-search-item.selected{background-color:transparent;color:var(--accent-color);font-weight:600}
body.light .multi-search-item.selected{color:var(--accent-color)}
body.light .multi-search-item{color:var(--text-dark)}
body.light .multi-search-item:hover{background-color:var(--light-surface)}
.multi-search-select-all{margin-top:8px;padding:10px 15px;cursor:pointer;border-top:1px solid transparent;border-radius:10px;text-align:center;font-weight:600;color:var(--text-light);transition:background-color .2s ease,color .2s ease}
.multi-search-select-all:hover{background-color:var(--dark-bg);border-radius:15px;color:var(--accent-color)}
body.light .multi-search-select-all{color:var(--text-dark)}
body.light .multi-search-select-all:hover{background-color:var(--light-bg);color:var(--accent-color)}
.search-icon{width:16px;height:16px}
@keyframes scaleIn-multi {
0%{opacity:0;transform:translateY(-10px) scale(0.95)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
.weather-popup{position:fixed!important;top:85px!important;left:10px!important;background-color:var(--dark-surface);color:var(--text-light);border:1px solid var(--border-dark);border-radius:20px;padding:8px 0;box-shadow:0 4px 12px var(--shadow-dark);z-index:10000;min-width:250px;max-width:300px;display:none;transition:opacity .3s ease,transform .18s ease-out;transform:translateY(-10px) scale(0.95)}
.close-popup{position:absolute;top:8px;right:12px;font-size:18px;cursor:pointer;color:var(--text-light);z-index:1;padding:5px}
.close-popup:hover{color:var(--accent-color)}
#popupLocation{padding:10px 15px 15px;font-size:14px;font-weight:600;color:var(--text-light);order:2}
#forecastList{display:flex;flex-direction:column;gap:0;max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5c5e60 var(--dark-surface);padding:0 8px}
#forecastList::-webkit-scrollbar{width:6px}
#forecastList::-webkit-scrollbar-track{background:var(--dark-surface)}
#forecastList::-webkit-scrollbar-thumb{background:#5c5e60;border-radius:10px}
#forecastList::-webkit-scrollbar-thumb:hover{background:#7a7c80}
body.light #forecastList{scrollbar-color:#d1d1d1 var(--light-surface)}
body.light #forecastList::-webkit-scrollbar-track{background:var(--light-surface)}
body.light #forecastList::-webkit-scrollbar-thumb{background:#d1d1d1}
.forecast-day{padding:10px 15px;cursor:default;display:flex;align-items:center;border-radius:50px;gap:8px;font-size:14px;color:var(--text-light);transition:background-color .2s ease,transform .2s ease;margin:2px 0}
.forecast-day:hover{background-color:#3c4043;transform:scale(1.02)}
body.light .forecast-day{color:var(--text-dark)}
body.light .forecast-day:hover{background-color:#e0e0e0}
.forecast-icon{font-size:16px}
.forecast-details{flex:1;display:flex;justify-content:space-between;align-items:center}
hr{border:none!important;border-top-width:0!important;margin:10px 0!important;padding:0!important;height:0!important;font-size:18px;font-weight:600;border-bottom:2px solid var(--border-dark)!important;padding-bottom:8px;background:none}
@media (forced-colors: active) {
:root{--accent-color:CanvasText}
body{background-color:Canvas;color:CanvasText}
body.light{background-color:Canvas;color:CanvasText}
.search-bar input,.buttons button,.favorite-item,#menuPanel,#accountModalInner,.weather-widget{background-color:Canvas;color:CanvasText;border:1px solid ButtonBorder}
.favorite-item a,.logo .logo-name,#suggestions,#suggestions li:hover,#suggestions li.selected{color:CanvasText;background-color:ButtonFace}
.weather-error{color:CanvasText;background-color:transparent}
button:hover,.favorite-item:hover,#addFavoriteBtn:hover{background-color:ButtonFace;color:CanvasText}
}
.status{font-weight:700;padding:8px;margin-top:10px;border-radius:4px;text-align:center;display:none}
.success{color:#155724}
.error{color:#721c24}
.tools-panel{position:fixed;top:0;left:-400px;width:400px;height:100vh;background-color:var(--dark-surface);color:var(--text-light);z-index:1002;transition:left .3s ease;overflow-y:auto;padding:20px;box-shadow:2px 0 10px var(--shadow-dark);border-right:1px solid var(--border-dark)}
.accent-tools{border-color:var(--accent-color);color:var(--light-bg)}
.accent-tools:hover{border-color:var(--accent-hover)}
.small-accent-tools{background-color:var(--dark-bg);color:var(--text-light);border:1px solid var(--border-dark)}
.small-accent-tools:hover{color:var(--accent-color);border-color:var(--accent-color)}
.clockDisplay{color:var(--accent-color)}
.tools-panel.open{left:0}
.tools-panel::-webkit-scrollbar{width:8px}
.tools-panel::-webkit-scrollbar-track{background:var(--dark-input);border-radius:10px}
.tools-panel::-webkit-scrollbar-thumb{background:var(--light-surface);border-radius:10px}
.tools-panel::-webkit-scrollbar-thumb:hover{background:var(--light-surface)}
.tools-panel::-webkit-scrollbar-corner{background:var(--dark-surface)}
#notesList::-webkit-scrollbar,#newsList::-webkit-scrollbar,#qrDisplay::-webkit-scrollbar{width:6px}
#notesList::-webkit-scrollbar-track,#newsList::-webkit-scrollbar-track,#qrDisplay::-webkit-scrollbar-track{background:var(--dark-input);border-radius:3px}
#notesList::-webkit-scrollbar-thumb,#newsList::-webkit-scrollbar-thumb,#qrDisplay::-webkit-scrollbar-thumb{background:var(--light-surface);border-radius:3px}
#notesList::-webkit-scrollbar-thumb:hover,#newsList::-webkit-scrollbar-thumb:hover,#qrDisplay::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}
.tools-panel,#notesList,#newsList,#qrDisplay{scrollbar-width:thin;scrollbar-color:#5c5e60 transparent}
.panel-close{position:absolute;top:15px;right:15px;font-size:24px;cursor:pointer;color:var(--text-light);z-index:1003;transition:color .2s ease;border-radius:50%}
.panel-close:hover{color:var(--accent-color)}
.widget-grid{display:flex;flex-direction:column;gap:15px;margin-top:20px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.widget-item{background-color:var(--dark-bg);padding:20px;border-radius:20px;border:1px solid var(--border-dark);box-shadow:0 2px 8px var(--shadow-dark);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;position:relative;cursor:grab;min-height:120px;display:flex;flex-direction:column;gap:10px}
.widget-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px var(--shadow-dark)}
.widget-item h4{margin:0;font-size:16px;font-weight:600;color:var(--text-light);display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border-dark);padding-bottom:5px}
.drag-handle{width:20px;height:20px;cursor:grab;opacity:.6;transition:opacity .2s ease;font-size:16px;color:var(--text-light);align-self:flex-start}
.widget-item:hover .drag-handle{opacity:1}
.widget-item.dragging{opacity:.7;transform:rotate(2deg);box-shadow:0 6px 20px var(--shadow-dark)!important;z-index:1004}
.widget-item.drag-over{border:2px dashed var(--accent-color);background-color:var(--dark-input)}
#clockDisplay{font-size:24px;font-weight:700;color:var(--accent-color);margin-bottom:5px}
#dateDisplay{font-size:12px;color:var(--text-light);opacity:.8;margin:0}
#financeWidget select{padding:10px;border-radius:8px;border:1px solid var(--border-dark);background-color:var(--dark-input);color:var(--text-light);font-size:14px;margin-bottom:10px;width:100%;box-sizing:border-box;transition:border-color .2s ease}
#financeWidget select:focus{border-color:var(--accent-color);outline:none}
#financeDisplay{margin-bottom:10px}
.finance-header{text-align:center;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid var(--border-dark)}
.finance-header strong{font-size:14px;color:var(--text-light);display:block;margin-bottom:5px}
.price{font-size:24px;font-weight:700;color:var(--accent-color);display:block}
.change{font-size:16px;font-weight:600;padding:4px 8px;border-radius:4px;display:inline-block}
.change.positive{background-color:#00ff001a;color:var(--success-color);border:1px solid var(--success-color)}
.change.negative{background-color:#ff00001a;color:var(--error-color);border:1px solid var(--error-color)}
.finance-details{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12px;color:var(--text-light)}
.finance-details div{padding:4px 0;border-bottom:1px dotted var(--border-dark)}
.finance-details div:last-child{border-bottom:none}
#noteInput{width:100%;padding:10px;border-radius:8px;border:1px solid var(--border-dark);background-color:var(--dark-input);color:var(--text-light);font-size:14px;transition:border-color .2s ease}
#noteInput:focus{border-color:var(--accent-color);outline:none}
#notesList{list-style:none;padding:0;max-height:150px;overflow-y:auto;margin:0}
#notesList li{padding:10px;margin-bottom:8px;background-color:var(--dark-input);border-radius:8px;display:flex;justify-content:space-between;align-items:center;transition:background-color .2s ease;border-left:3px solid var(--border-dark)}
#notesList li:hover{background-color:var(--dark-surface);border-left-color:var(--accent-color)}
#notesList li button{background-color:var(--dark-input);border:1px solid var(--border-dark);border-radius:5px;padding:5px 10px;color:var(--text-light);cursor:pointer;font-size:12px;transition:background-color .2s ease}
#notesList li button:hover{background-color:var(--accent-color);color:var(--dark-bg)}
#qrInput{width:100%;padding:10px;margin-bottom:10px;border-radius:8px;border:1px solid var(--border-dark);background-color:var(--dark-input);color:var(--text-light);font-size:14px}
#qrInput:focus{border-color:var(--accent-color);outline:none}
#qrDisplay{text-align:center;margin-top:10px;border:1px solid var(--border-dark);border-radius:8px;padding:10px;background-color:var(--dark-input);min-height:200px;overflow-y:auto}
#currencyWidget input[type="number"],#currencyWidget select{padding:10px;border-radius:8px;border:1px solid var(--border-dark);background-color:var(--dark-input);color:var(--text-light);font-size:14px;margin-bottom:8px;width:100%;box-sizing:border-box;transition:border-color .2s ease}
#currencyWidget input[type="number"]:focus,#currencyWidget select:focus{border-color:var(--accent-color);outline:none}
#currencyWidget span{font-size:18px;color:var(--accent-color);align-self:center;margin:0 8px}
#currencyWidget br{display:none}
#currencyResult{margin-top:10px;font-size:16px;font-weight:600;color:var(--accent-color);text-align:center;padding:10px;background-color:var(--dark-input);border-radius:8px;border:1px solid var(--border-dark)}
#newsWidget select{padding:10px;border-radius:8px;border:1px solid var(--border-dark);background-color:var(--dark-input);color:var(--text-light);font-size:14px;margin-bottom:10px;width:100%;box-sizing:border-box;transition:border-color .2s ease}
#newsWidget select:focus{border-color:var(--accent-color);outline:none}
#newsWidget{min-height:500px}
#newsList{list-style:none;padding:0;max-height:400px;overflow-y:auto;margin:0 0 10px;flex:1}
#newsList li{padding:12px;margin-bottom:8px;background-color:var(--dark-input);border-radius:8px;border-left:3px solid var(--border-dark);transition:background-color .2s ease}
#newsList li:hover{background-color:var(--dark-surface);border-left-color:var(--accent-color)}
#newsList li a{color:var(--text-light);text-decoration:none;font-size:14px}
#newsList li a:hover{color:var(--accent-color);text-decoration:underline}
body.light .tools-panel{background-color:var(--light-surface);color:var(--text-dark);box-shadow:2px 0 10px var(--shadow-light);border-right:1px solid var(--border-light)}
body.light .tools-panel::-webkit-scrollbar-track{background:var(--light-surface)}
body.light .tools-panel::-webkit-scrollbar-thumb{background:var(--accent-color)}
body.light .tools-panel::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}
body.light .tools-panel::-webkit-scrollbar-corner{background:var(--light-surface)}
body.light #notesList::-webkit-scrollbar-track,body.light #newsList::-webkit-scrollbar-track,body.light #qrDisplay::-webkit-scrollbar-track{background:#f1f3f4}
body.light #notesList::-webkit-scrollbar-thumb,body.light #newsList::-webkit-scrollbar-thumb,body.light #qrDisplay::-webkit-scrollbar-thumb{background:var(--accent-color)}
body.light #notesList::-webkit-scrollbar-thumb:hover,body.light #newsList::-webkit-scrollbar-thumb:hover,body.light #qrDisplay::-webkit-scrollbar-thumb:hover{background:var(--accent-hover)}
body.light .tools-panel,body.light #notesList,body.light #newsList,body.light #qrDisplay{scrollbar-color:var(--accent-color) #f1f3f4}
body.light .panel-close{color:var(--text-dark)}
body.light .panel-close:hover{color:var(--accent-color)}
body.light .widget-item{background-color:var(--light-bg);border:1px solid var(--border-light);box-shadow:0 2px 8px var(--shadow-light)}
body.light .widget-item:hover{box-shadow:0 4px 12px var(--shadow-light)}
body.light .widget-item h4{color:var(--text-dark);border-bottom:1px solid var(--border-light)}
body.light #dateDisplay{color:var(--text-dark);opacity:.8}
body.light .finance-header strong{color:var(--text-dark)}
body.light .price{color:var(--accent-color)}
body.light .change.positive{background-color:#00ff001a;color:var(--success-color);border:1px solid var(--success-color)}
body.light .change.negative{background-color:#ff00001a;color:var(--error-color);border:1px solid var(--error-color)}
body.light .finance-details{color:var(--text-dark)}
body.light .finance-details div{border-bottom:1px dotted var(--border-light)}
body.light #noteInput{background-color:#fff;color:var(--text-dark);border:1px solid var(--border-light)}
body.light #notesList li{background-color:#f1f3f4;border-left:3px solid var(--border-light)}
body.light #notesList li:hover{background-color:var(--light-surface);border-left-color:var(--accent-color)}
body.light #notesList li button{background-color:#f1f3f4;border:1px solid var(--border-light);color:var(--text-dark)}
body.light #notesList li button:hover{background-color:var(--accent-color);color:#fff}
body.light #qrInput{background-color:#fff;color:var(--text-dark);border:1px solid var(--border-light)}
body.light #qrDisplay{background-color:#f1f3f4;border:1px solid var(--border-light)}
body.light .accent-tools{border-color:var(--accent-color);color:var(--dark-bg)}
body.light .accent-tools:hover{border-color:var(--accent-hover)}
body.light .small-accent-tools{background-color:#f1f3f4;color:var(--text-dark);border:1px solid var(--border-light)}
body.light .small-accent-tools:hover{color:var(--accent-color);border-color:var(--accent-color)}
body.light .clockDisplay{color:var(--accent-color)}
body.light #currencyWidget input[type="number"],body.light #currencyWidget select{background-color:#fff;color:var(--text-dark);border:1px solid var(--border-light)}
body.light #currencyResult{background-color:#f1f3f4;color:var(--text-dark);border:1px solid var(--border-light)}
body.light #financeWidget select{background-color:#fff;color:var(--text-dark);border:1px solid var(--border-light)}
body.light #newsWidget select{background-color:#fff;color:var(--text-dark);border:1px solid var(--border-light)}
body.light #newsWidget{min-height:500px}
body.light #newsList li{background-color:#f1f3f4;border-left:3px solid var(--border-light)}
body.light #newsList li:hover{background-color:var(--light-surface);border-left-color:var(--accent-color)}
body.light #newsList li a{color:var(--text-dark)}
body.light #newsList li a:hover{color:var(--accent-color)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}
#toolsIcon{position:fixed;bottom:20px;left:20px;background-color:var(--dark-surface);border:none;border-radius:40px;padding:15px;cursor:pointer;font-size:16px;z-index:1001;transition:transform 0.2s,box-shadow .2s;will-change:transform,box-shadow;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:50px;height:50px;box-shadow:0 2px 8px var(--shadow-dark)}
#toolsIcon:hover{transform:scale(1.08);box-shadow:0 2px 8px var(--shadow-dark)}
#toolsIcon:active{transform:scale(0.96);filter:brightness(0.95)}
#toolsIcon img{width:20px;height:20px;vertical-align:middle}
body.light #toolsIcon{background-color:var(--light-surface);color:var(--text-dark);box-shadow:0 2px 8px var(--shadow-light)}
body.light #toolsIcon:hover{box-shadow:0 2px 8px var(--shadow-light)}
.tools-panel.open + #toolsIcon,.tools-panel.open ~ #toolsIcon{display:none}
.folder-item{cursor:pointer;transition:opacity .2s ease,transform .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60px}
.folder-item text{margin-top:5px;font-size:14px;color:var(--text-light)}
.folder-item:hover{opacity:1;transform:scale(1.05)}
#folderModal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1001;
    display: flex;
    justify-content: center;
    align-items: flex-start;   
    animation: none;
    overflow-y: auto;          
}

#folderModal .modal-content {
    background: var(--dark-surface);
    border: 1px solid var(--border-dark);
    border-radius: 20px;
    padding: 20px;
    max-width: 90%;
    width: fit-content;
    min-width: 280px;
    max-height: calc(100vh - 120px); 
    overflow-y: auto;
    color: var(--text-light);
    position: relative ;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: fit-content;
    min-height: 120px; 
}

body.light #folderModal .modal-content {
    background: var(--light-surface);
    border: 1px solid var(--border-light);
    color: var(--text-dark);
}

#folderModal .close { display: none; }
#folderTitle{font-size:18px;font-weight:700;text-align:left;cursor:pointer;padding:5px 0;border-bottom:1px solid var(--border-dark)}
body.light #folderTitle{border-bottom:1px solid var(--border-light)}
#folderTitle:hover{color:var(--accent-color)}
#folderFavorites{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;justify-content:center;padding-top:5px;padding-bottom:10px}
#folderContextMenu{display:none;position:absolute;background:var(--dark-surface);border:1px solid var(--border-dark);border-radius:20px;box-shadow:0 4px 12px var(--shadow-dark);z-index:1002;min-width:150px;color:var(--text-light)}
body.light #folderContextMenu{background:var(--light-surface);border:1px solid var(--border-light);box-shadow:0 4px 12px var(--shadow-light);color:var(--text-dark)}
#folderContextMenu .fav-menu-item{padding:8px 16px;cursor:pointer;border-radius:50px;transition:background-color .2s ease}
.fav-menu-item:hover{background-color:#3c4043;border-radius:50px;transform:scale(1.02)}
body.light #folderContextMenu .fav-menu-item:hover{background:var(--light-surface)}
.context-active{background:var(--dark-input)!important}
body.light .context-active{background:var(--light-surface)!important}
.history-item{display:flex;align-items:center;gap:8px}
.history-engine-logo{width:24px;height:24px}
.history-remove-btn{cursor:pointer;font-size:16px}
#idleScreen{position:fixed;inset:0;background:#2e2e2ee0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:999999;transition:opacity .7s cubic-bezier(0.4,0,0.2,1);opacity:0;color:#fff;user-select:none;pointer-events:none}
#idleScreen.active{display:flex;opacity:1;pointer-events:auto}
#idleClock{font-size:9rem;font-weight:700;letter-spacing:-.06em;color:var(--accent-color);text-shadow:0 8px 24px #0006}
#idleDate{font-size:1.4rem;font-weight:300}
body.light #idleScreen{background:#d4d4d4e0}
body.light #idleClock{color:var(--text-dark)}
body.light #idleDate{color:var(--text-dark)}
@keyframes idlePulse {
0%,100%{transform:scale(1)}
50%{transform:scale(1.015)}
}
@media (max-width:768px) {
#idleClock{font-size:5.5rem}
#idleDate{font-size:1.6rem}
}
@media (max-width:480px) {
#idleClock{font-size:4.5rem}
#idleDate{font-size:1.4rem}
}
#bgGalleryModal{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#202124f0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:9999;justify-content:center;align-items:center;padding:20px;overflow-y:auto;transition:opacity .25s ease}
#bgGalleryModal.show{display:flex;opacity:1}
body.light #bgGalleryModal{background:#f1f3f4f5}
#bgGalleryContent{background:var(--dark-surface);border-radius:20px;padding:24px;max-width:900px;width:100%;box-shadow:0 12px 32px var(--shadow-dark);border:1px solid var(--border-dark);color:var(--text-light);max-height:90vh;overflow:hidden;display:flex;flex-direction:column;animation:scaleIn-Gallery .22s ease-out}
body.light #bgGalleryContent{background:var(--light-surface);color:var(--text-dark);border:1px solid var(--border-light);box-shadow:0 12px 32px var(--shadow-light);animation:scaleIn-Gallery .22s ease-out;}
#bgGalleryTabs{display:flex;gap:10px;margin-bottom:18px;border-bottom:2px solid var(--border-dark);padding-bottom:10px;overflow-x:auto;scrollbar-width:none}
#bgGalleryTabs::-webkit-scrollbar{display:none}
.gallery-tab{padding:10px 18px;background:transparent;border:none;color:var(--text-light);cursor:pointer;border-radius:50px;transition:all .22s ease;font-size:15px;font-weight:600;white-space:nowrap}
.gallery-tab:hover{background:#ffffff1a;color:var(--accent-color)}
.gallery-tab.active{background:var(--accent-color);color:#fff;font-weight:600}
body.light .gallery-tab{color:var(--text-dark)}
body.light .gallery-tab:hover{background:#0000000d}
body.light .gallery-tab.active{background:var(--accent-color);color:#fff}
#bgSearchInput{width:100%;padding:13px 18px;border:1px solid var(--border-dark);border-radius:30px;background:var(--dark-input);color:var(--text-light);margin-bottom:18px;font-size:1rem;transition:all .22s ease;outline:none}
#bgSearchInput:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-color),transparent 80%)}
#bgSearchInput::placeholder{color:#aaa}
body.light #bgSearchInput{background:#fff;color:var(--text-dark);border-color:var(--border-light)}
#bgGalleryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;max-height:58vh;overflow-y:auto;padding:8px;scrollbar-width:thin;scrollbar-color:#5c5e60 transparent}
#bgGalleryGrid::-webkit-scrollbar{width:8px}
#bgGalleryGrid::-webkit-scrollbar-track{background:var(--dark-surface);border-radius:10px}
#bgGalleryGrid::-webkit-scrollbar-thumb{background:#5c5e60;border-radius:10px}
#bgGalleryGrid::-webkit-scrollbar-thumb:hover{background:#7a7c80}
body.light #bgGalleryGrid{scrollbar-color:#d1d1d1 var(--light-surface)}
body.light #bgGalleryGrid::-webkit-scrollbar-track{background:var(--light-surface)}
body.light #bgGalleryGrid::-webkit-scrollbar-thumb{background:#d1d1d1}
body.light #bgGalleryGrid::-webkit-scrollbar-thumb:hover{background:#b0b0b0}
.gallery-item{position:relative;border-radius:16px;overflow:hidden;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease;aspect-ratio:16/9;background:var(--dark-bg);box-shadow:0 3px 8px var(--shadow-dark)}
.gallery-item:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 14px 28px var(--shadow-dark);z-index:1}
.gallery-item img,.gallery-item video{width:100%;height:100%;object-fit:cover;display:block}
.gallery-item .overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000000d1);color:#fff;padding:16px 12px 12px;font-size:.88rem;font-weight:500;opacity:0;transition:opacity .25s ease;pointer-events:none}
.gallery-item:hover .overlay{opacity:1}
.gallery-source{position:absolute;top:12px;right:12px;background:var(--dark-surface);color:#fff;padding:5px 11px;border-radius:50px;font-size:.72rem;font-weight:600;backdrop-filter:blur(6px);text-transform:uppercase;letter-spacing:.5px}
body.light .gallery-source{background:var(--light-surface);color:#000}
.loading-spinner{width:38px;height:38px;border:3px solid #ffffff28;border-top:3px solid var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin:32px auto}
body.light .loading-spinner{border-color:#00000018;border-top-color:var(--accent-color)}
.gallery-actions{margin-top:16px;text-align:center}
#bgGalleryClose{min-width:120px;padding:10px 20px;border-radius:50px;font-weight:600}
@keyframes spin {
to{transform:rotate(360deg)}
}
@keyframes scaleIn-Gallery {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}