/* js/device-prefs/device-prefs.css — o atalho do TEMA na tela Job (v498, Rafael 10/10). Entra depois do i18n.css no index.html.
   O botao ◐ no #mhead (entre a bandeira e o Home, 44 px como o .mnav) e a folha que sobe de baixo com as 7 pastilhas — o mesmo
   desenho do painel da conta da porta (js/home/home.css .look). O fundo da folha e' o --dlg do tema (o --panel do HUD e do Holo
   e' transparente); a amostra de cada pastilha tem cores fixas (mostra o OUTRO tema, nao o de agora). */
#mhead .dp-lookbtn,.jnav .dp-lookbtn{margin:0;flex:none;min-width:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;background:var(--dlg,var(--panel,#fff));color:var(--accent);cursor:pointer}
.dp-lookbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.dp-lookbtn svg .dp-half{fill:currentColor;stroke:none}
.dp-back{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.32)}
.dp-sheet{position:fixed;z-index:2001;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:var(--dlg,var(--panel,#fff));color:var(--ink);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:4px 12px calc(14px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 28px rgba(0,0,0,.22)}
.dp-hd{display:flex;align-items:center;gap:8px;padding:4px 0 8px 4px}
.dp-hd b{flex:1 1 auto;font:600 12px/1 Archivo,"Segoe UI",Roboto,sans-serif;color:var(--ink2);text-transform:uppercase;letter-spacing:.08em}
.dp-x{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.dp-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.dp-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dp-look{display:flex;align-items:center;gap:8px;min-height:44px;min-width:0;padding:0 8px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--ink);font:600 13px/1.15 "Source Sans 3","Segoe UI",Roboto,sans-serif;text-align:left;cursor:pointer}
.dp-look:active{background:var(--soft)}
.dp-look[aria-pressed="true"]{border-color:var(--accent);background:var(--acc2)}
.dp-look[aria-pressed="true"]::after{content:"\2713";margin-left:auto;color:var(--accent);font-weight:700}
.dp-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-sw{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgba(128,128,128,.45);background:radial-gradient(circle,var(--sw-ac) 0 32%,var(--sw-bg) 36%)}
.dp-look[data-dp-look="light"]{--sw-bg:#fbfaf7;--sw-ac:#245c8f}
.dp-look[data-dp-look="dark"]{--sw-bg:#14181e;--sw-ac:#7fb0e3}
.dp-look[data-dp-look="hud"]{--sw-bg:#070d18;--sw-ac:#5ee6ff}
.dp-look[data-dp-look="lab"]{--sw-bg:#f4f6fb;--sw-ac:#3b5bff}
.dp-look[data-dp-look="holo"]{--sw-bg:#0b0f14;--sw-ac:#a7f3d0}
.dp-look[data-dp-look="sketch"]{--sw-bg:#f5f7f4;--sw-ac:#186f7b}
.dp-look[data-dp-look="sketchdark"]{--sw-bg:#151b1a;--sw-ac:#5cc0cc}
@media print{.dp-back,.dp-sheet,.dp-lookbtn{display:none!important}}