/*
 * 收藏夹 / 题目单: the panel (grid + detail), the list picker, the tile menu, the name dialog and the phone rows.
 * Cover art and the cover editor are styled in favorites-cover.css.
 *
 * Everything reads the --fav-* tokens below and nothing else, so a theme only has to remap the tokens.
 * The overlays are appended to <body>, which is why every remap is written as "body… .fav-scope".
 * House style: hairline borders, 12px radii, soft shadows, no hover transforms.
 */

/* ---------- 1. Tokens ---------- */
.fav-scope {
    --fav-surface: #ffffff;
    --fav-raised: #ffffff;
    --fav-page: #f8fafc;
    --fav-ink: #1f2937;
    --fav-muted: #64748b;
    --fav-line: #e2e8f0;
    --fav-line-strong: #cbd5e1;
    --fav-accent: #ff4b4b;
    --fav-accent-hover: #ef4444;
    --fav-accent-ink: #ffffff;
    --fav-tint: #fff1f2;
    --fav-danger: #c2410c;
    --fav-ring: rgb(255 75 75 / 55%);
    --fav-backdrop: rgb(15 23 42 / 42%);
    --fav-cover-line: rgb(15 23 42 / 8%);
    --fav-hover-shadow: 0 6px 18px rgb(15 23 42 / 8%);
    --fav-radius: 12px;
    --fav-shadow: 0 10px 28px rgb(15 23 42 / 10%);
    color: var(--fav-ink);
}

/* Warm Paper palette (skin-warm-paper: the 暖纸书房 theme only). [class] matches warm-paper-surfaces.css's specificity trick. */
body.skin-warm-paper[class] .fav-scope {
    --fav-surface: var(--warm-panel-surface, #fff);
    --fav-raised: var(--warm-panel-surface, #fff);
    --fav-page: var(--warm-page, #f7f6f2);
    --fav-ink: var(--warm-ink, #292a2e);
    --fav-muted: var(--warm-muted, #868681);
    --fav-line: var(--warm-border, #e3e3dc);
    --fav-line-strong: #d6d5ce;
    --fav-accent: var(--warm-accent, #bc5143);
    --fav-accent-hover: #a94538;
    --fav-accent-ink: #ffffff;
    --fav-tint: var(--warm-panel-tint, #f8eeea);
    --fav-danger: #a9473c;
    --fav-ring: #ba6453;
    --fav-backdrop: rgb(44 43 38 / 36%);
    --fav-cover-line: rgb(47 46 36 / 9%);
    --fav-hover-shadow: 0 7px 22px rgb(74 70 46 / 9%);
    --fav-shadow: 0 10px 28px rgb(47 46 36 / 10%);
}

body.theme-dark .fav-scope {
    --fav-surface: var(--dark-surface, #202020);
    --fav-raised: var(--dark-surface-2, #262626);
    --fav-page: var(--dark-bg, #151515);
    --fav-ink: var(--dark-text, #f2f2f2);
    --fav-muted: var(--dark-muted, #9a9a9a);
    --fav-line: var(--dark-border, #3a3a3a);
    --fav-line-strong: #4a4a4a;
    --fav-accent: #ff6b6b;
    --fav-accent-hover: #ff8080;
    --fav-accent-ink: #1b1b1b;
    --fav-tint: rgb(255 107 107 / 12%);
    --fav-danger: #ff8f85;
    --fav-ring: rgb(255 107 107 / 70%);
    --fav-backdrop: rgb(0 0 0 / 56%);
    --fav-cover-line: rgb(255 255 255 / 10%);
    --fav-hover-shadow: 0 8px 22px rgb(0 0 0 / 40%);
    --fav-shadow: 0 14px 36px rgb(0 0 0 / 45%);
}

/* Warm Paper dark: warm-paper-dark.css remaps the --warm-* variables; these are the literals it cannot reach.
   Palette = the dark login screen (paper #191c20, surface #24282d, ink #edece7, line #363b40, accent text #e37b70). */
body.skin-warm-paper.theme-dark[class] .fav-scope {
    --fav-surface: var(--warm-panel-surface, #24282d);
    --fav-raised: #2b3036;
    --fav-page: var(--warm-page, #191c20);
    --fav-ink: var(--warm-ink, #edece7);
    --fav-muted: var(--warm-muted, #a4a59f);
    --fav-line: var(--warm-border, #363b40);
    --fav-line-strong: #565c64;
    --fav-accent: #e37b70;
    --fav-accent-hover: #ec8d83;
    --fav-accent-ink: #1f1412;
    --fav-tint: var(--warm-panel-tint, #3a2a28);
    --fav-danger: #e37b70;
    --fav-ring: #e37b70;
    --fav-backdrop: rgb(0 0 0 / 56%);
    --fav-cover-line: rgb(255 255 255 / 10%);
    --fav-hover-shadow: 0 8px 22px rgb(0 0 0 / 36%);
    --fav-shadow: 0 16px 48px rgb(0 0 0 / 36%);
}

body.style-liquid-glass .fav-scope {
    --fav-surface: var(--glass-fill-strong, rgba(255, 255, 255, 0.7));
    --fav-raised: rgb(255 255 255 / 84%);
    --fav-line: var(--glass-border, rgba(255, 255, 255, 0.6));
    --fav-line-strong: rgb(15 23 42 / 16%);
    --fav-shadow: var(--glass-shadow, 0 10px 34px rgba(31, 38, 135, 0.10)), var(--glass-highlight, inset 0 1px 0 rgba(255, 255, 255, 0.85));
}

body.style-liquid-glass.theme-dark .fav-scope {
    --fav-raised: rgb(34 36 44 / 88%);
    --fav-line-strong: rgb(255 255 255 / 22%);
}

/* Phones: Classic is already warm-tinted there (workspace-theme.css), in light and in dark. */
@media (max-width: 767px) {
    body.style-default .fav-scope {
        --fav-surface: var(--workspace-surface, #fff);
        --fav-raised: var(--workspace-surface, #fff);
        --fav-page: var(--workspace-page, #f7f6f2);
        --fav-ink: var(--workspace-ink, #20252b);
        --fav-muted: var(--workspace-muted, #777975);
        --fav-line: var(--workspace-border, #e3e3dc);
        --fav-accent: var(--workspace-accent, #c6493f);
        --fav-accent-hover: var(--workspace-accent, #c6493f);
        --fav-tint: var(--workspace-tint, #f8eeeb);
    }
}

/* ---------- 2. Root and panel gutters ---------- */
.fav-root {
    display: block;
    min-height: 320px;
    padding: 28px 0 8px;
    color: var(--fav-ink);
    font-size: 14px;
    line-height: 1.5;
}

.fav-root-mobile {
    max-width: 560px;
    min-height: 0;
    margin: 0 auto;
    padding: 4px 0 0;
}

/* The hall gets the same gutters in warm-paper.css; the favorites panel mirrors them from here. */
@media (min-width: 768px) {
    body.layout-warm-paper[class] #favoritesPanel {
        width: 100%;
        max-width: 1520px;
        padding: 0 clamp(20px, 2.6vw, 44px) 40px clamp(14px, 1.8vw, 30px) !important;
    }

    body.layout-warm-paper[class] #favoritesPanel .fav-root {
        padding-top: 26px;
    }
}

/* Tablet gutters: app.css narrows the other panels by id in these ranges; mirrored here so app.css stays untouched. */
@media (min-width: 768px) and (max-width: 1279px) {
    #favoritesPanel {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    body.tablet-top-collapsed #favoritesPanel {
        padding-top: 8px !important;
    }
}

/* The 收藏夹 tab made the warm header's single row too tight once the admin or homework tab is also
   shown (the round header buttons and the account card got squeezed). In that case use the same
   two-row header warm-paper.css already switches to below 1200px; everyone else keeps one row. */
@media (min-width: 1200px) and (max-width: 1499px) {
    body.layout-warm-paper #appTopHeader:has(#tab_admin_center:not(.hidden), #tab_homework:not(.hidden)) {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 16px clamp(20px, 2.6vw, 44px) 0 22px !important;
        min-height: 120px;
    }

    body.layout-warm-paper #appTopHeader:has(#tab_admin_center:not(.hidden), #tab_homework:not(.hidden)) > div:first-child > div:last-child {
        grid-column: 2;
    }

    body.layout-warm-paper #appTopHeader:has(#tab_admin_center:not(.hidden), #tab_homework:not(.hidden)) #mainTabs {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: space-between;
    }

    body.skin-warm-paper #appTopHeader:has(#tab_admin_center:not(.hidden), #tab_homework:not(.hidden)) #mainTabs > button {
        padding: 6px 12px 13px !important;
    }
}

/* Classic layout scrolls #mainTabs sideways with a hidden scrollbar; with the extra admin/homework
   tabs a little less side padding keeps the last tab reachable without scrolling at 1280px. */
body:not(.layout-warm-paper) #mainTabs:has(#tab_admin_center:not(.hidden), #tab_homework:not(.hidden)) > button {
    padding-left: 16px;
    padding-right: 16px;
}

.fav-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 3. Panel header ---------- */
.fav-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 24px;
}

.fav-head-text {
    min-width: 0;
}

.fav-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--fav-ink);
}

.fav-hint {
    margin: 6px 0 0;
    overflow: hidden;
    font-size: 13.5px;
    color: var(--fav-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-head-count {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--fav-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- 4. Grid and tiles ---------- */
.fav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 22px;
}

.fav-tile {
    position: relative;
    min-width: 0;
    border-radius: var(--fav-radius);
}

.fav-tile-open {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--fav-radius);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fav-tile-open:focus-visible,
.fav-detail-cover[role="button"]:focus-visible {
    outline: 2px solid var(--fav-ring);
    outline-offset: 4px;
}

.fav-tile-open:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.fav-tile-name {
    display: -webkit-box;
    margin-top: 11px;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--fav-ink);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.fav-tile-count {
    min-height: 1.45em;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--fav-muted);
    font-variant-numeric: tabular-nums;
}

/* Cover box. favorites-cover.css owns the art and the theme masks; these are only the structural basics, so a
   tile still looks right when that stylesheet is missing. The hairline is an inset outline because, unlike an
   inset shadow, it paints above the image. */
.fav-cover {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--fav-radius);
    background: var(--fav-page);
    outline: 1px solid var(--fav-cover-line);
    outline-offset: -1px;
    transition: box-shadow 0.16s ease;
}

.fav-cover > .fav-cover-art,
.fav-cover > .fav-cover-img,
.fav-cover > .fav-cover-fallback {
    display: block;
    width: 100%;
    height: 100%;
}

.fav-cover > .fav-cover-img {
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
}

.fav-cover > .fav-cover-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--fav-hue, 12) 30% 91%);
    color: hsl(var(--fav-hue, 12) 32% 34%);
    font-size: 54px;
    font-weight: 600;
    line-height: 1;
}

body.theme-dark .fav-cover > .fav-cover-fallback {
    background: hsl(var(--fav-hue, 12) 18% 24%);
    color: hsl(var(--fav-hue, 12) 35% 80%);
}

.fav-tile:hover .fav-cover,
.fav-tile-open:focus-visible .fav-cover {
    box-shadow: var(--fav-hover-shadow);
}

.fav-cover-saving {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 64%);
}

body.theme-dark .fav-cover-saving {
    background: rgb(0 0 0 / 52%);
}

.fav-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid var(--fav-line-strong);
    border-top-color: var(--fav-accent);
    border-radius: 50%;
    animation: fav-spin 0.8s linear infinite;
}

@keyframes fav-spin {
    to { transform: rotate(360deg); }
}

/* "⋯" appears on hover / keyboard focus; touch screens have no hover, so it stays visible there. */
.fav-tile-more {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--fav-line);
    border-radius: 50%;
    background: var(--fav-raised);
    color: var(--fav-ink);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.14s ease, border-color 0.14s ease;
}

.fav-tile:hover .fav-tile-more,
.fav-tile:focus-within .fav-tile-more,
.fav-tile[data-fav-menu-open] .fav-tile-more {
    opacity: 1;
}

.fav-tile-more:hover {
    border-color: var(--fav-line-strong);
}

.fav-tile-more:focus-visible {
    outline: 2px solid var(--fav-ring);
    outline-offset: 2px;
}

@media (hover: none) {
    .fav-tile-more {
        opacity: 1;
    }
}

/* "新建题目单": a dashed hairline square with a plus. */
.fav-newcover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px dashed var(--fav-line-strong);
    border-radius: var(--fav-radius);
    color: var(--fav-muted);
    transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.fav-tile-create:hover:not(:disabled) .fav-newcover,
.fav-tile-create:focus-visible .fav-newcover {
    border-color: var(--fav-accent);
    background: var(--fav-tint);
    color: var(--fav-accent);
}

/* The second line of the "new" tile only matters while a question is being dragged. */
.fav-tile-new .fav-tile-count {
    visibility: hidden;
}

.fav-root[data-fav-dragging] .fav-tile-new .fav-tile-count,
.fav-tile-new .fav-tile-create:disabled .fav-tile-count {
    visibility: visible;
}

/* Loading skeleton */
.fav-tile-skeleton {
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.fav-skeleton-cover,
.fav-skeleton-line {
    display: block;
    border-radius: var(--fav-radius);
    background: var(--fav-line);
    animation: fav-pulse 1.4s ease-in-out infinite;
}

.fav-skeleton-cover {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.fav-skeleton-line {
    width: 72%;
    height: 12px;
    margin-top: 13px;
    border-radius: 6px;
}

.fav-skeleton-line.is-short {
    width: 34%;
    margin-top: 8px;
}

@keyframes fav-pulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 0.4; }
}

/* Empty / error / loading blocks */
.fav-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 560px;
    margin: 36px auto 0;
    padding: 26px 24px;
    border: 1px solid var(--fav-line);
    border-radius: var(--fav-radius);
    background: var(--fav-surface);
    color: var(--fav-muted);
    text-align: center;
}

.fav-state-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 650;
    color: var(--fav-ink);
}

.fav-state-text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
}

.fav-state-steps {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.65;
    list-style: none;
    text-align: left;
}

.fav-state-steps li {
    position: relative;
    padding-left: 16px;
}

.fav-state-steps li::before {
    content: "";
    position: absolute;
    top: 0.72em;
    left: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--fav-accent);
    opacity: 0.7;
}

.fav-state-error .fav-state-title {
    font-weight: 600;
}

/* ---------- 5. Drop affordance: accent hairline ring + soft tint + a short text hint ---------- */
.fav-drop-hint {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: none;
    padding: 6px 9px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--fav-raised);
    box-shadow: 0 0 0 1px var(--fav-accent);
    color: var(--fav-accent);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
}

/* Tiles: the hint sits on the lower edge of the square cover, whatever the text below it measures. */
.fav-tile-art {
    position: relative;
    display: block;
}

.fav-tile[data-fav-dropover] .fav-cover,
.fav-tile[data-fav-dropover] .fav-newcover {
    outline: 1.5px solid var(--fav-accent);
    outline-offset: 3px;
    border-color: var(--fav-accent);
    background-color: var(--fav-tint);
}

.fav-tile[data-fav-dropover] .fav-newcover {
    color: var(--fav-accent);
}

.fav-tile[data-fav-dropover] .fav-drop-hint {
    display: block;
}

/* While a drop is possible the tile's children must not swallow drag events (that is what causes flicker). */
.fav-tile[data-fav-dropover] * {
    pointer-events: none;
}

.fav-detail-view {
    position: relative;
    border-radius: var(--fav-radius);
}

.fav-detail-view[data-fav-dropover] {
    outline: 1.5px solid var(--fav-accent);
    outline-offset: 10px;
    background-color: var(--fav-tint);
}

.fav-drop-hint-page {
    position: sticky;
    right: auto;
    bottom: 18px;
    left: auto;
    width: max-content;
    max-width: min(420px, 90%);
    margin: 0 auto;
    padding: 9px 16px;
    font-size: 13.5px;
    box-shadow: 0 0 0 1px var(--fav-accent), var(--fav-shadow);
}

.fav-detail-view[data-fav-dropover] > .fav-drop-hint-page {
    display: block;
}

/* The tab is outside any .fav-scope, so its spring-load marker spells the colours out. It is a data attribute
   because switchMainTab rewrites className on every switch. */
#tab_favorites[data-fav-dropover] {
    box-shadow: inset 0 0 0 1.5px #ff4b4b;
    background-color: #fff1f2 !important;
    color: #e11d48 !important;
}

body.theme-dark #tab_favorites[data-fav-dropover] {
    box-shadow: inset 0 0 0 1.5px #ff6b6b;
    background-color: rgb(255 107 107 / 14%) !important;
    color: #ff8f85 !important;
}

body.skin-warm-paper[class] #mainTabs > button#tab_favorites[data-fav-dropover] {
    box-shadow: none;
    border-bottom-color: var(--warm-accent, #bc5143) !important;
    border-radius: 8px 8px 0 0 !important;
    background: #f8eeea !important;
    color: var(--warm-accent, #bc5143) !important;
}

/* ---------- 6. Detail view ---------- */
.fav-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 20px;
    padding: 6px 10px 6px 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--fav-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    cursor: pointer;
    transition: color 0.14s ease, background-color 0.14s ease;
}

.fav-back:hover {
    background: var(--fav-tint);
    color: var(--fav-accent);
}

.fav-back:focus-visible,
.fav-btn:focus-visible,
.fav-link:focus-visible,
.fav-icon-btn:focus-visible,
.fav-menu-item:focus-visible,
.fav-picker-new:focus-visible {
    outline: 2px solid var(--fav-ring);
    outline-offset: 2px;
}

.fav-detail-head {
    display: flex;
    align-items: flex-end;
    gap: 26px;
    margin: 0 0 26px;
}

.fav-detail-cover {
    position: relative;
    flex: 0 0 auto;
    width: 184px;
    border-radius: var(--fav-radius);
}

.fav-detail-cover[role="button"] {
    cursor: pointer;
}

.fav-detail-cover-hint {
    position: absolute;
    right: 8px;
    bottom: 8px;
    left: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--fav-raised);
    box-shadow: 0 0 0 1px var(--fav-line);
    color: var(--fav-ink);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: opacity 0.14s ease;
    pointer-events: none;
}

.fav-detail-cover[role="button"]:hover .fav-detail-cover-hint,
.fav-detail-cover[role="button"]:focus-visible .fav-detail-cover-hint {
    opacity: 1;
}

.fav-detail-info {
    min-width: 0;
    padding-bottom: 2px;
}

.fav-eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--fav-muted);
    text-transform: uppercase;
}

.fav-detail-name {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: 0.005em;
    color: var(--fav-ink);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.fav-detail-stats {
    margin: 8px 0 0;
    font-size: 13.5px;
    color: var(--fav-muted);
    font-variant-numeric: tabular-nums;
}

.fav-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.fav-detail-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--fav-line);
    border-radius: 10px;
    background: var(--fav-surface);
    color: var(--fav-muted);
    font-size: 13.5px;
}

/* Same shape as #questionsGrid: classic cards bring their own bottom margin, warm-paper cards rely on the gap. */
.fav-detail-cards {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.fav-detail-chunk {
    display: contents;
}

body.layout-warm-paper[class] .fav-detail-cards {
    gap: 24px;
}

.fav-detail-foot .fav-state {
    flex-direction: row;
    justify-content: center;
    margin-top: 12px;
    padding: 18px 20px;
}

.fav-detail-foot .fav-state-empty,
.fav-detail-foot .fav-state-error {
    flex-direction: column;
}

.fav-detail-more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

body.layout-warm-paper[class] .fav-detail-more {
    margin-top: 28px;
}

/* ---------- 7. Controls ---------- */
.fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--fav-line-strong);
    border-radius: 8px;
    background: var(--fav-surface);
    color: var(--fav-ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.fav-btn:hover:not(:disabled) {
    border-color: var(--fav-muted);
}

.fav-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.fav-btn-sm {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
}

.fav-btn-primary {
    border-color: var(--fav-accent);
    background: var(--fav-accent);
    color: var(--fav-accent-ink);
}

.fav-btn-primary:hover:not(:disabled) {
    border-color: var(--fav-accent-hover);
    background: var(--fav-accent-hover);
}

.fav-btn-danger {
    border-color: transparent;
    background: none;
    color: var(--fav-danger);
}

.fav-btn-danger:hover:not(:disabled) {
    border-color: var(--fav-danger);
}

.fav-link {
    margin: 0;
    padding: 2px 4px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--fav-accent);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.fav-link:hover {
    text-decoration: underline;
}

.fav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--fav-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.fav-icon-btn:hover {
    background: var(--fav-tint);
    color: var(--fav-ink);
}

.fav-input {
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--fav-line-strong);
    border-radius: 8px;
    background: var(--fav-surface);
    color: var(--fav-ink);
    font: inherit;
    font-size: 14px;
}

.fav-input::placeholder {
    color: var(--fav-muted);
    opacity: 0.8;
}

/* The ring is a shadow, not a border colour: the dark theme pins input borders with !important. */
.fav-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--fav-ring);
}

.fav-input[aria-invalid="true"] {
    box-shadow: 0 0 0 1.5px var(--fav-danger);
}

/* ---------- 8. Overlay layers (appended to <body>) ---------- */
.fav-layer {
    position: fixed;
    inset: 0;
    z-index: 1750;
    pointer-events: none;
    font-size: 14px;
    line-height: 1.5;
}

.fav-dialog-layer {
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    pointer-events: auto;
}

.fav-layer-backdrop {
    position: absolute;
    inset: 0;
    background: var(--fav-backdrop);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: auto;
    touch-action: none;
}

.fav-layer.is-open .fav-layer-backdrop {
    opacity: 1;
}

/* Picker */
.fav-picker {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 296px;
    max-width: calc(100vw - 16px);
    max-height: min(440px, calc(100dvh - 24px));
    overflow: hidden;
    border: 1px solid var(--fav-line);
    border-radius: var(--fav-radius);
    background: var(--fav-raised);
    box-shadow: var(--fav-shadow);
    color: var(--fav-ink);
    opacity: 0;
    transition: opacity 0.14s ease;
    pointer-events: auto;
}

.fav-picker:focus {
    outline: none;
}

.fav-layer.is-open .fav-picker {
    opacity: 1;
}

body.style-liquid-glass .fav-picker,
body.style-liquid-glass .fav-menu,
body.style-liquid-glass .fav-dialog {
    -webkit-backdrop-filter: var(--glass-blur, blur(20px) saturate(180%));
    backdrop-filter: var(--glass-blur, blur(20px) saturate(180%));
}

.fav-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--fav-line);
}

.fav-picker-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fav-picker-title {
    font-size: 14px;
    font-weight: 650;
}

.fav-picker-qid {
    overflow: hidden;
    font: 500 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    color: var(--fav-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-picker-layer[data-variant="popover"] .fav-picker-close {
    display: none;
}

.fav-picker-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fav-picker-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 7px 8px;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.fav-picker-row:hover {
    background: var(--fav-tint);
}

.fav-picker-row:focus-visible {
    outline: 2px solid var(--fav-ring);
    outline-offset: -2px;
}

.fav-picker-thumb {
    flex: 0 0 40px;
    width: 40px;
}

.fav-picker-thumb .fav-cover {
    border-radius: 7px;
}

.fav-picker-thumb .fav-cover > .fav-cover-fallback {
    font-size: 17px;
}

.fav-picker-thumb .fav-spinner {
    width: 14px;
    height: 14px;
}

.fav-picker-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.fav-picker-name {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-picker-count {
    font-size: 12px;
    color: var(--fav-muted);
    font-variant-numeric: tabular-nums;
}

.fav-picker-check {
    display: flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--fav-line-strong);
    border-radius: 50%;
    color: transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.fav-picker-check svg {
    width: 14px;
    height: 14px;
}

.fav-picker-row[aria-pressed="true"] .fav-picker-check {
    border-color: var(--fav-accent);
    background: var(--fav-accent);
    color: var(--fav-accent-ink);
}

.fav-picker-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px;
    color: var(--fav-muted);
    font-size: 13.5px;
    text-align: center;
}

.fav-picker-status.is-error {
    flex-direction: column;
    gap: 6px;
    color: var(--fav-ink);
}

.fav-picker-error {
    margin: 0;
    padding: 0 14px 8px;
    color: var(--fav-danger);
    font-size: 12.5px;
    line-height: 1.5;
}

.fav-picker-error[hidden] {
    display: none;
}

.fav-picker-foot {
    padding: 6px;
    border-top: 1px solid var(--fav-line);
}

.fav-picker-foot:empty {
    display: none;
}

.fav-picker-new {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin: 0;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--fav-accent);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.fav-picker-new:hover:not(:disabled) {
    background: var(--fav-tint);
}

.fav-picker-new:disabled {
    color: var(--fav-muted);
    cursor: not-allowed;
}

.fav-picker-create {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 4px;
}

.fav-picker-create-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Tile menu */
.fav-menu {
    position: absolute;
    min-width: 148px;
    padding: 5px;
    border: 1px solid var(--fav-line);
    border-radius: 10px;
    background: var(--fav-raised);
    box-shadow: var(--fav-shadow);
    pointer-events: auto;
}

.fav-menu-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--fav-ink);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

.fav-menu-item:hover {
    background: var(--fav-tint);
}

.fav-menu-item.is-danger {
    color: var(--fav-danger);
}

/* Name dialog */
.fav-dialog {
    position: relative;
    width: min(400px, 100%);
    margin: 0;
    padding: 22px 22px 18px;
    border: 1px solid var(--fav-line);
    border-radius: var(--fav-radius);
    background: var(--fav-raised);
    box-shadow: var(--fav-shadow);
    color: var(--fav-ink);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.fav-layer.is-open .fav-dialog {
    opacity: 1;
}

.fav-dialog-title {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.fav-field {
    display: grid;
    gap: 7px;
    margin: 0;
}

.fav-field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fav-muted);
}

.fav-field-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 20px;
    margin-top: 6px;
}

.fav-field-hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--fav-danger);
}

.fav-field-hint[data-tone="warn"] {
    color: var(--fav-muted);
}

.fav-field-counter {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--fav-muted);
    font-variant-numeric: tabular-nums;
}

.fav-dialog-note {
    margin: 8px 0 0;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--fav-tint);
    color: var(--fav-ink);
    font-size: 12.5px;
    line-height: 1.55;
}

.fav-dialog-note code {
    font: 600 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    overflow-wrap: anywhere;
}

.fav-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ---------- 9. Phones ---------- */
.fav-m-row {
    overflow: hidden;
    border: 1px solid var(--fav-line);
    border-radius: var(--fav-radius);
    background: var(--fav-surface);
}

.fav-m-row + .fav-m-row,
.fav-detail-chunk + .fav-detail-chunk > .fav-m-row:first-child {
    margin-top: 12px;
}

.fav-m-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
}

.fav-m-row-id {
    min-width: 0;
    overflow: hidden;
    font: 650 13.5px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fav-m-row-marks {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fav-muted);
    font-variant-numeric: tabular-nums;
}

.fav-m-row-image {
    min-height: 72px;
    border-top: 1px solid var(--fav-line);
    border-bottom: 1px solid var(--fav-line);
    background: #ffffff;
}

body.theme-dark .fav-m-row-image {
    background: #1b1d20;
}

.fav-m-row-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

.fav-m-row-image.is-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 14px;
    background: var(--fav-page);
    color: var(--fav-muted);
    font-size: 13px;
    text-align: center;
}

.fav-m-row-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px 12px;
}

.fav-star-btn .fav-star-glyph {
    font-size: 15px;
    line-height: 1;
}

.fav-star-btn[aria-pressed="true"] {
    border-color: var(--fav-accent);
    background: var(--fav-tint);
    color: var(--fav-accent);
}

@media (max-width: 767px) {
    .fav-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 18px;
    }

    .fav-title {
        font-size: 20px;
    }

    .fav-hint {
        white-space: normal;
    }

    .fav-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 14px;
    }

    .fav-tile-more {
        width: 36px;
        height: 36px;
        opacity: 1;
    }

    .fav-tile-new .fav-tile-count {
        display: none;
    }

    .fav-detail-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 20px;
    }

    .fav-detail-cover {
        width: 148px;
    }

    .fav-detail-name {
        font-size: 22px;
    }

    .fav-detail-actions {
        width: 100%;
    }

    .fav-btn {
        height: 42px;
        padding: 0 16px;
        font-size: 14px;
    }

    .fav-btn-sm {
        height: 40px;
    }

    .fav-back {
        margin-bottom: 14px;
        padding: 10px 12px 10px 6px;
    }

    /* 16px keeps iOS from zooming the page when the field is focused. */
    .fav-input {
        height: 44px;
        font-size: 16px;
    }

    .fav-menu-item {
        padding: 12px 14px;
        font-size: 14.5px;
    }

    /* Picker becomes a bottom sheet with a backdrop; it rides above the on-screen keyboard. */
    .fav-picker-layer[data-variant="sheet"] {
        pointer-events: auto;
    }

    .fav-picker-layer[data-variant="sheet"] .fav-picker {
        right: 0;
        bottom: var(--fav-keyboard-inset, 0px);
        left: 0;
        width: auto;
        max-width: none;
        max-height: min(72dvh, calc(100dvh - var(--fav-keyboard-inset, 0px) - 40px));
        padding-bottom: env(safe-area-inset-bottom);
        border-width: 1px 0 0;
        border-radius: 16px 16px 0 0;
        transform: translateY(14px);
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    .fav-picker-layer[data-variant="sheet"].is-open .fav-picker {
        transform: none;
    }

    .fav-picker-layer[data-variant="sheet"] .fav-picker-row {
        padding: 10px;
    }

    .fav-picker-layer[data-variant="sheet"] .fav-picker-new {
        padding: 13px 10px;
    }

    .fav-dialog-layer {
        align-items: flex-end;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    }

    .fav-dialog {
        width: 100%;
    }
}

/* ---------- 10. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
    .fav-scope,
    .fav-scope *,
    .fav-scope *::before,
    .fav-scope *::after {
        animation: none !important;
        transition: none !important;
    }

    .fav-spinner {
        border-top-color: var(--fav-accent);
        border-right-color: var(--fav-accent);
    }
}