/* ================================================
   Settings Page — Retro Terminal Theme
   ================================================ */
.kookoawpf-settings-wrap {
    font-family: 'Share Tech Mono', monospace;
    max-width: 900px;
    position: relative;
}
.kookoawpf-settings-wrap h1 {
    color: #1d2327;
    font-family: 'Share Tech Mono', monospace;
    font-size: 25px;
    letter-spacing: 2px;
}

/* Settings tab navigation */
.kookoawpf-settings-tabs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 3px;
    row-gap: 10px;
    margin: 20px 0 0;
    border-bottom: none;
}
.kookoawpf-settings-tab {
    flex: 0 0 calc(25% - 2.25px);
    box-sizing: border-box;
    text-align: center;
}
/* Second row: Media Stats + Upgrade to PRO + Try PRO Free / Claim 20% Off —
   each spans 2 columns. They inherit the regular tab look (dark bg, white border,
   white text) so the bottom row stays visually consistent with the narrower tabs above. */
.kookoawpf-settings-tab[data-tab="stats"],
.kookoawpf-settings-tab-upgrade,
.kookoawpf-settings-tab-trial,
.kookoawpf-settings-tab-discount {
    flex: 0 0 calc(50% - 1.5px);
}

/* FASE 4 (paying customer): the upsell tab is hidden, which would otherwise
   leave AI Image sitting alone in a 25% column with an empty gap to its
   right. Bump AI to 50% so it pairs with Media Stats and fills the row. */
.kookoawpf-settings-tabs--pro-paid .kookoawpf-settings-tab[data-tab="ai"] {
    flex: 0 0 calc(50% - 1.5px);
}
/* When PRO is active, Media Stats lives alone on its own row — push it
   to the right so the row feels balanced instead of left-clustered. */
.kookoawpf-settings-tab-end {
    margin-left: auto;
}
/* Upgrade to PRO: orange background, black text. Border + shape stay
   identical to the regular tabs above (white 2px from .kookoawpf-settings-tab).
   `position: relative` so the trial-active badge can absolute-position itself
   in the bottom-right corner without breaking the tab layout. */
.kookoawpf-settings-tab.kookoawpf-settings-tab-upgrade,
.kookoawpf-settings-tab.kookoawpf-settings-tab-upgrade:visited {
    background: #FF9500;
    color: #000000;
    text-decoration: none;
    text-shadow: none;
    position: relative;
}
/* Trial-active badge — sits half-inside / half-outside the bottom-right
   corner of the UPGRADE TO PRO tab. Same overhang pattern as the
   "RECOMMENDED" / "TRIAL ACTIVE" pills on the pricing page. Dark fill
   with an orange border so the badge reads against both the orange tab
   (top half) and the light-gray admin page (bottom half). Reads the
   countdown from PRO via the FREE namespace; falls back to plain
   "TRIAL ACTIVE" when Freemius hasn't synced a trial end timestamp. */
.kookoawpf-tab-trial-badge {
    position: absolute;
    bottom: -11px;
    right: 16px;
    padding: 3px 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #FF9500;
    background: #0d1117;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.3;
    z-index: 2;
}
/* Urgent styling — kicks in via the FREE template when the trial has
   3 days or less left (PHP threshold: 3 * DAY_IN_SECONDS). Red fill
   with white text so the impending end of access is unmissable even at
   a glance, while the relaxed dark-on-orange default stays for the
   wider 14-to-4-days stretch. A 2px black outline frames the badge so
   the red doesn't clash directly with the orange tab background — pure
   red on pure orange reads as visually muddy without the separator. */
.kookoawpf-tab-trial-badge.kookoawpf-tab-trial-badge--urgent {
    background: #FF3B30;
    color: #ffffff;
    outline: 2px solid #000000;
}
.kookoawpf-settings-tab.kookoawpf-settings-tab-upgrade:not(.active):hover,
.kookoawpf-settings-tab.kookoawpf-settings-tab-upgrade:focus {
    background: #ffae3d;
    color: #000000;
    text-shadow: none;
}
/* Try PRO Free (fase 1) / Claim 20% Off (fase 3): green background,
   black text, 2px black border. Mutually exclusive — they share styling
   because they occupy the same slot and have the same visual role. */
.kookoawpf-settings-tab.kookoawpf-settings-tab-trial,
.kookoawpf-settings-tab.kookoawpf-settings-tab-trial:visited,
.kookoawpf-settings-tab.kookoawpf-settings-tab-discount,
.kookoawpf-settings-tab.kookoawpf-settings-tab-discount:visited {
    background: #39FF14;
    color: #000000;
    border: 2px solid #000000;
    text-decoration: none;
    text-shadow: none;
    position: relative;
}
/* "No credit card" badge — same overhang pattern as the trial-active
   "Expires in N days" badge on the UPGRADE TO PRO tab, but with green
   text on dark fill so it reads against the green TRY PRO FREE tab
   (top half) and the light-gray admin page (bottom half). Reinforces
   the no-risk pitch: trial requires no payment method up front. */
.kookoawpf-tab-free-badge {
    position: absolute;
    bottom: -11px;
    right: 16px;
    padding: 3px 12px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #39FF14;
    background: #0d1117;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.3;
    z-index: 2;
}
.kookoawpf-settings-tab.kookoawpf-settings-tab-trial:not(.active):hover,
.kookoawpf-settings-tab.kookoawpf-settings-tab-trial:focus,
.kookoawpf-settings-tab.kookoawpf-settings-tab-discount:not(.active):hover,
.kookoawpf-settings-tab.kookoawpf-settings-tab-discount:focus {
    background: #2ee00f;
    color: #000000;
    border-color: #000000;
    text-shadow: none;
}
.kookoawpf-settings-tab {
    /* inline-flex + center alignment so the label sits vertically centered
       inside the tab box regardless of element type (button vs anchor) and
       regardless of how much extra height the flex parent stretches the
       tab to. Without this the UPGRADE TO PRO anchor — which has a child
       badge span — rendered its label glued to the top edge while the
       neighbouring button-tabs in the same flex row looked centered. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 16px;
    border: 2px solid #ffffff;
    border-bottom: none;
    border-radius: 0;
    background: #161b22;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: -5px;
    transition: none;
}
.kookoawpf-settings-tab:not(.active):hover {
    background: #232b3a;
    color: #39FF14;
}
.kookoawpf-settings-tab.active {
    background: #0d1117;
    color: #39FF14;
    border: 2px solid #ffffff;
    border-bottom: none;
    box-shadow: none;
    text-shadow: 0 0 7px rgba(57, 255, 20, 0.64), 0 0 20px rgba(57, 255, 20, 0.4), 0 0 40px rgba(57, 255, 20, 0.24);
}

/* Tab panels */
.kookoawpf-tab-panel {
    padding-top: 10px;
}
.kookoawpf-settings-wrap .kookoawpf-settings-section {
    background: #0d1117;
    border: 5px solid var(--kookoawpf-green-dim, #2ea043);
    border-radius: 0;
    padding: 24px 30px;
    /* 32px not 20: the 6px-6px-12px box-shadow below absorbs ~12px of
       the gap, so we add ~12px to keep the *visible* gap at the intended
       20px between sibling sections across every settings tab. */
    margin-top: 32px;
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.4);
}
.kookoawpf-settings-wrap .kookoawpf-settings-section h2 {
    color: #FF9500;
    font-family: 'Share Tech Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 20px;
    border-bottom: 1px solid rgba(57,255,20,0.3);
    padding-bottom: 10px;
    margin-top: 0;
}
.kookoawpf-settings-wrap .form-table th {
    color: #39FF14;
    font-family: 'Share Tech Mono', monospace;
    font-weight: normal;
    font-size: 13px;
    padding: 15px 10px 15px 0;
}
.kookoawpf-settings-wrap .form-table td {
    color: #ffffff;
    font-family: 'Share Tech Mono', monospace;
    padding: 12px 10px;
}
.kookoawpf-settings-wrap .form-table td label {
    color: #ffffff;
}
.kookoawpf-settings-wrap .form-table input[type="number"],
.kookoawpf-settings-wrap .form-table input[type="text"] {
    background: #161b22;
    border: 1px solid #39FF14;
    color: #ffffff;
    font-family: 'Share Tech Mono', monospace;
    border-radius: 0;
    padding: 6px 10px;
}
.kookoawpf-settings-wrap .form-table input[type="checkbox"] {
    accent-color: #39FF14;
}
.kookoawpf-settings-wrap .form-table input[type="color"] {
    background: #161b22;
    border: 2px solid #39FF14;
    border-radius: 0;
    padding: 2px;
    width: 50px;
    height: 34px;
    cursor: pointer;
}
/* Settings page color palette */
.kookoawpf-settings-color-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.kookoawpf-settings-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.kookoawpf-settings-color-dot:hover {
    transform: scale(1.2);
}

.kookoawpf-settings-color-dot.kookoawpf-settings-color-active {
    box-shadow: 0 0 0 2px var(--kookoawpf-bg), 0 0 0 4px #ffffff;
}

.kookoawpf-settings-wrap .kookoawpf-btn-save {
    background: #39FF14 !important;
    color: #0d1117 !important;
    border: 3px solid #1d2327 !important;
    border-radius: 0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 24px !important;
    cursor: pointer;
}
.kookoawpf-settings-wrap .kookoawpf-btn-save:hover {
    background: #2ee00f !important;
}
/* Disabled state for settings action buttons (Export/Import) */
.kookoawpf-settings-wrap .kookoawpf-btn-save:disabled,
.kookoawpf-settings-wrap .kookoawpf-btn-save[disabled] {
    background: #39FF14 !important;
    color: #0d1117 !important;
    border-color: #1d2327 !important;
    cursor: not-allowed;
    opacity: 0.35;
}
.kookoawpf-settings-wrap .kookoawpf-btn-save:disabled:hover,
.kookoawpf-settings-wrap .kookoawpf-btn-save[disabled]:hover {
    background: #39FF14 !important;
}
/* Loading state: keeps green active look (during export/import AJAX) */
.kookoawpf-settings-wrap .kookoawpf-btn-save.kookoawpf-btn-loading {
    background: #39FF14 !important;
    color: #0d1117 !important;
    border-color: #1d2327 !important;
    cursor: wait;
    opacity: 0.8;
}
.kookoawpf-settings-wrap .kookoawpf-btn-save.kookoawpf-btn-loading:hover {
    background: #39FF14 !important;
}
/* Upload Folder Progress */
.kookoawpf-upload-folder-progress {
    margin-top: 16px;
    max-width: 500px;
}
.kookoawpf-upload-folder-bar-wrap {
    background: var(--kookoawpf-bg);
    border: 2px solid var(--kookoawpf-green-dim);
    border-radius: 0;
    height: 22px;
    overflow: hidden;
}
.kookoawpf-upload-folder-bar {
    background: var(--kookoawpf-green);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}
.kookoawpf-upload-folder-status {
    margin-top: 8px;
    font-family: var(--kookoawpf-font);
    font-size: 13px;
    color: #ffffff;
}

/* All description/helper text inside dark sections: white, not grey */
.kookoawpf-settings-wrap .kookoawpf-settings-section .description,
.kookoawpf-settings-wrap .kookoawpf-settings-section p.description {
    color: #ffffff !important;
}
/* Compression level labels in settings */
.kookoawpf-settings-wrap .kookoawpf-settings-section label[style*="color:#8b949e"] {
    color: #ffffff !important;
}

/* Settings page — View shortcuts link */
#kookoawpf-settings-view-shortcuts:hover {
    color: #ffffff !important;
}

/* ================================================
   Context Menu Settings — Toggle Switches
   ================================================ */
.kookoawpf-ctx-toggles {
    max-width: 560px;
}
.kookoawpf-ctx-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #30363d;
    transition: background 0.15s;
}
.kookoawpf-ctx-toggle-row:first-child {
    border-top: 1px solid #30363d;
}
.kookoawpf-ctx-toggle-row:hover {
    background: #161b22;
}
.kookoawpf-ctx-toggle-sep {
    height: 1px;
    background: #39FF14;
    margin: 0;
}
.kookoawpf-ctx-toggle-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.kookoawpf-ctx-toggle-icon {
    color: #39FF14;
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.kookoawpf-ctx-toggle-label {
    display: block;
    color: #39FF14;
    font-family: 'Share Tech Mono', monospace;
    font-size: 14px;
    font-weight: 600;
}
.kookoawpf-ctx-toggle-desc {
    display: block;
    color: #ffffff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    margin-top: 2px;
}
/* Toggle switch */
.kookoawpf-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 16px;
}
.kookoawpf-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.kookoawpf-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #30363d;
    border-radius: 24px;
    transition: background-color 0.2s;
}
.kookoawpf-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #8b949e;
    border-radius: 50%;
    transition: transform 0.2s, background-color 0.2s;
}
.kookoawpf-toggle-switch input:checked + .kookoawpf-toggle-slider {
    background-color: #39FF14;
}
.kookoawpf-toggle-switch input:checked + .kookoawpf-toggle-slider::before {
    transform: translateX(20px);
    background-color: #0d1117;
}
/* Forced toggle (always on) */
.kookoawpf-toggle-forced {
    opacity: 0.5;
}
.kookoawpf-toggle-forced .kookoawpf-toggle-slider {
    cursor: not-allowed;
}
.kookoawpf-ctx-forced .kookoawpf-ctx-toggle-label::after {
    content: 'always on';
    color: #FF9500;
    font-size: 11px;
    font-weight: 400;
    margin-left: 8px;
}

/* ================================================
   Colors & Icons Settings Tab
   ================================================ */

/* -- Custom Colors -- */
.kookoawpf-ci-colors-base,
.kookoawpf-ci-colors-custom {
    margin-bottom: 20px;
}
.kookoawpf-ci-label {
    display: block;
    color: #39FF14;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    margin-bottom: 8px;
}
.kookoawpf-ci-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.kookoawpf-ci-dot {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #30363d;
    cursor: default;
}
.kookoawpf-ci-dot-locked {
    cursor: not-allowed;
}
.kookoawpf-ci-custom-slots {
    display: flex;
    gap: 10px;
}
.kookoawpf-ci-custom-slot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kookoawpf-ci-color-input {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.kookoawpf-ci-dot-empty {
    background: #161b22;
    border: 2px dashed #39FF14;
    cursor: pointer;
    transition: border-color 0.15s;
    position: relative;
}
.kookoawpf-ci-dot-empty::before,
.kookoawpf-ci-dot-empty::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #39FF14;
    border-radius: 1px;
    transition: background 0.15s;
}
.kookoawpf-ci-dot-empty::before {
    width: 12px;
    height: 2px;
}
.kookoawpf-ci-dot-empty::after {
    width: 2px;
    height: 12px;
}
.kookoawpf-ci-dot-empty:hover {
    border-color: #ffffff;
}
.kookoawpf-ci-dot-empty:hover::before,
.kookoawpf-ci-dot-empty:hover::after {
    background: #ffffff;
}
.kookoawpf-ci-dot-custom {
    cursor: pointer;
    border-color: transparent;
    transition: border-color 0.15s;
}
.kookoawpf-ci-dot-custom:hover {
    border-color: #ffffff;
}
.kookoawpf-ci-slot-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: #FF3B30;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: none;
}
.kookoawpf-ci-custom-slot:hover .kookoawpf-ci-slot-remove {
    display: block;
}

/* -- Icon Blocks (compact) -- */
.kookoawpf-ci-blocks-compact {
    max-width: 560px;
}
.kookoawpf-ci-row-compact {
    padding: 10px 0;
    border-bottom: 1px solid #30363d;
}
.kookoawpf-ci-row-compact:first-child {
    border-top: 1px solid #30363d;
}
.kookoawpf-ci-row-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.kookoawpf-ci-row-label {
    color: #39FF14;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.kookoawpf-ci-block-badge {
    color: #FF9500;
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
}
.kookoawpf-ci-row-icons {
    display: grid;
    grid-template-columns: repeat(14, 28px);
    gap: 2px;
    padding-left: 50px;
}
.kookoawpf-ci-emoji {
    font-size: 18px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.kookoawpf-toggle-sm {
    transform: scale(0.8);
    transform-origin: left center;
}

/* ================================================
   Settings — Folder Usage Box (free users)
   ================================================ */
.kookoawpf-settings-usage {
    border: 5px solid #FF9500;
    background: #0d1117;
    padding: 20px 24px;
    margin-top: 30px;
    font-family: 'Share Tech Mono', monospace;
}
.kookoawpf-settings-usage h2 {
    margin: 0 0 16px 0;
    padding: 0;
}
.kookoawpf-settings-usage-col {
    border: 1px solid #30363d;
    padding: 16px;
    background: #161b22;
}
.kookoawpf-settings-usage-stat {
    font-size: 15px;
    color: #ffffff;
    padding: 4px 0;
}
.kookoawpf-settings-usage-stat em {
    font-style: normal;
    color: #39FF14;
    margin-left: 4px;
}
.kookoawpf-settings-usage-upgrade {
    font-family: 'Share Tech Mono', monospace;
    font-size: 18px;
    font-weight: bold;
    color: #FF9500;
    text-decoration: none;
}
.kookoawpf-settings-usage-upgrade:hover,
.kookoawpf-settings-usage-upgrade:visited:hover {
    color: #39FF14;
}
.kookoawpf-settings-usage-upgrade:visited,
.kookoawpf-settings-usage-upgrade:focus {
    color: #FF9500;
    outline: none;
    box-shadow: none;
}
/* ================================================
   CRT Scanlines on Settings page
   ================================================ */
.kookoawpf-settings-wrap ~ .clear,
.kookoawpf-settings-wrap {
    /* needed for z-index stacking only */
}
body.toplevel_page_kookoa-folders #wpbody-content::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.08) 3px,
        rgba(0, 0, 0, 0.08) 4px
    );
    pointer-events: none;
    z-index: 100;
}

/* Import preview retro scrollbar */
#kookoawpf-settings-import-preview { scrollbar-color: var(--kookoawpf-green-dim) var(--kookoawpf-bg); }
#kookoawpf-settings-import-preview::-webkit-scrollbar { width: 10px; }
#kookoawpf-settings-import-preview::-webkit-scrollbar-track { background: var(--kookoawpf-bg); }
#kookoawpf-settings-import-preview::-webkit-scrollbar-thumb { background: var(--kookoawpf-green-dim); border-radius: 5px; }
#kookoawpf-settings-import-preview::-webkit-scrollbar-thumb:hover { background: var(--kookoawpf-green); }

/* ── RESPONSIVE ── */
@media (max-width: 782px) {
    .kookoawpf-settings-usage-stat em {
        display: block;
        margin-left: 0;
    }
}

/* Force vertical scrollbar always on: keeps viewport width stable between
   tabs (short content vs long content), so position:fixed elements from
   companion plugins don't shift when the scrollbar toggles. */
html { overflow-y: scroll; }

/* ─── Custom number spinner (sidebar width, generic <input type=number>) ─── */
.kookoawpf-number-spinner input[type="number"]::-webkit-outer-spin-button,
.kookoawpf-number-spinner input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.kookoawpf-number-spinner input[type="number"] {
    -moz-appearance: textfield;
}
.kookoawpf-number-spinner {
    display: flex;
    align-items: stretch;
    position: relative;
}
.kookoawpf-number-spinner input {
    flex: 1;
    border-radius: 4px 0 0 4px !important;
    height: auto;
    padding: 5px 8px !important;
}
.kookoawpf-number-spinner input:focus {
    border-color: var(--kookoawpf-green) !important;
    box-shadow: 0 0 0 1px var(--kookoawpf-green) !important;
    outline: none !important;
}
.kookoawpf-number-spinner-btns {
    display: flex;
    flex-direction: column;
    width: 28px;
    flex-shrink: 0;
}
.kookoawpf-number-spinner-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #161b22;
    border: 1px solid #30363d;
    color: var(--kookoawpf-green);
    cursor: pointer;
    font-size: 10px;
    padding: 0;
    line-height: 1;
}
.kookoawpf-number-spinner-btn:first-child {
    border-radius: 0 4px 0 0;
    border-bottom: none;
}
.kookoawpf-number-spinner-btn:last-child {
    border-radius: 0 0 4px 0;
}
.kookoawpf-number-spinner-btn:hover {
    background: var(--kookoawpf-green);
    color: #0d1117;
}
.kookoawpf-number-spinner-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ── Rate Us section: its own dedicated .kookoawpf-settings-section panel
   below General Settings. Inner .kookoawpf-review-card just lays out the
   stars + content side-by-side (no border of its own — the panel wrapping
   it already provides the green-bordered look that matches the rest of
   the settings tab). ── */
#kookoawpf-review-section {
    position: relative;
    margin-top: 30px;
}
.kookoawpf-review-card {
    display: flex;
    align-items: center;
    gap: 28px;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    padding: 8px 0;
}
.kookoawpf-review-stars {
    font-size: 36px;
    color: #FF9500;
    text-shadow: 0 0 8px rgba(255, 149, 0, 0.45);
    letter-spacing: 3px;
    flex-shrink: 0;
    line-height: 1;
}
.kookoawpf-review-content {
    flex: 1;
    min-width: 0;
}
.kookoawpf-review-title {
    font-size: 28px;
    color: #FF9500;
    text-shadow: 0 0 6px rgba(255, 149, 0, 0.35);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
    line-height: 1;
}
.kookoawpf-review-text {
    color: #ffffff;
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 16px;
}
.kookoawpf-review-btn {
    display: inline-block;
    padding: 10px 24px;
    font-family: 'Share Tech Mono', 'Courier New', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #0d1117;
    background: #FF9500;
    border: 2px solid #FF9500;
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.kookoawpf-review-dismiss {
    position: absolute;
    top: 6px;
    right: 12px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s, color 0.15s;
    z-index: 2;
}
.kookoawpf-review-dismiss:hover,
.kookoawpf-review-dismiss:focus {
    opacity: 1;
    color: #FFB347;
    outline: none;
}
.kookoawpf-review-btn:hover,
.kookoawpf-review-btn:focus {
    background: transparent;
    color: #FF9500;
    text-decoration: none;
    box-shadow: 0 0 14px rgba(255, 149, 0, 0.35);
}
@media (max-width: 782px) {
    .kookoawpf-review-card {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
}

/* ============================================================
   Migrate from other plugins (Import & Export tab)
   ============================================================ */
.kookoawpf-migrate-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.kookoawpf-migrate-card {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 16px 18px;
    font-family: 'Share Tech Mono', monospace;
    color: #c9d1d9;
}
.kookoawpf-migrate-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.kookoawpf-migrate-card-info {
    flex: 1 1 auto;
    min-width: 260px;
}
.kookoawpf-migrate-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #39FF14;
    margin-bottom: 4px;
}
.kookoawpf-migrate-card-title .dashicons {
    color: #FF9500;
    font-size: 20px;
    width: 20px;
    height: 20px;
}
.kookoawpf-migrate-card-pro-badge {
    display: inline;
    background: transparent;
    color: #FF9500;
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
    border-radius: 0;
    margin-left: 6px;
    letter-spacing: 0.5px;
}
.kookoawpf-migrate-card-author {
    color: #FF9500;
    font-size: 14px;
    margin-bottom: 6px;
}
.kookoawpf-migrate-card-summary {
    color: #ffffff;
    font-size: 16px;
}
.kookoawpf-migrate-card-summary strong {
    color: #39FF14;
    font-weight: normal;
}
.kookoawpf-migrate-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.kookoawpf-migrate-dismiss {
    background: transparent;
    border: 1px solid #30363d;
    color: #ffffff;
    cursor: pointer;
    font-size: 26px;
    line-height: 1;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    padding: 0;
    font-family: inherit;
    transition: color 0.15s, border-color 0.15s;
}
.kookoawpf-migrate-dismiss:hover {
    color: #FF3B30;
    border-color: #FF3B30;
}
.kookoawpf-migrate-card-mode {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #30363d;
    font-size: 13px;
}
.kookoawpf-migrate-card-mode label {
    cursor: pointer;
    color: #ffffff;
}
.kookoawpf-settings-wrap .kookoawpf-migrate-cancel-btn,
.kookoawpf-settings-wrap .kookoawpf-migrate-cancel-btn:focus {
    background: #0d1117 !important;
    color: #ffffff !important;
    border: 3px solid #FF3B30 !important;
    border-radius: 0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 24px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    vertical-align: middle !important;
    cursor: pointer;
    transition: color 0.15s;
}
.kookoawpf-settings-wrap .kookoawpf-migrate-cancel-btn:hover {
    background: #0d1117 !important;
    color: #FF3B30 !important;
    border-color: #FF3B30 !important;
}
.kookoawpf-settings-wrap .kookoawpf-migrate-cancel-btn:disabled,
.kookoawpf-settings-wrap .kookoawpf-migrate-cancel-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.kookoawpf-settings-wrap .kookoawpf-migrate-confirm-btn {
    vertical-align: middle !important;
}
.kookoawpf-settings-wrap .kookoawpf-btn-upgrade,
.kookoawpf-settings-wrap .kookoawpf-btn-upgrade:focus,
.kookoawpf-settings-wrap .kookoawpf-btn-upgrade:visited {
    background: #FF9500 !important;
    color: #0d1117 !important;
    border: 3px solid #1d2327 !important;
    border-radius: 0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 24px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    cursor: pointer;
    vertical-align: middle !important;
    transition: background 0.15s;
}
.kookoawpf-settings-wrap .kookoawpf-btn-upgrade:hover {
    background: #e68600 !important;
    color: #0d1117 !important;
}
.kookoawpf-migrate-card-result {
    margin-top: 14px;
    padding: 12px 14px;
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 4px;
    font-size: 13px;
    color: #ffffff;
}
.kookoawpf-migrate-card-result.kookoawpf-migrate-result-success {
    border-color: #39FF14;
}
.kookoawpf-migrate-card-result.kookoawpf-migrate-result-error {
    border-color: #FF3B30;
    color: #FF3B30;
}
.kookoawpf-migrate-card-result strong {
    color: #39FF14;
    font-weight: normal;
}
.kookoawpf-migrate-card-result.kookoawpf-migrate-result-error strong {
    color: #FF3B30;
}
.kookoawpf-migrate-deactivate-prompt {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #30363d;
    color: #FF9500;
}
.kookoawpf-settings-wrap .kookoawpf-migrate-deactivate-btn,
.kookoawpf-settings-wrap .kookoawpf-migrate-deactivate-btn:focus {
    display: block;
    margin-top: 12px;
    margin-left: 0 !important;
    background: #0d1117 !important;
    color: #FF9500 !important;
    border: 3px solid #FF9500 !important;
    border-radius: 0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 24px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    height: auto !important;
    vertical-align: middle !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.kookoawpf-settings-wrap .kookoawpf-migrate-deactivate-btn:hover {
    background: #FF9500 !important;
    color: #0d1117 !important;
    border-color: #FF9500 !important;
}
.kookoawpf-settings-wrap .kookoawpf-migrate-deactivate-btn:disabled,
.kookoawpf-settings-wrap .kookoawpf-migrate-deactivate-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.kookoawpf-migrate-footer-links {
    margin-top: 18px;
    margin-bottom: 0;
}
.kookoawpf-migrate-footer-link {
    background: transparent;
    border: 0;
    padding: 0;
    color: #39FF14;
    font-family: 'Share Tech Mono', monospace;
    font-size: 17px;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: color 0.15s;
}
.kookoawpf-migrate-footer-link:hover,
.kookoawpf-migrate-footer-link:focus {
    color: #ffffff;
    outline: none;
}
.kookoawpf-migrate-footer-link-danger {
    color: #FF3B30;
}
.kookoawpf-migrate-footer-link-danger:hover,
.kookoawpf-migrate-footer-link-danger:focus {
    color: #ffffff;
    text-decoration: underline;
}
@media (max-width: 782px) {
    .kookoawpf-migrate-card-head {
        flex-direction: column;
        align-items: stretch;
    }
    .kookoawpf-migrate-card-actions {
        justify-content: flex-start;
    }
}
