/* ═══════════════════════════════════════════════════
   REVIEW LIST — THEMED TO MATCH SITE (green/navy)
   ═══════════════════════════════════════════════════ */

a { color: inherit; text-decoration: none }
button { cursor: pointer; font-family: inherit }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px) }
    to   { opacity: 1; transform: translateY(0) }
}
@keyframes cardIn {
    from { opacity: 0; transform: translateY(10px) }
    to   { opacity: 1; transform: translateY(0) }
}
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes shimmer {
    0%   { background-position: -700px 0 }
    100% { background-position:  700px 0 }
}
@keyframes drawerIn {
    from { transform: translateX(100%) }
    to   { transform: translateX(0) }
}
@keyframes backdropIn {
    from { opacity: 0 }
    to   { opacity: 1 }
}
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(76,175,80,.45)} 50%{box-shadow:0 0 0 6px rgba(76,175,80,0)} }

/* ─────────────────────────────────────────
   PAGE HERO — site primary green #4CAF50
───────────────────────────────────────── */
.rl-hero {
    background: linear-gradient(to right, #4CAF50 0%, #4CAF50 51%, #4CAF50 100%);
    padding: 2.8rem 2rem 3.2rem;
    position: relative;
    overflow: hidden;
}
.rl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 80% 50%, rgba(91,114,232,.25), transparent),
        radial-gradient(ellipse 40% 60% at 10% 80%, rgba(255,255,255,.08), transparent);
    pointer-events: none;
}
.rl-hero::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    pointer-events: none;
}
.rl-hero-inner {
    max-width: var(--container, 1200px);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.rl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 100px;
    padding: .28rem .85rem;
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .9rem;
}
.rl-hero-badge .badge-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    opacity: .85;
    animation: pulse 2s infinite;
}
.rl-hero-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(1.75rem, 3.2vw, 2.6rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.03em;
    margin-bottom: .6rem;
    animation: fadeUp .5s .05s ease both;
}
.rl-hero-title span {
    background: linear-gradient(90deg, #a6ff05, #e5f230);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.rl-hero-sub {
    font-size: .9rem;
    color: rgba(255,255,255,.88);
    max-width: 500px;
    line-height: 1.65;
    margin-bottom: 1.6rem;
    animation: fadeUp .5s .1s ease both;
}
.rl-hero-stats {
    display: flex;
    gap: 2.2rem;
    flex-wrap: wrap;
    animation: fadeUp .5s .15s ease both;
}
.rl-hero-stat strong {
    display: block;
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.rl-hero-stat span {
    font-size: .68rem;
    color: rgba(255,255,255,.75);
    margin-top: .2rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Tool-filter banner */
.rl-tool-banner {
    background: linear-gradient(90deg, #f0fdf4, #eff6ff);
    border-bottom: 1px solid #bbf7d0;
    padding: .65rem 2rem;
}
.rl-tool-banner-inner {
    max-width: var(--container, 1200px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .83rem;
}
.rl-tool-banner .tb-label { font-weight: 700; color: var(--dark) }
.rl-tool-banner .tb-sub   { color: #16a34a; font-weight: 600 }
.tb-clear {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 700;
    color: #2B3BAB;
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: underline;
}

/* ─────────────────────────────────────────
   BREADCRUMB
───────────────────────────────────────── */
.breadcrumb {
    background: rgba(255,255,255,.97);
    border-bottom: 1px solid var(--border);
}
.breadcrumb-inner {
    max-width: var(--container, 1200px);
    margin: 0 auto;
    padding: .7rem 2rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    color: var(--muted);
}
.bc-sep { color: var(--border) }
.bc-link { color: var(--sub); font-weight: 500; transition: color .15s }
.bc-link:hover { color: var(--navy) }
.bc-cur { color: var(--dark); font-weight: 700 }

/* ─────────────────────────────────────────
   STICKY FILTER BAR
───────────────────────────────────────── */
.filter-bar {
    position: sticky;
    top: 64px;
    z-index: 200;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border);
    padding: .6rem 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.filter-bar-inner {
    max-width: var(--container, 1200px);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.fb-search {
    position: relative;
    flex: 1;
    min-width: 190px;
}
.fb-search svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    stroke: var(--muted);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    pointer-events: none;
}
.fb-search input {
    width: 100%;
    padding: .46rem .85rem .46rem 2.1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-size: .81rem;
    color: var(--text);
    background: #fff;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.fb-search input:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76,175,80,.1);
}
.fb-search input::placeholder { color: #c4c9d4 }

.fb-select {
    padding: .43rem .75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-size: .77rem;
    color: var(--sub);
    background: #fff;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    padding-right: 1.85rem;
    cursor: pointer;
    transition: border-color .15s;
    flex-shrink: 0;
}
.fb-select:focus { border-color: #4CAF50 }

.fb-clear {
    display: none;
    padding: .42rem .72rem;
    border-radius: var(--radius);
    border: 1.5px solid #fecdd3;
    background: #fff5f5;
    font-size: .73rem;
    font-weight: 700;
    color: #ef4444;
    transition: all .15s;
    flex-shrink: 0;
    align-items: center;
    gap: .28rem;
}
.fb-clear:hover { background: #fecdd3 }
.fb-clear.show { display: flex }

.fb-results {
    font-size: .73rem;
    color: var(--muted);
    flex-shrink: 0;
    white-space: nowrap;
}
.fb-results strong { color: var(--dark) }

/* star pills */
.star-pills { display: flex; gap: .3rem; flex-wrap: wrap }
.sp {
    padding: .24rem .62rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .8rem;
    font-weight: 500;
    color: var(--sub);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.sp:hover { border-color: var(--navy); color: var(--navy) }
.sp.on {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-weight: 700;
}

/* ─────────────────────────────────────────
   MAIN LAYOUT
───────────────────────────────────────── */
.page-wrap {
    max-width: var(--container, 1200px);
    margin: 0 auto;
    padding: 1.75rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

/* ─────────────────────────────────────────
   RESULTS HEADER
───────────────────────────────────────── */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .65rem;
    margin-bottom: 1.1rem;
}
.rh-left { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap }
.rh-title {
    font-family: 'Syne', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    color: var(--dark);
}
.rh-count { font-size: .77rem; color: var(--muted) }
.rh-count strong { color: var(--dark) }
.rh-active-filters { display: flex; gap: .3rem; flex-wrap: wrap }
.af-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .17rem .58rem;
    border-radius: 100px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    font-size: .65rem;
    font-weight: 700;
    color: #15803d;
}
.af-tag button {
    background: none; border: none; padding: 0;
    color: #15803d; font-size: .67rem; line-height: 1;
    cursor: pointer; opacity: .6; transition: opacity .15s;
}
.af-tag button:hover { opacity: 1 }
.sort-wrap { display: flex; align-items: center; gap: .45rem }
.sort-label { font-size: .73rem; color: var(--muted); white-space: nowrap }
.sort-sel {
    padding: .4rem .75rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-family: 'Inter', sans-serif;
    font-size: .76rem;
    color: var(--sub);
    background: #fff;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    padding-right: 1.85rem;
    cursor: pointer;
    transition: border-color .15s;
}
.sort-sel:focus { border-color: #4CAF50 }

/* ─────────────────────────────────────────
   REVIEW CARDS — glass + site-themed
───────────────────────────────────────── */
.review-list { display: flex; flex-direction: column; gap: .9rem }

.rc {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 0;
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: cardIn .3s ease both;
    cursor: pointer;
    overflow: hidden;
}
.rc:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(76,175,80,.35);
}

/* green left accent bar */
.rc::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #4CAF50, #CDDC39);
    border-radius: 0;
}
.rc.top::before {
    background: linear-gradient(90deg, var(--navy), #5b72e8);
}
.rc.critical::before {
    background: linear-gradient(90deg, #ef4444, #f87171);
}

/* top badge */
.rc-badge-row {
    padding: .6rem 1.4rem 0;
    display: none;
}
.rc.top .rc-badge-row,
.rc.critical .rc-badge-row { display: block }
.rc-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: .18rem .6rem;
    border-radius: 100px;
}
.rc.top    .rc-badge { background: #eff6ff; color: var(--navy); border: 1px solid #bfdbfe }
.rc.critical .rc-badge { background: #fff1f1; color: #ef4444; border: 1px solid #fecaca }

.rc-inner { padding: 1.2rem 1.4rem 1.3rem }

/* ─── TOOL STRIP (card-style, prominent) ─── */
.rc-tool {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1rem;
    background: linear-gradient(135deg, #f8fff8, #f0f9f0);
    border: 2px solid #4CAF50;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    transition: all .18s;
    box-shadow: 0 2px 8px rgba(76,175,80,.12);
    position: relative;
    overflow: hidden;
}
.rc-tool::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #4CAF50, #CDDC39);
}
.rc-tool:hover {
    background: linear-gradient(135deg, #f0fff0, #e6f7e6);
    border-color: #388E3C;
    box-shadow: 0 4px 16px rgba(76,175,80,.2);
    transform: translateY(-1px);
}
.rc-tool-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(0,0,0,.08);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    margin-left: .25rem;
}
.rc-tool-icon img { width: 100%; height: 100%; object-fit: contain }
.rc-tool-info { flex: 1; min-width: 0 }
.rc-tool-name {
    font-size: .95rem;
    font-weight: 800;
    color: var(--dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rc-tool-meta {
    font-size: .73rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-top: .06rem;
}
.rc-tool-score { display: flex; align-items: center; gap: .15rem }
.rc-tool-score-stars { font-size: .8rem; color: #4CAF50; letter-spacing: .04em }
.rc-tool-score-val { font-size: .8rem; font-weight: 700; color: var(--dark) }
.rc-tool-dot { color: var(--border) }
.rc-tool-cat {
    font-size: .62rem;
    font-weight: 700;
    padding: .1rem .42rem;
    border-radius: 100px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    white-space: nowrap;
}
.rc-tool-pricing {
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .42rem;
    border-radius: 100px;
    white-space: nowrap;
}
.rc-tool-pricing.free     { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0 }
.rc-tool-pricing.paid     { background: #fff7ed; color: #ea580c; border: 1px solid #fed7aa }
.rc-tool-pricing.freemium { background: #eff6ff; color: var(--navy); border: 1px solid #bfdbfe }
.rc-tool-link {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    margin-left: auto;
    flex-shrink: 0;
    padding: .3rem .75rem;
    border-radius: var(--radius);
    background: #4CAF50;
    transition: all .15s;
    box-shadow: 0 2px 6px rgba(76,175,80,.3);
}
.rc-tool-link:hover { background: #388E3C; box-shadow: 0 4px 12px rgba(76,175,80,.4) }

/* reviewer head */
.rc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .55rem;
}
.rc-user { display: flex; align-items: center; gap: .65rem }
.rc-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .88rem;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.rc-name {
    font-size: .9rem;
    font-weight: 700;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}
.rc-vbadge {
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    padding: .08rem .38rem;
    border-radius: 100px;
}
.rc-role { font-size: .75rem; color: var(--muted); margin-top: .04rem }
.rc-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
    flex-shrink: 0;
}
.rc-stars { display: flex; gap: .08rem }
.rc-star { font-size: 1.05rem; color: #4CAF50 }
.rc-star.dim { color: var(--border); }
.rc-date { font-size: .64rem; color: var(--muted) }

/* body */
.rc-title {
    font-size: .93rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: .42rem;
    line-height: 1.35;
}
.rc-body { font-size: .86rem; color: var(--sub); line-height: 1.7 }
.rc-body.clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rc-toggle {
    font-size: .74rem;
    color: var(--navy);
    font-weight: 700;
    cursor: pointer;
    margin-top: .32rem;
    display: inline-block;
    transition: color .15s;
}
.rc-toggle:hover { color: #4CAF50 }

/* sub-ratings */
.rc-subs {
    display: flex;
    gap: .85rem;
    flex-wrap: wrap;
    margin-top: .8rem;
    padding-top: .72rem;
    border-top: 1px solid var(--border);
}
.rc-sub { display: flex; align-items: center; gap: .3rem }
.rc-sub-lbl {
    font-size: .6rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.rc-sub-stars { display: flex; gap: .04rem }
.rc-sub-star { font-size: .7rem; color: #4CAF50 }
.rc-sub-star.dim { color: var(--border) }

/* pros/cons */
.rc-procon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem;
    margin-top: .8rem;
    padding-top: .72rem;
    border-top: 1px solid var(--border);
}
.rc-pros { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius); padding: .6rem .75rem }
.rc-cons { background: #fff5f5; border: 1px solid #fecdd3; border-radius: var(--radius); padding: .6rem .75rem }
.rc-pc-h {
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .38rem;
}
.rc-pros .rc-pc-h { color: #15803d }
.rc-cons .rc-pc-h { color: #ef4444 }
.rc-pc-list { list-style: none; display: flex; flex-direction: column; gap: .2rem }
.rc-pc-list li {
    font-size: .79rem;
    color: #1e293b;
    display: flex;
    align-items: flex-start;
    gap: .28rem;
    line-height: 1.4;
    font-weight: 500;
}
.rc-pc-list li::before { flex-shrink: 0; margin-top: .04rem }
.rc-pros .rc-pc-list li::before { content: '✓'; color: #15803d; font-weight: 800 }
.rc-cons .rc-pc-list li::before { content: '✗'; color: #ef4444; font-weight: 800 }

/* tags */
.rc-tags { display: flex; flex-wrap: wrap; gap: .26rem; margin-top: .75rem }
.rc-tag {
    font-size: .7rem;
    font-weight: 500;
    padding: .14rem .46rem;
    border-radius: 100px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--sub);
    cursor: pointer;
    transition: all .15s;
}
.rc-tag:hover { border-color: #4CAF50; color: #15803d; background: #f0fdf4 }

/* card footer */
.rc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .9rem;
    padding-top: .72rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
    gap: .55rem;
}
.rc-helpful { display: flex; align-items: center; gap: .38rem }
.rc-helpful-lbl { font-size: .68rem; color: var(--muted) }
.rc-hbtn {
    display: inline-flex;
    align-items: center;
    gap: .26rem;
    padding: .26rem .6rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .68rem;
    font-weight: 600;
    color: var(--sub);
    transition: all .15s;
}
.rc-hbtn:hover, .rc-hbtn.voted { border-color: #4CAF50; color: #15803d; background: #f0fdf4 }
.rc-hbtn.dn:hover, .rc-hbtn.dn.voted { border-color: #ef4444; color: #ef4444; background: #fff5f5 }
.rc-actions { display: flex; align-items: center; gap: .5rem }
.rc-action {
    font-size: .68rem;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}
.rc-action:hover { color: var(--navy) }
.rc-action.danger:hover { color: #ef4444 }

/* click hint */
.rc-click-hint {
    position: absolute;
    bottom: .55rem;
    right: 1rem;
    font-size: .62rem;
    font-weight: 600;
    color: #4CAF50;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
.rc:hover .rc-click-hint { opacity: 1 }

/* ── Skeleton ── */
.skeleton { background: #fff; border-radius: var(--radius-xl); padding: 1.35rem 1.45rem; border: 1.5px solid var(--border) }
.skel-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 700px 100%;
    animation: shimmer 1.4s infinite;
    margin-bottom: .6rem;
}
.skel-line.short { width: 38% }
.skel-line.med   { width: 62% }
.skel-line.full  { width: 100% }
.skel-head { display: flex; gap: .7rem; align-items: center; margin-bottom: .9rem }
.skel-av {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 700px 100%;
    animation: shimmer 1.4s infinite;
}

/* ── Empty state ── */
.empty-state { text-align: center; padding: 4rem 1rem; display: none }
.empty-state.show { display: block }
.es-icon { font-size: 2.8rem; margin-bottom: .9rem }
.es-title { font-family: 'Syne',sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--dark); margin-bottom: .3rem }
.es-sub { font-size: .82rem; color: var(--muted); margin-bottom: 1.1rem }
.es-clear { padding: .55rem 1.3rem; border-radius: var(--radius); border: 1.5px solid var(--border); background: #fff; font-size: .82rem; font-weight: 700; color: var(--sub); transition: all .15s }
.es-clear:hover { border-color: #4CAF50; color: #15803d }

/* ─────────────────────────────────────────
   PAGINATION
───────────────────────────────────────── */
.pagination { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1.75rem; flex-wrap: wrap }
.pg-btn {
    min-width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .8rem;
    font-weight: 700;
    color: var(--sub);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    cursor: pointer;
    padding: 0 .55rem;
}
.pg-btn:hover { border-color: var(--navy); color: var(--navy); background: #eff6ff }
.pg-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 2px 10px rgba(43,59,171,.3) }
.pg-btn.disabled { opacity: .38; pointer-events: none }
.pg-dots { color: var(--muted); font-size: .82rem; padding: 0 .2rem; display: flex; align-items: center }
.pg-info { font-size: .72rem; color: var(--muted); margin-top: .55rem; text-align: center }
.pg-info strong { color: var(--dark) }

/* Load more */
.load-more-wrap { text-align: center; margin-top: 1.25rem }
.btn-load-more {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .65rem 1.6rem;
    border-radius: var(--radius);
    border: 1.5px solid rgba(76,175,80,.35);
    background: rgba(76,175,80,.07);
    font-size: .84rem;
    font-weight: 700;
    color: #15803d;
    transition: all .2s;
    cursor: pointer;
}
.btn-load-more:hover { background: #4CAF50; color: #fff; border-color: #4CAF50; box-shadow: 0 4px 14px rgba(76,175,80,.3) }
.btn-load-more.loading { opacity: .6; pointer-events: none }

/* ─────────────────────────────────────────
   RIGHT SIDEBAR
───────────────────────────────────────── */
.sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 1.1rem }
.widget {
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.widget-head {
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--border);
    font-size: .85rem;
    font-weight: 800;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: .4rem;
    background: linear-gradient(90deg, #f8fff8, #fff);
}
.widget-body { padding: 1rem }

/* write cta */
.write-cta {
    background: linear-gradient(-225deg, #231557 0%, #1e3080 50%, #1a6b1a 100%);
    border-radius: var(--radius-xl);
    padding: 1.4rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.write-cta::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(76,175,80,.1);
    border: 1px solid rgba(76,175,80,.15);
}
.wc-title { font-family: 'Syne',sans-serif; font-size: .95rem; font-weight: 800; color: #fff; margin-bottom: .3rem }
.wc-sub { font-size: .8rem; color: rgba(255,255,255,.75); margin-bottom: .9rem; line-height: 1.55 }
.btn-wc {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .65rem;
    border-radius: var(--radius);
    border: none;
    background-image: linear-gradient(to right, #4CAF50 0%, #CDDC39 51%, #4CAF50 100%);
    background-size: 200% auto;
    color: white;
    font-size: .84rem;
    font-weight: 800;
    transition: all .4s;
}
.btn-wc:hover { background-position: right center; box-shadow: 0 4px 14px rgba(76,175,80,.4) }

/* sub-rating list */
.srl { display: flex; flex-direction: column; gap: .65rem }
.srl-row { display: flex; align-items: center; justify-content: space-between }
.srl-label { font-size: .82rem; color: var(--sub); font-weight: 500 }
.srl-right { display: flex; align-items: center; gap: .38rem }
.srl-stars { display: flex; gap: .07rem }
.srl-star { font-size: .72rem; color: #4CAF50 }
.srl-star.dim { color: var(--border) }
.srl-score { font-size: .72rem; font-weight: 700; color: var(--dark) }

/* use case chips */
.uc-list { display: flex; flex-wrap: wrap; gap: .32rem }
.uc-chip {
    font-size: .74rem;
    font-weight: 500;
    padding: .2rem .58rem;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--sub);
    cursor: pointer;
    transition: all .15s;
}
.uc-chip:hover, .uc-chip.on {
    border-color: var(--navy);
    color: var(--navy);
    background: #eff6ff;
    font-weight: 700;
}
.uc-chip span { font-size: .58rem; color: var(--muted); margin-left: .14rem }

/* stats grid */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem }
.stat-box { background: var(--bg); border-radius: var(--radius); padding: .65rem .75rem }
.stat-val { font-family: 'Syne',sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--dark) }
.stat-lbl { font-size: .7rem; color: var(--muted); margin-top: .08rem }

/* trending tags */
.trend-tags { display: flex; flex-wrap: wrap; gap: .3rem }
.trend-tag {
    font-size: .74rem;
    font-weight: 500;
    padding: .18rem .52rem;
    border-radius: 100px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--sub);
    cursor: pointer;
    transition: all .15s;
}
.trend-tag:hover { border-color: #4CAF50; color: #15803d; background: #f0fdf4 }
.trend-tag .cnt { font-size: .58rem; color: var(--muted); margin-left: .14rem }

/* ═══════════════════════════════════════════════════
   REVIEW DETAIL DRAWER
   ═══════════════════════════════════════════════════ */
.rd-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,15,40,.45);
    z-index: 900;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.rd-backdrop.open { display: block; animation: backdropIn .25s ease }
.rd-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(520px, 96vw);
    background: #fff;
    z-index: 901;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(0,0,0,.14);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
    border-left: 1px solid var(--border);
}
.rd-backdrop.open .rd-drawer { transform: translateX(0) }

.rd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.35rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: linear-gradient(90deg, #f8fff8, #fff);
}
.rd-head-title { font-family: 'Syne',sans-serif; font-size: .95rem; font-weight: 800; color: var(--dark) }
.rd-close {
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: .9rem; color: var(--muted);
    transition: all .15s; flex-shrink: 0;
}
.rd-close:hover { border-color: #ef4444; color: #ef4444; background: #fff5f5 }

.rd-body { flex: 1; overflow-y: auto; padding: 1.35rem; overscroll-behavior: contain }
.rd-body::-webkit-scrollbar { width: 4px }
.rd-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px }

/* Tool strip in drawer */
.rd-tool-strip {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem .9rem;
    background: linear-gradient(135deg, #f0fff0, #f8fff8);
    border: 2px solid #4CAF50;
    border-radius: var(--radius-lg);
    margin-bottom: 1.2rem;
    cursor: pointer;
    transition: all .15s;
    box-shadow: 0 2px 8px rgba(76,175,80,.1);
}
.rd-tool-strip:hover { background: linear-gradient(135deg, #e8ffe8, #edfced); border-color: #388E3C }
.rd-tool-icon { width: 48px; height: 48px; border-radius: 11px; overflow: hidden; flex-shrink: 0; border: 1px solid rgba(0,0,0,.07); background: #fff }
.rd-tool-icon img { width: 100%; height: 100%; object-fit: contain }
.rd-tool-name { font-size: .92rem; font-weight: 800; color: var(--dark) }
.rd-tool-meta { font-size: .72rem; color: var(--muted); margin-top: .04rem }
.rd-tool-arrow { margin-left: auto; font-size: .9rem; color: #4CAF50; font-weight: 700 }

/* Reviewer */
.rd-reviewer { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem }
.rd-av {
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 800; color: #fff; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.rd-reviewer-name { font-size: 1rem; font-weight: 800; color: var(--dark) }
.rd-reviewer-role { font-size: .76rem; color: var(--muted); margin-top: .04rem }
.rd-reviewer-meta { display: flex; align-items: center; gap: .55rem; margin-top: .3rem; flex-wrap: wrap }

.rd-stars-big { display: flex; gap: .12rem; margin-bottom: .75rem }
.rd-star-big { font-size: 1.55rem; color: #4CAF50 }
.rd-star-big.dim { color: var(--border) }

.rd-headline { font-family: 'Syne',sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--dark); line-height: 1.28; margin-bottom: .7rem }
.rd-body-text { font-size: .87rem; color: var(--sub); line-height: 1.8; margin-bottom: 1.1rem }

.rd-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border) }
.rd-section-title { font-size: .67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .65rem }

.rd-procon { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem }
.rd-pros { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--radius); padding: .7rem .85rem }
.rd-cons { background: #fff5f5; border: 1px solid #fecdd3; border-radius: var(--radius); padding: .7rem .85rem }
.rd-pc-h { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem }
.rd-pros .rd-pc-h { color: #15803d }
.rd-cons .rd-pc-h { color: #ef4444 }
.rd-pc-list { list-style: none; display: flex; flex-direction: column; gap: .28rem }
.rd-pc-list li { font-size: .8rem; color: #1e293b; display: flex; align-items: flex-start; gap: .3rem; line-height: 1.4; font-weight: 500 }
.rd-pros .rd-pc-list li::before { content: '✓'; color: #15803d; font-weight: 800; flex-shrink: 0 }
.rd-cons .rd-pc-list li::before { content: '✗'; color: #ef4444; font-weight: 800; flex-shrink: 0 }

.rd-subs { display: flex; gap: .5rem; flex-wrap: wrap }
.rd-sub { flex: 1 1 calc(50% - .25rem); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem }
.rd-sub-lbl { font-size: .64rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .28rem }
.rd-sub-stars { display: flex; gap: .09rem }
.rd-sub-star { font-size: .92rem; color: #4CAF50 }
.rd-sub-star.dim { color: var(--border) }

.rd-tags { display: flex; flex-wrap: wrap; gap: .28rem; margin-top: .3rem }
.rd-tag { font-size: .7rem; padding: .14rem .46rem; border-radius: 100px; background: #eff6ff; border: 1px solid #bfdbfe; color: var(--navy); font-weight: 600 }

.rd-foot {
    flex-shrink: 0;
    padding: .9rem 1.35rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: .6rem;
    align-items: center;
    background: linear-gradient(90deg, #f8fff8, #fff);
}
.rd-helpful-lbl { font-size: .74rem; color: var(--muted) }
.rd-hbtn {
    display: inline-flex; align-items: center; gap: .26rem;
    padding: .3rem .7rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: #fff;
    font-size: .74rem; font-weight: 700; color: var(--sub); transition: all .15s;
}
.rd-hbtn:hover { border-color: #4CAF50; color: #15803d; background: #f0fdf4 }
.rd-hbtn.dn:hover { border-color: #ef4444; color: #ef4444; background: #fff5f5 }
.rd-share {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .3rem .75rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--navy); background: var(--navy);
    font-size: .74rem; font-weight: 700; color: #fff; transition: all .15s;
}
.rd-share:hover { background: #1e2c82 }

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-wrap { grid-template-columns: 1fr }
    .sidebar { position: static; display: grid; grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 768px) {
    .page-wrap { padding: 1.25rem 1rem 3rem }
    .filter-bar-inner { gap: .4rem }
    .rc-procon { grid-template-columns: 1fr }
    .rd-procon { grid-template-columns: 1fr }
    .sidebar { grid-template-columns: 1fr }
    .rl-hero { padding: 1.8rem 1rem 2.2rem }
    .rl-hero-stats { gap: 1.3rem }
}
@media (max-width: 600px) {
    .stat-grid { grid-template-columns: 1fr }
    .results-header { flex-direction: column; align-items: flex-start }
    .rc-tool-pricing { display: none }
    .rd-subs { gap: .4rem }
}