PluginProbe
phpinfo() WP – Site Health, PHP Compatibility & Server Audit / trunk
phpinfo() WP – Site Health, PHP Compatibility & Server Audit vtrunk
7.2.7 7.2.6 7.2.5 7.2.4 7.2.3 7.2.0 7.2.1 7.2.2 7.1.0 7.0.3 7.0.4 7.0.5 trunk 6.0 7.0.0 7.0.1 7.0.2
phpinfo-wp / css / style.css

style.css in phpinfo() WP – Site Health, PHP Compatibility & Server Audit trunk, at css/style.css

4,906 lines 91.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* =========================================================
2 phpinfo() page — override phpinfo's own dated CSS
3 ========================================================= */
4
5 /* Strip phpinfo's default table width, re-lay it out cleanly */
6 #phpinfo-WP .center {
7 text-align: left;
8 }
9
10 #phpinfo-WP .center table {
11 width: 100% !important;
12 max-width: 100% !important;
13 border-collapse: collapse !important;
14 border: none !important;
15 box-shadow: 0 1px 4px rgba(0, 0, 0, .08) !important;
16 margin: 0 0 20px !important;
17 border-radius: 6px;
18 overflow: hidden;
19 }
20
21 /* Section header rows */
22 #phpinfo-WP .center tr.h th,
23 #phpinfo-WP .center tr.h td {
24 background: #777BB3 !important;
25 color: #fff !important;
26 font-size: 12px !important;
27 font-weight: 700 !important;
28 text-transform: uppercase !important;
29 letter-spacing: .6px !important;
30 padding: 10px 14px !important;
31 text-align: left !important;
32 border: none !important;
33 }
34
35 /* Directive name cell */
36 #phpinfo-WP .center td.e {
37 background: #f5f5f8 !important;
38 color: #1d2327 !important;
39 font-family: monospace !important;
40 font-size: 12px !important;
41 font-weight: 500 !important;
42 padding: 7px 14px !important;
43 width: 280px !important;
44 border: none !important;
45 border-bottom: 1px solid #eee !important;
46 vertical-align: top !important;
47 }
48
49 /* Value cell */
50 #phpinfo-WP .center td.v {
51 background: #fff !important;
52 color: #2c2c2c !important;
53 font-size: 12px !important;
54 padding: 7px 14px !important;
55 border: none !important;
56 border-bottom: 1px solid #eee !important;
57 max-width: none !important;
58 overflow-x: auto !important;
59 word-break: break-word !important;
60 }
61
62 /* Alternating rows */
63 #phpinfo-WP .center tr:nth-child(even) td.e {
64 background: #ededf2 !important;
65 }
66
67 #phpinfo-WP .center tr:nth-child(even) td.v {
68 background: #f9f9fc !important;
69 }
70
71 /* Section h1 / h2 */
72 #phpinfo-WP .center h1 {
73 font-size: 18px !important;
74 color: #1d2327 !important;
75 margin: 8px 0 20px !important;
76 font-weight: 700 !important;
77 }
78
79 #phpinfo-WP .center h2 {
80 font-size: 14px !important;
81 color: #777BB3 !important;
82 margin: 28px 0 6px !important;
83 padding-bottom: 6px !important;
84 border-bottom: 2px solid #e0e0e8 !important;
85 font-weight: 700 !important;
86 text-transform: uppercase !important;
87 letter-spacing: .5px !important;
88 scroll-margin-top: 60px;
89 }
90
91 /* phpinfo image (PHP logo) */
92 #phpinfo-WP .center img {
93 display: none;
94 }
95
96 /* Links inside phpinfo */
97 #phpinfo-WP .center a {
98 color: #777BB3;
99 }
100
101 /* Search highlight */
102 #phpinfo-WP tr.phpinfowp-row-hl td.e,
103 #phpinfo-WP tr.phpinfowp-row-hl td.v {
104 background: #fffde7 !important;
105 }
106
107 #phpinfo-wp-notice {
108 display: flex;
109 justify-content: space-between;
110 align-items: baseline;
111 }
112
113 #htaccess-warning {
114 color: red;
115 font-weight: 600;
116 font-size: 20px;
117 margin: 10px;
118 }
119
120 #phpinfo-htaccess-save,
121 #phpinfo-htaccess-backup,
122 #phpinfo-htaccess-restore {
123 background-color: #777BB3;
124 margin: 15px 10px 10px 10px;
125 border: none;
126 border-radius: 5px;
127 height: 40px;
128 width: 100px;
129 color: white;
130 font-weight: 400;
131 cursor: pointer;
132 text-transform: uppercase;
133 }
134
135 #htaccess-phpinfo-des {
136 font-size: 16px;
137 max-width: 1100px;
138 margin: 0 auto;
139 padding: 20px;
140 line-height: 1.5;
141 }
142
143 #htaccess-editor {
144 min-width: 700px;
145 margin-top: 10px;
146 height: 370px;
147 }
148
149 .phpinfo-extensions {
150 margin-top: 20px;
151 -webkit-column-count: 5;
152 -moz-column-count: 5;
153 column-count: 5;
154 -webkit-column-gap: 50px;
155 -moz-column-gap: 50px;
156 column-gap: 0px;
157 -webkit-column-rule: 1px single grey;
158 -moz-column-rule: 1px single grey;
159 column-rule: 1px single grey;
160 text-align: center;
161 font-size: 15px;
162 line-height: 25px;
163 font-weight: bolder;
164 }
165
166 #title-phpinfo-WP {
167 margin-top: 30px;
168 margin-bottom: 30px;
169 letter-spacing: 10px;
170 margin-left: 20px;
171 }
172
173 #heading-phpinfo-WP {
174 color: #777BB3;
175 }
176
177 html {
178 scroll-behavior: smooth;
179 }
180
181 #topButtonImage-phpinfo-WP {
182 height: 30px;
183 width: 30px;
184 }
185
186 #topButton-phpinfo-WP {
187 position: fixed;
188 bottom: 20px;
189 right: 30px;
190 z-index: 99;
191 border: none;
192 outline: none;
193 background-color: #777BB3;
194 color: white;
195 cursor: pointer;
196 padding: 15px;
197 border-radius: 10px;
198 font-size: 18px;
199 }
200
201 #topButton-phpinfo-WP:hover {
202 background-color: #555;
203 }
204
205 .center pre {
206 margin: 0;
207 font-family: Poppins, sans-serif;
208 }
209
210 .center a:link {
211 color: #009;
212 text-decoration: none;
213 background-color: #fff;
214 }
215
216 .center a:hover {
217 text-decoration: underline;
218 }
219
220 .center table {
221 border-collapse: collapse;
222 border: 0;
223 width: 934px;
224 box-shadow: 1px 2px 3px #ccc;
225 text-align: left;
226 margin: 10px auto;
227 }
228
229 .center table th {
230 text-align: center !important;
231 }
232
233 .center table td,
234 .center table th {
235 border: 1px solid #666;
236 font-size: 75%;
237 vertical-align: baseline;
238 padding: 5px 5px;
239 text-align: center;
240 }
241
242 .center h1,
243 .center h2 {
244 text-transform: uppercase;
245 }
246
247 .center .p {
248 text-align: left;
249 }
250
251 .center .e {
252 background-color: #ccf;
253 width: 300px;
254 font-weight: bold;
255 }
256
257 .center .h {
258 background-color: #99c;
259 font-weight: bold;
260 }
261
262 .center .v {
263 background-color: #ddd;
264 max-width: 300px;
265 overflow-x: auto;
266 word-wrap: break-word;
267 }
268
269 .center .v i {
270 color: #999;
271 }
272
273 .center img {
274 float: right;
275 border: 0;
276 }
277
278 .center hr {
279 width: 934px;
280 background-color: #ccc;
281 border: 0;
282 height: 1px;
283 }
284
285 .tab {
286 overflow: hidden;
287 border: 1px solid #ccc;
288 background-color: #f1f1f1;
289 }
290
291 .tab button {
292 background-color: inherit;
293 float: left;
294 border: none;
295 outline: none;
296 cursor: pointer;
297 padding: 14px 16px;
298 transition: 0.3s;
299 font-size: 17px;
300 }
301
302 .tab button:hover {
303 background-color: #777BB3;
304 color: white;
305 }
306
307 .tab button.active {
308 background-color: #777BB3;
309 color: white;
310 }
311
312 .tabcontent {
313 padding: 6px 12px;
314 border: 1px solid #ccc;
315 border-top: none;
316 width: 97%;
317 }
318
319 #phpinfo-WP {
320 text-align: center;
321 }
322
323 #phpinfo-wp {
324 margin-right: 20px;
325 }
326
327 #phpinfo-output {
328 text-align: center;
329 font-size: 30px;
330 margin-top: 20px;
331 font-weight: 600;
332 color: #777BB3;
333 }
334
335 #phpinfo-log {
336 line-height: 1.5;
337 height: 400px;
338 width: 98.24%;
339 overflow: auto;
340 background-color: floralwhite;
341 color: #777BB3;
342 font-family: sans-serif;
343 padding: 10px;
344 margin-top: 30px;
345 border-radius: 10px;
346 font-weight: 400;
347 font-size: 18px;
348 }
349
350 #phpinfo-disk-info {
351 font-size: 14px;
352 }
353
354 #info-phpinfo-WP {
355 display: flex;
356 justify-content: space-between;
357 }
358
359 #phpinfo_mc {
360 margin-top: 21px;
361 letter-spacing: 10px;
362 margin-left: 20px;
363 }
364
365 .editor {
366 display: flex;
367 justify-content: center;
368 align-items: center;
369 flex-direction: column;
370 }
371
372 /* =========================================================
373 Design system — shared across all pages
374 ========================================================= */
375
376 /* Fix WP 7.x overriding dashicons color and alignment inside buttons */
377 .phpinfowp-page .button .dashicons {
378 color: inherit !important;
379 line-height: 1 !important;
380 margin-top: -2px !important;
381 }
382
383 .phpinfowp-page .button-primary .dashicons {
384 color: #fff !important;
385 }
386
387 .phpinfowp-page-header {
388 display: flex;
389 justify-content: space-between;
390 align-items: flex-start;
391 gap: 16px;
392 flex-wrap: wrap;
393 margin-bottom: 24px;
394 }
395
396 .phpinfowp-page-header h1 {
397 margin: 0 0 24px;
398 font-size: 22px;
399 display: flex;
400 align-items: center;
401 gap: 10px;
402 }
403
404 .phpinfowp-page-subtitle {
405 margin: 0;
406 color: #666;
407 font-size: 13px;
408 }
409
410 .phpinfowp-section-heading {
411 margin: 32px 0 14px;
412 padding-bottom: 8px;
413 border-bottom: 1px solid #e0e0e0;
414 font-size: 16px;
415 }
416
417 /* Score card (security headers + config grader) */
418 .phpinfowp-score-card {
419 display: flex;
420 align-items: center;
421 gap: 24px;
422 background: #fff;
423 border: 1px solid #e0e0e0;
424 border-radius: 8px;
425 padding: 20px 24px;
426 box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
427 }
428
429 .phpinfowp-score-card-body {
430 flex: 1;
431 }
432
433 .phpinfowp-score-card-value {
434 font-size: 36px;
435 font-weight: 800;
436 color: #1d2327;
437 line-height: 1;
438 margin-bottom: 6px;
439 }
440
441 .phpinfowp-score-card-value span {
442 font-size: 16px;
443 font-weight: 400;
444 color: #888;
445 }
446
447 .phpinfowp-score-card-meta {
448 font-size: 13px;
449 color: #666;
450 display: flex;
451 gap: 8px;
452 flex-wrap: wrap;
453 }
454
455 /* =========================================================
456 Pro shared
457 ========================================================= */
458 .phpinfowp-pro-page {
459 max-width: 1100px;
460 padding: 20px 0 40px;
461 }
462
463 .phpinfowp-pro-page h1 {
464 display: flex;
465 align-items: center;
466 gap: 10px;
467 margin-bottom: 24px;
468 }
469
470 .phpinfowp-pro-badge {
471 display: inline-block;
472 background: #777BB3;
473 color: #fff;
474 font-size: 11px;
475 font-weight: 700;
476 letter-spacing: 1px;
477 padding: 2px 7px;
478 border-radius: 3px;
479 vertical-align: middle;
480 }
481
482 /* =========================================================
483 Unified Design System & Brand Palette
484 Brand Primary: #777BB3 | Hover: #62659e | Active: #515488
485 Surface: #f8f8fc | Border: #d8daeb | Text: #2c2f48
486 ========================================================= */
487
488 /* Every button in the plugin gets modern 6px rounded corners */
489 body.phpinfowp-page .button,
490 body.phpinfowp-page .button-primary,
491 body.phpinfowp-page .button-secondary,
492 body.phpinfowp-page .button-small,
493 body.phpinfowp-page .button-large,
494 body.phpinfowp-page .button-hero,
495 .phpinfowp-btn,
496 .phpinfowp-btn-primary,
497 .phpinfowp-btn-secondary {
498 border-radius: 6px !important;
499 font-family: inherit !important;
500 display: inline-flex !important;
501 align-items: center !important;
502 justify-content: center !important;
503 vertical-align: middle !important;
504 transition: all 0.15s ease-in-out !important;
505 }
506
507 /* Secondary / Default Outline Buttons (e.g. White-label, Clear, Reset, Backup, etc.) */
508 body.phpinfowp-page .button:not(.button-primary):not(.button-link):not(.button-link-delete):not(.phpinfowp-btn-danger):not(.phpinfowp-btn-primary),
509 body.phpinfowp-page .button-secondary,
510 .phpinfowp-btn-secondary {
511 background: #ffffff !important;
512 border: 1px solid #d8daeb !important;
513 color: #3b3e58 !important;
514 font-weight: 600 !important;
515 border-radius: 6px !important;
516 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
517 text-shadow: none !important;
518 }
519
520 body.phpinfowp-page .button:not(.button-primary):not(.button-link):not(.button-link-delete):not(.phpinfowp-btn-danger):not(.phpinfowp-btn-primary):hover,
521 body.phpinfowp-page .button-secondary:hover,
522 .phpinfowp-btn-secondary:hover {
523 background: #f8f8fc !important;
524 border-color: #777BB3 !important;
525 color: #777BB3 !important;
526 box-shadow: 0 2px 5px rgba(119, 123, 179, 0.15) !important;
527 transform: translateY(-1px);
528 }
529
530 body.phpinfowp-page .button:not(.button-primary):not(.button-link):not(.button-link-delete):not(.phpinfowp-btn-danger):not(.phpinfowp-btn-primary):active,
531 body.phpinfowp-page .button-secondary:active,
532 .phpinfowp-btn-secondary:active {
533 background: #eff0f9 !important;
534 border-color: #777BB3 !important;
535 color: #515488 !important;
536 transform: translateY(0);
537 }
538
539 /* Primary Action Buttons */
540 body.phpinfowp-page .button-primary:not(.phpinfowp-btn-danger):not(.phpinfowp-btn-secondary),
541 body.phpinfowp-page .button.button-primary:not(.phpinfowp-btn-danger):not(.phpinfowp-btn-secondary),
542 .phpinfowp-btn-primary {
543 background: #777BB3 !important;
544 border-color: #777BB3 !important;
545 color: #ffffff !important;
546 font-weight: 600 !important;
547 border-radius: 6px !important;
548 box-shadow: 0 1px 2px rgba(119, 123, 179, 0.25) !important;
549 text-shadow: none !important;
550 transition: all 0.15s ease-in-out !important;
551 }
552
553 body.phpinfowp-page .button-primary:not(.phpinfowp-btn-danger):not(.phpinfowp-btn-secondary):hover,
554 body.phpinfowp-page .button.button-primary:not(.phpinfowp-btn-danger):not(.phpinfowp-btn-secondary):hover,
555 .phpinfowp-btn-primary:hover {
556 background: #62659e !important;
557 border-color: #62659e !important;
558 color: #ffffff !important;
559 transform: translateY(-1px);
560 box-shadow: 0 3px 6px rgba(119, 123, 179, 0.3) !important;
561 }
562
563 body.phpinfowp-page .button-primary:not(.phpinfowp-btn-danger):not(.phpinfowp-btn-secondary):active,
564 body.phpinfowp-page .button.button-primary:not(.phpinfowp-btn-danger):not(.phpinfowp-btn-secondary):active,
565 .phpinfowp-btn-primary:active {
566 background: #515488 !important;
567 border-color: #515488 !important;
568 transform: translateY(0);
569 }
570
571 /* Unified Action Banner / Hero Card */
572 .phpinfowp-action-banner {
573 background: linear-gradient(135deg, #f8f8fc 0%, #eff0f9 100%) !important;
574 border: 1px solid #d8daeb !important;
575 border-radius: 8px !important;
576 padding: 16px 20px !important;
577 margin-bottom: 20px !important;
578 display: flex !important;
579 align-items: center !important;
580 justify-content: space-between !important;
581 gap: 16px !important;
582 flex-wrap: wrap !important;
583 box-shadow: 0 1px 3px rgba(119, 123, 179, 0.06) !important;
584 }
585
586 .phpinfowp-action-banner strong {
587 font-size: 14px;
588 color: #2c2f48;
589 }
590
591 .phpinfowp-action-banner p {
592 margin: 4px 0 0;
593 color: #555870;
594 font-size: 12.5px;
595 line-height: 1.5;
596 }
597
598 /* Active Nav Side Tab */
599 .phpinfowp-side-nav-item.is-active {
600 background: #eff0f9 !important;
601 color: #2c2f48 !important;
602 border-left: 3px solid #777BB3 !important;
603 font-weight: 600 !important;
604 }
605
606 .phpinfowp-side-nav-item.is-active .phpinfowp-side-nav-icon {
607 color: #777BB3 !important;
608 }
609
610 /* =========================================================
611 Upgrade gate
612 ========================================================= */
613 .phpinfowp-upgrade-gate {
614 display: flex;
615 justify-content: center;
616 padding: 48px 20px;
617 }
618
619 .phpinfowp-upgrade-inner {
620 max-width: 700px;
621 width: 100%;
622 background: #fff;
623 border: 1px solid #dcdcde;
624 border-radius: 10px;
625 padding: 40px 48px;
626 box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
627 text-align: center;
628 }
629
630 .phpinfowp-upgrade-badge {
631 display: inline-block;
632 background: #777BB3;
633 color: #fff;
634 font-size: 13px;
635 font-weight: 800;
636 letter-spacing: 2px;
637 padding: 4px 14px;
638 border-radius: 4px;
639 margin-bottom: 16px;
640 }
641
642 .phpinfowp-upgrade-title {
643 font-size: 22px;
644 font-weight: 700;
645 margin: 0 0 6px;
646 color: #1d2327;
647 }
648
649 .phpinfowp-upgrade-price {
650 font-size: 14px;
651 color: #666;
652 margin: 0 0 28px;
653 }
654
655 .phpinfowp-upgrade-features {
656 display: grid;
657 grid-template-columns: 1fr 1fr;
658 gap: 14px 24px;
659 text-align: left;
660 margin-bottom: 32px;
661 }
662
663 @media (max-width: 600px) {
664 .phpinfowp-upgrade-features {
665 grid-template-columns: 1fr;
666 }
667 }
668
669 .phpinfowp-upgrade-feature {
670 display: flex;
671 align-items: flex-start;
672 gap: 10px;
673 font-size: 13px;
674 }
675
676 .phpinfowp-upgrade-feature .dashicons {
677 color: #777BB3;
678 flex-shrink: 0;
679 margin-top: 1px;
680 font-size: 18px;
681 width: 18px;
682 height: 18px;
683 }
684
685 .phpinfowp-upgrade-feature strong {
686 display: block;
687 margin-bottom: 1px;
688 color: #1d2327;
689 font-size: 13px;
690 }
691
692 .phpinfowp-upgrade-feature span {
693 color: #666;
694 font-size: 12px;
695 line-height: 1.4;
696 }
697
698 .phpinfowp-upgrade-actions {
699 display: flex;
700 flex-direction: column;
701 align-items: center;
702 gap: 10px;
703 margin-bottom: 16px;
704 }
705
706 .phpinfowp-upgrade-cta {
707 display: inline-block;
708 background: #777BB3;
709 color: #fff;
710 font-size: 15px;
711 font-weight: 700;
712 padding: 12px 32px;
713 border-radius: 6px;
714 text-decoration: none;
715 transition: background .15s;
716 }
717
718 .phpinfowp-upgrade-cta:hover {
719 background: #6366a0;
720 color: #fff;
721 }
722
723 .phpinfowp-upgrade-secondary {
724 font-size: 13px;
725 color: #777BB3;
726 text-decoration: underline;
727 }
728
729 .phpinfowp-upgrade-footer {
730 font-size: 12px;
731 color: #888;
732 margin: 0;
733 }
734
735 /* =========================================================
736 License page
737 ========================================================= */
738 .phpinfowp-license-card {
739 background: #fff;
740 border: 1px solid #e0e0e0;
741 border-left: 4px solid #ccc;
742 border-radius: 8px;
743 padding: 22px 26px;
744 max-width: 760px;
745 box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
746 margin-bottom: 8px;
747 }
748
749 .phpinfowp-license-card.is-active {
750 border-left-color: #00a32a;
751 }
752
753 .phpinfowp-license-card.is-inactive {
754 border-left-color: #d63638;
755 }
756
757 .phpinfowp-license-status {
758 display: flex;
759 align-items: flex-start;
760 gap: 14px;
761 padding-bottom: 18px;
762 border-bottom: 1px solid #f0f0f0;
763 margin-bottom: 18px;
764 }
765
766 .phpinfowp-license-status .dashicons {
767 font-size: 28px;
768 width: 28px;
769 height: 28px;
770 margin-top: 2px;
771 flex-shrink: 0;
772 }
773
774 .phpinfowp-license-status-title {
775 font-size: 16px;
776 font-weight: 700;
777 color: #1d2327;
778 margin-bottom: 2px;
779 }
780
781 .phpinfowp-license-status-sub {
782 font-size: 13px;
783 color: #666;
784 }
785
786 .phpinfowp-license-key-display {
787 display: flex;
788 align-items: center;
789 gap: 10px;
790 font-size: 13px;
791 }
792
793 .phpinfowp-license-key-label {
794 font-weight: 600;
795 color: #555;
796 }
797
798 .phpinfowp-license-key-display code {
799 background: #f0f0f1;
800 padding: 4px 10px;
801 border-radius: 4px;
802 font-size: 12px;
803 letter-spacing: .5px;
804 }
805
806 .phpinfowp-license-form {
807 margin: 0;
808 }
809
810 .phpinfowp-license-input-label {
811 display: block;
812 font-size: 13px;
813 font-weight: 600;
814 color: #1d2327;
815 margin-bottom: 8px;
816 }
817
818 .phpinfowp-license-input-row {
819 display: flex;
820 gap: 8px;
821 align-items: center;
822 }
823
824 .phpinfowp-license-input-row input {
825 flex: 1;
826 font-family: monospace;
827 font-size: 13px;
828 padding: 8px 12px;
829 border: 1px solid #c3c4c7;
830 border-radius: 4px;
831 background: #fff;
832 min-width: 0;
833 }
834
835 .phpinfowp-license-input-row input:focus {
836 border-color: #777BB3;
837 box-shadow: 0 0 0 1px #777BB3;
838 outline: none;
839 }
840
841 .phpinfowp-license-input-row .button {
842 flex-shrink: 0;
843 }
844
845 /* Features grid */
846 .phpinfowp-license-features-grid {
847 display: grid;
848 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
849 gap: 14px;
850 max-width: 1100px;
851 margin-bottom: 24px;
852 }
853
854 .phpinfowp-license-feature {
855 display: flex;
856 align-items: flex-start;
857 gap: 12px;
858 padding: 14px 16px;
859 background: #fff;
860 border: 1px solid #e0e0e0;
861 border-radius: 6px;
862 box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
863 }
864
865 .phpinfowp-license-feature .dashicons {
866 flex-shrink: 0;
867 color: #777BB3;
868 font-size: 22px;
869 width: 22px;
870 height: 22px;
871 margin-top: 1px;
872 }
873
874 .phpinfowp-license-feature-title {
875 font-size: 13px;
876 font-weight: 700;
877 color: #1d2327;
878 margin-bottom: 3px;
879 }
880
881 .phpinfowp-license-feature-desc {
882 font-size: 12px;
883 color: #666;
884 line-height: 1.45;
885 }
886
887 .phpinfowp-license-cta-row {
888 margin-top: 8px;
889 padding: 20px 24px;
890 background: linear-gradient(135deg, #f6f4ff 0%, #fff 100%);
891 border: 1px solid #e8e3ff;
892 border-radius: 8px;
893 text-align: center;
894 max-width: 1100px;
895 }
896
897 .phpinfowp-license-cta-meta {
898 margin: 10px 0 0;
899 font-size: 12px;
900 color: #777;
901 }
902
903 /* =========================================================
904 EOL Alerts
905 ========================================================= */
906 .phpinfowp-eol-current-card {
907 display: flex;
908 align-items: center;
909 gap: 32px;
910 background: #fff;
911 border: 1px solid #dcdcde;
912 border-left: 5px solid #8c8fae;
913 border-radius: 6px;
914 padding: 20px 28px;
915 max-width: 800px;
916 }
917
918 .eol-status-eol {
919 border-left-color: #d63638;
920 }
921
922 .eol-status-warning {
923 border-left-color: #dba617;
924 }
925
926 .eol-status-ok {
927 border-left-color: #00a32a;
928 }
929
930 .phpinfowp-eol-current-version {
931 display: flex;
932 flex-direction: column;
933 align-items: center;
934 min-width: 120px;
935 }
936
937 .version-label {
938 font-size: 11px;
939 color: #666;
940 text-transform: uppercase;
941 letter-spacing: .5px;
942 }
943
944 .version-number {
945 font-size: 26px;
946 font-weight: 700;
947 color: #1d2327;
948 margin-top: 4px;
949 }
950
951 .phpinfowp-eol-current-info p {
952 margin: 6px 0 0;
953 font-size: 14px;
954 }
955
956 .eol-badge {
957 display: inline-block;
958 font-size: 11px;
959 font-weight: 700;
960 letter-spacing: 1px;
961 padding: 2px 8px;
962 border-radius: 3px;
963 }
964
965 .eol-badge-eol {
966 background: #fce8e8;
967 color: #d63638;
968 }
969
970 .eol-badge-warning {
971 background: #fff8e5;
972 color: #996800;
973 }
974
975 .eol-badge-ok {
976 background: #edfaef;
977 color: #1a7f37;
978 }
979
980 .eol-badge-unknown {
981 background: #f0f0f1;
982 color: #50575e;
983 }
984
985 .phpinfowp-eol-table th,
986 .phpinfowp-eol-table td {
987 vertical-align: middle;
988 }
989
990 .phpinfowp-current-row {
991 background: #f0f4ff !important;
992 }
993
994 /* =========================================================
995 Security Headers
996 ========================================================= */
997 .phpinfowp-sec-header-summary {
998 display: flex;
999 align-items: center;
1000 gap: 28px;
1001 background: #fff;
1002 border: 1px solid #dcdcde;
1003 border-radius: 6px;
1004 padding: 20px 28px;
1005 max-width: 800px;
1006 }
1007
1008 .phpinfowp-grade-circle {
1009 display: flex;
1010 align-items: center;
1011 justify-content: center;
1012 width: 72px;
1013 height: 72px;
1014 border-radius: 50%;
1015 font-size: 26px;
1016 font-weight: 800;
1017 flex-shrink: 0;
1018 color: #fff;
1019 background: #8c8fae;
1020 }
1021
1022 .phpinfowp-grade-circle.grade-aplus,
1023 .phpinfowp-grade-circle.grade-a {
1024 background: #00a32a;
1025 }
1026
1027 .phpinfowp-grade-circle.grade-b {
1028 background: #1a7f37;
1029 }
1030
1031 .phpinfowp-grade-circle.grade-c {
1032 background: #dba617;
1033 }
1034
1035 .phpinfowp-grade-circle.grade-d {
1036 background: #d63638;
1037 }
1038
1039 .phpinfowp-grade-circle.grade-f {
1040 background: #8d2626;
1041 }
1042
1043 .phpinfowp-sec-table td {
1044 vertical-align: top;
1045 padding: 10px 12px;
1046 }
1047
1048 .phpinfowp-header-missing td:first-child {
1049 opacity: .8;
1050 }
1051
1052 /* =========================================================
1053 Config Snapshots
1054 ========================================================= */
1055 .phpinfowp-snap-card {
1056 background: #fff;
1057 border: 1px solid #dcdcde;
1058 border-radius: 6px;
1059 padding: 20px 24px;
1060 min-width: 280px;
1061 }
1062
1063 .phpinfowp-snap-select {
1064 max-width: 340px;
1065 width: 100%;
1066 }
1067
1068 .phpinfowp-diff-table td {
1069 vertical-align: middle;
1070 }
1071
1072 .diff-changed {
1073 background: #fff8e5 !important;
1074 }
1075
1076 .diff-added {
1077 background: #edfaef !important;
1078 }
1079
1080 .diff-removed {
1081 background: #fce8e8 !important;
1082 }
1083
1084 .diff-badge {
1085 display: inline-block;
1086 font-size: 10px;
1087 font-weight: 700;
1088 letter-spacing: .5px;
1089 padding: 2px 6px;
1090 border-radius: 3px;
1091 }
1092
1093 .diff-badge-changed {
1094 background: #fff8e5;
1095 color: #996800;
1096 }
1097
1098 .diff-badge-added {
1099 background: #edfaef;
1100 color: #1a7f37;
1101 }
1102
1103 .diff-badge-removed {
1104 background: #fce8e8;
1105 color: #d63638;
1106 }
1107
1108 /* =========================================================
1109 Error Log Viewer
1110 ========================================================= */
1111 .phpinfowp-log-toolbar {
1112 display: flex;
1113 justify-content: space-between;
1114 align-items: flex-start;
1115 gap: 16px;
1116 margin-bottom: 12px;
1117 flex-wrap: wrap;
1118 }
1119
1120 .phpinfowp-log-meta {
1121 font-size: 13px;
1122 color: #444;
1123 }
1124
1125 #phpinfowp-log-viewer {
1126 font-family: monospace;
1127 font-size: 12px;
1128 line-height: 1.5;
1129 background: #1e1e2e;
1130 color: #cdd6f4;
1131 border-radius: 6px;
1132 padding: 12px 16px;
1133 max-height: 550px;
1134 overflow-y: auto;
1135 word-break: break-all;
1136 }
1137
1138 .log-line {
1139 padding: 2px 0;
1140 white-space: pre-wrap;
1141 }
1142
1143 .log-fatal {
1144 color: #f38ba8;
1145 font-weight: 600;
1146 }
1147
1148 .log-warning {
1149 color: #fab387;
1150 }
1151
1152 .log-notice {
1153 color: #f9e2af;
1154 }
1155
1156 .log-debug {
1157 color: #89dceb;
1158 }
1159
1160 .log-default {
1161 color: #cdd6f4;
1162 }
1163
1164 /* =========================================================
1165 OPcache Dashboard
1166 ========================================================= */
1167 .phpinfowp-opcache-grid {
1168 display: grid;
1169 grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
1170 gap: 16px;
1171 max-width: 960px;
1172 }
1173
1174 .phpinfowp-opcache-card {
1175 background: #fff;
1176 border: 1px solid #dcdcde;
1177 border-radius: 6px;
1178 padding: 20px 24px;
1179 }
1180
1181 .phpinfowp-opcache-hitrate {
1182 display: flex;
1183 align-items: center;
1184 gap: 20px;
1185 grid-column: 1 / -1;
1186 }
1187
1188 .phpinfowp-opcache-hitrate .phpinfowp-grade-circle {
1189 font-size: 19px;
1190 letter-spacing: -0.5px;
1191 }
1192
1193 .phpinfowp-progress-bar-wrap {
1194 background: #f0f0f1;
1195 border-radius: 4px;
1196 height: 12px;
1197 overflow: hidden;
1198 margin-bottom: 4px;
1199 }
1200
1201 .phpinfowp-progress-bar {
1202 height: 100%;
1203 border-radius: 4px;
1204 transition: width .3s;
1205 }
1206
1207 /* =========================================================
1208 Config Grader
1209 ========================================================= */
1210 .phpinfowp-grade-table td {
1211 vertical-align: top;
1212 padding: 8px 10px;
1213 font-size: 13px;
1214 }
1215
1216 .phpinfowp-grade-table code {
1217 font-size: 12px;
1218 }
1219
1220 /* =========================================================
1221 phpinfo page — search toolbar
1222 ========================================================= */
1223 .phpinfowp-toolbar {
1224 display: flex;
1225 align-items: center;
1226 gap: 8px;
1227 padding: 12px 0 16px;
1228 flex-wrap: wrap;
1229 }
1230
1231 /* =========================================================
1232 Extensions page
1233 ========================================================= */
1234 .phpinfowp-ext-page {
1235 padding-top: 20px;
1236 }
1237
1238 .phpinfowp-ext-section {
1239 margin-bottom: 28px;
1240 }
1241
1242 .phpinfowp-ext-heading {
1243 font-size: 13px;
1244 font-weight: 600;
1245 text-transform: uppercase;
1246 letter-spacing: .5px;
1247 margin: 0 0 10px;
1248 padding-bottom: 6px;
1249 border-bottom: 2px solid #dcdcde;
1250 }
1251
1252 .phpinfowp-ext-heading-loaded {
1253 color: #1d2327;
1254 border-color: #00a32a;
1255 }
1256
1257 .phpinfowp-ext-heading-missing {
1258 color: #d63638;
1259 border-color: #d63638;
1260 }
1261
1262 .phpinfowp-ext-grid {
1263 display: grid;
1264 grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
1265 gap: 6px;
1266 }
1267
1268 .phpinfowp-ext-item {
1269 display: flex;
1270 align-items: center;
1271 gap: 7px;
1272 padding: 5px 8px;
1273 border-radius: 4px;
1274 font-size: 13px;
1275 background: #f9f9f9;
1276 border: 1px solid #e8e8e8;
1277 }
1278
1279 .phpinfowp-ext-loaded {
1280 background: #f0faf2;
1281 border-color: #c3e6cb;
1282 }
1283
1284 .phpinfowp-ext-missing {
1285 background: #fff4f4;
1286 border-color: #f5c6c6;
1287 }
1288
1289 .phpinfowp-ext-dot {
1290 width: 8px;
1291 height: 8px;
1292 border-radius: 50%;
1293 flex-shrink: 0;
1294 }
1295
1296 .phpinfowp-ext-dot-loaded {
1297 background: #00a32a;
1298 }
1299
1300 .phpinfowp-ext-dot-missing {
1301 background: #d63638;
1302 }
1303
1304 .phpinfowp-ext-name {
1305 font-family: monospace;
1306 font-size: 12px;
1307 flex: 1;
1308 }
1309
1310 .phpinfowp-ext-ver {
1311 font-size: 10px;
1312 color: #666;
1313 white-space: nowrap;
1314 }
1315
1316 /* =========================================================
1317 Basic Info / Server Overview
1318 ========================================================= */
1319 .phpinfowp-info-page {
1320 max-width: 1000px;
1321 padding-top: 20px;
1322 }
1323
1324 .phpinfowp-info-grid {
1325 display: grid;
1326 grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
1327 gap: 14px;
1328 margin-bottom: 8px;
1329 }
1330
1331 .phpinfowp-info-card {
1332 background: #fff;
1333 border: 1px solid #dcdcde;
1334 border-radius: 6px;
1335 padding: 16px 18px;
1336 }
1337
1338 .phpinfowp-info-card-label {
1339 font-size: 11px;
1340 text-transform: uppercase;
1341 letter-spacing: .5px;
1342 color: #666;
1343 margin-bottom: 6px;
1344 }
1345
1346 .phpinfowp-info-card-value {
1347 font-size: 22px;
1348 font-weight: 700;
1349 color: #1d2327;
1350 margin-bottom: 4px;
1351 }
1352
1353 .phpinfowp-info-card-sub {
1354 font-size: 12px;
1355 color: #555;
1356 }
1357
1358 .phpinfowp-mini-bar-wrap {
1359 background: #f0f0f1;
1360 border-radius: 3px;
1361 height: 5px;
1362 margin-top: 6px;
1363 overflow: hidden;
1364 }
1365
1366 .phpinfowp-mini-bar {
1367 height: 100%;
1368 border-radius: 3px;
1369 }
1370
1371 .phpinfowp-info-table td:first-child {
1372 width: 210px;
1373 color: #555;
1374 font-size: 13px;
1375 }
1376
1377 .phpinfowp-info-table td:last-child {
1378 font-size: 13px;
1379 }
1380
1381 .phpinfowp-info-section-head {
1382 background: #f8f8fa !important;
1383 font-size: 11px !important;
1384 text-transform: uppercase;
1385 letter-spacing: .5px;
1386 color: #777BB3 !important;
1387 padding: 8px 12px !important;
1388 }
1389
1390 /* =========================================================
1391 .htaccess Change Log
1392 ========================================================= */
1393 /* =========================================================
1394 Activity Log
1395 ========================================================= */
1396 /* .phpinfowp-log-page composes with .phpinfowp-pro-page for consistent
1397 width and top-padding — no overrides needed here. */
1398
1399 .phpinfowp-log-controls {
1400 display: flex;
1401 justify-content: space-between;
1402 align-items: center;
1403 gap: 12px;
1404 flex-wrap: wrap;
1405 margin-bottom: 20px;
1406 }
1407
1408 .phpinfowp-log-filters {
1409 display: flex;
1410 gap: 6px;
1411 flex-wrap: wrap;
1412 }
1413
1414 .phpinfowp-log-filter-pill {
1415 display: inline-flex;
1416 align-items: center;
1417 gap: 6px;
1418 padding: 5px 12px;
1419 border-radius: 20px;
1420 font-size: 12px;
1421 font-weight: 600;
1422 text-decoration: none;
1423 color: #555;
1424 background: #f0f0f1;
1425 border: 1px solid #dcdcde;
1426 transition: background .15s, color .15s;
1427 }
1428
1429 .phpinfowp-log-filter-pill:hover {
1430 background: #e0e0e0;
1431 color: #333;
1432 }
1433
1434 .phpinfowp-log-filter-pill.active {
1435 background: #777BB3;
1436 color: #fff;
1437 border-color: #777BB3;
1438 }
1439
1440 .phpinfowp-log-filter-count {
1441 display: inline-flex;
1442 align-items: center;
1443 justify-content: center;
1444 min-width: 18px;
1445 height: 18px;
1446 padding: 0 5px;
1447 border-radius: 9px;
1448 font-size: 10px;
1449 font-weight: 700;
1450 background: rgba(0, 0, 0, .12);
1451 }
1452
1453 .phpinfowp-log-filter-pill.active .phpinfowp-log-filter-count {
1454 background: rgba(255, 255, 255, .25);
1455 }
1456
1457 .phpinfowp-log-empty {
1458 text-align: center;
1459 padding: 56px 20px;
1460 background: #f9f9f9;
1461 border: 1px solid #e0e0e0;
1462 border-radius: 8px;
1463 }
1464
1465 /* Timeline */
1466 .phpinfowp-timeline {
1467 display: flex;
1468 flex-direction: column;
1469 gap: 0;
1470 border: 1px solid #e0e0e0;
1471 border-radius: 8px;
1472 overflow: hidden;
1473 }
1474
1475 .phpinfowp-timeline-entry {
1476 display: flex;
1477 align-items: flex-start;
1478 gap: 14px;
1479 padding: 14px 18px;
1480 background: #fff;
1481 border-bottom: 1px solid #f0f0f1;
1482 border-left: 4px solid #ccc;
1483 transition: background .12s;
1484 }
1485
1486 .phpinfowp-timeline-entry:last-child {
1487 border-bottom: none;
1488 }
1489
1490 .phpinfowp-timeline-entry:hover {
1491 background: #fafafa;
1492 }
1493
1494 .phpinfowp-timeline-icon {
1495 flex-shrink: 0;
1496 width: 32px;
1497 height: 32px;
1498 border-radius: 50%;
1499 display: flex;
1500 align-items: center;
1501 justify-content: center;
1502 margin-top: 1px;
1503 }
1504
1505 .phpinfowp-timeline-body {
1506 flex: 1;
1507 min-width: 0;
1508 }
1509
1510 .phpinfowp-timeline-top {
1511 display: flex;
1512 align-items: center;
1513 gap: 8px;
1514 flex-wrap: wrap;
1515 margin-bottom: 4px;
1516 }
1517
1518 .phpinfowp-timeline-badge {
1519 font-size: 10px;
1520 font-weight: 700;
1521 letter-spacing: .5px;
1522 padding: 2px 7px;
1523 border-radius: 3px;
1524 color: #fff;
1525 flex-shrink: 0;
1526 }
1527
1528 .phpinfowp-timeline-file {
1529 font-size: 12px;
1530 background: #f0f0f0;
1531 padding: 1px 6px;
1532 border-radius: 3px;
1533 color: #444;
1534 }
1535
1536 .phpinfowp-timeline-user {
1537 font-size: 12px;
1538 color: #888;
1539 }
1540
1541 .phpinfowp-timeline-meta {
1542 font-size: 12px;
1543 color: #999;
1544 display: flex;
1545 gap: 6px;
1546 align-items: center;
1547 flex-wrap: wrap;
1548 }
1549
1550 /* =========================================================
1551 .htaccess Editor
1552 ========================================================= */
1553 .phpinfowp-htaccess-page {
1554 max-width: 1200px;
1555 }
1556
1557 .phpinfowp-htaccess-layout {
1558 display: grid;
1559 grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
1560 gap: 28px;
1561 align-items: flex-start;
1562 }
1563
1564 .phpinfowp-htaccess-editor-col,
1565 .phpinfowp-htaccess-preview-col {
1566 min-width: 0;
1567 }
1568
1569 @media (max-width: 960px) {
1570 .phpinfowp-htaccess-layout {
1571 grid-template-columns: 1fr;
1572 }
1573 }
1574
1575 #htaccess-editor {
1576 width: 100%;
1577 min-height: 260px;
1578 font-family: monospace;
1579 font-size: 13px;
1580 line-height: 1.6;
1581 box-sizing: border-box;
1582 resize: vertical;
1583 }
1584
1585 .phpinfowp-htaccess-buttons {
1586 display: flex;
1587 justify-content: space-between;
1588 align-items: center;
1589 margin-top: 12px;
1590 flex-wrap: wrap;
1591 gap: 8px;
1592 }
1593
1594 .phpinfowp-htaccess-preview {
1595 background: #1e1e2e;
1596 color: #cdd6f4;
1597 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1598 font-size: 11.5px;
1599 line-height: 1.5;
1600 padding: 12px 14px;
1601 border-radius: 6px;
1602 max-height: 360px;
1603 overflow-x: hidden;
1604 overflow-y: auto;
1605 white-space: pre-wrap;
1606 word-break: break-all;
1607 margin: 0;
1608 }
1609
1610 /* Long file paths in the banner + footer (.user.ini location etc.) must
1611 wrap, not push the layout sideways. */
1612 .phpinfowp-htaccess-page code {
1613 word-break: break-all;
1614 overflow-wrap: anywhere;
1615 white-space: normal;
1616 }
1617
1618 .phpinfowp-htaccess-banner {
1619 font-size: 13px;
1620 line-height: 1.55;
1621 }
1622
1623 .phpinfowp-htaccess-banner code {
1624 display: inline-block;
1625 max-width: 100%;
1626 vertical-align: bottom;
1627 }
1628
1629 /* =========================================================
1630 SSL Monitor
1631 ========================================================= */
1632 .phpinfowp-ssl-grid {
1633 display: grid;
1634 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
1635 gap: 18px;
1636 margin-top: 20px;
1637 }
1638
1639 .phpinfowp-ssl-card {
1640 background: #fff;
1641 border: 1px solid #e0e0e0;
1642 border-top: 4px solid #ccc;
1643 border-radius: 8px;
1644 padding: 18px 20px 16px;
1645 box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
1646 }
1647
1648 .phpinfowp-ssl-error {
1649 border-top-color: #d63638 !important;
1650 }
1651
1652 .phpinfowp-ssl-card-host {
1653 font-size: 14px;
1654 font-weight: 700;
1655 color: #1d2327;
1656 margin-bottom: 6px;
1657 word-break: break-all;
1658 }
1659
1660 .phpinfowp-ssl-card-days {
1661 font-size: 28px;
1662 font-weight: 800;
1663 line-height: 1.1;
1664 margin: 8px 0;
1665 }
1666
1667 .phpinfowp-ssl-card-status {
1668 margin-bottom: 12px;
1669 }
1670
1671 .phpinfowp-ssl-card-meta {
1672 width: 100%;
1673 border-collapse: collapse;
1674 font-size: 12px;
1675 color: #555;
1676 }
1677
1678 .phpinfowp-ssl-card-meta td {
1679 padding: 3px 0;
1680 }
1681
1682 .phpinfowp-ssl-card-meta td:first-child {
1683 color: #888;
1684 width: 52px;
1685 }
1686
1687 @media (max-width: 600px) {
1688 .phpinfowp-ssl-grid {
1689 grid-template-columns: 1fr;
1690 }
1691 }
1692
1693 /* =========================================================
1694 Admin Bar Indicator
1695 ========================================================= */
1696 #wpadminbar #wp-admin-bar-phpinfowp-indicator>.ab-item {
1697 font-size: 12px !important;
1698 padding: 0 10px !important;
1699 }
1700
1701 #wpadminbar #wp-admin-bar-phpinfowp-indicator .ab-sub-wrapper {
1702 min-width: 200px;
1703 }
1704
1705 #wpadminbar #wp-admin-bar-phpinfowp-indicator .ab-submenu .ab-item {
1706 font-size: 12px !important;
1707 }
1708
1709 /* =========================================================
1710 Topbar (Elementor-style header) — every plugin page
1711 ========================================================= */
1712 .phpinfowp-topbar {
1713 display: none;
1714 align-items: center;
1715 justify-content: space-between;
1716 gap: 16px;
1717 height: 52px;
1718 padding: 0 24px;
1719 background: #777BB3;
1720 color: #fff;
1721 box-sizing: border-box;
1722 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
1723 }
1724
1725 body.phpinfowp-page .phpinfowp-topbar {
1726 display: flex;
1727 }
1728
1729 .phpinfowp-topbar-brand {
1730 display: flex;
1731 align-items: center;
1732 gap: 10px;
1733 min-width: 0;
1734 }
1735
1736 .phpinfowp-topbar-logo {
1737 display: inline-flex;
1738 align-items: center;
1739 line-height: 0;
1740 flex-shrink: 0;
1741 }
1742
1743 .phpinfowp-topbar-logo svg {
1744 fill: #ffffff !important;
1745 }
1746
1747 .phpinfowp-topbar-name {
1748 font-size: 15px;
1749 font-weight: 700;
1750 letter-spacing: .2px;
1751 color: #ffffff;
1752 white-space: nowrap;
1753 }
1754
1755 .phpinfowp-topbar-sep {
1756 color: rgba(255, 255, 255, 0.45);
1757 margin: 0 3px;
1758 }
1759
1760 .phpinfowp-topbar-title {
1761 font-size: 14px;
1762 font-weight: 500;
1763 color: rgba(255, 255, 255, 0.92);
1764 white-space: nowrap;
1765 overflow: hidden;
1766 text-overflow: ellipsis;
1767 }
1768
1769 .phpinfowp-topbar-actions {
1770 display: flex;
1771 align-items: center;
1772 gap: 12px;
1773 }
1774
1775 .phpinfowp-topbar-cta {
1776 display: inline-block;
1777 padding: 6px 14px;
1778 background: #ffffff;
1779 color: #777BB3 !important;
1780 text-decoration: none;
1781 border-radius: 6px;
1782 font-size: 12.5px;
1783 font-weight: 700;
1784 line-height: 1;
1785 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
1786 transition: all .15s ease;
1787 }
1788
1789 .phpinfowp-topbar-cta:hover,
1790 .phpinfowp-topbar-cta:focus {
1791 background: #f8f8fc;
1792 color: #515488 !important;
1793 transform: translateY(-1px);
1794 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
1795 }
1796
1797 .phpinfowp-topbar-pro-active {
1798 font-size: 12px;
1799 font-weight: 600;
1800 color: #ffffff;
1801 background: rgba(255, 255, 255, 0.18);
1802 padding: 3px 10px;
1803 border-radius: 14px;
1804 border: 1px solid rgba(255, 255, 255, 0.3);
1805 letter-spacing: .2px;
1806 }
1807
1808 /* Page-wide breathing room on every plugin page.
1809 #wpbody-content already has WP's bottom padding; we add top/right and
1810 .phpinfowp-has-sidenav adds left padding below.
1811 box-sizing:border-box prevents the added padding from creating horizontal
1812 overflow (WP's default #wpbody-content is width:100% content-box). */
1813 body.phpinfowp-page #wpbody-content {
1814 padding-top: 18px;
1815 padding-right: 24px;
1816 box-sizing: border-box;
1817 }
1818
1819 /* The topbar lives inside #wpcontent, which has 20px of left padding by
1820 default. Pull the bar flush to the left edge of #wpcontent so it spans
1821 the full content area (matches Elementor's full-bleed header). */
1822 body.phpinfowp-page .phpinfowp-topbar {
1823 margin-left: -20px;
1824 }
1825
1826 /* =========================================================
1827 Secondary sidebar — Audit / Tools / Reports
1828 Layout: an absolutely-positioned column on the left of #wpbody-content,
1829 sitting below the topbar. body.phpinfowp-has-sidenav pushes content right.
1830 ========================================================= */
1831 .phpinfowp-side-nav {
1832 position: absolute;
1833 top: 18px;
1834 left: 0;
1835 width: 240px;
1836 margin: 0 0 20px;
1837 padding: 12px;
1838 background: #fff;
1839 border: 1px solid #e4e6eb;
1840 border-radius: 8px;
1841 box-sizing: border-box;
1842 z-index: 1;
1843 }
1844
1845 .phpinfowp-side-nav-list {
1846 list-style: none;
1847 margin: 0;
1848 padding: 0;
1849 }
1850
1851 .phpinfowp-side-nav-list li {
1852 margin: 0;
1853 }
1854
1855 .phpinfowp-side-nav-list li+li {
1856 margin-top: 2px;
1857 }
1858
1859 .phpinfowp-side-nav-item {
1860 display: flex;
1861 align-items: center;
1862 gap: 12px;
1863 padding: 11px 14px;
1864 font-size: 14px;
1865 font-weight: 500;
1866 color: #1d2327;
1867 text-decoration: none;
1868 border-radius: 6px;
1869 transition: background .12s, color .12s;
1870 }
1871
1872 .phpinfowp-side-nav-icon {
1873 width: 20px;
1874 height: 20px;
1875 font-size: 20px;
1876 line-height: 1;
1877 flex-shrink: 0;
1878 color: #50575e;
1879 }
1880
1881 .phpinfowp-side-nav-label-text {
1882 flex: 1;
1883 min-width: 0;
1884 overflow: hidden;
1885 text-overflow: ellipsis;
1886 white-space: nowrap;
1887 }
1888
1889 .phpinfowp-side-nav-item:hover,
1890 .phpinfowp-side-nav-item:focus {
1891 background: #f2f3f5;
1892 color: #1d2327;
1893 box-shadow: none;
1894 outline: none;
1895 }
1896
1897 .phpinfowp-side-nav-item:hover .phpinfowp-side-nav-icon,
1898 .phpinfowp-side-nav-item:focus .phpinfowp-side-nav-icon {
1899 color: #1d2327;
1900 }
1901
1902 .phpinfowp-side-nav-item.is-active {
1903 background: #e8eaed;
1904 color: #1d2327;
1905 font-weight: 600;
1906 }
1907
1908 .phpinfowp-side-nav-item.is-active .phpinfowp-side-nav-icon {
1909 color: #1d2327;
1910 }
1911
1912 .phpinfowp-side-nav-pro {
1913 display: inline-block;
1914 background: #777BB3;
1915 color: #fff;
1916 font-size: 9px;
1917 font-weight: 700;
1918 letter-spacing: .4px;
1919 padding: 1px 5px;
1920 border-radius: 3px;
1921 flex-shrink: 0;
1922 }
1923
1924 /* Push the page content right so it sits beside the sidebar.
1925 We pad #wpbody-content itself (not just .wrap) because most phpinfo views
1926 render content directly into #wpbody-content without a .wrap wrapper.
1927 The sidebar is position:absolute so padding doesn't shift it.
1928 left padding stacks with the page-wide right padding from .phpinfowp-page. */
1929 body.phpinfowp-has-sidenav #wpbody-content {
1930 position: relative;
1931 padding-left: 260px;
1932 box-sizing: border-box;
1933 }
1934
1935 @media (max-width: 782px) {
1936 .phpinfowp-side-nav {
1937 position: static;
1938 width: auto;
1939 margin: 10px 0 16px;
1940 }
1941
1942 body.phpinfowp-has-sidenav #wpbody-content {
1943 padding-left: 0;
1944 }
1945
1946 body.phpinfowp-page #wpbody-content {
1947 padding-right: 12px;
1948 }
1949 }
1950
1951 /* =========================================================
1952 Dashboard
1953 ========================================================= */
1954 .phpinfowp-dashboard .phpinfowp-page-header {
1955 align-items: center;
1956 }
1957
1958 .phpinfowp-dash-stats {
1959 display: grid;
1960 grid-template-columns: repeat(4, 1fr);
1961 gap: 16px;
1962 margin-bottom: 28px;
1963 }
1964
1965 @media (max-width: 900px) {
1966 .phpinfowp-dash-stats {
1967 grid-template-columns: repeat(2, 1fr);
1968 }
1969 }
1970
1971 .phpinfowp-dash-stat {
1972 display: block;
1973 padding: 18px 20px;
1974 background: #fff;
1975 border: 1px solid #e0e0e0;
1976 border-radius: 8px;
1977 text-decoration: none;
1978 color: inherit;
1979 transition: box-shadow .15s, transform .15s, border-color .15s;
1980 box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
1981 }
1982
1983 .phpinfowp-dash-stat:hover {
1984 border-color: #c8d0e0;
1985 box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
1986 transform: translateY(-1px);
1987 color: inherit;
1988 }
1989
1990 .phpinfowp-dash-stat-label {
1991 font-size: 11px;
1992 font-weight: 700;
1993 text-transform: uppercase;
1994 letter-spacing: .5px;
1995 color: #888;
1996 margin-bottom: 6px;
1997 }
1998
1999 .phpinfowp-dash-stat-value {
2000 font-size: 38px;
2001 font-weight: 800;
2002 line-height: 1;
2003 color: #1d2327;
2004 margin-bottom: 6px;
2005 }
2006
2007 .phpinfowp-dash-stat-meta {
2008 font-size: 12px;
2009 color: #666;
2010 }
2011
2012 /* Grade-coloured stat values */
2013 .phpinfowp-dash-stat-value.grade-aplus,
2014 .phpinfowp-dash-stat-value.grade-a {
2015 color: #00a32a;
2016 }
2017
2018 .phpinfowp-dash-stat-value.grade-b {
2019 color: #5b9b3a;
2020 }
2021
2022 .phpinfowp-dash-stat-value.grade-c {
2023 color: #dba617;
2024 }
2025
2026 .phpinfowp-dash-stat-value.grade-d {
2027 color: #d68f17;
2028 }
2029
2030 .phpinfowp-dash-stat-value.grade-f {
2031 color: #d63638;
2032 }
2033
2034 .phpinfowp-dash-section {
2035 margin-top: 32px;
2036 }
2037
2038 .phpinfowp-dash-section-title {
2039 font-size: 13px;
2040 font-weight: 700;
2041 text-transform: uppercase;
2042 letter-spacing: .6px;
2043 color: #1d2327;
2044 margin: 0 0 14px;
2045 padding-bottom: 10px;
2046 border-bottom: 1px solid #e0e0e0;
2047 }
2048
2049 /* Active issues panel */
2050 .phpinfowp-dash-issues {
2051 display: flex;
2052 flex-direction: column;
2053 gap: 8px;
2054 }
2055
2056 .phpinfowp-dash-issue {
2057 display: flex;
2058 align-items: center;
2059 gap: 10px;
2060 padding: 10px 14px;
2061 background: #fff;
2062 border: 1px solid #e0e0e0;
2063 border-left: 3px solid #dba617;
2064 border-radius: 4px;
2065 text-decoration: none;
2066 color: #1d2327;
2067 font-size: 13px;
2068 transition: background .15s;
2069 }
2070
2071 .phpinfowp-dash-issue:hover {
2072 background: #fafafb;
2073 color: #1d2327;
2074 }
2075
2076 .phpinfowp-dash-issue-dot {
2077 display: inline-block;
2078 width: 8px;
2079 height: 8px;
2080 border-radius: 50%;
2081 flex-shrink: 0;
2082 }
2083
2084 .phpinfowp-dash-issue-detail {
2085 color: #666;
2086 font-size: 12px;
2087 margin-left: auto;
2088 }
2089
2090 /* Feature card grid */
2091 .phpinfowp-dash-grid {
2092 display: grid;
2093 grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
2094 gap: 12px;
2095 }
2096
2097 .phpinfowp-dash-card {
2098 display: block;
2099 padding: 16px 18px;
2100 background: #fff;
2101 border: 1px solid #e0e0e0;
2102 border-radius: 8px;
2103 text-decoration: none;
2104 color: #1d2327;
2105 transition: box-shadow .15s, transform .15s, border-color .15s;
2106 position: relative;
2107 }
2108
2109 .phpinfowp-dash-card:hover {
2110 border-color: #777BB3;
2111 box-shadow: 0 2px 8px rgba(119, 123, 179, .15);
2112 transform: translateY(-1px);
2113 color: #1d2327;
2114 }
2115
2116 .phpinfowp-dash-card .dashicons {
2117 font-size: 22px;
2118 width: 22px;
2119 height: 22px;
2120 color: #777BB3;
2121 margin-bottom: 8px;
2122 }
2123
2124 .phpinfowp-dash-card-title {
2125 font-size: 14px;
2126 font-weight: 600;
2127 margin-bottom: 4px;
2128 display: flex;
2129 align-items: center;
2130 gap: 6px;
2131 }
2132
2133 .phpinfowp-dash-card-desc {
2134 font-size: 12px;
2135 color: #666;
2136 line-height: 1.45;
2137 }
2138
2139 .phpinfowp-dash-card-pro {
2140 display: inline-block;
2141 background: #777BB3;
2142 color: #fff;
2143 font-size: 9px;
2144 font-weight: 700;
2145 padding: 1px 5px;
2146 border-radius: 3px;
2147 letter-spacing: .4px;
2148 }
2149
2150 .phpinfowp-dash-card.is-locked {
2151 opacity: .82;
2152 }
2153
2154 .phpinfowp-dash-card.is-locked:hover {
2155 opacity: 1;
2156 }
2157
2158 /* =========================================================
2159 Security Headers — row cards
2160 ========================================================= */
2161 .phpinfowp-sec-rows {
2162 display: flex;
2163 flex-direction: column;
2164 gap: 10px;
2165 }
2166
2167 .phpinfowp-sec-row {
2168 display: flex;
2169 align-items: flex-start;
2170 gap: 14px;
2171 padding: 14px 18px;
2172 background: #fff;
2173 border: 1px solid #e0e0e0;
2174 border-left: 4px solid #ccc;
2175 border-radius: 6px;
2176 box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
2177 }
2178
2179 .phpinfowp-sec-row-icon {
2180 flex-shrink: 0;
2181 margin-top: 1px;
2182 }
2183
2184 .phpinfowp-sec-row-icon .dashicons {
2185 font-size: 22px;
2186 width: 22px;
2187 height: 22px;
2188 }
2189
2190 .phpinfowp-sec-row-body {
2191 flex: 1;
2192 min-width: 0;
2193 }
2194
2195 .phpinfowp-sec-row-title {
2196 display: flex;
2197 align-items: center;
2198 justify-content: space-between;
2199 gap: 8px;
2200 margin-bottom: 4px;
2201 flex-wrap: wrap;
2202 }
2203
2204 .phpinfowp-sec-row-points {
2205 font-size: 12px;
2206 font-weight: 700;
2207 flex-shrink: 0;
2208 }
2209
2210 .phpinfowp-sec-row-desc {
2211 font-size: 13px;
2212 color: #555;
2213 margin-bottom: 6px;
2214 }
2215
2216 .phpinfowp-sec-row-value {
2217 display: inline-block;
2218 background: #f0f0f1;
2219 padding: 2px 8px;
2220 border-radius: 4px;
2221 font-size: 12px;
2222 word-break: break-all;
2223 margin-bottom: 4px;
2224 }
2225
2226 .phpinfowp-sec-row-missing {
2227 font-size: 12px;
2228 color: #d63638;
2229 font-style: italic;
2230 }
2231
2232 .phpinfowp-sec-row-note {
2233 margin-top: 6px;
2234 font-size: 12px;
2235 line-height: 1.4;
2236 }
2237
2238 /* Mail DNS rows (compact) */
2239 .phpinfowp-mail-row {
2240 padding: 8px 12px;
2241 border-left-width: 3px;
2242 box-shadow: none;
2243 background: #fff !important;
2244 gap: 10px;
2245 }
2246
2247 .phpinfowp-mail-row .phpinfowp-sec-row-title {
2248 margin-bottom: 2px;
2249 font-size: 13px;
2250 }
2251
2252 .phpinfowp-mail-row .phpinfowp-sec-row-value {
2253 margin-bottom: 2px;
2254 background: transparent;
2255 padding: 0;
2256 font-size: 12px;
2257 color: #444;
2258 }
2259
2260 .phpinfowp-mail-row .phpinfowp-sec-row-icon {
2261 margin-top: 0;
2262 }
2263
2264 .phpinfowp-mail-row .phpinfowp-sec-row-icon .dashicons {
2265 font-size: 18px;
2266 width: 18px;
2267 height: 18px;
2268 }
2269
2270 .phpinfowp-mail-row .phpinfowp-sec-row-note {
2271 margin-top: 4px;
2272 }
2273
2274 /* =========================================================
2275 Config Grader — section + check cards
2276 ========================================================= */
2277
2278 /* ----- Context banner: what we tuned the recommendations for ----- */
2279 .phpinfowp-cg-context {
2280 margin: 0 0 14px;
2281 padding: 12px 14px;
2282 background: #f6f7fb;
2283 border: 1px solid #e0e2ea;
2284 border-radius: 8px;
2285 }
2286
2287 .phpinfowp-cg-context-label {
2288 font-size: 11px;
2289 font-weight: 700;
2290 letter-spacing: .5px;
2291 text-transform: uppercase;
2292 color: #50575e;
2293 margin-bottom: 8px;
2294 }
2295
2296 .phpinfowp-cg-context-row {
2297 display: flex;
2298 flex-wrap: wrap;
2299 gap: 6px;
2300 }
2301
2302 .phpinfowp-cg-chip {
2303 display: inline-flex;
2304 align-items: center;
2305 font-size: 11px;
2306 font-weight: 500;
2307 padding: 3px 9px;
2308 border-radius: 999px;
2309 background: #fff;
2310 border: 1px solid #d0d4dd;
2311 color: #1d2327;
2312 }
2313
2314 .phpinfowp-cg-chip-php {
2315 background: #efeefd;
2316 border-color: #c8c4f3;
2317 color: #4a3da0;
2318 }
2319
2320 .phpinfowp-cg-chip-host {
2321 background: #ecf6ff;
2322 border-color: #b3d4f7;
2323 color: #1a4a8a;
2324 }
2325
2326 .phpinfowp-cg-chip-plugin {
2327 background: #fff;
2328 border-color: #d0d4dd;
2329 color: #1d2327;
2330 }
2331
2332 .phpinfowp-cg-chip-dev {
2333 background: #fff5d6;
2334 border-color: #e9c977;
2335 color: #8a6500;
2336 }
2337
2338 /* ----- Severity pills (Critical / High / Medium / Low) ----- */
2339 .phpinfowp-sev {
2340 display: inline-block;
2341 margin-left: 8px;
2342 vertical-align: middle;
2343 font-size: 10px;
2344 font-weight: 700;
2345 letter-spacing: .4px;
2346 text-transform: uppercase;
2347 padding: 2px 7px;
2348 border-radius: 999px;
2349 border: 1px solid;
2350 background: #fff;
2351 line-height: 1.5;
2352 }
2353
2354 .phpinfowp-sev-critical {
2355 background: #fbe7e8;
2356 }
2357
2358 .phpinfowp-sev-high {
2359 background: #fff5d6;
2360 }
2361
2362 .phpinfowp-sev-medium {
2363 background: #efeefd;
2364 }
2365
2366 .phpinfowp-sev-low {
2367 background: #f0f0f3;
2368 }
2369
2370 /* ----- Trend indicator next to the score ----- */
2371 .phpinfowp-trend {
2372 display: inline-flex;
2373 align-items: baseline;
2374 gap: 4px;
2375 margin-left: 10px;
2376 font-size: 14px;
2377 font-weight: 600;
2378 padding: 2px 8px;
2379 border-radius: 999px;
2380 vertical-align: middle;
2381 }
2382
2383 .phpinfowp-trend small {
2384 font-size: 10px;
2385 font-weight: 500;
2386 color: inherit;
2387 opacity: .7;
2388 }
2389
2390 .phpinfowp-trend-up {
2391 color: #00a32a;
2392 background: #e8f6ec;
2393 }
2394
2395 .phpinfowp-trend-down {
2396 color: #d63638;
2397 background: #fbe7e8;
2398 }
2399
2400 .phpinfowp-trend-flat {
2401 color: #646970;
2402 background: #f0f0f3;
2403 }
2404
2405 /* ----- Cross-directive consistency issues ----- */
2406 .phpinfowp-cg-cross {
2407 margin: 0 0 24px;
2408 padding: 16px 18px;
2409 background: #fffbea;
2410 border: 1px solid #f4d35e;
2411 border-left: 4px solid #dba617;
2412 border-radius: 8px;
2413 }
2414
2415 .phpinfowp-cg-cross-heading {
2416 margin: 0 0 12px;
2417 font-size: 14px;
2418 font-weight: 700;
2419 color: #6b4d00;
2420 display: flex;
2421 align-items: center;
2422 gap: 6px;
2423 }
2424
2425 .phpinfowp-cg-cross-sub {
2426 font-weight: 400;
2427 color: #8a6500;
2428 font-size: 13px;
2429 }
2430
2431 .phpinfowp-cg-cross-row {
2432 background: #fff;
2433 border: 1px solid #f0d995;
2434 border-radius: 6px;
2435 padding: 10px 12px;
2436 margin-top: 10px;
2437 }
2438
2439 .phpinfowp-cg-cross-row:first-of-type {
2440 margin-top: 0;
2441 }
2442
2443 .phpinfowp-cg-cross-top {
2444 display: flex;
2445 justify-content: space-between;
2446 align-items: center;
2447 gap: 8px;
2448 margin-bottom: 4px;
2449 }
2450
2451 .phpinfowp-cg-cross-reason {
2452 font-size: 12.5px;
2453 color: #3c434a;
2454 line-height: 1.5;
2455 }
2456
2457 .phpinfowp-cg-cross-fix {
2458 margin-top: 6px;
2459 font-size: 12.5px;
2460 color: #1d2327;
2461 background: #f0f6ff;
2462 border: 1px solid #c8d8f5;
2463 border-radius: 4px;
2464 padding: 6px 10px;
2465 }
2466
2467 /* ----- Live evidence chip under a check ----- */
2468 .phpinfowp-grade-check-live {
2469 margin-top: 8px;
2470 padding: 8px 10px;
2471 background: #f0f6ff;
2472 border: 1px solid #c8d8f5;
2473 border-left: 3px solid #2271b1;
2474 border-radius: 4px;
2475 font-size: 12px;
2476 line-height: 1.5;
2477 color: #1a3a72;
2478 display: flex;
2479 align-items: flex-start;
2480 gap: 6px;
2481 }
2482
2483 .phpinfowp-grade-check-live .dashicons {
2484 flex-shrink: 0;
2485 color: #2271b1;
2486 font-size: 14px;
2487 width: 14px;
2488 height: 14px;
2489 margin-top: 2px;
2490 }
2491
2492 /* ----- Host-aware fix hint under a check ----- */
2493 .phpinfowp-grade-check-host {
2494 margin-top: 8px;
2495 padding: 8px 10px;
2496 background: #fafafb;
2497 border: 1px dashed #c0c4cc;
2498 border-radius: 4px;
2499 font-size: 12px;
2500 line-height: 1.5;
2501 color: #3c434a;
2502 }
2503
2504 .phpinfowp-grade-check-host a {
2505 margin-left: 6px;
2506 font-weight: 500;
2507 }
2508
2509 .phpinfowp-grade-section {
2510 margin-bottom: 28px;
2511 }
2512
2513 .phpinfowp-grade-section-heading {
2514 font-size: 14px;
2515 font-weight: 700;
2516 text-transform: uppercase;
2517 letter-spacing: .5px;
2518 color: #1d2327;
2519 margin: 0 0 12px 0;
2520 display: flex;
2521 align-items: center;
2522 gap: 10px;
2523 border-bottom: 2px solid #e0e0e8;
2524 padding-bottom: 8px;
2525 }
2526
2527 .phpinfowp-grade-section-badge {
2528 font-size: 10px;
2529 font-weight: 700;
2530 letter-spacing: .4px;
2531 padding: 2px 8px;
2532 border-radius: 3px;
2533 color: #fff;
2534 text-transform: uppercase;
2535 }
2536
2537 .phpinfowp-grade-checks {
2538 display: flex;
2539 flex-direction: column;
2540 gap: 8px;
2541 }
2542
2543 .phpinfowp-grade-check {
2544 display: flex;
2545 align-items: flex-start;
2546 gap: 12px;
2547 padding: 12px 16px;
2548 border: 1px solid #e0e0e0;
2549 border-left: 4px solid #ccc;
2550 border-radius: 6px;
2551 box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
2552 }
2553
2554 .phpinfowp-grade-check-icon {
2555 flex-shrink: 0;
2556 margin-top: 1px;
2557 }
2558
2559 .phpinfowp-grade-check-icon .dashicons {
2560 font-size: 20px;
2561 width: 20px;
2562 height: 20px;
2563 }
2564
2565 .phpinfowp-grade-check-body {
2566 flex: 1;
2567 min-width: 0;
2568 }
2569
2570 .phpinfowp-grade-check-key {
2571 font-size: 13px;
2572 font-weight: 600;
2573 margin-bottom: 5px;
2574 }
2575
2576 .phpinfowp-grade-check-key code {
2577 background: #f0f0f1;
2578 padding: 1px 6px;
2579 border-radius: 3px;
2580 font-size: 12px;
2581 }
2582
2583 .phpinfowp-grade-check-values {
2584 display: flex;
2585 align-items: center;
2586 gap: 8px;
2587 flex-wrap: wrap;
2588 font-size: 12px;
2589 margin-bottom: 4px;
2590 }
2591
2592 .phpinfowp-grade-check-values code {
2593 padding: 1px 5px;
2594 border-radius: 3px;
2595 background: rgba(0, 0, 0, .05);
2596 font-size: 11px;
2597 }
2598
2599 .phpinfowp-grade-check-note {
2600 font-size: 12px;
2601 color: #666;
2602 line-height: 1.4;
2603 margin-top: 4px;
2604 }
2605
2606 /* =========================================================
2607 Extension page — heading count badge
2608 ========================================================= */
2609 .phpinfowp-ext-heading-count {
2610 display: inline-flex;
2611 align-items: center;
2612 justify-content: center;
2613 background: #e0e0e0;
2614 color: #555;
2615 font-size: 11px;
2616 font-weight: 700;
2617 min-width: 22px;
2618 height: 18px;
2619 padding: 0 5px;
2620 border-radius: 9px;
2621 margin-left: 4px;
2622 vertical-align: middle;
2623 }
2624
2625 /* =========================================================
2626 PHP Compatibility Scanner
2627 ========================================================= */
2628 .phpinfowp-compat-controls {
2629 display: flex;
2630 align-items: center;
2631 gap: 12px;
2632 padding: 14px 18px;
2633 background: #fff;
2634 border: 1px solid #e0e0e0;
2635 border-radius: 6px;
2636 margin-bottom: 20px;
2637 flex-wrap: wrap;
2638 }
2639
2640 .phpinfowp-compat-controls select {
2641 margin-left: 8px;
2642 padding: 4px 28px 4px 10px;
2643 min-width: 110px;
2644 }
2645
2646 /* Vertically center the dashicon against the button label — inline
2647 vertical-align:middle leaves the 20px glyph sitting low, so use flex. */
2648 .phpinfowp-compat-controls .button {
2649 display: inline-flex;
2650 align-items: center;
2651 gap: 6px;
2652 }
2653
2654 .phpinfowp-compat-controls .button .dashicons {
2655 font-size: 18px;
2656 width: 18px;
2657 height: 18px;
2658 line-height: 1;
2659 }
2660
2661 .phpinfowp-compat-empty {
2662 text-align: center;
2663 padding: 60px 20px;
2664 background: #fff;
2665 border: 2px dashed #e0e0e0;
2666 border-radius: 8px;
2667 color: #888;
2668 }
2669
2670 .phpinfowp-compat-empty .dashicons {
2671 font-size: 48px;
2672 width: 48px;
2673 height: 48px;
2674 color: #ccc;
2675 margin-bottom: 12px;
2676 }
2677
2678 .phpinfowp-compat-empty h3 {
2679 margin: 0 0 8px;
2680 color: #444;
2681 }
2682
2683 .phpinfowp-compat-owner {
2684 background: #fff;
2685 border: 1px solid #e0e0e0;
2686 border-radius: 6px;
2687 margin-bottom: 8px;
2688 overflow: hidden;
2689 }
2690
2691 .phpinfowp-compat-owner summary {
2692 cursor: pointer;
2693 padding: 12px 16px;
2694 display: flex;
2695 align-items: center;
2696 gap: 10px;
2697 font-size: 14px;
2698 list-style: none;
2699 user-select: none;
2700 }
2701
2702 .phpinfowp-compat-owner summary::-webkit-details-marker {
2703 display: none;
2704 }
2705
2706 .phpinfowp-compat-owner summary::before {
2707 content: '';
2708 font-size: 10px;
2709 color: #888;
2710 transition: transform .15s;
2711 }
2712
2713 .phpinfowp-compat-owner[open] summary::before {
2714 transform: rotate(90deg);
2715 }
2716
2717 .phpinfowp-compat-owner-type {
2718 font-size: 10px;
2719 font-weight: 700;
2720 letter-spacing: .4px;
2721 padding: 3px 7px;
2722 border-radius: 3px;
2723 color: #fff;
2724 }
2725
2726 .phpinfowp-compat-owner-name {
2727 flex: 1;
2728 color: #1d2327;
2729 word-break: break-all;
2730 }
2731
2732 .phpinfowp-compat-owner-counts {
2733 font-size: 12px;
2734 color: #666;
2735 display: flex;
2736 gap: 8px;
2737 align-items: center;
2738 }
2739
2740 .phpinfowp-compat-issues {
2741 padding: 4px 16px 14px;
2742 border-top: 1px solid #f0f0f0;
2743 display: flex;
2744 flex-direction: column;
2745 gap: 6px;
2746 }
2747
2748 .phpinfowp-compat-issue {
2749 padding: 10px 12px;
2750 background: #fafafa;
2751 border-left: 3px solid #ccc;
2752 border-radius: 4px;
2753 }
2754
2755 .phpinfowp-compat-issue-head {
2756 display: flex;
2757 align-items: center;
2758 gap: 10px;
2759 flex-wrap: wrap;
2760 margin-bottom: 4px;
2761 }
2762
2763 .phpinfowp-compat-sev {
2764 font-size: 10px;
2765 font-weight: 700;
2766 letter-spacing: .4px;
2767 padding: 2px 6px;
2768 border-radius: 3px;
2769 color: #fff;
2770 }
2771
2772 .phpinfowp-compat-name {
2773 background: #f0f0f1;
2774 padding: 1px 6px;
2775 border-radius: 3px;
2776 font-size: 12px;
2777 }
2778
2779 .phpinfowp-compat-where {
2780 font-size: 11px;
2781 color: #666;
2782 font-family: monospace;
2783 }
2784
2785 .phpinfowp-compat-issue-meta {
2786 font-size: 12px;
2787 color: #555;
2788 padding-left: 0;
2789 }
2790
2791 .phpinfowp-compat-fix {
2792 color: #444;
2793 font-style: italic;
2794 }
2795
2796 /* =========================================================
2797 Database Health
2798 ========================================================= */
2799 .phpinfowp-dbh-server {
2800 display: flex;
2801 align-items: center;
2802 justify-content: space-between;
2803 gap: 20px;
2804 background: #fff;
2805 border: 1px solid #e0e0e0;
2806 border-left: 5px solid #ccc;
2807 border-radius: 8px;
2808 padding: 18px 22px;
2809 margin-bottom: 20px;
2810 flex-wrap: wrap;
2811 }
2812
2813 .phpinfowp-dbh-server-engine {
2814 font-size: 22px;
2815 font-weight: 700;
2816 color: #1d2327;
2817 }
2818
2819 .phpinfowp-dbh-server-full {
2820 font-size: 12px;
2821 color: #888;
2822 font-family: monospace;
2823 margin-top: 2px;
2824 }
2825
2826 .phpinfowp-dbh-server-status {
2827 text-align: right;
2828 }
2829
2830 .phpinfowp-dbh-badge {
2831 font-size: 11px;
2832 font-weight: 700;
2833 letter-spacing: .5px;
2834 padding: 3px 9px;
2835 border-radius: 3px;
2836 color: #fff;
2837 display: inline-block;
2838 }
2839
2840 .phpinfowp-dbh-server-eol {
2841 font-size: 12px;
2842 color: #555;
2843 margin-top: 4px;
2844 }
2845
2846 .phpinfowp-dbh-metrics {
2847 display: grid;
2848 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
2849 gap: 14px;
2850 margin-bottom: 20px;
2851 }
2852
2853 .phpinfowp-dbh-metric {
2854 background: #fff;
2855 border: 1px solid #e0e0e0;
2856 border-top: 3px solid #777BB3;
2857 border-radius: 6px;
2858 padding: 14px 16px;
2859 }
2860
2861 .phpinfowp-dbh-metric-label {
2862 font-size: 11px;
2863 font-weight: 700;
2864 text-transform: uppercase;
2865 letter-spacing: .5px;
2866 color: #666;
2867 display: flex;
2868 align-items: center;
2869 justify-content: space-between;
2870 margin-bottom: 6px;
2871 }
2872
2873 .phpinfowp-dbh-metric-badge {
2874 font-size: 9px;
2875 font-weight: 700;
2876 letter-spacing: .4px;
2877 padding: 1px 5px;
2878 border-radius: 2px;
2879 color: #fff;
2880 }
2881
2882 .phpinfowp-dbh-metric-value {
2883 font-size: 22px;
2884 font-weight: 700;
2885 color: #1d2327;
2886 line-height: 1.1;
2887 margin-bottom: 4px;
2888 }
2889
2890 .phpinfowp-dbh-metric-sub {
2891 font-size: 11px;
2892 color: #888;
2893 }
2894
2895 /* =========================================================
2896 WP Cron Monitor
2897 ========================================================= */
2898 .phpinfowp-cron-summary {
2899 display: grid;
2900 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
2901 gap: 12px;
2902 margin-bottom: 8px;
2903 }
2904
2905 .phpinfowp-cron-stat {
2906 background: #fff;
2907 border: 1px solid #e0e0e0;
2908 border-top: 3px solid #777BB3;
2909 border-radius: 6px;
2910 padding: 16px 18px;
2911 text-align: center;
2912 }
2913
2914 .phpinfowp-cron-stat-num {
2915 font-size: 28px;
2916 font-weight: 700;
2917 line-height: 1;
2918 margin-bottom: 4px;
2919 color: #1d2327;
2920 }
2921
2922 .phpinfowp-cron-stat-label {
2923 font-size: 11px;
2924 font-weight: 600;
2925 text-transform: uppercase;
2926 letter-spacing: .4px;
2927 color: #666;
2928 }
2929
2930 .phpinfowp-cron-overdue td {
2931 background: #fff4f4 !important;
2932 }
2933
2934 .phpinfowp-cron-imminent td {
2935 background: #fffbf0 !important;
2936 }
2937
2938 .phpinfowp-cron-orphan-badge {
2939 font-size: 10px;
2940 font-weight: 700;
2941 letter-spacing: .4px;
2942 background: #dba617;
2943 color: #fff;
2944 padding: 1px 6px;
2945 border-radius: 3px;
2946 margin-left: 6px;
2947 text-transform: uppercase;
2948 }
2949
2950 /* =========================================================
2951 Mail deliverability
2952 ========================================================= */
2953 .phpinfowp-mail-summary {
2954 display: grid;
2955 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
2956 gap: 16px;
2957 background: #fff;
2958 border: 1px solid #e0e0e0;
2959 border-radius: 8px;
2960 padding: 20px 24px;
2961 margin-bottom: 8px;
2962 }
2963
2964 .phpinfowp-mail-summary-label {
2965 font-size: 11px;
2966 font-weight: 700;
2967 text-transform: uppercase;
2968 letter-spacing: .5px;
2969 color: #888;
2970 margin-bottom: 4px;
2971 }
2972
2973 .phpinfowp-mail-summary-value {
2974 font-size: 18px;
2975 font-weight: 600;
2976 color: #1d2327;
2977 margin-bottom: 2px;
2978 word-break: break-all;
2979 }
2980
2981 .phpinfowp-mail-summary-sub {
2982 font-size: 12px;
2983 color: #777;
2984 }
2985
2986 .phpinfowp-mail-test-form {
2987 display: flex;
2988 gap: 8px;
2989 align-items: center;
2990 flex-wrap: wrap;
2991 }
2992
2993 /* =========================================================
2994 Audit Report (print-friendly)
2995 ========================================================= */
2996 .phpinfowp-report {
2997 background: #fff;
2998 border: 1px solid #e0e0e0;
2999 border-radius: 8px;
3000 padding: 40px 48px;
3001 max-width: 1100px;
3002 box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
3003 }
3004
3005 .phpinfowp-report-cover {
3006 text-align: center;
3007 padding: 16px 0 28px;
3008 margin-bottom: 24px;
3009 border-bottom: 2px solid #777BB3;
3010 }
3011
3012 .phpinfowp-report-logo {
3013 display: block;
3014 max-width: 200px;
3015 max-height: 80px;
3016 margin: 0 auto 14px;
3017 object-fit: contain;
3018 }
3019
3020 .phpinfowp-logo-picker {
3021 display: flex;
3022 align-items: center;
3023 gap: 14px;
3024 }
3025
3026 .phpinfowp-logo-preview {
3027 width: 88px;
3028 height: 88px;
3029 border: 1px dashed #c8c8d0;
3030 border-radius: 8px;
3031 display: flex;
3032 align-items: center;
3033 justify-content: center;
3034 background: #fafafb;
3035 overflow: hidden;
3036 flex-shrink: 0;
3037 }
3038
3039 .phpinfowp-logo-preview img {
3040 max-width: 80px;
3041 max-height: 80px;
3042 object-fit: contain;
3043 }
3044
3045 .phpinfowp-logo-empty {
3046 font-size: 11px;
3047 color: #888;
3048 }
3049
3050 .phpinfowp-logo-actions {
3051 display: flex;
3052 flex-direction: column;
3053 align-items: flex-start;
3054 gap: 6px;
3055 }
3056
3057 .phpinfowp-report-brand {
3058 font-size: 12px;
3059 letter-spacing: 2px;
3060 color: #777BB3;
3061 text-transform: uppercase;
3062 font-weight: 700;
3063 margin-bottom: 10px;
3064 }
3065
3066 .phpinfowp-report-title {
3067 margin: 0 0 8px;
3068 font-size: 28px;
3069 color: #1d2327;
3070 }
3071
3072 .phpinfowp-report-site {
3073 font-size: 18px;
3074 color: #444;
3075 margin-bottom: 4px;
3076 }
3077
3078 .phpinfowp-report-url {
3079 font-size: 13px;
3080 color: #777;
3081 margin-bottom: 12px;
3082 }
3083
3084 .phpinfowp-report-date {
3085 font-size: 12px;
3086 color: #999;
3087 }
3088
3089 .phpinfowp-report-h {
3090 font-size: 13px;
3091 font-weight: 700;
3092 text-transform: uppercase;
3093 letter-spacing: .6px;
3094 color: #1d2327;
3095 margin: 28px 0 12px;
3096 padding-bottom: 6px;
3097 border-bottom: 1px solid #e0e0e0;
3098 }
3099
3100 .phpinfowp-report-grid {
3101 display: grid;
3102 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
3103 gap: 14px;
3104 margin-bottom: 8px;
3105 }
3106
3107 .phpinfowp-report-stat {
3108 background: #fafafa;
3109 border: 1px solid #ececec;
3110 border-radius: 6px;
3111 padding: 14px 16px;
3112 }
3113
3114 .phpinfowp-report-stat-label {
3115 font-size: 10px;
3116 font-weight: 700;
3117 text-transform: uppercase;
3118 letter-spacing: .5px;
3119 color: #888;
3120 margin-bottom: 6px;
3121 }
3122
3123 .phpinfowp-report-stat-value {
3124 font-size: 18px;
3125 font-weight: 700;
3126 color: #1d2327;
3127 margin-bottom: 2px;
3128 }
3129
3130 .phpinfowp-report-stat-sub {
3131 font-size: 12px;
3132 color: #666;
3133 }
3134
3135 .phpinfowp-report-table {
3136 width: 100%;
3137 border-collapse: collapse;
3138 font-size: 13px;
3139 }
3140
3141 .phpinfowp-report-table th,
3142 .phpinfowp-report-table td {
3143 border: 1px solid #e8e8e8;
3144 padding: 8px 12px;
3145 text-align: left;
3146 vertical-align: top;
3147 }
3148
3149 .phpinfowp-report-table th {
3150 background: #f6f6f6;
3151 font-size: 11px;
3152 text-transform: uppercase;
3153 letter-spacing: .4px;
3154 color: #555;
3155 }
3156
3157 .phpinfowp-report-list {
3158 margin: 4px 0 12px 18px;
3159 font-size: 13px;
3160 line-height: 1.6;
3161 }
3162
3163 .phpinfowp-report-footer {
3164 margin-top: 32px;
3165 padding-top: 16px;
3166 border-top: 1px solid #e0e0e0;
3167 font-size: 11px;
3168 color: #999;
3169 text-align: center;
3170 }
3171
3172 /* ---------- Overall site-health hero (page 1) ---------- */
3173 .phpinfowp-report-overall {
3174 display: grid;
3175 grid-template-columns: auto 1fr;
3176 gap: 28px;
3177 align-items: center;
3178 padding: 22px 24px;
3179 border: 1px solid #e8e8ee;
3180 border-radius: 12px;
3181 background: linear-gradient(180deg, #fafafd 0%, #ffffff 100%);
3182 margin-bottom: 22px;
3183 }
3184
3185 .phpinfowp-report-overall-donut {
3186 position: relative;
3187 width: 180px;
3188 height: 180px;
3189 }
3190
3191 .phpinfowp-donut {
3192 display: block;
3193 }
3194
3195 .phpinfowp-report-overall-num {
3196 position: absolute;
3197 inset: 0;
3198 display: flex;
3199 flex-direction: column;
3200 align-items: center;
3201 justify-content: center;
3202 pointer-events: none;
3203 }
3204
3205 .phpinfowp-report-overall-num-big {
3206 font-size: 56px;
3207 font-weight: 800;
3208 line-height: 1;
3209 letter-spacing: -1px;
3210 }
3211
3212 .phpinfowp-report-overall-num-sm {
3213 font-size: 12px;
3214 color: #888;
3215 margin-top: 2px;
3216 }
3217
3218 .phpinfowp-report-overall-label {
3219 font-size: 11px;
3220 letter-spacing: .6px;
3221 text-transform: uppercase;
3222 color: #6b6b75;
3223 font-weight: 700;
3224 margin-bottom: 4px;
3225 }
3226
3227 .phpinfowp-report-overall-verdict {
3228 font-size: 28px;
3229 font-weight: 700;
3230 letter-spacing: -.3px;
3231 margin-bottom: 4px;
3232 }
3233
3234 .phpinfowp-report-overall-grade {
3235 font-size: 14px;
3236 color: #50575e;
3237 margin-bottom: 10px;
3238 }
3239
3240 .phpinfowp-report-overall-grade strong {
3241 font-size: 16px;
3242 color: #1d2327;
3243 }
3244
3245 .phpinfowp-report-overall-counts {
3246 display: flex;
3247 flex-wrap: wrap;
3248 gap: 6px;
3249 margin-bottom: 10px;
3250 }
3251
3252 .phpinfowp-rc {
3253 font-size: 11px;
3254 font-weight: 600;
3255 padding: 3px 9px;
3256 border-radius: 999px;
3257 border: 1px solid;
3258 }
3259
3260 .phpinfowp-rc-crit {
3261 color: #8e1414;
3262 background: #fbe7e8;
3263 border-color: #ecb4b5;
3264 }
3265
3266 .phpinfowp-rc-warn {
3267 color: #8a6500;
3268 background: #fff5d6;
3269 border-color: #e9c977;
3270 }
3271
3272 .phpinfowp-rc-ok {
3273 color: #0a7d2e;
3274 background: #e8f6ec;
3275 border-color: #a7d8b3;
3276 }
3277
3278 .phpinfowp-report-overall-note {
3279 margin: 0;
3280 font-size: 13px;
3281 color: #50575e;
3282 line-height: 1.5;
3283 }
3284
3285 @media (max-width: 720px) {
3286 .phpinfowp-report-overall {
3287 grid-template-columns: 1fr;
3288 text-align: center;
3289 }
3290
3291 .phpinfowp-report-overall-donut {
3292 margin: 0 auto;
3293 }
3294
3295 .phpinfowp-report-overall-counts {
3296 justify-content: center;
3297 }
3298 }
3299
3300 /* ---------- Verdict pills (used everywhere) ---------- */
3301 .phpinfowp-rv {
3302 display: inline-flex;
3303 align-items: center;
3304 gap: 4px;
3305 font-size: 11px;
3306 font-weight: 600;
3307 padding: 2px 8px;
3308 border-radius: 999px;
3309 border: 1px solid;
3310 white-space: nowrap;
3311 vertical-align: middle;
3312 }
3313
3314 .phpinfowp-rv-ic {
3315 font-size: 10px;
3316 line-height: 1;
3317 display: inline-flex;
3318 align-items: center;
3319 }
3320
3321 /* ---------- Subscore bar chart ---------- */
3322 .phpinfowp-report-bars-grid {
3323 display: grid;
3324 grid-template-columns: repeat(2, 1fr);
3325 gap: 14px 24px;
3326 }
3327
3328 @media (max-width: 640px) {
3329 .phpinfowp-report-bars-grid {
3330 grid-template-columns: 1fr;
3331 }
3332 }
3333
3334 .phpinfowp-report-bar-top {
3335 display: flex;
3336 justify-content: space-between;
3337 align-items: baseline;
3338 margin-bottom: 4px;
3339 }
3340
3341 .phpinfowp-report-bar-lbl {
3342 font-size: 12px;
3343 color: #1d2327;
3344 font-weight: 500;
3345 }
3346
3347 .phpinfowp-report-bar-num {
3348 font-size: 14px;
3349 font-weight: 700;
3350 }
3351
3352 .phpinfowp-report-bar-track {
3353 height: 8px;
3354 background: #eef0f4;
3355 border-radius: 6px;
3356 overflow: hidden;
3357 }
3358
3359 .phpinfowp-report-bar-fill {
3360 height: 100%;
3361 border-radius: 6px;
3362 transition: width .4s ease;
3363 }
3364
3365 /* ---------- Critical issues banner ---------- */
3366 .phpinfowp-report-critbar {
3367 margin: 22px 0;
3368 border: 1px solid #ecb4b5;
3369 background: #fef5f5;
3370 border-radius: 10px;
3371 padding: 16px 18px;
3372 }
3373
3374 .phpinfowp-report-critbar-head {
3375 display: flex;
3376 gap: 14px;
3377 align-items: center;
3378 margin-bottom: 10px;
3379 }
3380
3381 .phpinfowp-report-critbar-ic {
3382 flex-shrink: 0;
3383 width: 36px;
3384 height: 36px;
3385 display: flex;
3386 align-items: center;
3387 justify-content: center;
3388 background: #d63638;
3389 color: #fff;
3390 border-radius: 50%;
3391 font-size: 18px;
3392 font-weight: 700;
3393 }
3394
3395 .phpinfowp-report-critbar-title {
3396 font-size: 15px;
3397 font-weight: 700;
3398 color: #8e1414;
3399 }
3400
3401 .phpinfowp-report-critbar-sub {
3402 font-size: 12px;
3403 color: #6b1a1a;
3404 margin-top: 2px;
3405 }
3406
3407 .phpinfowp-report-critbar-list {
3408 margin: 8px 0 0;
3409 padding-left: 22px;
3410 font-size: 13px;
3411 line-height: 1.5;
3412 color: #2c2c33;
3413 }
3414
3415 .phpinfowp-report-critbar-list li {
3416 margin-bottom: 8px;
3417 }
3418
3419 .phpinfowp-report-critbar-list li:last-child {
3420 margin-bottom: 0;
3421 }
3422
3423 .phpinfowp-report-critbar-cat {
3424 display: inline-block;
3425 margin-left: 6px;
3426 font-size: 10px;
3427 font-weight: 700;
3428 letter-spacing: .4px;
3429 text-transform: uppercase;
3430 color: #6b1a1a;
3431 background: #fce9ea;
3432 padding: 1px 7px;
3433 border-radius: 999px;
3434 }
3435
3436 .phpinfowp-report-critbar-reason {
3437 color: #50575e;
3438 font-size: 12px;
3439 margin-top: 2px;
3440 }
3441
3442 /* ---------- Top-N priority action cards ---------- */
3443 .phpinfowp-report-h-page2 {
3444 page-break-before: always;
3445 }
3446
3447 .phpinfowp-report-h-sub {
3448 margin: -8px 0 14px;
3449 color: #50575e;
3450 font-size: 13px;
3451 }
3452
3453 .phpinfowp-report-priorities {
3454 list-style: none;
3455 padding: 0;
3456 margin: 0 0 8px;
3457 display: flex;
3458 flex-direction: column;
3459 gap: 12px;
3460 }
3461
3462 .phpinfowp-report-priority {
3463 display: grid;
3464 grid-template-columns: 48px 1fr;
3465 gap: 14px;
3466 background: #fff;
3467 border: 1px solid #e8e8ee;
3468 border-radius: 10px;
3469 padding: 16px 18px;
3470 }
3471
3472 .phpinfowp-report-priority-critical {
3473 border-left: 4px solid #d63638;
3474 }
3475
3476 .phpinfowp-report-priority-warning {
3477 border-left: 4px solid #dba617;
3478 }
3479
3480 .phpinfowp-report-priority-num {
3481 width: 36px;
3482 height: 36px;
3483 border-radius: 50%;
3484 background: #1d2327;
3485 color: #fff;
3486 font-weight: 700;
3487 font-size: 16px;
3488 display: flex;
3489 align-items: center;
3490 justify-content: center;
3491 }
3492
3493 .phpinfowp-report-priority-critical .phpinfowp-report-priority-num {
3494 background: #d63638;
3495 }
3496
3497 .phpinfowp-report-priority-warning .phpinfowp-report-priority-num {
3498 background: #dba617;
3499 }
3500
3501 .phpinfowp-report-priority-head {
3502 display: flex;
3503 gap: 8px;
3504 align-items: center;
3505 margin-bottom: 4px;
3506 }
3507
3508 .phpinfowp-report-priority-cat {
3509 font-size: 10px;
3510 font-weight: 700;
3511 letter-spacing: .4px;
3512 text-transform: uppercase;
3513 color: #6b6b75;
3514 }
3515
3516 .phpinfowp-report-priority-title {
3517 font-size: 16px;
3518 font-weight: 700;
3519 color: #1d2327;
3520 margin-bottom: 8px;
3521 line-height: 1.3;
3522 }
3523
3524 .phpinfowp-report-priority-why,
3525 .phpinfowp-report-priority-how {
3526 font-size: 13px;
3527 color: #2c2c33;
3528 line-height: 1.5;
3529 margin-bottom: 6px;
3530 }
3531
3532 .phpinfowp-report-priority-how {
3533 color: #1d2327;
3534 }
3535
3536 .phpinfowp-report-priority-why strong,
3537 .phpinfowp-report-priority-how strong {
3538 font-weight: 700;
3539 color: #50575e;
3540 margin-right: 4px;
3541 }
3542
3543 .phpinfowp-report-priority code {
3544 background: #f6f7f7;
3545 padding: 1px 6px;
3546 border-radius: 3px;
3547 font-size: 12px;
3548 }
3549
3550 /* ---------- Snapshot stat refinements (verdict + caption) ---------- */
3551 .phpinfowp-report-stat-label {
3552 display: flex;
3553 justify-content: space-between;
3554 align-items: center;
3555 gap: 6px;
3556 }
3557
3558 .phpinfowp-report-stat-value-sub {
3559 font-size: 13px;
3560 color: #888;
3561 font-weight: 400;
3562 margin-left: 4px;
3563 }
3564
3565 .phpinfowp-report-stat-cap {
3566 margin-top: 8px;
3567 padding-top: 8px;
3568 border-top: 1px dashed #ececec;
3569 font-size: 11px;
3570 color: #6b6b75;
3571 line-height: 1.4;
3572 }
3573
3574 .phpinfowp-report-inline-cap {
3575 font-size: 11px;
3576 color: #6b6b75;
3577 font-weight: 400;
3578 }
3579
3580 /* ---------- Print refinements specific to the new report ---------- */
3581 @media print {
3582 .phpinfowp-report-overall {
3583 background: #fff !important;
3584 page-break-inside: avoid;
3585 break-inside: avoid;
3586 }
3587
3588 .phpinfowp-report-critbar {
3589 page-break-inside: avoid;
3590 break-inside: avoid;
3591 }
3592
3593 .phpinfowp-report-priority {
3594 page-break-inside: avoid;
3595 break-inside: avoid;
3596 }
3597
3598 /* Don't force the page break before "Top actions" in print — modern browsers
3599 handle this gracefully with break-inside above. The forced break was for
3600 A4 layout but it can leave a near-empty page 1 on shorter reports. */
3601 .phpinfowp-report-h-page2 {
3602 page-break-before: auto;
3603 }
3604 }
3605
3606 @media print {
3607
3608 /* Hide WP admin chrome + in-page controls. The previous visibility:hidden
3609 trick produced blank pages in Chrome/Safari because the report sits
3610 inside multiple nested containers (#wpwrap > #wpcontent > #wpbody-content)
3611 and position:absolute on an inner element doesn't escape them cleanly. */
3612 #wpadminbar,
3613 #adminmenuback,
3614 #adminmenuwrap,
3615 #adminmenumain,
3616 #wpfooter,
3617 #screen-meta,
3618 #screen-meta-links,
3619 .update-nag,
3620 .notice,
3621 .updated,
3622 .error,
3623 .no-print,
3624 .phpinfowp-report-branding-form,
3625 .phpinfowp-page-header,
3626 .phpinfowp-pro-page>h1,
3627 .phpinfowp-pro-page>.phpinfowp-pro-badge,
3628 /* Plugin's own chrome — top bar with breadcrumb + Pro badge,
3629 and the per-group sidebar nav rendered inside the page body. */
3630 .phpinfowp-topbar,
3631 .phpinfowp-side-nav,
3632 .phpinfowp-sidebar-flyouts {
3633 display: none !important;
3634 }
3635
3636 /* Neutralize the admin layout containers so the report flows from the
3637 top of the page with no left margin from the admin sidebar.
3638 The trailing selector overrides body.phpinfowp-has-sidenav, which adds
3639 260px of left padding to make room for the absolutely-positioned plugin
3640 side nav — that nav is hidden above, so the gutter must collapse too. */
3641 html,
3642 body,
3643 #wpwrap,
3644 #wpcontent,
3645 #wpbody,
3646 #wpbody-content,
3647 body.phpinfowp-page #wpbody-content,
3648 body.phpinfowp-has-sidenav #wpbody-content {
3649 margin: 0 !important;
3650 padding: 0 !important;
3651 background: #fff !important;
3652 float: none !important;
3653 overflow: visible !important;
3654 min-height: 0 !important;
3655 }
3656
3657 html.wp-toolbar {
3658 padding-top: 0 !important;
3659 }
3660
3661 #wpcontent,
3662 #wpbody-content {
3663 padding-left: 0 !important;
3664 }
3665
3666 body {
3667 font-size: 11pt;
3668 line-height: 1.45;
3669 color: #1d2327;
3670 -webkit-font-smoothing: antialiased;
3671 }
3672
3673 /* Strip the wrapper card chrome so the report fills the page. */
3674 .phpinfowp-pro-page {
3675 padding: 0 !important;
3676 margin: 0 !important;
3677 max-width: 100% !important;
3678 }
3679
3680 .phpinfowp-report {
3681 background: #fff !important;
3682 border: none !important;
3683 box-shadow: none !important;
3684 padding: 0 !important;
3685 max-width: 100% !important;
3686 border-radius: 0 !important;
3687 }
3688
3689 /* Keep things together that look broken if split across pages. */
3690 .phpinfowp-report-grid,
3691 .phpinfowp-report-stat,
3692 .phpinfowp-report-table {
3693 page-break-inside: avoid;
3694 break-inside: avoid;
3695 }
3696
3697 .phpinfowp-report-h {
3698 page-break-after: avoid;
3699 break-after: avoid-page;
3700 }
3701
3702 .phpinfowp-report-cover {
3703 page-break-after: avoid;
3704 }
3705
3706 /* Force backgrounds and colors to actually print — Chrome strips them
3707 by default unless you opt into the exact color profile. */
3708 *,
3709 *::before,
3710 *::after {
3711 -webkit-print-color-adjust: exact !important;
3712 print-color-adjust: exact !important;
3713 color-adjust: exact !important;
3714 }
3715
3716 a,
3717 a:visited {
3718 color: inherit !important;
3719 text-decoration: none !important;
3720 }
3721
3722 @page { {
3723 size: A4;
3724 margin: 14mm 12mm;
3725 }
3726 }
3727
3728 /* ---------- Config Grader free-tier teaser ---------- */
3729 .phpinfowp-grader-teaser {
3730 position: relative;
3731 margin-top: 24px;
3732 border: 1px solid #e2e4e7;
3733 border-radius: 8px;
3734 overflow: hidden;
3735 background: #fff;
3736 }
3737
3738 .phpinfowp-grader-teaser-blur {
3739 padding: 18px 22px;
3740 filter: blur(4px);
3741 pointer-events: none;
3742 user-select: none;
3743 opacity: .7;
3744 }
3745
3746 .phpinfowp-teaser-row {
3747 padding: 7px 0;
3748 font-size: 13px;
3749 color: #1d2327;
3750 border-bottom: 1px solid #f0f0f0;
3751 }
3752
3753 .phpinfowp-teaser-row:last-child {
3754 border-bottom: 0;
3755 }
3756
3757 .phpinfowp-teaser-row code {
3758 background: #f3f3f5;
3759 padding: 1px 6px;
3760 border-radius: 3px;
3761 font-size: 12px;
3762 }
3763
3764 .phpinfowp-grader-teaser-cta {
3765 position: absolute;
3766 inset: 0;
3767 display: flex;
3768 flex-direction: column;
3769 justify-content: center;
3770 align-items: center;
3771 background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .95) 60%);
3772 text-align: center;
3773 padding: 20px;
3774 }
3775
3776 .phpinfowp-grader-teaser-cta h3 {
3777 margin: 0 0 6px;
3778 font-size: 18px;
3779 color: #1d2327;
3780 }
3781
3782 .phpinfowp-grader-teaser-cta p {
3783 margin: 0 0 14px;
3784 max-width: 540px;
3785 color: #555;
3786 font-size: 13px;
3787 line-height: 1.5;
3788 }
3789
3790 /* ---------- EOL Pro upsell footer ---------- */
3791 .phpinfowp-eol-upsell {
3792 margin-top: 28px;
3793 padding: 22px 24px;
3794 display: flex;
3795 gap: 18px;
3796 align-items: flex-start;
3797 background: #f7f5fc;
3798 border: 1px solid #d9d3ec;
3799 border-left: 5px solid #777BB3;
3800 border-radius: 8px;
3801 }
3802
3803 .phpinfowp-eol-upsell-icon .dashicons {
3804 font-size: 36px;
3805 width: 36px;
3806 height: 36px;
3807 color: #777BB3;
3808 }
3809
3810 .phpinfowp-eol-upsell-body {
3811 flex: 1;
3812 }
3813
3814 .phpinfowp-eol-upsell-body h3 {
3815 margin: 0 0 6px;
3816 font-size: 16px;
3817 color: #1d2327;
3818 }
3819
3820 .phpinfowp-eol-upsell-body p {
3821 margin: 0 0 12px;
3822 font-size: 13px;
3823 color: #555;
3824 line-height: 1.5;
3825 }
3826
3827 .phpinfowp-eol-upsell-list {
3828 margin: 0 0 14px 0;
3829 padding: 0;
3830 list-style: none;
3831 }
3832
3833 .phpinfowp-eol-upsell-list li {
3834 padding: 4px 0;
3835 font-size: 13px;
3836 color: #444;
3837 padding-left: 22px;
3838 position: relative;
3839 }
3840
3841 .phpinfowp-eol-upsell-list li::before {
3842 content: "";
3843 position: absolute;
3844 left: 0;
3845 top: 4px;
3846 color: #00a32a;
3847 font-weight: 700;
3848 }
3849
3850 /* ---------- Error log diagnostic (empty-state) ---------- */
3851 .phpinfowp-errlog-diag {
3852 background: #fff;
3853 border: 1px solid #e0e0e6;
3854 border-radius: 10px;
3855 padding: 20px 22px;
3856 max-width: 820px;
3857 }
3858
3859 .phpinfowp-errlog-diag-head {
3860 margin-bottom: 4px;
3861 }
3862
3863 .phpinfowp-errlog-diag-pill {
3864 display: inline-block;
3865 font-size: 10px;
3866 font-weight: 700;
3867 text-transform: uppercase;
3868 letter-spacing: .6px;
3869 padding: 3px 9px;
3870 border-radius: 999px;
3871 border: 1px solid;
3872 }
3873
3874 .phpinfowp-errlog-diag-table {
3875 width: 100%;
3876 border-collapse: collapse;
3877 font-size: 13px;
3878 }
3879
3880 .phpinfowp-errlog-diag-table td {
3881 padding: 7px 10px;
3882 border-bottom: 1px solid #f1f1f4;
3883 vertical-align: top;
3884 }
3885
3886 .phpinfowp-errlog-diag-table tr:last-child td {
3887 border-bottom: 0;
3888 }
3889
3890 .phpinfowp-errlog-diag-table code {
3891 background: #f6f7f7;
3892 padding: 1px 6px;
3893 border-radius: 3px;
3894 font-size: 12px;
3895 }
3896
3897 .phpinfowp-errlog-diag-paths code {
3898 background: transparent;
3899 padding: 0;
3900 word-break: break-all;
3901 }
3902
3903 /* ---------- Plugins-screen deactivate retention modal ---------- */
3904 .phpinfowp-dm {
3905 display: none;
3906 position: fixed;
3907 inset: 0;
3908 z-index: 100000;
3909 }
3910
3911 .phpinfowp-dm.is-open {
3912 display: block;
3913 }
3914
3915 .phpinfowp-dm-backdrop {
3916 position: absolute;
3917 inset: 0;
3918 background: rgba(15, 17, 20, .55);
3919 backdrop-filter: blur(2px);
3920 }
3921
3922 .phpinfowp-dm-dialog {
3923 position: relative;
3924 max-width: 720px;
3925 margin: 6vh auto 0;
3926 background: #fff;
3927 border-radius: 12px;
3928 box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
3929 padding: 26px 28px 22px;
3930 }
3931
3932 .phpinfowp-dm-close {
3933 position: absolute;
3934 top: 10px;
3935 right: 12px;
3936 background: none;
3937 border: none;
3938 cursor: pointer;
3939 font-size: 26px;
3940 line-height: 1;
3941 color: #888;
3942 padding: 4px 8px;
3943 }
3944
3945 .phpinfowp-dm-close:hover {
3946 color: #1d2327;
3947 }
3948
3949 .phpinfowp-dm-header {
3950 display: flex;
3951 gap: 14px;
3952 align-items: center;
3953 margin-bottom: 18px;
3954 }
3955
3956 .phpinfowp-dm-logo {
3957 border-radius: 10px;
3958 }
3959
3960 .phpinfowp-dm-title {
3961 margin: 0 0 4px;
3962 font-size: 20px;
3963 color: #1d2327;
3964 }
3965
3966 .phpinfowp-dm-sub {
3967 margin: 0;
3968 color: #50575e;
3969 font-size: 13px;
3970 }
3971
3972 .phpinfowp-dm-body {
3973 display: grid;
3974 grid-template-columns: 1fr;
3975 gap: 16px;
3976 margin-bottom: 16px;
3977 }
3978
3979 .phpinfowp-dm-body:has(.phpinfowp-dm-col-pro) {
3980 grid-template-columns: 1fr 1fr;
3981 }
3982
3983 @media (max-width: 720px) {
3984 .phpinfowp-dm-body {
3985 grid-template-columns: 1fr !important;
3986 }
3987 }
3988
3989 .phpinfowp-dm-col {
3990 border: 1px solid #e8e8ee;
3991 border-radius: 10px;
3992 padding: 14px 16px;
3993 background: #fafafb;
3994 }
3995
3996 .phpinfowp-dm-col-pro {
3997 background: rgba(124, 58, 237, 0.045);
3998 border-color: rgba(124, 58, 237, 0.18);
3999 }
4000
4001 .phpinfowp-dm-col-label {
4002 font-size: 10px;
4003 font-weight: 700;
4004 text-transform: uppercase;
4005 letter-spacing: .6px;
4006 color: #6b6b75;
4007 margin-bottom: 10px;
4008 }
4009
4010 .phpinfowp-dm-col-pro .phpinfowp-dm-col-label {
4011 color: #6d28d9;
4012 }
4013
4014 .phpinfowp-dm-list {
4015 margin: 0;
4016 padding: 0;
4017 list-style: none;
4018 font-size: 13px;
4019 line-height: 1.5;
4020 color: #2c2c33;
4021 }
4022
4023 .phpinfowp-dm-list li {
4024 display: flex;
4025 align-items: flex-start;
4026 gap: 6px;
4027 padding: 4px 0;
4028 }
4029
4030 .phpinfowp-dm-x {
4031 flex-shrink: 0;
4032 font-size: 16px;
4033 width: 16px;
4034 height: 16px;
4035 color: #d63638;
4036 margin-top: 1px;
4037 }
4038
4039 .phpinfowp-dm-warn {
4040 display: flex;
4041 gap: 10px;
4042 background: #fffbea;
4043 border: 1px solid #f4d35e;
4044 border-radius: 8px;
4045 padding: 10px 14px;
4046 font-size: 13px;
4047 color: #4d3700;
4048 margin-bottom: 18px;
4049 }
4050
4051 .phpinfowp-dm-warn .dashicons {
4052 color: #b78900;
4053 flex-shrink: 0;
4054 }
4055
4056 .phpinfowp-dm-actions {
4057 display: flex;
4058 align-items: center;
4059 justify-content: space-between;
4060 gap: 12px;
4061 flex-wrap: wrap;
4062 }
4063
4064 .phpinfowp-dm-confirm {
4065 color: #888 !important;
4066 text-decoration: none;
4067 font-size: 13px;
4068 }
4069
4070 .phpinfowp-dm-confirm:hover {
4071 color: #d63638 !important;
4072 }
4073
4074 .phpinfowp-dm-keep {
4075 min-width: 180px;
4076 }
4077
4078 /* ---------- License view: plan comparison table ---------- */
4079 .phpinfowp-compare-wrap {
4080 margin: 0 0 8px;
4081 overflow-x: auto;
4082 border: 1px solid #e0e0e6;
4083 border-radius: 10px;
4084 background: #fff;
4085 }
4086
4087 .phpinfowp-compare {
4088 width: 100%;
4089 min-width: 720px;
4090 border-collapse: collapse;
4091 font-size: 13px;
4092 color: #1d2327;
4093 }
4094
4095 .phpinfowp-compare thead th {
4096 background: #fafafb;
4097 border-bottom: 1px solid #e8e8ee;
4098 text-align: center;
4099 padding: 14px 12px 12px;
4100 vertical-align: bottom;
4101 }
4102
4103 .phpinfowp-compare thead th.is-featured {
4104 background: rgba(124, 58, 237, 0.06);
4105 }
4106
4107 .phpinfowp-compare thead th.phpinfowp-compare-feat {
4108 text-align: left;
4109 font-size: 11px;
4110 letter-spacing: .5px;
4111 text-transform: uppercase;
4112 color: #6b6b75;
4113 }
4114
4115 .phpinfowp-compare-tier {
4116 font-size: 11px;
4117 font-weight: 700;
4118 letter-spacing: .6px;
4119 text-transform: uppercase;
4120 color: #4a4a55;
4121 margin-bottom: 4px;
4122 }
4123
4124 .phpinfowp-compare-price {
4125 display: flex;
4126 align-items: baseline;
4127 justify-content: center;
4128 gap: 3px;
4129 }
4130
4131 .phpinfowp-compare-amount {
4132 font-size: 22px;
4133 font-weight: 700;
4134 color: #1d2327;
4135 line-height: 1;
4136 }
4137
4138 .phpinfowp-compare-cadence {
4139 font-size: 11px;
4140 color: #6b6b75;
4141 }
4142
4143 .phpinfowp-compare tbody td,
4144 .phpinfowp-compare tbody th {
4145 padding: 9px 12px;
4146 border-bottom: 1px solid #f1f1f4;
4147 vertical-align: middle;
4148 text-align: center;
4149 background: #fff;
4150 }
4151
4152 .phpinfowp-compare tbody th.phpinfowp-compare-feat {
4153 text-align: left;
4154 font-weight: 500;
4155 color: #1d2327;
4156 }
4157
4158 .phpinfowp-compare tbody td.is-featured {
4159 background: rgba(124, 58, 237, 0.025);
4160 }
4161
4162 .phpinfowp-compare tbody tr:last-child td,
4163 .phpinfowp-compare tbody tr:last-child th {
4164 border-bottom: 0;
4165 }
4166
4167 .phpinfowp-compare tbody tr:hover td,
4168 .phpinfowp-compare tbody tr:hover th {
4169 background: #fafafb;
4170 }
4171
4172 .phpinfowp-compare tbody tr:hover td.is-featured {
4173 background: rgba(124, 58, 237, 0.05);
4174 }
4175
4176 .phpinfowp-compare tfoot td {
4177 padding: 14px 12px;
4178 text-align: center;
4179 background: #fafafb;
4180 border-top: 1px solid #e8e8ee;
4181 }
4182
4183 .phpinfowp-compare tfoot td.is-featured {
4184 background: rgba(124, 58, 237, 0.06);
4185 }
4186
4187 .phpinfowp-compare tfoot .button {
4188 display: inline-flex !important;
4189 align-items: center !important;
4190 justify-content: center !important;
4191 min-height: 32px !important;
4192 height: 32px !important;
4193 line-height: 30px !important;
4194 padding: 0 16px !important;
4195 font-size: 13px !important;
4196 font-weight: 600 !important;
4197 }
4198
4199 .phpinfowp-compare .dashicons {
4200 font-size: 18px;
4201 width: 18px;
4202 height: 18px;
4203 }
4204
4205 /* ---------- License view: 4-pillar grid ---------- */
4206 .phpinfowp-pillars {
4207 display: grid;
4208 grid-template-columns: repeat(4, 1fr);
4209 gap: 16px;
4210 margin-top: 20px;
4211 }
4212
4213 @media (max-width: 1100px) {
4214 .phpinfowp-pillars {
4215 grid-template-columns: repeat(2, 1fr);
4216 }
4217 }
4218
4219 @media (max-width: 650px) {
4220 .phpinfowp-pillars {
4221 grid-template-columns: 1fr;
4222 }
4223 }
4224
4225 .phpinfowp-pillar {
4226 background: #fff;
4227 border: 1px solid #e4e4e7;
4228 border-radius: 12px;
4229 padding: 24px;
4230 transition: border-color 0.2s ease, box-shadow 0.2s ease;
4231 }
4232
4233 .phpinfowp-pillar:hover {
4234 border-color: rgba(139, 92, 246, 0.35);
4235 box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.06);
4236 }
4237
4238 .phpinfowp-pillar-header {
4239 display: flex;
4240 gap: 14px;
4241 align-items: center;
4242 margin-bottom: 16px;
4243 }
4244
4245 .phpinfowp-pillar-icon-box {
4246 width: 40px;
4247 height: 40px;
4248 border-radius: 8px;
4249 background: #f4f4f5;
4250 display: flex;
4251 align-items: center;
4252 justify-content: center;
4253 flex-shrink: 0;
4254 }
4255
4256 .phpinfowp-pillar-header .dashicons {
4257 font-size: 20px;
4258 width: 20px;
4259 height: 20px;
4260 color: #7c3aed;
4261 }
4262
4263 .phpinfowp-pillar-name {
4264 font-size: 16px;
4265 font-weight: 700;
4266 color: #09090b;
4267 line-height: 1.3;
4268 }
4269
4270 .phpinfowp-pillar-tag {
4271 font-size: 12px;
4272 color: #71717a;
4273 margin-top: 2px;
4274 }
4275
4276 .phpinfowp-pillar-items {
4277 margin: 0;
4278 padding: 0;
4279 list-style: none;
4280 display: flex;
4281 flex-direction: column;
4282 gap: 10px;
4283 }
4284
4285 .phpinfowp-pillar-items li {
4286 padding: 0;
4287 position: relative;
4288 padding-left: 20px;
4289 font-size: 13px;
4290 color: #3f3f46;
4291 line-height: 1.45;
4292 border-bottom: none;
4293 }
4294
4295 .phpinfowp-pillar-items li:last-child {
4296 border-bottom: 0;
4297 }
4298
4299 .phpinfowp-pillar-items li::before {
4300 content: "";
4301 position: absolute;
4302 left: 0;
4303 top: 7px;
4304 width: 6px;
4305 height: 6px;
4306 background-color: rgba(167, 139, 250, 0.7);
4307 border-radius: 50%;
4308 }
4309
4310 /* ---------- License view: pricing ---------- */
4311 .phpinfowp-pricing {
4312 display: grid;
4313 grid-template-columns: repeat(3, 1fr);
4314 gap: 18px;
4315 margin-top: 20px;
4316 }
4317
4318 @media (max-width: 960px) {
4319 .phpinfowp-pricing {
4320 grid-template-columns: 1fr;
4321 }
4322 }
4323
4324 .phpinfowp-pricing-tier {
4325 position: relative;
4326 background: #fff;
4327 border: 1px solid #e2e4e7;
4328 border-radius: 10px;
4329 padding: 28px 22px 22px;
4330 text-align: center;
4331 }
4332
4333 .phpinfowp-pricing-tier.is-featured {
4334 border-color: #777BB3;
4335 box-shadow: 0 4px 16px rgba(119, 123, 179, .15);
4336 transform: translateY(-4px);
4337 }
4338
4339 .phpinfowp-pricing-flag {
4340 position: absolute;
4341 top: -10px;
4342 left: 50%;
4343 transform: translateX(-50%);
4344 background: #777BB3;
4345 color: #fff;
4346 font-size: 11px;
4347 font-weight: 700;
4348 letter-spacing: .4px;
4349 padding: 3px 10px;
4350 border-radius: 12px;
4351 text-transform: uppercase;
4352 white-space: nowrap;
4353 }
4354
4355 .phpinfowp-pricing-flag.is-warn {
4356 background: #dba617;
4357 }
4358
4359 .phpinfowp-pricing-name {
4360 font-size: 14px;
4361 font-weight: 600;
4362 text-transform: uppercase;
4363 letter-spacing: .5px;
4364 color: #555;
4365 margin-bottom: 6px;
4366 }
4367
4368 .phpinfowp-pricing-price {
4369 font-size: 36px;
4370 font-weight: 800;
4371 color: #1d2327;
4372 margin-bottom: 14px;
4373 }
4374
4375 .phpinfowp-pricing-price span {
4376 font-size: 13px;
4377 font-weight: 500;
4378 color: #777;
4379 margin-left: 2px;
4380 }
4381
4382 .phpinfowp-pricing-list {
4383 list-style: none;
4384 margin: 0 0 18px;
4385 padding: 0;
4386 text-align: left;
4387 }
4388
4389 .phpinfowp-pricing-list li {
4390 padding: 5px 0 5px 20px;
4391 position: relative;
4392 font-size: 13px;
4393 color: #333;
4394 }
4395
4396 .phpinfowp-pricing-list li::before {
4397 content: "";
4398 position: absolute;
4399 left: 0;
4400 top: 5px;
4401 color: #00a32a;
4402 font-weight: 700;
4403 }
4404
4405 .phpinfowp-pricing-tier .button {
4406 display: inline-flex !important;
4407 align-items: center !important;
4408 justify-content: center !important;
4409 width: 100% !important;
4410 min-height: 38px !important;
4411 height: 38px !important;
4412 line-height: 36px !important;
4413 padding: 0 16px !important;
4414 font-size: 13px !important;
4415 font-weight: 600 !important;
4416 text-align: center !important;
4417 box-sizing: border-box !important;
4418 }
4419
4420 .phpinfowp-pricing-foot {
4421 text-align: center;
4422 font-size: 12px;
4423 color: #777;
4424 margin-top: 18px;
4425 }
4426
4427 /* ---------- Upgrade gate: 3-pillar ---------- */
4428 .phpinfowp-upgrade-pillars {
4429 display: grid;
4430 grid-template-columns: repeat(4, 1fr);
4431 gap: 16px;
4432 margin: 24px 0 24px;
4433 }
4434
4435 @media (max-width: 1000px) {
4436 .phpinfowp-upgrade-pillars {
4437 grid-template-columns: repeat(2, 1fr);
4438 }
4439 }
4440
4441 @media (max-width: 600px) {
4442 .phpinfowp-upgrade-pillars {
4443 grid-template-columns: 1fr;
4444 }
4445 }
4446
4447 .phpinfowp-upgrade-pillar {
4448 background: #fff;
4449 border: 1px solid #e4e4e7;
4450 border-radius: 12px;
4451 padding: 24px;
4452 transition: border-color 0.2s ease, box-shadow 0.2s ease;
4453 }
4454
4455 .phpinfowp-upgrade-pillar:hover {
4456 border-color: rgba(139, 92, 246, 0.35);
4457 box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.06);
4458 }
4459
4460 .phpinfowp-upgrade-pillar-icon {
4461 margin-bottom: 14px;
4462 width: 40px;
4463 height: 40px;
4464 border-radius: 8px;
4465 background: #f4f4f5;
4466 display: flex;
4467 align-items: center;
4468 justify-content: center;
4469 flex-shrink: 0;
4470 }
4471
4472 .phpinfowp-upgrade-pillar-icon .dashicons {
4473 font-size: 20px;
4474 width: 20px;
4475 height: 20px;
4476 color: #7c3aed;
4477 margin-bottom: 0;
4478 }
4479
4480 .phpinfowp-upgrade-pillar-name {
4481 font-size: 16px;
4482 font-weight: 700;
4483 color: #09090b;
4484 line-height: 1.3;
4485 }
4486
4487 .phpinfowp-upgrade-pillar-tag {
4488 font-size: 12px;
4489 color: #71717a;
4490 margin-top: 2px;
4491 margin-bottom: 16px;
4492 }
4493
4494 .phpinfowp-upgrade-pillar-items {
4495 margin: 0;
4496 padding: 0;
4497 list-style: none;
4498 display: flex;
4499 flex-direction: column;
4500 gap: 10px;
4501 }
4502
4503 .phpinfowp-upgrade-pillar-items li {
4504 padding: 0;
4505 position: relative;
4506 padding-left: 20px;
4507 font-size: 13px;
4508 color: #3f3f46;
4509 line-height: 1.45;
4510 }
4511
4512 .phpinfowp-upgrade-pillar-items li::before {
4513 content: "";
4514 position: absolute;
4515 left: 0;
4516 top: 7px;
4517 width: 6px;
4518 height: 6px;
4519 background-color: rgba(167, 139, 250, 0.7);
4520 border-radius: 50%;
4521 }
4522
4523 /* Visual break between the three pillars and the three price tiers so users
4524 don't read them as paired columns (Safeguard=$29, Insight=$69, etc.). */
4525 .phpinfowp-upgrade-plans-header {
4526 margin: 36px 0 14px;
4527 padding-top: 28px;
4528 border-top: 1px solid #e2e4e7;
4529 text-align: center;
4530 }
4531
4532 .phpinfowp-upgrade-plans-title {
4533 font-size: 18px;
4534 font-weight: 700;
4535 margin: 0 0 6px;
4536 color: #1d2327;
4537 }
4538
4539 .phpinfowp-upgrade-plans-note {
4540 font-size: 13px;
4541 color: #555;
4542 margin: 0;
4543 }
4544
4545 .phpinfowp-upgrade-plans-note strong {
4546 color: #1d2327;
4547 }
4548
4549 .phpinfowp-upgrade-price-sub {
4550 margin-top: 6px;
4551 font-size: 11px;
4552 color: #777;
4553 line-height: 1.4;
4554 }
4555
4556 .phpinfowp-upgrade-pricing {
4557 display: grid;
4558 grid-template-columns: repeat(3, 1fr);
4559 gap: 12px;
4560 margin: 0 0 24px;
4561 }
4562
4563 @media (max-width: 700px) {
4564 .phpinfowp-upgrade-pricing {
4565 grid-template-columns: 1fr;
4566 }
4567 }
4568
4569 .phpinfowp-upgrade-price-tier {
4570 position: relative;
4571 border: 1px solid #e2e4e7;
4572 border-radius: 8px;
4573 padding: 16px 12px;
4574 text-align: center;
4575 background: #fff;
4576 }
4577
4578 .phpinfowp-upgrade-price-tier.is-featured {
4579 border-color: #777BB3;
4580 box-shadow: 0 2px 10px rgba(119, 123, 179, .12);
4581 }
4582
4583 .phpinfowp-upgrade-price-name {
4584 font-size: 11px;
4585 font-weight: 700;
4586 text-transform: uppercase;
4587 letter-spacing: .4px;
4588 color: #777;
4589 }
4590
4591 .phpinfowp-upgrade-price-value {
4592 font-size: 24px;
4593 font-weight: 800;
4594 color: #1d2327;
4595 margin-top: 4px;
4596 }
4597
4598 .phpinfowp-upgrade-price-value small {
4599 font-size: 11px;
4600 font-weight: 500;
4601 color: #888;
4602 margin-left: 2px;
4603 }
4604
4605 .phpinfowp-upgrade-price-best {
4606 margin-top: 4px;
4607 font-size: 10px;
4608 font-weight: 700;
4609 text-transform: uppercase;
4610 color: #777BB3;
4611 letter-spacing: .3px;
4612 }
4613
4614 .phpinfowp-upgrade-price-best.is-warn {
4615 color: #dba617;
4616 }
4617
4618 /* ---------- Report branding form ---------- */
4619 .phpinfowp-report-branding-form {
4620 background: #fff;
4621 border: 1px solid #e2e4e7;
4622 border-radius: 8px;
4623 padding: 18px 24px;
4624 margin-bottom: 24px;
4625 }
4626
4627 .phpinfowp-report-branding-form h3 {
4628 margin: 0 0 4px;
4629 font-size: 16px;
4630 }
4631
4632 .phpinfowp-report-branding-form .form-table th {
4633 width: 180px;
4634 padding: 12px 10px 12px 0;
4635 }
4636
4637 .phpinfowp-report-branding-form .form-table td {
4638 padding: 10px;
4639 }
4640
4641 /* ---------- AI Explain (WP 7.0 AI Client integration) ---------- */
4642 .phpinfowp-ai-out {
4643 margin: 8px 0 0;
4644 padding: 10px 12px;
4645 background: #f5f6ff;
4646 border-left: 3px solid #777BB3;
4647 border-radius: 0 4px 4px 0;
4648 font-size: 12.5px;
4649 line-height: 1.55;
4650 color: #333;
4651 white-space: pre-wrap;
4652 }
4653
4654 .phpinfowp-ai-out:empty {
4655 display: none;
4656 }
4657
4658 /* ---------- License meta (registered to, expires, activated) ---------- */
4659 .phpinfowp-license-meta {
4660 margin-top: 14px;
4661 padding: 12px 14px;
4662 background: #fafbff;
4663 border: 1px solid #e8eaf0;
4664 border-radius: 6px;
4665 }
4666
4667 .phpinfowp-license-meta-row {
4668 display: flex;
4669 justify-content: space-between;
4670 align-items: baseline;
4671 padding: 4px 0;
4672 font-size: 13px;
4673 }
4674
4675 .phpinfowp-license-meta-row+.phpinfowp-license-meta-row {
4676 border-top: 1px solid #f0f1f5;
4677 }
4678
4679 .phpinfowp-license-meta-label {
4680 color: #666;
4681 font-weight: 500;
4682 }
4683
4684 .phpinfowp-license-meta-value {
4685 color: #1d2327;
4686 font-weight: 500;
4687 text-align: right;
4688 }
4689
4690 /* ---- Update Guard (pre-update core audit) ---- */
4691 .phpinfowp-ua-verdict-dot {
4692 width: 10px;
4693 height: 10px;
4694 border-radius: 50%;
4695 display: inline-block;
4696 flex: 0 0 auto;
4697 margin: 0 2px;
4698 }
4699
4700 .phpinfowp-ua-kind {
4701 font-size: 10px;
4702 font-weight: 700;
4703 letter-spacing: .04em;
4704 color: #555;
4705 background: #eef0f3;
4706 border-radius: 3px;
4707 padding: 1px 5px;
4708 text-transform: uppercase;
4709 }
4710
4711 .phpinfowp-ua-new {
4712 font-size: 10px;
4713 font-weight: 700;
4714 letter-spacing: .03em;
4715 color: #7a1a1a;
4716 background: #fcf0f1;
4717 border: 1px solid #f0c6c8;
4718 border-radius: 3px;
4719 padding: 1px 6px;
4720 text-transform: uppercase;
4721 }
4722
4723 .phpinfowp-ua-meta {
4724 display: flex;
4725 flex-wrap: wrap;
4726 gap: 6px;
4727 padding: 8px 0 12px;
4728 margin-bottom: 6px;
4729 border-bottom: 1px dashed #e2e4e7;
4730 }
4731
4732 .phpinfowp-ua-meta-pill {
4733 font-size: 12px;
4734 color: #50575e;
4735 background: #f6f7f7;
4736 border: 1px solid #e2e4e7;
4737 border-radius: 12px;
4738 padding: 2px 10px;
4739 }
4740
4741 .phpinfowp-ua-meta-pill.is-bad {
4742 color: #7a1a1a;
4743 background: #fcf0f1;
4744 border-color: #f0c6c8;
4745 }
4746
4747 .phpinfowp-ua-meta-pill strong {
4748 font-weight: 600;
4749 }
4750
4751 @keyframes phpinfowp-spin {
4752 0% { transform: rotate(0deg); }
4753 100% { transform: rotate(360deg); }
4754 }
4755
4756 /* Update Guard Superior Styles */
4757 .phpinfowp-ug-tab-nav {
4758 display: flex;
4759 gap: 8px;
4760 margin-bottom: 20px;
4761 border-bottom: 1px solid #dcdcde;
4762 padding-bottom: 0;
4763 }
4764
4765 .phpinfowp-ug-tab-link {
4766 display: inline-flex;
4767 align-items: center;
4768 gap: 6px;
4769 padding: 10px 16px;
4770 font-size: 14px;
4771 font-weight: 500;
4772 color: #50575e;
4773 text-decoration: none;
4774 border-bottom: 3px solid transparent;
4775 margin-bottom: -1px;
4776 transition: all .15s ease-in-out;
4777 }
4778
4779 .phpinfowp-ug-tab-link:hover {
4780 color: #2271b1;
4781 }
4782
4783 .phpinfowp-ug-tab-link.is-active {
4784 color: #2271b1;
4785 font-weight: 600;
4786 border-bottom-color: #2271b1;
4787 }
4788
4789 .phpinfowp-ug-tab-count {
4790 font-size: 11px;
4791 font-weight: 700;
4792 background: #d63638;
4793 color: #fff;
4794 padding: 1px 7px;
4795 border-radius: 10px;
4796 line-height: 1.3;
4797 }
4798
4799 .phpinfowp-ug-section-header {
4800 display: flex;
4801 justify-content: space-between;
4802 align-items: center;
4803 flex-wrap: wrap;
4804 gap: 12px;
4805 background: #fff;
4806 border: 1px solid #dcdcde;
4807 border-radius: 8px;
4808 padding: 14px 18px;
4809 margin-bottom: 16px;
4810 }
4811
4812 .phpinfowp-ug-item-list {
4813 display: flex;
4814 flex-direction: column;
4815 gap: 12px;
4816 }
4817
4818 .phpinfowp-ug-item-card {
4819 background: #fff;
4820 border: 1px solid #dcdcde;
4821 border-left-width: 4px;
4822 border-radius: 6px;
4823 padding: 14px 16px;
4824 box-shadow: 0 1px 3px rgba(0,0,0,0.02);
4825 }
4826
4827 .phpinfowp-ug-item-header {
4828 display: flex;
4829 justify-content: space-between;
4830 align-items: center;
4831 flex-wrap: wrap;
4832 gap: 10px;
4833 margin-bottom: 10px;
4834 padding-bottom: 8px;
4835 border-bottom: 1px solid #f0f0f1;
4836 }
4837
4838 .phpinfowp-ug-item-title-row {
4839 display: flex;
4840 align-items: center;
4841 gap: 10px;
4842 flex-wrap: wrap;
4843 }
4844
4845 .phpinfowp-ug-item-name {
4846 font-size: 14px;
4847 color: #1d2327;
4848 }
4849
4850 .phpinfowp-ug-ver-pill {
4851 font-size: 12px;
4852 color: #646970;
4853 background: #f6f7f7;
4854 padding: 2px 8px;
4855 border-radius: 4px;
4856 border: 1px solid #e2e4e7;
4857 }
4858
4859 .phpinfowp-ug-item-badges {
4860 display: flex;
4861 align-items: center;
4862 gap: 8px;
4863 }
4864
4865 .phpinfowp-ug-stability-pill {
4866 font-size: 11px;
4867 font-weight: 600;
4868 padding: 2px 8px;
4869 border-radius: 12px;
4870 border: 1px solid transparent;
4871 }
4872
4873 .phpinfowp-ug-stability-pill.is-good {
4874 background: #edfaef;
4875 color: #008a20;
4876 border-color: #c3e6cb;
4877 }
4878
4879 .phpinfowp-ug-stability-pill.is-warn {
4880 background: #fff8e5;
4881 color: #996800;
4882 border-color: #f0c33c;
4883 }
4884
4885 .phpinfowp-ug-signals {
4886 display: flex;
4887 flex-direction: column;
4888 gap: 6px;
4889 }
4890
4891 .phpinfowp-ug-signal {
4892 display: flex;
4893 align-items: center;
4894 gap: 8px;
4895 font-size: 13px;
4896 color: #2c3338;
4897 background: #f8f9fa;
4898 padding: 6px 12px;
4899 border-radius: 4px;
4900 }
4901
4902 .phpinfowp-ug-signal.is-safe {
4903 background: #f0f9f1;
4904 color: #1a632b;
4905 border-left: 3px solid #00a32a;
4906 }