WordPress.org
Get WordPress

Plugin Directory

Changeset 3476199


Ignore:
Timestamp:
03/06/2026 09:19:49 AM (4 weeks ago)
Author:
probonodesign
Message:

Fix diagnosis tab layout and manual tab style

Location:
probonoseo-basic
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • probonoseo-basic/tags/1.5.5/admin/admin-style.css

    r3476092 r3476199  
    106106}
    107107
     108.nav-tab-manual {
     109    background: #f0f0f1;
     110    color: #50575e;
     111    border-color: #ccd0d4;
     112}
     113
     114.nav-tab-manual:hover {
     115    background-color: #fff;
     116    color: #2271b1;
     117}
     118
     119.nav-tab-manual.nav-tab-active,
     120.nav-tab-manual.nav-tab-active:hover {
     121    background: white;
     122    color: #1d2327;
     123    border-bottom: 1px solid white;
     124}
     125
    108126.probonoseo-save-button-top,
    109127.probonoseo-save-button-middle,
    … …  
    304322    grid-template-columns: 1fr 1fr;
    305323    gap: 24px;
     324}
     325
     326.probonoseo-diagnosis-left .probonoseo-cards-wrap {
     327    grid-template-columns: 1fr;
     328}
     329
     330.probonoseo-diagnosis-layout {
     331    display: grid;
     332    grid-template-columns: 1fr 1fr;
     333    gap: 40px;
     334    align-items: start;
     335}
     336
     337.probonoseo-diagnosis-left {
     338    min-width: 0;
     339}
     340
     341.probonoseo-diagnosis-right {
     342    min-width: 0;
     343    position: sticky;
     344    top: 32px;
    306345}
    307346
    … …  
    786825        grid-template-columns: 1fr;
    787826    }
     827    .probonoseo-diagnosis-layout {
     828        grid-template-columns: 1fr;
     829    }
    788830}
    789831

  • probonoseo-basic/tags/1.5.5/admin/tabs.css

    r3476092 r3476199  
    1 html {
    2     overflow-y: scroll;
    3 }
    4 
    5 .probonoseo-wrap {
    6     max-width: 1100px;
    7     margin: 40px auto;
    8     padding: 0 40px;
    9 }
    10 
    11 .probonoseo-header {
    12     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    13     color: white;
    14     padding: 32px 40px;
    15     border-radius: 12px;
    16     margin-bottom: 32px;
    17     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    18 }
    19 
    20 .probonoseo-title {
    21     font-size: 28px;
    22     font-weight: 700;
    23     margin: 0 0 8px 0;
    24     letter-spacing: -0.5px;
    25     color: inherit;
    26 }
    27 
    28 .probonoseo-subtitle {
    29     font-size: 14px;
    30     opacity: 0.95;
    31     margin: 0;
    32     font-weight: 400;
    33     color: inherit;
    34 }
    35 
    36 .nav-tab-wrapper {
    37     margin: 0 0 32px 0;
    38     border-bottom: 1px solid #ccd0d4;
    39     padding: 0;
    40     display: flex;
    41     flex-wrap: wrap;
    42     gap: 4px 8px;
    43 }
    44 
    45 .nav-tab {
    46     position: relative;
    47     border: 1px solid #ccd0d4;
    48     border-bottom: none;
    49     padding: 8px 14px;
    50     font-size: 13px;
    51     line-height: 1.71428571;
    52     background: #f0f0f1;
    53     color: #50575e;
    54     text-decoration: none;
    55     white-space: nowrap;
    56     margin-bottom: -1px;
    57     flex-shrink: 0;
    58 }
    59 
    60 .nav-tab:hover {
    61     background-color: #fff;
    62     color: #2271b1;
    63 }
    64 
    65 .nav-tab-active,
    66 .nav-tab-active:hover {
    67     background-color: #f0f0f1;
    68     border-bottom-color: #f0f0f1;
    69     color: #1d2327;
    70     margin-bottom: -1px;
    71     background: white;
    72     border-bottom: 1px solid white;
    73 }
    74 
    75 .nav-tab-manual {
    76     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    77     color: #fff;
    78     border-color: transparent;
    79 }
    80 
    81 .nav-tab-manual:hover {
    82     background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    83     color: #fff;
    84 }
    85 
    86 .nav-tab-manual.nav-tab-active {
    87     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    88     color: #fff;
    89     border-bottom-color: #f0f0f1;
    90 }
    91 
    92 .nav-tab-pro {
    93     background: #fff;
    94     color: #667eea;
    95     border: 2px solid #667eea;
    96     font-weight: 600;
    97 }
    98 
    99 .nav-tab-pro:hover {
    100     background: #f5f5ff;
    101     color: #764ba2;
    102     border-color: #764ba2;
    103 }
    104 
    105 .nav-tab-pro.nav-tab-active {
    106     background: #fff;
    107     color: #667eea;
    108     border-color: #667eea;
    109     border-bottom-color: #fff;
    110 }
    111 
    112 .probonoseo-tab-badge {
    113     display: inline-block;
    114     background: #667eea;
    115     color: white;
    116     font-size: 10px;
    117     padding: 2px 6px;
    118     border-radius: 3px;
    119     margin-left: 4px;
    120     font-weight: 600;
    121     vertical-align: middle;
    122 }
    123 
    124 .nav-tab-active .probonoseo-tab-badge {
    125     background: #764ba2;
    126 }
    127 
    128 .probonoseo-save-button-top,
    129 .probonoseo-save-button-middle,
    130 .probonoseo-save-button-bottom {
    131     text-align: center;
    132     margin: 32px 0;
    133 }
    134 
    135 .probonoseo-save-btn {
    136     background: #2271b1;
    137     color: white;
    138     border: none;
    139     padding: 12px 40px;
    140     font-size: 15px;
    141     font-weight: 600;
    142     border-radius: 6px;
    143     cursor: pointer;
    144     transition: all 0.3s ease;
    145     box-shadow: 0 2px 8px rgba(34, 113, 177, 0.3);
    146     height: auto;
    147     line-height: normal;
    148 }
    149 
    150 .probonoseo-save-btn:hover {
    151     background: #135e96;
    152     transform: translateY(-1px);
    153     box-shadow: 0 4px 12px rgba(34, 113, 177, 0.4);
    154 }
    155 
    156 .probonoseo-save-btn:active {
    157     transform: translateY(0);
    158 }
    159 
    160 .probonoseo-section {
    161     margin-bottom: 48px;
    162 }
    163 
    164 .probonoseo-section-title {
    165     font-size: 20px;
    166     font-weight: 700;
    167     color: #1e1e1e;
    168     margin: 0 0 8px 0;
    169     padding-bottom: 12px;
    170     border-bottom: 3px solid #2271b1;
    171 }
    172 
    173 .probonoseo-section-subtitle {
    174     font-size: 17px;
    175     font-weight: 600;
    176     color: #555;
    177     margin: 0 0 24px 0;
    178     padding-left: 20px;
    179 }
    180 
    181 .probonoseo-section-description {
    182     font-size: 14px;
    183     color: #666;
    184     margin: 16px 0;
    185     padding: 16px;
    186     background: #f5f5f5;
    187     border-radius: 6px;
    188     border-left: 4px solid #2271b1;
    189 }
    190 
    191 .probonoseo-section.pro-section {
    192     border-top: 4px solid #667eea;
    193     padding-top: 32px;
    194     margin-top: 0;
    195 }
    196 
    197 .probonoseo-section.pro-section .probonoseo-section-title {
    198     color: #667eea;
    199     border-bottom-color: #667eea;
    200 }
    201 
    202 .probonoseo-section.pro-section .probonoseo-section-subtitle {
    203     color: #667eea;
    204 }
    205 
    206 .probonoseo-section.pro-section .probonoseo-section-description {
    207     border-left-color: #667eea;
    208 }
    209 
    210 .probonoseo-card {
    211     background: white;
    212     border: 1px solid #e0e0e0;
    213     border-radius: 8px;
    214     padding: 28px 32px;
    215     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    216     transition: all 0.3s ease;
    217 }
    218 
    219 .probonoseo-card:hover {
    220     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    221     transform: translateY(-2px);
    222 }
    223 
    224 .probonoseo-card.pro-feature {
    225     background: #f7fbff;
    226     border-left: 4px solid #667eea;
    227 }
    228 
    229 .probonoseo-wrap .probonoseo-section .probonoseo-card .probonoseo-card-inner {
    230     display: grid !important;
    231     grid-template-columns: 63% 37% !important;
    232     gap: 32px !important;
    233     align-items: start !important;
    234 }
    235 
    236 .probonoseo-card-left {
    237     min-width: 0;
    238 }
    239 
    240 .probonoseo-card-right {
    241     min-width: 0;
    242 }
    243 
    244 .probonoseo-card-title {
    245     font-size: 17px;
    246     font-weight: 700;
    247     color: #1e1e1e;
    248     margin: 0 0 8px 0;
    249     line-height: 1.4;
    250 }
    251 
    252 .probonoseo-card.pro-feature .probonoseo-card-title {
    253     color: #667eea;
    254 }
    255 
    256 .probonoseo-card-title-pro {
    257     color: #667eea;
    258 }
    259 
    260 .probonoseo-card-description {
    261     font-size: 14px;
    262     color: #555;
    263     line-height: 1.7;
    264     margin: 0;
    265 }
    266 
    267 .probonoseo-toggle-container {
    268     display: flex;
    269     align-items: flex-start;
    270     justify-content: flex-end;
    271     width: 100%;
    272     min-width: 200px;
    273 }
    274 
    275 .probonoseo-license-card {
    276     background: #f9fafb;
    277     border: 2px solid #e0e0e0;
    278 }
    279 
    280 .probonoseo-license-block {
    281     display: flex;
    282     flex-direction: column;
    283     gap: 16px;
    284     align-items: center;
    285     text-align: center;
    286 }
    287 
    288 .probonoseo-license-card .probonoseo-card-inner {
    289     display: block !important;
    290 }
    291 
    292 .probonoseo-license-input-area {
    293     width: 100%;
    294     display: flex;
    295     justify-content: center;
    296     margin-top: 8px;
    297 }
    298 
    299 .probonoseo-license-input {
    300     width: 100%;
    301     max-width: 500px;
    302     padding: 14px 18px;
    303     font-size: 15px;
    304     border-radius: 6px;
    305     border: 2px solid #d1d5db;
    306     transition: all 0.3s ease;
    307     text-align: center;
    308 }
    309 
    310 .probonoseo-license-input:focus {
    311     outline: none;
    312     border-color: #4a90e2;
    313     box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    314 }
    315 
    316 .probonoseo-license-input[readonly] {
    317     background: #f5f5f5;
    318     color: #666;
    319     cursor: not-allowed;
    320 }
    321 
    322 .probonoseo-cards-wrap {
    323     display: grid;
    324     grid-template-columns: 1fr 1fr;
    325     gap: 24px;
     1.probonoseo-diagnosis-layout {
     2    display: grid;
     3    grid-template-columns: 50% 50%;
     4    gap: 32px;
     5    align-items: start;
     6}
     7
     8.probonoseo-diagnosis-left {
     9    min-width: 0;
     10}
     11
     12.probonoseo-diagnosis-right {
     13    position: sticky;
     14    top: 32px;
     15    min-width: 0;
    32616}
    32717
    32818.probonoseo-diagnosis-button {
    329     background: #2271b1;
    330     color: #ffffff;
    331     border: none;
    332     padding: 0 30px;
    333     height: 40px;
    334     font-size: 16px;
    335     font-weight: 600;
    336     border-radius: 3px;
    337     cursor: pointer;
    338     transition: all 0.3s ease;
    339     box-shadow: 0 2px 8px rgba(34, 113, 177, 0.3);
    340 }
    341 
    342 .probonoseo-diagnosis-button:hover {
    343     background: #135e96;
    344 }
    345 
    346 .probonoseo-diagnosis-button:disabled {
    347     opacity: 0.7;
    348     cursor: default;
    349 }
    350 
    351 .probonoseo-dev-mode-card {
    352     background: #fffbeb;
    353     border: 2px solid #f59e0b;
    354     border-radius: 8px;
    355     padding: 24px 28px;
    356     margin-top: 24px;
    357     box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
    358 }
    359 
    360 .probonoseo-dev-mode-title {
    361     font-size: 16px;
    362     font-weight: 700;
    363     color: #b45309;
    364     margin: 0 0 12px 0;
    365     display: flex;
    366     align-items: center;
    367     gap: 8px;
    368 }
    369 
    370 .probonoseo-dev-mode-title .dashicons {
    371     color: #f59e0b;
    372 }
    373 
    374 .probonoseo-dev-mode-warning {
    375     font-size: 13px;
    376     color: #92400e;
    377     margin: 0 0 16px 0;
    378     padding: 8px 12px;
    379     background: #fef3c7;
    380     border-radius: 4px;
    381 }
    382 
    383 .probonoseo-dev-mode-features {
    384     margin: 0 0 20px 0;
    385     padding-left: 20px;
    386     color: #78350f;
    387     font-size: 13px;
    388     line-height: 1.8;
    389 }
    390 
    391 .probonoseo-dev-mode-features li {
    392     margin-bottom: 4px;
    393 }
    394 
    395 .probonoseo-dev-mode-button {
    396     background: #f59e0b;
    397     color: #ffffff;
    398     border: none;
    399     padding: 10px 20px;
    400     font-size: 14px;
    401     font-weight: 600;
    402     border-radius: 4px;
    403     cursor: pointer;
    404     transition: all 0.3s ease;
    405     display: inline-flex;
    406     align-items: center;
    407     gap: 6px;
    408 }
    409 
    410 .probonoseo-dev-mode-button:hover {
    411     background: #d97706;
    412     color: #ffffff;
    413 }
    414 
    415 .probonoseo-dev-mode-button .dashicons {
    416     font-size: 16px;
    417     width: 16px;
    418     height: 16px;
    419 }
    420 
    421 .probonoseo-purchase-note {
    422     text-align: left;
    423     margin-top: 12px;
    424     font-size: 12px;
    425     color: #666;
    426     line-height: 1.6;
    427 }
    428 
    429 .probonoseo-info-grid {
    430     display: grid;
    431     grid-template-columns: 1fr 1fr;
    432     gap: 24px;
    433 }
    434 
    435 .probonoseo-info-left {
    436     min-width: 0;
    437 }
    438 
    439 .probonoseo-info-right {
    440     min-width: 0;
    441 }
    442 
    443 .probonoseo-info-list {
    444     margin: 0;
    445     padding: 0;
    446 }
    447 
    448 .probonoseo-info-row {
    449     display: flex;
    450     justify-content: space-between;
    451     align-items: center;
    452     padding: 10px 0;
    453     border-bottom: 1px solid #f0f0f0;
    454 }
    455 
    456 .probonoseo-info-row:last-child {
    457     border-bottom: none;
    458 }
    459 
    460 .probonoseo-info-row-border {
    461     border-top: 1px solid #eee;
    462     padding-top: 12px;
    463     margin-top: 12px;
    464 }
    465 
    466 .probonoseo-info-label {
    467     font-size: 14px;
    468     color: #555;
    469 }
    470 
    471 .probonoseo-info-value {
    472     font-size: 14px;
    473     color: #1e1e1e;
    474     font-weight: 500;
    475 }
    476 
    477 .probonoseo-info-highlight {
    478     color: #4a90e2;
    479 }
    480 
    481 .probonoseo-status-pro {
    482     color: #22c55e;
    483     font-weight: 600;
    484 }
    485 
    486 .probonoseo-status-free {
    487     color: #888;
    488 }
    489 
    490 .probonoseo-upgrade-box {
    491     margin-top: 16px;
    492     padding: 12px 16px;
    493     background: #f0f7ff;
    494     border-radius: 6px;
    495     border: 1px solid #4a90e2;
    496 }
    497 
    498 .probonoseo-upgrade-text {
    499     margin: 0 0 10px 0;
    500     font-size: 13px;
    501     color: #333;
    502     line-height: 1.6;
    503 }
    504 
    505 .probonoseo-upgrade-link {
    506     display: inline-block;
    507     color: #4a90e2;
    508     font-weight: 600;
    509     font-size: 13px;
    510     text-decoration: none;
    511 }
    512 
    513 .probonoseo-upgrade-link:hover {
    514     text-decoration: underline;
    515     color: #2271b1;
    516 }
    517 
    518 .probonoseo-card-action {
    519     margin-top: 16px;
    520 }
    521 
    522 .probonoseo-file-input {
    523     margin-bottom: 12px;
    524     display: block;
    525 }
    526 
    527 .probonoseo-btn-icon {
    528     vertical-align: middle;
    529     margin-right: 4px;
    530 }
    531 
    532 .probonoseo-card-danger {
    533     border-left: 4px solid #dc3232;
    534 }
    535 
    536 .probonoseo-card-title-danger {
    537     color: #dc3232;
    538 }
    539 
    540 .probonoseo-button-danger {
    541     color: #dc3232;
    542     border-color: #dc3232;
    543 }
    544 
    545 .probonoseo-button-danger:hover {
    546     background: #dc3232;
    547     color: #fff;
    548 }
    549 
    550 .probonoseo-reset-buttons {
    551     display: flex;
    552     gap: 12px;
    553     flex-wrap: wrap;
    554 }
    555 
    556 .probonoseo-backup-list {
    557     margin-top: 16px;
    558 }
    559 
    560 .probonoseo-backup-list-title {
    561     margin: 0 0 10px 0;
    562     font-size: 13px;
    563     font-weight: 600;
    564 }
    565 
    566 .probonoseo-backup-table {
    567     font-size: 12px;
    568 }
    569 
    570 .probonoseo-notice {
    571     margin: 15px 0;
     19    width: 100%;
     20    max-width: 300px;
     21}
     22
     23.probonoseo-diagnosis-results h3 {
     24    font-size: 16px;
     25    margin-bottom: 12px;
     26    color: #1e1e1e;
     27    font-weight: 600;
     28}
     29
     30#probonoseo-diagnosis-output {
     31    background: #f9f9f9;
     32    padding: 20px;
     33    border-radius: 5px;
     34    min-height: 200px;
     35    border: 1px solid #e0e0e0;
     36}
     37
     38@media screen and (max-width: 900px) {
     39    .probonoseo-diagnosis-layout {
     40        grid-template-columns: 1fr !important;
     41    }
     42    .probonoseo-diagnosis-right {
     43        position: static !important;
     44    }
     45}
     46
     47.probonoseo-license-wrap {
     48    padding: 20px 0;
    57249}
    57350
    57451.probonoseo-license-grid {
    575     display: grid;
    576     grid-template-columns: 1fr 1fr;
    577     gap: 24px;
     52    display: grid;
     53    grid-template-columns: 60% 40%;
     54    gap: 30px;
    57855}
    57956
    58057.probonoseo-license-left {
    581     display: flex;
    582     flex-direction: column;
    583     gap: 24px;
     58    min-width: 0;
    58459}
    58560
    58661.probonoseo-license-right {
    587     min-width: 0;
    588 }
    589 
    590 .probonoseo-card-sticky {
    591     position: sticky;
    592     top: 32px;
    593 }
    594 
    595 .probonoseo-pro-preview-card {
    596     background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    597     border: 1px solid #e0e7ff;
    598 }
    599 
    600 .probonoseo-pro-preview-card .probonoseo-card-description {
    601     margin-bottom: 20px;
    602 }
    603 
    604 .probonoseo-pro-preview-grid {
    605     display: grid;
    606     grid-template-columns: 1fr 1fr;
    607     gap: 12px;
    608 }
    609 
    610 .probonoseo-pro-preview-item {
    611     display: flex;
    612     justify-content: space-between;
    613     align-items: center;
    614     background: #fff;
    615     padding: 12px 16px;
    616     border-radius: 6px;
    617     border: 1px solid #e5e7eb;
    618 }
    619 
    620 .probonoseo-pro-preview-label {
    621     font-size: 13px;
    622     color: #374151;
    623     font-weight: 500;
    624 }
    625 
    626 .probonoseo-pro-preview-badge {
    627     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    628     color: #fff;
    629     font-size: 10px;
    630     padding: 3px 8px;
    631     border-radius: 4px;
    632     font-weight: 600;
     62    min-width: 0;
     63}
     64
     65.probonoseo-license-status {
     66    padding: 20px;
     67    border-radius: 8px;
     68    margin-bottom: 25px;
     69    text-align: center;
     70}
     71
     72.probonoseo-license-active {
     73    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
     74    border: 2px solid #4caf50;
     75}
     76
     77.probonoseo-license-inactive {
     78    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     79    border: 2px solid #ff9800;
     80}
     81
     82.probonoseo-license-dev {
     83    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
     84    border: 2px solid #2196f3;
     85}
     86
     87.probonoseo-license-status .dashicons {
     88    font-size: 48px;
     89    width: 48px;
     90    height: 48px;
     91    margin-bottom: 10px;
     92}
     93
     94.probonoseo-license-active .dashicons {
     95    color: #4caf50;
     96}
     97
     98.probonoseo-license-inactive .dashicons {
     99    color: #ff9800;
     100}
     101
     102.probonoseo-license-dev .dashicons {
     103    color: #2196f3;
     104}
     105
     106.probonoseo-license-status strong {
     107    display: block;
     108    font-size: 18px;
     109    margin-bottom: 8px;
     110}
     111
     112.probonoseo-license-status p {
     113    margin: 0;
     114    color: #666;
     115}
     116
     117.probonoseo-license-info {
     118    background: #f8f9fa;
     119    border-radius: 8px;
     120    padding: 20px;
     121    margin-bottom: 25px;
     122}
     123
     124.probonoseo-license-info-row {
     125    display: flex;
     126    justify-content: space-between;
     127    padding: 12px 0;
     128    border-bottom: 1px solid #e0e0e0;
     129}
     130
     131.probonoseo-license-info-row:last-child {
     132    border-bottom: none;
     133}
     134
     135.probonoseo-license-info-label {
     136    font-weight: 600;
     137    color: #555;
     138}
     139
     140.probonoseo-license-info-value {
     141    color: #333;
     142}
     143
     144.probonoseo-license-form {
     145    margin-bottom: 25px;
     146}
     147
     148.probonoseo-license-actions {
     149    display: flex;
     150    gap: 15px;
     151    justify-content: center;
     152}
     153
     154.probonoseo-license-actions .button {
     155    display: inline-flex;
     156    align-items: center;
     157    gap: 5px;
     158}
     159
     160.probonoseo-license-actions .dashicons {
     161    font-size: 18px;
     162    width: 18px;
     163    height: 18px;
     164}
     165
     166.probonoseo-dev-mode-section {
     167    background: #e3f2fd;
     168    border: 2px solid #2196f3;
     169    border-radius: 8px;
     170    padding: 20px;
     171    text-align: center;
     172}
     173
     174.probonoseo-dev-mode-section h3 {
     175    margin: 0 0 10px 0;
     176    font-size: 16px;
     177    color: #1976d2;
     178}
     179
     180.probonoseo-dev-mode-section p {
     181    margin: 0 0 15px 0;
     182    color: #666;
     183    font-size: 13px;
    633184}
    634185
    635186.probonoseo-total-features {
    636     display: flex;
    637     align-items: center;
    638     justify-content: center;
    639     gap: 12px;
    640     padding: 20px;
    641     background: #f9fafb;
    642     border-radius: 8px;
    643     margin-bottom: 20px;
     187    display: flex;
     188    align-items: center;
     189    justify-content: center;
     190    gap: 8px;
     191    padding: 15px 10px;
     192    background: linear-gradient(135deg, #f0f4ff 0%, #e8f1ff 100%);
     193    border: 2px solid #4a90e2;
     194    border-radius: 8px;
     195    margin-bottom: 15px;
    644196}
    645197
    646198.probonoseo-feature-count {
    647     text-align: center;
     199    display: flex;
     200    flex-direction: column;
     201    align-items: center;
     202    gap: 2px;
     203}
     204
     205.probonoseo-feature-total {
     206    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
     207    padding: 8px 12px;
     208    border-radius: 6px;
    648209}
    649210
    650211.probonoseo-count-label {
    651     display: block;
    652     font-size: 12px;
    653     color: #666;
    654     margin-bottom: 4px;
     212    font-size: 10px;
     213    font-weight: 600;
     214    color: #666;
     215    text-transform: uppercase;
     216    letter-spacing: 0.3px;
     217    white-space: nowrap;
     218}
     219
     220.probonoseo-feature-total .probonoseo-count-label {
     221    color: rgba(255,255,255,0.9);
    655222}
    656223
    657224.probonoseo-count-number {
    658     font-size: 20px;
    659     font-weight: 700;
    660     color: #1e1e1e;
     225    font-size: 16px;
     226    font-weight: 700;
     227    color: #333;
     228    line-height: 1;
     229    white-space: nowrap;
    661230}
    662231
    663232.probonoseo-count-pro {
    664     color: #667eea;
     233    color: #4a90e2;
    665234}
    666235
    667236.probonoseo-count-total {
    668     color: #22c55e;
     237    color: #ffffff;
     238    font-size: 18px;
    669239}
    670240
    671241.probonoseo-feature-plus,
    672242.probonoseo-feature-equals {
    673     font-size: 20px;
    674     font-weight: 700;
    675     color: #999;
    676 }
    677 
    678 .probonoseo-feature-total {
    679     background: #ecfdf5;
    680     padding: 8px 16px;
    681     border-radius: 6px;
    682 }
    683 
    684 .probonoseo-pro-features h4 {
    685     font-size: 14px;
    686     font-weight: 600;
    687     color: #1e1e1e;
    688     margin: 0 0 12px 0;
    689 }
    690 
    691 .probonoseo-pro-features ul {
    692     margin: 0;
    693     padding: 0 0 0 20px;
    694     font-size: 13px;
    695     color: #555;
    696     line-height: 1.8;
     243    font-size: 14px;
     244    font-weight: 700;
     245    color: #4a90e2;
     246}
     247
     248.probonoseo-feature-description {
     249    text-align: center;
     250    font-size: 12px;
     251    color: #555;
     252    margin: 0 0 15px 0;
     253    padding: 0 5px;
     254    line-height: 1.5;
     255}
     256
     257.probonoseo-pro-features {
     258    margin-top: 20px;
     259}
     260
     261.probonoseo-pro-feature-category {
     262    margin-bottom: 25px;
     263    padding-bottom: 20px;
     264    border-bottom: 1px solid #e0e0e0;
     265}
     266
     267.probonoseo-pro-feature-category:last-child {
     268    border-bottom: none;
     269    margin-bottom: 0;
     270}
     271
     272.probonoseo-pro-feature-category h4 {
     273    margin: 0 0 12px 0;
     274    font-size: 15px;
     275    color: #4a90e2;
     276    font-weight: 600;
     277}
     278
     279.probonoseo-pro-feature-category ul {
     280    margin: 0;
     281    padding-left: 20px;
     282    list-style: disc;
     283}
     284
     285.probonoseo-pro-feature-category li {
     286    margin-bottom: 6px;
     287    color: #555;
     288    font-size: 13px;
    697289}
    698290
    699291.probonoseo-pro-purchase {
    700     margin-top: 24px;
    701     padding-top: 24px;
    702     border-top: 1px solid #e0e0e0;
     292    background: linear-gradient(135deg, #f7fbff 0%, #e3f2fd 100%);
     293    border: 2px solid #4a90e2;
     294    border-radius: 8px;
     295    padding: 25px;
     296    text-align: center;
     297    margin-top: 25px;
    703298}
    704299
    705300.probonoseo-pro-purchase h4 {
    706     font-size: 14px;
    707     font-weight: 600;
    708     color: #1e1e1e;
    709     margin: 0 0 16px 0;
    710     text-align: center;
     301    margin: 0 0 20px 0;
     302    font-size: 16px;
    711303}
    712304
    713305.probonoseo-pricing-plans {
    714     display: grid;
    715     grid-template-columns: 1fr 1fr;
    716     gap: 12px;
    717     margin-bottom: 16px;
     306    display: flex;
     307    gap: 12px;
     308    margin-bottom: 20px;
    718309}
    719310
    720311.probonoseo-plan {
    721     background: #f9fafb;
    722     border: 1px solid #e0e0e0;
    723     border-radius: 8px;
    724     padding: 16px;
    725     text-align: center;
    726     position: relative;
     312    flex: 1;
     313    background: white;
     314    border: 2px solid #e0e0e0;
     315    border-radius: 8px;
     316    padding: 18px 12px;
     317    position: relative;
    727318}
    728319
    729320.probonoseo-plan-popular {
    730     background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    731     border-color: #667eea;
     321    border-color: #4a90e2;
     322    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
    732323}
    733324
    734325.probonoseo-plan-badge {
    735     position: absolute;
    736     top: -10px;
    737     left: 50%;
    738     transform: translateX(-50%);
    739     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    740     color: #fff;
    741     font-size: 10px;
    742     padding: 4px 12px;
    743     border-radius: 12px;
    744     font-weight: 600;
     326    position: absolute;
     327    top: -10px;
     328    left: 50%;
     329    transform: translateX(-50%);
     330    background: #4a90e2;
     331    color: white;
     332    font-size: 10px;
     333    font-weight: 600;
     334    padding: 3px 12px;
     335    border-radius: 12px;
     336    white-space: nowrap;
    745337}
    746338
    747339.probonoseo-plan-name {
    748     font-size: 13px;
    749     font-weight: 600;
    750     color: #374151;
    751     margin-bottom: 8px;
     340    font-size: 13px;
     341    font-weight: 600;
     342    color: #555;
     343    margin-bottom: 8px;
    752344}
    753345
    754346.probonoseo-plan-price {
    755     font-size: 24px;
    756     font-weight: 700;
    757     color: #1e1e1e;
    758     margin-bottom: 4px;
     347    font-size: 24px;
     348    font-weight: 700;
     349    color: #4a90e2;
     350    margin-bottom: 6px;
     351    line-height: 1;
    759352}
    760353
    761354.probonoseo-plan-sites {
    762     font-size: 12px;
    763     color: #666;
     355    font-size: 11px;
     356    color: #666;
    764357}
    765358
    766359.probonoseo-plan-note {
    767     text-align: center;
    768     font-size: 12px;
    769     color: #666;
    770     margin: 0 0 16px 0;
    771 }
    772 
    773 .probonoseo-buy-button {
    774     display: block;
    775     text-align: center;
    776     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    777     color: #fff;
    778     font-size: 16px;
    779     padding: 16px 32px;
    780     border-radius: 8px;
    781     text-decoration: none;
    782     font-weight: 600;
    783     transition: all 0.3s ease;
    784 }
    785 
    786 .probonoseo-buy-button:hover {
    787     transform: translateY(-2px);
    788     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    789     color: #fff;
    790 }
    791 
    792 @media screen and (max-width: 900px) {
    793     .probonoseo-cards-wrap {
    794         grid-template-columns: 1fr;
    795     }
    796     .probonoseo-info-grid {
    797         grid-template-columns: 1fr;
    798     }
    799     .probonoseo-license-grid {
    800         grid-template-columns: 1fr;
    801     }
    802     .probonoseo-pro-preview-grid {
    803         grid-template-columns: 1fr;
    804     }
    805     .probonoseo-pricing-plans {
    806         grid-template-columns: 1fr;
    807     }
    808 }
    809 
    810 @media screen and (max-width: 900px) {
    811     .probonoseo-wrap .probonoseo-section .probonoseo-card .probonoseo-card-inner {
    812         grid-template-columns: 1fr !important;
    813         gap: 20px !important;
    814     }
    815     .probonoseo-toggle-container {
    816         justify-content: flex-start;
    817     }
    818     .probonoseo-wrap {
    819         padding: 0 20px;
    820     }
    821     .probonoseo-header {
    822         padding: 24px 28px;
    823     }
    824     .probonoseo-section-subtitle {
    825         padding-left: 10px;
    826     }
    827     .nav-tab-wrapper {
    828         flex-direction: column;
    829         gap: 4px;
    830     }
    831     .nav-tab {
    832         margin-bottom: 0;
    833         border-bottom: 1px solid #ccd0d4;
    834     }
    835     .nav-tab-active {
    836         border-bottom-color: #ccd0d4;
    837     }
    838 }
    839 
    840 @media screen and (max-width: 480px) {
    841     .probonoseo-title {
    842         font-size: 24px;
    843     }
    844     .probonoseo-subtitle {
    845         font-size: 13px;
    846     }
    847     .probonoseo-card {
    848         padding: 20px 18px;
    849     }
    850     .probonoseo-license-input {
    851         max-width: 100%;
    852     }
    853     .probonoseo-save-btn {
    854         padding: 10px 24px;
    855         font-size: 14px;
    856     }
    857     .probonoseo-section-subtitle {
    858         font-size: 15px;
    859         padding-left: 0;
    860     }
    861     .nav-tab {
    862         font-size: 12px;
    863         padding: 6px 10px;
    864     }
    865     .probonoseo-dev-mode-card {
    866         padding: 20px;
    867     }
    868     .probonoseo-reset-buttons {
    869         flex-direction: column;
    870     }
    871     .probonoseo-total-features {
    872         flex-wrap: wrap;
    873     }
    874 }
     360    font-size: 12px;
     361    color: #666;
     362    margin: 0 0 15px 0;
     363}
     364
     365.probonoseo-pro-purchase .button-hero {
     366    padding: 12px 36px;
     367    height: auto;
     368    font-size: 16px;
     369}
     370
     371@media (max-width: 1200px) {
     372    .probonoseo-license-grid {
     373        grid-template-columns: 1fr;
     374    }
     375}
     376
     377.probonoseo-openai-wrap {
     378    padding: 20px 0;
     379}
     380
     381.probonoseo-openai-grid {
     382    display: grid;
     383    grid-template-columns: 60% 40%;
     384    gap: 30px;
     385}
     386
     387.probonoseo-openai-left {
     388    min-width: 0;
     389}
     390
     391.probonoseo-openai-right {
     392    min-width: 0;
     393}
     394
     395.probonoseo-api-status {
     396    padding: 20px;
     397    border-radius: 8px;
     398    margin-bottom: 25px;
     399    text-align: center;
     400}
     401
     402.probonoseo-api-active {
     403    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
     404    border: 2px solid #4caf50;
     405}
     406
     407.probonoseo-api-inactive {
     408    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     409    border: 2px solid #ff9800;
     410}
     411
     412.probonoseo-api-status .dashicons {
     413    font-size: 48px;
     414    width: 48px;
     415    height: 48px;
     416    margin-bottom: 10px;
     417}
     418
     419.probonoseo-api-active .dashicons {
     420    color: #4caf50;
     421}
     422
     423.probonoseo-api-inactive .dashicons {
     424    color: #ff9800;
     425}
     426
     427.probonoseo-api-status strong {
     428    display: block;
     429    font-size: 18px;
     430    margin-bottom: 8px;
     431}
     432
     433.probonoseo-api-status p {
     434    margin: 0;
     435    color: #666;
     436}
     437
     438.probonoseo-api-info {
     439    background: #f8f9fa;
     440    border-radius: 8px;
     441    padding: 20px;
     442    margin-bottom: 25px;
     443}
     444
     445.probonoseo-api-info-row {
     446    display: flex;
     447    justify-content: space-between;
     448    padding: 12px 0;
     449}
     450
     451.probonoseo-api-info-label {
     452    font-weight: 600;
     453    color: #555;
     454}
     455
     456.probonoseo-api-info-value {
     457    color: #333;
     458    font-family: monospace;
     459}
     460
     461.probonoseo-api-actions {
     462    display: flex;
     463    gap: 15px;
     464}
     465
     466.probonoseo-api-actions .button {
     467    display: inline-flex;
     468    align-items: center;
     469    gap: 5px;
     470}
     471
     472.probonoseo-usage-stats {
     473    background: #f8f9fa;
     474    border-radius: 8px;
     475    padding: 20px;
     476    margin-bottom: 20px;
     477}
     478
     479.probonoseo-usage-stat {
     480    display: flex;
     481    justify-content: space-between;
     482    margin-bottom: 10px;
     483}
     484
     485.probonoseo-usage-label {
     486    font-weight: 600;
     487    color: #555;
     488}
     489
     490.probonoseo-usage-value {
     491    color: #4a90e2;
     492    font-weight: bold;
     493}
     494
     495.probonoseo-usage-progress {
     496    height: 10px;
     497    background: #e0e0e0;
     498    border-radius: 5px;
     499    overflow: hidden;
     500    margin-bottom: 10px;
     501}
     502
     503.probonoseo-usage-bar {
     504    height: 100%;
     505    background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
     506    transition: width 0.3s ease;
     507}
     508
     509.probonoseo-feature-list {
     510    margin: 15px 0;
     511    padding-left: 20px;
     512    list-style: disc;
     513}
     514
     515.probonoseo-feature-list li {
     516    margin-bottom: 8px;
     517    color: #555;
     518    font-size: 13px;
     519}
     520
     521.probonoseo-steps {
     522    margin: 15px 0;
     523    padding-left: 20px;
     524}
     525
     526.probonoseo-steps li {
     527    margin-bottom: 8px;
     528    color: #555;
     529    font-size: 13px;
     530}
     531
     532.probonoseo-pricing-list {
     533    margin: 15px 0;
     534    padding-left: 20px;
     535    list-style: disc;
     536}
     537
     538.probonoseo-pricing-list li {
     539    margin-bottom: 8px;
     540    color: #555;
     541    font-size: 13px;
     542}
     543
     544.probonoseo-api-warning {
     545    background: #e3f2fd;
     546    border-left: 4px solid #2196f3;
     547    padding: 15px;
     548    margin-top: 20px;
     549    display: flex;
     550    align-items: flex-start;
     551    gap: 10px;
     552}
     553
     554.probonoseo-api-warning .dashicons {
     555    color: #2196f3;
     556    flex-shrink: 0;
     557}
     558
     559.probonoseo-api-warning p {
     560    margin: 0;
     561    color: #555;
     562    font-size: 13px;
     563}
     564
     565.probonoseo-pro-lock {
     566    text-align: center;
     567    padding: 60px 20px;
     568}
     569
     570.probonoseo-pro-lock-icon {
     571    margin-bottom: 20px;
     572}
     573
     574.probonoseo-pro-lock-icon .dashicons {
     575    font-size: 100px;
     576    width: 100px;
     577    height: 100px;
     578    color: #ccc;
     579}
     580
     581.probonoseo-pro-lock h2 {
     582    font-size: 28px;
     583    margin-bottom: 15px;
     584}
     585
     586.probonoseo-pro-lock p {
     587    font-size: 16px;
     588    color: #666;
     589    margin-bottom: 30px;
     590}
     591
     592@media (max-width: 1200px) {
     593    .probonoseo-openai-grid {
     594        grid-template-columns: 1fr;
     595    }
     596}
     597
     598.probonoseo-card-sticky {
     599    position: sticky;
     600    top: 32px;
     601}
     602
     603.probonoseo-form-group {
     604    margin-bottom: 25px;
     605}
     606
     607.probonoseo-form-group label {
     608    display: block;
     609    font-weight: 600;
     610    margin-bottom: 8px;
     611    color: #333;
     612}
     613
     614.probonoseo-form-group input,
     615.probonoseo-form-group select {
     616    width: 100%;
     617}
     618
     619.probonoseo-form-group .small-text {
     620    width: 120px;
     621}
     622
     623.dashicons.spin {
     624    animation: spin 1s linear infinite;
     625}
     626
     627@keyframes spin {
     628    from { transform: rotate(0deg); }
     629    to { transform: rotate(360deg); }
     630}
     631
     632@media (max-width: 1200px) {
     633    .probonoseo-card-sticky {
     634        position: static;
     635    }
     636}
     637
     638.probonoseo-manage-wrap {
     639    padding: 20px 0;
     640}
     641
     642.probonoseo-manage-grid {
     643    display: grid;
     644    grid-template-columns: 60% 40%;
     645    gap: 30px;
     646}
     647
     648.probonoseo-manage-left {
     649    min-width: 0;
     650}
     651
     652.probonoseo-manage-right {
     653    min-width: 0;
     654}
     655
     656.probonoseo-info-list {
     657    margin-top: 16px;
     658}
     659
     660.probonoseo-info-row {
     661    display: flex;
     662    justify-content: space-between;
     663    padding: 12px 0;
     664    border-bottom: 1px solid #e0e0e0;
     665}
     666
     667.probonoseo-info-row:last-child {
     668    border-bottom: none;
     669}
     670
     671.probonoseo-info-label {
     672    font-weight: 600;
     673    color: #555;
     674}
     675
     676.probonoseo-info-value {
     677    color: #333;
     678}
     679
     680@media (max-width: 1200px) {
     681    .probonoseo-manage-grid {
     682        grid-template-columns: 1fr;
     683    }
     684}
     685
     686.probonoseo-competitor-grid {
     687    display: grid;
     688    grid-template-columns: 40% 60%;
     689    gap: 20px;
     690    margin-bottom: 30px;
     691}
     692
     693.probonoseo-competitor-col-left {
     694    display: flex;
     695    flex-direction: column;
     696    gap: 15px;
     697}
     698
     699.probonoseo-competitor-col-right {
     700    min-width: 0;
     701}
     702
     703.probonoseo-competitor-box {
     704    background: #fff;
     705    border: 1px solid #e0e0e0;
     706    border-radius: 8px;
     707    padding: 16px;
     708}
     709
     710.probonoseo-competitor-box-sticky {
     711    position: sticky;
     712    top: 32px;
     713}
     714
     715.probonoseo-competitor-box-title {
     716    font-size: 14px;
     717    font-weight: 600;
     718    color: #333;
     719    margin: 0 0 12px 0;
     720}
     721
     722.probonoseo-competitor-list {
     723    display: flex;
     724    flex-direction: column;
     725    gap: 8px;
     726}
     727
     728.probonoseo-competitor-row {
     729    display: flex;
     730    align-items: center;
     731    gap: 8px;
     732}
     733
     734.probonoseo-competitor-num {
     735    width: 22px;
     736    height: 22px;
     737    background: #4a90e2;
     738    color: #fff;
     739    border-radius: 50%;
     740    display: flex;
     741    align-items: center;
     742    justify-content: center;
     743    font-size: 11px;
     744    font-weight: bold;
     745    flex-shrink: 0;
     746}
     747
     748.probonoseo-competitor-input {
     749    flex: 1;
     750    padding: 6px 10px;
     751    border: 1px solid #ddd;
     752    border-radius: 4px;
     753    font-size: 13px;
     754    min-width: 0;
     755}
     756
     757.probonoseo-competitor-input:focus {
     758    border-color: #4a90e2;
     759    outline: none;
     760}
     761
     762.probonoseo-competitor-del {
     763    width: 24px;
     764    height: 24px;
     765    border: none;
     766    background: #dc3545;
     767    color: #fff;
     768    border-radius: 4px;
     769    cursor: pointer;
     770    font-size: 14px;
     771    line-height: 1;
     772    flex-shrink: 0;
     773}
     774
     775.probonoseo-competitor-del:hover {
     776    background: #c82333;
     777}
     778
     779.probonoseo-competitor-btns {
     780    display: flex;
     781    gap: 8px;
     782    margin-top: 12px;
     783}
     784
     785.probonoseo-competitor-input-full {
     786    width: 100%;
     787    padding: 8px 10px;
     788    border: 1px solid #ddd;
     789    border-radius: 4px;
     790    font-size: 13px;
     791}
     792
     793.probonoseo-competitor-input-full:focus {
     794    border-color: #4a90e2;
     795    outline: none;
     796}
     797
     798.probonoseo-competitor-checks {
     799    display: grid;
     800    grid-template-columns: repeat(3, 1fr);
     801    gap: 6px 12px;
     802    margin-bottom: 16px;
     803}
     804
     805.probonoseo-competitor-checks label {
     806    display: flex;
     807    align-items: center;
     808    gap: 5px;
     809    font-size: 12px;
     810    color: #555;
     811    cursor: pointer;
     812    white-space: nowrap;
     813}
     814
     815.probonoseo-competitor-checks input[type="checkbox"] {
     816    margin: 0;
     817    flex-shrink: 0;
     818}
     819
     820.probonoseo-competitor-run {
     821    text-align: center;
     822}
     823
     824.probonoseo-competitor-results {
     825    min-height: 250px;
     826    max-height: 450px;
     827    overflow-y: auto;
     828}
     829
     830.probonoseo-competitor-results-empty,
     831.probonoseo-competitor-results-loading,
     832.probonoseo-competitor-results-error {
     833    display: flex;
     834    flex-direction: column;
     835    align-items: center;
     836    justify-content: center;
     837    min-height: 230px;
     838    color: #888;
     839    text-align: center;
     840}
     841
     842.probonoseo-competitor-results-empty .dashicons {
     843    font-size: 40px;
     844    width: 40px;
     845    height: 40px;
     846    margin-bottom: 12px;
     847    color: #ccc;
     848}
     849
     850.probonoseo-competitor-results-empty p {
     851    margin: 0;
     852    font-size: 13px;
     853}
     854
     855.probonoseo-competitor-results-loading .dashicons {
     856    font-size: 32px;
     857    width: 32px;
     858    height: 32px;
     859    color: #4a90e2;
     860}
     861
     862.probonoseo-competitor-results-error {
     863    color: #dc3545;
     864    font-size: 13px;
     865}
     866
     867.probonoseo-competitor-report {
     868    margin-top: 16px;
     869    padding-top: 16px;
     870    border-top: 1px solid #e0e0e0;
     871    text-align: center;
     872}
     873
     874.probonoseo-competitor-settings-title {
     875    font-size: 15px;
     876    font-weight: 600;
     877    color: #333;
     878    margin: 0 0 16px 0;
     879    padding-top: 15px;
     880    border-top: 1px solid #e0e0e0;
     881}
     882
     883.probonoseo-competitor-msg {
     884    padding: 8px 12px;
     885    border-radius: 4px;
     886    margin-top: 10px;
     887    font-size: 12px;
     888}
     889
     890.probonoseo-competitor-msg.success {
     891    background: #d4edda;
     892    color: #155724;
     893}
     894
     895.probonoseo-competitor-msg.error {
     896    background: #f8d7da;
     897    color: #721c24;
     898}
     899
     900.probonoseo-results-container {
     901    display: flex;
     902    flex-direction: column;
     903    gap: 16px;
     904}
     905
     906.probonoseo-result-section {
     907    background: #f9f9f9;
     908    border-radius: 6px;
     909    padding: 12px;
     910}
     911
     912.probonoseo-result-section-title {
     913    margin: 0 0 10px 0;
     914    font-size: 13px;
     915    color: #333;
     916    display: flex;
     917    align-items: center;
     918    gap: 6px;
     919    font-weight: 600;
     920}
     921
     922.probonoseo-result-section-title .dashicons {
     923    color: #4a90e2;
     924    font-size: 16px;
     925    width: 16px;
     926    height: 16px;
     927}
     928
     929.probonoseo-comparison-table {
     930    width: 100%;
     931    border-collapse: collapse;
     932    font-size: 12px;
     933}
     934
     935.probonoseo-comparison-table th,
     936.probonoseo-comparison-table td {
     937    padding: 6px 8px;
     938    border: 1px solid #ddd;
     939    text-align: center;
     940}
     941
     942.probonoseo-comparison-table th {
     943    background: #4a90e2;
     944    color: #fff;
     945    font-weight: bold;
     946    font-size: 11px;
     947}
     948
     949.probonoseo-comparison-table th.target-col {
     950    background: #28a745;
     951}
     952
     953.probonoseo-comparison-table td:first-child {
     954    text-align: left;
     955    font-weight: bold;
     956    background: #f5f5f5;
     957    white-space: nowrap;
     958}
     959
     960.probonoseo-score-wrap {
     961    display: flex;
     962    flex-wrap: wrap;
     963    gap: 10px;
     964}
     965
     966.probonoseo-score-item {
     967    flex: 1;
     968    min-width: 80px;
     969    background: #fff;
     970    border: 1px solid #ddd;
     971    border-radius: 6px;
     972    padding: 10px;
     973    text-align: center;
     974}
     975
     976.probonoseo-score-item.target {
     977    border-color: #28a745;
     978    background: #f0fff4;
     979}
     980
     981.probonoseo-score-label {
     982    font-size: 10px;
     983    color: #666;
     984    margin-bottom: 4px;
     985}
     986
     987.probonoseo-score-value {
     988    font-size: 22px;
     989    font-weight: bold;
     990    color: #333;
     991}
     992
     993.probonoseo-score-value.good {
     994    color: #28a745;
     995}
     996
     997.probonoseo-score-value.warning {
     998    color: #ffc107;
     999}
     1000
     1001.probonoseo-score-value.bad {
     1002    color: #dc3545;
     1003}
     1004
     1005.probonoseo-pro-notice {
     1006    background: #fff3cd;
     1007    border: 1px solid #ffc107;
     1008    border-radius: 8px;
     1009    padding: 20px;
     1010    text-align: center;
     1011    color: #856404;
     1012}
     1013
     1014@media (max-width: 900px) {
     1015    .probonoseo-competitor-grid {
     1016        grid-template-columns: 1fr;
     1017    }
     1018
     1019    .probonoseo-competitor-box-sticky {
     1020        position: static;
     1021    }
     1022
     1023    .probonoseo-competitor-checks {
     1024        grid-template-columns: repeat(2, 1fr);
     1025    }
     1026}
     1027
     1028.probonoseo-pro-enhance-grid {
     1029    display: grid;
     1030    grid-template-columns: 1.7fr 1fr;
     1031    gap: 30px;
     1032    margin-bottom: 30px;
     1033}
     1034
     1035.probonoseo-pro-enhance-left {
     1036    display: flex;
     1037    flex-direction: column;
     1038    gap: 20px;
     1039}
     1040
     1041.probonoseo-pro-enhance-right {
     1042    min-width: 0;
     1043}
     1044
     1045.probonoseo-pro-detail-section {
     1046    margin-top: 40px;
     1047    padding-top: 30px;
     1048    border-top: 2px solid #e0e0e0;
     1049}
     1050
     1051.probonoseo-detail-section-title {
     1052    font-size: 20px;
     1053    font-weight: 600;
     1054    color: #333;
     1055    margin: 0 0 25px 0;
     1056}
     1057
     1058.probonoseo-detail-card-title {
     1059    font-size: 15px;
     1060    font-weight: 600;
     1061    color: #4a90e2;
     1062    margin: 0 0 20px 0;
     1063    padding-bottom: 12px;
     1064    border-bottom: 1px solid #e0e0e0;
     1065}
     1066
     1067.probonoseo-detail-form-row {
     1068    display: grid;
     1069    grid-template-columns: 1fr 1fr;
     1070    gap: 20px;
     1071    margin-bottom: 16px;
     1072}
     1073
     1074.probonoseo-detail-form-row:last-child {
     1075    margin-bottom: 0;
     1076}
     1077
     1078.probonoseo-detail-form-row-single {
     1079    grid-template-columns: 1fr;
     1080}
     1081
     1082.probonoseo-detail-form-item {
     1083    min-width: 0;
     1084}
     1085
     1086.probonoseo-detail-form-item-full {
     1087    grid-column: 1 / -1;
     1088}
     1089
     1090.probonoseo-detail-form-item label {
     1091    display: block;
     1092    font-weight: 600;
     1093    margin-bottom: 8px;
     1094    color: #333;
     1095    font-size: 13px;
     1096}
     1097
     1098.probonoseo-detail-form-item input[type="text"],
     1099.probonoseo-detail-form-item input[type="url"],
     1100.probonoseo-detail-form-item input[type="password"],
     1101.probonoseo-detail-form-item select,
     1102.probonoseo-detail-form-item textarea {
     1103    width: 100%;
     1104    max-width: 100%;
     1105}
     1106
     1107.probonoseo-detail-form-item .description {
     1108    margin-top: 6px;
     1109    font-size: 12px;
     1110    color: #666;
     1111}
     1112
     1113.probonoseo-gsc-status-box {
     1114    display: flex;
     1115    align-items: center;
     1116    justify-content: center;
     1117    gap: 10px;
     1118    padding: 15px;
     1119    border-radius: 8px;
     1120    margin-bottom: 20px;
     1121}
     1122
     1123.probonoseo-gsc-status-box.connected {
     1124    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
     1125    border: 1px solid #4caf50;
     1126}
     1127
     1128.probonoseo-gsc-status-box.disconnected {
     1129    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     1130    border: 1px solid #ff9800;
     1131}
     1132
     1133.probonoseo-gsc-status-box .dashicons {
     1134    font-size: 24px;
     1135    width: 24px;
     1136    height: 24px;
     1137}
     1138
     1139.probonoseo-gsc-status-box.connected .dashicons {
     1140    color: #4caf50;
     1141}
     1142
     1143.probonoseo-gsc-status-box.disconnected .dashicons {
     1144    color: #ff9800;
     1145}
     1146
     1147.probonoseo-gsc-status-box strong {
     1148    font-size: 15px;
     1149}
     1150
     1151.probonoseo-card-right input[type="text"],
     1152.probonoseo-card-right input[type="url"],
     1153.probonoseo-card-right input[type="password"],
     1154.probonoseo-card-right select,
     1155.probonoseo-card-right textarea {
     1156    width: 100%;
     1157    max-width: 100%;
     1158    box-sizing: border-box;
     1159}
     1160
     1161.probonoseo-card-right textarea {
     1162    min-height: 60px;
     1163    resize: vertical;
     1164}
     1165
     1166@media (max-width: 1200px) {
     1167    .probonoseo-pro-enhance-grid {
     1168        grid-template-columns: 1fr;
     1169    }
     1170}
     1171
     1172@media (max-width: 768px) {
     1173    .probonoseo-detail-form-row {
     1174        grid-template-columns: 1fr;
     1175    }
     1176}
     1177
     1178.probonoseo-tabs-free {
     1179    margin-bottom: 0;
     1180    border-bottom: none;
     1181}
     1182
     1183.probonoseo-tabs-pro {
     1184    margin-top: 8px;
     1185    padding-top: 0;
     1186}
     1187
     1188.probonoseo-tabs-free .nav-tab,
     1189.probonoseo-tabs-pro .nav-tab {
     1190    margin-bottom: 0;
     1191}
     1192
     1193.probonoseo-section-divider {
     1194    height: 1px;
     1195    background: #ddd;
     1196    margin: 30px 0;
     1197}
     1198
     1199.probonoseo-pro-label {
     1200    display: inline-block;
     1201    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     1202    color: #fff;
     1203    font-size: 11px;
     1204    font-weight: 600;
     1205    padding: 2px 8px;
     1206    border-radius: 3px;
     1207    margin-left: 8px;
     1208    vertical-align: middle;
     1209}
     1210
     1211.probonoseo-serp-wrap {
     1212    padding: 20px 0;
     1213}
     1214
     1215.probonoseo-serp-grid {
     1216    display: grid;
     1217    grid-template-columns: 1.7fr 1fr;
     1218    gap: 30px;
     1219    margin-bottom: 30px;
     1220}
     1221
     1222.probonoseo-serp-left {
     1223    display: flex;
     1224    flex-direction: column;
     1225    gap: 20px;
     1226}
     1227
     1228.probonoseo-serp-right {
     1229    min-width: 0;
     1230}
     1231
     1232.probonoseo-serp-about {
     1233    font-size: 13px;
     1234    color: #555;
     1235    margin: 0 0 15px 0;
     1236    line-height: 1.6;
     1237}
     1238
     1239.probonoseo-serp-info {
     1240    display: flex;
     1241    flex-direction: column;
     1242    gap: 10px;
     1243}
     1244
     1245.probonoseo-serp-info-item {
     1246    display: flex;
     1247    align-items: center;
     1248    gap: 8px;
     1249    font-size: 13px;
     1250    color: #333;
     1251}
     1252
     1253.probonoseo-serp-icon-star {
     1254    color: #ffc107;
     1255}
     1256
     1257.probonoseo-serp-icon-search {
     1258    color: #4a90e2;
     1259}
     1260
     1261.probonoseo-serp-icon-location {
     1262    color: #28a745;
     1263}
     1264
     1265.probonoseo-serp-icon-sitemap {
     1266    color: #6f42c1;
     1267}
     1268
     1269.probonoseo-serp-detail-section {
     1270    margin-top: 40px;
     1271    padding-top: 30px;
     1272    border-top: 2px solid #e0e0e0;
     1273}
     1274
     1275.probonoseo-serp-section-margin {
     1276    margin-top: 40px;
     1277}
     1278
     1279.probonoseo-serp-desc {
     1280    font-size: 13px;
     1281    color: #666;
     1282    margin: 0 0 20px 0;
     1283}
     1284
     1285@media (max-width: 1200px) {
     1286    .probonoseo-serp-grid {
     1287        grid-template-columns: 1fr;
     1288    }
     1289}
     1290
     1291.probonoseo-schema-row {
     1292    margin-bottom: 15px;
     1293}
     1294
     1295.probonoseo-schema-row label {
     1296    display: block;
     1297    font-weight: 600;
     1298    margin-bottom: 5px;
     1299    color: #333;
     1300    font-size: 13px;
     1301}
     1302
     1303.probonoseo-schema-row input[type="text"],
     1304.probonoseo-schema-row input[type="url"],
     1305.probonoseo-schema-row input[type="number"],
     1306.probonoseo-schema-row input[type="date"],
     1307.probonoseo-schema-row input[type="datetime-local"],
     1308.probonoseo-schema-row select,
     1309.probonoseo-schema-row textarea {
     1310    width: 100%;
     1311    max-width: 100%;
     1312}
     1313
     1314.probonoseo-html-sitemap {
     1315    padding: 20px;
     1316}
     1317
     1318.probonoseo-sitemap-section {
     1319    margin-bottom: 30px;
     1320}
     1321
     1322.probonoseo-sitemap-section h3 {
     1323    font-size: 18px;
     1324    margin: 0 0 15px 0;
     1325    padding-bottom: 10px;
     1326    border-bottom: 2px solid #4a90e2;
     1327    color: #333;
     1328}
     1329
     1330.probonoseo-sitemap-section ul {
     1331    margin: 0;
     1332    padding: 0;
     1333    list-style: none;
     1334}
     1335
     1336.probonoseo-sitemap-section li {
     1337    padding: 8px 0;
     1338    border-bottom: 1px solid #eee;
     1339}
     1340
     1341.probonoseo-sitemap-section li:last-child {
     1342    border-bottom: none;
     1343}
     1344
     1345.probonoseo-sitemap-section a {
     1346    color: #4a90e2;
     1347    text-decoration: none;
     1348}
     1349
     1350.probonoseo-sitemap-section a:hover {
     1351    text-decoration: underline;
     1352}
     1353
     1354.probonoseo-sitemap-date {
     1355    color: #999;
     1356    font-size: 12px;
     1357    margin-left: 10px;
     1358}
     1359
     1360.probonoseo-schema-advanced-wrap {
     1361    padding: 20px 0;
     1362}
     1363
     1364.probonoseo-schema-advanced-grid {
     1365    display: grid;
     1366    grid-template-columns: 1.7fr 1fr;
     1367    gap: 30px;
     1368    margin-bottom: 30px;
     1369}
     1370
     1371.probonoseo-schema-advanced-left {
     1372    display: flex;
     1373    flex-direction: column;
     1374    gap: 20px;
     1375}
     1376
     1377.probonoseo-schema-advanced-right {
     1378    min-width: 0;
     1379}
     1380
     1381.probonoseo-schema-advanced-about {
     1382    font-size: 13px;
     1383    color: #555;
     1384    margin: 0 0 15px 0;
     1385    line-height: 1.6;
     1386}
     1387
     1388.probonoseo-schema-advanced-info {
     1389    display: flex;
     1390    flex-direction: column;
     1391    gap: 10px;
     1392}
     1393
     1394.probonoseo-schema-advanced-info-item {
     1395    display: flex;
     1396    align-items: center;
     1397    gap: 8px;
     1398    font-size: 13px;
     1399    color: #333;
     1400}
     1401
     1402.probonoseo-schema-advanced-detail-section {
     1403    margin-top: 40px;
     1404    padding-top: 30px;
     1405    border-top: 2px solid #e0e0e0;
     1406}
     1407
     1408.probonoseo-schema-advanced-section-margin {
     1409    margin-top: 40px;
     1410}
     1411
     1412.probonoseo-schema-advanced-desc {
     1413    font-size: 13px;
     1414    color: #666;
     1415    margin: 0 0 20px 0;
     1416}
     1417
     1418.probonoseo-schema-detail-form-row {
     1419    display: grid;
     1420    grid-template-columns: 1fr 1fr;
     1421    gap: 20px;
     1422    margin-bottom: 16px;
     1423}
     1424
     1425.probonoseo-schema-detail-form-row:last-child {
     1426    margin-bottom: 0;
     1427}
     1428
     1429.probonoseo-schema-detail-form-item {
     1430    min-width: 0;
     1431}
     1432
     1433.probonoseo-schema-detail-form-item label {
     1434    display: block;
     1435    font-weight: 600;
     1436    margin-bottom: 8px;
     1437    color: #333;
     1438    font-size: 13px;
     1439}
     1440
     1441.probonoseo-schema-detail-form-item input[type="text"],
     1442.probonoseo-schema-detail-form-item input[type="url"],
     1443.probonoseo-schema-detail-form-item input[type="number"],
     1444.probonoseo-schema-detail-form-item select {
     1445    width: 100%;
     1446    max-width: 100%;
     1447}
     1448
     1449.probonoseo-schema-detail-form-item .description {
     1450    margin-top: 6px;
     1451    font-size: 12px;
     1452    color: #666;
     1453}
     1454
     1455.probonoseo-schema-type-icon {
     1456    display: inline-block;
     1457    width: 20px;
     1458    text-align: center;
     1459    margin-right: 4px;
     1460}
     1461
     1462.probonoseo-schema-type-icon.icon-software {
     1463    color: #4a90e2;
     1464}
     1465
     1466.probonoseo-schema-type-icon.icon-course {
     1467    color: #28a745;
     1468}
     1469
     1470.probonoseo-schema-type-icon.icon-book {
     1471    color: #6f42c1;
     1472}
     1473
     1474.probonoseo-schema-type-icon.icon-movie {
     1475    color: #dc3545;
     1476}
     1477
     1478.probonoseo-schema-type-icon.icon-music {
     1479    color: #fd7e14;
     1480}
     1481
     1482.probonoseo-schema-type-icon.icon-podcast {
     1483    color: #20c997;
     1484}
     1485
     1486.probonoseo-schema-type-icon.icon-org {
     1487    color: #17a2b8;
     1488}
     1489
     1490.probonoseo-schema-type-icon.icon-person {
     1491    color: #6610f2;
     1492}
     1493
     1494.probonoseo-schema-type-icon.icon-article {
     1495    color: #333;
     1496}
     1497
     1498.probonoseo-schema-type-icon.icon-news {
     1499    color: #dc3545;
     1500}
     1501
     1502.probonoseo-schema-type-icon.icon-blog {
     1503    color: #fd7e14;
     1504}
     1505
     1506.probonoseo-schema-type-icon.icon-announce {
     1507    color: #ffc107;
     1508}
     1509
     1510.probonoseo-schema-type-icon.icon-image {
     1511    color: #28a745;
     1512}
     1513
     1514.probonoseo-schema-type-icon.icon-dataset {
     1515    color: #17a2b8;
     1516}
     1517
     1518.probonoseo-schema-type-icon.icon-rating {
     1519    color: #ffc107;
     1520}
     1521
     1522.probonoseo-schema-type-icon.icon-claim {
     1523    color: #6f42c1;
     1524}
     1525
     1526.probonoseo-schema-type-icon.icon-speakable {
     1527    color: #4a90e2;
     1528}
     1529
     1530.probonoseo-schema-type-icon.icon-auto {
     1531    color: #20c997;
     1532}
     1533
     1534@media (max-width: 1200px) {
     1535    .probonoseo-schema-advanced-grid {
     1536        grid-template-columns: 1fr;
     1537    }
     1538}
     1539
     1540@media (max-width: 768px) {
     1541    .probonoseo-schema-detail-form-row {
     1542        grid-template-columns: 1fr;
     1543    }
     1544}
     1545
     1546.probonoseo-diagnosis-pro-grid {
     1547    display: grid;
     1548    grid-template-columns: 1.7fr 1fr;
     1549    gap: 30px;
     1550    margin-bottom: 30px;
     1551}
     1552
     1553.probonoseo-diagnosis-pro-left {
     1554    display: flex;
     1555    flex-direction: column;
     1556    gap: 20px;
     1557}
     1558
     1559.probonoseo-diagnosis-pro-right {
     1560    min-width: 0;
     1561}
     1562
     1563.probonoseo-diagnosis-pro-desc {
     1564    font-size: 13px;
     1565    color: #555;
     1566    margin: 0 0 20px 0;
     1567    line-height: 1.6;
     1568}
     1569
     1570.probonoseo-diagnosis-pro-actions {
     1571    text-align: center;
     1572    margin-bottom: 20px;
     1573}
     1574
     1575.probonoseo-diagnosis-pro-results {
     1576    background: #f9f9f9;
     1577    border: 1px solid #e0e0e0;
     1578    border-radius: 6px;
     1579    padding: 20px;
     1580    min-height: 200px;
     1581    max-height: 500px;
     1582    overflow-y: auto;
     1583}
     1584
     1585.probonoseo-diagnosis-pro-empty {
     1586    display: flex;
     1587    flex-direction: column;
     1588    align-items: center;
     1589    justify-content: center;
     1590    min-height: 180px;
     1591    color: #888;
     1592    text-align: center;
     1593}
     1594
     1595.probonoseo-diagnosis-pro-empty .dashicons {
     1596    font-size: 48px;
     1597    width: 48px;
     1598    height: 48px;
     1599    margin-bottom: 12px;
     1600    color: #ccc;
     1601}
     1602
     1603.probonoseo-diagnosis-pro-empty p {
     1604    margin: 0;
     1605    font-size: 13px;
     1606}
     1607
     1608.probonoseo-diagnosis-pro-loading {
     1609    display: flex;
     1610    flex-direction: column;
     1611    align-items: center;
     1612    justify-content: center;
     1613    min-height: 180px;
     1614    color: #4a90e2;
     1615    text-align: center;
     1616}
     1617
     1618.probonoseo-diagnosis-pro-loading .dashicons {
     1619    font-size: 32px;
     1620    width: 32px;
     1621    height: 32px;
     1622    margin-bottom: 12px;
     1623}
     1624
     1625.probonoseo-diagnosis-pro-loading p {
     1626    margin: 0;
     1627    font-size: 13px;
     1628}
     1629
     1630.probonoseo-diagnosis-pro-error {
     1631    display: flex;
     1632    flex-direction: column;
     1633    align-items: center;
     1634    justify-content: center;
     1635    min-height: 180px;
     1636    color: #dc3545;
     1637    text-align: center;
     1638}
     1639
     1640.probonoseo-diagnosis-pro-error p {
     1641    margin: 0;
     1642    font-size: 13px;
     1643}
     1644
     1645.probonoseo-diagnosis-pro-section {
     1646    margin-bottom: 20px;
     1647    padding-bottom: 20px;
     1648    border-bottom: 1px solid #e0e0e0;
     1649}
     1650
     1651.probonoseo-diagnosis-pro-section:last-child {
     1652    margin-bottom: 0;
     1653    padding-bottom: 0;
     1654    border-bottom: none;
     1655}
     1656
     1657.probonoseo-diagnosis-pro-section-title {
     1658    display: flex;
     1659    align-items: center;
     1660    gap: 8px;
     1661    margin: 0 0 12px 0;
     1662    font-size: 14px;
     1663    font-weight: 600;
     1664    color: #333;
     1665}
     1666
     1667.probonoseo-diagnosis-pro-section-title .dashicons {
     1668    font-size: 18px;
     1669    width: 18px;
     1670    height: 18px;
     1671    color: #4a90e2;
     1672}
     1673
     1674.probonoseo-diagnosis-pro-item {
     1675    padding: 6px 0;
     1676    font-size: 13px;
     1677    display: flex;
     1678    align-items: flex-start;
     1679    gap: 6px;
     1680}
     1681
     1682.probonoseo-diagnosis-pro-item.item-success {
     1683    color: #28a745;
     1684}
     1685
     1686.probonoseo-diagnosis-pro-item.item-warning {
     1687    color: #ffc107;
     1688}
     1689
     1690.probonoseo-diagnosis-pro-item.item-error {
     1691    color: #dc3545;
     1692}
     1693
     1694.probonoseo-diagnosis-pro-item.item-info {
     1695    color: #17a2b8;
     1696}
     1697
     1698.probonoseo-diagnosis-pro-item.item-detail {
     1699    color: #666;
     1700    padding-left: 20px;
     1701    font-size: 12px;
     1702}
     1703
     1704.probonoseo-diagnosis-pro-score-box {
     1705    text-align: center;
     1706    padding: 20px;
     1707    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
     1708    border-radius: 8px;
     1709    color: white;
     1710    margin-bottom: 20px;
     1711}
     1712
     1713.probonoseo-diagnosis-pro-score-number {
     1714    font-size: 48px;
     1715    font-weight: bold;
     1716    line-height: 1;
     1717}
     1718
     1719.probonoseo-diagnosis-pro-score-label {
     1720    font-size: 14px;
     1721    margin-top: 8px;
     1722}
     1723
     1724.probonoseo-diagnosis-pro-pdf-section {
     1725    margin-top: 20px;
     1726    padding-top: 20px;
     1727    border-top: 1px solid #e0e0e0;
     1728}
     1729
     1730@media (max-width: 1200px) {
     1731    .probonoseo-diagnosis-pro-grid {
     1732        grid-template-columns: 1fr;
     1733    }
     1734}

  • probonoseo-basic/tags/1.5.5/admin/tabs/tab-diagnosis.php

    r3476092 r3476199  
    1919            </div>
    2020
    21             <div class="probonoseo-cards-wrap" style="display: block;">
     21            <div class="probonoseo-cards-wrap">
    2222
    2323                <div class="probonoseo-card">

  • probonoseo-basic/tags/1.5.5/probonoseo.php

    r3476092 r3476199  
    1717define('PROBONOSEO_PATH', plugin_dir_path(__FILE__));
    1818define('PROBONOSEO_URL', plugin_dir_url(__FILE__));
    19 define('PROBONOSEO_VERSION', '1.5.5');
     19define('PROBONOSEO_VERSION', '1.5.5.1');
    2020
    2121function probonoseo_admin_assets($hook) {

  • probonoseo-basic/trunk/admin/admin-style.css

    r3472355 r3476199  
    106106}
    107107
     108.nav-tab-manual {
     109    background: #f0f0f1;
     110    color: #50575e;
     111    border-color: #ccd0d4;
     112}
     113
     114.nav-tab-manual:hover {
     115    background-color: #fff;
     116    color: #2271b1;
     117}
     118
     119.nav-tab-manual.nav-tab-active,
     120.nav-tab-manual.nav-tab-active:hover {
     121    background: white;
     122    color: #1d2327;
     123    border-bottom: 1px solid white;
     124}
     125
    108126.probonoseo-save-button-top,
    109127.probonoseo-save-button-middle,
    … …  
    304322    grid-template-columns: 1fr 1fr;
    305323    gap: 24px;
     324}
     325
     326.probonoseo-diagnosis-left .probonoseo-cards-wrap {
     327    grid-template-columns: 1fr;
     328}
     329
     330.probonoseo-diagnosis-layout {
     331    display: grid;
     332    grid-template-columns: 1fr 1fr;
     333    gap: 40px;
     334    align-items: start;
     335}
     336
     337.probonoseo-diagnosis-left {
     338    min-width: 0;
     339}
     340
     341.probonoseo-diagnosis-right {
     342    min-width: 0;
     343    position: sticky;
     344    top: 32px;
    306345}
    307346
    … …  
    786825        grid-template-columns: 1fr;
    787826    }
     827    .probonoseo-diagnosis-layout {
     828        grid-template-columns: 1fr;
     829    }
    788830}
    789831

  • probonoseo-basic/trunk/admin/tabs.css

    r3476092 r3476199  
    1 html {
    2     overflow-y: scroll;
    3 }
    4 
    5 .probonoseo-wrap {
    6     max-width: 1100px;
    7     margin: 40px auto;
    8     padding: 0 40px;
    9 }
    10 
    11 .probonoseo-header {
    12     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    13     color: white;
    14     padding: 32px 40px;
    15     border-radius: 12px;
    16     margin-bottom: 32px;
    17     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
    18 }
    19 
    20 .probonoseo-title {
    21     font-size: 28px;
    22     font-weight: 700;
    23     margin: 0 0 8px 0;
    24     letter-spacing: -0.5px;
    25     color: inherit;
    26 }
    27 
    28 .probonoseo-subtitle {
    29     font-size: 14px;
    30     opacity: 0.95;
    31     margin: 0;
    32     font-weight: 400;
    33     color: inherit;
    34 }
    35 
    36 .nav-tab-wrapper {
    37     margin: 0 0 32px 0;
    38     border-bottom: 1px solid #ccd0d4;
    39     padding: 0;
    40     display: flex;
    41     flex-wrap: wrap;
    42     gap: 4px 8px;
    43 }
    44 
    45 .nav-tab {
    46     position: relative;
    47     border: 1px solid #ccd0d4;
    48     border-bottom: none;
    49     padding: 8px 14px;
    50     font-size: 13px;
    51     line-height: 1.71428571;
    52     background: #f0f0f1;
    53     color: #50575e;
    54     text-decoration: none;
    55     white-space: nowrap;
    56     margin-bottom: -1px;
    57     flex-shrink: 0;
    58 }
    59 
    60 .nav-tab:hover {
    61     background-color: #fff;
    62     color: #2271b1;
    63 }
    64 
    65 .nav-tab-active,
    66 .nav-tab-active:hover {
    67     background-color: #f0f0f1;
    68     border-bottom-color: #f0f0f1;
    69     color: #1d2327;
    70     margin-bottom: -1px;
    71     background: white;
    72     border-bottom: 1px solid white;
    73 }
    74 
    75 .nav-tab-manual {
    76     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    77     color: #fff;
    78     border-color: transparent;
    79 }
    80 
    81 .nav-tab-manual:hover {
    82     background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    83     color: #fff;
    84 }
    85 
    86 .nav-tab-manual.nav-tab-active {
    87     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    88     color: #fff;
    89     border-bottom-color: #f0f0f1;
    90 }
    91 
    92 .nav-tab-pro {
    93     background: #fff;
    94     color: #667eea;
    95     border: 2px solid #667eea;
    96     font-weight: 600;
    97 }
    98 
    99 .nav-tab-pro:hover {
    100     background: #f5f5ff;
    101     color: #764ba2;
    102     border-color: #764ba2;
    103 }
    104 
    105 .nav-tab-pro.nav-tab-active {
    106     background: #fff;
    107     color: #667eea;
    108     border-color: #667eea;
    109     border-bottom-color: #fff;
    110 }
    111 
    112 .probonoseo-tab-badge {
    113     display: inline-block;
    114     background: #667eea;
    115     color: white;
    116     font-size: 10px;
    117     padding: 2px 6px;
    118     border-radius: 3px;
    119     margin-left: 4px;
    120     font-weight: 600;
    121     vertical-align: middle;
    122 }
    123 
    124 .nav-tab-active .probonoseo-tab-badge {
    125     background: #764ba2;
    126 }
    127 
    128 .probonoseo-save-button-top,
    129 .probonoseo-save-button-middle,
    130 .probonoseo-save-button-bottom {
    131     text-align: center;
    132     margin: 32px 0;
    133 }
    134 
    135 .probonoseo-save-btn {
    136     background: #2271b1;
    137     color: white;
    138     border: none;
    139     padding: 12px 40px;
    140     font-size: 15px;
    141     font-weight: 600;
    142     border-radius: 6px;
    143     cursor: pointer;
    144     transition: all 0.3s ease;
    145     box-shadow: 0 2px 8px rgba(34, 113, 177, 0.3);
    146     height: auto;
    147     line-height: normal;
    148 }
    149 
    150 .probonoseo-save-btn:hover {
    151     background: #135e96;
    152     transform: translateY(-1px);
    153     box-shadow: 0 4px 12px rgba(34, 113, 177, 0.4);
    154 }
    155 
    156 .probonoseo-save-btn:active {
    157     transform: translateY(0);
    158 }
    159 
    160 .probonoseo-section {
    161     margin-bottom: 48px;
    162 }
    163 
    164 .probonoseo-section-title {
    165     font-size: 20px;
    166     font-weight: 700;
    167     color: #1e1e1e;
    168     margin: 0 0 8px 0;
    169     padding-bottom: 12px;
    170     border-bottom: 3px solid #2271b1;
    171 }
    172 
    173 .probonoseo-section-subtitle {
    174     font-size: 17px;
    175     font-weight: 600;
    176     color: #555;
    177     margin: 0 0 24px 0;
    178     padding-left: 20px;
    179 }
    180 
    181 .probonoseo-section-description {
    182     font-size: 14px;
    183     color: #666;
    184     margin: 16px 0;
    185     padding: 16px;
    186     background: #f5f5f5;
    187     border-radius: 6px;
    188     border-left: 4px solid #2271b1;
    189 }
    190 
    191 .probonoseo-section.pro-section {
    192     border-top: 4px solid #667eea;
    193     padding-top: 32px;
    194     margin-top: 0;
    195 }
    196 
    197 .probonoseo-section.pro-section .probonoseo-section-title {
    198     color: #667eea;
    199     border-bottom-color: #667eea;
    200 }
    201 
    202 .probonoseo-section.pro-section .probonoseo-section-subtitle {
    203     color: #667eea;
    204 }
    205 
    206 .probonoseo-section.pro-section .probonoseo-section-description {
    207     border-left-color: #667eea;
    208 }
    209 
    210 .probonoseo-card {
    211     background: white;
    212     border: 1px solid #e0e0e0;
    213     border-radius: 8px;
    214     padding: 28px 32px;
    215     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    216     transition: all 0.3s ease;
    217 }
    218 
    219 .probonoseo-card:hover {
    220     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    221     transform: translateY(-2px);
    222 }
    223 
    224 .probonoseo-card.pro-feature {
    225     background: #f7fbff;
    226     border-left: 4px solid #667eea;
    227 }
    228 
    229 .probonoseo-wrap .probonoseo-section .probonoseo-card .probonoseo-card-inner {
    230     display: grid !important;
    231     grid-template-columns: 63% 37% !important;
    232     gap: 32px !important;
    233     align-items: start !important;
    234 }
    235 
    236 .probonoseo-card-left {
    237     min-width: 0;
    238 }
    239 
    240 .probonoseo-card-right {
    241     min-width: 0;
    242 }
    243 
    244 .probonoseo-card-title {
    245     font-size: 17px;
    246     font-weight: 700;
    247     color: #1e1e1e;
    248     margin: 0 0 8px 0;
    249     line-height: 1.4;
    250 }
    251 
    252 .probonoseo-card.pro-feature .probonoseo-card-title {
    253     color: #667eea;
    254 }
    255 
    256 .probonoseo-card-title-pro {
    257     color: #667eea;
    258 }
    259 
    260 .probonoseo-card-description {
    261     font-size: 14px;
    262     color: #555;
    263     line-height: 1.7;
    264     margin: 0;
    265 }
    266 
    267 .probonoseo-toggle-container {
    268     display: flex;
    269     align-items: flex-start;
    270     justify-content: flex-end;
    271     width: 100%;
    272     min-width: 200px;
    273 }
    274 
    275 .probonoseo-license-card {
    276     background: #f9fafb;
    277     border: 2px solid #e0e0e0;
    278 }
    279 
    280 .probonoseo-license-block {
    281     display: flex;
    282     flex-direction: column;
    283     gap: 16px;
    284     align-items: center;
    285     text-align: center;
    286 }
    287 
    288 .probonoseo-license-card .probonoseo-card-inner {
    289     display: block !important;
    290 }
    291 
    292 .probonoseo-license-input-area {
    293     width: 100%;
    294     display: flex;
    295     justify-content: center;
    296     margin-top: 8px;
    297 }
    298 
    299 .probonoseo-license-input {
    300     width: 100%;
    301     max-width: 500px;
    302     padding: 14px 18px;
    303     font-size: 15px;
    304     border-radius: 6px;
    305     border: 2px solid #d1d5db;
    306     transition: all 0.3s ease;
    307     text-align: center;
    308 }
    309 
    310 .probonoseo-license-input:focus {
    311     outline: none;
    312     border-color: #4a90e2;
    313     box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
    314 }
    315 
    316 .probonoseo-license-input[readonly] {
    317     background: #f5f5f5;
    318     color: #666;
    319     cursor: not-allowed;
    320 }
    321 
    322 .probonoseo-cards-wrap {
    323     display: grid;
    324     grid-template-columns: 1fr 1fr;
    325     gap: 24px;
     1.probonoseo-diagnosis-layout {
     2    display: grid;
     3    grid-template-columns: 50% 50%;
     4    gap: 32px;
     5    align-items: start;
     6}
     7
     8.probonoseo-diagnosis-left {
     9    min-width: 0;
     10}
     11
     12.probonoseo-diagnosis-right {
     13    position: sticky;
     14    top: 32px;
     15    min-width: 0;
    32616}
    32717
    32818.probonoseo-diagnosis-button {
    329     background: #2271b1;
    330     color: #ffffff;
    331     border: none;
    332     padding: 0 30px;
    333     height: 40px;
    334     font-size: 16px;
    335     font-weight: 600;
    336     border-radius: 3px;
    337     cursor: pointer;
    338     transition: all 0.3s ease;
    339     box-shadow: 0 2px 8px rgba(34, 113, 177, 0.3);
    340 }
    341 
    342 .probonoseo-diagnosis-button:hover {
    343     background: #135e96;
    344 }
    345 
    346 .probonoseo-diagnosis-button:disabled {
    347     opacity: 0.7;
    348     cursor: default;
    349 }
    350 
    351 .probonoseo-dev-mode-card {
    352     background: #fffbeb;
    353     border: 2px solid #f59e0b;
    354     border-radius: 8px;
    355     padding: 24px 28px;
    356     margin-top: 24px;
    357     box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
    358 }
    359 
    360 .probonoseo-dev-mode-title {
    361     font-size: 16px;
    362     font-weight: 700;
    363     color: #b45309;
    364     margin: 0 0 12px 0;
    365     display: flex;
    366     align-items: center;
    367     gap: 8px;
    368 }
    369 
    370 .probonoseo-dev-mode-title .dashicons {
    371     color: #f59e0b;
    372 }
    373 
    374 .probonoseo-dev-mode-warning {
    375     font-size: 13px;
    376     color: #92400e;
    377     margin: 0 0 16px 0;
    378     padding: 8px 12px;
    379     background: #fef3c7;
    380     border-radius: 4px;
    381 }
    382 
    383 .probonoseo-dev-mode-features {
    384     margin: 0 0 20px 0;
    385     padding-left: 20px;
    386     color: #78350f;
    387     font-size: 13px;
    388     line-height: 1.8;
    389 }
    390 
    391 .probonoseo-dev-mode-features li {
    392     margin-bottom: 4px;
    393 }
    394 
    395 .probonoseo-dev-mode-button {
    396     background: #f59e0b;
    397     color: #ffffff;
    398     border: none;
    399     padding: 10px 20px;
    400     font-size: 14px;
    401     font-weight: 600;
    402     border-radius: 4px;
    403     cursor: pointer;
    404     transition: all 0.3s ease;
    405     display: inline-flex;
    406     align-items: center;
    407     gap: 6px;
    408 }
    409 
    410 .probonoseo-dev-mode-button:hover {
    411     background: #d97706;
    412     color: #ffffff;
    413 }
    414 
    415 .probonoseo-dev-mode-button .dashicons {
    416     font-size: 16px;
    417     width: 16px;
    418     height: 16px;
    419 }
    420 
    421 .probonoseo-purchase-note {
    422     text-align: left;
    423     margin-top: 12px;
    424     font-size: 12px;
    425     color: #666;
    426     line-height: 1.6;
    427 }
    428 
    429 .probonoseo-info-grid {
    430     display: grid;
    431     grid-template-columns: 1fr 1fr;
    432     gap: 24px;
    433 }
    434 
    435 .probonoseo-info-left {
    436     min-width: 0;
    437 }
    438 
    439 .probonoseo-info-right {
    440     min-width: 0;
    441 }
    442 
    443 .probonoseo-info-list {
    444     margin: 0;
    445     padding: 0;
    446 }
    447 
    448 .probonoseo-info-row {
    449     display: flex;
    450     justify-content: space-between;
    451     align-items: center;
    452     padding: 10px 0;
    453     border-bottom: 1px solid #f0f0f0;
    454 }
    455 
    456 .probonoseo-info-row:last-child {
    457     border-bottom: none;
    458 }
    459 
    460 .probonoseo-info-row-border {
    461     border-top: 1px solid #eee;
    462     padding-top: 12px;
    463     margin-top: 12px;
    464 }
    465 
    466 .probonoseo-info-label {
    467     font-size: 14px;
    468     color: #555;
    469 }
    470 
    471 .probonoseo-info-value {
    472     font-size: 14px;
    473     color: #1e1e1e;
    474     font-weight: 500;
    475 }
    476 
    477 .probonoseo-info-highlight {
    478     color: #4a90e2;
    479 }
    480 
    481 .probonoseo-status-pro {
    482     color: #22c55e;
    483     font-weight: 600;
    484 }
    485 
    486 .probonoseo-status-free {
    487     color: #888;
    488 }
    489 
    490 .probonoseo-upgrade-box {
    491     margin-top: 16px;
    492     padding: 12px 16px;
    493     background: #f0f7ff;
    494     border-radius: 6px;
    495     border: 1px solid #4a90e2;
    496 }
    497 
    498 .probonoseo-upgrade-text {
    499     margin: 0 0 10px 0;
    500     font-size: 13px;
    501     color: #333;
    502     line-height: 1.6;
    503 }
    504 
    505 .probonoseo-upgrade-link {
    506     display: inline-block;
    507     color: #4a90e2;
    508     font-weight: 600;
    509     font-size: 13px;
    510     text-decoration: none;
    511 }
    512 
    513 .probonoseo-upgrade-link:hover {
    514     text-decoration: underline;
    515     color: #2271b1;
    516 }
    517 
    518 .probonoseo-card-action {
    519     margin-top: 16px;
    520 }
    521 
    522 .probonoseo-file-input {
    523     margin-bottom: 12px;
    524     display: block;
    525 }
    526 
    527 .probonoseo-btn-icon {
    528     vertical-align: middle;
    529     margin-right: 4px;
    530 }
    531 
    532 .probonoseo-card-danger {
    533     border-left: 4px solid #dc3232;
    534 }
    535 
    536 .probonoseo-card-title-danger {
    537     color: #dc3232;
    538 }
    539 
    540 .probonoseo-button-danger {
    541     color: #dc3232;
    542     border-color: #dc3232;
    543 }
    544 
    545 .probonoseo-button-danger:hover {
    546     background: #dc3232;
    547     color: #fff;
    548 }
    549 
    550 .probonoseo-reset-buttons {
    551     display: flex;
    552     gap: 12px;
    553     flex-wrap: wrap;
    554 }
    555 
    556 .probonoseo-backup-list {
    557     margin-top: 16px;
    558 }
    559 
    560 .probonoseo-backup-list-title {
    561     margin: 0 0 10px 0;
    562     font-size: 13px;
    563     font-weight: 600;
    564 }
    565 
    566 .probonoseo-backup-table {
    567     font-size: 12px;
    568 }
    569 
    570 .probonoseo-notice {
    571     margin: 15px 0;
     19    width: 100%;
     20    max-width: 300px;
     21}
     22
     23.probonoseo-diagnosis-results h3 {
     24    font-size: 16px;
     25    margin-bottom: 12px;
     26    color: #1e1e1e;
     27    font-weight: 600;
     28}
     29
     30#probonoseo-diagnosis-output {
     31    background: #f9f9f9;
     32    padding: 20px;
     33    border-radius: 5px;
     34    min-height: 200px;
     35    border: 1px solid #e0e0e0;
     36}
     37
     38@media screen and (max-width: 900px) {
     39    .probonoseo-diagnosis-layout {
     40        grid-template-columns: 1fr !important;
     41    }
     42    .probonoseo-diagnosis-right {
     43        position: static !important;
     44    }
     45}
     46
     47.probonoseo-license-wrap {
     48    padding: 20px 0;
    57249}
    57350
    57451.probonoseo-license-grid {
    575     display: grid;
    576     grid-template-columns: 1fr 1fr;
    577     gap: 24px;
     52    display: grid;
     53    grid-template-columns: 60% 40%;
     54    gap: 30px;
    57855}
    57956
    58057.probonoseo-license-left {
    581     display: flex;
    582     flex-direction: column;
    583     gap: 24px;
     58    min-width: 0;
    58459}
    58560
    58661.probonoseo-license-right {
    587     min-width: 0;
    588 }
    589 
    590 .probonoseo-card-sticky {
    591     position: sticky;
    592     top: 32px;
    593 }
    594 
    595 .probonoseo-pro-preview-card {
    596     background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    597     border: 1px solid #e0e7ff;
    598 }
    599 
    600 .probonoseo-pro-preview-card .probonoseo-card-description {
    601     margin-bottom: 20px;
    602 }
    603 
    604 .probonoseo-pro-preview-grid {
    605     display: grid;
    606     grid-template-columns: 1fr 1fr;
    607     gap: 12px;
    608 }
    609 
    610 .probonoseo-pro-preview-item {
    611     display: flex;
    612     justify-content: space-between;
    613     align-items: center;
    614     background: #fff;
    615     padding: 12px 16px;
    616     border-radius: 6px;
    617     border: 1px solid #e5e7eb;
    618 }
    619 
    620 .probonoseo-pro-preview-label {
    621     font-size: 13px;
    622     color: #374151;
    623     font-weight: 500;
    624 }
    625 
    626 .probonoseo-pro-preview-badge {
    627     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    628     color: #fff;
    629     font-size: 10px;
    630     padding: 3px 8px;
    631     border-radius: 4px;
    632     font-weight: 600;
     62    min-width: 0;
     63}
     64
     65.probonoseo-license-status {
     66    padding: 20px;
     67    border-radius: 8px;
     68    margin-bottom: 25px;
     69    text-align: center;
     70}
     71
     72.probonoseo-license-active {
     73    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
     74    border: 2px solid #4caf50;
     75}
     76
     77.probonoseo-license-inactive {
     78    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     79    border: 2px solid #ff9800;
     80}
     81
     82.probonoseo-license-dev {
     83    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
     84    border: 2px solid #2196f3;
     85}
     86
     87.probonoseo-license-status .dashicons {
     88    font-size: 48px;
     89    width: 48px;
     90    height: 48px;
     91    margin-bottom: 10px;
     92}
     93
     94.probonoseo-license-active .dashicons {
     95    color: #4caf50;
     96}
     97
     98.probonoseo-license-inactive .dashicons {
     99    color: #ff9800;
     100}
     101
     102.probonoseo-license-dev .dashicons {
     103    color: #2196f3;
     104}
     105
     106.probonoseo-license-status strong {
     107    display: block;
     108    font-size: 18px;
     109    margin-bottom: 8px;
     110}
     111
     112.probonoseo-license-status p {
     113    margin: 0;
     114    color: #666;
     115}
     116
     117.probonoseo-license-info {
     118    background: #f8f9fa;
     119    border-radius: 8px;
     120    padding: 20px;
     121    margin-bottom: 25px;
     122}
     123
     124.probonoseo-license-info-row {
     125    display: flex;
     126    justify-content: space-between;
     127    padding: 12px 0;
     128    border-bottom: 1px solid #e0e0e0;
     129}
     130
     131.probonoseo-license-info-row:last-child {
     132    border-bottom: none;
     133}
     134
     135.probonoseo-license-info-label {
     136    font-weight: 600;
     137    color: #555;
     138}
     139
     140.probonoseo-license-info-value {
     141    color: #333;
     142}
     143
     144.probonoseo-license-form {
     145    margin-bottom: 25px;
     146}
     147
     148.probonoseo-license-actions {
     149    display: flex;
     150    gap: 15px;
     151    justify-content: center;
     152}
     153
     154.probonoseo-license-actions .button {
     155    display: inline-flex;
     156    align-items: center;
     157    gap: 5px;
     158}
     159
     160.probonoseo-license-actions .dashicons {
     161    font-size: 18px;
     162    width: 18px;
     163    height: 18px;
     164}
     165
     166.probonoseo-dev-mode-section {
     167    background: #e3f2fd;
     168    border: 2px solid #2196f3;
     169    border-radius: 8px;
     170    padding: 20px;
     171    text-align: center;
     172}
     173
     174.probonoseo-dev-mode-section h3 {
     175    margin: 0 0 10px 0;
     176    font-size: 16px;
     177    color: #1976d2;
     178}
     179
     180.probonoseo-dev-mode-section p {
     181    margin: 0 0 15px 0;
     182    color: #666;
     183    font-size: 13px;
    633184}
    634185
    635186.probonoseo-total-features {
    636     display: flex;
    637     align-items: center;
    638     justify-content: center;
    639     gap: 12px;
    640     padding: 20px;
    641     background: #f9fafb;
    642     border-radius: 8px;
    643     margin-bottom: 20px;
     187    display: flex;
     188    align-items: center;
     189    justify-content: center;
     190    gap: 8px;
     191    padding: 15px 10px;
     192    background: linear-gradient(135deg, #f0f4ff 0%, #e8f1ff 100%);
     193    border: 2px solid #4a90e2;
     194    border-radius: 8px;
     195    margin-bottom: 15px;
    644196}
    645197
    646198.probonoseo-feature-count {
    647     text-align: center;
     199    display: flex;
     200    flex-direction: column;
     201    align-items: center;
     202    gap: 2px;
     203}
     204
     205.probonoseo-feature-total {
     206    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
     207    padding: 8px 12px;
     208    border-radius: 6px;
    648209}
    649210
    650211.probonoseo-count-label {
    651     display: block;
    652     font-size: 12px;
    653     color: #666;
    654     margin-bottom: 4px;
     212    font-size: 10px;
     213    font-weight: 600;
     214    color: #666;
     215    text-transform: uppercase;
     216    letter-spacing: 0.3px;
     217    white-space: nowrap;
     218}
     219
     220.probonoseo-feature-total .probonoseo-count-label {
     221    color: rgba(255,255,255,0.9);
    655222}
    656223
    657224.probonoseo-count-number {
    658     font-size: 20px;
    659     font-weight: 700;
    660     color: #1e1e1e;
     225    font-size: 16px;
     226    font-weight: 700;
     227    color: #333;
     228    line-height: 1;
     229    white-space: nowrap;
    661230}
    662231
    663232.probonoseo-count-pro {
    664     color: #667eea;
     233    color: #4a90e2;
    665234}
    666235
    667236.probonoseo-count-total {
    668     color: #22c55e;
     237    color: #ffffff;
     238    font-size: 18px;
    669239}
    670240
    671241.probonoseo-feature-plus,
    672242.probonoseo-feature-equals {
    673     font-size: 20px;
    674     font-weight: 700;
    675     color: #999;
    676 }
    677 
    678 .probonoseo-feature-total {
    679     background: #ecfdf5;
    680     padding: 8px 16px;
    681     border-radius: 6px;
    682 }
    683 
    684 .probonoseo-pro-features h4 {
    685     font-size: 14px;
    686     font-weight: 600;
    687     color: #1e1e1e;
    688     margin: 0 0 12px 0;
    689 }
    690 
    691 .probonoseo-pro-features ul {
    692     margin: 0;
    693     padding: 0 0 0 20px;
    694     font-size: 13px;
    695     color: #555;
    696     line-height: 1.8;
     243    font-size: 14px;
     244    font-weight: 700;
     245    color: #4a90e2;
     246}
     247
     248.probonoseo-feature-description {
     249    text-align: center;
     250    font-size: 12px;
     251    color: #555;
     252    margin: 0 0 15px 0;
     253    padding: 0 5px;
     254    line-height: 1.5;
     255}
     256
     257.probonoseo-pro-features {
     258    margin-top: 20px;
     259}
     260
     261.probonoseo-pro-feature-category {
     262    margin-bottom: 25px;
     263    padding-bottom: 20px;
     264    border-bottom: 1px solid #e0e0e0;
     265}
     266
     267.probonoseo-pro-feature-category:last-child {
     268    border-bottom: none;
     269    margin-bottom: 0;
     270}
     271
     272.probonoseo-pro-feature-category h4 {
     273    margin: 0 0 12px 0;
     274    font-size: 15px;
     275    color: #4a90e2;
     276    font-weight: 600;
     277}
     278
     279.probonoseo-pro-feature-category ul {
     280    margin: 0;
     281    padding-left: 20px;
     282    list-style: disc;
     283}
     284
     285.probonoseo-pro-feature-category li {
     286    margin-bottom: 6px;
     287    color: #555;
     288    font-size: 13px;
    697289}
    698290
    699291.probonoseo-pro-purchase {
    700     margin-top: 24px;
    701     padding-top: 24px;
    702     border-top: 1px solid #e0e0e0;
     292    background: linear-gradient(135deg, #f7fbff 0%, #e3f2fd 100%);
     293    border: 2px solid #4a90e2;
     294    border-radius: 8px;
     295    padding: 25px;
     296    text-align: center;
     297    margin-top: 25px;
    703298}
    704299
    705300.probonoseo-pro-purchase h4 {
    706     font-size: 14px;
    707     font-weight: 600;
    708     color: #1e1e1e;
    709     margin: 0 0 16px 0;
    710     text-align: center;
     301    margin: 0 0 20px 0;
     302    font-size: 16px;
    711303}
    712304
    713305.probonoseo-pricing-plans {
    714     display: grid;
    715     grid-template-columns: 1fr 1fr;
    716     gap: 12px;
    717     margin-bottom: 16px;
     306    display: flex;
     307    gap: 12px;
     308    margin-bottom: 20px;
    718309}
    719310
    720311.probonoseo-plan {
    721     background: #f9fafb;
    722     border: 1px solid #e0e0e0;
    723     border-radius: 8px;
    724     padding: 16px;
    725     text-align: center;
    726     position: relative;
     312    flex: 1;
     313    background: white;
     314    border: 2px solid #e0e0e0;
     315    border-radius: 8px;
     316    padding: 18px 12px;
     317    position: relative;
    727318}
    728319
    729320.probonoseo-plan-popular {
    730     background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
    731     border-color: #667eea;
     321    border-color: #4a90e2;
     322    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
    732323}
    733324
    734325.probonoseo-plan-badge {
    735     position: absolute;
    736     top: -10px;
    737     left: 50%;
    738     transform: translateX(-50%);
    739     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    740     color: #fff;
    741     font-size: 10px;
    742     padding: 4px 12px;
    743     border-radius: 12px;
    744     font-weight: 600;
     326    position: absolute;
     327    top: -10px;
     328    left: 50%;
     329    transform: translateX(-50%);
     330    background: #4a90e2;
     331    color: white;
     332    font-size: 10px;
     333    font-weight: 600;
     334    padding: 3px 12px;
     335    border-radius: 12px;
     336    white-space: nowrap;
    745337}
    746338
    747339.probonoseo-plan-name {
    748     font-size: 13px;
    749     font-weight: 600;
    750     color: #374151;
    751     margin-bottom: 8px;
     340    font-size: 13px;
     341    font-weight: 600;
     342    color: #555;
     343    margin-bottom: 8px;
    752344}
    753345
    754346.probonoseo-plan-price {
    755     font-size: 24px;
    756     font-weight: 700;
    757     color: #1e1e1e;
    758     margin-bottom: 4px;
     347    font-size: 24px;
     348    font-weight: 700;
     349    color: #4a90e2;
     350    margin-bottom: 6px;
     351    line-height: 1;
    759352}
    760353
    761354.probonoseo-plan-sites {
    762     font-size: 12px;
    763     color: #666;
     355    font-size: 11px;
     356    color: #666;
    764357}
    765358
    766359.probonoseo-plan-note {
    767     text-align: center;
    768     font-size: 12px;
    769     color: #666;
    770     margin: 0 0 16px 0;
    771 }
    772 
    773 .probonoseo-buy-button {
    774     display: block;
    775     text-align: center;
    776     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    777     color: #fff;
    778     font-size: 16px;
    779     padding: 16px 32px;
    780     border-radius: 8px;
    781     text-decoration: none;
    782     font-weight: 600;
    783     transition: all 0.3s ease;
    784 }
    785 
    786 .probonoseo-buy-button:hover {
    787     transform: translateY(-2px);
    788     box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    789     color: #fff;
    790 }
    791 
    792 @media screen and (max-width: 900px) {
    793     .probonoseo-cards-wrap {
    794         grid-template-columns: 1fr;
    795     }
    796     .probonoseo-info-grid {
    797         grid-template-columns: 1fr;
    798     }
    799     .probonoseo-license-grid {
    800         grid-template-columns: 1fr;
    801     }
    802     .probonoseo-pro-preview-grid {
    803         grid-template-columns: 1fr;
    804     }
    805     .probonoseo-pricing-plans {
    806         grid-template-columns: 1fr;
    807     }
    808 }
    809 
    810 @media screen and (max-width: 900px) {
    811     .probonoseo-wrap .probonoseo-section .probonoseo-card .probonoseo-card-inner {
    812         grid-template-columns: 1fr !important;
    813         gap: 20px !important;
    814     }
    815     .probonoseo-toggle-container {
    816         justify-content: flex-start;
    817     }
    818     .probonoseo-wrap {
    819         padding: 0 20px;
    820     }
    821     .probonoseo-header {
    822         padding: 24px 28px;
    823     }
    824     .probonoseo-section-subtitle {
    825         padding-left: 10px;
    826     }
    827     .nav-tab-wrapper {
    828         flex-direction: column;
    829         gap: 4px;
    830     }
    831     .nav-tab {
    832         margin-bottom: 0;
    833         border-bottom: 1px solid #ccd0d4;
    834     }
    835     .nav-tab-active {
    836         border-bottom-color: #ccd0d4;
    837     }
    838 }
    839 
    840 @media screen and (max-width: 480px) {
    841     .probonoseo-title {
    842         font-size: 24px;
    843     }
    844     .probonoseo-subtitle {
    845         font-size: 13px;
    846     }
    847     .probonoseo-card {
    848         padding: 20px 18px;
    849     }
    850     .probonoseo-license-input {
    851         max-width: 100%;
    852     }
    853     .probonoseo-save-btn {
    854         padding: 10px 24px;
    855         font-size: 14px;
    856     }
    857     .probonoseo-section-subtitle {
    858         font-size: 15px;
    859         padding-left: 0;
    860     }
    861     .nav-tab {
    862         font-size: 12px;
    863         padding: 6px 10px;
    864     }
    865     .probonoseo-dev-mode-card {
    866         padding: 20px;
    867     }
    868     .probonoseo-reset-buttons {
    869         flex-direction: column;
    870     }
    871     .probonoseo-total-features {
    872         flex-wrap: wrap;
    873     }
    874 }
     360    font-size: 12px;
     361    color: #666;
     362    margin: 0 0 15px 0;
     363}
     364
     365.probonoseo-pro-purchase .button-hero {
     366    padding: 12px 36px;
     367    height: auto;
     368    font-size: 16px;
     369}
     370
     371@media (max-width: 1200px) {
     372    .probonoseo-license-grid {
     373        grid-template-columns: 1fr;
     374    }
     375}
     376
     377.probonoseo-openai-wrap {
     378    padding: 20px 0;
     379}
     380
     381.probonoseo-openai-grid {
     382    display: grid;
     383    grid-template-columns: 60% 40%;
     384    gap: 30px;
     385}
     386
     387.probonoseo-openai-left {
     388    min-width: 0;
     389}
     390
     391.probonoseo-openai-right {
     392    min-width: 0;
     393}
     394
     395.probonoseo-api-status {
     396    padding: 20px;
     397    border-radius: 8px;
     398    margin-bottom: 25px;
     399    text-align: center;
     400}
     401
     402.probonoseo-api-active {
     403    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
     404    border: 2px solid #4caf50;
     405}
     406
     407.probonoseo-api-inactive {
     408    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     409    border: 2px solid #ff9800;
     410}
     411
     412.probonoseo-api-status .dashicons {
     413    font-size: 48px;
     414    width: 48px;
     415    height: 48px;
     416    margin-bottom: 10px;
     417}
     418
     419.probonoseo-api-active .dashicons {
     420    color: #4caf50;
     421}
     422
     423.probonoseo-api-inactive .dashicons {
     424    color: #ff9800;
     425}
     426
     427.probonoseo-api-status strong {
     428    display: block;
     429    font-size: 18px;
     430    margin-bottom: 8px;
     431}
     432
     433.probonoseo-api-status p {
     434    margin: 0;
     435    color: #666;
     436}
     437
     438.probonoseo-api-info {
     439    background: #f8f9fa;
     440    border-radius: 8px;
     441    padding: 20px;
     442    margin-bottom: 25px;
     443}
     444
     445.probonoseo-api-info-row {
     446    display: flex;
     447    justify-content: space-between;
     448    padding: 12px 0;
     449}
     450
     451.probonoseo-api-info-label {
     452    font-weight: 600;
     453    color: #555;
     454}
     455
     456.probonoseo-api-info-value {
     457    color: #333;
     458    font-family: monospace;
     459}
     460
     461.probonoseo-api-actions {
     462    display: flex;
     463    gap: 15px;
     464}
     465
     466.probonoseo-api-actions .button {
     467    display: inline-flex;
     468    align-items: center;
     469    gap: 5px;
     470}
     471
     472.probonoseo-usage-stats {
     473    background: #f8f9fa;
     474    border-radius: 8px;
     475    padding: 20px;
     476    margin-bottom: 20px;
     477}
     478
     479.probonoseo-usage-stat {
     480    display: flex;
     481    justify-content: space-between;
     482    margin-bottom: 10px;
     483}
     484
     485.probonoseo-usage-label {
     486    font-weight: 600;
     487    color: #555;
     488}
     489
     490.probonoseo-usage-value {
     491    color: #4a90e2;
     492    font-weight: bold;
     493}
     494
     495.probonoseo-usage-progress {
     496    height: 10px;
     497    background: #e0e0e0;
     498    border-radius: 5px;
     499    overflow: hidden;
     500    margin-bottom: 10px;
     501}
     502
     503.probonoseo-usage-bar {
     504    height: 100%;
     505    background: linear-gradient(90deg, #4a90e2 0%, #357abd 100%);
     506    transition: width 0.3s ease;
     507}
     508
     509.probonoseo-feature-list {
     510    margin: 15px 0;
     511    padding-left: 20px;
     512    list-style: disc;
     513}
     514
     515.probonoseo-feature-list li {
     516    margin-bottom: 8px;
     517    color: #555;
     518    font-size: 13px;
     519}
     520
     521.probonoseo-steps {
     522    margin: 15px 0;
     523    padding-left: 20px;
     524}
     525
     526.probonoseo-steps li {
     527    margin-bottom: 8px;
     528    color: #555;
     529    font-size: 13px;
     530}
     531
     532.probonoseo-pricing-list {
     533    margin: 15px 0;
     534    padding-left: 20px;
     535    list-style: disc;
     536}
     537
     538.probonoseo-pricing-list li {
     539    margin-bottom: 8px;
     540    color: #555;
     541    font-size: 13px;
     542}
     543
     544.probonoseo-api-warning {
     545    background: #e3f2fd;
     546    border-left: 4px solid #2196f3;
     547    padding: 15px;
     548    margin-top: 20px;
     549    display: flex;
     550    align-items: flex-start;
     551    gap: 10px;
     552}
     553
     554.probonoseo-api-warning .dashicons {
     555    color: #2196f3;
     556    flex-shrink: 0;
     557}
     558
     559.probonoseo-api-warning p {
     560    margin: 0;
     561    color: #555;
     562    font-size: 13px;
     563}
     564
     565.probonoseo-pro-lock {
     566    text-align: center;
     567    padding: 60px 20px;
     568}
     569
     570.probonoseo-pro-lock-icon {
     571    margin-bottom: 20px;
     572}
     573
     574.probonoseo-pro-lock-icon .dashicons {
     575    font-size: 100px;
     576    width: 100px;
     577    height: 100px;
     578    color: #ccc;
     579}
     580
     581.probonoseo-pro-lock h2 {
     582    font-size: 28px;
     583    margin-bottom: 15px;
     584}
     585
     586.probonoseo-pro-lock p {
     587    font-size: 16px;
     588    color: #666;
     589    margin-bottom: 30px;
     590}
     591
     592@media (max-width: 1200px) {
     593    .probonoseo-openai-grid {
     594        grid-template-columns: 1fr;
     595    }
     596}
     597
     598.probonoseo-card-sticky {
     599    position: sticky;
     600    top: 32px;
     601}
     602
     603.probonoseo-form-group {
     604    margin-bottom: 25px;
     605}
     606
     607.probonoseo-form-group label {
     608    display: block;
     609    font-weight: 600;
     610    margin-bottom: 8px;
     611    color: #333;
     612}
     613
     614.probonoseo-form-group input,
     615.probonoseo-form-group select {
     616    width: 100%;
     617}
     618
     619.probonoseo-form-group .small-text {
     620    width: 120px;
     621}
     622
     623.dashicons.spin {
     624    animation: spin 1s linear infinite;
     625}
     626
     627@keyframes spin {
     628    from { transform: rotate(0deg); }
     629    to { transform: rotate(360deg); }
     630}
     631
     632@media (max-width: 1200px) {
     633    .probonoseo-card-sticky {
     634        position: static;
     635    }
     636}
     637
     638.probonoseo-manage-wrap {
     639    padding: 20px 0;
     640}
     641
     642.probonoseo-manage-grid {
     643    display: grid;
     644    grid-template-columns: 60% 40%;
     645    gap: 30px;
     646}
     647
     648.probonoseo-manage-left {
     649    min-width: 0;
     650}
     651
     652.probonoseo-manage-right {
     653    min-width: 0;
     654}
     655
     656.probonoseo-info-list {
     657    margin-top: 16px;
     658}
     659
     660.probonoseo-info-row {
     661    display: flex;
     662    justify-content: space-between;
     663    padding: 12px 0;
     664    border-bottom: 1px solid #e0e0e0;
     665}
     666
     667.probonoseo-info-row:last-child {
     668    border-bottom: none;
     669}
     670
     671.probonoseo-info-label {
     672    font-weight: 600;
     673    color: #555;
     674}
     675
     676.probonoseo-info-value {
     677    color: #333;
     678}
     679
     680@media (max-width: 1200px) {
     681    .probonoseo-manage-grid {
     682        grid-template-columns: 1fr;
     683    }
     684}
     685
     686.probonoseo-competitor-grid {
     687    display: grid;
     688    grid-template-columns: 40% 60%;
     689    gap: 20px;
     690    margin-bottom: 30px;
     691}
     692
     693.probonoseo-competitor-col-left {
     694    display: flex;
     695    flex-direction: column;
     696    gap: 15px;
     697}
     698
     699.probonoseo-competitor-col-right {
     700    min-width: 0;
     701}
     702
     703.probonoseo-competitor-box {
     704    background: #fff;
     705    border: 1px solid #e0e0e0;
     706    border-radius: 8px;
     707    padding: 16px;
     708}
     709
     710.probonoseo-competitor-box-sticky {
     711    position: sticky;
     712    top: 32px;
     713}
     714
     715.probonoseo-competitor-box-title {
     716    font-size: 14px;
     717    font-weight: 600;
     718    color: #333;
     719    margin: 0 0 12px 0;
     720}
     721
     722.probonoseo-competitor-list {
     723    display: flex;
     724    flex-direction: column;
     725    gap: 8px;
     726}
     727
     728.probonoseo-competitor-row {
     729    display: flex;
     730    align-items: center;
     731    gap: 8px;
     732}
     733
     734.probonoseo-competitor-num {
     735    width: 22px;
     736    height: 22px;
     737    background: #4a90e2;
     738    color: #fff;
     739    border-radius: 50%;
     740    display: flex;
     741    align-items: center;
     742    justify-content: center;
     743    font-size: 11px;
     744    font-weight: bold;
     745    flex-shrink: 0;
     746}
     747
     748.probonoseo-competitor-input {
     749    flex: 1;
     750    padding: 6px 10px;
     751    border: 1px solid #ddd;
     752    border-radius: 4px;
     753    font-size: 13px;
     754    min-width: 0;
     755}
     756
     757.probonoseo-competitor-input:focus {
     758    border-color: #4a90e2;
     759    outline: none;
     760}
     761
     762.probonoseo-competitor-del {
     763    width: 24px;
     764    height: 24px;
     765    border: none;
     766    background: #dc3545;
     767    color: #fff;
     768    border-radius: 4px;
     769    cursor: pointer;
     770    font-size: 14px;
     771    line-height: 1;
     772    flex-shrink: 0;
     773}
     774
     775.probonoseo-competitor-del:hover {
     776    background: #c82333;
     777}
     778
     779.probonoseo-competitor-btns {
     780    display: flex;
     781    gap: 8px;
     782    margin-top: 12px;
     783}
     784
     785.probonoseo-competitor-input-full {
     786    width: 100%;
     787    padding: 8px 10px;
     788    border: 1px solid #ddd;
     789    border-radius: 4px;
     790    font-size: 13px;
     791}
     792
     793.probonoseo-competitor-input-full:focus {
     794    border-color: #4a90e2;
     795    outline: none;
     796}
     797
     798.probonoseo-competitor-checks {
     799    display: grid;
     800    grid-template-columns: repeat(3, 1fr);
     801    gap: 6px 12px;
     802    margin-bottom: 16px;
     803}
     804
     805.probonoseo-competitor-checks label {
     806    display: flex;
     807    align-items: center;
     808    gap: 5px;
     809    font-size: 12px;
     810    color: #555;
     811    cursor: pointer;
     812    white-space: nowrap;
     813}
     814
     815.probonoseo-competitor-checks input[type="checkbox"] {
     816    margin: 0;
     817    flex-shrink: 0;
     818}
     819
     820.probonoseo-competitor-run {
     821    text-align: center;
     822}
     823
     824.probonoseo-competitor-results {
     825    min-height: 250px;
     826    max-height: 450px;
     827    overflow-y: auto;
     828}
     829
     830.probonoseo-competitor-results-empty,
     831.probonoseo-competitor-results-loading,
     832.probonoseo-competitor-results-error {
     833    display: flex;
     834    flex-direction: column;
     835    align-items: center;
     836    justify-content: center;
     837    min-height: 230px;
     838    color: #888;
     839    text-align: center;
     840}
     841
     842.probonoseo-competitor-results-empty .dashicons {
     843    font-size: 40px;
     844    width: 40px;
     845    height: 40px;
     846    margin-bottom: 12px;
     847    color: #ccc;
     848}
     849
     850.probonoseo-competitor-results-empty p {
     851    margin: 0;
     852    font-size: 13px;
     853}
     854
     855.probonoseo-competitor-results-loading .dashicons {
     856    font-size: 32px;
     857    width: 32px;
     858    height: 32px;
     859    color: #4a90e2;
     860}
     861
     862.probonoseo-competitor-results-error {
     863    color: #dc3545;
     864    font-size: 13px;
     865}
     866
     867.probonoseo-competitor-report {
     868    margin-top: 16px;
     869    padding-top: 16px;
     870    border-top: 1px solid #e0e0e0;
     871    text-align: center;
     872}
     873
     874.probonoseo-competitor-settings-title {
     875    font-size: 15px;
     876    font-weight: 600;
     877    color: #333;
     878    margin: 0 0 16px 0;
     879    padding-top: 15px;
     880    border-top: 1px solid #e0e0e0;
     881}
     882
     883.probonoseo-competitor-msg {
     884    padding: 8px 12px;
     885    border-radius: 4px;
     886    margin-top: 10px;
     887    font-size: 12px;
     888}
     889
     890.probonoseo-competitor-msg.success {
     891    background: #d4edda;
     892    color: #155724;
     893}
     894
     895.probonoseo-competitor-msg.error {
     896    background: #f8d7da;
     897    color: #721c24;
     898}
     899
     900.probonoseo-results-container {
     901    display: flex;
     902    flex-direction: column;
     903    gap: 16px;
     904}
     905
     906.probonoseo-result-section {
     907    background: #f9f9f9;
     908    border-radius: 6px;
     909    padding: 12px;
     910}
     911
     912.probonoseo-result-section-title {
     913    margin: 0 0 10px 0;
     914    font-size: 13px;
     915    color: #333;
     916    display: flex;
     917    align-items: center;
     918    gap: 6px;
     919    font-weight: 600;
     920}
     921
     922.probonoseo-result-section-title .dashicons {
     923    color: #4a90e2;
     924    font-size: 16px;
     925    width: 16px;
     926    height: 16px;
     927}
     928
     929.probonoseo-comparison-table {
     930    width: 100%;
     931    border-collapse: collapse;
     932    font-size: 12px;
     933}
     934
     935.probonoseo-comparison-table th,
     936.probonoseo-comparison-table td {
     937    padding: 6px 8px;
     938    border: 1px solid #ddd;
     939    text-align: center;
     940}
     941
     942.probonoseo-comparison-table th {
     943    background: #4a90e2;
     944    color: #fff;
     945    font-weight: bold;
     946    font-size: 11px;
     947}
     948
     949.probonoseo-comparison-table th.target-col {
     950    background: #28a745;
     951}
     952
     953.probonoseo-comparison-table td:first-child {
     954    text-align: left;
     955    font-weight: bold;
     956    background: #f5f5f5;
     957    white-space: nowrap;
     958}
     959
     960.probonoseo-score-wrap {
     961    display: flex;
     962    flex-wrap: wrap;
     963    gap: 10px;
     964}
     965
     966.probonoseo-score-item {
     967    flex: 1;
     968    min-width: 80px;
     969    background: #fff;
     970    border: 1px solid #ddd;
     971    border-radius: 6px;
     972    padding: 10px;
     973    text-align: center;
     974}
     975
     976.probonoseo-score-item.target {
     977    border-color: #28a745;
     978    background: #f0fff4;
     979}
     980
     981.probonoseo-score-label {
     982    font-size: 10px;
     983    color: #666;
     984    margin-bottom: 4px;
     985}
     986
     987.probonoseo-score-value {
     988    font-size: 22px;
     989    font-weight: bold;
     990    color: #333;
     991}
     992
     993.probonoseo-score-value.good {
     994    color: #28a745;
     995}
     996
     997.probonoseo-score-value.warning {
     998    color: #ffc107;
     999}
     1000
     1001.probonoseo-score-value.bad {
     1002    color: #dc3545;
     1003}
     1004
     1005.probonoseo-pro-notice {
     1006    background: #fff3cd;
     1007    border: 1px solid #ffc107;
     1008    border-radius: 8px;
     1009    padding: 20px;
     1010    text-align: center;
     1011    color: #856404;
     1012}
     1013
     1014@media (max-width: 900px) {
     1015    .probonoseo-competitor-grid {
     1016        grid-template-columns: 1fr;
     1017    }
     1018
     1019    .probonoseo-competitor-box-sticky {
     1020        position: static;
     1021    }
     1022
     1023    .probonoseo-competitor-checks {
     1024        grid-template-columns: repeat(2, 1fr);
     1025    }
     1026}
     1027
     1028.probonoseo-pro-enhance-grid {
     1029    display: grid;
     1030    grid-template-columns: 1.7fr 1fr;
     1031    gap: 30px;
     1032    margin-bottom: 30px;
     1033}
     1034
     1035.probonoseo-pro-enhance-left {
     1036    display: flex;
     1037    flex-direction: column;
     1038    gap: 20px;
     1039}
     1040
     1041.probonoseo-pro-enhance-right {
     1042    min-width: 0;
     1043}
     1044
     1045.probonoseo-pro-detail-section {
     1046    margin-top: 40px;
     1047    padding-top: 30px;
     1048    border-top: 2px solid #e0e0e0;
     1049}
     1050
     1051.probonoseo-detail-section-title {
     1052    font-size: 20px;
     1053    font-weight: 600;
     1054    color: #333;
     1055    margin: 0 0 25px 0;
     1056}
     1057
     1058.probonoseo-detail-card-title {
     1059    font-size: 15px;
     1060    font-weight: 600;
     1061    color: #4a90e2;
     1062    margin: 0 0 20px 0;
     1063    padding-bottom: 12px;
     1064    border-bottom: 1px solid #e0e0e0;
     1065}
     1066
     1067.probonoseo-detail-form-row {
     1068    display: grid;
     1069    grid-template-columns: 1fr 1fr;
     1070    gap: 20px;
     1071    margin-bottom: 16px;
     1072}
     1073
     1074.probonoseo-detail-form-row:last-child {
     1075    margin-bottom: 0;
     1076}
     1077
     1078.probonoseo-detail-form-row-single {
     1079    grid-template-columns: 1fr;
     1080}
     1081
     1082.probonoseo-detail-form-item {
     1083    min-width: 0;
     1084}
     1085
     1086.probonoseo-detail-form-item-full {
     1087    grid-column: 1 / -1;
     1088}
     1089
     1090.probonoseo-detail-form-item label {
     1091    display: block;
     1092    font-weight: 600;
     1093    margin-bottom: 8px;
     1094    color: #333;
     1095    font-size: 13px;
     1096}
     1097
     1098.probonoseo-detail-form-item input[type="text"],
     1099.probonoseo-detail-form-item input[type="url"],
     1100.probonoseo-detail-form-item input[type="password"],
     1101.probonoseo-detail-form-item select,
     1102.probonoseo-detail-form-item textarea {
     1103    width: 100%;
     1104    max-width: 100%;
     1105}
     1106
     1107.probonoseo-detail-form-item .description {
     1108    margin-top: 6px;
     1109    font-size: 12px;
     1110    color: #666;
     1111}
     1112
     1113.probonoseo-gsc-status-box {
     1114    display: flex;
     1115    align-items: center;
     1116    justify-content: center;
     1117    gap: 10px;
     1118    padding: 15px;
     1119    border-radius: 8px;
     1120    margin-bottom: 20px;
     1121}
     1122
     1123.probonoseo-gsc-status-box.connected {
     1124    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
     1125    border: 1px solid #4caf50;
     1126}
     1127
     1128.probonoseo-gsc-status-box.disconnected {
     1129    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     1130    border: 1px solid #ff9800;
     1131}
     1132
     1133.probonoseo-gsc-status-box .dashicons {
     1134    font-size: 24px;
     1135    width: 24px;
     1136    height: 24px;
     1137}
     1138
     1139.probonoseo-gsc-status-box.connected .dashicons {
     1140    color: #4caf50;
     1141}
     1142
     1143.probonoseo-gsc-status-box.disconnected .dashicons {
     1144    color: #ff9800;
     1145}
     1146
     1147.probonoseo-gsc-status-box strong {
     1148    font-size: 15px;
     1149}
     1150
     1151.probonoseo-card-right input[type="text"],
     1152.probonoseo-card-right input[type="url"],
     1153.probonoseo-card-right input[type="password"],
     1154.probonoseo-card-right select,
     1155.probonoseo-card-right textarea {
     1156    width: 100%;
     1157    max-width: 100%;
     1158    box-sizing: border-box;
     1159}
     1160
     1161.probonoseo-card-right textarea {
     1162    min-height: 60px;
     1163    resize: vertical;
     1164}
     1165
     1166@media (max-width: 1200px) {
     1167    .probonoseo-pro-enhance-grid {
     1168        grid-template-columns: 1fr;
     1169    }
     1170}
     1171
     1172@media (max-width: 768px) {
     1173    .probonoseo-detail-form-row {
     1174        grid-template-columns: 1fr;
     1175    }
     1176}
     1177
     1178.probonoseo-tabs-free {
     1179    margin-bottom: 0;
     1180    border-bottom: none;
     1181}
     1182
     1183.probonoseo-tabs-pro {
     1184    margin-top: 8px;
     1185    padding-top: 0;
     1186}
     1187
     1188.probonoseo-tabs-free .nav-tab,
     1189.probonoseo-tabs-pro .nav-tab {
     1190    margin-bottom: 0;
     1191}
     1192
     1193.probonoseo-section-divider {
     1194    height: 1px;
     1195    background: #ddd;
     1196    margin: 30px 0;
     1197}
     1198
     1199.probonoseo-pro-label {
     1200    display: inline-block;
     1201    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     1202    color: #fff;
     1203    font-size: 11px;
     1204    font-weight: 600;
     1205    padding: 2px 8px;
     1206    border-radius: 3px;
     1207    margin-left: 8px;
     1208    vertical-align: middle;
     1209}
     1210
     1211.probonoseo-serp-wrap {
     1212    padding: 20px 0;
     1213}
     1214
     1215.probonoseo-serp-grid {
     1216    display: grid;
     1217    grid-template-columns: 1.7fr 1fr;
     1218    gap: 30px;
     1219    margin-bottom: 30px;
     1220}
     1221
     1222.probonoseo-serp-left {
     1223    display: flex;
     1224    flex-direction: column;
     1225    gap: 20px;
     1226}
     1227
     1228.probonoseo-serp-right {
     1229    min-width: 0;
     1230}
     1231
     1232.probonoseo-serp-about {
     1233    font-size: 13px;
     1234    color: #555;
     1235    margin: 0 0 15px 0;
     1236    line-height: 1.6;
     1237}
     1238
     1239.probonoseo-serp-info {
     1240    display: flex;
     1241    flex-direction: column;
     1242    gap: 10px;
     1243}
     1244
     1245.probonoseo-serp-info-item {
     1246    display: flex;
     1247    align-items: center;
     1248    gap: 8px;
     1249    font-size: 13px;
     1250    color: #333;
     1251}
     1252
     1253.probonoseo-serp-icon-star {
     1254    color: #ffc107;
     1255}
     1256
     1257.probonoseo-serp-icon-search {
     1258    color: #4a90e2;
     1259}
     1260
     1261.probonoseo-serp-icon-location {
     1262    color: #28a745;
     1263}
     1264
     1265.probonoseo-serp-icon-sitemap {
     1266    color: #6f42c1;
     1267}
     1268
     1269.probonoseo-serp-detail-section {
     1270    margin-top: 40px;
     1271    padding-top: 30px;
     1272    border-top: 2px solid #e0e0e0;
     1273}
     1274
     1275.probonoseo-serp-section-margin {
     1276    margin-top: 40px;
     1277}
     1278
     1279.probonoseo-serp-desc {
     1280    font-size: 13px;
     1281    color: #666;
     1282    margin: 0 0 20px 0;
     1283}
     1284
     1285@media (max-width: 1200px) {
     1286    .probonoseo-serp-grid {
     1287        grid-template-columns: 1fr;
     1288    }
     1289}
     1290
     1291.probonoseo-schema-row {
     1292    margin-bottom: 15px;
     1293}
     1294
     1295.probonoseo-schema-row label {
     1296    display: block;
     1297    font-weight: 600;
     1298    margin-bottom: 5px;
     1299    color: #333;
     1300    font-size: 13px;
     1301}
     1302
     1303.probonoseo-schema-row input[type="text"],
     1304.probonoseo-schema-row input[type="url"],
     1305.probonoseo-schema-row input[type="number"],
     1306.probonoseo-schema-row input[type="date"],
     1307.probonoseo-schema-row input[type="datetime-local"],
     1308.probonoseo-schema-row select,
     1309.probonoseo-schema-row textarea {
     1310    width: 100%;
     1311    max-width: 100%;
     1312}
     1313
     1314.probonoseo-html-sitemap {
     1315    padding: 20px;
     1316}
     1317
     1318.probonoseo-sitemap-section {
     1319    margin-bottom: 30px;
     1320}
     1321
     1322.probonoseo-sitemap-section h3 {
     1323    font-size: 18px;
     1324    margin: 0 0 15px 0;
     1325    padding-bottom: 10px;
     1326    border-bottom: 2px solid #4a90e2;
     1327    color: #333;
     1328}
     1329
     1330.probonoseo-sitemap-section ul {
     1331    margin: 0;
     1332    padding: 0;
     1333    list-style: none;
     1334}
     1335
     1336.probonoseo-sitemap-section li {
     1337    padding: 8px 0;
     1338    border-bottom: 1px solid #eee;
     1339}
     1340
     1341.probonoseo-sitemap-section li:last-child {
     1342    border-bottom: none;
     1343}
     1344
     1345.probonoseo-sitemap-section a {
     1346    color: #4a90e2;
     1347    text-decoration: none;
     1348}
     1349
     1350.probonoseo-sitemap-section a:hover {
     1351    text-decoration: underline;
     1352}
     1353
     1354.probonoseo-sitemap-date {
     1355    color: #999;
     1356    font-size: 12px;
     1357    margin-left: 10px;
     1358}
     1359
     1360.probonoseo-schema-advanced-wrap {
     1361    padding: 20px 0;
     1362}
     1363
     1364.probonoseo-schema-advanced-grid {
     1365    display: grid;
     1366    grid-template-columns: 1.7fr 1fr;
     1367    gap: 30px;
     1368    margin-bottom: 30px;
     1369}
     1370
     1371.probonoseo-schema-advanced-left {
     1372    display: flex;
     1373    flex-direction: column;
     1374    gap: 20px;
     1375}
     1376
     1377.probonoseo-schema-advanced-right {
     1378    min-width: 0;
     1379}
     1380
     1381.probonoseo-schema-advanced-about {
     1382    font-size: 13px;
     1383    color: #555;
     1384    margin: 0 0 15px 0;
     1385    line-height: 1.6;
     1386}
     1387
     1388.probonoseo-schema-advanced-info {
     1389    display: flex;
     1390    flex-direction: column;
     1391    gap: 10px;
     1392}
     1393
     1394.probonoseo-schema-advanced-info-item {
     1395    display: flex;
     1396    align-items: center;
     1397    gap: 8px;
     1398    font-size: 13px;
     1399    color: #333;
     1400}
     1401
     1402.probonoseo-schema-advanced-detail-section {
     1403    margin-top: 40px;
     1404    padding-top: 30px;
     1405    border-top: 2px solid #e0e0e0;
     1406}
     1407
     1408.probonoseo-schema-advanced-section-margin {
     1409    margin-top: 40px;
     1410}
     1411
     1412.probonoseo-schema-advanced-desc {
     1413    font-size: 13px;
     1414    color: #666;
     1415    margin: 0 0 20px 0;
     1416}
     1417
     1418.probonoseo-schema-detail-form-row {
     1419    display: grid;
     1420    grid-template-columns: 1fr 1fr;
     1421    gap: 20px;
     1422    margin-bottom: 16px;
     1423}
     1424
     1425.probonoseo-schema-detail-form-row:last-child {
     1426    margin-bottom: 0;
     1427}
     1428
     1429.probonoseo-schema-detail-form-item {
     1430    min-width: 0;
     1431}
     1432
     1433.probonoseo-schema-detail-form-item label {
     1434    display: block;
     1435    font-weight: 600;
     1436    margin-bottom: 8px;
     1437    color: #333;
     1438    font-size: 13px;
     1439}
     1440
     1441.probonoseo-schema-detail-form-item input[type="text"],
     1442.probonoseo-schema-detail-form-item input[type="url"],
     1443.probonoseo-schema-detail-form-item input[type="number"],
     1444.probonoseo-schema-detail-form-item select {
     1445    width: 100%;
     1446    max-width: 100%;
     1447}
     1448
     1449.probonoseo-schema-detail-form-item .description {
     1450    margin-top: 6px;
     1451    font-size: 12px;
     1452    color: #666;
     1453}
     1454
     1455.probonoseo-schema-type-icon {
     1456    display: inline-block;
     1457    width: 20px;
     1458    text-align: center;
     1459    margin-right: 4px;
     1460}
     1461
     1462.probonoseo-schema-type-icon.icon-software {
     1463    color: #4a90e2;
     1464}
     1465
     1466.probonoseo-schema-type-icon.icon-course {
     1467    color: #28a745;
     1468}
     1469
     1470.probonoseo-schema-type-icon.icon-book {
     1471    color: #6f42c1;
     1472}
     1473
     1474.probonoseo-schema-type-icon.icon-movie {
     1475    color: #dc3545;
     1476}
     1477
     1478.probonoseo-schema-type-icon.icon-music {
     1479    color: #fd7e14;
     1480}
     1481
     1482.probonoseo-schema-type-icon.icon-podcast {
     1483    color: #20c997;
     1484}
     1485
     1486.probonoseo-schema-type-icon.icon-org {
     1487    color: #17a2b8;
     1488}
     1489
     1490.probonoseo-schema-type-icon.icon-person {
     1491    color: #6610f2;
     1492}
     1493
     1494.probonoseo-schema-type-icon.icon-article {
     1495    color: #333;
     1496}
     1497
     1498.probonoseo-schema-type-icon.icon-news {
     1499    color: #dc3545;
     1500}
     1501
     1502.probonoseo-schema-type-icon.icon-blog {
     1503    color: #fd7e14;
     1504}
     1505
     1506.probonoseo-schema-type-icon.icon-announce {
     1507    color: #ffc107;
     1508}
     1509
     1510.probonoseo-schema-type-icon.icon-image {
     1511    color: #28a745;
     1512}
     1513
     1514.probonoseo-schema-type-icon.icon-dataset {
     1515    color: #17a2b8;
     1516}
     1517
     1518.probonoseo-schema-type-icon.icon-rating {
     1519    color: #ffc107;
     1520}
     1521
     1522.probonoseo-schema-type-icon.icon-claim {
     1523    color: #6f42c1;
     1524}
     1525
     1526.probonoseo-schema-type-icon.icon-speakable {
     1527    color: #4a90e2;
     1528}
     1529
     1530.probonoseo-schema-type-icon.icon-auto {
     1531    color: #20c997;
     1532}
     1533
     1534@media (max-width: 1200px) {
     1535    .probonoseo-schema-advanced-grid {
     1536        grid-template-columns: 1fr;
     1537    }
     1538}
     1539
     1540@media (max-width: 768px) {
     1541    .probonoseo-schema-detail-form-row {
     1542        grid-template-columns: 1fr;
     1543    }
     1544}
     1545
     1546.probonoseo-diagnosis-pro-grid {
     1547    display: grid;
     1548    grid-template-columns: 1.7fr 1fr;
     1549    gap: 30px;
     1550    margin-bottom: 30px;
     1551}
     1552
     1553.probonoseo-diagnosis-pro-left {
     1554    display: flex;
     1555    flex-direction: column;
     1556    gap: 20px;
     1557}
     1558
     1559.probonoseo-diagnosis-pro-right {
     1560    min-width: 0;
     1561}
     1562
     1563.probonoseo-diagnosis-pro-desc {
     1564    font-size: 13px;
     1565    color: #555;
     1566    margin: 0 0 20px 0;
     1567    line-height: 1.6;
     1568}
     1569
     1570.probonoseo-diagnosis-pro-actions {
     1571    text-align: center;
     1572    margin-bottom: 20px;
     1573}
     1574
     1575.probonoseo-diagnosis-pro-results {
     1576    background: #f9f9f9;
     1577    border: 1px solid #e0e0e0;
     1578    border-radius: 6px;
     1579    padding: 20px;
     1580    min-height: 200px;
     1581    max-height: 500px;
     1582    overflow-y: auto;
     1583}
     1584
     1585.probonoseo-diagnosis-pro-empty {
     1586    display: flex;
     1587    flex-direction: column;
     1588    align-items: center;
     1589    justify-content: center;
     1590    min-height: 180px;
     1591    color: #888;
     1592    text-align: center;
     1593}
     1594
     1595.probonoseo-diagnosis-pro-empty .dashicons {
     1596    font-size: 48px;
     1597    width: 48px;
     1598    height: 48px;
     1599    margin-bottom: 12px;
     1600    color: #ccc;
     1601}
     1602
     1603.probonoseo-diagnosis-pro-empty p {
     1604    margin: 0;
     1605    font-size: 13px;
     1606}
     1607
     1608.probonoseo-diagnosis-pro-loading {
     1609    display: flex;
     1610    flex-direction: column;
     1611    align-items: center;
     1612    justify-content: center;
     1613    min-height: 180px;
     1614    color: #4a90e2;
     1615    text-align: center;
     1616}
     1617
     1618.probonoseo-diagnosis-pro-loading .dashicons {
     1619    font-size: 32px;
     1620    width: 32px;
     1621    height: 32px;
     1622    margin-bottom: 12px;
     1623}
     1624
     1625.probonoseo-diagnosis-pro-loading p {
     1626    margin: 0;
     1627    font-size: 13px;
     1628}
     1629
     1630.probonoseo-diagnosis-pro-error {
     1631    display: flex;
     1632    flex-direction: column;
     1633    align-items: center;
     1634    justify-content: center;
     1635    min-height: 180px;
     1636    color: #dc3545;
     1637    text-align: center;
     1638}
     1639
     1640.probonoseo-diagnosis-pro-error p {
     1641    margin: 0;
     1642    font-size: 13px;
     1643}
     1644
     1645.probonoseo-diagnosis-pro-section {
     1646    margin-bottom: 20px;
     1647    padding-bottom: 20px;
     1648    border-bottom: 1px solid #e0e0e0;
     1649}
     1650
     1651.probonoseo-diagnosis-pro-section:last-child {
     1652    margin-bottom: 0;
     1653    padding-bottom: 0;
     1654    border-bottom: none;
     1655}
     1656
     1657.probonoseo-diagnosis-pro-section-title {
     1658    display: flex;
     1659    align-items: center;
     1660    gap: 8px;
     1661    margin: 0 0 12px 0;
     1662    font-size: 14px;
     1663    font-weight: 600;
     1664    color: #333;
     1665}
     1666
     1667.probonoseo-diagnosis-pro-section-title .dashicons {
     1668    font-size: 18px;
     1669    width: 18px;
     1670    height: 18px;
     1671    color: #4a90e2;
     1672}
     1673
     1674.probonoseo-diagnosis-pro-item {
     1675    padding: 6px 0;
     1676    font-size: 13px;
     1677    display: flex;
     1678    align-items: flex-start;
     1679    gap: 6px;
     1680}
     1681
     1682.probonoseo-diagnosis-pro-item.item-success {
     1683    color: #28a745;
     1684}
     1685
     1686.probonoseo-diagnosis-pro-item.item-warning {
     1687    color: #ffc107;
     1688}
     1689
     1690.probonoseo-diagnosis-pro-item.item-error {
     1691    color: #dc3545;
     1692}
     1693
     1694.probonoseo-diagnosis-pro-item.item-info {
     1695    color: #17a2b8;
     1696}
     1697
     1698.probonoseo-diagnosis-pro-item.item-detail {
     1699    color: #666;
     1700    padding-left: 20px;
     1701    font-size: 12px;
     1702}
     1703
     1704.probonoseo-diagnosis-pro-score-box {
     1705    text-align: center;
     1706    padding: 20px;
     1707    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
     1708    border-radius: 8px;
     1709    color: white;
     1710    margin-bottom: 20px;
     1711}
     1712
     1713.probonoseo-diagnosis-pro-score-number {
     1714    font-size: 48px;
     1715    font-weight: bold;
     1716    line-height: 1;
     1717}
     1718
     1719.probonoseo-diagnosis-pro-score-label {
     1720    font-size: 14px;
     1721    margin-top: 8px;
     1722}
     1723
     1724.probonoseo-diagnosis-pro-pdf-section {
     1725    margin-top: 20px;
     1726    padding-top: 20px;
     1727    border-top: 1px solid #e0e0e0;
     1728}
     1729
     1730@media (max-width: 1200px) {
     1731    .probonoseo-diagnosis-pro-grid {
     1732        grid-template-columns: 1fr;
     1733    }
     1734}

  • probonoseo-basic/trunk/admin/tabs/tab-diagnosis.php

    r3469247 r3476199  
    1919            </div>
    2020
    21             <div class="probonoseo-cards-wrap" style="display: block;">
     21            <div class="probonoseo-cards-wrap">
    2222
    2323                <div class="probonoseo-card">

  • probonoseo-basic/trunk/probonoseo.php

    r3476092 r3476199  
    1717define('PROBONOSEO_PATH', plugin_dir_path(__FILE__));
    1818define('PROBONOSEO_URL', plugin_dir_url(__FILE__));
    19 define('PROBONOSEO_VERSION', '1.5.5');
     19define('PROBONOSEO_VERSION', '1.5.5.1');
    2020
    2121function probonoseo_admin_assets($hook) {
Note: See TracChangeset for help on using the changeset viewer.