/* ============================================================
   Smart Post Filter – default dark skin
   (accent colour configurable in the settings)
   ============================================================ */

:root {
    --spf-bg:           #1a1a1a;
    --spf-panel-bg:     #111111;
    --spf-card-bg:      #1e1e1e;
    --spf-border:       #2a2a2a;
    --spf-border-hover: #3a3a3a;
    --spf-text:         #e8e8e8;
    --spf-text-muted:   #888888;
    --spf-text-dim:     #555555;
    --spf-accent:       #e8a020;
    --spf-accent-dim:   rgba(232,160,32,.12);
    --spf-accent-hover: #f5b43a;
    --spf-active-bg:    #e8a020;
    --spf-active-text:  #111111;
    --spf-tag-bg:       #252525;
    --spf-input-bg:     #161616;
    --spf-hover-bg:     #222222;
    --spf-card-shadow:  0 2px 8px rgba(0,0,0,.5);
    --spf-card-hover:   0 6px 24px rgba(0,0,0,.7);
    --spf-radius:       6px;
    --spf-radius-sm:    4px;
    --spf-transition:   .18s ease;
    --spf-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.spf-wrapper {
    font-family: var(--spf-font);
    color:       var(--spf-text);
    font-size:   14px;
    line-height: 1.5;
}

/* ── Filter Panel ─────────────────────────────────────────── */
.spf-filter-panel {
    background:    var(--spf-panel-bg);
    border:        1px solid var(--spf-border);
    border-top:    3px solid var(--spf-accent);
    border-radius: var(--spf-radius);
    padding:       18px 20px 14px;
    margin-bottom: 24px;
}
.spf-filter-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   16px;
    flex-wrap:       wrap;
    gap:             8px;
}
.spf-filter-title {
    display:        flex;
    align-items:    center;
    gap:            7px;
    font-weight:    700;
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color:          var(--spf-accent);
}
.spf-result-count { font-size: 13px; color: var(--spf-text-muted); transition: opacity var(--spf-transition); }
.spf-result-count strong { color: var(--spf-accent); }
.spf-result-count.is-loading { opacity: .35; }

/* ── Filters Grid ─────────────────────────────────────────── */
.spf-filters-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap:                   16px 20px;
    margin-bottom:         16px;
}
.spf-filter-search { grid-column: 1 / -1; }

.spf-label {
    display:        block;
    font-weight:    700;
    font-size:      10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color:          var(--spf-text-dim);
    margin-bottom:  7px;
}

/* ── Inputs ───────────────────────────────────────────────── */
.spf-input {
    width:         100%;
    box-sizing:    border-box;
    border:        1px solid var(--spf-border);
    border-radius: var(--spf-radius-sm);
    padding:       8px 12px;
    font-size:     13px;
    font-family:   var(--spf-font);
    color:         var(--spf-text);
    background: var(--spf-input-bg);
    outline:       none;
    transition:    border-color var(--spf-transition), box-shadow var(--spf-transition);
}
.spf-input:focus {
    border-color: var(--spf-accent);
    box-shadow:   0 0 0 2px var(--spf-accent-dim);
}
.spf-select {
    appearance: none;
    cursor:     pointer;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpolyline points='1,1 6,7 11,1' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.spf-select option { background: var(--spf-input-bg); }

.spf-search-wrap { position: relative; }
.spf-search-icon {
    position: absolute; left: 10px; top: 50%;
    transform: translateY(-50%);
    color: var(--spf-text-dim); pointer-events: none;
}
.spf-search-input { padding-left: 34px !important; }
.spf-clear-search {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--spf-text-dim); padding: 0 4px;
}
.spf-clear-search:hover { color: var(--spf-accent); }

/* ── Checkbox list ────────────────────────────────────────── */
.spf-checkbox-list {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 170px; overflow-y: auto; padding-right: 2px;
}
.spf-checkbox-list::-webkit-scrollbar { width: 3px; }
.spf-checkbox-list::-webkit-scrollbar-track { background: var(--spf-panel-bg); }
.spf-checkbox-list::-webkit-scrollbar-thumb { background: var(--spf-border-hover); border-radius: 3px; }

.spf-checkbox-item {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 7px; border-radius: var(--spf-radius-sm);
    cursor: pointer; user-select: none;
    transition: background var(--spf-transition);
}
.spf-checkbox-item:hover { background: var(--spf-hover-bg); }
.spf-checkbox-item.is-active { background: var(--spf-accent-dim); }
.spf-checkbox { display: none; }
.spf-checkbox-label { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 13px; color: var(--spf-text-muted); }
.spf-checkbox-item.is-active .spf-checkbox-label { color: var(--spf-text); }
.spf-checkbox-item .spf-count {
    margin-left: auto; font-size: 10px;
    color: var(--spf-text-dim); background: var(--spf-hover-bg);
    border-radius: 10px; padding: 1px 6px;
}
.spf-checkbox-item::before {
    content: ''; width: 14px; height: 14px; min-width: 14px;
    border: 1.5px solid var(--spf-border-hover); border-radius: 3px;
    transition: background var(--spf-transition), border-color var(--spf-transition);
}
.spf-checkbox-item.is-active::before {
    background: var(--spf-accent); border-color: var(--spf-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpolyline points='1,4 4,7 9,1' fill='none' stroke='%23111' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center;
}

/* ── Tag cloud ────────────────────────────────────────────── */
.spf-tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.spf-tag-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; background: var(--spf-tag-bg);
    border: 1px solid var(--spf-border); border-radius: 3px;
    font-size: 12px; font-family: var(--spf-font);
    color: var(--spf-text-muted); cursor: pointer;
    transition: all var(--spf-transition);
}
.spf-tag-btn:hover     { border-color: var(--spf-accent); color: var(--spf-text); }
.spf-tag-btn.is-active { background: var(--spf-accent); border-color: var(--spf-accent); color: var(--spf-active-text); font-weight: 700; }
.spf-tag-btn .spf-count { font-size: 10px; opacity: .55; }

/* ── Sort bar ─────────────────────────────────────────────── */
.spf-sort-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 14px; border-top: 1px solid var(--spf-border); margin-bottom: 10px;
}
.spf-sort-bar .spf-label { margin-bottom: 0; white-space: nowrap; }
.spf-sort-buttons { display: flex; flex-wrap: wrap; gap: 4px; }
.spf-sort-btn {
    padding: 4px 11px; background: var(--spf-input-bg);
    border: 1px solid var(--spf-border); border-radius: 3px;
    font-size: 12px; font-family: var(--spf-font);
    color: var(--spf-text-muted); cursor: pointer;
    transition: all var(--spf-transition);
}
.spf-sort-btn:hover     { border-color: var(--spf-accent); color: var(--spf-text); }
.spf-sort-btn.is-active { background: var(--spf-accent); border-color: var(--spf-accent); color: var(--spf-active-text); font-weight: 700; }

.spf-order-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; background: var(--spf-input-bg);
    border: 1px solid var(--spf-border); border-radius: 3px;
    cursor: pointer; transition: all var(--spf-transition);
    margin-left: auto; color: var(--spf-text-muted);
}
.spf-order-toggle:hover { border-color: var(--spf-accent); color: var(--spf-accent); }
.spf-order-toggle[data-order="ASC"] .spf-order-icon { transform: rotate(180deg); }
.spf-order-icon { transition: transform var(--spf-transition); }

/* ── Filter footer ────────────────────────────────────────── */
.spf-filter-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 26px; }
.spf-active-tags   { display: flex; flex-wrap: wrap; gap: 5px; }
.spf-active-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; background: var(--spf-accent);
    color: var(--spf-active-text); border-radius: 3px; font-size: 11px; font-weight: 700;
    animation: spf-pill-in .12s ease;
}
@keyframes spf-pill-in { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
.spf-pill-remove {
    background: none; border: none; cursor: pointer;
    color: rgba(0,0,0,.45); font-size: 15px; line-height: 1; padding: 0;
    transition: color var(--spf-transition);
}
.spf-pill-remove:hover { color: var(--spf-active-text); }
.spf-reset-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; background: none; border: 1px solid var(--spf-border-hover);
    border-radius: 3px; font-size: 11px; font-family: var(--spf-font);
    color: var(--spf-text-dim); cursor: pointer; margin-left: auto;
    transition: all var(--spf-transition);
}
.spf-reset-btn:hover { border-color: #c0392b; color: #c0392b; }

/* ── Results / Loading ────────────────────────────────────── */
.spf-results-section { position: relative; }
.spf-loading-overlay {
    position: absolute; inset: 0; background: color-mix(in srgb, var(--spf-panel-bg) 65%, transparent);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--spf-radius); z-index: 10;
    opacity: 0; pointer-events: none; transition: opacity var(--spf-transition);
}
.spf-loading-overlay.is-visible { opacity: 1; pointer-events: all; }
.spf-spinner {
    width: 30px; height: 30px;
    border: 3px solid var(--spf-border); border-top-color: var(--spf-accent);
    border-radius: 50%; animation: spf-spin .6s linear infinite;
}
@keyframes spf-spin { to { transform: rotate(360deg); } }

/* ── Grid / List ──────────────────────────────────────────── */
.spf-posts--grid { display: grid; gap: 14px; }
.spf-posts--cols-2 { grid-template-columns: repeat(2, 1fr); }
.spf-posts--cols-3 { grid-template-columns: repeat(3, 1fr); }
.spf-posts--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
    .spf-posts--cols-3,
    .spf-posts--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .spf-posts--cols-2,
    .spf-posts--cols-3,
    .spf-posts--cols-4 { grid-template-columns: 1fr; }
}
.spf-posts--list           { display: flex; flex-direction: column; gap: 8px; }
.spf-posts--list .spf-card { flex-direction: row; }
.spf-posts--list .spf-card__thumb     { width: 170px; flex-shrink: 0; }
.spf-posts--list .spf-card__thumb,
.spf-posts--list .spf-card__thumb img { height: 110px; aspect-ratio: unset; }

/* ── Card ─────────────────────────────────────────────────── */
.spf-card {
    background: var(--spf-card-bg); border: 1px solid var(--spf-border);
    border-radius: var(--spf-radius); overflow: hidden;
    box-shadow: var(--spf-card-shadow);
    transition: box-shadow var(--spf-transition), border-color var(--spf-transition), transform var(--spf-transition);
    display: flex; flex-direction: column;
    animation: spf-card-in .2s ease both;
}
.spf-card:hover { box-shadow: var(--spf-card-hover); border-color: var(--spf-border-hover); transform: translateY(-2px); }
@keyframes spf-card-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

.spf-card__thumb-link { display: block; }
.spf-card__thumb { overflow: hidden; aspect-ratio: 16/9; background: var(--spf-panel-bg); position: relative; }
.spf-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; }
.spf-card:hover .spf-card__thumb img { transform: scale(1.05); }

.spf-card__body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.spf-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; flex-wrap: wrap; }
.spf-card__cat {
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--spf-accent); background: var(--spf-accent-dim);
    padding: 2px 6px; border-radius: 3px;
    border: 1px solid rgba(232,160,32,.2);
}
.spf-card__date { font-size: 11px; color: var(--spf-text-dim); margin-left: auto; }
.spf-card__title { margin: 0 0 7px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.spf-card__title a { color: var(--spf-text); text-decoration: none; }
.spf-card__title a:hover { color: var(--spf-accent); }
.spf-card__excerpt { font-size: 12px; color: var(--spf-text-muted); margin: 0 0 10px; flex: 1; line-height: 1.5; }
.spf-card__footer {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-top: auto; padding-top: 8px; border-top: 1px solid var(--spf-border); font-size: 11px;
}
.spf-card__author { color: var(--spf-text-dim); }
.spf-card__tags   { display: flex; flex-wrap: wrap; gap: 3px; }
.spf-card__tag {
    background: var(--spf-hover-bg); border: 1px solid var(--spf-border); border-radius: 3px;
    padding: 1px 6px; font-size: 10px; color: var(--spf-text-muted);
}
.spf-card__readmore {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 600; font-size: 11px; color: var(--spf-accent);
    text-decoration: none; margin-left: auto;
    transition: gap var(--spf-transition), color var(--spf-transition);
}
.spf-card__readmore:hover { gap: 7px; color: var(--spf-accent-hover); }

/* ── No results ───────────────────────────────────────────── */
.spf-no-results { text-align: center; padding: 60px 20px; color: var(--spf-text-dim); }
.spf-no-results svg { display: block; margin: 0 auto 14px; opacity: .2; }
.spf-no-results p   { font-size: 14px; margin: 0; }

/* ── Pagination ───────────────────────────────────────────── */
.spf-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             4px;
    flex-wrap:       wrap;
    margin-top:      28px;
}
.spf-page-btn {
    width:           32px;
    height:          32px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background: var(--spf-input-bg);
    border:          1px solid var(--spf-border);
    border-radius:   var(--spf-radius-sm);
    font-size:       13px;
    font-family:     var(--spf-font);
    color:           var(--spf-text-muted);
    cursor:          pointer;
    transition:      all var(--spf-transition);
    flex-shrink:     0;
}
.spf-page-btn:hover:not(:disabled):not(.is-current) { border-color: var(--spf-accent); color: var(--spf-accent); }
.spf-page-btn.is-current   { background: var(--spf-accent); border-color: var(--spf-accent); color: var(--spf-active-text); font-weight: 700; cursor: default; }
.spf-page-btn.is-disabled,
.spf-page-btn:disabled     { opacity: .3; cursor: not-allowed; }
.spf-page-prev,
.spf-page-next             { color: var(--spf-text-muted); }
.spf-page-prev svg,
.spf-page-next svg         {
    display:    block !important;
    visibility: visible !important;
    stroke:     #888888 !important;
    fill:       none !important;
    width:      14px !important;
    height:     14px !important;
}
.spf-page-prev:hover svg,
.spf-page-next:hover svg   { stroke: var(--spf-accent) !important; }

.spf-page-ellipsis {
    width:           24px;
    text-align:      center;
    color:           var(--spf-text-dim);
    font-size:       13px;
    letter-spacing:  .05em;
    flex-shrink:     0;
    line-height:     32px;
}

.spf-page-info {
    font-size:   12px;
    color:       var(--spf-text-dim);
    margin-left: 8px;
    white-space: nowrap;
}

/* ================================================================
   MULTISELECT WIDGET
================================================================ */

.spf-multiselect {
    position: relative;
}

/* ── Trigger button ───────────────────────────────────────── */
.spf-ms-trigger {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             6px;
    cursor:          pointer;
    text-align:      left;
    white-space:     nowrap;
    overflow:        hidden;
    color:           var(--spf-text-muted);
    user-select:     none;
    transition:      border-color var(--spf-transition), color var(--spf-transition), box-shadow var(--spf-transition);
}
.spf-ms-trigger:hover,
.spf-ms-trigger.is-open  { border-color: var(--spf-accent); color: var(--spf-text); }
.spf-ms-trigger.has-value { color: var(--spf-text); }
.spf-ms-trigger.is-open   { box-shadow: 0 0 0 2px var(--spf-accent-dim); }

.spf-ms-arrow {
    flex-shrink: 0;
    color: var(--spf-text-dim);
    transition: transform var(--spf-transition);
}
.spf-ms-trigger.is-open .spf-ms-arrow { transform: rotate(180deg); }

.spf-ms-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       18px;
    height:          18px;
    padding:         0 5px;
    background:      var(--spf-accent);
    color: var(--spf-active-text);
    border-radius:   3px;
    font-size:       11px;
    font-weight:     700;
    margin-right:    2px;
}

/* ── Dropdown ─────────────────────────────────────────────── */
.spf-ms-dropdown {
    position:     absolute;
    top:          calc(100% + 4px);
    left:         0;
    right:        0;
    z-index:      9999;
    background: var(--spf-input-bg);
    border:       1px solid var(--spf-accent);
    border-radius:var(--spf-radius);
    box-shadow:   0 8px 28px rgba(0,0,0,.7);
    min-width:    200px;
    display:      flex;
    flex-direction: column;
    max-height:   280px;
    overflow:     hidden;
}
.spf-ms-dropdown--up {
    top:    auto;
    bottom: calc(100% + 4px);
}
.spf-ms-dropdown[hidden] { display: none; }

/* ── Search inside dropdown ───────────────────────────────── */
.spf-ms-search-wrap {
    display:     flex;
    align-items: center;
    gap:         7px;
    padding:     8px 10px;
    border-bottom: 1px solid var(--spf-border);
    flex-shrink: 0;
    color:       var(--spf-text-dim);
}
.spf-ms-search {
    flex:        1;
    background:  none;
    border:      none;
    outline:     none;
    color:       var(--spf-text);
    font-size:   13px;
    font-family: var(--spf-font);
    padding:     0;
}
.spf-ms-search::placeholder { color: var(--spf-text-dim); }

/* ── Item list ────────────────────────────────────────────── */
.spf-ms-list {
    list-style:  none;
    margin:      0;
    padding:     4px 0;
    overflow-y:  auto;
    flex:        1;
}
.spf-ms-list::-webkit-scrollbar       { width: 3px; }
.spf-ms-list::-webkit-scrollbar-track { background: var(--spf-panel-bg); }
.spf-ms-list::-webkit-scrollbar-thumb { background: var(--spf-border-hover); border-radius: 3px; }

.spf-ms-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     7px 10px;
    cursor:      pointer;
    transition:  background var(--spf-transition);
    font-size:   13px;
}
.spf-ms-item:hover        { background: var(--spf-hover-bg); }
.spf-ms-item.is-selected  { background: var(--spf-accent-dim); }

/* Fake checkbox */
.spf-ms-item-check {
    width:         13px;
    height:        13px;
    min-width:     13px;
    border:        1.5px solid var(--spf-border-hover);
    border-radius: 3px;
    flex-shrink:   0;
    transition:    background var(--spf-transition), border-color var(--spf-transition);
}
.spf-ms-item.is-selected .spf-ms-item-check {
    background:   var(--spf-accent);
    border-color: var(--spf-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7' viewBox='0 0 9 7'%3E%3Cpolyline points='1,3.5 3.5,6 8,1' fill='none' stroke='%23111' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: center;
}

/* Single-select: circle instead of square */
.spf-multiselect--single .spf-ms-item-check { border-radius: 50%; }
.spf-multiselect--single .spf-ms-item.is-selected .spf-ms-item-check {
    background-image: none;
    box-shadow: inset 0 0 0 3px var(--spf-panel-bg);
}

.spf-ms-item-label {
    flex:      1;
    color:     var(--spf-text-muted);
    overflow:  hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.spf-ms-item.is-selected .spf-ms-item-label { color: var(--spf-text); }

.spf-ms-item-count {
    font-size:  10px;
    color:      var(--spf-text-dim);
    background: var(--spf-hover-bg);
    border-radius: 10px;
    padding:    1px 6px;
    flex-shrink:0;
}

/* ── Footer (load more + spinner) ────────────────────────── */
.spf-ms-footer {
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       6px 10px;
    border-top:    1px solid var(--spf-border);
    flex-shrink:   0;
    min-height:    32px;
}
.spf-ms-more {
    background:  none;
    border:      1px solid var(--spf-border-hover);
    border-radius: 3px;
    padding:     3px 12px;
    font-size:   11px;
    font-family: var(--spf-font);
    color:       var(--spf-text-muted);
    cursor:      pointer;
    transition:  all var(--spf-transition);
}
.spf-ms-more:hover { border-color: var(--spf-accent); color: var(--spf-accent); }
.spf-ms-more[hidden], .spf-ms-spinner[hidden] { display: none; }

.spf-ms-spinner {
    width:        16px;
    height:       16px;
    border:       2px solid var(--spf-border);
    border-top-color: var(--spf-accent);
    border-radius: 50%;
    animation:    spf-spin .6s linear infinite;
}

/* ── Paid mods (shop reposts) – 1.3.0 ─────────────────────────────────── */
.spf-type-toggle { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 13px; cursor: pointer; user-select: none; }
.spf-type-toggle[hidden] { display: none; }
.spf-type-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--spf-accent); cursor: pointer; }
.spf-type-count { opacity: .6; }

/* ── Consistency fixes – 1.3.0 ────────────────────────────────────────── */
/* one font everywhere: the site's (labels and headings already used it, controls fell back to the system font) */
.spf-wrapper { --spf-font: inherit; font-family: inherit; }
.spf-wrapper :is(button, input, select, textarea) { font-family: inherit; }

/* filter controls: same height, radius, colour and case as the category/author pickers */
.spf-wrapper .spf-ms-trigger,
.spf-wrapper .spf-select { height: 34px; min-height: 34px; box-sizing: border-box; border-radius: var(--spf-radius-sm); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--spf-text-muted); line-height: 1; }
.spf-wrapper .spf-select:focus,
.spf-wrapper .spf-select:hover { color: var(--spf-text); }
.spf-wrapper .spf-ms-trigger.has-value { color: var(--spf-text); }
.spf-wrapper .spf-ms-trigger, .spf-wrapper .spf-select { font-weight: 700; }
.spf-wrapper .spf-select { background-size: 9px 6px; background-position: right 13px center; }

/* sort bar: buttons and the direction toggle in one row, same height; the arrow keeps its size (the theme squeezed it to 0) */
.spf-wrapper .spf-sort-btn { height: 26px; padding: 0 11px; line-height: 24px; font-size: 11px; letter-spacing: .03em; }
.spf-wrapper .spf-order-toggle { width: 26px; height: 26px; padding: 0; margin-left: 4px; }
.spf-wrapper .spf-order-icon { width: 14px !important; height: 14px !important; min-width: 14px; flex: 0 0 14px; display: block; }

/* optional post type boxes: same small caps as the labels */
.spf-wrapper .spf-type-toggle { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--spf-text-muted); margin: 2px 0 12px; }
.spf-wrapper .spf-type-toggle:hover { color: var(--spf-text); }

/* highlight rules (settings → Highlight Rules): colour in --spf-hl – 1.5.0 */
.spf-card--hl-glow   { box-shadow: 0 0 10px var(--spf-hl, #daa520); border-color: var(--spf-hl, #daa520); }
.spf-card--hl-glow:hover { box-shadow: 0 0 16px var(--spf-hl, #daa520); }
.spf-card--hl-border { border: 2px solid var(--spf-hl, #daa520); }
.spf-card__badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--spf-active-text); background: var(--spf-hl, #daa520); padding: 2px 6px; border-radius: 3px; margin-right: 4px;
}

/* accent colour from the settings (--spf-accent on .spf-wrapper): derived shades follow it – 1.5.0 */
.spf-wrapper { --spf-accent-dim: color-mix(in srgb, var(--spf-accent) 12%, transparent); --spf-accent-hover: color-mix(in srgb, var(--spf-accent) 85%, #fff); --spf-active-bg: var(--spf-accent); }
.spf-wrapper .spf-card__cat { border-color: color-mix(in srgb, var(--spf-accent) 20%, transparent); }

/* ── Styles (settings → Appearance → Style) – 1.6.0 ───────────────────── */
.spf-wrapper.spf-skin-light {
    --spf-bg: #ffffff; --spf-panel-bg: #f6f7f7; --spf-card-bg: #ffffff; --spf-border: #dcdcde; --spf-border-hover: #c3c4c7;
    --spf-text: #1d2327; --spf-text-muted: #50575e; --spf-text-dim: #8c8f94; --spf-tag-bg: #f0f0f1;
    --spf-input-bg: #ffffff; --spf-hover-bg: #f0f0f1; --spf-active-text: #ffffff;
    --spf-card-shadow: 0 1px 3px rgba(0,0,0,.08); --spf-card-hover: 0 4px 16px rgba(0,0,0,.12);
}
.spf-wrapper.spf-skin-theme {
    --spf-bg: transparent; --spf-panel-bg: color-mix(in srgb, currentColor 4%, transparent); --spf-card-bg: color-mix(in srgb, currentColor 5%, transparent);
    --spf-border: color-mix(in srgb, currentColor 18%, transparent); --spf-border-hover: color-mix(in srgb, currentColor 30%, transparent);
    --spf-text: currentColor; --spf-text-muted: color-mix(in srgb, currentColor 65%, transparent); --spf-text-dim: color-mix(in srgb, currentColor 45%, transparent);
    --spf-tag-bg: color-mix(in srgb, currentColor 8%, transparent); --spf-input-bg: color-mix(in srgb, currentColor 6%, transparent); --spf-hover-bg: color-mix(in srgb, currentColor 10%, transparent);
    --spf-card-shadow: none; --spf-card-hover: 0 4px 16px rgba(0,0,0,.15);
}