@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('assets/inter-latin.woff2') format('woff2');
}

.app-notices, .app-status-bar {
    max-width: 56rem;
    margin: 0.65rem auto;
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
}
.app-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
}
.app-notice strong { display: block; font-size: 0.8rem; font-weight: 600; }
.app-notice p, .install-dialog p, .install-dialog li {
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--subtle-text);
}
.app-notice-actions { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.app-notice button, .app-install-link {
    min-height: 44px;
    padding: 0.45rem 0.65rem;
    border-radius: 0.45rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--subtle-text);
}
.app-notice .app-primary, .install-dialog .app-primary {
    color: var(--accent-text);
    background: var(--accent-bg);
}
.app-notice button:focus-visible, .app-install-link:focus-visible {
    outline: 2px solid var(--accent-bg);
    outline-offset: 2px;
}
.app-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0 0.5rem max(0.5rem, env(safe-area-inset-bottom));
}
.app-status { font-size: 0.65rem; line-height: 1.6; color: var(--subtle-text); }
.app-status[data-warning="true"] { color: #92400e; }
html.dark .app-status[data-warning="true"] { color: #fcd34d; }
.app-install-link { flex-shrink: 0; color: var(--accent-bg); }
.install-dialog {
    width: min(26rem, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    margin: auto;
    padding: 1rem;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 0.8rem;
    background: var(--card-bg);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    box-shadow: 0 16px 48px var(--shadow-color);
}
.install-dialog::backdrop { background: rgb(0 0 0 / 50%); }
.install-dialog .history-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.install-dialog h2 { font-size: 1rem; font-weight: 700; }
.install-dialog .history-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 0.5rem; }
.install-dialog .history-close:focus-visible { outline: 2px solid var(--accent-bg); outline-offset: 2px; }
.install-dialog .history-close svg { width: 1.1rem; height: 1.1rem; }
.install-dialog ol { list-style: decimal; padding-left: 1.2rem; margin: 0.75rem 0; }
.install-dialog .install-note { font-size: 0.7rem; }
.app-notice[hidden], .app-install-link[hidden] { display: none; }
@media (max-width: 600px) {
    .app-notice { flex-wrap: wrap; }
    .app-notice-actions { margin-left: auto; }
}