/* ══════════════════════════════════════════════════════════════════
   SafePhone — styles for the apps and the lessons layer.
   ══════════════════════════════════════════════════════════════════ */
.app { font-size: 1em; }
.app .scroll { padding-bottom: 8px; }
.appbar-actions { display: flex; }
.spinning { animation: spin 1.2s linear infinite; }
.spin-sm { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--outlineVar); border-top-color: var(--primary); animation: spin 1s linear infinite; vertical-align: middle; margin-left: 6px; }
.fab.extended { padding: 0 20px; }
.hist { display: flex; flex-direction: column; gap: 8px; font-size: calc(14px * var(--font-scale, 1)); }
.hist div { display: flex; align-items: center; gap: 6px; }

/* ── Settings ────────────────────────────────────────────────────── */
.settings-title { font-size: 34px; font-weight: 400; margin: 30px 24px 16px; }
.settings-root .search-bar { width: calc(100% - 32px); cursor: text; text-align: left; }
.account-card { display: flex; align-items: center; gap: 14px; margin: 8px 16px 14px; padding: 16px; border-radius: 24px; background: var(--primaryContainer); color: var(--onPrimaryContainer); text-align: left; width: calc(100% - 32px); }
.account-card > .ms { font-size: 48px; }
.account-card b { display: block; font-weight: 500; font-size: calc(17px * var(--font-scale, 1)); }
.account-card small { display: block; font-size: calc(13px * var(--font-scale, 1)); opacity: .8; }
.account-card.small > .ms { font-size: 40px; }
.cat-list { padding: 0 8px; }
.li.cat { border-radius: 20px; }
.li.cat .li-ic.round { width: 42px; height: 42px; }
.search-top { display: flex; align-items: center; gap: 4px; margin: 8px 8px; height: 56px; border-radius: 28px; background: var(--surfaceC3); padding-right: 6px; }
.settings-search { flex: 1; border: 0; background: none; outline: none; font-size: calc(17px * var(--font-scale, 1)); color: var(--onSurface); min-width: 0; }
.sec-status { display: flex; gap: 14px; align-items: center; margin: 4px 16px 10px; padding: 18px; border-radius: 24px; }
.sec-status .ms { font-size: 36px; }
.sec-status b { display: block; font-weight: 500; }
.sec-status small { font-size: calc(13px * var(--font-scale, 1)); }
.sec-status.ok { background: #c4eed0; color: #0d5222; }
.sec-status.warn { background: #ffdfa6; color: #5a3b00; }
.appinfo-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 18px; }
.appinfo-head h2 { margin: 0; font-weight: 400; font-size: calc(24px * var(--font-scale, 1)); }
.appinfo-actions { display: flex; justify-content: center; gap: 10px; margin: 0 16px 16px; }
.appinfo-actions button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 20px; border: 1px solid var(--outlineVar); font-size: calc(13px * var(--font-scale, 1)); color: var(--primary); }
.appinfo-actions button:disabled { opacity: .4; }
.battery-big, .storage-big { margin: 0 16px 16px; padding: 20px; border-radius: 24px; background: var(--surfaceC1); display: flex; flex-direction: column; gap: 10px; }
.bb-level { font-size: 44px; font-weight: 400; }
.bb-bar, .st-bar { height: 14px; border-radius: 7px; background: var(--surfaceC4); overflow: hidden; display: flex; }
.bb-bar i { background: var(--primary); display: block; }
.storage-big b { font-size: 32px; font-weight: 400; }
.st-bar i { display: block; height: 100%; }
.vol-card { padding: 8px 0; }
.vol-row { display: flex; align-items: center; gap: 14px; padding: 10px 20px; }
.vol-row > .ms { color: var(--onSurfaceVar); }
.vol-row-t { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.vol-row-t b, .slider-li b { font-weight: 400; font-size: calc(16px * var(--font-scale, 1)); }
input[type="range"] { accent-color: var(--primary); width: 100%; }
.seg { display: flex; margin: 0 16px 12px; border: 1px solid var(--outline); border-radius: 22px; overflow: hidden; }
.seg-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; font-size: calc(14px * var(--font-scale, 1)); font-weight: 500; border-right: 1px solid var(--outline); }
.seg-btn:last-child { border-right: 0; }
.seg-btn.on { background: var(--secondaryContainer); color: var(--onSecondaryContainer); }
.seg-btn .ms { font-size: 18px; }
.bright-li { gap: 12px; }
.font-preview { margin: 0 16px 16px; padding: 18px; border-radius: 24px; background: var(--surfaceC2); display: flex; flex-direction: column; gap: 8px; }
.fp-bubble { max-width: 80%; padding: .6em .9em; border-radius: 18px; line-height: 1.35; }
.fp-bubble.in { background: var(--surfaceC4); align-self: flex-start; }
.fp-bubble.out { background: var(--primary); color: var(--onPrimary); align-self: flex-end; }
.fp-time { font-size: 12px; text-align: center; }
.step-slider { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.wp-previews { display: flex; gap: 14px; justify-content: center; margin: 0 16px 10px; }
.wp-prev { width: 130px; height: 250px; border-radius: 20px; border: 3px solid var(--outlineVar); position: relative; color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 30px; overflow: hidden; }
.wp-prev b { font-size: 34px; font-weight: 300; line-height: .9; }
.wp-prev small { position: absolute; bottom: -24px; font-size: calc(12px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.wp-previews { margin-bottom: 36px; }
.wp-icons { position: absolute; bottom: 14px; display: flex; gap: 8px; }
.wp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 16px 10px; }
.wp-thumb { aspect-ratio: 9 / 16; border-radius: 16px; border: 3px solid transparent; display: flex; align-items: center; justify-content: center; color: #fff; }
.wp-thumb.on { border-color: var(--primary); }
.wp-thumb .ms { font-size: 30px; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.wp-thumb.photos { background: var(--surfaceC3); color: var(--onSurfaceVar); flex-direction: column; gap: 6px; font-size: calc(12px * var(--font-scale, 1)); }
.pal-tabs { margin: 0 16px; }
.pal-row { display: flex; gap: 12px; align-items: center; padding: 16px 20px; flex-wrap: wrap; }
.pal { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; border: 3px solid transparent; }
.pal.on { border-color: var(--onSurface); }
/* Tips & support (Settings) */
.help-search { margin: 4px 16px 10px; }
.help-steps { margin: 4px 20px 12px; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; font-size: calc(16px * var(--font-scale, 1)); line-height: 1.45; }
/* Voicemail (Phone app) */
.vm-list { display: flex; flex-direction: column; }
.vm.open { background: var(--surfaceC1); border-radius: 20px; margin: 4px 8px; }
.li-t b.vm-new { font-weight: 700; }
.vm-new .unread-dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
.vm-body { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.vm-player { display: flex; align-items: center; gap: 12px; }
.vm-play { width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--onPrimary); display: grid; place-items: center; flex: none; }
.vm-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surfaceC3); overflow: hidden; }
.vm-bar i { display: block; height: 100%; width: 0; background: var(--primary); }
.vm-bar i.on { animation: vm-progress var(--d) linear forwards; }
@keyframes vm-progress { to { width: 100%; } }
.vm-text { margin: 0; font-size: calc(15px * var(--font-scale, 1)); line-height: 1.45; }
.vm-text b { display: block; font-size: calc(12px * var(--font-scale, 1)); color: var(--onSurfaceVar); font-weight: 500; }
.vm-tip { color: var(--onSurfaceVar); font-size: calc(13px * var(--font-scale, 1)); padding: 12px 20px; margin: 0; }
.bn-ic { position: relative; }
.bn-badge { position: absolute; top: 0; right: 14px; min-width: 18px; height: 18px; border-radius: 9px; background: #d93025; color: #fff; font-size: 11px; font-style: normal; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.voice-sheet { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.voice-sheet .list-card { align-self: stretch; text-align: left; }
.voice-mic { width: 72px; height: 72px; border-radius: 50%; background: var(--primary); color: var(--onPrimary); display: grid; place-items: center; animation: voice-pulse 1.4s ease-in-out infinite; }
.voice-mic .ms { font-size: 36px; }
@keyframes voice-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(26,115,232,.35); } 50% { box-shadow: 0 0 0 14px rgba(26,115,232,0); } }
@media (prefers-reduced-motion: reduce) { .voice-mic { animation: none; } }
.photo-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.photo-pick button { aspect-ratio: 1; background-size: cover; background-position: center; border-radius: 6px; }
.update-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 30px 24px; }
.update-box > .ms { font-size: 64px; color: var(--primary); }
.update-box h2 { font-weight: 400; margin: 0; }
.update-box p { margin: 0; }
.upd-bar { width: 100%; height: 8px; border-radius: 4px; background: var(--surfaceC3); overflow: hidden; }
.upd-bar i { display: block; height: 100%; background: var(--primary); transition: width .4s; }
.upd-reboot { position: absolute; inset: 0; z-index: 9000; background: #000; color: #e8eaed; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; font-size: calc(16px * var(--font-scale, 1)); }
.upd-reboot .hoi-logo { transform: scale(1.6); }
.vc-self.off small { display: block; font-size: 10px; margin-top: 2px; }
.about-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 20px; font-size: calc(20px * var(--font-scale, 1)); }
.about-head .ms { font-size: 56px; color: var(--primary); }

/* ── Phone ───────────────────────────────────────────────────────── */
.phone-search { cursor: text; }
.phone-search > span.muted { flex: 1; }
.phone-fab { bottom: calc(96px + var(--navh, 0px)); border-radius: 16px; }
.fav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 16px; }
.fav { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: calc(14px * var(--font-scale, 1)); }
.fav .avatar.lg { width: 84px; height: 84px; }
.recent .li { padding: 8px 12px 8px 16px; }
.recent .li-t small { display: flex; align-items: center; gap: 4px; }
.recent .li-t small .ms { font-size: 16px; }
.recent .li-t b.missed { color: #d93025; }
.call-in { color: #188038; } .call-out { color: #1a73e8; } .call-missed { color: #d93025; }
.recent.open { background: var(--surfaceC2); border-radius: 20px; margin: 4px 8px; }
.recent-actions { display: flex; justify-content: space-around; padding: 4px 8px 12px; }
.recent-actions button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: calc(12px * var(--font-scale, 1)); color: var(--primary); padding: 6px 10px; border-radius: 14px; }
.dialpad-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surfaceC1); border-radius: 28px 28px 0 0; padding: 10px 24px calc(34px + var(--navh, 0px)); box-shadow: 0 -4px 20px rgba(0,0,0,.15); z-index: 5; }
.dp-suggest .li { min-height: 52px; padding: 4px 8px; }
.dp-number { text-align: center; min-height: 56px; }
.dp-input { width: 100%; border: 0; background: none; text-align: center; font-size: 32px; outline: none; color: var(--onSurface); letter-spacing: 1px; }
.dp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px; margin: 6px 0; }
.dp-key { height: 66px; border-radius: 33px; background: var(--surfaceC3); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dp-key:active { background: var(--primaryContainer); }
.dp-key b { font-size: calc(28px * var(--font-scale, 1)); font-weight: 400; line-height: 1; }
.dp-key small { font-size: 10px; letter-spacing: 1.5px; color: var(--onSurfaceVar); }
.dp-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; margin-top: 8px; }
.dp-call { width: 110px; height: 60px; border-radius: 30px; background: #1e8e3e; color: #fff; display: flex; align-items: center; justify-content: center; }
.dp-call .ms { font-size: 28px; }
.call-screen { position: absolute; inset: 0; padding: 70px 24px calc(50px + var(--navh, 0px)); display: flex; flex-direction: column; background: linear-gradient(180deg, #1e2b3a, #0c1117); color: #fff; }
.call-top { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.call-top h2 { margin: 6px 0 0; font-weight: 400; font-size: calc(30px * var(--font-scale, 1)); }
.call-top small { opacity: .8; font-size: calc(15px * var(--font-scale, 1)); }
.call-grid { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; }
.call-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: calc(12px * var(--font-scale, 1)); opacity: .95; }
.call-opt .ms { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 28px; }
.call-opt.on .ms { background: #fff; color: #0c1117; }
.call-end-row { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 30px; }
.call-round { width: 72px; height: 72px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; position: relative; }
.call-round .ms { font-size: 32px; }
.call-round span:not(.ms) { position: absolute; bottom: -24px; font-size: 13px; white-space: nowrap; }
.call-round.decline { background: #d93025; }
.call-round.answer { background: #1e8e3e; animation: pulse 1.2s infinite; }
.call-round.msg { background: rgba(255,255,255,.18); width: 56px; height: 56px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px rgba(30,142,62,.25); } }
.call-incoming-actions { margin-top: auto; margin-bottom: 30px; display: flex; justify-content: space-around; align-items: center; }
.call-keypad { margin-top: auto; }
.call-keypad .dp-key { background: rgba(255,255,255,.12); color: #fff; }
.ck-digits { text-align: center; font-size: calc(28px * var(--font-scale, 1)); min-height: 36px; }
.call-hide { color: #fff; }

/* ── Messages ────────────────────────────────────────────────────── */
.thread { padding: 10px 16px; }
.thread .li-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread.unread .li-t b, .thread.unread .li-t small { font-weight: 600; color: var(--onSurface); }
.thread-time { font-size: calc(12px * var(--font-scale, 1)); color: var(--onSurfaceVar); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.thread-bar { gap: 8px; }
.thread-bar h1 { font-size: calc(18px * var(--font-scale, 1)); margin-left: 0; }
.thread-bar .avatar { width: 34px; height: 34px; font-size: 14px; }
.spam-banner, .unknown-banner { display: flex; align-items: center; gap: 10px; margin: 0 12px 6px; padding: 10px 12px; border-radius: 16px; font-size: calc(13px * var(--font-scale, 1)); }
.spam-banner { background: #fce8e6; color: #8c1d18; }
.spam-banner b { display: block; } .spam-banner small { display: block; }
.unknown-banner { background: var(--surfaceC2); }
.unknown-banner span:not(.ms) { flex: 1; }
.bubbles { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.day-sep { text-align: center; font-size: calc(12px * var(--font-scale, 1)); color: var(--onSurfaceVar); margin: 12px 0 6px; }
.bubble { max-width: 78%; padding: 9px 14px; border-radius: 20px; line-height: 1.4; word-wrap: break-word; font-size: .95em; }
.bubble small { display: block; font-size: calc(11px * var(--font-scale, 1)); opacity: .7; margin-top: 3px; }
.bubble.them { align-self: flex-start; background: var(--surfaceC3); border-bottom-left-radius: 6px; }
.bubble.me { align-self: flex-end; background: var(--primary); color: var(--onPrimary); border-bottom-right-radius: 6px; }
.bubble.img { padding: 4px; background: transparent; }
.bubble.img img { width: 200px; border-radius: 16px; display: block; cursor: pointer; }
.bubble.img small { color: var(--onSurfaceVar); padding: 0 6px; }
.sms-link { color: inherit; text-decoration: underline; cursor: pointer; word-break: break-all; }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 20px; background: var(--surfaceC3); }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--onSurfaceVar); animation: typing 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-4px); opacity: .4; } }
.composer { display: flex; align-items: flex-end; gap: 4px; padding: 8px 8px 10px; }
.composer-field { flex: 1; display: flex; align-items: flex-end; background: var(--surfaceC3); border-radius: 24px; padding-left: 16px; min-height: 48px; }
.composer-field textarea { flex: 1; border: 0; background: none; outline: none; resize: none; font-size: calc(16px * var(--font-scale, 1)); padding: 13px 0; max-height: 120px; color: var(--onSurface); }
.send-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--primary); color: var(--onPrimary); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.send-btn:disabled { background: var(--surfaceC4); color: var(--onSurfaceVar); }
.to-field { display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-bottom: 1px solid var(--outlineVar); }
.to-field input { flex: 1; border: 0; outline: none; background: none; font-size: calc(16px * var(--font-scale, 1)); padding: 10px 0; color: var(--onSurface); }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; font-size: calc(28px * var(--font-scale, 1)); }
.emoji-grid button { padding: 6px; border-radius: 10px; }

/* ── Contacts ────────────────────────────────────────────────────── */
.letter-row { display: flex; align-items: center; }
.letter { width: 36px; flex: 0 0 36px; text-align: center; color: var(--primary); font-weight: 500; }
.letter-row .li { padding-left: 4px; }
.contact-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 18px; }
.contact-head .avatar.lg { width: 110px; height: 110px; font-size: 44px; }
.contact-head h2 { margin: 6px 0 0; font-weight: 400; font-size: calc(28px * var(--font-scale, 1)); text-align: center; }
.contact-actions { display: flex; justify-content: center; gap: 22px; margin-bottom: 18px; }
.contact-actions button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: calc(13px * var(--font-scale, 1)); }
.contact-actions button span { width: 56px; height: 56px; border-radius: 50%; background: var(--primaryContainer); color: var(--onPrimaryContainer); display: flex; align-items: center; justify-content: center; }
.contact-actions button:disabled { opacity: .4; }
.fav-on { color: #f9ab00; }
.edit-form { padding: 0 20px 30px; }
.edit-photo { display: flex; justify-content: center; margin: 10px 0 16px; }

/* ── Appareil photo ──────────────────────────────────────────────── */
.camera-app { background: #000; color: #fff; }
.cam-view { position: absolute; left: 0; right: 0; top: 70px; bottom: 210px; overflow: hidden; border-radius: 20px; background: #111; }
.cam-view.flip { animation: flip .35s; }
@keyframes flip { 50% { transform: rotateY(90deg); } }
.cam-video, .cam-sim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.cam-video.mirror { transform: scaleX(-1); }
.cam-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px); background-size: 33.33% 33.33%; pointer-events: none; }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: camflash .35s; }
.cam-flash.torch { opacity: .6; }
@keyframes camflash { 0% { opacity: .9; } 100% { opacity: 0; } }
.cam-count { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 90px; font-weight: 300; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.cam-count.rec { top: 20px; font-size: calc(18px * var(--font-scale, 1)); background: #d93025; padding: 4px 12px; border-radius: 14px; transform: translateX(-50%); }
.cam-note { position: absolute; bottom: 10px; left: 10px; right: 10px; text-align: center; font-size: calc(12px * var(--font-scale, 1)); background: rgba(0,0,0,.5); border-radius: 12px; padding: 6px; }
.cam-top { position: absolute; top: 36px; left: 0; right: 0; display: flex; justify-content: space-around; }
.cam-top .icon-btn { color: #fff; }
.cam-zoom { position: absolute; bottom: 222px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; background: rgba(0,0,0,.4); border-radius: 20px; padding: 4px; }
.cam-zoom button { width: 36px; height: 36px; border-radius: 50%; font-size: calc(12px * var(--font-scale, 1)); font-weight: 500; }
.cam-zoom button.on { background: rgba(255,255,255,.9); color: #000; }
.cam-modes { position: absolute; bottom: 160px; left: 0; right: 0; display: flex; justify-content: center; gap: 22px; font-size: calc(14px * var(--font-scale, 1)); }
.cam-modes button { opacity: .7; padding: 6px 12px; border-radius: 16px; }
.cam-modes button.on { opacity: 1; background: rgba(255,255,255,.18); font-weight: 500; }
.cam-bottom { position: absolute; bottom: calc(50px + var(--navh, 0px)); left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; }
.cam-thumb { width: 52px; height: 52px; border-radius: 50%; background: #333 center/cover; border: 2px solid #fff; }
.cam-thumb.pop { animation: pop .35s; }
@keyframes pop { 50% { transform: scale(1.25); } }
.cam-shutter { width: 80px; height: 80px; border-radius: 50%; border: 4px solid #fff; display: flex; align-items: center; justify-content: center; }
.cam-shutter i { width: 62px; height: 62px; border-radius: 50%; background: #fff; transition: .2s; }
.cam-shutter:active i { transform: scale(.88); }
.cam-shutter.video i { background: #d93025; }
.cam-shutter.recording i { width: 30px; height: 30px; border-radius: 8px; background: #d93025; }
.cam-switch { width: 52px; height: 52px; background: rgba(255,255,255,.15); color: #fff; }
.cam-denied { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px; text-align: center; }
.cam-denied > .ms { font-size: 60px; }
.cam-denied h2 { font-weight: 400; margin: 0; }
.cam-denied p { opacity: .8; font-size: calc(14px * var(--font-scale, 1)); }

/* ── Photos ──────────────────────────────────────────────────────── */
.ph-logo { font-weight: 500; color: var(--onSurfaceVar); }
.sm-av { width: 36px; height: 36px; background: none; color: var(--primary); margin-right: 8px; }
.sm-av .ms { font-size: 32px; }
.ph-day { font-size: calc(14px * var(--font-scale, 1)); font-weight: 500; padding: 14px 16px 8px; }
.ph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.ph-cell { aspect-ratio: 1; position: relative; overflow: hidden; background: var(--surfaceC3); }
.ph-cell img, .ph-cell video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .15s; }
.ph-cell.sel img { transform: scale(.85); border-radius: 10px; }
.ph-vid, .ph-star { position: absolute; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ph-vid { right: 4px; top: 4px; } .ph-star { left: 4px; bottom: 4px; } .ph-star .ms { font-size: 18px; }
.ph-check { position: absolute; left: 4px; top: 4px; color: #fff; }
.ph-cell.sel .ph-check { color: var(--primary); background: #fff; border-radius: 50%; }
.album-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 8px 16px; }
.album { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: calc(14px * var(--font-scale, 1)); }
.album small { color: var(--onSurfaceVar); font-size: calc(12px * var(--font-scale, 1)); }
.album-cover { aspect-ratio: 1; border-radius: 16px; background: var(--surfaceC3) center/cover; display: flex; align-items: center; justify-content: center; color: var(--onSurfaceVar); }
.select-bar { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.viewer { position: absolute; inset: 0; background: #000; color: #fff; }
.vw-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; }
.vw-media { max-width: 100%; max-height: 100%; transition: transform .25s; user-select: none; }
.vw-top, .vw-bottom { position: absolute; left: 0; right: 0; display: flex; align-items: center; padding: 0 6px; transition: opacity .2s; background: linear-gradient(rgba(0,0,0,.5), transparent); }
.vw-top { top: 36px; height: 60px; }
.vw-top .icon-btn { color: #fff; }
.vw-date { flex: 1; display: flex; flex-direction: column; font-size: calc(14px * var(--font-scale, 1)); }
.vw-date small { opacity: .75; font-size: calc(12px * var(--font-scale, 1)); }
.vw-bottom { bottom: var(--navh, 0px); height: 90px; padding-bottom: 26px; justify-content: space-around; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.vw-bottom button { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: calc(12px * var(--font-scale, 1)); }
.vw-bottom button:disabled { opacity: .35; }
.viewer.bare .vw-top, .viewer.bare .vw-bottom, .viewer.bare .vw-nav { opacity: 0; pointer-events: none; }
.vw-nav { position: absolute; top: 50%; width: 40px; height: 64px; margin-top: -32px; background: rgba(0,0,0,.35); color: #fff; display: flex; align-items: center; justify-content: center; }
.vw-nav.prev { left: 0; border-radius: 0 20px 20px 0; } .vw-nav.next { right: 0; border-radius: 20px 0 0 20px; }
.share-people { display: flex; gap: 14px; overflow-x: auto; padding: 4px 0 16px; }
.share-people button, .share-apps button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: calc(12px * var(--font-scale, 1)); flex: 0 0 64px; }
.share-apps { display: flex; justify-content: space-around; border-top: 1px solid var(--outlineVar); padding-top: 14px; }
.share-apps .ms { width: 52px; height: 52px; border-radius: 50%; background: var(--secondaryContainer); color: var(--onSecondaryContainer); display: flex; align-items: center; justify-content: center; }
.editor { position: absolute; inset: 0; background: #000; color: #fff; display: flex; flex-direction: column; }
.editor .vw-top { position: static; margin-top: 36px; background: none; padding: 0 12px; }
.ed-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; }
.ed-img { max-width: 100%; max-height: 100%; transition: transform .25s; }
.ed-tools { padding: 10px 0 calc(34px + var(--navh, 0px)); }
.ed-tools .chip { color: #fff; border-color: rgba(255,255,255,.4); }
.ed-tools .chip.on { background: #fff; color: #000; }
.ed-row { display: flex; align-items: center; gap: 10px; padding: 6px 20px; }
.ed-row .icon-btn { color: #fff; }

/* ── Fichiers ────────────────────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.cat-tile { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 20px; background: var(--surfaceC1); text-align: left; font-size: calc(14px * var(--font-scale, 1)); }
.cat-tile b { font-weight: 500; }
.crumbs { display: flex; align-items: center; gap: 2px; overflow-x: auto; padding: 0 16px 8px; font-size: calc(13px * var(--font-scale, 1)); color: var(--onSurfaceVar); white-space: nowrap; scrollbar-width: none; }
.crumbs button { padding: 4px 6px; border-radius: 8px; }
.crumbs button:last-child { color: var(--primary); font-weight: 500; }
.crumbs .ms { font-size: 16px; }
.f-row { display: flex; align-items: center; padding-right: 6px; }
.f-row.sel { background: var(--secondaryContainer); }
.f-main { flex: 1; display: flex; align-items: center; gap: 14px; padding: 10px 16px; text-align: left; min-width: 0; }
.f-main .li-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(16px * var(--font-scale, 1)); }
.f-ic, .f-thumb { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--surfaceC2); }
.f-thumb { background-size: cover; background-position: center; }
.f-check { color: var(--primary); }
.clip-bar { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 8px 10px; border-radius: 16px; background: var(--primaryContainer); color: var(--onPrimaryContainer); font-size: calc(13px * var(--font-scale, 1)); flex-wrap: wrap; }
.clip-bar span:not(.ms) { flex: 1; min-width: 140px; }
.clean-card { margin: 0 16px 12px; padding: 16px; border-radius: 24px; background: var(--surfaceC1); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.clean-card b { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.clean-card p { margin: 0; font-size: calc(14px * var(--font-scale, 1)); }
.clean-card .progress-linear { width: 100%; }
.text-view { padding: 0 20px; }
.text-view pre { white-space: pre-wrap; font-family: inherit; font-size: calc(16px * var(--font-scale, 1)); line-height: 1.5; margin: 0; user-select: text; }
.text-edit { width: 100%; min-height: 60vh; border: 1px solid var(--outlineVar); border-radius: 12px; padding: 12px; font-size: calc(16px * var(--font-scale, 1)); line-height: 1.5; background: var(--surfaceC1); outline: none; resize: none; }

/* ── Browser ─────────────────────────────────────────────────────── */
.browser-app { background: #fff; }
.cr-top { display: flex; align-items: center; gap: 2px; padding: 4px 4px 6px; background: var(--surfaceC1); flex: 0 0 auto; }
.cr-top.incog { background: #3c4043; color: #fff; }
.cr-omni { flex: 1; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 22px; background: var(--surfaceC4); min-width: 0; }
.cr-top.incog .cr-omni { background: #202124; }
.cr-lock { font-size: calc(18px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.cr-url { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: calc(15px * var(--font-scale, 1)); color: inherit; }
.cr-tabs-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.cr-tabs-btn span { min-width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 5px; font-size: calc(12px * var(--font-scale, 1)); font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 2px; }
.cr-progress { height: 3px; background: transparent; flex: 0 0 auto; position: relative; overflow: hidden; }
.cr-progress.loading::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 40%; background: #1a73e8; animation: load 1s infinite; }
@keyframes load { from { left: -40%; } to { left: 100%; } }
.cr-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.cr-dlbar { position: absolute; left: 10px; right: 10px; bottom: calc(40px + var(--navh, 0px)); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 12px; background: #202124; color: #fff; font-size: calc(13px * var(--font-scale, 1)); }
.cr-dlbar span:not(.ms) { flex: 1; }
.cr-dlbar .btn-text { color: #8ab4f8; }
.cr-switcher { position: absolute; inset: 36px 0 0; background: var(--surfaceC2); z-index: 3; display: flex; flex-direction: column; }
.cr-tab-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; align-content: start; }
.cr-tab-card { border-radius: 16px; background: var(--surface); overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.cr-tab-card.on { border-color: var(--primary); }
.cr-tab-card.incog { background: #3c4043; color: #fff; }
.cr-tab-title { display: flex; align-items: center; gap: 4px; padding-left: 12px; font-size: calc(13px * var(--font-scale, 1)); }
.cr-tab-title span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-tab-prev { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--onSurfaceVar); background: var(--surfaceC1); }
.cr-tab-prev .ms { font-size: 40px; }

/* ── Horloge ─────────────────────────────────────────────────────── */
.clock-body { padding: 0 12px; }
.large-fab { bottom: calc(96px + var(--navh, 0px)); left: 50%; right: auto; transform: translateX(-50%); width: 96px; height: 72px; border-radius: 24px; }
.large-fab .ms { font-size: 34px; }
.alarm-card { background: var(--surfaceC2); border-radius: 26px; padding: 16px 18px 8px; margin-bottom: 10px; }
.alarm-card.on { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.al-row { display: flex; align-items: center; justify-content: space-between; }
.al-time { font-size: 52px; font-weight: 300; line-height: 1; }
.al-sub { font-size: calc(14px * var(--font-scale, 1)); margin: 6px 0; opacity: .85; }
.al-days { display: flex; gap: 6px; margin: 8px 0; }
.al-day { width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; font-size: calc(13px * var(--font-scale, 1)); font-weight: 500; opacity: .7; }
.al-day.on { background: var(--primary); color: var(--onPrimary); border-color: var(--primary); opacity: 1; }
.al-foot { display: flex; justify-content: space-between; align-items: center; }
.al-label { display: flex; align-items: center; gap: 6px; font-size: calc(14px * var(--font-scale, 1)); }
.al-label .ms { font-size: 18px; }
.world-now { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 0 26px; }
.wn-time { font-size: 60px; font-weight: 300; font-variant-numeric: tabular-nums; }
.world-now span { color: var(--onSurfaceVar); }
.city-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-radius: 22px; background: var(--surfaceC2); margin-bottom: 8px; }
.city-row b { display: block; font-weight: 400; font-size: calc(18px * var(--font-scale, 1)); }
.city-row small { color: var(--onSurfaceVar); font-size: calc(13px * var(--font-scale, 1)); }
.city-time { font-size: 32px; font-weight: 300; }
.timer-run, .sw { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 30px; }
.timer-ring, .sw-ring { width: 260px; height: 260px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle, var(--surface) 62%, transparent 63%), conic-gradient(var(--primary) calc(var(--p, 0) * 360deg), var(--surfaceC4) 0); }
.sw-ring { background: radial-gradient(circle, var(--surface) 62%, transparent 63%), conic-gradient(var(--surfaceC4) 0 360deg); }
.sw-ring.on { background: radial-gradient(circle, var(--surface) 62%, transparent 63%), conic-gradient(var(--primary) 0 360deg); }
.tr-left, .sw-time { font-size: 44px; font-weight: 300; font-variant-numeric: tabular-nums; }
.timer-btns { display: flex; gap: 12px; }
.sw-laps { width: 100%; max-width: 300px; }
.sw-laps div { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px solid var(--outlineVar); font-variant-numeric: tabular-nums; }
.timer-set { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 20px; }
.ts-display { display: flex; align-items: baseline; gap: 4px; color: var(--onSurfaceVar); }
.ts-display.has { color: var(--primary); }
.ts-display b { font-size: 52px; font-weight: 300; }
.ts-display small { font-size: calc(18px * var(--font-scale, 1)); margin-right: 10px; }
.ts-keys { width: 100%; max-width: 330px; }
.ts-start { width: 96px; height: 72px; border-radius: 24px; background: var(--primary); color: var(--onPrimary); display: flex; align-items: center; justify-content: center; }
.ts-start:disabled { opacity: .4; }
.ts-start .ms { font-size: 36px; }
.alarm-ring { position: absolute; inset: 0; z-index: 5; background: linear-gradient(180deg, #243b55, #141e30); color: #fff; display: flex; flex-direction: column; align-items: center; padding-top: 140px; gap: 10px; pointer-events: auto; }
.ar-time { font-size: 90px; font-weight: 300; }
.ar-label { font-size: calc(24px * var(--font-scale, 1)); }
.ar-sub { opacity: .8; }
.ar-actions { margin-top: auto; margin-bottom: 110px; display: flex; gap: 20px; }
.ar-btn { width: 130px; height: 130px; border-radius: 50%; font-size: calc(18px * var(--font-scale, 1)); font-weight: 500; }
.ar-btn.snooze { background: rgba(255,255,255,.15); }
.ar-btn.stop { background: #a8c7fa; color: #062e6f; animation: pulse 1.2s infinite; }
.time-pick { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 40px; }
.tp-col { display: flex; flex-direction: column; align-items: center; }
.tp-col input { width: 96px; height: 76px; text-align: center; font-size: 44px; border: 0; border-radius: 12px; background: var(--primaryContainer); color: var(--onPrimaryContainer); outline: none; -moz-appearance: textfield; }
.tp-col input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ── Calculatrice ────────────────────────────────────────────────── */
.calc-app { background: var(--surface); }
.calc-top { display: flex; justify-content: space-between; padding: 4px 8px; }
.calc-display { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; padding: 10px 24px 16px; overflow: hidden; }
.calc-hist { align-self: stretch; overflow: auto; max-height: 50%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-bottom: auto; }
.calc-hist button { display: flex; flex-direction: column; align-items: flex-end; }
.calc-hist small { color: var(--onSurfaceVar); }
.calc-expr { font-size: 52px; font-weight: 300; word-break: break-all; text-align: right; line-height: 1.15; }
.calc-expr.small { font-size: calc(26px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.calc-res { font-size: 28px; color: var(--onSurfaceVar); min-height: 36px; text-align: right; }
.calc-res.big { font-size: 56px; color: var(--onSurface); }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 14px 20px; background: var(--surfaceC1); border-radius: 28px 28px 0 0; }
.ck { height: 76px; border-radius: 38px; font-size: calc(28px * var(--font-scale, 1)); background: var(--surfaceC4); display: flex; align-items: center; justify-content: center; transition: border-radius .15s; }
.ck:active { border-radius: 20px; }
.ck.fn { background: var(--secondaryContainer); color: var(--onSecondaryContainer); font-size: calc(22px * var(--font-scale, 1)); }
.ck.op { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.ck.eq { background: var(--primary); color: var(--onPrimary); }

/* ── Agenda ──────────────────────────────────────────────────────── */
.cal-grid-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 0 10px; text-align: center; }
.cal-grid-head span { font-size: calc(12px * var(--font-scale, 1)); color: var(--onSurfaceVar); padding: 6px 0; }
.cal-day { height: 44px; border-radius: 50%; position: relative; font-size: calc(15px * var(--font-scale, 1)); margin: 2px auto; width: 44px; }
.cal-day.today { color: var(--primary); font-weight: 700; }
.cal-day.sel { background: var(--primary); color: var(--onPrimary); }
.cal-day i { position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.cal-sel { padding: 14px 20px 6px; font-weight: 500; border-top: 1px solid var(--outlineVar); margin-top: 8px; }
.cal-ev { display: flex; flex-direction: column; text-align: left; margin: 6px 16px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--c) 18%, var(--surface)); border-left: 5px solid var(--c); width: calc(100% - 32px); }
.cal-ev small { color: var(--onSurfaceVar); }
.ev-title { width: 100%; border: 0; border-bottom: 1px solid var(--outlineVar); font-size: calc(26px * var(--font-scale, 1)); padding: 12px 0; background: none; outline: none; margin-bottom: 8px; color: var(--onSurface); }
.ev-colors { display: flex; gap: 10px; margin: 12px 0; }
.ev-colors .pal { width: 36px; height: 36px; }

/* ── Notes ───────────────────────────────────────────────────────── */
.notes-grid { columns: 2; column-gap: 8px; padding: 0 12px; }
.note { display: block; width: 100%; break-inside: avoid; margin-bottom: 8px; text-align: left; border: 1px solid var(--outlineVar); border-radius: 14px; padding: 12px 14px; position: relative; }
.note b { display: block; font-weight: 500; margin-bottom: 4px; }
.note p { margin: 0; font-size: calc(14px * var(--font-scale, 1)); white-space: pre-wrap; }
.note ul { list-style: none; padding: 0; margin: 0; font-size: calc(14px * var(--font-scale, 1)); }
.note li { display: flex; gap: 4px; align-items: center; }
.note li .ms { font-size: 16px; }
.note li.done { text-decoration: line-through; opacity: .6; }
.note-pin { position: absolute; right: 6px; top: 6px; } .note-pin .ms { font-size: 16px; }
.notes-bottom { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 12px; background: var(--surfaceC2); position: relative; }
.notes-bottom .notes-fab { position: static; }
.note-edit { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 36px; padding-bottom: calc(26px + var(--navh, 0px)); background: var(--surface); }
.ne-title { border: 0; background: none; outline: none; font-size: calc(22px * var(--font-scale, 1)); padding: 8px 20px; color: inherit; }
.ne-text { flex: 1; border: 0; background: none; outline: none; resize: none; font-size: calc(16px * var(--font-scale, 1)); padding: 8px 20px; line-height: 1.5; color: inherit; }
.ne-list { flex: 1; overflow: auto; padding: 0 12px; }
.ne-item { display: flex; align-items: center; }
.ne-item input { flex: 1; border: 0; background: none; outline: none; font-size: calc(16px * var(--font-scale, 1)); padding: 8px 0; color: inherit; }
.ne-item input.done { text-decoration: line-through; opacity: .6; }
.ne-add { display: flex; align-items: center; gap: 10px; padding: 10px 12px; opacity: .7; }
.ne-colors { display: flex; gap: 10px; padding: 12px 16px; }
.ne-colors .pal { width: 36px; height: 36px; color: var(--onSurface); }

/* ── Weather ─────────────────────────────────────────────────────── */
.weather-app { background: linear-gradient(180deg, #a8c7fa, var(--surface) 45%); }
#screen[data-theme="dark"] .weather-app { background: linear-gradient(180deg, #1d3557, var(--surface) 45%); }
.wx { display: contents; }
.wx h1 small .ms { font-size: 18px; }
.wx-now { display: grid; grid-template-columns: auto 1fr; align-items: center; padding: 10px 24px 20px; gap: 2px 16px; }
.wx-now b { font-size: 96px; font-weight: 300; line-height: 1; grid-row: span 2; }
.wx-big { font-size: 64px; color: #f9ab00; }
.wx-now small { grid-column: 1 / -1; color: var(--onSurfaceVar); }
.wx-card { margin: 0 16px 12px; padding: 14px; border-radius: 24px; background: var(--surfaceC1); }
.wx-hours { display: flex; justify-content: space-between; overflow-x: auto; gap: 12px; }
.wx-hours div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: calc(13px * var(--font-scale, 1)); min-width: 38px; }
.wx-hours .ms { color: #f9ab00; }
.wx-day { display: grid; grid-template-columns: 1fr 70px 30px 40px 34px; align-items: center; padding: 8px 4px; font-size: calc(15px * var(--font-scale, 1)); }
.wx-day small { color: #4285f4; font-size: calc(12px * var(--font-scale, 1)); display: flex; align-items: center; gap: 2px; }
.wx-day small .ms { font-size: 14px; }
.wx-day > .ms { color: #f9ab00; }
.wx-day b { text-align: right; font-weight: 500; } .wx-day em { text-align: right; font-style: normal; color: var(--onSurfaceVar); }
.wx-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px 12px; }
.wx-tiles div { background: var(--surfaceC1); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.wx-tiles small { color: var(--onSurfaceVar); } .wx-tiles b { font-size: calc(22px * var(--font-scale, 1)); font-weight: 400; }

/* ── App Shop ────────────────────────────────────────────────────── */
.st { font-size: calc(14px * var(--font-scale, 1)); vertical-align: -2px; }
.st-section h2 { font-size: calc(18px * var(--font-scale, 1)); font-weight: 500; margin: 14px 20px 10px; }
.st-scroller { display: flex; gap: 14px; overflow-x: auto; padding: 0 20px 8px; scrollbar-width: none; }
.st-tile { flex: 0 0 90px; display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: calc(13px * var(--font-scale, 1)); }
.st-tile .app-ic, .st-row .app-ic, .st-head .app-ic { border-radius: 22%; }
.st-tile b { font-weight: 400; line-height: 1.25; }
.st-tile small { color: var(--onSurfaceVar); font-size: calc(12px * var(--font-scale, 1)); }
.st-row { align-items: flex-start; }
.st-row .li-t small { font-size: calc(13px * var(--font-scale, 1)); }
.st-page { padding: 0 20px; }
.st-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.st-head h2 { margin: 0; font-weight: 400; font-size: calc(24px * var(--font-scale, 1)); }
.st-head a { color: var(--primary); font-weight: 500; font-size: calc(14px * var(--font-scale, 1)); display: block; margin: 4px 0; }
.st-head small { font-size: calc(12px * var(--font-scale, 1)); }
.st-stats { display: flex; justify-content: space-between; text-align: center; margin-bottom: 18px; }
.st-stats div { flex: 1; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--outlineVar); }
.st-stats div:last-child { border: 0; }
.st-stats b { font-weight: 500; font-size: calc(14px * var(--font-scale, 1)); display: flex; align-items: center; justify-content: center; gap: 2px; }
.st-stats b .ms { font-size: 16px; }
.st-stats small { font-size: calc(11px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.st-actions { display: flex; gap: 10px; }
.st-actions button { flex: 1; }
.st-progress { display: flex; flex-direction: column; gap: 6px; font-size: calc(13px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.st-shots { display: flex; gap: 10px; overflow-x: auto; margin: 20px -20px 10px; padding: 0 20px; scrollbar-width: none; }
.st-shot { flex: 0 0 120px; height: 220px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: calc(12px * var(--font-scale, 1)); text-align: center; padding: 10px; }
.st-shot .ms { font-size: 40px; }
.st-h3 { font-size: calc(17px * var(--font-scale, 1)); font-weight: 500; margin: 20px 0 8px; }
.st-desc { font-size: calc(14px * var(--font-scale, 1)); line-height: 1.55; color: var(--onSurfaceVar); margin: 0 0 10px; }
.st-page .chips { padding: 0; }
.st-safety { display: flex; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--outlineVar); font-size: calc(14px * var(--font-scale, 1)); line-height: 1.45; }
.st-safety > .ms { color: #188038; }
.st-safety.bad { background: #fce8e6; color: #8c1d18; border-color: transparent; }
.st-safety.bad > .ms { color: #d93025; }
.st-review { padding: 10px 0; border-bottom: 1px solid var(--outlineVar); font-size: calc(14px * var(--font-scale, 1)); }
.st-review span { color: #f9ab00; margin-left: 8px; letter-spacing: 1px; }
.st-review p { margin: 4px 0 0; color: var(--onSurfaceVar); }
.storeapp { background: var(--surface); }
.sa-splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--brand); color: #fff; font-size: calc(20px * var(--font-scale, 1)); }
.sa-splash .ms { font-size: 72px; }
.sa-bar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 16px; background: var(--brand); color: #fff; }
.sa-bar h1 { font-size: calc(20px * var(--font-scale, 1)); font-weight: 500; margin: 0; }
.sa-title { font-size: calc(18px * var(--font-scale, 1)); font-weight: 500; margin: 16px 20px 6px; }
.sa-item .li-ic.round { background: color-mix(in srgb, var(--brand) 20%, var(--surface)); color: var(--onSurface); }
.sa-cam { flex: 1; position: relative; overflow: hidden; background: #111; }
.sa-cam video { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.sa-cam-note { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; color: #fff; background: rgba(0,0,0,.5); border-radius: 12px; padding: 6px; font-size: calc(13px * var(--font-scale, 1)); }
.sa-zoom { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; }

/* ── Exercices (appli) ───────────────────────────────────────────── */
.ex-hero { display: flex; gap: 12px; align-items: center; margin: 8px 16px 6px; padding: 18px; border-radius: 26px; background: linear-gradient(135deg, #ffb74d, #e8710a); color: #fff; }
.ex-hero-t { flex: 1; }
.ex-hero small { opacity: .9; font-size: calc(12px * var(--font-scale, 1)); letter-spacing: .5px; text-transform: uppercase; }
.ex-hero h1 { font-size: calc(24px * var(--font-scale, 1)); font-weight: 500; margin: 4px 0; }
.ex-hero p { margin: 0; font-size: calc(13px * var(--font-scale, 1)); line-height: 1.4; opacity: .95; }
.ex-prog { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: calc(12px * var(--font-scale, 1)); }
.ex-prog-ring { width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: radial-gradient(circle, #e8710a 60%, transparent 61%), conic-gradient(#fff calc(var(--p) * 360deg), rgba(255,255,255,.3) 0); }
.ex-prog-ring b { font-size: calc(20px * var(--font-scale, 1)); } .ex-prog-ring small { font-size: calc(10px * var(--font-scale, 1)); text-transform: none; }
.ex-cat h2 { display: flex; align-items: center; gap: 8px; font-size: calc(16px * var(--font-scale, 1)); font-weight: 500; margin: 18px 20px 6px; color: var(--primary); }
.ex-cat h2 small { margin-left: auto; color: var(--onSurfaceVar); font-weight: 400; }
.ex-item { display: flex; align-items: center; gap: 14px; width: calc(100% - 24px); margin: 0 12px 6px; padding: 12px 14px; border-radius: 18px; background: var(--surfaceC1); text-align: left; }
.ex-item .li-t b { font-size: calc(16px * var(--font-scale, 1)); }
.ex-ic { color: #e8710a; display: flex; }
.ex-item.ok .ex-ic { color: #188038; }
.level-list { display: flex; flex-direction: column; gap: 10px; }
.level { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--surfaceC3); text-align: left; }
.level > .ms { font-size: 34px; color: var(--primary); }
.level b { display: block; font-weight: 500; font-size: calc(16px * var(--font-scale, 1)); }
.level small { display: block; font-size: calc(13px * var(--font-scale, 1)); color: var(--onSurfaceVar); line-height: 1.35; }

/* ── Exercices (couche de guidage) ───────────────────────────────── */
#ex-layer { position: absolute; inset: 0; z-index: 57; pointer-events: none; }
.ex-ring { position: absolute; left: 0; top: 0; border-radius: 16px; opacity: 0; transition: transform .15s, width .15s, height .15s, opacity .2s; }
.ex-ring.show { opacity: 1; }
.ex-ring.l1 { border: 4px solid #e53935; box-shadow: 0 0 0 4000px rgba(0,0,0,.12), 0 0 18px rgba(229,57,53,.7); animation: ring 1.2s infinite; }
.ex-ring.l2 { border: 2px dashed #4c8df6; }
@keyframes ring { 50% { box-shadow: 0 0 0 4000px rgba(0,0,0,.12), 0 0 30px rgba(229,57,53,1); } }
.ex-arrow { position: absolute; left: 0; top: 0; width: 48px; height: 48px; display: none; color: #e53935; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); transition: transform .15s; }
.ex-arrow.show { display: flex; align-items: center; justify-content: center; }
.ex-arrow .ms { font-size: 48px; animation: bob .8s infinite; }
@keyframes bob { 50% { transform: translateY(8px); } }
.ex-card { position: absolute; left: 12px; right: 12px; bottom: 60px; pointer-events: auto; background: #fffbf4; color: #2b2118; border-radius: 22px; padding: 12px 14px 8px; box-shadow: 0 8px 28px rgba(0,0,0,.35); border: 2px solid #ffb74d; font-size: calc(15px * var(--font-scale, 1)); }
.ex-card.top { bottom: auto; top: 44px; }
.ex-card.docked { position: static; margin: 0; }
.ex-head { display: flex; align-items: center; gap: 8px; }
.ex-head b { flex: 1; font-size: calc(14px * var(--font-scale, 1)); }
.ex-badge { font-size: calc(11px * var(--font-scale, 1)); font-weight: 700; padding: 3px 8px; border-radius: 10px; color: #fff; }
/* Darker shades so the white label reaches 4.5:1. */
.ex-badge.l1 { background: #c62828; } .ex-badge.l2 { background: #1558b0; } .ex-badge.l3 { background: #3c4043; }
.ex-x { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ex-x .ms { font-size: 20px; }
.ex-steps { display: flex; gap: 4px; margin: 8px 0 4px; }
.ex-steps i { flex: 1; height: 4px; border-radius: 2px; background: #eadfd0; }
.ex-steps i.done { background: #188038; } .ex-steps i.now { background: #e8710a; }
.ex-text { margin: 8px 0; font-size: calc(16px * var(--font-scale, 1)); line-height: 1.45; font-weight: 500; }
/* On a real phone (full screen) the instruction is what people read most: make it bigger. */
body.fullscreen .ex-text { font-size: calc(18px * var(--font-scale, 1)); }
body.fullscreen .ex-head b { font-size: calc(15px * var(--font-scale, 1)); }
body.fullscreen .ex-actions .btn-text { min-height: 44px; font-size: calc(15px * var(--font-scale, 1)); }
.ex-hint { display: flex; gap: 6px; background: #fff3cd; border-radius: 12px; padding: 8px 10px; font-size: calc(14px * var(--font-scale, 1)); margin-bottom: 6px; }
.ex-hint .ms { color: #e8a200; font-size: 20px; }
.ex-kb { display: none; gap: 6px; align-items: flex-start; background: #e8f0fe; color: #0b3d91; border-radius: 12px; padding: 8px 10px; font-size: calc(14px * var(--font-scale, 1)); margin: 0 0 6px; }
body.kbd .ex-kb:not([hidden]) { display: flex; }
.ex-kb .ms { font-size: 20px; }
/* Alt+L lands on the instruction: show where the focus went. */
.ex-card .ex-text:focus-visible { outline: 3px solid #0b3d91; outline-offset: 2px; border-radius: 6px; }
.ex-actions { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; }
/* "◀ Previous step" / "Next step ▶": always at least 44px tall (WCAG 2.5.8). A step already done shows a green note. */
.ex-card .ex-prev, .ex-card .ex-nextstep { min-height: 44px; }
.ex-card .ex-prev:disabled { opacity: .45; cursor: default; }
.ex-card .ex-nextstep { padding: 0 16px; border-radius: 22px; background: #b35400; color: #fff; font-weight: 600; }
.ex-review { display: flex; gap: 6px; align-items: flex-start; background: #e6f4ea; color: #0d652d; border-radius: 12px; padding: 8px 10px; font-size: calc(14px * var(--font-scale, 1)); margin: 0 0 6px; }
.ex-review .ms { font-size: 20px; color: #188038; }
.ex-card .btn-text { color: #b35400; }
.ex-done { text-align: center; padding: 6px 4px; }
.ex-done > .ms { font-size: 48px; color: #e8710a; }
.ex-done h3 { margin: 4px 0; font-size: calc(22px * var(--font-scale, 1)); }
.ex-done p { margin: 0 0 10px; font-size: calc(14px * var(--font-scale, 1)); }
.ex-done .ex-actions { justify-content: center; }
.ex-done .btn-filled { background: #e8710a; color: #fff; }
.ex-done .btn-tonal { background: #ffe0b2; color: #6d3a00; }

/* ── Effets globaux ──────────────────────────────────────────────── */
#screen.fx-gray > :not(#ex-layer) { filter: grayscale(1); }
#screen.fx-bold { font-weight: 500; }
#screen.fx-bold b, #screen.fx-bold h1, #screen.fx-bold h2 { font-weight: 700; }
#screen.fx-contrast { --onSurfaceVar: var(--onSurface); }
#screen.fx-noanim *, #screen.fx-noanim *::before, #screen.fx-noanim *::after { transition: none !important; animation: none !important; }
#screen.fx-nopct .sb-batt small { display: none; }
#screen.fx-nolocknotif .lk-notifs { display: none; }
.tap-dot { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: rgba(255,255,255,.55); border: 2px solid rgba(0,0,0,.3); z-index: 98; pointer-events: none; animation: tapdot .45s forwards; }
@keyframes tapdot { to { transform: scale(1.6); opacity: 0; } }
.tb-focus { outline: 3px solid #34a853 !important; outline-offset: 2px; border-radius: 8px; }

/* ── Installation de l'application (PWA) ─────────────────────────── */
.setup-install { align-self: center; margin-top: 18px; }
.setup-page.signin .setup-install { align-self: flex-start; margin-top: 6px; padding: 0 4px; }
.side-install { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #e8710a; color: #fff; font-weight: 600; font-size: 14px; }
.side-install:hover { background: #f08a2c; }
.side-mobile { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 13px; color: #b8c0cc; }
.side-mobile .ms { font-size: 18px; }
.ex-install { margin-top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.22); color: #fff; font-size: calc(12px * var(--font-scale, 1)); font-weight: 600; white-space: nowrap; }
.ex-install .ms { font-size: 16px; }
.install-steps { margin: 0 0 12px; padding-left: 20px; font-size: calc(15px * var(--font-scale, 1)); line-height: 1.55; }
.install-steps li { margin: 6px 0; }
/* On the Welcome / setup screens, dialogs go in front. */
#screen:has(#boot.setup:not([hidden])) #layer-dialog { z-index: 97; }

/* ── Practice cues, plans ───────────────────────────────────────── */
#lock .lk-top { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lk-practice { padding: 1px 8px; border-radius: 10px; background: rgba(251,191,36,.9); color: #1f1600; font-size: calc(11px * var(--font-scale, 1)); font-weight: 500; letter-spacing: .3px; text-transform: uppercase; }
.practice-banner { display: flex; gap: 12px; align-items: center; margin: 0 16px 12px; padding: 12px 14px; border-radius: 18px; background: var(--secondaryContainer, #fff4d6); color: var(--onSecondaryContainer, #2b2100); font-size: calc(14px * var(--font-scale, 1)); line-height: 1.35; }
.practice-banner .ms { font-size: 26px; color: var(--primary); flex: none; }
.pro-badge { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 8px; background: #fbbf24; color: #1f1600; font-size: calc(11px * var(--font-scale, 1)); font-weight: 700; letter-spacing: .4px; vertical-align: 2px; }
.ex-item.locked .ex-ic { color: var(--onSurfaceVariant, #6b7280); }
.ex-item.locked .li-t b { opacity: .85; }
.about-brand { display: flex; align-items: center; gap: 14px; margin: 6px 16px 0; padding: 14px; border-radius: 20px; background: var(--surfaceC1); }
.about-brand .hoi-logo { width: 52px; height: 52px; flex: none; }
.about-brand b { display: block; font-size: calc(16px * var(--font-scale, 1)); font-weight: 500; }
.about-brand small { display: block; font-size: calc(13px * var(--font-scale, 1)); color: var(--onSurfaceVar); line-height: 1.4; }
.ex-plan { display: flex; align-items: center; gap: 12px; margin: 0 12px 4px; padding: 12px 14px; border-radius: 18px; background: var(--surfaceC2); }
.ex-plan > .ms { color: #f9ab00; font-size: 28px; flex: none; }
.ex-plan > div { flex: 1; min-width: 0; }
.ex-plan b { display: block; font-size: calc(15px * var(--font-scale, 1)); font-weight: 500; }
.ex-plan small { display: block; font-size: calc(13px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.ex-plan .btn-tonal { flex: none; white-space: nowrap; }
.ex-paid { display: block; margin: 0 12px 10px auto; padding: 6px 10px; min-height: 36px; border: 0; background: none; color: var(--primary); font: inherit; font-size: calc(14px * var(--font-scale, 1)); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pro-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pro-list li { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.pro-list .ms { color: #188038; font-size: 20px; }
.reader-help { padding: 6px 20px; }
.reader-help p { margin: 10px 0; line-height: 1.45; }
.ex-simple { display: flex; gap: 12px; align-items: center; margin: 4px 16px 12px; padding: 12px 14px; border-radius: 20px; background: var(--surfaceC2); }
.ex-next { margin: 4px 12px 8px; }
.ex-next h2 { display: flex; align-items: center; gap: 8px; margin: 6px 4px 2px; font-size: calc(17px * var(--font-scale, 1)); font-weight: 600; }
.ex-next h2 .ms { color: #188038; }
.ex-next p { margin: 0 4px 8px; color: var(--onSurfaceVar); font-size: calc(14px * var(--font-scale, 1)); }
.ex-next .list-card { margin: 0; }
.ex-simple.on { background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.ex-simple > div { flex: 1; min-width: 0; }
.ex-simple small { display: block; opacity: .85; }
.ex-simple .ms { font-size: 28px; }

/* Video Chat (apps/video.js): drawings only, no real camera. */
.video-app { height: 100%; display: flex; flex-direction: column; }
.vc-home-top { padding: 52px 20px 8px; }
.vc-home-top h1 { margin: 0 0 6px; font-size: calc(30px * var(--font-scale, 1)); font-weight: 400; }
.vc-home-top p { margin: 0; color: var(--onSurfaceVar); }
.vc-empty { margin: 8px 20px; color: var(--onSurfaceVar); }
.vc-call { color: #0f9d58; }
.vc-screen { position: relative; height: 100%; overflow: hidden; background: #10151c; color: #fff; }
.vc-top { position: absolute; top: 44px; left: 0; right: 0; z-index: 2; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.vc-top h1 { margin: 4px 0; font-size: calc(28px * var(--font-scale, 1)); font-weight: 400; }
.vc-top p, .vc-top small { margin: 0; opacity: .9; }
.vc-person { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--vc) 55%, #fff), var(--vc) 70%); }
.vc-head { position: absolute; left: 50%; top: 30%; width: 130px; height: 150px; margin-left: -65px; border-radius: 50% 50% 46% 46%; background: #f1c9a5; box-shadow: inset 0 18px 0 #5b3a29; }
.vc-body { position: absolute; left: 50%; top: 52%; bottom: 0; width: 260px; margin-left: -130px; border-radius: 120px 120px 0 0; background: rgba(255,255,255,.85); }
.vc-screen.live .vc-person { animation: vc-breathe 4s ease-in-out infinite; }
@keyframes vc-breathe { 50% { transform: scale(1.015); } }
.vc-self { position: absolute; right: 16px; top: 110px; width: 104px; height: 150px; border-radius: 16px; z-index: 3; border: 2px solid rgba(255,255,255,.8); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.vc-self.front { background: radial-gradient(circle at 50% 38%, #f3d2b3 0 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #3f6fb5 0 45%, transparent 46%), linear-gradient(#cfd8e3, #9fb3c8); }
.vc-self.back { background: linear-gradient(transparent 62%, #8d6e63 62%), linear-gradient(90deg, #f5f0e6 0 60%, #b3d4f5 60%); }
.vc-self.back span { position: absolute; left: 12px; bottom: 30px; width: 46px; height: 34px; border-radius: 8px 8px 2px 2px; background: #6a8caf; }
.vc-self.off { display: grid; place-items: center; background: #2a2f36; }
.vc-self.off .ms { font-size: 36px; opacity: .8; }
.vc-controls { position: absolute; left: 12px; right: 12px; bottom: 36px; z-index: 3; display: flex; justify-content: space-around; gap: 6px; padding: 10px 6px; border-radius: 28px; background: rgba(16,21,28,.82); }
.vc-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; padding: 8px 4px; border-radius: 20px; color: #fff; font-size: calc(13px * var(--font-scale, 1)); }
.vc-btn .ms { font-size: 28px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); }
.vc-btn.on .ms { background: #fff; color: #10151c; }
.vc-btn.end .ms { background: #d93025; }
.vc-incoming { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 3; display: flex; justify-content: space-around; }
.vc-round { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #fff; font-size: calc(15px * var(--font-scale, 1)); }
.vc-round .ms { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; }
.vc-round.answer .ms { background: #1e8e3e; }
.vc-round.decline .ms { background: #d93025; }

/* Corner Market (apps/market.js): practice shop with an account. */
.market-app { height: 100%; display: flex; flex-direction: column; }
.mk-top { display: flex; align-items: center; gap: 10px; padding: 44px 12px 8px; }
.mk-top b { flex: 1; font-size: calc(20px * var(--font-scale, 1)); font-weight: 500; }
.mk-logo .ms { color: #e65100; font-size: 28px; }
.mk-body { padding: 0 20px 30px; display: flex; flex-direction: column; gap: 14px; }
/* Lists inside these practice apps line up with the cards (the body already has side padding) */
.mk-body .list-card { margin: 0; }
/* Long pages scroll: the items keep their height (flex items would shrink and overlap otherwise) */
.mk-body > * { flex-shrink: 0; }
.mk-body .section-title { margin: 6px 4px -6px; }
.mk-hero { padding: 18px; border-radius: 22px; background: linear-gradient(135deg, #ffe0b2, #ffcc80); color: #3e2000; }
.mk-hero h1 { margin: 0 0 6px; font-size: calc(24px * var(--font-scale, 1)); font-weight: 500; }
.mk-hero p { margin: 0; }
.mk-card { padding: 14px 16px; border-radius: 18px; background: var(--surfaceC2); display: flex; flex-direction: column; gap: 8px; }
.mk-card .ms { color: #e65100; font-size: 28px; }
/* Buttons inside a card keep their own colors (the orange is for Corner Market's card icons) */
.mk-card .btn-filled .ms, .mk-card .btn-tonal .ms, .mk-card .btn-outline .ms, .mk-card .btn-text .ms { color: inherit; font-size: 20px; }
.eats-app .mk-card b .ms { color: #2e7d32; font-size: 22px; }
.mk-card p { margin: 0; }
.mk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; font-size: 30px; text-align: center; }
.mk-grid small { display: block; font-size: calc(12px * var(--font-scale, 1)); }
.mk-chip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--primaryContainer); color: var(--onPrimaryContainer); text-align: left; }
.mk-chip small { display: block; opacity: .85; }
.mk-help { margin: 0; color: var(--onSurfaceVar); font-size: calc(14px * var(--font-scale, 1)); }
.mk-error { margin: 0; color: #b3261e; display: flex; gap: 6px; align-items: flex-start; }
.mk-wide { width: 100%; min-height: 48px; }
.mk-meter { position: relative; height: 34px; border-radius: 10px; background: var(--surfaceC3); overflow: hidden; }
.mk-meter i { position: absolute; inset: 0 auto 0 0; background: #b3261e; transition: width .2s; }
.mk-meter[data-s="2"] i { background: #c77700; }
.mk-meter[data-s="3"] i, .mk-meter[data-s="4"] i { background: #1e8e3e; }
.mk-meter span { position: relative; display: block; padding: 6px 10px; font-weight: 500; color: var(--onSurface); }

/* Photos (pack B5): shared albums and "Free up space". */
.sa-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 8px 16px 0; }
.sa-members { margin: 8px 16px 12px; color: var(--onSurfaceVar); font-size: calc(14px * var(--font-scale, 1)); }
.album.new-album .album-cover { display: grid; place-items: center; border: 2px dashed var(--outline); background: none; }
.share-people button.on { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 16px; }
.cu-thumb { width: 52px; height: 52px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; display: grid; place-items: center; background: var(--surfaceC3); }
.cu-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cu-item.on { background: var(--secondaryContainer); }

/* Camera: a practice QR code was found (pack B6). */
.cam-qr { position: absolute; left: 16px; right: 16px; bottom: 210px; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; border-radius: 20px; background: rgba(255,255,255,.95); color: #1f1f1f; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.cam-qr-open { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; color: inherit; min-height: 48px; }
.cam-qr-open .ms { font-size: 32px; }
.cam-qr-open small { display: block; color: #444; }
.cam-qr .icon-btn { color: #1f1f1f; }

/* Easy Ride (apps/ride.js): a drawn map and a bottom sheet. */
.ride-app { position: relative; height: 100%; overflow: hidden; background: #e8eef3; }
.rd-map { position: absolute; inset: 0 0 42% 0; background: #dfe8e1; overflow: hidden; }
.rd-road { position: absolute; background: #fff; box-shadow: 0 0 0 2px #cfd8dc; }
.rd-road.a { left: -10%; right: -10%; top: 38%; height: 18px; transform: rotate(-8deg); }
.rd-road.b { top: -10%; bottom: -10%; left: 30%; width: 16px; transform: rotate(12deg); }
.rd-road.c { top: -10%; bottom: -10%; left: 72%; width: 14px; }
.rd-route { position: absolute; left: 32%; top: 30%; width: 42%; height: 6px; background: #1a73e8; border-radius: 3px; transform: rotate(-8deg); }
.rd-pin { position: absolute; display: grid; place-items: center; }
.rd-pin .ms { font-size: 34px; }
.rd-pin.you { left: 28%; top: 30%; color: #1a73e8; }
.rd-pin.dest { left: 70%; top: 22%; color: #d93025; }
.rd-car { position: absolute; top: 33%; color: #263238; transition: left 4s linear; }
.rd-car .ms { font-size: 30px; }
.rd-car.waiting { left: 12%; animation: rd-drive 4.5s linear forwards; }
.rd-car.riding { left: 30%; animation: rd-drive2 9s linear forwards; }
@keyframes rd-drive { to { left: 27%; } }
@keyframes rd-drive2 { to { left: 66%; } }
.rd-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72%; overflow: auto; padding: 18px 18px 40px; border-radius: 26px 26px 0 0; background: var(--surface); color: var(--onSurface); box-shadow: 0 -6px 20px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 12px; }
.rd-sheet h1 { margin: 0; font-size: calc(24px * var(--font-scale, 1)); font-weight: 500; }
.rd-sheet p { margin: 0; }
.rd-sheet.rd-done { top: 40px; max-height: none; border-radius: 0; }
.rd-from, .rd-tip, .rd-note { display: flex; gap: 8px; align-items: center; color: var(--onSurfaceVar); }
.rd-eta { font-size: calc(18px * var(--font-scale, 1)); font-weight: 500; color: #1a73e8; }
.rd-driver { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--surfaceC2); }
.rd-driver > div { flex: 1; }
.rd-driver small { display: block; color: var(--onSurfaceVar); }
.rd-plate { display: inline-block; padding: 4px 10px; border-radius: 8px; border: 2px solid currentColor; font-weight: 700; letter-spacing: .08em; font-family: ui-monospace, monospace; }
.rd-cars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rd-carbtn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 18px; background: var(--surfaceC2); font-size: calc(13px * var(--font-scale, 1)); }
.rd-carbtn .ms { font-size: 34px; }
.rd-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rd-wide { width: 100%; min-height: 48px; }
.rd-receipt { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px; border-radius: 18px; background: var(--surfaceC2); }
.rd-stars { display: flex; gap: 6px; justify-content: center; }
.rd-stars button { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--onSurfaceVar); }
.rd-stars button .ms { font-size: 36px; }
.rd-stars button.on { color: #f9ab00; }

/* Pharmacy (apps/pharmacy.js). */
.pharmacy-app { height: 100%; display: flex; flex-direction: column; }
.ph-logo .ms { color: #0b8043; font-size: 28px; }
.ph-hero { padding: 16px 18px; border-radius: 22px; background: linear-gradient(135deg, #ceead6, #a8dab5); color: #0d3b1e; }
.ph-hero p { margin: 4px 0 0; }
/* HealthBook (v3 B2): the practice clinic app */
.hb-logo .ms { color: #00796b; font-size: 28px; }
.hb-hero { padding: 16px 18px; border-radius: 22px; background: linear-gradient(135deg, #b2dfdb, #80cbc4); color: #00332c; margin-bottom: 8px; }
.hb-hero p { margin: 4px 0 0; }
.hb-error { color: var(--error, #b3261e); font-weight: 500; min-height: 1.2em; margin: 4px 0; }
.hb-emergency { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--errorContainer, #f9dedc); color: var(--onErrorContainer, #410e0b); font-weight: 500; }
.hb-state { display: flex; align-items: center; gap: 6px; }
.hb-state .ms { color: #188038; }
.hb-new { color: #00796b; font-weight: 600; }
.hb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #00796b; margin-right: 6px; vertical-align: middle; }
.hb-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-quick .chip { white-space: normal; height: auto; min-height: 40px; padding: 6px 14px; text-align: left; }
.hb-mine { background: var(--secondaryContainer); }
.hb-result b { display: block; font-size: calc(30px * var(--font-scale, 1)); margin: 4px 0; }
.hb-ask { margin: auto 18px; padding: 20px; border-radius: 24px; background: var(--surfaceC2, #2b2b2b); color: var(--onSurface, #fff); }
.hb-ask b { font-size: calc(18px * var(--font-scale, 1)); }
.hb-ask-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding: 0 18px; }
.hb-wait { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-size: calc(17px * var(--font-scale, 1)); }
.hb-wait .ms { font-size: 48px; }
.hb-coat { background: #fff !important; }
.health-app .mk-card .ms { color: #00796b; font-size: 22px; vertical-align: -4px; }
.health-app .mk-card .btn-filled .ms { color: inherit; font-size: 20px; vertical-align: 0; }
.health-app .hb-state .ms { color: #188038; }
/* Mail (v3 B7): practice email with documents, printing and scanning */
.ml-tabs { display: flex; gap: 8px; padding: 0 20px 10px; }
.ml-row.unread b { font-weight: 700; }
.ml-av { width: 40px; height: 40px; border-radius: 50%; background: #fce8e6; color: #a50e0e; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.ml-av.big { width: 48px; height: 48px; font-size: calc(20px * var(--font-scale, 1)); }
.ml-when { color: var(--onSurfaceVar); font-size: calc(13px * var(--font-scale, 1)); }
.ml-clip { font-size: 16px; vertical-align: -3px; }
.ml-from { display: flex; align-items: center; gap: 12px; }
.ml-from small { display: block; color: var(--onSurfaceVar); }
.ml-text { font-size: calc(16px * var(--font-scale, 1)); line-height: 1.5; margin: 0; }
.ml-att { display: flex; align-items: center; gap: 4px; border: 1px solid var(--outline); border-radius: 16px; padding: 4px 4px 4px 0; }
.ml-att-open { flex: 1; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 12px; min-height: 48px; }
.ml-att.small { padding: 4px 4px 4px 12px; }
.ml-pdf .ms { color: #d93025; font-size: 28px; }
.ml-att .li-t small { color: var(--onSurfaceVar); }
.ml-files { display: flex; flex-direction: column; gap: 8px; }
.ml-fab { right: 20px; }
.ml-invite { border: 1px solid var(--outline); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ml-inv-head { display: flex; gap: 14px; align-items: flex-start; }
.ml-inv-head p { margin: 2px 0 0; color: var(--onSurfaceVar); }
.ml-inv-date { flex: none; width: 52px; border-radius: 12px; overflow: hidden; text-align: center; background: var(--surfaceC2); }
.ml-inv-date small { display: block; background: #c5221f; color: #fff; font-size: 12px; font-weight: 600; padding: 2px 0; text-transform: uppercase; }
.ml-inv-date b { display: block; font-size: 22px; padding: 4px 0; }
.ml-inv-ok { display: flex; align-items: center; gap: 6px; margin: 0; color: #188038; font-weight: 600; }
.ml-docview { background: var(--surfaceC2); padding-top: 12px; }
.ml-paper { background: #fff; color: #202124; border-radius: 6px; padding: 22px 20px; box-shadow: 0 1px 3px rgba(0,0,0,.25); font-family: Georgia, serif; }
.ml-paper h2 { font-size: calc(18px * var(--font-scale, 1)); margin: 0 0 12px; }
.ml-paper p { margin: 0 0 6px; font-size: calc(14px * var(--font-scale, 1)); }
.ml-preview .ml-paper { transform: scale(.9); transform-origin: top center; margin-bottom: -20px; }
.ml-copies { min-width: 24px; text-align: center; font-size: calc(18px * var(--font-scale, 1)); }
.ml-scan { display: flex; flex-direction: column; height: 100%; background: #111; color: #fff; }
.ml-scan .icon-btn { color: #fff; }
.ml-scan-view { flex: 1; margin: 8px 16px; border-radius: 20px; background: radial-gradient(circle at 50% 40%, #8d6e63, #4e342e); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.ml-card { width: 72%; transform: rotate(-6deg); }
.ml-card .ml-paper { padding: 14px; font-size: 80%; }
.ml-scan-view.shot { background: #e8eaed; }
.ml-scan-view.shot .ml-card { transform: none; width: 86%; }
.ml-frame { position: absolute; inset: 18% 12%; border: 3px solid #8ab4f8; border-radius: 10px; pointer-events: none; }
.ml-scan-tip { text-align: center; padding: 0 24px; margin: 6px 0; }
.ml-scan-btns { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 12px 0 calc(28px + var(--navh, 0px)); }
.ml-scan-btns .btn-text { color: #fff; }
.ct-logo .ms { color: #1a237e; font-size: 28px; }
.ct-hero { padding: 16px 18px; border-radius: 22px; background: linear-gradient(135deg, #c5cae9, #9fa8da); color: #0d1446; }
.ct-hero p { margin: 4px 0 0; }
.li.disabled { opacity: .55; }
.ct-steps { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; font-size: calc(12px * var(--font-scale, 1)); color: var(--onSurfaceVar); }
.ct-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ct-steps li span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--outline); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.ct-steps li.on { color: var(--onSurface); font-weight: 600; }
.ct-steps li.on span { border-color: #1a237e; background: #1a237e; color: #fff; }
.ct-steps li.done span { border-color: #188038; background: #188038; color: #fff; }
.ct-steps li.done span .ms { font-size: 18px; }
.ct-h { margin: 4px 0 0; font-size: calc(22px * var(--font-scale, 1)); font-weight: 500; }
.ct-h:focus { outline: none; }
.ct-field.bad > span { color: var(--error, #b3261e); font-weight: 600; }
.ct-field.bad input { border-bottom: 3px solid var(--error, #b3261e); }
.ct-err { display: flex; gap: 6px; align-items: flex-start; color: var(--error, #b3261e); font-weight: 500; margin: -6px 0 0; }
.ct-err .ms { font-size: 20px; }
.ct-help { color: var(--onSurfaceVar); margin: -6px 0 0; font-size: calc(14px * var(--font-scale, 1)); }
.ct-banner { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--errorContainer, #f9dedc); color: var(--onErrorContainer, #410e0b); font-weight: 500; }
.ct-select { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 12px 0 16px; border: 1px solid var(--outline); border-radius: 6px; font-size: calc(16px * var(--font-scale, 1)); text-align: left; }
.ct-select.bad { border: 2px solid var(--error, #b3261e); }
.ct-review { gap: 0; }
.ct-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--outlineVar, rgba(0,0,0,.1)); }
.ct-row:last-child { border-bottom: 0; }
.ct-row small { display: block; color: var(--onSurfaceVar); }
.li-switch.bad { box-shadow: inset 0 0 0 2px var(--error, #b3261e); border-radius: 16px; }
.ct-idcard { width: 78%; aspect-ratio: 1.586; background: linear-gradient(135deg, #e3f2fd, #bbdefb); border-radius: 12px; color: #0d47a1; position: relative; padding: 10px 12px; box-shadow: 0 2px 8px rgba(0,0,0,.35); transform: rotate(-4deg); font-family: Roboto, sans-serif; }
.ct-idcard b { display: block; font-size: 15px; letter-spacing: .5px; }
.ct-idcard i { display: block; font-style: normal; font-size: 10px; color: #c62828; font-weight: 700; }
.ct-face { position: absolute; left: 12px; bottom: 12px; width: 30%; aspect-ratio: .8; border-radius: 6px; background: radial-gradient(circle at 50% 38%, #f1c27d 22%, transparent 23%), radial-gradient(ellipse at 50% 100%, #5c6bc0 45%, transparent 46%), #fff; }
.ct-lines { position: absolute; left: 42%; bottom: 14px; font-size: 11px; line-height: 1.5; font-weight: 600; }
.ml-scan-view.shot .ct-idcard { transform: none; width: 88%; }
.ct-frame { inset: 22% 8%; }
.ct-idthumb { display: flex; gap: 14px; align-items: center; }
.ct-idcard.small { width: 120px; transform: none; flex: none; padding: 4px 6px; }
.ct-idcard.small b { font-size: 7px; } .ct-idcard.small i { font-size: 5px; } .ct-idcard.small .ct-lines { font-size: 5px; bottom: 6px; } .ct-idcard.small .ct-face { left: 6px; bottom: 6px; }
.ct-idthumb small { display: block; color: var(--onSurfaceVar); }
.ct-done { text-align: center; padding: 18px 8px; }
.ct-done > .ms { font-size: 64px; color: #188038; }
.ct-done h2 { margin: 8px 0; }
.ct-no b { font-size: calc(26px * var(--font-scale, 1)); letter-spacing: 1px; }
.ea-logo .ms { color: #2e7d32; font-size: 28px; }
.ea-active b .ms, .ea-driver b .ms { color: #2e7d32; vertical-align: -5px; }
.ea-dish { gap: 4px; }
.ea-n { min-width: 22px; text-align: center; }
.ea-cartbar { position: sticky; bottom: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.ea-tips, .ea-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.ea-quick .chip { white-space: normal; height: auto; min-height: 40px; padding: 6px 12px; text-align: left; }
.ea-sum { gap: 4px; }
.ea-sum p { display: flex; justify-content: space-between; margin: 0; }
.ea-total { font-weight: 700; border-top: 1px solid var(--outlineVar, rgba(0,0,0,.12)); padding-top: 6px; }
.ea-map { position: relative; inset: auto; height: 180px; border-radius: 20px; flex: none; }
.ea-bike { left: 46%; top: 30%; }
.ea-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ea-steps li { display: flex; gap: 10px; align-items: center; color: var(--onSurfaceVar); }
.ea-steps li.on { color: var(--onSurface); font-weight: 600; }
.ea-steps li.done .ms, .ea-steps li.on .ms { color: #2e7d32; }
.ea-live { font-weight: 500; }
.ea-msg { align-self: flex-start; background: var(--surfaceC3); border-radius: 14px; padding: 6px 12px; }
.ea-msg.me { align-self: flex-end; background: var(--primaryContainer); color: var(--onPrimaryContainer); }
.ea-rate { display: flex; gap: 10px; }
.sf-logo .ms { color: #c5221f; font-size: 28px; }
.sf-hero { padding: 16px 18px; border-radius: 22px; background: linear-gradient(135deg, #fad2cf, #f6aea9); color: #410e0b; }
.sf-hero p { margin: 4px 0 0; }
.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-chips .chip { min-width: 52px; min-height: 40px; justify-content: center; }
.safety-app .mk-card b .ms { color: #c5221f; font-size: 22px; vertical-align: -5px; }
.ml-shutter { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 6px solid #9aa0a6; }
.ph-low { color: #b3261e; font-weight: 600; }
.ph-alert { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px; text-align: center; background: #0d3b1e; color: #fff; }
.ph-alert h1 { margin: 0; font-size: calc(28px * var(--font-scale, 1)); font-weight: 500; }
.ph-alert p { margin: 0; font-size: calc(18px * var(--font-scale, 1)); }
.ph-alert-ic .ms { font-size: 72px; color: #a8dab5; }