/* Quick window ("compass", quickModal.js) — moved out of extrastyles.css, which imports it.
   Also loaded on its own by the dictionary (ddg-ui dg-site.js); body.dark-mode is its dark theme. */
/* =========================================
   QUICK MODAL STYLES (Оптимизировано)
   ========================================= */
.quick-overlay-element {
    position: fixed; top: -20vh; left: -20vw; width: 140vw; height: 140vh;
    z-index: 9999; background-color: rgba(0, 0, 0, 0.7);
    opacity: 0; visibility: hidden; 
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.quick-overlay-element.open {
    opacity: 1; visibility: visible;
}

.quick-modal-container {
    position: fixed; top: 50%; left: 50%;
    /* No scale() in the open transition: Android WebView re-rasterises the window when the 0.95 -> 1
       scale ends (~0.3 s) and painted the row icons with other icons on screen — the subscribe bell
       turned into the clear-all trash can or the rename pencil, the empty-history clock into a pencil
       (owner's screen recording, 2026-10-01, app build 427). Slide + fade instead. */
    transform: translate(-50%, calc(-50% + 12px));
    z-index: 10000; opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    width: 95%; max-width: 600px; max-height: calc(90 * var(--dg-vh, 1vh));
    display: flex; flex-direction: column;
}
.quick-modal-container.open {
    opacity: 1; visibility: visible;
    transform: translate(-50%, -50%);
}

/* Автоматическая адаптация под тему сайта */
.quick-modal-content-wrapper {
    background-color: #ffffff; color: #212529;
    padding: 1.5rem; width: 100%; border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3); font-family: sans-serif; position: relative;
}
body.dark .quick-modal-content-wrapper, body.dark-mode .quick-modal-content-wrapper {
    background-color: #1a252f; color: #ffffff;
}

/* Кнопка закрытия */
.quick-close-btn {
    position: absolute; top: 12px; right: 12px; background-color: #9e1c19; color: #fff;
    border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 1.1rem;
    font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 10;
}

/* Поиск */
.quick-search-form { display: flex; gap: 8px; margin-bottom: 1rem; margin-top: 10px; padding-right: 3.5rem; }
.quick-search-input {
    flex-grow: 1; border: 1px solid #ccc; background-color: #f8f9fa;
    color: #212529; padding: 10px 14px; border-radius: 20px; font-size: 0.95rem; outline: none;
}
body.dark .quick-search-input, body.dark-mode .quick-search-input { border-color: #444; background-color: #2c3a47; color: #ffffff; }

.quick-search-btn {
    background-color: #025242; color: white; border: none; width: 40px; height: 40px;
    border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* Вкладки */
.quick-tabs-wrapper { 
    display: flex; justify-content: space-between; align-items: center; 
    margin-bottom: 15px; border-bottom: 1px solid #ccc; 
}
body.dark .quick-tabs-wrapper, body.dark-mode .quick-tabs-wrapper { border-bottom-color: #444; }

.quick-tabs { display: flex; gap: 5px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.quick-tabs::-webkit-scrollbar { display: none; }
.quick-tab-btn { 
    background: none; border: none; color: inherit; 
    padding: 8px 5px; cursor: pointer; opacity: 0.6; font-size: 1.05rem;
    border-bottom: 3px solid transparent; transition: all 0.2s;
}
.quick-tab-btn:hover { opacity: 1; }
.quick-tab-btn.active { opacity: 1; border-bottom: 3px solid #859900; font-weight: bold; }

/* ИЗМЕНЕНО: Добавлены гибкие ограничители высоты (max-height и min), чтобы в пейзаже окно ужималось, а в портрете оставалось 55vh */
.quick-tab-content { display: none; height: calc(55 * var(--dg-vh, 1vh)); min-height: min(420px, calc(calc(90 * var(--dg-vh, 1vh)) - 170px)); max-height: calc(calc(90 * var(--dg-vh, 1vh)) - 170px); overflow-y: auto; box-sizing: border-box; }
.quick-tab-content.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Индивидуальные настройки вкладок */
#tab-fav, #tab-4as { padding-left: 1.5rem; padding-right: 1.5rem; }

/* ИЗМЕНЕНО: Те же гибкие ограничители для iframe, вместо жестких 450px */
#tab-dpd, #tab-memo { padding-left: 0; padding-right: 0; height: calc(60 * var(--dg-vh, 1vh)); min-height: min(450px, calc(calc(90 * var(--dg-vh, 1vh)) - 170px)); max-height: calc(calc(90 * var(--dg-vh, 1vh)) - 170px); }
.quick-iframe { width: 100%; height: 100%; border: none; border-radius: 8px; background: transparent; }

/* Списки Истории и Избранного */
/* Избранное: расширяется на всю длину, используя общий скролл вкладки */
#quick-favorites-container { 
    max-height: none !important; 
    overflow: visible !important; 
}

#quick-history-container { max-height: 520px; overflow-y: hidden; padding-right: 5px; }


.header-title { cursor: pointer; transition: color 0.2s; display: flex; align-items: center; }
.header-title::before { content: '▼'; display: inline-block; margin-right: 6px; font-size: 0.75rem; transition: transform 0.2s; }
.header-title.collapsed::before { transform: rotate(-90deg); }

.compact-list { list-style: none; padding: 0; margin: 0; }
.compact-list li { padding: 8px 0; border-bottom: 1px dashed #ccc; display: flex; align-items: center; justify-content: space-between; }
body.dark .compact-list li, body.dark-mode .compact-list li { border-bottom-color: #444; }
.compact-list li:last-child { border-bottom: none; }
.compact-list a { color: inherit; text-decoration: none; flex-grow: 1; margin: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-list a:hover { color: #859900; }

.fav-star-icon { color: #f39c12; font-size: 1.4rem; }
.toggle-fav-btn-hist { color: #888; font-size: 1.4rem; }
.toggle-fav-btn-hist:hover { color: #f39c12; }
.hist-icon { display: flex; align-items: center; margin-right: 5px; }
.hist-icon img { opacity: 0.6; }
body.dark .hist-icon img, body.dark-mode .hist-icon img { filter: invert(0.7); opacity: 1; }
.item-date { font-size: 0.75rem; color: #888; min-width: 65px; text-align: right; }

.hidden-delete-fav, 
.hidden-delete-hist {
    cursor: default; /* Обычная стрелочка, как над интерфейсом */
    user-select: none; /* Запрещает выделять текст даты двойным кликом, чтобы клики работали чище */
}

.action-btn { margin-left: 10px; cursor: pointer; opacity: 0.8; transition: opacity 0.2s, color 0.2s; padding: 0 4px; user-select: none; }
.action-btn:hover { opacity: 1; }
.remove-fav-btn { font-size: 1.2rem; }
.remove-fav-btn:hover { color: #dc322f; }
.sortable-header { margin-bottom: 10px; margin-top: 25px; color: #888; font-size: 0.85rem; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; user-select: none; }
.sort-trigger { color: #859900; font-weight: bold; cursor: pointer; }

/* Колонки ссылок 4as */
.quick-links-container { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: space-between; }
.quick-links-column { flex: 1 1 45%; min-width: 200px; }
.quick-links-column p { font-weight: bold; margin-bottom: 0.5rem; }
.quick-links-column ul { padding-left: 1rem; font-size: 0.9rem; margin-top: 0; }
.quick-links-column a { text-decoration: none; }
.quick-links-column a:hover { text-decoration: underline; }
.link-primary { color: #859900; }
.link-success { color: #2aa198; }
.link-warning { color: #cb4b16; }
.link-danger { color: #dc322f; }

@media (max-width: 500px) {
  .quick-modal-container { width: 94% !important; height: 90% !important; }
  .quick-modal-content-wrapper { padding: 1rem 0 0 0 !important; }
  #tab-fav, #tab-4as { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
  .quick-search-form { padding-left: 1.2rem !important; padding-right: 3.5rem !important; }
}

/* Сообщения о пустых списках: иконка + текст вместо голой курсивной строки */
.quick-empty-state {
    display: flex; align-items: center; gap: 10px; padding: 14px 2px; color: #999;
}
.quick-empty-state svg { flex: none; opacity: 0.55; }
.quick-empty-state p { font-size: 0.9rem; margin: 0; line-height: 1.4; }
/* Вариант на всю вкладку (подписки — единственный контент вкладки) — центрируем по высоте */
.quick-empty-state.full {
    flex-direction: column; justify-content: center; text-align: center; gap: 14px;
    height: 100%; min-height: 220px;
}
.quick-empty-state.full svg { width: 40px; height: 40px; }
body.dark .quick-empty-state, body.dark-mode .quick-empty-state { color: #777; }

/* Блок ссылки "Вся история" */
.quick-all-history-wrapper {
    text-align: right; margin-top: 10px;
}
.quick-all-history-link {
    font-size: 0.85rem; color: #859900; text-decoration: none;
}
.quick-all-history-link:hover {
    text-decoration: underline;
}

/* =========================================
end   QUICK MODAL STYLES (Оптимизировано) end Css for settings.js 
   ========================================= */

/* Issue #4: only shown when this window runs on another origin (the dictionary subdomain), where
   the site's history and favorites are not reachable. */
.quick-storage-note {
    margin: 6px 4px 8px;
    font-size: 12px;
    line-height: 1.35;
    opacity: .72;
    text-align: center;
}

/* =========================================
   Redesign (ТЗ §7-8, reference docs/D-refresh.html #multi). Site tokens (--dg-*) with fallbacks:
   the dictionary loads this file without home.css, so every var() carries its light value.
   ========================================= */
.quick-modal-container { max-width: 640px; height: min(640px, calc(calc(100 * var(--dg-vh, 1vh)) - 48px)); max-height: none; }
.quick-modal-content-wrapper {
    height: 100%; display: flex; flex-direction: column; padding: 16px 0 0; overflow: hidden;
    background: var(--dg-surface, #fff); color: var(--dg-text, #1b1d19);
    border-radius: 16px; font-family: var(--dg-font, inherit);
}
.quick-modal-content-wrapper button, .quick-modal-content-wrapper input { font-family: inherit; }
.quick-modal-content-wrapper b { color: inherit; }
body.dark .quick-modal-content-wrapper, body.dark-mode .quick-modal-content-wrapper { background: var(--dg-surface, #1a252f); color: var(--dg-text, #fff); }
.quick-close-btn {
    top: 22px; right: 16px; width: 32px; height: 32px; background: none; color: var(--dg-text-2, #5c6058);
    box-shadow: none; font-size: 1.5rem; font-weight: 400; border-radius: 50%;
}
.quick-close-btn:hover { background: var(--dg-surface-hover, #f5f4f1); color: var(--dg-text, #1b1d19); }

/* Search field: the header's shell — grey pill, ×, sliders, magnifier inside. */
.quick-search-form {
    margin: 0 60px 10px 16px; padding: 5px 6px 5px 16px; gap: 4px; align-items: center;
    background: var(--dg-surface-hover, #f5f4f1); border: 1px solid var(--dg-border, #e7e5de); border-radius: 28px;
}
.quick-search-form:focus-within { border-color: var(--dg-border-strong, #d7d4c9); box-shadow: 0 0 0 3px var(--dg-accent-bg, #dff3ec); }
.quick-search-input, body.dark .quick-search-input, body.dark-mode .quick-search-input {
    border: 0; background: none; padding: 6px 0; border-radius: 0; color: inherit; min-width: 0; font-size: 1rem;
}
.quick-search-input::-webkit-search-cancel-button { display: none; }
.quick-search-clear { flex: none; border: 0; background: none; color: var(--dg-text-muted, #6e716a); font-size: 1.3rem; line-height: 1; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; }
.quick-search-clear:hover { color: var(--dg-text, #1b1d19); }
.quick-search-clear[hidden] { display: none; }
.quick-search-form .dg-qs-btn { flex: none; }
.quick-search-btn {
    width: 36px; height: 36px; background: var(--dg-surface, #fff); color: var(--dg-text, #1b1d19);
    border: 1px solid var(--dg-border-strong, #d7d4c9);
}
.quick-search-btn:hover { background: var(--dg-surface-active, #eae8e2); }

/* Tabs: icons, scroll horizontally; actions on the right stay put. */
.quick-tabs-wrapper { margin: 0; padding: 0 12px; border-bottom: 1px solid var(--dg-border, #e7e5de); flex: none; }
.quick-tabs { flex: 1; min-width: 0; gap: 2px; }
.quick-tab-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 0.92rem; opacity: 1;
    color: var(--dg-text-2, #5c6058); border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.quick-tab-btn:hover { color: var(--dg-text, #1b1d19); }
.quick-tab-btn.active { color: var(--dg-text, #1b1d19); font-weight: 600; border-bottom: 2px solid var(--dg-accent, #149c7c); }
.quick-tab-btn.active .quick-tab-ic { color: var(--dg-accent, #149c7c); }
.quick-tab-count { font-size: 0.72rem; font-weight: 600; min-width: 18px; padding: 1px 5px; border-radius: 9px; background: var(--dg-accent-bg, #dff3ec); color: var(--dg-accent-ink, #0f7c63); text-align: center; }
.quick-tab-count[hidden] { display: none; }
.quick-actions-right { flex: none; border-left: 1px solid var(--dg-border, #e7e5de); padding-left: 6px; }
.quick-actions-right img { width: 17px; height: 17px; opacity: .65; }
body.dark .quick-actions-right img, body.dark-mode .quick-actions-right img { filter: invert(.85); }

/* Content: fills the fixed-height window, scrolls inside; tab change slides in from its side. */
.quick-tab-content, #tab-dpd, #tab-memo { height: auto; min-height: 0; max-height: none; flex: 1 1 auto; overflow-y: auto; }
#tab-fav, #tab-4as, #tab-subs { padding: 4px 20px 16px; }
#tab-dpd, #tab-memo { padding: 0; }
.quick-tab-content.active { animation: none; }
.quick-tab-content.quick-from-right { animation: quickSlideR 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.quick-tab-content.quick-from-left { animation: quickSlideL 220ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes quickSlideR { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes quickSlideL { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .quick-tab-content.quick-from-right, .quick-tab-content.quick-from-left { animation: fadeIn 150ms ease; }
}

/* History: quiet grey stars, one green sort pill, "All history →" on the right. */
.sortable-header { margin: 18px 0 6px; font-size: 0.75rem; letter-spacing: .06em; font-weight: 700; color: var(--dg-text-2, #5c6058); }
.header-title::before { content: '▾'; font-size: 0.8rem; }
.header-title.collapsed::before { transform: rotate(-90deg); }
.sort-trigger { color: var(--dg-accent-ink, #0f7c63); font-size: 0.75rem; text-transform: none; letter-spacing: 0; padding: 2px 8px; border-radius: 10px; background: var(--dg-accent-bg, #dff3ec); }
.compact-list li { padding: 9px 0; border-bottom: 1px solid var(--dg-border, #e7e5de); gap: 4px; }
body.dark .compact-list li, body.dark-mode .compact-list li { border-bottom-color: var(--dg-border, #444); }
.compact-list a { color: var(--dg-link, #3434be); margin: 0 8px; }
.compact-list a:hover { color: var(--dg-accent-ink, #0f7c63); }
/* Stars: Font Awesome solid/regular (QS_ICON.star / starO), about the size of the history clock beside
   them. A favorite's star is filled and coloured; in the history a filled grey star = already in
   favorites, an outline = not (owner, 2026-10-01). */
.fav-star-icon { display: inline-flex; color: #f39c12; }
.toggle-fav-btn-hist { display: inline-flex; color: var(--dg-text-muted, #9a9c95); }
.toggle-fav-btn-hist:hover { color: var(--dg-text, #1b1d19); }
.qs-star { width: 18px; height: 16px; display: block; }
.quick-all-history-wrapper { text-align: right; margin: 12px 0 4px; }
.quick-all-history-link { color: var(--dg-accent-ink, #0f7c63); }

/* 4AS: flat grey cards, "1st priority" soft green, code + Pali name. */
.quick-4as { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; }
.quick-4as-card { background: var(--dg-surface-hover, #f5f4f1); border-radius: 12px; padding: 12px 14px; }
.quick-4as-first { grid-column: 1 / -1; background: var(--dg-accent-bg, #dff3ec); }
.quick-4as-card p { margin: 0 0 6px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.quick-4as-n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--dg-border-strong, #d7d4c9); font-size: 0.7rem; font-weight: 600; }
.quick-4as-first .quick-4as-n { background: var(--dg-accent-dark, #0f7c63); border-color: transparent; color: #fff; }
.quick-4as-card ul { list-style: none; padding: 0; margin: 0; font-size: 0.9rem; }
.quick-4as-card li { display: flex; gap: 12px; padding: 4px 0; }
.quick-4as-card li a { flex: none; width: 70px; font-weight: 600; color: var(--dg-link, #3434be); text-decoration: none; }
.quick-4as-card li a:hover { text-decoration: underline; }
.quick-4as-card li span { color: var(--dg-text-2, #5c6058); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) { .quick-4as { grid-template-columns: 1fr; } }

/* Subscriptions list */
.quick-subs-new { border: 0; background: none; color: var(--dg-accent-ink, #0f7c63); font-size: 0.8rem; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; }
.quick-sub { align-items: center; }
.quick-sub-ic { color: var(--dg-accent-ink, #0f7c63); display: inline-flex; flex: none; }
.quick-sub.paused .quick-sub-ic, .quick-sub.paused .quick-sub-main { opacity: .55; }
.quick-sub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; margin: 0 8px; }
.quick-sub-main a { margin: 0; }
.quick-sub-bar { display: block; height: 3px; border-radius: 2px; background: var(--dg-border, #e7e5de); overflow: hidden; }
.quick-sub-bar i { display: block; height: 100%; background: var(--dg-accent, #149c7c); }
.quick-sub-meta { font-size: 0.75rem; color: var(--dg-text-muted, #6e716a); }
.quick-sub .action-btn { border: 0; background: none; color: var(--dg-text-2, #5c6058); margin: 0; padding: 4px 6px; border-radius: 6px; font-size: 1.05rem; line-height: 1; display: inline-flex; }
.quick-sub .action-btn:hover { background: var(--dg-surface-hover, #f5f4f1); color: var(--dg-text, #1b1d19); }

/* Subscription form: replaces the window's content (search, tabs, lists). */
.quick-form-open > .quick-search-form, .quick-form-open > .quick-tabs-wrapper, .quick-form-open > .quick-tab-content,
.quick-form-open > .quick-close-btn, .quick-form-open > .quick-storage-note { display: none !important; }
.quick-subform { flex: 1; min-height: 0; display: flex; flex-direction: column; animation: quickSlideR 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.quick-subform[hidden] { display: none; }
.quick-subform-head { display: flex; align-items: center; gap: 10px; padding: 2px 16px 12px; border-bottom: 1px solid var(--dg-border, #e7e5de); }
.quick-subform-head b { flex: 1; font-size: 1.05rem; }
.quick-subform-head button { border: 0; background: none; color: var(--dg-text-2, #5c6058); font-size: 1.3rem; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.quick-subform-head button:hover { background: var(--dg-surface-hover, #f5f4f1); color: var(--dg-text, #1b1d19); }
.quick-subform-body { overflow-y: auto; padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.quick-sublabel { margin: 8px 0 -2px; font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dg-text-2, #5c6058); }
.quick-seg { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--dg-surface-hover, #f5f4f1); }
.quick-seg button { flex: 1; border: 0; background: none; padding: 8px 10px; border-radius: 7px; font: inherit; font-size: 0.88rem; color: var(--dg-text-2, #5c6058); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.quick-seg button.on { background: var(--dg-accent, #149c7c); color: #fff; }
.quick-seg-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .quick-seg-grid { grid-template-columns: 1fr 1fr; } }
.quick-subfield { display: flex; align-items: center; border: 1px solid var(--dg-border-strong, #d7d4c9); border-radius: 10px; background: var(--dg-surface, #fff); padding-right: 4px; }
.quick-subfield:focus-within { box-shadow: 0 0 0 3px var(--dg-accent-bg, #dff3ec); }
.quick-subinput { flex: 1; min-width: 0; border: 0; background: none; padding: 10px 12px; font: inherit; color: inherit; outline: none; }
.quick-subinput-clear { border: 0; background: none; color: var(--dg-text-muted, #6e716a); font-size: 1.2rem; width: 30px; height: 30px; cursor: pointer; }
.quick-subinput-clear[hidden] { display: none; }
.quick-subhint { margin: -4px 0 0; font-size: 0.8rem; color: var(--dg-text-muted, #6e716a); }
.quick-sub-markread { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--dg-surface-hover, #f5f4f1); color: var(--dg-text, #1b1d19); text-decoration: none; font-size: 0.9rem; }
.quick-sub-markread svg { color: var(--dg-accent-ink, #0f7c63); }
.quick-sub-markread .quick-sub-arrow { margin-left: auto; color: var(--dg-text-muted, #6e716a); }
.quick-subscopes { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-subscopes button { border: 1px solid var(--dg-border-strong, #d7d4c9); background: var(--dg-surface, #fff); color: inherit; border-radius: 999px; padding: 6px 12px; font-size: 0.88rem; cursor: pointer; }
.quick-subscopes button.on { background: var(--dg-accent, #149c7c); border-color: var(--dg-accent, #149c7c); color: #fff; }
.quick-subnote { padding: 10px 12px; border-radius: 10px; background: var(--dg-accent-bg, #dff3ec); font-size: 0.85rem; }
.quick-subnote a { color: var(--dg-accent-ink, #0f7c63); font-weight: 600; }
.quick-subtimes { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-subtimes input { border: 1px solid var(--dg-border-strong, #d7d4c9); border-radius: 8px; padding: 6px 8px; background: var(--dg-surface, #fff); color: inherit; font: inherit; }
.quick-subcount { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; }
.quick-subcount span { flex: 1; }
.quick-subcount button, .quick-subwd button { border: 1px solid var(--dg-border-strong, #d7d4c9); background: var(--dg-surface, #fff); color: inherit; border-radius: 8px; min-width: 32px; height: 32px; cursor: pointer; font: inherit; }
.quick-subwd { display: flex; gap: 6px; flex-wrap: wrap; }
.quick-subwd button.on { background: var(--dg-accent, #149c7c); border-color: var(--dg-accent, #149c7c); color: #fff; }
.quick-subsave { align-self: flex-start; margin-top: 8px; border: 0; border-radius: 10px; padding: 11px 22px; background: var(--dg-accent, #149c7c); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.quick-subsave:hover { background: color-mix(in srgb, var(--dg-accent, #149c7c) 86%, #000); }
.quick-subsave:disabled { opacity: .6; cursor: progress; }
.quick-suberr { margin: 0; color: #c0392b; font-size: 0.85rem; }
.quick-suberr[hidden] { display: none; }

@media (max-width: 500px) {
  .quick-modal-container { height: calc(calc(100 * var(--dg-vh, 1vh)) - 24px) !important; }
  .quick-search-form { margin: 0 52px 10px 12px !important; padding: 4px 4px 4px 12px !important; }
  #tab-fav, #tab-4as, #tab-subs { padding-left: 14px !important; padding-right: 14px !important; }
  .quick-tab-btn { padding: 10px 8px; }
}
.fav-bell-btn { display: inline-flex; color: var(--dg-text-muted, #9a9c95); }
.fav-bell-btn.on { color: var(--dg-accent-ink, #0f7c63); }
.quick-tab-plus { margin: 0 -2px; opacity: .6; font-weight: 400; }
/* "Random" switch on the "What to read" row: on — pick from a set of texts, off — word or place. */
.quick-subrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.quick-subrow .quick-sublabel { margin: 0; }
.quick-switch { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 0.88rem; color: var(--dg-text-2, #5c6058); cursor: pointer; }
/* Выключенная дорожка — не --dg-border-strong: в тёмной теме #3B3B3B на поверхности #191919
   не видно вовсе (owner, 2026-10-02). Серый берём от --dg-text-muted, он читается в обеих темах. */
.quick-switch-track { position: relative; width: 34px; height: 20px; border-radius: 10px; background: color-mix(in srgb, var(--dg-text-muted, #6e716a) 40%, var(--dg-surface, #fff)); transition: background-color 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.quick-switch-track i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1); }
.quick-switch[aria-checked="true"] { color: var(--dg-text, #1b1d19); }
.quick-switch[aria-checked="true"] .quick-switch-track { background: var(--dg-accent, #149c7c); }
.quick-switch[aria-checked="true"] .quick-switch-track i { transform: translateX(14px); }
.quick-switch:focus-visible { outline: 2px solid var(--dg-accent, #149c7c); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .quick-switch-track, .quick-switch-track i { transition: none; } }
.quick-sub-markread, .quick-sub-markread:hover { text-decoration: none; }
.quick-modal-content-wrapper a.quick-sub-markread { color: var(--dg-text, #1b1d19); }
/* Links in the window = the results table's link colour (owner: "не такие как везде, слишком
   сиреневые"): the site's --dg-tblue token. The "→" action links stay green. */
.quick-modal-content-wrapper .compact-list a, .quick-modal-content-wrapper .quick-4as-card li a { color: var(--dg-tblue, #3434be); }
.quick-modal-content-wrapper .quick-subhint a { color: var(--dg-accent-ink, #0f7c63); text-decoration: none; }
.quick-seg button .quick-seg-ic { vertical-align: -3px; margin-right: 6px; }
.quick-modal-content-wrapper a.quick-all-history-link { color: var(--dg-accent-ink, #0f7c63); } /* dark theme: the site link colour won over it */

/* The window's own palette, the same on every page and project that loads this file (search, reader,
   memo, settings, dict.dhamma.gift, the apps). Its rules above read --dg-* tokens, which the site
   defines only under body.dg-skin-minimal (search/css/home.css): on any page without that skin the
   fallbacks — the old design's navy and light-theme values — showed instead (memo, owner 2026-10-01:
   "быстрое окно везде одинаковое"). Same values as body.dg-skin-minimal / .dark — keep in sync. */
.quick-modal-container {
    --dg-surface: #ffffff;
    --dg-surface-hover: #f5f4f1;
    --dg-surface-active: #eae8e2;
    --dg-border: #e7e5de;
    --dg-border-strong: #d7d4c9;
    --dg-text: #1b1d19;
    --dg-text-2: #5c6058;
    --dg-text-muted: #6e716a;
    --dg-accent: #149c7c;
    --dg-accent-ink: #0f7c63;
    /* Действия — тем же зелёным, что тогглы и выбранные пункты: один зелёный на тему. */
    --dg-accent-dark: #149c7c;
    --dg-accent-bg: #dff3ec;
    --dg-tblue: #3434be;
    --dg-link: #3434be;
}
/* The window's height unit, as search/css/home.css defines it on :root (svh: the visible height with
   the phone browser's address bar showing; / --dg-zoom undoes the interface zoom). Pages without
   home.css (memo) fell back to 1vh — taller than the visible area, the window's top ran under the bar. */
.quick-modal-container, .quick-overlay-element { --dg-vh: calc(1vh / var(--dg-zoom, 1)); }
@supports (height: 1svh) { .quick-modal-container, .quick-overlay-element { --dg-vh: calc(1svh / var(--dg-zoom, 1)); } }
/* body.dark — dhamma.gift; body.dark-mode — the dictionary. */
body.dark .quick-modal-container, body.dark-mode .quick-modal-container {
    --dg-surface: #191919;
    --dg-surface-hover: #202020;
    --dg-surface-active: #2a2a2a;
    --dg-border: #2c2c2c;
    --dg-border-strong: #3b3b3b;
    --dg-text: rgb(221, 221, 221);
    --dg-text-2: #a8a8a8;
    --dg-text-muted: #7c7c7c;
    --dg-accent: #09967a;
    --dg-accent-ink: #09967a;
    --dg-accent-dark: #09967a;
    --dg-accent-bg: #12241f;
    --dg-tblue: #8f8fe8;
    --dg-link: #8f8fe8;
}