/* Lingo Cards — compact phone UI and component refinements */

/* 2026 compact phone UI */
@media (max-width: 640px) {
  :root {
    --radius-sm: 8px;
    --radius: 10px;
    --radius-lg: 13px;
  }

  body { font-size: 14px; line-height: 1.4; }

  .main {
    height: calc(var(--app-vh, 1vh) * 100 - 54px - env(safe-area-inset-bottom));
  }

  .topbar {
    padding: 8px 12px 7px;
    gap: 7px;
  }
  .page-title { font-size: 18px; line-height: 1.15; }
  .topbar-right { gap: 5px 12px; }

  .deck-selector,
  .topbar-right .deck-selector {
    flex: 0 1 auto;
    width: auto;
    max-width: min(100%, 280px);
  }
  .deck-selector select {
    width: auto;
    max-width: 100%;
    height: 30px;
    padding: 3px 26px 3px 4px;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0;
    background-color: transparent;
    font-weight: 600;
    color: var(--ink);
  }
  .topbar-tools { flex: 0 0 auto; gap: 8px; }
  .topbar-right .topbar-add,
  .topbar-right .btn.topbar-bulk {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-elev);
    box-shadow: 0 1px 2px rgba(30, 27, 22, .04);
  }
  .topbar-right .topbar-add {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    background: var(--accent-soft);
    color: var(--accent);
  }
  .topbar-right .btn.topbar-bulk { color: var(--ink-muted); }
  .topbar-right .topbar-add:hover,
  .topbar-right .topbar-add:active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--panel));
    color: var(--accent-hover);
  }
  .topbar-right .btn.topbar-bulk:hover,
  .topbar-right .btn.topbar-bulk:active {
    border-color: var(--border-strong);
    background: var(--panel);
    color: var(--ink);
  }
  .topbar-right .btn.topbar-study,
  .topbar-right .icon-btn.topbar-tool {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-elev);
  }

  .view:not(.view-study) {
    padding: 12px 12px calc(64px + env(safe-area-inset-bottom));
  }
  .view-study.active { padding: 7px 12px 9px; gap: 8px; }
  .study-filter-panel { gap: 4px; }
  .study-filter-heading { font-size: 12px; }
  .study-stats { gap: 4px; }
  .stat-chip { padding: 4px 3px; min-height: 36px; line-height: 1.2; }
  .filter-state-mark { width: 15px; height: 15px; font-size: 13px; }
  .card-stage { padding: 12px; gap: 7px; }
  .card-stage .card-front { padding-top: 30px; }
  .card-stage .card-meta { gap: 5px; }
  .grade-btn { min-height: 48px; padding: 7px 6px; gap: 2px; }
  .reveal-btn { padding: 9px 12px; }

  .toolbar { margin-bottom: 10px; }
  .browse-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px 10px;
    align-items: center;
  }
  .browse-toolbar .search {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 36px;
    padding: 6px 10px;
  }
  .browse-filters {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex-wrap: wrap;
  }
  .browse-toolbar #filterDeck,
  .browse-toolbar #filterState {
    grid-column: auto;
    grid-row: auto;
    width: auto;
    max-width: min(46vw, 170px);
  }
  .browse-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 18px;
  }
  .browse-toolbar #addCardBtn2,
  .browse-toolbar #bulkBrowseBtn {
    grid-column: auto;
    grid-row: auto;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-elev);
    box-shadow: 0 1px 2px rgba(30, 27, 22, .04);
  }
  .browse-toolbar #addCardBtn2 {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    background: var(--accent-soft);
    color: var(--accent);
  }
  .browse-toolbar #bulkBrowseBtn { color: var(--ink-muted); }
  .browse-toolbar #addCardBtn2:hover,
  .browse-toolbar #addCardBtn2:active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--panel));
    color: var(--accent-hover);
  }
  .browse-toolbar #bulkBrowseBtn:hover,
  .browse-toolbar #bulkBrowseBtn:active {
    border-color: var(--border-strong);
    background: var(--panel);
    color: var(--ink);
  }

  select.filter,
  .settings-row select,
  .form-row select,
  .step-input select,
  .preset-controls select,
  .ai-model-controls select {
    width: max-content;
    max-width: 100%;
    min-height: 30px;
    padding: 3px 26px 3px 4px;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    border-radius: 0;
    background-color: transparent;
    color: var(--ink);
    font-weight: 600;
    align-self: flex-start;
    justify-self: start;
  }
  select:focus-visible { outline: none; }

  .settings-block {
    padding: 12px;
    margin-bottom: 9px;
    border-radius: 11px;
  }
  .settings-block h3 {
    margin-bottom: 8px;
    font-size: 17px;
    line-height: 1.25;
  }
  .settings-row,
  .settings-row.toggle,
  .settings-row.with-hint,
  .presets-block .settings-row.with-hint {
    padding: 8px 0;
    gap: 6px;
  }
  .settings-row label { font-size: 13.5px; line-height: 1.3; }
  .settings-row.with-hint > *:last-child { justify-self: start; }
  .settings-row input[type="text"],
  .settings-row input[type="number"],
  .settings-row input[type="password"] {
    width: min(100%, 150px);
    min-height: 34px;
    padding: 5px 8px;
    background: var(--bg-elev);
  }
  .settings-row input[type="password"] { width: min(100%, 230px); }
  .settings-row.toggle {
    min-height: 38px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .settings-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 22px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--border);
    position: relative;
    cursor: pointer;
    transition: background .15s, border-color .15s;
  }
  .settings-row input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--panel);
    box-shadow: 0 1px 3px rgba(0,0,0,.22);
    transition: transform .15s;
  }
  .settings-row input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
  }
  .settings-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
  .settings-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .block-header {
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  .block-icon { font-size: 21px; }
  .block-heading h3 { font-size: 16px; line-height: 1.25; }
  .button-block .block-header { padding-right: 28px; }
  .button-preview { padding: 4px 9px; }
  .review-advanced { gap: 9px; }
  .example-row { margin-top: 8px; padding: 8px 9px; line-height: 1.4; }

  .step-input {
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .step-input input[type="number"] { width: 70px; flex: 0 0 70px; }
  .step-input select { width: auto; min-width: 74px; }
  .preset-controls {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 6px 14px;
  }
  .preset-controls select { width: auto; max-width: 100%; }
  .preset-controls .btn { width: auto; }
  .ai-model-controls { width: 100%; gap: 6px 12px; }
  .ai-model-controls select { min-width: 0; max-width: 100%; }
  .ai-key-row { flex-wrap: wrap; }

  .settings-block .settings-row .btn,
  .modal-foot .btn,
  .selection-pop-actions .btn,
  #smartDefaultsBtn,
  #reviewAdvancedToggle,
  .ai-gen-btn {
    position: relative;
    width: auto;
    min-height: 32px;
    height: auto;
    padding: 5px 10px;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-elev);
    box-shadow: 0 1px 2px rgba(30, 27, 22, .04);
    color: var(--ink-muted);
    font-size: 13.5px;
    font-weight: 550;
    line-height: 1.25;
    text-decoration: none;
    transition: color .14s, background .14s, border-color .14s, box-shadow .14s, transform .08s;
  }
  .settings-block .settings-row .btn:hover,
  .modal-foot .btn:hover,
  .selection-pop-actions .btn:hover,
  #smartDefaultsBtn:hover,
  #reviewAdvancedToggle:hover,
  .ai-gen-btn:hover:not(.loading) {
    border-color: var(--border-strong);
    background: var(--panel);
    color: var(--ink);
  }
  .settings-block .settings-row .btn:active,
  .modal-foot .btn:active,
  .selection-pop-actions .btn:active,
  #smartDefaultsBtn:active,
  #reviewAdvancedToggle:active,
  .ai-gen-btn:active {
    transform: scale(.98);
    background: var(--bg-elev);
    box-shadow: none;
  }
  .settings-block .settings-row .btn.primary,
  .selection-pop-actions .btn.primary,
  #smartDefaultsBtn,
  .ai-gen-btn {
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
  }
  .settings-block .settings-row .btn.primary:hover,
  .selection-pop-actions .btn.primary:hover,
  #smartDefaultsBtn:hover,
  .ai-gen-btn:hover:not(.loading) {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--panel));
    color: var(--accent-hover);
  }
  .modal-foot .btn.primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .modal-foot .btn.primary:hover {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: #fff;
  }
  .settings-block .settings-row .btn.danger,
  .modal-foot .btn.danger {
    border-color: color-mix(in srgb, var(--bad) 25%, var(--border));
    background: var(--bad-soft);
    color: var(--bad);
  }
  #reviewAdvancedToggle.is-open {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    background: var(--accent-soft);
    color: var(--accent);
  }

  .deck-row .deck-actions .deck-study-btn,
  .decks-toolbar > .deck-tool-primary {
    min-height: 32px;
    padding: 5px 10px;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 9px;
    background: var(--accent-soft);
    box-shadow: 0 1px 2px rgba(30, 27, 22, .04);
    color: var(--accent);
  }
  .deck-row .deck-actions .deck-study-btn:hover,
  .deck-row .deck-actions .deck-study-btn:active,
  .decks-toolbar > .deck-tool-primary:hover,
  .decks-toolbar > .deck-tool-primary:active {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--panel));
    color: var(--accent-hover);
  }
  .deck-row .deck-actions .deck-icon-btn,
  .decks-toolbar > .btn.deck-tool:not(.deck-tool-primary) {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg-elev);
  }
  .deck-row .deck-actions .deck-icon-btn:hover,
  .decks-toolbar > .btn.deck-tool:not(.deck-tool-primary):hover {
    border-color: var(--border-strong);
    background: var(--panel);
  }

  .stats-grid { gap: 7px; margin-bottom: 10px; }
  .stat-card { padding: 10px; }
  .stat-card .stat-value { font-size: 25px; margin-top: 1px; }
  .stats-block { padding: 11px; margin-bottom: 9px; }
  .stats-block h3 { margin-bottom: 9px; font-size: 16px; }

  .deck-row { padding: 11px 12px; gap: 7px; }
  .deck-list { gap: 7px; }
  .deck-info .deck-title { font-size: 17px; }

  .modal { place-items: end center; }
  .modal-panel,
  .modal-panel.small,
  #deckCardsModal .modal-panel {
    width: 100%;
    max-height: calc(var(--app-vh, 1vh) * 94);
    overflow: hidden;
    border-radius: 14px 14px 0 0;
  }
  .modal-head { padding: 11px 14px; flex: 0 0 auto; }
  .modal-head h2 { font-size: 18px; }
  .modal-body {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px;
    gap: 10px;
  }
  .modal-foot {
    flex: 0 0 auto;
    padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
    gap: 8px 10px;
    flex-wrap: wrap;
  }
  .form-row { gap: 4px; }
  .form-row.two { gap: 9px; }
  .form-row input,
  .form-row textarea {
    min-height: 34px;
    padding: 5px 9px;
  }
  .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
    height: 34px;
  }
  .form-row textarea {
    min-height: 54px;
    max-height: 132px;
    line-height: 1.3;
    resize: vertical;
  }
  #bulkText {
    min-height: 112px;
    max-height: 36vh;
  }
  .deckcards-toolbar { padding: 9px 12px; gap: 8px; }
  .deckcards-toolbar .search { min-height: 36px; padding: 6px 9px; }

  .mobile-tabs {
    padding: 3px 5px calc(3px + env(safe-area-inset-bottom));
  }
  .mobile-tabs .nav-item {
    min-width: 0;
    padding: 5px 1px 6px;
    gap: 2px;
    font-size: 9.5px;
  }
  .mobile-tabs .nav-item svg { width: 16px; height: 16px; }
}

@media (max-width: 360px) {
  .topbar { padding-inline: 10px; }
  .view:not(.view-study),
  .view-study.active { padding-inline: 10px; }
  .topbar-tools { gap: 10px; }
  .topbar-right .topbar-add,
  .topbar-right .btn.topbar-bulk { font-size: 13.5px; }
  .stat-chip { font-size: 12px; }
  .settings-block .settings-row:has(.btn) { grid-template-columns: 1fr !important; }
  .modal-foot { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .view,
  .view-settings,
  .settings-block,
  .review-advanced,
  .settings-row,
  .settings-row > *,
  .block-header,
  .block-heading,
  .preset-controls,
  .ai-key-row,
  .ai-model-controls,
  .form-row,
  .label-row,
  .bulk-check-text,
  .practice-wordpreview-head,
  .practice-result-summary {
    min-width: 0;
    max-width: 100%;
  }

  .view-settings,
  .settings-block,
  .review-advanced,
  .heatmap-wrap,
  .heatmap {
    width: 100%;
  }

  .settings-block h3,
  .settings-row label,
  .settings-row .row-hint,
  .block-heading,
  .block-heading h3,
  .block-heading .block-desc,
  .example-row,
  .ai-privacy-note,
  .algo-name,
  .algo-desc,
  .bulk-check-text,
  .practice-wordpreview-head,
  .practice-result-summary {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .settings-row input,
  .settings-row select,
  .settings-row textarea,
  .form-row input,
  .form-row select,
  .form-row textarea {
    max-width: 100%;
  }

  .settings-row select,
  .preset-controls select,
  .ai-model-controls select {
    width: 100%;
    min-width: 0;
  }

  .settings-block .settings-row:has(.btn) {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start;
    width: 100%;
  }

  .settings-block .settings-row:has(> .btn + .btn) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch;
  }

  .settings-block .settings-row:has(> .btn + .btn) > .btn {
    width: 100%;
    min-width: 0;
  }

  .settings-block .settings-row .btn,
  .modal-foot .btn,
  .selection-pop-actions .btn,
  #smartDefaultsBtn,
  #reviewAdvancedToggle,
  .ai-gen-btn {
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .selection-popover,
  .info-tip-bubble {
    min-width: 0;
    max-width: calc(100vw - 24px);
  }

  .label-row,
  .practice-wordpreview-head,
  .practice-result-summary {
    flex-wrap: wrap;
  }

  .heatmap-wrap {
    align-items: stretch;
    overflow: hidden;
  }

  .heatmap {
    min-width: 0;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 480px) {
  .preset-controls,
  .ai-model-controls,
  .ai-key-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    align-items: stretch;
  }

  .preset-controls > *,
  .ai-model-controls > *,
  .ai-key-row > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .preset-controls .btn,
  .ai-model-controls .btn,
  .ai-key-row .btn {
    justify-self: stretch;
  }

  .settings-block .settings-row:has(> .btn + .btn) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .modal-foot {
    align-items: stretch;
  }

  .modal-foot .btn {
    flex: 1 1 100%;
    width: 100%;
  }
}

@media (max-width: 340px) {
  .step-input {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .step-input input[type="number"],
  .step-input select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* v3.2.4 — clearer add actions, dropdowns and text hierarchy */
.topbar-add-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.topbar-bulk,
.bulk-icon-btn {
  display: inline-grid;
  place-items: center;
  min-width: 36px;
  padding-inline: 9px;
}

.topbar-bulk svg,
.bulk-icon-btn svg {
  width: 17px;
  height: 17px;
  flex: none;
}

select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236B6A65%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M7 10l5 5 5-5%27/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  background-size: 15px 15px !important;
}

.settings-block h3,
.block-heading h3 {
  font-weight: 600;
}

.block-heading .block-desc,
.settings-block > .block-desc,
.settings-row .row-hint,
.algo-desc,
.ai-privacy-note {
  color: var(--ink-faint);
  font-weight: 400;
}

.stat-sub,
.practice-selection-note {
  color: var(--ink-subtle);
  font-weight: 400;
}

.block-heading .block-desc,
.settings-block > .block-desc {
  font-size: 12.75px;
  line-height: 1.5;
}

.button-block .block-header:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .topbar-add-actions {
    order: 1;
    gap: 6px;
  }

  .topbar-add-actions .topbar-add,
  .topbar-add-actions .topbar-bulk {
    order: initial;
  }

  .topbar-add-actions .topbar-bulk {
    width: 34px;
    min-width: 34px;
    padding-inline: 0;
  }

  .browse-actions {
    gap: 6px;
  }

  .browse-toolbar .bulk-icon-btn {
    width: 34px;
    min-width: 34px;
    padding-inline: 0;
  }

  select {
    background-position: right 5px center !important;
    background-size: 14px 14px !important;
  }
}

/* v3.2.5 — compact, reliable controls on phones */
.button-block .block-header {
  padding-right: 0;
  border-bottom: 0;
}
.button-block .block-header .block-heading {
  flex: 0 1 auto;
}
.button-block .block-header .chevron {
  position: static;
  right: auto;
  top: auto;
  flex: 0 0 18px;
  transform: rotate(180deg);
}
.button-block.collapsed .block-header {
  border-bottom: 0;
}
.button-block.collapsed .block-header .chevron {
  transform: rotate(0deg);
}

@media (max-width: 640px) {
  body[data-view="study"] .topbar-tools {
    margin-left: auto;
    justify-content: flex-end;
  }

  select {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    padding: 3px 22px 3px 0 !important;
    border: 0 !important;
    border-radius: 0;
    background-color: transparent;
    background-image: url("../select-arrow.png") !important;
    background-position: right 2px center !important;
    background-size: 16px 16px !important;
  }

  .deck-selector select,
  .settings-row select,
  .filter,
  .form-row select,
  .step-input select,
  .preset-controls select,
  .ai-model-controls select,
  .practice-form select {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    border: 0 !important;
    border-bottom: 0 !important;
  }
}

/* v3.2.6 — content-sized dropdowns and single settings dividers */
.select-width-probe {
  position: fixed;
  left: -10000px;
  top: -10000px;
  visibility: hidden;
  white-space: pre;
  pointer-events: none;
}

.single-control-row,
.settings-action-row {
  grid-template-columns: max-content;
}

.settings-action-row > .btn {
  justify-self: start;
}

.smart-block .smart-header {
  border-bottom: 0;
}

.button-block .block-header + .settings-row {
  border-top: 0;
}

.button-block .block-header .block-heading {
  flex: 0 1 auto;
}

.button-block .block-heading h3 {
  cursor: pointer;
}

.button-block .block-header .chevron {
  position: static;
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  vertical-align: -3px;
  transform: rotate(180deg);
  pointer-events: none;
}

.button-block.collapsed .block-header .chevron {
  transform: rotate(0deg);
}

@media (max-width: 640px) {
  select:not(#edType):not(#edDeck) {
    box-sizing: border-box;
    width: min(calc(var(--select-text-width, 0px) + 34px), 100%) !important;
    max-width: 100%;
    min-width: 34px;
    min-height: 36px;
    line-height: 1.35;
    padding-block: 5px !important;
  }

  #editorModal #edType,
  #editorModal #edDeck {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100%;
    padding-left: 4px;
    padding-right: 26px;
  }
}

/* v3.3.6 — unified card-add menu and full-width phone tabs */
.add-card-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.add-card-trigger {
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(30, 27, 22, .08);
  color: #fff;
  font-weight: 600;
}
.add-card-trigger:hover,
.add-card-trigger:active,
.add-card-trigger[aria-expanded="true"] {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
  color: #fff;
}
.add-card-trigger > svg:first-child { width: 14px; height: 14px; }
.add-card-chevron { width: 13px; height: 13px; margin-left: 1px; transition: transform .14s ease; }
.add-card-trigger[aria-expanded="true"] .add-card-chevron { transform: rotate(180deg); }

.add-card-menu {
  position: fixed;
  z-index: 120;
  width: min(220px, calc(100vw - 16px));
  padding: 3px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--panel);
  box-shadow: 0 10px 28px rgba(30, 27, 22, .16);
}
.add-card-menu button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.add-card-menu button:hover,
.add-card-menu button:focus-visible {
  background: var(--bg-elev);
}
.add-card-menu button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.add-card-menu button svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--accent); }

@property --example-progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.example-refresh-progress {
  --example-progress: 0deg;
  position: relative;
  isolation: isolate;
  cursor: wait !important;
  opacity: 1 !important;
}
.example-refresh-progress::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -3px;
  padding: 3px;
  border-radius: calc(var(--radius-sm) + 3px);
  background: conic-gradient(from -90deg, var(--good) 0deg var(--example-progress), transparent var(--example-progress) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  /* Плавность кольца задаётся покадровой интерполяцией в js/study.js:
     `transition` для кастомного свойства работает только с `@property`,
     которого нет в Safari 15 / iOS 15 (последняя версия для iPhone 7). */
}
.example-refresh-progress > svg {
  color: var(--bad);
  stroke: currentColor;
  animation: example-refresh-spin .8s linear infinite;
  transform-origin: center;
}
@keyframes example-refresh-spin {
  to { transform: rotate(360deg); }
}
.deck-icon-btn.example-refresh-progress::before,
.icon-btn.example-refresh-progress::before { border-radius: 50%; }

.example-refresh-bar-host {
  position: relative;
}
.example-refresh-bar {
  --example-linear-progress: 0;
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  border-radius: inherit;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  /* Первое значение — фолбэк: Safari 15 / iOS 15 не знает `color-mix()` и
     отбрасывает такое объявление целиком, оставляя дорожку невидимой. */
  background: rgba(47, 125, 91, .18);
  background: color-mix(in srgb, var(--good) 18%, transparent);
  /* Собственный слой композитора: внутри прокручиваемой карточки iOS иначе
     не перерисовывает абсолютно позиционированный индикатор. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity .18s cubic-bezier(.25, 1, .5, 1);
}
.example-refresh-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background:
    linear-gradient(105deg, transparent 0 28%, rgba(255, 255, 255, .72) 48%, transparent 68%) -70px 0 / 70px 100% no-repeat,
    var(--good);
  transform: scaleX(var(--example-linear-progress));
  transform-origin: left center;
  transition: transform .65s cubic-bezier(.2, .75, .25, 1);
  animation: example-refresh-bar-shimmer 1.8s cubic-bezier(.25, 1, .5, 1) infinite;
}
.example-refresh-bar.is-indeterminate::before {
  width: 42%;
  transform: translateX(-115%) scaleX(1);
  transform-origin: center;
  animation: example-refresh-bar-waiting 1.25s cubic-bezier(.55, 0, .35, 1) infinite;
}
.example-refresh-count {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  min-width: 38px;
  padding: 1px 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--panel);
  border: 0;
  box-shadow: none;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 12px;
  text-align: center;
  transform: translate(-50%, -50%);
}
.example-refresh-bar.is-visible { opacity: 1; }

@keyframes example-refresh-bar-waiting {
  0% { transform: translateX(-115%) scaleX(.35); }
  50% { transform: translateX(105%) scaleX(1); }
  100% { transform: translateX(275%) scaleX(.35); }
}
@keyframes example-refresh-bar-shimmer {
  from { background-position: -70px 0, 0 0; }
  to { background-position: calc(100% + 70px) 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .example-refresh-bar,
  .example-refresh-bar::before { transition-duration: .01ms; }
  .example-refresh-bar::before { animation: none; }
  .example-refresh-bar.is-indeterminate::before {
    width: 100%;
    opacity: .55;
    transform: scaleX(1);
    animation: none;
  }
}

/* v3.3.8 — title-free views and bare icon actions */
.topbar {
  justify-content: flex-end;
}
.topbar-right {
  width: 100%;
}
.topbar-add-actions {
  margin-left: auto;
}

.bare-icon-btn,
.btn.bare-icon-btn,
.icon-btn.bare-icon-btn,
.deck-icon-btn,
.deck-study-btn,
.row-actions .icon-btn,
.dc-actions .icon-btn,
#bulkRefreshExamplesBtn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 10px;
  display: inline-grid;
  place-items: center;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-muted);
}
.bare-icon-btn:hover,
.bare-icon-btn:active,
.bare-icon-btn[aria-expanded="true"],
.btn.bare-icon-btn:hover,
.btn.bare-icon-btn:active,
.icon-btn.bare-icon-btn:hover,
.deck-icon-btn:hover,
.deck-icon-btn.danger:hover,
.deck-study-btn:hover,
.deck-study-btn:active,
.row-actions .icon-btn:hover,
.row-actions .icon-btn:active,
.dc-actions .icon-btn:hover,
.dc-actions .icon-btn:active,
#bulkRefreshExamplesBtn:hover,
#bulkRefreshExamplesBtn:active {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  transform: none;
}
#topbarAddBtn,
#addCardBtn2,
#newDeckBtn,
.deck-study-btn {
  color: var(--accent);
}
#topbarAddBtn:hover,
#topbarAddBtn:active,
#topbarAddBtn[aria-expanded="true"],
#addCardBtn2:hover,
#addCardBtn2:active,
#addCardBtn2[aria-expanded="true"],
#newDeckBtn:hover,
#newDeckBtn:active,
.deck-study-btn:hover,
.deck-study-btn:active {
  color: var(--accent-hover);
}
.deck-icon-btn.danger:hover { color: var(--bad); }
.bare-icon-btn svg,
.deck-icon-btn svg,
.deck-study-btn svg,
#bulkRefreshExamplesBtn svg {
  width: 19px;
  height: 19px;
  flex: none;
}
.decks-section-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 10px;
}

@media (max-width: 640px) {
  .topbar {
    flex-direction: row;
  }
  .topbar-right {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .topbar-add-actions {
    order: 4;
    margin-left: auto;
  }
  .topbar-right .deck-selector {
    order: -1;
    flex: 1 1 100%;
  }
  body[data-view="study"] .topbar-tools {
    order: 3;
    flex: 0 0 auto;
    margin-left: 0;
    justify-content: flex-start;
  }
  .topbar-right .btn.topbar-study.bare-icon-btn,
  .topbar-right .icon-btn.topbar-tool.bare-icon-btn,
  .topbar-right .bare-icon-btn,
  .deck-row .deck-actions .deck-icon-btn,
  .deck-row .deck-actions .deck-study-btn,
  .decks-toolbar > .btn.bare-icon-btn,
  #deckBrowse .browse-toolbar #addCardBtn2 {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .deck-row .deck-actions .deck-study-btn {
    flex: 0 0 auto;
  }
  .topbar-right .btn.topbar-study.bare-icon-btn:hover,
  .topbar-right .btn.topbar-study.bare-icon-btn:active,
  .topbar-right .icon-btn.topbar-tool.bare-icon-btn:hover,
  .topbar-right .icon-btn.topbar-tool.bare-icon-btn:active {
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

/* Deck browser progressive-search overrides. Kept last so legacy compact toolbar rules cannot reshape it. */
#deckBrowse .browse-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: block;
  padding: 10px;
  margin-bottom: 10px;
}
#deckBrowse .browse-search-row { display: flex; align-items: center; gap: 8px; }
#deckBrowse .browse-search { display: flex; min-height: 40px; padding: 0 10px; }
#deckBrowse .browse-actions { display: flex; grid-column: auto; grid-row: auto; gap: 6px; }
#deckBrowse .browse-toolbar #addCardBtn2 {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
}
#deckBrowse .browse-toolbar #filterState,
#deckBrowse .browse-toolbar #browseSort {
  width: 100%;
  max-width: none;
}
#deckBrowse .browse-advanced-filters[hidden] { display: none; }

/* Deck card actions: full desktop CTA, right-aligned overflow menu on phones. */
@media (min-width: 641px) {
  .deck-row .deck-actions .deck-study-btn {
    width: auto;
    height: 34px;
    min-width: 0;
    min-height: 34px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: 9px;
    background: var(--accent-soft);
    box-shadow: 0 1px 2px rgba(30, 27, 22, .04);
    color: var(--accent);
    white-space: nowrap;
  }
  .deck-row .deck-actions .deck-study-btn:hover,
  .deck-row .deck-actions .deck-study-btn:active {
    border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--border));
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--panel));
    color: var(--accent-hover);
  }
  .deck-row .deck-actions .deck-study-btn svg {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 640px) {
  .deck-row .deck-actions {
    width: 100%;
  }
  .deck-row .deck-actions .deck-study-btn {
    flex: 0 0 auto;
  }
  .deck-row .deck-actions .deck-menu-trigger {
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  #deckBrowse .browse-toolbar { display: block; padding: 9px; }
  #deckBrowse .browse-toolbar #addCardBtn2 {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    padding: 0;
  }
}