/* MindLink Vault commercial polish patch
   Safe UI layer: overrides only, no data/behavior changes. */

:root {
  --commercial-radius: 14px;
  --commercial-radius-lg: 20px;
  --commercial-shadow: 0 18px 45px rgba(15, 23, 42, .10);
  --commercial-soft-border: rgba(120, 128, 140, .18);
}

.sidebar {
  border-right: 1px solid var(--commercial-soft-border) !important;
}

.brand,
.primary-action,
.metric,
.legacy-board,
.smart-inbox,
.toolbar,
.modal,
.detail-editor-panel,
.add-menu,
.filter-popover {
  border-radius: var(--commercial-radius-lg) !important;
}

.primary-action {
  box-shadow: 0 14px 28px rgba(23, 107, 135, .20) !important;
}

.commercial-control-center {
  gap: 10px !important;
}

.maintenance-disclosure {
  border: 1px solid var(--commercial-soft-border);
  border-radius: var(--commercial-radius);
  overflow: hidden;
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.maintenance-disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  gap: 2px;
  padding: 11px 12px;
  border-radius: var(--commercial-radius);
}

.maintenance-disclosure > summary::-webkit-details-marker {
  display: none;
}

.maintenance-title {
  font-weight: 750;
  letter-spacing: -.01em;
}

.maintenance-disclosure small {
  opacity: .68;
  font-size: 11px;
}

.maintenance-disclosure[open] > summary {
  border-bottom: 1px solid var(--commercial-soft-border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.maintenance-grid {
  padding: 10px;
  gap: 8px !important;
}

.maintenance-grid .control-tile {
  min-height: 48px !important;
  border-radius: 12px !important;
}

.control-tile,
.ghost-btn,
.icon-btn,
.segment,
.nav-item,
.chip,
.mini-btn {
  border-radius: 12px !important;
}

.nav-item,
.control-tile,
.metric,
.link-card,
.list-row {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

@media (hover: hover) {
  .nav-item:hover,
  .control-tile:hover,
  .metric:hover,
  .link-card:hover,
  .list-row:hover {
    transform: translateY(-1px);
  }
}

.mobile-nav.commercial-mobile-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.mobile-nav.commercial-mobile-nav .primary {
  transform: translateY(-12px);
  min-height: 58px !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 36px rgba(23, 107, 135, .28) !important;
}

.mobile-nav.commercial-mobile-nav button {
  min-width: 0;
}

.mobile-nav.commercial-mobile-nav span {
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }

  .app-shell {
    min-height: 100dvh !important;
  }

  .sidebar {
    width: min(88vw, 340px) !important;
    border-radius: 0 24px 24px 0 !important;
    box-shadow: var(--commercial-shadow) !important;
  }

  .topbar,
  .overview,
  .toolbar,
  .legacy-board,
  .smart-inbox,
  .file-library-panel,
  .health-center {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  dialog.modal,
  .modal[open] {
    width: min(100vw - 18px, 720px) !important;
    max-height: calc(100dvh - 18px) !important;
    border-radius: 22px !important;
  }

  .dialog-body,
  .modal-body,
  .review-body,
  .activity-body {
    max-height: calc(100dvh - 150px) !important;
    overflow: auto !important;
  }

  .add-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(86px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    border-radius: 22px !important;
    box-shadow: var(--commercial-shadow) !important;
  }

  .mobile-nav.commercial-mobile-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    border: 1px solid var(--commercial-soft-border) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16) !important;
    backdrop-filter: blur(18px) saturate(1.25);
  }
}

@media (max-width: 520px) {
  .overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .toolbar-main,
  .toolbar-left,
  .toolbar-right {
    gap: 8px !important;
  }

  .mobile-nav.commercial-mobile-nav span {
    font-size: 10px;
  }
}

/* Detail panel hotfix: make the editor usable and always closable */
body.detail-open {
  overflow: hidden !important;
}

#detailOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8900 !important;
  background: rgba(15, 23, 42, .28) !important;
  backdrop-filter: blur(2px) !important;
}

#detailOverlay.hidden {
  display: none !important;
  pointer-events: none !important;
}

#detailPanel.detail-panel {
  position: fixed !important;
  z-index: 9000 !important;
  top: 24px !important;
  right: 24px !important;
  bottom: 24px !important;
  left: auto !important;
  width: min(820px, calc(100vw - 48px)) !important;
  height: auto !important;
  max-height: calc(100dvh - 48px) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(calc(100% + 40px)) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: var(--surface, #fff) !important;
}

#detailPanel.detail-panel.open {
  transform: translateX(0) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#detailPanel .detail-head,
#detailPanel .detail-action-bar,
#detailPanel .detail-tabs,
#detailPanel .detail-footer {
  flex: 0 0 auto !important;
}

#detailPanel .detail-form {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#detailPanel .detail-editor-scroll {
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding-bottom: 96px !important;
}

#closeDetailBtn {
  position: relative !important;
  z-index: 9100 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

#detailPanel .detail-footer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background: color-mix(in srgb, var(--surface, #fff) 94%, transparent) !important;
  backdrop-filter: blur(16px) !important;
}

@media (max-width: 768px) {
  #detailPanel.detail-panel {
    top: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    left: 8px !important;
    width: auto !important;
    max-height: calc(100dvh - 16px - env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
    transform: translateY(100%) !important;
  }

  #detailPanel.detail-panel.open {
    transform: translateY(0) !important;
  }

  #detailPanel .detail-head {
    padding: 14px 14px 10px !important;
  }

  #detailPanel .detail-action-bar {
    overflow-x: auto !important;
    padding: 10px 12px !important;
  }

  #detailPanel .detail-tabs {
    padding: 8px 12px !important;
    overflow-x: auto !important;
  }

  #detailPanel .detail-editor-scroll {
    padding: 14px 12px 110px !important;
  }
}

/* Commercial Cloud Sync dashboard */
#syncHealthDialog.sync-health-modal {
  width: min(640px, calc(100vw - 32px)) !important;
  max-height: min(860px, calc(100dvh - 40px)) !important;
  overflow: hidden !important;
  user-select: none;
}

#syncHealthDialog .modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface, #fff) 94%, transparent);
  backdrop-filter: blur(14px);
}

.cloud-sync-card {
  margin: 0 0 16px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border, #d9e2e7) 82%, transparent);
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface, #fff) 96%, #eef8fb), color-mix(in srgb, var(--surface, #fff) 99%, #eef8fb));
  box-shadow: 0 18px 48px rgba(15, 23, 42, .08);
}

.cloud-sync-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.cloud-sync-card h3 {
  margin: 0 0 4px;
  font-size: 20px;
  letter-spacing: -.02em;
}

.cloud-sync-card-head span:not(.cloud-sync-status),
.cloud-sync-account span,
.backup-history-row span {
  color: var(--muted, #6b7280);
  font-size: 13px;
}

.cloud-sync-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand, #3c8297) 13%, #fff);
  color: var(--brand-strong, #256174);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

.cloud-sync-account {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 85%, #eef8fb);
  border: 1px solid color-mix(in srgb, var(--border, #d9e2e7) 74%, transparent);
  margin-bottom: 14px;
}

.commercial-sync-summary.sync-health-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
}

.commercial-sync-summary > div {
  min-width: 0 !important;
  border-radius: 14px !important;
  padding: 12px !important;
  background: var(--surface, #fff) !important;
}

.commercial-sync-summary strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.commercial-sync-actions.sync-health-actions {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.commercial-sync-actions .danger:not(.hidden) {
  grid-column: 1 / -1;
}

.backup-history-card {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border, #d9e2e7) 80%, transparent);
  background: var(--surface, #fff);
  padding: 12px 14px;
}

.backup-history-card summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--text, #17212b);
}

.backup-history-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}

#syncHealthDialog .developer-only.hidden,
.developer-only.hidden {
  display: none !important;
}

#syncHealthDialog:not(.is-dev-mode) .supabase-config-card {
  display: none !important;
}

#syncHealthDialog .sync-health-hint {
  border-radius: 14px !important;
  margin: 12px 0 0 !important;
  line-height: 1.45 !important;
}

#syncHealthDialog .supabase-config-card {
  margin-top: 16px !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, #fff 94%, #f59e0b) !important;
}

@media (max-width: 768px) {
  #syncHealthDialog.sync-health-modal {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    overflow-y: auto !important;
  }

  #syncHealthDialog .modal-head,
  #syncHealthDialog .cloud-sync-card,
  #syncHealthDialog .supabase-config-card {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .cloud-sync-card {
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .cloud-sync-card-head {
    flex-direction: column;
  }

  .commercial-sync-summary.sync-health-summary {
    grid-template-columns: 1fr !important;
  }

  .commercial-sync-actions.sync-health-actions {
    grid-template-columns: 1fr !important;
  }

  .backup-history-row {
    flex-direction: column;
  }
}

/* v3: keep Cloud Sync commercial panel self-contained and hide technical config from this modal */
#syncHealthDialog.sync-health-modal {
  box-sizing: border-box !important;
  width: min(680px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 36px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

#syncHealthDialog.sync-health-modal .modal-head {
  margin: 0 !important;
  padding: 20px 20px 14px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border, #d9e2e7) 65%, transparent) !important;
}

#syncHealthDialog.sync-health-modal .cloud-sync-card {
  margin: 18px 20px 20px !important;
}

/* Technical Supabase fields belong in Developer Settings, not in the user-facing Cloud Sync panel. */
#syncHealthDialog.sync-health-modal .supabase-config-card,
#syncHealthDialog.sync-health-modal .developer-only {
  display: none !important;
}

#syncHealthDialog .commercial-sync-summary strong,
#syncHealthDialog .cloud-sync-account strong {
  max-width: 100% !important;
  word-break: break-word !important;
}

#syncHealthDialog .commercial-sync-actions .ghost-btn,
#syncHealthDialog .commercial-sync-actions .primary-action {
  min-height: 44px !important;
}

@media (max-width: 768px), (max-height: 760px) {
  #syncHealthDialog.sync-health-modal {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  #syncHealthDialog.sync-health-modal .cloud-sync-card {
    margin: 14px 12px 28px !important;
  }
}

/* Commercial hardening patch v4 */
.commercial-mode .developer-only,
.commercial-mode .supabase-config-card {
  display: none !important;
}
.sync-health-modal {
  max-height: min(760px, calc(100dvh - 40px));
  overflow: hidden;
}
.sync-health-modal .cloud-sync-card {
  max-height: calc(100dvh - 128px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.sync-health-modal .modal-head .eyebrow::selection,
.sync-health-modal h2::selection,
.cloud-sync-card *::selection {
  background: transparent;
}
.cloud-sync-card input,
.cloud-sync-card textarea {
  user-select: text;
}
@media (max-width: 768px) {
  .sync-health-modal {
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .sync-health-modal .cloud-sync-card {
    max-height: calc(100dvh - 96px);
    border-radius: 16px;
  }
  .commercial-sync-summary {
    grid-template-columns: 1fr !important;
  }
  .commercial-sync-actions {
    grid-template-columns: 1fr !important;
  }
}

/* AI auto-enrichment controls */
.ai-auto-enrich-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(18, 47, 63, 0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #465562;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.ai-auto-enrich-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #3f879b;
}
.ai-auto-enrich-status {
  display: block;
  margin-top: 6px;
  color: #687789;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .smart-issue-actions {
    align-items: stretch;
  }
  .ai-auto-enrich-toggle {
    justify-content: center;
  }
}


/* Commercial MVP polish: readable import/export, dashboard stats, welcome wizard */
.top-actions .top-import-btn,
.top-actions .top-export-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-weight: 900;
}
.top-actions .top-import-btn svg,
.top-actions .top-export-btn svg { width: 18px; height: 18px; }
.top-actions .top-import-btn {
  background: rgba(63, 135, 155, 0.10) !important;
  color: #2f7588 !important;
  border-color: rgba(63, 135, 155, 0.18) !important;
}
.commercial-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.commercial-quick-stats article {
  padding: 16px;
  border: 1px solid rgba(18, 47, 63, 0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.82);
  box-shadow: 0 14px 34px rgba(18, 47, 63, 0.05);
}
.commercial-quick-stats span {
  display: block;
  color: #667484;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.commercial-quick-stats strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  color: #26313b;
}
.commercial-home-hero .home-actions { flex-wrap: wrap; }
.commercial-import-cta { border-color: rgba(63,135,155,.28) !important; color: #2f7588 !important; }
.account-plan-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.account-plan-card > div,
.account-plan-card > button {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(18, 47, 63, 0.10);
  border-radius: 16px;
  background: rgba(246, 250, 251, 0.92);
  color: inherit;
  text-align: left;
  font: inherit;
}
.account-plan-card > button {
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.account-plan-card > button:hover {
  border-color: rgba(47, 117, 136, .34);
  box-shadow: 0 10px 24px rgba(18, 47, 63, .08);
  transform: translateY(-1px);
}
.account-plan-card span {
  display: block;
  color: #69788a;
  font-size: 12px;
  font-weight: 800;
}
.account-plan-card strong {
  display: block;
  margin-top: 4px;
  color: #26313b;
}
.account-plan-card small {
  display: block;
  margin-top: 5px;
  color: #748292;
  font-size: 11px;
  line-height: 1.35;
}
.account-signed-in {
  display: grid;
  gap: 12px;
  margin-top: 4px;
}
.account-profile-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(18, 47, 63, .1);
  border-radius: 16px;
  background: rgba(248, 251, 252, .94);
}
.account-profile-row > div {
  min-width: 0;
}
.account-profile-row strong,
.account-profile-row span {
  display: block;
}
.account-profile-row strong {
  overflow: hidden;
  color: #26313b;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-profile-row > div span {
  margin-top: 3px;
  color: #69788a;
  font-size: 11px;
}
.account-avatar {
  display: grid !important;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #e4f2f5;
  color: #2f7588;
  font-weight: 800;
}
.account-status-badge {
  padding: 5px 8px;
  border-radius: 999px;
  background: #e7f6ee;
  color: #28835d;
  font-size: 10px;
  font-weight: 800;
}
.account-member-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.account-member-actions button {
  min-height: 42px;
}
.account-data-trust {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid #5cae91;
  border-radius: 0 8px 8px 0;
  background: rgba(92, 174, 145, .08);
  color: #627484;
  font-size: 11px;
  line-height: 1.45;
}
.pricing-modal {
  width: min(980px, calc(100vw - 28px));
  max-height: min(90vh, 820px);
  padding: 22px;
  overflow: auto;
  border: 1px solid rgba(47, 117, 136, .2);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(23, 35, 42, .28);
}
.pricing-modal:not([open]) {
  display: none;
}
.pricing-subtitle {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.pricing-notice {
  display: grid;
  gap: 3px;
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid rgba(47, 117, 136, .18);
  border-radius: 12px;
  background: rgba(228, 242, 245, .58);
}
.pricing-notice strong {
  color: #2f7588;
  font-size: 12px;
}
.pricing-notice span {
  color: #667484;
  font-size: 11px;
  line-height: 1.45;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.pricing-card {
  display: flex;
  min-width: 0;
  min-height: 330px;
  flex-direction: column;
  padding: 18px;
  border: 1px solid rgba(18, 47, 63, .11);
  border-radius: 16px;
  background: rgba(248, 251, 252, .72);
}
.pricing-card.featured {
  border-color: rgba(47, 117, 136, .35);
  box-shadow: 0 14px 30px rgba(18, 47, 63, .08);
}
.pricing-kicker {
  color: #2f7588;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.pricing-card h3 {
  margin: 8px 0 0;
  color: #26313b;
  font-size: 20px;
}
.pricing-price {
  min-height: 32px;
  margin: 8px 0 12px;
  color: #182631;
  font-size: 19px;
  font-weight: 800;
}
.pricing-price small {
  color: #748292;
  font-size: 11px;
}
.pricing-card ul {
  display: grid;
  gap: 9px;
  margin: 0 0 18px;
  padding: 0;
  color: #667484;
  font-size: 11px;
  line-height: 1.4;
  list-style: none;
}
.pricing-card li::before {
  margin-right: 7px;
  color: #3f879b;
  content: "✓";
  font-weight: 900;
}
.pricing-card button {
  width: 100%;
  margin-top: auto;
}
.pricing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  color: #748292;
  font-size: 11px;
}
.commercial-wizard-modal {
  max-width: 640px !important;
}
.commercial-wizard-steps {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
}
.commercial-wizard-steps article {
  padding: 14px 16px;
  border: 1px solid rgba(18,47,63,.10);
  border-radius: 16px;
  background: rgba(248,251,252,.94);
}
.commercial-wizard-steps strong { display: block; margin-bottom: 4px; color: #26313b; }
.commercial-wizard-steps span { color: #667484; line-height: 1.45; }
body.dark .commercial-quick-stats article,
body.dark .account-plan-card > div,
body.dark .account-plan-card > button,
body.dark .account-profile-row,
body.dark .pricing-card,
body.dark .commercial-wizard-steps article {
  background: rgba(20, 30, 38, 0.82);
  border-color: rgba(255,255,255,.10);
}
body.dark .commercial-quick-stats strong,
body.dark .account-plan-card strong,
body.dark .account-profile-row strong,
body.dark .pricing-card h3,
body.dark .pricing-price,
body.dark .commercial-wizard-steps strong { color: #eef5f7; }
body.dark .pricing-modal { background: #151a21; }
body.dark .pricing-notice { background: rgba(47, 117, 136, .12); }
@media (max-width: 900px) {
  .commercial-quick-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top-actions .top-import-btn span,
  .top-actions .top-export-btn span { display: none; }
  .top-actions .top-import-btn,
  .top-actions .top-export-btn { min-width: 42px; padding: 0 !important; justify-content: center; }
}
@media (max-width: 640px) {
  .commercial-quick-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .commercial-quick-stats article { padding: 12px; border-radius: 14px; }
  .commercial-quick-stats strong { font-size: 20px; }
  .account-plan-card { grid-template-columns: 1fr; }
  .account-member-actions,
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-card { min-height: 0; }
  .pricing-footer { align-items: stretch; flex-direction: column; }
  .account-profile-row { grid-template-columns: 42px minmax(0, 1fr); }
  .account-status-badge { grid-column: 2; justify-self: start; }
  .commercial-wizard-modal { width: min(94vw, 640px) !important; }
}

/* Commercial wizard v7: polished onboarding modal */
#commercialWelcomeWizard.commercial-wizard-modal {
  width: min(1120px, calc(100vw - 48px)) !important;
  max-width: 1120px !important;
  max-height: min(820px, calc(100dvh - 48px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(110, 137, 160, 0.28) !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,250,255,.96)) !important;
  box-shadow: 0 34px 90px rgba(14, 34, 52, .34), 0 0 0 1px rgba(255,255,255,.72) inset !important;
}
#commercialWelcomeWizard::backdrop {
  background: rgba(15, 30, 42, .58) !important;
  backdrop-filter: blur(8px) saturate(1.05);
}
.commercial-wizard-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 610px;
}
.commercial-wizard-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 46px 42px 42px;
  overflow: hidden;
  background: radial-gradient(circle at 35% 18%, rgba(83, 165, 255, .24), transparent 34%), linear-gradient(160deg, #f5fbff 0%, #edf6ff 55%, #f8fbff 100%);
  border-right: 1px solid rgba(38, 74, 110, .08);
}
.commercial-wizard-hero::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px -60px;
  height: 230px;
  background: radial-gradient(circle, rgba(44, 115, 255, .14), transparent 70%);
}
.wizard-rocket-scene {
  position: relative;
  min-height: 300px;
}
.wizard-rocket {
  position: absolute;
  left: 54px;
  top: 38px;
  width: 154px;
  height: 154px;
  display: grid;
  place-items: center;
  border-radius: 44px;
  font-size: 88px;
  transform: rotate(-10deg);
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(230,244,255,.64));
  box-shadow: 0 24px 56px rgba(21, 92, 181, .18), 0 0 0 1px rgba(255,255,255,.62) inset;
}
.wizard-cloud {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 35px rgba(20, 80, 145, .10);
}
.cloud-one { width: 154px; height: 42px; left: 42px; top: 222px; }
.cloud-two { width: 104px; height: 34px; left: 128px; top: 248px; opacity: .82; }
.wizard-orb {
  position: absolute;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 34px rgba(20, 80, 145, .12), 0 0 0 1px rgba(255,255,255,.7) inset;
  z-index: 1;
}
.wizard-orb::before { font-size: 24px; }
.orb-one { left: 2px; top: 178px; transform: rotate(-12deg); }
.orb-one::before { content: "🔖"; }
.orb-two { right: 22px; top: 86px; transform: rotate(10deg); }
.orb-two::before { content: "📁"; }
.orb-three { right: 42px; top: 192px; transform: rotate(13deg); }
.orb-three::before { content: "☁️"; }
.wizard-brand-copy {
  position: relative;
  z-index: 2;
}
.wizard-brand-copy span {
  display: block;
  color: #506070;
  font-size: 18px;
  font-weight: 850;
}
.wizard-brand-copy strong {
  display: block;
  margin-top: 8px;
  color: #1457d9;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.04em;
}
.wizard-brand-copy ul {
  display: grid;
  gap: 13px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: #435468;
  font-size: 16px;
  font-weight: 750;
}
.commercial-wizard-main {
  position: relative;
  padding: 48px 42px 36px;
  min-width: 0;
}
.wizard-close-btn {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(35, 58, 75, .10);
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 26px rgba(22, 40, 55, .10);
  color: #102030;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.wizard-title-block { padding-right: 56px; }
.wizard-title-block .eyebrow {
  margin: 0 0 8px !important;
  color: #316f89 !important;
  letter-spacing: .11em;
}
.wizard-title-block h2 {
  margin: 0;
  color: #101d2e;
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.055em;
}
.wizard-title-block p {
  margin: 14px 0 0;
  color: #536173;
  font-size: 18px;
  line-height: 1.45;
}
.wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
  margin-top: 24px;
}
.wizard-progress span {
  height: 8px;
  border-radius: 999px;
  background: rgba(29, 71, 105, .10);
}
.wizard-progress span:first-child {
  background: linear-gradient(90deg, #175dff, #4a8dff);
  box-shadow: 0 8px 18px rgba(23, 93, 255, .20);
}
#commercialWelcomeWizard .commercial-wizard-steps {
  display: grid;
  gap: 16px;
  margin: 34px 0 0;
}
#commercialWelcomeWizard .commercial-wizard-steps article {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 18px;
  min-height: 98px;
  padding: 18px !important;
  border: 1px solid rgba(39, 74, 103, .10) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 16px 34px rgba(20, 41, 62, .07);
}
.wizard-step-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 32px;
  font-weight: 950;
  box-shadow: 0 16px 28px rgba(0,0,0,.08), 0 0 0 1px rgba(255,255,255,.70) inset;
}
.wizard-step-icon.import { color: #1457d9; background: linear-gradient(145deg, #edf5ff, #dcebff); }
.wizard-step-icon.collection { color: #09966d; background: linear-gradient(145deg, #e8fff7, #d4f7eb); }
.wizard-step-icon.ai { color: #7047dc; background: linear-gradient(145deg, #f3efff, #e6dbff); }
.wizard-step-icon.sync { color: #d88400; background: linear-gradient(145deg, #fff7e8, #ffeac1); }
.wizard-step-number {
  display: inline-grid !important;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-right: 10px;
  border-radius: 999px;
  background: #155dff;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950;
  vertical-align: middle;
}
#commercialWelcomeWizard .commercial-wizard-steps article:nth-child(2) .wizard-step-number { background: #12a978; }
#commercialWelcomeWizard .commercial-wizard-steps article:nth-child(3) .wizard-step-number { background: #6d4de2; }
#commercialWelcomeWizard .commercial-wizard-steps article:nth-child(4) .wizard-step-number { background: #f19a00; }
#commercialWelcomeWizard .commercial-wizard-steps strong {
  display: inline !important;
  color: #102033 !important;
  font-size: 21px;
  line-height: 1.2;
}
#commercialWelcomeWizard .commercial-wizard-steps p {
  margin: 9px 0 0;
  color: #546477;
  font-size: 16px;
  line-height: 1.42;
}
#commercialWelcomeWizard .commercial-wizard-steps b {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  justify-self: end;
  border-radius: 999px;
  background: rgba(25, 53, 78, .06);
  color: #12283d;
  font-size: 36px;
  font-weight: 500;
}
.commercial-wizard-actions {
  display: grid;
  grid-template-columns: 190px minmax(200px, 280px) minmax(260px, 1fr);
  gap: 16px;
  padding: 20px 42px 24px;
  border-top: 1px solid rgba(32, 61, 89, .10);
  background: rgba(255,255,255,.68);
}
.commercial-wizard-actions button {
  min-height: 58px;
  border-radius: 18px;
  font-size: 17px;
  font-weight: 950;
  cursor: pointer;
}
.wizard-secondary-btn {
  border: 1px solid rgba(33, 57, 78, .10);
  background: rgba(255,255,255,.84);
  color: #142334;
  box-shadow: 0 12px 24px rgba(20, 41, 62, .07);
}
.wizard-outline-btn {
  border: 1px solid rgba(21, 93, 255, .35);
  background: rgba(255,255,255,.82);
  color: #1457d9;
}
.wizard-primary-btn {
  border: 0;
  background: linear-gradient(135deg, #1764ff, #0f55e8);
  color: #fff;
  box-shadow: 0 18px 36px rgba(17, 88, 240, .28);
}
.wizard-close-btn:hover,
.commercial-wizard-actions button:hover {
  transform: translateY(-1px);
}
body.dark #commercialWelcomeWizard.commercial-wizard-modal {
  background: linear-gradient(135deg, rgba(19, 27, 36, .98), rgba(14, 23, 33, .96)) !important;
  border-color: rgba(255,255,255,.12) !important;
}
body.dark .commercial-wizard-hero {
  background: radial-gradient(circle at 35% 18%, rgba(83, 165, 255, .16), transparent 34%), linear-gradient(160deg, #152434 0%, #101a26 100%);
  border-right-color: rgba(255,255,255,.08);
}
body.dark .wizard-title-block h2,
body.dark #commercialWelcomeWizard .commercial-wizard-steps strong,
body.dark .wizard-secondary-btn { color: #eef7ff !important; }
body.dark .wizard-title-block p,
body.dark #commercialWelcomeWizard .commercial-wizard-steps p,
body.dark .wizard-brand-copy ul { color: #aebdca; }
body.dark #commercialWelcomeWizard .commercial-wizard-steps article,
body.dark .wizard-secondary-btn,
body.dark .wizard-outline-btn,
body.dark .wizard-close-btn {
  background: rgba(25, 36, 47, .88) !important;
  border-color: rgba(255,255,255,.10) !important;
}
@media (max-width: 980px) {
  #commercialWelcomeWizard.commercial-wizard-modal {
    width: min(94vw, 720px) !important;
  }
  .commercial-wizard-shell {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .commercial-wizard-hero {
    display: none;
  }
  .commercial-wizard-main {
    padding: 34px 24px 24px;
  }
  .wizard-title-block h2 { font-size: clamp(28px, 7vw, 38px); }
  .commercial-wizard-actions {
    grid-template-columns: 1fr;
    padding: 16px 24px 22px;
  }
}

/* Overview metrics: match the compact pastel icon reference */
.overview {
  gap: 12px !important;
  margin-top: 12px !important;
}
.overview .metric {
  min-height: 72px !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(35, 65, 95, .1) !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 8px 24px rgba(30, 55, 80, .045) !important;
}
.overview .metric-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
}
.overview .metric-icon svg {
  width: 20px !important;
  height: 20px !important;
}
.overview .metric-copy {
  gap: 3px !important;
}
.overview .metric-copy span {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #68788b !important;
}
.overview .metric-copy strong,
.overview .metric.accent .metric-copy strong {
  font-size: 19px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  color: #101c2c !important;
}
#metricAllBtn .metric-icon {
  color: #2878ff !important;
  background: #eef5ff !important;
}
#metricFavoritesBtn .metric-icon {
  color: #3f7d4d !important;
  background: #eef7ed !important;
}
#metricGroupsBtn .metric-icon {
  color: #6959ff !important;
  background: #f2efff !important;
}
#metricTopDomainBtn .metric-icon {
  color: #f06c28 !important;
  background: #fff2e9 !important;
}
#metricTopDomainBtn .metric-copy strong {
  color: #e35e20 !important;
  font-size: 14px !important;
}
body.dark .overview .metric {
  background: rgba(24, 34, 45, .96) !important;
  border-color: rgba(255, 255, 255, .09) !important;
}
body.dark .overview .metric-copy strong {
  color: #f2f7fb !important;
}

@media (max-width: 700px) {
  .overview .metric {
    min-height: 66px !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    padding: 9px 11px !important;
  }
  .overview .metric-icon {
    width: 38px !important;
    height: 38px !important;
  }
}

/* Modern Vietnamese typography: softer weights, cleaner rhythm */
html,
body,
button,
input,
select,
textarea {
  font-family: "Be Vietnam Pro", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}
body {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button,
.nav-item,
.chip,
.segment,
.ghost-btn,
.mini-btn,
.primary-action {
  font-weight: 600 !important;
}
label,
.metric-copy span,
.toolbar-context,
.eyebrow,
.section-label,
.domain,
small {
  font-weight: 500 !important;
}
h1,
h2,
h3,
h4,
.brand-copy strong,
.card-title-row h2,
.focus-head h2,
.smart-inbox-head h2,
.detail-section-head strong,
.guide-step-card strong {
  font-weight: 600 !important;
}
strong,
b {
  font-weight: 600;
}
.metric-copy strong,
.status-count,
.nav-count,
.badge-count {
  font-weight: 700 !important;
}
.guide-title-block h2,
.guide-brand-copy h3 {
  font-weight: 700 !important;
}

.collection-ai-hint {
  display: block !important;
  margin-top: 8px !important;
  color: #3f7185 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.dark .collection-ai-hint {
  color: #9fc5d6 !important;
}

/* Premium generated hero art for the guide wizard */
#helpDialog.guide-wizard-modal .guide-rocket-scene {
  min-height: 320px !important;
  height: 320px !important;
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background: #eaf5ff !important;
  box-shadow: inset 0 0 0 1px rgba(55, 104, 151, .08), 0 22px 54px rgba(38, 97, 160, .1) !important;
}
#helpDialog.guide-wizard-modal .guide-hero-art {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 30% !important;
}
#helpDialog.guide-wizard-modal .guide-float,
#helpDialog.guide-wizard-modal .guide-rocket,
#helpDialog.guide-wizard-modal .guide-clouds {
  display: none !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  #helpDialog.guide-wizard-modal .guide-rocket-scene {
    height: 238px !important;
    min-height: 238px !important;
    border-radius: 22px !important;
  }
}
@media (max-width: 640px) {
  #commercialWelcomeWizard.commercial-wizard-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }
  .commercial-wizard-main {
    height: calc(100dvh - 226px);
    overflow: auto;
    padding: 28px 16px 18px;
  }
  .wizard-title-block { padding-right: 52px; }
  .wizard-close-btn { top: 18px; right: 16px; }
  #commercialWelcomeWizard .commercial-wizard-steps article {
    grid-template-columns: 54px minmax(0, 1fr);
    min-height: 0;
    gap: 12px;
    border-radius: 18px !important;
  }
  .wizard-step-icon { width: 52px; height: 52px; border-radius: 16px; font-size: 25px; }
  #commercialWelcomeWizard .commercial-wizard-steps b { display: none; }
  #commercialWelcomeWizard .commercial-wizard-steps strong { font-size: 18px; }
  #commercialWelcomeWizard .commercial-wizard-steps p { font-size: 14px; }
  .wizard-step-number { width: 27px; height: 27px; font-size: 13px !important; }
  .commercial-wizard-actions {
    position: sticky;
    bottom: 0;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px 16px 16px;
  }
  .commercial-wizard-actions button { min-height: 50px; font-size: 15px; }
}


/* v8 Help module: polished onboarding guide integrated into the ? button */
#helpDialog.guide-wizard-modal {
  width: min(92vw, 1120px) !important;
  max-width: 1120px !important;
  max-height: min(90dvh, 820px) !important;
  padding: 0 !important;
  border: 1px solid rgba(118, 154, 185, .34) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(65, 151, 255, .15), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(248, 252, 255, .96)) !important;
  color: #102033;
  box-shadow: 0 34px 90px rgba(10, 31, 52, .32), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#helpDialog.guide-wizard-modal::backdrop {
  background: rgba(18, 31, 45, .55) !important;
  backdrop-filter: blur(8px) saturate(1.05);
}
.guide-wizard-shell {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  min-height: 590px;
}
.guide-wizard-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 38px 46px;
  background:
    radial-gradient(circle at 34% 20%, rgba(63, 151, 255, .18), transparent 32%),
    linear-gradient(160deg, #f3f9ff 0%, #eaf4ff 58%, #f9fcff 100%);
  border-right: 1px solid rgba(52, 91, 125, .10);
}
.guide-rocket-scene { position: relative; min-height: 300px; }
.guide-rocket {
  position: absolute;
  left: 42px;
  top: 42px;
  width: 146px;
  height: 146px;
  display: grid;
  place-items: center;
  border-radius: 36px;
  font-size: 98px;
  filter: drop-shadow(0 22px 30px rgba(34, 112, 224, .24));
  transform: rotate(-18deg);
}
.guide-clouds span {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 16px 36px rgba(74, 123, 176, .16);
}
.guide-clouds span:nth-child(1) { width: 90px; height: 42px; left: 50px; top: 210px; }
.guide-clouds span:nth-child(2) { width: 70px; height: 34px; left: 118px; top: 226px; }
.guide-clouds span:nth-child(3) { width: 56px; height: 28px; left: 32px; top: 234px; }
.guide-float {
  position: absolute;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 16px 34px rgba(24, 81, 143, .15);
  font-weight: 950;
}
.guide-float-bookmark { left: 0; top: 118px; color: #e4498b; transform: rotate(-12deg); }
.guide-float-folder { right: 18px; top: 74px; color: #6366f1; transform: rotate(9deg); }
.guide-float-cloud { right: 35px; top: 178px; color: #20b981; transform: rotate(14deg); }
.guide-brand-copy p { margin: 0; color: #41536a; font-weight: 850; }
.guide-brand-copy h3 {
  margin: 8px 0 18px;
  color: #155dff;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -.04em;
}
.guide-brand-copy ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; color: #45566b; font-weight: 750; }
.guide-brand-copy li { display: flex; align-items: center; gap: 12px; }
.guide-brand-copy li span { width: 24px; display: inline-grid; place-items: center; }
.guide-wizard-main { position: relative; padding: 42px 42px 28px; overflow: auto; }
.guide-close-btn {
  position: absolute;
  top: 26px;
  right: 26px;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(38, 62, 84, .10) !important;
  background: rgba(255,255,255,.88) !important;
  color: #0f1d2e !important;
  box-shadow: 0 14px 30px rgba(20, 41, 62, .12) !important;
}
.guide-close-btn svg { width: 26px; height: 26px; }
.guide-title-block { padding-right: 70px; margin-bottom: 26px; }
.guide-title-block .eyebrow { color: #2a7aa0; margin: 0 0 8px; font-size: 12px; letter-spacing: .14em; font-weight: 950; text-transform: uppercase; }
.guide-title-block h2 { margin: 0; color: #0b1830; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -.055em; }
.guide-title-block p { margin: 14px 0 0; color: #43546a; font-size: 17px; line-height: 1.5; }
.guide-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 470px; margin-top: 20px; }
.guide-progress span { height: 7px; border-radius: 999px; background: rgba(32, 77, 126, .10); }
.guide-progress span:first-child { background: linear-gradient(90deg, #1764ff, #1e86ff); }
.guide-step-list { display: grid; gap: 16px; }
.guide-step-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 18px;
  min-height: 104px;
  padding: 18px 20px;
  border: 1px solid rgba(42, 78, 111, .12);
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 12px 30px rgba(24, 53, 79, .08);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.guide-step-card:hover { transform: translateY(-2px); border-color: rgba(22, 100, 255, .25); box-shadow: 0 18px 42px rgba(24, 53, 79, .13); }
.guide-step-icon { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 18px; font-size: 30px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 10px 22px rgba(29, 75, 119, .10); }
.guide-step-icon svg { width: 34px; height: 34px; }
.guide-step-icon.import { color: #155dff; background: linear-gradient(145deg, #eef6ff, #dfeeff); }
.guide-step-icon.collection { color: #12a978; background: linear-gradient(145deg, #e8fff7, #d9f8ee); }
.guide-step-icon.ai { color: #714ee8; background: linear-gradient(145deg, #f2eeff, #e7ddff); }
.guide-step-icon.sync { color: #e08a00; background: linear-gradient(145deg, #fff7e8, #ffe9bf); }
.guide-step-card strong { display: flex; align-items: center; gap: 12px; color: #102033; font-size: 21px; line-height: 1.2; }
.guide-step-card strong span { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: #155dff; color: white; font-size: 14px; font-weight: 950; }
.guide-step-card:nth-child(2) strong span { background: #12a978; }
.guide-step-card:nth-child(3) strong span { background: #6d4de2; }
.guide-step-card:nth-child(4) strong span { background: #f19a00; }
.guide-step-card p { margin: 10px 0 0; color: #536479; font-size: 16px; line-height: 1.45; }
.guide-step-card b { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; background: rgba(24, 54, 84, .06); color: #112236; font-size: 36px; font-weight: 500; }
.guide-detail { margin-top: 16px; padding: 18px; border-radius: 20px; border: 1px solid rgba(42, 78, 111, .12); background: rgba(255,255,255,.86); }
.guide-shortcuts { display: none !important; }
.guide-wizard-actions {
  display: grid;
  grid-template-columns: 180px minmax(220px, 300px) minmax(280px, 1fr);
  gap: 16px;
  padding: 20px 42px 24px;
  border-top: 1px solid rgba(42, 78, 111, .10);
  background: rgba(255,255,255,.72);
}
.guide-wizard-actions button { min-height: 58px; border-radius: 18px; font-size: 17px; font-weight: 950; cursor: pointer; }
.guide-wizard-actions .wizard-secondary-btn { border: 1px solid rgba(33,57,78,.10); background: rgba(255,255,255,.88); color: #142334; box-shadow: 0 12px 24px rgba(20,41,62,.07); }
.guide-wizard-actions .wizard-outline-btn { border: 1px solid rgba(21,93,255,.36); background: rgba(255,255,255,.86); color: #1457d9; }
.guide-wizard-actions .wizard-primary-btn { border: 0; background: linear-gradient(135deg, #1764ff, #0f55e8); color: #fff; box-shadow: 0 18px 36px rgba(17,88,240,.28); }
body.dark #helpDialog.guide-wizard-modal { background: linear-gradient(135deg, rgba(20,29,39,.98), rgba(13,22,32,.97)) !important; color: #edf7ff; border-color: rgba(255,255,255,.12) !important; }
body.dark .guide-wizard-hero { background: radial-gradient(circle at 34% 20%, rgba(63,151,255,.16), transparent 32%), linear-gradient(160deg, #172637 0%, #101b28 100%); border-right-color: rgba(255,255,255,.08); }
body.dark .guide-title-block h2, body.dark .guide-step-card strong, body.dark .guide-brand-copy h3 { color: #f0f7ff; }
body.dark .guide-title-block p, body.dark .guide-step-card p, body.dark .guide-brand-copy p, body.dark .guide-brand-copy ul { color: #adc0d0; }
body.dark .guide-step-card, body.dark .guide-detail, body.dark .guide-close-btn, body.dark .guide-wizard-actions .wizard-secondary-btn, body.dark .guide-wizard-actions .wizard-outline-btn { background: rgba(24,36,49,.88) !important; border-color: rgba(255,255,255,.10) !important; color: #edf7ff !important; }
body.dark .guide-wizard-actions { background: rgba(16,25,36,.86); border-top-color: rgba(255,255,255,.09); }
@media (max-width: 980px) {
  #helpDialog.guide-wizard-modal { width: min(94vw, 720px) !important; }
  .guide-wizard-shell { grid-template-columns: 1fr; min-height: 0; }
  .guide-wizard-hero { display: none; }
  .guide-wizard-main { padding: 34px 24px 24px; }
  .guide-wizard-actions { grid-template-columns: 1fr; padding: 16px 24px 22px; }
}
@media (max-width: 640px) {
  #helpDialog.guide-wizard-modal { width: 100vw !important; max-width: 100vw !important; max-height: 100dvh !important; height: 100dvh !important; border-radius: 0 !important; }
  .guide-wizard-main { height: calc(100dvh - 230px); overflow: auto; padding: 28px 16px 18px; }
  .guide-title-block { padding-right: 54px; }
  .guide-close-btn { top: 18px; right: 16px; width: 50px !important; height: 50px !important; }
  .guide-title-block h2 { font-size: clamp(28px, 9vw, 38px); }
  .guide-step-card { grid-template-columns: 54px minmax(0,1fr); min-height: 0; gap: 12px; border-radius: 18px; padding: 14px; }
  .guide-step-icon { width: 52px; height: 52px; border-radius: 16px; font-size: 25px; }
  .guide-step-icon svg { width: 28px; height: 28px; }
  .guide-step-card b { display: none; }
  .guide-step-card strong { font-size: 18px; }
  .guide-step-card strong span { width: 27px; height: 27px; font-size: 13px; }
  .guide-step-card p { font-size: 14px; }
  .guide-wizard-actions { position: sticky; bottom: 0; grid-template-columns: 1fr; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
}

/* v9 Guide modal layout fix: keep footer visible on laptop-height screens */
#helpDialog.guide-wizard-modal {
  display: flex !important;
  flex-direction: column !important;
  width: min(92vw, 1120px) !important;
  height: min(90dvh, 820px) !important;
  max-height: 90dvh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
#helpDialog.guide-wizard-modal[open] {
  display: flex !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-hero {
  min-height: 0 !important;
  overflow: hidden !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-main {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable;
  padding-bottom: 28px !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  backdrop-filter: blur(14px) saturate(1.05);
}

@media (max-height: 820px) and (min-width: 981px) {
  #helpDialog.guide-wizard-modal {
    height: calc(100dvh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-shell {
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-hero {
    padding: 28px 28px 30px !important;
  }
  #helpDialog.guide-wizard-modal .guide-rocket-scene {
    min-height: 250px !important;
  }
  #helpDialog.guide-wizard-modal .guide-rocket {
    top: 24px !important;
    left: 34px !important;
    font-size: 82px !important;
  }
  #helpDialog.guide-wizard-modal .guide-brand-copy h3 {
    font-size: 26px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    padding: 30px 38px 18px !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block {
    margin-bottom: 18px !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block h2 {
    font-size: clamp(30px, 3.45vw, 40px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block p {
    margin-top: 10px !important;
    font-size: 15.5px !important;
  }
  #helpDialog.guide-wizard-modal .guide-progress {
    margin-top: 14px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-list {
    gap: 12px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card {
    min-height: 86px !important;
    padding: 14px 18px !important;
    border-radius: 20px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-icon {
    width: 58px !important;
    height: 58px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card strong {
    font-size: 19px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card p {
    margin-top: 6px !important;
    font-size: 15px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    padding: 14px 38px 16px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions button {
    min-height: 52px !important;
  }
}

@media (max-width: 980px) {
  #helpDialog.guide-wizard-modal {
    height: min(92dvh, 780px) !important;
    max-height: 92dvh !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    padding-bottom: 18px !important;
  }
}

@media (max-width: 640px) {
  #helpDialog.guide-wizard-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-shell {
    display: block !important;
    overflow: hidden !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    height: 100% !important;
    padding-bottom: 18px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    position: sticky !important;
    bottom: 0 !important;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.92) !important;
  }
  body.dark #helpDialog.guide-wizard-modal .guide-wizard-actions {
    background: rgba(16,25,36,.94) !important;
  }
}

/* v10 Guide modal interaction/layout fix */
body.guide-open {
  overflow: hidden !important;
}
#helpDialog.guide-wizard-modal {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}
#helpDialog.guide-wizard-modal .guide-close-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  left: auto !important;
  z-index: 60 !important;
  cursor: pointer !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-main {
  scrollbar-width: thin;
}
#helpDialog.guide-wizard-modal .guide-wizard-main::-webkit-scrollbar {
  width: 8px;
}
#helpDialog.guide-wizard-modal .guide-wizard-main::-webkit-scrollbar-thumb {
  background: rgba(56, 85, 115, .22);
  border-radius: 999px;
}
#helpDialog.guide-wizard-modal .guide-progress span {
  overflow: hidden;
  transition: background .2s ease, opacity .2s ease, transform .2s ease;
}
#helpDialog.guide-wizard-modal .guide-progress span.active {
  background: linear-gradient(90deg, #1764ff, #37a3ff) !important;
  box-shadow: 0 6px 16px rgba(23, 100, 255, .22);
}
#helpDialog.guide-wizard-modal .guide-step-card.active {
  border-color: rgba(23, 100, 255, .28) !important;
  box-shadow: 0 18px 44px rgba(23, 100, 255, .13) !important;
  transform: translateY(-1px);
}
#helpDialog.guide-wizard-modal .guide-wizard-actions {
  pointer-events: auto !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions button {
  pointer-events: auto !important;
  user-select: none;
}
#helpDialog.guide-wizard-modal .wizard-primary-btn,
#helpDialog.guide-wizard-modal .wizard-outline-btn,
#helpDialog.guide-wizard-modal .wizard-secondary-btn {
  cursor: pointer !important;
}
@media (max-width: 640px) {
  #helpDialog.guide-wizard-modal {
    inset: 0 !important;
    transform: none !important;
  }
  #helpDialog.guide-wizard-modal .guide-close-btn {
    top: 18px !important;
    right: 16px !important;
  }
}


/* v11 Guide modal final polish: stable close button + visible action footer */
#helpDialog.guide-wizard-modal[open] {
  display: flex !important;
}
#helpDialog.guide-wizard-modal {
  width: min(94vw, 1120px) !important;
  height: min(88dvh, 820px) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-main {
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 38px 48px 24px 42px !important;
  scrollbar-gutter: stable !important;
}
#helpDialog.guide-wizard-modal .guide-close-btn {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: auto !important;
}
#helpDialog.guide-wizard-modal .guide-title-block {
  padding-right: 84px !important;
}
#helpDialog.guide-wizard-modal .guide-progress span {
  background: rgba(32, 77, 126, .12) !important;
}
#helpDialog.guide-wizard-modal .guide-progress span.active {
  background: linear-gradient(90deg, #1764ff, #37a3ff) !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 180px minmax(220px, 300px) minmax(280px, 1fr) !important;
  gap: 16px !important;
  padding: 16px 42px 18px !important;
  border-top: 1px solid rgba(42, 78, 111, .11) !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 -12px 30px rgba(15, 40, 70, .06) !important;
  z-index: 20 !important;
  position: relative !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions button {
  min-height: 54px !important;
  max-height: 60px !important;
  white-space: nowrap !important;
  line-height: 1.1 !important;
}
body.dark #helpDialog.guide-wizard-modal .guide-wizard-actions {
  background: rgba(16,25,36,.94) !important;
}

@media (max-height: 820px) and (min-width: 981px) {
  #helpDialog.guide-wizard-modal {
    height: calc(100dvh - 32px) !important;
    max-height: calc(100dvh - 32px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-shell {
    grid-template-columns: 260px minmax(0, 1fr) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    padding: 30px 46px 18px 38px !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block h2 {
    font-size: clamp(30px, 3.2vw, 40px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-list {
    gap: 12px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card {
    min-height: 86px !important;
    padding: 14px 18px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    padding: 14px 38px 16px !important;
  }
}
@media (max-width: 980px) {
  #helpDialog.guide-wizard-modal {
    width: min(94vw, 760px) !important;
    height: min(92dvh, 780px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-shell {
    grid-template-columns: 1fr !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-hero {
    display: none !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    padding: 34px 28px 20px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    grid-template-columns: 1fr !important;
    padding: 14px 24px 18px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions button {
    width: 100% !important;
  }
}
@media (max-width: 640px) {
  #helpDialog.guide-wizard-modal {
    inset: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    padding: 28px 16px 16px !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block {
    padding-right: 58px !important;
  }
  #helpDialog.guide-wizard-modal .guide-close-btn {
    top: 16px !important;
    right: 14px !important;
    width: 50px !important;
    height: 50px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* v12 Guide modal hard fix: no clipped footer, no visible inner scrollbar, reliable close area */
#helpDialog.guide-wizard-modal,
#helpDialog.guide-wizard-modal[open] {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(94vw, 1120px) !important;
  height: min(86dvh, 780px) !important;
  max-height: calc(100dvh - 28px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-hero {
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 30px 30px 34px !important;
}
#helpDialog.guide-wizard-modal .guide-rocket-scene { min-height: 255px !important; }
#helpDialog.guide-wizard-modal .guide-rocket {
  width: 130px !important;
  height: 130px !important;
  top: 28px !important;
  left: 38px !important;
  font-size: 82px !important;
}
#helpDialog.guide-wizard-modal .guide-brand-copy h3 { font-size: 28px !important; }
#helpDialog.guide-wizard-modal .guide-brand-copy ul { gap: 10px !important; font-size: 15px !important; }
#helpDialog.guide-wizard-modal .guide-wizard-main {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  padding: 30px 54px 18px 40px !important;
  box-sizing: border-box !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-main::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
#helpDialog.guide-wizard-modal .guide-close-btn {
  position: absolute !important;
  top: 22px !important;
  right: 26px !important;
  z-index: 10000 !important;
  width: 54px !important;
  height: 54px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  pointer-events: auto !important;
  transform: none !important;
}
#helpDialog.guide-wizard-modal .guide-title-block {
  padding-right: 76px !important;
  margin-bottom: 18px !important;
}
#helpDialog.guide-wizard-modal .guide-title-block h2 {
  font-size: clamp(31px, 3.25vw, 42px) !important;
  line-height: 1.06 !important;
}
#helpDialog.guide-wizard-modal .guide-title-block p {
  margin-top: 10px !important;
  font-size: 16px !important;
}
#helpDialog.guide-wizard-modal .guide-progress {
  margin-top: 14px !important;
  max-width: 470px !important;
}
#helpDialog.guide-wizard-modal .guide-step-list {
  gap: 12px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card {
  grid-template-columns: 58px minmax(0, 1fr) 44px !important;
  min-height: 78px !important;
  padding: 14px 18px !important;
  gap: 15px !important;
  border-radius: 20px !important;
}
#helpDialog.guide-wizard-modal .guide-step-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 17px !important;
  font-size: 26px !important;
}
#helpDialog.guide-wizard-modal .guide-step-icon svg { width: 29px !important; height: 29px !important; }
#helpDialog.guide-wizard-modal .guide-step-card strong { font-size: 19px !important; }
#helpDialog.guide-wizard-modal .guide-step-card strong span {
  width: 28px !important;
  height: 28px !important;
  font-size: 13px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card p {
  margin-top: 5px !important;
  font-size: 15px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card b {
  width: 44px !important;
  height: 44px !important;
  font-size: 34px !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 180px minmax(220px, 300px) minmax(280px, 1fr) !important;
  gap: 16px !important;
  padding: 16px 42px 18px !important;
  border-top: 1px solid rgba(42, 78, 111, .12) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 -12px 28px rgba(15, 40, 70, .07) !important;
  position: relative !important;
  bottom: auto !important;
  z-index: 100 !important;
  box-sizing: border-box !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions button {
  min-height: 52px !important;
  height: 52px !important;
  max-height: 52px !important;
  border-radius: 17px !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
}
body.dark #helpDialog.guide-wizard-modal .guide-wizard-actions { background: rgba(16,25,36,.96) !important; }

@media (max-height: 720px) and (min-width: 981px) {
  #helpDialog.guide-wizard-modal { height: calc(100dvh - 20px) !important; max-height: calc(100dvh - 20px) !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-shell { grid-template-columns: 240px minmax(0, 1fr) !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-hero { padding: 22px 24px 24px !important; }
  #helpDialog.guide-wizard-modal .guide-rocket-scene { min-height: 205px !important; }
  #helpDialog.guide-wizard-modal .guide-rocket { width: 112px !important; height: 112px !important; font-size: 70px !important; }
  #helpDialog.guide-wizard-modal .guide-brand-copy h3 { font-size: 24px !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-main { padding: 24px 50px 14px 34px !important; }
  #helpDialog.guide-wizard-modal .guide-title-block h2 { font-size: clamp(28px, 3vw, 36px) !important; }
  #helpDialog.guide-wizard-modal .guide-title-block p { font-size: 14.5px !important; }
  #helpDialog.guide-wizard-modal .guide-progress { margin-top: 10px !important; }
  #helpDialog.guide-wizard-modal .guide-step-list { gap: 9px !important; }
  #helpDialog.guide-wizard-modal .guide-step-card { min-height: 68px !important; padding: 11px 16px !important; }
  #helpDialog.guide-wizard-modal .guide-step-icon { width: 50px !important; height: 50px !important; }
  #helpDialog.guide-wizard-modal .guide-step-card strong { font-size: 17px !important; }
  #helpDialog.guide-wizard-modal .guide-step-card p { font-size: 13.8px !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-actions { padding: 12px 34px 14px !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-actions button { height: 48px !important; min-height: 48px !important; max-height: 48px !important; }
}

@media (max-width: 980px) {
  #helpDialog.guide-wizard-modal,
  #helpDialog.guide-wizard-modal[open] {
    width: min(94vw, 760px) !important;
    height: min(92dvh, 780px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-shell { grid-template-columns: 1fr !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-hero { display: none !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-main { padding: 32px 28px 18px !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-actions { grid-template-columns: 1fr !important; padding: 14px 24px 18px !important; gap: 10px !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-actions button { width: 100% !important; }
}

@media (max-width: 640px) {
  #helpDialog.guide-wizard-modal,
  #helpDialog.guide-wizard-modal[open] {
    inset: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main { padding: 28px 16px 16px !important; }
  #helpDialog.guide-wizard-modal .guide-title-block { padding-right: 58px !important; }
  #helpDialog.guide-wizard-modal .guide-close-btn { top: 16px !important; right: 14px !important; width: 50px !important; height: 50px !important; }
  #helpDialog.guide-wizard-modal .guide-step-card { grid-template-columns: 52px minmax(0,1fr) !important; min-height: 0 !important; }
  #helpDialog.guide-wizard-modal .guide-step-card b { display: none !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-actions { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important; }
}

/* v13 Guide modal stable shell: footer is always visible, content scrolls only inside the right panel */
body:has(#helpDialog.guide-wizard-modal[open]) {
  overflow: hidden !important;
}
#helpDialog.guide-wizard-modal,
#helpDialog.guide-wizard-modal[open] {
  position: fixed !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  width: min(92vw, 1040px) !important;
  height: auto !important;
  max-height: calc(100dvh - 72px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  box-sizing: border-box !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-shell {
  min-height: 0 !important;
  max-height: calc(100dvh - 72px - 84px) !important;
  display: grid !important;
  grid-template-columns: 250px minmax(0, 1fr) !important;
  overflow: hidden !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-hero {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 28px 26px 30px !important;
}
#helpDialog.guide-wizard-modal .guide-rocket-scene {
  min-height: 230px !important;
}
#helpDialog.guide-wizard-modal .guide-rocket {
  width: 116px !important;
  height: 116px !important;
  left: 32px !important;
  top: 28px !important;
  font-size: 74px !important;
}
#helpDialog.guide-wizard-modal .guide-float {
  width: 46px !important;
  height: 46px !important;
}
#helpDialog.guide-wizard-modal .guide-clouds span:nth-child(1) { top: 188px !important; }
#helpDialog.guide-wizard-modal .guide-clouds span:nth-child(2) { top: 202px !important; }
#helpDialog.guide-wizard-modal .guide-clouds span:nth-child(3) { top: 210px !important; }
#helpDialog.guide-wizard-modal .guide-brand-copy h3 {
  font-size: 26px !important;
  margin-bottom: 14px !important;
}
#helpDialog.guide-wizard-modal .guide-brand-copy ul {
  gap: 9px !important;
  font-size: 14.5px !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-main {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(100dvh - 72px - 84px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 28px 58px 18px 38px !important;
  box-sizing: border-box !important;
  scrollbar-width: none !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-main::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
#helpDialog.guide-wizard-modal .guide-close-btn {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 52px !important;
  height: 52px !important;
  z-index: 99999 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: auto !important;
}
#helpDialog.guide-wizard-modal .guide-title-block {
  padding-right: 72px !important;
  margin-bottom: 16px !important;
}
#helpDialog.guide-wizard-modal .guide-title-block .eyebrow {
  margin-bottom: 6px !important;
}
#helpDialog.guide-wizard-modal .guide-title-block h2 {
  font-size: clamp(28px, 3.1vw, 40px) !important;
  line-height: 1.06 !important;
}
#helpDialog.guide-wizard-modal .guide-title-block p {
  margin-top: 10px !important;
  font-size: 15.5px !important;
}
#helpDialog.guide-wizard-modal .guide-progress {
  margin-top: 13px !important;
  gap: 8px !important;
  max-width: 450px !important;
}
#helpDialog.guide-wizard-modal .guide-progress span {
  height: 6px !important;
  background: rgba(32, 77, 126, .12) !important;
}
#helpDialog.guide-wizard-modal .guide-progress span.active {
  background: linear-gradient(90deg, #1764ff, #37a3ff) !important;
}
#helpDialog.guide-wizard-modal .guide-step-list {
  gap: 11px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card {
  grid-template-columns: 54px minmax(0, 1fr) 42px !important;
  min-height: 74px !important;
  padding: 12px 16px !important;
  gap: 14px !important;
  border-radius: 18px !important;
}
#helpDialog.guide-wizard-modal .guide-step-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  font-size: 24px !important;
}
#helpDialog.guide-wizard-modal .guide-step-icon svg {
  width: 27px !important;
  height: 27px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card strong {
  font-size: 18px !important;
  gap: 10px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card strong span {
  width: 26px !important;
  height: 26px !important;
  font-size: 12.5px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card p {
  margin-top: 4px !important;
  font-size: 14.2px !important;
  line-height: 1.38 !important;
}
#helpDialog.guide-wizard-modal .guide-step-card b {
  width: 42px !important;
  height: 42px !important;
  font-size: 30px !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions {
  display: grid !important;
  grid-template-columns: 170px minmax(210px, 300px) minmax(280px, 1fr) !important;
  gap: 14px !important;
  padding: 14px 34px 16px !important;
  border-top: 1px solid rgba(42, 78, 111, .12) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 -10px 24px rgba(15, 40, 70, .06) !important;
  position: relative !important;
  z-index: 1000 !important;
  min-height: 84px !important;
  box-sizing: border-box !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions button {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  border-radius: 16px !important;
  pointer-events: auto !important;
}
body.dark #helpDialog.guide-wizard-modal .guide-wizard-actions {
  background: rgba(16,25,36,.98) !important;
}

@media (max-height: 700px) and (min-width: 981px) {
  #helpDialog.guide-wizard-modal,
  #helpDialog.guide-wizard-modal[open] {
    width: min(94vw, 1000px) !important;
    max-height: calc(100dvh - 36px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-shell {
    grid-template-columns: 220px minmax(0, 1fr) !important;
    max-height: calc(100dvh - 36px - 76px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-hero {
    padding: 20px 22px 22px !important;
  }
  #helpDialog.guide-wizard-modal .guide-rocket-scene { min-height: 175px !important; }
  #helpDialog.guide-wizard-modal .guide-rocket { width: 92px !important; height: 92px !important; font-size: 60px !important; }
  #helpDialog.guide-wizard-modal .guide-brand-copy h3 { font-size: 22px !important; }
  #helpDialog.guide-wizard-modal .guide-brand-copy ul { gap: 7px !important; font-size: 13px !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    max-height: calc(100dvh - 36px - 76px) !important;
    padding: 22px 54px 12px 32px !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block { margin-bottom: 12px !important; }
  #helpDialog.guide-wizard-modal .guide-title-block h2 { font-size: clamp(25px, 2.65vw, 34px) !important; }
  #helpDialog.guide-wizard-modal .guide-title-block p { font-size: 13.8px !important; margin-top: 7px !important; }
  #helpDialog.guide-wizard-modal .guide-progress { margin-top: 8px !important; }
  #helpDialog.guide-wizard-modal .guide-step-list { gap: 7px !important; }
  #helpDialog.guide-wizard-modal .guide-step-card { min-height: 62px !important; padding: 9px 14px !important; grid-template-columns: 46px minmax(0,1fr) 38px !important; }
  #helpDialog.guide-wizard-modal .guide-step-icon { width: 44px !important; height: 44px !important; }
  #helpDialog.guide-wizard-modal .guide-step-card strong { font-size: 16px !important; }
  #helpDialog.guide-wizard-modal .guide-step-card p { font-size: 12.8px !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    min-height: 76px !important;
    padding: 11px 30px 13px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions button { height: 48px !important; min-height: 48px !important; max-height: 48px !important; }
}

@media (max-width: 980px) {
  #helpDialog.guide-wizard-modal,
  #helpDialog.guide-wizard-modal[open] {
    width: min(94vw, 740px) !important;
    max-height: calc(100dvh - 48px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-shell {
    grid-template-columns: 1fr !important;
    max-height: calc(100dvh - 48px - 210px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-hero { display: none !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    max-height: calc(100dvh - 48px - 210px) !important;
    padding: 30px 28px 16px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    grid-template-columns: 1fr !important;
    min-height: 210px !important;
    padding: 14px 24px 18px !important;
    gap: 10px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions button { width: 100% !important; }
}
@media (max-width: 640px) {
  #helpDialog.guide-wizard-modal,
  #helpDialog.guide-wizard-modal[open] {
    inset: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-shell {
    max-height: calc(100dvh - 210px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    max-height: calc(100dvh - 210px) !important;
    padding: 28px 16px 14px !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block { padding-right: 58px !important; }
  #helpDialog.guide-wizard-modal .guide-close-btn { top: 14px !important; right: 12px !important; width: 48px !important; height: 48px !important; }
  #helpDialog.guide-wizard-modal .guide-step-card { grid-template-columns: 50px minmax(0,1fr) !important; min-height: 0 !important; }
  #helpDialog.guide-wizard-modal .guide-step-card b { display: none !important; }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    min-height: 210px !important;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

/* === V14 FINAL GUIDE WIZARD STABLE LAYOUT ===
   The guide modal must never scroll as a whole. Only the content area scrolls.
   Footer and close button are always visible and clickable. */
#helpDialog.guide-wizard-modal,
#helpDialog.guide-wizard-modal[open] {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(1120px, calc(100vw - 56px)) !important;
  height: min(760px, calc(100dvh - 42px)) !important;
  max-width: calc(100vw - 56px) !important;
  max-height: calc(100dvh - 42px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 24px !important;
  border: 1px solid rgba(42, 78, 111, .18) !important;
  box-shadow: 0 28px 80px rgba(9, 24, 40, .26) !important;
  background: #fff !important;
  box-sizing: border-box !important;
}
#helpDialog.guide-wizard-modal:not([open]) {
  display: none !important;
}
#helpDialog.guide-wizard-modal::backdrop {
  background: rgba(16, 26, 38, .52) !important;
  backdrop-filter: blur(7px) !important;
}
#helpDialog.guide-wizard-modal > .guide-close-btn,
#helpDialog.guide-wizard-modal > #closeHelpBtn {
  position: absolute !important;
  top: 22px !important;
  right: 22px !important;
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  z-index: 50 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(34, 57, 79, .12) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 10px 24px rgba(20, 40, 65, .12) !important;
  color: #0f1b2d !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
#helpDialog.guide-wizard-modal > .guide-close-btn svg,
#helpDialog.guide-wizard-modal > #closeHelpBtn svg {
  width: 24px !important;
  height: 24px !important;
  pointer-events: none !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(230px, 29%) minmax(0, 1fr) !important;
  overflow: hidden !important;
  border-radius: 24px 24px 0 0 !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-hero {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  padding: 34px 28px 28px !important;
  background: linear-gradient(180deg, rgba(228,241,255,.96), rgba(244,249,255,.92)) !important;
  border-right: 1px solid rgba(42, 78, 111, .12) !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-main {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 38px 58px 22px 40px !important;
  box-sizing: border-box !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
}
#helpDialog.guide-wizard-modal .guide-title-block {
  padding-right: 74px !important;
  margin-bottom: 18px !important;
}
#helpDialog.guide-wizard-modal .guide-title-block h2 {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.05 !important;
  margin: 0 !important;
}
#helpDialog.guide-wizard-modal .guide-title-block p {
  margin: 12px 0 0 !important;
  font-size: 15.5px !important;
}
#helpDialog.guide-wizard-modal .guide-progress {
  margin-top: 16px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-width: 480px !important;
}
#helpDialog.guide-wizard-modal .guide-progress span {
  height: 6px !important;
  border-radius: 99px !important;
  background: rgba(26, 60, 100, .13) !important;
}
#helpDialog.guide-wizard-modal .guide-progress span.active {
  background: linear-gradient(90deg, #236dff, #40a9ff) !important;
}
#helpDialog.guide-wizard-modal .guide-step-list {
  display: grid !important;
  gap: 12px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card {
  min-height: 82px !important;
  grid-template-columns: 56px minmax(0, 1fr) 44px !important;
  padding: 13px 16px !important;
  border-radius: 19px !important;
  box-shadow: 0 12px 30px rgba(15, 37, 64, .06) !important;
}
#helpDialog.guide-wizard-modal .guide-step-icon {
  width: 54px !important;
  height: 54px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card strong {
  font-size: 18px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card p {
  margin-top: 4px !important;
  line-height: 1.38 !important;
  font-size: 14px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  background: rgba(246, 250, 255, .92) !important;
  border: 1px solid rgba(42, 78, 111, .14) !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-head {
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-head span {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 12px !important;
  font-size: 17px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-head strong {
  font-size: 16px !important;
  line-height: 1.2 !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-head p {
  margin-top: 2px !important;
  font-size: 13px !important;
  line-height: 1.32 !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps div {
  min-height: 0 !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps p {
  margin: 0 !important;
  font-size: 12.6px !important;
  line-height: 1.34 !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail #helpHomeBtn {
  display: none !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail.hidden {
  display: none !important;
}
#helpDialog.guide-wizard-modal .guide-step-card.active > b {
  transform: rotate(90deg) !important;
}
#helpDialog.guide-wizard-modal .guide-shortcuts {
  display: none !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions {
  flex: 0 0 auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 180px minmax(220px, 300px) minmax(280px, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 92px !important;
  height: 92px !important;
  padding: 16px 38px !important;
  margin: 0 !important;
  border-top: 1px solid rgba(42, 78, 111, .13) !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 -12px 34px rgba(15, 40, 70, .08) !important;
  position: relative !important;
  bottom: auto !important;
  z-index: 40 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
#helpDialog.guide-wizard-modal .guide-wizard-actions button {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  border-radius: 17px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 45 !important;
}
body.guide-open {
  overflow: hidden !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  #helpDialog.guide-wizard-modal,
  #helpDialog.guide-wizard-modal[open] {
    height: calc(100dvh - 32px) !important;
    width: min(1060px, calc(100vw - 46px)) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    padding: 26px 54px 16px 36px !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block {
    margin-bottom: 12px !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block h2 {
    font-size: clamp(27px, 2.7vw, 36px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block p {
    margin-top: 8px !important;
    font-size: 14px !important;
  }
  #helpDialog.guide-wizard-modal .guide-progress {
    margin-top: 10px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-list {
    gap: 8px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card {
    min-height: 66px !important;
    padding: 9px 14px !important;
    grid-template-columns: 48px minmax(0,1fr) 38px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card strong {
    font-size: 16px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card p {
    font-size: 12.8px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    height: 78px !important;
    min-height: 78px !important;
    padding: 11px 32px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions button {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail {
    padding: 10px 12px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps {
    gap: 6px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps div {
    padding: 7px 8px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps p {
    font-size: 11.8px !important;
  }
}

@media (max-width: 900px) {
  #helpDialog.guide-wizard-modal,
  #helpDialog.guide-wizard-modal[open] {
    width: min(720px, calc(100vw - 28px)) !important;
    height: calc(100dvh - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-shell {
    grid-template-columns: 1fr !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-hero {
    display: none !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    padding: 30px 24px 18px !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 198px !important;
    padding: 14px 22px calc(16px + env(safe-area-inset-bottom)) !important;
    gap: 10px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  #helpDialog.guide-wizard-modal,
  #helpDialog.guide-wizard-modal[open] {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  #helpDialog.guide-wizard-modal .guide-wizard-main {
    padding: 26px 16px 16px !important;
  }
  #helpDialog.guide-wizard-modal .guide-title-block {
    padding-right: 58px !important;
  }
  #helpDialog.guide-wizard-modal > .guide-close-btn,
  #helpDialog.guide-wizard-modal > #closeHelpBtn {
    top: 12px !important;
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card {
    grid-template-columns: 48px minmax(0,1fr) !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card b {
    display: none !important;
  }
}

/* Compact accordion polish */
#helpDialog.guide-wizard-modal .guide-step-list {
  gap: 9px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card {
  min-height: 66px !important;
  grid-template-columns: 46px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 13px !important;
  border-radius: 16px !important;
  border-color: rgba(42, 78, 111, .12) !important;
  box-shadow: 0 8px 22px rgba(15, 37, 64, .045) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease !important;
}
#helpDialog.guide-wizard-modal .guide-step-card:hover,
#helpDialog.guide-wizard-modal .guide-step-card.active {
  transform: translateY(-1px) !important;
  border-color: rgba(35, 109, 255, .24) !important;
  box-shadow: 0 12px 28px rgba(15, 55, 105, .075) !important;
}
#helpDialog.guide-wizard-modal .guide-step-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
}
#helpDialog.guide-wizard-modal .guide-step-icon svg {
  width: 22px !important;
  height: 22px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card strong {
  gap: 9px !important;
  font-size: 16px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card strong span {
  width: 24px !important;
  height: 24px !important;
  font-size: 12px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card p {
  margin-top: 3px !important;
  font-size: 12.8px !important;
  line-height: 1.32 !important;
}
#helpDialog.guide-wizard-modal .guide-step-card b {
  width: 36px !important;
  height: 36px !important;
  font-size: 26px !important;
  transition: transform .2s ease, background-color .18s ease !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 86px !important;
  overflow: hidden !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  margin: 7px 0 0 !important;
  padding: 10px !important;
  border-radius: 14px !important;
  background: rgba(248, 251, 255, .95) !important;
  transition: max-height .22s ease, opacity .18s ease, transform .18s ease, margin .18s ease, padding .18s ease, border-color .18s ease !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail.hidden {
  display: block !important;
  max-height: 0 !important;
  opacity: 0 !important;
  transform: translateY(-4px) !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent !important;
  pointer-events: none !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-head {
  display: none !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  min-height: 0 !important;
  height: auto !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps div {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 7px !important;
  padding: 8px 9px !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .86) !important;
  border: 1px solid rgba(42, 78, 111, .1) !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps span {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  font-size: 11px !important;
}
#helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps p {
  font-size: 11.8px !important;
  line-height: 1.28 !important;
}

@media (max-height: 760px) and (min-width: 901px) {
  #helpDialog.guide-wizard-modal .guide-step-card {
    min-height: 58px !important;
    padding: 8px 12px !important;
    grid-template-columns: 40px minmax(0, 1fr) 34px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-icon {
    width: 38px !important;
    height: 38px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card strong {
    font-size: 15px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card p {
    font-size: 12px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail {
    max-height: 76px !important;
    padding: 8px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail.hidden {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps div {
    padding: 6px 7px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps p {
    font-size: 11px !important;
  }
}

@media (max-width: 900px) {
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail {
    max-height: 210px !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail.hidden {
    max-height: 0 !important;
  }
  #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps {
    grid-template-columns: 1fr !important;
  }
}

/* Dark guide contrast and compact favorite controls */
body.dark #helpDialog.guide-wizard-modal .guide-brand-copy p,
body.dark #helpDialog.guide-wizard-modal .guide-brand-copy li,
body.dark #helpDialog.guide-wizard-modal .guide-title-block p,
body.dark #helpDialog.guide-wizard-modal .guide-step-card p {
  color: #c4d2df !important;
}

body.dark #helpDialog.guide-wizard-modal .guide-brand-copy h3,
body.dark #helpDialog.guide-wizard-modal .guide-step-card strong {
  color: #f5f9fd !important;
}

body.dark #helpDialog.guide-wizard-modal .guide-brand-copy {
  text-shadow: 0 1px 1px rgba(7, 15, 24, .28);
}

body.dark #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail {
  background: #172331 !important;
  border-color: rgba(167, 199, 224, .18) !important;
}

body.dark #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps div {
  background: #1e2d3d !important;
  border-color: rgba(167, 199, 224, .16) !important;
}

body.dark #helpDialog.guide-wizard-modal .guide-step-card > .guide-detail .help-detail-steps p {
  color: #d0dce7 !important;
}

.favorite-toggle input[type="checkbox"],
#detailPanel .favorite-toggle input[type="checkbox"] {
  position: relative !important;
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  appearance: none !important;
  border: 1px solid #b9c6cc !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(20, 47, 61, .08), inset 0 0 0 3px #fff !important;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.favorite-toggle input[type="checkbox"]::before,
#detailPanel .favorite-toggle input[type="checkbox"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  transform: none !important;
}

.favorite-toggle input[type="checkbox"]::after,
#detailPanel .favorite-toggle input[type="checkbox"]::after {
  content: "" !important;
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(.75);
  transition: opacity .14s ease, transform .14s ease;
}

.favorite-toggle input[type="checkbox"]:checked,
#detailPanel .favorite-toggle input[type="checkbox"]:checked {
  border-color: #2f7890 !important;
  background: #2f7890 !important;
  box-shadow: 0 0 0 3px rgba(47, 120, 144, .13) !important;
}

.favorite-toggle input[type="checkbox"]:checked::after,
#detailPanel .favorite-toggle input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.favorite-toggle input[type="checkbox"]:focus-visible,
#detailPanel .favorite-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(47, 120, 144, .46) !important;
  outline-offset: 3px !important;
}

#detailPanel .favorite-toggle.detail-switch {
  min-height: 48px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 11px 13px !important;
}

#detailPanel .favorite-toggle.detail-switch span {
  order: 1;
  color: #51616d !important;
  font-size: 13px !important;
  font-weight: 760 !important;
}

#detailPanel .favorite-toggle.detail-switch input[type="checkbox"] {
  order: 2;
  margin-left: auto !important;
}

body.dark .favorite-toggle input[type="checkbox"],
body.dark #detailPanel .favorite-toggle input[type="checkbox"] {
  border-color: #51616d !important;
  background: #15212a !important;
  box-shadow: inset 0 0 0 3px #15212a !important;
}

body.dark .favorite-toggle input[type="checkbox"]:checked,
body.dark #detailPanel .favorite-toggle input[type="checkbox"]:checked {
  border-color: #79c7da !important;
  background: #3b8ea5 !important;
  box-shadow: 0 0 0 3px rgba(121, 199, 218, .15) !important;
}

body.dark #detailPanel .favorite-toggle.detail-switch span {
  color: #c5d1d9 !important;
}

/* The guide artwork panel stays light in dark mode, so its copy must stay dark. */
body.dark #helpDialog.guide-wizard-modal .guide-wizard-hero .guide-brand-copy {
  color: #24394d !important;
  text-shadow: none !important;
}

body.dark #helpDialog.guide-wizard-modal .guide-wizard-hero .guide-brand-copy p {
  color: #52687b !important;
}

body.dark #helpDialog.guide-wizard-modal .guide-wizard-hero .guide-brand-copy h3 {
  color: #1d5bd8 !important;
}

body.dark #helpDialog.guide-wizard-modal .guide-wizard-hero .guide-brand-copy ul,
body.dark #helpDialog.guide-wizard-modal .guide-wizard-hero .guide-brand-copy li {
  color: #435a6f !important;
}

/* Task reports must remain visible above editors and native dialogs. */
.toast {
  z-index: 110000 !important;
  top: max(20px, env(safe-area-inset-top)) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  min-width: min(320px, calc(100vw - 32px));
  max-width: min(520px, calc(100vw - 32px)) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px !important;
  border: 1px solid rgba(47, 120, 144, .24);
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .96) !important;
  color: #21313d !important;
  box-shadow: 0 18px 45px rgba(24, 47, 60, .2), 0 2px 8px rgba(24, 47, 60, .08) !important;
  backdrop-filter: blur(18px);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -12px) scale(.98) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

.toast::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b8ea5;
  box-shadow: 0 0 0 4px rgba(59, 142, 165, .14);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1) !important;
  pointer-events: auto;
}

.toast.undoable {
  justify-content: space-between;
  text-align: left;
}

.toast button {
  border-color: rgba(47, 120, 144, .3) !important;
  border-radius: 8px !important;
  background: rgba(47, 120, 144, .08) !important;
  color: #245f72 !important;
}

body.dark .toast {
  border-color: rgba(126, 196, 215, .22);
  background: rgba(21, 31, 40, .96) !important;
  color: #edf6fa !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, .44), 0 2px 10px rgba(0, 0, 0, .25) !important;
}

body.dark .toast::before {
  background: #87d3e4;
  box-shadow: 0 0 0 4px rgba(135, 211, 228, .13);
}

body.dark .toast button {
  border-color: rgba(135, 211, 228, .28) !important;
  background: rgba(135, 211, 228, .09) !important;
  color: #bceaf4 !important;
}

@media (max-width: 640px) {
  .toast {
    top: max(12px, env(safe-area-inset-top)) !important;
    min-width: 0;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px) !important;
    padding: 11px 13px !important;
  }
}

/* Mobile app navigation: anchor to the viewport edge instead of floating above Android controls. */
@media (max-width: 768px) {
  body {
    padding-bottom: 68px !important;
  }

  .mobile-nav.commercial-mobile-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: calc(-1 * var(--mobile-nav-viewport-gap, 0px)) !important;
    min-height: 62px !important;
    gap: 2px !important;
    padding: 5px 8px 4px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, .11) !important;
  }

  .mobile-nav.commercial-mobile-nav button {
    min-height: 50px !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    border-radius: 12px !important;
  }

  .mobile-nav.commercial-mobile-nav .primary {
    min-height: 54px !important;
    margin-top: -5px !important;
    margin-bottom: 0 !important;
    transform: translateY(-4px) !important;
    border-radius: 17px !important;
    box-shadow: 0 10px 24px rgba(23, 107, 135, .24) !important;
  }

  .mobile-nav.commercial-mobile-nav svg {
    width: 18px !important;
    height: 18px !important;
  }

  .mobile-nav.commercial-mobile-nav span {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  .add-menu,
  .add-menu.mobile-add-menu {
    bottom: 70px !important;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    body {
      padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-nav.commercial-mobile-nav {
      min-height: calc(62px + env(safe-area-inset-bottom)) !important;
      padding-bottom: calc(4px + env(safe-area-inset-bottom)) !important;
    }

    .add-menu,
    .add-menu.mobile-add-menu {
      bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* Compact guide actions on phones: two secondary actions, one clear primary action. */
@media (max-width: 560px) {
  #helpDialog.guide-wizard-modal .guide-wizard-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 116px !important;
    height: auto !important;
    gap: 8px !important;
    padding: 9px 12px calc(10px + env(safe-area-inset-bottom)) !important;
  }

  #helpDialog.guide-wizard-modal .guide-wizard-actions button {
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  #helpDialog.guide-wizard-modal .guide-wizard-actions .wizard-primary-btn {
    grid-column: 1 / -1 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
  }
}

/* Safe app UX pass: keep the first-run screen calm without adding runtime layers. */
body.vault-empty .overview,
body.vault-empty #homeDashboard,
body.vault-empty #healthCenter,
body.vault-empty #focusBoard,
body.vault-empty #smartInbox,
body.vault-empty .toolbar,
body.vault-empty #linkGrid,
body.vault-empty #bulkBar {
  display: none !important;
}

body.vault-empty .content {
  display: grid !important;
  min-height: clamp(460px, calc(100vh - 132px), 760px);
  place-items: center;
}

body.vault-empty #emptyState {
  display: grid !important;
  width: min(680px, 100%);
  padding: 42px 36px !important;
  text-align: center;
  border: 1px solid #e5e7eb !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(78, 99, 246, .13), transparent 34%),
    linear-gradient(180deg, #fff, #f8fbff) !important;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .08) !important;
}

body.vault-empty #emptyState.hidden {
  display: grid !important;
}

body.vault-empty .empty-illustration {
  width: 76px !important;
  height: 76px !important;
  margin: 0 auto 18px !important;
  border-radius: 24px !important;
  color: #4f63f6 !important;
  background: #eef3ff !important;
}

body.vault-empty .empty-state h2 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: clamp(1.75rem, 5vw, 2.45rem) !important;
  letter-spacing: 0 !important;
}

body.vault-empty .empty-state p {
  max-width: 480px;
  margin: 12px auto 0 !important;
  color: #64748b !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

body.vault-empty .empty-actions {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px !important;
  margin-top: 24px !important;
}

body.vault-empty #emptyAddBtn::before {
  content: "+ ";
}

body.vault-empty #emptyAddBtn {
  order: 1;
}

body.vault-empty #emptyImportBtn {
  order: 2;
}

body.vault-empty #emptyHelpBtn {
  order: 3;
}

body.vault-empty #emptyClearBtn,
body.vault-empty #emptyDemoBtn {
  display: none !important;
}

.link-advanced-settings {
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fbfdff;
}

.link-advanced-settings > summary {
  cursor: pointer;
  padding: 14px 16px;
  color: #31445a;
  font-weight: 700;
  list-style: none;
}

.link-advanced-settings > summary::-webkit-details-marker {
  display: none;
}

.link-advanced-settings > summary::after {
  content: "+";
  float: right;
  color: #64748b;
}

.link-advanced-settings[open] > summary::after {
  content: "-";
}

.link-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0 16px 16px;
}

.link-advanced-grid .span-2 {
  grid-column: 1 / -1;
}

body.dark.vault-empty #emptyState {
  border-color: rgba(148, 163, 184, .18) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(91, 124, 255, .16), transparent 34%),
    linear-gradient(180deg, #121c27, #0e1722) !important;
}

body.dark.vault-empty .empty-state h2 {
  color: #f8fbff !important;
}

body.dark .link-advanced-settings {
  border-color: rgba(148, 163, 184, .18);
  background: #121c27;
}

@media (max-width: 760px) {
  body.vault-empty .content {
    min-height: calc(100vh - 190px);
    padding-inline: 16px !important;
  }

  body.vault-empty #emptyState {
    padding: 30px 20px !important;
    border-radius: 24px !important;
  }

  body.vault-empty .empty-actions {
    display: grid !important;
    width: 100%;
  }

  body.vault-empty .empty-actions button {
    width: 100%;
    min-height: 46px !important;
    border-radius: 14px !important;
  }

  .link-advanced-grid {
    grid-template-columns: 1fr;
  }
}

/* Header and mobile library polish. */
.topbar-brand-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  color: #172033;
}

.mobile-menu-trigger {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(226, 232, 240, .96);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  color: #172033;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
  cursor: pointer;
}

.mobile-menu-trigger svg {
  width: 21px;
  height: 21px;
}

.mobile-theme-trigger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 1px solid rgba(63, 135, 155, .16);
  border-radius: 13px;
  background: rgba(255, 255, 255, .9);
  color: #315ddc;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.mobile-theme-trigger:active {
  transform: scale(.96);
}

.mobile-theme-trigger svg {
  width: 18px;
  height: 18px;
}

.mobile-theme-trigger .theme-icon-sun {
  display: none;
}

body.dark .mobile-theme-trigger {
  border-color: rgba(125, 211, 252, .22);
  background: rgba(15, 23, 42, .72);
  color: #bae6fd;
}

body.dark .mobile-theme-trigger .theme-icon-moon {
  display: none;
}

body.dark .mobile-theme-trigger .theme-icon-sun {
  display: block;
}

.topbar-brand-inline strong,
.topbar-brand-inline small {
  display: block;
}

.topbar-brand-inline strong {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
}

.topbar-brand-inline small {
  margin-top: 2px;
  color: #6b7280;
  font-size: .76rem;
  font-weight: 600;
}

.topbar-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #4f63f6, #3f879b);
  box-shadow: 0 12px 24px rgba(79, 99, 246, .18);
}

.topbar-brand-mark svg {
  width: 25px;
  height: 25px;
}

.topbar-add-btn {
  min-height: 42px !important;
  border-radius: 14px !important;
  padding-inline: 18px !important;
  white-space: nowrap;
}

.mobile-settings-panel {
  display: none;
}

.top-tools-menu {
  position: relative;
}

.top-tools-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  color: #1f2937;
  cursor: pointer;
  font-weight: 800;
  list-style: none;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.top-tools-menu > summary::-webkit-details-marker {
  display: none;
}

.top-tools-menu > summary svg {
  width: 18px;
  height: 18px;
}

.top-tools-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 90;
  width: 230px;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 46px rgba(15, 23, 42, .13);
}

.top-tools-popover button {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #1f2937;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 11px 12px;
  text-align: left;
}

.top-tools-popover button:hover {
  background: #f2f6ff;
  color: #4f63f6;
}

.top-tools-popover hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 6px 4px;
}

.top-actions .top-import-btn,
.top-actions .top-export-btn {
  display: none !important;
}

body.dark .topbar-brand-inline {
  color: #eef5ff;
}

body.dark .mobile-menu-trigger {
  border-color: rgba(148, 163, 184, .22);
  background: rgba(15, 23, 42, .66);
  color: #e5e7eb;
}

body.dark .topbar-brand-inline small {
  color: #a8b4c5;
}

body.dark .top-tools-menu > summary,
body.dark .top-tools-popover {
  border-color: rgba(148, 163, 184, .18);
  background: #121c27;
  color: #eef5ff;
}

body.dark .top-tools-popover button {
  color: #eef5ff;
}

body.dark .top-tools-popover button:hover {
  background: rgba(96, 165, 250, .14);
}

@media (min-width: 900px) {
  .topbar {
    display: grid !important;
    grid-template-columns: auto minmax(280px, 1fr) auto;
    align-items: center;
    gap: 16px !important;
  }

  .topbar .search-wrap {
    max-width: 720px;
    width: 100%;
    justify-self: center;
  }
}

@media (max-width: 760px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 10px !important;
    padding: 12px 16px 14px !important;
    border-bottom: 1px solid rgba(226, 232, 240, .95);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px);
  }

  .topbar-brand-inline {
    min-width: 0;
    width: 100%;
    gap: 10px;
  }

  .topbar-brand-inline small {
    display: none;
  }

  .mobile-theme-trigger {
    display: inline-flex;
  }

  .topbar-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }

  .topbar .search-wrap {
    width: 100% !important;
    max-width: none !important;
    min-height: 44px !important;
  }

  .top-actions {
    display: none !important;
  }

  body[data-mobile-section="home"]:not(.vault-empty) .toolbar,
  body[data-mobile-section="home"]:not(.vault-empty) .content {
    display: none !important;
  }

  body[data-mobile-section="library"] .overview,
  body[data-mobile-section="library"] #homeDashboard,
  body[data-mobile-section="library"] #healthCenter,
  body[data-mobile-section="library"] #focusBoard,
  body[data-mobile-section="library"] #smartInbox {
    display: none !important;
  }

  body[data-mobile-section="library"] .toolbar,
  body[data-mobile-section="library"] .content {
    display: block !important;
  }

  body[data-mobile-section="search"] .overview,
  body[data-mobile-section="search"] #homeDashboard,
  body[data-mobile-section="search"] #healthCenter,
  body[data-mobile-section="search"] #focusBoard,
  body[data-mobile-section="search"] #smartInbox {
    display: none !important;
  }

  body[data-mobile-section="settings"] .overview,
  body[data-mobile-section="settings"] #homeDashboard,
  body[data-mobile-section="settings"] #healthCenter,
  body[data-mobile-section="settings"] #focusBoard,
  body[data-mobile-section="settings"] #smartInbox,
  body[data-mobile-section="settings"] .toolbar,
  body[data-mobile-section="settings"] .content {
    display: none !important;
  }

  body[data-mobile-section="settings"] .mobile-settings-panel {
    display: block;
  }

  .mobile-settings-panel {
    margin: 16px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .07);
  }

  .mobile-settings-head h2 {
    margin: 4px 0 8px;
    color: #111827;
    font-size: 1.35rem;
    letter-spacing: 0;
  }

  .mobile-settings-head > span {
    display: block;
    color: #64748b;
    font-size: .92rem;
    line-height: 1.55;
  }

  .mobile-settings-grid {
    display: grid;
    gap: 12px;
    margin-top: 18px;
  }

  .mobile-settings-grid button {
    min-height: 82px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fbfdff;
    color: #1f2937;
    cursor: pointer;
    font: inherit;
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .035);
  }

  .mobile-settings-grid strong,
  .mobile-settings-grid span {
    display: block;
  }

  .mobile-settings-grid strong {
    margin-bottom: 5px;
    font-size: 1rem;
    font-weight: 800;
  }

  .mobile-settings-grid span {
    color: #64748b;
    font-size: .88rem;
    line-height: 1.45;
  }

  body.dark .mobile-settings-panel,
  body.dark .mobile-settings-grid button {
    border-color: rgba(148, 163, 184, .18);
    background: #121c27;
  }

  body.dark .mobile-settings-head h2,
  body.dark .mobile-settings-grid button {
    color: #eef5ff;
  }

  body.dark .mobile-settings-head > span,
  body.dark .mobile-settings-grid span {
    color: #a8b4c5;
  }

  .mobile-nav.commercial-mobile-nav button.is-active:not(.primary) {
    color: #4f63f6 !important;
    background: #eef3ff !important;
  }

  .toolbar {
    margin: 14px 16px !important;
    overflow: hidden;
  }

  .toolbar-main {
    display: block !important;
  }

  .toolbar-left,
  .toolbar-right {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .toolbar-left::-webkit-scrollbar,
  .toolbar-right::-webkit-scrollbar {
    display: none;
  }

  .toolbar select,
  .toolbar .ghost-btn,
  .toolbar .check-filter,
  .toolbar .mobile-select-trigger,
  .more-actions summary {
    flex: 0 0 auto;
    min-height: 40px !important;
    border-radius: 999px !important;
    white-space: nowrap;
  }

  .link-grid.view-list,
  .link-grid.view-headlines,
  .link-grid {
    gap: 12px !important;
  }

  .link-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 96px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .link-card .card-main {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .link-card.no-cover .card-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .card-cover {
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 15px !important;
  }

  .card-title-row .favicon {
    display: none;
  }

  .title-block h2 {
    display: -webkit-box;
    overflow: hidden;
    font-size: .94rem !important;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .title-block .domain {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .link-card .note,
  .link-card .knowledge-snippet,
  .link-card .card-meta,
  .link-card .tags:not(:first-of-type) {
    display: none !important;
  }

  .link-card .tags {
    display: flex;
    margin-top: 6px;
    overflow: hidden;
  }

  .link-card .tag {
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .card-footer {
    display: grid !important;
    align-content: center;
    gap: 8px;
    min-width: 42px;
  }

  .card-footer .open-link {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 14px !important;
    text-indent: -999px;
  }

  .card-footer .open-link::after {
    content: ">";
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    text-indent: 0;
    font-size: 18px;
    font-weight: 800;
  }

  .card-actions {
    display: none !important;
  }

  body.dark .topbar {
    background: rgba(14, 23, 34, .94);
    border-color: rgba(148, 163, 184, .18);
  }
}

/* Mobile Library refinement: denser commercial bookmark list. */
@media (max-width: 760px) {
  .app-shell {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .topbar {
    gap: 8px !important;
    padding: 10px 16px 12px !important;
  }

  .topbar-brand-inline {
    gap: 10px !important;
    min-width: 0 !important;
  }

  .mobile-menu-trigger {
    display: grid !important;
    flex: 0 0 40px;
  }

  .topbar-brand-inline strong {
    font-size: 1.12rem !important;
    font-weight: 750 !important;
  }

  .topbar-brand-mark {
    width: 36px !important;
    height: 36px !important;
    border-radius: 13px !important;
  }

  .topbar-brand-mark svg {
    width: 22px !important;
    height: 22px !important;
  }

  .topbar .search-wrap {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
  }

  .topbar .search-wrap input {
    min-height: 42px !important;
    font-size: .95rem !important;
  }

  body[data-mobile-section="library"] .content {
    padding: 8px 14px calc(108px + env(safe-area-inset-bottom)) !important;
  }

  body[data-mobile-section="library"] .toolbar {
    margin: 10px 14px 8px !important;
  }

  body[data-mobile-section="library"] .link-grid,
  body[data-mobile-section="library"] .link-grid.view-list,
  body[data-mobile-section="library"] .link-grid.view-headlines {
    gap: 10px !important;
  }

  body[data-mobile-section="library"] .link-card {
    min-height: 82px !important;
    padding: 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045) !important;
  }

  body[data-mobile-section="library"] .link-card .card-main {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
  }

  body[data-mobile-section="library"] .link-card.no-cover .card-main {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  body[data-mobile-section="library"] .link-card.no-cover .card-main::before {
    content: "";
    width: 48px;
    height: 48px;
    border: 1px solid rgba(79, 99, 246, .14);
    border-radius: 15px;
    background:
      linear-gradient(135deg, rgba(79, 99, 246, .18), rgba(63, 135, 155, .1)),
      #f4f7fb;
  }

  body[data-mobile-section="library"] .card-cover {
    position: relative;
    width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    border-radius: 15px !important;
    background:
      linear-gradient(135deg, rgba(79, 99, 246, .16), rgba(63, 135, 155, .08)),
      #f4f7fb !important;
  }

  body[data-mobile-section="library"] .card-cover.empty {
    color: #4f63f6 !important;
    font-size: 0 !important;
  }

  body[data-mobile-section="library"] .card-cover.empty::before {
    content: "";
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 7px;
    opacity: .78;
  }

  body[data-mobile-section="library"] .cover-favicon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    background: #fff !important;
  }

  body[data-mobile-section="library"] .card-title-row {
    display: block !important;
    min-width: 0 !important;
  }

  body[data-mobile-section="library"] .title-block {
    min-width: 0 !important;
  }

  body[data-mobile-section="library"] .title-block h2 {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: .98rem !important;
    font-weight: 650 !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body[data-mobile-section="library"] .title-block .domain {
    display: block !important;
    margin-top: 3px !important;
    overflow: hidden !important;
    color: #6b7280 !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-mobile-section="library"] .link-card .tags {
    display: none !important;
  }

  body[data-mobile-section="library"] .card-footer {
    min-width: 38px !important;
    align-content: center !important;
  }

  body[data-mobile-section="library"] .card-footer .open-link {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
    background: #eaf4f8 !important;
    color: #2f7890 !important;
    box-shadow: none !important;
  }

  body[data-mobile-section="library"] .card-footer .open-link::after {
    width: 38px !important;
    height: 38px !important;
    font-size: 17px !important;
  }

  .mobile-nav.commercial-mobile-nav {
    left: 10px !important;
    right: 10px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    min-height: 66px !important;
    height: 66px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) !important;
    border-radius: 22px !important;
  }

  .mobile-nav.commercial-mobile-nav button {
    min-height: 48px !important;
    border-radius: 15px !important;
  }

  .mobile-nav.commercial-mobile-nav .primary {
    min-height: 56px !important;
    width: 78px !important;
    max-width: 78px !important;
    margin-top: -12px !important;
    transform: none !important;
    border-radius: 20px !important;
  }

  .mobile-nav.commercial-mobile-nav button.is-active:not(.primary) {
    color: #4f63f6 !important;
    background: rgba(79, 99, 246, .1) !important;
  }

  body.dark[data-mobile-section="library"] .link-card {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(18, 28, 39, .96) !important;
  }

  body.dark[data-mobile-section="library"] .title-block h2 {
    color: #eef5ff !important;
  }

  body.dark[data-mobile-section="library"] .title-block .domain {
    color: #a8b4c5 !important;
  }
}

/* Mobile Library view modes: compact List and readable Headlines. */
@media (max-width: 760px) {
  body[data-mobile-section="library"] .view-studio {
    width: 100% !important;
  }

  body[data-mobile-section="library"] .icon-segmented {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body[data-mobile-section="library"] .view-icon[data-view="cards"],
  body[data-mobile-section="library"] .view-icon[data-view="moodboard"] {
    display: none !important;
  }

  body[data-mobile-section="library"] .view-icon[data-view="list"],
  body[data-mobile-section="library"] .view-icon[data-view="headlines"] {
    display: inline-flex !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    gap: 8px !important;
    justify-content: center !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035) !important;
  }

  body[data-mobile-section="library"] .view-icon[data-view="list"]::after {
    content: "Danh sách";
  }

  body[data-mobile-section="library"] .view-icon[data-view="headlines"]::after {
    content: "Tiêu đề";
  }

  body[data-mobile-section="library"] .view-icon.active {
    border-color: transparent !important;
    background: #3f879b !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(63, 135, 155, .2) !important;
  }

  body[data-mobile-section="library"] .view-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list,
  body[data-mobile-section="library"] .link-grid.view-headlines {
    gap: 9px !important;
    padding-bottom: calc(114px + env(safe-area-inset-bottom)) !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .link-card {
    min-height: 68px !important;
    padding: 10px 11px !important;
    border-radius: 16px !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .card-main {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .link-card.no-cover .card-main {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .link-card.no-cover .card-main::before,
  body[data-mobile-section="library"] .link-grid.view-list .card-cover {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .card-cover.empty::before {
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .cover-favicon {
    width: 22px !important;
    height: 22px !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .card-title-row,
  body[data-mobile-section="library"] .link-grid.view-headlines .card-title-row {
    display: block !important;
    min-width: 0 !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .card-title-row .favicon,
  body[data-mobile-section="library"] .link-grid.view-headlines .card-title-row .favicon {
    display: none !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .title-block h2 {
    display: block !important;
    overflow: hidden !important;
    font-size: .92rem !important;
    font-weight: 650 !important;
    line-height: 1.22 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .title-block .domain {
    margin-top: 3px !important;
    font-size: .74rem !important;
    line-height: 1.25 !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .note,
  body[data-mobile-section="library"] .link-grid.view-list .knowledge-snippet,
  body[data-mobile-section="library"] .link-grid.view-list .card-meta,
  body[data-mobile-section="library"] .link-grid.view-list .tags {
    display: none !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .card-footer,
  body[data-mobile-section="library"] .link-grid.view-headlines .card-footer {
    min-width: 36px !important;
    width: 36px !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .card-footer .open-link,
  body[data-mobile-section="library"] .link-grid.view-headlines .card-footer .open-link {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: rgba(63, 135, 155, .12) !important;
    color: #2f7890 !important;
  }

  body[data-mobile-section="library"] .link-grid.view-list .card-footer .open-link::after,
  body[data-mobile-section="library"] .link-grid.view-headlines .card-footer .open-link::after {
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .link-card {
    min-height: 104px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .card-main {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    gap: 11px !important;
    align-items: start !important;
    min-width: 0 !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .link-card.no-cover .card-main {
    grid-template-columns: 50px minmax(0, 1fr) !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .link-card.no-cover .card-main::before,
  body[data-mobile-section="library"] .link-grid.view-headlines .card-cover {
    display: grid !important;
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 15px !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .title-block h2 {
    display: -webkit-box !important;
    overflow: hidden !important;
    font-size: .99rem !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .title-block .domain {
    margin-top: 5px !important;
    font-size: .78rem !important;
    line-height: 1.3 !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .note {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 6px 0 0 !important;
    color: #6b7280 !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .card-meta {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-top: 7px !important;
    overflow: hidden !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .status-pill,
  body[data-mobile-section="library"] .link-grid.view-headlines .reminder-pill,
  body[data-mobile-section="library"] .link-grid.view-headlines .meta-chip {
    max-width: 120px !important;
    height: 22px !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    font-size: .68rem !important;
    line-height: 22px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body[data-mobile-section="library"] .link-grid.view-headlines .knowledge-snippet,
  body[data-mobile-section="library"] .link-grid.view-headlines .tags {
    display: none !important;
  }

  body.dark[data-mobile-section="library"] .view-icon[data-view="list"],
  body.dark[data-mobile-section="library"] .view-icon[data-view="headlines"] {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(18, 28, 39, .92) !important;
    color: #d8e2f0 !important;
  }

  body.dark[data-mobile-section="library"] .view-icon.active {
    background: #3f879b !important;
    color: #ffffff !important;
  }

  body.dark[data-mobile-section="library"] .link-grid.view-headlines .note {
    color: #a8b4c5 !important;
  }
}

/* Hard lock for mobile Library: prevent older card/grid styles from leaking in. */
@media (max-width: 760px) {
  body[data-mobile-section="library"] .toolbar {
    display: block !important;
    margin: 8px 14px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body[data-mobile-section="library"] .toolbar-main,
  body[data-mobile-section="library"] .toolbar-left {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body[data-mobile-section="library"] .toolbar-context,
  body[data-mobile-section="library"] .view-options,
  body[data-mobile-section="library"] .toolbar-right {
    display: none !important;
  }

  body[data-mobile-section="library"] .link-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 0 calc(116px + env(safe-area-inset-bottom)) !important;
  }

  body[data-mobile-section="library"][data-current-view="list"] .link-card,
  body[data-mobile-section="library"][data-current-view="headlines"] .link-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 1px solid #e5e7eb !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .045) !important;
  }

  body[data-mobile-section="library"][data-current-view="list"] .link-card {
    min-height: 70px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  body[data-mobile-section="library"][data-current-view="headlines"] .link-card {
    min-height: 106px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body[data-mobile-section="library"][data-current-view="list"] .card-main,
  body[data-mobile-section="library"][data-current-view="headlines"] .card-main {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 10px !important;
  }

  body[data-mobile-section="library"][data-current-view="headlines"] .card-main {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body[data-mobile-section="library"][data-current-view="list"] .card-cover,
  body[data-mobile-section="library"][data-current-view="list"] .link-card.no-cover .card-main::before {
    display: grid !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  body[data-mobile-section="library"][data-current-view="headlines"] .card-cover,
  body[data-mobile-section="library"][data-current-view="headlines"] .link-card.no-cover .card-main::before {
    display: grid !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 15px !important;
  }

  body[data-mobile-section="library"] .link-card.no-cover .card-main::before,
  body[data-mobile-section="library"] .card-cover.empty {
    content: "" !important;
    place-items: center !important;
    color: #4f63f6 !important;
    border: 1px solid rgba(79, 99, 246, .14) !important;
    background:
      linear-gradient(135deg, rgba(79, 99, 246, .18), rgba(63, 135, 155, .09)),
      #f4f7fb !important;
  }

  body[data-mobile-section="library"] .card-cover.empty::before {
    content: "" !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid currentColor !important;
    border-radius: 6px !important;
    opacity: .76 !important;
  }

  body[data-mobile-section="library"][data-current-view="headlines"] .card-cover.empty::before {
    width: 21px !important;
    height: 21px !important;
    border-radius: 7px !important;
  }

  body[data-mobile-section="library"] .cover-favicon {
    width: 24px !important;
    height: 24px !important;
    border-radius: 8px !important;
  }

  body[data-mobile-section="library"] .card-title-row {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body[data-mobile-section="library"] .card-title-row .favicon {
    display: none !important;
  }

  body[data-mobile-section="library"] .title-block {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body[data-mobile-section="library"][data-current-view="list"] .title-block h2 {
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: .92rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body[data-mobile-section="library"][data-current-view="headlines"] .title-block h2 {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: .99rem !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body[data-mobile-section="library"] .title-block .domain {
    display: block !important;
    overflow: hidden !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
  }

  body[data-mobile-section="library"][data-current-view="list"] .title-block .domain {
    margin-top: 3px !important;
    font-size: .74rem !important;
    line-height: 1.24 !important;
    white-space: nowrap !important;
  }

  body[data-mobile-section="library"][data-current-view="headlines"] .title-block .domain {
    margin-top: 5px !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
  }

  body[data-mobile-section="library"][data-current-view="list"] .note,
  body[data-mobile-section="library"][data-current-view="list"] .knowledge-snippet,
  body[data-mobile-section="library"][data-current-view="list"] .card-meta,
  body[data-mobile-section="library"][data-current-view="list"] .tags,
  body[data-mobile-section="library"][data-current-view="headlines"] .knowledge-snippet,
  body[data-mobile-section="library"][data-current-view="headlines"] .tags {
    display: none !important;
  }

  body[data-mobile-section="library"][data-current-view="headlines"] .note {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 6px 0 0 !important;
    color: #6b7280 !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  body[data-mobile-section="library"] .card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    gap: 0 !important;
  }

  body[data-mobile-section="library"] .card-actions {
    display: none !important;
  }

  body[data-mobile-section="library"] .card-footer .open-link {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(63, 135, 155, .12) !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  body[data-mobile-section="library"] .card-footer .open-link::after {
    content: "›" !important;
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    color: #2f7890 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  body.dark[data-mobile-section="library"][data-current-view="list"] .link-card,
  body.dark[data-mobile-section="library"][data-current-view="headlines"] .link-card {
    border-color: rgba(148, 163, 184, .18) !important;
    background: rgba(18, 28, 39, .96) !important;
  }

  body.dark[data-mobile-section="library"] .title-block h2 {
    color: #eef5ff !important;
  }

  body.dark[data-mobile-section="library"] .title-block .domain,
  body.dark[data-mobile-section="library"][data-current-view="headlines"] .note {
    color: #a8b4c5 !important;
  }
}

/* Mobile bottom nav position lock: keep footer controls close to the phone bottom. */
@media (max-width: 760px) {
  .mobile-nav.commercial-mobile-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    padding: 5px 10px 6px !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -10px 26px rgba(15, 23, 42, .12) !important;
    transform: none !important;
  }

  .mobile-nav.commercial-mobile-nav button {
    min-height: 50px !important;
    height: 50px !important;
    border-radius: 15px !important;
    transform: none !important;
  }

  .mobile-nav.commercial-mobile-nav .primary {
    width: 72px !important;
    max-width: 72px !important;
    min-height: 54px !important;
    height: 54px !important;
    margin-top: -6px !important;
    border-radius: 18px !important;
    transform: none !important;
  }

  .mobile-nav.commercial-mobile-nav svg {
    width: 18px !important;
    height: 18px !important;
  }

  .mobile-nav.commercial-mobile-nav span {
    font-size: .7rem !important;
    line-height: 1.1 !important;
  }

  .app-shell {
    padding-bottom: 82px !important;
  }

  body[data-mobile-section="library"] .content {
    padding-bottom: 92px !important;
  }

  body[data-mobile-section="library"] .link-grid {
    padding-bottom: 94px !important;
  }
}

/* Share the compact mobile result layout between Library and Search tabs. */
@media (max-width: 760px) {
  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .toolbar {
    display: block !important;
    margin: 8px 14px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .toolbar-main,
  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .toolbar-left {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .toolbar-context,
  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-options,
  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .toolbar-right {
    display: none !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-studio {
    width: 100% !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .icon-segmented {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-icon[data-view="cards"],
  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-icon[data-view="moodboard"] {
    display: none !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-icon[data-view="list"],
  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-icon[data-view="headlines"] {
    display: inline-flex !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    gap: 8px !important;
    justify-content: center !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #374151 !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-icon[data-view="list"]::after {
    content: "Danh sách";
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-icon[data-view="headlines"]::after {
    content: "Tiêu đề";
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-icon.active {
    border-color: transparent !important;
    background: #3f879b !important;
    color: #ffffff !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .view-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .content {
    padding: 8px 14px 96px !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .link-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 0 96px !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .link-card,
  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .link-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 1px solid #e5e7eb !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .045) !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .link-card {
    min-height: 70px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .link-card {
    min-height: 106px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .card-main,
  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .card-main {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 10px !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .card-main {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .card-cover,
  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .link-card.no-cover .card-main::before {
    display: grid !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .card-cover,
  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .link-card.no-cover .card-main::before {
    display: grid !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 15px !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .card-title-row {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .card-title-row .favicon,
  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .card-actions {
    display: none !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .title-block {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .title-block h2 {
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: .92rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .title-block h2 {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: .99rem !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .title-block .domain {
    display: block !important;
    overflow: hidden !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .title-block .domain {
    margin-top: 3px !important;
    font-size: .74rem !important;
    line-height: 1.24 !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .title-block .domain {
    margin-top: 5px !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .note,
  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .knowledge-snippet,
  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .card-meta,
  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="list"] .tags,
  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .knowledge-snippet,
  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .tags {
    display: none !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .note {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 6px 0 0 !important;
    color: #6b7280 !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    gap: 0 !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .card-footer .open-link {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(63, 135, 155, .12) !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  body:is([data-mobile-section="library"], [data-mobile-section="search"]) .card-footer .open-link::after {
    content: "›" !important;
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    color: #2f7890 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  body.dark:is([data-mobile-section="library"], [data-mobile-section="search"]) .title-block h2 {
    color: #eef5ff !important;
  }

  body.dark:is([data-mobile-section="library"], [data-mobile-section="search"]) .title-block .domain,
  body.dark:is([data-mobile-section="library"], [data-mobile-section="search"])[data-current-view="headlines"] .note {
    color: #a8b4c5 !important;
  }
}

/* Final mobile result-view lock for Library and Search. */
@media (max-width: 760px) {
  body.mobile-result-view .toolbar {
    display: block !important;
    margin: 8px 14px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.mobile-result-view .toolbar-main,
  body.mobile-result-view .toolbar-left {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.mobile-result-view .toolbar-context,
  body.mobile-result-view .view-options,
  body.mobile-result-view .toolbar-right {
    display: none !important;
  }

  body.mobile-result-view .view-studio,
  body.mobile-result-view .icon-segmented {
    width: 100% !important;
  }

  body.mobile-result-view .icon-segmented {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body.mobile-result-view .view-icon[data-view="cards"],
  body.mobile-result-view .view-icon[data-view="moodboard"] {
    display: none !important;
  }

  body.mobile-result-view .view-icon[data-view="list"],
  body.mobile-result-view .view-icon[data-view="headlines"] {
    display: inline-flex !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    gap: 8px !important;
    justify-content: center !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #fff !important;
    color: #374151 !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .035) !important;
  }

  body.mobile-result-view .view-icon[data-view="list"]::after {
    content: "Danh sách" !important;
  }

  body.mobile-result-view .view-icon[data-view="headlines"]::after {
    content: "Tiêu đề" !important;
  }

  body.mobile-result-view .view-icon.active {
    border-color: transparent !important;
    background: #3f879b !important;
    color: #fff !important;
    box-shadow: 0 12px 24px rgba(63, 135, 155, .18) !important;
  }

  body.mobile-result-view .view-icon svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto !important;
  }

  body.mobile-result-view .content {
    padding: 8px 14px 96px !important;
  }

  body.mobile-result-view .link-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 0 96px !important;
  }

  body.mobile-result-view[data-current-view="list"] .link-card,
  body.mobile-result-view[data-current-view="headlines"] .link-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 1px solid #e5e7eb !important;
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .045) !important;
  }

  body.mobile-result-view[data-current-view="list"] .link-card {
    min-height: 70px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .link-card {
    min-height: 106px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body.mobile-result-view[data-current-view="list"] .card-main,
  body.mobile-result-view[data-current-view="headlines"] .card-main {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 10px !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .card-main {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  body.mobile-result-view[data-current-view="list"] .card-cover,
  body.mobile-result-view[data-current-view="list"] .link-card.no-cover .card-main::before {
    display: grid !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 13px !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .card-cover,
  body.mobile-result-view[data-current-view="headlines"] .link-card.no-cover .card-main::before {
    display: grid !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 15px !important;
  }

  body.mobile-result-view .card-title-row {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  body.mobile-result-view .card-title-row .favicon,
  body.mobile-result-view .card-actions {
    display: none !important;
  }

  body.mobile-result-view .title-block {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.mobile-result-view[data-current-view="list"] .title-block h2 {
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: .92rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .title-block h2 {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: .99rem !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body.mobile-result-view .title-block .domain {
    display: block !important;
    overflow: hidden !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.mobile-result-view[data-current-view="list"] .title-block .domain {
    margin-top: 3px !important;
    font-size: .74rem !important;
    line-height: 1.24 !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .title-block .domain {
    margin-top: 5px !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
  }

  body.mobile-result-view[data-current-view="list"] .note,
  body.mobile-result-view[data-current-view="list"] .knowledge-snippet,
  body.mobile-result-view[data-current-view="list"] .card-meta,
  body.mobile-result-view[data-current-view="list"] .tags,
  body.mobile-result-view[data-current-view="headlines"] .knowledge-snippet,
  body.mobile-result-view[data-current-view="headlines"] .tags {
    display: none !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .note {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 6px 0 0 !important;
    color: #6b7280 !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  body.mobile-result-view .card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    gap: 0 !important;
  }

  body.mobile-result-view .card-footer .open-link {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(63, 135, 155, .12) !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  body.mobile-result-view .card-footer .open-link::after {
    content: "›" !important;
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    color: #2f7890 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  body.dark.mobile-result-view .title-block h2 {
    color: #eef5ff !important;
  }

  body.dark.mobile-result-view .title-block .domain,
  body.dark.mobile-result-view[data-current-view="headlines"] .note {
    color: #a8b4c5 !important;
  }
}

/* Smooth sidebar accordions: keep this after mobile overrides. */
.commercial-sidebar-nav .commercial-sidebar-item.has-children {
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .12s ease !important;
}

.commercial-sidebar-nav .commercial-sidebar-item.has-children:active {
  transform: scale(.992);
}

.commercial-sidebar-nav .commercial-sidebar-submenu {
  display: grid !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    max-height .24s ease,
    opacity .18s ease,
    transform .22s ease,
    visibility 0s linear .24s !important;
  visibility: hidden;
  will-change: max-height, opacity, transform;
}

.commercial-sidebar-nav .commercial-sidebar-submenu.open {
  max-height: min(48vh, 520px);
  opacity: 1;
  overflow-y: auto;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    max-height .26s ease,
    opacity .16s ease,
    transform .2s ease,
    visibility 0s linear 0s !important;
  visibility: visible;
}

.commercial-sidebar-nav #sidebarCleanupSubmenu.open {
  max-height: 190px;
}

.commercial-sidebar-nav #sidebarContentTypesSubmenu.open {
  max-height: min(48vh, 360px);
}

.commercial-sidebar-nav #sidebarLibrarySubmenu,
.commercial-sidebar-nav #sidebarCollectionsSubmenu,
.commercial-sidebar-nav #sidebarContentTypesSubmenu {
  padding-left: 8px;
}

.commercial-sidebar-nav #sidebarCollectionsSubmenu.open {
  max-height: min(54vh, 460px);
}

.commercial-sidebar-subitem span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.commercial-sidebar-subitem .content-type-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.sidebar-collection-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: stretch;
  min-height: 60px;
  border: 1px solid rgba(63, 135, 155, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  overflow: hidden;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.sidebar-collection-row:hover,
.sidebar-collection-row.active {
  border-color: rgba(63, 135, 155, .2);
  background: rgba(63, 135, 155, .08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
}

.sidebar-collection-main,
.sidebar-collection-delete {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.sidebar-collection-main {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 7px 9px 9px;
  text-align: left;
}

.sidebar-collection-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 9px;
  background: rgba(87, 120, 255, .11);
  color: #2f67e8;
}

.sidebar-collection-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sidebar-collection-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-collection-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #243244;
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.22;
}

.sidebar-collection-copy small {
  color: #6b7c90;
  font-size: .72rem;
  font-weight: 600;
}

.sidebar-collection-main em {
  min-width: 24px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(63, 135, 155, .1);
  color: #366b7c;
  font-size: .7rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.sidebar-collection-delete {
  display: inline-grid;
  place-items: center;
  border-left: 1px solid rgba(63, 135, 155, .1);
  color: #64748b;
  transition: background .16s ease, color .16s ease;
}

.sidebar-library-row {
  appearance: none;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 58px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid rgba(63, 135, 155, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.sidebar-library-row:hover,
.sidebar-library-row:focus-visible,
.sidebar-library-row.active {
  border-color: rgba(63, 135, 155, .2);
  background: rgba(63, 135, 155, .08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
  outline: none;
}

.sidebar-library-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(87, 120, 255, .11);
  color: #2f67e8;
}

.sidebar-library-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sidebar-library-copy strong,
.sidebar-library-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-library-copy strong {
  color: #243244;
  font-size: .84rem;
  font-weight: 750;
}

.sidebar-library-copy small {
  color: #6b7c90;
  font-size: .72rem;
  font-weight: 600;
}

.sidebar-library-row em {
  min-width: 24px;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(63, 135, 155, .1);
  color: #366b7c;
  font-size: .7rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.sidebar-collection-delete:hover,
.sidebar-collection-delete:focus-visible {
  background: rgba(248, 113, 113, .1);
  color: #b91c1c;
  outline: none;
}

body.dark .sidebar-collection-row {
  border-color: rgba(59, 142, 165, .16);
  background: rgba(15, 23, 42, .38);
}

body.dark .sidebar-library-row {
  border-color: rgba(59, 142, 165, .16);
  background: rgba(15, 23, 42, .38);
}

body.dark .sidebar-library-row:hover,
body.dark .sidebar-library-row:focus-visible,
body.dark .sidebar-library-row.active {
  border-color: rgba(59, 142, 165, .3);
  background: rgba(59, 142, 165, .16);
}

body.dark .sidebar-library-copy strong {
  color: #e5e7eb;
}

body.dark .sidebar-library-copy small {
  color: #94a3b8;
}

body.dark .sidebar-library-icon {
  background: rgba(129, 140, 248, .16);
  color: #a5b4fc;
}

body.dark .sidebar-collection-row:hover,
body.dark .sidebar-collection-row.active {
  border-color: rgba(59, 142, 165, .3);
  background: rgba(59, 142, 165, .16);
}

body.dark .sidebar-collection-copy strong {
  color: #e5e7eb;
}

body.dark .sidebar-collection-copy small {
  color: #94a3b8;
}

body.dark .sidebar-collection-icon {
  background: rgba(129, 140, 248, .16);
  color: #a5b4fc;
}

body.dark .sidebar-collection-delete {
  border-left-color: rgba(59, 142, 165, .18);
  color: #94a3b8;
}

.commercial-sidebar-nav .commercial-sidebar-submenu::-webkit-scrollbar {
  width: 6px;
}

.commercial-sidebar-nav .commercial-sidebar-submenu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(63, 135, 155, .28);
}

@media (prefers-reduced-motion: reduce) {
  .commercial-sidebar-nav .commercial-sidebar-item.has-children,
  .commercial-sidebar-nav .commercial-sidebar-submenu {
    transition: none !important;
  }
}

@media (max-width: 760px) {
  body.sidebar-open > .add-menu {
    display: none !important;
  }

  body.sidebar-open .sidebar .add-menu,
  body.sidebar-open .sidebar .add-menu:not(.mobile-add-menu) {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 40 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.sidebar-open .sidebar .add-menu.hidden {
    display: none !important;
  }
}

/* Clear selected states for sidebar and mobile navigation. Keep this near the end so it wins older mobile rules. */
:root {
  --mindlink-menu-active-bg: linear-gradient(135deg, rgba(73, 116, 255, .14), rgba(63, 135, 155, .16));
  --mindlink-menu-active-border: rgba(73, 116, 255, .34);
  --mindlink-menu-active-text: #245f77;
  --mindlink-menu-active-icon-bg: rgba(255, 255, 255, .78);
  --mindlink-menu-active-shadow: 0 10px 24px rgba(47, 103, 232, .12);
}

.commercial-sidebar-nav .commercial-sidebar-item.active,
.commercial-sidebar-nav .commercial-sidebar-item[aria-expanded="true"] {
  border-color: var(--mindlink-menu-active-border) !important;
  background: var(--mindlink-menu-active-bg) !important;
  color: var(--mindlink-menu-active-text) !important;
  box-shadow: var(--mindlink-menu-active-shadow) !important;
}

.commercial-sidebar-nav .commercial-sidebar-item:active,
.commercial-sidebar-subitem:active,
.sidebar-library-row:active,
.sidebar-collection-main:active,
.mobile-nav.commercial-mobile-nav button:active {
  transform: translateY(1px) scale(.99);
}

.commercial-sidebar-subitem.active,
.sidebar-library-row.active,
.sidebar-collection-row.active {
  border-color: var(--mindlink-menu-active-border) !important;
  background: var(--mindlink-menu-active-bg) !important;
  color: var(--mindlink-menu-active-text) !important;
  box-shadow: var(--mindlink-menu-active-shadow) !important;
}

.sidebar-library-row.active .sidebar-library-icon,
.sidebar-collection-row.active .sidebar-collection-icon,
.commercial-sidebar-subitem.active .content-type-icon {
  background: var(--mindlink-menu-active-icon-bg) !important;
  color: #315ddc !important;
}

.sidebar-library-row.active em,
.sidebar-collection-row.active em,
.commercial-sidebar-subitem.active em {
  background: #ffffff !important;
  color: #245f77 !important;
}

.sidebar-library-row.active .sidebar-library-copy strong,
.sidebar-collection-row.active .sidebar-collection-copy strong {
  color: #172033 !important;
}

.sidebar-library-row.active .sidebar-library-copy small,
.sidebar-collection-row.active .sidebar-collection-copy small {
  color: #486274 !important;
}

.mobile-nav.commercial-mobile-nav button.is-active:not(.primary),
.mobile-nav.commercial-mobile-nav button[aria-current="page"]:not(.primary) {
  border-color: var(--mindlink-menu-active-border) !important;
  background: var(--mindlink-menu-active-bg) !important;
  color: #315ddc !important;
  box-shadow: 0 10px 22px rgba(47, 103, 232, .14) !important;
}

.mobile-nav.commercial-mobile-nav button.is-active:not(.primary) svg,
.mobile-nav.commercial-mobile-nav button[aria-current="page"]:not(.primary) svg {
  color: #315ddc !important;
}

body.dark {
  --mindlink-menu-active-bg: linear-gradient(135deg, rgba(96, 165, 250, .22), rgba(59, 142, 165, .24));
  --mindlink-menu-active-border: rgba(125, 211, 252, .36);
  --mindlink-menu-active-text: #dbeafe;
  --mindlink-menu-active-icon-bg: rgba(15, 23, 42, .72);
  --mindlink-menu-active-shadow: 0 12px 28px rgba(14, 165, 233, .14);
}

body.dark .sidebar-library-row.active .sidebar-library-copy strong,
body.dark .sidebar-collection-row.active .sidebar-collection-copy strong {
  color: #f8fafc !important;
}

body.dark .sidebar-library-row.active .sidebar-library-copy small,
body.dark .sidebar-collection-row.active .sidebar-collection-copy small {
  color: #cbd5e1 !important;
}

body.dark .sidebar-library-row.active em,
body.dark .sidebar-collection-row.active em,
body.dark .commercial-sidebar-subitem.active em {
  background: rgba(15, 23, 42, .82) !important;
  color: #bae6fd !important;
}

/* Cover thumbnails should fill their fixed frame in list/headline views. */
.link-grid.view-headlines .card-cover,
.link-grid.view-list .card-cover,
body.mobile-result-view .card-cover {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #edf7fb, #f8fafc) !important;
}

.link-grid.view-headlines .card-cover > img:not(.cover-favicon),
.link-grid.view-list .card-cover > img:not(.cover-favicon),
body.mobile-result-view .card-cover > img:not(.cover-favicon) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.link-grid.view-headlines .card-cover .cover-favicon,
.link-grid.view-list .card-cover .cover-favicon,
body.mobile-result-view .card-cover .cover-favicon {
  display: block !important;
  width: 58% !important;
  height: 58% !important;
  max-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 5px !important;
  border-radius: 11px !important;
  background: rgba(255, 255, 255, .82) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
}

body.mobile-result-view[data-current-view="list"] .card-cover .cover-favicon {
  max-width: 28px !important;
  max-height: 28px !important;
  padding: 4px !important;
}

.link-card.no-cover .card-cover,
.card-cover.empty {
  place-items: center !important;
}

body.dark .link-grid.view-headlines .card-cover,
body.dark .link-grid.view-list .card-cover,
body.dark.mobile-result-view .card-cover {
  background: linear-gradient(145deg, rgba(30, 41, 59, .92), rgba(15, 23, 42, .92)) !important;
}

body.dark .link-grid.view-headlines .card-cover .cover-favicon,
body.dark .link-grid.view-list .card-cover .cover-favicon,
body.dark.mobile-result-view .card-cover .cover-favicon {
  background: rgba(15, 23, 42, .72) !important;
}

/* Stage 1: premium MindLink design system tokens and shared UI polish. */
:root {
  color-scheme: light;
  --primary: #2F80ED;
  --primary-2: #38BDF8;
  --primary-dark: #075985;
  --primary-strong: #075985;
  --primary-soft: #EAF6FF;
  --bg: #F6FAFF;
  --surface: #FFFFFF;
  --surface-2: #F8FBFF;
  --ink: #0F172A;
  --text: #0F172A;
  --text-soft: #334155;
  --muted: #64748B;
  --line: #DCEAF7;
  --border: #DCEAF7;
  --danger: #EF4444;
  --danger-soft: #FFF1F2;
  --warning: #F59E0B;
  --warning-soft: #FFFBEB;
  --success: #10B981;
  --success-soft: #ECFDF5;
  --accent: #F59E0B;
  --green: #10B981;
  --active-bg: #2F80ED;
  --active-ink: #FFFFFF;
  --active-soft: #EAF6FF;
  --hover-soft: #EEF8FF;
  --selected-ring: 0 0 0 3px rgba(47, 128, 237, .16);
  --radius: 18px;
  --commercial-radius: 16px;
  --commercial-radius-lg: 20px;
  --commercial-shadow: 0 18px 44px rgba(15, 23, 42, .08);
  --shadow: 0 18px 44px rgba(15, 23, 42, .08);
  --shadow-soft: 0 10px 26px rgba(15, 23, 42, .055);
}

body.dark {
  color-scheme: dark;
  --primary: #38BDF8;
  --primary-2: #60A5FA;
  --primary-dark: #0284C7;
  --primary-strong: #7DD3FC;
  --primary-soft: rgba(56, 189, 248, .14);
  --bg: #07111F;
  --surface: #0F1B2D;
  --surface-2: #132238;
  --ink: #F8FAFC;
  --text: #F8FAFC;
  --text-soft: #CBD5E1;
  --muted: #94A3B8;
  --line: #24364F;
  --border: #24364F;
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, .14);
  --warning: #FBBF24;
  --warning-soft: rgba(251, 191, 36, .14);
  --success: #34D399;
  --success-soft: rgba(52, 211, 153, .14);
  --accent: #FBBF24;
  --green: #34D399;
  --active-bg: #0284C7;
  --active-ink: #F8FAFC;
  --active-soft: rgba(56, 189, 248, .16);
  --hover-soft: rgba(56, 189, 248, .10);
  --selected-ring: 0 0 0 3px rgba(56, 189, 248, .22);
  --commercial-shadow: none;
  --shadow: none;
  --shadow-soft: none;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Be Vietnam Pro", Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body {
  background:
    radial-gradient(circle at 18% -8%, rgba(56, 189, 248, .14), transparent 32%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 88%, #fff)) !important;
  color: var(--text) !important;
  font-weight: 500;
  letter-spacing: 0 !important;
}

body.dark {
  background:
    radial-gradient(circle at 16% -8%, rgba(56, 189, 248, .16), transparent 31%),
    radial-gradient(circle at 100% 8%, rgba(96, 165, 250, .10), transparent 28%),
    linear-gradient(180deg, #07111F, #091525 64%, #07111F) !important;
}

.app-shell,
.workspace,
.content {
  background: transparent !important;
  color: var(--text) !important;
}

.context-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid rgba(63, 135, 155, .16);
  border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .04);
}

.context-banner.hidden {
  display: none !important;
}

.context-banner-copy h2 {
  margin: 4px 0 6px;
  color: #1f2937;
  font-size: 1.18rem;
  line-height: 1.2;
}

.context-banner-copy p:last-child {
  margin: 0;
  color: #607081;
  font-size: .92rem;
  line-height: 1.5;
}

.context-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.dark .context-banner {
  border-color: rgba(59, 142, 165, .22);
  background: rgba(15, 23, 42, .52);
}

body.dark .context-banner-copy h2 {
  color: #e5e7eb;
}

body.dark .context-banner-copy p:last-child {
  color: #b8c6d6;
}

.sidebar,
.topbar,
.home-dashboard,
.mobile-settings-panel,
.metric,
.legacy-board,
.smart-inbox,
.toolbar,
.link-card,
.modal,
.detail-editor-panel,
.add-menu,
.filter-popover,
.quick-modal,
.account-modal,
.pricing-modal,
.mobile-select-sheet,
.mobile-nav.commercial-mobile-nav,
.commercial-sidebar-nav,
.sidebar-plan-card {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  color: var(--text) !important;
}

.metric,
.legacy-board,
.smart-inbox,
.toolbar,
.link-card,
.modal,
.detail-editor-panel,
.add-menu,
.filter-popover,
.quick-modal,
.account-modal,
.pricing-modal,
.mobile-select-sheet,
.sidebar-plan-card {
  border-radius: var(--commercial-radius-lg) !important;
  box-shadow: var(--shadow-soft) !important;
}

body.dark .metric,
body.dark .legacy-board,
body.dark .smart-inbox,
body.dark .toolbar,
body.dark .link-card,
body.dark .modal,
body.dark .detail-editor-panel,
body.dark .add-menu,
body.dark .filter-popover,
body.dark .quick-modal,
body.dark .account-modal,
body.dark .pricing-modal,
body.dark .mobile-select-sheet,
body.dark .sidebar-plan-card {
  box-shadow: none !important;
}

h1,
h2,
h3,
.brand h1,
.metric-copy strong,
.title-block h2,
.modal-head h2,
.detail-title,
.toolbar-context {
  color: var(--text) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

p,
small,
.muted,
.brand p,
.metric-copy span,
.title-block .domain,
.card-meta,
.toolbar-context + span,
.detail-meta,
.empty-state p {
  color: var(--muted) !important;
}

.primary-action,
button.primary-action,
.detail-action-primary,
.wizard-primary-btn,
.pricing-card .primary-action {
  min-height: 44px;
  border: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-2)) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 26px rgba(47, 128, 237, .20) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.primary-action:hover,
button.primary-action:hover,
.detail-action-primary:hover,
.wizard-primary-btn:hover {
  filter: saturate(1.05) brightness(.97);
  transform: translateY(-1px);
}

body.dark .primary-action,
body.dark button.primary-action,
body.dark .detail-action-primary,
body.dark .wizard-primary-btn {
  color: #06111F !important;
  box-shadow: none !important;
}

.ghost-btn,
.icon-btn,
.detail-action,
.card-action,
.mini-btn,
.segment,
.mobile-select-option,
.top-tools-popover button,
.add-menu button {
  min-height: 40px;
  border-color: var(--border) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2)) !important;
  color: var(--text-soft) !important;
  font-weight: 700 !important;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
}

.ghost-btn:hover,
.icon-btn:hover,
.detail-action:hover,
.card-action:hover,
.mini-btn:hover,
.segment:hover,
.mobile-select-option:hover,
.top-tools-popover button:hover,
.add-menu button:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border)) !important;
  background: var(--primary-soft) !important;
  color: var(--primary-dark) !important;
}

body.dark .ghost-btn:hover,
body.dark .icon-btn:hover,
body.dark .detail-action:hover,
body.dark .card-action:hover,
body.dark .mini-btn:hover,
body.dark .segment:hover,
body.dark .mobile-select-option:hover,
body.dark .top-tools-popover button:hover,
body.dark .add-menu button:hover {
  color: var(--primary) !important;
}

.danger,
.ghost-btn.danger,
.detail-action-danger,
button[data-action="delete"],
button[data-bulk-action="delete"],
button[data-bulk-action="trash"] {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border)) !important;
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.disabled {
  opacity: .62 !important;
  cursor: not-allowed !important;
  filter: saturate(.85) !important;
}

input,
select,
textarea,
.quick-input,
.search-wrap,
.topbar-search,
.mobile-select-trigger {
  border-color: var(--border) !important;
  border-radius: 14px !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 78%, transparent) !important;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.segment:focus-visible,
.chip:focus-visible {
  outline: 0 !important;
  border-color: var(--primary) !important;
  box-shadow: var(--selected-ring) !important;
}

.nav-item.active,
.chip.active,
.segment.active,
.mobile-select-option.active,
.commercial-sidebar-item.active {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border)) !important;
  background: var(--primary-soft) !important;
  color: var(--primary-dark) !important;
}

body.dark .nav-item.active,
body.dark .chip.active,
body.dark .segment.active,
body.dark .mobile-select-option.active,
body.dark .commercial-sidebar-item.active {
  color: var(--primary) !important;
}

.status-pill,
.meta-chip,
.tag,
.collection-pill,
.saved-view-badge {
  border-color: var(--border) !important;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--surface)) !important;
  color: var(--text-soft) !important;
}

.toast {
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  color: var(--text) !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16) !important;
}

body.dark .toast {
  box-shadow: none !important;
}

.modal::backdrop,
dialog::backdrop {
  background: rgba(15, 23, 42, .42) !important;
  backdrop-filter: blur(5px);
}

/* Part 4: compact Add Link drawer and mobile bottom sheet. */
#linkDialog.modal {
  position: fixed !important;
  inset: 18px 18px 18px auto !important;
  width: min(460px, calc(100vw - 36px)) !important;
  max-width: 460px !important;
  max-height: calc(100dvh - 36px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(226, 232, 240, .96) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: -18px 0 48px rgba(15, 23, 42, .16) !important;
}

#linkDialog.modal[open] {
  animation: linkDrawerIn .2s ease-out both;
}

#linkDialog::backdrop {
  background: rgba(15, 23, 42, .36) !important;
  backdrop-filter: blur(5px);
}

#linkDialog #linkForm {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  height: 100% !important;
  max-height: calc(100dvh - 36px) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#linkDialog .modal-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  margin: 0 !important;
  padding: 18px 20px 14px !important;
  border-bottom: 1px solid rgba(226, 232, 240, .82) !important;
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(14px);
}

#linkDialog .modal-head h2 {
  color: #111827 !important;
  font-size: 1.18rem !important;
  font-weight: 780 !important;
  letter-spacing: 0 !important;
}

#linkDialog .form-grid {
  grid-template-columns: 1fr !important;
  gap: 13px !important;
  min-height: 0 !important;
  padding: 18px 20px 10px !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}

#linkDialog .form-grid label span,
#linkDialog .link-advanced-settings > summary {
  color: #64748b !important;
  font-size: .78rem !important;
  font-weight: 780 !important;
  letter-spacing: .01em !important;
}

#linkDialog .form-grid input,
#linkDialog .form-grid select,
#linkDialog .form-grid textarea {
  border-color: #dbe3ea !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: #172033 !important;
  font-size: .94rem !important;
}

#linkDialog .form-grid input,
#linkDialog .form-grid select {
  height: 46px !important;
}

#linkDialog .form-grid textarea {
  min-height: 112px !important;
  resize: vertical !important;
}

#linkDialog .span-2,
#linkDialog .link-advanced-grid .span-2 {
  grid-column: 1 / -1 !important;
}

#linkDialog .smart-preview {
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 10px !important;
  border-radius: 16px !important;
}

#linkDialog .smart-preview-actions {
  grid-column: 1 / -1 !important;
  display: flex !important;
  gap: 8px !important;
}

#linkDialog .smart-preview-actions .ghost-btn {
  flex: 1 1 0 !important;
  min-height: 36px !important;
}

.quick-capture-actions {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border: 1px solid rgba(63, 135, 155, .14) !important;
  border-radius: 16px !important;
  background: #f7fbfc !important;
}

.quick-ai-btn {
  min-height: 40px !important;
  border-color: rgba(63, 135, 155, .24) !important;
  background: #eef8fa !important;
  color: #2f7890 !important;
  font-weight: 800 !important;
}

.quick-capture-actions small {
  min-width: 0 !important;
  color: #64748b !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
}

#linkDialog .link-advanced-settings {
  border-radius: 16px !important;
  background: #f8fafc !important;
}

#linkDialog .link-advanced-settings > summary {
  padding: 13px 14px !important;
}

#linkDialog .link-advanced-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  padding: 0 14px 14px !important;
}

#linkDialog .favorite-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 15px !important;
  background: #fff !important;
}

#linkDialog .favorite-toggle input {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
}

#linkDialog .favorite-toggle span {
  color: #374151 !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}

#linkDialog .modal-actions {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px 20px 18px !important;
  border-top: 1px solid rgba(226, 232, 240, .86) !important;
  background: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(14px);
}

#linkDialog .quick-save-hint {
  color: #64748b !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
}

#linkDialog .modal-actions > div {
  flex: 0 0 auto !important;
}

#linkDialog .modal-actions button {
  min-height: 42px !important;
  border-radius: 14px !important;
}

#linkDialog .modal-actions .primary-action {
  min-width: 132px !important;
}

body.dark #linkDialog.modal {
  border-color: rgba(51, 65, 85, .9) !important;
  background: rgba(15, 23, 42, .98) !important;
  box-shadow: -18px 0 48px rgba(0, 0, 0, .36) !important;
}

body.dark #linkDialog .modal-head,
body.dark #linkDialog .modal-actions {
  border-color: rgba(51, 65, 85, .82) !important;
  background: rgba(15, 23, 42, .96) !important;
}

body.dark #linkDialog .modal-head h2,
body.dark #linkDialog .form-grid input,
body.dark #linkDialog .form-grid select,
body.dark #linkDialog .form-grid textarea,
body.dark #linkDialog .favorite-toggle span {
  color: #eef5ff !important;
}

body.dark #linkDialog .form-grid input,
body.dark #linkDialog .form-grid select,
body.dark #linkDialog .form-grid textarea,
body.dark #linkDialog .favorite-toggle {
  border-color: rgba(71, 85, 105, .86) !important;
  background: rgba(15, 23, 42, .76) !important;
}

body.dark #linkDialog .link-advanced-settings,
body.dark .quick-capture-actions {
  border-color: rgba(71, 85, 105, .72) !important;
  background: rgba(30, 41, 59, .54) !important;
}

@keyframes linkDrawerIn {
  from { opacity: .6; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes linkSheetIn {
  from { opacity: .7; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  #linkDialog.modal {
    inset: auto 10px max(8px, env(safe-area-inset-bottom)) 10px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(86dvh, 720px) !important;
    border-radius: 26px 26px 22px 22px !important;
    box-shadow: 0 -18px 48px rgba(15, 23, 42, .22) !important;
  }

  #linkDialog.modal[open] {
    animation: linkSheetIn .22s ease-out both;
  }

  #linkDialog #linkForm {
    max-height: min(86dvh, 720px) !important;
  }

  #linkDialog .modal-head {
    padding: 14px 16px 12px !important;
  }

  #linkDialog .modal-head::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 7px !important;
    width: 42px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: #dbe3ea !important;
    transform: translateX(-50%) !important;
  }

  #linkDialog .modal-head h2 {
    padding-top: 8px !important;
    font-size: 1.08rem !important;
  }

  #linkDialog .form-grid {
    gap: 11px !important;
    padding: 14px 16px 8px !important;
  }

  #linkDialog .form-grid input,
  #linkDialog .form-grid select {
    height: 44px !important;
  }

  #linkDialog .form-grid textarea {
    min-height: 96px !important;
    max-height: 150px !important;
  }

  .quick-capture-actions {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .quick-ai-btn {
    width: 100% !important;
  }

  #linkDialog .modal-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  }

  #linkDialog .quick-save-hint {
    text-align: center !important;
  }

  #linkDialog .modal-actions > div {
    display: grid !important;
    grid-template-columns: .8fr 1.2fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #linkDialog .modal-actions button,
  #linkDialog .modal-actions .primary-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
  }
}

/* Sidebar brand is intentionally handled by the main header; keep sidebar action-first. */
@media (min-width: 761px) {
  .sidebar {
    padding-top: 18px !important;
    gap: 14px !important;
  }

  .sidebar > .add-menu-wrap:first-child {
    margin-top: 0 !important;
  }

  .sidebar .add-menu-wrap {
    margin-bottom: 2px !important;
  }

  .sidebar .add-menu-wrap > .primary-action {
    min-height: 46px !important;
    border-radius: 14px !important;
  }

  .commercial-sidebar-nav {
    display: grid;
    gap: 16px;
  }

  .commercial-sidebar-nav section {
    display: grid;
    gap: 6px;
  }

  .commercial-sidebar-nav h2 {
    margin: 0 0 2px;
    padding: 0 6px;
    color: #7b8794;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .commercial-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    width: 100%;
    padding: 0 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: #4b5563;
    font-size: .86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
  }

  .commercial-sidebar-item svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: currentColor;
  }

  .commercial-sidebar-item:hover {
    border-color: rgba(63, 135, 155, .16);
    background: rgba(63, 135, 155, .08);
    color: #2f7890;
  }

  .commercial-sidebar-item.active {
    border-color: rgba(63, 135, 155, .16);
    background: rgba(63, 135, 155, .13);
    color: #25677c;
    font-weight: 700;
  }

  .commercial-sidebar-group {
    display: grid;
    gap: 6px;
  }

  .commercial-sidebar-item.has-children > span {
    flex: 1 1 auto;
    min-width: 0;
  }

  .commercial-sidebar-chevron {
    width: 10px;
    height: 10px;
    margin-left: auto;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
    opacity: .8;
  }

  .commercial-sidebar-item[aria-expanded="true"] .commercial-sidebar-chevron {
    transform: rotate(-135deg);
  }

  .commercial-sidebar-submenu {
    display: none;
    gap: 6px;
    padding-left: 18px;
  }

  .commercial-sidebar-submenu.open {
    display: grid;
  }

  .commercial-sidebar-submenu-list {
    display: grid;
    gap: 6px;
  }

  .commercial-sidebar-subitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 40px;
    width: 100%;
    padding: 0 12px;
    border: 1px solid rgba(63, 135, 155, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .76);
    color: #607081;
    font-size: .82rem;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
  }

  .commercial-sidebar-subitem:hover,
  .commercial-sidebar-subitem:focus-visible {
    border-color: rgba(63, 135, 155, .16);
    background: rgba(63, 135, 155, .08);
    color: #25677c;
    outline: none;
  }

  .commercial-sidebar-subitem.active {
    border-color: rgba(63, 135, 155, .18);
    background: rgba(63, 135, 155, .13);
    color: #1f4f5f;
  }

  .commercial-sidebar-subitem.accent {
    color: #315ddc;
  }

  .commercial-sidebar-subitem.danger {
    color: #b45309;
  }

  .commercial-sidebar-subitem em {
    min-width: 22px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(63, 135, 155, .1);
    color: inherit;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    text-align: center;
  }

  .commercial-sidebar-empty {
    padding: 6px 12px 2px;
    color: #8a97a8;
    font-size: .76rem;
    line-height: 1.4;
  }

  .sidebar-plan-card {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding: 12px;
    border: 1px solid rgba(63, 135, 155, .16);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
  }

  .sidebar-plan-card span {
    display: block;
    color: #6b7280;
    font-size: .72rem;
    font-weight: 700;
  }

  .sidebar-plan-card strong {
    display: block;
    margin-top: 2px;
    color: #1f2937;
    font-size: .86rem;
    font-weight: 750;
  }

  .sidebar-plan-card button {
    min-height: 34px;
    border: 0;
    border-radius: 11px;
    background: #e6f3f6;
    color: #25677c;
    font-size: .78rem;
    font-weight: 800;
    cursor: pointer;
  }

  .sidebar > .commercial-control-center,
  .sidebar > .side-heading-main,
  .sidebar > .nav-list,
  .sidebar > .side-section {
    display: none !important;
  }

  body.dark .commercial-sidebar-nav h2 {
    color: #94a3b8;
  }

  body.dark .commercial-sidebar-item {
    color: #cbd5e1;
  }

  body.dark .commercial-sidebar-item:hover,
  body.dark .commercial-sidebar-item.active {
    border-color: rgba(59, 142, 165, .24);
    background: rgba(59, 142, 165, .18);
    color: #9bd9e9;
  }

  body.dark .commercial-sidebar-subitem {
    border-color: rgba(59, 142, 165, .14);
    background: rgba(15, 23, 42, .38);
    color: #b8c6d6;
  }

  body.dark .commercial-sidebar-subitem:hover,
  body.dark .commercial-sidebar-subitem:focus-visible,
  body.dark .commercial-sidebar-subitem.active {
    border-color: rgba(59, 142, 165, .3);
    background: rgba(59, 142, 165, .16);
    color: #dbeafe;
  }

  body.dark .commercial-sidebar-subitem.accent {
    color: #a5b4fc;
  }

  body.dark .commercial-sidebar-subitem.danger {
    color: #fdba74;
  }

  body.dark .commercial-sidebar-empty {
    color: #94a3b8;
  }

  body.dark .sidebar-plan-card {
    border-color: rgba(59, 142, 165, .22);
    background: rgba(15, 23, 42, .46);
  }

  body.dark .sidebar-plan-card strong {
    color: #e5e7eb;
  }

  body.dark .sidebar-plan-card button {
    background: rgba(59, 142, 165, .2);
    color: #9bd9e9;
  }
}

@media (max-width: 760px) {
  .commercial-sidebar-nav {
    display: grid !important;
    gap: 16px !important;
  }

  .sidebar {
    gap: 14px !important;
  }

  .sidebar .add-menu-wrap {
    position: relative !important;
    z-index: 6 !important;
  }

  .sidebar .add-menu:not(.mobile-add-menu) {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    width: auto !important;
    max-width: none !important;
    z-index: 20 !important;
    border-radius: 18px !important;
  }

  .sidebar > .sidebar-plan-card,
  .sidebar > .commercial-control-center,
  .sidebar > .side-control-center,
  .sidebar > .side-heading,
  .sidebar > .side-heading-main,
  .sidebar > .nav-list,
  .sidebar > .side-section,
  .sidebar > .content-type-list,
  .sidebar > .saved-view-list,
  .sidebar > .chip-list {
    display: none !important;
  }

  .commercial-sidebar-nav section {
    display: grid !important;
    gap: 6px !important;
  }

  .commercial-sidebar-nav h2 {
    margin: 0 0 2px !important;
    padding: 0 6px !important;
    color: #7b8794 !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: .11em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  .commercial-sidebar-item {
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 42px !important;
    width: 100% !important;
    padding: 0 11px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: #4b5563 !important;
    font-size: .86rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  .commercial-sidebar-item svg {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    color: currentColor !important;
  }

  .commercial-sidebar-item.active {
    border-color: rgba(63, 135, 155, .16) !important;
    background: rgba(63, 135, 155, .13) !important;
    color: #25677c !important;
    font-weight: 700 !important;
  }

  .commercial-sidebar-group {
    display: grid !important;
    gap: 6px !important;
  }

  .commercial-sidebar-item.has-children > span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .commercial-sidebar-chevron {
    width: 10px !important;
    height: 10px !important;
    margin-left: auto !important;
    border-right: 1.8px solid currentColor !important;
    border-bottom: 1.8px solid currentColor !important;
    transform: rotate(45deg) !important;
    transition: transform .18s ease !important;
    opacity: .8 !important;
  }

  .commercial-sidebar-item[aria-expanded="true"] .commercial-sidebar-chevron {
    transform: rotate(-135deg) !important;
  }

  .commercial-sidebar-submenu {
    display: none !important;
    gap: 6px !important;
    padding-left: 8px !important;
  }

  .commercial-sidebar-submenu.open {
    display: grid !important;
  }

  .commercial-sidebar-submenu-list {
    display: grid !important;
    gap: 6px !important;
  }

  .commercial-sidebar-subitem {
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 38px !important;
    width: 100% !important;
    padding: 0 12px !important;
    border: 1px solid rgba(63, 135, 155, .08) !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .76) !important;
    color: #607081 !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  .commercial-sidebar-subitem.active {
    border-color: rgba(63, 135, 155, .18) !important;
    background: rgba(63, 135, 155, .13) !important;
    color: #1f4f5f !important;
  }

  .commercial-sidebar-subitem.accent {
    color: #315ddc !important;
  }

  .commercial-sidebar-subitem.danger {
    color: #b45309 !important;
  }

  .commercial-sidebar-subitem span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .commercial-sidebar-subitem em {
    min-width: 22px !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: rgba(63, 135, 155, .1) !important;
    color: inherit !important;
    font-size: .68rem !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .commercial-sidebar-empty {
    padding: 6px 12px 2px !important;
    color: #8a97a8 !important;
    font-size: .76rem !important;
    line-height: 1.4 !important;
  }

  body.dark .commercial-sidebar-nav h2 {
    color: #94a3b8 !important;
  }

  body.dark .commercial-sidebar-item {
    color: #cbd5e1 !important;
  }

  body.dark .commercial-sidebar-item.active {
    border-color: rgba(59, 142, 165, .24) !important;
    background: rgba(59, 142, 165, .18) !important;
    color: #9bd9e9 !important;
  }

  body.dark .commercial-sidebar-subitem {
    border-color: rgba(59, 142, 165, .14) !important;
    background: rgba(15, 23, 42, .38) !important;
    color: #b8c6d6 !important;
  }

  body.dark .commercial-sidebar-subitem.active {
    border-color: rgba(59, 142, 165, .3) !important;
    background: rgba(59, 142, 165, .16) !important;
    color: #dbeafe !important;
  }

  body.dark .commercial-sidebar-subitem.accent {
    color: #a5b4fc !important;
  }

  body.dark .commercial-sidebar-subitem.danger {
    color: #fdba74 !important;
  }

  .sidebar-plan-card {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .mobile-nav.commercial-mobile-nav {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 140 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: auto !important;
    height: 72px !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(226, 232, 240, .92) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, .12) !important;
    transform: none !important;
    backdrop-filter: blur(18px);
  }

  .mobile-nav.commercial-mobile-nav button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 56px !important;
    min-height: 56px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-weight: 700 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .mobile-nav.commercial-mobile-nav button svg {
    width: 19px !important;
    height: 19px !important;
  }

  .mobile-nav.commercial-mobile-nav button span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: inherit !important;
    font-size: .69rem !important;
    line-height: 1.05 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-nav.commercial-mobile-nav button.is-active:not(.primary),
  .mobile-nav.commercial-mobile-nav button[aria-current="page"]:not(.primary) {
    background: rgba(79, 70, 229, .10) !important;
    color: #4f46e5 !important;
  }

  .mobile-nav.commercial-mobile-nav .primary {
    height: 62px !important;
    min-height: 62px !important;
    max-width: none !important;
    margin-top: 0 !important;
    border-radius: 20px !important;
    background: #3f879b !important;
    color: #fff !important;
    box-shadow: 0 14px 26px rgba(63, 135, 155, .24) !important;
    transform: translateY(-10px) !important;
  }

  .mobile-nav.commercial-mobile-nav .primary svg {
    width: 21px !important;
    height: 21px !important;
  }

  .mobile-nav.commercial-mobile-nav .primary span {
    font-size: .72rem !important;
  }

  .app-shell,
  .workspace,
  .content,
  .link-grid {
    padding-bottom: 96px !important;
  }

  .add-menu.mobile-add-menu {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(88px + max(8px, env(safe-area-inset-bottom))) !important;
    max-height: min(52dvh, 420px) !important;
  }

  body.dark .mobile-nav.commercial-mobile-nav {
    border-color: rgba(51, 65, 85, .9) !important;
    background: rgba(15, 23, 42, .94) !important;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .35) !important;
  }

  body.dark .mobile-nav.commercial-mobile-nav button {
    color: #94a3b8 !important;
  }

  body.dark .mobile-nav.commercial-mobile-nav button.is-active:not(.primary),
  body.dark .mobile-nav.commercial-mobile-nav button[aria-current="page"]:not(.primary) {
    background: rgba(129, 140, 248, .17) !important;
    color: #c7d2fe !important;
  }
}

/* Part 3: canonical mobile Library/Search result views. */
@media (max-width: 760px) {
  body.mobile-result-view .toolbar {
    margin: 6px 14px 10px !important;
  }

  body.mobile-result-view .icon-segmented {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.mobile-result-view .view-icon[data-view="cards"],
  body.mobile-result-view .view-icon[data-view="moodboard"],
  body.mobile-result-view .view-options {
    display: none !important;
  }

  body.mobile-result-view .view-icon[data-view="list"],
  body.mobile-result-view .view-icon[data-view="headlines"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .96) !important;
    color: #374151 !important;
    font-size: .86rem !important;
    font-weight: 750 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .035) !important;
  }

  body.mobile-result-view .view-icon[data-view="list"]::after {
    content: "Danh sách" !important;
  }

  body.mobile-result-view .view-icon[data-view="headlines"]::after {
    content: "Tiêu đề" !important;
  }

  body.mobile-result-view .view-icon.active {
    border-color: transparent !important;
    background: #3f879b !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(63, 135, 155, .2) !important;
  }

  body.mobile-result-view .link-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 0 0 100px !important;
  }

  body.mobile-result-view[data-current-view="list"] .link-card,
  body.mobile-result-view[data-current-view="headlines"] .link-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 1px solid #e5e7eb !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 5px 16px rgba(15, 23, 42, .045) !important;
  }

  body.mobile-result-view[data-current-view="list"] .link-card {
    min-height: 68px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .link-card {
    min-height: 102px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  body.mobile-result-view[data-current-view="list"] .card-main,
  body.mobile-result-view[data-current-view="headlines"] .card-main {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) !important;
    grid-template-areas:
      "cover title"
      "cover note" !important;
    align-items: center !important;
    gap: 2px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .card-main {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 4px 12px !important;
  }

  body.mobile-result-view .card-cover,
  body.mobile-result-view .link-card.no-cover .card-main::before {
    grid-area: cover !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: linear-gradient(145deg, #eef7fa, #f8fafc) !important;
    color: #3f879b !important;
    box-shadow: inset 0 0 0 1px rgba(63, 135, 155, .08) !important;
  }

  body.mobile-result-view[data-current-view="list"] .card-cover,
  body.mobile-result-view[data-current-view="list"] .link-card.no-cover .card-main::before {
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 13px !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .card-cover,
  body.mobile-result-view[data-current-view="headlines"] .link-card.no-cover .card-main::before {
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 15px !important;
  }

  body.mobile-result-view .card-cover.empty {
    font-size: 0 !important;
  }

  body.mobile-result-view .card-cover.empty::after,
  body.mobile-result-view .link-card.no-cover .card-main::before {
    content: "" !important;
    width: 20px !important;
    height: 20px !important;
    background: currentColor !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 12.5a3.5 3.5 0 0 1 0-4.95l2.12-2.12a3.5 3.5 0 0 1 4.95 4.95l-.88.88-1.42-1.42.88-.88a1.5 1.5 0 0 0-2.12-2.12L9.91 8.96a1.5 1.5 0 1 0 2.12 2.12l.35-.35 1.42 1.42-.35.35a3.5 3.5 0 0 1-4.95 0Zm2.23 2.66.88-.88 1.42 1.42-.88.88a1.5 1.5 0 0 0 2.12 2.12l2.12-2.12a1.5 1.5 0 0 0-2.12-2.12l-.35.35-1.42-1.42.35-.35a3.5 3.5 0 0 1 4.95 4.95l-2.12 2.12a3.5 3.5 0 0 1-4.95-4.95Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.mobile-result-view .card-cover > img:not(.cover-favicon) {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  body.mobile-result-view .card-cover .cover-favicon {
    display: block !important;
    width: 58% !important;
    height: 58% !important;
    max-width: 34px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 5px !important;
    border-radius: 11px !important;
    background: rgba(255, 255, 255, .82) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08) !important;
  }

  body.mobile-result-view[data-current-view="list"] .card-cover .cover-favicon {
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 4px !important;
  }

  body.mobile-result-view .card-cover span,
  body.mobile-result-view .card-cover strong,
  body.mobile-result-view .card-cover .file-cover {
    display: none !important;
  }

  body.mobile-result-view .card-title-row {
    grid-area: title !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.mobile-result-view .card-title-row .favicon,
  body.mobile-result-view .card-actions,
  body.mobile-result-view .card-meta,
  body.mobile-result-view .tags,
  body.mobile-result-view .knowledge-snippet {
    display: none !important;
  }

  body.mobile-result-view .title-block {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.mobile-result-view[data-current-view="list"] .title-block h2 {
    display: block !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: .92rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .title-block h2 {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    color: #1f2937 !important;
    font-size: .98rem !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  body.mobile-result-view .title-block .domain {
    display: block !important;
    overflow: hidden !important;
    margin-top: 3px !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.mobile-result-view[data-current-view="list"] .title-block .domain {
    font-size: .74rem !important;
    line-height: 1.2 !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .title-block .domain {
    font-size: .78rem !important;
    line-height: 1.28 !important;
  }

  body.mobile-result-view .note {
    grid-area: note !important;
    min-width: 0 !important;
  }

  body.mobile-result-view[data-current-view="list"] .note {
    display: none !important;
  }

  body.mobile-result-view[data-current-view="headlines"] .note {
    display: -webkit-box !important;
    overflow: hidden !important;
    margin: 1px 0 0 !important;
    color: #6b7280 !important;
    font-size: .78rem !important;
    line-height: 1.35 !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
  }

  body.mobile-result-view .card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }

  body.mobile-result-view .card-footer .open-link {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: rgba(63, 135, 155, .12) !important;
    color: transparent !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  body.mobile-result-view .card-footer .open-link::after {
    content: "›" !important;
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    color: #2f7890 !important;
    font-size: 20px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  body.dark.mobile-result-view .link-card {
    border-color: rgba(51, 65, 85, .9) !important;
    background: rgba(15, 23, 42, .94) !important;
  }

  body.dark.mobile-result-view .card-cover,
  body.dark.mobile-result-view .link-card.no-cover .card-main::before {
    background: linear-gradient(145deg, rgba(59, 142, 165, .18), rgba(15, 23, 42, .95)) !important;
    color: #9bd9e9 !important;
  }

  body.dark.mobile-result-view .title-block h2 {
    color: #eef5ff !important;
  }

  body.dark.mobile-result-view .title-block .domain,
  body.dark.mobile-result-view[data-current-view="headlines"] .note {
    color: #a8b4c5 !important;
  }
}

/* Final typography pass: keep app text crisp and chips/tags lighter after all view overrides. */
:root {
  --mindlink-font-ui: Inter, "Be Vietnam Pro", Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html,
body,
button,
input,
textarea,
select {
  font-family: var(--mindlink-font-ui) !important;
  font-synthesis-weight: none;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.brand h1,
.app-top-brand strong,
.topbar h1,
.section-title,
.link-card h2,
.title-block h2,
.detail-header h2,
.modal h2 {
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.tag,
.tags .tag,
.chip,
.filter-active-chip,
.status-pill,
.meta-chip,
.collection-pill,
.reminder-pill,
.detail-context-chip,
.file-category-chip,
.import-pill,
.smart-zero-chip,
.smart-tab-chip,
.health-issue-rail .smart-tab-chip {
  font-family: var(--mindlink-font-ui) !important;
  font-weight: 540 !important;
  letter-spacing: 0 !important;
}

.tag,
.tags .tag,
.status-pill,
.meta-chip,
.collection-pill,
.reminder-pill,
.detail-context-chip {
  min-height: 23px !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  font-size: .74rem !important;
  line-height: 1.15 !important;
}

.chip,
.filter-active-chip,
.file-category-chip,
.import-pill {
  font-weight: 560 !important;
}

.link-card .tags {
  gap: 6px !important;
}

body.mobile-result-view .tag,
body.mobile-result-view .status-pill,
body.mobile-result-view .meta-chip,
body.mobile-result-view .collection-pill,
body.mobile-result-view .reminder-pill,
body.mobile-result-view .detail-context-chip {
  min-height: 21px !important;
  padding: 3px 7px !important;
  font-size: .68rem !important;
  font-weight: 520 !important;
}

.mobile-card-actions {
  display: none;
}

@media (max-width: 760px) {
  body.mobile-result-view .card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 76px !important;
    max-width: 82px !important;
  }

  body.mobile-result-view .mobile-card-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  body.mobile-result-view .mobile-card-action {
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #64748b !important;
    box-shadow: none !important;
  }

  body.mobile-result-view .mobile-card-action svg {
    width: 15px !important;
    height: 15px !important;
  }

  body.mobile-result-view .mobile-card-action.delete {
    border-color: rgba(185, 85, 69, .24) !important;
    background: rgba(185, 85, 69, .08) !important;
    color: #b55345 !important;
  }

  body.mobile-result-view .mobile-card-action.restore {
    border-color: rgba(63, 125, 88, .24) !important;
    background: rgba(63, 125, 88, .10) !important;
    color: #3f7d58 !important;
  }

  body.mobile-result-view .card-footer .open-link {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  body.mobile-result-view .card-footer .open-link::after {
    width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }

  body.dark.mobile-result-view .mobile-card-action {
    border-color: rgba(51, 65, 85, .92) !important;
    background: rgba(15, 23, 42, .72) !important;
    color: #a8b4c5 !important;
  }

  body.dark.mobile-result-view .mobile-card-action.delete {
    border-color: rgba(248, 113, 113, .28) !important;
    background: rgba(127, 29, 29, .26) !important;
    color: #fca5a5 !important;
  }

  body.dark.mobile-result-view .mobile-card-action.restore {
    border-color: rgba(74, 222, 128, .22) !important;
    background: rgba(20, 83, 45, .26) !important;
    color: #86efac !important;
  }
}

/* Robust cover loading: keep a clean favicon/domain fallback behind every web preview. */
.card-cover,
.review-cover {
  position: relative !important;
}

.card-cover > img:not(.cover-favicon),
.review-cover > img:not(.cover-favicon),
.card-cover > .cover-fallback,
.review-cover > .cover-fallback {
  grid-area: 1 / 1 !important;
}

.card-cover > img:not(.cover-favicon),
.review-cover > img:not(.cover-favicon) {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
  opacity: 0 !important;
  transition: opacity .18s ease !important;
}

.card-cover.has-image > img:not(.cover-favicon),
.review-cover.has-image > img:not(.cover-favicon) {
  opacity: 1 !important;
}

.cover-fallback {
  position: relative !important;
  z-index: 1 !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  place-items: center !important;
  gap: 8px !important;
  padding: 12px !important;
  color: var(--muted) !important;
  text-align: center !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

.card-cover.empty > .cover-fallback,
.review-cover.empty > .cover-fallback,
.card-cover:not(.has-image) > .cover-fallback,
.review-cover:not(.has-image) > .cover-fallback {
  display: grid !important;
}

.card-cover.has-image > .cover-fallback,
.review-cover.has-image > .cover-fallback {
  display: none !important;
}

.card-cover.is-retrying,
.review-cover.is-retrying {
  background:
    linear-gradient(90deg, rgba(226, 232, 240, .18), rgba(226, 232, 240, .55), rgba(226, 232, 240, .18)),
    var(--surface-2) !important;
  background-size: 180% 100% !important;
  animation: mindlink-cover-pulse 1.1s ease-in-out infinite !important;
}

@keyframes mindlink-cover-pulse {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* Final mobile tab bar lock: keep the app navigation close to the real phone bottom. */
@media (max-width: 760px) {
  .mobile-nav.commercial-mobile-nav {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    z-index: 1200 !important;
    min-height: calc(64px + env(safe-area-inset-bottom)) !important;
    height: auto !important;
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom)) !important;
    border-radius: 22px 22px 16px 16px !important;
  }

  .mobile-nav.commercial-mobile-nav .primary {
    transform: translateY(-8px) !important;
    margin: 0 !important;
  }

  .mobile-nav.commercial-mobile-nav button {
    min-height: 52px !important;
    padding: 6px !important;
  }

  .mobile-nav.commercial-mobile-nav button:not(.primary) {
    border-radius: 16px !important;
  }

  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
  }

  .workspace,
  .main-content,
  .library-results,
  .mobile-result-view .workspace {
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
  }
}