/* ==========================================================================
   OrbitOS 4.4.1: Today, lock screen widgets, recent apps, Backups, Look and
   What's new. Built on the Design v3 kit (kit.css). No glow, no gray fills.
   ========================================================================== */

/* Apps put aside with Home in Recent apps */
.fullscreen-app.os-bg { display: none !important; }

/* ---------- Today ---------- */

.today-app .td-body { padding: 16px 16px 32px !important; overflow-y: auto; }
.today-app.is-leaving { animation: tdOut 0.22s ease forwards !important; }
.today-app { animation: tdIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
@keyframes tdIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes tdOut { to { opacity: 0; transform: translateX(-24px); } }

.td-hello { margin: 4px 4px 14px; }
.td-date { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok-muted); }
.td-title { margin: 4px 0 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }

.td-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .td-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.td-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    color: var(--on-surface);
    text-align: left;
    transition: transform 0.16s ease;
}
.td-card[data-cmd] { cursor: pointer; }
.td-card[data-cmd]:active { transform: scale(0.98); }
.td-card.is-wide { grid-column: 1 / -1; }
.td-card-head { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ok-muted); }
.td-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; background: var(--tile); color: #ffffff; }

.td-weather { background: linear-gradient(135deg, color-mix(in srgb, var(--tile) 34%, var(--ok-card)), var(--ok-card) 70%); }
.td-weather-body { display: flex; align-items: center; gap: 14px; min-height: 52px; }
.td-weather-icon { color: var(--tile); display: inline-flex; }
.td-weather-temp { font-size: 2.4rem; font-weight: 300; letter-spacing: -0.04em; line-height: 1; }

.td-list { display: flex; flex-direction: column; gap: 8px; }
.td-line { display: flex; align-items: center; gap: 10px; min-width: 0; }
.td-line-btn { width: 100%; padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.td-line-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.td-line-text b { font-size: 0.9rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-line-text span { font-size: 0.76rem; color: var(--ok-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.td-empty, .td-muted { margin: 0; font-size: 0.84rem; color: var(--ok-muted); }

.td-todo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: none; background: none; color: inherit; font: 600 0.88rem var(--font-main); text-align: left; cursor: pointer; }
.td-todo { align-items: flex-start; }
.td-todo .td-check { margin-top: 1px; }
.td-todo > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; overflow-wrap: anywhere; }
.td-check { width: 18px; height: 18px; flex-shrink: 0; border-radius: 6px; border: 2px solid var(--ok-line-strong); transition: background-color 0.2s ease, border-color 0.2s ease; }
.td-todo.is-done .td-check { background: var(--tile); border-color: var(--tile); }
.td-todo.is-done > span:last-child { text-decoration: line-through; opacity: 0.5; }

.td-streak { display: flex; align-items: baseline; gap: 6px; }
.td-streak b { font-size: 2rem; font-weight: 800; color: var(--tile); line-height: 1; }
.td-streak span { font-size: 0.8rem; color: var(--ok-muted); }
.td-daily-row { display: flex; flex-direction: column; gap: 6px; }
.td-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ok-line-strong); background: transparent; color: var(--on-surface); font: 700 0.76rem var(--font-main); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-chip.is-done { border-color: transparent; background: color-mix(in srgb, var(--tile) 22%, transparent); }

.td-np { display: flex; align-items: center; gap: 10px; min-width: 0; }
.td-np img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.td-np-btns { display: flex; gap: 8px; }
.td-round { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: var(--tile); color: #ffffff; cursor: pointer; }
.td-round svg { fill: currentColor; }

.td-apps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.td-app { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 6px 2px; border: none; border-radius: 16px; background: none; color: inherit; font-family: var(--font-main); cursor: pointer; transition: transform 0.16s ease, background-color 0.16s ease; }
.td-app:active { transform: scale(0.94); background: color-mix(in srgb, var(--on-surface, #ffffff) 6%, transparent); }
.td-app-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 15px; color: #ffffff; }
.td-app-name { max-width: 100%; font-size: 0.8rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-app-why { max-width: 100%; font-size: 0.66rem; color: var(--ok-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-apps-recent { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.td-apps-recent::-webkit-scrollbar { display: none; }
.td-apps-label { flex-shrink: 0; margin-right: 2px; font-size: 0.72rem; font-weight: 700; color: var(--ok-muted); }
.td-app-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding-left: 4px; }
.td-app-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #ffffff; }
html.theme-amoled .td-app-icon, html.theme-amoled .td-app-dot { background: #ffffff !important; color: #000000; }

.td-quote-text { margin: 0; font-size: 1rem; line-height: 1.5; font-style: italic; }
.td-foot { margin: 14px 4px 0; text-align: center; font-size: 0.78rem; color: var(--ok-muted); }

.td-in { animation: tdRise 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes tdRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

html.theme-amoled .td-card { background: #000000; }
html.theme-amoled .td-weather { background: #000000; }
html.theme-amoled .td-card-icon, html.theme-amoled .td-round { background: #ffffff; color: #000000; }
html.theme-amoled .td-streak b, html.theme-amoled .td-weather-icon { color: #ffffff; }

/* ---------- Lock screen widgets ---------- */

#lock-widgets { display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(92vw, 380px); margin-top: 18px; }
#lock-widgets:empty { display: none; }
.lw-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--on-surface, #ffffff) 18%, transparent);
    font: 500 0.82rem var(--font-main);
    color: var(--on-surface);
}
.lw-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-notifs { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 6px; }
.lw-notif {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--on-surface, #ffffff) 12%, transparent);
    background: color-mix(in srgb, var(--surface-color, #191d25) 88%, transparent);
    color: var(--on-surface);
    font-family: var(--font-main);
    text-align: left;
    cursor: pointer;
    animation: tdRise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(0.25s + var(--i, 0) * 60ms);
}
.lw-notif .nt-icon { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #ffffff; }
.lw-notif-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.lw-notif-app { font-size: 0.7rem; font-weight: 700; color: color-mix(in srgb, var(--on-surface, #ffffff) 60%, transparent); }
.lw-notif-text b { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-notif-body { font-size: 0.78rem; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-more { font-size: 0.76rem; font-weight: 600; opacity: 0.7; text-align: center; }
html.no-animations .lw-notif, body.no-animations .lw-notif, html.no-animations .td-in, body.no-animations .td-in { animation: none !important; }
html.theme-amoled .lw-notif { background: #000000; }

/* ---------- Recent apps ---------- */

#app-switcher {
    position: fixed;
    inset: 0;
    z-index: 19000;
    display: flex;
    flex-direction: column;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 0 calc(18px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--background, #13161c) 97%, transparent);
    color: var(--on-surface);
    font-family: var(--font-main);
    opacity: 0;
    transition: opacity 0.2s ease;
}
#app-switcher.is-on { opacity: 1; }
#app-switcher.is-leaving { opacity: 0; }
.as-top { display: flex; align-items: center; justify-content: space-between; padding: 0 20px 12px; }
.as-title { font-size: 1.1rem; font-weight: 800; }
.as-pill { height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--on-surface) 22%, transparent); background: transparent; color: var(--on-surface); font: 700 0.8rem var(--font-main); cursor: pointer; }
.as-cards {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    padding: 0 calc(50vw - min(31vw, 150px));
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.as-cards::-webkit-scrollbar { display: none; }
.as-card {
    flex: 0 0 min(62vw, 300px);
    height: min(68%, 560px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    scroll-snap-align: center;
    touch-action: pan-x;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease;
    animation: asIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes asIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: none; } }
.as-card.is-closing { transform: translateY(-120%) !important; opacity: 0 !important; }
.as-card-head { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.as-card-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hue); flex-shrink: 0; }
.as-card-name { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-x { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: color-mix(in srgb, var(--on-surface) 12%, transparent); color: var(--on-surface); cursor: pointer; }
.as-preview { position: relative; flex: 1; overflow: hidden; border-radius: 24px; border: 1px solid color-mix(in srgb, var(--on-surface) 14%, transparent); background: var(--surface-color, #191d25); cursor: pointer; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); }
.as-clone { position: absolute; inset: 0; pointer-events: none; }
.as-clone > *, .as-frame * { pointer-events: none !important; }
.as-frame > .fullscreen-app { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; animation: none !important; transform: none !important; }
.as-empty { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; color: color-mix(in srgb, var(--on-surface) 55%, transparent); font-size: 0.9rem; }
.as-section { padding: 16px 20px 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: color-mix(in srgb, var(--on-surface) 55%, transparent); }
.as-recents { display: flex; gap: 14px; overflow-x: auto; padding: 0 20px 4px; scrollbar-width: none; }
.as-recent { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: none; background: none; color: var(--on-surface); font: 600 0.72rem var(--font-main); cursor: pointer; }
.as-recent > span:last-child { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-recent-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; color: #ffffff; transition: transform 0.14s ease; }
.as-recent:active .as-recent-icon { transform: scale(0.9); }
.as-bottom { display: flex; justify-content: center; padding-top: 14px; }
.as-home { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 999px; border: none; background: color-mix(in srgb, var(--on-surface, #ffffff) 22%, #ffffff); color: #0b0d12; font: 700 0.9rem var(--font-main); cursor: pointer; }
html.no-animations .as-card, body.no-animations .as-card { animation: none !important; transition: none !important; }
html.theme-amoled #app-switcher { background: #000000; }
html.theme-amoled .as-recent-icon, html.theme-amoled .as-card-dot { background: #ffffff !important; color: #000000; }

/* ---------- Backups ---------- */

.backups-app .bk-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bk-chip { height: 38px; padding: 0 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; border: 1px solid var(--ok-line-strong); background: transparent; color: var(--on-surface); font: 700 0.82rem var(--font-main); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; }
.bk-chip.is-on { border-color: transparent; background: var(--hue); color: #ffffff; }
.backups-app .bk-row { width: 100%; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.backups-app .ok-list > * + .bk-row { border-top: 1px solid var(--ok-line); }
/* Collapsible sections */
.backups-app .bk-sec { margin-top: 10px; overflow: hidden; }
.backups-app .bk-sec-head { width: 100%; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bk-sec-chev { display: inline-flex; color: var(--ok-muted); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bk-sec.is-open .bk-sec-chev { transform: rotate(180deg); }
.bk-sec-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bk-sec.is-open .bk-sec-body { grid-template-rows: 1fr; }
.bk-sec-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.2s ease; }
.bk-sec.is-open .bk-sec-inner { opacity: 1; border-top: 1px solid var(--ok-line); padding: 12px 14px 14px; }
.bk-sec-inner .bk-rows { margin: -12px -14px -14px; }
.bk-sec-inner .bk-rows > * + * { border-top: 1px solid var(--ok-line); }
.bk-label { margin: 2px 2px 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok-muted); }
.bk-chips + .bk-label { margin-top: 14px; }
.bk-empty { margin: 0; font-size: 0.86rem; color: var(--ok-muted); }
html.no-animations .bk-sec-body, body.no-animations .bk-sec-body, html.no-animations .bk-sec-chev, body.no-animations .bk-sec-chev { transition: none; }
.bk-foot { margin: 14px 4px 28px; font-size: 0.8rem; line-height: 1.5; color: var(--ok-muted); }
.backups-app .ok-hero-actions .ok-spinner { width: 16px; height: 16px; }
html.theme-amoled .bk-chip.is-on { background: #ffffff; color: #000000; }

/* Move to another device */
.bk-move {
    position: fixed;
    inset: 0;
    z-index: 21000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
    font-family: var(--font-main);
    animation: wnFade 0.2s ease both;
}
.bk-move.is-leaving { animation: wnFadeOut 0.2s ease forwards; }
.bk-move-card {
    position: relative;
    width: min(100%, 400px);
    max-height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 22px 22px;
    border-radius: 28px;
    border: 1px solid var(--ok-line);
    background: var(--surface-color, #191d25);
    color: var(--on-surface);
    text-align: center;
    animation: wnPop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.bk-move-card h3 { margin: 4px 0 0; font-size: 1.25rem; }
.bk-move-card p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ok-muted); }
.bk-move-icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: var(--hue); color: #ffffff; }
.bk-move-icon.is-bad { background: #ef4444; }
.bk-move-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: none; background: color-mix(in srgb, var(--on-surface) 10%, transparent); color: var(--on-surface); cursor: pointer; }
.bk-qr { width: min(64vw, 230px); aspect-ratio: 1; margin-top: 6px; padding: 8px; border-radius: 18px; background: #ffffff; }
.bk-qr svg { display: block; width: 100%; height: 100%; }
.bk-code { font: 800 1.6rem var(--font-mono); letter-spacing: 0.18em; }
.bk-move-state { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 24px; font-size: 0.88rem; }
.bk-move-state .ok-spinner, .bk-move-busy .ok-spinner { width: 18px; height: 18px; }
.bk-move-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 0; font-size: 0.92rem; }
.bk-move-btns { display: flex; gap: 10px; width: 100%; margin-top: 6px; }
.bk-move-btns .ok-btn { flex: 1; justify-content: center; }
.bk-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--hue); font-weight: 700; }
.bk-bad { color: #ef4444; }
.bk-code-form { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.bk-code-form input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--ok-line-strong); background: var(--input-bg, #1e232c); color: var(--on-surface); font: 800 1.2rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; text-align: center; outline: none; }
.bk-code-form input:focus { border-color: var(--hue); }
html.theme-amoled .bk-move-card { background: #000000; }
html.theme-amoled .bk-move-icon { background: #ffffff; color: #000000; }

/* ---------- Look ---------- */

.lk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .lk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lk-wp { display: flex; flex-direction: column; gap: 6px; padding: 0; border: none; background: none; color: var(--on-surface); font: 600 0.78rem var(--font-main); cursor: pointer; }
.lk-thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 5; overflow: hidden; border-radius: 18px; border: 2px solid var(--ok-line); background: var(--ok-card); color: var(--ok-muted); transition: border-color 0.2s ease, transform 0.16s ease; }
.lk-thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lk-wp:active .lk-thumb { transform: scale(0.96); }
.lk-wp.is-on .lk-thumb { border-color: var(--accent-primary); box-shadow: inset 0 0 0 2px var(--background); }
.lk-wp.is-busy .lk-thumb { opacity: 0.6; }
.lk-name { text-align: center; }
.lk-none .lk-thumb span { font-size: 0.78rem; font-weight: 700; }
.lk-accents { display: flex; flex-wrap: wrap; gap: 14px; padding: 7px 6px; margin-top: 4px; }
.lk-accent { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border: 3px solid transparent; background: var(--c); color: #0b0d12; font: 800 0.9rem var(--font-main); cursor: pointer; transition: transform 0.14s ease; }
.lk-accent:active { transform: scale(0.9); }
.lk-accent.is-on { box-shadow: 0 0 0 3px var(--background), 0 0 0 5px var(--c); }
.lk-preview { display: flex; align-items: center; gap: 12px; margin: 16px 2px 4px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--ok-line); background: var(--ok-card); }
.lk-p-btn { padding: 7px 16px; border-radius: 999px; background: var(--accent-primary); color: #0b0d12; font-weight: 700; font-size: 0.84rem; }
.lk-p-link { color: var(--accent-primary); font-weight: 700; font-size: 0.86rem; text-decoration: underline; }
.lk-p-chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent-primary); color: var(--accent-primary); font-weight: 700; font-size: 0.8rem; }
.lk-note { margin: 0 4px 10px; font-size: 0.82rem; color: var(--ok-muted); }
.lk-more { margin-top: 18px; margin-bottom: 28px; }
.lk-more .ok-row { width: 100%; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }

/* ---------- What's new ---------- */

.wn {
    position: fixed;
    inset: 0;
    z-index: 21500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0);
    font-family: var(--font-main);
    transition: background-color 0.25s ease;
}
.wn.is-on { background: rgba(0, 0, 0, 0.6); }
.wn.is-leaving { background: rgba(0, 0, 0, 0); }
.wn.is-leaving .wn-sheet { animation: wnDown 0.25s ease forwards; }
.wn-sheet {
    position: relative;
    width: min(100%, 420px);
    max-height: min(92vh, 640px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid var(--ok-line);
    background: var(--surface-color, #191d25);
    color: var(--on-surface);
    animation: wnPop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.wn-skip { position: absolute; top: 14px; right: 14px; z-index: 2; height: 32px; padding: 0 14px; border-radius: 999px; border: none; background: rgba(0, 0, 0, 0.25); color: #ffffff; font: 700 0.8rem var(--font-main); cursor: pointer; }
.wn-track { flex: 1; min-height: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.wn-track::-webkit-scrollbar { display: none; }
.wn-card { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 26px 10px; text-align: center; scroll-snap-align: start; overflow-y: auto; }
.wn-art {
    position: relative;
    align-self: stretch;
    height: 190px;
    margin: 0 -26px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--hue), color-mix(in srgb, var(--hue) 55%, #0b0d12));
    color: #ffffff;
    overflow: hidden;
}
.wn-art-ring { position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.05), 0 0 0 80px rgba(255, 255, 255, 0.03); }
.wn-art-icon { position: relative; width: 92px; height: 92px; display: inline-flex; align-items: center; justify-content: center; border-radius: 28px; background: rgba(255, 255, 255, 0.18); animation: wnFloat 3.2s ease-in-out infinite; }
.wn-kicker { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hue); }
.wn-title { margin: 0; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; }
.wn-text { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--ok-muted); }
.wn-try { margin-top: 6px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hue) 60%, transparent); background: transparent; color: var(--on-surface); font: 700 0.84rem var(--font-main); cursor: pointer; }
.wn-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 20px; }
.wn-dots { display: flex; gap: 6px; }
.wn-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--ok-line-strong); cursor: pointer; transition: width 0.25s ease, background-color 0.25s ease; }
.wn-dots i.is-on { width: 22px; background: var(--on-surface); }
.wn-next { min-width: 110px; justify-content: center; }
/* The update card (app/updater.js), built on the What's new sheet. */
.up-sheet { max-height: min(92vh, 700px); }
.up-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 4px; }
.up-art { margin: 0 0 6px; height: 170px; }
.up-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 24px 0; text-align: center; }
.up-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 2px; }
.up-pills span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ok-line-strong); font: 700 0.74rem var(--font-main); color: var(--ok-muted); }
.up-groups { margin: 16px 16px 0; border: 1px solid var(--ok-line); border-radius: 20px; overflow: hidden; }
.up-group { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.up-group + .up-group { border-top: 1px solid var(--ok-line); }
.up-tile { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px; color: #ffffff; }
.up-group-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.up-group-text b { font-size: 0.92rem; font-weight: 700; }
.up-group-text span { font-size: 0.8rem; line-height: 1.4; color: var(--ok-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.up-group-text em { font-style: normal; font-weight: 700; color: var(--on-surface); }
.up-note { margin: 12px 24px 0; font-size: 0.8rem; line-height: 1.45; text-align: center; color: var(--error, #e5534b); }
.up-foot { justify-content: flex-end; }
.up-foot .ok-btn { flex: 1; justify-content: center; }

/* ---------- Backup and restore screen (app/backup.js) ---------- */
.bks-sheet { max-height: min(92vh, 680px); }
.bks-art { margin: 0 0 6px; height: 150px; }
.bks-head { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 24px 0; text-align: center; }
.bks-track { width: 100%; height: 6px; margin-top: 8px; border-radius: 6px; background: var(--ok-line-strong, rgba(255, 255, 255, 0.16)); overflow: hidden; }
.bks-track span { display: block; width: 0; height: 100%; border-radius: 6px; background: var(--hue); transition: width 0.25s ease; }
.bks-list { flex: 1; min-height: 0; overflow-y: auto; margin: 16px 16px 0; border: 1px solid var(--ok-line); border-radius: 20px; }
.bks-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; opacity: 0.45; transition: opacity 0.2s ease; }
.bks-row + .bks-row { border-top: 1px solid var(--ok-line); }
.bks-row.is-busy, .bks-row.is-done { opacity: 1; }
.bks-tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px; color: #ffffff; }
.bks-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; text-align: left; }
.bks-row-text b { font-size: 0.9rem; font-weight: 700; }
.bks-row-text span { font-size: 0.78rem; color: var(--ok-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bks-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--ok-line-strong, rgba(255, 255, 255, 0.2)); color: #ffffff; }
.bks-row.is-busy .bks-mark { border-color: var(--hue); border-right-color: transparent; animation: bksSpin 0.7s linear infinite; }
.bks-row.is-done .bks-mark { border-color: var(--hue); background: var(--hue); }
.bks-foot { justify-content: flex-end; }
.bks-foot[hidden] { display: none; }
.bks-foot .ok-btn { flex: 1; justify-content: center; }
@keyframes bksSpin { to { transform: rotate(360deg); } }
html.no-animations .bks-row.is-busy .bks-mark, body.no-animations .bks-row.is-busy .bks-mark { animation: none; }
html.theme-amoled .bks-track span, html.theme-amoled .bks-row.is-done .bks-mark { background: #ffffff; border-color: #ffffff; color: #000000; }
html.theme-amoled .up-tile { background: #ffffff !important; color: #000000; }

@keyframes wnPop { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes wnDown { to { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes wnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wnFadeOut { to { opacity: 0; } }
@keyframes wnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
html.no-animations .wn-sheet, body.no-animations .wn-sheet, html.no-animations .wn-art-icon, body.no-animations .wn-art-icon, html.no-animations .bk-move-card, body.no-animations .bk-move-card { animation: none !important; }
html.theme-amoled .wn-sheet { background: #000000; }
html.theme-amoled .wn-art { background: #111111; }
html.theme-amoled .wn-kicker { color: #ffffff; }

@media (prefers-reduced-motion: reduce) {
    .td-in, .lw-notif, .as-card, .wn-sheet, .wn-art-icon, .bk-move-card, .today-app { animation: none !important; }
}

/* Pure black: icons that sit on white need to be black to show. */
html.theme-amoled :is(.td-card-icon, .td-round, .as-recent-icon, .bk-move-icon, .games-streak.is-on, .ok-btn--white, .as-home, .lk-p-btn) svg,
html.theme-amoled :is(.td-card-icon, .td-round, .as-recent-icon, .bk-move-icon, .games-streak.is-on, .ok-btn--white, .as-home, .lk-p-btn) svg *,
html.theme-amoled :is(.td-card-icon, .td-round, .as-recent-icon, .bk-move-icon, .ok-btn--white, .as-home) {
    color: #000000 !important;
}

/* ---------- Recent apps bar (opt-in, Settings > System) ---------- */

#as-bar {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 350;
    display: none;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: calc(20px + env(safe-area-inset-bottom, 0px));
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    margin: 0;
    border: none;
    background: transparent;
    transform: translateX(-50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#as-bar span {
    width: 108px;
    height: 5px;
    border-radius: 999px;
    background: var(--on-surface, #ffffff);
    opacity: 0.45;
    transition: opacity 0.2s ease, width 0.2s ease, transform 0.2s ease;
}
#as-bar:hover span, #as-bar:focus-visible span { opacity: 0.8; }
#as-bar:active span { width: 124px; opacity: 0.9; transform: translateY(-2px); }
body:has(.fullscreen-app:not(.os-bg, .ok-sheet, #reset-modal, [style*="display: none"])) #as-bar { display: flex; animation: asBarIn 0.3s ease both; }
body:has(#app-switcher, #lock-screen[style*="display: flex"]) #as-bar { display: none; }
@keyframes asBarIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translateX(-50%); } }
html.no-animations #as-bar, body.no-animations #as-bar { animation: none !important; }

/* ---------- Weather ---------- */

.wv-app .fullscreen-app-header { flex-wrap: nowrap !important; }
.wv-head-btns { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wv-unit { height: 38px; min-width: 50px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ok-line-strong); background: transparent; color: var(--on-surface); font: 800 0.86rem var(--font-main); cursor: pointer; }
.wv-unit:active, .wv-here:active { transform: scale(0.96); }

.wv-search { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 10px; animation: wvDrop 0.22s ease both; }
.wv-search[hidden] { display: none; }
.wv-search-field { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--ok-line-strong); background: var(--ok-card); color: var(--ok-muted); }
.wv-search-field input { flex: 1; min-width: 0; height: 100%; border: none !important; outline: none; background: transparent !important; box-shadow: none !important; color: var(--on-surface); font: 600 1rem var(--font-main); padding: 0 !important; }
.wv-search-field:focus-within { border-color: var(--on-surface); }
.wv-here { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: none; background: color-mix(in srgb, var(--on-surface) 8%, transparent); color: var(--on-surface); font: 700 0.8rem var(--font-main); cursor: pointer; }
@keyframes wvDrop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.wv-body { padding: 4px 16px 32px !important; overflow-y: auto; }
.wv-page { display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; animation: wvIn 0.35s ease both; }
@keyframes wvIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wv-page .ok-section { margin: 22px 4px 10px; }

/* Big sky card */
.wv-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px;
    border-radius: 28px;
    background: linear-gradient(160deg, var(--sky-a), var(--sky-b));
    color: #ffffff;
    isolation: isolate;
}
.wv-hero::after { content: ''; position: absolute; z-index: -1; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.wv-hero * { color: #ffffff; }
.wv-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wv-place { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 0.95rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-place svg { flex-shrink: 0; }
.wv-place-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wv-country { opacity: 0.75; font-weight: 600; }
.wv-hero-icon { display: inline-flex; flex-shrink: 0; margin: -4px -4px 0 0; animation: wvFloat 4s ease-in-out infinite; }
.wv-temp { margin-top: -18px; font-size: 5.2rem; font-weight: 200; line-height: 1; letter-spacing: -0.05em; }
.wv-cond { margin-top: 4px; font-size: 1.2rem; font-weight: 700; }
.wv-sub { margin-top: 2px; font-size: 0.86rem; opacity: 0.8; white-space: pre; }
.wv-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.2); }
.wv-hero-stats div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wv-hero-stats span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; opacity: 0.8; white-space: nowrap; }
.wv-hero-stats b { font-size: 1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes wvFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Next 24 hours */
.wv-hours { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scroll-snap-type: x proximity; scroll-padding-inline: 16px; scrollbar-width: none; }
.wv-hours::-webkit-scrollbar { display: none; }
.wv-hour { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; padding: 12px 0 10px; border-radius: 20px; border: 1px solid var(--ok-line); background: var(--ok-card); scroll-snap-align: start; }
.wv-hour.is-now { border-color: color-mix(in srgb, var(--app-hue) 70%, transparent); background: color-mix(in srgb, var(--app-hue) 30%, var(--ok-card)); }
.wv-hour.is-now .wv-hour-t { color: var(--on-surface); }
.wv-hour-t { font-size: 0.74rem; font-weight: 700; color: var(--ok-muted); white-space: nowrap; }
.wv-hour-i { display: inline-flex; }
.wv-hour b { font-size: 1rem; font-weight: 800; }
.wv-pop { font-size: 0.7rem; font-weight: 800; color: #38bdf8; min-height: 1em; }
.wv-pop.is-empty { visibility: hidden; }

/* This week */
.wv-days { padding: 4px 14px !important; }
.wv-day { display: grid; grid-template-columns: 50px 26px 34px 38px minmax(40px, 1fr) 38px; align-items: center; gap: 8px; min-height: 50px; }
.wv-day + .wv-day { border-top: 1px solid var(--ok-line); }
.wv-day-name { font-size: 0.92rem; font-weight: 700; }
.wv-day-icon { display: inline-flex; }
.wv-day-rain { font-size: 0.72rem; font-weight: 800; color: #38bdf8; }
.wv-lo { font-size: 0.92rem; font-weight: 700; color: var(--ok-muted); text-align: right; }
.wv-hi { font-size: 0.92rem; font-weight: 800; }
.wv-bar { position: relative; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--on-surface) 10%, transparent); }
.wv-bar i { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #38bdf8, #facc15, #f97316); }
.wv-bar i.wv-dot { width: 10px; height: 10px; top: -2px; margin-left: -5px; background: var(--on-surface); border: 2px solid var(--ok-card); }

/* Details */
.wv-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .wv-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wv-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px; border-radius: 22px; border: 1px solid var(--ok-line); background: linear-gradient(160deg, color-mix(in srgb, var(--tile) 18%, var(--ok-card)), var(--ok-card) 65%); }
.wv-tile-head { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ok-muted); white-space: nowrap; }
.wv-tile-head svg { color: var(--tile); flex-shrink: 0; }
.wv-tile b { margin-top: 4px; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-tile-sub { font-size: 0.8rem; font-weight: 600; color: var(--ok-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-meter { position: relative; height: 6px; margin-top: 8px; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #eab308, #f97316, #ef4444, #a855f7); }
.wv-meter i { position: absolute; top: -3px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #ffffff; border: 2px solid var(--ok-card); }
.wv-foot { margin: 18px 0 0; text-align: center; font-size: 0.74rem; color: var(--ok-muted); }

/* Loading: quiet shapes where the weather will be, no text. */
.wv-skel { position: relative; overflow: hidden; border-radius: 22px; background: color-mix(in srgb, var(--on-surface) 7%, transparent) !important; }
.wv-skel::before { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--on-surface) 8%, transparent), transparent); animation: wvShine 1.3s ease-in-out infinite; }
.wv-skel::after { display: none; }
.wv-hero.wv-skel { height: 260px; border-radius: 28px; }
.wv-skel-strip { height: 112px; margin-top: 44px; }
.wv-skel-list { height: 300px; margin-top: 44px; }
@keyframes wvShine { to { transform: translateX(100%); } }

.wv-empty { margin-top: 40px; }

@media (max-width: 380px) {
    .wv-temp { font-size: 4.4rem; }
    .wv-day { grid-template-columns: 44px 24px 30px 34px minmax(30px, 1fr) 34px; gap: 6px; }
    .wv-tile b { font-size: 1.4rem; }
}

html.no-animations .wv-app :is(.wv-page, .wv-hero-icon, .wv-search), body.no-animations .wv-app :is(.wv-page, .wv-hero-icon, .wv-search) { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .wv-app :is(.wv-page, .wv-hero-icon, .wv-search) { animation: none !important; } }

html.theme-amoled .wv-hero { background: #0a0a0a !important; border: 1px solid #2a2a2a; }
html.theme-amoled .wv-hero::after { display: none; }
html.theme-amoled .wv-app :is(.wv-hour, .wv-tile) { background: #000000; border-color: #2a2a2a; }
html.theme-amoled .wv-app :is(.wv-hour-i, .wv-day-icon, .wv-tile-head svg) { color: #ffffff !important; }
html.theme-amoled .wv-hour.is-now { border-color: #ffffff; }