:root {
  --launcher-ink: #304251;
  --launcher-muted: #738494;
  --launcher-faint: #9aa8b2;
  --launcher-line: rgba(255, 255, 255, .72);
  --launcher-glass: rgba(247, 250, 252, .66);
  --launcher-glass-strong: rgba(255, 255, 255, .84);
  --launcher-shadow: 0 18px 34px rgba(63, 83, 101, .13);
}

body { background: #d8e2e8; }
.device-stage, .auth-device { background: #d8e2e8; }
.phone-frame { border-color: #273645; background: #273645; box-shadow: 0 30px 90px rgba(43, 61, 77, .28); }
.phone-screen {
  background: #d9e3e8 url('inc/9af64ecb73e6cb8ee72578497cedcf7415538892e1485-jt4Oo9_fw658webp.webp') center / cover no-repeat;
}
.phone-screen:after { background: rgba(247, 250, 252, .16); }
.phone-view { color: var(--launcher-ink); }
.home-view { padding: 0 16px 118px; }
.home-view.active-view { display: block; }
.launcher-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 4px 16px; }
.launcher-heading h1 { margin:4px 0 2px; color:var(--launcher-ink); font-size:24px; letter-spacing:-.7px; }
.launcher-heading { min-width:0; }
.launcher-kicker, .widget-eyebrow { display:block; color:var(--launcher-muted); font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.launcher-subtitle { margin:0; color:var(--launcher-muted); font-size:10px; }
.launcher-actions { display:flex; align-items:center; gap:7px; }
.soft-icon { width:34px; height:34px; display:grid; place-items:center; color:var(--launcher-muted); background:var(--launcher-glass); border:1px solid var(--launcher-line); border-radius:12px; box-shadow:0 8px 16px rgba(72, 93, 109, .09); backdrop-filter:blur(16px); }
.soft-icon svg { width:16px; height:16px; }
.profile-orb { width:38px; height:38px; border-radius:13px; color:#fff; background:#6f8da0; border:1px solid rgba(255,255,255,.76); box-shadow:0 8px 15px rgba(71,98,117,.17); }
.launcher-viewport { margin:0 -16px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; }
.launcher-viewport::-webkit-scrollbar { display:none; }
.launcher-pages { display:flex; width:200%; }
.launcher-page { flex:0 0 50%; width:50%; min-height:560px; padding:0 16px; scroll-snap-align:start; }
.glass-widget { position:relative; border:1px solid var(--launcher-line); border-radius:20px; background:var(--launcher-glass); box-shadow:var(--launcher-shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.hero-widget { padding:14px; }
.widget-heading, .large-widget-top { display:flex; align-items:center; justify-content:space-between; }
.hero-widget-body { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; margin-top:11px; }
.companion-avatar { width:42px; height:42px; border-radius:15px; display:grid; place-items:center; color:#fff; background:#7191a3; box-shadow:inset 0 1px rgba(255,255,255,.65); }
.companion-avatar svg { width:20px; height:20px; }
.companion-copy { min-width:0; }
.companion-copy strong { display:block; color:var(--launcher-ink); font-size:13px; }
.companion-copy small { display:block; margin-top:4px; color:var(--launcher-muted); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.check-in-button { padding:8px 10px; color:#527083; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.84); border-radius:10px; font-size:10px; font-weight:700; }
.check-in-button.done { color:#fff; background:#7398a9; }
.companion-progress { height:4px; margin-top:12px; overflow:hidden; border-radius:4px; background:rgba(126,157,175,.2); }
.companion-progress span { display:block; height:100%; width:35%; border-radius:inherit; background:#7198aa; transition:width .25s ease; }
.widget-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:10px; }
.mini-widget { min-height:84px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center; padding:12px 10px; }
.mini-widget .tiny-label { margin:0 0 4px; color:var(--launcher-muted); font-size:8px; }
.mini-widget strong { display:block; overflow:hidden; color:var(--launcher-ink); font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
.mini-widget small { display:block; margin-top:4px; overflow:hidden; color:var(--launcher-muted); font-size:8px; white-space:nowrap; text-overflow:ellipsis; }
.widget-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:10px; color:#5a7383; background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.8); }
.widget-icon svg { width:15px; height:15px; }
.tone-blue { color:#5a849d; background:rgba(211,230,240,.78); }
.tone-lilac { color:#7a7198; background:rgba(226,221,242,.8); }
.tone-green { color:#5e8c7b; background:rgba(218,237,229,.84); }
.tone-peach { color:#a2776f; background:rgba(244,226,217,.86); }
.player-toggle { width:26px; height:26px; display:grid; place-items:center; border-radius:9px; color:#6c638c; background:rgba(255,255,255,.66); }
.player-toggle svg { width:13px; height:13px; }
.widget-remove, .app-remove { display:none; }
.apps-heading { display:flex; align-items:end; justify-content:space-between; margin:20px 3px 12px; }
.apps-heading strong { display:block; margin-top:4px; color:var(--launcher-ink); font-size:14px; }
.add-widget-button { display:inline-flex; align-items:center; gap:4px; padding:7px 9px; border:1px solid rgba(255,255,255,.76); border-radius:10px; color:#577385; background:rgba(255,255,255,.6); font-size:9px; }
.add-widget-button svg { width:13px; height:13px; }
.app-grid { gap:17px 10px; }
.launcher-app { position:relative; display:grid; gap:4px; justify-items:center; min-width:0; color:var(--launcher-ink); }
.launcher-app span { width:54px; height:54px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.84); border-radius:18px; color:#fff; box-shadow:0 10px 17px rgba(65,87,103,.12); transition:transform .18s ease, box-shadow .18s ease; }
.launcher-app:hover span, .launcher-app:focus-visible span { transform:translateY(-2px); box-shadow:0 13px 21px rgba(65,87,103,.17); }
.launcher-app svg { width:23px; height:23px; stroke-width:1.7; }
.launcher-app small { overflow:hidden; max-width:72px; font-size:10px; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
.launcher-app em { color:var(--launcher-muted); font-size:8px; font-style:normal; }
.app-chat span { background:#6e94a3; }.app-people span { background:#7b9c90; }.app-diary span { background:#a7898d; }.app-memory span { background:#857e9f; }.app-photo span { background:#75949d; }.app-setting span { background:#78848f; }
.page-caption { padding:10px 3px 16px; }.page-caption strong { display:block; margin-top:7px; color:var(--launcher-ink); font-size:22px; letter-spacing:-.6px; }.page-caption small { display:block; margin-top:5px; color:var(--launcher-muted); font-size:10px; }
.large-widget { padding:14px; margin-bottom:10px; }.large-widget .widget-icon { width:34px; height:34px; }.agenda-widget > .widget-eyebrow { margin-top:16px; }.agenda-widget > strong { display:block; margin-top:6px; color:var(--launcher-ink); font-size:15px; }.agenda-line { display:grid; grid-template-columns:8px 1fr auto; gap:8px; align-items:center; padding-top:14px; color:var(--launcher-muted); font-size:10px; }.agenda-line i { width:7px; height:7px; border-radius:50%; background:#77a18f; }.agenda-line time { color:var(--launcher-faint); font-size:9px; }.quote-widget p { margin:16px 0 10px; color:var(--launcher-ink); font-size:15px; line-height:1.7; }.quote-widget small { color:var(--launcher-muted); font-size:9px; }.secondary-add-button { width:100%; display:flex; justify-content:center; align-items:center; gap:5px; margin-top:14px; padding:11px; color:#5d7787; background:rgba(255,255,255,.48); border:1px dashed rgba(126,151,165,.48); border-radius:13px; font-size:10px; }.secondary-add-button svg { width:14px; height:14px; }
.focus-widget > strong { display:block; margin-top:10px; color:var(--launcher-ink); font-size:30px; letter-spacing:1px; }.focus-widget > small { display:block; margin-top:4px; color:var(--launcher-muted); font-size:9px; }.focus-progress { height:5px; margin-top:15px; overflow:hidden; border-radius:5px; background:rgba(116,153,170,.18); }.focus-progress i { display:block; width:42%; height:100%; border-radius:inherit; background:#7198aa; }
.page-dots { display:flex; justify-content:center; gap:6px; padding:13px 0 12px; }.page-dots button { width:6px; height:6px; padding:0; border-radius:50%; background:rgba(91,116,132,.26); }.page-dots button.active { width:18px; border-radius:6px; background:#6f8ea0; }.page-dots button:disabled { opacity:.42; cursor:not-allowed; }
.dock { left:16px; right:16px; bottom:28px; height:58px; background:rgba(248,251,253,.6); border:1px solid rgba(255,255,255,.8); border-radius:20px; box-shadow:0 15px 26px rgba(62,82,98,.12); backdrop-filter:blur(18px); }.dock-icon { width:38px; height:38px; color:#5c7583; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.7); border-radius:13px; }.dock-icon svg { width:18px; height:18px; }
.desktop-editbar { position:absolute; left:16px; right:16px; bottom:94px; z-index:7; display:none; align-items:center; justify-content:space-between; padding:9px 12px; color:#557082; background:rgba(248,251,253,.78); border:1px solid rgba(255,255,255,.86); border-radius:14px; box-shadow:0 12px 24px rgba(62,82,98,.12); backdrop-filter:blur(16px); font-size:9px; }.desktop-editbar span { display:flex; align-items:center; gap:5px; }.desktop-editbar svg { width:13px; height:13px; }.editbar-actions { display:flex; align-items:center; gap:5px; }.desktop-editbar button { padding:5px 9px; border-radius:9px; color:#fff; background:#6f91a2; font-size:9px; }.desktop-editbar .reset-layout-button { color:#5d7787; background:rgba(255,255,255,.68); border:1px solid rgba(123,150,164,.3); }.desktop-editing .desktop-editbar { display:flex; }.desktop-editing .widget-remove { position:absolute; top:8px; right:8px; z-index:2; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#fff; background:#8c6671; font-size:15px; line-height:1; }.desktop-editing .app-remove { position:absolute; top:-5px; right:calc(50% - 31px); z-index:3; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#fff; background:#8c6671; font-size:14px; line-height:1; }.desktop-editing .launcher-app { animation:launcher-wiggle .2s ease-in-out alternate infinite; }.launcher-app.is-dragging { opacity:.45; transform:scale(.96); }.launcher-app.drag-target span { box-shadow:0 0 0 3px rgba(111,145,162,.24), 0 13px 21px rgba(65,87,103,.17); }
@keyframes launcher-wiggle { from { transform:rotate(-.5deg); } to { transform:rotate(.5deg); } }
.widget-sheet { position:absolute; inset:0; z-index:25; display:none; }.widget-sheet.open { display:block; }.widget-sheet-backdrop { position:absolute; inset:0; background:rgba(42,58,72,.2); backdrop-filter:blur(3px); }.widget-sheet-panel { position:absolute; left:0; right:0; bottom:0; padding:8px 16px 29px; background:rgba(245,249,251,.92); border-top:1px solid rgba(255,255,255,.88); border-radius:23px 23px 0 0; box-shadow:0 -16px 38px rgba(47,66,82,.17); backdrop-filter:blur(22px); }.sheet-grabber { width:35px; height:4px; margin:0 auto 16px; border-radius:8px; background:rgba(100,124,139,.28); }.sheet-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }.sheet-title strong { display:block; margin-top:4px; color:var(--launcher-ink); font-size:16px; }.widget-option { width:100%; display:grid; grid-template-columns:34px 1fr 18px; gap:10px; align-items:center; padding:11px 4px; color:var(--launcher-ink); background:transparent; border-bottom:1px solid rgba(130,150,163,.14); text-align:left; }.widget-option > span:nth-child(2) { display:grid; gap:3px; }.widget-option strong { font-size:11px; }.widget-option small { color:var(--launcher-muted); font-size:9px; }.widget-option > svg { width:15px; color:var(--launcher-muted); }
.night-mode .phone-screen { background-color:#23313c; }.night-mode .phone-screen:after { background:rgba(24,37,48,.38); }.night-mode .launcher-heading h1,.night-mode .companion-copy strong,.night-mode .mini-widget strong,.night-mode .apps-heading strong,.night-mode .page-caption strong,.night-mode .large-widget strong,.night-mode .quote-widget p,.night-mode .sheet-title strong { color:#edf4f6; }.night-mode .launcher-kicker,.night-mode .widget-eyebrow,.night-mode .launcher-subtitle,.night-mode .companion-copy small,.night-mode .mini-widget small,.night-mode .page-caption small,.night-mode .quote-widget small { color:#a9bbc5; }.night-mode .glass-widget,.night-mode .desktop-editbar,.night-mode .widget-sheet-panel { background:rgba(31,47,60,.78); border-color:rgba(173,199,211,.18); }.night-mode .widget-option { color:#e4eef2; border-color:rgba(173,199,211,.16); }.night-mode .dock { background:rgba(31,47,60,.72); }.night-mode .dock-icon,.night-mode .soft-icon,.night-mode .add-widget-button { color:#d2e1e8; background:rgba(70,91,106,.5); border-color:rgba(173,199,211,.18); }
@media (max-width:380px) { .home-view { padding-left:12px; padding-right:12px; }.launcher-page { padding-left:12px; padding-right:12px; }.launcher-viewport { margin-left:-12px; margin-right:-12px; }.dock { left:12px; right:12px; }.launcher-app span { width:50px; height:50px; }.widget-row { gap:7px; }.mini-widget { padding-left:8px; padding-right:8px; } }

/* Lock screen and feature controls */
.phone-lock-screen { position:absolute; inset:0; z-index:60; display:none; overflow:hidden; color:#f8fbfc; isolation:isolate; }
.phone-lock-screen.open { display:block; }
.phone-lock-screen[aria-hidden="true"] { pointer-events:none; }
.lock-screen-wall { position:absolute; inset:0; z-index:0; background:rgba(31,46,59,.48); backdrop-filter:blur(18px) saturate(.82); -webkit-backdrop-filter:blur(18px) saturate(.82); }
.lock-screen-panel { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; padding:54px 24px 26px; text-align:center; text-shadow:0 1px 8px rgba(20,33,43,.2); }
.lock-screen-time { font-size:clamp(54px, 16vw, 76px); font-weight:300; line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.lock-screen-date { margin-top:10px; font-size:12px; font-weight:600; letter-spacing:.4px; opacity:.9; }
.lock-symbol { width:36px; height:36px; display:grid; place-items:center; margin-top:38px; border:1px solid rgba(255,255,255,.4); border-radius:50%; background:rgba(255,255,255,.14); box-shadow:0 8px 20px rgba(17,29,39,.14); }
.lock-symbol svg { width:16px; height:16px; }
.lock-screen-panel > strong { margin-top:11px; font-size:13px; font-weight:600; }
.lock-screen-panel > small { margin-top:5px; font-size:10px; opacity:.76; }
.lock-pin-dots { display:flex; gap:11px; margin-top:20px; min-height:9px; }
.lock-pin-dots i { width:8px; height:8px; display:block; border:1px solid rgba(255,255,255,.75); border-radius:50%; background:transparent; transition:background .16s, transform .16s; }
.lock-pin-dots i.filled { background:#fff; transform:scale(1.12); }
.lock-error { min-height:16px; margin:10px 0 0; color:#ffe1df; font-size:10px; }
.lock-keypad { width:min(276px, 88vw); display:grid; grid-template-columns:repeat(3, 1fr); gap:11px 14px; margin-top:auto; }
.lock-keypad button { width:62px; height:62px; justify-self:center; display:grid; place-items:center; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:#fff; background:rgba(255,255,255,.16); box-shadow:0 7px 15px rgba(18,31,43,.12), inset 0 1px rgba(255,255,255,.18); font-size:22px; font-weight:400; transition:transform .14s, background .14s; }
.lock-keypad button:hover, .lock-keypad button:focus-visible { background:rgba(255,255,255,.27); transform:scale(1.04); }
.lock-keypad button:active { transform:scale(.94); }
.lock-keypad button svg { width:19px; height:19px; }
.lock-keypad .lock-enter-hint { color:#eaf4f7; background:rgba(255,255,255,.1); }
.lock-screen-panel.shake { animation:lock-shake .38s ease-in-out; }
@keyframes lock-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } }

.lock-setup-sheet { position:absolute; inset:0; z-index:70; display:none; }
.lock-setup-sheet.open { display:block; }
.lock-setup-backdrop { position:absolute; inset:0; background:rgba(28,42,53,.28); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.lock-setup-card { position:absolute; left:0; right:0; bottom:0; display:grid; gap:10px; padding:26px 20px 30px; border-top:1px solid rgba(255,255,255,.76); border-radius:24px 24px 0 0; background:rgba(246,250,252,.96); box-shadow:0 -16px 36px rgba(36,55,70,.2); color:var(--launcher-ink); }
.lock-setup-close { position:absolute; top:14px; right:15px; width:30px; height:30px; display:grid; place-items:center; border-radius:10px; color:var(--launcher-muted); background:rgba(225,235,240,.7); }
.lock-setup-close svg { width:15px; height:15px; }
.lock-setup-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:13px; color:#557b8e; background:#dfeef2; }
.lock-setup-icon svg { width:20px; height:20px; }
.lock-setup-card h2 { margin:0; font-size:20px; letter-spacing:-.4px; }
.lock-setup-card > p { margin:0; color:var(--launcher-muted); font-size:11px; line-height:1.6; }
.lock-setup-card label { display:grid; gap:6px; color:var(--launcher-muted); font-size:10px; }
.lock-setup-card input { width:100%; padding:11px 12px; border:1px solid rgba(131,157,171,.3); border-radius:12px; outline:0; color:var(--launcher-ink); background:rgba(255,255,255,.8); font-size:15px; letter-spacing:4px; }
.lock-setup-card input:focus { border-color:#6f91a2; box-shadow:0 0 0 3px rgba(111,145,162,.14); }
.lock-setup-error { min-height:15px; color:#a66571 !important; }
.lock-setup-submit { width:100%; padding:12px 14px; border-radius:12px; color:#fff; background:#6f91a2; box-shadow:0 8px 16px rgba(77,111,128,.18); font-size:12px; font-weight:700; }
.lock-setup-submit:hover { background:#5e8193; }

.launcher-settings-group { display:grid; gap:8px; margin:2px 0 4px; }
.setting-row-feature { width:100%; min-height:62px; border:1px solid rgba(255,255,255,.65); background:rgba(248,251,252,.66); box-shadow:0 9px 20px rgba(79,104,128,.08); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.setting-row-feature > .setting-leading { min-width:0; display:flex; align-items:center; gap:10px; }
.setting-leading > i, .setting-leading > svg { width:17px; height:17px; flex:none; color:#638397; }
.setting-leading > span { min-width:0; display:grid; gap:4px; }
.setting-leading b { font-size:12px; font-weight:600; }
.setting-leading small { overflow:hidden; color:var(--launcher-muted); font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.setting-actions { display:flex; align-items:center; gap:6px; flex:none; }
.setting-mini-button, .setting-link-button { padding:6px 8px; border-radius:9px; font-size:9px; font-weight:700; }
.setting-mini-button { color:#5d7787; background:rgba(224,235,240,.86); }
.setting-mini-button.active { color:#fff; background:#6f91a2; }
.setting-link-button { color:#6f91a2; background:transparent; }
.setting-feature-status { min-width:31px; color:#6f91a2; font-size:10px; font-weight:700; text-align:right; }
.launcher-swipe-disabled .launcher-viewport { overflow-x:hidden; }
.launcher-swipe-disabled .launcher-pages { width:100%; }
.launcher-swipe-disabled .launcher-page { flex-basis:100%; width:100%; }
.launcher-edit-disabled #desktop-edit { opacity:.4; cursor:not-allowed; }
.launcher-edit-disabled .desktop-editbar { display:none !important; }
.night-mode .lock-setup-card { background:rgba(31,47,60,.96); color:#edf4f6; border-color:rgba(173,199,211,.2); }
.night-mode .lock-setup-card > p, .night-mode .lock-setup-card label { color:#a9bbc5; }
.night-mode .lock-setup-card input { color:#edf4f6; background:rgba(70,91,106,.5); border-color:rgba(173,199,211,.28); }
.night-mode .lock-setup-close { color:#d2e1e8; background:rgba(70,91,106,.6); }
.night-mode .setting-row-feature { background:rgba(31,47,60,.72); border-color:rgba(173,199,211,.18); }
.night-mode .setting-mini-button { color:#d2e1e8; background:rgba(70,91,106,.65); }

@media (max-width:380px) {
  .lock-screen-panel { padding-left:16px; padding-right:16px; }
  .lock-keypad { gap:9px 10px; }
  .lock-keypad button { width:56px; height:56px; }
  .lock-setup-card { padding-left:16px; padding-right:16px; }
  .setting-row-feature { padding-left:10px; padding-right:10px; }
  .setting-actions { gap:2px; }
  .setting-mini-button, .setting-link-button { padding-left:6px; padding-right:6px; }
}
