/* ============ Settings app ============ */
.settings{display:flex;flex:1;min-height:0}
.st-sidebar{
  width:210px;flex:none;background:var(--sidebar-bg);border-right:1px solid var(--border);
  padding:8px 6px;overflow-y:auto;
}
.st-nav{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  font-size:14px;cursor:default;
}
.st-nav:hover{background:var(--row-hover)}
.st-nav.sel{background:var(--sel-strong);font-weight:500}
.st-nav-ic{width:18px;height:18px;flex:none;color:var(--text-2);display:flex}
.st-nav-ic svg{width:18px;height:18px}
.st-content{flex:1;overflow-y:auto;padding:22px 28px 40px;min-width:0}
.st-title{font-size:21px;font-weight:700;margin-bottom:16px}
.st-subtitle{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:20px 0 8px}
.st-note{font-size:13px;color:var(--muted);margin-top:12px;max-width:560px}
.st-second{margin-top:18px}
.st-btn-row{margin-top:18px}
.st-add{padding:0 20px}

/* wifi bars */
.net-ic{display:flex;align-items:flex-end;gap:2.5px;height:20px}
.net-bar{width:3.5px;border-radius:1.5px;background:currentColor}
.net-lock,.net-check,.net-go{width:18px;height:18px;display:flex;color:var(--text-2)}
.net-lock svg,.net-check svg,.net-go svg{width:18px;height:18px}
.net-check{color:var(--success)}
.net-off{color:var(--faint)}

/* appearance */
.wp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.wp-cell{border-radius:10px;cursor:default;padding:6px;border:2px solid transparent}
.wp-cell:hover{background:var(--row-hover)}
.wp-cell.sel{border-color:var(--accent)}
.wp-thumb{
  aspect-ratio:16/10;border-radius:8px;overflow:hidden;position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.wp-thumb svg{position:absolute;inset:0;width:100%;height:100%}
.wp-name{font-size:13px;text-align:center;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-grid{display:flex;flex-wrap:wrap;gap:10px}
.acc-swatch{
  width:26px;height:26px;border-radius:50%;border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:default;transition:transform .12s;
}
.acc-swatch:hover{transform:scale(1.12)}
.acc-swatch.sel{border-color:var(--text);box-shadow:inset 0 0 0 2px var(--card)}

/* radio */
.radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);flex:none}
.radio.on{border-color:var(--accent);background:radial-gradient(circle, var(--accent) 0 5px, transparent 6px)}

/* displays dialog */
.disp-dlg{display:flex;flex-direction:column;gap:10px;min-width:320px}
.disp-label{font-size:13px;color:var(--muted)}

/* users */
.pw-dlg{display:flex;flex-direction:column;gap:10px;min-width:320px}

/* about */
.about-hero{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.about-logo{width:76px;height:76px;flex:none}
.about-logo svg{width:76px;height:76px}
.about-main{flex:1}
.about-dev{font-size:20px;font-weight:700}
.about-sub{font-size:13px;color:var(--muted)}
.about-rename{flex:none}