/* S58 (agent D) pages/settings.css: «Ko'rinish» sahifasi. Kompyuterda 2 ustun: sozlamalar + yopishgan «Namuna». */
.pf { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; align-items:start; }
@media (min-width:1024px) { .pf { grid-template-columns:minmax(0,1fr) 340px; gap:32px; } .pf-prev { position:sticky; top:88px; } }
.pf-main { min-width:0; max-width:760px; }
.pf-main > .lead { color:var(--gray); margin:0 0 6px; }
.pf-sec { padding:16px 0; border-top:1px solid var(--line); }
.pf-main > .lead + .pf-sec { border-top:0; padding-top:4px; }
.pf-sec h3 { margin:0 0 10px; font-size:15px; letter-spacing:-.01em; }
.opts { display:flex; flex-wrap:wrap; gap:6px; }
.opt { border-radius:var(--pillr); min-height:40px; padding:6px 16px; border:1px solid var(--line); background:var(--card); font-weight:600; font-size:14px; color:var(--ink); }
.opt:hover { border-color:var(--v-s); }
.opt[aria-checked="true"] { border-color:var(--v); background:var(--v-t); color:var(--v); }
.pf-hint { color:var(--gray); font-size:13px; margin:8px 0 0; }
.sws { display:flex; flex-wrap:wrap; gap:12px; }
.sw { width:40px; height:40px; border-radius:50%; border:3px solid var(--card); outline:1px solid var(--line); padding:0; }
.sw[aria-checked="true"] { outline:2px solid var(--ink); }
.sw:focus-visible { outline:2px solid var(--v); outline-offset:3px; }
.sw-violet { background:#7703fc; } .sw-blue { background:#1a66c8; } .sw-teal { background:#0f766e; }
.sw-green { background:#13773a; } .sw-orange { background:#b43c0b; } .sw-pink { background:#be185d; }
.mlist { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; max-width:520px; }
.mlist li { display:flex; align-items:center; gap:10px; padding:4px 6px 4px 8px; border:1px solid var(--line); border-radius:var(--r2); background:var(--card); }
.mlist li > .ic { color:var(--v); }
.mlist .ml { flex:1; min-width:0; font-weight:600; }
.mlist .grip { display:inline-flex; align-items:center; justify-content:center; width:32px; height:36px; color:var(--gray); border-radius:8px; }
.mlist .iconbtn { min-width:36px; min-height:36px; padding:0; }
.pf-prev { display:flex; flex-direction:column; gap:14px; padding:18px; border:1px solid var(--line); border-radius:var(--r); background:var(--card); }
.pf-pv { display:flex; gap:14px; align-items:center; }
.pf-ring { width:68px; height:68px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--v) 0 45%, var(--panel) 45% 100%); }
.pf-ring b { width:52px; height:52px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; font-size:15px; }
.pf-big { display:block; font-size:17px; font-family:var(--font-h); }
.pf-pills, .pf-acts { display:flex; flex-wrap:wrap; gap:8px; }
.morelist .ml { display:flex; flex-direction:column; gap:2px; text-align:left; }
.morelist .ml small { color:var(--gray); font-weight:400; font-size:13px; }
/* S63: «Fon» kartalari */
.bg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:10px; }
.bg-card { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:8px; min-height:44px; border:1px solid var(--line); border-radius:var(--r2); background:var(--card); color:var(--ink); text-align:left; }
.bg-card:hover { border-color:var(--v-s); }
.bg-card[aria-checked="true"] { border-color:var(--v); background:var(--v-t); }
.bg-card:focus-visible { outline:2px solid var(--v); outline-offset:2px; }
.bg-pv { display:block; width:100%; aspect-ratio:8/5; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--panel); }
.bg-pv-galaxy { background:linear-gradient(160deg,#0b0620,#1a0636); }
.bg-pv-aurora { background:linear-gradient(160deg,#0b1026,#1a0636); }
.bg-pv-alps { background:linear-gradient(160deg,#eef4ff,#fff); }
.bg-pv-meadow { background:linear-gradient(160deg,#fff7ea,#e8f5e9); }
.bg-cv { display:block; width:100%; height:100%; }
.bg-name { font-weight:600; font-size:14px; }
.bg-tag { font-size:12px; }