:root {
    --a11y-font-scale: 1;
    --a11y-accent:     #2e7d32;   /
    --a11y-surface:    #ffffff;
    --a11y-border:     #e2e8f0;
    --a11y-text:       #1e293b;
    --a11y-muted:      #64748b;
    --a11y-shadow:     0 8px 32px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.08);
    --a11y-radius:     14px;
    --a11y-transition: 220ms cubic-bezier(.4,0,.2,1);
}


html {
    font-size: calc(16px * var(--a11y-font-scale));
}


.a11y-slider-panel {
    position:    fixed;
    bottom:      70px !important;
    left:        19px;
    z-index:     9999;
    font-family: system-ui, sans-serif;
}


.a11y-toggle-btn {
    display:       flex;
    align-items:   center;
    justify-content: center;
    width:         48px;
    height:        48px;
    background:    var(--a11y-accent);
    color:         #fff;
    border:        none;
    border-radius: 50%;
    cursor:        pointer;
    font-size:     22px;
    box-shadow:    0 4px 14px rgba(46,125,50,.35);
    transition:    transform var(--a11y-transition),
    box-shadow var(--a11y-transition);
}

.a11y-toggle-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px rgba(46,125,50,.45);
}

.a11y-toggle-btn:focus-visible {
    outline:        3px solid var(--a11y-accent);
    outline-offset: 3px;
}


.a11y-controls {
    position:      absolute;
    bottom:        calc(100% + 12px);
    left:          0;
    width:         272px;
    background:    var(--a11y-surface);
    border:        1px solid var(--a11y-border);
    border-radius: var(--a11y-radius);
    box-shadow:    var(--a11y-shadow);
    overflow:      hidden;
    transform-origin: bottom left;
    animation:    a11yPanelIn 200ms cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes a11yPanelIn {
    from { opacity: 0; transform: scale(.88) translateY(8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);   }
}

.a11y-controls[hidden] { display: none; }

.a11y-controls-inner {
    padding: 18px;
}


.a11y-heading {
    margin:         0 0 10px;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color:          var(--a11y-muted);
}


.a11y-divider {
    border:     none;
    border-top: 1px solid var(--a11y-border);
    margin:     14px 0;
}


.a11y-slider-row {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.a11y-size-icon {
    color:       var(--a11y-muted);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
.a11y-size-icon.a11y-size-sm { font-size: 12px; }
.a11y-size-icon.a11y-size-lg { font-size: 22px; }


.a11y-slider-wrap {
    flex:     1;
    position: relative;
}

.a11y-slider {
    -webkit-appearance: none;
    appearance:         none;
    width:              100%;
    height:             4px;
    border-radius:      4px;
    background:         var(--a11y-border);
    outline:            none;
    cursor:             pointer;
    position:           relative;
    z-index:            1;
}

.a11y-slider:focus-visible {
    outline:        3px solid var(--a11y-accent);
    outline-offset: 4px;
    border-radius:  4px;
}

.a11y-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    var(--a11y-accent);
    cursor:        pointer;
    border:        3px solid #fff;
    box-shadow:    0 1px 6px rgba(46,125,50,.4);
    transition:    transform var(--a11y-transition);
}
.a11y-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.a11y-slider::-moz-range-thumb {
    width:         20px;
    height:        20px;
    border-radius: 50%;
    background:    var(--a11y-accent);
    cursor:        pointer;
    border:        3px solid #fff;
}

.a11y-slider-track-fill {
    position:      absolute;
    top:           50%;
    left:          0;
    height:        4px;
    transform:     translateY(-50%);
    background:    var(--a11y-accent);
    border-radius: 4px;
    pointer-events: none;
    z-index:       0;
    transition:    width var(--a11y-transition);
}


.a11y-size-labels {
    display:         flex;
    justify-content: space-between;
    margin-top:      6px;
    font-size:       10px;
    color:           var(--a11y-muted);
    letter-spacing:  .04em;
}


.a11y-filter-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   6px;
}

.a11y-filter-btn {
    display:        flex;
    align-items:    center;
    gap:            6px;
    padding:        8px 10px;
    background:     #f1f5f9;
    color:          var(--a11y-text);
    border:         2px solid transparent;
    border-radius:  8px;
    font-size:      12px;
    font-weight:    500;
    cursor:         pointer;
    text-align:     left;
    transition:     background var(--a11y-transition),
    border-color var(--a11y-transition),
    color var(--a11y-transition);
}

.a11y-filter-btn i {
    font-size:  14px;
    flex-shrink: 0;
}

.a11y-filter-btn:hover {
    background: #e2e8f0;
}

.a11y-filter-btn:focus-visible {
    outline:        3px solid var(--a11y-accent);
    outline-offset: 2px;
}

.a11y-filter-btn.is-active {
    background:   var(--a11y-accent);
    color:        #fff;
    border-color: var(--a11y-accent);
}


.a11y-reset-btn {
    display:        flex;
    align-items:    center;
    justify-content: center;
    gap:            6px;
    width:          100%;
    padding:        9px;
    background:     transparent;
    color:          var(--a11y-muted);
    border:         1px solid var(--a11y-border);
    border-radius:  8px;
    font-size:      12px;
    cursor:         pointer;
    transition:     background var(--a11y-transition), color var(--a11y-transition);
}

.a11y-reset-btn:hover {
    background: #f8fafc;
    color:      var(--a11y-text);
}

.a11y-reset-btn:focus-visible {
    outline:        3px solid var(--a11y-accent);
    outline-offset: 2px;
}


@media (prefers-color-scheme: dark) {
    :root {
        --a11y-surface: #1e293b;
        --a11y-border:  #334155;
        --a11y-text:    #f1f5f9;
        --a11y-muted:   #94a3b8;
    }
    .a11y-filter-btn       { background: #273549; }
    .a11y-filter-btn:hover { background: #334155; }
    .a11y-reset-btn:hover  { background: #273549; }
}


@media (prefers-reduced-motion: reduce) {
    .a11y-controls,
    .a11y-toggle-btn,
    .a11y-filter-btn,
    .a11y-slider::-webkit-slider-thumb {
        transition: none;
        animation:  none;
    }
}