.form-control, .form-select { background-color: var(--bg-element); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: var(--radius-md); padding: 0.6rem 1rem; } .form-select option { background-color: var(--bg-element); color: var(--text-primary); } .form-control::placeholder { color: var(--text-tertiary); opacity: 0.8; } .form-control:focus, .form-select:focus { background-color: var(--bg-element-hover); border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-transparent); color: var(--text-primary); outline: none; } .btn-control { background-color: var(--bg-element); border: 1px solid var(--border-color); color: var(--text-primary); padding: 0.6rem 1.2rem; border-radius: var(--radius-md); font-weight: 500; transition: var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; cursor: pointer; position: relative; overflow: hidden; } .btn-control .icon-placeholder::before { font-family: sans-serif; } #prevPage .icon-placeholder::before { content: "\2190"; } #nextPage .icon-placeholder::before { content: "\2192"; } #playEpgProgramBtn .icon-placeholder::before { content: "\25B6"; } #saveSettingsBtn .icon-placeholder::before { content: "\1F4BE"; } #forceEpgRematchBtn .icon-placeholder::before { content: "\21BB"; } #exportSettingsBtn .icon-placeholder::before { content: "\1F4E4"; } #clearCacheBtn .icon-placeholder::before { content: "\1F5D1"; } #importSettingsInput + label .icon-placeholder::before { content: "\1F4E5"; } #sendM3UToServerBtn .icon-placeholder::before { content: "\1F4E1"; } .btn-control:hover:not(:disabled) { background-color: var(--bg-element-hover); border-color: var(--border-color-strong); transform: translateY(-1px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .btn-control:active:not(:disabled) { transform: translateY(0px) scale(0.98); box-shadow: 0 1px 2px rgba(0,0,0,0.05); } .btn-control.primary { background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: white !important; border: none; } .btn-control.primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-hover), var(--accent-primary)); transform: translateY(-1px); box-shadow: 0 3px 8px color-mix(in srgb, var(--accent-primary) 40%, transparent); } .btn-control:disabled { opacity: 0.6; cursor: not-allowed; } .btn-control.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; border-radius: var(--radius-sm); } .btn-control.btn-danger { background-color: var(--danger); border-color: var(--danger); color: white !important; } .btn-control.btn-danger:hover:not(:disabled) { background-color: color-mix(in srgb, var(--danger) 85%, black); border-color: color-mix(in srgb, var(--danger) 85%, black); box-shadow: 0 3px 8px color-mix(in srgb, var(--danger) 40%, transparent); } #loading-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(var(--rgb-bg-tertiary), 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } #loading-overlay.show { opacity: 1; pointer-events: auto; } .loader { width: 50px; height: 50px; border: 4px solid var(--accent-primary); border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #notification { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(120%); padding: 0.8rem 1.5rem; border-radius: var(--radius-md); box-shadow: 0 5px 15px var(--shadow-color); z-index: 2050; color: white; font-weight: 500; max-width: 90%; text-align: center; opacity: 0; transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1), transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid transparent; font-size: 0.9rem; } #notification.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } #notification.success { background-color: rgba(var(--rgb-accent-primary), 0.85); border-color: var(--accent-primary); } #notification.error { background-color: rgba(220, 53, 69, 0.85); border-color: var(--danger); } #notification.info { background-color: rgba(23, 162, 184, 0.85); border-color: var(--info); } #notification.warning { background-color: rgba(255, 193, 7, 0.85); border-color: var(--warning); color: #333; }