/**
 * Fastless Cache admin panel.
 *
 * Scoped under .fastless-cache-shell so nothing here can leak into other plugins.
 * Colours follow the WordPress admin palette with a single accent for Fastless,
 * and every interactive element keeps a visible focus ring.
 */

/* An author display rule beats the browser's own [hidden] { display: none }, so
   any component that sets display stayed visible while the attribute was set
   (buttons, preset rows, modals). This makes the attribute authoritative on this
   screen. The scripts toggle the attribute, never the display property. */
[hidden] {
    display: none !important;
}

/* ------------------------------------------------------------------ tokens */

.fastless-cache-shell {
    --fl-bg: #f0f0f1;
    --fl-surface: #fff;
    --fl-border: #dcdcde;
    --fl-border-strong: #c3c4c7;
    --fl-text: #1d2327;
    --fl-muted: #646970;
    --fl-accent: #3858e9;
    --fl-accent-dark: #2145e6;
    --fl-accent-soft: #f0f4ff;
    --fl-accent-line: #d6e0ff;
    --fl-danger: #d63638;
    --fl-danger-line: #e0a3a4;
    --fl-warning: #b26200;
    --fl-warning-bg: #fcf9e8;
    --fl-warning-line: #dba617;
    --fl-success: #007a5a;
    --fl-success-bg: #edf7f2;
    --fl-ink: #101828;
    --fl-radius: 8px;
    --fl-radius-sm: 5px;
    --fl-gap: 20px;
    --fl-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    --fl-shadow-lg: 0 8px 24px rgba(0, 0, 0, .09);
    --fl-header-h: 60px;

    /* Gutters WordPress puts on #wpcontent (padding-left) and .wrap (margins).
       The header renders outside .wrap, so it has to reproduce them by hand in
       order to bleed to the edge of the content column while its inner row
       stays on the same box as the panel below. WordPress changes these at the
       782px breakpoint, so they are re-declared there. */
    --fl-content-pad: 20px;
    --fl-wrap-start: 2px;
    --fl-wrap-end: 20px;
}

/* ------------------------------------------------------------------ header */

.fastless-cache-header {
    position: sticky;
    top: 32px;
    z-index: 100;
    /* Cancel #wpcontent's left padding so the bar reaches the admin menu edge.
       Only the left side is negative: #wpcontent has no right padding, so any
       negative right margin would push the bar past the window and make the
       whole admin page scroll sideways. */
    margin: calc(-1 * var(--fl-content-pad)) 0 0 calc(-1 * var(--fl-content-pad));
    background: var(--fl-surface);
    border-bottom: 1px solid var(--fl-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

/* Keep the bar's row on the exact same box as .fastless-cache-wrap, so the brand and
   the meta buttons line up with the panel's outer edges at every width. */
.fastless-cache-header__inner {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    min-height: var(--fl-header-h);
    margin: 0 var(--fl-wrap-end) 0 calc(var(--fl-content-pad) + var(--fl-wrap-start));
    padding: 0;
}

.fastless-cache-header__brand {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    color: var(--fl-text);
}

.fastless-cache-header__brand:hover {
    color: var(--fl-text);
}

.fastless-cache-header__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.fastless-cache-logo {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    color: #fff;
    background: var(--fl-ink);
    border-radius: 9px;
}

.fastless-cache-version {
    flex: 0 0 auto;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--fl-muted);
    background: var(--fl-bg);
    border-radius: 999px;
}

.fastless-cache-header__meta {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* The cache form is only a wrapper so the button can post to admin-post.php
   without living inside the settings form. */
.fastless-cache-header__cache {
    display: flex;
    margin: 0;
}

.fastless-cache-button--save {
    min-width: 130px;
    justify-content: center;
}

/* ------------------------------------------------------------------ layout */

/* Own both gutters from the shared tokens so the panel and the header row above
   can never drift apart, whatever .wrap does at a given breakpoint. */
.fastless-cache-wrap {
    max-width: 1440px;
    margin-left: var(--fl-wrap-start);
    margin-right: var(--fl-wrap-end);
}

.fastless-cache-panel {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    gap: var(--fl-gap);
    align-items: start;
    margin: 0;
    margin-top: 30px;
}

.fastless-cache-nav {
    position: sticky;
    top: calc(var(--fl-header-h) + 44px);
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 8px;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow);
}

.fastless-cache-nav__item {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--fl-text);
    text-decoration: none;
    border-radius: var(--fl-radius-sm);
    transition: background .12s ease, color .12s ease;
}

.fastless-cache-nav__item:hover {
    color: var(--fl-text);
    background: var(--fl-bg);
}

.fastless-cache-nav__item.is-active {
    color: var(--fl-accent);
    background: var(--fl-accent-soft);
}

.fastless-cache-nav__item .fastless-cache-icon {
    flex: 0 0 auto;
    color: var(--fl-muted);
}

.fastless-cache-nav__item.is-active .fastless-cache-icon {
    color: var(--fl-accent);
}

.fastless-cache-nav__icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.fastless-cache-nav__label {
    flex: 1;
    min-width: 0;
}

.fastless-cache-main {
    min-width: 0;
}

/* ------------------------------------------------------------------- icons */

.fastless-cache-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* -------------------------------------------------------------- indicators */

.fastless-cache-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: var(--fl-border-strong);
    border-radius: 50%;
}

.fastless-cache-dot--on {
    background: var(--fl-success);
    box-shadow: 0 0 0 3px var(--fl-success-bg);
}

.fastless-cache-badge {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--fl-text);
    white-space: nowrap;
    background: var(--fl-bg);
    border-radius: 999px;
}

.fastless-cache-badge--on {
    color: var(--fl-success);
    background: var(--fl-success-bg);
}

.fastless-cache-badge--muted {
    color: var(--fl-muted);
}

.fastless-cache-badge--warn {
    color: var(--fl-warning);
    background: var(--fl-warning-bg);
}

/* ------------------------------------------------------------------ blocks */

.fastless-cache-block {
    margin-bottom: var(--fl-gap);
}

.fastless-cache-block:last-child {
    margin-bottom: 0;
}

.fastless-cache-block__title {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 4px;
    padding: 0;
    font-size: 15px;
    line-height: 1.3;
}

.fastless-cache-block__title .fastless-cache-icon {
    color: var(--fl-muted);
}

.fastless-cache-block__lead {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--fl-muted);
}

.fastless-cache-block--start {
    padding: 20px;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow);
}

/* ------------------------------------------------------------------ notices */

.fastless-cache-notice {
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 13px;
    line-height: 1.55;
    background: var(--fl-accent-soft);
    border: 1px solid var(--fl-accent-line);
    border-radius: var(--fl-radius-sm);
}

.fastless-cache-notice p {
    margin: 0;
}

/* Result tone. The default notice above reads as neutral information. */
.fastless-cache-notice--success {
    background: var(--fl-success-bg);
    border-color: var(--fl-success);
}

.fastless-cache-notice--warning {
    background: var(--fl-warning-bg);
    border-color: var(--fl-warning-line);
}

.fastless-cache-notice--error {
    background: #fdf0f1;
    border-color: var(--fl-danger);
}

.fastless-cache-notice--info {
    background: var(--fl-accent-soft);
    border-color: var(--fl-accent-line);
}

.fastless-cache-notices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0 0;
}

.fastless-cache-toast {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-left-width: 3px;
    border-radius: var(--fl-radius-sm);
    box-shadow: var(--fl-shadow);
}

.fastless-cache-toast--success {
    border-left-color: var(--fl-success);
}

.fastless-cache-toast--error {
    border-left-color: var(--fl-danger);
    background: #fcf0f1;
}

.fastless-cache-toast--warning {
    border-left-color: var(--fl-warning-line);
}

.fastless-cache-toast--info {
    border-left-color: var(--fl-accent);
}

.fastless-cache-toast--success .fastless-cache-icon {
    color: var(--fl-success);
}

.fastless-cache-toast--error .fastless-cache-icon {
    color: var(--fl-danger);
}

.fastless-cache-toast--warning .fastless-cache-icon {
    color: var(--fl-warning);
}

.fastless-cache-toast--info .fastless-cache-icon {
    color: var(--fl-accent);
}

/* The floating stack the panel's own notices render into. It is fixed to the
   bottom-right so a notice never pushes the layout around, and it sits above
   the panel chrome. */
.fastless-cache-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 360px;
    max-width: calc(100vw - 40px);
}

.fastless-cache-toasts .fastless-cache-toast {
    animation: fastless-cache-toast-in .18s ease-out;
    box-shadow: var(--fl-shadow-lg);
}

@keyframes fastless-cache-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fastless-cache-toast__icon {
    display: inline-flex;
    margin-top: 1px;
    line-height: 0;
}

.fastless-cache-toast__text {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.fastless-cache-toast__close {
    display: inline-flex;
    padding: 2px;
    margin: -2px -4px -2px 0;
    color: var(--fl-muted);
    line-height: 0;
    background: none;
    border: 0;
    border-radius: var(--fl-radius-sm);
    cursor: pointer;
}

.fastless-cache-toast__close:hover {
    color: var(--fl-text);
    background: rgba(0, 0, 0, .06);
}

.fastless-cache-toast__close:focus-visible {
    outline: 2px solid var(--fl-accent);
    outline-offset: 1px;
}

/* -------------------------------------------------------------------- hero */

.fastless-cache-hero {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    margin: var(--fl-gap) 0;
    color: #fff;
    background: linear-gradient(120deg, #101828 0%, #1d2b4d 60%, #24365c 100%);
    border-radius: var(--fl-radius);
}

.fastless-cache-hero__body {
    min-width: 260px;
}

.fastless-cache-hero h2 {
    margin: 0;
    padding: 0;
    font-size: 19px;
    line-height: 1.25;
    color: #fff;
}

.fastless-cache-hero__lead {
    margin: 5px 0 0;
    font-size: 13px;
    color: #cbd5e1;
}

/* Title row with the running-status pill (check icon in a circle). */
.fastless-cache-hero__title {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.fastless-cache-status {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 3px 12px 3px 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
}

.fastless-cache-status__icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: #064e3b;
    background: #6ee7b7;
    border-radius: 50%;
}

.fastless-cache-status.is-off {
    background: rgba(220, 38, 38, .18);
    border-color: rgba(252, 165, 165, .4);
}

.fastless-cache-status.is-off .fastless-cache-status__icon {
    color: #450a0a;
    background: #fca5a5;
}

.fastless-cache-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 14px;
}

.fastless-cache-hero__stat {
    display: flex;
    gap: 5px;
    align-items: baseline;
    font-size: 12px;
    color: #94a3b8;
}

.fastless-cache-hero__stat strong {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.fastless-cache-hero__stat--good strong {
    color: #6ee7b7;
}

.fastless-cache-hero__stat--bad strong {
    color: #fca5a5;
}

.fastless-cache-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fastless-cache-button--dark {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
}

.fastless-cache-button--dark:hover {
    color: #fff;
    background: rgba(255, 255, 255, .2);
}

/* ------------------------------------------------------------------- stats */

/* Below the hero: cache size / file count plus the clear + preload actions. */
.fastless-cache-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    margin: 0 0 var(--fl-gap);
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow);
}

.fastless-cache-stats__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 36px;
}

.fastless-cache-stats__item {
    display: flex;
    gap: 12px;
    align-items: center;
}

.fastless-cache-stats__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    color: var(--fl-accent);
    background: var(--fl-accent-soft);
    border-radius: var(--fl-radius-sm);
}

.fastless-cache-stats__body {
    min-width: 0;
}

.fastless-cache-stats__label {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: var(--fl-muted);
}

.fastless-cache-stats__value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}

.fastless-cache-stats__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: auto;
}

.fastless-cache-stats__actions form {
    display: inline-flex;
    margin: 0;
}

/* --------------------------------------------------------------- preload */

/* Live status panel below the stats card while a preload runs, or to show the
   summary of the last run. Hidden entirely until there is something to say. */
.fastless-cache-preload {
    padding: 16px 20px;
    margin: calc(-1 * var(--fl-gap) / 2) 0 var(--fl-gap);
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-left: 3px solid var(--fl-accent);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow);
}

.fastless-cache-preload__head {
    display: flex;
    gap: 12px;
    align-items: center;
}

.fastless-cache-preload__status {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fl-text);
}

.fastless-cache-preload__bar {
    height: 10px;
    margin-top: 12px;
    background: var(--fl-bg);
    border-radius: 999px;
    overflow: hidden;
}

.fastless-cache-preload__fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--fl-accent) 0%, var(--fl-accent-dark) 100%);
    border-radius: inherit;
    transition: width .3s ease;
}

.fastless-cache-preload__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin-top: 12px;
}

.fastless-cache-preload__metric {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-size: 12px;
    color: var(--fl-muted);
}

.fastless-cache-preload__metric strong {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fl-text);
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- conflicts */

.fastless-cache-conflicts {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fastless-cache-conflict {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    font-size: 13px;
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-left-width: 3px;
    border-radius: var(--fl-radius-sm);
    box-shadow: var(--fl-shadow);
}

.fastless-cache-conflict--block {
    border-left-color: var(--fl-warning-line);
}

.fastless-cache-conflict--warn {
    border-left-color: var(--fl-accent);
}

.fastless-cache-conflict__text {
    flex: 1;
    min-width: 0;
}

.fastless-cache-conflict__fix {
    display: inline-flex;
    margin: 0;
}

/* ------------------------------------------------------------------ routes */

.fastless-cache-routes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 4px;
}

.fastless-cache-route {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 16px;
    background: var(--fl-bg);
    border: 1px solid transparent;
    border-radius: var(--fl-radius-sm);
}

.fastless-cache-route:first-child {
    background: var(--fl-accent-soft);
    border-color: var(--fl-accent-line);
}

.fastless-cache-route__badge {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--fl-accent);
    border-radius: 999px;
}

.fastless-cache-route__badge--plain {
    color: var(--fl-muted);
    background: #fff;
    border: 1px solid var(--fl-border);
}

.fastless-cache-route__title {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

.fastless-cache-route__text {
    flex: 1;
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--fl-muted);
}

/* ------------------------------------------------------------------- cards */

.fastless-cache-card {
    margin-bottom: var(--fl-gap);
    background: var(--fl-surface);
    border: 1px solid var(--fl-border);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow);
    overflow: hidden;
}

.fastless-cache-card__head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fl-border);
}

.fastless-cache-card__head .fastless-cache-icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--fl-muted);
}

.fastless-cache-card__title {
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.3;
}

.fastless-cache-card__desc {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fl-muted);
}

.fastless-cache-card__body {
    padding: 8px 20px 20px;
}

.fastless-cache-subhead {
    margin: 20px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fl-muted);
}

.fastless-cache-subhead:first-child {
    margin-top: 10px;
}

/* ------------------------------------------------------------------ fields */

.fastless-cache-field {
    padding: 14px 0;
    border-bottom: 1px solid #f2f2f3;
}

.fastless-cache-field:last-child {
    border-bottom: 0;
}

.fastless-cache-field__label,
.fastless-cache-toggle__label {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fl-text);
}

.fastless-cache-field__description {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--fl-muted);
}

.fastless-cache-range {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 460px;
}

.fastless-cache-range input[type="range"] {
    flex: 1;
    min-width: 0;
    accent-color: var(--fl-accent);
    cursor: pointer;
}

.fastless-cache-range__value {
    min-width: 44px;
    padding: 3px 8px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--fl-text);
    background: var(--fl-bg);
    border-radius: var(--fl-radius-sm);
}

.fastless-cache-image-stats {
    margin: 0 0 10px;
}

.fastless-cache-image-stats p {
    margin: 0;
    font-size: 13px;
    color: var(--fl-text);
}

.fastless-cache-progress-bar {
    height: 10px;
    margin: 10px 0 0;
    background: var(--fl-bg);
    border-radius: 999px;
    overflow: hidden;
}

.fastless-cache-progress-fill {
    width: 0;
    height: 100%;
    background: var(--fl-accent);
    border-radius: inherit;
    transition: width .25s ease;
}

.fastless-cache-success {
    color: var(--fl-success);
}

.fastless-cache-warning {
    color: var(--fl-warning);
}

.fastless-cache-error {
    color: var(--fl-danger);
}

.fastless-cache-field__warning {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    margin: 8px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #7a4b00;
    background: var(--fl-warning-bg);
    border-radius: var(--fl-radius-sm);
}

.fastless-cache-field__hint {
    margin: 6px 0 0;
    font-size: 11px;
    font-style: italic;
    color: var(--fl-muted);
    display: none;
}

.fastless-cache-field__result {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fl-muted);
}

.fastless-cache-shell input[type="text"],
.fastless-cache-shell input[type="search"],
.fastless-cache-shell input[type="url"],
.fastless-cache-shell input[type="number"],
.fastless-cache-shell select,
.fastless-cache-shell textarea {
    width: 100%;
    max-width: 100%;
    padding: 7px 11px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fl-text);
    background: var(--fl-surface);
    border: 1px solid var(--fl-border-strong);
    border-radius: var(--fl-radius-sm);
    box-shadow: none;
}

.fastless-cache-shell select {
    max-width: 100%;
    padding-right: 28px;
}

/* Preserve newlines in the placeholder so the one-per-line examples render as
   separate lines. Without this the browser collapses them into one run-on
   line, which defeats the point of the example. */
.fastless-cache-shell textarea::placeholder {
    white-space: pre-wrap;
}

.fastless-cache-shell input::placeholder,
.fastless-cache-shell textarea::placeholder {
    color: #9aa0a6;
    font-style: italic;
}

.fastless-cache-shell input[type="text"]:focus,
.fastless-cache-shell input[type="search"]:focus,
.fastless-cache-shell input[type="url"]:focus,
.fastless-cache-shell input[type="number"]:focus,
.fastless-cache-shell select:focus,
.fastless-cache-shell textarea:focus,
.fastless-cache-shell .fastless-cache-toggle input:focus-visible + .fastless-cache-toggle__track {
    border-color: var(--fl-accent);
    box-shadow: 0 0 0 3px rgba(56, 88, 233, .16);
    outline: 2px solid transparent;
}

.fastless-cache-code {
    max-width: 640px;
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
    line-height: 1.65;
    resize: vertical;
}

.fastless-cache-code.is-list {
    min-height: 130px;
}

.fastless-cache-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.fastless-cache-check {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    font-size: 13px;
}

/* Toggle switch */

.fastless-cache-toggle {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    cursor: pointer;
}

.fastless-cache-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.fastless-cache-toggle__track {
    position: relative;
    display: block;
    width: 38px;
    height: 22px;
    margin-top: 1px;
    background: #c3c4c7;
    border-radius: 999px;
    transition: background .15s ease;
}

.fastless-cache-toggle__dot {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.fastless-cache-toggle input:checked + .fastless-cache-toggle__track {
    background: var(--fl-accent);
}

.fastless-cache-toggle input:checked + .fastless-cache-toggle__track .fastless-cache-toggle__dot {
    transform: translateX(16px);
}

.fastless-cache-toggle input:disabled + .fastless-cache-toggle__track {
    opacity: .5;
}

.fastless-cache-toggle__text {
    display: block;
    min-width: 0;
}

.fastless-cache-toggle__label {
    margin-bottom: 3px;
}

.fastless-cache-toggle__description {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: var(--fl-muted);
}

.fastless-cache-toggle__icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--fl-muted);
    background: var(--fl-bg);
    border-radius: var(--fl-radius-sm);
}

.fastless-cache-switch.is-on .fastless-cache-toggle__icon {
    color: var(--fl-success);
    background: var(--fl-success-bg);
}

.fastless-cache-risk {
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    border-radius: 3px;
}

.fastless-cache-risk--low {
    color: var(--fl-success);
    background: var(--fl-success-bg);
}

.fastless-cache-risk--medium {
    color: var(--fl-warning);
    background: var(--fl-warning-bg);
}

.fastless-cache-risk--high {
    color: var(--fl-danger);
    background: #fcebeb;
}

.fastless-cache-savings {
    margin-left: auto;
    font-size: 11px;
    color: var(--fl-success);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */

.fastless-cache-button {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    color: var(--fl-text);
    background: var(--fl-surface);
    border: 1px solid var(--fl-border-strong);
    border-radius: var(--fl-radius-sm);
    box-shadow: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.fastless-cache-button:hover {
    color: var(--fl-text);
    background: var(--fl-bg);
}

.fastless-cache-button--small {
    padding: 5px 10px;
    font-size: 12px;
}

.fastless-cache-button--primary {
    color: #fff;
    background: var(--fl-accent);
    border-color: var(--fl-accent);
}

.fastless-cache-button--primary:hover {
    color: #fff;
    background: var(--fl-accent-dark);
    border-color: var(--fl-accent-dark);
}

.fastless-cache-button--primary:disabled {
    opacity: .65;
    cursor: progress;
}

.fastless-cache-button--ghost {
    background: transparent;
    border-color: var(--fl-border-strong);
}

.fastless-cache-button--link {
    padding: 2px 6px;
    color: var(--fl-accent);
    background: none;
    border: 0;
}

.fastless-cache-button--link:hover {
    color: var(--fl-accent-dark);
    background: none;
}

.fastless-cache-button--danger {
    color: var(--fl-danger);
    background: var(--fl-surface);
    border-color: var(--fl-danger-line);
}

.fastless-cache-button--danger:hover {
    color: #fff;
    background: var(--fl-danger);
    border-color: var(--fl-danger);
}

.fastless-cache-button:disabled {
    opacity: .6;
    cursor: progress;
}

.fastless-cache-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 0 0;
}

.fastless-cache-actions--end {
    justify-content: flex-end;
    padding-top: 18px;
    border-top: 1px solid var(--fl-border);
}

.fastless-cache-actions form {
    display: inline-flex;
    margin: 0;
}

.fastless-cache-danger {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 16px 0 0;
    margin-top: 16px;
    border-top: 1px solid var(--fl-border);
}

.fastless-cache-danger form {
    margin: 0;
}

/* ------------------------------------------------------------------ empty */

.fastless-cache-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--fl-muted);
}

.fastless-cache-empty__icon {
    display: inline-grid;
    place-items: center;
    margin-bottom: 8px;
    color: var(--fl-border-strong);
}

.fastless-cache-empty p {
    margin: 0 0 14px;
    font-size: 13px;
}

/* ------------------------------------------------------------ responsive */

/* WordPress drops the admin menu to an overlay and narrows #wpcontent's padding
   to 10px here, so the header gutter has to follow or the bar overshoots the
   left edge of the window. The right gutter is deliberately left alone:
   .fastless-cache-wrap pins margin-right to 20px at every width, so it wins over
   WordPress's narrower .wrap rule and stays 20px down here too. */
@media screen and (max-width: 782px) {
    .fastless-cache-shell {
        --fl-content-pad: 10px;
        --fl-wrap-start: 0px;
    }
}

@media screen and (max-width: 1100px) {
    /* The sidebar folds into a row, but the header stays pinned: the save
       button lives there and must remain reachable on a long form. */
    .fastless-cache-panel {
        grid-template-columns: 1fr;
    }

    .fastless-cache-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 600px) {
    .fastless-cache-header__inner {
        flex-wrap: wrap;
        gap: 10px;
    }

    .fastless-cache-header__meta {
        width: 100%;
        justify-content: flex-end;
    }
}