/* ==========================================================================
   Orbit UI kit (H209B)
   The look Setup and the Store introduced, as reusable pieces: a banner in the
   app's color, colored icon tiles, lists on the theme's own surface with a thin
   border, and near-white primary buttons. Apps opt in with the .ok-app class on
   their window and set --app-hue. No glow, no gray fills.
   ========================================================================== */

.ok-app {
    --ok-card: var(--surface-color, #0d1117);
    --ok-line: color-mix(in srgb, var(--on-surface, #ffffff) 11%, transparent);
    --ok-line-strong: color-mix(in srgb, var(--on-surface, #ffffff) 22%, transparent);
    --ok-muted: color-mix(in srgb, var(--on-surface, #ffffff) 60%, transparent);
    --ok-ink: color-mix(in srgb, var(--on-surface, #ffffff) 22%, #ffffff);
    --ok-on-ink: color-mix(in srgb, var(--background, #05080c) 85%, #000000);
    --hue: var(--app-hue, #6366f1);
}

html.theme-solar-flare .ok-app {
    --ok-ink: var(--on-surface);
    --ok-on-ink: var(--background);
}

/* ---------- Layout ---------- */

.ok-app .ok-body {
    padding: 16px 16px 0 !important;
    overflow-y: auto;
}

.ok-app .ok-column {
    max-width: 760px;
    margin: 0 auto;
    padding-bottom: 64px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ok-app .ok-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---------- Hero banner ---------- */

.ok-app .ok-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 20px;
    border-radius: 28px;
    color: #ffffff;
    overflow: hidden;
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--hue) 55%, #000000) 0%,
        var(--hue) 58%,
        color-mix(in srgb, var(--hue) 62%, #ffffff) 100%);
}

.ok-app .ok-hero * {
    color: #ffffff;
}

.ok-app .ok-hero-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.82;
}

.ok-app .ok-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.ok-app .ok-hero-icon svg {
    width: 28px;
    height: 28px;
    stroke: #ffffff;
}

.ok-app .ok-hero-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.ok-app .ok-hero-sub {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    opacity: 0.86;
}

.ok-app .ok-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.ok-app .ok-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 16px;
}

.ok-app .ok-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.16);
    min-width: 0;
}

.ok-app .ok-hero-stat span {
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.82;
}

.ok-app .ok-hero-stat strong {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ok-app .ok-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Sections ---------- */

.ok-app .ok-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 4px 0;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ok-muted);
}

.ok-app .ok-section .ok-section-end {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

.ok-app .ok-count {
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--ok-line-strong);
    font-size: 0.7rem;
    letter-spacing: 0;
}

/* ---------- Lists and cards ---------- */

.ok-app .ok-list,
.ok-app .ok-card {
    border-radius: 22px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
    overflow: hidden;
}

.ok-app .ok-card {
    padding: 16px 18px;
}

.ok-app .ok-card p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--on-surface);
}

.ok-app .ok-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 14px;
    border: none;
    background: transparent;
    color: var(--on-surface);
    font-family: var(--font-main);
    text-align: left;
}

.ok-app button.ok-row,
.ok-app .ok-row[role="button"] {
    cursor: pointer;
}

.ok-app button.ok-row:active,
.ok-app .ok-row[role="button"]:active {
    background: color-mix(in srgb, var(--on-surface, #ffffff) 5%, transparent);
}

.ok-app .ok-row + .ok-row,
.ok-app .ok-list > * + .ok-row {
    border-top: 1px solid var(--ok-line);
}

.ok-app .ok-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ok-app .ok-row-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--on-surface);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ok-app .ok-row-sub {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ok-muted);
}

.ok-app .ok-row-value {
    flex-shrink: 0;
    max-width: 55%;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--on-surface);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ok-app .ok-row-chevron {
    flex-shrink: 0;
    opacity: 0.4;
}

/* ---------- Tiles ---------- */

.ok-app .ok-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 11px;
    background: var(--tile, var(--hue));
    color: #ffffff;
}

.ok-app .ok-tile svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}

.ok-app .ok-tile--lg {
    width: 48px;
    height: 48px;
    border-radius: 15px;
}

.ok-app .ok-tile--lg svg {
    width: 24px;
    height: 24px;
}

/* ---------- Stats strip ---------- */

.ok-app .ok-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 20px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
}

.ok-app .ok-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 6px;
    text-align: center;
    min-width: 0;
}

.ok-app .ok-stats > div + div {
    border-left: 1px solid var(--ok-line);
}

.ok-app .ok-stats span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ok-muted);
}

.ok-app .ok-stats strong {
    font-size: 1rem;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---------- Progress bar ---------- */

.ok-app .ok-bar {
    height: 8px;
    border-radius: 8px;
    background: var(--ok-line);
    overflow: hidden;
}

.ok-app .ok-bar > span {
    display: block;
    height: 100%;
    min-width: 6px;
    border-radius: 8px;
    background: var(--tile, var(--hue));
}

/* ---------- Buttons ---------- */

.ok-app .ok-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    background: transparent;
    color: var(--on-surface);
}

.ok-app .ok-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.ok-app .ok-btn--ink { background: var(--ok-ink); color: var(--ok-on-ink); }
.ok-app .ok-btn--outline { border-color: var(--ok-line-strong); }
.ok-app .ok-btn--white,
.ok-app .ok-hero .ok-btn--white * { background: #ffffff; color: #111318 !important; }
.ok-app .ok-hero .ok-btn--white * { background: transparent; }
.ok-app .ok-btn--glass { background: rgba(0, 0, 0, 0.2); color: #ffffff; }
.ok-app .ok-btn--danger { border-color: color-mix(in srgb, var(--error, #e5534b) 45%, transparent); color: var(--error, #e5534b); }
.ok-app .ok-btn--sm { height: 34px; padding: 0 14px; font-size: 0.82rem; }
.ok-app .ok-btn--icon { width: 40px; padding: 0; }
.ok-app .ok-btn--block { width: 100%; height: 48px; font-size: 0.95rem; }

.ok-app .ok-round-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--ok-line-strong);
    background: transparent;
    color: var(--on-surface);
    cursor: pointer;
}

/* ---------- Chips ---------- */

.ok-app .ok-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px 2px;
}

.ok-app .ok-chips::-webkit-scrollbar {
    display: none;
}

.ok-app .ok-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid var(--ok-line-strong);
    background: transparent;
    color: var(--on-surface);
    font-family: var(--font-main);
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ok-app .ok-chip.is-active {
    border-color: transparent;
    background: var(--ok-ink);
    color: var(--ok-on-ink);
}

/* ---------- Inputs ---------- */

.ok-app .ok-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--ok-line-strong) !important;
    background: transparent !important;
    color: var(--on-surface);
    font-family: var(--font-main);
    font-size: 16px;
    outline: none;
    box-shadow: none !important;
}

.ok-app .ok-input:focus {
    border-color: color-mix(in srgb, var(--on-surface, #ffffff) 45%, transparent) !important;
}

.ok-app .ok-input::placeholder {
    color: var(--ok-muted);
}

/* ---------- Empty state ---------- */

.ok-app .ok-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px;
    text-align: center;
    color: var(--ok-muted);
    font-size: 0.9rem;
}

.ok-app .ok-empty strong {
    font-size: 1.1rem;
    color: var(--on-surface);
}

.ok-app .ok-empty .ok-tile {
    margin-bottom: 8px;
}

/* ---------- AMOLED ---------- */

html.theme-amoled .ok-app .ok-list,
html.theme-amoled .ok-app .ok-card,
html.theme-amoled .ok-app .ok-stats {
    background: #0a0a0a !important;
    border-color: #262626 !important;
}

html.theme-amoled .ok-app .ok-hero *,
html.theme-amoled .ok-app .ok-tile {
    color: #ffffff !important;
}

html.theme-amoled .ok-app .ok-btn--white,
html.theme-amoled .ok-app .ok-btn--ink,
html.theme-amoled .ok-app .ok-chip.is-active {
    color: #000000 !important;
}

/* ==========================================================================
   App specifics
   ========================================================================== */

/* Pulse */
#pulse-fullscreen .pulse-interactive-card {
    cursor: pointer;
    user-select: none;
}

#pulse-fullscreen .pulse-storage {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#pulse-fullscreen .pulse-storage-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

#pulse-fullscreen .pulse-storage-top strong {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--on-surface);
}

#pulse-fullscreen .pulse-storage-top span,
#pulse-fullscreen .pulse-storage-legend {
    font-size: 0.85rem;
    color: var(--ok-muted);
}

#pulse-fullscreen .pulse-storage-legend {
    display: flex;
    gap: 16px;
}

#pulse-fullscreen .pulse-storage-legend i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
}

#pulse-fullscreen .pulse-ua {
    font-family: var(--font-mono);
    font-size: 0.8rem !important;
    line-height: 1.55;
    word-break: break-all;
    color: var(--ok-muted) !important;
}

#pulse-fullscreen .pulse-packages:not(.is-expanded) .pulse-pkg-row[data-extra] {
    display: none;
}

#pulse-fullscreen .pulse-pkg-row .ok-row-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pulse-fullscreen .pulse-pkg-toggle .ok-row-title {
    color: var(--ok-muted);
}

/* Software Update */
#software-fullscreen .sw-notes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#software-fullscreen .sw-note {
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
}

#software-fullscreen .sw-note-dot {
    width: 7px;
    height: 7px;
    margin-top: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

#software-fullscreen .sw-note-text {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--ok-muted);
}

#software-fullscreen .sw-note-text strong {
    color: var(--on-surface);
    font-weight: 600;
}

#software-fullscreen .sw-note-text code {
    font-family: var(--font-mono);
    font-size: 0.82em;
}

/* Previous versions: a page of its own, opened from the three dots. */
#software-fullscreen #sw-history-view { display: none; }
#software-fullscreen .ok-column.is-history #sw-history-view { display: flex; flex-direction: column; gap: 12px; }
#software-fullscreen .ok-column.is-history > :is(#sw-installed-view, #sw-update-view, .sw-update-bar) { display: none !important; }
#software-fullscreen .sw-history-intro { margin: 0 4px; font-size: 0.86rem; line-height: 1.5; color: var(--ok-muted); }
#software-fullscreen .sw-more[hidden] { display: none; }

/* The update page: shown instead of the changelog while an update waits. */
#software-fullscreen .sw-up { display: flex; flex-direction: column; gap: 14px; --up: #22a35a; }
#software-fullscreen .sw-up.is-critical { --up: #e5534b; }
#software-fullscreen .sw-up-top { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 8px 6px; text-align: center; }
#software-fullscreen .sw-up-logo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    margin-bottom: 14px;
    border-radius: 34px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--up) 60%, #000000), var(--up) 60%, color-mix(in srgb, var(--up) 60%, #ffffff));
    color: #ffffff;
    --on-surface: #ffffff;
}
#software-fullscreen .sw-up-logo::after {
    content: '';
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 4px solid var(--background, #0f1115);
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a35a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 11 12 16 17 11'/%3E%3Cline x1='12' y1='16' x2='12' y2='4'/%3E%3C/svg%3E") center / 18px no-repeat;
}
#software-fullscreen .sw-up-logo .sys-orbit { transform: scale(0.72); }
#software-fullscreen .sw-up-kind { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--up); }
#software-fullscreen .sw-up-name { margin: 2px 0 0; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
#software-fullscreen .sw-up-build { padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); font: 800 0.85rem var(--font-main); letter-spacing: 0.04em; }
#software-fullscreen .sw-up-meta { margin: 6px 0 0; font-size: 0.85rem; color: var(--ok-muted); }
#software-fullscreen .sw-up-summary p { font-size: 0.95rem; line-height: 1.55; }
#software-fullscreen .sw-up-backup {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px dashed var(--ok-line-strong);
}
#software-fullscreen .sw-up-backup-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: color-mix(in srgb, #10b981 18%, transparent); color: #10b981; }
#software-fullscreen .sw-up-backup-icon svg { width: 18px; height: 18px; }
#software-fullscreen .sw-up-backup-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#software-fullscreen .sw-up-backup-text b { font-size: 0.86rem; }
#software-fullscreen .sw-up-backup-text span { font-size: 0.76rem; line-height: 1.4; color: var(--ok-muted); }
#software-fullscreen .sw-up-backup .ok-btn { flex-shrink: 0; gap: 6px; }
#software-fullscreen .sw-up-backup .ok-btn.is-done { color: #10b981; border-color: color-mix(in srgb, #10b981 50%, transparent); }
#software-fullscreen .sw-up-backup .ok-spinner { width: 14px; height: 14px; border-width: 2px; }
#software-fullscreen .sw-up-current { margin: 0; text-align: center; font-size: 0.78rem; color: var(--ok-muted); }

/* The bar pinned to the bottom: Download and install, then the progress. */
#software-fullscreen .sw-update-bar {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 -16px -64px;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--ok-line);
    background: var(--background, #0f1115);
}
#software-fullscreen .sw-update-bar[hidden] { display: none; }
#software-fullscreen .sw-bar-progress { display: flex; flex-direction: column; gap: 8px; }
#software-fullscreen .sw-bar-row { display: flex; justify-content: space-between; font-size: 0.9rem; }
#software-fullscreen .sw-bar-row span { font-variant-numeric: tabular-nums; font-weight: 700; }
#software-fullscreen .sw-bar-track { height: 8px; border-radius: 8px; background: var(--ok-line); overflow: hidden; }
#software-fullscreen .sw-bar-track > span { display: block; height: 100%; min-width: 8px; border-radius: 8px; background: #22a35a; transition: width 0.25s ease; }
#software-fullscreen .sw-bar-sub { font-size: 0.76rem; color: var(--ok-muted); }
#software-fullscreen .sw-bar-error { margin: 0; font-size: 0.82rem; color: var(--error, #e5534b); }
html.theme-amoled #software-fullscreen .sw-up-logo { background: #111111; }
html.theme-amoled #software-fullscreen .sw-bar-track > span { background: #ffffff; }

/* Download progress inside the banner, and the small Check again link. */
#software-fullscreen .sw-progress {
    width: 100%;
    height: 8px;
    margin-top: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

#software-fullscreen .sw-progress > span {
    display: block;
    height: 100%;
    min-width: 6px;
    border-radius: 8px;
    background: #ffffff;
    transition: width 0.25s ease;
}

#software-fullscreen .sw-check-note {
    margin-top: 12px;
    font-size: 0.82rem;
}

#software-fullscreen .sw-link {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

#software-fullscreen #sw-coming .sw-notes {
    margin-bottom: 4px;
}

#software-fullscreen .sw-history-item {
    border-radius: 20px !important;
}

#software-fullscreen .sw-history-toggle h4 {
    font-size: 1rem !important;
}

#software-fullscreen .sw-history-content.sw-notes {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
}

#software-fullscreen .sw-history-content.sw-notes[style*="display: none"] {
    display: none !important;
}

#software-fullscreen .sw-history-content > p {
    margin: 0 !important;
    color: var(--ok-muted);
}

/* News */
#news-fullscreen .news-hero-title {
    font-size: 1.4rem;
}

#news-fullscreen .ok-hero.news-open {
    cursor: pointer;
}

#news-fullscreen .news-row-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

#news-fullscreen .news-back-btn {
    align-self: flex-start;
    gap: 4px;
    padding-left: 10px;
}

#news-fullscreen .news-article {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
}

#news-fullscreen .news-article p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--on-surface, #ffffff) 85%, transparent);
}

#news-fullscreen .news-article strong {
    color: var(--on-surface);
}

#news-fullscreen .news-next {
    border-radius: 22px;
    border: 1px solid var(--ok-line) !important;
    cursor: pointer;
}

/* Benchmark */
#benchmark-fullscreen .benchmark-big,
.benchmark-sheet .benchmark-big {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 4px 0 2px;
    font-size: 3.2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#benchmark-fullscreen .benchmark-big span,
.benchmark-sheet .benchmark-big span {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.8;
}

#benchmark-fullscreen .benchmark-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: spin 0.8s linear infinite;
}

.benchmark-sheet .fullscreen-app-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.benchmark-sheet .benchmark-sheet-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--on-surface);
}

.benchmark-sheet .benchmark-test-value {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.benchmark-sheet .benchmark-test-value strong {
    font-size: 0.92rem;
    color: var(--on-surface);
}

.benchmark-sheet .benchmark-test-value span {
    font-size: 0.76rem;
    color: var(--ok-muted);
}

.benchmark-sheet .benchmark-guide-row {
    align-items: flex-start;
}

.benchmark-sheet .benchmark-guide-row .ok-row-title {
    white-space: normal;
}

.benchmark-sheet .benchmark-range {
    margin-left: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ok-muted);
}

.benchmark-sheet .benchmark-ua {
    font-family: var(--font-mono);
    font-size: 0.8rem !important;
    word-break: break-all;
    color: var(--ok-muted) !important;
}

/* Calendar */
#calendar-fullscreen .calendar-hero-day {
    font-size: 3.4rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 4px 0 2px;
}

#calendar-fullscreen .calendar-grid-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

#calendar-fullscreen .calendar-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

#calendar-fullscreen .calendar-month-title {
    flex: 1;
    min-width: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--on-surface);
    white-space: nowrap;
}

#calendar-fullscreen .calendar-month-title span {
    color: var(--ok-muted);
    font-weight: 600;
}

#calendar-fullscreen .calendar-today-pill {
    height: 34px;
    padding: 0 12px;
}

#calendar-fullscreen .calendar-month-nav .ok-round-btn {
    width: 34px;
    height: 34px;
}

@media (max-width: 440px) {
    /* Keep the full month name and all three navigation buttons in view. */
    #calendar-fullscreen .calendar-month-nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    #calendar-fullscreen .calendar-month-title {
        grid-column: 1 / -1;
        white-space: normal;
    }

    #calendar-fullscreen .calendar-today-pill { justify-self: start; }
    #calendar-fullscreen .calendar-month-nav .ok-round-btn { margin: 0 !important; }
}

#calendar-fullscreen .calendar-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ok-muted);
}

#calendar-fullscreen .calendar-days-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

#calendar-fullscreen .calendar-day-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    aspect-ratio: 1 / 1;
    max-height: 64px;
    padding: 0;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--on-surface);
    font-family: var(--font-main);
    cursor: pointer;
}

#calendar-fullscreen .calendar-day-cell:active {
    background: color-mix(in srgb, var(--on-surface, #ffffff) 7%, transparent);
}

#calendar-fullscreen .calendar-day-cell.other-month {
    opacity: 0.35;
}

#calendar-fullscreen .calendar-day-number {
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#calendar-fullscreen .calendar-day-dots {
    display: flex;
    gap: 2px;
    height: 5px;
}

#calendar-fullscreen .calendar-day-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hue);
}

#calendar-fullscreen .calendar-day-cell.is-today {
    border-color: var(--hue);
    color: var(--hue);
}

#calendar-fullscreen .calendar-day-cell.is-selected {
    border-color: transparent;
    background: var(--hue);
    color: #ffffff;
}

#calendar-fullscreen .calendar-day-cell.is-selected .calendar-day-dots i {
    background: #ffffff;
}

#calendar-fullscreen .calendar-add-event-form {
    display: flex;
    gap: 8px;
}

#calendar-fullscreen #calendar-add-event-btn {
    height: 44px;
}

#calendar-fullscreen .calendar-event-text {
    white-space: normal;
    word-break: break-word;
}

#calendar-fullscreen .calendar-delete-event-btn {
    width: 34px;
    height: 34px;
    color: var(--ok-muted);
}

/* ---------- Bottom sheets (app/kit.js) ---------- */

/* Pop-ups: a centered card over a dimmed screen. */
.ok-sheet {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.55) !important;
    animation: okDimIn 0.18s ease-out both !important;
    transform: none !important;
}

.ok-sheet.is-leaving {
    animation: okDimOut 0.18s ease forwards !important;
    pointer-events: none;
}

.ok-sheet-card {
    width: 100%;
    max-width: 420px;
    padding: 22px;
    border-radius: 28px;
    border: 1px solid color-mix(in srgb, var(--on-surface, #ffffff) 11%, transparent);
    background: var(--surface-color, #0d1117);
    color: var(--on-surface);
    font-family: var(--font-main);
    animation: storeSheetUp 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ok-sheet-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 15px;
    color: #ffffff;
}

.ok-sheet-card h3 {
    margin: 14px 0 6px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--on-surface);
}

.ok-sheet-card p {
    margin: 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--on-surface, #ffffff) 65%, transparent);
}

.ok-sheet-actions {
    display: flex;
    gap: 10px;
}

.ok-sheet-btn {
    flex: 1;
    height: 46px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--font-main);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}

.ok-sheet-btn--outline {
    background: transparent;
    color: var(--on-surface);
    border-color: color-mix(in srgb, var(--on-surface, #ffffff) 22%, transparent);
}

.ok-sheet-btn--ink {
    background: color-mix(in srgb, var(--on-surface, #ffffff) 22%, #ffffff);
    color: color-mix(in srgb, var(--background, #05080c) 85%, #000000);
}

.ok-sheet-btn--danger {
    background: var(--error, #e5534b);
    color: #ffffff;
}

html.theme-solar-flare .ok-sheet-btn--ink {
    background: var(--on-surface);
    color: var(--background);
}

@media (min-width: 700px) {
    .ok-sheet {
        align-items: center;
    }
}

html.theme-amoled .ok-sheet-card {
    background: #0a0a0a !important;
    border-color: #262626 !important;
}

/* Gallery */
#gallery-fullscreen .gallery-hero {
    min-height: 200px;
    justify-content: flex-end;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.65) 100%),
        var(--gallery-cover) center / cover no-repeat,
        var(--hue);
}

#gallery-fullscreen .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 6px;
}

#gallery-fullscreen .gallery-photo-item {
    aspect-ratio: 1 / 1;
    padding: 0;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ok-card);
    cursor: pointer;
}

#gallery-fullscreen .gallery-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#gallery-fullscreen .gallery-hint {
    color: var(--ok-muted) !important;
    font-size: 0.86rem !important;
}

#gallery-photo-viewer {
    display: flex !important;
    flex-direction: column;
    background: #000000 !important;
    color: #ffffff;
    font-family: var(--font-main);
}

#gallery-photo-viewer .gallery-viewer-top {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
}

#gallery-photo-viewer .gallery-viewer-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#gallery-photo-viewer .gallery-viewer-title strong {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#gallery-photo-viewer .gallery-viewer-title span {
    font-size: 0.78rem;
    opacity: 0.65;
}

#gallery-photo-viewer .gallery-viewer-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
}

#gallery-photo-viewer .gallery-viewer-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
}

#gallery-photo-viewer .gallery-glass-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    cursor: pointer;
}

#gallery-photo-viewer .gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

#gallery-photo-viewer .gallery-nav--prev { left: 12px; }
#gallery-photo-viewer .gallery-nav--next { right: 12px; }

#gallery-photo-viewer .gallery-viewer-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

#gallery-photo-viewer .gallery-bar-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

#gallery-photo-viewer .gallery-bar-btn--danger {
    color: #ff8a80;
}

/* App drawer (app/launcher.js) */
#cmd-launcher-fullscreen .launcher-search-wrap {
    position: sticky;
    top: -16px;
    z-index: 2;
    margin: -16px -16px 0;
    padding: 16px 16px 10px;
    background: var(--background, #05080c);
}

#cmd-launcher-fullscreen .launcher-search {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--ok-line-strong);
    background: var(--ok-card);
    color: var(--ok-muted);
    cursor: text;
}

#cmd-launcher-fullscreen .launcher-search svg {
    flex-shrink: 0;
}

#cmd-launcher-fullscreen .launcher-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent !important;
    border: none !important;
    outline: none;
    box-shadow: none !important;
    color: var(--on-surface) !important;
    font-family: var(--font-main);
    font-size: 16px;
}

#cmd-launcher-fullscreen .launcher-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#cmd-launcher-fullscreen .launcher-drawer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 16px 4px;
    padding: 16px 8px;
    border-radius: 22px;
    border: 1px solid var(--ok-line);
    background: var(--ok-card);
}

#cmd-launcher-fullscreen .launcher-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--on-surface);
    font-family: var(--font-main);
    cursor: pointer;
}

#cmd-launcher-fullscreen .launcher-app-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 17px;
    background: var(--tile, #3b82f6);
    color: #ffffff;
}

#cmd-launcher-fullscreen .launcher-app-icon svg {
    stroke: #ffffff;
}

#cmd-launcher-fullscreen .launcher-app-label {
    max-width: 100%;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#cmd-launcher-fullscreen .launcher-row .ok-row-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#cmd-launcher-fullscreen .launcher-cmd {
    flex-shrink: 0;
    max-width: 30%;
    padding: 3px 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--on-surface, #ffffff) 7%, transparent);
    color: var(--ok-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.theme-amoled #cmd-launcher-fullscreen .launcher-app-icon {
    background: #1c1c1c !important;
    border: 1px solid #2a2a2a;
}

html.theme-amoled #cmd-launcher-fullscreen .launcher-search {
    background: #0a0a0a;
    border-color: #2a2a2a;
}

html.theme-amoled #cmd-launcher-fullscreen .launcher-search-wrap {
    background: #000000;
}

html.theme-amoled #cmd-launcher-fullscreen .launcher-cmd {
    background: #141414;
}

/* Calculator */
#calc-fullscreen .calc-display-box {
    background: transparent !important;
    border: none !important;
    padding: 0.5rem 0.4rem !important;
}

#calc-fullscreen .calc-expr-text {
    font-family: var(--font-main) !important;
    font-variant-numeric: tabular-nums;
    color: var(--ok-muted);
    opacity: 1 !important;
}

#calc-fullscreen .calc-display-text {
    font-family: var(--font-main) !important;
    font-size: clamp(2.6rem, 13vw, 4.2rem) !important;
    font-weight: 300 !important;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

#calc-fullscreen .calc-grid {
    gap: 10px !important;
}

#calc-fullscreen .calc-btn {
    border-radius: 24px !important;
    border: 1px solid var(--ok-line) !important;
    background: var(--ok-card) !important;
    color: var(--on-surface) !important;
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    filter: none !important;
}

#calc-fullscreen .calc-btn:active {
    background: color-mix(in srgb, var(--on-surface, #ffffff) 10%, var(--ok-card)) !important;
}

#calc-fullscreen .calc-btn-action {
    color: color-mix(in srgb, var(--hue) 75%, #ffffff) !important;
    font-size: 1.3rem !important;
}

#calc-fullscreen .calc-btn-op {
    border-color: transparent !important;
    background: color-mix(in srgb, var(--hue) 24%, var(--surface-color, #0d1117)) !important;
    color: color-mix(in srgb, var(--hue) 70%, #ffffff) !important;
    font-size: 1.7rem !important;
}

#calc-fullscreen .calc-btn-op.active,
#calc-fullscreen .calc-btn-op.is-active {
    background: color-mix(in srgb, var(--hue) 45%, var(--surface-color, #0d1117)) !important;
}

#calc-fullscreen .calc-btn-equals {
    border-color: transparent !important;
    background: var(--hue) !important;
    color: #ffffff !important;
    font-size: 1.8rem !important;
}

#calc-fullscreen #calc-history-panel {
    background: var(--surface-color, #0d1117) !important;
    border-left: 1px solid var(--ok-line) !important;
    box-shadow: none !important;
}

html.theme-amoled #calc-fullscreen .calc-btn:not(.calc-btn-op):not(.calc-btn-equals) {
    background: #0a0a0a !important;
    border-color: #262626 !important;
}

/* Browser */
#browser-fullscreen .browser-home {
    padding: 16px 16px 0 !important;
}

#browser-fullscreen .browser-hero-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    height: 50px;
    padding: 0 6px 0 16px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.22);
}

#browser-fullscreen .browser-hero-search input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    outline: none;
    box-shadow: none !important;
    color: #ffffff !important;
    font-family: var(--font-main);
    font-size: 16px;
}

#browser-fullscreen .browser-hero-search input::placeholder {
    color: rgba(255, 255, 255, 0.72);
}

#browser-fullscreen .browser-url-sub,
#browser-fullscreen .browser-url-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#browser-fullscreen .browser-url-title {
    font-weight: 500;
    font-size: 0.9rem;
}

#browser-fullscreen .browser-empty {
    padding: 22px 16px;
}

#browser-fullscreen .browser-clear-btn {
    border: none;
    background: transparent;
    color: var(--error, #e5534b);
    font-family: var(--font-main);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

#browser-fullscreen .browser-note p {
    color: var(--ok-muted) !important;
    font-size: 0.84rem !important;
}

#browser-fullscreen .remove-fav-btn {
    width: 34px;
    height: 34px;
    color: var(--ok-muted);
}

#browser-fullscreen #browser-url-input {
    background: transparent !important;
    border: 1px solid var(--ok-line-strong) !important;
    color: var(--on-surface) !important;
    font-size: 16px !important;
}

/* Wikipedia */
#wiki-fullscreen .wiki-header {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#wiki-fullscreen .wiki-search-form {
    order: 3;
    flex: 1 1 100%;
    display: flex;
    gap: 8px;
}

#wiki-fullscreen .wiki-search {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--ok-line-strong);
    color: var(--ok-muted);
    cursor: text;
}

#wiki-fullscreen .wiki-search input {
    flex: 1;
    min-width: 0;
    background: transparent !important;
    border: none !important;
    outline: none;
    box-shadow: none !important;
    color: var(--on-surface);
    font-family: var(--font-main);
    font-size: 16px;
}

#wiki-fullscreen .wiki-search-form .ok-btn {
    height: 44px;
}

#wiki-fullscreen .wiki-tabs {
    order: 4;
    display: flex;
    gap: 8px;
}

#wiki-fullscreen .wiki-tabs .ok-chip {
    height: 34px;
}

#wiki-fullscreen .wiki-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#wiki-fullscreen .wiki-hero.has-cover {
    min-height: 220px;
    justify-content: flex-end;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.75) 100%),
        var(--wiki-cover) center / cover no-repeat,
        var(--hue);
}

#wiki-fullscreen .wiki-hero .ok-hero-title {
    font-size: 1.9rem;
}

#wiki-fullscreen .wiki-back {
    align-self: flex-start;
    gap: 4px;
}

#wiki-fullscreen .wiki-article-rendered-body {
    padding: 18px 20px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--on-surface);
    overflow-x: auto;
}

#wiki-fullscreen .wiki-article-rendered-body p {
    margin: 0 0 12px;
    font-size: 1rem;
    line-height: 1.7;
}

#wiki-fullscreen .wiki-article-rendered-body a {
    color: color-mix(in srgb, var(--hue) 70%, #ffffff);
}

#wiki-fullscreen .wiki-article-rendered-body h2,
#wiki-fullscreen .wiki-article-rendered-body h3 {
    margin: 22px 0 8px;
    font-weight: 700;
    color: var(--on-surface);
}

#wiki-fullscreen .wiki-article-rendered-body img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

#wiki-fullscreen .wiki-fav-thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    object-fit: cover;
}

#wiki-fullscreen .wiki-fav-desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#wiki-fullscreen .remove-fav-btn {
    width: 34px;
    height: 34px;
    color: var(--ok-muted);
}

#wiki-fullscreen .wiki-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: spin 0.8s linear infinite;
}

#wiki-fullscreen .wiki-spinner--lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
    color: var(--hue);
    margin-bottom: 8px;
}

/* ==========================================================================
   Back buttons: a plain Android-style "<" chevron, no text, no circle.
   ========================================================================== */

.ok-back,
.fullscreen-app .close-fullscreen.ok-close,
.ok-round-btn[aria-label^="Back"],
#store-fullscreen #store-back-btn,
.settings-v3 .settings-back-btn,
#notes-fullscreen #notesui-back-btn,
#setup-overlay #setup-prev-btn,
.recovery-back-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    margin-left: -10px !important;
    padding: 0 !important;
    flex-shrink: 0;
    border: none !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--on-surface) !important;
    cursor: pointer;
}

.ok-back svg,
.fullscreen-app .close-fullscreen.ok-close svg,
.ok-round-btn[aria-label^="Back"] svg,
#store-fullscreen #store-back-btn svg,
.settings-v3 .settings-back-btn svg,
#notes-fullscreen #notesui-back-btn svg,
#setup-overlay #setup-prev-btn svg,
.recovery-back-btn svg {
    width: 26px !important;
    height: 26px !important;
    stroke-width: 2.4;
}

.ok-back:active,
.fullscreen-app .close-fullscreen.ok-close:active,
.ok-round-btn[aria-label^="Back"]:active,
#store-fullscreen #store-back-btn:active,
.settings-v3 .settings-back-btn:active,
#notes-fullscreen #notesui-back-btn:active,
#setup-overlay #setup-prev-btn:active,
.recovery-back-btn:active {
    background: color-mix(in srgb, var(--on-surface, #ffffff) 10%, transparent) !important;
    transform: none !important;
}

/* The old "Close" pill is now the same "<" at the top left of the header; the
   title right after it takes the free space so actions stay on the right. */
.fullscreen-app-header > .ok-close:first-child + :not(.ok-back),
.fullscreen-app-header > .ok-back + .fullscreen-app-title {
    margin-right: auto;
}

.fullscreen-app .close-fullscreen.ok-close {
    font-size: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    min-width: 0 !important;
    order: -1;
}

/* A page with its own back chevron (About pages, sub pages) shows only that one. */
.fullscreen-app-header:has(.ok-back, .settings-back-btn, [id$="-back-btn"]:not(#browser-back-btn), .ok-round-btn[aria-label^="Back"]) > .ok-close {
    display: none !important;
}

/* In the body (News reader, Wikipedia full article) it sits at the top left. */
.ok-column > .ok-back {
    align-self: flex-start;
    margin: -4px 0 -4px -10px !important;
}

/* Setup's back sits in the footer next to Continue; keep it clear of the edge. */
#setup-overlay #setup-prev-btn {
    width: 52px !important;
    height: 52px !important;
    margin-left: 0 !important;
}

/* ==========================================================================
   AMOLED: pure black and white. The colored banners, tiles and keys used
   everywhere else become black surfaces with thin borders and white icons.
   ========================================================================== */

html.theme-amoled .ok-app .ok-hero,
html.theme-amoled #store-fullscreen .store-featured,
html.theme-amoled #store-fullscreen .store-hero,
html.theme-amoled #setup-overlay .setup-hero,
html.theme-amoled #weather-fullscreen .wx-hero,
html.theme-amoled #notes-fullscreen .notesui-card {
    background: #0a0a0a !important;
    border: 1px solid #2a2a2a !important;
}

html.theme-amoled #gallery-fullscreen .gallery-hero,
html.theme-amoled #wiki-fullscreen .wiki-hero.has-cover {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, #000000 100%),
        var(--gallery-cover, var(--wiki-cover)) center / cover no-repeat,
        #0a0a0a !important;
    border: 1px solid #2a2a2a !important;
}

html.theme-amoled .ok-app .ok-hero-icon,
html.theme-amoled .ok-app .ok-hero-stat,
html.theme-amoled .ok-app .ok-pill,
html.theme-amoled #store-fullscreen .store-featured-icon,
html.theme-amoled #setup-overlay .setup-hero-icon {
    background: #1c1c1c !important;
}

html.theme-amoled .ok-app .ok-tile,
html.theme-amoled #store-fullscreen .store-icon,
html.theme-amoled #setup-overlay .setup-tile,
html.theme-amoled .settings-v3 .settings-row-icon,
html.theme-amoled #cmd-launcher-fullscreen .launcher-app-icon,
html.theme-amoled .ok-sheet-icon,
html.theme-amoled #setup-overlay .setup-brand-mark,
html.theme-amoled .store-confirm-icon {
    background: #1c1c1c !important;
    border: 1px solid #333333;
    color: #ffffff !important;
}

html.theme-amoled #notes-fullscreen .notesui-card::before,
html.theme-amoled #store-fullscreen .store-row-meta i,
html.theme-amoled #store-fullscreen .store-chip i,
html.theme-amoled #software-fullscreen .sw-note-dot,
html.theme-amoled #calendar-fullscreen .calendar-day-dots i,
html.theme-amoled .ok-app .ok-bar > span {
    background: #ffffff !important;
}

/* Selected states: white with black text. */
html.theme-amoled #store-fullscreen .store-chip.is-active,
html.theme-amoled #calendar-fullscreen .calendar-day-cell.is-selected,
html.theme-amoled #setup-overlay .setup-segment-btn[aria-checked="true"],
html.theme-amoled #setup-overlay .setup-option[aria-checked="true"] .setup-option-check,
html.theme-amoled #setup-overlay .setup-theme-check,
html.theme-amoled #calc-fullscreen .calc-btn-equals {
    background: #ffffff !important;
    color: #000000 !important;
}

html.theme-amoled #calendar-fullscreen .calendar-day-cell.is-selected .calendar-day-dots i {
    background: #000000 !important;
}

html.theme-amoled #calendar-fullscreen .calendar-day-cell.is-today {
    border-color: #ffffff !important;
    color: #ffffff !important;
}

html.theme-amoled #setup-overlay .setup-option[aria-checked="true"],
html.theme-amoled #setup-overlay .setup-theme[aria-checked="true"],
html.theme-amoled #setup-overlay .setup-input:focus {
    border-color: #ffffff !important;
}

html.theme-amoled #setup-overlay .setup-progress span.is-active {
    background: #ffffff !important;
}

html.theme-amoled #calc-fullscreen .calc-btn-op,
html.theme-amoled #calc-fullscreen .calc-btn-action {
    background: #1c1c1c !important;
    color: #ffffff !important;
    border-color: #333333 !important;
}

html.theme-amoled body.new-design .fullscreen-app > .fullscreen-app-header .fullscreen-app-title > svg:first-child {
    background: #1c1c1c !important;
    border: 1px solid #333333;
}

html.theme-amoled #wiki-fullscreen .wiki-article-rendered-body a {
    color: #ffffff !important;
    text-decoration: underline;
}

html.theme-amoled #calendar-fullscreen .calendar-day-cell.is-selected .calendar-day-number,
html.theme-amoled #calc-fullscreen .calc-btn-equals,
html.theme-amoled #store-fullscreen .store-chip.is-active,
html.theme-amoled #setup-overlay .setup-segment-btn[aria-checked="true"] {
    color: #000000 !important;
}

/* Storage */
#storage-fullscreen .storage-big {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 2px;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

#storage-fullscreen .storage-big span {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.8;
}

#storage-fullscreen .storage-bar {
    display: flex;
    gap: 3px;
    width: 100%;
    height: 12px;
    margin-top: 14px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

#storage-fullscreen .storage-bar span {
    height: 100%;
    border-radius: 999px;
}

#storage-fullscreen .storage-legend {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#storage-fullscreen .storage-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#storage-fullscreen .storage-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

#storage-fullscreen .storage-legend strong {
    font-size: 0.82rem;
}

#storage-fullscreen .storage-item + .storage-item {
    border-top: 1px solid var(--ok-line);
}

#storage-fullscreen .storage-chev {
    transition: transform 0.2s ease;
}

#storage-fullscreen .storage-item.is-open .storage-chev {
    transform: rotate(180deg);
}

#storage-fullscreen .storage-item-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 0 16px 14px 64px;
}

#storage-fullscreen .storage-item-detail p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--ok-muted);
}

html.theme-amoled #storage-fullscreen .storage-bar span,
html.theme-amoled #storage-fullscreen .storage-legend i {
    background: #ffffff !important;
}

/* ---------- Menu sheet (okMenu) and sheet text fields ---------- */

.ok-menu-card {
    padding: 14px;
}

#orbitos-custom-fullscreen-picker .ok-menu-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: min(76dvh, 640px);
    min-height: 0;
    overflow: hidden;
}

#orbitos-custom-fullscreen-picker .ok-menu-list {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#orbitos-custom-fullscreen-picker .ok-menu-item {
    flex: 0 0 auto;
    min-height: 46px;
}

.ok-menu-title {
    padding: 4px 8px 10px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--on-surface, #ffffff) 60%, transparent);
}

.ok-menu-list {
    display: flex;
    flex-direction: column;
}

.ok-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 10px 8px;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: var(--on-surface);
    font-family: var(--font-main);
    text-align: left;
    cursor: pointer;
}

.ok-menu-item:active {
    background: color-mix(in srgb, var(--on-surface, #ffffff) 7%, transparent);
}

.ok-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 11px;
    color: #ffffff;
}

.ok-menu-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ok-menu-label {
    font-size: 0.95rem;
    font-weight: 600;
}

.ok-menu-item.is-danger .ok-menu-label {
    color: var(--error, #e5534b);
}

.ok-menu-sub {
    font-size: 0.78rem;
    color: color-mix(in srgb, var(--on-surface, #ffffff) 58%, transparent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ok-sheet-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: -6px 0 18px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--on-surface, #ffffff) 22%, transparent) !important;
    background: var(--background, #05080c) !important;
    color: var(--on-surface);
    font: 0.92rem/1.45 var(--font-main);
    outline: none;
    box-shadow: none !important;
}

textarea.ok-sheet-field {
    min-height: 110px;
    resize: vertical;
}

.ok-sheet-field:focus {
    border-color: color-mix(in srgb, var(--on-surface, #ffffff) 45%, transparent) !important;
}

html.theme-amoled .ok-menu-icon {
    background: #1c1c1c !important;
    border: 1px solid #2a2a2a;
}

html.theme-amoled .ok-sheet-field {
    background: #000000 !important;
    border-color: #2a2a2a !important;
}

/* ---------- Reader (RSS) ---------- */

#rss-fullscreen .rss-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -16px;
    padding: 0 16px 2px;
}

#rss-fullscreen .rss-chips::-webkit-scrollbar {
    display: none;
}

#rss-fullscreen .rss-hero {
    width: 100%;
    min-height: 180px;
    justify-content: flex-end;
    border: none;
    text-align: left;
    font-family: var(--font-main);
    cursor: pointer;
}

#rss-fullscreen .rss-hero.has-cover {
    min-height: 240px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.8) 100%),
        var(--rss-cover) center / cover no-repeat,
        var(--hue);
}

#rss-fullscreen .rss-hero .ok-hero-title {
    font-size: 1.35rem;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#rss-fullscreen .rss-hero .ok-hero-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#rss-fullscreen .rss-article-card.ok-row {
    align-items: flex-start;
}

#rss-fullscreen .rss-row-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--on-surface);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#rss-fullscreen .rss-thumb {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: var(--ok-line);
}

#rss-fullscreen .rss-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#rss-fullscreen .rss-skeleton-hero {
    min-height: 200px;
    opacity: 0.35;
    animation: rssPulse 1.2s ease-in-out infinite alternate;
}

#rss-fullscreen .rss-skeleton-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#rss-fullscreen .rss-skeleton-row span {
    height: 12px;
    width: 85%;
    border-radius: 6px;
    background: var(--ok-line-strong);
    animation: rssPulse 1.2s ease-in-out infinite alternate;
}

#rss-fullscreen .rss-skeleton-row span + span {
    width: 40%;
}

@keyframes rssPulse {
    from { opacity: 0.35; }
    to { opacity: 0.8; }
}

#rss-fullscreen .rss-reader {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#rss-fullscreen .rss-reader-source {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hue);
}

#rss-fullscreen .rss-reader-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--on-surface);
}

#rss-fullscreen .rss-reader-meta {
    font-size: 0.82rem;
    color: var(--ok-muted);
}

#rss-fullscreen .rss-reader-image {
    margin: 6px 0;
    border-radius: 22px;
    overflow: hidden;
    max-height: 320px;
}

#rss-fullscreen .rss-reader-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#rss-fullscreen .rss-article-rendered-body {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--on-surface);
    overflow-wrap: anywhere;
}

#rss-fullscreen .rss-article-rendered-body img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

#rss-fullscreen .rss-article-rendered-body a {
    color: var(--hue);
}

#rss-fullscreen .rss-fetching {
    font-size: 0.82rem;
    color: var(--ok-muted);
}

#rss-fullscreen .rss-feed-row {
    cursor: pointer;
}

#rss-fullscreen .rss-feed-url {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#rss-fullscreen .rss-feed-on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #10b981;
    color: #ffffff;
}

#rss-fullscreen .rss-remove-feed-btn {
    width: 36px;
    height: 36px;
    color: var(--ok-muted);
}

#rss-fullscreen .rss-add-form {
    display: flex;
    gap: 8px;
    padding: 10px;
}

#rss-fullscreen .rss-add-error {
    margin: -4px 4px 0;
    font-size: 0.85rem;
    color: var(--error, #e5534b);
}

#rss-fullscreen .rss-add-hint {
    margin: 0 4px;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ok-muted);
}

html.theme-amoled #rss-fullscreen .rss-hero.has-cover {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, #000000 100%),
        var(--rss-cover) center / cover no-repeat,
        #0a0a0a !important;
    border: 1px solid #2a2a2a !important;
}

html.theme-amoled #rss-fullscreen .rss-reader-source {
    color: #ffffff;
}

/* Benchmark 2.0: speed chips and the progress bar while testing. */
.benchmark-sheet .benchmark-speed {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c) 20%, transparent);
    color: var(--c) !important;
    font-size: 0.72rem !important;
    font-weight: 700;
}

#benchmark-fullscreen .benchmark-progress {
    width: 100%;
    margin-top: 14px;
    background: rgba(0, 0, 0, 0.22) !important;
}

#benchmark-fullscreen .benchmark-progress > span {
    background: #ffffff !important;
    transition: width 0.25s ease;
}

html.theme-amoled .benchmark-sheet .benchmark-speed {
    background: #1c1c1c;
    color: #ffffff !important;
}

/* Pop-ups: the dimmed screen only fades; the card grows in from the middle. */
@keyframes okDimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes okDimOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes okCardIn { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }

.ok-sheet .ok-sheet-card,
#reset-modal .ok-sheet-card {
    animation: okCardIn 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}

.no-animations .ok-sheet,
.no-animations .ok-sheet .ok-sheet-card {
    animation: none !important;
}

/* ---------- Colors follow the theme (H209B) ----------
   Every app keeps its own color on the Default theme. On a colored theme the
   banners, icon tiles and buttons lean into the theme's accent, so Forest turns
   the orange bits green instead of clashing. Warning red stays red. */

[style*="--app-hue"] {
    --hue: var(--app-hue);
}

html:is(.theme-solar-flare, .theme-nebula, .theme-matrix, .theme-arctic, .theme-cyberpunk, .theme-oceanic, .theme-forest, .theme-sunset, .theme-monokai, .theme-dracula, .theme-nord, .theme-gruvbox, .theme-crimson, .theme-gold, .theme-glassmorphism, .theme-glass, .theme-glass-static, .theme-glowmorphism, .theme-fluent-ui) :is(.ok-app, [style*="--app-hue"]) {
    --hue: color-mix(in oklch, var(--app-hue, #6366f1) 30%, var(--accent-primary)) !important;
}

html:is(.theme-solar-flare, .theme-nebula, .theme-matrix, .theme-arctic, .theme-cyberpunk, .theme-oceanic, .theme-forest, .theme-sunset, .theme-monokai, .theme-dracula, .theme-nord, .theme-gruvbox, .theme-crimson, .theme-gold, .theme-glassmorphism, .theme-glass, .theme-glass-static, .theme-glowmorphism, .theme-fluent-ui) [style*="--tile"] {
    background: color-mix(in oklch, var(--tile) 30%, var(--accent-primary)) !important;
}

html:is(.theme-solar-flare, .theme-nebula, .theme-matrix, .theme-arctic, .theme-cyberpunk, .theme-oceanic, .theme-forest, .theme-sunset, .theme-monokai, .theme-dracula, .theme-nord, .theme-gruvbox, .theme-crimson, .theme-gold, .theme-glassmorphism, .theme-glass, .theme-glass-static, .theme-glowmorphism, .theme-fluent-ui) body.new-design .fullscreen-app > .fullscreen-app-header .fullscreen-app-title > svg:first-child {
    background: color-mix(in oklch, var(--app-hue, var(--accent-primary)) 30%, var(--accent-primary));
}

/* ---------- Apps that aren't installed yet (launcher) ---------- */
#cmd-launcher-fullscreen .is-missing .launcher-app-icon,
#cmd-launcher-fullscreen .is-missing .ok-tile {
    filter: saturate(0.35);
    opacity: 0.7;
}

#cmd-launcher-fullscreen .launcher-app.is-missing .launcher-app-label,
#cmd-launcher-fullscreen .launcher-row.is-missing .ok-row-title {
    opacity: 0.65;
}

#cmd-launcher-fullscreen .launcher-app-icon {
    position: relative;
}

#cmd-launcher-fullscreen .launcher-get {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ok-ink, #ffffff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v11'/%3E%3Cpath d='m7 12 5 5 5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
    border: 2px solid var(--background, #05080c);
    box-sizing: border-box;
    filter: none;
}

#cmd-launcher-fullscreen .launcher-row.is-missing .launcher-cmd {
    font-family: var(--font-main);
    font-size: 0.72rem;
}

/* Safe Mode note, used where something is switched off */
.ok-safe-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
    background: color-mix(in srgb, #f59e0b 12%, var(--surface-color, #0d1117));
    color: var(--on-surface);
    font-size: 0.86rem;
    line-height: 1.45;
}
.ok-safe-note svg { flex-shrink: 0; color: #f59e0b; margin-top: 1px; }
html.theme-amoled .ok-safe-note { background: #000000; }

/* Long notices (Classic apps retirement) keep their paragraphs and scroll. */
.ok-sheet-card .classic-retire-text {
    white-space: pre-line;
    text-align: left;
    max-height: 48dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}