/* UI/Pages/Settings/Style.css */
/* Windows slide up from below the screen (the window itself never fades; only the backdrop dims). */
#settings-overlay,#sub-overlay {
    visibility:hidden;pointer-events:none;background-color:rgba(0,0,0,0);
    backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
    transition:background-color .4s ease,backdrop-filter .4s ease,-webkit-backdrop-filter .4s ease,visibility 0s linear .5s;
}
#settings-overlay.open,#sub-overlay.open {
    visibility:visible;pointer-events:auto;background-color:rgba(0,0,0,.78);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    transition:background-color .4s ease,backdrop-filter .4s ease,-webkit-backdrop-filter .4s ease,visibility 0s;
}
#settings-sheet,#sub-sheet { transform:translateY(100vh);transition:transform .5s var(--ease); }
#settings-overlay.open #settings-sheet,#sub-overlay.open #sub-sheet { transform:none; }

/* Settings categories: content pushes sideways, never fades */
#set-panel { position:relative;overflow:hidden; }
.set-page { padding:12px; }
@media (min-width:768px) { .set-page { padding:20px 24px; } }

@media (max-width:767px) {
    #settings-sheet { position:relative; }
    #set-nav,#set-content {
        position:absolute;inset:0;width:100%;height:100%;
        transition:transform .45s var(--ease),visibility 0s linear .45s;
        will-change:transform;
    }
    #settings-sheet[data-view=list] #set-nav { transform:none;visibility:inherit;transition-delay:0s; }
    #settings-sheet[data-view=list] #set-content { transform:translateX(100%);visibility:hidden; }
    #settings-sheet[data-view=detail] #set-nav { transform:translateX(-100%);visibility:hidden; }
    #settings-sheet[data-view=detail] #set-content { transform:none;visibility:inherit;transition-delay:0s; }
}
@media (min-width:768px) {
    #set-nav,#set-content { position:static; }
}
/* открытие окна сразу в нужной категории: переключение экранов без анимации */
#settings-sheet.no-anim #set-nav,#settings-sheet.no-anim #set-content { transition:none !important; }

.cat-btn {
    display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:14px;font-size:14px;
    color:#a3a3a3;text-align:left;
}
.cat-btn:hover { background:rgba(18,18,18,.8);color:#e5e5e5; }
@media (min-width:768px) { .cat-btn.active { background:#121212;color:#e5e5e5; } }

.set-row {
    display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px;border-radius:16px;cursor:pointer;
}
.set-row:hover { background:rgba(18,18,18,.8); }



/* Custom device select */
.device-field { padding:12px;margin-bottom:4px; }
.device-select { position:relative; }
.device-select-btn {
    width:100%;display:flex;align-items:center;gap:10px;justify-content:space-between;
    background:#050505;border:1px solid #1a1a1a;border-radius:12px;padding:11px 12px;color:#e5e5e5;text-align:left;
}
.device-select-btn:hover,.device-select.open .device-select-btn { background:#0b0b0b;border-color:#404040; }
.device-select-btn svg { flex:0 0 auto;transition:transform .3s var(--ease); }
.device-select.open .device-select-btn svg { transform:rotate(90deg); }
.device-select-menu {
    position:absolute;z-index:30;left:0;right:0;top:calc(100% + 7px);
    max-height:220px;overflow-y:auto;padding:5px;background:#080808;border:1px solid #262626;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.45);
    opacity:0;transform:translateY(-6px) scale(.985);pointer-events:none;visibility:hidden;
    transition:opacity .2s ease,transform .3s var(--ease),visibility 0s linear .2s;
}
.device-select.open .device-select-menu {
    opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s;
}
.device-option {
    width:100%;display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:10px;color:#a3a3a3;
    text-align:left;font-size:13px;
}
.device-option:hover { background:#121212;color:#e5e5e5; }
.device-option.selected { background:#1a1a1a;color:#e5e5e5; }
.device-option .check { margin-left:auto;opacity:0; }
.device-option.selected .check { opacity:1; }

.device-columns {
    display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;padding:12px;
}
.device-card {
    min-width:0;background:#050505;border:1px solid #1a1a1a;border-radius:18px;padding:18px;
}
.device-card-head { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.device-icon {
    width:34px;height:34px;border-radius:11px;background:#121212;border:1px solid #262626;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.device-card .meter { margin-top:12px; }
.device-card .set-row { padding:10px 0 0;border-radius:0; }
.rng {
    -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;outline:none;cursor:pointer;
    background:linear-gradient(90deg,#e5e5e5 var(--v,50%),#262626 var(--v,50%));
}
.rng::-webkit-slider-thumb {
    -webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#e5e5e5;border:none;
    box-shadow:0 0 0 4px rgba(229,229,229,.12);transition:box-shadow .2s ease,transform .2s var(--ease);
}
.rng::-moz-range-thumb { width:16px;height:16px;border-radius:50%;background:#e5e5e5;border:none; }
.rng:hover::-webkit-slider-thumb { box-shadow:0 0 0 6px rgba(229,229,229,.16);transform:scale(1.05); }
.meter { height:6px;border-radius:99px;background:#1a1a1a;overflow:hidden; }
.meter > i { display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#737373,#e5e5e5);transition:width .08s linear; }

.device-select.disabled { opacity:.55;pointer-events:none; }
.device-option svg:first-child { color:#737373;flex:0 0 auto; }