/* ══════════════════════════════════════════════════════════════════
   SafePhone — a practice smartphone in HTML/CSS.
   Colors: Material 3 style variables set on #screen by theme.js.
   ══════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 30%, #2a3140 0%, var(--page-bg, #15181d) 70%);
  font-family: 'Roboto Flex', Roboto, 'Segoe UI', system-ui, sans-serif;
  overflow: hidden; color: #e8eaed;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
input, textarea { user-select: text; -webkit-user-select: text; }
[hidden] { display: none !important; }

.ms { font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal; font-size: 24px; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
  font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  overflow: hidden; width: 1em; flex: 0 0 auto; }
.ms.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Stage and phone frame ───────────────────────────────────────── */
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; gap: 36px; }
#device {
  position: relative; width: 440px; height: 920px; flex: 0 0 auto;
  margin: calc((var(--device-h, 920px) - 920px) / 2) calc((var(--device-w, 440px) - 440px) / 2);
  border-radius: 58px; padding: 14px;
  background: linear-gradient(145deg, #3b3f46, #121418 60%, #25282d);
  box-shadow: 0 0 0 2px #50555e, 0 0 0 3px #111, 0 40px 90px rgba(0,0,0,.55), inset 0 0 6px rgba(255,255,255,.15);
  transform-origin: center center;
}
#device.flash-on::after { content: ''; position: absolute; top: -40px; left: 50%; width: 360px; height: 120px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(255,250,220,.55), transparent 70%); pointer-events: none; }
.hw-btn { position: absolute; right: -5px; width: 6px; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, #2b2e33, #5a5f68); cursor: pointer; }
.hw-btn:hover { background: linear-gradient(90deg, #3a3e45, #8a909a); }
.hw-btn:active { right: -3px; }
.hw-power { top: 190px; height: 70px; }
.hw-vol-up { top: 290px; height: 56px; }
.hw-vol-down { top: 350px; height: 56px; }
#screen {
  position: relative; width: 412px; height: 892px; overflow: hidden; border-radius: 44px; background: #000;
  color: var(--onSurface); font-size: calc(16px * var(--font-scale, 1));
  container-type: size;
}
.punch-hole { position: absolute; top: 11px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: #050608; box-shadow: inset 0 0 2px #333; z-index: 100; pointer-events: none; }

body.fullscreen #stage { display: block; }
body.fullscreen #device { width: 100vw; height: 100vh; height: 100dvh; margin: 0; padding: 0; border-radius: 0; box-shadow: none; background: #000; transform: none !important; }
body.fullscreen #screen { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
body.fullscreen .hw-btn, body.fullscreen .punch-hole, body.fullscreen #side-help { display: none; }

#side-help { display: none; width: 320px; max-height: 88vh; overflow: auto; color: #dfe3ea; font-size: 14px; line-height: 1.5; }
body.with-side #side-help { display: block; }
.side-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 18px 20px; }
.side-card h2 { font-size: 16px; margin: 0 0 10px; display: flex; gap: 8px; align-items: center; color: #fff; }
.side-card ul { padding-left: 18px; margin: 0; }
.side-card li { margin: 6px 0; }
.side-card kbd { background: #2e3440; border: 1px solid #4c566a; border-radius: 4px; padding: 0 5px; font-size: 12px; }
.side-tip { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: rgba(138,180,248,.12); color: #c6dafc; }
.side-ex { margin-top: 16px; }

/* ── Screen layers ───────────────────────────────────────────────── */
#wall, #launcher, #appstack, #recents, #lock, #boot, #screen-off, #layer-dialog, #shade { position: absolute; inset: 0; }
#wall { background: var(--wallpaper); z-index: 0; transition: filter .3s; }
#launcher { z-index: 1; }
#appstack { z-index: 2; pointer-events: none; }
#recents { z-index: 6; }
#navbar { z-index: 22; }
.edge { position: absolute; top: 60px; bottom: 60px; width: 16px; z-index: 23; touch-action: none; }
#edge-left { left: 0; } #edge-right { right: 0; }
#screen[data-nav="buttons"] .edge { display: none; }
#headsup { z-index: 26; }
#lock { z-index: 30; }
#statusbar { z-index: 35; }
#shade { z-index: 40; pointer-events: none; }
#volpanel { z-index: 45; }
#layer-dialog { z-index: 50; pointer-events: none; }
#layer-dialog > * { pointer-events: auto; }
#toasts { position: absolute; left: 0; right: 0; bottom: 90px; z-index: 55; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
#back-arrow { z-index: 56; }
#nightlight-layer { position: absolute; inset: 0; z-index: 90; pointer-events: none; background: rgba(255,140,30,.18); mix-blend-mode: multiply; opacity: 0; transition: opacity .6s; }
#screen.night-light #nightlight-layer { opacity: 1; }
#dim-layer { position: absolute; inset: 0; z-index: 91; pointer-events: none; background: #000; opacity: var(--dim, 0); transition: opacity .15s; }
#screen.dozing #dim-layer { opacity: .55; transition: opacity 1.2s; }
#screen-off { z-index: 95; background: #000; }
#screen-off.powered-off { display: flex; align-items: flex-end; justify-content: center; }
.off-hint { color: #5f6368; font-size: 13px; text-align: center; margin-bottom: 120px; }
#boot { z-index: 96; }
.fatal { position: absolute; inset: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #111; color: #fff; text-align: center; }

/* ── Status bar ──────────────────────────────────────────────────── */
#statusbar { position: absolute; top: 0; left: 0; right: 0; height: 36px; padding: 8px 22px 0 26px; display: flex; justify-content: space-between; align-items: center;
  font-size: 14px; font-weight: 500; color: #1f1f1f; pointer-events: auto; touch-action: none; }
#statusbar.light-icons { color: #fff; }
#screen.recents-mode #statusbar { color: #fff; }
.sb-left, .sb-right { display: flex; align-items: center; gap: 5px; }
.sb-left { gap: 8px; }
.sb-notifs { display: flex; gap: 4px; align-items: center; }
.sb-ic { font-size: 17px; }
.sb-ic.batt { transform: rotate(90deg); font-size: 18px; }
.sb-cell { display: inline-flex; align-items: flex-end; }
.sb-cell small { font-size: 9px; font-weight: 700; margin-left: -2px; }
.sb-batt { display: inline-flex; align-items: center; gap: 1px; }
.sb-batt small { font-size: 12px; }
.sb-batt.low { color: #d93025; }
.sb-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.sb-time { font-variant-numeric: tabular-nums; letter-spacing: .2px; }

/* ── Navigation ──────────────────────────────────────────────────── */
#navbar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; color: #1f1f1f; touch-action: none; }
#navbar.gestures { height: 26px; cursor: grab; }
#navbar.gestures:active { cursor: grabbing; }
#navbar.light-icons { color: #fff; }
#screen.is-locked #navbar { visibility: hidden; }
.nav-pill { width: 108px; height: 5px; border-radius: 3px; background: currentColor; opacity: .82; transition: transform .2s; }
#navbar.active .nav-pill { transition: none; }
#navbar.buttons { height: 48px; gap: 0; justify-content: space-evenly; padding: 0 44px; background: var(--navbg, transparent); }
#navbar.buttons button { width: 64px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 22px; }
#navbar.buttons button:active { background: rgba(128,128,128,.25); }
#navbar.over-app.buttons { background: var(--surface); }
#navbar.over-app.buttons.light-icons { background: #000; }
#screen[data-theme="dark"] #navbar.over-app.buttons { background: var(--surface); }
#back-arrow { position: absolute; left: 0; width: 36px; height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: 0 28px 28px 0; background: rgba(32,33,36,.82); color: #fff; opacity: 0; transform: translateX(calc(-36px + var(--d, 0px) * .5)); pointer-events: none; transition: opacity .12s; }
#back-arrow.right { left: auto; right: 0; border-radius: 28px 0 0 28px; transform: translateX(calc(36px - var(--d, 0px) * .5)) scaleX(-1); }
#back-arrow.show { opacity: .75; }
#back-arrow.ready { opacity: 1; background: var(--primary); color: var(--onPrimary); }

/* ── App windows ─────────────────────────────────────────────────── */
.appwin { position: absolute; inset: 0; background: var(--surface); color: var(--onSurface); display: none; pointer-events: auto;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s, border-radius .28s; overflow: hidden; will-change: transform; }
.appwin.front, .appwin.leaving { display: block; }
.appwin.dark-app { background: #000; color: #fff; }
.appwin > .app { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 36px; padding-bottom: 26px; }
#screen[data-nav="buttons"] .appwin > .app { padding-bottom: 48px; }
.splash { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.app-crash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; }
.app-crash .ms { font-size: 48px; color: #d93025; }
#launcher.behind { visibility: hidden; transition: visibility 0s .28s; }
#launcher.behind + #appstack { }

/* ── App icons ───────────────────────────────────────────────────── */
.app-ic { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.app-ic.svg { background: #fff; }
.app-ic.svg svg { width: 100%; height: 100%; }
.app-ic.cal { background: #fff; color: #1a73e8; border: 0; }
.app-ic.cal b { font-weight: 500; }
.app-ic .ms { width: auto; }

/* ── Home screen ─────────────────────────────────────────────────── */
.home { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 44px 0 30px; transition: opacity .2s, transform .25s; }
#screen[data-nav="buttons"] .home { padding-bottom: 52px; }
#launcher.drawer-open .home { opacity: 0; transform: scale(.94); pointer-events: none; }
.home-pages { flex: 1; overflow: hidden; position: relative; touch-action: none; }
.home-track { display: flex; height: 100%; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.home-page { flex: 0 0 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); padding: 6px 12px; position: relative; }
.hcell { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
.hcell.widget { padding: 4px; }
.hicon { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; padding: 4px 0; border-radius: 16px; touch-action: none; }
.hicon:active .app-ic { transform: scale(.92); }
.app-ic { transition: transform .12s; }
.hlabel { font-size: 12.5px; line-height: 1.2; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.55); max-width: 84px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-dots { height: 14px; display: flex; justify-content: center; gap: 6px; align-items: center; }
.home-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.5); }
.home-dots i.on { background: #fff; width: 7px; height: 7px; }
.home-search { margin: 8px 20px 10px; height: 52px; border-radius: 26px; background: var(--surfaceC2); color: var(--onSurfaceVar);
  display: flex; align-items: center; padding: 0 16px; gap: 12px; cursor: text; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.hs-txt { flex: 1; font-size: 16px; }
.hs-g { color: var(--primary); display: flex; }
.hs-ic { color: var(--onSurfaceVar); }
.home-dock { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 12px; height: 76px; }
.dock-cell .hicon { gap: 0; }
.drop-bar { position: absolute; top: 36px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; padding: 8px; z-index: 10; }
.drop-zone { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 22px; color: #fff; background: rgba(0,0,0,.35); font-size: 14px; }
.drop-zone.hot { background: #d93025; transform: scale(1.06); }
.drop-zone[data-drop="info"].hot { background: var(--primary); }
.drop-zone .ms { font-size: 20px; }
#launcher.dragging .home-page { background: rgba(255,255,255,.06); outline: 1px dashed rgba(255,255,255,.35); outline-offset: -6px; border-radius: 24px; }
.drop-hint { border-radius: 18px; background: rgba(255,255,255,.22); pointer-events: none; }
.drag-ghost { position: absolute; left: 0; top: 0; z-index: 60; pointer-events: none; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.drag-widget { display: block; width: 120px; height: 70px; border-radius: 20px; background: rgba(255,255,255,.7); }
.folder-ic { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 7px; place-items: center; }
#screen[data-theme="dark"] .folder-ic { background: rgba(60,60,64,.9); }
.folder-sheet { padding-bottom: 30px; }
.folder-name { width: 100%; border: 0; background: var(--surfaceC3); border-radius: 14px; padding: 12px 14px; font-size: 18px; text-align: center; margin-bottom: 14px; outline: none; }
.folder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.folder-grid .hlabel { color: var(--onSurface); text-shadow: none; }

/* Widgets */
.w-glance { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 4px 18px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); gap: 4px; }
.wg-date { font-size: 26px; font-weight: 400; }
.wg-weather, .wg-alarm, .wg-event { font-size: 16px; display: flex; align-items: center; gap: 6px; }
.wg-weather .ms, .wg-alarm .ms, .wg-event .ms { font-size: 20px; }
.w-bigclock { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.w-bigclock b { font-size: 52px; font-weight: 300; line-height: 1; }
.w-weather, .w-notes { width: 100%; height: 100%; border-radius: 26px; background: var(--primaryContainer); color: var(--onPrimaryContainer); padding: 14px; display: grid; text-align: left; align-content: space-between; }
.ww-city { font-size: 14px; } .ww-temp { font-size: 42px; font-weight: 400; } .ww-ic { font-size: 34px; justify-self: end; margin-top: -60px; color: #f9ab00; } .ww-desc { font-size: 12px; }
.w-notes { background: #fff8d6; color: #3c3000; align-content: start; gap: 6px; }
.w-notes b { display: flex; gap: 6px; align-items: center; font-weight: 500; } .w-notes b .ms { color: #fbbc04; font-size: 20px; }
.w-notes span { font-size: 14px; overflow: hidden; }

/* Tiroir d'applications */
.drawer { position: absolute; inset: 0; background: var(--surfaceC1); padding: 44px 8px 30px; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1); z-index: 5; border-radius: 28px 28px 0 0; touch-action: pan-y; }
.drawer.dragging { transition: none; }
.drawer.open { transform: translateY(0); border-radius: 0; }
.drawer-search { margin: 6px 12px 12px; height: 52px; border-radius: 26px; background: var(--surfaceC3); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; color: var(--onSurfaceVar); }
.drawer-search input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; color: var(--onSurface); }
.ds-more { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.drawer-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 104px; align-content: start; padding: 4px 4px 20px; scrollbar-width: none; }
.drawer-grid .hlabel { color: var(--onSurface); text-shadow: none; }
.drawer-empty { grid-column: 1 / -1; text-align: center; color: var(--onSurfaceVar); padding: 30px; line-height: 1.8; }

/* ── Notification shade ──────────────────────────────────────────── */
.shade-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .25s; }
.shade-panel { position: absolute; left: 0; right: 0; top: 0; max-height: 100%; overflow-y: auto; padding: 14px 12px 20px; background: var(--surfaceC1);
  border-radius: 0 0 30px 30px; transform: translateY(-105%); transition: transform .3s cubic-bezier(.2,.8,.2,1); scrollbar-width: none; touch-action: none; }
#shade:not(.closed) { pointer-events: auto; }
#shade:not(.closed) .shade-scrim { opacity: 1; }
#shade:not(.closed) .shade-panel { transform: translateY(0); }
#shade.full .shade-panel { bottom: 0; border-radius: 0; }
.qs { background: var(--surfaceC3); border-radius: 26px; padding: 14px 12px 6px; position: relative; }
.qs-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 4px 8px 12px; }
.qs-clock b { font-size: 30px; font-weight: 400; display: block; line-height: 1.1; }
.qs-clock span { font-size: 13px; color: var(--onSurfaceVar); }
.qs-carrier { font-size: 13px; color: var(--onSurfaceVar); }
.qs-bright-row { display: flex; align-items: center; gap: 0; margin: 0 4px 12px; position: relative; color: var(--onPrimary); }
.qs-bright-row .ms { position: absolute; left: 16px; z-index: 2; pointer-events: none; font-size: 22px; }
.qs-bright { -webkit-appearance: none; appearance: none; width: 100%; height: 48px; border-radius: 24px; background: var(--secondaryContainer); overflow: hidden; margin: 0; cursor: pointer; }
.qs-bright::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 48px; border-radius: 24px; background: var(--primary); box-shadow: -400px 0 0 376px var(--primary); }
.qs-bright::-moz-range-thumb { width: 48px; height: 48px; border: 0; border-radius: 24px; background: var(--primary); }
.qs-bright::-moz-range-progress { height: 48px; background: var(--primary); border-radius: 24px; }
.qs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qs-tile { height: 68px; border-radius: 22px; background: var(--surfaceC4); display: flex; align-items: center; gap: 10px; padding: 0 10px 0 12px; text-align: left; min-width: 0; transition: background .2s, border-radius .2s; }
.qs-tile.on { background: var(--primary); color: var(--onPrimary); border-radius: 22px; }
.qs-ic { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.qs-tile.on .qs-ic { background: rgba(255,255,255,.18); }
.qs-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qs-txt b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-txt small { font-size: 12px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-chev { font-size: 20px; opacity: .8; }
.qs-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px 4px; }
.qs-round { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surfaceC4); }
.qs-round:last-child { background: var(--surfaceC4); }
.qs-dots { display: flex; gap: 5px; flex: 1; justify-content: center; }
.qs-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--outlineVar); } .qs-dots i.on { background: var(--primary); }
.qs-handle { display: flex; justify-content: center; width: 100%; padding: 10px 0 4px; }
.qs-handle i { width: 32px; height: 4px; border-radius: 2px; background: var(--onSurfaceVar); opacity: .5; }
.notif-list { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; border-radius: 24px; overflow: hidden; }
.notif { display: flex; gap: 12px; padding: 14px 16px; background: var(--surfaceC3); align-items: flex-start; cursor: pointer; transition: transform .2s, opacity .2s; touch-action: pan-y; }
.notif-list .notif:first-child { border-radius: 24px 24px 6px 6px; }
.notif-list .notif:last-child { border-radius: 6px 6px 24px 24px; }
.notif-list .notif:only-child { border-radius: 24px; }
.notif-ic { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--onPrimary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.notif-ic .ms { font-size: 18px; }
.notif-body { flex: 1; min-width: 0; }
.notif-meta { font-size: 12px; color: var(--onSurfaceVar); }
.notif-title { font-size: 15px; font-weight: 500; margin-top: 2px; }
.notif-text { font-size: 14px; color: var(--onSurfaceVar); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-avatar { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 500; flex: 0 0 auto; }
.notif-progress { height: 4px; border-radius: 2px; background: var(--secondaryContainer); margin-top: 8px; overflow: hidden; }
.notif-progress i { display: block; height: 100%; background: var(--primary); transition: width .15s; }
.notif-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 4px 0; }
.notif-empty { text-align: center; color: #fff; opacity: .85; padding: 28px 0 10px; font-size: 14px; }
.notif-locked { text-align: center; color: #fff; opacity: .8; font-size: 13px; padding: 10px; }
#headsup { position: absolute; top: 40px; left: 10px; right: 10px; transform: translateY(-140%); transition: transform .3s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
#headsup.show { transform: translateY(0); pointer-events: auto; }
.notif.heads { border-radius: 24px; box-shadow: 0 6px 20px rgba(0,0,0,.25); background: var(--surfaceC2); touch-action: none; }

/* ── Recent apps ─────────────────────────────────────────────────── */
#recents { opacity: 0; transition: opacity .2s; }
#recents.show { opacity: 1; }
.recents-bg { position: absolute; inset: 0; background: rgba(20,20,22,.55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.rec-scroll { position: absolute; inset: 0; display: flex; align-items: center; gap: 18px; overflow-x: auto; padding: 0 70px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rec-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; scroll-snap-align: center; }
.rec-head { width: 36px; height: 36px; border-radius: 50%; }
.rec-card { width: 256px; height: 554px; border-radius: 26px; overflow: hidden; position: relative; background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .2s, opacity .2s; cursor: pointer; touch-action: none; }
.rec-snap { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(.6214); pointer-events: none; }
.rec-snap > .appwin { position: relative; display: block !important; }
.rec-name { color: #fff; font-size: 13px; }
.rec-clear { flex: 0 0 auto; align-self: center; scroll-snap-align: center; white-space: nowrap; }
.rec-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; }
#screen.recents-mode #launcher { filter: blur(3px); }
#screen.recents-mode #appstack { visibility: hidden; }

/* ── Dialogs, sheets, menus ──────────────────────────────────────── */
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .18s; }
.scrim.show { opacity: 1; }
.scrim.clear { background: transparent; }
.dialog { position: absolute; left: 50%; top: 50%; width: min(340px, calc(100% - 48px)); max-height: 80%; overflow: auto; transform: translate(-50%, -46%) scale(.96); opacity: 0;
  transition: transform .18s, opacity .18s; background: var(--surfaceC3); color: var(--onSurface); border-radius: 28px; padding: 24px; }
.dialog.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.dlg-icon { display: flex; justify-content: center; color: var(--secondary); margin-bottom: 14px; }
.dlg-title { font-size: 22px; font-weight: 400; margin: 0 0 14px; line-height: 1.3; }
.dlg-title.center { text-align: center; }
.dlg-text { font-size: 14px; color: var(--onSurfaceVar); margin: 0 0 16px; line-height: 1.5; white-space: pre-line; }
.dlg-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; margin-top: 18px; }
.perm-dialog .dlg-title { font-size: 19px; }
.perm-buttons { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.perm-btn { padding: 14px; border-radius: 20px; background: var(--surfaceC1); color: var(--primary); font-weight: 500; font-size: 15px; }
.perm-btn:first-child { border-radius: 20px 20px 4px 4px; }
.perm-btn:last-child { border-radius: 4px 4px 20px 20px; }
.perm-btn:only-child { border-radius: 20px; }
.perm-buttons .perm-btn:nth-child(2):not(:last-child) { border-radius: 4px; }
.uninstall-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 18px; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; background: var(--surfaceC1); color: var(--onSurface); border-radius: 28px 28px 0 0;
  padding: 8px 20px 34px; transform: translateY(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.sheet.show { transform: translateY(0); }
.sheet-grip { width: 32px; height: 4px; border-radius: 2px; background: var(--onSurfaceVar); opacity: .4; margin: 6px auto 14px; cursor: grab; padding: 8px 40px; background-clip: content-box; box-sizing: content-box; }
.sheet-title { font-size: 22px; font-weight: 400; margin: 0 0 4px; text-align: center; }
.sheet-sub { text-align: center; color: var(--onSurfaceVar); font-size: 14px; margin: 0 0 16px; }
.sheet-buttons { display: flex; justify-content: space-between; margin-top: 18px; }
.popmenu { position: absolute; min-width: 200px; max-width: 290px; background: var(--surfaceC2); color: var(--onSurface); border-radius: 16px; padding: 8px 0; box-shadow: 0 6px 24px rgba(0,0,0,.25);
  opacity: 0; transform: scale(.95); transform-origin: top left; transition: opacity .12s, transform .12s; }
.popmenu.show { opacity: 1; transform: scale(1); }
.popmenu hr { border: 0; border-top: 1px solid var(--outlineVar); margin: 6px 0; }
.pm-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 18px; text-align: left; font-size: 15px; }
.pm-item:hover, .pm-item:focus-visible { background: rgba(128,128,128,.12); outline: none; }
.pm-item .ms { font-size: 20px; color: var(--onSurfaceVar); }
.pm-item.danger, .pm-item.danger .ms { color: #d93025; }
.pm-item:disabled { opacity: .4; }
.toast { display: flex; align-items: center; gap: 8px; max-width: 320px; padding: 10px 16px 10px 10px; border-radius: 22px; background: #2d2f31; color: #eee; font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: none; }
.snackbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: calc(100% - 24px); padding: 6px 8px 6px 16px; min-height: 48px; border-radius: 6px;
  background: var(--inverse); color: var(--onInverse); font-size: 14px; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; pointer-events: auto; }
.snackbar.show { opacity: 1; transform: none; }
.snackbar .btn-text { color: var(--primaryContainer); }

/* Power menu */
.power-menu { position: absolute; right: 14px; top: 50%; transform: translate(20px, -50%); opacity: 0; transition: .2s; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.power-menu.show { opacity: 1; transform: translate(0, -50%); }
.pw-btn { width: 118px; height: 118px; border-radius: 28px; background: var(--surfaceC3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 14px; }
.pw-btn .ms { font-size: 28px; }
.pw-btn.emergency { background: #f9dedc; color: #8c1d18; }

/* Volume */
#volpanel { position: absolute; right: 10px; top: 150px; width: 64px; padding: 10px 0; border-radius: 32px; background: var(--surfaceC2); box-shadow: 0 6px 20px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
#volpanel.expanded { width: auto; }
.vol-ring { width: 44px; height: 44px; border-radius: 50%; background: var(--primaryContainer); color: var(--onPrimaryContainer); display: flex; align-items: center; justify-content: center; }
.vol-cols { display: flex; gap: 4px; padding: 0 10px; }
.vol-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vol-col small { font-size: 10px; color: var(--onSurfaceVar); display: none; }
#volpanel.expanded .vol-col small { display: block; }
.vol-slider { width: 44px; height: 180px; position: relative; }
.vol-slider input { position: absolute; width: 180px; height: 44px; left: -68px; top: 68px; transform: rotate(-90deg); -webkit-appearance: none; appearance: none; background: var(--secondaryContainer); border-radius: 22px; overflow: hidden; margin: 0; cursor: pointer; }
.vol-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; border-radius: 22px; background: var(--primary); box-shadow: -400px 0 0 378px var(--primary); }
.vol-slider input::-moz-range-thumb { width: 44px; height: 44px; border: 0; border-radius: 22px; background: var(--primary); }
.vol-slider input::-moz-range-progress { height: 44px; background: var(--primary); }
.vol-col > .ms { font-size: 18px; color: var(--onSurfaceVar); }
.vol-more { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--onSurfaceVar); }

/* ── Lock screen ─────────────────────────────────────────────────── */
#lock { color: #fff; overflow: hidden; touch-action: none; transition: opacity .28s, transform .28s; }
#lock.leaving { opacity: 0; transform: translateY(-40px); }
.lk-wall { position: absolute; inset: 0; background: var(--wallpaper); filter: brightness(.72); }
#lock.bouncing .lk-wall { filter: brightness(.4) blur(10px); }
.lk-top { position: absolute; top: 10px; left: 26px; line-height: 20px; font-size: 13px; opacity: .9; }
.lk-clock { position: absolute; top: 120px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; line-height: .86; transition: transform .2s; }
.lk-clock b { font-size: 132px; font-weight: 300; letter-spacing: -2px; font-variant-numeric: tabular-nums; color: var(--primaryContainer); }
.lk-clock b + b { color: #fff; }
.lk-date { position: absolute; top: 380px; left: 0; right: 0; text-align: center; font-size: 17px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.lk-weather { display: inline-flex; align-items: center; gap: 4px; }
.lk-weather .ms { font-size: 20px; }
.lk-notifs { position: absolute; top: 430px; left: 16px; right: 16px; display: flex; flex-direction: column; gap: 6px; }
.lk-notif { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: rgba(0,0,0,.35); backdrop-filter: blur(6px); cursor: pointer; }
.lk-notif b { display: block; font-weight: 500; font-size: 14px; }
.lk-notif small { display: block; font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 290px; }
.lk-more { text-align: center; font-size: 13px; opacity: .8; }
.lk-bottom { position: absolute; bottom: 34px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 32px; }
.lk-short { width: 58px; height: 58px; border-radius: 50%; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; transition: transform .3s, background .3s; }
.lk-short.pressing { transform: scale(1.25); background: rgba(255,255,255,.25); transition: transform .55s, background .55s; }
.lk-short.on { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.lk-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; text-align: center; max-width: 200px; padding-bottom: 6px; }
.lk-fp { font-size: 40px; opacity: .85; }
.lk-hint-txt.flash { color: var(--primaryContainer); }
#lock.bump .lk-clock, #lock.bump .lk-date { animation: bump .45s; }
@keyframes bump { 30% { transform: translateY(-26px); } }
.lk-bouncer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 60px; gap: 20px; z-index: 3; }
.lk-bouncer.shake .pin-dots { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } }
#lock.bouncing .lk-clock, #lock.bouncing .lk-date, #lock.bouncing .lk-notifs, #lock.bouncing .lk-bottom { opacity: 0; pointer-events: none; }
.pin-title { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 16px; text-align: center; max-width: 300px; }
.pin-dots { height: 30px; display: flex; gap: 14px; align-items: center; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 76px); gap: 14px 28px; }
.pin-pad button { width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 30px; display: flex; align-items: center; justify-content: center; }
.pin-pad button:active { background: rgba(255,255,255,.3); }
.pin-pad .pin-ok { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.pin-foot { display: flex; gap: 60px; }
.pin-foot .btn-text { color: #fff; }

/* ── Boot / setup ────────────────────────────────────────────────── */
#boot { background: #000; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#boot.booting, #boot.shutting { gap: 14px; }
#boot.done { opacity: 0; transition: opacity .4s; }
.boot-logo { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.boot-logo b { font-size: 28px; font-weight: 400; letter-spacing: .5px; }
#boot > small { position: absolute; bottom: 60px; color: #9aa0a6; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; }
/* Product logo (same drawing as the app icon): teal tile, white phone, amber check. */
.hoi-logo { position: relative; width: 72px; height: 72px; border-radius: 18px; display: block; background: linear-gradient(135deg, #14b8a6, #0f5e6e); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.hoi-logo::before { content: ''; position: absolute; left: 23px; top: 12px; width: 26px; height: 48px; border-radius: 7px; background: #0e1f2a; border: 3px solid #fff; box-sizing: border-box; }
.hoi-logo i { position: absolute; left: 31px; top: 26px; width: 9px; height: 16px; border: solid #fbbf24; border-width: 0 4px 4px 0; border-radius: 1px; transform: rotate(45deg); }
#boot .hoi-logo { animation: hoi-pulse 1.6s infinite ease-in-out; }
@keyframes hoi-pulse { 50% { transform: scale(.92); opacity: .85; } }
.boot-spin { width: 44px; height: 44px; border-radius: 50%; border: 4px solid #333; border-top-color: #8ab4f8; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#boot.setup { background: var(--surface); color: var(--onSurface); justify-content: stretch; align-items: stretch; }
.setup-page { flex: 1; display: flex; flex-direction: column; padding: 90px 28px 40px; overflow-y: auto; }
.setup-page h1 { font-size: 34px; font-weight: 400; margin: 18px 0 14px; }
.setup-page.welcome h1 { font-size: 42px; text-align: center; margin-top: 40px; }
.setup-page.welcome p { text-align: center; }
.setup-page p { font-size: 15px; line-height: 1.55; color: var(--onSurfaceVar); margin: 0 0 18px; }
.setup-page .muted { font-size: 13px; }
.setup-logo { display: flex; justify-content: center; margin-top: 30px; }
.setup-logo.small { justify-content: flex-start; margin: 0; color: var(--primary); }
.setup-logo.small .ms { font-size: 40px; }
.setup-lang { align-self: center; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 20px; background: var(--surfaceC2); margin-top: 20px; font-size: 14px; }
.setup-actions { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 24px; }
.setup-error { color: #d93025 !important; min-height: 20px; font-size: 14px !important; }
.setup-link { color: var(--primary); font-weight: 500; font-size: 14px; text-decoration: none; }
.nav-choice { display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px; border-radius: 20px; border: 2px solid var(--outlineVar); margin-bottom: 12px; }
.nav-choice.on { border-color: var(--primary); background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.nav-choice b { display: block; font-weight: 500; font-size: 16px; margin-bottom: 4px; }
.nav-choice small { font-size: 13px; opacity: .8; line-height: 1.4; display: block; }
.nav-demo { flex: 0 0 64px; height: 110px; border-radius: 12px; border: 2px solid currentColor; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; gap: 6px; opacity: .8; }
.nav-demo.gestures i { width: 28px; height: 4px; border-radius: 2px; background: currentColor; }
.nav-demo.buttons i { font-style: normal; font-size: 12px; }

/* ── Composants Material 3 ───────────────────────────────────────── */
.btn-filled, .btn-tonal, .btn-outline, .btn-text { height: 40px; padding: 0 22px; border-radius: 20px; font-weight: 500; font-size: 14px; letter-spacing: .1px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.btn-filled { background: var(--primary); color: var(--onPrimary); }
.btn-filled:disabled { opacity: .45; }
.btn-tonal { background: var(--secondaryContainer); color: var(--onSecondaryContainer); }
.btn-outline { border: 1px solid var(--outline); color: var(--primary); }
.btn-text { color: var(--primary); padding: 0 12px; }
.btn-text.danger { color: #d93025; }
.btn-tonal.sm, .btn-filled.sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-filled .ms, .btn-tonal .ms, .btn-outline .ms { font-size: 18px; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.icon-btn:active, .icon-btn:hover { background: rgba(128,128,128,.14); }
.fab { position: absolute; right: 16px; bottom: calc(40px + var(--navh, 0px)); height: 56px; min-width: 56px; padding: 0 16px; border-radius: 16px; background: var(--primaryContainer); color: var(--onPrimaryContainer);
  display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 3px 8px rgba(0,0,0,.2); font-weight: 500; z-index: 4; }
#screen[data-nav="buttons"] { --navh: 22px; }
.fab.large { height: 96px; width: 96px; border-radius: 28px; }
.fab .ms { font-size: 24px; }
.appbar { display: flex; align-items: center; gap: 4px; height: 64px; padding: 0 4px 0 4px; flex: 0 0 auto; }
.appbar h1 { flex: 1; font-size: 22px; font-weight: 400; margin: 0 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appbar.large { height: auto; flex-direction: column; align-items: stretch; padding: 4px 4px 0; }
.appbar-row { display: flex; align-items: center; justify-content: space-between; }
.appbar.large h1 { font-size: 32px; margin: 26px 16px 18px; }
.scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; }
.list-card { background: var(--surfaceC1); border-radius: 24px; overflow: hidden; margin: 0 16px 12px; }
.li { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 20px; width: 100%; text-align: left; }
button.li:hover { background: rgba(128,128,128,.07); }
button.li:active { background: rgba(128,128,128,.14); }
.li-ic { color: var(--onSurfaceVar); display: flex; }
.li-ic.round { width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.li-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.li-t b { font-weight: 400; font-size: 17px; }
.li-t small { font-size: 14px; color: var(--onSurfaceVar); line-height: 1.35; }
.li-end { color: var(--onSurfaceVar); font-size: 20px; }
.li-switch .switch { margin-left: auto; }
.li.connected .li-t small { color: var(--primary); }
.section-title { font-size: 14px; font-weight: 500; color: var(--primary); margin: 18px 20px 6px; }
.divider { height: 1px; background: var(--outlineVar); margin: 4px 20px; }
.switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: 0 0 auto; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch i { position: absolute; inset: 0; border-radius: 16px; background: var(--surfaceC4); border: 2px solid var(--outline); transition: .2s; }
.switch i::after { content: ''; position: absolute; left: 6px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--outline); transition: .2s; }
.switch input:checked + i { background: var(--primary); border-color: var(--primary); }
.switch input:checked + i::after { left: 22px; top: 2px; width: 24px; height: 24px; background: var(--onPrimary); }
.switch input:disabled + i { opacity: .4; }
.field { display: flex; flex-direction: column; gap: 4px; position: relative; margin: 10px 0; }
.field span { font-size: 12px; color: var(--primary); font-weight: 500; padding-left: 4px; }
.field input, .field textarea, .field select { border: 0; border-bottom: 2px solid var(--primary); background: var(--surfaceC4); border-radius: 6px 6px 0 0; padding: 12px 14px; font-size: 16px; outline: none; width: 100%; color: var(--onSurface); }
.field.outlined input { border: 1px solid var(--outline); border-radius: 6px; background: transparent; padding: 16px 14px; }
.field.outlined input:focus { border: 2px solid var(--primary); padding: 15px 13px; }
.field-eye { position: absolute; right: 6px; bottom: 6px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--onSurfaceVar); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--outline); font-size: 14px; font-weight: 500; white-space: nowrap; }
.chip.on { background: var(--secondaryContainer); border-color: transparent; color: var(--onSecondaryContainer); }
.chip .ms { font-size: 18px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 10px; scrollbar-width: none; flex: 0 0 auto; }
.tabs { display: flex; flex: 0 0 auto; border-bottom: 1px solid var(--outlineVar); }
.tab { flex: 1; height: 48px; font-weight: 500; font-size: 14px; color: var(--onSurfaceVar); position: relative; }
.tab.on { color: var(--primary); }
.tab.on::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.bottom-nav { display: flex; flex: 0 0 auto; height: 80px; background: var(--surfaceC2); padding-top: 12px; }
.bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--onSurfaceVar); }
.bn-item .bn-ic { width: 64px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.bn-item.on { color: var(--onSurface); }
.bn-item.on .bn-ic { background: var(--secondaryContainer); color: var(--onSecondaryContainer); }
.bn-item.on .ms { font-variation-settings: 'FILL' 1; }
.search-bar { display: flex; align-items: center; gap: 12px; height: 56px; margin: 8px 16px; padding: 0 8px 0 16px; border-radius: 28px; background: var(--surfaceC3); color: var(--onSurfaceVar); flex: 0 0 auto; }
.search-bar input { flex: 1; border: 0; background: none; outline: none; font-size: 16px; color: var(--onSurface); min-width: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 500; font-size: 17px; flex: 0 0 auto; }
.avatar.lg { width: 96px; height: 96px; font-size: 40px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 50px 30px; color: var(--onSurfaceVar); text-align: center; }
.empty-state .ms { font-size: 56px; opacity: .6; }
.progress-linear { height: 4px; border-radius: 2px; background: var(--secondaryContainer); overflow: hidden; }
.progress-linear i { display: block; height: 100%; background: var(--primary); transition: width .15s; }
.muted { color: var(--onSurfaceVar); }
.pad { padding: 0 20px; }
kbd { font-family: inherit; }
#screen.is-locked .sb-left { visibility: hidden; }