/*
 * Syungbook user theme preview v1 (v9.74)
 * Preview only: activated by html.user-design-next.
 * Shared foundation comes from design-tokens.css.
 * Reader layout/content styling is intentionally excluded in this phase.
 */

html.user-design-next,
html.user-design-next body {
  background: var(--sy-page) !important;
  color: var(--sy-text) !important;
}

html.user-design-next body {
  transition: background-color var(--sy-normal), color var(--sy-normal);
}

html.user-design-next .app-shell {
  color: var(--sy-text);
}

html.user-design-next .site-header {
  background: color-mix(in srgb, var(--sy-surface) 96%, transparent) !important;
  border-color: var(--sy-line) !important;
  box-shadow: none !important;
}

html.user-design-next .site-header::before,
html.user-design-next .site-header.compact-mode::before {
  background: color-mix(in srgb, var(--sy-page) 95%, transparent) !important;
  border-color: var(--sy-line) !important;
}

html.user-design-next .brand,
html.user-design-next .brand-text,
html.user-design-next .header-text-button,
html.user-design-next .header-account-button,
html.user-design-next .header-icon-button {
  color: var(--sy-text) !important;
}

html.user-design-next .brand-mark {
  color: var(--sy-accent) !important;
}

html.user-design-next .header-icon-button,
html.user-design-next .header-text-button,
html.user-design-next .header-account-button,
html.user-design-next .ghost-button,
html.user-design-next .quick-filter-button,
html.user-design-next .resume-shortcut-button,
html.user-design-next .view-button,
html.user-design-next .mobile-filter-toggle,
html.user-design-next .quote-feed-entry-button,
html.user-design-next .quote-feed-sort-button,
html.user-design-next .profile-library-mode-tab,
html.user-design-next .profile-toolbar button,
html.user-design-next .library-more-button,
html.user-design-next .load-more-button,
html.user-design-next .empty-reset-button,
html.user-design-next .modal-secondary-button,
html.user-design-next .simple-modal-close,
html.user-design-next .library-clear-button,
html.user-design-next .preference-segmented button {
  background: var(--sy-button-bg) !important;
  border-color: var(--sy-button-border) !important;
  color: var(--sy-button-text) !important;
  box-shadow: none !important;
}

html.user-design-next .header-icon-button:hover,
html.user-design-next .header-text-button:hover,
html.user-design-next .header-account-button:hover,
html.user-design-next .ghost-button:hover,
html.user-design-next .quick-filter-button:hover,
html.user-design-next .resume-shortcut-button:hover,
html.user-design-next .view-button:hover,
html.user-design-next .mobile-filter-toggle:hover,
html.user-design-next .quote-feed-entry-button:hover,
html.user-design-next .quote-feed-sort-button:hover,
html.user-design-next .profile-toolbar button:hover,
html.user-design-next .library-more-button:hover,
html.user-design-next .load-more-button:hover,
html.user-design-next .empty-reset-button:hover,
html.user-design-next .modal-secondary-button:hover,
html.user-design-next .simple-modal-close:hover,
html.user-design-next .library-clear-button:hover,
html.user-design-next .preference-segmented button:hover {
  background: var(--sy-button-hover) !important;
  border-color: var(--sy-line-strong) !important;
}

html.user-design-next .quick-filter-button.active,
html.user-design-next .view-button.active,
html.user-design-next .quote-feed-sort-button.is-active,
html.user-design-next .profile-library-mode-tab.active,
html.user-design-next .preference-segmented button.active,
html.user-design-next .auth-tab.active,
html.user-design-next .chip.active {
  background: var(--sy-button-active-bg) !important;
  border-color: var(--sy-accent-line) !important;
  color: var(--sy-button-active-text) !important;
  box-shadow: none !important;
}

html.user-design-next .modal-primary-button,
html.user-design-next .reader-search-button,
html.user-design-next .signup-primary-button,
html.user-design-next .profile-primary-button {
  background: var(--sy-accent) !important;
  border-color: var(--sy-accent) !important;
  color: var(--sy-on-accent) !important;
  box-shadow: none !important;
}

html.user-design-next .modal-primary-button:hover,
html.user-design-next .reader-search-button:hover,
html.user-design-next .signup-primary-button:hover,
html.user-design-next .profile-primary-button:hover {
  background: var(--sy-accent-hover) !important;
  border-color: var(--sy-accent-hover) !important;
}

html.user-design-next .search-box,
html.user-design-next .compact-header-search,
html.user-design-next input,
html.user-design-next select,
html.user-design-next textarea,
html.user-design-next .library-search,
html.user-design-next .sort-control select,
html.user-design-next .mobile-sort-options select {
  background: var(--sy-field-bg) !important;
  color: var(--sy-field-text) !important;
  border-color: var(--sy-field-border) !important;
  box-shadow: none !important;
}

html.user-design-next input::placeholder,
html.user-design-next textarea::placeholder,
html.user-design-next .compact-header-search input::placeholder {
  color: var(--sy-field-placeholder) !important;
}

html.user-design-next :is(input, select, textarea, button, [tabindex]):focus-visible {
  outline: 3px solid var(--sy-focus) !important;
  outline-offset: 2px;
}

html.user-design-next .hero {
  color: var(--sy-text) !important;
}

html.user-design-next .hero::before,
html.user-design-next .hero::after {
  opacity: 0 !important;
}

html.user-design-next .hero .eyebrow,
html.user-design-next .hero p,
html.user-design-next .hero-description,
html.user-design-next .filter-label,
html.user-design-next .filter-summary,
html.user-design-next .content-list-topline,
html.user-design-next .quote-feed-description,
html.user-design-next .quote-feed-meta,
html.user-design-next .simple-modal-description,
html.user-design-next .simple-modal-kicker {
  color: var(--sy-text-secondary) !important;
}

html.user-design-next .controls,
html.user-design-next .control-card,
html.user-design-next .content-card,
html.user-design-next .content-list-wrap,
html.user-design-next .status-card,
html.user-design-next .quote-feed-page,
html.user-design-next .quote-feed-card,
html.user-design-next .profile-card,
html.user-design-next .profile-library-card,
html.user-design-next .library-modal,
html.user-design-next .simple-modal,
html.user-design-next .mobile-filter-sheet {
  background: var(--sy-surface) !important;
  border-color: var(--sy-line) !important;
  color: var(--sy-text) !important;
  box-shadow: var(--sy-shadow-sm) !important;
}

html.user-design-next .control-card,
html.user-design-next .content-card,
html.user-design-next .status-card,
html.user-design-next .simple-modal,
html.user-design-next .profile-card,
html.user-design-next .profile-library-card {
  border-radius: var(--sy-radius-lg) !important;
}

html.user-design-next .content-card:hover,
html.user-design-next .content-list tbody tr:hover,
html.user-design-next .quote-feed-card:hover,
html.user-design-next .profile-library-card:hover {
  background: var(--sy-row-hover) !important;
}

html.user-design-next .content-list th,
html.user-design-next .quote-feed-table-head,
html.user-design-next .reader-search-table-head {
  background: var(--sy-table-head) !important;
  color: var(--sy-text-secondary) !important;
  border-color: var(--sy-line) !important;
}

html.user-design-next .content-list td,
html.user-design-next .content-list th,
html.user-design-next .content-list-wrap,
html.user-design-next .quote-feed-card,
html.user-design-next .profile-library-card {
  border-color: var(--sy-line-soft) !important;
}

html.user-design-next .chip,
html.user-design-next .card-tag,
html.user-design-next .reader-tag,
html.user-design-next .profile-offline-badge,
html.user-design-next .offline-badge {
  background: var(--sy-chip) !important;
  border-color: var(--sy-line) !important;
  color: var(--sy-neutral-badge-text) !important;
}

html.user-design-next .card-title,
html.user-design-next .list-title,
html.user-design-next .simple-modal h2,
html.user-design-next .quote-feed-head h2,
html.user-design-next .profile-page h2,
html.user-design-next .profile-page h3 {
  color: var(--sy-text) !important;
}

html.user-design-next .card-author,
html.user-design-next .list-author,
html.user-design-next .card-meta,
html.user-design-next .profile-muted,
html.user-design-next .library-item-meta {
  color: var(--sy-text-secondary) !important;
}

html.user-design-next .simple-modal-overlay,
html.user-design-next .mobile-filter-backdrop {
  background: var(--sy-overlay) !important;
}

html.user-design-next .simple-modal {
  background: var(--sy-modal-bg) !important;
  box-shadow: var(--sy-shadow-modal) !important;
}

html.user-design-next .modal-message {
  background: var(--sy-info-soft) !important;
  color: var(--sy-info) !important;
  border-color: var(--sy-accent-line) !important;
}

html.user-design-next .modal-message.error,
html.user-design-next .status-card.error {
  background: var(--sy-danger-soft) !important;
  color: var(--sy-danger) !important;
  border-color: color-mix(in srgb, var(--sy-danger) 32%, var(--sy-line)) !important;
}

html.user-design-next .network-status-banner,
html.user-design-next .profile-offline-help-toast,
html.user-design-next .toast,
html.user-design-next [role="status"].toast {
  background: var(--sy-toast-bg) !important;
  color: var(--sy-toast-text) !important;
  border-color: transparent !important;
  box-shadow: var(--sy-shadow-modal) !important;
}

html.user-design-next .profile-offline-progress,
html.user-design-next progress {
  background: var(--sy-progress-track) !important;
}

html.user-design-next .profile-offline-progress > span,
html.user-design-next progress::-webkit-progress-value {
  background: var(--sy-progress-fill) !important;
}

html.user-design-next ::-webkit-scrollbar-thumb {
  background: var(--sy-scroll-thumb);
}

/* Phase 1 intentionally leaves the actual reader surface unchanged. */
html.user-design-next .reader-overlay,
html.user-design-next .reader,
html.user-design-next .reader * {
  --sy-user-preview-reader-guard: 1;
}

@media (max-width: 840px) {
  html.user-design-next .site-header {
    border-radius: 0 !important;
  }

  html.user-design-next .controls {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html.user-design-next .mobile-filter-toggle,
  html.user-design-next .quick-filter-button,
  html.user-design-next .resume-shortcut-button {
    min-height: var(--sy-control-md) !important;
    border-radius: var(--sy-radius-md) !important;
  }

  html.user-design-next .mobile-filter-sheet {
    border-radius: var(--sy-radius-lg) var(--sy-radius-lg) 0 0 !important;
  }
}

/* =========================================================
   v9.75 preview hardening: make the whole user shell consume
   the shared semantic palette instead of legacy beige/purple.
   Reader body typography/background remains intentionally out.
   ========================================================= */
html.user-design-next {
  /* Legacy variable bridge for style.css/theme.css while preview is active. */
  --bg: var(--sy-page);
  --surface: var(--sy-surface);
  --surface-strong: var(--sy-surface-elevated);
  --ink: var(--sy-text);
  --muted: var(--sy-text-secondary);
  --line: var(--sy-line);
  --line-soft: var(--sy-line-soft);
  --accent: var(--sy-accent);
  --chip: var(--sy-chip);
  --shadow: var(--sy-shadow-sm);
  --radius-md: var(--sy-radius-lg);
  --radius-lg: 16px;

  --theme-page: var(--sy-page);
  --theme-surface: var(--sy-surface);
  --theme-surface-strong: var(--sy-surface-elevated);
  --theme-surface-soft: var(--sy-surface-subtle);
  --theme-text: var(--sy-text);
  --theme-muted: var(--sy-text-secondary);
  --theme-line: var(--sy-line);
  --theme-line-soft: var(--sy-line-soft);
  --theme-secondary-bg: var(--sy-control);
  --theme-secondary-hover: var(--sy-control-hover);
  --theme-secondary-text: var(--sy-text);
  --theme-hover: var(--sy-control-hover);
  --theme-overlay: var(--sy-overlay);
  --theme-shadow: var(--sy-shadow-sm);
}

/* Neutral utility surfaces: remove warm legacy tints. */
html.user-design-next :is(
  .view-switch,
  .auth-tabs,
  .signup-benefits > div,
  .help-points > div,
  .library-entry,
  .account-preference-row,
  .detailed-help-sections section,
  .feedback-account-fields,
  .my-library-detail-card,
  .quote-feed-sort-group,
  .reader-share-saved-panel
) {
  background: var(--sy-surface-subtle) !important;
  border-color: var(--sy-line) !important;
  color: var(--sy-text) !important;
  box-shadow: none !important;
}

html.user-design-next :is(
  .clear-search,
  .card-arrow,
  .empty-symbol,
  .reader-filename,
  .my-library-counts,
  .my-library-modal-meta,
  .my-library-detail-kind
) {
  color: var(--sy-text-tertiary) !important;
}

html.user-design-next .spinner,
html.user-design-next .reader-pending-spinner {
  border-color: var(--sy-line-strong) !important;
  border-top-color: var(--sy-accent) !important;
}

/* v9.81 - user preview legacy warm-state cleanup.
 * Keep selection/hover states on the same cool semantic tokens without
 * changing legacy theme.css outside ?ui=next. */
html.user-design-next .viewer-font-option {
  background: var(--sy-button-bg) !important;
  border-color: var(--sy-button-border) !important;
  color: var(--sy-button-text) !important;
}
html.user-design-next .viewer-font-option:hover {
  background: var(--sy-button-hover) !important;
  border-color: var(--sy-line-strong) !important;
}
html.user-design-next .viewer-font-option.active {
  background: var(--sy-button-active-bg) !important;
  border-color: var(--sy-accent-line) !important;
  color: var(--sy-button-active-text) !important;
}

html.user-design-next .profile-library-mode-tabs {
  background: var(--sy-surface-subtle) !important;
  border-color: var(--sy-line) !important;
}
html.user-design-next .profile-library-mode-tabs button {
  color: var(--sy-text-secondary) !important;
}
html.user-design-next .profile-library-mode-tabs button:hover {
  background: var(--sy-button-hover) !important;
  color: var(--sy-text) !important;
}
html.user-design-next .profile-library-mode-tabs button.active {
  background: var(--sy-button-active-bg) !important;
  color: var(--sy-button-active-text) !important;
}

html.user-design-next :is(
  .content-list .list-title-actions .list-download-button.item-download-button,
  .content-list .list-title-actions .list-quote-button.item-quote-button,
  .content-list .list-title-actions .list-mobile-postype-quote.item-quote-button,
  .content-card .card-actions > .card-download-button.item-download-button,
  .content-card .card-actions > .card-quote-button.item-quote-button
) {
  background: var(--sy-control) !important;
  border-color: var(--sy-line) !important;
  color: var(--sy-text-secondary) !important;
}
html.user-design-next :is(
  .content-list .list-title-actions .list-download-button.item-download-button,
  .content-list .list-title-actions .list-quote-button.item-quote-button,
  .content-list .list-title-actions .list-mobile-postype-quote.item-quote-button,
  .content-card .card-actions > .card-download-button.item-download-button,
  .content-card .card-actions > .card-quote-button.item-quote-button
):hover {
  background: var(--sy-control-hover) !important;
  border-color: var(--sy-line-strong) !important;
  color: var(--sy-text) !important;
}

html.user-design-next .viewer-font-more:hover {
  color: var(--sy-accent-text) !important;
}

/* State colors: consistent in light and dark. */
html.user-design-next :is(.signup-warning, .reader-tag.warning, .recent-postype-new-badge) {
  background: var(--sy-warning-soft) !important;
  border-color: color-mix(in srgb, var(--sy-warning) 28%, var(--sy-line)) !important;
  color: var(--sy-warning) !important;
}
html.user-design-next .signup-warning :is(strong, p) {
  color: var(--sy-warning) !important;
}
html.user-design-next :is(.feedback-message.is-error, .feedback-turnstile-wrap > small.is-error, .reader-error, .profile-secondary-button.danger, .offline-entry-delete) {
  color: var(--sy-danger) !important;
}
html.user-design-next :is(.reading-state-badge.read, .preference-toggle.active, .signup-complete-icon) {
  background: var(--sy-accent) !important;
  border-color: var(--sy-accent) !important;
  color: var(--sy-on-accent) !important;
}
html.user-design-next .reading-state-badge:not(.read),
html.user-design-next .list-status,
html.user-design-next .card-status {
  background: var(--sy-neutral-badge-bg) !important;
  border-color: var(--sy-line) !important;
  color: var(--sy-neutral-badge-text) !important;
}

/* Source/tag palette: cool, deliberate accents instead of old beige/purple. */
html.user-design-next :is(.source-badge.drive, .list-source-badge.drive) {
  background: var(--sy-source-drive-bg) !important;
  color: var(--sy-source-drive-text) !important;
  border-color: color-mix(in srgb, var(--sy-source-drive-text) 18%, var(--sy-line)) !important;
}
html.user-design-next :is(.source-badge.postype, .list-source-badge.postype) {
  background: var(--sy-source-postype-bg) !important;
  color: var(--sy-source-postype-text) !important;
  border-color: color-mix(in srgb, var(--sy-source-postype-text) 18%, var(--sy-line)) !important;
}
html.user-design-next :is(.offline-card-badge, .offline-list-badge, .profile-offline-badge, .offline-badge) {
  background: var(--sy-offline-bg) !important;
  color: var(--sy-offline-text) !important;
  border-color: color-mix(in srgb, var(--sy-offline-text) 22%, var(--sy-line)) !important;
}

/* Keep offline-library rows in the same neutral surface family as other library rows.
 * Only the compact offline badge/icon carries the semantic saved/offline accent. */
html.user-design-next .offline-profile-entry {
  background: var(--sy-surface) !important;
  color: var(--sy-text) !important;
  border-color: var(--sy-line-soft) !important;
  box-shadow: none !important;
}

html.user-design-next .offline-profile-entry:hover {
  background: var(--sy-row-hover) !important;
  border-color: var(--sy-line) !important;
}

html.user-design-next .offline-profile-entry :is(.offline-entry-title, .library-item-title, strong) {
  color: var(--sy-text) !important;
}

html.user-design-next .offline-profile-entry :is(.offline-entry-meta, .library-item-meta, small) {
  color: var(--sy-text-secondary) !important;
}
html.user-design-next :is(.recent-postype-bolt) {
  color: var(--sy-warning) !important;
}
html.user-design-next :is(.card-tag.card-cp-tag) {
  background: var(--sy-chip) !important;
  color: var(--sy-neutral-badge-text) !important;
}

/* Auth, profile and library controls. */
html.user-design-next :is(.auth-form input, .reader-memo-input) {
  background: var(--sy-field-bg) !important;
  border-color: var(--sy-field-border) !important;
  color: var(--sy-field-text) !important;
}
html.user-design-next :is(.my-library-modal-tabs button, .my-library-detail-actions button, .reader-memo-actions button) {
  background: var(--sy-button-bg) !important;
  border-color: var(--sy-button-border) !important;
  color: var(--sy-button-text) !important;
}
html.user-design-next .my-library-modal-tabs button.active,
html.user-design-next .my-library-modal-tabs button[aria-selected="true"] {
  background: var(--sy-button-active-bg) !important;
  border-color: var(--sy-accent-line) !important;
  color: var(--sy-button-active-text) !important;
}
html.user-design-next .library-entry-open:hover,
html.user-design-next .library-entry-remove:hover {
  background: var(--sy-row-hover) !important;
}
html.user-design-next .library-entry-remove {
  color: var(--sy-text-tertiary) !important;
  border-color: var(--sy-line-soft) !important;
}

/* Likes/share/public-state UI. */
html.user-design-next :is(.item-like-button.active, .reader-like-button.active, .reader-header-actions > .reader-like-button.active) {
  background: var(--sy-like-bg) !important;
  border-color: color-mix(in srgb, var(--sy-like-text) 28%, var(--sy-line)) !important;
  color: var(--sy-like-text) !important;
}
html.user-design-next :is(.reader-share-action.saved, .profile-quote-share-button[aria-pressed="true"]) {
  background: var(--sy-success-soft) !important;
  border-color: color-mix(in srgb, var(--sy-success) 25%, var(--sy-line)) !important;
  color: var(--sy-success) !important;
}
html.user-design-next :is(.reader-share-saved-head, .reader-share-public-copy strong) {
  color: var(--sy-text) !important;
}
html.user-design-next :is(.reader-share-public-toggle, .profile-quote-share-toggle-track) {
  background: var(--sy-surface-muted) !important;
}
html.user-design-next .profile-quote-share-toggle[aria-checked="true"] .profile-quote-share-toggle-track,
html.user-design-next .reader-share-public-toggle[aria-checked="true"] {
  background: var(--sy-accent) !important;
}

/* Quote feed/list chrome: no warm translucent leftovers. */
html.user-design-next :is(
  .quote-feed-entry-button,
  .content-list-meta-bar .quote-feed-entry-button,
  .content-section .section-head-actions .quote-feed-entry-button,
  .quote-feed-like-button,
  .quote-feed-detail-date
) {
  background: var(--sy-control) !important;
  border-color: var(--sy-line) !important;
  color: var(--sy-text-secondary) !important;
  box-shadow: none !important;
}

/* Scroll-to-top and compact icon affordances. */
html.user-design-next .page-scroll-top {
  background: var(--sy-surface-elevated) !important;
  border-color: var(--sy-line) !important;
  color: var(--sy-text) !important;
  box-shadow: var(--sy-shadow-modal) !important;
}
html.user-design-next .page-scroll-top:hover {
  background: var(--sy-control-hover) !important;
}
html.user-design-next :is(.cat-mark, .account-avatar, .resume-shortcut-icon) {
  background: var(--sy-accent) !important;
  color: var(--sy-on-accent) !important;
}

/* Preview theme owns user-shell scrollbars too. */
html.user-design-next {
  scrollbar-color: var(--sy-scroll-thumb) transparent;
}

/* Mobile density: keep the new palette calm rather than card-heavy. */
@media (max-width: 640px) {
  html.user-design-next :is(.content-card, .profile-library-card, .quote-feed-card) {
    border-radius: var(--sy-radius-md) !important;
    box-shadow: none !important;
  }

  html.user-design-next :is(.source-badge, .list-source-badge, .reading-state-badge, .offline-badge, .offline-list-badge) {
    box-shadow: none !important;
  }
}

/* v9.83 - restore information-tag identity while keeping the preview theme shell cool.
 * These badges encode content metadata, so their established palette is preserved
 * across light/dark modes instead of being flattened into the generic theme chip. */
html.user-design-next .reader-tag:not(.subtle):not(.warning):not(.edited) {
  background: var(--sy-text) !important;
  border-color: transparent !important;
  color: var(--sy-surface) !important;
}
html.user-design-next .reader-tag.subtle {
  background: var(--sy-chip) !important;
  border-color: var(--sy-line) !important;
  color: var(--sy-text-secondary) !important;
}

/* Card metadata keeps the pre-preview semantic palette: CP / type / status. */
html.user-design-next .card-tag.card-cp-tag {
  background: #f5eee3 !important;
  border-color: transparent !important;
  color: #8c6943 !important;
}
html.user-design-next .card-tag.card-publish-tag {
  background: #edf3ff !important;
  border-color: transparent !important;
  color: #4d69b4 !important;
}
html.user-design-next .card-tag.card-status-tag.status-serial {
  background: #e9f8ee !important;
  border-color: transparent !important;
  color: #2e8950 !important;
}
html.user-design-next .card-tag.card-status-tag.status-complete {
  background: #f2ebff !important;
  border-color: transparent !important;
  color: #7753b2 !important;
}
html.theme-dark.user-design-next .card-tag.card-cp-tag {
  background: rgba(157,124,76,.18) !important;
  color: #e8d0ae !important;
}
html.theme-dark.user-design-next .card-tag.card-publish-tag {
  background: rgba(92,123,195,.18) !important;
  color: #bdd0ff !important;
}
html.theme-dark.user-design-next .card-tag.card-status-tag.status-serial {
  background: rgba(66,146,91,.18) !important;
  color: #bde9c9 !important;
}
html.theme-dark.user-design-next .card-tag.card-status-tag.status-complete {
  background: rgba(123,95,182,.22) !important;
  color: #d6c6ff !important;
}

/* Reader-search match is an interaction highlight, not a warm metadata tag. */
html.user-design-next .reader-search-row-context mark {
  background: var(--sy-accent-soft) !important;
  color: var(--sy-accent-text) !important;
  box-shadow: inset 0 0 0 1px var(--sy-accent-line) !important;
}

/* v9.84 - quote feed is a content canvas, not a generic surface card.
 * Keep the page transparent so it follows the light/dark page background,
 * preserve each quote card's own generated background, and keep feed-list
 * typography independent from the reader font preference. */
html.user-design-next .quote-feed-page {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.user-design-next .quote-feed-card,
html.user-design-next .quote-feed-card:hover {
  background: var(--quote-bg, #f3eee7) !important;
  color: var(--quote-color, #2a2724) !important;
}

html.user-design-next .quote-feed-card-text {
  font-family:
    Pretendard, "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Noto Sans KR", Arial, sans-serif !important;
}

/* v9.86 - profile navigation selection + offline storage toolbar polish */
html.user-design-next .profile-tabs button {
  border: 1px solid transparent !important;
}

html.user-design-next .profile-tabs button.active,
html.user-design-next .profile-tabs button[aria-selected="true"] {
  background: var(--sy-button-active-bg) !important;
  border-color: var(--sy-accent-line) !important;
  color: var(--sy-button-active-text) !important;
  box-shadow: inset 0 -2px 0 var(--sy-accent) !important;
}

html.user-design-next .profile-library-mode-tabs button.active,
html.user-design-next .profile-library-mode-tabs button[aria-pressed="true"] {
  background: var(--sy-button-active-bg) !important;
  border-color: var(--sy-accent-line) !important;
  color: var(--sy-button-active-text) !important;
  box-shadow: inset 0 -2px 0 var(--sy-accent) !important;
}

html.user-design-next .profile-offline-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 16px;
  margin: 10px 0 12px;
  padding: 12px 0 2px;
}

html.user-design-next .profile-offline-storage {
  min-width: 0;
}

html.user-design-next .profile-offline-storage-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

html.user-design-next .profile-offline-actions-note {
  color: var(--sy-text-secondary) !important;
  font-size: 12px;
  font-weight: 700;
}

html.user-design-next .profile-offline-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--sy-line) !important;
  border-radius: 50%;
  background: var(--sy-button-bg) !important;
  color: var(--sy-text-secondary) !important;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

html.user-design-next .profile-offline-usage-bar {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 999px;
  background: var(--sy-progress-track) !important;
}

html.user-design-next .profile-offline-usage-bar > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--sy-progress-fill) !important;
  transition: width var(--sy-normal);
}

html.user-design-next .profile-offline-usage-text {
  display: block;
  margin-top: 5px;
  color: var(--sy-text-tertiary) !important;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

html.user-design-next .profile-offline-actions-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

html.user-design-next .profile-offline-actions-buttons .profile-secondary-button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--sy-button-border) !important;
  background: var(--sy-button-bg) !important;
  color: var(--sy-button-text) !important;
  box-shadow: none !important;
}

html.user-design-next .profile-offline-actions-buttons .profile-secondary-button:hover {
  background: var(--sy-button-hover) !important;
  border-color: var(--sy-line-strong) !important;
}

html.user-design-next .profile-offline-actions-buttons .profile-secondary-button.danger {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--sy-danger) 24%, var(--sy-line)) !important;
  color: var(--sy-danger) !important;
}

html.user-design-next .profile-offline-actions-buttons .profile-secondary-button.danger:hover {
  background: var(--sy-danger-soft) !important;
  border-color: color-mix(in srgb, var(--sy-danger) 38%, var(--sy-line)) !important;
}

@media (max-width: 640px) {
  html.user-design-next .profile-offline-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  html.user-design-next .profile-offline-actions-buttons {
    justify-content: flex-end;
  }
}

/* v9.87 - keep next-theme offline storage layout identical to the base layout;
   only colors remain theme-specific. */
html.user-design-next .profile-offline-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  margin: 10px 0 12px;
  padding: 12px 0 2px;
}

html.user-design-next .profile-offline-storage {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: none;
}

html.user-design-next .profile-offline-usage-bar {
  width: 100%;
  height: 6px;
}

html.user-design-next .profile-offline-actions-buttons {
  width: 100%;
  justify-content: flex-end;
  margin-top: 1px;
}

html.user-design-next .profile-offline-help-toast {
  position: absolute;
  z-index: 40;
  top: 34px;
  right: 0;
  left: auto;
  width: min(320px, calc(100vw - 32px));
  max-width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--sy-line) !important;
  border-radius: 12px;
  background: var(--sy-toast-bg) !important;
  color: var(--sy-toast-text) !important;
  box-shadow: var(--sy-shadow-modal) !important;
  font-size: 11px;
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

html.user-design-next .profile-offline-help-toast[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  html.user-design-next .profile-offline-actions {
    gap: 8px;
  }

  html.user-design-next .profile-offline-actions-buttons {
    justify-content: flex-end;
  }

  html.user-design-next .profile-offline-help-toast {
    top: 32px;
    right: 0;
    width: min(300px, calc(100vw - 24px));
  }
}