/* ============================================================
   Settings app — multi-panel
   ============================================================ */
.settings-layout{
  display:flex;height:100%;overflow:hidden;
}
.settings-nav{
  width:190px;
  background:var(--bg-window-alt);
  border-right:1px solid var(--border);
  padding:8px 0;
  overflow-y:auto;flex-shrink:0;
}
.s-nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;font-size:12.5px;color:var(--text);
  cursor:pointer;border-radius:0;transition:background .12s;
  text-align:left;width:100%;background:transparent;border:0;
}
.s-nav-item:hover{background:var(--bg-hover)}
.s-nav-item.active{background:var(--bg-active);font-weight:600;color:var(--accent)}
.s-nav-item svg{width:18px;height:18px;flex-shrink:0}

.settings-detail{
  flex:1;overflow-y:auto;padding:20px 26px;
}
.settings-page{display:none}
.settings-page.active{display:block;animation:fadeIn .2s}
.settings-page h2{
  margin:0 0 4px;font-size:17px;font-weight:700;
}
.settings-page .s-subtitle{
  color:var(--text-secondary);font-size:12.5px;margin-bottom:16px;
}
.s-section{margin-bottom:20px}
.s-section-title{
  font-size:11px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-secondary);margin:0 0 8px;font-weight:600;
}
.s-card{
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 14px;
  margin-bottom:8px;
}
.s-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 0;
}
.s-row + .s-row{border-top:1px solid var(--border);border-style:dashed}
.s-label{font-size:13px}
.s-row .s-side{color:var(--text-secondary);font-size:11.5px}
.s-check-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}

.s-color-grid{
  display:flex;gap:8px;flex-wrap:wrap;
}
.s-color-swatch{
  width:36px;height:36px;border-radius:8px;cursor:pointer;
  border:2px solid transparent;position:relative;
  transition:border-color .15s,transform .15s;
}
.s-color-swatch:hover{transform:scale(1.08)}
.s-color-swatch.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--bg-window)}
.s-color-swatch.check::after{
  content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:16px;text-shadow:0 1px 2px rgba(0,0,0,.4);
}

.s-wall-grid{
  display:flex;gap:8px;flex-wrap:wrap;
}
.s-wall-thumb{
  width:80px;height:50px;border-radius:6px;
  border:2px solid transparent;cursor:pointer;
  transition:border-color .15s,transform .15s;
  position:relative;overflow:hidden;
}
.s-wall-thumb:hover{transform:scale(1.06)}
.s-wall-thumb.selected{border-color:var(--accent)}
.s-wall-thumb .wall-label{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:3px;font-size:9px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7);
}

.s-device-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border);
}
.s-device-row:last-child{border:0}
.s-device-row .device-icon{width:32px;height:32px;border-radius:6px;background:var(--bg-hover);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.s-device-row .device-icon svg{width:16px;height:16px;color:var(--text-secondary)}
.s-device-row .d-body{flex:1;min-width:0}
.s-device-row .d-name{font-size:13px;font-weight:600}
.s-device-row .d-sub{font-size:11.5px;color:var(--text-secondary)}

.about-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
.about-cell{
  padding:5px 0;font-size:12.5px;
}
.about-cell.k{color:var(--text-secondary)}

input[type="range"]{accent-color:var(--accent)}

.s-btn-sm{
  background:var(--bg-hover);border:1px solid var(--border);color:inherit;
  padding:5px 12px;border-radius:6px;font-size:12px;
}
.s-btn-sm:hover{background:var(--bg-active)}