.wpa-superstar-wrap { max-width: none; margin: 0; padding-right: 20px; } .wpa-superstar-header { background: #fff; border-bottom: 1px solid #c3c4c7; box-shadow: 0 1px 0 rgba(0,0,0,.04); margin: 0 -20px 20px -20px; padding: 20px; display: flex; align-items: center; justify-content: space-between; width: auto; } .wpa-superstar-header h1 { font-size: 23px; font-weight: 400; margin: 0; padding: 0; line-height: 1.3; color: #1d2327; } .wpa-superstar-header-actions { display: flex; align-items: center; gap: 10px; } .wpa-superstar-version { color: #646970; font-size: 13px; font-weight: 400; } .wpa-settings-container { padding: 0 20px; max-width: 1100px; } /* RankMath-style Tabs */ .nav-tab-wrapper { margin: 0; padding-top: 0; border-bottom: 1px solid #ddd; line-height: inherit; position: relative; z-index: 1; } .nav-tab { margin: 0 6px 0 0; padding: 12px 20px; font-size: 14px; line-height: 1.4; font-weight: 500; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #646970; transition: all .2s ease; } .nav-tab:hover, .nav-tab:focus { background: transparent; color: #2271b1; border-bottom-color: rgba(34, 113, 177, 0.4); } .nav-tab-active, .nav-tab-active:focus, .nav-tab-active:focus:active, .nav-tab-active:hover { background: transparent; color: #2271b1; border: 0; border-bottom: 2px solid #2271b1; font-weight: 600; } /* RankMath-style toggle switches */ .wpa-superstar-toggle { margin: 15px 0; padding: 16px 20px; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.02); transition: all .15s ease-in-out; } .wpa-superstar-toggle:hover { border-color: #4caf50; box-shadow: 0 2px 6px rgba(0,0,0,0.04); } .wpa-superstar-toggle label { display: flex; align-items: center; font-size: 14px; line-height: 1.4; font-weight: 500; color: #1d2327; cursor: pointer; } .wpa-superstar-toggle .description { margin: 6px 0 0 52px; color: #666; font-size: 13px; line-height: 1.5; } /* RankMath-style Toggle Switch */ .wpa-toggle-switch { position: relative; display: inline-block; width: 40px; height: 20px; margin-right: 12px; } .wpa-toggle-switch input { opacity: 0; width: 0; height: 0; margin: 0; } .wpa-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #b5bfc9; transition: .15s ease-in-out; border-radius: 100px; border: 0; } .wpa-toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .15s ease-in-out; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .wpa-toggle-switch input:checked + .wpa-toggle-slider { background-color: #4caf50; } .wpa-toggle-switch input:checked + .wpa-toggle-slider:before { transform: translateX(20px); } .wpa-toggle-switch input:focus + .wpa-toggle-slider { box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(76, 175, 80, 0.25); } .wpa-toggle-switch:hover .wpa-toggle-slider:before { box-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* Plugin filters */ .wpa-plugin-filters { margin: 0 0 20px; padding: 0 0 12px; border-bottom: 1px solid #ddd; } .wpa-plugin-filters .button { margin: 0 8px 8px 0; padding: 4px 10px; font-size: 13px; line-height: 1.5; min-height: 30px; } /* Settings content spacing */ .wpa-settings-content { margin-top: 20px; padding: 0; } /* Loading overlay */ .wpa-loading-overlay { position: fixed; top: 32px; left: 160px; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.9); z-index: 100000; display: flex; align-items: center; justify-content: center; } .wp-list-table-container { position: relative; min-height: 400px; } .wp-list-table-container .spinner { float: none; margin: 0; } .wpa-superstar-workflow-toggle { margin: 20px 0; padding: 15px; background: #fff; border: 1px solid #ccd0d4; border-radius: 4px; } .wpa-superstar-workflow-toggle label { display: flex; align-items: center; font-weight: 600; margin-bottom: 10px; } .wpa-superstar-workflow-toggle .description { color: #666; margin-left: 52px; margin-top: 5px; } /* Toggle switch styles */ .switch { position: relative; display: inline-block; width: 42px; height: 22px; margin-right: 10px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 2px; bottom: 2px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #2271b1; } input:checked + .slider:before { transform: translateX(20px); } /* Active tab styles */ .nav-tab-active { background: #fff; border-bottom: 1px solid #fff; }