PluginProbe
MxChat – AI Chatbot & Content Generation for WordPress / 3.0.9
MxChat – AI Chatbot & Content Generation for WordPress v3.0.9
3.2.21 3.2.20 3.2.19 3.2.18 3.2.17 3.2.16 3.2.15 3.2.14 3.2.12 3.2.13 3.2.11 3.2.10 3.2.9 3.2.8 3.2.7 3.2.6 3.2.5 3.2.4 3.2.3 3.2.2 3.2.1 2.0.3 2.0.4 2.0.5 2.0.6 All 152 releases
← All changes | css/admin-content.css +1 -1622 3.2.93.0.9 View file →
@@ -491,61 +491,8 @@
491 491 border-color: var(--mxch-input-focus, #7873f5);
492 492 box-shadow: 0 0 0 3px var(--mxch-primary-light, rgba(120, 115, 245, 0.1));
493 493 }
494 494
495 -/* ─── Range slider (Images per article) ─────────────────────────── */
496 -
497 -.mxch-cg-slider-row {
498 - display: flex;
499 - align-items: center;
500 - gap: 12px;
501 -}
502 -
503 -.mxch-cg-slider {
504 - flex: 1;
505 - -webkit-appearance: none;
506 - appearance: none;
507 - height: 6px;
508 - border-radius: 3px;
509 - background: #e2e8f0;
510 - cursor: pointer;
511 -}
512 -
513 -.mxch-cg-slider:disabled {
514 - opacity: 0.5;
515 - cursor: not-allowed;
516 -}
517 -
518 -.mxch-cg-slider::-webkit-slider-thumb {
519 - -webkit-appearance: none;
520 - appearance: none;
521 - width: 18px;
522 - height: 18px;
523 - border-radius: 50%;
524 - background: var(--mxch-primary, #7873f5);
525 - border: 2px solid #fff;
526 - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
527 - cursor: pointer;
528 -}
529 -
530 -.mxch-cg-slider::-moz-range-thumb {
531 - width: 18px;
532 - height: 18px;
533 - border-radius: 50%;
534 - background: var(--mxch-primary, #7873f5);
535 - border: 2px solid #fff;
536 - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
537 - cursor: pointer;
538 -}
539 -
540 -.mxch-cg-slider-value {
541 - min-width: 24px;
542 - text-align: center;
543 - font-size: 14px;
544 - font-weight: 600;
545 - color: var(--mxch-primary, #7873f5);
546 -}
547 -
548 495 /* ─── Progress Bar (inside modal) ───────────────────────────────── */
549 496
550 497 .mxch-cg-progress {
551 498 margin-top: 14px;
@@ -857,13 +804,11 @@
857 804 }
858 805
859 806 .mxch-cg-images-col {
860 807 width: 100%;
861 - max-height: 50vh;
862 - min-height: 260px;
808 + max-height: 200px;
863 809 border-right: none;
864 810 border-bottom: 1px solid var(--mxch-card-border, #e2e4e9);
865 - overflow-y: auto;
866 811 }
867 812
868 813 .mxch-cg-images-grid {
869 814 grid-template-columns: repeat(2, 1fr);
@@ -874,25 +819,8 @@
874 819 .mxch-cg-left-tabs {
875 820 flex-shrink: 0;
876 821 }
877 822
878 - .mxch-seo-checklist {
879 - max-height: none;
880 - overflow-y: visible;
881 - }
882 -
883 - .mxch-seo-check-label {
884 - font-size: 12px;
885 - }
886 -
887 - .mxch-seo-check-detail {
888 - font-size: 11px;
889 - }
890 -
891 - .mxch-seo-check {
892 - padding: 8px 12px;
893 - }
894 -
895 823 .mxch-cg-chat-messages {
896 824 max-height: 180px;
897 825 }
898 826
@@ -1845,1555 +1773,6 @@
1845 1773
1846 1774 .mxch-cg-loading-spinner {
1847 1775 width: 64px;
1848 1776 height: 64px;
1849 - }
1850 -}
1851 -
1852 -/* ── SEO Panel ─────────────────────────────────────────── */
1853 -
1854 -.mxch-seo-panel {
1855 - display: flex;
1856 - flex-direction: column;
1857 - height: 100%;
1858 - overflow: hidden;
1859 -}
1860 -
1861 -.mxch-seo-score-header {
1862 - display: flex;
1863 - align-items: center;
1864 - gap: 10px;
1865 - padding: 12px;
1866 - border-bottom: 1px solid var(--mxch-card-border, #e2e4e9);
1867 - flex-shrink: 0;
1868 -}
1869 -
1870 -.mxch-seo-score-ring {
1871 - position: relative;
1872 - width: 48px;
1873 - height: 48px;
1874 - flex-shrink: 0;
1875 -}
1876 -
1877 -.mxch-seo-score-ring svg {
1878 - width: 48px;
1879 - height: 48px;
1880 - transform: rotate(-90deg);
1881 -}
1882 -
1883 -.mxch-seo-ring-bg {
1884 - fill: none;
1885 - stroke: var(--mxch-card-border, #e2e4e9);
1886 - stroke-width: 4;
1887 -}
1888 -
1889 -.mxch-seo-ring-fill {
1890 - fill: none;
1891 - stroke: var(--mxch-text-muted, #94a3b8);
1892 - stroke-width: 4;
1893 - stroke-linecap: round;
1894 - transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.4s;
1895 -}
1896 -
1897 -.mxch-seo-ring-fill.mxch-seo-good { stroke: #10b981; }
1898 -.mxch-seo-ring-fill.mxch-seo-ok { stroke: #f59e0b; }
1899 -.mxch-seo-ring-fill.mxch-seo-bad { stroke: #ef4444; }
1900 -
1901 -.mxch-seo-score-num {
1902 - position: absolute;
1903 - inset: 0;
1904 - display: flex;
1905 - align-items: center;
1906 - justify-content: center;
1907 - font-size: 14px;
1908 - font-weight: 700;
1909 - color: var(--mxch-text-primary, #1a1a2e);
1910 - line-height: 1;
1911 -}
1912 -
1913 -.mxch-seo-score-info {
1914 - flex: 1;
1915 - min-width: 0;
1916 - display: flex;
1917 - flex-direction: column;
1918 - gap: 2px;
1919 -}
1920 -
1921 -.mxch-seo-score-label {
1922 - font-size: 12px;
1923 - font-weight: 600;
1924 - color: var(--mxch-text-primary, #1a1a2e);
1925 -}
1926 -
1927 -.mxch-seo-score-summary {
1928 - font-size: 10px;
1929 - color: var(--mxch-text-muted, #94a3b8);
1930 - line-height: 1.3;
1931 -}
1932 -
1933 -.mxch-seo-analyze-btn {
1934 - width: 30px;
1935 - height: 30px;
1936 - border: 1px solid var(--mxch-card-border, #e2e4e9);
1937 - border-radius: 6px;
1938 - background: transparent;
1939 - color: var(--mxch-text-muted, #94a3b8);
1940 - cursor: pointer;
1941 - display: flex;
1942 - align-items: center;
1943 - justify-content: center;
1944 - flex-shrink: 0;
1945 - transition: all 0.15s;
1946 -}
1947 -
1948 -.mxch-seo-analyze-btn:hover {
1949 - color: var(--mxch-primary, #7873f5);
1950 - border-color: var(--mxch-primary, #7873f5);
1951 - background: rgba(120, 115, 245, 0.05);
1952 -}
1953 -
1954 -.mxch-seo-analyze-btn.mxch-spinning svg {
1955 - animation: mxch-spin 0.8s linear infinite;
1956 -}
1957 -
1958 -.mxch-seo-checklist {
1959 - flex: 1;
1960 - overflow-y: auto;
1961 - padding: 6px 0;
1962 -}
1963 -
1964 -.mxch-seo-empty {
1965 - display: flex;
1966 - flex-direction: column;
1967 - align-items: center;
1968 - justify-content: center;
1969 - gap: 8px;
1970 - padding: 32px 16px;
1971 - text-align: center;
1972 -}
1973 -
1974 -.mxch-seo-empty svg {
1975 - opacity: 0.2;
1976 - color: var(--mxch-text-muted, #94a3b8);
1977 -}
1978 -
1979 -.mxch-seo-empty span {
1980 - font-size: 11px;
1981 - color: var(--mxch-text-muted, #94a3b8);
1982 - line-height: 1.5;
1983 -}
1984 -
1985 -.mxch-seo-check {
1986 - display: flex;
1987 - align-items: flex-start;
1988 - gap: 8px;
1989 - padding: 7px 12px;
1990 - transition: background 0.1s;
1991 -}
1992 -
1993 -.mxch-seo-check:hover {
1994 - background: rgba(0, 0, 0, 0.02);
1995 -}
1996 -
1997 -.mxch-seo-check-icon {
1998 - width: 16px;
1999 - height: 16px;
2000 - flex-shrink: 0;
2001 - margin-top: 1px;
2002 - display: flex;
2003 - align-items: center;
2004 - justify-content: center;
2005 -}
2006 -
2007 -.mxch-seo-check-icon svg {
2008 - width: 14px;
2009 - height: 14px;
2010 -}
2011 -
2012 -.mxch-seo-check-icon.mxch-seo-pass { color: #10b981; }
2013 -.mxch-seo-check-icon.mxch-seo-warn { color: #f59e0b; }
2014 -.mxch-seo-check-icon.mxch-seo-fail { color: #ef4444; }
2015 -
2016 -.mxch-seo-check-content {
2017 - flex: 1;
2018 - min-width: 0;
2019 -}
2020 -
2021 -.mxch-seo-check-label {
2022 - font-size: 11px;
2023 - font-weight: 600;
2024 - color: var(--mxch-text-primary, #1a1a2e);
2025 - display: block;
2026 - line-height: 1.2;
2027 -}
2028 -
2029 -.mxch-seo-check-detail {
2030 - font-size: 10px;
2031 - color: var(--mxch-text-muted, #94a3b8);
2032 - display: block;
2033 - line-height: 1.4;
2034 - margin-top: 1px;
2035 -}
2036 -
2037 -.mxch-seo-check-fix {
2038 - width: 22px;
2039 - height: 22px;
2040 - flex-shrink: 0;
2041 - display: flex;
2042 - align-items: center;
2043 - justify-content: center;
2044 - border: none;
2045 - border-radius: 4px;
2046 - background: transparent;
2047 - color: var(--mxch-text-muted, #94a3b8);
2048 - cursor: pointer;
2049 - transition: all 0.15s;
2050 - padding: 0;
2051 - margin-top: -1px;
2052 -}
2053 -
2054 -.mxch-seo-check-fix:hover {
2055 - background: rgba(120, 115, 245, 0.1);
2056 - color: var(--mxch-primary, #7873f5);
2057 -}
2058 -
2059 -.mxch-seo-check-fix:disabled {
2060 - cursor: not-allowed;
2061 - opacity: 0.5;
2062 -}
2063 -
2064 -.mxch-seo-check-fix.mxch-seo-check-fixing {
2065 - opacity: 1;
2066 - color: var(--mxch-primary, #7873f5);
2067 -}
2068 -
2069 -.mxch-seo-check-fix.mxch-seo-check-fixing svg {
2070 - animation: mxch-spin 0.8s linear infinite;
2071 -}
2072 -
2073 -.mxch-seo-actions {
2074 - padding: 10px 12px;
2075 - border-top: 1px solid var(--mxch-card-border, #e2e4e9);
2076 - flex-shrink: 0;
2077 -}
2078 -
2079 -.mxch-seo-fix-btn {
2080 - width: 100%;
2081 - display: flex;
2082 - align-items: center;
2083 - justify-content: center;
2084 - gap: 6px;
2085 - padding: 8px 12px;
2086 - border: none;
2087 - border-radius: 6px;
2088 - background: linear-gradient(135deg, var(--mxch-primary, #7873f5), #6366f1);
2089 - color: #fff;
2090 - font-size: 12px;
2091 - font-weight: 600;
2092 - cursor: pointer;
2093 - transition: all 0.2s;
2094 -}
2095 -
2096 -.mxch-seo-fix-btn:hover {
2097 - filter: brightness(1.08);
2098 - box-shadow: 0 2px 8px rgba(120, 115, 245, 0.3);
2099 -}
2100 -
2101 -.mxch-seo-fix-btn:disabled {
2102 - opacity: 0.5;
2103 - cursor: not-allowed;
2104 - filter: none;
2105 - box-shadow: none;
2106 -}
2107 -
2108 -.mxch-seo-fix-btn.mxch-seo-fixing svg {
2109 - animation: mxch-spin 0.8s linear infinite;
2110 -}
2111 -
2112 -.mxch-seo-separator {
2113 - height: 1px;
2114 - background: var(--mxch-card-border, #e2e4e9);
2115 - margin: 4px 12px;
2116 - opacity: 0.6;
2117 -}
2118 -
2119 -/* ─── SEO Dashboard (Site-wide) ─────────────────────────────────── */
2120 -
2121 -.mxch-seod-filters {
2122 - display: flex;
2123 - align-items: center;
2124 - justify-content: space-between;
2125 - gap: 12px;
2126 - padding: 14px 18px;
2127 - border-bottom: 1px solid var(--mxch-card-border, #e2e4e9);
2128 - flex-wrap: wrap;
2129 -}
2130 -
2131 -.mxch-seod-filters-left {
2132 - display: flex;
2133 - align-items: center;
2134 - gap: 10px;
2135 - flex-wrap: wrap;
2136 -}
2137 -
2138 -.mxch-seod-filters-right {
2139 - display: flex;
2140 - align-items: center;
2141 - gap: 8px;
2142 -}
2143 -
2144 -.mxch-seod-select {
2145 - padding: 6px 10px;
2146 - border: 1px solid var(--mxch-input-border, #d1d5db);
2147 - border-radius: 6px;
2148 - background: var(--mxch-card-bg, #fff);
2149 - color: var(--mxch-text-primary, #1a1a2e);
2150 - font-size: 13px;
2151 - cursor: pointer;
2152 - outline: none;
2153 -}
2154 -
2155 -.mxch-seod-select:focus {
2156 - border-color: var(--mxch-primary, #7873f5);
2157 -}
2158 -
2159 -.mxch-seod-filter-pills {
2160 - display: flex;
2161 - gap: 4px;
2162 -}
2163 -
2164 -.mxch-seod-pill {
2165 - padding: 5px 12px;
2166 - border: 1px solid var(--mxch-input-border, #d1d5db);
2167 - border-radius: 20px;
2168 - background: transparent;
2169 - color: var(--mxch-text-muted, #6b7280);
2170 - font-size: 12px;
2171 - font-weight: 500;
2172 - cursor: pointer;
2173 - transition: all 0.15s ease;
2174 -}
2175 -
2176 -.mxch-seod-pill:hover {
2177 - border-color: var(--mxch-primary, #7873f5);
2178 - color: var(--mxch-primary, #7873f5);
2179 -}
2180 -
2181 -.mxch-seod-pill.active {
2182 - background: var(--mxch-primary, #7873f5);
2183 - border-color: var(--mxch-primary, #7873f5);
2184 - color: #fff;
2185 -}
2186 -
2187 -.mxch-seod-search-wrap {
2188 - position: relative;
2189 - display: flex;
2190 - align-items: center;
2191 -}
2192 -
2193 -.mxch-seod-search-wrap svg {
2194 - position: absolute;
2195 - left: 10px;
2196 - width: 14px;
2197 - height: 14px;
2198 - color: var(--mxch-text-muted, #6b7280);
2199 - pointer-events: none;
2200 -}
2201 -
2202 -.mxch-seod-search {
2203 - padding: 6px 10px 6px 30px;
2204 - border: 1px solid var(--mxch-input-border, #d1d5db);
2205 - border-radius: 6px;
2206 - background: var(--mxch-card-bg, #fff);
2207 - color: var(--mxch-text-primary, #1a1a2e);
2208 - font-size: 13px;
2209 - width: 180px;
2210 - outline: none;
2211 -}
2212 -
2213 -.mxch-seod-search:focus {
2214 - border-color: var(--mxch-primary, #7873f5);
2215 -}
2216 -
2217 -/* Table */
2218 -
2219 -.mxch-seod-table-wrap {
2220 - min-height: 200px;
2221 - position: relative;
2222 -}
2223 -
2224 -/* ─── Column Header Row ─────────────────────────────────────────── */
2225 -
2226 -.mxch-seod-header {
2227 - display: flex;
2228 - align-items: center;
2229 - padding: 8px 18px;
2230 - gap: 12px;
2231 - background: var(--mxch-card-bg, #f8f9fa);
2232 - border-bottom: 2px solid var(--mxch-card-border, #e2e4e9);
2233 - position: sticky;
2234 - top: 0;
2235 - z-index: 2;
2236 -}
2237 -
2238 -.mxch-seod-header-cell {
2239 - font-size: 11px;
2240 - font-weight: 600;
2241 - text-transform: uppercase;
2242 - letter-spacing: 0.5px;
2243 - color: var(--mxch-text-muted, #6b7280);
2244 - cursor: pointer;
2245 - user-select: none;
2246 - white-space: nowrap;
2247 - transition: color 0.15s ease;
2248 -}
2249 -
2250 -.mxch-seod-header-cell:hover {
2251 - color: var(--mxch-text-primary, #1a1a2e);
2252 -}
2253 -
2254 -.mxch-seod-header-cell.mxch-seod-header-active {
2255 - color: var(--mxch-primary, #7873f5);
2256 -}
2257 -
2258 -.mxch-seod-header-title {
2259 - flex: 1;
2260 - min-width: 0;
2261 -}
2262 -
2263 -.mxch-seod-header-date {
2264 - width: 90px;
2265 - text-align: center;
2266 - flex-shrink: 0;
2267 -}
2268 -
2269 -.mxch-seod-header-score {
2270 - width: 48px;
2271 - text-align: center;
2272 - flex-shrink: 0;
2273 -}
2274 -
2275 -.mxch-seod-header-clicks {
2276 - width: 52px;
2277 - text-align: center;
2278 - flex-shrink: 0;
2279 -}
2280 -
2281 -.mxch-seod-header-impressions {
2282 - width: 52px;
2283 - text-align: center;
2284 - flex-shrink: 0;
2285 -}
2286 -
2287 -.mxch-seod-sort-arrow {
2288 - font-size: 9px;
2289 - vertical-align: middle;
2290 - margin-left: 2px;
2291 -}
2292 -
2293 -/* ─── Row Columns ─────────────────────────────────────────────── */
2294 -
2295 -.mxch-seod-cell-date {
2296 - width: 90px;
2297 - flex-shrink: 0;
2298 - justify-content: center;
2299 -}
2300 -
2301 -.mxch-seod-date {
2302 - font-size: 12px;
2303 - color: var(--mxch-text-muted, #6b7280);
2304 -}
2305 -
2306 -.mxch-seod-cell-clicks,
2307 -.mxch-seod-cell-impressions {
2308 - width: 52px;
2309 - flex-shrink: 0;
2310 - justify-content: center;
2311 - font-size: 12px;
2312 - color: var(--mxch-text-muted, #6b7280);
2313 -}
2314 -
2315 -.mxch-seod-row {
2316 - border-bottom: 1px solid var(--mxch-card-border, #e2e4e9);
2317 - cursor: pointer;
2318 - transition: background 0.15s ease;
2319 -}
2320 -
2321 -.mxch-seod-row:last-child {
2322 - border-bottom: none;
2323 -}
2324 -
2325 -.mxch-seod-row:hover {
2326 - background: rgba(120, 115, 245, 0.03);
2327 -}
2328 -
2329 -.mxch-seod-row.mxch-seod-active {
2330 - background: rgba(120, 115, 245, 0.03);
2331 -}
2332 -
2333 -.mxch-seod-row-main {
2334 - display: flex;
2335 - align-items: center;
2336 - padding: 12px 18px;
2337 - gap: 12px;
2338 -}
2339 -
2340 -.mxch-seod-cell {
2341 - display: flex;
2342 - align-items: center;
2343 -}
2344 -
2345 -.mxch-seod-header-check,
2346 -.mxch-seod-cell-check {
2347 - width: 28px;
2348 - flex-shrink: 0;
2349 - display: flex;
2350 - align-items: center;
2351 - justify-content: center;
2352 -}
2353 -
2354 -.mxch-seod-header-check input,
2355 -.mxch-seod-cell-check input {
2356 - width: 15px;
2357 - height: 15px;
2358 - margin: 0;
2359 - cursor: pointer;
2360 - accent-color: var(--mxch-primary, #7873f5);
2361 -}
2362 -
2363 -.mxch-seod-row.mxch-seod-row-optimizing {
2364 - opacity: 0.7;
2365 - pointer-events: none;
2366 -}
2367 -
2368 -.mxch-seod-row.mxch-seod-row-optimizing .mxch-seod-score-badge {
2369 - visibility: hidden;
2370 -}
2371 -
2372 -.mxch-seod-row-spinner-wrap {
2373 - position: absolute;
2374 - top: 0;
2375 - left: 0;
2376 - right: 0;
2377 - bottom: 0;
2378 - display: flex;
2379 - align-items: center;
2380 - justify-content: center;
2381 -}
2382 -
2383 -.mxch-seod-row-spinner {
2384 - width: 24px;
2385 - height: 24px;
2386 - border: 2.5px solid var(--mxch-card-border, #e2e4e9);
2387 - border-top-color: var(--mxch-primary, #7873f5);
2388 - border-radius: 50%;
2389 - animation: mxch-spin 0.6s linear infinite;
2390 - box-sizing: border-box;
2391 -}
2392 -
2393 -.mxch-seod-cell-title {
2394 - flex: 1;
2395 - min-width: 0;
2396 - flex-direction: column;
2397 - align-items: flex-start;
2398 - gap: 2px;
2399 -}
2400 -
2401 -.mxch-seod-title {
2402 - font-size: 13.5px;
2403 - font-weight: 500;
2404 - color: var(--mxch-text-primary, #1a1a2e);
2405 - white-space: nowrap;
2406 - overflow: hidden;
2407 - text-overflow: ellipsis;
2408 - max-width: 100%;
2409 -}
2410 -
2411 -.mxch-seod-meta {
2412 - font-size: 11.5px;
2413 - color: var(--mxch-text-muted, #6b7280);
2414 -}
2415 -
2416 -.mxch-seod-cell-score {
2417 - width: 48px;
2418 - justify-content: center;
2419 - flex-shrink: 0;
2420 - position: relative;
2421 -}
2422 -
2423 -.mxch-seod-score-badge {
2424 - width: 36px;
2425 - height: 36px;
2426 - border-radius: 50%;
2427 - display: flex;
2428 - align-items: center;
2429 - justify-content: center;
2430 - font-size: 12px;
2431 - font-weight: 700;
2432 - border: 2.5px solid;
2433 -}
2434 -
2435 -.mxch-seod-score-badge.mxch-seod-good {
2436 - color: #10b981;
2437 - border-color: #10b981;
2438 - background: rgba(16, 185, 129, 0.08);
2439 -}
2440 -
2441 -.mxch-seod-score-badge.mxch-seod-ok {
2442 - color: #f59e0b;
2443 - border-color: #f59e0b;
2444 - background: rgba(245, 158, 11, 0.08);
2445 -}
2446 -
2447 -.mxch-seod-score-badge.mxch-seod-bad {
2448 - color: #ef4444;
2449 - border-color: #ef4444;
2450 - background: rgba(239, 68, 68, 0.08);
2451 -}
2452 -
2453 -.mxch-seod-score-badge.mxch-seod-unscored {
2454 - color: var(--mxch-text-muted, #6b7280);
2455 - border-color: var(--mxch-input-border, #d1d5db);
2456 - background: transparent;
2457 - font-size: 14px;
2458 -}
2459 -
2460 -.mxch-seod-cell-status {
2461 - width: 90px;
2462 - justify-content: center;
2463 - flex-shrink: 0;
2464 -}
2465 -
2466 -.mxch-seod-status {
2467 - font-size: 12px;
2468 - font-weight: 500;
2469 - padding: 3px 10px;
2470 - border-radius: 12px;
2471 -}
2472 -
2473 -.mxch-seod-status-good {
2474 - color: #10b981;
2475 - background: rgba(16, 185, 129, 0.1);
2476 -}
2477 -
2478 -.mxch-seod-status-warn {
2479 - color: #f59e0b;
2480 - background: rgba(245, 158, 11, 0.1);
2481 -}
2482 -
2483 -.mxch-seod-status-bad {
2484 - color: #ef4444;
2485 - background: rgba(239, 68, 68, 0.1);
2486 -}
2487 -
2488 -.mxch-seod-status-unscored {
2489 - color: var(--mxch-text-muted, #6b7280);
2490 - background: rgba(107, 114, 128, 0.08);
2491 -}
2492 -
2493 -/* ─── SEO Detail Modal ───────────────────────────────────────── */
2494 -
2495 -.mxch-seod-modal-overlay {
2496 - position: fixed;
2497 - inset: 0;
2498 - z-index: 100000;
2499 - background: rgba(0, 0, 0, 0);
2500 - display: flex;
2501 - align-items: center;
2502 - justify-content: center;
2503 - transition: background 0.2s ease;
2504 -}
2505 -
2506 -.mxch-seod-modal-overlay.mxch-seod-modal-visible {
2507 - background: rgba(0, 0, 0, 0.45);
2508 -}
2509 -
2510 -.mxch-seod-modal {
2511 - background: var(--mxch-card-bg, #fff);
2512 - border-radius: 12px;
2513 - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
2514 - width: 90%;
2515 - max-width: 580px;
2516 - max-height: 80vh;
2517 - display: flex;
2518 - flex-direction: column;
2519 - opacity: 0;
2520 - transform: translateY(12px) scale(0.98);
2521 - transition: opacity 0.2s ease, transform 0.2s ease;
2522 -}
2523 -
2524 -.mxch-seod-modal-visible .mxch-seod-modal {
2525 - opacity: 1;
2526 - transform: translateY(0) scale(1);
2527 -}
2528 -
2529 -.mxch-seod-modal-header {
2530 - display: flex;
2531 - align-items: center;
2532 - justify-content: space-between;
2533 - padding: 16px 20px;
2534 - border-bottom: 1px solid var(--mxch-card-border, #e2e4e9);
2535 - flex-shrink: 0;
2536 -}
2537 -
2538 -.mxch-seod-modal-title {
2539 - font-size: 15px;
2540 - font-weight: 600;
2541 - color: var(--mxch-text-primary, #1a1a2e);
2542 - margin: 0;
2543 - white-space: nowrap;
2544 - overflow: hidden;
2545 - text-overflow: ellipsis;
2546 - min-width: 0;
2547 - flex: 1;
2548 - padding-right: 12px;
2549 -}
2550 -
2551 -.mxch-seod-modal-view-page {
2552 - display: inline-flex;
2553 - align-items: center;
2554 - gap: 4px;
2555 - font-size: 12px;
2556 - font-weight: 500;
2557 - color: var(--mxch-accent, #6366f1);
2558 - text-decoration: none;
2559 - padding: 4px 10px;
2560 - border-radius: 6px;
2561 - transition: color 0.15s, background 0.15s;
2562 - flex-shrink: 0;
2563 - margin-right: 8px;
2564 - white-space: nowrap;
2565 -}
2566 -
2567 -.mxch-seod-modal-view-page:hover {
2568 - color: var(--mxch-accent-hover, #4f46e5);
2569 - background: rgba(99, 102, 241, 0.08);
2570 - text-decoration: none;
2571 -}
2572 -
2573 -.mxch-seod-modal-view-page svg {
2574 - flex-shrink: 0;
2575 -}
2576 -
2577 -.mxch-seod-modal-close {
2578 - background: none;
2579 - border: none;
2580 - cursor: pointer;
2581 - color: var(--mxch-text-muted, #6b7280);
2582 - padding: 4px;
2583 - border-radius: 6px;
2584 - transition: color 0.15s, background 0.15s;
2585 - flex-shrink: 0;
2586 -}
2587 -
2588 -.mxch-seod-modal-close:hover {
2589 - color: var(--mxch-text-primary, #1a1a2e);
2590 - background: rgba(0, 0, 0, 0.05);
2591 -}
2592 -
2593 -.mxch-seod-modal-body {
2594 - padding: 16px 20px;
2595 - overflow-y: auto;
2596 - flex: 1;
2597 - min-height: 0;
2598 -}
2599 -
2600 -/* Detail content (reused inside modal) */
2601 -
2602 -.mxch-seod-detail {
2603 - cursor: default;
2604 -}
2605 -
2606 -.mxch-seod-detail-loading {
2607 - display: flex;
2608 - align-items: center;
2609 - gap: 8px;
2610 - padding: 16px 0;
2611 - color: var(--mxch-text-muted, #6b7280);
2612 - font-size: 13px;
2613 -}
2614 -
2615 -.mxch-seod-spinner {
2616 - width: 16px;
2617 - height: 16px;
2618 - border: 2px solid var(--mxch-input-border, #d1d5db);
2619 - border-top-color: var(--mxch-primary, #7873f5);
2620 - border-radius: 50%;
2621 - animation: mxch-spin 0.6s linear infinite;
2622 -}
2623 -
2624 -.mxch-seod-detail-error {
2625 - padding: 16px 0;
2626 - color: #ef4444;
2627 - font-size: 13px;
2628 -}
2629 -
2630 -.mxch-seod-checks {
2631 - background: var(--mxch-card-bg, #fff);
2632 - border: 1px solid var(--mxch-card-border, #e2e4e9);
2633 - border-radius: 8px;
2634 - overflow: hidden;
2635 -}
2636 -
2637 -.mxch-seod-check {
2638 - display: flex;
2639 - align-items: flex-start;
2640 - gap: 10px;
2641 - padding: 10px 14px;
2642 - border-bottom: 1px solid var(--mxch-card-border, #e2e4e9);
2643 -}
2644 -
2645 -.mxch-seod-check:last-child {
2646 - border-bottom: none;
2647 -}
2648 -
2649 -.mxch-seod-check-sep {
2650 - height: 1px;
2651 - background: var(--mxch-card-border, #e2e4e9);
2652 - opacity: 0.6;
2653 -}
2654 -
2655 -.mxch-seod-check-icon {
2656 - width: 18px;
2657 - height: 18px;
2658 - flex-shrink: 0;
2659 - margin-top: 1px;
2660 -}
2661 -
2662 -.mxch-seod-check-icon svg {
2663 - width: 18px;
2664 - height: 18px;
2665 -}
2666 -
2667 -.mxch-seod-check-pass .mxch-seod-check-icon { color: #10b981; }
2668 -.mxch-seod-check-warn .mxch-seod-check-icon { color: #f59e0b; }
2669 -.mxch-seod-check-fail .mxch-seod-check-icon { color: #ef4444; }
2670 -
2671 -.mxch-seod-check-text {
2672 - display: flex;
2673 - flex-direction: column;
2674 - gap: 1px;
2675 - min-width: 0;
2676 -}
2677 -
2678 -.mxch-seod-check-label {
2679 - font-size: 13px;
2680 - font-weight: 500;
2681 - color: var(--mxch-text-primary, #1a1a2e);
2682 -}
2683 -
2684 -.mxch-seod-check-detail {
2685 - font-size: 12px;
2686 - color: var(--mxch-text-muted, #6b7280);
2687 -}
2688 -
2689 -.mxch-seod-addon-badge {
2690 - display: inline-flex;
2691 - align-items: center;
2692 - padding: 1px 6px;
2693 - margin-left: 6px;
2694 - border-radius: 20px;
2695 - font-size: 9px;
2696 - font-weight: 700;
2697 - text-transform: uppercase;
2698 - letter-spacing: 0.5px;
2699 - background: linear-gradient(135deg, rgba(120, 115, 245, 0.15), rgba(168, 139, 250, 0.15));
2700 - color: var(--mxch-primary, #7873f5);
2701 - line-height: 1;
2702 - vertical-align: middle;
2703 - text-decoration: none;
2704 - cursor: pointer;
2705 -}
2706 -
2707 -.mxch-seod-addon-badge:hover {
2708 - background: linear-gradient(135deg, rgba(120, 115, 245, 0.25), rgba(168, 139, 250, 0.25));
2709 - text-decoration: none;
2710 - color: var(--mxch-primary, #7873f5);
2711 -}
2712 -
2713 -.mxch-seod-pro-badge {
2714 - background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.15));
2715 - color: #d97706;
2716 -}
2717 -
2718 -.mxch-seod-pro-badge:hover {
2719 - background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(251, 191, 36, 0.25));
2720 - color: #d97706;
2721 -}
2722 -
2723 -.mxch-seod-detail-actions {
2724 - display: flex;
2725 - justify-content: flex-end;
2726 - margin-top: 12px;
2727 -}
2728 -
2729 -.mxch-seod-optimize-btn {
2730 - display: inline-flex;
2731 - align-items: center;
2732 - gap: 6px;
2733 - padding: 7px 16px;
2734 - background: linear-gradient(135deg, #7873f5, #6366f1);
2735 - color: #fff;
2736 - border: none;
2737 - border-radius: 6px;
2738 - font-size: 12.5px;
2739 - font-weight: 600;
2740 - cursor: pointer;
2741 - transition: filter 0.15s ease, box-shadow 0.15s ease;
2742 -}
2743 -
2744 -.mxch-seod-optimize-btn:hover {
2745 - filter: brightness(1.08);
2746 - box-shadow: 0 2px 8px rgba(120, 115, 245, 0.3);
2747 -}
2748 -
2749 -.mxch-seod-optimize-btn:disabled {
2750 - opacity: 0.6;
2751 - cursor: not-allowed;
2752 -}
2753 -
2754 -.mxch-seod-optimize-btn svg {
2755 - animation: none;
2756 -}
2757 -
2758 -.mxch-seod-optimize-btn:disabled svg {
2759 - animation: mxch-spin 0.8s linear infinite;
2760 -}
2761 -
2762 -/* Footer */
2763 -
2764 -.mxch-seod-footer {
2765 - display: flex;
2766 - align-items: center;
2767 - gap: 12px;
2768 - padding: 12px 18px;
2769 - border-top: 1px solid var(--mxch-card-border, #e2e4e9);
2770 - flex-wrap: wrap;
2771 -}
2772 -
2773 -.mxch-seod-scan-btn {
2774 - display: inline-flex;
2775 - align-items: center;
2776 - gap: 6px;
2777 - padding: 7px 14px;
2778 - background: var(--mxch-card-bg, #fff);
2779 - color: var(--mxch-primary, #7873f5);
2780 - border: 1px solid var(--mxch-primary, #7873f5);
2781 - border-radius: 6px;
2782 - font-size: 12.5px;
2783 - font-weight: 600;
2784 - cursor: pointer;
2785 - transition: all 0.15s ease;
2786 -}
2787 -
2788 -.mxch-seod-scan-btn:hover {
2789 - background: var(--mxch-primary, #7873f5);
2790 - color: #fff;
2791 -}
2792 -
2793 -.mxch-seod-scan-btn:disabled {
2794 - opacity: 0.6;
2795 - cursor: not-allowed;
2796 - background: var(--mxch-primary, #7873f5);
2797 - color: #fff;
2798 -}
2799 -
2800 -.mxch-seod-bulk-note {
2801 - font-size: 11px;
2802 - color: var(--mxch-text-muted, #94a3b8);
2803 - font-style: italic;
2804 -}
2805 -
2806 -.mxch-seod-bulk-locked {
2807 - opacity: 0.65;
2808 - cursor: not-allowed;
2809 - background: var(--mxch-card-bg, #1e1e2e);
2810 - color: var(--mxch-text-muted, #94a3b8);
2811 - border: 1px dashed var(--mxch-card-border, #e2e4e9);
2812 -}
2813 -
2814 -.mxch-seod-bulk-locked:hover {
2815 - background: var(--mxch-card-bg, #1e1e2e);
2816 - color: var(--mxch-text-muted, #94a3b8);
2817 -}
2818 -
2819 -.mxch-seod-bulk-locked .mxch-cg-pro-badge {
2820 - margin-left: 4px;
2821 - opacity: 1;
2822 -}
2823 -
2824 -.mxch-seod-optimize-selected-btn {
2825 - background: var(--mxch-primary, #7873f5);
2826 - color: #fff;
2827 - white-space: nowrap;
2828 -}
2829 -
2830 -.mxch-seod-optimize-selected-btn:hover {
2831 - background: var(--mxch-primary-hover, #6963e6);
2832 - color: #fff;
2833 -}
2834 -
2835 -.mxch-seod-scan-stop-btn {
2836 - color: #ef4444;
2837 - border-color: #ef4444;
2838 -}
2839 -
2840 -.mxch-seod-scan-stop-btn:hover {
2841 - background: #ef4444;
2842 - color: #fff;
2843 -}
2844 -
2845 -.mxch-seod-scan-stop-btn:disabled {
2846 - background: #ef4444;
2847 - color: #fff;
2848 - border-color: #ef4444;
2849 -}
2850 -
2851 -.mxch-seod-scan-status {
2852 - font-size: 12.5px;
2853 - color: var(--mxch-text-muted, #6b7280);
2854 -}
2855 -
2856 -.mxch-seod-scan-progress {
2857 - font-weight: 600;
2858 - color: var(--mxch-primary, #7873f5);
2859 -}
2860 -
2861 -.mxch-seod-pagination {
2862 - display: flex;
2863 - align-items: center;
2864 - gap: 8px;
2865 - margin-left: auto;
2866 -}
2867 -
2868 -.mxch-seod-page-btn {
2869 - padding: 5px 12px;
2870 - border: 1px solid var(--mxch-input-border, #d1d5db);
2871 - border-radius: 6px;
2872 - background: var(--mxch-card-bg, #fff);
2873 - color: var(--mxch-text-primary, #1a1a2e);
2874 - font-size: 12.5px;
2875 - cursor: pointer;
2876 - transition: all 0.15s ease;
2877 -}
2878 -
2879 -.mxch-seod-page-btn:hover {
2880 - border-color: var(--mxch-primary, #7873f5);
2881 - color: var(--mxch-primary, #7873f5);
2882 -}
2883 -
2884 -.mxch-seod-page-info {
2885 - font-size: 12.5px;
2886 - color: var(--mxch-text-muted, #6b7280);
2887 -}
2888 -
2889 -/* Loading & Empty */
2890 -
2891 -.mxch-seod-loading {
2892 - display: flex;
2893 - flex-direction: column;
2894 - align-items: center;
2895 - gap: 10px;
2896 - padding: 48px 20px;
2897 - color: var(--mxch-text-muted, #6b7280);
2898 - font-size: 13px;
2899 -}
2900 -
2901 -.mxch-seod-empty {
2902 - display: flex;
2903 - flex-direction: column;
2904 - align-items: center;
2905 - gap: 8px;
2906 - padding: 48px 20px;
2907 - color: var(--mxch-text-muted, #6b7280);
2908 - font-size: 13px;
2909 - text-align: center;
2910 -}
2911 -
2912 -.mxch-seod-empty svg {
2913 - opacity: 0.4;
2914 -}
2915 -
2916 -.mxch-seod-error {
2917 - padding: 24px;
2918 - text-align: center;
2919 - color: #ef4444;
2920 - font-size: 13px;
2921 -}
2922 -
2923 -/* ─── Settings Card Header ─────────────────────────────────────── */
2924 -
2925 -.mxch-card-header {
2926 - padding: 14px 20px 0;
2927 -}
2928 -
2929 -.mxch-card-title {
2930 - font-size: 14px;
2931 - font-weight: 600;
2932 - color: var(--mxch-text-primary, #1a1a2e);
2933 - margin: 0;
2934 - text-transform: uppercase;
2935 - letter-spacing: 0.5px;
2936 - opacity: 0.6;
2937 -}
2938 -
2939 -/* ─── SEO Optimize Checkbox Grid ───────────────────────────────── */
2940 -
2941 -.mxch-seo-opt-grid {
2942 - display: flex;
2943 - flex-wrap: wrap;
2944 - gap: 6px;
2945 -}
2946 -
2947 -.mxch-seo-opt-item {
2948 - display: inline-flex;
2949 - align-items: center;
2950 - gap: 6px;
2951 - padding: 6px 12px;
2952 - border: 1px solid var(--mxch-card-border, #e2e4e9);
2953 - border-radius: 6px;
2954 - font-size: 13px;
2955 - color: var(--mxch-text-primary, #1a1a2e);
2956 - cursor: pointer;
2957 - transition: border-color 0.15s, background 0.15s;
2958 - user-select: none;
2959 -}
2960 -
2961 -.mxch-seo-opt-item:hover {
2962 - border-color: var(--mxch-primary, #7873f5);
2963 - background: rgba(120, 115, 245, 0.04);
2964 -}
2965 -
2966 -.mxch-seo-opt-item:has(input:checked) {
2967 - border-color: var(--mxch-primary, #7873f5);
2968 - background: rgba(120, 115, 245, 0.06);
2969 -}
2970 -
2971 -.mxch-seo-opt-check {
2972 - width: 14px;
2973 - height: 14px;
2974 - accent-color: var(--mxch-primary, #7873f5);
2975 - margin: 0;
2976 - cursor: pointer;
2977 -}
2978 -
2979 -.mxch-seo-opt-locked {
2980 - opacity: 0.5;
2981 - cursor: not-allowed;
2982 -}
2983 -
2984 -.mxch-seo-opt-locked:hover {
2985 - border-color: var(--mxch-card-border, #e2e4e9);
2986 - background: transparent;
2987 -}
2988 -
2989 -.mxch-seo-opt-item .mxch-cg-pro-badge {
2990 - margin-left: 2px;
2991 - font-size: 9px;
2992 - padding: 1px 5px;
2993 -}
2994 -
2995 -/* ─── GSC Locked / Placeholder Styles ──────────────────────────── */
2996 -
2997 -.mxch-seod-header-locked {
2998 - opacity: 0.5;
2999 - cursor: default;
3000 - pointer-events: none;
3001 -}
3002 -
3003 -.mxch-seod-header-locked svg {
3004 - margin-left: 3px;
3005 - vertical-align: middle;
3006 - opacity: 0.6;
3007 -}
3008 -
3009 -.mxch-seod-cell-locked {
3010 - opacity: 0.4;
3011 - color: var(--mxch-text-muted, #94a3b8);
3012 - cursor: default;
3013 -}
3014 -
3015 -/* Settings locked GSC card */
3016 -.mxch-gsc-settings-locked {
3017 - border: 1px dashed var(--mxch-card-border, #e2e4e9);
3018 - border-radius: 8px;
3019 - padding: 16px;
3020 - margin-top: 12px;
3021 - background: var(--mxch-card-bg, #fff);
3022 - opacity: 0.85;
3023 -}
3024 -
3025 -.mxch-gsc-settings-locked-header {
3026 - display: flex;
3027 - align-items: center;
3028 - gap: 8px;
3029 - font-size: 14px;
3030 - font-weight: 600;
3031 - color: var(--mxch-text-primary, #1a1a2e);
3032 - margin-bottom: 6px;
3033 -}
3034 -
3035 -.mxch-gsc-settings-locked-header svg {
3036 - color: var(--mxch-text-muted, #94a3b8);
3037 - flex-shrink: 0;
3038 -}
3039 -
3040 -.mxch-gsc-settings-locked .mxch-field-description {
3041 - margin-bottom: 10px;
3042 -}
3043 -
3044 -.mxch-gsc-connect-btn {
3045 - display: inline-flex;
3046 - align-items: center;
3047 - gap: 6px;
3048 - padding: 8px 16px;
3049 - border: 1px solid var(--mxch-card-border, #e2e4e9);
3050 - border-radius: 6px;
3051 - background: var(--mxch-card-bg, #fff);
3052 - color: var(--mxch-text-muted, #94a3b8);
3053 - font-size: 13px;
3054 - cursor: not-allowed;
3055 - opacity: 0.6;
3056 - margin-bottom: 8px;
3057 -}
3058 -
3059 -/* Detail modal GSC placeholder */
3060 -.mxch-gsc-placeholder {
3061 - position: relative;
3062 - margin-top: 16px;
3063 - padding: 16px;
3064 - border: 1px dashed var(--mxch-card-border, #e2e4e9);
3065 - border-radius: 8px;
3066 - overflow: hidden;
3067 -}
3068 -
3069 -.mxch-gsc-placeholder-title {
3070 - display: flex;
3071 - align-items: center;
3072 - gap: 6px;
3073 - font-size: 14px;
3074 - font-weight: 600;
3075 - color: var(--mxch-text-primary, #1a1a2e);
3076 - margin: 0 0 12px 0;
3077 - opacity: 0.5;
3078 -}
3079 -
3080 -.mxch-gsc-placeholder-content {
3081 - filter: blur(1.5px);
3082 - opacity: 0.5;
3083 - pointer-events: none;
3084 - user-select: none;
3085 -}
3086 -
3087 -.mxch-gsc-stats {
3088 - display: grid;
3089 - grid-template-columns: repeat(4, 1fr);
3090 - gap: 10px;
3091 - margin-bottom: 14px;
3092 -}
3093 -
3094 -.mxch-gsc-stat {
3095 - display: flex;
3096 - flex-direction: column;
3097 - align-items: center;
3098 - padding: 10px 8px;
3099 - background: var(--mxch-bg, #f8fafc);
3100 - border-radius: 6px;
3101 - border: 1px solid var(--mxch-card-border, #e2e4e9);
3102 -}
3103 -
3104 -.mxch-gsc-stat-value {
3105 - font-size: 18px;
3106 - font-weight: 700;
3107 - color: var(--mxch-text-primary, #1a1a2e);
3108 -}
3109 -
3110 -.mxch-gsc-stat-label {
3111 - font-size: 11px;
3112 - color: var(--mxch-text-muted, #94a3b8);
3113 - margin-top: 2px;
3114 -}
3115 -
3116 -.mxch-gsc-table {
3117 - width: 100%;
3118 - border-collapse: collapse;
3119 - font-size: 12px;
3120 -}
3121 -
3122 -.mxch-gsc-table th {
3123 - text-align: left;
3124 - padding: 6px 8px;
3125 - font-weight: 600;
3126 - color: var(--mxch-text-muted, #94a3b8);
3127 - border-bottom: 1px solid var(--mxch-card-border, #e2e4e9);
3128 - font-size: 11px;
3129 -}
3130 -
3131 -.mxch-gsc-table td {
3132 - padding: 6px 8px;
3133 - color: var(--mxch-text-primary, #1a1a2e);
3134 - border-bottom: 1px solid var(--mxch-card-border, #e2e4e9);
3135 -}
3136 -
3137 -.mxch-gsc-placeholder-overlay {
3138 - position: absolute;
3139 - inset: 0;
3140 - display: flex;
3141 - flex-direction: column;
3142 - align-items: center;
3143 - justify-content: center;
3144 - gap: 6px;
3145 - background: rgba(255, 255, 255, 0.4);
3146 - z-index: 2;
3147 -}
3148 -
3149 -.mxch-gsc-placeholder-overlay svg {
3150 - opacity: 0.3;
3151 -}
3152 -
3153 -.mxch-gsc-placeholder-overlay .mxch-cg-pro-upgrade-link {
3154 - font-size: 12px;
3155 -}
3156 -
3157 -/* Responsive */
3158 -
3159 -@media (max-width: 768px) {
3160 - .mxch-seod-filters {
3161 - flex-direction: column;
3162 - align-items: stretch;
3163 - gap: 8px;
3164 - }
3165 - .mxch-seod-search {
3166 - width: 100%;
3167 - }
3168 - .mxch-seod-cell-status {
3169 - display: none;
3170 - }
3171 - .mxch-seod-cell-date,
3172 - .mxch-seod-cell-clicks,
3173 - .mxch-seod-cell-impressions {
3174 - display: none;
3175 - }
3176 - .mxch-seod-header-date,
3177 - .mxch-seod-header-clicks,
3178 - .mxch-seod-header-impressions {
3179 - display: none;
3180 - }
3181 - .mxch-seod-modal {
3182 - width: 95%;
3183 - max-height: 85vh;
3184 - }
3185 - .mxch-seod-row-main {
3186 - padding: 10px 14px;
3187 - }
3188 - .mxch-seod-header-check,
3189 - .mxch-seod-cell-check {
3190 - width: 24px;
3191 - }
3192 - .mxch-seod-filters-right {
3193 - flex-wrap: wrap;
3194 - gap: 8px;
3195 - }
3196 - .mxch-seod-optimize-selected-btn {
3197 - font-size: 12px;
3198 - padding: 6px 10px;
3199 - }
3200 - .mxch-seod-footer {
3201 - flex-direction: column;
3202 - align-items: stretch;
3203 - gap: 8px;
3204 - }
3205 - .mxch-seod-pagination {
3206 - margin-left: 0;
3207 - justify-content: center;
3208 - }
3209 -}
3210 -
3211 -/* ── Edit Default Prompt Button & Modal ────────────────────── */
3212 -.mxch-cg-edit-prompt-btn {
3213 - display: inline-flex;
3214 - align-items: center;
3215 - gap: 5px;
3216 - background: none;
3217 - border: none;
3218 - color: #8a8f98;
3219 - font-size: 12px;
3220 - cursor: pointer;
3221 - padding: 4px 0;
3222 - margin-top: 2px;
3223 - transition: color 0.2s;
3224 -}
3225 -.mxch-cg-edit-prompt-btn:hover {
3226 - color: #c5c9d1;
3227 -}
3228 -.mxch-cg-edit-prompt-btn.mxch-cg-prompt-modified {
3229 - color: #7c6ee8;
3230 -}
3231 -.mxch-cg-edit-prompt-btn.mxch-cg-prompt-modified:hover {
3232 - color: #9d92f0;
3233 -}
3234 -
3235 -/* Modal overlay + container */
3236 -.mxch-cg-prompt-modal {
3237 - position: fixed;
3238 - top: 0;
3239 - left: 0;
3240 - right: 0;
3241 - bottom: 0;
3242 - z-index: 100100;
3243 - display: flex;
3244 - align-items: center;
3245 - justify-content: center;
3246 - overflow: hidden;
3247 -}
3248 -.mxch-cg-prompt-modal-overlay {
3249 - position: absolute;
3250 - top: 0;
3251 - left: 0;
3252 - right: 0;
3253 - bottom: 0;
3254 - background: rgba(0, 0, 0, 0.6);
3255 -}
3256 -.mxch-cg-prompt-modal-content {
3257 - position: relative;
3258 - background: #1e1e2e;
3259 - border: 1px solid rgba(255, 255, 255, 0.08);
3260 - border-radius: 12px;
3261 - width: 90%;
3262 - max-width: 760px;
3263 - height: 75vh;
3264 - max-height: 600px;
3265 - display: flex;
3266 - flex-direction: column;
3267 - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
3268 - overflow: hidden;
3269 -}
3270 -
3271 -/* Header */
3272 -.mxch-cg-prompt-modal-header {
3273 - display: flex;
3274 - align-items: center;
3275 - justify-content: space-between;
3276 - padding: 18px 24px;
3277 - border-bottom: 1px solid rgba(255, 255, 255, 0.06);
3278 -}
3279 -.mxch-cg-prompt-modal-header h3 {
3280 - margin: 0;
3281 - font-size: 15px;
3282 - font-weight: 600;
3283 - color: #e2e4e9;
3284 -}
3285 -.mxch-cg-prompt-modal-close {
3286 - background: none;
3287 - border: none;
3288 - color: #8a8f98;
3289 - font-size: 22px;
3290 - cursor: pointer;
3291 - padding: 0 4px;
3292 - line-height: 1;
3293 - transition: color 0.2s;
3294 -}
3295 -.mxch-cg-prompt-modal-close:hover {
3296 - color: #fff;
3297 -}
3298 -
3299 -/* Body */
3300 -.mxch-cg-prompt-modal-body {
3301 - padding: 16px 24px;
3302 - overflow: hidden;
3303 - flex: 1;
3304 - display: flex;
3305 - flex-direction: column;
3306 - min-height: 0;
3307 -}
3308 -.mxch-cg-prompt-modal-desc {
3309 - margin: 0 0 12px;
3310 - font-size: 13px;
3311 - color: #8a8f98;
3312 - line-height: 1.5;
3313 - flex-shrink: 0;
3314 -}
3315 -.mxch-cg-system-prompt-editor {
3316 - width: 100%;
3317 - flex: 1;
3318 - min-height: 200px;
3319 - background: #13131f;
3320 - border: 1px solid rgba(255, 255, 255, 0.06);
3321 - border-radius: 8px;
3322 - color: #c5c9d1;
3323 - font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
3324 - font-size: 12.5px;
3325 - line-height: 1.7;
3326 - padding: 14px 16px;
3327 - resize: none;
3328 - box-sizing: border-box;
3329 - overflow-y: auto;
3330 -}
3331 -.mxch-cg-system-prompt-editor:focus {
3332 - outline: none;
3333 - border-color: rgba(124, 110, 232, 0.4);
3334 - box-shadow: 0 0 0 2px rgba(124, 110, 232, 0.1);
3335 -}
3336 -/* Custom scrollbar for prompt editor */
3337 -.mxch-cg-system-prompt-editor::-webkit-scrollbar {
3338 - width: 6px;
3339 -}
3340 -.mxch-cg-system-prompt-editor::-webkit-scrollbar-track {
3341 - background: transparent;
3342 - border-radius: 3px;
3343 -}
3344 -.mxch-cg-system-prompt-editor::-webkit-scrollbar-thumb {
3345 - background: rgba(124, 110, 232, 0.3);
3346 - border-radius: 3px;
3347 -}
3348 -.mxch-cg-system-prompt-editor::-webkit-scrollbar-thumb:hover {
3349 - background: rgba(124, 110, 232, 0.5);
3350 -}
3351 -
3352 -/* Footer */
3353 -.mxch-cg-prompt-modal-footer {
3354 - display: flex;
3355 - align-items: center;
3356 - justify-content: space-between;
3357 - padding: 14px 24px;
3358 - border-top: 1px solid rgba(255, 255, 255, 0.06);
3359 -}
3360 -.mxch-cg-prompt-modal-footer-right {
3361 - display: flex;
3362 - gap: 8px;
3363 -}
3364 -.mxch-cg-prompt-modal-footer .button {
3365 - background: #2a2a3d;
3366 - border: 1px solid rgba(255, 255, 255, 0.08);
3367 - color: #c5c9d1;
3368 - border-radius: 6px;
3369 - padding: 6px 14px;
3370 - font-size: 13px;
3371 - cursor: pointer;
3372 - transition: background 0.2s, border-color 0.2s;
3373 -}
3374 -.mxch-cg-prompt-modal-footer .button:hover {
3375 - background: #333350;
3376 - border-color: rgba(255, 255, 255, 0.14);
3377 -}
3378 -.mxch-cg-prompt-modal-footer .button-primary {
3379 - background: #7c6ee8;
3380 - border-color: #7c6ee8;
3381 - color: #fff;
3382 -}
3383 -.mxch-cg-prompt-modal-footer .button-primary:hover {
3384 - background: #6b5dd3;
3385 - border-color: #6b5dd3;
3386 -}
3387 -
3388 -@media (max-width: 600px) {
3389 - .mxch-cg-prompt-modal-content {
3390 - width: 96%;
3391 - max-height: 90vh;
3392 - }
3393 - .mxch-cg-prompt-modal-header,
3394 - .mxch-cg-prompt-modal-body,
3395 - .mxch-cg-prompt-modal-footer {
3396 - padding-left: 16px;
3397 - padding-right: 16px;
3398 1777 }
3399 1778 }